@celestia-island/hikari 0.55.256 → 0.55.258

package/package.json

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

package/src/components/HkDonutChart.test.tsx

@@ -80,6 +80,25 @@ describe("HkDonutChart", () => {
     expect(empty.querySelector(".hk-donut--empty")).toBeTruthy();
   });
 
+  it("renders the legendIcon slot's glyph in place of the text label", () => {
+    const el = mount(
+      <HkDonutChart
+        entries={ENTRIES}
+        v-slots={{
+          legendIcon: (slice: { key: string }) => <b data-flag={slice.key}>flag</b>,
+        }}
+      />,
+    );
+    const rows = [...el.querySelectorAll(".hk-donut__legend-row")];
+    expect(rows.map((r) => r.querySelector("[data-flag]")?.getAttribute("data-flag"))).toEqual([
+      "dd",
+      "ca",
+      "bb",
+    ]);
+    // the plain-text labels are gone; the color dots stay
+    expect(rows.every((r) => r.querySelector(".hk-donut__legend-dot"))).toBe(true);
+  });
+
   it("carries the chart-level aria label", () => {
     const el = mount(<HkDonutChart entries={ENTRIES} ariaLabel="ship mix" />);
     expect(el.querySelector(".hk-donut")?.getAttribute("aria-label")).toBe("ship mix");

package/src/components/HkDonutChart.tsx

@@ -29,7 +29,9 @@ function defaultFill(i: number): string {
  * o'clock start, clockwise), legend rows that stack in fixed-height
  * columns with percents shown inline, and paired hover focus —
  * hovering a slice or its legend row lifts the pair and dims the
- * block's siblings without rescaling any shape.
+ * block's siblings without rescaling any shape. A scoped `legendIcon`
+ * slot (slice => node) swaps a legend row's text label for a glyph —
+ * nation flags, tier marks — keeping the color dot and the row hint.
  *
  * Entries may carry an explicit `color`; absent entries ride the
  * default primary ladder above. Hints ride the consumer's tooltip
@@ -63,7 +65,7 @@ export default defineComponent({
   emits: {
     select: (key: string) => typeof key === "string",
   },
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const hovered = ref<string | null>(null);
 
     const slices = computed<HkDonutSlice[]>(() =>
@@ -129,7 +131,14 @@ export default defineComponent({
                       onClick={() => emit("select", s.key)}
                     >
                       <span class="hk-donut__legend-dot" style={{ background: s.fill }} />
-                      <span class="hk-donut__legend-label">{s.label}</span>
+                      <span class="hk-donut__legend-label">
+                        {/* legendIcon slot: an optional per-slice glyph
+                         * (flags, tier marks) rendered IN PLACE of the
+                         * text label — the color dot stays, and the row's
+                         * data-hint carries the full slice hint either
+                         * way (wowsp's NationFlag contract). */}
+                        {slots.legendIcon?.(s) ?? s.label}
+                      </span>
                       <span class="hk-donut__legend-pct">{s.percentInt}%</span>
                     </div>
                   ))}

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();
   });