@mcp-b/react-components 0.20.4 → 0.20.5

package/dist/components/MessageScroller.js

@@ -22,6 +22,7 @@ function MessageScroller({ className, ...props }) {
 function MessageScrollerViewport({ className, ...props }) {
 	return /* @__PURE__ */ jsx(MessageScroller$1.Viewport, {
 		"data-slot": "message-scroller-viewport",
+		"data-recipe": "scroll-fade-y",
 		className: cx("message-scroller__viewport", className),
 		...props
 	});

package/dist/components/Stepper.js

@@ -71,13 +71,12 @@ function Stepper({ defaultValue = 1, value, onValueChange, orientation = "horizo
 	});
 }
 function StepperNav({ className, ref, ...props }) {
-	const { activeStep, orientation } = useStepper();
+	const { activeStep } = useStepper();
 	return /* @__PURE__ */ jsx(Tabs.List, {
 		ref,
 		className: mergeBaseClassName("stepper__nav", className),
 		"data-active-step": activeStep,
 		"data-slot": "stepper-list",
-		"data-orientation": orientation,
 		unstyled: true,
 		...props
 	});
@@ -191,8 +190,6 @@ function StepperPanel({ className, ref, ...props }) {
 	});
 }
 function StepperContent({ value, forceMount = false, spacing = "none", className, children, ref, ...props }) {
-	const { activeStep } = useStepper();
-	const isActive = activeStep === value;
 	return /* @__PURE__ */ jsx(Tabs.Panel, {
 		ref,
 		value,
@@ -200,7 +197,6 @@ function StepperContent({ value, forceMount = false, spacing = "none", className
 		className: mergeBaseClassName("stepper__content", className),
 		"data-spacing": spacing,
 		"data-slot": "stepper-content",
-		"data-state": isActive ? "active" : "inactive",
 		unstyled: true,
 		...props,
 		children

package/dist/components/TestResults.js

@@ -1,6 +1,7 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
 import { K as SpinnerIcon, et as XIcon, p as ChevronRightIcon, u as CheckIcon } from "../icons-DyOM0EJs.js";
+import { Progress } from "./Progress.js";
 import { Badge } from "./Badge.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -122,22 +123,21 @@ function TestResultsProgress({ className, children, ref, ...props }) {
 		ref,
 		className: cx("test-results__progress", className),
 		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsx(Progress.Root, {
 			"aria-label": "Test progress",
-			"aria-valuemax": summary.total,
-			"aria-valuemin": 0,
-			"aria-valuenow": summary.passed,
-			"aria-valuetext": `${summary.passed}/${summary.total} tests passed, ${summary.failed} failed`,
-			className: "test-results__progress-track",
-			"data-slot": "progress-track",
-			role: "progressbar",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "test-results__progress-segment test-results__progress-segment--passed",
-				style: { inlineSize: `${passedPercent}%` }
-			}), /* @__PURE__ */ jsx("div", {
-				className: "test-results__progress-segment test-results__progress-segment--failed",
-				style: { inlineSize: `${failedPercent}%` }
-			})]
+			value: summary.passed,
+			max: summary.total,
+			getAriaValueText: () => `${summary.passed}/${summary.total} tests passed, ${summary.failed} failed`,
+			children: /* @__PURE__ */ jsxs(Progress.Track, {
+				className: "test-results__progress-track",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "test-results__progress-segment test-results__progress-segment--passed",
+					style: { inlineSize: `${passedPercent}%` }
+				}), /* @__PURE__ */ jsx("div", {
+					className: "test-results__progress-segment test-results__progress-segment--failed",
+					style: { inlineSize: `${failedPercent}%` }
+				})]
+			})
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "test-results__progress-label",
 			children: [

package/dist/components/ThinkChatActivitySummary.js

@@ -1,3 +1,4 @@
+import { t as capitalize } from "../format-S6uWyoSb.js";
 import { displayUrl, getToolDisplayName, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSessionContextToolFailure, isSessionContextToolPart, isSkillToolPart, isWorkspaceToolPart } from "./ThinkChatToolParts.js";
 import { t as summarizeToolInput } from "../summarize-tool-input-CqTcGRYy.js";
 import { getToolName, isReasoningUIPart, isToolUIPart } from "ai";
@@ -339,8 +340,7 @@ function summarizeActivitySteps(parts) {
 	for (const segment of genericSegments) if (!includedSegments.has(segment)) segments.push(segment);
 	if (segments.length === 0) return "Worked";
 	const top = segments.slice(0, 3);
-	const joined = top.length === 1 ? top[0] : `${top.slice(0, -1).join(", ")} and ${top.at(-1)}`;
-	return joined.charAt(0).toUpperCase() + joined.slice(1);
+	return capitalize(top.length === 1 ? top[0] : `${top.slice(0, -1).join(", ")} and ${top.at(-1)}`);
 }
 /** Derive the serializable collapsed header from persisted AI SDK message parts. */
 function deriveThinkChatActivityHeader(parts, options = {}) {

package/dist/components/ThinkExecutionRun.js

@@ -1,3 +1,4 @@
+import { t as capitalize } from "../format-S6uWyoSb.js";
 //#region src/components/ThinkExecutionRun.ts
 /** Narrows the direct upstream execution union without wrapping either record. */
 function isThinkSubmissionRun(run) {
@@ -35,8 +36,7 @@ function getThinkExecutionRunStatusTone(run) {
 	return "neutral";
 }
 function formatThinkExecutionStatus(status) {
-	const words = status.replaceAll(/([a-z])([A-Z])/g, "$1 $2");
-	return words.charAt(0).toUpperCase() + words.slice(1);
+	return capitalize(status.replaceAll(/([a-z])([A-Z])/g, "$1 $2"));
 }
 function formatThinkExecutionTimestamp(value, fallback = "Not recorded") {
 	if (value == null) return fallback;

package/dist/components/ThinkRoutine.js

@@ -1,17 +1,9 @@
+import { formatThinkExecutionShortTimestamp } from "./ThinkExecutionRun.js";
 //#region src/components/ThinkRoutine.ts
 function getThinkRoutineNextRun(routine) {
 	if (!routine.schedule) return null;
 	if (!routine.enabled) return "Paused";
-	return formatThinkExecutionDate(routine.schedule.time * 1e3, "Not scheduled");
-}
-function formatThinkExecutionDate(value, fallback) {
-	const date = value instanceof Date ? value : new Date(value);
-	return Number.isNaN(date.getTime()) ? fallback : date.toLocaleString(void 0, {
-		month: "short",
-		day: "numeric",
-		hour: "numeric",
-		minute: "2-digit"
-	});
+	return formatThinkExecutionShortTimestamp(routine.schedule.time * 1e3, "Not scheduled");
 }
 //#endregion
 export { getThinkRoutineNextRun };

package/dist/components/ThinkThreadPicker.js

@@ -187,6 +187,7 @@ 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/accordion.css

@@ -3,7 +3,8 @@
 }
 
 .accordion__item {
-  border-block-end: 1px solid var(--sigvelo-color-neutral-border-muted);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
 }
 
 .accordion__item:last-child {

package/dist/styles/activity-header.css

@@ -28,29 +28,18 @@
 
 .activity[data-streaming] .activity__header-label,
 .activity__header[data-streaming] .activity__header-label {
-  --activity-shimmer-base: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
+  --sigvelo-shimmer-base: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
   background: linear-gradient(
     90deg,
-    var(--activity-shimmer-base) 0%,
-    var(--activity-shimmer-base) 40%,
+    var(--sigvelo-shimmer-base) 0% 40%,
     var(--sigvelo-color-text) 50%,
-    var(--activity-shimmer-base) 60%,
-    var(--activity-shimmer-base) 100%
+    var(--sigvelo-shimmer-base) 60% 100%
   );
   background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
-  animation: activity-shimmer 2.4s linear infinite;
-}
-
-@keyframes activity-shimmer {
-  from {
-    background-position: 100% 0;
-  }
-  to {
-    background-position: -100% 0;
-  }
+  animation: sigvelo-text-shimmer var(--sigvelo-motion-duration-shimmer) linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/styles/agent-activity-preview-overlay.css

@@ -61,6 +61,18 @@
   }
 }
 
+/* Shadow-local copy of base.css's sigvelo-text-shimmer — keyframes do not cross
+   shadow roots, so the imported activity header shimmer needs it defined here.
+   --sigvelo-motion-duration-shimmer inherits across the boundary. */
+@keyframes sigvelo-text-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: -100% 0;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   :host {
     --sigvelo-color-warning-text: #f0aa45;

package/dist/styles/agent-activity-preview.css

@@ -94,7 +94,7 @@
 }
 
 .agent-activity-preview__item:first-child {
-  padding-inline-end: calc(2rem + var(--sigvelo-spacing-0-5));
+  padding-inline-end: calc(var(--sigvelo-spacing-8) + var(--sigvelo-spacing-0-5));
 }
 
 .agent-activity-preview__row {
@@ -166,7 +166,7 @@
 .agent-activity-preview__favicons {
   display: flex;
   align-items: center;
-  padding-inline-start: 0.25rem;
+  padding-inline-start: var(--sigvelo-spacing-1);
 }
 
 .agent-activity-preview__favicons img {
@@ -234,6 +234,6 @@
   .agent-activity-preview__dismiss,
   .agent-activity-preview__file-action,
   .agent-activity-preview__favicons img {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/agent-attention.css

@@ -4,7 +4,8 @@
   min-width: 0;
   gap: var(--sigvelo-spacing-1-5);
   padding: var(--sigvelo-spacing-1-5);
-  border: 1px solid var(--sigvelo-color-neutral-border-muted);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
   border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text);
   background: var(--sigvelo-color-surface);
@@ -90,26 +91,18 @@
 }
 
 .agent-attention[data-busy] .agent-attention__title {
-  --agent-attention-shimmer: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
+  --sigvelo-shimmer-base: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
   background: linear-gradient(
     90deg,
-    var(--agent-attention-shimmer) 0% 40%,
+    var(--sigvelo-shimmer-base) 0% 40%,
     var(--sigvelo-color-text) 50%,
-    var(--agent-attention-shimmer) 60% 100%
+    var(--sigvelo-shimmer-base) 60% 100%
   );
   background-size: 200% 100%;
+  -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
-  animation: agent-attention-shimmer 2.4s linear infinite;
-}
-
-@keyframes agent-attention-shimmer {
-  from {
-    background-position: 100% 0;
-  }
-  to {
-    background-position: -100% 0;
-  }
+  animation: sigvelo-text-shimmer var(--sigvelo-motion-duration-shimmer) linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce), (forced-colors: active) {

package/dist/styles/agent-connection.css

@@ -52,10 +52,10 @@
 .agent-connect__targets {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   min-inline-size: 0;
   margin: 0;
-  padding: 0.25rem;
+  padding: var(--sigvelo-spacing-1);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-md);

package/dist/styles/artifact.css

@@ -63,6 +63,6 @@
 
 @media (forced-colors: active) {
   .artifact {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/attachment-preview.css

@@ -14,7 +14,7 @@
 }
 
 .attachment-preview__name {
-  margin-block-start: 0.5rem;
+  margin-block-start: var(--sigvelo-spacing-2);
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   text-align: center;

package/dist/styles/badge.css

@@ -110,7 +110,7 @@
 
 @media (forced-colors: active) {
   .badge {
-    border: 1px solid ButtonText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
   }
 
   .badge--ghost,

package/dist/styles/base.css

@@ -35,6 +35,21 @@ body {
   }
 }
 
+/*
+ * Canonical "busy/streaming" text-shimmer sweep. Components own the gradient
+ * treatment and state gating; they share this keyframe and
+ * --sigvelo-motion-duration-shimmer. Shadow-isolated bundles keep a local copy
+ * (keyframes do not cross shadow roots), the same as sigvelo-icon-spin.
+ */
+@keyframes sigvelo-text-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: -100% 0;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .sigvelo-icon--spinner {
     animation: none;

package/dist/styles/browser-control-overlay.css

@@ -85,7 +85,7 @@
 :host .takeover,
 :host .owner {
   background: var(--browser-control-accent);
-  border: 1px solid var(--browser-control-accent-text);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--browser-control-accent-text);
   box-shadow: 0 2px 10px var(--browser-control-shadow);
   color: var(--browser-control-accent-text);
 }
@@ -120,7 +120,8 @@
 :host .banner {
   align-items: center;
   background: var(--browser-control-warning);
-  border: 1px solid var(--browser-control-warning-text);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--browser-control-warning-text);
   border-radius: 14px;
   box-shadow: 0 4px 18px var(--browser-control-shadow);
   color: var(--browser-control-warning-text);
@@ -147,7 +148,7 @@
 
 :host .banner .done,
 :host .banner .cannot {
-  border: 1px solid currentcolor;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) currentcolor;
   color: inherit;
   flex-shrink: 0;
 }

package/dist/styles/browser-live-view.css

@@ -41,7 +41,7 @@
 .browser-live-view__badge-dot {
   inline-size: var(--sigvelo-spacing-1-5);
   block-size: var(--sigvelo-spacing-1-5);
-  border-radius: 50%;
+  border-radius: var(--sigvelo-radius-circle);
   background-color: currentColor;
   animation: browser-live-view-pulse 1.4s ease-in-out infinite;
 }

package/dist/styles/browser-replay.css

@@ -39,7 +39,7 @@
   inset: 0;
   display: grid;
   place-content: center;
-  padding: 1rem;
+  padding: var(--sigvelo-spacing-4);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
   text-align: center;
@@ -49,7 +49,7 @@
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-2-5);
-  padding-block: 0.5rem;
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -184,6 +184,6 @@
 
 @media (forced-colors: active) {
   .browser-replay {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/browser-run-panel.css

@@ -52,7 +52,7 @@
   inline-size: 1.125rem;
   block-size: 1.125rem;
   place-items: center;
-  border-radius: 50%;
+  border-radius: var(--sigvelo-radius-circle);
   background: var(--sigvelo-color-primary-bg-subtle);
   color: var(--sigvelo-color-primary-text);
   font-size: var(--sigvelo-text-3xs);

package/dist/styles/button.css

@@ -185,7 +185,7 @@
 
 @media (forced-colors: active) {
   .button {
-    border: 1px solid ButtonText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
   }
 
   .button--ghost,

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

@@ -167,7 +167,7 @@
 @media (forced-colors: active) {
   .chain-of-thought__step-indicator,
   .chain-of-thought__search-result {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .chain-of-thought__header:focus-visible,

package/dist/styles/chatgpt-sign-in-screen.css

@@ -9,7 +9,7 @@
   min-inline-size: 17.5rem;
   display: grid;
   place-items: center;
-  padding: clamp(1.25rem, 5vw, 3rem);
+  padding: clamp(var(--sigvelo-spacing-5), 5vw, var(--sigvelo-spacing-12));
   background-color: var(--sigvelo-color-canvas);
   background-image:
     linear-gradient(
@@ -56,7 +56,7 @@
   z-index: 1;
   isolation: isolate;
   display: grid;
-  gap: 1.25rem;
+  gap: var(--sigvelo-spacing-5);
   justify-items: center;
   text-align: center;
 }

package/dist/styles/checkbox-group.css

@@ -1,7 +1,7 @@
 .checkbox-group {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
 }
 
 .checkbox-group[data-layout="grid"] {

package/dist/styles/code-block.css

@@ -13,8 +13,8 @@
 .code-block__header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   background-color: transparent;
 }
@@ -22,7 +22,7 @@
 .code-block__title {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
@@ -37,7 +37,7 @@
 .code-block__actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   margin-inline-start: auto;
   flex-shrink: 0;
 }
@@ -111,6 +111,6 @@
 
 @media (forced-colors: active) {
   .code-block {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/commit.css

@@ -167,7 +167,7 @@
 @media (forced-colors: active) {
   .commit,
   .commit__file {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .commit__header:focus-visible {

package/dist/styles/environment-variables.css

@@ -20,7 +20,7 @@
 .environment-variables__toggle {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   cursor: pointer;
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
@@ -57,7 +57,7 @@
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-2-5);
-  padding-block: 0.5rem;
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: 0.875rem;
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -80,7 +80,7 @@
   flex: 1;
   min-width: 0;
   padding-block: 0.3125rem;
-  padding-inline: 0.5rem;
+  padding-inline: var(--sigvelo-spacing-2);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
@@ -101,6 +101,6 @@
 @media (forced-colors: active) {
   .environment-variables,
   .environment-variables__row {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/fieldset.css

@@ -15,7 +15,7 @@
 }
 
 .fieldset__legend {
-  padding: 0 0.5rem;
+  padding: 0 var(--sigvelo-spacing-2);
   margin: 0 -0.5rem;
   font-family: inherit;
   font-size: var(--sigvelo-text-compact);

package/dist/styles/file-tree.css

@@ -154,7 +154,7 @@
 
 @media (forced-colors: active) {
   .file-tree {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .file-tree__node:focus-visible,

package/dist/styles/github-motion-mark.css

@@ -24,7 +24,7 @@
 
 .github-motion-mark::before {
   inset: -0.22em;
-  border: 1px solid currentColor;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) currentColor;
   border-radius: 999px;
   opacity: 0.24;
   transform-origin: 50% 50%;

package/dist/styles/label.css

@@ -1,7 +1,7 @@
 .label {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);

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

@@ -196,7 +196,7 @@
 
 @media (forced-colors: active) {
   .mcp-server-picker__avatar-fallback {
-    border: 1px solid ButtonText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
   }
 
   .mcp-server-picker__row-shell:has(.mcp-server-picker__row[data-highlighted]) {

package/dist/styles/menu.css

@@ -49,7 +49,7 @@
   inline-size: var(--sigvelo-spacing-2);
   block-size: var(--sigvelo-spacing-2);
   background-color: currentColor;
-  border-radius: 50%;
+  border-radius: var(--sigvelo-radius-circle);
 }
 
 .menu__checkbox-indicator::before {