@powerhousedao/design-system 6.0.0-dev.248 → 6.0.0-dev.249

package/dist/connect/index.js

@@ -1,4 +1,4 @@
-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-D4e3Wkrz.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";
@@ -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,
@@ -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
 			})
 		]
@@ -1496,7 +1496,7 @@ function Tabs({ children, defaultValue }) {
 					if (!/* @__PURE__ */ React.isValidElement(child)) return;
 					const { label, disabled } = child.props;
 					return /* @__PURE__ */ jsx(Trigger$2, {
-						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",
+						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
@@ -1558,7 +1558,7 @@ function ConnectTooltip(props) {
 			...rest,
 			side,
 			sideOffset,
-			className: twMerge("shadow-tooltip z-50 rounded-lg border border-gray-200 bg-white p-2 text-xs", className),
+			className: twMerge("z-50 rounded-lg border border-gray-200 bg-white p-2 text-xs shadow-tooltip", className),
 			children: content
 		}) })]
 	});
@@ -1624,7 +1624,7 @@ const HDivider = (props) => {
 			side: "bottom",
 			sideOffset: 5,
 			children: /* @__PURE__ */ jsx("div", {
-				className: twMerge("mx-0.5 flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300", isSelected && "bg-blue-300", className),
+				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,
@@ -1687,7 +1687,7 @@ const TimelineBar = ({ onClick, className, timestampUtcMs: timestamp, additions,
 			name: "TimelineCaret",
 			color: "#4EA9FF",
 			size: 10,
-			className: "absolute left-[-2px] top-[-11px] z-40"
+			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,
@@ -1777,11 +1777,11 @@ const DocumentTimeline = (props) => {
 			className: "relative h-[36px] w-full",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "absolute left-[0px] z-[20] h-[17px] w-[6px] bg-white",
+					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 right-[0px] top-[11px] z-[20] h-[6px] w-[6px] bg-white",
+					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" }),
@@ -1803,7 +1803,7 @@ const DocumentTimeline = (props) => {
 					})
 				}),
 				/* @__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 bottom-0 right-0 z-10 h-[25px] w-2 rounded-r-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" })
 			]
 		})
 	});
@@ -2337,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
 	});
 }
@@ -2363,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,
@@ -2373,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,
@@ -2456,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", {
@@ -2474,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,
@@ -2515,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",
@@ -2524,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",
@@ -2534,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,
@@ -2547,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,
@@ -2557,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}`))
 		})]
 	});
@@ -2622,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,
@@ -2879,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: "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", {
@@ -3329,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
@@ -3339,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", {
@@ -3438,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,
@@ -3488,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
 	});
 };
@@ -3550,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
@@ -3670,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 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
@@ -3795,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: [
 						"\"",
@@ -3849,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()
 					})
 				})
@@ -3857,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-slate-50",
 					children: title
 				}), description && /* @__PURE__ */ jsx("p", {
 					className: "text-gray-500",
@@ -3865,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,
@@ -3894,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 pt-12 dark:bg-slate-900",
 			children: [/* @__PURE__ */ jsx(HomeBackgroundImage, {}), children]
 		})
 	});
@@ -3987,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",
@@ -4000,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",
@@ -4011,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",
@@ -4021,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",
@@ -4031,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",
@@ -4045,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();
@@ -4061,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"
@@ -4080,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 }),
@@ -4348,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 p-6", containerProps?.className),
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex justify-between",
@@ -4725,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",
 			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", {
@@ -4912,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",
@@ -5000,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"
@@ -5009,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" }),
@@ -5074,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",
@@ -5267,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",
@@ -5276,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",
@@ -5352,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"
@@ -5369,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
 								})
 							}),
@@ -5412,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]
 								})
 							})
@@ -5450,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,
@@ -5635,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, {
@@ -5679,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"
@@ -5839,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, {
@@ -5852,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, {
@@ -5862,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"
@@ -5899,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"
@@ -5926,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)),
@@ -5941,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"
@@ -5951,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",
@@ -5971,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"
@@ -6001,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",
@@ -6042,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",
@@ -6264,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) => {
@@ -6274,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)",
@@ -6282,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",
@@ -6294,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", {
@@ -6379,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, {
@@ -6393,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"
@@ -6438,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", containerProps?.className),
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "flex shrink-0 items-center justify-end px-3 pt-3",
 				children: /* @__PURE__ */ jsx("button", {
@@ -6825,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"]
@@ -6836,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",
@@ -6902,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,
@@ -7003,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",
@@ -7026,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),
@@ -7044,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", {
@@ -7069,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", {
@@ -7130,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: [
@@ -7276,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 p-3 text-sm/5 shadow-sm", className),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-center gap-2 pr-8",
@@ -7331,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);
@@ -7485,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,
@@ -7601,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
@@ -7716,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" }),
@@ -7742,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" }),
@@ -7804,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", {
@@ -7929,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
 			}) })
 		]
@@ -8400,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",
@@ -8474,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,
@@ -8640,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"
 				})]
 			})