@mcp-b/react-components 0.3.0 → 0.5.0

package/dist/components/Tool.js

@@ -1,209 +0,0 @@
-import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { A as SpinnerIcon, F as XIcon, N as WarningIcon, P as WrenchIcon, d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
-import { Badge } from "./Badge.js";
-import { i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "../CodeBlock-C2Xjxu9M.js";
-import { formatStructuredCodeDisplay } from "../utils/structured-code.js";
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { getToolName } from "ai";
-//#region src/components/Tool.tsx
-const STATE_TO_COLOR = {
-	"input-streaming": "primary",
-	"input-available": "neutral",
-	"approval-requested": "warning",
-	"approval-responded": "neutral",
-	"output-available": "success",
-	"output-error": "destructive",
-	"output-denied": "destructive"
-};
-const STATE_LABEL = {
-	"input-streaming": "Pending",
-	"input-available": "Running",
-	"approval-requested": "Awaiting Approval",
-	"approval-responded": "Responded",
-	"output-available": "Completed",
-	"output-error": "Error",
-	"output-denied": "Denied"
-};
-const STATE_ICON = {
-	"input-streaming": /* @__PURE__ */ jsx(DotIcon, {}),
-	"input-available": /* @__PURE__ */ jsx(SpinnerIcon, { className: "tool__status-spinner" }),
-	"approval-requested": /* @__PURE__ */ jsx(WarningIcon, {}),
-	"approval-responded": /* @__PURE__ */ jsx(CheckIcon, {}),
-	"output-available": /* @__PURE__ */ jsx(CheckIcon, {}),
-	"output-error": /* @__PURE__ */ jsx(XIcon, {}),
-	"output-denied": /* @__PURE__ */ jsx(XIcon, {})
-};
-function getStatusBadge(status) {
-	return /* @__PURE__ */ jsxs(Badge, {
-		color: STATE_TO_COLOR[status],
-		size: "sm",
-		className: "tool__header-badge",
-		children: [STATE_ICON[status], STATE_LABEL[status]]
-	});
-}
-const ToolContext = React.createContext(null);
-function useToolContext() {
-	const ctx = React.useContext(ToolContext);
-	if (!ctx) throw new Error("Tool subcomponents must be used inside <Tool>.");
-	return ctx;
-}
-/**
-* Displays a collapsible tool invocation (name, input, output, state).
-* The state drives the status badge color and default open behavior —
-* `output-available`, `output-error`, and `output-denied` auto-open.
-* Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
-*
-* @example
-* ```tsx
-* <Tool part={part}>
-*   <ToolHeader />
-*   <ToolContent>
-*     <ToolInput />
-*     <ToolOutput />
-*   </ToolContent>
-* </Tool>
-* ```
-*
-* @see {@link https://elements.ai-sdk.dev/components/tool | AI Elements Tool}
-*/
-function Tool({ className, part, state: stateProp, defaultOpen, ref, ...props }) {
-	const state = stateProp ?? part?.state;
-	const autoOpen = state === "output-available" || state === "output-error" || state === "output-denied";
-	const ctx = React.useMemo(() => ({
-		state,
-		part
-	}), [state, part]);
-	return /* @__PURE__ */ jsx(ToolContext.Provider, {
-		value: ctx,
-		children: /* @__PURE__ */ jsx(CollapsibleRoot, {
-			ref,
-			className: cx("tool", className),
-			defaultOpen: defaultOpen ?? autoOpen,
-			"data-state": state ?? void 0,
-			...props,
-			unstyled: true
-		})
-	});
-}
-/**
-* Clickable header that shows the tool type, name, and state badge.
-*/
-function ToolHeader({ className, type: typeProp, toolName, title: titleProp, state: stateProp, ref, ...props }) {
-	const { state: contextState, part } = useToolContext();
-	const state = stateProp ?? contextState ?? "input-available";
-	const type = typeProp ?? (part?.type === "dynamic-tool" ? "dynamic-tool" : "function");
-	const title = titleProp ?? part?.title;
-	const derivedName = part && typeProp === void 0 && toolName === void 0 ? getToolName(part) : type === "dynamic-tool" && toolName ? toolName : type.startsWith("tool-") ? type.split("-").slice(1).join("-") : toolName ?? type;
-	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
-		ref,
-		className: cx("tool__header", className),
-		...props,
-		unstyled: true,
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "tool__header-tool-icon",
-				"aria-hidden": "true",
-				children: /* @__PURE__ */ jsx(WrenchIcon, {})
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "tool__header-type",
-				children: type
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "tool__header-name",
-				children: derivedName
-			}),
-			title ? /* @__PURE__ */ jsx("span", {
-				className: "tool__header-title",
-				children: title
-			}) : null,
-			/* @__PURE__ */ jsx("span", { className: "tool__header-spacer" }),
-			getStatusBadge(state),
-			/* @__PURE__ */ jsx("span", {
-				className: "tool__header-icon",
-				"aria-hidden": "true",
-				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-			})
-		]
-	});
-}
-/**
-* Collapsible panel holding ToolInput and ToolOutput.
-*/
-function ToolContent({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx(CollapsiblePanel, {
-		ref,
-		className: cx("tool__content", className),
-		...props,
-		unstyled: true,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "tool__content-inner",
-			children
-		})
-	});
-}
-/**
-* Displays the tool input as a JSON code block. Renders nothing while the
-* input is still undefined.
-*/
-function ToolInput({ className, input: inputProp, ref, ...props }) {
-	const { state, part } = useToolContext();
-	const input = inputProp !== void 0 ? inputProp : part?.input;
-	const formattedInput = React.useMemo(() => input === void 0 ? null : formatStructuredCodeDisplay(input), [input]);
-	if (formattedInput === null) return null;
-	const isStreaming = state === "input-streaming";
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: cx("tool__section", className),
-		...props,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "tool__section-label",
-			children: "Input"
-		}), /* @__PURE__ */ jsx(CodeBlock, {
-			code: formattedInput.code,
-			language: formattedInput.language,
-			className: "tool__code-block",
-			isStreaming,
-			children: /* @__PURE__ */ jsx(CodeBlockContainer, { children: /* @__PURE__ */ jsx(CodeBlockContent, {}) })
-		})]
-	});
-}
-/**
-* Displays the tool output or error text.
-*/
-function ToolOutput({ className, output: outputProp, errorText: errorTextProp, ref, ...props }) {
-	const { part } = useToolContext();
-	const output = outputProp !== void 0 ? outputProp : part && "output" in part ? part.output : void 0;
-	const errorText = errorTextProp !== void 0 ? errorTextProp : part && "errorText" in part ? part.errorText : void 0;
-	const formattedOutput = React.useMemo(() => {
-		if (output && typeof output === "object" && !React.isValidElement(output)) return formatStructuredCodeDisplay(output);
-		if (typeof output === "string") return {
-			code: output,
-			language: "json"
-		};
-		return null;
-	}, [output]);
-	const isError = errorText !== void 0;
-	if (!(output || errorText)) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: cx("tool__section", isError && "tool__section--error", className),
-		...props,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "tool__section-label",
-			children: isError ? "Error" : "Output"
-		}), isError ? /* @__PURE__ */ jsx("div", {
-			className: "tool__error-text",
-			children: errorText
-		}) : formattedOutput ? /* @__PURE__ */ jsx(CodeBlock, {
-			code: formattedOutput.code,
-			language: formattedOutput.language,
-			className: "tool__code-block",
-			children: /* @__PURE__ */ jsx(CodeBlockContainer, { children: /* @__PURE__ */ jsx(CodeBlockContent, {}) })
-		}) : /* @__PURE__ */ jsx("div", { children: output })]
-	});
-}
-//#endregion
-export { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, getStatusBadge };

