@mcp-b/react-components 0.4.0 → 0.5.0

package/dist/components/ThinkChat.d.ts

@@ -35,8 +35,6 @@ interface ThinkChatMessagesProps extends ThinkChatActivityRendererOptions {
   placeholder?: string;
   /** Rendered after each message (e.g. per-message actions). */
   renderMessageAfter?: AgentChatProps["renderMessageAfter"];
-  /** Prompt suggestions shown above the composer; clicking one sends it. */
-  suggestions?: AgentChatProps["suggestions"];
   /**
    * Overrides the built-in connection notice (derived from the hook's
    * `isRecovering`/`connectionError`) shown between transcript and composer.
@@ -71,9 +69,9 @@ type ThinkChatToolRenderers = Record<string, ThinkChatToolRenderer>;
 interface ThinkChatActivityRendererOptions {
   /**
    * Tool names to keep out of activity folding entirely — the run splits
-   * around them and they fall through to your own renderPart / the generic
-   * Tool card. For tools that should stay in the log with custom UI, use
-   * `toolRenderers` instead.
+   * around them and they fall through to your own renderPart / AgentChat's
+   * generic standalone activity row. For tools that should stay in the log
+   * with custom UI, use `toolRenderers` instead.
    */
   excludeTools?: readonly string[];
   /** Per-tool label/panel overrides inside the activity log, keyed by tool name. */
@@ -157,7 +155,7 @@ declare function ThinkChatActivity({
  * parts (reasoning + tool calls) into one collapsed Activity box. Everything
  * is derived from the UIMessage stream: part order, tool states, reasoning
  * state. Excluded tools split the run and return undefined so your own
- * renderPart (or the generic Tool card) takes over for them.
+ * renderPart (or AgentChat's generic activity row) takes over for them.
  */
 declare function createThinkChatActivityRenderer({
   excludeTools,

package/dist/components/ThinkChat.js

@@ -1,7 +1,7 @@
 import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityOutput, ActivityPanel, ActivityText, ActivityTrigger } from "./Activity.js";
 import { Tab, TabPanel, Tabs, TabsList } from "./Tabs.js";
-import { t as CodeBlock } from "../CodeBlock-C2Xjxu9M.js";
 import { AgentChat } from "./AgentChat.js";
+import { t as CodeBlock } from "../CodeBlock-D-a84xBL.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
 import { BrowserReplay } from "./BrowserReplay.js";
 import { WorkspaceExplorer, inferWorkspaceLanguage, useWorkspace } from "./WorkspaceExplorer.js";
@@ -720,7 +720,7 @@ function ThinkChatActivityGroup({ message, parts, isTrailing, toolRenderers }) {
 * parts (reasoning + tool calls) into one collapsed Activity box. Everything
 * is derived from the UIMessage stream: part order, tool states, reasoning
 * state. Excluded tools split the run and return undefined so your own
-* renderPart (or the generic Tool card) takes over for them.
+* renderPart (or AgentChat's generic activity row) takes over for them.
 */
 function createThinkChatActivityRenderer({ excludeTools, toolRenderers } = {}) {
 	const excluded = excludeTools?.length ? new Set(excludeTools) : void 0;

package/dist/components/WebPreview.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as RefreshIcon, n as ArrowLeftIcon, r as ArrowRightIcon, s as ChevronDownIcon } from "../icons-DQC4Zw5R.js";
+import { D as RefreshIcon, n as ArrowLeftIcon, o as ChevronDownIcon, r as ArrowRightIcon } from "../icons-CZRH4FVH.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Badge } from "./Badge.js";

package/dist/components/WorkspaceExplorer.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as RefreshIcon, h as FileIcon, k as SearchIcon, n as ArrowLeftIcon } from "../icons-DQC4Zw5R.js";
+import { D as RefreshIcon, O as SearchIcon, m as FileIcon, n as ArrowLeftIcon } from "../icons-CZRH4FVH.js";
 import { Button } from "./Button.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-C2Xjxu9M.js";
-import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-D0c9Yj9U.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-D-a84xBL.js";
+import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-D8rtTLgK.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/WorkspaceExplorer.tsx

package/dist/components/icons.d.ts

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

@@ -1,4 +1,4 @@
-import { o as CheckIcon, u as CopyIcon } from "./icons-DQC4Zw5R.js";
+import { a as CheckIcon, l as CopyIcon } from "./icons-CZRH4FVH.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-DQC4Zw5R.js → icons-CZRH4FVH.js}

@@ -29,20 +29,6 @@ const ChevronLeftIcon = (props) => /* @__PURE__ */ jsx(Icon, {
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M10 3.5L5.5 8L10 12.5" })
 });
-const BrainIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
-	viewBox: "0 0 24 24",
-	...props,
-	children: [
-		/* @__PURE__ */ jsx("path", { d: "M12 18V5" }),
-		/* @__PURE__ */ jsx("path", { d: "M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4" }),
-		/* @__PURE__ */ jsx("path", { d: "M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5" }),
-		/* @__PURE__ */ jsx("path", { d: "M17.997 5.125a4 4 0 0 1 2.526 5.77" }),
-		/* @__PURE__ */ jsx("path", { d: "M18 18a4 4 0 0 0 2-7.464" }),
-		/* @__PURE__ */ jsx("path", { d: "M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517" }),
-		/* @__PURE__ */ jsx("path", { d: "M6 18a4 4 0 0 1-2-7.464" }),
-		/* @__PURE__ */ jsx("path", { d: "M6.003 5.125a4 4 0 0 0-2.526 5.77" })
-	]
-});
 const CheckIcon = (props) => /* @__PURE__ */ jsx(Icon, {
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M3 8.5L6.5 12L13 4.5" })
@@ -262,4 +248,4 @@ const MaximizeIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
 	]
 });
 //#endregion
-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 };
+export { SquareIcon as A, PauseIcon as C, RefreshIcon as D, PlusIcon as E, WarningIcon as M, WrenchIcon as N, SearchIcon as O, XIcon as P, MonitorIcon as S, PlayIcon as T, ImageIcon as _, CheckIcon as a, MaximizeIcon as b, ChevronRightIcon as c, DownloadIcon as d, EyeIcon as f, FolderOpenIcon as g, FolderIcon as h, ArrowUpIcon as i, TerminalIcon as j, SpinnerIcon as k, CopyIcon as l, FileIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeOffIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, InfoIcon as v, PencilIcon as w, MinusIcon as x, LinkIcon as y };

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

@@ -13,7 +13,6 @@ type IconProps = Omit<React.SVGAttributes<SVGSVGElement>, "width" | "height"> &
 declare const ChevronRightIcon: (props: IconProps) => React.JSX.Element;
 declare const ChevronDownIcon: (props: IconProps) => React.JSX.Element;
 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;
@@ -46,4 +45,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 { 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 };
+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, IconProps as _, CheckIcon as a, LinkIcon as b, ChevronRightIcon as c, DownloadIcon as d, EyeIcon as f, FolderOpenIcon as g, FolderIcon as h, ArrowUpIcon as i, SquareIcon as j, SearchIcon as k, CopyIcon as l, FileIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeOffIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, ImageIcon as v, PauseIcon as w, MaximizeIcon as x, InfoIcon as y };

package/dist/styles/agent-chat.css

@@ -1,6 +1,5 @@
 .agent-chat {
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
+  position: relative;
   width: 100%;
   height: 100%;
   min-height: 0;
@@ -10,14 +9,33 @@
 }
 
 .agent-chat__conversation {
+  height: 100%;
   min-height: 0;
 }
 
+/* Room for the last message to scroll clear of the floating composer.
+   --agent-chat-composer-size is set from a ResizeObserver in AgentChat. */
+.agent-chat .conversation__content {
+  padding-block-end: calc(var(--agent-chat-composer-size, 5rem) + 0.5rem);
+}
+
+.agent-chat .conversation__scroll-button {
+  inset-block-end: calc(var(--agent-chat-composer-size, 5rem) + 0.5rem);
+}
+
+/* Floating over the transcript: solid behind the controls, fading out
+   through the top padding so content slides under instead of hitting a bar. */
 .agent-chat__composer {
-  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  padding: 0.75rem;
-  background-color: var(--sigvelo-color-surface);
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  padding: 0.625rem;
+  padding-block-start: 1.5rem;
+  background: linear-gradient(
+    to top,
+    var(--sigvelo-color-surface) calc(100% - 1.5rem),
+    transparent
+  );
 }
 
 /* Transient status pill between transcript and composer (recovery, errors). */
@@ -34,7 +52,3 @@
 .agent-chat__notice [data-tone="danger"] {
   color: var(--sigvelo-color-danger-text);
 }
-
-.agent-chat__suggestions {
-  margin-block-end: 0.5rem;
-}

package/dist/styles/conversation.css

@@ -21,9 +21,9 @@
 .conversation__content {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  padding-block: 1.25rem;
-  padding-inline: 1.25rem;
+  gap: 0.875rem;
+  padding-block: 1rem;
+  padding-inline: 1rem;
   min-height: 100%;
 }
 

package/dist/styles/index.css

@@ -46,7 +46,6 @@
 @import "./separator.css" layer(components);
 @import "./slider.css" layer(components);
 @import "./stepper.css" layer(components);
-@import "./suggestions.css" layer(components);
 @import "./switch.css" layer(components);
 @import "./tabs.css" layer(components);
 @import "./toast.css" layer(components);
@@ -75,7 +74,6 @@
 @import "./task.css" layer(components);
 @import "./terminal.css" layer(components);
 @import "./test-results.css" layer(components);
-@import "./tool.css" layer(components);
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);
 

