@mcp-b/react-components 0.14.1 → 0.16.0

package/dist/components/ThinkRoutineLibrary.js

@@ -0,0 +1,178 @@
+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 { Menu } from "./Menu.js";
+import { AppTopBar } from "./AppTopBar.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";
+//#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, {
+		"aria-label": "Schedule actions",
+		children: [onRun ? /* @__PURE__ */ jsx(AppTopBar.Button, {
+			label: "Run schedule",
+			tooltip: "Run now",
+			disabled: busy,
+			onClick: onRun,
+			children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
+		}) : null, onDelete ? /* @__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 }),
+			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, {
+				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.
+* The application shell composes `ThinkRoutineBrowser`, `ThinkRoutineDetail`,
+* `ThinkRoutineRuns`, and `ThinkRoutineForm`; consumers may also use those
+* 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 ?? "");
+	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 perform = async (action, message) => {
+		setBusy(true);
+		setError(null);
+		try {
+			await action();
+			setAnnouncement(message);
+			return true;
+		} catch (nextError) {
+			setError(errorMessage(nextError));
+			return false;
+		} finally {
+			setBusy(false);
+		}
+	};
+	const detailProps = selectedRoutine ? {
+		routine: selectedRoutine,
+		busy,
+		onRunSelect: onRunSelect ? (run) => onRunSelect(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", {
+				className: "think-routine-library__error",
+				role: "alert",
+				children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: error })]
+			}) : null,
+			/* @__PURE__ */ jsx(ResponsiveSidebarShell, {
+				className: "think-routine-library__layout",
+				sidebarLabel: "schedules",
+				toolbarLabel: "Schedule navigation controls",
+				showMainLabel: "Show selected schedule",
+				topBar: ({ sidebarToggle }) => /* @__PURE__ */ jsxs(AppTopBar.Root, {
+					"aria-label": "Schedule controls",
+					children: [
+						/* @__PURE__ */ jsx(AppTopBar.Leading, { children: sidebarToggle }),
+						/* @__PURE__ */ jsx(AppTopBar.Title, { children: selectedRoutine?.name ?? "Schedules" }),
+						/* @__PURE__ */ jsx(RoutineTopBarActions, {
+							busy,
+							onRun: selectedRoutine && onRunRoutine ? () => void perform(() => onRunRoutine(selectedRoutine), `Started ${selectedRoutine.name}.`) : void 0,
+							onDelete: selectedRoutine && onDeleteRoutine ? () => void perform(() => onDeleteRoutine(selectedRoutine), `Deleted ${selectedRoutine.name}.`) : void 0
+						})
+					]
+				}),
+				sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ThinkRoutineBrowser, {
+					routines,
+					selectedRoutineId: selectedRoutine?.id,
+					onCreateRoutine: onCreateRoutine ? () => setView("create") : void 0,
+					onSelectedRoutineIdChange: (id) => {
+						selectRoutine(id);
+						closeSidebarOnCompact();
+					}
+				}),
+				children: /* @__PURE__ */ jsx("main", {
+					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", {
+						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." })]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "think-routine-library__status",
+				role: "status",
+				"aria-atomic": "true",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+export { ThinkRoutineLibrary };

package/dist/components/ThinkRoutineRuns.d.ts

@@ -0,0 +1,24 @@
+import { t as ThinkExecutionRun } from "../ThinkExecutionRun-ChhWhOoU.js";
+import * as React from "react";
+
+//#region src/components/ThinkRoutineRuns.d.ts
+interface ThinkRoutineRunsProps<TRun extends ThinkExecutionRun = ThinkExecutionRun> extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  runs: readonly TRun[];
+  title?: React.ReactNode;
+  emptyState?: React.ReactNode;
+  onRunSelect?: (run: TRun) => void;
+}
+/** Compact execution history shared by routine detail surfaces. */
+declare function ThinkRoutineRuns<TRun extends ThinkExecutionRun = ThinkExecutionRun>({
+  className,
+  runs,
+  title,
+  emptyState,
+  onRunSelect,
+  ref,
+  ...props
+}: ThinkRoutineRunsProps<TRun> & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+//#endregion
+export { ThinkRoutineRuns, ThinkRoutineRunsProps };

package/dist/components/ThinkRoutineRuns.js

@@ -0,0 +1,68 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } 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";
+//#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 }) {
+	const titleId = React.useId();
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		className: cx("think-routine-runs", "think-routine-library__runs", className),
+		"aria-labelledby": titleId,
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "think-routine-library__section-heading",
+			children: [/* @__PURE__ */ jsx("h2", {
+				id: titleId,
+				children: title
+			}), /* @__PURE__ */ jsx(Badge, {
+				variant: "ghost",
+				color: "neutral",
+				size: "sm",
+				"aria-label": `${runs.length} recorded runs`,
+				children: runs.length
+			})]
+		}), runs.length ? /* @__PURE__ */ jsx("ol", {
+			className: "think-routine-library__run-list",
+			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",
+						variant: "ghost",
+						color: "neutral",
+						size: "sm",
+						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
+							})
+						]
+					})
+				}, `${kind}:${getThinkExecutionRunId(run)}`);
+			})
+		}) : /* @__PURE__ */ jsx("p", {
+			className: "think-routine-library__empty-runs",
+			children: emptyState
+		})]
+	});
+}
+//#endregion
+export { ThinkRoutineRuns };

