@powerhousedao/design-system 6.2.2-dev.2 → 6.2.2-dev.20

package/dist/connect/index.js

@@ -4,7 +4,6 @@ import { Popover, PopoverContent, PopoverTrigger } from "../ui/components/popove
 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";
 import { twJoin, twMerge } from "tailwind-merge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -13,6 +12,7 @@ import { Controller, useForm } from "react-hook-form";
 import { Anchor, Content as Content$1, Portal as Portal$1, Root as Root$1, Trigger as Trigger$1 } from "@radix-ui/react-popover";
 import { format, formatDistanceToNow, parseISO } from "date-fns";
 import { useCopyToClipboard, useDebounceValue, useEventListener, useOnClickOutside } from "usehooks-ts";
+import { Loader2, Mail, Monitor, Moon, Settings, Smartphone, Sun, Wallet } from "lucide-react";
 import { SyncOperationStatus, addFolder, getSyncStatusSync, preloadEditorModule, setSelectedDrive, setSelectedNode, showDeleteNodeModal, showPHModal, showRevisionHistory, useDocumentById, useDownloadDocument, useDragNode, useDropFile, useDropNode, useEditorModulesForDocumentType, useGetSwitchboardLink, useIsDragAndDropEnabled, useNodeActions, useNodeById, useNodeParentFolderById, useOnDropFile, useSelectedDocumentSafe, useSelectedDriveId, useSelectedDriveSafe, useSelectedNodePath, useTheme, useUserPermissions } from "@powerhousedao/reactor-browser";
 import Select, { components } from "react-select";
 import { Content as Content$2, List, Root as Root$2, Trigger as Trigger$2 } from "@radix-ui/react-tabs";
@@ -25,22 +25,152 @@ import { lightTheme } from "@uiw/react-json-view/light";
 import { isValidName } from "@powerhousedao/shared/document-drive";
 import { capitalCase } from "change-case";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { Monitor, Moon, Settings, Sun } from "lucide-react";
 //#region src/connect/components/account-popover/account-popover.tsx
-const AccountPopover = ({ children, content }) => {
-	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-		asChild: true,
-		children: /* @__PURE__ */ jsx("button", {
+const AccountPopover = ({ children, content, open, onOpenChange }) => {
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Open Account",
+				className: "cursor-pointer",
+				children
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-52 p-0",
+			align: "start",
+			children: content
+		})]
+	});
+};
+//#endregion
+//#region src/connect/components/account-popover/account-popover-login.tsx
+const AccountPopoverLogin = ({ onLogin }) => {
+	const allowLogin = !!onLogin;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "p-4",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "mb-4 flex justify-center",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex h-5.5 w-20.75 items-center justify-center overflow-hidden text-foreground",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "RenownLight",
+					size: 83
+				})
+			})
+		}), /* @__PURE__ */ jsx("button", {
+			onClick: allowLogin ? onLogin : void 0,
+			className: allowLogin ? "mt-4 flex h-7 w-full cursor-pointer items-center justify-center rounded-lg border border-border bg-transparent text-sm text-foreground active:active-effect" : "mt-4 flex h-7 w-full cursor-wait items-center justify-center rounded-lg border border-border bg-transparent text-sm text-foreground",
 			type: "button",
-			"aria-label": "Open Account",
-			className: "cursor-pointer",
-			children
+			children: /* @__PURE__ */ jsx("span", { children: "Connect" })
+		})]
+	});
+};
+//#endregion
+//#region src/connect/components/renown-login/renown-login-methods.tsx
+const GoogleMark = () => /* @__PURE__ */ jsxs("svg", {
+	width: "18",
+	height: "18",
+	viewBox: "0 0 18 18",
+	"aria-hidden": "true",
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			fill: "#4285F4",
+			d: "M17.64 9.205c0-.639-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "#34A853",
+			d: "M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.859-3.048.859-2.344 0-4.328-1.583-5.036-3.71H.957v2.332A8.997 8.997 0 0 0 9 18z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "#FBBC05",
+			d: "M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.997 8.997 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "#EA4335",
+			d: "M9 3.58c1.321 0 2.508.454 3.44 1.346l2.582-2.581C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z"
 		})
-	}), /* @__PURE__ */ jsx(PopoverContent, {
-		className: "w-52 p-0",
-		align: "start",
-		children: content
-	})] });
+	]
+});
+const AppleMark = () => /* @__PURE__ */ jsx("svg", {
+	width: "18",
+	height: "18",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.51 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" })
+});
+const METHOD_ICONS = {
+	wallet: /* @__PURE__ */ jsx(Wallet, {
+		size: 18,
+		"aria-hidden": "true"
+	}),
+	email: /* @__PURE__ */ jsx(Mail, {
+		size: 18,
+		"aria-hidden": "true"
+	}),
+	sms: /* @__PURE__ */ jsx(Smartphone, {
+		size: 18,
+		"aria-hidden": "true"
+	}),
+	google: /* @__PURE__ */ jsx(GoogleMark, {}),
+	apple: /* @__PURE__ */ jsx(AppleMark, {})
+};
+const baseButton = "relative flex h-10 w-full items-center justify-center gap-2 rounded-lg px-3 text-sm font-semibold transition-colors disabled:pointer-events-none disabled:opacity-60";
+const primaryButton = "bg-primary text-primary-foreground hover:bg-primary/85";
+const secondaryButton = "border border-border bg-card text-foreground hover:bg-muted";
+const RenownLoginMethods = ({ methods, loading = false, error, className }) => {
+	const [pendingId, setPendingId] = useState(null);
+	const wallet = methods.find((method) => method.id === "wallet");
+	const others = methods.filter((method) => method.id !== "wallet");
+	const renderButton = (method, primary) => {
+		const isPending = loading && pendingId === method.id;
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			disabled: loading,
+			onClick: () => {
+				setPendingId(method.id);
+				method.onSelect();
+			},
+			className: twMerge(baseButton, primary ? primaryButton : secondaryButton, isPending && "animate-pulse"),
+			children: [
+				isPending ? /* @__PURE__ */ jsx(Loader2, {
+					size: 18,
+					className: "animate-spin",
+					"aria-hidden": "true"
+				}) : METHOD_ICONS[method.id],
+				/* @__PURE__ */ jsx("span", { children: method.label }),
+				method.lastUsed ? /* @__PURE__ */ jsx("span", {
+					className: "absolute -top-2 right-2 rounded-full bg-foreground px-1.5 py-0.5 text-[10px] leading-none font-semibold text-background shadow-sm",
+					children: "Last used"
+				}) : null
+			]
+		}, method.id);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: twMerge("flex w-full flex-col gap-3", className),
+		children: [
+			wallet ? renderButton(wallet, true) : null,
+			wallet && others.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "my-1 flex items-center gap-3",
+				children: [
+					/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-xs tracking-wider text-muted-foreground uppercase",
+						children: "or"
+					}),
+					/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
+				]
+			}) : null,
+			others.map((method) => renderButton(method, false)),
+			error ? /* @__PURE__ */ jsx("p", {
+				className: "text-center text-xs text-destructive",
+				children: error
+			}) : null
+		]
+	});
 };
 //#endregion
 //#region assets/connect-loader.mp4
