@mcp-b/react-components 0.2.1 → 0.3.0

package/dist/components/icons.d.ts

@@ -1,2 +1,2 @@
-import { A as SpinnerIcon, C as MinusIcon, D as PlusIcon, E as PlayIcon, F as XIcon, M as TerminalIcon, N as WarningIcon, O as RefreshIcon, P as WrenchIcon, S as MaximizeIcon, T as PauseIcon, _ as FolderOpenIcon, a as BrainIcon, b as InfoIcon, c as ChevronLeftIcon, d as DotIcon, f as DownloadIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SquareIcon, k as SearchIcon, l as ChevronRightIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as CheckIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronDownIcon, t as ArrowDownIcon, u as CopyIcon, v as IconProps, w as MonitorIcon, x as LinkIcon, y as ImageIcon } from "../icons-BklFyZbx.js";
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BrainIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PauseIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
+import { A as SearchIcon, C as MinusIcon, D as PlayIcon, E as PencilIcon, F as WrenchIcon, I as XIcon, M as SquareIcon, N as TerminalIcon, O as PlusIcon, P as WarningIcon, S as MaximizeIcon, T as PauseIcon, _ as FolderOpenIcon, a as BrainIcon, b as InfoIcon, c as ChevronLeftIcon, d as DotIcon, f as DownloadIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SpinnerIcon, k as RefreshIcon, l as ChevronRightIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as CheckIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronDownIcon, t as ArrowDownIcon, u as CopyIcon, v as IconProps, w as MonitorIcon, x as LinkIcon, y as ImageIcon } from "../icons-ctdVxng0.js";
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BrainIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/components/icons.js

