@celestia-island/hikari 0.55.55 → 0.55.56

package/package.json

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

package/src/components/HkMfaVerifyCard.scss

@@ -0,0 +1,21 @@
+/* ── HkMfaVerifyCard ─────────────────────────────────────────────────
+ * The card shell, header and form vocabulary all come from the auth
+ * surfaces in styles/admin-tokens.scss (.s-auth-card / .s-auth-header /
+ * .s-auth-form); this sheet only owns the piece the card itself
+ * introduces: the factor picker's wrapper.
+ *
+ * The wrapper is a flex COLUMN child of .s-auth-form (admin-tokens
+ * stretches `.s-auth-form > *` to full width), so the row centers
+ * HORIZONTALLY via align-items — and the group must SHRINK-WRAP to its
+ * natural width: the slider thumb anchors from the strip's LEFT edge
+ * (inset + index × item-size), so a stretched root strands the thumb a
+ * full half-row left of the actually-centered active factor (empirically
+ * pinned by a chrome-headless probe when the panel lived in
+ * shittim-chest; jsdom cannot see it). This rule moved here verbatim
+ * from chest's host chrome sheet when the panel became this component —
+ * the host copy is deleted in the adoption change.
+ */
+
+.s-auth-form .s-mfa-factors {
+  align-items: center;
+}

package/src/components/HkMfaVerifyCard.test.ts

