@mcp-b/react-components 0.14.1 → 0.16.0

package/dist/components/PricingPlanCard.js

@@ -0,0 +1,109 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { O as MinusIcon, S as InfoIcon, o as CheckIcon } from "../icons-CpfUer49.js";
+import { Button } from "./Button.js";
+import { Separator } from "./Separator.js";
+import { Tooltip } from "./Tooltip.js";
+import { Badge } from "./Badge.js";
+import { Card } from "./Card.js";
+import { getPlanPrice, getPlanYearlySavings } from "./Pricing.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/PricingPlanCard.tsx
+function getPlanActionLabel(plan, action) {
+	if (action === "current") return "Current Plan";
+	if (action === "upgrade") return "Upgrade";
+	if (action === "downgrade") return "Downgrade";
+	if (action === "switch") return "Switch Plan";
+	return plan.cta ?? "Get Started";
+}
+/** A single plan card with shared Badge, Button, Separator, and Tooltip primitives. */
+function PricingPlanCard({ plan, billingPeriod, action = "select", onSelect, className }) {
+	const price = getPlanPrice(plan, billingPeriod);
+	const yearlySavings = getPlanYearlySavings(plan);
+	return /* @__PURE__ */ jsxs(Card, {
+		hover: true,
+		className: cx("pricing-page__plan", className),
+		"data-popular": plan.popular || void 0,
+		children: [
+			plan.popular ? /* @__PURE__ */ jsx(Badge, {
+				color: "success",
+				className: "pricing-page__popular-badge",
+				children: "Most Popular"
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "pricing-page__plan-header",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "pricing-page__plan-name",
+					children: plan.name
+				}), /* @__PURE__ */ jsx("p", {
+					className: "pricing-page__plan-description",
+					children: plan.description
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "pricing-page__plan-price",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "pricing-page__price-amount",
+						children: ["$", price]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "pricing-page__price-period",
+						children: "/month"
+					}),
+					billingPeriod === "yearly" && yearlySavings > 0 ? /* @__PURE__ */ jsxs("span", {
+						className: "pricing-page__price-savings",
+						children: [
+							"Save $",
+							yearlySavings,
+							"/year"
+						]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: action === "current" || !plan.popular ? "outline" : "normal",
+				className: "pricing-page__plan-cta",
+				onClick: () => onSelect?.(plan),
+				disabled: action === "current",
+				children: getPlanActionLabel(plan, action)
+			}),
+			/* @__PURE__ */ jsx(Separator, { className: "pricing-page__features-separator" }),
+			/* @__PURE__ */ jsx("ul", {
+				className: "pricing-page__features",
+				children: plan.features.map((feature) => /* @__PURE__ */ jsxs("li", {
+					className: "pricing-page__feature",
+					"data-included": feature.included || void 0,
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "pricing-page__feature-icon",
+							"aria-hidden": "true",
+							children: feature.included ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(MinusIcon, {})
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "pricing-page__feature-name",
+							children: [feature.name, feature.limit ? /* @__PURE__ */ jsxs("span", {
+								className: "pricing-page__feature-limit",
+								children: [
+									"(",
+									feature.limit,
+									")"
+								]
+							}) : null]
+						}),
+						feature.tooltip ? /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+							render: /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								color: "neutral",
+								size: "icon-sm",
+								"aria-label": `More information about ${feature.name}`
+							}),
+							children: /* @__PURE__ */ jsx(InfoIcon, { size: 14 })
+						}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: feature.tooltip }) }) })] }) : null
+					]
+				}, feature.name))
+			})
+		]
+	});
+}
+//#endregion
+export { PricingPlanCard };

package/dist/components/PricingUsageCalculator.d.ts

@@ -0,0 +1,22 @@
+import { UsageTier } from "./Pricing.js";
+import * as React from "react";
+
+//#region src/components/PricingUsageCalculator.d.ts
+interface PricingUsageCalculatorProps {
+  usageTiers: readonly UsageTier[];
+  maxUsage?: number;
+  usageUnit?: string;
+  defaultUsage?: number;
+  /** Additional class name for placement in a consuming layout. */
+  className?: string;
+}
+/** Self-contained usage estimator composed from Card, Slider, Progress, and Separator. */
+declare function PricingUsageCalculator({
+  usageTiers,
+  maxUsage,
+  usageUnit,
+  defaultUsage,
+  className
+}: PricingUsageCalculatorProps): React.JSX.Element;
+//#endregion
+export { PricingUsageCalculator, PricingUsageCalculatorProps };

