@celestia-island/hikari 0.4.4 → 0.30.0

package/src/animation/registerAnimations.ts

@@ -0,0 +1,103 @@
+// CSS animation registrar (动画注册商).
+//
+// Every keyframes animation shipped by hikari is registered here so a
+// single global switch can suspend them all — e.g. when the animation
+// context detects performance problems — without each component
+// re-implementing reduced-motion handling. The runtime frame scheduler
+// (`runtime/animationBus.ts`) covers JS-driven animation; this registry
+// complements it for pure-CSS animations.
+//
+// The switch works by flipping `html[data-css-animations]` between "0"
+// and "1"; the pause rules live in `theme/theme.scss`.
+
+export interface CssAnimationOptions {
+  /** True for looping animations (`animation-iteration-count: infinite`). */
+  infinite?: boolean;
+}
+
+export interface RegisteredCssAnimation {
+  name: string;
+  infinite: boolean;
+}
+
+const registry = new Map<string, RegisteredCssAnimation>();
+
+/**
+ * Register a CSS keyframes animation. Idempotent: re-registering the
+ * same name overwrites the previous entry.
+ */
+export function registerCssAnimation(name: string, opts?: CssAnimationOptions): RegisteredCssAnimation {
+  const entry: RegisteredCssAnimation = { name, infinite: opts?.infinite ?? false };
+  registry.set(name, entry);
+  return entry;
+}
+
+/** All registered CSS animations, sorted by name for stable output. */
+export function listCssAnimations(): RegisteredCssAnimation[] {
+  return Array.from(registry.values()).sort((a, b) => a.name.localeCompare(b.name));
+}
+
+/**
+ * Flip the global CSS animation switch. `false` sets
+ * `html[data-css-animations="0"]`, which pauses every registered (and
+ * any unregistered) keyframes animation via `animation-play-state` and
+ * downgrades smooth scrolling — see `theme/theme.scss`.
+ *
+ * No-op on the server (no `document`).
+ */
+export function setCssAnimationsEnabled(enabled: boolean): void {
+  if (typeof document === "undefined") return;
+  document.documentElement.dataset.cssAnimations = enabled ? "1" : "0";
+}
+
+/** Current switch state; `true` when animations are enabled (or unknown). */
+export function isCssAnimationsEnabled(): boolean {
+  if (typeof document === "undefined") return true;
+  return document.documentElement.dataset.cssAnimations !== "0";
+}
+
+// ── Centralized registrations ────────────────────────────────────────
+// One line per keyframes animation declared under packages/vue/src, with
+// the owning component noted. Keep this list in sync with the SCSS
+// sources — `registerAnimations.test.ts` enforces the parity by parsing
+// every `@keyframes` declaration from the source tree.
+
+// styles/admin-tokens.scss — nav badge pulse (loops forever).
+registerCssAnimation("s-nav-item-badge-pulse", { infinite: true });
+// styles/admin-tokens.scss — auth card entrance (plays once).
+registerCssAnimation("s-auth-card-in");
+// components/HkStatusPill.scss — live-dot pulse (loops forever).
+registerCssAnimation("hk-status-pill-pulse", { infinite: true });
+// components/HkRollingNumber.scss — digit roll-up (plays once, forwards).
+registerCssAnimation("hk-rolling-number-up");
+// components/HkSpinner.scss — spinner rotation (loops forever).
+registerCssAnimation("hk-spinner-rotate", { infinite: true });
+// components/HkModalBreadcrumb.scss — breadcrumb entrance (plays once).
+registerCssAnimation("hk-modal-breadcrumb-in");
+// components/HkToast.scss — toast spinner rotation (loops forever).
+registerCssAnimation("hk-toast-spin", { infinite: true });
+// components/HkSkeleton.scss — skeleton shimmer (loops forever).
+registerCssAnimation("hk-skeleton-shimmer", { infinite: true });
+// components/HkProgressBar.scss — indeterminate bar sweep (loops forever).
+registerCssAnimation("hk-progress-indeterminate", { infinite: true });
+// components/HkPasswordInput.scss — caps-lock warning flash (plays once).
+registerCssAnimation("hk-pwd-flash");
+// components/HkPasswordInput.scss — breathing hint glow (loops forever).
+registerCssAnimation("hk-pwd-breathe", { infinite: true });
+// components/HkPickerPane.scss — date/time picker view drill forward
+// (plays once, shared by HkDatePicker and HkDateTimePicker).
+registerCssAnimation("hk-picker-pane-fwd-in");
+registerCssAnimation("hk-picker-pane-fwd-out");
+// components/HkPickerPane.scss — date/time picker view drill back.
+registerCssAnimation("hk-picker-pane-back-in");
+registerCssAnimation("hk-picker-pane-back-out");
+// components/HkCountdownDigit.tsx — countdown digit flip swap (plays
+// once; keyframes ride the component's inline <style>).
+registerCssAnimation("hk-flip-out");
+registerCssAnimation("hk-flip-in");
+// components/HkVoiceInputPopup.scss — voice waveform bounce (loops
+// forever while listening; upstreamed from chest's plana-legacy).
+registerCssAnimation("s-voice-wave-bounce", { infinite: true });
+// components/HkPlaceholderMarquee.scss — overflowing placeholder sweep
+// (loops forever; pure CSS, loop geometry on inline custom properties).
+registerCssAnimation("hk-placeholder-marquee-scroll", { infinite: true });

