@celestia-island/hikari 0.55.251 → 0.55.253

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.251",
+  "version": "0.55.253",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkBoard3D.tsx

@@ -33,7 +33,9 @@
  *    anchors, pointer-events opt-in per chip so drags still orbit;
  *  - MINIMAP: HkMinimap3D pinned bottom-right — a second, stereoscopic
  *    renderer onto the SAME scene with the main camera glyph, its view
- *    plane and content markers layered in;
+ *    plane and content markers layered in; minimapCollapsible lets the
+ *    user fold it into the small map-icon button and
+ *    minimapDefaultCollapsed mounts it folded;
  *  - THEME: scene background follows --color-background, re-read on
  *    data-mode / data-theme / style mutations; `engine.onTheme` lets the
  *    page re-tone its materials on the same signal. With the
@@ -331,6 +333,12 @@ export default defineComponent({
     interactive: { type: Boolean, default: true },
     /** Pin the stereoscopic minimap bottom-right. */
     minimap: { type: Boolean, default: true },
+    /** Give the minimap the collapse affordance (minimize button in its
+     *  zoom bar; folded state = the small map-icon button). */
+    minimapCollapsible: { type: Boolean, default: false },
+    /** Mount the minimap already folded (with minimapCollapsible the
+     *  user can bring it back; the renderer then inits on first expand). */
+    minimapDefaultCollapsed: { type: Boolean, default: false },
     /** Vertical field of view in degrees. STATIC after mount (the
      *  camera is built in init; remount to change it). */
     fov: { type: Number, default: 45 },
@@ -1156,7 +1164,11 @@ export default defineComponent({
           )
         ) : null}
         {props.minimap && engineRef.value && !failed.value ? (
-          <HkMinimap3D engine={engineRef.value} />
+          <HkMinimap3D
+            engine={engineRef.value}
+            collapsible={props.minimapCollapsible}
+            defaultCollapsed={props.minimapDefaultCollapsed}
+          />
         ) : null}
         {slots.default ? <div class="hk-board3d-overlay">{slots.default()}</div> : null}
       </div>

package/src/components/HkMinimap3D.test.tsx

@@ -82,13 +82,13 @@ function fakeEngine(opts: FakeEngineOpts = {}): {
   };
 }
 
-function mountMap(engine: Board3DEngine) {
+function mountMap(engine: Board3DEngine, extra: Record<string, unknown> = {}) {
   const container = document.createElement("div");
   document.body.appendChild(container);
   const app = createApp(
     defineComponent({
       setup() {
-        return () => h(HkMinimap3D, { engine });
+        return () => h(HkMinimap3D, { engine, ...extra });
       },
     }),
   );
@@ -360,3 +360,68 @@ describe("HkMinimap3D", () => {
     for (const spy of spies) expect(spy).toHaveBeenCalled();
   });
 });
