@mcp-b/react-components 0.11.0 → 0.12.0

package/dist/components/McpServerConnections.js

@@ -1,188 +0,0 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { F as WarningIcon, L as XIcon, M as SpinnerIcon, a as CheckIcon, k as RefreshIcon } from "../icons-D2Q5n5C1.js";
-import { Button } from "./Button.js";
-import { Badge } from "./Badge.js";
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/McpServerConnections.tsx
-/**
-* Runtime MCP server list. Add servers with `McpServerPicker`; render connected
-* state here from the upstream Agents SDK `MCPServersState`.
-*/
-function McpServerConnections({ className, heading = "Connected MCP servers", mcp, onAuthorize, onDisconnect, onRefresh, onRemove, onRetry, ref, ...props }) {
-	const [pendingAction, setPendingAction] = React.useState(null);
-	const entries = Object.entries(mcp.servers);
-	async function runAction(action, serverId, server, handler) {
-		if (!handler) return;
-		setPendingAction(`${action}:${serverId}`);
-		try {
-			await handler(serverId, server);
-		} finally {
-			setPendingAction(null);
-		}
-	}
-	return /* @__PURE__ */ jsxs("section", {
-		ref,
-		className: cx("mcp-server-connections", className),
-		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "mcp-server-connections__header",
-			children: [/* @__PURE__ */ jsx("h2", { children: heading }), /* @__PURE__ */ jsxs("span", {
-				className: "mcp-server-connections__summary",
-				children: [
-					entries.length,
-					" ",
-					entries.length === 1 ? "server" : "servers"
-				]
-			})]
-		}), entries.length === 0 ? /* @__PURE__ */ jsx("p", {
-			className: "mcp-server-connections__empty",
-			children: "No MCP servers connected."
-		}) : /* @__PURE__ */ jsx("ul", {
-			className: "mcp-server-connections__list",
-			role: "list",
-			children: entries.map(([serverId, server]) => {
-				const counts = getServerCapabilityCounts(mcp, serverId);
-				const status = getServerStatus(server);
-				const state = server.state;
-				const pending = (action) => pendingAction === `${action}:${serverId}`;
-				return /* @__PURE__ */ jsxs("li", {
-					className: "mcp-server-connections__item",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "mcp-server-connections__main",
-						children: [
-							/* @__PURE__ */ jsxs("div", {
-								className: "mcp-server-connections__title-row",
-								children: [/* @__PURE__ */ jsx("span", {
-									className: "mcp-server-connections__name",
-									children: server.name
-								}), /* @__PURE__ */ jsxs(Badge, {
-									color: status.color,
-									size: "sm",
-									className: "mcp-server-connections__status",
-									children: [status.icon, status.label]
-								})]
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "mcp-server-connections__url",
-								children: server.server_url
-							}),
-							server.error ? /* @__PURE__ */ jsx("p", {
-								className: "mcp-server-connections__error",
-								children: server.error
-							}) : null,
-							server.instructions ? /* @__PURE__ */ jsx("p", {
-								className: "mcp-server-connections__instructions",
-								children: server.instructions
-							}) : null,
-							/* @__PURE__ */ jsxs("p", {
-								className: "mcp-server-connections__capabilities",
-								children: [
-									counts.tools,
-									" tools, ",
-									counts.prompts,
-									" prompts, ",
-									counts.resources,
-									" resources"
-								]
-							})
-						]
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "mcp-server-connections__actions",
-						children: [
-							state === "authenticating" && onAuthorize ? /* @__PURE__ */ jsx(Button, {
-								type: "button",
-								size: "xs",
-								variant: "outline",
-								color: "primary",
-								disabled: pending("authorize"),
-								onClick: () => void runAction("authorize", serverId, server, onAuthorize),
-								children: pending("authorize") ? "Opening" : "Authorize"
-							}) : null,
-							state === "failed" && onRetry ? /* @__PURE__ */ jsxs(Button, {
-								type: "button",
-								size: "xs",
-								variant: "outline",
-								color: "neutral",
-								disabled: pending("retry"),
-								onClick: () => void runAction("retry", serverId, server, onRetry),
-								children: [/* @__PURE__ */ jsx(RefreshIcon, {}), pending("retry") ? "Retrying" : "Retry"]
-							}) : null,
-							(state === "ready" || state === "connected") && onRefresh ? /* @__PURE__ */ jsx(Button, {
-								type: "button",
-								size: "icon-xs",
-								variant: "ghost",
-								color: "neutral",
-								"aria-label": `Refresh ${server.name} capabilities`,
-								disabled: pending("refresh"),
-								onClick: () => void runAction("refresh", serverId, server, onRefresh),
-								children: /* @__PURE__ */ jsx(RefreshIcon, {})
-							}) : null,
-							state !== "failed" && onDisconnect ? /* @__PURE__ */ jsx(Button, {
-								type: "button",
-								size: "xs",
-								variant: "outline",
-								color: "neutral",
-								disabled: pending("disconnect"),
-								onClick: () => void runAction("disconnect", serverId, server, onDisconnect),
-								children: pending("disconnect") ? "Disconnecting" : "Disconnect"
-							}) : null,
-							onRemove ? /* @__PURE__ */ jsx(Button, {
-								type: "button",
-								size: "icon-xs",
-								variant: "ghost",
-								color: "destructive",
-								"aria-label": `Remove ${server.name}`,
-								disabled: pending("remove"),
-								onClick: () => void runAction("remove", serverId, server, onRemove),
-								children: /* @__PURE__ */ jsx(XIcon, {})
-							}) : null
-						]
-					})]
-				}, serverId);
-			})
-		})]
-	});
-}
-function getServerCapabilityCounts(mcp, serverId) {
-	return {
-		tools: mcp.tools.filter((tool) => tool.serverId === serverId).length,
-		prompts: mcp.prompts.filter((prompt) => prompt.serverId === serverId).length,
-		resources: mcp.resources.filter((resource) => resource.serverId === serverId).length
-	};
-}
-function getServerStatus(server) {
-	const state = server.state;
-	if (state === "ready") return {
-		color: "success",
-		icon: /* @__PURE__ */ jsx(CheckIcon, {}),
-		label: "Ready"
-	};
-	if (state === "failed") return {
-		color: "destructive",
-		icon: /* @__PURE__ */ jsx(WarningIcon, {}),
-		label: "Failed"
-	};
-	if (state === "authenticating") return {
-		color: "warning",
-		icon: /* @__PURE__ */ jsx(WarningIcon, {}),
-		label: "Authorize"
-	};
-	if (state === "connecting") return {
-		color: "neutral",
-		icon: /* @__PURE__ */ jsx(SpinnerIcon, { className: "mcp-server-connections__spinner" }),
-		label: "Connecting"
-	};
-	if (state === "discovering") return {
-		color: "neutral",
-		icon: /* @__PURE__ */ jsx(SpinnerIcon, { className: "mcp-server-connections__spinner" }),
-		label: "Discovering"
-	};
-	return {
-		color: "neutral",
-		icon: /* @__PURE__ */ jsx(CheckIcon, {}),
-		label: "Connected"
-	};
-}
-//#endregion
-export { McpServerConnections };