package/dist/components/PricingUsageCalculator.js

@@ -0,0 +1,96 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Separator } from "./Separator.js";
+import { Slider } from "./Slider.js";
+import { Card } from "./Card.js";
+import { formatPricingUsage, getUsagePrice } from "./Pricing.js";
+import { Progress } from "./Progress.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/PricingUsageCalculator.tsx
+/** Self-contained usage estimator composed from Card, Slider, Progress, and Separator. */
+function PricingUsageCalculator({ usageTiers, maxUsage = 1e5, usageUnit = "API calls", defaultUsage = 5e4, className }) {
+	const [usage, setUsage] = React.useState(Math.min(defaultUsage, maxUsage));
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cx("pricing-page__calculator", className),
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				className: "pricing-page__calculator-title",
+				children: "Estimate your usage"
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "pricing-page__calculator-description",
+				children: ["Adjust the slider to see pricing based on your expected ", usageUnit]
+			}),
+			/* @__PURE__ */ jsxs(Slider.Root, {
+				value: usage,
+				onValueChange: (value) => setUsage(typeof value === "number" ? value : value[0] ?? 0),
+				min: 0,
+				max: maxUsage,
+				step: Math.ceil(maxUsage / 100),
+				className: "pricing-page__calculator-slider",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "pricing-page__calculator-labels",
+						children: [/* @__PURE__ */ jsxs(Slider.Label, { children: ["Monthly ", usageUnit] }), /* @__PURE__ */ jsx(Slider.Value, {
+							className: "pricing-page__calculator-value",
+							children: () => formatPricingUsage(usage)
+						})]
+					}),
+					/* @__PURE__ */ jsx(Slider.Control, { children: /* @__PURE__ */ jsxs(Slider.Track, { children: [/* @__PURE__ */ jsx(Slider.Indicator, {}), /* @__PURE__ */ jsx(Slider.Thumb, {})] }) }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "pricing-page__calculator-range",
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ jsx("span", { children: "0" }), /* @__PURE__ */ jsx("span", { children: formatPricingUsage(maxUsage) })]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Separator, { className: "pricing-page__calculator-separator" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "pricing-page__calculator-result",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "pricing-page__calculator-result-label",
+					children: "Estimated monthly cost"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "pricing-page__calculator-result-price",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "pricing-page__calculator-amount",
+						children: ["$", getUsagePrice(usageTiers, usage)]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "pricing-page__calculator-period",
+						children: "/month"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "pricing-page__tiers",
+				children: usageTiers.map((tier) => {
+					const active = usage >= tier.limit;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "pricing-page__tier",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "pricing-page__tier-info",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "pricing-page__tier-label",
+								children: tier.label
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "pricing-page__tier-price",
+								children: [
+									"$",
+									tier.price,
+									"/mo"
+								]
+							})]
+						}), /* @__PURE__ */ jsx(Progress.Root, {
+							"aria-label": `Progress toward ${tier.label}`,
+							value: active ? 100 : tier.limit > 0 ? usage / tier.limit * 100 : 0,
+							color: active ? "success" : "primary",
+							children: /* @__PURE__ */ jsx(Progress.Track, { children: /* @__PURE__ */ jsx(Progress.Indicator, {}) })
+						})]
+					}, tier.label);
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { PricingUsageCalculator };

package/dist/components/PromptInput.d.ts