@@ -1,2 +1,2 @@
-import { A as SquareIcon, C as MonitorIcon, D as RefreshIcon, E as PlusIcon, M as WarningIcon, N as WrenchIcon, O as SearchIcon, P as XIcon, S as MinusIcon, T as PlayIcon, _ as FolderOpenIcon, a as BrainIcon, b as LinkIcon, c as ChevronLeftIcon, d as DotIcon, f as DownloadIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as TerminalIcon, k as SpinnerIcon, l as ChevronRightIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as CheckIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronDownIcon, t as ArrowDownIcon, u as CopyIcon, v as ImageIcon, w as PauseIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-Bf7JMKk-.js";
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BrainIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PauseIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
+import { A as SpinnerIcon, C as MonitorIcon, D as PlusIcon, E as PlayIcon, F as XIcon, M as TerminalIcon, N as WarningIcon, O as RefreshIcon, P as WrenchIcon, S as MinusIcon, T as PencilIcon, _ as FolderOpenIcon, a as BrainIcon, b as LinkIcon, c as ChevronLeftIcon, d as DotIcon, f as DownloadIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SquareIcon, k as SearchIcon, l as ChevronRightIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as CheckIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronDownIcon, t as ArrowDownIcon, u as CopyIcon, v as ImageIcon, w as PauseIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-DQC4Zw5R.js";
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BrainIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/{copy-button-DAPlB8Z0.js → copy-button-Dd6DEhOm.js}

@@ -1,4 +1,4 @@
-import { o as CheckIcon, u as CopyIcon } from "./icons-Bf7JMKk-.js";
+import { o as CheckIcon, u as CopyIcon } from "./icons-DQC4Zw5R.js";
 import { Button } from "./components/Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./components/Tooltip.js";
 import * as React from "react";

package/dist/{icons-Bf7JMKk-.js → icons-DQC4Zw5R.js}

@@ -51,6 +51,10 @@ const XIcon = (props) => /* @__PURE__ */ jsx(Icon, {
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M4 4L12 12M12 4L4 12" })
 });
+const PencilIcon = (props) => /* @__PURE__ */ jsx(Icon, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M11.1 2.6a1.4 1.4 0 0 1 2 2L5.5 12.2l-2.8.8.8-2.8z" })
+});
 const CopyIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
 	...props,
 	children: [/* @__PURE__ */ jsx("rect", {
@@ -258,4 +262,4 @@ const MaximizeIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
 	]
 });
 //#endregion
-export { SquareIcon as A, MonitorIcon as C, RefreshIcon as D, PlusIcon as E, WarningIcon as M, WrenchIcon as N, SearchIcon as O, XIcon as P, MinusIcon as S, PlayIcon as T, FolderOpenIcon as _, BrainIcon as a, LinkIcon as b, ChevronLeftIcon as c, DotIcon as d, DownloadIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, TerminalIcon as j, SpinnerIcon as k, ChevronRightIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, CheckIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronDownIcon as s, ArrowDownIcon as t, CopyIcon as u, ImageIcon as v, PauseIcon as w, MaximizeIcon as x, InfoIcon as y };
+export { SpinnerIcon as A, MonitorIcon as C, PlusIcon as D, PlayIcon as E, XIcon as F, TerminalIcon as M, WarningIcon as N, RefreshIcon as O, WrenchIcon as P, MinusIcon as S, PencilIcon as T, FolderOpenIcon as _, BrainIcon as a, LinkIcon as b, ChevronLeftIcon as c, DotIcon as d, DownloadIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SquareIcon as j, SearchIcon as k, ChevronRightIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, CheckIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronDownIcon as s, ArrowDownIcon as t, CopyIcon as u, ImageIcon as v, PauseIcon as w, MaximizeIcon as x, InfoIcon as y };

package/dist/{icons-BklFyZbx.d.ts → icons-ctdVxng0.d.ts}

@@ -16,6 +16,7 @@ declare const ChevronLeftIcon: (props: IconProps) => React.JSX.Element;
 declare const BrainIcon: (props: IconProps) => React.JSX.Element;
 declare const CheckIcon: (props: IconProps) => React.JSX.Element;
 declare const XIcon: (props: IconProps) => React.JSX.Element;
+declare const PencilIcon: (props: IconProps) => React.JSX.Element;
 declare const CopyIcon: (props: IconProps) => React.JSX.Element;
 declare const EyeIcon: (props: IconProps) => React.JSX.Element;
 declare const EyeOffIcon: (props: IconProps) => React.JSX.Element;
@@ -45,4 +46,4 @@ declare const ImageIcon: (props: IconProps) => React.JSX.Element;
 declare const MonitorIcon: (props: IconProps) => React.JSX.Element;
 declare const MaximizeIcon: (props: IconProps) => React.JSX.Element;
 //#endregion
-export { SpinnerIcon as A, MinusIcon as C, PlusIcon as D, PlayIcon as E, XIcon as F, TerminalIcon as M, WarningIcon as N, RefreshIcon as O, WrenchIcon as P, MaximizeIcon as S, PauseIcon as T, FolderOpenIcon as _, BrainIcon as a, InfoIcon as b, ChevronLeftIcon as c, DotIcon as d, DownloadIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SquareIcon as j, SearchIcon as k, ChevronRightIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, CheckIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronDownIcon as s, ArrowDownIcon as t, CopyIcon as u, IconProps as v, MonitorIcon as w, LinkIcon as x, ImageIcon as y };
+export { SearchIcon as A, MinusIcon as C, PlayIcon as D, PencilIcon as E, WrenchIcon as F, XIcon as I, SquareIcon as M, TerminalIcon as N, PlusIcon as O, WarningIcon as P, MaximizeIcon as S, PauseIcon as T, FolderOpenIcon as _, BrainIcon as a, InfoIcon as b, ChevronLeftIcon as c, DotIcon as d, DownloadIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SpinnerIcon as j, RefreshIcon as k, ChevronRightIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, CheckIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronDownIcon as s, ArrowDownIcon as t, CopyIcon as u, IconProps as v, MonitorIcon as w, LinkIcon as x, ImageIcon as y };

package/dist/styles/activity.css

@@ -5,8 +5,10 @@
   flex-direction: column;
   width: 100%;
   /* Hard cap, Codex-style, on the WHOLE unit — collapsed line and expanded
-     log alike — so toggling never reflows the conversation width. */
-  max-width: min(100%, 36rem);
+     log alike — so toggling never reflows the conversation width. Plain rem,
+     not min(100%, …): percentages are ignored in intrinsic-size contributions,
+     so the min() let wide nowrap rows inflate content-sized ancestors. */
+  max-width: 36rem;
   /* Whitespace separates the work log from message prose around it */
   margin-block: 0.5rem;
   font-family: var(--sigvelo-font-sans);
@@ -121,9 +123,8 @@
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
-  /* Bounded so expanding never blows out the conversation scroll position */
-  max-height: 20rem;
-  overflow-y: auto;
+  /* Unbounded on purpose: the expanded log flows in the conversation scroll;
+     only subsection panels (group text, shell output, code) are height-capped. */
   padding-block: 0.125rem 0.5rem;
   padding-inline: 0.5rem;
 }

package/dist/styles/conversation.css

@@ -13,6 +13,9 @@
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
+  /* Zero intrinsic inline size: wide message content (nowrap activity rows,
+     code) must never resize the chat column — overflow clips it instead. */
+  contain: inline-size;
 }
 
 .conversation__content {

package/dist/styles/prompt-input.css

@@ -177,6 +177,155 @@
   flex-direction: column;
 }
 
