@parallelworks/ui 0.44.0 → 0.45.0

package/dist/file-explorer/helpers.js

@@ -1,109 +1,101 @@
-import { BsFileEarmarkZip } from "../icons/bs/BsFileEarmarkZip.js";
-import { FaRegFileImage } from "../icons/fa/FaRegFileImage.js";
-import { FaRegFolder } from "../icons/fa/FaRegFolder.js";
-import { FaUser } from "../icons/fa/FaUser.js";
-import { FaRegFilePdf } from "../icons/fa6/FaRegFilePdf.js";
-import { FaWandMagicSparkles } from "../icons/fa6/FaWandMagicSparkles.js";
-import { FiFile } from "../icons/fi/FiFile.js";
-import { FiFileText } from "../icons/fi/FiFileText.js";
-import { FiHardDrive } from "../icons/fi/FiHardDrive.js";
-import { GoVideo } from "../icons/go/GoVideo.js";
-import { IoDocumentTextOutline } from "../icons/io5/IoDocumentTextOutline.js";
-import { LuSheet } from "../icons/lu/LuSheet.js";
-import { MdRefresh } from "../icons/md/MdRefresh.js";
-import { PiShareBold } from "../icons/pi/PiShareBold.js";
-import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
-import { positionKeys } from "../components/keys.js";
-import { useNotify, useProvisionCorsRules, useStrings } from "../components/Provider.js";
+import { cx } from "../cx.js";
+import { CustomizeIcon, DiskIcon, FileIcon, FileTextIcon, FolderIcon, ImageIcon, PdfIcon, RefreshIcon, RetryIcon, ShareIcon, SpreadsheetIcon, UserIcon, VideoIcon, WarningIcon, ZipIcon } from "../icons.js";
+import { toast } from "../components/Toast.js";
+import { usePersistedState, useProvisionCorsRules, useSlots, useStrings } from "../components/Provider.js";
+import { Button } from "../components/Button.js";
 import Callout from "../components/Callout.js";
+import { ProgressBar } from "../components/Meter.js";
+import { Skeleton } from "../components/Skeleton.js";
+import { formatBytes } from "../format.js";
+import { useElapsed } from "../components/relativeTime.js";
 import { ListSkeleton } from "../list/ListTable.js";
-import { formatFileSize, getFileExtension } from "./lib/utils.js";
+import { getFileExtension } from "./lib/utils.js";
 import { CorsError } from "./lib/errors.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useTransition } from "react";
