@rmdes/indiekit-frontend 1.0.0-beta.32 → 1.0.0-beta.34

package/components/file-input/index.js

@@ -1,5 +1,6 @@
 import { IndiekitError } from "@indiekit/error";
 
+import { openMediaBrowser } from "../../lib/media-browser.js";
 import { wrapElement } from "../../lib/utils/wrap-element.js";
 
 export const FileInputFieldController = class extends HTMLElement {
@@ -59,6 +60,46 @@ export const FileInputFieldController = class extends HTMLElement {
     const $fileInputFile =
       this.$fileInputPicker.querySelector(`.file-input__file`);
     $fileInputFile.addEventListener("change", (event) => this.fetch(event));
+
+    // Add "Browse media" button next to the upload button
+    if (this.endpoint) {
+      const $inputButtonGroup = this.querySelector(".input-button-group");
+      if ($inputButtonGroup) {
+        const $browseBtn = document.createElement("button");
+        $browseBtn.type = "button";
+        $browseBtn.className = "file-input__browse button button--secondary";
+        $browseBtn.textContent = "Browse media";
+        $browseBtn.addEventListener("click", () => this.browseMedia());
+        $inputButtonGroup.append($browseBtn);
+      }
+    }
+  }
+
+  /**
+   * Open media browser to select an existing media file
+   */
+  browseMedia() {
+    if (this._mediaBrowserOpen) return;
+    this._mediaBrowserOpen = true;
+
+    // Determine filter type from the file input's accept attribute
+    const $fileInputFile = this.querySelector(".file-input__file");
+    const accept = $fileInputFile ? $fileInputFile.getAttribute("accept") : "";
+    let filterType = "all";
+    if (accept && accept.startsWith("image/")) filterType = "photo";
+    else if (accept && accept.startsWith("audio/")) filterType = "audio";
+    else if (accept && accept.startsWith("video/")) filterType = "video";
+
+    openMediaBrowser({
+      endpoint: this.endpoint,
+      filterType,
+      onSelect: (url) => {
+        this.$fileInputPath.value = url;
+      },
+      onClose: () => {
+        this._mediaBrowserOpen = false;
+      },
+    });
   }
 
   /**

package/components/textarea/index.js

@@ -1,5 +1,7 @@
 import EasyMDE from "easymde";
 
+import { openMediaBrowser } from "../../lib/media-browser.js";
+
 const paths = {
   bold: "M17 30c6.1 0 10-3 10-8 0-3.5-2.7-6.3-6.5-6.5V15c3-.4 5-3 5-6 0-4.5-3.5-7-9-7H5v28h12ZM12 7h2c2.5 0 4 1 4 3 0 1.5-1.5 3-4 3h-2V7Zm0 18v-7h2.3c3.1 0 4.7 1.1 4.7 3.4 0 2.5-1.4 3.6-4.8 3.6H12Z",
   code: "m13.5 8.5-3-3L2 14C.5 15.5.5 16.5 2 18l8.5 8.5 3-3L6 16l7.5-7.5Zm5 0 3-3L30 14c1.5 1.5 1.5 2.5 0 4l-8.5 8.5-3-3L26 16l-7.5-7.5Z",
@@ -291,224 +293,19 @@ export const TextareaFieldComponent = class extends HTMLElement {
     if (this._mediaBrowserOpen) return;
     this._mediaBrowserOpen = true;
 
-    const endpoint = this.editorEndpoint;
-    let allItems = [];
-    let afterCursor = null;
-    let activeFilter = "all";
-
-    // Create modal overlay
-    const overlay = document.createElement("div");
-    overlay.className = "media-browser";
-    overlay.setAttribute("role", "dialog");
-    overlay.setAttribute("aria-modal", "true");
-    overlay.setAttribute("aria-label", "Browse media");
-
-    const modal = document.createElement("div");
-    modal.className = "media-browser__modal";
-
-    // Header
-    const header = document.createElement("div");
-    header.className = "media-browser__header";
-
-    const title = document.createElement("h2");
-    title.className = "media-browser__title";
-    title.textContent = "Browse media";
-    header.append(title);
-
-    const closeBtn = document.createElement("button");
-    closeBtn.type = "button";
-    closeBtn.className = "media-browser__close";
-    closeBtn.setAttribute("aria-label", "Close");
-    closeBtn.textContent = "\u00D7";
-    closeBtn.addEventListener("click", close);
-    header.append(closeBtn);
-
-    // Filters
-    const filters = document.createElement("div");
-    filters.className = "media-browser__filters";
-
-    for (const filter of ["all", "photo", "audio", "video"]) {
-      const btn = document.createElement("button");
-      btn.type = "button";
-      btn.className = "media-browser__filter";
-      if (filter === "all") btn.classList.add("is-active");
-      btn.textContent = filter.charAt(0).toUpperCase() + filter.slice(1);
-      btn.dataset.filter = filter;
-      btn.addEventListener("click", () => {
-        activeFilter = filter;
-        for (const f of filters.querySelectorAll(".media-browser__filter")) {
-          f.classList.toggle("is-active", f.dataset.filter === filter);
-        }
-        renderGrid();
-      });
-      filters.append(btn);
-    }
-
-    // Grid
-    const grid = document.createElement("div");
-    grid.className = "media-browser__grid";
-
-    // Loading
-    const loading = document.createElement("div");
-    loading.className = "media-browser__loading";
-    loading.textContent = "Loading\u2026";
-
-    // Empty
-    const empty = document.createElement("p");
-    empty.className = "media-browser__empty";
-    empty.textContent = "No media files found.";
-    empty.hidden = true;
-
-    // Load more
-    const loadMoreBtn = document.createElement("button");
-    loadMoreBtn.type = "button";
-    loadMoreBtn.className = "media-browser__load-more";
-    loadMoreBtn.textContent = "Load more";
-    loadMoreBtn.hidden = true;
-    loadMoreBtn.addEventListener("click", () => fetchMedia());
-
-    modal.append(header, filters, grid, loading, empty, loadMoreBtn);
-    overlay.append(modal);
-    document.body.append(overlay);
-
-    // Lock body scroll
-    document.body.style.overflow = "hidden";
-
-    // Close handlers
-    overlay.addEventListener("click", (event) => {
-      if (event.target === overlay) close();
+    openMediaBrowser({
+      endpoint: this.editorEndpoint,
+      onSelect: (url, filename, isImage) => {
+        const cm = editor.codemirror;
+        const cursor = cm.getCursor();
+        const text = isImage ? `![](${url})` : `[${filename}](${url})`;
+        cm.replaceRange(text, cursor);
+      },
+      onClose: () => {
+        this._mediaBrowserOpen = false;
+        editor.codemirror.focus();
+      },
     });
-
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") close();
-    };
-    document.addEventListener("keydown", onKeyDown);
-
-    function close() {
-      overlay.remove();
-      document.body.style.overflow = "";
-      document.removeEventListener("keydown", onKeyDown);
-      // Use arrow-free reference to component
-      editor.codemirror.focus();
-      // Reset flag on the component instance via closure
-      closeBrowser();
-    }
-
-    const closeBrowser = () => {
-      this._mediaBrowserOpen = false;
-    };
-
-    function getFilteredItems() {
-      if (activeFilter === "all") return allItems;
-      return allItems.filter((item) => {
-        const type = item["media-type"] || "";
-        return type === activeFilter;
-      });
-    }
-
-    function isImageType(mediaType) {
-      return mediaType === "photo";
-    }
-
-    function getMediaIcon(mediaType) {
-      if (!mediaType) return "\uD83D\uDCC4";
-      if (mediaType === "audio") return "\uD83C\uDFB5";
-      if (mediaType === "video") return "\uD83C\uDFAC";
-      return "\uD83D\uDCC4";
-    }
-
-    function getFilename(url) {
-      try {
-        return decodeURIComponent(url.split("/").pop());
-      } catch {
-        return url.split("/").pop();
-      }
-    }
-
-    function renderGrid() {
-      grid.replaceChildren();
-      const filtered = getFilteredItems();
-      empty.hidden = filtered.length > 0;
-
-      for (const item of filtered) {
-        const url = item.url;
-        const mediaType = item["media-type"] || "";
-        const isImage = isImageType(mediaType);
-        const filename = getFilename(url);
-
-        const tile = document.createElement("button");
-        tile.type = "button";
-        tile.className = "media-browser__item";
-        tile.title = filename;
-        tile.addEventListener("click", () => {
-          insertMedia(url, filename, isImage);
-          close();
-        });
-
-        if (isImage) {
-          const img = document.createElement("img");
-          img.src = `/image/s_240x240/${encodeURIComponent(url)}`;
-          img.alt = filename;
-          img.loading = "lazy";
-          img.className = "media-browser__thumbnail";
-          tile.append(img);
-        } else {
-          const icon = document.createElement("span");
-          icon.className = "media-browser__icon";
-          icon.textContent = getMediaIcon(mediaType);
-          tile.append(icon);
-
-          const name = document.createElement("span");
-          name.className = "media-browser__filename";
-          name.textContent = filename;
-          tile.append(name);
-        }
-
-        grid.append(tile);
-      }
-    }
-
-    function insertMedia(url, filename, isImage) {
-      const cm = editor.codemirror;
-      const cursor = cm.getCursor();
-      const text = isImage ? `![](${url})` : `[${filename}](${url})`;
-      cm.replaceRange(text, cursor);
-    }
-
-    async function fetchMedia() {
-      loading.hidden = false;
-      loadMoreBtn.hidden = true;
-
-      try {
-        const url = new URL(endpoint, globalThis.location.origin);
-        url.searchParams.set("q", "source");
-        url.searchParams.set("limit", "20");
-        if (afterCursor) url.searchParams.set("after", afterCursor);
-
-        const response = await fetch(url.href, { credentials: "same-origin" });
-        if (!response.ok) throw new Error(response.statusText);
-
-        const data = await response.json();
-        const items = data.items || [];
-        allItems = allItems.concat(items);
-
-        afterCursor =
-          data.paging && data.paging.after ? data.paging.after : null;
-        loadMoreBtn.hidden = !afterCursor;
-
-        renderGrid();
-      } catch (error) {
-        const errorMsg = document.createElement("p");
-        errorMsg.className = "media-browser__error";
-        errorMsg.textContent = `Error loading media: ${error.message}`;
-        grid.replaceChildren(errorMsg);
-      } finally {
-        loading.hidden = true;
-      }
-    }
-
-    // Initial fetch
-    fetchMedia();
   }
 
   /**

package/layouts/default.njk

@@ -122,6 +122,12 @@
 {% endblock %}
 <script type="module">
   if (navigator.serviceWorker) {
+    // Reload page when a new service worker activates (new deploy)
+    navigator.serviceWorker.addEventListener("message", (event) => {
+      if (event.data && event.data.command === "SW_UPDATED") {
+        window.location.reload();
+      }
+    });
     window.addEventListener("load", () => {
       navigator.serviceWorker.register("/serviceworker.js", {
         scope: '/'

package/lib/media-browser.js

@@ -0,0 +1,215 @@
+/**
+ * Shared media browser modal for browsing and selecting existing media files.
+ * Used by both the textarea (EasyMDE) and file-input components.
+ *
+ * @param {object} options
+ * @param {string} options.endpoint - Media endpoint URL (e.g., "/media")
+ * @param {Function} options.onSelect - Callback when a media item is selected: (url, filename, isImage) => void
+ * @param {Function} [options.onClose] - Optional callback when modal is closed without selection
+ * @param {string} [options.filterType] - Optional initial filter type ("all", "photo", "audio", "video")
+ */
+export function openMediaBrowser({ endpoint, onSelect, onClose, filterType }) {
+  let allItems = [];
+  let afterCursor = null;
+  let activeFilter = filterType || "all";
+
+  // Create modal overlay
+  const overlay = document.createElement("div");
+  overlay.className = "media-browser";
+  overlay.setAttribute("role", "dialog");
+  overlay.setAttribute("aria-modal", "true");
+  overlay.setAttribute("aria-label", "Browse media");
+
+  const modal = document.createElement("div");
+  modal.className = "media-browser__modal";
+
+  // Header
+  const header = document.createElement("div");
+  header.className = "media-browser__header";
+
+  const title = document.createElement("h2");
+  title.className = "media-browser__title";
+  title.textContent = "Browse media";
+  header.append(title);
+
+  const closeBtn = document.createElement("button");
+  closeBtn.type = "button";
+  closeBtn.className = "media-browser__close";
+  closeBtn.setAttribute("aria-label", "Close");
+  closeBtn.textContent = "\u00D7";
+  closeBtn.addEventListener("click", close);
+  header.append(closeBtn);
+
+  // Filters
+  const filters = document.createElement("div");
+  filters.className = "media-browser__filters";
+
+  for (const filter of ["all", "photo", "audio", "video"]) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "media-browser__filter";
+    if (filter === activeFilter) btn.classList.add("is-active");
+    btn.textContent = filter.charAt(0).toUpperCase() + filter.slice(1);
+    btn.dataset.filter = filter;
+    btn.addEventListener("click", () => {
+      activeFilter = filter;
+      for (const f of filters.querySelectorAll(".media-browser__filter")) {
+        f.classList.toggle("is-active", f.dataset.filter === filter);
+      }
+      renderGrid();
+    });
+    filters.append(btn);
+  }
+
+  // Grid
+  const grid = document.createElement("div");
+  grid.className = "media-browser__grid";
+
+  // Loading
+  const loading = document.createElement("div");
+  loading.className = "media-browser__loading";
+  loading.textContent = "Loading\u2026";
+
+  // Empty
+  const empty = document.createElement("p");
+  empty.className = "media-browser__empty";
+  empty.textContent = "No media files found.";
+  empty.hidden = true;
+
+  // Load more
+  const loadMoreBtn = document.createElement("button");
+  loadMoreBtn.type = "button";
+  loadMoreBtn.className = "media-browser__load-more";
+  loadMoreBtn.textContent = "Load more";
+  loadMoreBtn.hidden = true;
+  loadMoreBtn.addEventListener("click", () => fetchMedia());
+
+  modal.append(header, filters, grid, loading, empty, loadMoreBtn);
+  overlay.append(modal);
+  document.body.append(overlay);
+
+  // Lock body scroll
+  document.body.style.overflow = "hidden";
+
+  // Close handlers
+  overlay.addEventListener("click", (event) => {
+    if (event.target === overlay) close();
+  });
+
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") close();
+  };
+  document.addEventListener("keydown", onKeyDown);
+
+  function close() {
+    overlay.remove();
+    document.body.style.overflow = "";
+    document.removeEventListener("keydown", onKeyDown);
+    if (onClose) onClose();
+  }
+
+  function getFilteredItems() {
+    if (activeFilter === "all") return allItems;
+    return allItems.filter((item) => {
+      const type = item["media-type"] || "";
+      return type === activeFilter;
+    });
+  }
+
+  function isImageType(mediaType) {
+    return mediaType === "photo";
+  }
+
+  function getMediaIcon(mediaType) {
+    if (!mediaType) return "\uD83D\uDCC4";
+    if (mediaType === "audio") return "\uD83C\uDFB5";
+    if (mediaType === "video") return "\uD83C\uDFAC";
+    return "\uD83D\uDCC4";
+  }
+
+  function getFilename(url) {
+    try {
+      return decodeURIComponent(url.split("/").pop());
+    } catch {
+      return url.split("/").pop();
+    }
+  }
+
+  function renderGrid() {
+    grid.replaceChildren();
+    const filtered = getFilteredItems();
+    empty.hidden = filtered.length > 0;
+
+    for (const item of filtered) {
+      const url = item.url;
+      const mediaType = item["media-type"] || "";
+      const isImage = isImageType(mediaType);
+      const filename = getFilename(url);
+
+      const tile = document.createElement("button");
+      tile.type = "button";
+      tile.className = "media-browser__item";
+      tile.title = filename;
+      tile.addEventListener("click", () => {
+        onSelect(url, filename, isImage);
+        close();
+      });
+
+      if (isImage) {
+        const img = document.createElement("img");
+        img.src = `/image/s_240x240/${encodeURIComponent(url)}`;
+        img.alt = filename;
+        img.loading = "lazy";
+        img.className = "media-browser__thumbnail";
+        tile.append(img);
+      } else {
+        const icon = document.createElement("span");
+        icon.className = "media-browser__icon";
+        icon.textContent = getMediaIcon(mediaType);
+        tile.append(icon);
+
+        const name = document.createElement("span");
+        name.className = "media-browser__filename";
+        name.textContent = filename;
+        tile.append(name);
+      }
+
+      grid.append(tile);
+    }
+  }
+
+  async function fetchMedia() {
+    loading.hidden = false;
+    loadMoreBtn.hidden = true;
+
+    try {
+      const url = new URL(endpoint, globalThis.location.origin);
+      url.searchParams.set("q", "source");
+      url.searchParams.set("limit", "20");
+      if (afterCursor) url.searchParams.set("after", afterCursor);
+
+      const response = await fetch(url.href, { credentials: "same-origin" });
+      if (!response.ok) throw new Error(response.statusText);
+
+      const data = await response.json();
+      const items = data.items || [];
+      allItems = allItems.concat(items);
+
+      afterCursor =
+        data.paging && data.paging.after ? data.paging.after : null;
+      loadMoreBtn.hidden = !afterCursor;
+
+      renderGrid();
+    } catch (error) {
+      const errorMsg = document.createElement("p");
+      errorMsg.className = "media-browser__error";
+      errorMsg.textContent = `Error loading media: ${error.message}`;
+      grid.replaceChildren(errorMsg);
+    } finally {
+      loading.hidden = true;
+    }
+  }
+
+  // Initial fetch
+  fetchMedia();
+}

