@celestia-island/hikari 0.4.4 → 0.30.0

package/src/components/HkAdminShell.test.tsx

@@ -0,0 +1,237 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, h, nextTick } from "vue";
+
+// HDrawer teleports and animates; replace it with an inline passthrough
+// exposing the body/footer split so the drawer contract is testable.
+vi.mock("@celestia-island/hikari", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@celestia-island/hikari")>();
+  const { defineComponent, h } = await import("vue");
+  const HDrawerStub = defineComponent({
+    name: "HDrawer",
+    props: {
+      modelValue: { type: Boolean, default: false },
+      side: { type: String, default: "left" },
+      size: { type: String, default: "280px" },
+      title: { type: String, default: undefined },
+      panelClass: { type: String, default: undefined },
+    },
+    setup(props, { slots }) {
+      return () =>
+        props.modelValue
+          ? h("div", { class: ["drawer-stub", props.panelClass] }, [
+              h("div", { class: "drawer-stub-body" }, slots.default?.()),
+              slots.footer
+                ? h("div", { class: "drawer-stub-footer" }, slots.footer())
+                : null,
+            ])
+          : null;
+    },
+  });
+  return { ...actual, HDrawer: HDrawerStub };
+});
+
+import { HkAdminShell } from "./HkAdminShell";
+
+/**
+ * HkAdminShell contract tests for the generalized slot surface ported
+ * from the chest plana-legacy fork:
+ * 1. Scoped slots are functions: rendering `slots.overlays` without
+ *    calling it stringifies the compiled slot source into a text node.
+ * 2. The mobile drawer footer carries the `userPanel` slot so the
+ *    account block (identity + actions) rides the drawer bottom.
+ * 3. The header slot receives `onOpenDrawer` so a header trigger (the
+ *    avatar in drawer action mode) can open the nav drawer.
+ * 4. Content padding rides an inner wrapper inside the scroll viewport
+ *    (card box-shadows are never clipped at the viewport edges).
+ *
+ * (Repo test convention: raw createApp + container queries, no
+ * @vue/test-utils dependency.)
+ */
+
+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();
+  }
+  setWidth(1024);
+});
+
+const setWidth = (w: number) => {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: w,
+  });
+  window.dispatchEvent(new Event("resize"));
+};
+
+function shellNode(
+  props: Record<string, unknown>,
+  slots: Record<string, unknown>,
+) {
+  return h(HkAdminShell, props as never, slots as never);
+}
+
+const NAV = () => h("nav", { class: "nav-mock" }, "NAV");
+const CONTENT = () => h("main", null, "CONTENT");
+
+describe("HkAdminShell", () => {
+  it("renders the overlays slot content, never its source text", () => {
+    setWidth(1024);
+    const c = mount(shellNode(
+      { navTitle: "Navigation" },
+      {
+        header: () => null,
+        sidebar: NAV,
+        content: CONTENT,
+        overlays: () => h("div", { class: "overlay-mock" }, "OVERLAY-MARK"),
+      },
+    ));
+    const html = c.innerHTML;
+    expect(html).toContain("OVERLAY-MARK");
+    // The regression: a slot function rendered un-invoked stringifies to
+    // its minified source (arrow params, r._d, etc.).
+    expect(html).not.toContain("=>");
+    expect(c.querySelector(".overlay-mock")).toBeTruthy();
+  });
+
+  it("renders the desktop sidebar inline and skips the drawer", () => {
+    setWidth(1024);
+    const c = mount(shellNode(
+      { navTitle: "Navigation" },
+      { header: () => null, sidebar: NAV, content: CONTENT },
+    ));
+    expect(c.querySelector("aside .nav-mock")).toBeTruthy();
+    // No drawer (mocked HDrawer) in the tree at desktop width.
+    expect(c.querySelector(".drawer-stub")).toBeNull();
+  });
+
+  it("opens the mobile drawer with nav body and userPanel footer", async () => {
+    setWidth(500);
+    let openDrawer: (() => void) | null = null;
+    const c = mount(shellNode(
+      { navTitle: "Navigation", drawerPanelClass: "my-drawer" },
+      {
+        header: (ctx: { onOpenDrawer: () => void }) => {
+          openDrawer = ctx.onOpenDrawer;
+          return null;
+        },
+        sidebar: NAV,
+        userPanel: () => h("div", { class: "s-drawer-user-panel" }, "USER-PANEL"),
+        content: CONTENT,
+      },
+    ));
+    expect(openDrawer).toBeTruthy();
+    openDrawer!();
+    await nextTick();
+    await nextTick();
+    // Drawer carries the nav in its body…
+    expect(c.querySelector(".drawer-stub-body .nav-mock")).toBeTruthy();
+    // …and the user panel in its footer, unwrapped (the slot's own root
+    // carries the styling hooks).
+    const panel = c.querySelector(".drawer-stub-footer .s-drawer-user-panel");
+    expect(panel).toBeTruthy();
+    expect(panel?.textContent).toContain("USER-PANEL");
+    // The drawer panel class passes through for consumer-side nesting
+    // adjustments.
+    expect(c.querySelector(".drawer-stub.my-drawer")).toBeTruthy();
+  });
+
+  it("hands the userPanel slot an onNavigate that closes the drawer", async () => {
+    setWidth(500);
+    let openDrawer: (() => void) | null = null;
+    let userPanelNavigate: (() => void) | null = null;
+    const c = mount(shellNode(
+      { navTitle: "Navigation" },
+      {
+        header: (ctx: { onOpenDrawer: () => void }) => {
+          openDrawer = ctx.onOpenDrawer;
+          return null;
+        },
+        sidebar: NAV,
+        userPanel: (ctx: { onNavigate: () => void }) => {
+          userPanelNavigate = ctx.onNavigate;
+          return h("div", { class: "s-drawer-user-panel" }, "USER-PANEL");
+        },
+        content: CONTENT,
+      },
+    ));
+    openDrawer!();
+    await nextTick();
+    await nextTick();
+    expect(c.querySelector(".drawer-stub")).toBeTruthy();
+    // The slot scope carries the drawer-close callback (mirrors the
+    // sidebar slot's onNavigate contract)…
+    expect(userPanelNavigate).toBeTruthy();
+    // …and invoking it dismisses the drawer (a "go to frontend" row
+    // must not leave the drawer hovering over the swapped layout).
+    userPanelNavigate!();
+    await nextTick();
+    await nextTick();
+    expect(c.querySelector(".drawer-stub")).toBeNull();
+  });
+
+  it("omits the drawer footer wrapper when no userPanel slot is given", async () => {
+    setWidth(500);
+    let openDrawer: (() => void) | null = null;
+    const c = mount(shellNode(
+      { navTitle: "Navigation" },
+      {
+        header: (ctx: { onOpenDrawer: () => void }) => {
+          openDrawer = ctx.onOpenDrawer;
+          return null;
+        },
+        sidebar: NAV,
+        content: CONTENT,
+      },
+    ));
+    openDrawer!();
+    await nextTick();
+    await nextTick();
+    expect(c.querySelector(".drawer-stub-footer")).toBeNull();
+    expect(c.querySelector(".s-drawer-user-panel")).toBeNull();
+  });
+
+  it("honors a custom mobileBreakpoint for the desktop takeover", async () => {
+    // Default 1024: 900px reads as mobile (drawer path).
+    setWidth(900);
+    const narrow = mount(shellNode(
+      { navTitle: "Navigation" },
+      { header: () => null, sidebar: NAV, content: CONTENT },
+    ));
+    expect(narrow.querySelector("aside .nav-mock")).toBeNull();
+
+    // Custom 768: the same 900px reads as desktop (inline sidebar).
+    const wide = mount(shellNode(
+      { navTitle: "Navigation", mobileBreakpoint: 768 },
+      { header: () => null, sidebar: NAV, content: CONTENT },
+    ));
+    expect(wide.querySelector("aside .nav-mock")).toBeTruthy();
+  });
+
+  it("applies the content padding inside the scroll viewport so shadows are not clipped", () => {
+    setWidth(1024);
+    const c = mount(shellNode(
+      { navTitle: "Navigation", contentPadding: "2rem" },
+      { header: () => null, sidebar: NAV, content: CONTENT },
+    ));
+    // The padded inner wrapper exists INSIDE the scroll viewport (not as
+    // padding on the container itself).
+    const viewport = c.querySelector(".hk-scroll-container-viewport")
+      ?? c.querySelector(".hk-scroll-container");
+    const inner = viewport?.firstElementChild as HTMLElement | null | undefined;
+    expect(inner).toBeTruthy();
+    expect(inner?.style.padding).toBe("2rem");
+  });
+});

