@wello-dev/notifications 0.0.0-stage → 1.0.0

package/dist/index.js

@@ -0,0 +1,1383 @@
+"use client";
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles.css
+styleInject('@layer theme, base, components, utilities;\n@layer components {\n  .wello-notifications-toaster {\n    --wello-notifications-bg: rgb(255 255 255 / 0.95);\n    --wello-notifications-fg: #0f172a;\n    --wello-notifications-muted: #64748b;\n    --wello-notifications-border: rgb(226 232 240 / 0.7);\n    --wello-notifications-ring: rgb(0 0 0 / 0.05);\n    --wello-notifications-hover: rgb(0 0 0 / 0.05);\n    --wello-notifications-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.22);\n    --wello-notifications-radius: 16px;\n    --wello-notifications-font: inherit;\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n    width: var(--wello-notifications-width, 390px);\n    max-width: calc(100vw - 2 * var(--wello-notifications-offset, 16px));\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    pointer-events: none;\n    font-family: var(--wello-notifications-font);\n    color-scheme: light;\n  }\n  .dark .wello-notifications-toaster:not([data-theme=light]),\n  [data-theme=dark] .wello-notifications-toaster:not([data-theme=light]),\n  .wello-notifications-toaster[data-theme=dark] {\n    --wello-notifications-bg: rgb(15 23 42 / 0.92);\n    --wello-notifications-fg: #f1f5f9;\n    --wello-notifications-muted: #94a3b8;\n    --wello-notifications-border: rgb(255 255 255 / 0.1);\n    --wello-notifications-ring: rgb(255 255 255 / 0.06);\n    --wello-notifications-hover: rgb(255 255 255 / 0.1);\n    --wello-notifications-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.45);\n    color-scheme: dark;\n  }\n  .wello-notifications-toaster[data-y=top] {\n    top: calc(var(--wello-notifications-offset, 16px) - var(--wello-notifications-gap, 12px) / 2);\n  }\n  .wello-notifications-toaster[data-y=bottom] {\n    bottom: calc(var(--wello-notifications-offset, 16px) - var(--wello-notifications-gap, 12px) / 2);\n    flex-direction: column-reverse;\n  }\n  .wello-notifications-toaster[data-x=start] {\n    inset-inline-start: var(--wello-notifications-offset, 16px);\n  }\n  .wello-notifications-toaster[data-x=end] {\n    inset-inline-end: var(--wello-notifications-offset, 16px);\n  }\n  .wello-notifications-toaster[data-x=center] {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  @media (max-width: 480px) {\n    .wello-notifications-toaster {\n      width: auto;\n      max-width: none;\n      inset-inline: var(--wello-notifications-offset, 16px);\n      transform: none;\n    }\n    .wello-notifications-toaster[data-x=center] {\n      left: var(--wello-notifications-offset, 16px);\n    }\n  }\n  .wello-notifications-item {\n    display: grid;\n    grid-template-rows: 1fr;\n    transition: grid-template-rows 200ms ease 110ms;\n  }\n  .wello-notifications-item-inner {\n    min-height: 0;\n    padding-block: calc(var(--wello-notifications-gap, 12px) / 2);\n  }\n  .wello-notifications-item[data-state=closing] {\n    grid-template-rows: 0fr;\n  }\n  .wello-notifications-item[data-state=closing] .wello-notifications-item-inner {\n    overflow: hidden;\n  }\n  .wello-notifications-toast,\n  .wello-notifications-custom {\n    pointer-events: auto;\n    touch-action: pan-y;\n    transform: translateX(var(--wello-notifications-swipe, 0px));\n    transition:\n      transform 200ms ease,\n      opacity 160ms ease,\n      scale 160ms ease;\n    animation: wello-notifications-in 260ms cubic-bezier(0.21, 1.02, 0.73, 1);\n  }\n  .wello-notifications-toaster[data-y=top] .wello-notifications-toast,\n  .wello-notifications-toaster[data-y=top] .wello-notifications-custom {\n    --wello-notifications-enter: -14px;\n  }\n  .wello-notifications-toast[data-swiping],\n  .wello-notifications-custom[data-swiping] {\n    transition: none;\n    user-select: none;\n  }\n  .wello-notifications-item[data-state=closing] .wello-notifications-toast,\n  .wello-notifications-item[data-state=closing] .wello-notifications-custom {\n    opacity: 0;\n    scale: 0.96;\n  }\n  .wello-notifications-item[data-swiped=end] .wello-notifications-toast,\n  .wello-notifications-item[data-swiped=end] .wello-notifications-custom {\n    transform: translateX(calc(100% + 32px));\n  }\n  .wello-notifications-item[data-swiped=start] .wello-notifications-toast,\n  .wello-notifications-item[data-swiped=start] .wello-notifications-custom {\n    transform: translateX(calc(-100% - 32px));\n  }\n  .wello-notifications-toast {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    box-sizing: border-box;\n    width: 100%;\n    padding-block: 14px;\n    padding-inline: 14px 8px;\n    overflow: hidden;\n    border: 1px solid var(--wello-notifications-border);\n    border-radius: var(--wello-notifications-radius);\n    background: var(--wello-notifications-bg);\n    color: var(--wello-notifications-fg);\n    box-shadow: var(--wello-notifications-shadow), 0 0 0 1px var(--wello-notifications-ring);\n    backdrop-filter: blur(24px) saturate(1.5);\n    -webkit-backdrop-filter: blur(24px) saturate(1.5);\n    font-size: 14px;\n    line-height: 1.4;\n    text-align: start;\n  }\n  .wello-notifications-toast::before {\n    content: "";\n    position: absolute;\n    inset-block: 0.55rem;\n    inset-inline-start: 0;\n    width: 3px;\n    border-radius: 999px;\n    background: var(--wello-notifications-tone);\n  }\n  .wello-notifications-icon {\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    border-radius: var(--wello-notifications-radius);\n    color: var(--wello-notifications-tone);\n    background: color-mix(in oklab, var(--wello-notifications-tone) 16%, transparent);\n    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wello-notifications-tone) 28%, transparent);\n    font-size: 1.15rem;\n  }\n  .wello-notifications-content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n    padding-block: 2px;\n    padding-inline-end: 8px;\n    overflow-wrap: anywhere;\n  }\n  .wello-notifications-toast > .wello-notifications-content:first-child {\n    padding-inline-start: 2px;\n  }\n  .wello-notifications-title {\n    margin: 0;\n    font-weight: 600;\n    line-height: 1.35;\n    color: var(--wello-notifications-tone);\n  }\n  .wello-notifications-toast[data-type=default] .wello-notifications-title,\n  .wello-notifications-toast[data-type=loading] .wello-notifications-title {\n    color: var(--wello-notifications-fg);\n  }\n  .wello-notifications-description {\n    margin: 0;\n    color: var(--wello-notifications-muted);\n    line-height: 1.55;\n  }\n  .wello-notifications-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    margin-top: 6px;\n  }\n  .wello-notifications-button {\n    display: inline-flex;\n    align-items: center;\n    height: 28px;\n    padding-inline: 10px;\n    border: 1px solid transparent;\n    border-radius: 8px;\n    font: inherit;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: background-color 120ms ease, filter 120ms ease;\n  }\n  .wello-notifications-action {\n    background: var(--wello-notifications-tone);\n    color: #fff;\n  }\n  .wello-notifications-toast[data-type=default] .wello-notifications-action,\n  .wello-notifications-toast[data-type=loading] .wello-notifications-action {\n    background: var(--wello-notifications-fg);\n    color: var(--wello-notifications-bg);\n  }\n  .wello-notifications-action:hover {\n    filter: brightness(1.08);\n  }\n  .wello-notifications-cancel {\n    background: transparent;\n    border-color: var(--wello-notifications-border);\n    color: var(--wello-notifications-fg);\n  }\n  .wello-notifications-cancel:hover {\n    background: var(--wello-notifications-hover);\n  }\n  .wello-notifications-button:focus-visible,\n  .wello-notifications-close:focus-visible {\n    outline: 2px solid var(--wello-notifications-tone);\n    outline-offset: 2px;\n  }\n  .wello-notifications-close {\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    margin: -2px 0;\n    padding: 0;\n    border: 0;\n    border-radius: 10px;\n    background: transparent;\n    color: var(--wello-notifications-muted);\n    font-size: 16px;\n    cursor: pointer;\n    transition: background-color 120ms ease, color 120ms ease;\n  }\n  .wello-notifications-close:hover {\n    background: var(--wello-notifications-hover);\n    color: var(--wello-notifications-fg);\n  }\n  .wello-notifications-progress {\n    position: absolute;\n    inset-inline: 0;\n    bottom: 0;\n    height: 3px;\n    background: var(--wello-notifications-tone);\n    opacity: 0.45;\n    transform-origin: left;\n    animation-name: wello-notifications-progress;\n    animation-timing-function: linear;\n    animation-fill-mode: forwards;\n  }\n  [dir=rtl] .wello-notifications-progress {\n    transform-origin: right;\n  }\n  .wello-notifications-spin {\n    animation: wello-notifications-spin 0.9s linear infinite;\n  }\n  @keyframes wello-notifications-in {\n    from {\n      opacity: 0;\n      translate: 0 var(--wello-notifications-enter, 14px);\n      scale: 0.96;\n    }\n  }\n  @keyframes wello-notifications-progress {\n    from {\n      transform: scaleX(1);\n    }\n    to {\n      transform: scaleX(0);\n    }\n  }\n  @keyframes wello-notifications-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .wello-notifications-toast,\n    .wello-notifications-custom,\n    .wello-notifications-item {\n      animation-duration: 1ms;\n      transition-duration: 1ms;\n      transition-delay: 0ms;\n    }\n    .wello-notifications-spin {\n      animation-duration: 2.5s;\n    }\n  }\n}\n');
+
+// src/core/store.ts
+var state = { toasts: [], paused: false };
+var listeners = /* @__PURE__ */ new Set();
+var counter = 0;
+function emit(next) {
+  state = next;
+  listeners.forEach((listener) => listener());
+}
+var toastStore = {
+  getState: () => state,
+  subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+  /** `true` when at least one `<Toaster>` is mounted */
+  hasToaster: () => listeners.size > 0,
+  nextId: () => `wello-notifications-${++counter}`,
+  /** Adds a toast, or replaces the open one with the same id. */
+  upsert(record) {
+    const existing = state.toasts.find((t) => t.id === record.id);
+    if (existing?.open) {
+      emit({
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === record.id ? { ...record, version: t.version + 1, createdAt: t.createdAt, open: true } : t
+        )
+      });
+    } else {
+      const fresh = { ...record, version: 0, createdAt: Date.now(), open: true };
+      emit({ ...state, toasts: [fresh, ...state.toasts.filter((t) => t.id !== record.id)] });
+    }
+    return record.id;
+  },
+  /** Merges changes into an open toast. Returns false when there is none with this id. */
+  patch(id, changes) {
+    const existing = state.toasts.find((t) => t.id === id && t.open);
+    if (!existing) return false;
+    emit({
+      ...state,
+      toasts: state.toasts.map(
+        (t) => t === existing ? { ...t, ...changes, id, version: t.version + 1, open: true } : t
+      )
+    });
+    return true;
+  },
+  /** Starts closing one toast, or all of them. */
+  dismiss(id, reason = "close") {
+    const closing = state.toasts.filter((t) => t.open && (id === void 0 || t.id === id));
+    if (!closing.length) return;
+    const keep = toastStore.hasToaster();
+    emit({
+      ...state,
+      toasts: keep ? state.toasts.map((t) => closing.includes(t) ? { ...t, open: false } : t) : state.toasts.filter((t) => !closing.includes(t))
+    });
+    for (const t of closing) {
+      if (reason === "auto") t.onAutoClose?.(t);
+      t.onClose?.(t);
+    }
+  },
+  /** Removes a toast right away (after its exit animation). */
+  remove(id) {
+    if (!state.toasts.some((t) => t.id === id)) return;
+    emit({ ...state, toasts: state.toasts.filter((t) => t.id !== id) });
+  },
+  setPaused(paused) {
+    if (state.paused !== paused) emit({ ...state, paused });
+  },
+  /** Test helper: forget every toast. */
+  reset() {
+    emit({ toasts: [], paused: false });
+  }
+};
+
+// src/core/toast.ts
+function toRecord(type, message, options = {}) {
+  const { id, title, description, autoClose, duration, ...rest } = options;
+  const resolvedTitle = title ?? message;
+  const resolvedDescription = description ?? (title != null && title !== message ? message : void 0);
+  return {
+    ...rest,
+    id: id ?? toastStore.nextId(),
+    type,
+    title: resolvedTitle,
+    description: resolvedDescription,
+    duration: duration ?? autoClose
+  };
+}
+function show(type, message, options) {
+  return toastStore.upsert(toRecord(type, message, options));
+}
+var typed = (type) => (message, options) => show(type, message, options);
+function promise(source, messages, options) {
+  const id = show("loading", messages.loading, options);
+  const run = typeof source === "function" ? source() : source;
+  const settle = (type, content) => toastStore.upsert(toRecord(type, content, { ...options, id }));
+  return run.then(
+    (data) => {
+      settle("success", typeof messages.success === "function" ? messages.success(data) : messages.success);
+      messages.finally?.();
+      return data;
+    },
+    (error) => {
+      settle("error", typeof messages.error === "function" ? messages.error(error) : messages.error);
+      messages.finally?.();
+      throw error;
+    }
+  );
+}
+function update(id, changes) {
+  if (changes !== null && typeof changes === "object" && !isReactElement(changes)) {
+    const { id: _ignored, autoClose, duration, ...rest } = changes;
+    const patch = { ...rest };
+    if (duration !== void 0 || autoClose !== void 0) patch.duration = duration ?? autoClose;
+    return toastStore.patch(id, patch);
+  }
+  return toastStore.patch(id, { title: changes });
+}
+function isReactElement(value) {
+  return "$$typeof" in value;
+}
+var dismiss = (id) => toastStore.dismiss(id);
+var toast = Object.assign(typed("default"), {
+  success: typed("success"),
+  error: typed("error"),
+  /** Same as `error` */
+  danger: typed("error"),
+  warning: typed("warning"),
+  info: typed("info"),
+  loading: typed("loading"),
+  /** Same as `toast()` */
+  message: typed("default"),
+  /** Fully custom content; `render` gets the toast (use `toast.dismiss(t.id)` to close it). */
+  custom: (render, options) => toastStore.upsert({ ...toRecord("default", null, options), title: void 0, render }),
+  promise,
+  update,
+  /** Closes one toast, or all of them without an id */
+  dismiss,
+  /** Same as `dismiss` */
+  close: dismiss,
+  /** Closes every toast */
+  clear: () => toastStore.dismiss(),
+  /** Stops every timer, e.g. while a dialog is open */
+  pauseAll: () => toastStore.setPaused(true),
+  resumeAll: () => toastStore.setPaused(false),
+  /** `true` while the toast is open */
+  isActive: (id) => toastStore.getState().toasts.some((t) => t.id === id && t.open)
+});
+
+// src/core/use-toasts.ts
+import { useSyncExternalStore } from "react";
+var NONE = [];
+function useToasts() {
+  return useSyncExternalStore(
+    toastStore.subscribe,
+    () => toastStore.getState().toasts,
+    () => NONE
+  ).filter((t) => t.open);
+}
+
+// src/components/toaster.tsx
+import {
+  useEffect as useEffect2,
+  useMemo,
+  useState as useState2,
+  useSyncExternalStore as useSyncExternalStore2
+} from "react";
+import { createPortal } from "react-dom";
+
+// src/lib/colors.ts
+var PALETTE = {
+  slate: [
+    "#f8fafc",
+    "#f1f5f9",
+    "#e2e8f0",
+    "#cbd5e1",
+    "#94a3b8",
+    "#64748b",
+    "#475569",
+    "#334155",
+    "#1e293b",
+    "#0f172a",
+    "#020617"
+  ],
+  gray: [
+    "#f9fafb",
+    "#f3f4f6",
+    "#e5e7eb",
+    "#d1d5db",
+    "#9ca3af",
+    "#6b7280",
+    "#4b5563",
+    "#374151",
+    "#1f2937",
+    "#111827",
+    "#030712"
+  ],
+  zinc: [
+    "#fafafa",
+    "#f4f4f5",
+    "#e4e4e7",
+    "#d4d4d8",
+    "#a1a1aa",
+    "#71717a",
+    "#52525b",
+    "#3f3f46",
+    "#27272a",
+    "#18181b",
+    "#09090b"
+  ],
+  neutral: [
+    "#fafafa",
+    "#f5f5f5",
+    "#e5e5e5",
+    "#d4d4d4",
+    "#a3a3a3",
+    "#737373",
+    "#525252",
+    "#404040",
+    "#262626",
+    "#171717",
+    "#0a0a0a"
+  ],
+  stone: [
+    "#fafaf9",
+    "#f5f5f4",
+    "#e7e5e4",
+    "#d6d3d1",
+    "#a8a29e",
+    "#78716c",
+    "#57534e",
+    "#44403c",
+    "#292524",
+    "#1c1917",
+    "#0c0a09"
+  ],
+  red: [
+    "#fef2f2",
+    "#fee2e2",
+    "#fecaca",
+    "#fca5a5",
+    "#f87171",
+    "#ef4444",
+    "#dc2626",
+    "#b91c1c",
+    "#991b1b",
+    "#7f1d1d",
+    "#450a0a"
+  ],
+  orange: [
+    "#fff7ed",
+    "#ffedd5",
+    "#fed7aa",
+    "#fdba74",
+    "#fb923c",
+    "#f97316",
+    "#ea580c",
+    "#c2410c",
+    "#9a3412",
+    "#7c2d12",
+    "#431407"
+  ],
+  amber: [
+    "#fffbeb",
+    "#fef3c7",
+    "#fde68a",
+    "#fcd34d",
+    "#fbbf24",
+    "#f59e0b",
+    "#d97706",
+    "#b45309",
+    "#92400e",
+    "#78350f",
+    "#451a03"
+  ],
+  yellow: [
+    "#fefce8",
+    "#fef9c3",
+    "#fef08a",
+    "#fde047",
+    "#facc15",
+    "#eab308",
+    "#ca8a04",
+    "#a16207",
+    "#854d0e",
+    "#713f12",
+    "#422006"
+  ],
+  lime: [
+    "#f7fee7",
+    "#ecfccb",
+    "#d9f99d",
+    "#bef264",
+    "#a3e635",
+    "#84cc16",
+    "#65a30d",
+    "#4d7c0f",
+    "#3f6212",
+    "#365314",
+    "#1a2e05"
+  ],
+  green: [
+    "#f0fdf4",
+    "#dcfce7",
+    "#bbf7d0",
+    "#86efac",
+    "#4ade80",
+    "#22c55e",
+    "#16a34a",
+    "#15803d",
+    "#166534",
+    "#14532d",
+    "#052e16"
+  ],
+  emerald: [
+    "#ecfdf5",
+    "#d1fae5",
+    "#a7f3d0",
+    "#6ee7b7",
+    "#34d399",
+    "#10b981",
+    "#059669",
+    "#047857",
+    "#065f46",
+    "#064e3b",
+    "#022c22"
+  ],
+  teal: [
+    "#f0fdfa",
+    "#ccfbf1",
+    "#99f6e4",
+    "#5eead4",
+    "#2dd4bf",
+    "#14b8a6",
+    "#0d9488",
+    "#0f766e",
+    "#115e59",
+    "#134e4a",
+    "#042f2e"
+  ],
+  cyan: [
+    "#ecfeff",
+    "#cffafe",
+    "#a5f3fc",
+    "#67e8f9",
+    "#22d3ee",
+    "#06b6d4",
+    "#0891b2",
+    "#0e7490",
+    "#155e75",
+    "#164e63",
+    "#083344"
+  ],
+  sky: [
+    "#f0f9ff",
+    "#e0f2fe",
+    "#bae6fd",
+    "#7dd3fc",
+    "#38bdf8",
+    "#0ea5e9",
+    "#0284c7",
+    "#0369a1",
+    "#075985",
+    "#0c4a6e",
+    "#082f49"
+  ],
+  blue: [
+    "#eff6ff",
+    "#dbeafe",
+    "#bfdbfe",
+    "#93c5fd",
+    "#60a5fa",
+    "#3b82f6",
+    "#2563eb",
+    "#1d4ed8",
+    "#1e40af",
+    "#1e3a8a",
+    "#172554"
+  ],
+  indigo: [
+    "#eef2ff",
+    "#e0e7ff",
+    "#c7d2fe",
+    "#a5b4fc",
+    "#818cf8",
+    "#6366f1",
+    "#4f46e5",
+    "#4338ca",
+    "#3730a3",
+    "#312e81",
+    "#1e1b4b"
+  ],
+  violet: [
+    "#f5f3ff",
+    "#ede9fe",
+    "#ddd6fe",
+    "#c4b5fd",
+    "#a78bfa",
+    "#8b5cf6",
+    "#7c3aed",
+    "#6d28d9",
+    "#5b21b6",
+    "#4c1d95",
+    "#2e1065"
+  ],
+  purple: [
+    "#faf5ff",
+    "#f3e8ff",
+    "#e9d5ff",
+    "#d8b4fe",
+    "#c084fc",
+    "#a855f7",
+    "#9333ea",
+    "#7e22ce",
+    "#6b21a8",
+    "#581c87",
+    "#3b0764"
+  ],
+  fuchsia: [
+    "#fdf4ff",
+    "#fae8ff",
+    "#f5d0fe",
+    "#f0abfc",
+    "#e879f9",
+    "#d946ef",
+    "#c026d3",
+    "#a21caf",
+    "#86198f",
+    "#701a75",
+    "#4a044e"
+  ],
+  pink: [
+    "#fdf2f8",
+    "#fce7f3",
+    "#fbcfe8",
+    "#f9a8d4",
+    "#f472b6",
+    "#ec4899",
+    "#db2777",
+    "#be185d",
+    "#9d174d",
+    "#831843",
+    "#500724"
+  ],
+  rose: [
+    "#fff1f2",
+    "#ffe4e6",
+    "#fecdd3",
+    "#fda4af",
+    "#fb7185",
+    "#f43f5e",
+    "#e11d48",
+    "#be123c",
+    "#9f1239",
+    "#881337",
+    "#4c0519"
+  ]
+};
+var SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+function resolveColor(color) {
+  const match = /^([a-z]+)(?:-(\d{2,3}))?$/.exec(color);
+  const palette = match && PALETTE[match[1]];
+  if (!palette) return color;
+  const index = SHADES.indexOf(match[2] === void 0 ? 500 : Number(match[2]));
+  return index === -1 ? color : palette[index];
+}
+
+// src/lib/labels.ts
+var LABELS = {
+  en: { region: "Notifications", close: "Close" },
+  ar: { region: "\u0627\u0644\u0625\u0634\u0639\u0627\u0631\u0627\u062A", close: "\u0625\u063A\u0644\u0627\u0642" }
+};
+function resolveLabels(locale = "en", overrides) {
+  return { ...LABELS[locale] ?? LABELS.en, ...overrides };
+}
+
+// src/lib/utils.ts
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+var toCssSize = (value) => typeof value === "number" ? `${value}px` : value;
+
+// src/components/icons.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function icon(paths) {
+  return function Icon(props) {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2.25,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        ...props,
+        children: paths
+      }
+    );
+  };
+}
+var SuccessIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "m9 12 2 2 4-4" })
+  ] })
+);
+var ErrorIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "m15 9-6 6M9 9l6 6" })
+  ] })
+);
+var WarningIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 8v4M12 16h.01" })
+  ] })
+);
+var InfoIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 16v-4M12 8h.01" })
+  ] })
+);
+var LoadingIcon = icon(/* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }));
+var CloseIcon = icon(/* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }));
+var DEFAULT_ICONS = {
+  success: /* @__PURE__ */ jsx(SuccessIcon, {}),
+  error: /* @__PURE__ */ jsx(ErrorIcon, {}),
+  warning: /* @__PURE__ */ jsx(WarningIcon, {}),
+  info: /* @__PURE__ */ jsx(InfoIcon, {}),
+  loading: /* @__PURE__ */ jsx(LoadingIcon, { className: "wello-notifications-spin" })
+};
+
+// src/components/toast-item.tsx
+import {
+  useEffect,
+  useRef,
+  useState
+} from "react";
+
+// src/sound/notification-sound.ts
+var TIMBRES = {
+  // Warm bell: octave and a slightly inharmonic upper partial for shimmer.
+  bell: [
+    { ratio: 1, gain: 1, decay: 1 },
+    { ratio: 2, gain: 0.28, decay: 0.55 },
+    { ratio: 3.01, gain: 0.1, decay: 0.32 },
+    { ratio: 5.43, gain: 0.035, decay: 0.16 }
+  ],
+  // Wooden mallet: strong fundamental, quick bright "knock" on top.
+  marimba: [
+    { ratio: 1, gain: 1, decay: 1 },
+    { ratio: 3.98, gain: 0.16, decay: 0.12 },
+    { ratio: 9.8, gain: 0.03, decay: 0.05 }
+  ],
+  // Soft, darker string pluck for errors.
+  pluck: [
+    { ratio: 1, gain: 1, decay: 1, type: "triangle" },
+    { ratio: 2, gain: 0.18, decay: 0.4 },
+    { ratio: 0.5, gain: 0.22, decay: 0.7 }
+  ],
+  // Thin and bright, cuts through for urgent alerts.
+  glass: [
+    { ratio: 1, gain: 1, decay: 1 },
+    { ratio: 2.76, gain: 0.22, decay: 0.45 },
+    { ratio: 5.4, gain: 0.07, decay: 0.2 }
+  ]
+};
+var N = {
+  G4: 392,
+  A4: 440,
+  C5: 523.25,
+  D5: 587.33,
+  E5: 659.25,
+  F5: 698.46,
+  G5: 783.99,
+  A5: 880,
+  B5: 987.77,
+  C6: 1046.5,
+  E6: 1318.51,
+  G6: 1567.98
+};
+var SOUNDS = {
+  // Rising major arpeggio: bright and "done".
+  success: [
+    { f: N.C5, at: 0, dur: 0.5, gain: 0.7, timbre: "marimba" },
+    { f: N.E5, at: 0.075, dur: 0.5, gain: 0.7, timbre: "marimba" },
+    { f: N.G5, at: 0.15, dur: 0.55, gain: 0.75, timbre: "marimba" },
+    { f: N.C6, at: 0.225, dur: 0.9, gain: 0.6, timbre: "bell" }
+  ],
+  // Falling minor step, low and soft: noticeable without being harsh.
+  error: [
+    { f: N.E5, at: 0, dur: 0.35, gain: 0.75, timbre: "pluck" },
+    { f: N.C5, at: 0.13, dur: 0.6, gain: 0.85, timbre: "pluck" }
+  ],
+  // Two even knocks: "look here".
+  warning: [
+    { f: N.D5, at: 0, dur: 0.32, gain: 0.85, timbre: "marimba" },
+    { f: N.D5, at: 0.17, dur: 0.45, gain: 0.85, timbre: "marimba" }
+  ],
+  // A single soft bell with its octave.
+  info: [
+    { f: N.A5, at: 0, dur: 1.1, gain: 0.95, timbre: "bell" },
+    { f: N.E6, at: 0.03, dur: 0.6, gain: 0.25, timbre: "bell" }
+  ],
+  // Chat-style "ding-dong".
+  message: [
+    { f: N.E6, at: 0, dur: 0.6, gain: 0.55, timbre: "bell" },
+    { f: N.B5, at: 0.12, dur: 1, gain: 0.65, timbre: "bell" }
+  ],
+  // Three quick rising pairs: urgent, repeats so it isn't missed.
+  critical: [0, 0.32, 0.64].flatMap((start) => [
+    { f: N.A5, at: start, dur: 0.22, gain: 0.7, timbre: "glass" },
+    { f: N.E6, at: start + 0.1, dur: 0.3, gain: 0.7, timbre: "glass" }
+  ]),
+  // Tiny bubble pop for plain toasts.
+  pop: [{ f: N.G5, at: 0, dur: 0.3, gain: 2.2, timbre: "marimba", glide: 1.6 }]
+};
+var PRIORITY_SOUNDS = {
+  critical: "critical",
+  high: "message",
+  normal: "info",
+  low: "pop"
+};
+var isSoundName = (value) => value in SOUNDS;
+var toSoundName = (name) => isSoundName(name) ? name : PRIORITY_SOUNDS[name] ?? "info";
+var ATTACK = 6e-3;
+function scheduleNote(ctx, out, note, start) {
+  const t0 = start + note.at;
+  for (const partial of TIMBRES[note.timbre]) {
+    const frequency = note.f * partial.ratio;
+    if (frequency > 16e3) continue;
+    const peak = (note.gain ?? 1) * partial.gain;
+    const end = t0 + ATTACK + Math.max(0.04, note.dur * partial.decay);
+    const oscillator = ctx.createOscillator();
+    const envelope = ctx.createGain();
+    oscillator.type = partial.type ?? "sine";
+    if (note.glide) {
+      oscillator.frequency.setValueAtTime(frequency * note.glide, t0);
+      oscillator.frequency.exponentialRampToValueAtTime(frequency, t0 + 0.04);
+    } else {
+      oscillator.frequency.setValueAtTime(frequency, t0);
+    }
+    envelope.gain.setValueAtTime(1e-4, t0);
+    envelope.gain.exponentialRampToValueAtTime(peak, t0 + ATTACK);
+    envelope.gain.exponentialRampToValueAtTime(1e-4, end);
+    oscillator.connect(envelope);
+    envelope.connect(out);
+    oscillator.start(t0);
+    oscillator.stop(end + 0.02);
+  }
+}
+function createRoom(ctx) {
+  const seconds = 1.2;
+  const length = Math.floor(ctx.sampleRate * seconds);
+  const buffer = ctx.createBuffer(2, length, ctx.sampleRate);
+  for (let channel = 0; channel < 2; channel++) {
+    const data = buffer.getChannelData(channel);
+    for (let i = 0; i < length; i++) {
+      data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, 3.5);
+    }
+  }
+  return buffer;
+}
+var buses = /* @__PURE__ */ new WeakMap();
+function bus(ctx) {
+  const existing = buses.get(ctx);
+  if (existing) return existing;
+  const input = ctx.createGain();
+  const tone = ctx.createBiquadFilter();
+  tone.type = "lowpass";
+  tone.frequency.value = 7500;
+  const reverb = ctx.createConvolver();
+  reverb.buffer = createRoom(ctx);
+  const wet = ctx.createGain();
+  wet.gain.value = 0.16;
+  const compressor = ctx.createDynamicsCompressor();
+  compressor.threshold.value = -16;
+  compressor.knee.value = 10;
+  compressor.ratio.value = 4;
+  compressor.attack.value = 2e-3;
+  compressor.release.value = 0.2;
+  input.connect(tone);
+  tone.connect(compressor);
+  tone.connect(reverb);
+  reverb.connect(wet);
+  wet.connect(compressor);
+  compressor.connect(ctx.destination);
+  const created = { input };
+  buses.set(ctx, created);
+  return created;
+}
+function scheduleSound(ctx, name, volume = 0.7, when = ctx.currentTime + 0.01) {
+  const notes = SOUNDS[toSoundName(name)];
+  const level = ctx.createGain();
+  level.gain.value = Math.min(1, Math.max(0, volume)) * 0.32;
+  level.connect(bus(ctx).input);
+  for (const note of notes) scheduleNote(ctx, level, note, when);
+  return Math.max(...notes.map((n) => n.at + n.dur)) + 1.2;
+}
+var context = null;
+var buffers = /* @__PURE__ */ new Map();
+function audioContext() {
+  if (typeof window === "undefined") return null;
+  try {
+    const Ctor = window.AudioContext ?? window.webkitAudioContext;
+    if (!Ctor) return null;
+    context ?? (context = new Ctor());
+    if (context.state === "suspended") void context.resume().catch(() => {
+    });
+    return context;
+  } catch {
+    return null;
+  }
+}
+function playSound(name = "info", options = {}) {
+  const ctx = audioContext();
+  if (!ctx) return;
+  try {
+    scheduleSound(ctx, name, options.volume ?? 0.7);
+  } catch {
+  }
+}
+function playTone(priority = "normal", volume = 0.7) {
+  playSound(priority, { volume });
+}
+var NOTIFICATION_SOUNDS = Object.keys(SOUNDS);
+async function playNotificationSound(url, options = {}) {
+  const { volume = 0.7, fallback = "info" } = options;
+  if (url && isSoundName(url)) return playSound(url, { volume });
+  if (url) {
+    const ctx = audioContext();
+    if (ctx) {
+      try {
+        let buffer = buffers.get(url);
+        if (!buffer) {
+          buffer = fetch(url).then((response) => {
+            if (!response.ok) throw new Error(`${response.status}`);
+            return response.arrayBuffer();
+          }).then((data) => ctx.decodeAudioData(data));
+          buffers.set(url, buffer);
+          buffer.catch(() => buffers.delete(url));
+        }
+        const source = ctx.createBufferSource();
+        const gain = ctx.createGain();
+        gain.gain.value = volume;
+        source.buffer = await buffer;
+        source.connect(gain);
+        gain.connect(ctx.destination);
+        source.start(0);
+        return;
+      } catch {
+      }
+    }
+    try {
+      const audio = new Audio(url);
+      audio.volume = volume;
+      await audio.play();
+      return;
+    } catch {
+    }
+  }
+  if (fallback) playSound(fallback, { volume });
+}
+
+// src/components/toast-item.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var EXIT_MS = 320;
+var SWIPE_THRESHOLD = 64;
+var TYPE_SOUNDS = {
+  success: "success",
+  error: "error",
+  warning: "warning",
+  info: "info",
+  default: "pop"
+};
+function ToastItem({ toast: toast2, settings, paused, labels }) {
+  const { id, open, version, type } = toast2;
+  const { duration, classNames, styles } = settings;
+  const cardRef = useRef(null);
+  const [swipedOut, setSwipedOut] = useState(null);
+  const part = (name, base) => ({
+    className: cx(base, classNames[name]),
+    style: styles[name]
+  });
+  const opened = useRef(false);
+  useEffect(() => {
+    if (opened.current) return;
+    opened.current = true;
+    toast2.onOpen?.(toast2);
+  }, []);
+  const soundedType = useRef(null);
+  useEffect(() => {
+    const sound = settings.sound;
+    if (!sound || !open || type === "loading" || soundedType.current === type) return;
+    soundedType.current = type;
+    const builtIn = TYPE_SOUNDS[type] ?? "info";
+    void playNotificationSound(typeof sound === "string" ? sound : builtIn, { fallback: builtIn });
+  }, [type, open]);
+  const remaining = useRef(duration);
+  const lastVersion = useRef(version);
+  if (lastVersion.current !== version) {
+    lastVersion.current = version;
+    remaining.current = duration;
+  }
+  useEffect(() => {
+    const left = remaining.current;
+    if (!open || paused || left === false || !Number.isFinite(left)) return;
+    const startedAt = Date.now();
+    const timer = setTimeout(() => toastStore.dismiss(id, "auto"), Math.max(0, left));
+    return () => {
+      clearTimeout(timer);
+      if (lastVersion.current === version) {
+        remaining.current = Math.max(0, left - (Date.now() - startedAt));
+      }
+    };
+  }, [id, open, paused, version, duration]);
+  useEffect(() => {
+    if (open) return;
+    const timer = setTimeout(() => toastStore.remove(id), EXIT_MS);
+    return () => clearTimeout(timer);
+  }, [id, open]);
+  const drag = useRef(null);
+  const canSwipe = settings.swipe && settings.dismissible && open;
+  function onPointerDown(event) {
+    if (!canSwipe || event.button !== 0) return;
+    if (event.target.closest("button, a, input, textarea, select")) return;
+    drag.current = { x: event.clientX, y: event.clientY, pointer: event.pointerId, dx: 0 };
+  }
+  function onPointerMove(event) {
+    const state2 = drag.current;
+    const card = cardRef.current;
+    if (!state2 || !card || event.pointerId !== state2.pointer) return;
+    const dx = event.clientX - state2.x;
+    if (state2.dx === 0 && Math.abs(dx) < 6) return;
+    if (state2.dx === 0 && Math.abs(event.clientY - state2.y) > Math.abs(dx)) {
+      drag.current = null;
+      return;
+    }
+    if (state2.dx === 0) card.setPointerCapture(event.pointerId);
+    state2.dx = dx;
+    card.dataset.swiping = "";
+    card.style.setProperty("--wello-notifications-swipe", `${dx}px`);
+    card.style.opacity = String(Math.max(0.2, 1 - Math.abs(dx) / 220));
+  }
+  function onPointerUp(event) {
+    const state2 = drag.current;
+    const card = cardRef.current;
+    drag.current = null;
+    if (!state2 || !card || event.pointerId !== state2.pointer) return;
+    delete card.dataset.swiping;
+    if (Math.abs(state2.dx) >= SWIPE_THRESHOLD) {
+      setSwipedOut(state2.dx > 0 ? "end" : "start");
+      toastStore.dismiss(id);
+      return;
+    }
+    card.style.removeProperty("--wello-notifications-swipe");
+    card.style.opacity = "";
+  }
+  function onKeyDown(event) {
+    if (event.key === "Escape" && settings.dismissible) {
+      event.stopPropagation();
+      toastStore.dismiss(id);
+    }
+  }
+  const important = toast2.important ?? type === "error";
+  const tone = { "--wello-notifications-tone": settings.color };
+  return /* @__PURE__ */ jsx2(
+    "li",
+    {
+      className: "wello-notifications-item",
+      "data-state": open ? "open" : "closing",
+      "data-swiped": swipedOut ?? void 0,
+      onKeyDown,
+      children: /* @__PURE__ */ jsx2("div", { className: "wello-notifications-item-inner", children: toast2.render ? /* @__PURE__ */ jsx2(
+        "div",
+        {
+          ref: cardRef,
+          className: cx("wello-notifications-custom", settings.className),
+          style: { ...tone, ...settings.style },
+          role: important ? "alert" : "status",
+          "aria-live": important ? "assertive" : "polite",
+          "aria-atomic": "true",
+          "data-type": type,
+          onPointerDown,
+          onPointerMove,
+          onPointerUp,
+          onPointerCancel: onPointerUp,
+          children: toast2.render(toast2)
+        }
+      ) : /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          ref: cardRef,
+          className: cx("wello-notifications-toast", classNames.toast, settings.className),
+          style: { ...tone, ...styles.toast, ...settings.style },
+          role: important ? "alert" : "status",
+          "aria-live": important ? "assertive" : "polite",
+          "aria-atomic": "true",
+          "data-type": type,
+          "data-dismissible": settings.dismissible || void 0,
+          onPointerDown,
+          onPointerMove,
+          onPointerUp,
+          onPointerCancel: onPointerUp,
+          children: [
+            settings.icon != null && settings.icon !== false && /* @__PURE__ */ jsx2("span", { ...part("icon", "wello-notifications-icon"), children: settings.icon }),
+            /* @__PURE__ */ jsxs2("div", { ...part("content", "wello-notifications-content"), children: [
+              toast2.title != null && toast2.title !== false && /* @__PURE__ */ jsx2("div", { ...part("title", "wello-notifications-title"), children: toast2.title }),
+              toast2.description != null && toast2.description !== false && /* @__PURE__ */ jsx2("div", { ...part("description", "wello-notifications-description"), children: toast2.description }),
+              (toast2.action || toast2.cancel) && /* @__PURE__ */ jsxs2("div", { ...part("actions", "wello-notifications-actions"), children: [
+                toast2.cancel && /* @__PURE__ */ jsx2(
+                  ActionButton,
+                  {
+                    action: toast2.cancel,
+                    id,
+                    ...part("cancel", "wello-notifications-button wello-notifications-cancel")
+                  }
+                ),
+                toast2.action && /* @__PURE__ */ jsx2(
+                  ActionButton,
+                  {
+                    action: toast2.action,
+                    id,
+                    ...part("action", "wello-notifications-button wello-notifications-action")
+                  }
+                )
+              ] })
+            ] }),
+            settings.dismissible && settings.closeButton && /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                ...part("closeButton", "wello-notifications-close"),
+                "aria-label": labels.close,
+                title: labels.close,
+                onClick: () => toastStore.dismiss(id),
+                children: /* @__PURE__ */ jsx2(CloseIcon, {})
+              }
+            ),
+            settings.progress && duration !== false && /* @__PURE__ */ jsx2(
+              "span",
+              {
+                ...part("progress", "wello-notifications-progress"),
+                style: {
+                  animationDuration: `${duration}ms`,
+                  animationPlayState: paused || !open ? "paused" : "running",
+                  ...styles.progress
+                },
+                "aria-hidden": "true"
+              },
+              version
+            )
+          ]
+        }
+      ) })
+    }
+  );
+}
+function ActionButton({
+  action,
+  id,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      className,
+      style,
+      onClick: (event) => {
+        action.onClick?.(event);
+        if (action.closeOnClick !== false && !event.defaultPrevented) toastStore.dismiss(id);
+      },
+      children: action.label
+    }
+  );
+}
+
+// src/components/toaster.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var DEFAULT_COLORS = {
+  default: "slate-500",
+  success: "emerald-600",
+  error: "red-600",
+  warning: "amber-600",
+  info: "blue-600",
+  loading: "slate-500"
+};
+var DEFAULT_DURATIONS = {
+  error: 5500,
+  warning: 5e3,
+  loading: false
+};
+var EMPTY = { toasts: [], paused: false };
+var getServerState = () => EMPTY;
+var nextToasterId = 0;
+var activeToasterId = null;
+var mountedToasters = /* @__PURE__ */ new Set();
+var toasterListeners = /* @__PURE__ */ new Set();
+function subscribeToasters(listener) {
+  toasterListeners.add(listener);
+  return () => {
+    toasterListeners.delete(listener);
+  };
+}
+function registerToaster(id) {
+  mountedToasters.add(id);
+  if (activeToasterId === null) {
+    activeToasterId = id;
+    toasterListeners.forEach((listener) => listener());
+  }
+  return () => {
+    mountedToasters.delete(id);
+    if (activeToasterId === id) {
+      activeToasterId = mountedToasters.values().next().value ?? null;
+      toasterListeners.forEach((listener) => listener());
+    }
+  };
+}
+function useDocumentDirection(dir) {
+  const [documentDir, setDocumentDir] = useState2("ltr");
+  useEffect2(() => {
+    if (dir !== "auto" || typeof document === "undefined") return;
+    const html = document.documentElement;
+    const read = () => setDocumentDir(
+      (html.getAttribute("dir") || getComputedStyle(html).direction) === "rtl" ? "rtl" : "ltr"
+    );
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(html, { attributes: true, attributeFilter: ["dir"] });
+    return () => observer.disconnect();
+  }, [dir]);
+  return dir === "ltr" || dir === "rtl" ? dir : documentDir;
+}
+function usePageHidden(enabled) {
+  const [hidden, setHidden] = useState2(false);
+  useEffect2(() => {
+    if (!enabled) return;
+    const update2 = () => setHidden(document.visibilityState === "hidden");
+    update2();
+    document.addEventListener("visibilitychange", update2);
+    return () => document.removeEventListener("visibilitychange", update2);
+  }, [enabled]);
+  return enabled && hidden;
+}
+function useSystemDark(enabled) {
+  const [dark, setDark] = useState2(false);
+  useEffect2(() => {
+    if (!enabled || typeof matchMedia === "undefined") return;
+    const query = matchMedia("(prefers-color-scheme: dark)");
+    const update2 = () => setDark(query.matches);
+    update2();
+    query.addEventListener("change", update2);
+    return () => query.removeEventListener("change", update2);
+  }, [enabled]);
+  return dark;
+}
+function splitPosition(position, dir) {
+  const [y, x] = position.split("-");
+  const physical = {
+    left: dir === "ltr" ? "start" : "end",
+    right: dir === "ltr" ? "end" : "start"
+  };
+  return { y, x: physical[x] ?? x };
+}
+function Toaster(props) {
+  const {
+    position = "bottom-start",
+    dir: dirProp = "auto",
+    limit = 4,
+    duration = 4e3,
+    durations,
+    colors,
+    icons,
+    closeButton = true,
+    progress = true,
+    swipe = true,
+    pauseOnHover = true,
+    pauseWhenPageHidden = true,
+    sound = false,
+    theme,
+    width = 390,
+    gap = 12,
+    offset = 16,
+    zIndex = 11e3,
+    locale,
+    labels: labelOverrides,
+    classNames = {},
+    styles = {},
+    className,
+    style,
+    container
+  } = props;
+  const state2 = useSyncExternalStore2(toastStore.subscribe, toastStore.getState, getServerState);
+  const dir = useDocumentDirection(dirProp);
+  const pageHidden = usePageHidden(pauseWhenPageHidden);
+  const systemDark = useSystemDark(theme === "system");
+  const labels = useMemo(() => resolveLabels(locale, labelOverrides), [locale, labelOverrides]);
+  const [hovered, setHovered] = useState2(null);
+  const instanceId = useMemo(() => ++nextToasterId, []);
+  const isActiveToaster = useSyncExternalStore2(
+    subscribeToasters,
+    () => activeToasterId === instanceId,
+    () => false
+  );
+  const [mounted, setMounted] = useState2(false);
+  useEffect2(() => {
+    setMounted(true);
+    return registerToaster(instanceId);
+  }, [instanceId]);
+  const groups = useMemo(() => {
+    const byKey = /* @__PURE__ */ new Map();
+    for (const t of state2.toasts) {
+      const { y, x } = splitPosition(t.position ?? position, dir);
+      const key = `${y}-${x}`;
+      if (!byKey.has(key)) byKey.set(key, { y, x, toasts: [] });
+      byKey.get(key).toasts.push(t);
+    }
+    for (const group of byKey.values()) {
+      const shown = new Set(
+        group.toasts.filter((t) => t.open).sort((a, b) => a.createdAt - b.createdAt).slice(0, Math.max(1, limit))
+      );
+      group.toasts = group.toasts.filter((t) => !t.open || shown.has(t));
+    }
+    return [...byKey.entries()];
+  }, [state2.toasts, position, dir, limit]);
+  useEffect2(() => {
+    if (hovered && !groups.some(([key]) => key === hovered)) setHovered(null);
+  }, [groups, hovered]);
+  if (!mounted || !isActiveToaster) return null;
+  const target = container ?? document.body;
+  const resolve = (t) => {
+    const typeDuration = durations?.[t.type] ?? DEFAULT_DURATIONS[t.type];
+    const customIcon = icons && t.type in icons ? icons[t.type] : void 0;
+    return {
+      duration: t.duration ?? (typeDuration === void 0 ? duration : typeDuration),
+      color: resolveColor(t.color ?? colors?.[t.type] ?? DEFAULT_COLORS[t.type]),
+      icon: t.icon === false ? null : t.icon ?? (customIcon !== void 0 ? customIcon : DEFAULT_ICONS[t.type]),
+      dismissible: t.dismissible ?? t.type !== "loading",
+      closeButton,
+      progress: t.progress ?? progress,
+      swipe,
+      sound: t.sound ?? sound,
+      className: t.className,
+      style: t.style,
+      classNames: { ...classNames, ...t.classNames },
+      styles: { ...styles, ...t.styles }
+    };
+  };
+  const resolvedTheme = theme === "system" ? systemDark ? "dark" : "light" : theme;
+  return createPortal(
+    /* @__PURE__ */ jsx3("div", { role: "region", "aria-label": labels.region, className: "wello-notifications-region", dir, children: groups.map(([key, group]) => /* @__PURE__ */ jsx3(
+      "ol",
+      {
+        className: cx("wello-notifications-toaster", classNames.toaster, className),
+        "data-y": group.y,
+        "data-x": group.x,
+        "data-theme": resolvedTheme,
+        dir,
+        style: {
+          "--wello-notifications-width": toCssSize(width),
+          "--wello-notifications-gap": `${gap}px`,
+          "--wello-notifications-offset": toCssSize(offset),
+          zIndex,
+          ...styles.toaster,
+          ...style
+        },
+        onMouseEnter: pauseOnHover ? () => setHovered(key) : void 0,
+        onMouseLeave: pauseOnHover ? () => setHovered(null) : void 0,
+        onFocus: pauseOnHover ? () => setHovered(key) : void 0,
+        onBlur: pauseOnHover ? (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget))
+            setHovered(null);
+        } : void 0,
+        children: group.toasts.map((t) => /* @__PURE__ */ jsx3(
+          ToastItem,
+          {
+            toast: t,
+            settings: resolve(t),
+            paused: state2.paused || pageHidden || hovered === key,
+            labels
+          },
+          t.id
+        ))
+      },
+      key
+    )) }),
+    target
+  );
+}
+
+// src/tab/tab-notifications.ts
+var defaultFormat = (count, title) => `(${count > 99 ? "99+" : count}) ${title}`;
+function createTabNotifications(options = {}) {
+  const { formatTitle = defaultFormat, dotColor = "#ef4444", favicon = true } = options;
+  let ready = false;
+  let originalTitle = "";
+  let originalFavicon = null;
+  let unread = 0;
+  let flashTimer = null;
+  let stopListening = null;
+  let dotted = null;
+  let faviconRequest = 0;
+  const hasDocument = () => typeof document !== "undefined";
+  function init() {
+    if (ready || !hasDocument()) return;
+    ready = true;
+    originalTitle = document.title;
+    originalFavicon = document.querySelector('link[rel~="icon"]')?.href ?? null;
+  }
+  const baseTitle = () => unread > 0 ? formatTitle(unread, originalTitle) : originalTitle;
+  function applyFavicon(href) {
+    const links = document.querySelectorAll('link[rel~="icon"]');
+    if (href === null) {
+      links.forEach((link2) => link2.dataset.wnFavicon !== void 0 && link2.remove());
+      return;
+    }
+    let link = links[0];
+    if (!link) {
+      link = document.createElement("link");
+      link.rel = "icon";
+      link.dataset.wnFavicon = "";
+      document.head.appendChild(link);
+    }
+    link.href = href;
+  }
+  function drawDot(base) {
+    const size = 32;
+    const canvas = document.createElement("canvas");
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    if (base) ctx.drawImage(base, 0, 0, size, size);
+    const radius = base ? 7 : 10;
+    const x = size - radius - 1;
+    const y = base ? radius + 1 : size / 2;
+    ctx.beginPath();
+    ctx.arc(x, y, radius + 2, 0, Math.PI * 2);
+    ctx.fillStyle = "#ffffff";
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, Math.PI * 2);
+    ctx.fillStyle = dotColor;
+    ctx.fill();
+    try {
+      return canvas.toDataURL("image/png");
+    } catch {
+      return null;
+    }
+  }
+  function showDot() {
+    if (!favicon) return;
+    const source = originalFavicon ?? "";
+    if (dotted?.source === source) return applyFavicon(dotted.url);
+    const request = ++faviconRequest;
+    const done = (base) => {
+      if (request !== faviconRequest || unread === 0) return;
+      const url = drawDot(base);
+      if (!url) return;
+      dotted = { source, url };
+      applyFavicon(url);
+    };
+    if (!source) return done(null);
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.onload = () => done(image);
+    image.onerror = () => done(null);
+    image.src = source;
+  }
+  function hideDot() {
+    faviconRequest++;
+    if (favicon) applyFavicon(originalFavicon);
+  }
+  const api = {
+    setUnreadCount(count) {
+      if (!hasDocument()) return;
+      init();
+      unread = Math.max(0, Math.floor(count) || 0);
+      if (!flashTimer) document.title = baseTitle();
+      if (unread > 0) showDot();
+      else hideDot();
+    },
+    getUnreadCount: () => unread,
+    flashTitle(message, flashOptions) {
+      if (!hasDocument()) return;
+      init();
+      api.stopFlashing();
+      const { interval = 1500, stopOnFocus = true } = typeof flashOptions === "number" ? { interval: flashOptions } : flashOptions ?? {};
+      let showMessage = false;
+      document.title = message;
+      flashTimer = setInterval(() => {
+        document.title = showMessage ? message : baseTitle();
+        showMessage = !showMessage;
+      }, interval);
+      if (stopOnFocus) {
+        const onVisible = () => {
+          if (document.visibilityState === "visible" && document.hasFocus()) api.stopFlashing();
+        };
+        document.addEventListener("visibilitychange", onVisible);
+        window.addEventListener("focus", onVisible);
+        stopListening = () => {
+          document.removeEventListener("visibilitychange", onVisible);
+          window.removeEventListener("focus", onVisible);
+        };
+      }
+    },
+    stopFlashing() {
+      if (flashTimer) clearInterval(flashTimer);
+      flashTimer = null;
+      stopListening?.();
+      stopListening = null;
+      if (ready) document.title = baseTitle();
+    },
+    isFlashing: () => flashTimer !== null,
+    reset() {
+      api.stopFlashing();
+      unread = 0;
+      if (!ready) return;
+      document.title = originalTitle;
+      hideDot();
+    }
+  };
+  return api;
+}
+var tabNotifications = createTabNotifications();
+export {
+  CloseIcon,
+  ErrorIcon,
+  InfoIcon,
+  LoadingIcon,
+  NOTIFICATION_SOUNDS,
+  SuccessIcon,
+  Toaster,
+  WarningIcon,
+  createTabNotifications,
+  playNotificationSound,
+  playSound,
+  playTone,
+  resolveColor,
+  resolveLabels,
+  scheduleSound,
+  tabNotifications,
+  toast,
+  toastStore,
+  useToasts
+};
+//# sourceMappingURL=index.js.map