@spaethtech/svelte-ui 0.21.5-dev.147.eb2f000 → 0.21.5-dev.149.8ed1480

package/dist/components/Toast/ToastRow.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  /**
+   * One toast row: a filled Alert plus (optionally) an action button and a close button. Owns its own
+   * auto-dismiss countdown so it can PAUSE while the pointer is over it or keyboard focus is inside it
+   * (a `holds` counter handles pointer + focus overlapping) — that keeps the `action` reachable by
+   * mouse AND keyboard. `timeout: 0` is sticky (no countdown). Controls are our <Button>, never raw
+   * <button>, per the composition standard.
+   */
+  import { onMount } from "svelte";
+  import Alert from "../Alert.svelte";
+  import Button from "../Button.svelte";
+  import IconClose from "~icons/mdi/close";
+  import { uiI18n } from "../../i18n.js";
+  import { dismissToast, type ToastItem } from "./toast.svelte.js";
+  import type { Variant } from "../../types/variants.js";
+  import type { Responsive } from "../../types/responsive.js";
+  import type { Size } from "../../types/sizes.js";
+
+  const i18n = uiI18n();
+
+  let {
+    item,
+    fallbackVariant,
+    fallbackSize,
+  }: {
+    item: ToastItem;
+    /** Toaster-level defaults for toasts that didn't set their own. */
+    fallbackVariant?: Variant;
+    fallbackSize?: Responsive<Size>;
+  } = $props();
+
+  // Auto-dismiss countdown with pause/resume. `remaining` ms is decremented by whatever has elapsed
+  // each time we pause; while `holds > 0` (hovered and/or focused) no timer runs.
+  let remaining = item.timeout;
+  let startedAt = 0;
+  let handle: ReturnType<typeof setTimeout> | undefined;
+  let holds = 0;
+
+  function clear() {
+    if (handle !== undefined) {
+      clearTimeout(handle);
+      handle = undefined;
+    }
+  }
+  function run() {
+    clear();
+    if (item.timeout <= 0 || typeof window === "undefined") return;
+    startedAt = Date.now();
+    handle = window.setTimeout(() => dismissToast(item.id), remaining);
+  }
+  function hold() {
+    if (item.timeout <= 0) return;
+    if (handle !== undefined) remaining -= Date.now() - startedAt; // bank elapsed time once
+    clear();
+    holds++;
+  }
+  function release() {
+    if (item.timeout <= 0) return;
+    holds = Math.max(0, holds - 1);
+    if (holds > 0) return;
+    if (remaining > 0) run();
+    else dismissToast(item.id);
+  }
+
+  onMount(() => {
+    run();
+    return clear;
+  });
+
+  function runAction() {
+    // Run the handler, then dismiss — unless the action opted out with `dismiss: false` (keep open).
+    item.action?.onclick();
+    if (item.action?.dismiss !== false) dismissToast(item.id);
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+  class="pointer-events-auto flex min-w-56 items-start gap-1 rounded shadow-lg [background-color:var(--ui-color-background)]"
+  role="status"
+  onpointerenter={hold}
+  onpointerleave={release}
+  onfocusin={hold}
+  onfocusout={release}
+>
+  <Alert variant={item.variant ?? fallbackVariant} size={item.size ?? fallbackSize} filled class="grow"
+    >{item.message}</Alert
+  >
+  {#if item.action}
+    <Button variant="ghost" size="sm" class="shrink-0 self-center" onclick={runAction}>
+      {item.action.label}
+    </Button>
+  {/if}
+  <Button
+    variant="ghost"
+    size="sm"
+    class="shrink-0 self-center"
+    aria-label={i18n.messages.dismiss}
+    title={i18n.messages.dismiss}
+    onclick={() => dismissToast(item.id)}
+  >
+    {#snippet icon()}<IconClose />{/snippet}
+  </Button>
+</div>

package/dist/components/Toast/ToastRow.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type ToastItem } from "./toast.svelte.js";
+import type { Variant } from "../../types/variants.js";
+import type { Responsive } from "../../types/responsive.js";
+import type { Size } from "../../types/sizes.js";
+type $$ComponentProps = {
+    item: ToastItem;
+    /** Toaster-level defaults for toasts that didn't set their own. */
+    fallbackVariant?: Variant;
+    fallbackSize?: Responsive<Size>;
+};
+declare const ToastRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToastRow = ReturnType<typeof ToastRow>;
+export default ToastRow;

package/dist/components/Toast/Toaster.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-  import { uiI18n } from "../../i18n.js";
-  const i18n = uiI18n();
   /**
    * Renders the toast store's items in a fixed, top-layer stack. Mount ONCE at the app root; push with
-   * `toast.*` from anywhere. Each toast is an Alert (filled) honouring its variant + size.
+   * `toast.*` from anywhere. Each toast is a <ToastRow> (filled Alert + optional action + close),
+   * which owns its own pausable auto-dismiss countdown.
    */
-  import Alert from "../Alert.svelte";
-  import IconClose from "~icons/mdi/close";
-  import { getToasts, dismissToast } from "./toast.svelte.js";
+  import ToastRow from "./ToastRow.svelte";
+  import { getToasts } from "./toast.svelte.js";
   import type { Size } from "../../types/sizes.js";
   import type { Responsive } from "../../types/responsive.js";
   import type { Variant } from "../../types/variants.js";
@@ -35,19 +33,7 @@
 {#if items.length}
   <div class="pointer-events-none fixed z-[100] flex max-w-[90vw] flex-col gap-2 {posClass}">
     {#each items as t (t.id)}
-      <div
-        class="pointer-events-auto flex min-w-56 items-start gap-2 rounded shadow-lg [background-color:var(--ui-color-background)]"
-      >
-        <Alert variant={t.variant ?? variant} size={t.size ?? size} filled class="grow"
-          >{t.message}</Alert
-        >
-        <button
-          type="button"
-          aria-label={i18n.messages.dismiss}
-          class="shrink-0 self-center pr-2 opacity-60 hover:opacity-100"
-          onclick={() => dismissToast(t.id)}><IconClose class="size-4" /></button
-        >
-      </div>
+      <ToastRow item={t} fallbackVariant={variant} fallbackSize={size} />
     {/each}
   </div>
 {/if}

package/dist/components/Toast/toast.svelte.d.ts

@@ -5,16 +5,31 @@ import type { Size } from "../../types/sizes.js";
  * shared Variant (status subset) + Size axes. Auto-dismisses after `timeout` ms (0 = sticky).
  */
 export type ToastVariant = "danger" | "success" | "warning" | "info" | "primary";
+/**
+ * An optional action rendered as a small button inside the toast (e.g. "Undo"). Clicking it runs
+ * `onclick`, then the toast is dismissed. Set `dismiss: false` to KEEP the toast open instead (e.g.
+ * to show progress) and close it later via the id returned from `toast.*` + `dismissToast`.
+ */
+export type ToastAction = {
+    /** Button label, e.g. "Undo". */
+    label: string;
+    /** Click handler (its return value is ignored). */
+    onclick: () => void;
+    /** Dismiss the toast after `onclick` runs. Default `true`; `false` keeps it open. */
+    dismiss?: boolean;
+};
 export type ToastItem = {
     id: number;
     variant: ToastVariant;
     message: string;
     size: Size;
     timeout: number;
+    action?: ToastAction;
 };
 export type ToastOptions = {
     timeout?: number;
     size?: Size;
+    action?: ToastAction;
 };
 /** The live toast list (read in <Toaster>; mutations are reactive). */
 export declare function getToasts(): ToastItem[];

package/dist/components/Toast/toast.svelte.js

@@ -9,12 +9,13 @@ export function dismissToast(id) {
     if (i >= 0)
         items.splice(i, 1);
 }
+// NOTE: auto-dismiss timing lives in <Toaster> (per toast row), NOT here — the row can then PAUSE the
+// countdown while the pointer is over it or keyboard focus is inside it, so an `action` button stays
+// reachable. `push` only records `timeout` (0 = sticky); the row reads it and owns the timer.
 function push(variant, message, opts = {}) {
     const id = ++seq;
     const timeout = opts.timeout ?? 4000;
-    items.push({ id, variant, message, size: opts.size ?? "md", timeout });
-    if (timeout > 0 && typeof window !== "undefined")
-        window.setTimeout(() => dismissToast(id), timeout);
+    items.push({ id, variant, message, size: opts.size ?? "md", timeout, action: opts.action });
     return id;
 }
 export const toast = {

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export { Stat } from "./components/Stat/index.js";
 export { Timeline } from "./components/Timeline/index.js";
 export type { TimelineItem } from "./components/Timeline/index.js";
 export { default as Toaster } from "./components/Toast/Toaster.svelte";
-export { toast, getToasts, dismissToast, type ToastVariant, type ToastItem, } from "./components/Toast/toast.svelte.js";
+export { toast, getToasts, dismissToast, type ToastVariant, type ToastItem, type ToastOptions, type ToastAction, } from "./components/Toast/toast.svelte.js";
 export { default as Dialog } from "./components/Dialog.svelte";
 export { Drawer } from "./components/Drawer/index.js";
 export { default as ConfirmDialog } from "./components/ConfirmDialog.svelte";

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-export { toast, getToasts, dismissToast, type ToastVariant, type ToastItem, } from "./components/Toast/toast.svelte.js";
+export { toast, getToasts, dismissToast, type ToastVariant, type ToastItem, type ToastOptions, type ToastAction, } from "./components/Toast/toast.svelte.js";
 export { anchored, computePlacement, resolveBoundary } from "./positioning/anchored.js";
 export type { Side, Align, Boundary, PlaceOptions, Placement, AnchoredParams, } from "./positioning/anchored.js";
 export { tooltip } from "./positioning/tooltip.js";

package/docs/usage.md

@@ -1169,6 +1169,49 @@ reads `GridState.group` (`{ key, dir }`) and does `ORDER BY <group>, <sort>`.
 client-side counterpart to a remote `query()`; `matchesRow(row, ast)` is the underlying AST evaluator if
 you need to filter an array yourself. See the live demo for the full DataTable + Query walkthrough.
 
+### Toasts
+
+Mount a single `<Toaster />` once at the app root, then push from anywhere with `toast.*`. The push
+functions (`toast`, `dismissToast`, `getToasts`) are component-free values, so import them from the
+dedicated **`@spaethtech/svelte-ui/toast`** subpath (or `/utils`, or the root barrel) to stay barrel-free.
+
+```svelte
+<script>
+  import { Toaster } from "@spaethtech/svelte-ui/toaster"; // mount once (e.g. +layout.svelte)
+  import { toast } from "@spaethtech/svelte-ui/toast"; // push from anywhere
+</script>
+
+<Toaster position="bottom-right" />
+
+<!-- status variants; each returns an id you can toast.dismiss(id) -->
+toast.success("Saved");
+toast.info("Heads up", { timeout: 0 }); // 0 = sticky (dismiss with the × button)
+toast.warning("Almost full", { size: "lg" });
+```
+
+**Action button (e.g. Undo).** Pass an `action`; it renders a small button that runs `onclick` and then
+dismisses the toast. The auto-dismiss countdown pauses while the pointer is over the toast or keyboard
+focus is inside it, so the action stays reachable. Set `dismiss: false` to keep the toast open instead
+(close it later by id).
+
+```svelte
+let archived = $state(false);
+
+function archive() {
+  archived = true;
+  toast.info("Archived “Breaking Bad”", {
+    action: { label: "Undo", onclick: () => (archived = false) },
+  });
+}
+
+// Keep-open variant (show progress, then dismiss yourself):
+const id = toast.info("Uploading…", {
+  timeout: 0,
+  action: { label: "Cancel", onclick: cancelUpload, dismiss: false },
+});
+// … later: toast.dismiss(id);
+```
+
 ## Theme Integration
 
 ### Using CSS Variables

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.21.5-dev.147.eb2f000",
+  "version": "0.21.5-dev.149.8ed1480",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"
@@ -109,6 +109,11 @@
       "types": "./dist/components/Toast/Toaster.svelte.d.ts",
       "svelte": "./dist/components/Toast/Toaster.svelte"
     },
+    "./toast": {
+      "types": "./dist/components/Toast/toast.svelte.d.ts",
+      "svelte": "./dist/components/Toast/toast.svelte.js",
+      "default": "./dist/components/Toast/toast.svelte.js"
+    },
     "./dialog": {
       "types": "./dist/components/Dialog.svelte.d.ts",
       "svelte": "./dist/components/Dialog.svelte"