@celestia-island/hikari 0.55.85 → 0.55.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.85",
+  "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/animation/registerAnimations.ts

@@ -66,6 +66,10 @@ export function isCssAnimationsEnabled(): boolean {
 registerCssAnimation("s-nav-item-badge-pulse", { infinite: true });
 // styles/admin-tokens.scss — auth card entrance (plays once).
 registerCssAnimation("s-auth-card-in");
+// styles/admin-tokens.scss — status-bar recovery flash (plays once):
+// the traffic light's green background blink when a dropped connection
+// comes back.
+registerCssAnimation("s-status-bar-recover-flash");
 // components/HkStatusPill.scss — live-dot pulse (loops forever).
 registerCssAnimation("hk-status-pill-pulse", { infinite: true });
 // components/HkRollingNumber.scss — digit roll-up (plays once, forwards).

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/HkStatusBar.test.tsx

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { createApp, h, nextTick } from "vue";
+import { createApp, h, nextTick, ref } from "vue";
 
 import { HkStatusBar } from "./HkStatusBar";
 import type { HkConnectionInfo } from "./HkConnectionInfo";
@@ -15,6 +15,31 @@ function mountBar(props: Record<string, unknown> = {}) {
   return container;
 }
 
+/** Mount with a reactive connectionStatus the test can drive through
+ *  state transitions (the fixed-props mountBar cannot re-render). */
+type BarStatus = "connected" | "disconnected" | "connecting" | "reconnecting";
+
+function mountReactiveStatus(initial: BarStatus) {
+  const status = ref(initial);
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({
+    render: () =>
+      h(HkStatusBar, {
+        version: "1.2.3",
+        connectionStatus: status.value,
+        connectionInfo: INFO,
+      }),
+  });
+  app.mount(container);
+  mounts.push({ app, container });
+  return { container, status };
+}
+
+function tagOf(container: HTMLElement) {
+  return container.querySelector<HTMLElement>(".s-status-bar-tag")!;
+}
+
 const INFO: HkConnectionInfo = {
   state: "connected",
   tier: "poll",
@@ -221,4 +246,80 @@ describe("HkStatusBar", () => {
     expect(onRetry, "flick is not a tap").not.toHaveBeenCalled();
     expect(document.body.querySelector(".hk-popover-panel")).toBeNull();
   });
+
+  it("stays quiet on the first connect: no recovery class on open", async () => {
+    vi.useFakeTimers();
+    try {
+      // The page-open sequence: connecting → connected for the first
+      // time in this component's life. No flash — the pill goes green
+      // without announcing itself (hosts used to toast here).
+      const { container, status } = mountReactiveStatus("connecting");
+      await nextTick();
+      expect(tagOf(container).className).toContain("s-status-bar-tag-reconnecting");
+      status.value = "connected";
+      await nextTick();
+      expect(tagOf(container).className).not.toContain("s-status-bar-tag-recovered");
+      vi.advanceTimersByTime(1500);
+      await nextTick();
+      expect(tagOf(container).className).not.toContain("s-status-bar-tag-recovered");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("flashes the background once when a dropped connection recovers", async () => {
+    vi.useFakeTimers();
+    try {
+      // Mounted while connected (established), drops, then recovers:
+      // the recovering class rides the pill for the flash window and
+      // is gone after it.
+      const { container, status } = mountReactiveStatus("connected");
+      await nextTick();
+      status.value = "reconnecting";
+      await nextTick();
+      expect(tagOf(container).className).toContain("s-status-bar-tag-reconnecting");
+      status.value = "connected";
+      await nextTick();
+      expect(tagOf(container).className).toContain("s-status-bar-tag-recovered");
+      // Mid-window (t=600ms): the class must still ride the pill — the JS
+      // window (1200ms) has to outlive the 1.1s CSS animation, or the class
+      // would truncate the decay's tail and snap to the resting color.
+      vi.advanceTimersByTime(600);
+      await nextTick();
+      expect(tagOf(container).className).toContain("s-status-bar-tag-recovered");
+      vi.advanceTimersByTime(700);
+      await nextTick();
+      expect(tagOf(container).className).not.toContain("s-status-bar-tag-recovered");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("re-arms the flash on a later drop/recover cycle after the window closes", async () => {
+    vi.useFakeTimers();
+    try {
+      const { container, status } = mountReactiveStatus("connected");
+      await nextTick();
+      status.value = "disconnected";
+      await nextTick();
+      status.value = "connected";
+      await nextTick();
+      expect(tagOf(container).className).toContain("s-status-bar-tag-recovered");
+      vi.advanceTimersByTime(1300);
+      await nextTick();
+      expect(tagOf(container).className).not.toContain("s-status-bar-tag-recovered");
+      // Second cycle AFTER the window closed: the class must come back —
+      // a one-shot sticky flag or a dead timer would leave it dark.
+      status.value = "reconnecting";
+      await nextTick();
+      status.value = "connected";
+      await nextTick();
+      expect(tagOf(container).className).toContain("s-status-bar-tag-recovered");
+      vi.advanceTimersByTime(1300);
+      await nextTick();
+      expect(tagOf(container).className).not.toContain("s-status-bar-tag-recovered");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
 });

package/src/components/HkStatusBar.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, type PropType } from "vue";
+import { defineComponent, onBeforeUnmount, ref, watch, type PropType } from "vue";
 import { Wifi, WifiOff, Globe, Cable, Monitor, Cog, Plug } from "lucide-vue-next";
 
 import { useI18n } from "../i18n/context";
@@ -133,6 +133,38 @@ export const HkStatusBar = defineComponent({
       disconnected: "rgb(var(--color-error))",
     };
 
+    // ── Recovery flash ─────────────────────────────────────────────
+    // One soft green background blink when the light RETURNS to green
+    // after a drop (reconnecting/connecting/disconnected → connected).
+    // The FIRST connect of the component's life stays quiet: the flash
+    // acknowledges a connection the user saw go down, it is not an
+    // open-time announcement (hosts used to fire a toast for exactly
+    // this moment; the light now owns that feedback, quietly).
+    // `seenConnected` seeds from the initial prop so a component that
+    // mounts while already connected still counts as established and a
+    // LATER drop/recover pair flashes.
+    const RECOVER_FLASH_MS = 1200;
+    const seenConnected = ref(props.connectionStatus === "connected");
+    const recovering = ref(false);
+    let recoverTimer: ReturnType<typeof setTimeout> | null = null;
+
+    watch(() => props.connectionStatus, (next) => {
+      if (next !== "connected") return;
+      const wasEstablished = seenConnected.value;
+      seenConnected.value = true;
+      if (!wasEstablished) return;
+      if (recoverTimer) clearTimeout(recoverTimer);
+      recovering.value = true;
+      recoverTimer = setTimeout(() => {
+        recovering.value = false;
+        recoverTimer = null;
+      }, RECOVER_FLASH_MS);
+    });
+
+    onBeforeUnmount(() => {
+      if (recoverTimer) clearTimeout(recoverTimer);
+    });
+
     function onTagEnter() {
       if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }
       popupOpen.value = true;
@@ -244,9 +276,11 @@ export const HkStatusBar = defineComponent({
       // + value column), so both rows share one true left edge — no
       // separator, no mid-token wrapping, at any footer width.
 
-      const tagClass = connecting
-        ? "s-status-bar-tag s-status-bar-tag-reconnecting"
-        : "s-status-bar-tag";
+      const tagClass = [
+        "s-status-bar-tag",
+        connecting ? "s-status-bar-tag-reconnecting" : "",
+        recovering.value ? "s-status-bar-tag-recovered" : "",
+      ].filter(Boolean).join(" ");
 
       const inner = (
         <>

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

@@ -225,6 +225,37 @@
   transition: background var(--duration-short), width var(--duration-short) var(--ease-standard);
 }
 
+/* One soft green blink when the light recovers: the pill background
+   pulses from a success tint down to the resting surface colour
+   exactly once, then hands the property back. The transient peak sits
+   slightly above the reconnecting tint's resting intensity so both
+   states read as one family; first connects never get it (see
+   HkStatusBar's seenConnected guard). Reduced-motion users get the
+   plain state switch instead. */
+.s-status-bar-tag-recovered {
+  animation: s-status-bar-recover-flash 1.1s var(--ease-standard) 1;
+}
+
+@keyframes s-status-bar-recover-flash {
+  0% {
+    background: rgb(var(--color-success) / 22%);
+  }
+
+  55% {
+    background: rgb(var(--color-success) / 10%);
+  }
+
+  100% {
+    background: rgb(var(--color-surface));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .s-status-bar-tag-recovered {
+    animation: none;
+  }
+}
+
 .s-status-bar-retry {
   display: inline-flex;
   align-items: center;
@@ -347,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;
 }
 
@@ -399,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 {