@mcp-b/react-components 0.20.1 → 0.20.5

package/dist/styles/test-results.css

@@ -126,9 +126,6 @@
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-normal);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .test-results__suite-stats {
@@ -191,7 +188,7 @@
 
 .test-results__test-status--running {
   color: var(--sigvelo-color-primary-text);
-  animation: test-results-spin 1.4s linear infinite;
+  animation: sigvelo-icon-spin 1.4s linear infinite;
 }
 
 .test-results__test-name {
@@ -200,9 +197,6 @@
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .test-results__test-duration {
@@ -250,15 +244,6 @@
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
-@keyframes test-results-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .test-results__progress-segment {
     transition: none;
@@ -281,11 +266,11 @@
   .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 {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 }

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] {
@@ -75,6 +74,6 @@
   }
 
   .theme-mode-control__item.radio:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
   }
 }

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

@@ -26,13 +26,7 @@
     [data-status="rollingBack"]
   )
   svg {
-  animation: think-execution-status-spin 0.8s linear infinite;
-}
-
-@keyframes think-execution-status-spin {
-  to {
-    transform: rotate(360deg);
-  }
+  animation: sigvelo-icon-spin 0.8s linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -144,11 +144,8 @@
 
 .think-execution-workbench__run-title {
   min-inline-size: 0;
-  overflow: hidden;
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .think-execution-workbench__run-copy code,
@@ -268,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

@@ -187,9 +187,6 @@ body.is-resizing-side-panel .think-full-app__view-scope {
 
   .think-full-app__thread-trigger-title {
     min-inline-size: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   .think-full-app__thread-trigger > svg {
@@ -308,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;

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

@@ -27,13 +27,10 @@
   min-inline-size: 0;
   margin: 0;
   flex: 1 1 auto;
-  overflow: hidden;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-density-compact-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .think-thread-picker__search {
@@ -72,7 +69,7 @@
 }
 
 .think-thread-status-indicators__item[data-status="running"] svg {
-  animation: think-thread-picker-spin 900ms linear infinite;
+  animation: sigvelo-icon-spin 900ms linear infinite;
 }
 
 .think-thread-status-indicators__item[data-status="attention"] {
@@ -99,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 {
@@ -180,11 +167,8 @@
 .think-thread-picker__thread-title {
   min-inline-size: 0;
   display: block;
-  overflow: hidden;
   font-size: var(--sigvelo-density-compact-control-font-size);
   line-height: var(--sigvelo-leading-tight);
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .think-thread-picker__delete {
@@ -255,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 {
@@ -299,7 +283,7 @@
 .think-thread-picker__thread[data-thread-status="recovering"]
   .think-thread-picker__thread-status
   svg {
-  animation: think-thread-picker-spin 900ms linear infinite;
+  animation: sigvelo-icon-spin 900ms linear infinite;
 }
 
 .think-thread-picker__thread[data-thread-status="error"] .think-thread-picker__thread-status {
@@ -313,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);
@@ -339,12 +323,6 @@
   flex: 0 0 auto;
 }
 
-@keyframes think-thread-picker-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @container responsive-sidebar-shell (inline-size <= 56rem) {
   .think-thread-picker {
     block-size: auto;
@@ -409,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/toggle-group.css

@@ -40,7 +40,7 @@
 
 @media (forced-colors: active) {
   .toggle-group__item[data-pressed] {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: -2px;
   }
 }

package/dist/styles/utilities.css

@@ -23,9 +23,13 @@
 }
 
 .sigvelo-truncate {
-  min-inline-size: 0;
-  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* Truncating flex child that also grows to fill its track. */
+.sigvelo-truncate-grow {
+  min-inline-size: 0;
+  flex: 1;
+}

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"] {
@@ -534,7 +534,7 @@
 
 @media (forced-colors: active) {
   .workspace-explorer__tree .file-tree__node:is([data-focused], :focus-visible) {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: -2px;
     background-color: Canvas;
     color: CanvasText;

package/dist/view-transitions-DyUP0lSg.js

@@ -0,0 +1,77 @@
+import { flushSync } from "react-dom";
+//#region src/components/_internal/view-transitions.ts
+let documentScopeSequence = 0;
+let restoreActiveDocumentScope = null;
+/**
+* Reports whether motion should be suppressed, honoring both the app-level
+* `data-motion="reduce"` override and the `prefers-reduced-motion` media query.
+* Returns `true` (reduced) when there is no document, e.g. during SSR.
+*/
+function motionIsReduced() {
+	if (typeof document === "undefined") return true;
+	if (document.documentElement.dataset.motion === "reduce") return true;
+	return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+}
+function isReactTestEnvironment() {
+	return globalThis.IS_REACT_ACT_ENVIRONMENT;
+}
+function scopeDocumentTransition(scope) {
+	if (!(scope instanceof HTMLElement || scope instanceof SVGElement)) return null;
+	restoreActiveDocumentScope?.();
+	const rootStyle = document.documentElement.style;
+	const scopeStyle = scope.style;
+	const rootValue = rootStyle.getPropertyValue("view-transition-name");
+	const rootPriority = rootStyle.getPropertyPriority("view-transition-name");
+	const scopeValue = scopeStyle.getPropertyValue("view-transition-name");
+	const scopePriority = scopeStyle.getPropertyPriority("view-transition-name");
+	rootStyle.setProperty("view-transition-name", "none", "important");
+	scopeStyle.setProperty("view-transition-name", `sigvelo-transition-scope-${++documentScopeSequence}`, "important");
+	let active = true;
+	const restore = () => {
+		if (!active) return;
+		active = false;
+		if (rootValue) rootStyle.setProperty("view-transition-name", rootValue, rootPriority);
+		else rootStyle.removeProperty("view-transition-name");
+		if (scopeValue) scopeStyle.setProperty("view-transition-name", scopeValue, scopePriority);
+		else scopeStyle.removeProperty("view-transition-name");
+		if (restoreActiveDocumentScope === restore) restoreActiveDocumentScope = null;
+	};
+	restoreActiveDocumentScope = restore;
+	return restore;
+}
+/**
+* Runs one synchronous React update inside the narrowest supported native view
+* transition. Unsupported and reduced-motion environments commit immediately.
+*/
+function runViewTransition({ scope, update }) {
+	let committed = false;
+	const commitOnce = () => {
+		if (committed) return;
+		committed = true;
+		flushSync(update);
+	};
+	if (typeof document === "undefined" || motionIsReduced() || isReactTestEnvironment()) {
+		commitOnce();
+		return null;
+	}
+	const scopedHost = scope;
+	const documentHost = document;
+	const useScopedHost = typeof scopedHost?.startViewTransition === "function";
+	const host = useScopedHost ? scopedHost : typeof documentHost.startViewTransition === "function" ? documentHost : null;
+	if (!host?.startViewTransition) {
+		commitOnce();
+		return null;
+	}
+	const restoreDocumentScope = useScopedHost ? null : scopeDocumentTransition(scope);
+	try {
+		const transition = host.startViewTransition(commitOnce);
+		if (restoreDocumentScope) transition.finished.finally(restoreDocumentScope).catch(() => void 0);
+		return transition;
+	} catch {
+		restoreDocumentScope?.();
+		commitOnce();
+		return null;
+	}
+}
+//#endregion
+export { runViewTransition as n, motionIsReduced as t };

package/package.json

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