@@ -1,2 +1,2 @@
-import { $ as PromptInputHoverCardTrigger, A as PromptInputCommandEmptyProps, At as getPendingToolApprovals, B as PromptInputCommandSeparator, C as PromptInputBody, Ct as PromptInputTools, D as PromptInputButtonTooltip, Dt as TooltipSide, E as PromptInputButtonProps, Et as TextInputContext, F as PromptInputCommandItem, G as PromptInputFooter, H as PromptInputControllerProps, I as PromptInputCommandItemProps, J as PromptInputHeaderProps, K as PromptInputFooterProps, L as PromptInputCommandList, M as PromptInputCommandGroupProps, Mt as usePromptInputController, N as PromptInputCommandInput, Nt as useProviderAttachments, O as PromptInputCommand, Ot as getApprovalRequestId, P as PromptInputCommandInputProps, Q as PromptInputHoverCardProps, R as PromptInputCommandListProps, S as PromptInputAttachmentsProps, St as PromptInputTextareaProps, T as PromptInputButton, Tt as PromptInputTooltipConfig, U as PromptInputDictation, V as PromptInputCommandSeparatorProps, W as PromptInputDictationProps, X as PromptInputHoverCardContent, Y as PromptInputHoverCard, Z as PromptInputHoverCardContentProps, _ as PromptInputApproval, _t as PromptInputTabLabelProps, a as PromptInputActionAddAttachments, at as PromptInputProvider, b as PromptInputAttachmentProps, bt as PromptInputTabsListProps, c as PromptInputActionAddScreenshotProps, ct as PromptInputSelectProps, d as PromptInputActionMenuContentProps, dt as PromptInputTab, et as PromptInputHoverCardTriggerProps, f as PromptInputActionMenuItem, ft as PromptInputTabBody, g as PromptInputActionMenuTriggerProps, gt as PromptInputTabLabel, h as PromptInputActionMenuTrigger, ht as PromptInputTabItemProps, i as PromptInput, it as PromptInputProps, j as PromptInputCommandGroup, jt as usePromptInputAttachments, k as PromptInputCommandEmpty, kt as getApprovalStateKey, l as PromptInputActionMenu, lt as PromptInputSubmit, m as PromptInputActionMenuProps, mt as PromptInputTabItem, n as PendingToolApproval, nt as PromptInputPermissionSelector, o as PromptInputActionAddAttachmentsProps, ot as PromptInputProviderProps, p as PromptInputActionMenuItemProps, pt as PromptInputTabBodyProps, q as PromptInputHeader, r as PermissionMode, rt as PromptInputPermissionSelectorProps, s as PromptInputActionAddScreenshot, st as PromptInputSelect, t as AttachmentsContext, tt as PromptInputMessage, u as PromptInputActionMenuContent, ut as PromptInputSubmitProps, v as PromptInputApprovalProps, vt as PromptInputTabProps, w as PromptInputBodyProps, wt as PromptInputToolsProps, x as PromptInputAttachments, xt as PromptInputTextarea, y as PromptInputAttachment, yt as PromptInputTabsList, z as PromptInputCommandProps } from "../PromptInput-ClNqBiIw.js";
-export { AttachmentsContext, PendingToolApproval, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputApproval, PromptInputApprovalProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandEmptyProps, PromptInputCommandGroup, PromptInputCommandGroupProps, PromptInputCommandInput, PromptInputCommandInputProps, PromptInputCommandItem, PromptInputCommandItemProps, PromptInputCommandList, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparator, PromptInputCommandSeparatorProps, PromptInputControllerProps, PromptInputDictation, PromptInputDictationProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputSelect, PromptInputSelectProps, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, TextInputContext, TooltipSide, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, useProviderAttachments };
+import { $ as PromptInputDictation, A as PromptInputCommandComposerProps, At as PromptInputTabLabelProps, B as PromptInputCommandItem, Bt as TooltipSide, C as PromptInputBody, Ct as PromptInputSubmitProps, D as PromptInputButtonTooltip, Dt as PromptInputTabItem, E as PromptInputButtonProps, Et as PromptInputTabBodyProps, F as PromptInputCommandGroupLabel, Ft as PromptInputTextareaProps, G as PromptInputCommandSeparator, Gt as usePromptInputController, H as PromptInputCommandList, Ht as getApprovalStateKey, I as PromptInputCommandGroupLabelProps, It as PromptInputTools, J as PromptInputContextAction, K as PromptInputCommandSeparatorProps, Kt as useProviderAttachments, L as PromptInputCommandGroupProps, Lt as PromptInputToolsProps, M as PromptInputCommandEmpty, Mt as PromptInputTabsList, N as PromptInputCommandEmptyProps, Nt as PromptInputTabsListProps, O as PromptInputCommand, Ot as PromptInputTabItemProps, P as PromptInputCommandGroup, Pt as PromptInputTextarea, Q as PromptInputControllerProps, R as PromptInputCommandInput, Rt as PromptInputTooltipConfig, S as PromptInputAttachmentsProps, St as PromptInputSubmit, T as PromptInputButton, Tt as PromptInputTabBody, U as PromptInputCommandListProps, Ut as getPendingToolApprovals, V as PromptInputCommandItemProps, Vt as getApprovalRequestId, W as PromptInputCommandProps, Wt as usePromptInputAttachments, X as PromptInputContextSelector, Y as PromptInputContextItem, Z as PromptInputContextSelectorProps, _ as PromptInputApproval, _t as PromptInputReference, a as PromptInputActionAddAttachments, at as PromptInputHoverCard, b as PromptInputAttachmentProps, bt as PromptInputSelect, c as PromptInputActionAddScreenshotProps, ct as PromptInputHoverCardProps, d as PromptInputActionMenuContentProps, dt as PromptInputMessage, et as PromptInputDictationProps, f as PromptInputActionMenuItem, ft as PromptInputPermissionSelector, g as PromptInputActionMenuTriggerProps, gt as PromptInputProviderProps, h as PromptInputActionMenuTrigger, ht as PromptInputProvider, i as PromptInput, it as PromptInputHeaderProps, j as PromptInputCommandDefinition, jt as PromptInputTabProps, k as PromptInputCommandComposer, kt as PromptInputTabLabel, l as PromptInputActionMenu, lt as PromptInputHoverCardTrigger, m as PromptInputActionMenuProps, mt as PromptInputProps, n as PendingToolApproval, nt as PromptInputFooterProps, o as PromptInputActionAddAttachmentsProps, ot as PromptInputHoverCardContent, p as PromptInputActionMenuItemProps, pt as PromptInputPermissionSelectorProps, q as PromptInputCommandTrigger, r as PermissionMode, rt as PromptInputHeader, s as PromptInputActionAddScreenshot, st as PromptInputHoverCardContentProps, t as AttachmentsContext, tt as PromptInputFooter, u as PromptInputActionMenuContent, ut as PromptInputHoverCardTriggerProps, v as PromptInputApprovalProps, vt as PromptInputReferences, w as PromptInputBodyProps, wt as PromptInputTab, x as PromptInputAttachments, xt as PromptInputSelectProps, y as PromptInputAttachment, yt as PromptInputReferencesProps, z as PromptInputCommandInputProps, zt as TextInputContext } from "../PromptInput-BWTuXMOD.js";
+export { AttachmentsContext, PendingToolApproval, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputApproval, PromptInputApprovalProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommand, PromptInputCommandComposer, PromptInputCommandComposerProps, PromptInputCommandDefinition, PromptInputCommandEmpty, PromptInputCommandEmptyProps, PromptInputCommandGroup, PromptInputCommandGroupLabel, PromptInputCommandGroupLabelProps, PromptInputCommandGroupProps, PromptInputCommandInput, PromptInputCommandInputProps, PromptInputCommandItem, PromptInputCommandItemProps, PromptInputCommandList, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparator, PromptInputCommandSeparatorProps, PromptInputCommandTrigger, PromptInputContextAction, PromptInputContextItem, PromptInputContextSelector, PromptInputContextSelectorProps, PromptInputControllerProps, PromptInputDictation, PromptInputDictationProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputReference, PromptInputReferences, PromptInputReferencesProps, PromptInputSelect, PromptInputSelectProps, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, TextInputContext, TooltipSide, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, useProviderAttachments };

