@celestia-island/hikari 0.55.84 → 0.55.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.84",
+  "version": "0.55.85",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

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";