@parallelworks/ui 0.44.0 → 0.46.0

package/dist/file-explorer/FileExplorer.js

@@ -1,35 +1,29 @@
-import { BiSolidTrashAlt } from "../icons/bi/BiSolidTrashAlt.js";
-import { BsArrowsCollapse } from "../icons/bs/BsArrowsCollapse.js";
-import { FaAngleDown } from "../icons/fa/FaAngleDown.js";
-import { FaLink } from "../icons/fa/FaLink.js";
-import { FaRegFolder } from "../icons/fa/FaRegFolder.js";
-import { FaUsers } from "../icons/fa/FaUsers.js";
-import { FiDownload } from "../icons/fi/FiDownload.js";
-import { FiFile } from "../icons/fi/FiFile.js";
-import { FiFileText } from "../icons/fi/FiFileText.js";
-import { FiUpload } from "../icons/fi/FiUpload.js";
-import { HiOutlineClipboardCopy } from "../icons/hi/HiOutlineClipboardCopy.js";
-import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
-import { LuEye } from "../icons/lu/LuEye.js";
-import { MdRefresh } from "../icons/md/MdRefresh.js";
-import { PiShareBold } from "../icons/pi/PiShareBold.js";
-import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
+import { cx } from "../cx.js";
+import { AccessIcon, ChevronDownIcon, ChevronRightIcon, CollapseIcon, CopyIcon, DownloadIcon, FileIcon, FileTextIcon, FolderIcon, LinkIcon, PreviewIcon, ShareIcon, TrashIcon, UploadIcon, WarningIcon } from "../icons.js";
 import { MenuItem, MenuPopup, MenuSeparator } from "../components/Menu.js";
 import { safeUrl } from "../safeUrl.js";
 import { keyedByContent } from "../components/keys.js";
+import { buttonClasses } from "../components/buttonClasses.js";
+import { Loader } from "../components/Loader.js";
+import { toast } from "../components/Toast.js";
 import { Tooltip } from "../components/Tooltip.js";
-import { useNotify, useSlots, useStrings } from "../components/Provider.js";
+import { usePersistedState, useSlots, useStrings } from "../components/Provider.js";
+import { useCopy } from "../components/useCopy.js";
+import { Button } from "../components/Button.js";
 import { ConfirmModal } from "../components/ConfirmModal.js";
 import { useContextMenu } from "../components/ContextMenu.js";
 import CopyToClipboard, { CopyCodeBlock } from "../components/CopyToClipboard.js";
-import { InfoTip } from "../components/InfoTip.js";
 import { CreateModal } from "../components/CreateModal.js";
-import Loader from "../components/Loader.js";
+import { InfoTip } from "../components/InfoTip.js";
+import { useSplitter } from "../components/splitter.js";
+import { formatBytes, formatDateTime } from "../format.js";
+import { RelativeTime } from "../components/relativeTime.js";
+import { RefreshButton } from "../components/RefreshButton.js";
 import { StatusBadge } from "../components/StatusBadge.js";
 import { Table } from "../components/Table.js";
 import { ListActionsHeader, ListSkeleton, listTableFixedProps, listTableProps } from "../list/ListTable.js";
 import { assembleRowMenu, useCopySubmenu } from "../list/rowMenu.js";
-import { calculateUploadNodesTotalSize, createTreeBuilder, formatFileSize, getDirectoryNameError, getDirectoryObjectPath, getNodeChildren, getObjectKeyFromNode, getParentPath, getUploadNodesFromDataTransferItems, getUriScheme, pruneNodesInsideSelectedDirectories, removeLeadingAndTrailingSlashes } from "./lib/utils.js";
+import { calculateUploadNodesTotalSize, createTreeBuilder, getDirectoryNameError, getDirectoryObjectPath, getNodeChildren, getObjectKeyFromNode, getParentPath, getUploadNodesFromDataTransferItems, getUriScheme, pruneNodesInsideSelectedDirectories, removeLeadingAndTrailingSlashes } from "./lib/utils.js";
 import { useFileExplorer } from "./FileExplorerContext.js";
 import { PREVIEW_URL_EXPIRES_IN, canPreview } from "./FilePreview/previewType.js";
 import { CorsError } from "./lib/errors.js";
@@ -43,15 +37,12 @@ import { FileTable } from "./FileTable.js";
 import { advanceListing, beginLoadingMore, canAutoLoadMore, clearListingError, clearListingsUnder, hasMore, incompletePaths, isListed, isLoadingMore, loadMoreError, nextHydrationStep, recordListingError, replaceListing } from "./lib/paging.js";
 import { TreeView } from "./TreeView.js";
 import { Menu } from "@base-ui/react/menu";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { useLocalStorage } from "usehooks-ts";
 import { DateTime } from "luxon";