@@ -0,0 +1,292 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, h, nextTick, reactive, ref } from "vue";
+
+import { HkMfaVerifyCard, hkIsMfaFactor, hkPreferredMfaFactor } from "./HkMfaVerifyCard";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+/** Mount a render closure, returning its container. Reading reactive
+ *  state INSIDE the closure keeps re-renders honest (a static vnode
+ *  never updates, so prop-mutation tests need this shape). */
+function mount(render: () => ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render });
+  app.mount(container);
+  mounts.push({ app, container });
+  return { app, container };
+}
+
+/** The card instance's exposed handles (clearProof / focusPassword). */
+function exposedOf(app: ReturnType<typeof createApp>): { clearProof: () => void } {
+  const instance = app._instance?.subTree?.component as unknown as {
+    exposed: { clearProof: () => void } | null;
+  } | null;
+  expect(instance?.exposed, "the card exposes its proof handles").toBeTruthy();
+  return instance!.exposed!;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+function typeInto(input: HTMLInputElement, value: string) {
+  input.value = value;
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function pickerButtons(c: HTMLElement) {
+  return Array.from(c.querySelectorAll<HTMLButtonElement>("button.hk-icon-group-item"));
+}
+
+function primaryButton(c: HTMLElement) {
+  return c.querySelector(".hk-btn-primary") as HTMLButtonElement;
+}
+
+function buttonText(c: HTMLElement, text: string) {
+  return Array.from(c.querySelectorAll("button")).find((b) => b.textContent?.includes(text));
+}
+
+function otpCells(c: HTMLElement) {
+  return Array.from(c.querySelectorAll<HTMLInputElement>(".hk-otp-cell"));
+}
+
+function flush() {
+  // nextTick, deliberately NOT a setTimeout macrotask: in happy-dom the
+  // re-arm assertions only settle deterministically on the microtask
+  // queue the components themselves schedule on.
+  return nextTick();
+}
+
+describe("hkPreferredMfaFactor", () => {
+  it("follows the passkey > totp > sms ladder and keeps password last", () => {
+    expect(hkPreferredMfaFactor(["password", "totp"])).toBe("totp");
+    expect(hkPreferredMfaFactor(["sms", "totp"])).toBe("totp");
+    expect(hkPreferredMfaFactor(["password", "sms"])).toBe("sms");
+    expect(hkPreferredMfaFactor(["password"])).toBe("password");
+  });
+
+  it("returns null for nothing drivable and filters unknown kinds", () => {
+    expect(hkPreferredMfaFactor([])).toBeNull();
+    expect(hkPreferredMfaFactor(["eyes", "voice"])).toBeNull();
+  });
+
+  it("type-guards raw server strings", () => {
+    expect(hkIsMfaFactor("totp")).toBe(true);
+    expect(hkIsMfaFactor("iris")).toBe(false);
+  });
+});
+
+describe("HkMfaVerifyCard", () => {
+  it("renders the verify-account shell with the default factor's proof field", () => {
+    const { container } = mount(() =>
+      h(HkMfaVerifyCard, { factors: ["totp"], accountName: "demierge" }));
+    expect(container.querySelector(".s-auth-card")).toBeTruthy();
+    expect(container.querySelector(".s-auth-title")?.textContent).toBe("Verify account");
+    // The account-aware subtitle carries the name (locale interpolation).
+    expect(container.querySelector(".s-auth-subtitle")?.textContent).toContain("demierge");
+    // totp is the default → six code cells, TOTP hint, no password field.
+    expect(otpCells(container)).toHaveLength(6);
+    expect(container.textContent).toContain("Enter the 6-digit TOTP code");
+    expect(container.querySelector('input[name="mfa-verify-password"]')).toBeNull();
+  });
+
+  it("keeps the generic subtitle when no account name is given", () => {
+    const { container } = mount(() => h(HkMfaVerifyCard, { factors: ["totp"] }));
+    expect(container.querySelector(".s-auth-subtitle")?.textContent)
+      .toBe("This account requires an extra verification step");
+  });
+
+  it("prefers the ladder's head even when the server announces password first", () => {
+    const { container } = mount(() =>
+      h(HkMfaVerifyCard, { factors: ["password", "totp"] }));
+    expect(otpCells(container).length).toBe(6);
+    expect(container.querySelector('input[name="mfa-verify-password"]')).toBeNull();
+  });
+
+  it("renders the password proof with a disabled submit until a password exists", () => {
+    const { container } = mount(() =>
+      h(HkMfaVerifyCard, { factors: ["password"] }));
+    const field = container.querySelector('input[name="mfa-verify-password"]') as HTMLInputElement;
+    expect(field).toBeTruthy();
+    expect(otpCells(container)).toHaveLength(0);
+    const submit = Array.from(container.querySelectorAll("button"))
+      .find((b) => b.textContent?.includes("Verify and sign in")) as HTMLButtonElement;
+    expect(submit.disabled).toBe(true);
+  });
+
+  it("emits verify with the composed code once the row fills", async () => {
+    const onVerify = vi.fn();
+    const { container } = mount(() =>
+      h(HkMfaVerifyCard, { factors: ["totp"], onVerify }));
+    // Typing a whole code into the first cell distributes it forward.
+    typeInto(otpCells(container)[0]!, "123456");
+    await flush();
+    expect(primaryButton(container).disabled).toBe(false);
+    primaryButton(container).click();
+    await flush();
+    expect(onVerify).toHaveBeenCalledWith("totp", "123456");
+  });
+
+  it("does not emit verify while the proof is incomplete", async () => {
+    const onVerify = vi.fn();
+    const { container } = mount(() =>
+      h(HkMfaVerifyCard, { factors: ["totp"], onVerify }));
+    typeInto(otpCells(container)[0]!, "123");
+    await flush();
+    expect(primaryButton(container).disabled).toBe(true);
+    primaryButton(container).click();
+    await flush();
+    expect(onVerify).not.toHaveBeenCalled();
+  });
+
+  it("emits the password proof", async () => {
+    const onVerify = vi.fn();
+    const { container } = mount(() =>
+      h(HkMfaVerifyCard, { factors: ["password"], onVerify }));
+    typeInto(
+      container.querySelector('input[name="mfa-verify-password"]') as HTMLInputElement,
+      "secret",
+    );
+    await flush();
+    const submit = Array.from(container.querySelectorAll("button"))
+      .find((b) => b.textContent?.includes("Verify and sign in"))!;
+    submit.click();
+    await flush();
+    expect(onVerify).toHaveBeenCalledWith("password", "secret");
+  });
+
+  it("emits an empty passkey proof and shows the retry hint only when passed", async () => {
+    const onVerify = vi.fn();
+    const { container } = mount(() =>
+      h(HkMfaVerifyCard, {
+        factors: ["passkey"],
+        onVerify,
+        passkeyRetryHint: "try another entry",
+      }));
+    expect(container.textContent).toContain("Verify with Passkey");
+    expect(container.querySelector(".hk-alert-warning")?.textContent).toContain("try another entry");
+    expect(otpCells(container)).toHaveLength(0);
+    primaryButton(container).click();
+    await flush();
+    expect(onVerify).toHaveBeenCalledWith("passkey", "");
+  });
+
+  it("omits the retry alert when no hint is passed", () => {
+    const { container } = mount(() => h(HkMfaVerifyCard, { factors: ["passkey"] }));
+    expect(container.querySelector(".hk-alert-warning")).toBeNull();
+  });
+
+  it("pins the proven factor and switches to the step-two wording", async () => {
+    const onVerify = vi.fn();
+    const { container } = mount(() =>
+      h(HkMfaVerifyCard, {
+        factors: ["totp", "sms"],
+        proven: "totp",
+        accountName: "demierge",
+        onVerify,
+      }));
+    expect(container.querySelector(".s-auth-title")?.textContent).toBe("One more verification");
+    const subtitle = container.querySelector(".s-auth-subtitle")?.textContent ?? "";
+    expect(subtitle).toContain("TOTP authenticator app");
+    expect(subtitle).toContain("demierge");
+    // The proven entry stays visible, pinned disabled with the marker…
+    const buttons = pickerButtons(container);
+    expect(buttons).toHaveLength(2);
+    const pinned = buttons.find((b) => b.getAttribute("data-marker") === "success")!;
+    expect(pinned).toBeTruthy();
+    expect(pinned.disabled).toBe(true);
+    // …and the default selection moved on to the next ladder entry (sms:
+    // separated shape + sms hint).
+    await flush();
+    expect(container.querySelector(".hk-otp-gap")).toBeTruthy();
+    expect(container.textContent).toContain("Enter the 6-digit SMS code");
+    // Proving the sms factor emits "sms", not the pinned totp.
+    typeInto(otpCells(container)[0]!, "654321");
+    await flush();
+    primaryButton(container).click();
+    await flush();
+    expect(onVerify).toHaveBeenCalledWith("sms", "654321");
+  });
+
+  it("re-arms (selection + fields) when the proven factor arrives late", async () => {
+    const onVerify = vi.fn();
+    const state = reactive<{ proven?: string }>({});
+    const { container } = mount(() =>
+      h(HkMfaVerifyCard, {
+        factors: ["totp", "sms"],
+        proven: state.proven,
+        onVerify,
+      }));
+    await nextTick(); // settle the first paint before feeding the row
+    expect(otpCells(container)).toHaveLength(6); // totp selected first
+    typeInto(otpCells(container)[0]!, "11");
+    await nextTick();
+    // Step two: totp now proven — the card must reselect AND clear the
+    // half-typed code.
+    state.proven = "totp";
+    await nextTick();
+    expect(container.querySelector(".hk-otp-gap")).toBeTruthy(); // sms now selected
+    expect(otpCells(container).every((cell) => cell.value === "")).toBe(true);
+    expect(onVerify).not.toHaveBeenCalled();
+  });
+
+  it("wires the SMS resend and the back action", async () => {
+    const onResend = vi.fn();
+    const onBack = vi.fn();
+    const { container } = mount(() =>
+      h(HkMfaVerifyCard, { factors: ["sms"], onResend, onBack }));
+    buttonText(container, "Resend code")!.click();
+    await flush();
+    expect(onResend).toHaveBeenCalledTimes(1);
+    buttonText(container, "Back to sign in")!.click();
+    await flush();
+    expect(onBack).toHaveBeenCalledTimes(1);
+  });
+
+  it("omits the resend row outside the sms factor", () => {
+    const { container } = mount(() => h(HkMfaVerifyCard, { factors: ["totp"] }));
+    expect(buttonText(container, "Resend code")).toBeUndefined();
+  });
+
+  it("hides the picker entirely when nothing drivable is announced", () => {
+    const { container } = mount(() =>
+      h(HkMfaVerifyCard, { factors: ["iris-scan"] }));
+    expect(pickerButtons(container)).toHaveLength(0);
+    // Degenerate but alive: the card still renders its shell + actions.
+    expect(container.querySelector(".s-auth-card")).toBeTruthy();
+    expect(buttonText(container, "Back to sign in")).toBeTruthy();
+  });
+
+  it("clears the active proof through the exposed handle", async () => {
+    const onVerify = vi.fn();
+    const cardRef = ref<{ clearProof: () => void } | null>(null);
+    const { app, container } = mount(() =>
+      h(HkMfaVerifyCard, { factors: ["totp"], onVerify }));
+    cardRef.value = exposedOf(app);
+    // A PARTIAL code: a full one would autoSubmit mid-type and emit
+    // before the clear ever runs.
+    typeInto(otpCells(container)[0]!, "123");
+    await flush();
+    cardRef.value!.clearProof();
+    await flush();
+    expect(otpCells(container).every((cell) => cell.value === "")).toBe(true);
+    primaryButton(container).click();
+    await flush();
+    expect(onVerify).not.toHaveBeenCalled();
+  });
+
+  it("disables the actions while loading (the picker stays live)", () => {
+    const { container } = mount(() =>
+      h(HkMfaVerifyCard, { factors: ["passkey", "totp"], loading: true }));
+    // The passkey submit + the back action are out of the user's hands;
+    // the picker stays live — re-clicking the active factor is a radio
+    // no-op, and chest's panel kept it enabled during verify too.
+    expect(primaryButton(container).disabled).toBe(true);
+    const back = buttonText(container, "Back to sign in") as HTMLButtonElement;
+    expect(back.disabled).toBe(true);
+  });
+});

package/src/components/HkMfaVerifyCard.tsx

@@ -0,0 +1,421 @@
+import { computed, defineComponent, nextTick, ref, watch, type PropType } from "vue";
+import { Asterisk, Fingerprint, KeyRound, MessageSquareText } from "lucide-vue-next";
+
+import { useI18n } from "../i18n/context";
+import { HkAuthCard } from "./HkAuthCard";
+import HkAlert from "./HkAlert";
+import HkAuthSubmitButton from "./HkAuthSubmitButton";
+import HkButton from "./HkButton";
+import HkIconButtonGroup, { type HkIconButtonGroupOption } from "./HkIconButtonGroup";
+import HkInput from "./HkInput";
+import { HkOtpInput } from "./HkOtpInput";
+import HkLogo from "./HkLogo";
+
+import "./HkMfaVerifyCard.scss";
+
+/** Every second-factor kind this card can drive. The first three are the
+ *  classic second factors a backend announces after the primary login;
+ *  `password` joins the list in account-first flows, where the password is
+ *  proven on the verify step as one factor among the announced ones. */
+export const MFA_FACTOR_KINDS = ["passkey", "totp", "sms", "password"] as const;
+
+/** One announced second factor. */
+export type HkMfaFactor = (typeof MFA_FACTOR_KINDS)[number];
+
+/** Type-guard a raw announced kind (server payloads speak plain strings). */
+export function hkIsMfaFactor(kind: string): kind is HkMfaFactor {
+  return (MFA_FACTOR_KINDS as readonly string[]).includes(kind);
+}
+
+/** The factor a freshly opened verify panel starts on. Passkey leads the
+ *  ladder (phishing-resistant, one tap); the code entries follow for
+ *  accounts without one. `password` is deliberately NOT in the ladder —
+ *  it is the fallback choice, never the highlighted default when a
+ *  stronger factor exists. Returns null when nothing verifiable remains
+ *  (an empty list, or everything already proven). */
+export function hkPreferredMfaFactor(factors: readonly string[]): HkMfaFactor | null {
+  const announced = factors.filter(hkIsMfaFactor);
+  const ladder: readonly HkMfaFactor[] = ["passkey", "totp", "sms"];
+  return ladder.find((kind) => announced.includes(kind))
+    ?? (announced.includes("password") ? "password" : null);
+}
+
+/** Fill a locale string's `{token}` placeholders. hikari's `t()` is a flat
+ *  lookup by design, so messages carrying a name (the account being
+ *  verified, the already-proven factor) interpolate here. */
+function fill(template: string, values: Record<string, string>): string {
+  return template.replace(/\{(\w+)\}/g, (match, key: string) => values[key] ?? match);
+}
+
+/**
+ * HkMfaVerifyCard — the shared second-factor ("verify account", step-up)
+ * card for every Celestia front end: the factor picker (slider icon
+ * group) over the per-factor proof field, submit, and the secondary
+ * actions, inside the HkAuthCard shell.
+ *
+ * Control contract (same split as HkSignInCard): the card owns ALL local
+ * input state — the selected factor, the code cells, the password entry —
+ * and never talks to a backend. The consumer injects
+ * `onVerify(kind, proof)` and feeds the in-flight state back through
+ * `loading`; a passkey proof arrives as `kind="passkey"` with an empty
+ * string (the WebAuthn ceremony itself is the proof, and stays
+ * consumer-side where the authenticator policy lives). After a rejected
+ * proof the consumer calls `clearProof()` through the component ref so
+ * the next attempt starts from an empty field.
+ *
+ * Two-proof flows (an account that must present TWO DISTINCT factors)
+ * pass `proven`: the proven kind's picker entry wears the success marker,
+ * cannot be re-selected, and the default title/subtitle switch to the
+ * "one more verification" wording. The card re-selects and clears its
+ * fields whenever the announced set or the proven factor changes.
+ *
+ * i18n: every visible string defaults to the `hikari::mfaVerify.*` locales
+ * (11 languages ship with the card); `title` / `subtitle` overrides win
+ * when a host needs its own wording. `{name}` / `{proven}` placeholders in
+ * the derived subtitle are filled here.
+ *
+ * ```tsx
+ * <HMfaVerifyCard
+ *   factors={step.factors}
+ *   proven={proven.value}
+ *   account-name="demierge"
+ *   logo-src={logo}
+ *   loading={verifying.value}
+ *   onVerify={(kind, proof) => completeStepUp(kind, proof)}
+ *   onBack={() => (step.value = null)}
+ * />
+ * ```
+ */
+export const HkMfaVerifyCard = defineComponent({
+  name: "HkMfaVerifyCard",
+  props: {
+    /** The factor kinds this account announced, server order. Raw
+     *  strings are welcome — unknown kinds are filtered, and an emptied
+     *  list renders a picker-less card rather than a dead one. */
+    factors: { type: Array as PropType<readonly string[]>, default: () => [] },
+    /** The kind already proven in a two-proof flow: pinned with the
+     *  success marker, un-selectable, excluded from the default pick. */
+    proven: { type: String, default: undefined },
+    /** The account being verified — drives the "verifying {name}"
+     *  subtitle. Empty falls back to the generic subtitle. */
+    accountName: { type: String, default: "" },
+    /** Title override; defaults to the verify / step-two locale. */
+    title: { type: String, default: undefined },
+    /** Subtitle override; defaults to the account-aware derivation. */
+    subtitle: { type: String, default: undefined },
+    /** Optional logo image URL for the card header. */
+    logoSrc: { type: String, default: undefined },
+    /** External in-flight state; disables every control while true. */
+    loading: { type: Boolean, default: false },
+    /** Extra guard on top of the built-in in-flight checks. */
+    disabled: { type: Boolean, default: false },
+    /** In-flight state of the SMS resend; swaps the resend label. */
+    resending: { type: Boolean, default: false },
+    /** Advisory text under the passkey submit (a failed scoped ceremony
+     *  nudging toward the picker's other entries). Rendered only when
+     *  set — the consumer owns the failure bookkeeping that decides it. */
+    passkeyRetryHint: { type: String, default: undefined },
+    /** Focus the proof field when the card mounts (the verify step just
+     *  opened). Password re-focuses on every selection change too. */
+    autofocus: { type: Boolean, default: false },
+  },
+  emits: {
+    /** The user asks to prove `kind`; `proof` is the password text, the
+     *  composed code, or "" for passkey (the ceremony is consumer-side). */
+    verify: (_kind: HkMfaFactor, _proof: string) => true,
+    /** SMS resend requested (only wired while `sms` is selected). */
+    resend: () => true,
+    /** Abandon the step-up (back to the credentials card). */
+    back: () => true,
+  },
+  setup(props, { emit, slots, expose }) {
+    const { t } = useI18n();
+
+    /** Announced + drivable kinds, server order preserved. */
+    const knownFactors = computed(() => props.factors.filter(hkIsMfaFactor));
+    /** The proven kind — only if it is one the card can name. */
+    const provenKind = computed(() =>
+      props.proven && hkIsMfaFactor(props.proven) ? props.proven : null);
+    /** The kinds still selectable this visit (two-proof flow skips the
+     *  pinned one — it is DONE, not a candidate for the next proof). */
+    const selectableFactors = computed(() =>
+      knownFactors.value.filter((kind) => kind !== provenKind.value));
+
+    const selected = ref<HkMfaFactor>("totp");
+    const code = ref("");
+    const password = ref("");
+
+    /** (Re)select the default factor for the current visit state and
+     *  clear both proof fields. Runs at mount and whenever the announced
+     *  set or the proven factor changes (the two-proof step-two re-arm). */
+    function rearm() {
+      const list = selectableFactors.value;
+      selected.value = hkPreferredMfaFactor(list) ?? list[0] ?? "password";
+      code.value = "";
+      password.value = "";
+      if (props.autofocus && selected.value === "password") focusPassword();
+    }
+
+    watch(
+      () => `${knownFactors.value.join(",")}|${provenKind.value ?? ""}`,
+      () => rearm(),
+    );
+    rearm();
+
+    // ── proof-field focus ────────────────────────────────────────────
+    const passwordRef = ref<{ $el?: HTMLElement } | null>(null);
+    function focusPassword() {
+      void nextTick(() => {
+        (passwordRef.value?.$el as HTMLElement | undefined)
+          ?.querySelector("input")
+          ?.focus();
+      });
+    }
+
+    /** Switching factors starts a fresh proof (a half-typed code must
+     *  not leak into the SMS entry); the password entry takes focus so a
+     *  single-factor password account can type straight away. */
+    function onSelect(next: string | string[]) {
+      const value = Array.isArray(next) ? next[0] : next;
+      if (!hkIsMfaFactor(value) || !selectableFactors.value.includes(value)) return;
+      if (value === selected.value) return;
+      selected.value = value;
+      code.value = "";
+      password.value = "";
+      if (props.autofocus && value === "password") focusPassword();
+    }
+
+    async function attemptVerify(): Promise<void> {
+      if (props.loading || props.disabled) return;
+      const kind = selected.value;
+      // The submit buttons disable themselves on an incomplete proof;
+      // this guard keeps the Enter/auto-submit paths honest.
+      if (kind === "passkey") {
+        emit("verify", "passkey", "");
+        return;
+      }
+      if (kind === "password") {
+        if (!password.value) return;
+        emit("verify", "password", password.value);
+        return;
+      }
+      if (code.value.trim().length < 6) return;
+      emit("verify", kind, code.value.trim());
+    }
+
+    /** Consumer handles: `clearProof` empties the active field after a
+     *  rejected proof; `focusPassword` re-arms the password entry's
+     *  focus; `selectedFactor` reports the factor on stage (a step-two
+     *  host needs the kind it just proved when the server does not echo
+     *  it back). */
+    function clearProof() {
+      code.value = "";
+      password.value = "";
+    }
+
+    expose({
+      clearProof,
+      focusPassword,
+      selectedFactor: () => selected.value,
+    });
+
+    // ── derived strings ──────────────────────────────────────────────
+    const factorLabel = (kind: HkMfaFactor): string => {
+      if (kind === "passkey") return t("hikari::mfaVerify.factorPasskey", "Passkey");
+      if (kind === "totp") return t("hikari::mfaVerify.factorTotp", "TOTP authenticator app");
+      if (kind === "password") return t("hikari::mfaVerify.factorPassword", "Account password");
+      return t("hikari::mfaVerify.factorSms", "SMS code");
+    };
+
+    const titleText = computed(() => {
+      if (props.title !== undefined) return props.title;
+      return provenKind.value
+        ? t("hikari::mfaVerify.step2Title", "One more verification")
+        : t("hikari::mfaVerify.title", "Verify account");
+    });
+
+    const subtitleText = computed(() => {
+      if (props.subtitle !== undefined) return props.subtitle;
+      const name = props.accountName;
+      if (provenKind.value) {
+        const proven = factorLabel(provenKind.value);
+        return name
+          ? fill(t("hikari::mfaVerify.step2Subtitle",
+            "{proven} passed — choose one more method to finish signing in to {name}"),
+            { proven, name })
+          : fill(t("hikari::mfaVerify.step2SubtitleGeneric",
+            "Verified via {proven} — choose one more method to finish signing in"),
+            { proven });
+      }
+      return name
+        ? fill(t("hikari::mfaVerify.verifySubtitle",
+          "Verifying {name} — complete a sign-in method to continue"), { name })
+        : t("hikari::mfaVerify.subtitle", "This account requires an extra verification step");
+    });
+
+    /** Glyph per factor for the icon-only picker — the labels ride the
+     *  tooltip. The password entry wears the asterisk, the dot-matrix
+     *  sign-in input's own shape. */
+    const factorIcon = (kind: HkMfaFactor) => {
+      if (kind === "passkey") return <Fingerprint size={22} />;
+      if (kind === "totp") return <KeyRound size={22} />;
+      if (kind === "password") return <Asterisk size={22} />;
+      return <MessageSquareText size={22} />;
+    };
+
+    const pickerOptions = computed<HkIconButtonGroupOption[]>(() =>
+      knownFactors.value.map((kind) => {
+        // Two-proof step two: the proven factor is DONE — it stays in the
+        // picker pinned (success marker, disabled, "already verified"
+        // tooltip) so the user can see what they already presented, but
+        // it is not a candidate for the next proof.
+        if (kind === provenKind.value) {
+          return {
+            key: kind,
+            label: factorLabel(kind),
+            icon: factorIcon(kind),
+            disabled: true,
+            marker: "success" as const,
+            tooltip: t("hikari::mfaVerify.provenTooltip", "Already verified"),
+          };
+        }
+        return {
+          key: kind,
+          label: factorLabel(kind),
+          icon: factorIcon(kind),
+        };
+      }));
+
+    // Resolved per render: a runtime locale switch must reach the
+    // in-flight labels on the next render, not stay frozen at setup.
+    const busyLabel = () => t("hikari::mfaVerify.loading", "Verifying…");
+
+    return () => (
+      <HkAuthCard title={titleText.value} subtitle={subtitleText.value}>
+        {{
+          logo: () =>
+            slots.logo
+              ? slots.logo()
+              : props.logoSrc
+                ? <HkLogo size="lg" src={props.logoSrc} />
+                : null,
+          default: () => (
+            <>
+              {pickerOptions.value.length > 0 && (
+                <div class="s-mfa-factors">
+                  <HkIconButtonGroup
+                    mode="single"
+                    variant="slider"
+                    modelValue={selected.value}
+                    onUpdate:modelValue={onSelect}
+                    aria-label={titleText.value}
+                    options={pickerOptions.value}
+                  />
+                </div>
+              )}
+              {selected.value === "passkey" ? (
+                <>
+                  {/* Exactly ONE primary action per factor — the passkey
+                      ceremony IS the step-up, so pairing it with a generic
+                      code submit drew two equal-weight buttons that ran
+                      the same handler (user report 2026-09-18). */}
+                  <HkAuthSubmitButton
+                    label={props.loading ? busyLabel()
+                      : t("hikari::mfaVerify.usePasskey", "Verify with Passkey")}
+                    block
+                    loading={props.loading}
+                    disabled={props.loading || props.disabled}
+                    doSubmit={attemptVerify}
+                  />
+                  {props.passkeyRetryHint && (
+                    <HkAlert
+                      variant="warning"
+                      size="sm"
+                      message={props.passkeyRetryHint}
+                    />
+                  )}
+                </>
+              ) : selected.value === "password" ? (
+                <>
+                  {/* The password factor re-wears the exact sign-in
+                      input (dot-matrix surface, hold-to-reveal). */}
+                  <HkInput
+                    ref={passwordRef}
+                    variant="password"
+                    modelValue={password.value}
+                    onUpdate:modelValue={(v: string) => (password.value = v)}
+                    name="mfa-verify-password"
+                    autocomplete="current-password"
+                    placeholder={t("hikari::mfaVerify.passwordPlaceholder", "Enter your password")}
+                    disabled={props.loading || props.disabled}
+                    submitOnEnter={attemptVerify}
+                  />
+                  <HkAuthSubmitButton
+                    label={props.loading ? busyLabel()
+                      : t("hikari::mfaVerify.verify", "Verify and sign in")}
+                    block
+                    loading={props.loading}
+                    disabled={props.loading || props.disabled || !password.value}
+                    doSubmit={attemptVerify}
+                  />
+                </>
+              ) : (
+                <>
+                  <HkOtpInput
+                    modelValue={code.value}
+                    onUpdate:modelValue={(v: string) => (code.value = v)}
+                    length={6}
+                    // SMS codes are handed out in the "123 456" shape; the
+                    // split mirrors what the user is reading off the phone.
+                    separated={selected.value === "sms"}
+                    autofocus={props.autofocus}
+                    ariaLabel={t("hikari::mfaVerify.codeFields", "Verification code")}
+                    cellAriaLabel={(index: number) =>
+                      fill(t("hikari::mfaVerify.codeCell", "Digit {index}"), { index: String(index) })}
+                    hint={selected.value === "totp"
+                      ? t("hikari::mfaVerify.totpHint", "Enter the 6-digit TOTP code")
+                      : t("hikari::mfaVerify.smsHint", "Enter the 6-digit SMS code")}
+                    disabled={props.loading || props.disabled}
+                    autoSubmit
+                    submitOnEnter={attemptVerify}
+                  />
+                  <HkAuthSubmitButton
+                    label={props.loading ? busyLabel()
+                      : t("hikari::mfaVerify.verify", "Verify and sign in")}
+                    block
+                    loading={props.loading}
+                    disabled={props.loading || props.disabled || code.value.trim().length < 6}
+                    doSubmit={attemptVerify}
+                  />
+                </>
+              )}
+              {selected.value === "sms" && (
+                <HkButton
+                  variant="ghost"
+                  size="md"
+                  block
+                  disabled={props.resending || props.loading || props.disabled}
+                  onClick={() => emit("resend")}
+                >
+                  {props.resending ? busyLabel()
+                    : t("hikari::mfaVerify.resend", "Resend code")}
+                </HkButton>
+              )}
+              <HkButton
+                variant="ghost"
+                size="md"
+                block
+                disabled={props.loading}
+                onClick={() => emit("back")}
+              >
+                {t("hikari::mfaVerify.back", "Back to sign in")}
+              </HkButton>
+            </>
+          ),
+        }}
+      </HkAuthCard>
+    );
+  },
+});
+
+export default HkMfaVerifyCard;

package/src/components/HkOtpInput.scss

@@ -194,12 +194,25 @@
   margin: var(--space-6, 0.375rem) 0 0;
   font-size: var(--text-xs, 0.75rem);
   color: rgb(var(--color-error));
+  /* The messages belong to the row's visual system, and the row centers
+   * itself unconditionally (`.hk-otp` is a flex `justify-content: center`
+   * line with no opt-out). A paragraph left at the page's default `start`
+   * alignment therefore hugs the host card's left edge under a centered
+   * row — the deployed chest step-up panel showed the TOTP hint pinned
+   * left below centered cells (user screenshot, 2026-09-23). Both message
+   * variants follow the row's own centering, so a wrapped second line
+   * stays balanced too. Hosts that want start-aligned messages can still
+   * override the paragraphs from outside; the class carries no extra
+   * specificity, so a one-class host rule wins. */
+  text-align: center;
 }
 
 .hk-otp-hint {
   margin: var(--space-6, 0.375rem) 0 0;
   font-size: var(--text-xs, 0.75rem);
   color: rgb(var(--color-muted));
+  /* Same centering contract as the error message above. */
+  text-align: center;
 }
 
 /* Narrow viewports: shrink the ramps a step so a phone card shows the row

package/src/components/HkOtpInput.styles.test.ts

@@ -0,0 +1,69 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { compile } from "sass";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Centering contract for the HkOtpInput messages.
+ *
+ * The cell row (`.hk-otp`) centers itself unconditionally — flex
+ * `justify-content: center` with no opt-out — and every host card around
+ * it (HkAuthCard header, chest's step-up panel) centers too. The hint and
+ * error paragraphs therefore must carry their own `text-align: center`:
+ * left at the page's default `start`, the TOTP hint hugged the card's
+ * left edge under centered cells (user screenshot on the deployed chest
+ * step-up panel, 2026-09-23).
+ *
+ * The assertions run on the COMPILED sheet, not the source text, so a
+ * declaration cannot hide behind SCSS nesting, and comments are stripped
+ * first so a commented-out `text-align` cannot keep a hollow guard green.
+ */
+const componentDir = resolve(dirname(fileURLToPath(import.meta.url)));
+
+function otpCss(): string {
+  const file = resolve(componentDir, "HkOtpInput.scss");
+  return compile(file, { style: "expanded", loadPaths: [componentDir] }).css.replace(
+    /\/\*[\s\S]*?\*\//g,
+    "",
+  );
+}
+
+function ruleBody(css: string, selector: string): string | null {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const m = css.match(new RegExp(`${escaped}\\s*\\{([^}]*)\\}`));
+  return m ? m[1]! : null;
+}
+
+describe("HkOtpInput message centering", () => {
+  const css = otpCss();
+
+  it("compiles", () => {
+    expect(css.length).toBeGreaterThan(0);
+    // Sanity anchors so a renamed file cannot hollow this guard.
+    expect(css).toContain(".hk-otp-hint");
+    expect(css).toContain(".hk-otp-error-msg");
+  });
+
+  it("centers the hint under the centered cell row", () => {
+    const body = ruleBody(css, ".hk-otp-hint");
+    expect(body, "the hint rule exists").not.toBeNull();
+    expect(body).toContain("text-align: center");
+  });
+
+  it("centers the error message the same way", () => {
+    const body = ruleBody(css, ".hk-otp-error-msg");
+    expect(body, "the error-message rule exists").not.toBeNull();
+    expect(body).toContain("text-align: center");
+  });
+
+  it("keeps the row's own centering unconditional", () => {
+    // The contract above only makes sense while the row stays centered:
+    // if the row ever grows an alignment opt-out, these messages need to
+    // follow it instead of pinning `center` outright.
+    const body = ruleBody(css, ".hk-otp");
+    expect(body, "the row rule exists").not.toBeNull();
+    expect(body).toContain("justify-content: center");
+  });
+});

package/src/i18n/locales/ar/components.json

@@ -220,5 +220,26 @@
   "hikari::tagInput.reorder": "إعادة الترتيب — {label}",
   "hikari::modal.hiddenLayers": "الطبقات المخفية",
   "hikari::theme.modeTabHint": "هذه التبويبات تختار لوحة الألوان التي تحرّرها؛ لتبديل الوضع الفاتح/الداكن للتطبيق كله استخدم شريط الأوضاع أعلى نافذة السمة.",
-  "hikari::emptyState.loading": "جارٍ التحميل"
+  "hikari::emptyState.loading": "جارٍ التحميل",
+  "hikari::mfaVerify.title": "التحقق من الحساب",
+  "hikari::mfaVerify.verifySubtitle": "جارٍ التحقق من {name} — أكمل طريقة تسجيل الدخول للمتابعة",
+  "hikari::mfaVerify.subtitle": "يتطلب هذا الحساب خطوة تحقق إضافية",
+  "hikari::mfaVerify.step2Title": "تحقق إضافي واحد",
+  "hikari::mfaVerify.step2Subtitle": "تم التحقق عبر {proven} — اختر طريقة أخرى لإكمال تسجيل دخول {name}",
+  "hikari::mfaVerify.step2SubtitleGeneric": "تم التحقق عبر {proven} — اختر طريقة أخرى لإكمال تسجيل الدخول",
+  "hikari::mfaVerify.factorPasskey": "مفتاح المرور",
+  "hikari::mfaVerify.factorTotp": "تطبيق مصادقة TOTP",
+  "hikari::mfaVerify.factorSms": "رمز SMS",
+  "hikari::mfaVerify.factorPassword": "كلمة مرور الحساب",
+  "hikari::mfaVerify.provenTooltip": "تم التحقق",
+  "hikari::mfaVerify.codeFields": "رمز التحقق",
+  "hikari::mfaVerify.codeCell": "الخانة {index}",
+  "hikari::mfaVerify.totpHint": "أدخل رمز TOTP المكوّن من 6 أرقام",
+  "hikari::mfaVerify.smsHint": "أدخل رمز الرسالة المكوّن من 6 أرقام",
+  "hikari::mfaVerify.passwordPlaceholder": "أدخل كلمة المرور",
+  "hikari::mfaVerify.verify": "تحقق وسجّل الدخول",
+  "hikari::mfaVerify.usePasskey": "التحقق بمفتاح المرور",
+  "hikari::mfaVerify.resend": "إعادة إرسال الرمز",
+  "hikari::mfaVerify.back": "العودة لتسجيل الدخول",
+  "hikari::mfaVerify.loading": "جارٍ التحميل..."
 }