package/src/components/HkAdminShell.tsx

@@ -0,0 +1,129 @@
+import { computed, defineComponent, ref } from "vue";
+import { HDrawer, HScrollContainer, useBreakpoint } from "@celestia-island/hikari";
+import { provideActionBar } from "../composables/useActionBar";
+import { useI18n } from "../i18n/context";
+
+export const HkAdminShell = defineComponent({
+  name: "HkAdminShell",
+  props: {
+    sidebarCollapsed: { type: Boolean, default: false },
+    sidebarWidth: { type: String, default: "224px" },
+    /** Viewport width at which the desktop layout takes over (below it
+     *  the nav collapses into the mobile drawer). Defaults to the shared
+     *  1024px "lg" breakpoint; lower it (e.g. 768) for tablet-friendly
+     *  admins that keep the sidebar at md widths. */
+    mobileBreakpoint: { type: Number, default: 1024 },
+    footerHeight: { type: String, default: "var(--s-footer-height)" },
+    navTitle: { type: String, default: undefined },
+    /** Extra class for the mobile nav drawer's panel — lets consumers zero
+     *  nested paddings so drawer nav rows and a `userPanel` footer share
+     *  one left edge. */
+    drawerPanelClass: { type: String, default: undefined },
+    /** Content-area padding (inside the scroll viewport). Padding is
+     *  applied to an inner wrapper rather than the scroll container so
+     *  card box-shadows are never clipped at the viewport edges. */
+    contentPadding: { type: String, default: "1.5rem" },
+  },
+  setup(props, { slots }) {
+    const { t } = useI18n();
+    const { width: viewportWidth } = useBreakpoint();
+    const isDesktop = computed(() => viewportWidth.value >= props.mobileBreakpoint);
+    const sidebarOpen = ref(false);
+
+    const actionBar = provideActionBar();
+
+    const toggleHamburger = () => {
+      sidebarOpen.value = !sidebarOpen.value;
+    };
+
+    const openSidebar = () => {
+      sidebarOpen.value = true;
+    };
+
+    const closeSidebar = () => {
+      sidebarOpen.value = false;
+    };
+
+    return () => (
+      <div class="flex flex-col h-full w-full overflow-hidden">
+        {slots.header && (
+          <div style={{ flexShrink: 0 }}>
+            {slots.header({
+              isDesktop: isDesktop.value,
+              showHamburger: !isDesktop.value,
+              compact: !isDesktop.value,
+              actions: actionBar.actions.value ? actionBar.actions.value() : [],
+              onHamburger: toggleHamburger,
+              // Lets a header trigger (e.g. the avatar in "drawer" action
+              // mode) open the mobile nav drawer directly.
+              onOpenDrawer: openSidebar,
+            })}
+          </div>
+        )}
+
+        <div class="flex flex-1 min-h-0" style={{ paddingBottom: props.footerHeight }}>
+          {isDesktop.value && !props.sidebarCollapsed && slots.sidebar && (
+            <aside
+              style={{
+                width: props.sidebarWidth,
+                flexShrink: 0,
+                borderRight: "1px solid var(--border-faint, rgb(var(--color-border) / 10%))",
+                background: "rgb(var(--color-surface))",
+                overflow: "hidden",
+              }}
+            >
+              {slots.sidebar({ collapsed: false, onNavigate: closeSidebar })}
+            </aside>
+          )}
+          <main class="flex-1 flex flex-col min-w-0 min-h-0">
+            <HScrollContainer class="flex-1 min-h-0">
+              {/* Padding lives INSIDE the scroll viewport (an inner
+                  wrapper) so card box-shadows are not clipped at the
+                  viewport edges. */}
+              <div style={{ padding: props.contentPadding }}>{slots.content?.()}</div>
+            </HScrollContainer>
+          </main>
+
+          {!isDesktop.value && (
+            <HDrawer
+              modelValue={sidebarOpen.value}
+              onUpdate:modelValue={(v: boolean) => (sidebarOpen.value = v)}
+              side="left"
+              size="280px"
+              title={props.navTitle ?? t("hikari::adminShell.navTitle", "Navigation")}
+              panelClass={props.drawerPanelClass}
+            >
+              {/* The drawer body carries the nav; a `userPanel` slot rides
+                  the drawer footer (identity + account actions) so mobile
+                  gets the same content the desktop user menu exposes.
+                  `inDrawer` lets the sidebar slot fill the drawer width.
+                  The userPanel receives `onNavigate` (closes the drawer)
+                  so its action rows — e.g. "go to frontend", which swaps
+                  the whole layout underneath — can dismiss the drawer
+                  instead of leaving it hovering over the new page. */}
+              {{
+                default: () =>
+                  slots.sidebar?.({ collapsed: false, onNavigate: closeSidebar, inDrawer: true }),
+                footer: slots.userPanel
+                  ? () => slots.userPanel!({ onNavigate: closeSidebar })
+                  : undefined,
+              }}
+            </HDrawer>
+          )}
+        </div>
+
+        {slots.footer && (
+          <footer class="s-status-bar" style={{ position: "fixed", bottom: 0, left: 0, right: 0, // Footer band (was a bare 40 — the pre-band chrome value).
+            zIndex: "var(--z-footer, 110)" }}>
+            {slots.footer()}
+          </footer>
+        )}
+
+        {/* Scoped slots are functions — rendering the slot itself instead of
+            calling it would stringify the compiled withCtx source into a text
+            node (normalizeVNode String()s non-vnode children). */}
+        {slots.overlays?.()}
+      </div>
+    );
+  },
+});

