@octanejs/base-ui 0.1.31 → 0.1.32

package/dist/cjs/toast.cjs

@@ -0,0 +1,1766 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var toast_exports = {};
+__export(toast_exports, {
+  Toast: () => Toast,
+  ToastPositionerCssVars: () => ToastPositionerCssVars,
+  ToastRootCssVars: () => ToastRootCssVars,
+  ToastStore: () => ToastStore,
+  ToastViewportCssVars: () => ToastViewportCssVars,
+  createToastManager: () => createToastManager,
+  resolvePromiseOptions: () => resolvePromiseOptions,
+  toastSelectors: () => toastSelectors,
+  useToastManager: () => useToastManager,
+  useToastPositionerContext: () => useToastPositionerContext,
+  useToastProviderContext: () => useToastProviderContext,
+  useToastRootContext: () => useToastRootContext
+});
+module.exports = __toCommonJS(toast_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_usePositioner = require("./utils/usePositioner.cjs");
+var import_useButton = require("./utils/useButton.cjs");
+var import_useStableCallback = require("./utils/useStableCallback.cjs");
+var import_useRefWithInit = require("./utils/useRefWithInit.cjs");
+var import_useOnMount = require("./utils/useOnMount.cjs");
+var import_useTimeout = require("./utils/useTimeout.cjs");
+var import_useOpenChangeComplete = require("./utils/useOpenChangeComplete.cjs");
+var import_generateId = require("./utils/generateId.cjs");
+var import_owner = require("./utils/owner.cjs");
+var import_addEventListener = require("./utils/addEventListener.cjs");
+var import_mergeCleanups = require("./utils/mergeCleanups.cjs");
+var import_visuallyHidden = require("./utils/visuallyHidden.cjs");
+var import_inertValue = require("./utils/inertValue.cjs");
+var import_empty = require("./utils/empty.cjs");
+var import_noop = require("./utils/noop.cjs");
+var import_dom = require("./utils/dom.cjs");
+var import_ReactStore = require("./utils/store/ReactStore.cjs");
+var import_createSelector = require("./utils/store/createSelector.cjs");
+var import_useTransitionStatus = require("./utils/useTransitionStatus.cjs");
+var import_matchesFocusVisible = require("./utils/matchesFocusVisible.cjs");
+var import_element = require("./utils/floating/element.cjs");
+var import_list_utils = require("./utils/composite/list-utils.cjs");
+var import_FocusGuard = require("./utils/floating/FocusGuard.cjs");
+var import_FloatingPortalLite = require("./utils/FloatingPortalLite.cjs");
+var import_useFloatingRootContext = require("./utils/floating/useFloatingRootContext.cjs");
+var import_useAnchorPositioning = require("./utils/useAnchorPositioning.cjs");
+var import_constants = require("./utils/constants.cjs");
+const ToastRootCssVars = {
+  /** The index of the toast in the list. */
+  index: "--toast-index",
+  /** The vertical pixel offset of the toast in the list when expanded. */
+  offsetY: "--toast-offset-y",
+  /** The measured natural height of the toast in pixels. */
+  height: "--toast-height",
+  /** The horizontal swipe movement of the toast. */
+  swipeMovementX: "--toast-swipe-movement-x",
+  /** The vertical swipe movement of the toast. */
+  swipeMovementY: "--toast-swipe-movement-y"
+};
+const ToastViewportCssVars = {
+  /** The height of the frontmost toast. */
+  frontmostHeight: "--toast-frontmost-height"
+};
+const ToastPositionerCssVars = {
+  availableWidth: "--available-width",
+  availableHeight: "--available-height",
+  anchorWidth: "--anchor-width",
+  anchorHeight: "--anchor-height",
+  transformOrigin: "--transform-origin"
+};
+function resolvePromiseOptions(options, result) {
+  if (typeof options === "string") {
+    return { description: options };
+  }
+  if (typeof options === "function") {
+    const resolvedOptions = options(result);
+    return typeof resolvedOptions === "string" ? { description: resolvedOptions } : resolvedOptions;
+  }
+  return options;
+}
+function createToastMetadata(toasts) {
+  const metadata = /* @__PURE__ */ new Map();
+  let visibleIndex = 0;
+  let offsetY = 0;
+  toasts.forEach((toast, toastIndex) => {
+    const isEnding = toast.transitionStatus === "ending";
+    metadata.set(toast.id, {
+      value: toast,
+      domIndex: toastIndex,
+      visibleIndex: isEnding ? -1 : visibleIndex,
+      offsetY
+    });
+    offsetY += toast.height || 0;
+    if (!isEnding) {
+      visibleIndex += 1;
+    }
+  });
+  return metadata;
+}
+function applyLimited(toasts, limit) {
+  let activeIndex = 0;
+  return toasts.map((toast) => {
+    if (toast.transitionStatus === "ending") {
+      return toast;
+    }
+    const limited = activeIndex >= limit;
+    activeIndex += 1;
+    return toast.limited === limited ? toast : { ...toast, limited };
+  });
+}
+const toastMetadataSelector = (state) => state.toastMetadata;
+const toastSelectors = {
+  toasts: (0, import_createSelector.createSelector)((state) => state.toasts),
+  isEmpty: (0, import_createSelector.createSelector)((state) => state.toasts.length === 0),
+  toast: (0, import_createSelector.createSelector)(
+    toastMetadataSelector,
+    (toastMetadata, id) => toastMetadata.get(id)?.value
+  ),
+  toastIndex: (0, import_createSelector.createSelector)(
+    toastMetadataSelector,
+    (toastMetadata, id) => toastMetadata.get(id)?.domIndex ?? -1
+  ),
+  toastOffsetY: (0, import_createSelector.createSelector)(
+    toastMetadataSelector,
+    (toastMetadata, id) => toastMetadata.get(id)?.offsetY ?? 0
+  ),
+  toastVisibleIndex: (0, import_createSelector.createSelector)(
+    toastMetadataSelector,
+    (toastMetadata, id) => toastMetadata.get(id)?.visibleIndex ?? -1
+  ),
+  hovering: (0, import_createSelector.createSelector)((state) => state.hovering),
+  focused: (0, import_createSelector.createSelector)((state) => state.focused),
+  expanded: (0, import_createSelector.createSelector)((state) => state.hovering || state.focused),
+  expandedOrOutOfFocus: (0, import_createSelector.createSelector)(
+    (state) => state.hovering || state.focused || !state.isWindowFocused
+  ),
+  prevFocusElement: (0, import_createSelector.createSelector)((state) => state.prevFocusElement)
+};
+class ToastStore extends import_ReactStore.ReactStore {
+  timers = /* @__PURE__ */ new Map();
+  areTimersPaused = false;
+  constructor(initialState) {
+    super(
+      {
+        ...initialState,
+        toastMetadata: createToastMetadata(initialState.toasts)
+      },
+      {},
+      toastSelectors
+    );
+  }
+  setFocused(focused) {
+    this.set("focused", focused);
+  }
+  setHovering(hovering) {
+    this.set("hovering", hovering);
+  }
+  setIsWindowFocused(isWindowFocused) {
+    this.set("isWindowFocused", isWindowFocused);
+  }
+  setPrevFocusElement(prevFocusElement) {
+    this.set("prevFocusElement", prevFocusElement);
+  }
+  setViewport = (viewport) => {
+    this.set("viewport", viewport);
+  };
+  syncProviderProps(props) {
+    const limitChanged = this.state.limit !== props.limit;
+    if (this.state.timeout === props.timeout && !limitChanged) {
+      return;
+    }
+    const updates = {
+      timeout: props.timeout,
+      limit: props.limit
+    };
+    if (limitChanged) {
+      const newToasts = applyLimited(this.state.toasts, props.limit);
+      updates.toasts = newToasts;
+      updates.toastMetadata = createToastMetadata(newToasts);
+    }
+    this.update(updates);
+  }
+  disposeEffect = () => {
+    return () => {
+      this.timers.forEach((timer) => {
+        timer.timeout?.clear();
+      });
+      this.timers.clear();
+    };
+  };
+  removeToast(toastId, behavior = {}) {
+    const index = toastSelectors.toastIndex(this.state, toastId);
+    if (index === -1) {
+      return;
+    }
+    const toast = this.state.toasts[index];
+    if (!behavior.skipOnRemove) {
+      toast?.onRemove?.();
+    }
+    const newToasts = [...this.state.toasts];
+    newToasts.splice(index, 1);
+    this.setToasts(newToasts);
+  }
+  addToast = (toast) => {
+    const { timeout, limit } = this.state;
+    const id = toast.id || (0, import_generateId.generateId)("toast");
+    if (toast.id) {
+      const existingToast = toastSelectors.toast(this.state, toast.id);
+      if (existingToast) {
+        if (existingToast.transitionStatus === "ending") {
+          this.removeToast(toast.id, { skipOnRemove: true });
+        } else {
+          const { id: ignoredId, transitionStatus: ignoredTransitionStatus, ...updates } = toast;
+          this.updateToastInternal(toast.id, updates, {
+            resetTimer: true,
+            markUpdated: true
+          });
+          return toast.id;
+        }
+      }
+    }
+    const toastToAdd = {
+      ...toast,
+      id,
+      updateKey: 0,
+      transitionStatus: "starting"
+    };
+    const updatedToasts = [toastToAdd, ...this.state.toasts];
+    this.setToasts(applyLimited(updatedToasts, limit));
+    const duration = toastToAdd.timeout ?? timeout;
+    if (toastToAdd.type !== "loading" && duration > 0) {
+      this.scheduleTimer(id, duration, () => this.closeToast(id));
+    }
+    if (toastSelectors.expandedOrOutOfFocus(this.state)) {
+      this.pauseTimers();
+    }
+    return id;
+  };
+  updateToast = (id, updates) => {
+    this.updateToastInternal(id, updates, { markUpdated: true });
+  };
+  updateToastInternal = (id, updates, behavior = {}) => {
+    const { timeout, toasts } = this.state;
+    const prevToast = toastSelectors.toast(this.state, id) ?? null;
+    if (!prevToast) {
+      return;
+    }
+    if (prevToast.transitionStatus === "ending") {
+      return;
+    }
+    const nextToast = {
+      ...prevToast,
+      ...updates,
+      ...behavior.markUpdated && {
+        updateKey: (prevToast.updateKey ?? 0) + 1
+      }
+    };
+    this.setToasts(toasts.map((toast) => toast.id === id ? nextToast : toast));
+    const nextTimeout = nextToast.timeout ?? timeout;
+    const prevTimeout = prevToast?.timeout ?? timeout;
+    const timeoutUpdated = Object.hasOwn(updates, "timeout");
+    const shouldHaveTimer = nextToast.transitionStatus !== "ending" && nextToast.type !== "loading" && nextTimeout > 0;
+    const hasTimer = this.timers.has(id);
+    const timeoutChanged = prevTimeout !== nextTimeout;
+    const wasLoading = prevToast?.type === "loading";
+    if (!shouldHaveTimer && hasTimer) {
+      this.clearTimer(id);
+      return;
+    }
+    if (shouldHaveTimer && (!hasTimer || timeoutChanged || timeoutUpdated || wasLoading || behavior.resetTimer)) {
+      this.clearTimer(id);
+      this.scheduleTimer(id, nextTimeout, () => this.closeToast(id));
+      if (toastSelectors.expandedOrOutOfFocus(this.state)) {
+        this.pauseTimers();
+      }
+    }
+  };
+  closeToast = (toastId) => {
+    const closeAll = toastId === void 0;
+    const { limit, toasts } = this.state;
+    let toastsToClose;
+    if (closeAll) {
+      toastsToClose = toasts;
+      this.clearTimers();
+    } else {
+      const toast = toastSelectors.toast(this.state, toastId);
+      if (!toast) {
+        return;
+      }
+      toastsToClose = [toast];
+      this.clearTimer(toastId);
+    }
+    const endingToasts = toasts.map(
+      (item) => closeAll || item.id === toastId ? { ...item, transitionStatus: "ending", height: 0 } : item
+    );
+    const newToasts = applyLimited(endingToasts, limit);
+    const updates = {
+      toasts: newToasts,
+      toastMetadata: createToastMetadata(newToasts)
+    };
+    const hasActiveToasts = newToasts.some((toast) => toast.transitionStatus !== "ending");
+    if (!hasActiveToasts) {
+      updates.hovering = false;
+      updates.focused = false;
+    }
+    this.update(updates);
+    toastsToClose.forEach((toast) => {
+      if (toast.transitionStatus !== "ending") {
+        toast.onClose?.();
+      }
+    });
+    this.handleFocusManagement(toastId);
+  };
+  promiseToast = (promiseValue, options) => {
+    const loadingOptions = resolvePromiseOptions(options.loading);
+    const id = this.addToast({
+      ...loadingOptions,
+      type: "loading"
+    });
+    const handledPromise = promiseValue.then((result) => {
+      const successOptions = resolvePromiseOptions(options.success, result);
+      this.updateToast(id, {
+        ...successOptions,
+        type: "success",
+        timeout: successOptions.timeout
+      });
+      return result;
+    }).catch((error) => {
+      const errorOptions = resolvePromiseOptions(options.error, error);
+      this.updateToast(id, {
+        ...errorOptions,
+        type: "error",
+        timeout: errorOptions.timeout
+      });
+      return Promise.reject(error);
+    });
+    if ({}.hasOwnProperty.call(options, "setPromise")) {
+      options.setPromise(handledPromise);
+    }
+    return handledPromise;
+  };
+  pauseTimers() {
+    if (this.areTimersPaused) {
+      return;
+    }
+    this.areTimersPaused = true;
+    this.timers.forEach((timer) => {
+      if (timer.timeout) {
+        timer.timeout.clear();
+        const elapsed = Date.now() - timer.start;
+        const remaining = timer.delay - elapsed;
+        timer.remaining = remaining > 0 ? remaining : 0;
+      }
+    });
+  }
+  resumeTimers() {
+    if (!this.areTimersPaused) {
+      return;
+    }
+    this.areTimersPaused = false;
+    this.timers.forEach((timer, id) => {
+      timer.remaining = timer.remaining > 0 ? timer.remaining : timer.delay;
+      timer.timeout ??= import_useTimeout.Timeout.create();
+      timer.timeout.start(timer.remaining, () => {
+        this.handleTimerFired(id);
+        timer.callback();
+      });
+      timer.start = Date.now();
+    });
+  }
+  restoreFocusToPrevElement() {
+    this.state.prevFocusElement?.focus({ preventScroll: true });
+  }
+  handleDocumentPointerDown = (event) => {
+    if (event.pointerType !== "touch") {
+      return;
+    }
+    const target = (0, import_list_utils.getTarget)(event);
+    if ((0, import_element.contains)(this.state.viewport, target)) {
+      return;
+    }
+    this.resumeTimers();
+    this.update({ hovering: false, focused: false });
+  };
+  scheduleTimer(id, delay, callback) {
+    const start = Date.now();
+    const shouldStartActive = !toastSelectors.expandedOrOutOfFocus(this.state);
+    const currentTimeout = shouldStartActive ? import_useTimeout.Timeout.create() : void 0;
+    currentTimeout?.start(delay, () => {
+      this.handleTimerFired(id);
+      callback();
+    });
+    this.timers.set(id, {
+      timeout: currentTimeout,
+      start: shouldStartActive ? start : 0,
+      delay,
+      remaining: delay,
+      callback
+    });
+  }
+  clearTimers() {
+    this.timers.forEach((timer) => {
+      timer.timeout?.clear();
+    });
+    this.timers.clear();
+    this.areTimersPaused = false;
+  }
+  clearTimer(id) {
+    const timer = this.timers.get(id);
+    timer?.timeout?.clear();
+    this.timers.delete(id);
+    this.resetPausedStateIfNoTimersRemain();
+  }
+  handleTimerFired(id) {
+    this.timers.delete(id);
+    this.resetPausedStateIfNoTimersRemain();
+  }
+  resetPausedStateIfNoTimersRemain() {
+    if (this.timers.size === 0) {
+      this.areTimersPaused = false;
+    }
+  }
+  setToasts(newToasts) {
+    const updates = {
+      toasts: newToasts,
+      toastMetadata: createToastMetadata(newToasts)
+    };
+    if (newToasts.length === 0) {
+      updates.hovering = false;
+      updates.focused = false;
+    }
+    this.update(updates);
+  }
+  handleFocusManagement(toastId) {
+    const activeEl = (0, import_element.activeElement)((0, import_owner.ownerDocument)(this.state.viewport));
+    if (!this.state.viewport || !(0, import_element.contains)(this.state.viewport, activeEl) || !(0, import_matchesFocusVisible.matchesFocusVisible)(activeEl)) {
+      return;
+    }
+    if (toastId === void 0) {
+      this.restoreFocusToPrevElement();
+      return;
+    }
+    const toasts = toastSelectors.toasts(this.state);
+    const currentIndex = toastSelectors.toastIndex(this.state, toastId);
+    let nextToast = null;
+    let index = currentIndex + 1;
+    while (index < toasts.length) {
+      if (toasts[index].transitionStatus !== "ending") {
+        nextToast = toasts[index];
+        break;
+      }
+      index += 1;
+    }
+    if (!nextToast) {
+      index = currentIndex - 1;
+      while (index >= 0) {
+        if (toasts[index].transitionStatus !== "ending") {
+          nextToast = toasts[index];
+          break;
+        }
+        index -= 1;
+      }
+    }
+    if (nextToast) {
+      nextToast.ref?.current?.focus();
+    } else {
+      this.restoreFocusToPrevElement();
+    }
+  }
+}
+function createToastManager() {
+  const listeners = /* @__PURE__ */ new Set();
+  function emit(data) {
+    listeners.forEach((listener) => listener(data));
+  }
+  return {
+    // Private aside from ToastProvider needing to access it.
+    " subscribe": function subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    add(options) {
+      const id = options.id || (0, import_generateId.generateId)("toast");
+      const toastToAdd = {
+        ...options,
+        id,
+        transitionStatus: "starting"
+      };
+      emit({ action: "add", options: toastToAdd });
+      return id;
+    },
+    close(id) {
+      emit({ action: "close", options: { id } });
+    },
+    update(id, updates) {
+      emit({ action: "update", options: { ...updates, id } });
+    },
+    promise(promiseValue, options) {
+      let handledPromise = promiseValue;
+      emit({
+        action: "promise",
+        options: {
+          ...options,
+          promise: promiseValue,
+          setPromise(promise) {
+            handledPromise = promise;
+          }
+        }
+      });
+      return handledPromise;
+    }
+  };
+}
+const ToastContext = (0, import_octane.createContext)(void 0);
+function useToastProviderContext() {
+  const context = (0, import_octane.useContext)(ToastContext);
+  if (!context) {
+    throw new Error("Base UI: useToastManager must be used within <Toast.Provider>.");
+  }
+  return context;
+}
+const ToastRootContext = (0, import_octane.createContext)(void 0);
+function useToastRootContext() {
+  const context = (0, import_octane.useContext)(ToastRootContext);
+  if (!context) {
+    throw new Error(
+      "Base UI: ToastRootContext is missing. Toast parts must be used within <Toast.Root>."
+    );
+  }
+  return context;
+}
+const ToastPositionerContext = (0, import_octane.createContext)(void 0);
+function useToastPositionerContext() {
+  const context = (0, import_octane.useContext)(ToastPositionerContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: ToastPositionerContext is missing. ToastPositioner parts must be placed within <Toast.Positioner>."
+    );
+  }
+  return context;
+}
+function useToastManager(slotArg) {
+  const slot = slotArg ?? (0, import_internal.S)("useToastManager");
+  const store = (0, import_octane.useContext)(ToastContext);
+  if (!store) {
+    throw new Error("Base UI: useToastManager must be used within <Toast.Provider>.");
+  }
+  const toasts = store.useState("toasts", (0, import_internal.subSlot)(slot, "toasts"));
+  return (0, import_octane.useMemo)(
+    () => ({
+      toasts,
+      add: store.addToast,
+      close: store.closeToast,
+      update: store.updateToast,
+      promise: store.promiseToast
+    }),
+    [toasts, store],
+    (0, import_internal.subSlot)(slot, "m")
+  );
+}
+function ToastProvider(props) {
+  const slot = (0, import_internal.S)("ToastProvider");
+  const { children, timeout = 5e3, limit = 3, toastManager } = props;
+  const store = (0, import_useRefWithInit.useRefWithInit)(
+    () => new ToastStore({
+      timeout,
+      limit,
+      viewport: null,
+      toasts: [],
+      hovering: false,
+      focused: false,
+      isWindowFocused: true,
+      prevFocusElement: null
+    }),
+    (0, import_internal.subSlot)(slot, "store")
+  ).current;
+  (0, import_useOnMount.useOnMount)(store.disposeEffect, (0, import_internal.subSlot)(slot, "dispose"));
+  (0, import_octane.useEffect)(
+    function subscribeToToastManager() {
+      if (!toastManager) {
+        return void 0;
+      }
+      const unsubscribe = toastManager[" subscribe"](({ action, options }) => {
+        const id = options.id;
+        if (action === "promise" && options.promise) {
+          store.promiseToast(options.promise, options);
+        } else if (action === "update" && id) {
+          store.updateToast(id, options);
+        } else if (action === "close") {
+          store.closeToast(id);
+        } else {
+          store.addToast(options);
+        }
+      });
+      return unsubscribe;
+    },
+    [store, toastManager],
+    (0, import_internal.subSlot)(slot, "e:subscribe")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      store.syncProviderProps({ timeout, limit });
+    },
+    [store, timeout, limit],
+    (0, import_internal.subSlot)(slot, "e:sync")
+  );
+  return (0, import_octane.createElement)(ToastContext.Provider, { value: store, children });
+}
+function ToastViewport(componentProps) {
+  const slot = (0, import_internal.S)("ToastViewport");
+  const { render, className, style, children, ref: forwardedRef, ...elementProps } = componentProps;
+  const store = useToastProviderContext();
+  const windowFocusTimeout = (0, import_useTimeout.useTimeout)((0, import_internal.subSlot)(slot, "wft"));
+  const handlingFocusGuardRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "hfg"));
+  const markedReadyForMouseLeaveRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "mrml"));
+  const touchActiveRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "touch"));
+  const isEmpty = store.useState("isEmpty", (0, import_internal.subSlot)(slot, "empty"));
+  const toasts = store.useState("toasts", (0, import_internal.subSlot)(slot, "toasts"));
+  const focused = store.useState("focused", (0, import_internal.subSlot)(slot, "focused"));
+  const expanded = store.useState("expanded", (0, import_internal.subSlot)(slot, "expanded"));
+  const prevFocusElement = store.useState("prevFocusElement", (0, import_internal.subSlot)(slot, "prevFocus"));
+  const frontmostHeight = toasts[0]?.height ?? 0;
+  const hasTransitioningToasts = (0, import_octane.useMemo)(
+    () => toasts.some((toast) => toast.transitionStatus === "ending"),
+    [toasts],
+    (0, import_internal.subSlot)(slot, "transitioning")
+  );
+  const highPriorityToasts = (0, import_octane.useMemo)(
+    () => toasts.filter((toast) => toast.priority === "high"),
+    [toasts],
+    (0, import_internal.subSlot)(slot, "highPriority")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const viewport = store.state.viewport;
+      if (!viewport) {
+        return void 0;
+      }
+      function handleGlobalKeyDown(event) {
+        if (isEmpty) {
+          return;
+        }
+        if (event.key === "F6" && (0, import_list_utils.getTarget)(event) !== viewport) {
+          event.preventDefault();
+          store.setPrevFocusElement((0, import_element.activeElement)((0, import_owner.ownerDocument)(viewport)));
+          viewport?.focus({ preventScroll: true });
+          store.pauseTimers();
+          store.setFocused(true);
+        }
+      }
+      const win = (0, import_owner.ownerWindow)(viewport);
+      return (0, import_addEventListener.addEventListener)(win, "keydown", handleGlobalKeyDown);
+    },
+    [store, isEmpty],
+    (0, import_internal.subSlot)(slot, "e:f6")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const viewport = store.state.viewport;
+      if (!viewport || isEmpty) {
+        return void 0;
+      }
+      const win = (0, import_owner.ownerWindow)(viewport);
+      function handleWindowBlur(event) {
+        if ((0, import_list_utils.getTarget)(event) !== win) {
+          return;
+        }
+        store.setIsWindowFocused(false);
+        store.pauseTimers();
+      }
+      function handleWindowFocus(event) {
+        if (event.relatedTarget) {
+          return;
+        }
+        const target = (0, import_list_utils.getTarget)(event);
+        const activeEl = (0, import_element.activeElement)((0, import_owner.ownerDocument)(viewport));
+        if (target === win || !(0, import_element.contains)(viewport, target) || !(0, import_matchesFocusVisible.matchesFocusVisible)(activeEl)) {
+          store.resumeTimers();
+        }
+        windowFocusTimeout.start(0, () => store.setIsWindowFocused(true));
+      }
+      return (0, import_mergeCleanups.mergeCleanups)(
+        (0, import_addEventListener.addEventListener)(win, "blur", handleWindowBlur, true),
+        (0, import_addEventListener.addEventListener)(win, "focus", handleWindowFocus, true)
+      );
+    },
+    [
+      store,
+      windowFocusTimeout,
+      // `store.state.viewport` isn't available on the first render, since the portal node
+      // hasn't yet been created. This dependency ensures the window listeners are added once
+      // toasts have been created and the ref is available.
+      isEmpty
+    ],
+    (0, import_internal.subSlot)(slot, "e:window")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const viewport = store.state.viewport;
+      if (!viewport || isEmpty) {
+        return void 0;
+      }
+      const doc = (0, import_owner.ownerDocument)(viewport);
+      return (0, import_addEventListener.addEventListener)(doc, "pointerdown", store.handleDocumentPointerDown, true);
+    },
+    [isEmpty, store],
+    (0, import_internal.subSlot)(slot, "e:pointerdown")
+  );
+  function handleFocusGuard(event) {
+    const viewport = store.state.viewport;
+    if (!viewport) {
+      return;
+    }
+    handlingFocusGuardRef.current = true;
+    if (event.relatedTarget === viewport) {
+      const firstFocusableToast = toasts.find(
+        (toast) => toast.transitionStatus !== "ending" && !toast.limited
+      );
+      if (firstFocusableToast) {
+        firstFocusableToast.ref?.current?.focus();
+      } else {
+        store.restoreFocusToPrevElement();
+      }
+    } else {
+      store.restoreFocusToPrevElement();
+    }
+  }
+  function handleKeyDown(event) {
+    if (event.key === "Tab" && event.shiftKey && (0, import_list_utils.getTarget)(event) === store.state.viewport) {
+      event.preventDefault();
+      store.restoreFocusToPrevElement();
+      store.resumeTimers();
+    }
+  }
+  function flushMouseLeave() {
+    const hasEndingToasts = store.state.toasts.some(
+      (toast) => toast.transitionStatus === "ending"
+    );
+    if (hasEndingToasts || touchActiveRef.current || !markedReadyForMouseLeaveRef.current) {
+      return;
+    }
+    if (store.state.isWindowFocused) {
+      store.resumeTimers();
+    }
+    store.setHovering(false);
+    markedReadyForMouseLeaveRef.current = false;
+  }
+  (0, import_octane.useEffect)(flushMouseLeave, [hasTransitioningToasts, store], (0, import_internal.subSlot)(slot, "e:flushLeave"));
+  function handleMouseEnter() {
+    store.pauseTimers();
+    store.setHovering(true);
+    markedReadyForMouseLeaveRef.current = false;
+  }
+  function resumeTimersIfWindowFocused() {
+    if (store.state.isWindowFocused) {
+      store.resumeTimers();
+    }
+  }
+  function handleMouseLeave() {
+    const hasEndingToasts = store.state.toasts.some(
+      (toast) => toast.transitionStatus === "ending"
+    );
+    if (hasEndingToasts || touchActiveRef.current) {
+      markedReadyForMouseLeaveRef.current = true;
+    } else {
+      resumeTimersIfWindowFocused();
+      store.setHovering(false);
+    }
+  }
+  function handlePointerDown(event) {
+    if (event.pointerType === "touch") {
+      touchActiveRef.current = true;
+    }
+  }
+  function handlePointerEnd(event) {
+    if (event.pointerType !== "touch") {
+      return;
+    }
+    touchActiveRef.current = false;
+    flushMouseLeave();
+  }
+  function handleFocus() {
+    if (handlingFocusGuardRef.current) {
+      handlingFocusGuardRef.current = false;
+      return;
+    }
+    if (focused) {
+      return;
+    }
+    if ((0, import_matchesFocusVisible.matchesFocusVisible)((0, import_element.activeElement)((0, import_owner.ownerDocument)(store.state.viewport)))) {
+      store.setFocused(true);
+      store.pauseTimers();
+    }
+  }
+  function handleBlur(event) {
+    if (!focused || (0, import_element.contains)(store.state.viewport, event.relatedTarget)) {
+      return;
+    }
+    store.setFocused(false);
+    resumeTimersIfWindowFocused();
+  }
+  const defaultProps = {
+    tabIndex: -1,
+    role: "region",
+    "aria-live": "polite",
+    "aria-atomic": false,
+    "aria-relevant": "additions text",
+    "aria-label": "Notifications",
+    onMouseEnter: handleMouseEnter,
+    onMouseMove: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    onClick: handleFocus,
+    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerEnd,
+    onPointerCancel: handlePointerEnd
+  };
+  const state = {
+    expanded
+  };
+  const showGuards = !isEmpty && Boolean(prevFocusElement);
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      ref: [forwardedRef, store.setViewport],
+      state,
+      props: [
+        defaultProps,
+        {
+          style: {
+            [ToastViewportCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : void 0
+          }
+        },
+        elementProps,
+        {
+          children: [
+            showGuards ? (0, import_octane.createElement)(import_FocusGuard.FocusGuard, { key: "guard-in-start", onFocus: handleFocusGuard }) : null,
+            (0, import_octane.createElement)(import_octane.Fragment, { key: "children", children }),
+            showGuards ? (0, import_octane.createElement)(import_FocusGuard.FocusGuard, { key: "guard-in-end", onFocus: handleFocusGuard }) : null
+          ]
+        }
+      ]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return [
+    showGuards ? (0, import_octane.createElement)(import_FocusGuard.FocusGuard, { key: "guard-out-start", onFocus: handleFocusGuard }) : null,
+    (0, import_octane.createElement)(import_octane.Fragment, { key: "viewport", children: element }),
+    !focused && highPriorityToasts.length > 0 ? (0, import_octane.createElement)("div", {
+      key: "live-region",
+      style: import_visuallyHidden.visuallyHidden,
+      children: highPriorityToasts.map(
+        (toast) => (0, import_octane.createElement)("div", {
+          key: toast.id,
+          role: "alert",
+          "aria-atomic": true,
+          children: [
+            (0, import_octane.createElement)("div", { key: "title", children: toast.title }),
+            (0, import_octane.createElement)("div", { key: "description", children: toast.description })
+          ]
+        })
+      )
+    }) : null
+  ];
+}
+const toastRootStateAttributesMapping = {
+  ...import_useTransitionStatus.transitionStatusMapping,
+  swipeDirection(value) {
+    return value ? { "data-swipe-direction": value } : null;
+  }
+};
+const SWIPE_THRESHOLD = 40;
+const REVERSE_CANCEL_THRESHOLD = 10;
+const OPPOSITE_DIRECTION_DAMPING_FACTOR = 0.5;
+const MIN_DRAG_THRESHOLD = 1;
+const TOAST_SWIPE_IGNORE_SELECTOR = `${import_constants.BASE_UI_SWIPE_IGNORE_SELECTOR},${import_constants.LEGACY_SWIPE_IGNORE_SELECTOR}`;
+function getDisplacement(direction, deltaX, deltaY) {
+  switch (direction) {
+    case "up":
+      return -deltaY;
+    case "down":
+      return deltaY;
+    case "left":
+      return -deltaX;
+    case "right":
+      return deltaX;
+    default:
+      return 0;
+  }
+}
+function getElementTransform(element) {
+  const computedStyle = (0, import_owner.ownerWindow)(element).getComputedStyle(element);
+  const transform = computedStyle.transform;
+  let translateX = 0;
+  let translateY = 0;
+  let scale = 1;
+  if (transform && transform !== "none") {
+    const matrix = transform.match(/matrix(?:3d)?\(([^)]+)\)/);
+    if (matrix) {
+      const values = matrix[1].split(", ").map(parseFloat);
+      if (values.length === 6) {
+        translateX = values[4];
+        translateY = values[5];
+        scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]);
+      } else if (values.length === 16) {
+        translateX = values[12];
+        translateY = values[13];
+        scale = values[0];
+      }
+    }
+  }
+  return { x: translateX, y: translateY, scale };
+}
+function ToastRoot(componentProps) {
+  const slot = (0, import_internal.S)("ToastRoot");
+  const {
+    toast,
+    render,
+    className,
+    swipeDirection = ["down", "right"],
+    style,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const isAnchored = toast.positionerProps?.anchor !== void 0;
+  let swipeDirections = [];
+  if (!isAnchored) {
+    swipeDirections = Array.isArray(swipeDirection) ? swipeDirection : [swipeDirection];
+  }
+  const swipeEnabled = swipeDirections.length > 0;
+  const store = useToastProviderContext();
+  const [currentSwipeDirection, setCurrentSwipeDirection] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "csd")
+  );
+  const [isSwiping, setIsSwiping] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "swiping"));
+  const [isRealSwipe, setIsRealSwipe] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "realSwipe"));
+  const [dragDismissed, setDragDismissed] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "dismissed"));
+  const [dragOffset, setDragOffset] = (0, import_octane.useState)({ x: 0, y: 0 }, (0, import_internal.subSlot)(slot, "offset"));
+  const [initialTransform, setInitialTransform] = (0, import_octane.useState)(
+    { x: 0, y: 0, scale: 1 },
+    (0, import_internal.subSlot)(slot, "initTransform")
+  );
+  const [titleId, setTitleId] = (0, import_octane.useState)(void 0, (0, import_internal.subSlot)(slot, "titleId"));
+  const [descriptionId, setDescriptionId] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "descId")
+  );
+  const [lockedDirection, setLockedDirection] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "locked")
+  );
+  const rootRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "root"));
+  const dragStartPosRef = (0, import_octane.useRef)({ x: 0, y: 0 }, (0, import_internal.subSlot)(slot, "dragStart"));
+  const initialTransformRef = (0, import_octane.useRef)({ x: 0, y: 0, scale: 1 }, (0, import_internal.subSlot)(slot, "itRef"));
+  const intendedSwipeDirectionRef = (0, import_octane.useRef)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "intended")
+  );
+  const maxSwipeDisplacementRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "maxDisp"));
+  const cancelledSwipeRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "cancelled"));
+  const swipeCancelBaselineRef = (0, import_octane.useRef)({ x: 0, y: 0 }, (0, import_internal.subSlot)(slot, "baseline"));
+  const isFirstPointerMoveRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "firstMove"));
+  const dragOffsetRef = (0, import_octane.useRef)({ x: 0, y: 0 }, (0, import_internal.subSlot)(slot, "offsetRef"));
+  const activePointerIdRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "pointerId"));
+  const dragAbortControllerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "abort"));
+  const domIndex = store.useState("toastIndex", (0, import_internal.subSlot)(slot, "domIndex"), toast.id);
+  const visibleIndex = store.useState("toastVisibleIndex", (0, import_internal.subSlot)(slot, "visIndex"), toast.id);
+  const offsetY = store.useState("toastOffsetY", (0, import_internal.subSlot)(slot, "offsetY"), toast.id);
+  const focused = store.useState("focused", (0, import_internal.subSlot)(slot, "focused"));
+  const expanded = store.useState("expanded", (0, import_internal.subSlot)(slot, "expanded"));
+  (0, import_useOpenChangeComplete.useOpenChangeComplete)(
+    {
+      open: toast.transitionStatus !== "ending",
+      ref: rootRef,
+      onComplete() {
+        if (toast.transitionStatus === "ending") {
+          store.removeToast(toast.id);
+        }
+      }
+    },
+    (0, import_internal.subSlot)(slot, "occ")
+  );
+  const recalculateHeight = (0, import_useStableCallback.useStableCallback)(
+    (shouldFlush = false) => {
+      const element2 = rootRef.current;
+      if (!element2) {
+        return;
+      }
+      const previousHeight = element2.style.height;
+      element2.style.height = "auto";
+      const height = element2.offsetHeight;
+      element2.style.height = previousHeight;
+      function update() {
+        store.updateToastInternal(toast.id, {
+          ref: rootRef,
+          height,
+          ...toast.transitionStatus === "starting" ? { transitionStatus: void 0 } : {}
+        });
+      }
+      if (shouldFlush) {
+        (0, import_octane.flushSync)(update);
+      } else {
+        update();
+      }
+    },
+    (0, import_internal.subSlot)(slot, "recalc")
+  );
+  (0, import_octane.useLayoutEffect)(recalculateHeight, [recalculateHeight], (0, import_internal.subSlot)(slot, "e:recalc"));
+  function setResolvedDragOffset(nextDragOffset) {
+    dragOffsetRef.current = nextDragOffset;
+    setDragOffset(nextDragOffset);
+  }
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      return () => {
+        dragAbortControllerRef.current?.abort();
+      };
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:abort")
+  );
+  function applyDirectionalDamping(deltaX, deltaY) {
+    let newDeltaX = deltaX;
+    let newDeltaY = deltaY;
+    if (!swipeDirections.includes("left") && !swipeDirections.includes("right")) {
+      newDeltaX = deltaX > 0 ? deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+    } else {
+      if (!swipeDirections.includes("right") && deltaX > 0) {
+        newDeltaX = deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
+      }
+      if (!swipeDirections.includes("left") && deltaX < 0) {
+        newDeltaX = -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+      }
+    }
+    if (!swipeDirections.includes("up") && !swipeDirections.includes("down")) {
+      newDeltaY = deltaY > 0 ? deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+    } else {
+      if (!swipeDirections.includes("down") && deltaY > 0) {
+        newDeltaY = deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
+      }
+      if (!swipeDirections.includes("up") && deltaY < 0) {
+        newDeltaY = -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+      }
+    }
+    return { x: newDeltaX, y: newDeltaY };
+  }
+  const handleSwipeEnd = (0, import_useStableCallback.useStableCallback)(
+    (event) => {
+      if (event.pointerId !== activePointerIdRef.current) {
+        return;
+      }
+      activePointerIdRef.current = null;
+      dragAbortControllerRef.current?.abort();
+      dragAbortControllerRef.current = null;
+      setIsSwiping(false);
+      setIsRealSwipe(false);
+      setLockedDirection(null);
+      const resolvedInitialTransform = initialTransformRef.current;
+      if (event.type === "pointercancel" || cancelledSwipeRef.current) {
+        setResolvedDragOffset({ x: resolvedInitialTransform.x, y: resolvedInitialTransform.y });
+        setCurrentSwipeDirection(void 0);
+        return;
+      }
+      let shouldClose = false;
+      const resolvedDragOffset = dragOffsetRef.current;
+      const deltaX = resolvedDragOffset.x - resolvedInitialTransform.x;
+      const deltaY = resolvedDragOffset.y - resolvedInitialTransform.y;
+      let dismissDirection;
+      for (const direction of swipeDirections) {
+        switch (direction) {
+          case "right":
+            if (deltaX > SWIPE_THRESHOLD) {
+              shouldClose = true;
+              dismissDirection = "right";
+            }
+            break;
+          case "left":
+            if (deltaX < -SWIPE_THRESHOLD) {
+              shouldClose = true;
+              dismissDirection = "left";
+            }
+            break;
+          case "down":
+            if (deltaY > SWIPE_THRESHOLD) {
+              shouldClose = true;
+              dismissDirection = "down";
+            }
+            break;
+          case "up":
+            if (deltaY < -SWIPE_THRESHOLD) {
+              shouldClose = true;
+              dismissDirection = "up";
+            }
+            break;
+          default:
+            break;
+        }
+        if (shouldClose) {
+          break;
+        }
+      }
+      if (shouldClose) {
+        setCurrentSwipeDirection(dismissDirection);
+        setDragDismissed(true);
+        store.closeToast(toast.id);
+      } else {
+        setResolvedDragOffset({ x: resolvedInitialTransform.x, y: resolvedInitialTransform.y });
+        setCurrentSwipeDirection(void 0);
+      }
+    },
+    (0, import_internal.subSlot)(slot, "swipeEnd")
+  );
+  function handlePointerDown(event) {
+    if (event.button !== 0) {
+      return;
+    }
+    if (event.pointerType === "touch") {
+      store.pauseTimers();
+    }
+    const target = (0, import_list_utils.getTarget)(event);
+    const isInteractiveElement = target ? target.closest(`button,a,input,textarea,[role="button"],${TOAST_SWIPE_IGNORE_SELECTOR}`) : false;
+    if (isInteractiveElement) {
+      return;
+    }
+    cancelledSwipeRef.current = false;
+    intendedSwipeDirectionRef.current = void 0;
+    maxSwipeDisplacementRef.current = 0;
+    activePointerIdRef.current = event.pointerId;
+    dragStartPosRef.current = { x: event.clientX, y: event.clientY };
+    swipeCancelBaselineRef.current = dragStartPosRef.current;
+    if (rootRef.current) {
+      const transform = getElementTransform(rootRef.current);
+      initialTransformRef.current = transform;
+      setInitialTransform(transform);
+      setResolvedDragOffset({
+        x: transform.x,
+        y: transform.y
+      });
+    }
+    store.setHovering(true);
+    setIsSwiping(true);
+    setIsRealSwipe(false);
+    setLockedDirection(null);
+    isFirstPointerMoveRef.current = true;
+    const element2 = rootRef.current;
+    if (element2) {
+      dragAbortControllerRef.current?.abort();
+      const dragAbortController = new AbortController();
+      dragAbortControllerRef.current = dragAbortController;
+      const doc = (0, import_owner.ownerDocument)(element2);
+      doc.addEventListener("pointerup", handleSwipeEnd, {
+        signal: dragAbortController.signal
+      });
+      doc.addEventListener("pointercancel", handleSwipeEnd, {
+        signal: dragAbortController.signal
+      });
+      element2.setPointerCapture?.(event.pointerId);
+    }
+  }
+  function handlePointerMove(event) {
+    if (event.pointerId !== activePointerIdRef.current) {
+      return;
+    }
+    event.preventDefault();
+    if (isFirstPointerMoveRef.current) {
+      dragStartPosRef.current = { x: event.clientX, y: event.clientY };
+      isFirstPointerMoveRef.current = false;
+    }
+    const { clientY, clientX, movementX, movementY } = event;
+    if (movementY < 0 && clientY > swipeCancelBaselineRef.current.y || movementY > 0 && clientY < swipeCancelBaselineRef.current.y) {
+      swipeCancelBaselineRef.current = { x: swipeCancelBaselineRef.current.x, y: clientY };
+    }
+    if (movementX < 0 && clientX > swipeCancelBaselineRef.current.x || movementX > 0 && clientX < swipeCancelBaselineRef.current.x) {
+      swipeCancelBaselineRef.current = { x: clientX, y: swipeCancelBaselineRef.current.y };
+    }
+    const deltaX = clientX - dragStartPosRef.current.x;
+    const deltaY = clientY - dragStartPosRef.current.y;
+    const cancelDeltaY = clientY - swipeCancelBaselineRef.current.y;
+    const cancelDeltaX = clientX - swipeCancelBaselineRef.current.x;
+    if (!isRealSwipe) {
+      const movementDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      if (movementDistance >= MIN_DRAG_THRESHOLD) {
+        setIsRealSwipe(true);
+        if (lockedDirection === null) {
+          const hasHorizontal = swipeDirections.includes("left") || swipeDirections.includes("right");
+          const hasVertical = swipeDirections.includes("up") || swipeDirections.includes("down");
+          if (hasHorizontal && hasVertical) {
+            const absX = Math.abs(deltaX);
+            const absY = Math.abs(deltaY);
+            setLockedDirection(absX > absY ? "horizontal" : "vertical");
+          }
+        }
+      }
+    }
+    let candidate;
+    if (!intendedSwipeDirectionRef.current) {
+      if (lockedDirection === "vertical") {
+        if (deltaY > 0) {
+          candidate = "down";
+        } else if (deltaY < 0) {
+          candidate = "up";
+        }
+      } else if (lockedDirection === "horizontal") {
+        if (deltaX > 0) {
+          candidate = "right";
+        } else if (deltaX < 0) {
+          candidate = "left";
+        }
+      } else if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+        candidate = deltaX > 0 ? "right" : "left";
+      } else {
+        candidate = deltaY > 0 ? "down" : "up";
+      }
+      if (candidate && swipeDirections.includes(candidate)) {
+        intendedSwipeDirectionRef.current = candidate;
+        maxSwipeDisplacementRef.current = getDisplacement(candidate, deltaX, deltaY);
+        setCurrentSwipeDirection(candidate);
+      }
+    } else {
+      const direction = intendedSwipeDirectionRef.current;
+      const currentDisplacement = getDisplacement(direction, cancelDeltaX, cancelDeltaY);
+      if (currentDisplacement > SWIPE_THRESHOLD) {
+        cancelledSwipeRef.current = false;
+        setCurrentSwipeDirection(direction);
+      } else if (!(swipeDirections.includes("left") && swipeDirections.includes("right")) && !(swipeDirections.includes("up") && swipeDirections.includes("down")) && maxSwipeDisplacementRef.current - currentDisplacement >= REVERSE_CANCEL_THRESHOLD) {
+        cancelledSwipeRef.current = true;
+      }
+    }
+    const dampedDelta = applyDirectionalDamping(deltaX, deltaY);
+    let newOffsetX = initialTransformRef.current.x;
+    let newOffsetY = initialTransformRef.current.y;
+    if (lockedDirection === "horizontal") {
+      if (swipeDirections.includes("left") || swipeDirections.includes("right")) {
+        newOffsetX += dampedDelta.x;
+      }
+    } else if (lockedDirection === "vertical") {
+      if (swipeDirections.includes("up") || swipeDirections.includes("down")) {
+        newOffsetY += dampedDelta.y;
+      }
+    } else {
+      if (swipeDirections.includes("left") || swipeDirections.includes("right")) {
+        newOffsetX += dampedDelta.x;
+      }
+      if (swipeDirections.includes("up") || swipeDirections.includes("down")) {
+        newOffsetY += dampedDelta.y;
+      }
+    }
+    setResolvedDragOffset({ x: newOffsetX, y: newOffsetY });
+  }
+  function handleKeyDown(event) {
+    if (event.key === "Escape") {
+      if (!rootRef.current || !(0, import_element.contains)(rootRef.current, (0, import_element.activeElement)((0, import_owner.ownerDocument)(rootRef.current)))) {
+        return;
+      }
+      store.closeToast(toast.id);
+    }
+  }
+  (0, import_octane.useEffect)(
+    () => {
+      if (!swipeEnabled) {
+        return void 0;
+      }
+      const element2 = rootRef.current;
+      if (!element2) {
+        return void 0;
+      }
+      function preventDefaultTouchStart(event) {
+        if (activePointerIdRef.current === null || !(0, import_element.contains)(element2, (0, import_list_utils.getTarget)(event))) {
+          return;
+        }
+        event.preventDefault();
+      }
+      return (0, import_addEventListener.addEventListener)(element2, "touchmove", preventDefaultTouchStart, {
+        passive: false
+      });
+    },
+    [swipeEnabled],
+    (0, import_internal.subSlot)(slot, "e:touchmove")
+  );
+  function getDragStyles() {
+    if (!isSwiping && dragOffset.x === initialTransform.x && dragOffset.y === initialTransform.y && !dragDismissed) {
+      return {
+        [ToastRootCssVars.swipeMovementX]: "0px",
+        [ToastRootCssVars.swipeMovementY]: "0px"
+      };
+    }
+    const deltaX = dragOffset.x - initialTransform.x;
+    const deltaY = dragOffset.y - initialTransform.y;
+    return {
+      transition: isSwiping ? "none" : void 0,
+      // While swiping, freeze the element at its current visual transform so it doesn't snap
+      // to the end position.
+      transform: isSwiping ? `translateX(${dragOffset.x}px) translateY(${dragOffset.y}px) scale(${initialTransform.scale})` : void 0,
+      [ToastRootCssVars.swipeMovementX]: `${deltaX}px`,
+      [ToastRootCssVars.swipeMovementY]: `${deltaY}px`
+    };
+  }
+  const isHighPriority = toast.priority === "high";
+  const defaultProps = {
+    role: isHighPriority ? "alertdialog" : "dialog",
+    tabIndex: 0,
+    "aria-modal": false,
+    "aria-labelledby": titleId,
+    "aria-describedby": descriptionId,
+    "aria-hidden": isHighPriority && !focused ? true : void 0,
+    onPointerDown: swipeEnabled ? handlePointerDown : void 0,
+    onPointerMove: swipeEnabled ? handlePointerMove : void 0,
+    onPointerUp: swipeEnabled ? handleSwipeEnd : void 0,
+    onPointerCancel: swipeEnabled ? handleSwipeEnd : void 0,
+    onKeyDown: handleKeyDown,
+    inert: (0, import_inertValue.inertValue)(toast.limited),
+    style: {
+      ...getDragStyles(),
+      [ToastRootCssVars.index]: toast.transitionStatus === "ending" ? domIndex : visibleIndex,
+      [ToastRootCssVars.offsetY]: `${offsetY}px`,
+      [ToastRootCssVars.height]: toast.height ? `${toast.height}px` : void 0
+    }
+  };
+  const toastRoot = (0, import_octane.useMemo)(
+    () => ({
+      rootRef,
+      toast,
+      titleId,
+      setTitleId,
+      descriptionId,
+      setDescriptionId,
+      swiping: isSwiping,
+      swipeDirection: currentSwipeDirection,
+      recalculateHeight,
+      index: domIndex,
+      visibleIndex,
+      expanded
+    }),
+    [
+      toast,
+      titleId,
+      descriptionId,
+      isSwiping,
+      currentSwipeDirection,
+      recalculateHeight,
+      domIndex,
+      visibleIndex,
+      expanded
+    ],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  const state = {
+    transitionStatus: toast.transitionStatus,
+    expanded,
+    limited: toast.limited || false,
+    type: toast.type,
+    swiping: toastRoot.swiping,
+    swipeDirection: toastRoot.swipeDirection
+  };
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      ref: [forwardedRef, toastRoot.rootRef],
+      state,
+      stateAttributesMapping: toastRootStateAttributesMapping,
+      props: [defaultProps, elementProps]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(ToastRootContext.Provider, { value: toastRoot, children: element });
+}
+function ToastTitle(componentProps) {
+  const slot = (0, import_internal.S)("ToastTitle");
+  const {
+    render,
+    className,
+    style,
+    id: idProp,
+    children: childrenProp,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const { toast, setTitleId } = useToastRootContext();
+  const children = childrenProp ?? toast.title;
+  const shouldRender = Boolean(children);
+  const generatedId = (0, import_octane.useId)((0, import_internal.subSlot)(slot, "id"));
+  const id = idProp ?? generatedId;
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!shouldRender) {
+        return void 0;
+      }
+      setTitleId(id);
+      return () => {
+        setTitleId(void 0);
+      };
+    },
+    [shouldRender, id, setTitleId],
+    (0, import_internal.subSlot)(slot, "e")
+  );
+  const state = {
+    type: toast.type
+  };
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "h2",
+    componentProps,
+    {
+      ref: forwardedRef,
+      state,
+      props: {
+        ...elementProps,
+        id,
+        children
+      }
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+}
+function ToastDescription(componentProps) {
+  const slot = (0, import_internal.S)("ToastDescription");
+  const {
+    render,
+    className,
+    style,
+    id: idProp,
+    children: childrenProp,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const { toast, setDescriptionId } = useToastRootContext();
+  const children = childrenProp ?? toast.description;
+  const shouldRender = Boolean(children);
+  const generatedId = (0, import_octane.useId)((0, import_internal.subSlot)(slot, "id"));
+  const id = idProp ?? generatedId;
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!shouldRender) {
+        return void 0;
+      }
+      setDescriptionId(id);
+      return () => {
+        setDescriptionId(void 0);
+      };
+    },
+    [shouldRender, id, setDescriptionId],
+    (0, import_internal.subSlot)(slot, "e")
+  );
+  const state = {
+    type: toast.type
+  };
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "p",
+    componentProps,
+    {
+      ref: forwardedRef,
+      state,
+      props: {
+        ...elementProps,
+        id,
+        children
+      }
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+}
+function ToastContent(componentProps) {
+  const slot = (0, import_internal.S)("ToastContent");
+  const { render, className, style, ref: forwardedRef, ...elementProps } = componentProps;
+  const { visibleIndex, expanded, recalculateHeight } = useToastRootContext();
+  const contentRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "content"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const node = contentRef.current;
+      if (!node) {
+        return void 0;
+      }
+      recalculateHeight();
+      if (typeof ResizeObserver !== "function" || typeof MutationObserver !== "function") {
+        return void 0;
+      }
+      const resizeObserver = new ResizeObserver(() => recalculateHeight(true));
+      const mutationObserver = new MutationObserver(() => recalculateHeight(true));
+      resizeObserver.observe(node);
+      mutationObserver.observe(node, { childList: true, subtree: true, characterData: true });
+      return () => {
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+      };
+    },
+    [recalculateHeight],
+    (0, import_internal.subSlot)(slot, "e")
+  );
+  const behind = visibleIndex > 0;
+  const state = {
+    expanded,
+    behind
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      ref: [forwardedRef, contentRef],
+      state,
+      props: elementProps
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function ToastClose(componentProps) {
+  const slot = (0, import_internal.S)("ToastClose");
+  const {
+    render,
+    className,
+    style,
+    disabled,
+    nativeButton = true,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const store = useToastProviderContext();
+  const { toast } = useToastRootContext();
+  const expanded = store.useState("expanded", (0, import_internal.subSlot)(slot, "expanded"));
+  const [hasFocus, setHasFocus] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "focus"));
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled, native: nativeButton },
+    (0, import_internal.subSlot)(slot, "btn")
+  );
+  const state = {
+    type: toast.type
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "button",
+    componentProps,
+    {
+      ref: [forwardedRef, buttonRef],
+      state,
+      props: [
+        {
+          "aria-hidden": !expanded && !hasFocus,
+          onClick() {
+            store.closeToast(toast.id);
+          },
+          onFocus() {
+            setHasFocus(true);
+          },
+          onBlur() {
+            setHasFocus(false);
+          }
+        },
+        elementProps,
+        getButtonProps
+      ]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function ToastAction(componentProps) {
+  const slot = (0, import_internal.S)("ToastAction");
+  const {
+    render,
+    className,
+    style,
+    disabled,
+    nativeButton = true,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const { toast } = useToastRootContext();
+  const computedChildren = toast.actionProps?.children ?? elementProps.children;
+  const shouldRender = Boolean(computedChildren);
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled, native: nativeButton },
+    (0, import_internal.subSlot)(slot, "btn")
+  );
+  const state = {
+    type: toast.type
+  };
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "button",
+    componentProps,
+    {
+      ref: [forwardedRef, buttonRef],
+      state,
+      props: [
+        elementProps,
+        toast.actionProps,
+        getButtonProps,
+        {
+          children: computedChildren
+        }
+      ]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+}
+function ToastPositioner(componentProps) {
+  const slot = (0, import_internal.S)("ToastPositioner");
+  const { toast, ...props } = componentProps;
+  const store = useToastProviderContext();
+  const positionerProps = toast.positionerProps ?? import_empty.EMPTY_OBJECT;
+  const {
+    render,
+    className,
+    anchor: anchorProp = positionerProps.anchor,
+    positionMethod = positionerProps.positionMethod ?? "absolute",
+    side = positionerProps.side ?? "top",
+    align = positionerProps.align ?? "center",
+    sideOffset = positionerProps.sideOffset ?? 0,
+    alignOffset = positionerProps.alignOffset ?? 0,
+    collisionBoundary = positionerProps.collisionBoundary ?? "clipping-ancestors",
+    collisionPadding = positionerProps.collisionPadding ?? 5,
+    arrowPadding = positionerProps.arrowPadding ?? 5,
+    sticky = positionerProps.sticky ?? false,
+    disableAnchorTracking = positionerProps.disableAnchorTracking ?? false,
+    collisionAvoidance = positionerProps.collisionAvoidance ?? import_constants.POPUP_COLLISION_AVOIDANCE,
+    style,
+    ref: forwardedRef,
+    ...elementProps
+  } = props;
+  const [positionerElement, setPositionerElement] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "el")
+  );
+  const domIndex = store.useState("toastIndex", (0, import_internal.subSlot)(slot, "domIndex"), toast.id);
+  const visibleIndex = store.useState("toastVisibleIndex", (0, import_internal.subSlot)(slot, "visIndex"), toast.id);
+  const anchor = (0, import_dom.isElement)(anchorProp) ? anchorProp : null;
+  const floatingRootContext = (0, import_useFloatingRootContext.useFloatingRootContext)(
+    {
+      open: true,
+      onOpenChange: import_noop.NOOP,
+      elements: {
+        floating: positionerElement,
+        reference: anchor
+      }
+    },
+    (0, import_internal.subSlot)(slot, "frc")
+  );
+  const positioning = (0, import_useAnchorPositioning.useAnchorPositioning)(
+    {
+      anchor,
+      positionMethod,
+      floatingRootContext,
+      mounted: true,
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      collisionBoundary,
+      collisionPadding,
+      sticky,
+      arrowPadding,
+      disableAnchorTracking,
+      keepMounted: true,
+      collisionAvoidance
+    },
+    (0, import_internal.subSlot)(slot, "positioning")
+  );
+  const state = (0, import_octane.useMemo)(
+    () => ({
+      side: positioning.side,
+      align: positioning.align,
+      anchorHidden: positioning.anchorHidden
+    }),
+    [positioning.side, positioning.align, positioning.anchorHidden],
+    (0, import_internal.subSlot)(slot, "state")
+  );
+  const element = (0, import_usePositioner.usePositioner)(
+    componentProps,
+    state,
+    {
+      styles: {
+        ...positioning.positionerStyles,
+        [ToastRootCssVars.index]: toast.transitionStatus === "ending" ? domIndex : visibleIndex
+      },
+      transitionStatus: toast.transitionStatus,
+      props: elementProps,
+      refs: [forwardedRef, setPositionerElement]
+    },
+    (0, import_internal.subSlot)(slot, "positioner")
+  );
+  return (0, import_octane.createElement)(ToastPositionerContext.Provider, {
+    value: positioning,
+    children: element
+  });
+}
+function ToastArrow(componentProps) {
+  const slot = (0, import_internal.S)("ToastArrow");
+  const { className, render, style, ref: forwardedRef, ...elementProps } = componentProps;
+  const { arrowRef, side, align, arrowUncentered, arrowStyles } = useToastPositionerContext();
+  const state = {
+    side,
+    align,
+    uncentered: arrowUncentered
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      state,
+      ref: [forwardedRef, arrowRef],
+      props: [{ style: arrowStyles, "aria-hidden": true }, elementProps]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const Toast = {
+  Provider: ToastProvider,
+  Viewport: ToastViewport,
+  Root: ToastRoot,
+  Content: ToastContent,
+  Description: ToastDescription,
+  Title: ToastTitle,
+  Close: ToastClose,
+  Action: ToastAction,
+  Portal: import_FloatingPortalLite.FloatingPortalLite,
+  Positioner: ToastPositioner,
+  Arrow: ToastArrow,
+  useToastManager,
+  createToastManager
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Toast,
+  ToastPositionerCssVars,
+  ToastRootCssVars,
+  ToastStore,
+  ToastViewportCssVars,
+  createToastManager,
+  resolvePromiseOptions,
+  toastSelectors,
+  useToastManager,
+  useToastPositionerContext,
+  useToastProviderContext,
+  useToastRootContext
+});