@mcp-b/react-components 0.18.0 → 0.20.0

package/dist/styles/think-thread-picker.css

@@ -52,7 +52,7 @@
   font-size: var(--sigvelo-density-compact-control-font-size);
   font-variant-numeric: tabular-nums;
   font-weight: var(--sigvelo-font-weight-normal);
-  line-height: 1;
+  line-height: var(--sigvelo-leading-none);
 }
 
 .think-thread-status-indicators__item {

package/dist/styles/toast.css

@@ -65,41 +65,12 @@
   margin: 0;
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
   color: var(--sigvelo-color-text);
 }
 
 .toast__action {
-  --sigvelo-recipe-control-height: var(--sigvelo-control-height-xs);
-  --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-xs);
-  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-xs);
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: var(--sigvelo-recipe-control-height);
-  padding-block: 0;
-  padding-inline: var(--sigvelo-recipe-control-padding-inline);
   margin-block-start: var(--sigvelo-spacing-2);
-  font-family: inherit;
-  font-size: var(--sigvelo-recipe-control-font-size);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-primary-text-on-bg);
-  background-color: var(--sigvelo-color-primary-bg);
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  cursor: pointer;
-  transition: background-color var(--sigvelo-motion-duration-interaction)
-    var(--sigvelo-motion-ease-change);
-}
-
-.toast__action:hover {
-  background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 10%);
-}
-
-.toast__action:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .toast__close {

package/dist/styles/toggle.css

@@ -9,7 +9,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-recipe-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
   color: var(--sigvelo-color-text);
   background-color: transparent;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -29,27 +29,13 @@
   border-color: var(--sigvelo-color-neutral-border-muted);
 }
 
-.toggle--sm {
-  --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-sm);
-  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-sm);
-  --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-sm);
-}
-
-.toggle--lg {
-  --sigvelo-recipe-control-height: var(--sigvelo-control-height-lg);
-  --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-lg);
-  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-lg);
-  --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-lg);
-}
-
 .toggle > svg {
   inline-size: var(--sigvelo-recipe-control-icon-size);
   block-size: var(--sigvelo-recipe-control-icon-size);
   flex: none;
 }
 
-.toggle:hover {
+.toggle:hover:not([data-disabled]) {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
@@ -65,13 +51,13 @@
   border-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
-.toggle:active:not(:disabled) {
+.toggle:active:not([data-disabled]) {
   translate: 0 var(--sigvelo-motion-distance-xs);
 }
 
-.toggle:disabled {
+.toggle[data-disabled] {
   opacity: var(--sigvelo-recipe-disabled-opacity);
-  pointer-events: none;
+  cursor: not-allowed;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/styles/toolbar.css

@@ -3,94 +3,33 @@
   --sigvelo-toolbar-control-padding-inline: var(--sigvelo-control-padding-inline-sm);
   --sigvelo-toolbar-control-font-size: var(--sigvelo-control-text-sm);
 
-  display: flex;
   flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sigvelo-spacing-1);
-  padding: var(--sigvelo-spacing-1);
-  background-color: var(--sigvelo-color-canvas);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-}
-
-.toolbar[data-orientation="vertical"] {
-  flex-direction: column;
 }
 
 .toolbar[data-disabled] {
   opacity: var(--sigvelo-recipe-disabled-opacity);
-  pointer-events: none;
 }
 
-.toolbar__button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: var(--sigvelo-toolbar-control-height);
-  padding-block: 0;
-  padding-inline: var(--sigvelo-toolbar-control-padding-inline);
-  font-family: inherit;
-  font-size: var(--sigvelo-toolbar-control-font-size);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text);
-  background-color: transparent;
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  cursor: pointer;
-  transition:
-    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+.toolbar__button:not([data-unstyled]),
+.toolbar__link:not([data-unstyled]) {
+  --sigvelo-recipe-button-height: var(--sigvelo-toolbar-control-height);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-toolbar-control-padding-inline);
+  --sigvelo-recipe-button-font-size: var(--sigvelo-toolbar-control-font-size);
 }
 
-.toolbar__button:hover {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
+.toolbar__button:not([data-unstyled]) {
+  --sigvelo-recipe-control-height: var(--sigvelo-toolbar-control-height);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-toolbar-control-padding-inline);
+  --sigvelo-recipe-control-font-size: var(--sigvelo-toolbar-control-font-size);
 
-.toolbar__button:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
-}
-
-.toolbar__button[data-disabled] {
-  opacity: var(--sigvelo-recipe-disabled-opacity);
-  pointer-events: none;
-}
-
-.toolbar__button[data-pressed] {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.toolbar__link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: var(--sigvelo-toolbar-control-height);
-  padding-block: 0;
-  padding-inline: var(--sigvelo-toolbar-control-padding-inline);
-  font-family: inherit;
-  font-size: var(--sigvelo-toolbar-control-font-size);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text);
-  text-decoration: none;
-  border-radius: var(--sigvelo-radius-sm);
-  transition:
-    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+  border: none;
 }
 
