@overvis/hmi-workspace-ui 0.0.0-stage → 0.1.0

package/dist/page-v6LCwswN.js

@@ -0,0 +1,304 @@
+import { r as e } from "./trpc-CvJUuUXp.js";
+import { f as t, h as n, m as r } from "./i18n-BgzakKoC.js";
+import { A as i, M as a, j as o, l as s } from "./spinner-C-HPNxOc.js";
+import { t as c } from "./button-6SxPBYMz.js";
+import { n as l } from "./skeleton-6yk8Tdh5.js";
+import { i as u } from "./context-u9KJQmdB.js";
+import { n as d } from "./api-error-9rQmUN5L.js";
+import { i as f, n as p, r as m, t as h } from "./alarm-list-BL3xQ5Lf.js";
+import { a as g, i as _, o as v, r as y } from "./provider-BOeYHi0n.js";
+import { n as b } from "./date-time-picker-C3FhMXk6.js";
+import { t as x } from "./page-header-RB2YFWlE.js";
+import { i as S, n as C, r as w, t as T } from "./tabs-CSIucYFP.js";
+import { r as E, t as D } from "./query-gate-DVhNIkge.js";
+import { i as O, n as k, t as A } from "./search-D4rDnE9T.js";
+import { jsx as j, jsxs as M } from "react/jsx-runtime";
+import { SirenIcon as N, XIcon as P } from "lucide-react";
+import { formatAppDateTime as F, parseExactAppDateTime as I } from "@overvis/hmi-shared";
+import { alarmEventKinds as L, automationSeverities as R } from "@overvis/hmi-shared/automation";
+//#region src/workspace/alarms/history.tsx
+function z(e) {
+	return t(e === "raised" ? "alarm_event_raised" : e === "cleared" ? "alarm_event_cleared" : e === "acknowledged" ? "alarm_event_acknowledged" : e === "shelved" ? "alarm_event_shelved" : e === "unshelved" ? "alarm_event_unshelved" : "alarm_event_removed");
+}
+function B(e) {
+	return t(e === "urgent" ? "automation_severity_urgent" : e === "warning" ? "automation_severity_warning" : "automation_severity_info");
+}
+function V(e) {
+	if (e.kind === "acknowledged" || e.kind === "shelved" || e.kind === "unshelved") {
+		let n = [
+			e.actorName,
+			e.kind === "shelved" && e.shelvedUntil != null ? t("alarm_event_shelved_until", { time: F(e.shelvedUntil) }) : null,
+			e.note
+		].filter((e) => e != null && e.length > 0);
+		return n.length === 0 ? null : n.join(" · ");
+	}
+	return e.kind === "removed" ? t("alarm_event_removed_detail") : null;
+}
+function H({ event: e, sourceName: t, timeZone: i, onShowAlarm: a }) {
+	let o = r(), c = n(), { title: l } = m(e, _(e.message, c, i)), u = V(e);
+	return /* @__PURE__ */ M("li", {
+		className: "\n        flex flex-col gap-1 border-b py-2.5 text-sm\n        last:border-b-0\n        @2xl:grid @2xl:grid-cols-[11rem_7rem_1fr] @2xl:gap-x-3\n      ",
+		children: [
+			/* @__PURE__ */ j("time", {
+				dateTime: e.occurredAt,
+				className: "\n          text-xs text-muted-foreground tabular-nums\n          @2xl:pt-0.5 @2xl:text-sm\n        ",
+				children: F(e.occurredAt)
+			}),
+			/* @__PURE__ */ j("div", {
+				className: "\n          hidden items-start\n          @2xl:flex\n        ",
+				children: /* @__PURE__ */ j(s, {
+					variant: "secondary",
+					children: z(e.kind)
+				})
+			}),
+			/* @__PURE__ */ M("div", {
+				className: "flex min-w-0 flex-col gap-0.5",
+				children: [
+					/* @__PURE__ */ M("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [
+							/* @__PURE__ */ j(s, {
+								variant: "secondary",
+								className: "@2xl:hidden",
+								children: z(e.kind)
+							}),
+							/* @__PURE__ */ j(p, { severity: e.severity }),
+							/* @__PURE__ */ j("button", {
+								type: "button",
+								className: "\n              min-w-0 text-left font-medium wrap-break-word underline-offset-4\n              hover:underline\n              focus-visible:underline focus-visible:outline-none\n            ",
+								title: o("alarm_history_of_alarm"),
+								onClick: () => {
+									a(e.alarmId);
+								},
+								children: l
+							})
+						]
+					}),
+					u == null ? null : /* @__PURE__ */ j("p", {
+						className: "text-xs wrap-break-word text-muted-foreground",
+						children: u
+					}),
+					t == null ? null : /* @__PURE__ */ j("p", {
+						className: "text-xs text-muted-foreground",
+						children: t
+					})
+				]
+			})
+		]
+	});
+}
+function U({ workspaceId: t, filters: n, onFiltersChange: s }) {
+	let p = r(), m = u()?.timezone ?? "UTC", h = f(t, !0), _ = I(n.from ?? "")?.toISOString(), v = I(n.to ?? "")?.toISOString(), y = e.alarm.log.useInfiniteQuery({
+		workspaceId: t,
+		...n.severity == null ? {} : { severities: [n.severity] },
+		...n.kind == null ? {} : { kinds: [n.kind] },
+		...n.source == null ? {} : { sourceIds: [n.source] },
+		...n.alarm == null ? {} : { alarmId: n.alarm },
+		..._ == null ? {} : { from: _ },
+		...v == null ? {} : { to: v },
+		limit: 50
+	}, { getNextPageParam: (e) => e.nextCursor ?? void 0 }), x = Object.values(n).some((e) => e != null && e !== ""), S = (e) => {
+		s(A(k({
+			...n,
+			...e
+		})));
+	};
+	return /* @__PURE__ */ M("div", {
+		className: "flex flex-col gap-3",
+		children: [
+			/* @__PURE__ */ M("div", {
+				role: "group",
+				"aria-label": p("alarm_history_filters"),
+				className: "\n          grid grid-cols-2 items-start gap-2\n          @2xl:grid-cols-6\n          @4xl:grid-cols-12\n        ",
+				children: [
+					/* @__PURE__ */ M(i, {
+						className: "\n            w-full\n            @2xl:col-span-2\n          ",
+						"aria-label": p("alarm_history_severity"),
+						value: n.severity ?? "",
+						onChange: (e) => {
+							S({ severity: e.target.value });
+						},
+						children: [/* @__PURE__ */ j(a, {
+							value: "",
+							children: p("alarm_history_all_severities")
+						}), R.map((e) => /* @__PURE__ */ j(a, {
+							value: e,
+							children: B(e)
+						}, e))]
+					}),
+					/* @__PURE__ */ M(i, {
+						className: "\n            w-full\n            @2xl:col-span-2\n          ",
+						"aria-label": p("alarm_history_kind"),
+						value: n.kind ?? "",
+						onChange: (e) => {
+							S({ kind: e.target.value });
+						},
+						children: [/* @__PURE__ */ j(a, {
+							value: "",
+							children: p("alarm_history_all_kinds")
+						}), L.map((e) => /* @__PURE__ */ j(a, {
+							value: e,
+							children: z(e)
+						}, e))]
+					}),
+					/* @__PURE__ */ M(i, {
+						className: "\n            col-span-2 w-full\n            @4xl:col-span-2\n          ",
+						"aria-label": p("alarm_history_source"),
+						value: n.source ?? "",
+						onChange: (e) => {
+							S({ source: e.target.value });
+						},
+						children: [
+							/* @__PURE__ */ j(a, {
+								value: "",
+								children: p("alarm_history_all_sources")
+							}),
+							h.rules.length > 0 ? /* @__PURE__ */ j(o, {
+								label: p("alarm_history_alarm_rules"),
+								children: h.rules.map((e) => /* @__PURE__ */ j(a, {
+									value: e.id,
+									children: h.names.get(e.id)
+								}, e.id))
+							}) : null,
+							h.automations.length > 0 ? /* @__PURE__ */ j(o, {
+								label: p("alarm_history_automations"),
+								children: h.automations.map((e) => /* @__PURE__ */ j(a, {
+									value: e.id,
+									children: h.names.get(e.id)
+								}, e.id))
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ j("div", {
+						role: "group",
+						"aria-label": p("alarm_history_period"),
+						className: "\n            col-span-2\n            @2xl:col-span-6\n            @4xl:col-span-6\n          ",
+						children: /* @__PURE__ */ j(b, {
+							optional: !0,
+							value: {
+								from: n.from ?? "",
+								to: n.to ?? ""
+							},
+							onValueChange: (e) => {
+								S({
+									from: e.from,
+									to: e.to
+								});
+							}
+						})
+					}),
+					n.alarm == null ? null : /* @__PURE__ */ M(c, {
+						variant: "outline",
+						size: "sm",
+						className: "col-span-2 justify-self-start",
+						onClick: () => {
+							S({ alarm: void 0 });
+						},
+						children: [/* @__PURE__ */ j(P, { "data-icon": "inline-start" }), p("alarm_history_one_alarm")]
+					}),
+					x ? /* @__PURE__ */ M(c, {
+						variant: "ghost",
+						size: "sm",
+						className: "col-span-2 justify-self-start",
+						onClick: () => {
+							s({});
+						},
+						children: [/* @__PURE__ */ j(P, { "data-icon": "inline-start" }), p("alarm_history_clear_filters")]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ j("p", {
+				className: "text-xs text-muted-foreground",
+				children: p("alarm_history_delay")
+			}),
+			/* @__PURE__ */ j(E, {
+				query: y,
+				loading: /* @__PURE__ */ j(l, { className: "h-52 w-full" }),
+				error: (e) => /* @__PURE__ */ j(D, { message: d(e) }),
+				isEmpty: (e) => e.pages.every((e) => e.events.length === 0),
+				empty: /* @__PURE__ */ j("p", {
+					className: "rounded-lg border py-10 text-center text-sm text-muted-foreground",
+					children: p("alarm_history_empty")
+				}),
+				children: (e) => /* @__PURE__ */ j("ul", {
+					"aria-label": p("alarm_history_title"),
+					className: "rounded-lg border px-3",
+					children: e.pages.flatMap((e) => e.events.map((e) => /* @__PURE__ */ j(H, {
+						event: e,
+						sourceName: h.names.get(g(e.source)) ?? null,
+						timeZone: m,
+						onShowAlarm: (e) => {
+							S({ alarm: e });
+						}
+					}, e.id)))
+				})
+			}),
+			y.hasNextPage ? /* @__PURE__ */ j(c, {
+				variant: "outline",
+				size: "sm",
+				className: "self-center",
+				disabled: y.isFetchingNextPage,
+				onClick: () => {
+					y.fetchNextPage();
+				},
+				children: p("alarm_history_more")
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/workspace/alarms/page.tsx
+function W({ workspaceId: e, search: t, onSearchChange: n }) {
+	let i = r(), { alarms: a, now: o } = y(e), s = a == null ? 0 : v(a, o), c = t.tab ?? "active";
+	return /* @__PURE__ */ M("div", {
+		className: "\n        @container mx-auto flex w-full max-w-5xl flex-1 flex-col gap-4 p-4\n        md:p-6\n      ",
+		children: [
+			/* @__PURE__ */ j(x, {
+				icon: /* @__PURE__ */ j(N, {}),
+				title: i("alarm_page_title"),
+				description: i("alarm_page_description"),
+				className: "p-0"
+			}),
+			/* @__PURE__ */ j(O, {}),
+			/* @__PURE__ */ M(T, {
+				value: c,
+				onValueChange: (e) => {
+					n(e === "history" ? {
+						...A(t),
+						tab: "history"
+					} : {});
+				},
+				children: [
+					/* @__PURE__ */ M(w, { children: [/* @__PURE__ */ j(S, {
+						value: "active",
+						children: s > 0 ? i("alarm_tab_active_count", { count: String(s) }) : i("alarm_tab_active")
+					}), /* @__PURE__ */ j(S, {
+						value: "history",
+						children: i("alarm_tab_history")
+					})] }),
+					/* @__PURE__ */ j(C, {
+						value: "active",
+						className: "pt-2",
+						children: /* @__PURE__ */ j(h, { workspaceId: e })
+					}),
+					/* @__PURE__ */ j(C, {
+						value: "history",
+						className: "pt-2",
+						children: c === "history" ? /* @__PURE__ */ j(U, {
+							workspaceId: e,
+							filters: A(t),
+							onFiltersChange: (e) => {
+								n({
+									...e,
+									tab: "history"
+								});
+							}
+						}) : null
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { W as AlarmsPage };

package/dist/panel-DDy8tUNR.js

@@ -0,0 +1,338 @@
+import { a as e, l as t, m as n, o as r } from "./i18n-BgzakKoC.js";
+import { t as i } from "./utils-CX-Pz5p6.js";
+import { l as a, t as o } from "./spinner-C-HPNxOc.js";
+import { t as s } from "./button-6SxPBYMz.js";
+import { b as c, d as l, h as u, y as d } from "./dialog-BIhQXcZC.js";
+import { a as f, i as p, o as m, r as h, t as g } from "./empty-B-QJ-06w.js";
+import { n as _ } from "./theme-provider-BkRohQFU.js";
+import { i as v, n as y, r as b, t as x } from "./tabs-CSIucYFP.js";
+import { useEffect as S, useRef as C, useState as w } from "react";
+import { Toaster as T } from "sonner";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { BellIcon as k, CircleCheckIcon as A, InfoIcon as j, OctagonXIcon as M, TriangleAlertIcon as N, XIcon as P } from "lucide-react";
+import { formatAppDateTime as F } from "@overvis/hmi-shared";
+import { Dialog as I } from "@base-ui/react/dialog";
+//#region src/ui/sheet.tsx
+function L(e) {
+	return /* @__PURE__ */ D(I.Root, {
+		"data-slot": "sheet",
+		...l(e)
+	});
+}
+function R({ ...e }) {
+	return /* @__PURE__ */ D(I.Trigger, {
+		"data-slot": "sheet-trigger",
+		...e
+	});
+}
+function z({ ...e }) {
+	return /* @__PURE__ */ D(I.Close, {
+		"data-slot": "sheet-close",
+		...e
+	});
+}
+function B({ ...e }) {
+	let t = c(), n = t?.container;
+	return t != null && n == null ? null : /* @__PURE__ */ D(I.Portal, {
+		"data-slot": "sheet-portal",
+		...e,
+		container: n ?? void 0
+	});
+}
+function V({ className: e, ...t }) {
+	d();
+	let n = c();
+	return /* @__PURE__ */ D(I.Backdrop, {
+		"data-slot": "sheet-overlay",
+		forceRender: !0,
+		className: i("\n          inset-0 z-50 bg-black/10 transition-opacity duration-150\n          data-ending-style:opacity-0\n          data-starting-style:opacity-0\n          supports-backdrop-filter:backdrop-blur-xs\n        ", n?.container == null ? "fixed" : "absolute", e),
+		...t
+	});
+}
+function H({ className: e, children: t, side: r = "right", showCloseButton: a = !0, onKeyDown: o, ...l }) {
+	let d = n(), f = c();
+	return /* @__PURE__ */ O(B, { children: [/* @__PURE__ */ D(V, {}), /* @__PURE__ */ O(I.Popup, {
+		"data-slot": "sheet-content",
+		"data-side": r,
+		className: i("\n            z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground\n            shadow-lg transition duration-200 ease-in-out\n            data-ending-style:opacity-0\n            data-starting-style:opacity-0\n            data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto\n            data-[side=bottom]:border-t\n            data-[side=bottom]:data-ending-style:translate-y-10\n            data-[side=bottom]:data-starting-style:translate-y-10\n            data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full\n            data-[side=left]:w-3/4 data-[side=left]:border-r\n            data-[side=left]:data-ending-style:-translate-x-10\n            data-[side=left]:data-starting-style:-translate-x-10\n            data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full\n            data-[side=right]:w-3/4 data-[side=right]:border-l\n            data-[side=right]:data-ending-style:translate-x-10\n            data-[side=right]:data-starting-style:translate-x-10\n            data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto\n            data-[side=top]:border-b\n            data-[side=top]:data-ending-style:-translate-y-10\n            data-[side=top]:data-starting-style:-translate-y-10\n            data-[side=left]:sm:max-w-sm\n            data-[side=right]:sm:max-w-sm\n          ", f?.container == null ? "fixed" : "absolute", e),
+		...l,
+		onKeyDown: (e) => {
+			u(e, e.currentTarget), o?.(e);
+		},
+		children: [t, a ? /* @__PURE__ */ O(I.Close, {
+			"data-slot": "sheet-close",
+			render: /* @__PURE__ */ D(s, {
+				variant: "ghost",
+				className: "absolute top-3 right-3",
+				size: "icon-sm"
+			}),
+			children: [/* @__PURE__ */ D(P, {}), /* @__PURE__ */ D("span", {
+				className: "sr-only",
+				children: d("action_close")
+			})]
+		}) : null]
+	})] });
+}
+function U({ className: e, ...t }) {
+	return /* @__PURE__ */ D("div", {
+		"data-slot": "sheet-header",
+		className: i("flex flex-col gap-0.5 p-4", e),
+		...t
+	});
+}
+function W({ className: e, ...t }) {
+	return /* @__PURE__ */ D("div", {
+		"data-slot": "sheet-footer",
+		className: i("mt-auto flex flex-col gap-2 p-4", e),
+		...t
+	});
+}
+function G({ className: e, ...t }) {
+	return /* @__PURE__ */ D(I.Title, {
+		"data-slot": "sheet-title",
+		className: i("font-heading text-base font-medium text-foreground", e),
+		...t
+	});
+}
+function K({ className: e, ...t }) {
+	return /* @__PURE__ */ D(I.Description, {
+		"data-slot": "sheet-description",
+		className: i("text-sm text-muted-foreground", e),
+		...t
+	});
+}
+//#endregion
+//#region src/ui/sonner.tsx
+var q = ({ ...e }) => {
+	let { resolvedTheme: t } = _(), r = n();
+	return /* @__PURE__ */ D(T, {
+		theme: t,
+		className: "toaster group font-sans",
+		gap: 10,
+		icons: {
+			success: /* @__PURE__ */ D(A, { className: "size-4" }),
+			info: /* @__PURE__ */ D(j, { className: "size-4" }),
+			warning: /* @__PURE__ */ D(N, { className: "size-4" }),
+			error: /* @__PURE__ */ D(M, { className: "size-4" }),
+			loading: /* @__PURE__ */ D(o, { className: "size-4" }),
+			close: /* @__PURE__ */ D(P, { className: "size-3.5" })
+		},
+		toastOptions: {
+			unstyled: !0,
+			closeButton: !0,
+			closeButtonAriaLabel: r("messages_toast_close"),
+			classNames: {
+				toast: "\n            group/toast flex w-(--width) items-start gap-3 rounded-lg border bg-popover py-3 pr-10\n            pl-3 text-sm text-popover-foreground shadow-lg shadow-black/5 outline-none\n            focus-visible:ring-3 focus-visible:ring-ring/50\n            data-[expanded=false]:data-[front=false]:*:opacity-0\n            dark:shadow-black/30\n          ",
+				success: "\n            [--toast-accent:var(--color-emerald-600)]\n            dark:[--toast-accent:var(--color-emerald-400)]\n          ",
+				info: "\n            [--toast-accent:var(--color-sky-600)]\n            dark:[--toast-accent:var(--color-sky-400)]\n          ",
+				warning: "\n            [--toast-accent:var(--color-amber-600)]\n            dark:[--toast-accent:var(--color-amber-400)]\n          ",
+				error: "[--toast-accent:var(--destructive)]",
+				loading: "[--toast-accent:var(--muted-foreground)]",
+				icon: "\n            flex size-7 shrink-0 items-center justify-center rounded-md bg-(--toast-accent)/12\n            text-(--toast-accent)\n            empty:hidden\n          ",
+				content: "flex min-w-0 flex-1 flex-col gap-0.5 self-center",
+				title: "leading-5 font-medium wrap-anywhere",
+				description: "text-[13px]/5 wrap-anywhere text-muted-foreground",
+				actionButton: "\n            inline-flex h-7 shrink-0 cursor-pointer items-center self-center rounded-md border\n            bg-background px-2.5 text-xs font-medium shadow-xs transition-colors outline-none\n            hover:bg-accent hover:text-accent-foreground\n            focus-visible:ring-3 focus-visible:ring-ring/50\n          ",
+				cancelButton: "\n            inline-flex h-7 shrink-0 cursor-pointer items-center self-center rounded-md px-2.5\n            text-xs font-medium text-muted-foreground transition-colors outline-none\n            hover:bg-accent hover:text-accent-foreground\n            focus-visible:ring-3 focus-visible:ring-ring/50\n          ",
+				closeButton: "\n            absolute top-2 right-2 flex size-6 cursor-pointer items-center justify-center rounded-md\n            border-0 bg-transparent! text-muted-foreground! opacity-0 transition-opacity outline-none\n            group-hover/toast:opacity-100\n            hover:bg-accent! hover:text-accent-foreground!\n            focus-visible:opacity-100 focus-visible:ring-3 focus-visible:ring-ring/50\n            pointer-coarse:opacity-100\n          "
+			}
+		},
+		...e
+	});
+}, J = {
+	success: A,
+	info: j,
+	warning: N,
+	error: M
+}, Y = {
+	success: "messages_kind_success",
+	info: "messages_kind_info",
+	warning: "messages_kind_warning",
+	error: "messages_kind_error"
+};
+function X({ message: e, active: a }) {
+	let o = n(), s = r(), c = C(null);
+	S(() => {
+		if (!a || e.seen || !c.current) return;
+		let t = !1, n = () => {
+			t && document.visibilityState === "visible" && document.hasFocus() && s.markSeen([e.id]);
+		}, r = new IntersectionObserver((e) => {
+			t = e.some((e) => e.isIntersecting && e.intersectionRatio > 0), n();
+		});
+		return r.observe(c.current), document.addEventListener("visibilitychange", n), window.addEventListener("focus", n), () => {
+			r.disconnect(), document.removeEventListener("visibilitychange", n), window.removeEventListener("focus", n);
+		};
+	}, [
+		a,
+		e.id,
+		e.seen,
+		s
+	]);
+	let l = J[e.kind], u = t(e.scope.href);
+	return /* @__PURE__ */ O("li", {
+		ref: c,
+		className: i("flex gap-3 px-5 py-3", e.kind === "error" && "bg-destructive/5"),
+		children: [
+			/* @__PURE__ */ D(l, {
+				"aria-hidden": "true",
+				className: i("mt-0.5 size-4 shrink-0", {
+					"text-destructive": e.kind === "error",
+					"text-amber-600 dark:text-amber-400": e.kind === "warning",
+					"text-green-600 dark:text-green-400": e.kind === "success",
+					"text-muted-foreground": e.kind === "info"
+				})
+			}),
+			/* @__PURE__ */ O("div", {
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ D("span", {
+						className: "sr-only",
+						children: o(Y[e.kind])
+					}),
+					/* @__PURE__ */ D("p", {
+						className: "wrap-anywhere whitespace-pre-wrap",
+						children: e.text
+					}),
+					/* @__PURE__ */ O("div", {
+						className: "\n            mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground\n            *:not-first:before:mr-2 *:not-first:before:inline-block *:not-first:before:font-normal\n            *:not-first:before:text-muted-foreground *:not-first:before:content-['·'/'']\n          ",
+						children: [
+							/* @__PURE__ */ D("time", {
+								dateTime: new Date(e.time).toISOString(),
+								children: F(e.time)
+							}),
+							e.scope.workspaceId ? /* @__PURE__ */ D("span", {
+								className: "min-w-0 wrap-anywhere",
+								children: e.scope.workspaceName ?? e.scope.workspaceId
+							}) : null,
+							u ? /* @__PURE__ */ D("a", {
+								href: u,
+								className: "\n                font-medium text-primary underline-offset-4\n                hover:underline\n              ",
+								children: o("messages_open")
+							}) : null
+						]
+					})
+				]
+			}),
+			e.seen ? null : /* @__PURE__ */ D("span", {
+				role: "img",
+				"aria-label": o("messages_unseen"),
+				className: "mt-1.5 size-2 shrink-0 rounded-full bg-primary"
+			})
+		]
+	});
+}
+function Z({ notifications: t, notificationUnreadCount: i = 0 }) {
+	let o = n(), c = e(), l = r(), [u, d] = w(!1), [_, S] = w("messages"), T = c.some((e) => !e.seen), A = C(null), j = o(t == null ? "messages_tab" : "messages_title"), M = /* @__PURE__ */ D("div", {
+		className: "flex min-h-0 flex-1 flex-col text-sm",
+		children: c.length > 0 ? /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ O("div", {
+			className: "flex shrink-0 flex-wrap justify-end gap-1 border-b px-3 pb-2",
+			children: [/* @__PURE__ */ D(s, {
+				size: "sm",
+				variant: "ghost",
+				disabled: !T,
+				focusableWhenDisabled: !0,
+				className: "\n                text-muted-foreground\n                aria-disabled:opacity-40\n              ",
+				onClick: () => {
+					l.markSeen(c.map((e) => e.id));
+				},
+				children: o("messages_mark_all")
+			}), /* @__PURE__ */ D(s, {
+				size: "sm",
+				variant: "ghost",
+				className: "text-muted-foreground",
+				onClick: () => {
+					A.current?.querySelector("[data-slot=\"sheet-close\"]")?.focus(), l.clear();
+				},
+				children: o("messages_clear")
+			})]
+		}), /* @__PURE__ */ D("ol", {
+			"aria-label": o("messages_tab"),
+			tabIndex: 0,
+			className: "\n              min-h-0 flex-1 divide-y overflow-y-auto overscroll-contain outline-none\n              focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset\n            ",
+			children: c.map((e) => /* @__PURE__ */ D(X, {
+				message: e,
+				active: u && (t == null || _ === "messages")
+			}, e.id))
+		})] }) : /* @__PURE__ */ D(g, {
+			className: "justify-start px-8 py-16",
+			children: /* @__PURE__ */ O(p, { children: [
+				/* @__PURE__ */ D(f, {
+					variant: "icon",
+					children: /* @__PURE__ */ D(k, { "aria-hidden": "true" })
+				}),
+				/* @__PURE__ */ D(m, { children: o("messages_empty") }),
+				/* @__PURE__ */ D(h, { children: o("messages_empty_description") })
+			] })
+		})
+	});
+	return /* @__PURE__ */ O(L, {
+		open: u,
+		onOpenChange: (e) => {
+			e && t != null && i > 0 && S("notifications"), d(e);
+		},
+		children: [/* @__PURE__ */ O(R, {
+			render: /* @__PURE__ */ D(s, {
+				size: "icon",
+				variant: "ghost",
+				className: "relative",
+				"aria-label": [
+					j,
+					...T ? [o("messages_unseen")] : [],
+					...i > 0 ? [o("messages_notification_count", { count: i })] : []
+				].join(". ")
+			}),
+			children: [/* @__PURE__ */ D(k, {}), i > 0 ? /* @__PURE__ */ D(a, {
+				"aria-hidden": "true",
+				className: "\n              absolute -top-0.5 -right-0.5 h-4 min-w-4 justify-center rounded-full px-1 text-[10px]\n              tabular-nums\n            ",
+				children: i > 99 ? "99+" : i
+			}) : T ? /* @__PURE__ */ D("span", {
+				"aria-hidden": "true",
+				className: "absolute top-1 right-1 size-2 rounded-full bg-primary"
+			}) : null]
+		}), /* @__PURE__ */ O(H, {
+			ref: A,
+			className: "\n          gap-0\n          data-[side=right]:w-full\n          data-[side=right]:sm:max-w-md\n        ",
+			children: [
+				/* @__PURE__ */ D(U, {
+					className: "px-5 pt-3.5 pr-12 pb-3",
+					children: /* @__PURE__ */ D(G, { children: j })
+				}),
+				t == null ? M : /* @__PURE__ */ O(x, {
+					value: _,
+					onValueChange: (e) => {
+						S(String(e));
+					},
+					className: "min-h-0 flex-1 gap-0",
+					children: [
+						/* @__PURE__ */ O(b, {
+							className: "mx-5 mb-3 shrink-0",
+							children: [/* @__PURE__ */ D(v, {
+								value: "messages",
+								children: o("messages_tab")
+							}), /* @__PURE__ */ D(v, {
+								value: "notifications",
+								children: o("messages_notifications_tab")
+							})]
+						}),
+						/* @__PURE__ */ D(y, {
+							value: "messages",
+							className: "flex min-h-0 flex-col",
+							children: M
+						}),
+						/* @__PURE__ */ D(y, {
+							value: "notifications",
+							className: "min-h-0 overflow-y-auto overscroll-contain px-5",
+							children: t
+						})
+					]
+				}),
+				t == null || _ === "messages" ? /* @__PURE__ */ D(K, {
+					className: "shrink-0 border-t px-5 py-3 text-xs/relaxed",
+					children: o("messages_description")
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+export { H as a, U as c, z as i, G as l, q as n, K as o, L as r, W as s, Z as t, R as u };