package/src/components/HkAdminTablePage.tsx

@@ -0,0 +1,70 @@
+import { defineComponent, type PropType } from "vue";
+import { HAlert, HCard, HEmptyState, HSpinner, HTable, useI18n } from "@celestia-island/hikari";
+import { HkPageHeader } from "./HkPageHeader";
+
+
+/** Column definition passed through to HTable. */
+export interface HTableColumn {
+  key: string;
+  title: string;
+  width?: string;
+  sortable?: boolean;
+  align?: "left" | "center" | "right";
+}
+
+/**
+ * CRUD table-page scaffold: HkPageHeader + loading spinner + error alert +
+ * empty state + HTable. Slots:
+ * - `actions`      — header actions (e.g. a "Create" button)
+ * - `cell-<key>`   — per-column cell templates, forwarded to HTable
+ * - `create-modal` — create dialog, rendered after the table
+ * - `edit-modal`   — edit dialog, rendered after the table
+ */
+export const HkAdminTablePage = defineComponent({
+  name: "HkAdminTablePage",
+  props: {
+    title: { type: String, default: "" },
+    loading: { type: Boolean, default: false },
+    error: { type: String as PropType<string | undefined>, default: undefined },
+    rows: { type: Array as PropType<Record<string, unknown>[]>, required: true },
+    columns: { type: Array as PropType<HTableColumn[]>, required: true },
+    rowKey: { type: String, default: "id" },
+    emptyTitle: { type: String, default: "" },
+    emptyDescription: { type: String as PropType<string | undefined>, default: undefined },
+  },
+  setup(props, { slots }) {
+
+    return () => {
+      const { t } = useI18n();
+      const emptyTitle = props.emptyTitle || t("hikari::tablePage.emptyTitle", "No data");
+      return (
+        <div>
+          {props.title ? (
+            <HkPageHeader title={props.title}>
+              {{ actions: () => slots.actions?.() }}
+            </HkPageHeader>
+          ) : slots.actions ? (
+            <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: "var(--space-16, 1rem)" }}>
+              {slots.actions()}
+            </div>
+          ) : null}
+          {props.error ? (
+            <HAlert message={props.error} />
+          ) : props.loading && !props.rows.length ? (
+            <HSpinner center />
+          ) : !props.rows.length ? (
+            <HEmptyState title={emptyTitle} description={props.emptyDescription} />
+          ) : (
+            <HCard padded={false}>
+              <HTable columns={props.columns} rows={props.rows} rowKey={props.rowKey}>
+                {slots}
+              </HTable>
+            </HCard>
+          )}
+          {slots["create-modal"]?.()}
+          {slots["edit-modal"]?.()}
+        </div>
+      );
+    };
+  },
+});

