@mcp-b/react-components 0.14.1 → 0.16.0

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,15 +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-2);
+}
+
+.mcp-connection-request--settled {
+  gap: var(--sigvelo-spacing-1);
+}
+
+.mcp-connection-request__body {
+  display: grid;
+  gap: var(--sigvelo-spacing-2);
+}
+
+.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-2);
+  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;
+  }
+}

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,43 @@
   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;
   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 +121,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 +181,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 +217,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/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/nanite-scene.css

@@ -5,6 +5,22 @@
   line-height: 0;
 }
 
+.nanite-mark {
+  display: inline-flex;
+  flex: 0 0 auto;
+  inline-size: 1.25rem;
+  block-size: 1.5rem;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.nanite-mark svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
 .nanite-scene--trio {
   inline-size: 200px;
   block-size: 68px;

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;
   }