@t007/toast 0.0.32 → 0.0.33

package/dist/index.d.ts

@@ -1,16 +1,16 @@
-import "@t007/utils";
-
 /** Toast severity level. */
-export type ToastType = "info" | "success" | "error" | "warning";
+type ToastType = undefined | "info" | "success" | "error" | "warning";
 /** Screen anchor for toast placement. */
-export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "center-left" | "center-center" | "center-right";
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "center-left" | "center-center" | "center-right";
 /** Motion preset used when a toast enters or leaves the screen. */
-export type ToastAnimation = "fade" | "zoom" | "slide" | "slide-left" | "slide-right" | "slide-up" | "slide-down" | boolean;
+type ToastAnimation = "fade" | "zoom" | "slide" | "slide-left" | "slide-right" | "slide-up" | "slide-down" | boolean;
+/** Allowed pointer types for drag-to-dismiss gestures. */
+type ToastDragOption = boolean | "mouse" | "touch" | "pen";
 /** Allowed drag directions for dismiss gestures. `|` combines axes where it can be `a` or `b` and can change anytime while `||` does not change after a pick is determined. */
-export type ToastDragDir = "x" | "y" | "xy" | "x|y" | "x||y" | "x+" | "x-" | "y+" | "y-" | "xy+" | "xy-" | "x|y+" | "x|y-" | "x||y+" | "x||y-";
+type ToastDragDirection = "x" | "y" | "xy" | "x|y" | "x||y" | "x+" | "x-" | "y+" | "y-" | "xy+" | "xy-" | "x|y+" | "x|y-" | "x||y+" | "x||y-";
 
 /** Configuration object for creating and updating a toast. */
