@mcp-b/react-components 0.20.1 → 0.20.4

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

@@ -75,6 +75,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,

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 {

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"] {
@@ -180,11 +177,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 {
@@ -299,7 +293,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 {
@@ -339,12 +333,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;

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/workspace-explorer.css

@@ -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.4",
   "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.4"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",