package/dist/components/PromptInput.js

@@ -1,10 +1,10 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { D as PencilIcon, F as StopIcon, L as WarningIcon, N as SpinnerIcon, P as SquareIcon, R as WrenchIcon, S as MicrophoneIcon, T as PaperclipIcon, h as FileIcon, i as ArrowUpIcon, k as PlusIcon, o as ChevronDownIcon, w as MonitorIcon, z as XIcon } from "../icons-Ba9THQKz.js";
+import { B as SpinnerIcon, D as MicrophoneIcon, F as PlusIcon, J as WrenchIcon, N as PencilIcon, U as StopIcon, V as SquareIcon, Y as XIcon, i as ArrowUpIcon, j as PaperclipIcon, k as MonitorIcon, o as CheckIcon, q as WarningIcon, s as ChevronDownIcon, v as FileIcon, y as FolderIcon } from "../icons-CpfUer49.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { t as AttachmentPreview } from "../attachment-preview-DIs50Q0h.js";
-import { Combobox } from "./Combobox.js";
 import { Menu } from "./Menu.js";
+import { Combobox } from "./Combobox.js";
 import { Select } from "./Select.js";
 import { Tabs } from "./Tabs.js";
 import * as React from "react";
@@ -818,15 +818,12 @@ function PromptInputPermissionSelector({ value, onValueChange, question = "How s
 		side: "top",
 		sideOffset: 6,
 		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: selected.label })
