@mcp-b/react-components 0.36.0 → 0.38.0

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

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { $ as TerminalIcon, rt as XIcon } from "../../icons-B1Qw05te.js";
+import { $ as TerminalIcon, rt as XIcon } from "../../icons-B4mGvCvc.js";
 import { IconButton } from "../foundations/IconButton.js";
+import { t as CopyButton } from "../../copy-button-4YvddK4e.js";
 import { Badge } from "../foundations/Badge.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
-import { t as CopyButton } from "../../copy-button-CsNSSKYG.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Anser from "anser";

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { J as SpinnerIcon, d as CheckIcon, m as ChevronRightIcon, rt as XIcon } from "../../icons-B1Qw05te.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 { 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-B1Qw05te.js";
+import { F as MonitorIcon, I as MoonIcon, Z as SunIcon } from "../../icons-B4mGvCvc.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 { 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";

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-B1Qw05te.js";
+import { k as LinkIcon } from "../../icons-B4mGvCvc.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 { 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-Bk4nn7l-.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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-B1Qw05te.js";
+import { r as ArrowLeftIcon } from "../../icons-B4mGvCvc.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-ByR-QT_D.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-CsNSSKYG.js → copy-button-4YvddK4e.js}

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

package/dist/styles/artifact.css

@@ -61,8 +61,73 @@
   overflow-wrap: anywhere;
 }
 
+.artifact-preview {
+  container-type: inline-size;
+  min-inline-size: 0;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  background: var(--sigvelo-color-surface);
+  box-shadow: none;
+}
+
+.artifact-preview__header {
+  min-inline-size: 0;
+  justify-content: flex-end;
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.artifact-preview__frame-shell {
+  position: relative;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+.artifact-preview__runtime {
+  min-inline-size: 0;
+}
+
+.artifact-preview__runtime > iframe {
+  display: block;
+  inline-size: 100%;
+  min-block-size: 12rem;
+  border: 0;
+  background: transparent;
+}
+
+.artifact-preview__status {
+  display: flex;
+  min-block-size: 12rem;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-spacing-4);
+  color: var(--sigvelo-color-text-muted);
+  text-align: center;
+}
+
+.artifact-preview__status--overlay {
+  position: absolute;
+  inset: 0;
+  color: var(--sigvelo-color-text);
+  background: color-mix(in srgb, var(--sigvelo-color-surface) 92%, transparent);
+}
+
+@media (any-pointer: coarse) {
+  .artifact-preview .button {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
 @media (forced-colors: active) {
   .artifact {
     border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
+
+  .artifact-preview__header {
+    border-color: CanvasText;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.36.0",
+  "version": "0.38.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.36.0"
+    "@mcp-b/design-tokens": "0.38.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.230",
@@ -81,7 +81,7 @@
     "agents": "^0.19.0",
     "ai": "^6.0.228",
     "cloudflare": "^7.0.0",
-    "playwright": "^1.61.0",
+    "playwright": "~1.61.0",
     "react": "19.3.0-canary-711c445b-20260722",
     "react-dom": "19.3.0-canary-711c445b-20260722",
     "storybook": "^10.5.2",

package/dist/{icons-B1Qw05te.js → icons-B4mGvCvc.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 }) {