@powerhousedao/design-system 6.2.3-dev.2 → 6.2.3-dev.21

package/dist/connect/index.js

@@ -2617,10 +2617,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 +2660,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
@@ -4941,8 +4961,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);
@@ -8060,6 +8086,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]
@@ -8633,20 +8667,20 @@ 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;
 	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: scopes.map((scope) => ({
+			displayValue: labelFor(scope),
+			value: scope
+		})),
 		menuClassName: "min-w-0 text-muted-foreground",
 		onChange,
 		value
@@ -8655,7 +8689,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 +8718,7 @@ function Header(props) {
 				/* @__PURE__ */ jsx(Branch, {}),
 				/* @__PURE__ */ jsx(Scope, {
 					onChange: onChangeScope,
+					scopes,
 					value: scope
 				})
 			]
@@ -9049,90 +9084,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 = 24 - ROW_INSET;
+/**
+* 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 +9207,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) => {