@mastra/react 0.0.0-studio-cli-20260504022012 → 0.0.0-sugared-octave-20261030170102

package/dist/ui/index.cjs

@@ -0,0 +1,561 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+// \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+let react = require("react");
+react = __toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let tailwind_merge = require("tailwind-merge");
+let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
+let hast_util_to_jsx_runtime = require("hast-util-to-jsx-runtime");
+let shiki_bundle_web = require("shiki/bundle/web");
+// src/ui/Icon/Icon.tsx
+const IconSizes = {
+	sm: "mastra:[&>svg]:size-3",
+	md: "mastra:[&>svg]:size-4",
+	lg: "mastra:[&>svg]:size-5"
+};
+const Icon = ({ children, className, size = "md", ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: className || IconSizes[size],
+		...props,
+		children
+	});
+};
+// src/ui/Entity/context.tsx
+const EntityContext = (0, react.createContext)({
+	expanded: false,
+	setExpanded: () => {},
+	variant: "initial",
+	disabled: false
+});
+const EntityProvider = EntityContext.Provider;
+const useEntity = () => (0, react.useContext)(EntityContext);
+// src/ui/Entity/Entity.tsx
+const Entity = ({ className, variant = "initial", initialExpanded = false, disabled = false, ...props }) => {
+	const [expanded, setExpanded] = (0, react.useState)(initialExpanded);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EntityProvider, {
+		value: {
+			expanded,
+			setExpanded,
+			variant,
+			disabled
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className,
+			...props
+		})
+	});
+};
+const EntityTriggerClass = (0, tailwind_merge.twMerge)("mastra:aria-disabled:cursor-not-allowed mastra:aria-disabled:bg-surface5 mastra:aria-disabled:text-text3", "mastra:aria-expanded:rounded-b-none mastra:aria-expanded:border-b-0", "mastra:bg-surface3 mastra:text-text6 mastra:hover:bg-surface4 mastra:active:bg-surface5", "mastra:rounded-lg mastra:py-2 mastra:px-4 mastra:border mastra:border-border1", "mastra:cursor-pointer mastra:inline-flex mastra:items-center mastra:gap-1 mastra:font-mono");
+const EntityTriggerVariantClasses = {
+	agent: "mastra:[&_svg.mastra-icon]:text-accent1",
+	workflow: "mastra:[&_svg.mastra-icon]:text-accent3",
+	tool: "mastra:[&_svg.mastra-icon]:text-accent6",
+	memory: "mastra:[&_svg.mastra-icon]:text-accent2",
+	initial: "mastra:[&_svg.mastra-icon]:text-text3"
+};
+const EntityTrigger = ({ className, children, ...props }) => {
+	const { expanded, setExpanded, variant, disabled } = useEntity();
+	const handleClick = (e) => {
+		if (disabled) return;
+		setExpanded(!expanded);
+		props?.onClick?.(e);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		className: className || (0, tailwind_merge.twMerge)(EntityTriggerClass, !disabled && EntityTriggerVariantClasses[variant]),
+		...props,
+		onClick: handleClick,
+		"aria-expanded": expanded,
+		"aria-disabled": disabled,
+		children
+	});
+};
+const EntityContentClass = (0, tailwind_merge.twMerge)("mastra:space-y-4", "mastra:rounded-lg mastra:rounded-tl-none mastra:p-4 mastra:border mastra:border-border1 mastra:-mt-[0.5px]", "mastra:bg-surface3 mastra:text-text6");
+const EntityContent = ({ className, ...props }) => {
+	const { expanded } = useEntity();
+	if (!expanded) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: className || EntityContentClass,
+		...props
+	});
+};
+const EntityCaret = ({ className, ...props }) => {
+	const { expanded } = useEntity();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
+		className: (0, tailwind_merge.twMerge)(`mastra:text-text3 mastra:transition-transform mastra:duration-200 mastra:ease-in-out`, expanded ? "mastra:rotate-0" : "mastra:-rotate-90", className),
+		...props
+	}) });
+};
+// src/ui/Entity/ToolApproval.tsx
+const ToolApprovalClass = (0, tailwind_merge.twMerge)("mastra:rounded-lg mastra:border mastra:border-border1 mastra:max-w-1/2 mastra:mt-2", "mastra:bg-surface3 mastra:text-text6");
+const ToolApproval = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: className || ToolApprovalClass,
+		...props
+	});
+};
+const ToolApprovalTitleClass = (0, tailwind_merge.twMerge)("mastra:text-text6 mastra:inline-flex mastra:items-center mastra:gap-1");
+const ToolApprovalTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: className || ToolApprovalTitleClass,
+		...props
+	});
+};
+const ToolApprovalHeaderClass = (0, tailwind_merge.twMerge)("mastra:flex mastra:justify-between mastra:items-center mastra:gap-2", "mastra:border-b mastra:border-border1 mastra:px-4 mastra:py-2");
+const ToolApprovalHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: className || ToolApprovalHeaderClass,
+		...props
+	});
+};
+const ToolApprovalContentClass = (0, tailwind_merge.twMerge)("mastra:text-text6 mastra:p-4");
+const ToolApprovalContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: className || ToolApprovalContentClass,
+		...props
+	});
+};
+const ToolApprovalActionsClass = (0, tailwind_merge.twMerge)("mastra:flex mastra:gap-2 mastra:items-center");
+const ToolApprovalActions = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: className || ToolApprovalActionsClass,
+		...props
+	});
+};
+// src/ui/Entity/Entry.tsx
+const EntryClass = "mastra:space-y-2";
+const Entry = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: className || "mastra:space-y-2",
+		...props
+	});
+};
+const EntryTitleClass = "mastra:font-mono mastra:text-sm mastra:text-text3";
+const EntryTitle = ({ className, as: Root = "h3", ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Root, {
+		className: className || "mastra:font-mono mastra:text-sm mastra:text-text3",
+		...props
+	});
+};
+// src/ui/Tooltip/Tooltip.tsx
+const Tooltip = ({ children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.TooltipProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Root, { children }) });
+};
+const TooltipContentClass = "mastra:bg-surface4 mastra:text-text6 mastra mastra:rounded-lg mastra:py-1 mastra:px-2 mastra:text-xs mastra:border mastra:border-border1 mastra-tooltip-enter";
+const TooltipContent = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.TooltipPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.TooltipContent, {
+		className: className || "mastra:bg-surface4 mastra:text-text6 mastra mastra:rounded-lg mastra:py-1 mastra:px-2 mastra:text-xs mastra:border mastra:border-border1 mastra-tooltip-enter",
+		...props,
+		children
+	}) });
+};
+const TooltipTrigger = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.TooltipTrigger, {
+		...props,
+		asChild: true
+	});
+};
+// src/ui/IconButton/IconButton.tsx
+const IconButtonClass = "mastra:text-text3 mastra:hover:text-text6 mastra:active:text-text6 mastra:hover:bg-surface4 mastra:active:bg-surface5 mastra:rounded-md mastra:cursor-pointer";
+const IconButton = ({ children, tooltip, size = "md", className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...props,
+		className: className || (0, tailwind_merge.twMerge)("mastra:text-text3 mastra:hover:text-text6 mastra:active:text-text6 mastra:hover:bg-surface4 mastra:active:bg-surface5 mastra:rounded-md mastra:cursor-pointer", size === "md" && "mastra:p-0.5", size === "lg" && "mastra:p-1"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			size,
+			children
+		})
+	}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, { children: tooltip })] });
+};
+// src/ui/Code/highlight.ts
+async function highlight(code, lang) {
+	const out = await (0, shiki_bundle_web.codeToHast)(code, {
+		lang,
+		theme: "dracula-soft"
+	});
+	return (0, hast_util_to_jsx_runtime.toJsxRuntime)(out, {
+		Fragment: react.Fragment,
+		jsx: react_jsx_runtime.jsx,
+		jsxs: react_jsx_runtime.jsxs
+	});
+}
+// src/ui/Code/Code.tsx
+const CodeBlockClass = "mastra:rounded-lg mastra:[&>pre]:p-4 mastra:overflow-hidden mastra:[&>pre]:!bg-surface4 mastra:[&>pre>code]:leading-5 mastra:relative";
+const CodeBlock = ({ code, language, className, cta }) => {
+	const [nodes, setNodes] = (0, react.useState)(null);
+	(0, react.useLayoutEffect)(() => {
+		highlight(code, language).then(setNodes);
+	}, [language]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: className || "mastra:rounded-lg mastra:[&>pre]:p-4 mastra:overflow-hidden mastra:[&>pre]:!bg-surface4 mastra:[&>pre>code]:leading-5 mastra:relative",
+		children: [nodes ?? null, cta]
+	});
+};
+const CodeCopyButton = ({ code }) => {
+	const [isCopied, setIsCopied] = (0, react.useState)(false);
+	const handleCopy = () => {
+		navigator.clipboard.writeText(code);
+		setIsCopied(true);
+		setTimeout(() => setIsCopied(false), 2e3);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "mastra:absolute mastra:top-2 mastra:right-2",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+			tooltip: "Copy",
+			onClick: handleCopy,
+			children: isCopied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CopyIcon, {})
+		})
+	});
+};
+// src/ui/Icons/AgentIcon.tsx
+const AgentIcon = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "17",
+	height: "16",
+	viewBox: "0 0 17 16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	className: (0, tailwind_merge.twMerge)("mastra-icon", className),
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		fillRule: "evenodd",
+		clipRule: "evenodd",
+		d: "M8.5 15C10.3565 15 12.137 14.2625 13.4497 12.9497C14.7625 11.637 15.5 9.85652 15.5 8C15.5 6.14348 14.7625 4.36301 13.4497 3.05025C12.137 1.7375 10.3565 1 8.5 1C6.64348 1 4.86301 1.7375 3.55025 3.05025C2.2375 4.36301 1.5 6.14348 1.5 8C1.5 9.85652 2.2375 11.637 3.55025 12.9497C4.86301 14.2625 6.64348 15 8.5 15ZM5.621 10.879L4.611 11.889C3.84179 11.1198 3.31794 10.1398 3.1057 9.07291C2.89346 8.00601 3.00236 6.90013 3.41864 5.89512C3.83491 4.89012 4.53986 4.03112 5.44434 3.42676C6.34881 2.8224 7.41219 2.49983 8.5 2.49983C9.58781 2.49983 10.6512 2.8224 11.5557 3.42676C12.4601 4.03112 13.1651 4.89012 13.5814 5.89512C13.9976 6.90013 14.1065 8.00601 13.8943 9.07291C13.6821 10.1398 13.1582 11.1198 12.389 11.889L11.379 10.879C11.1004 10.6003 10.7696 10.3792 10.4055 10.2284C10.0414 10.0776 9.6511 9.99995 9.257 10H7.743C7.3489 9.99995 6.95865 10.0776 6.59455 10.2284C6.23045 10.3792 5.89963 10.6003 5.621 10.879Z",
+		fill: "currentColor"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M8.5 4C7.96957 4 7.46086 4.21071 7.08579 4.58579C6.71071 4.96086 6.5 5.46957 6.5 6V6.5C6.5 7.03043 6.71071 7.53914 7.08579 7.91421C7.46086 8.28929 7.96957 8.5 8.5 8.5C9.03043 8.5 9.53914 8.28929 9.91421 7.91421C10.2893 7.53914 10.5 7.03043 10.5 6.5V6C10.5 5.46957 10.2893 4.96086 9.91421 4.58579C9.53914 4.21071 9.03043 4 8.5 4Z",
+		fill: "currentColor"
+	})]
+});
+// src/ui/Icons/ToolsIcon.tsx
+const ToolsIcon = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	width: "17",
+	height: "16",
+	viewBox: "0 0 17 16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	className: (0, tailwind_merge.twMerge)("mastra-icon", className),
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		fillRule: "evenodd",
+		clipRule: "evenodd",
+		d: "M7.5605 1.42351C8.0791 0.904904 8.92215 0.906157 9.4395 1.42351L10.6922 2.67617C11.2108 3.19477 11.2095 4.03782 10.6922 4.55517L9.4395 5.80783C8.9209 6.32643 8.07785 6.32518 7.5605 5.80783L6.30784 4.55517C5.78923 4.03656 5.79049 3.19352 6.30784 2.67617L7.5605 1.42351ZM3.17618 5.80783C3.69478 5.28923 4.53782 5.29048 5.05517 5.80783L6.30784 7.0605C6.82644 7.5791 6.82519 8.42214 6.30784 8.93949L5.05517 10.1922C4.53657 10.7108 3.69353 10.7095 3.17618 10.1922L1.92351 8.93949C1.40491 8.42089 1.40616 7.57785 1.92351 7.0605L3.17618 5.80783ZM11.9448 5.80783C12.4634 5.28923 13.3065 5.29048 13.8238 5.80783L15.0765 7.0605C15.5951 7.5791 15.5938 8.42214 15.0765 8.93949L13.8238 10.1922C13.3052 10.7108 12.4622 10.7095 11.9448 10.1922L10.6922 8.93949C10.1736 8.42089 10.1748 7.57785 10.6922 7.0605L11.9448 5.80783ZM7.5605 10.1922C8.0791 9.67355 8.92215 9.67481 9.4395 10.1922L10.6922 11.4448C11.2108 11.9634 11.2095 12.8065 10.6922 13.3238L9.4395 14.5765C8.9209 15.0951 8.07785 15.0938 7.5605 14.5765L6.30784 13.3238C5.78923 12.8052 5.79049 11.9622 6.30784 11.4448L7.5605 10.1922Z",
+		fill: "currentColor"
+	})
+});
+// src/ui/Icons/WorkflowIcon.tsx
+const WorkflowIcon = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	width: "17",
+	height: "16",
+	viewBox: "0 0 17 16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	className: (0, tailwind_merge.twMerge)("mastra-icon", className),
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		fillRule: "evenodd",
+		clipRule: "evenodd",
+		d: "M6.24388 2.4018C6.24388 2.0394 6.53767 1.74561 6.90008 1.74561H10.0991C10.4614 1.74561 10.7553 2.0394 10.7553 2.4018V4.57546C10.7553 4.93787 10.4614 5.23166 10.0991 5.23166H9.31982V7.35469L10.0033 9.22664C9.90442 9.20146 9.80035 9.1761 9.6915 9.14986L9.62652 9.13422C9.30473 9.05687 8.92256 8.96501 8.61993 8.84491C8.5819 8.82981 8.54147 8.81292 8.49957 8.79391C8.45767 8.81292 8.41724 8.82981 8.3792 8.84491C8.07657 8.96501 7.6944 9.05687 7.37261 9.13422L7.30763 9.14986C7.19879 9.1761 7.09471 9.20146 6.99577 9.22664L7.67932 7.35469V5.23166H6.90008C6.53767 5.23166 6.24388 4.93787 6.24388 4.57546V2.4018ZM6.99577 9.22664C6.99577 9.22664 6.99578 9.22664 6.99577 9.22664L6.43283 10.7683H6.81806C7.18047 10.7683 7.47426 11.0622 7.47426 11.4245V13.5982C7.47426 13.9606 7.18047 14.2544 6.81806 14.2544H3.61909C3.25668 14.2544 2.96289 13.9606 2.96289 13.5982V11.4245C2.96289 11.0622 3.25668 10.7683 3.61909 10.7683H4.26617C4.2921 10.4663 4.32783 10.1494 4.37744 9.85171C4.43762 9.49063 4.52982 9.08135 4.68998 8.76102C4.93975 8.2615 5.44743 8.01751 5.7771 7.88788C6.14684 7.74249 6.57537 7.63889 6.92317 7.55505C7.24707 7.47696 7.49576 7.41679 7.67932 7.35469L6.99577 9.22664ZM6.43283 10.7683L6.99577 9.22664C6.75846 9.28705 6.55067 9.34646 6.37745 9.41458C6.22784 9.47341 6.1623 9.51712 6.14023 9.53254C6.09752 9.63631 6.04409 9.83055 5.99562 10.1214C5.96201 10.3231 5.93498 10.5439 5.91341 10.7683H6.43283ZM10.0033 9.22664L9.31982 7.35469C9.50338 7.41679 9.75206 7.47696 10.076 7.55505C10.4238 7.63889 10.8523 7.74249 11.2221 7.88788C11.5517 8.01751 12.0594 8.2615 12.3091 8.76102C12.4693 9.08135 12.5615 9.49063 12.6217 9.85171C12.6713 10.1494 12.707 10.4663 12.733 10.7683H13.38C13.7424 10.7683 14.0362 11.0622 14.0362 11.4245V13.5982C14.0362 13.9606 13.7424 14.2544 13.38 14.2544H10.1811C9.81867 14.2544 9.52488 13.9606 9.52488 13.5982V11.4245C9.52488 11.0622 9.81867 10.7683 10.1811 10.7683H10.5663L10.0033 9.22664ZM10.0033 9.22664L10.5663 10.7683H11.0857C11.0642 10.5439 11.0372 10.3231 11.0035 10.1214C10.9551 9.83055 10.9016 9.63631 10.8589 9.53254C10.8369 9.51712 10.7713 9.47341 10.6217 9.41458C10.4485 9.34646 10.2407 9.28705 10.0033 9.22664Z",
+		fill: "currentColor"
+	})
+});
+// src/ui/Message/Message.tsx
+const MessageClass = "mastra:flex mastra:flex-col mastra:w-full mastra:py-4 mastra:gap-2 mastra:group";
+const Message = ({ position, className, children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: className || (0, tailwind_merge.twMerge)("mastra:flex mastra:flex-col mastra:w-full mastra:py-4 mastra:gap-2 mastra:group", position === "left" ? "" : "mastra:items-end mastra:[&_.mastra-message-content]:bg-surface4 mastra:[&_.mastra-message-content]:px-4"),
+		...props,
+		children
+	});
+};
+const MessageContentClass = "mastra:max-w-4/5 mastra:py-2 mastra:text-text6 mastra:rounded-lg mastra-message-content mastra:text-md";
+const MessageContent = ({ children, className, isStreaming, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: className || "mastra:max-w-4/5 mastra:py-2 mastra:text-text6 mastra:rounded-lg mastra-message-content mastra:text-md",
+		...props,
+		children: [children, isStreaming && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageStreaming, {})]
+	});
+};
+const MessageActionsClass = "mastra:gap-2 mastra:flex mastra:opacity-0 mastra:group-hover:opacity-100 mastra:group-focus-within:opacity-100 mastra:items-center";
+const MessageActions = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: className || "mastra:gap-2 mastra:flex mastra:opacity-0 mastra:group-hover:opacity-100 mastra:group-focus-within:opacity-100 mastra:items-center",
+		...props,
+		children
+	});
+};
+const MessageUsagesClass = "mastra:flex mastra:gap-2 mastra:items-center";
+const MessageUsages = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: className || "mastra:flex mastra:gap-2 mastra:items-center",
+		...props,
+		children
+	});
+};
+const MessageUsageClass = "mastra:flex mastra:gap-2 mastra:items-center mastra:font-mono mastra:text-xs mastra:bg-surface3 mastra:rounded-lg mastra:px-2 mastra:py-1";
+const MessageUsage = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+		className: className || "mastra:flex mastra:gap-2 mastra:items-center mastra:font-mono mastra:text-xs mastra:bg-surface3 mastra:rounded-lg mastra:px-2 mastra:py-1",
+		...props,
+		children
+	});
+};
+const MessageUsageEntryClass = "mastra:text-text3 mastra:text-xs mastra:flex mastra:gap-1 mastra:items-center";
+const MessageUsageEntry = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+		className: className || "mastra:text-text3 mastra:text-xs mastra:flex mastra:gap-1 mastra:items-center",
+		...props,
+		children
+	});
+};
+const MessageUsageValueClass = "mastra:text-text6 mastra:text-xs";
+const MessageUsageValue = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+		className: className || "mastra:text-text6 mastra:text-xs",
+		...props,
+		children
+	});
+};
+const MessageListClass = "mastra:overflow-y-auto mastra:h-full mastra-list";
+const MessageList = ({ children, className, ...props }) => {
+	const listRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const scrollToBottom = () => {
+			if (!listRef.current) return;
+			listRef.current.scrollTo({
+				top: listRef.current.scrollHeight,
+				behavior: "smooth"
+			});
+		};
+		requestAnimationFrame(scrollToBottom);
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: className || "mastra:overflow-y-auto mastra:h-full mastra-list",
+		...props,
+		ref: listRef,
+		children
+	});
+};
+const MessageStreamingClass = "mastra:inline-block mastra:w-[2px] mastra:h-[1em] mastra:bg-text5 mastra:ml-0.5 mastra:align-text-bottom mastra:animate-pulse";
+const MessageStreaming = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: className || "mastra:inline-block mastra:w-[2px] mastra:h-[1em] mastra:bg-text5 mastra:ml-0.5 mastra:align-text-bottom mastra:animate-pulse",
+		...props
+	});
+};
+// src/ui/MessageFactory/MessageFactory.tsx
+const isDynamicToolPart = (part) => part.type === "dynamic-tool" || part.type.startsWith("tool-") && part.type !== "tool-invocation";
+const isDataPart = (part) => part.type.startsWith("data-");
+/**
+* Normalize the legacy persisted `type: 'source'` part (nested
+* `source: { id, url, title }`) into the flat `AIV5Type.SourceUrlUIPart` shape
+* the runtime accumulator emits, so the `SourceUrl` renderer receives one
+* stable prop contract regardless of which discriminant produced the citation.
+*/
+const sourceToSourceUrl = (part) => ({
+	type: "source-url",
+	sourceId: part.source.id,
+	url: part.source.url,
+	title: part.source.title,
+	providerMetadata: part.providerMetadata
+});
+/**
+* Resolve a stable key for a part so unchanged parts keep their identity across
+* streaming updates (and don't needlessly re-render).
+*/
+const getPartKey = (part, index) => {
+	if (isDynamicToolPart(part)) return part.toolCallId ?? `${part.type}-${index}`;
+	switch (part.type) {
+		case "text": {
+			const textId = part.textId;
+			return textId ? `${textId}-${index}` : `text-${index}`;
+		}
+		case "reasoning": return part.reasoningId ?? `reasoning-${index}`;
+		case "tool-invocation": return part.toolInvocation.toolCallId ?? `tool-invocation-${index}`;
+		case "source-url": return part.sourceId || `source-url-${index}`;
+		case "source": return part.source.id ?? `source-${index}`;
+	}
+	return part.id ?? `${part.type}-${index}`;
+};
+/**
+* Dispatch a single part to the one matching renderer. Only the renderer whose
+* discriminant matches `part.type` is invoked, so unrelated renderers never run
+* for a given part. Returns `fallback?.(part) ?? null` when no renderer matches.
+*/
+const renderPart = (part, renderers, fallback) => {
+	if (isDynamicToolPart(part)) return renderers.DynamicTool?.(part) ?? fallback?.(part) ?? null;
+	if (isDataPart(part)) return renderers.Data?.(part) ?? fallback?.(part) ?? null;
+	switch (part.type) {
+		case "text": return renderers.Text?.(part) ?? fallback?.(part) ?? null;
+		case "reasoning": return renderers.Reasoning?.(part) ?? fallback?.(part) ?? null;
+		case "file": return renderers.File?.(part) ?? fallback?.(part) ?? null;
+		case "step-start": return renderers.StepStart?.(part) ?? null;
+		case "error": return renderers.Error?.(part) ?? fallback?.(part) ?? null;
+		case "tool-invocation": return renderers.ToolInvocation?.(part) ?? fallback?.(part) ?? null;
+		case "source": return renderers.SourceUrl?.(sourceToSourceUrl(part)) ?? fallback?.(part) ?? null;
+		case "source-url": return renderers.SourceUrl?.(part) ?? fallback?.(part) ?? null;
+		case "source-document": return renderers.SourceDocument?.(part) ?? fallback?.(part) ?? null;
+		default: return fallback?.(part) ?? null;
+	}
+};
+/**
+* Memoized per-part renderer. Keeping each part isolated means a streaming
+* update to one part does not re-render the completed parts around it.
+*/
+const PartRenderer = (0, react.memo)(({ part, renderers, fallback }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: renderPart(part, renderers, fallback) }));
+PartRenderer.displayName = "PartRenderer";
+/**
+* Concatenate the text of every `text` part into a single string. Used as the
+* body forwarded to the replacement (`Tripwire`/`Warning`/`Error`) and adjacent
+* (`Task`) status slots, so consumers don't re-derive it from parts.
+*/
+const joinText = (parts) => parts.filter((part) => part.type === "text").map((part) => part.text).join("");
+/**
+* Normalize the two task-completion metadata fields into one
+* `{ passed, suppressFeedback }` verdict, or `undefined` when neither is set.
+* `completionResult` (network mode) takes precedence; `isTaskCompleteResult`
+* (supervisor mode) is the fallback. Both share the same persisted shape.
+*/
+const resolveTaskVerdict = (metadata) => {
+	const verdict = metadata?.completionResult ?? metadata?.isTaskCompleteResult;
+	if (!verdict) return void 0;
+	return {
+		passed: !!verdict.passed,
+		suppressFeedback: verdict.suppressFeedback
+	};
+};
+const roleRendererFor = (role, roles) => {
+	switch (role) {
+		case "user": return roles?.User;
+		case "assistant": return roles?.Assistant;
+		case "system": return roles?.System;
+		case "signal": return roles?.Signal;
+		default: return;
+	}
+};
+const MessageFactoryComponent = ({ message, roles, status, fallback, ...renderers }) => {
+	const parts = message.content.parts ?? [];
+	const metadata = message.content.metadata;
+	let content;
+	if (metadata?.status === "tripwire" && status?.Tripwire) content = status.Tripwire({
+		text: joinText(parts),
+		tripwire: metadata.tripwire,
+		message
+	});
+	else if (metadata?.status === "warning" && status?.Warning) content = status.Warning({
+		text: joinText(parts),
+		message
+	});
+	else if (metadata?.status === "error" && status?.Error) content = status.Error({
+		text: joinText(parts),
+		message
+	});
+	else {
+		content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: parts.map((part, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PartRenderer, {
+			part,
+			renderers,
+			fallback
+		}, getPartKey(part, index))) });
+		if (metadata?.status === "pending" && status?.Pending) content = status.Pending({
+			children: content,
+			text: joinText(parts),
+			message
+		});
+		const verdict = resolveTaskVerdict(metadata);
+		if (verdict && status?.Task) content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [content, status.Task({
+			...verdict,
+			text: joinText(parts),
+			message
+		})] });
+	}
+	const RoleWrapper = roleRendererFor(message.role, roles);
+	if (RoleWrapper) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: RoleWrapper({
+		message,
+		children: content
+	}) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: content });
+};
+/**
+* Renders a single {@link MastraDBMessage} by dispatching each part in
+* `content.parts` to an optional, type-safe, per-part-type render function.
+* Only the renderer matching a part's `type` is invoked, and each renderer
+* receives fully narrowed props.
+*/
+const MessageFactory = (0, react.memo)(MessageFactoryComponent);
+MessageFactory.displayName = "MessageFactory";
+exports.AgentIcon = AgentIcon;
+exports.CodeBlock = CodeBlock;
+exports.CodeBlockClass = CodeBlockClass;
+exports.CodeCopyButton = CodeCopyButton;
+exports.Entity = Entity;
+exports.EntityCaret = EntityCaret;
+exports.EntityContent = EntityContent;
+exports.EntityContentClass = EntityContentClass;
+exports.EntityTrigger = EntityTrigger;
+exports.EntityTriggerClass = EntityTriggerClass;
+exports.EntityTriggerVariantClasses = EntityTriggerVariantClasses;
+exports.Entry = Entry;
+exports.EntryClass = EntryClass;
+exports.EntryTitle = EntryTitle;
+exports.EntryTitleClass = EntryTitleClass;
+exports.Icon = Icon;
+exports.IconButton = IconButton;
+exports.IconButtonClass = IconButtonClass;
+exports.IconSizes = IconSizes;
+exports.Message = Message;
+exports.MessageActions = MessageActions;
+exports.MessageActionsClass = MessageActionsClass;
+exports.MessageClass = MessageClass;
+exports.MessageContent = MessageContent;
+exports.MessageContentClass = MessageContentClass;
+exports.MessageFactory = MessageFactory;
+exports.MessageList = MessageList;
+exports.MessageListClass = MessageListClass;
+exports.MessageStreaming = MessageStreaming;
+exports.MessageStreamingClass = MessageStreamingClass;
+exports.MessageUsage = MessageUsage;
+exports.MessageUsageClass = MessageUsageClass;
+exports.MessageUsageEntry = MessageUsageEntry;
+exports.MessageUsageEntryClass = MessageUsageEntryClass;
+exports.MessageUsageValue = MessageUsageValue;
+exports.MessageUsageValueClass = MessageUsageValueClass;
+exports.MessageUsages = MessageUsages;
+exports.MessageUsagesClass = MessageUsagesClass;
+exports.ToolApproval = ToolApproval;
+exports.ToolApprovalActions = ToolApprovalActions;
+exports.ToolApprovalActionsClass = ToolApprovalActionsClass;
+exports.ToolApprovalClass = ToolApprovalClass;
+exports.ToolApprovalContent = ToolApprovalContent;
+exports.ToolApprovalContentClass = ToolApprovalContentClass;
+exports.ToolApprovalHeader = ToolApprovalHeader;
+exports.ToolApprovalHeaderClass = ToolApprovalHeaderClass;
+exports.ToolApprovalTitle = ToolApprovalTitle;
+exports.ToolApprovalTitleClass = ToolApprovalTitleClass;
+exports.ToolsIcon = ToolsIcon;
+exports.Tooltip = Tooltip;
+exports.TooltipContent = TooltipContent;
+exports.TooltipContentClass = TooltipContentClass;
+exports.TooltipTrigger = TooltipTrigger;
+exports.WorkflowIcon = WorkflowIcon;
+exports.useEntity = useEntity;
+
+//# sourceMappingURL=index.cjs.map