test new global styles for inline buttons in details, and add links to tarot cards in planet details

app/ui-cube-detail.js

@@ -40,21 +40,68 @@
     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;
-    }
+  function appendInlineParts(target, parts) {
+    (Array.isArray(parts) ? parts : []).forEach((part) => {
+      if (part instanceof Node) {
+        target.appendChild(part);
+        return;
+      }
 
-    const row = document.createElement("div");
-    row.className = "kab-god-links";
-    validButtons.forEach((button) => {
-      row.appendChild(button);
+      const text = String(part ?? "");
+      if (text) {
+        target.appendChild(document.createTextNode(text));
+      }
     });
-    card.appendChild(row);
-    return card;
+  }
+
+  function createInlineEventLink(label, eventName, detail) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "detail-inline-link";
+    button.textContent = String(label || "—");
+    button.addEventListener("click", () => {
+      document.dispatchEvent(new CustomEvent(eventName, { detail }));
+    });
+    return button;
+  }
+
+  function createInlineActionLink(label, onActivate) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "detail-inline-link";
+    button.textContent = String(label || "—");
+    button.addEventListener("click", () => {
+      onActivate?.();
+    });
+    return button;
+  }
+
+  function createInlineValue(parts) {
+    const value = document.createElement("span");
+    value.className = "detail-inline-value";
+    appendInlineParts(value, parts);
+    return value;
+  }
+
+  function createDetailList(rows) {
+    const list = document.createElement("dl");
+    list.className = "alpha-dl";
+
+    (Array.isArray(rows) ? rows : []).forEach((row) => {
+      const term = document.createElement("dt");
+      term.textContent = String(row?.label || "").trim();
+
+      const detail = document.createElement("dd");
+      if (row?.value instanceof Node) {
+        detail.appendChild(row.value);
+      } else {
+        detail.innerHTML = toDetailValueMarkup(row?.value);
+      }
+
+      list.append(term, detail);
+    });
+
+    return list;
   }
 
   function createNavButton(label, eventName, detail) {
@@ -92,42 +139,45 @@
     const bodyEl = elements.detailBodyEl;
     bodyEl.innerHTML = "";
 
-    const summary = document.createElement("div");
-    summary.className = "planet-text";
-    summary.innerHTML = `
-      <dl class="alpha-dl">
-        <dt>Name</dt><dd>${toDetailValueMarkup(center?.name)}</dd>
-        <dt>Letter</dt><dd>${toDetailValueMarkup(centerLetterText)}</dd>
-        <dt>Element</dt><dd>${toDetailValueMarkup(center?.element)}</dd>
-      </dl>
-    `;
     const associations = center?.associations || {};
-    const detailButtons = [];
-
-    if (centerLetterId) {
-      detailButtons.push(createNavButton(centerLetter || "!", "nav:alphabet", {
-        alphabet: "hebrew",
-        hebrewLetterId: centerLetterId
-      }));
-    }
 
     const centerTrumpNo = toFiniteNumber(associations?.tarotTrumpNumber);
     const centerTarotCard = toDisplayText(associations?.tarotCard);
-    if (centerTarotCard || centerTrumpNo != null) {
-      detailButtons.push(createNavButton(centerTarotCard || `Trump ${centerTrumpNo}`, "nav:tarot-trump", {
-        cardName: centerTarotCard,
-        trumpNumber: centerTrumpNo
-      }));
-    }
-
     const centerPathNo = toFiniteNumber(associations?.kabbalahPathNumber);
-    if (centerPathNo != null) {
-      detailButtons.push(createNavButton(`Path ${centerPathNo}`, "nav:kabbalah-path", {
-        pathNo: centerPathNo
-      }));
+    const summaryRows = [
+      { label: "Name", value: center?.name },
+      {
+        label: "Letter",
+        value: centerLetterId
+          ? createInlineEventLink(centerLetterText, "nav:alphabet", {
+            alphabet: "hebrew",
+            hebrewLetterId: centerLetterId
+          })
+          : centerLetterText
+      },
+      { label: "Element", value: center?.element }
+    ];
+
+    if (centerTarotCard || centerTrumpNo != null) {
+      summaryRows.push({
+        label: "Tarot",
+        value: createInlineEventLink(centerTarotCard || `Trump ${centerTrumpNo}`, "nav:tarot-trump", {
+          cardName: centerTarotCard,
+          trumpNumber: centerTrumpNo
+        })
+      });
     }
 
-    bodyEl.appendChild(appendLinkRow(createMetaCard("Center Details", summary), detailButtons));
+    if (centerPathNo != null) {
+      summaryRows.push({
+        label: "Path",
+        value: createInlineEventLink(`Path ${centerPathNo}`, "nav:kabbalah-path", {
+          pathNo: centerPathNo
+        })
+      });
+    }
+
+    bodyEl.appendChild(createMetaCard("Center Details", createDetailList(summaryRows)));
 
     if (Array.isArray(center?.keywords) && center.keywords.length) {
       bodyEl.appendChild(createMetaCard("Keywords", center.keywords.join(", ")));
@@ -185,37 +235,52 @@
     const bodyEl = elements.detailBodyEl;
     bodyEl.innerHTML = "";
 
-    const summary = document.createElement("div");
-    summary.className = "planet-text";
-    summary.innerHTML = `
-      <dl class="alpha-dl">
-        <dt>Letter</dt><dd>${toDetailValueMarkup(letterText)}</dd>
-        <dt>From</dt><dd>${toDetailValueMarkup(fromWall?.name || formatDirectionName(fromWallId))}</dd>
-        <dt>To</dt><dd>${toDetailValueMarkup(toWall?.name || formatDirectionName(toWallId))}</dd>
-        <dt>Tarot</dt><dd>${toDetailValueMarkup(tarotCard || (tarotTrumpNumber != null ? `Trump ${tarotTrumpNumber}` : ""))}</dd>
-      </dl>
-    `;
-    const connectorButtons = [];
+    const connectorRows = [
+      {
+        label: "Letter",
+        value: letterId
+          ? createInlineEventLink(letterText, "nav:alphabet", {
+            alphabet: "hebrew",
+            hebrewLetterId: letterId
+          })
+          : letterText
+      },
+      {
+        label: "From",
+        value: fromWall
+          ? createInlineActionLink(fromWall?.name || formatDirectionName(fromWallId), () => {
+            context.onSelectWall?.(fromWallId);
+          })
+          : (fromWall?.name || formatDirectionName(fromWallId))
+      },
+      {
+        label: "To",
+        value: toWall
+          ? createInlineActionLink(toWall?.name || formatDirectionName(toWallId), () => {
+            context.onSelectWall?.(toWallId);
+          })
+          : (toWall?.name || formatDirectionName(toWallId))
+      }
+    ];
 
-    if (letterId) {
-      connectorButtons.push(createNavButton(letterSymbol || "!", "nav:alphabet", {
-        alphabet: "hebrew",
-        hebrewLetterId: letterId
-      }));
+    if (tarotCard || tarotTrumpNumber != null) {
+      connectorRows.push({
+        label: "Tarot",
+        value: createInlineEventLink(tarotCard || `Trump ${tarotTrumpNumber}`, "nav:tarot-trump", {
+          cardName: tarotCard,
+          trumpNumber: tarotTrumpNumber
+        })
+      });
     }
 
     if (pathNo != null) {
-      connectorButtons.push(createNavButton(`Path ${pathNo}`, "nav:kabbalah-path", { pathNo }));
+      connectorRows.push({
+        label: "Path",
+        value: createInlineEventLink(`Path ${pathNo}`, "nav:kabbalah-path", { pathNo })
+      });
     }
 
-    if (tarotCard || tarotTrumpNumber != null) {
-      connectorButtons.push(createNavButton(tarotCard || `Trump ${tarotTrumpNumber}`, "nav:tarot-trump", {
-        cardName: tarotCard,
-        trumpNumber: tarotTrumpNumber
-      }));
-    }
-
-    bodyEl.appendChild(appendLinkRow(createMetaCard("Connector Details", summary), connectorButtons));
+    bodyEl.appendChild(createMetaCard("Connector Details", createDetailList(connectorRows)));
 
     if (astrologySummary) {
       bodyEl.appendChild(createMetaCard("Astrology", astrologySummary));
@@ -282,18 +347,47 @@
     title.textContent = `Edge · ${edgeName}`;
     edgeCard.appendChild(title);
 
-    const dlWrap = document.createElement("div");
-    dlWrap.className = "planet-text";
-    dlWrap.innerHTML = `
-      <dl class="alpha-dl">
-        <dt>Direction</dt><dd>${toDetailValueMarkup(edgeName)}</dd>
-        <dt>Edge</dt><dd>${toDetailValueMarkup(edgeWalls)}</dd>
-        <dt>Letter</dt><dd>${toDetailValueMarkup(edgeLetter)}</dd>
-        <dt>Astrology</dt><dd>${toDetailValueMarkup(astrologyText)}</dd>
-        <dt>Tarot</dt><dd>${toDetailValueMarkup(tarotCard)}</dd>
-      </dl>
-    `;
-    edgeCard.appendChild(dlWrap);
+    const edgeRows = [
+      { label: "Direction", value: edgeName },
+      { label: "Edge", value: edgeWalls },
+      {
+        label: "Letter",
+        value: edgeLetterId
+          ? createInlineEventLink(edgeLetter || edgeLetterId, "nav:alphabet", {
+            alphabet: "hebrew",
+            hebrewLetterId: edgeLetterId
+          })
+          : edgeLetter
+      },
+      {
+        label: "Astrology",
+        value: astrologyType === "zodiac" && astrologyName
+          ? createInlineValue([
+            astrologySymbol ? `${astrologySymbol} ` : "",
+            createInlineEventLink(astrologyName, "nav:zodiac", { signId: normalizeId(astrologyName) })
+          ])
+          : astrologyText
+      }
+    ];
+
+    if (tarotCard || tarotTrumpNumber != null) {
+      edgeRows.push({
+        label: "Tarot",
+        value: createInlineEventLink(tarotCard || `Trump ${tarotTrumpNumber}`, "nav:tarot-trump", {
+          cardName: tarotCard,
+          trumpNumber: tarotTrumpNumber
+        })
+      });
+    }
+
+    if (pathNo != null) {
+      edgeRows.push({
+        label: "Path",
+        value: createInlineEventLink(`Path ${pathNo}`, "nav:kabbalah-path", { pathNo })
+      });
+    }
+
+    edgeCard.appendChild(createDetailList(edgeRows));
 
     if (Array.isArray(selectedEdge.keywords) && selectedEdge.keywords.length) {
       const keywords = document.createElement("p");
@@ -309,37 +403,6 @@
       edgeCard.appendChild(description);
     }
 
-    const links = document.createElement("div");
-    links.className = "kab-god-links";
-
-    if (edgeLetterId) {
-      links.appendChild(createNavButton(edgeLetter || "!", "nav:alphabet", {
-        alphabet: "hebrew",
-        hebrewLetterId: edgeLetterId
-      }));
-    }
-
-    if (astrologyType === "zodiac" && astrologyName) {
-      links.appendChild(createNavButton(astrologyName, "nav:zodiac", {
-        signId: normalizeId(astrologyName)
-      }));
-    }
-
-    if (tarotCard) {
-      links.appendChild(createNavButton(tarotCard, "nav:tarot-trump", {
-        cardName: tarotCard,
-        trumpNumber: tarotTrumpNumber
-      }));
-    }
-
-    if (pathNo != null) {
-      links.appendChild(createNavButton(`Path ${pathNo}`, "nav:kabbalah-path", { pathNo }));
-    }
-
-    if (links.childElementCount) {
-      edgeCard.appendChild(links);
-    }
-
     detailBodyEl.appendChild(edgeCard);
   }
 
@@ -394,57 +457,47 @@
     const bodyEl = elements.detailBodyEl;
     bodyEl.innerHTML = "";
 
-    const summary = document.createElement("div");
-    summary.className = "planet-text";
-    summary.innerHTML = `
-      <dl class="alpha-dl">
-        <dt>Opposite</dt><dd>${toDetailValueMarkup(wall.opposite)}</dd>
-        <dt>Face Letter</dt><dd>${toDetailValueMarkup(wallFaceLetterText)}</dd>
-        <dt>Element</dt><dd>${toDetailValueMarkup(wall.element)}</dd>
-        <dt>Planet</dt><dd>${toDetailValueMarkup(wall.planet)}</dd>
-        <dt>Archangel</dt><dd>${toDetailValueMarkup(wall.archangel)}</dd>
-      </dl>
-    `;
-    const wallButtons = [];
-
-    if (wallFaceLetterId) {
-      const wallFaceLetterName = getHebrewLetterName(wallFaceLetterId) || toDisplayText(wallFaceLetterId);
-      const faceLetterText = [wallFaceLetter, wallFaceLetterName].filter(Boolean).join(" ");
-      const faceLetterLabel = faceLetterText
-        ? `Face ${faceLetterText}`
-        : "Face !";
-      wallButtons.push(createNavButton(faceLetterLabel, "nav:alphabet", {
-        alphabet: "hebrew",
-        hebrewLetterId: wallFaceLetterId
-      }));
-    }
-
     const wallAssociations = wall.associations || {};
-    if (wallAssociations.planetId) {
-      wallButtons.push(createNavButton(toDisplayText(wall.planet) || "!", "nav:planet", {
-        planetId: wallAssociations.planetId
-      }));
-    }
+    const wallFaceLetterName = getHebrewLetterName(wallFaceLetterId) || toDisplayText(wallFaceLetterId);
+    const faceLetterLabel = [wallFaceLetter, wallFaceLetterName].filter(Boolean).join(" ");
+    const wallRows = [
+      {
+        label: "Opposite",
+        value: wall.oppositeWallId
+          ? createInlineActionLink(getWallById(wall.oppositeWallId)?.name || wall.oppositeWallId, () => {
+            onSelectWall(wall.oppositeWallId);
+          })
+          : wall.opposite
+      },
+      {
+        label: "Face Letter",
+        value: wallFaceLetterId
+          ? createInlineEventLink(faceLetterLabel || "!", "nav:alphabet", {
+            alphabet: "hebrew",
+            hebrewLetterId: wallFaceLetterId
+          })
+          : wallFaceLetterText
+      },
+      { label: "Element", value: wall.element },
+      {
+        label: "Planet",
+        value: wallAssociations.planetId
+          ? createInlineEventLink(toDisplayText(wall.planet) || "!", "nav:planet", {
+            planetId: wallAssociations.planetId
+          })
+          : wall.planet
+      },
+      {
+        label: "Archangel",
+        value: wallAssociations.godName
+          ? createInlineEventLink(wallAssociations.godName, "nav:gods", {
+            godName: wallAssociations.godName
+          })
+          : wall.archangel
+      }
+    ];
 
-    if (wallAssociations.godName) {
-      wallButtons.push(createNavButton(wallAssociations.godName, "nav:gods", {
-        godName: wallAssociations.godName
-      }));
-    }
-
-    if (wall.oppositeWallId) {
-      const oppositeWall = getWallById(wall.oppositeWallId);
-      const internal = document.createElement("button");
-      internal.type = "button";
-      internal.className = "kab-god-link";
-      internal.textContent = `Opposite: ${oppositeWall?.name || wall.oppositeWallId}`;
-      internal.addEventListener("click", () => {
-        onSelectWall(wall.oppositeWallId);
-      });
-      wallButtons.push(internal);
-    }
-
-    bodyEl.appendChild(appendLinkRow(createMetaCard("Wall Details", summary), wallButtons));
+    bodyEl.appendChild(createMetaCard("Wall Details", createDetailList(wallRows)));
 
     if (Array.isArray(wall.keywords) && wall.keywords.length) {
       bodyEl.appendChild(createMetaCard("Keywords", wall.keywords.join(", ")));
@@ -575,57 +628,60 @@
     const bodyEl = elements.detailBodyEl;
     bodyEl.innerHTML = "";
 
-    const summary = document.createElement("div");
-    summary.className = "planet-text";
-    summary.innerHTML = `
-      <dl class="alpha-dl">
-        <dt>Name</dt><dd>${toDetailValueMarkup(edgeName)}</dd>
-        <dt>Between</dt><dd>${toDetailValueMarkup(wallNames)}</dd>
-        <dt>Letter</dt><dd>${toDetailValueMarkup(edgeLetterText)}</dd>
-        <dt>Astrology</dt><dd>${toDetailValueMarkup(astrologyText)}</dd>
-        <dt>Tarot</dt><dd>${toDetailValueMarkup(tarotCard || (tarotTrumpNumber != null ? `Trump ${tarotTrumpNumber}` : ""))}</dd>
-        <dt>Path</dt><dd>${toDetailValueMarkup(pathNo != null ? `Path ${pathNo}` : "")}</dd>
-      </dl>
-    `;
-    const edgeButtons = [];
-
-    edgeWalls.forEach((wallId) => {
-      const wall = getWallById(wallId);
-      const button = document.createElement("button");
-      button.type = "button";
-      button.className = "kab-god-link";
-      button.textContent = `${wall?.name || wallId} Wall`;
-      button.addEventListener("click", () => {
-        onSelectWall(wallId);
-      });
-      edgeButtons.push(button);
-    });
-
-    if (edgeLetterId) {
-      edgeButtons.push(createNavButton(edgeLetter || "!", "nav:alphabet", {
-        alphabet: "hebrew",
-        hebrewLetterId: edgeLetterId
-      }));
-    }
-
-    if (astrologyType === "zodiac" && astrologyName) {
-      edgeButtons.push(createNavButton(astrologyName, "nav:zodiac", {
-        signId: normalizeId(astrologyName)
-      }));
-    }
+    const edgeRows = [
+      { label: "Name", value: edgeName },
+      {
+        label: "Between",
+        value: createInlineValue(edgeWalls.flatMap((wallId, index) => {
+          const wall = getWallById(wallId);
+          const parts = [];
+          if (index > 0) {
+            parts.push(" ↔ ");
+          }
+          parts.push(createInlineActionLink(wall?.name || wallId, () => {
+            onSelectWall(wallId);
+          }));
+          return parts;
+        }))
+      },
+      {
+        label: "Letter",
+        value: edgeLetterId
+          ? createInlineEventLink(edgeLetterText || edgeLetterId, "nav:alphabet", {
+            alphabet: "hebrew",
+            hebrewLetterId: edgeLetterId
+          })
+          : edgeLetterText
+      },
+      {
+        label: "Astrology",
+        value: astrologyType === "zodiac" && astrologyName
+          ? createInlineValue([
+            astrologySymbol ? `${astrologySymbol} ` : "",
+            createInlineEventLink(astrologyName, "nav:zodiac", { signId: normalizeId(astrologyName) })
+          ])
+          : astrologyText
+      }
+    ];
 
     if (tarotCard || tarotTrumpNumber != null) {
-      edgeButtons.push(createNavButton(tarotCard || `Trump ${tarotTrumpNumber}`, "nav:tarot-trump", {
-        cardName: tarotCard,
-        trumpNumber: tarotTrumpNumber
-      }));
+      edgeRows.push({
+        label: "Tarot",
+        value: createInlineEventLink(tarotCard || `Trump ${tarotTrumpNumber}`, "nav:tarot-trump", {
+          cardName: tarotCard,
+          trumpNumber: tarotTrumpNumber
+        })
+      });
     }
 
     if (pathNo != null) {
-      edgeButtons.push(createNavButton(`Path ${pathNo}`, "nav:kabbalah-path", { pathNo }));
+      edgeRows.push({
+        label: "Path",
+        value: createInlineEventLink(`Path ${pathNo}`, "nav:kabbalah-path", { pathNo })
+      });
     }
 
-    bodyEl.appendChild(appendLinkRow(createMetaCard("Edge Details", summary), edgeButtons));
+    bodyEl.appendChild(createMetaCard("Edge Details", createDetailList(edgeRows)));
 
     if (Array.isArray(edge?.keywords) && edge.keywords.length) {
       bodyEl.appendChild(createMetaCard("Keywords", edge.keywords.join(", ")));