@celestia-island/hikari 0.55.86 → 0.55.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.86",
+  "version": "0.55.87",
   "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

@@ -247,4 +247,23 @@ describe("HkAdminHeader", () => {
     const c = mount(headerNode({ username: "alice" }));
     expect(c.textContent.toLowerCase()).not.toContain("emergency");
   });
+
+  it("renders the page centre group between the identity and the actions when provided", () => {
+    const c = mount(headerNode({ title: "My tasks" }, {
+      center: () => h("nav", { class: "centre-stub" }, "filter group"),
+    }));
+    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).
+    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"));
+  });
+
+  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();
+  });
 });

package/src/components/HkAdminHeader.tsx

@@ -283,6 +283,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. */}
+        {slots.center && (
+          <div class="s-admin-header-center">
+            {slots.center()}
+          </div>
+        )}
+
         <div class="s-admin-header-actions">
           {props.showEmergencyStop && (
             <button

package/src/components/HkIconButton.tsx

@@ -9,7 +9,12 @@ export default defineComponent({
   props: {
     icon: { type: String, default: "" },
     variant: { type: String as PropType<"ghost" | "primary" | "secondary" | "danger" | "success">, default: "ghost" },
-    size: { type: Number as PropType<16 | 24 | 32 | 36 | 40>, default: 32 },
+    // 28 is the header chrome step: HkThemeToggle's trigger buttons are
+    // 28px boxes with 16px glyphs, so a header action that must read as
+    // "the same kind of button" (global search, the console pages'
+    // refresh) composes at 28 — 24 read visibly smaller beside the toggle
+    // (user report 2026-09-28: 前台全局搜索与主题切换按钮不同尺寸).
+    size: { type: Number as PropType<16 | 24 | 28 | 32 | 36 | 40>, default: 32 },
     disabled: { type: Boolean, default: false },
   },
   emits: {

package/src/components/HkIconButtonVars.scss

@@ -72,6 +72,11 @@
   --hi-icon-button-icon-size: var(--hi-icon-size-xs);
 }
 
+.hk-icon-button-28 {
+  --hi-icon-button-size: 28px;
+  --hi-icon-button-icon-size: var(--hi-icon-size-xs);
+}
+
 .hk-icon-button-32 {
   --hi-icon-button-size: 32px;
   --hi-icon-button-icon-size: var(--hi-icon-size-sm);

package/src/components/adminHeaderChrome.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+/**
+ * Static pins for the admin header's chrome geometry (2026-09-28 user
+ * report, R1 findings b/c: reverting either the avatar→title gap or the
+ * 28px icon-button box kept the whole suite green — the two values the
+ * user explicitly asked for had no red-if-broken evidence). happy-dom
+ * has no layout engine, so — headerAvatarGeometry-style — these read the
+ * declarations themselves; they fail when the values move, disappear or
+ * stop reading the way they read here, and a deliberate rewrite is
+ * expected to update them.
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+/** Declarations of the rule whose prelude IS `selector` (whole-prelude
+ *  match, comments stripped), as [prop, value] pairs; null when absent. */
+function ruleDeclarations(source: string, selector: string): Array<[string, string]> | null {
+  const code = source.replace(/\/\*[\s\S]*?\*\//g, "");
+  for (let at = code.indexOf(selector); at >= 0; at = code.indexOf(selector, at + 1)) {
+    const open = code.indexOf("{", at + selector.length);
+    if (open < 0) continue;
+    if (code.slice(at + selector.length, open).trim() !== "") continue;
+    let boundary = at - 1;
+    while (boundary >= 0 && !"}{;".includes(code[boundary])) boundary -= 1;
+    if (code.slice(boundary + 1, at).replace(/\s+/g, " ").trim() !== "") continue;
+    const body = code.slice(open + 1, code.indexOf("}", open));
+    const out: Array<[string, string]> = [];
+    for (const part of body.split(";")) {
+      const m = /^\s*([-a-zA-Z]+)\s*:\s*([\s\S]+?)\s*$/.exec(part);
+      if (m) out.push([m[1], m[2].replace(/\s+/g, " ")]);
+    }
+    return out;
+  }
+  return null;
+}
+
+const adminTokens = readFileSync(join(here, "..", "styles", "admin-tokens.scss"), "utf8");
+const iconButtonVars = readFileSync(join(here, "HkIconButtonVars.scss"), "utf8");
+const iconButton = readFileSync(join(here, "HkIconButton.tsx"), "utf8");
+
+describe("admin header chrome geometry (the two user-requested fixes)", () => {
+  it("keeps the console title at the panel's visual distance from the avatar (16px wing gap)", () => {
+    // The frontend's workspace button sits a flex gap PLUS its own 8px
+    // inline padding from the avatar (16px visual); the console title
+    // carried only the 8px flex gap and visibly hugged the avatar.
+    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"]);
+    // 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"]);
+  });
+
+  it("keeps the 28px icon-button step at the theme toggle's own box", () => {
+    // HkThemeToggle's trigger buttons are 1.75rem (28px) boxes with 16px
+    // glyphs — the size any header action that must read as the same
+    // kind of button composes at.
+    const rule = ruleDeclarations(iconButtonVars, ".hk-icon-button-28");
+    expect(rule, ".hk-icon-button-28 must be declared").not.toBeNull();
+    expect(rule).toContainEqual(["--hi-icon-button-size", "28px"]);
+    // The component accepts the step.
+    expect(iconButton).toMatch(/PropType<16 \| 24 \| 28 \| 32 \| 36 \| 40>/);
+  });
+});

package/src/styles/admin-tokens.scss

@@ -378,7 +378,28 @@
 .s-admin-header-user {
   display: flex;
   align-items: center;
-  gap: var(--space-8);
+  /* Avatar → title distance mirrors the chat frontend's header left
+   * wing: the panel's workspace button sits a flex gap PLUS its own
+   * 8px inline padding away from the avatar (16px visual), while the
+   * console title had only the flex gap — the console title visibly
+   * hugged the avatar (user report 2026-09-28: 后台标题离头像太近).
+   * 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. */
+.s-admin-header-center {
+  flex: 0 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   min-width: 0;
 }
 
@@ -430,8 +451,14 @@
   display: flex;
   align-items: center;
   gap: var(--space-6);
-  margin-left: auto;
-  flex-shrink: 0;
+  /* 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;
+  justify-content: flex-end;
 }
 
 .s-admin-header-action {