@mcp-b/react-components 0.21.0 → 0.23.0

package/dist/components/AgentActivityPreview.js

@@ -1,8 +1,10 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { A as McpIcon, K as SpinnerIcon, Q as WarningIcon, S as FileIcon, et as XIcon } from "../icons-DyOM0EJs.js";
+import { $ as WarningIcon, C as FileIcon, j as McpIcon, q as SpinnerIcon, tt as XIcon } from "../icons-ua6f_GH3.js";
 import { ActivityHeader } from "./Activity.js";
 import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
 import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
+import { AppIcon } from "./AppIcon.js";
+import { IconButton } from "./IconButton.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AgentActivityPreview.tsx
@@ -21,10 +23,12 @@ function AgentActivityPreview({ "aria-label": ariaLabel = "Agent activity", bran
 				"aria-hidden": "true",
 				children: brandIcon
 			}),
-			onDismiss ? /* @__PURE__ */ jsx("button", {
-				type: "button",
+			onDismiss ? /* @__PURE__ */ jsx(IconButton, {
 				className: "agent-activity-preview__dismiss",
-				"aria-label": "Hide agent activity",
+				color: "neutral",
+				label: "Hide agent activity",
+				size: "sm",
+				variant: "ghost",
 				onClick: onDismiss,
 				children: /* @__PURE__ */ jsx(XIcon, {})
 			}) : null,
@@ -48,17 +52,14 @@ function AgentActivityPreview({ "aria-label": ariaLabel = "Agent activity", bran
 							trailing: /* @__PURE__ */ jsxs("span", {
 								className: "agent-activity-preview__trailing",
 								"aria-hidden": "true",
-								children: [item.favicons?.length ? /* @__PURE__ */ jsx("span", {
-									className: "agent-activity-preview__favicons",
-									children: item.favicons.map((favicon) => /* @__PURE__ */ jsx("img", {
+								children: [item.favicons?.length ? /* @__PURE__ */ jsx(AppIcon.Stack, { children: item.favicons.map((favicon) => /* @__PURE__ */ jsxs(AppIcon.Root, {
+									size: "sm",
+									title: favicon.label,
+									children: [/* @__PURE__ */ jsx(AppIcon.Image, {
 										src: favicon.src,
-										alt: "",
-										title: favicon.label,
-										loading: "lazy",
-										decoding: "async",
-										referrerPolicy: "no-referrer"
-									}, `${favicon.src}:${favicon.label}`))
-								}) : null, /* @__PURE__ */ jsx(StatusIcon, { status: item.status })]
+										alt: ""
+									}), /* @__PURE__ */ jsx(AppIcon.Fallback, { children: favicon.label.slice(0, 1) })]
+								}, `${favicon.src}:${favicon.label}`)) }) : null, /* @__PURE__ */ jsx(StatusIcon, { status: item.status })]
 							})
 						})
 					}), item.workspaceDestination && renderWorkspaceFileLink ? /* @__PURE__ */ jsx(NavigationLink, {

package/dist/components/AgentAttention.d.ts

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

package/dist/components/AgentChat.d.ts

@@ -1,2 +1,2 @@
-import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-Dvkn8lce.js";
+import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-Bm1qYbOo.js";
 export { AgentChat, AgentChatComposerDraft, AgentChatProps, AgentChatRenderMessageContext, PermissionModeControl };

package/dist/components/AgentChat.js

@@ -1,17 +1,19 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { H as QueueIcon, I as MoveToFrontIcon, U as RefreshIcon, V as PlusIcon, Z as TrashIcon, z as PencilIcon } from "../icons-DyOM0EJs.js";
-import { n as MessageAction, r as MessageActions, t as Message } from "../Message-DzuteocT.js";
+import { Button } from "./Button.js";
+import { B as PencilIcon, H as PlusIcon, L as MoveToFrontIcon, Q as TrashIcon, U as QueueIcon, W as RefreshIcon } from "../icons-ua6f_GH3.js";
+import { IconButton } from "./IconButton.js";
+import { n as MessageAction, r as MessageActions, t as Message } from "../Message-_-bEYLAO.js";
 import { AgentMessageParts } from "./AgentMessageParts.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "./Context.js";
 import { EmptyState } from "./EmptyState.js";
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
+import { Menu } from "./Menu.js";
+import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputReferences, PromptInputSubmit, PromptInputTextarea, PromptInputTools, PromptInputTray, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
 import { AgentChatStartScreen } from "./AgentChatStartScreen.js";
 import { AgentChatMessageEditor } from "./AgentChatMessageEditor.js";
 import { Marker, MarkerContent } from "./Marker.js";
-import { Menu } from "./Menu.js";
 import { TransitionSurface } from "./TransitionSurface.js";
-import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputReferences, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
-import { t as CopyButton } from "../copy-button-vo1paUSi.js";
+import { t as CopyButton } from "../copy-button-TWq8nZhc.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isCompactionMessage } from "agents/experimental/memory/utils";
@@ -28,11 +30,23 @@ import { isReasoningUIPart, isTextUIPart } from "ai";
 function observeAgentChatComposer(element) {
 	if (!element || typeof ResizeObserver === "undefined") return;
 	const root = element.parentElement;
+	let written;
+	let frame = 0;
 	const observer = new ResizeObserver(() => {
-		root?.style.setProperty("--agent-chat-composer-size", `${element.offsetHeight}px`);
+		if (frame) return;
+		frame = requestAnimationFrame(() => {
+			frame = 0;
+			const size = `${element.offsetHeight}px`;
+			if (size === written) return;
+			written = size;
+			root?.style.setProperty("--agent-chat-composer-size", size);
+		});
 	});
 	observer.observe(element);
-	return () => observer.disconnect();
+	return () => {
+		cancelAnimationFrame(frame);
+		observer.disconnect();
+	};
 }
 const EMPTY_PENDING_APPROVALS = [];
 const EMPTY_SKIPPED_APPROVAL_IDS = [];
@@ -297,8 +311,10 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 				"aria-atomic": "true",
 				children: notice
 			}),
