@pyreon/toast 0.11.0

package/lib/index.js

@@ -0,0 +1,362 @@
+import { computed, effect, onCleanup, signal } from "@pyreon/reactivity";
+import { For, Portal } from "@pyreon/core";
+import { jsx, jsxs } from "@pyreon/core/jsx-runtime";
+
+//#region src/toast.ts
+let _idCounter = 0;
+const DEFAULT_DURATION = 4e3;
+/**
+* Module-level signal holding the active toast stack.
+* Consumed by the `Toaster` component.
+*/
+const _toasts = signal([]);
+function generateId() {
+	return `pyreon-toast-${++_idCounter}`;
+}
+function startTimer(t) {
+	if (t.duration <= 0) return;
+	t.timerStart = Date.now();
+	t.remaining = t.duration;
+	t.timer = setTimeout(() => dismiss(t.id), t.duration);
+}
+function addToast(message, options = {}) {
+	const id = generateId();
+	const t = {
+		id,
+		message,
+		type: options.type ?? "info",
+		duration: options.duration ?? DEFAULT_DURATION,
+		dismissible: options.dismissible ?? true,
+		action: options.action,
+		onDismiss: options.onDismiss,
+		state: "entering",
+		timer: void 0,
+		remaining: 0,
+		timerStart: 0
+	};
+	startTimer(t);
+	_toasts.set([..._toasts(), t]);
+	return id;
+}
+function dismiss(id) {
+	const current = _toasts();
+	if (id === void 0) {
+		for (const t of current) {
+			if (t.timer !== void 0) clearTimeout(t.timer);
+			t.onDismiss?.();
+		}
+		_toasts.set([]);
+		return;
+	}
+	const match = current.find((item) => item.id === id);
+	if (!match) return;
+	if (match.timer !== void 0) clearTimeout(match.timer);
+	match.onDismiss?.();
+	_toasts.set(current.filter((item) => item.id !== id));
+}
+function updateToast(id, updates) {
+	const current = _toasts();
+	const idx = current.findIndex((item) => item.id === id);
+	if (idx === -1) return;
+	const t = current[idx];
+	if (t.timer !== void 0) clearTimeout(t.timer);
+	const updated = {
+		...t,
+		message: updates.message ?? t.message,
+		type: updates.type ?? t.type,
+		duration: updates.duration ?? t.duration,
+		timer: void 0,
+		remaining: 0,
+		timerStart: 0
+	};
+	updated.duration = updates.duration ?? t.duration;
+	startTimer(updated);
+	const next = [...current];
+	next[idx] = updated;
+	_toasts.set(next);
+}
+function _pauseAll() {
+	for (const t of _toasts()) if (t.timer !== void 0) {
+		clearTimeout(t.timer);
+		t.remaining = Math.max(0, t.remaining - (Date.now() - t.timerStart));
+		t.timer = void 0;
+	}
+}
+function _resumeAll() {
+	for (const t of _toasts()) if (t.duration > 0 && t.timer === void 0 && t.remaining > 0) {
+		t.timerStart = Date.now();
+		t.timer = setTimeout(() => dismiss(t.id), t.remaining);
+	}
+}
+/**
+* Show a toast notification.
+*
+* @example
+* toast("Saved!")
+* toast("Error occurred", { type: "error", duration: 6000 })
+*
+* @returns The toast id — pass to `toast.dismiss(id)` to remove it.
+*/
+function toast(message, options) {
+	return addToast(message, options);
+}
+function shortcut(type) {
+	return (message, options) => addToast(message, {
+		...options,
+		type
+	});
+}
+/** Show a success toast. */
+toast.success = shortcut("success");
+/** Show an error toast. */
+toast.error = shortcut("error");
+/** Show a warning toast. */
+toast.warning = shortcut("warning");
+/** Show an info toast. */
+toast.info = shortcut("info");
+/** Show a persistent loading toast. Returns id for later update/dismiss. */
+toast.loading = (message, options) => addToast(message, {
+	...options,
+	type: "info",
+	duration: 0
+});
+/** Update an existing toast (message, type, duration). */
+toast.update = (id, updates) => updateToast(id, updates);
+/** Dismiss a specific toast by id, or all toasts if no id is given. */
+toast.dismiss = dismiss;
+/**
+* Show a loading toast that updates on promise resolution or rejection.
+*
+* @example
+* toast.promise(saveTodo(), {
+*   loading: "Saving...",
+*   success: "Saved!",
+*   error: "Failed to save",
+* })
+*/
+toast.promise = function toastPromise(promise, opts) {
+	const id = addToast(opts.loading, {
+		type: "info",
+		duration: 0
+	});
+	promise.then((data) => {
+		updateToast(id, {
+			message: typeof opts.success === "function" ? opts.success(data) : opts.success,
+			type: "success",
+			duration: DEFAULT_DURATION
+		});
+	}, (err) => {
+		updateToast(id, {
+			message: typeof opts.error === "function" ? opts.error(err) : opts.error,
+			type: "error",
+			duration: DEFAULT_DURATION
+		});
+	});
+	return promise;
+};
+/** @internal Reset state for testing. */
+function _reset() {
+	const current = _toasts();
+	for (const t of current) if (t.timer !== void 0) clearTimeout(t.timer);
+	_toasts.set([]);
+	_idCounter = 0;
+}
+
+//#endregion
+//#region src/styles.ts
+/**
+* Minimal CSS for the toast container and items.
+* Injected into the DOM once when the Toaster component mounts.
+*/
+const toastStyles = `
+.pyreon-toast-container {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.pyreon-toast {
+  pointer-events: auto;
+  background: #fff;
+  color: #1a1a1a;
+  padding: 12px 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  line-height: 1.4;
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 200ms ease, transform 200ms ease, max-height 200ms ease;
+  max-height: 200px;
+  overflow: hidden;
+}
+
+.pyreon-toast--entering {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.pyreon-toast--exiting {
+  opacity: 0;
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.pyreon-toast--info { border-left: 4px solid #3b82f6; }
+.pyreon-toast--success { border-left: 4px solid #22c55e; }
+.pyreon-toast--warning { border-left: 4px solid #f59e0b; }
+.pyreon-toast--error { border-left: 4px solid #ef4444; }
+
+.pyreon-toast__message { flex: 1; }
+
+.pyreon-toast__action {
+  background: none;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 13px;
+  cursor: pointer;
+  color: #3b82f6;
+  white-space: nowrap;
+}
+
+.pyreon-toast__action:hover {
+  background: #f3f4f6;
+}
+
+.pyreon-toast__dismiss {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px 4px;
+  font-size: 16px;
+  color: #9ca3af;
+  line-height: 1;
+}
+
+.pyreon-toast__dismiss:hover {
+  color: #4b5563;
+}
+`;
+
+//#endregion
+//#region src/toaster.tsx
+let _styleInjected = false;
+function injectStyles() {
+	if (_styleInjected) return;
+	_styleInjected = true;
+	const style = document.createElement("style");
+	style.setAttribute("data-pyreon-toast", "");
+	style.textContent = toastStyles;
+	document.head.appendChild(style);
+}
+function getContainerStyle(position, gap, offset) {
+	const [vertical, horizontal] = position.split("-");
+	let style = `gap: ${gap}px;`;
+	if (vertical === "top") style += ` top: ${offset}px;`;
+	else {
+		style += ` bottom: ${offset}px;`;
+		style += " flex-direction: column-reverse;";
+	}
+	if (horizontal === "left") style += ` left: ${offset}px;`;
+	else if (horizontal === "center") style += " left: 50%; transform: translateX(-50%);";
+	else style += ` right: ${offset}px;`;
+	return style;
+}
+/**
+* Render component for toast notifications. Place once at your app root.
+*
+* @example
+* ```tsx
+* function App() {
+*   return (
+*     <>
+*       <Toaster position="bottom-right" />
+*       <MyApp />
+*     </>
+*   )
+* }
+* ```
+*/
+function Toaster(props) {
+	const position = props?.position ?? "top-right";
+	const max = props?.max ?? 5;
+	const gap = props?.gap ?? 8;
+	const offset = props?.offset ?? 16;
+	injectStyles();
+	effect(() => {
+		if (!_toasts().some((t) => t.state === "entering")) return;
+		const raf = requestAnimationFrame(() => {
+			const current = _toasts();
+			let changed = false;
+			const next = current.map((t) => {
+				if (t.state === "entering") {
+					changed = true;
+					return {
+						...t,
+						state: "visible"
+					};
+				}
+				return t;
+			});
+			if (changed) _toasts.set(next);
+		});
+		onCleanup(() => cancelAnimationFrame(raf));
+	});
+	const visibleToasts = computed(() => _toasts().slice(-max));
+	const containerStyle = getContainerStyle(position, gap, offset);
+	return /* @__PURE__ */ jsx(Portal, {
+		target: document.body,
+		children: /* @__PURE__ */ jsx("section", {
+			class: "pyreon-toast-container",
+			style: containerStyle,
+			"aria-label": "Notifications",
+			"aria-live": "polite",
+			onMouseEnter: _pauseAll,
+			onMouseLeave: _resumeAll,
+			children: /* @__PURE__ */ jsx(For, {
+				each: visibleToasts,
+				by: (t) => t.id,
+				children: (t) => /* @__PURE__ */ jsx(ToastItem, { toast: t })
+			})
+		})
+	});
+}
+function ToastItem({ toast: t }) {
+	const stateClass = t.state === "entering" ? " pyreon-toast--entering" : t.state === "exiting" ? " pyreon-toast--exiting" : "";
+	return /* @__PURE__ */ jsxs("div", {
+		class: `pyreon-toast pyreon-toast--${t.type}${stateClass}`,
+		role: "alert",
+		"aria-atomic": "true",
+		"data-toast-id": t.id,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				class: "pyreon-toast__message",
+				children: typeof t.message === "string" ? t.message : t.message
+			}),
+			t.action && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				class: "pyreon-toast__action",
+				onClick: t.action.onClick,
+				children: t.action.label
+			}),
+			t.dismissible && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				class: "pyreon-toast__dismiss",
+				onClick: () => toast.dismiss(t.id),
+				"aria-label": "Dismiss",
+				children: "×"
+			})
+		]
+	});
+}
+
+//#endregion
+export { Toaster, _reset, _toasts, toast };
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/toast.ts","../src/styles.ts","../src/toaster.tsx"],"sourcesContent":["import type { VNodeChild } from \"@pyreon/core\"\nimport { signal } from \"@pyreon/reactivity\"\nimport type { Toast, ToastOptions, ToastPromiseOptions, ToastType } from \"./types\"\n\n// ─── State ───────────────────────────────────────────────────────────────────\n\nlet _idCounter = 0\nconst DEFAULT_DURATION = 4000\n\n/**\n * Module-level signal holding the active toast stack.\n * Consumed by the `Toaster` component.\n */\nexport const _toasts = signal<Toast[]>([])\n\n// ─── Internal helpers ────────────────────────────────────────────────────────\n\nfunction generateId(): string {\n  return `pyreon-toast-${++_idCounter}`\n}\n\nfunction startTimer(t: Toast): void {\n  if (t.duration <= 0) return\n  t.timerStart = Date.now()\n  t.remaining = t.duration\n  t.timer = setTimeout(() => dismiss(t.id), t.duration)\n}\n\nfunction addToast(message: string | VNodeChild, options: ToastOptions = {}): string {\n  const id = generateId()\n  const t: Toast = {\n    id,\n    message,\n    type: options.type ?? \"info\",\n    duration: options.duration ?? DEFAULT_DURATION,\n    dismissible: options.dismissible ?? true,\n    action: options.action,\n    onDismiss: options.onDismiss,\n    state: \"entering\",\n    timer: undefined,\n    remaining: 0,\n    timerStart: 0,\n  }\n\n  startTimer(t)\n  _toasts.set([..._toasts(), t])\n\n  return id\n}\n\nfunction dismiss(id?: string): void {\n  const current = _toasts()\n\n  if (id === undefined) {\n    // Clear all\n    for (const t of current) {\n      if (t.timer !== undefined) clearTimeout(t.timer)\n      t.onDismiss?.()\n    }\n    _toasts.set([])\n    return\n  }\n\n  const match = current.find((item) => item.id === id)\n  if (!match) return\n\n  if (match.timer !== undefined) clearTimeout(match.timer)\n  match.onDismiss?.()\n  _toasts.set(current.filter((item) => item.id !== id))\n}\n\nfunction updateToast(\n  id: string,\n  updates: Partial<Pick<Toast, \"message\" | \"type\" | \"duration\">>,\n): void {\n  const current = _toasts()\n  const idx = current.findIndex((item) => item.id === id)\n  if (idx === -1) return\n\n  const t = current[idx] as Toast\n  if (t.timer !== undefined) clearTimeout(t.timer)\n\n  const updated: Toast = {\n    ...t,\n    message: updates.message ?? t.message,\n    type: updates.type ?? t.type,\n    duration: updates.duration ?? t.duration,\n    timer: undefined,\n    remaining: 0,\n    timerStart: 0,\n  }\n\n  const duration = updates.duration ?? t.duration\n  updated.duration = duration\n  startTimer(updated)\n\n  const next = [...current]\n  next[idx] = updated\n  _toasts.set(next)\n}\n\n// ─── Pause / resume (for hover) ─────────────────────────────────────────────\n\nexport function _pauseAll(): void {\n  for (const t of _toasts()) {\n    if (t.timer !== undefined) {\n      clearTimeout(t.timer)\n      t.remaining = Math.max(0, t.remaining - (Date.now() - t.timerStart))\n      t.timer = undefined\n    }\n  }\n}\n\nexport function _resumeAll(): void {\n  for (const t of _toasts()) {\n    if (t.duration > 0 && t.timer === undefined && t.remaining > 0) {\n      t.timerStart = Date.now()\n      t.timer = setTimeout(() => dismiss(t.id), t.remaining)\n    }\n  }\n}\n\n// ─── Public imperative API ───────────────────────────────────────────────────\n\n/**\n * Show a toast notification.\n *\n * @example\n * toast(\"Saved!\")\n * toast(\"Error occurred\", { type: \"error\", duration: 6000 })\n *\n * @returns The toast id — pass to `toast.dismiss(id)` to remove it.\n */\nexport function toast(message: string | VNodeChild, options?: ToastOptions): string {\n  return addToast(message, options)\n}\n\nfunction shortcut(type: ToastType) {\n  return (message: string | VNodeChild, options?: Omit<ToastOptions, \"type\">): string =>\n    addToast(message, { ...options, type })\n}\n\n/** Show a success toast. */\ntoast.success = shortcut(\"success\")\n\n/** Show an error toast. */\ntoast.error = shortcut(\"error\")\n\n/** Show a warning toast. */\ntoast.warning = shortcut(\"warning\")\n\n/** Show an info toast. */\ntoast.info = shortcut(\"info\")\n\n/** Show a persistent loading toast. Returns id for later update/dismiss. */\ntoast.loading = (\n  message: string | VNodeChild,\n  options?: Omit<ToastOptions, \"type\" | \"duration\">,\n): string => addToast(message, { ...options, type: \"info\", duration: 0 })\n\n/** Update an existing toast (message, type, duration). */\ntoast.update = (\n  id: string,\n  updates: Partial<Pick<ToastOptions, \"type\" | \"duration\">> & { message?: string | VNodeChild },\n): void => updateToast(id, updates)\n\n/** Dismiss a specific toast by id, or all toasts if no id is given. */\ntoast.dismiss = dismiss\n\n/**\n * Show a loading toast that updates on promise resolution or rejection.\n *\n * @example\n * toast.promise(saveTodo(), {\n *   loading: \"Saving...\",\n *   success: \"Saved!\",\n *   error: \"Failed to save\",\n * })\n */\ntoast.promise = function toastPromise<T>(\n  promise: Promise<T>,\n  opts: ToastPromiseOptions<T>,\n): Promise<T> {\n  const id = addToast(opts.loading, { type: \"info\", duration: 0 })\n\n  promise.then(\n    (data) => {\n      const msg = typeof opts.success === \"function\" ? opts.success(data) : opts.success\n      updateToast(id, { message: msg, type: \"success\", duration: DEFAULT_DURATION })\n    },\n    (err: unknown) => {\n      const msg = typeof opts.error === \"function\" ? opts.error(err) : opts.error\n      updateToast(id, { message: msg, type: \"error\", duration: DEFAULT_DURATION })\n    },\n  )\n\n  return promise\n}\n\n// ─── Test utilities ──────────────────────────────────────────────────────────\n\n/** @internal Reset state for testing. */\nexport function _reset(): void {\n  const current = _toasts()\n  for (const t of current) {\n    if (t.timer !== undefined) clearTimeout(t.timer)\n  }\n  _toasts.set([])\n  _idCounter = 0\n}\n","/**\n * Minimal CSS for the toast container and items.\n * Injected into the DOM once when the Toaster component mounts.\n */\nexport const toastStyles = /* css */ `\n.pyreon-toast-container {\n  position: fixed;\n  z-index: 9999;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n}\n\n.pyreon-toast {\n  pointer-events: auto;\n  background: #fff;\n  color: #1a1a1a;\n  padding: 12px 16px;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  line-height: 1.4;\n  opacity: 1;\n  transform: translateY(0);\n  transition: opacity 200ms ease, transform 200ms ease, max-height 200ms ease;\n  max-height: 200px;\n  overflow: hidden;\n}\n\n.pyreon-toast--entering {\n  opacity: 0;\n  transform: translateY(-8px);\n}\n\n.pyreon-toast--exiting {\n  opacity: 0;\n  max-height: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.pyreon-toast--info { border-left: 4px solid #3b82f6; }\n.pyreon-toast--success { border-left: 4px solid #22c55e; }\n.pyreon-toast--warning { border-left: 4px solid #f59e0b; }\n.pyreon-toast--error { border-left: 4px solid #ef4444; }\n\n.pyreon-toast__message { flex: 1; }\n\n.pyreon-toast__action {\n  background: none;\n  border: 1px solid #e5e7eb;\n  border-radius: 4px;\n  padding: 4px 8px;\n  font-size: 13px;\n  cursor: pointer;\n  color: #3b82f6;\n  white-space: nowrap;\n}\n\n.pyreon-toast__action:hover {\n  background: #f3f4f6;\n}\n\n.pyreon-toast__dismiss {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 2px 4px;\n  font-size: 16px;\n  color: #9ca3af;\n  line-height: 1;\n}\n\n.pyreon-toast__dismiss:hover {\n  color: #4b5563;\n}\n`\n","import type { VNodeChild } from \"@pyreon/core\"\nimport { For, Portal } from \"@pyreon/core\"\nimport { computed, effect, onCleanup } from \"@pyreon/reactivity\"\nimport { toastStyles } from \"./styles\"\nimport { _pauseAll, _resumeAll, _toasts, toast } from \"./toast\"\nimport type { Toast, ToasterProps, ToastPosition } from \"./types\"\n\n// ─── Style injection ─────────────────────────────────────────────────────────\n\nlet _styleInjected = false\n\nfunction injectStyles(): void {\n  if (_styleInjected) return\n  _styleInjected = true\n\n  const style = document.createElement(\"style\")\n  style.setAttribute(\"data-pyreon-toast\", \"\")\n  style.textContent = toastStyles\n  document.head.appendChild(style)\n}\n\n// ─── Position helpers ────────────────────────────────────────────────────────\n\nfunction getContainerStyle(position: ToastPosition, gap: number, offset: number): string {\n  const [vertical, horizontal] = position.split(\"-\") as [string, string]\n\n  let style = `gap: ${gap}px;`\n\n  if (vertical === \"top\") {\n    style += ` top: ${offset}px;`\n  } else {\n    style += ` bottom: ${offset}px;`\n    style += \" flex-direction: column-reverse;\"\n  }\n\n  if (horizontal === \"left\") {\n    style += ` left: ${offset}px;`\n  } else if (horizontal === \"center\") {\n    style += \" left: 50%; transform: translateX(-50%);\"\n  } else {\n    style += ` right: ${offset}px;`\n  }\n\n  return style\n}\n\n// ─── Toaster component ──────────────────────────────────────────────────────\n\n/**\n * Render component for toast notifications. Place once at your app root.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <>\n *       <Toaster position=\"bottom-right\" />\n *       <MyApp />\n *     </>\n *   )\n * }\n * ```\n */\nexport function Toaster(props?: ToasterProps): VNodeChild {\n  const position = props?.position ?? \"top-right\"\n  const max = props?.max ?? 5\n  const gap = props?.gap ?? 8\n  const offset = props?.offset ?? 16\n\n  injectStyles()\n\n  // Promote \"entering\" toasts to \"visible\" on next frame.\n  // Only runs when there are actually entering toasts (early return guard).\n  effect(() => {\n    const toasts = _toasts()\n    const hasEntering = toasts.some((t) => t.state === \"entering\")\n    if (!hasEntering) return\n\n    const raf = requestAnimationFrame(() => {\n      const current = _toasts()\n      let changed = false\n      const next = current.map((t) => {\n        if (t.state === \"entering\") {\n          changed = true\n          return { ...t, state: \"visible\" as const }\n        }\n        return t\n      })\n      if (changed) _toasts.set(next)\n    })\n\n    onCleanup(() => cancelAnimationFrame(raf))\n  })\n\n  // Computed visible toasts — only the most recent `max` items\n  const visibleToasts = computed(() => _toasts().slice(-max))\n\n  const containerStyle = getContainerStyle(position, gap, offset)\n\n  return (\n    <Portal target={document.body}>\n      <section\n        class=\"pyreon-toast-container\"\n        style={containerStyle}\n        aria-label=\"Notifications\"\n        aria-live=\"polite\"\n        onMouseEnter={_pauseAll}\n        onMouseLeave={_resumeAll}\n      >\n        <For each={visibleToasts} by={(t: Toast) => t.id}>\n          {(t: Toast) => <ToastItem toast={t} />}\n        </For>\n      </section>\n    </Portal>\n  )\n}\n\n// ─── Toast item ─────────────────────────────────────────────────────────────\n\nfunction ToastItem({ toast: t }: { toast: Toast }): VNodeChild {\n  const stateClass =\n    t.state === \"entering\"\n      ? \" pyreon-toast--entering\"\n      : t.state === \"exiting\"\n        ? \" pyreon-toast--exiting\"\n        : \"\"\n\n  return (\n    <div\n      class={`pyreon-toast pyreon-toast--${t.type}${stateClass}`}\n      role=\"alert\"\n      aria-atomic=\"true\"\n      data-toast-id={t.id}\n    >\n      <div class=\"pyreon-toast__message\">\n        {typeof t.message === \"string\" ? t.message : t.message}\n      </div>\n      {t.action && (\n        <button type=\"button\" class=\"pyreon-toast__action\" onClick={t.action.onClick}>\n          {t.action.label}\n        </button>\n      )}\n      {t.dismissible && (\n        <button\n          type=\"button\"\n          class=\"pyreon-toast__dismiss\"\n          onClick={() => toast.dismiss(t.id)}\n          aria-label=\"Dismiss\"\n        >\n          ×\n        </button>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAI,aAAa;AACjB,MAAM,mBAAmB;;;;;AAMzB,MAAa,UAAU,OAAgB,EAAE,CAAC;AAI1C,SAAS,aAAqB;AAC5B,QAAO,gBAAgB,EAAE;;AAG3B,SAAS,WAAW,GAAgB;AAClC,KAAI,EAAE,YAAY,EAAG;AACrB,GAAE,aAAa,KAAK,KAAK;AACzB,GAAE,YAAY,EAAE;AAChB,GAAE,QAAQ,iBAAiB,QAAQ,EAAE,GAAG,EAAE,EAAE,SAAS;;AAGvD,SAAS,SAAS,SAA8B,UAAwB,EAAE,EAAU;CAClF,MAAM,KAAK,YAAY;CACvB,MAAM,IAAW;EACf;EACA;EACA,MAAM,QAAQ,QAAQ;EACtB,UAAU,QAAQ,YAAY;EAC9B,aAAa,QAAQ,eAAe;EACpC,QAAQ,QAAQ;EAChB,WAAW,QAAQ;EACnB,OAAO;EACP,OAAO;EACP,WAAW;EACX,YAAY;EACb;AAED,YAAW,EAAE;AACb,SAAQ,IAAI,CAAC,GAAG,SAAS,EAAE,EAAE,CAAC;AAE9B,QAAO;;AAGT,SAAS,QAAQ,IAAmB;CAClC,MAAM,UAAU,SAAS;AAEzB,KAAI,OAAO,QAAW;AAEpB,OAAK,MAAM,KAAK,SAAS;AACvB,OAAI,EAAE,UAAU,OAAW,cAAa,EAAE,MAAM;AAChD,KAAE,aAAa;;AAEjB,UAAQ,IAAI,EAAE,CAAC;AACf;;CAGF,MAAM,QAAQ,QAAQ,MAAM,SAAS,KAAK,OAAO,GAAG;AACpD,KAAI,CAAC,MAAO;AAEZ,KAAI,MAAM,UAAU,OAAW,cAAa,MAAM,MAAM;AACxD,OAAM,aAAa;AACnB,SAAQ,IAAI,QAAQ,QAAQ,SAAS,KAAK,OAAO,GAAG,CAAC;;AAGvD,SAAS,YACP,IACA,SACM;CACN,MAAM,UAAU,SAAS;CACzB,MAAM,MAAM,QAAQ,WAAW,SAAS,KAAK,OAAO,GAAG;AACvD,KAAI,QAAQ,GAAI;CAEhB,MAAM,IAAI,QAAQ;AAClB,KAAI,EAAE,UAAU,OAAW,cAAa,EAAE,MAAM;CAEhD,MAAM,UAAiB;EACrB,GAAG;EACH,SAAS,QAAQ,WAAW,EAAE;EAC9B,MAAM,QAAQ,QAAQ,EAAE;EACxB,UAAU,QAAQ,YAAY,EAAE;EAChC,OAAO;EACP,WAAW;EACX,YAAY;EACb;AAGD,SAAQ,WADS,QAAQ,YAAY,EAAE;AAEvC,YAAW,QAAQ;CAEnB,MAAM,OAAO,CAAC,GAAG,QAAQ;AACzB,MAAK,OAAO;AACZ,SAAQ,IAAI,KAAK;;AAKnB,SAAgB,YAAkB;AAChC,MAAK,MAAM,KAAK,SAAS,CACvB,KAAI,EAAE,UAAU,QAAW;AACzB,eAAa,EAAE,MAAM;AACrB,IAAE,YAAY,KAAK,IAAI,GAAG,EAAE,aAAa,KAAK,KAAK,GAAG,EAAE,YAAY;AACpE,IAAE,QAAQ;;;AAKhB,SAAgB,aAAmB;AACjC,MAAK,MAAM,KAAK,SAAS,CACvB,KAAI,EAAE,WAAW,KAAK,EAAE,UAAU,UAAa,EAAE,YAAY,GAAG;AAC9D,IAAE,aAAa,KAAK,KAAK;AACzB,IAAE,QAAQ,iBAAiB,QAAQ,EAAE,GAAG,EAAE,EAAE,UAAU;;;;;;;;;;;;AAgB5D,SAAgB,MAAM,SAA8B,SAAgC;AAClF,QAAO,SAAS,SAAS,QAAQ;;AAGnC,SAAS,SAAS,MAAiB;AACjC,SAAQ,SAA8B,YACpC,SAAS,SAAS;EAAE,GAAG;EAAS;EAAM,CAAC;;;AAI3C,MAAM,UAAU,SAAS,UAAU;;AAGnC,MAAM,QAAQ,SAAS,QAAQ;;AAG/B,MAAM,UAAU,SAAS,UAAU;;AAGnC,MAAM,OAAO,SAAS,OAAO;;AAG7B,MAAM,WACJ,SACA,YACW,SAAS,SAAS;CAAE,GAAG;CAAS,MAAM;CAAQ,UAAU;CAAG,CAAC;;AAGzE,MAAM,UACJ,IACA,YACS,YAAY,IAAI,QAAQ;;AAGnC,MAAM,UAAU;;;;;;;;;;;AAYhB,MAAM,UAAU,SAAS,aACvB,SACA,MACY;CACZ,MAAM,KAAK,SAAS,KAAK,SAAS;EAAE,MAAM;EAAQ,UAAU;EAAG,CAAC;AAEhE,SAAQ,MACL,SAAS;AAER,cAAY,IAAI;GAAE,SADN,OAAO,KAAK,YAAY,aAAa,KAAK,QAAQ,KAAK,GAAG,KAAK;GAC3C,MAAM;GAAW,UAAU;GAAkB,CAAC;KAE/E,QAAiB;AAEhB,cAAY,IAAI;GAAE,SADN,OAAO,KAAK,UAAU,aAAa,KAAK,MAAM,IAAI,GAAG,KAAK;GACtC,MAAM;GAAS,UAAU;GAAkB,CAAC;GAE/E;AAED,QAAO;;;AAMT,SAAgB,SAAe;CAC7B,MAAM,UAAU,SAAS;AACzB,MAAK,MAAM,KAAK,QACd,KAAI,EAAE,UAAU,OAAW,cAAa,EAAE,MAAM;AAElD,SAAQ,IAAI,EAAE,CAAC;AACf,cAAa;;;;;;;;;AC5Mf,MAAa,cAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACKrC,IAAI,iBAAiB;AAErB,SAAS,eAAqB;AAC5B,KAAI,eAAgB;AACpB,kBAAiB;CAEjB,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,aAAa,qBAAqB,GAAG;AAC3C,OAAM,cAAc;AACpB,UAAS,KAAK,YAAY,MAAM;;AAKlC,SAAS,kBAAkB,UAAyB,KAAa,QAAwB;CACvF,MAAM,CAAC,UAAU,cAAc,SAAS,MAAM,IAAI;CAElD,IAAI,QAAQ,QAAQ,IAAI;AAExB,KAAI,aAAa,MACf,UAAS,SAAS,OAAO;MACpB;AACL,WAAS,YAAY,OAAO;AAC5B,WAAS;;AAGX,KAAI,eAAe,OACjB,UAAS,UAAU,OAAO;UACjB,eAAe,SACxB,UAAS;KAET,UAAS,WAAW,OAAO;AAG7B,QAAO;;;;;;;;;;;;;;;;;AAoBT,SAAgB,QAAQ,OAAkC;CACxD,MAAM,WAAW,OAAO,YAAY;CACpC,MAAM,MAAM,OAAO,OAAO;CAC1B,MAAM,MAAM,OAAO,OAAO;CAC1B,MAAM,SAAS,OAAO,UAAU;AAEhC,eAAc;AAId,cAAa;AAGX,MAAI,CAFW,SAAS,CACG,MAAM,MAAM,EAAE,UAAU,WAAW,CAC5C;EAElB,MAAM,MAAM,4BAA4B;GACtC,MAAM,UAAU,SAAS;GACzB,IAAI,UAAU;GACd,MAAM,OAAO,QAAQ,KAAK,MAAM;AAC9B,QAAI,EAAE,UAAU,YAAY;AAC1B,eAAU;AACV,YAAO;MAAE,GAAG;MAAG,OAAO;MAAoB;;AAE5C,WAAO;KACP;AACF,OAAI,QAAS,SAAQ,IAAI,KAAK;IAC9B;AAEF,kBAAgB,qBAAqB,IAAI,CAAC;GAC1C;CAGF,MAAM,gBAAgB,eAAe,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC;CAE3D,MAAM,iBAAiB,kBAAkB,UAAU,KAAK,OAAO;AAE/D,QACE,oBAAC,QAAD;EAAQ,QAAQ,SAAS;YACvB,oBAAC,WAAD;GACE,OAAM;GACN,OAAO;GACP,cAAW;GACX,aAAU;GACV,cAAc;GACd,cAAc;aAEd,oBAAC,KAAD;IAAK,MAAM;IAAe,KAAK,MAAa,EAAE;eAC1C,MAAa,oBAAC,WAAD,EAAW,OAAO,GAAK;IAClC;GACE;EACH;;AAMb,SAAS,UAAU,EAAE,OAAO,KAAmC;CAC7D,MAAM,aACJ,EAAE,UAAU,aACR,4BACA,EAAE,UAAU,YACV,2BACA;AAER,QACE,qBAAC,OAAD;EACE,OAAO,8BAA8B,EAAE,OAAO;EAC9C,MAAK;EACL,eAAY;EACZ,iBAAe,EAAE;YAJnB;GAME,oBAAC,OAAD;IAAK,OAAM;cACR,OAAO,EAAE,YAAY,WAAW,EAAE,UAAU,EAAE;IAC3C;GACL,EAAE,UACD,oBAAC,UAAD;IAAQ,MAAK;IAAS,OAAM;IAAuB,SAAS,EAAE,OAAO;cAClE,EAAE,OAAO;IACH;GAEV,EAAE,eACD,oBAAC,UAAD;IACE,MAAK;IACL,OAAM;IACN,eAAe,MAAM,QAAQ,EAAE,GAAG;IAClC,cAAW;cACZ;IAEQ;GAEP"}

