@celestia-island/hikari 0.55.255 → 0.55.257

package/package.json

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

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

@@ -1,10 +1,10 @@
 /**
  * Source contract for the bond CELLS of the horizontal stepper (2026-10-31
- * user rule).
+ * user rule; 60 % share since the same evening's second look).
  *
  * 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 %
+ * each bond paints 60 % of its own cell CENTERED, so both ends keep a 20 %
  * 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
@@ -95,7 +95,7 @@ describe("horizontal bond cell contract", () => {
     // 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.
+    // The box must not paint itself: the visible 60 % is the ::before.
     expect(cell).toContain("background: none;");
     // The ::before resolves percentage insets against this box.
     expect(cell).toContain("position: relative;");
@@ -106,7 +106,7 @@ describe("horizontal bond cell contract", () => {
     expect(blockFor(".hk-timeline-step")).toContain(`gap: ${GAP};`);
   });
 
-  it("paints 80 % of the cell centred with a 10 % inset on each end", () => {
+  it("paints 60 % of the cell centred with a 20 % 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] ?? "";
@@ -114,18 +114,31 @@ describe("horizontal bond cell contract", () => {
     expect(paint).toContain('content: "";');
     expect(paint).toContain("position: absolute;");
     expect(paint).toContain("inset-block: 0;");
-    expect(paint).toContain("inset-inline: 10%;");
+    expect(paint).toContain("inset-inline: 20%;");
     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%/);
+    // Percentage PADDING would resolve against the step, not the bond —
+    // ban the MECHANISM on both boxes, not one pinned value (a stray
+    // `padding-inline: 10%` beside the correct inset would widen the paint
+    // through the padding box and slip past a value-pinned regex).
+    expect(blockFor(BOND_CELL)).not.toMatch(/padding-inline:/);
+    expect(paint).not.toMatch(/padding-inline:/);
   });
 
-  it("keeps a visible bond floor the collapse measurement can see", () => {
+  it("reserves the two-margin-era collapse threshold through its floor", () => {
     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});`);
+    // The floor (half a rem plus two gaps, minus the cancelled gap) reserves
+    // the same sixteen outer pixels per bond the old two 4px margins
+    // carried, so collapse="auto" measures the row's max-content width at
+    // the two-margin-era threshold — never earlier, never later.
+    expect(cell).toContain(`min-width: calc(0.5rem + 2 * ${GAP});`);
+    // A definite flex-basis reserves NOTHING: engines size a flex item's
+    // intrinsic contribution at max(min-width, content) and ignore the
+    // basis (measured: a 100px basis on an empty item contributed its 8px
+    // floor). The basis must not creep back in place of the floor — nor as
+    // the shorthand `flex:`, whose basis component would be equally silent
+    // while the literal reads like a reservation.
+    expect(cell).not.toContain("flex-basis");
+    expect(cell).not.toMatch(/\bflex\s*:/);
   });
 
   it("publishes one bond colour token for every status", () => {

package/src/components/HkTimeline.scss

@@ -312,11 +312,13 @@
   }
 }
 
-/* ── Bond cells (2026-10-31 user rule) ──────────────────────────────────
+/* ── Bond cells (2026-10-31 user rule; 60 % share the same evening) ────
    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:
+   and each bond paints 60 % of its cell CENTERED, so both ends keep a 20 %
+   air gap. (The first cut painted 80 %/10 % — centred, but the completed
+   bond read as long as ever, so the share was trimmed the same evening.)
+   Three 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
@@ -325,39 +327,48 @@
       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
+   2. The painted share 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%`,
+      box, which would inset it by a slice of the step instead of 20 % of the
+      cell. So the colour lives on a ::before pinned `inset-inline: 20%`,
       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. */
+   3. The row-width RESERVATION is a min-width floor, sized to the two-margin
+      era at the stock 8px gap: half a rem plus two gaps, minus the cancelled
+      gap, reserves the same sixteen outer pixels per bond the old fixed
+      4px+4px margins carried, so `collapse="auto"` (HkTimeline.tsx measures
+      the row's max-content width) switches to the window at exactly the
+      threshold the two-margin era had — never earlier, never later. (A host
+      that retunes `--hk-timeline-step-gap` shifts the threshold by the
+      difference: the old margins were fixed 16px outer while this floor
+      reserves gap+8. And a definite `flex-basis` reserves NOTHING here:
+      engines size a flex item's intrinsic contribution at
+      max(min-width, content) and ignore the basis — measured, a 100px basis
+      on an empty item contributed only its 8px floor.) The floor only binds
+      when a row is squeezed below its natural width, which `collapse="auto"`
+      never lets happen for windowable rows (the window takes over; a ≤3-step
+      row stays full-mode at any width, but the floor then behaves exactly as
+      both prior eras' floors did); through `collapse="never"` — or the
+      full-mode frame a label change renders before re-measuring — the pinned
+      24px box paints 14.4px inset 4.8px, and that paint slides UNDER the
+      next step's 24px circle for as long as the overflow stays under 24px
+      (host ≳ 380px for the five-step wizard row). Below that a small stub
+      shows beside the circle (onset ~381px, ~5px by 360px) — marginally
+      tighter than the two-margin geometry's own stub in this manually-forced
+      mode (onset ~384px, ~6px by 360px), and bounded below by the width
+      where a label reaches the next circle (~400px for this row). */
 .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)));
