@mcp-b/react-components 0.6.5 → 0.7.1

package/dist/styles/message.css

@@ -54,7 +54,8 @@
 }
 
 .message__content :where(pre) {
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: clip;
 }
 
 .message__response {

package/dist/styles/prompt-input.css

@@ -205,6 +205,7 @@
 
 .prompt-input__submit {
   flex-shrink: 0;
+  border-radius: 999rem;
 }
 
 .prompt-input__submit-spinner {

package/dist/styles/scrollbars.css

@@ -2,13 +2,21 @@
   --scrollbar-thumb: var(--app-scrollbar-thumb, var(--sigvelo-color-neutral-border-muted));
   --scrollbar-track: var(--app-scrollbar-track, var(--sigvelo-color-neutral-bg-subtle));
 
-  overflow: auto;
-  overscroll-behavior: contain;
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
   scrollbar-gutter: stable;
   scrollbar-width: thin;
 }
 
+:where(.message__content pre) {
+  overflow-x: auto;
+  overflow-y: clip;
+}
+
+:where(.observability-table-wrap) {
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
 @media (prefers-contrast: more) {
   :where(.message__content pre, .observability-table-wrap) {
     --scrollbar-thumb: var(--sigvelo-color-text);

package/dist/styles/streamdown.css

@@ -250,6 +250,7 @@ button[data-streamdown="link"] {
 
 [data-streamdown="code-block-body"] {
   overflow-x: auto;
+  overflow-y: clip;
   border-radius: var(--sigvelo-radius-md);
 }
 
@@ -261,6 +262,7 @@ button[data-streamdown="link"] {
   font-family: var(--sigvelo-font-mono);
   font-size: 0.8125rem;
   line-height: 1.55;
+  overflow: visible;
 }
 
 /* The code plugin emits one <span class="block"> per line with no newline

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

@@ -0,0 +1,318 @@
+.think-full-app {
+  position: relative;
+  block-size: 100%;
+  min-block-size: 32rem;
+  min-inline-size: 0;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) var(--think-full-app-files-w, 21.25rem);
+  background: var(--sigvelo-color-canvas);
+  color: var(--sigvelo-color-text);
+  font-family: var(--sigvelo-font-sans);
+  transition: grid-template-columns 160ms ease;
+}
+
+.think-full-app[data-has-files="false"] {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.think-full-app__mobile-header {
+  display: none;
+}
+
+.think-full-app__chat-surface {
+  grid-column: 1;
+  grid-row: 1;
+  min-inline-size: 0;
+  min-block-size: 0;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
+  background: var(--sigvelo-color-surface);
+}
+
+.think-full-app__chat,
+.think-full-app__chat-inner {
+  min-inline-size: 0;
+  min-block-size: 0;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.think-full-app__chat-inner {
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
+.think-full-app__chat .conversation__content {
+  inline-size: min(100%, 46rem);
+  margin-inline: auto;
+  gap: 0.375rem;
+  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
+}
+
+.think-full-app__chat .message__content {
+  max-inline-size: min(42rem, 94%);
+}
+
+.think-full-app__chat .message[data-from="assistant"] .message__content {
+  inline-size: min(42rem, 96%);
+}
+
+.think-full-app__chat .agent-chat__composer {
+  padding-inline: 1rem;
+}
+
+.think-full-app__chat .agent-chat__composer .prompt-input {
+  inline-size: min(100%, 46rem);
+  margin-inline: auto;
+}
+
+.think-full-app__error {
+  inline-size: min(100%, 46rem);
+  margin: 0 auto 0.375rem;
+  padding: 0.4375rem 0.625rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-danger-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
+  background: var(--sigvelo-color-danger-bg-subtle);
+  color: var(--sigvelo-color-danger-text);
+  font-size: 0.75rem;
+}
+
+.think-full-app__error button {
+  margin-inline-start: 0.5rem;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.think-full-app__aside {
+  grid-column: 2;
+  grid-row: 1;
+  min-inline-size: 0;
+  min-block-size: 0;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
+  border-inline-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  background: color-mix(
+    in oklab,
+    var(--sigvelo-color-canvas),
+    var(--sigvelo-color-primary-bg-subtle) 18%
+  );
+}
+
+.think-full-app__resizer {
+  position: absolute;
+  z-index: 5;
+  inset-block: 0;
+  inset-inline-end: var(--think-full-app-files-w, 21.25rem);
+  inline-size: 0.625rem;
+  margin-inline-end: -0.3125rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: col-resize;
+  touch-action: pan-y;
+  appearance: none;
+}
+
+.think-full-app__resizer::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 50%;
+  inline-size: 1px;
+  transform: translateX(-50%);
+  background: transparent;
+  transition: background 120ms ease;
+}
+
+.think-full-app__resizer:hover::before,
+.think-full-app__resizer:focus-visible::before,
+body.is-resizing-columns .think-full-app__resizer::before {
+  background: color-mix(in srgb, var(--sigvelo-color-primary-text) 38%, transparent);
+}
+
+.think-full-app__resizer:focus-visible {
+  outline: 2px solid var(--sigvelo-color-focus);
+  outline-offset: -2px;
+}
+
+body.is-resizing-columns {
+  cursor: col-resize;
+  user-select: none;
+}
+
+body.is-resizing-columns .think-full-app {
+  transition: none;
+}
+
+.think-full-app__files-slot,
+.think-full-app__workbench {
+  min-inline-size: 0;
+  min-block-size: 0;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.think-full-app__workbench {
+  background: color-mix(
+    in oklab,
+    var(--sigvelo-color-canvas),
+    var(--sigvelo-color-primary-bg-subtle) 18%
+  );
+}
+
+.think-full-app__workspace-title {
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 0;
+  gap: 0.375rem;
+}
+
+.think-full-app__workspace-back {
+  display: none;
+}
+
+@media (width <= 56rem) {
+  .think-full-app {
+    min-block-size: 0;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+  }
+
+  .think-full-app[data-has-files="false"] {
+    grid-template-rows: minmax(0, 1fr);
+  }
+
+  .think-full-app__mobile-header {
+    position: absolute;
+    z-index: 30;
+    inset-block-start: 0;
+    inset-inline: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-block-size: calc(2.5rem + env(safe-area-inset-top, 0px));
+    padding-block: calc(0.25rem + env(safe-area-inset-top, 0px)) 0.25rem;
+    padding-inline: calc(0.625rem + env(safe-area-inset-left, 0px))
+      calc(0.625rem + env(safe-area-inset-right, 0px));
+    pointer-events: none;
+  }
+
+  .think-full-app__mobile-action {
+    pointer-events: auto;
+    border-radius: 999rem;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      color-mix(in oklab, var(--sigvelo-color-neutral-border-subtle), transparent 36%);
+    background: color-mix(in oklab, var(--sigvelo-color-surface), transparent 26%);
+    color: var(--sigvelo-color-text);
+    box-shadow: var(--sigvelo-shadow-xs);
+    backdrop-filter: blur(14px) saturate(1.18);
+    -webkit-backdrop-filter: blur(14px) saturate(1.18);
+  }
+
+  .think-full-app__mobile-action:hover:not([data-disabled]),
+  .think-full-app__mobile-action:focus-visible {
+    background: color-mix(in oklab, var(--sigvelo-color-surface), transparent 12%);
+    color: var(--sigvelo-color-primary-text);
+  }
+
+  .think-full-app[data-mobile-view="files"] .think-full-app__workspace-back {
+    display: inline-flex;
+    flex: 0 0 auto;
+    border-radius: 999rem;
+    background: transparent;
+    color: var(--sigvelo-color-text);
+  }
+
+  .think-full-app[data-mobile-view="files"]
+    .think-full-app__workspace-back:hover:not([data-disabled]),
+  .think-full-app[data-mobile-view="files"] .think-full-app__workspace-back:focus-visible {
+    background: color-mix(in srgb, var(--sigvelo-color-surface) 76%, transparent);
+    color: var(--sigvelo-color-primary-text);
+  }
+
+  .think-full-app__chat-surface,
+  .think-full-app__files-slot,
+  .think-full-app__workbench {
+    grid-column: 1;
+    grid-row: 1;
+    min-block-size: 0;
+    display: none;
+  }
+
+  .think-full-app__aside {
+    display: contents;
+    border-inline-start: 0;
+  }
+
+  .think-full-app__resizer {
+    display: none;
+  }
+
+  .think-full-app[data-mobile-view="chat"] .think-full-app__chat-surface {
+    display: grid;
+  }
+
+  .think-full-app[data-has-files="false"] .think-full-app__chat-surface {
+    grid-row: 1;
+  }
+
+  .think-full-app[data-mobile-view="files"] .think-full-app__files-slot,
+  .think-full-app[data-mobile-view="files"] .think-full-app__workbench {
+    display: flex;
+  }
+
+  .think-full-app__chat .conversation__content {
+    inline-size: min(100%, 34rem);
+    padding-inline: 1.5rem;
+  }
+
+  .think-full-app[data-has-files="true"] .think-full-app__chat .message-scroller__viewport {
+    --message-scroller-fade-t-size: 3rem;
+    --message-scroller-fade-b-size: 3rem;
+  }
+
+  .think-full-app[data-has-files="true"]
+    .think-full-app__chat
+    .message-scroller__viewport[data-scrollable~="start"] {
+    --message-scroller-fade-t: var(--message-scroller-fade-t-size);
+  }
+
+  .think-full-app[data-has-files="true"] .think-full-app__chat .agent-chat__transcript-content {
+    padding-block-start: calc(2.5rem + env(safe-area-inset-top, 0px));
+  }
+
+  .think-full-app__chat .message__content,
+  .think-full-app__chat .message[data-from="assistant"] .message__content {
+    max-inline-size: 100%;
+    inline-size: min(100%, 34rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .think-full-app,
+  .think-full-app__resizer::before {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .think-full-app__chat-surface,
+  .think-full-app__aside,
+  .think-full-app__workbench {
+    border: 1px solid canvastext;
+    background: canvas;
+    color: canvastext;
+    box-shadow: none;
+  }
+}

package/dist/utils/mcp-server-catalog.d.ts

@@ -98,6 +98,27 @@ declare const MCP_SERVER_SETUP_AUTH: {
     readonly fields: readonly [];
   };
 };
+declare const CUSTOM_MCP_SERVER_CARD: {
+  readonly id: "localMcp";
+  readonly name: "Custom MCP";
+  readonly url: "";
+  readonly description: "Connect any Streamable HTTP MCP server";
+  readonly category: "Manual";
+  readonly manualSetup: {
+    readonly auth: {
+      readonly type: "bearer";
+      readonly label: "Optional bearer / API key";
+      readonly fields: readonly [{
+        readonly name: "bearerToken";
+        readonly label: "Bearer";
+        readonly inputType: "password";
+        readonly placeholder: "Paste token";
+      }];
+    };
+    readonly description: "Enter a server URL and optional bearer token.";
+    readonly links: readonly [];
+  };
+};
 declare function getMcpServerIconSrc(server: Pick<McpServerCard, "icon" | "url">): string | undefined;
 declare function inferMcpServerFaviconUrl(url: string): string | undefined;
 /** Remote MCP servers whose OAuth metadata exposes a registration_endpoint. */
@@ -907,5 +928,6 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
     }];
   };
 }];
