@mcp-b/react-components 0.46.7 → 0.47.0

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

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

package/dist/components/nanites/AgentConnection.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { D as LinkIcon } from "../../icons-BC4HZqSK.js";
+import { D as LinkIcon } from "../../icons-cuEtsgj9.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-CcteqDvA.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-DMHZiw86.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/nanites/AgentToolDetail.d.ts

@@ -1,5 +1,5 @@
 import { i as ThinkChatValue } from "../../ThinkChatContext-COIgzkYp.js";
-import { ThinkChatMessagesProps } from "../agents-sdk/ThinkChat.js";
+import { i as ThinkChatMessagesProps } from "../../ThinkChat-CwMdEum8.js";
 import { t as ThinkAgent } from "../../think-agent-Cip5KAPj.js";
 import * as React from "react";
 import { UIMessage } from "ai";

package/dist/components/nanites/AgentToolDetail.js

@@ -1,15 +1,15 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../../icons-BC4HZqSK.js";
-import { TransitionSurface } from "../foundations/TransitionSurface.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
+import { r as ArrowLeftIcon } from "../../icons-cuEtsgj9.js";
 import { NaniteMark } from "./NaniteScene.js";
 import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
+import { TransitionSurface } from "../foundations/TransitionSurface.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
-import { t as ThinkChat } from "../../ThinkChat-qztQ6Clo.js";
+import { t as ThinkChat } from "../../ThinkChat-DLDta57t.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useAgentChat } from "@cloudflare/think/react";
 import { useAgent } from "agents/react";
