@powerhousedao/design-system 6.2.3-dev.8 → 6.2.3-dev.80

package/dist/connect/index.js

@@ -1,31 +1,27 @@
-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 { _ as DropdownMenuItem, b as PowerhouseButton, c as SidebarHeader, d as PackageAnimation, f as Modal, g as DropdownMenuContent, h as DropdownMenu, l as SidebarPanel, o as Sidebar, s as SidebarFooter, t as useWindowSize, y as DropdownMenuTrigger } from "../src-DhSJCeu5.js";
+import { n as getDimensions, t as Icon } from "../icon-DQ2yrWYv.js";
+import { Checkbox } from "../ui/components/checkbox/checkbox.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 React, { Fragment, createElement, forwardRef, memo, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import "../ui/index.js";
+import { a as lazyComponent, i as ENSAvatar, n as useEns, r as FormattedJsonViewer, t as formatEthAddress } from "../address-DVC3zalI.js";
+import { t as Label } from "../label-nH2HoKfI.js";
+import React, { Fragment, createContext, createElement, forwardRef, useCallback, useContext, 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";
 import { Content, Portal, Provider, Root, Trigger } from "@radix-ui/react-tooltip";
-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 { useEventListener, useOnClickOutside } from "usehooks-ts";
 import { Loader2, Mail, Monitor, Moon, Settings, Smartphone, Sun, Wallet } from "lucide-react";
-import { SyncOperationStatus, addFolder, getSyncStatusSync, preloadEditorModule, setSelectedDrive, setSelectedNode, showDeleteNodeModal, showPHModal, showRevisionHistory, useDocumentById, 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";
-import { garbageCollect, redo, sortOperations, undo } from "@powerhousedao/shared/document-model";
+import { SyncOperationStatus, addFolder, getNodeTarget, getSyncStatusSync, isPlainClick, makeDriveSlug, preloadEditorModule, showDeleteNodeModal, showPHModal, showRevisionHistory, useCloseNode, useDocumentById, useDocumentVersionStatus, useDownloadDocument, useDownloadFolder, useDragNode, useDriveContext, useDropFile, useDropNode, useEditorModulesForDocumentType, useGetSwitchboardLink, useIsDragAndDropEnabled, useLinkProps, useNodeActions, useNodeById, useNodeTarget, useOnDropFile, usePHNavigation, usePreloadNode, useSelectedDocumentSafe, useSelectedDriveId, useSelectedDriveSafe, useSelectedNodePath, useSetSelectedDrive, useSetSelectedNode, useTheme, useUserPermissions } from "@powerhousedao/reactor-browser";
+import { Content as Content$1, List, Root as Root$1, Trigger as Trigger$1 } from "@radix-ui/react-tabs";
+import { addProp, defaultTo, entries, filter, hasAtLeast, isArray, isDefined, isIncludedIn, isTruthy, keys, map, pipe, prop, values } from "remeda";
+import { redo, undo } from "@powerhousedao/shared/document-model";
 import { RenownLogo } from "@powerhousedao/reactor-browser/renown";
-import { JsonView } from "@uiw/react-json-view";
-import { darkTheme } from "@uiw/react-json-view/dark";
-import { lightTheme } from "@uiw/react-json-view/light";
+import { colorVariants, imageVariants, layerStyle, normalizeBackground } from "@powerhousedao/shared/connect";
 import { isValidName } from "@powerhousedao/shared/document-drive";
 import { capitalCase } from "change-case";
 import { getUpdateTarget, parseInstallSpec } from "@powerhousedao/shared/registry/updates";
-import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/connect/components/account-popover/account-popover.tsx
 const AccountPopover = ({ children, content, open, onOpenChange }) => {
 	return /* @__PURE__ */ jsxs(Popover, {
@@ -245,6 +241,9 @@ function Breadcrumbs() {
 	const selectedDriveId = useSelectedDriveId();
 	const selectedNodePath = useSelectedNodePath();
 	const [isCreating, setIsCreating] = useState(false);
+	const driveContext = useDriveContext();
+	const setSelectedDrive = useSetSelectedDrive();
+	const setSelectedNode = useSetSelectedNode();
 	function onAddNew() {
 		setIsCreating(true);
 	}
@@ -261,6 +260,7 @@ function Breadcrumbs() {
 	function onCancel() {
 		setIsCreating(false);
 	}
+	const driveTarget = selectedDrive ? { driveSlug: makeDriveSlug(selectedDrive) } : void 0;
 	const hasSelectedDrive = !!selectedDrive;
 	const hasNodePath = !!selectedNodePath.length;
 	return /* @__PURE__ */ jsxs("div", {
@@ -282,6 +282,7 @@ function Breadcrumbs() {
 					id: selectedDriveId,
 					parentId: void 0,
 					name: selectedDrive.state.global.name || selectedDrive.header.name,
+					target: driveTarget,
 					onClick: () => setSelectedDrive(selectedDrive)
 				}),
 				/* @__PURE__ */ jsx("span", { children: "/" })
@@ -290,6 +291,7 @@ function Breadcrumbs() {
 				id: node.id,
 				parentId: node.parentFolder,
 				name: node.name,
+				target: getNodeTarget(node, driveContext?.drive),
 				onClick: () => setSelectedNode(node)
 			}), /* @__PURE__ */ jsx("span", { children: "/" })] }, node.id)),
 			isAllowedToCreateDocuments && (isCreating ? /* @__PURE__ */ jsx(NodeInput, {
@@ -311,160 +313,363 @@ function Breadcrumbs() {
 	});
 }
 function Breadcrumb(props) {
-	const { name, id, parentId, onClick } = props;
+	const { name, id, parentId, target, onClick } = props;
+	const navigation = usePHNavigation();
+	const isCurrent = navigation.useIsCurrent?.(target) ?? false;
+	const href = props.href ?? (target ? navigation.hrefFor?.(target) : void 0);
 	const { isDragging, ...dragProps } = useDragNode({
 		srcId: id,
 		parentId: parentId ?? void 0
 	});
 	const { isDropTarget, ...dropProps } = useDropNode(id);
 	const containerStyles = twMerge("cursor-pointer transition-colors last-of-type:text-foreground hover:hover-effect", isDragging ? "opacity-60" : isDropTarget ? "bg-info/10" : "");
+	if (href) {
+		const onLinkClick = (event) => {
+			if (!isPlainClick(event)) return;
+			event.preventDefault();
+			onClick();
+		};
+		return /* @__PURE__ */ jsx("a", {
+			...dragProps,
+			...dropProps,
+			href,
+			"aria-current": target && isCurrent ? "page" : void 0,
+			className: containerStyles,
+			onClick: onLinkClick,
+			children: name
+		});
+	}
+	const onKeyDown = (event) => {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		onClick();
+	};
 	return /* @__PURE__ */ jsx("div", {
 		...dragProps,
 		...dropProps,
 		className: containerStyles,
 		onClick,
+		onKeyDown,
 		role: "button",
+		tabIndex: 0,
 		children: name
 	});
 }
 //#endregion
-//#region src/connect/components/combobox/combobox.tsx
-function DropdownIndicator(props) {
-	return /* @__PURE__ */ jsx(components.DropdownIndicator, {
-		...props,
-		children: /* @__PURE__ */ jsx(Icon, {
-			name: "ChevronDown",
-			size: 16
-		})
+//#region src/connect/components/catch-up-inspector/catch-up-inspector.tsx
+const COLUMNS$3 = [
+	{
+		key: "consumerId",
+		label: "Consumer",
+		width: "180px"
+	},
+	{
+		key: "thread",
+		label: "Thread",
+		width: "90px"
+	},
+	{
+		key: "appliedThrough",
+		label: "Applied Through",
+		width: "110px"
+	},
+	{
+		key: "lag",
+		label: "Lag",
+		width: "70px"
+	},
+	{
+		key: "trackedAbove",
+		label: "Tracked Above",
+		width: "100px"
+	},
+	{
+		key: "lastAdvance",
+		label: "Last Advance",
+		width: "160px"
+	},
+	{
+		key: "blockedOrdinal",
+		label: "Blocked At",
+		width: "90px"
+	},
+	{
+		key: "blockedDocument",
+		label: "Document",
+		width: "150px"
+	},
+	{
+		key: "blockedScope",
+		label: "Scope",
+		width: "80px"
+	},
+	{
+		key: "blockedBranch",
+		label: "Branch",
+		width: "80px"
+	},
+	{
+		key: "blockedType",
+		label: "Type",
+		width: "140px"
+	},
+	{
+		key: "blockedError",
+		label: "Error",
+		width: "180px"
+	}
+];
+const POLL_INTERVAL_MS = 2e3;
+function truncateId$3(id, maxLength = 12) {
+	if (id.length <= maxLength) return id;
+	return id.slice(0, maxLength) + "...";
+}
+function formatDuration(ms) {
+	const totalSeconds = Math.max(0, Math.floor(ms / 1e3));
+	const hours = Math.floor(totalSeconds / 3600);
+	const minutes = Math.floor(totalSeconds % 3600 / 60);
+	const seconds = totalSeconds % 60;
+	if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;
+	if (minutes > 0) return `${minutes}m ${seconds}s`;
+	return `${seconds}s`;
+}
+function Empty() {
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
 	});
 }
-function ClearIndicator(props) {
-	return /* @__PURE__ */ jsx(components.ClearIndicator, {
-		...props,
-		children: /* @__PURE__ */ jsx(Icon, {
-			name: "Xmark",
-			size: 16
-		})
+function Cell({ children }) {
+	return /* @__PURE__ */ jsx("td", {
+		className: "border-l border-border px-3 py-2 text-xs text-foreground",
+		children
 	});
 }
-function MenuList(props) {
-	const { label, onClick, ...rest } = props;
-	const hasAddItemButton = !!label && !!onClick;
-	return /* @__PURE__ */ jsxs(components.MenuList, {
-		...rest,
-		children: [props.children, hasAddItemButton ? /* @__PURE__ */ jsx("button", {
-			className: "w-full px-2 py-3 hover:hover-effect",
-			onClick,
-			children: label
-		}) : null]
+function TruncatedText({ text, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: twMerge("block truncate", className),
+		title: text,
+		children: text
 	});
 }
-function Combobox(props) {
-	const invalid = props["aria-invalid"] === "true";
-	const { addItemButtonProps, ...rest } = props;
-	const { theme } = useTheme();
-	const dark = theme === "dark";
-	return /* @__PURE__ */ jsx(Select, {
-		...rest,
-		components: {
-			DropdownIndicator,
-			ClearIndicator,
-			MenuList: (menuListProps) => MenuList({
-				...menuListProps,
-				...addItemButtonProps
-			})
-		},
-		classNames: { menuList: () => "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-rounded-md scrollbar-thumb-border" },
-		styles: {
-			dropdownIndicator: () => {
-				return {
-					label: "indicatorContainer",
-					display: "flex",
-					transition: "color 150ms",
-					color: dark ? "var(--color-slate-50)" : "var(--color-gray-900)",
-					padding: 8,
-					boxSizing: "border-box"
-				};
-			},
-			clearIndicator: (baseStyles) => {
-				return {
-					...baseStyles,
-					color: dark ? "var(--color-slate-50)" : "var(--color-gray-900)"
-				};
-			},
-			container: (baseStyles) => {
-				return {
-					...baseStyles,
-					borderColor: dark ? "var(--color-slate-700)" : "var(--color-gray-200)",
-					fontSize: 12
-				};
-			},
-			placeholder: (baseStyles) => {
-				return {
-					...baseStyles,
-					color: invalid ? dark ? "var(--color-red-400)" : "var(--color-red-900)" : dark ? "var(--color-slate-100)" : "var(--color-gray-500)"
-				};
-			},
-			control: () => {
-				return {
-					label: "control",
-					alignItems: "center",
-					cursor: "default",
-					display: "flex",
-					flexWrap: "wrap",
-					justifyContent: "space-between",
-					minHeight: 32,
-					outline: "0 !important",
-					position: "relative",
-					transition: "all 100ms",
-					backgroundColor: dark ? "var(--color-slate-800)" : "var(--color-white)",
-					borderColor: invalid ? dark ? "var(--color-red-400)" : "var(--color-red-900)" : dark ? "var(--color-slate-600)" : "var(--color-gray-200)",
-					borderStyle: "solid",
-					borderWidth: 1,
-					borderRadius: "6px",
-					boxSizing: "border-box"
-				};
-			},
-			option: (baseStyles, state) => {
-				return {
-					...baseStyles,
-					backgroundColor: state.isSelected ? dark ? "var(--color-slate-700)" : "var(--color-slate-50)" : dark ? "var(--color-slate-800)" : "var(--color-white)",
-					color: dark ? "var(--color-slate-50)" : "var(--color-gray-800)",
-					":hover": { backgroundColor: dark ? "var(--color-slate-700)" : "var(--color-slate-50)" }
-				};
-			},
-			menuList: (baseStyles) => ({
-				...baseStyles,
-				padding: 0,
-				borderRadius: "6px"
+function CatchUpInspector({ status, onRefresh, onSweepNow }) {
+	const [loading, setLoading] = useState(true);
+	const [sweeping, setSweeping] = useState(false);
+	const [error, setError] = useState(null);
+	const [now, setNow] = useState();
+	const loadStatus = useCallback(async () => {
+		try {
+			await onRefresh();
+			setError(null);
+			setNow(Date.now());
+		} catch (e) {
+			setError(e instanceof Error ? e.message : String(e));
+		} finally {
+			setLoading(false);
+		}
+	}, [onRefresh]);
+	useEffect(() => {
+		loadStatus();
+		const interval = setInterval(() => {
+			loadStatus();
+		}, POLL_INTERVAL_MS);
+		return () => clearInterval(interval);
+	}, [loadStatus]);
+	const handleRefresh = useCallback(async () => {
+		setLoading(true);
+		await loadStatus();
+	}, [loadStatus]);
+	const handleSweepNow = useCallback(async () => {
+		setSweeping(true);
+		try {
+			await onSweepNow();
+			setError(null);
+		} catch (e) {
+			setError(e instanceof Error ? e.message : String(e));
+		} finally {
+			setSweeping(false);
+		}
+		await loadStatus();
+	}, [onSweepNow, loadStatus]);
+	const watermark = status?.watermark;
+	const consumers = status?.consumers ?? [];
+	const settledThrough = watermark?.settledThrough ?? 0;
+	const blockedCount = consumers.filter((c) => c.blockedAt).length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center justify-between",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: "Catch-up Inspector"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("button", {
+						className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect disabled:disabled-effect",
+						disabled: sweeping,
+						onClick: () => void handleSweepNow(),
+						type: "button",
+						children: "Sweep now"
+					}), /* @__PURE__ */ jsxs("button", {
+						className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect disabled:disabled-effect",
+						disabled: loading,
+						onClick: () => void handleRefresh(),
+						type: "button",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							name: "Reload",
+							size: 14
+						}), "Refresh"]
+					})]
+				})]
+			}),
+			watermark && /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 flex-wrap items-center gap-4 rounded-lg bg-muted px-4 py-2 text-sm",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-foreground",
+						children: ["Head: ", /* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: watermark.head
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-foreground",
+						children: [
+							"Settled through:",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: watermark.settledThrough
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-foreground",
+						children: [
+							"Lag:",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: watermark.head - watermark.settledThrough
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-foreground",
+						children: [
+							"Waiting on:",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: watermark.waitingOn.length > 0 ? watermark.waitingOn.join(", ") : "none"
+							})
+						]
+					}),
+					watermark.stalledSinceUtcMs !== void 0 && now !== void 0 && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 text-destructive",
+						children: [
+							/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-destructive" }),
+							"Stalled for:",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								title: new Date(watermark.stalledSinceUtcMs).toISOString(),
+								children: formatDuration(now - watermark.stalledSinceUtcMs)
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 text-foreground",
+						children: [
+							/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-destructive" }),
+							"Blocked: ",
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: blockedCount
+							})
+						]
+					})
+				]
+			}),
+			error && /* @__PURE__ */ jsxs("div", {
+				className: "shrink-0 rounded-lg border border-destructive bg-destructive/10 px-4 py-2 text-sm text-destructive",
+				children: ["Catch-up request failed: ", error]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "max-h-full overflow-auto rounded-lg border border-border",
+				children: /* @__PURE__ */ jsxs("table", {
+					className: "w-full border-collapse",
+					children: [/* @__PURE__ */ jsx("thead", {
+						className: "sticky top-0 bg-muted",
+						children: /* @__PURE__ */ jsx("tr", { children: COLUMNS$3.map((column, index) => /* @__PURE__ */ jsx("th", {
+							className: twMerge("px-3 py-2 text-left text-xs font-medium text-foreground", index > 0 && "border-l border-border"),
+							style: { width: column.width },
+							children: /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: column.label
+							})
+						}, column.key)) })
+					}), /* @__PURE__ */ jsx("tbody", { children: loading && !status ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+						className: "px-3 py-8 text-center text-sm text-muted-foreground",
+						colSpan: COLUMNS$3.length,
+						children: "Loading..."
+					}) }) : consumers.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+						className: "px-3 py-8 text-center text-sm text-muted-foreground",
+						colSpan: COLUMNS$3.length,
+						children: "No catch-up consumers"
+					}) }) : consumers.map((consumer) => {
+						const blocked = consumer.blockedAt;
+						const lastAdvance = new Date(consumer.lastAdvanceUtcMs);
+						return /* @__PURE__ */ jsxs("tr", {
+							className: twMerge("hover:hover-effect", blocked ? "bg-destructive/10" : "odd:bg-card even:bg-background"),
+							children: [
+								/* @__PURE__ */ jsx("td", {
+									className: "px-3 py-2 text-xs text-foreground",
+									children: /* @__PURE__ */ jsx(TruncatedText, { text: consumer.consumerId })
+								}),
+								/* @__PURE__ */ jsx(Cell, { children: consumer.thread }),
+								/* @__PURE__ */ jsx(Cell, { children: consumer.appliedThrough }),
+								/* @__PURE__ */ jsx(Cell, { children: settledThrough - consumer.appliedThrough }),
+								/* @__PURE__ */ jsx(Cell, { children: consumer.trackedAbove }),
+								/* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx("span", {
+									className: "block truncate",
+									title: lastAdvance.toISOString(),
+									children: lastAdvance.toLocaleString()
+								}) }),
+								/* @__PURE__ */ jsx(Cell, { children: blocked ? blocked.ordinal : /* @__PURE__ */ jsx(Empty, {}) }),
+								/* @__PURE__ */ jsx(Cell, { children: blocked ? /* @__PURE__ */ jsx("span", {
+									className: "block truncate",
+									title: blocked.documentId,
+									children: truncateId$3(blocked.documentId)
+								}) : /* @__PURE__ */ jsx(Empty, {}) }),
+								/* @__PURE__ */ jsx(Cell, { children: blocked ? blocked.scope : /* @__PURE__ */ jsx(Empty, {}) }),
+								/* @__PURE__ */ jsx(Cell, { children: blocked ? blocked.branch : /* @__PURE__ */ jsx(Empty, {}) }),
+								/* @__PURE__ */ jsx(Cell, { children: blocked ? /* @__PURE__ */ jsx(TruncatedText, { text: blocked.type }) : /* @__PURE__ */ jsx(Empty, {}) }),
+								/* @__PURE__ */ jsx(Cell, { children: blocked ? /* @__PURE__ */ jsx(TruncatedText, {
+									className: "text-destructive",
+									text: blocked.error
+								}) : /* @__PURE__ */ jsx(Empty, {}) })
+							]
+						}, consumer.consumerId);
+					}) })]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "shrink-0 text-sm text-foreground",
+				children: [
+					"Showing ",
+					consumers.length,
+					" consumer(s)"
+				]
 			})
