@mcp-b/react-components 0.20.1 → 0.20.5

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

@@ -52,7 +52,7 @@
   inline-size: 1.125rem;
   block-size: 1.125rem;
   place-items: center;
-  border-radius: 50%;
+  border-radius: var(--sigvelo-radius-circle);
   background: var(--sigvelo-color-primary-bg-subtle);
   color: var(--sigvelo-color-primary-text);
   font-size: var(--sigvelo-text-3xs);
@@ -61,12 +61,9 @@
 }
 
 .browser-run-panel__tab-title {
-  overflow: hidden;
   max-inline-size: 100%;
   font-size: var(--sigvelo-text-xs);
   line-height: var(--sigvelo-leading-tight);
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .browser-run-panel__address-bar {
@@ -105,13 +102,7 @@
 }
 
 .browser-run-panel__spinner {
-  animation: browser-run-panel-spin 900ms linear infinite;
-}
-
-@keyframes browser-run-panel-spin {
-  to {
-    transform: rotate(360deg);
-  }
+  animation: sigvelo-icon-spin 900ms linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -126,7 +117,7 @@
 
 @media (forced-colors: active) {
   .browser-run-panel__tab[data-active] {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: -2px;
   }
 }

package/dist/styles/button.css

@@ -185,7 +185,7 @@
 
 @media (forced-colors: active) {
   .button {
-    border: 1px solid ButtonText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
   }
 
   .button--ghost,

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

@@ -44,7 +44,7 @@
   background-color: var(--sigvelo-color-primary-bg-subtle);
   border-color: var(--sigvelo-color-primary-border-muted);
   color: var(--sigvelo-color-primary-text);
-  animation: chain-of-thought-spin 1.6s linear infinite;
+  animation: sigvelo-icon-spin 1.6s linear infinite;
 }
 
 .chain-of-thought__step-body {
@@ -105,9 +105,6 @@
   color: var(--sigvelo-color-text);
   text-decoration: none;
   max-inline-size: 18rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   transition:
     background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
     border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
@@ -157,15 +154,6 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-@keyframes chain-of-thought-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .chain-of-thought__step--active .chain-of-thought__step-indicator {
     animation: none;
@@ -179,12 +167,12 @@
 @media (forced-colors: active) {
   .chain-of-thought__step-indicator,
   .chain-of-thought__search-result {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .chain-of-thought__header:focus-visible,
   .chain-of-thought__search-result:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 }

package/dist/styles/chatgpt-sign-in-screen.css

@@ -9,7 +9,7 @@
   min-inline-size: 17.5rem;
   display: grid;
   place-items: center;
-  padding: clamp(1.25rem, 5vw, 3rem);
+  padding: clamp(var(--sigvelo-spacing-5), 5vw, var(--sigvelo-spacing-12));
   background-color: var(--sigvelo-color-canvas);
   background-image:
     linear-gradient(
@@ -56,7 +56,7 @@
   z-index: 1;
   isolation: isolate;
   display: grid;
-  gap: 1.25rem;
+  gap: var(--sigvelo-spacing-5);
   justify-items: center;
   text-align: center;
 }

package/dist/styles/checkbox-group.css

@@ -1,7 +1,7 @@
 .checkbox-group {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
 }
 
 .checkbox-group[data-layout="grid"] {
@@ -52,12 +52,6 @@
 }
 
 .checkbox-group__title,
-.checkbox-group__description {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .checkbox-group__title {
   font-weight: var(--sigvelo-font-weight-semibold);
 }

package/dist/styles/code-block.css

@@ -13,8 +13,8 @@
 .code-block__header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   background-color: transparent;
 }
@@ -22,7 +22,7 @@
 .code-block__title {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
@@ -37,7 +37,7 @@
 .code-block__actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   margin-inline-start: auto;
   flex-shrink: 0;
 }
@@ -111,6 +111,6 @@
 
 @media (forced-colors: active) {
   .code-block {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/codex-model-selector.css

@@ -60,10 +60,7 @@
   justify-content: center;
   gap: var(--sigvelo-spacing-1);
   min-inline-size: 0;
-  overflow: hidden;
   text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .codex-model-selector__summary-effort,
@@ -145,9 +142,6 @@
 .codex-model-selector__submenu-value {
   min-inline-size: 0;
   margin-inline-start: auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .codex-model-selector__option {

package/dist/styles/commit.css

@@ -67,10 +67,7 @@
 
 .commit__message {
   min-inline-size: 0;
-  overflow: hidden;
   font-weight: var(--sigvelo-font-weight-semibold);
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .commit__metadata {
@@ -146,9 +143,6 @@
   color: var(--sigvelo-color-text);
   flex: 1;
   min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .commit__file-additions {
@@ -173,11 +167,11 @@
 @media (forced-colors: active) {
   .commit,
   .commit__file {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .commit__header:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 }

package/dist/styles/environment-variables.css

@@ -20,7 +20,7 @@
 .environment-variables__toggle {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   cursor: pointer;
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
@@ -57,7 +57,7 @@
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-2-5);
-  padding-block: 0.5rem;
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: 0.875rem;
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -80,7 +80,7 @@
   flex: 1;
   min-width: 0;
   padding-block: 0.3125rem;
-  padding-inline: 0.5rem;
+  padding-inline: var(--sigvelo-spacing-2);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
@@ -88,9 +88,6 @@
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-sm);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .environment-variables__required {
@@ -104,6 +101,6 @@
 @media (forced-colors: active) {
   .environment-variables,
   .environment-variables__row {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/fieldset.css

@@ -15,7 +15,7 @@
 }
 
 .fieldset__legend {
-  padding: 0 0.5rem;
+  padding: 0 var(--sigvelo-spacing-2);
   margin: 0 -0.5rem;
   font-family: inherit;
   font-size: var(--sigvelo-text-compact);

package/dist/styles/file-tree.css

@@ -154,12 +154,12 @@
 
 @media (forced-colors: active) {
   .file-tree {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .file-tree__node:focus-visible,
   .file-tree__node[data-focused] {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 

package/dist/styles/github-motion-mark.css

@@ -24,7 +24,7 @@
 
 .github-motion-mark::before {
   inset: -0.22em;
-  border: 1px solid currentColor;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) currentColor;
   border-radius: 999px;
   opacity: 0.24;
   transform-origin: 50% 50%;

package/dist/styles/inline-citation.css

@@ -68,13 +68,10 @@
 }
 
 .inline-citation__title {
-  overflow: hidden;
   color: var(--sigvelo-color-text);
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-compact);
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .inline-citation__location,
@@ -100,7 +97,7 @@
 
 @media (forced-colors: active) {
   .inline-citation__trigger:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
     box-shadow: none;
   }

package/dist/styles/label.css

@@ -1,7 +1,7 @@
 .label {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);

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

@@ -110,9 +110,6 @@
 
 .mcp-server-picker__description {
   min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   color: var(--sigvelo-color-text);
 }
 
@@ -199,7 +196,7 @@
 
 @media (forced-colors: active) {
   .mcp-server-picker__avatar-fallback {
-    border: 1px solid ButtonText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
   }
 
   .mcp-server-picker__row-shell:has(.mcp-server-picker__row[data-highlighted]) {

package/dist/styles/menu.css

@@ -49,7 +49,7 @@
   inline-size: var(--sigvelo-spacing-2);
   block-size: var(--sigvelo-spacing-2);
   background-color: currentColor;
-  border-radius: 50%;
+  border-radius: var(--sigvelo-radius-circle);
 }
 
 .menu__checkbox-indicator::before {

package/dist/styles/message-scroller.css

@@ -12,8 +12,6 @@
 
 .message-scroller__viewport {
   --message-scroller-fade-size: min(12%, 2.5rem);
-  --message-scroller-fade-t: 0px;
-  --message-scroller-fade-b: 0px;
   width: 100%;
   height: 100%;
   min-width: 0;
@@ -23,32 +21,16 @@
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
   contain: content;
-  -webkit-mask-image: linear-gradient(
-    to bottom,
-    transparent 0,
-    #000 var(--message-scroller-fade-t),
-    #000 calc(100% - var(--message-scroller-fade-b)),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to bottom,
-    transparent 0,
-    #000 var(--message-scroller-fade-t),
-    #000 calc(100% - var(--message-scroller-fade-b)),
-    transparent 100%
-  );
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
 }
 
 .message-scroller__viewport[data-scrollable~="end"] {
-  --message-scroller-fade-b: var(--message-scroller-fade-b-size, var(--message-scroller-fade-size));
+  --sigvelo-scroll-fade-end: var(--message-scroller-fade-b-size, var(--message-scroller-fade-size));
 }
 
 .message-scroller__content {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--sigvelo-spacing-4);
   min-height: 100%;
 }
 
@@ -96,6 +78,6 @@
 
 @media (forced-colors: active) {
   .message-scroller__button {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/message.css

@@ -83,12 +83,6 @@
   flex-shrink: 0;
 }
 
-.message__attachment-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .message__attachment-zoom {
   display: block;
   min-block-size: 0;
@@ -205,6 +199,6 @@
   .message__content,
   .message__edit-form,
   .message__edit-textarea {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/model-selector.css

@@ -181,7 +181,7 @@
 @media (forced-colors: active) {
   .model-selector__item:focus-visible,
   .model-selector__item:hover {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: -2px;
   }
 }

package/dist/styles/plan.css

@@ -122,7 +122,7 @@
 
 @media (forced-colors: active) {
   .plan__step-indicator {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .plan__step[data-status="active"] .plan__step-indicator {