@@ -1643,33 +1773,35 @@ function TabContent(props) {
 //#endregion
 //#region src/connect/components/tabs/tabs.tsx
 const toTabValue = (label) => label.trim().replace(/\s+/g, "-");
-function Tabs({ children, defaultValue }) {
+const resolveTabValue = (props) => props.value ?? toTabValue(props.label);
+function Tabs({ children, defaultValue, onValueChange, listClassName }) {
 	return /* @__PURE__ */ jsxs(Root$2, {
 		defaultValue: toTabValue(defaultValue),
+		onValueChange,
 		className: "flex min-h-0 flex-1 flex-col gap-2",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex w-full shrink-0 justify-between",
+			className: twMerge("flex w-full shrink-0 justify-between", listClassName),
 			children: /* @__PURE__ */ jsx(List, {
 				className: "flex w-full gap-x-2 rounded-xl p-1 text-sm font-semibold text-foreground outline-none",
 				children: React.Children.map(children, (child, _i) => {
 					if (!/* @__PURE__ */ React.isValidElement(child)) return;
-					const { label, disabled } = child.props;
+					const props = child.props;
+					const value = resolveTabValue(props);
 					return /* @__PURE__ */ jsx(Trigger$2, {
 						className: "flex min-h-7 flex-1 items-center justify-center rounded-lg border border-border bg-background py-2 text-foreground transition duration-300 data-disabled:disabled-effect data-[state=active]:bg-accent data-[state=active]:text-foreground",
-						value: toTabValue(label),
-						disabled: disabled ?? false,
-						children: label
-					}, label);
+						value,
+						disabled: props.disabled ?? false,
+						children: props.label
+					}, value);
 				})
 			})
 		}), /* @__PURE__ */ jsx("div", {
 			className: "mt-3 min-h-0 flex-1 rounded-md bg-background",
 			children: React.Children.map(children, (child, i) => {
 				if (!/* @__PURE__ */ React.isValidElement(child)) return;
-				const { label } = child.props;
 				return /* @__PURE__ */ jsx(Content$2, {
 					className: "h-full",
-					value: toTabValue(label),
+					value: resolveTabValue(child.props),
 					children: child
 				}, i);
 			})
@@ -2441,11 +2573,6 @@ function ControlsContainerSlot(props) {
 }
 //#endregion
 //#region src/connect/components/drive-auth-gate/drive-auth-gate.tsx
-/**
-* Reusable "log in to access this drive" card. Used both as the content of the
-* drive-add auth modal and as the full-page gate shown when the user logs out
-* while inside a protected drive — so the two stay visually identical.
-*/
 function DriveAuthGate(props) {
 	const { mode = "login", onLogin, onLogout, className } = props;
 	return /* @__PURE__ */ jsx("div", {
@@ -7373,6 +7500,76 @@ function buildPackageSpec(name, tag) {
 	return tag ? `${name}@${tag}` : name;
 }
 //#endregion
+//#region src/connect/components/modal/settings-modal-v2/package-manager/filter-packages.ts
+/**
+* Client-side package filter used by both Package Manager tabs. Matches the
+* query's name part (any `@tag` suffix is ignored for matching — it drives
+* version preselection instead) against the package name only.
+*
+* This is the seam a future registry search endpoint replaces: when the
+* Available tab searches server-side, its panel skips this function and
+* renders the API results as-is.
+*/
+function filterPackages(packages, query) {
+	const { name } = parsePackageSpec(query);
+	const needle = name.toLowerCase();
+	if (!needle) return packages;
+	return packages.filter((pkg) => pkg.name.toLowerCase().includes(needle));
+}
+//#endregion
+//#region src/connect/components/modal/settings-modal-v2/package-manager/npm-fallback-row.tsx
+/**
+* Shown in the Available tab when the search query matches nothing in the
+* registry but looks like a valid npm package name: the registry's verdaccio
+* backend proxies npmjs.org, so the install can still succeed. Replaces the
+* old SearchAutocomplete fallback option. The button label is "Install from
+* npm" (not "Install") so it doesn't collide with the row-kebab menu item.
+*/
+const NpmFallbackRow = (props) => {
+	const { query, onInstall, disabled } = props;
+	const [isInstalling, setIsInstalling] = useState(false);
+	const { name, tag } = parsePackageSpec(query);
+	const spec = buildPackageSpec(name, tag);
+	function handleInstall() {
+		setIsInstalling(true);
+		onInstall(spec).catch(console.error).finally(() => setIsInstalling(false));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start justify-between gap-3 rounded-md border border-dashed border-border bg-background p-3 text-sm/5",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "truncate font-semibold text-foreground",
+					children: tag ? `${name} @ ${tag}` : name
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-xs text-foreground",
+					children: "Not published to this registry. Install via the npmjs.org uplink."
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground",
+					children: "npm fallback"
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "shrink-0 self-center",
+			children: /* @__PURE__ */ jsx("button", {
+				onClick: handleInstall,
+				disabled: disabled || isInstalling,
+				className: "rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground transition-colors hover:hover-effect disabled:disabled-effect",
+				children: isInstalling ? "Installing..." : "Install from npm"
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/connect/components/modal/settings-modal-v2/package-manager/npm-name.ts
+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);
+}
+//#endregion
 //#region src/connect/components/modal/settings-modal-v2/package-manager/version-picker.tsx
 function resolveDefaultVersionSelection(options) {
 	const { distTags, versions, version, preferredTag } = options;
@@ -7516,147 +7713,6 @@ const VersionPicker = (props) => {
 	});
 };
 //#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 p-2 hover:hover-effect",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "min-w-0 flex-1",
-			children: [
-				/* @__PURE__ */ jsx("p", {
-					className: "truncate text-sm font-medium text-foreground",
-					children: baseName
-				}),
-				option.description && /* @__PURE__ */ jsx("p", {
-					className: "truncate text-xs text-foreground",
-					children: option.description
-				}),
-				option.meta && /* @__PURE__ */ jsx("p", {
-					className: "truncate text-xs text-foreground",
-					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-muted px-3 py-1 text-xs font-medium text-muted-foreground",
-				children: option.disabledLabel ?? "Unavailable"
-			}) : /* @__PURE__ */ jsx("button", {
-				onClick: () => handleSelect(installSpec),
-				disabled: isSelecting,
-				className: "rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground transition-colors hover:hover-effect disabled:disabled-effect",
-				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: pkg.name,
-				label: pkg.name,
-				version: pkg.version,
-				description: pkg.manifest?.description,
-				meta: pkg.manifest?.publisher?.name,
-				disabled: isInstalled,
-				disabledLabel: isInstalled ? "Installed" : void 0,
-				distTags: pkg.distTags,
-				versions: pkg.versions
-			};
-		});
-		if (!isPlausiblePackageName(namePart) || localOptions.length > 0) return Promise.resolve(localOptions);
-		const fallbackOption = {
-			value: buildPackageSpec(namePart, tag),
-			label: tag ? `${namePart} @ ${tag}` : namePart,
-			version: tag,
-			description: "Not published to this registry. Install via the npmjs.org uplink.",
-			meta: "npm fallback"
-		};
-		return Promise.resolve([fallbackOption]);
-	};
-	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", {
-			className: "mb-4 font-semibold text-foreground",
-			children: "Install Package"
-		}), /* @__PURE__ */ jsx(SearchAutocomplete, {
-			fetchOptions,
-			onSelect: handleSelect,
-			selectLabel: "Install",
-			selectingContent: /* @__PURE__ */ jsx(PackageAnimation, {
-				animate: true,
-				loop: true,
-				color: "#6b7280",
-				size: 48
-			}),
-			placeholder: "Search packages (e.g. my-pkg, my-pkg@dev, my-pkg@1.2.3)...",
-			disabled,
-			renderRow,
-			keepOpenSelector: "[data-version-picker],[data-version-picker-trigger]"
-		})]
-	});
-};
-//#endregion
 //#region src/connect/components/modal/settings-modal-v2/package-manager/package-manager-list.tsx
 const PackageDetail = ({ label, value }) => {
 	return /* @__PURE__ */ jsxs("div", {
@@ -7671,15 +7727,31 @@ const PackageDetail = ({ label, value }) => {
 	});
 };
 const PackageManagerListItem = (props) => {
-	const { registryPackage, onInstall, onUninstall, className } = props;
+	const { registryPackage, onInstall, onUninstall, preferredTag, 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
+		version: registryPackage.version,
+		preferredTag
 	}));
