@mcp-b/react-components 0.7.1 → 0.8.0

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

@@ -0,0 +1,449 @@
+.think-thread-shell {
+  container: think-thread-shell / inline-size;
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+
+.think-thread-shell__frame {
+  --think-thread-mobile-sidebar-w: min(80cqi, 22rem);
+
+  position: relative;
+  isolation: isolate;
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+  display: grid;
+  grid-template-columns: var(--think-thread-sidebar-w, 16rem) minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
+  background: var(--sigvelo-color-canvas);
+  color: var(--sigvelo-color-text);
+  font-family: var(--sigvelo-font-sans);
+  transition: grid-template-columns 180ms ease;
+}
+
+.think-thread-shell__sidebar,
+.think-thread-shell__main {
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: hidden;
+}
+
+.think-thread-shell__sidebar {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.think-thread-shell__main {
+  grid-column: 2;
+  grid-row: 1;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.think-thread-shell__peek {
+  display: none;
+}
+
+.think-thread-shell__toolbar {
+  position: absolute;
+  inset-block-start: calc(0.4375rem + env(safe-area-inset-top, 0px));
+  inset-inline-start: calc(0.5rem + env(safe-area-inset-left, 0px));
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+.think-thread-shell__panel-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.125rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 58%, transparent);
+  border-radius: 0.625rem;
+  background: color-mix(
+    in srgb,
+    color-mix(in oklab, var(--sigvelo-color-canvas), var(--sigvelo-color-primary-bg-subtle) 18%) 72%,
+    var(--sigvelo-color-surface)
+  );
+  pointer-events: auto;
+}
+
+.think-thread-shell__panel-toggle button {
+  min-block-size: 1.5rem;
+  min-inline-size: 1.625rem;
+  padding: 0.1875rem;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.think-thread-shell__panel-toggle button svg {
+  display: block;
+}
+
+.think-thread-shell__panel-toggle button:hover,
+.think-thread-shell__panel-toggle button[data-selected="true"] {
+  background: color-mix(in srgb, var(--sigvelo-color-primary-bg-subtle) 78%, white);
+  color: var(--sigvelo-color-primary-text);
+}
+
+.think-thread-shell__panel-toggle button:focus-visible {
+  outline: 2px solid var(--sigvelo-color-focus);
+  outline-offset: 2px;
+}
+
+.think-thread-shell__resizer {
+  position: absolute;
+  z-index: 25;
+  inset-block: 0;
+  inset-inline-start: var(--think-thread-sidebar-w, 16rem);
+  inline-size: 0.625rem;
+  margin-inline-start: -0.3125rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: col-resize;
+  touch-action: pan-y;
+  appearance: none;
+}
+
+.think-thread-shell__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-thread-shell__resizer:hover::before,
+.think-thread-shell__resizer:focus-visible::before,
+body.is-resizing-columns .think-thread-shell__resizer::before {
+  background: color-mix(in srgb, var(--sigvelo-color-primary-text) 38%, transparent);
+}
+
+.think-thread-shell__resizer:focus-visible {
+  outline: 2px solid var(--sigvelo-color-focus);
+  outline-offset: -2px;
+}
+
+body.is-resizing-columns .think-thread-shell__frame {
+  transition: none;
+}
+
+.think-thread-shell__frame[data-sidebar-open="false"] {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.think-thread-shell__frame[data-sidebar-open="false"] .think-thread-shell__sidebar {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  transform: translateX(-100%);
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.think-thread-shell__frame[data-sidebar-open="false"] .think-thread-shell__main {
+  grid-column: 1;
+}
+
+.think-thread-picker {
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  overflow: hidden;
+  border-inline-end: 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-surface) 55%);
+  color: var(--sigvelo-color-text);
+}
+
+.think-thread-picker__header {
+  min-block-size: 2.75rem;
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-block: 0.5rem;
+  padding-inline: calc(0.875rem + env(safe-area-inset-left, 0px)) 0.625rem;
+}
+
+.think-thread-shell__frame[data-sidebar-open="true"] .think-thread-picker__header {
+  padding-inline-start: calc(4.25rem + env(safe-area-inset-left, 0px));
+}
+
+.think-thread-picker__title {
+  min-inline-size: 0;
+  margin: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.8125rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.think-thread-picker__nav {
+  min-inline-size: 0;
+  min-block-size: 0;
+  display: grid;
+  overflow: hidden;
+}
+
+.think-thread-picker__scroll,
+.think-thread-picker__viewport {
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+
+.think-thread-picker__viewport {
+  --think-thread-picker-fade-size: min(12%, 2.5rem);
+
+  padding: 0.375rem 0.5rem 0.75rem;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 min(var(--think-thread-picker-fade-size), var(--scroll-area-overflow-y-start, 0px)),
+    #000
+      calc(100% - min(var(--think-thread-picker-fade-size), var(--scroll-area-overflow-y-end, 0px))),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 min(var(--think-thread-picker-fade-size), var(--scroll-area-overflow-y-start, 0px)),
+    #000
+      calc(100% - min(var(--think-thread-picker-fade-size), var(--scroll-area-overflow-y-end, 0px))),
+    transparent 100%
+  );
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.think-thread-picker__list {
+  display: grid;
+  gap: 0.0625rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.think-thread-picker__thread {
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 2rem;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  padding: 0.3125rem 0.5rem;
+  align-items: center;
+  justify-content: flex-start;
+  column-gap: 0.5rem;
+  border-radius: var(--sigvelo-radius-sm);
+  color: var(--sigvelo-color-text);
+  font-weight: var(--sigvelo-font-weight-normal);
+  text-align: start;
+}
+
+.think-thread-picker__thread[data-selected="true"] {
+  background: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 18%);
+  color: var(--sigvelo-color-text);
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.think-thread-picker__thread[data-selected="true"]:hover:not([data-disabled]) {
+  background: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 18%);
+}
+
+.think-thread-picker__thread-title {
+  min-inline-size: 0;
+  display: block;
+  overflow: hidden;
+  font-size: 0.8125rem;
+  line-height: var(--sigvelo-leading-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.think-thread-picker__thread-time {
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.75rem;
+  line-height: var(--sigvelo-leading-tight);
+}
+
+.think-thread-picker__thread-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1rem;
+  block-size: 1rem;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.think-thread-picker__thread-status svg {
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
+}
+
+.think-thread-picker__thread[data-status="pending"] .think-thread-picker__thread-status,
+.think-thread-picker__thread[data-status="running"] .think-thread-picker__thread-status,
+.think-thread-picker__thread[data-status="starting"] .think-thread-picker__thread-status,
+.think-thread-picker__thread[data-status="streaming"] .think-thread-picker__thread-status,
+.think-thread-picker__thread[data-status="submitted"] .think-thread-picker__thread-status,
+.think-thread-picker__thread[data-status="recovering"] .think-thread-picker__thread-status {
+  color: var(--sigvelo-color-primary-text);
+}
+
+.think-thread-picker__thread[data-status="pending"] .think-thread-picker__thread-status svg,
+.think-thread-picker__thread[data-status="running"] .think-thread-picker__thread-status svg,
+.think-thread-picker__thread[data-status="starting"] .think-thread-picker__thread-status svg,
+.think-thread-picker__thread[data-status="streaming"] .think-thread-picker__thread-status svg,
+.think-thread-picker__thread[data-status="submitted"] .think-thread-picker__thread-status svg,
+.think-thread-picker__thread[data-status="recovering"] .think-thread-picker__thread-status svg {
+  animation: think-thread-picker-spin 900ms linear infinite;
+}
+
+.think-thread-picker__thread[data-status="error"] .think-thread-picker__thread-status {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.think-thread-picker__thread[data-status="aborted"] .think-thread-picker__thread-status,
+.think-thread-picker__thread[data-status="interrupted"] .think-thread-picker__thread-status,
+.think-thread-picker__thread[data-status="skipped"] .think-thread-picker__thread-status {
+  color: var(--sigvelo-color-warning-text);
+}
+
+.think-thread-picker__empty {
+  margin: 0.5rem;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.8125rem;
+  line-height: var(--sigvelo-leading-snug);
+}
+
+.think-thread-picker__footer {
+  display: flex;
+  justify-content: center;
+  padding-block: 0.625rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
+  padding-inline: calc(0.75rem + env(safe-area-inset-left, 0px)) 0.75rem;
+}
+
+.think-thread-picker__create {
+  inline-size: auto;
+  max-inline-size: 100%;
+  border-radius: 999rem;
+  box-shadow: var(--sigvelo-shadow-xs);
+}
+
+.think-thread-picker__create svg {
+  flex: 0 0 auto;
+}
+
+@container think-thread-shell (inline-size <= 56rem) {
+  .think-thread-shell__frame {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .think-thread-shell__sidebar,
+  .think-thread-shell__main {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .think-thread-shell__sidebar {
+    z-index: 20;
+    inline-size: var(--think-thread-mobile-sidebar-w);
+    max-inline-size: calc(100cqi - 4rem);
+    transition: transform 180ms ease;
+  }
+
+  .think-thread-shell__resizer {
+    display: none;
+  }
+
+  .think-thread-shell__frame[data-sidebar-open="false"] .think-thread-shell__sidebar {
+    visibility: hidden;
+  }
+
+  .think-thread-shell__main {
+    transition:
+      transform 180ms ease,
+      filter 180ms ease;
+  }
+
+  .think-thread-shell__frame[data-sidebar-open="true"] .think-thread-shell__main {
+    transform: translateX(var(--think-thread-mobile-sidebar-w));
+    filter: brightness(0.86) saturate(0.92);
+    border-start-start-radius: 1.5rem;
+    border-end-start-radius: 1.5rem;
+    box-shadow: var(--sigvelo-shadow-lg);
+    pointer-events: none;
+  }
+
+  .think-thread-shell__frame[data-sidebar-open="true"] .think-thread-shell__peek {
+    position: absolute;
+    inset-block: 0;
+    inset-inline: var(--think-thread-mobile-sidebar-w) 0;
+    z-index: 22;
+    display: block;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .think-thread-shell__peek:focus-visible {
+    outline: 2px solid var(--sigvelo-color-focus);
+    outline-offset: -0.25rem;
+    border-start-start-radius: 1.5rem;
+    border-end-start-radius: 1.5rem;
+  }
+
+  .think-thread-shell__frame[data-sidebar-open="false"] .think-thread-shell__sidebar {
+    transform: translateX(-100%);
+  }
+
+  .think-thread-picker {
+    inline-size: 100%;
+    border-inline-end: 0;
+    box-shadow: var(--sigvelo-shadow-lg);
+  }
+}
+
+@keyframes think-thread-picker-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (forced-colors: active) {
+  .think-thread-shell__panel-toggle {
+    border-color: canvastext;
+    background: canvas;
+  }
+
+  .think-thread-picker {
+    border-inline-end: 1px solid canvastext;
+    background: canvas;
+    color: canvastext;
+    box-shadow: none;
+  }
+
+  .think-thread-picker__thread-status {
+    color: canvastext;
+  }
+}

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

@@ -1,5 +1,8 @@
+import { MCPServersState } from "agents";
+
 //#region src/utils/mcp-server-catalog.d.ts
-type McpServerPickerStatus = "connecting" | "needs-auth" | "authenticating" | "ready" | "failed";
+type McpServerConnectionState = MCPServersState["servers"][string]["state"];
+type McpServerPickerStatus = McpServerConnectionState | "needs-auth";
 interface McpServerCardIcon {
   src: string;
 }
@@ -119,7 +122,7 @@ declare const CUSTOM_MCP_SERVER_CARD: {
     readonly links: readonly [];
   };
 };
-declare function getMcpServerIconSrc(server: Pick<McpServerCard, "icon" | "url">): string | undefined;
+declare function getMcpServerIconSrc(server: McpServerCard): string | undefined;
 declare function inferMcpServerFaviconUrl(url: string): string | undefined;
 /** Remote MCP servers whose OAuth metadata exposes a registration_endpoint. */
 declare const DCR_MCP_SERVER_CARDS: readonly [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.7.1",
+  "version": "0.8.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": {
@@ -50,16 +50,15 @@
     "anser": "^2.3.5",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.7.1"
+    "@mcp-b/design-tokens": "0.8.0"
   },
   "devDependencies": {
-    "@ai-sdk/react": "^3.0.194",
+    "@ai-sdk/react": "^3.0.222",
     "@cloudflare/shell": "^0.4.1",
     "@cloudflare/think": "^0.12.1",
-    "@cloudflare/workers-types": "^4.20260630.1",
+    "@cloudflare/workers-types": "^4.20260702.1",
     "@storybook/addon-a11y": "^10.4.6",
     "@storybook/addon-docs": "^10.4.6",
-    "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-vitest": "^10.4.6",
     "@storybook/react-vite": "^10.4.6",
     "@tanstack/react-form": "^1.33.0",
@@ -70,14 +69,14 @@
     "@vitest/coverage-v8": "^4.1.9",
     "@vitest/mocker": "^4.1.9",
     "agents": "^0.17.3",
-    "ai": "^6.0.182",
+    "ai": "^6.0.220",
     "playwright": "^1.61.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "storybook": "^10.4.6",
     "typescript": "^6.0.3",
-    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.1",
-    "vite-plus": "0.2.1",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.3",
+    "vite-plus": "0.2.3",
     "vitest": "^4.1.9"
   },
   "peerDependencies": {