@mcp-b/react-components 0.44.0 → 0.45.0

package/dist/styles/message-scroller.css

@@ -21,6 +21,11 @@
   contain: content;
 }
 
+.message-scroller__viewport:focus-visible {
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
+}
+
 .message-scroller__viewport[data-scrollable~="end"] {
   --sigvelo-scroll-fade-end: var(--message-scroller-fade-size);
 }

package/dist/styles/responsive-sidebar-shell.css

@@ -40,6 +40,26 @@
   overflow: hidden;
 }
 
+.responsive-sidebar-shell__sidebar-content {
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: hidden;
+}
+
+.responsive-sidebar-shell[data-sidebar-toggle-placement="sidebar"]
+  .responsive-sidebar-shell__sidebar {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.responsive-sidebar-shell__sidebar-leading {
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  display: flex;
+  align-items: center;
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2);
+}
+
 .responsive-sidebar-shell__sidebar {
   grid-column: 1;
   grid-row: 1;
@@ -101,6 +121,15 @@
   display: none;
 }
 
+.responsive-sidebar-shell__toggle--sidebar-fallback {
+  display: none;
+}
+
+.responsive-sidebar-shell[data-sidebar-toggle-placement="sidebar"][data-sidebar-open="false"]
+  .responsive-sidebar-shell__toggle--sidebar-fallback {
+  display: inline-flex;
+}
+
 @media (forced-colors: active) {
   .responsive-sidebar-shell,
   .responsive-sidebar-shell__frame {
@@ -193,6 +222,20 @@
     display: none;
   }
 
+  /* The closed-sidebar fallback has a deliberately specific wide-layout
+     selector above. When the compact title owns drawer disclosure, beat that
+     selector explicitly so the bar never presents two controls for one action. */
+  .responsive-sidebar-shell[data-sidebar-toggle-placement="sidebar"][data-sidebar-open="false"]
+    [data-compact-leading]
+    .responsive-sidebar-shell__toggle--sidebar-fallback {
+    display: none;
+  }
+
+  .responsive-sidebar-shell[data-sidebar-toggle-placement="sidebar"]
+    .responsive-sidebar-shell__sidebar-leading {
+    display: none;
+  }
+
   .responsive-sidebar-shell__compact-leading {
     display: contents;
   }
@@ -211,6 +254,10 @@
     font-weight: var(--sigvelo-font-weight-semibold);
   }
 