-	}) })] }), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsxs(Menu.Popup, {
+	}) })] }), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Popup, {
 		className: "prompt-input__permissions-menu",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "prompt-input__permissions-question",
-			children: question
-		}), /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		children: /* @__PURE__ */ jsxs(Menu.RadioGroup, {
 			value,
 			onValueChange: (mode) => onValueChange(mode),
-			children: PERMISSION_MODES.map((mode) => /* @__PURE__ */ jsxs(Menu.RadioItem, {
+			children: [/* @__PURE__ */ jsx(Menu.GroupLabel, { children: question }), PERMISSION_MODES.map((mode) => /* @__PURE__ */ jsxs(Menu.RadioItem, {
 				value: mode.value,
 				closeOnClick: true,
 				className: "prompt-input__permissions-option",
@@ -840,13 +837,15 @@ function PromptInputPermissionSelector({ value, onValueChange, question = "How s
 						children: mode.description
 					})]
 				}), /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { className: "prompt-input__permissions-check" })]
-			}, mode.value))
-		})]
+			}, mode.value))]
+		})
 	}) }) })] });
 }
-function PromptInputSubmit({ className, status = "ready", onStop, variant = "normal", color = "primary", size = "icon-sm", onClick, children, label, ref, ...props }) {
-	const isStopping = status === "submitted" || status === "streaming";
-	const resolvedLabel = label ?? defaultSubmitLabel(status);
+function PromptInputSubmit({ className, status = "ready", onStop, variant = "normal", color = "primary", size = "icon-xs", onClick, children, label, allowSubmitWhileBusy = false, hasContent = false, ref, ...props }) {
+	const isBusy = status === "submitted" || status === "streaming";
+	const isQueueing = isBusy && allowSubmitWhileBusy && hasContent;
+	const isStopping = isBusy && !isQueueing;
+	const resolvedLabel = label ?? (isQueueing ? "Queue message" : defaultSubmitLabel(status));
 	return /* @__PURE__ */ jsx(Button, {
 		ref,
 		type: isStopping ? "button" : "submit",
@@ -865,7 +864,7 @@ function PromptInputSubmit({ className, status = "ready", onStop, variant = "nor
 			}
 		},
 		...props,
-		children: children ?? defaultSubmitIcon(status)
+		children: children ?? (isQueueing ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : defaultSubmitIcon(status))
 	});
 }
 function getPausedExecution(part) {
@@ -1176,8 +1175,204 @@ function PromptInputCommandList({ className, ref, ...props }) {
 }
 const PromptInputCommandEmpty = Combobox.Empty;
 const PromptInputCommandGroup = Combobox.Group;
+const PromptInputCommandGroupLabel = Combobox.GroupLabel;
 const PromptInputCommandItem = Combobox.Item;
 const PromptInputCommandSeparator = Combobox.Separator;
+/**
+* Controlled PromptInput textarea with slash-command discovery. The host owns
+* both the command catalog and the draft policy applied after selection.
+*/
+function PromptInputCommandComposer({ commands, mentionCommands, value, onValueChange, onCommandSelect, emptyMessage = "No commands found.", mentionEmptyMessage = "No MCP servers found.", onKeyDown, ref, ...textareaProps }) {
+	const inputRef = React.useRef(null);
+	const [dismissedValue, setDismissedValue] = React.useState(null);
+	React.useImperativeHandle(ref, () => inputRef.current, []);
+	const match = /^\s*([/@])([^\n]*)$/u.exec(value);
+	const trigger = match?.[1];
+	const sourceCommands = trigger === "@" ? mentionCommands ?? [] : commands;
+	const normalizedQuery = (match?.[2]?.trim() ?? "").toLocaleLowerCase();
+	const filtered = sourceCommands.filter((command) => {
+		if (!normalizedQuery) return true;
+		return [
+			command.label,
+			command.value,
+			command.description,
+			...command.keywords ?? []
+		].filter((term) => Boolean(term)).some((term) => term.toLocaleLowerCase().includes(normalizedQuery));
+	});
+	const hasTriggeredCatalog = trigger === "/" ? commands.length > 0 : trigger === "@" && mentionCommands !== void 0;
+	const open = Boolean(match && hasTriggeredCatalog) && dismissedValue !== value;
+	const groups = Array.from(new Set(filtered.map((command) => command.group ?? ""))).map((label) => ({
+		label,
+		items: filtered.filter((command) => (command.group ?? "") === label)
+	}));
+	return /* @__PURE__ */ jsxs(PromptInputCommand.Root, {
+		items: groups,
+		filteredItems: groups,
+		filter: null,
+		value: null,
+		inputValue: value,
+		open,
+		autoHighlight: true,
+		itemToStringLabel: (command) => command.label,
+		itemToStringValue: (command) => command.value,
+		onInputValueChange: (next, { reason }) => {
+			if (reason !== "input-change") return;
+			setDismissedValue(null);
+			onValueChange(String(next));
+		},
+		onOpenChange: (nextOpen) => {
+			if (!nextOpen) setDismissedValue(value);
+		},
+		onValueChange: (command, { reason }) => {
+			if (!command || Array.isArray(command) || reason !== "item-press") return;
+			onCommandSelect(command, trigger ?? "/");
+		},
+		children: [/* @__PURE__ */ jsx(PromptInputCommandInput, { render: /* @__PURE__ */ jsx(PromptInputTextarea, {
+			...textareaProps,
+			ref: inputRef,
+			value,
+			onKeyDown
+		}) }), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			anchor: () => inputRef.current?.closest(".prompt-input__body") ?? null,
+			side: "top",
+			sideOffset: 8,
+			align: "start",
+			className: "prompt-input__command-positioner",
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				className: "prompt-input__command-popup",
+				children: [/* @__PURE__ */ jsx(PromptInputCommandList, {
+					"data-command-trigger": trigger,
+					children: (group) => /* @__PURE__ */ jsxs(PromptInputCommandGroup, {
+						items: group.items,
+						children: [group.label ? /* @__PURE__ */ jsx(PromptInputCommandGroupLabel, { children: group.label }) : null, /* @__PURE__ */ jsx(Combobox.Collection, { children: (command) => /* @__PURE__ */ jsxs(PromptInputCommandItem, {
+							value: command,
+							disabled: command.disabled,
+							className: "prompt-input__command-item",
+							children: [command.icon ? /* @__PURE__ */ jsx("span", {
+								className: "prompt-input__command-icon",
+								children: command.icon
+							}) : null, /* @__PURE__ */ jsxs("span", {
+								className: "prompt-input__command-copy",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "prompt-input__command-label",
+										children: command.label
+									}),
+									command.description ? /* @__PURE__ */ jsx("span", {
+										className: "prompt-input__command-description",
+										children: command.description
+									}) : null,
+									command.meta ? /* @__PURE__ */ jsx("span", {
+										className: "prompt-input__command-meta",
+										children: command.meta
+									}) : null
+								]
+							})]
+						}, command.id) })]
+					}, group.label || "ungrouped")
+				}), /* @__PURE__ */ jsx(PromptInputCommandEmpty, { children: trigger === "@" ? mentionEmptyMessage : emptyMessage })]
+			})
+		}) })]
+	});
+}
+/** Removable inline context selected from slash-command or mention pickers. */
+function PromptInputReferences({ references, onRemove, className, ref, ...props }) {
+	if (!references.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("prompt-input__references", className),
+		role: "group",
+		"aria-label": "Selected context",
+		...props,
+		children: references.map((reference) => /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "ghost",
+			color: "primary",
+			size: "lg",
+			className: "prompt-input__reference",
+			"aria-label": `Remove ${reference.label}`,
+			onClick: () => onRemove(reference),
+			children: [
+				reference.icon ? /* @__PURE__ */ jsx("span", {
+					className: "prompt-input__reference-icon",
+					children: reference.icon
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "prompt-input__reference-label",
+					children: reference.label
+				}),
+				/* @__PURE__ */ jsx(XIcon, {
+					className: "prompt-input__reference-remove",
+					size: 14
+				})
+			]
+		}, `${reference.trigger ?? "reference"}:${reference.id}`))
+	});
+}
+/** Controlled composer-footer picker for a host-owned folder or working context. */
+function PromptInputContextSelector({ items, value, onValueChange, categoryLabel = "Folder", unavailableLabel = "Folder unavailable", action }) {
+	const selected = items.find((item) => item.value === value);
+	const displayLabel = selected?.label ?? unavailableLabel;
+	const fullLabel = selected?.description ? `${displayLabel} — ${selected.description}` : displayLabel;
+	const trigger = /* @__PURE__ */ jsx(Menu.Trigger, {
+		unstyled: true,
+		render: /* @__PURE__ */ jsxs(PromptInputButton, {
+			size: "xs",
+			className: "prompt-input__context-trigger",
+			"aria-label": `${categoryLabel}: ${fullLabel}`,
+			"data-unavailable": !selected || selected.unavailable || void 0,
+			children: [
+				/* @__PURE__ */ jsx(FolderIcon, { size: 14 }),
+				categoryLabel ? /* @__PURE__ */ jsx("span", {
+					className: "prompt-input__context-category",
+					children: categoryLabel
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "prompt-input__context-value",
+					children: displayLabel
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: "prompt-input__context-chevron",
+					size: 12
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: trigger }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		side: "top",
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: fullLabel })
+	}) })] }), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsxs(Menu.Popup, {
+		className: "prompt-input__context-menu",
+		children: [/* @__PURE__ */ jsxs(Menu.RadioGroup, {
+			value,
+			onValueChange: (next) => onValueChange(String(next)),
+			children: [/* @__PURE__ */ jsx(Menu.GroupLabel, { children: categoryLabel }), items.map((item) => /* @__PURE__ */ jsxs(Menu.RadioItem, {
+				value: item.value,
+				disabled: item.unavailable,
+				closeOnClick: true,
+				className: "prompt-input__context-option",
+				children: [
+					/* @__PURE__ */ jsx(FolderIcon, { size: 14 }),
+					/* @__PURE__ */ jsxs("span", {
+						className: "prompt-input__context-option-copy",
+						children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.description ? /* @__PURE__ */ jsx("span", {
+							className: "prompt-input__context-description",
+							children: item.description
+						}) : null]
+					}),
+					/* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+						className: "prompt-input__context-check",
+						children: /* @__PURE__ */ jsx(CheckIcon, { size: 14 })
+					})
+				]
+			}, item.value))]
+		}), action ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu.Separator, {}), /* @__PURE__ */ jsx(Menu.Item, {
+			onClick: action.onSelect,
+			children: action.label
+		})] }) : null]
+	}) }) })] });
+}
 function defaultSubmitIcon(status) {
 	switch (status) {
 		case "submitted": return /* @__PURE__ */ jsx(SpinnerIcon, { className: "prompt-input__submit-spinner" });
@@ -1269,4 +1464,4 @@ function createId() {
 	return globalThis.crypto?.randomUUID?.() ?? `prompt-input-${Date.now()}-${Math.random()}`;
 }
 //#endregion
-export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputSelect, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, useProviderAttachments };
+export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandComposer, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandGroupLabel, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputReferences, PromptInputSelect, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, useProviderAttachments };

