@mcp-b/react-components 0.6.4 → 0.7.0

package/dist/components/Marker.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+
+//#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> {
+  /** 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;
+  className?: string;
+}
+declare function markerVariants({
+  variant,
+  className
+}?: MarkerVariantsOptions): string;
+/**
+ * Compact status or separator row for transcript events like compaction,
+ * checkpoints, and progress markers.
+ */
+declare function Marker({
+  className,
+  variant,
+  render,
+  ref,
+  ...props
+}: MarkerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
+interface MarkerIconProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function MarkerIcon({
+  className,
+  ref,
+  ...props
+}: MarkerIconProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface MarkerContentProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function MarkerContent({
+  className,
+  ref,
+  ...props
+}: MarkerContentProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { Marker, MarkerContent, MarkerContentProps, MarkerIcon, MarkerIconProps, MarkerProps, MarkerVariant, MarkerVariantsOptions, markerVariants };

package/dist/components/Marker.js

@@ -0,0 +1,89 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Marker.tsx
+function markerVariants({ variant = "default", className } = {}) {
+	return cx("marker", `marker--${variant ?? "default"}`, className);
+}
+function assignRef(ref, value) {
+	if (!ref) return;
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	ref.current = value;
+}
+function mergeRefs(...refs) {
+	const activeRefs = refs.filter(Boolean);
+	if (activeRefs.length === 0) return void 0;
+	return (value) => {
+		for (const activeRef of activeRefs) assignRef(activeRef, value);
+	};
+}
+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 = {
+		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 });
+}
+function MarkerIcon({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "marker-icon",
+		"aria-hidden": "true",
+		className: cx("marker__icon", className),
+		...props
+	});
+}
+function MarkerContent({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "marker-content",
+		className: cx("marker__content", className),
+		...props
+	});
+}
+//#endregion
+export { Marker, MarkerContent, MarkerIcon, markerVariants };

package/dist/components/McpServerPicker.js

@@ -1,6 +1,7 @@
 import { A as SpinnerIcon, D as PlusIcon, N as WarningIcon, a as CheckIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
 import { MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRoot, MenuShortcut, MenuTrigger } from "./Menu.js";
+import { getMcpServerIconSrc } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/McpServerPicker.tsx
@@ -65,7 +66,7 @@ function McpServerPickerRow({ server, onConnect }) {
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				className: "mcp-server-picker__icon",
-				children: renderIcon(server.icon, server.name)
+				children: renderIcon(server)
 			}),
 			/* @__PURE__ */ jsxs("span", {
 				className: "mcp-server-picker__copy",
@@ -106,18 +107,15 @@ function getStatusLabel(status) {
 	if (status === "connecting") return "Connecting";
 	return "";
 }
-function renderIcon(icon, name) {
-	if (typeof icon === "string") return /* @__PURE__ */ jsx(IconImage, {
-		src: icon,
-		name
-	});
-	if (icon) return /* @__PURE__ */ jsx(IconImage, {
-		src: icon.src,
-		name
+function renderIcon(server) {
+	const src = getMcpServerIconSrc(server);
+	if (src) return /* @__PURE__ */ jsx(IconImage, {
+		src,
+		name: server.name
 	});
 	return /* @__PURE__ */ jsx("span", {
 		className: "mcp-server-picker__fallback-icon",
-		children: name.slice(0, 1)
+		children: server.name.slice(0, 1)
 	});
 }
 function IconImage({ src, name }) {

package/dist/components/MessageScroller.d.ts

@@ -0,0 +1,52 @@
+import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
+import * as React from "react";
+import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+
+//#region src/components/MessageScroller.d.ts
+type MessageScrollerProviderProps = React.ComponentProps<typeof MessageScroller$1.Provider>;
+interface MessageScrollerProps extends React.ComponentProps<typeof MessageScroller$1.Root> {
+  /** Extra class names merged onto the scroll container. */
+  className?: string;
+}
+type MessageScrollerViewportProps = React.ComponentProps<typeof MessageScroller$1.Viewport>;
+type MessageScrollerContentProps = React.ComponentProps<typeof MessageScroller$1.Content>;
+type MessageScrollerItemProps = React.ComponentProps<typeof MessageScroller$1.Item>;
+declare function MessageScrollerProvider(props: MessageScrollerProviderProps): React.JSX.Element;
+/**
+ * Scroll container for chat transcripts, wrapping shadcn's message scroller
+ * primitive with design-system classes.
+ */
+declare function MessageScroller({
+  className,
+  ...props
+}: MessageScrollerProps): React.JSX.Element;
+declare function MessageScrollerViewport({
+  className,
+  ...props
+}: MessageScrollerViewportProps): React.JSX.Element;
+declare function MessageScrollerContent({
+  className,
+  ...props
+}: MessageScrollerContentProps): React.JSX.Element;
+declare function MessageScrollerItem({
+  className,
+  scrollAnchor,
+  ...props
+}: MessageScrollerItemProps): React.JSX.Element;
+interface MessageScrollerButtonProps extends Omit<React.ComponentProps<typeof MessageScroller$1.Button>, "children" | "className" | "color" | "render">, Pick<ButtonProps, "color" | "size" | "variant"> {
+  className?: string;
+  children?: React.ReactNode;
+  render?: React.ComponentProps<typeof MessageScroller$1.Button>["render"];
+}
+declare function MessageScrollerButton({
+  className,
+  children,
+  color,
+  direction,
+  render,
+  size,
+  variant,
+  ...props
+}: MessageScrollerButtonProps): React.JSX.Element;
+//#endregion
+export { MessageScroller, MessageScrollerButton, MessageScrollerButtonProps, MessageScrollerContent, MessageScrollerContentProps, MessageScrollerItem, MessageScrollerItemProps, MessageScrollerProps, MessageScrollerProvider, MessageScrollerProviderProps, MessageScrollerViewport, MessageScrollerViewportProps, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };

package/dist/components/MessageScroller.js

@@ -0,0 +1,62 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { t as ArrowDownIcon } from "../icons-BCNawx-T.js";
+import { Button } from "./Button.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+//#region src/components/MessageScroller.tsx
+function MessageScrollerProvider(props) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Provider, { ...props });
+}
+/**
+* Scroll container for chat transcripts, wrapping shadcn's message scroller
+* primitive with design-system classes.
+*/
+function MessageScroller({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Root, {
+		"data-slot": "message-scroller",
+		className: cx("message-scroller", className),
+		...props
+	});
+}
+function MessageScrollerViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Viewport, {
+		"data-slot": "message-scroller-viewport",
+		className: cx("message-scroller__viewport", className),
+		...props
+	});
+}
+function MessageScrollerContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Content, {
+		"data-slot": "message-scroller-content",
+		className: cx("message-scroller__content", className),
+		...props
+	});
+}
+function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Item, {
+		"data-slot": "message-scroller-item",
+		scrollAnchor,
+		className: cx("message-scroller__item", className),
+		...props
+	});
+}
+function MessageScrollerButton({ className, children, color = "neutral", direction = "end", render, size = "icon-sm", variant = "outline", ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Button, {
+		"data-slot": "message-scroller-button",
+		direction,
+		className: cx("message-scroller__button", className),
+		render: render ?? /* @__PURE__ */ jsx(Button, {
+			color,
+			size,
+			variant
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ArrowDownIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "message-scroller__button-label",
+			children: direction === "end" ? "Scroll to end" : "Scroll to start"
+		})] })
+	});
+}
+//#endregion
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };