@mcp-b/react-components 0.39.0 → 0.40.0

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

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Separator } from "../foundations/Separator.js";
 import { Card } from "../foundations/Card.js";
-import { Slider } from "../foundations/Slider.js";
 import { Progress } from "../foundations/Progress.js";
+import { Slider } from "../foundations/Slider.js";
 import { formatPricingUsage, getUsagePrice } from "./Pricing.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { K as SidebarIcon } from "../../icons-B4mGvCvc.js";
+import { q as SidebarIcon } from "../../icons-MmIXciMO.js";
 import { Button } from "../foundations/Button.js";
 import { t as capitalize } from "../../format-DB2mX9DA.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";

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

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { H as PlusIcon, d as CheckIcon, f as ChevronDownIcon, tt as WarningIcon } from "../../icons-B4mGvCvc.js";
+import { U as PlusIcon, d as CheckIcon, f as ChevronDownIcon, nt as WarningIcon } from "../../icons-MmIXciMO.js";
 import { Button } from "../foundations/Button.js";
 import { Menu } from "../foundations/Menu.js";
 import * as React from "react";

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

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { $ as TerminalIcon, rt as XIcon } from "../../icons-B4mGvCvc.js";
+import { et as TerminalIcon, it as XIcon } from "../../icons-MmIXciMO.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { t as CopyButton } from "../../copy-button-4YvddK4e.js";
+import { t as CopyButton } from "../../copy-button-Bc7jsYv_.js";
 import { Badge } from "../foundations/Badge.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
 import * as React from "react";

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { J as SpinnerIcon, d as CheckIcon, m as ChevronRightIcon, rt as XIcon } from "../../icons-B4mGvCvc.js";
+import { Y as SpinnerIcon, d as CheckIcon, it as XIcon, m as ChevronRightIcon } from "../../icons-MmIXciMO.js";
 import { Badge } from "../foundations/Badge.js";
 import { Progress } from "../foundations/Progress.js";
 import * as React from "react";

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 { I as MonitorIcon, L as MoonIcon, Q as SunIcon } from "../../icons-MmIXciMO.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,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.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 { G as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-MmIXciMO.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { Badge } from "../foundations/Badge.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";

package/dist/components/nanites/AgentConnection.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { k as LinkIcon } from "../../icons-B4mGvCvc.js";
+import { A as LinkIcon } from "../../icons-MmIXciMO.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-DO4Hdu1R.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-CWk1FVtm.js";
 import { Popover } from "../foundations/Popover.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import * as React from "react";

package/dist/components/nanites/AgentToolDetail.js

@@ -1,11 +1,11 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../../icons-B4mGvCvc.js";
+import { r as ArrowLeftIcon } from "../../icons-MmIXciMO.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
-import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
-import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
-import { t as ThinkChat } from "../../ThinkChat-BES_3Mb-.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
+import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
+import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
+import { t as ThinkChat } from "../../ThinkChat-DkA4Wr71.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentChat } from "@cloudflare/think/react";

package/dist/{copy-button-4YvddK4e.js → copy-button-Bc7jsYv_.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-MmIXciMO.js";
 import { IconButton } from "./components/foundations/IconButton.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/{icons-BGZ916hb.d.ts → icons-DwgNir1Q.d.ts}

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

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

@@ -1,6 +1,6 @@
 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 { 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, Keyboard, 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";
 //#region src/components/_internal/icons.tsx
@@ -72,6 +72,7 @@ const SearchIcon = icon(Search);
 const SidebarIcon = icon(PanelLeft);
 const TerminalIcon = icon(Terminal);
 const LinkIcon = icon(Link2);
+const KeyboardIcon = icon(Keyboard);
 const QueueIcon = icon(ListRestart);
 const TrashIcon = icon(Trash2);
 const WarningIcon = icon(TriangleAlert);
@@ -92,4 +93,4 @@ const SunIcon = icon(Sun);
 const TargetIcon = icon(Target);
 const MaximizeIcon = icon(Maximize2);
 //#endregion
-export { TerminalIcon as $, MaximizeIcon as A, PencilIcon as B, FileIcon as C, ImageIcon as D, HashIcon as E, MonitorIcon as F, SearchIcon as G, PlusIcon as H, MoonIcon as I, SpinnerIcon as J, SidebarIcon as K, MoveToFrontIcon as L, MessageSquareIcon as M, MicrophoneIcon as N, InfoIcon as O, MinusIcon 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, CheckIcon as d, TrashIcon as et, ChevronDownIcon as f, CopyIcon as g, CodeIcon as h, ArrowRightIcon as i, McpIcon as j, LinkIcon as k, BrainIcon as l, ChevronRightIcon as m, ArrowDownIcon as n, WrenchIcon as nt, ArrowUpRightIcon as o, ChevronLeftIcon as p, SlackIcon as q, ArrowLeftIcon as r, XIcon as rt, BookmarkIcon as s, ArchiveIcon as t, WarningIcon as tt, CalendarIcon as u, DotIcon as v, FolderIcon as w, EyeIcon as x, DownloadIcon as y, PauseIcon as z };
+export { TargetIcon as $, LinkIcon as A, PauseIcon as B, FileIcon as C, ImageIcon as D, HashIcon as E, MinusIcon as F, RefreshIcon as G, PlayIcon as H, MonitorIcon as I, SlackIcon as J, SearchIcon as K, MoonIcon as L, McpIcon as M, MessageSquareIcon as N, InfoIcon as O, MicrophoneIcon as P, SunIcon as Q, MoveToFrontIcon as R, EyeOffIcon as S, FolderOpenIcon as T, PlusIcon as U, PencilIcon as V, QueueIcon as W, SquareIcon as X, SpinnerIcon as Y, StopIcon as Z, DiscordIcon as _, ArrowUpIcon as a, EllipsisIcon as b, BoxIcon as c, CheckIcon as d, TerminalIcon as et, ChevronDownIcon as f, CopyIcon as g, CodeIcon as h, ArrowRightIcon as i, XIcon as it, MaximizeIcon as j, KeyboardIcon as k, BrainIcon as l, ChevronRightIcon as m, ArrowDownIcon as n, WarningIcon as nt, ArrowUpRightIcon as o, ChevronLeftIcon as p, SidebarIcon as q, ArrowLeftIcon as r, WrenchIcon as rt, BookmarkIcon as s, ArchiveIcon as t, TrashIcon as tt, CalendarIcon as u, DotIcon as v, FolderIcon as w, EyeIcon as x, DownloadIcon as y, PaperclipIcon as z };

package/dist/styles/browser-run-panel.css

@@ -77,7 +77,9 @@
   padding: var(--sigvelo-spacing-2-5);
 }
 
-.browser-run-panel__live-view {
+/* Whichever live surface the body holds — the panel's own embedded view or a
+ * host-fed stream — fills the frame the same way. */
+.browser-run-panel__body > .browser-live-view {
   flex: 1;
   min-block-size: 16rem;
   aspect-ratio: auto;

package/dist/styles/chatgpt-sign-in-screen.css

@@ -70,6 +70,12 @@
   margin-block-start: var(--sigvelo-spacing-4);
 }
 
+.chatgpt-sign-in__error {
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-sm);
+}
+
 .chatgpt-sign-in__brand {
   display: grid;
   gap: var(--sigvelo-spacing-1-5);

package/dist/styles/think-full-app.css

@@ -299,6 +299,14 @@ body.is-resizing-side-panel .think-full-app__view-scope {
       max(var(--sigvelo-spacing-3), env(safe-area-inset-right, 0px));
   }
 
+  /* The gutter above belongs to the composer pinned under a transcript. On the
+     start screen the composer is in flow and the utility tray docks against
+     the card's bottom edge, so any bottom padding here reads as the tray
+     floating detached. */
+  .think-full-app .agent-chat-start-screen__composer > .agent-chat__composer {
+    padding: 0;
+  }
+
   .think-full-app .prompt-input {
     gap: var(--sigvelo-spacing-1);
     padding-block: var(--sigvelo-spacing-2);

package/package.json

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

package/dist/{ThinkChat-BES_3Mb-.js → ThinkChat-DkA4Wr71.js}

@@ -1,6 +1,6 @@
 import { TransitionSurface } from "./components/foundations/TransitionSurface.js";
-import { AgentChat, compactingNotice } from "./components/agents-sdk/AgentChat.js";
 import { AgentToolRunsProvider, useOptionalAgentToolRuns, useSourceScopedAgentToolEvents } from "./components/agents-sdk/AgentToolRunsContext.js";
+import { AgentChat, compactingNotice } from "./components/agents-sdk/AgentChat.js";
 import { SubagentRunList } from "./components/agents-sdk/SubagentRunList.js";
 import { ThinkChatContext, ThinkChatLiveContext, useOptionalThinkChatContext, useThinkChatContext } from "./components/agents-sdk/ThinkChatContext.js";
 import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./components/agents-sdk/ThinkChatActivity.js";