@mcp-b/react-components 0.46.1 → 0.46.3

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

@@ -15,9 +15,9 @@ import { t as CopyButton } from "../../copy-button-D7ySsRRo.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "../ai-sdk/Context.js";
 import { VirtualMessageScroller } from "../ai-sdk/MessageScrollerVirtual.js";
 import { QueueItem, QueueItemActions, QueueItemContent } from "../ai-sdk/Queue.js";
-import { AgentEventRow, getAgentEvent } from "./AgentEvent.js";
 import { EmptyState } from "../foundations/EmptyState.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
+import { AgentEventRow, getAgentEvent } from "./AgentEvent.js";
 import { PromptInputApproval, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals } from "./PromptInputApproval.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -16,19 +16,37 @@ const BROWSER_LIVE_SCREEN_NEGOTIATION_TIMEOUT_MS = 1e4;
 */
 function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, protocol, getIceServers, label = "Employee browser", controlLabel = "Control employee browser", tabs = [], requestedTabId }) {
 	const video = useRef(null);
+	const input = useRef(null);
+	const [videoElement, setVideoElement] = useState(null);
 	const track = useRef(null);
 	const attachVideo = useCallback((element) => {
 		video.current = element;
 		if (element) element.srcObject = track.current;
+		setVideoElement(element);
 	}, []);
 	const showTrack = useCallback((stream) => {
 		track.current = stream;
-		if (video.current) video.current.srcObject = stream;
+		if (video.current) {
+			video.current.srcObject = stream;
+			syncInputBounds();
+		}
 	}, []);
 	const channel = useRef(null);
 	const geometry = useRef(null);
 	const [phase, setPhase] = useState("connecting");
 	const [failure, setFailure] = useState(null);
+	const syncVideoInputBounds = useEffectEvent(() => syncInputBounds());
+	useEffect(() => {
+		if (!videoElement) return;
+		videoElement.addEventListener("resize", syncVideoInputBounds);
+		const observer = new ResizeObserver(syncVideoInputBounds);
+		observer.observe(videoElement);
+		syncVideoInputBounds();
+		return () => {
+			videoElement.removeEventListener("resize", syncVideoInputBounds);
+			observer.disconnect();
+		};
+	}, [videoElement]);
 	const sendSignal = useEffectEvent((viewerId, payload) => sendHostSignal({
 		viewerId,
 		payload
@@ -46,7 +64,6 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 		}));
 	});
 	const dataChannelLabel = protocol.dataChannelLabel;
-	const input = useRef(null);
 	const handleWheel = useEffectEvent((event) => {
 		event.preventDefault();
 		const point = toPagePoint(event);
@@ -60,14 +77,27 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 			modifiers: modifiers(event)
 		}]);
 	});
+	const [keyboardOpen, setKeyboardOpen] = useState(false);
+	const touch = useRef(null);
+	const mousePress = useRef(null);
+	function cancelPointerState() {
+		const activeTouch = touch.current;
+		const activeMouse = mousePress.current;
+		if (activeTouch) clearTimeout(activeTouch.holdTimer);
+		touch.current = null;
+		mousePress.current = null;
+		const releases = [];
+		if (activeTouch?.mode === "drag") releases.push(release(activeTouch.lastPage, "left", 0, 1, 0));
+		if (activeMouse?.pressed) releases.push(release(activeMouse.lastPage, activeMouse.button, 0, activeMouse.clickCount, activeMouse.modifiers));
+		sendInput(releases);
+	}
 	const attachInput = useCallback((element) => {
+		if (input.current !== element) cancelPointerState();
 		input.current?.removeEventListener("wheel", handleWheel);
 		input.current = element;
 		element?.addEventListener("wheel", handleWheel, { passive: false });
+		syncInputBounds();
 	}, []);