-		},
-		theme: (theme) => ({
-			...theme,
-			colors: {
-				...theme.colors,
-				primary: dark ? "var(--color-slate-700)" : "var(--color-slate-100)",
-				primary25: dark ? "var(--color-slate-800)" : "var(--color-slate-50)",
-				primary50: dark ? "var(--color-slate-700)" : "var(--color-slate-100)",
-				primary75: dark ? "var(--color-slate-700)" : "var(--color-slate-100)",
-				danger: dark ? "var(--color-red-400)" : "var(--color-red-900)",
-				dangerLight: dark ? "var(--color-red-900)" : "var(--color-red-100)",
-				neutral0: dark ? "var(--color-slate-800)" : "var(--color-white)",
-				neutral5: dark ? "var(--color-slate-800)" : "var(--color-gray-50)",
-				neutral10: dark ? "var(--color-slate-700)" : "var(--color-gray-100)",
-				neutral20: dark ? "var(--color-slate-600)" : "var(--color-gray-200)",
-				neutral30: dark ? "var(--color-slate-600)" : "var(--color-gray-300)",
-				neutral40: dark ? "var(--color-slate-400)" : "var(--color-gray-400)",
-				neutral50: dark ? "var(--color-slate-300)" : "var(--color-gray-500)",
-				neutral60: dark ? "var(--color-slate-200)" : "var(--color-gray-600)",
-				neutral70: dark ? "var(--color-slate-100)" : "var(--color-gray-700)",
-				neutral80: dark ? "var(--color-slate-50)" : "var(--color-gray-800)",
-				neutral90: dark ? "var(--color-slate-50)" : "var(--color-gray-900)"
-			}
-		})
+		]
 	});
 }
 //#endregion
+//#region src/connect/components/combobox/combobox.tsx
+const Combobox = lazyComponent(() => import("../combobox.impl-CQHG0NgO.js").then((m) => m.Combobox));
+//#endregion
 //#region src/connect/components/consent-banner/consent-banner.tsx
 const CookieBanner = (props) => {
 	const { children, cookies, submitLabel, rejectLabel, onSubmit = () => {}, onReject = () => {}, className, ...divProps } = props;
@@ -527,8 +732,9 @@ function ModalButton(props) {
 	const { variant, className, ...rest } = props;
 	const confirmStyle = twMerge(defaultStyle, "bg-primary text-primary-foreground");
 	const cancelStyle = twMerge(defaultStyle, "bg-muted text-muted-foreground");
+	const variantStyle = twMerge(variant === "confirm" ? confirmStyle : cancelStyle, className);
 	return /* @__PURE__ */ jsx("button", {
-		className: twMerge(variant === "confirm" ? confirmStyle : cancelStyle, className),
+		className: variantStyle,
 		...rest
 	});
 }
@@ -702,7 +908,7 @@ function SchemaTreeSidebar({ schema, tables, selectedTable, onSelectTable, onRef
 //#endregion
 //#region src/connect/components/select/select.tsx
 function fixedForwardRef(render) {
-	return /* @__PURE__ */ forwardRef(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", listClassName } = props;
@@ -1279,9 +1485,10 @@ function DBExplorer({ schema, getTables, getTableRows, getDefaultSort, pageSize
 	]);
 	const handleCopyAll = useCallback(async () => {
 		if (!selectedTable) return "";
+		const limit = pagination.total ?? 1e6;
 		return rowsToCsv((await getTableRows(selectedTable, {
 			schema,
-			limit: pagination.total ?? 1e6,
+			limit,
 			offset: 0,
 			sort,
 			filters
@@ -1638,9 +1845,7 @@ const SEQUENCE = [
 	}
 ];
 const ANIM_DUR = 460;
-const HOLD = 800;
-const LAST_DROP = 1220;
-const LOOP_TOTAL = LAST_DROP + ANIM_DUR + HOLD + 1040 + ANIM_DUR + 400;
+const LOOP_TOTAL = 4380;
 const DROP_STYLE = `brickDrop ${ANIM_DUR}ms cubic-bezier(0.28, 1.08, 0.58, 1) forwards`;
 const FALL_STYLE = `brickFall ${ANIM_DUR}ms cubic-bezier(0.28, 1.08, 0.58, 1) forwards`;
 const PATHS = {
@@ -1655,7 +1860,63 @@ const PATHS = {
 	b9: "M18.0156 9.8918C18.0156 9.61566 18.2394 9.39181 18.5155 9.39181L43.0627 9.39138C44.9475 11.8519 46.3659 14.6855 47.1892 17.7635L18.5154 17.7641C18.2392 17.7641 18.0154 17.5402 18.0154 17.2641L18.0156 9.8918Z",
 	b10: "M25.0158 -2.51999e-05C31.418 0.265176 37.1737 3.03916 41.3227 7.36511L25.5156 7.36547C25.2395 7.36547 25.0156 7.14161 25.0156 6.86546L25.0158 -2.51999e-05Z"
 };
+/** A project's loading image, declared by the build as
+* `<meta name="ph-loader" content="<file>" data-animation data-size>`
+* (powerhouse.config.json `icons.loader`). */
+const LOADER_MOTION = {
+	pulse: "ph-loader-pulse 1.6s ease-in-out infinite",
+	spin: "ph-loader-spin 1.4s linear infinite",
+	none: "none"
+};
+const LOADER_KEYFRAMES = "@keyframes ph-loader-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.94)}}@keyframes ph-loader-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){[data-ph-loader-img]{animation:none!important}}";
+let projectLoader;
+/** The page's project loader, or null when Connect's logo stays. Read once:
+* the meta tag is static in index.html. */
+function getProjectLoader() {
+	if (projectLoader !== void 0) return projectLoader;
+	if (typeof document === "undefined") return null;
+	const meta = document.querySelector("meta[name=\"ph-loader\"]");
+	const file = meta?.content;
+	if (!meta || !file) return projectLoader = null;
+	const animation = meta.dataset.animation;
+	const size = Number(meta.dataset.size);
+	projectLoader = {
+		src: new URL(file, document.baseURI).toString(),
+		animation: animation === "spin" || animation === "none" ? animation : "pulse",
+		size: Number.isFinite(size) && size > 0 ? size : 96
+	};
+	return projectLoader;
+}
+/** The project's loading image with its motion. */
+function ProjectLoaderImage({ loader, className = "" }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("style", { children: LOADER_KEYFRAMES }), /* @__PURE__ */ jsx("img", {
+		"data-ph-loader-img": "",
+		src: loader.src,
+		alt: "",
+		"aria-label": "Loading",
+		width: loader.size,
+		className,
+		style: {
+			width: loader.size,
+			height: "auto",
+			animation: LOADER_MOTION[loader.animation]
+		}
+	})] });
+}
+/** Connect's loading animation: the project's loader when one is
+* configured, else the animated Powerhouse logo. */
 function LogoAnimation({ size = 48, className = "" }) {
+	const loader = getProjectLoader();
+	if (loader) return /* @__PURE__ */ jsx(ProjectLoaderImage, {
+		loader,
+		className
+	});
+	return /* @__PURE__ */ jsx(PowerhouseLogoAnimation, {
+		size,
+		className
+	});
+}
+function PowerhouseLogoAnimation({ size = 48, className = "" }) {
 	const refsMap = useRef({});
 	const timers = useRef([]);
 	function getEls(id) {
@@ -1699,7 +1960,7 @@ function LogoAnimation({ size = 48, className = "" }) {
 			clearTimers();
 			resetAll();
 			SEQUENCE.forEach(({ id, dropDelay }) => runDrop(id, dropDelay));
-			const fallStart = LAST_DROP + ANIM_DUR + HOLD;
+			const fallStart = 2480;
 			SEQUENCE.forEach(({ id, fallDelay }) => runFall(id, fallStart + fallDelay));
 			schedule(startLoop, LOOP_TOTAL);
 		}
@@ -1789,7 +2050,7 @@ function TabContent(props) {
 const toTabValue = (label) => label.trim().replace(/\s+/g, "-");
 const resolveTabValue = (props) => props.value ?? toTabValue(props.label);
 function Tabs({ children, defaultValue, onValueChange, listClassName }) {
-	return /* @__PURE__ */ jsxs(Root$2, {
+	return /* @__PURE__ */ jsxs(Root$1, {
 		defaultValue: toTabValue(defaultValue),
 		onValueChange,
 		className: "flex min-h-0 flex-1 flex-col gap-2",
@@ -1798,10 +2059,10 @@ function Tabs({ children, defaultValue, onValueChange, 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;
+					if (!/*#__PURE__*/ React.isValidElement(child)) return;
 					const props = child.props;
 					const value = resolveTabValue(props);
-					return /* @__PURE__ */ jsx(Trigger$2, {
+					return /* @__PURE__ */ jsx(Trigger$1, {
 						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,
 						disabled: props.disabled ?? false,
@@ -1812,10 +2073,11 @@ function Tabs({ children, defaultValue, onValueChange, listClassName }) {
 		}), /* @__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;
-				return /* @__PURE__ */ jsx(Content$2, {
+				if (!/*#__PURE__*/ React.isValidElement(child)) return;
+				const value = resolveTabValue(child.props);
+				return /* @__PURE__ */ jsx(Content$1, {
 					className: "h-full",
-					value: resolveTabValue(child.props),
+					value,
 					children: child
 				}, i);
 			})
@@ -1848,271 +2110,8 @@ function DocumentStateViewer({ state, ignoredScopes = ["auth", "document"], defa
 	});
 }
 //#endregion
-//#region src/connect/components/tooltip/tooltip.tsx
-function ConnectTooltip(props) {
-	const { children, content, open, defaultOpen, onOpenChange, className, side = "top", sideOffset = 5, delayDuration, ...rest } = props;
-	return /* @__PURE__ */ jsxs(Root, {
-		defaultOpen,
-		delayDuration,
-		onOpenChange,
-		open,
-		children: [/* @__PURE__ */ jsx(Trigger, {
-			asChild: true,
-			children
-		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
-			...rest,
-			side,
-			sideOffset,
-			className: twMerge("z-50 rounded-lg border border-border bg-popover p-2 text-xs text-popover-foreground shadow-tooltip", className),
-			children: content
-		}) })]
-	});
-}
-const ConnectTooltipProvider = Provider;
-//#endregion
-//#region src/connect/components/document-timeline/components/h-divider.tsx
-const HDivider = (props) => {
-	const { className, timestampUtcMs: timestamp, title, subtitle, onClick, isSelected = false } = props;
-	const [open, setOpen] = useState(false);
-	const hasContent = !!title || !!subtitle || !!timestamp;
-	useEffect(() => {
-		if (open) {
-			setOpen(false);
-			setTimeout(() => hasContent && setOpen(true), 50);
-		}
-	}, [
-		title,
-		subtitle,
-		timestamp,
-		hasContent
-	]);
-	const formatTimestamp = (isoString) => {
-		if (!isoString) return "";
-		try {
-			return formatDistanceToNow(new Date(isoString), { addSuffix: true });
-		} catch {
-			return isoString;
-		}
-	};
-	const tooltipContent = /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col text-xs",
-		children: [
-			!!title && /* @__PURE__ */ jsx("div", { children: title }),
-			!!subtitle && /* @__PURE__ */ jsx("div", {
-				className: "text-foreground",
-				children: subtitle
-			}),
-			!!timestamp && /* @__PURE__ */ jsx("div", { children: formatTimestamp(timestamp) })
-		]
-	});
-	const handleMouseEnter = () => {
-		if (hasContent) setOpen(true);
-	};
-	const handleMouseLeave = () => {
-		setOpen(false);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative",
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		children: [isSelected && /* @__PURE__ */ jsx(Icon, {
-			name: "TimelineCaret",
-			color: "#4EA9FF",
-			size: 10,
-			className: "absolute top-[-11px] z-40"
-		}), /* @__PURE__ */ jsx(ConnectTooltip, {
-			className: "rounded-md bg-primary text-primary-foreground",
-			content: tooltipContent,
-			open: open && hasContent,
-			onOpenChange: setOpen,
-			delayDuration: 0,
-			side: "bottom",
-			sideOffset: 5,
-			children: /* @__PURE__ */ jsx("div", {
-				className: twMerge("mx-0.5 flex h-6.25 w-1.5 cursor-pointer flex-col items-center justify-center rounded-xs hover:hover-effect", isSelected && "bg-info/10", className),
-				onClick,
-				"data-title": title,
-				"data-subtitle": subtitle,
-				"data-timestamp": timestamp,
-				children: /* @__PURE__ */ jsx("div", { className: "h-0.5 w-1 rounded-full bg-muted" })
-			})
-		})]
-	});
-};
-//#endregion
-//#region src/connect/components/document-timeline/components/timeline-bar.tsx
-const getBarHeight = (size = 0) => {
-	switch (true) {
-		case size <= 0: return "h-[1px]";
-		case size === 1: return "h-[3px]";
-		case size === 2: return "h-[6px]";
-		case size === 3: return "h-[9px]";
-		case size >= 4: return "h-[12px]";
-		default: return "h-[1px]";
-	}
-};
-const formatTimestamp$1 = (isoString) => {
-	if (!isoString) return "";
-	try {
-		return format(parseISO(isoString), "HH:mm, dd, MMMM");
-	} catch {
-		return isoString;
-	}
-};
-const TimelineBar = ({ onClick, className, timestampUtcMs: timestamp, additions, deletions, addSize = 0, delSize = 0, isSelected = false }) => {
-	const [open, setOpen] = useState(false);
-	const noChanges = addSize === 0 && delSize === 0;
-	const addBarHeight = getBarHeight(addSize);
-	const delBarHeight = getBarHeight(delSize);
-	const tooltipContent = /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col text-xs",
-		children: [
-			/* @__PURE__ */ jsx("div", { children: formatTimestamp$1(timestamp) }),
-			/* @__PURE__ */ jsx("div", {
-				className: "text-success",
-				children: `${additions} additions +`
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "text-destructive",
-				children: `${deletions} deletions -`
-			})
-		]
-	});
-	const handleMouseEnter = () => {
-		if (!noChanges) setOpen(true);
-	};
-	const handleMouseLeave = () => {
-		setOpen(false);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative",
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		children: [isSelected && /* @__PURE__ */ jsx(Icon, {
-			name: "TimelineCaret",
-			color: "#4EA9FF",
-			size: 10,
-			className: "absolute top-[-11px] left-[-2px] z-40"
-		}), noChanges ? /* @__PURE__ */ jsx("div", {
-			className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:hover-effect", className),
-			"data-timestamp": timestamp,
-			onClick,
-			children: /* @__PURE__ */ jsx("div", { className: "size-[3px] rounded-full bg-muted-foreground" })
-		}) : /* @__PURE__ */ jsx(ConnectTooltip, {
-			className: "rounded-md bg-primary text-primary-foreground",
-			content: tooltipContent,
-			open,
-			onOpenChange: setOpen,
-			delayDuration: 0,
-			side: "bottom",
-			sideOffset: 5,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:hover-effect", className, isSelected && "bg-info/10"),
-				"data-timestamp": timestamp,
-				onClick,
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "flex h-3 w-0.5 items-end",
-					children: /* @__PURE__ */ jsx("div", { className: twMerge("h-3 w-0.5 rounded-t-full bg-success", addBarHeight) })
-				}), /* @__PURE__ */ jsx("div", {
-					className: "flex h-3 w-0.5 items-start",
-					children: /* @__PURE__ */ jsx("div", { className: twMerge("h-3 w-0.5 rounded-b-full bg-destructive", delBarHeight) })
-				})]
-			})
-		})]
-	});
-};
-//#endregion
 //#region src/connect/components/document-timeline/document-timeline.tsx
-const defaultTimeLineItem = {
-	id: "default",
-	type: "bar",
-	addSize: 0,
-	delSize: 0
-};
-const DocumentTimeline = (props) => {
-	const { timeline = [], onItemClick } = props;
-	const [selectedItem, setSelectedItem] = useState(null);
-	const scrollContainerRef = useRef(null);
-	const handleClick = (item) => {
-		if (item.id === selectedItem || item.id === defaultTimeLineItem.id) {
-			onItemClick?.(null);
-			setSelectedItem(null);
-		} else {
-			onItemClick?.(item);
-			setSelectedItem(item.id);
-		}
-	};
-	const mergedTimelineItems = [...timeline, defaultTimeLineItem];
-	const [unselectedItems, selectedItems] = useMemo(() => {
-		const indexSelected = mergedTimelineItems.findIndex((item) => item.id === selectedItem);
-		return indexSelected === -1 ? [mergedTimelineItems, []] : [mergedTimelineItems.slice(0, indexSelected), mergedTimelineItems.slice(indexSelected)];
-	}, [mergedTimelineItems, selectedItem]);
-	const renderTimelineItems = useCallback((items) => {
-		return items.map((item) => {
-			if (item.type === "divider") {
-				const { timestampUtcMs, title, subtitle } = item;
-				return /* @__PURE__ */ jsx(HDivider, {
-					timestampUtcMs,
-					title,
-					subtitle,
-					onClick: () => handleClick(item),
-					isSelected: item.id === selectedItem
-				}, item.id);
-			}
-			return /* @__PURE__ */ jsx(TimelineBar, {
-				timestampUtcMs: item.timestampUtcMs,
-				addSize: item.addSize,
-				delSize: item.delSize,
-				additions: item.additions,
-				deletions: item.deletions,
-				isSelected: item.id === selectedItem,
-				onClick: () => handleClick(item)
-			}, item.id);
-		});
-	}, [handleClick, selectedItem]);
-	const unselectedContent = useMemo(() => renderTimelineItems(unselectedItems), [unselectedItems, renderTimelineItems]);
-	const selectedContent = useMemo(() => renderTimelineItems(selectedItems), [selectedItems, renderTimelineItems]);
-	useEffect(() => {
-		if (scrollContainerRef.current) scrollContainerRef.current.scrollLeft = scrollContainerRef.current.scrollWidth;
-	}, []);
-	return /* @__PURE__ */ jsx(ConnectTooltipProvider, {
-		delayDuration: 0,
-		skipDelayDuration: 0,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative h-[36px] w-full",
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "absolute left-0 z-20 h-[17px] w-[6px] bg-background",
-					children: /* @__PURE__ */ jsx("div", { className: "mt-[11px] h-[6px] w-[6px] rounded-tl-md bg-background" })
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "absolute top-[11px] right-0 z-20 h-[6px] w-[6px] bg-background",
-					children: /* @__PURE__ */ jsx("div", { className: "h-[6px] w-[6px] rounded-tr-md bg-background" })
-				}),
-				/* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-[25px] rounded-md bg-background" }),
-				/* @__PURE__ */ jsx("div", {
-					className: "absolute inset-x-0 bottom-0 h-[36px]",
-					children: /* @__PURE__ */ jsx("div", {
-						ref: scrollContainerRef,
-						className: "h-full overflow-x-auto rounded-md",
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "ml-auto flex h-[36px] w-max items-end px-2 pb-0",
-							children: [/* @__PURE__ */ jsx("div", {
-								className: "flex",
-								children: unselectedContent
-							}), /* @__PURE__ */ jsx("div", {
-								className: "flex rounded-sm bg-info/10",
-								children: selectedContent
-							})]
-						})
-					})
-				}),
-				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 z-10 h-[25px] w-2 rounded-l-md bg-background" }),
-				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute right-0 bottom-0 z-10 h-[25px] w-2 rounded-r-md bg-background" })
-			]
-		})
-	});
-};
+const DocumentTimeline = lazyComponent(() => import("../document-timeline.impl-zx6f7k2d.js").then((m) => m.DocumentTimeline));
 //#endregion
 //#region src/connect/components/document-toolbar/containers.tsx
 /**
@@ -2239,12 +2238,11 @@ function ToolbarRedoButton(props) {
 	}) } = props;
 	const { redo, canRedo } = useRedo(document?.header.id);
 	const onClick = makeOnClick(document, onClickOverride, redo);
-	const disabled = !canRedo;
 	return /* @__PURE__ */ jsx(ToolbarButton, {
 		"data-testid": "toolbar-redo-button",
 		"aria-label": "Redo",
 		className,
-		disabled,
+		disabled: !canRedo,
 		onClick,
 		children
 	});
