@mcp-b/react-components 0.14.2 → 0.16.0

package/dist/components/ThinkRoutineBrowser.js

@@ -0,0 +1,156 @@
+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 { Tooltip } from "./Tooltip.js";
+import { Field } from "./Field.js";
+import { ToggleGroup } from "./ToggleGroup.js";
+import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ThinkRoutineBrowser.tsx
+function filterRoutines(routines, filter, query) {
+	const normalizedQuery = query.trim().toLocaleLowerCase();
+	return routines.filter((routine) => {
+		if (filter === "active" && !routine.enabled) return false;
+		if (filter === "paused" && routine.enabled) return false;
+		if (!normalizedQuery) return true;
+		return `${routine.name} ${routine.description ?? ""} ${routine.owner.name}`.toLocaleLowerCase().includes(normalizedQuery);
+	});
+}
+/** Searchable, filterable navigation for an app-owned collection of Think routines. */
+function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelectedRoutineIdChange, onCreateRoutine, 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",
+				children: "Schedules"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "think-routine-library__browser-toolbar",
+				children: [/* @__PURE__ */ jsx(ToggleGroup.Root, {
+					className: "think-routine-library__filters",
+					size: "sm",
+					"aria-label": "Filter schedules",
+					value: [filter],
+					onValueChange: (nextValue) => {
+						const nextFilter = nextValue[0];
+						if (!nextFilter) return;
+						setFilter(nextFilter);
+						retainVisibleSelection(filterRoutines(routines, nextFilter, query));
+					},
+					children: [
+						"all",
+						"active",
+						"paused"
+					].map((value) => /* @__PURE__ */ jsx(ToggleGroup.Item, {
+						type: "button",
+						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
+					}),
+					children: /* @__PURE__ */ jsx(PlusIcon, {})
+				}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+					side: "bottom",
+					sideOffset: 4,
+					children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: "Create schedule" })
+				}) })] }) : null]
+			}),
+			/* @__PURE__ */ jsxs(Field.Root, {
+				className: "think-routine-library__search",
+				name: "routine-search",
+				children: [/* @__PURE__ */ jsx(Field.Label, {
+					className: "think-routine-library__title",
+					children: "Search schedules"
+				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(SearchIcon, {}), /* @__PURE__ */ jsx(Field.Control, {
+					className: "think-routine-browser__search-control",
+					type: "search",
+					value: query,
+					placeholder: "Search schedules",
+					onChange: (event) => {
+						const nextQuery = event.currentTarget.value;
+						setQuery(nextQuery);
+						retainVisibleSelection(filterRoutines(routines, filter, nextQuery));
+					}
+				})] })]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "think-routine-library__status",
+				role: "status",
+				"aria-atomic": "true",
+				children: [
+					visibleRoutines.length,
+					" ",
+					visibleRoutines.length === 1 ? "schedule" : "schedules",
+					" shown."
+				]
+			}),
+			visibleRoutines.length ? /* @__PURE__ */ jsx("ul", {
+				className: "think-routine-library__routine-list",
+				role: "list",
+				children: visibleRoutines.map((routine) => {
+					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",
+							"aria-current": selected ? "page" : void 0,
+							onClick: () => onSelectedRoutineIdChange?.(routine.id),
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "think-routine-library__routine-status",
+									"data-enabled": routine.enabled || void 0,
+									"aria-hidden": "true"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "think-routine-library__title",
+									children: routine.enabled ? "Active" : "Paused"
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "think-routine-library__routine-copy",
+									children: [
+										/* @__PURE__ */ jsx("strong", { children: routine.name }),
+										/* @__PURE__ */ jsx("span", { children: routine.task.schedule }),
+										/* @__PURE__ */ jsxs("small", { children: [
+											routine.owner.name,
+											" · Next ",
+											getThinkRoutineNextRun(routine)
+										] })
+									]
+								})
+							]
+						})
+					}, routine.id);
+				})
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "think-routine-library__empty-list",
+				children: [/* @__PURE__ */ jsx("strong", { children: "No matching schedules" }), /* @__PURE__ */ jsx("p", { children: "Try another search or filter." })]
+			})
+		]
+	});
+}
+//#endregion
+export { ThinkRoutineBrowser };