+  .responsive-sidebar-shell__title-trigger:focus-visible {
+    box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
+  }
+
   .responsive-sidebar-shell__title-trigger span {
     min-inline-size: 0;
     overflow: hidden;

package/dist/styles/subagent-run.css

@@ -2,14 +2,39 @@
    --sigvelo-elevation-floating, not a border. Forced colors restores a real
    border at the end of this file. */
 .subagent-run__selector {
-  max-inline-size: 14rem;
+  max-inline-size: 18rem;
+  /* Two text lines (name over live status) inside a pill: the control's fixed
+     small height would clip the second, so let the content size it. */
+  block-size: auto;
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  padding-block: var(--sigvelo-spacing-1);
   justify-content: flex-start;
-  border-radius: var(--sigvelo-radius-full);
+  border-radius: var(--sigvelo-radius-lg);
   background-color: var(--sigvelo-color-surface-raised);
   box-shadow: var(--sigvelo-elevation-floating);
   text-align: start;
 }
 
+/* The run's name over its live status line. Shared by the selector chip and
+   the drill-in's top bar so one run reads the same in both. */
+.subagent-run__text {
+  display: grid;
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+.subagent-run__status {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-leading-snug);
+}
+
+/* Scoped to the label, not the chip, so the drill-in bar tints the same. */
+.subagent-run__text[data-status="error"] .subagent-run__status {
+  color: var(--sigvelo-color-danger-text);
+}
+
 /* The ghost hover would swap the raised surface for a near-transparent tint;
    keep the surface and tint over it instead. */
 .subagent-run__selector:hover:not([data-disabled]) {
@@ -42,29 +67,14 @@
   margin-block-start: var(--sigvelo-spacing-2);
 }
 
-.subagent-run__tray {
-  display: grid;
-  gap: var(--sigvelo-spacing-1-5);
-  min-inline-size: 0;
-}
-
-.subagent-run__tray-label {
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-snug);
-}
-
+/* Size comes from the surrounding control — the selector's button recipe, the
+   top bar's title — so one label keeps each surface's own type scale. */
 .subagent-run__title {
   min-inline-size: 0;
   color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
-.subagent-run__selector .subagent-run__title {
-  font-size: var(--sigvelo-text-compact);
-}
-
 .subagent-run__indicator {
   display: inline-flex;
   flex: 0 0 auto;

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

@@ -1,9 +1,68 @@
+.think-full-app-shell {
+  --think-full-app-panel-outline: color-mix(in srgb, var(--sigvelo-color-text) 14%, transparent);
+  --sigvelo-color-surface: light-dark(
+    var(--sigvelo-color-surface-light),
+    var(--sigvelo-color-surface-under-dark)
+  );
+  --sigvelo-color-surface-raised: light-dark(
+    var(--sigvelo-color-surface-raised-light),
+    var(--sigvelo-color-surface-under-dark)
+  );
+  --sigvelo-color-neutral-bg-subtle: light-dark(
+    var(--sigvelo-color-neutral-bg-subtle-light),
+    rgb(255 255 255 / 4%)
+  );
+  --responsive-sidebar-shell-sidebar-surface: light-dark(
+    var(--sigvelo-color-surface-raised),
+    var(--sigvelo-color-surface-under)
+  );
+
+  background: var(--sigvelo-color-surface-under);
+}
+
+.think-full-app-shell > .responsive-sidebar-shell__frame > .responsive-sidebar-shell__sidebar {
+  border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.think-full-app-shell .responsive-sidebar-shell__main {
+  background: var(--sigvelo-color-surface);
+}
+
+/* The thread rail owns its wide-layout toggle. Seat it in the picker's header
+   instead of reserving a second row above the sidebar content. */
+.think-full-app-shell[data-sidebar-toggle-placement="sidebar"] .responsive-sidebar-shell__sidebar {
+  position: relative;
+  display: block;
+}
+
+.think-full-app-shell[data-sidebar-toggle-placement="sidebar"]
+  .responsive-sidebar-shell__sidebar-content {
+  block-size: 100%;
+}
+
+.think-full-app-shell[data-sidebar-toggle-placement="sidebar"]
+  .responsive-sidebar-shell__sidebar-leading {
+  position: absolute;
+  inset-block-start: var(--sigvelo-spacing-1);
+  inset-inline-end: var(--sigvelo-spacing-2);
+  z-index: var(--sigvelo-z-chrome);
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  padding: 0;
+}
+
+.think-full-app-shell[data-sidebar-toggle-placement="sidebar"] .think-thread-picker__header {
+  padding-inline-end: calc(
+    var(--sigvelo-layout-gutter) + var(--sigvelo-density-compact-control-height)
+  );
+}
+
 .think-full-app {
   position: relative;
   container: think-full-app / inline-size;
   display: grid;
   grid-template-rows: var(--sigvelo-layout-track-fill);
-  background: var(--sigvelo-color-surface);
+  background: transparent;
   color: var(--sigvelo-color-text);
   font-family: inherit;
 }
@@ -18,6 +77,7 @@
   grid-template-columns: auto var(--sigvelo-layout-track-fill);
   grid-template-rows: var(--sigvelo-layout-track-fill);
   margin: var(--sigvelo-layout-gutter);
+  overflow: visible;
 }
 
 .think-full-app__view-switch {
@@ -26,6 +86,10 @@
   background: transparent;
 }
 
+.think-full-app__compact-view-menu {
+  display: none;
+}
+
 .think-full-app__chat-surface {
   grid-column: 1;
   grid-row: 1;
@@ -66,6 +130,21 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
   grid-template-rows: var(--sigvelo-layout-track-fill) auto;
 }
 
+/* The raised workbench establishes the desktop bottom gutter. Keep the
+   floating composer on that same baseline and give it the same quiet edge. */
+.think-full-app-shell .agent-chat__composer {
+  padding-block-end: max(var(--sigvelo-spacing-1), env(safe-area-inset-bottom, 0px));
+}
+
+.think-full-app-shell .agent-chat__composer > .prompt-input {
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--think-full-app-panel-outline);
+  background: light-dark(
+    var(--sigvelo-color-surface-raised-light),
+    var(--sigvelo-color-surface-raised-dark)
+  );
+}
+
 /* Transparent column: the aside positions the plane, it is not a material of
    its own. */
 .think-full-app__aside {
@@ -87,6 +166,16 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
   translate: calc(var(--sigvelo-layout-gap) * 1.5) 0;
 }
 
+/* Keep the resize target generous without painting a full-height rule beside
+   the rounded panel. A short grip appears only on hover, focus, or drag. */
+.think-full-app__resizer::before {
+  inset-block: 50% auto;
+  block-size: calc(var(--sigvelo-spacing-6) * 2);
+  inline-size: 2px;
+  border-radius: var(--sigvelo-radius-full);
+  translate: -50% -50%;
+}
+
 .think-full-app__workbench-slot,
 .think-full-app__workbench,
 .think-full-app__workbench-panel {
@@ -100,9 +189,11 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
 
 /* The app's one raised plane. Panels fill it and never draw a second edge. */
 .think-full-app__workbench-slot {
-  border-radius: var(--sigvelo-radius-lg);
-  background: var(--sigvelo-color-surface-raised);
-  box-shadow: var(--sigvelo-elevation-floating);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--think-full-app-panel-outline);
+  border-radius: var(--sigvelo-radius-xl);
+  background: light-dark(var(--sigvelo-color-surface-raised), var(--sigvelo-color-surface-under));
+  box-shadow: var(--sigvelo-elevation-bar);
 }
 
 /* The panel stands in for itself while its first read is in flight, so the
@@ -136,6 +227,7 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
     grid-template-columns: var(--sigvelo-layout-track-fill);
     margin: 0;
     overflow: hidden;
+    background: var(--sigvelo-color-surface);
   }
 
   .think-full-app__aside {
@@ -155,6 +247,7 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
      themselves raised are defined after this stylesheet. */
   .think-full-app__workbench-slot,
   .think-full-app .think-full-app__workbench {
+    border: 0;
     border-radius: 0;
     background: var(--sigvelo-color-surface);
     box-shadow: none;
@@ -197,6 +290,48 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
   }
 }
 
