@celestia-island/hikari 0.55.84 → 0.55.86

package/package.json

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

@@ -0,0 +1,38 @@
+/* HkThirdPartySignInCard — the passwordless login card body: the
+ * third-party method list as the card's ONLY content (no credentials
+ * form, no submit button). Everything about the divider, the tile row
+ * and the tiles themselves is owned by HkAuthMethodList.scss and
+ * admin-tokens.scss; this file only re-positions the reused methods
+ * container inside the card body and promotes the tiles one size step.
+ */
+
+/* The body wrapper reuses the `.s-auth-methods` container class — it owns
+   the block's flex-column rhythm, and through the `.s-auth-methods`
+   scope the tile row's centered layout and the tooltip wrappers' flex
+   sizing resolve too. But here the block sits INSIDE the card's
+   `.s-auth-form` body instead of under a credentials form, so the
+   banding that position needs (24px top margin + 8px/2rem padding, put
+   there to separate the divider from a submit button above) collapses
+   away: the body container already owns the padding. The (0,2,0)
+   selector deterministically beats both the container's own (0,1,0)
+   rules (including the ≤480px re-declaration) and the body's generic
+   `.s-auth-form > *` child gap, whatever the stylesheet order is. */
+.s-auth-form .s-auth-third-party-body {
+  margin-top: 0;
+  padding: 0;
+  gap: var(--space-8, 0.5rem);
+  /* Center the block vertically should a consumer give the body more
+     height than the content needs (the card itself still hugs its
+     content); horizontal centering is the tile row's own behavior. */
+  justify-content: center;
+}
+
+/* Primary-flow presence: with the tiles as the card's ONLY content, the
+   standard 44px (2.75rem) alternative-row tile reads undersized next to
+   the card header. One context-scoped step up to 52px — the frame, hover
+   wash, focus ring and icon fit all come from the unchanged tile rules
+   (the icon box is max-100% and follows the frame). */
+.s-auth-third-party-body .s-auth-methods-tile {
+  width: 3.25rem;
+  height: 3.25rem;
+}

package/src/components/HkThirdPartySignInCard.test.tsx