+import { useAgentChat } from "@cloudflare/think/react";
 //#region src/components/nanites/AgentToolDetail.tsx
 /**
 * Live retained-child detail composed from upstream connection and chat values.

package/dist/{copy-button-BABPlsc-.js → copy-button-CSDuDfdP.js}

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

package/dist/{icons-ChPpNMmU.d.ts → icons-CCZGYUwU.d.ts}

@@ -253,6 +253,11 @@ declare const MailIcon: ({
   strokeWidth,
   ...props
 }: IconProps) => import("react").JSX.Element;
+declare const UserIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
 declare const McpIcon: ({
   size,
   ...props
@@ -291,4 +296,4 @@ declare const MaximizeIcon: ({
   ...props
 }: IconProps) => import("react").JSX.Element;
 //#endregion
-export { TerminalIcon as $, MailIcon as A, PencilIcon as B, FileIcon as C, InfoIcon as D, IconProps as E, MinusIcon as F, SearchIcon as G, PlusIcon as H, MonitorIcon as I, SpinnerIcon as J, SidebarIcon as K, MoonIcon as L, McpIcon as M, MessageSquareIcon as N, KeyboardIcon as O, MicrophoneIcon as P, TargetIcon as Q, PaperclipIcon as R, EyeOffIcon as S, FolderOpenIcon as T, QueueIcon as U, PlayIcon as V, RefreshIcon as W, StopIcon as X, SquareIcon as Y, SunIcon as Z, DiscordIcon as _, ArrowUpIcon as a, EllipsisIcon as b, BoxIcon as c, CalendarIcon as d, TrashIcon as et, CheckIcon as f, CopyIcon as g, CodeIcon as h, ArrowRightIcon as i, MaximizeIcon as j, LinkIcon as k, BrainIcon as l, ChevronRightIcon as m, ArrowDownIcon as n, WrenchIcon as nt, ArrowUpRightIcon as o, ChevronDownIcon as p, SlackIcon as q, ArrowLeftIcon as r, XIcon as rt, BookmarkIcon as s, ArchiveIcon as t, WarningIcon as tt, BrandIconProps as u, DotIcon as v, FolderIcon as w, EyeIcon as x, DownloadIcon as y, PauseIcon as z };
+export { TerminalIcon as $, MailIcon as A, PencilIcon as B, FileIcon as C, InfoIcon as D, IconProps as E, MinusIcon as F, SearchIcon as G, PlusIcon as H, MonitorIcon as I, SpinnerIcon as J, SidebarIcon as K, MoonIcon as L, McpIcon as M, MessageSquareIcon as N, KeyboardIcon as O, MicrophoneIcon as P, TargetIcon as Q, PaperclipIcon as R, EyeOffIcon as S, FolderOpenIcon as T, QueueIcon as U, PlayIcon as V, RefreshIcon as W, StopIcon as X, SquareIcon as Y, SunIcon as Z, DiscordIcon as _, ArrowUpIcon as a, EllipsisIcon as b, BoxIcon as c, CalendarIcon as d, TrashIcon as et, CheckIcon as f, CopyIcon as g, CodeIcon as h, ArrowRightIcon as i, XIcon as it, MaximizeIcon as j, LinkIcon as k, BrainIcon as l, ChevronRightIcon as m, ArrowDownIcon as n, WarningIcon as nt, ArrowUpRightIcon as o, ChevronDownIcon as p, SlackIcon as q, ArrowLeftIcon as r, WrenchIcon as rt, BookmarkIcon as s, ArchiveIcon as t, UserIcon as tt, BrandIconProps as u, DotIcon as v, FolderIcon as w, EyeIcon as x, DownloadIcon as y, PauseIcon as z };

package/dist/{icons-BC4HZqSK.js → icons-cuEtsgj9.js}

@@ -1,7 +1,7 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bookmark, Box, Brain, CalendarDays, Check, ChevronDown, ChevronRight, CircleStop, CodeXml, Copy, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Info, Keyboard, Link2, ListRestart, LoaderCircle, Mail, Maximize2, MessageSquare, Mic, Minus, Monitor, Moon, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Sun, Target, Terminal, Trash2, TriangleAlert, Wrench, X } from "lucide-react";
+import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bookmark, Box, Brain, CalendarDays, Check, ChevronDown, ChevronRight, CircleStop, CodeXml, Copy, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Info, Keyboard, Link2, ListRestart, LoaderCircle, Mail, Maximize2, MessageSquare, Mic, Minus, Monitor, Moon, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Sun, Target, Terminal, Trash2, TriangleAlert, User, Wrench, X } from "lucide-react";
 import { SiDiscord, SiModelcontextprotocol } from "react-icons/si";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/icons.tsx
 function icon(Component) {
 	return function DesignSystemIcon({ size = 16, strokeWidth = 1.75, ...props }) {
@@ -81,6 +81,7 @@ const InfoIcon = icon(Info);
 const MonitorIcon = icon(Monitor);
 const MessageSquareIcon = icon(MessageSquare);
 const MailIcon = icon(Mail);
+const UserIcon = icon(User);
 const McpIcon = brandIcon(SiModelcontextprotocol);
 /** Discord Blurple. Callers override with `color` or a `className` that sets color. */
 function DiscordIcon({ size = 16, color = "#5865F2", className, ...props }) {
@@ -130,4 +131,4 @@ const SunIcon = icon(Sun);
 const TargetIcon = icon(Target);
 const MaximizeIcon = icon(Maximize2);
 //#endregion
-export { WarningIcon as $, McpIcon as A, PlusIcon as B, FolderIcon as C, LinkIcon as D, KeyboardIcon as E, MoonIcon as F, SlackIcon as G, RefreshIcon as H, PaperclipIcon as I, StopIcon as J, SpinnerIcon as K, PauseIcon as L, MicrophoneIcon as M, MinusIcon as N, MailIcon as O, MonitorIcon as P, TrashIcon as Q, PencilIcon as R, FileIcon as S, InfoIcon as T, SearchIcon as U, QueueIcon as V, SidebarIcon as W, TargetIcon as X, SunIcon as Y, TerminalIcon as Z, DotIcon as _, ArrowUpIcon as a, EyeIcon as b, BoxIcon as c, CheckIcon as d, WrenchIcon as et, ChevronDownIcon as f, DiscordIcon as g, CopyIcon as h, ArrowRightIcon as i, MessageSquareIcon as j, MaximizeIcon as k, BrainIcon as l, CodeIcon as m, ArrowDownIcon as n, ArrowUpRightIcon as o, ChevronRightIcon as p, SquareIcon as q, ArrowLeftIcon as r, BookmarkIcon as s, ArchiveIcon as t, XIcon as tt, CalendarIcon as u, DownloadIcon as v, FolderOpenIcon as w, EyeOffIcon as x, EllipsisIcon as y, PlayIcon as z };
+export { UserIcon as $, McpIcon as A, PlusIcon as B, FolderIcon as C, LinkIcon as D, KeyboardIcon as E, MoonIcon as F, SlackIcon as G, RefreshIcon as H, PaperclipIcon as I, StopIcon as J, SpinnerIcon as K, PauseIcon as L, MicrophoneIcon as M, MinusIcon as N, MailIcon as O, MonitorIcon as P, TrashIcon as Q, PencilIcon as R, FileIcon as S, InfoIcon as T, SearchIcon as U, QueueIcon as V, SidebarIcon as W, TargetIcon as X, SunIcon as Y, TerminalIcon as Z, DotIcon as _, ArrowUpIcon as a, EyeIcon as b, BoxIcon as c, CheckIcon as d, WarningIcon as et, ChevronDownIcon as f, DiscordIcon as g, CopyIcon as h, ArrowRightIcon as i, MessageSquareIcon as j, MaximizeIcon as k, BrainIcon as l, CodeIcon as m, ArrowDownIcon as n, XIcon as nt, ArrowUpRightIcon as o, ChevronRightIcon as p, SquareIcon as q, ArrowLeftIcon as r, BookmarkIcon as s, ArchiveIcon as t, WrenchIcon as tt, CalendarIcon as u, DownloadIcon as v, FolderOpenIcon as w, EyeOffIcon as x, EllipsisIcon as y, PlayIcon as z };

package/dist/styles/connected-app-card.css

@@ -46,6 +46,14 @@
   color: var(--sigvelo-color-danger-text);
 }
 