package/dist/components/Queue.js

@@ -1,6 +1,6 @@
 import { Collapsible } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as CheckIcon, c as ChevronRightIcon, h as FileIcon, u as DotIcon } from "../icons-Ba9THQKz.js";
+import { l as ChevronRightIcon, o as CheckIcon, p as DotIcon, v as FileIcon } from "../icons-CpfUer49.js";
 import { Button } from "./Button.js";
 import { Badge } from "./Badge.js";
 import { ScrollArea } from "./ScrollArea.js";

package/dist/components/Reasoning.d.ts

@@ -27,7 +27,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.
- * Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
+ * Adapted from Vercel AI Elements and composed from the design system's
+ * existing Collapsible and Activity presentation primitives.
  *
  * @example
  * ```tsx

package/dist/components/Reasoning.js

@@ -1,9 +1,10 @@
 import { Collapsible } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { c as ChevronRightIcon } from "../icons-Ba9THQKz.js";
-import { MessageResponse } from "./Message.js";
+import { B as SpinnerIcon } from "../icons-CpfUer49.js";
+import { ActivityContent, ActivityText, ActivityTrigger } from "./Activity.js";
+import { f as MessageResponse } from "../Message-BkMdE3bS.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/Reasoning.tsx
 const ReasoningContext = React.createContext(null);
 const AUTO_CLOSE_DELAY_MS = 1e3;
@@ -16,7 +17,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.
-* Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
+* Adapted from Vercel AI Elements and composed from the design system's
+* existing Collapsible and Activity presentation primitives.
 *
 * @example
 * ```tsx