+declare const DEFAULT_MCP_SERVER_CARDS: readonly McpServerCard[];
 //#endregion
-export { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, MCP_SERVER_SETUP_AUTH, McpServerCard, McpServerCardIcon, McpServerManualSetup, McpServerPickerStatus, McpServerSetupAuth, McpServerSetupAuthField, McpServerSetupAuthFieldName, McpServerSetupLink, getMcpServerIconSrc, inferMcpServerFaviconUrl };
+export { CUSTOM_MCP_SERVER_CARD, DCR_MCP_SERVER_CARDS, DEFAULT_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, MCP_SERVER_SETUP_AUTH, McpServerCard, McpServerCardIcon, McpServerManualSetup, McpServerPickerStatus, McpServerSetupAuth, McpServerSetupAuthField, McpServerSetupAuthFieldName, McpServerSetupLink, getMcpServerIconSrc, inferMcpServerFaviconUrl };

package/dist/utils/mcp-server-catalog.js

@@ -72,6 +72,27 @@ const MCP_SERVER_SETUP_AUTH = {
 		fields: []
 	}
 };
+const CUSTOM_MCP_SERVER_CARD = {
+	id: "localMcp",
+	name: "Custom MCP",
+	url: "",
+	description: "Connect any Streamable HTTP MCP server",
+	category: MANUAL_CATEGORY,
+	manualSetup: {
+		auth: {
+			type: "bearer",
+			label: "Optional bearer / API key",
+			fields: [{
+				name: "bearerToken",
+				label: "Bearer",
+				inputType: "password",
+				placeholder: "Paste token"
+			}]
+		},
+		description: "Enter a server URL and optional bearer token.",
+		links: []
+	}
+};
 function getMcpServerIconSrc(server) {
 	if (typeof server.icon === "string") return server.icon;
 	if (server.icon?.src) return server.icon.src;
@@ -724,5 +745,10 @@ const MANUAL_MCP_SERVER_CARDS = [
 		}
 	}
 ];
+const DEFAULT_MCP_SERVER_CARDS = [
+	...DCR_MCP_SERVER_CARDS,
+	CUSTOM_MCP_SERVER_CARD,
+	...MANUAL_MCP_SERVER_CARDS
+];
 //#endregion
-export { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, MCP_SERVER_SETUP_AUTH, getMcpServerIconSrc, inferMcpServerFaviconUrl };
+export { CUSTOM_MCP_SERVER_CARD, DCR_MCP_SERVER_CARDS, DEFAULT_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, MCP_SERVER_SETUP_AUTH, getMcpServerIconSrc, inferMcpServerFaviconUrl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.6.5",
+  "version": "0.7.1",
   "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": {
@@ -42,6 +42,7 @@
     "@base-ui/react": "~1.6.0",
     "@cloudflare/codemode": "^0.4.2",
     "@rrweb/replay": "^2.1.0",
+    "@shadcn/react": "^0.2.0",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
     "@streamdown/math": "^1.0.2",
@@ -49,7 +50,7 @@
     "anser": "^2.3.5",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.6.5"
+    "@mcp-b/design-tokens": "0.7.1"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.194",