testing cube links

app/ui-cube-detail.js

@@ -40,6 +40,23 @@
     return card;
   }
 
+  function appendLinkRow(card, buttons) {
+    const validButtons = Array.isArray(buttons)
+      ? buttons.filter((button) => button instanceof Node)
+      : [];
+    if (!(card instanceof HTMLElement) || !validButtons.length) {
+      return card;
+    }
+
+    const row = document.createElement("div");
+    row.className = "kab-god-links";
+    validButtons.forEach((button) => {
+      row.appendChild(button);
+    });
+    card.appendChild(row);
+    return card;
+  }
+
   function createNavButton(label, eventName, detail) {
     const button = document.createElement("button");
     button.type = "button";
@@ -84,22 +101,11 @@
         <dt>Element</dt><dd>${toDetailValueMarkup(center?.element)}</dd>
       </dl>
     `;
-    bodyEl.appendChild(createMetaCard("Center Details", summary));
-
-    if (Array.isArray(center?.keywords) && center.keywords.length) {
-      bodyEl.appendChild(createMetaCard("Keywords", center.keywords.join(", ")));
-    }
-
-    if (center?.description) {
-      bodyEl.appendChild(createMetaCard("Description", center.description));
-    }
-
     const associations = center?.associations || {};
-    const links = document.createElement("div");
-    links.className = "kab-god-links";
+    const detailButtons = [];
 
     if (centerLetterId) {
-      links.appendChild(createNavButton(centerLetter || "!", "nav:alphabet", {
+      detailButtons.push(createNavButton(centerLetter || "!", "nav:alphabet", {
         alphabet: "hebrew",
         hebrewLetterId: centerLetterId
       }));
@@ -108,7 +114,7 @@
     const centerTrumpNo = toFiniteNumber(associations?.tarotTrumpNumber);
     const centerTarotCard = toDisplayText(associations?.tarotCard);
     if (centerTarotCard || centerTrumpNo != null) {
-      links.appendChild(createNavButton(centerTarotCard || `Trump ${centerTrumpNo}`, "nav:tarot-trump", {
+      detailButtons.push(createNavButton(centerTarotCard || `Trump ${centerTrumpNo}`, "nav:tarot-trump", {
         cardName: centerTarotCard,
         trumpNumber: centerTrumpNo
       }));
@@ -116,17 +122,19 @@
 
     const centerPathNo = toFiniteNumber(associations?.kabbalahPathNumber);
     if (centerPathNo != null) {
-      links.appendChild(createNavButton(`Path ${centerPathNo}`, "nav:kabbalah-path", {
+      detailButtons.push(createNavButton(`Path ${centerPathNo}`, "nav:kabbalah-path", {
         pathNo: centerPathNo
       }));
     }
 
-    if (links.childElementCount) {
-      const linksCard = document.createElement("div");
-      linksCard.className = "planet-meta-card";
-      linksCard.innerHTML = "<strong>Correspondence Links</strong>";
-      linksCard.appendChild(links);
-      bodyEl.appendChild(linksCard);
+    bodyEl.appendChild(appendLinkRow(createMetaCard("Center Details", summary), detailButtons));
+
+    if (Array.isArray(center?.keywords) && center.keywords.length) {
+      bodyEl.appendChild(createMetaCard("Keywords", center.keywords.join(", ")));
+    }
+
+    if (center?.description) {
+      bodyEl.appendChild(createMetaCard("Description", center.description));
     }
 
     return true;
@@ -187,39 +195,30 @@
         <dt>Tarot</dt><dd>${toDetailValueMarkup(tarotCard || (tarotTrumpNumber != null ? `Trump ${tarotTrumpNumber}` : ""))}</dd>
       </dl>
     `;
-    bodyEl.appendChild(createMetaCard("Connector Details", summary));
-
-    if (astrologySummary) {
-      bodyEl.appendChild(createMetaCard("Astrology", astrologySummary));
-    }
-
-    const links = document.createElement("div");
-    links.className = "kab-god-links";
+    const connectorButtons = [];
 
     if (letterId) {
-      links.appendChild(createNavButton(letterSymbol || "!", "nav:alphabet", {
+      connectorButtons.push(createNavButton(letterSymbol || "!", "nav:alphabet", {
         alphabet: "hebrew",
         hebrewLetterId: letterId
       }));
     }
 
     if (pathNo != null) {
-      links.appendChild(createNavButton(`Path ${pathNo}`, "nav:kabbalah-path", { pathNo }));
+      connectorButtons.push(createNavButton(`Path ${pathNo}`, "nav:kabbalah-path", { pathNo }));
     }
 
     if (tarotCard || tarotTrumpNumber != null) {
-      links.appendChild(createNavButton(tarotCard || `Trump ${tarotTrumpNumber}`, "nav:tarot-trump", {
+      connectorButtons.push(createNavButton(tarotCard || `Trump ${tarotTrumpNumber}`, "nav:tarot-trump", {
         cardName: tarotCard,
         trumpNumber: tarotTrumpNumber
       }));
     }
 
-    if (links.childElementCount) {
-      const linksCard = document.createElement("div");
-      linksCard.className = "planet-meta-card";
-      linksCard.innerHTML = "<strong>Correspondence Links</strong>";
-      linksCard.appendChild(links);
-      bodyEl.appendChild(linksCard);
+    bodyEl.appendChild(appendLinkRow(createMetaCard("Connector Details", summary), connectorButtons));
+
+    if (astrologySummary) {
+      bodyEl.appendChild(createMetaCard("Astrology", astrologySummary));
     }
 
     return true;
@@ -406,21 +405,7 @@
         <dt>Archangel</dt><dd>${toDetailValueMarkup(wall.archangel)}</dd>
       </dl>
     `;
-    bodyEl.appendChild(createMetaCard("Wall Details", summary));
-
-    if (Array.isArray(wall.keywords) && wall.keywords.length) {
-      bodyEl.appendChild(createMetaCard("Keywords", wall.keywords.join(", ")));
-    }
-
-    if (wall.description) {
-      bodyEl.appendChild(createMetaCard("Description", wall.description));
-    }
-
-    const wallLinksCard = document.createElement("div");
-    wallLinksCard.className = "planet-meta-card";
-    wallLinksCard.innerHTML = "<strong>Correspondence Links</strong>";
-    const wallLinks = document.createElement("div");
-    wallLinks.className = "kab-god-links";
+    const wallButtons = [];
 
     if (wallFaceLetterId) {
       const wallFaceLetterName = getHebrewLetterName(wallFaceLetterId) || toDisplayText(wallFaceLetterId);
@@ -428,7 +413,7 @@
       const faceLetterLabel = faceLetterText
         ? `Face ${faceLetterText}`
         : "Face !";
-      wallLinks.appendChild(createNavButton(faceLetterLabel, "nav:alphabet", {
+      wallButtons.push(createNavButton(faceLetterLabel, "nav:alphabet", {
         alphabet: "hebrew",
         hebrewLetterId: wallFaceLetterId
       }));
@@ -436,13 +421,13 @@
 
     const wallAssociations = wall.associations || {};
     if (wallAssociations.planetId) {
-      wallLinks.appendChild(createNavButton(toDisplayText(wall.planet) || "!", "nav:planet", {
+      wallButtons.push(createNavButton(toDisplayText(wall.planet) || "!", "nav:planet", {
         planetId: wallAssociations.planetId
       }));
     }
 
     if (wallAssociations.godName) {
-      wallLinks.appendChild(createNavButton(wallAssociations.godName, "nav:gods", {
+      wallButtons.push(createNavButton(wallAssociations.godName, "nav:gods", {
         godName: wallAssociations.godName
       }));
     }
@@ -456,12 +441,17 @@
       internal.addEventListener("click", () => {
         onSelectWall(wall.oppositeWallId);
       });
-      wallLinks.appendChild(internal);
+      wallButtons.push(internal);
     }
 
-    if (wallLinks.childElementCount) {
-      wallLinksCard.appendChild(wallLinks);
-      bodyEl.appendChild(wallLinksCard);
+    bodyEl.appendChild(appendLinkRow(createMetaCard("Wall Details", summary), wallButtons));
+
+    if (Array.isArray(wall.keywords) && wall.keywords.length) {
+      bodyEl.appendChild(createMetaCard("Keywords", wall.keywords.join(", ")));
+    }
+
+    if (wall.description) {
+      bodyEl.appendChild(createMetaCard("Description", wall.description));
     }
 
     const edgesCard = document.createElement("div");
@@ -597,21 +587,7 @@
         <dt>Path</dt><dd>${toDetailValueMarkup(pathNo != null ? `Path ${pathNo}` : "")}</dd>
       </dl>
     `;
-    bodyEl.appendChild(createMetaCard("Edge Details", summary));
-
-    if (Array.isArray(edge?.keywords) && edge.keywords.length) {
-      bodyEl.appendChild(createMetaCard("Keywords", edge.keywords.join(", ")));
-    }
-
-    if (edge?.description) {
-      bodyEl.appendChild(createMetaCard("Description", edge.description));
-    }
-
-    const linksCard = document.createElement("div");
-    linksCard.className = "planet-meta-card";
-    linksCard.innerHTML = "<strong>Correspondence Links</strong>";
-    const links = document.createElement("div");
-    links.className = "kab-god-links";
+    const edgeButtons = [];
 
     edgeWalls.forEach((wallId) => {
       const wall = getWallById(wallId);
@@ -622,36 +598,41 @@
       button.addEventListener("click", () => {
         onSelectWall(wallId);
       });
-      links.appendChild(button);
+      edgeButtons.push(button);
     });
 
     if (edgeLetterId) {
-      links.appendChild(createNavButton(edgeLetter || "!", "nav:alphabet", {
+      edgeButtons.push(createNavButton(edgeLetter || "!", "nav:alphabet", {
         alphabet: "hebrew",
         hebrewLetterId: edgeLetterId
       }));
     }
 
     if (astrologyType === "zodiac" && astrologyName) {
-      links.appendChild(createNavButton(astrologyName, "nav:zodiac", {
+      edgeButtons.push(createNavButton(astrologyName, "nav:zodiac", {
         signId: normalizeId(astrologyName)
       }));
     }
 
     if (tarotCard || tarotTrumpNumber != null) {
-      links.appendChild(createNavButton(tarotCard || `Trump ${tarotTrumpNumber}`, "nav:tarot-trump", {
+      edgeButtons.push(createNavButton(tarotCard || `Trump ${tarotTrumpNumber}`, "nav:tarot-trump", {
         cardName: tarotCard,
         trumpNumber: tarotTrumpNumber
       }));
     }
 
     if (pathNo != null) {
-      links.appendChild(createNavButton(`Path ${pathNo}`, "nav:kabbalah-path", { pathNo }));
+      edgeButtons.push(createNavButton(`Path ${pathNo}`, "nav:kabbalah-path", { pathNo }));
     }
 
-    if (links.childElementCount) {
-      linksCard.appendChild(links);
-      bodyEl.appendChild(linksCard);
+    bodyEl.appendChild(appendLinkRow(createMetaCard("Edge Details", summary), edgeButtons));
+
+    if (Array.isArray(edge?.keywords) && edge.keywords.length) {
+      bodyEl.appendChild(createMetaCard("Keywords", edge.keywords.join(", ")));
+    }
+
+    if (edge?.description) {
+      bodyEl.appendChild(createMetaCard("Description", edge.description));
     }
 
     return true;

index.html

@@ -1218,7 +1218,7 @@
   <script src="app/ui-kabbalah-detail.js"></script>
   <script src="app/ui-kabbalah-views.js"></script>
   <script src="app/ui-kabbalah.js?v=20260312-tree-export-01"></script>
-  <script src="app/ui-cube-detail.js?v=20260424-cube-fixes-01"></script>
+  <script src="app/ui-cube-detail.js?v=20260424-cube-links-01"></script>
   <script src="app/ui-cube-chassis.js?v=20260424-cube-fixes-01"></script>
   <script src="app/ui-cube-math.js"></script>
   <script src="app/ui-cube-selection.js?v=20260424-cube-fixes-01"></script>