@celestia-island/hikari 0.44.0 → 0.45.0

package/package.json

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

@@ -112,6 +112,15 @@ describe("HkAdminHeader", () => {
     expect(barText).not.toContain("alice");
   });
 
+  it("renders the letter fallback on the shared avatar primitive, no outline ring", () => {
+    const c = mount(headerNode({ title: "Providers" }));
+    const btn = avatarButton(c) as HTMLButtonElement;
+    // The old border-2 ring made the console avatar read as a different
+    // control from the chat frontend's (user report 2026-09-12).
+    expect(btn.className).not.toContain("border-2");
+    expect(btn.querySelector(".s-user-avatar")?.textContent).toBe("A");
+  });
+
   it("hides the title node entirely when it is empty", () => {
     const withTitle = mount(headerNode({ title: "Dashboard" }));
     expect(withTitle.textContent).toContain("Dashboard");

package/src/components/HkAdminHeader.tsx

@@ -181,12 +181,7 @@ export const HkAdminHeader = defineComponent({
 
         <div ref={userTriggerRef} class="flex items-center gap-2 min-w-0">
           <button
-            class={[
-              "w-7 h-7 rounded-full overflow-hidden shrink-0 cursor-pointer transition-opacity relative group p-0 border-0",
-              props.avatarUrl
-                ? ""
-                : "bg-primary/10 border-2 border-primary/15 hover:border-primary/30",
-            ]}
+            class="w-7 h-7 rounded-full overflow-hidden shrink-0 cursor-pointer transition-opacity relative group p-0 border-0"
             aria-label={props.avatarTriggerLabel ?? t("hikari::adminHeader.avatarTrigger", "Account menu")}
             aria-haspopup={props.avatarAction === "drawer" ? "dialog" : "menu"}
             aria-expanded={props.avatarAction === "menu" ? userMenuOpen.value : undefined}
@@ -200,7 +195,12 @@ export const HkAdminHeader = defineComponent({
                 onError={() => { avatarFailed.value = true; }}
               />
             ) : (
-              <span class="text-xs font-bold text-primary/70">
+              // Letter fallback on the shared avatar primitive — the
+              // same filled-circle grammar as the chat frontend's
+              // trigger. The old border-2 ring made the console's
+              // avatar read as a different control (user report
+              // 2026-09-12: 前后台头像不一致).
+              <span class="s-user-avatar">
                 {props.username?.charAt(0).toUpperCase() || "?"}
               </span>
             )}

package/src/components/HkMenu.test.ts

@@ -789,6 +789,85 @@ describe("HkMenu sidebar variant", () => {
     expect(container.textContent).toContain("Products");
     expect(container.textContent).not.toContain("General");
   });
+
+  it("renders the header slot above the rows", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const app = createApp({
+      render: () =>
+        h(
+          HkMenu,
+          { variant: "sidebar", open: true, items: navItems },
+          { header: () => h("div", { class: "sidebar-identity" }, "me@example.com") },
+        ),
+    });
+    mounts.push(app);
+    app.mount(container);
+
+    // The identity block leads the same inline surface (drawer account
+    // menu grammar) — first child of the nav, before any row.
+    const nav = container.querySelector(".hk-menu-sidebar");
+    const identity = nav?.querySelector(".sidebar-identity");
+    expect(identity).not.toBeNull();
+    expect(nav!.firstElementChild).toBe(identity);
+  });
+
+  it("renders the check column on rows that opt in (checked !== undefined)", async () => {
+    const selected: string[] = [];
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const app = createApp({
+      render: () =>
+        h(HkMenu, {
+          variant: "sidebar",
+          open: true,
+          items: [
+            {
+              key: "locale",
+              label: "Language",
+              children: [
+                { key: "en", label: "English", checked: false },
+                { key: "zh", label: "中文", checked: true },
+              ],
+            },
+            { key: "logout", label: "Log out", danger: true },
+          ],
+          onSelect: (key: string) => selected.push(key),
+        }),
+    });
+    mounts.push(app);
+    app.mount(container);
+    await settle();
+
+    // Groups default collapsed — expand the locale group.
+    const toggle = container.querySelector(
+      ".hk-menu-sidebar-group-toggle",
+    ) as HTMLButtonElement;
+    toggle.click();
+    await settle();
+
+    const rowOf = (label: string) =>
+      [...container.querySelectorAll(".hk-menu-sidebar-row")].find(
+        (r) => r.textContent?.includes(label),
+      ) as HTMLButtonElement;
+    const en = rowOf("English");
+    const zh = rowOf("中文");
+    const logout = rowOf("Log out");
+
+    // Checked rows carry the cell; true renders the mark, false keeps
+    // the empty placeholder so labels stay aligned. Rows without the
+    // opt-in get no cell at all.
+    expect(en.querySelector(".hk-menu-check")).not.toBeNull();
+    expect(en.querySelector(".hk-menu-check")?.hasAttribute("data-on")).toBe(false);
+    expect(zh.querySelector(".hk-menu-check")?.hasAttribute("data-on")).toBe(true);
+    expect(logout.querySelector(".hk-menu-check")).toBeNull();
+
+    en.click();
+    await settle();
+    expect(selected).toEqual(["en"]);
+  });
 });
 
 describe("HkMenu close linger (leave-transition window)", () => {

package/src/components/HkMenu.tsx

@@ -723,6 +723,7 @@ export default defineComponent({
           class="hk-menu-sidebar-row"
           data-depth={depth || undefined}
           data-active={active || undefined}
+          data-checked={item.checked || undefined}
           data-danger={item.danger || undefined}
           data-disabled={item.disabled || undefined}
           style={
@@ -735,6 +736,15 @@ export default defineComponent({
             emit("select", item.key, item);
           }}
         >
+          {/* Check column on opt-in rows (checked !== undefined): the
+              same fixed cell grammar the popup rows use, so a sidebar
+              locale/account picker shows its active entry in place.
+              false renders the empty placeholder to keep labels aligned. */}
+          {item.checked !== undefined && (
+            <span class="hk-menu-check" data-on={item.checked || undefined} aria-hidden="true">
+              {item.checked ? <Check size={12} /> : null}
+            </span>
+          )}
           {item.icon && (
             <span class="hk-menu-item-icon">{h(item.icon, { size: 16 })}</span>
           )}
@@ -782,6 +792,11 @@ export default defineComponent({
     function renderSidebar() {
       return (
         <nav class="hk-menu-sidebar" aria-label={props.title || "menu"}>
+          {/* Header slot (identity block, section label, …) above the
+              rows — mirrors the popup variant's level-0 header, so an
+              account menu renders the same grammar whether it pops up
+              on desktop or lives inside a drawer on mobile. */}
+          {slots.header?.()}
           {props.items.map((it) => renderSidebarItem(it, 0))}
         </nav>
       );