@mcp-b/react-components 0.20.1 → 0.20.5

package/dist/styles/pricing-page.css

@@ -3,7 +3,8 @@
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
-  padding: clamp(1rem, 4%, 3rem) clamp(0.75rem, 3%, 1.5rem);
+  padding: clamp(var(--sigvelo-spacing-4), 4%, var(--sigvelo-spacing-12))
+    clamp(var(--sigvelo-spacing-3), 3%, var(--sigvelo-spacing-6));
   container-type: inline-size;
 }
 
@@ -11,13 +12,13 @@
 
 .pricing-page__header {
   text-align: center;
-  margin-bottom: 3rem;
+  margin-bottom: var(--sigvelo-spacing-12);
 }
 
 .pricing-page__title {
   font-family: inherit;
   font-size: 2.5rem;
-  font-weight: 700;
+  font-weight: var(--sigvelo-font-weight-bold);
   line-height: var(--sigvelo-leading-tight);
   color: var(--sigvelo-color-text);
   margin: 0 0 var(--sigvelo-spacing-3);
@@ -27,20 +28,20 @@
   font-family: inherit;
   font-size: var(--sigvelo-text-lg);
   color: var(--sigvelo-color-text-muted);
-  margin: 0 0 2rem;
+  margin: 0 0 var(--sigvelo-spacing-8);
 }
 
 .pricing-page__billing-toggle {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1rem;
+  gap: var(--sigvelo-spacing-4);
 }
 
 .pricing-page__toggle-options {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
 }
 
 .pricing-page__toggle-label {
@@ -74,15 +75,15 @@
 .pricing-page__plans {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
-  margin-bottom: 3rem;
+  gap: var(--sigvelo-spacing-6);
+  margin-bottom: var(--sigvelo-spacing-12);
 }
 
 .pricing-page__plan {
   position: relative;
   display: flex;
   flex-direction: column;
-  padding: 1.5rem;
+  padding: var(--sigvelo-spacing-6);
 }
 
 .pricing-page__plan[data-popular] {
@@ -100,7 +101,7 @@
 }
 
 .pricing-page__plan-header {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--sigvelo-spacing-6);
 }
 
 .pricing-page__plan-name {
@@ -108,7 +109,7 @@
   font-size: var(--sigvelo-text-xl);
   font-weight: 600;
   color: var(--sigvelo-color-text);
-  margin: 0 0 0.25rem;
+  margin: 0 0 var(--sigvelo-spacing-1);
 }
 
 .pricing-page__plan-description {
@@ -119,13 +120,13 @@
 }
 
 .pricing-page__plan-price {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--sigvelo-spacing-6);
 }
 
 .pricing-page__price-amount {
   font-family: inherit;
   font-size: 2.5rem;
-  font-weight: 700;
+  font-weight: var(--sigvelo-font-weight-bold);
   font-variant-numeric: tabular-nums;
   color: var(--sigvelo-color-text);
 }
