@burdenoff/fe-libs 2026.527.3 → 2026.527.4

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 };

package/dist/chrome/notificationCenter/constants.js

@@ -0,0 +1,93 @@
+//#region src/chrome/notificationCenter/constants.ts
+var e = {
+	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
+	}
+}, t = {
+	SYSTEM: {
+		icon: "⚙️",
+		label: "System"
+	},
+	ALERT: {
+		icon: "⚠️",
+		label: "Alert"
+	},
+	TRANSACTIONAL: {
+		icon: "📋",
+		label: "Transaction"
+	},
+	MARKETING: {
+		icon: "📣",
+		label: "Marketing"
+	}
+}, n = [
+	{
+		value: "all",
+		label: "All"
+	},
+	{
+		value: "unread",
+		label: "Unread"
+	},
+	{
+		value: "read",
+		label: "Read"
+	}
+], r = [
+	{
+		value: "ALL",
+		label: "All"
+	},
+	{
+		value: "SYSTEM",
+		label: "System"
+	},
+	{
+		value: "ALERT",
+		label: "Alert"
+	},
+	{
+		value: "TRANSACTIONAL",
+		label: "Transactional"
+	},
+	{
+		value: "MARKETING",
+		label: "Marketing"
+	}
+];
+function i(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 a(t, n) {
+	let r = [...t];
+	switch (n) {
+		case "newest": return r.sort((e, t) => new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime());
+		case "oldest": return r.sort((e, t) => new Date(e.createdAt).getTime() - new Date(t.createdAt).getTime());
+		case "priority": return r.sort((t, n) => (e[t.priority]?.order ?? 99) - (e[n.priority]?.order ?? 99));
+		default: return r;
+	}
+}
+//#endregion
+export { n as FILTER_TABS, e as PRIORITY_CONFIG, t as TYPE_CONFIG, r as TYPE_FILTERS, i as formatRelativeTime, a as sortNotifications };

package/dist/chrome/notificationCenter/gql.js

@@ -0,0 +1,58 @@
+import { gql as e } from "@apollo/client";
+//#region src/chrome/notificationCenter/gql.ts
+var t = e`
+  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
+    }
+  }
+`, n = e`
+  query GetMyUnreadNotificationCount($filter: NotificationFilterInput) {
+    myUnreadNotificationCount(filter: $filter)
+  }
+`, r = e`
+  subscription MyUnreadNotificationCountStream($filter: NotificationFilterInput) {
+    myUnreadNotificationCountStream(filter: $filter)
+  }
+`, i = e`
+  query MyCountsByApp {
+    myNotificationCountsByApp
+  }
+`, a = e`
+  mutation MarkAsRead($id: ID!) {
+    markNotificationAsRead(id: $id) {
+      id
+      isRead
+      readAt
+      status
+    }
+  }
+`, o = e`
+  mutation MarkAllRead {
+    markAllMyNotificationsAsRead {
+      success
+      count
+    }
+  }
+`, s = e`
+  mutation DeleteNotification($id: ID!) {
+    deleteNotification(id: $id)
+  }
+`;
+//#endregion
+export { i as COUNTS_BY_APP_QUERY, s as DELETE_NOTIFICATION_MUTATION, o as MARK_ALL_READ_MUTATION, a as MARK_READ_MUTATION, r as MY_UNREAD_COUNT_SUBSCRIPTION, t as NOTIFICATIONS_QUERY, n as UNREAD_COUNT_QUERY };