+  min-width: calc(0.5rem + 2 * var(--hk-timeline-step-gap, var(--space-8, 8px)));
   background: none;
 
   &::before {
     content: "";
     position: absolute;
     inset-block: 0;
-    inset-inline: 10%;
+    inset-inline: 20%;
     background: var(--_bond-color);
   }
 }
@@ -426,7 +437,7 @@
   }
 
   [data-el="connector"] {
-    // The bonds paint 80 % of their cell through a ::before (see the
+    // The bonds paint 60 % 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);
@@ -516,7 +527,7 @@
 
 // Status crossfade: the data-status driven colors (indicator fill/border,
 // label color, connector fill) transition instead of flipping. The
-// horizontal bond's paint lives on its ::before (the 80 % cell rule), so
+// horizontal bond's paint lives on its ::before (the 60 % 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"],

package/src/scene3d/holographicFleetBody.test.ts

@@ -3,6 +3,8 @@ import * as THREE from "three";
 
 import { fakeAs } from "../test-utils/fakes";
 import {
+  extractHologramFaces,
+  faceInradius,
   hologramHudText,
   makeFleetHologram,
   poseFleetHologram,
@@ -86,4 +88,77 @@ describe("makeFleetHologram", () => {
     expect(hub.mesh.geometry).toBeInstanceOf(THREE.IcosahedronGeometry);
     expect(planet.mesh.geometry).toBeInstanceOf(THREE.DodecahedronGeometry);
   });
+
+  it("gives every face its own detached inset ring, with no shared vertices", () => {
+    mockCanvas();
+    for (const [role, expectedFaces] of [["star", 20], ["planet", 12]] as const) {
+      const hologram = makeFleetHologram(
+        { ...INPUT, role },
+        new THREE.Color(),
+        false,
+      );
+      const rings = hologram.mesh.getObjectsByProperty(
+        "name",
+        "fleet-hologram-face-ring",
+      );
+      expect(rings, `${role} face rings`).toHaveLength(expectedFaces);
+      expect(
+        hologram.mesh.getObjectsByProperty("name", "fleet-hologram-polyhedron-edges"),
+        `${role} shared wireframe`,
+      ).toHaveLength(0);
+
+      const vertexKeys = new Set<string>();
+      let vertices = 0;
+      for (const ring of rings) {
+        expect(ring).toBeInstanceOf(THREE.LineLoop);
+        const positions = (ring as THREE.LineLoop).geometry.getAttribute("position");
+        expect(positions.count).toBe(32);
+        for (let i = 0; i < positions.count; i += 1) {
+          vertexKeys.add(
+            `${positions.getX(i).toFixed(5)}:${positions.getY(i).toFixed(5)}:${positions.getZ(i).toFixed(5)}`,
+          );
+          vertices += 1;
+        }
+      }
+      // Every ring has its own circumference; no ring shares an edge or
+      // vertex with a neighbour, so the old connected cage cannot reappear.
+      expect(vertexKeys.size).toBe(vertices);
+
+      // Each ring must stay well INSIDE its own face: map it back to the
+      // recovered face polygon, then pin both the 62% radius ratio and the
+      // remaining margin. This makes an overflow regression impossible to
+      // hide behind the count/name assertions above.
+      const faces = extractHologramFaces(hologram.mesh.geometry);
+      expect(faces).toHaveLength(expectedFaces);
+      const usedFaces = new Set<number>();
+      for (const ring of rings) {
+        expect(ring.raycast).not.toBe(THREE.LineLoop.prototype.raycast);
+        const positions = (ring as THREE.LineLoop).geometry.getAttribute("position");
+        const ringCenter = new THREE.Vector3();
+        const points: THREE.Vector3[] = [];
+        for (let i = 0; i < positions.count; i += 1) {
+          const point = new THREE.Vector3(
+            positions.getX(i),
+            positions.getY(i),
+            positions.getZ(i),
+          );
+          points.push(point);
+          ringCenter.add(point);
+        }
+        ringCenter.multiplyScalar(1 / positions.count);
+        const faceIndex = faces.findIndex((face, index) =>
+          !usedFaces.has(index) && ringCenter.distanceTo(face.center) < 0.03);
+        expect(faceIndex, `${role} ring maps to one face`).toBeGreaterThanOrEqual(0);
+        usedFaces.add(faceIndex);
+        const face = faces[faceIndex]!;
+        const inradius = faceInradius(face);
+        const ringRadius = Math.max(...points.map((point) => point.distanceTo(ringCenter)));
+        expect(ringRadius / inradius).toBeCloseTo(0.62, 5);
+        for (const point of points) {
+          expect(point.distanceTo(face.center)).toBeLessThan(inradius);
+        }
+      }
+      expect(usedFaces.size).toBe(expectedFaces);
+    }
+  });
 });