package/dist/components/useStickToBottom.d.ts

@@ -1,33 +0,0 @@
-//#region src/components/useStickToBottom.d.ts
-interface UseStickToBottomOptions {
-  /**
-   * How close to the bottom (in pixels) still counts as "at bottom" for the
-   * sticky behavior. Larger values keep the viewport pinned through small
-   * scroll jitter.
-   */
-  slackPx?: number;
-}
-interface UseStickToBottomResult {
-  /** Attach to the scrolling element. */
-  viewportRef: (element: HTMLElement | null) => void;
-  /**
-   * Attach to the element whose size determines whether the viewport
-   * overflows. Typically the immediate child of the viewport.
-   */
-  contentRef: (element: HTMLElement | null) => void;
-  /** True while the viewport is pinned within `slackPx` of the bottom. */
-  isAtBottom: boolean;
-  /** Imperatively scroll the viewport to its bottom. */
-  scrollToBottom: (behavior?: ScrollBehavior) => void;
-}
-/**
- * Pin a scrollable viewport to the bottom as its content grows, unless the
- * user has scrolled up.
- *
- * @deprecated Use MessageScroller for chat transcripts. Keep this only for
- * standalone streaming panes that do not need transcript row anchoring,
- * history prepending, visibility tracking, or jump-to-message behavior.
- */
-declare function useStickToBottom(options?: UseStickToBottomOptions): UseStickToBottomResult;
-//#endregion
-export { UseStickToBottomOptions, UseStickToBottomResult, useStickToBottom };

