@mcp-b/react-components 0.40.0 → 0.42.0

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

@@ -1,28 +1,33 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { C as FileIcon, Y as SpinnerIcon, c as BoxIcon, et as TerminalIcon, f as ChevronDownIcon } from "../../icons-MmIXciMO.js";
-import { Button } from "../foundations/Button.js";
+import { S as FileIcon, c as BoxIcon } from "../../icons-CVFSeTJn.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
-import { ScrollArea } from "../foundations/ScrollArea.js";
-import { EmptyState } from "../foundations/EmptyState.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.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-DkA4Wr71.js";
 import { McpPluginCatalog } from "./McpPluginCatalog.js";
-import { ThinkExecutionWorkbench } from "./ThinkExecutionWorkbench.js";
 import { ThinkFullAppViewSwitch } from "./ThinkFullAppViewSwitch.js";
 import { ThinkThreadStatusIndicators } from "./ThinkThreadPicker.js";
-import { ThinkThreadShell } from "./ThinkThreadShell.js";
 import { useWorkspace } from "./Workspace.js";
 import { WorkspaceExplorer } from "./WorkspaceExplorer.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkFullApp.tsx
-const workbenchPanelDefaultWidth = 340;
-const workbenchPanelMinWidth = 300;
-const workbenchPanelMaxWidth = 600;
-const workbenchPanelKeyboardStep = 24;
-const workbenchPanelCollapseThreshold = 240;
+/** Matches --sigvelo-layout-conversation (24.5rem). */
+const conversationDefaultWidth = 392;
+const conversationMinWidth = 320;
+const conversationMaxWidth = 640;
+const conversationKeyboardStep = 24;
+/** Keep in lockstep with --sigvelo-layout-break-compact / the 56rem @container. */
+function compactBreakPx(el) {
+	const raw = getComputedStyle(el).getPropertyValue("--sigvelo-layout-break-compact").trim();
+	if (raw.endsWith("rem")) return Number.parseFloat(raw) * Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+	const px = Number.parseFloat(raw);
+	return Number.isFinite(px) ? px : 896;
+}
+function isCompactApp(el) {
+	return el.getBoundingClientRect().width <= compactBreakPx(el);
+}
 function WorkspacePanel({ config }) {
 	const selectedPath = config.navigation.current.destination.kind === "file" ? config.navigation.current.destination.path : null;
 	return /* @__PURE__ */ jsx(WorkspaceExplorer, {
@@ -40,12 +45,6 @@ function WorkspacePanel({ config }) {
 		actions: config.actions
 	});
 }
-function PluginsPanel({ config }) {
-	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
-		className: "think-full-app__workbench",
-		children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, { children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsx(McpPluginCatalog, { ...config }) }) }), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {}) })]
-	});
-}
 /**
 * Approval discovery and background-agent events need a live connection, so they
 * live here rather than in the shell, which also renders before there is one.
@@ -81,33 +80,40 @@ function ThinkFullAppThreadChat({ agent, agentTools, chat, messages, renderAgent
 		})
 	});
 }
-/** Combines ThinkChat with an optional resizable workbench shell. */
-function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, conversation, defaultMobileView, defaultWorkbenchOpen, defaultWorkbenchView, defaultThreadSidebarOpen, hideAppBarInWorkbench = false, messages, mobileView, onMobileViewChange, onThreadSidebarOpenChange, onWorkbenchOpenChange, onWorkbenchViewChange, plugins, ref, renderAgentToolRunLink, renderExecutionRunLink, selectedExecutionRun = null, showMobileViewSwitch = true, showWorkbenchViewSwitch = true, sourceKey, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchOpen, workbenchPanels, workbenchView, workspace, ...props }) {
-	const agent = conversation?.agent;
+/** Combines ThinkChat with a resizable workbench. Wide apps with a workspace
+*  open Files beside the conversation; compact (extension) widths stay on chat
+*  until a view is selected. */
+function ThinkFullApp({ bar, className, conversation, defaultView: defaultViewProp, messages, onViewChange, plugins, ref, renderAgentToolRunLink, sourceKey, style, threadSidebar, threadStatusSummary, view, workbenchPanels, workspace, ...props }) {
 	const appRef = React.useRef(null);
 	const workbenchPanelRef = React.useRef(null);
 	const pendingPanelFocusRef = React.useRef(null);
-	const [innerMobileView, setInnerMobileView] = React.useState(defaultMobileView ?? "chat");
-	const [innerWorkbenchView, setInnerWorkbenchView] = React.useState(defaultWorkbenchView ?? "files");
-	const [innerWorkbenchOpen, setInnerWorkbenchOpen] = React.useState(defaultWorkbenchOpen ?? true);
-	const requestedMobileView = mobileView ?? innerMobileView;
-	const requestedWorkbenchView = workbenchView ?? innerWorkbenchView;
-	const requestedWorkbenchOpen = workbenchOpen ?? innerWorkbenchOpen;
-	const setWorkbenchView = React.useCallback((next) => {
-		if (workbenchView === void 0) setInnerWorkbenchView(next);
-		onWorkbenchViewChange?.(next);
-	}, [onWorkbenchViewChange, workbenchView]);
-	const setMobileView = React.useCallback((next) => {
-		if (mobileView === void 0) setInnerMobileView(next);
-		onMobileViewChange?.(next);
-	}, [mobileView, onMobileViewChange]);
-	const setWorkbenchOpen = React.useCallback((next) => {
-		if (workbenchOpen === void 0) setInnerWorkbenchOpen(next);
-		onWorkbenchOpenChange?.(next);
-	}, [onWorkbenchOpenChange, workbenchOpen]);
-	const updateAppView = React.useCallback((update) => {
-		React.startTransition(update);
-	}, []);
+	const [innerView, setInnerView] = React.useState(defaultViewProp ?? "chat");
+	const userChoseView = React.useRef(defaultViewProp !== void 0 || view !== void 0);
+	const requestedView = view ?? innerView;
+	const setView = React.useCallback((next) => {
+		userChoseView.current = true;
+		if (view === void 0) setInnerView(next);
+		onViewChange?.(next);
+	}, [onViewChange, view]);
+	React.useLayoutEffect(() => {
+		if (view !== void 0 || defaultViewProp !== void 0 || userChoseView.current) return;
+		if (workspace === void 0) return;
+		const el = appRef.current;
+		if (!el) return;
+		const syncViewToWidth = () => {
+			if (userChoseView.current) return;
+			const next = isCompactApp(el) ? "chat" : "files";
+			setInnerView((current) => current === next ? current : next);
+		};
+		syncViewToWidth();
+		const observer = new ResizeObserver(syncViewToWidth);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [
+		defaultViewProp,
+		view,
+		workspace
+	]);
 	const availableWorkbenchPanels = [];
 	if (workspace !== void 0) availableWorkbenchPanels.push({
 		id: "files",
@@ -115,52 +121,24 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, co
 		icon: /* @__PURE__ */ jsx(FileIcon, {}),
 		render: () => /* @__PURE__ */ jsx(WorkspacePanel, { config: workspace })
 	});
-	if (renderExecutionRunLink && agent) availableWorkbenchPanels.push({
-		id: "execution",
-		label: "Execution",
-		icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
-		render: () => /* @__PURE__ */ jsx(React.Suspense, {
-			fallback: /* @__PURE__ */ jsx("div", {
-				className: "think-full-app__workbench think-full-app__workbench--loading",
-				role: "status",
-				children: /* @__PURE__ */ jsx(EmptyState, {
-					icon: /* @__PURE__ */ jsx(SpinnerIcon, {}),
-					description: "Loading execution"
-				})
-			}),
-			children: /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
-				source: agent.stub,
-				sourceKey,
-				title: "Execution",
-				selectedRun: selectedExecutionRun,
-				renderRunLink: renderExecutionRunLink
-			})
-		})
-	});
 	if (plugins) availableWorkbenchPanels.push({
 		id: "plugins",
 		label: "Plugins",
 		icon: /* @__PURE__ */ jsx(BoxIcon, {}),
-		render: () => /* @__PURE__ */ jsx(PluginsPanel, { config: plugins })
+		render: () => /* @__PURE__ */ jsx(McpPluginCatalog, { ...plugins })
 	});
 	if (workbenchPanels) availableWorkbenchPanels.push(...workbenchPanels);
-	const selectedPanel = availableWorkbenchPanels.find((panel) => panel.id === requestedWorkbenchView) ?? availableWorkbenchPanels[0];
-	const activePanel = requestedWorkbenchOpen ? selectedPanel : void 0;
-	const activeWorkbenchView = activePanel?.id;
+	const activePanel = requestedView === "chat" ? void 0 : availableWorkbenchPanels.find((panel) => panel.id === requestedView);
 	const hasWorkbench = activePanel !== void 0;
-	const hasAvailableWorkbench = selectedPanel !== void 0;
-	const activeMobileView = hasWorkbench ? requestedMobileView : "chat";
-	const shouldShowWorkbenchViewSwitch = showWorkbenchViewSwitch && availableWorkbenchPanels.length > 0;
-	const workbenchViews = availableWorkbenchPanels;
-	const shouldRenderInlineAppBar = !threadSidebar && (Boolean(appBarActions || appBarLeading || appBarTitle || threadSidebar) || hasAvailableWorkbench);
-	const hasAppBarRow = shouldRenderInlineAppBar;
+	const activeMobileView = hasWorkbench ? "workbench" : "chat";
+	const hasAppBarRow = Boolean(bar?.back || bar?.leading || bar?.compactLeading || bar?.title || bar?.actions || threadSidebar) || availableWorkbenchPanels.length > 0;
 	React.useLayoutEffect(() => {
 		const pendingFocus = pendingPanelFocusRef.current;
-		if (!pendingFocus || pendingFocus.id !== activeWorkbenchView) return;
+		if (!pendingFocus || pendingFocus.id !== activePanel?.id) return;
 		pendingPanelFocusRef.current = null;
 		Array.from(workbenchPanelRef.current?.querySelectorAll("button") ?? []).find((button) => button.getAttribute("aria-label") === pendingFocus.label)?.focus({ preventScroll: true });
-	}, [activeWorkbenchView]);
-	const updateWorkbenchPanel = (next) => {
+	}, [activePanel?.id]);
+	const updateView = (next) => {
 		const activeElement = document.activeElement;
 		const restorePanelSwitchFocus = activeElement instanceof HTMLElement && workbenchPanelRef.current?.contains(activeElement);
 		const nextLabel = availableWorkbenchPanels.find((panel) => panel.id === next)?.label;
@@ -168,137 +146,70 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, co
 			id: next,
 			label: nextLabel
 		} : null;