@@ -2315,7 +2313,8 @@ function ToolbarHistoryButton(props) {
 /**
 * Toolbar control for closing the current document view.
 *
-* By default, this selects the current document's parent folder. Provide
+* By default, this goes back when the app's history allows, else it selects the
+* current document's parent folder. Provide
 * `children` to replace the default icon, or `onClick` to override the default
 * close behavior.
 */
@@ -2324,8 +2323,7 @@ function ToolbarCloseButton(props) {
 		name: "XmarkLight",
 		size: 16
 	}) } = props;
-	const parentFolder = useNodeParentFolderById(document?.header.id);
-	const onClick = makeOnClick(document, onClickOverride, () => setSelectedNode(parentFolder));
+	const onClick = makeOnClick(document, onClickOverride, useCloseNode(document?.header.id));
 	return /* @__PURE__ */ jsx(ToolbarButton, {
 		"data-testid": "toolbar-close-button",
 		"aria-label": "Close document",
@@ -2860,7 +2858,7 @@ function UploadFileItemStatusRow(props) {
 }
 //#endregion
 //#region src/connect/components/upload-file-item/upload-file-item.tsx
-const UploadFileItem = /* @__PURE__ */ forwardRef(function UploadFileItem(props, ref) {
+const UploadFileItem = /*#__PURE__*/ forwardRef(function UploadFileItem(props, ref) {
 	const { fileName, fileSize, status, documentType, progress = 0, errorDetails, onClose, onOpenDocument, onFindResolution, className, ...delegatedProps } = props;
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
@@ -3100,7 +3098,7 @@ function uploadsReducer(state, action) {
 	}
 }
 function useUploadTracker(useLocalStorage = false, driveId) {
-	const [uploads, dispatch] = useReducer(uploadsReducer, useCallback(() => {
+	const getInitialState = useCallback(() => {
 		if (useLocalStorage && driveId) try {
 			const stored = localStorage.getItem(`uploadTracker_${driveId}`);
 			if (stored) return JSON.parse(stored);
@@ -3110,7 +3108,8 @@ function useUploadTracker(useLocalStorage = false, driveId) {
 			return {};
 		}
 		return {};
-	}, [useLocalStorage, driveId])());
+	}, [useLocalStorage, driveId]);
+	const [uploads, dispatch] = useReducer(uploadsReducer, getInitialState());
 	useEffect(() => {
 		if (useLocalStorage && driveId) try {
 			localStorage.setItem(`uploadTracker_${driveId}`, JSON.stringify(uploads));
@@ -3152,11 +3151,12 @@ function useUploadTracker(useLocalStorage = false, driveId) {
 				});
 			};
 			try {
+				const fileNode = await onAddFile(file, parent, progressCallback);
 				dispatch({
 					type: "SET_FILE_NODE",
 					payload: {
 						id: fileId,
-						fileNode: await onAddFile(file, parent, progressCallback) || void 0
+						fileNode: fileNode || void 0
 					}
 				});
 			} catch (error) {
@@ -3262,6 +3262,7 @@ function DropZone(props) {
 		setConflictUploadId(null);
 	};
 	const { isDropTarget, ...dropProps } = useDropFile(handleAddFile);
+	const setSelectedNode = useSetSelectedNode();
 	return /* @__PURE__ */ jsxs("div", {
 		className: twMerge("relative", className),
 		...enable ? dropProps : {},
@@ -3429,22 +3430,32 @@ function EditorUndoRedoButtons(props) {
 	});
 }
 //#endregion
-//#region assets/powerhouse-rounded.png
-var powerhouse_rounded_default = "data:image/png;base64,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";
-//#endregion
-//#region src/connect/components/ens-avatar/ens-avatar.tsx
-function ENSAvatar(props) {
-	const { avatarUrl = powerhouse_rounded_default, size = "14px" } = props;
-	return /* @__PURE__ */ jsx("img", {
-		alt: "ENS Avatar",
-		className: "flex-none rounded-full object-contain",
-		src: avatarUrl,
-		style: {
-			width: size,
-			height: size
-		}
+//#region src/connect/components/branding/connect-branding.tsx
+/**
+* Connect's branding as the components see it: the host app provides it once
+* at its root (images already resolved to data URIs) and the components read
+* it from here instead of reaching into configuration. `icons` are the drive
+* explorer's, which the generic plugin owns; `appName`, `icon` and
+* `homeBackground` are Connect's identity (`connect.branding`). Without a
+* provider every built-in icon renders.
+*/
+const ConnectBrandingContext = /*#__PURE__*/ createContext({});
+function ConnectBrandingProvider(props) {
+	return /* @__PURE__ */ jsx(ConnectBrandingContext.Provider, {
+		value: props.branding ?? {},
+		children: props.children
 	});
 }
+/** The provided branding; `{}` (built-in look) without a provider. */
+function useConnectBranding() {
+	return useContext(ConnectBrandingContext);
+}
+/** The icon for a document of `documentType`: the explorer's icon for that
+* type, else its default document icon, else undefined (the icon the package
+* ships, or the built-in one). */
+function brandedDocumentIcon(branding, documentType) {
+	return branding.icons?.documents?.[documentType] ?? branding.icons?.document ?? void 0;
+}
 //#endregion
 //#region src/connect/constants/options.tsx
 const defaultDriveOptions = [
@@ -3675,6 +3686,11 @@ function getDriveSharingType$1(drive) {
 }
 function FileItem(props) {
 	const { fileNode, className, customDocumentIconSrc } = props;
+	const setSelectedNode = useSetSelectedNode();
+	const preloadNode = usePreloadNode();
+	const target = useNodeTarget(fileNode);
+	const link = useLinkProps(target, () => setSelectedNode(fileNode));
+	const href = props.href ?? (target ? link.href : void 0);
 	const [mode, setMode] = useState("READ");
 	const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
 	const [selectedDrive] = useSelectedDriveSafe();
@@ -3685,9 +3701,12 @@ function FileItem(props) {
 	});
 	const { isAllowedToCreateDocuments } = useUserPermissions();
 	const editorModules = useEditorModulesForDocumentType(fileNode.documentType);
-	const preloadEditors = () => editorModules?.forEach((editorModule) => {
-		preloadEditorModule(editorModule);
-	});
+	const preload = () => {
+		editorModules?.forEach((editorModule) => {
+			preloadEditorModule(editorModule);
+		});
+		preloadNode(fileNode);
+	};
 	const { onRenameNode, onRenameDriveNodes, onDuplicateNode } = useNodeActions();
 	const downloadDocument = useDownloadDocument(fileNode.id);
 	const isReadMode = mode === "READ";
@@ -3718,13 +3737,15 @@ function FileItem(props) {
 		handler();
 		setIsDropdownMenuOpen(false);
 	}
+	const branding = useConnectBranding();
+	const documentIconSrc = customDocumentIconSrc ?? brandedDocumentIcon(branding, fileNode.documentType);
 	const iconNode = /* @__PURE__ */ jsxs("div", {
 		className: "relative",
-		children: [customDocumentIconSrc ? /* @__PURE__ */ jsx("img", {
+		children: [documentIconSrc ? /* @__PURE__ */ jsx("img", {
 			alt: "file icon",
-			className: "max-w-none",
+			className: "max-w-none object-contain",
 			height: 34,
-			src: customDocumentIconSrc,
+			src: documentIconSrc,
 			width: 32,
 			draggable: false
 		}) : /* @__PURE__ */ jsx(DefaultFileIcon, {}), isReadMode && syncStatus && /* @__PURE__ */ jsx("div", {
@@ -3758,6 +3779,7 @@ function FileItem(props) {
 			children: /* @__PURE__ */ jsx("button", {
 				className: twMerge("hidden group-hover:block", isDropdownMenuOpen && "block"),
 				onClick: (e) => {
+					e.preventDefault();
 					e.stopPropagation();
 					setIsDropdownMenuOpen(true);
 				},
@@ -3773,10 +3795,15 @@ function FileItem(props) {
 		onCancel,
 		onSubmit
 	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "relative w-64",
-		onClick: isReadMode ? () => setSelectedNode(fileNode) : void 0,
-		onMouseEnter: preloadEditors,
+	const isLink = isReadMode && !!href;
+	return /* @__PURE__ */ jsx(isLink ? "a" : "div", {
+		href: isLink ? href : void 0,
+		"aria-current": isLink ? link["aria-current"] : void 0,
+		className: "relative block w-64",
+		onClick: isLink ? link.onClick : isReadMode ? () => setSelectedNode(fileNode) : void 0,
+		onMouseEnter: preload,
+		onTouchStart: preload,
+		onFocus: preload,
 		...dragProps,
 		children: /* @__PURE__ */ jsx("div", {
 			className: containerStyles,
@@ -3902,6 +3929,12 @@ function DefaultFileIcon() {
 //#region src/connect/components/folder-item/folder-item.tsx
 function FolderItem(props) {
 	const { folderNode, className } = props;
+	const folderIconSrc = useConnectBranding().icons?.folder;
+	const setSelectedNode = useSetSelectedNode();
+	const preloadNode = usePreloadNode();
+	const target = useNodeTarget(folderNode);
+	const link = useLinkProps(target, () => setSelectedNode(folderNode));
+	const href = props.href ?? (target ? link.href : void 0);
 	const { isAllowedToCreateDocuments } = useUserPermissions();
 	const [mode, setMode] = useState("READ");
 	const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
@@ -3949,9 +3982,15 @@ function FolderItem(props) {
 		onSubmit
 	});
 	const containerStyles = twMerge("group flex h-12 cursor-pointer items-center rounded-lg bg-muted px-2 select-none", isDragging ? "opacity-60" : isDropTarget ? "bg-info/10" : "", className);
-	return /* @__PURE__ */ jsx("div", {
-		className: "relative w-64 hover:hover-effect",
-		onClick: isReadMode ? () => setSelectedNode(folderNode) : void 0,
+	const isLink = isReadMode && !!href;
+	return /* @__PURE__ */ jsx(isLink ? "a" : "div", {
+		href: isLink ? href : void 0,
+		"aria-current": isLink ? link["aria-current"] : void 0,
+		className: "relative block w-64 hover:hover-effect",
+		onClick: isLink ? link.onClick : isReadMode ? () => setSelectedNode(folderNode) : void 0,
+		onMouseEnter: () => preloadNode(folderNode),
+		onTouchStart: () => preloadNode(folderNode),
+		onFocus: () => preloadNode(folderNode),
 		children: /* @__PURE__ */ jsxs("div", {
 			...dragProps,
 			...dropProps,
@@ -3962,7 +4001,14 @@ function FolderItem(props) {
 					className: "p-1",
 					children: /* @__PURE__ */ jsx("div", {
 						className: "relative text-foreground",
-						children: /* @__PURE__ */ jsx(Icon, {
+						children: folderIconSrc ? /* @__PURE__ */ jsx("img", {
+							alt: "folder icon",
+							className: "object-contain",
+							src: folderIconSrc,
+							width: 24,
+							height: 24,
+							draggable: false
+						}) : /* @__PURE__ */ jsx(Icon, {
 							name: "FolderClose",
 							size: 24
 						})
@@ -3976,6 +4022,7 @@ function FolderItem(props) {
 				children: /* @__PURE__ */ jsx("button", {
 					className: twMerge("ml-auto hidden group-hover:block", isDropdownMenuOpen && "block"),
 					onClick: (e) => {
+						e.preventDefault();
 						e.stopPropagation();
 						setIsDropdownMenuOpen(true);
 					},
@@ -4008,7 +4055,7 @@ const Footer = ({ children, className, ...props }) => {
 };
 //#endregion
 //#region src/connect/components/form-input/form-input.tsx
-const FormInput = /* @__PURE__ */ forwardRef(function FormInput(props, ref) {
+const FormInput = /*#__PURE__*/ forwardRef(function FormInput(props, ref) {
 	const { icon, errorMessage, isDirty, containerClassName, inputClassName, errorMessageClassName, hideErrors = false, ...delegatedProps } = props;
 	const type = props.type ?? "text";
 	const isError = !!errorMessage;
@@ -4029,296 +4076,67 @@ const FormInput = /* @__PURE__ */ forwardRef(function FormInput(props, ref) {
 	})] });
 });
 //#endregion
-//#region src/connect/components/form/inputs/app-form-input.tsx
-function appToInputOption(app) {
-	return {
-		value: app.id,
-		displayValue: app.name,
-		icon: /* @__PURE__ */ jsx(Icon, { name: "PowerhouseLogoSmall" }),
-		description: "Built by Powerhouse"
-	};
-}
-function AppFormInput(props) {
-	const { control, appOptions, ...delegatedProps } = props;
-	const items = appOptions.map(appToInputOption);
-	return /* @__PURE__ */ jsx(Controller, {
-		control,
-		name: "id",
-		render: ({ field }) => /* @__PURE__ */ jsx(ConnectSelect, {
-			...delegatedProps,
-			...field,
-			id: "id",
-			items
-		})
-	});
-}
-//#endregion
-//#region src/connect/components/form/inputs/label.tsx
-function Label(props) {
-	const { children, className, ...labelProps } = props;
-	return /* @__PURE__ */ jsx("label", {
-		...labelProps,
-		className: twMerge("block font-semibold text-muted-foreground", className),
-		children
-	});
-}
-//#endregion
 //#region src/connect/components/form/add-local-drive-form.tsx
-function AddLocalDriveForm(props) {
-	const { register, handleSubmit, control, formState: { errors } } = useForm({ defaultValues: {
-		name: "",
-		sharingType: "LOCAL",
-		availableOffline: false,
-		id: props.appOptions[0].id
-	} });
-	return /* @__PURE__ */ jsx("form", {
-		name: "add-local-drive",
-		onSubmit: (e) => void handleSubmit(props.onSubmit)(e),
-		className: "flex flex-col gap-4",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-4",
-			children: [
-				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Label, {
-					htmlFor: "name",
-					className: "text-sm font-medium text-foreground",
-					children: "Drive Name"
-				}), /* @__PURE__ */ jsx(FormInput, {
-					...register("name", { required: "Drive name is required" }),
-					errorMessage: errors.name?.message,
-					placeholder: "Drive name"
-				})] }),
-				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Label, {
-					htmlFor: "driveApp",
-					className: "text-sm font-medium text-foreground",
-					children: "Drive App"
-				}), /* @__PURE__ */ jsx(AppFormInput, {
-					control,
-					appOptions: props.appOptions
-				})] }),
-				/* @__PURE__ */ jsx(PowerhouseButton, {
-					className: "mt-2 w-full",
-					type: "submit",
-					children: "Create new drive"
-				})
-			]
-		})
-	});
-}
-//#endregion
-//#region src/connect/components/toggle/toggle.tsx
-const Toggle = /* @__PURE__ */ forwardRef(function Toggle(props, ref) {
-	return /* @__PURE__ */ jsxs("label", {
-		className: "relative cursor-pointer items-center",
-		htmlFor: props.id,
-		children: [/* @__PURE__ */ jsx("input", {
-			className: "peer sr-only",
-			ref,
-			type: "checkbox",
-			value: "",
-			...props
-		}), /* @__PURE__ */ jsx("div", { className: "peer h-6 w-11 rounded-full bg-muted-foreground peer-checked:bg-info peer-focus:outline-none after:absolute after:inset-s-0.5 after:top-0.5 after:size-5 after:rounded-full after:border after:border-none after:bg-background after:transition-all peer-checked:after:translate-x-full" })]
-	});
-});
-//#endregion
-//#region src/connect/components/form/inputs/available-offline-toggle.tsx
-const AvailableOfflineToggle = /* @__PURE__ */ forwardRef(function AvailableOfflineToggle(props, ref) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center rounded-md border border-border bg-background p-3 text-foreground",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex-1",
-			children: [/* @__PURE__ */ jsx("label", {
-				className: "font-medium text-foreground",
-				htmlFor: "availableOffline",
-				children: "Make available offline"
-			}), /* @__PURE__ */ jsxs("p", {
-				className: "text-xs text-foreground",
-				children: [
-					"Check this options if you keep a local backup",
-					/* @__PURE__ */ jsx("br", {}),
-					"available at all times."
-				]
-			})]
-		}), /* @__PURE__ */ jsx(Toggle, {
-			id: "availableOffline",
-			ref,
-			...props
-		})]
-	});
-});
-//#endregion
-//#region src/connect/components/form/inputs/drive-name.tsx
-function DriveName(props) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex gap-2 rounded-xl bg-muted p-3 font-semibold text-muted-foreground",
-		children: [/* @__PURE__ */ jsx(Icon, {
-			className: "text-foreground",
-			name: "Drive"
-		}), props.driveName]
-	});
-}
-//#endregion
-//#region src/connect/components/form/inputs/location-info.tsx
-function LocationInfo(props) {
-	const { location, className, ...divProps } = props;
-	const locationInfo = locationInfoByLocation[location];
-	return /* @__PURE__ */ jsxs("div", {
-		...divProps,
-		className: twMerge("my-3 flex items-center gap-2 rounded-xl border border-border bg-background p-3 text-foreground shadow-sm", className),
-		children: [locationInfo.icon, /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", { children: locationInfo.title }), /* @__PURE__ */ jsx("p", {
-			className: "text-xs text-foreground",
-			children: locationInfo.description
-		})] })]
-	});
-}
+const AddLocalDriveForm = lazyComponent(() => import("../add-local-drive-form.impl-COIpcmgW.js").then((m) => m.AddLocalDriveForm));
 //#endregion
 //#region src/connect/components/form/add-remote-drive-form.tsx
-function AddRemoteDriveForm(props) {
-	const { sharingType = "PUBLIC", requestPublicDrive } = props;
-	const [remoteDriveDetails, setPublicDriveDetails] = useState();
-	const [showLocationSettings, setShowLocationSettings] = useState(false);
-	const [isUrlValid, setIsUrlValid] = useState(true);
-	const [hasConfirmedUrl, setHasConfirmedUrl] = useState(false);
-	const [errorMessage, setErrorMessage] = useState("");
-	const [url, setUrl] = useState("");
-	const [debouncedUrl, setDebouncedUrl] = useDebounceValue(url, 500);
-	const { register, handleSubmit, setValue } = useForm({
-		mode: "onBlur",
-		defaultValues: { availableOffline: remoteDriveDetails?.availableOffline ?? false }
-	});
-	useEffect(() => {
-		setDebouncedUrl(url);
-	}, [url]);
-	useEffect(() => {
-		setHasConfirmedUrl(false);
-		if (debouncedUrl === "") return;
-		fetchPublicDrive().catch(console.error);
-		async function fetchPublicDrive() {
-			try {
-				const { id, name } = await requestPublicDrive(debouncedUrl);
-				setPublicDriveDetails({
-					id,
-					name,
-					sharingType,
-					location: "SWITCHBOARD",
-					availableOffline: true
-				});
-				setValue("availableOffline", true);
-				setIsUrlValid(true);
-				setErrorMessage("");
-			} catch (error) {
-				setPublicDriveDetails(void 0);
-				setIsUrlValid(false);
-				setErrorMessage(error.message);
-			}
-		}
-	}, [
-		debouncedUrl,
-		setValue,
-		sharingType
-	]);
-	function onSubmit({ availableOffline }) {
-		if (!remoteDriveDetails) return;
-		props.onSubmit({
-			...remoteDriveDetails,
-			availableOffline,
-			url: debouncedUrl
-		});
-	}
-	return /* @__PURE__ */ jsx("form", {
-		onSubmit: (e) => void handleSubmit(onSubmit)(e),
-		children: hasConfirmedUrl ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx(DriveName, { driveName: remoteDriveDetails?.name ?? "New drive" }),
-			/* @__PURE__ */ jsx(Divider, { className: "my-3" }),
-			/* @__PURE__ */ jsxs(Disclosure, {
-				isOpen: showLocationSettings,
-				onOpenChange: () => setShowLocationSettings(!showLocationSettings),
-				title: "Location",
-				children: [/* @__PURE__ */ jsx(LocationInfo, { location: "SWITCHBOARD" }), /* @__PURE__ */ jsx(AvailableOfflineToggle, { ...register("availableOffline") })]
-			}),
-			/* @__PURE__ */ jsx(PowerhouseButton, {
-				className: "mt-4 w-full",
-				color: "dark",
-				type: "submit",
-				children: "Add new drive"
-			})
-		] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FormInput, {
-			errorMessage,
-			onChange: (e) => setUrl(e.target.value),
-			placeholder: "Drive URL",
-			required: true,
-			type: "url",
-			value: url
-		}), /* @__PURE__ */ jsx(PowerhouseButton, {
-			className: "mt-4 w-full py-2 text-base",
-			color: "dark",
-			size: "small",
-			disabled: !isUrlValid || url === "",
-			onClick: (e) => {
-				e.preventDefault();
-				setHasConfirmedUrl(true);
-			},
-			type: "button",
-			children: "Add drive"
-		})] })
-	});
-}
+const AddRemoteDriveForm = lazyComponent(() => import("../add-remote-drive-form.impl-_SqOzbSt.js").then((m) => m.AddRemoteDriveForm));
 //#endregion
-//#region src/connect/components/formatted-json-viewer.tsx
-function FormattedJsonViewer(props) {
-	const { theme } = useTheme();
-	return /* @__PURE__ */ jsxs(JsonView, {
-		displayDataTypes: false,
-		displayObjectSize: false,
-		style: theme === "light" ? lightTheme : darkTheme,
-		...props,
-		children: [/* @__PURE__ */ jsx(JsonView.Copied, { render: ({ onClick, ...props }) => {
-			if (props["data-copied"]) return /* @__PURE__ */ jsx(Icon, {
-				...props,
-				className: "inline-block text-success",
-				name: "FilesEarmark",
-				size: 16
-			});
-			return /* @__PURE__ */ jsx(Icon, {
-				...props,
-				onClick,
-				className: "inline-block cursor-pointer text-foreground",
-				name: "FilesEarmark",
-				size: 16
-			});
-		} }), /* @__PURE__ */ jsx(JsonView.String, { render: ({ children, ...rest }, { value, keyName }) => {
-			if (isString(children) && isString(value) && isStrictEqual(children, value) && value.length > 30) return /* @__PURE__ */ jsx("span", {
-				...rest,
-				className: "inline-grid",
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "pl-[1ch] indent-[-1ch] wrap-anywhere hyphens-none",
-					style: { maxWidth: `${60 - keyName.toString().length}ch` },
-					children: [
-						"\"",
-						children,
-						"\""
-					]
-				})
-			});
-			return /* @__PURE__ */ jsxs("span", {
-				...rest,
-				children: [
-					"\"",
-					children,
-					"\""
-				]
-			});
-		} })]
-	});
+//#region src/connect/components/branding/background-layers.tsx
+/**
+* A decorated pane: the configured page colour with the background's layers
+* painted over it, in order, and the children above them all. Each layer is
+* placed by the shared `layerStyle`, the same declarations the desktop
+* loading page emits as static CSS, so a background configured once looks
+* the same in both hosts. Images come resolved (data URIs or URLs); a
+* light/dark pair follows the `.dark` theme class, not the OS scheme.
+* Without a background the pane is the theme's page colour and nothing more.
+*/
+function BackgroundLayers(props) {
+	const background = normalizeBackground(props.background);
+	const color = colorVariants(background?.color);
+	const style = color ? {
+		"--ph-pane-bg": color.light,
+		"--ph-pane-bg-dark": color.dark ?? color.light
+	} : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: twMerge("relative size-full overflow-hidden", color ? "bg-(--ph-pane-bg) dark:bg-(--ph-pane-bg-dark)" : "bg-background", props.className),
+		style,
+		children: [background?.layers.map((layer, index) => /* @__PURE__ */ jsx(BackgroundLayer, { layer }, index)), props.children]
+	});
+}
+function BackgroundLayer({ layer }) {
+	const { light, dark } = imageVariants(layer.src);
+	const style = layerStyle(layer);
+	if (!dark) return /* @__PURE__ */ jsx("img", {
+		src: light,
+		alt: "",
+		style
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("img", {
+		src: light,
+		alt: "",
+		style,
+		className: "dark:hidden"
+	}), /* @__PURE__ */ jsx("img", {
+		src: dark,
+		alt: "",
+		style,
+		className: "hidden dark:block"
+	})] });
 }
 //#endregion
 //#region src/connect/components/home-screen/home-background-image.tsx
+/** The default home-screen gradient. A custom `src` is kept for callers that
+* still pass one, sized to its box; HomeScreen itself renders custom images
+* as a hero below the drive tiles instead. */
 const HomeBackgroundImage = ({ src } = {}) => {
 	if (src) return /* @__PURE__ */ jsx("picture", {
-		className: "pointer-events-none absolute inset-8 z-0 size-[calc(100%-32px)] object-contain",
+		className: "pointer-events-none absolute inset-8 z-0",
 		children: /* @__PURE__ */ jsx("img", {
 			src,
-			alt: "background",
-			className: "object-contain"
+			alt: "",
+			className: "size-full object-contain"
 		})
 	});
 	return /* @__PURE__ */ jsx("div", {
@@ -4407,10 +4225,15 @@ const HomeBackgroundImage = ({ src } = {}) => {
 //#endregion
 //#region src/connect/components/home-screen/home-screen-item.tsx
 const HomeScreenItem = function HomeScreenItem(props) {
-	const { icon, title, description, containerClassName, shareable, onClick } = props;
-	return /* @__PURE__ */ jsxs("div", {
+	const { icon, title, description, containerClassName, shareable, href, onClick, onPreload } = props;
+	return /* @__PURE__ */ jsxs(href ? "a" : "div", {
+		href,
+		"aria-current": href ? props["aria-current"] : void 0,
 		className: twMerge("relative flex h-24 w-40 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md p-2 text-center text-sm text-foreground hover:hover-effect", containerClassName, onClick && "cursor-pointer"),
 		onClick,
+		onMouseEnter: onPreload,
+		onTouchStart: onPreload,
+		onFocus: href ? onPreload : void 0,
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "mx-auto pb-2",
@@ -4460,13 +4283,19 @@ const HomeScreenAddDriveItem = function HomeScreenAddDriveItem(props) {
 //#endregion
 //#region src/connect/components/home-screen/home-screen.tsx
 const HomeScreen = function HomeScreen(props) {
-	const { children, containerClassName, homeBackground } = props;
-	return /* @__PURE__ */ jsx("div", {
-		className: twMerge("relative container mx-auto flex h-full flex-col", containerClassName),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "m-8 flex flex-wrap justify-center gap-4 bg-background pt-12",
-			children: [/* @__PURE__ */ jsx(HomeBackgroundImage, { src: homeBackground ?? void 0 }), children]
-		})
+	const { children, containerClassName } = props;
+	const background = normalizeBackground(props.homeBackground);
+	const content = /* @__PURE__ */ jsxs("div", {
+		className: twMerge("relative isolate container mx-auto flex h-full flex-col", containerClassName),
+		children: [!background && /* @__PURE__ */ jsx(HomeBackgroundImage, {}), /* @__PURE__ */ jsx("div", {
+			className: twMerge("relative z-10 m-8 flex flex-wrap justify-center gap-4 pt-12", background ? "rounded-2xl bg-background/75 px-6 pb-6 backdrop-blur-sm" : "bg-background"),
+			children
+		})]
+	});
+	if (!background) return content;
+	return /* @__PURE__ */ jsx(BackgroundLayers, {
+		background,
+		children: content
 	});
 };
 //#endregion
@@ -4490,7 +4319,8 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 		clearResults();
 		setStatus("running");
 		try {
-			setValidationResult(await onValidate(documentId.trim(), branch.trim() || void 0));
+			const result = await onValidate(documentId.trim(), branch.trim() || void 0);
+			setValidationResult(result);
 			setStatus("done");
 		} catch (err) {
 			setError(err instanceof Error ? err.message : String(err));
@@ -4507,7 +4337,8 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 		clearResults();
 		setStatus("running");
 		try {
-			setRebuildResult(await onRebuildKeyframes(documentId.trim(), branch.trim() || void 0));
+			const result = await onRebuildKeyframes(documentId.trim(), branch.trim() || void 0);
+			setRebuildResult(result);
 			setStatus("done");
 		} catch (err) {
 			setError(err instanceof Error ? err.message : String(err));
@@ -4524,7 +4355,8 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 		clearResults();
 		setStatus("running");
 		try {
-			setRebuildResult(await onRebuildSnapshots(documentId.trim(), branch.trim() || void 0));
+			const result = await onRebuildSnapshots(documentId.trim(), branch.trim() || void 0);
+			setRebuildResult(result);
 			setStatus("done");
 		} catch (err) {
 			setError(err instanceof Error ? err.message : String(err));
@@ -4864,7 +4696,8 @@ function AddDriveModal(props) {
 //#region src/connect/components/modal/create-document-modal.tsx
 const CLOSE_ANIMATION_DURATION$1 = 300;
 function CreateDocumentModal(props) {
-	const { onOpenChange, onContinue, overlayProps, contentProps, ...restProps } = props;
+	const { onOpenChange, onContinue, overlayProps, contentProps, drives, driveId, onDriveChange, onAddDrive, ...restProps } = props;
+	const needsDrive = !!drives && !driveId;
 	const [nodeName, setNodeName] = useState("");
 	const [isValid, setIsValid] = useState(false);
 	const handleCancel = () => {
@@ -4872,11 +4705,12 @@ function CreateDocumentModal(props) {
 		setTimeout(() => setNodeName(""), CLOSE_ANIMATION_DURATION$1);
 	};
 	const handleCreate = useCallback(() => {
-		if (!isValid) return;
+		if (!isValid || needsDrive) return;
 		onContinue(nodeName);
 		setTimeout(() => setNodeName(""), CLOSE_ANIMATION_DURATION$1);
 	}, [
 		isValid,
+		needsDrive,
 		nodeName,
 		onContinue
 	]);
@@ -4903,20 +4737,51 @@ function CreateDocumentModal(props) {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "my-6",
-					children: [!isValid && nodeName && /* @__PURE__ */ jsx("div", {
-						className: "mb-2 text-destructive",
-						children: "Document name must not be empty or contain control characters."
-					}), /* @__PURE__ */ jsx(FormInput, {
-						icon: /* @__PURE__ */ jsx(Icon, { name: "BrickGlobe" }),
-						onChange: (e) => {
-							const name = e.target.value;
-							setNodeName(name);
-							setIsValid(isValidName(name));
-						},
-						placeholder: "Document name",
-						required: true,
-						value: nodeName
-					})]
+					children: [
+						!isValid && nodeName && /* @__PURE__ */ jsx("div", {
+							className: "mb-2 text-destructive",
+							children: "Document name must not be empty or contain control characters."
+						}),
+						/* @__PURE__ */ jsx(FormInput, {
+							icon: /* @__PURE__ */ jsx(Icon, { name: "BrickGlobe" }),
+							onChange: (e) => {
+								const name = e.target.value;
+								setNodeName(name);
+								setIsValid(isValidName(name));
+							},
+							placeholder: "Document name",
+							required: true,
+							value: nodeName
+						}),
+						!!drives?.length && /* @__PURE__ */ jsxs("label", {
+							className: "mt-4 flex flex-col gap-1 text-sm text-muted-foreground",
+							children: ["Drive", /* @__PURE__ */ jsxs("select", {
+								className: "rounded-md border border-border bg-background px-3 py-2 text-foreground",
+								value: driveId ?? "",
+								onChange: (e) => onDriveChange?.(e.target.value),
+								children: [!driveId && /* @__PURE__ */ jsx("option", {
+									value: "",
+									children: "Choose a drive"
+								}), drives.map((drive) => /* @__PURE__ */ jsx("option", {
+									value: drive.id,
+									children: drive.name
+								}, drive.id))]
+							})]
+						}),
+						drives?.length === 0 && /* @__PURE__ */ jsxs("p", {
+							className: "mt-4 text-sm text-muted-foreground",
+							children: [
+								"There's no drive to create it in.",
+								" ",
+								onAddDrive && /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "cursor-pointer text-foreground underline",
+									onClick: onAddDrive,
+									children: "Add a drive"
+								})
+							]
+						})
+					]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "mt-8 flex justify-between gap-3",
@@ -4928,7 +4793,7 @@ function CreateDocumentModal(props) {
 					}), /* @__PURE__ */ jsx(ModalButton, {
 						variant: "confirm",
 						type: "submit",
-						disabled: !isValid,
+						disabled: !isValid || needsDrive,
 						children: "Create"
 					})]
 				})
@@ -5102,165 +4967,8 @@ function ConnectDeleteItemModal(props) {
 	});
 }
 //#endregion
-//#region src/connect/components/form/inputs/drive-name-input.tsx
-const DriveNameInput = /* @__PURE__ */ forwardRef(function DriveNameInput(props, ref) {
-	return /* @__PURE__ */ jsx(FormInput, {
-		...props,
-		icon: props.icon ?? /* @__PURE__ */ jsx(Icon, { name: "Drive" }),
-		id: "driveName",
-		placeholder: "Drive name",
-		ref
-	});
-});
-//#endregion
-//#region src/connect/components/form/inputs/delete-drive.tsx
-function DeleteDrive(props) {
-	const { drive, handleDeleteDrive, onCancel } = props;
-	const [driveNameInput, setDriveNameInput] = useState("");
-	const isAllowedToDelete = driveNameInput === drive.header.name;
-	function deleteDrive() {
-		if (isAllowedToDelete) handleDeleteDrive();
-	}
-	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsx("p", {
-			className: "mb-2 rounded-md bg-background p-4 text-center text-foreground",
-			children: "Are you sure you want to delete this drive? All files and subfolders within it will be removed. Do you want to proceed?"
-		}),
-		/* @__PURE__ */ jsx(DriveNameInput, {
-			icon: /* @__PURE__ */ jsx(Icon, { name: "Lock" }),
-			onChange: (event) => setDriveNameInput(event.target.value),
-			placeholder: "Enter drive name...",
-			value: driveNameInput
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			className: "flex gap-3",
-			children: [/* @__PURE__ */ jsx(PowerhouseButton, {
-				className: "w-full",
-				color: "light",
-				onClick: onCancel,
-				children: "Cancel"
-			}), /* @__PURE__ */ jsx(PowerhouseButton, {
-				className: "w-full",
-				color: "red",
-				disabled: !isAllowedToDelete,
-				onClick: deleteDrive,
-				children: "Delete"
-			})]
-		})
-	] });
-}
-//#endregion
-//#region src/connect/components/form/inputs/sharing-type-form-input.tsx
-function SharingTypeFormInput(props) {
-	const { control, ...delegatedProps } = props;
-	return /* @__PURE__ */ jsx(Controller, {
-		control,
-		name: "sharingType",
-		render: ({ field }) => /* @__PURE__ */ jsx(ConnectSelect, {
-			...delegatedProps,
-			...field,
-			id: "sharingType",
-			items: sharingTypeOptions
-		})
-	});
-}
-//#endregion
 //#region src/connect/components/form/drive-settings-form.tsx
-function DriveSettingsForm(props) {
-	const { drive, sharingType, availableOffline, systemInfo, onSubmit, handleDeleteDrive } = props;
-	const name = drive.header.name;
-	const [showLocationSettings, setShowLocationSettings] = useState(false);
-	const [showAbout, setShowAbout] = useState(false);
-	const [showDangerZone, setShowDangerZone] = useState(false);
-	const [showDeleteDrive, setShowDeleteDrive] = useState(false);
-	const { register, handleSubmit, control } = useForm({
-		mode: "onBlur",
-		defaultValues: {
-			name,
-			sharingType,
-			availableOffline
-		}
-	});
-	const location = sharingType === "PUBLIC" ? "SWITCHBOARD" : sharingType;
-	return /* @__PURE__ */ jsxs("form", {
-		onSubmit: (e) => void handleSubmit(onSubmit)(e),
-		children: [
-			/* @__PURE__ */ jsx(DriveNameInput, { ...register("name") }),
-			/* @__PURE__ */ jsx(Divider, { className: "my-4" }),
-			/* @__PURE__ */ jsx(Label, {
-				htmlFor: "sharingType",
-				children: "Sharing settings"
-			}),
-			/* @__PURE__ */ jsx(SharingTypeFormInput, { control }),
-			/* @__PURE__ */ jsx(Divider, { className: "my-3" }),
-			/* @__PURE__ */ jsxs(Disclosure, {
-				isOpen: showLocationSettings,
-				onOpenChange: () => setShowLocationSettings(!showLocationSettings),
-				title: "Location",
-				children: [/* @__PURE__ */ jsx(LocationInfo, { location }), /* @__PURE__ */ jsx(AvailableOfflineToggle, { ...register("availableOffline") })]
-			}),
-			/* @__PURE__ */ jsx(Divider, { className: "my-3" }),
-			/* @__PURE__ */ jsxs(Disclosure, {
-				isOpen: showAbout,
-				onOpenChange: () => setShowAbout(!showAbout),
-				title: "About this drive",
-				children: [
-					systemInfo.status === "local" && /* @__PURE__ */ jsx("p", {
-						className: "py-2 text-sm text-muted-foreground",
-						children: "Local drive — N/A"
-					}),
-					systemInfo.status === "loading" && /* @__PURE__ */ jsx("p", {
-						className: "py-2 text-sm text-muted-foreground",
-						children: "Loading…"
-					}),
-					systemInfo.status === "error" && /* @__PURE__ */ jsx("p", {
-						className: "py-2 text-sm text-destructive",
-						children: "Could not load system info"
-					}),
-					systemInfo.status === "ready" && /* @__PURE__ */ jsxs("div", {
-						className: "py-2 text-sm text-foreground",
-						children: [/* @__PURE__ */ jsxs("div", { children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "font-medium",
-								children: "Version:"
-							}),
-							" ",
-							systemInfo.version
-						] }), /* @__PURE__ */ jsxs("div", { children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "font-medium",
-								children: "Git hash:"
-							}),
-							" ",
-							systemInfo.gitHash
-						] })]
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx(Divider, { className: "my-3" }),
-			/* @__PURE__ */ jsx(Disclosure, {
-				isOpen: showDangerZone,
-				onOpenChange: () => setShowDangerZone(!showDangerZone),
-				title: "Danger zone",
-				children: /* @__PURE__ */ jsxs("button", {
-					className: "flex gap-2 py-3 font-semibold text-destructive transition hover:hover-effect",
-					onClick: () => setShowDeleteDrive(true),
-					type: "button",
-					children: [/* @__PURE__ */ jsx(Icon, { name: "Trash" }), "Delete drive"]
-				})
-			}),
-			showDeleteDrive && showDangerZone ? /* @__PURE__ */ jsx(DeleteDrive, {
-				drive,
-				handleDeleteDrive,
-				onCancel: () => setShowDeleteDrive(false)
-			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Divider, { className: "my-3" }), /* @__PURE__ */ jsx(PowerhouseButton, {
-				className: "mb-4 w-full",
-				type: "submit",
-				children: "Confirm"
-			})] })
-		]
-	});
-}
+const DriveSettingsForm = lazyComponent(() => import("../drive-settings-form.impl-Dthjyouk.js").then((m) => m.DriveSettingsForm));
 //#endregion
 //#region src/connect/components/modal/drive-settings-modal.tsx
 function DriveSettingsModal(props) {
@@ -5487,7 +5195,8 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 	const [error, setError] = useState(null);
 	const loadProcessors = useCallback(async () => {
 		try {
-			setProcessors(await getProcessors());
+			const result = await getProcessors();
+			setProcessors(result);
 			setError(null);
 		} catch (e) {
 			setError(e instanceof Error ? e.message : String(e));
@@ -5517,9 +5226,10 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 		}
 	}, [onRetry, loadProcessors]);
 	const handleSort = (columnKey) => {
+		const newDirection = sort?.column === columnKey && sort.direction === "asc" ? "desc" : "asc";
 		setSort({
 			column: columnKey,
-			direction: sort?.column === columnKey && sort.direction === "asc" ? "desc" : "asc"
+			direction: newDirection
 		});
 	};
 	const sortedProcessors = sortProcessors(processors, sort);
@@ -5841,7 +5551,8 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 	const [actionInProgress, setActionInProgress] = useState(false);
 	const [selectedJob, setSelectedJob] = useState(null);
 	const loadState = useCallback(async () => {
-		setState(await getQueueState());
+		const newState = await getQueueState();
+		setState(newState);
 		setLoading(false);
 	}, [getQueueState]);
 	useEffect(() => {
@@ -5868,9 +5579,10 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 		loadState
 	]);
 	const handleSort = (columnKey) => {
+		const newDirection = sort?.column === columnKey && sort.direction === "asc" ? "desc" : "asc";
 		setSort({
 			column: columnKey,
-			direction: sort?.column === columnKey && sort.direction === "asc" ? "desc" : "asc"
+			direction: newDirection
 		});
 	};
 	const sortedJobs = sortJobs([...state.executingJobs.map((job) => ({
@@ -6071,8 +5783,9 @@ const stateStyles = {
 	disconnected: "bg-muted text-foreground"
 };
 function ConnectionStateBadge({ state, failureCount }) {
+	const style = stateStyles[state] ?? "bg-muted text-foreground";
 	return /* @__PURE__ */ jsxs("span", {
-		className: twMerge("inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", stateStyles[state] ?? "bg-muted text-foreground"),
+		className: twMerge("inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", style),
 		children: [state, failureCount > 0 && /* @__PURE__ */ jsxs("span", {
 			className: "text-xs opacity-75",
 			children: [
@@ -6722,6 +6435,175 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 	});
 }
 //#endregion
+//#region src/connect/components/remotes-inspector/components/peer-agreement-panel.tsx
+const cell = "px-3 py-1.5 text-xs text-foreground";
+const head = "px-3 py-1.5 text-left text-xs font-medium text-foreground";
+function versions(list) {
+	return list && list.length > 0 ? list.join(", ") : "none";
+}
+/** How a remote's peer announced itself. */
+function peerManifestLabel(peer) {
+	if (peer === void 0) return "Not yet heard (baseline)";
+	if (peer.manifest === null) return "Silent (baseline)";
+	return `Announced, revision ${peer.manifest.revision.slice(0, 8)}`;
+}
+function PeerAgreementPanel({ remoteName, collectionId, peer, agreement, holds }) {
+	const local = agreement.local();
+	const theirs = agreement.peer(remoteName);
+	const protocols = Object.keys(local.protocols).sort();
+	const features = Object.keys(local.features).sort();
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": "Peer agreement",
+		className: "flex flex-col gap-2 rounded-lg border border-border p-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-sm font-semibold text-foreground",
+					children: "Peer agreement"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: peerManifestLabel(peer)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("table", {
+				className: "w-full border-collapse",
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: "bg-muted",
+					children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Protocol"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Local"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Peer"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Limits new documents"
+						})
+					] })
+				}), /* @__PURE__ */ jsxs("tbody", { children: [protocols.map((protocol) => {
+					const limits = agreement.limitedBy(collectionId, protocol).includes(remoteName);
+					return /* @__PURE__ */ jsxs("tr", {
+						className: "odd:bg-card even:bg-background",
+						children: [
+							/* @__PURE__ */ jsx("td", {
+								className: cell,
+								children: protocol
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: cell,
+								children: versions(local.protocols[protocol])
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: cell,
+								children: versions(theirs.protocols[protocol])
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: twMerge(cell, limits && "text-warning"),
+								children: limits ? "Yes" : "No"
+							})
+						]
+					}, protocol);
+				}), features.map((feature) => /* @__PURE__ */ jsxs("tr", {
+					className: "odd:bg-card even:bg-background",
+					children: [
+						/* @__PURE__ */ jsxs("td", {
+							className: cell,
+							children: [feature, " (feature)"]
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: cell,
+							children: versions(local.features[feature])
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: cell,
+							children: versions(theirs.features[feature])
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: cell,
+							children: "-"
+						})
+					]
+				}, feature))] })]
+			}),
+			/* @__PURE__ */ jsxs("h4", {
+				className: "text-xs font-semibold text-foreground",
+				children: [
+					"Held documents (",
+					holds.length,
+					")"
+				]
+			}),
+			holds.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: "No documents held"
+			}) : /* @__PURE__ */ jsxs("table", {
+				className: "w-full border-collapse",
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: "bg-muted",
+					children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Document"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Branch"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Requires"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Peer runs"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Held since"
+						})
+					] })
+				}), /* @__PURE__ */ jsx("tbody", { children: holds.map((hold) => /* @__PURE__ */ jsxs("tr", {
+					className: "odd:bg-card even:bg-background",
+					children: [
+						/* @__PURE__ */ jsx("td", {
+							className: cell,
+							children: hold.documentId
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: cell,
+							children: hold.branch
+						}),
+						/* @__PURE__ */ jsxs("td", {
+							className: cell,
+							children: [
+								hold.reason.protocol,
+								" ",
+								hold.reason.version
+							]
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: cell,
+							children: versions(hold.reason.peerSupports)
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: cell,
+							children: new Date(hold.heldAtUtcMs).toLocaleString()
+						})
+					]
+				}, `${hold.documentId}:${hold.branch}`)) })]
+			})
+		]
+	});
+}
+//#endregion
 //#region src/connect/components/remotes-inspector/remotes-inspector.tsx
 const BASE_COLUMNS = [
 	{
@@ -6749,6 +6631,11 @@ const BASE_COLUMNS = [
 		label: "Filter",
 		width: "200px"
 	},
+	{
+		key: "peer",
+		label: "Peer",
+		width: "160px"
+	},
 	{
 		key: "channel",
 		label: "Channel",
@@ -6795,7 +6682,7 @@ function sortRemotes(remotes, sort) {
 		return sort.direction === "asc" ? comparison : -comparison;
 	});
 }
-function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPull, connectionStates }) {
+function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPull, connectionStates, getAgreement, getHolds }) {
 	const [remotes, setRemotes] = useState([]);
 	const [loading, setLoading] = useState(true);
 	const [sort, setSort] = useState();
@@ -6803,29 +6690,47 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 	const [manualUrl, setManualUrl] = useState("");
 	const [adding, setAdding] = useState(false);
 	const [addError, setAddError] = useState();
+	const [holds, setHolds] = useState([]);
 	const hasRowActions = !!removeRemote || !!triggerPull;
 	const columns = useMemo(() => hasRowActions ? [...BASE_COLUMNS, ACTIONS_COLUMN] : BASE_COLUMNS, [hasRowActions]);
 	const loadRemotes = useCallback(async () => {
 		setLoading(true);
-		setRemotes(await getRemotes());
+		const data = await getRemotes();
+		setRemotes(data);
 		setLoading(false);
 	}, [getRemotes]);
 	useEffect(() => {
 		loadRemotes();
 	}, [loadRemotes]);
+	useEffect(() => {
+		if (!selectedRemote || !getHolds) return;
+		let current = true;
+		getHolds(selectedRemote.meta.name).then((loaded) => {
+			if (current) setHolds(loaded);
+		}).catch(() => {
+			if (current) setHolds([]);
+		});
+		return () => {
+			current = false;
+		};
+	}, [selectedRemote, getHolds]);
 	const handleRefresh = useCallback(async () => {
 		await loadRemotes();
-		if (selectedRemote) setSelectedRemote(remotes.find((r) => r.meta.id === selectedRemote.meta.id));
+		if (selectedRemote) {
+			const updated = remotes.find((r) => r.meta.id === selectedRemote.meta.id);
+			setSelectedRemote(updated);
+		}
 	}, [
 		loadRemotes,
 		selectedRemote,
 		remotes
 	]);
 	const handleSort = (columnKey) => {
-		if (columnKey === "channel" || columnKey === "actions" || columnKey === "status") return;
+		if (columnKey === "channel" || columnKey === "actions" || columnKey === "status" || columnKey === "peer") return;
+		const newDirection = sort?.column === columnKey && sort.direction === "asc" ? "desc" : "asc";
 		setSort({
 			column: columnKey,
-			direction: sort?.column === columnKey && sort.direction === "asc" ? "desc" : "asc"
+			direction: newDirection
 		});
 	};
 	const handleViewChannel = (remote) => {
@@ -6867,13 +6772,30 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 	const handlePull = useCallback((remote) => {
 		triggerPull?.(remote.meta.name);
 	}, [triggerPull]);
-	if (selectedRemote) return /* @__PURE__ */ jsx(ChannelInspector, {
-		channel: selectedRemote.channel,
-		connectionState: connectionStates?.get(selectedRemote.meta.name),
-		onBack: handleBack,
-		onRefresh: () => void handleRefresh(),
-		remoteName: selectedRemote.meta.name
-	});
+	if (selectedRemote) {
+		let agreement;
+		try {
+			agreement = getAgreement?.();
+		} catch {
+			agreement = void 0;
+		}
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full flex-col gap-2 overflow-auto",
+			children: [agreement && /* @__PURE__ */ jsx(PeerAgreementPanel, {
+				agreement,
+				collectionId: selectedRemote.meta.collectionId.key,
+				holds,
+				peer: selectedRemote.meta.peer,
+				remoteName: selectedRemote.meta.name
+			}), /* @__PURE__ */ jsx(ChannelInspector, {
+				channel: selectedRemote.channel,
+				connectionState: connectionStates?.get(selectedRemote.meta.name),
+				onBack: handleBack,
+				onRefresh: () => void handleRefresh(),
+				remoteName: selectedRemote.meta.name
+			})]
+		});
+	}
 	const sortedRemotes = sortRemotes(remotes, sort);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full flex-col gap-2",
