@mcp-b/react-components 0.35.0 → 0.37.0

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,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { K as SidebarIcon } from "../../icons-B1Qw05te.js";
+import { K as SidebarIcon } from "../../icons-B4mGvCvc.js";
 import { Button } from "../foundations/Button.js";
 import { t as capitalize } from "../../format-DB2mX9DA.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.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-DB2mX9DA.js";
 import { Field } from "../foundations/Field.js";
 import { Form } from "../foundations/Form.js";
+import { Dialog } from "../foundations/Dialog.js";
+import { i as formatErrorMessage } from "../../format-DB2mX9DA.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/SetupChecklist.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { H as PlusIcon, d as CheckIcon, f as ChevronDownIcon, tt as WarningIcon } from "../../icons-B1Qw05te.js";
+import { H as PlusIcon, d as CheckIcon, f as ChevronDownIcon, tt as WarningIcon } from "../../icons-B4mGvCvc.js";
 import { Button } from "../foundations/Button.js";
 import { Menu } from "../foundations/Menu.js";
 import * as React from "react";

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

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { $ as TerminalIcon, rt as XIcon } from "../../icons-B1Qw05te.js";
+import { $ as TerminalIcon, rt as XIcon } from "../../icons-B4mGvCvc.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { t as CopyButton } from "../../copy-button-CsNSSKYG.js";
+import { t as CopyButton } from "../../copy-button-4YvddK4e.js";
 import { Badge } from "../foundations/Badge.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
 import * as React from "react";
@@ -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/TestResults.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { J as SpinnerIcon, d as CheckIcon, m as ChevronRightIcon, rt as XIcon } from "../../icons-B1Qw05te.js";
 import { Collapsible } from "../foundations/Collapsible.js";
+import { J as SpinnerIcon, d as CheckIcon, m as ChevronRightIcon, rt as XIcon } from "../../icons-B4mGvCvc.js";
 import { Badge } from "../foundations/Badge.js";
 import { Progress } from "../foundations/Progress.js";
 import * as React from "react";

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

@@ -1,4 +1,4 @@
-import { F as MonitorIcon, I as MoonIcon, Z as SunIcon } from "../../icons-B1Qw05te.js";
+import { F as MonitorIcon, I as MoonIcon, Z as SunIcon } from "../../icons-B4mGvCvc.js";
 import { Radio, RadioGroup } from "../foundations/RadioGroup.js";
 import { useTheme } from "../foundations/ThemeProvider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -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

