building new tarot frame component for custom layout

app.js

@@ -40,6 +40,7 @@ const holidaySectionEl = document.getElementById("holiday-section");
 const audioCircleSectionEl = document.getElementById("audio-circle-section");
 const audioNotesSectionEl = document.getElementById("audio-notes-section");
 const tarotSectionEl = document.getElementById("tarot-section");
+const tarotFrameSectionEl = document.getElementById("tarot-frame-section");
 const tarotHouseSectionEl = document.getElementById("tarot-house-section");
 const astronomySectionEl = document.getElementById("astronomy-section");
 const natalSectionEl = document.getElementById("natal-section");
@@ -67,6 +68,7 @@ const openAudioEl = document.getElementById("open-audio");
 const openAudioCircleEl = document.getElementById("open-audio-circle");
 const openAudioNotesEl = document.getElementById("open-audio-notes");
 const openTarotEl = document.getElementById("open-tarot");
+const openTarotFrameEl = document.getElementById("open-tarot-frame");
 const openTarotHouseEl = document.getElementById("open-tarot-house");
 const openAstronomyEl = document.getElementById("open-astronomy");
 const openPlanetsEl = document.getElementById("open-planets");
@@ -393,6 +395,11 @@ window.TarotSpreadUi?.init?.({
   setActiveSection: (section) => sectionStateUi.setActiveSection?.(section)
 });
 
+window.TarotFrameUi?.init?.({
+  ensureTarotSection,
+  getCards: () => window.TarotSectionUi?.getCards?.() || []
+});
+
 sectionStateUi.init?.({
   calendar,
   tarotSpreadUi,
@@ -411,6 +418,7 @@ sectionStateUi.init?.({
     audioCircleSectionEl,
     audioNotesSectionEl,
     tarotSectionEl,
+    tarotFrameSectionEl,
     tarotHouseSectionEl,
     astronomySectionEl,
     natalSectionEl,
@@ -438,6 +446,7 @@ sectionStateUi.init?.({
     openAudioCircleEl,
     openAudioNotesEl,
     openTarotEl,
+    openTarotFrameEl,
     openTarotHouseEl,
     openAstronomyEl,
     openPlanetsEl,
@@ -460,6 +469,7 @@ sectionStateUi.init?.({
   },
   ensure: {
     ensureTarotSection,
+    ensureTarotFrameSection: window.TarotFrameUi?.ensureTarotFrameSection,
     ensurePlanetSection,
     ensureCyclesSection,
     ensureElementsSection,
@@ -540,6 +550,7 @@ navigationUi.init?.({
     openAudioCircleEl,
     openAudioNotesEl,
     openTarotEl,
+    openTarotFrameEl,
     openTarotHouseEl,
     openAstronomyEl,
     openPlanetsEl,
@@ -562,6 +573,7 @@ navigationUi.init?.({
   },
   ensure: {
     ensureTarotSection,
+    ensureTarotFrameSection: window.TarotFrameUi?.ensureTarotFrameSection,
     ensurePlanetSection,
     ensureCyclesSection,
     ensureElementsSection,