+	useEffect(() => {
+		if (!preferredTag) return;
+		if (registryPackage.distTags && preferredTag in registryPackage.distTags) setSelected({
+			kind: "tag",
+			value: preferredTag
+		});
+		else if (registryPackage.versions?.includes(preferredTag)) setSelected({
+			kind: "version",
+			value: preferredTag
+		});
+	}, [
+		preferredTag,
+		registryPackage.distTags,
+		registryPackage.versions
+	]);
 	const installDropdownItem = {
 		id: "install",
 		label: "Install",
@@ -7716,31 +7788,38 @@ const PackageManagerListItem = (props) => {
 			}),
 			registryPackage.manifest !== null && (() => {
 				const { description, category, publisher } = registryPackage.manifest;
-				if (!(description != null || category != null || publisher?.name != null || publisher?.url != null)) return null;
+				const publisherName = publisher?.name;
+				const publisherUrl = publisher?.url;
+				const hasText = (value) => typeof value === "string" && value.trim() !== "";
+				const showDescription = hasText(description);
+				const showCategory = hasText(category);
+				const showPublisher = hasText(publisherName);
+				const showPublisherUrl = hasText(publisherUrl);
+				if (!showDescription && !showCategory && !showPublisher && !showPublisherUrl) return null;
 				return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					description != null && /* @__PURE__ */ jsx(PackageDetail, {
+					showDescription && /* @__PURE__ */ jsx(PackageDetail, {
 						label: "Description",
 						value: description
 					}),
-					category != null && /* @__PURE__ */ jsx(PackageDetail, {
+					showCategory && /* @__PURE__ */ jsx(PackageDetail, {
 						label: "Category",
 						value: category
 					}),
-					publisher?.name != null && /* @__PURE__ */ jsx(PackageDetail, {
+					showPublisher && /* @__PURE__ */ jsx(PackageDetail, {
 						label: "Publisher",
-						value: publisher.name
+						value: publisherName
 					}),
-					publisher?.url != null && /* @__PURE__ */ jsx(PackageDetail, {
+					showPublisherUrl && /* @__PURE__ */ jsx(PackageDetail, {
 						label: "Publisher URL",
 						value: /* @__PURE__ */ jsx("a", {
 							className: "underline",
-							href: publisher.url,
-							children: publisher.url
+							href: publisherUrl,
+							children: publisherUrl
 						})
 					})
 				] });
 			})(),
-			/* @__PURE__ */ jsx(ConnectDropdownMenu, {
+			dropdownItems.length > 0 && /* @__PURE__ */ jsx(ConnectDropdownMenu, {
 				items: dropdownItems,
 				onItemClick: (id) => {
 					if (id === "install") {
@@ -7766,141 +7845,46 @@ const PackageManagerListItem = (props) => {
 		]
 	});
 };
-const PackageManagerList = (props) => {
-	const { className, registryPackageList, onInstall, onUninstall } = props;
-	const [maxHeight, setMaxHeight] = useState();
-	const locallyInstalledPackages = registryPackageList.filter((p) => p.status === "local-install");
-	const registryInstalledPackages = registryPackageList.filter((p) => p.status === "registry-install");
-	const availablePackages = registryPackageList.filter((p) => p.status === "available");
-	const dismissedPackages = registryPackageList.filter((p) => p.status === "dismissed");
-	useLayoutEffect(() => {
-		const calculateMaxHeight = () => {
-			const availableHeight = window.innerHeight - 516;
-			setMaxHeight(Math.max(200, availableHeight));
-		};
-		calculateMaxHeight();
-		window.addEventListener("resize", calculateMaxHeight);
-		return () => window.removeEventListener("resize", calculateMaxHeight);
-	}, []);
-	const hasLocallyInstalled = locallyInstalledPackages.length > 0;
-	const hasRegistryInstalled = registryInstalledPackages.length > 0;
-	const hasAnyInstalled = hasLocallyInstalled || hasRegistryInstalled;
-	const hasAvailable = availablePackages.length > 0;
-	const hasDismissed = dismissedPackages.length > 0;
-	const installedCount = locallyInstalledPackages.length + registryInstalledPackages.length;
-	return /* @__PURE__ */ jsx("div", {
-		className: twMerge("flex flex-col items-stretch overflow-hidden", className),
-		style: { maxHeight },
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex-1 overflow-y-auto pr-2",
-			children: [
-				/* @__PURE__ */ jsxs(PackageSection, {
-					sectionId: "installed",
-					title: "Installed Packages",
-					count: installedCount,
-					isEmpty: !hasAnyInstalled,
-					emptyText: "No packages installed.",
-					children: [hasLocallyInstalled && /* @__PURE__ */ jsx(PackageSubSection, {
-						title: "Locally installed",
-						count: locallyInstalledPackages.length,
-						children: /* @__PURE__ */ jsx(PackageList, {
-							packages: locallyInstalledPackages,
-							onInstall,
-							onUninstall
-						})
-					}), hasRegistryInstalled && /* @__PURE__ */ jsx(PackageSubSection, {
-						title: "Installed from registry",
-						count: registryInstalledPackages.length,
-						children: /* @__PURE__ */ jsx(PackageList, {
-							packages: registryInstalledPackages,
-							onInstall,
-							onUninstall
-						})
-					})]
-				}),
-				/* @__PURE__ */ jsx(PackageSection, {
-					sectionId: "available",
-					title: "Available Packages",
-					count: availablePackages.length,
-					isEmpty: !hasAvailable,
-					emptyText: "No packages available to install.",
-					children: /* @__PURE__ */ jsx(PackageList, {
-						packages: availablePackages,
-						onInstall,
-						onUninstall
-					})
-				}),
-				hasDismissed && /* @__PURE__ */ jsx(PackageSection, {
-					sectionId: "dismissed",
-					title: "Dismissed Packages",
-					count: dismissedPackages.length,
-					children: /* @__PURE__ */ jsx(PackageList, {
-						packages: dismissedPackages,
-						onInstall,
-						onUninstall
-					})
-				})
-			]
-		})
+/**
+* Scroll region shared by both Package Manager tab panels. Fills the space
+* the panel gives it and scrolls its overflow. This works because the tab
+* panel sits inside the settings content card, which has a bounded height
+* (`m-6 ... h-full flex-1 overflow-hidden`); the flex chain down to here is
+* unbroken (`min-h-0` + `flex-1`/`h-full` at every level), so no
+* viewport-measuring hack is needed.
+*/
+const PackagePanelScrollArea = ({ children, className, onReachEnd }) => {
+	const scrollRef = useRef(null);
+	const sentinelRef = useRef(null);
+	const onReachEndRef = useRef(onReachEnd);
+	useEffect(() => {
+		onReachEndRef.current = onReachEnd;
 	});
-};
-const STORAGE_KEY = "ph:package-manager:collapsed-sections";
-function loadCollapsedSections() {
-	if (typeof window === "undefined") return {};
-	try {
-		const raw = window.localStorage.getItem(STORAGE_KEY);
-		return raw ? JSON.parse(raw) : {};
-	} catch {
-		return {};
-	}
-}
-function useCollapsedSection(sectionId) {
-	const [collapsed, setCollapsed] = useState(() => loadCollapsedSections()[sectionId] ?? true);
+	const hasHandler = onReachEnd !== void 0;
 	useEffect(() => {
-		if (typeof window === "undefined") return;
-		try {
-			const current = loadCollapsedSections();
-			current[sectionId] = collapsed;
-			window.localStorage.setItem(STORAGE_KEY, JSON.stringify(current));
-		} catch {}
-	}, [sectionId, collapsed]);
-	return [collapsed, useCallback(() => setCollapsed((prev) => !prev), [])];
-}
-const PackageSection = ({ sectionId, title, count, isEmpty, emptyText, children }) => {
-	const [collapsed, toggle] = useCollapsedSection(sectionId);
-	const contentId = `package-section-${sectionId}`;
-	return /* @__PURE__ */ jsxs("section", {
-		className: "mb-6",
-		children: [/* @__PURE__ */ jsx("h3", {
-			className: "sticky top-0 z-10 mb-3 border-b border-border bg-background text-foreground",
-			children: /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				onClick: toggle,
-				"aria-expanded": !collapsed,
-				"aria-controls": contentId,
-				className: "flex w-full items-center gap-2 pb-2 text-left text-base font-semibold text-foreground hover:hover-effect",
-				children: [
-					/* @__PURE__ */ jsx(Icon, {
-						name: "ChevronDown",
-						size: 16,
-						className: twMerge("shrink-0 text-foreground transition-transform", collapsed && "-rotate-90")
-					}),
-					/* @__PURE__ */ jsx("span", { children: title }),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-xs font-medium text-foreground",
-						children: count
-					})
-				]
-			})
-		}), !collapsed && /* @__PURE__ */ jsx("div", {
-			id: contentId,
-			children: isEmpty ? /* @__PURE__ */ jsx("p", {
-				className: "text-sm text-foreground",
-				children: emptyText
-			}) : /* @__PURE__ */ jsx("div", {
-				className: "flex flex-col gap-4",
-				children
-			})
+		if (!hasHandler) return;
+		const root = scrollRef.current;
+		const sentinel = sentinelRef.current;
+		if (!root || !sentinel) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((e) => e.isIntersecting)) onReachEndRef.current?.();
+		}, {
+			root,
+			rootMargin: "200px"
+		});
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [hasHandler]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: scrollRef,
+		className: twMerge("min-h-0 flex-1 overflow-y-auto", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "pr-3 pb-3",
+			children
+		}), hasHandler && /* @__PURE__ */ jsx("div", {
+			ref: sentinelRef,
+			"aria-hidden": true,
+			className: "h-px w-full"
 		})]
 	});
 };
@@ -7917,31 +7901,286 @@ const PackageSubSection = ({ title, count, children }) => {
 		})]
 	}), children] });
 };