package/dist/components/ThinkThreadPicker.d.ts

@@ -19,6 +19,18 @@ interface ThinkThreadItem {
   /** Human label for `status` when the raw upstream value is not user-facing. */
   statusLabel?: string;
 }
+interface ThinkThreadStatusSummary {
+  /** Threads currently processing a turn. */
+  running: number;
+  /** Completed or interrupted background threads that have not been reviewed. */
+  attention: number;
+  /** Threads whose latest turn failed. */
+  failed: number;
+}
+interface ThinkThreadStatusIndicatorsProps {
+  summary: ThinkThreadStatusSummary;
+  className?: string;
+}
 interface ThinkThreadPickerProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect" | "title"> {
   /** Threads from the parent agent, already sorted in the order the app wants to show. */
   threads: readonly ThinkThreadItem[];
@@ -33,6 +45,11 @@ interface ThinkThreadPickerProps extends Omit<React.HTMLAttributes<HTMLElement>,
   /** Accessible label for the list navigation. */
   "aria-label"?: string;
 }
+declare function summarizeThinkThreads(threads: readonly Pick<ThinkThreadItem, "status">[]): ThinkThreadStatusSummary;
+declare function ThinkThreadStatusIndicators({
+  summary,
+  className
+}: ThinkThreadStatusIndicatorsProps): React.JSX.Element | null;
 /**
  * Thread roster UI for sub-agent chat apps.
  *
@@ -55,4 +72,4 @@ declare function ThinkThreadPicker({
   ref?: React.Ref<HTMLElement>;
 }): React.JSX.Element;
 //#endregion
-export { ThinkThreadItem, ThinkThreadPicker, ThinkThreadPickerProps };
+export { ThinkThreadItem, ThinkThreadPicker, ThinkThreadPickerProps, ThinkThreadStatusIndicators, ThinkThreadStatusIndicatorsProps, ThinkThreadStatusSummary, summarizeThinkThreads };

package/dist/components/ThinkThreadPicker.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { N as SpinnerIcon, k as PlusIcon, u as DotIcon } from "../icons-Ba9THQKz.js";
+import { B as SpinnerIcon, F as PlusIcon, p as DotIcon, q as WarningIcon } from "../icons-CpfUer49.js";
 import { Button } from "./Button.js";
 import { ScrollArea } from "./ScrollArea.js";
 import "react";
@@ -49,6 +49,51 @@ function formatThreadStatus(thread) {
 function isThreadBusy(status) {
 	return status === "pending" || status === "running" || status === "starting" || status === "streaming" || status === "submitted" || status === "recovering";
 }
+function summarizeThinkThreads(threads) {
+	return threads.reduce((summary, thread) => {
+		if (isThreadBusy(thread.status)) summary.running += 1;
+		else if (thread.status === "error" || thread.status === "failed") summary.failed += 1;
+		else if (thread.status === "attention" || thread.status === "completed" || thread.status === "aborted" || thread.status === "interrupted") summary.attention += 1;
+		return summary;
+	}, {
+		running: 0,
+		attention: 0,
+		failed: 0
+	});
+}
+function formatStatusSummary(summary) {
+	return [
+		summary.running ? `${summary.running} running` : void 0,
+		summary.attention ? `${summary.attention} need attention` : void 0,
+		summary.failed ? `${summary.failed} failed` : void 0
+	].filter(Boolean).join(", ");
+}
+function ThinkThreadStatusIndicators({ summary, className }) {
+	const label = formatStatusSummary(summary);
+	if (!label) return null;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("think-thread-status-indicators", className),
+		role: "img",
+		"aria-label": label,
+		children: [
+			summary.running ? /* @__PURE__ */ jsxs("span", {
+				className: "think-thread-status-indicators__item",
+				"data-status": "running",
+				children: [/* @__PURE__ */ jsx(SpinnerIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: summary.running })]
+			}) : null,
+			summary.attention ? /* @__PURE__ */ jsxs("span", {
+				className: "think-thread-status-indicators__item",
+				"data-status": "attention",
+				children: [/* @__PURE__ */ jsx(DotIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: summary.attention })]
+			}) : null,
+			summary.failed ? /* @__PURE__ */ jsxs("span", {
+				className: "think-thread-status-indicators__item",
+				"data-status": "failed",
+				children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: summary.failed })]
+			}) : null
+		]
+	});
+}
 /**
 * Thread roster UI for sub-agent chat apps.
 *
@@ -58,17 +103,18 @@ function isThreadBusy(status) {
 * parent Think agent because `listThreads()`/`createThread()` are app-owned.
 */
 function ThinkThreadPicker({ threads, selectedId, onSelect, onCreate, className, title = "Recents", "aria-label": ariaLabel = "Threads", ref, ...props }) {
+	const statusSummary = summarizeThinkThreads(threads);
 	return /* @__PURE__ */ jsxs("aside", {
 		ref,
 		className: cx("think-thread-picker", className),
 		...props,
 		children: [
-			/* @__PURE__ */ jsx("header", {
+			/* @__PURE__ */ jsxs("header", {
 				className: "think-thread-picker__header",
-				children: /* @__PURE__ */ jsx("h2", {
+				children: [/* @__PURE__ */ jsx("h2", {
 					className: "think-thread-picker__title",
 					children: title
-				})
+				}), /* @__PURE__ */ jsx(ThinkThreadStatusIndicators, { summary: statusSummary })]
 			}),
 			/* @__PURE__ */ jsx("nav", {
 				className: "think-thread-picker__nav",
@@ -140,4 +186,4 @@ function ThinkThreadPicker({ threads, selectedId, onSelect, onCreate, className,
 	});
 }
 //#endregion
-export { ThinkThreadPicker };
+export { ThinkThreadPicker, ThinkThreadStatusIndicators, summarizeThinkThreads };

package/dist/components/ThinkThreadShell.d.ts

@@ -1,32 +1,35 @@
+import { t as ResponsiveSidebarShell } from "../ResponsiveSidebarShell-Dd9DCcBT.js";
 import * as React from "react";
 
 //#region src/components/ThinkThreadShell.d.ts
 interface ThinkThreadShellProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Thread picker or app-owned sidebar shown beside the selected child shell. */
-  sidebar: React.ReactNode;
+  /**
+   * Thread picker or app-owned sidebar shown beside the selected child shell.
+   * Use the render form to close the compact drawer when a thread is selected.
+   */
+  sidebar: React.ComponentProps<typeof ResponsiveSidebarShell>["sidebar"];
   /** Whether the thread drawer is open. Omit for internal state. */
   sidebarOpen?: boolean;
   /** Initial thread drawer state when `sidebarOpen` is uncontrolled. */
   defaultSidebarOpen?: boolean;
   /** Called when the thread drawer is opened or closed. */
   onSidebarOpenChange?: (open: boolean) => void;
+  /** Application bar composed with the shell-owned thread toggle. */
+  topBar?: React.ComponentProps<typeof ResponsiveSidebarShell>["topBar"];
 }
 /**
- * Layout wrapper for a thread picker beside one selected `ThinkFullApp`.
- *
- * Mobile keeps the drawer at about 80% width so the selected chat remains
- * visible as a preview. It only owns layout; callers still own the parent agent,
- * selected child agent, chat hook, and shared workspace.
+ * Thread-specific adapter for ResponsiveSidebarShell. Callers still own the
+ * parent agent, selected child agent, chat hook, and shared workspace.
  */
 declare function ThinkThreadShell({
   sidebar,
   sidebarOpen,
   defaultSidebarOpen,
   onSidebarOpenChange,
-  className,
+  topBar,
   children,
+  className,
   ref,
-  style,
   ...props
 }: ThinkThreadShellProps & {
   ref?: React.Ref<HTMLDivElement>;

package/dist/components/ThinkThreadShell.js

@@ -1,145 +1,25 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { M as SidebarIcon } from "../icons-Ba9THQKz.js";
-import { Separator } from "./Separator.js";
-import { Button } from "./Button.js";
-import { Tooltip } from "./Tooltip.js";
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { ResponsiveSidebarShell } from "./ResponsiveSidebarShell.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/ThinkThreadShell.tsx
-const threadSidebarDefaultWidth = 256;
-const threadSidebarMinWidth = 224;
-const threadSidebarMaxWidth = 384;
-const threadSidebarKeyboardStep = 24;
-function useControllableSidebar({ sidebarOpen, defaultSidebarOpen, onSidebarOpenChange }) {
-	const [innerOpen, setInnerOpen] = React.useState(defaultSidebarOpen ?? true);
-	return [sidebarOpen ?? innerOpen, React.useCallback((next) => {
-		if (sidebarOpen === void 0) setInnerOpen(next);
-		onSidebarOpenChange?.(next);
-	}, [sidebarOpen, onSidebarOpenChange])];
-}
-function clampThreadSidebarWidth(width) {
-	return Math.min(threadSidebarMaxWidth, Math.max(threadSidebarMinWidth, width));
-}
-function beginThreadSidebarResize(event, current, apply) {
-	event.preventDefault();
-	const startX = event.clientX;
-	const onMove = (move) => {
-		apply(clampThreadSidebarWidth(current + move.clientX - startX));
-	};
-	const onUp = () => {
-		window.removeEventListener("pointermove", onMove);
-		window.removeEventListener("pointerup", onUp);
-		window.removeEventListener("pointercancel", onUp);
-		document.body.classList.remove("is-resizing-think-thread-shell");
-	};
-	document.body.classList.add("is-resizing-think-thread-shell");
-	window.addEventListener("pointermove", onMove);
-	window.addEventListener("pointerup", onUp);
-	window.addEventListener("pointercancel", onUp);
-}
 /**
-* Layout wrapper for a thread picker beside one selected `ThinkFullApp`.
-*
-* Mobile keeps the drawer at about 80% width so the selected chat remains
-* visible as a preview. It only owns layout; callers still own the parent agent,
-* selected child agent, chat hook, and shared workspace.
+* Thread-specific adapter for ResponsiveSidebarShell. Callers still own the
+* parent agent, selected child agent, chat hook, and shared workspace.
 */
-function ThinkThreadShell({ sidebar, sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, className, children, ref, style, ...props }) {
-	const sidebarId = React.useId();
-	const [isSidebarOpen, setSidebarOpen] = useControllableSidebar({
+function ThinkThreadShell({ sidebar, sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, topBar, children, className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(ResponsiveSidebarShell, {
+		...props,
+		ref,
+		className: ["think-thread-shell", className].filter(Boolean).join(" "),
+		sidebar,
+		sidebarLabel: "threads",
 		sidebarOpen,
 		defaultSidebarOpen,
-		onSidebarOpenChange
-	});
-	const [sidebarWidth, setSidebarWidth] = React.useState(threadSidebarDefaultWidth);
-	const toggleLabel = isSidebarOpen ? "Hide threads" : "Show threads";
-	const rootStyle = {
-		...style,
-		"--think-thread-sidebar-w": `${sidebarWidth}px`
-	};
-	const resizeThreadSidebarBy = (delta) => {
-		setSidebarWidth((current) => clampThreadSidebarWidth(current + delta));
-	};
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("think-thread-shell", className),
-		style: rootStyle,
-		...props,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "think-thread-shell__frame",
-			"data-sidebar-open": isSidebarOpen ? "true" : "false",
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "think-thread-shell__toolbar",
-					role: "toolbar",
-					"aria-label": "Thread controls",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "think-thread-shell__panel-toggle",
-						children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(Button, {
-							type: "button",
-							variant: "ghost",
-							color: "neutral",
-							size: "icon",
-							"aria-label": toggleLabel,
-							"aria-controls": sidebarId,
-							"aria-expanded": isSidebarOpen,
-							"aria-pressed": isSidebarOpen,
-							"data-selected": isSidebarOpen,
-							onClick: () => setSidebarOpen(!isSidebarOpen),
-							children: /* @__PURE__ */ jsx(SidebarIcon, {})
-						}) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
-							side: "bottom",
-							sideOffset: 6,
-							children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: toggleLabel })
-						}) })] })
-					})
-				}),
-				isSidebarOpen ? /* @__PURE__ */ jsx(Separator, {
-					decorative: false,
-					orientation: "vertical",
-					tabIndex: 0,
-					"aria-label": "Resize threads panel",
-					"aria-valuemin": threadSidebarMinWidth,
-					"aria-valuemax": threadSidebarMaxWidth,
-					"aria-valuenow": sidebarWidth,
-					className: "think-resize-handle think-thread-shell__resizer",
-					onPointerDown: (event) => beginThreadSidebarResize(event, sidebarWidth, setSidebarWidth),
-					onKeyDown: (event) => {
-						if (event.key === "ArrowLeft") {
-							event.preventDefault();
-							resizeThreadSidebarBy(-24);
-						} else if (event.key === "ArrowRight") {
-							event.preventDefault();
-							resizeThreadSidebarBy(threadSidebarKeyboardStep);
-						} else if (event.key === "Home") {
-							event.preventDefault();
-							setSidebarWidth(threadSidebarMinWidth);
-						} else if (event.key === "End") {
-							event.preventDefault();
-							setSidebarWidth(threadSidebarMaxWidth);
-						}
-					}
-				}) : null,
-				/* @__PURE__ */ jsx("div", {
-					id: sidebarId,
-					className: "think-thread-shell__sidebar",
-					"aria-hidden": isSidebarOpen ? void 0 : true,
-					inert: isSidebarOpen ? void 0 : true,
-					children: sidebar
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "think-thread-shell__main",
-					children
-				}),
-				isSidebarOpen ? /* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
-					color: "neutral",
-					className: "think-thread-shell__peek",
-					"aria-label": "Show selected thread",
-					onClick: () => setSidebarOpen(false)
-				}) : null
-			]
-		})
+		onSidebarOpenChange,
+		topBar,
+		toolbarLabel: "Thread controls",
+		showMainLabel: "Show selected thread",
+		children
 	});
 }
 //#endregion

package/dist/components/Toggle.d.ts

@@ -1,69 +1,2 @@
-import * as React from "react";
-import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
-
-//#region src/components/Toggle.d.ts
-interface ToggleVariantsOptions {
-  variant?: "default" | "outline" | null;
-  size?: "default" | "sm" | "lg" | null;
-  className?: string;
-}
-/**
- * Props for the Toggle component.
- */
-interface ToggleProps extends Omit<React.ComponentPropsWithoutRef<typeof Toggle$1>, "className">, ToggleVariantsOptions {}
-declare function toggleVariants({
-  variant,
-  size,
-  className
-}?: ToggleVariantsOptions): string;
-/**
- * A two-state button that can be on (pressed) or off.
- * Useful for toggling a setting or mode.
- *
- * @example
- * ```tsx
- * // Basic toggle
- * <Toggle>
- *   Bold
- * </Toggle>
- * ```
- *
- * @example
- * ```tsx
- * // Controlled toggle
- * const [pressed, setPressed] = useState(false);
- *
- * <Toggle pressed={pressed} onPressedChange={setPressed}>
- *   {pressed ? 'On' : 'Off'}
- * </Toggle>
- * ```
- *
- * @example
- * ```tsx
- * // With icons
- * <Toggle>
- *   {({ pressed }) => pressed ? <BoldIcon filled /> : <BoldIcon />}
- * </Toggle>
- * ```
- *
- * @example
- * ```tsx
- * // Default pressed state
- * <Toggle defaultPressed>
- *   Enabled
- * </Toggle>
- * ```
- *
- * @see {@link https://base-ui.com/react/components/toggle | Base UI Toggle}
- */
-declare function Toggle({
-  className,
-  variant,
-  size,
-  ref,
-  ...props
-}: ToggleProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-//#endregion
+import { i as toggleVariants, n as ToggleProps, r as ToggleVariantsOptions, t as Toggle } from "../Toggle-CAAlNl-M.js";
 export { Toggle, ToggleProps, ToggleVariantsOptions, toggleVariants };