@mcp-b/react-components 0.12.0 → 0.13.0

package/dist/styles/activity.css

@@ -11,15 +11,15 @@
   max-width: 36rem;
   /* Whitespace separates the work log from message prose around it */
   margin-block: 0.5rem;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
 }
 
 .activity__trigger {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
-  padding-block: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: var(--sigvelo-spacing-1-5);
   /* The fill bleeds past the text edge via the negative margin, so the label
      stays flush with the rows below instead of indenting on hover */
   padding-inline: 0.5rem;
@@ -31,7 +31,7 @@
      status, not content */
   color: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
   font-family: inherit;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   cursor: pointer;
@@ -47,9 +47,7 @@
 
 .activity__trigger:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 /* Basis 0 keeps the long nowrap label from inflating the message width
@@ -95,45 +93,30 @@
   transform: rotate(90deg);
 }
 
-/* The measured height lives on the base class, NOT gated behind [data-open]:
-   during close the open rule stops matching before the ending style lands,
-   height computes to `auto`, and `auto → 0` can't transition — the panel
-   snaps shut instead of folding. (Base UI's documented panel pattern.) */
 .activity__content {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
   /* The panel clips (overflow: hidden), so it must own the gutter the row
      hover fills bleed into — the list padding puts the text back in line */
   margin-inline: -0.5rem;
   /* Standard easing, not emphasized: the expo-out curve front-loads ~60% of
      the motion into the first frames, which makes collapsing read as content
      snapping upward instead of folding. */
-  transition:
-    height var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.activity__content[data-starting-style],
-.activity__content[data-ending-style] {
-  height: 0;
-  opacity: 0;
 }
 
 .activity__list {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   /* Unbounded on purpose: the expanded log flows in the conversation scroll;
      only subsection panels (group text, shell output, code) are height-capped. */
-  padding-block: 0.125rem 0.5rem;
+  padding-block: var(--sigvelo-spacing-0-5) 0.5rem;
   padding-inline: 0.5rem;
 }
 
 .activity__item {
   display: flex;
   align-items: baseline;
-  gap: 0.375rem;
-  font-size: 0.8125rem;
+  gap: var(--sigvelo-spacing-1-5);
+  font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text);
   line-height: 1.6;
 }
@@ -148,18 +131,18 @@
 .activity__group-trigger {
   display: flex;
   align-items: baseline;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   /* Negative margins cancel the padding, so the hover fill gets breathing
      room while the row text stays aligned with its plain siblings */
-  padding-block: 0.125rem;
+  padding-block: var(--sigvelo-spacing-0-5);
   padding-inline: 0.5rem;
-  margin-block: -0.125rem;
+  margin-block: -var(--sigvelo-spacing-0-5);
   margin-inline: -0.5rem;
   background: none;
   border: none;
   border-radius: var(--sigvelo-radius-sm);
   font-family: inherit;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   font-weight: inherit;
   color: var(--sigvelo-color-text);
   line-height: 1.6;
@@ -195,34 +178,18 @@
 
 .activity__group-trigger:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
   border-radius: var(--sigvelo-radius-sm);
 }
 
-.activity__group-panel {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
-  transition:
-    height var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.activity__group-panel[data-starting-style],
-.activity__group-panel[data-ending-style] {
-  height: 0;
-  opacity: 0;
-}
-
 .activity__group-panel-inner {
-  padding-block: 0.375rem 0.5rem;
+  padding-block: var(--sigvelo-spacing-1-5) 0.5rem;
 }
 
 /* Prose panels (thought traces): quiet text, bounded like everything else */
 .activity__group-text {
   margin: 0;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   line-height: 1.6;
   color: var(--sigvelo-color-text-muted);
   white-space: pre-wrap;
@@ -234,9 +201,7 @@
 .activity__group-text:focus-visible,
 .activity__shell-output:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
   border-radius: var(--sigvelo-radius-sm);
   scroll-margin-block: 1rem;
 }
@@ -248,13 +213,13 @@
   flex-direction: column;
   gap: 0.25rem;
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
+  padding-inline: var(--sigvelo-spacing-3);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-md);
 }
 
 .activity__shell-label {
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text-muted);
 }
