@mcp-b/react-components 0.48.0 → 0.49.0

package/dist/components/agents-sdk/ManagerOffice.js

@@ -1,22 +1,21 @@
-import { getMcpServerIconSrc } from "../../utils/mcp-server-catalog.js";
+import { findCatalogMcpServerCard, getMcpServerIconSrc } from "../../utils/mcp-server-catalog.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { C as FolderIcon, D as LinkIcon, K as SpinnerIcon, L as PauseIcon, P as MonitorIcon, S as FileIcon, T as InfoIcon, _ as DotIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon, j as MessageSquareIcon, p as ChevronRightIcon, u as CalendarIcon } from "../../icons-cuEtsgj9.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { B as PlusIcon, C as FolderIcon, D as LinkIcon, K as SpinnerIcon, L as PauseIcon, P as MonitorIcon, R as PencilIcon, S as FileIcon, T as InfoIcon, _ as DotIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon, j as MessageSquareIcon, p as ChevronRightIcon, u as CalendarIcon } from "../../icons-CeGfXO21.js";
 import { Button } from "../foundations/Button.js";
-import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import { Tooltip } from "../foundations/Tooltip.js";
+import { EmptyState } from "../foundations/EmptyState.js";
 import { Avatar } from "../foundations/Avatar.js";
 import { AppIcon } from "../foundations/AppIcon.js";
-import { n as findCatalogMcpServerCard } from "../../mcp-server-7NR24ASj.js";
-import { CorrespondentName, correspondentHandleLabel } from "../ai-sdk/Correspondent.js";
-import { EmptyState } from "../foundations/EmptyState.js";
 import { LinkButton } from "../foundations/LinkButton.js";
 import "../foundations/icons.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
-import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
+import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
+import { CorrespondentName, correspondentHandleLabel } from "../ai-sdk/Correspondent.js";
 import { getThinkExecutionRunStatus } from "./ThinkExecutionRun.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
 //#region src/components/_internal/chrome-profile-colors.ts
 const PALETTE = [
 	{
@@ -89,6 +88,18 @@ function chromeProfileColor(seed, taken) {
 }
 //#endregion
 //#region src/components/agents-sdk/ManagerOffice.tsx
+const OfficeContext = React.createContext(null);
+const EmployeeContext = React.createContext(null);
+function useOffice() {
+	const value = React.useContext(OfficeContext);
+	if (!value) throw new Error("ManagerOffice parts require ManagerOffice.Root.");
+	return value;
+}
+function useEmployee() {
+	const value = React.useContext(EmployeeContext);
+	if (!value) throw new Error("Employee parts require ManagerOffice.Employee.");
+	return value;
+}
 const statusLabels = {
 	"needs-you": "Waiting on you",
 	working: "Working",
@@ -123,10 +134,6 @@ function employeeStatusText(employee) {
 	const label = statusLabels[employee.status];
 	return count ? `${label} · ${count} handoff${count === 1 ? "" : "s"}` : label;
 }
-/** One presence phrase on the office row. Counts stay in the accessible name. */
-function employeePresenceCaption(employee) {
-	return statusLabels[employee.status];
-}
 function EmployeePresence({ employee }) {
 	return /* @__PURE__ */ jsx("span", {
 		className: "manager-office__nav-status",
@@ -562,7 +569,7 @@ function ManagerOfficeSidebar({ className, closeSidebarOnCompact, content, emplo
 									children: employee.name
 								}), /* @__PURE__ */ jsx("small", {
 									className: "sigvelo-truncate",
-									children: employeePresenceCaption(employee)
+									children: statusLabels[employee.status]
 								})]
 							})]
 						})
