@celestia-island/hikari 0.40.36 → 0.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.40.36",
+  "version": "0.41.0",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkStatusBar.test.tsx

@@ -38,6 +38,52 @@ afterEach(() => {
 });
 
 describe("HkStatusBar", () => {
+  it("renders extraDetails rows capped at 400px with an ellipsized, title-backed value", async () => {
+    const container = mountBar({
+      version: "1.2.3",
+      connectionStatus: "connected",
+      connectionInfo: INFO,
+      extraDetails: [
+        { key: "gateway", label: "Gateway", value: "gateway.celestia.world" },
+      ],
+    });
+    await nextTick();
+    // Popover content teleports to <body> and only renders once the tag
+    // is hovered open (same grammar as the protocol/network rows).
+    const tag = container.querySelector<HTMLElement>(".s-status-bar-tag")!;
+    tag.dispatchEvent(new MouseEvent("mouseenter"));
+    await nextTick();
+    const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel");
+    expect(panel, "popover opens on hover").toBeTruthy();
+    const row = panel!.querySelector('[data-extra-detail="gateway"]');
+    expect(row).not.toBeNull();
+    expect((row as HTMLElement).style.maxWidth).toBe("400px");
+    const value = panel!.querySelector("span[title]") as HTMLElement;
+    expect(value.textContent).toBe("gateway.celestia.world");
+    expect(value.title).toBe("gateway.celestia.world");
+    expect(value.style.textOverflow).toBe("ellipsis");
+    // The label column keeps a minimum width — a long value must not
+    // squeeze it (the row space-between-aligns instead).
+    const label = row!.querySelector("span[style*='min-width'], span:nth-child(2)") as HTMLElement;
+    expect(label.style.minWidth).toBe("72px");
+    expect(label.style.flexShrink).toBe("0");
+  });
+
+  it("renders no extraDetails rows when the prop is absent", async () => {
+    const container = mountBar({
+      version: "1.2.3",
+      connectionStatus: "connected",
+      connectionInfo: INFO,
+    });
+    await nextTick();
+    container
+      .querySelector<HTMLElement>(".s-status-bar-tag")!
+      .dispatchEvent(new MouseEvent("mouseenter"));
+    await nextTick();
+    const panel = document.body.querySelector(".hk-popover-panel");
+    expect(panel?.querySelector("[data-extra-detail]")).toBeNull();
+  });
+
   it("mounts with the traffic light and version rows inline, protocol row on hover-open", async () => {
     const container = mountBar({
       version: "1.2.3",

package/src/components/HkStatusBar.tsx

@@ -96,6 +96,21 @@ export const HkStatusBar = defineComponent({
     transportTier: { type: String as PropType<string>, default: undefined },
     attemptNumber: { type: Number, default: undefined },
     countdown: { type: Number, default: undefined },
+    /**
+     * Optional extra rows appended to the connection-info popover (after
+     * the network row): host-supplied label/value pairs with a prebuilt
+     * icon vnode each — the same loose-icon contract as HkAuthMethodList.
+     * Rows grow with their content but cap at 400px; values past the cap
+     * ellipsize (full text rides the native title). Lets a host surface
+     * stage endpoints (gateway, registry…) inside the popover without
+     * forking the component.
+     */
+    extraDetails: {
+      type: Array as PropType<
+        Array<{ key: string; icon?: unknown; label: string; value: string }>
+      >,
+      default: undefined,
+    },
   },
   setup(props) {
     const popupOpen = ref(false);
@@ -358,6 +373,13 @@ export const HkStatusBar = defineComponent({
                     <span style={{ opacity: 0.5, marginRight: "auto" }}>{t("hikari::statusBar.network", "Network")}</span>
                     <span>{regionDisplayName(info.region, locale, t)}{info.asn != null ? ` · AS${info.asn}` : ""}{info.isLocalhost ? " · " + t("hikari::statusBar.local", "Local") : ""}</span>
                   </div>
+                  {(props.extraDetails ?? []).map((row) => (
+                    <div key={row.key} data-extra-detail={row.key} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "6px", maxWidth: "400px" }}>
+                      <span style={{ opacity: 0.5, flexShrink: 0, display: "inline-flex" }}>{row.icon}</span>
+                      <span style={{ opacity: 0.5, flexShrink: 0, minWidth: "72px", marginRight: "auto" }}>{row.label}</span>
+                      <span title={row.value} style={{ fontFamily: `var(--font-mono, ${HIKARI_FONT_MONO})`, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{row.value}</span>
+                    </div>
+                  ))}
                 </>
               ) : (
                 <div style={{ opacity: 0.5 }}>{t("hikari::statusBar.fetching", "Fetching connection info...")}</div>

package/src/components/HkTimeline.scss

@@ -3,6 +3,17 @@
   align-items: center;
   gap: 0;
   width: 100%;
+
+  // Shared node geometry — ONE source of truth for the 24px indicator
+  // circle and the rail thickness. Every connector math keys off these:
+  // window-mode links center on the node along the inline axis, the
+  // vertical rail hangs centered under it, so both stay glued to the
+  // circles even if the node size ever changes.
+  --hk-timeline-node-size: 24px;
+  --hk-timeline-link-thickness: 2px;
+  --hk-timeline-link-top: calc(
+    (var(--hk-timeline-node-size) - var(--hk-timeline-link-thickness)) / 2
+  );
 }
 
 .hk-timeline[data-orientation="vertical"] {
@@ -26,12 +37,9 @@
   // Geometry contract with the stacked steps above: the node is the 24px
   // indicator circle at the top of every stack, so its center sits half a
   // node below the cell top in ALL columns — that is where link segments go.
-  --hk-timeline-node-size: 24px;
+  // (Node size, thickness and link-top are the shared tokens on
+  // `.hk-timeline`.)
   --hk-timeline-link-clearance: 20px;
-  --hk-timeline-link-thickness: 2px;
-  --hk-timeline-link-top: calc(
-    (var(--hk-timeline-node-size) - var(--hk-timeline-link-thickness)) / 2
-  );
 }
 
 .hk-timeline[data-mode="window"] .hk-timeline-window {
@@ -142,6 +150,95 @@
   transform: scaleX(-1);
 }
 
+/* ── Vertical window mode ────────────────────────────────────────────────
+   The height-starved sibling of the compact horizontal window: when the
+   host cannot fit the full column, the timeline collapses to the same
+   three-cell window (previous / current / next) stacked as equal thirds,
+   the outer two dimmed exactly like their left/right counterparts, and
+   vertical rail segments joining the node centers on an overlay — with
+   fading continuations past the top/bottom edges where hidden steps go. */
+.hk-timeline[data-orientation="vertical"][data-mode="window"] {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+  align-items: stretch;
+
+  // Each cell centers its step within its third, which puts every node
+  // center at the SAME fractions of the host height as the horizontal
+  // mode puts them across the width (1/6, 1/2, 5/6) — the link math
+  // below is the horizontal one rotated, nothing more.
+  .hk-timeline-window {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 0;
+  }
+
+  .hk-timeline-window .hk-timeline-step {
+    flex: 0 0 auto;
+    max-width: 100%;
+
+    [data-el="label"] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  // Vertical rails: centered under the node column, spanning between the
+  // cells' node centers (at 1/6, 1/2, 5/6 of the height) minus the same
+  // clearance the horizontal bonds keep from the circles. Each segment
+  // also re-asserts the inline geometry — the horizontal segment rules
+  // above carry the same attribute specificity and must not leak in.
+  .hk-timeline-link {
+    width: var(--hk-timeline-link-thickness);
+    height: auto;
+    inset-inline-start: var(--hk-timeline-link-top);
+    top: auto;
+    bottom: auto;
+
+    &[data-segment="before-current"] {
+      inset-inline-start: var(--hk-timeline-link-top);
+      width: var(--hk-timeline-link-thickness);
+      top: calc(16.6667% + var(--hk-timeline-link-clearance));
+      height: calc(33.3334% - (var(--hk-timeline-link-clearance) * 2));
+    }
+
+    &[data-segment="current-after"] {
+      inset-inline-start: var(--hk-timeline-link-top);
+      width: var(--hk-timeline-link-thickness);
+      top: calc(50% + var(--hk-timeline-link-clearance));
+      height: calc(33.3334% - (var(--hk-timeline-link-clearance) * 2));
+    }
+
+    // Continuation hints: from the container edge toward that cell's node,
+    // fading INTO the edge ("more steps exist beyond this side").
+    &[data-segment="edge-before"] {
+      inset-inline-start: var(--hk-timeline-link-top);
+      width: var(--hk-timeline-link-thickness);
+      top: 0;
+      height: calc(16.6667% - var(--hk-timeline-link-clearance));
+    }
+
+    &[data-segment="edge-after"] {
+      inset-inline-start: var(--hk-timeline-link-top);
+      width: var(--hk-timeline-link-thickness);
+      top: auto;
+      bottom: 0;
+      height: calc(16.6667% - var(--hk-timeline-link-clearance));
+    }
+
+    &[data-fade-dir="up"] {
+      background-color: transparent;
+      background-image: linear-gradient(to top, var(--_link-color), transparent);
+    }
+
+    &[data-fade-dir="down"] {
+      background-color: transparent;
+      background-image: linear-gradient(to bottom, var(--_link-color), transparent);
+    }
+  }
+}
+
 
 .hk-timeline-step {
   display: flex;
@@ -187,7 +284,7 @@
   }
 
   [data-el="connector"] {
-    height: 2px;
+    height: var(--hk-timeline-link-thickness);
     flex: 1 1 0%;
     min-width: 0.5rem;
     margin: 0 var(--hi-space-4, 4px);
@@ -198,19 +295,41 @@
   flex: 0 0 auto;
 }
 
-.hk-timeline[data-orientation="vertical"] .hk-timeline-step {
+.hk-timeline[data-orientation="vertical"][data-mode="full"] .hk-timeline-step {
   flex-direction: row;
   flex: 0 0 auto;
-  padding-bottom: var(--hi-space-24, 24px);
+
+  // The gap this step's rail must bridge: exactly the space between the
+  // bottom edge of this step's node circle and the top edge of the next
+  // step's node circle. Padding and rail height share the token, so the
+  // rail always lands flush on both circles — no floating dashes, no
+  // overlap, whatever the rhythm is tuned to.
+  --hk-timeline-vert-gap: var(--hi-space-24, 24px);
+  padding-bottom: var(--hk-timeline-vert-gap);
 
   [data-el="connector"] {
-    width: 2px;
-    height: 1rem;
+    width: var(--hk-timeline-link-thickness);
+    // The horizontal base rule leaves `min-width: 0.5rem` behind; on an
+    // absolutely-positioned rail min-width beats width, which once fatted
+    // the rail to 8px and shoved it off the node center. Neutralize the
+    // leaked sizing constraints explicitly.
+    min-width: 0;
     flex: 0 0 auto;
     position: absolute;
-    left: 0.6875rem;
-    top: 1.5rem;
+    height: var(--hk-timeline-vert-gap);
+    // Centered under the NODE, not the row: the circle occupies the first
+    // node-size square of the row, so the rail's inline offset is
+    // (node − thickness) / 2. Logical property mirrors it under RTL
+    // together with the flipped flex column.
+    inset-inline-start: calc(
+      (var(--hk-timeline-node-size) - var(--hk-timeline-link-thickness)) / 2
+    );
+    inset-inline-end: auto;
+    top: var(--hk-timeline-node-size);
+    bottom: auto;
     margin: 0;
+    // Rounded caps keep the rail's ends from aliasing against the circles.
+    border-radius: calc(var(--hk-timeline-link-thickness) / 2);
   }
 }
 

package/src/components/HkTimeline.test.tsx

@@ -138,10 +138,48 @@ describe("HkTimeline full mode", () => {
     expect(els[3].getAttribute("aria-current")).toBeNull();
   });
 
-  it("keeps vertical orientation in full mode", () => {
-    const t = mountTimeline({ currentKey: "b", orientation: "vertical", collapse: "always" });
+  it("keeps a short vertical timeline in full mode", () => {
+    // A 3-step vertical timeline is its own window: nothing to collapse.
+    const steps = [
+      { key: "a", label: "Alpha" },
+      { key: "b", label: "Beta" },
+      { key: "c", label: "Gamma" },
+    ];
+    const t = mountTimeline({ currentKey: "b", orientation: "vertical", collapse: "always" }, steps);
     expect(t.container.querySelector(".hk-timeline")?.getAttribute("data-mode")).toBe("full");
   });
+
+  it("collapses a vertical timeline into the stacked window", () => {
+    const t = mountTimeline({ currentKey: "c", orientation: "vertical", collapse: "always" });
+    const root = t.container.querySelector(".hk-timeline");
+    expect(root?.getAttribute("data-orientation")).toBe("vertical");
+    expect(root?.getAttribute("data-mode")).toBe("window");
+
+    const before = t.container.querySelector('.hk-timeline-window[data-side="before"]');
+    const current = t.container.querySelector('.hk-timeline-window[data-side="current"]');
+    const after = t.container.querySelector('.hk-timeline-window[data-side="after"]');
+
+    expect(before?.querySelector('[data-el="label"]')?.textContent).toBe("Beta");
+    expect(current?.querySelector('[data-el="label"]')?.textContent).toBe("Gamma");
+    expect(after?.querySelector('[data-el="label"]')?.textContent).toBe("Delta");
+
+    // Same dimming grammar as the horizontal window: outer cells dimmed,
+    // the current cell at full strength.
+    expect(before?.hasAttribute("data-dimmed")).toBe(true);
+    expect(current?.hasAttribute("data-dimmed")).toBe(false);
+    expect(after?.hasAttribute("data-dimmed")).toBe(true);
+
+    // Vertical continuation hints fade along the block axis.
+    expect(
+      t.container.querySelector('.hk-timeline-link[data-segment="edge-before"]')?.getAttribute("data-fade-dir"),
+    ).toBe("up");
+    expect(
+      t.container.querySelector('.hk-timeline-link[data-segment="edge-after"]')?.getAttribute("data-fade-dir"),
+    ).toBe("down");
+
+    // The current step keeps its aria contract inside the stacked window.
+    expect(current?.querySelector(".hk-timeline-step")?.getAttribute("aria-current")).toBe("step");
+  });
 });
 
 describe("HkTimeline window mode", () => {

package/src/components/HkTimeline.tsx

@@ -91,6 +91,23 @@ function naturalRowWidth(el: HTMLElement): number {
   return Math.ceil(width);
 }
 
+/** Vertical twin of [`naturalRowWidth`]: the column's natural height when
+ *  free to grow past the host (steps are `flex: 0 0 auto`, so an offscreen
+ *  clone with `height: max-content` measures the unclamped stack). */
+function naturalColumnHeight(el: HTMLElement): number {
+  const probe = el.cloneNode(true) as HTMLElement;
+  probe.style.position = "absolute";
+  probe.style.visibility = "hidden";
+  probe.style.pointerEvents = "none";
+  probe.style.height = "max-content";
+  const parent = el.parentElement;
+  if (!parent) return el.scrollHeight;
+  parent.appendChild(probe);
+  const height = probe.getBoundingClientRect().height;
+  probe.remove();
+  return Math.ceil(height);
+}
+
 export default defineComponent({
   name: "HkTimeline",
   props: {
@@ -112,22 +129,22 @@ export default defineComponent({
   setup(props, { emit }) {
     const host = ref<HTMLElement | null>(null);
     const collapsed = ref(false);
-    /** Full-row width captured right before collapsing; used as the
-     *  expand-again threshold (plus hysteresis) while windowed. */
-    let fullNaturalWidth = 0;
+    /** Full-row width (horizontal) or full-column height (vertical)
+     *  captured right before collapsing; used as the expand-again
+     *  threshold (plus hysteresis) while windowed. */
+    let fullNaturalSize = 0;
     let observer: ResizeObserver | undefined;
 
     const currentIndex = computed(() =>
       props.steps.findIndex((s) => s.key === props.currentKey),
     );
 
-    /** The window only makes sense for a horizontal row with more steps
-     *  than the window can show (a 3-step row is its own window). */
+    /** The window only makes sense for more steps than the window can show
+     *  (a 3-step timeline is its own window). Horizontal collapse keys off
+     *  width overflow, vertical collapse off height overflow — the stepper
+     *  behaves the same whether the host squeezes its row or its column. */
     const windowable = computed(
-      () =>
-        props.orientation === "horizontal" &&
-        props.steps.length > 3 &&
-        currentIndex.value >= 0,
+      () => props.steps.length > 3 && currentIndex.value >= 0,
     );
 
     const windowed = computed(
@@ -152,23 +169,25 @@ export default defineComponent({
 
     function measure(): void {
       const el = host.value;
-      if (!el || !windowable.value || props.collapse !== "auto") {
+      if (!el || props.collapse !== "auto") {
         collapsed.value = false;
         return;
       }
+      const vertical = props.orientation === "vertical";
+      const fitSize = vertical ? el.clientHeight : el.clientWidth;
       if (collapsed.value) {
-        // Expand again only once the host comfortably fits the full row it
-        // could not fit when we collapsed (16px hysteresis against flapping
-        // around the exact threshold).
-        if (fullNaturalWidth > 0 && el.clientWidth >= fullNaturalWidth + 16) {
+        // Expand again only once the host comfortably fits the full row or
+        // column it could not fit when we collapsed (16px hysteresis
+        // against flapping around the exact threshold).
+        if (fullNaturalSize > 0 && fitSize >= fullNaturalSize + 16) {
           collapsed.value = false;
-          fullNaturalWidth = 0;
+          fullNaturalSize = 0;
         }
         return;
       }
-      const natural = naturalRowWidth(el);
-      if (natural > el.clientWidth + 1) {
-        fullNaturalWidth = natural;
+      const natural = vertical ? naturalColumnHeight(el) : naturalRowWidth(el);
+      if (natural > fitSize + 1) {
+        fullNaturalSize = natural;
         collapsed.value = true;
       }
     }
@@ -197,7 +216,7 @@ export default defineComponent({
       ],
       () => {
         collapsed.value = false;
-        fullNaturalWidth = 0;
+        fullNaturalSize = 0;
         void nextTick(measure);
       },
     );
@@ -288,7 +307,7 @@ export default defineComponent({
                     class="hk-timeline-link"
                     data-segment="edge-before"
                     data-status={statusOf(w.beforeIndex)}
-                    data-fade-dir="left"
+                    data-fade-dir={props.orientation === "vertical" ? "up" : "left"}
                   />
                 )}
                 {w.afterIndex >= 0 && w.fadeAfter && (
@@ -296,7 +315,7 @@ export default defineComponent({
                     class="hk-timeline-link"
                     data-segment="edge-after"
                     data-status={statusOf(w.afterIndex)}
-                    data-fade-dir="right"
+                    data-fade-dir={props.orientation === "vertical" ? "down" : "right"}
                   />
                 )}
               </div>