package/src/components/HkAdminWidgets.test.ts

@@ -0,0 +1,89 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import { HkStatCard } from "./HkStatCard";
+import { HkStatusPill } from "./HkStatusPill";
+import { HkShareBar } from "./HkShareBar";
+
+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();
+  }
+});
+
+describe("HkStatCard", () => {
+  it("renders label, value, hint and a tone dot", () => {
+    const c = mount(h(HkStatCard, { label: "Hub health", value: "2/2", tone: "success", hint: "hubs" }));
+    expect(c.querySelector(".hk-stat-card-label")?.textContent).toBe("Hub health");
+    expect(c.querySelector(".hk-stat-card-value")?.textContent).toBe("2/2");
+    expect(c.querySelector(".hk-stat-card-hint")?.textContent).toBe("hubs");
+    expect(c.querySelector(".hk-stat-card-dot-success")).toBeTruthy();
+    expect(c.querySelector(".hk-stat-card-clickable")).toBeNull();
+  });
+
+  it("marks clickable cards and emits role=button", () => {
+    const c = mount(h(HkStatCard, { label: "L", value: 1, clickable: true }));
+    const el = c.querySelector(".hk-stat-card") as HTMLElement;
+    expect(el.getAttribute("role")).toBe("button");
+    expect(el.className).toContain("hk-stat-card-clickable");
+  });
+
+  it("omits the hint node when absent", () => {
+    const c = mount(h(HkStatCard, { label: "L", value: 1 }));
+    expect(c.querySelector(".hk-stat-card-hint")).toBeNull();
+  });
+});
+
+describe("HkStatusPill", () => {
+  it("renders state dot with label, latency and version", () => {
+    const c = mount(h(HkStatusPill, { state: "ok", label: "online", latencyMs: 34, version: "0.2.0" }));
+    expect(c.querySelector(".hk-status-pill-ok")).toBeTruthy();
+    expect(c.querySelector(".hk-status-pill-label")?.textContent).toBe("online");
+    expect(c.querySelector(".hk-status-pill-latency")?.textContent).toBe("34 ms");
+    expect(c.querySelector(".hk-status-pill-version")?.textContent).toBe("0.2.0");
+  });
+
+  it("defaults to unknown state with no extras", () => {
+    const c = mount(h(HkStatusPill));
+    expect(c.querySelector(".hk-status-pill-unknown")).toBeTruthy();
+    expect(c.querySelector(".hk-status-pill-latency")).toBeNull();
+    expect(c.querySelector(".hk-status-pill-version")).toBeNull();
+  });
+});
+
+describe("HkShareBar", () => {
+  it("computes percent from value/total and clamps to 100", () => {
+    const c = mount(h(HkShareBar, { label: "a", value: 25, total: 100 }));
+    const fill = c.querySelector(".hk-share-bar-fill") as HTMLElement;
+    expect(fill.style.width).toBe("25%");
+
+    const over = mount(h(HkShareBar, { label: "b", value: 300, total: 100 }));
+    const fill2 = over.querySelector(".hk-share-bar-fill") as HTMLElement;
+    expect(fill2.style.width).toBe("100%");
+  });
+
+  it("renders zero-width for zero totals and honors captions", () => {
+    const c = mount(h(HkShareBar, { label: "a", value: 5, total: 0, caption: "5 tok" }));
+    const fill = c.querySelector(".hk-share-bar-fill") as HTMLElement;
+    expect(fill.style.width).toBe("0%");
+    expect(c.querySelector(".hk-share-bar-caption")?.textContent).toBe("5 tok");
+  });
+
+  it("applies the percent override", () => {
+    const c = mount(h(HkShareBar, { label: "a", value: 1, total: 100, percentOverride: 60 }));
+    const fill = c.querySelector(".hk-share-bar-fill") as HTMLElement;
+    expect(fill.style.width).toBe("60%");
+  });
+});