+@container responsive-sidebar-shell (inline-size <= 56rem) {
+  .think-full-app-shell[data-sidebar-toggle-placement="sidebar"]
+    .responsive-sidebar-shell__sidebar {
+    display: grid;
+  }
+
+  .think-full-app-shell > .responsive-sidebar-shell__frame > .responsive-sidebar-shell__sidebar {
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      color-mix(in srgb, var(--sigvelo-color-text) 24%, transparent);
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--sigvelo-color-surface) 36%, transparent),
+      var(--sigvelo-elevation-overlay);
+  }
+
+  .think-full-app__app-bar {
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  }
+
+  .think-full-app__app-bar .app-top-bar__title {
+    inline-size: auto;
+    max-inline-size: min(20rem, 60vw);
+    justify-self: center;
+    text-align: center;
+  }
+
+  .think-full-app__view-switch {
+    display: none;
+  }
+
+  .think-full-app__compact-view-menu {
+    display: flex;
+  }
+
+  .think-full-app-shell .agent-chat__composer {
+    padding-block-end: max(var(--sigvelo-spacing-3), env(safe-area-inset-bottom, 0px));
+  }
+
+  .think-full-app-shell :is(.think-full-app__chat, .think-full-app__chat-inner) {
+    --agent-chat-column-inset: var(--sigvelo-spacing-4);
+  }
+}
+
 @media (forced-colors: active) {
   .think-full-app,
   .think-full-app__chat-surface,

package/dist/styles/think-sidepanel.css

@@ -44,11 +44,6 @@
   font: inherit;
 }
 
-.think-sidepanel__run-title > svg,
-.think-sidepanel__run-title > .nanite-mark {
-  flex: none;
-}
-
 .think-sidepanel__menu-switch-item {
   justify-content: space-between;
   gap: var(--sigvelo-spacing-3);

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

@@ -1,4 +1,5 @@
 .think-thread-picker {
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: 100%;
   min-block-size: 0;
@@ -6,6 +7,7 @@
   grid-template-rows: auto auto var(--sigvelo-layout-track-fill) auto;
   overflow: hidden;
   border-inline-end: 0;
+  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
   /* No material of its own: it fills whatever holds it — the shell's rail, the
      compact drawer, a host's own panel — and painting a colour here would
      cover the one that surface chose. */
@@ -28,17 +30,17 @@
   min-inline-size: 0;
   margin: 0;
   flex: 1 1 auto;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-density-compact-control-font-size);
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-tight);
+  line-height: var(--sigvelo-text-compact-leading);
 }
 
 .think-thread-picker__search {
   --sigvelo-recipe-control-height: var(--sigvelo-density-compact-control-height);
   --sigvelo-recipe-control-radius: var(--sigvelo-radius-sm);
 
-  padding: 0 var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
+  padding: 0 0 var(--sigvelo-spacing-2);
 }
 
 .think-thread-status-indicators {
@@ -92,7 +94,8 @@
 }
 
 .think-thread-picker__viewport {
-  padding: var(--sigvelo-layout-cluster) var(--sigvelo-layout-gutter) var(--sigvelo-layout-gutter);
+  padding-block: var(--sigvelo-layout-cluster) var(--sigvelo-layout-gutter);
+  padding-inline: 0;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
 }