-import { Resizable } from "re-resizable";
 //#region src/file-explorer/FileExplorer.tsx
 function UriCard({ value }) {
-	const t = useStrings().fileExplorer;
+	const { common } = useStrings();
 	const scheme = getUriScheme(value);
 	return /* @__PURE__ */ jsxs(CopyToClipboard, {
 		text: value,
@@ -63,13 +54,13 @@ function UriCard({ value }) {
 				children: scheme
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "flex-1 min-w-0 inline-flex items-center px-3 py-2 font-mono text-[12.5px] leading-snug break-all text-(--theme-input)",
+				className: "flex-1 min-w-0 inline-flex items-center px-3 py-2 font-mono text-[12.5px] leading-snug break-all text-(--theme-focus)",
 				children: value
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "shrink-0 inline-flex items-center justify-center px-3 border-l theme-border theme-muted-text group-hover:text-(--theme-link) group-hover:bg-(--theme-link)/5 transition-colors duration-150",
-				title: t.chrome.copyToClipboard,
-				children: /* @__PURE__ */ jsx(HiOutlineClipboardCopy, { className: "h-3.5 w-3.5" })
+				title: common.copyToClipboard,
+				children: /* @__PURE__ */ jsx(CopyIcon, { className: "h-3.5 w-3.5" })
 			})
 		]
 	});