-export interface ToastOptions {
+interface ToastOptions {
   /** Explicit toast id. Reusing an active id updates that toast in place (upsert-style), preserving position/animation state. */
   id?: string;
   /** Prefix used when ids are generated automatically. */
@@ -48,11 +48,11 @@ export interface ToastOptions {
   /** Pause auto-close while the document is hidden. */
   pauseOnFocusLoss?: boolean;
   /** Enable drag-to-dismiss gestures and optionally limit pointer types. */
-  dragToClose?: boolean | "mouse" | "pen" | "touch";
+  dragToClose?: ToastDragOption;
   /** Percentage threshold needed to dismiss by drag. */
   dragToClosePercent?: number | { x?: number; y?: number };
   /** Axis or direction filter used by the drag gesture system. */
-  dragToCloseDir?: ToastDragDir;
+  dragToCloseDir?: ToastDragDirection;
   /** When true and `tag` is provided, any other active toast with the same tag is removed before this toast renders. */
   renotify?: boolean;
   /** Arbitrary tag used for grouping and renotify matching. Does not update by itself; pair with `renotify` to enforce one-toast-per-tag behavior. */
@@ -71,11 +71,13 @@ export interface ToastOptions {
   onClose?: (timeElapsed?: boolean | false) => void;
   /** Callback fired as the toast auto-close timer advances. */
   onTimeUpdate?: (timeVisible: number) => void;
+  /** Abort signal to control the toast's lifecycle and timeout aborts. */
+  signal?: AbortSignal;
   // [key: string]: any; // To allow arbitrary overrides internally if needed
 }
 
 /** Live toast instance returned by the runtime. */
-export interface ToastInstance {
+interface ToastInstance {
   /** Current option bag applied to the instance. */
   opts: ToastOptions;
   /** Pending timeouts waiting to apply queued updates. */
@@ -103,17 +105,19 @@ export interface ToastInstance {
    * @param timeElapsed Whether the auto-close timer already elapsed.
    */
   remove(manner?: "smooth" | "instant", timeElapsed?: boolean): void;
+  /** Dismiss the toast immediately without any exit animation. */
+  abort(): void;
 }
 
 /** Promise state configuration used by toast.promise. */
-export interface ToastPromiseState<T = any> extends Omit<ToastOptions, "render" | "bodyHTML"> {
+interface ToastPromiseState<T = any> extends Omit<ToastOptions, "render" | "bodyHTML"> {
   /** Render text for the promise state. */
   render?: string | ((response: T) => string);
   /** Render HTML for the promise state. */
   bodyHTML?: string | ((response: T) => string);
 }
 /** Configuration object accepted by toast.promise. */
-export interface ToastPromiseConfig<T = any> {
+interface ToastPromiseConfig<T = any> {
   /** Pending-state text or options. */
   pending?: string | ToastOptions;
   /** Success-state text or options. */
@@ -123,7 +127,7 @@ export interface ToastPromiseConfig<T = any> {
 }
 
 /** Public toast API exposed to consumers. */
-export interface Toast {
+interface Toast {
   /** Create a default toast.
    * @param render Body text for the toast.
    * @param options Toast configuration.
@@ -201,7 +205,7 @@ export interface Toast {
 }
 
 /** Helper methods used internally by toaster() and promise flows. */
-export interface Toasting {
+interface Toasting {
   isActive(base: Toast, id: string): boolean;
   update(base: Toast, id: string, options: ToastOptions): boolean | string;
   message(base: Toast, getDefaults: () => ToastOptions, action: string, renderOrId: string, options?: ToastOptions): string;
@@ -216,16 +220,22 @@ export interface Toasting {
 // BUNDLE EXPORTS & GLOBAL DECLARATIONS
 
 /** Internal helper methods used by the toast factory. */
-export const toasting: Toasting;
+declare const toasting: Toasting;
 /** Create a toast factory with custom defaults and a group id.
  * @param defOptions Default options merged into every toast.
  * @param groupId Prefix applied to generated ids.
  * @returns Toast factory.
  */
-export function toaster(defOptions?: ToastOptions, groupId?: string): Toast;
+declare function toaster(defOptions?: ToastOptions, groupId?: string): Toast;
 /** Default toast factory instance attached by the bundle. */
 declare const toast: Toast;
-export default toast;
+
+
+declare const TOAST_UI_POSITIONS: { value: ToastPosition; display: string }[];
+declare const TOAST_UI_ANIMATIONS: { value: ToastAnimation; display: string }[];
+declare const TOAST_UI_TYPES: { value: ToastType; display: string }[];
+declare const TOAST_UI_DRAG_OPTIONS: { value: ToastDragOption; display: string }[];
+declare const TOAST_UI_DRAG_DIRECTIONS: { value: ToastDragDirection; display: string }[];
 
 declare global {
   interface T007Namespace {
@@ -245,8 +255,15 @@ declare global {
     TOAST_VIBRATIONS: Record<ToastType, number[]>;
     /** Default SVG icons by toast type. */
     TOAST_ICONS: Record<ToastType | "loading", string>;
+    TOAST_UI_POSITIONS: typeof TOAST_UI_POSITIONS;
+    TOAST_UI_ANIMATIONS: typeof TOAST_UI_ANIMATIONS;
+    TOAST_UI_TYPES: typeof TOAST_UI_TYPES;
+    TOAST_UI_DRAG_OPTS: typeof TOAST_UI_DRAG_OPTIONS;
+    TOAST_UI_DRAG_DIRS: typeof TOAST_UI_DRAG_DIRECTIONS;
   }
   interface Window {
     toast?: Toast;
   }
 }
+
+export { TOAST_UI_ANIMATIONS, TOAST_UI_DRAG_DIRECTIONS, TOAST_UI_DRAG_OPTIONS, TOAST_UI_POSITIONS, TOAST_UI_TYPES, type Toast, type ToastAnimation, type ToastDragDirection, type ToastDragOption, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseConfig, type ToastPromiseState, type ToastType, type Toasting, toast as default, toaster, toasting };

package/dist/index.global.js

@@ -4,8 +4,16 @@
   function clamp(min = 0, val, max = Infinity) {
     return Math.min(Math.max(val, min), max);
   }
+  function setTimeout2(handler, timeout, ...args) {
+    const sig = args[0] instanceof AbortSignal ? args.shift() : void 0;
+    if (sig?.aborted) return -1;
+    const win = args[0] instanceof Window ? args.shift() : window;
+    if (!sig) return win.setTimeout(handler, timeout, ...args);
+    const id = win.setTimeout(() => (sig.removeEventListener("abort", kill), "string" === typeof handler ? new Function(handler) : handler(...args)), timeout), kill = () => win.clearTimeout(id);
+    return sig.addEventListener("abort", kill, { once: true }), id;
+  }
 
-  // ../../../sia-reactor/dist/chunk-243U74PP.js
+  // ../../../sia-reactor/dist/chunk-ORK3EGB6.js
   function onAllMethods(owner, callback, skipOwn = true, nested = false) {
     let proto = owner;
     while (proto && proto !== Object.prototype) {
@@ -25,50 +33,40 @@
   function createEl(tag, props, dataset, styles, el = tag ? document?.createElement(tag) : null) {
     return assignEl(el, props, dataset, styles);
   }
-  function assignEl(el, props, dataset, styles) {
+  function assignEl(el, props, dataset, styles, nodiff = true) {
     if (!el) return null;
     if (props) {
-      for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
+      for (const k of Object.keys(props)) if (props[k] !== void 0) {
+        if (nodiff || el[k] !== props[k]) el[k] = props[k];
+      }
     }
     if (dataset) {
-      for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
+      for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) {
+        if (nodiff || el.dataset[k] !== dataset[k]) el.dataset[k] = String(dataset[k]);
+      }
     }
     if (styles) {
-      for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
+      for (const k of Object.keys(styles)) if (styles[k] !== void 0) {
+        if (nodiff || el.style[k] !== styles[k]) el.style[k] = styles[k];
+      }
     }
     return el;
   }
 
-  // ../../../sia-reactor/dist/chunk-2ZYYYSZ4.js
+  // ../../../sia-reactor/dist/chunk-SHWIAQD2.js
   var RTR_BATCH = "undefined" !== typeof window ? ("undefined" !== typeof queueMicrotask ? queueMicrotask : setTimeout).bind(window) : "undefined" !== typeof process && process.nextTick ? process.nextTick : setTimeout;
   var RTR_LOG = console.log.bind(console, "[S.I.A Reactor]");
   var NIL = Object.freeze({});
-  var CTX = {
-    /** Flag indicating whether the application is running in development mode. */
-    isDevEnv: "undefined" !== typeof process ? process.env.NODE_ENV !== "production" : true,
-    /** Flag indicating whether an operation is bypassing checks so reactors can allow all writes. */
-    usingForce: false,
-    /** Active `Autotracker` instance, override for automatic dependency collection on `Reactor` traps. */
-    autotracker: null,
-    /** Extensible meta context for payloads and cross-cutting concerns. */
-    meta: null,
-    /** Default configuration for new `Reactor` instances and also fallback for utils that need and are called without these options. */
-    defaults: {
-      crossRealms: false,
-      smartCloning: false,
-      eventBubbling: true,
-      eventCapturing: "auto",
-      lineageTracing: false,
-      preserveContext: false,
-      equalityFunction: Object.is,
-      batchingFunction: RTR_BATCH
-    }
-  };
+  var isDevEnv = false;
+  try {
+    isDevEnv = process.env.NODE_ENV !== "production";
+  } catch (e) {
+  }
   function isObj(obj, arraycheck = true) {
     return "object" === typeof obj && obj !== null && (arraycheck ? !Array.isArray(obj) : true);
   }
 
-  // ../utils/dist/chunk-HGUYOV3P.js
+  // ../utils/dist/chunk-ZALPHCSJ.js
   var INTERACTIVE_SELECTOR = ":is(button,[href],input:not([type='hidden']),select,textarea,details>summary,[contenteditable],iframe,audio[controls],video[controls],[tabindex]):not([disabled],[tabindex='-1'],[data-focus-guard],[inert],[inert] *)";
   var isInteractive = (target) => target instanceof HTMLElement && target.matches(INTERACTIVE_SELECTOR);
   var VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
@@ -133,6 +131,11 @@
     if (!isStr(url1) || !isStr(url2) || !url1 || !url2) return false;
     return cleanURL(url1) === cleanURL(url2);
   }
+  function bindCleanupToSignal(cleanup, signal) {
+    signal?.aborted ? cleanup() : signal?.addEventListener("abort", cleanup, { once: true });
+    if (signal && !signal.aborted) cleanup = (() => (signal.removeEventListener("abort", cleanup), cleanup()));
+    return cleanup;
+  }
   if ("undefined" !== typeof window) {
     (window.t007 ??= {}).VIRTUAL_RESOURCE = VIRTUAL_RESOURCE;
     window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
@@ -156,10 +159,10 @@
     inactive = true;
     #visiblityChange = () => this.#shouldUnPause = document.visibilityState === "visible";
     constructor(options) {
-      bindAllMethods(this);
+      bindAllMethods(this), bindCleanupToSignal(this.abort, options.signal);
       this.opts = options;
       t007.toasts.set(this.opts.id ??= uid(this.opts.groupId ??= "t007_toast_"), this);
-      !isNum(this.opts.delay) ? this.activate() : this.queue.push(setTimeout(this.activate, this.opts.delay));
+      !isNum(this.opts.delay) ? this.activate() : this.queue.push(setTimeout2(this.activate, this.opts.delay, this.opts.signal));
       this.update(this.opts);
     }
     activate() {
@@ -170,16 +173,17 @@
     update(options, constructed = this.#constructed) {
       if (!options || !isObj(options) || constructed && this.inactive) return this.opts.id;
       try {
+        if (constructed) options.signal !== this.opts.signal && (this.opts.signal.removeEventListener("abort", this.abort), bindCleanupToSignal(this.abort, this.opts.signal));
         this.opts = { ...this.opts, ...options };
         const run = () => (Object.keys(options).forEach((key) => this[key] = options[key]), this.#constructed = true, !constructed && (this.position = this.opts.position));
-        !isNum(this.opts.delay) ? run() : this.queue.push(setTimeout(run, this.opts.delay));
+        !isNum(this.opts.delay) ? run() : this.queue.push(setTimeout2(run, this.opts.delay, this.opts.signal));
         this.opts.delay = null;
       } catch (err) {
         console.error("t007 toast update failed:", err);
       }
       return this.opts.id;
     }
-    play = () => setTimeout(() => this.#isPaused = false);
+    play = () => setTimeout2(() => this.#isPaused = false, 0, this.opts.signal);
     pause = () => this.#isPaused = true;
     get rootElement() {
       return this.opts.rootElement ?? document.body;
@@ -301,7 +305,7 @@
     set position(value) {
       if (!this.#constructed) return;
       const currContainer = this.toastElement.parentElement, container = this.rootElement.querySelector(`:scope > .t007-toast-container[data-position="${value}"]`) || this._createContainer(value);
-      container[this.opts.newestOnTop ? "prepend" : "append"](this.toastElement);
+      !container.contains(this.toastElement) && container[this.opts.newestOnTop ? "prepend" : "append"](this.toastElement);
       this.toastElement.classList.toggle("t007-toast-scoped", this.scoped);
       if (!(currContainer == null || currContainer.hasChildNodes())) currContainer.remove();
     }
@@ -337,7 +341,7 @@
     }
     set renotify(value) {
       if (value && this.opts.tag) {
-        for (const toast2 of t007.toasts.values()) if (toast2.opts.tag === this.opts.tag && toast2.opts.id !== this.opts.id) toast2.remove("instant");
+        for (const toast2 of t007.toasts.values()) if (toast2.opts.tag === this.opts.tag && toast2.opts.id !== this.opts.id) toast2.abort();
       }
     }
     get vibrate() {
@@ -349,7 +353,7 @@
     set limit(value) {
       const toastsInContainer = [...this.toastElement?.parentElement?.children || []];
       if (!toastsInContainer.length) return;
-      for (let i = 0; i < toastsInContainer.length - value; i++) [...t007.toasts.values()].find((t) => t.toastElement === (this.opts.newestOnTop ? toastsInContainer[toastsInContainer.length - 1 - i] : toastsInContainer[i]))?.remove("instant");
+      for (let i = 0; i < toastsInContainer.length - value; i++) [...t007.toasts.values()].find((t) => t.toastElement === (this.opts.newestOnTop ? toastsInContainer[toastsInContainer.length - 1 - i] : toastsInContainer[i]))?.abort();
     }
     set newestOnTop(value) {
       this.toastElement?.parentElement?.[value ? "prepend" : "append"](this.toastElement);
@@ -392,7 +396,7 @@
     _handleToastPointerUp(e) {
       if (isStr(this._ptrType) && e.pointerType !== this._ptrType) return;
       cancelAnimationFrame(this._ptrRAF);
-      if (Math.abs(this._ptrDeltaX) > this.toastElement.offsetWidth * ((this.opts.dragToClosePercent.x ?? this.opts.dragToClosePercent) / 100) || Math.abs(this._ptrDeltaY) > this.toastElement.offsetHeight * ((this.opts.dragToClosePercent.y ?? this.opts.dragToClosePercent) / 100)) return this.remove("instant");
+      if (Math.abs(this._ptrDeltaX) > this.toastElement.offsetWidth * ((this.opts.dragToClosePercent.x ?? this.opts.dragToClosePercent) / 100) || Math.abs(this._ptrDeltaY) > this.toastElement.offsetHeight * ((this.opts.dragToClosePercent.y ?? this.opts.dragToClosePercent) / 100)) return this.abort();
       this.#isPaused = this._ptrTicker = this._ptrDirSet = this._ptrDir = false;
       this.toastElement.removeEventListener("pointermove", this._handleToastPointerMove, { passive: false });
       for (const prop of ["transition", "transform", "opacity"]) this.toastElement.style.removeProperty(prop);
@@ -407,6 +411,7 @@
       this.toastElement.classList.remove("t007-toast-show");
       this.onClose?.(timeElapsed);
     }
+    abort = () => this.remove("instant", false);
     _createContainer(position) {
       const container = createEl("div", { className: "t007-toast-container" }, { position });
       container.style.setProperty("--t007-toast-container-position", !this.scoped ? "fixed" : "absolute");
@@ -432,7 +437,8 @@
     update(base, id, options, _toast) {
       const toast2 = _toast ?? t007.toasts.get(id);
       if (toast2?.queue) for (const tid of toast2.queue) clearTimeout(tid);
-      return toast2 && (toast2.inactive ? base(options.render, { ...toast2.opts, id, ...options }) : toast2.update(options));
+      if (toast2 && toast2.inactive) return t007.toasts.delete(id), base(options.render, { ...toast2.opts, id, ...options });
+      return toast2 && toast2.update(options);
     },
     message: (base, getDefaults, action, renderOrId, options = {}) => {
       options = { ...options, type: action === "warn" ? "warning" : action };
@@ -445,7 +451,7 @@
       const id = options.id ?? renderOrId, toast2 = t007.toasts.get(id);
       return (toast2 ? base.update : base)(id, { closeButton: false, closeOnClick: false, dragToClose: false, ...options.id ? { render: renderOrId } : null, autoClose: false, ...options, isLoading: options.isLoading || true, type: "" }, toast2 || void 0);
     },
-    promise(base, promise = new Promise((res, rej) => setTimeout(Math.round(Math.random()) ? res : rej, 3e3)), { pending, success, error } = {}) {
+    promise(base, promise = new Promise((res, rej) => setTimeout2(Math.round(Math.random()) ? res : rej, 3e3)), { pending, success, error } = {}) {
       if (!promise || !isFunc(promise.then)) return console.error("toast.promise() requires a valid promise");
       const NFC = (input, type) => isStr(input) ? { render: input, type } : isObj(input) ? { ...input, type } : { type };
       const pendingCfg = NFC(pending);
@@ -484,7 +490,7 @@
     }
   };
   var toaster = (defOptions = {}, groupId = "t007_toast_") => {
-    const getDefaults = () => ({ ...t007.TOAST_DEFAULT_OPTIONS, ...defOptions }), base = (render, options = {}, mayBeId = render?.startsWith?.(groupId)) => new T007_Toast({ ...getDefaults(), ...options, id: mayBeId ? render : options.id, render: mayBeId ? options.render : render, groupId }).opts.id;
+    const getDefaults = () => ({ ...t007.TOAST_DEFAULT_OPTIONS, ...defOptions }), base = (renderOrId, options = {}, mayBeId = renderOrId?.startsWith?.(groupId), render = mayBeId ? options.render : renderOrId, id = mayBeId ? renderOrId : options.id, toast2 = t007.toasts.get(id)) => toast2 ? toasting.update(base, id, { ...options, render }, toast2) : new T007_Toast({ ...getDefaults(), ...options, id, render, groupId }).opts.id;
     base.isActive = (id) => toasting.isActive(base, id);
     base.update = (id, options, _toast) => toasting.update(base, id, options, _toast);
     for (const action of ["info", "success", "warn", "error"]) base[action] = (renderOrId, options) => toasting.message(base, getDefaults, action, renderOrId, options);
@@ -498,10 +504,15 @@
   };
   var toast = toaster();
   var index_default = toast;
+  var TOAST_UI_POSITIONS = [{ value: "top-left", display: "Top Left" }, { value: "top-center", display: "Top Center" }, { value: "top-right", display: "Top Right" }, { value: "center-left", display: "Center Left" }, { value: "center-center", display: "Center Center" }, { value: "center-right", display: "Center Right" }, { value: "bottom-left", display: "Bottom Left" }, { value: "bottom-center", display: "Bottom Center" }, { value: "bottom-right", display: "Bottom Right" }];
+  var TOAST_UI_ANIMATIONS = [{ value: "fade", display: "Fade" }, { value: "zoom", display: "Zoom" }, { value: "slide", display: "Slide" }, { value: "slide-left", display: "Slide Left" }, { value: "slide-right", display: "Slide Right" }, { value: "slide-up", display: "Slide Up" }, { value: "slide-down", display: "Slide Down" }];
+  var TOAST_UI_TYPES = [{ value: void 0, display: "None" }, { value: "info", display: "Info" }, { value: "success", display: "Success" }, { value: "warning", display: "Warning" }, { value: "error", display: "Error" }];
+  var TOAST_UI_DRAG_OPTIONS = [{ value: true, display: "On" }, { value: "mouse", display: "Mouse" }, { value: "touch", display: "Touch" }, { value: "pen", display: "Pen" }, { value: false, display: "Off" }];
+  var TOAST_UI_DRAG_DIRECTIONS = [{ value: "x", display: "Horizontal" }, { value: "y", display: "Vertical" }, { value: "xy", display: "Horizontal and Vertical" }, { value: "x|y", display: "Horizontal or Vertical" }, { value: "x||y", display: "Horizontal or Vertical (Locked)" }, { value: "x+", display: "Right" }, { value: "x-", display: "Left" }, { value: "y+", display: "Down" }, { value: "y-", display: "Up" }, { value: "xy+", display: "Right and Down" }, { value: "xy-", display: "Left and Up" }, { value: "x|y+", display: "Right or Down" }, { value: "x|y-", display: "Left or Up" }, { value: "x||y+", display: "Right or Down (Locked)" }, { value: "x||y-", display: "Left or Up (Locked)" }];
   if ("undefined" !== typeof window) {
     t007.toast = toast, t007.toasting = toasting, t007.toaster = toaster;
     t007.toasts = /* @__PURE__ */ new Map();
-    t007.TOAST_DEFAULT_OPTIONS ??= {}, t007.TOAST_DURATIONS ??= {}, t007.TOAST_VIBRATIONS ??= {}, t007.TOAST_ICONS ??= {};
+    t007.TOAST_DEFAULT_OPTIONS ??= {}, t007.TOAST_DURATIONS ??= {}, t007.TOAST_VIBRATIONS ??= {}, t007.TOAST_ICONS ??= {}, t007.T0AST_UI_POSITIONS = TOAST_UI_POSITIONS, t007.TOAST_UI_ANIMATIONS = TOAST_UI_ANIMATIONS, t007.TOAST_UI_TYPES = TOAST_UI_TYPES, t007.TOAST_UI_DRAG_OPTIONS = TOAST_UI_DRAG_OPTIONS, t007.TOAST_UI_DRAG_DIRECTIONS = TOAST_UI_DRAG_DIRECTIONS;
     t007.TOAST_DEFAULT_OPTIONS.render ??= "";
     t007.TOAST_DEFAULT_OPTIONS.type ??= "";
     t007.TOAST_DEFAULT_OPTIONS.icon ??= true;

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/js/index.js
-import { isStr, isNum, isObj, isFunc, clamp, uid, bindAllMethods, isInteractive, createEl, loadResource, isDef } from "@t007/utils";
+import { isStr, isNum, isObj, isFunc, clamp, uid, bindAllMethods, isInteractive, createEl, loadResource, isDef, setTimeout, bindCleanupToSignal } from "@t007/utils";
 var T007_Toast = class {
   #constructed = false;
   // to minimize updates
@@ -12,10 +12,10 @@ var T007_Toast = class {
   inactive = true;
   #visiblityChange = () => this.#shouldUnPause = document.visibilityState === "visible";
   constructor(options) {
-    bindAllMethods(this);
+    bindAllMethods(this), bindCleanupToSignal(this.abort, options.signal);
     this.opts = options;
     t007.toasts.set(this.opts.id ??= uid(this.opts.groupId ??= "t007_toast_"), this);
-    !isNum(this.opts.delay) ? this.activate() : this.queue.push(setTimeout(this.activate, this.opts.delay));
+    !isNum(this.opts.delay) ? this.activate() : this.queue.push(setTimeout(this.activate, this.opts.delay, this.opts.signal));
     this.update(this.opts);
   }
   activate() {
@@ -26,16 +26,17 @@ var T007_Toast = class {
   update(options, constructed = this.#constructed) {
     if (!options || !isObj(options) || constructed && this.inactive) return this.opts.id;
     try {
+      if (constructed) options.signal !== this.opts.signal && (this.opts.signal.removeEventListener("abort", this.abort), bindCleanupToSignal(this.abort, this.opts.signal));
       this.opts = { ...this.opts, ...options };
       const run = () => (Object.keys(options).forEach((key) => this[key] = options[key]), this.#constructed = true, !constructed && (this.position = this.opts.position));
-      !isNum(this.opts.delay) ? run() : this.queue.push(setTimeout(run, this.opts.delay));
+      !isNum(this.opts.delay) ? run() : this.queue.push(setTimeout(run, this.opts.delay, this.opts.signal));
       this.opts.delay = null;
     } catch (err) {
       console.error("t007 toast update failed:", err);
     }
     return this.opts.id;
   }
-  play = () => setTimeout(() => this.#isPaused = false);
+  play = () => setTimeout(() => this.#isPaused = false, 0, this.opts.signal);
   pause = () => this.#isPaused = true;
   get rootElement() {
     return this.opts.rootElement ?? document.body;
@@ -157,7 +158,7 @@ var T007_Toast = class {
   set position(value) {
     if (!this.#constructed) return;
     const currContainer = this.toastElement.parentElement, container = this.rootElement.querySelector(`:scope > .t007-toast-container[data-position="${value}"]`) || this._createContainer(value);
-    container[this.opts.newestOnTop ? "prepend" : "append"](this.toastElement);
+    !container.contains(this.toastElement) && container[this.opts.newestOnTop ? "prepend" : "append"](this.toastElement);
     this.toastElement.classList.toggle("t007-toast-scoped", this.scoped);
     if (!(currContainer == null || currContainer.hasChildNodes())) currContainer.remove();
   }
@@ -193,7 +194,7 @@ var T007_Toast = class {
   }
   set renotify(value) {
     if (value && this.opts.tag) {
-      for (const toast2 of t007.toasts.values()) if (toast2.opts.tag === this.opts.tag && toast2.opts.id !== this.opts.id) toast2.remove("instant");
+      for (const toast2 of t007.toasts.values()) if (toast2.opts.tag === this.opts.tag && toast2.opts.id !== this.opts.id) toast2.abort();
     }
   }
   get vibrate() {
@@ -205,7 +206,7 @@ var T007_Toast = class {
   set limit(value) {
     const toastsInContainer = [...this.toastElement?.parentElement?.children || []];
     if (!toastsInContainer.length) return;
-    for (let i = 0; i < toastsInContainer.length - value; i++) [...t007.toasts.values()].find((t) => t.toastElement === (this.opts.newestOnTop ? toastsInContainer[toastsInContainer.length - 1 - i] : toastsInContainer[i]))?.remove("instant");
+    for (let i = 0; i < toastsInContainer.length - value; i++) [...t007.toasts.values()].find((t) => t.toastElement === (this.opts.newestOnTop ? toastsInContainer[toastsInContainer.length - 1 - i] : toastsInContainer[i]))?.abort();
   }
   set newestOnTop(value) {
     this.toastElement?.parentElement?.[value ? "prepend" : "append"](this.toastElement);
@@ -248,7 +249,7 @@ var T007_Toast = class {
   _handleToastPointerUp(e) {
     if (isStr(this._ptrType) && e.pointerType !== this._ptrType) return;
     cancelAnimationFrame(this._ptrRAF);
-    if (Math.abs(this._ptrDeltaX) > this.toastElement.offsetWidth * ((this.opts.dragToClosePercent.x ?? this.opts.dragToClosePercent) / 100) || Math.abs(this._ptrDeltaY) > this.toastElement.offsetHeight * ((this.opts.dragToClosePercent.y ?? this.opts.dragToClosePercent) / 100)) return this.remove("instant");
+    if (Math.abs(this._ptrDeltaX) > this.toastElement.offsetWidth * ((this.opts.dragToClosePercent.x ?? this.opts.dragToClosePercent) / 100) || Math.abs(this._ptrDeltaY) > this.toastElement.offsetHeight * ((this.opts.dragToClosePercent.y ?? this.opts.dragToClosePercent) / 100)) return this.abort();
     this.#isPaused = this._ptrTicker = this._ptrDirSet = this._ptrDir = false;
     this.toastElement.removeEventListener("pointermove", this._handleToastPointerMove, { passive: false });
     for (const prop of ["transition", "transform", "opacity"]) this.toastElement.style.removeProperty(prop);
@@ -263,6 +264,7 @@ var T007_Toast = class {
     this.toastElement.classList.remove("t007-toast-show");
     this.onClose?.(timeElapsed);
   }
+  abort = () => this.remove("instant", false);
   _createContainer(position) {
     const container = createEl("div", { className: "t007-toast-container" }, { position });
     container.style.setProperty("--t007-toast-container-position", !this.scoped ? "fixed" : "absolute");
@@ -288,7 +290,8 @@ var toasting = {
   update(base, id, options, _toast) {
     const toast2 = _toast ?? t007.toasts.get(id);
     if (toast2?.queue) for (const tid of toast2.queue) clearTimeout(tid);
-    return toast2 && (toast2.inactive ? base(options.render, { ...toast2.opts, id, ...options }) : toast2.update(options));
+    if (toast2 && toast2.inactive) return t007.toasts.delete(id), base(options.render, { ...toast2.opts, id, ...options });
+    return toast2 && toast2.update(options);
   },
   message: (base, getDefaults, action, renderOrId, options = {}) => {
     options = { ...options, type: action === "warn" ? "warning" : action };
@@ -340,7 +343,7 @@ var toasting = {
   }
 };
 var toaster = (defOptions = {}, groupId = "t007_toast_") => {
-  const getDefaults = () => ({ ...t007.TOAST_DEFAULT_OPTIONS, ...defOptions }), base = (render, options = {}, mayBeId = render?.startsWith?.(groupId)) => new T007_Toast({ ...getDefaults(), ...options, id: mayBeId ? render : options.id, render: mayBeId ? options.render : render, groupId }).opts.id;
+  const getDefaults = () => ({ ...t007.TOAST_DEFAULT_OPTIONS, ...defOptions }), base = (renderOrId, options = {}, mayBeId = renderOrId?.startsWith?.(groupId), render = mayBeId ? options.render : renderOrId, id = mayBeId ? renderOrId : options.id, toast2 = t007.toasts.get(id)) => toast2 ? toasting.update(base, id, { ...options, render }, toast2) : new T007_Toast({ ...getDefaults(), ...options, id, render, groupId }).opts.id;
   base.isActive = (id) => toasting.isActive(base, id);
   base.update = (id, options, _toast) => toasting.update(base, id, options, _toast);
   for (const action of ["info", "success", "warn", "error"]) base[action] = (renderOrId, options) => toasting.message(base, getDefaults, action, renderOrId, options);
@@ -354,10 +357,15 @@ var toaster = (defOptions = {}, groupId = "t007_toast_") => {
 };
 var toast = toaster();
 var index_default = toast;
+var TOAST_UI_POSITIONS = [{ value: "top-left", display: "Top Left" }, { value: "top-center", display: "Top Center" }, { value: "top-right", display: "Top Right" }, { value: "center-left", display: "Center Left" }, { value: "center-center", display: "Center Center" }, { value: "center-right", display: "Center Right" }, { value: "bottom-left", display: "Bottom Left" }, { value: "bottom-center", display: "Bottom Center" }, { value: "bottom-right", display: "Bottom Right" }];
+var TOAST_UI_ANIMATIONS = [{ value: "fade", display: "Fade" }, { value: "zoom", display: "Zoom" }, { value: "slide", display: "Slide" }, { value: "slide-left", display: "Slide Left" }, { value: "slide-right", display: "Slide Right" }, { value: "slide-up", display: "Slide Up" }, { value: "slide-down", display: "Slide Down" }];
+var TOAST_UI_TYPES = [{ value: void 0, display: "None" }, { value: "info", display: "Info" }, { value: "success", display: "Success" }, { value: "warning", display: "Warning" }, { value: "error", display: "Error" }];
+var TOAST_UI_DRAG_OPTIONS = [{ value: true, display: "On" }, { value: "mouse", display: "Mouse" }, { value: "touch", display: "Touch" }, { value: "pen", display: "Pen" }, { value: false, display: "Off" }];
+var TOAST_UI_DRAG_DIRECTIONS = [{ value: "x", display: "Horizontal" }, { value: "y", display: "Vertical" }, { value: "xy", display: "Horizontal and Vertical" }, { value: "x|y", display: "Horizontal or Vertical" }, { value: "x||y", display: "Horizontal or Vertical (Locked)" }, { value: "x+", display: "Right" }, { value: "x-", display: "Left" }, { value: "y+", display: "Down" }, { value: "y-", display: "Up" }, { value: "xy+", display: "Right and Down" }, { value: "xy-", display: "Left and Up" }, { value: "x|y+", display: "Right or Down" }, { value: "x|y-", display: "Left or Up" }, { value: "x||y+", display: "Right or Down (Locked)" }, { value: "x||y-", display: "Left or Up (Locked)" }];
 if ("undefined" !== typeof window) {
   t007.toast = toast, t007.toasting = toasting, t007.toaster = toaster;
   t007.toasts = /* @__PURE__ */ new Map();
-  t007.TOAST_DEFAULT_OPTIONS ??= {}, t007.TOAST_DURATIONS ??= {}, t007.TOAST_VIBRATIONS ??= {}, t007.TOAST_ICONS ??= {};
+  t007.TOAST_DEFAULT_OPTIONS ??= {}, t007.TOAST_DURATIONS ??= {}, t007.TOAST_VIBRATIONS ??= {}, t007.TOAST_ICONS ??= {}, t007.T0AST_UI_POSITIONS = TOAST_UI_POSITIONS, t007.TOAST_UI_ANIMATIONS = TOAST_UI_ANIMATIONS, t007.TOAST_UI_TYPES = TOAST_UI_TYPES, t007.TOAST_UI_DRAG_OPTIONS = TOAST_UI_DRAG_OPTIONS, t007.TOAST_UI_DRAG_DIRECTIONS = TOAST_UI_DRAG_DIRECTIONS;
   t007.TOAST_DEFAULT_OPTIONS.render ??= "";
   t007.TOAST_DEFAULT_OPTIONS.type ??= "";
   t007.TOAST_DEFAULT_OPTIONS.icon ??= true;
@@ -390,6 +398,11 @@ if ("undefined" !== typeof window) {
   console.log("%cT007 Toasts attached to window!", "color: darkturquoise");
 }
 export {
+  TOAST_UI_ANIMATIONS,
+  TOAST_UI_DRAG_DIRECTIONS,
+  TOAST_UI_DRAG_OPTIONS,
+  TOAST_UI_POSITIONS,
+  TOAST_UI_TYPES,
   index_default as default,
   toaster,
   toasting

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t007/toast",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "A lightweight, pure JS toast system.",
   "author": "Oketade Oluwatobiloba <tobioketade007@gmail.com>",
   "license": "MIT",
@@ -55,7 +55,7 @@
     "promise"
   ],
   "dependencies": {
-    "@t007/utils": "^0.0.34"
+    "@t007/utils": "^0.0.35"
   },
   "devDependencies": {
     "esbuild-sass-plugin": "^3.7.0"