@burdenoff/fe-libs 2026.527.2 → 2026.527.4

package/dist/chrome/globalSearch/SearchInput.js

@@ -0,0 +1,28 @@
+import { Search as e, X as t } from "lucide-react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/chrome/globalSearch/SearchInput.tsx
+function i({ value: i, placeholder: a, onChange: o, onClear: s }) {
+	return /* @__PURE__ */ r("div", {
+		className: "flex items-center border-b px-3",
+		children: [
+			/* @__PURE__ */ n(e, { className: "size-4 mr-2 flex-shrink-0 opacity-50" }),
+			/* @__PURE__ */ n("input", {
+				type: "text",
+				placeholder: a,
+				value: i,
+				onChange: (e) => o(e.target.value),
+				className: "flex-1 bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground",
+				autoFocus: !0
+			}),
+			i && /* @__PURE__ */ n("button", {
+				type: "button",
+				onClick: s,
+				className: "ml-2 rounded-sm opacity-70 hover:opacity-100",
+				"aria-label": "Clear search",
+				children: /* @__PURE__ */ n(t, { className: "size-4" })
+			})
+		]
+	});
+}
+//#endregion
+export { i as SearchInput };

package/dist/chrome/globalSearch/SearchModeBar.js

@@ -0,0 +1,36 @@
+import { cn as e } from "../../utils/cn.js";
+import "../../utils/index.js";
+import { ChevronDown as t, ChevronUp as n, SlidersHorizontal as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/chrome/globalSearch/SearchModeBar.tsx
+function o({ searchMode: o, onSearchModeChange: s, showAdvanced: c, onToggleAdvanced: l }) {
+	return /* @__PURE__ */ a("div", {
+		className: "flex items-center justify-between px-3 py-1.5 border-b",
+		children: [/* @__PURE__ */ i("div", {
+			className: "flex items-center gap-1",
+			children: [
+				"PARTIAL",
+				"FULLTEXT",
+				"EXACT"
+			].map((t) => /* @__PURE__ */ i("button", {
+				type: "button",
+				onClick: () => s(t),
+				className: e("px-2 py-1 text-[10px] font-medium rounded transition-colors", o === t ? "bg-primary text-primary-foreground" : "bg-muted/60 text-muted-foreground hover:bg-muted"),
+				title: t === "PARTIAL" ? "Autocomplete — matches prefixes and substrings" : t === "FULLTEXT" ? "Full-text — BM25 word matching with stemming" : "Exact — all search terms must appear",
+				children: t === "PARTIAL" ? "Partial" : t === "FULLTEXT" ? "Fulltext" : "Exact"
+			}, t))
+		}), /* @__PURE__ */ a("button", {
+			type: "button",
+			onClick: l,
+			className: "flex items-center gap-1 px-2 py-1 text-[10px] font-medium text-muted-foreground rounded hover:bg-muted transition-colors",
+			"aria-expanded": c,
+			children: [
+				/* @__PURE__ */ i(r, { className: "size-3" }),
+				"Filters",
+				i(c ? n : t, { className: "size-3" })
+			]
+		})]
+	});
+}
+//#endregion
+export { o as SearchModeBar };

package/dist/chrome/globalSearch/useAdvancedFilters.js

@@ -0,0 +1,78 @@
+import { splitCsv as e } from "./utils.js";
+import { useCallback as t, useState as n } from "react";
+//#region src/chrome/globalSearch/useAdvancedFilters.ts
+function r() {
+	let [r, i] = n("PARTIAL"), [a, o] = n("SCORE_DESC"), [s, c] = n(""), [l, u] = n(""), [d, f] = n(""), [p, m] = n(""), [h, g] = n(""), [_, v] = n(""), [y, b] = n(""), [x, S] = n(""), [C, w] = n(""), [T, E] = n(""), [D, O] = n(""), [k, A] = n(""), [j, M] = n(""), [N, P] = n("EQUALS");
+	return {
+		searchMode: r,
+		setSearchMode: i,
+		sortBy: a,
+		setSortBy: o,
+		productSourcesInput: s,
+		setProductSourcesInput: c,
+		projectId: l,
+		setProjectId: u,
+		createdBy: d,
+		setCreatedBy: f,
+		updatedBy: p,
+		setUpdatedBy: m,
+		dateFrom: h,
+		setDateFrom: g,
+		dateTo: _,
+		setDateTo: v,
+		updatedDateFrom: y,
+		setUpdatedDateFrom: b,
+		updatedDateTo: x,
+		setUpdatedDateTo: S,
+		tagKeysInput: C,
+		setTagKeysInput: w,
+		tagIdsInput: T,
+		setTagIdsInput: E,
+		tagPathsInput: D,
+		setTagPathsInput: O,
+		metadataKey: k,
+		setMetadataKey: A,
+		metadataValue: j,
+		setMetadataValue: M,
+		metadataOperator: N,
+		setMetadataOperator: P,
+		reset: t(() => {
+			i("PARTIAL"), o("SCORE_DESC"), c(""), u(""), f(""), m(""), g(""), v(""), b(""), S(""), w(""), E(""), O(""), A(""), M(""), P("EQUALS");
+		}, []),
+		buildFilters: t(() => {
+			let t = { searchMode: r };
+			a !== "SCORE_DESC" && (t.sortBy = a);
+			let n = e(s);
+			n.length > 0 && (t.productSources = n), l.trim() && (t.projectId = l.trim()), d.trim() && (t.createdBy = d.trim()), p.trim() && (t.updatedBy = p.trim()), (h || _) && (t.dateRange = {}, h && (t.dateRange.from = new Date(h).toISOString()), _ && (t.dateRange.to = new Date(_).toISOString())), (y || x) && (t.updatedDateRange = {}, y && (t.updatedDateRange.from = new Date(y).toISOString()), x && (t.updatedDateRange.to = new Date(x).toISOString()));
+			let i = e(T), o = e(C), c = e(D);
+			return (i.length > 0 || o.length > 0 || c.length > 0) && (t.tagFilter = {
+				tagIds: i.length > 0 ? i : void 0,
+				tagKeys: o.length > 0 ? o : void 0,
+				hierarchyPaths: c.length > 0 ? c : void 0
+			}), k.trim() && j.trim() && (t.metadataConditions = [{
+				key: k.trim(),
+				value: j.trim(),
+				operator: N
+			}]), t;
+		}, [
+			d,
+			h,
+			_,
+			k,
+			N,
+			j,
+			s,
+			l,
+			r,
+			a,
+			T,
+			C,
+			D,
+			p,
+			y,
+			x
+		])
+	};
+}
+//#endregion
+export { r as useAdvancedFilters };

package/dist/chrome/globalSearch/utils.js

@@ -0,0 +1,22 @@
+//#region src/chrome/globalSearch/utils.ts
+function e(e, t) {
+	let n;
+	return (...r) => {
+		n !== void 0 && clearTimeout(n), n = setTimeout(() => {
+			e(...r);
+		}, t);
+	};
+}
+function t(e) {
+	return e.split(",").map((e) => e.trim()).filter(Boolean);
+}
+function n(e) {
+	if (typeof e != "object" || !e) return !1;
+	let t = e;
+	return typeof t.id == "string" && typeof t.title == "string" && typeof t.category == "string" && typeof t.href == "string" && (t.description === void 0 || typeof t.description == "string");
+}
+function r(e) {
+	return Array.isArray(e) && e.every(n);
+}
+//#endregion
+export { e as debounce, r as isSearchResults, t as splitCsv };

package/dist/chrome/notificationCenter/BellButton.js

@@ -0,0 +1,27 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/chrome/notificationCenter/BellButton.tsx
+var n = ({ unreadCount: n, isOpen: r, onToggle: i }) => /* @__PURE__ */ t("button", {
+	type: "button",
+	onClick: i,
+	className: "relative p-2 hover:bg-action-ghost-bg-hover rounded-button text-text-primary",
+	"aria-label": `Notifications${n > 0 ? ` (${n} unread)` : ""}`,
+	"aria-expanded": r,
+	"aria-haspopup": "true",
+	children: [/* @__PURE__ */ e("svg", {
+		className: "w-icon-md h-icon-md",
+		fill: "none",
+		stroke: "currentColor",
+		viewBox: "0 0 24 24",
+		children: /* @__PURE__ */ e("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"
+		})
+	}), n > 0 && /* @__PURE__ */ e("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: n > 9 ? "9+" : n
+	})]
+});
+//#endregion
+export { n as BellButton };

