@kenjura/ursa 0.88.0 → 0.90.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# 0.90.0
+2026-08-26
+
+Article images get a zoom and a download button on hover, and a full-screen viewer behind the zoom.
+
+Images in a built site are downscaled WebP previews — 800px at quality 80 — wrapped in a link to the original. That is right for page weight and wrong for looking at anything: the only way to see the pixels that were actually shot was to click through to a raw image file in a new tab, losing the page, and the only way to keep a copy was the browser's context menu, which on that page would have saved the preview rather than the original.
+
+- **Hover controls** on every article image large enough to be a picture rather than an icon (80px in both axes). Zoom opens the viewer; download saves the **original** — not the preview — under its own filename. On touch devices, where there is no hover, they are simply always visible.
+- **The viewer** opens the original at native resolution when it fits the viewport, and contained within it when it does not, over the standard translucent black backdrop. It loads the preview first as a placeholder, so a multi-megabyte original arrives into a full-size blurred image rather than an empty box.
+- **Zoom in/out appear only when there is resolution left to see** — an image already showing every pixel it has gets no zoom controls. Steps of 1.5× between contain-fit and 100%, keeping the centre of the view fixed; drag to pan, double-click to toggle fit and 100%.
+- **Closing**: the backdrop, the letterboxing around the image, the X, or Escape. Tab stays inside the dialog while it is open, and focus returns to where it was on close.
+- `meta/templates/default-template/lightbox.js` and `lightbox.css`, picked up by the existing asset bundler; `data-no-lightbox` on an image or any ancestor opts out.
+
+Clicking the image itself is unchanged — it still opens the original in a new tab.
+
+# 0.89.0
+2026-08-20
+
+Fixed `generate` dropping every static file that was not an image or an HTML page — fonts, video, audio, PDFs. A site that used any of them worked perfectly in `ursa serve` and shipped broken.
+
+`serve` reads static files straight off disk through one list of extensions, while `generate` had two narrower ideas of what to copy: images, and `.html`. Nothing else ever reached the output. Because dev and build disagreed rather than both being wrong, the gap was invisible until deploy — and then invisible again, since a static host that rewrites 404s to `index.html` answers a missing `.mp4` with a page of HTML rather than an error.
+
+- **`generate` now copies fonts, audio, video, documents and archives**: `woff`, `woff2`, `ttf`, `eot`, `otf`, `pdf`, `mp3`, `m4a`, `wav`, `flac`, `mp4`, `m4v`, `webm`, `ogv`, `ogg`, `zip`. Images keep their own path, because they also get previews.
+- **One shared list**, in `helper/staticAssets.js`, used by both `generate` and `serve`, so they cannot drift apart again. It is the drift, not either list, that caused this.
+- The static-files progress line now counts HTML and media separately.
+
 # 0.88.0
 2026-08-19
 

package/meta/templates/default-template/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>${title}</title>
     <link rel="stylesheet" href="/public/default.css" />
+    <link rel="stylesheet" href="/public/lightbox.css" />
     ${styleLink}
 </head>
 
@@ -122,6 +123,7 @@
     <script src="/public/widgets.js"></script>
     <script src="/public/sectionify.js"></script>
     <script src="/public/sticky.js"></script>
+    <script src="/public/lightbox.js"></script>
     ${customScript}
 </body>
 

package/meta/templates/default-template/lightbox.css