package/dist/components/useStickToBottom.js

@@ -1,107 +0,0 @@
-import * as React from "react";
-//#region src/components/useStickToBottom.ts
-const DEFAULT_STICK_SLACK_PX = 160;
-/**
-* Pin a scrollable viewport to the bottom as its content grows, unless the
-* user has scrolled up.
-*
-* @deprecated Use MessageScroller for chat transcripts. Keep this only for
-* standalone streaming panes that do not need transcript row anchoring,
-* history prepending, visibility tracking, or jump-to-message behavior.
-*/
-function useStickToBottom(options = {}) {
-	const slackPx = options.slackPx ?? DEFAULT_STICK_SLACK_PX;
-	const viewportElementRef = React.useRef(null);
-	const contentElementRef = React.useRef(null);
-	const [viewportElement, setViewportElement] = React.useState(null);
-	const [contentElement, setContentElement] = React.useState(null);
-	const [isAtBottom, setIsAtBottom] = React.useState(true);
-	const isAtBottomRef = React.useRef(true);
-	const didInitialScrollRef = React.useRef(false);
-	const viewportRef = React.useCallback((element) => {
-		viewportElementRef.current = element;
-		setViewportElement((prev) => prev === element ? prev : element);
-	}, []);
-	const contentRef = React.useCallback((element) => {
-		contentElementRef.current = element;
-		setContentElement((prev) => prev === element ? prev : element);
-	}, []);
-	React.useLayoutEffect(() => {
-		const el = viewportElement;
-		const observed = contentElement ?? el?.firstElementChild;
-		if (!el || !observed) return;
-		if (!didInitialScrollRef.current) {
-			el.scrollTo({
-				top: el.scrollHeight,
-				behavior: "auto"
-			});
-			didInitialScrollRef.current = true;
-		}
-		const readIsAtBottom = () => el.scrollHeight - el.scrollTop - el.clientHeight < slackPx;
-		let lastInteractionAt = 0;
-		const markInteraction = () => {
-			lastInteractionAt = Date.now();
-		};
-		const isUserResize = () => Date.now() - lastInteractionAt < 600;
-		const updateIsAtBottom = () => {
-			const next = readIsAtBottom();
-			if (isAtBottomRef.current === next) return;
-			isAtBottomRef.current = next;
-			setIsAtBottom(next);
-		};
-		let resizeFrameId = null;
-		const flushResize = () => {
-			resizeFrameId = null;
-			if (!isAtBottomRef.current || isUserResize()) {
-				updateIsAtBottom();
-				return;
-			}
-			el.scrollTo({
-				top: el.scrollHeight,
-				behavior: "auto"
-			});
-			updateIsAtBottom();
-		};
-		const scheduleResize = () => {
-			if (resizeFrameId !== null) return;
-			resizeFrameId = window.requestAnimationFrame(flushResize);
-		};
-		const handleScroll = () => {
-			updateIsAtBottom();
-		};
-		handleScroll();
-		el.addEventListener("scroll", handleScroll, { passive: true });
-		el.addEventListener("pointerdown", markInteraction, { passive: true });
-		el.addEventListener("keydown", markInteraction, { passive: true });
-		const observer = new ResizeObserver(() => {
-			scheduleResize();
-		});
-		observer.observe(observed);
-		return () => {
-			if (resizeFrameId !== null) window.cancelAnimationFrame(resizeFrameId);
-			el.removeEventListener("scroll", handleScroll);
-			el.removeEventListener("pointerdown", markInteraction);
-			el.removeEventListener("keydown", markInteraction);
-			observer.disconnect();
-		};
-	}, [
-		contentElement,
-		viewportElement,
-		slackPx
-	]);
-	return {
-		viewportRef,
-		contentRef,
-		isAtBottom,
-		scrollToBottom: React.useCallback((behavior = "smooth") => {
-			const el = viewportElementRef.current;
-			if (!el) return;
-			el.scrollTo({
-				top: el.scrollHeight,
-				behavior
-			});
-		}, [])
-	};
-}
-//#endregion
-export { useStickToBottom };