-const PackageList = ({ packages, onInstall, onUninstall }) => {
+const PackageList = ({ packages, onInstall, onUninstall, preferredTag }) => {
 	return /* @__PURE__ */ jsx("ul", {
-		className: "flex flex-col items-stretch gap-4 pr-2",
+		className: "flex flex-col items-stretch gap-4",
 		children: packages.map((pkg) => /* @__PURE__ */ jsx(PackageManagerListItem, {
 			registryPackage: pkg,
 			onInstall,
-			onUninstall
+			onUninstall,
+			preferredTag
 		}, pkg.name))
 	});
 };
 //#endregion
+//#region src/connect/components/modal/settings-modal-v2/package-manager/package-registry-error.tsx
+/**
+* Friendly registry-error banner. Never surfaces raw API / network messages —
+* those stay in the console for debugging.
+*/
+const PackageRegistryError = ({ variant, onRetry }) => {
+	const isEmpty = variant === "empty";
+	return /* @__PURE__ */ jsxs("div", {
+		className: isEmpty ? "flex items-start gap-3 rounded-lg border border-destructive bg-destructive/10 p-4" : "flex items-start gap-3 rounded-lg border border-destructive bg-destructive/10 px-3 py-2.5",
+		role: "alert",
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				name: "Error",
+				size: 16,
+				className: "mt-0.5 shrink-0 text-destructive"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium text-destructive",
+						children: isEmpty ? "Couldn't load packages" : "Couldn't refresh packages"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mt-0.5 text-xs text-muted-foreground",
+						children: isEmpty ? "We couldn't reach the package registry. Check your connection and try again." : "Showing previously loaded packages. Check your connection and try again."
+					}),
+					isEmpty && onRetry && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onRetry,
+						className: "mt-3 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:hover-effect",
+						children: "Try again"
+					})
+				]
+			}),
+			!isEmpty && onRetry && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onRetry,
+				className: "shrink-0 self-center rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:hover-effect",
+				children: "Try again"
+			})
+		]
+	});
+};
+//#endregion
+//#region src/connect/components/modal/settings-modal-v2/package-manager/package-search-input.tsx
+/**
+* Plain controlled search box shared by the Installed/Available tabs. It only
+* reports the query — filtering happens in the panels (client-side today, a
+* registry search endpoint later).
+*/
+const PackageSearchInput = (props) => {
+	const { value, onChange, placeholder, disabled, className } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: twMerge("relative", className),
+		children: [/* @__PURE__ */ jsx(Icon, {
+			name: "Search",
+			size: 14,
+			className: "absolute top-1/2 left-2 -translate-y-1/2 text-muted-foreground"
+		}), /* @__PURE__ */ jsx(Input, {
+			value,
+			onChange: (e) => onChange(e.target.value),
+			placeholder,
+			disabled,
+			className: "pl-7"
+		})]
+	});
+};
+//#endregion
+//#region src/connect/components/modal/settings-modal-v2/package-manager/available-packages-panel.tsx
+const LoadingRow = ({ label, center }) => /* @__PURE__ */ jsxs("div", {
+	className: `flex items-center gap-2 text-sm text-muted-foreground ${center ? "justify-center" : ""}`,
+	children: [/* @__PURE__ */ jsx(PackageAnimation, {
+		animate: true,
+		loop: true,
+		color: "#6b7280",
+		size: 24
+	}), /* @__PURE__ */ jsx("span", { children: label })]
+});
+const AvailablePackagesPanel = (props) => {
+	const { packages, installedNames, query, onQueryChange, serverSearch, isLoading, isLoadingMore, hasMore, onLoadMore, error, onRetry, mutable, onInstall, onUninstall, disabled } = props;
+	const filtered = serverSearch ? packages : filterPackages(packages, query);
+	const available = filtered.filter((p) => p.status === "available");
+	const dismissed = filtered.filter((p) => p.status === "dismissed");
+	const { name: queryName, tag: queryTag } = parsePackageSpec(query);
+	const showNpmFallback = mutable && filtered.length === 0 && isPlausiblePackageName(queryName) && !installedNames.includes(queryName);
+	const isEmpty = filtered.length === 0;
+	const paginated = onLoadMore !== void 0;
+	function renderContent() {
+		if (isEmpty && isLoading) return /* @__PURE__ */ jsx(LoadingRow, {
+			label: "Loading packages…",
+			center: true
+		});
+		if (isEmpty && error) return /* @__PURE__ */ jsx(PackageRegistryError, {
+			variant: "empty",
+			onRetry
+		});
+		if (isEmpty) {
+			if (showNpmFallback) return /* @__PURE__ */ jsx(NpmFallbackRow, {
+				query,
+				onInstall,
+				disabled
+			});
+			return /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-foreground",
+				children: query ? "No packages match your search." : "No packages available to install."
+			});
+		}
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [
+				available.length > 0 && /* @__PURE__ */ jsx(PackageList, {
+					packages: available,
+					onInstall,
+					onUninstall,
+					preferredTag: queryTag
+				}),
+				dismissed.length > 0 && /* @__PURE__ */ jsx(PackageSubSection, {
+					title: "Dismissed",
+					count: dismissed.length,
+					children: /* @__PURE__ */ jsx(PackageList, {
+						packages: dismissed,
+						onInstall,
+						onUninstall,
+						preferredTag: queryTag
+					})
+				}),
+				isLoadingMore && /* @__PURE__ */ jsx(LoadingRow, {
+					label: "Loading more…",
+					center: true
+				}),
+				paginated && !hasMore && !isLoadingMore && /* @__PURE__ */ jsx("p", {
+					className: "py-2 text-center text-sm text-muted-foreground",
+					children: "You’ve reached the end of the list."
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col gap-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "pr-3",
+			children: [
+				/* @__PURE__ */ jsx(PackageSearchInput, {
+					value: query,
+					onChange: onQueryChange,
+					placeholder: "Search available packages",
+					disabled
+				}),
+				!isEmpty && isLoading && /* @__PURE__ */ jsx("div", {
+					className: "mt-3",
+					children: /* @__PURE__ */ jsx(LoadingRow, { label: "Refreshing packages…" })
+				}),
+				!isEmpty && error && /* @__PURE__ */ jsx("div", {
+					className: "mt-3",
+					children: /* @__PURE__ */ jsx(PackageRegistryError, {
+						variant: "refresh",
+						onRetry
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx(PackagePanelScrollArea, {
+			onReachEnd: hasMore && onLoadMore ? onLoadMore : void 0,
+			children: renderContent()
+		})]
+	});
+};
+//#endregion
+//#region src/connect/components/modal/settings-modal-v2/package-manager/installed-packages-panel.tsx
+const InstalledPackagesPanel = (props) => {
+	const { packages, query, onQueryChange, onInstall, onUninstall, disabled } = props;
+	const filtered = filterPackages(packages, query);
+	const locallyInstalled = filtered.filter((p) => p.status === "local-install");
+	const registryInstalled = filtered.filter((p) => p.status === "registry-install");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col gap-3",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "pr-3",
+			children: /* @__PURE__ */ jsx(PackageSearchInput, {
+				value: query,
+				onChange: onQueryChange,
+				placeholder: "Search installed packages",
+				disabled
+			})
+		}), /* @__PURE__ */ jsx(PackagePanelScrollArea, { children: packages.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-foreground",
+			children: "No packages installed."
+		}) : filtered.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-foreground",
+			children: "No installed packages match your search."
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [locallyInstalled.length > 0 && /* @__PURE__ */ jsx(PackageSubSection, {
+				title: "Locally installed",
+				count: locallyInstalled.length,
+				children: /* @__PURE__ */ jsx(PackageList, {
+					packages: locallyInstalled,
+					onInstall,
+					onUninstall
+				})
+			}), registryInstalled.length > 0 && /* @__PURE__ */ jsx(PackageSubSection, {
+				title: "Installed from registry",
+				count: registryInstalled.length,
+				children: /* @__PURE__ */ jsx(PackageList, {
+					packages: registryInstalled,
+					onInstall,
+					onUninstall
+				})
+			})]
+		}) })]
+	});
+};
+//#endregion
 //#region src/connect/components/modal/settings-modal-v2/package-manager/package-manager.tsx
 const PackageManager = (props) => {
-	const { registryPackageList, onInstall, onUninstall, mutable, disabled, className } = props;
+	const { installedPackages, availablePackages, isAvailableLoading, isLoadingMoreAvailable, hasMoreAvailable, onLoadMoreAvailable, availableError, onAvailableRetry, onAvailableSearchChange, onInstall, onUninstall, onAvailableTabOpen, initialTab = "installed", mutable, disabled, className } = props;
+	const [installedQuery, setInstalledQuery] = useState("");
+	const [availableQuery, setAvailableQuery] = useState("");
+	useEffect(() => {
+		if (initialTab === "available") onAvailableTabOpen?.();
+	}, []);
+	const installedNames = installedPackages.map((p) => p.name);
 	return /* @__PURE__ */ jsxs("div", {
-		className: twMerge("flex h-full flex-1 flex-col rounded-lg bg-background p-3 text-foreground", className),
-		children: [mutable && /* @__PURE__ */ jsx(PackageManagerInput, {
-			className: "mb-4",
-			registryPackageList,
-			onInstall,
-			disabled
-		}), /* @__PURE__ */ jsx(PackageManagerList, {
-			registryPackageList,
-			onUninstall,
-			onInstall
+		className: twMerge("flex min-h-0 flex-1 flex-col rounded-lg bg-background pt-3 pl-3 text-foreground", className),
+		children: [/* @__PURE__ */ jsx("h2", {
+			className: "mb-4 shrink-0 pr-3 font-semibold text-foreground",
+			children: "Packages"
+		}), /* @__PURE__ */ jsxs(Tabs, {
+			defaultValue: initialTab,
+			listClassName: "pr-3",
+			onValueChange: (value) => {
+				if (value === "available") onAvailableTabOpen?.();
+			},
+			children: [/* @__PURE__ */ jsx(TabContent, {
+				value: "installed",
+				label: `Installed (${installedPackages.length})`,
+				children: /* @__PURE__ */ jsx(InstalledPackagesPanel, {
+					packages: installedPackages,
+					query: installedQuery,
+					onQueryChange: setInstalledQuery,
+					onInstall,
+					onUninstall,
+					disabled
+				})
+			}), /* @__PURE__ */ jsx(TabContent, {
+				value: "available",
+				label: "Available",
+				children: /* @__PURE__ */ jsx(AvailablePackagesPanel, {
+					packages: availablePackages,
+					installedNames,
+					query: availableQuery,
+					onQueryChange: (q) => {
+						setAvailableQuery(q);
+						onAvailableSearchChange?.(q);
+					},
+					serverSearch: onAvailableSearchChange !== void 0,
+					isLoading: isAvailableLoading,
+					isLoadingMore: isLoadingMoreAvailable,
+					hasMore: hasMoreAvailable,
+					onLoadMore: onLoadMoreAvailable,
+					error: availableError,
+					onRetry: onAvailableRetry,
+					mutable,
+					onInstall,
+					onUninstall,
+					disabled
+				})
+			})]
 		})]
 	});
 };
@@ -7950,19 +8189,21 @@ const PackageManager = (props) => {
 function SettingsModal(props) {
 	const { title, overlayProps, contentProps, onOpenChange, tabs, defaultTab, navFooter, ...restProps } = props;
 	const [selectedTab, setSelectedTab] = useState(defaultTab ?? tabs.at(0)?.id);
-	const tabsContent = tabs.map((tab) => /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick: () => setSelectedTab(tab.id),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: twMerge("flex h-9 w-48 cursor-pointer items-center gap-x-2 rounded-md pl-3 text-foreground hover:hover-effect", selectedTab === tab.id ? "bg-background" : "bg-transparent"),
+	const tabsContent = tabs.map((tab) => {
+		const isActive = selectedTab === tab.id;
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-current": isActive ? "page" : void 0,
+			onClick: isActive ? void 0 : () => setSelectedTab(tab.id),
+			className: twMerge("flex h-9 w-48 items-center gap-x-2 rounded-md pl-3 text-left text-foreground", isActive ? "cursor-default bg-accent" : "cursor-pointer bg-transparent hover:bg-accent"),
 			children: [tab.icon, /* @__PURE__ */ jsx("span", { children: tab.label })]
-		})
-	}, tab.id));
+		}, tab.id);
+	});
 	const SelectedTabComponent = tabs.find((tab) => tab.id === selectedTab)?.content;
 	return /* @__PURE__ */ jsxs(Modal, {
 		contentProps: {
 			...contentProps,
-			className: twMerge("min-h-full w-full max-w-4xl rounded-xl", contentProps?.className)
+			className: twMerge("flex max-h-[calc(100dvh-14rem)] min-h-full w-full max-w-4xl flex-col rounded-xl", contentProps?.className)
 		},
 		onOpenChange,
 		overlayProps: {
@@ -7986,7 +8227,7 @@ function SettingsModal(props) {
 				})
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-1",
+			className: "flex min-h-0 flex-1",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col p-3 pt-6",
 				children: [/* @__PURE__ */ jsx("div", {
@@ -7997,7 +8238,7 @@ function SettingsModal(props) {
 					children: navFooter
 				})]
 			}), /* @__PURE__ */ jsx("div", {
-				className: "m-6 flex h-full flex-1 flex-col overflow-hidden rounded-lg border border-border bg-background",
+				className: "m-6 flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-border bg-background",
 				children: typeof SelectedTabComponent === "function" ? /* @__PURE__ */ jsx(SelectedTabComponent, {}) : SelectedTabComponent
 			})]
 		})]
@@ -8772,50 +9013,20 @@ var renown_short_hover_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA
 //#region assets/renown-short.png
 var renown_short_default = "data:image/png;base64,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";
 //#endregion
-//#region src/connect/components/account-popover/account-popover-login.tsx
-const AccountPopoverLogin = ({ onLogin }) => {
-	const [loading, setLoading] = useState(false);
-	const allowLogin = !loading && !!onLogin;
-	const content = loading ? /* @__PURE__ */ jsx(Icon, {
-		name: "Reload",
-		size: 14,
-		className: "animate-spin"
-	}) : /* @__PURE__ */ jsx("span", { children: "Connect" });
-	const handleLogin = () => {
-		if (onLogin) {
-			setLoading(true);
-			onLogin();
-		}
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "p-4",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "mb-4 flex justify-center",
-			children: /* @__PURE__ */ jsx("div", {
-				className: "flex h-5.5 w-20.75 items-center justify-center overflow-hidden text-foreground",
-				children: /* @__PURE__ */ jsx(Icon, {
-					name: "RenownLight",
-					size: 83
-				})
-			})
-		}), /* @__PURE__ */ jsx("button", {
-			onClick: allowLogin ? handleLogin : void 0,
-			className: twMerge("mt-4 flex h-7 w-full cursor-pointer items-center justify-center rounded-lg border border-border bg-transparent text-sm text-foreground active:active-effect", allowLogin ? "cursor-pointer" : "cursor-wait"),
-			type: "button",
-			children: content
-		})]
-	});
-};
-//#endregion
 //#region src/connect/components/sidebar/sidebar-login.tsx
 const SidebarLogin = ({ onLogin }) => {
-	const content = /* @__PURE__ */ jsx(AccountPopoverLogin, { onLogin });
+	const [open, setOpen] = useState(false);
 	const { theme } = useTheme();
 	const isDark = theme === "dark";
 	const src = isDark ? renown_short_dark_default : renown_short_default;
 	const hoverSrc = isDark ? renown_short_hover_dark_default : renown_short_hover_default;
 	return /* @__PURE__ */ jsx(AccountPopover, {
-		content,
+		open,
+		onOpenChange: setOpen,
+		content: /* @__PURE__ */ jsx(AccountPopoverLogin, { onLogin: onLogin ? () => {
+			setOpen(false);
+			onLogin();
+		} : void 0 }),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: twMerge("group/sidebar-footer flex w-full items-baseline justify-start text-sm/10 font-semibold text-foreground", onLogin ? "cursor-pointer" : "cursor-wait"),
 			children: [/* @__PURE__ */ jsx("img", {
@@ -9139,6 +9350,6 @@ const removeSuccessFiles = (files) => {
 	return files.filter((file) => file.status !== "SUCCESS");
 };
 //#endregion
-export { About, AccountPopover, AddDriveModal, AddLocalDriveForm, AddRemoteDriveForm, AnimatedLoader, Breadcrumb, Breadcrumbs, CONFLICT, ChannelInspector, 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, DriveAuthGate, DriveSettingsModal, DropZone, DropZoneWrapper, ENSAvatar, ERROR, EditorActionButtons, EditorUndoRedoButtons, FileItem, FolderItem, Footer, FooterLink, FormInput, FormattedJsonViewer, HomeBackgroundImage, HomeScreen, HomeScreenAddDriveItem, HomeScreenItem, INITIAL_SYNC, InspectorModal, IntegrityInspector, LoadingScreen, LogoAnimation, MISSING, NodeInput, ObjectInspectorModal, PackageInstallModal, PackageManager, PackageManagerInput, PackageManagerList, PackageManagerListItem, ProcessorsInspector, QueueInspector, ReadRequiredModal, RemotesInspector, RevisionHistory, SUCCESS, SYNCING, SettingsModal, SidebarAddDriveItem, SidebarItem, SidebarLogin, SidebarUser, SyncStatusIcon, TabContent, Tabs, ThemeSwitch, Toggle, ToolbarButton, ToolbarCloseButton, ToolbarContainer, ToolbarControlsContainer, ToolbarDownloadButton, ToolbarHistoryButton, ToolbarInput, ToolbarName, ToolbarRedoButton, ToolbarSwitchboardButton, ToolbarUndoButton, UploadFileItem, UploadFileList, UploadFileListContainer, WorkerInspector, debugNodeOptions, debugNodeOptionsMap, defaultDriveOptions, defaultNodeOptions, fileNodeDropdownOptions, folderNodeDropdownOptions, formatEthAddress, getFolderStatus, locationInfoByLocation, nodeOptions, normalNodeOptions, removeSuccessFiles, sharingTypeOptions, sortFilesByStatus, syncStatuses, useEns, verifyPackageJsonFields };
+export { About, AccountPopover, AccountPopoverLogin, AddDriveModal, AddLocalDriveForm, AddRemoteDriveForm, AnimatedLoader, AvailablePackagesPanel, Breadcrumb, Breadcrumbs, CONFLICT, ChannelInspector, 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, DriveAuthGate, DriveSettingsModal, DropZone, DropZoneWrapper, ENSAvatar, ERROR, EditorActionButtons, EditorUndoRedoButtons, FileItem, FolderItem, Footer, FooterLink, FormInput, FormattedJsonViewer, HomeBackgroundImage, HomeScreen, HomeScreenAddDriveItem, HomeScreenItem, INITIAL_SYNC, InspectorModal, InstalledPackagesPanel, IntegrityInspector, LoadingScreen, LogoAnimation, MISSING, ModalButton, NodeInput, ObjectInspectorModal, PackageInstallModal, PackageList, PackageManager, PackageManagerListItem, PackagePanelScrollArea, PackageRegistryError, PackageSubSection, ProcessorsInspector, QueueInspector, ReadRequiredModal, RemotesInspector, RenownLoginMethods, RevisionHistory, SUCCESS, SYNCING, SettingsModal, SidebarAddDriveItem, SidebarItem, SidebarLogin, SidebarUser, SyncStatusIcon, TabContent, Tabs, ThemeSwitch, Toggle, ToolbarButton, ToolbarCloseButton, ToolbarContainer, ToolbarControlsContainer, ToolbarDownloadButton, ToolbarHistoryButton, ToolbarInput, ToolbarName, ToolbarRedoButton, ToolbarSwitchboardButton, ToolbarUndoButton, UploadFileItem, UploadFileList, UploadFileListContainer, WorkerInspector, debugNodeOptions, debugNodeOptionsMap, defaultDriveOptions, defaultNodeOptions, fileNodeDropdownOptions, folderNodeDropdownOptions, formatEthAddress, formatFileSize, generateId, getFolderStatus, locationInfoByLocation, mapProgressStageToStatus, mapUploadsToFileItems, nodeOptions, normalNodeOptions, removeSuccessFiles, sharingTypeOptions, sortFilesByStatus, syncStatuses, useEns, verifyPackageJsonFields };
 
 //# sourceMappingURL=index.js.map