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

app/ui-navigation.js

@@ -22,6 +22,20 @@
     return config.getMagickDataset?.() || null;
   }
 
+  function getKabbalahPathNo(detail) {
+    if (!detail || typeof detail !== "object") {
+      return null;
+    }
+
+    const rawValue = detail.pathNo ?? detail["path-no"] ?? null;
+    if (rawValue === null || rawValue === undefined || rawValue === "") {
+      return null;
+    }
+
+    const numericValue = Number(rawValue);
+    return Number.isFinite(numericValue) ? numericValue : null;
+  }
+
   const DETAIL_VIEW_SELECTOR_BY_SECTION = {
     tarot: "#tarot-browse-view .tarot-layout",
     cube: "#cube-layout",
@@ -31,6 +45,10 @@
     iching: "#iching-section .planet-layout",
     gods: "#gods-section .planet-layout",
     calendar: "#calendar-section .planet-layout",
+    kabbalah: "#kabbalah-section .planet-layout",
+    "kabbalah-worlds": "#kabbalah-worlds-section .planet-layout",
+    "kabbalah-paths": "#kabbalah-paths-section .planet-layout",
+    "kabbalah-cross": "#kabbalah-cross-section .kab-rose-layout",
     "kabbalah-tree": "#kabbalah-tree-section .kab-layout",
     planets: "#planet-section .planet-layout",
     elements: "#elements-section .planet-layout"
@@ -167,12 +185,28 @@
       setActiveSection(getActiveSection() === "kabbalah" ? "home" : "kabbalah");
     });
 
+    bindClick(elements.openKabbalahSephirotEl, () => {
+      setActiveSection("kabbalah");
+    });
+
+    bindClick(elements.openKabbalahWorldsEl, () => {
+      setActiveSection("kabbalah-worlds");
+    });
+
+    bindClick(elements.openKabbalahPathsEl, () => {
+      setActiveSection("kabbalah-paths");
+    });
+
+    bindClick(elements.openKabbalahCrossEl, () => {
+      setActiveSection("kabbalah-cross");
+    });
+
     bindClick(elements.openKabbalahTreeEl, () => {
-      setActiveSection(getActiveSection() === "kabbalah-tree" ? "home" : "kabbalah-tree");
+      setActiveSection("kabbalah-tree");
     });
 
     bindClick(elements.openKabbalahCubeEl, () => {
-      setActiveSection(getActiveSection() === "cube" ? "home" : "cube");
+      setActiveSection("cube");
     });
 
     bindClick(elements.openAlphabetWordEl, () => {
@@ -403,17 +437,21 @@
 
     document.addEventListener("nav:kabbalah-path", (event) => {
       const magickDataset = getMagickDataset();
-      const pathNo = event?.detail?.pathNo;
+      const pathNo = getKabbalahPathNo(event?.detail);
       if (typeof ensure.ensureKabbalahSection === "function" && magickDataset) {
         ensure.ensureKabbalahSection(magickDataset);
       }
-      setActiveSection("kabbalah-tree");
       if (pathNo != null) {
+        const targetSection = Number(pathNo) >= 11 ? "kabbalah-paths" : "kabbalah";
+        setActiveSection(targetSection);
         requestAnimationFrame(() => {
           window.KabbalahSectionUi?.selectNode?.(pathNo);
-          scheduleSectionDetailOnly("kabbalah-tree");
+          scheduleSectionDetailOnly(targetSection);
         });
+        return;
       }
+
+      setActiveSection("kabbalah-paths");
     });
 
     document.addEventListener("nav:planet", (event) => {
@@ -473,7 +511,7 @@
     });
 
     document.addEventListener("tarot:view-kab-path", (event) => {
-      setActiveSection("kabbalah-tree");
+      setActiveSection("kabbalah-paths");
       const pathNumber = event?.detail?.pathNumber;
       if (pathNumber != null) {
         requestAnimationFrame(() => {
@@ -483,7 +521,7 @@
           } else {
             kabbalahUi?.selectPathByNumber?.(pathNumber);
           }
-          scheduleSectionDetailOnly("kabbalah-tree");
+          scheduleSectionDetailOnly("kabbalah-paths");
         });
       }
     });