package/dist/styles/mcp-server-connections.css

@@ -1,145 +0,0 @@
-.mcp-server-connections {
-  display: grid;
-  gap: 0.625rem;
-  min-inline-size: 0;
-  color: var(--sigvelo-color-text);
-}
-
-.mcp-server-connections__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  min-inline-size: 0;
-}
-
-.mcp-server-connections__header h2 {
-  margin: 0;
-  font-size: 0.95rem;
-  font-weight: var(--sigvelo-font-weight-bold);
-  line-height: 1.2;
-  letter-spacing: 0;
-}
-
-.mcp-server-connections__summary,
-.mcp-server-connections__empty,
-.mcp-server-connections__url,
-.mcp-server-connections__capabilities,
-.mcp-server-connections__instructions {
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
-  line-height: 1.35;
-}
-
-.mcp-server-connections__summary {
-  flex: 0 0 auto;
-  white-space: nowrap;
-}
-
-.mcp-server-connections__empty {
-  margin: 0;
-  padding: 0.75rem;
-  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-surface);
-}
-
-.mcp-server-connections__list {
-  display: grid;
-  gap: 0.375rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.mcp-server-connections__item {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.75rem;
-  align-items: start;
-  min-inline-size: 0;
-  padding: 0.625rem;
-  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-surface);
-}
-
-.mcp-server-connections__main {
-  display: grid;
-  gap: 0.25rem;
-  min-inline-size: 0;
-}
-
-.mcp-server-connections__title-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.375rem;
-  min-inline-size: 0;
-}
-
-.mcp-server-connections__name {
-  min-inline-size: 0;
-  color: var(--sigvelo-color-text);
-  font-size: 0.85rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
-  overflow-wrap: anywhere;
-}
-
-.mcp-server-connections__status .mcp-server-connections__spinner {
-  animation: mcp-server-connections-spin 900ms linear infinite;
-}
-
-.mcp-server-connections__url,
-.mcp-server-connections__error,
-.mcp-server-connections__instructions,
-.mcp-server-connections__capabilities {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-.mcp-server-connections__error {
-  color: var(--sigvelo-color-danger-text);
-  font-size: 0.75rem;
-  line-height: 1.35;
-}
-
-.mcp-server-connections__actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.25rem;
-}
-
-.mcp-server-connections__actions .button > svg {
-  inline-size: 0.875rem;
-  block-size: 0.875rem;
-}
-
-@media (width < 34rem) {
-  .mcp-server-connections__item {
-    grid-template-columns: 1fr;
-  }
-
-  .mcp-server-connections__actions {
-    justify-content: flex-start;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .mcp-server-connections__status .mcp-server-connections__spinner {
-    animation: none;
-  }
-}
-
-@keyframes mcp-server-connections-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}