@powerhousedao/design-system 6.2.2-dev.1 → 6.2.2-dev.11

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";
@@ -1643,33 +1642,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);
 			})
@@ -7373,6 +7374,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 +7587,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 +7601,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 +7662,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 +7719,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 +7775,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 +8063,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 +8101,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 +8112,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
 			})]
 		})]
@@ -9139,6 +9254,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, 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, 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