@mcp-b/react-components 0.17.0 → 0.18.0

package/dist/components/ThinkRoutineBrowser.js

@@ -1,8 +1,9 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { I as PlusIcon, z as SearchIcon } from "../icons--FqCZEc3.js";
-import { Button } from "./Button.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { B as PlusIcon } from "../icons-CQJ-aMnI.js";
+import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
+import { buttonVariants } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
-import { Field } from "./Field.js";
+import { SearchField } from "./SearchField.js";
 import { ToggleGroup } from "./ToggleGroup.js";
 import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
 import * as React from "react";
@@ -18,16 +19,10 @@ function filterRoutines(routines, filter, query) {
 	});
 }
 /** Searchable, filterable navigation for an app-owned collection of Think routines. */
-function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelectedRoutineIdChange, onCreateRoutine, ref, ...props }) {
+function ThinkRoutineBrowser({ className, routines, selectedRoutineId, showOwner = true, renderRoutineLink, createRoutineLink, onRoutineLinkClick, ref, ...props }) {
 	const [filter, setFilter] = React.useState("all");
 	const [query, setQuery] = React.useState("");
 	const visibleRoutines = filterRoutines(routines, filter, query);
-	const retainVisibleSelection = (nextVisibleRoutines) => {
-		if (selectedRoutineId && !nextVisibleRoutines.some((routine) => routine.id === selectedRoutineId)) {
-			const nextSelectedId = nextVisibleRoutines[0]?.id;
-			if (nextSelectedId) onSelectedRoutineIdChange?.(nextSelectedId);
-		}
-	};
 	return /* @__PURE__ */ jsxs("nav", {
 		ref,
 		className: cx("think-routine-browser", "think-routine-library__browser", className),
@@ -48,7 +43,6 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 						const nextFilter = nextValue[0];
 						if (!nextFilter) return;
 						setFilter(nextFilter);
-						retainVisibleSelection(filterRoutines(routines, nextFilter, query));
 					},
 					children: [
 						"all",
@@ -59,14 +53,16 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 						value,
 						children: value.charAt(0).toUpperCase() + value.slice(1)
 					}, value))
-				}), onCreateRoutine ? /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
-					render: /* @__PURE__ */ jsx(Button, {
-						type: "button",
-						variant: "ghost",
-						color: "neutral",
-						size: "icon-sm",
-						"aria-label": "New schedule",
-						onClick: onCreateRoutine
+				}), createRoutineLink ? /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+					render: /* @__PURE__ */ jsx(NavigationLink, {
+						render: createRoutineLink,
+						className: buttonVariants({
+							variant: "ghost",
+							color: "neutral",
+							size: "sm"
+						}),
+						"data-icon-only": "",
+						"aria-label": "New schedule"
 					}),
 					children: /* @__PURE__ */ jsx(PlusIcon, {})
 				}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
@@ -75,23 +71,17 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 					children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: "Create schedule" })
 				}) })] }) : null]
 			}),
