@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/components/ThinkRoutineLibrary.js

@@ -1,20 +1,25 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon, P as PlayIcon, h as EllipsisIcon, n as ArrowLeftIcon, q as WarningIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { G as SpinnerIcon, Z as WarningIcon, u as ChevronDownIcon, v as EllipsisIcon, z as PlayIcon } from "../icons-CQJ-aMnI.js";
+import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
+import { Button, buttonVariants } from "./Button.js";
 import { Menu } from "./Menu.js";
 import { AppTopBar } from "./AppTopBar.js";
+import { AlertDialog } from "./AlertDialog.js";
 import { ResponsiveSidebarShell } from "./ResponsiveSidebarShell.js";
 import { ThinkRoutineBrowser } from "./ThinkRoutineBrowser.js";
 import { ThinkRoutineDetail } from "./ThinkRoutineDetail.js";
-import { ThinkRoutineForm } from "./ThinkRoutineForm.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThinkRoutineLibrary.tsx
 function errorMessage(error) {
 	return error instanceof Error ? error.message : String(error);
 }
-function RoutineTopBarActions({ busy, onDelete, onRun }) {
-	if (!onRun && !onDelete) return null;
-	return /* @__PURE__ */ jsxs(AppTopBar.Trailing, {
+function RoutineTopBarActions({ busy, onDelete, editLink, onRun, routineName }) {
+	const [deleteOpen, setDeleteOpen] = React.useState(false);
+	const moreActionsRef = React.useRef(null);
+	const hasMenu = Boolean(editLink || onDelete);
+	if (!onRun && !hasMenu) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(AppTopBar.Trailing, {
 		"aria-label": "Schedule actions",
 		children: [onRun ? /* @__PURE__ */ jsx(AppTopBar.Button, {
 			label: "Run schedule",
@@ -22,53 +27,75 @@ function RoutineTopBarActions({ busy, onDelete, onRun }) {
 			disabled: busy,
 			onClick: onRun,
 			children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
-		}) : null, onDelete ? /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
+		}) : null, hasMenu ? /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
 			label: "More schedule actions",
 			tooltip: "More actions",
 			disabled: busy,
-			render: /* @__PURE__ */ jsx(Menu.Trigger, { unstyled: true }),
+			render: /* @__PURE__ */ jsx(Menu.Trigger, {
+				ref: moreActionsRef,
+				unstyled: true
+			}),
 			children: /* @__PURE__ */ jsx(EllipsisIcon, {})
 		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 			align: "end",
 			sideOffset: 4,
-			children: /* @__PURE__ */ jsx(Menu.Popup, { children: /* @__PURE__ */ jsx(Menu.Item, {
+			children: /* @__PURE__ */ jsxs(Menu.Popup, { children: [editLink ? /* @__PURE__ */ jsx(Menu.Item, {
+				render: editLink,
+				children: "Edit schedule"
+			}) : null, onDelete ? /* @__PURE__ */ jsx(Menu.Item, {
 				variant: "destructive",
 				disabled: busy,
-				onClick: onDelete,
+				onClick: () => setDeleteOpen(true),
 				children: "Delete schedule"
-			}) })
+			}) : null] })
 		}) })] }) : null]
-	});
+	}), onDelete ? /* @__PURE__ */ jsx(AlertDialog.Root, {
+		open: deleteOpen,
+		onOpenChange: setDeleteOpen,
+		children: /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, {}), /* @__PURE__ */ jsx(AlertDialog.Viewport, { children: /* @__PURE__ */ jsxs(AlertDialog.Popup, {
+			finalFocus: moreActionsRef,
+			children: [
+				/* @__PURE__ */ jsxs(AlertDialog.Title, { children: [
+					"Delete ",
+					routineName,
+					"?"
+				] }),
+				/* @__PURE__ */ jsx(AlertDialog.Description, { children: "This permanently deletes the schedule and stops its future runs." }),
+				/* @__PURE__ */ jsxs(AlertDialog.Footer, { children: [/* @__PURE__ */ jsx(AlertDialog.Close, {
+					disabled: busy,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(AlertDialog.Close, {
+					variant: "destructive",
+					disabled: busy,
+					onClick: onDelete,
+					children: "Delete schedule"
+				})] })
+			]
+		}) })] })
+	}) : null] });
 }
 /**
 * Full-page, cross-agent routine library. This intentionally does not live in
 * ThinkFullApp's per-thread workbench: the host app owns aggregation, routes,
-* authoring callables, and the association between schedules and native runs.
+* authoring routes, and the association between schedules and native runs.
 * The application shell composes `ThinkRoutineBrowser`, `ThinkRoutineDetail`,
-* `ThinkRoutineRuns`, and `ThinkRoutineForm`; consumers may also use those
-* surfaces independently.
+* and `ThinkRoutineRuns`; consumers compose `ThinkRoutineForm` in their create
+* route and may also use these surfaces independently.
 */
