various ui improvements, including a new sequence nav component and a new kabbalah detail view

app/card-images.js

@@ -137,7 +137,7 @@
   const standardMinorSuits = ["Wands", "Cups", "Swords", "Disks"];
   const standardDeckCardNames = buildStandardDeckCardNames();
 
-  let deckManifestSources = buildDeckManifestSources();
+  let deckManifestSources = null;
 
   const manifestCache = new Map();
   const cardBackCache = new Map();
@@ -161,6 +161,25 @@
       .replace(/\/+$/, "");
   }
 
+  function buildManifestRequestHeaders(path) {
+    const normalizedPath = String(path || "").trim();
+    const apiBaseUrl = getApiBaseUrl();
+    const apiKey = String(
+      window.TarotDataService?.getApiKey?.()
+      || window.TarotAppConfig?.getApiKey?.()
+      || window.TarotAppConfig?.apiKey
+      || ""
+    ).trim();
+
+    if (!normalizedPath || !apiBaseUrl || !apiKey || !normalizedPath.startsWith(apiBaseUrl)) {
+      return {};
+    }
+
+    return {
+      "x-api-key": apiKey
+    };
+  }
+
   function rewriteBasePathForApi(basePath) {
     const normalizedBasePath = String(basePath || "").trim();
     if (!normalizedBasePath) {
@@ -530,6 +549,9 @@
     try {
       const request = new XMLHttpRequest();
       request.open("GET", encodeURI(path), false);
+      Object.entries(buildManifestRequestHeaders(path)).forEach(([headerName, headerValue]) => {
+        request.setRequestHeader(headerName, headerValue);
+      });
       request.send(null);
 
       const okStatus = (request.status >= 200 && request.status < 300) || request.status === 0;
@@ -1164,6 +1186,9 @@
     })
       .then((result) => {
         markDeckAsWarmed(normalizedDeckId);
+        if (options.background) {
+          emitDeckPreloadStatus();
+        }
         if (!options.background) {
           setDeckPreloadStatus({
             activeDeckId: normalizedDeckId,
@@ -1211,6 +1236,13 @@
     }));
   }
 
+  function scheduleAllDeckImagePreload(options = {}) {
+    return deferPreload(() => preloadAllDeckImages({
+      ...defaultDeckWarmupOptions,
+      ...options
+    }));
+  }
+
   function resolveDisplayNameWithDeck(deckId, cardName, trumpNumber) {
     const manifest = getDeckManifest(deckId);
     const fallbackName = String(cardName || "").trim();
@@ -1333,6 +1365,7 @@
     resolveTarotCardBackThumbnail,
     preloadDeckImages,
     preloadAllDeckImages,
+    scheduleAllDeckImagePreload,
     ensureImageLoaded,
     isImageLoaded,
     getDeckPreloadStatus: () => emitDeckPreloadStatus(),