@mcp-b/react-components 0.6.5 → 0.7.1

package/dist/AgentChat-403mckDG.d.ts

@@ -0,0 +1,101 @@
+import { et as PromptInputMessage, n as ExecutionApprovals } from "./PromptInput-D6-G24p7.js";
+import * as React from "react";
+import { ChatAddToolApproveResponseFunction, ChatStatus, UIMessage } from "ai";
+import { PendingApproval } from "@cloudflare/think";
+
+//#region src/components/AgentChat.d.ts
+type AgentChatPart<MessageT extends UIMessage = UIMessage> = MessageT["parts"][number];
+interface AgentChatRenderPartContext<MessageT extends UIMessage = UIMessage> {
+  message: MessageT;
+  part: AgentChatPart<MessageT>;
+  partIndex: number;
+  defaultRender: () => React.ReactNode;
+}
+interface AgentChatRenderMessageContext<MessageT extends UIMessage = UIMessage> {
+  message: MessageT;
+  messageIndex: number;
+}
+interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
+  className?: string;
+  /** AI SDK `UIMessage`s to render, oldest first. */
+  messages: readonly MessageT[];
+  /** Drives the composer's send/stop affordance and streaming indicators. */
+  status?: ChatStatus;
+  /** Called with the composed message when the user submits. Omit for a read-only transcript. */
+  onSubmit?: (message: PromptInputMessage) => void | Promise<void>;
+  /** Called when the user hits stop while `status` is streaming/submitted. */
+  onStop?: () => void;
+  placeholder?: string;
+  disabled?: boolean;
+  /** Rendered in place of the transcript while `messages` is empty. */
+  emptyState?: React.ReactNode;
+  /** Extra controls rendered in the composer toolbar. */
+  composerTools?: React.ReactNode;
+  /** Extra rows rendered in the built-in plus menu after files. */
+  composerAddMenuItems?: React.ReactNode;
+  /**
+   * Transient status rendered between the transcript and the composer —
+   * e.g. a "Reconnecting…" pill. `ThinkChat.Messages` fills this from the
+   * hook's `isRecovering`/`connectionError` automatically.
+   */
+  notice?: React.ReactNode;
+  /**
+   * When set, the last assistant message gets a Retry action that calls this
+   * with its message id — pass to the AI SDK's `regenerate({ messageId })`.
+   */
+  onRegenerate?: (messageId: string) => void;
+  /**
+   * Pass `addToolApprovalResponse` from `useAgentChat`/`useChat` directly.
+   * When set and a tool call awaits approval, the composer becomes the
+   * confirmation.
+   */
+  onApprovalResponse?: ChatAddToolApproveResponseFunction;
+  /** Resolves Think execution approvals. See {@link ExecutionApprovals}. */
+  executionApprovals?: ExecutionApprovals;
+  /** Think durable-pause approvals from `pendingApprovals()`, rendered when `executionApprovals` is set. */
+  pendingApprovals?: readonly PendingApproval[];
+  /**
+   * When set, a Context ring in the composer footer shows how much of the
+   * model's window the conversation occupies. Used tokens come from the
+   * newest message carrying `metadata.usage` (the AI SDK `messageMetadata`
+   * convention; Think merges it into message metadata as turns finish).
+   */
+  contextWindow?: {
+    maxTokens: number;
+    modelId?: string;
+  };
+  /** Override rendering per part; return `undefined` to fall back to the default part UI. */
+  renderPart?: (context: AgentChatRenderPartContext<MessageT>) => React.ReactNode | undefined;
+  /** Rendered after each message's parts — for actions, citations, and the like. */
+  renderMessageAfter?: (context: AgentChatRenderMessageContext<MessageT>) => React.ReactNode;
+}
+/**
+ * Low-level transcript/composer surface used by `ThinkChat`: props in, no
+ * transport. Product code that talks to a Cloudflare Think agent should render
+ * `ThinkChat`; use this directly only for plain AI SDK or read-only messages.
+ */
+declare function AgentChat<MessageT extends UIMessage = UIMessage>({
+  className,
+  messages,
+  status,
+  onSubmit,
+  onStop,
+  placeholder,
+  disabled,
+  emptyState,
+  composerTools,
+  composerAddMenuItems,
+  notice,
+  onRegenerate,
+  onApprovalResponse,
+  executionApprovals,
+  pendingApprovals: durableApprovals,
+  contextWindow,
+  renderPart,
+  renderMessageAfter,
+  ref
+}: AgentChatProps<MessageT> & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { AgentChatRenderPartContext as a, AgentChatRenderMessageContext as i, AgentChatPart as n, AgentChatProps as r, AgentChat as t };

package/dist/BrowserLiveView-ZktFZiMD.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+
+//#region src/components/BrowserLiveView.d.ts
+interface BrowserLiveViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Live View URL (Browser Run `devtoolsFrontendUrl`, e.g. live.browser.run). */
+  url: string;
+  /** Epoch ms after which the URL is dead (Browser Run mints ~5-minute links). */
+  expiresAt?: number;
+  /** The page the session was showing — used for the ended-state text. */
+  pageTitle?: string;
+  /**
+   * Shown once the link expires — pass the last screenshot the agent took
+   * (`<img>`) to keep the final frame on screen. Defaults to a quiet
+   * "Live view ended" state.
+   */
+  fallback?: React.ReactNode;
+}
+/**
+ * Embeds a Browser Run Live View — a real-time, interactive view of the
+ * agent's browser session. Links expire (~5 minutes), so the iframe swaps to
+ * `fallback` (e.g. the last screenshot) once `expiresAt` passes. While the
+ * hosted viewer connects, a quiet loading overlay hides the frame; if it
+ * never loads, the view degrades to `fallback` or an unavailable state. An
+ * expand button opens the same view in a fullscreen dialog.
+ *
+ * Where URLs come from (upstream: `agents/browser` in
+ * github.com/cloudflare/agents — `BrowserLiveViewUrl`): the model calls
+ * `cdp.getLiveViewUrl()` inside a `browser_execute` tool run, or the host
+ * calls `connector.liveView()`/`sessionInfo()`. This package's chat rendering
+ * derives the component automatically from links found in tool results.
+ *
+ * Styling rides `@mcp-b/react-components/styles` (browser-live-view.css),
+ * which think-chat consumers load anyway.
+ *
+ * The iframe is unsandboxed by design: the hosted Live View UI needs scripts
+ * and its own origin to stream the session. Only pass trusted Live View URLs.
+ */
+declare function BrowserLiveView({
+  url,
+  expiresAt,
+  pageTitle,
+  fallback,
+  className,
+  ...props
+}: BrowserLiveViewProps): React.JSX.Element;
+//#endregion
+export { BrowserLiveViewProps as n, BrowserLiveView as t };

