@mcp-b/react-components 0.2.2 → 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/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.2",
-  "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.2"
+    "@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
     }