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

app/ui-tarot-detail.js

@@ -5,6 +5,8 @@
       getMagickDataset,
       resolveTarotCardImage,
       resolveTarotCardThumbnail,
+      getDeckVariantsForCard,
+      openDeckVariantLightbox,
       getDisplayCardName,
       buildTypeLabel,
       clearChildren,
@@ -407,6 +409,73 @@
         .filter((group) => group.items.length);
     }
 
+    function renderDeckVariants(card, elements, cardDisplayName) {
+      const galleryCardEl = elements?.tarotMetaDeckGalleryCardEl;
+      const galleryEl = elements?.tarotDetailDeckGalleryEl;
+      if (!galleryCardEl || !galleryEl) {
+        return;
+      }
+
+      clearChildren(galleryEl);
+      const variants = typeof getDeckVariantsForCard === "function"
+        ? getDeckVariantsForCard(card)
+        : [];
+
+      if (!Array.isArray(variants) || variants.length < 1) {
+        galleryCardEl.hidden = true;
+        return;
+      }
+
+      variants.forEach((variant) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = `tarot-deck-variant${variant?.isActive ? " is-active" : ""}`;
+        button.dataset.deckId = String(variant?.deckId || "").trim().toLowerCase();
+
+        const imageEl = document.createElement("img");
+        imageEl.className = "tarot-deck-variant-image";
+        imageEl.src = String(variant?.src || "").trim();
+        imageEl.alt = `${String(variant?.label || "Deck").trim()} — ${cardDisplayName || card?.name || "Tarot card"}`;
+        imageEl.loading = "lazy";
+        imageEl.decoding = "async";
+
+        const labelEl = document.createElement("span");
+        labelEl.className = "tarot-deck-variant-label";
+
+        const deckNameEl = document.createElement("span");
+        deckNameEl.className = "tarot-deck-variant-deck";
+        deckNameEl.textContent = String(variant?.label || variant?.deckId || "Deck").trim() || "Deck";
+        labelEl.appendChild(deckNameEl);
+
+        const variantName = String(variant?.displayName || "").trim();
+        if (variantName && variantName !== (cardDisplayName || card?.name || "")) {
+          const variantNameEl = document.createElement("span");
+          variantNameEl.className = "tarot-deck-variant-name";
+          variantNameEl.textContent = variantName;
+          labelEl.appendChild(variantNameEl);
+        }
+
+        if (variant?.isActive) {
+          const activeEl = document.createElement("span");
+          activeEl.className = "tarot-deck-variant-active";
+          activeEl.textContent = "Current deck";
+          labelEl.appendChild(activeEl);
+        }
+
+        button.append(imageEl, labelEl);
+
+        if (typeof openDeckVariantLightbox === "function" && button.dataset.deckId) {
+          button.addEventListener("click", () => {
+            openDeckVariantLightbox(card?.id, button.dataset.deckId);
+          });
+        }
+
+        galleryEl.appendChild(button);
+      });
+
+      galleryCardEl.hidden = false;
+    }
+
     function renderDetail(card, elements) {
       if (!card || !elements) {
         return;
@@ -454,6 +523,8 @@
         elements.tarotDetailReversedEl.textContent = card.meanings?.reversed || "--";
       }
 
+      renderDeckVariants(card, elements, cardDisplayName || card.name);
+
       const meaningText = String(card.meaning || card.meanings?.upright || "").trim();
       if (elements.tarotMetaMeaningCardEl && elements.tarotDetailMeaningEl) {
         if (meaningText) {