@celestia-island/hikari 0.55.85 → 0.55.86

package/package.json

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