@mcp-b/react-components 0.14.2 → 0.16.1

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

@@ -1,30 +1,49 @@
-.mcp-server-picker {
-  display: inline-flex;
+.mcp-server-picker__popup {
+  --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);
+
+  inline-size: min(46rem, calc(100dvw - 1rem));
+  max-block-size: min(28rem, calc(100dvh - 2rem));
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
 }
 
-.mcp-server-picker__trigger {
-  flex-shrink: 0;
-  color: var(--sigvelo-color-text-muted);
-  background: none;
+.mcp-server-picker__group + .mcp-server-picker__group {
+  margin-block-start: var(--sigvelo-spacing-0-5);
 }
 
-.mcp-server-picker__trigger:hover:not([data-disabled]),
-.mcp-server-picker__trigger[data-popup-open] {
+.mcp-server-picker__group-label {
+  padding-block: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-0-5);
+  padding-inline: var(--sigvelo-spacing-2);
   color: var(--sigvelo-color-text);
-  background: none;
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-leading-tight);
 }
 
-.mcp-server-picker__trigger > svg {
-  inline-size: 1rem;
-  block-size: 1rem;
+.mcp-server-picker__action-error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sigvelo-spacing-1-5);
+  margin: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-spacing-2);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-danger-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
+  color: var(--sigvelo-color-danger-text-on-subtle);
+  background-color: var(--sigvelo-color-danger-bg-subtle);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-tight);
+  opacity: 1;
+  overflow-wrap: anywhere;
 }
 