@@ -99,37 +90,29 @@ function getAncestorDirPaths(path) {
 /** The tree's width is the host's when the tree is embedded on its own, and this
 * component's when it is showing the details pane beside it. */
 function TreeFrame({ treeOnly, sidebarWidth, onWidthChange, children }) {
+	const splitter = useSplitter({
+		width: sidebarWidth,
+		onWidthChange,
+		min: 200,
+		max: 800,
+		side: "right",
+		defaultWidth: 300
+	});
 	if (treeOnly) return /* @__PURE__ */ jsx("div", {
 		className: "h-full w-full min-w-0",
 		children
 	});
-	return /* @__PURE__ */ jsx(Resizable, {
-		size: {
-			width: sidebarWidth,
-			height: "100%"
-		},
-		minWidth: 200,
-		maxWidth: 800,
-		enable: {
-			top: false,
-			right: true,
-			bottom: false,
-			left: false,
-			topRight: false,
-			bottomRight: false,
-			bottomLeft: false,
-			topLeft: false
-		},
-		onResizeStop: (_e, _direction, _ref, d) => {
-			onWidthChange((prev) => prev + d.width);
-		},
-		children
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative h-full shrink-0",
+		style: { width: splitter.width },
+		children: [children, /* @__PURE__ */ jsx("div", { ...splitter.separatorProps })]
 	});
 }
 function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHierarchy = false, groups = [], groupsLoading = false, selectedPath, onPathChange, getProviderAndClient, treeOnly = false, initialExpandedPaths, onExpandedPathsChange, objectUris, downloadCommand, extraRowActions, headerAccessory }) {
 	const copySubmenu = useCopySubmenu();
 	const t = useStrings().fileExplorer;
-	const notify = useNotify();
+	const { common } = useStrings();
+	const { copy } = useCopy();
 	const slots = useSlots();
 	const fileExplorerContext = useFileExplorer();
 	const [listings, setListings] = useState(() => /* @__PURE__ */ new Map());
@@ -262,7 +245,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const [detailTab, setDetailTab] = useState("details");
 	useEffect(() => clearPreviewCache, []);
 	const { openMenu, contextMenu } = useContextMenu();
-	const [sidebarWidth, setSidebarWidth] = useLocalStorage(SIDEBAR_WIDTH_STORAGE_KEY, 300);
+	const [sidebarWidth, setSidebarWidth] = usePersistedState(SIDEBAR_WIDTH_STORAGE_KEY, 300);
 	const handleToggleExpand = useCallback((path) => {
 		setExpandedPaths((prev) => {
 			const next = new Set(prev);
@@ -276,7 +259,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const getStorageProviderAndClient = async (storageId) => {
 		const storage = findStorage(storageId);
 		if (!storage) {
-			notify.error(t.messages.storageUnavailable);
+			toast.error(t.messages.storageUnavailable);
 			return null;
 		}
 		const { provider, client } = await getProviderAndClient(storage).catch(() => ({
@@ -312,7 +295,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		const cursor = more ? listings.get(node.path)?.cursor : void 0;
 		try {
 			const factory = await getStorageProviderAndClient(node.storageId);
-			if (!factory) throw new Error("Failed to connect to storage provider.");
+			if (!factory) throw new Error(t.messages.connectFailed);
 			const { storage, provider, client } = factory;
 			if (provider.listDirectoryInput && provider.convertDataToStorageObjects) {
 				const dir_path = node.root ? "" : node.relativePath ?? "";
@@ -469,17 +452,17 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const onDropFiles = async (targetPath, files) => {
 		const targetStorageId = treeMap[targetPath]?.storageId;
 		if (!storageCanWrite(targetStorageId)) {
-			notify.error(t.messages.noWriteAccess);
+			toast.error(t.messages.noWriteAccess);
 			return;
 		}
 		if (!storageCanUpload(targetStorageId)) {
-			notify.error(t.messages.uploadsUnsupported);
+			toast.error(t.messages.uploadsUnsupported);
 			return;
 		}
 		let uploadNodes = [];
 		let totalSize = 0;
 		if (waitForUpload) {
-			notify.warning(t.messages.waitForCurrentUpload);
+			toast.warning(t.messages.waitForCurrentUpload);
 			return;
 		}
 		setWaitForUpload(true);
@@ -516,21 +499,21 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		const filesToDownload = getFilesToDownload();
 		const firstFile = filesToDownload[0];
 		if (!firstFile) {
-			notify.error(t.messages.noFilesForDownload);
+			toast.error(t.messages.noFilesForDownload);
 			return;
 		}
 		const factory = await getStorageProviderAndClient(firstFile.storageId);
 		if (!factory) return;
 		const { provider, client } = factory;
 		if (!provider.getFileInput) {
-			notify.error(t.messages.downloadUnsupported);
+			toast.error(t.messages.downloadUnsupported);
 			return;
 		}
 		for (const [index, node] of filesToDownload.entries()) {
 			const input = provider.getFileInput(node.storageName ?? "", node, void 0, node.name);
 			const [presignedUrl, error] = await client.getFile(input);
 			if (error || !presignedUrl) {
-				notify.error(error?.message ?? t.messages.downloadLinkFailed);
+				toast.error(error?.message ?? t.messages.downloadLinkFailed);
 				continue;
 			}
 			triggerBrowserDownload(presignedUrl, node.name);
@@ -542,17 +525,16 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		if (!factory) return;
 		const { provider, client } = factory;
 		if (!provider.getFileInput) {
-			notify.error(t.messages.sharingUnsupported);
+			toast.error(t.messages.sharingUnsupported);
 			return;
 		}
 		const input = provider.getFileInput(node.storageName ?? "", node);
 		const [presignedUrl, error] = await client.getFile(input);
 		if (error || !presignedUrl) {
-			notify.error(error?.message ?? t.messages.fileLinkFailed);
+			toast.error(error?.message ?? t.messages.fileLinkFailed);
 			return;
 		}
-		await navigator.clipboard.writeText(presignedUrl);
-		notify.info(t.messages.fileLinkCopied);
+		await copy(presignedUrl, { label: t.fileLink });
 	};
 	const triggerBrowserDownload = (url, filename) => {
 		const href = safeUrl(url);
@@ -568,9 +550,9 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	};
 	const getPresignedUrl = async (node, downloadFilename) => {
 		const factory = await getStorageProviderAndClient(node.storageId);
-		if (!factory) return [null, /* @__PURE__ */ new Error("Failed to connect to storage provider.")];
+		if (!factory) return [null, new Error(t.messages.connectFailed)];
 		const { provider, client } = factory;
-		if (!provider.getFileInput) return [null, /* @__PURE__ */ new Error("Preview is not supported for this storage.")];
+		if (!provider.getFileInput) return [null, new Error(t.messages.previewUnsupported)];
 		const input = provider.getFileInput(node.storageName ?? "", node, PREVIEW_URL_EXPIRES_IN, downloadFilename);
 		return client.getFile(input);
 	};
@@ -596,27 +578,22 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const copyNodeUri = async (node) => {
 		const uri = getNodeUris(node)[0];
 		if (!uri) {
-			notify.error(t.messages.noUri);
+			toast.error(t.messages.noUri);
 			return;
 		}
-		try {
-			await navigator.clipboard.writeText(uri);
-			notify.info(t.messages.uriCopied);
-		} catch {
-			notify.error(t.messages.uriCopyFailed);
-		}
+		await copy(uri, { label: t.uri });
 	};
 	const downloadNode = async (node) => {
 		const [presignedUrl, error] = await getPresignedUrl(node, node.name);
 		if (error || !presignedUrl) {
-			notify.error(error?.message ?? t.messages.downloadLinkFailed);
+			toast.error(error?.message ?? t.messages.downloadLinkFailed);
 			return;
 		}
 		triggerBrowserDownload(presignedUrl, node.name);
 	};
 	const deleteNode = (node) => {
 		if (!storageCanDelete(findStorage(node.storageId))) {
-			notify.error(t.messages.noWriteAccess);
+			toast.error(t.messages.noWriteAccess);
 			return;
 		}
 		setPendingDelete([node]);
@@ -632,7 +609,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		return [{
 			key: "create-folder",
 			label: t.createFolder.action,
-			icon: /* @__PURE__ */ jsx(FaRegFolder, {}),
+			icon: /* @__PURE__ */ jsx(FolderIcon, {}),
 			onClick: () => openCreateFolder(node)
 		}];
 	};
@@ -646,20 +623,20 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		if (isFile && canPreview(node)) actions.push({
 			key: "preview",
 			label: t.preview.preview,
-			icon: /* @__PURE__ */ jsx(LuEye, {}),
+			icon: /* @__PURE__ */ jsx(PreviewIcon, {}),
 			onClick: () => openPreview(node)
 		});
 		if (isFile) {
 			actions.push({
 				key: "download",
-				label: t.preview.download,
-				icon: /* @__PURE__ */ jsx(FiDownload, {}),
+				label: common.download,
+				icon: /* @__PURE__ */ jsx(DownloadIcon, {}),
 				onClick: () => downloadNode(node)
 			});
 			if (nodeCanShare) actions.push({
 				key: "share",
 				label: t.preview.shareFile,
-				icon: /* @__PURE__ */ jsx(PiShareBold, {}),
+				icon: /* @__PURE__ */ jsx(ShareIcon, {}),
 				onClick: () => onShareFileButtonClick(node)
 			});
 		}
@@ -667,20 +644,20 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		actions.push(...extraRowActions?.(node, storage) ?? []);
 		if (nodeCanDelete && !node.root) actions.push({
 			key: "delete",
-			label: t.preview.delete,
-			icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, {}),
+			label: common.delete,
+			icon: /* @__PURE__ */ jsx(TrashIcon, {}),
 			destructive: true,
 			onClick: () => deleteNode(node)
 		});
 		const lead = [{
 			label: isFile ? t.preview.viewDetails : t.preview.openFolder,
-			icon: isFile ? /* @__PURE__ */ jsx(FiFileText, {}) : /* @__PURE__ */ jsx(FaRegFolder, {}),
+			icon: isFile ? /* @__PURE__ */ jsx(FileTextIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {}),
 			onClick: () => handleSelectTreeItem(node.path, node)
 		}];
 		const uriExtras = uris.map((value) => ({
 			label: `${getUriScheme(value).toUpperCase()} URI`,
 			value,
-			icon: /* @__PURE__ */ jsx(FaLink, {})
+			icon: /* @__PURE__ */ jsx(LinkIcon, {})
 		}));
 		return assembleRowMenu({
 			lead,
@@ -716,7 +693,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 				const label = node.displayName || node.name;
 				return /* @__PURE__ */ jsxs("span", {
 					className: "flex min-w-0 items-center gap-1",
-					children: [i > 0 && /* @__PURE__ */ jsx(LuChevronRight, { className: "h-3 w-3 shrink-0 text-(--theme-muted-text-color)" }), isLast ? /* @__PURE__ */ jsx("span", {
+					children: [i > 0 && /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 shrink-0 text-(--theme-muted-text-color)" }), isLast ? /* @__PURE__ */ jsx("span", {
 						className: "truncate font-semibold text-(--theme-app)",
 						children: label
 					}) : /* @__PURE__ */ jsx("button", {
@@ -744,7 +721,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	};
 	const onDeleteClick = () => {
 		if (!selectedNodeCanDelete) {
-			notify.error(t.messages.noWriteAccess);
+			toast.error(t.messages.noWriteAccess);
 			return;
 		}
 		let nodesToDelete = [];
@@ -777,7 +754,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const handleDelete = async () => {
 		const firstPending = pendingDelete?.[0];
 		if (!pendingDelete || !firstPending) {
-			notify.error(t.messages.noItemsForDeletion);
+			toast.error(t.messages.noItemsForDeletion);
 			return;
 		}
 		const parentPath = getParentPath(firstPending.path);
@@ -786,44 +763,51 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		if (!factory) return;
 		const { storage, provider, client } = factory;
 		if (!provider.deleteFilesInput) {
-			notify.error(t.messages.deleteUnsupported);
+			toast.error(t.messages.deleteUnsupported);
 			return;
 		}
+		const deleting = toast.loading(t.messages.deleting);
 		try {
-			notify.loading(t.messages.deleting);
 			const input = provider.deleteFilesInput(storage.bucketName || storage.name, pendingDelete);
 			const response = await client.deleteFiles(input);
-			notify.dismiss();
 			if (parentNode) await fetchNodeChildren(parentNode, { replace: true });
 			setPendingDelete(null);
 			setCheckedItems(/* @__PURE__ */ new Set());
 			setDeleteModalOpen(false);
 			if (response?.Errors?.length) {
-				notify.error(t.messages.deleteSomeFailed);
+				toast.update(deleting, {
+					tone: "error",
+					message: t.messages.deleteSomeFailed
+				});
 				return;
 			}
 			const deletedPaths = new Set(pendingDelete.map((n) => n.path));
 			const deletedDirPrefixes = pendingDelete.filter((n) => n.type === "directory").map((n) => n.path.endsWith("/") ? n.path : `${n.path}/`);
 			const selectedRemoved = !!selectedNode && (deletedPaths.has(selectedNode.path) || deletedDirPrefixes.some((p) => selectedNode.path.startsWith(p)));
 			if (selectedNode && (selectedNode.type === "directory" || selectedRemoved)) handlePostDelete(selectedNode);
-			notify.success(t.messages.deleteSuccess);
+			toast.update(deleting, {
+				tone: "success",
+				message: t.messages.deleteSuccess
+			});
 		} catch (err) {
-			notify.dismiss();
-			notify.error(t.messages.deleteFailed(err instanceof Error ? err.message : String(err)));
+			toast.update(deleting, {
+				tone: "error",
+				message: t.messages.deleteFailed(err instanceof Error ? err.message : String(err))
+			});
 		}
 	};
 	const handleUploadInputChange = (files, selectedNode) => {
 		if (!files || !selectedNode || selectedNode.type === "file") return;
 		if (!storageCanWrite(selectedNode.storageId)) {
-			notify.error(t.messages.noWriteAccess);
+			toast.error(t.messages.noWriteAccess);
 			return;
 		}
 		if (!storageCanUpload(selectedNode.storageId)) {
-			notify.error(t.messages.uploadsUnsupported);
+			toast.error(t.messages.uploadsUnsupported);
 			return;
 		}
 		if (waitForUpload) {
-			notify.warning(t.messages.waitForCurrentUpload);
+			toast.warning(t.messages.waitForCurrentUpload);
 			return;
 		}
 		const uploadNodes = Array.from(files).map((file) => ({
@@ -843,48 +827,43 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	};
 	const handleUpload = async () => {
 		if (!pendingUpload) {
-			notify.error(t.messages.noFilesToUpload);
+			toast.error(t.messages.noFilesToUpload);
 			return;
 		}
 		if (waitForUpload) {
-			notify.info(t.messages.waitForUpload);
+			toast.info(t.messages.waitForUpload);
 			return;
 		}
 		const targetNode = treeMap[pendingUpload.targetPath];
 		if (!targetNode?.storageId) {
-			notify.error(t.messages.invalidUploadTarget);
+			toast.error(t.messages.invalidUploadTarget);
 			return;
 		}
 		const factory = await getStorageProviderAndClient(targetNode.storageId);
 		if (!factory) {
-			notify.error(t.messages.connectFailed);
+			toast.error(t.messages.connectFailed);
 			return;
 		}
 		const { storage, provider, client } = factory;
 		const storageName = storage.bucketName || storage.name;
 		const cleanTargetPath = targetNode.root ? "" : removeLeadingAndTrailingSlashes(targetNode.relativePath || "");
 		if (!provider.uploadFileInput) {
-			notify.error(t.messages.uploadUnsupported);
+			toast.error(t.messages.uploadUnsupported);
 			return;
 		}
 		const sessionId = fileExplorerContext.addUploadSession(storageName, cleanTargetPath, pendingUpload.uploadNodes, client, provider, targetNode, (node) => fetchNodeChildren(node, { replace: true }));
 		const sessionQueueIndex = fileExplorerContext.getUploadQueueIndex(sessionId);
 		if (sessionQueueIndex === -1) {
-			notify.update(sessionId, {
-				render: t.messages.uploadInitFailed,
-				type: "error",
-				icon: null,
-				isLoading: false,
-				closeButton: null
+			toast.update(sessionId, {
+				message: t.messages.uploadInitFailed,
+				tone: "error"
 			});
 			return;
 		} else if (sessionQueueIndex > 0 && fileExplorerContext.uploadQueue[sessionQueueIndex - 1] !== sessionId) {
-			notify.update(sessionId, {
-				render: t.messages.uploadQueuedInfo,
-				type: "info",
-				icon: null,
-				isLoading: false,
-				autoClose: false
+			toast.update(sessionId, {
+				message: t.messages.uploadQueuedInfo,
+				tone: "info",
+				timeout: false
 			});
 			return;
 		}
@@ -898,15 +877,15 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	};
 	const handleCreateFolder = async (name) => {
 		if (!isStorageDirectory(createFolderTarget)) {
-			notify.error(t.createFolder.invalidTarget);
+			toast.error(t.createFolder.invalidTarget);
 			return false;
 		}
 		if (!storageCanWrite(createFolderTarget.storageId)) {
-			notify.error(t.createFolder.noWriteAccess);
+			toast.error(t.messages.noWriteAccess);
 			return false;
 		}
 		if (!storageCanUpload(createFolderTarget.storageId)) {
-			notify.error(t.createFolder.unsupported);
+			toast.error(t.createFolder.unsupported);
 			return false;
 		}
 		try {
@@ -914,16 +893,16 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			if (!factory) return false;
 			const { storage, provider, client } = factory;
 			if (!provider.uploadFileInput) {
-				notify.error(t.createFolder.unsupported);
+				toast.error(t.createFolder.unsupported);
 				return false;
 			}
 			const input = provider.uploadFileInput(storage.bucketName || storage.name, getDirectoryObjectPath(createFolderTarget, name), new Blob());
 			await client.uploadFile(input);
 			await fetchNodeChildren(createFolderTarget, { replace: true });
-			notify.success(t.createFolder.success(name));
+			toast.success(t.createFolder.success(name));
 			return true;
 		} catch (error) {
-			notify.error(t.createFolder.error(getErrorMessage(error)));
+			toast.error(t.createFolder.error(getErrorMessage(error)));
 			return false;
 		}
 	};
@@ -953,23 +932,17 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 							className: "flex items-center justify-end h-10 px-3 shrink-0 border-b theme-border",
 							children: /* @__PURE__ */ jsxs("div", {
 								className: "flex gap-x-0.5",
-								children: [/* @__PURE__ */ jsx(Tooltip, {
-									content: t.chrome.refresh,
-									children: /* @__PURE__ */ jsx("button", {
-										type: "button",
-										"aria-label": t.chrome.refresh,
-										className: "inline-flex items-center justify-center h-7 w-7 rounded-md cursor-pointer theme-muted-text hover:theme-text hover:theme-hover transition-colors duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-(--theme-link)",
-										onClick: () => handleRefresh(),
-										children: /* @__PURE__ */ jsx(MdRefresh, { className: "h-3.5 w-3.5" })
-									})
+								children: [/* @__PURE__ */ jsx(RefreshButton, {
+									iconOnly: true,
+									onRefresh: () => handleRefresh()
 								}), /* @__PURE__ */ jsx(Tooltip, {
-									content: t.chrome.collapse,
+									content: common.collapse,
 									children: /* @__PURE__ */ jsx("button", {
 										type: "button",
-										"aria-label": t.chrome.collapse,
+										"aria-label": common.collapse,
 										className: "inline-flex items-center justify-center h-7 w-7 rounded-md cursor-pointer theme-muted-text hover:theme-text hover:theme-hover transition-colors duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-(--theme-link)",
 										onClick: collapseAll,
-										children: /* @__PURE__ */ jsx(BsArrowsCollapse, { className: "h-3.5 w-3.5" })
+										children: /* @__PURE__ */ jsx(CollapseIcon, { className: "h-3.5 w-3.5" })
 									})
 								})]
 							})
@@ -1012,26 +985,26 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 									caps: false,
 									className: "py-2",
 									style: { minWidth: 200 },
-									children: "Name"
+									children: t.chrome.name
 								}),
 								/* @__PURE__ */ jsx(Table.Header, {
 									caps: false,
 									className: "w-[22%] py-2",
-									children: "Type"
+									children: t.chrome.type
 								}),
 								/* @__PURE__ */ jsx(Table.Header, {
 									caps: false,
 									className: "w-[22%] py-2",
-									children: "Storages"
+									children: t.chrome.storages
 								}),
 								/* @__PURE__ */ jsx(ListActionsHeader, { actionCount: 1 }),
 								rootNodes.map((rootNode) => /* @__PURE__ */ jsx(UserRow, {
 									node: rootNode,
-									icon: getNodeIcon(rootNode, slots.storageIconUrl, t.chrome.storageIconAlt),
+									icon: getNodeIcon(rootNode),
 									storageCount: getNodeChildren(parentToChildrenMap, rootNode.path).length,
 									getItems: () => [{
 										label: t.preview.open,
-										icon: /* @__PURE__ */ jsx(FaRegFolder, {}),
+										icon: /* @__PURE__ */ jsx(FolderIcon, {}),
 										onClick: () => openUserNode(rootNode)
 									}],
 									openMenu,
@@ -1083,44 +1056,59 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											handleUploadInputChange(e.target.files, selectedNode);
 										}
 									}),
-									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsxs("button", {
-										type: "button",
+									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsx(Button, {
+										variant: "primary",
+										size: "sm",
 										"aria-label": t.createFolder.action,
-										className: "btn btn-info cursor-pointer flex items-center justify-center",
+										icon: /* @__PURE__ */ jsx(FolderIcon, {}),
 										disabled: selectedNode.type === "file" || !selectedNode.storageId,
 										onClick: () => setCreateFolderTarget(selectedNode),
-										children: [/* @__PURE__ */ jsx(FaRegFolder, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", {
+										children: /* @__PURE__ */ jsx("span", {
 											className: "hidden md:inline",
 											children: t.createFolder.action
-										})]
+										})
 									}),
 									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
 										"aria-label": t.chrome.upload,
-										className: "btn btn-info cursor-pointer flex items-center justify-between pr-0.5!",
+										className: buttonClasses({
+											variant: "primary",
+											size: "sm"
+										}),
 										disabled: selectedNode.type === "file" || !selectedNode.storageId,
-										children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(FiUpload, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", {
-											className: "hidden md:inline",
-											children: t.chrome.upload
-										})] }), /* @__PURE__ */ jsx(FaAngleDown, { className: "h-4 w-4 ml-2" })]
+										children: [
+											/* @__PURE__ */ jsx(UploadIcon, {}),
+											/* @__PURE__ */ jsx("span", {
+												className: "hidden md:inline",
+												children: t.chrome.upload
+											}),
+											/* @__PURE__ */ jsx(ChevronDownIcon, {})
+										]
 									}), /* @__PURE__ */ jsxs(MenuPopup, {
 										align: "end",
 										className: "w-36",
 										children: [/* @__PURE__ */ jsx(MenuItem, {
 											onClick: () => fileInputRef.current?.click(),
-											children: "Select Files"
+											children: t.chrome.selectFiles
 										}), /* @__PURE__ */ jsx(MenuItem, {
 											onClick: () => folderInputRef.current?.click(),
-											children: "Select Folder"
+											children: t.chrome.selectFolder
 										})]
 									})] }),
 									/* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
-										"aria-label": t.chrome.download,
-										className: "btn btn-info cursor-pointer flex items-center justify-between pr-0.5!",
+										"aria-label": common.download,
+										className: buttonClasses({
+											variant: "primary",
+											size: "sm"
+										}),
 										disabled: checkedItems.size === 0 && selectedNode.type !== "file" || hasFolderSelected() || !selectedNode.storageId,
-										children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(FiDownload, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", {
-											className: "hidden md:inline",
-											children: t.chrome.download
-										})] }), /* @__PURE__ */ jsx(FaAngleDown, { className: "h-4 w-4 ml-2" })]
+										children: [
+											/* @__PURE__ */ jsx(DownloadIcon, {}),
+											/* @__PURE__ */ jsx("span", {
+												className: "hidden md:inline",
+												children: common.download
+											}),
+											/* @__PURE__ */ jsx(ChevronDownIcon, {})
+										]
 									}), /* @__PURE__ */ jsxs(MenuPopup, {
 										align: "end",
 										className: "w-72",
@@ -1144,28 +1132,29 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											})]
 										})] })]
 									})] }),
-									/* @__PURE__ */ jsxs("button", {
-										type: "button",
+									groups.length > 0 && selectedNodeCanManageAccess && /* @__PURE__ */ jsx(Button, {
+										variant: "primary",
+										size: "sm",
 										"aria-label": t.chrome.access,
-										className: "btn btn-info cursor-pointer flex items-center justify-center",
+										icon: /* @__PURE__ */ jsx(AccessIcon, {}),
 										disabled: !selectedNode.storageId,
 										onClick: () => setAccessDrawerOpen(true),
-										hidden: groups.length === 0 || !selectedNodeCanManageAccess,
-										children: [/* @__PURE__ */ jsx(FaUsers, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", {
+										children: /* @__PURE__ */ jsx("span", {
 											className: "hidden md:inline",
 											children: t.chrome.manageAccess
-										})]
+										})
 									}),
-									selectedNodeCanDelete && /* @__PURE__ */ jsxs("button", {
-										type: "button",
-										"aria-label": t.chrome.delete,
-										className: "btn btn-destructive cursor-pointer flex items-center justify-center",
+									selectedNodeCanDelete && /* @__PURE__ */ jsx(Button, {
+										variant: "danger",
+										size: "sm",
+										"aria-label": common.delete,
+										icon: /* @__PURE__ */ jsx(TrashIcon, {}),
 										disabled: checkedItems.size === 0 && selectedNode.type !== "file" || !selectedNode.storageId,
 										onClick: onDeleteClick,
-										children: [/* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", {
+										children: /* @__PURE__ */ jsx("span", {
 											className: "hidden md:inline",
-											children: t.chrome.delete
-										})]
+											children: common.delete
+										})
 									})
 								]
 							})]