+.connected-app-card__save-error {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-2);
+}
+
 .connected-app-card__body {
   margin: 0;
   overflow-wrap: anywhere;

package/dist/styles/description-list.css

@@ -49,7 +49,9 @@
 
 .description-list[data-variant="divided"] {
   gap: 0;
-  border-block: var(--sigvelo-border-style) var(--sigvelo-border-width)
+  /* Rows divide from each other and from the heading above. The last row has
+     no trailing rule — it doubled the card's elevation ring. */
+  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
 

package/dist/styles/index.css

@@ -130,6 +130,7 @@
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);
 @import "./workspace-mount-manager.css" layer(components);
+@import "./workspace-concepts.css" layer(components);
 @import "./composition-motion.css" layer(components);
 
 /* Page Components */

package/dist/styles/workspace-concepts.css

@@ -0,0 +1,28 @@
+/* Panel shell only. Cards reuse connected-app-card; lists reuse sigvelo-stack. */
+.workspace-concept-panel {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  min-block-size: 0;
+  block-size: 100%;
+  overflow: auto;
+  padding: var(--sigvelo-layout-gutter);
+  color: var(--sigvelo-color-text);
+  background: var(--sigvelo-color-canvas);
+}
+
+/* Session run outcome on the execution card's Last run row. */
+.workspace-execution-outcome {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-text-xs-leading);
+  white-space: nowrap;
+  color: var(--sigvelo-color-success-text);
+}
+
+@media (forced-colors: active) {
+  .workspace-execution-outcome {
+    color: CanvasText;
+  }
+}

package/dist/workspace-assets-CxpEHsac.js