package/dist/styles/message.css

@@ -20,8 +20,8 @@
 .message__content {
   display: inline-block;
   max-width: min(42rem, 85%);
-  padding-block: 0.625rem;
-  padding-inline: 0.875rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
   border-radius: var(--sigvelo-radius-lg);
   font-size: var(--sigvelo-text-sm);
   line-height: 1.55;

package/dist/styles/prompt-input.css

@@ -1,9 +1,9 @@
 .prompt-input {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  padding-block: 0.875rem;
-  padding-inline: 1rem;
+  gap: 0.375rem;
+  padding-block: 0.625rem;
+  padding-inline: 0.75rem;
   background-color: var(--sigvelo-color-surface);
   /* Fields keep their border; hairline + soft shadow for the floating-composer look */
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -134,7 +134,7 @@
   background-color: transparent;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   line-height: 1.5;
   resize: none;
   overflow-y: hidden;
@@ -172,7 +172,7 @@
   align-items: center;
   gap: 0.25rem;
   flex-wrap: wrap;
-  min-height: 2rem;
+  min-height: 1.75rem;
 }
 
 .prompt-input__button {
@@ -354,7 +354,11 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
+  /* Zero intrinsic inline size: long tool names, paths, and one-line JSON in
+     the confirmation must never widen the composer or the chat column around
+     it — same containment trick as the conversation viewport. */
+  contain: inline-size;
 }
 
 .prompt-input__approval-question {
@@ -364,6 +368,11 @@
   line-height: 1.4;
 }
 
+.prompt-input__approval-question > span:first-child {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .prompt-input__approval-question code {
   font-family: var(--sigvelo-font-mono);
   font-size: 0.8125em;
@@ -381,6 +390,8 @@
   padding-block: 0.375rem;
   padding-inline: 0.625rem;
   overflow: auto;
+  /* Long values wrap and scroll vertically within the cap — never sideways. */
+  overflow-wrap: anywhere;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-md);

package/dist/styles/reasoning.css

@@ -51,7 +51,6 @@
   margin: 0;
 }
 
-.reasoning__trigger-leading-icon,
 .reasoning__trigger-icon {
   display: inline-flex;
   color: var(--sigvelo-color-text-muted);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.4.0",
+  "version": "0.5.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": {
@@ -49,7 +49,7 @@
     "anser": "^2.3.5",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.4.0"
+    "@mcp-b/design-tokens": "0.5.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.194",

package/dist/components/Suggestion.d.ts

@@ -1,43 +0,0 @@
-import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
-import * as React from "react";
-
-//#region src/components/Suggestion.d.ts
-interface SuggestionsProps extends React.HTMLAttributes<HTMLDivElement> {}
-/**
- * A horizontally scrollable row of prompt suggestions, typically shown above
- * the composer or in the empty state. Children are {@link Suggestion} chips.
- *
- * Ported from AI Elements' Suggestions. Sigvelo changes: design-system Button
- * chips and token-based styling; scrollbars hidden, scroll by wheel/touch.
- */
-declare function Suggestions({
-  className,
-  children,
-  ref,
-  ...props
-}: SuggestionsProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-interface SuggestionProps extends Omit<ButtonProps, "onClick" | "className"> {
-  className?: string;
-  /** The suggestion text — the chip label and the `onClick` payload. */
-  suggestion: string;
-  /** Called with the suggestion text; typically feeds `sendMessage`. */
-  onClick?: (suggestion: string) => void;
-}
-/** One pill-shaped suggestion chip. Renders `suggestion` unless children are given. */
-declare function Suggestion({
-  className,
-  suggestion,
-  onClick,
-  variant,
-  color,
-  size,
-  children,
-  ref,
-  ...props
-}: SuggestionProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-//#endregion
-export { Suggestion, SuggestionProps, Suggestions, SuggestionsProps };

package/dist/components/Suggestion.js

@@ -1,39 +0,0 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { Button } from "./Button.js";
-import "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/Suggestion.tsx
-/**
-* A horizontally scrollable row of prompt suggestions, typically shown above
-* the composer or in the empty state. Children are {@link Suggestion} chips.
-*
-* Ported from AI Elements' Suggestions. Sigvelo changes: design-system Button
-* chips and token-based styling; scrollbars hidden, scroll by wheel/touch.
-*/
-function Suggestions({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("suggestions", className),
-		...props,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "suggestions__row",
-			children
-		})
-	});
-}
-/** One pill-shaped suggestion chip. Renders `suggestion` unless children are given. */
-function Suggestion({ className, suggestion, onClick, variant = "outline", color = "neutral", size = "sm", children, ref, ...props }) {
-	return /* @__PURE__ */ jsx(Button, {
-		ref,
-		type: "button",
-		variant,
-		color,
-		size,
-		className: cx("suggestions__chip", className),
-		onClick: () => onClick?.(suggestion),
-		...props,
-		children: children ?? suggestion
-	});
-}
-//#endregion
-export { Suggestion, Suggestions };

package/dist/components/Tool.d.ts

@@ -1,123 +0,0 @@
-import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
-import * as React from "react";
-import { DynamicToolUIPart, ToolUIPart } from "ai";
-
-//#region src/components/Tool.d.ts
-/** An AI SDK tool part — static (`tool-*`) or dynamic. */
-type ToolPart = ToolUIPart | DynamicToolUIPart;
-type ToolState = ToolPart["state"];
-declare function getStatusBadge(status: ToolState): React.JSX.Element;
-interface ToolProps extends Omit<CollapsibleRootProps, "className" | "part" | "unstyled"> {
-  className?: string;
-  /**
-   * The AI SDK tool part, taken whole — ToolHeader/ToolInput/ToolOutput
-   * derive name, state, input, and output from it.
-   */
-  part?: ToolPart;
-  /** Current state of the tool invocation. Defaults to `part.state`. */
-  state?: ToolState;
-}
-/**
- * Displays a collapsible tool invocation (name, input, output, state).
- * The state drives the status badge color and default open behavior —
- * `output-available`, `output-error`, and `output-denied` auto-open.
- * Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
- *
- * @example
- * ```tsx
- * <Tool part={part}>
- *   <ToolHeader />
- *   <ToolContent>
- *     <ToolInput />
- *     <ToolOutput />
- *   </ToolContent>
- * </Tool>
- * ```
- *
- * @see {@link https://elements.ai-sdk.dev/components/tool | AI Elements Tool}
- */
-declare function Tool({
-  className,
-  part,
-  state: stateProp,
-  defaultOpen,
-  ref,
-  ...props
-}: ToolProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-interface ToolHeaderProps extends Omit<CollapsibleTriggerProps, "className" | "type" | "unstyled"> {
-  className?: string;
-  /** The tool "type" (e.g. "function", "retrieval"). Derived from `<Tool part>` when omitted. */
-  type?: string;
-  /** The specific tool invoked (e.g. "search_web"). Derived from `<Tool part>` when omitted. */
-  toolName?: string;
-  /** Optional human-readable title shown alongside the tool name. */
-  title?: string;
-  /** Current state of the tool invocation. Matches Vercel AI Elements. */
-  state?: ToolState;
-}
-/**
- * Clickable header that shows the tool type, name, and state badge.
- */
-declare function ToolHeader({
-  className,
-  type: typeProp,
-  toolName,
-  title: titleProp,
-  state: stateProp,
-  ref,
-  ...props
-}: ToolHeaderProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-interface ToolContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
-  className?: string;
-}
-/**
- * Collapsible panel holding ToolInput and ToolOutput.
- */
-declare function ToolContent({
-  className,
-  children,
-  ref,
-  ...props
-}: ToolContentProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-interface ToolInputProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** The input passed to the tool (rendered as a JSON code block). Defaults to `part.input`. */
-  input?: unknown;
-}
-/**
- * Displays the tool input as a JSON code block. Renders nothing while the
- * input is still undefined.
- */
-declare function ToolInput({
-  className,
-  input: inputProp,
-  ref,
-  ...props
-}: ToolInputProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element | null;
-interface ToolOutputProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** The tool output (any React node). Defaults to `part.output`. Mutually exclusive with errorText. */
-  output?: unknown;
-  /** Error message, rendered with destructive styling. Defaults to `part.errorText`. */
-  errorText?: string;
-}
-/**
- * Displays the tool output or error text.
- */
-declare function ToolOutput({
-  className,
-  output: outputProp,
-  errorText: errorTextProp,
-  ref,
-  ...props
-}: ToolOutputProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element | null;
-//#endregion
-export { Tool, ToolContent, ToolContentProps, ToolHeader, ToolHeaderProps, ToolInput, ToolInputProps, ToolOutput, ToolOutputProps, ToolPart, ToolProps, ToolState, getStatusBadge };