@mcp-b/react-components 0.14.2 → 0.16.1

package/dist/styles/chain-of-thought.css

@@ -9,10 +9,10 @@
 .chain-of-thought__steps {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-2-5);
+  gap: var(--sigvelo-spacing-1-5);
   margin: 0;
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-2);
   margin-inline-start: 1rem;
   border-inline-start: var(--sigvelo-border-style) 2px var(--sigvelo-color-neutral-border-subtle);
   list-style: none;
@@ -21,7 +21,7 @@
 .chain-of-thought__step {
   display: flex;
   align-items: flex-start;
-  gap: var(--sigvelo-spacing-2-5);
+  gap: var(--sigvelo-spacing-1-5);
   position: relative;
 }
 
@@ -151,7 +151,7 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  padding: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-2);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);

package/dist/styles/checkbox-group.css

@@ -4,6 +4,75 @@
   gap: 0.5rem;
 }
 
+.checkbox-group[data-layout="grid"] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+  align-items: stretch;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.checkbox-group__item {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  min-block-size: 2.75rem;
+  padding-inline: var(--sigvelo-spacing-3);
+  border-radius: var(--sigvelo-radius-md);
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-sm);
+  cursor: pointer;
+}
+
+.checkbox-group__item:hover,
+.checkbox-group__item:has(.checkbox[data-checked]) {
+  background: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.checkbox-group__item:has(.checkbox:focus-visible) {
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+.checkbox-group__icon {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.checkbox-group__icon svg {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+.checkbox-group__content {
+  min-inline-size: 0;
+  flex: 1 1 auto;
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.checkbox-group__title,
+.checkbox-group__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.checkbox-group__title {
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.checkbox-group__description {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.checkbox-group__trailing {
+  min-inline-size: 0;
+  flex: 0 0 auto;
+  color: var(--sigvelo-color-text-muted);
+}
+
 .checkbox-group[data-disabled] {
   opacity: var(--sigvelo-recipe-disabled-opacity);
   pointer-events: none;

package/dist/styles/codex-model-selector.css

@@ -95,7 +95,7 @@
 
 .codex-model-selector__menu {
   --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
-  --sigvelo-recipe-row-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-row-font-size: var(--sigvelo-text-compact);
   --sigvelo-recipe-row-radius: var(--sigvelo-radius-md);
 
   inline-size: min(18rem, calc(100vi - var(--sigvelo-spacing-8)));
@@ -104,10 +104,10 @@
 
 .codex-model-selector__submenu {
   --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
-  --sigvelo-recipe-row-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-row-font-size: var(--sigvelo-text-compact);
 
   inline-size: min(18rem, calc(100vi - var(--sigvelo-spacing-8)));
-  padding: var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-spacing-1);
 }
 
 .codex-model-selector__submenu--model {

package/dist/styles/combobox.css

@@ -14,7 +14,8 @@
 }
 
 .combobox__item[data-selected] {
-  font-weight: var(--sigvelo-font-weight-semibold);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .combobox__item-indicator {

package/dist/styles/context-menu.css

@@ -42,5 +42,5 @@
 }
 
 .context-menu__label {
-  padding-block: 0.5rem 0.25rem;
+  padding-block: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-0-5);
 }

package/dist/styles/description-list.css

@@ -0,0 +1,50 @@
+.description-list {
+  display: grid;
+  gap: var(--sigvelo-spacing-2);
+  margin: 0;
+}
+
+.description-list__item {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.description-list__term {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.description-list__details {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-family: var(--sigvelo-font-mono);
+  font-size: var(--sigvelo-text-xs);
+  text-align: end;
+}
+
+.description-list[data-variant="divided"] {
+  gap: 0;
+  border-block: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.description-list[data-variant="divided"] .description-list__item {
+  padding-block: var(--sigvelo-spacing-2-5);
+}
+
+.description-list[data-variant="divided"] .description-list__item:not(:last-child) {
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.description-list[data-variant="divided"] .description-list__term {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+}
+
+.description-list[data-variant="divided"] .description-list__term svg {
+  inline-size: 1rem;
+  block-size: 1rem;
+  flex: 0 0 auto;
+}

package/dist/styles/dialog.css

@@ -10,7 +10,7 @@
 }
 
 .dialog__popup {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-6);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
 
   position: fixed;
   inset-block-start: 50%;
@@ -57,32 +57,32 @@
 }
 
 .dialog__title {
-  font-size: var(--sigvelo-text-lg);
-  font-weight: var(--sigvelo-font-weight-bold);
+  font-size: var(--sigvelo-text-base);
+  font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.25;
   color: var(--sigvelo-color-text);
-  margin-block-end: 0.5rem;
+  margin-block-end: var(--sigvelo-spacing-1);
 }
 
 .dialog__description {
-  font-size: var(--sigvelo-text-sm);
-  line-height: 1.5;
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-leading-normal);
   color: var(--sigvelo-color-text-muted);
-  margin-block-end: 1rem;
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .dialog__header {
   display: grid;
-  gap: 0.5rem;
-  margin-block-end: 1rem;
+  gap: var(--sigvelo-spacing-1);
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .dialog__footer {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: var(--sigvelo-spacing-3);
-  margin-block-start: 1.5rem;
+  gap: var(--sigvelo-spacing-2);
+  margin-block-start: var(--sigvelo-spacing-4);
 }
 
 .dialog__close {

package/dist/styles/field.css

@@ -2,7 +2,7 @@
   display: flex;
   width: 100%;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 .field:is([data-invalid="true"], [data-invalid=""]) .field__label,
@@ -53,9 +53,9 @@
 .field__label {
   display: flex;
   width: fit-content;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-1-5);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1;
   color: var(--sigvelo-color-text);
@@ -70,7 +70,7 @@
 }
 
 .field__label:has(> [data-slot="field"]) > [data-slot="field"] {
-  padding: 1rem;
+  padding: var(--sigvelo-spacing-3);
 }
 
 .field__label:has(> [data-slot="field"]):has([data-state="checked"], [data-checked]) {
@@ -119,7 +119,7 @@
 }
 
 .field-set {
-  gap: 1.5rem;
+  gap: var(--sigvelo-spacing-4);
   min-inline-size: 0;
   margin: 0;
   padding: 0;
@@ -127,21 +127,21 @@
 }
 
 .field-set:has(> [data-slot="checkbox-group"], > [data-slot="radio-group"]) {
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
 }
 
 .field-group {
   container-type: inline-size;
   width: 100%;
-  gap: 1.75rem;
+  gap: var(--sigvelo-spacing-4);
 }
 
 .field-group > .field-group {
-  gap: 1rem;
+  gap: var(--sigvelo-spacing-3);
 }
 
 .field-group:is([data-slot="checkbox-group"], [data-slot="radio-group"]) {
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
 }
 
 .field-content {
@@ -158,20 +158,20 @@
 }
 
 .field-legend {
-  margin-block-end: var(--sigvelo-spacing-3);
-  font-size: var(--sigvelo-text-base);
+  margin-block-end: var(--sigvelo-spacing-2);
+  font-size: var(--sigvelo-text-sm);
 }
 
 .field-legend[data-variant="label"] {
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
 }
 
 .field-title {
   display: flex;
   width: fit-content;
   align-items: center;
-  gap: 0.5rem;
-  font-size: var(--sigvelo-text-sm);
+  gap: var(--sigvelo-spacing-1-5);
+  font-size: var(--sigvelo-text-compact);
 }
 
 .field-separator {

package/dist/styles/fieldset.css

@@ -1,19 +1,30 @@
 .fieldset {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  padding: 1.5rem;
+  gap: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-4);
   margin: 0;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
   border-radius: var(--sigvelo-radius-md);
 }
 
+.fieldset[data-variant="plain"] {
+  padding: 0;
+  border: 0;
+}
+
 .fieldset__legend {
   padding: 0 0.5rem;
   margin: 0 -0.5rem;
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-bold);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
 }
+
+.fieldset__description {
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-compact);
+}

package/dist/styles/index.css

@@ -12,7 +12,10 @@
 
 /* Components */
 @import "./accordion.css" layer(components);
+@import "./activity-header.css" layer(components);
 @import "./activity.css" layer(components);
+@import "./agent-activity-preview.css" layer(components);
+@import "./agent-attention.css" layer(components);
 @import "./agent-connection.css" layer(components);
 @import "./agent-chat.css" layer(components);
 @import "./alert-dialog.css" layer(components);
@@ -44,6 +47,7 @@
 @import "./number-field.css" layer(components);
 @import "./popover.css" layer(components);
 @import "./mcp-server-picker.css" layer(components);
+@import "./mcp-connection-request.css" layer(components);
 @import "./preview-card.css" layer(components);
 @import "./progress.css" layer(components);
 @import "./radio.css" layer(components);
@@ -55,10 +59,15 @@
 @import "./stepper.css" layer(components);
 @import "./switch.css" layer(components);
 @import "./tabs.css" layer(components);
+@import "./textarea.css" layer(components);
+@import "./theme-mode-control.css" layer(components);
 @import "./toast.css" layer(components);
 @import "./toggle.css" layer(components);
 @import "./toggle-group.css" layer(components);
 @import "./toolbar.css" layer(components);
+@import "./app-top-bar.css" layer(components);
+@import "./app-frame.css" layer(components);
+@import "./description-list.css" layer(components);
 @import "./tooltip.css" layer(components);
 
 /* AI Chat & Code Components */
@@ -66,6 +75,7 @@
 @import "./streamdown.css" layer(components);
 @import "./artifact.css" layer(components);
 @import "./browser-live-view.css" layer(components);
+@import "./browser-control-overlay.css" layer(components);
 @import "./browser-run-panel.css" layer(components);
 @import "./browser-replay.css" layer(components);
 @import "./chain-of-thought.css" layer(components);
@@ -82,16 +92,18 @@
 @import "./prompt-input.css" layer(components);
 @import "./queue.css" layer(components);
 @import "./reasoning.css" layer(components);
+@import "./resizable-side-panel.css" layer(components);
+@import "./responsive-sidebar-shell.css" layer(components);
 @import "./sources.css" layer(components);
 @import "./subagent-run.css" layer(components);
 @import "./task.css" layer(components);
 @import "./terminal.css" layer(components);
 @import "./test-results.css" layer(components);
+@import "./think-execution-status.css" layer(components);
 @import "./think-execution-workbench.css" layer(components);
-@import "./think-resize-handle.css" layer(components);
 @import "./think-full-app.css" layer(components);
+@import "./think-routine-library.css" layer(components);
 @import "./think-thread-picker.css" layer(components);
-@import "./think-thread-shell.css" layer(components);
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);
 

package/dist/styles/mcp-connection-request.css

@@ -0,0 +1,60 @@
+.mcp-connection-request {
+  inline-size: min(28rem, 100%);
+  margin-block: var(--sigvelo-spacing-1);
+}
+
+.mcp-connection-request--settled {
+  gap: var(--sigvelo-spacing-1);
+}
+
+.mcp-connection-request__body {
+  display: grid;
+  gap: var(--sigvelo-spacing-1-5);
+}
+
+.mcp-connection-request__reason {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-leading-normal);
+  text-wrap: pretty;
+}
+
+.mcp-connection-request__endpoint {
+  min-inline-size: 0;
+  padding: var(--sigvelo-spacing-1-5);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-sm);
+  background: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.mcp-connection-request__endpoint-item {
+  min-inline-size: 0;
+  align-items: baseline;
+  gap: var(--sigvelo-spacing-2);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.mcp-connection-request__endpoint-details {
+  min-inline-size: 0;
+}
+
+.mcp-connection-request__error {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1-5);
+  color: var(--sigvelo-color-danger-text);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-normal);
+  overflow-wrap: anywhere;
+}
+
+.mcp-connection-request__error > svg {
+  flex: 0 0 auto;
+}
+
+@media (forced-colors: active) {
+  .mcp-connection-request__endpoint {
+    border-color: CanvasText;
+  }
+}