@parallelworks/ui 0.20.0 → 0.21.1

package/dist/file-explorer/FileExplorer.js

@@ -1,6 +1,21 @@
 import { safeUrl } from "../safeUrl.js";
 import { useNotify, useSlots, useStrings } from "../components/Provider.js";
-import { AccessIcon, AlertIcon, AngleDownIcon, ChevronRightIcon, ClipboardIcon, CollapseIcon, DownloadFileIcon, EyeIcon, FileIcon, FileTextIcon, FolderIcon, LinkIcon, RefreshIcon, ShareIcon, TrashIcon, UploadIcon } from "../icons.js";
+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 { keyedByContent } from "../components/keys.js";
 import { TOOLTIP_ID, TooltipInfo } from "../components/Tooltip.js";
 import { ConfirmModal } from "../components/ConfirmModal.js";
@@ -51,11 +66,15 @@ function UriCard({ 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(ClipboardIcon, { className: "h-3.5 w-3.5" })
+				children: /* @__PURE__ */ jsx(HiOutlineClipboardCopy, { className: "h-3.5 w-3.5" })
 			})
 		]
 	});
 }
+var MAX_UPLOAD_SIZE = 85899345920;
+function isUploadSizeExceeded(size) {
+	return size > MAX_UPLOAD_SIZE;
+}
 function isStorageDirectory(node) {
 	return node?.type === "directory" && !!node.storageId;
 }
@@ -68,7 +87,7 @@ function getAncestorDirPaths(path) {
 	const segments = (isDir ? path.slice(0, -1) : path).split("/").filter(Boolean);
 	const dirSegmentCount = isDir ? segments.length : segments.length - 1;
 	const ancestors = [];
-	for (let i = 1; i <= dirSegmentCount; i++) ancestors.push(segments.slice(0, i).join("/") + "/");
+	for (let i = 1; i <= dirSegmentCount; i++) ancestors.push(`${segments.slice(0, i).join("/")}/`);
 	return ancestors;
 }
 /** The tree's width is the host's when the tree is embedded on its own, and this
@@ -157,9 +176,10 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		setCheckedItems(/* @__PURE__ */ new Set());
 	}
 	const selectedNodeChildren = useMemo(() => selectedNode ? getNodeChildren(parentToChildrenMap, selectedNode.path) : [], [parentToChildrenMap, selectedNode]);
-	const storageCanWrite = (storageId) => storages.find((s) => s.id === storageId)?.canWrite === true;
-	const storageCanUpload = (storageId) => storages.find((s) => s.id === storageId)?.canUpload !== false;
-	const selectedStorage = storages.find((s) => s.id === selectedNode?.storageId);
+	const findStorage = (storageId) => storages.find((s) => s.id === storageId);
+	const storageCanWrite = (storageId) => findStorage(storageId)?.canWrite === true;
+	const storageCanUpload = (storageId) => findStorage(storageId)?.canUpload !== false;
+	const selectedStorage = findStorage(selectedNode?.storageId);
 	const selectedNodeCanWrite = selectedStorage?.canWrite === true;
 	const selectedNodeCanUpload = selectedStorage?.canUpload !== false;
 	const selectedNodeCanShare = selectedStorage?.canShare !== false;
@@ -181,10 +201,6 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	useEffect(() => clearPreviewCache, []);
 	const { openMenu, contextMenu } = useRowMenu();
 	const [sidebarWidth, setSidebarWidth] = useLocalStorage(SIDEBAR_WIDTH_STORAGE_KEY, 300);