@@ -262,7 +227,7 @@
 .activity__shell-output {
   margin: 0;
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   line-height: 1.6;
   color: var(--sigvelo-color-text);
   white-space: pre-wrap;
@@ -274,7 +239,7 @@
 
 .activity__shell-status {
   align-self: flex-end;
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
   color: var(--sigvelo-color-success-text-on-subtle);
 }
 
@@ -291,8 +256,8 @@
    drove it. Compact underline tabs — chrome stays quiet inside the shell. */
 .activity__browser-tabs .tabs__tab {
   padding-block: 0.25rem;
-  padding-inline: 0.125rem;
-  font-size: 0.75rem;
+  padding-inline: var(--sigvelo-spacing-0-5);
+  font-size: var(--sigvelo-text-xs);
 }
 
 .activity__browser-tabs .tabs__panel {

package/dist/styles/agent-chat.css

@@ -6,7 +6,7 @@
   min-height: 0;
   background-color: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
 }
 
 .agent-chat__conversation {
@@ -44,7 +44,7 @@
   position: absolute;
   inset-inline: 0;
   inset-block-end: 0;
-  padding: 0.625rem;
+  padding: var(--sigvelo-spacing-2-5);
   padding-block-start: 1.5rem;
   background: linear-gradient(
     to top,
@@ -70,13 +70,54 @@
 .agent-chat__notice {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   margin-block-end: 0.5rem;
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
 }
 
+.agent-chat__notice:empty {
+  margin-block-end: 0;
+}
+
 .agent-chat__notice[data-tone="danger"],
 .agent-chat__notice [data-tone="danger"] {
   color: var(--sigvelo-color-danger-text);
 }
+
+.agent-chat__turn-error {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-3);
+  color: var(--sigvelo-color-danger-text-on-subtle);
+  background-color: var(--sigvelo-color-danger-bg-subtle);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-danger-border-muted);
+  border-radius: var(--sigvelo-radius-lg);
+}
+
+.agent-chat__turn-error-message {
+  min-inline-size: min(100%, 16rem);
+  flex: 1;
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--sigvelo-text-sm);
+  line-height: 1.5;
+}
+
+.agent-chat__turn-error-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .agent-chat__turn-error {
+    border: var(--sigvelo-focus-width) solid CanvasText;
+  }
+}

package/dist/styles/agent-connection.css

@@ -1,6 +1,6 @@
 .agent-connect {
   display: grid;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
   min-inline-size: 0;
   color: var(--sigvelo-color-text);
 }
@@ -34,7 +34,7 @@
 .agent-connect__title-group :where(h2, h3) {
   margin: 0;
   color: var(--sigvelo-color-text);
-  font-size: 0.95rem;
+  font-size: var(--sigvelo-text-base);
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: 1.2;
   letter-spacing: 0;
@@ -44,7 +44,7 @@
   max-inline-size: 62ch;
   margin: 0;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.78rem;
+  font-size: var(--sigvelo-text-compact);
   line-height: 1.35;
   text-wrap: pretty;
 }
@@ -87,7 +87,7 @@
   color: var(--sigvelo-color-text-muted);
   cursor: pointer;
   font: inherit;
-  font-size: 0.72rem;
+  font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.15;
   overflow-wrap: anywhere;
@@ -106,7 +106,7 @@
 @media (pointer: coarse) {
   .agent-connect__target {
     min-block-size: 2.5rem;
-    padding-inline: 0.75rem;
+    padding-inline: var(--sigvelo-spacing-3);
   }
 }
 
@@ -117,9 +117,7 @@
 
 .agent-connect__target:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .agent-connect__target[data-selected="true"] {
@@ -137,13 +135,13 @@
 
 .agent-connect .code-block__content,
 .agent-connect .code-block__content--highlighted pre.shiki {
-  font-size: 0.74rem;
+  font-size: var(--sigvelo-text-xs);
   line-height: 1.5;
 }
 
 .agent-connect__mcp-form {
   display: grid;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
   min-inline-size: 0;
 }
 

package/dist/styles/alert-dialog.css

@@ -13,14 +13,10 @@
 
 .alert-dialog__trigger:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .alert-dialog__backdrop {
-  position: fixed;
-  inset: 0;
   background-color: var(--sigvelo-color-backdrop);
   opacity: 1;
   z-index: 50;
@@ -33,6 +29,8 @@
 }
 
 .alert-dialog__popup {
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-6);
+
   position: fixed;
   inset-block-start: 50%;
   inset-inline-start: 50%;
@@ -42,14 +40,6 @@
   max-inline-size: 28rem;
   max-block-size: calc(100dvb - 2rem);
   overflow: auto;
-  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);
-  padding: 1.5rem;
-  box-shadow:
-    0 10px 15px -3px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
-    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
   transition:
     opacity var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
     transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
@@ -61,6 +51,13 @@
   transform: translate(-50%, -50%) scale(0.95);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .alert-dialog__popup[data-starting-style],
+  .alert-dialog__popup[data-ending-style] {
+    transform: translate(-50%, -50%);
+  }
+}
+
 .alert-dialog__popup--sm {
   max-inline-size: 20rem;
 }