package/src/i18n/locales/de/components.json

@@ -220,5 +220,26 @@
   "hikari::tagInput.reorder": "Neu anordnen — {label}",
   "hikari::modal.hiddenLayers": "Verdeckte Ebenen",
   "hikari::theme.modeTabHint": "Diese Reiter wählen die zu bearbeitende Palette; die appweite Hell/Dunkel-Umschaltung liegt im Modusstreifen des Themen-Popups.",
-  "hikari::emptyState.loading": "Wird geladen"
+  "hikari::emptyState.loading": "Wird geladen",
+  "hikari::mfaVerify.title": "Konto verifizieren",
+  "hikari::mfaVerify.verifySubtitle": "{name} wird verifiziert — Anmeldung abschließen, um fortzufahren",
+  "hikari::mfaVerify.subtitle": "Dieses Konto erfordert einen zusätzlichen Verifizierungsschritt",
+  "hikari::mfaVerify.step2Title": "Noch eine Verifizierung",
+  "hikari::mfaVerify.step2Subtitle": "{proven} bestanden — wählen Sie eine weitere Methode, um die Anmeldung von {name} abzuschließen",
+  "hikari::mfaVerify.step2SubtitleGeneric": "{proven} bestanden — wählen Sie eine weitere Methode, um die Anmeldung abzuschließen",
+  "hikari::mfaVerify.factorPasskey": "Passkey",
+  "hikari::mfaVerify.factorTotp": "TOTP-Authenticator-App",
+  "hikari::mfaVerify.factorSms": "SMS-Code",
+  "hikari::mfaVerify.factorPassword": "Kontopasswort",
+  "hikari::mfaVerify.provenTooltip": "Bereits verifiziert",
+  "hikari::mfaVerify.codeFields": "Bestätigungscode",
+  "hikari::mfaVerify.codeCell": "Ziffer {index}",
+  "hikari::mfaVerify.totpHint": "6-stelligen TOTP-Code eingeben",
+  "hikari::mfaVerify.smsHint": "6-stelligen SMS-Code eingeben",
+  "hikari::mfaVerify.passwordPlaceholder": "Passwort eingeben",
+  "hikari::mfaVerify.verify": "Verifizieren und anmelden",
+  "hikari::mfaVerify.usePasskey": "Mit Passkey verifizieren",
+  "hikari::mfaVerify.resend": "Code erneut senden",
+  "hikari::mfaVerify.back": "Zurück zur Anmeldung",
+  "hikari::mfaVerify.loading": "Laden..."
 }

