@celestia-island/hikari 0.49.4 → 0.49.6

package/package.json

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

package/src/components/HkBlockingToast.test.tsx

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, h, nextTick } from "vue";
 
 import HkBlockingToast from "./HkBlockingToast";
@@ -48,6 +48,16 @@ function actionButtons(card: HTMLElement): HTMLButtonElement[] {
   return Array.from(card.querySelectorAll<HTMLButtonElement>(".hk-blocking-toast-actions button"));
 }
 
+/** Answer the gate by semantics, not by position: the row order is pinned
+ *  separately, so these helpers keep the behaviour cases readable. */
+function confirmButton(card: HTMLElement): HTMLButtonElement {
+  return actionButtons(card).find((b) => !b.classList.contains("hk-btn-secondary"))!;
+}
+
+function cancelButton(card: HTMLElement): HTMLButtonElement {
+  return actionButtons(card).find((b) => b.classList.contains("hk-btn-secondary"))!;
+}
+
 function toastRegistryTitles(): Array<{ kind: string; title?: string }> {
   return [...usePopupManager().registry.value.values()].map((e) => ({ kind: e.kind, title: e.title }));
 }
@@ -73,9 +83,9 @@ describe("HkBlockingToast", () => {
     expect(card.querySelector(".hk-blocking-toast-title")!.textContent).toContain("Join group?");
     expect(card.querySelector(".hk-blocking-toast-message")!.textContent).toContain("Admins can view your usage.");
     const labels = actionButtons(card).map((b) => b.textContent?.trim());
-    expect(labels).toEqual(["Cancel", "Confirm"]);
+    expect(labels).toEqual(["Confirm", "Cancel"]);
 
-    actionButtons(card)[1].click();
+    confirmButton(card).click();
     await expect(gate).resolves.toBe(true);
     await settle();
     expect(cards().length).toBe(0);
@@ -87,7 +97,7 @@ describe("HkBlockingToast", () => {
     await settle();
     const card = cards()[0];
 
-    actionButtons(card)[0].click();
+    cancelButton(card).click();
     await expect(gate).resolves.toBe(false);
     await settle();
     expect(cards().length).toBe(0);
@@ -103,7 +113,7 @@ describe("HkBlockingToast", () => {
     expect(cards().length).toBe(1);
 
     // Clean up the deliberately unanswered gate.
-    actionButtons(cards()[0])[1].click();
+    confirmButton(cards()[0]).click();
     await expect(gate).resolves.toBe(true);
   });
 
@@ -115,21 +125,29 @@ describe("HkBlockingToast", () => {
     await settle();
     expect(toastRegistryTitles().some((e) => e.kind === "toast" && e.title === "Consent")).toBe(true);
 
-    actionButtons(cards()[0])[0].click();
+    cancelButton(cards()[0]).click();
     await expect(gate).resolves.toBe(false);
     await settle();
     expect(toastRegistryTitles().some((e) => e.kind === "toast")).toBe(false);
   });
 
   it("resolves false when timeoutMs expires", async () => {
+    // Virtual clock: a real 40ms timer races suite load on busy runners
+    // (the card teardown could lag past the resolution window). settle()'s
+    // own sleeps ride the same clock via advanceTimersByTimeAsync.
+    vi.useFakeTimers();
     mountHost();
     const gate = showBlockingToast("Times out", { timeoutMs: 40 });
-    await settle();
+    await vi.advanceTimersByTimeAsync(30);
+    await nextTick();
     expect(cards().length).toBe(1);
 
+    await vi.advanceTimersByTimeAsync(41);
     await expect(gate).resolves.toBe(false);
-    await settle();
+    await vi.advanceTimersByTimeAsync(30);
+    await nextTick();
     expect(cards().length).toBe(0);
+    vi.useRealTimers();
   });
 
   it("stacks multiple prompts that resolve independently", async () => {
@@ -144,13 +162,13 @@ describe("HkBlockingToast", () => {
     expect(cardTwo.querySelector(".hk-blocking-toast-title")!.textContent).toContain("Two");
 
     // Answer only the second; the first keeps blocking.
-    actionButtons(cardTwo)[1].click();
+    confirmButton(cardTwo).click();
     await expect(second).resolves.toBe(true);
     await settle();
     expect(cards().length).toBe(1);
     expect(cards()[0].querySelector(".hk-blocking-toast-title")!.textContent).toContain("One");
 
-    actionButtons(cards()[0])[0].click();
+    cancelButton(cards()[0]).click();
     await expect(first).resolves.toBe(false);
   });
 
@@ -166,9 +184,9 @@ describe("HkBlockingToast", () => {
     const card = cards()[0];
     expect(card.classList.contains("hk-blocking-toast-danger")).toBe(true);
     const labels = actionButtons(card).map((b) => b.textContent?.trim());
-    expect(labels).toEqual(["Back out", "Join"]);
+    expect(labels).toEqual(["Join", "Back out"]);
 
-    actionButtons(card)[1].click();
+    confirmButton(card).click();
     await expect(gate).resolves.toBe(true);
   });
 
@@ -179,9 +197,9 @@ describe("HkBlockingToast", () => {
     await settle();
 
     const labels = actionButtons(cards()[0]).map((b) => b.textContent?.trim());
-    expect(labels).toEqual(["取消", "确认"]);
+    expect(labels).toEqual(["确认", "取消"]);
 
-    actionButtons(cards()[0])[1].click();
+    confirmButton(cards()[0]).click();
     await expect(gate).resolves.toBe(true);
     await setLocale("en");
   });
@@ -203,7 +221,8 @@ describe("HkBlockingToast", () => {
     Object.defineProperty(slot!, "offsetWidth", { value: 384, configurable: true });
     Object.defineProperty(slot!, "offsetHeight", { value: 120, configurable: true });
 
-    actionButtons(cards()[0])[0].click();
+    // Dismiss (not confirm): this case only cares about the leave animation.
+    cancelButton(cards()[0]).click();
     await nextTick();
 
     const leaving = document.querySelector<HTMLElement>(".hk-blocking-toast-leave-active");

package/src/components/HkBlockingToast.tsx

@@ -79,19 +79,22 @@ const HkBlockingToastCard = defineComponent({
             ) : null}
             <p class="hk-blocking-toast-message">{item.message}</p>
             <div class="hk-blocking-toast-actions">
+              {/* Confirmation surfaces share one order: primary action first
+                  (left), dismiss second (right) — matching HkConfirmDialog
+                  and HkMessageBox. */}
               <HButton
-                variant="secondary"
+                variant={item.variant === "danger" ? "danger" : "primary"}
                 size="sm"
-                onClick={() => emit("cancel")}
+                onClick={() => emit("confirm")}
               >
-                {item.cancelLabel ?? t("hikari::blockingToast.cancel", "Cancel")}
+                {item.confirmLabel ?? t("hikari::blockingToast.confirm", "Confirm")}
               </HButton>
               <HButton
-                variant={item.variant === "danger" ? "danger" : "primary"}
+                variant="secondary"
                 size="sm"
-                onClick={() => emit("confirm")}
+                onClick={() => emit("cancel")}
               >
-                {item.confirmLabel ?? t("hikari::blockingToast.confirm", "Confirm")}
+                {item.cancelLabel ?? t("hikari::blockingToast.cancel", "Cancel")}
               </HButton>
             </div>
           </div>

package/src/components/HkBoard.tsx

@@ -45,6 +45,7 @@ import HkMinimap, { type MinimapBox } from "./HkMinimap";
 import {
   boardBBox,
   boardStepRung,
+  quantizeBoardK,
   type BoardCamera,
   type BoardPoint,
   type BoardRect,
@@ -450,6 +451,9 @@ export default defineComponent({
           ))}
         </div>
         {props.minimap && (
+          // Slider drags arrive as ABSOLUTE rung targets — land the camera
+          // on the thumb's rung exactly (boardStepRung's directional push
+          // is only for the ± buttons' relative steps).
           <div class="hk-board-minimap">
             <HkMinimap
               boxes={minimapBoxes.value}
@@ -466,7 +470,10 @@ export default defineComponent({
               minZoomPercent={Math.round(props.minK * 100)}
               maxZoomPercent={Math.round(props.maxK * 100)}
               showReset
-              onZoomTo={(percent: number) => cam.zoomToK(boardStepRung(camera.value.k, percent / 100))}
+              onZoomTo={(percent: number, source?: "slider" | "step") =>
+                cam.zoomToK(source === "slider"
+                  ? quantizeBoardK(percent / 100)
+                  : boardStepRung(camera.value.k, percent / 100))}
               onReset={() => cam.fit()}
               onPanDelta={(dx: number, dy: number) => cam.panBy(dx, dy)}
             />

package/src/components/HkConfirmDialog.test.tsx

@@ -0,0 +1,155 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkConfirmDialog from "./HkConfirmDialog";
+
+const apps: ReturnType<typeof createApp>[] = [];
+const containers: HTMLElement[] = [];
+
+afterEach(() => {
+  for (const app of apps.splice(0)) app.unmount();
+  for (const el of containers.splice(0)) el.remove();
+  document.body.innerHTML = "";
+});
+
+async function flush() {
+  await nextTick();
+  await nextTick();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+/** Mount an open confirm dialog and record every event it emits. */
+function mountDialog(extra: Record<string, unknown> = {}) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+
+  const open = ref(true);
+  const events: string[] = [];
+  const Host = defineComponent({
+    setup() {
+      return () =>
+        h(HkConfirmDialog, {
+          open: open.value,
+          title: "Enable emergency lockdown?",
+          message: "Every agent tool call is blocked.",
+          confirmLabel: "Confirm",
+          cancelLabel: "Cancel",
+          onConfirm: () => events.push("confirm"),
+          onCancel: () => events.push("cancel"),
+          "onUpdate:open": (v: boolean) => events.push(`open:${v}`),
+          ...extra,
+        });
+    },
+  });
+  const app = createApp(Host);
+  apps.push(app);
+  app.mount(container);
+  return { open, events };
+}
+
+function actionButtons(): HTMLButtonElement[] {
+  return [
+    ...document.body.querySelectorAll<HTMLButtonElement>(
+      ".hk-confirm-dialog-actions button",
+    ),
+  ];
+}
+
+describe("HkConfirmDialog", () => {
+  it("puts the primary action before the dismiss action", async () => {
+    mountDialog();
+    await flush();
+
+    const buttons = actionButtons();
+    expect(buttons.map((b) => b.textContent)).toEqual(["Confirm", "Cancel"]);
+    // The first button is the primary one (danger by default), the second the
+    // secondary dismiss — desktop message-box ordering.
+    expect(buttons[0]!.classList.contains("hk-btn-danger")).toBe(true);
+    expect(buttons[1]!.classList.contains("hk-btn-secondary")).toBe(true);
+  });
+
+  it("resolves through confirm + update:open on the primary action", async () => {
+    const { events } = mountDialog();
+    await flush();
+
+    actionButtons()[0]!.click();
+    await flush();
+
+    expect(events).toEqual(["confirm", "open:false"]);
+  });
+
+  it("resolves through cancel + update:open on the dismiss action", async () => {
+    const { events } = mountDialog();
+    await flush();
+
+    actionButtons()[1]!.click();
+    await flush();
+
+    expect(events).toEqual(["cancel", "open:false"]);
+  });
+
+  /** `open` is caller-owned, so relaying the modal's close request as
+   *  `update:open` alone left the window on screen and the caller's promise
+   *  pending: the operator hit ✕, nothing happened, and an awaiting
+   *  `useConfirm()` caller waited until unmount (user report 2026-09-11). */
+  it("dismisses as a cancel when the title-bar close button is used", async () => {
+    const { events } = mountDialog();
+    await flush();
+
+    const close = document.body.querySelector<HTMLButtonElement>(".hk-modal-close");
+    expect(close, "title-bar close button renders").toBeTruthy();
+    close!.click();
+    await flush();
+
+    expect(events).toContain("cancel");
+    expect(events).toContain("open:false");
+    expect(events).not.toContain("confirm");
+  });
+
+  it("dismisses as a cancel when the overlay is clicked", async () => {
+    const { events } = mountDialog();
+    await flush();
+
+    const overlay = document.body.querySelector<HTMLElement>(".hk-modal-overlay");
+    expect(overlay, "overlay renders").toBeTruthy();
+    overlay!.click();
+    await flush();
+
+    expect(events).toContain("cancel");
+    expect(events).toContain("open:false");
+  });
+
+  it("dismisses as a cancel on Escape", async () => {
+    const { events } = mountDialog();
+    await flush();
+
+    const surface = document.body.querySelector<HTMLElement>(".hk-modal-content");
+    expect(surface, "dialog surface renders").toBeTruthy();
+    surface!.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+    );
+    await flush();
+
+    expect(events).toContain("cancel");
+    expect(events).toContain("open:false");
+    expect(events).not.toContain("confirm");
+  });
+
+  it("cannot be dismissed while the confirmation is loading", async () => {
+    const { events } = mountDialog({ loading: true });
+    await flush();
+
+    expect(document.body.querySelector(".hk-modal-close")).toBeNull();
+    // Both actions refuse input too, so a half-submitted confirmation cannot
+    // be answered twice.
+    const buttons = actionButtons();
+    expect(buttons.map((b) => b.disabled)).toEqual([true, true]);
+    buttons.forEach((b) => b.click());
+    const overlay = document.body.querySelector<HTMLElement>(".hk-modal-overlay");
+    overlay?.click();
+    await flush();
+
+    expect(events).toEqual([]);
+  });
+});

package/src/components/HkConfirmDialog.tsx

@@ -37,36 +37,59 @@ export default defineComponent({
       emit("update:open", false);
     }
 
+    /**
+     * Window chrome (✕, overlay click, Escape) is a DISMISS, never a no-op.
+     *
+     * `open` is caller-owned, so relaying the modal's close request as
+     * `update:open` alone left the dialog on screen and the caller's promise
+     * unsettled: the operator closed the window, nothing happened, and an
+     * awaiting `useConfirm()` caller stayed pending until unmount (user
+     * report, 2026-09-11). Routing the close through the cancel path settles
+     * the caller and lets it take the window down.
+     */
+    function onModalUpdate(next: boolean) {
+      if (next) {
+        emit("update:open", true);
+        return;
+      }
+      onCancel();
+    }
+
     return () => (
       <HModal
         modelValue={props.open}
         title={props.title}
         closable={!props.loading}
         width="24rem"
-        onUpdate:modelValue={(v: boolean) => emit("update:open", v)}
+        onUpdate:modelValue={onModalUpdate}
       >
         {{
           default: () => (
             <div class="hk-confirm-dialog">
               <p class="hk-confirm-dialog-message">{props.message}</p>
+              {/* Primary action first, dismiss second — the message-box order
+               *  the confirmation surfaces share (HkMessageBox,
+               *  HkBlockingToast); form-dialog footers keep the primary
+               *  rightmost. It mirrors under `dir="rtl"` because the row only
+               *  reverses visually. */}
               <div class="hk-confirm-dialog-actions">
                 <HButton
                   class="hk-confirm-dialog-btn"
-                  variant="secondary"
+                  variant={props.confirmVariant}
                   size="md"
-                  disabled={props.loading}
-                  onClick={onCancel}
+                  loading={props.loading}
+                  onClick={onConfirm}
                 >
-                  {props.cancelLabel || t("hikari::confirmDialog.cancel", "Cancel")}
+                  {props.confirmLabel || t("hikari::confirmDialog.confirm", "Confirm")}
                 </HButton>
                 <HButton
                   class="hk-confirm-dialog-btn"
-                  variant={props.confirmVariant}
+                  variant="secondary"
                   size="md"
-                  loading={props.loading}
-                  onClick={onConfirm}
+                  disabled={props.loading}
+                  onClick={onCancel}
                 >
-                  {props.confirmLabel || t("hikari::confirmDialog.confirm", "Confirm")}
+                  {props.cancelLabel || t("hikari::confirmDialog.cancel", "Cancel")}
                 </HButton>
               </div>
             </div>

package/src/components/HkDateTimePicker.test.ts

@@ -214,7 +214,13 @@ describe("HkDateTimePicker", () => {
     const monthBtn = picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-title-btn")[0];
     monthBtn?.click();
     await settle();
-    await waitForView("the months grid", () => pickCells().length === 12);
+    // Destination state = months pane mounted AND the leaving days pane
+    // gone — mid-transition the cell counts already read final while the
+    // stage still carries both panes.
+    await waitForView("the months grid settled to one pane", () =>
+      pickCells().length === 12 &&
+      picker()?.querySelectorAll(".hk-dtp-cell").length === 12 &&
+      stage?.children.length === 1);
     expect(stage?.getAttribute("data-dir")).toBe("fwd");
     expect(picker()?.querySelector<HTMLElement>(".hk-dtp-stage")).toBe(stage);
     expect(stage?.children.length).toBe(1); // one pane at a time after settle
@@ -249,15 +255,22 @@ describe("HkDateTimePicker", () => {
     const monthBtn = picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-title-btn")[0];
     monthBtn?.click();
     await settle();
-    await waitForView("the months grid", () => pickCells().length === 12);
+    // Destination state = months pane mounted AND the leaving days pane
+    // gone — mid-transition the cell counts already read final while the
+    // stage still carries both panes.
+    await waitForView("the months grid settled to one pane", () =>
+      pickCells().length === 12 &&
+      picker()?.querySelectorAll(".hk-dtp-cell:not([data-variant])").length === 0);
     expect(pickCells().length).toBe(12);
     // The first step button is "Hour +"; bumping it changes only the time
     // part of the model, which must not yank the view back to days.
     const upBtn = picker()?.querySelector<HTMLButtonElement>(".hk-dtp-step-btn");
     upBtn?.click();
     await nextTick();
-    expect(picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-cell[data-variant='pick']").length).toBe(12);
-    expect(picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-cell:not([data-variant])").length).toBe(0);
+    await waitForView("still the settled months grid after the bump", () =>
+      pickCells().length === 12 &&
+      picker()?.querySelectorAll(".hk-dtp-cell:not([data-variant])").length === 0);
+    expect(picker()?.querySelectorAll(".hk-dtp-cell:not([data-variant])").length).toBe(0);
   });
 
   it("selecting a day emits a new Date preserving the time of day", async () => {

package/src/components/HkMenu.scss

@@ -16,6 +16,13 @@
   @include mi.item;
 }
 
+/* Header/footer/extra slot wrappers: geometry-neutral by contract (the
+ * panel's own inset applies), but they are the DOM hook that says rows
+ * in here speak the menu-item grammar. */
+.hk-menu-slot {
+  display: block;
+}
+
 .hk-menu-flag {
   flex-shrink: 0;
   font-size: var(--text-base);

package/src/components/HkMenu.test.ts

@@ -465,11 +465,16 @@ describe("HkMenu slots", () => {
     expect(level).toBeTruthy();
     expect(level.querySelector(".menu-header")!.textContent).toBe("Identity Block");
     expect(level.querySelector(".menu-footer")!.textContent).toBe("Footer Note");
-    // Ordering: header → rows → footer.
+    // Ordering: header → rows → footer, with the header/footer riding
+    // the standard .hk-menu-slot wrappers (their rows inherit the
+    // panel's inset; consumers' markup stays untouched inside).
     const children = Array.from(level.children).map((el) => el.className);
-    expect(children[0]).toContain("menu-header");
+    expect(children[0]).toContain("hk-menu-slot--head");
     expect(children[1]).toContain("hk-menu-row");
-    expect(children[children.length - 1]).toContain("menu-footer");
+    expect(children[children.length - 1]).toContain("hk-menu-slot--foot");
+    // The consumer's own markup lives untouched INSIDE the wrappers.
+    expect(level.querySelector(".hk-menu-slot--head")!.querySelector(".menu-header")).not.toBeNull();
+    expect(level.querySelector(".hk-menu-slot--foot")!.querySelector(".menu-footer")).not.toBeNull();
   });
 
   it("renders header/footer inside the mobile sheet too", async () => {
@@ -806,11 +811,13 @@ describe("HkMenu sidebar variant", () => {
     app.mount(container);
 
     // The identity block leads the same inline surface (drawer account
-    // menu grammar) — first child of the nav, before any row.
+    // menu grammar) — inside the standard slot wrapper, first child of
+    // the nav, before any row.
     const nav = container.querySelector(".hk-menu-sidebar");
     const identity = nav?.querySelector(".sidebar-identity");
     expect(identity).not.toBeNull();
-    expect(nav!.firstElementChild).toBe(identity);
+    expect(nav!.firstElementChild).toBe(nav!.querySelector(".hk-menu-slot--head"));
+    expect(nav!.querySelector(".hk-menu-slot--head")!.contains(identity!)).toBe(true);
   });
 
   it("renders the check column on rows that opt in (checked !== undefined)", async () => {

package/src/components/HkMenu.tsx

@@ -542,16 +542,35 @@ export default defineComponent({
     }
 
     /** One level's content inside the shared panel surface: header slot →
-     *  rows (or the consumer's default-slot rows) → footer slot. Custom
-     *  slots ride the root level, where an identity block belongs. */
+     *  rows (or the consumer's default-slot rows) → footer slot. Header
+     *  and footer ride a standard `.hk-menu-slot` wrapper so their rows
+     *  inherit the panel's inset and tests/contracts get a stable DOM
+     *  hook — raw slot vnodes used to splice straight into the level,
+     *  and every consumer hand-rolled its own spacing (PlatformSwitcher
+     *  shipped a drifted divider that way). The wrapper renders only
+     *  when the slot has content: an empty one would cost a phantom
+     *  flex gap in headerless surfaces. */
+    function slotWrapper(kind: "head" | "foot" | "extra", nodes: VNode[]): VNode | null {
+      return nodes.length ? (
+        <div class={`hk-menu-slot hk-menu-slot--${kind}`}>{nodes}</div>
+      ) : null;
+    }
+
     function renderLevelBody(level: number, list: HkMenuItem[]): VNode[] {
-      const head: VNode[] = level === 0 ? (slots.header?.() ?? []) : [];
-      const tail: VNode[] = level === 0 ? (slots.footer?.() ?? []) : [];
+      const out: VNode[] = [];
+      const head = level === 0 ? slots.header?.() ?? [] : [];
+      const foot = level === 0 ? slots.footer?.() ?? [] : [];
+      const headWrap = level === 0 ? slotWrapper("head", head) : null;
+      const footWrap = slotWrapper("foot", foot);
+      if (headWrap) out.push(headWrap);
       if (slots.default) {
-        return [...head, ...slots.default(), ...tail];
+        out.push(...slots.default());
+      } else {
+        const reserved = checkReserved(list);
+        out.push(...list.map((it) => renderRow(it, level, reserved)));
       }
-      const reserved = checkReserved(list);
-      return [...head, ...list.map((it) => renderRow(it, level, reserved)), ...tail];
+      if (footWrap) out.push(footWrap);
+      return out;
     }
 
     function levelSurface(level: number, list: HkMenuItem[]): VNode {
@@ -796,10 +815,11 @@ export default defineComponent({
       return (
         <nav class="hk-menu-sidebar" aria-label={props.title || "menu"}>
           {/* Header slot (identity block, section label, …) above the
-              rows — mirrors the popup variant's level-0 header, so an
-              account menu renders the same grammar whether it pops up
-              on desktop or lives inside a drawer on mobile. */}
-          {slots.header?.()}
+              rows — mirrors the popup variant's level-0 header (same
+              .hk-menu-slot wrapper), so an account menu renders the same
+              grammar whether it pops up on desktop or lives inside a
+              drawer on mobile. */}
+          {slotWrapper("head", slots.header?.() ?? [])}
           {props.items.map((it) => renderSidebarItem(it, 0))}
         </nav>
       );

package/src/components/HkMessageBox.tsx

@@ -196,13 +196,10 @@ const HkMessageBoxHost = defineComponent({
             ),
             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>
-                )}
+                {/* Primary action first, dismiss second — message boxes follow
+                    the desktop OK-left / Cancel-right convention, matching
+                    HkConfirmDialog. Alerts have no cancel by definition;
+                    confirm/prompt hide it only when the host asks. */}
                 <HkButton
                   variant={confirmVariant}
                   class="hk-message-box-confirm"
@@ -210,6 +207,11 @@ const HkMessageBoxHost = defineComponent({
                 >
                   {confirmLabel}
                 </HkButton>
+                {props.kind !== "alert" && !props.hideCancel && (
+                  <HkButton variant="secondary" onClick={cancel}>
+                    {cancelLabel}
+                  </HkButton>
+                )}
               </div>
             ),
           }}