@@ -140,9 +141,9 @@
   display: block;
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
-  font-weight: 500;
+  font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-success-bg);
-  margin-top: 0.25rem;
+  margin-top: var(--sigvelo-spacing-1);
 }
 
 .pricing-page__plan-cta {
@@ -150,7 +151,7 @@
 }
 
 .pricing-page__features-separator {
-  margin: 1.5rem 0;
+  margin: var(--sigvelo-spacing-6) 0;
 }
 
 .pricing-page__features {
@@ -164,7 +165,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--sigvelo-spacing-3);
-  padding: 0.5rem 0;
+  padding: var(--sigvelo-spacing-2) 0;
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text);
@@ -196,15 +197,15 @@
 .pricing-page__feature-limit {
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
-  margin-left: 0.25rem;
+  margin-left: var(--sigvelo-spacing-1);
 }
 
 /* Calculator */
 
 .pricing-page__calculator {
   max-width: 600px;
-  margin: 0 auto 3rem;
-  padding: 2rem;
+  margin: 0 auto var(--sigvelo-spacing-12);
+  padding: var(--sigvelo-spacing-8);
 }
 
 .pricing-page__calculator-title {
@@ -212,22 +213,22 @@
   font-size: var(--sigvelo-text-xl);
   font-weight: 600;
   color: var(--sigvelo-color-text);
-  margin: 0 0 0.5rem;
+  margin: 0 0 var(--sigvelo-spacing-2);
 }
 
 .pricing-page__calculator-description {
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text-muted);
-  margin: 0 0 1.5rem;
+  margin: 0 0 var(--sigvelo-spacing-6);
 }
 
 .pricing-page__calculator-slider {
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--sigvelo-spacing-2);
 }
 
 .pricing-page__calculator-separator {
-  margin-block: 1.5rem;
+  margin-block: var(--sigvelo-spacing-6);
 }
 
 .pricing-page__calculator-labels {
@@ -248,7 +249,7 @@
 .pricing-page__calculator-range {
   display: flex;
   justify-content: space-between;
-  margin-top: 0.5rem;
+  margin-top: var(--sigvelo-spacing-2);
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
@@ -258,7 +259,7 @@
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--sigvelo-spacing-6);
 }
 
 .pricing-page__calculator-result-label {
@@ -274,7 +275,7 @@
 .pricing-page__calculator-amount {
   font-family: inherit;
   font-size: 2rem;
-  font-weight: 700;
+  font-weight: var(--sigvelo-font-weight-bold);
   font-variant-numeric: tabular-nums;
   color: var(--sigvelo-color-text);
 }
@@ -288,7 +289,7 @@
 .pricing-page__tiers {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--sigvelo-spacing-4);
 }
 
 .pricing-page__tier {
@@ -309,7 +310,7 @@
 }
 
 .pricing-page__tier-price {
-  font-weight: 500;
+  font-weight: var(--sigvelo-font-weight-semibold);
   font-variant-numeric: tabular-nums;
   color: var(--sigvelo-color-text-muted);
 }
@@ -327,18 +328,19 @@
   font-weight: 600;
   color: var(--sigvelo-color-text);
   text-align: center;
-  margin: 0 0 2rem;
+  margin: 0 0 var(--sigvelo-spacing-8);
 }
 
 .pricing-page__faq-accordion {
-  border-top: 1px solid var(--sigvelo-color-neutral-border-muted);
+  border-top: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
 }
 
 /* Confirmation Dialog */
 
 .pricing-page__confirm-summary {
-  padding: 1rem;
-  margin-bottom: 1rem;
+  padding: var(--sigvelo-spacing-4);
+  margin-bottom: var(--sigvelo-spacing-4);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-md);
 }