package/src/scene3d/holographicFleetBody.ts

@@ -3,10 +3,11 @@
  * data-bound cylindrical HUD band.
  *
  * The visual language is deliberately restrained: a coarse translucent
- * polyhedron, two rings for a standard node (three for a hub), one bright
- * arc per ring, and a slow ticker made ONLY from real caller-supplied
- * fields. Decorative lines and the band never join raycast picking; the
- * centre mesh remains the node's pointer and selection target.
+ * polyhedron whose FACES each carry an independent in-plane ring (no shared
+ * wireframe edges), two orbit rings for a standard node (three for a hub),
+ * one bright arc per orbit ring, and a slow ticker made ONLY from real
+ * caller-supplied fields. Decorative lines and the band never join raycast
+ * picking; the centre mesh remains the node's pointer and selection target.
  */
 
 import * as THREE from "three";
@@ -76,6 +77,125 @@ function unpickable<T extends THREE.Object3D>(object: T): T {
   return object;
 }
 
+/** One flat polygon face recovered from the polyhedron's triangles.
+ *  Exported for the geometry contract test; not part of the public barrel. */
+export interface HologramFace {
+  center: THREE.Vector3;
+  normal: THREE.Vector3;
+  vertices: THREE.Vector3[];
+}
+
+/** Recover the polyhedron's true faces (a dodecahedron face is three
+ *  coplanar triangles; a pentagon must become ONE ring, not three). Group by
+ *  normal direction with a dot threshold: Three.js' projected pentagon
+ *  fragments are nearly coplanar, while adjacent dodecahedron faces differ
+ *  by tens of degrees. */
+export function extractHologramFaces(geometry: THREE.BufferGeometry): HologramFace[] {
+  const position = geometry.getAttribute("position");
+  const groups: Array<{ normal: THREE.Vector3; vertices: Map<string, THREE.Vector3> }> = [];
+  for (let i = 0; i < position.count; i += 3) {
+    const a = new THREE.Vector3(position.getX(i), position.getY(i), position.getZ(i));
+    const b = new THREE.Vector3(position.getX(i + 1), position.getY(i + 1), position.getZ(i + 1));
+    const c = new THREE.Vector3(position.getX(i + 2), position.getY(i + 2), position.getZ(i + 2));
+    const normal = b.clone().sub(a).cross(c.clone().sub(a)).normalize();
+    const triangleCenter = a.clone().add(b).add(c).multiplyScalar(1 / 3);
+    if (normal.dot(triangleCenter) < 0) normal.negate();
+    let group = groups.find((candidate) => candidate.normal.dot(normal) > 0.999);
+    if (!group) {
+      group = { normal, vertices: new Map() };
+      groups.push(group);
+    }
+    for (const vertex of [a, b, c]) {
+      const vertexKey = [vertex.x, vertex.y, vertex.z]
+        .map((value) => value.toFixed(5))
+        .join(":");
+      group.vertices.set(vertexKey, vertex);
+    }
+  }
+
+  return groups.map((group) => {
+    const vertices = [...group.vertices.values()];
+    const center = vertices
+      .reduce((sum, vertex) => sum.add(vertex), new THREE.Vector3())
+      .multiplyScalar(1 / vertices.length);
+    return {
+      center,
+      normal: group.normal.clone().dot(center) < 0
+        ? group.normal.clone().negate()
+        : group.normal.clone(),
+      vertices,
+    };
+  });
+}
+
+/** Inradius of the face polygon — the largest inset circle that still
+ *  leaves a visible gap between neighbouring face rings. Exported for the
+ *  geometry contract test; not part of the public barrel. */
+export function faceInradius(face: HologramFace): number {
+  const u = face.vertices[0]!.clone().sub(face.center).normalize();
+  const v = face.normal.clone().cross(u).normalize();
+  const ordered = [...face.vertices].sort((a, b) => {
+    const angle = (point: THREE.Vector3): number => Math.atan2(
+      point.clone().sub(face.center).dot(v),
+      point.clone().sub(face.center).dot(u),
+    );
+    return angle(a) - angle(b);
+  });
+  let inradius = Number.POSITIVE_INFINITY;
+  for (let i = 0; i < ordered.length; i += 1) {
+    const a = ordered[i]!;
+    const b = ordered[(i + 1) % ordered.length]!;
+    const edge = b.clone().sub(a);
+    const area2 = edge.clone().cross(face.center.clone().sub(a)).length();
+    if (edge.lengthSq() > 1e-10) inradius = Math.min(inradius, area2 / edge.length());
+  }
+  return Number.isFinite(inradius) ? inradius : 0;
+}
+
+/** Each face gets its own detached ring. No shared edges, no connected
+ *  wireframe cage — adjacent rings visibly stop short of every face border. */
+function makeFaceRings(
+  geometry: THREE.BufferGeometry,
+  bodyRadius: number,
+  color: THREE.Color,
+  offline: boolean,
+): THREE.LineLoop[] {
+  const lift = bodyRadius * 0.01;
+  const segments = 32;
+  const rings: THREE.LineLoop[] = [];
+  for (const face of extractHologramFaces(geometry)) {
+    const radius = Math.max(0.012, faceInradius(face) * 0.62);
+    const u = face.vertices[0]!.clone().sub(face.center).normalize();
+    const v = face.normal.clone().cross(u).normalize();
+    const points: number[] = [];
+    for (let i = 0; i < segments; i += 1) {
+      const angle = (i / segments) * Math.PI * 2;
+      const point = face.center
+        .clone()
+        .addScaledVector(face.normal, lift)
+        .addScaledVector(u, Math.cos(angle) * radius)
+        .addScaledVector(v, Math.sin(angle) * radius);
+      points.push(point.x, point.y, point.z);
+    }
+    const ring = unpickable(new THREE.LineLoop(
+      new THREE.BufferGeometry().setAttribute(
+        "position",
+        new THREE.Float32BufferAttribute(points, 3),
+      ),
+      new THREE.LineBasicMaterial({
+        color,
+        transparent: true,
+        opacity: offline ? 0.16 : 0.62,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+      }),
+    ));
+    ring.name = "fleet-hologram-face-ring";
+    rings.push(ring);
+  }
+  return rings;
+}
+
 function makeRing(
   radius: number,
   index: number,
@@ -212,18 +332,9 @@ export function makeFleetHologram(
   mesh.name = "fleet-hologram-polyhedron";
   mesh.rotation.set(0.2, 0, 0.1);
 
-  const edges = unpickable(new THREE.LineSegments(
-    new THREE.EdgesGeometry(geometry, 1),
-    new THREE.LineBasicMaterial({
-      color: edgeColor,
-      transparent: true,
-      opacity: offline ? 0.26 : 0.78,
-      depthWrite: false,
-      blending: THREE.AdditiveBlending,
-    }),
-  ));
-  edges.name = "fleet-hologram-polyhedron-edges";
-  mesh.add(edges);
+  for (const ring of makeFaceRings(geometry, input.radius, edgeColor, offline)) {
+    mesh.add(ring);
+  }
   group.add(mesh);
 
   const rings = HOLOGRAM_RING_SCALES[input.role].map((scale, index) => {

package/src/scene3d/holographicFleetScene.test.ts

@@ -669,10 +669,18 @@ describe("buildFleetScene body dressing", () => {
         expect(ring.getObjectByName("fleet-hologram-ring-base")).toBeDefined();
         expect(ring.getObjectByName("fleet-hologram-ring-arc")).toBeDefined();
       }
-      const edges = bodyMesh(engine, id).getObjectByName(
-        "fleet-hologram-polyhedron-edges",
+      const faceRings = root.getObjectsByProperty("name", "fleet-hologram-face-ring");
+      expect(faceRings, `${id} detached face-ring count`).toHaveLength(
+        id === "hub-a" ? 20 : 12,
       );
-      expect(edges, `${id} polyhedron edges`).toBeInstanceOf(THREE.LineSegments);
+      for (const faceRing of faceRings) {
+        expect(faceRing).toBeInstanceOf(THREE.LineLoop);
+        expect(faceRing).not.toBeInstanceOf(THREE.LineSegments);
+      }
+      expect(
+        root.getObjectsByProperty("name", "fleet-hologram-polyhedron-edges"),
+        "the shared wireframe cage is gone",
+      ).toHaveLength(0);
     }
     handle.dispose();
   });