@mcp-b/react-components 0.1.5 → 0.2.1

package/dist/styles/stepper.css

@@ -61,8 +61,10 @@
 }
 
 .stepper__trigger:focus-visible {
-  outline: var(--sigvelo-focus-ring);
-  outline-offset: var(--sigvelo-focus-offset);
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .stepper__trigger:disabled {
@@ -87,10 +89,10 @@
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-full);
   transition:
-    background-color 150ms ease,
-    border-color 150ms ease,
-    box-shadow 150ms ease,
-    color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .stepper__indicator[data-state="active"],
@@ -126,7 +128,7 @@
   margin-inline: 0.5rem;
   background-color: var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-full);
-  transition: background-color 150ms ease;
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .stepper__separator[data-state="completed"] {
@@ -178,8 +180,10 @@
 }
 
 .stepper__content:focus-visible {
-  outline: var(--sigvelo-focus-ring);
-  outline-offset: var(--sigvelo-focus-offset);
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
   border-radius: var(--sigvelo-radius-md);
 }
 

package/dist/styles/switch.css

@@ -12,9 +12,9 @@
   outline: none;
   cursor: pointer;
   transition:
-    background-color 150ms ease,
-    border-color 150ms ease,
-    box-shadow 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .switch:hover:not([data-disabled]) {
@@ -76,7 +76,7 @@
   box-shadow:
     0 1px 3px 0 color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
     0 1px 2px -1px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
-  transition: transform 150ms ease;
+  transition: transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .switch[data-checked] .switch__thumb {

package/dist/styles/tabs.css

@@ -46,9 +46,9 @@
   margin-block-end: -1px;
   cursor: pointer;
   transition:
-    color 150ms ease,
-    border-color 150ms ease,
-    background-color 150ms ease;
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .tabs__tab:hover:not([data-disabled]) {

package/dist/styles/task.css

@@ -12,20 +12,21 @@
   gap: 0.5rem;
   width: 100%;
   padding-block: 0.625rem;
-  padding-inline: 0.75rem;
+  padding-inline: 0.875rem;
+  /* Ploy-style: hairline outline on the canvas, plain content inside */
   background-color: transparent;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  color: var(--sigvelo-color-text);
+  border-radius: var(--sigvelo-radius-lg);
+  color: var(--sigvelo-color-text-muted);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   cursor: pointer;
   transition:
-    background-color 150ms ease,
-    border-color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .task__trigger:hover:not([data-disabled]) {
@@ -75,20 +76,13 @@
 }
 
 .task__content {
+  height: var(--collapsible-panel-height);
   overflow: hidden;
   transition:
     height 200ms ease,
     opacity 200ms ease;
 }
 
-.task__content[data-closed] {
-  height: 0;
-}
-
-.task__content[data-open] {
-  height: var(--collapsible-panel-height);
-}
-
 .task__content[data-starting-style],
 .task__content[data-ending-style] {
   height: 0;
@@ -103,12 +97,15 @@
   padding-block: 0.75rem;
   padding-inline: 1.5rem;
   list-style: none;
-  background-color: var(--sigvelo-color-surface);
+  /* Bounded so expanding never blows out the conversation scroll position */
+  max-height: 20rem;
+  overflow-y: auto;
+  background-color: transparent;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-block-start: none;
-  border-end-start-radius: var(--sigvelo-radius-md);
-  border-end-end-radius: var(--sigvelo-radius-md);
+  border-end-start-radius: var(--sigvelo-radius-lg);
+  border-end-end-radius: var(--sigvelo-radius-lg);
 }
 
 .task__item {
@@ -137,8 +134,6 @@
   padding-inline: 0.375rem;
   margin-inline: 0.125rem;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-sm);
   font-family: var(--sigvelo-font-mono);
   font-size: 0.75rem;

package/dist/styles/terminal.css

@@ -5,9 +5,7 @@
   font-family: var(--sigvelo-font-sans);
   background-color: var(--sigvelo-color-neutral-950, var(--sigvelo-color-neutral-900));
   color: var(--sigvelo-color-neutral-100);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
+  border-radius: var(--sigvelo-radius-lg);
   overflow: hidden;
 }
 

package/dist/styles/test-results.css

@@ -118,7 +118,7 @@
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   cursor: pointer;
-  transition: background-color 150ms ease;
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .test-results__suite-trigger:hover:not([data-disabled]) {
@@ -164,20 +164,13 @@
 }
 
 .test-results__suite-content {
+  height: var(--collapsible-panel-height);
   overflow: hidden;
   transition:
     height 200ms ease,
     opacity 200ms ease;
 }
 
-.test-results__suite-content[data-closed] {
-  height: 0;
-}
-
-.test-results__suite-content[data-open] {
-  height: var(--collapsible-panel-height);
-}
-
 .test-results__suite-content[data-starting-style],
 .test-results__suite-content[data-ending-style] {
   height: 0;

package/dist/styles/toast.css

@@ -89,7 +89,7 @@
   border: none;
   border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
-  transition: background-color 150ms ease;
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .toast__action:hover {
@@ -121,8 +121,8 @@
   cursor: pointer;
   opacity: 0;
   transition:
-    opacity 150ms ease,
-    background-color 150ms ease;
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .toast:hover .toast__close {

package/dist/styles/toggle-group.css

@@ -30,9 +30,9 @@
   border-radius: calc(var(--sigvelo-radius-md) - 2px);
   cursor: pointer;
   transition:
-    background-color 150ms ease,
-    color 150ms ease,
-    box-shadow 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .toggle-group--sm .toggle-group__item {

package/dist/styles/toggle.css

@@ -16,9 +16,9 @@
   border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
   transition:
-    background-color 150ms ease,
-    border-color 150ms ease,
-    color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .toggle--outline {

package/dist/styles/tool.css

@@ -4,10 +4,11 @@
   width: 100%;
   font-family: var(--sigvelo-font-sans);
   color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-surface);
+  /* Ploy-style: hairline outline on the canvas, plain content inside */
+  background-color: transparent;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
+  border-radius: var(--sigvelo-radius-lg);
   overflow: hidden;
 }
 
@@ -17,10 +18,11 @@
   gap: 0.5rem;
   width: 100%;
   padding-block: 0.625rem;
-  padding-inline: 0.75rem;
+  padding-inline: 0.875rem;
   background-color: transparent;
   border: none;
-  color: var(--sigvelo-color-text);
+  /* Muted header row, Ploy/Codex style — content carries the emphasis */
+  color: var(--sigvelo-color-text-muted);
   font-family: inherit;
   font-size: 0.8125rem;
   font-weight: var(--sigvelo-font-weight-semibold);
@@ -71,7 +73,14 @@
 .tool__header-name {
   font-family: var(--sigvelo-font-mono);
   font-size: 0.8125rem;
-  color: var(--sigvelo-color-text);
+}
+
+.tool__header-name,
+.tool__header-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .tool__header-title {
@@ -92,22 +101,13 @@
 }
 
 .tool__content {
+  height: var(--collapsible-panel-height);
   overflow: hidden;
   transition:
-    height var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized),
+    height var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
     opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
-.tool__content[data-closed] {
-  height: 0;
-  opacity: 0;
-}
-
-.tool__content[data-open] {
-  height: var(--collapsible-panel-height);
-  opacity: 1;
-}
-
 .tool__content[data-starting-style],
 .tool__content[data-ending-style] {
   height: 0;
@@ -119,9 +119,7 @@
   flex-direction: column;
   gap: 0.75rem;
   padding-block: 0.75rem;
-  padding-inline: 0.75rem;
-  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
+  padding-inline: 0.875rem;
   transition:
     transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized),
     opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
@@ -158,6 +156,11 @@
   min-width: 0;
 }
 
+/* Blend nested code into the outlined box — plain content, no panel-in-panel */
+.code-block.tool__code-block {
+  background-color: transparent;
+}
+
 .tool__code-block .code-block__content,
 .tool__code-block .code-block__content--highlighted pre.shiki,
 .tool__code-block .code-block__content--highlighted pre.shiki code {
@@ -172,8 +175,6 @@
   font-size: 0.75rem;
   color: var(--sigvelo-color-danger-text);
   background-color: var(--sigvelo-color-danger-bg-subtle);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-danger-border-subtle);
   border-radius: var(--sigvelo-radius-sm);
   white-space: pre-wrap;
 }

package/dist/styles/toolbar.css

@@ -33,8 +33,8 @@
   border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   transition:
-    background-color 150ms ease,
-    color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .toolbar__button:hover {
@@ -71,8 +71,8 @@
   text-decoration: none;
   border-radius: var(--sigvelo-radius-sm);
   transition:
-    background-color 150ms ease,
-    color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .toolbar__link:hover {

package/dist/styles/workspace-explorer.css

@@ -0,0 +1,108 @@
+.workspace-explorer {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  font-family: var(--sigvelo-font-sans);
+  color: var(--sigvelo-color-text);
+}
+
+.workspace-explorer__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.workspace-explorer__title {
+  font-size: 0.8125rem;
+  font-weight: 550;
+}
+
+.workspace-explorer__count {
+  font-size: 0.75rem;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.workspace-explorer__path {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  font-family: var(--sigvelo-font-mono);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.workspace-explorer__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-inline-start: auto;
+}
+
+.workspace-explorer__body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-height: 0;
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  overflow: auto;
+}
+
+.workspace-explorer__filter {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding-inline: 0.5rem;
+  color: var(--sigvelo-color-text-muted);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.workspace-explorer__filter:focus-within {
+  border-color: var(--sigvelo-color-focus);
+}
+
+.workspace-explorer__filter input {
+  flex: 1;
+  min-width: 0;
+  padding-block: 0.375rem;
+  border: none;
+  background: transparent;
+  color: var(--sigvelo-color-text);
+  font-family: inherit;
+  font-size: 0.8125rem;
+  outline: none;
+}
+
+.workspace-explorer__tree {
+  border: none;
+  background: transparent;
+  padding-block: 0;
+}
+
+.workspace-explorer__empty {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--sigvelo-color-text-muted);
+  text-align: center;
+}
+
+.workspace-explorer__file {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+  padding: 0.5rem 0.75rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "description": "MCP-B React components built on Base UI and shared design tokens.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -45,9 +45,9 @@
     "@streamdown/math": "^1.0.2",
     "@streamdown/mermaid": "^1.0.2",
     "anser": "^2.3.5",
-    "shiki": "^4.2.0",
+    "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.1.5"
+    "@mcp-b/design-tokens": "0.2.1"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.4.6",
@@ -62,6 +62,7 @@
     "@vitest/browser-playwright": "^4.1.9",
     "@vitest/coverage-v8": "^4.1.9",
     "@vitest/mocker": "^4.1.9",
+    "ai": "^6.0.182",
     "playwright": "^1.61.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
@@ -72,9 +73,15 @@
     "vitest": "^4.1.9"
   },
   "peerDependencies": {
+    "ai": "^6.0.182",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "ai": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "vp pack",
     "dev": "vp pack --watch",