+
+describe("HkMinimap3D collapse affordance (ported from the 2D minimap)", () => {
+  it("mounts folded with defaultCollapsed: map-icon button, no GL surface", async () => {
+    const { engine, firePostRender } = fakeEngine();
+    const { container } = mountMap(engine, { collapsible: true, defaultCollapsed: true });
+    await nextTick();
+    firePostRender();
+
+    expect(container.querySelector(".hk-minimap--collapsed"), "folded button renders").toBeTruthy();
+    expect(container.querySelector(".hk-minimap3d-canvas"), "no canvas while folded").toBeNull();
+    // No GL surface was ever built for a folded-at-mount map.
+    expect(H.FakeWebGLRenderer.instances).toHaveLength(0);
+  });
+
+  it("expands on the folded button and lazily inits the renderer", async () => {
+    const { engine, firePostRender } = fakeEngine();
+    const { container } = mountMap(engine, { collapsible: true, defaultCollapsed: true });
+    await nextTick();
+
+    const fold = container.querySelector<HTMLButtonElement>(".hk-minimap--collapsed");
+    expect(fold).toBeTruthy();
+    fold!.click();
+    await nextTick();
+    await nextTick();
+
+    expect(container.querySelector(".hk-minimap3d-canvas"), "canvas mounts on expand").toBeTruthy();
+    expect(container.querySelector(".hk-minimap--collapsed")).toBeNull();
+    // The lazy init built the renderer; frames flow again.
+    expect(H.FakeWebGLRenderer.instances).toHaveLength(1);
+    firePostRender();
+    expect(H.FakeWebGLRenderer.instances[0].renders.length).toBe(1);
+    // The zoom bar carries the minimize affordance once expanded.
+    expect(container.querySelector(".hk-mm-collapse-btn")).toBeTruthy();
+  });
+
+  it("collapsible adds the minimize button; clicking folds the card", async () => {
+    const { engine, firePostRender } = fakeEngine();
+    const { container } = mountMap(engine, { collapsible: true });
+    await nextTick();
+
+    expect(container.querySelector(".hk-minimap3d-canvas")).toBeTruthy();
+    const minimize = container.querySelector<HTMLButtonElement>(".hk-mm-collapse-btn");
+    expect(minimize, "minimize button rides the zoom bar").toBeTruthy();
+    minimize!.click();
+    await nextTick();
+
+    expect(container.querySelector(".hk-minimap--collapsed")).toBeTruthy();
+    expect(container.querySelector(".hk-minimap3d-canvas")).toBeNull();
+    // A folded map renders no frames even though the board keeps ticking.
+    const renderer = H.FakeWebGLRenderer.instances[0];
+    const before = renderer.renders.length;
+    firePostRender();
+    firePostRender();
+    expect(renderer.renders.length).toBe(before);
+  });
+
+  it("stays expanded by default (board pages keep the standing card)", async () => {
+    const { engine } = fakeEngine();
+    const { container } = mountMap(engine);
+    await nextTick();
+    expect(container.querySelector(".hk-minimap3d-canvas")).toBeTruthy();
+    expect(container.querySelector(".hk-mm-collapse-btn")).toBeNull();
+    expect(container.querySelector(".hk-minimap--collapsed")).toBeNull();
+  });
+});

package/src/components/HkMinimap3D.tsx

