@burdenoff/microfe-conversations 2026.527.2 → 2026.528.1

package/dist/conversations/ConversationsUserRoutes.js

@@ -3,8 +3,8 @@ import { LazyPageBoundary as t } from "./components/LazyPageBoundary.js";
 import { Navigate as n, Route as r, Routes as i } from "react-router-dom";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/conversations/ConversationsUserRoutes.tsx
-var s = e(() => import("./pages/ConversationListPage.js").then((e) => ({ default: e.ConversationListPage }))), c = e(() => import("./pages/ConversationsLandingPage.js").then((e) => ({ default: e.ConversationsLandingPage }))), l = e(() => import("./pages/ConversationDetailPage.js").then((e) => ({ default: e.ConversationDetailPage }))), u = e(() => import("./pages/NewConversationPage.js").then((e) => ({ default: e.NewConversationPage }))), d = e(() => import("./pages/ConversationsSettingsPage.js").then((e) => ({ default: e.ConversationsSettingsPage })));
-function f() {
+var s = e(() => import("./pages/ConversationListPage.js").then((e) => ({ default: e.ConversationListPage }))), c = e(() => import("./pages/ConversationsLandingPage.js").then((e) => ({ default: e.ConversationsLandingPage }))), l = e(() => import("./pages/NewConversationPage.js").then((e) => ({ default: e.NewConversationPage }))), u = e(() => import("./pages/ConversationsSettingsPage.js").then((e) => ({ default: e.ConversationsSettingsPage })));
+function d() {
 	return /* @__PURE__ */ a(t, {
 		source: "user",
 		children: /* @__PURE__ */ o(i, { children: [
@@ -18,15 +18,15 @@ function f() {
 			}),
 			/* @__PURE__ */ a(r, {
 				path: "new",
-				element: /* @__PURE__ */ a(u, {})
+				element: /* @__PURE__ */ a(l, {})
 			}),
 			/* @__PURE__ */ a(r, {
 				path: "settings",
-				element: /* @__PURE__ */ a(d, {})
+				element: /* @__PURE__ */ a(u, {})
 			}),
 			/* @__PURE__ */ a(r, {
 				path: ":conversationId",
-				element: /* @__PURE__ */ a(l, {})
+				element: /* @__PURE__ */ a(c, {})
 			}),
 			/* @__PURE__ */ a(r, {
 				path: "*",
@@ -39,6 +39,6 @@ function f() {
 	});
 }
 //#endregion
-export { f as ConversationsUserRoutes };
+export { d as ConversationsUserRoutes };
 
 //# sourceMappingURL=ConversationsUserRoutes.js.map

package/dist/conversations/ConversationsUserRoutes.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationsUserRoutes.js","names":[],"sources":["../../src/conversations/ConversationsUserRoutes.tsx"],"sourcesContent":["import { Navigate, Route, Routes } from \"react-router-dom\";\n\nimport { LazyPageBoundary } from \"./components/LazyPageBoundary\";\nimport { lazyRetry } from \"./components/lazyRetry\";\nimport type { ConversationListPageProps } from \"./pages/ConversationListPage\";\n\nconst ConversationListPage = lazyRetry<ConversationListPageProps>(() =>\n  import(\"./pages/ConversationListPage\").then((m) => ({\n    default: m.ConversationListPage,\n  })),\n);\nconst ConversationsLandingPage = lazyRetry<Record<string, never>>(() =>\n  import(\"./pages/ConversationsLandingPage\").then((m) => ({\n    default: m.ConversationsLandingPage,\n  })),\n);\n\nconst ConversationDetailPage = lazyRetry<Record<string, never>>(() =>\n  import(\"./pages/ConversationDetailPage\").then((m) => ({\n    default: m.ConversationDetailPage,\n  })),\n);\nconst NewConversationPage = lazyRetry<Record<string, never>>(() =>\n  import(\"./pages/NewConversationPage\").then((m) => ({\n    default: m.NewConversationPage,\n  })),\n);\nconst ConversationsSettingsPage = lazyRetry<Record<string, never>>(() =>\n  import(\"./pages/ConversationsSettingsPage\").then((m) => ({\n    default: m.ConversationsSettingsPage,\n  })),\n);\n\n/**\n * User-facing routes for the Conversations microfrontend.\n *\n * Routes (relative to basePath, e.g., /conversations):\n * - /                   -> Conversation list page (inbox tabs)\n * - /list               -> Conversation list page\n * - /new                -> Create new conversation\n * - /:conversationId    -> Conversation detail (chat view)\n * - /settings           -> Personal notification settings\n */\nexport function ConversationsUserRoutes() {\n  return (\n    <LazyPageBoundary source=\"user\">\n      <Routes>\n        <Route index element={<ConversationsLandingPage />} />\n        <Route path=\"list\" element={<ConversationListPage />} />\n        <Route path=\"new\" element={<NewConversationPage />} />\n        <Route path=\"settings\" element={<ConversationsSettingsPage />} />\n        <Route path=\":conversationId\" element={<ConversationDetailPage />} />\n        <Route path=\"*\" element={<Navigate to=\".\" replace />} />\n      </Routes>\n    </LazyPageBoundary>\n  );\n}\n"],"mappings":";;;;;AAMA,IAAM,IAAuB,QAC3B,OAAO,mCAAgC,MAAM,OAAO,EAClD,SAAS,EAAE,sBACZ,EAAE,CACJ,EACK,IAA2B,QAC/B,OAAO,uCAAoC,MAAM,OAAO,EACtD,SAAS,EAAE,0BACZ,EAAE,CACJ,EAEK,IAAyB,QAC7B,OAAO,qCAAkC,MAAM,OAAO,EACpD,SAAS,EAAE,wBACZ,EAAE,CACJ,EACK,IAAsB,QAC1B,OAAO,kCAA+B,MAAM,OAAO,EACjD,SAAS,EAAE,qBACZ,EAAE,CACJ,EACK,IAA4B,QAChC,OAAO,wCAAqC,MAAM,OAAO,EACvD,SAAS,EAAE,2BACZ,EAAE,CACJ;AAYD,SAAgB,IAA0B;AACxC,QACE,kBAAC,GAAD;EAAkB,QAAO;YACvB,kBAAC,GAAD,EAAA,UAAA;GACE,kBAAC,GAAD;IAAO,OAAA;IAAM,SAAS,kBAAC,GAAD,EAA4B,CAAA;IAAI,CAAA;GACtD,kBAAC,GAAD;IAAO,MAAK;IAAO,SAAS,kBAAC,GAAD,EAAwB,CAAA;IAAI,CAAA;GACxD,kBAAC,GAAD;IAAO,MAAK;IAAM,SAAS,kBAAC,GAAD,EAAuB,CAAA;IAAI,CAAA;GACtD,kBAAC,GAAD;IAAO,MAAK;IAAW,SAAS,kBAAC,GAAD,EAA6B,CAAA;IAAI,CAAA;GACjE,kBAAC,GAAD;IAAO,MAAK;IAAkB,SAAS,kBAAC,GAAD,EAA0B,CAAA;IAAI,CAAA;GACrE,kBAAC,GAAD;IAAO,MAAK;IAAI,SAAS,kBAAC,GAAD;KAAU,IAAG;KAAI,SAAA;KAAU,CAAA;IAAI,CAAA;GACjD,EAAA,CAAA;EACQ,CAAA"}
+{"version":3,"file":"ConversationsUserRoutes.js","names":[],"sources":["../../src/conversations/ConversationsUserRoutes.tsx"],"sourcesContent":["import { Navigate, Route, Routes } from \"react-router-dom\";\n\nimport { LazyPageBoundary } from \"./components/LazyPageBoundary\";\nimport { lazyRetry } from \"./components/lazyRetry\";\nimport type { ConversationListPageProps } from \"./pages/ConversationListPage\";\n\nconst ConversationListPage = lazyRetry<ConversationListPageProps>(() =>\n  import(\"./pages/ConversationListPage\").then((m) => ({\n    default: m.ConversationListPage,\n  })),\n);\nconst ConversationsLandingPage = lazyRetry<Record<string, never>>(() =>\n  import(\"./pages/ConversationsLandingPage\").then((m) => ({\n    default: m.ConversationsLandingPage,\n  })),\n);\n\nconst NewConversationPage = lazyRetry<Record<string, never>>(() =>\n  import(\"./pages/NewConversationPage\").then((m) => ({\n    default: m.NewConversationPage,\n  })),\n);\nconst ConversationsSettingsPage = lazyRetry<Record<string, never>>(() =>\n  import(\"./pages/ConversationsSettingsPage\").then((m) => ({\n    default: m.ConversationsSettingsPage,\n  })),\n);\n\n/**\n * User-facing routes for the Conversations microfrontend.\n *\n * Routes (relative to basePath, e.g., /conversations):\n * - /                      -> Inbox (two-pane shell, no conversation selected)\n * - /:conversationId       -> Inbox with conversation detail in right pane\n * - /list                  -> Legacy standalone list (kept for deep-linked callers)\n * - /new                   -> Create new conversation\n * - /settings              -> Personal notification settings\n *\n * Both `/` and `/:conversationId` mount `ConversationsLandingPage`. The page\n * reads `useParams().conversationId` and renders the `ConversationDetailPage`\n * in the right pane when set, otherwise the inbox empty state. This keeps\n * the two-pane experience consistent across deep links and sidebar clicks\n * — no full-page nav happens when a user picks a conversation on md+ screens.\n */\nexport function ConversationsUserRoutes() {\n  return (\n    <LazyPageBoundary source=\"user\">\n      <Routes>\n        <Route index element={<ConversationsLandingPage />} />\n        <Route path=\"list\" element={<ConversationListPage />} />\n        <Route path=\"new\" element={<NewConversationPage />} />\n        <Route path=\"settings\" element={<ConversationsSettingsPage />} />\n        <Route path=\":conversationId\" element={<ConversationsLandingPage />} />\n        <Route path=\"*\" element={<Navigate to=\".\" replace />} />\n      </Routes>\n    </LazyPageBoundary>\n  );\n}\n"],"mappings":";;;;;AAMA,IAAM,IAAuB,QAC3B,OAAO,mCAAgC,MAAM,OAAO,EAClD,SAAS,EAAE,sBACZ,EAAE,CACJ,EACK,IAA2B,QAC/B,OAAO,uCAAoC,MAAM,OAAO,EACtD,SAAS,EAAE,0BACZ,EAAE,CACJ,EAEK,IAAsB,QAC1B,OAAO,kCAA+B,MAAM,OAAO,EACjD,SAAS,EAAE,qBACZ,EAAE,CACJ,EACK,IAA4B,QAChC,OAAO,wCAAqC,MAAM,OAAO,EACvD,SAAS,EAAE,2BACZ,EAAE,CACJ;AAkBD,SAAgB,IAA0B;AACxC,QACE,kBAAC,GAAD;EAAkB,QAAO;YACvB,kBAAC,GAAD,EAAA,UAAA;GACE,kBAAC,GAAD;IAAO,OAAA;IAAM,SAAS,kBAAC,GAAD,EAA4B,CAAA;IAAI,CAAA;GACtD,kBAAC,GAAD;IAAO,MAAK;IAAO,SAAS,kBAAC,GAAD,EAAwB,CAAA;IAAI,CAAA;GACxD,kBAAC,GAAD;IAAO,MAAK;IAAM,SAAS,kBAAC,GAAD,EAAuB,CAAA;IAAI,CAAA;GACtD,kBAAC,GAAD;IAAO,MAAK;IAAW,SAAS,kBAAC,GAAD,EAA6B,CAAA;IAAI,CAAA;GACjE,kBAAC,GAAD;IAAO,MAAK;IAAkB,SAAS,kBAAC,GAAD,EAA4B,CAAA;IAAI,CAAA;GACvE,kBAAC,GAAD;IAAO,MAAK;IAAI,SAAS,kBAAC,GAAD;KAAU,IAAG;KAAI,SAAA;KAAU,CAAA;IAAI,CAAA;GACjD,EAAA,CAAA;EACQ,CAAA"}

package/dist/conversations/components/ConversationRow.js

@@ -0,0 +1,176 @@
+import { cn as e } from "../utils/cn.js";
+import { useConversationActions as t } from "../hooks/useConversationQueries.js";
+import { memo as n, useState as r } from "react";
+import { ArchiveIcon as i, ArchiveRestore as a, Bell as o, BellOff as s, Bot as c, Hash as l, HeadphonesIcon as u, LogOut as d, Megaphone as f, MessageCircle as p, MoreHorizontal as m, Pin as h, PinOff as g, Users as _, VolumeX as v } from "lucide-react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { useI18n as S } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { DropdownMenu as C, DropdownMenuContent as w, DropdownMenuItem as T, DropdownMenuSeparator as E, DropdownMenuTrigger as D } from "@burdenoff/fe-libs/ui";
+//#region src/conversations/components/ConversationRow.tsx
+function O({ type: e, size: t = 16, className: n }) {
+	let r = {
+		size: t,
+		className: n
+	};
+	switch (e) {
+		case "DIRECT": return /* @__PURE__ */ b(p, { ...r });
+		case "GROUP": return /* @__PURE__ */ b(_, { ...r });
+		case "CHANNEL": return /* @__PURE__ */ b(l, { ...r });
+		case "BROADCAST":
+		case "ANNOUNCEMENT": return /* @__PURE__ */ b(f, { ...r });
+		case "BOT": return /* @__PURE__ */ b(c, { ...r });
+		case "SUPPORT": return /* @__PURE__ */ b(u, { ...r });
+		default: return /* @__PURE__ */ b(p, { ...r });
+	}
+}
+function k(e, t) {
+	let n = /* @__PURE__ */ new Date(), r = new Date(e), i = n.getTime() - r.getTime(), a = Math.floor(i / 1e3 / 60), o = Math.floor(a / 60), s = Math.floor(o / 24);
+	return a < 1 ? t.now : a < 60 ? `${a}m` : o < 24 ? `${o}h` : s === 1 ? t.yesterday : s < 7 ? `${s}d` : r.toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric"
+	});
+}
+function A(e) {
+	return e.split(" ").slice(0, 2).map((e) => e[0]).join("").toUpperCase();
+}
+var j = n(function({ conversation: n, isActive: c = !1, onClick: u, onLeave: f }) {
+	let { title: p, type: j, state: M, lastMessage: N, unreadCount: P, isPinned: F, isMuted: I, memberCount: L, updatedAt: R, avatar: z } = n, B = P > 0, V = M === "ARCHIVED", { t: H } = S(), U = (e, t) => {
+		let n = H(e);
+		return n === e ? t : n;
+	}, W = {
+		now: U("conversations.now", "now"),
+		yesterday: U("conversations.yesterday", "Yesterday")
+	}, [G, K] = r(!1), { archiveConversation: q, unarchiveConversation: J, pinConversation: Y, unpinConversation: X, muteConversation: Z, unmuteConversation: Q } = t(), $ = (e) => {
+		e.stopPropagation();
+	};
+	return /* @__PURE__ */ x("div", {
+		"data-tour": "conversation-row",
+		className: e("group relative flex w-full min-w-0 items-start gap-3 rounded-md px-3 py-2.5 transition-colors", "cursor-pointer select-none", c ? "bg-bg-sunken border-l-2 border-l-action-primary-bg" : "border-l-2 border-l-transparent hover:bg-action-ghost-bg-hover", B && !c && "bg-bg-elevated/40"),
+		role: "button",
+		tabIndex: 0,
+		onClick: () => u?.(n),
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), u?.(n));
+		},
+		"aria-label": U("conversations.openConversation", "Open conversation") + ": " + p,
+		children: [
+			/* @__PURE__ */ b("div", {
+				className: e("flex-shrink-0 flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold overflow-hidden", j === "DIRECT" && "bg-status-info-bg-subtle text-status-info-text", j === "CHANNEL" && "bg-status-success-bg-subtle text-status-success-text", (j === "GROUP" || j === "BROADCAST" || j === "ANNOUNCEMENT" || j === "BOT" || j === "SUPPORT") && "bg-bg-sunken text-text-primary"),
+				"aria-hidden": "true",
+				children: z ? /* @__PURE__ */ b("img", {
+					src: z,
+					alt: "",
+					className: "h-full w-full object-cover"
+				}) : j === "DIRECT" ? A(p) : j === "CHANNEL" ? /* @__PURE__ */ b(l, { size: 16 }) : /* @__PURE__ */ b(O, {
+					type: j,
+					size: 16
+				})
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children: [/* @__PURE__ */ x("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ x("div", {
+						className: "flex min-w-0 items-center gap-1.5",
+						children: [
+							/* @__PURE__ */ b("span", {
+								className: e("truncate text-sm", B ? "font-semibold text-text-primary" : "font-medium text-text-primary"),
+								children: p
+							}),
+							F && /* @__PURE__ */ b(h, {
+								size: 11,
+								className: "flex-shrink-0 text-text-secondary",
+								"aria-label": U("conversations.pinnedLabel", "Pinned")
+							}),
+							I && /* @__PURE__ */ b(v, {
+								size: 11,
+								className: "flex-shrink-0 text-text-secondary",
+								"aria-label": U("conversations.mutedLabel", "Muted")
+							})
+						]
+					}), /* @__PURE__ */ b("span", {
+						className: e("flex-shrink-0 text-[11px]", B ? "font-medium text-action-primary-bg" : "text-text-secondary"),
+						children: k(N?.createdAt ?? R, W)
+					})]
+				}), /* @__PURE__ */ x("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ b("p", {
+						className: e("min-w-0 truncate break-all text-xs", B ? "text-text-primary/80" : "text-text-secondary"),
+						children: N ? /* @__PURE__ */ x(y, { children: [N.sender.name && /* @__PURE__ */ x("span", {
+							className: "font-medium",
+							children: [N.sender.name, ": "]
+						}), N.content || U("conversations.sentAttachment", "Sent an attachment")] }) : /* @__PURE__ */ b("span", {
+							className: "italic",
+							children: U("conversations.noMessages", "No messages yet")
+						})
+					}), /* @__PURE__ */ x("div", {
+						className: "flex flex-shrink-0 items-center gap-1.5",
+						children: [j !== "DIRECT" && /* @__PURE__ */ x("span", {
+							className: "inline-flex items-center gap-0.5 text-[10px] text-text-secondary",
+							"aria-label": `${L} ${U("conversations.membersLabel", "members")}`,
+							children: [/* @__PURE__ */ b(_, {
+								size: 10,
+								"aria-hidden": "true"
+							}), L]
+						}), B && /* @__PURE__ */ b("span", {
+							className: "inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-action-primary-bg px-1 text-[10px] font-bold text-action-primary-text",
+							"aria-label": `${P} ${U("conversations.unreadCountLabel", "unread")}`,
+							children: P > 99 ? "99+" : P
+						})]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ x(C, {
+				open: G,
+				onOpenChange: K,
+				children: [/* @__PURE__ */ b(D, {
+					asChild: !0,
+					children: /* @__PURE__ */ b("button", {
+						type: "button",
+						onClick: $,
+						onKeyDown: $,
+						"aria-label": U("conversations.rowMenuLabel", "Conversation actions"),
+						className: e("absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-md transition-opacity", "text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border", G ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"),
+						children: /* @__PURE__ */ b(m, {
+							size: 14,
+							"aria-hidden": "true"
+						})
+					})
+				}), /* @__PURE__ */ x(w, {
+					align: "end",
+					className: "min-w-[180px]",
+					onClick: $,
+					children: [
+						/* @__PURE__ */ b(T, {
+							onSelect: () => {
+								F ? X(n.id) : Y(n.id);
+							},
+							children: F ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(g, { size: 14 }), U("conversations.unpin", "Unpin")] }) : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(h, { size: 14 }), U("conversations.pin", "Pin")] })
+						}),
+						/* @__PURE__ */ b(T, {
+							onSelect: () => {
+								I ? Q(n.id) : Z(n.id);
+							},
+							children: I ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(o, { size: 14 }), U("conversations.unmute", "Unmute")] }) : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(s, { size: 14 }), U("conversations.mute", "Mute")] })
+						}),
+						/* @__PURE__ */ b(E, {}),
+						/* @__PURE__ */ b(T, {
+							onSelect: () => {
+								V ? J(n.id) : q(n.id);
+							},
+							children: V ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(a, { size: 14 }), U("conversations.unarchive", "Unarchive")] }) : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(i, { size: 14 }), U("conversations.archive", "Archive")] })
+						}),
+						(j === "GROUP" || j === "CHANNEL") && f && /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(E, {}), /* @__PURE__ */ x(T, {
+							onSelect: () => f(n),
+							className: "text-status-error-text focus:text-status-error-text",
+							children: [/* @__PURE__ */ b(d, { size: 14 }), U("conversations.leave", "Leave")]
+						})] })
+					]
+				})]
+			})
+		]
+	});
+});
+//#endregion
+export { j as ConversationRow };
+
+//# sourceMappingURL=ConversationRow.js.map

