@mcp-b/react-components 0.16.0 → 0.17.0

package/dist/styles/agent-chat.css

@@ -74,39 +74,6 @@
   margin-inline: auto;
 }
 
-.agent-chat__add-menu {
-  --sigvelo-recipe-surface-radius: var(--sigvelo-radius-xl);
-  --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-xl);
-  --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-2);
-  --sigvelo-recipe-row-gap: var(--sigvelo-spacing-2-5);
-  --sigvelo-recipe-row-font-size: var(--sigvelo-text-sm);
-  --sigvelo-recipe-row-radius: var(--sigvelo-radius-md);
-
-  inline-size: min(46rem, calc(100dvw - 1rem));
-  max-block-size: min(28rem, calc(100dvh - 2rem));
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-gutter: stable;
-}
-
-.agent-chat__add-menu-group-label {
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-2);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-normal);
-  line-height: var(--sigvelo-leading-tight);
-}
-
-@media (any-pointer: coarse) {
-  .agent-chat__add-menu {
-    --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
-  }
-}
-
 /* Transient status pill between transcript and composer (recovery, errors). */
 .agent-chat__notice {
   display: flex;
@@ -174,14 +141,6 @@
   block-size: var(--sigvelo-text-sm);
 }
 
-.agent-chat__queued-text {
-  min-inline-size: 0;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .agent-chat__queued-action {
   display: inline-flex;
   align-items: center;

package/dist/styles/agent-connection.css

@@ -1,13 +1,13 @@
 .agent-connect {
   display: grid;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
   min-inline-size: 0;
   color: var(--sigvelo-color-text);
 }
 
 .agent-connect__header {
   display: flex;
-  gap: 0.65rem;
+  gap: var(--sigvelo-spacing-2);
   align-items: flex-start;
   min-inline-size: 0;
 }
@@ -16,8 +16,8 @@
   display: grid;
   flex: 0 0 auto;
   place-items: center;
-  inline-size: 2rem;
-  block-size: 2rem;
+  inline-size: var(--sigvelo-control-height-xs);
+  block-size: var(--sigvelo-control-height-xs);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-primary-border-muted);
   border-radius: var(--sigvelo-radius-md);
@@ -34,8 +34,8 @@
 .agent-connect__title-group :where(h2, h3) {
   margin: 0;
   color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-base);
-  font-weight: var(--sigvelo-font-weight-bold);
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.2;
   letter-spacing: 0;
 }
@@ -62,18 +62,6 @@
   background: var(--sigvelo-color-neutral-bg-subtle);
 }
 
