@powerhousedao/design-system 6.2.3-dev.3 → 6.2.3-dev.30

package/dist/connect/index.js

@@ -1,5 +1,5 @@
-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 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-CrUksCLW.js";
+import { n as getDimensions, t as Icon } from "../icon-01W_S_9A.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";
@@ -527,8 +527,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 +703,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 +1280,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 +1640,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 = {
@@ -1699,7 +1699,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);
 		}
@@ -1798,7 +1798,7 @@ 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, {
@@ -1812,10 +1812,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;
+				if (!/*#__PURE__*/ React.isValidElement(child)) return;
+				const value = resolveTabValue(child.props);
 				return /* @__PURE__ */ jsx(Content$2, {
 					className: "h-full",
-					value: resolveTabValue(child.props),
+					value,
 					children: child
 				}, i);
 			})
@@ -1954,7 +1955,8 @@ const getBarHeight = (size = 0) => {
 const formatTimestamp$1 = (isoString) => {
 	if (!isoString) return "";
 	try {
-		return format(parseISO(isoString), "HH:mm, dd, MMMM");
+		const date = parseISO(isoString);
+		return format(date, "HH:mm, dd, MMMM");
 	} catch {
 		return isoString;
 	}
@@ -2239,12 +2241,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
 	});
@@ -2617,10 +2618,16 @@ function ControlsContainerSlot(props) {
 //#endregion
 //#region src/connect/components/drive-auth-gate/drive-auth-gate.tsx
 function DriveAuthGate(props) {
-	const { mode = "login", onLogin, onLogout, className } = props;
-	return /* @__PURE__ */ jsx("div", {
-		className: twMerge("flex w-[28rem] max-w-[calc(100%-2rem)] flex-col items-center gap-4 rounded-3xl bg-background p-8 text-center shadow-2xl ring-1 ring-black/5 dark:ring-white/10", className),
-		children: mode === "login" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	const { mode = "login", onLogin, onLogout, onClose, className } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: twMerge("relative flex w-[28rem] max-w-[calc(100%-2rem)] flex-col items-center gap-4 rounded-3xl bg-background p-8 text-center shadow-2xl ring-1 ring-black/5 dark:ring-white/10", className),
+		children: [onClose ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Close",
+			onClick: onClose,
+			className: "absolute top-4 right-4 flex size-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+			children: /* @__PURE__ */ jsx(CloseGlyph, {})
+		}) : null, mode === "login" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx("h2", {
 				className: "text-xl font-semibold text-foreground",
 				children: "Log in to access this drive"
@@ -2654,7 +2661,21 @@ function DriveAuthGate(props) {
 				className: "mt-2 flex items-center gap-2 rounded-lg border border-border bg-card px-6 py-2.5 text-sm font-semibold text-foreground shadow-sm transition-colors hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
 				children: "Log out"
 			})
-		] })
+		] })]
+	});
+}
+function CloseGlyph() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		focusable: "false",
+		width: 14,
+		height: 14,
+		viewBox: "0 0 14 14",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		children: /* @__PURE__ */ jsx("path", { d: "M2 2 L12 12 M12 2 L2 12" })
 	});
 }
 //#endregion
