@powerhousedao/design-system 6.2.3-dev.61 → 6.2.3-dev.63

package/dist/revision-history.impl-uogo6xDI.js

@@ -0,0 +1,638 @@
+import { n as usePagination, u as Pagination } from "./src-B2s8MAp7.js";
+import { t as Icon } from "./icon-CR_tC1gc.js";
+import { i as ENSAvatar, n as useEns, r as FormattedJsonViewer, t as formatEthAddress } from "./address-DsZy0bjk.js";
+import { ConnectSelect, ConnectTooltipProvider } from "./connect/index.js";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Anchor, Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
+import { format } from "date-fns";
+import { useCopyToClipboard } from "usehooks-ts";
+import { funnel } from "remeda";
+import { garbageCollect, sortOperations } from "@powerhousedao/shared/document-model";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#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() {
+		const jsonState = JSON.stringify(documentState, null, 2);
+		copy(jsonState).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 labelFor(scope) {
+	return `${scope.charAt(0).toUpperCase()}${scope.slice(1)} scope`;
+}
+function Scope(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,
+		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, scopes, 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,
+					scopes,
+					value: scope
+				})
+			]
+		})]
+	});
+}
+//#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, {
+		open: isOpen,
+		onOpenChange: (changedIsOpen) => changedIsOpen ? open() : close(),
+		children: [
+			/* @__PURE__ */ jsx(Trigger, {
+				onMouseEnter: open,
+				children: trigger
+			}),
+			!!anchor && /* @__PURE__ */ jsx(Anchor, {
+				asChild: true,
+				children: anchor
+			}),
+			/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
+				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'");
+	const longDate = format(date, "eee, dd MMM yyyy HH:mm:ss 'UTC'");
+	return /* @__PURE__ */ jsx(CodePopover, {
+		content: /* @__PURE__ */ jsx(FormattedJsonViewer, { value: {
+			timestampFormatted: longDate,
+			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
+/** 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 { operations, maxHeight = "70vh" } = props;
+	const rows = useMemo(() => makeRows([...operations]), [operations]);
+	const parentRef = useRef(null);
+	const rowVirtualizer = useVirtualizer({
+		count: rows.length,
+		getScrollElement: () => parentRef.current,
+		estimateSize: (i) => rows[i]?.height ?? 0,
+		gap: 8,
+		overscan: 8
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": "revision-timeline",
+		ref: parentRef,
+		style: {
+			maxHeight,
+			overflowY: "auto",
+			width: "100%",
+			position: "relative"
+		},
+		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.impl.tsx
+/** 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);
+	}, [
+		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(nextScope) {
+		goToFirstPage();
+		onScopeChange(nextScope);
+	}
+	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" });
+	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,
+			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__ */ 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, { 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
+export { RevisionHistory };
+
+//# sourceMappingURL=revision-history.impl-uogo6xDI.js.map