@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/ModelSelector.d.ts

@@ -0,0 +1,198 @@
+import { r as ButtonProps } from "../Button-QCM8ZKgR.js";
+import * as React from "react";
+
+//#region src/components/ModelSelector.d.ts
+interface ModelSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Controlled dialog open state. */
+  open?: boolean;
+  /** Initial dialog open state for uncontrolled usage. */
+  defaultOpen?: boolean;
+  /** Called when the dialog opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Additional class names for layout only; do not restyle dialog internals from apps. */
+  className?: string;
+  /** Trigger, content, search input, grouped list, and items. */
+  children?: React.ReactNode;
+}
+/**
+ * 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>
+ * ```
+ */
+declare function ModelSelector({
+  open,
+  defaultOpen,
+  onOpenChange,
+  children,
+  className,
+  ref,
+  ...props
+}: ModelSelectorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ModelSelectorTriggerProps extends Omit<ButtonProps, "variant" | "color" | "className"> {
+  className?: string;
+}
+declare function ModelSelectorTrigger({
+  className,
+  children,
+  ...props
+}: ModelSelectorTriggerProps): React.JSX.Element;
+interface ModelSelectorContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: React.ReactNode;
+}
+declare function ModelSelectorContent({
+  children,
+  title,
+  ...props
+}: ModelSelectorContentProps): React.JSX.Element;
+interface ModelSelectorDialogProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function ModelSelectorDialog({
+  className,
+  children,
+  ref,
+  ...props
+}: ModelSelectorDialogProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ModelSelectorInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {}
+declare function ModelSelectorInput({
+  className,
+  placeholder,
+  ref,
+  ...props
+}: ModelSelectorInputProps & {
+  ref?: React.Ref<HTMLInputElement>;
+}): React.JSX.Element;
+interface ModelSelectorListProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function ModelSelectorList({
+  className,
+  children,
+  ref,
+  ...props
+}: ModelSelectorListProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ModelSelectorGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: string;
+}
+declare function ModelSelectorGroup({
+  className,
+  label,
+  children,
+  ref,
+  ...props
+}: ModelSelectorGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
+interface ModelSelectorItemProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "onSelect"> {
+  value: string;
+  /** Extra keywords for search matching. */
+  keywords?: string;
+  /** Whether this item is the currently selected one. */
+  selected?: boolean;
+  /** Called when the item is chosen. */
+  onSelect?: (value: string) => void;
+}
+declare function ModelSelectorItem({
+  className,
+  value,
+  keywords,
+  selected,
+  onSelect,
+  children,
+  onClick,
+  ref,
+  ...props
+}: ModelSelectorItemProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface ModelSelectorEmptyProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function ModelSelectorEmpty({
+  className,
+  children,
+  ref,
+  ...props
+}: ModelSelectorEmptyProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ModelSelectorSeparatorProps extends React.HTMLAttributes<HTMLHRElement> {}
+declare function ModelSelectorSeparator({
+  className,
+  ref,
+  ...props
+}: ModelSelectorSeparatorProps & {
+  ref?: React.Ref<HTMLHRElement>;
+}): React.JSX.Element;
+interface ModelSelectorLogoProps extends React.SVGAttributes<SVGSVGElement> {
+  provider: string;
+}
+declare function ModelSelectorLogo({
+  className,
+  provider,
+  ...props
+}: ModelSelectorLogoProps): React.JSX.Element;
+interface ModelSelectorLogoGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function ModelSelectorLogoGroup({
+  className,
+  children,
+  ref,
+  ...props
+}: ModelSelectorLogoGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ModelSelectorNameProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function ModelSelectorName({
+  className,
+  children,
+  ref,
+  ...props
+}: ModelSelectorNameProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface ModelSelectorShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function ModelSelectorShortcut({
+  className,
+  children,
+  ref,
+  ...props
+}: ModelSelectorShortcutProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { ModelSelector, ModelSelectorContent, ModelSelectorContentProps, ModelSelectorDialog, ModelSelectorDialogProps, ModelSelectorEmpty, ModelSelectorEmptyProps, ModelSelectorGroup, ModelSelectorGroupProps, ModelSelectorInput, ModelSelectorInputProps, ModelSelectorItem, ModelSelectorItemProps, ModelSelectorList, ModelSelectorListProps, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorLogoGroupProps, ModelSelectorLogoProps, ModelSelectorName, ModelSelectorNameProps, ModelSelectorProps, ModelSelectorSeparator, ModelSelectorSeparatorProps, ModelSelectorShortcut, ModelSelectorShortcutProps, ModelSelectorTrigger, ModelSelectorTriggerProps };

package/dist/components/ModelSelector.js

@@ -0,0 +1,306 @@
+import { S as SearchIcon, s as ChevronDownIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } from "./Button.js";
+import { Dialog, DialogBackdrop, DialogPopup, DialogPortal, DialogTitle, DialogTrigger } from "./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 { ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger };

package/dist/components/NaniteScene.d.ts

@@ -0,0 +1,33 @@
+//#region src/components/NaniteScene.d.ts
+type NaniteSceneVariant = "idle" | "helmet" | "working" | "celebrating" | "concerned";
+type NaniteSceneProps = {
+  /** Visual state to render. */readonly variant: NaniteSceneVariant; /** Render three compact Nanites or one status Nanite with optional screen art. */
+  readonly mode?: "trio" | "solo"; /** Additional class names for layout only. */
+  readonly className?: string; /** Accessible title when the illustration communicates state. */
+  readonly title?: string;
+};
+/**
+ * Decorative Nanites illustration used in setup, status, and empty states.
+ * Pass a title when the illustration communicates state; otherwise it remains
+ * hidden from assistive technology.
+ *
+ * Built internally for Sigvelo onboarding and agent-connection surfaces. Use
+ * it as supporting status art, not as a control or primary content.
+ *
+ * Styling consumes Nanite scene CSS animation hooks plus Sigvelo layout context.
+ * Respect reduced-motion CSS when adding animation. Add variants here when a
+ * state is reused across apps; keep one-off art local to the app.
+ *
+ * @example
+ * ```tsx
+ * <NaniteScene variant="working" mode="solo" title="Agent is checking GitHub" />
+ * ```
+ */
+declare function NaniteScene({
+  variant,
+  mode,
+  className,
+  title
+}: NaniteSceneProps): import("react").JSX.Element;
+//#endregion
+export { NaniteScene, NaniteSceneProps, NaniteSceneVariant };