@@ -349,12 +351,12 @@
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text);
-  padding: 0.25rem 0;
+  padding: var(--sigvelo-spacing-1) 0;
 }
 
 .pricing-page__confirm-row[data-savings] {
   color: var(--sigvelo-color-success-bg);
-  font-weight: 500;
+  font-weight: var(--sigvelo-font-weight-semibold);
 }
 
 .pricing-page__confirm-actions {

package/dist/styles/prompt-input.css

@@ -141,12 +141,6 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.prompt-input__attachment-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .prompt-input__attachment-remove {
   display: inline-flex;
   align-items: center;
@@ -283,7 +277,7 @@
 }
 
 .prompt-input__dictation[data-starting] .prompt-input__dictation-icon {
-  animation: prompt-input-spin 900ms linear infinite;
+  animation: sigvelo-icon-spin 900ms linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -328,7 +322,7 @@
 }
 
 .prompt-input__submit-spinner {
-  animation: prompt-input-spin 900ms linear infinite;
+  animation: sigvelo-icon-spin 900ms linear infinite;
 }
 
 .prompt-input__action-menu {
@@ -563,12 +557,6 @@
   min-inline-size: 0;
 }
 
-.prompt-input__command-description {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .prompt-input__command-meta {
   color: var(--prompt-input-secondary-text);
   font-size: var(--sigvelo-density-compact-control-font-size);
@@ -603,10 +591,7 @@
 }
 
 .prompt-input__reference-label {
-  overflow: hidden;
   max-inline-size: 18rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .prompt-input__reference-remove {
@@ -638,13 +623,6 @@
   max-inline-size: min(20rem, 45cqi);
 }
 
-.prompt-input__context-category,
-.prompt-input__context-value {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .prompt-input__context-category {
   flex: 0 0 auto;
   color: var(--sigvelo-color-text);
@@ -673,15 +651,6 @@
   margin-inline-start: auto;
 }
 
-@keyframes prompt-input-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .prompt-input__submit-spinner {
     animation: none;
@@ -690,11 +659,11 @@
 
 @media (forced-colors: active) {
   .prompt-input {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .prompt-input:focus-within {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 }

package/dist/styles/queue.css

@@ -233,11 +233,11 @@
 
 @media (forced-colors: active) {
   .queue__item-file {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .queue__section-trigger:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 }

package/dist/styles/recipes.css

@@ -146,6 +146,30 @@
   color: var(--sigvelo-color-text);
 }
 
+/* Reveal scrollability by fading the top/bottom edges. Owns only the mask
+   structure; each scroller drives --sigvelo-scroll-fade-start/end (default 0px)
+   from its own overflow signal. */
+:where([data-recipe~="scroll-fade-y"]) {
+  --sigvelo-scroll-fade-start: 0px;
+  --sigvelo-scroll-fade-end: 0px;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--sigvelo-scroll-fade-start),
+    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--sigvelo-scroll-fade-start),
+    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
+    transparent 100%
+  );
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
 @media (any-pointer: coarse) {
   :where(:root, [data-theme="light"], [data-theme="dark"]) {
     --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
@@ -740,7 +764,7 @@
     [data-slot="number-field-input"],
     [data-slot="toolbar-input"]
   ):focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
     box-shadow: none;
   }
@@ -750,7 +774,7 @@
     [data-slot="reasoning-trigger"],
     [data-slot="sources-trigger"]
   ):focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
     box-shadow: none;
   }

package/dist/styles/sources.css

@@ -62,9 +62,6 @@
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .sources__link-description {
@@ -86,11 +83,11 @@
 
 @media (forced-colors: active) {
   .sources__link {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .sources__link:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 }

package/dist/styles/stepper.css

@@ -119,7 +119,7 @@
 }
 
 .stepper__indicator[data-loading] .stepper__indicator-content {
-  animation: stepper-spin 800ms linear infinite;
+  animation: sigvelo-icon-spin 800ms linear infinite;
 }
 
 .stepper__separator {
@@ -206,12 +206,6 @@
   display: none;
 }
 
-@keyframes stepper-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .stepper__indicator[data-loading] .stepper__indicator-content {
     animation: none;

package/dist/styles/streamdown.css

@@ -40,7 +40,7 @@ button[data-streamdown="link"] {
 
 [data-streamdown="inline-code"] {
   padding-block: 0.0625rem;
-  padding-inline: 0.25rem;
+  padding-inline: var(--sigvelo-spacing-1);
   border-radius: var(--sigvelo-radius-xs);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   font-family: var(--sigvelo-font-mono);
@@ -73,7 +73,7 @@ button[data-streamdown="link"] {
 }
 
 [data-streamdown="blockquote"] {
-  margin-block: 0.5rem;
+  margin-block: var(--sigvelo-spacing-2);
   padding-inline-start: var(--sigvelo-spacing-3);
   border-inline-start: 2px solid var(--sigvelo-color-neutral-border-subtle);
   color: var(--sigvelo-color-text-muted);
@@ -81,8 +81,8 @@ button[data-streamdown="link"] {
 
 [data-streamdown="ordered-list"],
 [data-streamdown="unordered-list"] {
-  margin-block: 0.25rem;
-  padding-inline-start: 1.25rem;
+  margin-block: var(--sigvelo-spacing-1);
+  padding-inline-start: var(--sigvelo-spacing-5);
 }
 
 [data-streamdown="ordered-list"] {
@@ -102,15 +102,16 @@ button[data-streamdown="link"] {
 }
 
 [data-streamdown="horizontal-rule"] {
-  margin-block: 1rem;
+  margin-block: var(--sigvelo-spacing-4);
   border: 0;
-  border-block-start: 1px solid var(--sigvelo-color-neutral-border-subtle);
+  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .message__response img {
   display: inline-block;
   max-width: 100%;
-  margin-block: 0.5rem;
+  margin-block: var(--sigvelo-spacing-2);
   border-radius: var(--sigvelo-radius-md);
 }
 
@@ -127,7 +128,7 @@ button[data-streamdown="link"] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.25rem;
+  padding: var(--sigvelo-spacing-1);
   border: 0;
   border-radius: var(--sigvelo-radius-sm);
   background: transparent;
@@ -163,9 +164,9 @@ button[data-streamdown="link"] {
 [data-streamdown="mermaid-block"] {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   width: 100%;
-  margin-block: 0.5rem;
+  margin-block: var(--sigvelo-spacing-2);
   padding: var(--sigvelo-spacing-1-5);
   border-radius: var(--sigvelo-radius-lg);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
@@ -175,7 +176,7 @@ button[data-streamdown="link"] {
   display: flex;
   align-items: center;
   min-height: 1.5rem;
-  padding-inline: 0.5rem;
+  padding-inline: var(--sigvelo-spacing-2);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);
   text-transform: lowercase;
@@ -202,7 +203,7 @@ button[data-streamdown="link"] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   pointer-events: auto;
   border-radius: var(--sigvelo-radius-md);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
@@ -216,8 +217,8 @@ button[data-streamdown="link"] {
 
 [data-streamdown="code-block-body"] pre {
   margin: 0;
-  padding-block: 0.5rem;
-  padding-inline: 0.5rem;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-2);
   background-color: transparent;
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-compact);
@@ -240,8 +241,8 @@ button[data-streamdown="link"] {
 [data-streamdown="table-wrapper"] {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  margin-block: 0.5rem;
+  gap: var(--sigvelo-spacing-1);
+  margin-block: var(--sigvelo-spacing-2);
   min-inline-size: 0;
   max-inline-size: 100%;
 }
@@ -251,7 +252,7 @@ button[data-streamdown="link"] {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
 }
 
 /* Anonymous scroll container around the table. */
@@ -268,9 +269,10 @@ button[data-streamdown="link"] {
 
 [data-streamdown="table-header-cell"],
 [data-streamdown="table-cell"] {
-  padding-block: 0.25rem;
-  padding-inline: 0.5rem;
-  border-block-end: 1px solid var(--sigvelo-color-neutral-border-subtle);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
   text-align: start;
   vertical-align: top;
   overflow-wrap: anywhere;
@@ -300,15 +302,15 @@ button[data-streamdown="link"] {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   padding: var(--sigvelo-spacing-3);
 }
 
 [data-streamdown="table-fullscreen"] > div > div:last-child {
   flex: 1;
   overflow: auto;
-  padding-block: 0 1rem;
-  padding-inline: 1rem;
+  padding-block: 0 var(--sigvelo-spacing-4);
+  padding-inline: var(--sigvelo-spacing-4);
 }
 
 [data-streamdown="table-fullscreen"] thead {
@@ -345,10 +347,11 @@ button[data-streamdown="link"] {
   display: flex;
   flex-direction: column;
   min-width: 7.5rem;
-  margin-block-start: 0.25rem;
+  margin-block-start: var(--sigvelo-spacing-1);
   overflow: hidden;
   border-radius: var(--sigvelo-radius-md);
-  border: 1px solid var(--sigvelo-color-neutral-border-subtle);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
   background-color: var(--sigvelo-color-surface);
   box-shadow: var(--sigvelo-shadow-md);
 }

package/dist/styles/subagent-run.css

@@ -43,12 +43,9 @@
 
 .subagent-run__title {
   min-inline-size: 0;
-  overflow: hidden;
   color: var(--sigvelo-color-text);
   font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .subagent-run__selector .subagent-run__title {

package/dist/styles/task.css

@@ -119,11 +119,11 @@
 @media (forced-colors: active) {
   .task__trigger,
   .task__list {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .task__trigger:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 }

package/dist/styles/terminal.css

@@ -12,8 +12,8 @@
 .terminal__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: color-mix(in oklab, var(--sigvelo-color-neutral-950) 80%, white 20%);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -32,7 +32,7 @@
 .terminal__actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   margin-inline-start: auto;
 }
 
@@ -89,6 +89,6 @@
 
 @media (forced-colors: active) {
   .terminal {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }