@powerhousedao/design-system 6.0.0-dev.191 → 6.0.0-dev.193

package/dist/{command-Cl1OUbPV.d.ts → command-CnlOErMD.d.ts}

@@ -7,7 +7,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
   ref?: React.Ref<HTMLDivElement>;
 } & {
   asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
   label?: string;
   shouldFilter?: boolean;
   filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -18,11 +18,11 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
   disablePointerSelection?: boolean;
   vimBindings?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof React.InputHTMLAttributes<HTMLInputElement> | "key"> & {
+declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
   ref?: React.Ref<HTMLInputElement>;
 } & {
   asChild?: boolean;
-}, keyof React.InputHTMLAttributes<HTMLInputElement> | "key" | "asChild">, "value" | "onChange" | "type"> & {
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
   value?: string;
   onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & {
@@ -34,7 +34,7 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
   ref?: React.Ref<HTMLDivElement>;
 } & {
   asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
   label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandLoading: React.ForwardRefExoticComponent<Omit<{
@@ -43,7 +43,7 @@ declare const CommandLoading: React.ForwardRefExoticComponent<Omit<{
   ref?: React.Ref<HTMLDivElement>;
 } & {
   asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
   progress?: number;
   label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -53,14 +53,14 @@ declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
   ref?: React.Ref<HTMLDivElement>;
 } & {
   asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
   children?: React.ReactNode;
 } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
   ref?: React.Ref<HTMLDivElement>;
 } & {
   asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
   heading?: React.ReactNode;
   value?: string;
   forceMount?: boolean;
@@ -71,7 +71,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
   ref?: React.Ref<HTMLDivElement>;
 } & {
   asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "disabled" | "onSelect"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
   disabled?: boolean;
   onSelect?: (value: string) => void;
   value?: string;
@@ -80,4 +80,4 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { CommandItem as a, CommandInput as i, CommandEmpty as n, CommandList as o, CommandGroup as r, CommandLoading as s, Command as t };
-//# sourceMappingURL=command-Cl1OUbPV.d.ts.map
+//# sourceMappingURL=command-CnlOErMD.d.ts.map

package/dist/command-CnlOErMD.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-CnlOErMD.d.ts","names":[],"sources":["../src/ui/components/command/command.tsx"],"mappings":";;;cAIM,OAAA,EAAO,KAAA,CAAA,yBAAA,CAAA,IAAA;;;;;;;;;;;;;;;;;cAeP,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,IAAA,CAAA,IAAA,CAAA,IAAA,CAAA,KAAA,CAAA,iBAAA,CAAA,KAAA,CAAA,mBAAA,CAAA,gBAAA,GAAA,gBAAA,iBAAA,KAAA,CAAA,mBAAA,CAAA,gBAAA;;;;;;;;;;cA2CZ,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,IAAA;;;;;;;;;cAqBX,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,IAAA;;;;;;;;;;cAMd,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA;;;;;;;cAMZ,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA;;;;;;;;;;;cAgBZ,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,IAAA"}

package/dist/connect/index.js

@@ -1,2 +1,2 @@
-import { $ as HomeScreenItem, $t as Combobox, A as About, At as ConnectDropdownMenu, B as ProcessorsInspector, Bt as ConnectTooltip, C as PackageManager, Ct as nodeOptionsMap, D as DefaultEditor, Dt as ENSAvatar, E as PackageManagerInput, Et as sharingTypeOptions, F as InspectorModal, Ft as UploadFileItem, G as CreateDocumentModal, Gt as Divider, H as DriveSettingsModal, Ht as DocumentStateViewer, I as RemotesInspector, It as ConnectReplaceDuplicateModal, J as AddDriveModal, Jt as DebugInspector, K as AddRemoteDriveModal, Kt as Disclosure, L as ChannelInspector, Lt as useDrop, M as verifyPackageJsonFields, Mt as DropZone, N as ReadRequiredModal, Nt as UploadFileListContainer, O as DefaultEditorSelect, Ot as EditorUndoRedoButtons, P as PackageInstallModal, Pt as UploadFileList, Q as HomeScreenAddDriveItem, Qt as CookieBanner, R as ConnectionStateBadge, Rt as DocumentToolbar, S as SettingsModal, St as nodeOptions, T as PackageManagerListItem, Tt as normalNodeOptionsMap, U as ConnectDeleteItemModal, Ut as Tabs, V as ObjectInspectorModal, Vt as ConnectTooltipProvider, W as ConnectDeleteDriveModal, Wt as TabContent, X as IntegrityInspector, Xt as ConnectSelect, Y as LoadingScreen, Yt as DBExplorer, Z as HomeScreen, Zt as ConnectConfirmationModal, _ as formatEthAddress, _t as debugNodeOptions, a as ToastContainer, at as Footer, b as ClearStorageSettingsRow, bt as defaultNodeOptions, c as ConnectSidebar, ct as FileItem, d as SidebarUser, dt as ERROR, en as Breadcrumb, et as HomeBackgroundImage, f as SidebarLogin, ft as INITIAL_SYNC, g as RevisionHistory, gt as syncStatuses, h as ConnectSearchBar, ht as SYNCING, i as useEns, in as AccountPopover, it as FormInput, j as DependencyVersions, jt as DropZoneWrapper, k as DangerZone, kt as EditorActionButtons, l as ConnectSidebarHeader, lt as SyncStatusIcon, m as SidebarItem, mt as SUCCESS, n as removeSuccessFiles, nn as NodeInput, nt as AddLocalDriveForm, o as isConnectTypeOptions, ot as FooterLink, p as SidebarAddDriveItem, pt as MISSING, q as AddLocalDriveModal, qt as DefaultEditorLoader, r as sortFilesByStatus, rn as AnimatedLoader, rt as Toggle, s as toast, st as FolderItem, t as getFolderStatus, tn as Breadcrumbs, tt as AddRemoteDriveForm, u as ConnectSidebarFooter, ut as CONFLICT, v as ConnectUpgradeDriveModal, vt as debugNodeOptionsMap, w as PackageManagerList, wt as normalNodeOptions, x as SettingsRow, xt as locationInfoByLocation, y as SettingsModalOld, yt as defaultDriveOptions, z as QueueInspector, zt as DocumentTimeline } from "../connect-9ej7S5NE.js";
+import { $ as HomeScreenItem, $t as Combobox, A as About, At as ConnectDropdownMenu, B as ProcessorsInspector, Bt as ConnectTooltip, C as PackageManager, Ct as nodeOptionsMap, D as DefaultEditor, Dt as ENSAvatar, E as PackageManagerInput, Et as sharingTypeOptions, F as InspectorModal, Ft as UploadFileItem, G as CreateDocumentModal, Gt as Divider, H as DriveSettingsModal, Ht as DocumentStateViewer, I as RemotesInspector, It as ConnectReplaceDuplicateModal, J as AddDriveModal, Jt as DebugInspector, K as AddRemoteDriveModal, Kt as Disclosure, L as ChannelInspector, Lt as useDrop, M as verifyPackageJsonFields, Mt as DropZone, N as ReadRequiredModal, Nt as UploadFileListContainer, O as DefaultEditorSelect, Ot as EditorUndoRedoButtons, P as PackageInstallModal, Pt as UploadFileList, Q as HomeScreenAddDriveItem, Qt as CookieBanner, R as ConnectionStateBadge, Rt as DocumentToolbar, S as SettingsModal, St as nodeOptions, T as PackageManagerListItem, Tt as normalNodeOptionsMap, U as ConnectDeleteItemModal, Ut as Tabs, V as ObjectInspectorModal, Vt as ConnectTooltipProvider, W as ConnectDeleteDriveModal, Wt as TabContent, X as IntegrityInspector, Xt as ConnectSelect, Y as LoadingScreen, Yt as DBExplorer, Z as HomeScreen, Zt as ConnectConfirmationModal, _ as formatEthAddress, _t as debugNodeOptions, a as ToastContainer, at as Footer, b as ClearStorageSettingsRow, bt as defaultNodeOptions, c as ConnectSidebar, ct as FileItem, d as SidebarUser, dt as ERROR, en as Breadcrumb, et as HomeBackgroundImage, f as SidebarLogin, ft as INITIAL_SYNC, g as RevisionHistory, gt as syncStatuses, h as ConnectSearchBar, ht as SYNCING, i as useEns, in as AccountPopover, it as FormInput, j as DependencyVersions, jt as DropZoneWrapper, k as DangerZone, kt as EditorActionButtons, l as ConnectSidebarHeader, lt as SyncStatusIcon, m as SidebarItem, mt as SUCCESS, n as removeSuccessFiles, nn as NodeInput, nt as AddLocalDriveForm, o as isConnectTypeOptions, ot as FooterLink, p as SidebarAddDriveItem, pt as MISSING, q as AddLocalDriveModal, qt as DefaultEditorLoader, r as sortFilesByStatus, rn as AnimatedLoader, rt as Toggle, s as toast, st as FolderItem, t as getFolderStatus, tn as Breadcrumbs, tt as AddRemoteDriveForm, u as ConnectSidebarFooter, ut as CONFLICT, v as ConnectUpgradeDriveModal, vt as debugNodeOptionsMap, w as PackageManagerList, wt as normalNodeOptions, x as SettingsRow, xt as locationInfoByLocation, y as SettingsModalOld, yt as defaultDriveOptions, z as QueueInspector, zt as DocumentTimeline } from "../connect-DAOux5MY.js";
 export { About, AccountPopover, AddDriveModal, AddLocalDriveForm, AddLocalDriveModal, AddRemoteDriveForm, AddRemoteDriveModal, AnimatedLoader, Breadcrumb, Breadcrumbs, CONFLICT, ChannelInspector, ClearStorageSettingsRow, Combobox, ConnectConfirmationModal, ConnectDeleteDriveModal, ConnectDeleteItemModal, ConnectDropdownMenu, ConnectReplaceDuplicateModal, ConnectSearchBar, ConnectSelect, ConnectSidebar, ConnectSidebarFooter, ConnectSidebarHeader, ConnectTooltip, ConnectTooltipProvider, ConnectUpgradeDriveModal, ConnectionStateBadge, CookieBanner, CreateDocumentModal, DBExplorer, DangerZone, DebugInspector, DefaultEditor, DefaultEditorLoader, DefaultEditorSelect, DependencyVersions, Disclosure, Divider, DocumentStateViewer, DocumentTimeline, DocumentToolbar, DriveSettingsModal, DropZone, DropZoneWrapper, ENSAvatar, ERROR, EditorActionButtons, EditorUndoRedoButtons, FileItem, FolderItem, Footer, FooterLink, FormInput, HomeBackgroundImage, HomeScreen, HomeScreenAddDriveItem, HomeScreenItem, INITIAL_SYNC, InspectorModal, IntegrityInspector, LoadingScreen, MISSING, NodeInput, ObjectInspectorModal, PackageInstallModal, PackageManager, PackageManagerInput, PackageManagerList, PackageManagerListItem, ProcessorsInspector, QueueInspector, ReadRequiredModal, RemotesInspector, RevisionHistory, SUCCESS, SYNCING, SettingsModal, SettingsModalOld, SettingsRow, SidebarAddDriveItem, SidebarItem, SidebarLogin, SidebarUser, SyncStatusIcon, TabContent, Tabs, ToastContainer, Toggle, UploadFileItem, UploadFileList, UploadFileListContainer, debugNodeOptions, debugNodeOptionsMap, defaultDriveOptions, defaultNodeOptions, formatEthAddress, getFolderStatus, isConnectTypeOptions, locationInfoByLocation, nodeOptions, nodeOptionsMap, normalNodeOptions, normalNodeOptionsMap, removeSuccessFiles, sharingTypeOptions, sortFilesByStatus, syncStatuses, toast, useDrop, useEns, verifyPackageJsonFields };

package/dist/{connect-9ej7S5NE.js → connect-DAOux5MY.js}

@@ -1,6 +1,7 @@
 import { C as DropdownMenuTrigger, b as DropdownMenuContent, c as SidebarFooter, d as Pagination, f as mergeClassNameProps, g as getDimensions, h as Icon, l as SidebarHeader, m as Modal, p as PackageAnimation, r as usePagination, s as Sidebar, t as cn, u as SidebarPanel, w as PowerhouseButton, x as DropdownMenuItem, y as DropdownMenu } from "./src-BwsYkPPG.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/components/popover/popover.js";
 import { SelectFieldRaw } from "./ui/components/select-field/select-field.js";
+import { Input } from "./ui/components/input/input.js";
 import { JsonViewer } from "./ui/components/json-viewer/json-viewer.js";
 import { SearchAutocomplete } from "./ui/components/search-autocomplete/search-autocomplete.js";
 import React, { Fragment, createElement, forwardRef, memo, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
@@ -6653,26 +6654,247 @@ function buildPackageSpec(name, tag) {
 	return tag ? `${name}@${tag}` : name;
 }
 //#endregion
+//#region src/connect/components/modal/settings-modal-v2/package-manager/version-picker.tsx
+function resolveDefaultVersionSelection(options) {
+	const { distTags, versions, version, preferredTag } = options;
+	if (preferredTag && distTags && preferredTag in distTags) return {
+		kind: "tag",
+		value: preferredTag
+	};
+	if (distTags?.latest) return {
+		kind: "tag",
+		value: "latest"
+	};
+	const firstTag = distTags ? Object.keys(distTags)[0] : void 0;
+	if (firstTag) return {
+		kind: "tag",
+		value: firstTag
+	};
+	if (versions && versions.length > 0) return {
+		kind: "version",
+		value: versions[versions.length - 1]
+	};
+	return {
+		kind: "tag",
+		value: version ?? "latest"
+	};
+}
+const VersionPicker = (props) => {
+	const { distTags, versions, selected, onChange, disabled, className } = props;
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const tagEntries = useMemo(() => distTags ? Object.entries(distTags) : [], [distTags]);
+	const filteredTags = useMemo(() => {
+		const needle = query.trim().toLowerCase();
+		if (!needle) return tagEntries;
+		return tagEntries.filter(([tag, ver]) => tag.toLowerCase().includes(needle) || ver.toLowerCase().includes(needle));
+	}, [tagEntries, query]);
+	const filteredVersions = useMemo(() => {
+		const all = versions ?? [];
+		const needle = query.trim().toLowerCase();
+		if (!needle) return all.slice().reverse();
+		return all.filter((v) => v.toLowerCase().includes(needle)).reverse();
+	}, [versions, query]);
+	const hasAnyPickable = tagEntries.length > 0 || (versions?.length ?? 0) > 0;
+	const triggerLabel = selected.value;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: open && !disabled,
+		onOpenChange: (next) => {
+			setOpen(next);
+			if (!next) setQuery("");
+		},
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			disabled: disabled || !hasAnyPickable,
+			className: cn("flex items-center justify-between gap-2 rounded-md border border-gray-300 bg-white px-2.5 py-1 text-xs font-medium text-gray-800 transition-colors", "hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900/20", "disabled:cursor-not-allowed disabled:opacity-60", className),
+			"data-version-picker-trigger": true,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: triggerLabel
+			}), /* @__PURE__ */ jsx(Icon, {
+				name: "ChevronDown",
+				size: 12,
+				className: "shrink-0 text-gray-500"
+			})]
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			"data-version-picker": true,
+			align: "start",
+			sideOffset: 4,
+			className: "w-56 p-0",
+			onOpenAutoFocus: (e) => e.preventDefault(),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "border-b border-gray-200 p-2",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						name: "Search",
+						size: 14,
+						className: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-400"
+					}), /* @__PURE__ */ jsx(Input, {
+						value: query,
+						onChange: (e) => setQuery(e.target.value),
+						placeholder: "Search versions...",
+						className: "h-8 pl-7 text-xs"
+					})]
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "max-h-60 overflow-y-auto py-1",
+				children: [
+					filteredTags.length === 0 && filteredVersions.length === 0 && /* @__PURE__ */ jsx("p", {
+						className: "px-3 py-4 text-center text-xs text-gray-500",
+						children: "No matches."
+					}),
+					filteredTags.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "pb-1",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
+							children: "Tags"
+						}), filteredTags.map(([tag, ver]) => {
+							return /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => {
+									onChange({
+										kind: "tag",
+										value: tag
+									});
+									setOpen(false);
+									setQuery("");
+								},
+								className: cn("flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-xs transition-colors", "hover:bg-gray-100", selected.kind === "tag" && selected.value === tag && "bg-gray-100 font-semibold"),
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "truncate text-gray-900",
+									children: tag
+								}), /* @__PURE__ */ jsx("span", {
+									className: "truncate text-gray-500",
+									children: ver
+								})]
+							}, `tag:${tag}`);
+						})]
+					}),
+					filteredVersions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+						className: "px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
+						children: "Versions"
+					}), filteredVersions.map((ver) => {
+						return /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => {
+								onChange({
+									kind: "version",
+									value: ver
+								});
+								setOpen(false);
+								setQuery("");
+							},
+							className: cn("flex w-full items-center px-3 py-1.5 text-left text-xs transition-colors", "hover:bg-gray-100", selected.kind === "version" && selected.value === ver && "bg-gray-100 font-semibold"),
+							children: /* @__PURE__ */ jsx("span", {
+								className: "truncate text-gray-900",
+								children: ver
+							})
+						}, `ver:${ver}`);
+					})] })
+				]
+			})]
+		})]
+	});
+};
+//#endregion
 //#region src/connect/components/modal/settings-modal-v2/package-manager/package-manager-input.tsx
 const NPM_NAME_RE = /^@[a-z0-9][a-z0-9._-]*\/[a-z0-9][a-z0-9._-]*$|^[a-z0-9][a-z0-9._-]*$/i;
 function isPlausiblePackageName(name) {
 	return name.length >= 2 && NPM_NAME_RE.test(name);
 }
+function PackageResultCard(props) {
+	const { option, ctx, typedTag } = props;
+	const { selectingValue, selectLabel, selectingContent, handleSelect } = ctx;
+	const baseName = option.label.split(" @ ")[0] ?? option.value;
+	const hasVersionMetadata = option.distTags && Object.keys(option.distTags).length > 0 || (option.versions?.length ?? 0) > 0;
+	const [selected, setSelected] = useState(() => resolveDefaultVersionSelection({
+		distTags: option.distTags,
+		versions: option.versions,
+		version: option.version,
+		preferredTag: typedTag
+	}));
+	useEffect(() => {
+		if (!typedTag) return;
+		if (option.distTags && typedTag in option.distTags) setSelected({
+			kind: "tag",
+			value: typedTag
+		});
+		else if (option.versions?.includes(typedTag)) setSelected({
+			kind: "version",
+			value: typedTag
+		});
+	}, [
+		typedTag,
+		option.distTags,
+		option.versions
+	]);
+	const installSpec = hasVersionMetadata ? buildPackageSpec(baseName, selected.value) : option.value;
+	const isSelecting = selectingValue === installSpec;
+	const isDisabled = option.disabled === true;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start justify-between gap-3 rounded-md px-2 py-2 hover:bg-gray-50",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "truncate text-sm font-medium text-gray-900",
+					children: baseName
+				}),
+				option.description && /* @__PURE__ */ jsx("p", {
+					className: "truncate text-xs text-gray-500",
+					children: option.description
+				}),
+				option.meta && /* @__PURE__ */ jsx("p", {
+					className: "truncate text-xs text-gray-400",
+					children: option.meta
+				}),
+				hasVersionMetadata && /* @__PURE__ */ jsx("div", {
+					className: "mt-2",
+					children: /* @__PURE__ */ jsx(VersionPicker, {
+						distTags: option.distTags,
+						versions: option.versions,
+						selected,
+						onChange: setSelected,
+						disabled: isDisabled
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "shrink-0 self-center",
+			children: isSelecting && selectingContent ? /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center",
+				children: selectingContent
+			}) : isDisabled ? /* @__PURE__ */ jsx("span", {
+				className: "rounded-md bg-gray-100 px-3 py-1 text-xs font-medium text-gray-500",
+				children: option.disabledLabel ?? "Unavailable"
+			}) : /* @__PURE__ */ jsx("button", {
+				onClick: () => handleSelect(installSpec),
+				disabled: isSelecting,
+				className: "rounded-md bg-gray-900 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-gray-800 disabled:opacity-50",
+				children: isSelecting ? "..." : selectLabel
+			})
+		})]
+	});
+}
 const PackageManagerInput = (props) => {
 	const { registryPackageList, onInstall, disabled, className } = props;
+	const [typedTag, setTypedTag] = useState(void 0);
 	const fetchOptions = async (query) => {
 		const { name: namePart, tag } = parsePackageSpec(query);
+		setTypedTag(tag);
 		const needle = namePart.toLowerCase();
 		const localOptions = registryPackageList.filter((pkg) => pkg.name.toLowerCase().includes(needle) || pkg.manifest?.description?.toLowerCase().includes(needle)).map((pkg) => {
 			const isInstalled = pkg.status === "local-install" || pkg.status === "registry-install";
 			return {
-				value: buildPackageSpec(pkg.name, tag),
-				label: tag ? `${pkg.name} @ ${tag}` : pkg.name,
-				version: tag ?? pkg.version,
+				value: pkg.name,
+				label: pkg.name,
+				version: pkg.version,
 				description: pkg.manifest?.description,
 				meta: pkg.manifest?.publisher?.name,
 				disabled: isInstalled,
-				disabledLabel: isInstalled ? "Installed" : void 0
+				disabledLabel: isInstalled ? "Installed" : void 0,
+				distTags: pkg.distTags,
+				versions: pkg.versions
 			};
 		});
 		if (!isPlausiblePackageName(namePart) || localOptions.length > 0) return Promise.resolve(localOptions);
@@ -6688,6 +6910,11 @@ const PackageManagerInput = (props) => {
 	const handleSelect = useCallback((value) => {
 		return onInstall(value);
 	}, [onInstall]);
+	const renderRow = useCallback((option, ctx) => /* @__PURE__ */ jsx(PackageResultCard, {
+		option,
+		ctx,
+		typedTag
+	}), [typedTag]);
 	return /* @__PURE__ */ jsxs("div", {
 		className,
 		children: [/* @__PURE__ */ jsx("h3", {
@@ -6704,7 +6931,9 @@ const PackageManagerInput = (props) => {
 				size: 48
 			}),
 			placeholder: "Search packages (e.g. my-pkg, my-pkg@dev, my-pkg@1.2.3)...",
-			disabled
+			disabled,
+			renderRow,
+			keepOpenSelector: "[data-version-picker],[data-version-picker-trigger]"
 		})]
 	});
 };
@@ -6725,6 +6954,13 @@ const PackageDetail = ({ label, value }) => {
 const PackageManagerListItem = (props) => {
 	const { registryPackage, onInstall, onUninstall, className } = props;
 	const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
+	const canPickVersion = registryPackage.status === "available" || registryPackage.status === "dismissed";
+	const hasVersionMetadata = registryPackage.distTags && Object.keys(registryPackage.distTags).length > 0 || (registryPackage.versions?.length ?? 0) > 0;
+	const [selected, setSelected] = useState(() => resolveDefaultVersionSelection({
+		distTags: registryPackage.distTags,
+		versions: registryPackage.versions,
+		version: registryPackage.version
+	}));
 	const installDropdownItem = {
 		id: "install",
 		label: "Install",
@@ -6738,16 +6974,24 @@ const PackageManagerListItem = (props) => {
 		className: "text-red-900"
 	};
 	function getDropdownItems() {
-		return [registryPackage.status === "available" || registryPackage.status === "dismissed" ? installDropdownItem : void 0, registryPackage.status === "registry-install" ? uninstallDropdownItem : void 0].filter((item) => item !== void 0);
+		return [canPickVersion ? installDropdownItem : void 0, registryPackage.status === "registry-install" ? uninstallDropdownItem : void 0].filter((item) => item !== void 0);
 	}
 	const dropdownItems = getDropdownItems();
 	return /* @__PURE__ */ jsxs("li", {
 		className: twMerge("relative flex flex-col items-start rounded-md border border-gray-200 p-3 text-sm leading-5 shadow-sm", className),
 		children: [
-			/* @__PURE__ */ jsxs("h3", {
-				className: "font-semibold text-gray-900",
-				children: [registryPackage.name, registryPackage.version ? /* @__PURE__ */ jsxs("span", {
-					className: "ml-2 text-xs font-normal text-gray-500",
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2 pr-8",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "font-semibold text-gray-900",
+					children: registryPackage.name
+				}), canPickVersion && hasVersionMetadata ? /* @__PURE__ */ jsx(VersionPicker, {
+					distTags: registryPackage.distTags,
+					versions: registryPackage.versions,
+					selected,
+					onChange: setSelected
+				}) : registryPackage.version ? /* @__PURE__ */ jsxs("span", {
+					className: "text-xs font-normal text-gray-500",
 					children: ["v", registryPackage.version]
 				}) : null]
 			}),
@@ -6781,7 +7025,7 @@ const PackageManagerListItem = (props) => {
 				items: dropdownItems,
 				onItemClick: (id) => {
 					if (id === "install") {
-						onInstall(registryPackage.name).catch(console.error);
+						onInstall(canPickVersion && hasVersionMetadata ? buildPackageSpec(registryPackage.name, selected.value) : registryPackage.name).catch(console.error);
 						return;
 					}
 					onUninstall(registryPackage.name);
@@ -8263,4 +8507,4 @@ const removeSuccessFiles = (files) => {
 //#endregion
 export { HomeScreenItem as $, Combobox as $t, About as A, ConnectDropdownMenu as At, ProcessorsInspector as B, ConnectTooltip as Bt, PackageManager as C, nodeOptionsMap as Ct, DefaultEditor as D, ENSAvatar as Dt, PackageManagerInput as E, sharingTypeOptions as Et, InspectorModal as F, UploadFileItem as Ft, CreateDocumentModal as G, Divider as Gt, DriveSettingsModal as H, DocumentStateViewer as Ht, RemotesInspector as I, ConnectReplaceDuplicateModal as It, AddDriveModal as J, DebugInspector as Jt, AddRemoteDriveModal as K, Disclosure as Kt, ChannelInspector as L, useDrop as Lt, verifyPackageJsonFields as M, DropZone as Mt, ReadRequiredModal as N, UploadFileListContainer as Nt, DefaultEditorSelect as O, EditorUndoRedoButtons as Ot, PackageInstallModal as P, UploadFileList as Pt, HomeScreenAddDriveItem as Q, CookieBanner as Qt, ConnectionStateBadge as R, DocumentToolbar as Rt, SettingsModal as S, nodeOptions as St, PackageManagerListItem as T, normalNodeOptionsMap as Tt, ConnectDeleteItemModal as U, Tabs as Ut, ObjectInspectorModal as V, ConnectTooltipProvider as Vt, ConnectDeleteDriveModal as W, TabContent as Wt, IntegrityInspector as X, ConnectSelect as Xt, LoadingScreen as Y, DBExplorer as Yt, HomeScreen as Z, ConnectConfirmationModal as Zt, formatEthAddress as _, debugNodeOptions as _t, ToastContainer$1 as a, Footer as at, ClearStorageSettingsRow as b, defaultNodeOptions as bt, ConnectSidebar as c, FileItem as ct, SidebarUser as d, ERROR as dt, Breadcrumb as en, HomeBackgroundImage as et, SidebarLogin as f, INITIAL_SYNC as ft, RevisionHistory as g, syncStatuses as gt, ConnectSearchBar as h, SYNCING as ht, useEns as i, AccountPopover as in, FormInput as it, DependencyVersions as j, DropZoneWrapper as jt, DangerZone as k, EditorActionButtons as kt, ConnectSidebarHeader as l, SyncStatusIcon as lt, SidebarItem as m, SUCCESS as mt, removeSuccessFiles as n, NodeInput as nn, AddLocalDriveForm as nt, isConnectTypeOptions as o, FooterLink as ot, SidebarAddDriveItem as p, MISSING as pt, AddLocalDriveModal as q, DefaultEditorLoader as qt, sortFilesByStatus as r, AnimatedLoader as rn, Toggle as rt, toast$1 as s, FolderItem as st, getFolderStatus as t, Breadcrumbs as tn, AddRemoteDriveForm as tt, ConnectSidebarFooter as u, CONFLICT as ut, ConnectUpgradeDriveModal as v, debugNodeOptionsMap as vt, PackageManagerList as w, normalNodeOptions as wt, SettingsRow as x, locationInfoByLocation as xt, SettingsModalOld as y, defaultDriveOptions as yt, QueueInspector as z, DocumentTimeline as zt };
 
-//# sourceMappingURL=connect-9ej7S5NE.js.map
+//# sourceMappingURL=connect-DAOux5MY.js.map