@burdenoff/fe-libs 2026.510.126

package/dist/chrome/NotificationCenter.js

@@ -0,0 +1,697 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { gql as s } from "@apollo/client";
+//#region src/chrome/NotificationCenter.tsx
+var c = s`
+  query GetNotifications(
+    $filter: NotificationFilterInput
+    $limit: Int
+    $offset: Int
+  ) {
+    notifications(filter: $filter, limit: $limit, offset: $offset) {
+      items {
+        id
+        title
+        message
+        type
+        priority
+        status
+        channel
+        appName
+        redirectUrl
+        isRead
+        readAt
+        createdAt
+      }
+      total
+      hasMore
+    }
+  }
+`, l = s`
+  query GetMyUnreadNotificationCount($filter: NotificationFilterInput) {
+    myUnreadNotificationCount(filter: $filter)
+  }
+`, u = s`
+  subscription MyUnreadNotificationCountStream(
+    $filter: NotificationFilterInput
+  ) {
+    myUnreadNotificationCountStream(filter: $filter)
+  }
+`, d = s`
+  query MyCountsByApp {
+    myNotificationCountsByApp
+  }
+`, f = s`
+  mutation MarkAsRead($id: ID!) {
+    markNotificationAsRead(id: $id) {
+      id
+      isRead
+      readAt
+      status
+    }
+  }
+`, p = s`
+  mutation MarkAllRead {
+    markAllMyNotificationsAsRead {
+      success
+      count
+    }
+  }
+`, m = s`
+  mutation DeleteNotification($id: ID!) {
+    deleteNotification(id: $id)
+  }
+`, h = {
+	URGENT: {
+		color: "text-status-error-text",
+		bgColor: "bg-status-error-bg",
+		label: "Urgent",
+		order: 0
+	},
+	HIGH: {
+		color: "text-status-warning-text",
+		bgColor: "bg-status-warning-bg",
+		label: "High",
+		order: 1
+	},
+	MEDIUM: {
+		color: "text-status-info-text",
+		bgColor: "bg-status-info-bg",
+		label: "Medium",
+		order: 2
+	},
+	LOW: {
+		color: "text-text-tertiary",
+		bgColor: "bg-bg-muted",
+		label: "Low",
+		order: 3
+	}
+}, g = {
+	SYSTEM: {
+		icon: "⚙️",
+		label: "System"
+	},
+	ALERT: {
+		icon: "⚠️",
+		label: "Alert"
+	},
+	TRANSACTIONAL: {
+		icon: "📋",
+		label: "Transaction"
+	},
+	MARKETING: {
+		icon: "📣",
+		label: "Marketing"
+	}
+}, _ = [
+	{
+		value: "all",
+		label: "All"
+	},
+	{
+		value: "unread",
+		label: "Unread"
+	},
+	{
+		value: "read",
+		label: "Read"
+	}
+], v = [
+	{
+		value: "ALL",
+		label: "All"
+	},
+	{
+		value: "SYSTEM",
+		label: "System"
+	},
+	{
+		value: "ALERT",
+		label: "Alert"
+	},
+	{
+		value: "TRANSACTIONAL",
+		label: "Transactional"
+	},
+	{
+		value: "MARKETING",
+		label: "Marketing"
+	}
+];
+function ee(e) {
+	let t = Date.now() - new Date(e).getTime(), n = Math.floor(t / 1e3), r = Math.floor(n / 60), i = Math.floor(r / 60), a = Math.floor(i / 24);
+	return n < 60 ? "Just now" : r < 60 ? `${r}m ago` : i < 24 ? `${i}h ago` : a < 7 ? `${a}d ago` : new Date(e).toLocaleDateString();
+}
+function y(e, t) {
+	let n = [...e];
+	switch (t) {
+		case "newest": return n.sort((e, t) => new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime());
+		case "oldest": return n.sort((e, t) => new Date(e.createdAt).getTime() - new Date(t.createdAt).getTime());
+		case "priority": return n.sort((e, t) => (h[e.priority]?.order ?? 99) - (h[t.priority]?.order ?? 99));
+		default: return n;
+	}
+}
+var b = ({ notification: e, onMarkAsRead: t, onDelete: n, onRedirect: r }) => {
+	let { id: i, title: s, message: c, type: l, priority: u, appName: d, redirectUrl: f, isRead: p, createdAt: m } = e, _ = h[u] ?? h.MEDIUM, v = g[l] ?? {
+		icon: "🔔",
+		label: l
+	};
+	return /* @__PURE__ */ o("div", {
+		className: `group relative flex gap-3 p-3 rounded-card border transition-all duration-150 cursor-pointer ${p ? "bg-bg-canvas border-border-subtle" : "bg-bg-elevated border-border-default shadow-sm"} hover:bg-action-ghost-bg-hover`,
+		onClick: () => {
+			p || t(i), f && r(f);
+		},
+		role: "button",
+		tabIndex: 0,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), p || t(i), f && r(f));
+		},
+		children: [
+			!p && /* @__PURE__ */ a("div", { className: "absolute top-3 left-1.5 w-2 h-2 rounded-full bg-action-primary-bg" }),
+			/* @__PURE__ */ a("div", {
+				className: "flex-shrink-0 mt-0.5 ml-2",
+				children: /* @__PURE__ */ a("span", {
+					className: "text-base",
+					"aria-hidden": "true",
+					children: v.icon
+				})
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex-1 min-w-0",
+				children: [
+					/* @__PURE__ */ o("div", {
+						className: "flex items-start justify-between gap-2",
+						children: [/* @__PURE__ */ a("h4", {
+							className: `text-sm truncate ${p ? "font-normal text-text-secondary" : "font-semibold text-text-primary"}`,
+							children: s
+						}), /* @__PURE__ */ o("div", {
+							className: "flex-shrink-0 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity",
+							children: [!p && /* @__PURE__ */ a("button", {
+								onClick: (e) => {
+									e.stopPropagation(), t(i);
+								},
+								className: "p-1 rounded hover:bg-bg-muted text-text-tertiary hover:text-text-primary",
+								title: "Mark as read",
+								"aria-label": "Mark as read",
+								children: /* @__PURE__ */ a("svg", {
+									className: "w-3.5 h-3.5",
+									fill: "none",
+									stroke: "currentColor",
+									viewBox: "0 0 24 24",
+									children: /* @__PURE__ */ a("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										strokeWidth: 2,
+										d: "M5 13l4 4L19 7"
+									})
+								})
+							}), /* @__PURE__ */ a("button", {
+								onClick: (e) => {
+									e.stopPropagation(), n(i);
+								},
+								className: "p-1 rounded hover:bg-bg-muted text-text-tertiary hover:text-status-error-text",
+								title: "Dismiss",
+								"aria-label": "Dismiss notification",
+								children: /* @__PURE__ */ a("svg", {
+									className: "w-3.5 h-3.5",
+									fill: "none",
+									stroke: "currentColor",
+									viewBox: "0 0 24 24",
+									children: /* @__PURE__ */ a("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										strokeWidth: 2,
+										d: "M6 18L18 6M6 6l12 12"
+									})
+								})
+							})]
+						})]
+					}),
+					/* @__PURE__ */ a("p", {
+						className: "text-xs text-text-secondary line-clamp-2 mt-0.5",
+						children: c
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "flex items-center gap-2 mt-1.5 flex-wrap",
+						children: [
+							/* @__PURE__ */ a("span", {
+								className: `inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium rounded ${_.bgColor} ${_.color}`,
+								children: _.label
+							}),
+							d && /* @__PURE__ */ a("span", {
+								className: "inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium rounded bg-bg-muted text-text-tertiary",
+								children: d
+							}),
+							/* @__PURE__ */ a("span", {
+								className: "text-[10px] text-text-tertiary",
+								children: ee(m)
+							}),
+							f && /* @__PURE__ */ o("button", {
+								onClick: (e) => {
+									e.stopPropagation(), r(f);
+								},
+								className: "inline-flex items-center gap-0.5 text-[10px] text-action-primary-bg hover:underline",
+								"aria-label": "Open link",
+								children: ["Open", /* @__PURE__ */ a("svg", {
+									className: "w-2.5 h-2.5",
+									fill: "none",
+									stroke: "currentColor",
+									viewBox: "0 0 24 24",
+									children: /* @__PURE__ */ a("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										strokeWidth: 2,
+										d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+									})
+								})]
+							})
+						]
+					})
+				]
+			})
+		]
+	});
+}, x = () => /* @__PURE__ */ o("div", {
+	className: "flex gap-3 p-3 rounded-card border border-border-subtle animate-pulse",
+	children: [/* @__PURE__ */ a("div", { className: "w-6 h-6 rounded bg-bg-muted flex-shrink-0" }), /* @__PURE__ */ o("div", {
+		className: "flex-1 space-y-2",
+		children: [
+			/* @__PURE__ */ a("div", { className: "h-4 bg-bg-muted rounded w-3/4" }),
+			/* @__PURE__ */ a("div", { className: "h-3 bg-bg-muted rounded w-full" }),
+			/* @__PURE__ */ o("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ a("div", { className: "h-3 bg-bg-muted rounded w-12" }), /* @__PURE__ */ a("div", { className: "h-3 bg-bg-muted rounded w-16" })]
+			})
+		]
+	})]
+}), te = ({ client: s, onViewAll: h, compact: ee = !1, pollInterval: te = 3e4, lazy: S = !1 }) => {
+	let C = n(null), [w, T] = r(!1), [E, D] = r(!1), [O, k] = r([]), [A, j] = r(0), [M, N] = r({}), [P, F] = r(0), [I, L] = r(!1), [R, z] = r(null), [B, V] = r("all"), [H, U] = r("ALL"), [W, G] = r("ALL"), [K, ne] = r("newest");
+	t(() => {
+		let e = window.matchMedia("(max-width: 767px)");
+		D(e.matches);
+		let t = (e) => D(e.matches);
+		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []), t(() => {
+		if (!w || E) return;
+		let e = (e) => {
+			C.current && !C.current.contains(e.target) && T(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [w, E]), t(() => {
+		if (!w) return;
+		let e = (e) => {
+			e.key === "Escape" && T(!1);
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [w]);
+	let q = n(s);
+	t(() => {
+		q.current = s;
+	}, [s]);
+	let J = e(async () => {
+		try {
+			let e = (await q.current.query({
+				query: l,
+				variables: { filter: {
+					channel: "IN_APP",
+					archived: !1
+				} },
+				fetchPolicy: "network-only"
+			})).data;
+			j(e?.myUnreadNotificationCount ?? 0);
+		} catch {}
+	}, []);
+	t(() => {
+		if (S) return;
+		J();
+		let e = q.current.subscribe({
+			query: u,
+			variables: { filter: {
+				channel: "IN_APP",
+				archived: !1
+			} },
+			fetchPolicy: "no-cache"
+		}).subscribe({
+			next: (e) => {
+				let t = e.data;
+				typeof t?.myUnreadNotificationCountStream == "number" && j(t.myUnreadNotificationCountStream);
+			},
+			error: () => {}
+		}), t = setInterval(J, 300 * 1e3);
+		return () => {
+			e.unsubscribe(), clearInterval(t);
+		};
+	}, [J, S]);
+	let Y = e(async () => {
+		L(!0), z(null);
+		try {
+			let e = {
+				channel: "IN_APP",
+				archived: !1
+			};
+			B === "unread" && (e.isRead = !1), B === "read" && (e.isRead = !0), H !== "ALL" && (e.type = H), W !== "ALL" && (e.appName = W);
+			let t = (await q.current.query({
+				query: c,
+				variables: {
+					filter: e,
+					limit: 20,
+					offset: 0
+				},
+				fetchPolicy: "network-only"
+			})).data?.notifications;
+			t && (k(t.items ?? []), F(t.total ?? 0));
+		} catch (e) {
+			z(e instanceof Error ? e.message : "Failed to load notifications");
+		} finally {
+			L(!1);
+		}
+	}, [
+		B,
+		H,
+		W
+	]), X = e(async () => {
+		try {
+			let e = (await q.current.query({
+				query: d,
+				fetchPolicy: "network-only"
+			})).data;
+			N(e?.myNotificationCountsByApp ?? {});
+		} catch {}
+	}, []);
+	t(() => {
+		w && (S && J(), Y(), X(), J());
+	}, [
+		w,
+		Y,
+		X,
+		J,
+		S
+	]);
+	let re = e(() => {
+		T((e) => !e);
+	}, []), ie = e(async (e) => {
+		try {
+			await q.current.mutate({
+				mutation: f,
+				variables: { id: e }
+			}), k((t) => t.map((t) => t.id === e ? {
+				...t,
+				isRead: !0,
+				readAt: (/* @__PURE__ */ new Date()).toISOString()
+			} : t)), j((e) => Math.max(0, e - 1));
+		} catch (e) {
+			console.error("Failed to mark notification as read:", e);
+		}
+	}, []), ae = e(async () => {
+		try {
+			await q.current.mutate({ mutation: p }), k((e) => e.map((e) => ({
+				...e,
+				isRead: !0,
+				readAt: e.readAt || (/* @__PURE__ */ new Date()).toISOString()
+			}))), j(0);
+		} catch (e) {
+			console.error("Failed to mark all notifications as read:", e);
+		}
+	}, []), oe = e(async (e) => {
+		try {
+			await q.current.mutate({
+				mutation: m,
+				variables: { id: e }
+			});
+			let t = O.find((t) => t.id === e);
+			k((t) => t.filter((t) => t.id !== e)), F((e) => Math.max(0, e - 1)), t && !t.isRead && j((e) => Math.max(0, e - 1));
+		} catch (e) {
+			console.error("Failed to delete notification:", e);
+		}
+	}, [O]), se = e((e) => {
+		window.open(e, "_blank", "noopener,noreferrer");
+	}, []), ce = e(() => {
+		T(!1), h?.();
+	}, [h]), Z = y(O, K), Q = Object.entries(M).filter(([e]) => e && e !== "null").sort((e, t) => t[1] - e[1]), $ = /* @__PURE__ */ o("div", {
+		className: "flex flex-col h-full",
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "flex items-center justify-between p-4 border-b border-border-subtle",
+				children: [/* @__PURE__ */ o("div", {
+					className: "flex items-center gap-2",
+					children: [
+						E && /* @__PURE__ */ a("button", {
+							onClick: () => T(!1),
+							className: "p-1 rounded-button hover:bg-action-ghost-bg-hover text-text-primary",
+							"aria-label": "Close",
+							children: /* @__PURE__ */ a("svg", {
+								className: "w-5 h-5",
+								fill: "none",
+								stroke: "currentColor",
+								viewBox: "0 0 24 24",
+								children: /* @__PURE__ */ a("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									strokeWidth: 2,
+									d: "M15 19l-7-7 7-7"
+								})
+							})
+						}),
+						/* @__PURE__ */ a("svg", {
+							className: "w-5 h-5 text-text-primary",
+							fill: "none",
+							stroke: "currentColor",
+							viewBox: "0 0 24 24",
+							children: /* @__PURE__ */ a("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+							})
+						}),
+						/* @__PURE__ */ a("h2", {
+							className: "text-sm font-semibold text-text-primary",
+							children: "Notifications"
+						}),
+						A > 0 && /* @__PURE__ */ a("span", {
+							className: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold text-action-primary-text bg-action-primary-bg rounded-full",
+							children: A > 9 ? "9+" : A
+						})
+					]
+				}), /* @__PURE__ */ o("div", {
+					className: "flex items-center gap-2",
+					children: [A > 0 && /* @__PURE__ */ a("button", {
+						onClick: ae,
+						className: "text-xs text-action-primary-bg hover:underline font-medium",
+						children: "Mark all read"
+					}), !E && /* @__PURE__ */ a("button", {
+						onClick: () => T(!1),
+						className: "p-1 rounded-button hover:bg-action-ghost-bg-hover text-text-tertiary",
+						"aria-label": "Close panel",
+						children: /* @__PURE__ */ a("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							stroke: "currentColor",
+							viewBox: "0 0 24 24",
+							children: /* @__PURE__ */ a("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M6 18L18 6M6 6l12 12"
+							})
+						})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "px-4 pt-3 pb-2 space-y-2 border-b border-border-subtle",
+				children: [
+					/* @__PURE__ */ a("div", {
+						className: "flex gap-1",
+						children: _.map((e) => /* @__PURE__ */ a("button", {
+							onClick: () => V(e.value),
+							className: `px-3 py-1 text-xs font-medium rounded-full transition-colors ${B === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-muted text-text-secondary hover:bg-action-ghost-bg-hover"}`,
+							children: e.label
+						}, e.value))
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "flex flex-wrap items-center gap-1",
+						children: [v.map((e) => /* @__PURE__ */ o("button", {
+							onClick: () => U(e.value),
+							className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${H === e.value ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-muted"}`,
+							children: [e.value !== "ALL" && g[e.value] && /* @__PURE__ */ a("span", {
+								className: "mr-0.5",
+								children: g[e.value].icon
+							}), e.label]
+						}, e.value)), /* @__PURE__ */ o("select", {
+							value: K,
+							onChange: (e) => ne(e.target.value),
+							className: "ml-auto text-[11px] text-text-secondary bg-transparent border-none cursor-pointer focus:outline-none",
+							"aria-label": "Sort notifications",
+							children: [
+								/* @__PURE__ */ a("option", {
+									value: "newest",
+									children: "Newest"
+								}),
+								/* @__PURE__ */ a("option", {
+									value: "oldest",
+									children: "Oldest"
+								}),
+								/* @__PURE__ */ a("option", {
+									value: "priority",
+									children: "Priority"
+								})
+							]
+						})]
+					}),
+					Q.length > 1 && /* @__PURE__ */ o("div", {
+						className: "flex flex-wrap gap-1",
+						children: [/* @__PURE__ */ a("button", {
+							onClick: () => G("ALL"),
+							className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${W === "ALL" ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-muted"}`,
+							children: "All Apps"
+						}), Q.map(([e, t]) => /* @__PURE__ */ o("button", {
+							onClick: () => G(e),
+							className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${W === e ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-muted"}`,
+							children: [e, /* @__PURE__ */ o("span", {
+								className: "ml-1 text-text-tertiary",
+								children: [
+									"(",
+									t,
+									")"
+								]
+							})]
+						}, e))]
+					})
+				]
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "flex-1 overflow-y-auto",
+				children: I ? /* @__PURE__ */ o("div", {
+					className: "p-3 space-y-2",
+					children: [
+						/* @__PURE__ */ a(x, {}),
+						/* @__PURE__ */ a(x, {}),
+						/* @__PURE__ */ a(x, {})
+					]
+				}) : R ? /* @__PURE__ */ o("div", {
+					className: "flex flex-col items-center justify-center p-8 text-center",
+					children: [
+						/* @__PURE__ */ a("svg", {
+							className: "w-10 h-10 text-status-error-text mb-3",
+							fill: "none",
+							stroke: "currentColor",
+							viewBox: "0 0 24 24",
+							children: /* @__PURE__ */ a("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
+							})
+						}),
+						/* @__PURE__ */ a("p", {
+							className: "text-sm text-text-secondary mb-2",
+							children: "Failed to load notifications"
+						}),
+						/* @__PURE__ */ a("button", {
+							onClick: Y,
+							className: "text-xs text-action-primary-bg hover:underline font-medium",
+							children: "Try again"
+						})
+					]
+				}) : Z.length === 0 ? /* @__PURE__ */ o("div", {
+					className: "flex flex-col items-center justify-center p-8 text-center",
+					children: [
+						/* @__PURE__ */ a("svg", {
+							className: "w-12 h-12 text-text-tertiary mb-3",
+							fill: "none",
+							stroke: "currentColor",
+							viewBox: "0 0 24 24",
+							children: /* @__PURE__ */ a("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 1.5,
+								d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+							})
+						}),
+						/* @__PURE__ */ a("p", {
+							className: "text-sm font-medium text-text-primary",
+							children: "You're all caught up!"
+						}),
+						/* @__PURE__ */ a("p", {
+							className: "text-xs text-text-tertiary mt-1",
+							children: B !== "all" || H !== "ALL" || W !== "ALL" ? "No notifications match your filters" : "No notifications yet"
+						})
+					]
+				}) : /* @__PURE__ */ a("div", {
+					className: "p-2 space-y-1.5",
+					children: Z.map((e) => /* @__PURE__ */ a(b, {
+						notification: e,
+						onMarkAsRead: ie,
+						onDelete: oe,
+						onRedirect: se
+					}, e.id))
+				})
+			}),
+			Z.length > 0 && /* @__PURE__ */ a("div", {
+				className: "p-3 border-t border-border-subtle",
+				children: /* @__PURE__ */ o("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ o("span", {
+						className: "text-[11px] text-text-tertiary",
+						children: [
+							P,
+							" notification",
+							P === 1 ? "" : "s"
+						]
+					}), h && /* @__PURE__ */ a("button", {
+						onClick: ce,
+						className: "text-xs text-action-primary-bg hover:underline font-medium",
+						children: "View All"
+					})]
+				})
+			})
+		]
+	});
+	return /* @__PURE__ */ o("div", {
+		ref: C,
+		className: "relative",
+		children: [
+			/* @__PURE__ */ o("button", {
+				onClick: re,
+				className: "relative p-2 hover:bg-action-ghost-bg-hover rounded-button text-text-primary",
+				"aria-label": `Notifications${A > 0 ? ` (${A} unread)` : ""}`,
+				"aria-expanded": w,
+				"aria-haspopup": "true",
+				children: [/* @__PURE__ */ a("svg", {
+					className: "w-icon-md h-icon-md",
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ a("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+					})
+				}), A > 0 && /* @__PURE__ */ a("span", {
+					className: "absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold text-action-primary-text bg-action-primary-bg rounded-full border-2 border-bg-elevated",
+					children: A > 9 ? "9+" : A
+				})]
+			}),
+			w && !E && /* @__PURE__ */ a("div", {
+				className: "absolute right-0 top-full mt-2 w-[calc(100vw-1.5rem)] sm:w-[420px] max-h-[600px] bg-bg-elevated border border-border-subtle rounded-card shadow-popover z-50 overflow-hidden flex flex-col",
+				role: "dialog",
+				"aria-label": "Notifications panel",
+				children: $
+			}),
+			w && E && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", {
+				className: "fixed inset-0 bg-black/50 z-[60]",
+				onClick: () => T(!1),
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ a("div", {
+				className: "fixed inset-x-0 bottom-0 top-0 bg-bg-elevated z-[70] flex flex-col",
+				role: "dialog",
+				"aria-label": "Notifications panel",
+				children: $
+			})] })
+		]
+	});
+};
+//#endregion
+export { te as NotificationCenter };

package/dist/chrome/PanelContainer.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export interface PanelContainerProps {
+    position: "bottom" | "left" | "right";
+}
+export { usePanelManagerStore as panelManagerStore } from '../shared/plugins/panels/usePanelManagerStore';
+export { usePanelRegistryStore as panelRegistryStore } from '../shared/plugins/registries/usePanelRegistry';
+export declare const PanelContainer: FC<PanelContainerProps>;
+//# sourceMappingURL=PanelContainer.d.ts.map