@mcp-b/react-components 0.31.6 → 0.32.0

package/dist/components/agents-sdk/AgentChat.js

@@ -113,10 +113,14 @@ function getCopyableResponseText(message) {
 }
 function AgentChatAssistantActions({ message, responseNumber, showCopy, showRetry, onRegenerate, onCopyStatus }) {
 	const copyText = getCopyableResponseText(message);
-	if ((!showCopy || !copyText) && !showRetry) return null;
+	const hasCopy = showCopy && copyText !== void 0;
+	const hasRetry = showRetry && onRegenerate !== void 0;
+	const hasActions = hasCopy || hasRetry;
 	return /* @__PURE__ */ jsxs(MessageActions, {
 		"aria-label": `Actions for response ${responseNumber}`,
-		children: [showCopy && copyText ? /* @__PURE__ */ jsx(CopyButton, {
+		"aria-hidden": hasActions ? void 0 : true,
+		className: "message__actions--reserved",
+		children: [hasCopy ? /* @__PURE__ */ jsx(CopyButton, {
 			className: "message__action",
 			label: `Copy response ${responseNumber}`,
 			tooltip: "Copy response",
@@ -124,7 +128,7 @@ function AgentChatAssistantActions({ message, responseNumber, showCopy, showRetr
 			size: "sm",
 			onCopy: () => onCopyStatus(`Response ${responseNumber} copied.`),
 			onError: () => onCopyStatus(`Could not copy response ${responseNumber}. Try again.`)
-		}) : null, showRetry && onRegenerate ? /* @__PURE__ */ jsx(MessageAction, {
+		}) : null, hasRetry ? /* @__PURE__ */ jsx(MessageAction, {
 			label: "Retry",
 			tooltip: "Regenerate response",
 			onClick: () => onRegenerate(message.id),
@@ -151,7 +155,7 @@ function isCompactedPart(message, partIndex) {
 * referentially stable across updates (AI SDK chat state does); see
 * "Transcript rendering performance" in docs/think-chat.md.
 */
-function AgentChatTranscriptRowBodyImpl({ message, messageIndex, status, renderPart, renderMessageAfter, editing, canEdit, onEditAndResend, onStartEdit, onCancelEdit, onFinishEdit, editButtonRef, responseNumber, showAssistantActions, showCopy, showRetry, onRegenerate, onCopyStatus }) {
+function AgentChatTranscriptRowBodyImpl({ message, messageIndex, status, renderPart, renderMessageAfter, editing, canEdit, editDisabled, onEditAndResend, onStartEdit, onCancelEdit, onFinishEdit, editButtonRef, responseNumber, showAssistantActions, showCopy, showRetry, onRegenerate, onCopyStatus }) {
 	return /* @__PURE__ */ jsx(Fragment, { children: isCompactionMessage(message) ? /* @__PURE__ */ jsx(Marker, {
 		variant: "separator",
 		children: /* @__PURE__ */ jsx(MarkerContent, { children: "Context compacted" })
@@ -183,8 +187,12 @@ function AgentChatTranscriptRowBodyImpl({ message, messageIndex, status, renderP
 			}),
 			canEdit && getEditableUserText(message) !== void 0 ? /* @__PURE__ */ jsx(MessageActions, {
 				"aria-label": "Message actions",
+				"aria-hidden": editDisabled || void 0,
+				className: "message__actions--inline",
+				"data-unavailable": editDisabled || void 0,
 				children: /* @__PURE__ */ jsx(MessageAction, {
 					ref: editButtonRef,
+					disabled: editDisabled,
 					label: "Edit message",
 					tooltip: "Edit and resend",
 					onClick: () => onStartEdit(message.id),
@@ -236,6 +244,16 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 	const [copyAnnouncement, setCopyAnnouncement] = React.useState("");
 	const [composerDraft, setComposerDraft] = React.useState("");
 	const [composerReferences, setComposerReferences] = React.useState([]);
+	const composerInputRef = React.useRef(null);
+	const restoreComposerFocusAfterApproval = React.useRef(false);
+	const respondToPendingApproval = React.useCallback((response) => {
+		restoreComposerFocusAfterApproval.current = true;
+		return onApprovalResponse?.(response);
+	}, [onApprovalResponse]);
+	const handlePendingExecutionSettled = React.useCallback(async () => {
+		restoreComposerFocusAfterApproval.current = true;
+		await onExecutionSettled?.();
+	}, [onExecutionSettled]);
 	const [pendingPrompts, setPendingPrompts] = React.useState([]);
 	const [queueHeld, setQueueHeld] = React.useState(false);
 	const busy = status === "submitted" || status === "streaming";
@@ -425,10 +443,16 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 		thinkStub
 	]);
 	const pendingApproval = !permissionModeControl && permissionMode === "bypass" ? void 0 : pendingApprovalItems[0];
+	const pendingApprovalKey = pendingApproval ? "part" in pendingApproval ? getApprovalStateKey(pendingApproval.part) : pendingApproval.approval.executionId : void 0;
+	React.useLayoutEffect(() => {
+		if (pendingApprovalKey || !restoreComposerFocusAfterApproval.current) return;
+		restoreComposerFocusAfterApproval.current = false;
+		composerInputRef.current?.focus();
+	}, [pendingApprovalKey]);
 	const contextUsage = contextWindow ? getContextUsage(messages) : void 0;
 	const newestAssistantIndex = messages.findLastIndex((message) => message.role === "assistant" && !isCompactionMessage(message));
 	const lastAssistantIndex = onRegenerate && status !== "streaming" && status !== "submitted" ? newestAssistantIndex : -1;
-	const lastUserIndex = onEditAndResend && !disabled && status !== "streaming" && status !== "submitted" ? messages.findLastIndex((message) => message.role === "user") : -1;
+	const lastUserIndex = onEditAndResend ? messages.findLastIndex((message) => message.role === "user") : -1;
 	const [editingMessageId, setEditingMessageId] = React.useState();
 	const restoreEditFocus = React.useRef(false);
 	const editButtonRef = React.useRef(null);
@@ -463,6 +487,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 		renderMessageAfter,
 		editing: editingMessageId === message.id,
 		canEdit: messageIndex === lastUserIndex,
+		editDisabled: disabled || busy,
 		onEditAndResend,
 		onStartEdit: handleStartEdit,
 		onCancelEdit: handleCancelEdit,
@@ -538,10 +563,11 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 					part: "part" in pendingApproval ? pendingApproval.part : void 0,
 					approval: "approval" in pendingApproval ? pendingApproval.approval : void 0,
 					count: pendingApprovalItems.length,
-					onRespond: onApprovalResponse,
+					onRespond: onApprovalResponse ? respondToPendingApproval : void 0,
 					thinkStub,
-					onExecutionSettled,
+					onExecutionSettled: handlePendingExecutionSettled,
 					onSkip: () => {
+						restoreComposerFocusAfterApproval.current = true;
 						const id = "part" in pendingApproval ? getApprovalStateKey(pendingApproval.part) : pendingApproval.approval.executionId;
 						if (id) updateApprovalSession((current) => ({
 							...current,
@@ -555,6 +581,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 						references: composerReferences,
 						onRemove: removeComposerReference
 					}), slashCommands || mentionCommands || onCompact ? /* @__PURE__ */ jsx(PromptInputCommandComposer, {
+						ref: composerInputRef,
 						"aria-label": "Message",
 						placeholder: composerReferences.length ? "" : placeholder,
 						disabled,
@@ -564,6 +591,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 						onValueChange: setComposerDraft,
 						onCommandSelect: selectComposerCommand
 					}) : /* @__PURE__ */ jsx(PromptInputTextarea, {
+						ref: composerInputRef,
 						"aria-label": "Message",
 						placeholder,
 						disabled,

package/dist/components/agents-sdk/ThinkRoutineBrowser.d.ts

@@ -7,6 +7,7 @@ interface ThinkRoutineBrowserProps<TRoutine extends ThinkRoutine = ThinkRoutine>
   routines: readonly TRoutine[];
   /** Routine selected by the current application route. */
   selectedRoutineId?: string | null;
+  /** Whether owner names are displayed and included in search. Defaults to true. */
   showOwner?: boolean;
   /** App-authored TanStack Router Link for each durable routine destination. */
   renderRoutineLink: (routine: TRoutine) => React.ReactElement;

package/dist/components/agents-sdk/ThinkRoutineBrowser.js

@@ -10,20 +10,20 @@ import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkRoutineBrowser.tsx
-function filterRoutines(routines, filter, query) {
+function filterRoutines(routines, filter, query, showOwner) {
 	const normalizedQuery = query.trim().toLocaleLowerCase();
 	return routines.filter((routine) => {
 		if (filter === "active" && !routine.enabled) return false;
 		if (filter === "paused" && routine.enabled) return false;
 		if (!normalizedQuery) return true;
-		return `${routine.name} ${routine.description ?? ""} ${routine.owner.name}`.toLocaleLowerCase().includes(normalizedQuery);
+		return `${routine.name} ${routine.description ?? ""}${showOwner ? ` ${routine.owner.name}` : ""}`.toLocaleLowerCase().includes(normalizedQuery);
 	});
 }
 /** Searchable, filterable navigation for an app-owned collection of Think routines. */
 function ThinkRoutineBrowser({ className, routines, selectedRoutineId, showOwner = true, renderRoutineLink, createRoutineLink, onRoutineLinkClick, ref, ...props }) {
 	const [filter, setFilter] = React.useState("all");
 	const [query, setQuery] = React.useState("");
-	const visibleRoutines = filterRoutines(routines, filter, query);
+	const visibleRoutines = filterRoutines(routines, filter, query, showOwner);
 	return /* @__PURE__ */ jsxs("nav", {
 		ref,
 		className: cx("think-routine-browser", "think-routine-library__browser", className),

package/dist/components/agents-sdk/ThinkRoutineLibrary.d.ts

@@ -26,7 +26,7 @@ interface ThinkRoutineLibraryProps<TRoutine extends ThinkRoutine = ThinkRoutine>
   renderEditRoutineLink?: (routine: TRoutine) => React.ReactElement;
   /** App-authored TanStack Router Link for recent execution destinations. */
   renderRunLink?: (routine: TRoutine, run: ThinkRoutineRunOf<TRoutine>) => React.ReactElement;
-  /** Whether to show routine owners in the browser and detail. Defaults to true. */
+  /** Whether owner names appear in the browser, search, and detail. Defaults to true. */
   showOwner?: boolean;
   /** Host-owned catalog error shown above the library without replacing loaded routines. */
   error?: React.ReactNode;

package/dist/components/ai-sdk/Approval.js

@@ -132,6 +132,7 @@ function ApprovalDecision({ className, onDecision, onSkip, subject = "this actio
 		children: [
 			/* @__PURE__ */ jsxs(Button, {
 				ref: approveRef,
+				autoFocus: true,
 				type: "button",
 				size: "sm",
 				variant: "ghost",

package/dist/components/ai-sdk/Message.js

@@ -200,11 +200,11 @@ function MessageBranchContent({ className, children, ref, ...props }) {
 		ref,
 		className: cx("message__branch-content", className),
 		...props,
-		children: items.map((item, index) => /* @__PURE__ */ jsx("div", {
+		children: React.Children.map(items, (item, index) => /* @__PURE__ */ jsx("div", {
 			className: "message__branch-panel",
 			hidden: index !== safeIndex,
 			children: item
-		}, React.isValidElement(item) && item.key != null ? item.key : index))
+		}))
 	});
 }
 /**

package/dist/components/ai-sdk/Plan.d.ts

@@ -159,8 +159,8 @@ declare function PlanSummaryContent({
   ...props
 }: PlanSummaryContentProps): React.JSX.Element;
 interface PlanSummaryStep {
-  /** Stable optional identity; the list index is used when omitted. */
-  id?: React.Key;
+  /** Stable identity retained when the host replaces or reorders the plan. */
+  id: React.Key;
   step: React.ReactNode;
   status: PlanStepStatus;
 }

package/dist/components/ai-sdk/Plan.js

@@ -198,10 +198,10 @@ function PlanSummaryList({ steps, side }) {
 		total: steps.length,
 		children: [/* @__PURE__ */ jsx(PlanSummaryTrigger, {}), /* @__PURE__ */ jsx(PlanSummaryContent, {
 			side,
-			children: /* @__PURE__ */ jsx(Plan, { children: /* @__PURE__ */ jsx(PlanContent, { children: steps.map((item, index) => /* @__PURE__ */ jsxs(PlanStep, {
+			children: /* @__PURE__ */ jsx(Plan, { children: /* @__PURE__ */ jsx(PlanContent, { children: steps.map((item) => /* @__PURE__ */ jsxs(PlanStep, {
 				status: item.status,
 				children: [/* @__PURE__ */ jsx(PlanStepIndicator, {}), /* @__PURE__ */ jsx(PlanStepTitle, { children: item.step })]
-			}, item.id ?? index)) }) })
+			}, item.id)) }) })
 		})]
 	});
 }

package/dist/components/ai-sdk/PromptInput.js

@@ -421,6 +421,7 @@ function PromptInputTextarea({ className, placeholder = "How can I help?", rows
 		ref: innerRef,
 		"data-prompt-input-textarea": "true",
 		className: cx("prompt-input__textarea", className),
+		"aria-label": "Message",
 		name: "message",
 		placeholder,
 		rows,

package/dist/components/ai-sdk/Reasoning.d.ts

@@ -12,7 +12,7 @@ declare function useReasoning(): ReasoningContextValue;
 interface ReasoningProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "onOpenChange" | "unstyled"> {
   /**
    * Whether the model is currently generating reasoning. When true the
-   * component auto-opens; it auto-closes once streaming ends.
+   * component auto-opens.
    */
   isStreaming?: boolean;
   /**
@@ -25,7 +25,8 @@ interface ReasoningProps extends Omit<React.ComponentProps<typeof Collapsible.Ro
 }
 /**
  * A collapsible "thinking" block for showing model reasoning (e.g. DeepSeek
- * R1, OpenAI o-series). Auto-expands while streaming and collapses when done.
+ * R1, OpenAI o-series). Auto-expands while streaming and stays open when done
+ * so settling a response does not shift the transcript.
  * Adapted from Vercel AI Elements and composed from the design system's
  * existing Collapsible and Activity presentation primitives.
  *

package/dist/components/ai-sdk/Reasoning.js

@@ -7,7 +7,6 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Reasoning.tsx
 const ReasoningContext = React.createContext(null);
-const AUTO_CLOSE_DELAY_MS = 1e3;
 const MS_IN_S = 1e3;
 function useReasoning() {
 	const ctx = React.useContext(ReasoningContext);
@@ -16,7 +15,8 @@ function useReasoning() {
 }
 /**
 * A collapsible "thinking" block for showing model reasoning (e.g. DeepSeek
-* R1, OpenAI o-series). Auto-expands while streaming and collapses when done.
+* R1, OpenAI o-series). Auto-expands while streaming and stays open when done
+* so settling a response does not shift the transcript.
 * Adapted from Vercel AI Elements and composed from the design system's
 * existing Collapsible and Activity presentation primitives.
 *
@@ -33,9 +33,7 @@ function useReasoning() {
 function Reasoning({ className, isStreaming = false, duration, open, defaultOpen, onOpenChange, children, ref, ...props }) {
 	const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? isStreaming);
 	const [internalDuration, setInternalDuration] = React.useState(duration);
-	const previousStreamingRef = React.useRef(isStreaming);
 	const startTimeRef = React.useRef(isStreaming ? Date.now() : null);
-	const hasEverStreamedRef = React.useRef(isStreaming);
 	const isControlled = open !== void 0;
 	const currentOpen = isControlled ? open : internalOpen;
 	const preventAutoOpen = defaultOpen === false;
@@ -51,7 +49,6 @@ function Reasoning({ className, isStreaming = false, duration, open, defaultOpen
 	]);
 	React.useEffect(() => {
 		if (isStreaming) {
-			hasEverStreamedRef.current = true;
 			if (startTimeRef.current === null) startTimeRef.current = Date.now();
 			return;
 		}
@@ -61,16 +58,7 @@ function Reasoning({ className, isStreaming = false, duration, open, defaultOpen
 		}
 	}, [duration, isStreaming]);
 	React.useEffect(() => {
-		const wasStreaming = previousStreamingRef.current;
 		if (isStreaming && !currentOpen && !preventAutoOpen) setOpenState(true);
-		if (!isStreaming && wasStreaming && hasEverStreamedRef.current && currentOpen) {
-			const closeTimer = window.setTimeout(() => {
-				setOpenState(false);
-			}, AUTO_CLOSE_DELAY_MS);
-			previousStreamingRef.current = isStreaming;
-			return () => window.clearTimeout(closeTimer);
-		}
-		previousStreamingRef.current = isStreaming;
 	}, [
 		currentOpen,
 		isStreaming,
@@ -122,7 +110,10 @@ function ReasoningTrigger({ className, children, getThinkingMessage = defaultGet
 		"data-slot": "reasoning-trigger",
 		className: cx("reasoning__trigger", className),
 		"data-streaming": isStreaming ? "" : void 0,
-		icon: children == null && isStreaming ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : void 0,
+		icon: children == null ? /* @__PURE__ */ jsx("span", {
+			className: "reasoning__status-icon",
+			children: isStreaming ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : null
+		}) : void 0,
 		action: children ?? getThinkingMessage(isStreaming, duration),
 		...props
 	});

package/dist/styles/activity.css

@@ -58,6 +58,8 @@
 
 .activity__trigger-icon {
   display: inline-flex;
+  flex: none;
+  margin-inline-start: auto;
   color: var(--sigvelo-color-text-muted);
   transition: rotate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter);
 }

package/dist/styles/agent-chat.css

@@ -65,12 +65,21 @@
 }
 
 .agent-chat-start-screen__content {
+  --agent-chat-start-screen-padding-block: clamp(
+    var(--sigvelo-spacing-5),
+    8vb,
+    var(--sigvelo-spacing-12)
+  );
+
   display: grid;
   grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
   inline-size: min(100%, var(--agent-chat-content-max-inline-size));
   min-block-size: 100%;
   margin-inline: auto;
-  padding: clamp(var(--sigvelo-spacing-5), 8vb, var(--sigvelo-spacing-12)) var(--sigvelo-spacing-4);
+  padding-block: max(var(--agent-chat-start-screen-padding-block), env(safe-area-inset-top, 0px))
+    max(var(--agent-chat-start-screen-padding-block), env(safe-area-inset-bottom, 0px));
+  padding-inline: max(var(--sigvelo-spacing-4), env(safe-area-inset-left, 0px))
+    max(var(--sigvelo-spacing-4), env(safe-area-inset-right, 0px));
 }
 
 .agent-chat-start-screen__primary {
@@ -323,7 +332,9 @@
   position: absolute;
   inset-inline: 0;
   inset-block-end: 0;
-  padding: 0 var(--sigvelo-spacing-6) var(--sigvelo-spacing-6);
+  padding-block: 0 max(var(--sigvelo-spacing-6), env(safe-area-inset-bottom, 0px));
+  padding-inline: max(var(--sigvelo-spacing-6), env(safe-area-inset-left, 0px))
+    max(var(--sigvelo-spacing-6), env(safe-area-inset-right, 0px));
 }
 
 /* Solid behind the composer itself, dissolving upward so passing transcript
@@ -415,6 +426,12 @@
 }
 
 @media (any-pointer: coarse) {
+  .agent-chat-start-screen__composer-tray > .button,
+  .agent-chat-starter__dismiss.button {
+    min-inline-size: var(--sigvelo-control-height-xl);
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+
   .agent-chat-starter__dismiss {
     opacity: 1;
   }
@@ -487,15 +504,17 @@
    only where there is genuinely no room for it. */
 @container agent-chat (width <= 36rem) {
   .agent-chat-start-screen__content {
-    padding-block: var(--sigvelo-spacing-5);
+    --agent-chat-start-screen-padding-block: var(--sigvelo-spacing-5);
   }
 
   .agent-chat-start-screen__heading {
     font-size: var(--sigvelo-text-2xl);
   }
 
-  .agent-chat-starter__action {
-    font-size: var(--sigvelo-text-sm);
+  .agent-chat-starter__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
@@ -509,8 +528,9 @@
 
 @media (max-height: 40rem) {
   .agent-chat-start-screen__content {
+    --agent-chat-start-screen-padding-block: var(--sigvelo-spacing-5);
+
     grid-template-rows: auto auto;
-    padding-block: var(--sigvelo-spacing-5);
   }
 
   .agent-chat-start-screen__primary {

package/dist/styles/base.css

@@ -164,6 +164,24 @@ a {
   touch-action: manipulation;
 }
 
+button,
+input,
+optgroup,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+:where(img, svg, video, canvas, audio, iframe, embed, object) {
+  display: block;
+}
+
+:where(img, video) {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
 ::selection {
   background-color: var(--sigvelo-color-selection-bg);
   color: var(--sigvelo-color-selection-text);

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

@@ -211,6 +211,14 @@
   }
 }
 
+@media (any-pointer: coarse) {
+  .codex-model-selector__trigger {
+    min-inline-size: var(--sigvelo-control-height-xl);
+    min-block-size: var(--sigvelo-control-height-xl);
+    max-inline-size: calc(100vi - var(--sigvelo-spacing-8));
+  }
+}
+
 @media (forced-colors: active) {
   .codex-model-selector__summary-effort--ultra {
     color: LinkText;

package/dist/styles/message.css

@@ -122,8 +122,34 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.message[data-from="user"] .message__actions {
-  align-self: flex-end;
+.message__actions--reserved {
+  min-block-size: var(--sigvelo-control-height-sm);
+}
+
+.message[data-from="user"]:has(> .message__actions--inline) {
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+.message[data-from="user"] > .message__actions--inline {
+  align-self: center;
+}
+
+.message[data-from="user"] > .message__actions--inline[data-unavailable] {
+  visibility: hidden;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .message[data-from="user"] > .message__actions--inline {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .message[data-from="user"]:hover > .message__actions--inline,
+  .message[data-from="user"]:focus-within > .message__actions--inline {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
 .message__action {
@@ -135,6 +161,10 @@
 }
 
 @media (any-pointer: coarse) {
+  .message__actions--reserved {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+
   .message__action {
     --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
   }

package/dist/styles/pricing-page.css

@@ -17,7 +17,7 @@
 
 .pricing-page__title {
   font-family: inherit;
-  font-size: 2.5rem;
+  font-size: var(--sigvelo-text-4xl);
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: var(--sigvelo-leading-tight);
   color: var(--sigvelo-color-text);
@@ -125,7 +125,7 @@
 
 .pricing-page__price-amount {
   font-family: inherit;
-  font-size: 2.5rem;
+  font-size: var(--sigvelo-text-4xl);
   font-weight: var(--sigvelo-font-weight-bold);
   font-variant-numeric: tabular-nums;
   color: var(--sigvelo-color-text);
@@ -274,7 +274,7 @@
 
 .pricing-page__calculator-amount {
   font-family: inherit;
-  font-size: 2rem;
+  font-size: var(--sigvelo-text-3xl);
   font-weight: var(--sigvelo-font-weight-bold);
   font-variant-numeric: tabular-nums;
   color: var(--sigvelo-color-text);
@@ -369,7 +369,7 @@
 
 @container (max-width: 768px) {
   .pricing-page__title {
-    font-size: 1.75rem;
+    font-size: var(--sigvelo-text-3xl);
   }
 
   .pricing-page__subtitle {
@@ -381,6 +381,6 @@
   }
 
   .pricing-page__price-amount {
-    font-size: 2rem;
+    font-size: var(--sigvelo-text-3xl);
   }
 }

package/dist/styles/prompt-input.css

@@ -373,18 +373,18 @@
 }
 
 @container prompt-input (inline-size <= 36rem) {
-  .prompt-input__textarea {
-    font-size: var(--sigvelo-text-base);
-    line-height: var(--sigvelo-text-base-leading);
-  }
-
   .prompt-input__footer {
     gap: var(--sigvelo-spacing-1);
+    flex-wrap: wrap;
+  }
+
+  .prompt-input__footer-end {
+    margin-inline-start: auto;
   }
 
   .prompt-input__tools {
     min-inline-size: 0;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
   }
 
   .prompt-input__button[data-responsive-label] {
@@ -664,7 +664,8 @@
 
   .prompt-input__button,
   .prompt-input__footer .button,
-  .prompt-input__attachment-remove {
+  .prompt-input__attachment-remove,
+  .prompt-input__reference.button {
     --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
   }
 
@@ -676,6 +677,12 @@
   .prompt-input__permissions-trigger,
   .prompt-input__context-trigger {
     min-inline-size: var(--sigvelo-control-height-xl);
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+
+  .prompt-input__reference-remove {
+    position: static;
+    opacity: 1;
   }
 
   .prompt-input__attachment[data-image] .prompt-input__attachment-remove {

package/dist/styles/reasoning.css

@@ -1,3 +1,9 @@
+.reasoning__status-icon {
+  display: inline-flex;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
+}
+
 .reasoning__text {
   padding-inline-start: var(--sigvelo-spacing-3);
   border-inline-start: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2)

package/dist/styles/think-full-app.css

@@ -289,15 +289,14 @@ body.is-resizing-side-panel .think-full-app__view-scope {
   .think-full-app .agent-chat__composer {
     padding-block: var(--sigvelo-spacing-2)
       max(var(--sigvelo-spacing-2), env(safe-area-inset-bottom, 0px));
-    padding-inline: max(var(--sigvelo-spacing-2), env(safe-area-inset-left, 0px))
-      max(var(--sigvelo-spacing-2), env(safe-area-inset-right, 0px));
+    padding-inline: max(var(--sigvelo-spacing-3), env(safe-area-inset-left, 0px))
+      max(var(--sigvelo-spacing-3), env(safe-area-inset-right, 0px));
   }
 
   .think-full-app .prompt-input {
     gap: var(--sigvelo-spacing-1);
     padding-block: var(--sigvelo-spacing-2);
     padding-inline: var(--sigvelo-spacing-2-5);
-    border-radius: var(--sigvelo-radius-lg);
   }
 
   .think-full-app .message__content {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.31.6",
+  "version": "0.32.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": {
@@ -58,7 +58,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.31.6"
+    "@mcp-b/design-tokens": "0.32.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.230",