@@ -1,10 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { W as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
 import { Collapsible } from "../foundations/Collapsible.js";
+import { W as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-B4mGvCvc.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

@@ -1,8 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { k as LinkIcon } from "../../icons-B1Qw05te.js";
+import { k as LinkIcon } from "../../icons-B4mGvCvc.js";
 import { Button } from "../foundations/Button.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-DO4Hdu1R.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 { 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,11 +1,11 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
+import { r as ArrowLeftIcon } from "../../icons-B4mGvCvc.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-DbzqSTBt.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
+import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
+import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
+import { t as ThinkChat } from "../../ThinkChat-DQh59CeC.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentChat } from "@cloudflare/think/react";

package/dist/{copy-button-CsNSSKYG.js → copy-button-4YvddK4e.js}

@@ -1,4 +1,4 @@
-import { d as CheckIcon, g as CopyIcon } from "./icons-B1Qw05te.js";
+import { d as CheckIcon, g as CopyIcon } from "./icons-B4mGvCvc.js";
 import { IconButton } from "./components/foundations/IconButton.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/{mcp-server-U71zhxFF.js → mcp-server-SD_S-IpB.js}

@@ -1,4 +1,4 @@
-import { getMcpServerIconSrc, getMcpServerRuntimeState } from "./utils/mcp-server-catalog.js";
+import { getMcpServerEntry, getMcpServerIconSrc, getMcpServerRuntimeState } from "./utils/mcp-server-catalog.js";
 import { AppIcon } from "./components/foundations/AppIcon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/mcp-server.tsx
@@ -9,6 +9,22 @@ function getMcpServerConnectionKind(server) {
 	if (state === "connecting" || state === "discovering" || state === "connected" && !server.error) return "connecting";
 	return "reconnect";
 }
+/**
+* Resolve one catalog card to the exact Agents SDK entry that owns its live
+* connection state. An explicit server ID is authoritative for authorization
+* flows and deliberately never falls back to a matching catalog entry.
+*/
+function getMcpServerProjection(card, mcp, serverId) {
+	const assignedServer = serverId === void 0 ? void 0 : mcp?.servers[serverId];
+	const entry = serverId === void 0 ? getMcpServerEntry(card, mcp) : assignedServer ? [serverId, assignedServer] : void 0;
+	const server = entry?.[1];
+	return {
+		connectionKind: getMcpServerConnectionKind(server),
+		runtimeState: server ? getMcpServerRuntimeState(server) : void 0,
+		server,
+		serverId: entry?.[0]
+	};
+}
 function McpServerIcon({ server, size = "lg", variant }) {
 	const src = getMcpServerIconSrc(server);
 	return /* @__PURE__ */ jsxs(AppIcon.Root, {
@@ -23,4 +39,4 @@ function McpServerIcon({ server, size = "lg", variant }) {
 	});
 }
 //#endregion
-export { getMcpServerConnectionKind as n, McpServerIcon as t };
+export { getMcpServerProjection as n, McpServerIcon as t };

package/dist/message-scroller-C8cplcQO.js

@@ -0,0 +1,32 @@
+//#region src/components/_internal/message-scroller.ts
+const messageScrollerContract = {
+	root: {
+		className: "message-scroller",
+		slot: "message-scroller"
+	},
+	viewport: {
+		ariaLabel: "Messages",
+		className: "message-scroller__viewport",
+		role: "region",
+		slot: "message-scroller-viewport",
+		tabIndex: 0
+	},
+	content: {
+		ariaRelevant: "additions",
+		className: "message-scroller__content",
+		role: "log",
+		slot: "message-scroller-content",
+		virtualClassName: "message-scroller__virtual-content"
+	},
+	item: {
+		className: "message-scroller__item",
+		slot: "message-scroller-item",
+		virtualClassName: "message-scroller__virtual-item"
+	},
+	button: {
+		className: "message-scroller__button",
+		slot: "message-scroller-button"
+	}
+};
+//#endregion
+export { messageScrollerContract as t };

package/dist/provider-logos-zjZycgV6.js

@@ -0,0 +1,74 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/_internal/provider-logos.tsx
+function Svg({ children, size = 16, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": "true",
+		focusable: "false",
+		...props,
+		children
+	});
+}
+const OpenAILogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M22.28 9.81a5.99 5.99 0 0 0-.52-4.91 6.05 6.05 0 0 0-6.52-2.9A6.05 6.05 0 0 0 10.58 0a6.05 6.05 0 0 0-5.77 4.18 5.99 5.99 0 0 0-4 2.9 6.05 6.05 0 0 0 .74 7.09 5.99 5.99 0 0 0 .52 4.91 6.05 6.05 0 0 0 6.52 2.9A5.99 5.99 0 0 0 13.25 24a6.05 6.05 0 0 0 5.77-4.19 5.99 5.99 0 0 0 4-2.9 6.05 6.05 0 0 0-.74-7.1ZM13.25 22.44a4.48 4.48 0 0 1-2.88-1.04l.14-.08 4.79-2.76a.78.78 0 0 0 .39-.68v-6.75l2.02 1.17c.02 0 .04.03.04.05v5.58a4.5 4.5 0 0 1-4.5 4.5ZM3.57 18.3a4.5 4.5 0 0 1-.54-3.03l.14.09 4.79 2.76a.78.78 0 0 0 .78 0l5.85-3.37v2.33c0 .02 0 .04-.03.06L9.72 19.94a4.5 4.5 0 0 1-6.15-1.64ZM2.31 7.88a4.48 4.48 0 0 1 2.35-1.97v5.69a.78.78 0 0 0 .39.67l5.83 3.36-2.02 1.17a.07.07 0 0 1-.07 0l-4.83-2.8A4.5 4.5 0 0 1 2.3 7.9Zm16.64 3.87L13.1 8.37l2.02-1.17c.02 0 .05-.01.07 0l4.83 2.8a4.5 4.5 0 0 1-.67 8.11V12.4a.77.77 0 0 0-.4-.66Zm2-3.03-.14-.09-4.78-2.78a.78.78 0 0 0-.79 0L9.4 9.25V6.92c0-.02 0-.04.02-.05l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66Zm-12.68 4.17-2.02-1.17a.07.07 0 0 1-.04-.06V6.1a4.5 4.5 0 0 1 7.38-3.45l-.14.08L8.66 5.5a.78.78 0 0 0-.4.68v6.74Zm1.1-2.36 2.6-1.5 2.61 1.5v3l-2.6 1.5-2.6-1.5Z" })
+});
+const AnthropicLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
+	...props,
+	children: [/* @__PURE__ */ jsx("path", { d: "M13.83 4H17.3L24 20h-3.47l-1.37-3.52h-7L10.82 20H7.36ZM13.25 13.58h4.8l-2.4-6.15Z" }), /* @__PURE__ */ jsx("path", { d: "M0 4h3.47l6.7 16H6.7Z" })]
+});
+const GoogleLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 0 1 5.34 2.05l-2.2 2.2A5 5 0 1 0 17 12.6h-5v-2.6h7.9A8 8 0 0 1 12 20 8 8 0 0 1 12 4Z" })
+});
+const MetaLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M2 12.5c0-3.5 1.8-6.5 4.4-6.5 1.8 0 3.2 1.3 4.9 3.8 2.2 3.2 3.3 5 4.6 5 1 0 1.5-.8 1.5-2.3 0-2.1-1-4.3-2.7-4.3-1 0-2 .6-3.2 2l-1.3-1.7C11.5 6.8 12.9 6 14.5 6c3 0 5.5 3.3 5.5 7 0 3.3-1.6 5-3.8 5-2.3 0-3.6-1.6-6-5.3C8.9 10.4 8 9.2 6.8 9.2 5.4 9.2 4.3 10.6 4.3 13c0 1.8.5 3 1.3 3 .6 0 1.1-.3 1.8-1.1l1.3 1.7C7.6 17.6 6.3 18 5.3 18 3.3 18 2 16 2 12.5Z" })
+});
+const KimiLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
+	...props,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "9.5",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M8 7.5v9M8 12l4.5-4.5M8 12l5 4.5M14 7.5h2.5v9H14z",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	})]
+});
+const FallbackLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "3"
+	})
+});
+/**
+* Resolves a provider string to its logo component.
+* Unknown providers get a neutral dot fallback.
+*/
+function ProviderLogo({ provider, ...props }) {
+	switch (provider.toLowerCase()) {
+		case "openai": return /* @__PURE__ */ jsx(OpenAILogo, { ...props });
+		case "anthropic": return /* @__PURE__ */ jsx(AnthropicLogo, { ...props });
+		case "google": return /* @__PURE__ */ jsx(GoogleLogo, { ...props });
+		case "meta": return /* @__PURE__ */ jsx(MetaLogo, { ...props });
+		case "kimi": return /* @__PURE__ */ jsx(KimiLogo, { ...props });
+		default: return /* @__PURE__ */ jsx(FallbackLogo, { ...props });
+	}
+}
+//#endregion
+export { ProviderLogo as t };