-			/* @__PURE__ */ jsxs(Field.Root, {
+			/* @__PURE__ */ jsxs(SearchField.Root, {
 				className: "think-routine-library__search",
 				name: "routine-search",
-				children: [/* @__PURE__ */ jsx(Field.Label, {
+				children: [/* @__PURE__ */ jsx(SearchField.Label, {
 					className: "think-routine-library__title sigvelo-visually-hidden",
 					children: "Search schedules"
-				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(SearchIcon, {}), /* @__PURE__ */ jsx(Field.Control, {
-					className: "think-routine-browser__search-control",
-					type: "search",
+				}), /* @__PURE__ */ jsx(SearchField.Control, {
 					value: query,
 					placeholder: "Search schedules",
-					onChange: (event) => {
-						const nextQuery = event.currentTarget.value;
-						setQuery(nextQuery);
-						retainVisibleSelection(filterRoutines(routines, filter, nextQuery));
-					}
-				})] })]
+					onChange: (event) => setQuery(event.currentTarget.value)
+				})]
 			}),
 			/* @__PURE__ */ jsxs("p", {
 				className: "think-routine-library__status sigvelo-visually-hidden",
@@ -111,14 +101,16 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 					const selected = routine.id === selectedRoutineId;
 					return /* @__PURE__ */ jsx("li", {
 						"data-selected": selected || void 0,
-						children: /* @__PURE__ */ jsxs(Button, {
-							className: "think-routine-browser__routine",
-							type: "button",
-							variant: "ghost",
-							color: "neutral",
-							size: "sm",
+						children: /* @__PURE__ */ jsxs(NavigationLink, {
+							render: renderRoutineLink(routine),
+							className: buttonVariants({
+								variant: "ghost",
+								color: "neutral",
+								size: "sm",
+								className: "think-routine-browser__routine"
+							}),
 							"aria-current": selected ? "page" : void 0,
-							onClick: () => onSelectedRoutineIdChange?.(routine.id),
+							onClick: onRoutineLinkClick,
 							children: [
 								/* @__PURE__ */ jsx("span", {
 									className: "think-routine-library__routine-status",
@@ -135,8 +127,9 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 										/* @__PURE__ */ jsx("strong", { children: routine.name }),
 										/* @__PURE__ */ jsx("span", { children: routine.task.schedule }),
 										/* @__PURE__ */ jsxs("small", { children: [
-											routine.owner.name,
-											" · Next ",
+											showOwner ? `${routine.owner.name} · ` : null,
+											"Next",
+											" ",
 											getThinkRoutineNextRun(routine)
 										] })
 									]

package/dist/components/ThinkRoutineDetail.d.ts

@@ -5,16 +5,19 @@ import * as React from "react";
 interface ThinkRoutineDetailProps<TRoutine extends ThinkRoutine = ThinkRoutine> extends React.HTMLAttributes<HTMLElement> {
   routine: TRoutine;
   busy?: boolean;
+  showOwner?: boolean;
   onEnabledChange?: (enabled: boolean) => void;
-  onRunSelect?: (run: ThinkRoutineRunOf<TRoutine>) => void;
+  /** App-authored TanStack Router Link for each recent execution. */
+  renderRunLink?: (run: ThinkRoutineRunOf<TRoutine>) => React.ReactElement;
 }
 /** Readable definition, schedule settings, and recent executions for one routine. */
 declare function ThinkRoutineDetail<TRoutine extends ThinkRoutine = ThinkRoutine>({
   busy,
   className,
   routine,
+  showOwner,
   onEnabledChange,
-  onRunSelect,
+  renderRunLink,
   ref,
   ...props
 }: ThinkRoutineDetailProps<TRoutine> & {

package/dist/components/ThinkRoutineDetail.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Badge } from "./Badge.js";
 import { Switch } from "./Switch.js";
 import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
@@ -10,7 +10,7 @@ function taskInstructions(routine) {
 	return typeof routine.task.prompt === "string" ? routine.task.prompt : "Runs an app-defined scheduled handler.";
 }
 /** Readable definition, schedule settings, and recent executions for one routine. */
-function ThinkRoutineDetail({ busy = false, className, routine, onEnabledChange, onRunSelect, ref, ...props }) {
+function ThinkRoutineDetail({ busy = false, className, routine, showOwner = true, onEnabledChange, renderRunLink, ref, ...props }) {
 	const titleId = React.useId();
 	const definitionId = React.useId();
 	const settingsId = React.useId();
@@ -72,7 +72,7 @@ function ThinkRoutineDetail({ busy = false, className, routine, onEnabledChange,
 							children: [
 								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Repeats" }), /* @__PURE__ */ jsx("dd", { children: routine.task.schedule })] }),
 								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Next run" }), /* @__PURE__ */ jsx("dd", { children: getThinkRoutineNextRun(routine) })] }),
-								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Agent" }), /* @__PURE__ */ jsx("dd", { children: routine.owner.name })] })
+								showOwner ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Agent" }), /* @__PURE__ */ jsx("dd", { children: routine.owner.name })] }) : null
 							]
 						}),
 						/* @__PURE__ */ jsxs("div", {
@@ -93,7 +93,7 @@ function ThinkRoutineDetail({ busy = false, className, routine, onEnabledChange,
 			}),
 			/* @__PURE__ */ jsx(ThinkRoutineRuns, {
 				runs: routine.runs,
-				onRunSelect
+				renderRunLink
 			})
 		]
 	});

package/dist/components/ThinkRoutineForm.d.ts

@@ -12,15 +12,16 @@ interface ThinkRoutineFormProps extends React.HTMLAttributes<HTMLElement> {
    * `getDefaultTimezone()` own wall-clock fallback behavior.
    */
   schedules: readonly ThinkScheduledTaskSchedule[];
-  onCancel?: () => void;
+  /** App-authored TanStack Router Link to the routine catalog. */
+  cancelLink?: React.ReactElement;
   onCreate: (request: ThinkRoutineCreateRequest) => void;
 }
 /** Authoring surface for a serializable, prompt-based Think scheduled task. */
 declare function ThinkRoutineForm({
   busy,
+  cancelLink,
   className,
   owners,
-  onCancel,
   onCreate,
   schedules,
   ref,

package/dist/components/ThinkRoutineForm.js

@@ -1,6 +1,7 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { V as SpinnerIcon } from "../icons--FqCZEc3.js";
-import { Button } from "./Button.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { G as SpinnerIcon } from "../icons-CQJ-aMnI.js";
+import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
+import { Button, buttonVariants } from "./Button.js";
 import { Field } from "./Field.js";
 import { Form } from "./Form.js";
 import { Textarea } from "./Textarea.js";
@@ -32,7 +33,7 @@ function RoutineSelect({ label, onValueChange, options, value }) {
 	});
 }
 /** Authoring surface for a serializable, prompt-based Think scheduled task. */
-function ThinkRoutineForm({ busy = false, className, owners, onCancel, onCreate, schedules, ref, ...props }) {
+function ThinkRoutineForm({ busy = false, cancelLink, className, owners, onCreate, schedules, ref, ...props }) {
 	const [name, setName] = React.useState("");
 	const [ownerId, setOwnerId] = React.useState(owners[0]?.id ?? "");
 	const [prompt, setPrompt] = React.useState("");
@@ -131,12 +132,12 @@ function ThinkRoutineForm({ busy = false, className, owners, onCancel, onCreate,
 				})
 			] }), /* @__PURE__ */ jsxs("footer", {
 				className: "think-routine-library__form-actions",
-				children: [onCancel ? /* @__PURE__ */ jsx(Button, {
-					type: "button",
-					variant: "ghost",
-					color: "neutral",
-					disabled: busy,
-					onClick: onCancel,
+				children: [cancelLink ? /* @__PURE__ */ jsx(NavigationLink, {
+					render: cancelLink,
+					className: buttonVariants({
+						variant: "ghost",
+						color: "neutral"
+					}),
 					children: "Cancel"
 				}) : null, /* @__PURE__ */ jsxs(Button, {
 					type: "submit",

package/dist/components/ThinkRoutineLibrary.d.ts

@@ -1,7 +1,6 @@
 import { t as ThinkExecutionRun } from "../ThinkExecutionRun-ChhWhOoU.js";
 import { ThinkRoutine, ThinkRoutineCreateRequest, ThinkRoutineOwner, ThinkRoutineRunOf } from "./ThinkRoutine.js";
 import * as React from "react";
-import { ThinkScheduledTaskSchedule } from "@cloudflare/think";
 
 //#region src/components/ThinkRoutineLibrary.d.ts
 interface ThinkRoutineLibraryDetailRenderProps<TRoutine extends ThinkRoutine = ThinkRoutine> {
@@ -12,37 +11,33 @@ interface ThinkRoutineLibraryDetailRenderProps<TRoutine extends ThinkRoutine = T
   /** Custom detail surfaces must honor this while invoking the supplied actions. */
   busy: boolean;
   onEnabledChange?: (enabled: boolean) => void;
-  onRunSelect?: (run: ThinkRoutineRunOf<TRoutine>) => void;
+  renderRunLink?: (run: ThinkRoutineRunOf<TRoutine>) => React.ReactElement;
 }
 interface ThinkRoutineLibraryProps<TRoutine extends ThinkRoutine = ThinkRoutine> extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
   /** App-owned routine catalog assembled from native Think and Agents records. */
   routines: readonly TRoutine[];
-  /** Agents available as owners when authoring a routine. */
-  owners: readonly ThinkRoutineOwner[];
-  /** Upstream Think schedule DSL values offered by the composed authoring form. */
-  schedules: readonly ThinkScheduledTaskSchedule[];
-  /** Selected routine id when selection is controlled by the host app. */
-  selectedRoutineId?: string;
-  /** Initial routine id when the library owns selection state. */
-  defaultSelectedRoutineId?: string;
-  /** Called when the user selects a routine from the collection. */
-  onSelectedRoutineIdChange?: (routineId: string) => void;
+  /** Routine selected by the current application route. */
+  selectedRoutineId: string | null;
+  /** App-authored TanStack Router Link for every routine destination. */
+  renderRoutineLink: (routine: TRoutine) => React.ReactElement;
+  /** App-authored TanStack Router Link to the routine creation route. */
+  createRoutineLink?: React.ReactElement;
+  /** App-authored TanStack Router Link to edit the selected routine. */
+  renderEditRoutineLink?: (routine: TRoutine) => React.ReactElement;
+  /** App-authored TanStack Router Link for recent execution destinations. */
+  renderRunLink?: (routine: TRoutine, run: ThinkRoutineRunOf<TRoutine>) => React.ReactElement;
+  /** Whether to show routine owners in the browser and detail. Defaults to true. */
+  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;
-  /** Opens a host-owned create route instead of the library's built-in form. */
-  onCreateRoutineRequest?: () => void;
-  /** Creates an app-owned routine from a whole native Think scheduled task. */
-  onCreateRoutine?: (request: ThinkRoutineCreateRequest) => void | Promise<void>;
-  /** Opens a host-owned editor for the selected routine. */
-  onEditRoutine?: (routine: TRoutine) => void;
   /** Starts the selected routine immediately. */
   onRunRoutine?: (routine: TRoutine) => void | Promise<void>;
   /** Activates or pauses the selected app-owned routine. */
   onRoutineEnabledChange?: (routine: TRoutine, enabled: boolean) => void | Promise<void>;
   /** Permanently removes the selected app-owned routine. */
   onDeleteRoutine?: (routine: TRoutine) => void | Promise<void>;
-  /** Opens one native Workflow or submission from the selected routine history. */
-  onRunSelect?: (routine: TRoutine, run: ThinkRoutineRunOf<TRoutine>) => void;
   /**
    * Replaces only the selected-routine surface while preserving the library
    * shell, navigation, actions, async state, and upstream routine contract.
@@ -52,29 +47,27 @@ interface ThinkRoutineLibraryProps<TRoutine extends ThinkRoutine = ThinkRoutine>
 /**
  * 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.
  */
 declare function ThinkRoutineLibrary<TRoutine extends ThinkRoutine = ThinkRoutine>({
   appBarLeading,
   className,
-  defaultSelectedRoutineId,
-  onCreateRoutine,
-  onCreateRoutineRequest,
+  createRoutineLink,
+  error: catalogError,
   onDeleteRoutine,
-  onEditRoutine,
   onRoutineEnabledChange,
   onRunRoutine,
-  onRunSelect,
-  onSelectedRoutineIdChange,
-  owners,
+  renderEditRoutineLink,
+  renderRoutineLink,
   renderRoutineDetail,
-  schedules,
+  renderRunLink,
   ref,
   routines,
   selectedRoutineId,
+  showOwner,
   ...props
 }: ThinkRoutineLibraryProps<TRoutine> & {
   ref?: React.Ref<HTMLDivElement>;

package/dist/components/ThinkRoutineLibrary.js

@@ -1,23 +1,23 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { F as PlayIcon, J as WarningIcon, V as SpinnerIcon, g as EllipsisIcon, n as ArrowLeftIcon } from "../icons--FqCZEc3.js";
-import { Button } from "./Button.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 { 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, onEdit, onRun, routineName }) {
+function RoutineTopBarActions({ busy, onDelete, editLink, onRun, routineName }) {
 	const [deleteOpen, setDeleteOpen] = React.useState(false);
 	const moreActionsRef = React.useRef(null);
-	const hasMenu = Boolean(onEdit || onDelete);
+	const hasMenu = Boolean(editLink || onDelete);
 	if (!onRun && !hasMenu) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(AppTopBar.Trailing, {
 		"aria-label": "Schedule actions",
@@ -39,8 +39,8 @@ function RoutineTopBarActions({ busy, onDelete, onEdit, onRun, routineName }) {
 		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 			align: "end",
 			sideOffset: 4,
-			children: /* @__PURE__ */ jsxs(Menu.Popup, { children: [onEdit ? /* @__PURE__ */ jsx(Menu.Item, {
-				onClick: onEdit,
+			children: /* @__PURE__ */ jsxs(Menu.Popup, { children: [editLink ? /* @__PURE__ */ jsx(Menu.Item, {
+				render: editLink,
 				children: "Edit schedule"
 			}) : null, onDelete ? /* @__PURE__ */ jsx(Menu.Item, {
 				variant: "destructive",
@@ -77,33 +77,25 @@ function RoutineTopBarActions({ busy, onDelete, onEdit, onRun, routineName }) {
 /**
 * 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({ appBarLeading, className, defaultSelectedRoutineId, onCreateRoutine, onCreateRoutineRequest, onDeleteRoutine, onEditRoutine, 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 requestCreate = onCreateRoutineRequest ?? (onCreateRoutine ? () => setView("create") : 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);
@@ -112,82 +104,60 @@ function ThinkRoutineLibrary({ appBarLeading, className, defaultSelectedRoutineI
 	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__ */ jsxs(AppTopBar.Leading, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
-					label: "Back to schedules",
-					onClick: () => setView("library"),
-					children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
-				}), appBarLeading] }), /* @__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 sigvelo-visually-hidden",
-				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__ */ jsxs(AppTopBar.Leading, { children: [sidebarToggle, appBarLeading] }),
-						/* @__PURE__ */ jsx(AppTopBar.Title, { children: selectedRoutine?.name ?? "Schedules" }),
+						/* @__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,
-							onEdit: selectedRoutine && onEditRoutine ? () => onEditRoutine(selectedRoutine) : void 0,
 							onDelete: selectedRoutine && onDeleteRoutine ? () => void perform(() => onDeleteRoutine(selectedRoutine), `Deleted ${selectedRoutine.name}.`) : void 0
 						})
 					]
 				}),
 				sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ThinkRoutineBrowser, {
 					routines,
-					selectedRoutineId: selectedRoutine?.id,
-					onCreateRoutine: requestCreate,
-					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();
 					}
 				}),
@@ -195,17 +165,24 @@ function ThinkRoutineLibrary({ appBarLeading, className, defaultSelectedRoutineI
 					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("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 && requestCreate ? /* @__PURE__ */ jsx(Button, {
-								className: "think-routine-library__empty-action",
-								type: "button",
-								color: "primary",
-								onClick: requestCreate,
+							!routines.length && createRoutineLink ? /* @__PURE__ */ jsx(NavigationLink, {
+								render: createRoutineLink,
+								className: buttonVariants({
+									color: "primary",
+									className: "think-routine-library__empty-action"
+								}),
 								children: "Create schedule"
 							}) : null
 						]

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> & {