@@ -6930,7 +6852,7 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 						children: /* @__PURE__ */ jsx("tr", { children: columns.map((column, index) => {
 							const isActive = sort?.column === column.key;
 							const sortDirection = isActive ? sort.direction : "asc";
-							const isSortable = column.key !== "channel" && column.key !== "actions" && column.key !== "status";
+							const isSortable = column.key !== "channel" && column.key !== "actions" && column.key !== "status" && column.key !== "peer";
 							return /* @__PURE__ */ jsx("th", {
 								className: twMerge("group px-3 py-2 text-left text-xs font-medium text-foreground", index > 0 && "border-l border-border", isSortable && "cursor-pointer hover:hover-effect"),
 								onClick: () => isSortable && handleSort(column.key),
@@ -7000,6 +6922,13 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 									children: formatFilter(remote.meta.filter)
 								})
 							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "block truncate",
+									children: peerManifestLabel(remote.meta.peer)
+								})
+							}),
 							/* @__PURE__ */ jsx("td", {
 								className: "border-l border-border px-3 py-2",
 								children: /* @__PURE__ */ jsxs("button", {
@@ -7077,7 +7006,8 @@ function WorkerInspector({ getInfo, onRestart }) {
 	const [restarting, setRestarting] = useState(false);
 	const loadInfo = useCallback(async () => {
 		try {
-			setInfo(await getInfo());
+			const next = await getInfo();
+			setInfo(next);
 			setError(null);
 		} catch (e) {
 			setError(e instanceof Error ? e.message : String(e));
@@ -7172,7 +7102,7 @@ function InspectorUnavailable({ message }) {
 		})]
 	});
 }
-function InspectorModal({ open, onOpenChange, modalProps, containerProps, dbExplorerProps, remotesInspectorProps, queueInspectorProps, processorsInspectorProps, integrityInspectorProps, workerInspectorProps, unavailableTabs, defaultTab = "Database" }) {
+function InspectorModal({ open, onOpenChange, modalProps, containerProps, dbExplorerProps, remotesInspectorProps, queueInspectorProps, processorsInspectorProps, integrityInspectorProps, catchUpInspectorProps, workerInspectorProps, unavailableTabs, defaultTab = "Database" }) {
 	return /* @__PURE__ */ jsx(Modal, {
 		...modalProps,
 		contentProps: {
@@ -7257,6 +7187,20 @@ function InspectorModal({ open, onOpenChange, modalProps, containerProps, dbExpl
 							label: "Integrity",
 							children: /* @__PURE__ */ jsx(InspectorUnavailable, { message: unavailableTabs.Integrity })
 						}) : null,
+						catchUpInspectorProps ? /* @__PURE__ */ jsx(TabContent, {
+							description: "Catch-up inspector",
+							label: "Catch-up",
+							value: "CatchUp",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "h-full",
+								children: /* @__PURE__ */ jsx(CatchUpInspector, { ...catchUpInspectorProps })
+							})
+						}) : unavailableTabs?.CatchUp ? /* @__PURE__ */ jsx(TabContent, {
+							description: "Catch-up inspector",
+							label: "Catch-up",
+							value: "CatchUp",
+							children: /* @__PURE__ */ jsx(InspectorUnavailable, { message: unavailableTabs.CatchUp })
+						}) : null,
 						workerInspectorProps && /* @__PURE__ */ jsx(TabContent, {
 							description: "Worker inspector",
 							label: "Worker",
@@ -7380,10 +7324,12 @@ function ReadRequiredModal(props) {
 	useEffect(() => {
 		const checkScroll = () => {
 			const element = contentRef.current;
-			if (element) if (element.scrollHeight > element.clientHeight) {
-				setDisableClose(true);
-				element.addEventListener("scroll", handleScroll);
-			} else setDisableClose(false);
+			if (element) {
+				if (element.scrollHeight > element.clientHeight) {
+					setDisableClose(true);
+					element.addEventListener("scroll", handleScroll);
+				} else setDisableClose(false);
+			}
 		};
 		const handleScroll = () => {
 			const element = contentRef.current;
@@ -7649,28 +7595,8 @@ function LocalStorage(props) {
 }
 //#endregion
 //#region src/connect/components/modal/settings-modal-v2/default-editor.tsx
-function DefaultEditor(props) {
-	const { className, ...rest } = props;
-	return /* @__PURE__ */ jsx("div", {
-		className: twMerge("rounded-lg bg-background p-3", className),
-		children: /* @__PURE__ */ jsx(DefaultEditorSelect, { ...rest })
-	});
-}
-function DefaultEditorSelect(props) {
-	const { documentModelEditor, setDocumentModelEditor, documentModelEditorOptions, className } = props;
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
-		className: "mb-4 font-semibold text-foreground",
-		children: "Default Editor Selection"
-	}), /* @__PURE__ */ jsx(SelectFieldRaw, {
-		className: twMerge("max-w-fit min-w-36", className),
-		name: "default-editor",
-		required: true,
-		value: documentModelEditor,
-		options: documentModelEditorOptions,
-		multiple: false,
-		onChange: (value) => setDocumentModelEditor(value)
-	})] });
-}
+const DefaultEditor = lazyComponent(() => import("../default-editor.impl-a6EOuEme.js").then((m) => m.DefaultEditor));
+const DefaultEditorSelect = lazyComponent(() => import("../default-editor.impl-a6EOuEme.js").then((m) => m.DefaultEditorSelect));
 //#endregion
 //#region src/connect/components/modal/settings-modal-v2/package-manager/parse-package-spec.ts
 /**
@@ -7896,6 +7822,7 @@ const VersionPicker = (props) => {
 							className: "px-3 py-1 text-xs font-semibold tracking-wide text-muted-foreground uppercase",
 							children: "Tags"
 						}), filteredTags.map(([tag, ver]) => {
+							const isSelected = selected.kind === "tag" && selected.value === tag;
 							return /* @__PURE__ */ jsxs("button", {
 								type: "button",
 								onClick: () => {
@@ -7906,7 +7833,7 @@ const VersionPicker = (props) => {
 									setOpen(false);
 									setQuery("");
 								},
-								className: twMerge("flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-xs transition-colors", "hover:hover-effect", selected.kind === "tag" && selected.value === tag && "bg-muted font-semibold"),
+								className: twMerge("flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-xs transition-colors", "hover:hover-effect", isSelected && "bg-muted font-semibold"),
 								children: [/* @__PURE__ */ jsx("span", {
 									className: "truncate text-foreground",
 									children: tag
@@ -7927,6 +7854,7 @@ const VersionPicker = (props) => {
 						className: "px-3 py-1 text-xs font-semibold tracking-wide text-muted-foreground uppercase",
 						children: "Versions"
 					}), filteredVersions.map((ver) => {
+						const isSelected = selected.kind === "version" && selected.value === ver;
 						return /* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: () => {
@@ -7937,7 +7865,7 @@ const VersionPicker = (props) => {
 								setOpen(false);
 								setQuery("");
 							},
-							className: twMerge("flex w-full items-center px-3 py-1.5 text-left text-xs transition-colors", "hover:hover-effect", selected.kind === "version" && selected.value === ver && "bg-muted font-semibold"),
+							className: twMerge("flex w-full items-center px-3 py-1.5 text-left text-xs transition-colors", "hover:hover-effect", isSelected && "bg-muted font-semibold"),
 							children: /* @__PURE__ */ jsxs("span", {
 								className: "flex min-w-0 items-center gap-1.5 text-foreground",
 								children: [/* @__PURE__ */ jsx("span", {
@@ -8086,6 +8014,14 @@ const PackageManagerListItem = (props) => {
 							updateTarget
 						]
 					}),
+					registryPackage.sharedDepWarnings && registryPackage.sharedDepWarnings.length > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "inline-flex items-center gap-1 rounded-full border border-warning/40 bg-warning/10 px-2 py-0.5 text-[11px] font-medium text-warning",
+						title: registryPackage.sharedDepWarnings.join("\n"),
+						children: [/* @__PURE__ */ jsx(Icon, {
+							name: "Exclamation",
+							size: 10
+						}), "Shared deps out of date"]
+					}),
 					!(canPickVersion && hasVersionMetadata) && registryPackage.version && /* @__PURE__ */ jsxs("span", {
 						className: "text-xs font-normal text-muted-foreground",
 						children: ["v", registryPackage.version]
@@ -8129,7 +8065,8 @@ const PackageManagerListItem = (props) => {
 				items: dropdownItems,
 				onItemClick: (id) => {
 					if (id === "install") {
-						onInstall(canPickVersion && hasVersionMetadata ? buildPackageSpec(registryPackage.name, selected.value) : registryPackage.name).catch(console.error);
+						const spec = canPickVersion && hasVersionMetadata ? buildPackageSpec(registryPackage.name, selected.value) : registryPackage.name;
+						onInstall(spec).catch(console.error);
 						return;
 					}
 					if (id === "update") {
@@ -8597,619 +8534,8 @@ function ConnectUpgradeDriveModal(props) {
 	});
 }
 //#endregion
-//#region src/connect/components/revision-history/header/branch.tsx
-function Branch(props) {
-	const { branch = "main" } = props;
-	return /* @__PURE__ */ jsxs("button", {
-		className: "flex h-8 w-fit items-center gap-1 rounded-lg bg-background pr-2 pl-1 text-xs text-foreground",
-		children: [
-			/* @__PURE__ */ jsx(Icon, { name: "Branch" }),
-			/* @__PURE__ */ jsx("span", { children: "BRANCH" }),
-			/* @__PURE__ */ jsx("span", {
-				className: "text-foreground",
-				children: branch
-			})
-		]
-	});
-}
-//#endregion
-//#region src/connect/components/revision-history/header/doc-id.tsx
-function DocId(props) {
-	const { docId, onCopy } = props;
-	const [, copy] = useCopyToClipboard();
-	function handleCopy(text) {
-		return () => {
-			copy(text).then(() => {
-				onCopy?.();
-			}).catch((error) => {
-				console.error("Failed to copy!", error);
-			});
-		};
-	}
-	return /* @__PURE__ */ jsxs("button", {
-		className: "flex h-8 w-fit items-center gap-1 rounded-lg bg-background pr-2 pl-1 text-xs text-foreground",
-		onClick: handleCopy(docId),
-		children: [
-			/* @__PURE__ */ jsx(Icon, { name: "Link" }),
-			"DOC ID",
-			/* @__PURE__ */ jsx("span", {
-				className: "text-foreground",
-				children: docId
-			})
-		]
-	});
-}
-//#endregion
-//#region src/connect/components/revision-history/header/document-state.tsx
-const DocumentState = (props) => {
-	const { documentState, onCopyState } = props;
-	const [, copy] = useCopyToClipboard();
-	function handleCopy() {
-		copy(JSON.stringify(documentState, null, 2)).then(() => {
-			onCopyState?.();
-		}).catch((error) => {
-			console.error("Failed to copy document state!", error);
-		});
-	}
-	return /* @__PURE__ */ jsx("button", {
-		className: "rounded-lg bg-background p-1 text-foreground",
-		onClick: handleCopy,
-		children: /* @__PURE__ */ jsx(Icon, { name: "CurlyBrackets" })
-	});
-};
-//#endregion
-//#region src/connect/components/revision-history/header/scope.tsx
-function Scope(props) {
-	const { value, onChange } = props;
-	return /* @__PURE__ */ jsx(ConnectSelect, {
-		absolutePositionMenu: true,
-		containerClassName: "z-10 w-fit rounded-lg bg-background text-xs text-muted-foreground",
-		id: "scope select",
-		itemClassName: "grid grid-cols-[auto,auto] gap-1 py-2 text-muted-foreground",
-		items: [{
-			displayValue: "Global scope",
-			value: "global"
-		}, {
-			displayValue: "Local scope",
-			value: "local"
-		}],
-		menuClassName: "min-w-0 text-muted-foreground",
-		onChange,
-		value
-	});
-}
-//#endregion
-//#region src/connect/components/revision-history/header/header.tsx
-function Header(props) {
-	const { title, docId, scope, onChangeScope, onClose, className, documentState, onCopyState, onCopyDocId, ...divProps } = props;
-	return /* @__PURE__ */ jsxs("header", {
-		className: twMerge("flex items-center justify-between bg-transparent", className),
-		...divProps,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ jsx("button", {
-				name: "close-revision-history",
-				className: "rounded-lg bg-background p-1 text-foreground shadow-button",
-				onClick: onClose,
-				children: /* @__PURE__ */ jsx(Icon, { name: "VariantArrowLeft" })
-			}), /* @__PURE__ */ jsx("h1", {
-				className: "text-xs text-foreground",
-				children: title
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [
-				/* @__PURE__ */ jsx(DocId, {
-					docId,
-					onCopy: onCopyDocId
-				}),
-				documentState && /* @__PURE__ */ jsx(DocumentState, {
-					documentState,
-					onCopyState
-				}),
-				/* @__PURE__ */ jsx(Branch, {}),
-				/* @__PURE__ */ jsx(Scope, {
-					onChange: onChangeScope,
-					value: scope
-				})
-			]
-		})]
-	});
-}
-//#endregion
-//#region src/connect/hooks/use-ens.ts
-const ensCache = /* @__PURE__ */ new Map();
-function fetchEns(address) {
-	const cached = ensCache.get(address);
-	if (cached) return cached;
-	const promise = fetch(`https://api.ensdata.net/${address}`).then((res) => {
-		if (!res.ok) throw new Error(`ENS lookup failed: ${res.status}`);
-		return res.json();
-	}).catch((err) => {
-		ensCache.delete(address);
-		throw err instanceof Error ? err : /* @__PURE__ */ new Error("ENS lookup failed");
-	});
-	ensCache.set(address, promise);
-	return promise;
-}
-function useEns(address) {
-	const [data, setData] = useState();
-	const [isLoading, setIsLoading] = useState(false);
-	const [error, setError] = useState();
-	useEffect(() => {
-		if (!address) {
-			setData(void 0);
-			setError(void 0);
-			return;
-		}
-		let cancelled = false;
-		setIsLoading(true);
-		setError(void 0);
-		fetchEns(address).then((json) => {
-			if (cancelled) return;
-			setData(json);
-		}).catch((err) => {
-			if (cancelled) return;
-			setError(err instanceof Error ? err : /* @__PURE__ */ new Error("ENS lookup failed"));
-		}).finally(() => {
-			if (cancelled) return;
-			setIsLoading(false);
-		});
-		return () => {
-			cancelled = true;
-		};
-	}, [address]);
-	return {
-		data,
-		isLoading,
-		error
-	};
-}
-//#endregion
-//#region src/connect/utils/address.ts
-function formatEthAddress(address) {
-	return `${address.slice(0, 7)}...${address.slice(-5)}`;
-}
-//#endregion
-//#region src/connect/components/code-popover.tsx
-function CodePopover(props) {
-	const { content, trigger, anchor } = props;
-	const [isOpen, setIsOpen] = useState(false);
-	const opener = funnel(() => setIsOpen(true), {
-		triggerAt: "start",
-		minQuietPeriodMs: 300
-	});
-	const closer = funnel(() => setIsOpen(false), {
-		triggerAt: "start",
-		minQuietPeriodMs: 100
-	});
-	function open() {
-		closer.cancel();
-		opener.call();
-	}
-	function close() {
-		opener.cancel();
-		closer.call();
-	}
-	return /* @__PURE__ */ jsxs(Root$1, {
-		open: isOpen,
-		onOpenChange: (changedIsOpen) => changedIsOpen ? open() : close(),
-		children: [
-			/* @__PURE__ */ jsx(Trigger$1, {
-				onMouseEnter: open,
-				children: trigger
-			}),
-			!!anchor && /* @__PURE__ */ jsx(Anchor, {
-				asChild: true,
-				children: anchor
-			}),
-			/* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsx(Content$1, {
-				forceMount: true,
-				onMouseLeave: close,
-				sideOffset: -28,
-				onCloseAutoFocus: (e) => e.preventDefault(),
-				collisionPadding: {
-					top: 24,
-					right: 24,
-					bottom: -1e4,
-					left: 24
-				},
-				className: "z-50 rounded-lg border border-border bg-popover p-2 text-xs text-popover-foreground shadow-tooltip outline-none",
-				children: content
-			}) })
-		]
-	});
-}
-//#endregion
-//#region src/connect/components/revision-history/revision/address.tsx
-function Address(props) {
-	const { address, chainId } = props;
-	const { data: ensData } = useEns(address);
-	if (!address) return null;
-	const shortenedAddress = formatEthAddress(address);
-	return /* @__PURE__ */ jsx(CodePopover, {
-		content: /* @__PURE__ */ jsx(FormattedJsonViewer, { value: { address } }),
-		trigger: /* @__PURE__ */ jsxs("span", {
-			className: "flex w-fit cursor-pointer items-center gap-1 rounded-lg bg-muted p-1 text-xs text-muted-foreground",
-			children: [/* @__PURE__ */ jsx(ENSAvatar, {
-				address,
-				chainId,
-				avatarUrl: ensData?.avatar_url ?? void 0
-			}), shortenedAddress]
-		})
-	});
-}
-//#endregion
-//#region src/connect/components/revision-history/revision/errors.tsx
-function Errors(props) {
-	const { errors } = props;
-	const hasErrors = !!errors?.length;
-	const color = hasErrors ? "text-destructive" : "text-success";
-	const icon = hasErrors ? /* @__PURE__ */ jsx(Icon, {
-		name: "Exclamation",
-		size: 16
-	}) : /* @__PURE__ */ jsx(Icon, {
-		name: "Check",
-		size: 16
-	});
-	const text = hasErrors ? `Error: ${errors[0]}` : "No errors";
-	const content = /* @__PURE__ */ jsxs("span", {
-		className: twMerge("flex w-fit items-center rounded-lg border border-border bg-background px-2 py-1 text-xs", color, hasErrors && "cursor-pointer"),
-		children: [icon, /* @__PURE__ */ jsx("span", {
-			className: twMerge("inline-block max-w-36 truncate"),
-			children: text
-		})]
-	});
-	if (hasErrors) return /* @__PURE__ */ jsx(CodePopover, {
-		content: /* @__PURE__ */ jsx(FormattedJsonViewer, { value: errors }),
-		trigger: content
-	});
-	return content;
-}
-//#endregion
-//#region src/connect/components/revision-history/revision/operation.tsx
-function Operation$1(props) {
-	const { operationType, operationInput } = props;
-	return /* @__PURE__ */ jsx(CodePopover, {
-		content: /* @__PURE__ */ jsx(FormattedJsonViewer, { value: operationInput }),
-		trigger: /* @__PURE__ */ jsxs("span", {
-			className: "flex cursor-pointer items-center gap-2 text-xs text-foreground",
-			children: [operationType, /* @__PURE__ */ jsx(Icon, {
-				className: "text-foreground",
-				name: "Braces",
-				size: 16
-			})]
-		})
-	});
-}
-//#endregion
-//#region src/connect/components/revision-history/revision/revision-number.tsx
-function RevisionNumber(props) {
-	const { operationIndex, eventId, stateHash } = props;
-	const revisionNumber = operationIndex + 1;
-	return /* @__PURE__ */ jsx(CodePopover, {
-		content: /* @__PURE__ */ jsx(FormattedJsonViewer, { value: {
-			revisionNumber,
-			eventId,
-			stateHash
-		} }),
-		trigger: /* @__PURE__ */ jsxs("span", {
-			className: "flex cursor-pointer items-center gap-2 text-xs text-foreground",
-			children: [
-				"Revision ",
-				revisionNumber,
-				".",
-				/* @__PURE__ */ jsx("a", { children: /* @__PURE__ */ jsx(Icon, {
-					className: "cursor-pointer text-foreground",
-					name: "Ellipsis",
-					size: 14
-				}) })
-			]
-		})
-	});
-}
-//#endregion
-//#region src/connect/components/revision-history/revision/signature.tsx
-function Signature(props) {
-	const { signatures } = props;
-	if (!signatures?.length) return null;
-	return /* @__PURE__ */ jsx(CodePopover, {
-		trigger: /* @__PURE__ */ jsxs("span", {
-			className: "flex w-fit cursor-pointer items-center gap-1 rounded-lg border border-border bg-background px-2 py-1",
-			children: [
-				/* @__PURE__ */ jsx(VerificationStatus, { signatures }),
-				" ",
-				/* @__PURE__ */ jsx(Icon, {
-					className: "text-foreground",
-					name: "InfoSquare",
-					size: 16
-				})
-			]
-		}),
-		content: /* @__PURE__ */ jsx(FormattedJsonViewer, {
-			value: signatures,
-			collapsed: 1
-		})
-	});
-}
-function VerificationStatus(props) {
-	const { signatures } = props;
-	if (!signatures?.length) return null;
-	const signatureCount = signatures.length;
-	const verifiedSignaturesCount = signatures.filter((signature) => signature.isVerified).length;
-	const verificationStatusText = `${verifiedSignaturesCount}/${signatureCount} ${signatureCount === 1 ? "signature" : "signatures"} verified`;
-	return /* @__PURE__ */ jsx("span", {
-		className: twMerge(`text-xs`, verifiedSignaturesCount === 0 ? "text-destructive" : verifiedSignaturesCount === signatureCount ? "text-success" : "text-warning"),
-		children: verificationStatusText
-	});
-}
-//#endregion
-//#region src/connect/components/revision-history/revision/timestamp.tsx
-function Timestamp(props) {
-	const { timestampUtcMs: timestamp } = props;
-	const timestampNumber = typeof timestamp === "string" && !timestamp.includes("-") ? parseInt(timestamp) : timestamp;
-	const date = new Date(timestampNumber);
-	const shortDate = format(date, "HH:mm 'UTC'");
-	return /* @__PURE__ */ jsx(CodePopover, {
-		content: /* @__PURE__ */ jsx(FormattedJsonViewer, { value: {
-			timestampFormatted: format(date, "eee, dd MMM yyyy HH:mm:ss 'UTC'"),
-			timestampUtcMs: timestamp
-		} }),
-		trigger: /* @__PURE__ */ jsxs("span", {
-			className: "cursor-pointer text-xs text-foreground",
-			children: ["committed at ", shortDate]
-		})
-	});
-}
-//#endregion
-//#region src/connect/components/revision-history/revision/revision.tsx
-function _Revision(props) {
-	return /* @__PURE__ */ jsxs("article", {
-		className: "flex items-center justify-between rounded-xl border border-border bg-background px-4 py-2",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [
-				/* @__PURE__ */ jsx(RevisionNumber, { ...props }),
-				/* @__PURE__ */ jsx(Operation$1, { ...props }),
-				/* @__PURE__ */ jsx(Address, { ...props }),
-				/* @__PURE__ */ jsx(Timestamp, { ...props })
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-1",
-			children: [/* @__PURE__ */ jsx(Signature, { ...props }), /* @__PURE__ */ jsx(Errors, { ...props })]
-		})]
-	});
-}
-const Revision = /* @__PURE__ */ memo(_Revision);
-//#endregion
-//#region src/connect/components/revision-history/skip/skip.tsx
-function Skip(props) {
-	const { operationIndex, skipCount } = props;
-	const revisionNumber = operationIndex;
-	const skippedRevisions = skipCount === 1 ? `${revisionNumber}` : `${revisionNumber} - ${revisionNumber + 1 - skipCount}`;
-	return /* @__PURE__ */ jsxs("article", {
-		className: "grid grid-cols-[1fr,auto,1fr] items-center py-2",
-		children: [
-			/* @__PURE__ */ jsx("div", { className: "h-px rounded-full bg-muted" }),
-			/* @__PURE__ */ jsxs("div", {
-				className: "mx-3 text-xs text-foreground",
-				children: [
-					"[Skipped Revision ",
-					skippedRevisions,
-					"]"
-				]
-			}),
-			/* @__PURE__ */ jsx("div", { className: "h-px rounded-full bg-muted" })
-		]
-	});
-}
-//#endregion
-//#region src/connect/components/revision-history/utils.ts
-function makeRows(operations) {
-	const revisionsAndSkips = [];
-	const seenDays = /* @__PURE__ */ new Set();
-	for (const operation of operations) {
-		if (!operation.timestampUtcMs) continue;
-		const day = operation.timestampUtcMs.split("T")[0];
-		if (!seenDays.has(day)) {
-			seenDays.add(day);
-			revisionsAndSkips.push({
-				type: "day",
-				height: 32,
-				timestampUtcMs: day
-			});
-		}
-		revisionsAndSkips.push({
-			type: "revision",
-			height: 46,
-			operationIndex: operation.index,
-			eventId: operation.id ?? "EVENT_ID_NOT_FOUND",
-			stateHash: operation.hash,
-			operationType: operation.action.type,
-			operationInput: operation.action.input ?? {},
-			address: operation.action?.context?.signer?.user.address,
-			chainId: operation.action?.context?.signer?.user.chainId,
-			timestampUtcMs: operation.timestampUtcMs,
-			signatures: makeSignatures(operation.action?.context?.signer?.signatures ?? []),
-			errors: operation.error ? [operation.error] : void 0
-		});
-		if (operation.skip > 0) revisionsAndSkips.push({
-			type: "skip",
-			height: 34,
-			operationIndex: operation.index,
-			skipCount: operation.skip,
-			timestampUtcMs: operation.timestampUtcMs
-		});
-	}
-	return revisionsAndSkips;
-}
-function makeSignatureFromSignatureArray(signatureArray) {
-	const [signerAddress, hash, prevStateHash, signatureBytes] = signatureArray;
-	return {
-		signerAddress,
-		hash,
-		prevStateHash,
-		signatureBytes,
-		isVerified: true
-	};
-}
-function makeSignatures(signaturesArray) {
-	return signaturesArray?.map(makeSignatureFromSignatureArray);
-}
-//#endregion
-//#region src/connect/components/revision-history/timeline/day.tsx
-function Day(props) {
-	const { timestampUtcMs: timestamp } = props;
-	const formattedDate = format(timestamp, "MMM dd, yyyy");
-	return /* @__PURE__ */ jsxs("h2", {
-		className: "-ml-6 flex items-center gap-1 bg-background py-2 text-xs text-foreground",
-		children: [
-			/* @__PURE__ */ jsx(Icon, {
-				name: "Ring",
-				size: 16
-			}),
-			" Changes on ",
-			formattedDate
-		]
-	});
-}
-//#endregion
-//#region src/connect/components/revision-history/timeline/timeline.tsx
-function Timeline(props) {
-	const { localOperations, globalOperations, scope } = props;
-	const operations = scope === "local" ? localOperations : globalOperations;
-	const initialNumRowsToShow = 100;
-	const allRows = useMemo(() => makeRows(operations), [operations]);
-	const [scrollAmount, setScrollAmount] = useState(0);
-	const [numRowsToShow, setNumRowsToShow] = useState(initialNumRowsToShow);
-	const [rows, setRows] = useState(() => allRows.slice(0, numRowsToShow));
-	const parentRef = useRef(null);
-	const hasNextPage = rows.length < allRows.length;
-	const rowVirtualizer = useVirtualizer({
-		count: rows.length,
-		getScrollElement: () => parentRef.current,
-		estimateSize: (i) => allRows[i].height,
-		gap: 8
-	});
-	useEffect(() => {
-		if (!hasNextPage) return;
-		const newNumRevisions = initialNumRowsToShow + Math.floor(scrollAmount / 46);
-		setNumRowsToShow((prev) => newNumRevisions > prev ? newNumRevisions : prev);
-	}, [scrollAmount, hasNextPage]);
-	useEffect(() => {
-		setRows(allRows.slice(0, numRowsToShow));
-	}, [allRows, numRowsToShow]);
-	const handleScroll = (e) => {
-		setScrollAmount((prev) => {
-			const n = prev + e.deltaY;
-			if (n < 0) return 0;
-			return n;
-		});
-	};
-	useEffect(() => {
-		window.addEventListener("wheel", handleScroll);
-		return () => {
-			window.removeEventListener("wheel", handleScroll);
-		};
-	}, []);
-	return /* @__PURE__ */ jsx("div", {
-		className: "border-l border-border dark:border-none",
-		ref: parentRef,
-		style: {
-			height: `${rowVirtualizer.getTotalSize()}px`,
-			width: "100%",
-			position: "relative"
-		},
-		children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
-			const row = rows[virtualRow.index];
-			return /* @__PURE__ */ jsxs("div", {
-				style: {
-					position: "absolute",
-					top: 0,
-					left: 16,
-					width: "100%",
-					height: `${virtualRow.size}px`,
-					transform: `translateY(${virtualRow.start}px)`
-				},
-				children: [
-					row.type === "revision" && /* @__PURE__ */ createElement(Revision, {
-						...row,
-						key: virtualRow.key
-					}),
-					row.type === "skip" && /* @__PURE__ */ jsx(Skip, { ...row }, virtualRow.key),
-					row.type === "day" && /* @__PURE__ */ jsx(Day, { ...row }, virtualRow.key)
-				]
-			}, virtualRow.index);
-		})
-	});
-}
-//#endregion
 //#region src/connect/components/revision-history/revision-history.tsx
-function RevisionHistory(props) {
-	const { documentTitle, documentId, globalOperations, localOperations, onClose, itemsPerPage = 100, documentState, onCopyState, onCopyDocId } = props;
-	const [scope, setScope] = useState("global");
-	const visibleOperations = useMemo(() => {
-		return garbageCollect(sortOperations(scope === "global" ? globalOperations : localOperations)).sort((a, b) => b.index - a.index);
-	}, [
-		globalOperations,
-		localOperations,
-		scope
-	]);
-	const { pageItems, pages, goToPage, goToNextPage, goToPreviousPage, goToFirstPage, goToLastPage, hiddenNextPages, isNextPageAvailable, isPreviousPageAvailable } = usePagination(visibleOperations, { itemsPerPage });
-	function onChangeScope(scope) {
-		goToFirstPage();
-		setScope(scope);
-	}
-	const PaginationComponent = visibleOperations.length > itemsPerPage ? /* @__PURE__ */ jsx("div", {
-		className: "mt-4 flex w-full justify-end",
-		children: /* @__PURE__ */ jsx(Pagination, {
-			firstPageLabel: "First Page",
-			goToFirstPage,
-			goToLastPage,
-			goToNextPage,
-			goToPage,
-			goToPreviousPage,
-			hiddenNextPages,
-			isNextPageAvailable,
-			isPreviousPageAvailable,
-			lastPageLabel: "Last Page",
-			nextPageLabel: "Next",
-			pages,
-			previousPageLabel: "Previous"
-		})
-	}) : /* @__PURE__ */ jsx("hr", { className: "h-12 border-none" });
-	return /* @__PURE__ */ jsx(ConnectTooltipProvider, { children: /* @__PURE__ */ jsxs("div", {
-		className: "p-6",
-		children: [
-			/* @__PURE__ */ jsx(Header, {
-				docId: documentId,
-				onChangeScope,
-				onClose,
-				scope,
-				title: documentTitle,
-				documentState,
-				onCopyState,
-				onCopyDocId
-			}),
-			PaginationComponent,
-			/* @__PURE__ */ jsx("div", {
-				className: "mt-4 flex justify-center rounded-md bg-background p-4",
-				children: visibleOperations.length > 0 ? /* @__PURE__ */ jsx("div", {
-					className: "grid grid-cols-[minmax(min-content,1018px)]",
-					children: /* @__PURE__ */ jsx(Timeline, {
-						globalOperations: scope === "global" ? pageItems : [],
-						localOperations: scope === "local" ? pageItems : [],
-						scope
-					})
-				}) : /* @__PURE__ */ jsx("h3", {
-					className: "my-40 text-foreground",
-					children: "This document has no recorded operations yet."
-				})
-			}),
-			PaginationComponent
-		]
-	}) });
-}
+const RevisionHistory = lazyComponent(() => import("../revision-history.impl-C8YnBJ6U.js").then((m) => m.RevisionHistory));
 //#endregion
 //#region src/connect/components/search-bar/filter-item.tsx
 const FilterItem = (props) => {
@@ -9275,27 +8601,70 @@ const ConnectSearchBar = (props) => {
 	});
 };
 //#endregion
+//#region src/connect/components/tooltip/tooltip.tsx
+function ConnectTooltip(props) {
+	const { children, content, open, defaultOpen, onOpenChange, className, side = "top", sideOffset = 5, delayDuration, ...rest } = props;
+	return /* @__PURE__ */ jsxs(Root, {
+		defaultOpen,
+		delayDuration,
+		onOpenChange,
+		open,
+		children: [/* @__PURE__ */ jsx(Trigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
+			...rest,
+			side,
+			sideOffset,
+			className: twMerge("z-50 rounded-lg border border-border bg-popover p-2 text-xs text-popover-foreground shadow-tooltip", className),
+			children: content
+		}) })]
+	});
+}
+const ConnectTooltipProvider = Provider;
+//#endregion
 //#region src/connect/components/sidebar/sidebar-item.tsx
 const SidebarItem = function SidebarItem(props) {
-	const { icon, title, description: _description, containerClassName, active, onClick } = props;
+	const { icon, title, description, containerClassName, active, href, onClick, onPreload } = props;
+	const Element = href ? "a" : onClick ? "button" : "div";
+	const current = href ? props["aria-current"] : void 0;
 	return /* @__PURE__ */ jsx(ConnectTooltip, {
-		content: title,
+		content: description ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "block font-medium",
+			children: title
+		}), /* @__PURE__ */ jsx("span", {
+			className: "block opacity-80",
+			children: description
+		})] }) : title,
 		side: "right",
 		sideOffset: 12,
 		className: "border-none bg-primary px-3 py-2 text-sm text-primary-foreground",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: twMerge("group/sidebar-item relative flex cursor-pointer flex-col items-center justify-center text-center text-sm text-foreground", containerClassName, active && "bg-sidebar-accent text-sidebar-accent-foreground", onClick && "cursor-pointer"),
+		children: /* @__PURE__ */ jsxs(Element, {
+			href,
+			type: Element === "button" ? "button" : void 0,
+			"aria-label": title,
+			"aria-description": description,
+			"aria-current": current,
+			className: twMerge("group/sidebar-item relative flex cursor-pointer flex-col items-center justify-center text-center text-sm text-foreground", containerClassName, "aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-accent-foreground", active && "bg-sidebar-accent text-sidebar-accent-foreground", onClick && "cursor-pointer"),
 			onClick,
-			children: [active ? /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-0 h-10 w-1 -translate-y-1/2 rounded-r-sm bg-info" }) : /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-0 h-6 w-1 -translate-y-1/2 rounded-r-sm bg-secondary opacity-0 transition-opacity group-hover/sidebar-item:opacity-100" }), /* @__PURE__ */ jsx("div", {
-				className: "mx-auto py-4",
-				children: icon || /* @__PURE__ */ jsx("div", {
-					className: "flex size-8 items-center justify-center rounded-lg bg-primary",
-					children: /* @__PURE__ */ jsx("span", {
-						className: "text-sm font-medium text-primary-foreground",
-						children: title.slice(0, 1).toUpperCase()
+			onMouseEnter: onPreload,
+			onTouchStart: onPreload,
+			onFocus: href ? onPreload : void 0,
+			children: [
+				/* @__PURE__ */ jsx("div", { className: twMerge("absolute top-1/2 left-0 hidden h-10 w-1 -translate-y-1/2 rounded-r-sm bg-info group-aria-[current=page]/sidebar-item:block max-sm:hidden!", active && "block") }),
+				/* @__PURE__ */ jsx("div", { className: twMerge("absolute top-1/2 left-0 h-6 w-1 -translate-y-1/2 rounded-r-sm bg-secondary opacity-0 transition-opacity group-hover/sidebar-item:opacity-100 group-aria-[current=page]/sidebar-item:hidden max-sm:hidden", active && "hidden") }),
+				/* @__PURE__ */ jsx("div", {
+					className: "mx-auto py-4 max-sm:px-3 max-sm:py-2",
+					children: icon || /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						className: "flex size-8 items-center justify-center rounded-lg bg-primary",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "text-sm font-medium text-primary-foreground",
+							children: title.slice(0, 1).toUpperCase()
+						})
 					})
 				})
-			})]
+			]
 		})
 	});
 };
@@ -9460,17 +8829,32 @@ const SidebarUser = ({ address, ensName, avatarUrl, etherscanUrl, onDisconnect }
 };
 //#endregion
 //#region src/connect/components/sidebar/sidebar-footer.tsx
-const ConnectSidebarFooter = ({ address, ensName, avatarUrl, className, onLogin, onClickSettings, onDisconnect, onHomeClick, showDebug, onDebugClick, etherscanUrl = "", ...props }) => {
+const ConnectSidebarFooter = ({ address, ensName, avatarUrl, className, onLogin, onClickSettings, settingsHref, settingsCurrent, onDisconnect, onHomeClick, showDebug, onDebugClick, etherscanUrl = "", ...props }) => {
+	const appLogoSrc = useConnectBranding().icon;
+	const settingsIcon = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Settings, {
+		className: "text-foreground",
+		size: 24,
+		strokeWidth: 2
+	}), /* @__PURE__ */ jsx("span", {
+		className: "hidden text-sm/6 font-semibold text-foreground",
+		children: "Settings"
+	})] });
 	return /* @__PURE__ */ jsxs(SidebarFooter, {
 		...props,
-		className: twMerge("flex flex-col items-center gap-3 border-t border-sidebar-border px-2 py-4 dark:border-none", className),
+		className: twMerge("flex flex-col items-center gap-3 border-t border-sidebar-border px-2 py-4 max-sm:flex-row max-sm:border-t-0 max-sm:border-l max-sm:py-2 dark:border-none", className),
 		children: [
 			onHomeClick && /* @__PURE__ */ jsx("button", {
 				"aria-label": "Home",
 				type: "button",
 				className: "cursor-pointer",
 				onClick: onHomeClick,
-				children: /* @__PURE__ */ jsx(Icon, {
+				children: appLogoSrc ? /* @__PURE__ */ jsx("img", {
+					alt: "",
+					className: "object-contain",
+					src: appLogoSrc,
+					width: 24,
+					height: 24
+				}) : /* @__PURE__ */ jsx(Icon, {
 					className: "text-muted-foreground",
 					name: "ConnectSmall",
 					size: 24
@@ -9488,7 +8872,7 @@ const ConnectSidebarFooter = ({ address, ensName, avatarUrl, className, onLogin,
 				})
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: onHomeClick ? "mt-3" : "",
+				className: onHomeClick ? "mt-3 max-sm:mt-0" : "",
 				children: address ? /* @__PURE__ */ jsx(SidebarUser, {
 					address,
 					ensName,
@@ -9497,19 +8881,19 @@ const ConnectSidebarFooter = ({ address, ensName, avatarUrl, className, onLogin,
 					etherscanUrl
 				}) : /* @__PURE__ */ jsx(SidebarLogin, { onLogin })
 			}),
-			/* @__PURE__ */ jsxs("button", {
+			settingsHref ? /* @__PURE__ */ jsx("a", {
+				"aria-label": "Settings",
+				href: settingsHref,
+				"aria-current": settingsCurrent,
+				className: "cursor-pointer rounded-md aria-[current=page]:bg-sidebar-accent",
+				onClick: onClickSettings,
+				children: settingsIcon
+			}) : /* @__PURE__ */ jsx("button", {
 				"aria-label": "Settings",
 				type: "button",
 				className: twMerge(onClickSettings ? "cursor-pointer" : "cursor-wait"),
 				onClick: onClickSettings,
-				children: [/* @__PURE__ */ jsx(Settings, {
-					className: "text-foreground",
-					size: 24,
-					strokeWidth: 2
-				}), /* @__PURE__ */ jsx("span", {
-					className: "hidden text-sm/6 font-semibold text-foreground",
-					children: "Settings"
-				})]
+				children: settingsIcon
 			})
 		]
 	});
@@ -9526,19 +8910,29 @@ const ConnectSidebarHeader = ({ className, children, ...props }) => {
 };
 //#endregion
 //#region src/connect/components/sidebar/sidebar.tsx
-const ConnectSidebar = ({ onClick, address, ensName, avatarUrl, headerContent, onClickSettings, maxWidth = "304px", minWidth = "58px", onLogin, onDisconnect, etherscanUrl, showDebug, onDebugClick, ...props }) => {
+const ConnectSidebar = ({ onClick, address, ensName, avatarUrl, headerContent, onClickSettings, settingsHref, settingsCurrent, maxWidth = "304px", minWidth = "58px", onLogin, onDisconnect, etherscanUrl, showDebug, onDebugClick, ...props }) => {
 	return /* @__PURE__ */ jsxs(Sidebar, {
 		...props,
+		"data-connect-sidebar": "",
 		maxWidth,
 		minWidth,
-		children: [/* @__PURE__ */ jsxs(SidebarPanel, { children: [/* @__PURE__ */ jsx(ConnectSidebarHeader, { children: headerContent }), /* @__PURE__ */ jsx("div", {
-			className: "flex flex-col",
-			children: props.children
-		})] }), /* @__PURE__ */ jsx(ConnectSidebarFooter, {
+		children: [/* @__PURE__ */ jsxs(SidebarPanel, {
+			className: "max-sm:flex max-sm:overflow-x-auto max-sm:overflow-y-hidden",
+			children: [/* @__PURE__ */ jsx(ConnectSidebarHeader, {
+				className: "max-sm:hidden",
+				children: headerContent
+			}), /* @__PURE__ */ jsx("nav", {
+				"aria-label": "Drives and pages",
+				className: "flex flex-col max-sm:flex-row",
+				children: props.children
+			})]
+		}), /* @__PURE__ */ jsx(ConnectSidebarFooter, {
 			address,
 			ensName,
 			avatarUrl,
 			onClickSettings,
+			settingsHref,
+			settingsCurrent,
 			onLogin,
 			onDisconnect,
 			etherscanUrl,
@@ -9617,6 +9011,21 @@ function ThemeSwitch({ horizontal = false }) {
 	});
 }
 //#endregion
+//#region src/connect/components/toggle/toggle.tsx
+const Toggle = /*#__PURE__*/ forwardRef(function Toggle(props, ref) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: "relative cursor-pointer items-center",
+		htmlFor: props.id,
+		children: [/* @__PURE__ */ jsx("input", {
+			className: "peer sr-only",
+			ref,
+			type: "checkbox",
+			value: "",
+			...props
+		}), /* @__PURE__ */ jsx("div", { className: "peer h-6 w-11 rounded-full bg-muted-foreground peer-checked:bg-info peer-focus:outline-none after:absolute after:inset-s-0.5 after:top-0.5 after:size-5 after:rounded-full after:border after:border-none after:bg-background after:transition-all peer-checked:after:translate-x-full" })]
+	});
+});
+//#endregion
 //#region src/connect/utils/get-folder-status.ts
 /**
 * Retrieves the sync status of a folder based on its path and their children files.
@@ -9663,6 +9072,6 @@ const removeSuccessFiles = (files) => {
 	return files.filter((file) => file.status !== "SUCCESS");
 };
 //#endregion
-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 };
+export { About, AccountPopover, AccountPopoverLogin, AddDriveModal, AddLocalDriveForm, AddRemoteDriveForm, AnimatedLoader, AvailablePackagesPanel, BackgroundLayers, Breadcrumb, Breadcrumbs, CONFLICT, CatchUpInspector, ChannelInspector, Checkbox, Combobox, ConnectBrandingProvider, 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, Icon, InspectorModal, InstalledPackagesPanel, IntegrityInspector, LoadingScreen, LogoAnimation, MISSING, Modal, ModalButton, NodeInput, ObjectInspectorModal, PackageInstallModal, PackageList, PackageManager, PackageManagerListItem, PackagePanelScrollArea, PackageRegistryError, PackageSubSection, PeerAgreementPanel, PowerhouseButton, ProcessorsInspector, ProjectLoaderImage, 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, brandedDocumentIcon, debugNodeOptions, debugNodeOptionsMap, defaultDriveOptions, defaultNodeOptions, fileNodeDropdownOptions, folderNodeDropdownOptions, formatEthAddress, formatFileSize, generateId, getFolderStatus, getProjectLoader, locationInfoByLocation, mapProgressStageToStatus, mapUploadsToFileItems, nodeOptions, normalNodeOptions, peerManifestLabel, removeSuccessFiles, sharingTypeOptions, sortFilesByStatus, syncStatuses, useConnectBranding, useEns, useWindowSize, verifyPackageJsonFields };
 
 //# sourceMappingURL=index.js.map