@@ -1208,12 +1197,12 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 						}),
 						selectedNode.type === "file" && (() => {
 							const uris = getNodeUris(selectedNode);
-							const fileIcon = getNodeIcon(selectedNode, slots.storageIconUrl, t.chrome.storageIconAlt) ?? /* @__PURE__ */ jsx(FiFile, { className: "h-5 w-5 theme-muted-text" });
+							const fileIcon = getNodeIcon(selectedNode) ?? /* @__PURE__ */ jsx(FileIcon, { className: "h-5 w-5 theme-muted-text" });
 							const modifiedDt = selectedNode.modified ? DateTime.fromISO(selectedNode.modified) : null;
 							const createdDt = selectedNode.created ? DateTime.fromISO(selectedNode.created) : null;
 							const previewable = canPreview(selectedNode);
 							const effectiveTab = previewable ? detailTab : "details";
-							const tabClass = (active) => clsx("mx-2.5 border-b-2 px-1 py-2.5 text-[13px] font-medium cursor-pointer transition-colors", active ? "theme-text border-(--theme-element)" : "theme-muted-text border-transparent hover:theme-text");
+							const tabClass = (active) => cx("mx-2.5 border-b-2 px-1 py-2.5 text-[13px] font-medium cursor-pointer transition-colors", active ? "theme-text border-(--theme-accent)" : "theme-muted-text border-transparent hover:theme-text");
 							return /* @__PURE__ */ jsxs("div", {
 								className: "flex h-full min-h-0 flex-col",
 								children: [/* @__PURE__ */ jsxs("div", {
@@ -1261,12 +1250,16 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 														}),
 														typeof selectedNode.size === "number" && /* @__PURE__ */ jsx("span", {
 															className: "tabular-nums",
-															children: formatFileSize(selectedNode.size)
+															children: formatBytes(selectedNode.size)
 														}),
 														modifiedDt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 															"aria-hidden": true,
 															children: "·"
-														}), /* @__PURE__ */ jsxs("span", { children: ["Modified ", modifiedDt.toRelative()] })] })
+														}), /* @__PURE__ */ jsxs("span", { children: [
+															t.chrome.modified,
+															" ",
+															/* @__PURE__ */ jsx(RelativeTime, { value: modifiedDt })
+														] })] })
 													]
 												})]
 											})]