@@ -0,0 +1,248 @@
+/* Image hover controls and the full-screen viewer (see lightbox.js). */
+
+/* --- hover controls --- */
+
+.ursa-image-frame {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  line-height: 0;
+}
+
+.ursa-image-controls {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  gap: 6px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  line-height: 0;
+}
+
+.ursa-image-frame:hover .ursa-image-controls,
+.ursa-image-frame:focus-within .ursa-image-controls {
+  opacity: 1;
+}
+
+/* No hover to reveal them on touch devices, so keep them visible but quiet. */
+@media (hover: none) {
+  .ursa-image-controls {
+    opacity: 0.65;
+  }
+}
+
+.ursa-image-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.55);
+  color: white;
+  cursor: pointer;
+  backdrop-filter: blur(2px);
+  transition: background-color 0.15s ease;
+}
+
+.ursa-image-btn:hover,
+.ursa-image-btn:focus-visible {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.ursa-image-btn svg {
+  width: 17px;
+  height: 17px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* --- full-screen viewer --- */
+
+body.ursa-lightbox-open {
+  overflow: hidden;
+}
+
+.ursa-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+}
+
+.ursa-lightbox[hidden] {
+  display: none;
+}
+
+.ursa-lightbox-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.85);
+}
+
+.ursa-lightbox-stage {
+  position: relative;
+  flex: 1;
+  display: flex;
+  overflow: auto;
+  padding: 32px;
+  box-sizing: border-box;
+  outline: none;
+  overscroll-behavior: contain;
+}
+
+/* margin:auto centres the image while it fits, and collapses to 0 once it is
+   larger than the stage, so the overflow stays scrollable in both directions. */
+.ursa-lightbox-image {
+  margin: auto;
+  display: block;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.ursa-lightbox-image.is-placeholder {
+  filter: blur(1px);
+}
+
+.ursa-lightbox-stage.is-pannable {
+  cursor: grab;
+}
+
+.ursa-lightbox-stage.is-panning {
+  cursor: grabbing;
+}
+
+/* Centred over the blurred placeholder, clear of the toolbar. */
+.ursa-lightbox-loading {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  padding: 10px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.55);
+  pointer-events: none;
+}
+
+.ursa-lightbox-loading[hidden] {
+  display: none;
+}
+
+.ursa-lightbox-loading .ursa-spinner {
+  width: 18px;
+  height: 18px;
+  border-color: rgba(255, 255, 255, 0.3);
+  border-top-color: rgba(255, 255, 255, 0.9);
+}
+
+.ursa-lightbox-toolbar {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(2px);
+}
+
+.ursa-lightbox-zoom {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.ursa-lightbox-zoom[hidden] {
+  display: none;
+}
+
+.ursa-lightbox-level {
+  min-width: 3.5em;
+  text-align: center;
+  color: white;
+  font-family: sans-serif;
+  font-size: 0.8rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.ursa-lightbox-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: white;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+}
+
+.ursa-lightbox-btn:hover,
+.ursa-lightbox-btn:focus-visible {
+  background: rgba(255, 255, 255, 0.18);
+}
+
+.ursa-lightbox-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+  background: transparent;
+}
+
+.ursa-lightbox-btn svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.ursa-lightbox-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  cursor: pointer;
+  backdrop-filter: blur(2px);
+  transition: background-color 0.15s ease;
+}
+
+.ursa-lightbox-close:hover,
+.ursa-lightbox-close:focus-visible {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+.ursa-lightbox-close svg {
+  width: 22px;
+  height: 22px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+}

package/meta/templates/default-template/lightbox.js

@@ -0,0 +1,432 @@
+/**
+ * Image lightbox.
+ *
+ * Adds a zoom and a download button to every article image on hover, and a
+ * full-screen viewer behind the zoom button.
+ *
+ * Article images are served as downscaled WebP previews (see
+ * helper/imageProcessor.js), wrapped in <a class="image-link" href="original">.
+ * The viewer therefore loads the anchor's href, not the img's own src — the
+ * preview is only used as an instant placeholder while the original arrives.
+ */
+(() => {
+  // Rendered smaller than this in either axis and it is an icon, not a picture.
+  const MIN_RENDERED_SIZE = 80;
+  const ZOOM_STEP = 1.5;
+  const IMAGE_HREF = /\.(jpe?g|png|gif|webp|svg|avif|bmp|ico)(?:[?#]|$)/i;
+
+  const ICON_ZOOM =
+    '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">' +
+    '<circle cx="10.5" cy="10.5" r="6.5" /><path d="M15.5 15.5 L21 21" />' +
+    '<path d="M7.5 10.5h6M10.5 7.5v6" /></svg>';
+  const ICON_DOWNLOAD =
+    '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">' +
+    '<path d="M12 3.5v11" /><path d="M7.5 10.5 12 15l4.5-4.5" />' +
+    '<path d="M4.5 18.5h15" /></svg>';
+  const ICON_CLOSE =
+    '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">' +
+    '<path d="M5.5 5.5l13 13M18.5 5.5l-13 13" /></svg>';
+
+  let viewer = null; // built on first use
+
+  /** Filename to offer the download as, taken from the URL. */
+  function fileNameFor(url) {
+    try {
+      const name = new URL(url, window.location.href).pathname.split('/').pop();
+      return decodeURIComponent(name) || 'image';
+    } catch {
+      return 'image';
+    }
+  }
+
+  /** Same file, ignoring cache-busting query strings? */
+  function samePath(a, b) {
+    try {
+      const ua = new URL(a, window.location.href);
+      const ub = new URL(b, window.location.href);
+      return ua.origin === ub.origin && ua.pathname === ub.pathname;
+    } catch {
+      return a === b;
+    }
+  }
+
+  /** The full-resolution URL for an article image. */
+  function fullSizeUrl(img) {
+    const link = img.closest('a');
+    const href = link && link.getAttribute('href');
+    if (link && href && (link.classList.contains('image-link') || IMAGE_HREF.test(href))) {
+      return link.href;
+    }
+    return img.currentSrc || img.src;
+  }
+
+  function runWhenSized(img, fn) {
+    if (img.complete && img.naturalWidth) fn();
+    else img.addEventListener('load', fn, { once: true });
+  }
+
+  // --- hover controls -------------------------------------------------------
+
+  function buildControls(img, url) {
+    const bar = document.createElement('span');
+    bar.className = 'ursa-image-controls';
+
+    const zoom = document.createElement('button');
+    zoom.type = 'button';
+    zoom.className = 'ursa-image-btn';
+    zoom.title = 'View full size';
+    zoom.setAttribute('aria-label', 'View full size');
+    zoom.innerHTML = ICON_ZOOM;
+    zoom.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      open(img, url);
+    });
+
+    const download = document.createElement('a');
+    download.className = 'ursa-image-btn';
+    download.href = url;
+    download.download = fileNameFor(url);
+    download.title = 'Download image';
+    download.setAttribute('aria-label', 'Download image');
+    download.innerHTML = ICON_DOWNLOAD;
+    // Stop the click reaching an enclosing <a class="image-link">.
+    download.addEventListener('click', (e) => e.stopPropagation());
+
+    bar.appendChild(zoom);
+    bar.appendChild(download);
+    return bar;
+  }
+
+  function decorate(img) {
+    if (img.dataset.ursaLightbox) return;
+    if (img.closest('[data-no-lightbox]')) return;
+
+    const url = fullSizeUrl(img);
+    if (!url) return;
+
+    runWhenSized(img, () => {
+      const rect = img.getBoundingClientRect();
+      // Fall back to the intrinsic size for images that are not laid out yet.
+      const w = rect.width || img.naturalWidth;
+      const h = rect.height || img.naturalHeight;
+      if (Math.min(w, h) < MIN_RENDERED_SIZE) return;
+      if (img.dataset.ursaLightbox) return;
+      img.dataset.ursaLightbox = 'on';
+
+      // Wrap the anchor rather than the image when there is one, so the
+      // controls sit outside it and their clicks are not swallowed by the link.
+      const link = img.closest('a.image-link');
+      const wrapped = link && link.parentNode ? link : img;
+      const frame = document.createElement('span');
+      frame.className = 'ursa-image-frame';
+      wrapped.parentNode.insertBefore(frame, wrapped);
+      frame.appendChild(wrapped);
+      frame.appendChild(buildControls(img, url));
+    });
+  }
+
+  // --- viewer ---------------------------------------------------------------
+
+  function ensureViewer() {
+    if (viewer) return viewer;
+
+    const el = document.createElement('div');
+    el.className = 'ursa-lightbox';
+    el.setAttribute('role', 'dialog');
+    el.setAttribute('aria-modal', 'true');
+    el.setAttribute('aria-label', 'Image viewer');
+    el.hidden = true;
+    el.innerHTML =
+      '<div class="ursa-lightbox-backdrop"></div>' +
+      '<div class="ursa-lightbox-stage" tabindex="-1">' +
+        '<img class="ursa-lightbox-image" alt="">' +
+      '</div>' +
+      '<div class="ursa-lightbox-loading" hidden><span class="ursa-spinner"></span></div>' +
+      '<div class="ursa-lightbox-toolbar">' +
+        '<span class="ursa-lightbox-zoom" hidden>' +
+          '<button type="button" class="ursa-lightbox-btn" data-zoom="out" title="Zoom out" aria-label="Zoom out">&minus;</button>' +
+          '<span class="ursa-lightbox-level">100%</span>' +
+          '<button type="button" class="ursa-lightbox-btn" data-zoom="in" title="Zoom in" aria-label="Zoom in">+</button>' +
+        '</span>' +
+        '<a class="ursa-lightbox-btn ursa-lightbox-download" download title="Download image" aria-label="Download image">' + ICON_DOWNLOAD + '</a>' +
+      '</div>' +
+      '<button type="button" class="ursa-lightbox-close" title="Close (Esc)" aria-label="Close">' + ICON_CLOSE + '</button>';
+    document.body.appendChild(el);
+
+    viewer = {
+      el,
+      stage: el.querySelector('.ursa-lightbox-stage'),
+      img: el.querySelector('.ursa-lightbox-image'),
+      loading: el.querySelector('.ursa-lightbox-loading'),
+      zoomGroup: el.querySelector('.ursa-lightbox-zoom'),
+      level: el.querySelector('.ursa-lightbox-level'),
+      zoomIn: el.querySelector('[data-zoom="in"]'),
+      zoomOut: el.querySelector('[data-zoom="out"]'),
+      download: el.querySelector('.ursa-lightbox-download'),
+      natural: { w: 0, h: 0 },
+      scale: 1,
+      fitScale: 1,
+      ready: false,
+      zoomable: false,
+      atFit: true,
+      lastFocus: null,
+      token: 0,
+      dragged: false,
+    };
+
+    el.querySelector('.ursa-lightbox-backdrop').addEventListener('click', close);
+    el.querySelector('.ursa-lightbox-close').addEventListener('click', close);
+    // Letterbox area around the image closes too; a drag that ends there does not.
+    viewer.stage.addEventListener('click', (e) => {
+      if (e.target === viewer.stage && !viewer.dragged) close();
+    });
+    viewer.zoomIn.addEventListener('click', () => zoomBy(ZOOM_STEP));
+    viewer.zoomOut.addEventListener('click', () => zoomBy(1 / ZOOM_STEP));
+    viewer.img.addEventListener('dblclick', () => {
+      if (!viewer.zoomable) return;
+      zoomTo(viewer.atFit ? 1 : viewer.fitScale);
+    });
+
+    enablePanning(viewer.stage);
+    window.addEventListener('resize', () => {
+      if (!el.hidden && viewer.ready) relayout();
+    });
+
+    return viewer;
+  }
+
+  /** Drag anywhere on the stage to pan a zoomed-in image. */
+  function enablePanning(stage) {
+    let panning = false;
+    let start = null;
+
+    stage.addEventListener('pointerdown', (e) => {
+      if (e.button !== 0) return;
+      // Cleared on every press, not just pannable ones: a stale flag from an
+      // earlier pan would otherwise swallow the next click-to-close.
+      viewer.dragged = false;
+      if (stage.scrollWidth <= stage.clientWidth && stage.scrollHeight <= stage.clientHeight) return;
+      panning = true;
+      start = { x: e.clientX, y: e.clientY, left: stage.scrollLeft, top: stage.scrollTop };
+      stage.setPointerCapture(e.pointerId);
+      stage.classList.add('is-panning');
+    });
+
+    stage.addEventListener('pointermove', (e) => {
+      if (!panning) return;
+      const dx = e.clientX - start.x;
+      const dy = e.clientY - start.y;
+      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) viewer.dragged = true;
+      stage.scrollLeft = start.left - dx;
+      stage.scrollTop = start.top - dy;
+    });
+
+    const end = (e) => {
+      if (!panning) return;
+      panning = false;
+      stage.classList.remove('is-panning');
+      try { stage.releasePointerCapture(e.pointerId); } catch {}
+    };
+    stage.addEventListener('pointerup', end);
+    stage.addEventListener('pointercancel', end);
+  }
+
+  /**
+   * Run a layout pass now and again on the next frame. A dialog that has just
+   * been unhidden can still report a flex-unresolved stage width in the same
+   * task, which would size the image to nothing.
+   */
+  function layoutTwice(fn) {
+    fn();
+    requestAnimationFrame(fn);
+  }
+
+  /** Space available for the image, inside the stage's padding. */
+  function stageSize() {
+    const style = getComputedStyle(viewer.stage);
+    const padX = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+    const padY = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+    return {
+      w: Math.max(1, viewer.stage.clientWidth - padX),
+      h: Math.max(1, viewer.stage.clientHeight - padY),
+    };
+  }
+
+  function containScale(w, h) {
+    const stage = stageSize();
+    return Math.min(stage.w / w, stage.h / h);
+  }
+
+  function applyScale(scale) {
+    viewer.scale = scale;
+    viewer.img.style.width = Math.round(viewer.natural.w * scale) + 'px';
+    viewer.img.style.height = Math.round(viewer.natural.h * scale) + 'px';
+    viewer.atFit = Math.abs(scale - viewer.fitScale) < 0.001;
+    updateZoomControls();
+  }
+
+  function updateZoomControls() {
+    viewer.zoomGroup.hidden = !viewer.zoomable;
+    viewer.level.textContent = Math.round(viewer.scale * 100) + '%';
+    viewer.zoomIn.disabled = viewer.scale >= 1 - 0.001;
+    viewer.zoomOut.disabled = viewer.scale <= viewer.fitScale + 0.001;
+    viewer.stage.classList.toggle('is-pannable', viewer.scale > viewer.fitScale + 0.001);
+  }
+
+  /** Zoom, keeping whatever is at the centre of the stage at the centre. */
+  function zoomTo(next) {
+    const stage = viewer.stage;
+    const clamped = Math.min(1, Math.max(viewer.fitScale, next));
+    if (Math.abs(clamped - viewer.scale) < 0.001) return;
+
+    const before = viewer.img.getBoundingClientRect();
+    const stageRect = stage.getBoundingClientRect();
+    const centreX = stageRect.left + stageRect.width / 2;
+    const centreY = stageRect.top + stageRect.height / 2;
+    const pointX = (centreX - before.left) / viewer.scale;
+    const pointY = (centreY - before.top) / viewer.scale;
+
+    applyScale(clamped);
+
+    const after = viewer.img.getBoundingClientRect();
+    stage.scrollLeft += after.left + pointX * clamped - centreX;
+    stage.scrollTop += after.top + pointY * clamped - centreY;
+  }
+
+  function zoomBy(factor) {
+    if (!viewer.ready || !viewer.zoomable) return;
+    zoomTo(viewer.scale * factor);
+  }
+
+  /** Fit the loaded original: native resolution if it fits, contained if not. */
+  function relayout() {
+    const wasAtFit = viewer.atFit;
+    viewer.fitScale = containScale(viewer.natural.w, viewer.natural.h);
+    // Zoom controls are only meaningful while there is unseen resolution left.
+    viewer.zoomable = viewer.fitScale < 1 - 0.001;
+    const target = wasAtFit
+      ? Math.min(1, viewer.fitScale)
+      : Math.min(1, Math.max(viewer.fitScale, viewer.scale));
+    applyScale(target);
+    viewer.atFit = Math.abs(target - Math.min(1, viewer.fitScale)) < 0.001;
+  }
+
+  function open(img, url) {
+    const v = ensureViewer();
+    const token = ++v.token;
+
+    v.lastFocus = document.activeElement;
+    v.img.alt = img.alt || '';
+    v.download.href = url;
+    v.download.download = fileNameFor(url);
+    v.ready = false;
+    v.zoomable = false;
+    v.zoomGroup.hidden = true;
+    v.stage.scrollTop = 0;
+    v.stage.scrollLeft = 0;
+
+    // Reveal first: the stage cannot be measured while the dialog is hidden.
+    v.img.classList.add('is-placeholder');
+    v.img.removeAttribute('style');
+    v.loading.hidden = false;
+    v.el.hidden = false;
+    document.body.classList.add('ursa-lightbox-open');
+    document.addEventListener('keydown', onKeydown);
+    v.stage.focus({ preventScroll: true });
+
+    // Show the already-loaded preview stretched to fill the stage, so there is
+    // something on screen while the (potentially large) original downloads.
+    const placeholder = img.currentSrc || img.src;
+    if (placeholder && !samePath(placeholder, url) && img.naturalWidth) {
+      v.img.src = placeholder;
+      v.natural = { w: img.naturalWidth, h: img.naturalHeight };
+      layoutTwice(() => {
+        if (token !== v.token || v.ready) return; // superseded by the original
+        v.fitScale = containScale(v.natural.w, v.natural.h);
+        applyScale(v.fitScale);
+      });
+    }
+
+    const full = new Image();
+    full.onload = () => {
+      if (token !== v.token) return; // a later image won the race
+      v.img.classList.remove('is-placeholder');
+      v.loading.hidden = true;
+      v.img.src = url;
+      v.natural = { w: full.naturalWidth, h: full.naturalHeight };
+      v.ready = true;
+      v.atFit = true;
+      layoutTwice(() => {
+        if (token !== v.token) return;
+        relayout();
+      });
+    };
+    full.onerror = () => {
+      if (token !== v.token) return;
+      v.loading.hidden = true;
+    };
+    full.src = url;
+  }
+
+  function close() {
+    if (!viewer || viewer.el.hidden) return;
+    viewer.token++; // abandon any in-flight load
+    viewer.el.hidden = true;
+    viewer.img.removeAttribute('src');
+    viewer.loading.hidden = true;
+    document.body.classList.remove('ursa-lightbox-open');
+    document.removeEventListener('keydown', onKeydown);
+    if (viewer.lastFocus && viewer.lastFocus.focus) viewer.lastFocus.focus();
+  }
+
+  function onKeydown(e) {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      close();
+    } else if (e.key === '+' || e.key === '=') {
+      zoomBy(ZOOM_STEP);
+    } else if (e.key === '-' || e.key === '_') {
+      zoomBy(1 / ZOOM_STEP);
+    } else if (e.key === 'Tab') {
+      trapFocus(e);
+    }
+  }
+
+  /** Keep Tab inside the dialog while it is open. */
+  function trapFocus(e) {
+    const focusable = Array.from(viewer.el.querySelectorAll('button, a[href]'))
+      .filter((el) => !el.disabled && el.getClientRects().length > 0);
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    // Anywhere but a control of the dialog — the stage, or the page behind it.
+    if (focusable.indexOf(active) === -1) {
+      e.preventDefault();
+      (e.shiftKey ? last : first).focus();
+    } else if (e.shiftKey && active === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+
+  // --- init -----------------------------------------------------------------
+
+  function init() {
+    const article = document.querySelector('article#main-content');
+    if (!article) return;
+    article.querySelectorAll('img').forEach(decorate);
+    // Build the dialog up front so the first open measures a laid-out stage.
+    ensureViewer();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/package.json

@@ -2,7 +2,7 @@
   "name": "@kenjura/ursa",
   "author": "Andrew London <andrew@kenjura.com>",
   "type": "module",
-  "version": "0.88.0",
+  "version": "0.90.0",
   "description": "static site generator from MD/wikitext/YML",
   "main": "lib/index.js",
   "bin": {

package/src/helper/__test__/staticAssets.test.js

@@ -0,0 +1,47 @@
+import {
+  isImage,
+  isMedia,
+  isStaticAsset,
+} from "../staticAssets.js";
+
+describe("staticAssets", () => {
+  it("treats the image formats as images", () => {
+    for (const f of ["a.jpg", "a.jpeg", "a.PNG", "a.gif", "a.webp", "a.svg", "a.ico"]) {
+      expect(isImage(f)).toBe(true);
+      expect(isMedia(f)).toBe(false);
+    }
+  });
+
+  // The regression this module exists for: generate() copied images and HTML
+  // and nothing else, so every one of these 404'd in a built site.
+  it("treats fonts, audio, video and documents as media", () => {
+    for (const f of ["a.woff", "a.woff2", "a.ttf", "a.eot", "a.otf", "a.pdf",
+      "a.mp3", "a.m4a", "a.wav", "a.flac", "a.mp4", "a.m4v", "a.webm", "a.ogv", "a.ogg", "a.zip"]) {
+      expect(isMedia(f)).toBe(true);
+      expect(isImage(f)).toBe(false);
+    }
+  });
+
+  it("counts both as static assets", () => {
+    expect(isStaticAsset("clip.mp4")).toBe(true);
+    expect(isStaticAsset("Herculanum Regular.ttf")).toBe(true);
+    expect(isStaticAsset("photo.jpg")).toBe(true);
+  });
+
+  it("leaves the processed formats alone", () => {
+    for (const f of ["page.md", "page.mdx", "page.html", "style.css", "script.js", "data.json"]) {
+      expect(isStaticAsset(f)).toBe(false);
+    }
+  });
+
+  it("matches on the extension, not on a name that merely contains one", () => {
+    expect(isStaticAsset("mp4")).toBe(false);
+    expect(isStaticAsset("notes-about-mp4-encoding.md")).toBe(false);
+    expect(isStaticAsset("my.mp4.md")).toBe(false);
+  });
+
+  it("is case insensitive, as filesystems are not", () => {
+    expect(isStaticAsset("CLIP.MP4")).toBe(true);
+    expect(isStaticAsset("Font.TTF")).toBe(true);
+  });
+});

package/src/helper/staticAssets.js

@@ -0,0 +1,31 @@
+/**
+ * What counts as a static asset.
+ *
+ * This list used to be written out separately in serve.js and in
+ * dependencyTracker.js and — fatally — not at all in generate.js, which knew
+ * only about *image* extensions. `ursa serve` therefore served fonts, audio and
+ * video quite happily while `ursa generate` left them out of the build
+ * entirely, so they worked all the way through development and 404'd in
+ * production. One list, in one place, used by both.
+ */
+
+/** Extensions that get preview generation and image transformation. */
+export const IMAGE_EXTENSIONS = /\.(jpg|jpeg|png|gif|webp|svg|ico)$/i;
+
+/**
+ * Everything else copied through untouched: fonts, documents, audio, video.
+ * Deliberately not images, which take a different path, and deliberately not
+ * .css, .js, .html or the document formats, all of which are processed rather
+ * than copied.
+ */
+export const MEDIA_EXTENSIONS = /\.(woff2?|ttf|eot|otf|pdf|mp3|m4a|wav|flac|mp4|m4v|webm|ogv|ogg|zip)$/i;
+
+/** Any file the build should place in the output as-is. */
+export const STATIC_ASSET_EXTENSIONS = new RegExp(
+  `(?:${IMAGE_EXTENSIONS.source})|(?:${MEDIA_EXTENSIONS.source})`,
+  'i'
+);
+
+export const isImage = (filename) => IMAGE_EXTENSIONS.test(filename);
+export const isMedia = (filename) => MEDIA_EXTENSIONS.test(filename);
+export const isStaticAsset = (filename) => STATIC_ASSET_EXTENSIONS.test(filename);

package/src/jobs/generate.js

@@ -5,6 +5,7 @@ import { filterAsync } from "../helper/filterAsync.js";
 import { isDirectory } from "../helper/isDirectory.js";
 import { isFolderHidden, clearConfigCache } from "../helper/folderConfig.js";
 import { isHiddenOrSystemPath } from "../helper/hiddenPaths.js";
+import { IMAGE_EXTENSIONS, isMedia } from "../helper/staticAssets.js";
 import {
   extractMetadata,
   extractRawMetadata,
@@ -449,7 +450,7 @@ export async function generate({
   const copiedCssFiles = new Set();
 
   // Identify all image files from the filtered source list
-  const imageExtensions = /\.(jpg|jpeg|png|gif|webp|svg|ico)/;
+  const imageExtensions = IMAGE_EXTENSIONS;
   let allSourceFilenamesThatAreImages = allSourceFilenames.filter(
     (filename) => filename.match(imageExtensions) && !isHiddenOrSystem(filename)
   );
@@ -1172,11 +1173,23 @@ export async function generate({
     (filename) => filename.match(/\.html$/) && !isHiddenOrSystem(filename)
   );
   
-  const allStaticFiles = allSourceFilenamesThatAreHtml;
+  // Fonts, audio, video, PDFs: copied through untouched. Images are handled
+  // separately above because they also get previews; everything else that is
+  // neither an article nor a stylesheet belongs here. Leaving this out is what
+  // let `ursa serve` and `ursa generate` disagree — serve reads these straight
+  // off disk, so the missing copy step only ever showed up in a built site.
+  const allSourceFilenamesThatAreMedia = allSourceFilenames.filter(
+    (filename) => isMedia(filename) && !isHiddenOrSystem(filename)
+  );
+
+  const allStaticFiles = [...allSourceFilenamesThatAreHtml, ...allSourceFilenamesThatAreMedia];
   const totalStatic = allStaticFiles.length;
   let processedStatic = 0;
   let copiedStatic = 0;
-  progress.log(`Processing ${totalStatic} static HTML files...`);
+  progress.log(
+    `Processing ${totalStatic} static files ` +
+    `(${allSourceFilenamesThatAreHtml.length} HTML, ${allSourceFilenamesThatAreMedia.length} media)...`
+  );
   await processBatched(allStaticFiles, async (file) => {
     try {
       processedStatic++;

package/src/serve.js

@@ -7,6 +7,7 @@ import fs from "fs";
 import { promises } from "fs";
 import { copy as copyDir, outputFile } from "fs-extra";
 import { processImage } from "./helper/imageProcessor.js";
+import { STATIC_ASSET_EXTENSIONS, IMAGE_EXTENSIONS } from "./helper/staticAssets.js";
 import { watchModeCache } from "./helper/build/watchCache.js";
 import { dependencyTracker } from "./helper/dependencyTracker.js";
 import { bundleMetaTemplateAssets, clearMetaBundleCache } from "./helper/assetBundler.js";
@@ -297,10 +298,9 @@ async function copyCssFile(cssPath, sourceDir, outputDir) {
   }
 }
 
-// Static file extensions that should be copied (images, fonts, etc.)
-const STATIC_FILE_EXTENSIONS = /\.(jpg|jpeg|png|gif|webp|svg|ico|woff|woff2|ttf|eot|pdf|mp3|mp4|webm|ogg)$/i;
-// Image extensions that get preview processing
-const IMAGE_EXTENSIONS = /\.(jpg|jpeg|png|gif|webp|svg|ico)$/i;
+// Shared with generate so the two cannot drift apart again — that drift is
+// exactly how fonts and video came to work in dev and 404 in production.
+const STATIC_FILE_EXTENSIONS = STATIC_ASSET_EXTENSIONS;
 
 /**
  * Copy a single static file to the output directory