-		React.startTransition(() => setWorkbenchView(next));
+		React.startTransition(() => setView(next));
 	};
-	const renderAppTopBar = (sidebarControls) => /* @__PURE__ */ jsxs(AppTopBar.Root, {
-		className: "think-full-app__app-bar",
-		"aria-label": "Workbench controls",
-		"data-mobile-view": activeMobileView,
-		children: [
-			/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [sidebarControls?.sidebarToggle, appBarLeading] }),
-			appBarTitle || sidebarControls ? /* @__PURE__ */ jsxs(AppTopBar.Title, { children: [appBarTitle ? /* @__PURE__ */ jsx("span", {
-				className: "think-full-app__app-title",
-				children: appBarTitle
-			}) : null, sidebarControls ? /* @__PURE__ */ jsxs(Button, {
-				type: "button",
-				variant: "ghost",
-				color: "neutral",
-				size: "sm",
-				className: "think-full-app__thread-trigger",
-				"aria-label": "Threads",
-				"aria-controls": sidebarControls.sidebarId,
-				"aria-expanded": sidebarControls.sidebarOpen,
-				onClick: (event) => sidebarControls.toggleSidebar(event.currentTarget),
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "think-full-app__thread-trigger-title sigvelo-truncate",
-						children: appBarTitle ?? "Threads"
-					}),
-					threadStatusSummary ? /* @__PURE__ */ jsx(ThinkThreadStatusIndicators, { summary: threadStatusSummary }) : null,
-					/* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })
-				]
-			}) : null] }) : null,
-			/* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [
-				appBarActions,
-				shouldShowWorkbenchViewSwitch && selectedPanel ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
-					className: "think-full-app__workbench-view-switch",
-					views: workbenchViews,
-					value: activeWorkbenchView,
-					allowEmpty: true,
-					onValueChange: (next) => {
-						updateAppView(() => {
-							if (!next) {
-								setWorkbenchOpen(false);
-								return;
-							}
-							updateWorkbenchPanel(next);
-							setWorkbenchOpen(true);
-						});
-					},
-					"aria-label": "Workbench views"
-				}) : null,
-				selectedPanel && showMobileViewSwitch ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
-					className: "think-full-app__mobile-view-switch",
-					views: workbenchViews,
-					value: activeMobileView === "workbench" ? activeWorkbenchView : void 0,
-					allowEmpty: true,
-					onValueChange: (next) => {
-						updateAppView(() => {
-							if (!next) {
-								setMobileView("chat");
-								return;
-							}
-							setWorkbenchView(next);
-							setMobileView("workbench");
-						});
-					},
-					"aria-label": "App views"
-				}) : null
-			] })
-		]
-	});
+	const viewSwitch = availableWorkbenchPanels.length ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+		views: availableWorkbenchPanels,
+		value: activePanel?.id,
+		allowEmpty: true,
+		"aria-label": "App views",
+		onValueChange: (next) => updateView(next ?? "chat")
+	}) : null;
+	const appBarActions = bar?.actions || viewSwitch ? /* @__PURE__ */ jsxs(Fragment, { children: [bar?.actions, viewSwitch] }) : void 0;
 	const appContent = /* @__PURE__ */ jsxs(ResizableSidePanel.Root, {
 		ref: mergeRefs(appRef, ref),
 		className: cx("think-full-app", className),
 		label: "workbench",
-		side: "end",
-		defaultSize: workbenchPanelDefaultWidth,
-		minSize: workbenchPanelMinWidth,
-		maxSize: workbenchPanelMaxWidth,
-		keyboardStep: workbenchPanelKeyboardStep,
-		collapseThreshold: workbenchPanelCollapseThreshold,
-		onCollapse: () => setWorkbenchOpen(false),
-		"data-has-thread-sidebar": threadSidebar ? "true" : "false",
+		side: "start",
+		sizeVariable: "--think-full-app-conversation-size",
+		defaultSize: conversationDefaultWidth,
+		minSize: conversationMinWidth,
+		maxSize: conversationMaxWidth,
+		keyboardStep: conversationKeyboardStep,
 		"data-has-workbench": hasWorkbench ? "true" : "false",
-		"data-has-workbench-topbar": hasAppBarRow ? "true" : "false",
 		"data-mobile-view": activeMobileView,
 		style,
 		...props,
-		children: [
-			shouldRenderInlineAppBar ? renderAppTopBar() : null,
-			/* @__PURE__ */ jsxs("div", {
-				className: "think-full-app__view-scope",
-				"data-recipe": "application-plane",
-				"data-mobile-view": activeMobileView,
-				children: [/* @__PURE__ */ jsx("section", {
-					className: "think-full-app__chat-surface",
-					"data-workspace-restoration-scope": "chat",
-					"aria-label": "Chat",
+		"data-recipe": "fill-host",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "think-full-app__view-scope",
+			"data-mobile-view": activeMobileView,
+			children: [/* @__PURE__ */ jsx("section", {
+				className: "think-full-app__chat-surface",
+				"data-workspace-restoration-scope": "chat",
+				"aria-label": "Chat",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "think-full-app__chat",
 					children: /* @__PURE__ */ jsx("div", {
-						className: "think-full-app__chat",
-						children: /* @__PURE__ */ jsx("div", {
-							className: "think-full-app__chat-inner",
-							children: conversation ? /* @__PURE__ */ jsx(ThinkFullAppThreadChat, {
-								...conversation,
-								messages,
-								renderAgentToolRunLink,
-								sourceKey
-							}) : /* @__PURE__ */ jsx(ThinkChat.Messages, {
-								...messages,
-								renderAgentToolRunLink
-							})
+						className: "think-full-app__chat-inner",
+						children: conversation ? /* @__PURE__ */ jsx(ThinkFullAppThreadChat, {
+							...conversation,
+							messages,
+							renderAgentToolRunLink,
+							sourceKey
+						}) : /* @__PURE__ */ jsx(ThinkChat.Messages, {
+							...messages,
+							renderAgentToolRunLink
 						})
 					})
-				}), activePanel ? /* @__PURE__ */ jsx("aside", {
-					className: "think-full-app__aside",
-					"aria-label": "Workbench",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "think-full-app__workbench-slot",
-						children: /* @__PURE__ */ jsx(React.ViewTransition, {
-							default: "sigvelo-layout-transition",
-							children: /* @__PURE__ */ jsx("div", {
-								ref: workbenchPanelRef,
-								className: "think-full-app__workbench-panel",
-								"data-view": activeWorkbenchView,
-								tabIndex: -1,
-								children: activePanel.render()
-							})
+				})
+			}), activePanel ? /* @__PURE__ */ jsx("aside", {
+				className: "think-full-app__aside",
+				"aria-label": "Workbench",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "think-full-app__workbench-slot",
+					children: /* @__PURE__ */ jsx(React.ViewTransition, {
+						default: "sigvelo-layout-transition",
+						children: /* @__PURE__ */ jsx("div", {
+							ref: workbenchPanelRef,
+							className: "think-full-app__workbench-panel",
+							tabIndex: -1,
+							children: activePanel.render()
 						})
 					})
-				}) : null]
-			}),
-			activePanel ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "think-full-app__resizer" }) : null
-		]
+				})
+			}) : null]
+		}), activePanel ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "think-full-app__resizer" }) : null]
 	});
 	const app = workspace ? /* @__PURE__ */ jsx(WorkspaceNavigationProvider, {
 		root: workspace.root ?? "/",
@@ -313,14 +224,22 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, co
 			scope: "chat"
 		}), appContent] })
 	}) : appContent;