package/dist/styles/tool.css

@@ -1,203 +0,0 @@
-.tool {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: var(--sigvelo-font-sans);
-  color: var(--sigvelo-color-text);
-  /* Ploy-style: hairline outline on the canvas, plain content inside */
-  background-color: transparent;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-lg);
-  overflow: hidden;
-}
-
-.tool__header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  padding-block: 0.625rem;
-  padding-inline: 0.875rem;
-  background-color: transparent;
-  border: none;
-  /* Muted header row, Ploy/Codex style — content carries the emphasis */
-  color: var(--sigvelo-color-text-muted);
-  font-family: inherit;
-  font-size: 0.8125rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  text-align: start;
-  cursor: pointer;
-  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.tool__header:hover:not([data-disabled]) {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-}
-
-.tool__header:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
-}
-
-.tool__header-tool-icon,
-.tool__header-icon {
-  display: inline-flex;
-  color: var(--sigvelo-color-text-muted);
-}
-
-.tool__header-icon {
-  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
-}
-
-.tool__header[data-panel-open] .tool__header-icon {
-  transform: rotate(90deg);
-}
-
-.tool__header-type {
-  display: inline-flex;
-  align-items: center;
-  padding-block: 0.125rem;
-  padding-inline: 0.4375rem;
-  font-family: var(--sigvelo-font-mono);
-  font-size: 0.6875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-  color: var(--sigvelo-color-text-muted);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  border-radius: var(--sigvelo-radius-sm);
-}
-
-.tool__header-name {
-  font-family: var(--sigvelo-font-mono);
-  font-size: 0.8125rem;
-}
-
-.tool__header-name,
-.tool__header-title {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.tool__header-title {
-  color: var(--sigvelo-color-text-muted);
-  font-weight: var(--sigvelo-font-weight-normal);
-}
-
-.tool__header-spacer {
-  flex: 1;
-}
-
-.tool__header-badge {
-  gap: 0.25rem;
-}
-
-.tool__status-spinner {
-  animation: tool-spin 900ms linear infinite;
-}
-
-.tool__content {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
-  transition:
-    height var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.tool__content[data-starting-style],
-.tool__content[data-ending-style] {
-  height: 0;
-  opacity: 0;
-}
-
-.tool__content-inner {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding-block: 0.75rem;
-  padding-inline: 0.875rem;
-  transition:
-    transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized),
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.tool__content[data-closed] .tool__content-inner,
-.tool__content[data-starting-style] .tool__content-inner,
-.tool__content[data-ending-style] .tool__content-inner {
-  transform: translateY(-4px);
-  opacity: 0;
-}
-
-.tool__section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  min-height: 0;
-}
-
-.tool__section > :not(.tool__section-label) {
-  max-height: 20rem;
-  overflow: auto;
-}
-
-.tool__section-label {
-  font-size: 0.6875rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--sigvelo-color-text-muted);
-}
-
-.tool__code-block {
-  min-width: 0;
-}
-
-/* Blend nested code into the outlined box — plain content, no panel-in-panel */
-.code-block.tool__code-block {
-  background-color: transparent;
-}
-
-.tool__code-block .code-block__content,
-.tool__code-block .code-block__content--highlighted pre.shiki,
-.tool__code-block .code-block__content--highlighted pre.shiki code {
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-wrap: anywhere;
-}
-
-.tool__error-text {
-  padding: 0.5rem 0.75rem;
-  font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
-  color: var(--sigvelo-color-danger-text);
-  background-color: var(--sigvelo-color-danger-bg-subtle);
-  border-radius: var(--sigvelo-radius-sm);
-  white-space: pre-wrap;
-}
-
-@media (forced-colors: active) {
-  .tool {
-    border: 1px solid CanvasText;
-  }
-
-  .tool__header:focus-visible {
-    outline: 2px solid Highlight;
-    outline-offset: 2px;
-  }
-}
-
-@keyframes tool-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .tool__status-spinner {
-    animation: none;
-  }
-}