@@ -15,13 +15,20 @@
  *  - ZOOM is an auto-fit radius (content ∪ view plane) with a ± ladder
  *    on top: 100% = everything fits, higher = closer;
  *  - the helper layer never leaks into the main render (helpers sit on
- *    BOARD3D_HELPERS_LAYER, which only the minimap camera enables).
+ *    BOARD3D_HELPERS_LAYER, which only the minimap camera enables);
+ *  - COLLAPSE (the 2D HkMinimap's 2026-10-27 affordance, ported): with
+ *    a "collapsible" prop the zoom bar grows a minimize button and the
+ *    card folds into the small semi-transparent map-icon button; the
+ *    render hook skips frames while collapsed and the renderer re-inits
+ *    lazily on first expand, so "defaultCollapsed" costs nothing at
+ *    mount.
  */
 
-import { Maximize2, ZoomIn, ZoomOut } from "lucide-vue-next";
+import { Map as MapIcon, Maximize2, Minimize2, ZoomIn, ZoomOut } from "lucide-vue-next";
 import {
   computed,
   defineComponent,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   ref,
@@ -62,6 +69,13 @@ export default defineComponent({
   name: "HkMinimap3D",
   props: {
     engine: { type: Object as PropType<Board3DEngine>, required: true },
+    /** Grow the minimize button in the zoom bar (2026-10-31: ported
+     *  from the 2D HkMinimap's collapse affordance). */
+    collapsible: { type: Boolean, default: false },
+    /** Mount straight into the collapsed map-icon state — the renderer
+     *  then inits lazily on first expand, so a collapsed-at-mount map
+     *  never builds a GL surface at all. */
+    defaultCollapsed: { type: Boolean, default: false },
   },
   setup(props) {
     const { t } = useI18n();
@@ -70,6 +84,7 @@ export default defineComponent({
     const dragging = ref(false);
     const sliderOpen = ref(false);
     const zoomPercent = ref(100);
+    const collapsed = ref(props.defaultCollapsed);
 
     let renderer: THREE.WebGLRenderer | null = null;
     let mapCamera: THREE.PerspectiveCamera | null = null;
@@ -287,6 +302,7 @@ export default defineComponent({
     }
 
     function onFrame(): void {
+      if (collapsed.value) return; // folded away: no map frames at all
       if (!renderer || !mapCamera || !scene.value) return;
       const now = performance.now();
       if (now - lastRefit >= REFIT_MS) {
@@ -343,6 +359,10 @@ export default defineComponent({
       zoomPercent.value = 100;
       sliderOpen.value = false;
     }
+    function toggleCollapsed(next: boolean): void {
+      collapsed.value = next;
+      if (next) sliderOpen.value = false;
+    }
 
     // Slider pop dismissal (same shield as the 2D minimap).
     function onDocPointerDown(e: PointerEvent): void {
@@ -361,7 +381,11 @@ export default defineComponent({
       }
     });
 
-    onMounted(() => {
+    /** Idempotent GL-surface init. Called from onMounted (expanded
+     *  mounts) and from the expand transition (a defaultCollapsed map
+     *  has no canvas at mount — the renderer builds on first expand). */
+    function initRenderer(): void {
+      if (renderer) return;
       const canvas = canvasRef.value;
       const el = rootRef.value;
       if (!canvas || !el) return;
@@ -387,6 +411,12 @@ export default defineComponent({
       el.addEventListener("pointerup", onUp);
       el.addEventListener("pointercancel", onUp);
       el.addEventListener("wheel", onWheel, { passive: false });
+    }
+    onMounted(() => {
+      if (!collapsed.value) initRenderer();
+    });
+    watch(collapsed, (folded) => {
+      if (!folded) void nextTick(() => initRenderer());
     });
 
     onBeforeUnmount(() => {
@@ -425,7 +455,24 @@ export default defineComponent({
       renderer?.forceContextLoss?.();
     });
 
-    return () => (
+    return () => {
+      if (collapsed.value) {
+        // The folded affordance, mirroring the 2D HkMinimap: a small
+        // semi-transparent map-icon button pinned where the card sat.
+        return (
+          <button
+            ref={rootRef}
+            type="button"
+            class="hk-minimap hk-minimap3d hk-minimap--collapsed"
+            aria-label={t("hikari::zoomToolbar.expandMap", "Show minimap")}
+            title={t("hikari::zoomToolbar.expandMap", "Show minimap")}
+            onClick={() => toggleCollapsed(false)}
+          >
+            <MapIcon size={16} />
+          </button>
+        );
+      }
+      return (
       <div
         ref={rootRef}
         class="hk-minimap hk-minimap3d"
@@ -474,6 +521,17 @@ export default defineComponent({
           >
             <Maximize2 size={11} />
           </button>
+          {props.collapsible && (
+            <button
+              class="hk-mm-zoom-btn hk-mm-collapse-btn"
+              type="button"
+              onClick={() => toggleCollapsed(true)}
+              aria-label={t("hikari::zoomToolbar.collapseMap", "Hide minimap")}
+              title={t("hikari::zoomToolbar.collapseMap", "Hide minimap")}
+            >
+              <Minimize2 size={11} />
+            </button>
+          )}
         </div>
         {sliderOpen.value && (
           <div class="hk-mm-zoom-pop">
@@ -497,5 +555,5 @@ export default defineComponent({
         )}
       </div>
     );
-  },
+    };  },
 });

package/src/components/HkTimeZoneGlobe.test.tsx

@@ -3,6 +3,8 @@ import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { createApp, h, nextTick } from "vue";
 
 import HkTimeZoneGlobe from "./HkTimeZoneGlobe";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 import { setLocale } from "../i18n/context";
 
 /**
@@ -126,3 +128,16 @@ describe("HkTimeZoneGlobe fallback list", () => {
     expect(p8.textContent).toContain("上海、台北、香港、新加坡");
   });
 });
+
+describe("HkTimeZoneGlobe look contract (source-level)", () => {
+  it("renders the base sphere TRANSPARENT (the white-alpha map must read as holo, not a solid ball)", () => {
+    const src = readFileSync(join(import.meta.dirname, "HkTimeZoneGlobe.tsx"), "utf8");
+    expect(src).toMatch(/MeshBasicMaterial\(\{ color: 0x8899aa, transparent: true \}\)/);
+  });
+
+  it("mounts its minimap collapsible AND folded by default (user direction 2026-10-31)", () => {
+    const src = readFileSync(join(import.meta.dirname, "HkTimeZoneGlobe.tsx"), "utf8");
+    expect(src).toContain("minimapCollapsible");
+    expect(src).toContain("minimapDefaultCollapsed");
+  });
+});

package/src/components/HkTimeZoneGlobe.tsx

@@ -169,7 +169,12 @@ export default defineComponent({
     function buildScene(eng: Board3DEngine): void {
       // Base sphere — the board-tinted borderless world map.
       const geometry = new THREE.SphereGeometry(GLOBE_RADIUS, 96, 64);
-      baseMaterial = new THREE.MeshBasicMaterial({ color: 0x8899aa });
+      // transparent is the WHOLE LOOK: the base map is white-alpha (the
+      // ocean carries alpha 0), so without the flag three ignores the
+      // texture alpha and renders the sphere as an opaque dark ball.
+      // With it the globe reads as a holo: continents and plate lines
+      // floating over the theme surface, nothing solid behind them.
+      baseMaterial = new THREE.MeshBasicMaterial({ color: 0x8899aa, transparent: true });
       const sphere = new THREE.Mesh(geometry, baseMaterial);
       eng.setObject("globe-base", {
         object: sphere, pickable: false, content: true, marker: "none",
@@ -346,6 +351,8 @@ export default defineComponent({
             <HkBoard3D
               interactive
               minimap
+              minimapCollapsible
+              minimapDefaultCollapsed
               hoverBox={false}
               transparentBackground
               enablePan={false}

package/src/components/HkTimeline.bondcell.contract.test.ts

@@ -0,0 +1,190 @@
+/**
+ * Source contract for the bond CELLS of the horizontal stepper (2026-10-31
+ * user rule).
+ *
+ * The row is read as one cell per step plus one cell per bond: the steps
+ * keep their content width, the leftover splits into EQUAL bond cells, and
+ * each bond paints 80 % of its own cell CENTERED, so both ends keep a 10 %
+ * air gap. Before that rule the bond filled whatever the step had left after
+ * its label, minus two fixed 4px margins — measured on a real engine at the
+ * provider wizard's 590px row that put the bond 12px off its own label but
+ * only 4px off the next node, i.e. the completed bond read as glued to the
+ * following circle instead of sitting in the gap (the user's 圈出来的地方
+ * 有点太长 report). The four bonds were already equal in length; what was
+ * not equal was the air around them.
+ *
+ * Every assertion below is anchored to the rule that must carry the
+ * declaration, and the colour assertions run against a comment-stripped copy
+ * of the source: a declaration that survives only as a comment (while a
+ * literal paint stays live) measured as an invisible bond on a real engine,
+ * and a whole-file `toContain` cannot tell the two apart.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const raw = readFileSync(join(here, "HkTimeline.scss"), "utf-8");
+
+/** The source with comments removed — declarations only. */
+const src = raw
+  .replace(/\/\*[\s\S]*?\*\//g, "")
+  .split("\n")
+  .map((line) => line.replace(/\/\/.*$/, ""))
+  .join("\n");
+
+function extractRules(source: string): { selector: string; body: string }[] {
+  const rules: { selector: string; body: string }[] = [];
+  let i = 0;
+  while (i < source.length) {
+    const open = source.indexOf("{", i);
+    if (open === -1) break;
+    const selector = source.slice(i, open).trim();
+    let depth = 1;
+    let j = open + 1;
+    while (j < source.length && depth > 0) {
+      if (source[j] === "{") depth += 1;
+      else if (source[j] === "}") depth -= 1;
+      j += 1;
+    }
+    rules.push({ selector, body: source.slice(open + 1, j - 1) });
+    i = j;
+  }
+  return rules;
+}
+
+const rules = extractRules(src);
+
+function blockFor(selector: string): string {
+  const hits = rules.filter((r) =>
+    r.selector.split(",").map((s) => s.trim()).includes(selector),
+  );
+  expect(hits, `exactly one rule carries ${selector}`).toHaveLength(1);
+  return hits[0]!.body;
+}
+
+/** The shared spacing expression: the bond's box must read the SAME token
+ *  the step's gap does, or the cell arithmetic halves itself. */
+const GAP = "var(--hk-timeline-step-gap, var(--space-8, 8px))";
+
+const BOND_CELL =
+  '.hk-timeline[data-mode="full"][data-orientation="horizontal"] .hk-timeline-step [data-el="connector"]';
+const BOND_PAINT = `${BOND_CELL}::before`;
+
+/** The declaration block of one status, comment-stripped. */
+function statusBlock(status: string): string {
+  const at = src.indexOf(`.hk-timeline-step[data-status="${status}"]`);
+  expect(at, `${status} status rule must exist`).toBeGreaterThan(-1);
+  return src.slice(at, src.indexOf("\n}", at));
+}
+
+/** Only the bond's own declarations inside a status rule (the indicator may
+ *  legitimately keep reading the border token for its ring). */
+function bondBlockOf(status: string): string {
+  const block = statusBlock(status);
+  const at = block.indexOf('[data-el="connector"]');
+  expect(at, `${status} must style the bond`).toBeGreaterThan(-1);
+  return block.slice(at, block.indexOf("}", at));
+}
+
+describe("horizontal bond cell contract", () => {
+  it("spans the whole cell by cancelling the step's trailing gap", () => {
+    const cell = blockFor(BOND_CELL);
+    // Without the negated start margin the label→bond air is gap+margin
+    // while the bond→node air is margin alone — the 12/4 asymmetry that
+    // made the bond look glued to the next circle.
+    expect(cell).toContain(`margin-inline: calc(-1 * ${GAP}) 0;`);
+    // The box must not paint itself: the visible 80 % is the ::before.
+    expect(cell).toContain("background: none;");
+    // The ::before resolves percentage insets against this box.
+    expect(cell).toContain("position: relative;");
+    expect(cell).toContain("&::before");
+    // The negated margin is only correct against the step's OWN gap
+    // declaration, so pin the partner: drifting `gap` alone silently
+    // restores the asymmetry (measured 7.84 / 3.84 on a 12px drift).
+    expect(blockFor(".hk-timeline-step")).toContain(`gap: ${GAP};`);
+  });
+
+  it("paints 80 % of the cell centred with a 10 % inset on each end", () => {
+    // The parser above only yields top-level rules; the paint lives in the
+    // nested block, so lift it out of the cell rule's body.
+    const paint = /&::before\s*\{([^}]*)\}/.exec(blockFor(BOND_CELL))?.[1] ?? "";
+    expect(paint, "the bond's ::before must exist").not.toBe("");
+    expect(paint).toContain('content: "";');
+    expect(paint).toContain("position: absolute;");
+    expect(paint).toContain("inset-block: 0;");
+    expect(paint).toContain("inset-inline: 10%;");
+    expect(paint).toContain("background: var(--_bond-color);");
+    // Percentage PADDING would resolve against the step, not the bond.
+    expect(src).not.toMatch(/padding-inline:\s*10%/);
+  });
+
+  it("keeps a visible bond floor the collapse measurement can see", () => {
+    const cell = blockFor(BOND_CELL);
+    // A clamped row must still paint a bond, and the row's max-content
+    // width must keep reserving it — otherwise collapse="auto" measures the
+    // row narrower than it renders and swaps the window away too early.
+    expect(cell).toContain(`min-width: calc(0.5rem + ${GAP});`);
+  });
+
+  it("publishes one bond colour token for every status", () => {
+    for (const status of ["completed", "active", "pending"]) {
+      const bond = bondBlockOf(status);
+      expect(bond, `${status} must publish --_bond-color`).toContain("--_bond-color:");
+      expect(bond).toContain("background: var(--_bond-color);");
+      // No status may paint a literal colour straight onto the box again:
+      // in horizontal mode the box itself stays unpainted, and a stray
+      // longhand would tint the vertical rail red instead.
+      expect(bond, `${status} must not paint the box directly`).not.toMatch(
+        /background(-color)?:\s*(?!\s*var\(--_bond-color\))/,
+      );
+    }
+    // The completed bond is the primary tone; the faint ones derive from an
+    // OPAQUE tone. `--hi-color-border` already carries the theme's alpha, so
+    // 30 % of it computed to about 4.5 % — measured as ~7/255 off a white
+    // background (a 248 grey) in full mode, while the window-mode link had
+    // already been fixed.
+    expect(bondBlockOf("completed")).toContain(
+      "--_bond-color: var(--hi-color-primary);",
+    );
+    for (const status of ["active", "pending"]) {
+      const bond = bondBlockOf(status);
+      expect(bond, `${status} must not re-multiply the border token's alpha`)
+        .toContain("--_bond-color: color-mix(in srgb, var(--hi-color-muted");
+      expect(bond).not.toContain("var(--hi-color-border)");
+    }
+  });
+
+  it("leaves the vertical rail painting its own box", () => {
+    // The cell rule is mode+orientation scoped, so the vertical rail (a rail
+    // hanging under the node, not a cell-wide bond) keeps the plain
+    // `background: var(--_bond-color)` chain and its absolute geometry.
+    const vertical = blockFor(
+      '.hk-timeline[data-orientation="vertical"][data-mode="full"] .hk-timeline-step',
+    );
+    expect(vertical).toContain("width: var(--hk-timeline-link-thickness);");
+    expect(vertical).toContain("min-width: 0;");
+    expect(vertical).not.toContain("background: none");
+    // A bare `.hk-timeline-step [data-el="connector"]` override would hit the
+    // vertical rail too and blank it.
+    const unscoped = rules.filter(
+      (r) =>
+        r.selector.trim() === '.hk-timeline-step [data-el="connector"]' &&
+        /background:\s*none/.test(r.body),
+    );
+    expect(unscoped, "no unscoped connector background reset").toHaveLength(0);
+  });
+
+  it("rides the status crossfade on the painted box, not just the frame", () => {
+    // The paint moved to the ::before, so the crossfade must cover THAT
+    // selector. Asserting the bare selector name proves nothing (the
+    // reduced-motion block lists it too), so pin the transition BODY.
+    const crossfade = blockFor(BOND_PAINT);
+    expect(crossfade).toContain("background-color var(--hk-timeline-motion)");
+    // ...and the reduced-motion switch must cover the same box.
+    const reducedAt = src.lastIndexOf("@media (prefers-reduced-motion: reduce)");
+    expect(reducedAt).toBeGreaterThan(-1);
+    expect(src.slice(reducedAt)).toContain(BOND_PAINT);
+  });
+});

package/src/components/HkTimeline.scss

@@ -312,6 +312,56 @@
   }
 }
 
+/* ── Bond cells (2026-10-31 user rule) ──────────────────────────────────
+   The horizontal row reads as one cell per step plus one cell per bond: the
+   steps keep their content width, the leftover splits into EQUAL bond cells,
+   and each bond paints 80 % of its cell CENTERED, so both ends keep a 10 %
+   air gap. Two mechanics make that exact:
+
+   1. The bond's box must span the WHOLE cell. Its cell begins where its own
+      label ends, but the step's flex gap already sits in front of it (that
+      gap is part of the cell, not extra air), so the box starts one gap
+      earlier — hence the negated start margin, which must keep reading the
+      SAME `--hk-timeline-step-gap` token the step's `gap` uses. Before this
+      the gap counted twice and the bond ran 12px off its label but only 4px
+      off the next node: the completed bond read as glued to the next circle.
+   2. The painted 80 % cannot be `padding-inline` — a percentage padding
+      resolves against the CONTAINING block (the step), not the bond's own
+      box, which would inset it by a slice of the step instead of 10 % of the
+      cell. So the colour moves to a ::before pinned `inset-inline: 10%`,
+      which does resolve against the bond. The status rules below therefore
+      publish `--_bond-color`; the vertical rail keeps painting its own box
+      (it is a rail hanging under the node, not a cell-wide bond).
+
+   The floor keeps a squeezed row honest: the cell absorbs the gap on top of
+   a half-rem of bond, so the narrowest full row still paints a visible line.
+   Its outer size is that floor MINUS the cancelled gap, i.e. half a rem per
+   bond — eight of the sixteen pixels the old two 4px margins reserved, so
+   `collapse="auto"` (HkTimeline.tsx measures this max-content width) fires
+   about 32px earlier than before across a five-step row, never later.
+   Bounded cost, accepted: in a row squeezed past the floor (reachable through
+   `collapse="never"`, or the full-mode frame that a label change and a
+   hysteresis un-collapse render before re-measuring) the box keeps its floor
+   and overhangs the next step by a QUARTER of the row's shortfall — ~6px at a
+   430px host, ~14px at 400px — so the bond paints under that step's circle
+   until the overhang outgrows the 24px circle itself (host ≲ 362px), where a
+   visible stub sits beside it. Shrinking the floor to nothing would trade
+   this for a bond that vanishes on the narrowest hosts. */
+.hk-timeline[data-mode="full"][data-orientation="horizontal"] .hk-timeline-step [data-el="connector"] {
+  position: relative;
+  margin-inline: calc(-1 * var(--hk-timeline-step-gap, var(--space-8, 8px))) 0;
+  min-width: calc(0.5rem + var(--hk-timeline-step-gap, var(--space-8, 8px)));
+  background: none;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 10%;
+    background: var(--_bond-color);
+  }
+}
+
 .hk-timeline-step[data-last] {
   flex: 0 0 auto;
 }
@@ -376,7 +426,11 @@
   }
 
   [data-el="connector"] {
-    background: var(--hi-color-primary);
+    // The bonds paint 80 % of their cell through a ::before (see the
+    // full-mode cell rule); the token is the single source for both that
+    // paint and the vertical rail's own box.
+    --_bond-color: var(--hi-color-primary);
+    background: var(--_bond-color);
   }
 }
 
@@ -392,7 +446,12 @@
   }
 
   [data-el="connector"] {
-    background: color-mix(in srgb, var(--hi-color-border) 30%, transparent);
+    // Opaque-tone derivation, same fix the window-mode link carries:
+    // `--hi-color-border` already carries the theme's own alpha, so 30 % of
+    // IT computed to about 4.5 % and the bond was not a line on any real
+    // surface (measured: ~7/255 off a white background — a 248 grey).
+    --_bond-color: color-mix(in srgb, var(--hi-color-muted, #6c6c6c) 30%, transparent);
+    background: var(--_bond-color);
   }
 }
 
@@ -408,7 +467,12 @@
   }
 
   [data-el="connector"] {
-    background: color-mix(in srgb, var(--hi-color-border) 30%, transparent);
+    // Opaque-tone derivation, same fix the window-mode link carries:
+    // `--hi-color-border` already carries the theme's own alpha, so 30 % of
+    // IT computed to about 4.5 % and the bond was not a line on any real
+    // surface (measured: ~7/255 off a white background — a 248 grey).
+    --_bond-color: color-mix(in srgb, var(--hi-color-muted, #6c6c6c) 30%, transparent);
+    background: var(--_bond-color);
   }
 }
 
@@ -451,10 +515,14 @@
 }
 
 // Status crossfade: the data-status driven colors (indicator fill/border,
-// label color, connector fill) transition instead of flipping.
+// label color, connector fill) transition instead of flipping. The
+// horizontal bond's paint lives on its ::before (the 80 % cell rule), so
+// that box rides the crossfade too — without it a status flip snaps there
+// while the vertical rail keeps easing.
 .hk-timeline-step [data-el="indicator"],
 .hk-timeline-step [data-el="label"],
-.hk-timeline-step [data-el="connector"] {
+.hk-timeline-step [data-el="connector"],
+.hk-timeline[data-mode="full"][data-orientation="horizontal"] .hk-timeline-step [data-el="connector"]::before {
   transition:
     background-color var(--hk-timeline-motion) var(--hk-timeline-motion-ease),
     color var(--hk-timeline-motion) var(--hk-timeline-motion-ease),
@@ -530,7 +598,8 @@ html[data-css-animations="0"] .hk-timeline[data-mode="window"][data-dir] .hk-tim
 @media (prefers-reduced-motion: reduce) {
   .hk-timeline-step [data-el="indicator"],
   .hk-timeline-step [data-el="label"],
-  .hk-timeline-step [data-el="connector"] {
+  .hk-timeline-step [data-el="connector"],
+  .hk-timeline[data-mode="full"][data-orientation="horizontal"] .hk-timeline-step [data-el="connector"]::before {
     transition: none;
   }