@mcp-b/react-components 0.20.4 → 0.20.5

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

@@ -199,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/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 {

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

@@ -659,7 +659,7 @@
 
 @media (forced-colors: active) {
   .prompt-input {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .prompt-input:focus-within {

package/dist/styles/queue.css

@@ -233,7 +233,7 @@
 
 @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 {

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

package/dist/styles/sources.css

@@ -83,7 +83,7 @@
 
 @media (forced-colors: active) {
   .sources__link {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .sources__link:focus-visible {

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/task.css

@@ -119,7 +119,7 @@
 @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 {

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

package/dist/styles/test-results.css

@@ -266,7 +266,7 @@
   .test-results,
   .test-results__test,
   .test-results__suite {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .test-results__suite-trigger:focus-visible {

package/dist/styles/theme-mode-control.css

@@ -45,9 +45,8 @@
 
 .theme-mode-control__item.radio:focus-visible {
   z-index: 1;
-  outline: var(--sigvelo-focus-ring);
-  outline-offset: var(--sigvelo-focus-offset);
-  box-shadow: none;
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .theme-mode-control__item.radio[data-disabled] {

package/dist/styles/think-execution-workbench.css

@@ -265,7 +265,7 @@
 
 @media (forced-colors: active) {
   .think-execution-workbench {
-    border: 1px solid canvastext;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) canvastext;
     background: canvas;
     color: canvastext;
     box-shadow: none;

package/dist/styles/think-full-app.css

@@ -305,7 +305,7 @@ body.is-resizing-side-panel .think-full-app__view-scope {
   .think-full-app__workbench,
   .think-full-app__app-bar,
   .think-full-app__workbench-view-switch {
-    border: 1px solid canvastext;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) canvastext;
     background: canvas;
     color: canvastext;
     box-shadow: none;