-.toolbar__link:hover {
+.toolbar__button:not([data-unstyled])[data-pressed] {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
-.toolbar__link:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
-}
-
 .toolbar__group {
   display: flex;
   align-items: center;
@@ -102,13 +41,17 @@
 }
 
 .toolbar__separator {
+  flex-shrink: 0;
+  background-color: var(--sigvelo-color-neutral-border-muted);
+}
+
+.toolbar__separator[data-orientation="vertical"] {
   inline-size: var(--sigvelo-border-width);
   block-size: var(--sigvelo-spacing-6);
   margin-inline: var(--sigvelo-spacing-1);
-  background-color: var(--sigvelo-color-neutral-border-muted);
 }
 
-.toolbar[data-orientation="vertical"] .toolbar__separator {
+.toolbar__separator[data-orientation="horizontal"] {
   inline-size: 100%;
   block-size: var(--sigvelo-border-width);
   margin-block: var(--sigvelo-spacing-1);

package/dist/styles/tooltip.css

@@ -7,5 +7,5 @@
   max-inline-size: min(20rem, var(--available-width));
   overflow-block: auto;
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
 }

package/dist/styles/workspace-explorer.css

@@ -89,18 +89,9 @@
 }
 
 .workspace-explorer__header .app-top-bar__button {
-  inline-size: var(--sigvelo-density-compact-control-height);
-  min-inline-size: var(--sigvelo-density-compact-control-height);
-  block-size: var(--sigvelo-density-compact-control-height);
-  min-block-size: var(--sigvelo-density-compact-control-height);
   padding: var(--sigvelo-spacing-1-5);
 }
 
-.workspace-explorer__header .app-top-bar__button svg {
-  inline-size: var(--sigvelo-density-compact-control-icon-size);
-  block-size: var(--sigvelo-density-compact-control-icon-size);
-}
-
 .workspace-explorer__heading {
   display: flex;
   align-items: baseline;

package/dist/utils/codex-model-catalog.d.ts

@@ -68,10 +68,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly model: "gpt-5.6-sol";
   readonly displayName: "GPT-5.6-Sol";
   readonly description: "Fast agentic coding model for responsive everyday work.";
-  readonly supportedReasoningEfforts: [...CodexReasoningEffortOption[], CodexReasoningEffortOption, {
-    readonly reasoningEffort: "ultra";
-    readonly description: "Maximum reasoning with automatic task delegation";
-  }];
+  readonly supportedReasoningEfforts: [...CodexReasoningEffortOption[], CodexReasoningEffortOption];
   readonly defaultReasoningEffort: "low";
   readonly isDefault: false;
   readonly upgrade: null;
@@ -88,10 +85,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly model: "gpt-5.6-terra";
   readonly displayName: "GPT-5.6-Terra";
   readonly description: "Balanced agentic coding model for everyday work.";
-  readonly supportedReasoningEfforts: [...CodexReasoningEffortOption[], CodexReasoningEffortOption, {
-    readonly reasoningEffort: "ultra";
-    readonly description: "Maximum reasoning with automatic task delegation";
-  }];
+  readonly supportedReasoningEfforts: [...CodexReasoningEffortOption[], CodexReasoningEffortOption];
   readonly defaultReasoningEffort: "medium";
   readonly isDefault: true;
   readonly upgrade: null;

package/dist/utils/codex-model-catalog.js

@@ -59,14 +59,7 @@ const CHECKED_IN_CODEX_MODELS = defineCodexModels([
 		model: "gpt-5.6-sol",
 		displayName: "GPT-5.6-Sol",
 		description: "Fast agentic coding model for responsive everyday work.",
-		supportedReasoningEfforts: [
-			...standardReasoningEfforts,
-			maxReasoningEffort,
-			{
-				reasoningEffort: "ultra",
-				description: "Maximum reasoning with automatic task delegation"
-			}
-		],
+		supportedReasoningEfforts: [...standardReasoningEfforts, maxReasoningEffort],
 		defaultReasoningEffort: "low",
 		isDefault: false
 	},
@@ -76,14 +69,7 @@ const CHECKED_IN_CODEX_MODELS = defineCodexModels([
 		model: "gpt-5.6-terra",
 		displayName: "GPT-5.6-Terra",
 		description: "Balanced agentic coding model for everyday work.",
-		supportedReasoningEfforts: [
-			...standardReasoningEfforts,
-			maxReasoningEffort,
-			{
-				reasoningEffort: "ultra",
-				description: "Maximum reasoning with automatic task delegation"
-			}
-		],
+		supportedReasoningEfforts: [...standardReasoningEfforts, maxReasoningEffort],
 		defaultReasoningEffort: "medium",
 		isDefault: true
 	},

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

@@ -154,6 +154,13 @@ declare const DCR_MCP_SERVER_CARDS: readonly [{
   readonly description: "Use Jira, Confluence, and Compass";
   readonly category: "Auto";
   readonly icon: "https://cdn.simpleicons.org/atlassian/0052CC";
+}, {
+  readonly id: "attio";
+  readonly name: "Attio";
+  readonly url: "https://mcp.attio.com/mcp";
+  readonly description: "Manage CRM records, notes, tasks, and pipeline activity";
+  readonly category: "Auto";
+  readonly icon: "https://attio.com/favicon.ico";
 }, {
   readonly id: "canva";
   readonly name: "Canva";

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

@@ -148,6 +148,14 @@ const DCR_MCP_SERVER_CARDS = [
 		category: DCR_CATEGORY,
 		icon: "https://cdn.simpleicons.org/atlassian/0052CC"
 	},
+	{
+		id: "attio",
+		name: "Attio",
+		url: "https://mcp.attio.com/mcp",
+		description: "Manage CRM records, notes, tasks, and pipeline activity",
+		category: DCR_CATEGORY,
+		icon: "https://attio.com/favicon.ico"
+	},
 	{
 		id: "canva",
 		name: "Canva",

package/dist/utils/structured-code.d.ts

@@ -1,4 +1,4 @@
-import { A as CodeBlockLanguage } from "../CodeBlock-gV4kZeCI.js";
+import { A as CodeBlockLanguage } from "../CodeBlock-Bbls1CnA.js";
 
 //#region src/utils/structured-code.d.ts
 interface StructuredCodeDisplay {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.18.0",
+  "version": "0.20.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": {
@@ -57,7 +57,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.18.0"
+    "@mcp-b/design-tokens": "0.20.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",