-	if (!threadSidebar) return app;
-	return /* @__PURE__ */ jsx(ThinkThreadShell, {
+	return /* @__PURE__ */ jsx(ResponsiveSidebarShell, {
+		className: "think-full-app-shell",
 		sidebar: threadSidebar,
-		sidebarOpen: threadSidebarOpen,
-		defaultSidebarOpen: defaultThreadSidebarOpen,
-		onSidebarOpenChange: onThreadSidebarOpenChange,
-		"data-hide-app-bar-in-workbench": hideAppBarInWorkbench ? "" : void 0,
-		topBar: (controls) => renderAppTopBar(controls),
+		sidebarLabel: "threads",
+		showMainLabel: "Show selected thread",
+		bar: {
+			...bar,
+			actions: appBarActions,
+			className: "think-full-app__app-bar",
+			label: "Workbench controls",
+			hidden: !hasAppBarRow,
+			compactTitleTrigger: threadSidebar ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "sigvelo-truncate",
+				children: bar?.title ?? "Threads"
+			}), threadStatusSummary ? /* @__PURE__ */ jsx(ThinkThreadStatusIndicators, { summary: threadStatusSummary }) : null] }) : void 0
+		},
 		children: app
 	});
 }

package/dist/components/agents-sdk/ThinkFullAppViewSwitch.d.ts

