@mcp-b/react-components 0.16.0 → 0.16.1

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

@@ -1,6 +1,6 @@
 .mcp-connection-request {
   inline-size: min(28rem, 100%);
-  margin-block: var(--sigvelo-spacing-2);
+  margin-block: var(--sigvelo-spacing-1);
 }
 
 .mcp-connection-request--settled {
@@ -9,7 +9,7 @@
 
 .mcp-connection-request__body {
   display: grid;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 .mcp-connection-request__reason {
@@ -21,7 +21,7 @@
 
 .mcp-connection-request__endpoint {
   min-inline-size: 0;
-  padding: var(--sigvelo-spacing-2);
+  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);

package/dist/styles/mcp-server-picker.css

@@ -89,6 +89,7 @@
 .mcp-server-picker__avatar {
   inline-size: 1.125rem;
   block-size: 1.125rem;
+  background-color: transparent;
   border-radius: var(--sigvelo-radius-sm);
 }
 

package/dist/styles/menu.css

@@ -27,7 +27,7 @@
 }
 
 .menu__group-label {
-  padding-block: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-0-5);
 }
 
 .menu__arrow {

package/dist/styles/model-selector.css

@@ -41,8 +41,8 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 1rem;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -90,7 +90,7 @@
 
 .model-selector__group-label {
   padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: 1rem;
+  padding-inline: var(--sigvelo-spacing-3);
   font-size: var(--sigvelo-text-2xs);
   font-weight: var(--sigvelo-font-weight-bold);
   text-transform: uppercase;
@@ -102,14 +102,15 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  gap: var(--sigvelo-spacing-2-5);
+  gap: var(--sigvelo-spacing-1-5);
   width: 100%;
-  padding-block: 0.5rem;
-  padding-inline: 1rem;
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: var(--sigvelo-spacing-0-5);
+  padding-inline: var(--sigvelo-spacing-3);
   border-radius: 0;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-normal);
   text-align: start;
   transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
@@ -126,9 +127,8 @@
 }
 
 .model-selector__item[data-selected] {
-  background-color: var(--sigvelo-color-primary-bg-subtle);
-  color: var(--sigvelo-color-primary-text);
-  font-weight: var(--sigvelo-font-weight-semibold);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .model-selector__item:is(:disabled, [data-disabled]) {
@@ -137,13 +137,19 @@
 }
 
 .model-selector__empty {
-  padding-block: 1.5rem;
-  padding-inline: 1rem;
+  padding-block: var(--sigvelo-spacing-4);
+  padding-inline: var(--sigvelo-spacing-3);
   text-align: center;
   font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text-muted);
 }
 
+@media (any-pointer: coarse) {
+  .model-selector__item {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
 /* Hide empty state when any group sibling has visible items. */
 .model-selector__list:has(.model-selector__group) .model-selector__empty {
   display: none;

package/dist/styles/popover.css

@@ -14,7 +14,7 @@
 }
 
 .popover__popup {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-3);
 
   min-width: 12rem;
   max-inline-size: min(20rem, var(--available-width));
@@ -51,24 +51,24 @@
 }
 
 .popover__title {
-  margin-block-end: 0.5rem;
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-bold);
+  margin-block-end: var(--sigvelo-spacing-1);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.25;
   color: var(--sigvelo-color-text);
 }
 
 .popover__description {
   margin: 0;
-  font-size: var(--sigvelo-text-sm);
-  line-height: 1.5;
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-normal);
   color: var(--sigvelo-color-text-muted);
 }
 
 .popover__header {
   display: grid;
-  gap: 0.5rem;
-  margin-block-end: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-1);
+  margin-block-end: var(--sigvelo-spacing-2);
 }
 
 .popover__close {
@@ -77,7 +77,7 @@
   justify-content: center;
   padding-block: 0.25rem;
   padding-inline: 0.5rem;
-  margin-block-start: var(--sigvelo-spacing-3);
+  margin-block-start: var(--sigvelo-spacing-2);
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);

package/dist/styles/preview-card.css

@@ -21,7 +21,7 @@
 }
 
 .preview-card__popup {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-3);
 
   min-inline-size: 12.5rem;
   max-inline-size: min(20rem, var(--available-width));

package/dist/styles/recipes.css

@@ -4,10 +4,10 @@
  * supported variation. Consumers can override these variables by inheritance.
  */
 :where(:root, [data-theme="light"], [data-theme="dark"]) {
-  --sigvelo-recipe-control-height: var(--sigvelo-control-height-md);
-  --sigvelo-recipe-control-padding-inline: var(--sigvelo-spacing-3);
-  --sigvelo-recipe-control-gap: var(--sigvelo-spacing-2);
-  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-control-gap: var(--sigvelo-spacing-1-5);
+  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-sm);
   --sigvelo-recipe-control-radius: var(--sigvelo-radius-md);
   --sigvelo-recipe-field-background: var(--sigvelo-color-canvas);
   --sigvelo-recipe-field-border: var(--sigvelo-color-neutral-border-muted);
