@celestia-island/hikari 0.55.214 → 0.55.215

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.214",
+  "version": "0.55.215",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkToast.scss

@@ -128,6 +128,39 @@
   to { transform: rotate(360deg); }
 }
 
+/* Inline action (e.g. Undo): a compact text pill in the toast chrome,
+ *  between the body and the icon buttons. Sits in the same ghost-button
+ *  family as copy/close, but reads as an affordance. */
+.hk-toast-action {
+  flex: none;
+  align-self: center;
+  margin-inline-start: var(--space-4, 4px);
+  padding: var(--space-2, 2px) var(--space-8, 8px);
+  border: 1px solid rgb(var(--color-border, 100 100 100) / 30%);
+  border-radius: var(--radius-sm, 4px);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: var(--text-sm, 0.8125rem);
+  font-weight: 600;
+  line-height: 1.4;
+  cursor: pointer;
+  white-space: nowrap;
+  opacity: 0.92;
+  transition: opacity var(--duration-fast, 0.15s) ease,
+    border-color var(--duration-fast, 0.15s) ease;
+}
+
+.hk-toast-action:hover {
+  opacity: 1;
+  border-color: rgb(var(--color-border, 100 100 100) / 55%);
+}
+
+.hk-toast-action:focus-visible {
+  outline: 2px solid rgb(var(--color-primary));
+  outline-offset: 2px;
+}
+
 .hk-toast-copy-btn,
 .hk-toast-close {
   display: flex;

package/src/components/HkToast.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 HkToast from "./HkToast";
@@ -262,4 +262,75 @@ describe("HkToast live-region semantics", () => {
       expect(el.getAttribute("aria-live"), type).toBe("polite");
     }
   });
+
+  it("renders an inline action button that dismisses first, then runs", async () => {
+    mountHost();
+    const toast = useToast();
+    let slotGoneAtClick = false;
+    toast.show("Player removed", {
+      type: "success",
+      duration: 8000,
+      action: {
+        label: "Undo",
+        onClick: () => {
+          // The dismissal is synchronous and precedes the handler.
+          slotGoneAtClick = !toast.toasts.some((t) => t.type === "success");
+        },
+      },
+    });
+    await settle();
+
+    const item = items()[0];
+    const button = item.querySelector<HTMLButtonElement>(".hk-toast-action");
+    expect(button).not.toBeNull();
+    expect(button!.textContent).toBe("Undo");
+
+    button!.click();
+    await settle();
+    expect(slotGoneAtClick).toBe(true);
+    expect(items().length).toBe(0); // the action dismisses the toast
+  });
+
+  it("runs the action at most once (the leaving item stays clickable)", async () => {
+    mountHost();
+    const toast = useToast();
+    const undone = vi.fn();
+    toast.show("Player removed", {
+      type: "success",
+      duration: 8000,
+      action: { label: "Undo", onClick: undone },
+    });
+    await settle();
+    const button = items()[0].querySelector<HTMLButtonElement>(".hk-toast-action")!;
+    button.click();
+    button.click(); // the leave transition keeps the node clickable briefly
+    await settle();
+    expect(undone).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders no action button for plain toasts", async () => {
+    mountHost();
+    const toast = useToast();
+    toast.success("Saved");
+    await settle();
+    expect(items()[0].querySelector(".hk-toast-action")).toBeNull();
+  });
+
+  it("keeps the toast dismissed even when the action handler throws", async () => {
+    mountHost();
+    const toast = useToast();
+    toast.show("Player removed", {
+      type: "success",
+      action: {
+        label: "Undo",
+        onClick: () => {
+          throw new Error("undo failed");
+        },
+      },
+    });
+    await settle();
+    items()[0].querySelector<HTMLButtonElement>(".hk-toast-action")!.click();
+    await settle();
+    expect(items().length).toBe(0);
+  });
 });

package/src/components/HkToast.tsx