package/src/i18n/locales/en/components.json

@@ -220,5 +220,26 @@
   "hikari::tagInput.reorder": "Reorder {label}",
   "hikari::modal.hiddenLayers": "Hidden layers",
   "hikari::theme.modeTabHint": "These tabs pick which palette you are EDITING; to switch the app-wide light/dark, use the mode strip at the top of the theme popup.",
-  "hikari::emptyState.loading": "Loading"
+  "hikari::emptyState.loading": "Loading",
+  "hikari::mfaVerify.title": "Verify account",
+  "hikari::mfaVerify.verifySubtitle": "Verifying {name} — complete a sign-in method to continue",
+  "hikari::mfaVerify.subtitle": "This account requires an extra verification step",
+  "hikari::mfaVerify.step2Title": "One more verification",
+  "hikari::mfaVerify.step2Subtitle": "{proven} passed — choose one more method to finish signing in to {name}",
+  "hikari::mfaVerify.step2SubtitleGeneric": "Verified via {proven} — choose one more method to finish signing in",
+  "hikari::mfaVerify.factorPasskey": "Passkey",
+  "hikari::mfaVerify.factorTotp": "TOTP authenticator app",
+  "hikari::mfaVerify.factorSms": "SMS code",
+  "hikari::mfaVerify.factorPassword": "Account password",
+  "hikari::mfaVerify.provenTooltip": "Already verified",
+  "hikari::mfaVerify.codeFields": "Verification code",
+  "hikari::mfaVerify.codeCell": "Digit {index}",
+  "hikari::mfaVerify.totpHint": "Enter the 6-digit TOTP code",
+  "hikari::mfaVerify.smsHint": "Enter the 6-digit SMS code",
+  "hikari::mfaVerify.passwordPlaceholder": "Enter your password",
+  "hikari::mfaVerify.verify": "Verify and sign in",
+  "hikari::mfaVerify.usePasskey": "Verify with Passkey",
+  "hikari::mfaVerify.resend": "Resend code",
+  "hikari::mfaVerify.back": "Back to sign in",
+  "hikari::mfaVerify.loading": "Loading..."
 }

