@celestia-island/hikari 0.55.261 → 0.55.262

package/package.json

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

package/src/components/HkMenu.rail.test.tsx

@@ -200,6 +200,11 @@ describe("HkMenu sidebar icon rail", () => {
 
     const children = c.querySelector(".hk-menu-sidebar-rail-children");
     expect(children, "the open group lists its children in the rail").toBeTruthy();
+    // The rail wrapper wears the SHARED children class too: the expanded
+    // sidebar's 2px margin step reaches the rail through it — that class
+    // union IS the vertical-invariance carrier (2026-10-31). A rail-only
+    // wrapper would re-introduce the per-density step.
+    expect(children!.classList.contains("hk-menu-sidebar-children")).toBe(true);
     const childRows = railRows(children!);
     expect(childRows.map((row) => row.getAttribute("aria-label"))).toEqual(["Users", "Audit log"]);
     for (const row of childRows) {
@@ -238,6 +243,15 @@ describe("HkMenu sidebar icon rail", () => {
     expect(c.querySelector(".hk-menu-sidebar-group[data-open]"), "the group is still open").toBeTruthy();
     expect(groupRows(c)[0]!.getAttribute("aria-expanded")).toBe("true");
     expect(c.textContent).toContain("Users");
+    // TWO-SIDED class-union pin: the EXPANDED wrapper must wear the
+    // shared class too. Dropping it there removes the 2px step from the
+    // expanded sidebar — rows below an open group would move on every
+    // flip, the exact drift this contract kills (a rail-only pin let
+    // that through).
+    expect(
+      c.querySelector(".hk-menu-sidebar-group[data-open] > .hk-menu-sidebar-children"),
+      "the expanded children wrapper keeps the shared step class",
+    ).toBeTruthy();
 
     // Reverse direction: collapse it from the expanded sidebar, flip
     // back into the rail — it must stay collapsed (no resurrection).
@@ -508,10 +522,65 @@ describe("HkMenu rail styles (compiled sheet contracts)", () => {
     expect(row).toContain("justify-content: center");
   });
 
-  it("keeps open group children in the same one-column rhythm (no indent step)", () => {
+  it("keeps open group children at the EXPANDED vertical step (no rail re-step)", () => {
+    // Vertical rhythm is density-invariant (2026-10-31 user direction:
+    // the collapse toggle must not move rows). The rail children wrapper
+    // therefore carries NO margin rule of its own — the expanded
+    // sidebar's 2px step from the shared .hk-menu-sidebar-children rule
+    // applies in the rail too, and the wrapper stays width-only (its
+    // selector survives only inside the comma-grouped width rule, which
+    // the exact-line ruleBody skips — the null here asserts no
+    // STANDALONE rail-children rule came back).
     const children = ruleBody(".hk-menu-sidebar[data-collapsed] .hk-menu-sidebar-rail-children");
-    expect(children, "the rail children rule exists").not.toBeNull();
-    expect(children).toContain("margin-top: 0");
+    expect(children, "a standalone rail-children rule re-stepped the margin").toBeNull();
+    const shared = ruleBody(".hk-menu-sidebar-children");
+    expect(shared, "the shared children rule exists").not.toBeNull();
+    expect(shared).toContain("margin-top: var(--space-2, 2px)");
+    // A rule whose selector is EXACTLY a rail wrapper class — top-level,
+    // outside any density dress — would restyle the rail children while
+    // evading every dress-keyed scan below (the compiled chunk then
+    // carries no carrier text). The wrappers' geometry must come from
+    // the shared rules alone.
+    expect(css.match(/^\s*\.hk-menu-sidebar-rail-(?:children|group)\s*\{/gm)).toBeNull();
+  });
+
+  it("the rail dress authors no vertical rhythm in any spelling", () => {
+    // The stronger form of the contract above, so a re-step cannot hide
+    // inside a comma-grouped selector the per-selector ruleBody skips
+    // AND cannot return through alternate spellings or sister metrics:
+    // every rule of the density dress is scanned and banned for ANY
+    // margin/padding spelling that reaches a block edge — the shorthand
+    // (it sets the block side too: the historical `margin-top: 0`
+    // regression spelled `margin: 0` evaded a longhand-only scan) and
+    // every vertical longhand, top AND bottom — plus the block-FLOW
+    // metrics that move rows just the same (gap/row-gap/height/
+    // min-height/max-height: a `gap:` inside the comma-grouped width
+    // rule once passed a margin/padding-only scan). Horizontal-only
+    // tracks (margin-inline*, padding-inline*) stay legal; absolute
+    // INSETS (the caret corner's inset-block-end) are flow-neutral
+    // decoration and stay legal. A rail band that truly needs a
+    // different block metric must move the BASE rule for BOTH densities.
+    // Keyed to BOTH carrier spellings so a future [data-rail]-keyed
+    // carrier in this sheet cannot slip the scan.
+    const dressRules = css
+      .split("}")
+      .filter(
+        (rule) =>
+          rule.includes(".hk-menu-sidebar[data-collapsed]") ||
+          rule.includes(".hk-menu-sidebar[data-rail]"),
+      );
+    expect(dressRules.length, "the rail dress rules exist").toBeGreaterThan(3);
+    for (const rule of dressRules) {
+      expect(rule, `vertical margin in the rail dress: ${rule}`).not.toMatch(
+        /\bmargin(?:-(?:top|bottom|block(?:-(?:start|end))?))?\s*:/,
+      );
+      expect(rule, `vertical padding in the rail dress: ${rule}`).not.toMatch(
+        /\bpadding(?:-(?:top|bottom|block(?:-(?:start|end))?))?\s*:/,
+      );
+      expect(rule, `block-flow metric in the rail dress: ${rule}`).not.toMatch(
+        /\b(?:gap|row-gap|height|min-height|max-height)\s*:/,
+      );
+    }
   });
 
   it("mirrors the rail caret in RTL with the scaleX convention, never a rotate", () => {

package/src/components/HkMenu.scss

@@ -193,18 +193,18 @@
     font-weight: 600;
   }
 
-  /* Rail groups keep the rail rhythm at every depth: the children
-   * wrapper spends the rail's own row gap, with no margin step above
-   * the first child and never an indent. */
+  /* Rail groups keep the ONE-COLUMN rhythm at every depth: width-only,
+   * never an indent. The children wrapper deliberately carries NO
+   * margin override of its own — the expanded sidebar's 2px step (the
+   * shared .hk-menu-sidebar-children rule above) applies in the rail
+   * too, because vertical rhythm is density-invariant (2026-10-31 user
+   * direction): a rail-specific step would move every row below an open
+   * group on each collapse/expand flip. */
   .hk-menu-sidebar-rail-group,
   .hk-menu-sidebar-rail-children {
     width: 100%;
   }
 
-  .hk-menu-sidebar-rail-children {
-    margin-top: 0;
-  }
-
   /* Disclosure ink, at the same secondary weight as the expanded
    * sidebar's .hk-menu-more. The placeholder form lives in the glyph
    * cell and centers like every other row icon. */

package/src/components/HkSidebar.scss

@@ -86,23 +86,27 @@
  * kit (HkSidebarRailSwap) — the generation's [data-rail] flips with the
  * swap key, so the leaving generation keeps its dress for the dissolve
  * while the entering one takes the new one. A root-level attr cannot do
- * that: it would restyle the frozen leaving copy mid-dissolve. */
+ * that: it would restyle the frozen leaving copy mid-dissolve.
+ *
+ * VERTICAL RHYTHM IS DENSITY-INVARIANT (2026-10-31 user direction: the
+ * collapse toggle must not move rows). The dress authors INLINE geometry
+ * only — the header/footer rules below narrow the horizontal padding for
+ * the rail column and recentre the header, while every BLOCK metric (the
+ * header's 16px band, the body's 20px leading air + scroll tail, the
+ * footer's 16px band) stays with the base rules alone. Shrinking the
+ * collapsed paddings used to lift the whole nav by up to two paddings'
+ * worth on every flip; a band that needs a different vertical dress in
+ * rail mode would have to move the base values for BOTH densities, never
+ * add a per-density block padding. */
 .hk-sidebar[data-collapsed],
 .hk-sidebar-rail-generation[data-rail] {
   .hk-sidebar-header {
     justify-content: center;
-    padding: var(--space-12) var(--space-8);
-  }
-
-  .hk-sidebar-body {
-    /* Same end-cap as the expanded body — collapsed rows are icon-only
-     * but the tail's job (announcing the end of the scroll range) is
-     * identical, so only the leading air shrinks here. */
-    padding-block: var(--space-12) var(--hk-sidebar-scroll-tail);
+    padding: var(--space-16) var(--space-8);
   }
 
   .hk-sidebar-footer {
-    padding: var(--space-12) var(--space-8);
+    padding: var(--space-16) var(--space-8);
   }
 }
 

package/src/components/HkSidebar.styles.test.ts

@@ -74,16 +74,61 @@ describe("HkSidebar scroll end-cap", () => {
     expect(body).not.toMatch(/padding-block:[^;]*--space-4/);
   });
 
-  it("keeps the same tail on the collapsed body", () => {
-    // The density dress is keyed off EITHER carrier — the legacy root's
-    // [data-collapsed] or the rail swap generation's [data-rail] (the
-    // generation attr freezes on the leaving copy for the dissolve, a
-    // root attr cannot). ruleBody needs the arm its brace follows, so the
-    // legacy arm is asserted as text and the body read from the group.
-    expect(css).toContain(".hk-sidebar[data-collapsed] .hk-sidebar-body");
-    const body = ruleBody(css, ".hk-sidebar-rail-generation[data-rail] .hk-sidebar-body");
-    expect(body, "the collapsed body rule exists (grouped density carriers)").not.toBeNull();
-    expect(body).toContain("padding-block: var(--space-12) var(--hk-sidebar-scroll-tail)");
+  it("the density dress keeps every vertical metric at the expanded value", () => {
+    // Vertical rhythm is density-invariant (2026-10-31 user direction:
+    // the collapse toggle must not move rows). The body therefore has no
+    // density rule AT ALL — the leading air AND the scroll tail ride the
+    // single base rule in both densities — and the header/footer dress
+    // rules keep the expanded BLOCK padding, narrowing only the inline
+    // track for the rail column.
+    expect(css).not.toContain(".hk-sidebar[data-collapsed] .hk-sidebar-body");
+    expect(css).not.toContain(".hk-sidebar-rail-generation[data-rail] .hk-sidebar-body");
+    // The two carrier literals above are the compiled spellings; a brand
+    // NEW carrier (a third density hook) is a new dress and must re-run
+    // this contract — not mechanically foreseeable here.
+    // ruleBody needs the arm its brace follows; the dress compiles to one
+    // comma-grouped rule per band, so the generation arm is the one the
+    // helper can read (the legacy arm shares its body).
+    const header = ruleBody(css, ".hk-sidebar-rail-generation[data-rail] .hk-sidebar-header");
+    expect(header, "the collapsed header rule exists (grouped density carriers)").not.toBeNull();
+    expect(header).toContain("padding: var(--space-16) var(--space-8)");
+    const footer = ruleBody(css, ".hk-sidebar-rail-generation[data-rail] .hk-sidebar-footer");
+    expect(footer, "the collapsed footer rule exists (grouped density carriers)").not.toBeNull();
+    expect(footer).toContain("padding: var(--space-16) var(--space-8)");
+    // The stronger, spelling-proof form (whole-dress scan): EVERY
+    // padding declaration in ANY dress rule must be EXACTLY the expanded
+    // two-track shorthand — exact, not a prefix: a three-track spelling
+    // (`padding: var(--space-16) var(--space-8) var(--space-12)`) drifts
+    // the block END past a block-start-only check, and a longhand
+    // (`padding-block-start:`) hides from a shorthand-only one; both
+    // green-holed earlier rounds. Physical `bottom` longhands are banned
+    // beside the logical ones. Horizontal-only tracks (padding-inline*)
+    // cannot match the value pin and are rejected the same way; a band
+    // that truly needs different block metrics must move the BASE rule
+    // for BOTH densities. Margins are banned outright — the bands
+    // separate by their paddings alone — and so are the block-FLOW
+    // metrics that move rows just the same (gap/row-gap/height/
+    // min-height/max-height).
+    const dressRules = css
+      .split("}")
+      .filter((rule) => rule.includes("[data-collapsed]") || rule.includes("[data-rail]"));
+    expect(dressRules.length, "the density dress rules exist").toBeGreaterThan(1);
+    for (const rule of dressRules) {
+      for (const decl of rule.matchAll(
+        /\bpadding(?:-(?:top|bottom|block(?:-(?:start|end))?))?\s*:[^;}]*/g,
+      )) {
+        expect(
+          decl[0].trim(),
+          `a dress padding is not the expanded two-track shorthand: ${decl[0]}`,
+        ).toBe("padding: var(--space-16) var(--space-8)");
+      }
+      expect(rule, `a margin crept into the dress: ${rule}`).not.toMatch(
+        /\bmargin(?:-(?:top|bottom|block(?:-(?:start|end))?))?\s*:/,
+      );
+      expect(rule, `block-flow metric in the dress: ${rule}`).not.toMatch(
+        /\b(?:gap|row-gap|height|min-height|max-height)\s*:/,
+      );
+    }
   });
 
   it("reads the tail fallback from the scss source, not a drifted literal", () => {

package/src/components/HkSidebar.tsx

@@ -155,11 +155,12 @@ export default defineComponent({
     // dissolve), which is where the position is read from — an event-only
     // save would miss programmatic scrolls (no `scroll` event fires for
     // them), so the read happens on the ref hand-off itself and the
-    // onScroll below merely keeps the value fresh between flips. Raw
-    // scrollTop is an approximation across dresses (rail rows and full
-    // rows have different heights) — an exact restore would need an
-    // item-keyed anchor, not worth it for a nav list; the browser clamps
-    // any overshoot.
+    // onScroll below merely keeps the value fresh between flips. For
+    // library-owned rows the raw restore is EXACT since the vertical
+    // rhythm became density-invariant (2026-10-31: both dresses render
+    // the same band paddings and row heights, so y offsets match); the
+    // browser clamps any overshoot a host's density-dependent content
+    // could still produce.
     const savedScrollTop = ref(0);
     const onBodyScroll = (e: Event): void => {
       savedScrollTop.value = (e.currentTarget as HTMLElement).scrollTop;

package/src/scene3d/holographicFleetBody.test.ts

@@ -3,10 +3,9 @@ import * as THREE from "three";
 
 import { fakeAs } from "../test-utils/fakes";
 import {
-  extractHologramFaces,
-  faceInradius,
   hologramHudText,
   makeFleetHologram,
+  makeSatelliteHologram,
   poseFleetHologram,
   type FleetHologramInput,
 } from "./holographicFleetBody";
@@ -49,116 +48,241 @@ describe("hologramHudText", () => {
 });
 
 describe("makeFleetHologram", () => {
-  it("draws the real data on the cylindrical band and animates each layer", () => {
+  it("pins the real-data ticker to the centre of the front dial", () => {
     const fillText = mockCanvas();
     const hologram = makeFleetHologram(INPUT, new THREE.Color(0x7fb8dd), false);
 
     expect(hologram.hudTexture).not.toBeNull();
-    const band = hologram.group.getObjectByName("fleet-hologram-hud-band");
-    expect(band).toBeInstanceOf(THREE.Mesh);
-    expect((band as THREE.Mesh).geometry).toBeInstanceOf(THREE.CylinderGeometry);
-    expect(fillText).toHaveBeenCalled();
+    expect(hologram.hudPanel).not.toBeNull();
+    expect(hologram.hudPanel!.geometry).toBeInstanceOf(THREE.PlaneGeometry);
+    // The ticker is a child of the camera-facing dial, AT its centre: the
+    // dial owns the plane, so facing the dial faces the text (user
+    // direction 2026-10-31 — no wrapping ribbon).
+    expect(hologram.frontDial.children).toContain(hologram.hudPanel);
+    expect(hologram.hudPanel!.position.x).toBe(0);
+    expect(hologram.hudPanel!.position.y).toBe(0);
+    // Not vacuous: a blank ticker must fail here, not just render wrong
+    // text when it renders anything at all.
+    expect(fillText.mock.calls.length).toBeGreaterThan(0);
     for (const call of fillText.mock.calls) {
       expect(call[0]).toBe("node-1 engine stack  ·  Online  ·  3 endpoints");
     }
 
-    // Decorative rings and the text band never widen the body's pointer
-    // target. Only the central polyhedron keeps the default raycaster.
+    // The plane's aspect matches the texture's (1024×96): a mismatched
+    // aspect compresses the glyphs horizontally (R2 S3-1 regression).
+    const plane = hologram.hudPanel!.geometry as THREE.PlaneGeometry;
+    const params = plane.parameters as { width: number; height: number };
+    expect(params.width / params.height).toBeCloseTo(1024 / 96, 5);
+
+    // The text plane never widens the body's pointer target.
     const hits: THREE.Intersection[] = [];
-    band?.raycast(new THREE.Raycaster(), hits);
+    hologram.hudPanel!.raycast(new THREE.Raycaster(), hits);
     expect(hits).toHaveLength(0);
-
-    const initialRingY = hologram.rings.map((ring) => ring.pivot.rotation.y);
-    poseFleetHologram(hologram, 5, 20);
-    expect(hologram.mesh.rotation.y).toBeCloseTo(Math.PI / 2, 6);
-    hologram.rings.forEach((ring, index) => {
-      expect(ring.pivot.rotation.y).not.toBe(initialRingY[index]);
-    });
-    expect(hologram.hudTexture?.offset.x).toBeCloseTo(0.09, 6);
-    poseFleetHologram(hologram, 10, 20);
-    expect(hologram.hudTexture?.offset.x).toBeCloseTo(0.18, 6);
   });
 
-  it("uses three rings for a hub and two for a standard node", () => {
+  it("gives main cores denser dial content than node cores", () => {
     mockCanvas();
     const hub = makeFleetHologram({ ...INPUT, role: "star" }, new THREE.Color(), false);
-    const planet = makeFleetHologram(INPUT, new THREE.Color(), false);
-    expect(hub.rings).toHaveLength(3);
-    expect(planet.rings).toHaveLength(2);
-    expect(hub.mesh.geometry).toBeInstanceOf(THREE.IcosahedronGeometry);
-    expect(planet.mesh.geometry).toBeInstanceOf(THREE.DodecahedronGeometry);
+    const node = makeFleetHologram(INPUT, new THREE.Color(), false);
+
+    const dialCounts = (hologram: ReturnType<typeof makeFleetHologram>) => ({
+      rings: hologram.frontDial.getObjectsByProperty("name", "fleet-hologram-face-dial-ring").length,
+      arcs: hologram.frontDial.getObjectsByProperty("name", "fleet-hologram-face-dial-arc").length,
+      core: hologram.frontDial.getObjectsByProperty("name", "fleet-hologram-face-dial-core").length,
+      ticks: (() => {
+        const ticks = hologram.frontDial.getObjectByName("fleet-hologram-face-dial-ticks");
+        if (!ticks) return 0;
+        return (ticks as THREE.LineSegments).geometry.getAttribute("position").count / 2;
+      })(),
+      spindle: hologram.shell.getObjectsByProperty(
+        "name",
+        "fleet-hologram-ring-spindle-circle",
+      ).length,
+    });
+
+    // User direction 2026-10-31: a main core's ball is bigger AND carries
+    // more content; a node core is smaller and sparser — never identical.
+    expect(dialCounts(hub)).toEqual({ rings: 3, ticks: 48, arcs: 2, core: 1, spindle: 9 });
+    expect(dialCounts(node)).toEqual({ rings: 2, ticks: 28, arcs: 1, core: 1, spindle: 6 });
   });
 
-  it("gives every face its own detached inset ring, with no shared vertices", () => {
+  it("builds the ball from circles only — no solid sphere, no wireframe cage", () => {
     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);
+    for (const role of ["star", "planet"] as const) {
+      const hologram = makeFleetHologram({ ...INPUT, role }, new THREE.Color(), false);
+
+      // No SphereGeometry anywhere: the pick proxy is an invisible
+      // icosahedron, everything visible is a circle, a plane or a disc.
+      const spheres: THREE.Mesh[] = [];
+      hologram.group.traverse((obj) => {
+        if (obj instanceof THREE.Mesh && obj.geometry instanceof THREE.SphereGeometry) {
+          spheres.push(obj);
+        }
+      });
+      expect(spheres, `${role} solid spheres`).toHaveLength(0);
+
+      // The shell is six overlapping support dials whose rims merge into
+      // one rounded envelope — the fused structures must not leave a
+      // readable cube behind (no shared wireframe, no box edges).
+      const shellDials = hologram.shell.getObjectsByProperty("name", "fleet-hologram-face-dial");
+      expect(shellDials, `${role} shell dial count`).toHaveLength(6);
+      // The six dials sit on the principal axes at ±0.4r — the geometry
+      // of the merge, not just the count (collapse-to-origin stays RED).
+      const offsets = shellDials.map((dial) => dial.position.clone());
+      const expectedAxes: Array<[number, number, number]> = [
+        [0, 0, 0.4], [0, 0, -0.4], [0.4, 0, 0], [-0.4, 0, 0],
+        [0, 0.4, 0], [0, -0.4, 0],
+      ];
+      for (const axis of expectedAxes) {
+        const match = offsets.find((p) =>
+          Math.abs(p.x - axis[0]) < 1e-9
+          && Math.abs(p.y - axis[1]) < 1e-9
+          && Math.abs(p.z - axis[2]) < 1e-9);
+        expect(match, `${role} dial at ${axis.join(",")}`).toBeTruthy();
+      }
+      // Each support dial carries ONE outline ring only — content belongs
+      // to the front dial, so the sphere cannot re-clutter.
+      for (const dial of shellDials) {
+        expect(dial.getObjectsByProperty("name", "fleet-hologram-face-dial-ring"))
+          .toHaveLength(1);
+        expect(dial.getObjectsByProperty("name", "fleet-hologram-face-dial-ticks"))
+          .toHaveLength(0);
+      }
       expect(
-        hologram.mesh.getObjectsByProperty("name", "fleet-hologram-polyhedron-edges"),
-        `${role} shared wireframe`,
+        hologram.group.getObjectsByProperty("name", "fleet-hologram-polyhedron-edges"),
+        `${role} shared wireframe cage`,
       ).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;
-        }
+      // The spindle is FAT AT THE EQUATOR and tapers to the poles: the
+      // widest ring sits at z≈0 and the radius shrinks monotonically
+      // toward both ends (a flattened spindle stays RED).
+      const spindleRings = hologram.shell.getObjectsByProperty(
+        "name",
+        "fleet-hologram-ring-spindle-circle",
+      ) as THREE.LineLoop[];
+      expect(spindleRings.length).toBe(role === "star" ? 9 : 6);
+      const radiusOf = (ring: THREE.LineLoop) => {
+        const pos = ring.geometry.getAttribute("position");
+        return Math.hypot(pos.getX(0), pos.getY(0));
+      };
+      const widestRing = spindleRings.reduce(
+        (best, ring) => (radiusOf(ring) > radiusOf(best) ? ring : best),
+        spindleRings[0]!,
+      );
+      // Fat at the equator: ordered by |z|, radii never grow (an even
+      // count staggers a mirrored pair around z=0, hence non-strict)…
+      const byEquator = [...spindleRings].sort(
+        (a, b) => Math.abs(a.position.z) - Math.abs(b.position.z),
+      );
+      for (let i = 1; i < byEquator.length; i += 1) {
+        expect(
+          radiusOf(byEquator[i]!),
+          `${role} ring ${i} grows toward its pole`,
+        ).toBeLessThanOrEqual(radiusOf(byEquator[i - 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);
-        }
+      // …and the poles are STRICTLY thinner than the equator band, so a
+      // flattened (cylindrical) spindle cannot pass.
+      expect(radiusOf(byEquator[byEquator.length - 1]!)).toBeLessThan(
+        radiusOf(widestRing),
+      );
+      // Symmetric stack: every ring has a z-mirror.
+      for (const ring of byEquator) {
+        const mirror = byEquator.find((other) =>
+          Math.abs(other.position.z + ring.position.z) < 1e-9
+          && Math.abs(radiusOf(other) - radiusOf(ring)) < 1e-9);
+        expect(mirror, `${role} ring at z=${ring.position.z} mirrors`).toBeTruthy();
       }
-      expect(usedFaces.size).toBe(expectedFaces);
+
+      // The pick proxy keeps the old polyhedron's reach (82% of the body
+      // radius): most of the visible silhouette stays clickable.
+      hologram.mesh.geometry.computeBoundingSphere();
+      const proxyRadius = (hologram.mesh.geometry.boundingSphere as THREE.Sphere).radius;
+      expect(proxyRadius / INPUT.radius).toBeCloseTo(0.82, 5);
+
+      // Exactly ONE detailed dial exists and it faces the camera group.
+      const focus = hologram.frontDial.getObjectsByProperty(
+        "name",
+        "fleet-hologram-face-dial",
+      );
+      expect(focus).toHaveLength(1);
+
+      // Only the invisible centre proxy answers raycasts: every other
+      // line and plane has an instance-level raycast override.
+      const pickables: THREE.Object3D[] = [];
+      hologram.group.traverse((obj) => {
+        if (Object.prototype.hasOwnProperty.call(obj, "raycast")) return;
+        if (obj instanceof THREE.Mesh || obj instanceof THREE.Line) pickables.push(obj);
+      });
+      expect(pickables, `${role} pickable objects`).toHaveLength(1);
+      expect(pickables[0]).toBe(hologram.mesh);
+      const material = hologram.mesh.material as THREE.MeshBasicMaterial;
+      expect(material.opacity).toBe(0);
+    }
+  });
+
+  it("hides the circular focus mark until the scene selects the body", () => {
+    mockCanvas();
+    const hologram = makeFleetHologram(INPUT, new THREE.Color(), false);
+    expect(hologram.selectionRing.visible).toBe(false);
+    // Not vacuous: the mark is exactly two concentric circular outlines
+    // just outside the body — an empty or shrunken ring stays RED.
+    const lines = hologram.selectionRing.children;
+    expect(lines).toHaveLength(2);
+    for (const line of lines) {
+      expect(line).toBeInstanceOf(THREE.LineLoop);
+      expect(line).not.toBeInstanceOf(THREE.LineSegments);
+      const pos = (line as THREE.LineLoop).geometry.getAttribute("position");
+      const radius = Math.hypot(pos.getX(0), pos.getY(0));
+      expect(radius).toBeGreaterThan(INPUT.radius);
+      expect(radius).toBeLessThan(INPUT.radius * 1.2);
     }
   });
+
+  it("animates each layer independently and faces the camera", () => {
+    mockCanvas();
+    const hologram = makeFleetHologram(INPUT, new THREE.Color(), false);
+
+    const camera = new THREE.PerspectiveCamera();
+    camera.position.set(3, -2, 5);
+    camera.lookAt(0, 0, 0);
+    camera.updateMatrixWorld();
+
+    poseFleetHologram(hologram, 5, 20, camera.quaternion);
+    // The shell turns as a ball of circles…
+    expect(hologram.shell.rotation.y).toBeCloseTo(Math.PI / 2, 6);
+    // …the front dial and the focus ring face the camera (component-wise:
+    // Quaternion instances never satisfy reference equality)…
+    expect(hologram.frontDial.quaternion.angleTo(camera.quaternion)).toBeCloseTo(0, 6);
+    expect(hologram.selectionRing.quaternion.angleTo(camera.quaternion)).toBeCloseTo(0, 6);
+    // …the dial's ticks sweep…
+    expect(hologram.frontSpinner.rotation.z).toBeCloseTo(0.55, 6);
+    // …and the real-data ticker scrolls across the dial's centre.
+    expect(hologram.hudTexture?.offset.x).toBeCloseTo(0.09, 6);
+    poseFleetHologram(hologram, 10, 20, camera.quaternion);
+    expect(hologram.hudTexture?.offset.x).toBeCloseTo(0.18, 6);
+  });
+});
+
+describe("makeSatelliteHologram", () => {
+  it("is a miniature crossed-dial shell with no text and no solid sphere", () => {
+    const satellite = makeSatelliteHologram(0.2, new THREE.Color(0x9fb8dd), false);
+
+    // Endpoint tier: three crossed support dials plus a three-ring
+    // spindle — the gateway's language, minimal content, no ticker.
+    expect(satellite.getObjectsByProperty("name", "fleet-hologram-face-dial"))
+      .toHaveLength(3);
+    expect(satellite.getObjectsByProperty("name", "fleet-hologram-ring-spindle-circle"))
+      .toHaveLength(3);
+    expect(satellite.getObjectsByProperty("name", "fleet-hologram-hud-panel"))
+      .toHaveLength(0);
+    let meshes = 0;
+    satellite.traverse((obj) => {
+      if (obj instanceof THREE.Mesh) meshes += 1;
+    });
+    expect(meshes).toBe(0);
+
+    // Nothing in a satellite may answer raycasts.
+    const hits = new THREE.Raycaster().intersectObject(satellite, true);
+    expect(hits).toHaveLength(0);
+  });
 });