@mcp-b/react-components 0.20.0 → 0.20.4

package/dist/styles/chain-of-thought.css

@@ -44,7 +44,7 @@
   background-color: var(--sigvelo-color-primary-bg-subtle);
   border-color: var(--sigvelo-color-primary-border-muted);
   color: var(--sigvelo-color-primary-text);
-  animation: chain-of-thought-spin 1.6s linear infinite;
+  animation: sigvelo-icon-spin 1.6s linear infinite;
 }
 
 .chain-of-thought__step-body {
@@ -105,9 +105,6 @@
   color: var(--sigvelo-color-text);
   text-decoration: none;
   max-inline-size: 18rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   transition:
     background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
     border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
@@ -157,15 +154,6 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-@keyframes chain-of-thought-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .chain-of-thought__step--active .chain-of-thought__step-indicator {
     animation: none;
@@ -184,7 +172,7 @@
 
   .chain-of-thought__header:focus-visible,
   .chain-of-thought__search-result:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 }

package/dist/styles/checkbox-group.css

@@ -52,12 +52,6 @@
 }
 
 .checkbox-group__title,
-.checkbox-group__description {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .checkbox-group__title {
   font-weight: var(--sigvelo-font-weight-semibold);
 }

package/dist/styles/codex-model-selector.css

@@ -60,10 +60,7 @@
   justify-content: center;
   gap: var(--sigvelo-spacing-1);
   min-inline-size: 0;
-  overflow: hidden;
   text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .codex-model-selector__summary-effort,
@@ -145,9 +142,6 @@
 .codex-model-selector__submenu-value {
   min-inline-size: 0;
   margin-inline-start: auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .codex-model-selector__option {

package/dist/styles/commit.css

@@ -67,10 +67,7 @@
 
 .commit__message {
   min-inline-size: 0;
-  overflow: hidden;
   font-weight: var(--sigvelo-font-weight-semibold);
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .commit__metadata {
@@ -146,9 +143,6 @@
   color: var(--sigvelo-color-text);
   flex: 1;
   min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .commit__file-additions {
@@ -177,7 +171,7 @@
   }
 
   .commit__header:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 }

package/dist/styles/environment-variables.css

@@ -88,9 +88,6 @@
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-sm);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .environment-variables__required {

package/dist/styles/file-tree.css

@@ -159,7 +159,7 @@
 
   .file-tree__node:focus-visible,
   .file-tree__node[data-focused] {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 

package/dist/styles/inline-citation.css

@@ -68,13 +68,10 @@
 }
 
 .inline-citation__title {
-  overflow: hidden;
   color: var(--sigvelo-color-text);
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-compact);
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .inline-citation__location,
@@ -100,7 +97,7 @@
 
 @media (forced-colors: active) {
   .inline-citation__trigger:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
     box-shadow: none;
   }

package/dist/styles/mcp-server-picker.css

@@ -110,9 +110,6 @@
 
 .mcp-server-picker__description {
   min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   color: var(--sigvelo-color-text);
 }
 

package/dist/styles/message.css

@@ -83,12 +83,6 @@
   flex-shrink: 0;
 }
 
-.message__attachment-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .message__attachment-zoom {
   display: block;
   min-block-size: 0;

package/dist/styles/model-selector.css

@@ -181,7 +181,7 @@
 @media (forced-colors: active) {
   .model-selector__item:focus-visible,
   .model-selector__item:hover {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: -2px;
   }
 }

package/dist/styles/prompt-input.css

@@ -141,12 +141,6 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.prompt-input__attachment-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .prompt-input__attachment-remove {
   display: inline-flex;
   align-items: center;
@@ -283,7 +277,7 @@
 }
 
 .prompt-input__dictation[data-starting] .prompt-input__dictation-icon {
-  animation: prompt-input-spin 900ms linear infinite;
+  animation: sigvelo-icon-spin 900ms linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -328,7 +322,7 @@
 }
 
 .prompt-input__submit-spinner {
-  animation: prompt-input-spin 900ms linear infinite;
+  animation: sigvelo-icon-spin 900ms linear infinite;
 }
 
 .prompt-input__action-menu {
@@ -563,12 +557,6 @@
   min-inline-size: 0;
 }
 
-.prompt-input__command-description {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .prompt-input__command-meta {
   color: var(--prompt-input-secondary-text);
   font-size: var(--sigvelo-density-compact-control-font-size);
@@ -603,10 +591,7 @@
 }
 
 .prompt-input__reference-label {
-  overflow: hidden;
   max-inline-size: 18rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .prompt-input__reference-remove {
@@ -638,13 +623,6 @@
   max-inline-size: min(20rem, 45cqi);
 }
 
-.prompt-input__context-category,
-.prompt-input__context-value {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .prompt-input__context-category {
   flex: 0 0 auto;
   color: var(--sigvelo-color-text);
@@ -673,15 +651,6 @@
   margin-inline-start: auto;
 }
 
-@keyframes prompt-input-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .prompt-input__submit-spinner {
     animation: none;
@@ -694,7 +663,7 @@
   }
 
   .prompt-input:focus-within {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 }

package/dist/styles/queue.css

@@ -237,7 +237,7 @@
   }
 
   .queue__section-trigger:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 }

package/dist/styles/recipes.css

@@ -740,7 +740,7 @@
     [data-slot="number-field-input"],
     [data-slot="toolbar-input"]
   ):focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
     box-shadow: none;
   }
@@ -750,7 +750,7 @@
     [data-slot="reasoning-trigger"],
     [data-slot="sources-trigger"]
   ):focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
     box-shadow: none;
   }

package/dist/styles/sources.css

@@ -62,9 +62,6 @@
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .sources__link-description {
@@ -90,7 +87,7 @@
   }
 
   .sources__link:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 }

package/dist/styles/stepper.css

@@ -119,7 +119,7 @@
 }
 
 .stepper__indicator[data-loading] .stepper__indicator-content {
-  animation: stepper-spin 800ms linear infinite;
+  animation: sigvelo-icon-spin 800ms linear infinite;
 }
 
 .stepper__separator {
@@ -206,12 +206,6 @@
   display: none;
 }
 
-@keyframes stepper-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .stepper__indicator[data-loading] .stepper__indicator-content {
     animation: none;

package/dist/styles/subagent-run.css

@@ -43,12 +43,9 @@
 
 .subagent-run__title {
   min-inline-size: 0;
-  overflow: hidden;
   color: var(--sigvelo-color-text);
   font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .subagent-run__selector .subagent-run__title {

package/dist/styles/task.css

@@ -123,7 +123,7 @@
   }
 
   .task__trigger:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 }

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;
@@ -285,7 +270,7 @@
   }
 
   .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

@@ -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.0",
+  "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.0"
+    "@mcp-b/design-tokens": "0.20.4"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",