-	const MAX_UPLOAD_SIZE = 85899345920;
-	const isUploadSizeExceeded = (size) => {
-		return size > MAX_UPLOAD_SIZE;
-	};
 	const handleToggleExpand = useCallback((path) => {
 		setExpandedPaths((prev) => {
 			const next = new Set(prev);
@@ -196,10 +212,10 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		setExpandedPaths(/* @__PURE__ */ new Set([""]));
 	}, []);
 	const getStorageProviderAndClient = async (storageId) => {
-		const storage = storages.find((s) => s.id === storageId);
+		const storage = findStorage(storageId);
 		if (!storage) {
 			notify.error(t.messages.storageUnavailable);
-			return;
+			return null;
 		}
 		const { provider, client } = await getProviderAndClient(storage).catch(() => ({
 			provider: null,
@@ -236,7 +252,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			const factory = await getStorageProviderAndClient(node.storageId);
 			if (!factory) throw new Error("Failed to connect to storage provider.");
 			const { storage, provider, client } = factory;
-			if (provider?.listDirectoryInput && provider?.convertDataToStorageObjects) {
+			if (provider.listDirectoryInput && provider.convertDataToStorageObjects) {
 				const dir_path = node.root ? "" : node.relativePath ?? "";
 				const input = provider.listDirectoryInput(storage, dir_path, cursor ? { cursor } : {});
 				const objects = await client.listDirectory(input);
@@ -262,7 +278,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			const errorMessage = isCorsError ? error.message || "CORS error" : error instanceof Error ? error.message : "Unknown error";
 			if (owns()) {
 				setListings((prev) => recordListingError(options?.replace ? clearListingsUnder(prev, node.path) : prev, node.path, errorMessage));
-				updateConnectionIssuesMessage((prev) => new Map(prev).set(nodeStorageId, `Failed to load contents for ${node?.displayName || node?.name}: ${errorMessage}`));
+				updateConnectionIssuesMessage((prev) => new Map(prev).set(nodeStorageId, `Failed to load contents for ${node.displayName || node.name}: ${errorMessage}`));
 				if (isCorsError) setHasCorsIssue((prev) => new Map(prev).set(nodeStorageId, true));
 			}
 			return { corsError: isCorsError };
@@ -283,7 +299,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			setDetailTab("details");
 		}
 		setSelectedPath(path);
-		if (node.type === "directory" && node?.storageId && !isListed(listings, path)) await fetchNodeChildren(node);
+		if (node.type === "directory" && node.storageId && !isListed(listings, path)) await fetchNodeChildren(node);
 	};
 	useEffect(() => {
 		if (!normalizedSelectedPath) return;
@@ -430,18 +446,21 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		if (selectedNode && selectedNode.type === "directory") return true;
 		return false;
 	};
+	const getFilesToDownload = () => {
+		if (checkedItems.size > 0) return Array.from(checkedItems).map((path) => treeMap[path]).filter((node) => node?.type === "file");
+		return selectedNode?.type === "file" ? [selectedNode] : [];
+	};
 	const handleDownload = async () => {
-		let filesToDownload = [];
-		if (checkedItems.size > 0) filesToDownload = Array.from(checkedItems).map((path) => treeMap[path]).filter((node) => !!node && node.type === "file");
-		else if (selectedNode && selectedNode.type === "file") filesToDownload = [selectedNode];
-		if (filesToDownload.length === 0) {
+		const filesToDownload = getFilesToDownload();
+		const firstFile = filesToDownload[0];
+		if (!firstFile) {
 			notify.error(t.messages.noFilesForDownload);
 			return;
 		}
-		const factory = await getStorageProviderAndClient(filesToDownload[0].storageId);
+		const factory = await getStorageProviderAndClient(firstFile.storageId);
 		if (!factory) return;
 		const { provider, client } = factory;
-		if (!provider?.getFileInput) {
+		if (!provider.getFileInput) {
 			notify.error(t.messages.downloadUnsupported);
 			return;
 		}
@@ -460,7 +479,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		const factory = await getStorageProviderAndClient(node.storageId);
 		if (!factory) return;
 		const { provider, client } = factory;
-		if (!provider?.getFileInput) {
+		if (!provider.getFileInput) {
 			notify.error(t.messages.sharingUnsupported);
 			return;
 		}
@@ -489,14 +508,14 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		const factory = await getStorageProviderAndClient(node.storageId);
 		if (!factory) return [null, /* @__PURE__ */ new Error("Failed to connect to storage provider.")];
 		const { provider, client } = factory;
-		if (!provider?.getFileInput) return [null, /* @__PURE__ */ new Error("Preview is not supported for this storage.")];
+		if (!provider.getFileInput) return [null, /* @__PURE__ */ new Error("Preview is not supported for this storage.")];
 		const input = provider.getFileInput(node.storageName ?? "", node, PREVIEW_URL_EXPIRES_IN, downloadFilename);
 		return client.getFile(input);
 	};
 	const previewSiblings = useMemo(() => previewNode ? getNodeChildren(parentToChildrenMap, getParentPath(previewNode.path)).filter((n) => n.type === "file") : [], [previewNode, parentToChildrenMap]);
 	const openPreview = (node) => {
 		if (node.type !== "file") return;
-		if (onOpenFile?.(node, storages.find((s) => s.id === node.storageId))) return;
+		if (onOpenFile?.(node, findStorage(node.storageId))) return;
 		setPreviewNode(node);
 		setPreviewOpen(true);
 	};
@@ -508,7 +527,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		if (!expandedPaths.has(node.path)) handleToggleExpand(node.path);
 	};
 	const getNodeUris = (node) => {
-		const storage = storages.find((s) => s.id === node.storageId);
+		const storage = findStorage(node.storageId);
 		if (!storage || !objectUris) return [];
 		return objectUris(storage, getObjectKeyFromNode(node));
 	};
@@ -534,7 +553,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		triggerBrowserDownload(presignedUrl, node.name);
 	};
 	const deleteNode = (node) => {
-		if (storages.find((s) => s.id === node.storageId)?.canWrite !== true) {
+		if (findStorage(node.storageId)?.canWrite !== true) {
 			notify.error(t.messages.noWriteAccess);
 			return;
 		}
@@ -551,12 +570,12 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		return [{
 			key: "create-folder",
 			label: t.createFolder.action,
-			icon: /* @__PURE__ */ jsx(FolderIcon, {}),
+			icon: /* @__PURE__ */ jsx(FaRegFolder, {}),
 			onSelect: () => openCreateFolder(node)
 		}];
 	};
 	const buildRowMenu = (node) => {
-		const storage = storages.find((s) => s.id === node.storageId);
+		const storage = findStorage(node.storageId);
 		const nodeCanWrite = storage?.canWrite === true;
 		const nodeCanShare = storage?.canShare !== false;
 		const isFile = node.type === "file";
@@ -565,20 +584,20 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		if (isFile && canPreview(node)) actions.push({
 			key: "preview",
 			label: t.preview.preview,
-			icon: /* @__PURE__ */ jsx(EyeIcon, {}),
+			icon: /* @__PURE__ */ jsx(LuEye, {}),
 			onSelect: () => openPreview(node)
 		});
 		if (isFile) {
 			actions.push({
 				key: "download",
 				label: t.preview.download,
-				icon: /* @__PURE__ */ jsx(DownloadFileIcon, {}),
+				icon: /* @__PURE__ */ jsx(FiDownload, {}),
 				onSelect: () => downloadNode(node)
 			});
 			if (nodeCanShare) actions.push({
 				key: "share",
 				label: t.preview.shareFile,
-				icon: /* @__PURE__ */ jsx(ShareIcon, {}),
+				icon: /* @__PURE__ */ jsx(PiShareBold, {}),
 				onSelect: () => onShareFileButtonClick(node)
 			});
 		}
@@ -586,20 +605,20 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		if (nodeCanWrite && !node.root) actions.push({
 			key: "delete",
 			label: t.preview.delete,
-			icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+			icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, {}),
 			destructive: true,
 			onSelect: () => deleteNode(node)
 		});
 		const lead = [{
 			kind: "action",
 			label: isFile ? t.preview.viewDetails : t.preview.openFolder,
-			icon: isFile ? /* @__PURE__ */ jsx(FileTextIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {}),
+			icon: isFile ? /* @__PURE__ */ jsx(FiFileText, {}) : /* @__PURE__ */ jsx(FaRegFolder, {}),
 			onSelect: () => handleSelectTreeItem(node.path, node)
 		}];
 		const uriExtras = uris.map((value) => ({
 			label: `${getUriScheme(value).toUpperCase()} URI`,
 			value,
-			icon: /* @__PURE__ */ jsx(LinkIcon, {})
+			icon: /* @__PURE__ */ jsx(FaLink, {})
 		}));
 		return assembleRowMenu({
 			lead,
@@ -635,7 +654,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(ChevronRightIcon, { className: "h-3 w-3 shrink-0 text-(--theme-muted-text-color)" }), isLast ? /* @__PURE__ */ jsx("span", {
+					children: [i > 0 && /* @__PURE__ */ jsx(LuChevronRight, { 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", {
@@ -649,13 +668,10 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		});
 	};
 	const generateDownloadCommand = () => {
-		let filesToDownload = [];
-		if (checkedItems.size > 0) filesToDownload = Array.from(checkedItems).map((path) => treeMap[path]).filter((node) => !!node && node.type === "file");
-		else if (selectedNode && selectedNode.type === "file") filesToDownload = [selectedNode];
-		if (filesToDownload.length === 0) return "";
-		if (!downloadCommand) return "";
+		const filesToDownload = getFilesToDownload();
+		if (!downloadCommand || filesToDownload.length === 0) return "";
 		const objects = filesToDownload.flatMap((node) => {
-			const storage = storages.find((s) => s.id === node.storageId);
+			const storage = findStorage(node.storageId);
 			return storage ? [{
 				storage,
 				key: getObjectKeyFromNode(node),
@@ -697,16 +713,17 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		}
 	};
 	const handleDelete = async () => {
-		if (!pendingDelete || pendingDelete.length === 0) {
+		const firstPending = pendingDelete?.[0];
+		if (!pendingDelete || !firstPending) {
 			notify.error(t.messages.noItemsForDeletion);
 			return;
 		}
-		const parentPath = getParentPath(pendingDelete[0].path);
+		const parentPath = getParentPath(firstPending.path);
 		const parentNode = treeMap[parentPath];
-		const factory = await getStorageProviderAndClient(pendingDelete[0].storageId);
+		const factory = await getStorageProviderAndClient(firstPending.storageId);
 		if (!factory) return;
 		const { storage, provider, client } = factory;
-		if (!provider?.deleteFilesInput) {
+		if (!provider.deleteFilesInput) {
 			notify.error(t.messages.deleteUnsupported);
 			return;
 		}
@@ -747,7 +764,6 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			notify.warning(t.messages.waitForCurrentUpload);
 			return;
 		}
-		setWaitForUpload(true);
 		const uploadNodes = Array.from(files).map((file) => ({
 			name: file.name,
 			file,
@@ -760,7 +776,6 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			totalSize
 		});
 		setUploadModalOpen(true);
-		setWaitForUpload(false);
 		if (fileInputRef.current) fileInputRef.current.value = "";
 		if (folderInputRef.current) folderInputRef.current.value = "";
 	};
@@ -774,7 +789,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			return;
 		}
 		const targetNode = treeMap[pendingUpload.targetPath];
-		if (!targetNode || !targetNode.storageId) {
+		if (!targetNode?.storageId) {
 			notify.error(t.messages.invalidUploadTarget);
 			return;
 		}
@@ -786,7 +801,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		const { storage, provider, client } = factory;
 		const storageName = storage.bucketName || storage.name;
 		const cleanTargetPath = targetNode.root ? "" : removeLeadingAndTrailingSlashes(targetNode.relativePath || "");
-		if (!provider?.uploadFileInput) {
+		if (!provider.uploadFileInput) {
 			notify.error(t.messages.uploadUnsupported);
 			return;
 		}
@@ -813,7 +828,6 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		}
 		setUploadModalOpen(false);
 		setPendingUpload(null);
-		setWaitForUpload(false);
 	};
 	const validateFolderName = (name) => {
 		if (createFolderTarget?.type !== "directory") return null;
@@ -861,6 +875,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		if (onRefresh) onRefresh();
 		return { corsError: false };
 	};
+	const downloadCommandText = generateDownloadCommand();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-full h-full flex relative",
 		children: [
@@ -884,7 +899,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 									"data-tooltip-class-name": "z-50",
 									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(RefreshIcon, { className: "h-3.5 w-3.5" })
+									children: /* @__PURE__ */ jsx(MdRefresh, { className: "h-3.5 w-3.5" })
 								}), /* @__PURE__ */ jsx("button", {
 									type: "button",
 									"aria-label": t.chrome.collapse,
@@ -893,7 +908,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 									"data-tooltip-class-name": "z-50",
 									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(CollapseIcon, { className: "h-3.5 w-3.5" })
+									children: /* @__PURE__ */ jsx(BsArrowsCollapse, { className: "h-3.5 w-3.5" })
 								})]
 							})
 						}), /* @__PURE__ */ jsx(TreeView, {
@@ -955,7 +970,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 									getItems: () => [{
 										kind: "action",
 										label: t.preview.open,
-										icon: /* @__PURE__ */ jsx(FolderIcon, {}),
+										icon: /* @__PURE__ */ jsx(FaRegFolder, {}),
 										onSelect: () => openUserNode(rootNode)
 									}],
 									openMenu,
@@ -1012,7 +1027,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 										className: "btn btn-info cursor-pointer flex items-center justify-center",
 										disabled: selectedNode.type === "file" || !selectedNode.storageId,
 										onClick: () => setCreateFolderTarget(selectedNode),
-										children: [/* @__PURE__ */ jsx(FolderIcon, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", {
+										children: [/* @__PURE__ */ jsx(FaRegFolder, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", {
 											className: "hidden md:inline",
 											children: t.createFolder.action
 										})]
@@ -1021,10 +1036,10 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 										"aria-label": t.chrome.upload,
 										className: "btn btn-info cursor-pointer flex items-center justify-between pr-0.5!",
 										disabled: selectedNode.type === "file" || !selectedNode.storageId,
-										children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(UploadIcon, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", {
+										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(AngleDownIcon, { className: "h-4 w-4 ml-2" })]
+										})] }), /* @__PURE__ */ jsx(FaAngleDown, { className: "h-4 w-4 ml-2" })]
 									}), /* @__PURE__ */ jsxs(MenuItems, {
 										transition: true,
 										anchor: "bottom end",
@@ -1045,10 +1060,10 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 										"aria-label": t.chrome.download,
 										className: "btn btn-info cursor-pointer flex items-center justify-between pr-0.5!",
 										disabled: checkedItems.size === 0 && selectedNode.type !== "file" || hasFolderSelected() || !selectedNode.storageId,
-										children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DownloadFileIcon, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", {
+										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(AngleDownIcon, { className: "h-4 w-4 ml-2" })]
+										})] }), /* @__PURE__ */ jsx(FaAngleDown, { className: "h-4 w-4 ml-2" })]
 									}), /* @__PURE__ */ jsxs(MenuItems, {
 										transition: true,
 										anchor: "bottom end",
@@ -1058,22 +1073,19 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											className: "text-sm rounded-sm hover:theme-hover cursor-pointer w-full items-center px-2 py-1.5",
 											onClick: handleDownload,
 											children: t.chrome.downloadFromBrowser
-										}) }), downloadCommand && generateDownloadCommand() && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuSeparator, { className: "my-0.5 h-px theme-border" }), /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+										}) }), downloadCommand && downloadCommandText && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuSeparator, { className: "my-0.5 h-px theme-border" }), /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 											className: "text-sm w-full text-center pointer-events-none px-2 py-1.5",
 											children: downloadCommand.label