package/lib/serviceworker.js

@@ -8,6 +8,15 @@ const cacheList = new Set([assetCacheName, pagesCacheName, imageCacheName]);
 const placeholderImage = `<svg xmlns="http://www.w3.org/2000/svg"><defs><path id="icon" fill="#AAA" d="M24 32a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm-6.9-11.9 4.1 4.1a17 17 0 0 0-9.7 5.3L8 26a22 22 0 0 1 9-6Zm22.5 5.4L36 29l-.8-.8L26 19a22 22 0 0 1 13.5 6.4ZM8.2 11.2l3.7 3.7a24.7 24.7 0 0 0-8.4 6.6l-3.6-3.6c2.4-2.7 5.2-5 8.3-6.7ZM24 7a32 32 0 0 1 23.4 10.2l-3.5 3.6a27 27 0 0 0-24.5-8.4l-4.2-4.2A32 32 0 0 1 24 7ZM2 5l3-3 41 41-3 3L2 5Z" opacity=".7"/>
 </defs><rect fill="#000" width="100%" height="100%" opacity="0.075"/><use href="#icon" x="50%" y="50%" transform="translate(-24 -24)"/></svg>`;
 
+/**
+ * Check if a URL is a hashed asset (content-addressable, immutable)
+ * @param {string} url - Request URL
+ * @returns {boolean}
+ */
+function isHashedAsset(url) {
+  return /\/assets\/app-[a-f0-9]+\.(js|css)$/.test(url);
+}
+
 /**
  * Update asset cache
  * @returns {Promise<Cache>} - Updated asset cache
@@ -16,7 +25,7 @@ async function updateAssetCache() {
   try {
     const assetCache = await caches.open(assetCacheName);
 
-    // These items won’t block the installation of the service worker
+    // These items won't block the installation of the service worker
     assetCache.addAll(["/app.webmanifest"]);
 
     // These items must be cached for service worker to complete installation
@@ -67,6 +76,27 @@ async function clearOldCaches() {
   }
 }
 
+/**
+ * Clear the pages cache so stale HTML (with old asset references) is not served
+ */
+async function clearPagesCache() {
+  try {
+    await caches.delete(pagesCacheName);
+  } catch (error) {
+    console.error("Error clearing pages cache", error);
+  }
+}
+
+/**
+ * Notify all clients that the service worker has been updated
+ */
+async function notifyClients() {
+  const allClients = await clients.matchAll({ includeUncontrolled: true });
+  for (const client of allClients) {
+    client.postMessage({ command: "SW_UPDATED", version: "APP_VERSION" });
+  }
+}
+
 /**
  * Trim cache
  * @param {string} cacheName - Name of cache
@@ -100,7 +130,9 @@ self.addEventListener("activate", async (event) => {
   event.waitUntil(
     (async () => {
       await clearOldCaches();
+      await clearPagesCache();
       await clients.claim();
+      await notifyClients();
     })(),
   );
 });
@@ -126,47 +158,40 @@ self.addEventListener("fetch", (event) => {
     return;
   }
 
-  const retrieveFromCache = caches.match(request);
-
-  // For HTML requests, try network, fall back to cache, else show offline page
+  // For HTML requests, try network with timeout, fall back to cache
   if (
     request.mode === "navigate" ||
     request.headers.get("Accept").includes("text/html")
   ) {
     event.respondWith(
       (async () => {
-        // CHECK CACHE
-        const timer = setTimeout(async () => {
-          const responseFromCache = await retrieveFromCache;
-          if (responseFromCache) {
-            return responseFromCache;
-          }
-        }, timeout);
-
         try {
-          const preloadResponse = await Promise.resolve(event.preloadResponse);
-          const responseFromPreloadOrFetch =
-            preloadResponse || (await fetch(request));
+          // Race network against a timeout for faster fallback on slow connections
+          const responseFromPreloadOrFetch = await Promise.race([
+            (async () => {
+              const preloadResponse = await Promise.resolve(
+                event.preloadResponse,
+              );
+              return preloadResponse || (await fetch(request));
+            })(),
+            new Promise((_, reject) =>
+              setTimeout(() => reject(new Error("Network timeout")), timeout),
+            ),
+          ]);
 
-          // NETWORK
-          // Save a copy of page to pages cache
-          clearTimeout(timer);
+          // NETWORK succeeded — cache and serve
           try {
             const copy = responseFromPreloadOrFetch.clone();
             const pagesCache = await caches.open(pagesCacheName);
             await pagesCache.put(request, copy);
           } catch (cacheError) {
-            // Cache put failed (e.g., network error response), but continue serving the response
             console.error("Failed to cache page:", cacheError);
           }
 
           return responseFromPreloadOrFetch;
-        } catch (error) {
-          console.error("Network fetch failed:", error, request.url);
-
-          // CACHE or OFFLINE PAGE
-          clearTimeout(timer);
-          const responseFromCache = await retrieveFromCache;
+        } catch {
+          // NETWORK failed or timed out — fall back to cache
+          const responseFromCache = await caches.match(request);
           const offlineResponse = await caches.match("/offline");
           return (
             responseFromCache ||
@@ -184,33 +209,93 @@ self.addEventListener("fetch", (event) => {
     return;
   }
 
-  // For non-HTML requests, look in cache first, fall back to network
+  // For hashed assets (e.g. /assets/app-abc123.js): cache-first
+  // These URLs are content-addressable — the content never changes for a given hash
+  if (isHashedAsset(request.url)) {
+    event.respondWith(
+      (async () => {
+        const responseFromCache = await caches.match(request);
+        if (responseFromCache) {
+          return responseFromCache;
+        }
+
+        try {
+          const responseFromFetch = await fetch(request);
+          const copy = responseFromFetch.clone();
+          const assetCache = await caches.open(assetCacheName);
+          await assetCache.put(request, copy);
+          return responseFromFetch;
+        } catch (error) {
+          console.error("Fetch failed for hashed asset:", error, request.url);
+          return new Response("Network error", {
+            status: 503,
+            statusText: "Service Unavailable",
+            headers: { "Content-Type": "text/plain" },
+          });
+        }
+      })(),
+    );
+
+    return;
+  }
+
+  // For other non-HTML requests: stale-while-revalidate
+  // Serve from cache immediately, update cache in background
   event.respondWith(
     (async () => {
       try {
-        const responseFromCache = await retrieveFromCache;
+        const responseFromCache = await caches.match(request);
+
+        // Start network fetch regardless (to update cache)
+        const fetchPromise = fetch(request)
+          .then(async (responseFromFetch) => {
+            // Update cache with fresh response
+            if (/\.(jpe?g|png|gif|svg|webp)/.test(request.url)) {
+              try {
+                const copy = responseFromFetch.clone();
+                const imagesCache = await caches.open(imageCacheName);
+                await imagesCache.put(request, copy);
+              } catch (cacheError) {
+                console.error("Failed to cache image:", cacheError);
+              }
+            }
+            return responseFromFetch;
+          })
+          .catch((error) => {
+            console.error(
+              "Background fetch failed:",
+              error,
+              request.url,
+            );
+            return null;
+          });
 
         if (responseFromCache) {
-          // CACHE
+          // CACHE HIT — serve cached, update in background
           return responseFromCache;
-        } else {
-          const responseFromFetch = await fetch(request);
-
-          // NETWORK
-          // If request is for an image, save a copy to images cache
-          if (/\.(jpe?g|png|gif|svg|webp)/.test(request.url)) {
-            try {
-              const copy = responseFromFetch.clone();
-              const imagesCache = await caches.open(imageCacheName);
-              await imagesCache.put(request, copy);
-            } catch (cacheError) {
-              // Cache put failed (e.g., network error response), but continue serving the response
-              console.error("Failed to cache image:", cacheError);
-            }
-          }
+        }
 
+        // CACHE MISS — wait for network
+        const responseFromFetch = await fetchPromise;
+        if (responseFromFetch) {
           return responseFromFetch;
         }
+
+        // OFFLINE IMAGE
+        if (/\.(jpe?g|png|gif|svg|webp)/.test(request.url)) {
+          return new Response(placeholderImage, {
+            headers: {
+              "Content-Type": "image/svg+xml",
+              "Cache-Control": "no-store",
+            },
+          });
+        }
+
+        return new Response("Network error", {
+          status: 503,
+          statusText: "Service Unavailable",
+          headers: { "Content-Type": "text/plain" },
+        });
       } catch (error) {
         console.error(
           "Fetch failed for non-HTML resource:",
@@ -218,7 +303,6 @@ self.addEventListener("fetch", (event) => {
           request.url,
         );
 
-        // OFFLINE IMAGE
         if (/\.(jpe?g|png|gif|svg|webp)/.test(request.url)) {
           return new Response(placeholderImage, {
             headers: {
@@ -228,7 +312,6 @@ self.addEventListener("fetch", (event) => {
           });
         }
 
-        // For other resources, return a network error response
         return new Response("Network error", {
           status: 503,
           statusText: "Service Unavailable",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-frontend",
-  "version": "1.0.0-beta.32",
+  "version": "1.0.0-beta.34",
   "description": "Frontend components for Indiekit (fork with floating toolbar)",
   "keywords": [
     "express",