package/dist/components/ThinkRoutineDetail.d.ts

@@ -0,0 +1,24 @@
+import { ThinkRoutine, ThinkRoutineRunOf } from "./ThinkRoutine.js";
+import * as React from "react";
+
+//#region src/components/ThinkRoutineDetail.d.ts
+interface ThinkRoutineDetailProps<TRoutine extends ThinkRoutine = ThinkRoutine> extends React.HTMLAttributes<HTMLElement> {
+  routine: TRoutine;
+  busy?: boolean;
+  onEnabledChange?: (enabled: boolean) => void;
+  onRunSelect?: (run: ThinkRoutineRunOf<TRoutine>) => void;
+}
+/** Readable definition, schedule settings, and recent executions for one routine. */
+declare function ThinkRoutineDetail<TRoutine extends ThinkRoutine = ThinkRoutine>({
+  busy,
+  className,
+  routine,
+  onEnabledChange,
+  onRunSelect,
+  ref,
+  ...props
+}: ThinkRoutineDetailProps<TRoutine> & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+//#endregion
+export { ThinkRoutineDetail, ThinkRoutineDetailProps };

package/dist/components/ThinkRoutineDetail.js

@@ -0,0 +1,102 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Badge } from "./Badge.js";
+import { Switch } from "./Switch.js";
+import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
+import { ThinkRoutineRuns } from "./ThinkRoutineRuns.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ThinkRoutineDetail.tsx
+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 }) {
+	const titleId = React.useId();
+	const definitionId = React.useId();
+	const settingsId = React.useId();
+	const enabledLabelId = React.useId();
+	return /* @__PURE__ */ jsxs("article", {
+		ref,
+		className: cx("think-routine-detail", "think-routine-library__detail", className),
+		"aria-labelledby": titleId,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				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
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "think-routine-library__detail-grid",
+				children: [/* @__PURE__ */ jsxs("section", {
+					className: "think-routine-library__definition",
+					"aria-labelledby": definitionId,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "think-routine-library__section-heading",
+						children: /* @__PURE__ */ jsx("h2", {
+							id: definitionId,
+							children: "Instructions"
+						})
+					}), /* @__PURE__ */ jsx("p", {
+						className: "think-routine-library__instructions",
+						children: taskInstructions(routine)
+					})]
+				}), /* @__PURE__ */ jsxs("aside", {
+					className: "think-routine-library__settings",
+					"aria-labelledby": settingsId,
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "think-routine-library__section-heading",
+							children: /* @__PURE__ */ jsx("h2", {
+								id: settingsId,
+								children: "Schedule"
+							})
+						}),
+						/* @__PURE__ */ jsxs("dl", {
+							className: "think-routine-library__facts",
+							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 })] })
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "think-routine-library__status-control",
+							children: [/* @__PURE__ */ jsx("div", {
+								id: enabledLabelId,
+								children: /* @__PURE__ */ jsx("strong", { children: "Enabled" })
+							}), onEnabledChange ? /* @__PURE__ */ jsx(Switch.Root, {
+								"aria-labelledby": enabledLabelId,
+								checked: routine.enabled,
+								disabled: busy,
+								onCheckedChange: onEnabledChange,
+								children: /* @__PURE__ */ jsx(Switch.Thumb, {})
+							}) : /* @__PURE__ */ jsx("span", { children: routine.enabled ? "On" : "Off" })]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(ThinkRoutineRuns, {
+				runs: routine.runs,
+				onRunSelect
+			})
+		]
+	});
+}
+//#endregion
+export { ThinkRoutineDetail };

package/dist/components/ThinkRoutineForm.d.ts

