@mcp-b/react-components 0.31.7 → 0.33.0

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

@@ -1,4 +1,4 @@
-import { F as MonitorIcon, I as MoonIcon, Z as SunIcon } from "../../icons-B4mGvCvc.js";
+import { F as MonitorIcon, I as MoonIcon, Z as SunIcon } from "../../icons-B1Qw05te.js";
 import { Radio, RadioGroup } from "../foundations/RadioGroup.js";
 import { useTheme } from "../foundations/ThemeProvider.js";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,10 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { W as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { W as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-B4mGvCvc.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { Badge } from "../foundations/Badge.js";
-import { ScrollArea } from "../foundations/ScrollArea.js";
 import { Input } from "../foundations/Input.js";
+import { ScrollArea } from "../foundations/ScrollArea.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 { k as LinkIcon } from "../../icons-B4mGvCvc.js";
+import { k as LinkIcon } from "../../icons-B1Qw05te.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-B5I7wje1.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-CM5gfmdq.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/nanites/AgentConnection.tsx

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

@@ -45,6 +45,19 @@ interface SelectedAgentToolChildProps<ParentAgentT extends ThinkAgent<ParentStat
   /** App-authored TanStack Router Link to the parent conversation. */
   backLink?: React.ReactElement;
 }
+/**
+ * Child connection options for a selected retained run: the parent's
+ * root-first base (or the app-supplied options) with the run's sub-agent step
+ * appended to the sub path.
+ */
+declare function selectedAgentToolChildOptions<ChildState = unknown>(parentAgent: {
+  agent: string;
+  name: string;
+  path: ReadonlyArray<{
+    agent: string;
+    name: string;
+  }>;
+}, run: Pick<AgentToolRunState, "subAgent">, connectionOptions?: UseAgentOptions<ChildState>): UseAgentOptions<ChildState>;
 /** Lazily connects one selected retained child and renders its real Think chat. */
 declare function SelectedAgentToolChild<ParentAgentT extends ThinkAgent<ParentState>, ParentState = unknown, ChildState = unknown, MessageT extends UIMessage = UIMessage>({
   backLink,
@@ -54,4 +67,4 @@ declare function SelectedAgentToolChild<ParentAgentT extends ThinkAgent<ParentSt
   run
 }: SelectedAgentToolChildProps<ParentAgentT, ParentState, ChildState, MessageT>): React.JSX.Element;
 //#endregion
-export { AgentToolDetail, AgentToolDetailProps, SelectedAgentToolChild, SelectedAgentToolChildProps };
+export { AgentToolDetail, AgentToolDetailProps, SelectedAgentToolChild, SelectedAgentToolChildProps, selectedAgentToolChildOptions };

package/dist/components/nanites/AgentToolDetail.js

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../../icons-B4mGvCvc.js";
+import { r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
 import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
 import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
-import { t as ThinkChat } from "../../ThinkChat-BUoXVfrn.js";
+import { t as ThinkChat } from "../../ThinkChat-en0UbkVv.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
 import * as React from "react";
@@ -80,21 +80,29 @@ function AgentToolDetail({ backLink, chat, className, messages, ref, run, ...pro
 		]
 	});
 }
+/**
+* Child connection options for a selected retained run: the parent's
+* root-first base (or the app-supplied options) with the run's sub-agent step
+* appended to the sub path.
+*/
+function selectedAgentToolChildOptions(parentAgent, run, connectionOptions) {
+	const [root, ...parentSubPath] = parentAgent.path;
+	return {
+		...connectionOptions ?? {
+			agent: root?.agent ?? parentAgent.agent,
+			name: root?.name ?? parentAgent.name
+		},
+		sub: [...connectionOptions?.sub ?? parentSubPath, run.subAgent]
+	};
+}
 /** Lazily connects one selected retained child and renders its real Think chat. */
 function SelectedAgentToolChild({ backLink, connectionOptions, messages, parentAgent, run }) {
-	const [root, ...parentSubPath] = parentAgent.path;
 	return /* @__PURE__ */ jsx(AgentToolDetail, {
 		run,
-		chat: useAgentChat({ agent: useAgent({
-			...connectionOptions ?? {
-				agent: root?.agent ?? parentAgent.agent,
-				name: root?.name ?? parentAgent.name
-			},
-			sub: [...connectionOptions?.sub ?? parentSubPath, run.subAgent]
-		}) }),
+		chat: useAgentChat({ agent: useAgent(selectedAgentToolChildOptions(parentAgent, run, connectionOptions)) }),
 		messages,
 		backLink
 	}, run.runId);
 }
 //#endregion
