building new tarot frame component for custom layout

app/ui-navigation.js

@@ -22,6 +22,81 @@
     return config.getMagickDataset?.() || null;
   }
 
+  const DETAIL_VIEW_SELECTOR_BY_SECTION = {
+    tarot: "#tarot-browse-view .tarot-layout",
+    cube: "#cube-layout",
+    zodiac: "#zodiac-section .planet-layout",
+    "alphabet-letters": "#alphabet-letters-section .planet-layout",
+    numbers: "#numbers-section .numbers-main-layout",
+    iching: "#iching-section .planet-layout",
+    gods: "#gods-section .planet-layout",
+    calendar: "#calendar-section .planet-layout",
+    "kabbalah-tree": "#kabbalah-tree-section .kab-layout",
+    planets: "#planet-section .planet-layout",
+    elements: "#elements-section .planet-layout"
+  };
+
+  function showSectionDetailOnly(sectionKey, persist = false) {
+    const selector = DETAIL_VIEW_SELECTOR_BY_SECTION[sectionKey];
+    if (!selector) {
+      return false;
+    }
+
+    const target = document.querySelector(selector);
+    if (!(target instanceof HTMLElement)) {
+      return false;
+    }
+
+    return Boolean(window.TarotChromeUi?.showDetailOnly?.(target, persist));
+  }
+
+  function isSectionDetailOnly(sectionKey) {
+    const selector = DETAIL_VIEW_SELECTOR_BY_SECTION[sectionKey];
+    if (!selector) {
+      return false;
+    }
+
+    const target = document.querySelector(selector);
+    if (!(target instanceof HTMLElement)) {
+      return false;
+    }
+
+    return target.classList.contains("layout-sidebar-collapsed")
+      && !target.classList.contains("layout-detail-collapsed");
+  }
+
+  function scheduleSectionDetailOnly(sectionKey, persist = false, attempts = 4) {
+    requestAnimationFrame(() => {
+      showSectionDetailOnly(sectionKey, persist);
+      if (!isSectionDetailOnly(sectionKey) && attempts > 1) {
+        scheduleSectionDetailOnly(sectionKey, persist, attempts - 1);
+      }
+    });
+  }
+
+  async function prepareTarotBrowseDetailView() {
+    const ensure = config.ensure || {};
+    const referenceData = getReferenceData();
+    const magickDataset = getMagickDataset();
+
+    setActiveSection("tarot");
+    config.tarotSpreadUi?.showCardsView?.();
+
+    if (typeof ensure.ensureTarotSection === "function" && referenceData) {
+      await ensure.ensureTarotSection(referenceData, magickDataset);
+    }
+
+    await new Promise((resolve) => {
+      requestAnimationFrame(resolve);
+    });
+
+    await new Promise((resolve) => {
+      requestAnimationFrame(resolve);
+    });
+
+    showSectionDetailOnly("tarot");
+  }
+
   function bindClick(element, handler) {
     if (!element) {
       return;
@@ -60,6 +135,10 @@
       }
     });
 
+    bindClick(elements.openTarotFrameEl, () => {
+      setActiveSection(getActiveSection() === "tarot-frame" ? "home" : "tarot-frame");
+    });
+
     bindClick(elements.openTarotHouseEl, () => {
       setActiveSection(getActiveSection() === "tarot-house" ? "home" : "tarot-house");
     });
@@ -170,6 +249,7 @@
         if (!selected && detail?.wallId) {
           ui?.selectWallById?.(detail.wallId);
         }
+        scheduleSectionDetailOnly("cube");
       });
     });
 
@@ -184,6 +264,7 @@
       if (signId) {
         requestAnimationFrame(() => {
           window.ZodiacSectionUi?.selectBySignId?.(signId);
+          scheduleSectionDetailOnly("zodiac");
         });
       }
     });
@@ -207,22 +288,27 @@
         const ui = window.AlphabetSectionUi;
         if ((alphabet === "hebrew" || (!alphabet && hebrewLetterId)) && hebrewLetterId) {
           ui?.selectLetterByHebrewId?.(hebrewLetterId);
+          scheduleSectionDetailOnly("alphabet-letters");
           return;
         }
         if (alphabet === "greek" && greekName) {
           ui?.selectGreekLetterByName?.(greekName);
+          scheduleSectionDetailOnly("alphabet-letters");
           return;
         }
         if (alphabet === "english" && englishLetter) {
           ui?.selectEnglishLetter?.(englishLetter);
+          scheduleSectionDetailOnly("alphabet-letters");
           return;
         }
         if (alphabet === "arabic" && arabicName) {
           ui?.selectArabicLetter?.(arabicName);
+          scheduleSectionDetailOnly("alphabet-letters");
           return;
         }
         if (alphabet === "enochian" && enochianId) {
           ui?.selectEnochianLetter?.(enochianId);
+          scheduleSectionDetailOnly("alphabet-letters");
         }
       });
     });