-function ThinkRoutineLibrary({ className, defaultSelectedRoutineId, onCreateRoutine, onDeleteRoutine, onRoutineEnabledChange, onRunRoutine, onRunSelect, onSelectedRoutineIdChange, owners, renderRoutineDetail, schedules, ref, routines, selectedRoutineId, ...props }) {
-	const [view, setView] = React.useState("library");
-	const [innerSelectedId, setInnerSelectedId] = React.useState(defaultSelectedRoutineId ?? routines[0]?.id ?? "");
+function ThinkRoutineLibrary({ appBarLeading, className, createRoutineLink, error: catalogError, onDeleteRoutine, onRoutineEnabledChange, onRunRoutine, renderEditRoutineLink, renderRoutineLink, renderRoutineDetail, renderRunLink, ref, routines, selectedRoutineId, showOwner = true, ...props }) {
 	const [busy, setBusy] = React.useState(false);
 	const [announcement, setAnnouncement] = React.useState("");
-	const [error, setError] = React.useState(null);
-	const activeId = selectedRoutineId ?? innerSelectedId;
-	const selectedRoutine = routines.find((routine) => routine.id === activeId) ?? (selectedRoutineId === void 0 ? routines[0] : void 0);
-	const selectRoutine = (id) => {
-		if (selectedRoutineId === void 0) setInnerSelectedId(id);
-		onSelectedRoutineIdChange?.(id);
-	};
+	const [actionError, setActionError] = React.useState(null);
+	const selectedRoutine = selectedRoutineId ? routines.find((routine) => routine.id === selectedRoutineId) : void 0;
 	const perform = async (action, message) => {
 		setBusy(true);
-		setError(null);
+		setActionError(null);
 		try {
 			await action();
 			setAnnouncement(message);
 			return true;
 		} catch (nextError) {
-			setError(errorMessage(nextError));
+			setActionError(errorMessage(nextError));
 			return false;
 		} finally {
 			setBusy(false);
@@ -77,69 +104,47 @@ function ThinkRoutineLibrary({ className, defaultSelectedRoutineId, onCreateRout
 	const detailProps = selectedRoutine ? {
 		routine: selectedRoutine,
 		busy,
-		onRunSelect: onRunSelect ? (run) => onRunSelect(selectedRoutine, run) : void 0,
+		renderRunLink: renderRunLink ? (run) => renderRunLink(selectedRoutine, run) : void 0,
 		onEnabledChange: onRoutineEnabledChange ? (enabled) => void perform(() => onRoutineEnabledChange(selectedRoutine, enabled), `${selectedRoutine.name} ${enabled ? "activated" : "paused"}.`) : void 0
 	} : void 0;
-	if (view === "create") return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: cx("think-routine-library", className),
-		...props,
-		children: [
-			error ? /* @__PURE__ */ jsxs("div", {
-				className: "think-routine-library__error",
-				role: "alert",
-				children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: error })]
-			}) : null,
-			/* @__PURE__ */ jsxs(AppTopBar.Root, {
-				"aria-label": "Schedule editor controls",
-				children: [/* @__PURE__ */ jsx(AppTopBar.Leading, { children: /* @__PURE__ */ jsx(AppTopBar.Button, {
-					label: "Back to schedules",
-					onClick: () => setView("library"),
-					children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
-				}) }), /* @__PURE__ */ jsx(AppTopBar.Title, { children: "New schedule" })]
-			}),
-			/* @__PURE__ */ jsx(ThinkRoutineForm, {
-				busy,
-				owners,
-				schedules,
-				onCancel: () => setView("library"),
-				onCreate: (request) => {
-					if (!onCreateRoutine) return;
-					perform(() => onCreateRoutine(request), `Created ${request.name}.`).then((created) => {
-						if (created) setView("library");
-					});
-				}
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "think-routine-library__status",
-				role: "status",
-				"aria-atomic": "true",
-				children: announcement
-			})
-		]
-	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("think-routine-library", className),
 		...props,
 		children: [
-			error ? /* @__PURE__ */ jsxs("div", {
+			catalogError || actionError ? /* @__PURE__ */ jsxs("div", {
 				className: "think-routine-library__error",
 				role: "alert",
-				children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: error })]
+				children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: catalogError || actionError })]
 			}) : null,
 			/* @__PURE__ */ jsx(ResponsiveSidebarShell, {
 				className: "think-routine-library__layout",
 				sidebarLabel: "schedules",
+				defaultSidebarOpen: false,
 				toolbarLabel: "Schedule navigation controls",
 				showMainLabel: "Show selected schedule",
-				topBar: ({ sidebarToggle }) => /* @__PURE__ */ jsxs(AppTopBar.Root, {
+				topBar: ({ sidebarId, sidebarOpen, sidebarToggle, toggleSidebar }) => /* @__PURE__ */ jsxs(AppTopBar.Root, {
 					"aria-label": "Schedule controls",
 					children: [
-						/* @__PURE__ */ jsx(AppTopBar.Leading, { children: sidebarToggle }),
-						/* @__PURE__ */ jsx(AppTopBar.Title, { children: selectedRoutine?.name ?? "Schedules" }),
+						/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [sidebarToggle, appBarLeading] }),
+						/* @__PURE__ */ jsxs(AppTopBar.Title, { children: [/* @__PURE__ */ jsx("span", {
+							className: "think-routine-library__app-title",
+							children: selectedRoutine?.name ?? "Schedules"
+						}), selectedRoutine ? /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "ghost",
+							color: "neutral",
+							size: "sm",
+							className: "think-routine-library__schedule-trigger",
+							"aria-controls": sidebarId,
+							"aria-expanded": sidebarOpen,
+							onClick: (event) => toggleSidebar(event.currentTarget),
+							children: [/* @__PURE__ */ jsx("span", { children: selectedRoutine.name }), /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })]
+						}) : null] }),
 						/* @__PURE__ */ jsx(RoutineTopBarActions, {
 							busy,
+							routineName: selectedRoutine?.name ?? "schedule",
+							editLink: selectedRoutine && renderEditRoutineLink ? renderEditRoutineLink(selectedRoutine) : void 0,
 							onRun: selectedRoutine && onRunRoutine ? () => void perform(() => onRunRoutine(selectedRoutine), `Started ${selectedRoutine.name}.`) : void 0,
 							onDelete: selectedRoutine && onDeleteRoutine ? () => void perform(() => onDeleteRoutine(selectedRoutine), `Deleted ${selectedRoutine.name}.`) : void 0
 						})
@@ -147,10 +152,12 @@ function ThinkRoutineLibrary({ className, defaultSelectedRoutineId, onCreateRout
 				}),
 				sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ThinkRoutineBrowser, {
 					routines,
-					selectedRoutineId: selectedRoutine?.id,
-					onCreateRoutine: onCreateRoutine ? () => setView("create") : void 0,
-					onSelectedRoutineIdChange: (id) => {
-						selectRoutine(id);
+					selectedRoutineId,
+					showOwner,
+					renderRoutineLink,
+					createRoutineLink,
+					onRoutineLinkClick: (event) => {
+						if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.currentTarget.target === "_blank") return;
 						closeSidebarOnCompact();
 					}
 				}),
