@celestia-island/hikari 0.55.131 → 0.55.133

package/package.json

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

@@ -119,6 +119,12 @@ registerCssAnimation("hk-placeholder-marquee-scroll", { infinite: true });
 registerCssAnimation("s-admin-header-emergency-pulse", { infinite: true });
 registerCssAnimation("hk-loading-veil-in");
 registerCssAnimation("hk-loading-veil-spin", { infinite: true });
+// components/HkPersistentToast.scss — chrome-bar chip spinner (loops
+// forever while the loading tone shows).
+registerCssAnimation("hk-persistent-toast-spin", { infinite: true });
+// components/HkPersistentToast.scss — hover detail card entrance (plays
+// once; hides instantly on close, so no leave keyframe).
+registerCssAnimation("hk-persistent-toast-card-in");
 // The styles/theme/mixins.scss ambient/glow/entrance keyframes were
 // retired with the legacy Gen-1 sheet vendoring (hikari #476) — their
 // registrar entries went with them.

package/src/components/HkPersistentToast.scss

@@ -0,0 +1,143 @@
+// Chrome-bar persistent status chip — proportions match a title-bar
+// loading pill (HkStatusPill's compactness at toast-family semantics).
+// All colors ride the RGB-channel theme tokens so light/dark and the
+// glass/opacity pipelines apply without component-side branching.
+
+.hk-persistent-toast-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  // The wrap owns the live-region semantics; the chip inside may be a
+  // button (chrome no-drag regions only exempt buttons from window
+  // dragging — see the wowsp title bar's interactive() gate).
+  font-size: var(--text-2xs, 0.6875rem);
+  line-height: 1.4;
+}
+
+.hk-persistent-toast {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6, 0.375rem);
+  padding: 2px var(--space-8, 0.5rem);
+  border-radius: var(--radius-full, 999px);
+  border: 1px solid var(--border-faint, rgb(var(--color-border) / 10%));
+  background: rgb(var(--color-surface) / 60%);
+  color: rgb(var(--color-text) / 72%);
+  font: inherit;
+  max-width: 220px;
+  min-width: 0;
+}
+
+// Interactive variant (detail slot provided): a real button — reset the
+// browser chrome, tighten the start padding so the icon optically
+// balances, and give the hover a faint lift like HkTag's interactive
+// cousins.
+button.hk-persistent-toast {
+  cursor: pointer;
+  appearance: none;
+  padding-inline-start: var(--space-6, 0.375rem);
+
+  &:hover {
+    background: rgb(var(--color-surface) / 85%);
+    color: rgb(var(--color-text) / 90%);
+  }
+
+  &:focus-visible {
+    outline: 1px solid rgb(var(--color-primary) / 70%);
+    outline-offset: 1px;
+  }
+}
+
+.hk-persistent-toast__icon {
+  flex-shrink: 0;
+}
+
+.hk-persistent-toast--warning .hk-persistent-toast__icon {
+  color: rgb(var(--color-warning));
+}
+
+.hk-persistent-toast--error .hk-persistent-toast__icon {
+  color: rgb(var(--color-error));
+}
+
+.hk-persistent-toast--info .hk-persistent-toast__icon {
+  color: rgb(var(--color-muted));
+}
+
+.hk-persistent-toast__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Same grammar as HkToast's spinner, sized for the chip and themed via
+// currentColor so the tone classes stay in one place.
+.hk-persistent-toast__spinner {
+  width: 11px;
+  height: 11px;
+  flex-shrink: 0;
+  border: 2px solid rgb(var(--color-text) / 25%);
+  border-top-color: rgb(var(--color-text) / 80%);
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: hk-persistent-toast-spin 0.7s linear infinite;
+}
+
+@keyframes hk-persistent-toast-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.hk-persistent-toast__dismiss {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: rgb(var(--color-text) / 45%);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  padding: 2px;
+  border-radius: var(--radius-full, 999px);
+
+  &:hover {
+    color: rgb(var(--color-text));
+    background: rgb(var(--color-text) / 8%);
+  }
+
+  &:focus-visible {
+    outline: 1px solid rgb(var(--color-primary) / 70%);
+  }
+}
+
+// The detail card: a fixed-position rich surface teleported to body,
+// positioned by the component (below the chip, end-aligned, viewport-
+// clamped). Glass surface rides the shared hii-dropdown-content class;
+// only geometry and motion live here.
+.hk-persistent-toast-card {
+  position: fixed;
+  min-width: 200px;
+  max-width: 340px;
+  padding: var(--space-8, 0.5rem) var(--space-10, 0.75rem);
+  border-radius: var(--radius-lg, 0.5rem);
+  font-size: var(--text-2xs, 0.6875rem);
+  line-height: 1.5;
+  color: rgb(var(--color-text));
+  font-family: inherit;
+  animation: hk-persistent-toast-card-in 120ms ease-out;
+}
+
+@keyframes hk-persistent-toast-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hk-persistent-toast__spinner,
+  .hk-persistent-toast-card {
+    animation: none;
+  }
+}