package/lib/types/index.d.ts

@@ -0,0 +1,109 @@
+import * as _pyreon_reactivity0 from "@pyreon/reactivity";
+import { VNodeChild } from "@pyreon/core";
+
+//#region src/types.d.ts
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type ToastType = "info" | "success" | "warning" | "error";
+interface ToastOptions {
+  /** Toast variant — controls styling. */
+  type?: ToastType;
+  /** Auto-dismiss delay in ms. Default: 4000. Set 0 for persistent. */
+  duration?: number;
+  /** Screen position. Default: inherited from Toaster. */
+  position?: ToastPosition;
+  /** Whether the toast shows a dismiss button. Default: true. */
+  dismissible?: boolean;
+  /** Optional action button. */
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  /** Called when the toast is dismissed (manually or by timeout). */
+  onDismiss?: () => void;
+}
+interface ToasterProps {
+  /** Default position for all toasts. Default: "top-right". */
+  position?: ToastPosition;
+  /** Maximum visible toasts. Default: 5. */
+  max?: number;
+  /** Gap between toasts in px. Default: 8. */
+  gap?: number;
+  /** Offset from viewport edge in px. Default: 16. */
+  offset?: number;
+}
+interface ToastPromiseOptions<T> {
+  loading: string | VNodeChild;
+  success: string | VNodeChild | ((data: T) => string | VNodeChild);
+  error: string | VNodeChild | ((err: unknown) => string | VNodeChild);
+}
+type ToastState = "entering" | "visible" | "exiting";
+interface Toast {
+  id: string;
+  message: string | VNodeChild;
+  type: ToastType;
+  duration: number;
+  dismissible: boolean;
+  action: {
+    label: string;
+    onClick: () => void;
+  } | undefined;
+  onDismiss: (() => void) | undefined;
+  state: ToastState;
+  timer: ReturnType<typeof setTimeout> | undefined;
+  /** Remaining ms when timer was paused (hover). */
+  remaining: number;
+  /** Timestamp when current timer started. */
+  timerStart: number;
+}
+//#endregion
+//#region src/toast.d.ts
+/**
+ * Module-level signal holding the active toast stack.
+ * Consumed by the `Toaster` component.
+ */
+declare const _toasts: _pyreon_reactivity0.Signal<Toast[]>;
+/**
+ * Show a toast notification.
+ *
+ * @example
+ * toast("Saved!")
+ * toast("Error occurred", { type: "error", duration: 6000 })
+ *
+ * @returns The toast id — pass to `toast.dismiss(id)` to remove it.
+ */
+declare function toast(message: string | VNodeChild, options?: ToastOptions): string;
+declare namespace toast {
+  var success: (message: string | VNodeChild, options?: Omit<ToastOptions, "type">) => string;
+  var error: (message: string | VNodeChild, options?: Omit<ToastOptions, "type">) => string;
+  var warning: (message: string | VNodeChild, options?: Omit<ToastOptions, "type">) => string;
+  var info: (message: string | VNodeChild, options?: Omit<ToastOptions, "type">) => string;
+  var loading: (message: string | VNodeChild, options?: Omit<ToastOptions, "type" | "duration">) => string;
+  var update: (id: string, updates: Partial<Pick<ToastOptions, "type" | "duration">> & {
+    message?: string | VNodeChild;
+  }) => void;
+  var dismiss: (id?: string) => void;
+  var promise: <T>(promise: Promise<T>, opts: ToastPromiseOptions<T>) => Promise<T>;
+}
+/** @internal Reset state for testing. */
+declare function _reset(): void;
+//#endregion
+//#region src/toaster.d.ts
+/**
+ * Render component for toast notifications. Place once at your app root.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <>
+ *       <Toaster position="bottom-right" />
+ *       <MyApp />
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+declare function Toaster(props?: ToasterProps): VNodeChild;
+//#endregion
+export { type Toast, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastState, type ToastType, Toaster, type ToasterProps, _reset, _toasts, toast };
+//# sourceMappingURL=index2.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.d.ts","names":[],"sources":["../../../src/types.ts","../../../src/toast.ts","../../../src/toaster.tsx"],"mappings":";;;;KAIY,aAAA;AAAA,KAQA,SAAA;AAAA,UAEK,YAAA;EAVL;EAYV,IAAA,GAAO,SAAA;;EAEP,QAAA;EAduB;EAgBvB,QAAA,GAAW,aAAA;EARQ;EAUnB,WAAA;EAVmB;EAYnB,MAAA;IAAW,KAAA;IAAe,OAAA;EAAA;EAJF;EAMxB,SAAA;AAAA;AAAA,UAGe,YAAA;EATf;EAWA,QAAA,GAAW,aAAA;EATX;EAWA,GAAA;EATW;EAWX,GAAA;EATA;EAWA,MAAA;AAAA;AAAA,UAGe,mBAAA;EACf,OAAA,WAAkB,UAAA;EAClB,OAAA,WAAkB,UAAA,KAAe,IAAA,EAAM,CAAA,cAAe,UAAA;EACtD,KAAA,WAAgB,UAAA,KAAe,GAAA,uBAA0B,UAAA;AAAA;AAAA,KAK/C,UAAA;AAAA,UAEK,KAAA;EACf,EAAA;EACA,OAAA,WAAkB,UAAA;EAClB,IAAA,EAAM,SAAA;EACN,QAAA;EACA,WAAA;EACA,MAAA;IAAU,KAAA;IAAe,OAAA;EAAA;EACzB,SAAA;EACA,KAAA,EAAO,UAAA;EACP,KAAA,EAAO,UAAA,QAAkB,UAAA;EAhBgC;EAkBzD,SAAA;EAlBmE;EAoBnE,UAAA;AAAA;;;;;AA3DF;;cCSa,OAAA,EAAO,mBAAA,CAAA,MAAA,CAAA,KAAA;ADDpB;;;;;AAEA;;;;AAFA,iBCyHgB,KAAA,CAAM,OAAA,WAAkB,UAAA,EAAY,OAAA,GAAU,YAAA;AAAA,kBAA9C,KAAA;EAAA,gCAKY,UAAA,EAAU,OAAA,GAAY,IAAA,CAAK,YAAA;EAAA,8BAA3B,UAAA,EAAU,OAAA,GAAY,IAAA,CAAK,YAAA;EAAA,gCAA3B,UAAA,EAAU,OAAA,GAAY,IAAA,CAAK,YAAA;EAAA,6BAA3B,UAAA,EAAU,OAAA,GAAY,IAAA,CAAK,YAAA;EAAA,gCAkBnC,UAAA,EAAU,OAAA,GAClB,IAAA,CAAK,YAAA;EAAA,yBAKL,OAAA,EACD,OAAA,CAAQ,IAAA,CAAK,YAAA;IAAwC,OAAA,YAAmB,UAAA;EAAA;EAAA;mBAgB5C,OAAA,EAC5B,OAAA,CAAQ,CAAA,GAAE,IAAA,EACb,mBAAA,CAAoB,CAAA,MACzB,OAAA,CAAQ,CAAA;AAAA;;iBAoBK,MAAA,CAAA;;;;;ADtMhB;;;;;AAQA;;;;;AAEA;;;iBEiDgB,OAAA,CAAQ,KAAA,GAAQ,YAAA,GAAe,UAAA"}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@pyreon/toast",
+  "version": "0.11.0",
+  "description": "Imperative toast notifications for Pyreon — no provider needed",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pyreon/pyreon.git",
+    "directory": "packages/fundamentals/toast"
+  },
+  "homepage": "https://github.com/pyreon/fundamentals/tree/main/packages/toast#readme",
+  "bugs": {
+    "url": "https://github.com/pyreon/pyreon/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/types/index.d.ts"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "vl_rolldown_build",
+    "dev": "vl_rolldown_build-watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check ."
+  },
+  "peerDependencies": {
+    "@pyreon/core": "^0.11.0",
+    "@pyreon/reactivity": "^0.11.0"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.8.3",
+    "@pyreon/core": "^0.11.0",
+    "@pyreon/reactivity": "^0.11.0",
+    "@vitus-labs/tools-lint": "^1.11.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,40 @@
+/**
+ * @pyreon/toast — imperative toast notifications for Pyreon.
+ *
+ * No provider needed — call `toast()` from anywhere in your app,
+ * and render `<Toaster />` once at the root.
+ *
+ * @example
+ * import { toast, Toaster } from "@pyreon/toast"
+ *
+ * // In your root component:
+ * function App() {
+ *   return (
+ *     <>
+ *       <Toaster position="top-right" />
+ *       <button onClick={() => toast.success("Saved!")}>Save</button>
+ *     </>
+ *   )
+ * }
+ *
+ * // Anywhere in your app:
+ * toast("Hello!")
+ * toast.error("Something went wrong")
+ * toast.promise(fetchData(), {
+ *   loading: "Loading...",
+ *   success: "Done!",
+ *   error: "Failed",
+ * })
+ */
+
+export { _reset, _toasts, toast } from "./toast"
+export { Toaster } from "./toaster"
+export type {
+  Toast,
+  ToasterProps,
+  ToastOptions,
+  ToastPosition,
+  ToastPromiseOptions,
+  ToastState,
+  ToastType,
+} from "./types"