@@ -1289,7 +1282,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											className: "px-6 py-5 mt-5 border-t theme-border",
 											children: [/* @__PURE__ */ jsx("h3", {
 												className: "text-[11px] font-semibold uppercase tracking-widest theme-muted-text mb-3",
-												children: "Details"
+												children: t.chrome.details
 											}), /* @__PURE__ */ jsxs("dl", {
 												className: "grid grid-cols-[minmax(0,140px)_1fr] gap-x-6 gap-y-2 text-sm",
 												children: [
@@ -1298,11 +1291,11 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 														children: t.chrome.size
 													}), /* @__PURE__ */ jsx("dd", {
 														className: "tabular-nums",
-														children: formatFileSize(selectedNode.size)
+														children: formatBytes(selectedNode.size)
 													})] }),
 													selectedNode.contentType && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
-														children: "Content Type"
+														children: t.chrome.contentType
 													}), /* @__PURE__ */ jsx("dd", {
 														className: "font-mono text-xs",
 														children: selectedNode.contentType
@@ -1311,22 +1304,22 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 														className: "theme-muted-text",
 														children: t.chrome.created
 													}), /* @__PURE__ */ jsxs("dd", { children: [
-														createdDt.toLocaleString(DateTime.DATETIME_MED),
+														formatDateTime(createdDt),
 														" ",
 														/* @__PURE__ */ jsxs("span", {
 															className: "theme-muted-text",
-															children: ["· ", createdDt.toRelative()]
+															children: ["· ", /* @__PURE__ */ jsx(RelativeTime, { value: createdDt })]
 														})
 													] })] }),
 													modifiedDt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