package/src/i18n/locales/es/components.json

@@ -220,5 +220,26 @@
   "hikari::tagInput.reorder": "Reordenar — {label}",
   "hikari::modal.hiddenLayers": "Capas ocultas",
   "hikari::theme.modeTabHint": "Estas pestañas eligen la paleta que estás EDITANDO; para cambiar el modo claro/oscuro de toda la app, usa la franja de modos de la parte superior del panel de temas.",
-  "hikari::emptyState.loading": "Cargando"
+  "hikari::emptyState.loading": "Cargando",
+  "hikari::mfaVerify.title": "Verificar cuenta",
+  "hikari::mfaVerify.verifySubtitle": "Verificando {name}: completa un método de acceso para continuar",
+  "hikari::mfaVerify.subtitle": "Esta cuenta requiere un paso de verificación adicional",
+  "hikari::mfaVerify.step2Title": "Una verificación más",
+  "hikari::mfaVerify.step2Subtitle": "{proven} superado: elige otro método para terminar de iniciar sesión en {name}",
+  "hikari::mfaVerify.step2SubtitleGeneric": "{proven} superado: elige otro método para terminar de iniciar sesión",
+  "hikari::mfaVerify.factorPasskey": "Llave de acceso",
+  "hikari::mfaVerify.factorTotp": "Aplicación de autenticación TOTP",
+  "hikari::mfaVerify.factorSms": "Código SMS",
+  "hikari::mfaVerify.factorPassword": "Contraseña de la cuenta",
+  "hikari::mfaVerify.provenTooltip": "Ya verificado",
+  "hikari::mfaVerify.codeFields": "Código de verificación",
+  "hikari::mfaVerify.codeCell": "Dígito {index}",
+  "hikari::mfaVerify.totpHint": "Introduce el código TOTP de 6 dígitos",
+  "hikari::mfaVerify.smsHint": "Introduce el código SMS de 6 dígitos",
+  "hikari::mfaVerify.passwordPlaceholder": "Introduce la contraseña",
+  "hikari::mfaVerify.verify": "Verificar e iniciar sesión",
+  "hikari::mfaVerify.usePasskey": "Verificar con llave de acceso",
+  "hikari::mfaVerify.resend": "Reenviar código",
+  "hikari::mfaVerify.back": "Volver al inicio de sesión",
+  "hikari::mfaVerify.loading": "Cargando..."
 }