-										}), (() => {
-											const downloadCommand = generateDownloadCommand();
-											return /* @__PURE__ */ jsx(CopyCodeBlock, {
-												textToCopy: downloadCommand,
-												children: /* @__PURE__ */ jsx("div", {
-													className: "overflow-x-auto text-xs",
-													children: keyedByContent(downloadCommand.split("\n"), (l) => l).map(({ key, item: line }) => /* @__PURE__ */ jsx("div", {
-														className: "whitespace-nowrap",
-														children: line
-													}, key))
-												})
-											});
-										})()] }) })] })]
+										}), /* @__PURE__ */ jsx(CopyCodeBlock, {
+											textToCopy: downloadCommandText,
+											children: /* @__PURE__ */ jsx("div", {
+												className: "overflow-x-auto text-xs",
+												children: keyedByContent(downloadCommandText.split("\n"), (l) => l).map(({ key, item: line }) => /* @__PURE__ */ jsx("div", {
+													className: "whitespace-nowrap",
+													children: line
+												}, key))
+											})
+										})] }) })] })]
 									})] }),
 									/* @__PURE__ */ jsxs("button", {
 										type: "button",
@@ -1081,8 +1093,8 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 										className: "btn btn-info cursor-pointer flex items-center justify-center",
 										disabled: !selectedNode.storageId,
 										onClick: () => setAccessDrawerOpen(true),
-										hidden: !groups || groups.length === 0 || !selectedNodeCanManageAccess,
-										children: [/* @__PURE__ */ jsx(AccessIcon, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", {
+										hidden: groups.length === 0 || !selectedNodeCanManageAccess,
+										children: [/* @__PURE__ */ jsx(FaUsers, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", {
 											className: "hidden md:inline",
 											children: t.chrome.manageAccess
 										})]
@@ -1093,7 +1105,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 										className: "btn btn-destructive cursor-pointer flex items-center justify-center",
 										disabled: checkedItems.size === 0 && selectedNode.type !== "file" || !selectedNode.storageId,
 										onClick: onDeleteClick,
-										children: [/* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", {
+										children: [/* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", {
 											className: "hidden md:inline",
 											children: t.chrome.delete
 										})]
@@ -1129,7 +1141,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 										onSelectAll: handleBatchCheckbox
 									})
 								}), /* @__PURE__ */ jsx(NoDataAvailablePreview, {
-									selectedStorage: storages.find((s) => s.id === selectedNode.storageId) || null,
+									selectedStorage: selectedStorage ?? null,
 									canWrite: selectedNodeCanWrite,
 									onRefresh: handleRefresh,
 									error: hasCorsIssue.get(selectedNode.storageId ?? "") ? new CorsError(connectionIssuesMessage.get(selectedNode.storageId ?? "") || "") : null,
@@ -1139,7 +1151,7 @@ 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(FileIcon, { className: "h-5 w-5 theme-muted-text" });
+							const fileIcon = getNodeIcon(selectedNode, slots.storageIconUrl, t.chrome.storageIconAlt) ?? /* @__PURE__ */ jsx(FiFile, { 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);
@@ -1162,7 +1174,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 									})]
 								}), effectiveTab === "preview" && previewable ? /* @__PURE__ */ jsx(FilePreviewInline, {
 									node: selectedNode,
-									storage: storages.find((s) => s.id === selectedNode.storageId) ?? null,
+									storage: selectedStorage ?? null,
 									getPresignedUrl,
 									onOpenFull: openPreview,
 									onDownload: downloadNode,
@@ -1289,7 +1301,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 				open: previewOpen,
 				node: previewNode,
 				siblings: previewSiblings,
-				storage: storages.find((s) => s.id === previewNode?.storageId) ?? null,
+				storage: findStorage(previewNode?.storageId) ?? null,
 				getPresignedUrl,
 				onNavigate: setPreviewNode,
 				onClose: closePreview,
@@ -1299,7 +1311,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			/* @__PURE__ */ jsx(CreateModal, {
 				open: !!createFolderTarget,
 				onClose: () => setCreateFolderTarget(null),
-				typeIcon: /* @__PURE__ */ jsx(FolderIcon, { className: "w-3 h-3" }),
+				typeIcon: /* @__PURE__ */ jsx(FaRegFolder, { className: "w-3 h-3" }),
 				typeLabel: t.createFolder.folder,
 				namePlaceholder: t.createFolder.namePlaceholder,
 				submitLabel: t.createFolder.submit,
@@ -1356,7 +1368,7 @@ 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(AlertIcon, { className: "w-4 h-4 text-amber-600 shrink-0 mt-0.5" }), /* @__PURE__ */ jsxs("div", {
+								children: [/* @__PURE__ */ jsx(TbAlertTriangle, { 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",
@@ -1396,7 +1408,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 				open: accessDrawerOpen,
 				setOpen: setAccessDrawerOpen,
 				groups,
-				storage: storages.find((s) => s.id === selectedNode.storageId)
+				storage: selectedStorage
 			})
 		]
 	});

package/dist/file-explorer/FileExplorerContext.d.ts

@@ -1,5 +1,5 @@
 import type { IFileExplorerClient, IFileExplorerProvider } from './lib/fileExplorer.js';
-import type { TreeNode, UploadFileProgress, UploadNode, UploadSession } from './lib/types.js';
+import type { TreeNode, UploadNode, UploadSession } from './lib/types.js';
 interface IFileExplorerContextValue {
     uploadSessionMap: Map<string, UploadSession>;
     uploadQueue: string[];
@@ -7,7 +7,6 @@ interface IFileExplorerContextValue {
     getUploadSessionById: (sessionId: string) => UploadSession | undefined;
     getUploadQueueIndex: (sessionId: string) => number;
     startUploadSession: (sessionId: string) => Promise<void>;
-    updateFileUploadProgress?: (sessionId: string, fileKey: string, progress: UploadFileProgress) => void;
 }
 interface IFileExplorerProviderProps {
     children: React.ReactNode;