@celestia-island/hikari 0.55.287 → 0.55.288

package/package.json

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

package/src/components/HkCornerBadge.scss

@@ -1,11 +1,18 @@
 /**
- * HkCornerBadge — the generic corner mark (dot / count / label) pinned
- * to one corner of the default-slot anchor (see HkCornerBadge.tsx for
- * the contract). Geometry follows the house pattern the trigger dots
- * and the Rust family's .hk-badge-wrapper established: the anchor is a
- * relative inline-flex wrapper (the badge escapes nothing — hosts wrap
- * ANY child), the mark centers ON the corner via translate(50%,-50%)
- * with an optional --hk-corner-badge-offset clearance.
+ * HkCornerBadge — the generic anchored mark (dot / count / label) for the
+ * default-slot anchor (see HkCornerBadge.tsx for the contract). Geometry
+ * has TWO placement families, selected by `data-placement`:
+ *
+ *   corners (bottom-right / …) OVERLAY the anchor: the anchor is a
+ *   relative inline-flex wrapper (the badge escapes nothing), the mark
+ *   centers ON the corner via translate(±50%) with an optional
+ *   --hk-corner-badge-offset clearance — the subscript mark;
+ *
+ *   sides (`right` / `left`) put the mark in the wrapper's FLOW beside the
+ *   anchor, vertically centered, so the anchor's own box (and text) is
+ *   never covered. The wrapper is already a row; the mark spaces ITSELF
+ *   (margin = --hk-corner-badge-gap + --hk-corner-badge-offset, default
+ *   6px + 0), so a multi-child anchor's own layout is never touched.
  */
 
 .hk-corner-badge-anchor {
@@ -15,41 +22,70 @@
 
 .hk-corner-badge {
   position: absolute;
-  /* Centered on the corner; the corner data-attribute flips the axes
-   * and the offset var adds clearance without re-deriving transforms. */
+  /* Corner placements center ON the corner; the side placement rules
+   * below return the mark to the flow (static, no transform). */
   transform: translate(var(--hk-corner-badge-tx, 50%), var(--hk-corner-badge-ty, -50%));
   pointer-events: none;
   white-space: nowrap;
 }
 
-.hk-corner-badge[data-corner="top-right"] {
+.hk-corner-badge[data-placement="top-right"] {
   top: var(--hk-corner-badge-offset, 0px);
   right: var(--hk-corner-badge-offset, 0px);
   --hk-corner-badge-tx: 50%;
   --hk-corner-badge-ty: -50%;
 }
 
-.hk-corner-badge[data-corner="top-left"] {
+.hk-corner-badge[data-placement="top-left"] {
   top: var(--hk-corner-badge-offset, 0px);
   left: var(--hk-corner-badge-offset, 0px);
   --hk-corner-badge-tx: -50%;
   --hk-corner-badge-ty: -50%;
 }
 
-.hk-corner-badge[data-corner="bottom-right"] {
+.hk-corner-badge[data-placement="bottom-right"] {
   bottom: var(--hk-corner-badge-offset, 0px);
   right: var(--hk-corner-badge-offset, 0px);
   --hk-corner-badge-tx: 50%;
   --hk-corner-badge-ty: 50%;
 }
 
-.hk-corner-badge[data-corner="bottom-left"] {
+.hk-corner-badge[data-placement="bottom-left"] {
   bottom: var(--hk-corner-badge-offset, 0px);
   left: var(--hk-corner-badge-offset, 0px);
   --hk-corner-badge-tx: -50%;
   --hk-corner-badge-ty: 50%;
 }
 
+/* Side placements: the mark rides the wrapper's row. `right` stays after
+ * the anchor (DOM order), `left` flips ahead of it; `align-self` centers
+ * the mark on the row and the mark's own margin spaces it from the anchor,
+ * so the anchor's other children keep their default alignment. The flex
+ * row follows the writing direction, so an RTL host mirrors the side for
+ * free (the house flex-row convention, see HkNumberSteppers). The two
+ * sides are written out separately (rather than one shared rule) so each
+ * side's block stays a single, greppable declaration. */
+.hk-corner-badge[data-placement="right"] {
+  position: static;
+  transform: none;
+  align-self: center;
+  margin-inline-start: calc(
+    var(--hk-corner-badge-gap, var(--space-6, 6px)) +
+      var(--hk-corner-badge-offset, 0px)
+  );
+}
+
+.hk-corner-badge[data-placement="left"] {
+  position: static;
+  transform: none;
+  align-self: center;
+  order: -1;
+  margin-inline-end: calc(
+    var(--hk-corner-badge-gap, var(--space-6, 6px)) +
+      var(--hk-corner-badge-offset, 0px)
+  );
+}
+
 /* Dot form: a filled circle in the variant's tone (same token trio
  * HkBadge uses — variant classes below set all three channels). */
 .hk-corner-badge--dot {

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

@@ -7,9 +7,14 @@ import { describe, expect, it } from "vitest";
 
 /**
  * Compiled-stylesheet guard for HkCornerBadge — the anchoring contract
- * (2026-10-15): the anchor wrapper is a relative inline-flex host (any
- * child can carry the mark), the mark centers ON its corner via
- * translate(±50%,±50%), and each data-corner flips the right axes.
+ * (2026-10-15, two placement families since 2026-11-05): the anchor
+ * wrapper is a relative inline-flex host (any child can carry the mark);
+ * the four CORNER placements overlay it, centering ON the corner via
+ * translate(±50%,±50%) with each data-placement flipping the right axes;
+ * the SIDE placements (`right` / `left`) return the mark to the flow,
+ * centered on the wrapper's row by `align-self: center`, and the mark's
+ * own margin spaces it from the anchor (gap + offset), so the anchor's
+ * own box — and its other children's alignment — is never touched.
  * Vitest stubs CSS, so the runtime suite can never catch a lost rule.
  */
 
@@ -46,10 +51,23 @@ describe("HkCornerBadge stylesheet contract", () => {
   });
 
   it("each corner flips the translate axes", () => {
-    expect(ruleFor('.hk-corner-badge[data-corner=top-right] {')).toContain("--hk-corner-badge-tx: 50%");
-    expect(ruleFor('.hk-corner-badge[data-corner=top-left] {')).toContain("--hk-corner-badge-tx: -50%");
-    expect(ruleFor('.hk-corner-badge[data-corner=bottom-right] {')).toContain("--hk-corner-badge-ty: 50%");
-    expect(ruleFor('.hk-corner-badge[data-corner=bottom-left] {')).toContain("--hk-corner-badge-tx: -50%");
+    expect(ruleFor('.hk-corner-badge[data-placement=top-right] {')).toContain("--hk-corner-badge-tx: 50%");
+    expect(ruleFor('.hk-corner-badge[data-placement=top-left] {')).toContain("--hk-corner-badge-tx: -50%");
+    expect(ruleFor('.hk-corner-badge[data-placement=bottom-right] {')).toContain("--hk-corner-badge-ty: 50%");
+    expect(ruleFor('.hk-corner-badge[data-placement=bottom-left] {')).toContain("--hk-corner-badge-tx: -50%");
+  });
+
+  it("side placements return to the flow and space themselves from the anchor", () => {
+    const right = ruleFor('.hk-corner-badge[data-placement=right] {');
+    expect(right).toContain("position: static");
+    expect(right).toContain("transform: none");
+    expect(right).toContain("align-self: center");
+    expect(right).toContain("margin-inline-start: calc(var(--hk-corner-badge-gap");
+    const left = ruleFor('.hk-corner-badge[data-placement=left] {');
+    expect(left).toContain("position: static");
+    expect(left).toContain("align-self: center");
+    expect(left).toContain("order: -1");
+    expect(left).toContain("margin-inline-end: calc(var(--hk-corner-badge-gap");
   });
 
   it("the dot is round and the pill is a tabular-numbers chip", () => {

package/src/components/HkCornerBadge.test.tsx

@@ -21,7 +21,7 @@ afterEach(() => {
   }
 });
 
-describe("HkCornerBadge — the generic corner mark (2026-10-15)", () => {
+describe("HkCornerBadge — the generic anchored mark (2026-10-15)", () => {
   it("anchors the default slot in a relative wrapper with no mark by default", () => {
     const c = mount(h(HkCornerBadge, null, () => h("button", { class: "probe" }, "x")));
     const anchor = c.querySelector(".hk-corner-badge-anchor")!;
@@ -32,19 +32,34 @@ describe("HkCornerBadge — the generic corner mark (2026-10-15)", () => {
     expect(c.querySelector(".hk-corner-badge")).toBeNull();
   });
 
+  it("defaults to the subscript overlay (bottom-right) exactly like an avatar mark", () => {
+    const c = mount(h(HkCornerBadge, { count: 2 }, () => h("i")));
+    const anchor = c.querySelector(".hk-corner-badge-anchor")!;
+    expect(anchor.getAttribute("data-placement")).toBe("bottom-right");
+    expect(c.querySelector(".hk-corner-badge")!.getAttribute("data-placement")).toBe("bottom-right");
+  });
+
   it("dot form: a variant-colored dot at the requested corner, decorative by default", () => {
     const c = mount(
-      h(HkCornerBadge, { dot: true, variant: "success", corner: "bottom-right" }, () => h("i")),
+      h(HkCornerBadge, { dot: true, variant: "success", placement: "top-right" }, () => h("i")),
     );
     const badge = c.querySelector(".hk-corner-badge")!;
     expect(badge).toBeTruthy();
     expect(badge.className).toContain("hk-corner-badge--dot");
     expect(badge.className).toContain("hk-corner-badge-success");
-    expect(badge.getAttribute("data-corner")).toBe("bottom-right");
+    expect(badge.getAttribute("data-placement")).toBe("top-right");
     expect(badge.getAttribute("aria-hidden")).toBe("true");
     expect(badge.getAttribute("role")).toBeNull();
   });
 
+  it("side placements carry the same data attribute on anchor and mark (button-group default)", () => {
+    const c = mount(
+      h(HkCornerBadge, { count: 4, placement: "right" }, () => h("span", "Active")),
+    );
+    expect(c.querySelector(".hk-corner-badge-anchor")!.getAttribute("data-placement")).toBe("right");
+    expect(c.querySelector(".hk-corner-badge")!.getAttribute("data-placement")).toBe("right");
+  });
+
   it("count form: renders the number, caps past max, hides zero unless showZero", () => {
     const c = mount(h(HkCornerBadge, { count: 7 }, () => h("i")));
     expect(c.querySelector(".hk-corner-badge")!.textContent).toBe("7");

package/src/components/HkCornerBadge.tsx

@@ -13,17 +13,41 @@ export type CornerBadgeVariant =
   | "info"
   | "muted";
 
-/** Which corner of the anchor the mark hangs on. Exported so hosts that
- *  embed the shell (HkTabs' trigger badge) share the one vocabulary
- *  instead of re-spelling the union; HkIconButton's dot borrows the tone
- *  channels but is an inset span of its own, not a corner mark. */
-export type CornerBadgeCorner = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+/**
+ * Where the mark sits relative to the anchor — TWO families, not just
+ * corners (user direction 2026-11-05: a corner overlay on every anchor
+ * was wrong; "（n）" replaced by a badge must not cover the trigger's own
+ * label).
+ *
+ * - `top-right` / `top-left` / `bottom-right` / `bottom-left` OVERLAY the
+ *   anchor: the mark centers ON the anchor's edge (half of it straddles
+ *   the corner) — the classic subscript / notification mark for a fixed
+ *   box (an avatar, an icon button).
+ * - `right` / `left` place the mark BESIDE the anchor in the flow,
+ *   vertically centered, so the anchor's own box (and text) is never
+ *   covered; the wrapper grows to fit both — the button-group / tab
+ *   trigger default.
+ *
+ * Scenario defaults follow the same line: an anchor that can grow (a
+ * trigger inside a button group / tab strip) wants a side placement, a
+ * fixed-box anchor (an avatar) wants the bottom-right overlay. The
+ * component default is `bottom-right` (the subscript mark); hosts whose
+ * scenario is a button group pass `right` as their own default (HkTabs).
+ */
+export type CornerBadgePlacement =
+  | "top-right"
+  | "top-left"
+  | "bottom-right"
+  | "bottom-left"
+  | "right"
+  | "left";
 
 /**
- * HkCornerBadge — the generic corner mark for ANY anchor (user
+ * HkCornerBadge — the generic anchored mark for ANY anchor (user
  * direction 2026-10-15): a green/red/traffic dot, a notification count
- * ("9+"), or a custom text label pinned to one corner of whatever sits
- * in the default slot. The Vue package had every consumer hand-rolling
+ * ("9+"), or a custom text label pinned to a corner of — or beside —
+ * whatever sits in the default slot (see CornerBadgePlacement). The Vue
+ * package had every consumer hand-rolling
  * its own absolute span (the filter/search trigger dots, the icon-group
  * marker, chest's dock time-range pill); this is the one component they
  * converge on — API parity with the Rust family's badge.rs (dot / count
@@ -48,13 +72,18 @@ export default defineComponent({
      *  ANCHOR, never the label — overloading it made every anchored
      *  child's own text leak into the badge. */
     text: { type: String, default: undefined },
-    /** Which corner of the anchor. */
-    corner: {
-      type: String as PropType<CornerBadgeCorner>,
-      default: "top-right",
+    /** Where the mark hangs (see CornerBadgePlacement). The four corners
+     *  overlay the anchor; `right` / `left` sit beside it, vertically
+     *  centered and never covering it. Default `bottom-right` = the
+     *  subscript mark (avatar / icon). Button-group hosts (HkTabs)
+     *  default to `right` instead. */
+    placement: {
+      type: String as PropType<CornerBadgePlacement>,
+      default: "bottom-right",
     },
-    /** Extra clearance from the corner in px (0 = sit ON the corner,
-     * the translate(50%,-50%) centering). */
+    /** Extra clearance in px. Corner placements: clearance from the
+     *  corner (0 = the mark centers ON it via translate(±50%,±50%));
+     *  side placements: the gap beyond the shared --hk-corner-badge-gap. */
     offset: { type: Number, default: 0 },
     /** Accessible name for the mark (without it the badge is
      * aria-hidden decoration). */
@@ -73,7 +102,7 @@ export default defineComponent({
     const show = computed(() => props.dot || text.value !== null);
 
     return () => (
-      <span class="hk-corner-badge-anchor">
+      <span class="hk-corner-badge-anchor" data-placement={props.placement}>
         {slots.default?.()}
         {show.value && (
           <span
@@ -82,7 +111,7 @@ export default defineComponent({
               `hk-corner-badge-${props.variant}`,
               props.dot ? "hk-corner-badge--dot" : "hk-corner-badge--pill",
             ]}
-            data-corner={props.corner}
+            data-placement={props.placement}
             style={props.offset ? { "--hk-corner-badge-offset": `${props.offset}px` } : undefined}
             aria-hidden={props.label ? undefined : "true"}
             role={props.label ? "img" : undefined}

package/src/components/HkFilterTrigger.tsx

@@ -68,7 +68,7 @@ export default defineComponent({
       const label = props.label ?? t("hikari::filterBar.trigger", "Filters");
       return (
         <span ref={anchorRef} class="hk-filter-trigger">
-          <HkCornerBadge dot={active.value} variant="success" corner="bottom-right" offset={1}>
+          <HkCornerBadge dot={active.value} variant="success" placement="bottom-right" offset={1}>
             <HkIconButton
               size={chromeSize.value}
               variant="ghost"

package/src/components/HkSearchTrigger.tsx

@@ -96,7 +96,7 @@ const HkSearchTrigger = defineComponent({
           {/* The active-keyword marker rides the generic corner badge —
            * the same green bottom-right dot the filter trigger wears
            * (2026-10-15: was a hand-rolled primary dot, top-right). */}
-          <HkCornerBadge dot={active.value} variant="success" corner="bottom-right" offset={1}>
+          <HkCornerBadge dot={active.value} variant="success" placement="bottom-right" offset={1}>
           <HkIconButton
             size={chromeSize.value}
             variant="ghost"

package/src/components/HkTabs.test.ts

@@ -691,24 +691,47 @@ describe("HkTabs trigger corner badge", () => {
     return { container };
   }
 
-  it("renders the count through HkCornerBadge inside the trigger (no hand-rolled suffix)", () => {
+  it("renders the count through HkCornerBadge BESIDE the label (side default, no hand-rolled suffix)", () => {
     const { container } = mountBadge({ count: 3, label: "3 items" });
     const trig = container.querySelectorAll<HTMLElement>(".hk-tabs-trigger")[0]!;
-    // The mark is the family's corner-badge pill, anchored bottom-right
-    // (the subscript corner) of the label, not a "(3)" text suffix.
+    // The mark is the family's pill, placed on the BUTTON-GROUP default:
+    // `right` — beside the label, vertically centered, never covering
+    // it (user direction 2026-11-05: the corner overlay read as "歪了/
+    // 盖住了" on a tab trigger). Not a "(3)" text suffix either.
     const mark = trig.querySelector<HTMLElement>(".hk-corner-badge--pill")!;
     expect(mark).not.toBeNull();
     expect(mark.textContent).toBe("3");
-    expect(mark.dataset.corner).toBe("bottom-right");
+    expect(mark.dataset.placement).toBe("right");
+    expect(trig.querySelector(".hk-corner-badge-anchor")!.getAttribute("data-placement")).toBe("right");
     expect(trig.textContent).not.toContain("(3)");
-    // Default clearance: the straddling pill must stay inside the
-    // scroller's 6px vertical clearance below the label (see
-    // TabItem.badge.offset) — the offset var pins that contract.
-    expect(mark.style.getPropertyValue("--hk-corner-badge-offset")).toBe("4px");
+    // Side placement needs no corner clearance: the wrapper gap is the
+    // spacing, so the tab default writes no offset var.
+    expect(mark.style.getPropertyValue("--hk-corner-badge-offset")).toBe("");
+    // Side flow order: the label comes first, the mark after it.
+    const anchor = trig.querySelector(".hk-corner-badge-anchor")!;
+    expect(anchor.firstElementChild!.textContent).toBe("Alpha");
+    expect(anchor.lastElementChild).toBe(mark);
     // The sibling trigger stays badge-free.
     expect(container.querySelectorAll<HTMLElement>(".hk-tabs-trigger")[1]!.querySelector(".hk-corner-badge")).toBeNull();
   });
 
+  it("keeps the explicit corner override, with the corner clearance default", () => {
+    // A host that opts back into the overlay must still get the 4px
+    // clearance the scroller viewport needs (the placement-aware default),
+    // without restating it.
+    const { container } = mountBadge({ count: 3, label: "3 items", placement: "bottom-right" });
+    const mark = container.querySelector<HTMLElement>(".hk-corner-badge--pill")!;
+    expect(mark.dataset.placement).toBe("bottom-right");
+    expect(mark.style.getPropertyValue("--hk-corner-badge-offset")).toBe("4px");
+  });
+
+  it("honours an explicit offset in either placement family", () => {
+    const side = mountBadge({ count: 3, label: "3 items", offset: 2 });
+    const mark = side.container.querySelector<HTMLElement>(".hk-corner-badge--pill")!;
+    expect(mark.dataset.placement).toBe("right");
+    expect(mark.style.getPropertyValue("--hk-corner-badge-offset")).toBe("2px");
+  });
+
   it("keeps zero visible (presence count, not notification noise)", () => {
     const { container } = mountBadge({ count: 0, label: "0 items" });
     const mark = container.querySelector<HTMLElement>(".hk-corner-badge--pill")!;

package/src/components/HkTabs.tsx

@@ -6,7 +6,7 @@ import HkHoverRevealAction from "./HkHoverRevealAction";
 import HkIconButton from "./HkIconButton";
 import HkTransitionContainer from "./HkTransitionContainer";
 import HkCornerBadge from "./HkCornerBadge";
-import type { CornerBadgeCorner, CornerBadgeVariant } from "./HkCornerBadge";
+import type { CornerBadgePlacement, CornerBadgeVariant } from "./HkCornerBadge";
 import { iconByName } from "../composables/iconRegistry";
 import { useI18n } from "../i18n/context";
 import { clearLeaveGeometry, pinLeaveGeometry, type LeaveBoxSnapshot } from "../utils/dom";
@@ -20,34 +20,34 @@ export interface TabItem {
   /** Optional icon vnode rendered before the label (the `icon-${key}`
    *  slot wins when provided). */
   icon?: unknown;
-  /** Corner-count badge rendered on the trigger through HkCornerBadge —
-   *  the ONE sup/sub decoration shell (user direction 2026-11-05:
-   *  hand-rolled "(n)" count suffixes baked into labels are being
-   *  replaced by the standard corner mark, and triggers are badge hosts
-   *  like every other button). Zero stays visible: a tab count is
-   *  presence information (the "（0）" the inline suffix carried), not
-   *  notification noise — pass no badge to hide it entirely. The badge
-   *  anchors the LABEL, so a tab with an empty label renders no badge
-   *  either; pass `label` (an accessible name like "{n} active") or the
-   *  mark is aria-hidden decoration and the count is announced nowhere
-   *  (a DEV warning fires — a silent a11y regression against the inline
-   *  suffix it replaces must at least be loud). */
+  /** Count badge rendered on the trigger through HkCornerBadge — the ONE
+   *  sup/sub decoration shell (user direction 2026-11-05: hand-rolled
+   *  "(n)" count suffixes baked into labels are replaced by the standard
+   *  mark, and triggers are badge hosts like every other button). Zero
+   *  stays visible: a tab count is presence information (the "（0）" the
+   *  inline suffix carried), not notification noise — pass no badge to
+   *  hide it entirely. The badge anchors the LABEL, so a tab with an
+   *  empty label renders no badge either; pass `label` (an accessible
+   *  name like "{n} active") or the mark is aria-hidden decoration and
+   *  the count is announced nowhere (a DEV warning fires — a silent a11y
+   *  regression must at least be loud). */
   badge?: {
     count: number;
     /** "N+" ceiling (HkCornerBadge.max). */
     max?: number;
-    /** Which corner of the LABEL the mark hangs on — the subscript
-     *  corner (bottom-right) by default, per the same direction. */
-    corner?: CornerBadgeCorner;
+    /** Where the mark hangs (HkCornerBadge.placement). Default `right`:
+     *  a tab trigger is a BUTTON-GROUP member, so the mark sits BESIDE
+     *  the label, vertically centered and never covering it (user
+     *  direction 2026-11-05 — the subscript corner overlay read as
+     *  "歪了/盖住了"). Pass a corner only when the host really wants an
+     *  overlay mark on the label. */
+    placement?: CornerBadgePlacement;
     /** Tone channel (HkCornerBadge.variant names, default "primary"). */
     variant?: CornerBadgeVariant;
-    /** Corner clearance in px (HkCornerBadge.offset). Default 4: the
-     *  pill protrudes half its 18px height past the label box, and the
-     *  strip's vertical clearance below the label is trigger padding
-     *  (4px) + list padding (2px) = 6px before the scroller viewport
-     *  clips — offset 4 keeps the protrusion at 5px, inside that
-     *  clearance. 0 sits ON the corner and clips ~3px on the default
-     *  scrollable strip; raise it if your host adds no extra padding. */
+    /** Extra clearance in px (HkCornerBadge.offset). Placement-aware
+     *  default: side marks are already spaced by the wrapper gap, so they
+     *  default to 0; corner marks keep the historical 4 (the pill
+     *  straddles the label and the scroller clips ~6px below it). */
     offset?: number;
     /** Accessible name for the mark — strongly expected (DEV-warned
      *  when missing). */
@@ -569,6 +569,13 @@ export default defineComponent({
         }
         const active = tab.key === props.modelValue;
         const disabled = tab.disabled;
+        // The badge default is placement-aware: a side mark is spaced by
+        // the wrapper (offset 0), a corner mark keeps the clearance that
+        // keeps the straddling pill inside the scroller viewport.
+        const badgePlacement = tab.badge?.placement ?? "right";
+        const badgeOffset =
+          tab.badge?.offset ??
+          (badgePlacement === "right" || badgePlacement === "left" ? 0 : 4);
         // `icon` is a deliberately loose `unknown` on the public item type
         // (hosts may pass vnodes materialized against another vue store);
         // at the render site its documented contract is a render child.
@@ -599,18 +606,20 @@ export default defineComponent({
             {icon}
             {/* The badge anchors the LABEL (inside the trigger's own
              *  padding box) rather than the button box: the mark reads
-             *  as part of the control's silhouette (the HkIconButton
-             *  dot's 2026-10-28 lesson, count form). Clipping is kept
-             *  honest by the offset default: the pill straddles the
-             *  label's corner and the scroller viewport clips at
-             *  6px below the label — see TabItem.badge.offset. */}
+             *  as part of the control's silhouette. A tab is a
+             *  BUTTON-GROUP member, so its default is the side placement
+             *  (`right`, vertically centered): the label keeps its full
+             *  box and the strip grows by the mark + gap — a corner
+             *  overlay straddled the label and read as covering it (user
+             *  report 2026-11-05). Corner placements stay available for
+             *  hosts that want the overlay on purpose. */}
             {tab.label && (tab.badge ? (
               <HkCornerBadge
                 count={tab.badge.count}
                 max={tab.badge.max}
                 showZero
-                corner={tab.badge.corner ?? "bottom-right"}
-                offset={tab.badge.offset ?? 4}
+                placement={badgePlacement}
+                offset={badgeOffset}
                 variant={tab.badge.variant ?? "primary"}
                 label={tab.badge.label}
               >

package/src/index.ts

@@ -201,7 +201,7 @@ export { default as HLogo } from "./components/HkLogo";
 
 // Component types
 export { type BadgeVariant } from "./components/HkBadge";
-export { type CornerBadgeVariant } from "./components/HkCornerBadge";
+export { type CornerBadgePlacement, type CornerBadgeVariant } from "./components/HkCornerBadge";
 export { type BoardNodeInput, type BoardEdgeInput } from "./components/HkBoard";
 export { isSafeHref, safeHref } from "./utils/safeHref";
 export { type BoardAnchorMode, type BoardEdgeStyle, type BoardPoint } from "./utils/boardEdges";

package/src/scene3d/holographicFleetBody.test.ts

@@ -2,6 +2,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import * as THREE from "three";
 
 import { fakeAs } from "../test-utils/fakes";
+import { HIKARI_FONT_SANS } from "../theme/fontContext";
 import {
   hologramHudText,
   makeFleetHologram,
@@ -13,24 +14,81 @@ import {
 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> {
+interface CanvasSpy {
+  fillText: ReturnType<typeof vi.fn>;
+  /** The font currently on the most recently created 2D context. */
+  font: () => string;
+}
+
+/** Font metrics scale with the requested size, like a real canvas: this
+ *  keeps the fit/ellipsis paths testable instead of always fitting at 64px. */
+function mockFontPx(font: string): number {
+  const match = /(\d+)px/.exec(font);
+  return match ? Number(match[1]) : 64;
+}
+
+function mockCanvas(): CanvasSpy {
   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,
+  const stateByCanvas = new WeakMap<HTMLCanvasElement, { font: string }>();
+  let current: { font: string } | null = null;
+  const widthDescriptor = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, "width");
+  const heightDescriptor = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, "height");
+
+  vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockImplementation(function (
+    this: HTMLCanvasElement,
+  ) {
+    const state = { font: "" };
+    stateByCanvas.set(this, state);
+    current = state;
+    const gradient = fakeAs<CanvasGradient>({ addColorStop: vi.fn() });
+    return fakeAs<CanvasRenderingContext2D>({
+      clearRect: vi.fn(),
+      fillRect: vi.fn(),
+      fillText,
+      measureText: (text: string) =>
+        fakeAs<TextMetrics>({ width: text.length * mockFontPx(state.font) * 0.45 }),
+      createRadialGradient: () => gradient,
+      get font() {
+        return state.font;
+      },
+      set font(value: string) {
+        state.font = value;
+      },
+    });
   });
-  vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(context);
-  return fillText;
+
+  // A real canvas resets its 2D state (including the font) whenever width
+  // or height changes. Model that here so "font applied AFTER the resize"
+  // is actually guarded, not just "font assigned once somewhere".
+  const resetState = (canvas: HTMLCanvasElement): void => {
+    const state = stateByCanvas.get(canvas);
+    if (state) state.font = "";
+  };
+  if (widthDescriptor?.set) {
+    vi.spyOn(HTMLCanvasElement.prototype, "width", "set").mockImplementation(function (
+      this: HTMLCanvasElement,
+      value: number,
+    ) {
+      widthDescriptor.set!.call(this, value);
+      resetState(this);
+    });
+  }
+  if (heightDescriptor?.set) {
+    vi.spyOn(HTMLCanvasElement.prototype, "height", "set").mockImplementation(function (
+      this: HTMLCanvasElement,
+      value: number,
+    ) {
+      heightDescriptor.set!.call(this, value);
+      resetState(this);
+    });
+  }
+
+  return { fillText, font: () => current?.font ?? "" };
 }
 
 afterEach(() => {
@@ -38,41 +96,55 @@ afterEach(() => {
 });
 
 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");
+  it("carries the label and detail, never a supplied liveness status", () => {
+    expect(hologramHudText(INPUT)).toBe("node-1 engine stack  ·  3 endpoints");
+    // `status` is no longer part of the HUD input type; a caller that
+    // still spreads the host body must not leak it into the ball.
+    const withStatus = { ...INPUT, status: "Offline", detail: "" };
+    expect(hologramHudText(withStatus)).toBe("node-1 engine stack");
+    expect(hologramHudText({ ...INPUT, label: "", detail: "" })).toBe("node-1");
   });
 });
 
 describe("makeFleetHologram", () => {
-  it("pins the real-data ticker to the centre of the front dial", () => {
-    const fillText = mockCanvas();
+  it("pins the real-data HUD line to the centre of the front dial", () => {
+    const { fillText, font } = mockCanvas();
     const hologram = makeFleetHologram(INPUT, new THREE.Color(0x7fb8dd), false);
 
     expect(hologram.hudTexture).not.toBeNull();
     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
+    // The HUD line 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.
+    // Not vacuous: a blank HUD line must fail here, not just render wrong
+    // text when it renders anything at all. The third argument is the
+    // only legal one — canvas's optional `maxWidth` condenses glyphs and
+    // is exactly the 2026-11-05 defect.
     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");
+      expect(call[0]).toBe("node-1 engine stack  ·  3 endpoints");
+      expect(call).toHaveLength(3);
     }
 
-    // The plane's aspect matches the texture's (1024×96): a mismatched
-    // aspect compresses the glyphs horizontally (R2 S3-1 regression).
+    // The canvas is painted in the host's UI sans stack, not a mono face:
+    // the chip beside the ball and the in-ball line must read as one UI.
+    // The mock clears context state on every canvas resize, so this also
+    // proves the font is re-applied AFTER the dimensions are set (the real
+    // canvas trap), not merely assigned once before them.
+    expect(font()).toBe(`600 64px ${HIKARI_FONT_SANS}`);
+    expect(font()).toContain("sans-serif");
+    expect(font()).not.toContain("monospace");
+
+    // The plane's aspect matches the texture tile's own aspect: a
+    // mismatched aspect compresses the glyphs horizontally.
+    const image = hologram.hudTexture!.image as HTMLCanvasElement;
     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);
+    expect(params.width / params.height).toBeCloseTo(image.width / image.height, 5);
 
     // The text plane never widens the body's pointer target.
     const hits: THREE.Intersection[] = [];
@@ -80,6 +152,52 @@ describe("makeFleetHologram", () => {
     expect(hits).toHaveLength(0);
   });
 
+  it("widens the tile for a long label instead of clipping or condensing", () => {
+    const label = "n".repeat(70);
+    const { fillText, font } = mockCanvas();
+    const hologram = makeFleetHologram(
+      { ...INPUT, label, detail: "" },
+      new THREE.Color(),
+      false,
+    );
+    const image = hologram.hudTexture!.image as HTMLCanvasElement;
+    // 70 glyphs at 46px is the largest uniform size whose natural width
+    // fits the 1504px text box; the tile adds the 96px seam gap.
+    expect(font()).toBe(`600 46px ${HIKARI_FONT_SANS}`);
+    expect(image.width).toBe(1545);
+    const rendered = fillText.mock.calls[0]?.[0] as string;
+    expect(rendered).toBe(label);
+    expect(fillText.mock.calls[0]).toHaveLength(3);
+  });
+
+  it("ellipsizes when even 40px cannot fit the label", () => {
+    const label = "n".repeat(120);
+    const { fillText, font } = mockCanvas();
+    const hologram = makeFleetHologram(
+      { ...INPUT, label, detail: "" },
+      new THREE.Color(),
+      false,
+    );
+    const image = hologram.hudTexture!.image as HTMLCanvasElement;
+    expect(font()).toBe(`600 40px ${HIKARI_FONT_SANS}`);
+    expect(image.width).toBe(1590);
+    const rendered = fillText.mock.calls[0]?.[0] as string;
+    expect(rendered.endsWith("…")).toBe(true);
+    expect(rendered.length).toBeLessThan(label.length);
+    expect(fillText.mock.calls[0]).toHaveLength(3);
+  });
+
+  it("uses a host-provided --font-sans stack for the canvas text", () => {
+    document.documentElement.style.setProperty("--font-sans", '"Host Sans", sans-serif');
+    try {
+      const { font } = mockCanvas();
+      makeFleetHologram(INPUT, new THREE.Color(), false);
+      expect(font()).toBe('600 64px "Host Sans", sans-serif');
+    } finally {
+      document.documentElement.style.removeProperty("--font-sans");
+    }
+  });
+
   it("gives main cores denser dial content than node cores", () => {
     mockCanvas();
     const hub = makeFleetHologram({ ...INPUT, role: "star" }, new THREE.Color(), false);
@@ -311,10 +429,11 @@ describe("makeFleetHologram", () => {
     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);
+    // …and the measured HUD line stays put at the dial's centre: its
+    // band already fits the label, so a scroll would only slice it.
+    expect(hologram.hudTexture?.offset.x).toBe(0);
     poseFleetHologram(hologram, 10, 20, camera.quaternion);
-    expect(hologram.hudTexture?.offset.x).toBeCloseTo(0.18, 6);
+    expect(hologram.hudTexture?.offset.x).toBe(0);
   });
 });
 
@@ -323,7 +442,7 @@ describe("makeSatelliteHologram", () => {
     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.
+    // spindle — the gateway's language, minimal content, no HUD line.
     expect(satellite.getObjectsByProperty("name", "fleet-hologram-face-dial"))
       .toHaveLength(3);
     expect(satellite.getObjectsByProperty("name", "fleet-hologram-ring-spindle-circle"))

package/src/scene3d/holographicFleetBody.ts

@@ -1,7 +1,7 @@
 /**
  * holographicFleetBody — one node's hologram: a spherical shell built from
  * six overlapping face dials plus a fat-centre ring spindle, with ONE
- * detailed camera-facing dial at the front carrying the real-data ticker.
+ * detailed camera-facing dial at the front carrying the real-data HUD line.
  *
  * User direction (2026-10-31): the body must read as a ball of circles
  * from every side — no polyhedron, no solid sphere, no shared wireframe,
@@ -10,15 +10,23 @@
  * get a miniature crossed-dial shell with no text. Every decorative line
  * stays out of raycast picking; the invisible centre proxy remains the
  * node's pointer target.
+ *
+ * User direction (2026-11-05): the HUD line inside the ball is set in the
+ * host's sans UI stack at natural glyph advances — never condensed by
+ * canvas — and carries descriptive data only (no liveness wording such as
+ * "Online"; that stays on the chip and the selection card). The band is
+ * measured from the line and sits still, so nothing is sliced at a wrap
+ * seam either.
  */
 
 import * as THREE from "three";
 
+import { HIKARI_FONT_SANS } from "../theme/fontContext";
 import type { FleetBodySpec } from "./holographicFleetSpec";
 
 export type FleetHologramInput = Pick<
   FleetBodySpec,
-  "id" | "label" | "status" | "detail" | "role" | "radius"
+  "id" | "label" | "detail" | "role" | "radius"
 >;
 
 export interface FleetHologram {
@@ -27,26 +35,115 @@ export interface FleetHologram {
   mesh: THREE.Mesh;
   /** Six faint overlapping face dials: the spherical shell. */
   shell: THREE.Group;
-  /** The detailed camera-facing dial that carries the real-data ticker. */
+  /** The detailed camera-facing dial that carries the real-data HUD line. */
   frontDial: THREE.Group;
   /** Sweeping layer inside the front dial (ticks and arcs rotate here). */
   frontSpinner: THREE.Group;
   /** Circular focus mark, shown while the body is selected. */
   selectionRing: THREE.Group;
-  /** The real-data ticker plane at the front dial's centre. */
+  /** The real-data HUD plane at the front dial's centre. */
   hudPanel: THREE.Mesh | null;
   /** Null only when the host cannot create a 2D canvas (SSR/test DOM). */
   hudTexture: THREE.CanvasTexture | null;
 }
 
-/** The single source of truth for the dial ticker's content. */
+/** The single source of truth for the dial HUD line's content.
+ *  Liveness (`status`) is deliberately absent (user direction 2026-11-05):
+ *  the ball carries the node's descriptive data, while liveness already
+ *  has a home on the chip and the selection card. */
 export function hologramHudText(input: FleetHologramInput): string {
-  return [input.label, input.status, input.detail]
+  return [input.label, input.detail]
     .map((part) => part.trim())
     .filter((part) => part.length > 0)
     .join("  ·  ") || input.id;
 }
 
+/** HUD tile geometry. The width is measured from the live line: a long
+ *  label widens the strip instead of condensing the glyphs. */
+const HUD_TILE_HEIGHT = 96;
+/** The plane's scale reference: a 1024px tile maps to a 1.14×radius band,
+ *  so the glyph height on the ball stays constant as the tile grows. */
+const HUD_REFERENCE_WIDTH = 1024;
+const HUD_MIN_TILE_WIDTH = 640;
+const HUD_MAX_TILE_WIDTH = 1600;
+const HUD_FONT_MAX_PX = 64;
+const HUD_FONT_MIN_PX = 40;
+const HUD_FONT_STEP_PX = 2;
+const HUD_ITEM_GAP_PX = 96;
+
+/** The host applies the canonical UI stack as `--font-sans` during
+ *  bootstrap; reading it keeps canvas text in the same family as the DOM
+ *  around it (and honours a host font override). The exported stack is
+ *  only the fallback for SSR / test DOMs without computed styles. */
+function hudFontFamily(): string {
+  if (typeof document !== "undefined") {
+    try {
+      const declared = getComputedStyle(document.documentElement)
+        .getPropertyValue("--font-sans")
+        .trim();
+      if (declared && !/[;{}]/.test(declared) && !/var\(/i.test(declared)) return declared;
+    } catch {
+      // No computed-style implementation: fall through to the canonical stack.
+    }
+  }
+  return HIKARI_FONT_SANS;
+}
+
+function hudFont(fontPx: number, family: string): string {
+  return `600 ${fontPx}px ${family}`;
+}
+
+/** Cut the line at a code-point boundary when even the smallest HUD size
+ *  cannot hold it, so an emoji or astral character is never split into a
+ *  lone surrogate. Never pass the result to a `maxWidth` argument: this
+ *  function shortens the text, it does not scale glyphs horizontally. */
+function ellipsizeHudText(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  maxWidth: number,
+): string {
+  if (ctx.measureText(text).width <= maxWidth) return text;
+  const characters = Array.from(text);
+  let low = 0;
+  let high = characters.length;
+  while (low < high) {
+    const mid = Math.ceil((low + high) / 2);
+    const candidate = `${characters.slice(0, mid).join("")}…`;
+    if (ctx.measureText(candidate).width <= maxWidth) low = mid;
+    else high = mid - 1;
+  }
+  return `${characters.slice(0, low).join("").trimEnd()}…`;
+}
+
+interface HudTextLayout {
+  fontPx: number;
+  text: string;
+  width: number;
+}
+
+/** Choose the largest uniform font size that fits the tile, then fall back
+ *  to a code-point-boundary ellipsis. Uniform scaling preserves every
+ *  glyph's aspect; only the horizontal `maxWidth` squeeze is banned. */
+function layoutHudText(
+  ctx: CanvasRenderingContext2D,
+  line: string,
+  family: string,
+): HudTextLayout {
+  const maxTextWidth = HUD_MAX_TILE_WIDTH - HUD_ITEM_GAP_PX;
+  for (let px = HUD_FONT_MAX_PX; px >= HUD_FONT_MIN_PX; px -= HUD_FONT_STEP_PX) {
+    ctx.font = hudFont(px, family);
+    const width = ctx.measureText(line).width;
+    if (width <= maxTextWidth) return { fontPx: px, text: line, width };
+  }
+  ctx.font = hudFont(HUD_FONT_MIN_PX, family);
+  const text = ellipsizeHudText(ctx, line, maxTextWidth);
+  return {
+    fontPx: HUD_FONT_MIN_PX,
+    text,
+    width: ctx.measureText(text).width,
+  };
+}
+
 /** Decorative geometry must not become a broad, invisible pointer target. */
 function unpickable<T extends THREE.Object3D>(object: T): T {
   object.raycast = () => undefined;
@@ -278,49 +375,58 @@ function makeRingSpindle(
 
 function makeHudTexture(input: FleetHologramInput): THREE.CanvasTexture | null {
   const canvas = document.createElement("canvas");
-  canvas.width = 1024;
-  canvas.height = 96;
   const ctx = canvas.getContext("2d");
   if (!ctx) return null;
 
+  const family = hudFontFamily();
   const line = hologramHudText(input);
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  // 64px glyphs on the 96px strip: the plane's aspect is locked to the
-  // canvas's below, so on-disc text height is fontPx/canvasW × planeW —
-  // 64/1024 of the band, readable at fleet zoom.
-  ctx.font = "600 64px ui-monospace, SFMono-Regular, Consolas, monospace";
+  const layout = layoutHudText(ctx, line, family);
+  const tileWidth = Math.min(
+    HUD_MAX_TILE_WIDTH,
+    Math.max(HUD_MIN_TILE_WIDTH, Math.ceil(layout.width + HUD_ITEM_GAP_PX)),
+  );
+
+  // Setting the canvas dimensions resets every 2D context state, so the
+  // font and paint state go on AFTER the final size is known.
+  canvas.width = tileWidth;
+  canvas.height = HUD_TILE_HEIGHT;
+  ctx.font = hudFont(layout.fontPx, family);
   ctx.textBaseline = "middle";
+  ctx.textAlign = "left";
   ctx.fillStyle = "#ffffff";
 
-  // A clipped horizontal ticker for the dial's centre (user direction
-  // 2026-10-31: the text belongs to the disc's middle, not a wrapping
-  // ribbon). Long host labels are condensed by canvas rather than
-  // replaced with fabricated data.
-  const maxItemWidth = 610;
-  const measured = ctx.measureText(line).width;
-  const itemWidth = Math.min(maxItemWidth, Math.max(360, measured + 64));
-  for (let x = 24; x < canvas.width; x += itemWidth) {
-    ctx.fillText(line, x, canvas.height / 2, maxItemWidth - 48);
-  }
+  // One natural-width line, centred in a tile that is exactly the band's
+  // width. The band sits still (no offset scroll), so the line is never
+  // sliced at a texture seam. There is deliberately NO `maxWidth`
+  // argument — that is the canvas feature which condensed long labels
+  // and made glyph advances unequal (user direction 2026-11-05).
+  ctx.fillText(
+    layout.text,
+    Math.max(0, (tileWidth - layout.width) / 2),
+    HUD_TILE_HEIGHT / 2,
+  );
 
   const texture = new THREE.CanvasTexture(canvas);
   texture.name = "fleet-hologram-hud-texture";
   texture.colorSpace = THREE.SRGBColorSpace;
-  texture.wrapS = THREE.RepeatWrapping;
   return texture;
 }
 
-/** The real-data ticker plane, pinned to the front dial's centre. The
- *  plane's aspect is locked to the texture's (1024:96) — a mismatched
- *  aspect would compress the glyphs horizontally. */
-function makeTickerPlane(
+/** The real-data HUD plane, pinned to the front dial's centre. The
+ *  plane's aspect is locked to the texture tile's own aspect — the tile
+ *  width is measured from the live label, so the band grows with long
+ *  names and glyphs are never compressed horizontally. */
+function makeHudPlane(
   bodyRadius: number,
   color: THREE.Color,
   offline: boolean,
   texture: THREE.CanvasTexture,
 ): THREE.Mesh {
-  const width = bodyRadius * 1.14;
-  const height = width * (96 / 1024);
+  const image = texture.image as HTMLCanvasElement | undefined;
+  const tileWidth = image?.width ?? HUD_REFERENCE_WIDTH;
+  const tileHeight = image?.height ?? HUD_TILE_HEIGHT;
+  const width = bodyRadius * 1.14 * (tileWidth / HUD_REFERENCE_WIDTH);
+  const height = width * (tileHeight / tileWidth);
   const mesh = unpickable(new THREE.Mesh(
     new THREE.PlaneGeometry(width, height),
     new THREE.MeshBasicMaterial({
@@ -405,7 +511,7 @@ export function makeFleetHologram(
   const hudTexture = makeHudTexture(input);
   let hudPanel: THREE.Mesh | null = null;
   if (hudTexture) {
-    hudPanel = makeTickerPlane(input.radius, color, offline, hudTexture);
+    hudPanel = makeHudPlane(input.radius, color, offline, hudTexture);
     hudPanel.position.z = input.radius * 0.02;
     frontDial.add(hudPanel);
   }
@@ -458,8 +564,9 @@ export function makeSatelliteHologram(
 }
 
 /** Independent motion: the shell turns slowly, the front dial and the
- *  selection ring face the camera, the dial's ticks sweep, and the
- *  real-data ticker scrolls across the disc's centre. */
+ *  selection ring face the camera, and the dial's ticks sweep. The HUD
+ *  line itself sits still at the disc's centre: its band is measured from
+ *  the label, so a scroll would only slice it at the texture seam. */
 export function poseFleetHologram(
   hologram: FleetHologram,
   elapsed: number,
@@ -473,7 +580,4 @@ export function poseFleetHologram(
     hologram.frontDial.quaternion.copy(cameraQuaternion);
     hologram.selectionRing.quaternion.copy(cameraQuaternion);
   }
-  if (hologram.hudTexture) {
-    hologram.hudTexture.offset.x = (elapsed * 0.018) % 1;
-  }
 }

package/src/scene3d/holographicFleetScene.ts

@@ -143,7 +143,7 @@ export function buildFleetScene(
         return;
       }
       // Everything else this builder puts in the scene that owns GPU
-      // resources is a Mesh (pick proxies, dial cores, ticker planes),
+      // resources is a Mesh (pick proxies, dial cores, HUD planes),
       // a Line (dial rings, spindle circles, orbit rings) or Points —
       // all three carry `geometry` + `material`.
       if (