@@ -70,8 +67,7 @@
 }
 
 .alert-dialog__title {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 1.125rem;
+  font-size: var(--sigvelo-text-lg);
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: 1.25;
   color: var(--sigvelo-color-text);
@@ -80,8 +76,7 @@
 }
 
 .alert-dialog__description {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   line-height: 1.5;
   color: var(--sigvelo-color-text-muted);
   margin: 0 0 1.5rem;
@@ -98,7 +93,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
 }
 
 .alert-dialog__media {
@@ -109,10 +104,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-block-size: 2.5rem;
-  padding: 0 1rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  min-block-size: var(--sigvelo-recipe-control-height);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-recipe-control-padding-inline);
+  font-family: inherit;
+  font-size: var(--sigvelo-recipe-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   border: none;
   border-radius: var(--sigvelo-radius-md);
@@ -125,14 +121,12 @@
 
 .alert-dialog__action:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .alert-dialog__action:disabled {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
 }
 
 .alert-dialog__action--primary {

package/dist/styles/artifact.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   inline-size: 100%;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
   /* Shadow-led elevation: no perimeter border */
   background-color: var(--sigvelo-color-surface);
@@ -15,8 +15,8 @@
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 0.75rem;
-  padding-block: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-spacing-3);
   padding-inline: 1rem;
   background-color: var(--sigvelo-color-surface);
 }
@@ -38,8 +38,8 @@
 
 .artifact__description {
   margin: 0;
-  margin-block-start: 0.125rem;
-  font-size: 0.8125rem;
+  margin-block-start: var(--sigvelo-spacing-0-5);
+  font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text-muted);
   line-height: 1.4;
   overflow-wrap: anywhere;
@@ -73,7 +73,7 @@
 .artifact__content {
   padding-block: 1rem;
   padding-inline: 1rem;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   line-height: 1.5;
   overflow-wrap: anywhere;
 }

package/dist/styles/attachment-preview.css

@@ -15,7 +15,7 @@
 
 .attachment-preview__name {
   margin-block-start: 0.5rem;
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   text-align: center;
 }

package/dist/styles/autocomplete.css

@@ -1,182 +1,17 @@
 .autocomplete__input {
   flex: 1;
-  min-width: 0;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
-  color: var(--sigvelo-color-text);
-  background-color: transparent;
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  outline: none;
-}
-
-.autocomplete__input::placeholder {
-  color: var(--sigvelo-color-text-muted);
-}
-
-.autocomplete__input:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
-}
-
-.autocomplete__trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem;
-  color: var(--sigvelo-color-text-muted);
-  background-color: transparent;
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  cursor: pointer;
-  transition: color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.autocomplete__trigger:hover {
-  color: var(--sigvelo-color-text);
-}
-
-.autocomplete__trigger:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
-}
-
-.autocomplete__clear {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem;
-  color: var(--sigvelo-color-text-muted);
-  background-color: transparent;
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  cursor: pointer;
-  transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.autocomplete__clear:hover {
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-}
-
-.autocomplete__clear:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
-}
-
-.autocomplete__positioner {
-  z-index: 50;
 }
 
 .autocomplete__popup {
-  min-width: 200px;
-  max-height: 300px;
-  overflow: auto;
-  background-color: var(--sigvelo-color-surface);
-  color: var(--sigvelo-color-text);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-  box-shadow:
-    0 10px 15px -3px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
-    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
-  animation: autocomplete-popup-enter var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
+  --sigvelo-recipe-surface-padding: 0;
 
-.autocomplete__popup[data-ending-style] {
-  animation: autocomplete-popup-exit 100ms ease;
-}
-
-@keyframes autocomplete-popup-enter {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes autocomplete-popup-exit {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-}
-
-.autocomplete__list {
-  padding: 0.25rem;
-}
-
-.autocomplete__item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
-  color: var(--sigvelo-color-text);
-  border-radius: var(--sigvelo-radius-sm);
-  cursor: pointer;
-  outline: none;
-  transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.autocomplete__item:hover,
-.autocomplete__item[data-highlighted] {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.autocomplete__item[data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.autocomplete__empty {
-  padding: 1rem;
-  text-align: center;
-  font-size: 0.875rem;
-  color: var(--sigvelo-color-text-muted);
+  inline-size: var(--anchor-width);
+  min-inline-size: 12.5rem;
 }
 
 .autocomplete__status {
-  padding: 0.75rem;
+  padding: var(--sigvelo-spacing-3);
   text-align: center;
-  font-size: 0.75rem;
-  color: var(--sigvelo-color-text-muted);
-}
-
-.autocomplete__group {
-  padding-block: 0.25rem;
-}
-
-.autocomplete__group + .autocomplete__group {
-  border-block-start: 1px solid var(--sigvelo-color-neutral-border-muted);
-}
-
-.autocomplete__group-label {
-  padding-block: 0.375rem;
-  padding-inline: 0.75rem;
-  font-size: 0.75rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
 }