-import { useLocalStorage } from "usehooks-ts";
+import { useState, useTransition } from "react";
 //#region src/file-explorer/helpers.tsx
 var SIDEBAR_WIDTH_STORAGE_KEY = "fileExplorerSidebarWidth";
 var contentTypeIconMap = [
 	{
 		pattern: /^image\//,
-		icon: /* @__PURE__ */ jsx(FaRegFileImage, { className: "h-4 w-4 text-blue-500" })
+		icon: /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4 text-blue-500" })
 	},
 	{
 		pattern: /^video\//,
-		icon: /* @__PURE__ */ jsx(GoVideo, { className: "h-4 w-4 text-purple-500" })
+		icon: /* @__PURE__ */ jsx(VideoIcon, { className: "h-4 w-4 text-purple-500" })
 	},
 	{
 		pattern: /^application\/pdf$/,
-		icon: /* @__PURE__ */ jsx(FaRegFilePdf, { className: "h-4 w-4 text-red-500" })
+		icon: /* @__PURE__ */ jsx(PdfIcon, { className: "h-4 w-4 text-red-500" })
 	},
 	{
 		pattern: /(spreadsheet|csv|excel)/,
-		icon: /* @__PURE__ */ jsx(LuSheet, { className: "h-4 w-4 text-green-500" })
+		icon: /* @__PURE__ */ jsx(SpreadsheetIcon, { className: "h-4 w-4 text-green-500" })
 	},
 	{
 		pattern: /(document|word)/,
-		icon: /* @__PURE__ */ jsx(IoDocumentTextOutline, { className: "h-4 w-4 text-blue-400" })
+		icon: /* @__PURE__ */ jsx(FileTextIcon, { className: "h-4 w-4 text-blue-400" })
 	},
 	{
 		pattern: /(javascript|json|css|html)/,
-		icon: /* @__PURE__ */ jsx(FiFileText, { className: "h-4 w-4 text-yellow-500" })
+		icon: /* @__PURE__ */ jsx(FileTextIcon, { className: "h-4 w-4 text-yellow-500" })
 	},
 	{
 		pattern: /(zip|gzip|tar)/,
-		icon: /* @__PURE__ */ jsx(BsFileEarmarkZip, { className: "h-4 w-4 text-purple-600" })
+		icon: /* @__PURE__ */ jsx(ZipIcon, { className: "h-4 w-4 text-purple-600" })
 	}
 ];
 var extensionIconMap = [
 	{
 		pattern: /^(jpe?g|png|gif|svg|webp)$/i,
-		icon: /* @__PURE__ */ jsx(FaRegFileImage, { className: "h-4 w-4 text-blue-500" })
+		icon: /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4 text-blue-500" })
 	},
 	{
 		pattern: /^(mp4|mov|avi|mkv)$/i,
-		icon: /* @__PURE__ */ jsx(GoVideo, { className: "h-4 w-4 text-purple-500" })
+		icon: /* @__PURE__ */ jsx(VideoIcon, { className: "h-4 w-4 text-purple-500" })
 	},
 	{
 		pattern: /^pdf$/i,
-		icon: /* @__PURE__ */ jsx(FaRegFilePdf, { className: "h-4 w-4 text-red-500" })
+		icon: /* @__PURE__ */ jsx(PdfIcon, { className: "h-4 w-4 text-red-500" })
 	},
 	{
 		pattern: /^(xlsx?|csv|ods)$/i,
-		icon: /* @__PURE__ */ jsx(LuSheet, { className: "h-4 w-4 text-green-500" })
+		icon: /* @__PURE__ */ jsx(SpreadsheetIcon, { className: "h-4 w-4 text-green-500" })
 	},
 	{
 		pattern: /^(docx?|odt)$/i,
-		icon: /* @__PURE__ */ jsx(IoDocumentTextOutline, { className: "h-4 w-4 text-blue-400" })
+		icon: /* @__PURE__ */ jsx(FileTextIcon, { className: "h-4 w-4 text-blue-400" })
 	},
 	{
 		pattern: /^(js|ts|json|css|html|md|txt)$/i,
-		icon: /* @__PURE__ */ jsx(FiFileText, { className: "h-4 w-4 text-yellow-500" })
+		icon: /* @__PURE__ */ jsx(FileTextIcon, { className: "h-4 w-4 text-yellow-500" })
 	},
 	{
 		pattern: /^(zip|gz|gzip|tar|rar)$/i,
-		icon: /* @__PURE__ */ jsx(BsFileEarmarkZip, { className: "h-4 w-4 text-purple-600" })
+		icon: /* @__PURE__ */ jsx(ZipIcon, { className: "h-4 w-4 text-purple-600" })
 	}
 ];
