update

app/ui-alphabet.js

@@ -42,13 +42,16 @@
     },
     gematriaDb: null
   };
+  let detailNavigator = null;
 
   function arabicDisplayName(letter) {
     return browserUi.arabicDisplayName(letter);
   }
 
   // ── Element cache ────────────────────────────────────────────────────
+  let alphabetLettersSectionEl;
   let listEl, countEl, detailNameEl, detailSubEl, detailBodyEl;
+  let detailPrevEl, detailPositionEl, detailNextEl;
   let tabAll, tabHebrew, tabGreek, tabGreekArchaic, tabEnglish, tabArabic, tabEnochian;
   let searchInputEl, searchClearEl, typeFilterEl;
   let gematriaCipherEl, gematriaInputEl, gematriaResultEl, gematriaBreakdownEl;
@@ -56,11 +59,15 @@
   let gematriaReverseCiphersEl, gematriaReverseCipherHintEl;
 
   function getElements() {
+    alphabetLettersSectionEl = document.getElementById("alphabet-letters-section");
     listEl       = document.getElementById("alpha-letter-list");
     countEl      = document.getElementById("alpha-letter-count");
     detailNameEl = document.getElementById("alpha-detail-name");
     detailSubEl  = document.getElementById("alpha-detail-sub");
     detailBodyEl = document.getElementById("alpha-detail-body");
+    detailPrevEl = document.getElementById("alpha-detail-prev");
+    detailPositionEl = document.getElementById("alpha-detail-position");
+    detailNextEl = document.getElementById("alpha-detail-next");
     tabAll       = document.getElementById("alpha-tab-all");
     tabHebrew    = document.getElementById("alpha-tab-hebrew");
     tabGreek     = document.getElementById("alpha-tab-greek");
@@ -218,6 +225,99 @@
     if (typeof alphabetDetailUi.renderDetail === "function") {
       alphabetDetailUi.renderDetail(getDetailRenderContext(letter, alphabet));
     }
+
+    syncDetailNavigation();
+  }
+
+  function getLetterSequenceState() {
+    const filteredLetters = getFilteredLetters();
+    const selectedLetter = filteredLetters.find((letter) => letterKey(letter) === state.selectedKey)
+      || getLetters().find((letter) => letterKey(letter) === state.selectedKey)
+      || null;
+
+    const selectedAlphabet = state.activeAlphabet === "all"
+      ? String(alphabetForLetter(selectedLetter) || "").trim().toLowerCase()
+      : state.activeAlphabet;
+
+    const letters = state.activeAlphabet === "all" && selectedAlphabet
+      ? filteredLetters.filter((letter) => alphabetForLetter(letter) === selectedAlphabet)
+      : filteredLetters;
+
+    const total = letters.length;
+    const currentIndex = letters.findIndex((letter) => letterKey(letter) === state.selectedKey);
+
+    return {
+      total,
+      currentIndex,
+      previousKey: currentIndex > 0 ? letterKey(letters[currentIndex - 1]) : "",
+      nextKey: currentIndex >= 0 && currentIndex < total - 1 ? letterKey(letters[currentIndex + 1]) : ""
+    };
+  }
+
+  function scrollLetterIntoView(keyToReveal, elements) {
+    if (!elements?.listEl || !keyToReveal) {
+      return;
+    }
+
+    const match = Array.from(elements.listEl.querySelectorAll(".alpha-list-item"))
+      .find((entry) => entry.dataset.key === keyToReveal);
+
+    match?.scrollIntoView({ block: "nearest" });
+  }
+
+  function getDetailNavigator() {
+    if (detailNavigator || typeof window.TarotSequenceNav?.createSequenceNavigator !== "function") {
+      return detailNavigator;
+    }
+
+    detailNavigator = window.TarotSequenceNav.createSequenceNavigator({
+      getElements: () => ({
+        alphabetLettersSectionEl,
+        listEl,
+        detailPrevEl,
+        detailPositionEl,
+        detailNextEl
+      }),
+      isActive: (elements) => Boolean(elements?.alphabetLettersSectionEl && elements.alphabetLettersSectionEl.hidden === false),
+      getSequenceState: getLetterSequenceState,
+      getPrevButton: (elements) => elements?.detailPrevEl,
+      getNextButton: (elements) => elements?.detailNextEl,
+      getPositionEl: (elements) => elements?.detailPositionEl,
+      formatPositionText: ({ total, currentIndex }) => {
+        const sequenceState = getLetterSequenceState();
+        const alphabetLabel = sequenceState.selectedAlphabet
+          ? `${sequenceState.selectedAlphabet} `
+          : "";
+
+        if (total > 0 && currentIndex >= 0) {
+          const suffix = (state.activeAlphabet !== "all" || String(state.filters.query || "").trim() || state.filters.letterType)
+            ? " shown"
+            : "";
+          return `${currentIndex + 1} of ${total} ${alphabetLabel}letters${suffix}`.trim();
+        }
+
+        return total > 0
+          ? `${total} ${alphabetLabel}letters`.trim()
+          : "No letters";
+      },
+      selectTarget: (targetKey) => {
+        selectLetter(targetKey);
+        return true;
+      },
+      afterSelect: (targetKey, elements) => {
+        scrollLetterIntoView(targetKey, elements);
+      }
+    });
+
+    return detailNavigator;
+  }
+
+  function syncDetailNavigation() {
+    getDetailNavigator()?.sync();
+  }
+
+  function bindDetailNavigation() {
+    getDetailNavigator()?.bind();
   }
 
   function card(title, bodyHTML) {
@@ -365,7 +465,8 @@
       searchClearEl,
       typeFilterEl
     }),
-    renderDetail
+    renderDetail,
+    onStateChange: syncDetailNavigation
   });
 
   // ── Event delegation on detail body ──────────────────────────────────
@@ -458,6 +559,7 @@
     // alphabets.json is a top-level file → grouped["alphabets"] = the data object
 
     getElements();
+    bindDetailNavigation();
     ensureGematriaCalculator();
     bindFilterControls();
     syncFilterControls();
@@ -476,6 +578,7 @@
     });
 
     switchAlphabet("all", null);
+    syncDetailNavigation();
   }
 
   // ── Incoming navigation ───────────────────────────────────────────────