@@ -241,6 +327,7 @@
         if (typeof config.selectNumberEntry === "function") {
           config.selectNumberEntry(normalizedValue);
         }
+        scheduleSectionDetailOnly("numbers");
       });
     });
 
@@ -259,10 +346,12 @@
         const ui = window.IChingSectionUi;
         if (hexagramNumber != null) {
           ui?.selectByHexagramNumber?.(hexagramNumber);
+          scheduleSectionDetailOnly("iching");
           return;
         }
         if (planetaryInfluence) {
           ui?.selectByPlanetaryInfluence?.(planetaryInfluence);
+          scheduleSectionDetailOnly("iching");
         }
       });
     });
@@ -284,6 +373,7 @@
         if (!viaId && !viaName && pathNo != null) {
           ui?.selectByPathNo?.(pathNo);
         }
+        scheduleSectionDetailOnly("gods");
       });
     });
 
@@ -307,6 +397,7 @@
           window.CalendarSectionUi?.selectCalendarType?.(calendarId);
         }
         window.CalendarSectionUi?.selectByMonthId?.(monthId);
+        scheduleSectionDetailOnly("calendar");
       });
     });
 
@@ -320,6 +411,7 @@
       if (pathNo != null) {
         requestAnimationFrame(() => {
           window.KabbalahSectionUi?.selectNode?.(pathNo);
+          scheduleSectionDetailOnly("kabbalah-tree");
         });
       }
     });
@@ -337,6 +429,7 @@
       setActiveSection("planets");
       requestAnimationFrame(() => {
         window.PlanetSectionUi?.selectByPlanetId?.(planetId);
+        scheduleSectionDetailOnly("planets");
       });
     });
 
@@ -355,38 +448,27 @@
 
       requestAnimationFrame(() => {
         window.ElementsSectionUi?.selectByElementId?.(elementId);
+        scheduleSectionDetailOnly("elements");
       });
     });
 
-    document.addEventListener("nav:tarot-trump", (event) => {
-      const referenceData = getReferenceData();
-      const magickDataset = getMagickDataset();
-      if (typeof ensure.ensureTarotSection === "function" && referenceData) {
-        ensure.ensureTarotSection(referenceData, magickDataset);
-      }
-      setActiveSection("tarot");
+    document.addEventListener("nav:tarot-trump", async (event) => {
+      await prepareTarotBrowseDetailView();
       const { trumpNumber, cardName } = event?.detail || {};
-      requestAnimationFrame(() => {
-        if (trumpNumber != null) {
-          window.TarotSectionUi?.selectCardByTrump?.(trumpNumber);
-        } else if (cardName) {
-          window.TarotSectionUi?.selectCardByName?.(cardName);
-        }
-      });
+
+      if (trumpNumber != null) {
+        window.TarotSectionUi?.selectCardByTrump?.(trumpNumber);
+      } else if (cardName) {
+        window.TarotSectionUi?.selectCardByName?.(cardName);
+      }
     });
 
-    document.addEventListener("kab:view-trump", (event) => {
-      const referenceData = getReferenceData();
-      const magickDataset = getMagickDataset();
-      setActiveSection("tarot");
+    document.addEventListener("kab:view-trump", async (event) => {
+      await prepareTarotBrowseDetailView();
       const trumpNumber = event?.detail?.trumpNumber;
+
       if (trumpNumber != null) {
-        if (typeof ensure.ensureTarotSection === "function" && referenceData) {
-          ensure.ensureTarotSection(referenceData, magickDataset);
-        }
-        requestAnimationFrame(() => {
-          window.TarotSectionUi?.selectCardByTrump?.(trumpNumber);
-        });
+        window.TarotSectionUi?.selectCardByTrump?.(trumpNumber);
       }
     });
 
@@ -401,6 +483,7 @@
           } else {
             kabbalahUi?.selectPathByNumber?.(pathNumber);
           }
+          scheduleSectionDetailOnly("kabbalah-tree");
         });
       }
     });