@powerhousedao/design-system 6.2.2-dev.9 → 6.2.2-staging.0

package/dist/connect/index.js

@@ -1,10 +1,9 @@
-import { _ as DropdownMenuTrigger, c as SidebarHeader, d as PackageAnimation, f as Modal, h as DropdownMenuItem, l as SidebarPanel, m as DropdownMenuContent, n as usePagination, o as Sidebar, p as DropdownMenu, s as SidebarFooter, u as Pagination, v as PowerhouseButton } from "../src-DpUTb0dJ.js";
+import { _ as DropdownMenuTrigger, c as SidebarHeader, d as PackageAnimation, f as Modal, h as DropdownMenuItem, l as SidebarPanel, m as DropdownMenuContent, n as usePagination, o as Sidebar, p as DropdownMenu, s as SidebarFooter, u as Pagination, v as PowerhouseButton } from "../src-CVV6HzQZ.js";
 import { n as getDimensions, t as Icon } from "../icon-C4QOpsdI.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";
 import { twJoin, twMerge } from "tailwind-merge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -13,7 +12,8 @@ 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 { 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 { Loader2, Mail, Monitor, Moon, Settings, Smartphone, Sun, Wallet } from "lucide-react";
+import { SyncOperationStatus, addFolder, getSyncStatusSync, preloadEditorModule, setSelectedDrive, setSelectedNode, showDeleteNodeModal, showPHModal, showRevisionHistory, useDocumentById, useDocumentVersionStatus, useDownloadDocument, useDownloadFolder, 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";
 import { addProp, defaultTo, entries, filter, funnel, hasAtLeast, isArray, isDefined, isIncludedIn, isStrictEqual, isString, isTruthy, keys, map, pipe, prop, values } from "remeda";
@@ -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
@@ -334,7 +464,7 @@ function Combobox(props) {
 	});
 }
 //#endregion
