lumatoast 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1011 @@
+'use strict';
+
+// src/core/tokens.ts
+var DURATION_SHORT = 2e3;
+var DURATION_DEFAULT = 4e3;
+var DURATION_LONG = 6e3;
+var DURATION_INFINITE = Infinity;
+var ANIMATION_ENTER_MS = 320;
+var ANIMATION_EXIT_MS = 300;
+var ANIMATION_STACK_MS = 280;
+var TOAST_WIDTH_PX = 340;
+var TOAST_GAP_PX = 12;
+var Z_INDEX_BASE = 1e3;
+var CSS_VARS = {
+  // Card layout
+  WIDTH: "--luma-width",
+  RADIUS: "--luma-radius",
+  PADDING: "--luma-padding",
+  GAP: "--luma-gap",
+  // Background & border
+  BG: "--luma-bg",
+  BORDER_COLOR: "--luma-border-color",
+  BORDER_WIDTH: "--luma-border-width",
+  SHADOW: "--luma-shadow",
+  BACKDROP: "--luma-backdrop",
+  // Typography
+  FONT: "--luma-font",
+  TITLE_SIZE: "--luma-title-size",
+  TITLE_WEIGHT: "--luma-title-weight",
+  TITLE_COLOR: "--luma-title-color",
+  DESC_SIZE: "--luma-desc-size",
+  DESC_COLOR: "--luma-desc-color",
+  LINE_HEIGHT: "--luma-line-height",
+  LETTER_SPACING: "--luma-letter-spacing",
+  // Icon
+  ICON_SIZE: "--luma-icon-size",
+  // Close button
+  CLOSE_COLOR: "--luma-close-color",
+  CLOSE_SIZE: "--luma-close-size",
+  // Action button
+  ACTION_BG: "--luma-action-bg",
+  ACTION_COLOR: "--luma-action-color",
+  ACTION_HOVER_BG: "--luma-action-hover-bg",
+  ACTION_RADIUS: "--luma-action-radius",
+  ACTION_PADDING: "--luma-action-padding",
+  ACTION_SIZE: "--luma-action-size",
+  ACTION_WEIGHT: "--luma-action-weight",
+  ACTION_BORDER: "--luma-action-border",
+  ACTION_HOVER_BORDER: "--luma-action-hover-border",
+  // Progress bar
+  PROGRESS_HEIGHT: "--luma-progress-height",
+  PROGRESS_RADIUS: "--luma-progress-radius",
+  PROGRESS_SUCCESS: "--luma-progress-success",
+  PROGRESS_ERROR: "--luma-progress-error",
+  PROGRESS_WARNING: "--luma-progress-warning",
+  PROGRESS_INFO: "--luma-progress-info",
+  PROGRESS_LOADING: "--luma-progress-loading",
+  PROGRESS_CUSTOM: "--luma-progress-custom",
+  // Accent colors (used for type-specific accents like border-left)
+  ACCENT_SUCCESS: "--luma-accent-success",
+  ACCENT_ERROR: "--luma-accent-error",
+  ACCENT_WARNING: "--luma-accent-warning",
+  ACCENT_INFO: "--luma-accent-info",
+  // Animation durations (set by animationSpeed config)
+  DURATION_ENTER: "--luma-duration-enter",
+  DURATION_EXIT: "--luma-duration-exit",
+  DURATION_STACK: "--luma-duration-stack"
+};
+var CLASS_CONTAINER = "luma-toast-container";
+var CLASS_TOAST = "luma-toast";
+var CLASS_CARD = "luma-toast-card";
+var CLASS_ICON = "luma-toast-icon";
+var CLASS_CONTENT = "luma-toast-content";
+var CLASS_TITLE = "luma-toast-title";
+var CLASS_DESCRIPTION = "luma-toast-description";
+var CLASS_ACTION = "luma-toast-action";
+var CLASS_CLOSE = "luma-toast-close";
+var CLASS_PROGRESS = "luma-progress";
+var CLASS_EXIT = "luma-toast-exit";
+
+// src/core/constants.ts
+var DEFAULT_DURATION = DURATION_DEFAULT;
+var DEFAULT_POSITION = "top-right";
+var DEFAULT_THEME = "linear";
+var DEFAULT_DISMISSIBLE = true;
+var DEFAULT_SHOW_ICON = true;
+var DEFAULT_CLOSE_ON_CLICK = false;
+var DEFAULT_PROGRESS_POS = "bottom";
+var DEFAULT_ANIMATION_ENTER = "slide";
+var DEFAULT_ANIMATION_EXIT = "slide";
+var DEFAULT_ANIMATION_SPEED = "normal";
+var MAX_VISIBLE_TOASTS = 5;
+var STACK_GAP = TOAST_GAP_PX;
+
+// src/utils/id.ts
+var counter = 0;
+function createToastId(prefix = "toast") {
+  counter += 1;
+  return `${prefix}-${Date.now()}-${counter}`;
+}
+
+// src/utils/events.ts
+var EventEmitter = class {
+  listeners = /* @__PURE__ */ new Set();
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  emit(payload) {
+    this.listeners.forEach((listener) => listener(payload));
+  }
+  clear() {
+    this.listeners.clear();
+  }
+};
+
+// src/core/manager.ts
+var globalConfig = {
+  duration: DEFAULT_DURATION,
+  position: DEFAULT_POSITION,
+  theme: DEFAULT_THEME,
+  dismissible: DEFAULT_DISMISSIBLE,
+  maxVisible: MAX_VISIBLE_TOASTS,
+  showIcon: DEFAULT_SHOW_ICON,
+  closeOnClick: DEFAULT_CLOSE_ON_CLICK,
+  progressPosition: DEFAULT_PROGRESS_POS,
+  animationEnter: DEFAULT_ANIMATION_ENTER,
+  animationExit: DEFAULT_ANIMATION_EXIT,
+  animationSpeed: DEFAULT_ANIMATION_SPEED
+};
+var SPEED_MAP = {
+  slow: { enter: 500, exit: 450, stack: 400 },
+  normal: { enter: 320, exit: 300, stack: 280 },
+  fast: { enter: 180, exit: 160, stack: 150 }
+};
+function applyAnimationSpeed(speed) {
+  if (typeof document === "undefined") return;
+  const { enter, exit, stack } = SPEED_MAP[speed];
+  const root = document.documentElement;
+  root.style.setProperty("--luma-duration-enter", `${enter}ms`);
+  root.style.setProperty("--luma-duration-exit", `${exit}ms`);
+  root.style.setProperty("--luma-duration-stack", `${stack}ms`);
+}
+function configure(config) {
+  globalConfig = { ...globalConfig, ...config };
+  if (config.animationSpeed) {
+    applyAnimationSpeed(config.animationSpeed);
+  }
+}
+var ToastManager = class {
+  visible = [];
+  queue = [];
+  changes = new EventEmitter();
+  /**
+   * Returns all visible toasts.
+   */
+  getToasts() {
+    return [...this.visible];
+  }
+  /**
+   * Create a new toast.
+   */
+  create(type, options = {}) {
+    const toast2 = {
+      id: options.id ?? createToastId(),
+      type,
+      title: options.title,
+      description: options.description,
+      duration: options.duration ?? globalConfig.duration,
+      dismissible: options.dismissible ?? globalConfig.dismissible,
+      position: options.position ?? globalConfig.position,
+      theme: options.theme ?? globalConfig.theme,
+      action: options.action,
+      // customization
+      className: options.className,
+      style: options.style,
+      showIcon: options.showIcon ?? globalConfig.showIcon,
+      closeOnClick: options.closeOnClick ?? globalConfig.closeOnClick,
+      progressPosition: options.progressPosition ?? globalConfig.progressPosition,
+      animationEnter: options.animationEnter ?? globalConfig.animationEnter,
+      animationExit: options.animationExit ?? globalConfig.animationExit,
+      // internal
+      createdAt: Date.now(),
+      visible: false
+    };
+    if (this.visible.length >= globalConfig.maxVisible) {
+      this.queue.push(toast2);
+    } else {
+      toast2.visible = true;
+      this.visible.push(toast2);
+      this.changes.emit(this.getToasts());
+    }
+    return toast2;
+  }
+  /**
+   * Remove a toast by id.
+   */
+  dismiss(id) {
+    const index = this.visible.findIndex((t) => t.id === id);
+    if (index === -1) return;
+    this.visible.splice(index, 1);
+    if (this.queue.length > 0) {
+      const next = this.queue.shift();
+      next.visible = true;
+      this.visible.push(next);
+    }
+    this.changes.emit(this.getToasts());
+  }
+  /**
+   * Remove all visible and queued toasts.
+   */
+  dismissAll() {
+    this.visible = [];
+    this.queue = [];
+    this.changes.emit([]);
+  }
+  /**
+   * Remove the most recently added visible toast.
+   */
+  dismissLatest() {
+    const latest = this.visible[this.visible.length - 1];
+    if (!latest) return;
+    this.dismiss(latest.id);
+  }
+  /**
+   * Update an existing toast by id.
+   * Works on both visible and queued toasts.
+   */
+  update(id, updates) {
+    const visibleToast = this.visible.find((t) => t.id === id);
+    if (visibleToast) {
+      Object.assign(visibleToast, updates);
+      if (updates.duration !== void 0) {
+        visibleToast.createdAt = Date.now();
+      }
+      this.changes.emit(this.getToasts());
+      return visibleToast;
+    }
+    const queuedToast = this.queue.find((t) => t.id === id);
+    if (queuedToast) {
+      Object.assign(queuedToast, updates);
+      if (updates.duration !== void 0) {
+        queuedToast.createdAt = Date.now();
+      }
+      return queuedToast;
+    }
+    return null;
+  }
+};
+var toastManager = new ToastManager();
+
+// src/core/toast.ts
+var toast = {
+  /**
+   * Show a success toast.
+   */
+  success(message, options = {}) {
+    return toastManager.create("success", {
+      ...options,
+      description: message
+    });
+  },
+  /**
+   * Show an error toast.
+   */
+  error(message, options = {}) {
+    return toastManager.create("error", {
+      ...options,
+      description: message
+    });
+  },
+  /**
+   * Show a warning toast.
+   */
+  warning(message, options = {}) {
+    return toastManager.create("warning", {
+      ...options,
+      description: message
+    });
+  },
+  /**
+   * Show an info toast.
+   */
+  info(message, options = {}) {
+    return toastManager.create("info", {
+      ...options,
+      description: message
+    });
+  },
+  /**
+   * Show a persistent loading toast that must be dismissed manually
+   * or converted via `toast.update()` / `toast.promise()`.
+   */
+  loading(message, options = {}) {
+    return toastManager.create("loading", {
+      ...options,
+      duration: Infinity,
+      dismissible: false,
+      description: message
+    });
+  },
+  /**
+   * Show a fully custom toast.
+   * You control the title, description, action, theme, and position.
+   *
+   * @example
+   * toast.custom("Custom notification", { title: "Hey!", theme: "cyberpunk" });
+   */
+  custom(message, options = {}) {
+    return toastManager.create("custom", {
+      ...options,
+      description: message
+    });
+  },
+  /**
+   * Dismiss a toast by id.
+   */
+  dismiss(id) {
+    toastManager.dismiss(id);
+  },
+  /**
+   * Dismiss all visible and queued toasts.
+   */
+  dismissAll() {
+    toastManager.dismissAll();
+  },
+  /**
+   * Dismiss the most recently added visible toast.
+   */
+  dismissLatest() {
+    toastManager.dismissLatest();
+  },
+  /**
+   * Update an existing toast's properties.
+   * Useful for transitioning a loading toast to success or error.
+   */
+  update(id, updates) {
+    return toastManager.update(id, updates);
+  },
+  /**
+   * Track a promise: show a loading toast, then auto-transition to
+   * success or error based on the promise outcome.
+   *
+   * @example
+   * toast.promise(fetch("/api/save"), {
+   *   loading: { description: "Saving..." },
+   *   success: { description: "Saved!" },
+   *   error:   { description: "Failed to save." }
+   * });
+   */
+  promise(promise, options) {
+    const loadingToast = toast.loading(
+      options.loading.description ?? "",
+      { ...options.loading }
+    );
+    return promise.then((result) => {
+      toast.update(loadingToast.id, {
+        type: "success",
+        ...options.success,
+        duration: options.success.duration ?? 3e3,
+        dismissible: true
+      });
+      return result;
+    }).catch((error) => {
+      toast.update(loadingToast.id, {
+        type: "error",
+        ...options.error,
+        duration: options.error.duration ?? 4e3,
+        dismissible: true
+      });
+      throw error;
+    });
+  },
+  /**
+   * Subscribe to toast state changes.
+   * Returns an unsubscribe function.
+   *
+   * @example
+   * const unsub = toast.subscribe((toasts) => console.log(toasts));
+   * // later:
+   * unsub();
+   */
+  subscribe(listener) {
+    return toastManager.changes.subscribe(listener);
+  },
+  /**
+   * Set global defaults for all toasts.
+   * Per-toast options always override these.
+   *
+   * @example
+   * toast.configure({ position: "bottom-right", theme: "minimal", duration: 3000 });
+   */
+  configure
+};
+
+// src/renderer/gestures.ts
+var DISMISS_THRESHOLD = 120;
+var MAX_ROTATION = 8;
+var EXIT_DISTANCE = 450;
+function attachSwipeGesture(element, toastId, position, onPause, onResume) {
+  const isVertical = position === "top-center" || position === "bottom-center";
+  const isBottom = position.startsWith("bottom");
+  let startX = 0;
+  let startY = 0;
+  let currentX = 0;
+  let currentY = 0;
+  let dragging = false;
+  const card = element.querySelector(".luma-toast-card");
+  card.style.touchAction = isVertical ? "pan-x" : "pan-y";
+  const handlePointerDown = (event) => {
+    const target = event.target;
+    if (target.closest(".luma-toast-close") || target.closest(".luma-toast-action")) {
+      return;
+    }
+    dragging = true;
+    startX = event.clientX;
+    startY = event.clientY;
+    currentX = 0;
+    currentY = 0;
+    onPause();
+    element.style.transition = "none";
+    element.setPointerCapture(event.pointerId);
+  };
+  const handlePointerMove = (event) => {
+    if (!dragging) return;
+    currentX = event.clientX - startX;
+    currentY = event.clientY - startY;
+    if (isVertical) {
+      const clampedY = isBottom ? Math.max(0, currentY) : Math.min(0, currentY);
+      element.style.transform = `translate3d(0, ${clampedY}px, 0)`;
+      element.style.opacity = `${Math.max(0.35, 1 - Math.abs(clampedY) / 180)}`;
+    } else {
+      const rotate = Math.sign(currentX) * Math.min(Math.abs(currentX) / 20, MAX_ROTATION);
+      element.style.transform = `translate3d(${currentX}px, 0, 0) rotate(${rotate}deg)`;
+      element.style.opacity = `${Math.max(0.35, 1 - Math.abs(currentX) / 180)}`;
+    }
+  };
+  const handlePointerUp = (event) => {
+    if (!dragging) return;
+    dragging = false;
+    element.releasePointerCapture(event.pointerId);
+    element.style.transition = "transform 280ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease";
+    const delta = isVertical ? currentY : currentX;
+    if (Math.abs(delta) >= DISMISS_THRESHOLD) {
+      if (isVertical) {
+        const exitY = delta > 0 ? EXIT_DISTANCE : -EXIT_DISTANCE;
+        element.style.transform = `translate3d(0, ${exitY}px, 0)`;
+      } else {
+        const exitX = delta > 0 ? EXIT_DISTANCE : -EXIT_DISTANCE;
+        const exitRotate = delta > 0 ? 12 : -12;
+        element.style.transform = `translate3d(${exitX}px, 0, 0) rotate(${exitRotate}deg)`;
+      }
+      element.style.opacity = "0";
+      setTimeout(() => {
+        toast.dismiss(toastId);
+      }, 280);
+      return;
+    }
+    element.style.transform = "";
+    element.style.opacity = "1";
+    onResume();
+  };
+  element.addEventListener("pointerdown", handlePointerDown);
+  element.addEventListener("pointermove", handlePointerMove);
+  element.addEventListener("pointerup", handlePointerUp);
+  element.addEventListener("pointercancel", handlePointerUp);
+}
+
+// src/utils/dom.ts
+function createElement(tag, classNames = []) {
+  const element = document.createElement(tag);
+  if (classNames.length) {
+    element.classList.add(...classNames);
+  }
+  return element;
+}
+function applyStyles(element, style) {
+  if (!style || typeof style !== "object") return;
+  for (const [key, value] of Object.entries(style)) {
+    if (key === "__proto__" || key === "constructor" || key === "prototype") continue;
+    if (typeof value !== "string") continue;
+    if (key.startsWith("--")) {
+      element.style.setProperty(key, value);
+    } else {
+      element.style[key] = value;
+    }
+  }
+}
+
+// src/renderer/container.ts
+var CONTAINER_CLASS = "luma-toast-container";
+var containers = /* @__PURE__ */ new Map();
+function getContainer(position) {
+  const existing = containers.get(position);
+  if (existing) return existing;
+  const container = createElement("div", [
+    CONTAINER_CLASS,
+    `luma-${position}`
+  ]);
+  container.dataset.position = position;
+  container.setAttribute("role", "region");
+  container.setAttribute("aria-live", "polite");
+  container.setAttribute("aria-atomic", "false");
+  container.setAttribute("aria-relevant", "additions removals");
+  document.body.appendChild(container);
+  containers.set(position, container);
+  return container;
+}
+function removeContainer(position) {
+  const container = containers.get(position);
+  if (!container) return;
+  container.remove();
+  containers.delete(position);
+}
+
+// src/icons/success.ts
+var successIcon = `
+<svg viewBox="0 0 24 24" width="20" height="20" fill="none">
+  <circle cx="12" cy="12" r="10" fill="#22C55E"/>
+  <path
+    d="M7.5 12.5L10.5 15.5L16.5 9.5"
+    stroke="white"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+`;
+
+// src/icons/error.ts
+var errorIcon = `
+<svg viewBox="0 0 24 24" width="20" height="20" fill="none">
+  <circle cx="12" cy="12" r="10" fill="#EF4444"/>
+  <path
+    d="M9 9L15 15M15 9L9 15"
+    stroke="white"
+    stroke-width="2"
+    stroke-linecap="round"
+  />
+</svg>
+`;
+
+// src/icons/warning.ts
+var warningIcon = `
+<svg viewBox="0 0 24 24" width="20" height="20" fill="none">
+  <path
+    d="M12 3L22 20H2L12 3Z"
+    fill="#F59E0B"
+  />
+  <path
+    d="M12 9V13"
+    stroke="white"
+    stroke-width="2"
+    stroke-linecap="round"
+  />
+  <circle cx="12" cy="17" r="1" fill="white"/>
+</svg>
+`;
+
+// src/icons/info.ts
+var infoIcon = `
+<svg viewBox="0 0 24 24" width="20" height="20" fill="none">
+  <circle cx="12" cy="12" r="10" fill="#3B82F6"/>
+  <path
+    d="M12 11V16"
+    stroke="white"
+    stroke-width="2"
+    stroke-linecap="round"
+  />
+  <circle cx="12" cy="8" r="1.2" fill="white"/>
+</svg>
+`;
+
+// src/icons/loading.ts
+var loadingIcon = `
+<svg class="luma-loading-icon"
+     viewBox="0 0 24 24"
+     width="20"
+     height="20"
+     fill="none">
+
+  <circle
+    cx="12"
+    cy="12"
+    r="9"
+    stroke="#64748B"
+    stroke-width="2"
+    opacity=".25"
+  />
+
+  <path
+    d="M12 3
+       A9 9 0 0 1 21 12"
+    stroke="#60A5FA"
+    stroke-width="2"
+    stroke-linecap="round"
+  />
+</svg>
+`;
+
+// src/components/toast.ts
+function renderToast(toastItem) {
+  const classes = [
+    "luma-toast",
+    `luma-${toastItem.type}`,
+    `luma-theme-${toastItem.theme}`
+  ];
+  if (toastItem.className) {
+    classes.push(...toastItem.className.trim().split(/\s+/));
+  }
+  const wrapper = createElement("div", classes);
+  wrapper.dataset.toastId = toastItem.id;
+  wrapper.dataset.enter = toastItem.animationEnter;
+  wrapper.dataset.exit = toastItem.animationExit;
+  wrapper.setAttribute("role", toastItem.type === "error" ? "alert" : "status");
+  wrapper.setAttribute("aria-live", toastItem.type === "error" ? "assertive" : "polite");
+  const card = createElement("div", ["luma-toast-card"]);
+  applyStyles(card, toastItem.style);
+  if (toastItem.closeOnClick) {
+    card.style.cursor = "pointer";
+    card.addEventListener("click", (e) => {
+      const target = e.target;
+      if (target.closest(".luma-toast-close") || target.closest(".luma-toast-action")) return;
+      toast.dismiss(toastItem.id);
+    });
+  }
+  if (toastItem.showIcon) {
+    const icon = createElement("div", ["luma-toast-icon"]);
+    icon.innerHTML = getIcon(toastItem.type);
+    card.appendChild(icon);
+  }
+  const content = createElement("div", ["luma-toast-content"]);
+  if (toastItem.title) {
+    const title = createElement("div", ["luma-toast-title"]);
+    title.textContent = toastItem.title;
+    content.appendChild(title);
+  }
+  if (toastItem.description) {
+    const desc = createElement("div", ["luma-toast-description"]);
+    desc.textContent = toastItem.description;
+    content.appendChild(desc);
+  }
+  if (toastItem.action) {
+    const action = buildActionButton(toastItem);
+    content.appendChild(action);
+  }
+  card.appendChild(content);
+  const close = createElement("button", ["luma-toast-close"]);
+  close.type = "button";
+  close.textContent = "\xD7";
+  close.setAttribute("aria-label", "Dismiss notification");
+  close.setAttribute("title", "Dismiss");
+  if (!toastItem.dismissible) {
+    close.style.display = "none";
+  }
+  close.addEventListener("pointerdown", (e) => e.stopPropagation());
+  close.addEventListener("click", (e) => {
+    e.stopPropagation();
+    toast.dismiss(toastItem.id);
+  });
+  card.appendChild(close);
+  if (Number.isFinite(toastItem.duration)) {
+    const progress = buildProgressBar(toastItem);
+    if (toastItem.progressPosition === "top") {
+      card.insertBefore(progress, card.firstChild);
+    } else {
+      card.appendChild(progress);
+    }
+  }
+  wrapper.appendChild(card);
+  return wrapper;
+}
+function buildActionButton(toastItem) {
+  const variant = toastItem.action?.variant ?? "solid";
+  const action = createElement("button", [
+    "luma-toast-action",
+    `luma-action-${variant}`
+  ]);
+  action.type = "button";
+  action.textContent = toastItem.action.label;
+  action.setAttribute("aria-label", toastItem.action.label);
+  action.addEventListener("pointerdown", (e) => e.stopPropagation());
+  action.addEventListener("click", (e) => {
+    e.stopPropagation();
+    toastItem.action?.onClick();
+    toast.dismiss(toastItem.id);
+  });
+  return action;
+}
+function buildProgressBar(toastItem) {
+  const progress = createElement("div", ["luma-progress"]);
+  const elapsed = Date.now() - toastItem.createdAt;
+  progress.style.animationDuration = `${toastItem.duration}ms`;
+  progress.style.animationDelay = `-${elapsed}ms`;
+  if (toastItem.progressPosition === "top") {
+    progress.classList.add("luma-progress-top");
+  }
+  return progress;
+}
+function getIcon(type) {
+  switch (type) {
+    case "success":
+      return successIcon;
+    case "error":
+      return errorIcon;
+    case "warning":
+      return warningIcon;
+    case "loading":
+      return loadingIcon;
+    case "info":
+    default:
+      return infoIcon;
+  }
+}
+
+// src/renderer/animations.ts
+var previousPositions = /* @__PURE__ */ new Map();
+var prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+function recordPositions(elements) {
+  previousPositions.clear();
+  elements.forEach((element, id) => {
+    previousPositions.set(id, element.getBoundingClientRect());
+  });
+}
+function animateStack(elements) {
+  if (prefersReducedMotion()) return;
+  elements.forEach((element, id) => {
+    if (element.dataset.removing === "true") return;
+    const previous = previousPositions.get(id);
+    if (!previous) return;
+    const next = element.getBoundingClientRect();
+    const deltaY = previous.top - next.top;
+    if (deltaY === 0) return;
+    element.style.transition = "none";
+    element.style.transform = `translateY(${deltaY}px)`;
+    requestAnimationFrame(() => {
+      element.style.transition = `transform ${ANIMATION_STACK_MS}ms cubic-bezier(.2,.8,.2,1)`;
+      element.style.transform = "";
+    });
+  });
+}
+function updateDepth(elements) {
+  const list = [...elements.values()];
+  list.forEach((element, index) => {
+    element.style.zIndex = String(1e3 - index);
+    element.style.removeProperty("--luma-scale");
+  });
+}
+
+// src/renderer/renderer.ts
+var initialized = false;
+var renderedToasts = /* @__PURE__ */ new Map();
+var timers = /* @__PURE__ */ new Map();
+function initializeRenderer() {
+  if (typeof window === "undefined") return;
+  if (initialized) return;
+  initialized = true;
+  toast.subscribe(syncToasts);
+  window.addEventListener("keydown", handleEscapeKey);
+}
+function handleEscapeKey(event) {
+  if (event.key !== "Escape") return;
+  toast.dismissLatest();
+}
+function syncToasts(toasts) {
+  recordPositions(renderedToasts);
+  const activeIds = new Set(toasts.map((t) => t.id));
+  for (const [id, element] of renderedToasts.entries()) {
+    if (!activeIds.has(id)) {
+      removeToast(id, element);
+    }
+  }
+  const grouped = /* @__PURE__ */ new Map();
+  toasts.forEach((toastItem) => {
+    const list = grouped.get(toastItem.position) ?? [];
+    list.push(toastItem);
+    grouped.set(toastItem.position, list);
+  });
+  grouped.forEach((positionToasts, position) => {
+    const container = getContainer(position);
+    positionToasts.forEach((toastItem) => {
+      const existing = renderedToasts.get(toastItem.id);
+      if (existing) {
+        patchToast(existing, toastItem);
+        if (Number.isFinite(toastItem.duration) && !timers.has(toastItem.id)) {
+          startTimer(toastItem, existing);
+        }
+        return;
+      }
+      const element = renderToast(toastItem);
+      container.appendChild(element);
+      renderedToasts.set(toastItem.id, element);
+      startTimer(toastItem, element);
+    });
+  });
+  requestAnimationFrame(() => {
+    animateStack(renderedToasts);
+    updateDepth(renderedToasts);
+  });
+}
+function patchToast(element, toastItem) {
+  const baseClasses = [
+    "luma-toast",
+    `luma-${toastItem.type}`,
+    `luma-theme-${toastItem.theme}`
+  ];
+  if (toastItem.className) {
+    baseClasses.push(...toastItem.className.trim().split(/\s+/));
+  }
+  element.className = baseClasses.join(" ");
+  element.dataset.enter = toastItem.animationEnter;
+  element.dataset.exit = toastItem.animationExit;
+  const card = element.querySelector(".luma-toast-card");
+  if (!card) return;
+  applyStyles(card, toastItem.style);
+  const iconSlot = card.querySelector(".luma-toast-icon");
+  if (toastItem.showIcon) {
+    if (iconSlot) {
+      iconSlot.innerHTML = resolveIcon(toastItem.type);
+    }
+  } else {
+    iconSlot?.remove();
+  }
+  const title = card.querySelector(".luma-toast-title");
+  if (toastItem.title) {
+    if (title) {
+      title.textContent = toastItem.title;
+    } else {
+      const node = document.createElement("div");
+      node.className = "luma-toast-title";
+      node.textContent = toastItem.title;
+      card.querySelector(".luma-toast-content")?.prepend(node);
+    }
+  } else {
+    title?.remove();
+  }
+  const description = card.querySelector(".luma-toast-description");
+  if (toastItem.description) {
+    if (description) {
+      description.textContent = toastItem.description;
+    } else {
+      const node = document.createElement("div");
+      node.className = "luma-toast-description";
+      node.textContent = toastItem.description;
+      card.querySelector(".luma-toast-content")?.appendChild(node);
+    }
+  } else {
+    description?.remove();
+  }
+  const close = card.querySelector(".luma-toast-close");
+  if (close) {
+    close.style.display = toastItem.dismissible ? "" : "none";
+  }
+  const existingProgress = card.querySelector(".luma-progress");
+  if (Number.isFinite(toastItem.duration)) {
+    if (!existingProgress) {
+      const progress = document.createElement("div");
+      progress.className = "luma-progress";
+      progress.style.animationDuration = `${toastItem.duration}ms`;
+      if (toastItem.progressPosition === "top") {
+        progress.classList.add("luma-progress-top");
+        card.insertBefore(progress, card.firstChild);
+      } else {
+        card.appendChild(progress);
+      }
+    }
+  } else {
+    existingProgress?.remove();
+  }
+}
+function resolveIcon(type) {
+  switch (type) {
+    case "success":
+      return successIcon;
+    case "error":
+      return errorIcon;
+    case "warning":
+      return warningIcon;
+    case "loading":
+      return loadingIcon;
+    case "info":
+    default:
+      return infoIcon;
+  }
+}
+function startTimer(toastItem, element) {
+  const { duration } = toastItem;
+  if (!Number.isFinite(duration)) {
+    timers.delete(toastItem.id);
+    return;
+  }
+  const timer = {
+    timeoutId: 0,
+    startedAt: Date.now(),
+    remaining: duration
+  };
+  const schedule = () => {
+    timer.startedAt = Date.now();
+    timer.timeoutId = window.setTimeout(() => {
+      toast.dismiss(toastItem.id);
+    }, timer.remaining);
+  };
+  schedule();
+  timers.set(toastItem.id, timer);
+  attachHoverEvents(element, toastItem.id);
+  attachSwipeGesture(
+    element,
+    toastItem.id,
+    toastItem.position,
+    () => pauseTimer(toastItem.id, element),
+    () => resumeTimer(toastItem.id, element)
+  );
+}
+function pauseTimer(id, element) {
+  const timer = timers.get(id);
+  if (!timer) return;
+  clearTimeout(timer.timeoutId);
+  timer.remaining -= Date.now() - timer.startedAt;
+  const progress = element.querySelector(".luma-progress");
+  if (progress) progress.style.animationPlayState = "paused";
+}
+function resumeTimer(id, element) {
+  const timer = timers.get(id);
+  if (!timer) return;
+  timer.startedAt = Date.now();
+  timer.timeoutId = window.setTimeout(() => {
+    toast.dismiss(id);
+  }, timer.remaining);
+  const progress = element.querySelector(".luma-progress");
+  if (progress) progress.style.animationPlayState = "running";
+}
+function attachHoverEvents(element, toastId) {
+  element.addEventListener("mouseenter", () => pauseTimer(toastId, element));
+  element.addEventListener("mouseleave", () => resumeTimer(toastId, element));
+}
+function removeToast(id, element) {
+  const timer = timers.get(id);
+  if (timer) {
+    clearTimeout(timer.timeoutId);
+    timers.delete(id);
+  }
+  if (element.dataset.removing === "true") return;
+  element.dataset.removing = "true";
+  requestAnimationFrame(() => {
+    element.classList.add("luma-toast-exit");
+  });
+  const cleanup = () => {
+    const container = element.parentElement;
+    element.remove();
+    renderedToasts.delete(id);
+    if (container && container.childElementCount === 0) {
+      const position = container.dataset.position;
+      removeContainer(position);
+    }
+  };
+  const handleTransitionEnd = (event) => {
+    if (event.target !== element) return;
+    element.removeEventListener("transitionend", handleTransitionEnd);
+    cleanup();
+  };
+  element.addEventListener("transitionend", handleTransitionEnd);
+  window.setTimeout(() => {
+    if (element.isConnected) {
+      element.removeEventListener("transitionend", handleTransitionEnd);
+      cleanup();
+    }
+  }, ANIMATION_EXIT_MS + 50);
+}
+
+exports.ANIMATION_ENTER_MS = ANIMATION_ENTER_MS;
+exports.ANIMATION_EXIT_MS = ANIMATION_EXIT_MS;
+exports.ANIMATION_STACK_MS = ANIMATION_STACK_MS;
+exports.CLASS_ACTION = CLASS_ACTION;
+exports.CLASS_CARD = CLASS_CARD;
+exports.CLASS_CLOSE = CLASS_CLOSE;
+exports.CLASS_CONTAINER = CLASS_CONTAINER;
+exports.CLASS_CONTENT = CLASS_CONTENT;
+exports.CLASS_DESCRIPTION = CLASS_DESCRIPTION;
+exports.CLASS_EXIT = CLASS_EXIT;
+exports.CLASS_ICON = CLASS_ICON;
+exports.CLASS_PROGRESS = CLASS_PROGRESS;
+exports.CLASS_TITLE = CLASS_TITLE;
+exports.CLASS_TOAST = CLASS_TOAST;
+exports.CSS_VARS = CSS_VARS;
+exports.DEFAULT_ANIMATION_ENTER = DEFAULT_ANIMATION_ENTER;
+exports.DEFAULT_ANIMATION_EXIT = DEFAULT_ANIMATION_EXIT;
+exports.DEFAULT_ANIMATION_SPEED = DEFAULT_ANIMATION_SPEED;
+exports.DEFAULT_CLOSE_ON_CLICK = DEFAULT_CLOSE_ON_CLICK;
+exports.DEFAULT_DISMISSIBLE = DEFAULT_DISMISSIBLE;
+exports.DEFAULT_DURATION = DEFAULT_DURATION;
+exports.DEFAULT_POSITION = DEFAULT_POSITION;
+exports.DEFAULT_PROGRESS_POS = DEFAULT_PROGRESS_POS;
+exports.DEFAULT_SHOW_ICON = DEFAULT_SHOW_ICON;
+exports.DEFAULT_THEME = DEFAULT_THEME;
+exports.DURATION_DEFAULT = DURATION_DEFAULT;
+exports.DURATION_INFINITE = DURATION_INFINITE;
+exports.DURATION_LONG = DURATION_LONG;
+exports.DURATION_SHORT = DURATION_SHORT;
+exports.MAX_VISIBLE_TOASTS = MAX_VISIBLE_TOASTS;
+exports.STACK_GAP = STACK_GAP;
+exports.TOAST_GAP_PX = TOAST_GAP_PX;
+exports.TOAST_WIDTH_PX = TOAST_WIDTH_PX;
+exports.Z_INDEX_BASE = Z_INDEX_BASE;
+exports.configure = configure;
+exports.initializeRenderer = initializeRenderer;
+exports.toast = toast;
+exports.toastManager = toastManager;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map