-.mcp-server-picker__popup {
-  inline-size: min(32rem, calc(100dvw - 1rem));
-  max-block-size: min(28rem, calc(100dvh - 2rem));
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-  overscroll-behavior: contain;
+.mcp-server-picker__action-error > svg {
+  flex: 0 0 auto;
 }
 
 .mcp-server-picker__row-shell {
@@ -34,23 +53,20 @@
 }
 
 .mcp-server-picker__row {
-  min-block-size: 2rem;
-  gap: 0.5rem;
-  padding-block: 0.3125rem;
-  padding-inline: 0.5rem;
   overflow: hidden;
 }
 
-.mcp-server-picker__row-shell[data-connection="connected"] .mcp-server-picker__row {
-  opacity: 1;
+.mcp-server-picker__row-shell,
+.mcp-server-picker__custom-action {
+  border-radius: var(--sigvelo-radius-sm);
 }
 
-.mcp-server-picker__row-shell[data-connection="disconnected"] .mcp-server-picker__row {
-  opacity: 0.68;
+.mcp-server-picker__row-shell:has(.mcp-server-picker__row[data-highlighted]) {
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
-.mcp-server-picker__row-shell[data-connection="disconnected"] .mcp-server-picker__description {
-  color: var(--sigvelo-color-text);
+.mcp-server-picker__row-shell[data-status="ready"] .mcp-server-picker__row {
+  opacity: 1;
 }
 
 .mcp-server-picker__icon {
@@ -58,38 +74,44 @@
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  inline-size: 1.25rem;
-  block-size: 1.25rem;
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
   color: var(--sigvelo-color-text-muted);
 }
 
-.mcp-server-picker__icon > img,
 .mcp-server-picker__icon > svg {
   display: block;
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
   object-fit: contain;
 }
 
-.mcp-server-picker__fallback-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+.mcp-server-picker__avatar {
   inline-size: 1.125rem;
   block-size: 1.125rem;
+  background-color: transparent;
   border-radius: var(--sigvelo-radius-sm);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
+}
+
+.mcp-server-picker__avatar-image,
+.mcp-server-picker__avatar-fallback {
+  border-radius: var(--sigvelo-radius-sm);
+}
+
+.mcp-server-picker__avatar-image {
+  object-fit: contain;
+}
+
+.mcp-server-picker__avatar-fallback {
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: 1;
-  text-transform: uppercase;
 }
 
 .mcp-server-picker__copy {
   display: flex;
   align-items: baseline;
-  gap: var(--sigvelo-spacing-2-5);
+  gap: var(--sigvelo-spacing-2);
   min-inline-size: 0;
 }
 
@@ -100,11 +122,22 @@
 
 .mcp-server-picker__description {
   min-inline-size: 0;
-  max-inline-size: 20rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--sigvelo-color-text);
+}
+
+.mcp-server-picker__row-state {
   color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  white-space: nowrap;
+}
+
+.mcp-server-picker__custom-action > svg,
+.mcp-server-picker__custom-action .mcp-server-picker__icon > svg {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
 }
 
 .mcp-server-picker__status-label {
@@ -149,27 +182,32 @@
   block-size: 0.875rem;
 }
 
-.mcp-server-picker__row-shell[data-status="ready"] .mcp-server-picker__row-status,
-.mcp-server-picker__row-shell[data-status="connected"] .mcp-server-picker__row-status {
+.mcp-server-picker__row-shell[data-status="ready"] .mcp-server-picker__row-status {
   color: var(--sigvelo-color-success-text-on-subtle);
 }
 
-.mcp-server-picker__row-shell[data-status="needs-auth"] .mcp-server-picker__row-status,
 .mcp-server-picker__row-shell[data-status="authenticating"] .mcp-server-picker__row-status {
   color: var(--sigvelo-color-warning-text-on-subtle);
 }
 
-.mcp-server-picker__row-shell[data-status="failed"] .mcp-server-picker__row-status {
+.mcp-server-picker__row-shell:is([data-status="failed"], [data-status="not-connected"])
+  .mcp-server-picker__row-status {
   color: var(--sigvelo-color-danger-text-on-subtle);
 }
 
-.mcp-server-picker__spinner {
-  animation: mcp-server-picker-spin 900ms linear infinite;
+.mcp-server-picker__row-shell[data-error] .mcp-server-picker__row-status {
+  color: var(--sigvelo-color-danger-text-on-subtle);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .mcp-server-picker__spinner {
-    animation: none;
+@media (any-pointer: coarse) {
+  .mcp-server-picker__popup {
+    --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
+  }
+
+  .mcp-server-picker__action {
+    inline-size: var(--sigvelo-control-height-xl);
+    block-size: var(--sigvelo-control-height-xl);
+    min-block-size: var(--sigvelo-control-height-xl);
   }
 }
 
@@ -180,28 +218,18 @@
   font-size: var(--sigvelo-text-sm);
 }
 
-@media (width < 30rem) {
-  .mcp-server-picker__copy {
-    flex-direction: column;
-    gap: 0;
-  }
-
-  .mcp-server-picker__row-shell {
-    grid-template-columns: minmax(0, 1fr);
-  }
+.mcp-server-setup-dialog__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-2);
 }
 
 @media (forced-colors: active) {
-  .mcp-server-picker__fallback-icon {
+  .mcp-server-picker__avatar-fallback {
     border: 1px solid ButtonText;
   }
-}
 
-@keyframes mcp-server-picker-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
+  .mcp-server-picker__row-shell:has(.mcp-server-picker__row[data-highlighted]) {
+    outline: 1px solid Highlight;
   }
 }

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/message.css

@@ -33,8 +33,8 @@
 }
 
 .message[data-from="user"] .message__content {
-  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-text);
 }
 
 .message[data-from="assistant"] .message__content {
@@ -158,48 +158,9 @@
   box-shadow: var(--sigvelo-shadow-sm);
 }
 
-.message__edit-label {
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-semibold);
-}
-
 .message__edit-textarea {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 6rem;
-  max-height: 18rem;
-  padding-block: var(--sigvelo-spacing-2-5);
-  padding-inline: var(--sigvelo-spacing-3);
-  resize: vertical;
-  font: inherit;
-  font-size: var(--sigvelo-text-sm);
-  line-height: 1.55;
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-canvas);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-}
-
-.message__edit-textarea:focus-visible {
-  outline: none;
-  border-color: var(--sigvelo-color-focus);
-  box-shadow: var(--sigvelo-recipe-focus-shadow-subtle);
-}
-
-.message__edit-textarea[aria-invalid="true"] {
-  border-color: var(--sigvelo-color-danger-border);
-}
-
-.message__edit-textarea:disabled {
-  cursor: wait;
-  opacity: 0.65;
-}
-
-.message__edit-error {
-  margin: 0;
-  font-size: var(--sigvelo-text-sm);
-  color: var(--sigvelo-color-danger-text);
+  min-block-size: 6rem;
+  max-block-size: 18rem;
 }
 
 .message__edit-actions {

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/pricing-page.css

@@ -1,8 +1,10 @@
 .pricing-page {
+  box-sizing: border-box;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 3rem 1.5rem;
+  padding: clamp(1rem, 4%, 3rem) clamp(0.75rem, 3%, 1.5rem);
+  container-type: inline-size;
 }
 
 /* Header */
@@ -41,6 +43,10 @@
   gap: 0.5rem;
 }
 
+.pricing-page__toggle-label {
+  font-size: var(--sigvelo-text-xs);
+}
+
 .pricing-page__switch-container {
   display: flex;
   align-items: center;
@@ -54,11 +60,15 @@
   transition: color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
-.pricing-page__period-label--active {
+.pricing-page__period-label[data-active] {
   font-weight: 600;
   color: var(--sigvelo-color-text);
 }
 
+.pricing-page__billing-badge {
+  margin-inline-start: var(--sigvelo-spacing-1-5);
+}
+
 /* Plans Grid */
 
 .pricing-page__plans {
@@ -75,7 +85,7 @@
   padding: 1.5rem;
 }
 
-.pricing-page__plan--popular {
+.pricing-page__plan[data-popular] {
   border-color: var(--sigvelo-color-primary-bg);
   box-shadow:
     0 4px 6px -1px color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 90%),
@@ -160,7 +170,7 @@
   color: var(--sigvelo-color-text);
 }
 
-.pricing-page__feature--disabled {
+.pricing-page__feature:not([data-included]) {
   color: var(--sigvelo-color-text-muted);
   text-decoration: line-through;
 }
@@ -175,7 +185,7 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.pricing-page__feature-icon--included {
+.pricing-page__feature[data-included] .pricing-page__feature-icon {
   color: var(--sigvelo-color-success-bg);
 }
 
@@ -189,22 +199,6 @@
   margin-left: 0.25rem;
 }
 
-.pricing-page__feature-info {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  background: none;
-  border: none;
-  color: var(--sigvelo-color-text-muted);
-  cursor: pointer;
-  transition: color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.pricing-page__feature-info:hover {
-  color: var(--sigvelo-color-text);
-}
-
 /* Calculator */
 
 .pricing-page__calculator {
@@ -232,6 +226,10 @@
   margin-bottom: 0.5rem;
 }
 
+.pricing-page__calculator-separator {
+  margin-block: 1.5rem;
+}
+
 .pricing-page__calculator-labels {
   display: flex;
   justify-content: space-between;
@@ -354,7 +352,7 @@
   padding: 0.25rem 0;
 }
 
-.pricing-page__confirm-row--savings {
+.pricing-page__confirm-row[data-savings] {
   color: var(--sigvelo-color-success-bg);
   font-weight: 500;
 }
@@ -367,11 +365,7 @@
 
 /* Responsive */
 
-@media (max-width: 768px) {
-  .pricing-page {
-    padding: 2rem 1rem;
-  }
-
+@container (max-width: 768px) {
   .pricing-page__title {
     font-size: 1.75rem;
   }