package/src/components/HkAboutModal.scss

@@ -0,0 +1,95 @@
+// Use theme variables with namespace to avoid conflicts
+@use "./hikari-vars" as vars;
+
+.s-about-modal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16, 1rem);
+}
+
+.s-about-modal-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12, 0.75rem);
+}
+
+.s-about-modal-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  flex-shrink: 0;
+  border-radius: var(--radius-lg, 12px);
+  background: rgb(var(--color-primary));
+  color: rgb(var(--color-on-solid-text, 255 255 255));
+  font-size: var(--text-lg, 1.125rem);
+  font-weight: 700;
+}
+
+.s-about-modal-name {
+  margin: 0;
+  font-size: var(--text-lg, 1.125rem);
+  font-weight: 700;
+  color: rgb(var(--color-text));
+}
+
+.s-about-modal-version {
+  margin: var(--space-4, 0.25rem) 0 0;
+  font-size: var(--text-sm, 0.8125rem);
+  color: rgb(var(--color-muted));
+}
+
+.s-about-modal-rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8, 0.5rem);
+}
+
+.s-about-modal-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-8, 0.5rem);
+}
+
+.s-about-modal-row-label {
+  font-size: var(--text-sm, 0.8125rem);
+  color: rgb(var(--color-muted));
+}
+
+.s-about-modal-row-value {
+  font-size: var(--text-sm, 0.8125rem);
+  color: rgb(var(--color-text));
+  font-family: var(--font-mono, vars.$hikari-font-family-mono);
+}
+
+.s-about-modal-links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8, 0.5rem);
+}
+
+.s-about-modal-links-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-8, 0.5rem);
+}
+
+.s-about-modal-link {
+  padding: var(--space-4, 0.25rem) var(--space-8, 0.5rem);
+  border-radius: var(--radius-sm, 6px);
+  background: rgb(var(--color-primary) / 12%);
+  color: rgb(var(--color-primary));
+  font-size: var(--text-xs, 0.75rem);
+  text-decoration: none;
+}
+
+.s-about-modal-link:hover {
+  background: rgb(var(--color-primary) / 20%);
+}
+
+.s-about-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+}

package/src/components/HkAboutModal.tsx