-	const [keyboardOpen, setKeyboardOpen] = useState(false);
-	const touch = useRef(null);
-	const mousePress = useRef(null);
 	const [streamed, setStreamed] = useState(null);
 	useEffect(() => {
 		let disposed = false;
@@ -90,6 +120,7 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 			const closing = connection;
 			const closingViewerId = viewerId;
 			connection = void 0;
+			cancelPointerState();
 			channel.current = null;
 			geometry.current = null;
 			if (!disposed) setStreamed(null);
@@ -188,14 +219,19 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 				const status = parseStatus(event.data);
 				if (!status) return;
 				if (status.kind === "idle") {
+					cancelPointerState();
 					geometry.current = null;
+					syncInputBounds();
 					setFailure(null);
 					setPhase("idle");
 					setStreamed(null);
 					return;
 				}
 				if (status.kind === "streaming") {
+					const previous = geometry.current;
+					if (previous?.tabId !== status.tabId || previous.streamGeneration !== status.streamGeneration) cancelPointerState();
 					geometry.current = status;
+					syncInputBounds();
 					setFailure(null);
 					setPhase("streaming");
 					setStreamed(status);
@@ -275,11 +311,29 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 			renderedTop: bounds.top + (bounds.height - renderedHeight) / 2,
 			renderedWidth,
 			renderedHeight,
-			zoomX: renderedWidth / status.metadata.deviceWidth,
-			zoomY: renderedHeight / status.metadata.deviceHeight,
-			offsetTop: status.metadata.offsetTop
+			zoom: renderedWidth / status.metadata.deviceWidth
 		};
 	}
+	function syncInputBounds() {
+		const element = input.current;
+		if (!element) return;
+		const view = currentViewGeometry();
+		const surface = element.parentElement;
+		if (!view || !surface) {
+			element.style.removeProperty("inset");
+			element.style.removeProperty("left");
+			element.style.removeProperty("top");
+			element.style.removeProperty("width");
+			element.style.removeProperty("height");
+			return;
+		}
+		const bounds = surface.getBoundingClientRect();
+		element.style.inset = "auto";
+		element.style.left = `${view.renderedLeft - bounds.left}px`;
+		element.style.top = `${view.renderedTop - bounds.top}px`;
+		element.style.width = `${view.renderedWidth}px`;
+		element.style.height = `${view.renderedHeight}px`;
+	}
 	function toPagePoint(event) {
 		const view = currentViewGeometry();
 		return view ? pointWithin(view, event) : null;
@@ -303,7 +357,7 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 			lastPage: startPage,
 			holdTimer: setTimeout(() => {
 				gesture.mode = "drag";
-				sendInput([move(startPage, 0), press(startPage)]);
+				sendInput([move(startPage, 0, 0), press(startPage, "left", 1, 1, 0)]);
 			}, TOUCH_HOLD_MS)
 		};
 		touch.current = gesture;
@@ -322,8 +376,8 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 			gesture.mode = "scroll";
 		}
 		if (gesture.mode === "scroll") {
-			const deltaX = (gesture.lastClient.x - client.x) / gesture.view.zoomX;
-			const deltaY = (gesture.lastClient.y - client.y) / gesture.view.zoomY;
+			const deltaX = (gesture.lastClient.x - client.x) / gesture.view.zoom;
+			const deltaY = (gesture.lastClient.y - client.y) / gesture.view.zoom;
 			gesture.lastClient = client;
 			if (deltaX !== 0 || deltaY !== 0) sendInput([{
 				kind: "mouse",
@@ -337,7 +391,7 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 		const point = pointWithin(gesture.view, event);
 		if (!point) return;
 		gesture.lastPage = point;
-		sendInput([move(point, 1)]);
+		sendInput([move(point, 1, 0)]);
 	}
 	function endTouch(event, cancelled) {
 		const gesture = touch.current;
@@ -348,13 +402,21 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 		if (gesture.mode === "pending") {
 			if (cancelled) return;
 			sendInput([
-				move(gesture.startPage, 0),
-				press(gesture.startPage),
-				release(gesture.startPage)
+				move(gesture.startPage, 0, 0),
+				press(gesture.startPage, "left", 1, 1, 0),
+				release(gesture.startPage, "left", 0, 1, 0)
 			]);
 			return;
 		}
-		if (gesture.mode === "drag") sendInput([release(gesture.lastPage)]);
+		if (gesture.mode === "drag") sendInput([release(gesture.lastPage, "left", 0, 1, 0)]);
+	}
+	function endMouse(event) {
+		const gesture = mousePress.current;
+		if (!gesture || event.pointerId !== gesture.pointerId) return;
+		const point = toPagePoint(event) ?? gesture.lastPage;
+		mousePress.current = null;
+		if (!gesture.pressed) return;
+		sendInput([release(point, gesture.button, event.buttons, gesture.clickCount, modifiers(event))]);
 	}
 	const notice = failure ?? (phase === "streaming" ? void 0 : PHASE_TEXT[phase]);
 	const streamedTab = streamed ? tabs.find((tab) => tab.tabId === streamed.tabId) : void 0;
@@ -425,7 +487,7 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 				onKeyDown: (event) => {
 					event.currentTarget.removeAttribute("data-pointer-focus");
 					if (event.nativeEvent.isComposing) return;
-					if (event.key === "Enter") event.preventDefault();
+					if (event.key === "Enter" || event.key === "Tab") event.preventDefault();
 					sendInput([{
 						kind: "key",
 						type: "keyDown",
@@ -459,6 +521,15 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 					event.preventDefault();
 				},
 				onBlur: (event) => event.currentTarget.removeAttribute("data-pointer-focus"),
+				onMouseDown: (event) => {
+					const gesture = mousePress.current;
+					if (!gesture || gesture.pressed) return;
+					gesture.button = mouseButton(event.button);
+					gesture.clickCount = event.detail > 0 ? event.detail : 1;
+					gesture.modifiers = modifiers(event);
+					gesture.pressed = true;
+					sendInput([press(gesture.lastPage, gesture.button, event.buttons, gesture.clickCount, gesture.modifiers)]);
+				},
 				onPointerDown: (event) => {
 					event.currentTarget.dataset.pointerFocus = "";
 					if (event.pointerType === "touch") {
@@ -467,9 +538,20 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 					}
 					const point = toPagePoint(event);
 					if (point) {
+						const button = mouseButton(event.button);
+						const clickCount = event.detail > 0 ? event.detail : 1;
+						const modifierMask = modifiers(event);
+						const pressed = event.pointerType !== "mouse";
 						event.currentTarget.setPointerCapture(event.pointerId);
-						mousePress.current = point;
-						sendInput([press(point)]);
+						mousePress.current = {
+							button,
+							clickCount,
+							lastPage: point,
+							modifiers: modifierMask,
+							pointerId: event.pointerId,
+							pressed
+						};
+						if (pressed) sendInput([press(point, button, event.buttons, clickCount, modifierMask)]);
 					}
 				},
 				onPointerMove: (event) => {
@@ -479,8 +561,12 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 					}
 					const point = toPagePoint(event);
 					if (point) {
-						if (mousePress.current) mousePress.current = point;
-						sendInput([move(point, event.buttons)]);
+						const modifierMask = modifiers(event);
+						if (mousePress.current) {
+							mousePress.current.lastPage = point;
+							mousePress.current.modifiers = modifierMask;
+						}
+						sendInput([move(point, event.buttons, modifierMask)]);
 					}
 				},
 				onPointerUp: (event) => {
@@ -488,9 +574,7 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 						endTouch(event, false);
 						return;
 					}
-					const point = toPagePoint(event) ?? mousePress.current;
-					mousePress.current = null;
-					if (point) sendInput([release(point)]);
+					endMouse(event);
 					if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
 				},
 				onPointerCancel: (event) => {
@@ -498,9 +582,14 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 						endTouch(event, true);
 						return;
 					}
-					const point = toPagePoint(event) ?? mousePress.current;
-					mousePress.current = null;
-					if (point) sendInput([release(point)]);
+					endMouse(event);
+				},
+				onLostPointerCapture: (event) => {
+					if (event.pointerType === "touch") {
+						endTouch(event, true);
+						return;
+					}
+					endMouse(event);
 				}
 			}),
 			/* @__PURE__ */ jsx(Button, {
@@ -590,36 +679,49 @@ function normalizeOpenUrl(raw) {
 	}
 	return null;
 }
-const press = (p) => ({
+const press = (p, button, buttons, clickCount, modifierMask) => ({
 	kind: "mouse",
 	type: "mousePressed",
 	...p,
-	button: "left",
-	buttons: 1,
-	clickCount: 1
+	button,
+	buttons,
+	clickCount,
+	modifiers: modifierMask
 });
-const release = (p) => ({
+const release = (p, button, buttons, clickCount, modifierMask) => ({
 	kind: "mouse",
 	type: "mouseReleased",
 	...p,
-	button: "left",
-	buttons: 0,
-	clickCount: 1
+	button,
+	buttons,
+	clickCount,
+	modifiers: modifierMask
 });
-const move = (p, buttons) => ({
+const move = (p, buttons, modifierMask) => ({
 	kind: "mouse",
 	type: "mouseMoved",
 	...p,
-	buttons
+	buttons,
+	modifiers: modifierMask
 });
+function mouseButton(button) {
+	return MOUSE_BUTTONS[button] ?? "none";
+}
+const MOUSE_BUTTONS = {
+	0: "left",
+	1: "middle",
+	2: "right",
+	3: "back",
+	4: "forward"
+};
 /** A client point in the picture's own page coordinates, or null if outside it. */
 function pointWithin(view, event) {
 	const renderedX = event.clientX - view.renderedLeft;
 	const renderedY = event.clientY - view.renderedTop;
 	if (renderedX < 0 || renderedY < 0 || renderedX > view.renderedWidth || renderedY > view.renderedHeight) return null;
 	return {
-		x: renderedX / view.zoomX,
-		y: renderedY / view.zoomY - view.offsetTop
+		x: renderedX / view.zoom,
+		y: renderedY / view.zoom
 	};
 }
 /** CDP's modifier bitmask: alt, ctrl, meta, shift. */

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

@@ -2,8 +2,8 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { B as PlayIcon, R as PauseIcon } from "../../icons-BNEY4gO5.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { i as formatClock } from "../../format-COCyV98Z.js";
-import { Slider } from "../foundations/Slider.js";
 import { EmptyState } from "../foundations/EmptyState.js";
+import { Slider } from "../foundations/Slider.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Replayer } from "@rrweb/replay";

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

@@ -10,11 +10,11 @@ import { Avatar } from "../foundations/Avatar.js";
 import { AppIcon } from "../foundations/AppIcon.js";
 import { n as findCatalogMcpServerCard } from "../../mcp-server-7NR24ASj.js";
 import { Select } from "../foundations/Select.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
-import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.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 * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/chrome-profile-colors.ts
@@ -938,10 +938,14 @@ function DashboardCard({ card, collapsed, color, index, now, onToggleCollapsed,
 	});
 }
 function DashboardFilterMenu({ label, onToggle, options, selected }) {
-	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
+	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		color: "neutral",
+		size: "sm",
 		"aria-label": `${label} filter`,
 		className: "manager-office__filter-trigger",
 		"data-active": selected.size || void 0,
+		render: /* @__PURE__ */ jsx(Menu.Trigger, { unstyled: true }),
 		children: [
 			/* @__PURE__ */ jsx("span", { children: label }),
 			selected.size ? /* @__PURE__ */ jsx("strong", { children: selected.size }) : null,
@@ -961,10 +965,12 @@ function DashboardFilterMenu({ label, onToggle, options, selected }) {
 	}) })] });
 }
 function AssignWorkMenu({ employees, profileColors, renderLink }) {
-	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
+	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Button, {
+		size: "sm",
 		className: "manager-office__assignment-trigger",
 		disabled: !employees.length,
-		children: [/* @__PURE__ */ jsx("span", { children: "Assign work" }), /* @__PURE__ */ jsx(ChevronDownIcon, {})]
+		render: /* @__PURE__ */ jsx(Menu.Trigger, { unstyled: true }),
+		children: ["Assign work", /* @__PURE__ */ jsx(ChevronDownIcon, {})]
 	}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 		align: "end",
 		sideOffset: 6,

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

@@ -1,2 +1,2 @@
-import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-CV0xWmL4.js";
+import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-qztQ6Clo.js";
 export { ThinkChat, ThinkChatMessages, ThinkChatProvider, ThinkChatRoot, thinkPendingExecutionApprovalsQueryOptions, useThinkChat, useThinkPendingExecutionApprovals };

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

@@ -5,8 +5,8 @@ import { IconButton } from "../foundations/IconButton.js";
 import { Menu } from "../foundations/Menu.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { EmptyState } from "../foundations/EmptyState.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { getThinkExecutionRunAccessibleName, getThinkExecutionRunId, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionRunSummary } from "./ThinkExecutionStatus.js";
 import { ThinkExecutionDetail } from "./ThinkExecutionDetail.js";

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

@@ -6,7 +6,7 @@ import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { ResizableSidePanel } from "../general-purpose/ResizableSidePanel.js";
 import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
 import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../../WorkspaceLink-DtH66bAY.js";
-import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-CV0xWmL4.js";
+import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-qztQ6Clo.js";
 import { McpPluginCatalog } from "./McpPluginCatalog.js";
 import { ThinkFullAppViewSwitch } from "./ThinkFullAppViewSwitch.js";
 import { ThinkThreadStatusIndicators } from "./ThinkThreadPicker.js";

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

@@ -1,6 +1,6 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkFullAppViewSwitch.tsx

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

@@ -4,9 +4,9 @@ import { buttonVariants } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { t as capitalize } from "../../format-COCyV98Z.js";
 import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
-import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import { EmptyState } from "../foundations/EmptyState.js";
 import { SearchField } from "../foundations/SearchField.js";
+import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -6,12 +6,12 @@ import { Form } from "../foundations/Form.js";
 import { Textarea } from "../foundations/Textarea.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { Select } from "../foundations/Select.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { Checkbox } from "../foundations/Checkbox.js";
-import { Fieldset } from "../foundations/Fieldset.js";
 import { CheckboxGroup } from "../foundations/CheckboxGroup.js";
 import { Combobox } from "../foundations/Combobox.js";
+import { Fieldset } from "../foundations/Fieldset.js";
 import { NumberField } from "../foundations/NumberField.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkRoutineForm.tsx

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

@@ -3,10 +3,10 @@ import { $ as TrashIcon, B as PlayIcon, q as SpinnerIcon, z as PencilIcon } from
 import { buttonVariants } from "../foundations/Button.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { n as isPlainPrimaryLinkActivation, t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { AlertDialog } from "../foundations/AlertDialog.js";
-import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
 import { EmptyState } from "../foundations/EmptyState.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
+import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
 import { ThinkRoutineBrowser } from "./ThinkRoutineBrowser.js";
 import { ThinkRoutineDetail } from "./ThinkRoutineDetail.js";
 import * as React from "react";

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

@@ -9,15 +9,15 @@ import { AppIcon } from "../foundations/AppIcon.js";
 import { n as findCatalogMcpServerCard, t as McpServerIcon } from "../../mcp-server-7NR24ASj.js";
 import { DescriptionList } from "../foundations/DescriptionList.js";
 import { ChatGptSignInScreen } from "../extension/ChatGptSignInScreen.js";
+import { EmptyState } from "../foundations/EmptyState.js";
+import { Switch } from "../foundations/Switch.js";
+import { useTheme } from "../foundations/ThemeProvider.js";
+import "../foundations/icons.js";
 import { ActionGuide } from "../general-purpose/ActionGuide.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
-import { Switch } from "../foundations/Switch.js";
 import { t as SetupChecklistAction } from "../../SetupChecklist-DyPZWzK2.js";
-import { useTheme } from "../foundations/ThemeProvider.js";
 import { NaniteMark } from "../nanites/NaniteScene.js";
 import { SubagentRunLabel } from "./SubagentRunIndicator.js";
-import { EmptyState } from "../foundations/EmptyState.js";
-import "../foundations/icons.js";
 import { McpServerPickerAction, McpServerPickerItems } from "./McpServerPicker.js";
 import { getThinkExecutionRunId } from "./ThinkExecutionRun.js";
 import { ThinkThreadPicker, summarizeThinkThreads } from "./ThinkThreadPicker.js";

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

@@ -1,5 +1,5 @@
-import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../../FileTree-CAXWXH63.js";
 import { SearchField } from "../foundations/SearchField.js";
+import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../../FileTree-CAXWXH63.js";
 import { WorkspaceHeader } from "./WorkspaceHeader.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -2,8 +2,8 @@ import { L as PaperclipIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
 import { Card, CardFooter, CardHeader, CardTitle } from "../foundations/Card.js";
 import { Popover } from "../foundations/Popover.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { EmptyState } from "../foundations/EmptyState.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/WorkspaceMountManager.tsx

package/dist/components/ai-sdk/PromptInput.js

@@ -1042,7 +1042,7 @@ function PromptInputCommandComposer({ commands, mentionCommands, value, onValueC
 			...command.keywords ?? []
 		].filter((term) => Boolean(term)).some((term) => term.toLocaleLowerCase().includes(normalizedQuery));
 	});
-	const hasTriggeredCatalog = trigger === "/" ? commands.length > 0 : trigger === "@" && mentionCommands !== void 0;
+	const hasTriggeredCatalog = trigger === "/" ? commands.length > 0 && (match?.triggerIndex === 0 || filtered.length > 0) : trigger === "@" && mentionCommands !== void 0;
 	const open = Boolean(match && hasTriggeredCatalog) && dismissedValue !== value;
 	const groups = Array.from(new Set(filtered.map((command) => command.group ?? ""))).map((label) => ({
 		label,

package/dist/components/foundations/ToggleGroup.d.ts

@@ -1,7 +1,7 @@
 import { r as ToggleVariantsOptions } from "../../Toggle-DLrIf5YH.js";
 import * as React from "react";
-import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 
 //#region src/components/foundations/ToggleGroup.d.ts
 type ToggleGroupSize = ToggleVariantsOptions["size"];

package/dist/components/foundations/ToggleGroup.js

@@ -3,8 +3,8 @@ import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { toggleVariants } from "./Toggle.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 //#region src/components/foundations/ToggleGroup.tsx
 /**
 * Tracks the pressed item's box so the segmented thumb can slide to it instead

package/dist/components/general-purpose/PricingConfirmationDialog.js

@@ -1,6 +1,6 @@
 import { Button } from "../foundations/Button.js";
-import { getPlanPrice, getPlanYearlySavings } from "./Pricing.js";
 import { AlertDialog } from "../foundations/AlertDialog.js";
+import { getPlanPrice, getPlanYearlySavings } from "./Pricing.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/PricingConfirmationDialog.tsx
 function getActionLabel(action) {

package/dist/components/general-purpose/PricingUsageCalculator.js

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Card } from "../foundations/Card.js";
 import { Separator } from "../foundations/Separator.js";
-import { formatPricingUsage, getUsagePrice } from "./Pricing.js";
 import { Progress } from "../foundations/Progress.js";
 import { Slider } from "../foundations/Slider.js";
+import { formatPricingUsage, getUsagePrice } from "./Pricing.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/PricingUsageCalculator.tsx

package/dist/components/nanites/AgentToolDetail.js

@@ -1,11 +1,11 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { r as ArrowLeftIcon } from "../../icons-BNEY4gO5.js";
+import { TransitionSurface } from "../foundations/TransitionSurface.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
 import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
 import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
-import { TransitionSurface } from "../foundations/TransitionSurface.js";
-import { t as ThinkChat } from "../../ThinkChat-CV0xWmL4.js";
+import { t as ThinkChat } from "../../ThinkChat-qztQ6Clo.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentChat } from "@cloudflare/think/react";

package/dist/styles/manager-office.css

@@ -12,12 +12,6 @@
   background: var(--sigvelo-color-surface);
 }
 
-.manager-office--dashboard .app-top-bar__title {
-  font-size: var(--sigvelo-text-base);
-  font-weight: var(--sigvelo-font-weight-bold);
-  line-height: var(--sigvelo-text-base-leading);
-}
-
 .manager-office__dashboard {
   min-inline-size: 0;
   min-block-size: 0;
@@ -180,24 +174,6 @@
   background: transparent;
 }
 
-.manager-office__add-employee {
-  min-inline-size: var(--sigvelo-control-height-md);
-  min-block-size: var(--sigvelo-control-height-md);
-  padding: var(--sigvelo-spacing-1);
-  border: 0;
-  border-radius: var(--sigvelo-radius-md);
-  background: transparent;
-}
-
-.manager-office__add-employee:hover:not([data-disabled]) {
-  background: var(--sigvelo-color-neutral-bg-subtle);
-}
-
-.manager-office__add-employee > svg {
-  inline-size: var(--sigvelo-density-compact-control-icon-size);
-  block-size: var(--sigvelo-density-compact-control-icon-size);
-}
-
 .manager-office__filters-main {
   flex: 1;
   min-inline-size: 0;
@@ -240,14 +216,8 @@
 }
 
 .manager-office__filter-trigger {
-  min-block-size: var(--sigvelo-control-height-md);
   flex: none;
-  display: inline-flex;
-  align-items: center;
   gap: var(--sigvelo-spacing-1);
-  border-color: var(--sigvelo-color-neutral-border-muted);
-  background: var(--sigvelo-color-surface);
-  font-size: var(--sigvelo-text-xs);
 }
 
 .manager-office__filter-trigger[data-active] {
@@ -260,12 +230,6 @@
   font-size: var(--sigvelo-text-2xs);
 }
 
-.manager-office__filter-trigger > svg {
-  inline-size: var(--sigvelo-density-compact-control-icon-size);
-  block-size: var(--sigvelo-density-compact-control-icon-size);
-  color: var(--sigvelo-color-text-muted);
-}
-
 .manager-office__filter-clear {
   flex: none;
   gap: var(--sigvelo-spacing-1);
@@ -296,13 +260,8 @@
 
 .manager-office__analytics {
   min-inline-size: 0;
-  padding: var(--sigvelo-spacing-4);
   display: grid;
-  gap: var(--sigvelo-spacing-3);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-lg);
-  background: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 38%);
+  gap: var(--sigvelo-layout-gap);
 }
 
 .manager-office__analytics-header {
@@ -315,9 +274,6 @@
 
 .manager-office__analytics-header h2 {
   margin: 0;
-}
-
-.manager-office__analytics-header h2 {
   font-size: var(--sigvelo-text-base);
   line-height: var(--sigvelo-text-base-leading);
 }
@@ -357,15 +313,11 @@
 
 .manager-office__analytics-series {
   min-inline-size: 0;
-  padding: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-3) 0;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   align-content: start;
   gap: var(--sigvelo-spacing-2);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-  background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-viz-series-1);
 }
 
@@ -492,34 +444,10 @@
 }
 
 .manager-office__assignment-trigger {
-  min-block-size: var(--sigvelo-control-height-md);
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--sigvelo-spacing-2);
-  border-color: var(--sigvelo-color-primary-bg);
-  background: var(--sigvelo-color-primary-bg);
-  color: var(--sigvelo-color-primary-text-on-bg);
-  font-size: var(--sigvelo-text-xs);
+  flex: none;
   white-space: nowrap;
 }
 
-.manager-office__assignment-trigger > svg {
-  inline-size: var(--sigvelo-density-compact-control-icon-size);
-  block-size: var(--sigvelo-density-compact-control-icon-size);
-}
-
-.manager-office__assignment-trigger > svg:last-child {
-}
-
-.manager-office__assignment-trigger:hover:not([data-disabled]) {
-  background: var(--sigvelo-color-primary-bg-hover);
-}
-
-.manager-office__assignment-trigger:active:not([data-disabled]) {
-  background: var(--sigvelo-color-primary-bg-press);
-}
-
 .manager-office__assignment-popup {
   inline-size: min(22rem, calc(100vw - 2 * var(--sigvelo-spacing-4)));
   max-block-size: 24rem;
@@ -696,7 +624,6 @@
   border-radius: var(--sigvelo-radius-md);
   background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
-  box-shadow: var(--sigvelo-elevation-raised);
 }
 
 .manager-office__dashboard-card-header {
@@ -709,7 +636,6 @@
 
 .manager-office__dashboard-card[data-collapsed] {
   gap: 0;
-  box-shadow: none;
 }
 
 .manager-office__dashboard-card-owner,
@@ -765,10 +691,10 @@
 }
 
 .manager-office__browser-chrome {
-  block-size: 1.45rem;
+  block-size: var(--sigvelo-spacing-6);
   padding-inline: var(--sigvelo-spacing-2);
   display: grid;
-  grid-template-columns: repeat(3, 0.35rem) minmax(0, 1fr);
+  grid-template-columns: repeat(3, var(--sigvelo-spacing-1-5)) minmax(0, 1fr);
   align-items: center;
   gap: var(--sigvelo-spacing-1);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -777,8 +703,8 @@
 }
 
 .manager-office__browser-chrome > span {
-  inline-size: 0.35rem;
-  block-size: 0.35rem;
+  inline-size: var(--sigvelo-spacing-1-5);
+  block-size: var(--sigvelo-spacing-1-5);
   border-radius: 50%;
   background: var(--sigvelo-color-neutral-border);
 }
@@ -789,14 +715,15 @@
   min-inline-size: 0;
   overflow: hidden;
   color: var(--sigvelo-color-text-subtle);
-  font-size: 0.55em;
+  font-size: var(--sigvelo-text-2xs);
+  line-height: var(--sigvelo-text-2xs-leading);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .manager-office__browser-page {
   position: absolute;
-  inset: 1.45rem 0 0;
+  inset: var(--sigvelo-spacing-6) 0 0;
   padding: var(--sigvelo-spacing-3);
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
@@ -809,8 +736,8 @@
 }
 
 .manager-office__browser-page-mark {
-  inline-size: 1.35rem;
-  block-size: 1.35rem;
+  inline-size: var(--sigvelo-spacing-5);
+  block-size: var(--sigvelo-spacing-5);
   border-radius: var(--sigvelo-radius-sm);
   background: var(--sigvelo-color-primary-bg);
 }
@@ -818,7 +745,7 @@
   min-inline-size: 0;
   display: grid;
   align-content: start;
-  gap: 2px;
+  gap: var(--sigvelo-spacing-0-5);
 }
 .manager-office__browser-page-copy strong,
 .manager-office__browser-page-copy small {
@@ -827,13 +754,13 @@
   white-space: nowrap;
 }
 .manager-office__browser-page-copy strong {
-  font-size: 0.68em;
-  line-height: var(--sigvelo-leading-tight);
+  font-size: var(--sigvelo-text-2xs);
+  line-height: var(--sigvelo-text-2xs-leading);
 }
 .manager-office__browser-page-copy small {
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.52em;
-  line-height: var(--sigvelo-leading-tight);
+  font-size: var(--sigvelo-text-2xs);
+  line-height: var(--sigvelo-text-2xs-leading);
 }
 .manager-office__browser-page-lines {
   grid-column: 1 / -1;
@@ -857,11 +784,11 @@
   position: absolute;
   inset-inline-end: 22%;
   inset-block-end: 22%;
-  inline-size: 0.55rem;
-  block-size: 0.75rem;
+  inline-size: var(--sigvelo-spacing-2-5);
+  block-size: var(--sigvelo-spacing-3);
   background: var(--sigvelo-color-text);
   clip-path: polygon(0 0, 100% 70%, 58% 72%, 42% 100%);
-  animation: manager-office-browser-cursor 2.8s ease-in-out infinite;
+  animation: manager-office-browser-cursor 2.8s var(--sigvelo-ease-standard) infinite;
 }
 @keyframes manager-office-browser-cursor {
   0%,
@@ -880,12 +807,13 @@
   align-items: center;
   gap: var(--sigvelo-spacing-1);
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.58em;
+  font-size: var(--sigvelo-text-2xs);
   font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-2xs-leading);
 }
 .manager-office__browser-state > svg {
-  inline-size: 0.65rem;
-  block-size: 0.65rem;
+  inline-size: var(--sigvelo-control-icon-size-xs);
+  block-size: var(--sigvelo-control-icon-size-xs);
 }
 .manager-office__browser-preview[data-lane="working"] .manager-office__browser-state {
   color: var(--sigvelo-color-primary-text);
@@ -954,9 +882,6 @@
   .manager-office__filters-main {
     flex: none;
   }
-  .manager-office__analytics {
-    padding: var(--sigvelo-spacing-3);
-  }
   .manager-office__analytics-header {
     align-items: stretch;
     flex-direction: column;
@@ -993,10 +918,6 @@
 @media (width <= 38rem) {
   .manager-office__assignment-trigger {
     inline-size: auto;
-    min-block-size: var(--sigvelo-density-compact-control-height);
-    padding-inline: var(--sigvelo-spacing-2);
-    gap: var(--sigvelo-spacing-1);
-    font-size: var(--sigvelo-text-xs);
   }
 }
 
@@ -1078,7 +999,7 @@
 }
 
 .manager-office__employee-nav {
-  --manager-office-roster-scrollbar-size: 4px;
+  --manager-office-roster-scrollbar-size: var(--sigvelo-spacing-1);
   min-inline-size: 0;
   margin: 0;
   padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
@@ -1253,8 +1174,8 @@
   position: absolute;
   inset-inline-start: 50%;
   inset-block-end: -1px;
-  inline-size: 1.125rem;
-  block-size: 2px;
+  inline-size: var(--sigvelo-spacing-4);
+  block-size: var(--sigvelo-spacing-0-5);
   border-radius: var(--sigvelo-radius-full);
   background: var(--sigvelo-color-text);
   content: "";
@@ -1334,13 +1255,13 @@
   position: absolute;
   inset-inline-end: -1px;
   inset-block-end: -1px;
-  inline-size: 15px;
-  block-size: 15px;
+  inline-size: var(--sigvelo-spacing-4);
+  block-size: var(--sigvelo-spacing-4);
   display: grid;
   place-items: center;
   border-radius: var(--sigvelo-radius-xs);
   background: var(--sigvelo-color-surface);
-  box-shadow: 0 0 0 1.5px var(--sigvelo-color-surface);
+  box-shadow: 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-surface);
 }
 
 .manager-office__identity {
@@ -1634,25 +1555,24 @@
 }
 
 .manager-office__nav-status > svg {
-  inline-size: 11px;
-  block-size: 11px;
-  stroke-width: 2.35;
+  inline-size: var(--sigvelo-control-icon-size-xs);
+  block-size: var(--sigvelo-control-icon-size-xs);
 }
 
 .manager-office__nav-status:is([data-status="needs-you"], [data-status="issue"]) {
-  color: light-dark(#b3261e, #ff8a80);
+  color: var(--sigvelo-color-danger-text);
 }
 
 .manager-office__nav-status[data-status="unavailable"] {
-  color: light-dark(#7c2d12, #fb923c);
+  color: var(--sigvelo-color-warning-text);
 }
 
 .manager-office__nav-status[data-status="idle"] {
-  color: light-dark(#087f5b, #4fd1a1);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .manager-office__nav-status[data-status="offline"] {
-  color: light-dark(#667085, #a7afbe);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .manager-office__thread-status[data-status="error"] {
@@ -1660,7 +1580,7 @@
 }
 
 .manager-office__nav-status:is([data-status="working"], [data-status="connecting"]) {
-  color: light-dark(#0b57d0, #69a7ff);
+  color: var(--sigvelo-color-primary-text);
 }
 
 .manager-office__thread-status[data-status="running"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.46.1",
+  "version": "0.46.3",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -53,7 +53,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.2",
-    "@mcp-b/design-tokens": "0.46.1"
+    "@mcp-b/design-tokens": "0.46.3"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.249",

package/dist/{ThinkChat-CV0xWmL4.js → ThinkChat-qztQ6Clo.js}

@@ -1,6 +1,6 @@
 import { composerDraftToPrompt, parseComposerLinks } from "./utils/composer-link.js";
-import { AgentToolRunsProvider, useSourceScopedAgentToolEvents } from "./components/agents-sdk/AgentToolRunsContext.js";
 import { TransitionSurface } from "./components/foundations/TransitionSurface.js";
+import { AgentToolRunsProvider, useSourceScopedAgentToolEvents } from "./components/agents-sdk/AgentToolRunsContext.js";
 import { AgentChat, compactingNotice } from "./components/agents-sdk/AgentChat.js";
 import { ThinkChatContext, ThinkChatLiveContext, useOptionalThinkChatContext, useThinkChatContext } from "./components/agents-sdk/ThinkChatContext.js";
 import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./components/agents-sdk/ThinkChatActivity.js";