@@ -25,14 +25,32 @@
   --sigvelo-recipe-surface-radius: var(--sigvelo-radius-md);
   --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-lg);
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1);
-  --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-row-padding-block: var(--sigvelo-spacing-1);
-  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-3);
-  --sigvelo-recipe-row-gap: var(--sigvelo-spacing-2);
-  --sigvelo-recipe-row-font-size: var(--sigvelo-text-sm);
+  --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xs);
+  --sigvelo-recipe-row-padding-block: var(--sigvelo-spacing-0-5);
+  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-row-gap: var(--sigvelo-spacing-1-5);
+  --sigvelo-recipe-row-font-size: var(--sigvelo-text-compact);
   --sigvelo-recipe-row-radius: var(--sigvelo-radius-sm);
 }
 
+@media (any-pointer: coarse) {
+  :where(:root, [data-theme="light"], [data-theme="dark"]) {
+    --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
+  }
+
+  :where(
+    [data-slot="input"],
+    [data-slot="select-trigger"],
+    [data-slot="combobox-input"],
+    [data-slot="autocomplete-input"],
+    [data-slot="field-control"],
+    [data-slot="number-field-input"],
+    [data-slot="toolbar-input"]
+  ) {
+    block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
 :where(
   [data-slot="input"],
   [data-slot="textarea"],

package/dist/styles/select.css

@@ -58,8 +58,8 @@
 }
 
 .select__option[data-selected] {
-  background-color: var(--sigvelo-color-primary-bg);
-  color: var(--sigvelo-color-primary-text-on-bg);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .select__item-indicator {
@@ -77,7 +77,7 @@
 }
 
 .select__group-label {
-  padding-block: 0.5rem 0.25rem;
+  padding-block: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-0-5);
 }
 
 .select__scroll-button {

package/dist/styles/sources.css

@@ -14,9 +14,9 @@
 .sources__list {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-1-5);
+  gap: var(--sigvelo-spacing-1);
   margin: 0;
-  padding-block: 0.5rem;
+  padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: 0;
   list-style: none;
 }
@@ -28,9 +28,9 @@
 .sources__link {
   display: flex;
   align-items: flex-start;
-  gap: var(--sigvelo-spacing-2-5);
-  padding-block: 0.5rem;
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-2);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -67,7 +67,7 @@
 }
 
 .sources__link-title {
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   overflow: hidden;

package/dist/styles/subagent-run.css

@@ -120,14 +120,14 @@
 .subagent-run__content-inner {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-2);
   min-inline-size: min(30rem, calc(100vw - var(--sigvelo-spacing-8)));
   margin-block-start: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-spacing-2);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-lg);
+  border-radius: var(--sigvelo-radius-md);
   background-color: var(--sigvelo-color-surface);
 }
 

package/dist/styles/task.css

@@ -9,18 +9,19 @@
 .task__trigger {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-1-5);
   width: 100%;
-  padding-block: var(--sigvelo-spacing-2-5);
-  padding-inline: 0.875rem;
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: var(--sigvelo-spacing-0-5);
+  padding-inline: var(--sigvelo-spacing-2);
   /* 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-lg);
+  border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text-muted);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   cursor: pointer;
@@ -65,8 +66,8 @@
   flex-direction: column;
   gap: var(--sigvelo-spacing-1-5);
   margin: 0;
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 1.5rem;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
   list-style: none;
   /* Bounded so expanding never blows out the conversation scroll position */
   max-height: 20rem;
@@ -75,8 +76,8 @@
   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-lg);