package/dist/conversations/components/ConversationRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationRow.js","names":[],"sources":["../../../src/conversations/components/ConversationRow.tsx"],"sourcesContent":["import { memo, useState } from \"react\";\nimport {\n  ArchiveIcon,\n  ArchiveRestore,\n  Bell,\n  BellOff,\n  Bot,\n  Hash,\n  HeadphonesIcon,\n  LogOut,\n  Megaphone,\n  MessageCircle,\n  MoreHorizontal,\n  Pin,\n  PinOff,\n  Users,\n  VolumeX,\n} from \"lucide-react\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@burdenoff/fe-libs/ui\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\nimport { useConversationActions } from \"../hooks/useConversationQueries\";\nimport type { Conversation } from \"../types\";\n\nexport interface ConversationRowProps {\n  conversation: Conversation;\n  isActive?: boolean;\n  onClick?: (conversation: Conversation) => void;\n  /** Optional leave handler — only the host has the membership mutation. */\n  onLeave?: (conversation: Conversation) => void;\n}\n\nfunction ConversationTypeIcon({\n  type,\n  size = 16,\n  className,\n}: {\n  type: Conversation[\"type\"];\n  size?: number;\n  className?: string;\n}) {\n  const props = { size, className };\n  switch (type) {\n    case \"DIRECT\":\n      return <MessageCircle {...props} />;\n    case \"GROUP\":\n      return <Users {...props} />;\n    case \"CHANNEL\":\n      return <Hash {...props} />;\n    case \"BROADCAST\":\n    case \"ANNOUNCEMENT\":\n      return <Megaphone {...props} />;\n    case \"BOT\":\n      return <Bot {...props} />;\n    case \"SUPPORT\":\n      return <HeadphonesIcon {...props} />;\n    default:\n      return <MessageCircle {...props} />;\n  }\n}\n\nfunction formatRelativeTime(\n  dateString: string,\n  labels: { now: string; yesterday: string },\n): string {\n  const now = new Date();\n  const date = new Date(dateString);\n  const diffMs = now.getTime() - date.getTime();\n  const diffMin = Math.floor(diffMs / 1000 / 60);\n  const diffHr = Math.floor(diffMin / 60);\n  const diffDay = Math.floor(diffHr / 24);\n\n  if (diffMin < 1) return labels.now;\n  if (diffMin < 60) return `${diffMin}m`;\n  if (diffHr < 24) return `${diffHr}h`;\n  if (diffDay === 1) return labels.yesterday;\n  if (diffDay < 7) return `${diffDay}d`;\n  return date.toLocaleDateString(undefined, { month: \"short\", day: \"numeric\" });\n}\n\nfunction getInitials(title: string): string {\n  return title\n    .split(\" \")\n    .slice(0, 2)\n    .map((word) => word[0])\n    .join(\"\")\n    .toUpperCase();\n}\n\n/**\n * ConversationRow — inbox-style list row.\n *\n * Visual hierarchy:\n *   [avatar]  Title              · 2h\n *             last message preview            (badge)\n *\n * On hover the kebab (3-dots) menu reveals so the user can pin/mute/archive\n * without opening the conversation first. Wires straight into\n * `useConversationActions` for archive/unarchive/pin/mute.\n */\nexport const ConversationRow = memo(function ConversationRow({\n  conversation,\n  isActive = false,\n  onClick,\n  onLeave,\n}: ConversationRowProps) {\n  const {\n    title,\n    type,\n    state,\n    lastMessage,\n    unreadCount,\n    isPinned,\n    isMuted,\n    memberCount,\n    updatedAt,\n    avatar,\n  } = conversation;\n\n  const hasUnread = unreadCount > 0;\n  const isArchived = state === \"ARCHIVED\";\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const timeLabels = {\n    now: tr(\"conversations.now\", \"now\"),\n    yesterday: tr(\"conversations.yesterday\", \"Yesterday\"),\n  };\n\n  // Track menu open so the kebab stays visible even when the cursor leaves\n  // the row (otherwise the radix portal closes on every hover-out).\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const {\n    archiveConversation,\n    unarchiveConversation,\n    pinConversation,\n    unpinConversation,\n    muteConversation,\n    unmuteConversation,\n  } = useConversationActions();\n\n  // Stop click bubbling from the kebab into the row's click handler — opening\n  // the menu must not also open the conversation.\n  const stop = (event: React.MouseEvent | React.KeyboardEvent) => {\n    event.stopPropagation();\n  };\n\n  return (\n    <div\n      data-tour=\"conversation-row\"\n      className={cn(\n        \"group relative flex w-full min-w-0 items-start gap-3 rounded-md px-3 py-2.5 transition-colors\",\n        \"cursor-pointer select-none\",\n        isActive\n          ? \"bg-bg-sunken border-l-2 border-l-action-primary-bg\"\n          : \"border-l-2 border-l-transparent hover:bg-action-ghost-bg-hover\",\n        hasUnread && !isActive && \"bg-bg-elevated/40\",\n      )}\n      role=\"button\"\n      tabIndex={0}\n      onClick={() => onClick?.(conversation)}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          onClick?.(conversation);\n        }\n      }}\n      aria-label={\n        tr(\"conversations.openConversation\", \"Open conversation\") + \": \" + title\n      }\n    >\n      {/* Avatar / type icon */}\n      <div\n        className={cn(\n          \"flex-shrink-0 flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold overflow-hidden\",\n          type === \"DIRECT\" && \"bg-status-info-bg-subtle text-status-info-text\",\n          type === \"CHANNEL\" &&\n            \"bg-status-success-bg-subtle text-status-success-text\",\n          (type === \"GROUP\" ||\n            type === \"BROADCAST\" ||\n            type === \"ANNOUNCEMENT\" ||\n            type === \"BOT\" ||\n            type === \"SUPPORT\") &&\n            \"bg-bg-sunken text-text-primary\",\n        )}\n        aria-hidden=\"true\"\n      >\n        {avatar ? (\n          <img src={avatar} alt=\"\" className=\"h-full w-full object-cover\" />\n        ) : type === \"DIRECT\" ? (\n          getInitials(title)\n        ) : type === \"CHANNEL\" ? (\n          <Hash size={16} />\n        ) : (\n          <ConversationTypeIcon type={type} size={16} />\n        )}\n      </div>\n\n      {/* Body */}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <span\n              className={cn(\n                \"truncate text-sm\",\n                hasUnread\n                  ? \"font-semibold text-text-primary\"\n                  : \"font-medium text-text-primary\",\n              )}\n            >\n              {title}\n            </span>\n            {isPinned && (\n              <Pin\n                size={11}\n                className=\"flex-shrink-0 text-text-secondary\"\n                aria-label={tr(\"conversations.pinnedLabel\", \"Pinned\")}\n              />\n            )}\n            {isMuted && (\n              <VolumeX\n                size={11}\n                className=\"flex-shrink-0 text-text-secondary\"\n                aria-label={tr(\"conversations.mutedLabel\", \"Muted\")}\n              />\n            )}\n          </div>\n\n          <span\n            className={cn(\n              \"flex-shrink-0 text-[11px]\",\n              hasUnread\n                ? \"font-medium text-action-primary-bg\"\n                : \"text-text-secondary\",\n            )}\n          >\n            {formatRelativeTime(\n              lastMessage?.createdAt ?? updatedAt,\n              timeLabels,\n            )}\n          </span>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-2\">\n          <p\n            className={cn(\n              \"min-w-0 truncate break-all text-xs\",\n              hasUnread ? \"text-text-primary/80\" : \"text-text-secondary\",\n            )}\n          >\n            {lastMessage ? (\n              <>\n                {lastMessage.sender.name && (\n                  <span className=\"font-medium\">\n                    {lastMessage.sender.name}\n                    {\": \"}\n                  </span>\n                )}\n                {lastMessage.content ||\n                  tr(\"conversations.sentAttachment\", \"Sent an attachment\")}\n              </>\n            ) : (\n              <span className=\"italic\">\n                {tr(\"conversations.noMessages\", \"No messages yet\")}\n              </span>\n            )}\n          </p>\n\n          <div className=\"flex flex-shrink-0 items-center gap-1.5\">\n            {type !== \"DIRECT\" && (\n              <span\n                className=\"inline-flex items-center gap-0.5 text-[10px] text-text-secondary\"\n                aria-label={`${memberCount} ${tr(\"conversations.membersLabel\", \"members\")}`}\n              >\n                <Users size={10} aria-hidden=\"true\" />\n                {memberCount}\n              </span>\n            )}\n            {hasUnread && (\n              <span\n                className=\"inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-action-primary-bg px-1 text-[10px] font-bold text-action-primary-text\"\n                aria-label={`${unreadCount} ${tr(\"conversations.unreadCountLabel\", \"unread\")}`}\n              >\n                {unreadCount > 99 ? \"99+\" : unreadCount}\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* Kebab menu — hidden until hover or menu open */}\n      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>\n        <DropdownMenuTrigger asChild>\n          <button\n            type=\"button\"\n            onClick={stop}\n            onKeyDown={stop}\n            aria-label={tr(\n              \"conversations.rowMenuLabel\",\n              \"Conversation actions\",\n            )}\n            className={cn(\n              \"absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-md transition-opacity\",\n              \"text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border\",\n              menuOpen\n                ? \"opacity-100\"\n                : \"opacity-0 group-hover:opacity-100 group-focus-within:opacity-100\",\n            )}\n          >\n            <MoreHorizontal size={14} aria-hidden=\"true\" />\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          align=\"end\"\n          className=\"min-w-[180px]\"\n          onClick={stop}\n        >\n          <DropdownMenuItem\n            onSelect={() => {\n              void (isPinned\n                ? unpinConversation(conversation.id)\n                : pinConversation(conversation.id));\n            }}\n          >\n            {isPinned ? (\n              <>\n                <PinOff size={14} />\n                {tr(\"conversations.unpin\", \"Unpin\")}\n              </>\n            ) : (\n              <>\n                <Pin size={14} />\n                {tr(\"conversations.pin\", \"Pin\")}\n              </>\n            )}\n          </DropdownMenuItem>\n          <DropdownMenuItem\n            onSelect={() => {\n              void (isMuted\n                ? unmuteConversation(conversation.id)\n                : muteConversation(conversation.id));\n            }}\n          >\n            {isMuted ? (\n              <>\n                <Bell size={14} />\n                {tr(\"conversations.unmute\", \"Unmute\")}\n              </>\n            ) : (\n              <>\n                <BellOff size={14} />\n                {tr(\"conversations.mute\", \"Mute\")}\n              </>\n            )}\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem\n            onSelect={() => {\n              void (isArchived\n                ? unarchiveConversation(conversation.id)\n                : archiveConversation(conversation.id));\n            }}\n          >\n            {isArchived ? (\n              <>\n                <ArchiveRestore size={14} />\n                {tr(\"conversations.unarchive\", \"Unarchive\")}\n              </>\n            ) : (\n              <>\n                <ArchiveIcon size={14} />\n                {tr(\"conversations.archive\", \"Archive\")}\n              </>\n            )}\n          </DropdownMenuItem>\n          {(type === \"GROUP\" || type === \"CHANNEL\") && onLeave && (\n            <>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                onSelect={() => onLeave(conversation)}\n                className=\"text-status-error-text focus:text-status-error-text\"\n              >\n                <LogOut size={14} />\n                {tr(\"conversations.leave\", \"Leave\")}\n              </DropdownMenuItem>\n            </>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/conversations/components/EmptyState.js

