@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/components/ThinkRoutineBrowser.d.ts

@@ -3,22 +3,30 @@ import * as React from "react";
 
 //#region src/components/ThinkRoutineBrowser.d.ts
 type ThinkRoutineFilter = "all" | "active" | "paused";
-interface ThinkRoutineBrowserProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> {
-  routines: readonly ThinkRoutine[];
-  selectedRoutineId?: string;
-  onSelectedRoutineIdChange?: (routineId: string) => void;
-  onCreateRoutine?: () => void;
+interface ThinkRoutineBrowserProps<TRoutine extends ThinkRoutine = ThinkRoutine> extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> {
+  routines: readonly TRoutine[];
+  /** Routine selected by the current application route. */
+  selectedRoutineId?: string | null;
+  showOwner?: boolean;
+  /** App-authored TanStack Router Link for each durable routine destination. */
+  renderRoutineLink: (routine: TRoutine) => React.ReactElement;
+  /** App-authored TanStack Router Link to the routine creation route. */
+  createRoutineLink?: React.ReactElement;
+  /** Optional UI-only response after a routine link is activated. */
+  onRoutineLinkClick?: React.MouseEventHandler<HTMLAnchorElement>;
 }
 /** Searchable, filterable navigation for an app-owned collection of Think routines. */
-declare function ThinkRoutineBrowser({
+declare function ThinkRoutineBrowser<TRoutine extends ThinkRoutine = ThinkRoutine>({
   className,
   routines,
   selectedRoutineId,
-  onSelectedRoutineIdChange,
-  onCreateRoutine,
+  showOwner,
+  renderRoutineLink,
+  createRoutineLink,
+  onRoutineLinkClick,
   ref,
   ...props
-}: ThinkRoutineBrowserProps & {
+}: ThinkRoutineBrowserProps<TRoutine> & {
   ref?: React.Ref<HTMLElement>;
 }): React.JSX.Element;
 //#endregion

package/dist/components/ThinkRoutineBrowser.js

@@ -1,8 +1,9 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { F as PlusIcon, R as SearchIcon } from "../icons-CpfUer49.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,23 +19,17 @@ 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),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("h2", {
-				className: "think-routine-library__title",
+				className: "think-routine-library__title sigvelo-visually-hidden",
 				children: "Schedules"
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -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,26 +71,20 @@ 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, {
-					className: "think-routine-library__title",
+				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",
+				className: "think-routine-library__status sigvelo-visually-hidden",
 				role: "status",
 				"aria-atomic": "true",
 				children: [
@@ -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",
@@ -126,7 +118,7 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 									"aria-hidden": "true"
 								}),
 								/* @__PURE__ */ jsx("span", {
-									className: "think-routine-library__title",
+									className: "think-routine-library__title sigvelo-visually-hidden",
 									children: routine.enabled ? "Active" : "Paused"
 								}),
 								/* @__PURE__ */ jsxs("span", {
@@ -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-9UtZwb0J.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-9UtZwb0J.js";
-import { B as SpinnerIcon } from "../icons-CpfUer49.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,31 +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;
-  /** Creates an app-owned routine from a whole native Think scheduled task. */
-  onCreateRoutine?: (request: ThinkRoutineCreateRequest) => void | Promise<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;
   /** 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.
@@ -46,26 +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,
+  createRoutineLink,
+  error: catalogError,
   onDeleteRoutine,
   onRoutineEnabledChange,
   onRunRoutine,
-  onRunSelect,
-  onSelectedRoutineIdChange,
-  owners,
+  renderEditRoutineLink,
+  renderRoutineLink,
   renderRoutineDetail,
-  schedules,
+  renderRunLink,
   ref,
   routines,
   selectedRoutineId,
+  showOwner,
   ...props
 }: ThinkRoutineLibraryProps<TRoutine> & {
   ref?: React.Ref<HTMLDivElement>;