-  border-end-end-radius: var(--sigvelo-radius-lg);
+  border-end-start-radius: var(--sigvelo-radius-md);
+  border-end-end-radius: var(--sigvelo-radius-md);
 }
 
 .task__item {
@@ -89,7 +90,7 @@
 .task__item::before {
   content: "";
   position: absolute;
-  inset-inline-start: -0.875rem;
+  inset-inline-start: calc(-1 * var(--sigvelo-spacing-2));
   inset-block-start: var(--sigvelo-spacing-2-5);
   width: 0.3125rem;
   height: 0.3125rem;
@@ -97,6 +98,12 @@
   background-color: var(--sigvelo-color-neutral-border-muted);
 }
 
+@media (any-pointer: coarse) {
+  .task__trigger {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
 .task__file {
   display: inline-flex;
   align-items: center;

package/dist/styles/test-results.css

@@ -14,9 +14,9 @@
 .test-results__header {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-2-5);
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 0.875rem;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -106,10 +106,11 @@
 .test-results__suite-trigger {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-1-5);
   width: 100%;
-  padding-block: 0.5rem;
-  padding-inline: 0.875rem;
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: var(--sigvelo-spacing-0-5);
+  padding-inline: var(--sigvelo-spacing-2);
   background-color: transparent;
   border: none;
   color: var(--sigvelo-color-text);
@@ -174,9 +175,9 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.4375rem;
-  padding-inline: 1.5rem;
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-4);
   font-size: var(--sigvelo-text-compact);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -236,7 +237,13 @@
 
 .test-results__error {
   margin-block-start: var(--sigvelo-spacing-1-5);
-  margin-inline-start: 1.5rem;
+  margin-inline-start: var(--sigvelo-spacing-4);
+}
+
+@media (any-pointer: coarse) {
+  .test-results__suite-trigger {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
 }
 
 .test-results__error-text {

package/dist/styles/textarea.css

@@ -2,7 +2,7 @@
   inline-size: 100%;
   block-size: auto;
   min-block-size: 5rem;
-  padding-block: var(--sigvelo-spacing-2-5);
+  padding-block: var(--sigvelo-spacing-2);
   line-height: var(--sigvelo-leading-relaxed);
 }
 

package/dist/styles/think-execution-workbench.css

@@ -52,7 +52,7 @@
 .think-execution-detail {
   display: grid;
   align-content: start;
-  gap: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-spacing-3);
   min-inline-size: 0;
 }
 
@@ -66,8 +66,8 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
-  min-block-size: 3rem;
-  padding-inline: 0.875rem;
+  min-block-size: var(--sigvelo-control-height-lg);
+  padding-inline: var(--sigvelo-spacing-3);
 }
 
 .think-execution-workbench__list-header h3 {
@@ -86,7 +86,7 @@
 
 .think-execution-workbench__list {
   margin: 0;
-  padding: 0.25rem var(--sigvelo-spacing-3) var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
   list-style: none;
   display: grid;
 }
@@ -115,12 +115,12 @@
 
 .think-execution-workbench__run {
   min-inline-size: 0;
-  min-block-size: 4.25rem;
+  min-block-size: 3.5rem;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
-  gap: var(--sigvelo-spacing-2-5);
-  padding-block: var(--sigvelo-spacing-2-5);
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: 0.25rem;
   border-radius: inherit;
   text-align: start;
@@ -193,8 +193,8 @@
 .think-execution-workbench__detail {
   display: grid;
   align-content: start;
-  gap: 1rem;
-  padding: 1rem;
+  gap: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-3);
   background: var(--sigvelo-color-surface);
 }
 

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

@@ -1,4 +1,8 @@
 .think-full-app {
+  --think-full-app-header-block-size: calc(
+    var(--sigvelo-control-height-xs) + var(--sigvelo-spacing-2) + env(safe-area-inset-top, 0px)
+  );
+
   position: relative;
   block-size: 100%;
   min-block-size: 32rem;
@@ -13,7 +17,7 @@
 }
 
 .think-full-app[data-has-workbench-topbar="true"] {
-  grid-template-rows: calc(2.75rem + env(safe-area-inset-top, 0px)) minmax(0, 1fr);
+  grid-template-rows: var(--think-full-app-header-block-size) minmax(0, 1fr);
 }
 
 .think-full-app[data-has-workbench="false"] {
@@ -45,6 +49,10 @@
   z-index: 20;
 }
 
+.think-full-app > .think-full-app__app-bar[data-compact-only="true"] {
+  display: none;
+}
+
 .think-full-app__chat-surface {
   grid-column: 1;
   grid-row: 1;
@@ -121,7 +129,7 @@
 }
 
 .think-full-app[data-has-workbench-topbar="true"] .think-full-app__resizer {
-  inset-block-start: 2.75rem;
+  inset-block-start: var(--think-full-app-header-block-size);
 }
 
 .think-full-app__workbench-slot,
@@ -143,6 +151,16 @@
   );
 }
 
+.think-full-app__workbench.workspace-explorer {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.think-full-app__embedded-view-switch {
+  flex: 0 0 auto;
+}
+
 .think-full-app__workbench-view-switch {
   margin-inline-start: auto;
 }
@@ -159,13 +177,25 @@
   }
 
   .think-full-app[data-has-workbench-topbar="true"] {
-    grid-template-rows: calc(2.75rem + env(safe-area-inset-top, 0px)) minmax(0, 1fr);
+    grid-template-rows: var(--think-full-app-header-block-size) minmax(0, 1fr);
+  }
+
+  .think-full-app[data-has-compact-app-bar="true"] {
+    grid-template-rows: var(--think-full-app-header-block-size) minmax(0, 1fr);
+  }
+
+  .think-full-app > .think-full-app__app-bar[data-compact-only="true"] {
+    display: grid;
   }
 
   .think-full-app__workbench-view-switch {
     display: none;
   }
 
+  .think-full-app__embedded-view-switch {
+    display: none;
+  }
+
   .think-full-app__mobile-view-switch {
     display: flex;
   }
@@ -229,6 +259,13 @@
     grid-row: 2;
   }
 
+  .think-full-app[data-has-compact-app-bar="true"][data-mobile-view="workbench"]
+    .think-full-app__workbench-slot,
+  .think-full-app[data-has-compact-app-bar="true"][data-mobile-view="workbench"]
+    .think-full-app__workbench {
+    grid-row: 2;
+  }
+
   .think-full-app__aside {
     display: contents;
     border-inline-start: 0;
@@ -242,6 +279,11 @@
     display: grid;
   }
 
+  .think-full-app[data-has-compact-app-bar="true"][data-mobile-view="chat"]
+    .think-full-app__chat-surface {
+    grid-row: 2;
+  }
+
   .think-full-app__chat,
   .think-full-app__chat-inner {
     --agent-chat-content-max-inline-size: 34rem;