@mcp-b/react-components 0.20.4 → 0.20.5

package/dist/styles/think-routine-library.css

@@ -217,7 +217,7 @@
 .think-routine-library__detail {
   inline-size: min(100%, 64rem);
   margin-inline: auto;
-  padding: clamp(1rem, 3vw, 2rem);
+  padding: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__detail-header,
@@ -229,7 +229,7 @@
 
 .think-routine-library__detail-header {
   justify-content: space-between;
-  padding-block-end: clamp(1rem, 3vw, 2rem);
+  padding-block-end: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__detail-heading {
@@ -242,7 +242,7 @@
 
 .think-routine-library__detail-header h1,
 .think-routine-library__create-header h1 {
-  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
+  font-size: clamp(var(--sigvelo-text-lg), 2.5vw, var(--sigvelo-text-2xl));
   line-height: 1.12;
 }
 
@@ -257,8 +257,8 @@
 .think-routine-library__detail-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
-  gap: clamp(1rem, 3vw, 2rem);
-  padding-block-end: clamp(1rem, 3vw, 2rem);
+  gap: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
+  padding-block-end: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__section-heading {
@@ -326,7 +326,7 @@
 }
 
 .think-routine-library__runs {
-  padding-block-end: clamp(1rem, 3vw, 2rem);
+  padding-block-end: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__run-list {
@@ -423,7 +423,7 @@
 .think-routine-library__create {
   min-block-size: 0;
   overflow: auto;
-  padding: clamp(1rem, 3vw, 2rem);
+  padding: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__create-header,
@@ -433,7 +433,7 @@
 }
 
 .think-routine-library__create-header {
-  margin-block-end: clamp(1rem, 3vw, 2rem);
+  margin-block-end: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__create-header > div {

package/dist/styles/think-thread-picker.css

@@ -96,28 +96,18 @@
 
 .think-thread-picker__viewport {
   --think-thread-picker-fade-size: min(12%, 2.5rem);
+  --sigvelo-scroll-fade-start: min(
+    var(--think-thread-picker-fade-size),
+    var(--scroll-area-overflow-y-start, 0px)
+  );
+  --sigvelo-scroll-fade-end: min(
+    var(--think-thread-picker-fade-size),
+    var(--scroll-area-overflow-y-end, 0px)
+  );
 
-  padding: var(--sigvelo-spacing-1-5) 0.5rem var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
-  -webkit-mask-image: linear-gradient(
-    to bottom,
-    transparent 0,
-    #000 min(var(--think-thread-picker-fade-size), var(--scroll-area-overflow-y-start, 0px)),
-    #000
-      calc(100% - min(var(--think-thread-picker-fade-size), var(--scroll-area-overflow-y-end, 0px))),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to bottom,
-    transparent 0,
-    #000 min(var(--think-thread-picker-fade-size), var(--scroll-area-overflow-y-start, 0px)),
-    #000
-      calc(100% - min(var(--think-thread-picker-fade-size), var(--scroll-area-overflow-y-end, 0px))),
-    transparent 100%
-  );
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
 }
 
 .think-thread-picker__list {
@@ -249,7 +239,7 @@
 
 .think-thread-picker__delete-error svg {
   flex: 0 0 auto;
-  margin-block-start: 0.125rem;
+  margin-block-start: var(--sigvelo-spacing-0-5);
 }
 
 .think-thread-picker__thread-time {
@@ -307,7 +297,7 @@
 }
 
 .think-thread-picker__empty {
-  margin: 0.5rem;
+  margin: var(--sigvelo-spacing-2);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
   line-height: var(--sigvelo-leading-snug);
@@ -397,7 +387,7 @@
 
 @media (forced-colors: active) {
   .think-thread-picker {
-    border-inline-end: 1px solid canvastext;
+    border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width) canvastext;
     background: canvas;
     color: canvastext;
     box-shadow: none;

package/dist/styles/web-preview.css

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  padding-block: 0.5rem;
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-2-5);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -40,7 +40,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 2rem;
+  padding: var(--sigvelo-spacing-8);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
   text-align: center;
@@ -105,7 +105,7 @@
 .web-preview__console-item {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   align-items: baseline;
   padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: var(--sigvelo-spacing-3);
@@ -140,6 +140,6 @@
 
 @media (forced-colors: active) {
   .web-preview {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/workspace-explorer.css

@@ -408,8 +408,8 @@
 }
 
 .workspace-explorer__image-trigger:focus-visible {
-  outline: var(--sigvelo-focus-ring);
-  outline-offset: var(--sigvelo-focus-offset);
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .workspace-explorer__image-trigger[aria-disabled="true"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.20.4",
+  "version": "0.20.5",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -57,7 +57,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.20.4"
+    "@mcp-b/design-tokens": "0.20.5"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",