@@ -0,0 +1,32 @@
+import { ThinkRoutineCreateRequest, ThinkRoutineOwner } from "./ThinkRoutine.js";
+import * as React from "react";
+import { ThinkScheduledTaskSchedule } from "@cloudflare/think";
+
+//#region src/components/ThinkRoutineForm.d.ts
+interface ThinkRoutineFormProps extends React.HTMLAttributes<HTMLElement> {
+  busy?: boolean;
+  owners: readonly ThinkRoutineOwner[];
+  /**
+   * Upstream Think schedule DSL values the host permits. Use an inline
+   * timezone for a schedule-specific wall clock, or let the agent's
+   * `getDefaultTimezone()` own wall-clock fallback behavior.
+   */
+  schedules: readonly ThinkScheduledTaskSchedule[];
+  onCancel?: () => void;
+  onCreate: (request: ThinkRoutineCreateRequest) => void;
+}
+/** Authoring surface for a serializable, prompt-based Think scheduled task. */
+declare function ThinkRoutineForm({
+  busy,
+  className,
+  owners,
+  onCancel,
+  onCreate,
+  schedules,
+  ref,
+  ...props
+}: ThinkRoutineFormProps & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+//#endregion
+export { ThinkRoutineForm, ThinkRoutineFormProps };

package/dist/components/ThinkRoutineForm.js

@@ -0,0 +1,151 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { B as SpinnerIcon } from "../icons-CpfUer49.js";
+import { Button } from "./Button.js";
+import { Field } from "./Field.js";
+import { Form } from "./Form.js";
+import { Textarea } from "./Textarea.js";
+import { Select } from "./Select.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ThinkRoutineForm.tsx
+function RoutineSelect({ label, onValueChange, options, value }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "think-routine-library__select-field",
+		children: /* @__PURE__ */ jsxs(Select.Root, {
+			items: options,
+			value,
+			onValueChange: (nextValue) => {
+				if (typeof nextValue === "string") onValueChange(nextValue);
+			},
+			children: [
+				/* @__PURE__ */ jsx(Select.Label, { children: label }),
+				/* @__PURE__ */ jsxs(Select.Trigger, { children: [/* @__PURE__ */ jsx(Select.Value, {}), /* @__PURE__ */ jsx(Select.Icon, {})] }),
+				/* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+					sideOffset: 4,
+					children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsx(Select.List, { children: options.map((option) => /* @__PURE__ */ jsxs(Select.Item, {
+						value: option.value,
+						children: [/* @__PURE__ */ jsx(Select.ItemText, { children: option.label }), /* @__PURE__ */ jsx(Select.ItemIndicator, {})]
+					}, option.value)) }) })
+				}) })
+			]
+		})
+	});
+}
+/** Authoring surface for a serializable, prompt-based Think scheduled task. */
+function ThinkRoutineForm({ busy = false, className, owners, onCancel, onCreate, schedules, ref, ...props }) {
+	const [name, setName] = React.useState("");
+	const [ownerId, setOwnerId] = React.useState(owners[0]?.id ?? "");
+	const [prompt, setPrompt] = React.useState("");
+	const [schedule, setSchedule] = React.useState(schedules[0] ?? null);
+	const titleId = React.useId();
+	return /* @__PURE__ */ jsxs("main", {
+		ref,
+		className: cx("think-routine-form", "think-routine-library__create", className),
+		"aria-labelledby": titleId,
+		...props,
+		children: [/* @__PURE__ */ jsx("header", {
+			className: "think-routine-library__create-header",
+			children: /* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "think-routine-library__eyebrow",
+					children: "New schedule"
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					id: titleId,
+					children: "What should run automatically?"
+				}),
+				/* @__PURE__ */ jsx("p", { children: "Give an agent clear instructions, then choose when Think should submit them." })
+			] })
+		}), /* @__PURE__ */ jsxs(Form, {
+			className: "think-routine-library__form",
+			onSubmit: (event) => {
+				event.preventDefault();
+				if (!name.trim() || !prompt.trim() || !ownerId || !schedule) return;
+				const task = {
+					schedule,
+					prompt: prompt.trim()
+				};
+				onCreate({
+					name: name.trim(),
+					ownerId,
+					task
+				});
+			},
+			children: [/* @__PURE__ */ jsxs(Field.Group, { children: [
+				/* @__PURE__ */ jsxs(Field.Root, {
+					name: "name",
+					children: [
+						/* @__PURE__ */ jsx(Field.Label, { children: "Name" }),
+						/* @__PURE__ */ jsx(Field.Control, {
+							name: "name",
+							value: name,
+							required: true,
+							autoComplete: "off",
+							placeholder: "Weekly project review",
+							onChange: (event) => setName(event.currentTarget.value)
+						}),
+						/* @__PURE__ */ jsx(Field.Error, {
+							match: "valueMissing",
+							children: "Name is required"
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs(Field.Root, {
+					name: "prompt",
+					children: [
+						/* @__PURE__ */ jsx(Field.Label, { children: "Instructions" }),
+						/* @__PURE__ */ jsx(Field.Description, { children: "Describe the outcome, sources, and what to do when blocked." }),
+						/* @__PURE__ */ jsx(Field.Control, {
+							render: /* @__PURE__ */ jsx(Textarea, { rows: 8 }),
+							name: "prompt",
+							value: prompt,
+							required: true,
+							placeholder: "Review open pull requests, summarize blockers, and draft a concise project update.",
+							onChange: (event) => setPrompt(event.currentTarget.value)
+						}),
+						/* @__PURE__ */ jsx(Field.Error, {
+							match: "valueMissing",
+							children: "Instructions are required"
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "think-routine-library__form-row",
+					children: [/* @__PURE__ */ jsx(RoutineSelect, {
+						label: "Agent",
+						value: ownerId,
+						options: owners.map((owner) => ({
+							label: owner.name,
+							value: owner.id
+						})),
+						onValueChange: setOwnerId
+					}), schedule ? /* @__PURE__ */ jsx(RoutineSelect, {
+						label: "Repeats",
+						value: schedule,
+						options: schedules.map((value) => ({
+							label: value,
+							value
+						})),
+						onValueChange: setSchedule
+					}) : /* @__PURE__ */ jsx("p", { children: "No schedules are available." })]
+				})
+			] }), /* @__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: "Cancel"
+				}) : null, /* @__PURE__ */ jsxs(Button, {
+					type: "submit",
+					disabled: busy || owners.length === 0 || !schedule,
+					children: [busy ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : null, " Create schedule"]
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { ThinkRoutineForm };

package/dist/components/ThinkRoutineLibrary.d.ts

@@ -0,0 +1,74 @@
+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> {
+  /** The selected routine, including any app-owned extension fields. */
+  routine: TRoutine;
+  /** The standard upstream-first detail surface. Compose this into extensions. */
+  defaultDetail: React.ReactNode;
+  /** Custom detail surfaces must honor this while invoking the supplied actions. */
+  busy: boolean;
+  onEnabledChange?: (enabled: boolean) => void;
+  onRunSelect?: (run: ThinkRoutineRunOf<TRoutine>) => void;
+}
+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>;
+  /** 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.
+   */
+  renderRoutineDetail?: (props: ThinkRoutineLibraryDetailRenderProps<TRoutine>) => React.ReactNode;
+}
+/**
+ * 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.
+ * The application shell composes `ThinkRoutineBrowser`, `ThinkRoutineDetail`,
+ * `ThinkRoutineRuns`, and `ThinkRoutineForm`; consumers may also use those
+ * surfaces independently.
+ */
+declare function ThinkRoutineLibrary<TRoutine extends ThinkRoutine = ThinkRoutine>({
+  className,
+  defaultSelectedRoutineId,
+  onCreateRoutine,
+  onDeleteRoutine,
+  onRoutineEnabledChange,
+  onRunRoutine,
+  onRunSelect,
+  onSelectedRoutineIdChange,
+  owners,
+  renderRoutineDetail,
+  schedules,
+  ref,
+  routines,
+  selectedRoutineId,
+  ...props
+}: ThinkRoutineLibraryProps<TRoutine> & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { type ThinkRoutine, type ThinkRoutineCreateRequest, ThinkRoutineLibrary, ThinkRoutineLibraryDetailRenderProps, ThinkRoutineLibraryProps, type ThinkRoutineOwner, type ThinkExecutionRun as ThinkRoutineRun, type ThinkRoutineRunOf };