@celestia-island/hikari 0.55.263 → 0.55.264

package/package.json

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

package/src/scene3d/holographicFleetBody.test.ts

@@ -104,6 +104,61 @@ describe("makeFleetHologram", () => {
     // 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 });
+
+    // 2026-10-31 follow-up ("大号的那些不够亮"): the large ones are also
+    // BRIGHTER, not just denser — outer ring, ticks and the equator
+    // spindle ring must all beat their planet-tier twins.
+    const outerRingOpacity = (hologram: ReturnType<typeof makeFleetHologram>) => {
+      const rings = hologram.frontDial.getObjectsByProperty(
+        "name",
+        "fleet-hologram-face-dial-ring",
+      ) as THREE.LineLoop[];
+      return (rings[0]!.material as THREE.LineBasicMaterial).opacity;
+    };
+    const ticksOpacity = (hologram: ReturnType<typeof makeFleetHologram>) =>
+      ((hologram.frontDial.getObjectByName("fleet-hologram-face-dial-ticks") as THREE.LineSegments)
+        .material as THREE.LineBasicMaterial).opacity;
+    const equatorSpindleOpacity = (hologram: ReturnType<typeof makeFleetHologram>) => {
+      const rings = hologram.shell.getObjectsByProperty(
+        "name",
+        "fleet-hologram-ring-spindle-circle",
+      ) as THREE.LineLoop[];
+      const radiusOf = (ring: THREE.LineLoop) => {
+        const pos = ring.geometry.getAttribute("position");
+        return Math.hypot(pos.getX(0), pos.getY(0));
+      };
+      const widest = rings.reduce((best, r) => (radiusOf(r) > radiusOf(best) ? r : best), rings[0]!);
+      return (widest.material as THREE.LineBasicMaterial).opacity;
+    };
+    expect(outerRingOpacity(hub)).toBeGreaterThan(outerRingOpacity(node));
+    expect(ticksOpacity(hub)).toBeGreaterThan(ticksOpacity(node));
+    expect(equatorSpindleOpacity(hub)).toBeGreaterThan(equatorSpindleOpacity(node));
+    // Absolute pins for BOTH tiers (R3 S2 lesson: comparisons alone let a
+    // revert to the dim pre-fix star pass — the star must BURN at these
+    // levels, and the node must hold its own baseline).
+    expect(outerRingOpacity(hub)).toBeCloseTo(0.95, 5);
+    expect(ticksOpacity(hub)).toBeCloseTo(0.78, 5);
+    expect(equatorSpindleOpacity(hub)).toBeCloseTo(0.3, 5);
+    expect(outerRingOpacity(node)).toBeCloseTo(0.66, 5);
+    // And the star dial actually burns: the primary arc is fully lit.
+    const arcs = hub.frontDial.getObjectsByProperty(
+      "name",
+      "fleet-hologram-face-dial-arc",
+    ) as THREE.Line[];
+    expect((arcs[0]!.material as THREE.LineBasicMaterial).opacity).toBe(1);
+
+    // Ceiling guard: every material opacity in EITHER hologram stays
+    // within [0, 1] — brightness tiers must never push past full lit.
+    for (const hologram of [hub, node]) {
+      hologram.group.traverse((obj) => {
+        const material = (obj as THREE.Mesh).material as
+          | (THREE.Material & { opacity?: number })
+          | undefined;
+        if (!material || !("opacity" in material) || material.opacity === undefined) return;
+        expect(material.opacity).toBeLessThanOrEqual(1);
+        expect(material.opacity).toBeGreaterThanOrEqual(0);
+      });
+    }
   });
 
   it("builds the ball from circles only — no solid sphere, no wireframe cage", () => {

package/src/scene3d/holographicFleetBody.ts

@@ -93,26 +93,31 @@ function lineMaterial(color: THREE.Color, opacity: number): THREE.LineBasicMater
 }
 
 /** How much content a dial tier draws (user direction: main cores carry
- *  MORE content than node cores — rings, ticks, arcs — never identical). */
+ *  MORE content than node cores — rings, ticks, arcs — never identical;
+ *  2026-10-31 follow-up: they are also BRIGHTER, not just denser). */
 interface DialTier {
   rings: ReadonlyArray<{ scale: number; opacity: number }>;
   tickCount: number;
+  tickOpacity: number;
   arcs: ReadonlyArray<{ scale: number; start: number; span: number; opacity: number }>;
   core: boolean;
+  coreOpacity: number;
 }
 
 const FOCUS_STAR: DialTier = {
   rings: [
-    { scale: 1, opacity: 0.72 },
-    { scale: 0.64, opacity: 0.3 },
-    { scale: 0.38, opacity: 0.22 },
+    { scale: 1, opacity: 0.95 },
+    { scale: 0.64, opacity: 0.45 },
+    { scale: 0.38, opacity: 0.32 },
   ],
   tickCount: 48,
+  tickOpacity: 0.78,
   arcs: [
-    { scale: 1, start: -0.25, span: Math.PI * 0.62, opacity: 0.94 },
-    { scale: 0.64, start: Math.PI * 0.85, span: Math.PI * 0.2, opacity: 0.62 },
+    { scale: 1, start: -0.25, span: Math.PI * 0.62, opacity: 1 },
+    { scale: 0.64, start: Math.PI * 0.85, span: Math.PI * 0.2, opacity: 0.82 },
   ],
   core: true,
+  coreOpacity: 0.42,
 };
 
 const FOCUS_PLANET: DialTier = {
@@ -121,10 +126,12 @@ const FOCUS_PLANET: DialTier = {
     { scale: 0.52, opacity: 0.26 },
   ],
   tickCount: 28,
+  tickOpacity: 0.58,
   arcs: [
     { scale: 1, start: -0.25, span: Math.PI * 0.5, opacity: 0.9 },
   ],
   core: true,
+  coreOpacity: 0.26,
 };
 
 /** The five non-facing shell faces: an outline and a faint arc only, so
@@ -132,8 +139,10 @@ const FOCUS_PLANET: DialTier = {
 const SUPPORT: DialTier = {
   rings: [{ scale: 1, opacity: 0.28 }],
   tickCount: 0,
+  tickOpacity: 0,
   arcs: [{ scale: 1, start: -0.25, span: Math.PI * 0.62, opacity: 0.34 }],
   core: false,
+  coreOpacity: 0,
 };
 
 function focusTierFor(role: "star" | "planet"): DialTier {
@@ -174,7 +183,7 @@ function makeFaceDial(
         "position",
         new THREE.Float32BufferAttribute(ticks, 3),
       ),
-      lineMaterial(color, offline ? 0.12 : 0.58),
+      lineMaterial(color, offline ? tier.tickOpacity * 0.2 : tier.tickOpacity),
     ));
     tickMarks.name = "fleet-hologram-face-dial-ticks";
     dial.add(tickMarks);
@@ -195,7 +204,7 @@ function makeFaceDial(
       new THREE.MeshBasicMaterial({
         color,
         transparent: true,
-        opacity: offline ? 0.08 : 0.26,
+        opacity: offline ? tier.coreOpacity * 0.3 : tier.coreOpacity,
         side: THREE.DoubleSide,
         depthWrite: false,
         blending: THREE.AdditiveBlending,
@@ -240,21 +249,25 @@ function makeDiscShell(
 /** A stack of concentric circles along the Z axis: fat at the equator,
  *  tapering to thin rings at the poles (user direction 2026-10-31 — this
  *  is the second of the two fused structures; it rounds the shell into a
- *  ball and keeps every side view a set of nested circles). */
+ *  ball and keeps every side view a set of nested circles). `brightness`
+ *  scales the ring opacities so a main core's ball burns brighter than a
+ *  node's without adding clutter (2026-10-31 follow-up). */
 function makeRingSpindle(
   bodyRadius: number,
   color: THREE.Color,
   offline: boolean,
   count: number,
+  brightness = 1,
 ): THREE.Group {
   const spindle = new THREE.Group();
   spindle.name = "fleet-hologram-ring-spindle";
   for (let i = 0; i < count; i += 1) {
     const t = count === 1 ? 0 : -0.97 + (1.94 * i) / (count - 1);
     const radius = bodyRadius * Math.sqrt(Math.max(0, 1 - t * t)) * 0.98;
+    const lit = Math.min(1, (0.08 + (1 - Math.abs(t)) * 0.12) * brightness);
     const loop = unpickable(new THREE.LineLoop(
       xyCircleGeometry(radius, 160),
-      lineMaterial(color, offline ? 0.04 : 0.08 + (1 - Math.abs(t)) * 0.12),
+      lineMaterial(color, offline ? lit * 0.2 : lit),
     ));
     loop.name = "fleet-hologram-ring-spindle-circle";
     loop.position.z = bodyRadius * t;
@@ -371,11 +384,14 @@ export function makeFleetHologram(
   mesh.name = "fleet-hologram-core";
 
   const shell = makeDiscShell(input.radius, color, offline);
+  // A main core's ball BURNS brighter as well as denser (2026-10-31
+  // follow-up): 1.5× spindle brightness on top of the richer dial tier.
   shell.add(makeRingSpindle(
     input.radius,
     color,
     offline,
     input.role === "star" ? 9 : 6,
+    input.role === "star" ? 1.5 : 1,
   ));
   group.add(shell);
 

package/src/scene3d/holographicFleetScene.test.ts

@@ -538,6 +538,36 @@ describe("buildFleetScene teardown", () => {
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
+  it("burns the large bodies' halos brighter than the node baseline", () => {
+    const engine = stubEngine();
+    const handle = buildFleetScene(engine, callbacks());
+    // A hub (star tier) plus a gateway (planet tier, no halo at all).
+    handle.update(buildFleetSceneSpec(ROWS), { "hub-a": false });
+
+    // User direction 2026-10-31 follow-up: the LARGE ones were too dim —
+    // the star halo carries the "burning" read, so pin its level.
+    const starGlow = engine.registered.get("hub-a")!.object
+      .children.find((c): c is THREE.Sprite => c instanceof THREE.Sprite)!;
+    expect((starGlow.material as THREE.SpriteMaterial).opacity).toBeCloseTo(0.5, 5);
+    const planetSprites = engine.registered.get("edge-1")!.object
+      .children.filter((c) => c instanceof THREE.Sprite);
+    expect(planetSprites).toHaveLength(0);
+
+    // The registry core is the largest body on the page: its halo reads
+    // brightest of all.
+    handle.update(buildFleetSceneSpec([{ node_id: "edge-1", tier: 2, station_count: 0 }]), {});
+    const core = engine.registered.get("__star-system-core__")!.object;
+    const coreGlow = core.children.find((c): c is THREE.Sprite => c instanceof THREE.Sprite)!;
+    expect((coreGlow.material as THREE.SpriteMaterial).opacity).toBeCloseTo(0.55, 5);
+
+    // An offline hub dims its halo with it (0.24 = the offline twin).
+    handle.update(buildFleetSceneSpec(ROWS), { "hub-a": true });
+    const darkGlow = engine.registered.get("hub-a")!.object
+      .children.find((c): c is THREE.Sprite => c instanceof THREE.Sprite)!;
+    expect((darkGlow.material as THREE.SpriteMaterial).opacity).toBeCloseTo(0.24, 5);
+    handle.dispose();
+  });
+
   it("frees real HUD textures when a body generation is replaced", () => {
     const gradient = fakeAs<CanvasGradient>({ addColorStop: vi.fn() });
     const context = fakeAs<CanvasRenderingContext2D>({

package/src/scene3d/holographicFleetScene.ts

@@ -201,7 +201,9 @@ export function buildFleetScene(
         map: glowTexture,
         color,
         transparent: true,
-        opacity: offline ? 0.16 : 0.34,
+        // A hub's halo carries its "burning" read (2026-10-31 follow-up:
+        // the large ones were too dim next to their denser dials).
+        opacity: offline ? 0.24 : 0.5,
         blending: THREE.AdditiveBlending,
         depthWrite: false,
       }),
@@ -260,7 +262,9 @@ export function buildFleetScene(
         map: glowTexture,
         color: 0xffe9b8,
         transparent: true,
-        opacity: 0.38,
+        // The registry core is the largest body on the page — its halo
+        // reads brightest (2026-10-31 follow-up).
+        opacity: 0.55,
         blending: THREE.AdditiveBlending,
         depthWrite: false,
       }),