@@ -101,8 +103,8 @@ function Reasoning({ className, isStreaming = false, duration, open, defaultOpen
 		value: ctx,
 		children: /* @__PURE__ */ jsx(Collapsible.Root, {
 			ref,
-			"data-slot": "reasoning-trigger",
-			className: cx("reasoning", className),
+			"data-slot": "reasoning",
+			className: cx("activity", "reasoning", className),
 			open: currentOpen,
 			onOpenChange: handleOpenChange,
 			"data-streaming": isStreaming ? "" : void 0,
@@ -123,30 +125,14 @@ function defaultGetThinkingMessage(isStreaming, duration) {
 */
 function ReasoningTrigger({ className, children, getThinkingMessage = defaultGetThinkingMessage, ref, ...props }) {
 	const { isStreaming, duration } = useReasoning();
-	if (children !== void 0 && children !== null) return /* @__PURE__ */ jsx(Collapsible.Trigger, {
-		ref,
-		className: cx("reasoning__trigger", className),
-		"data-streaming": isStreaming ? "" : void 0,
-		...props,
-		unstyled: true,
-		children
-	});
-	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+	return /* @__PURE__ */ jsx(ActivityTrigger, {
 		ref,
 		"data-slot": "reasoning-trigger",
 		className: cx("reasoning__trigger", className),
 		"data-streaming": isStreaming ? "" : void 0,
-		...props,
-		unstyled: true,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "reasoning__trigger-label",
-			children: getThinkingMessage(isStreaming, duration)
-		}), /* @__PURE__ */ jsx("span", {
-			"data-slot": "reasoning-trigger-icon",
-			className: "reasoning__trigger-icon",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-		})]
+		icon: children == null && isStreaming ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : void 0,
+		label: children ?? getThinkingMessage(isStreaming, duration),
+		...props
 	});
 }
 /**
@@ -154,13 +140,12 @@ function ReasoningTrigger({ className, children, getThinkingMessage = defaultGet
 * long-form text; a muted left border visually distinguishes the block.
 */
 function ReasoningContent({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+	return /* @__PURE__ */ jsx(ActivityContent, {
 		ref,
 		"data-slot": "reasoning-content",
 		className: cx("reasoning__content", className),
 		...props,
-		unstyled: true,
-		children: /* @__PURE__ */ jsx("div", {
+		children: /* @__PURE__ */ jsx(ActivityText, {
 			className: "reasoning__text",
 			children: typeof children === "string" ? /* @__PURE__ */ jsx(MessageResponse, { children }) : children
 		})