@@ -0,0 +1,114 @@
+import { defineComponent, type PropType } from "vue";
+import { HBadge, HModal } from "@celestia-island/hikari";
+
+import { useI18n } from "../i18n/context";
+
+import "./HkAboutModal.scss";
+
+export interface HAboutLink {
+  label: string;
+  href: string;
+}
+
+/**
+ * HkAboutModal — version / about dialog.
+ * (Upstreamed from shittim-chest's plana-legacy layer.)
+ *
+ * Shows the app identity and version metadata plus optional external
+ * links. Version/build hashes render as short hashes when longer than 12
+ * chars (full value in `title` tooltip).
+ */
+export const HkAboutModal = defineComponent({
+  name: "HkAboutModal",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    /** Application display name. */
+    appName: { type: String, required: true },
+    /** Application version (e.g. "0.1.4"). */
+    version: { type: String, required: true },
+    /** Optional app build hash / commit. */
+    buildHash: { type: String, default: undefined },
+    /** Optional engine version (backend), e.g. "0.2.1". */
+    engineVersion: { type: String, default: undefined },
+    /** Optional engine build hash / commit. */
+    engineBuildHash: { type: String, default: undefined },
+    /** Optional external links (e.g. GitHub, docs). */
+    links: { type: Array as PropType<HAboutLink[]>, default: () => [] },
+    title: { type: String, default: undefined },
+  },
+  emits: {
+    "update:modelValue": (_v: boolean) => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+
+    function shortHash(hash: string): string {
+      return hash.length > 12 ? `${hash.slice(0, 12)}…` : hash;
+    }
+
+    return () => (
+      <HModal
+        modelValue={props.modelValue}
+        onUpdate:modelValue={(v: boolean) => emit("update:modelValue", v)}
+        title={props.title ?? t("hikari::about.title", "About")}
+        width="30rem"
+      >
+        <div class="s-about-modal">
+          <header class="s-about-modal-header">
+            <div class="s-about-modal-logo">{props.appName.slice(0, 1).toUpperCase()}</div>
+            <div>
+              <h2 class="s-about-modal-name">{props.appName}</h2>
+              <p class="s-about-modal-version">
+                {t("hikari::about.version", "Version")} {props.version}
+              </p>
+            </div>
+          </header>
+
+          <div class="s-about-modal-rows">
+            {props.buildHash && (
+              <div class="s-about-modal-row">
+                <span class="s-about-modal-row-label">{t("hikari::about.buildHash", "Build")}</span>
+                <span class="s-about-modal-row-value" title={props.buildHash}>
+                  {shortHash(props.buildHash)}
+                </span>
+              </div>
+            )}
+            {props.engineVersion && (
+              <div class="s-about-modal-row">
+                <span class="s-about-modal-row-label">{t("hikari::about.engineVersion", "Engine version")}</span>
+                <span class="s-about-modal-row-value">{props.engineVersion}</span>
+              </div>
+            )}
+            {props.engineBuildHash && (
+              <div class="s-about-modal-row">
+                <span class="s-about-modal-row-label">{t("hikari::about.engineBuildHash", "Engine build")}</span>
+                <span class="s-about-modal-row-value" title={props.engineBuildHash}>
+                  {shortHash(props.engineBuildHash)}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {props.links.length > 0 && (
+            <div class="s-about-modal-links">
+              <span class="s-about-modal-row-label">{t("hikari::about.links", "Links")}</span>
+              <div class="s-about-modal-links-list">
+                {props.links.map((link) => (
+                  <a key={link.href} href={link.href} target="_blank" rel="noopener noreferrer" class="s-about-modal-link">
+                    {link.label}
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <footer class="s-about-modal-footer">
+            <HBadge variant="muted">
+              © {new Date().getFullYear()} {props.appName}
+            </HBadge>
+          </footer>
+        </div>
+      </HModal>
+    );
+  },
+});

package/src/components/HkAdaptiveDialog.scss

@@ -0,0 +1,22 @@
+// HkAdaptiveDialog — only the seams the two shells cannot provide
+// themselves: the composed drawer header (title + sub-header stacked in
+// HkDrawer's header slot, which otherwise replaces the title) and the
+// footerActions HButton row rendered inside HkDrawer's footer (HkModal
+// already renders that row itself; HkDrawer has no footerActions prop).
+// Everything visual (overlay, panel, transitions, footer padding and
+// divider) comes from HkModal.scss / HkDrawer.scss.
+
+.hk-adaptive-dialog-drawer-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--hi-space-4, 4px);
+  flex: 1;
+  min-width: 0;
+}
+
+.hk-adaptive-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--hi-space-8, 8px);
+}

package/src/components/HkAdaptiveDialog.test.tsx

@@ -0,0 +1,271 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkAdaptiveDialog from "./HkAdaptiveDialog";
+import { setLocale } from "../i18n/context";
+import { usePopupManager } from "../runtime/usePopupManager";
+
+/**
+ * HkAdaptiveDialog contract tests:
+ * - desktop width renders the HkModal shell, mobile width renders the
+ *   HkDrawer side="bottom" shell, and the shell flips live on resize
+ * - the v-model / update:modelValue contract round-trips in both shells
+ * - footerActions render in both shells (same order/labels/handlers)
+ * - the footer slot wins over footerActions (HkModal's precedence)
+ * - afterLeave is forwarded from the active shell
+ *
+ * (Repo test convention: raw createApp + document queries, no
+ * @vue/test-utils dependency.)
+ */
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+const originalWidth = window.innerWidth;
+
+const setWidth = (w: number) => {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: w,
+  });
+  window.dispatchEvent(new Event("resize"));
+};
+
+interface DialogHarness {
+  container: HTMLElement;
+  open: ReturnType<typeof ref<boolean>>;
+  emitted: Array<string | null>;
+  afterLeaveCount: () => number;
+  unmount: () => void;
+}
+
+function mountDialog(
+  props: Record<string, unknown> = {},
+  slots: Record<string, unknown> = {},
+): DialogHarness {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+
+  const open = ref(true);
+  const emitted: Array<string | null> = [];
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(HkAdaptiveDialog, {
+          title: "Test dialog",
+          ...props,
+          modelValue: open.value,
+          "onUpdate:modelValue": (v: boolean) => {
+            emitted.push(String(v));
+            open.value = v;
+          },
+          "onAfterLeave": () => {
+            emitted.push("afterLeave");
+          },
+        } as never, slots as never);
+    },
+  });
+
+  const app = createApp(Wrapper);
+  const entry = { app, container };
+  mounts.push(entry);
+  app.mount(container);
+  return {
+    container,
+    open,
+    emitted,
+    afterLeaveCount: () => emitted.filter((e) => e === "afterLeave").length,
+    unmount: () => {
+      const idx = mounts.indexOf(entry);
+      if (idx !== -1) mounts.splice(idx, 1);
+      app.unmount();
+      container.remove();
+    },
+  };
+}
+
+/** Let Vue's enter/leave transitions (frame/timeout based) settle in happy-dom. */
+async function settle() {
+  await nextTick();
+  await new Promise((r) => setTimeout(r, 30));
+  await nextTick();
+}
+
+function modalContent(): HTMLElement | null {
+  return document.querySelector<HTMLElement>(".hk-modal-content");
+}
+
+function drawerPanel(): HTMLElement | null {
+  return document.querySelector<HTMLElement>(".hk-drawer-panel");
+}
+
+function footerButtons(root: ParentNode): HTMLButtonElement[] {
+  return Array.from(root.querySelectorAll<HTMLButtonElement>("button")).filter(
+    (b) => !b.classList.contains("hk-modal-close") && !b.classList.contains("hk-drawer-close"),
+  );
+}
+
+afterEach(async () => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  document.querySelectorAll(".hk-modal-root, .hk-drawer-overlay, [class^='hk-drawer-panel']").forEach((el) => el.remove());
+  setWidth(originalWidth);
+  await setLocale("en");
+});
+
+describe("HkAdaptiveDialog", () => {
+  it("renders the modal shell at desktop width and registers kind modal", () => {
+    setWidth(1280);
+    mountDialog();
+    expect(modalContent()).toBeTruthy();
+    expect(drawerPanel()).toBeNull();
+
+    const entries = [...usePopupManager().registry.value.values()];
+    expect(entries.some((e) => e.kind === "modal" && e.title === "Test dialog")).toBe(true);
+    expect(entries.some((e) => e.kind === "drawer")).toBe(false);
+  });
+
+  it("renders the bottom drawer shell at mobile width and registers kind drawer", () => {
+    setWidth(375);
+    mountDialog();
+    const panel = drawerPanel();
+    expect(panel).toBeTruthy();
+    expect(panel!.classList.contains("hk-drawer-bottom")).toBe(true);
+    expect(modalContent()).toBeNull();
+    // No footer slot and no footerActions -> no empty footer band.
+    expect(document.querySelector(".hk-drawer-footer")).toBeNull();
+
+    const entries = [...usePopupManager().registry.value.values()];
+    expect(entries.some((e) => e.kind === "drawer")).toBe(true);
+    expect(entries.some((e) => e.kind === "modal")).toBe(false);
+  });
+
+  it("flips the shell live when the viewport crosses the breakpoint", async () => {
+    setWidth(1280);
+    mountDialog();
+    expect(modalContent()).toBeTruthy();
+    expect(drawerPanel()).toBeNull();
+
+    setWidth(375);
+    await nextTick();
+    await settle();
+    expect(drawerPanel()).toBeTruthy();
+    expect(modalContent()).toBeNull();
+
+    setWidth(1280);
+    await nextTick();
+    await settle();
+    expect(modalContent()).toBeTruthy();
+    expect(drawerPanel()).toBeNull();
+  });
+
+  it("round-trips v-model through the modal shell (close button + reopen)", async () => {
+    setWidth(1280);
+    const harness = mountDialog();
+    expect(modalContent()).toBeTruthy();
+
+    document.querySelector<HTMLElement>(".hk-modal-close")!.click();
+    await settle();
+    expect(harness.emitted).toContain("false");
+    expect(modalContent()).toBeNull();
+
+    harness.open.value = true;
+    await settle();
+    expect(modalContent()).toBeTruthy();
+  });
+
+  it("round-trips v-model through the drawer shell and forwards afterLeave", async () => {
+    setWidth(375);
+    const harness = mountDialog();
+    expect(drawerPanel()).toBeTruthy();
+
+    document.querySelector<HTMLElement>(".hk-drawer-close")!.click();
+    await settle();
+    expect(harness.emitted).toContain("false");
+    expect(drawerPanel()).toBeNull();
+    expect(harness.afterLeaveCount()).toBeGreaterThan(0);
+
+    harness.open.value = true;
+    await settle();
+    expect(drawerPanel()).toBeTruthy();
+  });
+
+  it("closes on Escape through the drawer shell", async () => {
+    setWidth(375);
+    const harness = mountDialog();
+    const panel = drawerPanel()!;
+    panel.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await settle();
+    expect(harness.emitted).toContain("false");
+  });
+
+  it("renders footerActions in the modal footer", () => {
+    setWidth(1280);
+    mountDialog({
+      footerActions: [
+        { label: "Keep", variant: "secondary" },
+        { label: "Delete", variant: "danger" },
+      ],
+    });
+    const labels = footerButtons(document).map((b) => b.textContent?.trim());
+    expect(labels).toEqual(["Keep", "Delete"]);
+  });
+
+  it("renders footerActions as an equivalent button row in the drawer footer", () => {
+    setWidth(375);
+    const clicked: string[] = [];
+    mountDialog({
+      footerActions: [
+        { label: "Keep", variant: "secondary", onClick: () => clicked.push("keep") },
+        { label: "Delete", variant: "danger", onClick: () => clicked.push("delete") },
+      ],
+    });
+    const footer = document.querySelector<HTMLElement>(".hk-drawer-footer");
+    expect(footer).toBeTruthy();
+    const row = footer!.querySelector<HTMLElement>(".hk-adaptive-dialog-footer");
+    expect(row).toBeTruthy();
+
+    const labels = footerButtons(footer!).map((b) => b.textContent?.trim());
+    expect(labels).toEqual(["Keep", "Delete"]);
+
+    footerButtons(footer!)[1].click();
+    expect(clicked).toEqual(["delete"]);
+  });
+
+  it("lets the footer slot win over footerActions in both shells", () => {
+    const slots = { footer: () => h("div", { class: "custom-footer" }, "CUSTOM") };
+    const actions = [{ label: "SlotShouldWin" }];
+
+    setWidth(1280);
+    const desktop = mountDialog({ footerActions: actions }, slots);
+    expect(document.querySelector(".hk-modal-footer .custom-footer")).toBeTruthy();
+    expect(footerButtons(document).map((b) => b.textContent?.trim())).toEqual([]);
+    desktop.unmount();
+
+    setWidth(375);
+    const mobile = mountDialog({ footerActions: actions }, slots);
+    const footer = document.querySelector<HTMLElement>(".hk-drawer-footer")!;
+    expect(footer.querySelector(".custom-footer")).toBeTruthy();
+    expect(footerButtons(footer).map((b) => b.textContent?.trim())).toEqual([]);
+    mobile.unmount();
+  });
+
+  it("maps the header slot to the modal sub-header and keeps the drawer title bar", () => {
+    const slots = { header: () => h("div", { class: "custom-header" }, "SUB") };
+
+    setWidth(1280);
+    const desktop = mountDialog({}, slots);
+    expect(document.querySelector(".hk-modal-subheader .custom-header")).toBeTruthy();
+    expect(document.querySelector<HTMLElement>(".hk-modal-title")!.textContent).toContain("Test dialog");
+    desktop.unmount();
+
+    setWidth(375);
+    const mobile = mountDialog({}, slots);
+    const composed = document.querySelector<HTMLElement>(".hk-adaptive-dialog-drawer-header");
+    expect(composed).toBeTruthy();
+    expect(composed!.querySelector(".hk-drawer-title")!.textContent).toContain("Test dialog");
+    expect(composed!.querySelector(".custom-header")).toBeTruthy();
+    mobile.unmount();
+  });
+});