@mcp-b/react-components 0.34.1 → 0.36.0

package/dist/components/foundations/Slider.js

@@ -8,28 +8,30 @@ import { Slider as Slider$1 } from "@base-ui/react/slider";
 *
 * @example
 * ```tsx
-* <Slider defaultValue={50}>
-*   <SliderControl>
-*     <SliderTrack>
-*       <SliderIndicator />
-*       <SliderThumb />
-*     </SliderTrack>
-*   </SliderControl>
-* </Slider>
+* <Slider.Root defaultValue={50}>
+*   <Slider.Label>Volume</Slider.Label>
+*   <Slider.Control>
+*     <Slider.Track>
+*       <Slider.Indicator />
+*       <Slider.Thumb />
+*     </Slider.Track>
+*   </Slider.Control>
+* </Slider.Root>
 * ```
 *
 * @example
 * ```tsx
 * // With output value display
-* <Slider defaultValue={50}>
-*   <SliderOutput />
-*   <SliderControl>
-*     <SliderTrack>
-*       <SliderIndicator />
-*       <SliderThumb />
-*     </SliderTrack>
-*   </SliderControl>
-* </Slider>
+* <Slider.Root defaultValue={50}>
+*   <Slider.Label>Volume</Slider.Label>
+*   <Slider.Value />
+*   <Slider.Control>
+*     <Slider.Track>
+*       <Slider.Indicator />
+*       <Slider.Thumb />
+*     </Slider.Track>
+*   </Slider.Control>
+* </Slider.Root>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/slider | Base UI Slider}
@@ -74,7 +76,7 @@ function SliderIndicator({ className, ref, ...props }) {
 	const classes = mergeBaseClassName("slider__indicator", className);
 	return /* @__PURE__ */ jsx(Slider$1.Indicator, {
 		ref,
-		"data-slot": "slider-range",
+		"data-slot": "slider-indicator",
 		className: classes,
 		...props
 	});
@@ -95,19 +97,18 @@ function SliderThumb({ className, ref, ...props }) {
 * Displays the current value of the Slider.
 * Note: This must be used inside a Slider component to access the value context.
 */
-function SliderOutput({ className, children, ref, ...props }) {
-	const classes = mergeBaseClassName("slider__output", className);
+function SliderValue({ className, ref, ...props }) {
+	const classes = mergeBaseClassName("slider__value", className);
 	return /* @__PURE__ */ jsx(Slider$1.Value, {
 		ref,
-		"data-slot": "slider-output",
+		"data-slot": "slider-value",
 		className: classes,
-		...props,
-		children: (formattedValues, values) => typeof children === "function" ? children(values[0] ?? 0, values, formattedValues) : formattedValues.join(" - ")
+		...props
 	});
 }
 /** Visible label that participates in Base UI's slider naming relationship. */
 function SliderLabel({ className, ref, ...props }) {
-	const classes = mergeBaseClassName("slider__label", className);
+	const classes = mergeBaseClassName("label slider__label", className);
 	return /* @__PURE__ */ jsx(Slider$1.Label, {
 		ref,
 		"data-slot": "slider-label",
@@ -118,7 +119,7 @@ function SliderLabel({ className, ref, ...props }) {
 const Slider = {
 	Root: SliderRoot,
 	Label: SliderLabel,
-	Value: SliderOutput,
+	Value: SliderValue,
 	Control: SliderControl,
 	Track: SliderTrack,
 	Indicator: SliderIndicator,

package/dist/components/foundations/Stepper.d.ts

@@ -1,9 +1,10 @@
-import { r as Tabs } from "../../Tabs-Ptrbaynh.js";
+import { o as TabsProps, r as Tabs } from "../../Tabs-Ptrbaynh.js";
 import * as React from "react";
 
 //#region src/components/foundations/Stepper.d.ts
 type StepperOrientation = "horizontal" | "vertical";
 type StepperState = "active" | "completed" | "inactive" | "loading";
+type StepperChangeEventDetails = Parameters<NonNullable<TabsProps["onValueChange"]>>[1];
 type StepIndicators = {
   active?: React.ReactNode;
   completed?: React.ReactNode;
@@ -12,7 +13,6 @@ type StepIndicators = {
 };
 interface StepperContextValue {
   activeStep: number;
-  setActiveStep: (step: number) => void;
   orientation: StepperOrientation;
   indicators: StepIndicators;
 }
@@ -37,7 +37,7 @@ interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Called when a trigger requests a new active step.
    */
-  onValueChange?: (value: number) => void;
+  onValueChange?: (value: number, eventDetails: StepperChangeEventDetails) => void;
   /**
    * The layout direction of the step navigation.
    * @default "horizontal"

package/dist/components/foundations/Stepper.js

@@ -40,27 +40,26 @@ function useStepItem() {
 function Stepper({ defaultValue = 1, value, onValueChange, orientation = "horizontal", indicators = EMPTY_STEP_INDICATORS, className, children, ref, ...props }) {
 	const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
 	const activeStep = value ?? uncontrolledValue;
-	const setActiveStep = React.useCallback((step) => {
+	const handleValueChange = React.useCallback((step, eventDetails) => {
+		onValueChange?.(step, eventDetails);
+		if (eventDetails.isCanceled) return;
 		if (value === void 0) setUncontrolledValue(step);
-		onValueChange?.(step);
 	}, [onValueChange, value]);
 	const contextValue = React.useMemo(() => ({
 		activeStep,
-		setActiveStep,
 		orientation,
 		indicators
 	}), [
 		activeStep,
 		indicators,
-		orientation,
-		setActiveStep
+		orientation
 	]);
 	return /* @__PURE__ */ jsx(StepperContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx(Tabs.Root, {
 			ref,
 			value: activeStep,
-			onValueChange: setActiveStep,
+			onValueChange: handleValueChange,
 			orientation,
 			className: mergeBaseClassName("stepper", className),
 			"data-slot": "stepper",

package/dist/components/foundations/ToggleGroup.d.ts

@@ -1,2 +1,2 @@
-import { n as ToggleGroupItemProps, r as ToggleGroupProps, t as ToggleGroup } from "../../ToggleGroup-CSBWfPXo.js";
+import { n as ToggleGroupItemProps, r as ToggleGroupProps, t as ToggleGroup } from "../../ToggleGroup-BrQZOQn_.js";
 export { ToggleGroup, ToggleGroupItemProps, ToggleGroupProps };

package/dist/components/foundations/Tooltip.d.ts

@@ -2,13 +2,11 @@ import * as React from "react";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 
 //#region src/components/foundations/Tooltip.d.ts
-interface TooltipProps extends Tooltip$1.Root.Props {}
-interface TooltipTriggerProps extends Tooltip$1.Trigger.Props {}
+type TooltipProps<Payload = unknown> = Tooltip$1.Root.Props<Payload>;
+type TooltipTriggerProps<Payload = unknown> = Tooltip$1.Trigger.Props<Payload> & React.RefAttributes<HTMLElement>;
 interface TooltipPortalProps extends Tooltip$1.Portal.Props {}
 interface TooltipPositionerProps extends Tooltip$1.Positioner.Props {}
-interface TooltipProviderProps extends Tooltip$1.Provider.Props {
-  delayDuration?: number;
-}
+type TooltipProviderProps = Tooltip$1.Provider.Props;
 interface TooltipPopupProps extends Tooltip$1.Popup.Props {}
 interface TooltipViewportProps extends Tooltip$1.Viewport.Props {}
 interface TooltipArrowProps extends Tooltip$1.Arrow.Props {}
@@ -33,15 +31,15 @@ interface TooltipArrowProps extends Tooltip$1.Arrow.Props {}
  * @see {@link https://base-ui.com/react/components/tooltip | Base UI Tooltip}
  */
 declare function TooltipProvider({
-  delayDuration,
   delay,
   ...props
 }: TooltipProviderProps): React.JSX.Element;
-declare function TooltipTrigger({
+declare function TooltipTrigger<Payload>({
   render,
   className,
+  ref,
   ...props
-}: TooltipTriggerProps): React.JSX.Element;
+}: TooltipTriggerProps<Payload>): React.JSX.Element;
 declare function TooltipPositioner({
   className,
   ref,

package/dist/components/foundations/Tooltip.js

@@ -24,13 +24,13 @@ import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 *
 * @see {@link https://base-ui.com/react/components/tooltip | Base UI Tooltip}
 */
-function TooltipProvider({ delayDuration = 0, delay, ...props }) {
+function TooltipProvider({ delay = 0, ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
-		delay: delay ?? delayDuration,
+		delay,
 		...props
 	});
 }
-function TooltipTrigger({ render, className, ...props }) {
+function TooltipTrigger({ render, className, ref, ...props }) {
 	const classes = mergeBaseClassName(render == null ? buttonVariants({
 		variant: "ghost",
 		color: "neutral",
@@ -38,6 +38,7 @@ function TooltipTrigger({ render, className, ...props }) {
 		className: "tooltip__trigger"
 	}) : "tooltip__trigger", className);
 	return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+		ref,
 		"data-slot": "tooltip-trigger",
 		render,
 		className: classes,

package/dist/components/general-purpose/Commit.js

@@ -2,8 +2,8 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { C as FileIcon, m as ChevronRightIcon } from "../../icons-B1Qw05te.js";
 import { Collapsible } from "../foundations/Collapsible.js";
 import { Avatar } from "../foundations/Avatar.js";
-import { t as CopyButton } from "../../copy-button-CsNSSKYG.js";
 import { Badge } from "../foundations/Badge.js";
+import { t as CopyButton } from "../../copy-button-CsNSSKYG.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/Commit.tsx

package/dist/components/general-purpose/EnvironmentVariables.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { S as EyeOffIcon, x as EyeIcon } from "../../icons-B1Qw05te.js";
-import { t as CopyButton } from "../../copy-button-CsNSSKYG.js";
 import { Badge } from "../foundations/Badge.js";
+import { t as CopyButton } from "../../copy-button-CsNSSKYG.js";
 import { Switch } from "../foundations/Switch.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/general-purpose/PricingBillingToggle.d.ts

@@ -1,12 +1,11 @@
 import { PricingBillingPeriod } from "./Pricing.js";
-import * as React from "react";
 
 //#region src/components/general-purpose/PricingBillingToggle.d.ts
 interface PricingBillingToggleProps {
   value: PricingBillingPeriod;
   onValueChange: (value: PricingBillingPeriod) => void;
   yearlySavingsPercent: number;
-  /** Fixes the presentation. Omit only in component demos that expose the style switcher. */
+  /** Billing control presentation. Defaults to the compact switch. */
   variant?: "switch" | "buttons";
   /** Additional class name for placement in a consuming layout. */
   className?: string;
@@ -18,6 +17,6 @@ declare function PricingBillingToggle({
   yearlySavingsPercent,
   variant,
   className
-}: PricingBillingToggleProps): React.JSX.Element;
+}: PricingBillingToggleProps): import("react").JSX.Element;
 //#endregion
 export { PricingBillingToggle, PricingBillingToggleProps };

package/dist/components/general-purpose/PricingBillingToggle.js

@@ -2,32 +2,14 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Badge } from "../foundations/Badge.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import { Switch } from "../foundations/Switch.js";
-import { Checkbox } from "../foundations/Checkbox.js";
-import { Label } from "../foundations/Label.js";
-import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/PricingBillingToggle.tsx
 /** Controlled billing-period selector composed from the shared Switch or ToggleGroup. */
-function PricingBillingToggle({ value, onValueChange, yearlySavingsPercent, variant, className }) {
-	const [demoVariant, setDemoVariant] = React.useState("switch");
-	const demoToggleId = React.useId();
-	const resolvedVariant = variant ?? demoVariant;
+function PricingBillingToggle({ value, onValueChange, yearlySavingsPercent, variant = "switch", className }) {
 	const isYearly = value === "yearly";
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		className: cx("pricing-page__billing-toggle", className),
-		children: [!variant ? /* @__PURE__ */ jsxs("div", {
-			className: "pricing-page__toggle-options",
-			children: [/* @__PURE__ */ jsx(Checkbox.Root, {
-				checked: demoVariant === "switch",
-				onCheckedChange: (checked) => setDemoVariant(checked ? "switch" : "buttons"),
-				id: demoToggleId,
-				children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
-			}), /* @__PURE__ */ jsx(Label, {
-				htmlFor: demoToggleId,
-				className: "pricing-page__toggle-label",
-				children: "Use switch style"
-			})]
-		}) : null, resolvedVariant === "switch" ? /* @__PURE__ */ jsxs("div", {
+		children: variant === "switch" ? /* @__PURE__ */ jsxs("div", {
 			className: "pricing-page__switch-container",
 			children: [
 				/* @__PURE__ */ jsx("span", {
@@ -80,7 +62,7 @@ function PricingBillingToggle({ value, onValueChange, yearlySavingsPercent, vari
 					]
 				})]
 			})]
-		})]
+		})
 	});
 }
 //#endregion

package/dist/components/general-purpose/PricingPage.d.ts

@@ -1,4 +1,4 @@
-import { FAQItem, Plan, PlanFeature, UsageTier } from "./Pricing.js";
+import { FAQItem, Plan, UsageTier } from "./Pricing.js";
 import * as React from "react";
 
 //#region src/components/general-purpose/PricingPage.d.ts
@@ -53,8 +53,7 @@ interface PricingPageProps {
   className?: string;
   /**
    * Style variant for the billing period toggle.
-   * When set, hides the style switcher checkbox.
-   * @default undefined (shows style switcher for demos)
+   * @default "switch"
    */
   billingToggleVariant?: "switch" | "buttons";
   /**
@@ -170,4 +169,4 @@ declare function PricingPage({
   onPortalRedirect
 }: PricingPageProps): React.JSX.Element;
 //#endregion
-export { type FAQItem, type Plan, type PlanFeature, PricingPage, PricingPageProps, type UsageTier };
+export { PricingPage, PricingPageProps };

package/dist/components/general-purpose/ResizableSidePanel.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
-import { n as clamp } from "../../format-CmopcfqJ.js";
+import { n as clamp } from "../../format-DB2mX9DA.js";
 import { Separator } from "../foundations/Separator.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/general-purpose/ResponsiveSidebarShell.d.ts

@@ -1,68 +1,2 @@
-import * as React from "react";
-
-//#region src/components/general-purpose/ResponsiveSidebarShell.d.ts
-interface ResponsiveSidebarShellControls {
-  /** Close the sidebar and move focus to the main content. */
-  closeSidebar: () => void;
-  /** Close only when the shell is currently using its compact drawer layout. */
-  closeSidebarOnCompact: () => void;
-}
-interface ResponsiveSidebarShellTopBarControls {
-  /** The shell-owned, labelled sidebar toggle to place in a top-bar slot. */
-  sidebarToggle: React.ReactNode;
-  /** Stable id for a caller-composed compact disclosure trigger. */
-  sidebarId: string;
-  /** Whether the shared sidebar surface is currently visible. */
-  sidebarOpen: boolean;
-  /** Toggle the sidebar and remember the invoking control for Escape focus restoration. */
-  toggleSidebar: (trigger?: HTMLElement) => void;
-}
-interface ResponsiveSidebarShellProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Navigation or other secondary surface shown beside the selected content. */
-  sidebar: React.ReactNode | ((controls: ResponsiveSidebarShellControls) => React.ReactNode);
-  /**
-   * Optional composable application bar. The render form receives the
-   * shell-owned sidebar toggle so callers can place it beside their own icon
-   * groups without duplicating drawer behavior.
-   */
-  topBar?: React.ReactNode | ((controls: ResponsiveSidebarShellTopBarControls) => React.ReactNode);
-  /** Short noun used by the toggle and resize control, such as “threads” or “schedules”. */
-  sidebarLabel: string;
-  /** Whether the sidebar is open. Omit for internal state. */
-  sidebarOpen?: boolean;
-  /** Initial sidebar state when `sidebarOpen` is uncontrolled. */
-  defaultSidebarOpen?: boolean;
-  /** Initial desktop sidebar width in CSS pixels. */
-  defaultSidebarWidth?: number;
-  /** Called when the sidebar is opened or closed. */
-  onSidebarOpenChange?: (open: boolean) => void;
-  /** Accessible name for the toolbar containing the sidebar toggle. */
-  toolbarLabel?: string;
-  /** Accessible name for the mobile preview target that returns to the main content. */
-  showMainLabel?: string;
-}
-/**
- * Responsive master-detail shell with a resizable desktop sidebar and a compact
- * floating sidebar that leaves the main content in place as a dismiss target.
- * The root exposes `data-sidebar-open="true" | "false"` as its public styling hook.
- */
-declare function ResponsiveSidebarShell({
-  sidebar,
-  topBar,
-  sidebarLabel,
-  sidebarOpen,
-  defaultSidebarOpen,
-  defaultSidebarWidth,
-  onSidebarOpenChange,
-  toolbarLabel,
-  showMainLabel,
-  className,
-  children,
-  ref,
-  style,
-  ...props
-}: ResponsiveSidebarShellProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-//#endregion
+import { i as ResponsiveSidebarShellTopBarControls, n as ResponsiveSidebarShellControls, r as ResponsiveSidebarShellProps, t as ResponsiveSidebarShell } from "../../ResponsiveSidebarShell-DWjULskY.js";
 export { ResponsiveSidebarShell, ResponsiveSidebarShellControls, ResponsiveSidebarShellProps, ResponsiveSidebarShellTopBarControls };

package/dist/components/general-purpose/ResponsiveSidebarShell.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { K as SidebarIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
-import { t as capitalize } from "../../format-CmopcfqJ.js";
+import { t as capitalize } from "../../format-DB2mX9DA.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { AppTopBar } from "./AppTopBar.js";
 import { ResizableSidePanel } from "./ResizableSidePanel.js";

package/dist/components/general-purpose/SettingsFormDialog.d.ts

@@ -1,7 +1,12 @@
 import * as React from "react";
 
 //#region src/components/general-purpose/SettingsFormDialog.d.ts
-type SettingsFormFieldType = "email" | "password" | "search" | "tel" | "text" | "url";
+type SettingsFormFieldType = "checkbox" | "email" | "password" | "search" | "tel" | "text" | "url";
+/**
+ * A checked box submits this, an unchecked one submits the empty string, so
+ * `SettingsFormValues` stays all-strings for every field type.
+ */
+declare const SETTINGS_FORM_CHECKED = "true";
 interface SettingsFormField {
   name: string;
   label: string;
@@ -40,4 +45,4 @@ declare function SettingsFormDialog({
   ...contentProps
 }: SettingsFormDialogProps): React.JSX.Element;
 //#endregion
-export { SettingsFormDialog, SettingsFormDialogProps, SettingsFormField, SettingsFormFieldType, SettingsFormValues };
+export { SETTINGS_FORM_CHECKED, SettingsFormDialog, SettingsFormDialogProps, SettingsFormField, SettingsFormFieldType, SettingsFormValues };

package/dist/components/general-purpose/SettingsFormDialog.js

@@ -1,14 +1,21 @@
 import { Button } from "../foundations/Button.js";
 import { Dialog } from "../foundations/Dialog.js";
-import { i as formatErrorMessage } from "../../format-CmopcfqJ.js";
+import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { Field } from "../foundations/Field.js";
 import { Form } from "../foundations/Form.js";
+import { Checkbox } from "../foundations/Checkbox.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/SettingsFormDialog.tsx
+/**
+* A checked box submits this, an unchecked one submits the empty string, so
+* `SettingsFormValues` stays all-strings for every field type.
+*/
+const SETTINGS_FORM_CHECKED = "true";
 function readSettingsValues(data, fields) {
 	return Object.fromEntries(fields.map((field) => {
 		const value = data[field.name];
+		if (field.type === "checkbox") return [field.name, value === true ? SETTINGS_FORM_CHECKED : ""];
 		return [field.name, typeof value === "string" ? value.trim() : ""];
 	}));
 }
@@ -51,7 +58,15 @@ function SettingsFormDialogContent({ fields, initialValues, submitLabel, submitt
 	return /* @__PURE__ */ jsxs(Form, {
 		onFormSubmit: submit,
 		children: [
-			fields.map((field) => /* @__PURE__ */ jsxs(Field.Root, {
+			fields.map((field) => field.type === "checkbox" ? /* @__PURE__ */ jsxs(Field.Root, {
+				name: field.name,
+				orientation: "horizontal",
+				children: [/* @__PURE__ */ jsx(Checkbox.Root, {
+					defaultChecked: initialValues?.[field.name] === SETTINGS_FORM_CHECKED,
+					disabled: field.readOnly,
+					children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
+				}), /* @__PURE__ */ jsxs(Field.Content, { children: [/* @__PURE__ */ jsx(Field.Label, { children: field.label }), field.description ? /* @__PURE__ */ jsx(Field.Description, { children: field.description }) : null] })]
+			}, field.name) : /* @__PURE__ */ jsxs(Field.Root, {
 				name: field.name,
 				children: [
 					/* @__PURE__ */ jsx(Field.Label, { children: field.label }),
@@ -108,4 +123,4 @@ function SettingsFormDialog({ open, onOpenChange, title, description, ...content
 	});
 }
 //#endregion
-export { SettingsFormDialog };
+export { SETTINGS_FORM_CHECKED, SettingsFormDialog };

package/dist/components/general-purpose/Terminal.js

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { $ as TerminalIcon, rt as XIcon } from "../../icons-B1Qw05te.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { t as CopyButton } from "../../copy-button-CsNSSKYG.js";
 import { Badge } from "../foundations/Badge.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
+import { t as CopyButton } from "../../copy-button-CsNSSKYG.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Anser from "anser";
@@ -175,7 +175,7 @@ function TerminalContent({ className, ref, ...props }) {
 			ref: viewportRef,
 			className: "terminal__content-viewport",
 			onScroll: handleScroll,
-			children: /* @__PURE__ */ jsxs("pre", {
+			children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsxs("pre", {
 				className: "terminal__output",
 				children: [segments.map((seg, i) => /* @__PURE__ */ jsx("span", {
 					style: {
@@ -191,7 +191,7 @@ function TerminalContent({ className, ref, ...props }) {
 					className: "terminal__cursor",
 					"aria-hidden": "true"
 				}) : null]
-			})
+			}) })
 		}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
 			orientation: "vertical",
 			children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {})

package/dist/components/general-purpose/ThemeModeControl.js

@@ -33,7 +33,7 @@ function ThemeModeControl({ showLabels = true, "aria-label": ariaLabel = "Theme"
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(RadioGroup.Root, {
 		value: preference,
-		onValueChange: (nextValue) => setPreference(nextValue),
+		onValueChange: setPreference,
 		name,
 		disabled,
 		orientation: "horizontal",

package/dist/components/general-purpose/WebPreview.js

@@ -3,8 +3,8 @@ import { W as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as Arrow
 import { Collapsible } from "../foundations/Collapsible.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { Badge } from "../foundations/Badge.js";
-import { Input } from "../foundations/Input.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
+import { Input } from "../foundations/Input.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/WebPreview.tsx
@@ -262,9 +262,9 @@ function WebPreviewConsole({ className, logs = [], children, ref, ...props }) {
 			unstyled: true,
 			children: /* @__PURE__ */ jsxs(ScrollArea.Root, {
 				className: "web-preview__console-scroll",
-				children: [/* @__PURE__ */ jsxs(ScrollArea.Viewport, {
+				children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
 					className: "web-preview__console-viewport",
-					children: [/* @__PURE__ */ jsx("ul", {
+					children: /* @__PURE__ */ jsxs(ScrollArea.Content, { children: [/* @__PURE__ */ jsx("ul", {
 						className: "web-preview__console-list sigvelo-stack-list",
 						children: logs.length === 0 ? /* @__PURE__ */ jsx("li", {
 							className: "web-preview__console-empty",
@@ -287,7 +287,7 @@ function WebPreviewConsole({ className, logs = [], children, ref, ...props }) {
 								})
 							]
 						}, index))
-					}), children]
+					}), children] })
 				}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
 					orientation: "vertical",
 					children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {})

package/dist/components/nanites/AgentConnection.js

@@ -2,7 +2,8 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { k as LinkIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
 import { Popover } from "../foundations/Popover.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-CM5gfmdq.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-Bk4nn7l-.js";
+import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/nanites/AgentConnection.tsx
@@ -103,6 +104,7 @@ function AgentConnectionPanel({ className, commands: commandsProp, defaultTarget
 	const Heading = headingLevel === 3 ? "h3" : "h2";
 	const Wrapper = section ? "section" : "div";
 	if (!selected) return null;
+	const selectedIndex = commands.indexOf(selected);
 	return /* @__PURE__ */ jsxs(Wrapper, {
 		className: cx("agent-connect", className),
 		children: [
@@ -120,21 +122,24 @@ function AgentConnectionPanel({ className, commands: commandsProp, defaultTarget
 					children: [/* @__PURE__ */ jsx(Heading, { children: "Connect Agent" }), /* @__PURE__ */ jsx("p", { children: selected.description })]
 				})]
 			}),
-			/* @__PURE__ */ jsxs("fieldset", {
+			/* @__PURE__ */ jsxs(ToggleGroup.Root, {
+				render: /* @__PURE__ */ jsx("fieldset", {}),
 				className: "agent-connect__targets",
+				size: "sm",
+				spacing: 1,
+				value: [String(selectedIndex)],
+				onValueChange: (nextValue) => {
+					const nextIndex = nextValue[0];
+					const nextCommand = nextIndex === void 0 ? void 0 : commands[Number(nextIndex)];
+					if (nextCommand) setTarget(nextCommand.target);
+				},
 				children: [/* @__PURE__ */ jsx("legend", {
 					className: "agent-connect__legend sigvelo-visually-hidden",
 					children: "Agent connection target"
-				}), commands.map((command) => /* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
-					color: "neutral",
-					size: "sm",
-					"aria-pressed": command.target === selected.target,
-					"data-selected": command.target === selected.target,
+				}), commands.map((command, index) => /* @__PURE__ */ jsx(ToggleGroup.Item, {
+					type: "button",
+					value: String(index),
 					className: "agent-connect__target",
-					onClick: () => {
-						setTarget(command.target);
-					},
 					children: command.label
 				}, command.target))]
 			}),

package/dist/components/nanites/AgentToolDetail.js

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { J as SpinnerIcon, r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
+import { r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
 import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
 import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
-import { t as ThinkChat } from "../../ThinkChat-en0UbkVv.js";
+import { t as ThinkChat } from "../../ThinkChat-ByR-QT_D.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
 import * as React from "react";
@@ -75,11 +75,10 @@ function AgentToolDetail({ actions, backLink, chat, className, messages, ref, ru
 						...messages,
 						showComposer: false
 					})
-				}) : /* @__PURE__ */ jsx("div", {
-					className: "agent-tool-detail__chat-loading",
-					role: "status",
-					"aria-label": `${name} transcript loading`,
-					children: /* @__PURE__ */ jsx(SpinnerIcon, {})
+				}) : /* @__PURE__ */ jsx(ThinkChat.Messages, {
+					...messages,
+					showComposer: false,
+					loading: true
 				})
 			}),
 			actions ? /* @__PURE__ */ jsx(SubagentRunActions, { children: actions }) : null