package/src/i18n/locales/fr/components.json

@@ -220,5 +220,26 @@
   "hikari::tagInput.reorder": "Réorganiser — {label}",
   "hikari::modal.hiddenLayers": "Couches masquées",
   "hikari::theme.modeTabHint": "Ces onglets choisissent la palette éditée ; pour basculer clair/sombre dans toute l’app, utilisez la barre de mode du menu de thème.",
-  "hikari::emptyState.loading": "Chargement"
+  "hikari::emptyState.loading": "Chargement",
+  "hikari::mfaVerify.title": "Vérifier le compte",
+  "hikari::mfaVerify.verifySubtitle": "Vérification de {name} — terminez une méthode de connexion pour continuer",
+  "hikari::mfaVerify.subtitle": "Ce compte nécessite une étape de vérification supplémentaire",
+  "hikari::mfaVerify.step2Title": "Une vérification de plus",
+  "hikari::mfaVerify.step2Subtitle": "{proven} validé — choisissez une autre méthode pour terminer la connexion de {name}",
+  "hikari::mfaVerify.step2SubtitleGeneric": "{proven} validé — choisissez une autre méthode pour terminer la connexion",
+  "hikari::mfaVerify.factorPasskey": "Clé d'accès",
+  "hikari::mfaVerify.factorTotp": "Application d'authentification TOTP",
+  "hikari::mfaVerify.factorSms": "Code SMS",
+  "hikari::mfaVerify.factorPassword": "Mot de passe du compte",
+  "hikari::mfaVerify.provenTooltip": "Déjà vérifié",
+  "hikari::mfaVerify.codeFields": "Code de vérification",
+  "hikari::mfaVerify.codeCell": "Chiffre {index}",
+  "hikari::mfaVerify.totpHint": "Saisissez le code TOTP à 6 chiffres",
+  "hikari::mfaVerify.smsHint": "Saisissez le code SMS à 6 chiffres",
+  "hikari::mfaVerify.passwordPlaceholder": "Saisissez votre mot de passe",
+  "hikari::mfaVerify.verify": "Vérifier et se connecter",
+  "hikari::mfaVerify.usePasskey": "Vérifier avec une clé d'accès",
+  "hikari::mfaVerify.resend": "Renvoyer le code",
+  "hikari::mfaVerify.back": "Retour à la connexion",
+  "hikari::mfaVerify.loading": "Chargement..."
 }