-.agent-connect__legend {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  white-space: nowrap;
-  border: 0;
-  clip: rect(0 0 0 0);
-}
-
 .agent-connect__target {
   display: inline-flex;
   align-items: center;
@@ -141,14 +129,14 @@
 
 .agent-connect__mcp-form {
   display: grid;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
   min-inline-size: 0;
 }
 
 .agent-connect__mcp-form-actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 .agent-connect__mcp-form-status {
@@ -168,7 +156,7 @@
 .agent-connect-popover {
   inline-size: min(36rem, calc(100dvi - 1.5rem));
   max-inline-size: min(36rem, calc(100dvi - 1.5rem));
-  padding: 0.875rem;
+  padding: var(--sigvelo-spacing-3);
 }
 
 @media (width <= 40rem) {

package/dist/styles/agent-tool-detail.css

@@ -0,0 +1,54 @@
+.agent-tool-detail {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  min-inline-size: 0;
+  block-size: 100%;
+  background-color: var(--sigvelo-color-surface);
+  color: var(--sigvelo-color-text);
+}
+
+.agent-tool-detail__title {
+  margin: 0;
+  font: inherit;
+}
+
+.agent-tool-detail__run-state {
+  grid-row: 2;
+  display: grid;
+  gap: var(--sigvelo-spacing-2);
+  min-inline-size: 0;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
+  border-block-end: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.agent-tool-detail__error,
+.agent-tool-detail__summary {
+  min-inline-size: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.5;
+}
+
+.agent-tool-detail__error {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.agent-tool-detail__chat {
+  grid-row: 3;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+
+.agent-tool-detail__chat > .agent-chat {
+  block-size: 100%;
+}
+
+@media (forced-colors: active) {
+  .agent-tool-detail__run-state {
+    border-color: CanvasText;
+  }
+}

package/dist/styles/alert-dialog.css

@@ -29,7 +29,7 @@
 }
 
 .alert-dialog__popup {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-6);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
 
   position: fixed;
   inset-block-start: 50%;
@@ -67,37 +67,37 @@
 }
 
 .alert-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: 0 0 0.5rem;
+  margin: 0 0 var(--sigvelo-spacing-1);
   text-wrap: balance;
 }
 
 .alert-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: 0 0 1.5rem;
+  margin: 0 0 var(--sigvelo-spacing-4);
   text-wrap: pretty;
 }
 
 .alert-dialog__header {
   display: grid;
-  gap: 0.5rem;
-  margin-block-end: 1rem;
+  gap: var(--sigvelo-spacing-1);
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .alert-dialog__footer {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
 }
 
 .alert-dialog__media {
-  margin-block-end: 1rem;
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .alert-dialog__action {

package/dist/styles/app-top-bar.css

@@ -1,8 +1,10 @@
 .app-top-bar {
+  --app-top-bar-block-size: calc(var(--sigvelo-control-height-xs) + var(--sigvelo-spacing-2));
+
   box-sizing: border-box;
   inline-size: 100%;
   min-inline-size: 0;
-  min-block-size: calc(2.75rem + env(safe-area-inset-top, 0px));
+  min-block-size: calc(var(--app-top-bar-block-size) + env(safe-area-inset-top, 0px));
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
@@ -51,10 +53,10 @@
 .app-top-bar__button {
   box-sizing: border-box;
   flex: 0 0 auto;
-  inline-size: 2rem;
-  min-inline-size: 2rem;
-  block-size: 2rem;
-  min-block-size: 2rem;
+  inline-size: var(--sigvelo-control-height-xs);
+  min-inline-size: var(--sigvelo-control-height-xs);
+  block-size: var(--sigvelo-control-height-xs);
+  min-block-size: var(--sigvelo-control-height-xs);
   padding: var(--sigvelo-spacing-1);
   color: var(--sigvelo-color-text-muted);
   line-height: 0;
@@ -62,8 +64,8 @@
 
 .app-top-bar__button svg {
   display: block;
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: var(--sigvelo-text-sm);
+  block-size: var(--sigvelo-text-sm);
 }
 
 .app-top-bar__button:hover:not([data-disabled]),

package/dist/styles/approval.css

@@ -0,0 +1,172 @@
+.approval {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-2);
+  contain: inline-size;
+  color: var(--sigvelo-color-text);
+  font-family: inherit;
+  font-size: var(--sigvelo-text-compact);
+}
+
+.approval__header {
+  display: flex;
+  align-items: baseline;
+  gap: var(--sigvelo-spacing-2);
+  line-height: 1.4;
+}
+
+.approval__question {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.approval__question code {
+  font-family: var(--sigvelo-font-mono);
+  font-size: 0.8125em;
+}
+
+.approval__count {
+  margin-inline-start: auto;
+  flex-shrink: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.approval__preview {
+  max-block-size: 6rem;
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-2-5);
+  overflow: auto;
+  overflow-wrap: anywhere;
+  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-muted);
+  font-family: var(--sigvelo-font-mono);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.5;
+}
+
+.approval__preview-key {
+  color: var(--sigvelo-color-text);
+}
+
+.approval__preview-key::after {
+  content: ":";
+}
+
+.approval__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.approval__option {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--sigvelo-spacing-2);
+  inline-size: 100%;
+  min-block-size: var(--sigvelo-control-height-sm);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2);
+  border: none;
+  border-radius: var(--sigvelo-radius-md);
+  background: transparent;
+  color: var(--sigvelo-color-text);
+  font: inherit;
+  text-align: start;
+}
+
+.approval__option.button {
+  white-space: normal;
+}
+
+.approval__option[data-selected] {
+  background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 92%);
+}
+
+.approval__key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-full);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+}
+
+.approval__option[data-selected] .approval__key {
+  border-color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-text);
+  color: var(--sigvelo-color-surface);
+}
+
+.approval__arrows {
+  margin-inline-start: auto;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  visibility: hidden;
+}
+
+.approval__option[data-selected] .approval__arrows {
+  visibility: visible;
+}
+
+.approval__deny {
+  cursor: text;
+}
+
+.approval__deny:has(.approval__reason:focus-visible) {
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+.approval__deny-label {
+  flex-shrink: 0;
+}
+
+.approval__reason {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--sigvelo-color-text);
+  font: inherit;
+}
+
+.approval__reason::placeholder {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.approval__skip {
+  flex-shrink: 0;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.approval__submit {
+  flex-shrink: 0;
+  gap: var(--sigvelo-spacing-1-5);
+}
+
+.approval__kbd {
+  font-family: inherit;
+  font-size: 0.75em;
+  opacity: 0.75;
+}
+
+.approval__status:not(.sigvelo-visually-hidden) {
+  color: var(--sigvelo-color-danger-text);
+  font-size: var(--sigvelo-text-xs);
+}
+
+@media (pointer: coarse) {
+  .approval__option {
+    min-block-size: var(--sigvelo-control-height-lg);
+  }
+}

package/dist/styles/artifact.css

@@ -58,18 +58,6 @@
   /* Inherits from Button variant=ghost size=icon; overrides only when needed */
 }
 
-.artifact__action .sr-only {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  white-space: nowrap;
-  border: 0;
-  clip: rect(0 0 0 0);
-}
-
 .artifact__content {
   padding-block: 1rem;
   padding-inline: 1rem;

package/dist/styles/browser-run-panel.css

@@ -18,6 +18,9 @@
   flex: 1;
   min-inline-size: 0;
   flex-wrap: nowrap;
+  gap: 0;
+  padding-inline: 0;
+  border-block-end: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }
@@ -38,7 +41,7 @@
   white-space: nowrap;
 }
 