package/src/styles.ts

@@ -0,0 +1,80 @@
+/**
+ * Minimal CSS for the toast container and items.
+ * Injected into the DOM once when the Toaster component mounts.
+ */
+export const toastStyles = /* css */ `
+.pyreon-toast-container {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.pyreon-toast {
+  pointer-events: auto;
+  background: #fff;
+  color: #1a1a1a;
+  padding: 12px 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  line-height: 1.4;
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 200ms ease, transform 200ms ease, max-height 200ms ease;
+  max-height: 200px;
+  overflow: hidden;
+}
+
+.pyreon-toast--entering {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.pyreon-toast--exiting {
+  opacity: 0;
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.pyreon-toast--info { border-left: 4px solid #3b82f6; }
+.pyreon-toast--success { border-left: 4px solid #22c55e; }
+.pyreon-toast--warning { border-left: 4px solid #f59e0b; }
+.pyreon-toast--error { border-left: 4px solid #ef4444; }
+
+.pyreon-toast__message { flex: 1; }
+
+.pyreon-toast__action {
+  background: none;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 13px;
+  cursor: pointer;
+  color: #3b82f6;
+  white-space: nowrap;
+}
+
+.pyreon-toast__action:hover {
+  background: #f3f4f6;
+}
+
+.pyreon-toast__dismiss {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px 4px;
+  font-size: 16px;
+  color: #9ca3af;
+  line-height: 1;
+}
+
+.pyreon-toast__dismiss:hover {
+  color: #4b5563;
+}
+`