@celestia-island/hikari 0.33.0 → 0.34.0

package/package.json

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

package/src/components/HkAffixPicker.scss

@@ -68,8 +68,8 @@
 }
 
 /* One selected entry: [flag] label (meta) •active-dot   ×]
- * The × arms on the first activation (danger tint) and erases on the
- * second; desktop hover previews the × so the row reads as deletable. */
+ * The × opens the shared confirm message box — the dialog's Confirm is
+ * what actually erases; the × alone never does. */
 .hk-affix-tag {
   display: flex;
   align-items: center;
@@ -94,10 +94,6 @@
     }
   }
 
-  &[data-armed] {
-    border-color: rgb(var(--color-danger, 240 70 80) / 55%);
-    background: rgb(var(--color-danger, 240 70 80) / 12%);
-  }
 }
 
 .hk-affix-tag-body {
@@ -168,11 +164,6 @@
     color: rgb(var(--color-danger, 240 70 80));
     background: rgb(var(--color-danger, 240 70 80) / 12%);
   }
-
-  [data-armed] & {
-    color: rgb(var(--color-danger, 240 70 80));
-    background: rgb(var(--color-danger, 240 70 80) / 18%);
-  }
 }
 
 /* ── option rows ────────────────────────────────────────────────────── */

package/src/components/HkAffixPicker.test.tsx

@@ -18,6 +18,7 @@ interface MountOptions {
   allowCustom?: boolean;
   searchable?: boolean;
   closeOnSelect?: boolean;
+  confirmRemove?: boolean;
   disabled?: boolean;
 }
 
@@ -40,6 +41,7 @@ function mountPicker(opts: MountOptions = {}) {
         allowCustom: opts.allowCustom ?? false,
         searchable: opts.searchable ?? true,
         closeOnSelect: opts.closeOnSelect,
+        confirmRemove: opts.confirmRemove,
         disabled: opts.disabled ?? false,
         onSelect: (key: string) => events.select.push(key),
         onRemove: (key: string) => events.remove.push(key),
@@ -100,7 +102,42 @@ async function untilSettled(check: () => number): Promise<void> {
   }
 }
 
