@mcp-b/react-components 0.18.0 → 0.20.0

package/dist/components/BrowserRunPanel.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { $ as XIcon, G as SpinnerIcon } from "../icons-CQJ-aMnI.js";
+import { K as SpinnerIcon, et as XIcon } from "../icons-DKXiSepE.js";
 import { Button } from "./Button.js";
 import { Tabs } from "./Tabs.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";

package/dist/components/Button.d.ts

@@ -1,2 +1,2 @@
-import { a as ButtonVariant, i as ButtonSize, n as ButtonColor, o as ButtonVariantsOptions, r as ButtonProps, s as buttonVariants, t as Button } from "../Button-DLGzHsjc.js";
+import { a as ButtonVariant, i as ButtonSize, n as ButtonColor, o as ButtonVariantsOptions, r as ButtonProps, s as buttonVariants, t as Button } from "../Button-yRInko9u.js";
 export { Button, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, ButtonVariantsOptions, buttonVariants };

package/dist/components/Button.js

@@ -29,19 +29,17 @@ function buttonVariants({ variant = "normal", color = "primary", size = "sm", cl
 *
 * @see {@link https://base-ui.com/react/components/button | Base UI Button}
 */
-function Button({ variant = "normal", color = "primary", size = "sm", iconOnly = false, className, nativeButton, ref, ...props }) {
+function Button({ variant = "normal", color = "primary", size = "sm", iconOnly = false, className, ref, ...props }) {
 	const classes = mergeBaseClassName(buttonVariants({
 		variant,
 		color,
 		size
 	}), className);
-	const resolvedNativeButton = nativeButton ?? props.render == null;
 	return /* @__PURE__ */ jsx(Button$1, {
 		ref,
 		"data-slot": "button",
 		"data-icon-only": iconOnly ? "" : void 0,
 		className: classes,
-		nativeButton: resolvedNativeButton,
 		...props
 	});
 }

package/dist/components/ChainOfThought.d.ts

@@ -1,5 +1,5 @@
 import { t as Collapsible } from "../Collapsible-N64ASIQr.js";
-import { E as IconProps } from "../icons-CYXmvKlJ.js";
+import { D as IconProps } from "../icons-DkRtZmvT.js";
 import * as React from "react";
 
 //#region src/components/ChainOfThought.d.ts

package/dist/components/ChainOfThought.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { G as SpinnerIcon, f as ChevronRightIcon, g as DotIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
+import { K as SpinnerIcon, _ as DotIcon, p as ChevronRightIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChainOfThought.tsx

package/dist/components/ChatGptSignInScreen.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { G as SpinnerIcon } from "../icons-CQJ-aMnI.js";
+import { K as SpinnerIcon } from "../icons-DKXiSepE.js";
 import { Button } from "./Button.js";
-import { u as ModelSelectorLogo } from "../ModelSelector-Cqw_qrUG.js";
+import { u as ModelSelectorLogo } from "../ModelSelector-4GsCWcZV.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChatGptSignInScreen.tsx

package/dist/components/Checkbox.d.ts

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Checkbox as Checkbox$1, CheckboxRootProps } from "@base-ui/react/checkbox";
 
 //#region src/components/Checkbox.d.ts
@@ -25,14 +24,12 @@ declare function CheckboxRoot({
   className,
   ref,
   ...props
-}: CheckboxProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
+}: CheckboxProps): import("react").JSX.Element;
 declare function CheckboxIndicator({
   children,
   className,
   ...props
-}: Checkbox$1.Indicator.Props): React.JSX.Element;
+}: Checkbox$1.Indicator.Props): import("react").JSX.Element;
 declare const Checkbox: {
   Root: typeof CheckboxRoot;
   Indicator: typeof CheckboxIndicator;

package/dist/components/Checkbox.js

@@ -1,6 +1,5 @@
 import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
-import { l as CheckIcon } from "../icons-CQJ-aMnI.js";
-import "react";
+import { u as CheckIcon } from "../icons-DKXiSepE.js";
 import { jsx } from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 //#region src/components/Checkbox.tsx

package/dist/components/Checkpoint.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { o as BookmarkIcon } from "../icons-CQJ-aMnI.js";
+import { o as BookmarkIcon } from "../icons-DKXiSepE.js";
 import { Marker, MarkerIcon } from "./Marker.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

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-gV4kZeCI.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-Bbls1CnA.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-Bfp5PAg3.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-Bb-IPBc_.js";
 export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorValue, CodeBlockTitle, highlightCode };

package/dist/components/CodexModelSelector.js

@@ -1,5 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { H as RefreshIcon, f as ChevronRightIcon, l as CheckIcon, u as ChevronDownIcon } from "../icons-CQJ-aMnI.js";
+import { U as RefreshIcon, c as BrainIcon, d as ChevronDownIcon, p as ChevronRightIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
+import { Tooltip } from "./Tooltip.js";
 import { Menu } from "./Menu.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -19,6 +20,10 @@ function CodexModelSelector({ models, selectedModelId = null, onSelectModel, sel
 	const speedOptions = getServiceTiers(selectedModel);
 	const selectedEffort = effortOptions.find((option) => option.reasoningEffort === selectedEffortId);
 	const selectedSpeed = speedOptions.find((option) => option.id === selectedSpeedId);
+	const selectedModelLabel = selectedModel?.displayName ?? "Select model";
+	const compactModelLabel = selectedModelLabel.replace(/^GPT-([^-]+).*$/i, "$1");
+	const selectedEffortLabel = selectedEffort ? formatSettingLabel(selectedEffort.reasoningEffort) : void 0;
+	const selectedSettingsLabel = selectedEffortLabel ? `${selectedModelLabel} · ${selectedEffortLabel}` : selectedModelLabel;
 	function handleSelectModel(modelId) {
 		const model = visibleModels.find((option) => option.id === modelId);
 		if (!model) return;
@@ -41,23 +46,38 @@ function CodexModelSelector({ models, selectedModelId = null, onSelectModel, sel
 	function handleReset() {
 		onReset?.();
 	}
+	const trigger = /* @__PURE__ */ jsxs(Menu.Trigger, {
+		unstyled: true,
+		className: cx("codex-model-selector__trigger", className),
+		disabled,
+		"aria-label": ariaLabel,
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "codex-model-selector__compact",
+				children: [/* @__PURE__ */ jsx(BrainIcon, { className: "codex-model-selector__compact-icon" }), /* @__PURE__ */ jsx("span", {
+					className: "codex-model-selector__compact-label",
+					children: compactModelLabel
+				})]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "codex-model-selector__summary",
+				children: [/* @__PURE__ */ jsx("span", { children: selectedModelLabel }), selectedEffort ? /* @__PURE__ */ jsx("span", {
+					className: cx("codex-model-selector__summary-effort", selectedEffort.reasoningEffort === "ultra" && "codex-model-selector__summary-effort--ultra"),
+					children: selectedEffortLabel
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx(ChevronDownIcon, { className: "codex-model-selector__trigger-icon" })
+		]
+	});
 	return /* @__PURE__ */ jsxs(Menu.Root, {
 		open,
 		defaultOpen,
 		onOpenChange,
-		children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
-			unstyled: true,
-			className: cx("codex-model-selector__trigger", className),
-			disabled,
-			"aria-label": ariaLabel,
-			children: [/* @__PURE__ */ jsxs("span", {
-				className: "codex-model-selector__summary",
-				children: [/* @__PURE__ */ jsx("span", { children: selectedModel?.displayName ?? "Select model" }), selectedEffort ? /* @__PURE__ */ jsx("span", {
-					className: cx("codex-model-selector__summary-effort", selectedEffort.reasoningEffort === "ultra" && "codex-model-selector__summary-effort--ultra"),
-					children: formatSettingLabel(selectedEffort.reasoningEffort)
-				}) : null]
-			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "codex-model-selector__trigger-icon" })]
-		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		children: [/* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: trigger }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			side: "top",
+			sideOffset: 6,
+			children: /* @__PURE__ */ jsxs(Tooltip.Popup, { children: ["Response settings: ", selectedSettingsLabel] })
+		}) })] }), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 			side: "top",
 			align: "end",
 			children: /* @__PURE__ */ jsxs(Menu.Popup, {

package/dist/components/Combobox.d.ts

@@ -1,2 +1,2 @@
-import { n as useComboboxAnchor, t as Combobox } from "../Combobox-CYc37s5l.js";
+import { n as useComboboxAnchor, t as Combobox } from "../Combobox-xEEF6fUb.js";
 export { Combobox, useComboboxAnchor };

package/dist/components/Combobox.js

@@ -39,12 +39,11 @@ function ComboboxPositioner({ className, ref, ...props }) {
 		...props
 	});
 }
-function ComboboxPopup({ className, tabIndex = 0, ref, ...props }) {
+function ComboboxPopup({ className, ref, ...props }) {
 	const classes = mergeBaseClassName(["combobox__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Combobox$1.Popup, {
 		ref,
 		"data-slot": "combobox-content",
-		tabIndex,
 		className: classes,
 		...props
 	});

package/dist/components/Commit.d.ts

@@ -1,5 +1,5 @@
 import { t as Collapsible } from "../Collapsible-N64ASIQr.js";
-import { t as CopyButtonProps } from "../copy-button-D7aAYA-2.js";
+import { t as CopyButtonProps } from "../copy-button-BrvQ7z4W.js";
 import * as React from "react";
 
 //#region src/components/Commit.d.ts

package/dist/components/Commit.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { f as ChevronRightIcon, x as FileIcon } from "../icons-CQJ-aMnI.js";
-import { t as CopyButton } from "../copy-button-DeK6KXEV.js";
+import { S as FileIcon, p as ChevronRightIcon } from "../icons-DKXiSepE.js";
+import { t as CopyButton } from "../copy-button-BtRwhRks.js";
 import { Badge } from "./Badge.js";
 import { Avatar } from "./Avatar.js";
 import "react";

package/dist/components/Context.js

@@ -68,12 +68,19 @@ function ContextTrigger({ className, children, ...props }) {
 	const { usedTokens, maxTokens } = useContextContext();
 	const percent = maxTokens > 0 ? usedTokens / maxTokens * 100 : 0;
 	if (React.isValidElement(children)) return /* @__PURE__ */ jsx(Popover.Trigger, {
+		unstyled: true,
 		className: cx("context__trigger", className),
 		...props,
 		render: children
 	});
-	if (children) return /* @__PURE__ */ jsx(Popover.Trigger, { children });
+	if (children) return /* @__PURE__ */ jsx(Popover.Trigger, {
+		unstyled: true,
+		className: cx("context__trigger", className),
+		...props,
+		children
+	});
 	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		unstyled: true,
 		className: cx("context__trigger", className),
 		"aria-label": `Context usage: ${percent.toFixed(0)}%`,
 		...props,

package/dist/components/ContextMenu.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
-import { g as DotIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
+import { _ as DotIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";

package/dist/components/Conversation.d.ts

@@ -1,4 +1,4 @@
-import { t as Button } from "../Button-DLGzHsjc.js";
+import { t as Button } from "../Button-yRInko9u.js";
 import { MessageScrollerButtonProps, MessageScrollerItemProps } from "./MessageScroller.js";
 import * as React from "react";
 import { UIMessage } from "ai";

package/dist/components/Conversation.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { _ as DownloadIcon, n as ArrowDownIcon } from "../icons-CQJ-aMnI.js";
+import { n as ArrowDownIcon, v as DownloadIcon } from "../icons-DKXiSepE.js";
 import { Button } from "./Button.js";
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
 import * as React from "react";

package/dist/components/Dialog.d.ts

@@ -93,6 +93,7 @@ declare function DialogDescription({
   ref?: React.Ref<HTMLParagraphElement>;
 }): React.JSX.Element;
 declare function DialogClose({
+  render,
   className,
   ref,
   ...props

package/dist/components/Dialog.js

@@ -1,4 +1,5 @@
 import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
+import { buttonVariants } from "./Button.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
@@ -50,7 +51,11 @@ function DialogViewport({ className, ref, ...props }) {
 	});
 }
 function DialogPopup({ size = "md", className, ref, ...props }) {
-	const classes = mergeBaseClassName(["dialog__popup", size !== "md" && `dialog__popup--${size}`].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName([
+		"dialog__popup",
+		"base-ui-modal-popup",
+		size !== "md" && `dialog__popup--${size}`
+	].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Dialog$1.Popup, {
 		ref,
 		"data-slot": "dialog-content",
@@ -92,11 +97,17 @@ function DialogDescription({ className, ref, ...props }) {
 		...props
 	});
 }
-function DialogClose({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["dialog__close"].filter(Boolean).join(" "), className);
+function DialogClose({ render, className, ref, ...props }) {
+	const classes = mergeBaseClassName(render == null ? buttonVariants({
+		variant: "normal",
+		color: "neutral",
+		size: "sm",
+		className: "dialog__close"
+	}) : "dialog__close", className);
 	return /* @__PURE__ */ jsx(Dialog$1.Close, {
 		ref,
 		"data-slot": "dialog-close",
+		render,
 		className: classes,
 		...props
 	});

package/dist/components/EnvironmentVariables.d.ts

@@ -1,4 +1,4 @@
-import { t as CopyButtonProps } from "../copy-button-D7aAYA-2.js";
+import { t as CopyButtonProps } from "../copy-button-BrvQ7z4W.js";
 import * as React from "react";
 
 //#region src/components/EnvironmentVariables.d.ts

package/dist/components/EnvironmentVariables.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { b as EyeOffIcon, y as EyeIcon } from "../icons-CQJ-aMnI.js";
-import { t as CopyButton } from "../copy-button-DeK6KXEV.js";
+import { b as EyeIcon, x as EyeOffIcon } from "../icons-DKXiSepE.js";
+import { t as CopyButton } from "../copy-button-BtRwhRks.js";
 import { Badge } from "./Badge.js";
 import { Switch } from "./Switch.js";
 import * as React from "react";

package/dist/components/FileTree.js

@@ -1,2 +1,2 @@
-import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-3zYtrddG.js";
+import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-CUlXfnmc.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

package/dist/components/IconButton.d.ts

@@ -1,4 +1,4 @@
-import { i as ButtonSize, r as ButtonProps } from "../Button-DLGzHsjc.js";
+import { i as ButtonSize, r as ButtonProps } from "../Button-yRInko9u.js";
 import * as React from "react";
 
 //#region src/components/IconButton.d.ts

package/dist/components/InlineCitation.js

@@ -84,6 +84,7 @@ function InlineCitationSource({ source, index, className, ref, ...props }) {
 		"data-source-id": source.sourceId,
 		"data-source-type": source.type,
 		children: /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			unstyled: true,
 			className: "inline-citation__trigger",
 			"aria-label": accessibleName,
 			children: visibleLabel

package/dist/components/Marker.d.ts

@@ -1,20 +1,14 @@
 import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/Marker.d.ts
 type MarkerVariant = "default" | "separator" | "border";
-type MarkerRenderProps = React.HTMLAttributes<HTMLElement> & {
-  ref?: React.Ref<HTMLElement>;
-};
 type MarkerRenderState = {
   variant: MarkerVariant;
 };
-type MarkerRenderFunction = (props: MarkerRenderProps, state: MarkerRenderState) => React.ReactElement | null;
-type MarkerRender = React.ReactElement<React.HTMLAttributes<HTMLElement>> | MarkerRenderFunction;
-interface MarkerProps extends React.HTMLAttributes<HTMLDivElement> {
+interface MarkerProps extends useRender.ComponentProps<"div", MarkerRenderState> {
   /** Visual treatment for status, separator, or bordered marker rows. */
   variant?: MarkerVariant;
-  /** Replace the root element while keeping marker classes, refs, and handlers merged. */
-  render?: MarkerRender;
 }
 interface MarkerVariantsOptions {
   variant?: MarkerVariant | null;
@@ -34,9 +28,7 @@ declare function Marker({
   render,
   ref,
   ...props
-}: MarkerProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element | null;
+}: MarkerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 interface MarkerIconProps extends React.HTMLAttributes<HTMLSpanElement> {}
 declare function MarkerIcon({
   className,

package/dist/components/Marker.js

@@ -1,58 +1,30 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
-import * as React from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/Marker.tsx
 function markerVariants({ variant = "default", className } = {}) {
 	return cx("marker", `marker--${variant ?? "default"}`, className);
 }
-function isEventHandler(propName, value) {
-	return /^on[A-Z]/.test(propName) && typeof value === "function";
-}
-function mergeRenderedMarkerProps(renderProps, markerProps) {
-	const mergedProps = {
-		...renderProps,
-		...markerProps
-	};
-	const markerPropsRecord = markerProps;
-	for (const propName of Object.keys(renderProps)) {
-		const renderValue = renderProps[propName];
-		const markerValue = markerPropsRecord[propName];
-		if (isEventHandler(propName, renderValue) && isEventHandler(propName, markerValue)) mergedProps[propName] = (...args) => {
-			renderValue(...args);
-			markerValue(...args);
-		};
-	}
-	mergedProps.className = cx(renderProps.className, markerProps.className);
-	mergedProps.style = renderProps.style || markerProps.style ? {
-		...renderProps.style,
-		...markerProps.style
-	} : void 0;
-	mergedProps.ref = mergeRefs(renderProps.ref, markerProps.ref);
-	return mergedProps;
-}
 /**
 * Compact status or separator row for transcript events like compaction,
 * checkpoints, and progress markers.
 */
 function Marker({ className, variant = "default", render, ref, ...props }) {
-	const rootProps = {
+	return useRender({
+		defaultTagName: "div",
+		render,
 		ref,
-		"data-slot": "marker",
-		"data-variant": variant,
-		className: markerVariants({
-			variant,
-			className
-		}),
-		...props
-	};
-	const markerProps = {
-		...rootProps,
-		ref
-	};
-	if (typeof render === "function") return render(markerProps, { variant });
-	if (React.isValidElement(render)) return React.cloneElement(render, mergeRenderedMarkerProps(render.props, markerProps));
-	return /* @__PURE__ */ jsx("div", { ...rootProps });
+		props: {
+			"data-slot": "marker",
+			...props,
+			className: markerVariants({
+				variant,
+				className
+			})
+		},
+		state: { variant }
+	});
 }
 function MarkerIcon({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("span", {

package/dist/components/McpConnectionRequest.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { G as SpinnerIcon, Z as WarningIcon, k as McpIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
+import { A as McpIcon, K as SpinnerIcon, Q as WarningIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
 import { Button } from "./Button.js";
 import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "./AgentAttention.js";
 import { getMcpServerEntry, getMcpServerRuntimeState } from "../utils/mcp-server-catalog.js";

package/dist/components/McpServerPicker.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
-import { G as SpinnerIcon, M as MinusIcon, Z as WarningIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
+import { K as SpinnerIcon, N as MinusIcon, Q as WarningIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
 import { buttonVariants } from "./Button.js";
 import { Dialog } from "./Dialog.js";
 import { Menu } from "./Menu.js";

package/dist/components/MediaPreviewCard.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { z as PlayIcon } from "../icons-CQJ-aMnI.js";
-import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
+import { B as PlayIcon } from "../icons-DKXiSepE.js";
+import { t as mergeRefs } from "../merge-refs-KlanQB7A.js";
 import { Card } from "./Card.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Menubar.d.ts

@@ -14,7 +14,10 @@ interface MenubarMenuProps extends React.ComponentPropsWithoutRef<typeof Menu.Ro
 /**
  * Props for the Menubar.Trigger component.
  */
-interface MenubarTriggerProps extends React.ComponentPropsWithoutRef<typeof Menu.Trigger> {}
+interface MenubarTriggerProps extends React.ComponentPropsWithoutRef<typeof Menu.Trigger> {
+  /** Skip the default Button chrome when a composed control owns its visuals. */
+  unstyled?: boolean;
+}
 /**
  * Props for the Menubar.Portal component.
  */
@@ -90,6 +93,7 @@ declare function MenubarRoot({
  * Button that opens the menu.
  */
 declare function MenubarTrigger({
+  unstyled,
   className,
   ref,
   ...props

package/dist/components/Menubar.js

@@ -1,5 +1,6 @@
 import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
-import { g as DotIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
+import { _ as DotIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
+import { buttonVariants } from "./Button.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
@@ -45,11 +46,17 @@ const MenubarMenu = (props) => {
 /**
 * Button that opens the menu.
 */
-function MenubarTrigger({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["menubar__trigger"].filter(Boolean).join(" "), className);
+function MenubarTrigger({ unstyled = false, className, ref, ...props }) {
+	const classes = mergeBaseClassName(unstyled ? "menubar__trigger" : buttonVariants({
+		variant: "ghost",
+		color: "neutral",
+		size: "sm",
+		className: "menubar__trigger"
+	}), className);
 	return /* @__PURE__ */ jsx(Menu.Trigger, {
 		ref,
 		"data-slot": "menubar-trigger",
+		"data-unstyled": unstyled ? "" : void 0,
 		className: classes,
 		...props
 	});

package/dist/components/Message.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-DLGzHsjc.js";
+import { r as ButtonProps } from "../Button-yRInko9u.js";
 import * as React from "react";
 import { FileUIPart, UIMessage } from "ai";
 import { StreamdownProps } from "streamdown";

package/dist/components/Message.js

@@ -1,2 +1,2 @@
-import { a as MessageBranch, c as MessageBranchPage, d as MessageContent, f as MessageResponse, i as MessageAttachment, l as MessageBranchPrevious, n as MessageAction, o as MessageBranchContent, p as MessageToolbar, r as MessageActions, s as MessageBranchNext, t as Message, u as MessageBranchSelector } from "../Message-BXtmfc9Q.js";
+import { a as MessageBranch, c as MessageBranchPage, d as MessageContent, f as MessageResponse, i as MessageAttachment, l as MessageBranchPrevious, n as MessageAction, o as MessageBranchContent, p as MessageToolbar, r as MessageActions, s as MessageBranchNext, t as Message, u as MessageBranchSelector } from "../Message-rZEaaD8Q.js";
 export { Message, MessageAction, MessageActions, MessageAttachment, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar };

package/dist/components/MessageScroller.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-DLGzHsjc.js";
+import { r as ButtonProps } from "../Button-yRInko9u.js";
 import * as React from "react";
 import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
 

package/dist/components/MessageScroller.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { n as ArrowDownIcon } from "../icons-CQJ-aMnI.js";
+import { n as ArrowDownIcon } from "../icons-DKXiSepE.js";
 import { Button } from "./Button.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/ModelSelector.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-DLGzHsjc.js";
+import { r as ButtonProps } from "../Button-yRInko9u.js";
 import { DialogProps } from "./Dialog.js";
 import { SeparatorProps } from "./Separator.js";
 import * as React from "react";

package/dist/components/ModelSelector.js

@@ -1,2 +1,2 @@
-import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorShortcut, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../ModelSelector-Cqw_qrUG.js";
+import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorShortcut, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../ModelSelector-4GsCWcZV.js";
 export { CloudflareModelSelector, ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };

package/dist/components/NavigationMenu.d.ts

@@ -117,9 +117,7 @@ declare function NavigationMenuIcon({
   className,
   ref,
   ...props
-}: NavigationMenuIconProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: NavigationMenuIconProps): React.JSX.Element;
 declare function NavigationMenuContent({
   className,
   ref,
@@ -146,9 +144,7 @@ declare function NavigationMenuPopup({
   className,
   ref,
   ...props
-}: NavigationMenuPopupProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: NavigationMenuPopupProps): React.JSX.Element;
 declare function NavigationMenuViewport({
   className,
   ref,

package/dist/components/Plan.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { g as DotIcon, i as ArrowRightIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
+import { _ as DotIcon, i as ArrowRightIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Plan.tsx