@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/Select-CRsKCJ9x.d.ts

@@ -0,0 +1,200 @@
+import * as React from "react";
+import { Select } from "@base-ui/react/select";
+
+//#region src/components/Select.d.ts
+interface SelectProps extends React.ComponentPropsWithRef<typeof Select.Root> {
+  /**
+   * Static list of items for label resolution. Needed when options are inside
+   * a portal (not mounted until opened) so SelectValue can display the correct
+   * label on initial render.
+   */
+  items?: Array<{
+    label: React.ReactNode;
+    value: unknown;
+  }>;
+}
+interface SelectTriggerProps extends Omit<Select.Trigger.Props, "className"> {
+  className?: string;
+  /**
+   * The size of the select trigger.
+   * @default 'default'
+   */
+  size?: "sm" | "md" | "default";
+}
+interface SelectValueProps extends Omit<Select.Value.Props, "children"> {
+  placeholder?: string;
+  children?: Select.Value.Props["children"];
+}
+interface SelectPortalProps extends Select.Portal.Props {}
+interface SelectPositionerProps extends Select.Positioner.Props {}
+interface SelectPopupProps extends Omit<Select.Popup.Props, "className"> {
+  className?: string;
+}
+interface SelectListProps extends Omit<Select.List.Props, "className"> {
+  className?: string;
+}
+interface SelectOptionProps extends Omit<Select.Item.Props, "className"> {
+  className?: string;
+}
+interface SelectOptionGroupProps extends Omit<Select.Group.Props, "className"> {
+  className?: string;
+  label?: string;
+}
+type SelectItemProps = SelectOptionProps;
+type SelectGroupProps = SelectOptionGroupProps;
+interface SelectLabelProps extends Omit<Select.GroupLabel.Props, "className"> {
+  className?: string;
+}
+interface SelectSeparatorProps extends Omit<Select.Separator.Props, "className"> {
+  className?: string;
+}
+interface SelectScrollUpButtonProps extends Omit<Select.ScrollUpArrow.Props, "className"> {
+  className?: string;
+}
+interface SelectScrollDownButtonProps extends Omit<Select.ScrollDownArrow.Props, "className"> {
+  className?: string;
+}
+type SelectPlacementProps = Pick<SelectPositionerProps, "anchor" | "positionMethod" | "side" | "sideOffset" | "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "sticky" | "arrowPadding" | "disableAnchorTracking" | "collisionAvoidance"> & {
+  position?: "popper" | "item-aligned";
+};
+type SelectContentProps = SelectPopupProps & SelectPlacementProps;
+/**
+ * A select component for choosing from a list of options.
+ *
+ * @example
+ * ```tsx
+ * <Select defaultValue="option1">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Select..." />
+ *   </SelectTrigger>
+ *   <SelectPortal>
+ *     <SelectPositioner>
+ *       <SelectPopup>
+ *         <SelectList>
+ *           <SelectOption value="option1">Option 1</SelectOption>
+ *           <SelectOption value="option2">Option 2</SelectOption>
+ *         </SelectList>
+ *       </SelectPopup>
+ *     </SelectPositioner>
+ *   </SelectPortal>
+ * </Select>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/select | Base UI Select}
+ */
+declare function Select$1({
+  items,
+  ...props
+}: SelectProps): React.JSX.Element;
+declare function SelectTrigger({
+  size,
+  className,
+  children,
+  ref,
+  ...props
+}: SelectTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+declare function SelectValue({
+  placeholder,
+  children,
+  ref,
+  ...props
+}: SelectValueProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+declare const SelectPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function SelectPositioner({
+  className,
+  ref,
+  ...props
+}: SelectPositionerProps & {
+  className?: string;
+} & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectPopup({
+  className,
+  ref,
+  ...props
+}: SelectPopupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectContent({
+  anchor,
+  positionMethod,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  collisionBoundary,
+  collisionPadding,
+  sticky,
+  arrowPadding,
+  disableAnchorTracking,
+  collisionAvoidance,
+  position,
+  children,
+  ...props
+}: SelectContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectList({
+  className,
+  ref,
+  ...props
+}: SelectListProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectOption({
+  className,
+  value,
+  children,
+  ref,
+  ...props
+}: SelectOptionProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare const SelectItem: typeof SelectOption;
+declare function SelectOptionGroup({
+  label,
+  className,
+  children,
+  ref,
+  ...props
+}: SelectOptionGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare const SelectGroup: typeof SelectOptionGroup;
+declare function SelectLabel({
+  className,
+  ref,
+  ...props
+}: SelectLabelProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectSeparator({
+  className,
+  ref,
+  ...props
+}: SelectSeparatorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectScrollUpButton({
+  className,
+  children,
+  ref,
+  ...props
+}: SelectScrollUpButtonProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectScrollDownButton({
+  className,
+  children,
+  ref,
+  ...props
+}: SelectScrollDownButtonProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { SelectTriggerProps as A, SelectScrollDownButton as C, SelectSeparator as D, SelectScrollUpButtonProps as E, SelectValueProps as M, SelectSeparatorProps as O, SelectProps as S, SelectScrollUpButton as T, SelectPopupProps as _, SelectGroupProps as a, SelectPositioner as b, SelectLabel as c, SelectListProps as d, SelectOption as f, SelectPopup as g, SelectOptionProps as h, SelectGroup as i, SelectValue as j, SelectTrigger as k, SelectLabelProps as l, SelectOptionGroupProps as m, SelectContent as n, SelectItem as o, SelectOptionGroup as p, SelectContentProps as r, SelectItemProps as s, Select$1 as t, SelectList as u, SelectPortal as v, SelectScrollDownButtonProps as w, SelectPositionerProps as x, SelectPortalProps as y };

package/dist/class-names-9UtZwb0J.js

@@ -0,0 +1,12 @@
+//#region src/components/_internal/class-names.ts
+/**
+* Concatenates class-name parts, skipping falsy values.
+*
+* Matches the idiom used throughout existing components:
+* `[...].filter(Boolean).join(" ")`
+*/
+function cx(...parts) {
+	return parts.filter(Boolean).join(" ");
+}
+//#endregion
+export { cx as t };

package/dist/components/Accordion.d.ts

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+
+//#region src/components/Accordion.d.ts
+interface AccordionProps extends Omit<React.ComponentPropsWithRef<typeof Accordion$1.Root>, "className"> {
+  className?: string;
+}
+interface AccordionItemProps extends Omit<React.ComponentPropsWithRef<typeof Accordion$1.Item>, "className"> {
+  className?: string;
+}
+interface AccordionTriggerProps extends Omit<React.ComponentPropsWithRef<typeof Accordion$1.Trigger>, "className"> {
+  className?: string;
+}
+interface AccordionPanelProps extends Omit<React.ComponentPropsWithRef<typeof Accordion$1.Panel>, "className"> {
+  className?: string;
+}
+type AccordionContentProps = AccordionPanelProps;
+/**
+ * An accordion component for showing collapsible content sections.
+ *
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Section 1</AccordionTrigger>
+ *     <AccordionPanel>Content for section 1</AccordionPanel>
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2">
+ *     <AccordionTrigger>Section 2</AccordionTrigger>
+ *     <AccordionPanel>Content for section 2</AccordionPanel>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/accordion | Base UI Accordion}
+ */
+declare function Accordion({
+  className,
+  ref,
+  ...props
+}: AccordionProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A single item within an Accordion.
+ */
+declare function AccordionItem({
+  className,
+  ref,
+  ...props
+}: AccordionItemProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * The header/trigger that toggles an AccordionItem.
+ */
+declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AccordionHeaderProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * The clickable trigger button within an AccordionItem.
+ */
+declare function AccordionTrigger({
+  className,
+  children,
+  ref,
+  ...props
+}: AccordionTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * The collapsible content panel of an AccordionItem.
+ */
+declare function AccordionPanel({
+  className,
+  ref,
+  ...props
+}: AccordionPanelProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare const AccordionContent: typeof AccordionPanel;
+//#endregion
+export { Accordion, AccordionContent, AccordionContentProps, AccordionHeader, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionTrigger, AccordionTriggerProps };

package/dist/components/Accordion.js

@@ -0,0 +1,97 @@
+import "react";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Accordion.tsx
+/**
+* An accordion component for showing collapsible content sections.
+*
+* @example
+* ```tsx
+* <Accordion>
+*   <AccordionItem value="item-1">
+*     <AccordionTrigger>Section 1</AccordionTrigger>
+*     <AccordionPanel>Content for section 1</AccordionPanel>
+*   </AccordionItem>
+*   <AccordionItem value="item-2">
+*     <AccordionTrigger>Section 2</AccordionTrigger>
+*     <AccordionPanel>Content for section 2</AccordionPanel>
+*   </AccordionItem>
+* </Accordion>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/accordion | Base UI Accordion}
+*/
+function Accordion({ className = "", ref, ...props }) {
+	const classes = ["accordion", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Accordion$1.Root, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* A single item within an Accordion.
+*/
+function AccordionItem({ className = "", ref, ...props }) {
+	const classes = ["accordion__item", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Accordion$1.Item, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* The header/trigger that toggles an AccordionItem.
+*/
+const AccordionHeader = Accordion$1.Header;
+/**
+* The clickable trigger button within an AccordionItem.
+*/
+function AccordionTrigger({ className = "", children, ref, ...props }) {
+	const classes = ["accordion__trigger", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Accordion$1.Header, {
+		className: "accordion__header",
+		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
+			ref,
+			className: classes,
+			...props,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "accordion__trigger-text",
+				children
+			}), /* @__PURE__ */ jsx("span", {
+				className: "accordion__icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("svg", {
+					width: "12",
+					height: "12",
+					viewBox: "0 0 12 12",
+					fill: "none",
+					xmlns: "http://www.w3.org/2000/svg",
+					"aria-hidden": "true",
+					focusable: "false",
+					children: /* @__PURE__ */ jsx("path", {
+						d: "M2.5 4.5L6 8L9.5 4.5",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					})
+				})
+			})]
+		})
+	});
+}
+/**
+* The collapsible content panel of an AccordionItem.
+*/
+function AccordionPanel({ className = "", ref, ...props }) {
+	const classes = ["accordion__panel", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Accordion$1.Panel, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+const AccordionContent = AccordionPanel;
+//#endregion
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger };

package/dist/components/AgentConnection.d.ts

@@ -0,0 +1,69 @@
+import * as React from "react";
+
+//#region src/components/AgentConnection.d.ts
+type AgentConnectionTarget = string;
+type AgentConnectionCommand = {
+  readonly target: AgentConnectionTarget;
+  readonly label: string;
+  readonly description: string;
+  readonly language: "bash" | "json";
+  readonly code: string;
+};
+type ConnectionProps = React.SVGProps<SVGGElement> & {
+  readonly fromX: number;
+  readonly fromY: number;
+  readonly toX: number;
+  readonly toY: number;
+};
+type NanitesAgentConnectionOptions = {
+  readonly mcpName?: string;
+  readonly pluginMarketplace?: string;
+  readonly claudePluginRef?: string;
+  readonly skillName?: string;
+};
+type AgentConnectionPanelProps = {
+  readonly className?: string;
+  readonly commands?: readonly AgentConnectionCommand[];
+  readonly defaultTarget?: AgentConnectionTarget;
+  readonly headingLevel?: 2 | 3;
+  readonly origin?: string;
+  readonly section?: boolean;
+};
+type AgentConnectionPopoverProps = Omit<AgentConnectionPanelProps, "section"> & {
+  readonly className?: string;
+};
+declare function Connection({
+  fromX,
+  fromY,
+  toX,
+  toY,
+  ...props
+}: ConnectionProps): React.JSX.Element;
+declare function buildNanitesAgentConnectionCommands(origin: string, {
+  mcpName,
+  pluginMarketplace,
+  claudePluginRef,
+  skillName
+}?: NanitesAgentConnectionOptions): readonly AgentConnectionCommand[];
+/**
+ * Shows copyable install commands for connecting an agent to Nanites.
+ * Use inside setup screens where users need Codex, Claude Code, skill-only,
+ * or raw MCP JSON connection instructions.
+ */
+declare function AgentConnectionPanel({
+  className,
+  commands: commandsProp,
+  defaultTarget,
+  headingLevel,
+  origin,
+  section
+}: AgentConnectionPanelProps): React.JSX.Element | null;
+/**
+ * Compact popover trigger for showing AgentConnectionPanel inline.
+ */
+declare function AgentConnectionPopover({
+  className,
+  ...props
+}: AgentConnectionPopoverProps): React.JSX.Element;
+//#endregion
+export { AgentConnectionCommand, AgentConnectionPanel, AgentConnectionPanelProps, AgentConnectionPopover, AgentConnectionPopoverProps, AgentConnectionTarget, Connection, ConnectionProps, NanitesAgentConnectionOptions, buildNanitesAgentConnectionCommands };

package/dist/components/AgentConnection.js

@@ -0,0 +1,176 @@
+import { v as LinkIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } from "./Button.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-CttHhWcb.js";
+import { Popover } from "./Popover.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/AgentConnection.tsx
+const DEFAULT_LOCAL_ORIGIN = "http://localhost:5173";
+const CONNECTION_CURVE_MIDPOINT = .5;
+function Connection({ fromX, fromY, toX, toY, ...props }) {
+	const controlX = fromX + (toX - fromX) * CONNECTION_CURVE_MIDPOINT;
+	return /* @__PURE__ */ jsxs("g", {
+		...props,
+		children: [/* @__PURE__ */ jsx("path", {
+			className: "animated",
+			d: `M${fromX},${fromY} C ${controlX},${fromY} ${controlX},${toY} ${toX},${toY}`,
+			fill: "none",
+			stroke: "var(--sigvelo-color-focus)",
+			strokeWidth: 1
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: toX,
+			cy: toY,
+			fill: "var(--sigvelo-color-canvas)",
+			r: 3,
+			stroke: "var(--sigvelo-color-focus)",
+			strokeWidth: 1
+		})]
+	});
+}
+function getBrowserOrigin() {
+	if (typeof window === "undefined") return DEFAULT_LOCAL_ORIGIN;
+	return window.location.origin;
+}
+function buildMcpUrl(origin) {
+	return `${origin.replace(/\/$/, "")}/mcp`;
+}
+function buildNanitesAgentConnectionCommands(origin, { mcpName = "nanites", pluginMarketplace = "WebMCP-org/nanites", claudePluginRef = "nanites@nanites", skillName = "nanites" } = {}) {
+	const mcpUrl = buildMcpUrl(origin);
+	return [
+		{
+			target: "codex",
+			label: "Codex",
+			description: "Install the Nanites plugin marketplace, then connect this deployment over MCP.",
+			language: "bash",
+			code: [
+				`NANITES_MCP_URL="${mcpUrl}"`,
+				"",
+				`codex plugin marketplace add ${pluginMarketplace}`,
+				`codex mcp add ${mcpName} --url "$NANITES_MCP_URL"`,
+				`codex mcp login ${mcpName}`
+			].join("\n")
+		},
+		{
+			target: "claude-code",
+			label: "Claude Code",
+			description: "Install the Nanites plugin and add this deployment as the Nanites MCP server.",
+			language: "bash",
+			code: [
+				`NANITES_MCP_URL="${mcpUrl}"`,
+				"",
+				`claude plugin marketplace add ${pluginMarketplace}`,
+				`claude plugin install ${claudePluginRef}`,
+				`claude mcp add --transport http --scope user ${mcpName} "$NANITES_MCP_URL"`
+			].join("\n")
+		},
+		{
+			target: "skill",
+			label: "Skill Only",
+			description: "Install the Nanites skill without installing a plugin.",
+			language: "bash",
+			code: [
+				`npx --yes skills add ${pluginMarketplace} \\`,
+				`  --skill ${skillName} \\`,
+				`  --global \\`,
+				`  --copy \\`,
+				`  --agent codex claude-code \\`,
+				`  -y`
+			].join("\n")
+		},
+		{
+			target: "mcp-json",
+			label: "MCP JSON",
+			description: "Use this with clients that accept direct MCP server JSON.",
+			language: "json",
+			code: JSON.stringify({ mcpServers: { [mcpName]: {
+				type: "http",
+				url: mcpUrl
+			} } }, null, 2)
+		}
+	];
+}
+/**
+* Shows copyable install commands for connecting an agent to Nanites.
+* Use inside setup screens where users need Codex, Claude Code, skill-only,
+* or raw MCP JSON connection instructions.
+*/
+function AgentConnectionPanel({ className, commands: commandsProp, defaultTarget = "codex", headingLevel = 2, origin, section = true }) {
+	const commands = React.useMemo(() => commandsProp ?? buildNanitesAgentConnectionCommands(origin ?? getBrowserOrigin()), [commandsProp, origin]);
+	const [target, setTarget] = React.useState(defaultTarget);
+	const selected = commands.find((command) => command.target === target) ?? commands[0];
+	const Heading = headingLevel === 3 ? "h3" : "h2";
+	const Wrapper = section ? "section" : "div";
+	if (!selected) return null;
+	return /* @__PURE__ */ jsxs(Wrapper, {
+		className: cx("agent-connect", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "agent-connect__header",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "agent-connect__icon",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(LinkIcon, {
+						size: 18,
+						strokeWidth: 2
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "agent-connect__title-group",
+					children: [/* @__PURE__ */ jsx(Heading, { children: "Connect Agent" }), /* @__PURE__ */ jsx("p", { children: selected.description })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("fieldset", {
+				className: "agent-connect__targets",
+				children: [/* @__PURE__ */ jsx("legend", {
+					className: "agent-connect__legend",
+					children: "Agent connection target"
+				}), commands.map((command) => /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					color: "neutral",
+					size: "sm",
+					"aria-pressed": command.target === selected.target,
+					"data-selected": command.target === selected.target,
+					className: "agent-connect__target",
+					onClick: () => {
+						setTarget(command.target);
+					},
+					children: command.label
+				}, command.target))]
+			}),
+			/* @__PURE__ */ jsxs(CodeBlock, {
+				code: selected.code,
+				language: selected.language,
+				children: [/* @__PURE__ */ jsxs(CodeBlockHeader, { children: [/* @__PURE__ */ jsx(CodeBlockTitle, { children: selected.label }), /* @__PURE__ */ jsx(CodeBlockActions, { children: /* @__PURE__ */ jsx(CodeBlockCopyButton, {}) })] }), /* @__PURE__ */ jsx(CodeBlockContainer, { children: /* @__PURE__ */ jsx(CodeBlockContent, {}) })]
+			})
+		]
+	});
+}
+/**
+* Compact popover trigger for showing AgentConnectionPanel inline.
+*/
+function AgentConnectionPopover({ className, ...props }) {
+	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, { render: /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		color: "neutral",
+		variant: "outline",
+		size: "sm",
+		className: cx("agent-connect-trigger", className),
+		children: [/* @__PURE__ */ jsx(LinkIcon, {
+			size: 16,
+			strokeWidth: 2
+		}), /* @__PURE__ */ jsx("span", { children: "Connect agent" })]
+	}) }), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		side: "top",
+		align: "start",
+		sideOffset: 10,
+		children: /* @__PURE__ */ jsxs(Popover.Popup, {
+			className: "agent-connect-popover",
+			children: [/* @__PURE__ */ jsx(AgentConnectionPanel, {
+				...props,
+				section: false
+			}), /* @__PURE__ */ jsx(Popover.Arrow, {})]
+		})
+	}) })] });
+}
+//#endregion
+export { AgentConnectionPanel, AgentConnectionPopover, Connection, buildNanitesAgentConnectionCommands };