package/src/i18n/locales/ja/components.json

@@ -220,5 +220,26 @@
   "hikari::tagInput.reorder": "並べ替え — {label}",
   "hikari::modal.hiddenLayers": "非表示の階層",
   "hikari::theme.modeTabHint": "このタブは編集対象のパレットを選ぶだけです。アプリ全体の明/暗はテーマポップアップ上部のモードストリップで切り替えてください。",
-  "hikari::emptyState.loading": "読み込み中"
+  "hikari::emptyState.loading": "読み込み中",
+  "hikari::mfaVerify.title": "アカウントの確認",
+  "hikari::mfaVerify.verifySubtitle": "{name} の本人確認を続行します",
+  "hikari::mfaVerify.subtitle": "このアカウントでは追加の認証手順が必要です",
+  "hikari::mfaVerify.step2Title": "あと 1 つの確認が必要です",
+  "hikari::mfaVerify.step2Subtitle": "{proven} は確認済み — {name} のサインインを完了するため、もう 1 つの方法を選択してください",
+  "hikari::mfaVerify.step2SubtitleGeneric": "{proven} は確認済み — サインインを完了するため、もう 1 つの方法を選択してください",
+  "hikari::mfaVerify.factorPasskey": "パスキー",
+  "hikari::mfaVerify.factorTotp": "TOTP 認証アプリ",
+  "hikari::mfaVerify.factorSms": "SMS コード",
+  "hikari::mfaVerify.factorPassword": "アカウントのパスワード",
+  "hikari::mfaVerify.provenTooltip": "確認済み",
+  "hikari::mfaVerify.codeFields": "確認コード",
+  "hikari::mfaVerify.codeCell": "{index} 桁目",
+  "hikari::mfaVerify.totpHint": "TOTP 認証アプリに表示される 6 桁のコードを入力",
+  "hikari::mfaVerify.smsHint": "6 桁のSMSコードを入力",
+  "hikari::mfaVerify.passwordPlaceholder": "パスワードを入力",
+  "hikari::mfaVerify.verify": "認証してログイン",
+  "hikari::mfaVerify.usePasskey": "パスキーで認証",
+  "hikari::mfaVerify.resend": "コードを再送",
+  "hikari::mfaVerify.back": "ログインに戻る",
+  "hikari::mfaVerify.loading": "読み込み中..."
 }

package/src/i18n/locales/ko/components.json

@@ -220,5 +220,26 @@
   "hikari::tagInput.reorder": "순서 변경 — {label}",
   "hikari::modal.hiddenLayers": "숨겨진 레이어",
   "hikari::theme.modeTabHint": "이 탭은 편집할 팔레트를 고를 뿐입니다. 앱 전체 밝기/어둠은 테마 팝업 상단의 모드 스트립에서 바꾸세요.",
-  "hikari::emptyState.loading": "불러오는 중"
+  "hikari::emptyState.loading": "불러오는 중",
+  "hikari::mfaVerify.title": "계정 확인",
+  "hikari::mfaVerify.verifySubtitle": "{name} 님의 신원을 확인하여 로그인을 계속하세요",
+  "hikari::mfaVerify.subtitle": "이 계정은 추가 인증 절차가 필요합니다",
+  "hikari::mfaVerify.step2Title": "한 가지 더 인증이 필요합니다",
+  "hikari::mfaVerify.step2Subtitle": "{proven} 통과 — {name} 님의 로그인을 완료하려면 다른 방법을 하나 더 선택하세요",
+  "hikari::mfaVerify.step2SubtitleGeneric": "{proven} 통과 — 로그인을 완료하려면 다른 방법을 하나 더 선택하세요",
+  "hikari::mfaVerify.factorPasskey": "패스키",
+  "hikari::mfaVerify.factorTotp": "TOTP 인증 앱",
+  "hikari::mfaVerify.factorSms": "SMS 코드",
+  "hikari::mfaVerify.factorPassword": "계정 비밀번호",
+  "hikari::mfaVerify.provenTooltip": "인증 완료",
+  "hikari::mfaVerify.codeFields": "인증 코드",
+  "hikari::mfaVerify.codeCell": "{index}번째 자리",
+  "hikari::mfaVerify.totpHint": "TOTP 인증 앱에 표시된 6자리 코드를 입력하세요",
+  "hikari::mfaVerify.smsHint": "6자리 SMS 코드를 입력하세요",
+  "hikari::mfaVerify.passwordPlaceholder": "비밀번호를 입력",
+  "hikari::mfaVerify.verify": "인증 후 로그인",
+  "hikari::mfaVerify.usePasskey": "패스키로 인증",
+  "hikari::mfaVerify.resend": "코드 재전송",
+  "hikari::mfaVerify.back": "로그인으로 돌아가기",
+  "hikari::mfaVerify.loading": "로딩 중..."
 }

package/src/i18n/locales/pt/components.json

@@ -220,5 +220,26 @@
   "hikari::tagInput.reorder": "Reordenar — {label}",
   "hikari::modal.hiddenLayers": "Camadas ocultas",
   "hikari::theme.modeTabHint": "Estas abas escolhem a paleta que você está EDITANDO; para alternar o claro/escuro do app inteiro, use a faixa de modos no topo do painel de temas.",
-  "hikari::emptyState.loading": "Carregando"
+  "hikari::emptyState.loading": "Carregando",
+  "hikari::mfaVerify.title": "Verificar conta",
+  "hikari::mfaVerify.verifySubtitle": "Verificando {name} — conclua um método de acesso para continuar",
+  "hikari::mfaVerify.subtitle": "Esta conta exige uma etapa adicional de verificação",
+  "hikari::mfaVerify.step2Title": "Mais uma verificação",
+  "hikari::mfaVerify.step2Subtitle": "{proven} aprovado — escolha mais um método para concluir o login de {name}",
+  "hikari::mfaVerify.step2SubtitleGeneric": "{proven} aprovado — escolha mais um método para concluir o login",
+  "hikari::mfaVerify.factorPasskey": "Chave de acesso",
+  "hikari::mfaVerify.factorTotp": "Aplicativo autenticador TOTP",
+  "hikari::mfaVerify.factorSms": "Código SMS",
+  "hikari::mfaVerify.factorPassword": "Senha da conta",
+  "hikari::mfaVerify.provenTooltip": "Já verificado",
+  "hikari::mfaVerify.codeFields": "Código de verificação",
+  "hikari::mfaVerify.codeCell": "Dígito {index}",
+  "hikari::mfaVerify.totpHint": "Digite o código TOTP de 6 dígitos",
+  "hikari::mfaVerify.smsHint": "Insira o código SMS de 6 dígitos",
+  "hikari::mfaVerify.passwordPlaceholder": "Digite sua senha",
+  "hikari::mfaVerify.verify": "Verificar e entrar",
+  "hikari::mfaVerify.usePasskey": "Verificar com chave de acesso",
+  "hikari::mfaVerify.resend": "Reenviar código",
+  "hikari::mfaVerify.back": "Voltar ao login",
+  "hikari::mfaVerify.loading": "Carregando..."
 }