-//#region src/connect/components/cookie-banner/cookie-banner.tsx
+//#region src/connect/components/consent-banner/consent-banner.tsx
 const CookieBanner = (props) => {
 	const { children, cookies, submitLabel, rejectLabel, onSubmit = () => {}, onReject = () => {}, className, ...divProps } = props;
 	const [cookiesValue, setCookiesValue] = useState(cookies);
@@ -574,8 +704,17 @@ function fixedForwardRef(render) {
 	return /* @__PURE__ */ forwardRef(render);
 }
 const ConnectSelect = /* @__PURE__ */ fixedForwardRef(function Select(props, ref) {
-	const { items, value, id, onChange, containerClassName, menuClassName, itemClassName, absolutePositionMenu = false, borderRadius = "6px" } = props;
+	const { items, value, id, onChange, containerClassName, menuClassName, itemClassName, absolutePositionMenu = false, borderRadius = "6px", listClassName } = props;
 	const [showItems, setShowItems] = useState(false);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		if (!showItems) return;
+		function onPointerDown(event) {
+			if (!containerRef.current?.contains(event.target)) setShowItems(false);
+		}
+		window.addEventListener("pointerdown", onPointerDown);
+		return () => window.removeEventListener("pointerdown", onPointerDown);
+	}, [showItems]);
 	const selectedItem = getItemByValue(value) ?? items[0];
 	function onItemClick(item) {
 		if (item.disabled) return;
@@ -589,7 +728,11 @@ const ConnectSelect = /* @__PURE__ */ fixedForwardRef(function Select(props, ref
 	return /* @__PURE__ */ jsxs("div", {
 		className: twMerge("border border-border bg-background text-foreground transition-[border-radius]", absolutePositionMenu && "relative", containerClassName),
 		"data-open": showItems,
-		ref,
+		ref: (node) => {
+			containerRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
 		style: { borderRadius },
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: twMerge("flex min-w-[360px] cursor-pointer items-center justify-between pr-3 text-foreground outline-none", menuClassName),
@@ -603,7 +746,7 @@ const ConnectSelect = /* @__PURE__ */ fixedForwardRef(function Select(props, ref
 				name: "ChevronDown"
 			})]
 		}), /* @__PURE__ */ jsx("div", {
-			className: twMerge("max-h-0 w-full overflow-hidden bg-inherit transition-[max-height] ease-in-out", showItems && "max-h-screen", absolutePositionMenu && "absolute"),
+			className: twMerge("max-h-0 w-full overflow-hidden bg-inherit transition-[max-height] ease-in-out", showItems && "max-h-screen", absolutePositionMenu && "absolute", showItems && listClassName),
 			style: { borderRadius: `0 0 ${borderRadius} ${borderRadius}` },
 			children: itemsToShow.map((item) => /* @__PURE__ */ jsx(ItemContainer, {
 				...item,
@@ -616,7 +759,7 @@ const ConnectSelect = /* @__PURE__ */ fixedForwardRef(function Select(props, ref
 function ItemContainer(props) {
 	const { className, disabled, onItemClick, icon, displayValue, value, description } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: twMerge(disabled ? "cursor-not-allowed text-muted-foreground" : "text-foreground", "flex size-full cursor-pointer items-center gap-2 bg-inherit py-3 pl-3 text-start outline-none", className),
+		className: twMerge(disabled ? "cursor-not-allowed text-muted-foreground" : "text-foreground", "flex size-full cursor-pointer items-center gap-2 bg-inherit py-3 pl-3 text-start outline-none", onItemClick && !disabled && "hover:bg-muted", className),
 		onClick: onItemClick,
 		children: [icon, /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 			className: "text-inherit capitalize",
@@ -1643,33 +1786,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);
 			})
@@ -2189,6 +2334,33 @@ function ToolbarCloseButton(props) {
 	});
 }
 /**
+* Toolbar control for upgrading the document to the latest installed
+* document model version. Renders nothing when the document is already
+* current or no upgrade path is registered.
+*/
+function ToolbarUpgradeButton(props) {
+	const { className, onClick: onClickOverride, document, children } = props;
+	const versionStatus = useDocumentVersionStatus(document);
+	const runUpgrade = () => {
+		if (document) showPHModal({
+			type: "confirmDocumentUpgrade",
+			documentId: document.header.id
+		});
+	};
+	const onClick = makeOnClick(document, onClickOverride, runUpgrade);
+	if (!versionStatus || versionStatus.kind !== "upgrade-available" || !versionStatus.canUpgrade) return null;
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		"data-testid": "toolbar-upgrade-button",
+		"aria-label": "Update document",
+		className,
+		onClick,
+		children: children ?? /* @__PURE__ */ jsx("span", {
+			className: "px-1 text-xs",
+			children: "Update available"
+		})
+	});
+}
+/**
 * Creates a toolbar button click handler.
 *
 * If an override is provided, it is called with the current document. Otherwise,
@@ -2273,6 +2445,7 @@ const defaultControlSlots = {
 	],
 	second: ["name"],
 	third: [
+		"update",
 		"history",
 		"switchboard",
 		"close"
@@ -2303,6 +2476,7 @@ const defaultControlComponents = {
 	redo: ToolbarRedoButton,
 	download: ToolbarDownloadButton,
 	name: ToolbarName,
+	update: ToolbarUpgradeButton,
 	switchboard: ToolbarSwitchboardButton,
 	history: ToolbarHistoryButton,
 	close: ToolbarCloseButton
@@ -2441,11 +2615,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", {
@@ -3129,7 +3298,7 @@ function DropZoneWrapper({ children, ...props }) {
 	const selectedDriveId = useSelectedDriveId();
 	const onDropFile = useOnDropFile();
 	const onAddFile = async (file, parent, onProgress, resolveConflict) => {
-		return await onDropFile(file, onProgress, resolveConflict);
+		return await onDropFile(file, parent, onProgress, resolveConflict);
 	};
 	if (!isDragAndDropEnabled || !selectedDriveId) return /* @__PURE__ */ jsx(Fragment$1, { children });
 	return /* @__PURE__ */ jsx(DropZone, {
@@ -3258,6 +3427,7 @@ function ENSAvatar(props) {
 //#endregion
 //#region src/connect/constants/options.tsx
 const defaultDriveOptions = [
+	"DOWNLOAD",
 	"NEW_FOLDER",
 	"RENAME",
 	"SETTINGS"
@@ -3359,6 +3529,13 @@ const debugNodeOptionsMap = {
 	}
 };
 const folderNodeDropdownOptions = {
+	DOWNLOAD: {
+		label: "Download as zip",
+		icon: /* @__PURE__ */ jsx(Icon, {
+			name: "DownloadFile",
+			size: 16
+		})
+	},
 	DUPLICATE: {
 		label: "Duplicate",
 		icon: /* @__PURE__ */ jsx(Icon, {
@@ -3383,14 +3560,14 @@ const folderNodeDropdownOptions = {
 	}
 };
 const fileNodeDropdownOptions = {
+	...folderNodeDropdownOptions,
 	DOWNLOAD: {
 		label: "Download",
 		icon: /* @__PURE__ */ jsx(Icon, {
 			name: "DownloadFile",
 			size: 16
 		})
-	},
-	...folderNodeDropdownOptions
+	}
 };
 //#endregion
 //#region src/connect/constants/syncing.ts
@@ -3714,6 +3891,7 @@ function FolderItem(props) {
 	const { isDropTarget, ...dropProps } = useDropNode(folderNode.id);
 	const { onRenameNode, onRenameDriveNodes, onDuplicateNode } = useNodeActions();
 	const isReadMode = mode === "READ";
+	const downloadFolder = useDownloadFolder(folderNode);
 	function onCancel() {
 		setMode("READ");
 	}
@@ -3725,6 +3903,7 @@ function FolderItem(props) {
 		});
 	}
 	const dropdownMenuHandlers = {
+		DOWNLOAD: downloadFolder,
 		DUPLICATE: () => onDuplicateNode(folderNode),
 		RENAME: () => setMode("WRITE"),
 		DELETE: () => showDeleteNodeModal(folderNode)
@@ -4662,19 +4841,19 @@ function AddDriveModal(props) {
 }
 //#endregion
 //#region src/connect/components/modal/create-document-modal.tsx
-const CLOSE_ANIMATION_DURATION = 300;
+const CLOSE_ANIMATION_DURATION$1 = 300;
 function CreateDocumentModal(props) {
 	const { onOpenChange, onContinue, overlayProps, contentProps, ...restProps } = props;
 	const [nodeName, setNodeName] = useState("");
 	const [isValid, setIsValid] = useState(false);
 	const handleCancel = () => {
 		onOpenChange?.(false);
-		setTimeout(() => setNodeName(""), CLOSE_ANIMATION_DURATION);
+		setTimeout(() => setNodeName(""), CLOSE_ANIMATION_DURATION$1);
 	};
 	const handleCreate = useCallback(() => {
 		if (!isValid) return;
 		onContinue(nodeName);
-		setTimeout(() => setNodeName(""), CLOSE_ANIMATION_DURATION);
+		setTimeout(() => setNodeName(""), CLOSE_ANIMATION_DURATION$1);
 	}, [
 		isValid,
 		nodeName,
@@ -4737,6 +4916,135 @@ function CreateDocumentModal(props) {
 	});
 }
 //#endregion
+//#region src/connect/components/modal/create-document-with-type-modal.tsx
+const CLOSE_ANIMATION_DURATION = 300;
+const PLACEHOLDER_KEY = "";
+function optionKey(option) {
+	return `${option.documentType}::${option.version ?? "latest"}`;
+}
+function optionDisplayName(option) {
+	return option.version ? `${option.name} v${option.version}` : option.name;
+}
+function CreateDocumentWithTypeModal(props) {
+	const { documentTypes, onCreate, onTypeSelected, onOpenChange, overlayProps, contentProps, ...restProps } = props;
+	const [documentName, setDocumentName] = useState("");
+	const [isNameValid, setIsNameValid] = useState(false);
+	const [selectedKey, setSelectedKey] = useState(PLACEHOLDER_KEY);
+	const selectedOption = documentTypes.find((option) => optionKey(option) === selectedKey);
+	const canCreate = isNameValid && selectedOption !== void 0;
+	const typeItems = documentTypes.map((option) => ({
+		value: optionKey(option),
+		displayValue: optionDisplayName(option)
+	}));
+	const items = selectedKey === PLACEHOLDER_KEY ? [{
+		value: PLACEHOLDER_KEY,
+		displayValue: "Select document type…"
+	}, ...typeItems] : typeItems;
+	const resetAfterClose = useCallback(() => {
+		setTimeout(() => {
+			setDocumentName("");
+			setIsNameValid(false);
+			setSelectedKey(PLACEHOLDER_KEY);
+		}, CLOSE_ANIMATION_DURATION);
+	}, []);
+	const handleOpenChange = (open) => {
+		onOpenChange?.(open);
+		if (!open) resetAfterClose();
+	};
+	const handleCancel = () => {
+		handleOpenChange(false);
+	};
+	const handleTypeChange = (value) => {
+		if (value === PLACEHOLDER_KEY) return;
+		setSelectedKey(value);
+		const option = documentTypes.find((o) => optionKey(o) === value);
+		if (option) onTypeSelected?.(option.documentType);
+	};
+	const handleCreate = useCallback(() => {
+		if (!canCreate) return;
+		onCreate({
+			name: documentName,
+			documentType: selectedOption.documentType,
+			version: selectedOption.version
+		});
+		resetAfterClose();
+	}, [
+		canCreate,
+		documentName,
+		onCreate,
+		resetAfterClose,
+		selectedOption
+	]);
+	const handleSubmit = useCallback((e) => {
+		e.preventDefault();
+		handleCreate();
+	}, [handleCreate]);
+	return /* @__PURE__ */ jsx(Modal, {
+		contentProps,
+		onOpenChange: handleOpenChange,
+		overlayProps,
+		title: "Create a new document",
+		...restProps,
+		children: /* @__PURE__ */ jsxs("form", {
+			name: "create-document-with-type",
+			className: "max-h-[85vh] w-100 overflow-y-auto rounded-xl bg-background p-6 text-foreground",
+			onSubmit: handleSubmit,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "pb-2 text-2xl font-bold text-foreground",
+					children: "Create a new document"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "my-6",
+					children: [!isNameValid && documentName ? /* @__PURE__ */ jsx("div", {
+						className: "mb-2 text-destructive",
+						children: "Document name must not be empty or contain control characters."
+					}) : null, /* @__PURE__ */ jsx(FormInput, {
+						icon: /* @__PURE__ */ jsx(Icon, { name: "BrickGlobe" }),
+						onChange: (e) => {
+							const name = e.target.value;
+							setDocumentName(name);
+							setIsNameValid(isValidName(name));
+						},
+						placeholder: "Document name",
+						required: true,
+						value: documentName
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "my-6",
+					children: [/* @__PURE__ */ jsx(Label, {
+						className: "mb-2 text-sm font-medium text-foreground",
+						htmlFor: "document-type",
+						children: "Document type"
+					}), /* @__PURE__ */ jsx(ConnectSelect, {
+						id: "document-type",
+						items,
+						listClassName: "max-h-80 overflow-y-auto overscroll-contain",
+						menuClassName: "min-w-0",
+						onChange: handleTypeChange,
+						value: selectedKey
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-8 flex justify-between gap-3",
+					children: [/* @__PURE__ */ jsx(ModalButton, {
+						onClick: handleCancel,
+						type: "button",
+						variant: "cancel",
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx(ModalButton, {
+						disabled: !canCreate,
+						type: "submit",
+						variant: "confirm",
+						children: "Create"
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
 //#region src/connect/components/modal/delete-drive-modal.tsx
 const ConnectDeleteDriveModal = (props) => {
 	const { inputPlaceholder, body, driveName, ...confirmationModalProps } = props;
@@ -6814,6 +7122,10 @@ function WorkerInspector({ getInfo, onRestart }) {
 				/* @__PURE__ */ jsx(Field, {
 					label: "RPC protocol",
 					value: String(info.rpcProtocolVersion)
+				}),
+				/* @__PURE__ */ jsx(Field, {
+					label: "Enforcement flags",
+					value: info.featureFlags === void 0 || info.featureFlags === "" ? "none" : info.featureFlags
 				})
 			]
 		})]
@@ -7373,6 +7685,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 +7898,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 +7912,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 +7973,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 +8030,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 +8086,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 +8374,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 +8412,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 +8423,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 +9198,20 @@ var renown_short_hover_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA
 //#region assets/renown-short.png
 var renown_short_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAtmSURBVHgB7Z3dbtvmGcefl5LsqHYCq0C6tEUCZ0kDzAFqd0NTYAmweAfr0YD0CrpeQboriH0H6RUsu4ChAYodtCdJD3LQBGttILEBJ4tdJ2uzBoi0yIpsi+S790+ZDkmREilSHySfX6FKpkgliH5+nuf9pKAEkFLO1Bu7VzRNzEuiWfXzglDHSIgZYsYC9b1sCaEeJFZMU66WCnS7XC5vUUwE9Qmk2dndvar+ZpetB5NCxIr6Hr+II1NkgQ7FMeTnHGGygxLhRkGj5agiRRKo3mxeY3EyjkZLR8vl5bCnhxKo2WzOGqb4UpJcCDpH1T+E/wpKY+3gU4XoO0MyCaKyhvVsqifTNNWzVM8y8Hz1rW2pr3ExTDTq+Q3vNPc/lYZ+3S/qwI+iVlDSCJYlZcgDiVqGQdLXJVGTJD47NjV5s9vndP3W6429a8rZpY6LIE6hoB4aMenHMMxgkXqktECBguSBNHhwxMkWiEgt3SRDpbgOukjka8HLxt4VQeaX3uOlIkedrKPr7WjkRWiFv0yXJ/7ecdx7AAWzbsgfnDUPgs1EsWgVykz2QTTaa+melCZqRU1+4C2sO8KJSoe3vAXzZInlyRMoTxAw3MgZXbXEvee6BELdg6EI5zGkLa538gcCRkk1lNzIhXqjseQ8cmiGlbpM2nS+WdA0migViMkvKKx1V00kavr+5OlKRdTw02EEUqnrmvNCBJ1SkQvmvFMsauROQHKmOPHqc/sn6y2/6MMtLsams2X2OgpZhrQM92h6u6OQ5WHadItCliWqSL7quqDAdQ/jpqB5nBDaH6wnv/R1ZKLILS/GBbqEdvdarmP6/pGK5k1f1qg6y8N4gBHevsBSafeKOuSeoqGxPEwAXjcwvUfVQGLedZLGxTPjj9cNKWhWw/9cJ3EAYgLwuqHaZvM4Nus+zAYxAXSkMDGj9TiHYQ7pVEP1BxEzFL6+9T3tvGrS4u/fpzcrRykrcMU8BLb/85yePa/STmOX1h49oSzBAg2BJ0qgw9dPn1OWYIEGzH5LtyKQ8+dnv1QpK7BAA2ZbRRxI42T1wSZlBRZowKw/2u44hnpov9WiLMACDRCI8qK64/ve2sZTygIs0ABZvf848L31je1MRCEWaEA82vxZRaBa4Puoi1bvp78WYoEGxOra457nrD18kvoWGQs0AFYfPLY6DcOdm+4oxAIlzE6jSSsRpEChvbaR3t5pFihBUBR/fft7isq9lY3UpjIWKEHufLceOnV1XHtvzYpeaYMFSgjUPds/9T/OBfEQvdLWtGeBEgDyrCRQDFsS3UqXRCxQTJKSx+ZFbSdVErFAMbi38jBReWwg0Vff3E1FTcQC9YHV2lJRYm1jmwaFXRONu0Si3mi69qEqT5aICQb9NnfurvXd2uqHhfO/pvnzp2kcaHpWp7JAIUHUWX2wNdCo0403Z6Zp8eL7ND1VplHCAvXBuuopXlHFsndi2Cg4O/u2FY1GJRILFBJEnEebz2j94fZQ01UYpqeO0InjlZGIxAL1ADUOJsFjOsY4RJxenHr3OJ05/Tadeuc4DQMWKAC0dtqtnvGKNmGZKBXp4oU5S6hB4hWIm/EHoO8lrfIAa/XHT8NfMsQCHXDirYqqK9J7FytEoLmzp2jYcArzgCiEqRWYUTjuEQnSWPWPSlsoqocB10ARwIJATH7vNrd5FECc35w7SXPnTlmvhwkL1AdokY1DRBqlODYsUAzQmTiqOcwnVTP90kdzIxPHhgWKSXuQ819Di0YQ5sMPzlk90OMAC5QQd1c2rCGOQYIe548v/856Hhe8AvEGU31yYeGcFR0GldLQpbB4aX7kKasXLFAMMM0CJC3RGZWuLqle5TQwcoGGUUsMMgUkLVGa5AEjF+gf/7xDwwQyTb9RpomJIlVmpg96oON1wiUlEeb8pEkekLsUhohnRz10FNpfOiRCr26/rR1IhPGofgtriL14cZ7SBtdAB2AaBx5YZXF29p2+ppBCov/+UlMDs3WKyri1tsLCg6keEJ3QYYjU+mjr50jXosWEaadRW04fLryXSnkACxQARMLk+ah1DUSYP6iJwoDmOoYm0goL1ANEI4gUhTk1XhV2asjFC+cpzbBAIUAqiypRmCiEc9KaumxYoJBAoij7+PSaoAZxxmV8Kw4sUASwj8+LavgWVrcodEa19NIefQALFBGshw9LtyiUhegDWKCIWP1FEXYT84tCGK7IQvQBqe1IxBdwJuRvcbW6Qy/+V09s3A1Ne0SXMODWTugXcq4xO3s6G9EHpFcgNZ61EKG/BSQ1NRU9zVi5OlHqPXfKnvhuD3HYq0qzQq5SGH7z//ynj2LXH+077oSfaO9cNfqrDMkDclcD2Ss4464BQy0UFqS7k+8et0bbo0bNcSe3g6noAf7qm+/6Xv8eNQ3+UY2RZZHctsKsIjxGMVvtY8Q9i+S6GR9nR4s0r6NPklwLlKW7J4+KXAs07ise0gD3RDOxyLVAadiBbNzJtUAvYrSksjKWFZdcC/TvzWhznp1gKIXJsUDYEzFKb7KXSmWamBwLtP7waay+nCwNiMYhlwJh7VfcHedPvJXe/RSTJFcdIdbCwfubsVIXwDykMFM58kBqBdp51bSW3IShgY0zlTRJDT9kaUJYXNIrkJJhFNvNofbh+uc13BMdkYsp2z1j0LBAEcjCQsCkYYFCghmMC2Ny07dxggUKgXWzt0vp27tnGPB8hh6My/7M4wr/qwQAYbDJVJq3XhkGLJAPuJ0AVk9w1OkN10A+oJeZ5QkHC+QD7tCDladMb1L7a4be4I8Xfxv4fpwbo2Cm4trGU262hyCzESjuLZE4CoUjswLZ99bqFzsKMd3JdA3EUWjwZFogjkKDJ/OtMI5CgyXzAtkbPPULR6Hu5KIfaO69eMMRHIWCyYVA7W3l+p8Ez1EomNz0RM/H3BmMo5A/uRGo187xveAo5E+uxsI4CiVPrgTiKJQ8uRuN5yiULLkTiKNQsuRyPhDulBMHjkKvyaVAWJocZ30XR6HX5HZG4pmYtzvgKNQmtwLFHWTlKNQmtwLFneoBOArlfFI9R6H4iHqjKZ0HypO8cRITTHPPHXFVBJKuG19JSQzji58amiRR630awygzTLcbgmhLE0KsOA+a7A8TgFcNKZRAZJo/Og8apkkM44fpdcOUq0hhrggkuQhiAjA9bsAdzWjt3nSdpHIYO8R4QWAxPfWNUaDbWqVSqSmVbjvf0E2DGMaJ2VFAy5VKubzV7kiU9K3zTUPnOohx0zLcTphSfIFnSyBd373u7A+Ca7rBUYhpYyh5vLUx0heeLYGsNGa2jbLRdZNrIcYSxxt9BGk3kL7arw+oVqszxYnJTXXocLpesahRqVAgJr/s64YVgZzoGp22BTocTA2KQpzK8ouuxPHKo6qfZVseILwX1Ru7P6jAteA8NqlGrDVNEJMfkLp29933lBWq53n6jbJr27aO6Ry6Jj/xDrBi2gJ3MOYHQzXZ91rezCNrLUGL3nM7BEJ4klL81XWpesBGTmfZB2nLL2BIKnzmTF02vhPKjk2Xb5BJy97jLVUToajiaJQ9rNaW+m7x6MRcPjY1edPvuq6FTb3eXFKKXeu4SCXDYkGzHkz6QdTRffp62pjLR6emloKu7VkZv3zZuCIK4m/O5v3hxQciFVSBjddMeoAsuolWlgwQR9aEKmWmkY26EOpbrzabsyVJt9SfMxt0DlppmmiLhNf4YJZqPLAFQXGMEXW/gVEnmCPWEvITv5qn41yKQFBKY7KCtPoCjx4tL4W9InKIQDQqGOaSENqnxGSEtjj69JHrFeGd4tydvnNMWyS6rMLdVW/HI5MShBoQNejbfsR5/REJcCiTJZKYl4Jm1QfPEjMmyBoWT2AOj+rQ+REzCY2pIzf7lcbJ/wH9VD8KK3ri6QAAAABJRU5ErkJggg==";
 //#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 +9535,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, CreateDocumentWithTypeModal, 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