@powerhousedao/design-system 6.0.2-staging.8 → 6.1.0-dev.0

package/dist/connect/index.js

@@ -1,22 +1,22 @@
-import { i as ConnectTooltipProvider, r as ConnectTooltip, t as DocumentTimeline } from "../document-timeline-BTTeXWMa.js";
-import { C as DropdownMenuTrigger, b as DropdownMenuContent, c as SidebarFooter, d as Pagination, f as mergeClassNameProps, g as getDimensions, h as Icon, l as SidebarHeader, m as Modal, p as PackageAnimation, r as usePagination, s as Sidebar, t as cn, u as SidebarPanel, w as PowerhouseButton, x as DropdownMenuItem, y as DropdownMenu } from "../src-DTHkTkyy.js";
+import { C as DropdownMenuTrigger, b as DropdownMenuContent, c as SidebarFooter, d as Pagination, f as mergeClassNameProps, g as getDimensions, h as Icon, l as SidebarHeader, m as Modal, p as PackageAnimation, r as usePagination, s as Sidebar, t as cn, u as SidebarPanel, w as PowerhouseButton, x as DropdownMenuItem, y as DropdownMenu } from "../src-BgCjYazJ.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/components/popover/popover.js";
 import { SelectFieldRaw } from "../ui/components/select-field/select-field.js";
 import { Input } from "../ui/components/input/input.js";
 import { JsonViewer } from "../ui/components/json-viewer/json-viewer.js";
 import { SearchAutocomplete } from "../ui/components/search-autocomplete/search-autocomplete.js";