+/* Approval state: the composer becomes the confirmation */
+.prompt-input__approval {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.prompt-input__approval-question {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  line-height: 1.4;
+}
+
+.prompt-input__approval-question code {
+  font-family: var(--sigvelo-font-mono);
+  font-size: 0.8125em;
+}
+
+.prompt-input__approval-count {
+  margin-inline-start: auto;
+  flex-shrink: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.75rem;
+}
+
+.prompt-input__approval-preview {
+  max-height: 6rem;
+  padding-block: 0.375rem;
+  padding-inline: 0.625rem;
+  overflow: auto;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+  color: var(--sigvelo-color-text-muted);
+  font-family: var(--sigvelo-font-mono);
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
+.prompt-input__approval-preview-key {
+  color: var(--sigvelo-color-text);
+}
+
+.prompt-input__approval-preview-key::after {
+  content: ":";
+}
+
+.prompt-input__approval-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.prompt-input__approval-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding-block: 0.3125rem;
+  padding-inline: 0.5rem;
+  border: none;
+  border-radius: var(--sigvelo-radius-md);
+  background: transparent;
+  color: var(--sigvelo-color-text);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.prompt-input__approval-option[data-selected] {
+  background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 92%);
+}
+
+.prompt-input__approval-option:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.prompt-input__approval-key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-full);
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.6875rem;
+}
+
+.prompt-input__approval-option[data-selected] .prompt-input__approval-key {
+  border-color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-text);
+  color: var(--sigvelo-color-surface);
+}
+
+.prompt-input__approval-arrows {
+  margin-inline-start: auto;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.75rem;
+  visibility: hidden;
+}
+
+.prompt-input__approval-option[data-selected] .prompt-input__approval-arrows {
+  visibility: visible;
+}
+
+.prompt-input__approval-deny {
+  cursor: text;
+}
+
+.prompt-input__approval-reason {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--sigvelo-color-text);
+  font: inherit;
+}
+
+.prompt-input__approval-reason::placeholder {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.prompt-input__approval-reason:focus {
+  outline: none;
+}
+
+.prompt-input__approval-skip {
+  flex-shrink: 0;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.prompt-input__approval-submit {
+  flex-shrink: 0;
+  gap: 0.375rem;
+}
+
+.prompt-input__approval-kbd {
+  font-family: inherit;
+  font-size: 0.75em;
+  opacity: 0.75;
+}
+
 @keyframes prompt-input-spin {
   from {
     transform: rotate(0deg);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.2.1",
-  "description": "MCP-B React components built on Base UI and shared design tokens.",
+  "version": "0.3.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": {
     "url": "https://github.com/WebMCP-org/design-system/issues"
@@ -40,6 +40,8 @@
   },
   "dependencies": {
     "@base-ui/react": "~1.6.0",
+    "@cloudflare/codemode": "^0.4.2",
+    "@rrweb/replay": "^2.1.0",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
     "@streamdown/math": "^1.0.2",
@@ -47,9 +49,13 @@
     "anser": "^2.3.5",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.2.1"
+    "@mcp-b/design-tokens": "0.3.0"
   },
   "devDependencies": {
+    "@ai-sdk/react": "^3.0.194",
+    "@cloudflare/shell": "^0.4.1",
+    "@cloudflare/think": "^0.12.1",
+    "@cloudflare/workers-types": "^4.20260630.1",
     "@storybook/addon-a11y": "^10.4.6",
     "@storybook/addon-docs": "^10.4.6",
     "@storybook/addon-mcp": "^0.6.0",
@@ -62,6 +68,7 @@
     "@vitest/browser-playwright": "^4.1.9",
     "@vitest/coverage-v8": "^4.1.9",
     "@vitest/mocker": "^4.1.9",
+    "agents": "^0.17.3",
     "ai": "^6.0.182",
     "playwright": "^1.61.0",
     "react": "^19.2.7",
@@ -73,11 +80,27 @@
     "vitest": "^4.1.9"
   },
   "peerDependencies": {
+    "@ai-sdk/react": "^3.0.194",
+    "@cloudflare/shell": "^0.4.1",
+    "@cloudflare/think": "^0.12.1",
+    "agents": "^0.17.3",
     "ai": "^6.0.182",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "peerDependenciesMeta": {
+    "@ai-sdk/react": {
+      "optional": true
+    },
+    "@cloudflare/shell": {
+      "optional": true
+    },
+    "@cloudflare/think": {
+      "optional": true
+    },
+    "agents": {
+      "optional": true
+    },
     "ai": {
       "optional": true
     }