@zag-js/toast 0.82.1 → 1.0.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { createMachine, subscribe, guards, ref, isMachine } from '@zag-js/core';
-import { createScope, raf, queryAll, dataAttr, contains, addDomEvent, MAX_Z_INDEX } from '@zag-js/dom-query';
-import { compact, warn, runIfFn, uuid } from '@zag-js/utils';
+import { addDomEvent, raf, dataAttr, contains, MAX_Z_INDEX } from '@zag-js/dom-query';
 import { createAnatomy } from '@zag-js/anatomy';
+import { createMachine, createGuards } from '@zag-js/core';
 import { trackDismissableBranch } from '@zag-js/dismissable';
+import { uuid, setRafTimeout, runIfFn } from '@zag-js/utils';
 
 // src/toast-group.connect.ts
 var anatomy = createAnatomy("toast").parts(
@@ -14,18 +14,15 @@ var anatomy = createAnatomy("toast").parts(
   "closeTrigger"
 );
 var parts = anatomy.build();
-var dom = createScope({
-  getRegionId: (placement) => `toast-group:${placement}`,
-  getRegionEl: (ctx, placement) => dom.getById(ctx, `toast-group:${placement}`),
-  getRootId: (ctx) => `toast:${ctx.id}`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getTitleId: (ctx) => `toast:${ctx.id}:title`,
-  getDescriptionId: (ctx) => `toast:${ctx.id}:description`,
-  getCloseTriggerId: (ctx) => `toast${ctx.id}:close`
-});
-function getToastsByPlacement(toasts, placement) {
-  return toasts.filter((toast) => toast.state.context.placement === placement);
-}
+
+// src/toast.dom.ts
+var getRegionId = (placement) => `toast-group:${placement}`;
+var getRegionEl = (ctx, placement) => ctx.getById(`toast-group:${placement}`);
+var getRootId = (ctx) => `toast:${ctx.id}`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getTitleId = (ctx) => `toast:${ctx.id}:title`;
+var getDescriptionId = (ctx) => `toast:${ctx.id}:description`;
+var getCloseTriggerId = (ctx) => `toast${ctx.id}:close`;
 var defaultTimeouts = {
   info: 5e3,
   error: 5e3,
@@ -36,20 +33,23 @@ var defaultTimeouts = {
 function getToastDuration(duration, type) {
   return duration ?? defaultTimeouts[type] ?? defaultTimeouts.DEFAULT;
 }
-function getGroupPlacementStyle(ctx, placement) {
-  const offset = ctx.offsets;
-  const computedOffset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
-  const rtl = ctx.dir === "rtl";
+var getOffsets = (offsets) => typeof offsets === "string" ? { left: offsets, right: offsets, bottom: offsets, top: offsets } : offsets;
+function getGroupPlacementStyle(service, placement) {
+  const { prop, computed, context } = service;
+  const { offsets, gap } = prop("store").attrs;
+  const heights = context.get("heights");
+  const computedOffset = getOffsets(offsets);
+  const rtl = prop("dir") === "rtl";
   const computedPlacement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
   const isRighty = computedPlacement.includes("right");
   const isLefty = computedPlacement.includes("left");
   const styles = {
     position: "fixed",
-    pointerEvents: ctx.count > 0 ? void 0 : "none",
+    pointerEvents: computed("count") > 0 ? void 0 : "none",
     display: "flex",
     flexDirection: "column",
-    "--gap": `${ctx.gap}px`,
-    "--first-height": `${ctx.heights[0]?.height || 0}px`,
+    "--gap": `${gap}px`,
+    "--first-height": `${heights[0]?.height || 0}px`,
     zIndex: MAX_Z_INDEX
   };
   let alignItems = "center";
@@ -57,37 +57,49 @@ function getGroupPlacementStyle(ctx, placement) {
   if (isLefty) alignItems = "flex-start";
   styles.alignItems = alignItems;
   if (computedPlacement.includes("top")) {
-    const offset2 = computedOffset.top;
-    styles.top = `max(env(safe-area-inset-top, 0px), ${offset2})`;
+    const offset = computedOffset.top;
+    styles.top = `max(env(safe-area-inset-top, 0px), ${offset})`;
   }
   if (computedPlacement.includes("bottom")) {
-    const offset2 = computedOffset.bottom;
-    styles.bottom = `max(env(safe-area-inset-bottom, 0px), ${offset2})`;
+    const offset = computedOffset.bottom;
+    styles.bottom = `max(env(safe-area-inset-bottom, 0px), ${offset})`;
   }
   if (!computedPlacement.includes("left")) {
-    const offset2 = computedOffset.right;
-    styles.insetInlineEnd = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
+    const offset = computedOffset.right;
+    styles.insetInlineEnd = `calc(env(safe-area-inset-right, 0px) + ${offset})`;
   }
   if (!computedPlacement.includes("right")) {
-    const offset2 = computedOffset.left;
-    styles.insetInlineStart = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
+    const offset = computedOffset.left;
+    styles.insetInlineStart = `calc(env(safe-area-inset-left, 0px) + ${offset})`;
   }
   return styles;
 }
-function getPlacementStyle(ctx, visible) {
-  const [side] = ctx.placement.split("-");
-  const sibling = !ctx.frontmost;
-  const overlap = !ctx.stacked;
+function getPlacementStyle(service, visible) {
+  const { prop, context, computed } = service;
+  const parent = prop("parent");
+  const placement = parent.computed("placement");
+  const { gap } = parent.prop("store").attrs;
+  const [side] = placement.split("-");
+  const mounted = context.get("mounted");
+  const remainingTime = context.get("remainingTime");
+  const height = computed("height");
+  const frontmost = computed("frontmost");
+  const sibling = !frontmost;
+  const overlap = !prop("stacked");
+  const stacked = prop("stacked");
+  const type = prop("type");
+  const duration = type === "loading" ? Number.MAX_SAFE_INTEGER : remainingTime;
+  const offset = computed("heightIndex") * gap + computed("heightBefore");
   const styles = {
     position: "absolute",
     pointerEvents: "auto",
     "--opacity": "0",
-    "--remove-delay": `${ctx.removeDelay}ms`,
-    "--duration": `${ctx.type === "loading" ? Number.MAX_SAFE_INTEGER : ctx.duration}ms`,
-    "--initial-height": `${ctx.height}px`,
-    "--offset": `${ctx.offset}px`,
-    "--index": ctx.index,
-    "--z-index": ctx.zIndex,
+    "--remove-delay": `${prop("removeDelay")}ms`,
+    "--duration": `${duration}ms`,
+    "--initial-height": `${height}px`,
+    "--offset": `${offset}px`,
+    "--index": prop("index"),
+    "--z-index": computed("zIndex"),
     "--lift-amount": "calc(var(--lift) * var(--gap))",
     "--y": "100%",
     "--x": "0"
@@ -108,12 +120,12 @@ function getPlacementStyle(ctx, visible) {
       "--lift": "-1"
     });
   }
-  if (ctx.mounted) {
+  if (mounted) {
     assign({
       "--y": "0",
       "--opacity": "1"
     });
-    if (ctx.stacked) {
+    if (stacked) {
       assign({
         "--y": "calc(var(--lift) * var(--offset))",
         "--height": "var(--initial-height)"
@@ -139,19 +151,20 @@ function getPlacementStyle(ctx, visible) {
       });
     }
   }
-  if (sibling && ctx.stacked && !visible) {
+  if (sibling && stacked && !visible) {
     assign({
       "--y": "calc(var(--lift) * var(--offset) + var(--lift) * -100%)"
     });
   }
-  if (ctx.frontmost && !visible) {
+  if (frontmost && !visible) {
     assign({
       "--y": "calc(var(--lift) * -100%)"
     });
   }
   return styles;
 }
-function getGhostBeforeStyle(ctx, visible) {
+function getGhostBeforeStyle(service, visible) {
+  const { computed } = service;
   const styles = {
     position: "absolute",
     inset: "0",
@@ -159,14 +172,14 @@ function getGhostBeforeStyle(ctx, visible) {
     pointerEvents: visible ? "none" : "auto"
   };
   const assign = (overrides) => Object.assign(styles, overrides);
-  if (ctx.frontmost && !visible) {
+  if (computed("frontmost") && !visible) {
     assign({
       height: "calc(var(--initial-height) + 80%)"
     });
   }
   return styles;
 }
-function getGhostAfterStyle(_ctx, _visible) {
+function getGhostAfterStyle() {
   return {
     position: "absolute",
     left: "0",
@@ -177,126 +190,33 @@ function getGhostAfterStyle(_ctx, _visible) {
 }
 
 // src/toast-group.connect.ts
-function groupConnect(serviceOrState, send, normalize) {
-  function getState() {
-    const result = isMachine(serviceOrState) ? serviceOrState.getState() : serviceOrState;
-    return result;
-  }
-  function getToastsByPlacementImpl(placement) {
-    return getToastsByPlacement(getState().context.toasts, placement);
-  }
-  function isVisible(id) {
-    const toasts = getState().context.toasts;
-    if (!toasts.length) return false;
-    return !!toasts.find((toast) => toast.id == id);
-  }
-  function create(options) {
-    const uid = `toast:${uuid()}`;
-    const id = options.id ? options.id : uid;
-    if (isVisible(id)) return id;
-    send({ type: "ADD_TOAST", toast: { ...options, id } });
-    return id;
-  }
-  function update(id, options) {
-    if (!isVisible(id)) return id;
-    send({ type: "UPDATE_TOAST", id, toast: options });
-    return id;
-  }
-  function upsert(options) {
-    const { id } = options;
-    const visible = id ? isVisible(id) : false;
-    if (visible && id != null) {
-      return update(id, options);
-    } else {
-      return create(options);
-    }
-  }
-  function dismiss(id) {
-    if (id == null) {
-      send("DISMISS_ALL");
-    } else if (isVisible(id)) {
-      send({ type: "DISMISS_TOAST", id });
-    }
-  }
+function groupConnect(service, normalize) {
+  const { context, prop, send, refs, computed } = service;
   return {
     getCount() {
-      return getState().context.count;
+      return context.get("toasts").length;
     },
-    getPlacements() {
-      const toasts = getState().context.toasts;
-      const placements = toasts.map((toast) => toast.state.context.placement);
-      return Array.from(new Set(placements));
+    getToasts() {
+      return context.get("toasts");
     },
-    getToastsByPlacement: getToastsByPlacementImpl,
-    isVisible,
-    create,
-    update,
-    upsert,
-    dismiss,
-    remove(id) {
-      if (id == null) {
-        send("REMOVE_ALL");
-      } else if (isVisible(id)) {
-        send({ type: "REMOVE_TOAST", id });
-      }
-    },
-    dismissByPlacement(placement) {
-      const toasts = getToastsByPlacementImpl(placement);
-      toasts.forEach((toast) => dismiss(toast.id));
-    },
-    loading(options) {
-      return upsert({ ...options, type: "loading" });
-    },
-    success(options) {
-      return upsert({ ...options, type: "success" });
-    },
-    error(options) {
-      return upsert({ ...options, type: "error" });
-    },
-    promise(promise, options, shared = {}) {
-      const id = upsert({ ...shared, ...options.loading, type: "loading" });
-      runIfFn(promise).then((response) => {
-        const successOptions = runIfFn(options.success, response);
-        upsert({ ...shared, ...successOptions, id, type: "success" });
-      }).catch((error) => {
-        const errorOptions = runIfFn(options.error, error);
-        upsert({ ...shared, ...errorOptions, id, type: "error" });
-      }).finally(() => {
-        options.finally?.();
-      });
-      return id;
-    },
-    pause(id) {
-      if (id == null) {
-        send("PAUSE_ALL");
-      } else if (isVisible(id)) {
-        send({ type: "PAUSE_TOAST", id });
-      }
-    },
-    resume(id) {
-      if (id == null) {
-        send("RESUME_ALL");
-      } else if (isVisible(id)) {
-        send({ type: "RESUME_TOAST", id });
-      }
-    },
-    getGroupProps(options) {
-      const { placement, label = "Notifications" } = options;
-      const state = getState();
-      const hotkeyLabel = state.context.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+    getGroupProps(options = {}) {
+      const { label = "Notifications" } = options;
+      const { hotkey } = prop("store").attrs;
+      const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+      const placement = computed("placement");
       const [side, align = "center"] = placement.split("-");
       return normalize.element({
         ...parts.group.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         tabIndex: -1,
         "aria-label": `${placement} ${label} ${hotkeyLabel}`,
-        id: dom.getRegionId(placement),
+        id: getRegionId(placement),
         "data-placement": placement,
         "data-side": side,
         "data-align": align,
         "aria-live": "polite",
         role: "region",
-        style: getGroupPlacementStyle(state.context, placement),
+        style: getGroupPlacementStyle(service, placement),
         onMouseMove() {
           send({ type: "REGION.POINTER_ENTER", placement });
         },
@@ -307,534 +227,294 @@ function groupConnect(serviceOrState, send, normalize) {
           send({ type: "REGION.FOCUS", target: event.relatedTarget });
         },
         onBlur(event) {
-          if (state.context.isFocusWithin && !contains(event.currentTarget, event.relatedTarget)) {
-            send({ type: "REGION.BLUR" });
-          }
+          queueMicrotask(() => {
+            if (refs.get("isFocusWithin") && !contains(event.currentTarget, event.relatedTarget)) {
+              send({ type: "REGION.BLUR" });
+            }
+          });
         }
       });
     },
     subscribe(fn) {
-      const state = getState();
-      return subscribe(state.context.toasts, () => {
-        const toasts = getToastsByPlacementImpl(state.context.placement);
-        const contexts = toasts.map((toast) => toast.getState().context);
-        fn(contexts);
-      });
+      const store = prop("store");
+      return store.subscribe(() => fn(context.get("toasts")));
     }
   };
 }
-var { not, and, or } = guards;
-function createToastMachine(options) {
-  const { type = "info", duration, id = "1", placement = "bottom", removeDelay = 200, ...restProps } = options;
-  const ctx = compact(restProps);
-  const computedDuration = getToastDuration(duration, type);
-  return createMachine(
-    {
-      id,
-      context: {
-        id,
-        type,
-        remaining: computedDuration,
-        duration: computedDuration,
-        removeDelay,
-        createdAt: Date.now(),
-        placement,
-        ...ctx,
-        height: 0,
-        offset: 0,
-        frontmost: false,
-        mounted: false,
-        index: -1,
-        zIndex: 0
+var groupMachine = createMachine({
+  props({ props }) {
+    return {
+      dir: "ltr",
+      id: uuid(),
+      ...props,
+      store: props.store
+    };
+  },
+  initialState({ prop }) {
+    return prop("store").attrs.overlap ? "overlap" : "stack";
+  },
+  refs() {
+    return {
+      lastFocusedEl: null,
+      isFocusWithin: false,
+      dismissableCleanup: void 0
+    };
+  },
+  context({ bindable }) {
+    return {
+      toasts: bindable(() => ({
+        defaultValue: [],
+        sync: true,
+        hash: (toasts) => toasts.map((t) => t.id).join(",")
+      })),
+      heights: bindable(() => ({
+        defaultValue: [],
+        sync: true
+      }))
+    };
+  },
+  computed: {
+    count: ({ context }) => context.get("toasts").length,
+    overlap: ({ prop }) => prop("store").attrs.overlap,
+    placement: ({ prop }) => prop("store").attrs.placement
+  },
+  effects: ["subscribeToStore", "trackDocumentVisibility", "trackHotKeyPress"],
+  watch({ track, context, action }) {
+    track([() => context.hash("toasts")], () => {
+      queueMicrotask(() => {
+        action(["collapsedIfEmpty", "setDismissableBranch"]);
+      });
+    });
+  },
+  exit: ["clearDismissableBranch", "clearLastFocusedEl"],
+  on: {
+    "DOC.HOTKEY": {
+      actions: ["focusRegionEl"]
+    },
+    "REGION.BLUR": [
+      {
+        guard: "isOverlapping",
+        target: "overlap",
+        actions: ["collapseToasts", "resumeToasts", "restoreLastFocusedEl"]
       },
-      initial: type === "loading" ? "visible:persist" : "visible",
+      {
+        target: "stack",
+        actions: ["resumeToasts", "restoreLastFocusedEl"]
+      }
+    ],
+    "TOAST.REMOVE": {
+      actions: ["removeToast", "removeHeight"]
+    },
+    "TOAST.PAUSE": {
+      actions: ["pauseToasts"]
+    }
+  },
+  states: {
+    stack: {
       on: {
-        UPDATE: [
+        "REGION.POINTER_LEAVE": [
           {
-            guard: and("hasTypeChanged", "isChangingToLoading"),
-            target: "visible:persist",
-            actions: ["setContext"]
-          },
-          {
-            guard: or("hasDurationChanged", "hasTypeChanged"),
-            target: "visible:updating",
-            actions: ["setContext"]
+            guard: "isOverlapping",
+            target: "overlap",
+            actions: ["resumeToasts", "collapseToasts"]
           },
           {
-            actions: ["setContext"]
+            actions: ["resumeToasts"]
           }
         ],
-        MEASURE: {
-          actions: ["measureHeight"]
-        }
-      },
-      entry: ["invokeOnVisible"],
-      activities: ["trackHeight"],
-      states: {
-        "visible:updating": {
-          tags: ["visible", "updating"],
-          after: {
-            0: "visible"
-          }
+        "REGION.OVERLAP": {
+          target: "overlap",
+          actions: ["collapseToasts"]
         },
-        "visible:persist": {
-          tags: ["visible", "paused"],
-          on: {
-            RESUME: {
-              guard: not("isLoadingType"),
-              target: "visible",
-              actions: ["setCreatedAt"]
-            },
-            DISMISS: "dismissing"
-          }
+        "REGION.FOCUS": {
+          actions: ["setLastFocusedEl", "pauseToasts"]
         },
-        visible: {
-          tags: ["visible"],
-          after: {
-            VISIBLE_DURATION: "dismissing"
-          },
-          on: {
-            DISMISS: "dismissing",
-            PAUSE: {
-              target: "visible:persist",
-              actions: "setRemainingDuration"
-            }
-          }
+        "REGION.POINTER_ENTER": {
+          actions: ["pauseToasts"]
+        }
+      }
+    },
+    overlap: {
+      on: {
+        "REGION.STACK": {
+          target: "stack",
+          actions: ["expandToasts"]
         },
-        dismissing: {
-          entry: "invokeOnDismiss",
-          after: {
-            REMOVE_DELAY: {
-              target: "unmounted",
-              actions: "notifyParentToRemove"
-            }
-          }
+        "REGION.POINTER_ENTER": {
+          target: "stack",
+          actions: ["pauseToasts", "expandToasts"]
         },
-        unmounted: {
-          entry: "invokeOnUnmount",
-          type: "final"
+        "REGION.FOCUS": {
+          target: "stack",
+          actions: ["setLastFocusedEl", "pauseToasts", "expandToasts"]
         }
       }
+    }
+  },
+  implementations: {
+    guards: {
+      isOverlapping: ({ computed }) => computed("overlap")
     },
-    {
-      activities: {
-        trackHeight(ctx2, _evt, { self }) {
-          let cleanup;
-          raf(() => {
-            const rootEl = dom.getRootEl(ctx2);
-            if (!rootEl) return;
-            ctx2.mounted = true;
-            const ghosts = queryAll(rootEl, "[data-ghost]");
-            warn(
-              ghosts.length !== 2,
-              "[toast] No ghost element found in toast. Render the `ghostBefore` and `ghostAfter` elements"
-            );
-            const syncHeight = () => {
-              const originalHeight = rootEl.style.height;
-              rootEl.style.height = "auto";
-              const newHeight = rootEl.getBoundingClientRect().height;
-              rootEl.style.height = originalHeight;
-              ctx2.height = newHeight;
-              self.sendParent({ type: "UPDATE_HEIGHT", id: self.id, height: newHeight, placement: ctx2.placement });
-            };
-            syncHeight();
-            const win = dom.getWin(ctx2);
-            const observer = new win.MutationObserver(syncHeight);
-            observer.observe(rootEl, { childList: true, subtree: true, characterData: true });
-            cleanup = () => observer.disconnect();
+    effects: {
+      subscribeToStore({ context, prop }) {
+        return prop("store").subscribe((toast) => {
+          if (toast.dismiss) {
+            context.set("toasts", (prev) => prev.filter((t) => t.id !== toast.id));
+            return;
+          }
+          context.set("toasts", (prev) => {
+            const index = prev.findIndex((t) => t.id === toast.id);
+            if (index !== -1) {
+              return [...prev.slice(0, index), { ...prev[index], ...toast }, ...prev.slice(index + 1)];
+            }
+            return [toast, ...prev];
           });
-          return () => cleanup?.();
+        });
+      },
+      trackHotKeyPress({ prop, send }) {
+        const handleKeyDown = (event) => {
+          const { hotkey } = prop("store").attrs;
+          const isHotkeyPressed = hotkey.every((key) => event[key] || event.code === key);
+          if (!isHotkeyPressed) return;
+          send({ type: "DOC.HOTKEY" });
+        };
+        return addDomEvent(document, "keydown", handleKeyDown, { capture: true });
+      },
+      trackDocumentVisibility({ prop, send, scope }) {
+        const { pauseOnPageIdle } = prop("store").attrs;
+        if (!pauseOnPageIdle) return;
+        const doc = scope.getDoc();
+        return addDomEvent(doc, "visibilitychange", () => {
+          const isHidden = doc.visibilityState === "hidden";
+          send({ type: isHidden ? "PAUSE_ALL" : "RESUME_ALL" });
+        });
+      }
+    },
+    actions: {
+      setDismissableBranch({ refs, context, computed, scope }) {
+        const toasts = context.get("toasts");
+        const placement = computed("placement");
+        const hasToasts = toasts.length > 0;
+        if (!hasToasts) {
+          refs.get("dismissableCleanup")?.();
+          return;
+        }
+        if (hasToasts && refs.get("dismissableCleanup")) {
+          return;
         }
+        const groupEl = () => getRegionEl(scope, placement);
+        const cleanup = trackDismissableBranch(groupEl, { defer: true });
+        refs.set("dismissableCleanup", cleanup);
       },
-      guards: {
-        isChangingToLoading: (_, evt) => evt.toast?.type === "loading",
-        isLoadingType: (ctx2) => ctx2.type === "loading",
-        hasTypeChanged: (ctx2, evt) => evt.toast?.type != null && evt.toast.type !== ctx2.type,
-        hasDurationChanged: (ctx2, evt) => evt.toast?.duration != null && evt.toast.duration !== ctx2.duration
+      clearDismissableBranch({ refs }) {
+        refs.get("dismissableCleanup")?.();
       },
-      delays: {
-        VISIBLE_DURATION: (ctx2) => ctx2.remaining,
-        REMOVE_DELAY: (ctx2) => ctx2.removeDelay
+      focusRegionEl({ scope, computed }) {
+        queueMicrotask(() => {
+          getRegionEl(scope, computed("placement"))?.focus();
+        });
       },
-      actions: {
-        measureHeight(ctx2, _evt, { self }) {
-          raf(() => {
-            const rootEl = dom.getRootEl(ctx2);
-            if (!rootEl) return;
-            ctx2.mounted = true;
-            const originalHeight = rootEl.style.height;
-            rootEl.style.height = "auto";
-            const newHeight = rootEl.getBoundingClientRect().height;
-            rootEl.style.height = originalHeight;
-            ctx2.height = newHeight;
-            self.sendParent({ type: "UPDATE_HEIGHT", id: self.id, height: newHeight, placement: ctx2.placement });
-          });
-        },
-        setRemainingDuration(ctx2) {
-          ctx2.remaining -= Date.now() - ctx2.createdAt;
-        },
-        setCreatedAt(ctx2) {
-          ctx2.createdAt = Date.now();
-        },
-        notifyParentToRemove(_ctx, _evt, { self }) {
-          self.sendParent({ type: "REMOVE_TOAST", id: self.id });
-        },
-        invokeOnDismiss(ctx2) {
-          ctx2.onStatusChange?.({ status: "dismissing" });
-        },
-        invokeOnUnmount(ctx2) {
-          ctx2.onStatusChange?.({ status: "unmounted" });
-        },
-        invokeOnVisible(ctx2) {
-          ctx2.onStatusChange?.({ status: "visible" });
-        },
-        setContext(ctx2, evt) {
-          const duration2 = evt.toast?.duration;
-          const type2 = evt.toast?.type ?? ctx2.type;
-          const computedDuration2 = getToastDuration(duration2, type2);
-          Object.assign(ctx2, {
-            ...evt.toast,
-            duration: computedDuration2,
-            remaining: computedDuration2
-          });
-        }
-      }
-    }
-  );
-}
-
-// src/toast-group.machine.ts
-function groupMachine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "toaster",
-      initial: ctx.overlap ? "overlap" : "stack",
-      context: {
-        dir: "ltr",
-        max: Number.MAX_SAFE_INTEGER,
-        gap: 16,
-        pauseOnPageIdle: false,
-        hotkey: ["altKey", "KeyT"],
-        offsets: "1rem",
-        placement: "bottom",
-        removeDelay: 200,
-        ...ctx,
-        toasts: [],
-        lastFocusedEl: null,
-        isFocusWithin: false,
-        heights: []
+      pauseToasts({ prop }) {
+        prop("store").pause();
       },
-      computed: {
-        count: (ctx2) => ctx2.toasts.length
+      resumeToasts({ prop }) {
+        prop("store").resume();
       },
-      activities: ["trackDocumentVisibility", "trackHotKeyPress"],
-      watch: {
-        toasts: ["collapsedIfEmpty", "setDismissableBranch"]
+      expandToasts({ prop }) {
+        prop("store").expand();
       },
-      exit: ["removeToasts", "clearDismissableBranch", "clearLastFocusedEl"],
-      on: {
-        PAUSE_TOAST: {
-          actions: ["pauseToast"]
-        },
-        PAUSE_ALL: {
-          actions: ["pauseToasts"]
-        },
-        RESUME_TOAST: {
-          actions: ["resumeToast"]
-        },
-        RESUME_ALL: {
-          actions: ["resumeToasts"]
-        },
-        ADD_TOAST: {
-          guard: "isWithinRange",
-          actions: ["createToast", "syncToastIndex"]
-        },
-        UPDATE_TOAST: {
-          actions: ["updateToast"]
-        },
-        DISMISS_TOAST: {
-          actions: ["dismissToast"]
-        },
-        DISMISS_ALL: {
-          actions: ["dismissToasts"]
-        },
-        REMOVE_TOAST: {
-          actions: ["removeToast", "syncToastIndex", "syncToastOffset"]
-        },
-        REMOVE_ALL: {
-          actions: ["removeToasts"]
-        },
-        UPDATE_HEIGHT: {
-          actions: ["syncHeights", "syncToastOffset"]
-        },
-        "DOC.HOTKEY": {
-          actions: ["focusRegionEl"]
-        },
-        "REGION.BLUR": [
-          {
-            guard: "isOverlapping",
-            target: "overlap",
-            actions: ["resumeToasts", "restoreLastFocusedEl"]
-          },
-          {
-            actions: ["resumeToasts", "restoreLastFocusedEl"]
-          }
-        ]
+      collapseToasts({ prop }) {
+        prop("store").collapse();
       },
-      states: {
-        stack: {
-          entry: ["expandToasts"],
-          on: {
-            "REGION.POINTER_LEAVE": [
-              {
-                guard: "isOverlapping",
-                target: "overlap",
-                actions: ["resumeToasts"]
-              },
-              {
-                actions: ["resumeToasts"]
-              }
-            ],
-            "REGION.OVERLAP": {
-              target: "overlap"
-            },
-            "REGION.FOCUS": {
-              actions: ["setLastFocusedEl", "pauseToasts"]
-            },
-            "REGION.POINTER_ENTER": {
-              actions: ["pauseToasts"]
-            }
-          }
-        },
-        overlap: {
-          entry: ["collapseToasts"],
-          on: {
-            "REGION.STACK": {
-              target: "stack"
-            },
-            "REGION.POINTER_ENTER": {
-              target: "stack",
-              actions: ["pauseToasts"]
-            },
-            "REGION.FOCUS": {
-              target: "stack",
-              actions: ["setLastFocusedEl", "pauseToasts"]
-            }
-          }
-        }
-      }
-    },
-    {
-      guards: {
-        isWithinRange: (ctx2) => ctx2.toasts.length < ctx2.max,
-        isOverlapping: (ctx2) => !!ctx2.overlap
+      removeToast({ prop, event }) {
+        prop("store").remove(event.id);
       },
-      activities: {
-        trackHotKeyPress(ctx2, _evt, { send }) {
-          const handleKeyDown = (event) => {
-            const isHotkeyPressed = ctx2.hotkey.every((key) => event[key] || event.code === key);
-            if (!isHotkeyPressed) return;
-            send({ type: "DOC.HOTKEY" });
-          };
-          return addDomEvent(document, "keydown", handleKeyDown, { capture: true });
-        },
-        trackDocumentVisibility(ctx2, _evt, { send }) {
-          if (!ctx2.pauseOnPageIdle) return;
-          const doc = dom.getDoc(ctx2);
-          return addDomEvent(doc, "visibilitychange", () => {
-            send(doc.visibilityState === "hidden" ? "PAUSE_ALL" : "RESUME_ALL");
-          });
-        }
+      removeHeight({ event, context }) {
+        if (event?.id == null) return;
+        queueMicrotask(() => {
+          context.set("heights", (heights) => heights.filter((height) => height.id !== event.id));
+        });
       },
-      actions: {
-        setDismissableBranch(ctx2) {
-          const currentToasts = getToastsByPlacement(ctx2.toasts, ctx2.placement);
-          const hasToasts = currentToasts.length > 0;
-          if (!hasToasts) {
-            ctx2._cleanup?.();
-            return;
-          }
-          if (hasToasts && ctx2._cleanup) {
-            return;
-          }
-          const groupEl = () => dom.getRegionEl(ctx2, ctx2.placement);
-          ctx2._cleanup = trackDismissableBranch(groupEl, { defer: true });
-        },
-        clearDismissableBranch(ctx2) {
-          ctx2._cleanup?.();
-        },
-        focusRegionEl(ctx2) {
-          queueMicrotask(() => {
-            dom.getRegionEl(ctx2, ctx2.placement)?.focus();
-          });
-        },
-        expandToasts(ctx2) {
-          each(ctx2, (toast) => {
-            toast.state.context.stacked = true;
-          });
-        },
-        collapseToasts(ctx2) {
-          each(ctx2, (toast) => {
-            toast.state.context.stacked = false;
-          });
-        },
-        collapsedIfEmpty(ctx2, _evt, { send }) {
-          if (!ctx2.overlap || ctx2.toasts.length > 1) return;
-          send("REGION.OVERLAP");
-        },
-        pauseToast(_ctx, evt, { self }) {
-          self.sendChild("PAUSE", evt.id);
-        },
-        pauseToasts(ctx2) {
-          ctx2.toasts.forEach((toast) => toast.send("PAUSE"));
-        },
-        resumeToast(_ctx, evt, { self }) {
-          self.sendChild("RESUME", evt.id);
-        },
-        resumeToasts(ctx2) {
-          ctx2.toasts.forEach((toast) => toast.send("RESUME"));
-        },
-        measureToasts(ctx2) {
-          ctx2.toasts.forEach((toast) => toast.send("MEASURE"));
-        },
-        createToast(ctx2, evt, { self, getState }) {
-          const options = {
-            placement: ctx2.placement,
-            duration: ctx2.duration,
-            removeDelay: ctx2.removeDelay,
-            ...evt.toast,
-            dir: ctx2.dir,
-            getRootNode: ctx2.getRootNode,
-            stacked: getState().matches("stack")
-          };
-          const toast = createToastMachine(options);
-          const actor = self.spawn(toast);
-          ctx2.toasts = [actor, ...ctx2.toasts];
-        },
-        updateToast(_ctx, evt, { self }) {
-          self.sendChild({ type: "UPDATE", toast: evt.toast }, evt.id);
-        },
-        dismissToast(_ctx, evt, { self }) {
-          self.sendChild("DISMISS", evt.id);
-        },
-        dismissToasts(ctx2) {
-          ctx2.toasts.forEach((toast) => toast.send("DISMISS"));
-        },
-        removeToast(ctx2, evt, { self }) {
-          self.stopChild(evt.id);
-          ctx2.toasts = ctx2.toasts.filter((toast) => toast.id !== evt.id);
-          ctx2.heights = ctx2.heights.filter((height) => height.id !== evt.id);
-        },
-        removeToasts(ctx2, _evt, { self }) {
-          ctx2.toasts.forEach((toast) => self.stopChild(toast.id));
-          ctx2.toasts = [];
-          ctx2.heights = [];
-        },
-        syncHeights(ctx2, evt) {
-          const existing = ctx2.heights.find((height) => height.id === evt.id);
-          if (existing) {
-            existing.height = evt.height;
-            existing.placement = evt.placement;
-          } else {
-            const newHeight = { id: evt.id, height: evt.height, placement: evt.placement };
-            ctx2.heights = [newHeight, ...ctx2.heights];
-          }
-        },
-        syncToastIndex(ctx2) {
-          each(ctx2, (toast, index, toasts) => {
-            toast.state.context.index = index;
-            toast.state.context.frontmost = index === 0;
-            toast.state.context.zIndex = toasts.length - index;
-          });
-        },
-        syncToastOffset(ctx2, evt) {
-          const placement = evt.placement ?? ctx2.placement;
-          each({ ...ctx2, placement }, (toast) => {
-            const heightIndex = Math.max(
-              ctx2.heights.findIndex((height) => height.id === toast.id),
-              0
-            );
-            const toastsHeightBefore = ctx2.heights.reduce((prev, curr, reducerIndex) => {
-              if (reducerIndex >= heightIndex) return prev;
-              return prev + curr.height;
-            }, 0);
-            toast.state.context.offset = heightIndex * ctx2.gap + toastsHeightBefore;
-          });
-        },
-        setLastFocusedEl(ctx2, evt) {
-          if (ctx2.isFocusWithin || !evt.target) return;
-          ctx2.isFocusWithin = true;
-          ctx2.lastFocusedEl = ref(evt.target);
-        },
-        restoreLastFocusedEl(ctx2) {
-          ctx2.isFocusWithin = false;
-          if (!ctx2.lastFocusedEl) return;
-          ctx2.lastFocusedEl.focus({ preventScroll: true });
-          ctx2.lastFocusedEl = null;
-        },
-        clearLastFocusedEl(ctx2) {
-          if (!ctx2.lastFocusedEl) return;
-          ctx2.lastFocusedEl.focus({ preventScroll: true });
-          ctx2.lastFocusedEl = null;
-          ctx2.isFocusWithin = false;
-        }
+      collapsedIfEmpty({ send, computed }) {
+        if (!computed("overlap") || computed("count") > 1) return;
+        send({ type: "REGION.OVERLAP" });
+      },
+      setLastFocusedEl({ refs, event }) {
+        if (refs.get("isFocusWithin") || !event.target) return;
+        refs.set("isFocusWithin", true);
+        refs.set("lastFocusedEl", event.target);
+      },
+      restoreLastFocusedEl({ refs }) {
+        if (!refs.get("lastFocusedEl")) return;
+        refs.get("lastFocusedEl")?.focus({ preventScroll: true });
+        refs.set("lastFocusedEl", null);
+        refs.set("isFocusWithin", false);
+      },
+      clearLastFocusedEl({ refs }) {
+        if (!refs.get("lastFocusedEl")) return;
+        refs.get("lastFocusedEl")?.focus({ preventScroll: true });
+        refs.set("lastFocusedEl", null);
+        refs.set("isFocusWithin", false);
       }
     }
-  );
-}
-function each(ctx, fn) {
-  const currentToasts = getToastsByPlacement(ctx.toasts, ctx.placement);
-  currentToasts.forEach(fn);
-}
-function connect(state, send, normalize) {
+  }
+});
+function connect(service, normalize) {
+  const { state, send, prop, scope, context, computed } = service;
   const visible = state.hasTag("visible");
   const paused = state.hasTag("paused");
-  const placement = state.context.placement;
-  const type = state.context.type;
+  const mounted = context.get("mounted");
+  const frontmost = computed("frontmost");
+  const placement = prop("parent").computed("placement");
+  const type = prop("type");
+  const stacked = prop("stacked");
+  const title = prop("title");
+  const description = prop("description");
+  const action = prop("action");
   const [side, align = "center"] = placement.split("-");
   return {
     type,
-    title: state.context.title,
-    description: state.context.description,
+    title,
+    description,
     placement,
     visible,
     paused,
+    closable: !!prop("closable"),
     pause() {
-      send("PAUSE");
+      send({ type: "PAUSE" });
     },
     resume() {
-      send("RESUME");
+      send({ type: "RESUME" });
     },
     dismiss() {
-      send("DISMISS");
+      send({ type: "DISMISS", src: "programmatic" });
     },
     getRootProps() {
       return normalize.element({
         ...parts.root.attrs,
-        dir: state.context.dir,
-        id: dom.getRootId(state.context),
+        dir: prop("dir"),
+        id: getRootId(scope),
         "data-state": visible ? "open" : "closed",
         "data-type": type,
         "data-placement": placement,
         "data-align": align,
         "data-side": side,
-        "data-mounted": dataAttr(state.context.mounted),
+        "data-mounted": dataAttr(mounted),
         "data-paused": dataAttr(paused),
-        "data-first": dataAttr(state.context.frontmost),
-        "data-sibling": dataAttr(!state.context.frontmost),
-        "data-stack": dataAttr(state.context.stacked),
-        "data-overlap": dataAttr(!state.context.stacked),
+        "data-first": dataAttr(frontmost),
+        "data-sibling": dataAttr(!frontmost),
+        "data-stack": dataAttr(stacked),
+        "data-overlap": dataAttr(!stacked),
         role: "status",
         "aria-atomic": "true",
-        "aria-describedby": state.context.description ? dom.getDescriptionId(state.context) : void 0,
-        "aria-labelledby": state.context.title ? dom.getTitleId(state.context) : void 0,
+        "aria-describedby": description ? getDescriptionId(scope) : void 0,
+        "aria-labelledby": title ? getTitleId(scope) : void 0,
         tabIndex: 0,
-        style: getPlacementStyle(state.context, visible),
+        style: getPlacementStyle(service, visible),
         onKeyDown(event) {
           if (event.defaultPrevented) return;
           if (event.key == "Escape") {
-            send("DISMISS");
+            send({ type: "DISMISS", src: "keyboard" });
             event.preventDefault();
           }
         }
@@ -844,7 +524,7 @@ function connect(state, send, normalize) {
     getGhostBeforeProps() {
       return normalize.element({
         "data-ghost": "before",
-        style: getGhostBeforeStyle(state.context, visible)
+        style: getGhostBeforeStyle(service, visible)
       });
     },
     /* Needed to avoid setting hover to false when in between toasts */
@@ -857,13 +537,13 @@ function connect(state, send, normalize) {
     getTitleProps() {
       return normalize.element({
         ...parts.title.attrs,
-        id: dom.getTitleId(state.context)
+        id: getTitleId(scope)
       });
     },
     getDescriptionProps() {
       return normalize.element({
         ...parts.description.attrs,
-        id: dom.getDescriptionId(state.context)
+        id: getDescriptionId(scope)
       });
     },
     getActionTriggerProps() {
@@ -872,25 +552,479 @@ function connect(state, send, normalize) {
         type: "button",
         onClick(event) {
           if (event.defaultPrevented) return;
-          state.context.action?.onClick?.();
-          send("DISMISS");
+          action?.onClick?.();
+          send({ type: "DISMISS", src: "user" });
         }
       });
     },
     getCloseTriggerProps() {
       return normalize.button({
-        id: dom.getCloseTriggerId(state.context),
+        id: getCloseTriggerId(scope),
         ...parts.closeTrigger.attrs,
         type: "button",
         "aria-label": "Dismiss notification",
         onClick(event) {
           if (event.defaultPrevented) return;
-          send("DISMISS");
+          send({ type: "DISMISS", src: "user" });
+        }
+      });
+    }
+  };
+}
+var { not } = createGuards();
+var machine = createMachine({
+  props({ props }) {
+    return {
+      ...props,
+      id: props.id,
+      type: props.type,
+      parent: props.parent,
+      closable: props.closable ?? true,
+      duration: getToastDuration(props.duration, props.type)
+    };
+  },
+  initialState({ prop }) {
+    const persist = prop("type") === "loading" || prop("duration") === Infinity;
+    return persist ? "visible:persist" : "visible";
+  },
+  context({ prop, bindable }) {
+    return {
+      remainingTime: bindable(() => ({
+        defaultValue: getToastDuration(prop("duration"), prop("type"))
+      })),
+      createdAt: bindable(() => ({
+        defaultValue: Date.now()
+      })),
+      mounted: bindable(() => ({
+        defaultValue: false
+      })),
+      initialHeight: bindable(() => ({
+        defaultValue: 0
+      }))
+    };
+  },
+  refs() {
+    return {
+      closeTimerStartTime: Date.now(),
+      lastCloseStartTimerStartTime: 0
+    };
+  },
+  computed: {
+    zIndex: ({ prop }) => {
+      const toasts = prop("parent").context.get("toasts");
+      const index = toasts.findIndex((toast) => toast.id === prop("id"));
+      return toasts.length - index;
+    },
+    height: ({ prop }) => {
+      const heights = prop("parent").context.get("heights");
+      const height = heights.find((height2) => height2.id === prop("id"));
+      return height?.height ?? 0;
+    },
+    heightIndex: ({ prop }) => {
+      const heights = prop("parent").context.get("heights");
+      return heights.findIndex((height) => height.id === prop("id"));
+    },
+    frontmost: ({ prop }) => prop("index") === 0,
+    heightBefore: ({ prop }) => {
+      const heights = prop("parent").context.get("heights");
+      const heightIndex = heights.findIndex((height) => height.id === prop("id"));
+      return heights.reduce((prev, curr, reducerIndex) => {
+        if (reducerIndex >= heightIndex) return prev;
+        return prev + curr.height;
+      }, 0);
+    },
+    shouldPersist: ({ prop }) => prop("type") === "loading" || prop("duration") === Infinity
+  },
+  watch({ track, prop, send }) {
+    track([() => prop("message")], () => {
+      const message = prop("message");
+      if (message) send({ type: message, src: "programmatic" });
+    });
+    track([() => prop("type"), () => prop("duration")], () => {
+      send({ type: "UPDATE" });
+    });
+  },
+  on: {
+    UPDATE: [
+      {
+        guard: "shouldPersist",
+        target: "visible:persist",
+        actions: ["resetCloseTimer"]
+      },
+      {
+        target: "visible:updating",
+        actions: ["resetCloseTimer"]
+      }
+    ],
+    MEASURE: {
+      actions: ["measureHeight"]
+    }
+  },
+  entry: ["setMounted", "measureHeight", "invokeOnVisible"],
+  effects: ["trackHeight"],
+  states: {
+    "visible:updating": {
+      tags: ["visible", "updating"],
+      effects: ["waitForNextTick"],
+      on: {
+        SHOW: {
+          target: "visible"
+        }
+      }
+    },
+    "visible:persist": {
+      tags: ["visible", "paused"],
+      on: {
+        RESUME: {
+          guard: not("isLoadingType"),
+          target: "visible",
+          actions: ["setCloseTimer"]
+        },
+        DISMISS: {
+          target: "dismissing"
+        }
+      }
+    },
+    visible: {
+      tags: ["visible"],
+      effects: ["waitForDuration"],
+      on: {
+        DISMISS: {
+          target: "dismissing"
+        },
+        PAUSE: {
+          target: "visible:persist",
+          actions: ["syncRemainingTime"]
+        }
+      }
+    },
+    dismissing: {
+      entry: ["invokeOnDismiss"],
+      effects: ["waitForRemoveDelay"],
+      on: {
+        REMOVE: {
+          target: "unmounted",
+          actions: ["notifyParentToRemove"]
+        }
+      }
+    },
+    unmounted: {
+      entry: ["invokeOnUnmount"]
+    }
+  },
+  implementations: {
+    effects: {
+      waitForRemoveDelay({ prop, send }) {
+        return setRafTimeout(() => {
+          send({ type: "REMOVE", src: "timer" });
+        }, prop("removeDelay"));
+      },
+      waitForDuration({ send, context, computed }) {
+        if (computed("shouldPersist")) return;
+        return setRafTimeout(() => {
+          send({ type: "DISMISS", src: "timer" });
+        }, context.get("remainingTime"));
+      },
+      waitForNextTick({ send }) {
+        return setRafTimeout(() => {
+          send({ type: "SHOW", src: "timer" });
+        }, 0);
+      },
+      trackHeight({ scope, prop }) {
+        let cleanup;
+        raf(() => {
+          const rootEl = getRootEl(scope);
+          if (!rootEl) return;
+          const syncHeight = () => {
+            const originalHeight = rootEl.style.height;
+            rootEl.style.height = "auto";
+            const height = rootEl.getBoundingClientRect().height;
+            rootEl.style.height = originalHeight;
+            const item = { id: prop("id"), height };
+            setHeight(prop("parent"), item);
+          };
+          const win = scope.getWin();
+          const observer = new win.MutationObserver(syncHeight);
+          observer.observe(rootEl, {
+            childList: true,
+            subtree: true,
+            characterData: true
+          });
+          cleanup = () => observer.disconnect();
+        });
+        return () => cleanup?.();
+      }
+    },
+    guards: {
+      isLoadingType: ({ prop }) => prop("type") === "loading",
+      shouldPersist: ({ computed }) => computed("shouldPersist")
+    },
+    actions: {
+      setMounted({ context }) {
+        raf(() => {
+          context.set("mounted", true);
+        });
+      },
+      measureHeight({ scope, prop, context }) {
+        queueMicrotask(() => {
+          const rootEl = getRootEl(scope);
+          if (!rootEl) return;
+          const originalHeight = rootEl.style.height;
+          rootEl.style.height = "auto";
+          const height = rootEl.getBoundingClientRect().height;
+          rootEl.style.height = originalHeight;
+          context.set("initialHeight", height);
+          const item = { id: prop("id"), height };
+          setHeight(prop("parent"), item);
+        });
+      },
+      setCloseTimer({ refs }) {
+        refs.set("closeTimerStartTime", Date.now());
+      },
+      resetCloseTimer({ context, refs, prop }) {
+        refs.set("closeTimerStartTime", Date.now());
+        context.set("remainingTime", getToastDuration(prop("duration"), prop("type")));
+      },
+      syncRemainingTime({ context, refs }) {
+        context.set("remainingTime", (prev) => {
+          const closeTimerStartTime = refs.get("closeTimerStartTime");
+          const elapsedTime = Date.now() - closeTimerStartTime;
+          refs.set("lastCloseStartTimerStartTime", Date.now());
+          return prev - elapsedTime;
+        });
+      },
+      notifyParentToRemove({ prop }) {
+        const parent = prop("parent");
+        parent.send({ type: "TOAST.REMOVE", id: prop("id") });
+      },
+      invokeOnDismiss({ prop, event }) {
+        prop("onStatusChange")?.({ status: "dismissing", src: event.src });
+      },
+      invokeOnUnmount({ prop }) {
+        prop("onStatusChange")?.({ status: "unmounted" });
+      },
+      invokeOnVisible({ prop }) {
+        prop("onStatusChange")?.({ status: "visible" });
+      }
+    }
+  }
+});
+function setHeight(parent, item) {
+  const { id, height } = item;
+  parent.context.set("heights", (prev) => {
+    const alreadyExists = prev.find((i) => i.id === id);
+    if (!alreadyExists) {
+      return [{ id, height }, ...prev];
+    } else {
+      return prev.map((i) => i.id === id ? { ...i, height } : i);
+    }
+  });
+}
+var withDefaults = (options, defaults) => {
+  return { ...defaults, ...options };
+};
+function createToastStore(props) {
+  const attrs = withDefaults(props, {
+    placement: "bottom",
+    overlap: false,
+    max: 24,
+    gap: 16,
+    offsets: "1rem",
+    hotkey: ["altKey", "KeyT"],
+    removeDelay: 200,
+    pauseOnPageIdle: true
+  });
+  let subscribers = [];
+  let toasts = [];
+  let dismissedToasts = /* @__PURE__ */ new Set();
+  const subscribe = (subscriber) => {
+    subscribers.push(subscriber);
+    return () => {
+      const index = subscribers.indexOf(subscriber);
+      subscribers.splice(index, 1);
+    };
+  };
+  const publish = (data) => {
+    subscribers.forEach((subscriber) => subscriber(data));
+    return data;
+  };
+  const addToast = (data) => {
+    if (toasts.length >= attrs.max) return;
+    publish(data);
+    toasts.unshift(data);
+  };
+  const create = (data) => {
+    const id = data.id ?? `toast:${uuid()}`;
+    const exists = toasts.find((toast) => toast.id === id);
+    if (dismissedToasts.has(id)) dismissedToasts.delete(id);
+    if (exists) {
+      toasts = toasts.map((toast) => {
+        if (toast.id === id) {
+          return publish({ ...toast, ...data, id });
         }
+        return toast;
+      });
+    } else {
+      addToast({
+        id,
+        duration: attrs.duration,
+        removeDelay: attrs.removeDelay,
+        type: "info",
+        ...data,
+        stacked: !attrs.overlap,
+        gap: attrs.gap
+      });
+    }
+    return id;
+  };
+  const remove = (id) => {
+    dismissedToasts.add(id);
+    if (!id) {
+      toasts.forEach((toast) => {
+        subscribers.forEach((subscriber) => subscriber({ id: toast.id, dismiss: true }));
+      });
+      toasts = [];
+    } else {
+      subscribers.forEach((subscriber) => subscriber({ id, dismiss: true }));
+      toasts = toasts.filter((toast) => toast.id !== id);
+    }
+    return id;
+  };
+  const error = (data) => {
+    return create({ ...data, type: "error" });
+  };
+  const success = (data) => {
+    return create({ ...data, type: "success" });
+  };
+  const info = (data) => {
+    return create({ ...data, type: "info" });
+  };
+  const warning = (data) => {
+    return create({ ...data, type: "warning" });
+  };
+  const loading = (data) => {
+    return create({ ...data, type: "loading" });
+  };
+  const getVisibleToasts = () => {
+    return toasts.filter((toast) => !dismissedToasts.has(toast.id));
+  };
+  const getCount = () => {
+    return toasts.length;
+  };
+  const promise = (promise2, options, shared = {}) => {
+    if (!options) return;
+    let id = void 0;
+    if (options.loading !== void 0) {
+      id = create({
+        ...shared,
+        ...options.loading,
+        promise: promise2,
+        type: "loading"
+      });
+    }
+    let removable = id !== void 0;
+    let result;
+    const prom = runIfFn(promise2).then(async (response) => {
+      result = ["resolve", response];
+      if (isHttpResponse(response) && !response.ok) {
+        removable = false;
+        const errorOptions = runIfFn(options.error, `HTTP Error! status: ${response.status}`);
+        create({ ...shared, ...errorOptions, id, type: "error" });
+      } else if (options.success !== void 0) {
+        removable = false;
+        const successOptions = runIfFn(options.success, response);
+        create({ ...shared, ...successOptions, id, type: "success" });
+      }
+    }).catch(async (error2) => {
+      result = ["reject", error2];
+      if (options.error !== void 0) {
+        removable = false;
+        const errorOptions = runIfFn(options.error, error2);
+        create({ ...shared, ...errorOptions, id, type: "error" });
+      }
+    }).finally(() => {
+      if (removable) {
+        remove(id);
+        id = void 0;
+      }
+      options.finally?.();
+    });
+    const unwrap = () => new Promise(
+      (resolve, reject) => prom.then(() => result[0] === "reject" ? reject(result[1]) : resolve(result[1])).catch(reject)
+    );
+    return { id, unwrap };
+  };
+  const update = (id, data) => {
+    return create({ id, ...data });
+  };
+  const pause = (id) => {
+    if (id != null) {
+      toasts = toasts.map((toast) => {
+        if (toast.id === id) return publish({ ...toast, message: "PAUSE" });
+        return toast;
+      });
+    } else {
+      toasts = toasts.map((toast) => publish({ ...toast, message: "PAUSE" }));
+    }
+  };
+  const resume = (id) => {
+    if (id != null) {
+      toasts = toasts.map((toast) => {
+        if (toast.id === id) return publish({ ...toast, message: "RESUME" });
+        return toast;
       });
+    } else {
+      toasts = toasts.map((toast) => publish({ ...toast, message: "RESUME" }));
     }
   };
+  const dismiss = (id) => {
+    if (id != null) {
+      toasts = toasts.map((toast) => {
+        if (toast.id === id) return publish({ ...toast, message: "DISMISS" });
+        return toast;
+      });
+    } else {
+      toasts = toasts.map((toast) => publish({ ...toast, message: "DISMISS" }));
+    }
+  };
+  const isVisible = (id) => {
+    return !dismissedToasts.has(id) && !!toasts.find((toast) => toast.id === id);
+  };
+  const isDismissed = (id) => {
+    return dismissedToasts.has(id);
+  };
+  const expand = () => {
+    toasts = toasts.map((toast) => publish({ ...toast, stacked: true }));
+  };
+  const collapse = () => {
+    toasts = toasts.map((toast) => publish({ ...toast, stacked: false }));
+  };
+  return {
+    attrs,
+    subscribe,
+    create,
+    update,
+    remove,
+    dismiss,
+    error,
+    success,
+    info,
+    warning,
+    loading,
+    getVisibleToasts,
+    getCount,
+    promise,
+    pause,
+    resume,
+    isVisible,
+    isDismissed,
+    expand,
+    collapse
+  };
 }
+var isHttpResponse = (data) => {
+  return data && typeof data === "object" && "ok" in data && typeof data.ok === "boolean" && "status" in data && typeof data.status === "number";
+};
 
 // src/index.ts
 var group = {
@@ -898,4 +1032,4 @@ var group = {
   machine: groupMachine
 };
 
-export { anatomy, connect, createToastMachine as createMachine, group };
+export { anatomy, connect, createToastStore as createStore, group, machine };