-export { AgentToolDetail, SelectedAgentToolChild };
+export { AgentToolDetail, SelectedAgentToolChild, selectedAgentToolChildOptions };

package/dist/{copy-button-4YvddK4e.js → copy-button-CsNSSKYG.js}

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

package/dist/styles/activity.css

@@ -58,6 +58,8 @@
 
 .activity__trigger-icon {
   display: inline-flex;
+  flex: none;
+  margin-inline-start: auto;
   color: var(--sigvelo-color-text-muted);
   transition: rotate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter);
 }

package/dist/styles/message.css

@@ -122,8 +122,34 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.message[data-from="user"] .message__actions {
-  align-self: flex-end;
+.message__actions--reserved {
+  min-block-size: var(--sigvelo-control-height-sm);
+}
+
+.message[data-from="user"]:has(> .message__actions--inline) {
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+.message[data-from="user"] > .message__actions--inline {
+  align-self: center;
+}
+
+.message[data-from="user"] > .message__actions--inline[data-unavailable] {
+  visibility: hidden;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .message[data-from="user"] > .message__actions--inline {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .message[data-from="user"]:hover > .message__actions--inline,
+  .message[data-from="user"]:focus-within > .message__actions--inline {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
 .message__action {
@@ -135,6 +161,10 @@
 }
 
 @media (any-pointer: coarse) {
+  .message__actions--reserved {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+
   .message__action {
     --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
   }

package/dist/styles/reasoning.css

@@ -1,3 +1,9 @@
+.reasoning__status-icon {
+  display: inline-flex;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
+}
+
 .reasoning__text {
   padding-inline-start: var(--sigvelo-spacing-3);
   border-inline-start: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.31.7",
+  "version": "0.33.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": {
@@ -58,7 +58,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.31.7"
+    "@mcp-b/design-tokens": "0.33.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.230",

package/dist/AgentToolRunsContext-Cgve-Upx.d.ts

@@ -1,21 +0,0 @@
-import * as React from "react";
-import { UIMessage } from "ai";
-import { useAgentToolEvents } from "agents/react";
-import { AgentToolRunPart } from "agents/agent-tools";
-
-//#region src/components/agents-sdk/AgentToolRunsContext.d.ts
-/** The complete upstream retained-run hook result for one parent connection. */
-type AgentToolEventsValue<Part extends AgentToolRunPart = UIMessage["parts"][number]> = ReturnType<typeof useAgentToolEvents<Part>>;
-interface AgentToolRunsProviderProps<Part extends AgentToolRunPart = UIMessage["parts"][number]> {
-  /** Pass the whole `useAgentToolEvents({ agent })` result directly. */
-  agentTools: AgentToolEventsValue<Part>;
-  children: React.ReactNode;
-}
-/** Provides one parent connection's retained Agent Tool event projection. */
-declare function AgentToolRunsProvider<Part extends AgentToolRunPart = UIMessage["parts"][number]>({
-  agentTools,
-  children
-}: AgentToolRunsProviderProps<Part>): React.JSX.Element;
-declare function useOptionalAgentToolRuns<Part extends AgentToolRunPart = UIMessage["parts"][number]>(): AgentToolEventsValue<Part> | null;
-//#endregion
-export { useOptionalAgentToolRuns as i, AgentToolRunsProvider as n, AgentToolRunsProviderProps as r, AgentToolEventsValue as t };

package/dist/{icons-B4mGvCvc.js → icons-B1Qw05te.js}

@@ -1,8 +1,8 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
-import { jsx } from "react/jsx-runtime";
 import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bookmark, Box, Brain, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, CircleStop, CodeXml, Copy, CornerDownRight, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Hash, Image, Info, Link2, ListRestart, LoaderCircle, 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 { FaSlack } from "react-icons/fa6";
 import { SiDiscord, SiModelcontextprotocol } from "react-icons/si";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/_internal/icons.tsx
 function icon(Component) {
 	return function DesignSystemIcon({ size = 16, strokeWidth = 1.75, ...props }) {