-.browser-run-panel__tab[aria-selected="true"] {
+.browser-run-panel__tab[data-active] {
   background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
 }
@@ -118,7 +121,7 @@
 }
 
 @media (forced-colors: active) {
-  .browser-run-panel__tab[aria-selected="true"] {
+  .browser-run-panel__tab[data-active] {
     outline: 2px solid Highlight;
     outline-offset: -2px;
   }

package/dist/styles/card.css

@@ -3,7 +3,7 @@
   color: var(--sigvelo-color-text);
   /* Shadow-led elevation: no perimeter border */
   border-radius: var(--sigvelo-radius-lg);
-  padding: var(--sigvelo-spacing-6);
+  padding: var(--sigvelo-spacing-4);
   container-type: inline-size;
   box-shadow: var(--sigvelo-shadow-sm);
   transition:
@@ -43,7 +43,7 @@
   grid-template-rows: auto auto;
   grid-template-columns: minmax(0, 1fr);
   align-items: start;
-  margin-block-end: 1rem;
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .card__header:has(.card__action) {
@@ -58,24 +58,24 @@
 }
 
 .card__title {
-  font-size: var(--sigvelo-text-lg);
+  font-size: var(--sigvelo-text-base);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
 }
 
 .card__description {
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
 }
 
 .card__content {
   display: grid;
-  gap: 1rem;
+  gap: var(--sigvelo-spacing-3);
 }
 
 .card__footer {
   display: flex;
-  margin-block-start: 1rem;
+  margin-block-start: var(--sigvelo-spacing-3);
 }
 
 .card--hover {
@@ -83,8 +83,8 @@
 }
 
 .card--hover:hover {
-  box-shadow: var(--sigvelo-shadow-md);
-  transform: translateY(-2px);
+  box-shadow: var(--sigvelo-shadow-sm);
+  transform: translateY(-1px);
 }
 
 .card--hover:focus-visible {

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

@@ -1,18 +1,10 @@
-.chain-of-thought {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-}
-
 .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 +13,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 +143,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/checkpoint.css

@@ -0,0 +1,58 @@
+.checkpoint {
+  max-inline-size: 100%;
+  gap: var(--sigvelo-spacing-1);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.checkpoint__icon {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.checkpoint__content {
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-0-5) var(--sigvelo-spacing-1);
+  align-items: baseline;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  overflow-wrap: anywhere;
+}
+
+.checkpoint__title {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  overflow-wrap: anywhere;
+}
+
+.checkpoint__description {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text-muted);
+  overflow-wrap: anywhere;
+}
+
+.checkpoint__title + .checkpoint__description::before {
+  content: "\00b7";
+  margin-inline-end: var(--sigvelo-spacing-1);
+}
+
+.checkpoint__actions {
+  display: inline-flex;
+  flex: 0 1 auto;
+  gap: var(--sigvelo-spacing-1);
+  align-items: center;
+  min-inline-size: 0;
+}
+
+.checkpoint__actions > * {
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+@media (forced-colors: active) {
+  .checkpoint.marker--separator::before,
+  .checkpoint.marker--separator::after {
+    background-color: CanvasText;
+  }
+}

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

@@ -7,14 +7,15 @@
 }
 
 .combobox__popup {
-  --sigvelo-recipe-surface-padding: 0;
+  --sigvelo-recipe-surface-padding: var(--sigvelo-combobox-popup-padding, 0);
 
   inline-size: var(--anchor-width);
   min-inline-size: 12.5rem;
 }
 
 .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 {