@@ -0,0 +1,154 @@
+import { composerLinkHref } from "./utils/composer-link.js";
+import { canRequestFavicon, inferFaviconUrl } from "./utils/favicon.js";
+import { Q as TrashIcon, S as FileIcon } from "./icons-cuEtsgj9.js";
+import { Button } from "./components/foundations/Button.js";
+import { Tooltip } from "./components/foundations/Tooltip.js";
+import { IconButton } from "./components/foundations/IconButton.js";
+import { AppIcon } from "./components/foundations/AppIcon.js";
+import { ComposerLink } from "./components/ai-sdk/ComposerLink.js";
+import { AlertDialog } from "./components/foundations/AlertDialog.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/_internal/workspace-delete.tsx
+/**
+* Header trash control for a workspace file. The card owns the confirm dialog;
+* the host deletes the file.
+*/
+function WorkspaceDeleteControl({ name, onDelete }) {
+	const triggerRef = React.useRef(null);
+	const [open, setOpen] = React.useState(false);
+	const [busy, setBusy] = React.useState(false);
+	const [errorMessage, setErrorMessage] = React.useState("");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+		ref: triggerRef,
+		type: "button",
+		label: `Delete ${name}`,
+		tooltip: "Delete",
+		variant: "ghost",
+		color: "neutral",
+		disabled: busy,
+		"aria-haspopup": "dialog",
+		onClick: () => {
+			setErrorMessage("");
+			setOpen(true);
+		},
+		children: /* @__PURE__ */ jsx(TrashIcon, {})
+	}), /* @__PURE__ */ jsx(AlertDialog.Root, {
+		open,
+		onOpenChange: (nextOpen, eventDetails) => {
+			if (busy) {
+				eventDetails.cancel();
+				return;
+			}
+			setOpen(nextOpen);
+			if (!nextOpen) setErrorMessage("");
+		},
+		children: /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, {}), /* @__PURE__ */ jsx(AlertDialog.Viewport, { children: /* @__PURE__ */ jsxs(AlertDialog.Popup, {
+			finalFocus: triggerRef,
+			children: [
+				/* @__PURE__ */ jsxs(AlertDialog.Title, { children: [
+					"Delete ",
+					name,
+					"?"
+				] }),
+				/* @__PURE__ */ jsx(AlertDialog.Description, { children: "This deletes the file. This cannot be undone." }),
+				errorMessage ? /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					children: errorMessage
+				}) : null,
+				/* @__PURE__ */ jsxs(AlertDialog.Footer, { children: [/* @__PURE__ */ jsx(AlertDialog.Close, {
+					disabled: busy,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					color: "destructive",
+					disabled: busy,
+					onClick: () => {
+						if (busy) return;
+						setBusy(true);
+						setErrorMessage("");
+						Promise.resolve(onDelete()).then(() => {
+							setOpen(false);
+						}).catch((error) => {
+							setErrorMessage(error instanceof Error && error.message.trim() ? error.message : "The file could not be deleted. Try again.");
+						}).finally(() => {
+							setBusy(false);
+						});
+					},
+					children: busy ? "Deleting…" : "Delete"
+				})] })
+			]
+		}) })] })
+	})] });
+}
+//#endregion
+//#region src/components/_internal/workspace-assets.tsx
+/** HTTP(S) URL from a field value, or nothing. */
+function httpUrl(value) {
+	try {
+		const url = new URL(value.trim());
+		if (url.protocol === "http:" || url.protocol === "https:") return url.href;
+	} catch {
+		return;
+	}
+}
+/** Site mark for a URL. Decorative — sit it next to visible text. */
+function FaviconMark({ fallback, href }) {
+	const src = href ? inferFaviconUrl(href) : void 0;
+	const allowed = Boolean(src && canRequestFavicon(src));
+	const [failedSrc, setFailedSrc] = React.useState(null);
+	if (!src || !allowed || Boolean(src) && failedSrc === src) {
+		if (fallback == null) return null;
+		return /* @__PURE__ */ jsx(AppIcon.Root, {
+			size: "xs",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(AppIcon.Fallback, { children: fallback })
+		});
+	}
+	return /* @__PURE__ */ jsxs(AppIcon.Root, {
+		size: "xs",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx(AppIcon.Image, {
+			alt: "",
+			fit: "contain",
+			src,
+			onError: () => {
+				setFailedSrc(src);
+			}
+		}), /* @__PURE__ */ jsx(AppIcon.Fallback, { children: fallback ?? null })]
+	});
+}
+/**
+* Supplementary tooltip on an already-interactive control. Paths, globs, and
+* enable labels belong here — not as persistent body copy.
+*/
+function Hint({ children, content }) {
+	if (content == null || content === false || content === "") return children;
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+		render: children,
+		delay: 0
+	}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		side: "top",
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: content })
+	}) })] });
+}
+/** File/thread/site identity, same icon+label mark as the composer. */
+function WorkspaceComposerLink({ hint, icon, kind = "file", label, onOpen, value }) {
+	const link = /* @__PURE__ */ jsx(ComposerLink, {
+		href: composerLinkHref({
+			kind,
+			value,
+			label
+		}),
+		icon: icon ?? (kind === "file" ? /* @__PURE__ */ jsx(FileIcon, {}) : void 0),
+		onClick: onOpen,
+		children: label
+	});
+	return hint == null || hint === false || hint === "" ? link : /* @__PURE__ */ jsx(Hint, {
+		content: hint,
+		children: link
+	});
+}
+//#endregion
+export { WorkspaceDeleteControl as i, WorkspaceComposerLink as n, httpUrl as r, FaviconMark as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.46.7",
+  "version": "0.47.0",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -54,7 +54,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.2",
-    "@mcp-b/design-tokens": "0.46.7"
+    "@mcp-b/design-tokens": "0.47.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.249",

package/dist/WorkspaceMessageResponse-D66ty4FO.d.ts

@@ -1,24 +0,0 @@
-import { E as MessageResponseProps } from "./Message-D_vCVEGB.js";
-import * as React from "react";
-
-//#region src/components/agents-sdk/WorkspaceMessageResponse.d.ts
-interface WorkspaceHtmlArtifactRenderInput {
-  label: string;
-  path: string;
-  /** Shared workspace link element; hosts pass it through to the preview unchanged. */
-  sourceLink: React.ReactElement;
-}
-type WorkspaceHtmlArtifactRenderer = (artifact: WorkspaceHtmlArtifactRenderInput) => React.ReactNode;
-interface WorkspaceMessageResponseProps extends MessageResponseProps {
-  /** Promotes one standalone workspace HTML link into host-hydrated shared UI. */
-  renderWorkspaceHtmlArtifact?: WorkspaceHtmlArtifactRenderer;
-}
-/** Adds workspace-aware Markdown links when rendered inside a workspace provider. */
-declare const WorkspaceMessageResponse: React.MemoExoticComponent<({
-  components,
-  rehypePlugins,
-  renderWorkspaceHtmlArtifact,
-  ...props
-}: WorkspaceMessageResponseProps) => React.JSX.Element>;
-//#endregion
-export { WorkspaceMessageResponseProps as i, WorkspaceHtmlArtifactRenderer as n, WorkspaceMessageResponse as r, WorkspaceHtmlArtifactRenderInput as t };