@celestia-island/hikari 0.55.11 → 0.55.13

package/package.json

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

package/src/DemoApp.tsx

@@ -537,13 +537,14 @@ export default defineComponent({
           <h2>HEmptyState</h2>
           <div class="col">
             <HEmptyState
+              boxed
               title="No items"
               description="Nothing to show here yet."
               v-slots={{ action: () => <HButton size="sm">Create item</HButton> }}
             />
             <HEmptyState
               title="Nothing found"
-              description="Search returned no matches — try a different query."
+              description="Bare by default — the host (card/modal/panel) provides the surface; pass boxed when the empty state stands on the page alone."
               icon={PackageOpen}
             />
             <HEmptyState

package/src/components/HkAdminHeader.tsx

@@ -187,6 +187,10 @@ export const HkAdminHeader = defineComponent({
             aria-expanded={props.avatarAction === "menu" ? userMenuOpen.value : undefined}
             onClick={onAvatarClick}
           >
+            {/* Deliberately NO hover veil here: the trigger opens the user
+             *  MENU (the avatar edit lives one row down as the Camera
+             *  item), so a camera overlay would promise click-to-change
+             *  and lie (user report 2026-09-16). */}
             {props.avatarUrl && !avatarFailed.value ? (
               <img
                 src={props.avatarUrl}
@@ -204,11 +208,6 @@ export const HkAdminHeader = defineComponent({
                 {props.username?.charAt(0).toUpperCase() || "?"}
               </span>
             )}
-            {props.avatarAction === "menu" && (
-              <div class="s-admin-header-avatar-veil">
-                <Camera size={10} class="s-admin-header-veil-icon" />
-              </div>
-            )}
           </button>
           {/* WHERE am I — the open view's title, not the nickname. The
               1.5 line-height (in the class) keeps descenders (g, y, p)

package/src/components/HkAdminTablePage.tsx

@@ -53,7 +53,7 @@ export const HkAdminTablePage = defineComponent({
           ) : props.loading && !props.rows.length ? (
             <HSpinner center />
           ) : !props.rows.length ? (
-            <HEmptyState title={emptyTitle} description={props.emptyDescription} />
+            <HEmptyState boxed title={emptyTitle} description={props.emptyDescription} />
           ) : (
             <HCard padded={false}>
               <HTable columns={props.columns} rows={props.rows} rowKey={props.rowKey}>

package/src/components/HkButton.test.tsx

@@ -104,7 +104,7 @@ describe("HkButton click guard", () => {
 
   it("clears the loading state back to a clickable button (aria-busy drops off)", () => {
     const busy = mount(h(HkButton, { loading: true }, () => "x"));
-    expect(busy.querySelector(".hk-spinner")).not.toBeNull();
+    expect(busy.querySelector(".hk-btn-ring")).not.toBeNull();
     const idle = mount(h(HkButton, () => "x"));
     const btn = button(idle);
     expect(idle.querySelector(".hk-spinner")).toBeNull();
@@ -123,7 +123,7 @@ describe("HkButton content slots", () => {
     // Loading swaps the icon out for the spinner — never both.
     const busy = mount(h(HkButton, { icon: "close", loading: true }, () => "x"));
     expect(busy.querySelector(".hk-btn-icon")).toBeNull();
-    expect(busy.querySelector(".hk-spinner")).not.toBeNull();
+    expect(busy.querySelector(".hk-btn-ring")).not.toBeNull();
   });
 
   it("renders the suffix icon slot", () => {

package/src/components/HkButton.tsx

@@ -66,7 +66,51 @@ export default defineComponent({
           aria-busy={props.loading || undefined}
           onClick={(e) => emit("click", e)}
         >
-          {props.loading ? <HSpinner size="xs" tone="current" /> : null}
+          {props.loading ? (
+            /* Loading ring as inline SVG + SMIL: renders identically in
+               WebView2 hosts where CSS-border rings got lost to border-
+               color pipelines or where the animation context suspends CSS
+               animations in rAF-starved background windows (user report
+               2026-09-16: an empty gap where the login ring should be).
+               Stroke follows currentcolor; SMIL rotates independently of
+               the CSS animation suspension switch. */
+            <svg
+              class="hk-btn-ring"
+              viewBox="0 0 16 16"
+              width="14"
+              height="14"
+              aria-hidden="true"
+            >
+              <circle
+                cx="8"
+                cy="8"
+                r="6.5"
+                fill="none"
+                stroke="currentColor"
+                stroke-opacity="0.3"
+                stroke-width="1.8"
+              />
+              <circle
+                cx="8"
+                cy="8"
+                r="6.5"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.8"
+                stroke-linecap="round"
+                stroke-dasharray="30 11"
+              >
+                <animateTransform
+                  attributeName="transform"
+                  type="rotate"
+                  from="0 8 8"
+                  to="360 8 8"
+                  dur="0.7s"
+                  repeatCount="indefinite"
+                />
+              </circle>
+            </svg>
+          ) : null}
           {!props.loading && props.icon ? (
             <span class="hk-btn-icon">
               <HIcon name={props.icon} size={16} />

package/src/components/HkEmptyState.scss

@@ -5,11 +5,17 @@
   justify-content: center;
   padding: var(--space-48, 3rem) var(--space-16, 1rem);
   text-align: center;
+  box-sizing: border-box;
+}
+
+/* The component's own surface. Opt-in (`boxed`): the host — card, modal,
+   panel — usually already provides a surface, and an always-on box turned
+   every in-card empty state into a nested placeholder layer. */
+.hk-empty-state--boxed {
   background: var(--hk-empty-bg, var(--hi-color-surface, rgba(240,244,248,0.95)));
   backdrop-filter: blur(var(--blur-sm, 8px));
   border: 1px solid var(--hi-color-border, rgba(100,100,100,0.06));
   border-radius: var(--radius-md, 0.5rem);
-  box-sizing: border-box;
 }
 
 .hk-empty-icon {

package/src/components/HkEmptyState.surface.contract.test.ts

@@ -0,0 +1,63 @@
+/**
+ * Source contract: the empty state's surface is OPT-IN (`boxed`). The
+ * base `.hk-empty-state` class must stay a bare layout block — the four
+ * surface declarations (background, blur, border, radius) live only in
+ * `.hk-empty-state--boxed`. Pinned because every in-card empty state in
+ * the family reads as a second nested placeholder layer the moment the
+ * surface creeps back into the base class (hikari #567); a class-name
+ * test alone cannot catch that, the compiled contract lives here.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+const SURFACE_PROPERTIES = [
+  "background:",
+  "backdrop-filter:",
+  "border:",
+  "border-radius:",
+] as const;
+
+/** Extract one top-level rule block's body (`{ ... }`) by selector. */
+function ruleBody(css: string, selector: string): string {
+  const start = css.indexOf(`${selector} {`);
+  expect(start, `rule ${selector} present`).toBeGreaterThanOrEqual(0);
+  const open = css.indexOf("{", start);
+  const close = css.indexOf("}", open);
+  return css.slice(open + 1, close);
+}
+
+describe("HkEmptyState surface contract", () => {
+  const css = readFileSync(join(here, "HkEmptyState.scss"), "utf-8");
+
+  it("keeps the base class free of surface declarations", () => {
+    const base = ruleBody(css, ".hk-empty-state");
+    for (const property of SURFACE_PROPERTIES) {
+      expect(base).not.toContain(property);
+    }
+  });
+
+  it("declares the full surface on the opt-in --boxed rule only", () => {
+    const boxed = ruleBody(css, ".hk-empty-state--boxed");
+    for (const property of SURFACE_PROPERTIES) {
+      expect(boxed).toContain(property);
+    }
+    // The surface is the ONLY rule allowed to paint: with the --boxed rule
+    // (and comments, whose prose may name the properties) removed, no
+    // declaration of a surface property may remain anywhere in the sheet.
+    // (The sr-only reset's `border: 0` and box-sizing's `border-box` are
+    // not surfaces — the assertions match the painted forms.)
+    const commentFree = css.replace(/\/\*[\s\S]*?\*\//g, "");
+    const withoutBoxed = commentFree.replace(
+      /\.hk-empty-state--boxed\s*\{[^}]*\}/g,
+      "",
+    );
+    expect(withoutBoxed).not.toContain("background:");
+    expect(withoutBoxed).not.toContain("backdrop-filter:");
+    expect(withoutBoxed).not.toContain("border: 1px");
+    expect(withoutBoxed).not.toContain("border-radius:");
+  });
+});

package/src/components/HkEmptyState.test.tsx

@@ -135,4 +135,16 @@ describe("HkEmptyState", () => {
     expect(cls).toContain("hk-empty-state--fill");
     expect(cls).not.toContain("hk-empty-state--page");
   });
+
+  it("does not draw its own surface by default (the host provides it)", () => {
+    const c = mount(h(HkEmptyState, { title: "x" }));
+    const cls = (c.querySelector(".hk-empty-state") as HTMLElement).className;
+    expect(cls).not.toContain("hk-empty-state--boxed");
+  });
+
+  it("opt-in boxed restores the surface modifier", () => {
+    const c = mount(h(HkEmptyState, { title: "x", boxed: true }));
+    const cls = (c.querySelector(".hk-empty-state") as HTMLElement).className;
+    expect(cls).toContain("hk-empty-state--boxed");
+  });
 });

package/src/components/HkEmptyState.tsx

@@ -19,6 +19,12 @@ export default defineComponent({
       type: String as PropType<"page" | "fill">,
       default: "page",
     },
+    /** Draw the component's own surface (background, border, blur). Off by
+     *  default: most hosts (cards, modals, panels) already provide a
+     *  surface, and a boxed empty state inside them reads as a second
+     *  nested placeholder layer. Set this only when the empty state stands
+     *  directly on the page with no outer frame of its own. */
+    boxed: { type: Boolean, default: false },
   },
   setup(props, { slots }) {
     const { t } = useI18n();
@@ -28,6 +34,7 @@ export default defineComponent({
           "hk-empty-state",
           props.fit === "fill" ? "hk-empty-state--fill" : "hk-empty-state--page",
           props.loading && "hk-empty-state--loading",
+          props.boxed && "hk-empty-state--boxed",
         ]}
         role={props.loading ? "status" : undefined}
         aria-busy={props.loading ? "true" : undefined}