tiny-essentials 1.10.2 → 1.11.0

package/dist/{TinyEssentials.js → v1/TinyEssentials.js}

@@ -2144,8 +2144,10 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
   ColorSafeStringify: () => (/* reexport */ libs_ColorSafeStringify),
   TinyLevelUp: () => (/* reexport */ userLevel),
+  TinyNotifyCenter: () => (/* reexport */ libs_TinyNotifyCenter),
   TinyPromiseQueue: () => (/* reexport */ libs_TinyPromiseQueue),
   TinyRateLimiter: () => (/* reexport */ libs_TinyRateLimiter),
+  TinyToastNotify: () => (/* reexport */ libs_TinyToastNotify),
   addAiMarkerShortcut: () => (/* reexport */ addAiMarkerShortcut),
   arraySortPositions: () => (/* reexport */ arraySortPositions),
   asyncReplace: () => (/* reexport */ asyncReplace),
@@ -4331,6 +4333,806 @@ class TinyRateLimiter {
 
 /* harmony default export */ const libs_TinyRateLimiter = (TinyRateLimiter);
 
+;// ./src/v1/libs/TinyNotifyCenter.mjs
+/**
+ * Represents a single notification entry.
+ *
+ * A notification can be provided as a simple string (treated as a plain message),
+ * or as an object with additional data such as a title, an avatar image, and a click handler.
+ *
+ * @typedef {string | {
+ *   title?: string,              // Optional title displayed above the message
+ *   message: string,             // Required message content
+ *   avatar?: string,             // Optional avatar image URL (displayed on the left)
+ *   onClick?: (e: MouseEvent) => void // Optional click handler for the entire notification
+ * }} NotifyData
+ */
+
+/**
+ * A notification center component for displaying interactive alerts in the UI.
+ *
+ * This class renders a notification overlay on the page and allows dynamically
+ * adding, clearing, or interacting with notification items. Notifications can
+ * contain plain text or HTML, and optionally support click events, titles, and avatars.
+ *
+ * Features:
+ * - Dynamic rendering of notification UI with `insertTemplate()`
+ * - Supports text and HTML content modes
+ * - Optional avatars for each notification
+ * - Callback support on notification click
+ * - Per-notification close buttons
+ * - Notification count badge
+ *
+ * @class
+ */
+class TinyNotifyCenter {
+  /**
+   * Returns the full HTML structure for the notification system as a string.
+   *
+   * This includes:
+   * - A hidden `.notify-overlay` containing the central notification panel (`#notifCenter`),
+   *   which has a header with a "Notifications" label, a "clear all" button, and a close button.
+   * - A `.list` container for dynamically added notifications.
+   * - A bell button (`.notify-bell`) to toggle the notification center, with an embedded badge.
+   *
+   * This template can be inserted into the DOM using `insertAdjacentHTML()` or parsed dynamically
+   * into elements using JavaScript or jQuery, depending on the needs of the system.
+   *
+   * @returns {string} The complete HTML structure for the notification center.
+   */
+  static getTemplate() {
+    return `
+<div class="notify-overlay hidden">
+  <div class="notify-center" id="notifCenter">
+    <div class="header">
+      <div>Notifications</div>
+      <div class="options">
+        <button class="clear-all" type="button">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            fill="currentColor"
+          >
+            <path
+              d="M21.6 2.4a1 1 0 0 0-1.4 0L13 9.6l-1.3-1.3a1 1 0 0 0-1.4 0L3 15.6a1 1 0 0 0 0 1.4l4 4a1 1 0 0 0 1.4 0l7.3-7.3a1 1 0 0 0 0-1.4l-1.3-1.3 7.2-7.2a1 1 0 0 0 0-1.4zM6 17l3.5-3.5 1.5 1.5L7.5 18.5 6 17z"
+            />
+          </svg>
+        </button>
+        <button class="close">×</button>
+      </div>
+    </div>
+    <div class="list"></div>
+  </div>
+</div>
+
+<button class="notify-bell" aria-label="Open notifications">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M12 2C10.3 2 9 3.3 9 5v1.1C6.7 7.2 5 9.4 5 12v5l-1 1v1h16v-1l-1-1v-5c0-2.6-1.7-4.8-4-5.9V5c0-1.7-1.3-3-3-3zm0 20c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2z"
+    />
+  </svg>
+  <span class="badge" id="notifBadge">0</span>
+</button>
+    `;
+  }
+
+  /**
+   * Inserts the full notification center template into the document body.
+   *
+   * The structure is injected directly into the DOM using
+   * `insertAdjacentHTML`.
+   *
+   * The `where` parameter allows control over where inside the `document.body`
+   * the HTML is inserted:
+   * - `'afterbegin'` (default): Inserts right after the opening <body> tag.
+   * - `'beforeend'`: Inserts right before the closing </body> tag.
+   * - Any valid position accepted by `insertAdjacentHTML`.
+   *
+   * @param {'beforebegin'|'afterbegin'|'beforeend'|'afterend'} [where='afterbegin']
+   * The position relative to `document.body` where the HTML should be inserted.
+   */
+  static insertTemplate(where = 'afterbegin') {
+    document.body.insertAdjacentHTML(where, TinyNotifyCenter.getTemplate());
+  }
+
+  /** @type {HTMLElement} */
+  #center;
+  /** @type {HTMLElement} */
+  #list;
+  /** @type {HTMLElement} */
+  #badge;
+  /** @type {HTMLElement} */
+  #button;
+  /** @type {HTMLElement} */
+  #overlay;
+
+  #count = 0;
+  #maxCount = 99;
+  #removeDelay = 300;
+  #markAllAsReadOnClose = false;
+  #modes = new WeakMap();
+
+  /** @param {HTMLElement|ChildNode} item */
+  #removeItem(item) {
+    this.#modes.delete(item);
+    if (item instanceof HTMLElement) {
+      item.classList.add('removing');
+
+      setTimeout(() => {
+        this.markAsRead(item);
+        item.remove();
+      }, this.#removeDelay);
+    } else throw new Error('Invalid HTMLElement to clear.');
+  }
+
+  /**
+   * Update notify count and badge.
+   * @param {number} value
+   */
+  #updateCount(value) {
+    this.#count = Math.max(0, value);
+    this.#badge.setAttribute('data-value', String(this.#count));
+    this.#badge.textContent =
+      this.#count > this.#maxCount ? `${this.#maxCount}+` : String(this.#count);
+  }
+
+  /**
+   * Options for configuring the NotificationCenter instance.
+   *
+   * Allows manual specification of the main elements used by the notification center.
+   * If not provided, default elements will be selected from the DOM automatically.
+   *
+   * @param {Object} options - Configuration object.
+   * @param {HTMLElement} [options.center=document.getElementById('notifCenter')] - The container element that holds the list of notifications.
+   * @param {HTMLElement} [options.badge=document.getElementById('notifBadge')] - The badge element used to display the current notification count.
+   * @param {HTMLElement} [options.button=document.querySelector('.notify-bell')] - The button element that toggles the notification center.
+   * @param {HTMLElement} [options.overlay=document.querySelector('.notify-overlay')] - The overlay element that covers the screen when the center is visible.
+   */
+  constructor(options = {}) {
+    const {
+      center = document.getElementById('notifCenter'),
+      badge = document.getElementById('notifBadge'),
+      button = document.querySelector('.notify-bell'),
+      overlay = document.querySelector('.notify-overlay'),
+    } = options;
+
+    // Element existence and type validation
+    if (!(center instanceof HTMLElement))
+      throw new Error(`NotificationCenter: "center" must be an HTMLElement. Got: ${center}`);
+    if (!(overlay instanceof HTMLElement))
+      throw new Error(`NotificationCenter: "overlay" must be an HTMLElement. Got: ${overlay}`);
+    if (!(badge instanceof HTMLElement))
+      throw new Error(`NotificationCenter: "badge" must be an HTMLElement. Got: ${badge}`);
+    if (!(button instanceof HTMLElement))
+      throw new Error(`NotificationCenter: "button" must be an HTMLElement. Got: ${button}`);
+
+    const clearAllBtn = center?.querySelector('.clear-all');
+    const list = center?.querySelector('.list') ?? null;
+    if (!(list instanceof HTMLElement))
+      throw new Error(
+        `NotificationCenter: ".list" inside center must be an HTMLElement. Got: ${list}`,
+      );
+
+    this.#center = center;
+    this.#list = list;
+    this.#badge = badge;
+    this.#button = button;
+    this.#overlay = overlay;
+
+    this.#button.addEventListener('click', () => this.toggle());
+    this.#center.querySelector('.close')?.addEventListener('click', () => this.close());
+    if (clearAllBtn) clearAllBtn.addEventListener('click', () => this.clear());
+    this.#overlay.addEventListener('click', (e) => {
+      if (e.target === this.#overlay) this.close();
+    });
+  }
+
+  /**
+   * Enable or disable automatic mark-as-read on close.
+   * @param {boolean} value
+   */
+  setMarkAllAsReadOnClose(value) {
+    if (typeof value !== 'boolean')
+      throw new TypeError(`Expected boolean for markAllAsReadOnClose, got ${typeof value}`);
+    this.#markAllAsReadOnClose = value;
+  }
+
+  /**
+   * Define how long the remove animation takes (in ms).
+   * @param {number} ms
+   */
+  setRemoveDelay(ms) {
+    if (typeof ms !== 'number') throw new Error(`NotificationCenter: "ms" must be an number.`);
+    this.#removeDelay = ms;
+  }
+
+  /**
+   * Get rendering mode ('text' or 'html') by index.
+   * @param {number} index
+   * @returns {'text' | 'html' | null}
+   */
+  getItemMode(index) {
+    const item = this.getItem(index);
+    return item ? this.#modes.get(item) : null;
+  }
+
+  /**
+   * Get a notify element by index.
+   * @param {number} index
+   * @returns {HTMLElement}
+   */
+  getItem(index) {
+    const element = this.#list.children.item(index);
+    if (!(element instanceof HTMLElement))
+      throw new Error(`NotificationCenter: "item" must be an HTMLElement. Got: ${element}`);
+    return element;
+  }
+
+  /**
+   * Check if a notify exists at the given index.
+   * @param {number} index
+   * @returns {boolean}
+   */
+  hasItem(index) {
+    return index >= 0 && index < this.#list.children.length;
+  }
+
+  /**
+   * Mark a notification index as read.
+   * @param {number|HTMLElement} index
+   */
+  markAsRead(index) {
+    const item = index instanceof HTMLElement ? index : this.getItem(index);
+    if (item.classList.contains('unread')) {
+      item.classList.remove('unread');
+      this.#updateCount(this.#count - 1);
+    }
+  }
+
+  /**
+   * Add a new notify to the center.
+   *
+   * @param {NotifyData} message - Notification content or a full object with title, avatar, and callback.
+   * @param {'text'|'html'} [mode='text'] - How to treat the message content.
+   */
+  add(message, mode = 'text') {
+    const item = document.createElement('div');
+    item.className = 'item unread';
+
+    let titleText = null;
+    let messageText = null;
+    let avatarUrl = null;
+    let onClick = null;
+
+    if (typeof message === 'object' && message !== null) {
+      titleText = message.title;
+      messageText = message.message;
+      avatarUrl = message.avatar;
+      onClick = message.onClick;
+    } else {
+      messageText = message;
+    }
+
+    // Optional avatar
+    if (avatarUrl) {
+      const avatarElem = document.createElement('div');
+      avatarElem.className = 'avatar';
+      avatarElem.style.backgroundImage = `url("${avatarUrl}")`;
+      item.appendChild(avatarElem);
+    }
+
+    // Content wrapper
+    const contentWrapper = document.createElement('div');
+    contentWrapper.className = 'content';
+
+    // Optional title
+    if (titleText) {
+      const titleElem = document.createElement('div');
+      titleElem.className = 'title';
+      titleElem.textContent = titleText;
+      contentWrapper.appendChild(titleElem);
+    }
+
+    // Message
+    const messageElem = document.createElement('div');
+    messageElem.className = 'message';
+
+    if (mode === 'html') {
+      messageElem.innerHTML = messageText;
+    } else {
+      messageElem.textContent = messageText;
+    }
+
+    contentWrapper.appendChild(messageElem);
+
+    // Action by clicking (if provided)
+    if (typeof onClick === 'function') {
+      item.classList.add('clickable');
+      item.addEventListener('click', (e) => {
+        // Prevents the close button from clicking
+        if (e.target instanceof HTMLElement && !e.target.closest('.notify-close')) {
+          onClick(e);
+        }
+      });
+    }
+
+    // Close button
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'notify-close';
+    closeBtn.setAttribute('type', 'button');
+    closeBtn.innerHTML = '&times;';
+    closeBtn.addEventListener('click', (e) => {
+      e.stopPropagation(); // prevents propagation for the main onClick
+      this.#removeItem(item);
+    });
+
+    item.append(contentWrapper, closeBtn);
+    this.#list.prepend(item);
+    this.#modes.set(item, mode);
+    this.#updateCount(this.#count + 1);
+  }
+
+  /**
+   * Remove a notify by index.
+   * @param {number} index
+   */
+  remove(index) {
+    const item = this.getItem(index);
+    this.#removeItem(item);
+  }
+
+  /**
+   * Clear all notifications safely.
+   */
+  clear() {
+    let needAgain = true;
+    while (needAgain) {
+      needAgain = false;
+      const items = Array.from(this.#list.children);
+      for (const item of items) {
+        if (item instanceof HTMLElement && !item.classList.contains('removing')) {
+          this.#removeItem(item);
+          needAgain = true;
+        }
+      }
+    }
+  }
+
+  /**
+   * Open the notify center.
+   */
+  open() {
+    this.#overlay.classList.remove('hidden');
+    this.#center.classList.add('open');
+  }
+
+  /**
+   * Close the notify center.
+   */
+  close() {
+    this.#overlay.classList.add('hidden');
+    this.#center.classList.remove('open');
+    if (this.#markAllAsReadOnClose) {
+      const items = this.#list.querySelectorAll('.item.unread');
+      for (const item of items) {
+        if (item instanceof HTMLElement) this.markAsRead(item);
+      }
+    }
+  }
+
+  /**
+   * Toggle open/close state.
+   */
+  toggle() {
+    if (this.#center.classList.contains('open')) this.close();
+    else this.open();
+  }
+
+  /**
+   * Recalculate the number of notifications based on the actual DOM list.
+   */
+  recount() {
+    const count = this.#list.querySelectorAll('.item.unread').length;
+    this.#updateCount(count);
+  }
+
+  /**
+   * Get current count.
+   * @returns {number}
+   */
+  get count() {
+    return this.#count;
+  }
+}
+
+/* harmony default export */ const libs_TinyNotifyCenter = (TinyNotifyCenter);
+
+;// ./src/v1/libs/TinyToastNotify.mjs
+/**
+ * A callback function used to manually close a notification.
+ * Passed as a second argument to `onClick` handlers, allowing programmatic dismissal of the toast.
+ *
+ * @typedef {() => void} CloseToastFunc
+ */
+
+/**
+ * Represents the data used to display a notification.
+ * Can be a plain string (used as the message), or an object with more customization options.
+ *
+ * @typedef {string | {
+ *   message: string, // The main message to display
+ *   title?: string,  // Optional title to appear above the message
+ *   onClick?: function(MouseEvent, CloseToastFunc): void, // Optional click handler for the notification
+ *   html?: boolean,  // Whether the message should be interpreted as raw HTML
+ *   avatar?: string  // Optional URL to an avatar image shown on the left
+ * }} NotifyData
+ */
+
+/**
+ * A lightweight notification system designed to display timed messages inside a container.
+ * Supports positioning, timing customization, click actions, HTML content, and optional avatars.
+ *
+ * ## Features:
+ * - Positioning via `x` (`left`, `center`, `right`) and `y` (`top`, `bottom`).
+ * - Dynamic display time based on message length.
+ * - Optional `title`, `avatar`, `onClick`, and `html` message rendering.
+ * - Fade-out animation with customizable duration.
+ * - Rigid validation of inputs and internal state.
+ *
+ * ## Customization via setters:
+ * - `setX(position)` — horizontal alignment.
+ * - `setY(position)` — vertical alignment.
+ * - `setBaseDuration(ms)` — base visible time in milliseconds.
+ * - `setExtraPerChar(ms)` — extra time added per character.
+ * - `setFadeOutDuration(ms)` — fade-out animation duration in milliseconds.
+ *
+ * @class
+ */
+class TinyToastNotify {
+  #y;
+  #x;
+  #baseDuration;
+  #extraPerChar;
+  #fadeOutDuration;
+  #container;
+
+  /**
+   * @param {'top'|'bottom'} y - 'top' or 'bottom'
+   * @param {'right'|'left'|'center'} x - 'right', 'left', or 'center'
+   * @param {number} baseDuration - Base display time in ms
+   * @param {number} extraPerChar - Extra ms per character
+   * @param {number} fadeOutDuration - Time in ms for fade-out effect
+   * @param {string} [selector='.notify-container'] - Base selector for container
+   */
+  constructor(
+    y = 'top',
+    x = 'right',
+    baseDuration = 3000,
+    extraPerChar = 50,
+    fadeOutDuration = 300,
+    selector = '.notify-container',
+  ) {
+    this.#validateY(y);
+    this.#validateX(x);
+    this.#validateTiming(baseDuration, 'baseDuration');
+    this.#validateTiming(extraPerChar, 'extraPerChar');
+    this.#validateTiming(fadeOutDuration, 'fadeOutDuration');
+
+    this.#y = y;
+    this.#x = x;
+    this.#baseDuration = baseDuration;
+    this.#extraPerChar = extraPerChar;
+    this.#fadeOutDuration = fadeOutDuration;
+    const container = document.querySelector(`${selector}.${y}.${x}`);
+
+    if (!(container instanceof HTMLElement)) {
+      this.#container = document.createElement('div');
+      this.#container.className = `notify-container ${y} ${x}`;
+      document.body.appendChild(this.#container);
+    } else this.#container = container;
+  }
+
+  /**
+   * Returns the notification container element.
+   * Ensures that the container is a valid HTMLElement.
+   *
+   * @returns {HTMLElement} The notification container.
+   * @throws {Error} If the container is not a valid HTMLElement.
+   */
+  getContainer() {
+    if (!(this.#container instanceof HTMLElement))
+      throw new Error('Container is not a valid HTMLElement.');
+    return this.#container;
+  }
+
+  /**
+   * Validates the vertical position value.
+   * Must be either 'top' or 'bottom'.
+   *
+   * @param {string} value - The vertical position to validate.
+   * @throws {Error} If the value is not 'top' or 'bottom'.
+   */
+  #validateY(value) {
+    if (!['top', 'bottom'].includes(value)) {
+      throw new Error(`Invalid vertical direction "${value}". Expected "top" or "bottom".`);
+    }
+  }
+
+  /**
+   * Validates the horizontal position value.
+   * Must be 'left', 'right', or 'center'.
+   *
+   * @param {string} value - The horizontal position to validate.
+   * @throws {Error} If the value is not one of the accepted directions.
+   */
+  #validateX(value) {
+    if (!['left', 'right', 'center'].includes(value)) {
+      throw new Error(
+        `Invalid horizontal position "${value}". Expected "left", "right" or "center".`,
+      );
+    }
+  }
+
+  /**
+   * Validates a numeric timing value.
+   * Must be a non-negative finite number.
+   *
+   * @param {number} value - The number to validate.
+   * @param {string} name - The name of the parameter (used for error messaging).
+   * @throws {Error} If the number is invalid.
+   */
+  #validateTiming(value, name) {
+    if (typeof value !== 'number' || value < 0 || !Number.isFinite(value)) {
+      throw new Error(
+        `Invalid value for "${name}": ${value}. Must be a non-negative finite number.`,
+      );
+    }
+  }
+
+  /**
+   * Returns the current vertical position.
+   *
+   * @returns {'top'|'bottom'} The vertical direction of the notification container.
+   */
+  getY() {
+    return this.#y;
+  }
+
+  /**
+   * Sets the vertical position of the notification container.
+   * Updates the container's class to reflect the new position.
+   *
+   * @param {'top'|'bottom'} value - The vertical direction to set.
+   * @throws {Error} If the value is invalid.
+   */
+  setY(value) {
+    this.#validateY(value);
+    const container = this.getContainer();
+    container.classList.remove(this.#y);
+    container.classList.add(value);
+
+    this.#y = value;
+  }
+
+  /**
+   * Returns the current horizontal position.
+   *
+   * @returns {'left'|'right'|'center'} The horizontal direction of the notification container.
+   */
+  getX() {
+    return this.#x;
+  }
+
+  /**
+   * Sets the horizontal position of the notification container.
+   * Updates the container's class to reflect the new position.
+   *
+   * @param {'left'|'right'|'center'} value - The horizontal direction to set.
+   * @throws {Error} If the value is invalid.
+   */
+  setX(value) {
+    this.#validateX(value);
+    const container = this.getContainer();
+    container.classList.remove(this.#x);
+    container.classList.add(value);
+
+    this.#x = value;
+  }
+
+  /**
+   * Returns the base duration for displaying the notification.
+   *
+   * @returns {number} Base time (in milliseconds) that a notification stays on screen.
+   */
+  getBaseDuration() {
+    return this.#baseDuration;
+  }
+
+  /**
+   * Sets the base duration for the notification display time.
+   *
+   * @param {number} value - Base display time in milliseconds.
+   * @throws {Error} If the value is not a valid non-negative finite number.
+   */
+  setBaseDuration(value) {
+    this.#validateTiming(value, 'baseDuration');
+    this.#baseDuration = value;
+  }
+
+  /**
+   * Returns the extra display time added per character.
+   *
+   * @returns {number} Extra time (in milliseconds) per character in the notification.
+   */
+  getExtraPerChar() {
+    return this.#extraPerChar;
+  }
+
+  /**
+   * Sets the additional display time per character.
+   *
+   * @param {number} value - Extra time in milliseconds per character.
+   * @throws {Error} If the value is not a valid non-negative finite number.
+   */
+  setExtraPerChar(value) {
+    this.#validateTiming(value, 'extraPerChar');
+    this.#extraPerChar = value;
+  }
+
+  /**
+   * Returns the fade-out duration.
+   *
+   * @returns {number} Time (in milliseconds) used for fade-out transition.
+   */
+  getFadeOutDuration() {
+    return this.#fadeOutDuration;
+  }
+
+  /**
+   * Sets the fade-out transition time for notifications.
+   *
+   * @param {number} value - Fade-out duration in milliseconds.
+   * @throws {Error} If the value is not a valid non-negative finite number.
+   */
+  setFadeOutDuration(value) {
+    this.#validateTiming(value, 'fadeOutDuration');
+    this.#fadeOutDuration = value;
+  }
+
+  /**
+   * Displays a notification for a time based on message length.
+   * Accepts a string or an object with:
+   * {
+   *   message: string,
+   *   title?: string,
+   *   onClick?: function(MouseEvent, CloseToastFunc): void,
+   *   html?: boolean,
+   *   avatar?: string // Optional avatar image URL
+   * }
+   *
+   * @param {NotifyData} data
+   */
+  show(data) {
+    let message = '';
+    let title = '';
+    let onClick = null;
+    let useHTML = false;
+    let avatarUrl = null;
+
+    const notify = document.createElement('div');
+    notify.className = 'notify enter';
+
+    if (typeof data === 'string') {
+      message = data;
+    } else if (typeof data === 'object' && data !== null && typeof data.message === 'string') {
+      message = data.message;
+      title = typeof data.title === 'string' ? data.title : '';
+      useHTML = data.html === true;
+      avatarUrl = typeof data.avatar === 'string' ? data.avatar : null;
+
+      if (data.onClick !== undefined) {
+        if (typeof data.onClick !== 'function') {
+          throw new Error('onClick must be a function if defined');
+        }
+        onClick = data.onClick;
+        notify.classList.add('clickable');
+      }
+    } else {
+      throw new Error(
+        `Invalid argument for show(): expected string or { message: string, title?: string, onClick?: function, html?: boolean, avatar?: string }`,
+      );
+    }
+
+    // Add close button
+    const closeBtn = document.createElement('button');
+    closeBtn.innerHTML = '&times;';
+    closeBtn.className = 'close';
+    closeBtn.setAttribute('aria-label', 'Close');
+
+    // Optional hover effect
+    closeBtn.addEventListener('mouseenter', () => {
+      closeBtn.style.color = 'var(--notif-close-color-hover)';
+    });
+    closeBtn.addEventListener('mouseleave', () => {
+      closeBtn.style.color = 'var(--notif-close-color)';
+    });
+
+    // Avatar
+    if (avatarUrl) {
+      const avatar = document.createElement('img');
+      avatar.src = avatarUrl;
+      avatar.alt = 'avatar';
+      avatar.className = 'avatar';
+      notify.appendChild(avatar);
+    }
+
+    // Title
+    if (title) {
+      const titleElem = document.createElement('strong');
+      titleElem.textContent = title;
+      titleElem.style.display = 'block';
+      notify.appendChild(titleElem);
+    }
+
+    // Message
+    if (useHTML) {
+      const msgWrapper = document.createElement('div');
+      msgWrapper.innerHTML = message;
+      notify.appendChild(msgWrapper);
+    } else {
+      notify.appendChild(document.createTextNode(message));
+    }
+
+    notify.appendChild(closeBtn);
+    this.getContainer().appendChild(notify);
+
+    const visibleTime = this.#baseDuration + message.length * this.#extraPerChar;
+    const totalTime = visibleTime + this.#fadeOutDuration;
+
+    // Close logic
+    let removed = false;
+    const close = () => {
+      if (removed) return;
+      removed = true;
+      notify.classList.remove('enter', 'show');
+      notify.classList.add('exit');
+      setTimeout(() => notify.remove(), this.#fadeOutDuration);
+    };
+
+    // Click handler
+    if (typeof onClick === 'function') {
+      notify.addEventListener('click', (e) => {
+        if (e.target === closeBtn) return;
+        onClick(e, close);
+      });
+    }
+
+    // Close button click
+    closeBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      close();
+    });
+
+    // Transition activation force soon after the element is added
+    setTimeout(() => {
+      notify.classList.remove('enter');
+      notify.classList.add('show');
+    }, 1);
+
+    setTimeout(() => close(), totalTime);
+  }
+}
+
+/* harmony default export */ const libs_TinyToastNotify = (TinyToastNotify);
+
 ;// ./src/v1/index.mjs
 
 
@@ -4346,6 +5148,8 @@ class TinyRateLimiter {
 
 
 
+
+
 })();
 
 window.TinyEssentials = __webpack_exports__;