@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/components/BrowserReplay.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { D as PlayIcon, T as PauseIcon } from "../icons-D2Q5n5C1.js";
+import { E as PauseIcon, O as PlayIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
-import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "./Slider.js";
+import { Slider } from "./Slider.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Replayer } from "@rrweb/replay";
@@ -161,7 +161,7 @@ function BrowserReplay({ className, events, autoPlay, ref, ...props }) {
 					onClick: handlePlayPause,
 					children: isPlaying ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
 				}),
-				/* @__PURE__ */ jsx(Slider, {
+				/* @__PURE__ */ jsx(Slider.Root, {
 					className: "browser-replay__scrubber",
 					min: 0,
 					max: Math.max(duration, 1),
@@ -169,7 +169,7 @@ function BrowserReplay({ className, events, autoPlay, ref, ...props }) {
 					value: Math.min(currentTime, duration),
 					disabled,
 					onValueChange: handleScrub,
-					children: /* @__PURE__ */ jsx(SliderControl, { children: /* @__PURE__ */ jsxs(SliderTrack, { children: [/* @__PURE__ */ jsx(SliderIndicator, {}), /* @__PURE__ */ jsx(SliderThumb, { "aria-label": "Replay position" })] }) })
+					children: /* @__PURE__ */ jsx(Slider.Control, { children: /* @__PURE__ */ jsxs(Slider.Track, { children: [/* @__PURE__ */ jsx(Slider.Indicator, {}), /* @__PURE__ */ jsx(Slider.Thumb, { "aria-label": "Replay position" })] }) })
 				}),
 				/* @__PURE__ */ jsxs("span", {
 					className: "browser-replay__time",

package/dist/components/BrowserRunPanel.js

@@ -1,7 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { C as MonitorIcon, L as XIcon, M as SpinnerIcon, k as RefreshIcon } from "../icons-D2Q5n5C1.js";
+import { N as SpinnerIcon, z as XIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
+import { WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl } from "./WebPreview.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/BrowserRunPanel.tsx
@@ -12,12 +13,15 @@ function isInspectablePage(target) {
 function targetLabel(target) {
 	return target.title || target.pageUrl || target.targetId;
 }
+function targetGlyph(target) {
+	return (target.title || target.pageUrl || target.targetId).trim().charAt(0).toUpperCase() || "•";
+}
 function pickTarget(targets, targetId) {
 	return (targetId ? targets.find((target) => target.targetId === targetId) : void 0) ?? targets.find(isInspectablePage) ?? targets[0];
 }
 function BrowserRunPanelState({ children, role, tone = "neutral" }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "browser-run-panel__state",
+		className: "web-preview__body--empty browser-run-panel__state",
 		"data-tone": tone,
 		role: role ?? (tone === "danger" ? "alert" : void 0),
 		children
@@ -33,84 +37,116 @@ function BrowserRunPanelState({ children, role, tone = "neutral" }) {
 function BrowserRunPanel({ liveView, onRefresh, onCloseSession, loading, error, label = "Browser", empty = "No live browser session", fallback, className, ref, ...props }) {
 	const [selectedTargetId, setSelectedTargetId] = React.useState();
 	const [receivedAt, setReceivedAt] = React.useState(() => Date.now());
+	const tabRefs = React.useRef(/* @__PURE__ */ new Map());
+	const tabListId = React.useId();
 	React.useEffect(() => {
 		if (liveView) setReceivedAt(Date.now());
 	}, [liveView]);
 	const targets = liveView?.targets ?? [];
 	const target = pickTarget(targets, selectedTargetId);
-	const pageLabel = target ? targetLabel(target) : "Waiting for a shared browser session";
-	return /* @__PURE__ */ jsxs("section", {
+	const pageUrl = target?.pageUrl ?? "";
+	const selectTarget = React.useCallback((nextTarget) => {
+		setSelectedTargetId(nextTarget.targetId);
+	}, []);
+	const handleTabListKeyDown = (event) => {
+		const currentIndex = targets.findIndex((candidate) => candidate.targetId === target?.targetId);
+		if (currentIndex < 0) return;
+		let nextIndex;
+		if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % targets.length;
+		if (event.key === "ArrowLeft") nextIndex = (currentIndex - 1 + targets.length) % targets.length;
+		if (event.key === "Home") nextIndex = 0;
+		if (event.key === "End") nextIndex = targets.length - 1;
+		if (nextIndex === void 0) return;
+		event.preventDefault();
+		const nextTarget = targets[nextIndex];
+		if (!nextTarget) return;
+		selectTarget(nextTarget);
+		tabRefs.current.get(nextTarget.targetId)?.focus();
+	};
+	return /* @__PURE__ */ jsxs(WebPreview, {
 		ref,
 		className: cx("browser-run-panel", className),
+		url: pageUrl,
+		role: "region",
 		"aria-label": typeof label === "string" ? label : "Browser",
 		...props,
 		children: [
-			/* @__PURE__ */ jsxs("header", {
-				className: "browser-run-panel__header",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "browser-run-panel__identity",
-					children: [/* @__PURE__ */ jsx(MonitorIcon, { className: "browser-run-panel__icon" }), /* @__PURE__ */ jsxs("div", {
-						className: "browser-run-panel__title-block",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "browser-run-panel__title",
-							children: label
-						}), /* @__PURE__ */ jsx("span", {
-							className: "browser-run-panel__url",
-							title: pageLabel,
-							children: pageLabel
-						})]
-					})]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "browser-run-panel__actions",
-					children: [onRefresh ? /* @__PURE__ */ jsx(Button, {
+			targets.length > 1 ? /* @__PURE__ */ jsx(WebPreviewNavigation, { children: /* @__PURE__ */ jsx("div", {
+				id: tabListId,
+				className: "browser-run-panel__tabs",
+				role: "tablist",
+				"aria-label": "Open browser pages",
+				onKeyDown: handleTabListKeyDown,
+				children: targets.map((candidate) => {
+					const selected = candidate.targetId === target?.targetId;
+					return /* @__PURE__ */ jsxs(Button, {
+						ref: (node) => {
+							if (node) tabRefs.current.set(candidate.targetId, node);
+							else tabRefs.current.delete(candidate.targetId);
+						},
 						type: "button",
 						variant: "ghost",
 						color: "neutral",
-						size: "icon-sm",
-						"aria-label": "Refresh browser view",
+						size: "sm",
+						className: "browser-run-panel__tab",
+						role: "tab",
+						id: `${tabListId}-${candidate.targetId}`,
+						"aria-selected": selected,
+						"aria-controls": `${tabListId}-panel`,
+						tabIndex: selected ? 0 : -1,
+						onClick: () => selectTarget(candidate),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "browser-run-panel__tab-glyph",
+							"aria-hidden": "true",
+							children: targetGlyph(candidate)
+						}), /* @__PURE__ */ jsx("span", {
+							className: "browser-run-panel__tab-title",
+							children: targetLabel(candidate)
+						})]
+					}, candidate.targetId);
+				})
+			}) }) : null,
+			/* @__PURE__ */ jsxs(WebPreviewNavigation, {
+				className: "browser-run-panel__address-bar",
+				children: [
+					/* @__PURE__ */ jsx(WebPreviewUrl, {
+						"aria-label": "Browser page URL",
+						placeholder: "Waiting for browser session",
+						readOnly: true
+					}),
+					onRefresh ? /* @__PURE__ */ jsx(WebPreviewNavigationButton, {
+						action: "reload",
+						label: "Refresh browser view",
 						disabled: loading,
-						onClick: () => void onRefresh(),
-						children: /* @__PURE__ */ jsx(RefreshIcon, {})
-					}) : null, onCloseSession ? /* @__PURE__ */ jsx(Button, {
-						type: "button",
-						variant: "ghost",
-						color: "neutral",
-						size: "icon-sm",
-						"aria-label": "Close browser session",
+						onClick: () => void onRefresh()
+					}) : null,
+					onCloseSession ? /* @__PURE__ */ jsx(WebPreviewNavigationButton, {
+						label: "Close browser session",
 						onClick: () => void onCloseSession(),
 						children: /* @__PURE__ */ jsx(XIcon, {})
-					}) : null]
-				})]
+					}) : null
+				]
 			}),
-			targets.length > 1 ? /* @__PURE__ */ jsx("div", {
-				className: "browser-run-panel__targets",
-				"aria-label": "Browser tabs",
-				children: targets.map((candidate) => /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					className: "browser-run-panel__target",
-					"aria-pressed": candidate.targetId === target?.targetId,
-					onClick: () => setSelectedTargetId(candidate.targetId),
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "browser-run-panel__target-title",
-						children: targetLabel(candidate)
-					}), candidate.pageUrl ? /* @__PURE__ */ jsx("span", {
-						className: "browser-run-panel__target-url",
-						children: candidate.pageUrl
-					}) : null]
-				}, candidate.targetId))
-			}) : null,
 			error ? /* @__PURE__ */ jsx(BrowserRunPanelState, {
 				tone: "danger",
 				children: error
 			}) : null,
 			/* @__PURE__ */ jsx("div", {
-				className: "browser-run-panel__body",
+				id: `${tabListId}-panel`,
+				className: "web-preview__body browser-run-panel__body",
+				role: targets.length > 1 ? "tabpanel" : void 0,
+				"aria-labelledby": targets.length > 1 && target ? `${tabListId}-${target.targetId}` : void 0,
 				"aria-busy": loading || void 0,
 				children: target && liveView ? /* @__PURE__ */ jsx(BrowserLiveView, {
-					url: target.url,
-					expiresAt: receivedAt + liveView.expiresInMs,
+					source: {
+						url: target.url,
+						targetId: target.targetId,
+						expiresInMs: liveView.expiresInMs
+					},
+					receivedAt,
 					pageTitle: target.title ?? target.pageUrl,
-					fallback
+					fallback,
+					className: "browser-run-panel__live-view"
 				}) : loading ? /* @__PURE__ */ jsxs(BrowserRunPanelState, {
 					role: "status",
 					children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "browser-run-panel__spinner" }), "Loading browser session"]

package/dist/components/Button.d.ts

@@ -1,2 +1,2 @@
-import { a as ButtonVariant, c as ShadcnButtonVariant, i as ButtonSize, l as buttonVariants, n as ButtonColor, o as ButtonVariantsOptions, r as ButtonProps, s as ShadcnButtonSize, t as Button } from "../Button-Ct5I6aTu.js";
-export { Button, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, ButtonVariantsOptions, ShadcnButtonSize, ShadcnButtonVariant, buttonVariants };
+import { a as ButtonVariant, i as ButtonSize, n as ButtonColor, o as ButtonVariantsOptions, r as ButtonProps, s as buttonVariants, t as Button } from "../Button-FX_hpqxm.js";
+export { Button, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, ButtonVariantsOptions, buttonVariants };

package/dist/components/Button.js

@@ -1,34 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 //#region src/components/Button.tsx
-const SHADCN_BUTTON_VARIANT = {
-	default: ["normal", "primary"],
-	destructive: ["normal", "destructive"],
-	outline: ["outline", "neutral"],
-	secondary: ["normal", "neutral"],
-	ghost: ["ghost", "neutral"],
-	link: ["link", "primary"]
-};
-const SHADCN_BUTTON_SIZE = {
-	default: "md",
-	xs: "xs",
-	sm: "sm",
-	lg: "lg",
-	icon: "icon",
-	"icon-xs": "icon-xs",
-	"icon-sm": "icon-sm",
-	"icon-lg": "icon-lg"
-};
-function buttonVariants({ variant = "default", color, size = "default", className } = {}) {
-	const buttonVariant = variant ?? "default";
-	const mapped = buttonVariant === "normal" || buttonVariant === "outline" || buttonVariant === "ghost" || buttonVariant === "link" ? [buttonVariant, color ?? "primary"] : SHADCN_BUTTON_VARIANT[buttonVariant];
-	const requestedSize = size ?? "default";
-	const buttonSize = requestedSize === "default" ? "md" : SHADCN_BUTTON_SIZE[requestedSize] ?? requestedSize;
+function buttonVariants({ variant = "normal", color = "primary", size = "md", className } = {}) {
 	return [
 		"button",
-		`button--${mapped[0]}`,
-		`button--${color ?? mapped[1]}`,
-		`button--${buttonSize}`,
+		`button--${variant ?? "normal"}`,
+		`button--${color ?? "primary"}`,
+		`button--${size ?? "md"}`,
 		className
 	].filter(Boolean).join(" ");
 }
@@ -37,8 +15,8 @@ function buttonVariants({ variant = "default", color, size = "default", classNam
 *
 * Separates visual style (`variant`) from color intent (`color`) for
 * maximum flexibility. Supports keyboard navigation, focus management, and
-* accessibility out of the box. Keeps shadcn-compatible variant and size
-* aliases for migration, while styling through Sigvelo CSS tokens.
+* accessibility out of the box. Styling uses the design system's canonical
+* visual variant, semantic color, and size axes.
 *
 * @example
 * ```tsx
@@ -49,9 +27,8 @@ function buttonVariants({ variant = "default", color, size = "default", classNam
 * ```
 *
 * @see {@link https://base-ui.com/react/components/button | Base UI Button}
-* @see {@link https://ui.shadcn.com/docs/components/base/button | shadcn/ui Button}
 */
-function Button({ variant = "default", color, size = "default", className, nativeButton, ref, ...props }) {
+function Button({ variant = "normal", color = "primary", size = "md", className, nativeButton, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Button$1, {
 		ref,
 		"data-slot": "button",

package/dist/components/ChainOfThought.d.ts

@@ -1,9 +1,9 @@
-import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
-import { v as IconProps } from "../icons-CbjtbIJK.js";
+import { Collapsible } from "./Collapsible.js";
+import { v as IconProps } from "../icons-CUCz_Sft.js";
 import * as React from "react";
 
 //#region src/components/ChainOfThought.d.ts
-interface ChainOfThoughtProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+interface ChainOfThoughtProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "unstyled"> {
   className?: string;
 }
 /**
@@ -38,7 +38,7 @@ declare function ChainOfThought({
 }: ChainOfThoughtProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ChainOfThoughtHeaderProps extends Omit<CollapsibleTriggerProps, "className" | "unstyled"> {
+interface ChainOfThoughtHeaderProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "className" | "unstyled"> {
   className?: string;
 }
 /**
@@ -52,7 +52,7 @@ declare function ChainOfThoughtHeader({
 }: ChainOfThoughtHeaderProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-interface ChainOfThoughtContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
+interface ChainOfThoughtContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "className" | "unstyled"> {
   className?: string;
 }
 /**

package/dist/components/ChainOfThought.js

@@ -1,6 +1,6 @@
-import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import { Collapsible } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { M as SpinnerIcon, a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-D2Q5n5C1.js";
+import { N as SpinnerIcon, a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-Ba9THQKz.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChainOfThought.tsx
@@ -30,7 +30,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * ```
 */
 function ChainOfThought({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx(CollapsibleRoot, {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
 		ref,
 		className: cx("chain-of-thought", className),
 		...props,
@@ -41,12 +41,14 @@ function ChainOfThought({ className, ref, ...props }) {
 * Clickable header row that toggles the reasoning trace.
 */
 function ChainOfThoughtHeader({ className, children = "Chain of Thought", ref, ...props }) {
-	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
 		ref,
+		"data-slot": "chain-of-thought-trigger",
 		className: cx("chain-of-thought__header", className),
 		...props,
 		unstyled: true,
 		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "chain-of-thought-trigger-icon",
 			className: "chain-of-thought__header-icon",
 			"aria-hidden": "true",
 			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
@@ -60,8 +62,9 @@ function ChainOfThoughtHeader({ className, children = "Chain of Thought", ref, .
 * Collapsible panel containing step rows.
 */
 function ChainOfThoughtContent({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx(CollapsiblePanel, {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
 		ref,
+		"data-slot": "chain-of-thought-content",
 		className: cx("chain-of-thought__content", className),
 		...props,
 		unstyled: true,

package/dist/components/ChatGptSignInScreen.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { M as SpinnerIcon } from "../icons-D2Q5n5C1.js";
+import { N as SpinnerIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
-import { u as ModelSelectorLogo } from "../ModelSelector-DXtpcRmT.js";
+import { u as ModelSelectorLogo } from "../ModelSelector-DVgVBdvw.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChatGptSignInScreen.tsx
@@ -40,7 +40,7 @@ function ChatGptSignInScreen({ busy = false, error = false, label = "Sign in wit
 				] })]
 			}), /* @__PURE__ */ jsxs(Button, {
 				type: "button",
-				variant: "default",
+				variant: "normal",
 				color: error ? "destructive" : "primary",
 				size: "lg",
 				className: "chatgpt-sign-in__button",

package/dist/components/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CheckboxRootProps } from "@base-ui/react/checkbox";
+import { Checkbox as Checkbox$1, CheckboxRootProps } from "@base-ui/react/checkbox";
 
 //#region src/components/Checkbox.d.ts
 /**
@@ -24,12 +24,20 @@ interface CheckboxProps extends Omit<CheckboxRootProps, "className"> {
  *
  * @see {@link https://base-ui.com/react/components/checkbox | Base UI Checkbox}
  */
-declare function Checkbox({
+declare function CheckboxRoot({
   className,
   ref,
   ...props
 }: CheckboxProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
+declare function CheckboxIndicator({
+  children,
+  ...props
+}: Checkbox$1.Indicator.Props): React.JSX.Element;
+declare const Checkbox: {
+  Root: typeof CheckboxRoot;
+  Indicator: typeof CheckboxIndicator;
+};
 //#endregion
 export { Checkbox, CheckboxProps };

package/dist/components/Checkbox.js

@@ -29,19 +29,26 @@ function CheckIcon(props) {
 *
 * @see {@link https://base-ui.com/react/components/checkbox | Base UI Checkbox}
 */
-function Checkbox({ className = "", ref, ...props }) {
+function CheckboxRoot({ className = "", ref, ...props }) {
 	const classes = ["checkbox", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
 		ref,
 		"data-slot": "checkbox",
 		className: classes,
+		...props
+	});
+}
+function CheckboxIndicator({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+		"data-slot": "checkbox-indicator",
+		className: "checkbox__indicator",
 		...props,
-		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
-			"data-slot": "checkbox-indicator",
-			className: "checkbox__indicator",
-			children: /* @__PURE__ */ jsx(CheckIcon, {})
-		})
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
 	});
 }
+const Checkbox = {
+	Root: CheckboxRoot,
+	Indicator: CheckboxIndicator
+};
 //#endregion
 export { Checkbox };

package/dist/components/CheckboxGroup.d.ts

@@ -18,11 +18,11 @@ interface CheckboxGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof
  * // Basic usage
  * <CheckboxGroup defaultValue={['option1']}>
  *   <label>
- *     <Checkbox name="option1" />
+ *     <Checkbox.Root name="option1" ><Checkbox.Indicator /></Checkbox.Root>
  *     Option 1
  *   </label>
  *   <label>
- *     <Checkbox name="option2" />
+ *     <Checkbox.Root name="option2" ><Checkbox.Indicator /></Checkbox.Root>
  *     Option 2
  *   </label>
  * </CheckboxGroup>
@@ -35,11 +35,11 @@ interface CheckboxGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof
  *
  * <CheckboxGroup value={values} onValueChange={setValues}>
  *   <label>
- *     <Checkbox name="email" />
+ *     <Checkbox.Root name="email" ><Checkbox.Indicator /></Checkbox.Root>
  *     Email notifications
  *   </label>
  *   <label>
- *     <Checkbox name="sms" />
+ *     <Checkbox.Root name="sms" ><Checkbox.Indicator /></Checkbox.Root>
  *     SMS notifications
  *   </label>
  * </CheckboxGroup>
@@ -52,11 +52,11 @@ interface CheckboxGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof
  *   <Fieldset.Legend>Notifications</Fieldset.Legend>
  *   <CheckboxGroup defaultValue={['updates']}>
  *     <label>
- *       <Checkbox name="updates" />
+ *       <Checkbox.Root name="updates" ><Checkbox.Indicator /></Checkbox.Root>
  *       Product updates
  *     </label>
  *     <label>
- *       <Checkbox name="newsletter" />
+ *       <Checkbox.Root name="newsletter" ><Checkbox.Indicator /></Checkbox.Root>
  *       Newsletter
  *     </label>
  *   </CheckboxGroup>

package/dist/components/CheckboxGroup.js

@@ -11,11 +11,11 @@ import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group"
 * // Basic usage
 * <CheckboxGroup defaultValue={['option1']}>
 *   <label>
-*     <Checkbox name="option1" />
+*     <Checkbox.Root name="option1" ><Checkbox.Indicator /></Checkbox.Root>
 *     Option 1
 *   </label>
 *   <label>
-*     <Checkbox name="option2" />
+*     <Checkbox.Root name="option2" ><Checkbox.Indicator /></Checkbox.Root>
 *     Option 2
 *   </label>
 * </CheckboxGroup>
@@ -28,11 +28,11 @@ import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group"
 *
 * <CheckboxGroup value={values} onValueChange={setValues}>
 *   <label>
-*     <Checkbox name="email" />
+*     <Checkbox.Root name="email" ><Checkbox.Indicator /></Checkbox.Root>
 *     Email notifications
 *   </label>
 *   <label>
-*     <Checkbox name="sms" />
+*     <Checkbox.Root name="sms" ><Checkbox.Indicator /></Checkbox.Root>
 *     SMS notifications
 *   </label>
 * </CheckboxGroup>
@@ -45,11 +45,11 @@ import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group"
 *   <Fieldset.Legend>Notifications</Fieldset.Legend>
 *   <CheckboxGroup defaultValue={['updates']}>
 *     <label>
-*       <Checkbox name="updates" />
+*       <Checkbox.Root name="updates" ><Checkbox.Indicator /></Checkbox.Root>
 *       Product updates
 *     </label>
 *     <label>
-*       <Checkbox name="newsletter" />
+*       <Checkbox.Root name="newsletter" ><Checkbox.Indicator /></Checkbox.Root>
 *       Newsletter
 *     </label>
 *   </CheckboxGroup>

package/dist/components/CodeBlock.d.ts

@@ -1,2 +1,2 @@
-import { A as CodeBlockLanguage, C as CodeBlockLanguageSelectorValueProps, D as TokenizedCode, E as CodeBlockTitleProps, O as highlightCode, S as CodeBlockLanguageSelectorValue, T as CodeBlockTitle, _ as CodeBlockLanguageSelectorItem, a as CodeBlockContainerProps, b as CodeBlockLanguageSelectorTrigger, c as CodeBlockCopyButton, d as CodeBlockFilenameProps, f as CodeBlockHeader, g as CodeBlockLanguageSelectorContentProps, h as CodeBlockLanguageSelectorContent, i as CodeBlockContainer, k as CODE_BLOCK_LANGUAGES, l as CodeBlockCopyButtonProps, m as CodeBlockLanguageSelector, n as CodeBlockActions, o as CodeBlockContent, p as CodeBlockHeaderProps, r as CodeBlockActionsProps, s as CodeBlockContentProps, t as CodeBlock, u as CodeBlockFilename, v as CodeBlockLanguageSelectorItemProps, w as CodeBlockProps, x as CodeBlockLanguageSelectorTriggerProps, y as CodeBlockLanguageSelectorProps } from "../CodeBlock-CxQXv3C4.js";
+import { A as CodeBlockLanguage, C as CodeBlockLanguageSelectorValueProps, D as TokenizedCode, E as CodeBlockTitleProps, O as highlightCode, S as CodeBlockLanguageSelectorValue, T as CodeBlockTitle, _ as CodeBlockLanguageSelectorItem, a as CodeBlockContainerProps, b as CodeBlockLanguageSelectorTrigger, c as CodeBlockCopyButton, d as CodeBlockFilenameProps, f as CodeBlockHeader, g as CodeBlockLanguageSelectorContentProps, h as CodeBlockLanguageSelectorContent, i as CodeBlockContainer, k as CODE_BLOCK_LANGUAGES, l as CodeBlockCopyButtonProps, m as CodeBlockLanguageSelector, n as CodeBlockActions, o as CodeBlockContent, p as CodeBlockHeaderProps, r as CodeBlockActionsProps, s as CodeBlockContentProps, t as CodeBlock, u as CodeBlockFilename, v as CodeBlockLanguageSelectorItemProps, w as CodeBlockProps, x as CodeBlockLanguageSelectorTriggerProps, y as CodeBlockLanguageSelectorProps } from "../CodeBlock-DUh9WOGo.js";
 export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockActionsProps, CodeBlockContainer, CodeBlockContainerProps, CodeBlockContent, CodeBlockContentProps, CodeBlockCopyButton, CodeBlockCopyButtonProps, CodeBlockFilename, CodeBlockFilenameProps, CodeBlockHeader, CodeBlockHeaderProps, type CodeBlockLanguage, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorContentProps, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorItemProps, CodeBlockLanguageSelectorProps, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorTriggerProps, CodeBlockLanguageSelectorValue, CodeBlockLanguageSelectorValueProps, CodeBlockProps, CodeBlockTitle, CodeBlockTitleProps, TokenizedCode, highlightCode };

package/dist/components/CodeBlock.js

@@ -1,2 +1,2 @@
-import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-XNQOupQ3.js";
+import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-BUFXG8HW.js";
 export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorValue, CodeBlockTitle, highlightCode };

package/dist/components/CodexModelSelector.d.ts

@@ -0,0 +1,58 @@
+import { d as MenuProps } from "../Menu-Bgu-ufb5.js";
+import { CodexModel } from "../utils/codex-model-catalog.js";
+import * as React from "react";
+
+//#region src/components/CodexModelSelector.d.ts
+type ModelId<ModelT extends CodexModel> = ModelT["id"];
+type ReasoningEffort<ModelT extends CodexModel> = ModelT["supportedReasoningEfforts"][number]["reasoningEffort"];
+type ServiceTier<ModelT extends CodexModel> = ModelT["serviceTiers"][number]["id"];
+interface CodexModelSelectorProps<ModelT extends CodexModel = CodexModel> {
+  /** Whole Codex app-server `model/list` entries allowed for this account. */
+  readonly models: readonly ModelT[];
+  /** Current Codex catalog id. Use the selected entry's `model` field for inference. */
+  readonly selectedModelId?: ModelId<ModelT> | null;
+  /** Called only with an id from the supplied Codex catalog. */
+  readonly onSelectModel: (modelId: ModelId<ModelT>) => void;
+  /** Current reasoning effort advertised by the selected model. */
+  readonly selectedEffortId?: ReasoningEffort<ModelT> | null;
+  readonly onSelectEffort?: (effortId: ReasoningEffort<ModelT>) => void;
+  /** Current service tier advertised by the selected model. */
+  readonly selectedSpeedId?: ServiceTier<ModelT> | null;
+  readonly onSelectSpeed?: (speedId: ServiceTier<ModelT> | null) => void;
+  /** Restores all values to the consuming app's preferred defaults. */
+  readonly onReset?: () => void;
+  readonly disabled?: boolean;
+  readonly className?: string;
+  /** Controlled menu open state. */
+  readonly open?: boolean;
+  /** Initial menu state for uncontrolled usage. */
+  readonly defaultOpen?: boolean;
+  /** Receives Base UI's full open-change event details. */
+  readonly onOpenChange?: MenuProps["onOpenChange"];
+  readonly "aria-label"?: string;
+}
+/**
+ * A compact Codex-style response settings picker: model, reasoning effort,
+ * response speed, and reset are kept in one cascading menu.
+ *
+ * The consuming app supplies every selectable value. This component only
+ * renders those values and never guesses model ids or account entitlements.
+ */
+declare function CodexModelSelector<ModelT extends CodexModel>({
+  models,
+  selectedModelId,
+  onSelectModel,
+  selectedEffortId,
+  onSelectEffort,
+  selectedSpeedId,
+  onSelectSpeed,
+  onReset,
+  disabled,
+  className,
+  open,
+  defaultOpen,
+  onOpenChange,
+  "aria-label": ariaLabel
+}: CodexModelSelectorProps<ModelT>): React.JSX.Element;
+//#endregion
+export { CodexModelSelector, CodexModelSelectorProps };