@@ -1,27 +1,16 @@
-import { cn as e } from "../utils/cn.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
+import { EmptyState as t } from "@burdenoff/fe-libs/ui";
 //#region src/conversations/components/EmptyState.tsx
-function r({ icon: r, title: i, description: a, action: o, className: s }) {
-	return /* @__PURE__ */ n("div", {
-		className: e("flex flex-col items-center justify-center", "py-12 sm:py-16 px-4", "text-center", "animate-in fade-in-0 zoom-in-95 duration-300", s),
-		children: [
-			r && /* @__PURE__ */ t("div", {
-				className: "mb-4 p-4 rounded-2xl bg-muted/50 text-muted-foreground",
-				children: r
-			}),
-			/* @__PURE__ */ t("h3", {
-				className: "text-lg font-semibold text-foreground mb-1",
-				children: i
-			}),
-			a && /* @__PURE__ */ t("p", {
-				className: "text-sm text-muted-foreground max-w-sm mb-4",
-				children: a
-			}),
-			o
-		]
+function n({ icon: n, title: r, description: i, action: a, className: o }) {
+	return /* @__PURE__ */ e(t, {
+		icon: n,
+		title: r,
+		description: i,
+		action: a,
+		className: o
 	});
 }
 //#endregion
-export { r as EmptyState };
+export { n as EmptyState };
 
 //# sourceMappingURL=EmptyState.js.map

package/dist/conversations/components/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../src/conversations/components/EmptyState.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\n\n/**\n * EmptyState - A consistent empty state component\n */\nexport function EmptyState({\n  icon,\n  title,\n  description,\n  action,\n  className,\n}: {\n  icon?: ReactNode;\n  title: string;\n  description?: string;\n  action?: ReactNode;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center\",\n        \"py-12 sm:py-16 px-4\",\n        \"text-center\",\n        \"animate-in fade-in-0 zoom-in-95 duration-300\",\n        className,\n      )}\n    >\n      {icon && (\n        <div className=\"mb-4 p-4 rounded-2xl bg-muted/50 text-muted-foreground\">\n          {icon}\n        </div>\n      )}\n      <h3 className=\"text-lg font-semibold text-foreground mb-1\">{title}</h3>\n      {description && (\n        <p className=\"text-sm text-muted-foreground max-w-sm mb-4\">\n          {description}\n        </p>\n      )}\n      {action}\n    </div>\n  );\n}\n"],"mappings":";;;AAMA,SAAgB,EAAW,EACzB,SACA,UACA,gBACA,WACA,gBAOC;AACD,QACE,kBAAC,OAAD;EACE,WAAW,EACT,6CACA,uBACA,eACA,gDACA,EACD;YAPH;GASG,KACC,kBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA;GAER,kBAAC,MAAD;IAAI,WAAU;cAA8C;IAAW,CAAA;GACtE,KACC,kBAAC,KAAD;IAAG,WAAU;cACV;IACC,CAAA;GAEL;GACG"}
+{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../src/conversations/components/EmptyState.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { EmptyState as CanonicalEmptyState } from \"@burdenoff/fe-libs/ui\";\n\n/**\n * Local wrapper around `EmptyState` from `@burdenoff/fe-libs/ui`. Keeps the\n * existing microfe-conversations call sites stable while routing all\n * empty-state rendering through the canonical primitive.\n */\nexport function EmptyState({\n  icon,\n  title,\n  description,\n  action,\n  className,\n}: {\n  icon?: ReactNode;\n  title: string;\n  description?: string;\n  action?: ReactNode;\n  className?: string;\n}) {\n  return (\n    <CanonicalEmptyState\n      icon={icon}\n      title={title}\n      description={description}\n      action={action}\n      className={className}\n    />\n  );\n}\n"],"mappings":";;;AAQA,SAAgB,EAAW,EACzB,SACA,UACA,gBACA,WACA,gBAOC;AACD,QACE,kBAAC,GAAD;EACQ;EACC;EACM;EACL;EACG;EACX,CAAA"}

package/dist/conversations/components/InboxLayout.js

@@ -0,0 +1,185 @@
+import { useConversations as e } from "../providers/ConversationsProvider.js";
+import { joinPath as t } from "../utils/navigation.js";
+import { useTr as n } from "../utils/i18n.js";
+import { cn as r } from "../utils/cn.js";
+import { useConversationsStore as i } from "../store/conversationsStore.js";
+import { useCallback as a, useMemo as o } from "react";
+import { ArrowLeft as s, MessageSquarePlus as c, Search as l, X as u } from "lucide-react";
+import { useLocation as d, useNavigate as f, useParams as p } from "react-router-dom";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Tabs as g } from "@burdenoff/fe-libs/chrome";
+import { Button as _ } from "@burdenoff/fe-libs/ui";
+//#region src/conversations/components/InboxLayout.tsx
+function v({ activeTab: v, onTabChange: b, archivedEnabled: x = !0, searchQuery: S, onSearchChange: C, filterChips: w, listSlot: T, detailSlot: E, emptyDetailSlot: D }) {
+	let O = f(), k = n(), { basePath: A } = e(), { setActiveConversationId: j } = i(), M = p(), N = d(), P = !!M.conversationId && !!E, F = o(() => {
+		let e = [
+			{
+				id: "all",
+				label: k("conversations.tabs.all", "All")
+			},
+			{
+				id: "direct",
+				label: k("conversations.tabs.direct", "Direct")
+			},
+			{
+				id: "groups",
+				label: k("conversations.tabs.groups", "Groups")
+			},
+			{
+				id: "channels",
+				label: k("conversations.tabs.channels", "Channels")
+			}
+		];
+		return x && e.push({
+			id: "archived",
+			label: k("conversations.tabs.archived", "Archived")
+		}), e;
+	}, [x, k]), I = a(() => {
+		O(t(A || "/conversations", "new"));
+	}, [A, O]), L = a(() => {
+		j(null), O(`${A || "/conversations"}${N.search}`);
+	}, [
+		A,
+		N.search,
+		O,
+		j
+	]);
+	return /* @__PURE__ */ h("div", {
+		"data-tour": "conversations-inbox",
+		className: "flex h-full w-full min-h-0 min-w-0 overflow-hidden bg-bg-canvas",
+		children: [/* @__PURE__ */ h("aside", {
+			"aria-label": k("conversations.listPaneLabel", "Conversations list"),
+			className: r("flex flex-col min-h-0 border-r border-border-default bg-bg-surface", "w-full md:w-[320px] md:flex-shrink-0", P ? "hidden md:flex" : "flex"),
+			children: [/* @__PURE__ */ h("div", {
+				className: "sticky top-0 z-10 flex flex-col gap-3 border-b border-border-subtle bg-bg-surface px-4 pt-4 pb-3",
+				children: [
+					/* @__PURE__ */ h("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ m("h1", {
+							className: "text-base font-semibold text-text-primary",
+							children: k("conversations.title", "Conversations")
+						}), /* @__PURE__ */ h(_, {
+							"data-tour": "conversation-new-button",
+							type: "button",
+							size: "sm",
+							onClick: I,
+							"aria-label": k("conversations.createNewConversation", "Create a new conversation"),
+							children: [/* @__PURE__ */ m(c, { size: 14 }), /* @__PURE__ */ m("span", {
+								className: "hidden sm:inline",
+								children: k("conversations.newConversation", "New")
+							})]
+						})]
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "relative",
+						children: [
+							/* @__PURE__ */ m(l, {
+								size: 14,
+								className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ m("input", {
+								"data-tour": "conversation-search",
+								type: "search",
+								value: S,
+								onChange: (e) => C(e.target.value),
+								placeholder: k("conversations.search", "Search conversations..."),
+								"aria-label": k("conversations.searchAria", "Search conversations"),
+								className: r("w-full rounded-md border border-border-default bg-bg-elevated", "py-1.5 pl-8 pr-8 text-sm text-text-primary", "placeholder:text-text-secondary", "focus:border-action-primary-border focus:outline-none focus:ring-2 focus:ring-action-primary-border/40")
+							}),
+							S.length > 0 && /* @__PURE__ */ m("button", {
+								type: "button",
+								onClick: () => C(""),
+								"aria-label": k("conversations.clearSearch", "Clear conversation search"),
+								className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary",
+								children: /* @__PURE__ */ m(u, { size: 12 })
+							})
+						]
+					}),
+					/* @__PURE__ */ m("div", {
+						"data-tour": "conversations-tabs",
+						children: /* @__PURE__ */ m(g, {
+							items: F,
+							activeTabId: v,
+							onTabChange: (e) => b(e),
+							variant: "underline",
+							size: "sm"
+						})
+					}),
+					w && w.length > 0 && /* @__PURE__ */ m("div", {
+						"data-tour": "conversations-filter-chips",
+						className: "flex flex-wrap gap-1.5",
+						children: w.map((e) => /* @__PURE__ */ h("button", {
+							type: "button",
+							onClick: e.onToggle,
+							"aria-pressed": e.active,
+							className: r("inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors", e.active ? "border-action-primary-border bg-action-primary-bg/10 text-action-primary-bg" : "border-border-default text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary"),
+							children: [e.icon, e.label]
+						}, e.id))
+					})
+				]
+			}), /* @__PURE__ */ m("div", {
+				"data-tour": "conversations-list-scroll",
+				className: "flex-1 min-h-0 overflow-y-auto overflow-x-hidden",
+				children: T
+			})]
+		}), /* @__PURE__ */ h("section", {
+			"aria-label": k("conversations.detailPaneLabel", "Conversation detail"),
+			className: r("flex flex-col min-h-0 flex-1 min-w-0 bg-bg-surface", P ? "flex" : "hidden md:flex"),
+			children: [P && /* @__PURE__ */ m("div", {
+				className: "md:hidden border-b border-border-subtle px-3 py-2",
+				children: /* @__PURE__ */ h(_, {
+					variant: "ghost",
+					size: "sm",
+					onClick: L,
+					"aria-label": k("conversations.backToInbox", "Back to conversations list"),
+					children: [/* @__PURE__ */ m(s, { size: 14 }), k("conversations.backToInbox", "Back to inbox")]
+				})
+			}), /* @__PURE__ */ m("div", {
+				className: "flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden",
+				children: E ?? D ?? /* @__PURE__ */ m(y, {
+					onNew: I,
+					title: k("conversations.detailEmpty.title", "Select a conversation"),
+					description: k("conversations.detailEmpty.description", "Pick a conversation from the list — or start a new one."),
+					newLabel: k("conversations.detailEmpty.newCta", "Start a new conversation")
+				})
+			})]
+		})]
+	});
+}
+function y({ title: e, description: t, newLabel: n, onNew: r }) {
+	return /* @__PURE__ */ m("div", {
+		className: "flex h-full items-center justify-center p-8",
+		children: /* @__PURE__ */ h("div", {
+			className: "flex max-w-sm flex-col items-center gap-3 text-center",
+			children: [
+				/* @__PURE__ */ m("div", {
+					className: "flex size-16 items-center justify-center rounded-full bg-bg-sunken",
+					children: /* @__PURE__ */ m(c, {
+						size: 28,
+						className: "text-text-secondary",
+						"aria-hidden": "true"
+					})
+				}),
+				/* @__PURE__ */ m("h2", {
+					className: "text-lg font-semibold text-text-primary",
+					children: e
+				}),
+				/* @__PURE__ */ m("p", {
+					className: "text-sm text-text-secondary",
+					children: t
+				}),
+				/* @__PURE__ */ h(_, {
+					type: "button",
+					onClick: r,
+					className: "mt-2",
+					children: [/* @__PURE__ */ m(c, { size: 14 }), n]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { v as InboxLayout };
+
+//# sourceMappingURL=InboxLayout.js.map

package/dist/conversations/components/InboxLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InboxLayout.js","names":[],"sources":["../../../src/conversations/components/InboxLayout.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useCallback, useMemo } from \"react\";\nimport { useLocation, useNavigate, useParams } from \"react-router-dom\";\nimport { Tabs, type TabItem } from \"@burdenoff/fe-libs/chrome\";\nimport { Button } from \"@burdenoff/fe-libs/ui\";\nimport { ArrowLeft, MessageSquarePlus, Search, X } from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\nimport { useConversations } from \"../providers/ConversationsProvider\";\nimport { useConversationsStore } from \"../store/conversationsStore\";\nimport { useTr } from \"../utils/i18n\";\nimport { joinPath } from \"../utils/navigation\";\n\n/**\n * Identifier for each inbox tab. Drives the conversation list filter and is\n * mirrored to / read from the `?tab=` URL search param.\n */\nexport type InboxTabId = \"all\" | \"direct\" | \"groups\" | \"channels\" | \"archived\";\n\nexport const INBOX_TAB_IDS: InboxTabId[] = [\n  \"all\",\n  \"direct\",\n  \"groups\",\n  \"channels\",\n  \"archived\",\n];\n\nexport interface FilterChipDescriptor {\n  id: \"unread\" | \"pinned\";\n  label: string;\n  active: boolean;\n  onToggle: () => void;\n  icon?: ReactNode;\n}\n\nexport interface InboxLayoutProps {\n  /**\n   * Currently active inbox tab. Drives which list view is rendered in the\n   * left pane.\n   */\n  activeTab: InboxTabId;\n  /** Tab change handler. Used by the host page to sync URL state. */\n  onTabChange: (id: InboxTabId) => void;\n  /**\n   * Whether the Archived tab is exposed. Gated behind the `conversations.archived-view`\n   * feature flag — when false the tab is hidden from the bar entirely.\n   */\n  archivedEnabled?: boolean;\n  /** Search input value (controlled). */\n  searchQuery: string;\n  /** Search input change handler. */\n  onSearchChange: (value: string) => void;\n  /**\n   * Quick toggleable filter chips rendered below the tabs. Pass an empty\n   * array (or omit) to hide the chip row entirely — useful on the Archived\n   * tab where pin/unread filters don't make sense.\n   */\n  filterChips?: FilterChipDescriptor[];\n  /** Scrollable list content rendered in the left pane below the chrome. */\n  listSlot: ReactNode;\n  /**\n   * Right-pane content. When a conversation is selected the parent should\n   * pass the conversation detail subtree here. When nothing is selected the\n   * empty-state slot below is used instead.\n   */\n  detailSlot?: ReactNode;\n  /**\n   * Empty-state rendered in the right pane when `detailSlot` is null /\n   * undefined. Defaults to a generic \"Select a conversation\" prompt.\n   */\n  emptyDetailSlot?: ReactNode;\n}\n\n/**\n * Two-pane inbox shell for the conversations microfrontend.\n *\n * Left pane: fixed 320px (collapses to full-width below `md` when no\n * conversation is selected, the way Slack / Linear / Discord behave on\n * mobile). Holds:\n *   - sticky header (title + New CTA)\n *   - search input\n *   - tabs (All / Direct / Groups / Channels / Archived)\n *   - filter chips (Unread / Pinned)\n *   - scrollable conversation list\n *\n * Right pane: detail subtree OR empty state.\n *\n * The component is presentation-only — URL <-> tab sync, query\n * construction, and conversation selection all live in the host page.\n */\nexport function InboxLayout({\n  activeTab,\n  onTabChange,\n  archivedEnabled = true,\n  searchQuery,\n  onSearchChange,\n  filterChips,\n  listSlot,\n  detailSlot,\n  emptyDetailSlot,\n}: InboxLayoutProps) {\n  const navigate = useNavigate();\n  const tr = useTr();\n  const { basePath } = useConversations();\n  const { setActiveConversationId } = useConversationsStore();\n  const params = useParams<{ conversationId?: string }>();\n  const location = useLocation();\n  // A conversation is \"open\" whenever the URL targets a detail route\n  // (/:conversationId). We can't rely solely on a passed detailSlot —\n  // routing decides whether to mount the detail page.\n  const conversationOpen =\n    Boolean(params.conversationId) && Boolean(detailSlot);\n\n  const tabs: TabItem[] = useMemo(() => {\n    const items: TabItem[] = [\n      { id: \"all\", label: tr(\"conversations.tabs.all\", \"All\") },\n      { id: \"direct\", label: tr(\"conversations.tabs.direct\", \"Direct\") },\n      { id: \"groups\", label: tr(\"conversations.tabs.groups\", \"Groups\") },\n      { id: \"channels\", label: tr(\"conversations.tabs.channels\", \"Channels\") },\n    ];\n    if (archivedEnabled) {\n      items.push({\n        id: \"archived\",\n        label: tr(\"conversations.tabs.archived\", \"Archived\"),\n      });\n    }\n    return items;\n  }, [archivedEnabled, tr]);\n\n  const handleNewConversation = useCallback(() => {\n    navigate(joinPath(basePath || \"/conversations\", \"new\"));\n  }, [basePath, navigate]);\n\n  const handleBackToList = useCallback(() => {\n    // Clear the open conversation id so the empty state shows and routing\n    // returns to the inbox shell. We keep the current tab via location.search.\n    setActiveConversationId(null);\n    navigate(`${basePath || \"/conversations\"}${location.search}`);\n  }, [basePath, location.search, navigate, setActiveConversationId]);\n\n  return (\n    <div\n      data-tour=\"conversations-inbox\"\n      className=\"flex h-full w-full min-h-0 min-w-0 overflow-hidden bg-bg-canvas\"\n    >\n      {/* Left pane: list. On md+ always visible as a fixed sidebar. Below md,\n          hidden when a conversation is open (full-screen detail mode). */}\n      <aside\n        aria-label={tr(\"conversations.listPaneLabel\", \"Conversations list\")}\n        className={cn(\n          \"flex flex-col min-h-0 border-r border-border-default bg-bg-surface\",\n          \"w-full md:w-[320px] md:flex-shrink-0\",\n          conversationOpen ? \"hidden md:flex\" : \"flex\",\n        )}\n      >\n        {/* Sticky header: title + new CTA */}\n        <div className=\"sticky top-0 z-10 flex flex-col gap-3 border-b border-border-subtle bg-bg-surface px-4 pt-4 pb-3\">\n          <div className=\"flex items-center justify-between gap-2\">\n            <h1 className=\"text-base font-semibold text-text-primary\">\n              {tr(\"conversations.title\", \"Conversations\")}\n            </h1>\n            <Button\n              data-tour=\"conversation-new-button\"\n              type=\"button\"\n              size=\"sm\"\n              onClick={handleNewConversation}\n              aria-label={tr(\n                \"conversations.createNewConversation\",\n                \"Create a new conversation\",\n              )}\n            >\n              <MessageSquarePlus size={14} />\n              <span className=\"hidden sm:inline\">\n                {tr(\"conversations.newConversation\", \"New\")}\n              </span>\n            </Button>\n          </div>\n\n          {/* Search */}\n          <div className=\"relative\">\n            <Search\n              size={14}\n              className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary\"\n              aria-hidden=\"true\"\n            />\n            <input\n              data-tour=\"conversation-search\"\n              type=\"search\"\n              value={searchQuery}\n              onChange={(event) => onSearchChange(event.target.value)}\n              placeholder={tr(\n                \"conversations.search\",\n                \"Search conversations...\",\n              )}\n              aria-label={tr(\n                \"conversations.searchAria\",\n                \"Search conversations\",\n              )}\n              className={cn(\n                \"w-full rounded-md border border-border-default bg-bg-elevated\",\n                \"py-1.5 pl-8 pr-8 text-sm text-text-primary\",\n                \"placeholder:text-text-secondary\",\n                \"focus:border-action-primary-border focus:outline-none focus:ring-2 focus:ring-action-primary-border/40\",\n              )}\n            />\n            {searchQuery.length > 0 && (\n              <button\n                type=\"button\"\n                onClick={() => onSearchChange(\"\")}\n                aria-label={tr(\n                  \"conversations.clearSearch\",\n                  \"Clear conversation search\",\n                )}\n                className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary\"\n              >\n                <X size={12} />\n              </button>\n            )}\n          </div>\n\n          {/* Tabs */}\n          <div data-tour=\"conversations-tabs\">\n            <Tabs\n              items={tabs}\n              activeTabId={activeTab}\n              onTabChange={(id: string) => onTabChange(id as InboxTabId)}\n              variant=\"underline\"\n              size=\"sm\"\n            />\n          </div>\n\n          {/* Filter chips */}\n          {filterChips && filterChips.length > 0 && (\n            <div\n              data-tour=\"conversations-filter-chips\"\n              className=\"flex flex-wrap gap-1.5\"\n            >\n              {filterChips.map((chip) => (\n                <button\n                  key={chip.id}\n                  type=\"button\"\n                  onClick={chip.onToggle}\n                  aria-pressed={chip.active}\n                  className={cn(\n                    \"inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors\",\n                    chip.active\n                      ? \"border-action-primary-border bg-action-primary-bg/10 text-action-primary-bg\"\n                      : \"border-border-default text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary\",\n                  )}\n                >\n                  {chip.icon}\n                  {chip.label}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Scrollable list */}\n        <div\n          data-tour=\"conversations-list-scroll\"\n          className=\"flex-1 min-h-0 overflow-y-auto overflow-x-hidden\"\n        >\n          {listSlot}\n        </div>\n      </aside>\n\n      {/* Right pane: detail OR empty state */}\n      <section\n        aria-label={tr(\"conversations.detailPaneLabel\", \"Conversation detail\")}\n        className={cn(\n          \"flex flex-col min-h-0 flex-1 min-w-0 bg-bg-surface\",\n          conversationOpen ? \"flex\" : \"hidden md:flex\",\n        )}\n      >\n        {conversationOpen && (\n          // Mobile-only back button. On md+ the list and detail render\n          // side-by-side so the back arrow would be useless.\n          <div className=\"md:hidden border-b border-border-subtle px-3 py-2\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={handleBackToList}\n              aria-label={tr(\n                \"conversations.backToInbox\",\n                \"Back to conversations list\",\n              )}\n            >\n              <ArrowLeft size={14} />\n              {tr(\"conversations.backToInbox\", \"Back to inbox\")}\n            </Button>\n          </div>\n        )}\n        <div className=\"flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden\">\n          {detailSlot ?? emptyDetailSlot ?? (\n            <InboxEmptyDetail\n              onNew={handleNewConversation}\n              title={tr(\n                \"conversations.detailEmpty.title\",\n                \"Select a conversation\",\n              )}\n              description={tr(\n                \"conversations.detailEmpty.description\",\n                \"Pick a conversation from the list — or start a new one.\",\n              )}\n              newLabel={tr(\n                \"conversations.detailEmpty.newCta\",\n                \"Start a new conversation\",\n              )}\n            />\n          )}\n        </div>\n      </section>\n    </div>\n  );\n}\n\ninterface InboxEmptyDetailProps {\n  title: string;\n  description: string;\n  newLabel: string;\n  onNew: () => void;\n}\n\n/**\n * Default empty-state rendered in the detail pane when no conversation is\n * currently selected. Lifted out so the host page (or tests) can override\n * the copy via `emptyDetailSlot`.\n */\nfunction InboxEmptyDetail({\n  title,\n  description,\n  newLabel,\n  onNew,\n}: InboxEmptyDetailProps) {\n  return (\n    <div className=\"flex h-full items-center justify-center p-8\">\n      <div className=\"flex max-w-sm flex-col items-center gap-3 text-center\">\n        <div className=\"flex size-16 items-center justify-center rounded-full bg-bg-sunken\">\n          <MessageSquarePlus\n            size={28}\n            className=\"text-text-secondary\"\n            aria-hidden=\"true\"\n          />\n        </div>\n        <h2 className=\"text-lg font-semibold text-text-primary\">{title}</h2>\n        <p className=\"text-sm text-text-secondary\">{description}</p>\n        <Button type=\"button\" onClick={onNew} className=\"mt-2\">\n          <MessageSquarePlus size={14} />\n          {newLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/conversations/components/PageLayout.js

@@ -2,8 +2,9 @@ import { cn as e } from "../utils/cn.js";
 import "./PageSection.js";
 import "./EmptyState.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { PageHeader as r } from "@burdenoff/fe-libs/chrome";
 //#region src/conversations/components/PageLayout.tsx
-var r = {
+var i = {
 	sm: "max-w-screen-sm",
 	md: "max-w-screen-md",
 	lg: "max-w-screen-lg",
@@ -12,47 +13,28 @@ var r = {
 	"3xl": "max-w-[1600px]",
 	full: "max-w-full"
 };
-function i({ children: i, title: a, subtitle: o, icon: s, headerActions: c, headerContent: l, maxWidth: u = "xl", showHeader: d = !0, className: f, contentClassName: p, dataTour: m }) {
+function a({ children: a, title: o, subtitle: s, icon: c, headerActions: l, headerContent: u, maxWidth: d = "xl", showHeader: f = !0, className: p, contentClassName: m, dataTour: h }) {
 	return /* @__PURE__ */ t("div", {
-		"data-tour": m,
-		className: e("min-h-full w-full", "px-4 sm:px-6 lg:px-8 xl:px-12", "py-6 sm:py-8 lg:py-10", "animate-in fade-in-0 slide-in-from-bottom-4 duration-500", f),
+		"data-tour": h,
+		className: e("min-h-full w-full", "px-4 sm:px-6 lg:px-8 xl:px-12", "py-6 sm:py-8 lg:py-10", "animate-in fade-in-0 slide-in-from-bottom-4 duration-500", p),
 		children: /* @__PURE__ */ n("div", {
-			className: e("mx-auto w-full", r[u], p),
-			children: [d && (a || c) && /* @__PURE__ */ n("header", {
-				className: "mb-6 sm:mb-8",
-				children: [/* @__PURE__ */ n("div", {
-					className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
-					children: [/* @__PURE__ */ n("div", {
-						className: "space-y-1",
-						children: [(a || s) && /* @__PURE__ */ n("div", {
-							className: "flex items-center gap-3",
-							children: [s && /* @__PURE__ */ t("div", {
-								className: "flex-shrink-0 p-2.5 rounded-xl bg-primary/10 text-primary",
-								children: s
-							}), a && /* @__PURE__ */ t("h1", {
-								className: "text-2xl sm:text-3xl font-bold tracking-tight text-foreground",
-								children: a
-							})]
-						}), o && /* @__PURE__ */ t("p", {
-							className: "text-sm sm:text-base text-muted-foreground max-w-2xl",
-							children: o
-						})]
-					}), c && /* @__PURE__ */ t("div", {
-						className: "flex items-center gap-2 flex-shrink-0",
-						children: c
-					})]
-				}), l && /* @__PURE__ */ t("div", {
-					className: "mt-4",
-					children: l
-				})]
+			className: e("mx-auto w-full", i[d], m),
+			children: [f && (o || l) && /* @__PURE__ */ n("div", {
+				className: "mb-6 sm:mb-8 space-y-4",
+				children: [/* @__PURE__ */ t(r, {
+					title: o ?? "",
+					description: s,
+					icon: c,
+					actions: l
+				}), u && /* @__PURE__ */ t("div", { children: u })]
 			}), /* @__PURE__ */ t("div", {
 				className: "space-y-6",
-				children: i
+				children: a
 			})]
 		})
 	});
 }
 //#endregion
-export { i as PageLayout };
+export { a as PageLayout };
 
 //# sourceMappingURL=PageLayout.js.map