@@ -0,0 +1,178 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h, nextTick } from "vue";
+
+import { HkThirdPartySignInCard } from "./HkThirdPartySignInCard";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  for (const popup of [...document.querySelectorAll(".hk-tooltip-popup")]) popup.remove();
+});
+
+const methods = [
+  { key: "feishu", label: "Feishu" },
+  { key: "github", label: "GitHub" },
+];
+
+describe("HkThirdPartySignInCard", () => {
+  it("renders the auth-card shell with the tiles as the only body content", () => {
+    const c = mount(h(HkThirdPartySignInCard, { title: "Sign in", subtitle: "Welcome back", methods }));
+    expect(c.querySelector(".s-auth-card")).toBeTruthy();
+    expect(c.querySelector(".s-auth-title")?.textContent).toBe("Sign in");
+    expect(c.querySelector(".s-auth-subtitle")?.textContent).toBe("Welcome back");
+    const tiles = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods-tile");
+    expect(tiles.length).toBe(2);
+    // Primary and ONLY content: no credentials form, no submit button.
+    expect(c.querySelector("form")).toBeNull();
+    expect(c.querySelector("button[type='submit']")).toBeNull();
+    expect(c.querySelector(".hk-btn")).toBeNull();
+    // The methods block renders as the card BODY (inside the form-body
+    // container), not as the under-a-form `methods` slot block.
+    const blocks = c.querySelectorAll(".s-auth-methods");
+    expect(blocks.length).toBe(1);
+    expect(blocks[0]!.closest(".s-auth-form")).toBeTruthy();
+  });
+
+  it("forwards the divider text to the method list", () => {
+    const c = mount(
+      h(HkThirdPartySignInCard, { title: "T", divider: "选择登录方式", methods }),
+    );
+    expect(c.querySelector(".s-auth-methods-divider")?.textContent).toContain("选择登录方式");
+  });
+
+  it("emits select with the method key on click", async () => {
+    const picked: string[] = [];
+    const c = mount(
+      h(HkThirdPartySignInCard, {
+        title: "T",
+        methods,
+        onSelect: (key: string) => {
+          picked.push(key);
+        },
+      }),
+    );
+    const tiles = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods-tile");
+    tiles[1]!.click();
+    await nextTick();
+    // Both tiles are asserted so a constant-literal emit cannot ride an
+    // accidental fixture coincidence.
+    tiles[0]!.click();
+    await nextTick();
+    expect(picked).toEqual(["github", "feishu"]);
+  });
+
+  it("disables every tile while loading and swallows clicks", async () => {
+    const picked: string[] = [];
+    const c = mount(
+      h(HkThirdPartySignInCard, {
+        title: "T",
+        methods,
+        loading: true,
+        onSelect: (key: string) => {
+          picked.push(key);
+        },
+      }),
+    );
+    const tiles = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods-tile");
+    expect(tiles.length).toBe(2);
+    for (const tile of tiles) {
+      expect(tile.disabled).toBe(true);
+      tile.click();
+    }
+    await nextTick();
+    expect(picked).toEqual([]);
+  });
+
+  it("renders no tiles for an empty methods list without losing the shell", () => {
+    const c = mount(h(HkThirdPartySignInCard, { title: "T", methods: [] }));
+    expect(c.querySelector(".s-auth-card")).toBeTruthy();
+    expect(c.querySelectorAll(".s-auth-methods-tile").length).toBe(0);
+  });
+
+  it("renders the header logo from logoSrc", () => {
+    const c = mount(h(HkThirdPartySignInCard, { title: "T", logoSrc: "/logo.webp", methods }));
+    const img = c.querySelector(".s-auth-header img") as HTMLImageElement;
+    expect(img.getAttribute("src")).toBe("/logo.webp");
+  });
+
+  it("forwards the top and footer slots", () => {
+    const c = mount(
+      h(HkThirdPartySignInCard, { title: "T", methods }, {
+        top: () => h("div", { id: "top-slot" }, "tabs"),
+        footer: () => h("div", { class: "footer-probe" }, "footer"),
+      }),
+    );
+    const top = c.querySelector("#top-slot") as HTMLElement;
+    expect(top).toBeTruthy();
+    expect(c.querySelector(".s-auth-footer .footer-probe")).toBeTruthy();
+    // The top slot sits above the tiles in the card body.
+    const tiles = c.querySelector(".s-auth-methods-tiles") as HTMLElement;
+    expect(
+      top.compareDocumentPosition(tiles) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+});
+
+// SCSS contract (house pattern, cf. the HkAuthCard methods-block spacing
+// contract): happy-dom does not lay out, so the body re-positioning and
+// the primary-flow tile bump are asserted on the sheet text. Block
+// comments are stripped first so a commented-out declaration cannot
+// satisfy the guard.
+describe("HkThirdPartySignInCard SCSS contract", () => {
+  const here = dirname(fileURLToPath(import.meta.url));
+  const scss = readFileSync(join(here, "./HkThirdPartySignInCard.scss"), "utf-8")
+    .replace(/\/\*[\s\S]*?\*\//g, "");
+
+  it("re-positions the reused methods container as the card body", () => {
+    const rule = scss.match(/\.s-auth-form \.s-auth-third-party-body\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "body re-positioning rule must exist").toBeTruthy();
+    // The under-a-form banding collapses (the body container owns the
+    // padding) and the block centers when the body is taller.
+    expect(rule).toContain("margin-top: 0");
+    expect(rule).toContain("padding: 0");
+    expect(rule).toContain("justify-content: center");
+    expect(rule).toContain("gap: var(--space-8, 0.5rem)");
+  });
+
+  it("promotes the tiles one size step in the primary-flow context", () => {
+    const rule = scss.match(/\.s-auth-third-party-body \.s-auth-methods-tile\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "tile bump rule must exist").toBeTruthy();
+    expect(rule).toContain("width: 3.25rem");
+    expect(rule).toContain("height: 3.25rem");
+  });
+});
+
+describe("HkThirdPartySignInCard public export surface", () => {
+  // 2026-09-28 R1 finding: removing either spelling from index.ts passed
+  // every gate — nothing guarded the barrel. Importing the full barrel in a
+  // test hangs (750+ transitive modules), so the guard is source-pinned:
+  // both export lines must exist verbatim. A dropped line goes red here.
+  it("exports both the canonical Hk* and legacy H* spellings from the barrel", async () => {
+    const { readFile } = await import("node:fs/promises");
+    const { resolve } = await import("node:path");
+    const index = await readFile(resolve(__dirname, "../index.ts"), "utf8");
+    expect(index).toContain(
+      'export { HkThirdPartySignInCard as HkThirdPartySignInCard } from "./components/HkThirdPartySignInCard";',
+    );
+    expect(index).toContain(
+      'export { HkThirdPartySignInCard as HThirdPartySignInCard } from "./components/HkThirdPartySignInCard";',
+    );
+  });
+});

package/src/components/HkThirdPartySignInCard.tsx

@@ -0,0 +1,130 @@
+import { defineComponent } from "vue";
+
+import { HkAuthCard } from "./HkAuthCard";
+import HkAuthMethodList from "./HkAuthMethodList";
+
+import "./HkThirdPartySignInCard.scss";
+
+/**
+ * HkThirdPartySignInCard — the passwordless sign-in card: the auth shell
+ * with third-party method tiles as its PRIMARY and ONLY content.
+ *
+ * For deployments where password login is disabled (the ERP login page in
+ * Feishu-only mode, shittim-chest's org channel), the login UI must show
+ * centered provider buttons and NOTHING else — no username/password
+ * fields, no submit button, no "alternative ways" framing. This card is
+ * that composition: `HkAuthCard` (title/subtitle/logo header) with an
+ * `HkAuthMethodList` rendered into the card's form-body slot, promoted to
+ * primary-flow presence through a context-scoped tile modifier.
+ *
+ * NOTE on `methods`: it is a PROP (the provider array). Unlike HkSignInCard
+ * there is NO `#methods` slot on this card — a slot of that name is silently
+ * ignored; pass the array through the prop.
+ *
+ * Control contract (same split as HkSignInCard): the card owns no state
+ * and never talks to a backend. The consumer passes the provider
+ * `methods` (same item shape as HkAuthMethodList) and binds the OAuth
+ * redirect/popup to `select(key)`; the in-flight state feeds back through
+ * `loading`, which disables every tile for the duration.
+ *
+ * Layout contract: the list renders into the card BODY (`.s-auth-form`
+ * container), NOT the `methods` slot — that slot's top margin and banding
+ * exist to separate "alternative" buttons from a credentials form above,
+ * and would read as dead space with nothing above them. The body wrapper
+ * (`.s-auth-third-party-body`) restores the methods block's own
+ * divider→tile rhythm and centers the row; its scss also scales the tiles
+ * up one step, because the standard 44px "alternative row" tile reads
+ * undersized when it is the whole card.
+ *
+ * Slots: `top` (content between the header and the tiles — channel tabs
+ * and similar; there is no `<form>` to keep it out of), `footer`
+ * (remember-me / protocol rows, forwarded to HkAuthCard's centered
+ * footer group) and `logo` (replaces the `logoSrc` image).
+ *
+ * i18n: hikari ships no dictionary for consumer copy — `title`,
+ * `subtitle` and the `divider` text are all consumer-localized on
+ * purpose, exactly like HkAuthMethodList's divider.
+ *
+ * ```tsx
+ * <HThirdPartySignInCard
+ *   title="Sign in"
+ *   subtitle="Continue with Feishu"
+ *   :logo-src="logo"
+ *   :loading="pending"
+ *   :methods="[{ key: 'feishu', label: 'Feishu', icon: feishuIcon }]"
+ *   @select="(key) => startOAuth(key)"
+ * />
+ * ```
+ */
+export const HkThirdPartySignInCard = defineComponent({
+  name: "HkThirdPartySignInCard",
+  props: {
+    title: { type: String, required: true },
+    subtitle: { type: String, default: "" },
+    /** Optional logo image URL for the card header. */
+    logoSrc: { type: String, default: undefined },
+    /** External in-flight state; disables every tile while true. */
+    loading: { type: Boolean, default: false },
+    /** Optional divider text above the tiles, forwarded to
+     *  HkAuthMethodList (consumer-localized on purpose). */
+    divider: { type: String, default: "" },
+    /** Provider entries, in render order — same item shape as
+     *  HkAuthMethodList's `methods`. */
+    methods: {
+      type: Array as unknown as () => Array<{
+        key: string;
+        /** Accessible name + tooltip text (the hover reveal). */
+        label: string;
+        /** Prebuilt icon vnode rendered inside the framed tile; a
+         *  missing icon falls back to the label's initial. */
+        icon?: unknown;
+        disabled?: boolean;
+      }>,
+      required: true,
+    },
+  },
+  emits: {
+    /** A provider tile was clicked; carries the method `key`. */
+    select: (_key: string) => true,
+  },
+  setup(props, { emit, slots }) {
+    return () => (
+      <HkAuthCard title={props.title} subtitle={props.subtitle}>
+        {{
+          logo: () =>
+            slots.logo ? (
+              slots.logo()
+            ) : props.logoSrc ? (
+              <img class="hk-logo-img" src={props.logoSrc} alt="" style={{ width: "3.5rem", height: "3.5rem" }} />
+            ) : null,
+          default: () => (
+            <>
+              {slots.top?.()}
+              {/* The wrapper carries BOTH classes: `s-auth-methods` is
+                  the container HkAuthMethodList's scoped rules resolve
+                  against (tile-row centering, tooltip-wrapper sizing),
+                  `s-auth-third-party-body` re-positions it as the card
+                  body — see the scss. */}
+              <div class="s-auth-methods s-auth-third-party-body">
+                {/* `loading` maps onto the per-entry disabled flag so the
+                    list itself stays untouched: HkAuthMethodList already
+                    renders disabled tiles dead and click-swallowing. An
+                    entry's own disabled bit survives (OR, not replace). */}
+                <HkAuthMethodList
+                  divider={props.divider}
+                  methods={
+                    props.loading
+                      ? props.methods.map((method) => ({ ...method, disabled: true }))
+                      : props.methods
+                  }
+                  onSelect={(key: string) => emit("select", key)}
+                />
+              </div>
+            </>
+          ),
+          footer: () => slots.footer?.(),
+        }}
+      </HkAuthCard>
+    );
+  },
+});

package/src/index.ts

@@ -472,6 +472,7 @@ export { HkThemeToggle as HThemeToggle, type ThemeItemScope } from "./components
 export { HkAuthCard as HAuthCard } from "./components/HkAuthCard";
 export { default as HAuthMethodList } from "./components/HkAuthMethodList";
 export { HkSignInCard as HSignInCard } from "./components/HkSignInCard";
+export { HkThirdPartySignInCard as HThirdPartySignInCard } from "./components/HkThirdPartySignInCard";
 export { default as HAuthSubmitButton } from "./components/HkAuthSubmitButton";
 export {
   HkMfaVerifyCard as HMfaVerifyCard,
@@ -745,6 +746,7 @@ export { HkNavSidebar as HkNavSidebar } from "./components/HkNavSidebar";
 export { HkThemeToggle as HkThemeToggle } from "./components/HkThemeToggle";
 export { HkAuthCard as HkAuthCard } from "./components/HkAuthCard";
 export { HkSignInCard as HkSignInCard } from "./components/HkSignInCard";
+export { HkThirdPartySignInCard as HkThirdPartySignInCard } from "./components/HkThirdPartySignInCard";
 export { HkMfaVerifyCard as HkMfaVerifyCard } from "./components/HkMfaVerifyCard";
 export { type HkMfaFactor as HkMfaFactor } from "./components/HkMfaVerifyCard";
 export { HkLocalePicker as HkLocalePicker } from "./components/HkLocalePicker";

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;