@celestia-island/hikari 0.55.169 → 0.55.170

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.169",
+  "version": "0.55.170",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkAdminHeader.test.tsx

@@ -255,15 +255,31 @@ describe("HkAdminHeader", () => {
     const centre = c.querySelector(".s-admin-header-center");
     expect(centre, "the centre wrapper must render when the slot is provided").not.toBeNull();
     expect(centre?.querySelector(".centre-stub")?.textContent).toBe("filter group");
-    // Wing order: identity (left) → centre → actions (right).
+    // Wing order: identity (left) → centre → actions (right). The wings
+    // carry their chrome class PLUS the shared balanced-grid wing class,
+    // so match per-class instead of whole-className equality.
     const header = c.querySelector("header")!;
     const kids = [...header.children].map((el) => el.className);
-    expect(kids.indexOf("s-admin-header-user")).toBeLessThan(kids.indexOf("s-admin-header-center"));
-    expect(kids.indexOf("s-admin-header-center")).toBeLessThan(kids.indexOf("s-admin-header-actions"));
+    const wingIdx = (cls: string) => kids.findIndex((c) => c.split(/\s+/).includes(cls));
+    expect(wingIdx("s-admin-header-user")).toBeLessThan(wingIdx("s-admin-header-center"));
+    expect(wingIdx("s-admin-header-center")).toBeLessThan(wingIdx("s-admin-header-actions"));
+    // The header hangs the shared balanced-grid contract — the same
+    // geometry the chat frontend's header uses (user report 2026-10-15:
+    // the console strip sat left of centre on phones).
+    expect(header.className).toContain("s-balanced-header");
+    expect(kids.find((c) => c.includes("s-admin-header-user"))).toContain("s-header-wing-start");
+    expect(kids.find((c) => c.includes("s-admin-header-center"))).toContain("s-header-wing-center");
+    expect(kids.find((c) => c.includes("s-admin-header-actions"))).toContain("s-header-wing-end");
   });
 
   it("renders no centre wrapper without the slot (DOM unchanged for hosts that skip it)", () => {
     const c = mount(headerNode({ title: "Providers" }));
     expect(c.querySelector(".s-admin-header-center")).toBeNull();
+    // Centre-less hosts are the MAJORITY of admin pages: the actions wing
+    // must still carry its explicit grid-column class, or auto-placement
+    // drops it into the empty middle track and it drifts to the viewport
+    // centre (R2, 2026-10-15 — the class IS the column).
+    const actions = c.querySelector(".s-admin-header-actions");
+    expect(actions?.className).toContain("s-header-wing-end");
   });
 });

package/src/components/HkAdminHeader.tsx

@@ -162,24 +162,36 @@ export const HkAdminHeader = defineComponent({
       }
     }
 