package/dist/BrowserReplay-6G-mnwcn.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+
+//#region src/components/BrowserReplay.d.ts
+interface BrowserReplayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /**
+   * rrweb events for one tab, e.g. one
+   * `BrowserRecording.events[targetId]` entry from Cloudflare Browser Run.
+   */
+  events: unknown[];
+  /** Start playing on mount. */
+  autoPlay?: boolean;
+}
+/**
+ * Replays a completed Cloudflare Browser Run recording locally with rrweb.
+ *
+ * This is intentionally not derived from Think chat message parts. Live view
+ * links and screenshots ride the `browser_execute` stream and belong to
+ * `BrowserLiveView`; replay events are fetched after a session closes with
+ * Browser Run's `getBrowserRecording()`. Upstream currently shapes those
+ * recordings as `Record<targetId, unknown[]>`, where each array is plain rrweb
+ * JSON for one tab. Playback happens in the viewer's browser through
+ * `@rrweb/replay`; no replay service is contacted at playback time.
+ *
+ * Styling rides `@mcp-b/react-components/styles` (browser-replay.css), which
+ * think-chat consumers load anyway.
+ *
+ * @see https://github.com/cloudflare/agents/tree/main/packages/agents/src/browser
+ * @see https://github.com/rrweb-io/rrweb/tree/main/packages/%40rrweb/replay
+ */
+declare function BrowserReplay({
+  className,
+  events,
+  autoPlay,
+  ref,
+  ...props
+}: BrowserReplayProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { BrowserReplayProps as n, BrowserReplay as t };

package/dist/{CodeBlock-BK0sOAbV.js → CodeBlock-D9koxDA7.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-9UtZwb0J.js";
 import { Select, SelectContent, SelectItem, SelectList, SelectTrigger, SelectValue } from "./components/Select.js";
-import { t as CopyButton } from "./copy-button-CB2MWcau.js";
+import { t as CopyButton } from "./copy-button-TVhDAroI.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter } from "shiki";

package/dist/{FileTree-BWQZ0FSi.js → FileTree-BdK93Uuu.js}

@@ -1,5 +1,5 @@
 import { t as cx } from "./class-names-9UtZwb0J.js";
-import { c as ChevronRightIcon, g as FolderOpenIcon, h as FolderIcon, m as FileIcon } from "./icons-BCNawx-T.js";
+import { _ as FolderOpenIcon, c as ChevronRightIcon, g as FolderIcon, h as FileIcon } from "./icons-BAlTbWWP.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/use-file-tree-nav.ts

package/dist/ModelSelector-MQvK-pNb.js

@@ -0,0 +1,306 @@
+import { t as cx } from "./class-names-9UtZwb0J.js";
+import { A as SearchIcon, o as ChevronDownIcon } from "./icons-BAlTbWWP.js";
+import { Button } from "./components/Button.js";
+import { Dialog, DialogBackdrop, DialogPopup, DialogPortal, DialogTitle, DialogTrigger } from "./components/Dialog.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/_internal/provider-logos.tsx
+function Svg({ children, size = 16, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": "true",
+		focusable: "false",
+		...props,
+		children
+	});
+}
+const OpenAILogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M22.28 9.81a5.99 5.99 0 0 0-.52-4.91 6.05 6.05 0 0 0-6.52-2.9A6.05 6.05 0 0 0 10.58 0a6.05 6.05 0 0 0-5.77 4.18 5.99 5.99 0 0 0-4 2.9 6.05 6.05 0 0 0 .74 7.09 5.99 5.99 0 0 0 .52 4.91 6.05 6.05 0 0 0 6.52 2.9A5.99 5.99 0 0 0 13.25 24a6.05 6.05 0 0 0 5.77-4.19 5.99 5.99 0 0 0 4-2.9 6.05 6.05 0 0 0-.74-7.1ZM13.25 22.44a4.48 4.48 0 0 1-2.88-1.04l.14-.08 4.79-2.76a.78.78 0 0 0 .39-.68v-6.75l2.02 1.17c.02 0 .04.03.04.05v5.58a4.5 4.5 0 0 1-4.5 4.5ZM3.57 18.3a4.5 4.5 0 0 1-.54-3.03l.14.09 4.79 2.76a.78.78 0 0 0 .78 0l5.85-3.37v2.33c0 .02 0 .04-.03.06L9.72 19.94a4.5 4.5 0 0 1-6.15-1.64ZM2.31 7.88a4.48 4.48 0 0 1 2.35-1.97v5.69a.78.78 0 0 0 .39.67l5.83 3.36-2.02 1.17a.07.07 0 0 1-.07 0l-4.83-2.8A4.5 4.5 0 0 1 2.3 7.9Zm16.64 3.87L13.1 8.37l2.02-1.17c.02 0 .05-.01.07 0l4.83 2.8a4.5 4.5 0 0 1-.67 8.11V12.4a.77.77 0 0 0-.4-.66Zm2-3.03-.14-.09-4.78-2.78a.78.78 0 0 0-.79 0L9.4 9.25V6.92c0-.02 0-.04.02-.05l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66Zm-12.68 4.17-2.02-1.17a.07.07 0 0 1-.04-.06V6.1a4.5 4.5 0 0 1 7.38-3.45l-.14.08L8.66 5.5a.78.78 0 0 0-.4.68v6.74Zm1.1-2.36 2.6-1.5 2.61 1.5v3l-2.6 1.5-2.6-1.5Z" })
+});
+const AnthropicLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
+	...props,
+	children: [/* @__PURE__ */ jsx("path", { d: "M13.83 4H17.3L24 20h-3.47l-1.37-3.52h-7L10.82 20H7.36ZM13.25 13.58h4.8l-2.4-6.15Z" }), /* @__PURE__ */ jsx("path", { d: "M0 4h3.47l6.7 16H6.7Z" })]
+});
+const GoogleLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 0 1 5.34 2.05l-2.2 2.2A5 5 0 1 0 17 12.6h-5v-2.6h7.9A8 8 0 0 1 12 20 8 8 0 0 1 12 4Z" })
+});
+const MetaLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M2 12.5c0-3.5 1.8-6.5 4.4-6.5 1.8 0 3.2 1.3 4.9 3.8 2.2 3.2 3.3 5 4.6 5 1 0 1.5-.8 1.5-2.3 0-2.1-1-4.3-2.7-4.3-1 0-2 .6-3.2 2l-1.3-1.7C11.5 6.8 12.9 6 14.5 6c3 0 5.5 3.3 5.5 7 0 3.3-1.6 5-3.8 5-2.3 0-3.6-1.6-6-5.3C8.9 10.4 8 9.2 6.8 9.2 5.4 9.2 4.3 10.6 4.3 13c0 1.8.5 3 1.3 3 .6 0 1.1-.3 1.8-1.1l1.3 1.7C7.6 17.6 6.3 18 5.3 18 3.3 18 2 16 2 12.5Z" })
+});
+const KimiLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
+	...props,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "9.5",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M8 7.5v9M8 12l4.5-4.5M8 12l5 4.5M14 7.5h2.5v9H14z",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	})]
+});
+const FallbackLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "3"
+	})
+});
+/**
+* Resolves a provider string to its logo component.
+* Unknown providers get a neutral dot fallback.
+*/
+function ProviderLogo({ provider, ...props }) {
+	switch (provider.toLowerCase()) {
+		case "openai": return /* @__PURE__ */ jsx(OpenAILogo, { ...props });
+		case "anthropic": return /* @__PURE__ */ jsx(AnthropicLogo, { ...props });
+		case "google": return /* @__PURE__ */ jsx(GoogleLogo, { ...props });
+		case "meta": return /* @__PURE__ */ jsx(MetaLogo, { ...props });
+		case "kimi": return /* @__PURE__ */ jsx(KimiLogo, { ...props });
+		default: return /* @__PURE__ */ jsx(FallbackLogo, { ...props });
+	}
+}
+//#endregion
+//#region src/components/ModelSelector.tsx
+const ModelSelectorContext = React.createContext(null);
+function useModelSelectorContext() {
+	const ctx = React.useContext(ModelSelectorContext);
+	if (!ctx) throw new Error("ModelSelector subcomponents must be used inside <ModelSelector>.");
+	return ctx;
+}
+/**
+* A searchable model picker. Click the trigger to open a dialog containing a
+* search input and a grouped list of available models.
+*
+* Built internally for AI model selection. Use it when users choose one model
+* from a grouped provider list. Do not use it as a general command palette or
+* multiselect; use Combobox or a dedicated component for that.
+*
+* Sigvelo changes: composes the design-system Dialog and Button, filters item
+* children locally, and maps provider logos plus listbox styling to Sigvelo
+* CSS tokens.
+*
+* The dialog owns focus while open, the list uses `role="listbox"`, and items
+* use `role="option"` with `aria-selected`. Styling consumes surface, border,
+* spacing, radius, focus, and typography tokens. Add provider/item affordances
+* here when they need to be shared.
+*
+* @example
+* ```tsx
+* <ModelSelector>
+*   <ModelSelectorTrigger>
+*     <ModelSelectorLogo provider="anthropic" />
+*     <ModelSelectorName>Claude Opus 4.6</ModelSelectorName>
+*   </ModelSelectorTrigger>
+*   <ModelSelectorContent>
+*     <ModelSelectorDialog>
+*       <ModelSelectorInput placeholder="Search models…" />
+*       <ModelSelectorList>
+*         <ModelSelectorGroup label="Anthropic">
+*           <ModelSelectorItem value="claude-opus-4-6" onSelect={…}>
+*             <ModelSelectorLogo provider="anthropic" />
+*             <ModelSelectorName>Claude Opus 4.6</ModelSelectorName>
+*           </ModelSelectorItem>
+*         </ModelSelectorGroup>
+*       </ModelSelectorList>
+*     </ModelSelectorDialog>
+*   </ModelSelectorContent>
+* </ModelSelector>
+* ```
+*/
+function ModelSelector({ open, defaultOpen = false, onOpenChange, children, className, ref, ...props }) {
+	const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+	const [query, setQuery] = React.useState("");
+	const isControlled = open !== void 0;
+	const currentOpen = isControlled ? open : internalOpen;
+	const handleOpenChange = React.useCallback((next) => {
+		if (!isControlled) setInternalOpen(next);
+		onOpenChange?.(next);
+		if (!next) setQuery("");
+	}, [isControlled, onOpenChange]);
+	const onSelectItem = React.useCallback(() => {
+		handleOpenChange(false);
+	}, [handleOpenChange]);
+	const ctxValue = React.useMemo(() => ({
+		query,
+		setQuery,
+		onSelectItem
+	}), [query, onSelectItem]);
+	return /* @__PURE__ */ jsx(ModelSelectorContext.Provider, {
+		value: ctxValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cx("model-selector", className),
+			...props,
+			children: /* @__PURE__ */ jsx(Dialog, {
+				open: currentOpen,
+				onOpenChange: handleOpenChange,
+				children
+			})
+		})
+	});
+}
+function ModelSelectorTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(DialogTrigger, { render: /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		color: "neutral",
+		className: cx("model-selector__trigger", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: "model-selector__trigger-chevron",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+		})]
+	}) });
+}
+function ModelSelectorContent({ children, title = "Model Selector", ...props }) {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {}), /* @__PURE__ */ jsxs(DialogPopup, {
+		...props,
+		children: [/* @__PURE__ */ jsx(DialogTitle, {
+			className: "model-selector__title",
+			children: title
+		}), children]
+	})] });
+}
+function ModelSelectorDialog({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("model-selector__dialog", className),
+		...props,
+		children
+	});
+}
+function ModelSelectorInput({ className, placeholder = "Search models…", ref, ...props }) {
+	const { query, setQuery } = useModelSelectorContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "model-selector__search",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "model-selector__search-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(SearchIcon, {})
+		}), /* @__PURE__ */ jsx("input", {
+			ref,
+			type: "search",
+			value: query,
+			onChange: (e) => setQuery(e.target.value),
+			placeholder,
+			className: cx("model-selector__input", className),
+			autoFocus: true,
+			...props
+		})]
+	});
+}
+function ModelSelectorList({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "listbox",
+		className: cx("model-selector__list", className),
+		...props,
+		children
+	});
+}
+function ModelSelectorGroup({ className, label, children, ref, ...props }) {
+	const { query } = useModelSelectorContext();
+	const childArray = React.Children.toArray(children).filter((child) => React.isValidElement(child));
+	const q = query.trim().toLowerCase();
+	const filtered = q ? childArray.filter((child) => {
+		const value = String(child.props.value ?? "").toLowerCase();
+		const keywords = String(child.props.keywords ?? "").toLowerCase();
+		return value.includes(q) || keywords.includes(q);
+	}) : childArray;
+	if (filtered.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": label,
+		className: cx("model-selector__group", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "model-selector__group-label",
+			children: label
+		}), filtered]
+	});
+}
+function ModelSelectorItem({ className, value, keywords, selected, onSelect, children, onClick, ref, ...props }) {
+	const { onSelectItem } = useModelSelectorContext();
+	const handleClick = (e) => {
+		onSelect?.(value);
+		onSelectItem();
+		onClick?.(e);
+	};
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		role: "option",
+		"aria-selected": selected,
+		"data-selected": selected ? "" : void 0,
+		className: cx("model-selector__item", className),
+		onClick: handleClick,
+		...props,
+		children
+	});
+}
+function ModelSelectorEmpty({ className, children = "No models found", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("model-selector__empty", className),
+		...props,
+		children
+	});
+}
+function ModelSelectorSeparator({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("hr", {
+		ref,
+		className: cx("model-selector__separator", className),
+		...props
+	});
+}
+function ModelSelectorLogo({ className, provider, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("model-selector__logo", className),
+		children: /* @__PURE__ */ jsx(ProviderLogo, {
+			provider,
+			...props
+		})
+	});
+}
+function ModelSelectorLogoGroup({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("model-selector__logo-group", className),
+		...props,
+		children
+	});
+}
+function ModelSelectorName({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("model-selector__name", className),
+		...props,
+		children
+	});
+}
+function ModelSelectorShortcut({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		ref,
+		className: cx("model-selector__shortcut", className),
+		...props,
+		children
+	});
+}
+//#endregion
+export { ModelSelectorGroup as a, ModelSelectorList as c, ModelSelectorName as d, ModelSelectorSeparator as f, ModelSelectorEmpty as i, ModelSelectorLogo as l, ModelSelectorTrigger as m, ModelSelectorContent as n, ModelSelectorInput as o, ModelSelectorShortcut as p, ModelSelectorDialog as r, ModelSelectorItem as s, ModelSelector as t, ModelSelectorLogoGroup as u };