@@ -100,6 +100,24 @@ const HkToastItem = defineComponent({
       emit("remove", props.toast.id);
     }
 
+    /** The inline action (e.g. Undo) dismisses the toast and runs the
+     *  host's handler; a thrown handler must not keep the toast alive.
+     *  Single-shot: the leaving item stays clickable for the leave
+     *  transition, and a double-click must not run an undo twice. */
+    let actionFired = false;
+    function handleAction() {
+      if (actionFired) return;
+      actionFired = true;
+      const action = props.toast.action;
+      emit("remove", props.toast.id);
+      try {
+        action?.onClick?.();
+      } catch {
+        // A throwing undo handler must not resurrect a dismissed toast
+        // (or break the toast stack's render for every other slot).
+      }
+    }
+
     return () => {
       const msg = displayedMessage.value;
       const text = msg?.text ?? "";
@@ -138,6 +156,18 @@ const HkToastItem = defineComponent({
               <span class="hk-toast-count">{renderCountLabel(count, t("hikari::toast.msgs", "msgs"))}</span>
             )}
           </div>
+          {props.toast.action && (
+            <button
+              class="hk-toast-action"
+              title={props.toast.action.label}
+              onClick={(e: MouseEvent) => {
+                e.stopPropagation();
+                handleAction();
+              }}
+            >
+              {props.toast.action.label}
+            </button>
+          )}
           {props.toast.copyable && (
             <button
               class="hk-toast-copy-btn"

package/src/index.ts

@@ -383,6 +383,7 @@ export {
   type OverlayHandle,
   type PopupHandle,
   type PopupKind,
+  type ToastAction,
   type ToastItem,
   type ToastMessage,
   type ToastType,

package/src/runtime/index.ts

@@ -80,7 +80,7 @@ export {
   type PopupHandle,
   type PopupKind,
 } from "./usePopupManager";
-export { useToast, TOAST_DURATION, type ToastItem, type ToastMessage, type ToastType } from "./useToast";
+export { useToast, TOAST_DURATION, type ToastAction, type ToastItem, type ToastMessage, type ToastType } from "./useToast";
 export { useConfirm } from "./useConfirm";
 export { useBlockingToast, showBlockingToast, resolveBlockingToast, clearBlockingToasts, type BlockingToastItem, type BlockingToastOptions, type BlockingToastVariant } from "./useBlockingToast";
 export { useBreakpoint } from "./useBreakpoint";

package/src/runtime/useToast.test.ts

@@ -88,3 +88,47 @@ describe("useToast stacking and dedupe", () => {
     expect(toast.toasts.some((t) => t.type === "info")).toBe(true);
   });
 });
+
+describe("useToast inline actions", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    clearAll();
+  });
+  afterEach(() => {
+    clearAll();
+    vi.useRealTimers();
+  });
+
+  it("carries the action on the slot", () => {
+    const toast = useToast();
+    const run = vi.fn();
+    toast.show("Player removed", {
+      type: "success",
+      duration: 8000,
+      action: { label: "Undo", onClick: run },
+    });
+    const slot = toast.toasts.find((t) => t.type === "success")!;
+    expect(slot.action?.label).toBe("Undo");
+    expect(slot.action?.onClick).toBe(run);
+  });
+
+  it("the latest push owns the action (a plain message clears it)", () => {
+    const toast = useToast();
+    toast.show("Player removed", {
+      type: "success",
+      action: { label: "Undo", onClick: () => {} },
+    });
+    toast.success("Saved");
+    expect(toast.toasts.find((t) => t.type === "success")!.action).toBeUndefined();
+  });
+
+  it("re-passing the action keeps it on the shared slot", () => {
+    const toast = useToast();
+    const first = { label: "Undo", onClick: () => {} };
+    const second = { label: "Retry", onClick: () => {} };
+    toast.show("Player removed", { type: "success", action: first });
+    toast.show("Player removed again", { type: "success", action: second });
+    // Reactive slots wrap the object — compare by value, not identity.
+    expect(toast.toasts.find((t) => t.type === "success")!.action).toEqual(second);
+  });
+});

package/src/runtime/useToast.ts

@@ -26,12 +26,27 @@ export interface ToastMessage {
   text: string;
 }
 
+/** One inline action button on a toast (e.g. "Undo" after a delete).
+ *  The action belongs to the CURRENT slot state: every push sets or
+ *  clears it, so the latest message decides what the button offers. */
+export interface ToastAction {
+  /** Button label (the caller i18n's it). */
+  label: string;
+  /** Runs when the button is clicked. The toast dismisses FIRST, then
+   *  this handler runs — a throwing handler can never keep the toast
+   *  alive. The button itself is single-shot: a second click during the
+   *  leave transition is ignored. */
+  onClick?: () => void;
+}
+
 export interface ToastItem {
   id: number;
   type: ToastType;
   messages: ToastMessage[];
   duration?: number;
   copyable?: boolean;
+  /** Inline action button — see ToastAction. */
+  action?: ToastAction;
 }
 
 /** Hard cap on stacked messages per toast slot. Beyond it the oldest
@@ -96,7 +111,7 @@ function findSlot(type: ToastType): ToastItem | undefined {
 function push(
   type: ToastType,
   text: string,
-  options: { duration?: number; copyable?: boolean } = {},
+  options: { duration?: number; copyable?: boolean; action?: ToastAction } = {},
 ): number {
   let slot = findSlot(type);
   if (!slot) {
@@ -106,10 +121,16 @@ function push(
       messages: [],
       duration: options.duration ?? TOAST_DURATION[type],
       copyable: options.copyable ?? defaultCopyable(type),
+      action: options.action,
     };
     state.toasts.push(slot);
-  } else if (options.copyable === true && !slot.copyable) {
-    slot.copyable = true;
+  } else {
+    if (options.copyable === true && !slot.copyable) {
+      slot.copyable = true;
+    }
+    // Latest push owns the action: re-passing it keeps the button, a
+    // plain message (no action) clears it off the shared slot.
+    slot.action = options.action;
   }
   let msgId: number;
   const last = slot.messages[slot.messages.length - 1];
@@ -141,6 +162,7 @@ export function useToast() {
     return push(type, message, {
       duration: options.duration,
       copyable: options.copyable,
+      action: options.action,
     });
   }