@@ -158,15 +165,32 @@ function ThinkRoutineLibrary({ className, defaultSelectedRoutineId, onCreateRout
 					className: "think-routine-library__main",
 					children: detailProps ? /* @__PURE__ */ jsx(React.Fragment, { children: renderRoutineDetail ? renderRoutineDetail({
 						...detailProps,
-						defaultDetail: /* @__PURE__ */ jsx(ThinkRoutineDetail, { ...detailProps })
-					}) : /* @__PURE__ */ jsx(ThinkRoutineDetail, { ...detailProps }) }, detailProps.routine.id) : /* @__PURE__ */ jsxs("div", {
+						defaultDetail: /* @__PURE__ */ jsx(ThinkRoutineDetail, {
+							...detailProps,
+							showOwner
+						})
+					}) : /* @__PURE__ */ jsx(ThinkRoutineDetail, {
+						...detailProps,
+						showOwner
+					}) }, detailProps.routine.id) : /* @__PURE__ */ jsxs("div", {
 						className: "think-routine-library__empty-detail",
-						children: [/* @__PURE__ */ jsx("h1", { children: routines.length ? "Schedule unavailable" : "No schedules yet" }), /* @__PURE__ */ jsx("p", { children: routines.length ? "Select an available schedule." : "Create a schedule to run recurring Think prompts." })]
+						children: [
+							/* @__PURE__ */ jsx("h1", { children: selectedRoutineId ? "Schedule unavailable" : routines.length ? "Select a schedule" : "No schedules yet" }),
+							/* @__PURE__ */ jsx("p", { children: routines.length ? "Select an available schedule." : "Create a schedule to run recurring Think prompts." }),
+							!routines.length && createRoutineLink ? /* @__PURE__ */ jsx(NavigationLink, {
+								render: createRoutineLink,
+								className: buttonVariants({
+									color: "primary",
+									className: "think-routine-library__empty-action"
+								}),
+								children: "Create schedule"
+							}) : null
+						]
 					})
 				})
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "think-routine-library__status",
+				className: "think-routine-library__status sigvelo-visually-hidden",
 				role: "status",
 				"aria-atomic": "true",
 				children: announcement

