building new tarot frame component for custom layout

app/ui-section-state.js

@@ -9,6 +9,7 @@
     "audio-circle",
     "audio-notes",
     "tarot",
+    "tarot-frame",
     "tarot-house",
     "astronomy",
     "planets",
@@ -94,8 +95,9 @@
     const isAudioCircleOpen = activeSection === "audio-circle";
     const isAudioMenuOpen = isAudioNotesOpen || isAudioCircleOpen;
     const isTarotOpen = activeSection === "tarot";
+    const isTarotFrameOpen = activeSection === "tarot-frame";
     const isTarotHouseOpen = activeSection === "tarot-house";
-    const isTarotMenuOpen = isTarotOpen || isTarotHouseOpen;
+    const isTarotMenuOpen = isTarotOpen || isTarotFrameOpen || isTarotHouseOpen;
     const isAstronomyOpen = activeSection === "astronomy";
     const isPlanetOpen = activeSection === "planets";
     const isCyclesOpen = activeSection === "cycles";
@@ -123,6 +125,7 @@
     setHidden(elements.audioCircleSectionEl, !isAudioCircleOpen);
     setHidden(elements.audioNotesSectionEl, !isAudioNotesOpen);
     setHidden(elements.tarotSectionEl, !isTarotOpen);
+    setHidden(elements.tarotFrameSectionEl, !isTarotFrameOpen);
     setHidden(elements.tarotHouseSectionEl, !isTarotHouseOpen);
     setHidden(elements.astronomySectionEl, !isAstronomyOpen);
     setHidden(elements.planetSectionEl, !isPlanetOpen);
@@ -152,6 +155,7 @@
     toggleActive(elements.openAudioCircleEl, isAudioCircleOpen);
     toggleActive(elements.openAudioNotesEl, isAudioNotesOpen);
     setPressed(elements.openTarotEl, isTarotMenuOpen);
+    toggleActive(elements.openTarotFrameEl, isTarotFrameOpen);
     toggleActive(elements.openTarotHouseEl, isTarotHouseOpen);
     config.tarotSpreadUi?.applyViewState?.();
     setPressed(elements.openAstronomyEl, isAstronomyMenuOpen);
@@ -211,6 +215,11 @@
       return;
     }
 
+    if (isTarotFrameOpen) {
+      ensure.ensureTarotFrameSection?.(referenceData, magickDataset);
+      return;
+    }
+
     if (isTarotHouseOpen) {
       ensure.ensureTarotSection?.(referenceData, magickDataset);
       return;