@@ -2840,7 +2861,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,
@@ -3080,7 +3101,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);
@@ -3090,7 +3111,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));
@@ -3132,11 +3154,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) {
@@ -3988,7 +4011,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;
@@ -4086,7 +4109,7 @@ function AddLocalDriveForm(props) {
 }
 //#endregion
 //#region src/connect/components/toggle/toggle.tsx
-const Toggle = /* @__PURE__ */ forwardRef(function Toggle(props, ref) {
+const Toggle = /*#__PURE__*/ forwardRef(function Toggle(props, ref) {
 	return /* @__PURE__ */ jsxs("label", {
 		className: "relative cursor-pointer items-center",
 		htmlFor: props.id,
@@ -4101,7 +4124,7 @@ const Toggle = /* @__PURE__ */ forwardRef(function Toggle(props, ref) {
 });
 //#endregion
 //#region src/connect/components/form/inputs/available-offline-toggle.tsx
-const AvailableOfflineToggle = /* @__PURE__ */ forwardRef(function AvailableOfflineToggle(props, ref) {
+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", {
@@ -4470,7 +4493,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));
@@ -4487,7 +4511,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));
@@ -4504,7 +4529,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));
@@ -4941,8 +4967,14 @@ function CreateDocumentWithTypeModal(props) {
 		value: PLACEHOLDER_KEY,
 		displayValue: "Select document type…"
 	}, ...typeItems] : typeItems;
+	const resetTimer = useRef(void 0);
+	useEffect(() => () => {
+		if (resetTimer.current !== void 0) clearTimeout(resetTimer.current);
+	}, []);
 	const resetAfterClose = useCallback(() => {
-		setTimeout(() => {
+		if (resetTimer.current !== void 0) clearTimeout(resetTimer.current);
+		resetTimer.current = setTimeout(() => {
+			resetTimer.current = void 0;
 			setDocumentName("");
 			setIsNameValid(false);
 			setSelectedKey(PLACEHOLDER_KEY);
@@ -5077,7 +5109,7 @@ function ConnectDeleteItemModal(props) {
 }
 //#endregion
 //#region src/connect/components/form/inputs/drive-name-input.tsx
-const DriveNameInput = /* @__PURE__ */ forwardRef(function DriveNameInput(props, ref) {
+const DriveNameInput = /*#__PURE__*/ forwardRef(function DriveNameInput(props, ref) {
 	return /* @__PURE__ */ jsx(FormInput, {
 		...props,
 		icon: props.icon ?? /* @__PURE__ */ jsx(Icon, { name: "Drive" }),
@@ -5461,7 +5493,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));
@@ -5491,9 +5524,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);
@@ -5815,7 +5849,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(() => {
@@ -5842,9 +5877,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) => ({
@@ -6045,8 +6081,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: [
@@ -6781,7 +6818,8 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 	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(() => {
@@ -6789,7 +6827,10 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 	}, [loadRemotes]);
 	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,
@@ -6797,9 +6838,10 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 	]);
 	const handleSort = (columnKey) => {
 		if (columnKey === "channel" || columnKey === "actions" || columnKey === "status") 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) => {
@@ -7051,7 +7093,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));
@@ -7354,10 +7397,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;
@@ -7870,6 +7915,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: () => {
@@ -7880,7 +7926,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
@@ -7901,6 +7947,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: () => {
@@ -7911,7 +7958,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", {
@@ -8060,6 +8107,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]
@@ -8103,7 +8158,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") {
@@ -8619,7 +8675,8 @@ const DocumentState = (props) => {
 	const { documentState, onCopyState } = props;
 	const [, copy] = useCopyToClipboard();
 	function handleCopy() {
-		copy(JSON.stringify(documentState, null, 2)).then(() => {
+		const jsonState = JSON.stringify(documentState, null, 2);
+		copy(jsonState).then(() => {
 			onCopyState?.();
 		}).catch((error) => {
 			console.error("Failed to copy document state!", error);
@@ -8633,20 +8690,21 @@ const DocumentState = (props) => {
 };
 //#endregion
 //#region src/connect/components/revision-history/header/scope.tsx
+function labelFor(scope) {
+	return `${scope.charAt(0).toUpperCase()}${scope.slice(1)} scope`;
+}
 function Scope(props) {
-	const { value, onChange } = props;
+	const { scopes, value, onChange } = props;
+	const items = scopes.map((scope) => ({
+		displayValue: labelFor(scope),
+		value: scope
+	}));
 	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"
-		}],
+		items,
 		menuClassName: "min-w-0 text-muted-foreground",
 		onChange,
 		value
@@ -8655,7 +8713,7 @@ function Scope(props) {
 //#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;
+	const { title, docId, scope, scopes, onChangeScope, onClose, className, documentState, onCopyState, onCopyDocId, ...divProps } = props;
 	return /* @__PURE__ */ jsxs("header", {
 		className: twMerge("flex items-center justify-between bg-transparent", className),
 		...divProps,
@@ -8684,6 +8742,7 @@ function Header(props) {
 				/* @__PURE__ */ jsx(Branch, {}),
 				/* @__PURE__ */ jsx(Scope, {
 					onChange: onChangeScope,
+					scopes,
 					value: scope
 				})
 			]
@@ -8924,9 +8983,10 @@ function Timestamp(props) {
 	const timestampNumber = typeof timestamp === "string" && !timestamp.includes("-") ? parseInt(timestamp) : timestamp;
 	const date = new Date(timestampNumber);
 	const shortDate = format(date, "HH:mm 'UTC'");
+	const longDate = format(date, "eee, dd MMM yyyy HH:mm:ss 'UTC'");
 	return /* @__PURE__ */ jsx(CodePopover, {
 		content: /* @__PURE__ */ jsx(FormattedJsonViewer, { value: {
-			timestampFormatted: format(date, "eee, dd MMM yyyy HH:mm:ss 'UTC'"),
+			timestampFormatted: longDate,
 			timestampUtcMs: timestamp
 		} }),
 		trigger: /* @__PURE__ */ jsxs("span", {
@@ -8954,7 +9014,7 @@ function _Revision(props) {
 		})]
 	});
 }
-const Revision = /* @__PURE__ */ memo(_Revision);
+const Revision = /*#__PURE__*/ memo(_Revision);
 //#endregion
 //#region src/connect/components/revision-history/skip/skip.tsx
 function Skip(props) {
@@ -9049,90 +9109,110 @@ function Day(props) {
 }
 //#endregion
 //#region src/connect/components/revision-history/timeline/timeline.tsx
+/** How far each row is indented from the timeline's vertical line. */
+const ROW_INSET = 16;
+/**
+* How far the line is inset from the scroll container's clip edge -- exactly
+* the amount the day marker hangs past it (24 pulled back from a 16 inset
+* leaves 8 on the wrong side of zero). Without this the ring is sliced in
+* half, since a scrolling box clips on both axes.
+*/
+const DAY_MARKER_OVERHANG = 8;
+/**
+* The revision timeline, windowed by row.
+*
+* The scroll element and the content are deliberately two different
+* elements. A virtualizer decides what is visible by comparing its scroll
+* element's viewport against the total content size, so a scroll element
+* sized to the content is a viewport that shows everything at once: it never
+* scrolls, every row is "visible", and the whole page renders while still
+* paying the virtualizer's bookkeeping. The outer element here is therefore
+* bounded and scrollable, and the inner sizer carries the full height that
+* the absolutely positioned rows are placed within.
+*/
 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 { operations, maxHeight = "70vh" } = props;
+	const rows = useMemo(() => makeRows([...operations]), [operations]);
 	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
+		estimateSize: (i) => rows[i]?.height ?? 0,
+		gap: 8,
+		overscan: 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",
+		"data-testid": "revision-timeline",
 		ref: parentRef,
 		style: {
-			height: `${rowVirtualizer.getTotalSize()}px`,
+			maxHeight,
+			overflowY: "auto",
 			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);
+		children: /* @__PURE__ */ jsx("div", {
+			className: "border-l border-border dark:border-none",
+			style: {
+				height: `${rowVirtualizer.getTotalSize()}px`,
+				marginLeft: DAY_MARKER_OVERHANG,
+				position: "relative"
+			},
+			children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
+				const row = rows[virtualRow.index];
+				if (!row) return null;
+				return /* @__PURE__ */ jsxs("div", {
+					style: {
+						position: "absolute",
+						top: 0,
+						left: ROW_INSET,
+						right: 0,
+						height: `${virtualRow.size}px`,
+						transform: `translateY(${virtualRow.start}px)`
+					},
+					children: [
+						row.type === "revision" && /* @__PURE__ */ jsx(Revision, { ...row }),
+						row.type === "skip" && /* @__PURE__ */ jsx(Skip, { ...row }),
+						row.type === "day" && /* @__PURE__ */ jsx(Day, { ...row })
+					]
+				}, virtualRow.key);
+			})
 		})
 	});
 }
 //#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);
+/** The current, scoped props. */
+/**
+* Legacy props: the whole global and local history, toggled inside the
+* component.
+* @deprecated Pass one scope's `operations` with `scopes`/`scope`/`onScopeChange` and the loading props. Removed in the next major.
+*/
+/**
+* The revision history panel. Pages arrive oldest first while the timeline
+* renders newest first, so rendering progressively would show operations in
+* the wrong order until the last page landed and would repaint the whole
+* timeline on every page in between. Instead the component keeps asking for
+* the next page, showing "Loading operations…" and a running count, until
+* the walk completes, then renders the pagination and timeline once.
+*/
+function ScopedRevisionHistory(props) {
+	const { documentTitle, documentId, operations, isLoading, hasNextPage, onLoadNextPage, scopes, scope, onScopeChange, onClose, itemsPerPage = 100, documentState, onCopyState, onCopyDocId, error } = props;
+	useEffect(() => {
+		if (!hasNextPage || isLoading || error) return;
+		const handle = window.setTimeout(onLoadNextPage, 0);
+		return () => window.clearTimeout(handle);
 	}, [
-		globalOperations,
-		localOperations,
-		scope
+		hasNextPage,
+		isLoading,
+		onLoadNextPage,
+		error
 	]);
+	const isWalking = !error && (hasNextPage || isLoading && operations.length === 0);
+	const visibleOperations = useMemo(() => isWalking ? [] : garbageCollect(sortOperations([...operations])).sort((a, b) => b.index - a.index), [operations, isWalking]);
 	const { pageItems, pages, goToPage, goToNextPage, goToPreviousPage, goToFirstPage, goToLastPage, hiddenNextPages, isNextPageAvailable, isPreviousPageAvailable } = usePagination(visibleOperations, { itemsPerPage });
-	function onChangeScope(scope) {
+	function onChangeScope(nextScope) {
 		goToFirstPage();
-		setScope(scope);
+		onScopeChange(nextScope);
 	}
 	const PaginationComponent = visibleOperations.length > itemsPerPage ? /* @__PURE__ */ jsx("div", {
 		className: "mt-4 flex w-full justify-end",
@@ -9152,38 +9232,76 @@ function RevisionHistory(props) {
 			previousPageLabel: "Previous"
 		})
 	}) : /* @__PURE__ */ jsx("hr", { className: "h-12 border-none" });
+	const hasOperations = visibleOperations.length > 0;
 	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
-			}),
+		children: [/* @__PURE__ */ jsx(Header, {
+			docId: documentId,
+			onChangeScope,
+			onClose,
+			scope,
+			scopes,
+			title: documentTitle,
+			documentState,
+			onCopyState,
+			onCopyDocId
+		}), isWalking ? /* @__PURE__ */ jsxs("div", {
+			className: "mt-4 flex flex-col items-center rounded-md bg-background p-4",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "my-40 text-foreground",
+				children: "Loading operations…"
+			}), operations.length > 0 && /* @__PURE__ */ jsxs("p", {
+				className: "text-xs text-muted-foreground",
+				children: [operations.length, " loaded so far"]
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			PaginationComponent,
-			/* @__PURE__ */ jsx("div", {
-				className: "mt-4 flex justify-center rounded-md bg-background p-4",
-				children: visibleOperations.length > 0 ? /* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-4 flex flex-col items-center rounded-md bg-background p-4",
+				children: [error && /* @__PURE__ */ jsxs("p", {
+					className: "mb-2 text-xs text-destructive",
+					children: ["Could not load the rest of the history: ", error.message]
+				}), hasOperations ? /* @__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", {
+					children: /* @__PURE__ */ jsx(Timeline, { operations: pageItems })
+				}) : error ? null : /* @__PURE__ */ jsx("h3", {
 					className: "my-40 text-foreground",
 					children: "This document has no recorded operations yet."
-				})
+				})]
 			}),
 			PaginationComponent
-		]
+		] })]
 	}) });
 }
+const LEGACY_SCOPES = ["global", "local"];
+const noop = () => {};
+/** Toggles between the whole global and local history loaded up front. */
+function LegacyRevisionHistory(props) {
+	const { globalOperations, localOperations, ...common } = props;
+	const [scope, setScope] = useState("global");
+	return /* @__PURE__ */ jsx(ScopedRevisionHistory, {
+		...common,
+		operations: scope === "local" ? localOperations : globalOperations,
+		isLoading: false,
+		hasNextPage: false,
+		onLoadNextPage: noop,
+		scopes: LEGACY_SCOPES,
+		scope,
+		onScopeChange: setScope
+	});
+}
+/**
+* The revision history panel. Pages arrive oldest first while the timeline
+* renders newest first, so it waits for the whole history to load before
+* rendering the timeline, showing "Loading operations…" and a running count
+* in the meantime.
+*
+* Also accepts the deprecated `globalOperations`/`localOperations` pair
+* (see `RevisionHistoryLegacyProps`), toggling between them internally.
+*/
+function RevisionHistory(props) {
+	return "globalOperations" in props ? /* @__PURE__ */ jsx(LegacyRevisionHistory, { ...props }) : /* @__PURE__ */ jsx(ScopedRevisionHistory, { ...props });
+}
 //#endregion
 //#region src/connect/components/search-bar/filter-item.tsx
 const FilterItem = (props) => {