package/dist/styles/agent-chat.css

@@ -436,6 +436,15 @@
   block-size: var(--sigvelo-text-sm);
 }
 
+.agent-chat__queued-content {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.agent-chat__queued-actions {
+  opacity: 1;
+}
+
 .agent-chat__queued-action {
   flex: none;
   font-weight: var(--sigvelo-font-weight-normal);

package/dist/styles/agent-connection.css

@@ -49,35 +49,18 @@
   text-wrap: pretty;
 }
 
-.agent-connect__targets {
+.agent-connect .agent-connect__targets {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: var(--sigvelo-spacing-1);
   min-inline-size: 0;
   margin: 0;
   padding: var(--sigvelo-spacing-1);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  background: var(--sigvelo-color-neutral-bg-subtle);
 }
 
 .agent-connect__target {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: var(--sigvelo-spacing-7);
   min-inline-size: 0;
-  padding: 0 var(--sigvelo-spacing-2);
-  border: 0;
-  border-radius: var(--sigvelo-radius-sm);
-  background: transparent;
-  color: var(--sigvelo-color-text-muted);
-  cursor: pointer;
-  font: inherit;
-  font-size: var(--sigvelo-text-xs);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-tight);
   overflow-wrap: anywhere;
   text-align: center;
 }
@@ -92,23 +75,13 @@
 }
 
 @media (pointer: coarse) {
-  .agent-connect__target {
+  .agent-connect .agent-connect__target {
     min-block-size: var(--sigvelo-spacing-10);
     padding-inline: var(--sigvelo-spacing-3);
   }
 }
 
-.agent-connect__target:hover {
-  color: var(--sigvelo-color-text);
-  background: color-mix(in oklab, var(--sigvelo-color-neutral-bg-muted), transparent 38%);
-}
-
-.agent-connect__target:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
-}
-
-.agent-connect__target[data-selected="true"] {
+.agent-connect .agent-connect__target[data-pressed] {
   border-color: var(--sigvelo-color-primary-border-muted);
   background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
@@ -174,7 +147,7 @@
     border-color: ButtonText;
   }
 
-  .agent-connect__target[data-selected="true"] {
+  .agent-connect .agent-connect__target[data-pressed] {
     outline: var(--sigvelo-focus-ring-forced);
     outline-offset: -2px;
   }

package/dist/styles/alert-dialog.css

@@ -3,7 +3,6 @@
 .alert-dialog__backdrop {
   background-color: var(--sigvelo-color-backdrop);
   backdrop-filter: var(--sigvelo-glass-filter);
-  z-index: var(--sigvelo-z-overlay);
 }
 
 .alert-dialog__popup {
@@ -13,7 +12,6 @@
   inset-block-start: 50%;
   inset-inline-start: 50%;
   translate: -50% -50%;
-  z-index: var(--sigvelo-z-overlay);
   inline-size: calc(100% - var(--sigvelo-control-height-sm));
   max-inline-size: 28rem;
   max-block-size: calc(100dvb - var(--sigvelo-control-height-sm));

package/dist/styles/base-ui-motion.css

@@ -2,7 +2,9 @@
  * Base UI exposes presence state on popup parts. Keep its state contract in
  * CSS so all anchored surfaces enter, exit, and respect reduced motion alike.
  */
-.base-ui-positioner {
+.base-ui-positioner,
+.base-ui-backdrop,
+.base-ui-modal-popup {
   z-index: var(--sigvelo-z-overlay);
 }
 
@@ -170,26 +172,26 @@
 .base-ui-adaptive-viewport[data-activation-direction~="left"] > [data-current][data-starting-style],
 .base-ui-adaptive-viewport[data-activation-direction~="right"]
   > [data-previous][data-ending-style] {
-  translate: 25% 0;
+  translate: -25% 0;
   opacity: 0;
 }
 
 .base-ui-adaptive-viewport[data-activation-direction~="right"]
   > [data-current][data-starting-style],
 .base-ui-adaptive-viewport[data-activation-direction~="left"] > [data-previous][data-ending-style] {
-  translate: -25% 0;
+  translate: 25% 0;
   opacity: 0;
 }
 
 .base-ui-adaptive-viewport[data-activation-direction~="up"] > [data-current][data-starting-style],
 .base-ui-adaptive-viewport[data-activation-direction~="down"] > [data-previous][data-ending-style] {
-  translate: 0 25%;
+  translate: 0 -25%;
   opacity: 0;
 }
 
 .base-ui-adaptive-viewport[data-activation-direction~="down"] > [data-current][data-starting-style],
 .base-ui-adaptive-viewport[data-activation-direction~="up"] > [data-previous][data-ending-style] {
-  translate: 0 -25%;
+  translate: 0 25%;
   opacity: 0;
 }
 

package/dist/styles/chatgpt-sign-in-screen.css

@@ -96,8 +96,7 @@
   line-height: var(--sigvelo-leading-compact);
 }
 
-.chatgpt-sign-in__brand-mark,
-.chatgpt-sign-in__logo {
+.chatgpt-sign-in__brand-mark {
   display: inline-flex;
 }
 
@@ -198,7 +197,10 @@
   scale: 1.06;
 }
 
-.chatgpt-sign-in__logo {
+.chatgpt-sign-in__button .chatgpt-sign-in__logo {
+  display: block;
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
   color: inherit;
 }
 

package/dist/styles/dialog.css

@@ -15,7 +15,6 @@
 .dialog__backdrop {
   background-color: var(--sigvelo-color-backdrop);
   backdrop-filter: var(--sigvelo-glass-filter);
-  z-index: var(--sigvelo-z-overlay);
 }
 
 .dialog__popup {
@@ -25,7 +24,6 @@
   inset-block-start: 50%;
   inset-inline-start: 50%;
   translate: -50% -50%;
-  z-index: var(--sigvelo-z-overlay);
   inline-size: calc(100% - var(--sigvelo-control-height-sm));
   max-inline-size: 32rem;
   max-block-size: calc(100dvb - var(--sigvelo-spacing-8));