package/src/components/HkAlert.tsx

@@ -72,7 +72,7 @@ export default defineComponent({
             <button
               class="hk-alert-close"
               type="button"
-              aria-label={t("hk.alert.close", "Close")}
+              aria-label={t("hikari::alert.close", "Close")}
               onClick={onClose}
             >
               <X size={14} />

package/src/components/HkAltSignIn.scss

@@ -0,0 +1,55 @@
+/* HkAltSignIn — alternative sign-in trigger row + entry panel.
+   Token-driven only; mirrors the .s-auth-footer type/color grammar so the
+   row sits inside an auth card without breaking its rhythm. */
+
+.hk-alt-signin {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+}
+
+.hk-alt-signin__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  width: 100%;
+  padding: var(--space-4, 0.25rem) 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--hi-color-muted, #666);
+  transition:
+    color var(--duration-normal, 0.3s) ease,
+    opacity var(--duration-normal, 0.3s) ease;
+}
+
+.hk-alt-signin__trigger:hover:not(:disabled) {
+  color: var(--hi-color-text-secondary, #999);
+}
+
+.hk-alt-signin__trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Decorative rules flanking the label give the collapsed row the
+   "section divider" read while staying a single focusable button. */
+.hk-alt-signin__rule {
+  flex: 1 1 auto;
+  height: 1px;
+  background: var(--hi-color-border-subtle, rgba(0, 0, 0, 0.08));
+}
+
+.hk-alt-signin__label {
+  flex: 0 0 auto;
+}
+
+.hk-alt-signin__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2, 0.125rem);
+  min-width: 12rem;
+  padding: var(--space-4, 0.25rem) var(--space-4, 0.25rem);
+}