package/dist/components/ThinkRoutineRuns.d.ts

@@ -6,7 +6,8 @@ interface ThinkRoutineRunsProps<TRun extends ThinkExecutionRun = ThinkExecutionR
   runs: readonly TRun[];
   title?: React.ReactNode;
   emptyState?: React.ReactNode;
-  onRunSelect?: (run: TRun) => void;
+  /** App-authored TanStack Router Link for each durable execution destination. */
+  renderRunLink?: (run: TRun) => React.ReactElement;
 }
 /** Compact execution history shared by routine detail surfaces. */
 declare function ThinkRoutineRuns<TRun extends ThinkExecutionRun = ThinkExecutionRun>({
@@ -14,7 +15,7 @@ declare function ThinkRoutineRuns<TRun extends ThinkExecutionRun = ThinkExecutio
   runs,
   title,
   emptyState,
-  onRunSelect,
+  renderRunLink,
   ref,
   ...props
 }: ThinkRoutineRunsProps<TRun> & {

package/dist/components/ThinkRoutineRuns.js

@@ -1,13 +1,14 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { Button } from "./Button.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
+import { buttonVariants } from "./Button.js";
 import { Badge } from "./Badge.js";
 import { formatThinkExecutionShortTimestamp, getThinkExecutionRunId, getThinkExecutionRunStatus, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionStatus } from "./ThinkExecutionStatus.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThinkRoutineRuns.tsx
 /** Compact execution history shared by routine detail surfaces. */
-function ThinkRoutineRuns({ className, runs, title = "Recent runs", emptyState = "Run this schedule now or wait for its next occurrence.", onRunSelect, ref, ...props }) {
+function ThinkRoutineRuns({ className, runs, title = "Recent runs", emptyState = "Run this schedule now or wait for its next occurrence.", renderRunLink, ref, ...props }) {
 	const titleId = React.useId();
 	return /* @__PURE__ */ jsxs("section", {
 		ref,
@@ -31,30 +32,36 @@ function ThinkRoutineRuns({ className, runs, title = "Recent runs", emptyState =
 			children: runs.map((run) => {
 				const status = getThinkExecutionRunStatus(run);
 				const kind = isThinkSubmissionRun(run) ? "submission" : "workflow";
-				return /* @__PURE__ */ jsx("li", {
-					"data-status": status,
-					children: /* @__PURE__ */ jsxs(Button, {
-						type: "button",
+				const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(ThinkExecutionStatus, {
+						run,
+						className: "think-routine-library__run-marker"
+					}),
+					/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("strong", { children: formatThinkExecutionShortTimestamp(run.createdAt, "Not scheduled") }) }),
+					/* @__PURE__ */ jsx(Badge, {
+						className: "think-routine-library__run-kind",
 						variant: "ghost",
 						color: "neutral",
 						size: "sm",
+						children: kind
+					})
+				] });
+				const runClassName = buttonVariants({
+					variant: "ghost",
+					color: "neutral",
+					size: "sm",
+					className: "think-routine-library__run"
+				});
+				return /* @__PURE__ */ jsx("li", {
+					"data-status": status,
+					children: renderRunLink ? /* @__PURE__ */ jsx(NavigationLink, {
+						render: renderRunLink(run),
+						className: runClassName,
+						"aria-label": `Open ${kind} ${getThinkExecutionRunId(run)}`,
+						children: content
+					}) : /* @__PURE__ */ jsx("div", {
 						className: "think-routine-library__run",
-						disabled: !onRunSelect,
-						onClick: onRunSelect ? () => onRunSelect(run) : void 0,
-						children: [
-							/* @__PURE__ */ jsx(ThinkExecutionStatus, {
-								run,
-								className: "think-routine-library__run-marker"
-							}),
-							/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("strong", { children: formatThinkExecutionShortTimestamp(run.createdAt, "Not scheduled") }) }),
-							/* @__PURE__ */ jsx(Badge, {
-								className: "think-routine-library__run-kind",
-								variant: "ghost",
-								color: "neutral",
-								size: "sm",
-								children: kind
-							})
-						]
+						children: content
 					})
 				}, `${kind}:${getThinkExecutionRunId(run)}`);
 			})

package/dist/components/ThinkThreadPicker.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 
 //#region src/components/ThinkThreadPicker.d.ts
 interface ThinkThreadItem {
-  /** Stable child-agent/thread id passed back to the app's route state. */
+  /** Stable child-agent/thread id used by the app-authored link's route params. */
   id: string;
   /** Human-readable thread title, usually generated by the parent Think agent. */
   title: string;
@@ -31,15 +31,20 @@ interface ThinkThreadStatusIndicatorsProps {
   summary: ThinkThreadStatusSummary;
   className?: string;
 }
-interface ThinkThreadPickerProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect" | "title"> {
+interface ThinkThreadPickerProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
   /** Threads from the parent agent, already sorted in the order the app wants to show. */
   threads: readonly ThinkThreadItem[];
-  /** Selected child-agent/thread id. */
-  selectedId?: string;
-  /** Called when a thread row is selected; callers route this into `useAgent({ sub })`. */
-  onSelect: (id: string) => void;
+  /**
+   * Renders the application-owned TanStack Router Link for a thread.
+   *
+   * Put `to`, `params`, `search`, and active state on this element so they stay
+   * inferred from the consuming application's registered route tree.
+   */
+  renderThreadLink: (thread: ThinkThreadItem) => React.ReactElement;
   /** Optional parent-agent create action, usually `parent.stub.createThread()`. */
   onCreate?: () => void | Promise<void>;
+  /** Optional parent-agent delete action, usually `parent.stub.deleteThread(thread.id)`. */
+  onDelete?: (thread: ThinkThreadItem) => void | Promise<void>;
   /** Visible heading for the roster. */
   title?: React.ReactNode;
   /** Accessible label for the list navigation. */
@@ -54,15 +59,16 @@ declare function ThinkThreadStatusIndicators({
  * Thread roster UI for sub-agent chat apps.
  *
  * This component does not call Think or Cloudflare RPC methods directly. Feed
- * it from the parent agent's roster method, then route `onSelect` into the
- * child `useAgent({ sub: [...] })` name. Keep backend contract notes beside the
- * parent Think agent because `listThreads()`/`createThread()` are app-owned.
+ * it from the parent agent's roster method, then render app-owned route links
+ * that select the child `useAgent({ sub: [...] })` name. Keep backend contract
+ * notes beside the parent Think agent because
+ * `listThreads()`/`createThread()`/`deleteThread()` are app-owned.
  */
 declare function ThinkThreadPicker({
   threads,
-  selectedId,
-  onSelect,
+  renderThreadLink,
   onCreate,
+  onDelete,
   className,
   title,
   "aria-label": ariaLabel,