package/src/i18n/locales/ru/components.json

@@ -220,5 +220,26 @@
   "hikari::tagInput.reorder": "Изменить порядок — {label}",
   "hikari::modal.hiddenLayers": "Скрытые слои",
   "hikari::theme.modeTabHint": "Вкладки выбирают редактируемую палитру; общесистемное переключение светлой/тёмной — в полосе режимов вверху меню темы.",
-  "hikari::emptyState.loading": "Загрузка"
+  "hikari::emptyState.loading": "Загрузка",
+  "hikari::mfaVerify.title": "Подтверждение аккаунта",
+  "hikari::mfaVerify.verifySubtitle": "Проверка {name} — завершите вход, чтобы продолжить",
+  "hikari::mfaVerify.subtitle": "Для этой учётной записи требуется дополнительный шаг проверки",
+  "hikari::mfaVerify.step2Title": "Ещё одна проверка",
+  "hikari::mfaVerify.step2Subtitle": "{proven} пройден — выберите ещё один способ, чтобы завершить вход {name}",
+  "hikari::mfaVerify.step2SubtitleGeneric": "{proven} пройден — выберите ещё один способ, чтобы завершить вход",
+  "hikari::mfaVerify.factorPasskey": "Ключ доступа",
+  "hikari::mfaVerify.factorTotp": "Приложение-аутентификатор TOTP",
+  "hikari::mfaVerify.factorSms": "SMS-код",
+  "hikari::mfaVerify.factorPassword": "Пароль аккаунта",
+  "hikari::mfaVerify.provenTooltip": "Уже подтверждено",
+  "hikari::mfaVerify.codeFields": "Код подтверждения",
+  "hikari::mfaVerify.codeCell": "Цифра {index}",
+  "hikari::mfaVerify.totpHint": "Введите 6-значный код TOTP",
+  "hikari::mfaVerify.smsHint": "Введите 6-значный код из СМС",
+  "hikari::mfaVerify.passwordPlaceholder": "Введите пароль",
+  "hikari::mfaVerify.verify": "Подтвердить и войти",
+  "hikari::mfaVerify.usePasskey": "Подтвердить ключом доступа",
+  "hikari::mfaVerify.resend": "Отправить код повторно",
+  "hikari::mfaVerify.back": "Вернуться к входу",
+  "hikari::mfaVerify.loading": "Загрузка..."
 }

package/src/i18n/locales/zh-Hans/components.json

@@ -224,5 +224,26 @@
   "hikari::tagInput.reorder": "拖动排序 — {label}",
   "hikari::modal.hiddenLayers": "隐藏层级",
   "hikari::theme.modeTabHint": "切换这里编辑的是对应模式的调色板；要切换应用整体深/浅，请用主题弹窗顶部的模式条。",
-  "hikari::emptyState.loading": "加载中"
+  "hikari::emptyState.loading": "加载中",
+  "hikari::mfaVerify.title": "验证账户",
+  "hikari::mfaVerify.verifySubtitle": "正在验证 {name} 的身份，请完成验证以继续登录",
+  "hikari::mfaVerify.subtitle": "此账户已启用额外安全验证,请完成验证以继续",
+  "hikari::mfaVerify.step2Title": "还需再选一种验证",
+  "hikari::mfaVerify.step2Subtitle": "{proven} 已通过 — 请再选一种方式完成 {name} 的登录",
+  "hikari::mfaVerify.step2SubtitleGeneric": "已通过 {proven} — 请再选一种方式完成登录",
+  "hikari::mfaVerify.factorPasskey": "Passkey",
+  "hikari::mfaVerify.factorTotp": "TOTP 验证器应用",
+  "hikari::mfaVerify.factorSms": "短信验证码",
+  "hikari::mfaVerify.factorPassword": "账户密码",
+  "hikari::mfaVerify.provenTooltip": "已通过验证",
+  "hikari::mfaVerify.codeFields": "验证码",
+  "hikari::mfaVerify.codeCell": "第 {index} 位",
+  "hikari::mfaVerify.totpHint": "输入 TOTP 验证器显示的 6 位动态验证码",
+  "hikari::mfaVerify.smsHint": "输入 6 位短信验证码",
+  "hikari::mfaVerify.passwordPlaceholder": "输入账户密码",
+  "hikari::mfaVerify.verify": "验证并登录",
+  "hikari::mfaVerify.usePasskey": "使用 Passkey 验证",
+  "hikari::mfaVerify.resend": "重新发送验证码",
+  "hikari::mfaVerify.back": "返回重新登录",
+  "hikari::mfaVerify.loading": "加载中..."
 }

package/src/i18n/locales/zh-Hant/components.json

@@ -224,5 +224,26 @@
   "hikari::tagInput.reorder": "拖曳排序 — {label}",
   "hikari::modal.hiddenLayers": "隱藏層級",
   "hikari::theme.modeTabHint": "切換這裡編輯的是對應模式的調色盤；要切換應用整體深/淺，請用主題彈窗頂部的模式條。",
-  "hikari::emptyState.loading": "載入中"
+  "hikari::emptyState.loading": "載入中",
+  "hikari::mfaVerify.title": "驗證帳戶",
+  "hikari::mfaVerify.verifySubtitle": "正在驗證 {name} 的身分，請完成驗證以繼續登入",
+  "hikari::mfaVerify.subtitle": "此帳戶已啟用額外安全驗證,請完成驗證以繼續",
+  "hikari::mfaVerify.step2Title": "還需再選一種驗證",
+  "hikari::mfaVerify.step2Subtitle": "{proven} 已通過 — 請再選一種方式完成 {name} 的登入",
+  "hikari::mfaVerify.step2SubtitleGeneric": "已通過 {proven} — 請再選一種方式完成登入",
+  "hikari::mfaVerify.factorPasskey": "Passkey",
+  "hikari::mfaVerify.factorTotp": "TOTP 驗證器應用程式",
+  "hikari::mfaVerify.factorSms": "簡訊驗證碼",
+  "hikari::mfaVerify.factorPassword": "帳戶密碼",
+  "hikari::mfaVerify.provenTooltip": "已通過驗證",
+  "hikari::mfaVerify.codeFields": "驗證碼",
+  "hikari::mfaVerify.codeCell": "第 {index} 位",
+  "hikari::mfaVerify.totpHint": "輸入 TOTP 驗證器顯示的 6 位動態驗證碼",
+  "hikari::mfaVerify.smsHint": "輸入 6 位簡訊驗證碼",
+  "hikari::mfaVerify.passwordPlaceholder": "輸入帳戶密碼",
+  "hikari::mfaVerify.verify": "驗證並登入",
+  "hikari::mfaVerify.usePasskey": "使用 Passkey 驗證",
+  "hikari::mfaVerify.resend": "重新傳送驗證碼",
+  "hikari::mfaVerify.back": "返回重新登入",
+  "hikari::mfaVerify.loading": "加載中..."
 }

package/src/index.ts

@@ -404,6 +404,12 @@ export { HkAuthCard as HAuthCard } from "./components/HkAuthCard";
 export { default as HAuthMethodList } from "./components/HkAuthMethodList";
 export { HkSignInCard as HSignInCard } from "./components/HkSignInCard";
 export { default as HAuthSubmitButton } from "./components/HkAuthSubmitButton";
+export {
+  HkMfaVerifyCard as HMfaVerifyCard,
+  hkIsMfaFactor as isMfaFactor,
+  hkPreferredMfaFactor as preferredMfaFactor,
+  type HkMfaFactor as MfaFactor,
+} from "./components/HkMfaVerifyCard";
 export { usePageTitle, useRouteTitle } from "./composables/usePageTitle";
 export { provideActionBar, useActionBar } from "./composables/useActionBar";
 export type { ActionBarRenderer } from "./composables/useActionBar";