@celestia-island/hikari 0.55.254 → 0.55.255

package/package.json

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

package/src/board3dSurface.test.ts

@@ -24,6 +24,8 @@ type ModelOpts = barrel.Board3DModelOptions;
 type CameraCfg = barrel.Board3DCameraConfig;
 type FocusOpts = barrel.Board3DFocusOptions;
 type ViewModeT = barrel.Board3DViewMode;
+type StarBody = barrel.HkStarSystemBodyInput;
+type StarSpec = barrel.HkStarSystemBodySpec;
 
 // Type-only probes: these lines exist so the checker resolves the three
 // exported types through the barrel itself.
@@ -34,6 +36,12 @@ const modelProbe: ModelOpts | null = null;
 const cameraProbe: CameraCfg = { fov: 45 };
 const focusProbe: FocusOpts = { padding: 1.6, lateralBias: 0 };
 const viewModeProbe: ViewModeT = "orbit";
+const starBodyProbe: StarBody = {
+  id: "node-1", label: "Node One", role: "planet", status: "Online", online: true,
+};
+const starSpecProbe: StarSpec | null = null;
+void starBodyProbe;
+void starSpecProbe;
 void engineProbe;
 void defProbe;
 void vecProbe;
@@ -43,9 +51,11 @@ void focusProbe;
 void viewModeProbe;
 
 describe("hikari barrel — 3D board surface", () => {
-  it("exports both 3D components", () => {
+  it("exports the board, minimap and star-system business component", () => {
     expect(barrel.HkBoard3D).toBeTruthy();
     expect(barrel.HkMinimap3D).toBeTruthy();
+    expect(barrel.HkStarSystem).toBeTruthy();
+    expect(barrel.HStarSystem).toBe(barrel.HkStarSystem);
   });
 
   it("exports the helper-layer constant consumers need for own decoration", () => {

package/src/components/HkStarSystem.scss

@@ -0,0 +1,29 @@
+@use "../styles/polyfill" as *;
+
+/* HkStarSystem's optional built-in CSS2D chip. Host products can replace
+ * it through makeLabel without inheriting any product-specific styling. */
+.hk-star-system-chip {
+  display: inline-flex;
+  align-items: center;
+  max-width: 240px;
+  padding: 3px 8px;
+  overflow: hidden;
+  border: 1px solid rgb(var(--color-border, 100 116 139) / 0.38);
+  border-radius: 9999px;
+  background: rgb(var(--color-background, 11 16 32) / 0.8);
+  color: rgb(var(--color-text, 226 232 240));
+  font-size: 11px;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  @include user-select(none);
+  pointer-events: auto;
+  @include backdrop-filter(blur(6px));
+}
+
+.hk-star-system-chip.is-core {
+  border-style: dashed;
+  cursor: default;
+  pointer-events: none;
+}

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

@@ -0,0 +1,14 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const sheet = readFileSync(join(import.meta.dirname, "HkStarSystem.scss"), "utf8");
+
+describe("HkStarSystem chip theme channels", () => {
+  it("uses RGB channel tokens through rgb(), never as complete CSS colors", () => {
+    expect(sheet).toContain("color: rgb(var(--color-text,");
+    expect(sheet).toContain("background: rgb(var(--color-background,");
+    expect(sheet).toContain("border: 1px solid rgb(var(--color-border,");
+    expect(sheet).not.toContain("color-mix");
+  });
+});

package/src/components/HkStarSystem.test.tsx

@@ -0,0 +1,163 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createApp, h, nextTick, reactive, type App } from "vue";
+
+import type { StarSystemBodyInput } from "../scene3d/holographicFleetSpec";
+import HkStarSystem from "./HkStarSystem";
+
+const mocks = vi.hoisted(() => ({
+  engine: {},
+  ready: undefined as undefined | (() => void),
+  build: vi.fn(),
+  handle: {
+    update: vi.fn(),
+    setSelected: vi.fn(),
+    focusBody: vi.fn(),
+    frameFleet: vi.fn(() => true),
+    dispose: vi.fn(),
+  },
+}));
+
+vi.mock("../scene3d/holographicFleetScene", () => ({
+  buildFleetScene: mocks.build.mockImplementation(() => mocks.handle),
+}));
+
+vi.mock("./HkBoard3D", async () => {
+  const { defineComponent, h: vueH, onMounted } = await import("vue");
+  return {
+    default: defineComponent({
+      name: "HkBoard3D",
+      emits: ["ready", "objectClick"],
+      setup(_props, { emit, slots }) {
+        mocks.ready = () => emit("ready", mocks.engine);
+        onMounted(() => mocks.ready?.());
+        return () => vueH("div", { class: "board-stub" }, slots.default?.());
+      },
+    }),
+  };
+});
+
+const BODIES: readonly StarSystemBodyInput[] = [
+  {
+    id: "hub-a", label: "Hub A", role: "star", status: "Online",
+    online: true, endpointCount: 2, detail: "2 endpoints",
+  },
+  {
+    id: "node-1", label: "Node One", role: "planet", status: "Offline",
+    online: false, endpointCount: 0,
+  },
+];
+
+const mounts: Array<{ app: App; container: HTMLElement }> = [];
+
+async function settle(): Promise<void> {
+  await nextTick();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await nextTick();
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.engine = {};
+  mocks.ready = undefined;
+});
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+function mountSystem(initialSelection: string | null = "node-1") {
+  const state = reactive({
+    selectedId: initialSelection as string | null,
+    bodies: [...BODIES],
+  });
+  const emitted: Array<string | null> = [];
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({
+    render: () => h(HkStarSystem, {
+      bodies: state.bodies,
+      selectedId: state.selectedId,
+      "onUpdate:selectedId": (id: string | null) => emitted.push(id),
+    }),
+  });
+  app.mount(container);
+  mounts.push({ app, container });
+  return { state, emitted };
+}
+
+describe("HkStarSystem controlled scene lifecycle", () => {
+  it("passes real body data and restores selection without flying", async () => {
+    mountSystem("node-1");
+    await settle();
+
+    expect(mocks.handle.update).toHaveBeenCalled();
+    const [spec, offline] = mocks.handle.update.mock.calls[0]!;
+    expect(spec.stars[0]).toMatchObject({
+      id: "hub-a", label: "Hub A", status: "Online", detail: "2 endpoints",
+    });
+    expect(spec.planets[0]).toMatchObject({
+      id: "node-1", label: "Node One", status: "Offline", online: false,
+    });
+    expect(offline).toEqual({ "hub-a": false, "node-1": true });
+    expect(mocks.handle.setSelected).toHaveBeenCalledWith("node-1");
+    expect(mocks.handle.focusBody).not.toHaveBeenCalled();
+  });
+
+  it("focuses an explicit controlled selection change", async () => {
+    const { state } = mountSystem("node-1");
+    await settle();
+    state.selectedId = "hub-a";
+    await settle();
+    expect(mocks.handle.focusBody).toHaveBeenCalledWith("hub-a");
+
+    state.selectedId = null;
+    await settle();
+    expect(mocks.handle.setSelected).toHaveBeenCalledWith(null);
+    expect(mocks.handle.frameFleet).toHaveBeenCalledWith(600);
+  });
+
+  it("updates before clearing a selection whose body disappeared", async () => {
+    const { state, emitted } = mountSystem("hub-a");
+    await settle();
+    mocks.handle.update.mockClear();
+    mocks.handle.setSelected.mockClear();
+
+    state.bodies = state.bodies.filter((body) => body.id !== "hub-a");
+    await settle();
+    expect(mocks.handle.update).toHaveBeenCalledTimes(1);
+    expect(mocks.handle.setSelected).toHaveBeenCalledWith(null);
+    expect(emitted).toContain(null);
+    expect(mocks.handle.update.mock.invocationCallOrder[0])
+      .toBeLessThan(mocks.handle.setSelected.mock.invocationCallOrder[0]!);
+  });
+
+  it("disposes engine A before restoring the selection on engine B", async () => {
+    mountSystem("node-1");
+    await settle();
+    mocks.build.mockClear();
+    mocks.handle.dispose.mockClear();
+    mocks.handle.focusBody.mockClear();
+
+    mocks.engine = {};
+    mocks.ready?.();
+    await settle();
+    expect(mocks.handle.dispose).toHaveBeenCalledTimes(1);
+    expect(mocks.build).toHaveBeenCalledTimes(1);
+    expect(mocks.handle.dispose.mock.invocationCallOrder[0])
+      .toBeLessThan(mocks.build.mock.invocationCallOrder[0]!);
+    expect(mocks.handle.setSelected).toHaveBeenCalledWith("node-1");
+    expect(mocks.handle.focusBody).not.toHaveBeenCalled();
+  });
+
+  it("disposes the builder on unmount", async () => {
+    mountSystem();
+    await settle();
+    const [{ app }] = mounts;
+    app.unmount();
+    mounts.splice(0, 1);
+    expect(mocks.handle.dispose).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/HkStarSystem.tsx

@@ -0,0 +1,172 @@
+/**
+ * HkStarSystem — a reusable star / planet / satellite business scene.
+ *
+ * The host owns real node data and selection; this component owns the
+ * deterministic layout, holographic bodies, data-bound HUD bands, camera
+ * follow, labels, minimap markers and every GPU resource it creates. RPC,
+ * permissions and node actions deliberately stay in the host product.
+ */
+
+import {
+  defineComponent,
+  onBeforeUnmount,
+  shallowRef,
+  watch,
+  type PropType,
+} from "vue";
+
+import HkBoard3D, { type Board3DEngine } from "./HkBoard3D";
+import {
+  buildFleetScene,
+  type FleetSceneHandle,
+} from "../scene3d/holographicFleetScene";
+import {
+  buildHolographicFleetSpec,
+  type FleetBodySpec,
+  type StarSystemBodyInput,
+} from "../scene3d/holographicFleetSpec";
+import "./HkStarSystem.scss";
+
+export default defineComponent({
+  name: "HkStarSystem",
+  props: {
+    bodies: {
+      type: Array as PropType<readonly StarSystemBodyInput[]>,
+      required: true,
+    },
+    /** Controlled selection. Remounts restore the cursor without an
+     *  unsolicited camera flight; an explicit change focuses the body. */
+    selectedId: { type: String as PropType<string | null>, default: null },
+    /** CSS2D needs real elements. Host products may localize and enrich
+     *  these chips while the HUD band still uses the body's real fields. */
+    makeLabel: {
+      type: Function as PropType<(body: FleetBodySpec) => HTMLElement>,
+      default: undefined,
+    },
+    makeCoreLabel: {
+      type: Function as PropType<() => HTMLElement>,
+      default: undefined,
+    },
+  },
+  emits: {
+    "update:selectedId": (_id: string | null) => true,
+  },
+  setup(props, { emit, expose, slots }) {
+    const engineRef = shallowRef<Board3DEngine | null>(null);
+    let sceneHandle: FleetSceneHandle | null = null;
+    let handleEngine: Board3DEngine | null = null;
+    let currentSelection: string | null = null;
+
+    function dropScene(): void {
+      sceneHandle?.dispose();
+      sceneHandle = null;
+      handleEngine = null;
+    }
+
+    function defaultLabel(body: FleetBodySpec): HTMLElement {
+      const chip = document.createElement("div");
+      chip.className = "hk-star-system-chip";
+      chip.textContent = [body.label, body.status, body.detail]
+        .filter((part) => part.trim().length > 0)
+        .join(" · ");
+      chip.addEventListener("click", (event) => {
+        event.stopPropagation();
+        selectBody(body.id);
+      });
+      return chip;
+    }
+
+    function defaultCoreLabel(): HTMLElement {
+      const chip = document.createElement("div");
+      chip.className = "hk-star-system-chip is-core";
+      chip.textContent = "Core";
+      return chip;
+    }
+
+    function selectBody(id: string | null): void {
+      const changed = currentSelection !== id;
+      currentSelection = id;
+      sceneHandle?.setSelected(id);
+      // An explicit click on the ALREADY selected body still re-centres it,
+      // matching the original fleet scene; only deselect is idempotent.
+      if (id) sceneHandle?.focusBody(id);
+      else if (changed) sceneHandle?.frameFleet(600);
+      emit("update:selectedId", id);
+    }
+
+    watch(() => props.selectedId, (id) => {
+      if (id === currentSelection) return;
+      currentSelection = id;
+      sceneHandle?.setSelected(id);
+      if (id) sceneHandle?.focusBody(id);
+      else sceneHandle?.frameFleet(600);
+    });
+
+    watch(
+      [engineRef, () => props.bodies],
+      ([engine]) => {
+        if (!engine) return;
+        if (!sceneHandle || handleEngine !== engine) {
+          dropScene();
+          sceneHandle = buildFleetScene(engine, {
+            makeLabel: (body) => props.makeLabel?.(body) ?? defaultLabel(body),
+            registryCoreLabel: () => props.makeCoreLabel?.() ?? defaultCoreLabel(),
+          });
+          handleEngine = engine;
+          // A fresh board restores only the cursor. Focusing here would
+          // hijack a scene → list → scene round trip with a new flight.
+          currentSelection = props.selectedId;
+        }
+
+        const spec = buildHolographicFleetSpec(props.bodies);
+        sceneHandle.update(
+          spec,
+          Object.fromEntries(props.bodies.map((body) => [body.id, !body.online])),
+        );
+
+        const selected = props.selectedId;
+        const stillExists = selected !== null && props.bodies.some((body) => body.id === selected);
+        if (selected && !stillExists) {
+          // update() has already re-anchored/stopped the old follow.
+          currentSelection = null;
+          sceneHandle.setSelected(null);
+          emit("update:selectedId", null);
+        } else {
+          currentSelection = selected;
+          sceneHandle.setSelected(selected);
+        }
+      },
+      { immediate: true, deep: true },
+    );
+
+    onBeforeUnmount(dropScene);
+
+    expose({
+      focusBody(id: string) {
+        selectBody(id);
+      },
+      frameFleet(durationMs?: number): boolean {
+        return sceneHandle?.frameFleet(durationMs) ?? false;
+      },
+    });
+
+    return () => (
+      <HkBoard3D
+        fov={45}
+        minDistance={3}
+        maxDistance={420}
+        transparentBackground
+        initialPosition={[22, -19, 34]}
+        onReady={(engine: Board3DEngine) => {
+          engineRef.value = engine;
+        }}
+        onObjectClick={selectBody}
+      >
+        {{
+          default: () => slots.default?.(),
+          ...(slots.fallback ? { fallback: () => slots.fallback?.() } : {}),
+        }}
+      </HkBoard3D>
+    );
+  },
+});

package/src/components/HkTitleBar.scss

@@ -18,16 +18,17 @@
   --hk-tb-focus: rgb(var(--color-primary, 122 162 247) / 0.6);
   --hk-tb-close-hover: #e81123;
   --hk-tb-close-active: #f1707a;
-  /* The close fill is a FIXED danger red, so its ink is fixed too. Deriving
-     it from the theme's on-solid choice (the default dark preset picks
-     polar-night ink for its pale primary fills) painted a dark X on dark
-     red at roughly 1:1 - the host-visible bug both wowsp and momoi filed.
-     Hosts may override the token as a pair with --hk-tb-close-hover. */
-  --hk-tb-close-ink: #ffffff;
+  /* --hk-tb-close-ink and --hk-tb-icon-size are HOST-CONFIGURABLE, so they
+     are read with fallbacks at their use sites instead of being declared
+     here: a declaration on .hk-titlebar itself would out-rank a value the
+     host sets on :root (local declarations beat inherited ones), which
+     made the tokens look configurable while only the component could win.
+     The close fill is a FIXED danger red, so its ink default is fixed too:
+     deriving it from the theme's on-solid choice (the default dark preset
+     picks polar-night ink for its pale primary fills) painted a dark X on
+     dark red at roughly 1:1 - the host-visible bug both wowsp and momoi
+     filed. */
   --hk-tb-radius-close: 0 8px 0 0;
-  /* Caption glyph size; hosts that want a larger brand mark set the token
-     instead of overriding the icon rule. */
-  --hk-tb-icon-size: 16px;
 
   position: fixed;
   top: 0;
@@ -56,8 +57,8 @@
 }
 
 .hk-titlebar-icon {
-  width: var(--hk-tb-icon-size);
-  height: var(--hk-tb-icon-size);
+  width: var(--hk-tb-icon-size, 16px);
+  height: var(--hk-tb-icon-size, 16px);
   display: block;
   pointer-events: none;
 }
@@ -142,12 +143,12 @@
 
 .hk-titlebar .hk-titlebar-btn-close:hover {
   background: var(--hk-tb-close-hover);
-  color: var(--hk-tb-close-ink);
+  color: var(--hk-tb-close-ink, #ffffff);
 }
 
 .hk-titlebar .hk-titlebar-btn-close:active {
   background: var(--hk-tb-close-active);
-  color: var(--hk-tb-close-ink);
+  color: var(--hk-tb-close-ink, #ffffff);
 }
 
 .hk-titlebar .hk-titlebar-btn:focus-visible {

package/src/components/HkTitleBar.test.tsx

@@ -217,17 +217,20 @@ describe("HkTitleBar stylesheet contract", () => {
     expect(body).toContain("border-radius: var(--hk-tb-radius-close)");
   });
 
-  it("inks the close fill from its own token, never the theme's on-solid", () => {
-    // The fill is a fixed danger red; the ink must be fixed with it. The
+  it("inks the close fill from its own host-configurable token, never the theme's on-solid", () => {
+    // The fill is a fixed danger red; the ink is fixed with it. The
     // theme-derived --hi-color-text-on-danger painted a dark X on dark red
-    // under the default dark preset (the wowsp/momoi field report).
-    const scss = readFileSync(resolve(componentDir, "HkTitleBar.scss"), "utf8");
-    expect(scss).toContain("--hk-tb-close-ink:");
+    // under the default dark preset (the wowsp/momoi field report). The
+    // token is read with its fallback at the use site rather than declared
+    // on .hk-titlebar, so a host's :root assignment actually wins - a local
+    // declaration would beat the inherited value (the momoi follow-up).
     const hover = ruleBody(css, ".hk-titlebar .hk-titlebar-btn-close:hover");
-    expect(hover).toContain("color: var(--hk-tb-close-ink)");
+    expect(hover).toContain("color: var(--hk-tb-close-ink, #ffffff)");
     expect(hover).not.toContain("--hi-color-text-on-danger");
     const active = ruleBody(css, ".hk-titlebar .hk-titlebar-btn-close:active");
-    expect(active).toContain("color: var(--hk-tb-close-ink)");
+    expect(active).toContain("color: var(--hk-tb-close-ink, #ffffff)");
+    const scss = readFileSync(resolve(componentDir, "HkTitleBar.scss"), "utf8");
+    expect(scss).not.toMatch(/^\s*--hk-tb-close-ink:/m);
   });
 
   it("outranks host element rules with caption-scoped buttons", () => {
@@ -240,11 +243,11 @@ describe("HkTitleBar stylesheet contract", () => {
     expect(closeHoverAt).toBeGreaterThan(hoverAt);
   });
 
-  it("sizes the caption icon through its token", () => {
-    const scss = readFileSync(resolve(componentDir, "HkTitleBar.scss"), "utf8");
-    expect(scss).toContain("--hk-tb-icon-size:");
+  it("sizes the caption icon through a host-configurable token", () => {
     const body = ruleBody(css, ".hk-titlebar-icon");
-    expect(body).toContain("width: var(--hk-tb-icon-size)");
-    expect(body).toContain("height: var(--hk-tb-icon-size)");
+    expect(body).toContain("width: var(--hk-tb-icon-size, 16px)");
+    expect(body).toContain("height: var(--hk-tb-icon-size, 16px)");
+    const scss = readFileSync(resolve(componentDir, "HkTitleBar.scss"), "utf8");
+    expect(scss).not.toMatch(/^\s*--hk-tb-icon-size:/m);
   });
 });

package/src/index.ts

@@ -822,6 +822,12 @@ export {
   BOARD3D_HELPERS_LAYER,
   BOARD3D_MAIN_LAYER,
 } from "./components/HkBoard3D";
+export { default as HkStarSystem } from "./components/HkStarSystem";
+export { default as HStarSystem } from "./components/HkStarSystem";
+export type {
+  StarSystemBodyInput as HkStarSystemBodyInput,
+  FleetBodySpec as HkStarSystemBodySpec,
+} from "./scene3d/holographicFleetSpec";
 export { default as HkMinimap3D } from "./components/HkMinimap3D";
 export { default as HkTrendChart } from "./components/HkTrendChart";
 export { default as HkTreemap } from "./components/HkTreemap";

package/src/scene3d/holographicFleetBody.test.ts

@@ -0,0 +1,89 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import * as THREE from "three";
+
+import { fakeAs } from "../test-utils/fakes";
+import {
+  hologramHudText,
+  makeFleetHologram,
+  poseFleetHologram,
+  type FleetHologramInput,
+} from "./holographicFleetBody";
+
+const INPUT: FleetHologramInput = {
+  id: "node-1",
+  label: "node-1 engine stack",
+  status: "Online",
+  detail: "3 endpoints",
+  role: "planet",
+  radius: 1,
+};
+
+function mockCanvas(): ReturnType<typeof vi.fn> {
+  const fillText = vi.fn();
+  const gradient = fakeAs<CanvasGradient>({ addColorStop: vi.fn() });
+  const context = fakeAs<CanvasRenderingContext2D>({
+    clearRect: vi.fn(),
+    fillRect: vi.fn(),
+    fillText,
+    measureText: (text: string) => fakeAs<TextMetrics>({ width: text.length * 24 }),
+    createRadialGradient: () => gradient,
+  });
+  vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(context);
+  return fillText;
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("hologramHudText", () => {
+  it("contains only the real label, current status and supplied detail", () => {
+    expect(hologramHudText(INPUT)).toBe("node-1 engine stack  ·  Online  ·  3 endpoints");
+    expect(hologramHudText({ ...INPUT, status: "Offline", detail: "" }))
+      .toBe("node-1 engine stack  ·  Offline");
+    expect(hologramHudText({ ...INPUT, label: "", status: "", detail: "" }))
+      .toBe("node-1");
+  });
+});
+
+describe("makeFleetHologram", () => {
+  it("draws the real data on the cylindrical band and animates each layer", () => {
+    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();
+    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.
+    const hits: THREE.Intersection[] = [];
+    band?.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", () => {
+    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);
+  });
+});