-function getNodeIcon(node, storageIconUrl, storageIconAlt = "Storage icon") {
+function StorageImage({ node }) {
+	const { storageIconUrl } = useSlots();
+	const alt = useStrings().fileExplorer.chrome.storageIconAlt;
+	const fallbackSrc = node.storageNodeIcon ? storageIconUrl?.({ type: node.storageNodeIcon }) : void 0;
+	const src = node.storageImageUrl || fallbackSrc;
+	if (!src) return /* @__PURE__ */ jsx(DiskIcon, { className: "h-4 w-4 mr-2" });
+	return /* @__PURE__ */ jsx("img", {
+		className: "h-4 w-4 mr-2",
+		src,
+		alt,
+		onError: (e) => {
+			if (fallbackSrc) e.currentTarget.src = fallbackSrc;
+		}
+	});
+}
+function getNodeIcon(node) {
 	const isUserNode = !node.storageId;
 	const isStorageNode = node.root;
-	if (isUserNode) return /* @__PURE__ */ jsx(FaUser, { className: "h-3 w-3 mr-2" });
-	if (isStorageNode && node.storageType === "workspace") return /* @__PURE__ */ jsx(FiHardDrive, { className: "h-4 w-4 mr-2" });
-	if (isStorageNode && node.storageNodeIcon) {
-		const storageNodeIcon = node.storageNodeIcon;
-		const fallbackSrc = storageIconUrl?.({ type: storageNodeIcon });
-		const iconSrc = node.storageImageUrl || fallbackSrc;
-		if (!iconSrc) return /* @__PURE__ */ jsx(FiHardDrive, { className: "h-4 w-4 mr-2" });
-		return /* @__PURE__ */ jsx("img", {
-			className: "h-4 w-4 mr-2",
-			src: iconSrc,
-			alt: storageIconAlt,
-			onError: (e) => {
-				if (fallbackSrc) e.currentTarget.src = fallbackSrc;
-			}
-		});
-	}
+	if (isUserNode) return /* @__PURE__ */ jsx(UserIcon, { className: "h-3 w-3 mr-2" });
+	if (isStorageNode && node.storageType === "workspace") return /* @__PURE__ */ jsx(DiskIcon, { className: "h-4 w-4 mr-2" });
+	if (isStorageNode && node.storageNodeIcon) return /* @__PURE__ */ jsx(StorageImage, { node });
 	if (!isStorageNode && node.type === "directory") return null;
 	if (node.contentType) {
 		for (const { pattern, icon } of contentTypeIconMap) if (pattern.test(node.contentType)) return icon;
@@ -112,7 +104,7 @@ function getNodeIcon(node, storageIconUrl, storageIconAlt = "Storage icon") {
 	if (ext) {
 		for (const { pattern, icon } of extensionIconMap) if (pattern.test(ext)) return icon;
 	}
-	return /* @__PURE__ */ jsx(FiFile, { className: "h-4 w-4 theme-muted-text" });
+	return /* @__PURE__ */ jsx(FileIcon, { className: "h-4 w-4 theme-muted-text" });
 }
 function renderUploadNodes(uploadNodes) {
 	const sorted = [...uploadNodes].sort((a, b) => a.relativePath.localeCompare(b.relativePath));
@@ -125,7 +117,7 @@ function renderUploadNodes(uploadNodes) {
 		while (common < folders.length && common < lastFolders.length && folders[common] === lastFolders[common]) common++;
 		const folderElements = folders.slice(common).map((folder, i) => /* @__PURE__ */ jsxs("div", {
 			style: { marginLeft: (common + i) * 16 },
-			children: [/* @__PURE__ */ jsx(FaRegFolder, { className: "inline h-3 w-3 mr-1" }), /* @__PURE__ */ jsxs("span", {
+			children: [/* @__PURE__ */ jsx(FolderIcon, { className: "inline h-3 w-3 mr-1" }), /* @__PURE__ */ jsxs("span", {
 				className: "font-semibold",
 				children: [folder, "/"]
 			})]
@@ -140,7 +132,7 @@ function renderUploadNodes(uploadNodes) {
 					className: "ml-2 text-xs theme-muted-text",
 					children: [
 						"(",
-						formatFileSize(node.file.size),
+						formatBytes(node.file.size),
 						")"
 					]
 				})
@@ -157,7 +149,7 @@ function NoFileSelectedPreview() {
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					className: "inline-flex items-center justify-center w-14 h-14 rounded-full theme-muted-panel mb-4",
-					children: /* @__PURE__ */ jsx(FiHardDrive, { className: "h-6 w-6 theme-muted-text" })
+					children: /* @__PURE__ */ jsx(DiskIcon, { className: "h-6 w-6 theme-muted-text" })
 				}),
 				/* @__PURE__ */ jsx("h2", {
 					className: "text-base font-semibold mb-1",
@@ -174,6 +166,7 @@ function NoFileSelectedPreview() {
 /** Shown instead of a skeleton that has nothing left to wait for. */
 function NotFoundPreview({ path, onRetry }) {
 	const t = useStrings().fileExplorer.notFound;
+	const { common } = useStrings();
 	const name = path.replace(/\/$/, "").split("/").pop() || path;
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex-1 flex items-center justify-center p-8",
@@ -182,7 +175,7 @@ function NotFoundPreview({ path, onRetry }) {
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					className: "inline-flex items-center justify-center w-14 h-14 rounded-full theme-muted-panel mb-4",
-					children: /* @__PURE__ */ jsx(FiHardDrive, { className: "h-6 w-6 theme-muted-text" })
+					children: /* @__PURE__ */ jsx(DiskIcon, { className: "h-6 w-6 theme-muted-text" })
 				}),
 				/* @__PURE__ */ jsx("h2", {
 					className: "text-base font-semibold mb-1",
@@ -192,11 +185,11 @@ function NotFoundPreview({ path, onRetry }) {
 					className: "text-sm theme-muted-text mb-4",
 					children: t.description
 				}),
-				/* @__PURE__ */ jsxs("button", {
-					type: "button",
-					className: "btn btn-info gap-2",
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					icon: /* @__PURE__ */ jsx(RetryIcon, {}),
 					onClick: onRetry,
-					children: [/* @__PURE__ */ jsx(MdRefresh, { className: "h-4 w-4" }), t.retry]
+					children: common.retry
 				})
 			]
 		})
@@ -205,7 +198,7 @@ function NotFoundPreview({ path, onRetry }) {
 function CorsIssuePreview({ selectedStorage, onRefresh }) {
 	const t = useStrings().fileExplorer.cors;
 	const messages = useStrings().fileExplorer.messages;
-	const notify = useNotify();
+	const { common } = useStrings();
 	const provisionCorsRules = useProvisionCorsRules();
 	const [isPending, startTransition] = useTransition();
 	const handleAddCorsRules = () => {
@@ -213,7 +206,6 @@ function CorsIssuePreview({ selectedStorage, onRefresh }) {
 		startTransition(async () => {
 			await addCorsRules({
 				provision: provisionCorsRules,
-				notify,
 				strings: messages,
 				csp: selectedStorage?.csp,
 				type: selectedStorage?.type,
@@ -246,16 +238,16 @@ function CorsIssuePreview({ selectedStorage, onRefresh }) {
 			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-3 justify-center",
-			children: [/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				className: "btn btn-info cursor-pointer flex items-center",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
 				onClick: onRefresh ? () => onRefresh() : void 0,
-				children: [/* @__PURE__ */ jsx(MdRefresh, { className: "h-4 w-4 mr-2" }), t.actions.retry]
-			}), provisionCorsRules && /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				className: "btn btn-info cursor-pointer flex items-center",
+				children: common.retry
+			}), provisionCorsRules && /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				icon: /* @__PURE__ */ jsx(CustomizeIcon, {}),
 				onClick: handleAddCorsRules,
-				children: [/* @__PURE__ */ jsx(FaWandMagicSparkles, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", { children: t.actions.addRules })]
+				children: t.actions.addRules
 			})]
 		})]
 	});
@@ -263,14 +255,8 @@ function CorsIssuePreview({ selectedStorage, onRefresh }) {
 var CORS_PROPAGATION_BUDGET_MS = 6e4;
 function CorsPropagatingPreview() {
 	const t = useStrings().fileExplorer.cors.propagating;
-	const [elapsedMs, setElapsedMs] = useState(0);
-	useEffect(() => {
-		const start = Date.now();
-		const id = setInterval(() => {
-			setElapsedMs(Date.now() - start);
-		}, 500);
-		return () => clearInterval(id);
-	}, []);
+	const [start] = useState(Date.now);
+	const elapsedMs = useElapsed(start) ?? 0;
 	const totalSeconds = Math.floor(elapsedMs / 1e3);
 	const mm = String(Math.floor(totalSeconds / 60)).padStart(2, "0");
 	const ss = String(totalSeconds % 60).padStart(2, "0");
@@ -334,15 +320,11 @@ function CorsPropagatingPreview() {
 					})
 				]
 			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "w-full max-w-xs mb-3",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "h-1 rounded-full theme-muted-panel overflow-hidden",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "h-full bg-blue-500 transition-[width] duration-500 ease-linear",
-						style: { width: `${progressPct}%` }
-					})
-				})
+			/* @__PURE__ */ jsx(ProgressBar, {
+				value: progressPct,
+				size: "sm",
+				"aria-label": t.stages.propagating,
+				className: "w-full max-w-xs mb-3"
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 theme-muted-text text-xs font-mono tabular-nums",
@@ -367,7 +349,7 @@ function PropagationStage({ status, label }) {
 	return /* @__PURE__ */ jsxs("li", {
 		className: "flex flex-col items-center gap-1.5",
 		children: [/* @__PURE__ */ jsxs("span", {
-			className: clsx("relative flex items-center justify-center w-6 h-6 rounded-full border transition-colors", status === "done" && "bg-green-500 border-green-500 text-white", status === "active" && "border-blue-500", status === "pending" && "theme-border"),
+			className: cx("relative flex items-center justify-center w-6 h-6 rounded-full border transition-colors", status === "done" && "bg-green-500 border-green-500 text-white", status === "active" && "border-blue-500", status === "pending" && "theme-border"),
 			children: [
 				status === "done" && /* @__PURE__ */ jsx("svg", {
 					viewBox: "0 0 16 16",
@@ -384,7 +366,7 @@ function PropagationStage({ status, label }) {
 				status === "pending" && /* @__PURE__ */ jsx("span", { className: "inline-flex h-1.5 w-1.5 rounded-full theme-muted-text opacity-60" })
 			]
 		}), /* @__PURE__ */ jsx("span", {
-			className: clsx("text-[11px] uppercase tracking-wider", status === "pending" ? "theme-muted-text opacity-60" : "theme-text"),
+			className: cx("text-[11px] uppercase tracking-wider", status === "pending" ? "theme-muted-text opacity-60" : "theme-text"),
 			children: label
 		})]
 	});
@@ -392,26 +374,27 @@ function PropagationStage({ status, label }) {
 function PropagationConnector({ active }) {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: clsx("h-px w-8 -mt-5 transition-colors", active ? "bg-blue-500" : "theme-border border-t")
+		className: cx("h-px w-8 -mt-5 transition-colors", active ? "bg-blue-500" : "theme-border border-t")
 	});
 }
 function NoDataAvailablePreview({ selectedStorage, error, onRefresh, connectionIssueMessage = null, className, canWrite = true }) {
 	const t = useStrings().fileExplorer;
+	const { common } = useStrings();
 	if (error instanceof CorsError) return /* @__PURE__ */ jsx("div", {
-		className: clsx("flex-1 flex items-center justify-center w-full text-center", className),
+		className: cx("flex-1 flex items-center justify-center w-full text-center", className),
 		children: /* @__PURE__ */ jsx(CorsIssuePreview, {
 			selectedStorage,
 			onRefresh
 		})
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("flex-1 flex items-center justify-center w-full text-center", className),
+		className: cx("flex-1 flex items-center justify-center w-full text-center", className),
 		children: !connectionIssueMessage ? /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col items-center justify-center max-w-sm p-8",
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					className: "inline-flex items-center justify-center w-14 h-14 rounded-full theme-muted-panel mb-4",
-					children: /* @__PURE__ */ jsx(FiFile, { className: "h-6 w-6 theme-muted-text" })
+					children: /* @__PURE__ */ jsx(FileIcon, { className: "h-6 w-6 theme-muted-text" })
 				}),
 				/* @__PURE__ */ jsx("h2", {
 					className: "text-base font-semibold mb-1",
@@ -427,7 +410,7 @@ function NoDataAvailablePreview({ selectedStorage, error, onRefresh, connectionI
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					className: "inline-flex items-center justify-center w-14 h-14 rounded-full bg-amber-500/10 mb-4",
-					children: /* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-6 w-6 text-amber-500" })
+					children: /* @__PURE__ */ jsx(WarningIcon, { className: "h-6 w-6 text-amber-500" })
 				}),
 				/* @__PURE__ */ jsx("h2", {
 					className: "text-base font-semibold mb-1",
@@ -437,18 +420,18 @@ function NoDataAvailablePreview({ selectedStorage, error, onRefresh, connectionI
 					className: "text-sm theme-muted-text mb-4",
 					children: connectionIssueMessage
 				}),
-				/* @__PURE__ */ jsxs("button", {
-					type: "button",
-					className: "btn btn-info cursor-pointer flex items-center gap-2",
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
 					onClick: onRefresh ? () => onRefresh() : void 0,
-					children: [/* @__PURE__ */ jsx(MdRefresh, { className: "h-4 w-4" }), t.empty.tryAgain]
+					children: common.retry
 				})
 			]
 		})
 	});
 }
 function SkeletonPreview() {
-	const [sidebarWidth] = useLocalStorage(SIDEBAR_WIDTH_STORAGE_KEY, 300);
+	const [sidebarWidth] = usePersistedState(SIDEBAR_WIDTH_STORAGE_KEY, 300);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-full h-full flex",
 		children: [/* @__PURE__ */ jsx("div", {
@@ -464,7 +447,10 @@ function SkeletonPreview() {
 					})
 				}), /* @__PURE__ */ jsx("div", {
 					className: "overflow-auto flex-1 px-2 py-2 space-y-1.5",
-					children: positionKeys(6, "skeleton").map((key) => /* @__PURE__ */ jsx("div", { className: "h-3.5 animate-pulse rounded bg-(--theme-muted-panel-bg)" }, key))
+					children: /* @__PURE__ */ jsx(Skeleton, {
+						count: 6,
+						height: 14
+					})
 				})]
 			})
 		}), /* @__PURE__ */ jsxs("div", {
@@ -477,7 +463,7 @@ function DragDropZone({ onDropFiles, children, className = "" }) {
 	const [isDragging, setIsDragging] = useState(false);
 	return /* @__PURE__ */ jsx("div", {
 		role: "none",
-		className: clsx("transition-[box-shadow,background-color] duration-150", className, isDragging && "ring-1 ring-(--theme-link) ring-inset bg-(--theme-link)/5"),
+		className: cx("transition-[box-shadow,background-color] duration-150", className, isDragging && "ring-1 ring-(--theme-link) ring-inset bg-(--theme-link)/5"),
 		onDragOver: (e) => {
 			e.preventDefault();
 			if (onDropFiles) setIsDragging(true);
@@ -495,25 +481,26 @@ function DragDropZone({ onDropFiles, children, className = "" }) {
 function ShareFileButton({ node, onShare }) {
 	const t = useStrings().fileExplorer;
 	const [isPending, startTransition] = useTransition();
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "primary",
+		size: "sm",
 		"aria-label": t.preview.shareFile,
-		className: "btn btn-info cursor-pointer flex items-center justify-between",
+		icon: /* @__PURE__ */ jsx(ShareIcon, {}),
 		onClick: () => {
 			startTransition(async () => {
 				await onShare(node);
 			});
 		},
-		disabled: isPending,
-		children: [/* @__PURE__ */ jsx(PiShareBold, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+		loading: isPending,
+		children: /* @__PURE__ */ jsx("span", {
 			className: "hidden md:inline",
 			children: t.empty.shareThisFile
-		})]
+		})
 	});
 }
-async function addCorsRules({ provision, notify, strings, csp, type, username, storageName, onRefresh }) {
+async function addCorsRules({ provision, strings, csp, type, username, storageName, onRefresh }) {
 	if (!storageName || !username || !csp) {
-		notify.error(strings.corsNoStorage);
+		toast.error(strings.corsNoStorage);
 		return;
 	}
 	const res = await provision({
@@ -523,11 +510,11 @@ async function addCorsRules({ provision, notify, strings, csp, type, username, s
 		storageName
 	});
 	if (res.error) {
-		notify.error(res.error);
+		toast.error(res.error);
 		return;
 	}
 	if (!onRefresh) {
-		notify.success(strings.corsAdded);
+		toast.success(strings.corsAdded);
 		return;
 	}
 	const pollBudgetMs = 9e4;
@@ -537,12 +524,12 @@ async function addCorsRules({ provision, notify, strings, csp, type, username, s
 	while (Date.now() < deadline) {
 		if (!(await onRefresh({ silent: true }))?.corsError) {
 			await onRefresh();
-			notify.success(strings.corsAdded);
+			toast.success(strings.corsAdded);
 			return;
 		}
 		await new Promise((resolve) => setTimeout(resolve, pollIntervalMs));
 	}
-	notify.warning(strings.corsPropagating);
+	toast.warning(strings.corsPropagating);
 }
 //#endregion
 export { CorsIssuePreview, DragDropZone, NoDataAvailablePreview, NoFileSelectedPreview, NotFoundPreview, SIDEBAR_WIDTH_STORAGE_KEY, ShareFileButton, SkeletonPreview, getNodeIcon, renderUploadNodes };

package/dist/file-explorer/lib/utils.d.ts

@@ -1,6 +1,5 @@
 import type { IFileExplorerClient } from './fileExplorer.js';
 import type { TreeMap, TreeNode, TStorage, TStorageObject, UploadNode } from './types.js';
-export declare function formatFileSize(bytes: number): string;
 export declare function getFileExtension(filename: string): string | null;
 export declare function getNodeName(node: TStorageObject): string;
 export type TTree = {
@@ -44,4 +43,3 @@ export declare function getUploadSessionETA(totalLoadedBytes: number, totalSizeB
     lastProgressBytes: number;
     shouldUpdateETA: boolean;
 };
-export declare function formatETA(seconds: number): string;

package/dist/file-explorer/lib/utils.js

@@ -1,17 +1,4 @@
 //#region src/file-explorer/lib/utils.ts
-function formatFileSize(bytes) {
-	if (bytes === 0) return "0 B";
-	const k = 1024;
-	const sizes = [
-		"B",
-		"KB",
-		"MB",
-		"GB",
-		"TB"
-	];
-	const i = Math.floor(Math.log(bytes) / Math.log(k));
-	return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
-}
 function getFileExtension(filename) {
 	return filename.match(/\.([a-zA-Z0-9]+)$/)?.[1]?.toLowerCase() ?? null;
 }
@@ -302,16 +289,5 @@ function getUploadSessionETA(totalLoadedBytes, totalSizeBytes, lastProgressTime,
 		shouldUpdateETA: false
 	};
 }
-function formatETA(seconds) {
-	if (seconds <= 0) return "Almost done";
-	if (seconds < 5) return "Few seconds";
-	if (seconds < 60) return `~ ${seconds}s`;
-	if (seconds < 3600) {
-		const mins = Math.floor(seconds / 60);
-		const secs = seconds % 60;
-		return secs > 0 ? `~ ${mins}m ${secs}s` : `~ ${mins}m`;
-	}
-	return `~ ${Math.floor(seconds / 3600)}h ${Math.ceil(seconds % 3600 / 60)}m`;
-}
 //#endregion
-export { attachmentDisposition, calculateUploadNodesTotalSize, collectObjectKeysToDelete, createTreeBuilder, ensureTrailingSlash, formatETA, formatFileSize, getDirectoryNameError, getDirectoryObjectPath, getDirectoryPrefixFromNode, getFileExtension, getNodeChildren, getNodeName, getObjectKeyFromNode, getParentPath, getUploadNodesFromDataTransferItems, getUploadSessionETA, getUriScheme, isClientValid, pruneNodesInsideSelectedDirectories, removeLeadingAndTrailingSlashes, removeLeadingSlash };
+export { attachmentDisposition, calculateUploadNodesTotalSize, collectObjectKeysToDelete, createTreeBuilder, ensureTrailingSlash, getDirectoryNameError, getDirectoryObjectPath, getDirectoryPrefixFromNode, getFileExtension, getNodeChildren, getNodeName, getObjectKeyFromNode, getParentPath, getUploadNodesFromDataTransferItems, getUploadSessionETA, getUriScheme, isClientValid, pruneNodesInsideSelectedDirectories, removeLeadingAndTrailingSlashes, removeLeadingSlash };