fb-slides 0.9.1 → 0.10.0

package/CHANGELOG.md

@@ -7,6 +7,14 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fb-slides",
-  "version": "0.9.1",
+  "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

@@ -167,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');
@@ -266,6 +292,7 @@ export const createAssets = ({ paste, active }) => {
     nameRow.hidden = true;
     waiting.hidden = true;
     closeConfirm();
+    closePreview();
   };
 
   // ---- the rows ---------------------------------------------------------
@@ -309,10 +336,20 @@ export const createAssets = ({ paste, active }) => {
         `<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 = file.path;
+      const name = row.querySelector('code');
+      name.textContent = file.path;
       // The drawer is narrow and a path can be long: the row truncates, and
-      // hovering it says the whole thing.
-      row.title = file.path;
+      // 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),
@@ -535,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,
@@ -546,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);
@@ -1869,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'] {