@@ -654,7 +661,17 @@ function routineDetail(routine) {
 		return status === "completed" || status === "complete";
 	}).length} of ${finishedRuns.length} recent runs completed`;
 }
-function ReviewRow({ employee, renderLink, now, showEmployee, work }) {
+/**
+* Where a work link sits decides whether it draws its own surface: a row in a
+* work list is a bounded row, while a lane heading sits inside the lane card,
+* which already draws one.
+*/
+const workLinkClassNames = {
+	row: "manager-office__work-link",
+	lane: "manager-office__lane-title"
+};
+/** The link onto a work thread, shared by standalone rows and lane headings. */
+function WorkLink({ employee, placement, renderLink, now, showEmployee, work }) {
 	return /* @__PURE__ */ jsxs(LinkButton, {
 		render: renderLink({
 			kind: "work",
@@ -664,7 +681,7 @@ function ReviewRow({ employee, renderLink, now, showEmployee, work }) {
 		variant: "ghost",
 		color: "neutral",
 		size: "sm",
-		className: "manager-office__work-link",
+		className: workLinkClassNames[placement],
 		"aria-label": `Open ${work.title} to ${threadStatusLabel(work.status).toLowerCase()}`,
 		children: [
 			/* @__PURE__ */ jsx(ThreadStatusIcon, { status: work.status }),
@@ -780,41 +797,13 @@ function WorkLane({ employee, now, renderLink, work }) {
 			/* @__PURE__ */ jsx("h3", {
 				id: titleId,
 				className: "manager-office__lane-heading",
-				children: /* @__PURE__ */ jsxs(LinkButton, {
-					render: renderLink({
-						kind: "work",
-						employee,
-						work
-					}),
-					variant: "ghost",
-					color: "neutral",
-					size: "sm",
-					className: "manager-office__lane-title",
-					"aria-label": `Open ${work.title} to ${threadStatusLabel(work.status).toLowerCase()}`,
-					children: [
-						/* @__PURE__ */ jsx(ThreadStatusIcon, { status: work.status }),
-						/* @__PURE__ */ jsxs("span", {
-							className: "manager-office__identity",
-							children: [/* @__PURE__ */ jsxs("strong", {
-								className: "sigvelo-truncate",
-								children: [work.title, work.status === "attention" ? /* @__PURE__ */ jsx("span", {
-									className: "manager-office__unread-dot",
-									"aria-hidden": "true"
-								}) : null]
-							}), /* @__PURE__ */ jsxs("small", {
-								className: "sigvelo-truncate",
-								children: [
-									threadStatusLabel(work.status),
-									" · ",
-									/* @__PURE__ */ jsx(Timestamp, {
-										timestamp: work.updatedAt,
-										now
-									})
-								]
-							})]
-						}),
-						/* @__PURE__ */ jsx(ChevronRightIcon, { className: "manager-office__row-chevron" })
-					]
+				children: /* @__PURE__ */ jsx(WorkLink, {
+					employee,
+					now,
+					placement: "lane",
+					renderLink,
+					showEmployee: false,
+					work
 				})
 			}),
 			work.summary ? /* @__PURE__ */ jsx("p", {
@@ -835,7 +824,8 @@ function WorkLane({ employee, now, renderLink, work }) {
 		]
 	});
 }
-function AttentionView({ employees, renderLink, now }) {
+function ManagerOfficeAttention({ className, ...props }) {
+	const { employees, renderLink, now } = useOffice();
 	const waits = employees.flatMap((employee) => isConnected(employee) ? employee.handoffs.map((handoff) => ({
 		employee,
 		handoff
@@ -845,7 +835,8 @@ function AttentionView({ employees, renderLink, now }) {
 		work
 	})) : []);
 	if (!waits.length && !reviews.length) return /* @__PURE__ */ jsx("div", {
-		className: "manager-office__attention",
+		...props,
+		className: cx("manager-office__attention", className),
 		"data-recipe": "page",
 		children: /* @__PURE__ */ jsx(EmptyState, {
 			icon: /* @__PURE__ */ jsx(CheckIcon, {}),
@@ -855,7 +846,8 @@ function AttentionView({ employees, renderLink, now }) {
 	});
 	const both = waits.length > 0 && reviews.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "manager-office__attention",
+		...props,
+		className: cx("manager-office__attention", className),
 		"data-recipe": "page",
 		children: [waits.length ? /* @__PURE__ */ jsxs("div", {
 			className: "manager-office__attention-group",
@@ -881,9 +873,10 @@ function AttentionView({ employees, renderLink, now }) {
 			}), /* @__PURE__ */ jsx("ul", {
 				className: "manager-office__work-list sigvelo-stack-list",
 				"aria-label": "Ready for you",
-				children: reviews.map(({ employee, work }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ReviewRow, {
+				children: reviews.map(({ employee, work }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(WorkLink, {
 					employee,
 					work,
+					placement: "row",
 					renderLink,
 					now,
 					showEmployee: true
@@ -892,8 +885,212 @@ function AttentionView({ employees, renderLink, now }) {
 		}) : null]
 	});
 }
-function EmployeeDetail({ employee, renderLink, now, profileColor }) {
-	if (!isConnected(employee)) return /* @__PURE__ */ jsx("div", {
+const employeeDefaults = {
+	className: "manager-office__employee-detail",
+	"data-recipe": "page"
+};
+/** Scope the selected employee without imposing dossier content or column order. */
+function ManagerOfficeEmployeeRoot({ employee, render, ref, ...props }) {
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps(employeeDefaults, props)
+	});
+	return /* @__PURE__ */ jsx(EmployeeContext.Provider, {
+		value: employee,
+		children: element
+	});
+}
+function ManagerOfficeEmployeeHeader({ className, ...props }) {
+	const employee = useEmployee();
+	const { profileColors } = useOffice();
+	const profileColor = profileColors.get(employee.id) ?? chromeProfileColor(employee.id);
+	return /* @__PURE__ */ jsxs("header", {
+		...props,
+		className: cx("manager-office__employee-header", className),
+		children: [/* @__PURE__ */ jsx(EmployeeAvatar, {
+			employee,
+			color: profileColor,
+			size: "lg"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "manager-office__briefing",
+			children: [
+				/* @__PURE__ */ jsx("strong", {
+					className: "sigvelo-truncate",
+					children: employee.name
+				}),
+				/* @__PURE__ */ jsx("small", {
+					className: "sigvelo-truncate",
+					children: employee.email
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "manager-office__role",
+					children: employee.role
+				})
+			]
+		})]
+	});
+}
+function ManagerOfficeHandoffs({ className, ...props }) {
+	const employee = useEmployee();
+	const { renderLink, now } = useOffice();
+	return employee.handoffs.length ? /* @__PURE__ */ jsx("section", {
+		...props,
+		className: cx("manager-office__employee-handoffs", className),
+		"aria-label": "Waiting on you",
+		children: employee.handoffs.map((handoff) => /* @__PURE__ */ jsx(HandoffCard, {
+			employee,
+			handoff,
+			renderLink,
+			now,
+			showEmployee: false
+		}, handoff.id))
+	}) : null;
+}
+function ManagerOfficeWorkSection({ className, ...props }) {
+	const employee = useEmployee();
+	const { renderLink, now } = useOffice();
+	return /* @__PURE__ */ jsxs("section", {
+		...props,
+		className: cx("manager-office__section", className),
+		children: [/* @__PURE__ */ jsx("header", {
+			className: "manager-office__section-header",
+			children: /* @__PURE__ */ jsxs("h2", {
+				className: "manager-office__section-title",
+				children: [/* @__PURE__ */ jsx(MessageSquareIcon, {}), "Work"]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "manager-office__section-content",
+			children: employee.work.length ? /* @__PURE__ */ jsx("ul", {
+				className: "manager-office__work-list sigvelo-stack-list",
+				children: employee.work.map((work) => /* @__PURE__ */ jsx("li", { children: workingSetOf(work).length ? /* @__PURE__ */ jsx(WorkLane, {
+					employee,
+					now,
+					renderLink,
+					work
+				}) : /* @__PURE__ */ jsx(WorkLink, {
+					employee,
+					now,
+					placement: "row",
+					renderLink,
+					showEmployee: false,
+					work
+				}) }, work.id))
+			}) : /* @__PURE__ */ jsx("p", {
+				className: "manager-office__section-empty",
+				children: "No work yet."
+			})
+		})]
+	});
+}
+function ManagerOfficeRoutines({ className, ...props }) {
+	const employee = useEmployee();
+	const { renderLink } = useOffice();
+	return /* @__PURE__ */ jsx("section", {
+		...props,
+		className: cx("manager-office__section", className),
+		"aria-label": "Routines",
+		children: /* @__PURE__ */ jsxs(Collapsible.Root, {
+			defaultOpen: true,
+			children: [/* @__PURE__ */ jsxs(Button, {
+				render: /* @__PURE__ */ jsx(Collapsible.Trigger, { unstyled: true }),
+				type: "button",
+				variant: "ghost",
+				color: "neutral",
+				size: "sm",
+				className: "manager-office__routine-trigger",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "manager-office__identity",
+					children: [/* @__PURE__ */ jsx(CalendarIcon, {}), /* @__PURE__ */ jsx("strong", { children: "Routines" })]
+				}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "sigvelo-disclosure-chevron" })]
+			}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+				unstyled: true,
+				children: employee.routines.length ? /* @__PURE__ */ jsx("ul", {
+					className: "manager-office__routine-list sigvelo-stack-list",
+					children: employee.routines.map((routine) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(LinkButton, {
+						render: renderLink({
+							kind: "routine",
+							employee,
+							routine
+						}),
+						variant: "ghost",
+						color: "neutral",
+						size: "sm",
+						className: "manager-office__routine-link",
+						children: [
+							routine.enabled ? /* @__PURE__ */ jsx(CalendarIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "manager-office__identity",
+								children: [/* @__PURE__ */ jsx("strong", {
+									className: "sigvelo-truncate",
+									children: routine.name
+								}), /* @__PURE__ */ jsx("small", {
+									className: "sigvelo-truncate",
+									children: routineDetail(routine)
+								})]
+							}),
+							/* @__PURE__ */ jsx(ChevronRightIcon, { className: "manager-office__row-chevron" })
+						]
+					}) }, routine.id))
+				}) : /* @__PURE__ */ jsx("p", {
+					className: "manager-office__section-empty",
+					children: "No routines yet."
+				})
+			})]
+		})
+	});
+}
+function ManagerOfficeChannels({ className, ...props }) {
+	const employee = useEmployee();
+	return /* @__PURE__ */ jsxs("section", {
+		...props,
+		className: cx("manager-office__section", className),
+		children: [/* @__PURE__ */ jsx("header", {
+			className: "manager-office__section-header",
+			children: /* @__PURE__ */ jsxs("h2", {
+				className: "manager-office__section-title",
+				children: [/* @__PURE__ */ jsx(LinkIcon, {}), "Channels"]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "manager-office__section-content",
+			children: employee.channels.length ? /* @__PURE__ */ jsx("ul", {
+				className: "manager-office__channel-list sigvelo-stack-list",
+				children: employee.channels.map((channel) => /* @__PURE__ */ jsx(ChannelRow, { channel }, channel.id))
+			}) : /* @__PURE__ */ jsx("p", {
+				className: "manager-office__section-empty",
+				children: "Nothing connected yet."
+			})
+		})]
+	});
+}
+function ManagerOfficeMain({ render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "main",
+		render,
+		ref,
+		props: mergeProps({ className: "manager-office__main" }, props)
+	});
+}
+function ManagerOfficeColumns({ render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({ className: "manager-office__employee-columns" }, props)
+	});
+}
+function ManagerOfficeAside({ render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "aside",
+		render,
+		ref,
+		props: mergeProps({ className: "manager-office__employee-aside" }, props)
+	});
+}
+/** Honest disconnected state; the host chooses when and where to display it. */
+function ManagerOfficeConnectionState({ employee }) {
+	return /* @__PURE__ */ jsx("div", {
 		"data-recipe": "page",
 		children: /* @__PURE__ */ jsx(EmptyState, {
 			icon: employee.status === "connecting" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(MonitorIcon, {}),
@@ -901,237 +1098,50 @@ function EmployeeDetail({ employee, renderLink, now, profileColor }) {
 			description: employee.statusDescription
 		})
 	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "manager-office__employee-detail",
-		"data-recipe": "page",
-		children: [
-			/* @__PURE__ */ jsxs("header", {
-				className: "manager-office__employee-header",
-				children: [/* @__PURE__ */ jsx(EmployeeAvatar, {
-					employee,
-					color: profileColor,
-					size: "lg"
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "manager-office__briefing",
-					children: [
-						/* @__PURE__ */ jsx("strong", {
-							className: "sigvelo-truncate",
-							children: employee.name
-						}),
-						/* @__PURE__ */ jsx("small", {
-							className: "sigvelo-truncate",
-							children: employee.email
-						}),
-						/* @__PURE__ */ jsx("p", {
-							className: "manager-office__role",
-							children: employee.role
-						})
-					]
-				})]
-			}),
-			employee.handoffs.length ? /* @__PURE__ */ jsx("section", {
-				className: "manager-office__employee-handoffs",
-				"aria-label": "Waiting on you",
-				children: employee.handoffs.map((handoff) => /* @__PURE__ */ jsx(HandoffCard, {
-					employee,
-					handoff,
-					renderLink,
-					now,
-					showEmployee: false
-				}, handoff.id))
-			}) : null,
-			/* @__PURE__ */ jsxs("div", {
-				className: "manager-office__employee-columns",
-				children: [/* @__PURE__ */ jsxs("section", {
-					className: "manager-office__section",
-					children: [/* @__PURE__ */ jsx("header", {
-						className: "manager-office__section-header",
-						children: /* @__PURE__ */ jsxs("h2", {
-							className: "manager-office__section-title",
-							children: [/* @__PURE__ */ jsx(MessageSquareIcon, {}), "Work"]
-						})
-					}), /* @__PURE__ */ jsx("div", {
-						className: "manager-office__section-content",
-						children: employee.work.length ? /* @__PURE__ */ jsx("ul", {
-							className: "manager-office__work-list sigvelo-stack-list",
-							children: employee.work.map((work) => /* @__PURE__ */ jsx("li", { children: workingSetOf(work).length ? /* @__PURE__ */ jsx(WorkLane, {
-								employee,
-								now,
-								renderLink,
-								work
-							}) : /* @__PURE__ */ jsx(ReviewRow, {
-								employee,
-								now,
-								renderLink,
-								showEmployee: false,
-								work
-							}) }, work.id))
-						}) : /* @__PURE__ */ jsx("p", {
-							className: "manager-office__section-empty",
-							children: "No work yet."
-						})
-					})]
-				}), /* @__PURE__ */ jsxs("aside", {
-					className: "manager-office__employee-aside",
-					children: [/* @__PURE__ */ jsx("section", {
-						className: "manager-office__section",
-						"aria-label": "Routines",
-						children: /* @__PURE__ */ jsxs(Collapsible.Root, {
-							defaultOpen: true,
-							children: [/* @__PURE__ */ jsxs(Button, {
-								render: /* @__PURE__ */ jsx(Collapsible.Trigger, { unstyled: true }),
-								type: "button",
-								variant: "ghost",
-								color: "neutral",
-								size: "sm",
-								className: "manager-office__routine-trigger",
-								children: [/* @__PURE__ */ jsxs("span", {
-									className: "manager-office__identity",
-									children: [/* @__PURE__ */ jsx(CalendarIcon, {}), /* @__PURE__ */ jsx("strong", { children: "Routines" })]
-								}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "sigvelo-disclosure-chevron" })]
-							}), /* @__PURE__ */ jsx(Collapsible.Panel, {
-								unstyled: true,
-								children: employee.routines.length ? /* @__PURE__ */ jsx("ul", {
-									className: "manager-office__routine-list sigvelo-stack-list",
-									children: employee.routines.map((routine) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(LinkButton, {
-										render: renderLink({
-											kind: "routine",
-											employee,
-											routine
-										}),
-										variant: "ghost",
-										color: "neutral",
-										size: "sm",
-										className: "manager-office__routine-link",
-										children: [
-											routine.enabled ? /* @__PURE__ */ jsx(CalendarIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {}),
-											/* @__PURE__ */ jsxs("span", {
-												className: "manager-office__identity",
-												children: [/* @__PURE__ */ jsx("strong", {
-													className: "sigvelo-truncate",
-													children: routine.name
-												}), /* @__PURE__ */ jsx("small", {
-													className: "sigvelo-truncate",
-													children: routineDetail(routine)
-												})]
-											}),
-											/* @__PURE__ */ jsx(ChevronRightIcon, { className: "manager-office__row-chevron" })
-										]
-									}) }, routine.id))
-								}) : /* @__PURE__ */ jsx("p", {
-									className: "manager-office__section-empty",
-									children: "No routines yet."
-								})
-							})]
-						})
-					}), /* @__PURE__ */ jsxs("section", {
-						className: "manager-office__section",
-						children: [/* @__PURE__ */ jsx("header", {
-							className: "manager-office__section-header",
-							children: /* @__PURE__ */ jsxs("h2", {
-								className: "manager-office__section-title",
-								children: [/* @__PURE__ */ jsx(LinkIcon, {}), "Channels"]
-							})
-						}), /* @__PURE__ */ jsx("div", {
-							className: "manager-office__section-content",
-							children: employee.channels.length ? /* @__PURE__ */ jsx("ul", {
-								className: "manager-office__channel-list sigvelo-stack-list",
-								children: employee.channels.map((channel) => /* @__PURE__ */ jsx(ChannelRow, { channel }, channel.id))
-							}) : /* @__PURE__ */ jsx("p", {
-								className: "manager-office__section-empty",
-								children: "Nothing connected yet."
-							})
-						})]
-					})]
-				})]
-			})
-		]
-	});
 }
-/**
-* Multi-employee manager office: inbox of browser waits plus ready work,
-* employee roster, and one employee dossier of work lanes. The consuming app
-* owns authentication, Agent connections, routing, and the selected
-* employee's full work surface.
-*/
-function ManagerOffice({ className, emptyOfficeAction, employees, renderLink, officeActions, renderEmployeeActions, sidebarTogglePlacement = "sidebar", style, view, ...props }) {
-	const titleId = React.useId();
+/** Office data and relative-time boundary; hosts compose their shell and routed content. */
+function ManagerOfficeRoot({ employees, renderLink, render, ref, ...props }) {
 	const [now, setNow] = React.useState(Date.now);
 	React.useEffect(() => {
 		const interval = window.setInterval(() => setNow(Date.now()), 6e4);
 		return () => window.clearInterval(interval);
 	}, []);
-	const selectedEmployee = view.kind === "employee" ? employees.find((employee) => employee.id === view.employeeId) : void 0;
-	const profileColors = rosterProfileColors(employees);
-	const title = view.kind === "attention" ? "Waiting on you" : selectedEmployee?.name ?? "Employee";
-	const mainLabel = view.kind === "attention" ? "Waiting on you" : `${selectedEmployee?.name ?? "Employee"} details`;
-	return /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsx(ResponsiveSidebarShell, {
-		className: cx("manager-office", className),
-		style,
-		sidebarLabel: "employees",
-		sidebarTogglePlacement,
-		showMainLabel: "Show workforce",
-		sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ManagerOfficeSidebar, {
-			closeSidebarOnCompact,
-			employees,
-			renderLink,
-			officeActions,
-			selectedEmployeeId: view.kind === "employee" ? view.employeeId : null
-		}),
-		bar: {
-			label: "Workforce controls",
-			titleRender: /* @__PURE__ */ jsx("h1", {
-				id: titleId,
-				children: title
-			}),
-			title,
-			actions: selectedEmployee && isConnected(selectedEmployee) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsx(AppTopBar.Link, {
-					label: `Start new work with ${selectedEmployee.name}`,
-					tooltip: "New work",
-					render: renderLink({
-						kind: "new-work",
-						employee: selectedEmployee
-					}),
-					children: /* @__PURE__ */ jsx(PencilIcon, {})
-				}),
-				/* @__PURE__ */ jsx(AppTopBar.Link, {
-					label: `Open ${selectedEmployee.name} workspace`,
-					tooltip: "Workspace",
-					render: renderLink({
-						kind: "workspace",
-						employee: selectedEmployee
-					}),
-					children: /* @__PURE__ */ jsx(FolderIcon, {})
-				}),
-				renderEmployeeActions?.(selectedEmployee)
-			] }) : void 0
-		},
-		...props,
-		children: /* @__PURE__ */ jsx("main", {
-			className: "manager-office__main",
-			"aria-label": mainLabel,
-			children: !employees.length ? /* @__PURE__ */ jsx(EmptyState, {
-				icon: /* @__PURE__ */ jsx(PlusIcon, {}),
-				title: "Add your first employee",
-				description: "Connect another profile to manage it here.",
-				children: emptyOfficeAction
-			}) : view.kind === "attention" ? /* @__PURE__ */ jsx(AttentionView, {
-				employees,
-				renderLink,
-				now
-			}) : selectedEmployee ? /* @__PURE__ */ jsx(EmployeeDetail, {
-				employee: selectedEmployee,
-				renderLink,
-				now,
-				profileColor: profileColors.get(selectedEmployee.id)
-			}) : /* @__PURE__ */ jsx(EmptyState, {
-				icon: /* @__PURE__ */ jsx(WarningIcon, {}),
-				title: "Employee unavailable",
-				description: "Choose another employee from the roster."
-			})
-		})
-	}) });
+	const profileColors = React.useMemo(() => rosterProfileColors(employees), [employees]);
+	const value = React.useMemo(() => ({
+		employees,
+		renderLink,
+		now,
+		profileColors
+	}), [
+		employees,
+		renderLink,
+		now,
+		profileColors
+	]);
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({ className: "manager-office" }, props)
+	});
+	return /* @__PURE__ */ jsx(OfficeContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(Tooltip.Provider, { children: element })
+	});
 }
+const ManagerOffice = {
+	Root: ManagerOfficeRoot,
+	Main: ManagerOfficeMain,
+	Attention: ManagerOfficeAttention,
+	Employee: ManagerOfficeEmployeeRoot,
+	EmployeeHeader: ManagerOfficeEmployeeHeader,
+	Handoffs: ManagerOfficeHandoffs,
+	Columns: ManagerOfficeColumns,
+	Aside: ManagerOfficeAside,
+	Work: ManagerOfficeWorkSection,
+	Routines: ManagerOfficeRoutines,
+	Channels: ManagerOfficeChannels,
+	ConnectionState: ManagerOfficeConnectionState
+};
 //#endregion
 export { ManagerOffice, ManagerOfficeSidebar, ManagerOfficeSidebarAlert };