package/dist/chrome/notificationCenter/NotificationCardItem.js

@@ -0,0 +1,129 @@
+import { PRIORITY_CONFIG as e, TYPE_CONFIG as t, formatRelativeTime as n } from "./constants.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/chrome/notificationCenter/NotificationCardItem.tsx
+var a = ({ notification: a, onMarkAsRead: o, onDelete: s, onRedirect: c }) => {
+	let { id: l, title: u, message: d, type: f, priority: p, appName: m, redirectUrl: h, isRead: g, createdAt: _ } = a, v = e[p] ?? e.MEDIUM, y = t[f] ?? {
+		icon: "🔔",
+		label: f
+	};
+	return /* @__PURE__ */ i("div", {
+		className: `group relative flex gap-3 p-3 rounded-card border transition-all duration-150 cursor-pointer ${g ? "bg-bg-canvas border-border-subtle" : "bg-bg-elevated border-border-default shadow-sm"} hover:bg-action-ghost-bg-hover`,
+		onClick: () => {
+			g || o(l), h && c(h);
+		},
+		role: "button",
+		tabIndex: 0,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), g || o(l), h && c(h));
+		},
+		children: [
+			!g && /* @__PURE__ */ r("div", { className: "absolute top-3 left-1.5 size-2 rounded-full bg-action-primary-bg" }),
+			/* @__PURE__ */ r("div", {
+				className: "flex-shrink-0 mt-0.5 ml-2",
+				children: /* @__PURE__ */ r("span", {
+					className: "text-base",
+					"aria-hidden": "true",
+					children: y.icon
+				})
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "flex-1 min-w-0",
+				children: [
+					/* @__PURE__ */ i("div", {
+						className: "flex items-start justify-between gap-2",
+						children: [/* @__PURE__ */ r("h4", {
+							className: `text-sm truncate ${g ? "font-normal text-text-secondary" : "font-semibold text-text-primary"}`,
+							children: u
+						}), /* @__PURE__ */ i("div", {
+							className: "flex-shrink-0 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity",
+							children: [!g && /* @__PURE__ */ r("button", {
+								type: "button",
+								onClick: (e) => {
+									e.stopPropagation(), o(l);
+								},
+								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__ */ r("svg", {
+									className: "size-3.5",
+									fill: "none",
+									stroke: "currentColor",
+									viewBox: "0 0 24 24",
+									children: /* @__PURE__ */ r("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										strokeWidth: 2,
+										d: "M5 13l4 4L19 7"
+									})
+								})
+							}), /* @__PURE__ */ r("button", {
+								type: "button",
+								onClick: (e) => {
+									e.stopPropagation(), s(l);
+								},
+								className: "p-1 rounded hover:bg-bg-muted text-text-tertiary hover:text-status-error-text",
+								title: "Dismiss",
+								"aria-label": "Dismiss notification",
+								children: /* @__PURE__ */ r("svg", {
+									className: "size-3.5",
+									fill: "none",
+									stroke: "currentColor",
+									viewBox: "0 0 24 24",
+									children: /* @__PURE__ */ r("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										strokeWidth: 2,
+										d: "M6 18L18 6M6 6l12 12"
+									})
+								})
+							})]
+						})]
+					}),
+					/* @__PURE__ */ r("p", {
+						className: "text-xs text-text-secondary line-clamp-2 mt-0.5",
+						children: d
+					}),
+					/* @__PURE__ */ i("div", {
+						className: "flex items-center gap-2 mt-1.5 flex-wrap",
+						children: [
+							/* @__PURE__ */ r("span", {
+								className: `inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium rounded ${v.bgColor} ${v.color}`,
+								children: v.label
+							}),
+							m && /* @__PURE__ */ r("span", {
+								className: "inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium rounded bg-bg-muted text-text-tertiary",
+								children: m
+							}),
+							/* @__PURE__ */ r("span", {
+								className: "text-[10px] text-text-tertiary",
+								children: n(_)
+							}),
+							h && /* @__PURE__ */ i("button", {
+								type: "button",
+								onClick: (e) => {
+									e.stopPropagation(), c(h);
+								},
+								className: "inline-flex items-center gap-0.5 text-[10px] text-action-primary-bg hover:underline",
+								"aria-label": "Open link",
+								children: ["Open", /* @__PURE__ */ r("svg", {
+									className: "size-2.5",
+									fill: "none",
+									stroke: "currentColor",
+									viewBox: "0 0 24 24",
+									children: /* @__PURE__ */ r("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"
+									})
+								})]
+							})
+						]
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { a as NotificationCardItem };

package/dist/chrome/notificationCenter/NotificationFilters.js

@@ -0,0 +1,67 @@
+import { FILTER_TABS as e, TYPE_CONFIG as t, TYPE_FILTERS as n } from "./constants.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/chrome/notificationCenter/NotificationFilters.tsx
+var a = ({ filterTab: a, typeFilter: o, appFilter: s, sortBy: c, appNames: l, onFilterTabChange: u, onTypeFilterChange: d, onAppFilterChange: f, onSortByChange: p }) => /* @__PURE__ */ i("div", {
+	className: "px-4 pt-3 pb-2 space-y-2 border-b border-border-subtle",
+	children: [
+		/* @__PURE__ */ r("div", {
+			className: "flex gap-1",
+			children: e.map((e) => /* @__PURE__ */ r("button", {
+				onClick: () => u(e.value),
+				className: `px-3 py-1 text-xs font-medium rounded-full transition-colors ${a === 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__ */ i("div", {
+			className: "flex flex-wrap items-center gap-1",
+			children: [n.map((e) => /* @__PURE__ */ i("button", {
+				onClick: () => d(e.value),
+				className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${o === 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" && t[e.value] && /* @__PURE__ */ r("span", {
+					className: "mr-0.5",
+					children: t[e.value].icon
+				}), e.label]
+			}, e.value)), /* @__PURE__ */ i("select", {
+				value: c,
+				onChange: (e) => p(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__ */ r("option", {
+						value: "newest",
+						children: "Newest"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "oldest",
+						children: "Oldest"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "priority",
+						children: "Priority"
+					})
+				]
+			})]
+		}),
+		l.length > 1 && /* @__PURE__ */ i("div", {
+			className: "flex flex-wrap gap-1",
+			children: [/* @__PURE__ */ r("button", {
+				onClick: () => f("ALL"),
+				className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${s === "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"
+			}), l.map(([e, t]) => /* @__PURE__ */ i("button", {
+				onClick: () => f(e),
+				className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${s === 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__ */ i("span", {
+					className: "ml-1 text-text-tertiary",
+					children: [
+						"(",
+						t,
+						")"
+					]
+				})]
+			}, e))]
+		})
+	]
+});
+//#endregion
+export { a as NotificationFilters };

package/dist/chrome/notificationCenter/NotificationFooter.js

@@ -0,0 +1,23 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/chrome/notificationCenter/NotificationFooter.tsx
+var n = ({ totalCount: n, onViewAll: r }) => /* @__PURE__ */ e("div", {
+	className: "p-3 border-t border-border-subtle",
+	children: /* @__PURE__ */ t("div", {
+		className: "flex items-center justify-between",
+		children: [/* @__PURE__ */ t("span", {
+			className: "text-[11px] text-text-tertiary",
+			children: [
+				n,
+				" notification",
+				n === 1 ? "" : "s"
+			]
+		}), r && /* @__PURE__ */ e("button", {
+			type: "button",
+			onClick: r,
+			className: "text-xs text-action-primary-bg hover:underline font-medium",
+			children: "View All"
+		})]
+	})
+});
+//#endregion
+export { n as NotificationFooter };

package/dist/chrome/notificationCenter/NotificationHeader.js

@@ -0,0 +1,75 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/chrome/notificationCenter/NotificationHeader.tsx
+var n = ({ isMobile: n, unreadCount: r, onClose: i, onMarkAllAsRead: a }) => /* @__PURE__ */ t("div", {
+	className: "flex items-center justify-between p-4 border-b border-border-subtle",
+	children: [/* @__PURE__ */ t("div", {
+		className: "flex items-center gap-2",
+		children: [
+			n && /* @__PURE__ */ e("button", {
+				type: "button",
+				onClick: i,
+				className: "p-1 rounded-button hover:bg-action-ghost-bg-hover text-text-primary",
+				"aria-label": "Close",
+				children: /* @__PURE__ */ e("svg", {
+					className: "size-5",
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ e("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M15 19l-7-7 7-7"
+					})
+				})
+			}),
+			/* @__PURE__ */ e("svg", {
+				className: "size-5 text-text-primary",
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				children: /* @__PURE__ */ e("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__ */ e("h2", {
+				className: "text-sm font-semibold text-text-primary",
+				children: "Notifications"
+			}),
+			r > 0 && /* @__PURE__ */ e("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: r > 9 ? "9+" : r
+			})
+		]
+	}), /* @__PURE__ */ t("div", {
+		className: "flex items-center gap-2",
+		children: [r > 0 && /* @__PURE__ */ e("button", {
+			type: "button",
+			onClick: a,
+			className: "text-xs text-action-primary-bg hover:underline font-medium",
+			children: "Mark all read"
+		}), !n && /* @__PURE__ */ e("button", {
+			type: "button",
+			onClick: i,
+			className: "p-1 rounded-button hover:bg-action-ghost-bg-hover text-text-tertiary",
+			"aria-label": "Close panel",
+			children: /* @__PURE__ */ e("svg", {
+				className: "size-4",
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				children: /* @__PURE__ */ e("path", {
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2,
+					d: "M6 18L18 6M6 6l12 12"
+				})
+			})
+		})]
+	})]
+});
+//#endregion
+export { n as NotificationHeader };

package/dist/chrome/notificationCenter/NotificationList.js

@@ -0,0 +1,75 @@
+import { NotificationCardItem as e } from "./NotificationCardItem.js";
+import { SkeletonCard as t } from "./SkeletonCard.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/chrome/notificationCenter/NotificationList.tsx
+var i = ({ loading: i, error: a, notifications: o, filterTab: s, typeFilter: c, appFilter: l, onRetry: u, onMarkAsRead: d, onDelete: f, onRedirect: p }) => /* @__PURE__ */ n("div", {
+	className: "flex-1 overflow-y-auto",
+	children: i ? /* @__PURE__ */ r("div", {
+		className: "p-3 space-y-2",
+		children: [
+			/* @__PURE__ */ n(t, {}),
+			/* @__PURE__ */ n(t, {}),
+			/* @__PURE__ */ n(t, {})
+		]
+	}) : a ? /* @__PURE__ */ r("div", {
+		className: "flex flex-col items-center justify-center p-8 text-center",
+		children: [
+			/* @__PURE__ */ n("svg", {
+				className: "size-10 text-status-error-text mb-3",
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				children: /* @__PURE__ */ n("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__ */ n("p", {
+				className: "text-sm text-text-secondary mb-2",
+				children: "Failed to load notifications"
+			}),
+			/* @__PURE__ */ n("button", {
+				type: "button",
+				onClick: u,
+				className: "text-xs text-action-primary-bg hover:underline font-medium",
+				children: "Try again"
+			})
+		]
+	}) : o.length === 0 ? /* @__PURE__ */ r("div", {
+		className: "flex flex-col items-center justify-center p-8 text-center",
+		children: [
+			/* @__PURE__ */ n("svg", {
+				className: "size-12 text-text-tertiary mb-3",
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				children: /* @__PURE__ */ n("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__ */ n("p", {
+				className: "text-sm font-medium text-text-primary",
+				children: "You're all caught up!"
+			}),
+			/* @__PURE__ */ n("p", {
+				className: "text-xs text-text-tertiary mt-1",
+				children: s !== "all" || c !== "ALL" || l !== "ALL" ? "No notifications match your filters" : "No notifications yet"
+			})
+		]
+	}) : /* @__PURE__ */ n("div", {
+		className: "p-2 space-y-1.5",
+		children: o.map((t) => /* @__PURE__ */ n(e, {
+			notification: t,
+			onMarkAsRead: d,
+			onDelete: f,
+			onRedirect: p
+		}, t.id))
+	})
+});
+//#endregion
+export { i as NotificationList };

package/dist/chrome/notificationCenter/NotificationPanel.js

@@ -0,0 +1,19 @@
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/chrome/notificationCenter/NotificationPanel.tsx
+var r = ({ isMobile: r, onClose: i, children: a }) => r ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("div", {
+	className: "fixed inset-0 bg-black/50 z-[60]",
+	onClick: i,
+	"aria-hidden": "true"
+}), /* @__PURE__ */ t("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: a
+})] }) : /* @__PURE__ */ t("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: a
+});
+//#endregion
+export { r as NotificationPanel };

package/dist/chrome/notificationCenter/SkeletonCard.js

@@ -0,0 +1,18 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/chrome/notificationCenter/SkeletonCard.tsx
+var n = () => /* @__PURE__ */ t("div", {
+	className: "flex gap-3 p-3 rounded-card border border-border-subtle animate-pulse",
+	children: [/* @__PURE__ */ e("div", { className: "size-6 rounded bg-bg-muted flex-shrink-0" }), /* @__PURE__ */ t("div", {
+		className: "flex-1 space-y-2",
+		children: [
+			/* @__PURE__ */ e("div", { className: "h-4 bg-bg-muted rounded w-3/4" }),
+			/* @__PURE__ */ e("div", { className: "h-3 bg-bg-muted rounded w-full" }),
+			/* @__PURE__ */ t("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ e("div", { className: "h-3 bg-bg-muted rounded w-12" }), /* @__PURE__ */ e("div", { className: "h-3 bg-bg-muted rounded w-16" })]
+			})
+		]
+	})]
+});
+//#endregion
+export { n as SkeletonCard };