-import React, { Fragment, Suspense, createElement, forwardRef, lazy, memo, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import React, { Fragment, createElement, forwardRef, memo, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { twJoin, twMerge } from "tailwind-merge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Content, Portal, Provider, Root, Trigger } from "@radix-ui/react-tooltip";
 import { Controller, useForm } from "react-hook-form";
-import { Anchor, Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
-import { format } from "date-fns";
+import { Anchor, Content as Content$1, Portal as Portal$1, Root as Root$1, Trigger as Trigger$1 } from "@radix-ui/react-popover";
+import { format, formatDistanceToNow, parseISO } from "date-fns";
 import { useCopyToClipboard, useDebounceValue, useEventListener, useOnClickOutside } from "usehooks-ts";
-import { SyncOperationStatus, addFolder, getSyncStatusSync, setSelectedDrive, setSelectedNode, setSelectedTimelineItem, showDeleteNodeModal, showPHModal, showRevisionHistory, useDocumentById, useDownloadDocument, useDragNode, useDropFile, useDropNode, useGetSwitchboardLink, useIsDragAndDropEnabled, useNodeActions, useNodeParentFolderById, useOnDropFile, useSelectedDocumentSafe, useSelectedDriveId, useSelectedDriveSafe, useSelectedNodePath, useUserPermissions } from "@powerhousedao/reactor-browser";
+import { SyncOperationStatus, addFolder, getSyncStatusSync, setSelectedDrive, setSelectedNode, showDeleteNodeModal, showPHModal, showRevisionHistory, useDocumentById, useDownloadDocument, useDragNode, useDropFile, useDropNode, useGetSwitchboardLink, useIsDragAndDropEnabled, useNodeActions, useNodeById, useNodeParentFolderById, useOnDropFile, useSelectedDocumentSafe, useSelectedDriveId, useSelectedDriveSafe, useSelectedNodePath, useUserPermissions } from "@powerhousedao/reactor-browser";
 import Select, { components } from "react-select";
-import { Content as Content$1, List, Root as Root$1, Trigger as Trigger$1 } from "@radix-ui/react-tabs";
+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 { addProp, entries, funnel, isStrictEqual, isString, map, pipe } from "remeda";
 import { JsonView } from "@uiw/react-json-view";
 import { isValidName } from "@powerhousedao/shared/document-drive";
 import { capitalCase } from "change-case";
@@ -74,6 +74,9 @@ function NodeInput(props) {
 	const { onSubmit, onCancel, defaultValue, className, minLength = 1, ...inputProps } = props;
 	const [value, setValue] = useState(defaultValue ?? "");
 	const ref = useRef(null);
+	function handleSubmit() {
+		if (value.length >= minLength) onSubmit(value);
+	}
 	useOnClickOutside(ref, handleSubmit);
 	useEventListener("keyup", (e) => {
 		if (e.key === "Enter") handleSubmit();
@@ -86,9 +89,6 @@ function NodeInput(props) {
 			ref.current?.scroll({ left: 9999 });
 		}, 100);
 	}, []);
-	function handleSubmit() {
-		if (value.length >= minLength) onSubmit(value);
-	}
 	return /* @__PURE__ */ jsx("input", {
 		...inputProps,
 		autoFocus: true,
@@ -397,7 +397,7 @@ function ConnectConfirmationModal(props) {
 		},
 		...restProps,
 		children: /* @__PURE__ */ jsxs("div", {
-			...mergeClassNameProps(containerProps, "w-[400px] p-6 text-slate-300"),
+			...mergeClassNameProps(containerProps, "w-[400px] bg-white p-6 text-slate-300"),
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					...mergeClassNameProps(headerProps, "border-b border-slate-50 pb-2 text-2xl font-bold text-gray-800"),
@@ -437,7 +437,7 @@ function TreeItem({ label, depth, expanded, selected, hasChildren, icon, onToggl
 		onClick,
 		children: [
 			hasChildren ? /* @__PURE__ */ jsx("button", {
-				className: "flex h-4 w-4 shrink-0 items-center justify-center text-gray-500 hover:text-gray-700",
+				className: "flex size-4 shrink-0 items-center justify-center text-gray-500 hover:text-gray-700",
 				onClick: handleChevronClick,
 				type: "button",
 				children: /* @__PURE__ */ jsx(Icon, {
@@ -454,7 +454,7 @@ function TreeItem({ label, depth, expanded, selected, hasChildren, icon, onToggl
 				className: "min-w-0 flex-1 truncate text-gray-700",
 				children: label
 			}),
-			selected && /* @__PURE__ */ jsx("span", { className: "ml-auto h-2 w-2 shrink-0 rounded-full bg-blue-500" })
+			selected && /* @__PURE__ */ jsx("span", { className: "ml-auto size-2 shrink-0 rounded-full bg-blue-500" })
 		]
 	}), expanded && children] });
 }
@@ -604,7 +604,7 @@ function ItemContainer(props) {
 		className: twMerge(disabled ? "cursor-not-allowed text-gray-500" : "text-gray-800", "flex size-full cursor-pointer items-center gap-2 bg-inherit py-3 pl-3 text-start outline-none", className),
 		onClick: onItemClick,
 		children: [icon, /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-			className: "capitalize text-inherit",
+			className: "text-inherit capitalize",
 			children: displayValue ?? value.toLowerCase()
 		}), /* @__PURE__ */ jsx("p", {
 			className: "text-xs text-gray-600",
@@ -727,13 +727,13 @@ function FilterClauseComponent({ clause, columns, onUpdate, onRemove, showConnec
 				onChange: handleOperatorChange
 			}),
 			showValueInput && /* @__PURE__ */ jsx("input", {
-				className: "min-w-[150px] rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-900",
+				className: "min-w-[150px] rounded-sm border border-gray-300 bg-white px-2 py-1 text-xs text-gray-900",
 				type: inputType,
 				value: clause.value,
 				onChange: (e) => handleValueChange(e.target.value)
 			}),
 			/* @__PURE__ */ jsx("button", {
-				className: "flex items-center justify-center rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700",
+				className: "flex items-center justify-center rounded-sm p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700",
 				onClick: onRemove,
 				title: "Remove filter",
 				type: "button",
@@ -813,12 +813,12 @@ function FilterBar({ columns, filters, onFiltersChange }) {
 					}),
 					/* @__PURE__ */ jsx("span", { children: "Filters" }),
 					hasFilters && /* @__PURE__ */ jsx("span", {
-						className: "rounded bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700",
+						className: "rounded-sm bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700",
 						children: filters.clauses.length
 					})
 				]
 			}), /* @__PURE__ */ jsxs("button", {
-				className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-100",
+				className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-100",
 				onClick: handleAddFilter,
 				type: "button",
 				children: [/* @__PURE__ */ jsx(Icon, {
@@ -943,7 +943,7 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 						className: "text-gray-600",
 						children: loading ? "Loading..." : total !== null ? `Showing ${startItem.toLocaleString()}-${endItem.toLocaleString()} of ${total.toLocaleString()}` : `Showing ${rows.length.toLocaleString()} rows`
 					}), rows.length > 0 && /* @__PURE__ */ jsxs("button", {
-						className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
+						className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
 						disabled: loading || copying,
 						onClick: handleCopyAll,
 						title: "Copy all rows as CSV",
@@ -957,14 +957,14 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 					className: "flex gap-1",
 					children: [
 						/* @__PURE__ */ jsx("button", {
-							className: "rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
+							className: "rounded-sm border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
 							disabled: currentPage === 0,
 							onClick: () => goToPage(0),
 							type: "button",
 							children: "First"
 						}),
 						/* @__PURE__ */ jsx("button", {
-							className: "rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
+							className: "rounded-sm border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
 							disabled: currentPage === 0,
 							onClick: () => goToPage(currentPage - 1),
 							type: "button",
@@ -979,7 +979,7 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 							children: "..."
 						}),
 						visiblePages.map((page) => /* @__PURE__ */ jsx("button", {
-							className: twMerge("min-w-8 rounded border px-2 py-1 text-xs", page === currentPage ? "border-blue-500 bg-blue-50 text-blue-700" : "border-gray-300 bg-white text-gray-700 hover:bg-gray-100"),
+							className: twMerge("min-w-8 rounded-sm border px-2 py-1 text-xs", page === currentPage ? "border-blue-500 bg-blue-50 text-blue-700" : "border-gray-300 bg-white text-gray-700 hover:bg-gray-100"),
 							onClick: () => goToPage(page),
 							type: "button",
 							children: page + 1
@@ -989,7 +989,7 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 							children: "..."
 						}),
 						/* @__PURE__ */ jsx("button", {
-							className: "rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
+							className: "rounded-sm border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
 							disabled: currentPage >= totalPages - 1,
 							onClick: () => goToPage(currentPage + 1),
 							type: "button",
@@ -1000,7 +1000,7 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 							})
 						}),
 						/* @__PURE__ */ jsx("button", {
-							className: "rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
+							className: "rounded-sm border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
 							disabled: currentPage >= totalPages - 1,
 							onClick: () => goToPage(totalPages - 1),
 							type: "button",
@@ -1016,7 +1016,7 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 					children: [/* @__PURE__ */ jsx("thead", {
 						className: "sticky top-0 bg-gray-100",
 						children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
-							className: "w-12 px-2 py-2 text-center text-xs font-medium text-gray-600",
+							className: "w-12 p-2 text-center text-xs font-medium text-gray-600",
 							children: /* @__PURE__ */ jsx("span", {
 								className: "sr-only",
 								children: "Copy"
@@ -1046,9 +1046,9 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 					}) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsxs("tr", {
 						className: "odd:bg-white even:bg-gray-50 hover:bg-blue-50",
 						children: [/* @__PURE__ */ jsx("td", {
-							className: "px-2 py-2 text-center",
+							className: "p-2 text-center",
 							children: /* @__PURE__ */ jsx("button", {
-								className: "flex items-center justify-center rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700",
+								className: "flex items-center justify-center rounded-sm p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700",
 								onClick: () => void handleCopyRow(rowIndex),
 								title: "Copy row as CSV",
 								type: "button",
@@ -1060,7 +1060,7 @@ function TableView({ columns, rows, pagination, onPageChange, onSort, currentSor
 						}), columns.map((column, colIndex) => /* @__PURE__ */ jsx("td", {
 							className: twMerge("px-3 py-2 text-xs text-gray-900", colIndex > 0 && "border-l border-gray-300"),
 							children: /* @__PURE__ */ jsx("span", {
-								className: twMerge("block truncate", row[column.name] === null && "italic text-gray-400"),
+								className: twMerge("block truncate", row[column.name] === null && "text-gray-400 italic"),
 								title: formatCellValue(row[column.name]),
 								children: formatCellValue(row[column.name])
 							})
@@ -1278,13 +1278,13 @@ function DBExplorer({ schema, getTables, getTableRows, getDefaultSort, pageSize
 					className: "flex shrink-0 flex-col gap-2 border-t border-gray-200 p-2",
 					children: [
 						onImportDb && /* @__PURE__ */ jsx("button", {
-							className: "rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
+							className: "rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
 							onClick: handleImportClick,
 							type: "button",
 							children: "Import DB"
 						}),
 						onExportDb && /* @__PURE__ */ jsx("button", {
-							className: "rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
+							className: "rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
 							onClick: handleExportClick,
 							type: "button",
 							children: "Export DB"
@@ -1298,7 +1298,7 @@ function DBExplorer({ schema, getTables, getTableRows, getDefaultSort, pageSize
 									children: pgVersionControl.currentPgVersion === null ? "—" : `PG${pgVersionControl.currentPgVersion}`
 								})]
 							}), resetTargetMajor !== null && /* @__PURE__ */ jsx("button", {
-								className: "rounded border border-red-300 bg-red-50 px-3 py-1.5 text-sm text-red-700 hover:bg-red-100 disabled:opacity-50",
+								className: "rounded-sm border border-red-300 bg-red-50 px-3 py-1.5 text-sm text-red-700 hover:bg-red-100 disabled:opacity-50",
 								onClick: () => setPendingResetMajor(resetTargetMajor),
 								disabled: resetting,
 								type: "button",
@@ -1372,7 +1372,7 @@ function DebugInspector({ supportedPgVersions, currentPgVersion, onResetToPgVers
 					children: "Kill the reactor, delete the local IndexedDB, initialize a fresh Postgres cluster at the chosen major version, then reload. Useful for testing version-detection and migration flows."
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "mt-2 inline-flex items-center gap-2 rounded bg-gray-100 px-3 py-1 text-sm",
+					className: "mt-2 inline-flex items-center gap-2 rounded-sm bg-gray-100 px-3 py-1 text-sm",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-gray-600",
 						children: "Current version:"
@@ -1389,13 +1389,13 @@ function DebugInspector({ supportedPgVersions, currentPgVersion, onResetToPgVers
 						type: "button",
 						disabled: running,
 						onClick: () => setConfirmMajor(major),
-						className: "flex items-center gap-1 rounded border border-red-300 bg-red-50 px-3 py-1.5 text-sm text-red-700 hover:bg-red-100 disabled:opacity-50",
+						className: "flex items-center gap-1 rounded-sm border border-red-300 bg-red-50 px-3 py-1.5 text-sm text-red-700 hover:bg-red-100 disabled:opacity-50",
 						children: pendingMajor === major && running ? `Resetting to PG${major}…` : `Reset to PG${major}`
 					}, major);
 				})
 			}),
 			confirmMajor !== null && /* @__PURE__ */ jsxs("div", {
-				className: "flex shrink-0 items-center gap-3 rounded border border-yellow-400 bg-yellow-50 px-3 py-2",
+				className: "flex shrink-0 items-center gap-3 rounded-sm border border-yellow-400 bg-yellow-50 px-3 py-2",
 				children: [
 					/* @__PURE__ */ jsxs("span", {
 						className: "text-sm text-yellow-900",
@@ -1408,19 +1408,19 @@ function DebugInspector({ supportedPgVersions, currentPgVersion, onResetToPgVers
 					/* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick: () => handleReset(confirmMajor),
-						className: "rounded bg-yellow-600 px-3 py-1 text-sm text-white hover:bg-yellow-700",
+						className: "rounded-sm bg-yellow-600 px-3 py-1 text-sm text-white hover:bg-yellow-700",
 						children: ["Confirm reset to PG", confirmMajor]
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => setConfirmMajor(null),
-						className: "rounded border border-gray-300 bg-white px-3 py-1 text-sm text-gray-600 hover:bg-gray-50",
+						className: "rounded-sm border border-gray-300 bg-white px-3 py-1 text-sm text-gray-600 hover:bg-gray-50",
 						children: "Cancel"
 					})
 				]
 			}),
 			error && /* @__PURE__ */ jsx("div", {
-				className: "rounded border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-800",
+				className: "rounded-sm border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-800",
 				children: error
 			})
 		]
@@ -1485,7 +1485,7 @@ function TabContent(props) {
 //#endregion
 //#region src/connect/components/tabs/tabs.tsx
 function Tabs({ children, defaultValue }) {
-	return /* @__PURE__ */ jsxs(Root$1, {
+	return /* @__PURE__ */ jsxs(Root$2, {
 		defaultValue,
 		className: "flex min-h-0 flex-1 flex-col gap-2",
 		children: [/* @__PURE__ */ jsx("div", {
@@ -1495,8 +1495,8 @@ function Tabs({ children, defaultValue }) {
 				children: React.Children.map(children, (child, i) => {
 					if (!/* @__PURE__ */ React.isValidElement(child)) return;
 					const { label, disabled } = child.props;
-					return /* @__PURE__ */ jsx(Trigger$1, {
-						className: "data-[state='active']:tab-shadow ata-disabled:cursor-not-allowed data-disabled:text-gray-400 flex h-7 flex-1 items-center justify-center rounded-lg transition duration-300 data-[state='active']:bg-gray-50 data-[state='active']:text-gray-900",
+					return /* @__PURE__ */ jsx(Trigger$2, {
+						className: "flex h-7 flex-1 items-center justify-center rounded-lg transition duration-300 data-disabled:cursor-not-allowed data-disabled:text-gray-400 data-[state='active']:bg-gray-50 data-[state='active']:text-gray-900",
 						value: label,
 						disabled: disabled ?? false,
 						children: label
@@ -1508,7 +1508,7 @@ function Tabs({ children, defaultValue }) {
 			children: React.Children.map(children, (child, i) => {
 				if (!/* @__PURE__ */ React.isValidElement(child)) return;
 				const { label } = child.props;
-				return /* @__PURE__ */ jsx(Content$1, {
+				return /* @__PURE__ */ jsx(Content$2, {
 					className: "h-full",
 					value: label,
 					children: child
@@ -1543,204 +1543,743 @@ function DocumentStateViewer({ state, ignoredScopes = ["auth", "document"], defa
 	});
 }
 //#endregion
-//#region src/connect/components/document-toolbar/utils/use-document-undo-redo.ts
-function useDocumentUndoRedo(documentId) {
-	const [document, dispatch] = useDocumentById(documentId);
-	const globalRevisionNumber = document?.header.revision.global ?? 0;
-	const localRevisionNumber = document?.header.revision.local ?? 0;
-	const canUndo = globalRevisionNumber > 0 || localRevisionNumber > 0;
-	const canRedo = !!document?.clipboard.length;
-	const handleUndo = () => {
-		dispatch(undo());
+//#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-gray-200 bg-white p-2 text-xs 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-gray-300",
+				children: subtitle
+			}),
+			!!timestamp && /* @__PURE__ */ jsx("div", { children: formatTimestamp(timestamp) })
+		]
+	});
+	const handleMouseEnter = () => {
+		if (hasContent) setOpen(true);
 	};
-	const handleRedo = () => {
-		dispatch(redo());
+	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-gray-900 text-white",
+			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:bg-blue-300", isSelected && "bg-blue-300", className),
+				onClick,
+				"data-title": title,
+				"data-subtitle": subtitle,
+				"data-timestamp": timestamp,
+				children: /* @__PURE__ */ jsx("div", { className: "h-0.5 w-1 rounded-full bg-gray-500" })
+			})
+		})]
+	});
+};
+//#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-green-900",
+				children: `${additions} additions +`
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-red-700",
+				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:bg-blue-300", className),
+			"data-timestamp": timestamp,
+			onClick,
+			children: /* @__PURE__ */ jsx("div", { className: "size-[3px] rounded-full bg-gray-500" })
+		}) : /* @__PURE__ */ jsx(ConnectTooltip, {
+			className: "rounded-md bg-gray-900 text-white",
+			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:bg-blue-300", className, isSelected && "bg-blue-300"),
+				"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-green-600", 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-red-600", 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-white",
+					children: /* @__PURE__ */ jsx("div", { className: "mt-[11px] h-[6px] w-[6px] rounded-tl-md bg-slate-50" })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute top-[11px] right-0 z-20 h-[6px] w-[6px] bg-white",
+					children: /* @__PURE__ */ jsx("div", { className: "h-[6px] w-[6px] rounded-tr-md bg-slate-50" })
+				}),
+				/* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-[25px] rounded-md bg-slate-50" }),
+				/* @__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-blue-200",
+								children: selectedContent
+							})]
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 z-10 h-[25px] w-2 rounded-l-md bg-slate-50" }),
+				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute right-0 bottom-0 z-10 h-[25px] w-2 rounded-r-md bg-slate-50" })
+			]
+		})
+	});
+};
+//#endregion
+//#region src/connect/components/document-toolbar/containers.tsx
+/**
+* Default outer container for `DocumentToolbar`.
+*
+* This component provides the toolbar's base layout and visual styling while
+* still accepting standard `div` props. Pass a custom container to
+* `DocumentToolbar` when you need to replace this wrapper.
+*/
+function ToolbarContainer(props) {
+	const { children, className, ...rest } = props;
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: twMerge("flex h-12 w-full items-center justify-between rounded-xl border border-gray-200 bg-slate-50 px-4", className),
+		children
+	});
+}
+/**
+* Default container for a group of toolbar controls.
+*
+* `DocumentToolbar` renders one controls container per toolbar slot. This
+* component provides the default horizontal layout for the controls in that
+* slot while still accepting standard `div` props.
+*/
+function ToolbarControlsContainer(props) {
+	const { children, className, ...rest } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: twMerge("flex items-center gap-x-2", className),
+		...rest,
+		children
+	});
+}
+//#endregion
+//#region src/connect/components/document-toolbar/use-document-undo-redo.ts
+/**
+* Checks whether a document has at least one non-zero revision count.
+*
+* Revision scopes are dynamic document-model keys, so this checks the values of
+* the document's revision object instead of relying on a fixed list of scope
+* names.
+*/
+function hasRevisions(document) {
+	return pipe(prop(document, "header", "revision"), defaultTo({}), values(), filter(isTruthy), hasAtLeast(1));
+}
+/**
+* Returns undo state and an undo dispatcher for a document.
+*
+* `canUndo` is true when the document has at least one non-zero revision count
+* across any revision scope.
+*/
+function useUndo(documentId) {
+	const [document, dispatch] = useDocumentById(documentId);
+	return {
+		canUndo: hasRevisions(document),
+		undo: () => dispatch(undo())
+	};
+}
+/**
+* Returns redo state and a redo dispatcher for a document.
+*
+* `canRedo` is true when the document clipboard contains at least one operation
+* that can be reapplied.
+*/
+function useRedo(documentId) {
+	const [document, dispatch] = useDocumentById(documentId);
 	return {
-		undo: handleUndo,
-		redo: handleRedo,
-		canUndo,
-		canRedo
+		canRedo: hasAtLeast(document?.clipboard ?? [], 1),
+		redo: () => dispatch(redo())
 	};
 }
 //#endregion
-//#region src/connect/components/document-toolbar/document-toolbar.tsx
-const DocumentTimeline$1 = /* @__PURE__ */ lazy(() => import("../document-timeline-BTTeXWMa.js").then((n) => n.n).then((m) => ({ default: m.DocumentTimeline })));
-function useDocumentTimeline(documentId) {
-	return [];
+//#region src/connect/components/document-toolbar/toolbar-button.tsx
+/**
+* Base button component used by the built-in toolbar controls.
+*
+* This component provides the default toolbar button styling and disabled-state
+* behavior while accepting standard `button` props.
+*/
+function ToolbarButton(props) {
+	const { className, children, disabled, ...rest } = props;
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		disabled,
+		className: twMerge("grid size-fit place-items-center rounded-lg border border-gray-200 bg-white p-1 text-gray-900", disabled ? "cursor-not-allowed text-gray-500" : "cursor-pointer active:opacity-70", className),
+		children
+	});
 }
-const DocumentToolbar = (props) => {
-	const { onClose, children, onDownloadDocument, className, document: _document, onSwitchboardLinkClick, enabledControls = [
-		"undo",
-		"redo",
-		"export",
-		"history"
-	], defaultTimelineVisible = true, disableRevisionHistory = false, initialTimelineVisible = false, ...containerProps } = props;
-	const [selectedDocument] = useSelectedDocumentSafe();
-	const document = _document ?? selectedDocument;
-	const { onRenameNode, onRenameDriveNodes } = useNodeActions();
-	const documentName = document?.header.name || void 0;
-	const [isEditingName, setIsEditingName] = useState(false);
-	const parentFolder = useNodeParentFolderById(document?.header.id);
-	const handleClose = onClose ?? (() => setSelectedNode(parentFolder));
-	const documentUndoRedo = useDocumentUndoRedo(document?.header.id);
-	const isUndoDisabled = !documentUndoRedo.canUndo;
-	const isRedoDisabled = !documentUndoRedo.canRedo;
-	const defaultDownloadDocument = useDownloadDocument(document?.header.id);
-	const timelineItemsData = useDocumentTimeline(document?.header.id);
-	const [showTimeline, setShowTimeline] = useState(initialTimelineVisible);
+/**
+* Toolbar control for undoing the latest document revision.
+*
+* The button is disabled when there are no revisions available to undo.
+* Provide `children` to replace the default icon, or `onClick` to override the
+* default undo behavior.
+*/
+function ToolbarUndoButton(props) {
+	const { className, onClick: onClickOverride, document, children = /* @__PURE__ */ jsx(Icon, {
+		name: "ArrowCouterclockwise",
+		size: 16
+	}) } = props;
+	const { undo, canUndo } = useUndo(document?.header.id);
+	const disabled = !canUndo;
+	const onClick = makeOnClick(document, onClickOverride, undo);
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		"data-testid": "toolbar-undo-button",
+		"aria-label": "Undo",
+		className,
+		disabled,
+		onClick,
+		children
+	});
+}
+/**
+* Toolbar control for redoing the latest undone document revision.
+*
+* The button is disabled when there are no revisions available to redo.
+* Provide `children` to replace the default icon, or `onClick` to override the
+* default redo behavior.
+*/
+function ToolbarRedoButton(props) {
+	const { className, onClick: onClickOverride, document, children = /* @__PURE__ */ jsx(Icon, {
+		name: "ArrowCouterclockwise",
+		className: "-scale-x-100",
+		size: 16
+	}) } = 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,
+		onClick,
+		children
+	});
+}
+/**
+* Toolbar control for downloading the current document.
+*
+* Provide `children` to replace the default label, or `onClick` to override the
+* default download behavior.
+*/
+function ToolbarDownloadButton(props) {
+	const { className, onClick: onClickOverride, document, children = /* @__PURE__ */ jsx("span", {
+		className: "px-1 text-xs",
+		children: "Download"
+	}) } = props;
+	const onClick = makeOnClick(document, onClickOverride, useDownloadDocument(document?.header.id));
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		"data-testid": "toolbar-download-button",
+		"aria-label": "Download",
+		className,
+		onClick,
+		children
+	});
+}
+/**
+* Toolbar control for opening the current document in Switchboard.
+*
+* Provide `children` to replace the default icon, or `onClick` to override the
+* default behavior.
+*/
+function ToolbarSwitchboardButton(props) {
+	const { className, onClick: onClickOverride, document, children = /* @__PURE__ */ jsx(Icon, {
+		name: "Drive",
+		size: 16
+	}) } = props;
 	const getSwitchboardLink = useGetSwitchboardLink(document);
-	function handleDownloadDocument() {
-		if (!document) return;
-		(onDownloadDocument ?? defaultDownloadDocument)(document);
-	}
-	const handleDefaultSwitchboardClick = async () => {
-		if (getSwitchboardLink) try {
-			const url = await getSwitchboardLink();
-			window.open(url, "_blank");
-		} catch (error) {
-			console.error("Error opening switchboard link:", error);
-		}
+	const onClick = makeOnClick(document, onClickOverride, () => {
+		getSwitchboardLink?.().then((url) => window.open(url, "_blank")).catch((error) => console.error("Error opening switchboard link:", error));
+	});
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		"data-testid": "toolbar-switchboard-button",
+		"aria-label": "Open link in Switchboard",
+		className,
+		onClick,
+		children
+	});
+}
+/**
+* Toolbar control for showing the current document's revision history.
+*
+* Provide `children` to replace the default icon, or `onClick` to override the
+* default revision-history behavior.
+*/
+function ToolbarHistoryButton(props) {
+	const { className, onClick: onClickOverride, document, children = /* @__PURE__ */ jsx(Icon, {
+		name: "History",
+		size: 16
+	}) } = props;
+	const onClick = makeOnClick(document, onClickOverride, showRevisionHistory);
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		"data-testid": "toolbar-history-button",
+		"aria-label": "Open document revision history",
+		className,
+		onClick,
+		children
+	});
+}
+/**
+* Toolbar control for closing the current document view.
+*
+* By default, this selects the current document's parent folder. Provide
+* `children` to replace the default icon, or `onClick` to override the default
+* close behavior.
+*/
+function ToolbarCloseButton(props) {
+	const { className, onClick: onClickOverride, document, children = /* @__PURE__ */ jsx(Icon, {
+		name: "XmarkLight",
+		size: 16
+	}) } = props;
+	const parentFolder = useNodeParentFolderById(document?.header.id);
+	const onClick = makeOnClick(document, onClickOverride, () => setSelectedNode(parentFolder));
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		"data-testid": "toolbar-close-button",
+		"aria-label": "Close document",
+		className,
+		onClick,
+		children
+	});
+}
+/**
+* Creates a toolbar button click handler.
+*
+* If an override is provided, it is called with the current document. Otherwise,
+* the built-in handler is called with the current document.
+*/
+function makeOnClick(document, onClickOverride, defaultOnClick) {
+	if (isDefined(onClickOverride)) return () => onClickOverride(document);
+	return () => defaultOnClick(document);
+}
+//#endregion
+//#region src/connect/components/document-toolbar/toolbar-input.tsx
+/**
+* Text input styled for use inside a toolbar.
+*
+* This wraps `NodeInput` with toolbar-specific text styling. Use it for inline
+* toolbar editing flows where the user can submit a value or cancel editing.
+*/
+function ToolbarInput(props) {
+	const { defaultValue, className, onSubmit, onCancel, "aria-label": ariaLabel } = props;
+	return /* @__PURE__ */ jsx(NodeInput, {
+		defaultValue,
+		className: twMerge("text-center text-sm font-medium text-gray-500", className),
+		"aria-label": ariaLabel,
+		onCancel,
+		onSubmit
+	});
+}
+//#endregion
+//#region src/connect/components/document-toolbar/toolbar-name.tsx
+/**
+* Toolbar control for displaying and renaming the current document.
+*
+* By default, the component renders the document name as a clickable heading.
+* When clicked, it switches to an inline input. Submitting the input renames
+* both the node and the corresponding drive node entry.
+*/
+function ToolbarName(props) {
+	const { document, inputClassName, titleClassName } = props;
+	const [isEditing, setIsEditing] = useState(false);
+	const node = useNodeById(document?.header.id);
+	const { onRenameNode, onRenameDriveNodes } = useNodeActions();
+	const documentName = document?.header.name;
+	const documentId = document?.header.id;
+	const activateEditing = () => setIsEditing(true);
+	const cancelEditing = () => setIsEditing(false);
+	const onSubmit = (newName) => {
+		cancelEditing();
+		if (!documentId || !node) return;
+		Promise.all([onRenameNode(newName, node), onRenameDriveNodes(newName, documentId)]).catch(console.error);
 	};
-	const resolvedSwitchboardHandler = onSwitchboardLinkClick ?? (getSwitchboardLink ? handleDefaultSwitchboardClick : void 0);
-	const isDownloadDisabled = !document;
-	const isSwitchboardLinkDisabled = !resolvedSwitchboardHandler;
-	const isTimelineDisabled = timelineItemsData.length === 0;
-	useEffect(() => {
-		if (typeof initialTimelineVisible === "boolean") setShowTimeline(initialTimelineVisible);
-	}, [initialTimelineVisible]);
-	const handleTimelineToggle = () => {
-		if (isTimelineDisabled) return;
-		setShowTimeline(!showTimeline);
+	if (!documentName) return null;
+	if (isEditing) return /* @__PURE__ */ jsx(ToolbarInput, {
+		className: inputClassName,
+		onSubmit,
+		onCancel: cancelEditing,
+		defaultValue: documentName,
+		"aria-label": "Document name"
+	});
+	return /* @__PURE__ */ jsx("h1", {
+		className: twMerge("cursor-pointer text-sm font-medium text-gray-500 hover:text-gray-700", titleClassName),
+		onClick: activateEditing,
+		title: "Click to edit",
+		children: documentName
+	});
+}
+//#endregion
+//#region src/connect/components/document-toolbar/constants.ts
+/**
+* Default slot layout for the built-in document toolbar controls.
+*
+* The toolbar is divided into three control groups:
+*
+* - `first`: primary document actions.
+* - `second`: document identity/display controls.
+* - `third`: secondary document actions.
+*/
+const defaultControlSlots = {
+	first: [
+		"undo",
+		"redo",
+		"download"
+	],
+	second: ["name"],
+	third: [
+		"history",
+		"switchboard",
+		"close"
+	]
+};
+/**
+* Ordered list of toolbar slot names.
+*/
+const controlSlots = keys(defaultControlSlots);
+/**
+* Ordered list of all built-in document toolbar control names.
+*
+* The order is derived from `defaultControlSlots`.
+*/
+const documentToolbarControls = [
+	...defaultControlSlots.first,
+	...defaultControlSlots.second,
+	...defaultControlSlots.third
+];
+/**
+* Default component implementation for each built-in toolbar control.
+*
+* These components are used unless a matching entry is provided through
+* `componentOverrides`.
+*/
+const defaultControlComponents = {
+	undo: ToolbarUndoButton,
+	redo: ToolbarRedoButton,
+	download: ToolbarDownloadButton,
+	name: ToolbarName,
+	switchboard: ToolbarSwitchboardButton,
+	history: ToolbarHistoryButton,
+	close: ToolbarCloseButton
+};
+//#endregion
+//#region src/connect/components/document-toolbar/utils.tsx
+/**
+* Creates a predicate for checking whether a built-in toolbar control should render.
+*
+* A control renders when it is included in `enabledControls` and absent from
+* `disabledControls`. When `enabledControls` is omitted, all built-in controls
+* are considered enabled. When a control appears in both lists,
+* `disabledControls` takes precedence.
+*/
+function makeIsEnabledChecker(args) {
+	const { enabledControls = documentToolbarControls, disabledControls = [] } = args;
+	return (control) => isIncludedIn(control, enabledControls) && !isIncludedIn(control, disabledControls);
+}
+/**
+* Creates a getter for rendering the built-in toolbar controls in a slot.
+*
+* The returned function resolves the controls assigned to a slot, filters them
+* through the enabled/disabled control lists, applies any component overrides,
+* and renders each control with the current document.
+*/
+function makeToolbarControlsRenderer(args) {
+	const { document, enabledControls, disabledControls, componentOverrides } = args;
+	const checkIsEnabled = makeIsEnabledChecker({
+		enabledControls,
+		disabledControls
+	});
+	const renderComponent = (control) => pipe(prop(componentOverrides, control), defaultTo(prop(defaultControlComponents, control)), (Component) => /* @__PURE__ */ jsx(Component, { document }, control));
+	return (slot) => pipe(prop(defaultControlSlots, slot), filter(checkIsEnabled), map(renderComponent));
+}
+/**
+* Checks whether a custom control should render in the requested position.
+*
+* Controls without an explicit position are treated as `"start"`.
+*/
+function isControlInPosition(control, position) {
+	return defaultTo(control.position, "start") === position;
+}
+/**
+* Creates a getter for rendering custom controls in a slot and position.
+*
+* The returned function resolves the custom control or controls assigned to a
+* slot, then renders only the controls that belong in the requested position.
+*/
+function makeCustomControlsRenderer(args) {
+	const { document, customControls = {} } = args;
+	return (slot, pos) => {
+		const controlOrControlList = prop(customControls, slot);
+		if (!isDefined(controlOrControlList)) return null;
+		if (isArray(controlOrControlList)) return renderCustomControlList(controlOrControlList, pos, document);
+		return renderCustomControl(controlOrControlList, pos, document);
 	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex w-full flex-col",
-		...containerProps,
+}
+/**
+* Renders a single custom control when it belongs in the requested position.
+*/
+function renderCustomControl(control, pos, document) {
+	if (!isControlInPosition(control, pos)) return null;
+	const Component = control.component;
+	return /* @__PURE__ */ jsx(Component, { document });
+}
+/**
+* Renders a list of custom controls for the requested position.
+*
+* Returns `null` when no controls in the list belong in that position.
+*/
+function renderCustomControlList(controls, pos, document) {
+	const controlsInPosition = filter(controls, (control) => isControlInPosition(control, pos));
+	if (!hasAtLeast(controlsInPosition, 1)) return null;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: map(controlsInPosition, ({ component: Component, key }) => /* @__PURE__ */ jsx(Component, { document }, key)) });
+}
+//#endregion
+//#region src/connect/components/document-toolbar/document-toolbar.tsx
+/**
+* Renders a document toolbar.
+*
+* By default, the toolbar renders the built-in document controls grouped into
+* toolbar slots. The controls operate on the provided `document`, or on the
+* currently selected document when no document is provided.
+*
+* Use `enabledControls` and `disabledControls` to control which built-in
+* controls are shown. Use `componentOverrides` to replace individual built-in
+* controls while keeping the default toolbar layout. Use `customControls` to
+* insert additional controls before or after the built-in controls in a slot.
+*
+* To take over the toolbar contents completely, pass `children`.
+*/
+function DocumentToolbar(props) {
+	const [selectedDocument] = useSelectedDocumentSafe();
+	const { toolbarClassName, document = selectedDocument, toolbarContainer: Container = ToolbarContainer } = props;
+	if ("children" in props) return /* @__PURE__ */ jsx(Container, {
+		className: toolbarClassName,
+		children: props.children
+	});
+	return /* @__PURE__ */ jsx(Container, {
+		className: toolbarClassName,
+		children: map(controlSlots, (slot) => /* @__PURE__ */ createElement(ControlsContainerSlot, {
+			...props,
+			document,
+			slot,
+			key: slot
+		}))
+	});
+}
+/**
+* Renders one toolbar controls slot.
+*
+* Custom controls with position `"start"` are rendered before the built-in
+* controls for the slot. Custom controls with position `"end"` are rendered
+* after them.
+*/
+function ControlsContainerSlot(props) {
+	const { slot, document, controlsContainerClassName, enabledControls, disabledControls, componentOverrides, customControls, controlsContainer: ControlsContainer = ToolbarControlsContainer } = props;
+	const renderToolbarControls = makeToolbarControlsRenderer({
+		document,
+		enabledControls,
+		disabledControls,
+		componentOverrides
+	});
+	const renderCustomControls = makeCustomControlsRenderer({
+		document,
+		customControls
+	});
+	return /* @__PURE__ */ jsxs(ControlsContainer, {
+		className: controlsContainerClassName,
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: twMerge("flex h-12 w-full items-center justify-between rounded-xl border border-gray-200 bg-slate-50 px-4", className),
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-x-2",
-						children: [
-							enabledControls.includes("undo") && /* @__PURE__ */ jsx("button", {
-								className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isUndoDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"),
-								onClick: documentUndoRedo.undo,
-								disabled: isUndoDisabled,
-								children: /* @__PURE__ */ jsx(Icon, {
-									name: "ArrowCouterclockwise",
-									size: 16,
-									className: isUndoDisabled ? "text-gray-500" : "text-gray-900"
-								})
-							}),
-							enabledControls.includes("redo") && /* @__PURE__ */ jsx("button", {
-								className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isRedoDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"),
-								onClick: documentUndoRedo.redo,
-								disabled: isRedoDisabled,
-								children: /* @__PURE__ */ jsx("div", {
-									className: "-scale-x-100",
-									children: /* @__PURE__ */ jsx(Icon, {
-										name: "ArrowCouterclockwise",
-										size: 16,
-										className: isRedoDisabled ? "text-gray-500" : "text-gray-900"
-									})
-								})
-							}),
-							enabledControls.includes("export") && /* @__PURE__ */ jsx("button", {
-								className: twMerge("flex h-8 items-center rounded-lg border border-gray-200 bg-white px-3 text-sm", isDownloadDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"),
-								onClick: handleDownloadDocument,
-								disabled: isDownloadDisabled,
-								children: /* @__PURE__ */ jsx("span", {
-									className: isDownloadDisabled ? "text-gray-500" : "text-gray-900",
-									children: "Download"
-								})
-							})
-						]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "flex items-center",
-						children: isEditingName && document ? /* @__PURE__ */ jsx(NodeInput, {
-							defaultValue: documentName,
-							className: "text-center text-sm font-medium text-gray-500",
-							"aria-label": "Document name",
-							onCancel: () => setIsEditingName(false),
-							onSubmit: (newName) => {
-								const node = { id: document.header.id };
-								Promise.all([onRenameNode(newName, node), onRenameDriveNodes(newName, document.header.id)]).then(() => setIsEditingName(false)).catch((error) => {
-									console.error("Failed to rename document:", error);
-									setIsEditingName(false);
-								});
-							}
-						}) : /* @__PURE__ */ jsx("h1", {
-							className: twMerge("text-sm font-medium text-gray-500", document && "cursor-pointer hover:text-gray-700"),
-							onDoubleClick: document ? () => setIsEditingName(true) : void 0,
-							title: document ? "Double-click to edit" : void 0,
-							children: documentName
-						})
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-x-2",
-						children: [
-							!isSwitchboardLinkDisabled && /* @__PURE__ */ jsx("button", {
-								className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", "cursor-pointer active:opacity-70"),
-								onClick: resolvedSwitchboardHandler,
-								disabled: isSwitchboardLinkDisabled,
-								children: /* @__PURE__ */ jsx(Icon, {
-									name: "Drive",
-									size: 16,
-									className: "text-gray-900"
-								})
-							}),
-							enabledControls.includes("history") && /* @__PURE__ */ jsx("button", {
-								className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", disableRevisionHistory ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"),
-								onClick: showRevisionHistory,
-								disabled: disableRevisionHistory,
-								children: /* @__PURE__ */ jsx(Icon, {
-									name: "History",
-									size: 16,
-									className: disableRevisionHistory ? "text-gray-500" : "text-gray-900"
-								})
-							}),
-							enabledControls.includes("timeline") && defaultTimelineVisible && /* @__PURE__ */ jsx("button", {
-								className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isTimelineDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"),
-								onClick: handleTimelineToggle,
-								disabled: isTimelineDisabled,
-								"aria-pressed": showTimeline,
-								children: /* @__PURE__ */ jsx(Icon, {
-									name: "Timeline",
-									size: 16,
-									className: twMerge("text-gray-900", isTimelineDisabled && "opacity-50", showTimeline && "text-blue-600")
-								})
-							}),
-							/* @__PURE__ */ jsx("button", {
-								id: "close-document-button",
-								"aria-label": "Close document",
-								className: "grid size-8 cursor-pointer place-items-center rounded-lg border border-gray-200 bg-white active:opacity-70",
-								onClick: handleClose,
-								children: /* @__PURE__ */ jsx(Icon, {
-									name: "XmarkLight",
-									size: 16,
-									className: "text-gray-900"
-								})
-							})
-						]
-					})
-				]
-			}),
-			showTimeline && /* @__PURE__ */ jsx("div", {
-				className: "mt-2 w-full",
-				children: /* @__PURE__ */ jsx(Suspense, {
-					fallback: null,
-					children: /* @__PURE__ */ jsx(DocumentTimeline$1, {
-						timeline: timelineItemsData,
-						onItemClick: setSelectedTimelineItem
-					})
-				})
-			}),
-			children
+			renderCustomControls(slot, "start"),
+			renderToolbarControls(slot),
+			renderCustomControls(slot, "end")
 		]
 	});
-};
+}
 //#endregion
 //#region src/connect/components/modal/replace-duplicate-modal.tsx
 const buttonStyles$4 = "min-h-[48px] min-w-[142px] text-base font-semibold py-3 px-6 rounded-xl outline-none active:opacity-75 hover:scale-105 transform transition-all";
@@ -1759,7 +2298,7 @@ function ConnectReplaceDuplicateModal(props) {
 		},
 		...restProps,
 		children: /* @__PURE__ */ jsxs("div", {
-			...mergeClassNameProps(containerProps, "w-[450px] p-6 text-slate-300"),
+			...mergeClassNameProps(containerProps, "w-[450px] bg-white p-6 text-slate-300"),
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between border-b border-slate-50 pb-2",
@@ -1798,7 +2337,7 @@ function UploadFileItemErrorDetails(props) {
 	const { status, errorDetails } = props;
 	if (!((status === "failed" || status === "unsupported-document-type") && errorDetails)) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: "break-words text-xs leading-[18px] text-gray-500",
+		className: "text-xs leading-[18px] wrap-break-word text-gray-500",
 		children: errorDetails
 	});
 }
@@ -1824,7 +2363,7 @@ function UploadFileItemHeader(props) {
 		...delegatedProps,
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				className: "flex h-9 w-7 flex-shrink-0 items-center justify-center",
+				className: "flex h-9 w-7 shrink-0 items-center justify-center",
 				children: /* @__PURE__ */ jsx(Icon, {
 					name: getDocumentIcon(documentType),
 					size: 48,
@@ -1834,15 +2373,15 @@ function UploadFileItemHeader(props) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-1 flex-col gap-0.5",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-xs font-medium leading-[18px] text-gray-900",
+					className: "text-xs leading-[18px] font-medium text-gray-900",
 					children: fileName
 				}), /* @__PURE__ */ jsx("div", {
-					className: "text-xs font-medium leading-[18px] text-gray-500",
+					className: "text-xs leading-[18px] font-medium text-gray-500",
 					children: fileSize
 				})]
 			}),
 			onClose && /* @__PURE__ */ jsx("div", {
-				className: "flex h-9 w-[18px] flex-shrink-0 items-start justify-center",
+				className: "flex h-9 w-[18px] shrink-0 items-start justify-center",
 				children: /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: onClose,
@@ -1917,7 +2456,7 @@ function UploadFileItemStatusRow(props) {
 				children: getStatusText(status)
 			}),
 			status === "uploading" && /* @__PURE__ */ jsxs("div", {
-				className: "text-xs font-medium leading-[18px] text-gray-900",
+				className: "text-xs leading-[18px] font-medium text-gray-900",
 				children: [Math.round(progress), "%"]
 			}),
 			shouldShowCTA(status, onOpenDocument, onFindResolution) && /* @__PURE__ */ jsx("button", {
@@ -1935,7 +2474,7 @@ const UploadFileItem = /* @__PURE__ */ forwardRef(function UploadFileItem(props,
 	const { fileName, fileSize, status, documentType, progress = 0, errorDetails, onClose, onOpenDocument, onFindResolution, className, ...delegatedProps } = props;
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: twMerge("flex w-full flex-col gap-0.5 rounded-md border border-gray-100 bg-white p-2 shadow-[0_2px_12px_rgba(37,42,52,0.1)]", className),
+		className: twMerge("flex w-full flex-col gap-0.5 rounded-md border border-gray-100 bg-white p-2 shadow-sidebar", className),
 		...delegatedProps,
 		children: [/* @__PURE__ */ jsx(UploadFileItemHeader, {
 			fileName,
@@ -1976,7 +2515,7 @@ function UploadFileList(props) {
 	const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
 	const computedTitle = useMemo(() => getUploadListTitle(items.length, title), [items.length, title]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: twMerge("w-[358px] rounded-md border border-gray-100 bg-gray-50 p-4 shadow-[1px_4px_15px_rgba(74,88,115,0.25)]", className),
+		className: twMerge("w-89.5 rounded-md border border-gray-100 bg-gray-50 p-4 shadow-charcoal", className),
 		...delegatedProps,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between",
@@ -1985,7 +2524,7 @@ function UploadFileList(props) {
 				"aria-expanded": !isCollapsed,
 				"aria-label": isCollapsed ? "Expand list" : "Collapse list",
 				onClick: () => setIsCollapsed((v) => !v),
-				className: "min-w-0 flex-1 text-left text-sm font-medium leading-4 text-gray-900 hover:opacity-80",
+				className: "min-w-0 flex-1 text-left text-sm/4 font-medium text-gray-900 hover:opacity-80",
 				children: computedTitle
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex shrink-0 items-center gap-4",
@@ -1995,7 +2534,7 @@ function UploadFileList(props) {
 					onClick: () => setIsCollapsed((v) => !v),
 					className: "text-gray-900 hover:opacity-80",
 					children: /* @__PURE__ */ jsx("span", {
-						className: twMerge("inline-block h-4 w-4 select-none transition-transform", isCollapsed ? "-rotate-90" : "rotate-0"),
+						className: twMerge("inline-block size-4 transition-transform select-none", isCollapsed ? "-rotate-90" : "rotate-0"),
 						children: /* @__PURE__ */ jsx(Icon, {
 							name: "CaretDown",
 							size: 16,
@@ -2008,7 +2547,7 @@ function UploadFileList(props) {
 					onClick: onClose,
 					className: "text-gray-900 hover:opacity-80",
 					children: /* @__PURE__ */ jsx("span", {
-						className: "inline-block h-4 w-4 select-none",
+						className: "inline-block size-4 select-none",
 						children: /* @__PURE__ */ jsx(Icon, {
 							name: "XmarkLight",
 							size: 16,
@@ -2018,7 +2557,7 @@ function UploadFileList(props) {
 				})]
 			})]
 		}), !isCollapsed && /* @__PURE__ */ jsx("div", {
-			className: "mt-4 flex max-h-[404px] flex-col gap-4 overflow-y-auto overflow-x-visible px-2 py-2",
+			className: "mt-4 flex max-h-[404px] flex-col gap-4 overflow-x-visible overflow-y-auto p-2",
 			children: items.map((item, idx) => /* @__PURE__ */ jsx(UploadFileItem, { ...item }, `${item.fileName}-${idx}`))
 		})]
 	});
@@ -2083,7 +2622,7 @@ function UploadFileListContainer(props) {
 	const items = mapUploadsToFileItems(uploadsArray, removeUpload, setSelectedNode, onConflictResolution);
 	const handleClose = onClose ?? clearAllUploads;
 	return /* @__PURE__ */ jsx("div", {
-		className: twMerge("fixed bottom-4 right-4 z-[1001]", className),
+		className: twMerge("fixed right-4 bottom-4 z-1001", className),
 		...delegatedProps,
 		children: /* @__PURE__ */ jsx(UploadFileList, {
 			items,
@@ -2340,18 +2879,18 @@ function DropZone(props) {
 		children: [
 			children,
 			enable && isDropTarget && /* @__PURE__ */ jsx("div", {
-				className: "fixed inset-0 z-[1000] flex min-h-screen w-screen items-center justify-center bg-black/50",
+				className: "pointer-events-none fixed inset-0 z-1000 flex min-h-screen w-screen items-center justify-center bg-black/50",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "rounded-[24px] bg-white p-6 shadow-[1px_4px_15px_rgba(74,88,115,0.25)]",
+					className: "rounded-3xl bg-white p-6 shadow-charcoal",
 					children: /* @__PURE__ */ jsxs("div", {
-						className: "relative flex h-[130px] w-[400px] flex-col items-center justify-start overflow-visible rounded-lg border border-dashed border-black px-4 py-6",
+						className: "relative flex h-32.5 w-100 flex-col items-center justify-start overflow-visible rounded-lg border border-dashed border-black px-4 py-6",
 						children: [
 							/* @__PURE__ */ jsx("div", {
-								className: "text-center text-base leading-5 text-zinc-500",
+								className: "text-center text-base/5 text-zinc-500",
 								children: title
 							}),
 							/* @__PURE__ */ jsx("div", {
-								className: "text-center text-base leading-5 text-zinc-500",
+								className: "text-center text-base/5 text-zinc-500",
 								children: subtitle
 							}),
 							/* @__PURE__ */ jsx("span", {
@@ -2475,7 +3014,7 @@ function EditorActionButtons(props) {
 //#region src/connect/components/editor-undo-redo-buttons/editor-undo-redo-buttons.tsx
 function EditorUndoRedoButtons(props) {
 	const { canUndo, canRedo, undo, redo } = props;
-	const buttonStyles = "w-8 h-8 rounded-lg flex justify-center items-center rounded border border-gray-200";
+	const buttonStyles = "w-8 h-8 rounded-lg flex justify-center items-center rounded border border-gray-200 bg-white";
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex gap-x-2 text-gray-500",
 		children: [/* @__PURE__ */ jsx("button", {
@@ -2790,9 +3329,9 @@ function FileItem(props) {
 			width: 32,
 			draggable: false
 		}), isReadMode && syncStatus && /* @__PURE__ */ jsx("div", {
-			className: "absolute bottom-[-2px] right-0 size-3 rounded-full bg-white",
+			className: "absolute right-0 bottom-[-2px] size-3 rounded-full bg-white",
 			children: /* @__PURE__ */ jsx("div", {
-				className: "absolute left-[-2px] top-[-2px]",
+				className: "absolute top-[-2px] left-[-2px]",
 				children: /* @__PURE__ */ jsx(SyncStatusIcon, {
 					overrideSyncIcons: { SUCCESS: "CheckCircleFill" },
 					syncStatus
@@ -2800,7 +3339,7 @@ function FileItem(props) {
 			})
 		})]
 	});
-	const containerStyles = twMerge("group flex h-12 cursor-pointer select-none items-center rounded-lg bg-gray-200 px-2 text-gray-600 hover:text-gray-800", isDragging ? "opacity-60" : "", className);
+	const containerStyles = twMerge("group flex h-12 cursor-pointer items-center rounded-lg bg-gray-200 px-2 text-gray-600 select-none hover:text-gray-800", isDragging ? "opacity-60" : "", className);
 	const content = isReadMode ? /* @__PURE__ */ jsxs("div", {
 		className: "flex w-52 items-center justify-between",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -2899,7 +3438,7 @@ function FolderItem(props) {
 		onCancel,
 		onSubmit
 	});
-	const containerStyles = twMerge("group flex h-12 cursor-pointer select-none items-center rounded-lg bg-gray-200 px-2", isDragging ? "opacity-60" : isDropTarget ? "bg-blue-100" : "", className);
+	const containerStyles = twMerge("group flex h-12 cursor-pointer items-center rounded-lg bg-gray-200 px-2 select-none", isDragging ? "opacity-60" : isDropTarget ? "bg-blue-100" : "", className);
 	return /* @__PURE__ */ jsx("div", {
 		className: "relative w-64",
 		onClick: isReadMode ? () => setSelectedNode(folderNode) : void 0,
@@ -2949,7 +3488,7 @@ function FooterLink(props) {
 //#region src/connect/components/footer/footer.tsx
 const Footer = ({ children, ...props }) => {
 	return /* @__PURE__ */ jsx("footer", {
-		...mergeClassNameProps(props, "flex items-center gap-x-6 text-xs font-medium text-[#9DA6B9]"),
+		...mergeClassNameProps(props, "flex items-center gap-x-6 text-xs font-medium text-charcoal-300"),
 		children
 	});
 };
@@ -3011,7 +3550,7 @@ const Toggle = /* @__PURE__ */ forwardRef(function Toggle(props, ref) {
 			type: "checkbox",
 			value: "",
 			...props
-		}), /* @__PURE__ */ jsx("div", { className: "peer h-6 w-11 rounded-full bg-gray-500 after:absolute after:start-0.5 after:top-0.5 after:size-5 after:rounded-full after:border after:border-none after:bg-gray-50 after:transition-all peer-checked:bg-blue-900 peer-checked:after:translate-x-full peer-focus:outline-none" })]
+		}), /* @__PURE__ */ jsx("div", { className: "peer h-6 w-11 rounded-full bg-gray-500 peer-checked:bg-blue-900 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-gray-50 after:transition-all peer-checked:after:translate-x-full" })]
 	});
 });
 //#endregion
@@ -3131,7 +3670,7 @@ function LocationInfo(props) {
 	const locationInfo = locationInfoByLocation[location];
 	return /* @__PURE__ */ jsxs("div", {
 		...divProps,
-		className: twMerge("my-3 flex items-center gap-2 rounded-xl border border-gray-100 p-3 text-gray-800 shadow", className),
+		className: twMerge("my-3 flex items-center gap-2 rounded-xl border border-gray-100 bg-white p-3 text-gray-800 shadow-sm", className),
 		children: [locationInfo.icon, /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", { children: locationInfo.title }), /* @__PURE__ */ jsx("p", {
 			className: "text-xs text-slate-200",
 			children: locationInfo.description
@@ -3256,7 +3795,7 @@ function FormattedJsonViewer(props) {
 				...rest,
 				className: "inline-grid",
 				children: /* @__PURE__ */ jsxs("span", {
-					className: "wrap-anywhere hyphens-none pl-[1ch] indent-[-1ch]",
+					className: "pl-[1ch] indent-[-1ch] wrap-anywhere hyphens-none",
 					style: { maxWidth: `${60 - keyName.toString().length}ch` },
 					children: [
 						"\"",
@@ -3310,7 +3849,7 @@ const HomeScreenItem = function HomeScreenItem(props) {
 				children: icon || /* @__PURE__ */ jsx("div", {
 					className: "size-8 items-center justify-center rounded-lg bg-black pt-1",
 					children: /* @__PURE__ */ jsx("span", {
-						className: "text-6 w-6 text-white",
+						className: "w-6 text-white",
 						children: title.slice(0, 1).toUpperCase()
 					})
 				})
@@ -3318,7 +3857,7 @@ const HomeScreenItem = function HomeScreenItem(props) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "w-full max-w-full",
 				children: [/* @__PURE__ */ jsx("h3", {
-					className: "w-full max-w-full truncate px-2",
+					className: "w-full max-w-full truncate px-2 text-gray-900",
 					children: title
 				}), description && /* @__PURE__ */ jsx("p", {
 					className: "text-gray-500",
@@ -3326,7 +3865,7 @@ const HomeScreenItem = function HomeScreenItem(props) {
 				})]
 			}),
 			shareable && /* @__PURE__ */ jsx("div", {
-				className: "absolute left-2 top-0 mb-2",
+				className: "absolute top-0 left-2 mb-2",
 				children: /* @__PURE__ */ jsx(Icon, {
 					name: "PeopleFill",
 					width: 12,
@@ -3355,9 +3894,9 @@ const HomeScreenAddDriveItem = function HomeScreenAddDriveItem(props) {
 const HomeScreen = function HomeScreen(props) {
 	const { children, containerClassName } = props;
 	return /* @__PURE__ */ jsx("div", {
-		className: twMerge("container relative mx-auto flex h-full flex-col", containerClassName),
+		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 pt-12",
+			className: "m-8 flex flex-wrap justify-center gap-4 bg-white pt-12",
 			children: [/* @__PURE__ */ jsx(HomeBackgroundImage, {}), children]
 		})
 	});
@@ -3448,7 +3987,7 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 							className: "text-xs font-medium text-gray-600",
 							children: "Document ID"
 						}), /* @__PURE__ */ jsx("input", {
-							className: "rounded border border-gray-300 px-3 py-1.5 text-sm outline-none focus:border-blue-400",
+							className: "rounded-sm border border-gray-300 px-3 py-1.5 text-sm outline-none focus:border-blue-400",
 							onChange: (e) => setDocumentId(e.target.value),
 							placeholder: "Enter document ID",
 							type: "text",
@@ -3461,7 +4000,7 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 							className: "text-xs font-medium text-gray-600",
 							children: "Branch (optional)"
 						}), /* @__PURE__ */ jsx("input", {
-							className: "rounded border border-gray-300 px-3 py-1.5 text-sm outline-none focus:border-blue-400",
+							className: "rounded-sm border border-gray-300 px-3 py-1.5 text-sm outline-none focus:border-blue-400",
 							onChange: (e) => setBranch(e.target.value),
 							placeholder: "main",
 							type: "text",
@@ -3472,7 +4011,7 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 						className: "flex gap-2",
 						children: [
 							/* @__PURE__ */ jsxs("button", {
-								className: "flex items-center gap-1 rounded border border-blue-300 bg-blue-50 px-3 py-1.5 text-sm text-blue-700 hover:bg-blue-100 disabled:opacity-50",
+								className: "flex items-center gap-1 rounded-sm border border-blue-300 bg-blue-50 px-3 py-1.5 text-sm text-blue-700 hover:bg-blue-100 disabled:opacity-50",
 								disabled: !documentId.trim() || status === "running" || confirmAction !== null,
 								onClick: () => void handleValidate(),
 								type: "button",
@@ -3482,7 +4021,7 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 								}), "Validate"]
 							}),
 							/* @__PURE__ */ jsxs("button", {
-								className: "flex items-center gap-1 rounded border border-yellow-300 bg-yellow-50 px-3 py-1.5 text-sm text-yellow-700 hover:bg-yellow-100 disabled:opacity-50",
+								className: "flex items-center gap-1 rounded-sm border border-yellow-300 bg-yellow-50 px-3 py-1.5 text-sm text-yellow-700 hover:bg-yellow-100 disabled:opacity-50",
 								disabled: !documentId.trim() || status === "running" || confirmAction !== null,
 								onClick: () => setConfirmAction("keyframes"),
 								type: "button",
@@ -3492,7 +4031,7 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 								}), "Rebuild Keyframes"]
 							}),
 							/* @__PURE__ */ jsxs("button", {
-								className: "flex items-center gap-1 rounded border border-yellow-300 bg-yellow-50 px-3 py-1.5 text-sm text-yellow-700 hover:bg-yellow-100 disabled:opacity-50",
+								className: "flex items-center gap-1 rounded-sm border border-yellow-300 bg-yellow-50 px-3 py-1.5 text-sm text-yellow-700 hover:bg-yellow-100 disabled:opacity-50",
 								disabled: !documentId.trim() || status === "running" || confirmAction !== null,
 								onClick: () => setConfirmAction("snapshots"),
 								type: "button",
@@ -3506,14 +4045,14 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 				]
 			}),
 			confirmAction && /* @__PURE__ */ jsxs("div", {
-				className: "flex shrink-0 items-center gap-3 rounded border border-yellow-400 bg-yellow-50 px-3 py-2",
+				className: "flex shrink-0 items-center gap-3 rounded-sm border border-yellow-400 bg-yellow-50 px-3 py-2",
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "text-sm text-yellow-800",
 						children: confirmAction === "keyframes" ? "This will delete all keyframes for this document. Continue?" : "This will invalidate all cached snapshots for this document. Continue?"
 					}),
 					/* @__PURE__ */ jsx("button", {
-						className: "rounded bg-yellow-600 px-3 py-1 text-sm text-white hover:bg-yellow-700",
+						className: "rounded-sm bg-yellow-600 px-3 py-1 text-sm text-white hover:bg-yellow-700",
 						onClick: () => {
 							if (confirmAction === "keyframes") handleRebuildKeyframes();
 							else handleRebuildSnapshots();
@@ -3522,7 +4061,7 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 						children: "Confirm"
 					}),
 					/* @__PURE__ */ jsx("button", {
-						className: "rounded border border-gray-300 bg-white px-3 py-1 text-sm text-gray-600 hover:bg-gray-50",
+						className: "rounded-sm border border-gray-300 bg-white px-3 py-1 text-sm text-gray-600 hover:bg-gray-50",
 						onClick: () => setConfirmAction(null),
 						type: "button",
 						children: "Cancel"
@@ -3541,7 +4080,7 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 						children: "Running..."
 					}),
 					status === "error" && error && /* @__PURE__ */ jsx("div", {
-						className: "rounded bg-red-50 p-3 text-sm text-red-700",
+						className: "rounded-sm bg-red-50 p-3 text-sm text-red-700",
 						children: error
 					}),
 					status === "done" && validationResult && /* @__PURE__ */ jsx(ValidationResultView, { result: validationResult }),
@@ -3729,7 +4268,7 @@ function AddDriveModal(props) {
 		open,
 		children: /* @__PURE__ */ jsx("div", {
 			...containerProps,
-			className: twMerge("w-[408px] rounded-2xl p-6", containerProps?.className),
+			className: twMerge("w-[408px] rounded-2xl bg-white p-6", containerProps?.className),
 			children: /* @__PURE__ */ jsxs(Tabs, {
 				defaultValue: "Create Drive",
 				children: [/* @__PURE__ */ jsx(TabContent, {
@@ -3768,7 +4307,7 @@ function AddLocalDriveModal(props) {
 		open,
 		children: /* @__PURE__ */ jsxs("div", {
 			...containerProps,
-			className: twMerge("max-w-[408px] rounded-2xl p-6", containerProps?.className),
+			className: twMerge("max-w-[408px] rounded-2xl bg-white p-6", containerProps?.className),
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex justify-between",
@@ -3809,7 +4348,7 @@ function AddRemoteDriveModal(props) {
 		open,
 		children: /* @__PURE__ */ jsxs("div", {
 			...containerProps,
-			className: twMerge("min-w-[408px] max-w-[408px] rounded-2xl p-6", containerProps?.className),
+			className: twMerge("max-w-[408px] min-w-[408px] rounded-2xl bg-white p-6", containerProps?.className),
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex justify-between",
@@ -3875,7 +4414,7 @@ function CreateDocumentModal(props) {
 		...restProps,
 		children: /* @__PURE__ */ jsxs("form", {
 			name: "create-document",
-			className: "w-[400px] p-6 text-slate-300",
+			className: "w-[400px] bg-white p-6 text-slate-300",
 			onSubmit: handleSubmit,
 			children: [
 				/* @__PURE__ */ jsx("div", {
@@ -4123,7 +4662,7 @@ function DriveSettingsModal(props) {
 		open,
 		children: /* @__PURE__ */ jsxs("div", {
 			...containerProps,
-			className: twMerge("max-w-[408px] rounded-2xl p-6", containerProps?.className),
+			className: twMerge("max-w-[408px] rounded-2xl bg-white p-6", containerProps?.className),
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex justify-between",
@@ -4186,7 +4725,7 @@ function ObjectInspectorModal({ open, onOpenChange, title, object }) {
 		open,
 		title,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex h-full w-full flex-col",
+			className: "flex size-full flex-col bg-white",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex shrink-0 items-center justify-between border-b border-gray-200 px-4 py-3",
 				children: [/* @__PURE__ */ jsx("h2", {
@@ -4373,7 +4912,7 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 				}), /* @__PURE__ */ jsx("div", {
 					className: "flex items-center gap-2",
 					children: /* @__PURE__ */ jsxs("button", {
-						className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-50",
+						className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-50",
 						disabled: loading,
 						onClick: () => void handleRefresh(),
 						type: "button",
@@ -4461,7 +5000,7 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 							/* @__PURE__ */ jsx("td", {
 								className: "px-3 py-2 text-xs",
 								children: /* @__PURE__ */ jsx("button", {
-									className: "flex items-center gap-1 rounded bg-blue-50 px-2 py-1 text-xs text-blue-700 hover:bg-blue-100",
+									className: "flex items-center gap-1 rounded-sm bg-blue-50 px-2 py-1 text-xs text-blue-700 hover:bg-blue-100",
 									onClick: () => setSelectedProcessor(processor),
 									type: "button",
 									children: "View"
@@ -4470,7 +5009,7 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 							/* @__PURE__ */ jsx("td", {
 								className: "border-l border-gray-300 px-3 py-2 text-xs",
 								children: /* @__PURE__ */ jsxs("span", {
-									className: twMerge("inline-flex items-center gap-1 rounded px-1.5 py-0.5", processor.status === "active" ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"),
+									className: twMerge("inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5", processor.status === "active" ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"),
 									children: [
 										processor.status === "active" && /* @__PURE__ */ jsx("span", { className: "inline-block size-1.5 rounded-full bg-green-500" }),
 										processor.status === "errored" && /* @__PURE__ */ jsx("span", { className: "inline-block size-1.5 rounded-full bg-red-500" }),
@@ -4535,7 +5074,7 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 							/* @__PURE__ */ jsx("td", {
 								className: "border-l border-gray-300 px-3 py-2 text-xs",
 								children: processor.status === "errored" && onRetry && /* @__PURE__ */ jsx("button", {
-									className: "flex items-center gap-1 rounded bg-yellow-50 px-2 py-1 text-xs text-yellow-700 hover:bg-yellow-100 disabled:opacity-50",
+									className: "flex items-center gap-1 rounded-sm bg-yellow-50 px-2 py-1 text-xs text-yellow-700 hover:bg-yellow-100 disabled:opacity-50",
 									disabled: retryingId === processor.processorId,
 									onClick: () => void handleRetry(processor.processorId),
 									type: "button",
@@ -4728,7 +5267,7 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsxs("button", {
-						className: twMerge("flex items-center gap-1 rounded border px-3 py-1.5 text-sm disabled:opacity-50", state.isPaused ? "border-green-300 bg-green-50 text-green-700 hover:bg-green-100" : "border-yellow-300 bg-yellow-50 text-yellow-700 hover:bg-yellow-100"),
+						className: twMerge("flex items-center gap-1 rounded-sm border px-3 py-1.5 text-sm disabled:opacity-50", state.isPaused ? "border-green-300 bg-green-50 text-green-700 hover:bg-green-100" : "border-yellow-300 bg-yellow-50 text-yellow-700 hover:bg-yellow-100"),
 						disabled: actionInProgress,
 						onClick: () => void handlePauseResume(),
 						type: "button",
@@ -4737,7 +5276,7 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 							size: 14
 						}), state.isPaused ? "Resume" : "Pause"]
 					}), /* @__PURE__ */ jsxs("button", {
-						className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-50",
+						className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-50",
 						disabled: loading,
 						onClick: () => void handleRefresh(),
 						type: "button",
@@ -4813,7 +5352,7 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 							/* @__PURE__ */ jsx("td", {
 								className: "px-3 py-2 text-xs",
 								children: /* @__PURE__ */ jsx("button", {
-									className: "flex items-center gap-1 rounded bg-blue-50 px-2 py-1 text-xs text-blue-700 hover:bg-blue-100",
+									className: "flex items-center gap-1 rounded-sm bg-blue-50 px-2 py-1 text-xs text-blue-700 hover:bg-blue-100",
 									onClick: () => setSelectedJob(job),
 									type: "button",
 									children: "View"
@@ -4830,7 +5369,7 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 							/* @__PURE__ */ jsx("td", {
 								className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900",
 								children: /* @__PURE__ */ jsx("span", {
-									className: twMerge("inline-block rounded px-1.5 py-0.5", job.kind === "mutation" ? "bg-purple-100 text-purple-700" : "bg-blue-100 text-blue-700"),
+									className: twMerge("inline-block rounded-sm px-1.5 py-0.5", job.kind === "mutation" ? "bg-purple-100 text-purple-700" : "bg-blue-100 text-blue-700"),
 									children: job.kind
 								})
 							}),
@@ -4873,7 +5412,7 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 							/* @__PURE__ */ jsx("td", {
 								className: "border-l border-gray-300 px-3 py-2 text-xs",
 								children: /* @__PURE__ */ jsxs("span", {
-									className: twMerge("inline-flex items-center gap-1 rounded px-1.5 py-0.5", job.status === "executing" ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-600"),
+									className: twMerge("inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5", job.status === "executing" ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-600"),
 									children: [job.status === "executing" && /* @__PURE__ */ jsx("span", { className: "inline-block size-1.5 animate-pulse rounded-full bg-green-500" }), job.status]
 								})
 							})
@@ -4911,7 +5450,7 @@ function ConnectionStateBadge({ state, failureCount }) {
 	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-gray-100 text-gray-600"),
 		children: [state, failureCount > 0 && /* @__PURE__ */ jsxs("span", {
-			className: "text-[10px] opacity-75",
+			className: "text-xs opacity-75",
 			children: [
 				"(",
 				failureCount,
@@ -5096,7 +5635,7 @@ function MailboxTable({ title, mailboxType, operations, sort, onSort, collapsed,
 						")"
 					]
 				}), operations.length > 0 && /* @__PURE__ */ jsxs("button", {
-					className: "flex items-center gap-1 rounded bg-gray-100 px-2 py-1 text-xs text-gray-700 hover:bg-gray-200",
+					className: "flex items-center gap-1 rounded-sm bg-gray-100 px-2 py-1 text-xs text-gray-700 hover:bg-gray-200",
 					onClick: () => void handleCopyAll(),
 					type: "button",
 					children: [/* @__PURE__ */ jsx(Icon, {
@@ -5140,7 +5679,7 @@ function MailboxTable({ title, mailboxType, operations, sort, onSort, collapsed,
 							/* @__PURE__ */ jsx("td", {
 								className: "px-3 py-2 text-xs",
 								children: /* @__PURE__ */ jsx("button", {
-									className: "flex items-center gap-1 rounded bg-blue-50 px-2 py-1 text-xs text-blue-700 hover:bg-blue-100",
+									className: "flex items-center gap-1 rounded-sm bg-blue-50 px-2 py-1 text-xs text-blue-700 hover:bg-blue-100",
 									onClick: () => setSelectedOperation(op),
 									type: "button",
 									children: "View"
@@ -5300,7 +5839,7 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsxs("button", {
-						className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-2 py-1 text-sm text-gray-700 hover:bg-gray-100",
+						className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-2 py-1 text-sm text-gray-700 hover:bg-gray-100",
 						onClick: onBack,
 						type: "button",
 						children: [/* @__PURE__ */ jsx(Icon, {
@@ -5313,7 +5852,7 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 						children: ["Channel: ", remoteName]
 					})]
 				}), onRefresh && /* @__PURE__ */ jsxs("button", {
-					className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
+					className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
 					onClick: onRefresh,
 					type: "button",
 					children: [/* @__PURE__ */ jsx(Icon, {
@@ -5323,7 +5862,7 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 				})]
 			}),
 			connectionState && /* @__PURE__ */ jsxs("div", {
-				className: "rounded border border-gray-200 bg-white p-4",
+				className: "rounded-sm border border-gray-200 bg-white p-4",
 				children: [/* @__PURE__ */ jsx("h3", {
 					className: "mb-3 text-sm font-semibold text-gray-900",
 					children: "Connection State"
@@ -5360,7 +5899,7 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 				})]
 			}),
 			pollerControls && /* @__PURE__ */ jsxs("div", {
-				className: "rounded border border-gray-200 bg-white p-4",
+				className: "rounded-sm border border-gray-200 bg-white p-4",
 				children: [/* @__PURE__ */ jsx("h3", {
 					className: "mb-3 text-sm font-semibold text-gray-900",
 					children: "Poller"
@@ -5387,7 +5926,7 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 									children: "Interval:"
 								}),
 								/* @__PURE__ */ jsx("input", {
-									className: "w-20 rounded border border-gray-300 px-2 py-1 text-sm",
+									className: "w-20 rounded-sm border border-gray-300 px-2 py-1 text-sm",
 									id: "poll-interval",
 									min: 100,
 									onChange: (e) => setIntervalMs(Number(e.target.value)),
@@ -5402,7 +5941,7 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 									children: "ms"
 								}),
 								/* @__PURE__ */ jsx("button", {
-									className: "ml-1 rounded border border-gray-300 bg-white px-2 py-1 text-sm text-gray-700 hover:bg-gray-100",
+									className: "ml-1 rounded-sm border border-gray-300 bg-white px-2 py-1 text-sm text-gray-700 hover:bg-gray-100",
 									onClick: handleApplyInterval,
 									type: "button",
 									children: "Apply"
@@ -5412,17 +5951,17 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex gap-2",
 						children: [pollerState.isPaused ? /* @__PURE__ */ jsx("button", {
-							className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
+							className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
 							onClick: handleResume,
 							type: "button",
 							children: "Resume"
 						}) : /* @__PURE__ */ jsx("button", {
-							className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
+							className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
 							onClick: handlePause,
 							type: "button",
 							children: "Pause"
 						}), /* @__PURE__ */ jsx("button", {
-							className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
+							className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
 							disabled: !pollerState.isPaused,
 							onClick: handlePollNow,
 							type: "button",
@@ -5432,7 +5971,7 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "rounded border border-gray-200 bg-white p-4",
+				className: "rounded-sm border border-gray-200 bg-white p-4",
 				children: [/* @__PURE__ */ jsx("h3", {
 					className: "mb-3 text-sm font-semibold text-gray-900",
 					children: "Mailbox Processing"
@@ -5462,17 +6001,17 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 						}), /* @__PURE__ */ jsxs("div", {
 							className: "flex gap-2",
 							children: [mailboxStates.inbox.isPaused ? /* @__PURE__ */ jsx("button", {
-								className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
+								className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
 								onClick: () => handleMailboxResume("inbox"),
 								type: "button",
 								children: "Resume"
 							}) : /* @__PURE__ */ jsx("button", {
-								className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
+								className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
 								onClick: () => handleMailboxPause("inbox"),
 								type: "button",
 								children: "Pause"
 							}), /* @__PURE__ */ jsx("button", {
-								className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
+								className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
 								disabled: !mailboxStates.inbox.isPaused,
 								onClick: () => handleMailboxFlush("inbox"),
 								type: "button",
@@ -5503,17 +6042,17 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 						}), /* @__PURE__ */ jsxs("div", {
 							className: "flex gap-2",
 							children: [mailboxStates.outbox.isPaused ? /* @__PURE__ */ jsx("button", {
-								className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
+								className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
 								onClick: () => handleMailboxResume("outbox"),
 								type: "button",
 								children: "Resume"
 							}) : /* @__PURE__ */ jsx("button", {
-								className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
+								className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
 								onClick: () => handleMailboxPause("outbox"),
 								type: "button",
 								children: "Pause"
 							}), /* @__PURE__ */ jsx("button", {
-								className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
+								className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
 								disabled: !mailboxStates.outbox.isPaused,
 								onClick: () => handleMailboxFlush("outbox"),
 								type: "button",
@@ -5725,7 +6264,7 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 					children: [addRemoteManual && /* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-1",
 						children: [/* @__PURE__ */ jsx("input", {
-							className: "w-[260px] rounded border border-gray-300 px-2 py-1.5 text-sm text-gray-900 placeholder:text-gray-400",
+							className: "w-[260px] rounded-sm border border-gray-300 px-2 py-1.5 text-sm text-gray-900 placeholder:text-gray-400",
 							disabled: adding,
 							onChange: (e) => setManualUrl(e.target.value),
 							onKeyDown: (e) => {
@@ -5735,7 +6274,7 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 							type: "text",
 							value: manualUrl
 						}), /* @__PURE__ */ jsx("button", {
-							className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-50",
+							className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-50",
 							disabled: adding || !manualUrl.trim(),
 							onClick: () => void handleAddManual(),
 							title: "Register a remote drive in manual poll mode (no background polling)",
@@ -5743,7 +6282,7 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 							children: "Add (manual)"
 						})]
 					}), /* @__PURE__ */ jsxs("button", {
-						className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-50",
+						className: "flex items-center gap-1 rounded-sm border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-50",
 						disabled: loading,
 						onClick: () => void handleRefresh(),
 						type: "button",
@@ -5755,7 +6294,7 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 				})]
 			}),
 			addError && /* @__PURE__ */ jsx("div", {
-				className: "shrink-0 rounded border border-red-300 bg-red-50 px-3 py-1.5 text-xs text-red-700",
+				className: "shrink-0 rounded-sm border border-red-300 bg-red-50 px-3 py-1.5 text-xs text-red-700",
 				children: addError
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -5840,7 +6379,7 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 							/* @__PURE__ */ jsx("td", {
 								className: "border-l border-gray-300 px-3 py-2",
 								children: /* @__PURE__ */ jsxs("button", {
-									className: "flex items-center gap-1 rounded bg-blue-50 px-2 py-1 text-xs text-blue-700 hover:bg-blue-100",
+									className: "flex items-center gap-1 rounded-sm bg-blue-50 px-2 py-1 text-xs text-blue-700 hover:bg-blue-100",
 									onClick: () => handleViewChannel(remote),
 									type: "button",
 									children: ["View", /* @__PURE__ */ jsx(Icon, {
@@ -5854,13 +6393,13 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 								children: /* @__PURE__ */ jsxs("div", {
 									className: "flex items-center gap-1",
 									children: [triggerPull && /* @__PURE__ */ jsx("button", {
-										className: "rounded bg-gray-100 px-2 py-1 text-xs text-gray-700 hover:bg-gray-200",
+										className: "rounded-sm bg-gray-100 px-2 py-1 text-xs text-gray-700 hover:bg-gray-200",
 										onClick: () => handlePull(remote),
 										title: "Trigger a single pull cycle for this remote",
 										type: "button",
 										children: "Pull"
 									}), removeRemote && /* @__PURE__ */ jsx("button", {
-										className: "rounded bg-red-50 px-2 py-1 text-xs text-red-700 hover:bg-red-100",
+										className: "rounded-sm bg-red-50 px-2 py-1 text-xs text-red-700 hover:bg-red-100",
 										onClick: () => void handleRemove(remote),
 										type: "button",
 										children: "Remove"
@@ -5899,7 +6438,7 @@ function InspectorModal({ open, onOpenChange, modalProps, containerProps, dbExpl
 		open,
 		children: /* @__PURE__ */ jsxs("div", {
 			...containerProps,
-			className: twMerge("flex h-full w-full flex-col", containerProps?.className),
+			className: twMerge("flex size-full flex-col bg-white", containerProps?.className),
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "flex shrink-0 items-center justify-end px-3 pt-3",
 				children: /* @__PURE__ */ jsx("button", {
@@ -6010,7 +6549,7 @@ function PackageInstallModal(props) {
 		},
 		...restProps,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "w-[460px] p-6 text-slate-300",
+			className: "w-[460px] bg-white p-6 text-slate-300",
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					className: "border-b border-slate-50 pb-2 text-2xl font-bold text-gray-800",
@@ -6102,7 +6641,7 @@ function ReadRequiredModal(props) {
 		},
 		...restProps,
 		children: /* @__PURE__ */ jsxs("div", {
-			...mergeClassNameProps(containerProps, "w-[500px] p-6 text-slate-300"),
+			...mergeClassNameProps(containerProps, "w-[500px] bg-white p-6 text-slate-300"),
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					...mergeClassNameProps(headerProps, "border-b border-slate-50 pb-2 text-2xl font-bold text-gray-800"),
@@ -6286,10 +6825,10 @@ function Drive(props) {
 		children: [
 			icon,
 			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
-				className: "block text-sm font-medium leading-[18px]",
+				className: "block text-sm/4.5 font-medium",
 				children: capitalCase(drive.header.name)
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-baseline gap-x-2 leading-[18px]",
+				className: "flex items-baseline gap-x-2 leading-4.5",
 				children: [/* @__PURE__ */ jsxs("span", {
 					className: "text-sm text-gray-600",
 					children: [capitalCase(getDriveSharingType(drive)), " App"]
@@ -6297,7 +6836,7 @@ function Drive(props) {
 					href: "https://www.powerhouse.inc/",
 					target: "_blank",
 					rel: "noopener noreferrer",
-					className: "group flex items-center gap-x-2 text-sm text-slate-500 transition-colors hover:text-[#9896FF]",
+					className: "group flex items-center gap-x-2 text-sm text-slate-500 transition-colors hover:text-purple-700",
 					children: ["By Powerhouse", /* @__PURE__ */ jsx("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						viewBox: "0 0 12 12",
@@ -6353,7 +6892,7 @@ function LocalStorage(props) {
 function DefaultEditor(props) {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ jsx("div", {
-		className: twMerge("rounded-lg p-3", className),
+		className: twMerge("rounded-lg bg-white p-3", className),
 		children: /* @__PURE__ */ jsx(DefaultEditorSelect, { ...rest })
 	});
 }
@@ -6363,7 +6902,7 @@ function DefaultEditorSelect(props) {
 		className: "mb-4 font-semibold text-gray-900",
 		children: "Default Editor Selection"
 	}), /* @__PURE__ */ jsx(SelectFieldRaw, {
-		className: twMerge("min-w-36 max-w-fit", className),
+		className: twMerge("max-w-fit min-w-36", className),
 		name: "default-editor",
 		required: true,
 		value: documentModelEditor,
@@ -6464,7 +7003,7 @@ const VersionPicker = (props) => {
 		},
 		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
 			disabled: disabled || !hasAnyPickable,
-			className: cn("flex items-center justify-between gap-2 rounded-md border border-gray-300 bg-white px-2.5 py-1 text-xs font-medium text-gray-800 transition-colors", "hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900/20", "disabled:cursor-not-allowed disabled:opacity-60", className),
+			className: cn("flex items-center justify-between gap-2 rounded-md border border-gray-300 bg-white px-2.5 py-1 text-xs font-medium text-gray-800 transition-colors", "hover:bg-gray-50 focus:ring-2 focus:ring-gray-900/20 focus:outline-none", "disabled:cursor-not-allowed disabled:opacity-60", className),
 			"data-version-picker-trigger": true,
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "truncate",
@@ -6487,7 +7026,7 @@ const VersionPicker = (props) => {
 					children: [/* @__PURE__ */ jsx(Icon, {
 						name: "Search",
 						size: 14,
-						className: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-400"
+						className: "absolute top-1/2 left-2 -translate-y-1/2 text-gray-400"
 					}), /* @__PURE__ */ jsx(Input, {
 						value: query,
 						onChange: (e) => setQuery(e.target.value),
@@ -6505,7 +7044,7 @@ const VersionPicker = (props) => {
 					filteredTags.length > 0 && /* @__PURE__ */ jsxs("div", {
 						className: "pb-1",
 						children: [/* @__PURE__ */ jsx("p", {
-							className: "px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
+							className: "px-3 py-1 text-xs font-semibold tracking-wide text-gray-500 uppercase",
 							children: "Tags"
 						}), filteredTags.map(([tag, ver]) => {
 							return /* @__PURE__ */ jsxs("button", {
@@ -6530,7 +7069,7 @@ const VersionPicker = (props) => {
 						})]
 					}),
 					filteredVersions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-						className: "px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
+						className: "px-3 py-1 text-xs font-semibold tracking-wide text-gray-500 uppercase",
 						children: "Versions"
 					}), filteredVersions.map((ver) => {
 						return /* @__PURE__ */ jsx("button", {
@@ -6591,7 +7130,7 @@ function PackageResultCard(props) {
 	const isSelecting = selectingValue === installSpec;
 	const isDisabled = option.disabled === true;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-start justify-between gap-3 rounded-md px-2 py-2 hover:bg-gray-50",
+		className: "flex items-start justify-between gap-3 rounded-md p-2 hover:bg-gray-50",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "min-w-0 flex-1",
 			children: [
@@ -6737,7 +7276,7 @@ const PackageManagerListItem = (props) => {
 	}
 	const dropdownItems = getDropdownItems();
 	return /* @__PURE__ */ jsxs("li", {
-		className: twMerge("relative flex flex-col items-start rounded-md border border-gray-200 p-3 text-sm leading-5 shadow-sm", className),
+		className: twMerge("relative flex flex-col items-start rounded-md border border-gray-200 bg-white p-3 text-sm/5 shadow-sm", className),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-center gap-2 pr-8",
@@ -6792,7 +7331,7 @@ const PackageManagerListItem = (props) => {
 				onOpenChange: setIsDropdownMenuOpen,
 				open: isDropdownMenuOpen,
 				children: /* @__PURE__ */ jsx("button", {
-					className: "group absolute right-3 top-3",
+					className: "group absolute top-3 right-3",
 					onClick: (e) => {
 						e.stopPropagation();
 						setIsDropdownMenuOpen(true);
@@ -6946,9 +7485,9 @@ const PackageSection = ({ sectionId, title, count, isEmpty, emptyText, children
 };
 const PackageSubSection = ({ title, count, children }) => {
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h4", {
-		className: "mb-2 flex items-baseline gap-2 text-xs font-semibold uppercase tracking-wide text-gray-500",
+		className: "mb-2 flex items-baseline gap-2 text-xs font-semibold tracking-wide text-gray-500 uppercase",
 		children: [/* @__PURE__ */ jsx("span", { children: title }), /* @__PURE__ */ jsxs("span", {
-			className: "font-medium normal-case tracking-normal text-gray-400",
+			className: "font-medium tracking-normal text-gray-400 normal-case",
 			children: [
 				"(",
 				count,
@@ -6972,7 +7511,7 @@ const PackageList = ({ packages, onInstall, onUninstall }) => {
 const PackageManager = (props) => {
 	const { registryPackageList, onInstall, onUninstall, mutable, disabled, className } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: twMerge("flex h-full flex-1 flex-col rounded-lg p-3", className),
+		className: twMerge("flex h-full flex-1 flex-col rounded-lg bg-white p-3", className),
 		children: [mutable && /* @__PURE__ */ jsx(PackageManagerInput, {
 			className: "mb-4",
 			registryPackageList,
@@ -7034,7 +7573,7 @@ function SettingsModal(props) {
 				className: "flex flex-col gap-y-1 p-3 pt-6",
 				children: tabsContent
 			}), /* @__PURE__ */ jsx("div", {
-				className: "m-6 flex h-full flex-1 flex-col overflow-hidden rounded-lg border border-slate-50",
+				className: "m-6 flex h-full flex-1 flex-col overflow-hidden rounded-lg border border-slate-50 bg-white",
 				children: typeof SelectedTabComponent === "function" ? /* @__PURE__ */ jsx(SelectedTabComponent, {}) : SelectedTabComponent
 			})]
 		})]
@@ -7062,7 +7601,7 @@ const ClearStorageSettingsRow = (props) => {
 	return /* @__PURE__ */ jsx(SettingsRow, {
 		...restProps,
 		children: /* @__PURE__ */ jsx(PowerhouseButton, {
-			className: "h-auto min-h-9 rounded border border-solid border-gray-300 bg-white px-3 py-0 text-sm text-red-800 hover:border-gray-500 hover:bg-white hover:text-red-900",
+			className: "h-auto min-h-9 rounded-sm border border-solid border-gray-300 bg-white px-3 py-0 text-sm text-red-800 hover:border-gray-500 hover:bg-white hover:text-red-900",
 			icon: /* @__PURE__ */ jsx(Icon, {
 				name: "Trash",
 				size: 18
@@ -7089,7 +7628,7 @@ const SettingsModalOld = (props) => {
 		},
 		...restProps,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "w-[432px] p-4 text-gray-900",
+			className: "w-[432px] bg-white p-4 text-gray-900",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex justify-between",
@@ -7146,7 +7685,7 @@ function ConnectUpgradeDriveModal(props) {
 		},
 		...restProps,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "w-[400px] p-6 text-slate-300",
+			className: "w-[400px] bg-white p-6 text-slate-300",
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					className: "border-b border-slate-50 pb-2 text-2xl font-bold text-gray-800",
@@ -7177,7 +7716,7 @@ function ConnectUpgradeDriveModal(props) {
 function Branch(props) {
 	const { branch = "main" } = props;
 	return /* @__PURE__ */ jsxs("button", {
-		className: "flex h-8 w-fit items-center gap-1 rounded-lg bg-slate-50 pl-1 pr-2 text-xs text-stone-300",
+		className: "flex h-8 w-fit items-center gap-1 rounded-lg bg-slate-50 pr-2 pl-1 text-xs text-stone-300",
 		children: [
 			/* @__PURE__ */ jsx(Icon, { name: "Branch" }),
 			/* @__PURE__ */ jsx("span", { children: "BRANCH" }),
@@ -7203,7 +7742,7 @@ function DocId(props) {
 		};
 	}
 	return /* @__PURE__ */ jsxs("button", {
-		className: "flex h-8 w-fit items-center gap-1 rounded-lg bg-slate-50 pl-1 pr-2 text-xs text-stone-300",
+		className: "flex h-8 w-fit items-center gap-1 rounded-lg bg-slate-50 pr-2 pl-1 text-xs text-stone-300",
 		onClick: handleCopy(docId),
 		children: [
 			/* @__PURE__ */ jsx(Icon, { name: "Link" }),
@@ -7265,7 +7804,7 @@ function Header(props) {
 			className: "flex items-center gap-3",
 			children: [/* @__PURE__ */ jsx("button", {
 				name: "close-revision-history",
-				className: "shadow-button rounded-lg bg-gray-50 p-1 text-stone-300",
+				className: "rounded-lg bg-gray-50 p-1 text-stone-300 shadow-button",
 				onClick: onClose,
 				children: /* @__PURE__ */ jsx(Icon, { name: "VariantArrowLeft" })
 			}), /* @__PURE__ */ jsx("h1", {
@@ -7367,11 +7906,11 @@ function CodePopover(props) {
 		opener.cancel();
 		closer.call();
 	}
-	return /* @__PURE__ */ jsxs(Root, {
+	return /* @__PURE__ */ jsxs(Root$1, {
 		open: isOpen,
 		onOpenChange: (changedIsOpen) => changedIsOpen ? open() : close(),
 		children: [
-			/* @__PURE__ */ jsx(Trigger, {
+			/* @__PURE__ */ jsx(Trigger$1, {
 				onMouseEnter: open,
 				children: trigger
 			}),
@@ -7379,7 +7918,7 @@ function CodePopover(props) {
 				asChild: true,
 				children: anchor
 			}),
-			/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
+			/* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsx(Content$1, {
 				forceMount: true,
 				onMouseLeave: close,
 				sideOffset: -28,
@@ -7390,7 +7929,7 @@ function CodePopover(props) {
 					bottom: -1e4,
 					left: 24
 				},
-				className: "shadow-tooltip z-50 rounded-lg border border-gray-200 bg-white p-2 text-xs outline-none",
+				className: "z-50 rounded-lg border border-gray-200 bg-white p-2 text-xs shadow-tooltip outline-none",
 				children: content
 			}) })
 		]
@@ -7430,7 +7969,7 @@ function Errors(props) {
 	});
 	const text = hasErrors ? `Error: ${errors[0]}` : "No errors";
 	const content = /* @__PURE__ */ jsxs("span", {
-		className: twMerge("flex w-fit items-center rounded-lg border border-gray-200 px-2 py-1 text-xs", color, hasErrors && "cursor-pointer"),
+		className: twMerge("flex w-fit items-center rounded-lg border border-gray-200 bg-white 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
@@ -7491,7 +8030,7 @@ function Signature(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-gray-200 px-2 py-1",
+			className: "flex w-fit cursor-pointer items-center gap-1 rounded-lg border border-gray-200 bg-white px-2 py-1",
 			children: [
 				/* @__PURE__ */ jsx(VerificationStatus, { signatures }),
 				" ",
@@ -7861,7 +8400,7 @@ const SidebarItem = function SidebarItem(props) {
 		children: /* @__PURE__ */ jsxs("div", {
 			className: twMerge("group/sidebar-item relative flex cursor-pointer flex-col items-center justify-center text-center text-sm text-black", containerClassName, active && "bg-white", onClick && "cursor-pointer"),
 			onClick,
-			children: [active ? /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-1/2 h-10 w-1 -translate-y-1/2 rounded-r-sm bg-violet-400" }) : /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-1/2 h-6 w-1 -translate-y-1/2 rounded-r-sm bg-zinc-300 opacity-0 transition-opacity group-hover/sidebar-item:opacity-100" }), /* @__PURE__ */ jsx("div", {
+			children: [active ? /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-0 h-10 w-1 -translate-y-1/2 rounded-r-sm bg-violet-400" }) : /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-0 h-6 w-1 -translate-y-1/2 rounded-r-sm bg-zinc-300 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-black",
@@ -7935,7 +8474,7 @@ const SidebarLogin = ({ onLogin }) => {
 	return /* @__PURE__ */ jsx(AccountPopover, {
 		content: /* @__PURE__ */ jsx(AccountPopoverLogin, { onLogin }),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: twMerge("group/sidebar-footer flex w-full items-baseline justify-start text-sm font-semibold leading-10 text-gray-600", onLogin ? "cursor-pointer" : "cursor-wait"),
+			className: twMerge("group/sidebar-footer flex w-full items-baseline justify-start text-sm/10 font-semibold text-gray-600", onLogin ? "cursor-pointer" : "cursor-wait"),
 			children: [/* @__PURE__ */ jsx("img", {
 				width: 42,
 				height: 42,
@@ -8101,7 +8640,7 @@ const ConnectSidebarFooter = ({ address, ensName, avatarUrl, className, onLogin,
 					className: "text-gray-600",
 					name: "Settings"
 				}), /* @__PURE__ */ jsx("span", {
-					className: "hidden text-sm font-semibold leading-6 text-gray-800",
+					className: "hidden text-sm/6 font-semibold text-gray-800",
 					children: "Settings"
 				})]
 			})
@@ -8189,6 +8728,6 @@ const removeSuccessFiles = (files) => {
 	return files.filter((file) => file.status !== "SUCCESS");
 };
 //#endregion
-export { About, AccountPopover, AddDriveModal, AddLocalDriveForm, AddLocalDriveModal, AddRemoteDriveForm, AddRemoteDriveModal, AnimatedLoader, Breadcrumb, Breadcrumbs, CONFLICT, ChannelInspector, ClearStorageSettingsRow, Combobox, ConnectConfirmationModal, ConnectDeleteDriveModal, ConnectDeleteItemModal, ConnectDropdownMenu, ConnectReplaceDuplicateModal, ConnectSearchBar, ConnectSelect, ConnectSidebar, ConnectSidebarFooter, ConnectSidebarHeader, ConnectTooltip, ConnectTooltipProvider, ConnectUpgradeDriveModal, ConnectionStateBadge, CookieBanner, CreateDocumentModal, DBExplorer, DangerZone, DebugInspector, DefaultEditor, DefaultEditorLoader, DefaultEditorSelect, DependencyVersions, Disclosure, Divider, DocumentStateViewer, DocumentTimeline, DocumentToolbar, DriveSettingsModal, DropZone, DropZoneWrapper, ENSAvatar, ERROR, EditorActionButtons, EditorUndoRedoButtons, FileItem, FolderItem, Footer, FooterLink, FormInput, FormattedJsonViewer, HomeBackgroundImage, HomeScreen, HomeScreenAddDriveItem, HomeScreenItem, INITIAL_SYNC, InspectorModal, IntegrityInspector, LoadingScreen, MISSING, NodeInput, ObjectInspectorModal, PackageInstallModal, PackageManager, PackageManagerInput, PackageManagerList, PackageManagerListItem, ProcessorsInspector, QueueInspector, ReadRequiredModal, RemotesInspector, RevisionHistory, SUCCESS, SYNCING, SettingsModal, SettingsModalOld, SettingsRow, SidebarAddDriveItem, SidebarItem, SidebarLogin, SidebarUser, SyncStatusIcon, TabContent, Tabs, Toggle, UploadFileItem, UploadFileList, UploadFileListContainer, debugNodeOptions, debugNodeOptionsMap, defaultDriveOptions, defaultNodeOptions, fileNodeDropdownOptions, folderNodeDropdownOptions, formatEthAddress, getFolderStatus, locationInfoByLocation, nodeOptions, normalNodeOptions, removeSuccessFiles, sharingTypeOptions, sortFilesByStatus, syncStatuses, useEns, verifyPackageJsonFields };
+export { About, AccountPopover, AddDriveModal, AddLocalDriveForm, AddLocalDriveModal, AddRemoteDriveForm, AddRemoteDriveModal, AnimatedLoader, Breadcrumb, Breadcrumbs, CONFLICT, ChannelInspector, ClearStorageSettingsRow, Combobox, ConnectConfirmationModal, ConnectDeleteDriveModal, ConnectDeleteItemModal, ConnectDropdownMenu, ConnectReplaceDuplicateModal, ConnectSearchBar, ConnectSelect, ConnectSidebar, ConnectSidebarFooter, ConnectSidebarHeader, ConnectTooltip, ConnectTooltipProvider, ConnectUpgradeDriveModal, ConnectionStateBadge, CookieBanner, CreateDocumentModal, DBExplorer, DangerZone, DebugInspector, DefaultEditor, DefaultEditorLoader, DefaultEditorSelect, DependencyVersions, Disclosure, Divider, DocumentStateViewer, DocumentTimeline, DocumentToolbar, DriveSettingsModal, DropZone, DropZoneWrapper, ENSAvatar, ERROR, EditorActionButtons, EditorUndoRedoButtons, FileItem, FolderItem, Footer, FooterLink, FormInput, FormattedJsonViewer, HomeBackgroundImage, HomeScreen, HomeScreenAddDriveItem, HomeScreenItem, INITIAL_SYNC, InspectorModal, IntegrityInspector, LoadingScreen, MISSING, NodeInput, ObjectInspectorModal, PackageInstallModal, PackageManager, PackageManagerInput, PackageManagerList, PackageManagerListItem, ProcessorsInspector, QueueInspector, ReadRequiredModal, RemotesInspector, RevisionHistory, SUCCESS, SYNCING, SettingsModal, SettingsModalOld, SettingsRow, SidebarAddDriveItem, SidebarItem, SidebarLogin, SidebarUser, SyncStatusIcon, TabContent, Tabs, Toggle, ToolbarButton, ToolbarCloseButton, ToolbarContainer, ToolbarControlsContainer, ToolbarDownloadButton, ToolbarHistoryButton, ToolbarInput, ToolbarName, ToolbarRedoButton, ToolbarSwitchboardButton, ToolbarUndoButton, UploadFileItem, UploadFileList, UploadFileListContainer, debugNodeOptions, debugNodeOptionsMap, defaultDriveOptions, defaultNodeOptions, fileNodeDropdownOptions, folderNodeDropdownOptions, formatEthAddress, getFolderStatus, locationInfoByLocation, nodeOptions, normalNodeOptions, removeSuccessFiles, sharingTypeOptions, sortFilesByStatus, syncStatuses, useEns, verifyPackageJsonFields };
 
 //# sourceMappingURL=index.js.map