-														children: "Last Modified"
+														children: t.chrome.lastModified
 													}), /* @__PURE__ */ jsxs("dd", { children: [
-														modifiedDt.toLocaleString(DateTime.DATETIME_MED),
+														formatDateTime(modifiedDt),
 														" ",
 														/* @__PURE__ */ jsxs("span", {
 															className: "theme-muted-text",
-															children: ["· ", modifiedDt.toRelative()]
+															children: ["· ", /* @__PURE__ */ jsx(RelativeTime, { value: modifiedDt })]
 														})
 													] })] }),
 													selectedNode.hash && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
@@ -1338,7 +1331,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 													})] }),
 													selectedNode.storageClass && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
-														children: "Storage Class"
+														children: t.chrome.storageClass
 													}), /* @__PURE__ */ jsx("dd", {
 														className: "font-mono text-xs uppercase tracking-wider",
 														children: selectedNode.storageClass
@@ -1368,7 +1361,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			/* @__PURE__ */ jsx(CreateModal, {
 				open: !!createFolderTarget,
 				onClose: () => setCreateFolderTarget(null),
-				typeIcon: /* @__PURE__ */ jsx(FaRegFolder, { className: "w-3 h-3" }),
+				typeIcon: /* @__PURE__ */ jsx(FolderIcon, { className: "w-3 h-3" }),
 				typeLabel: t.createFolder.folder,
 				namePlaceholder: t.createFolder.namePlaceholder,
 				submitLabel: t.createFolder.submit,
@@ -1378,7 +1371,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			}),
 			waitForUpload && /* @__PURE__ */ jsx("div", {
 				className: "absolute inset-0 bg-(--theme-app-bg)/75 backdrop-blur-[2px] transition-opacity flex items-center justify-center z-50",
-				children: /* @__PURE__ */ jsx(Loader, { full: true })
+				children: /* @__PURE__ */ jsx(Loader, {})
 			}),
 			/* @__PURE__ */ jsx(ConfirmModal, {
 				open: uploadModalOpen && !!pendingUpload,
@@ -1412,12 +1405,12 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 							children: [
 								/* @__PURE__ */ jsx("span", {
 									className: "font-semibold",
-									children: t.confirmUpload.totalSize
+									children: t.upload.totalSize
 								}),
 								" ",
 								/* @__PURE__ */ jsx("span", {
-									className: clsx(isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && "text-amber-800 font-semibold"),
-									children: formatFileSize(pendingUpload?.totalSize ?? 0)
+									className: cx(isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && "text-amber-800 font-semibold"),
+									children: formatBytes(pendingUpload?.totalSize ?? 0)
 								})
 							]
 						}),
@@ -1425,14 +1418,14 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 							className: "mt-3 p-3 bg-amber-50 border border-amber-200 rounded-lg",
 							children: /* @__PURE__ */ jsxs("div", {
 								className: "flex items-start gap-2",
-								children: [/* @__PURE__ */ jsx(TbAlertTriangle, { className: "w-4 h-4 text-amber-600 shrink-0 mt-0.5" }), /* @__PURE__ */ jsxs("div", {
+								children: [/* @__PURE__ */ jsx(WarningIcon, { className: "w-4 h-4 text-amber-600 shrink-0 mt-0.5" }), /* @__PURE__ */ jsxs("div", {
 									className: "text-amber-800",
 									children: [/* @__PURE__ */ jsx("div", {
 										className: "font-semibold mb-1",
 										children: t.confirmUpload.sizeLimitTitle
 									}), /* @__PURE__ */ jsxs("div", {
 										className: "text-sm",
-										children: [/* @__PURE__ */ jsx("p", { children: t.confirmUpload.sizeLimitBody(formatFileSize(pendingUpload?.totalSize ?? 0), formatFileSize(MAX_UPLOAD_SIZE)) }), /* @__PURE__ */ jsx("p", { children: t.confirmUpload.sizeLimitHint })]
+										children: [/* @__PURE__ */ jsx("p", { children: t.confirmUpload.sizeLimitBody(formatBytes(pendingUpload?.totalSize ?? 0), formatBytes(MAX_UPLOAD_SIZE)) }), /* @__PURE__ */ jsx("p", { children: t.confirmUpload.sizeLimitHint })]
 									})]
 								})]
 							})
@@ -1451,7 +1444,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 				destructive: true,
 				title: t.confirmDelete.title,
 				description: t.confirmDelete.text,
-				confirmLabel: t.confirmDelete.action,
+				confirmLabel: common.delete,
 				onConfirm: handleDelete,
 				children: /* @__PURE__ */ jsx("div", {
 					className: "text-sm flex flex-col gap-2 mt-2 text-left",