@mcp-b/react-components 0.22.0 → 0.23.0

package/dist/components/ScrollArea.js

@@ -37,6 +37,7 @@ function ScrollAreaViewport({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
 		ref,
 		"data-slot": "scroll-area-viewport",
+		"data-recipe": "scroll-fade-y",
 		className: classes,
 		...props
 	});

package/dist/components/ThinkThreadPicker.js

@@ -188,7 +188,6 @@ function ThinkThreadPicker({ threads, renderThreadLink, onCreate, onDelete, clas
 					className: "think-thread-picker__scroll",
 					children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
 						className: "think-thread-picker__viewport",
-						"data-recipe": "scroll-fade-y",
 						"aria-label": "Thread list",
 						children: visibleThreads.length ? /* @__PURE__ */ jsx("ul", {
 							className: "think-thread-picker__list",

package/dist/styles/message-scroller.css

@@ -24,7 +24,11 @@
 }
 
 .message-scroller__viewport[data-scrollable~="end"] {
-  --sigvelo-scroll-fade-end: var(--message-scroller-fade-b-size, var(--message-scroller-fade-size));
+  --sigvelo-scroll-fade-end: var(--message-scroller-fade-size);
+}
+
+.message-scroller__viewport[data-scrollable~="start"] {
+  --sigvelo-scroll-fade-start: var(--message-scroller-fade-size);
 }
 
 .message-scroller__content {

package/dist/styles/recipes.css

@@ -166,12 +166,19 @@
   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. */
+/* Reveal vertical scrollability by fading the top/bottom edges. Base UI
+   ScrollArea supplies live overflow distances; other scrollers can override
+   --sigvelo-scroll-fade-start/end from their own state. */
 :where([data-recipe~="scroll-fade-y"]) {
-  --sigvelo-scroll-fade-start: 0px;
-  --sigvelo-scroll-fade-end: 0px;
+  --sigvelo-scroll-fade-size: min(12%, 2.5rem);
+  --sigvelo-scroll-fade-start: min(
+    var(--sigvelo-scroll-fade-size),
+    var(--scroll-area-overflow-y-start, 0px)
+  );
+  --sigvelo-scroll-fade-end: min(
+    var(--sigvelo-scroll-fade-size),
+    var(--scroll-area-overflow-y-end, 0px)
+  );
   -webkit-mask-image: linear-gradient(
     to bottom,
     transparent 0,

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

@@ -91,16 +91,6 @@
 }
 
 .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) var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
   overscroll-behavior: contain;
   scrollbar-gutter: stable;

package/dist/styles/tokens.css

@@ -1 +1,7 @@
 @import "@mcp-b/design-tokens";
+
+/* Opt-in accent and design-language presets, inert until data-preset or
+   data-style is set on the root. Imported after the main tokens so their
+   equal-specificity overrides win by order. */
+@import "@mcp-b/design-tokens/color-presets";
+@import "@mcp-b/design-tokens/style-presets";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "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.22.0"
+    "@mcp-b/design-tokens": "0.23.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",