+    // The header hangs the shared three-zone geometry (grid: two equal
+    // side tracks around a shrinkable centre) — the same contract the
+    // chat frontend top bar uses, so a page header-centre group sits on
+    // the true viewport middle on BOTH faces at every width. (Comment
+    // lives OUTSIDE the class expression: the self-sufficiency audit
+    // reads that expression's literals, and prose apostrophes inside it
+    // parse as string boundaries.)
     return () => (
       <header
         class={[
           "s-glass-header",
+          "s-balanced-header",
           props.compact ? "s-glass-header--compact" : "",
         ]}
       >
-        {props.showHamburger && (
-          <HButton
-            variant="ghost"
-            size="sm"
-            onClick={() => emit("hamburger")}
-          >
-            <Menu size={20} class="s-admin-header-hamburger-icon" />
-          </HButton>
-        )}
-
-        <div ref={userTriggerRef} class="s-admin-header-user">
+        <div ref={userTriggerRef} class="s-admin-header-user s-header-wing-start">
+          {/* The hamburger rides INSIDE the left wing: the balanced grid
+           * above owns the header's columns, and a fourth in-flow child
+           * would fall into the left wing's track and skew every column
+           * after it. Inside the wing it keeps its place (leftmost, ahead
+           * of the avatar) at the wing's own 16px rhythm. */}
+          {props.showHamburger && (
+            <HButton
+              variant="ghost"
+              size="sm"
+              onClick={() => emit("hamburger")}
+            >
+              <Menu size={20} class="s-admin-header-hamburger-icon" />
+            </HButton>
+          )}
           <button
             class="s-admin-header-avatar"
             aria-label={props.avatarTriggerLabel ?? t("hikari::adminHeader.avatarTrigger", "Account menu")}
@@ -284,19 +296,19 @@ export const HkAdminHeader = defineComponent({
         </HkMenu>
 
         {/* Page-owned centre group (page filter tab strips, segmented
-         *  option pickers) — the console face of the balanced-wing
-         *  header the chat frontend's top bar already uses: the left
-         *  and right wings grow from the same flex basis so this group
-         *  stays pinned to the true viewport middle. Rendered only when
-         *  the host provides it, so headers without a centre keep the
-         *  exact DOM they always had. */}
+         *  option pickers) — the console face of the balanced header the
+         *  chat frontend's top bar already uses: the shared grid pins
+         *  this column to the true viewport middle and lets the strip
+         *  slide inside its own box when space runs short. Rendered only
+         *  when the host provides it, so headers without a centre keep
+         *  the exact DOM they always had. */}
         {slots.center && (
-          <div class="s-admin-header-center">
+          <div class="s-admin-header-center s-header-wing-center">
             {slots.center()}
           </div>
         )}
 
-        <div class="s-admin-header-actions">
+        <div class="s-admin-header-actions s-header-wing-end">
           {props.showEmergencyStop && (
             <button
               class={[

package/src/components/adminHeaderChrome.test.ts

@@ -93,20 +93,59 @@ describe("admin header chrome geometry (the two user-requested fixes)", () => {
     const rule = ruleDeclarations(adminTokens, ".s-admin-header-user");
     expect(rule, ".s-admin-header-user must be declared").not.toBeNull();
     expect(rule).toContainEqual(["gap", "var(--space-16)"]);
-    // Balanced left wing (the centre group stays viewport-centred).
-    expect(rule).toContainEqual(["flex", "1 1 0"]);
   });
 
-  it("keeps the actions wing balanced (no margin-left:auto push) and the centre wing shrinkable", () => {
-    const actions = ruleDeclarations(adminTokens, ".s-admin-header-actions");
-    expect(actions, ".s-admin-header-actions must be declared").not.toBeNull();
-    expect(actions).toContainEqual(["flex", "1 1 0"]);
-    expect(actions).toContainEqual(["justify-content", "flex-end"]);
+  it("hangs the shared balanced-header grid contract (the ONE header layout)", () => {
+    // User report 2026-10-15: the console's header-centre tab strip sat
+    // LEFT of centre on phones (drawer mode hides the title, so the left
+    // wing is just the avatar while three icon buttons sit right) while
+    // the frontend's strip read centred — two per-band flex dialects had
+    // drifted from the same idea. Both faces now hang the ONE grid
+    // contract: two EQUAL 1fr side tracks (true centring regardless of
+    // wing content) with min-content floors (wings can never be squeezed
+    // out of existence) around a shrinkable centre column (the strip
+    // slides inside its own box, edge fades + swipe).
+    const balanced = ruleDeclarations(adminTokens, ".s-balanced-header");
+    expect(balanced, ".s-balanced-header must be declared").not.toBeNull();
+    expect(balanced).toContainEqual([
+      "grid-template-columns",
+      "minmax(min-content, 1fr) minmax(0, auto) minmax(min-content, 1fr)",
+    ]);
+    const start = ruleDeclarations(adminTokens, ".s-header-wing-start");
+    expect(start, ".s-header-wing-start must be declared").not.toBeNull();
+    // Each wing names its column EXPLICITLY: with auto-placement a
+    // centre-less host (the vast majority of admin pages — most never
+    // register a centre group) renders only two in-flow children and the
+    // actions wing would fall into the MIDDLE track, drifting to the
+    // viewport centre instead of hugging the right edge (R2, 2026-10-15).
+    expect(start).toContainEqual(["grid-column", "1"]);
+    expect(start).toContainEqual(["justify-self", "start"]);
+    expect(start).toContainEqual(["overflow", "hidden"]);
+    const centre = ruleDeclarations(adminTokens, ".s-header-wing-center");
+    expect(centre, ".s-header-wing-center must be declared").not.toBeNull();
+    // Default stretch, NOT justify-self: center: a centered item sizes by
+    // fit-content, whose min-content floor (the full strip width) punches
+    // the item past a shrunken middle track — the strip would paint over
+    // the wings instead of scrolling inside its own box.
+    expect(centre).toContainEqual(["grid-column", "2"]);
+    expect(centre).toContainEqual(["min-width", "0"]);
+    expect(centre).not.toContainEqual(["justify-self", "center"]);
+    const end = ruleDeclarations(adminTokens, ".s-header-wing-end");
+    expect(end, ".s-header-wing-end must be declared").not.toBeNull();
+    expect(end).toContainEqual(["grid-column", "3"]);
+    expect(end).toContainEqual(["justify-self", "end"]);
+    expect(end).toContainEqual(["overflow", "hidden"]);
+  });
+
+  it("keeps the wings free of their own flex-geometry dialect (the grid owns it)", () => {
+    // The flex era's per-wing declarations must stay gone: any return of
+    // `flex` on a wing re-introduces a second geometry that drifts from
+    // the shared grid (the 2026-10-15 skew).
+    expect(ruleDeclarations(adminTokens, ".s-admin-header-user")).not.toContainEqual(["flex", "1 1 0"]);
+    expect(ruleDeclarations(adminTokens, ".s-admin-header-actions")).not.toContainEqual(["flex", "1 1 0"]);
+    expect(ruleDeclarations(adminTokens, ".s-admin-header-center")).not.toContainEqual(["flex", "0 1 auto"]);
     // The old push would fight the centre wing for the middle.
-    expect(actions).not.toContainEqual(["margin-left", "auto"]);
-    const centre = ruleDeclarations(adminTokens, ".s-admin-header-center");
-    expect(centre, ".s-admin-header-center must be declared").not.toBeNull();
-    expect(centre).toContainEqual(["flex", "0 1 auto"]);
+    expect(ruleDeclarations(adminTokens, ".s-admin-header-actions")).not.toContainEqual(["margin-left", "auto"]);
   });
 
   it("keeps the 28px icon-button step at the theme toggle's own box", () => {
@@ -120,25 +159,20 @@ describe("admin header chrome geometry (the two user-requested fixes)", () => {
     expect(iconButton).toMatch(/PropType<16 \| 24 \| 28 \| 32 \| 36 \| 40>/);
   });
 
-  it("pins the phone band: wings keep their floors, the centre strip owns the overflow", () => {
-    // User report 2026-10-12: on phones the balanced wings (flex 1 1 0 +
-    // min-width 0) were squeezed BELOW the avatar's 28px floor by a wide
-    // centre tab strip, and the strip painted straight over the avatar.
-    // The ≤767px band must pin both wings and hand the leftover to the
-    // centre (mirroring ChatLayout's own phone band) so the strip slides
-    // inside its own box instead of over the avatar.
+  it("keeps the phone band free of ad-hoc wing overrides (one geometry at every width)", () => {
+    // The 2026-10-12 band pinned the wings and handed the leftover to
+    // the centre; it fixed the avatar overlap but skewed the strip off
+    // the viewport middle (user report 2026-10-15). The shared grid's
+    // min-content floors + shrinkable centre column handle phones
+    // intrinsically, so no per-band flex override may come back.
     const userRules = allRuleDeclarations(adminTokens, ".s-admin-header-user");
     const centreRules = allRuleDeclarations(adminTokens, ".s-admin-header-center");
     const actionsRules = allRuleDeclarations(adminTokens, ".s-admin-header-actions");
-    // Exactly one NESTED occurrence (the phone band) per prelude.
-    const phone = (rules: typeof userRules) => rules.filter((r) => r.nested).map((r) => r.decls);
-    expect(phone(userRules)).toHaveLength(1);
-    expect(phone(centreRules)).toHaveLength(1);
-    expect(phone(actionsRules)).toHaveLength(1);
-    expect(phone(userRules)[0]).toContainEqual(["flex", "0 0 auto"]);
-    expect(phone(actionsRules)[0]).toContainEqual(["flex", "0 0 auto"]);
-    expect(phone(centreRules)[0]).toContainEqual(["flex", "1 1 auto"]);
-    expect(phone(centreRules)[0]).toContainEqual(["min-width", "0"]);
-    expect(phone(centreRules)[0]).toContainEqual(["overflow", "hidden"]);
+    for (const [name, rules] of [["user", userRules], ["centre", centreRules], ["actions", actionsRules]] as const) {
+      expect(rules.filter((r) => r.nested), `${name}: no band-nested rules may remain`).toHaveLength(0);
+      for (const r of rules) {
+        expect(r.decls.map((d) => d[0]), `${name}: no flex geometry may remain`).not.toContain("flex");
+      }
+    }
   });
 });

package/src/styles/admin-tokens.scss

@@ -413,6 +413,74 @@
   padding: 0 var(--space-16);
 }
 
+/* ── Balanced header columns (the ONE three-zone header layout) ─────────
+ * The shared geometry behind every top bar that owns a header-centre
+ * group: the frontend chat header (chest ChatLayout's .s-header-bar-*)
+ * and the console header (HkAdminHeader's .s-admin-header-*) both hang
+ * these classes next to their own chrome classes, so the two faces can
+ * never drift apart again (user report 2026-10-15: the console's
+ * header-centre tab strip sat LEFT of centre on phones while the
+ * frontend's strip read centred — two per-band flex dialects had grown
+ * from the same idea).
+ *
+ * Grid, not flex: two EQUAL 1fr side tracks pin the middle column to the
+ * true viewport middle no matter how lopsided the wings' CONTENT is
+ * (avatar-only left vs three icon buttons right — exactly the console's
+ * phone case, where the drawer mode hides the title and the left wing is
+ * just the 28px trigger). Flex wings grow from flex-basis 0, so equal
+ * growth centred the group only while spare space lasted; each band then
+ * grew its own ad-hoc override and each override skewed in SOME band.
+ * `minmax(min-content, 1fr)` gives each wing a hard content floor, so an
+ * overflowing centre column (a wide tab strip) can never squeeze the
+ * avatar/action wings out of existence — the 2026-10-12 phone incident
+ * class — and the centre column is `minmax(0, auto)`, so IT soaks the
+ * squeeze instead: the strip narrows while STAYING centred, and its
+ * internal HkTabs scroller takes over (edge fades + swipe, the frontend
+ * over-wide-strip behavior) without ever covering a wing. */
+.s-balanced-header {
+  display: grid;
+  grid-template-columns: minmax(min-content, 1fr) minmax(0, auto) minmax(min-content, 1fr);
+  align-items: center;
+}
+
+/* Each wing names its column EXPLICITLY: the header's in-flow children are
+ * exactly these three zones (every other child teleports out), but a
+ * centre-less host renders only two of them — with auto-placement the
+ * actions wing would fall into the MIDDLE track and drift to the viewport
+ * centre (R2 finding, 2026-10-15), because the trailing 1fr track would
+ * sit empty. Naming the columns makes the contract positional by class,
+ * not by child order or count: a centre-less header lays out as
+ * [user | empty | actions] exactly like the old flex bar did. */
+.s-header-wing-start {
+  grid-column: 1;
+  justify-self: start;
+  min-width: 0;
+  /* A wing whose content floors exceed its track must not PAINT past the
+   * wing box underneath the centre group (popup surfaces teleport to
+   * body, so clipping here never cuts a menu). */
+  overflow: hidden;
+}
+
+.s-header-wing-center {
+  /* Default stretch, deliberately: the strip must inherit the COLUMN's
+   * shrunken width when the middle track soaks a squeeze, so the HTabs
+   * scroller inside it takes over (edge fades + swipe). justify-self:
+   * center here would size the item by fit-content, whose min-content
+   * floor (= the full strip width) punches the item past the shrunken
+   * track and the strip paints over the wings instead of scrolling.
+   * Centring itself is the tracks' job (equal 1fr sides), not the
+   * item's. */
+  grid-column: 2;
+  min-width: 0;
+}
+
+.s-header-wing-end {
+  grid-column: 3;
+  justify-self: end;
+  min-width: 0;
+  overflow: hidden;
+}
+
 /* ── Admin header chrome (HkAdminHeader) ────────────────────────────────
  * The header's own layout. Every declaration below replaces a utility
  * class the markup used to depend on (`w-7 h-7`, `rounded-full`,
@@ -420,7 +488,10 @@
  * atomic layer rendered the header without them, and a host with one
  * (chest/UnoCSS) owned values the design system could not fix. Values are
  * the verified computed ones (audit 2026-09-15 against chest's generated
- * CSS), so no host's rendering changes. */
+ * CSS), so no host's rendering changes.
+ * The three-zone GEOMETRY itself lives in the shared .s-balanced-header
+ * contract above — the classes below keep only their wing-INTERNAL
+ * layout (row direction, gaps, alignment) and appearance. */
 
 .s-admin-header-user {
   display: flex;
@@ -433,50 +504,15 @@
    * The wing gap here carries the whole distance so the title text
    * lands on the same rhythm as the panel's button content. */
   gap: var(--space-16);
-  /* Balanced left wing (same grammar as ChatLayout's .s-header-bar-left):
-   * grows from the same flex basis as the actions wing so a centre
-   * group, when a page renders one, stays pinned to the true middle. */
-  flex: 1 1 0;
-  min-width: 0;
 }
 
 /* The page-owned centre group (filter tab strips): keeps its natural
- * width and hands overflow to the HTabs scroller inside it. */
+ * width and hands overflow to the HTabs scroller inside it. Column
+ * placement/shrinkage is the shared grid contract's job. */
 .s-admin-header-center {
-  flex: 0 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 0;
-}
-
-
-/* Phone band (≤767px) — mirrors ChatLayout's own ≤767px header band
- * (the console face of the same balanced-wing header). On phones the
- * desktop balanced wings (`flex: 1 1 0` + `min-width: 0`) let a wide
- * centre tab strip squeeze BOTH side wings below their content floors:
- * the avatar wing shrank under its 28px trigger and the strip painted
- * straight over the avatar (user report 2026-10-12, L2 firewall tabs).
- * The frontend's answer — pin both wings, hand the leftover to the
- * centre and let its HTabs scroller own the overflow — is reproduced
- * here in substance: the strip keeps every pixel the avatar and the action
- * buttons don't need, and slides INSIDE its own box (edge fades + scroll
- * limits intact) without ever covering the avatar.
- * Desktop (>767px) keeps the balanced-wing centring untouched. */
-@media (max-width: 767px) {
-  .s-admin-header-user {
-    flex: 0 0 auto;
-  }
-
-  .s-admin-header-actions {
-    flex: 0 0 auto;
-  }
-
-  .s-admin-header-center {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-  }
 }
 
 .s-admin-header-avatar {
@@ -527,13 +563,10 @@
   display: flex;
   align-items: center;
   gap: var(--space-6);
-  /* Balanced right wing: with the user wing at flex 1 1 0 the pair
-   * grows symmetrically, so the centre group stays centred and the
-   * actions still hug the right edge (justify-end replaces the old
-   * margin-left:auto push, which would fight the centre wing). The
-   * automatic min-content floor keeps the icon buttons from being
-   * squeezed below their own width on narrow viewports. */
-  flex: 1 1 0;
+  /* The actions hug the right edge of their grid column (the old
+   * margin-left:auto push fought the centre wing for the middle; the
+   * flex-balanced `1 1 0` era before that skewed whenever the wings'
+   * contents disagreed — the shared grid contract ends both). */
   justify-content: flex-end;
 }