-afterEach(() => {
+/** Let the message box mount (own app) and its promise chain settle. */
+async function flush() {
+  await nextTick();
+  await nextTick();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function confirmButton(): HTMLButtonElement {
+  const btn = document.body.querySelector<HTMLButtonElement>(".hk-message-box-confirm");
+  expect(btn, "message box confirm button renders").toBeTruthy();
+  return btn!;
+}
+
+/** Dismiss every open message box and wait out its host's self-unmount
+ *  (leave transition + timer) so no zombie app re-renders into the next
+ *  test's DOM. No-op when a test never opened one. */
+async function teardownMessageBoxes() {
+  if (!document.body.querySelector(".hk-message-box-confirm")) return;
+  for (const btn of [...document.body.querySelectorAll<HTMLButtonElement>(".hk-message-box-confirm")]) {
+    btn.click();
+  }
+  const deadline = Date.now() + 2500;
+  // The modal root (not just the confirm button) must be gone: the
+  // leave transition + cleanup timer fully unmount the host app, so no
+  // zombie registration lingers in the shared popup stack.
+  while (
+    (document.body.querySelector(".hk-message-box-confirm") ||
+      document.body.querySelector(".hk-modal-root")) &&
+    Date.now() < deadline
+  ) {
+    await new Promise((resolve) => setTimeout(resolve, 20));
+  }
+}
+
+afterEach(async () => {
+  await teardownMessageBoxes();
   for (const { app, container } of mounts.splice(0)) {
     app.unmount();
     container.remove();
@@ -162,29 +199,72 @@ describe("HkAffixPicker", () => {
     expect(rows().length).toBeGreaterThan(0);
   });
 
-  it("two-step tag delete: × arms, × again confirms; body click disarms", async () => {
+  it("tag × opens a confirm dialog: Cancel keeps the tag, Confirm fires remove", async () => {
     const { events, container } = mountPicker({ mode: "multi", selected: ["cn", "jp"] });
     await openPopup(container);
-    const x = tags()[0].querySelector<HTMLButtonElement>(".hk-affix-tag-x")!;
-    x.click();
-    await nextTick();
-    expect(tags()[0].hasAttribute("data-armed")).toBe(true);
+    // One tap never erases: the dialog names the entry instead.
+    tags()[0].querySelector<HTMLButtonElement>(".hk-affix-tag-x")!.click();
+    // The dialog mounts over several transition frames; wait for the
+    // settled state (box open, tag untouched) before asserting.
+    await untilBoxOpen('Remove "China"');
     expect(events.remove).toHaveLength(0);
-    // Second activation confirms — the tag leaves the list.
-    x.click();
-    await nextTick();
+    expect(tag("China")).toBeTruthy();
+    // Cancel keeps everything as it was.
+    [...document.body.querySelectorAll<HTMLButtonElement>(".hk-message-box-actions button")]
+      .find((b) => !b.classList.contains("hk-message-box-confirm"))!
+      .click();
+    await flush();
+    console.log("DBG-cancel openEvents", JSON.stringify(events.open), "tags", tags().length, "box", !!document.body.querySelector(".hk-message-box-text"));
+    expect(events.remove).toHaveLength(0);
+    expect(tag("China")).toBeTruthy();
+    // Second pass: the dialog's Confirm is what erases.
+    tags()[0].querySelector<HTMLButtonElement>(".hk-affix-tag-x")!.click();
+    await untilBoxOpen('Remove "China"');
+    confirmButton().click();
+    const deadline = Date.now() + 1500;
+    while (events.remove.length === 0 && Date.now() < deadline) {
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      await nextTick();
+    }
     expect(events.remove).toEqual(["cn"]);
-    // Body click on an ARMED tag disarms it instead of picking.
-    const jpBody = tag("Japan")!.querySelector<HTMLButtonElement>(".hk-affix-tag-body")!;
-    tag("Japan")!.querySelector<HTMLButtonElement>(".hk-affix-tag-x")!.click();
-    await nextTick();
-    expect(tag("Japan")?.hasAttribute("data-armed")).toBe(true);
-    jpBody.click();
-    await nextTick();
-    expect(tag("Japan")?.hasAttribute("data-armed")).toBe(false);
     expect(events.select).toHaveLength(0);
   });
 
+  it("confirmRemove=false lets the × fire remove immediately, no dialog", async () => {
+    const { events, container } = mountPicker({
+      mode: "multi",
+      selected: ["cn"],
+      confirmRemove: false,
+    });
+    await openPopup(container);
+    tags()[0].querySelector<HTMLButtonElement>(".hk-affix-tag-x")!.click();
+    await flush();
+    expect(events.remove).toEqual(["cn"]);
+    expect(document.body.querySelector(".hk-message-box-text")).toBeNull();
+  });
+
+  /** Poll until the confirm dialog is mounted AND shows the given body
+   *  text — the box rides HkModal's multi-frame open transition. */
+  async function untilBoxOpen(fragment: string): Promise<void> {
+    const deadline = Date.now() + 1500;
+    while (Date.now() < deadline) {
+      const text = document.body.querySelector(".hk-message-box-text")?.textContent ?? "";
+      if (text.includes(fragment)) {
+        // One extra frame so sibling re-renders (scrollbar lock, panel
+        // reposition) triggered by the modal settle too.
+        await new Promise((resolve) => setTimeout(resolve, 30));
+        await nextTick();
+        return;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      await nextTick();
+    }
+    expect(
+      document.body.querySelector(".hk-message-box-text")?.textContent ?? "",
+      `confirm dialog showing "${fragment}"`,
+    ).toContain(fragment);
+  }
+
   it("tag body click emits select; close-on-select default keeps multi open", async () => {
     const { events, container } = mountPicker({ mode: "multi", selected: ["cn", "jp"] });
     await openPopup(container);

package/src/components/HkAffixPicker.tsx

@@ -7,6 +7,7 @@ import { useI18n } from "../i18n/context";
 import HkInput from "./HkInput";
 import HkListTransition from "./HkListTransition";
 import HkMenu from "./HkMenu";
+import HkMessageBox from "./HkMessageBox";
 import "./HkAffixPicker.scss";
 
 /** One pickable entry of the affix picker's searchable list. */
@@ -31,11 +32,12 @@ export interface HkAffixOption {
  * opens one canonical popup:
  *
  *   - a SEARCH FIELD on top (live filter over label / meta / keywords);
- *   - in `multi` mode, a TAG LIST of the currently selected keys with
- *     the shared arm-delete guard: the row's × arms on the first tap
- *     (danger tint) and erases on the second — desktop hover IS the
- *     preview, so a single click erases there; the popup stays open so
- *     several tags can be managed in one pass;
+ *   - in `multi` mode, a TAG LIST of the currently selected keys.
+ *     Deleting a tag is a TWO-STEP interaction: the × opens the shared
+ *     HkMessageBox confirm dialog (danger tone, naming the entry), and
+ *     only its Confirm fires `remove`. `confirmRemove={false}` opts
+ *     out for hosts that confirm themselves. The popup stays open
+ *     behind the dialog so several tags can be managed in one pass;
  *   - the option rows themselves: single mode shows every option and
  *     closes on pick; multi mode lists the NOT-yet-selected options and
  *     stays open for batch adds;
@@ -73,6 +75,9 @@ export const HkAffixPicker = defineComponent({
     searchable: { type: Boolean, default: true },
     /** Offer a "Use <query>" row for free-text entries. */
     allowCustom: { type: Boolean, default: false },
+    /** Gate tag deletion behind a confirm message box (multi mode).
+     *  Default true; pass false when the host runs its own guard. */
+    confirmRemove: { type: Boolean, default: true },
     /** Override the default close-on-pick (single: true, multi: false).
      *  E.g. a multi picker that should close after each add passes
      *  true; a single picker that should stay open passes false. */
@@ -90,7 +95,8 @@ export const HkAffixPicker = defineComponent({
   emits: {
     /** A row or tag body was picked (multi add / single choose). */
     select: (_key: string) => true,
-    /** A tag's armed × confirmed — the host drops that key. */
+    /** A tag's × (after the confirm dialog accepted) — the host drops
+     *  that key. */
     remove: (_key: string) => true,
     /** The "Use <query>" row fired with the typed text. */
     custom: (_query: string) => true,
@@ -106,14 +112,15 @@ export const HkAffixPicker = defineComponent({
     const open = ref(false);
     const chipRef = ref<HTMLElement | null>(null);
     const query = ref("");
-    /** Key of the tag whose delete is ARMED (× tapped once). */
-    const armedKey = ref<string | null>(null);
+    /** True while our confirm dialog is up: clicks inside the dialog
+     *  are outside THIS popup, and the panel's outside-close must not
+     *  tear the tag list down mid-decision. */
+    const confirmHeld = ref(false);
 
-    // A fresh open starts calm: empty filter, no armed tag.
+    // A fresh open starts calm: empty filter.
     watch(open, (v) => {
       if (!v) {
         query.value = "";
-        armedKey.value = null;
       }
       emit("update:open", v);
     });
@@ -179,13 +186,32 @@ export const HkAffixPicker = defineComponent({
       if (resolvedCloseOnSelect.value) open.value = false;
     }
 
-    function confirmRemove(key: string) {
-      armedKey.value = null;
-      emit("remove", key);
-    }
-
-    function toggleArm(key: string) {
-      armedKey.value = armedKey.value === key ? null : key;
+    /** Tag × pressed: unless the host opts out, the shared message box
+     *  names the entry and asks for confirmation — the × alone never
+     *  erases anything. Only an accepted dialog fires `remove`. The
+     *  popup deliberately STAYS OPEN behind the dialog (both while it
+     *  is up and after Confirm/Cancel) so several tags can be managed
+     *  in one pass. */
+    async function requestRemove(tag: HkAffixOption) {
+      if (!props.confirmRemove) {
+        emit("remove", tag.key);
+        return;
+      }
+      const removeLabel = t("hikari::affixPicker.remove", "Remove");
+      confirmHeld.value = true;
+      try {
+        const confirmed = await HkMessageBox.confirm({
+          title: t("hikari::affixPicker.removeConfirmTitle", "Remove entry"),
+          message: interpolate(t("hikari::affixPicker.removeConfirm", 'Remove "{label}"? This cannot be undone.'), {
+            label: tag.label,
+          }),
+          tone: "danger",
+          confirmText: removeLabel,
+        });
+        if (confirmed) emit("remove", tag.key);
+      } finally {
+        confirmHeld.value = false;
+      }
     }
 
     function useCustom() {
@@ -220,7 +246,6 @@ export const HkAffixPicker = defineComponent({
         props.searchPlaceholder ?? t("hikari::affixPicker.search", "Search");
       const emptyText = props.emptyText ?? t("hikari::affixPicker.empty", "No matches");
       const removeLabel = t("hikari::affixPicker.remove", "Remove");
-      const confirmLabel = t("hikari::affixPicker.confirmDelete", "Confirm remove");
       const placement = props.side === "suffix" ? "bottom-end" : "bottom-start";
       return (
         <>
@@ -263,6 +288,9 @@ export const HkAffixPicker = defineComponent({
             items={[]}
             open={open.value}
             onUpdate:open={(v: boolean) => {
+              // Close requests that arrive while the confirm dialog is
+              // up are the dialog's own clicks — ignore them.
+              if (!v && confirmHeld.value) return;
               open.value = v;
             }}
             anchorRef={chipRef.value}
@@ -287,13 +315,11 @@ export const HkAffixPicker = defineComponent({
                         class="hk-affix-tag-list"
                       >
                         {tags.map((tag) => {
-                          const armed = armedKey.value === tag.key;
                           return (
                             <div
                               key={tag.key}
                               class="hk-affix-tag"
                               data-active={activeSet.value.includes(tag.key) || undefined}
-                              data-armed={armed || undefined}
                             >
                               <button
                                 type="button"
@@ -302,10 +328,6 @@ export const HkAffixPicker = defineComponent({
                                 aria-label={`${t("hikari::affixPicker.switchTo", "Switch to")} ${tag.label}`}
                                 onClick={(e: MouseEvent) => {
                                   e.stopPropagation();
-                                  if (armed) {
-                                    armedKey.value = null;
-                                    return;
-                                  }
                                   pick(tag);
                                 }}
                               >
@@ -325,16 +347,14 @@ export const HkAffixPicker = defineComponent({
                               <button
                                 type="button"
                                 class="hk-affix-tag-x"
-                                aria-label={armed ? confirmLabel : `${removeLabel} — ${tag.label}`}
-                                title={armed ? confirmLabel : `${removeLabel} — ${tag.label}`}
-                                // The × arms on the first activation and
-                                // confirms on the second (touch guard); on
-                                // desktop the hover already previewed the
-                                // intent, so the first click erases.
+                                aria-label={`${removeLabel} — ${tag.label}`}
+                                title={`${removeLabel} — ${tag.label}`}
+                                // One tap opens the confirm dialog; the
+                                // dialog's Confirm is what actually
+                                // erases (fires `remove`).
                                 onClick={(e: MouseEvent) => {
                                   e.stopPropagation();
-                                  if (armed) confirmRemove(tag.key);
-                                  else toggleArm(tag.key);
+                                  void requestRemove(tag);
                                 }}
                                 onMousedown={(e: MouseEvent) => e.preventDefault()}
                               >

package/src/components/HkLocalizedInput.test.tsx

@@ -143,33 +143,76 @@ function tagBody(label: string): HTMLButtonElement | undefined {
   return tag(label)?.querySelector<HTMLButtonElement>(".hk-affix-tag-body") ?? undefined;
 }
 
-/** The arm/confirm × of the language tag. */
+/** The × of the language tag (opens the confirm dialog). */
 function tagX(label: string): HTMLButtonElement | undefined {
   return tag(label)?.querySelector<HTMLButtonElement>(".hk-affix-tag-x") ?? undefined;
 }
 
-/** Full two-step erase: the × arms (danger tint), the second activation
- *  confirms. The leaving tag lingers through its transition window (jsdom
- *  has no CSS engine, so the ghost clears on the next-frame fallback) —
- *  poll until the tag is really gone. */
-async function eraseViaArm(label: string) {
-  tagX(label)!.click();
-  await nextTick();
-  expect(tag(label)?.hasAttribute("data-armed"), "tag is armed before the confirm ×").toBe(true);
-  tagX(label)!.click();
-  await nextTick();
-  await nextTick();
-  const deadline = Date.now() + 800;
-  while (tag(label) && Date.now() < deadline) {
+/** The message box's confirm/cancel buttons (mounted at body level). */
+function boxButton(confirm: boolean): HTMLButtonElement {
+  const selector = confirm ? ".hk-message-box-confirm" : ".hk-message-box-actions button:not(.hk-message-box-confirm)";
+  const btn = document.body.querySelector<HTMLButtonElement>(selector);
+  expect(btn, `message box ${confirm ? "confirm" : "cancel"} button renders`).toBeTruthy();
+  return btn!;
+}
+
+/** Full erase flow: the × opens the shared confirm dialog naming the
+ *  entry; the dialog's Confirm erases. The leaving tag lingers through
+ *  its transition window (jsdom has no CSS engine, so the ghost clears
+ *  on the next-frame fallback) — poll until the tag is really gone. */
+/** Poll until the condition turns truthy (box leave animations and
+ *  tag transitions lag a few frames behind the click). */
+async function until(condition: () => boolean, what: string): Promise<void> {
+  const deadline = Date.now() + 1500;
+  while (!condition() && Date.now() < deadline) {
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    await nextTick();
+  }
+  expect(condition(), `${what} within the deadline`).toBe(true);
+}
+
+/** Wait until the confirm dialog is mounted and naming the entry —
+ *  the box rides HkModal's multi-frame open transition. */
+async function untilBoxOpen(label: string): Promise<void> {
+  const deadline = Date.now() + 1500;
+  while (Date.now() < deadline) {
+    const text = document.body.querySelector(".hk-message-box-text")?.textContent ?? "";
+    if (text.includes(label)) {
+      // One extra frame so sibling re-renders (scrollbar lock, panel
+      // reposition) triggered by the modal settle too.
+      await new Promise((resolve) => setTimeout(resolve, 30));
+      await nextTick();
+      return;
+    }
     await new Promise((resolve) => setTimeout(resolve, 10));
     await nextTick();
   }
+  expect(
+    document.body.querySelector(".hk-message-box-text")?.textContent ?? "",
+    `confirm dialog showing "${label}"`,
+  ).toContain(label);
+}
+
+async function eraseViaConfirm(label: string, tagGone = true) {
+  tagX(label)!.click();
+  await untilBoxOpen(label);
+  boxButton(true).click();
+  await until(() => !document.body.querySelector(".hk-message-box-text"), "dialog closes on confirm");
+  // The edited language's tag deliberately survives its own erase when
+  // no other language remains (it stays as the active tag), so the
+  // absence wait only applies to genuinely-removed entries.
+  if (tagGone) {
+    await until(() => !tag(label), `tag "${label}" erased`);
+  } else {
+    await nextTick();
+    await nextTick();
+  }
 }
 
 /** Wait for the popup's leave-transition window to finish — rows linger
  *  briefly after a close while the popout animates shut. */
 async function untilPickerSettled(): Promise<void> {
-  const deadline = Date.now() + 800;
+  const deadline = Date.now() + 1500;
   while (pickerRows().length > 0 && Date.now() < deadline) {
     await new Promise((resolve) => setTimeout(resolve, 10));
     await nextTick();
@@ -185,7 +228,29 @@ async function typeIntoSearch(value: string) {
   await nextTick();
 }
 
-afterEach(() => {
+/** Dismiss every open message box and wait out its host's self-unmount
+ *  (leave transition + timer) so no zombie app re-renders into the next
+ *  test's DOM. No-op when a test never opened one. */
+async function teardownMessageBoxes() {
+  if (!document.body.querySelector(".hk-message-box-confirm")) return;
+  for (const btn of [...document.body.querySelectorAll<HTMLButtonElement>(".hk-message-box-confirm")]) {
+    btn.click();
+  }
+  const deadline = Date.now() + 2500;
+  // The modal root (not just the confirm button) must be gone: the
+  // leave transition + cleanup timer fully unmount the host app, so no
+  // zombie registration lingers in the shared popup stack.
+  while (
+    (document.body.querySelector(".hk-message-box-confirm") ||
+      document.body.querySelector(".hk-modal-root")) &&
+    Date.now() < deadline
+  ) {
+    await new Promise((resolve) => setTimeout(resolve, 20));
+  }
+}
+
+afterEach(async () => {
+  await teardownMessageBoxes();
   for (const { app, container } of mounts.splice(0)) {
     app.unmount();
     container.remove();
@@ -487,72 +552,57 @@ describe("HkLocalizedInput", () => {
     expect(document.activeElement).not.toBe(queryField(container));
   });
 
-  it("arms only the tapped tag and disarms on a second tap", async () => {
+  it("tag × opens the confirm dialog; Cancel keeps the translation intact", async () => {
     const { container } = mountInput({
       modelValue: "Plant overview",
       translations: { en: "Plant overview", "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
     tagX("简体中文")!.click();
-    await nextTick();
-    expect(tag("简体中文")?.hasAttribute("data-armed")).toBe(true);
-    expect(tag("English")?.hasAttribute("data-armed")).toBe(false);
-    // Tapping the same × again disarms.
-    tagX("简体中文")!.click();
-    await nextTick();
-    expect(tag("简体中文")?.hasAttribute("data-armed")).toBe(false);
-    // Arming a sibling disarms the previous tag.
-    tagX("简体中文")!.click();
-    await nextTick();
-    tagX("English")!.click();
-    await nextTick();
-    expect(tag("English")?.hasAttribute("data-armed")).toBe(true);
-    expect(tag("简体中文")?.hasAttribute("data-armed")).toBe(false);
+    await untilBoxOpen("简体中文");
+    // The dialog names the entry and carries a danger-toned confirm.
+    expect(boxButton(true).className).toContain("hk-btn-danger");
+    // Cancel → nothing is erased, the dialog closes.
+    boxButton(false).click();
+    await until(() => !document.body.querySelector(".hk-message-box-text"), "dialog closes on cancel");
+    await until(() => !!tag("简体中文"), "tag stays after cancel");
   });
 
-  it("names the tag body by its action and the × by its current step", async () => {
+  it("names the tag body by its switch action and the × by its remove intent", async () => {
     const { container } = mountInput({
       modelValue: "Plant overview",
       translations: { en: "Plant overview", "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
     expect(tagBody("简体中文")?.getAttribute("aria-label")).toBe("Switch to 简体中文");
-    // Calm × announces the remove; armed × announces the confirm.
     expect(tagX("简体中文")?.getAttribute("aria-label")).toBe("Remove — 简体中文");
-    tagX("简体中文")!.click();
-    await nextTick();
-    expect(tagX("简体中文")?.getAttribute("aria-label")).toBe("Confirm remove");
   });
 
-  it("disarms every tag when the popup closes", async () => {
+  it("keeps the picker usable after a dismissed delete dialog", async () => {
     const { container } = mountInput({
       modelValue: "Plant overview",
       translations: { en: "Plant overview", "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
     tagX("简体中文")!.click();
-    await nextTick();
-    expect(tag("简体中文")?.hasAttribute("data-armed")).toBe(true);
-    // Close the popup, then reopen it: the armed state must not survive —
-    // a stale armed tag would turn the next open into an armed delete
-    // waiting to fire.
-    queryChip(container).click();
-    await nextTick();
-    await nextTick();
-    queryChip(container).click();
+    await untilBoxOpen("简体中文");
+    boxButton(false).click();
+    await until(() => !document.body.querySelector(".hk-message-box-text"), "dialog closes on cancel");
+    // The dialog never leaves the picker half-broken: the tag can still
+    // switch the edited language right after a dismissal.
+    tagBody("简体中文")!.click();
     await nextTick();
     await nextTick();
-    expect(tag("简体中文")?.hasAttribute("data-armed")).toBe(false);
-    expect(tag("English")?.hasAttribute("data-armed")).toBe(false);
+    expect(document.activeElement).toBe(queryField(container));
   });
 
-  it("erases a non-current translation via arm → confirm and keeps the popup open", async () => {
+  it("erases a non-current translation via confirm dialog and keeps the popup open", async () => {
     const { events, container } = mountReactive({
       modelValue: "Plant overview",
       translations: { en: "Plant overview", "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
-    await eraseViaArm("简体中文");
+    await eraseViaConfirm("简体中文");
     // The map loses only the erased language; no edit-state events fire.
     expect(events.translations.at(-1)).toEqual({ en: "Plant overview" });
     expect(events.modelValue).toEqual([]);
@@ -570,8 +620,8 @@ describe("HkLocalizedInput", () => {
       translations: { en: "Plant overview", "zh-Hans": "工厂总览", ja: "プラント概覧" },
     });
     await openPicker(container);
-    await eraseViaArm("简体中文");
-    await eraseViaArm("日本語");
+    await eraseViaConfirm("简体中文");
+    await eraseViaConfirm("日本語");
     expect(events.translations.at(-1)).toEqual({ en: "Plant overview" });
     expect(tagLabels()).toEqual(["English"]);
   });
@@ -591,7 +641,7 @@ describe("HkLocalizedInput", () => {
     expect(queryChip(container).textContent).toContain("简体中文");
     expect(queryChip(container).textContent).not.toContain("(zh-Hans)");
     await openPicker(container);
-    await eraseViaArm("简体中文");
+    await eraseViaConfirm("简体中文");
     expect(events.translations.at(-1)).toEqual({ en: "Plant overview" });
     expect(events.modelValue.at(-1)).toBe("Plant overview");
     expect(events.languagechange.at(-1)).toBe("en");
@@ -608,7 +658,7 @@ describe("HkLocalizedInput", () => {
       translations: { en: "Plant overview", "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
-    await eraseViaArm("English");
+    await eraseViaConfirm("English");
     expect(events.translations.at(-1)).toEqual({ "zh-Hans": "工厂总览" });
     expect(events.modelValue.at(-1)).toBe("工厂总览");
     expect(events.languagechange.at(-1)).toBe("zh-Hans");
@@ -622,7 +672,7 @@ describe("HkLocalizedInput", () => {
       translations: { en: "Plant overview" },
     });
     await openPicker(container);
-    await eraseViaArm("English");
+    await eraseViaConfirm("English", false);
     expect(events.translations.at(-1)).toEqual({});
     expect(events.modelValue.at(-1)).toBe("");
     // The edited language tag stays (active); the popup stays open.

package/src/components/HkMessageBox.scss

@@ -0,0 +1,44 @@
+/* HkMessageBox — the shared transient message box (confirm / alert /
+ * single-field prompt). Hosted in its own HkModal; only the body
+ * layout (icon + text + the one prompt field) and the action row are
+ * styled here. */
+
+.hk-message-box {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8, 8px);
+  padding-top: var(--space-2, 2px);
+}
+
+.hk-message-box-icon {
+  display: inline-flex;
+  color: rgb(var(--color-primary));
+
+  [data-tone="success"] & {
+    color: rgb(var(--color-success, 90 180 110));
+  }
+
+  [data-tone="warning"] &,
+  [data-tone="danger"] & {
+    color: rgb(var(--color-danger, 240 70 80));
+  }
+}
+
+.hk-message-box-text {
+  margin: 0;
+  color: rgb(var(--color-text));
+  font-size: var(--text-base, 15px);
+  line-height: 1.55;
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+}
+
+.hk-message-box-prompt {
+  margin-top: var(--space-6, 6px);
+}
+
+.hk-message-box-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-8, 8px);
+}

package/src/components/HkMessageBox.test.tsx

@@ -0,0 +1,151 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { h, nextTick } from "vue";
+
+import { HkMessageBox } from "./HkMessageBox";
+
+function confirmButton(): HTMLButtonElement {
+  const btn = document.body.querySelector<HTMLButtonElement>(".hk-message-box-confirm");
+  expect(btn, "confirm button renders").toBeTruthy();
+  return btn!;
+}
+
+function cancelButton(): HTMLButtonElement {
+  const btns = [...document.body.querySelectorAll<HTMLButtonElement>(".hk-message-box-actions button")]
+    .filter((b) => !b.classList.contains("hk-message-box-confirm"));
+  expect(btns.length, "cancel button renders").toBeGreaterThan(0);
+  return btns[0]!;
+}
+
+function messageText(): string {
+  return document.body.querySelector(".hk-message-box-text")?.textContent ?? "";
+}
+
+async function flush() {
+  await nextTick();
+  await nextTick();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+afterEach(async () => {
+  // Resolve any box still open, then wait for the leave transition +
+  // cleanup timer to fully unmount the host app.
+  for (const btn of [...document.body.querySelectorAll<HTMLButtonElement>(".hk-message-box-confirm")]) {
+    btn.click();
+  }
+  const deadline = Date.now() + 2500;
+  while (
+    (document.body.querySelector(".hk-message-box-confirm") ||
+      document.body.querySelector(".hk-modal-root")) &&
+    Date.now() < deadline
+  ) {
+    await new Promise((resolve) => setTimeout(resolve, 20));
+  }
+  document.body.innerHTML = "";
+});
+
+describe("HkMessageBox", () => {
+  it("confirm resolves true on Confirm and false on Cancel", async () => {
+    const first = HkMessageBox.confirm({ message: "Delete the file?" });
+    await flush();
+    expect(messageText()).toBe("Delete the file?");
+    confirmButton().click();
+    await expect(first).resolves.toBe(true);
+    await flush();
+
+    const second = HkMessageBox.confirm({ message: "Delete the file?" });
+    await flush();
+    cancelButton().click();
+    await expect(second).resolves.toBe(false);
+  });
+
+  it("danger tone paints the confirm button in the danger variant", async () => {
+    const pending = HkMessageBox.confirm({ message: "Erase everything", tone: "danger" });
+    await flush();
+    expect(confirmButton().className).toContain("hk-btn-danger");
+    confirmButton().click();
+    await expect(pending).resolves.toBe(true);
+  });
+
+  it("alert has a single action and resolves on dismissal", async () => {
+    const pending = HkMessageBox.alert({ message: "All done", tone: "success" });
+    await flush();
+    expect(document.body.querySelectorAll(".hk-message-box-actions button")).toHaveLength(1);
+    confirmButton().click();
+    await expect(pending).resolves.toBeUndefined();
+  });
+
+  it("prompt resolves the typed value, null on cancel", async () => {
+    const first = HkMessageBox.prompt({ message: "Pick a name", prompt: { value: "draft" } });
+    await flush();
+    const input = document.body.querySelector<HTMLInputElement>(".hk-message-box-prompt input");
+    expect(input, "prompt field renders").toBeTruthy();
+    expect(input!.value).toBe("draft");
+    input!.value = "renamed";
+    input!.dispatchEvent(new Event("input", { bubbles: true }));
+    await flush();
+    confirmButton().click();
+    await expect(first).resolves.toBe("renamed");
+    await flush();
+
+    const second = HkMessageBox.prompt({ message: "Pick a name", prompt: {} });
+    await flush();
+    cancelButton().click();
+    await expect(second).resolves.toBeNull();
+  });
+
+  it("prompt renders the configured field variant and affixes", async () => {
+    const pending = HkMessageBox.prompt({
+      message: "Set a passphrase",
+      prompt: {
+        type: "password",
+        placeholder: "hunter2",
+        prefix: () => h("span", { class: "prompt-prefix-probe" }, "P"),
+      },
+    });
+    await flush();
+    const input = document.body.querySelector<HTMLInputElement>(".hk-message-box-prompt input");
+    expect(input?.getAttribute("type")).toBe("password");
+    expect(input?.getAttribute("placeholder")).toBe("hunter2");
+    expect(document.body.querySelector(".prompt-prefix-probe")?.textContent).toBe("P");
+    confirmButton().click();
+    await expect(pending).resolves.toBe("");
+  });
+
+  it("prompt validate hook blocks confirmation and shows the error", async () => {
+    const pending = HkMessageBox.prompt({
+      message: "Set a name",
+      prompt: {
+        validate: (v) => (v.trim() ? undefined : "Name is required"),
+      },
+    });
+    await flush();
+    // Empty value + strict validator → the confirm is blocked, the box
+    // stays open and the error is visible.
+    confirmButton().click();
+    await flush();
+    expect(document.body.querySelector(".hk-message-box-prompt")).toBeTruthy();
+    expect(document.body.querySelector(".hk-message-box-prompt")?.textContent).toContain(
+      "Name is required",
+    );
+    // Typing clears the error; a valid value then confirms.
+    const input = document.body.querySelector<HTMLInputElement>(".hk-message-box-prompt input")!;
+    input.value = "ok-name";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await flush();
+    confirmButton().click();
+    await expect(pending).resolves.toBe("ok-name");
+  });
+
+  it("custom button labels override the i18n defaults", async () => {
+    const pending = HkMessageBox.confirm({
+      message: "Proceed?",
+      confirmText: "Yes, go",
+      cancelText: "Nope",
+    });
+    await flush();
+    expect(confirmButton().textContent).toBe("Yes, go");
+    expect(cancelButton().textContent).toBe("Nope");
+    confirmButton().click();
+    await expect(pending).resolves.toBe(true);
+  });
+});

package/src/components/HkMessageBox.tsx

@@ -0,0 +1,283 @@
+import { createApp, defineComponent, h, ref, type PropType } from "vue";
+
+import { AlertTriangle, CheckCircle2, Info, ShieldAlert } from "lucide-vue-next";
+
+import { useI18n } from "../i18n/context";
+
+import HkButton from "./HkButton";
+import HkInput from "./HkInput";
+import HkModal from "./HkModal";
+import "./HkMessageBox.scss";
+
+/**
+ * HkMessageBox — the shared transient message box (a Windows-style
+ * MessageBox / InputBox): a small modal that asks for a confirmation,
+ * shows a notice, or collects ONE value.
+ *
+ *   - `HkMessageBox.confirm(opts)` → Promise<boolean>
+ *   - `HkMessageBox.alert(opts)`  → Promise<void>
+ *   - `HkMessageBox.prompt(opts)` → Promise<string | null>
+ *
+ * The prompt's single field is customizable: input variant (`type`,
+ * e.g. a password box), label, placeholder, initial value, maxlength,
+ * a confirm-time `validate` hook, and prefix/suffix affixes supplied
+ * as render functions (e.g. a dial-code chip or a unit suffix).
+ *
+ * ┌─ SCOPE — read before reaching for this component ─────────────────┐
+ * │ The message box is deliberately minimal: at most ONE input, no   │
+ * │ layout control beyond the affixes, no slots for arbitrary        │
+ * │ content. If you need more than one field, checkboxes, lists or   │
+ * │ any complex form, do NOT use the message box — build a real      │
+ * │ HModal with a form inside.                                       │
+ * └───────────────────────────────────────────────────────────────────┘
+ *
+ * Each call mounts its own transient host and resolves the promise on
+ * the user's decision (Esc / backdrop click count as cancel; for
+ * `alert` any dismiss resolves). Calls are fire-and-forget by design —
+ * await the returned promise at the call site. Avoid firing many boxes
+ * in a loop; sequential awaits keep the UX readable.
+ */
+
+/** The single editable field a prompt box may host. */
+export interface HkMessageBoxPrompt {
+  /** Initial value. */
+  value?: string;
+  label?: string;
+  placeholder?: string;
+  /** Field variant — plain text, masked password, or number. */
+  type?: "text" | "password" | "number";
+  /** Render function for the input's PREFIX affix (chip, glyph…). */
+  prefix?: () => unknown;
+  /** Render function for the input's SUFFIX affix. */
+  suffix?: () => unknown;
+  /** Confirm-time validation: return an error string to block the
+   *  confirmation (shown under the field), or undefined to accept. */
+  validate?: (value: string) => string | undefined | null;
+}
+
+export interface HkMessageBoxOptions {
+  title?: string;
+  /** Body text. Kept as plain text — no arbitrary content by design. */
+  message: string;
+  /** Visual urgency: icon tone and confirm button variant. */
+  tone?: "info" | "success" | "warning" | "danger";
+  confirmText?: string;
+  cancelText?: string;
+  /** Hide the cancel button (pure notice). Default false. */
+  hideCancel?: boolean;
+  /** When present the box hosts exactly one customizable field and
+   *  resolves with its value instead of a boolean. */
+  prompt?: HkMessageBoxPrompt;
+}
+
+type Resolve = (value: unknown) => void;
+
+const HkMessageBoxHost = defineComponent({
+  name: "HkMessageBoxHost",
+  props: {
+    title: { type: String, default: undefined },
+    message: { type: String, required: true },
+    tone: { type: String as PropType<NonNullable<HkMessageBoxOptions["tone"]>>, default: "info" },
+    confirmText: { type: String, default: undefined },
+    cancelText: { type: String, default: undefined },
+    hideCancel: { type: Boolean, default: false },
+    prompt: { type: Object as PropType<HkMessageBoxPrompt>, default: undefined },
+    resolve: { type: Function as PropType<Resolve>, required: true },
+    /** alert resolves on confirm; confirm/prompt resolve booleans/values */
+    kind: { type: String as PropType<"alert" | "confirm" | "prompt">, required: true },
+    onSettled: { type: Function as PropType<() => void>, required: true },
+  },
+  setup(props) {
+    const { t } = useI18n();
+    const open = ref(true);
+    const value = ref(props.prompt?.value ?? "");
+    const error = ref<string | undefined>(undefined);
+
+    const toneIcon = () => {
+      switch (props.tone) {
+        case "success":
+          return <CheckCircle2 size={18} aria-hidden="true" />;
+        case "warning":
+          return <AlertTriangle size={18} aria-hidden="true" />;
+        case "danger":
+          return <ShieldAlert size={18} aria-hidden="true" />;
+        default:
+          return <Info size={18} aria-hidden="true" />;
+      }
+    };
+
+    function settle(payload: unknown) {
+      props.resolve(payload);
+      open.value = false;
+    }
+
+    function cancel() {
+      settle(props.kind === "alert" ? undefined : props.kind === "prompt" ? null : false);
+    }
+
+    async function confirm() {
+      if (props.prompt) {
+        // Run the validator first; a returned error string blocks the
+        // confirmation and is shown under the field.
+        const message = props.prompt.validate?.(value.value);
+        if (message) {
+          error.value = message;
+          return;
+        }
+        error.value = undefined;
+        settle(value.value);
+        return;
+      }
+      settle(props.kind === "confirm" ? true : undefined);
+    }
+
+    return () => {
+      const confirmLabel =
+        props.confirmText ?? t("hikari::messageBox.confirm", "Confirm");
+      const cancelLabel = props.cancelText ?? t("hikari::messageBox.cancel", "Cancel");
+      const confirmVariant =
+        props.tone === "danger" ? "danger" : "primary";
+      const fallbackTitle =
+        props.kind === "alert"
+          ? t("hikari::messageBox.alertTitle", "Notice")
+          : props.kind === "prompt"
+            ? t("hikari::messageBox.promptTitle", "Input")
+            : t("hikari::messageBox.confirmTitle", "Please confirm");
+      return (
+        <HkModal
+          modelValue={open.value}
+          onUpdate:modelValue={(v: boolean) => {
+            // Backdrop / Esc / title-bar close all count as a cancel —
+            // the message box never stays half-open after a dismissal.
+            if (!v && open.value) cancel();
+          }}
+          onAfterLeave={() => props.onSettled()}
+          title={props.title ?? fallbackTitle}
+          width="26rem"
+        >
+          {{
+            default: () => (
+              <div class="hk-message-box" data-tone={props.tone}>
+                <div class="hk-message-box-icon" aria-hidden="true">
+                  {toneIcon()}
+                </div>
+                <p class="hk-message-box-text" role={props.tone === "danger" ? "alert" : undefined}>
+                  {props.message}
+                </p>
+                {props.prompt && (
+                  <div class="hk-message-box-prompt">
+                    <HkInput
+                      modelValue={value.value}
+                      onUpdate:modelValue={(v: string) => {
+                        value.value = v;
+                        // A fresh keystroke clears a failed validation.
+                        if (error.value) error.value = undefined;
+                      }}
+                      type={props.prompt.type ?? "text"}
+                      label={props.prompt.label}
+                      placeholder={props.prompt.placeholder}
+                      error={error.value}
+                      autocomplete="off"
+                      onKeydown={(e: KeyboardEvent) => {
+                        if (e.key === "Enter" && !e.isComposing) {
+                          e.preventDefault();
+                          void confirm();
+                        }
+                      }}
+                    >
+                      {{
+                        prefix: props.prompt.prefix,
+                        suffix: props.prompt.suffix,
+                      }}
+                    </HkInput>
+                  </div>
+                )}
+              </div>
+            ),
+            footer: () => (
+              <div class="hk-message-box-actions">
+                {/* Alerts have no cancel by definition; confirm/prompt
+                    hide it only when the host asks. */}
+                {props.kind !== "alert" && !props.hideCancel && (
+                  <HkButton variant="secondary" onClick={cancel}>
+                    {cancelLabel}
+                  </HkButton>
+                )}
+                <HkButton
+                  variant={confirmVariant}
+                  class="hk-message-box-confirm"
+                  onClick={() => void confirm()}
+                >
+                  {confirmLabel}
+                </HkButton>
+              </div>
+            ),
+          }}
+        </HkModal>
+      );
+    };
+  },
+});
+
+function show(kind: "alert" | "confirm" | "prompt", options: HkMessageBoxOptions): Promise<unknown> {
+  return new Promise((resolve) => {
+    let settled = false;
+    let cleaned = false;
+    let app: ReturnType<typeof createApp> | null = null;
+    let container: HTMLElement | null = null;
+    const cleanup = () => {
+      if (cleaned || !app || !container) return;
+      cleaned = true;
+      if (container.isConnected) {
+        app.unmount();
+        container.remove();
+      }
+    };
+    const settle = (value: unknown) => {
+      if (settled) return;
+      settled = true;
+      resolve(value);
+      // The leave transition is playing; reclaim the host when it ends
+      // (onSettled) or after the transition duration at the latest — a
+      // lost afterLeave event (host DOM wiped by a route change, a test
+      // clearing the body) must never leak the app.
+      setTimeout(cleanup, 360);
+    };
+    // Mount on a MACROTASK, never synchronously inside the caller's
+    // click dispatch: a box mounted mid-dispatch would see the very
+    // same click event reach its (freshly registered) document-level
+    // listeners and instantly dismiss itself.
+    setTimeout(() => {
+      container = document.createElement("div");
+      document.body.appendChild(container);
+      app = createApp({
+        render: () =>
+          h(HkMessageBoxHost, {
+            ...options,
+            kind,
+            resolve: settle,
+            onSettled: () => cleanup(),
+          }),
+      });
+      app.mount(container);
+      // Safety net for boxes that never resolve at all.
+      setTimeout(cleanup, 5 * 60 * 1000);
+    }, 0);
+  });
+}
+
+/** The imperative message box service — see HkMessageBox docs. */
+export const HkMessageBox = {
+  /** Notice with a single OK button. Resolves when dismissed. */
+  alert: (options: HkMessageBoxOptions): Promise<void> =>
+    show("alert", options).then(() => undefined),
+  /** Confirmation. Resolves true on confirm, false on cancel/Esc. */
+  confirm: (options: HkMessageBoxOptions): Promise<boolean> =>
+    show("confirm", options).then((v) => v === true),
+  /** Single-field prompt. Resolves the value on confirm, null on
+   *  cancel/Esc. The field is customizable via `options.prompt`. */
+  prompt: (options: HkMessageBoxOptions & { prompt: HkMessageBoxPrompt }): Promise<string | null> =>
+    show("prompt", options).then((v) => (typeof v === "string" ? v : null)),
+};
+
+export default HkMessageBox;

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

@@ -160,7 +160,14 @@
   "hikari::affixPicker.selectedCount": "{count} selected",
   "hikari::affixPicker.switchTo": "Switch to",
   "hikari::affixPicker.remove": "Remove",
-  "hikari::affixPicker.confirmDelete": "Confirm remove",
   "hikari::affixPicker.useCustom": "Use \"{query}\"",
-  "hikari::localizedInput.noMatches": "No matching language"
+  "hikari::localizedInput.noMatches": "No matching language",
+  "hikari::messageBox.confirm": "Confirm",
+  "hikari::messageBox.cancel": "Cancel",
+  "hikari::messageBox.ok": "OK",
+  "hikari::affixPicker.removeConfirmTitle": "Remove entry",
+  "hikari::affixPicker.removeConfirm": "Remove \"{label}\"? This cannot be undone.",
+  "hikari::messageBox.alertTitle": "Notice",
+  "hikari::messageBox.confirmTitle": "Please confirm",
+  "hikari::messageBox.promptTitle": "Input"
 }

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

@@ -164,7 +164,14 @@
   "hikari::affixPicker.selectedCount": "已选 {count} 项",
   "hikari::affixPicker.switchTo": "切换到",
   "hikari::affixPicker.remove": "移除",
-  "hikari::affixPicker.confirmDelete": "确认移除",
   "hikari::affixPicker.useCustom": "使用「{query}」",
-  "hikari::localizedInput.noMatches": "没有匹配的语言"
+  "hikari::localizedInput.noMatches": "没有匹配的语言",
+  "hikari::messageBox.confirm": "确认",
+  "hikari::messageBox.cancel": "取消",
+  "hikari::messageBox.ok": "好",
+  "hikari::affixPicker.removeConfirmTitle": "移除条目",
+  "hikari::affixPicker.removeConfirm": "移除「{label}」？此操作不可撤销。",
+  "hikari::messageBox.alertTitle": "提示",
+  "hikari::messageBox.confirmTitle": "请确认",
+  "hikari::messageBox.promptTitle": "输入"
 }

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

@@ -164,7 +164,14 @@
   "hikari::affixPicker.selectedCount": "已選 {count} 項",
   "hikari::affixPicker.switchTo": "切換到",
   "hikari::affixPicker.remove": "移除",
-  "hikari::affixPicker.confirmDelete": "確認移除",
   "hikari::affixPicker.useCustom": "使用「{query}」",
-  "hikari::localizedInput.noMatches": "沒有符合的語言"
+  "hikari::localizedInput.noMatches": "沒有符合的語言",
+  "hikari::messageBox.confirm": "確認",
+  "hikari::messageBox.cancel": "取消",
+  "hikari::messageBox.ok": "好",
+  "hikari::affixPicker.removeConfirmTitle": "移除項目",
+  "hikari::affixPicker.removeConfirm": "移除「{label}」？此操作無法復原。",
+  "hikari::messageBox.alertTitle": "提示",
+  "hikari::messageBox.confirmTitle": "請確認",
+  "hikari::messageBox.promptTitle": "輸入"
 }

package/src/index.ts

@@ -47,6 +47,7 @@ export { default as HKeywordSearchModal } from "./components/HkKeywordSearchModa
 export { default as HModalBreadcrumb } from "./components/HkModalBreadcrumb";
 export { default as HPopover, type PopupPlacement } from "./components/HkPopover";
 export { default as HMenu, type HkMenuItem } from "./components/HkMenu";
+export { default as HMessageBox, HkMessageBox, type HkMessageBoxOptions, type HkMessageBoxPrompt } from "./components/HkMessageBox";
 export { HkLocalizedInput as HLocalizedInput, type HkLocaleOption } from "./components/HkLocalizedInput";
 export { default as HMenuPanel } from "./components/HkMenuPanel";
 export { default as HMenuActionItem } from "./components/HkMenuActionItem";