package/src/components/HkAltSignIn.test.tsx

@@ -0,0 +1,88 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h, nextTick } from "vue";
+
+import HkAltSignIn from "./HkAltSignIn";
+
+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();
+  }
+});
+
+const entries = [
+  { key: "passkey", label: "使用 passkey 登录" },
+  { key: "feishu", label: "飞书登录" },
+];
+
+function trigger(c: HTMLElement): HTMLButtonElement {
+  const el = c.querySelector<HTMLButtonElement>(".hk-alt-signin__trigger");
+  if (!el) throw new Error("trigger button not rendered");
+  return el;
+}
+
+describe("HkAltSignIn", () => {
+  it("renders the trigger label and decorative rules", () => {
+    const c = mount(
+      h(HkAltSignIn, {
+        label: "其他方式登录",
+        entries,
+        onSelect: () => undefined,
+      }),
+    );
+    expect(trigger(c).textContent).toContain("其他方式登录");
+    expect(c.querySelectorAll(".hk-alt-signin__rule").length).toBe(2);
+  });
+
+  it("opens the entry panel and emits select with the entry key", async () => {
+    const selected: string[] = [];
+    const c = mount(
+      h(HkAltSignIn, {
+        label: "更多",
+        entries,
+        onSelect: (k: string) => selected.push(k),
+      }),
+    );
+    trigger(c).click();
+    // The popover manager + flip coords resolve over a couple of frames.
+    for (let i = 0; i < 5 && !document.querySelector(".hk-alt-signin__panel"); i++) {
+      await nextTick();
+      await new Promise((r) => setTimeout(r, 10));
+    }
+    const panel = document.querySelector(".hk-alt-signin__panel");
+    expect(panel).not.toBeNull();
+    const items = [...document.querySelectorAll<HTMLButtonElement>(".hk-menu-action-item")];
+    expect(items.map((b) => b.textContent?.trim())).toEqual([
+      "使用 passkey 登录",
+      "飞书登录",
+    ]);
+    items[1]!.click();
+    expect(selected).toEqual(["feishu"]);
+  });
+
+  it("does not open while disabled", async () => {
+    const c = mount(
+      h(HkAltSignIn, {
+        label: "更多",
+        entries,
+        disabled: true,
+        onSelect: () => undefined,
+      }),
+    );
+    trigger(c).click();
+    await nextTick();
+    expect(trigger(c).disabled).toBe(true);
+    expect(c.querySelector(".hk-alt-signin__panel")).toBeNull();
+  });
+});