package/src/components/HkPersistentToast.test.tsx

@@ -0,0 +1,263 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick } from "vue";
+
+import HkPersistentToast from "./HkPersistentToast";
+import { POPUP_Z_BANDS, usePopupManager } from "../runtime/usePopupManager";
+
+/**
+ * HkPersistentToast contract tests:
+ * - inert default: a chip without a detail slot renders a plain span,
+ *   engages no popup-manager entry and exposes no aria-expanded
+ * - hover open/close: detail slot + chip mouseenter opens the rich card
+ *   after the open delay (one tooltip-kind band entry, z stamped
+ *   inline); chip mouseleave closes it after the grace; moving onto the
+ *   card cancels the close (hover continuity is the whole point of the
+ *   rich card — the host list must survive the trip across the gap)
+ * - click pinning: a click pins the card against the grace timer until
+ *   an outside pointerdown / Escape / another click closes it
+ * - dismiss: the ✕ sibling button emits `dismiss` (never nested inside
+ *   the chip button)
+ * - the wrap carries the live-region semantics (role=status +
+ *   aria-live=polite) so label changes announce
+ *
+ * House style: raw createApp mounts on a shared container list torn
+ * down after each case; the popup-manager singleton is REAL state,
+ * swept afterEach the way HkTooltip.test.tsx does.
+ */
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+interface MountOptions {
+  props?: Record<string, unknown>;
+  detail?: string;
+  onDismiss?: () => void;
+}
+
+function mount({ props = {}, detail, onDismiss }: MountOptions = {}) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const host = defineComponent({
+    setup() {
+      return () =>
+        h(
+          HkPersistentToast,
+          { ...props, onDismiss } as never,
+          detail ? { detail: () => h("p", { class: "card-probe" }, detail) } : undefined,
+        );
+    },
+  });
+  const app = createApp(host);
+  app.mount(container);
+  mounts.push({ app, container });
+  return { app, container };
+}
+
+const manager = usePopupManager();
+
+function tooltipEntries() {
+  return [...manager.registry.value.values()].filter((e) => e.kind === "tooltip");
+}
+
+function chip(c: HTMLElement): HTMLElement {
+  return c.querySelector<HTMLElement>(".hk-persistent-toast")!;
+}
+
+function wrap(c: HTMLElement): HTMLElement {
+  return c.querySelector<HTMLElement>(".hk-persistent-toast-wrap")!;
+}
+
+function card(): HTMLElement {
+  return document.querySelector<HTMLElement>(".hk-persistent-toast-card")!;
+}
+
+/** real-timer settle: covers the open/close setTimeout + the rAF position pass */
+async function settle() {
+  await new Promise((r) => setTimeout(r, 20));
+  await nextTick();
+}
+
+function fire(el: Element, type: string, Ctor: typeof MouseEvent = MouseEvent) {
+  el.dispatchEvent(new Ctor(type, { bubbles: true }));
+}
+
+afterEach(() => {
+  vi.useRealTimers();
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  for (const entry of [...manager.registry.value.values()]) {
+    manager.unregister(entry.id);
+  }
+  document.querySelectorAll(".hk-persistent-toast-card").forEach((el) => el.remove());
+});
+
+describe("HkPersistentToast inert default", () => {
+  it("renders label, tone class and live-region semantics as a plain span", () => {
+    const { container } = mount({ props: { tone: "error", label: "Upstream fault" } });
+    const c = chip(container);
+    expect(c.tagName).toBe("SPAN");
+    expect(c.classList.contains("hk-persistent-toast--error")).toBe(true);
+    expect(c.textContent).toContain("Upstream fault");
+    expect(wrap(container).getAttribute("role")).toBe("status");
+    expect(wrap(container).getAttribute("aria-live")).toBe("polite");
+    expect(c.getAttribute("aria-expanded")).toBeNull();
+    expect(tooltipEntries().length).toBe(0);
+    expect(document.querySelector(".hk-persistent-toast-card")).toBeNull();
+  });
+
+  it("renders the spinner for the loading tone", () => {
+    const { container } = mount({ props: { tone: "loading", label: "Loading" } });
+    expect(container.querySelector(".hk-persistent-toast__spinner")).not.toBeNull();
+  });
+
+  it("renders the ✕ sibling button only when dismissible", () => {
+    const onDismiss = vi.fn();
+    const { container } = mount({ props: { label: "x", dismissible: true }, onDismiss });
+    const dismiss = container.querySelector<HTMLElement>(".hk-persistent-toast__dismiss")!;
+    expect(dismiss).not.toBeNull();
+    // The ✕ must never nest inside the chip (a button in a button is
+    // invalid markup).
+    expect(chip(container).contains(dismiss)).toBe(false);
+    dismiss.click();
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders no ✕ when not dismissible", () => {
+    const { container } = mount({ props: { label: "x" } });
+    expect(container.querySelector(".hk-persistent-toast__dismiss")).toBeNull();
+  });
+});
+
+describe("HkPersistentToast detail card", () => {
+  it("opens on hover after the delay and closes after the grace", async () => {
+    const { container } = mount({
+      props: { label: "fault", openDelay: 0, closeGrace: 0, detailLabel: "Failing hosts" },
+      detail: "vortex.wowsgame.cn",
+    });
+    fire(chip(container), "mouseenter");
+    await settle();
+    const c = card();
+    expect(c).not.toBeNull();
+    expect(c.textContent).toContain("vortex.wowsgame.cn");
+    expect(chip(container).getAttribute("aria-expanded")).toBe("true");
+    const entries = tooltipEntries();
+    expect(entries.length).toBe(1);
+    expect(entries[0]!.kind).toBe("tooltip");
+    expect(c.style.zIndex).toBe(String(POPUP_Z_BANDS.tooltip));
+
+    fire(chip(container), "mouseleave");
+    await settle();
+    expect(card()).toBeNull();
+    expect(tooltipEntries().length).toBe(0);
+  });
+
+  it("delays the hover open by openDelay", async () => {
+    const { container } = mount({
+      props: { label: "fault", openDelay: 80, closeGrace: 0 },
+      detail: "hosts",
+    });
+    fire(chip(container), "mouseenter");
+    await nextTick();
+    expect(card()).toBeNull();
+    await new Promise((r) => setTimeout(r, 120));
+    await nextTick();
+    expect(card()).not.toBeNull();
+  });
+
+  it("keeps the card open while the pointer moves onto it", async () => {
+    const { container } = mount({
+      props: { label: "fault", openDelay: 0, closeGrace: 0 },
+      detail: "hosts",
+    });
+    fire(chip(container), "mouseenter");
+    await settle();
+    // Chip → card crossing: the close grace must be cancelled by the
+    // card's own mouseenter, or the host list dies mid-read.
+    fire(chip(container), "mouseleave");
+    fire(card(), "mouseenter");
+    await settle();
+    expect(card()).not.toBeNull();
+    // Leaving the card closes (nothing pinned).
+    fire(card(), "mouseleave");
+    await settle();
+    expect(card()).toBeNull();
+  });
+
+  it("pins on click: grace timer and chip leave cannot close it", async () => {
+    const { container } = mount({
+      props: { label: "fault", openDelay: 0, closeGrace: 0 },
+      detail: "hosts",
+    });
+    fire(chip(container), "mouseenter");
+    await settle();
+    chip(container).click();
+    fire(chip(container), "mouseleave");
+    await settle();
+    expect(card()).not.toBeNull();
+    expect(chip(container).getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("an outside pointerdown closes a pinned card", async () => {
+    const { container } = mount({
+      props: { label: "fault", openDelay: 0, closeGrace: 0 },
+      detail: "hosts",
+    });
+    chip(container).click();
+    await settle();
+    expect(card()).not.toBeNull();
+    document.body.dispatchEvent(
+      new MouseEvent("pointerdown", { bubbles: true }),
+    );
+    await settle();
+    expect(card()).toBeNull();
+  });
+
+  it("a click inside the card does not close a pinned card", async () => {
+    const { container } = mount({
+      props: { label: "fault", openDelay: 0, closeGrace: 0 },
+      detail: "hosts",
+    });
+    chip(container).click();
+    await settle();
+    card().dispatchEvent(new MouseEvent("pointerdown", { bubbles: true }));
+    await settle();
+    expect(card()).not.toBeNull();
+  });
+
+  it("Escape closes a pinned card", async () => {
+    const { container } = mount({
+      props: { label: "fault", openDelay: 0, closeGrace: 0 },
+      detail: "hosts",
+    });
+    chip(container).click();
+    await settle();
+    chip(container).dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+    await settle();
+    expect(card()).toBeNull();
+  });
+
+  it("a second click toggles a pinned card closed", async () => {
+    const { container } = mount({
+      props: { label: "fault", openDelay: 0, closeGrace: 0 },
+      detail: "hosts",
+    });
+    chip(container).click();
+    await settle();
+    chip(container).click();
+    await settle();
+    expect(card()).toBeNull();
+  });
+
+  it("releases the band entry on unmount while open", async () => {
+    const { app, container } = mount({
+      props: { label: "fault", openDelay: 0, closeGrace: 0 },
+      detail: "hosts",
+    });
+    fire(chip(container), "mouseenter");
+    await settle();
+    expect(tooltipEntries().length).toBe(1);
+    app.unmount();
+    expect(tooltipEntries().length).toBe(0);
+  });
+});