@@ -305,6 +308,7 @@
     block-size: auto;
     max-block-size: inherit;
     grid-template-rows: auto auto auto;
+    padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
   }
 
   .think-thread-picker__header {
@@ -316,14 +320,11 @@
     --sigvelo-recipe-control-font-size: var(--sigvelo-density-compact-control-font-size);
     --sigvelo-recipe-control-icon-size: var(--sigvelo-density-compact-control-icon-size);
 
-    padding: 0 var(--sigvelo-spacing-1);
-    border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-      var(--sigvelo-color-neutral-border-subtle);
+    padding: 0 0 var(--sigvelo-spacing-2);
   }
 
-  .think-thread-picker__search .field__control {
-    border-color: transparent;
-    background: transparent;
+  .think-thread-picker__search .field__control:focus-visible {
+    box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
   }
 
   .think-thread-picker__nav,
@@ -335,7 +336,7 @@
   }
 
   .think-thread-picker__viewport {
-    padding: var(--sigvelo-spacing-1);
+    padding: var(--sigvelo-spacing-1) 0;
   }
 }
 

package/dist/styles/workspace-mount-manager.css

@@ -22,25 +22,3 @@
 .workspace-mount-manager__path code {
   overflow-wrap: anywhere;
 }
-
-.workspace-mount-manager__permission {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sigvelo-spacing-1);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-snug);
-}
-
-.workspace-mount-manager__permission > svg {
-  inline-size: var(--sigvelo-control-icon-size-sm);
-  block-size: var(--sigvelo-control-icon-size-sm);
-}
-
-.workspace-mount-manager__permission[data-permission="granted"] {
-  color: var(--sigvelo-color-success-text);
-}
-
-.workspace-mount-manager__permission[data-permission="denied"] {
-  color: var(--sigvelo-color-danger-text);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.44.0",
+  "version": "0.45.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": {
@@ -53,14 +53,14 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.2",
-    "@mcp-b/design-tokens": "0.44.0"
+    "@mcp-b/design-tokens": "0.45.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.249",
     "@cloudflare/codemode": "^0.5.1",
     "@cloudflare/shell": "^0.4.3",
-    "@cloudflare/think": "^0.15.1",
-    "@cloudflare/voice": "^0.3.5",
+    "@cloudflare/think": "^0.16.0",
+    "@cloudflare/voice": "^0.3.6",
     "@cloudflare/workers-types": "^5.20260811.1",
     "@storybook/addon-a11y": "^10.5.7",
     "@storybook/addon-docs": "^10.5.7",
@@ -78,7 +78,7 @@
     "@vitest/browser-playwright": "^4.1.10",
     "@vitest/coverage-v8": "^4.1.10",
     "@vitest/mocker": "^4.1.10",
-    "agents": "^0.20.1",
+    "agents": "^0.21.0",
     "ai": "^6.0.247",
     "cloudflare": "^7.0.0",
     "playwright": "~1.61.1",
@@ -94,11 +94,11 @@
     "@ai-sdk/react": "^3.0.230",
     "@cloudflare/codemode": "^0.5.1",
     "@cloudflare/shell": "^0.4.3",
-    "@cloudflare/think": "^0.15.1",
-    "@cloudflare/voice": "^0.3.5",
+    "@cloudflare/think": "^0.16.0",
+    "@cloudflare/voice": "^0.3.6",
     "@cloudflare/workers-types": "^5.20260715.1",
     "@tanstack/react-query": "^5.101.2",
-    "agents": "^0.20.1",
+    "agents": "^0.21.0",
     "ai": "^6.0.228",
     "cloudflare": "^7.0.0",
     "react": "19.3.0-canary-711c445b-20260722",

package/dist/{icons-Dw-im7lg.js → icons-DbrksZyY.js}

@@ -1,8 +1,8 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
+import { jsx } from "react/jsx-runtime";
 import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bookmark, Box, Brain, CalendarDays, Check, ChevronDown, ChevronRight, CircleStop, CodeXml, Copy, CornerDownRight, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Info, Keyboard, Link2, ListRestart, LoaderCircle, Mail, Maximize2, MessageSquare, Mic, Minus, Monitor, Moon, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Sun, Target, Terminal, Trash2, TriangleAlert, Wrench, X } from "lucide-react";
 import { FaSlack } from "react-icons/fa6";
 import { SiDiscord, SiModelcontextprotocol } from "react-icons/si";
-import { jsx } from "react/jsx-runtime";
 //#region src/components/_internal/icons.tsx
 function icon(Component) {
 	return function DesignSystemIcon({ size = 16, strokeWidth = 1.75, ...props }) {