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

app.js

@@ -50,6 +50,9 @@ const cyclesSectionEl = document.getElementById("cycles-section");
 const elementsSectionEl = document.getElementById("elements-section");
 const ichingSectionEl = document.getElementById("iching-section");
 const kabbalahSectionEl = document.getElementById("kabbalah-section");
+const kabbalahWorldsSectionEl = document.getElementById("kabbalah-worlds-section");
+const kabbalahPathsSectionEl = document.getElementById("kabbalah-paths-section");
+const kabbalahCrossSectionEl = document.getElementById("kabbalah-cross-section");
 const kabbalahTreeSectionEl = document.getElementById("kabbalah-tree-section");
 const cubeSectionEl = document.getElementById("cube-section");
 const alphabetSectionEl = document.getElementById("alphabet-section");
@@ -78,6 +81,10 @@ const openCyclesEl = document.getElementById("open-cycles");
 const openElementsEl = document.getElementById("open-elements");
 const openIChingEl = document.getElementById("open-iching");
 const openKabbalahEl = document.getElementById("open-kabbalah");
+const openKabbalahSephirotEl = document.getElementById("open-kabbalah-sephirot");
+const openKabbalahWorldsEl = document.getElementById("open-kabbalah-worlds");
+const openKabbalahPathsEl = document.getElementById("open-kabbalah-paths");
+const openKabbalahCrossEl = document.getElementById("open-kabbalah-cross");
 const openKabbalahTreeEl = document.getElementById("open-kabbalah-tree");
 const openKabbalahCubeEl = document.getElementById("open-kabbalah-cube");
 const openAlphabetEl = document.getElementById("open-alphabet");
@@ -327,15 +334,22 @@ function getConnectionSettings() {
   };
 }
 
-function syncConnectionGateInputs() {
-  const connectionSettings = getConnectionSettings();
+function normalizeConnectionSettingsInput(connectionSettings = null) {
+  return {
+    apiBaseUrl: String(connectionSettings?.apiBaseUrl || "").trim().replace(/\/+$/, ""),
+    apiKey: String(connectionSettings?.apiKey || "").trim()
+  };
+}
+
+function syncConnectionGateInputs(connectionSettings = getConnectionSettings()) {
+  const normalizedConnectionSettings = normalizeConnectionSettingsInput(connectionSettings);
 
   if (connectionGateBaseUrlEl) {
-    connectionGateBaseUrlEl.value = String(connectionSettings.apiBaseUrl || "");
+    connectionGateBaseUrlEl.value = normalizedConnectionSettings.apiBaseUrl;
   }
 
   if (connectionGateApiKeyEl) {
-    connectionGateApiKeyEl.value = String(connectionSettings.apiKey || "");
+    connectionGateApiKeyEl.value = normalizedConnectionSettings.apiKey;
   }
 }
 
@@ -352,8 +366,8 @@ function setConnectionGateStatus(text, tone = "default") {
   }
 }
 
-function showConnectionGate(message, tone = "default") {
-  syncConnectionGateInputs();
+function showConnectionGate(message, tone = "default", connectionSettings = null) {
+  syncConnectionGateInputs(connectionSettings || getConnectionSettings());
   if (connectionGateEl) {
     connectionGateEl.hidden = false;
   }
@@ -369,33 +383,49 @@ function hideConnectionGate() {
 }
 
 function getConnectionSettingsFromGate() {
-  return {
+  return normalizeConnectionSettingsInput({
     apiBaseUrl: String(connectionGateBaseUrlEl?.value || "").trim(),
     apiKey: String(connectionGateApiKeyEl?.value || "").trim()
-  };
+  });
+}
+
+function warmAllDeckImagesInBackground() {
+  const activeDeckId = String(window.TarotCardImages?.getActiveDeck?.() || "").trim();
+
+  window.TarotCardImages?.scheduleAllDeckImagePreload?.({
+    startDeckId: activeDeckId,
+    background: true,
+    includeThumbnails: true
+  });
 }
 
 async function ensureConnectedApp(nextConnectionSettings = null) {
-  if (nextConnectionSettings) {
-    window.TarotAppConfig?.updateConnectionSettings?.(nextConnectionSettings);
+  const configuredConnection = nextConnectionSettings
+    ? normalizeConnectionSettingsInput(nextConnectionSettings)
+    : getConnectionSettings();
+
+  if (!nextConnectionSettings) {
+    syncConnectionGateInputs(configuredConnection);
   }
 
-  syncConnectionGateInputs();
-
-  const configuredConnection = getConnectionSettings();
   if (!configuredConnection.apiBaseUrl) {
-    showConnectionGate("Enter an API Base URL to load TaroTime.", "error");
+    showConnectionGate("Enter an API Base URL to load TaroTime.", "error", configuredConnection);
     return false;
   }
 
-  showConnectionGate("Connecting to the API...", "pending");
+  showConnectionGate("Connecting to the API...", "pending", configuredConnection);
 
-  const probeResult = await window.TarotDataService?.probeConnection?.();
+  const probeResult = await window.TarotDataService?.probeConnection?.(configuredConnection);
   if (!probeResult?.ok) {
-    showConnectionGate(probeResult?.message || "Unable to reach the API.", "error");
+    showConnectionGate(probeResult?.message || "Unable to reach the API.", "error", configuredConnection);
     return false;
   }
 
+  if (nextConnectionSettings) {
+    window.TarotAppConfig?.updateConnectionSettings?.(configuredConnection);
+    syncConnectionGateInputs(configuredConnection);
+  }
+
   hideConnectionGate();
   if (!hasRenderedConnectedShell) {
     sectionStateUi.setActiveSection?.("home");
@@ -405,6 +435,7 @@ async function ensureConnectedApp(nextConnectionSettings = null) {
   setConnectionGateStatus("Connected.", "success");
   setStatus(`Connected to ${configuredConnection.apiBaseUrl}.`);
   await appRuntime.renderWeek?.();
+  warmAllDeckImagesInBackground();
   return true;
 }
 
@@ -491,6 +522,9 @@ sectionStateUi.init?.({
     elementsSectionEl,
     ichingSectionEl,
     kabbalahSectionEl,
+    kabbalahWorldsSectionEl,
+    kabbalahPathsSectionEl,
+    kabbalahCrossSectionEl,
     kabbalahTreeSectionEl,
     cubeSectionEl,
     alphabetSectionEl,
@@ -519,6 +553,10 @@ sectionStateUi.init?.({
     openElementsEl,
     openIChingEl,
     openKabbalahEl,
+    openKabbalahSephirotEl,
+    openKabbalahWorldsEl,
+    openKabbalahPathsEl,
+    openKabbalahCrossEl,
     openKabbalahTreeEl,
     openKabbalahCubeEl,
     openAlphabetEl,
@@ -626,6 +664,10 @@ navigationUi.init?.({
     openElementsEl,
     openIChingEl,
     openKabbalahEl,
+    openKabbalahSephirotEl,
+    openKabbalahWorldsEl,
+    openKabbalahPathsEl,
+    openKabbalahCrossEl,
     openKabbalahTreeEl,
     openKabbalahCubeEl,
     openAlphabetEl,