@@ -1,4 +1,4 @@
-import { r as ToggleGroupProps } from "../../ToggleGroup-_pQMyHGM.js";
+import { ToggleGroupProps } from "../foundations/ToggleGroup.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/ThinkFullAppViewSwitch.d.ts

package/dist/components/agents-sdk/ThinkRoutine.d.ts

@@ -1,4 +1,4 @@
-import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-lYYgyeE1.js";
+import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-k8bpyXqt.js";
 import { ThinkScheduledTask } from "@cloudflare/think";
 import { Schedule } from "agents";
 

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { U as PlusIcon } from "../../icons-MmIXciMO.js";
+import { B as PlusIcon } from "../../icons-CVFSeTJn.js";
 import { buttonVariants } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { t as capitalize } from "../../format-DB2mX9DA.js";

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

@@ -1,5 +1,4 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Badge } from "../foundations/Badge.js";
 import { Switch } from "../foundations/Switch.js";
 import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
 import { ThinkRoutineRuns } from "./ThinkRoutineRuns.js";
@@ -25,20 +24,10 @@ function ThinkRoutineDetail({ busy = false, className, routine, showOwner = true
 				className: "think-routine-library__detail-header",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "think-routine-library__detail-heading",
-					children: [
-						/* @__PURE__ */ jsx(Badge, {
-							className: "think-routine-library__state",
-							variant: "ghost",
-							color: routine.enabled ? "success" : "neutral",
-							size: "sm",
-							children: routine.enabled ? "Active" : "Paused"
-						}),
-						/* @__PURE__ */ jsx("h1", {
-							id: titleId,
-							children: routine.name
-						}),
-						routine.description ? /* @__PURE__ */ jsx("p", { children: routine.description }) : null
-					]
+					children: [/* @__PURE__ */ jsx("h1", {
+						id: titleId,
+						children: routine.name
+					}), routine.description ? /* @__PURE__ */ jsx("p", { children: routine.description }) : null]
 				})
 			}),
 			/* @__PURE__ */ jsxs("div", {

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Y as SpinnerIcon } from "../../icons-MmIXciMO.js";
+import { K as SpinnerIcon } from "../../icons-CVFSeTJn.js";
 import { Button, buttonVariants } from "../foundations/Button.js";
 import { Field } from "../foundations/Field.js";
 import { Form } from "../foundations/Form.js";

package/dist/components/agents-sdk/ThinkRoutineLibrary.d.ts

@@ -1,3 +1,4 @@
+import { AppBarSlots } from "../general-purpose/ResponsiveSidebarShell.js";
 import { ThinkRoutine, ThinkRoutineRunOf } from "./ThinkRoutine.js";
 import * as React from "react";
 
@@ -29,10 +30,11 @@ interface ThinkRoutineLibraryProps<TRoutine extends ThinkRoutine = ThinkRoutine>
   showOwner?: boolean;
   /** Host-owned catalog error shown above the library without replacing loaded routines. */
   error?: React.ReactNode;
-  /** Product navigation rendered after the built-in schedule navigation control. */
-  appBarLeading?: React.ReactNode;
-  /** Product navigation rendered before the selected schedule actions. */
-  appBarActions?: React.ReactNode;
+  /**
+   * Application bar slots. `title` defaults to the selected schedule's name;
+   * `actions` render before the built-in schedule actions.
+   */
+  bar?: AppBarSlots;
   /** Starts the selected routine immediately. */
   onRunRoutine?: (routine: TRoutine) => void | Promise<void>;
   /** Activates or pauses the selected app-owned routine. */
@@ -54,8 +56,7 @@ interface ThinkRoutineLibraryProps<TRoutine extends ThinkRoutine = ThinkRoutine>
  * route and may also use these surfaces independently.
  */
 declare function ThinkRoutineLibrary<TRoutine extends ThinkRoutine = ThinkRoutine>({
-  appBarActions,
-  appBarLeading,
+  bar,
   className,
   createRoutineLink,
   error: catalogError,