-			pendingPrompts.length ? /* @__PURE__ */ jsx("section", {
+			pendingPrompts.length ? /* @__PURE__ */ jsx(PromptInputTray, {
+				side: "top",
 				className: "agent-chat__queued",
+				role: "region",
 				"aria-label": "Queued messages",
 				children: /* @__PURE__ */ jsx("ul", {
 					className: "agent-chat__queued-list",
@@ -316,17 +332,21 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 									className: "agent-chat__queued-text sigvelo-truncate sigvelo-truncate-grow",
 									children: messageText
 								}),
-								/* @__PURE__ */ jsxs("button", {
-									type: "button",
+								/* @__PURE__ */ jsxs(Button, {
 									className: "agent-chat__queued-action",
 									"aria-label": `Move queued message to front: ${messageText}`,
+									color: "neutral",
+									size: "xs",
+									variant: "ghost",
 									onClick: () => setPendingPrompts((current) => [pending, ...current.filter((item) => item !== pending)]),
 									children: [/* @__PURE__ */ jsx(MoveToFrontIcon, {}), "Move to front"]
 								}),
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
+								/* @__PURE__ */ jsx(IconButton, {
 									className: "agent-chat__queued-action agent-chat__queued-remove",
-									"aria-label": `Remove queued message: ${messageText}`,
+									color: "neutral",
+									label: `Remove queued message: ${messageText}`,
+									size: "xs",
+									variant: "ghost",
 									onClick: () => setPendingPrompts((current) => current.filter((item) => item !== pending)),
 									children: /* @__PURE__ */ jsx(TrashIcon, {})
 								})

package/dist/components/AgentChatStartScreen.d.ts

@@ -1,2 +1,2 @@
-import { a as AgentChatStarterListProps, i as AgentChatStarterList, n as AgentChatStartScreenProps, o as AgentChatStarterProps, r as AgentChatStarter, t as AgentChatStartScreen } from "../AgentChatStartScreen-CvXJBr4y.js";
+import { a as AgentChatStarterListProps, i as AgentChatStarterList, n as AgentChatStartScreenProps, o as AgentChatStarterProps, r as AgentChatStarter, t as AgentChatStartScreen } from "../AgentChatStartScreen-DDZ25aax.js";
 export { AgentChatStartScreen, AgentChatStartScreenProps, AgentChatStarter, AgentChatStarterList, AgentChatStarterListProps, AgentChatStarterProps };

package/dist/components/AgentChatStartScreen.js

@@ -1,6 +1,8 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { et as XIcon } from "../icons-DyOM0EJs.js";
 import { Button } from "./Button.js";
+import { tt as XIcon } from "../icons-ua6f_GH3.js";
+import { IconButton } from "./IconButton.js";
+import { PromptInputTray } from "./PromptInput.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AgentChatStartScreen.tsx
@@ -11,7 +13,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * the same live composer moves from the center of the empty view to the pinned
 * transcript position after the first message.
 */
-function AgentChatStartScreen({ heading = "What should we work on?", composer, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+function AgentChatStartScreen({ heading = "What should we work on?", composer, composerTray, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
 	const headingId = React.useId();
 	return /* @__PURE__ */ jsx("section", {
 		"data-slot": "agent-chat-start-screen",
@@ -21,18 +23,24 @@ function AgentChatStartScreen({ heading = "What should we work on?", composer, c
 		...props,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "agent-chat-start-screen__content",
-			children: [
-				heading ? /* @__PURE__ */ jsx("h2", {
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "agent-chat-start-screen__primary",
+				children: [heading ? /* @__PURE__ */ jsx("h2", {
 					id: headingId,
 					className: "agent-chat-start-screen__heading",
 					children: heading
-				}) : null,
-				composer,
-				children ? /* @__PURE__ */ jsx("div", {
-					className: "agent-chat-start-screen__starters",
-					children
-				}) : null
-			]
+				}) : null, /* @__PURE__ */ jsxs("div", {
+					className: "agent-chat-start-screen__composer",
+					children: [composer, composerTray ? /* @__PURE__ */ jsx(PromptInputTray, {
+						side: "bottom",
+						className: "agent-chat-start-screen__composer-tray",
+						children: composerTray
+					}) : null]
+				})]
+			}), children ? /* @__PURE__ */ jsx("div", {
+				className: "agent-chat-start-screen__starters",
+				children
+			}) : null]
 		})
 	});
 }
@@ -65,14 +73,12 @@ function AgentChatStarter({ icon, muted = false, onDismiss, dismissLabel, childr
 				className: "agent-chat-starter__label",
 				children
 			})]
-		}), onDismiss ? /* @__PURE__ */ jsx(Button, {
-			type: "button",
+		}), onDismiss ? /* @__PURE__ */ jsx(IconButton, {
+			label: dismissLabel ?? "Dismiss suggestion",
 			variant: "ghost",
 			color: "neutral",
 			size: "lg",
-			iconOnly: true,
 			className: "agent-chat-starter__dismiss",
-			"aria-label": dismissLabel ?? "Dismiss suggestion",
 			onClick: onDismiss,
 			children: /* @__PURE__ */ jsx(XIcon, {})
 		}) : null]

package/dist/components/AgentConnection.d.ts

@@ -1,4 +1,4 @@
-import { McpServerSetupAuth, McpServerSetupAuthFieldName } from "../utils/mcp-server-catalog.js";
+import { d as McpServerSetupAuthFieldName, l as McpServerSetupAuth } from "../mcp-server-catalog-DycejaJ5.js";
 import * as React from "react";
 
 //#region src/components/AgentConnection.d.ts

package/dist/components/AgentConnection.js

@@ -1,10 +1,10 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { O as LinkIcon } from "../icons-DyOM0EJs.js";
 import { Button } from "./Button.js";
+import { k as LinkIcon } from "../icons-ua6f_GH3.js";
 import { Popover } from "./Popover.js";
 import { Field } from "./Field.js";
 import { Form } from "./Form.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-ygtuzqJd.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-Cp67Njo3.js";
 import { CUSTOM_MCP_SERVER_CARD } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/AgentMessageParts.js

@@ -1,4 +1,4 @@
-import { d as MessageContent, f as MessageResponse, i as MessageAttachment } from "../Message-DzuteocT.js";
+import { d as MessageContent, f as MessageResponse, i as MessageAttachment } from "../Message-_-bEYLAO.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
 import { Source, Sources, SourcesContent, SourcesTrigger } from "./Sources.js";
 import { ToolInvocation } from "./ToolInvocation.js";

package/dist/components/AgentToolDetail.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../icons-DyOM0EJs.js";
+import { r as ArrowLeftIcon } from "../icons-ua6f_GH3.js";
 import { TransitionSurface } from "./TransitionSurface.js";
 import { AppTopBar } from "./AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";

package/dist/components/AlertDialog.d.ts

@@ -1,4 +1,4 @@
-import { a as ButtonVariant, i as ButtonSize, n as ButtonColor } from "../Button-yRInko9u.js";
+import { a as ButtonVariant, i as ButtonSize, n as ButtonColor } from "../Button-SBIz6Lqi.js";
 import * as React from "react";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 
@@ -70,6 +70,7 @@ interface AlertDialogMediaProps extends React.HTMLAttributes<HTMLDivElement> {}
  * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
  */
 declare function AlertDialogTrigger({
+  render,
   className,
   ref,
   ...props

package/dist/components/AlertDialog.js

@@ -32,11 +32,17 @@ import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 */
-function AlertDialogTrigger({ className, ref, ...props }) {
-	const classes = mergeBaseClassName("alert-dialog__trigger", className);
+function AlertDialogTrigger({ render, className, ref, ...props }) {
+	const classes = mergeBaseClassName(render == null ? buttonVariants({
+		variant: "normal",
+		color: "primary",
+		size: "sm",
+		className: "alert-dialog__trigger"
+	}) : "alert-dialog__trigger", className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
 		ref,
 		"data-slot": "alert-dialog-trigger",
+		render,
 		className: classes,
 		...props
 	});

package/dist/components/AppIcon.d.ts

@@ -0,0 +1,58 @@
+import { AvatarFallbackProps, AvatarImageProps, AvatarRootProps } from "./Avatar.js";
+import * as React from "react";
+
+//#region src/components/AppIcon.d.ts
+type AppIconSize = "xs" | "sm" | "md" | "lg" | "xl";
+type AppIconVariant = "artwork" | "surface" | "contrast";
+interface AppIconRootProps extends Omit<AvatarRootProps, "shape" | "size"> {
+  size?: AppIconSize;
+  /** Artwork fills the tile; surface and contrast variants inset a standalone mark. */
+  variant?: AppIconVariant;
+}
+interface AppIconImageProps extends AvatarImageProps {}
+interface AppIconFallbackProps extends AvatarFallbackProps {}
+interface AppIconStackProps extends React.HTMLAttributes<HTMLSpanElement> {}
+/** Rounded app artwork with Base UI's image-loading fallback behavior. */
+declare function AppIconRoot({
+  className,
+  size,
+  variant,
+  ref,
+  ...props
+}: AppIconRootProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+/** App artwork or a resolved favicon, with lazy, async, no-referrer loading defaults. */
+declare function AppIconImage({
+  className,
+  decoding,
+  loading,
+  ref,
+  referrerPolicy,
+  ...props
+}: AppIconImageProps & {
+  ref?: React.Ref<HTMLImageElement>;
+}): React.JSX.Element;
+declare function AppIconFallback({
+  className,
+  ref,
+  ...props
+}: AppIconFallbackProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+/** Overlapping app marks; the first mark remains visually on top. */
+declare function AppIconStack({
+  className,
+  ref,
+  ...props
+}: AppIconStackProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+declare const AppIcon: {
+  Root: typeof AppIconRoot;
+  Image: typeof AppIconImage;
+  Fallback: typeof AppIconFallback;
+  Stack: typeof AppIconStack;
+};
+//#endregion
+export { AppIcon, AppIconFallbackProps, AppIconImageProps, AppIconRootProps, AppIconSize, AppIconStackProps, AppIconVariant };

package/dist/components/AppIcon.js

@@ -0,0 +1,51 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
+import { Avatar } from "./Avatar.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/AppIcon.tsx
+/** Rounded app artwork with Base UI's image-loading fallback behavior. */
+function AppIconRoot({ className, size = "md", variant = "artwork", ref, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar.Root, {
+		ref,
+		className: mergeBaseClassName("app-icon", className),
+		"data-app-icon-size": size,
+		"data-app-icon-variant": variant,
+		shape: "rounded",
+		...props
+	});
+}
+/** App artwork or a resolved favicon, with lazy, async, no-referrer loading defaults. */
+function AppIconImage({ className, decoding = "async", loading = "lazy", ref, referrerPolicy = "no-referrer", ...props }) {
+	return /* @__PURE__ */ jsx(Avatar.Image, {
+		ref,
+		className: mergeBaseClassName("app-icon__image", className),
+		decoding,
+		loading,
+		referrerPolicy,
+		...props
+	});
+}
+function AppIconFallback({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar.Fallback, {
+		ref,
+		className: mergeBaseClassName("app-icon__fallback", className),
+		...props
+	});
+}
+/** Overlapping app marks; the first mark remains visually on top. */
+function AppIconStack({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "app-icon-stack",
+		className: mergeBaseClassName("app-icon-stack", className),
+		...props
+	});
+}
+const AppIcon = {
+	Root: AppIconRoot,
+	Image: AppIconImage,
+	Fallback: AppIconFallback,
+	Stack: AppIconStack
+};
+//#endregion
+export { AppIcon };

package/dist/components/AppTopBar.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
-import { Button } from "./Button.js";
+import { buttonVariants } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { Toolbar } from "./Toolbar.js";
 import "react";
@@ -49,18 +49,17 @@ function AppTopBarControl({ className, ...props }) {
 	});
 }
 function AppTopBarButton({ children, className, disabled, label, render, tooltip = label, ...props }) {
+	const classes = mergeBaseClassName(buttonVariants({
+		variant: "ghost",
+		color: "neutral",
+		size: "sm"
+	}), className);
 	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
 		render: /* @__PURE__ */ jsx(AppTopBarControl, {
-			className,
+			className: classes,
 			"aria-label": label,
-			render: render ?? /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				variant: "ghost",
-				color: "neutral",
-				size: "sm",
-				iconOnly: true,
-				disabled
-			}),
+			"data-icon-only": "",
+			render,
 			disabled,
 			...props
 		}),

package/dist/components/Approval.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { z as PencilIcon } from "../icons-DyOM0EJs.js";
 import { Button } from "./Button.js";
+import { B as PencilIcon } from "../icons-ua6f_GH3.js";
 import { Kbd } from "./Kbd.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Artifact.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-yRInko9u.js";
+import { n as IconButtonProps } from "../IconButton-CFKhu6OR.js";
 import * as React from "react";
 
 //#region src/components/Artifact.d.ts
@@ -83,11 +83,7 @@ declare function ArtifactActions({
 }: ArtifactActionsProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ArtifactActionProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color"> {
-  /** Accessible label for the button. */
-  label?: string;
-  /** Tooltip text shown on hover. Defaults to label. */
-  tooltip?: string;
+interface ArtifactActionProps extends Omit<IconButtonProps, "children" | "variant" | "size" | "color"> {
   /** The icon to render inside the button. */
   icon?: React.ReactNode | React.ComponentType<{
     className?: string;
@@ -102,7 +98,7 @@ declare function ArtifactAction({
   children,
   ...props
 }: ArtifactActionProps): React.JSX.Element;
-interface ArtifactCloseProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color"> {
+interface ArtifactCloseProps extends Omit<IconButtonProps, "children" | "label" | "variant" | "size" | "color"> {
   /** Accessible label for the close button. */
   label?: string;
   children?: React.ReactNode;

package/dist/components/Artifact.js

@@ -1,9 +1,8 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { et as XIcon } from "../icons-DyOM0EJs.js";
-import { Button } from "./Button.js";
-import { Tooltip } from "./Tooltip.js";
+import { tt as XIcon } from "../icons-ua6f_GH3.js";
+import { IconButton } from "./IconButton.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/Artifact.tsx
 /**
 * A container for generated content (code, documents, outputs) with a header
@@ -78,32 +77,27 @@ function ArtifactActions({ className, children, ref, ...props }) {
 }
 function ArtifactAction({ className, label, tooltip, icon, children, ...props }) {
 	const Icon = typeof icon === "function" ? icon : null;
-	const accessibleLabel = label ?? tooltip;
-	const button = /* @__PURE__ */ jsxs(Button, {
+	return /* @__PURE__ */ jsx(IconButton, {
+		label,
+		tooltip,
 		variant: "ghost",
+		color: "neutral",
 		size: "sm",
-		iconOnly: true,
-		"aria-label": accessibleLabel,
 		className: cx("artifact__action", className),
 		...props,
-		children: [Icon ? /* @__PURE__ */ jsx(Icon, {}) : icon ?? children, accessibleLabel ? /* @__PURE__ */ jsx("span", {
-			className: "sigvelo-visually-hidden",
-			children: accessibleLabel
-		}) : null]
+		children: Icon ? /* @__PURE__ */ jsx(Icon, {}) : icon ?? children
 	});
-	if (!tooltip) return button;
-	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: button }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: tooltip }) }) })] });
 }
 function ArtifactClose({ className, label = "Close", children, ...props }) {
-	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+	return /* @__PURE__ */ jsx(IconButton, {
+		label,
 		variant: "ghost",
+		color: "neutral",
 		size: "sm",
-		iconOnly: true,
-		"aria-label": label,
 		className: cx("artifact__close", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(XIcon, {})
-	}) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: label }) }) })] });
+	});
 }
 function ArtifactContent({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/components/Avatar.d.ts

@@ -6,12 +6,15 @@ import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
  * Props for the Avatar.Root component.
  */
 interface AvatarRootProps extends React.ComponentPropsWithoutRef<typeof Avatar$1.Root> {
-  size?: "sm" | "md" | "lg";
+  size?: "sm" | "md" | "lg" | "xl";
+  shape?: "circle" | "rounded";
 }
 /**
  * Props for the Avatar.Image component.
  */
-interface AvatarImageProps extends React.ComponentPropsWithoutRef<typeof Avatar$1.Image> {}
+interface AvatarImageProps extends React.ComponentPropsWithoutRef<typeof Avatar$1.Image> {
+  fit?: "cover" | "contain";
+}
 /**
  * Props for the Avatar.Fallback component.
  */
@@ -35,6 +38,7 @@ interface AvatarBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {}
 declare function AvatarRoot({
   className,
   size,
+  shape,
   ref,
   ...props
 }: AvatarRootProps & {
@@ -45,6 +49,7 @@ declare function AvatarRoot({
  */
 declare function AvatarImage({
   className,
+  fit,
   ref,
   ...props
 }: AvatarImageProps & {

package/dist/components/Avatar.js

@@ -16,12 +16,13 @@ import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 *
 * @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
 */
-function AvatarRoot({ className, size = "md", ref, ...props }) {
+function AvatarRoot({ className, size = "md", shape = "circle", ref, ...props }) {
 	const classes = mergeBaseClassName("avatar", className);
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		ref,
 		"data-slot": "avatar",
 		"data-size": size,
+		"data-shape": shape,
 		className: classes,
 		...props
 	});
@@ -29,11 +30,12 @@ function AvatarRoot({ className, size = "md", ref, ...props }) {
 /**
 * Displays the avatar image. Renders an `<img>` element.
 */
-function AvatarImage({ className, ref, ...props }) {
+function AvatarImage({ className, fit = "cover", ref, ...props }) {
 	const classes = mergeBaseClassName("avatar__image", className);
 	return /* @__PURE__ */ jsx(Avatar$1.Image, {
 		ref,
 		"data-slot": "avatar-image",
+		"data-fit": fit,
 		className: classes,
 		...props
 	});

package/dist/components/BrowserLiveView.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { K as SpinnerIcon, k as MaximizeIcon } from "../icons-DyOM0EJs.js";
 import { Button } from "./Button.js";
+import { A as MaximizeIcon, q as SpinnerIcon } from "../icons-ua6f_GH3.js";
 import { Dialog } from "./Dialog.js";
 import { TransitionSurface } from "./TransitionSurface.js";
 import { StatusPill } from "./StatusPill.js";

package/dist/components/BrowserReplay.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { B as PlayIcon, R as PauseIcon } from "../icons-DyOM0EJs.js";
-import { Button } from "./Button.js";
+import { V as PlayIcon, z as PauseIcon } from "../icons-ua6f_GH3.js";
+import { IconButton } from "./IconButton.js";
 import { r as formatClock } from "../format-S6uWyoSb.js";
 import { EmptyState } from "./EmptyState.js";
 import { Slider } from "./Slider.js";
@@ -149,13 +149,12 @@ function BrowserReplay({ className, events, autoPlay, ref, ...props }) {
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "browser-replay__controls",
 			children: [
-				/* @__PURE__ */ jsx(Button, {
+				/* @__PURE__ */ jsx(IconButton, {
+					label: isPlaying ? "Pause replay" : "Play replay",
 					variant: "ghost",
 					color: "neutral",
 					size: "sm",
-					iconOnly: true,
 					className: "browser-replay__toggle",
-					"aria-label": isPlaying ? "Pause replay" : "Play replay",
 					disabled,
 					onClick: handlePlayPause,
 					children: isPlaying ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})