@parallelworks/ui 0.19.0 → 0.20.0

package/dist/file-explorer/FileExplorer.js

@@ -0,0 +1,1405 @@
+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 { keyedByContent } from "../components/keys.js";
+import { TOOLTIP_ID, TooltipInfo } from "../components/Tooltip.js";
+import { ConfirmModal } from "../components/ConfirmModal.js";
+import CopyToClipboard, { CopyCodeBlock } from "../components/CopyToClipboard.js";
+import { CreateModal } from "../components/CreateModal.js";
+import Loader from "../components/Loader.js";
+import { assembleRowMenu, useCopySubmenu, useRowMenu } from "../list/RowContextMenu.js";
+import { StatusBadge } from "../components/StatusBadge.js";
+import { Table } from "../components/Table.js";
+import { ListActionsHeader, ListSkeleton, listTableFixedProps, listTableProps } from "../list/ListTable.js";
+import { calculateUploadNodesTotalSize, createTreeBuilder, formatFileSize, 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";
+import { clearPreviewCache } from "./FilePreview/previewCache.js";
+import { DragDropZone, NoDataAvailablePreview, NoFileSelectedPreview, NotFoundPreview, SIDEBAR_WIDTH_STORAGE_KEY, ShareFileButton, getNodeIcon, renderUploadNodes } from "./helpers.js";
+import { FilePreview } from "./FilePreview/index.js";
+import { FilePreviewInline } from "./FilePreview/Inline.js";
+import { UserRow } from "./FileRow.js";
+import { FileTableHeaders } from "./FileTableHeaders.js";
+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, MenuButton, MenuItem, MenuItems, MenuSeparator } from "@headlessui/react";
+import cx from "classnames";
+import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useLocalStorage } from "usehooks-ts";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DateTime } from "luxon";
+import { Resizable } from "re-resizable";
+//#region src/file-explorer/FileExplorer.tsx
+function UriCard({ value }) {
+	const t = useStrings().fileExplorer;
+	const scheme = getUriScheme(value);
+	return /* @__PURE__ */ jsxs(CopyToClipboard, {
+		text: value,
+		showIcon: false,
+		className: "group flex items-stretch rounded-lg border theme-border bg-(--theme-input-bg) overflow-hidden cursor-copy hover:border-(--theme-link)/50 transition-colors duration-150",
+		children: [
+			scheme && /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 inline-flex items-center px-3 bg-(--theme-muted-panel-bg) border-r theme-border font-mono text-[11px] font-semibold uppercase tracking-widest theme-muted-text",
+				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)",
+				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(ClipboardIcon, { className: "h-3.5 w-3.5" })
+			})
+		]
+	});
+}
+function isStorageDirectory(node) {
+	return node?.type === "directory" && !!node.storageId;
+}
+function getErrorMessage(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+/** Directory paths from the storage root down to `path`. */
+function getAncestorDirPaths(path) {
+	const isDir = path.endsWith("/");
+	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("/") + "/");
+	return ancestors;
+}
+/** 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 }) {
+	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
+	});
+}
+function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHierarchy = false, groups = [], groupsLoading = false, selectedPath, onPathChange, getProviderAndClient, treeOnly = false, initialExpandedPaths, onExpandedPathsChange, objectUris, downloadCommand }) {
+	const copySubmenu = useCopySubmenu();
+	const t = useStrings().fileExplorer;
+	const notify = useNotify();
+	const slots = useSlots();
+	const fileExplorerContext = useFileExplorer();
+	const [listings, setListings] = useState(() => /* @__PURE__ */ new Map());
+	const fetchesInFlightRef = useRef(/* @__PURE__ */ new Map());
+	const incompleteDirsRef = useRef(/* @__PURE__ */ new Set());
+	const incompleteDirs = useMemo(() => {
+		const next = incompletePaths(listings);
+		const previous = incompleteDirsRef.current;
+		if (previous.size === next.size && [...next].every((p) => previous.has(p))) return previous;
+		incompleteDirsRef.current = next;
+		return next;
+	}, [listings]);
+	const [buildTree] = useState(createTreeBuilder);
+	const { treeMap, parentToChildrenMap, rootNodes } = useMemo(() => buildTree(storages, {
+		listings,
+		forceUserHierarchy: showUserHierarchy,
+		unsortedParents: incompleteDirs
+	}), [
+		buildTree,
+		storages,
+		listings,
+		showUserHierarchy,
+		incompleteDirs
+	]);
+	const [loadingPaths, setLoadingPaths] = useState(/* @__PURE__ */ new Set());
+	const normalizedSelectedPath = useMemo(() => {
+		if (!selectedPath) return "";
+		if (selectedPath.endsWith("/")) return selectedPath;
+		if (treeMap[selectedPath]) return selectedPath;
+		return `${selectedPath}/`;
+	}, [selectedPath, treeMap]);
+	const setSelectedPath = onPathChange;
+	const [expandedPaths, setExpandedPaths] = useState(() => /* @__PURE__ */ new Set(["", ...initialExpandedPaths ?? []]));
+	const onExpandedPathsChangeRef = useRef(onExpandedPathsChange);
+	onExpandedPathsChangeRef.current = onExpandedPathsChange;
+	useEffect(() => {
+		onExpandedPathsChangeRef.current?.([...expandedPaths]);
+	}, [expandedPaths]);
+	const selectedNode = useMemo(() => normalizedSelectedPath ? treeMap[normalizedSelectedPath] ?? null : null, [normalizedSelectedPath, treeMap]);
+	const seenRefreshKey = useRef(refreshKey);
+	useEffect(() => {
+		if (refreshKey === seenRefreshKey.current) return;
+		seenRefreshKey.current = refreshKey;
+		if (selectedNode?.type === "directory" && selectedNode.storageId) fetchNodeChildren(selectedNode, { replace: true });
+	}, [refreshKey, selectedNode]);
+	const [checkedItems, setCheckedItems] = useState(/* @__PURE__ */ new Set());
+	const [checkedItemsPath, setCheckedItemsPath] = useState(selectedPath);
+	if (checkedItemsPath !== selectedPath) {
+		setCheckedItemsPath(selectedPath);
+		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 selectedNodeCanWrite = selectedStorage?.canWrite === true;
+	const selectedNodeCanUpload = selectedStorage?.canUpload !== false;
+	const selectedNodeCanShare = selectedStorage?.canShare !== false;
+	const selectedNodeCanManageAccess = selectedStorage?.canManageAccess !== false;
+	const [accessDrawerOpen, setAccessDrawerOpen] = useState(false);
+	const [connectionIssuesMessage, updateConnectionIssuesMessage] = useState(/* @__PURE__ */ new Map());
+	const [hasCorsIssue, setHasCorsIssue] = useState(/* @__PURE__ */ new Map());
+	const [uploadModalOpen, setUploadModalOpen] = useState(false);
+	const [createFolderTarget, setCreateFolderTarget] = useState(null);
+	const [pendingUpload, setPendingUpload] = useState(null);
+	const [waitForUpload, setWaitForUpload] = useState(false);
+	const fileInputRef = useRef(null);
+	const folderInputRef = useRef(null);
+	const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+	const [pendingDelete, setPendingDelete] = useState(null);
+	const [previewNode, setPreviewNode] = useState(null);
+	const [previewOpen, setPreviewOpen] = useState(false);
+	const [detailTab, setDetailTab] = useState("details");
+	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);
+			if (!next.delete(path)) next.add(path);
+			return next;
+		});
+	}, []);
+	const collapseAll = useCallback(() => {
+		setExpandedPaths(/* @__PURE__ */ new Set([""]));
+	}, []);
+	const getStorageProviderAndClient = async (storageId) => {
+		const storage = storages.find((s) => s.id === storageId);
+		if (!storage) {
+			notify.error(t.messages.storageUnavailable);
+			return;
+		}
+		const { provider, client } = await getProviderAndClient(storage).catch(() => ({
+			provider: null,
+			client: null
+		}));
+		if (!provider || !client) {
+			const message = t.messages.connectFailed;
+			updateConnectionIssuesMessage((prev) => new Map(prev).set(storage.id, message));
+			return null;
+		}
+		updateConnectionIssuesMessage((prev) => {
+			const next = new Map(prev);
+			next.delete(storage.id);
+			return next;
+		});
+		return {
+			storage,
+			provider,
+			client
+		};
+	};
+	const fetchNodeChildren = useEffectEvent(async (node, options) => {
+		const more = options?.more ?? false;
+		const silent = !more && (options?.silent ?? false);
+		const nodeStorageId = node.storageId ?? "";
+		if (!options?.replace && fetchesInFlightRef.current.has(node.path)) return { corsError: false };
+		const request = silent ? void 0 : {};
+		if (request) fetchesInFlightRef.current.set(node.path, request);
+		const owns = () => request !== void 0 && fetchesInFlightRef.current.get(node.path) === request;
+		if (more) setListings((prev) => beginLoadingMore(prev, node.path));
+		else if (request) setLoadingPaths((prev) => new Set(prev).add(node.path));
+		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.");
+			const { storage, provider, client } = factory;
+			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);
+				const entries = provider.convertDataToStorageObjects(objects);
+				const nextCursor = provider.nextPageCursor?.(objects);
+				if (owns()) {
+					const page = {
+						entries,
+						cursor: nextCursor
+					};
+					setListings((prev) => options?.replace ? replaceListing(prev, node.path, page) : advanceListing(prev, node.path, page));
+				}
+			}
+			if (owns()) setHasCorsIssue((prev) => {
+				if (!prev.has(nodeStorageId)) return prev;
+				const next = new Map(prev);
+				next.delete(nodeStorageId);
+				return next;
+			});
+			return { corsError: false };
+		} catch (error) {
+			const isCorsError = error instanceof CorsError;
+			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}`));
+				if (isCorsError) setHasCorsIssue((prev) => new Map(prev).set(nodeStorageId, true));
+			}
+			return { corsError: isCorsError };
+		} finally {
+			if (owns()) {
+				fetchesInFlightRef.current.delete(node.path);
+				if (!more) setLoadingPaths((prev) => {
+					const next = new Set(prev);
+					next.delete(node.path);
+					return next;
+				});
+			}
+		}
+	});
+	const handleSelectTreeItem = async (path, node) => {
+		if (normalizedSelectedPath !== path) {
+			setCheckedItems(/* @__PURE__ */ new Set());
+			setDetailTab("details");
+		}
+		setSelectedPath(path);
+		if (node.type === "directory" && node?.storageId && !isListed(listings, path)) await fetchNodeChildren(node);
+	};
+	useEffect(() => {
+		if (!normalizedSelectedPath) return;
+		const ancestors = getAncestorDirPaths(normalizedSelectedPath);
+		if (ancestors.length === 0) return;
+		setExpandedPaths((prev) => {
+			if (ancestors.every((p) => prev.has(p))) return prev;
+			const next = new Set(prev);
+			for (const p of ancestors) next.add(p);
+			return next;
+		});
+	}, [normalizedSelectedPath]);
+	const [stuck, setStuck] = useState(null);
+	const hydrationStuck = stuck?.target === normalizedSelectedPath;
+	const hydrationPagesRef = useRef({
+		path: "",
+		pages: 0
+	});
+	useLayoutEffect(() => {
+		if (!normalizedSelectedPath) return;
+		if (hydrationPagesRef.current.path !== normalizedSelectedPath) hydrationPagesRef.current = {
+			path: normalizedSelectedPath,
+			pages: 0
+		};
+		const step = nextHydrationStep({
+			targetResolved: !!treeMap[normalizedSelectedPath],
+			ancestors: getAncestorDirPaths(normalizedSelectedPath),
+			isListableDir: (path) => {
+				const node = treeMap[path];
+				return !!node && node.type === "directory" && !!node.storageId;
+			},
+			listings,
+			inFlight: fetchesInFlightRef.current,
+			pagesPulled: hydrationPagesRef.current.pages
+		});
+		if (step.kind === "stuck") {
+			setStuck({
+				target: normalizedSelectedPath,
+				deepest: step.path
+			});
+			return;
+		}
+		if (step.kind === "done") return;
+		const node = treeMap[step.path];
+		if (!node) return;
+		if (step.kind === "fetch") {
+			fetchNodeChildren(node);
+			return;
+		}
+		hydrationPagesRef.current.pages += 1;
+		fetchNodeChildren(node, { more: true });
+	}, [
+		normalizedSelectedPath,
+		treeMap,
+		listings
+	]);
+	useEffect(() => {
+		for (const path of expandedPaths) {
+			const node = treeMap[path];
+			if (node?.type === "directory" && node.storageId && !listings.has(path) && !fetchesInFlightRef.current.has(path)) {
+				fetchNodeChildren(node);
+				return;
+			}
+		}
+	}, [
+		expandedPaths,
+		treeMap,
+		listings
+	]);
+	const handleBatchCheckbox = () => {
+		if (selectedNode?.type !== "directory") return;
+		const selectAll = selectedInFolderCount < selectedNodeChildren.length;
+		const newCheckedItems = new Set(checkedItems);
+		for (const item of selectedNodeChildren) if (selectAll) newCheckedItems.add(item.path);
+		else newCheckedItems.delete(item.path);
+		setCheckedItems(newCheckedItems);
+	};
+	const handleItemCheckbox = (node, isChecked) => {
+		setCheckedItems((prev) => {
+			const newCheckedItems = new Set(prev);
+			if (isChecked) newCheckedItems.add(node.path);
+			else newCheckedItems.delete(node.path);
+			return newCheckedItems;
+		});
+	};
+	const selectedInFolderCount = useMemo(() => selectedNodeChildren.reduce((count, item) => checkedItems.has(item.path) ? count + 1 : count, 0), [selectedNodeChildren, checkedItems]);
+	const folderHasMore = selectedNode ? hasMore(listings, selectedNode.path) : false;
+	const allItemsSelected = selectedNodeChildren.length > 0 && selectedInFolderCount === selectedNodeChildren.length && !folderHasMore;
+	const loadMoreProps = selectedNode && folderHasMore ? {
+		loading: isLoadingMore(listings, selectedNode.path),
+		error: loadMoreError(listings, selectedNode.path),
+		auto: canAutoLoadMore(listings, selectedNode.path),
+		onLoadMore: () => {
+			fetchNodeChildren(selectedNode, { more: true });
+		}
+	} : void 0;
+	const treePaging = {
+		incompletePaths: incompleteDirs,
+		isLoading: (path) => isLoadingMore(listings, path),
+		hasFailed: (path) => !!loadMoreError(listings, path),
+		onLoadMore: (node) => {
+			fetchNodeChildren(node, { more: true });
+		}
+	};
+	const onDropFiles = async (targetPath, files) => {
+		const targetStorageId = treeMap[targetPath]?.storageId;
+		if (!storageCanWrite(targetStorageId)) {
+			notify.error(t.messages.noWriteAccess);
+			return;
+		}
+		if (!storageCanUpload(targetStorageId)) {
+			notify.error(t.messages.uploadsUnsupported);
+			return;
+		}
+		let uploadNodes = [];
+		let totalSize = 0;
+		if (waitForUpload) {
+			notify.warning(t.messages.waitForCurrentUpload);
+			return;
+		}
+		setWaitForUpload(true);
+		if (files instanceof DataTransferItemList && files.length && files[0] && typeof files[0].webkitGetAsEntry === "function") {
+			const prepareData = await getUploadNodesFromDataTransferItems(files);
+			uploadNodes = prepareData.uploadNodes;
+			totalSize = prepareData.totalSize;
+		} else {
+			uploadNodes = Array.from(files).map((file) => ({
+				name: file.name,
+				file,
+				relativePath: file.name
+			}));
+			totalSize = calculateUploadNodesTotalSize(uploadNodes);
+		}
+		setPendingUpload({
+			targetPath,
+			uploadNodes,
+			totalSize
+		});
+		setUploadModalOpen(true);
+		setWaitForUpload(false);
+	};
+	const hasFolderSelected = () => {
+		if (checkedItems.size > 0) return Array.from(checkedItems).map((path) => treeMap[path]).some((node) => node && node.type === "directory");
+		if (selectedNode && selectedNode.type === "directory") return true;
+		return false;
+	};
+	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) {
+			notify.error(t.messages.noFilesForDownload);
+			return;
+		}
+		const factory = await getStorageProviderAndClient(filesToDownload[0].storageId);
+		if (!factory) return;
+		const { provider, client } = factory;
+		if (!provider?.getFileInput) {
+			notify.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);
+				continue;
+			}
+			triggerBrowserDownload(presignedUrl, node.name);
+			if (index < filesToDownload.length - 1) await new Promise((resolve) => setTimeout(resolve, 150));
+		}
+	};
+	const onShareFileButtonClick = async (node) => {
+		const factory = await getStorageProviderAndClient(node.storageId);
+		if (!factory) return;
+		const { provider, client } = factory;
+		if (!provider?.getFileInput) {
+			notify.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);
+			return;
+		}
+		await navigator.clipboard.writeText(presignedUrl);
+		notify.info(t.messages.fileLinkCopied);
+	};
+	const triggerBrowserDownload = (url, filename) => {
+		const href = safeUrl(url);
+		if (!href) return;
+		const a = document.createElement("a");
+		a.href = href;
+		a.download = filename;
+		document.body.appendChild(a);
+		a.click();
+		setTimeout(() => {
+			document.body.removeChild(a);
+		}, 300);
+	};
+	const getPresignedUrl = async (node, downloadFilename) => {
+		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.")];
+		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;
+		setPreviewNode(node);
+		setPreviewOpen(true);
+	};
+	const closePreview = () => {
+		setPreviewOpen(false);
+	};
+	const openUserNode = (node) => {
+		handleSelectTreeItem(node.path, node);
+		if (!expandedPaths.has(node.path)) handleToggleExpand(node.path);
+	};
+	const getNodeUris = (node) => {
+		const storage = storages.find((s) => s.id === node.storageId);
+		if (!storage || !objectUris) return [];
+		return objectUris(storage, getObjectKeyFromNode(node));
+	};
+	const copyNodeUri = async (node) => {
+		const uri = getNodeUris(node)[0];
+		if (!uri) {
+			notify.error(t.messages.noUri);
+			return;
+		}
+		try {
+			await navigator.clipboard.writeText(uri);
+			notify.info(t.messages.uriCopied);
+		} catch {
+			notify.error(t.messages.uriCopyFailed);
+		}
+	};
+	const downloadNode = async (node) => {
+		const [presignedUrl, error] = await getPresignedUrl(node, node.name);
+		if (error || !presignedUrl) {
+			notify.error(error?.message ?? t.messages.downloadLinkFailed);
+			return;
+		}
+		triggerBrowserDownload(presignedUrl, node.name);
+	};
+	const deleteNode = (node) => {
+		if (storages.find((s) => s.id === node.storageId)?.canWrite !== true) {
+			notify.error(t.messages.noWriteAccess);
+			return;
+		}
+		setPendingDelete([node]);
+		setDeleteModalOpen(true);
+	};
+	const openCreateFolder = async (node) => {
+		if (!isStorageDirectory(node)) return;
+		if (!isListed(listings, node.path)) await fetchNodeChildren(node);
+		setCreateFolderTarget(node);
+	};
+	const getCreateFolderActions = (node, storage) => {
+		if (node.type !== "directory" || storage?.canWrite !== true || storage.canUpload === false) return [];
+		return [{
+			key: "create-folder",
+			label: t.createFolder.action,
+			icon: /* @__PURE__ */ jsx(FolderIcon, {}),
+			onSelect: () => openCreateFolder(node)
+		}];
+	};
+	const buildRowMenu = (node) => {
+		const storage = storages.find((s) => s.id === node.storageId);
+		const nodeCanWrite = storage?.canWrite === true;
+		const nodeCanShare = storage?.canShare !== false;
+		const isFile = node.type === "file";
+		const uris = getNodeUris(node);
+		const actions = [];
+		if (isFile && canPreview(node)) actions.push({
+			key: "preview",
+			label: t.preview.preview,
+			icon: /* @__PURE__ */ jsx(EyeIcon, {}),
+			onSelect: () => openPreview(node)
+		});
+		if (isFile) {
+			actions.push({
+				key: "download",
+				label: t.preview.download,
+				icon: /* @__PURE__ */ jsx(DownloadFileIcon, {}),
+				onSelect: () => downloadNode(node)
+			});
+			if (nodeCanShare) actions.push({
+				key: "share",
+				label: t.preview.shareFile,
+				icon: /* @__PURE__ */ jsx(ShareIcon, {}),
+				onSelect: () => onShareFileButtonClick(node)
+			});
+		}
+		actions.push(...getCreateFolderActions(node, storage));
+		if (nodeCanWrite && !node.root) actions.push({
+			key: "delete",
+			label: t.preview.delete,
+			icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+			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, {}),
+			onSelect: () => handleSelectTreeItem(node.path, node)
+		}];
+		const uriExtras = uris.map((value) => ({
+			label: `${getUriScheme(value).toUpperCase()} URI`,
+			value,
+			icon: /* @__PURE__ */ jsx(LinkIcon, {})
+		}));
+		return assembleRowMenu({
+			lead,
+			actions,
+			copy: uriExtras.length > 0 ? copySubmenu({
+				name: isFile ? node.name : void 0,
+				extra: uriExtras
+			}) : void 0
+		});
+	};
+	const openNodeContextMenu = (e, node) => {
+		const items = buildRowMenu(node);
+		if (items.length === 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		openMenu(e.clientX, e.clientY, items);
+	};
+	const renderBreadcrumb = () => {
+		const chain = [];
+		let cur = selectedNode ?? void 0;
+		const seen = /* @__PURE__ */ new Set();
+		while (cur && !seen.has(cur.path)) {
+			seen.add(cur.path);
+			chain.unshift(cur);
+			if (cur.root) break;
+			cur = treeMap[getParentPath(cur.path)];
+		}
+		if (chain.length === 0) return null;
+		return /* @__PURE__ */ jsx("nav", {
+			className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden text-[13px]",
+			children: chain.map((node, i) => {
+				const isLast = i === chain.length - 1;
+				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", {
+						className: "truncate font-semibold text-(--theme-app)",
+						children: label
+					}) : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => handleSelectTreeItem(node.path, node),
+						className: "max-w-[16rem] shrink-0 cursor-pointer truncate text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)",
+						children: label
+					})]
+				}, node.path);
+			})
+		});
+	};
+	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 objects = filesToDownload.flatMap((node) => {
+			const storage = storages.find((s) => s.id === node.storageId);
+			return storage ? [{
+				storage,
+				key: getObjectKeyFromNode(node),
+				name: node.name
+			}] : [];
+		});
+		return downloadCommand.build(objects);
+	};
+	const onDeleteClick = () => {
+		if (!selectedNodeCanWrite) {
+			notify.error(t.messages.noWriteAccess);
+			return;
+		}
+		let nodesToDelete = [];
+		if (checkedItems.size > 0) nodesToDelete = Array.from(checkedItems).map((path) => treeMap[path]).filter((node) => Boolean(node));
+		else if (selectedNode) nodesToDelete = [selectedNode];
+		setPendingDelete(pruneNodesInsideSelectedDirectories(nodesToDelete));
+		setDeleteModalOpen(true);
+	};
+	const handlePostDelete = (selectedNode) => {
+		if (!selectedNode) return;
+		if (selectedNode.type === "file") {
+			let parentPath = getParentPath(selectedNode.path);
+			let parentNode = treeMap[parentPath];
+			while (parentNode) {
+				if (getNodeChildren(parentToChildrenMap, parentPath).length > 0) break;
+				if (parentNode.storageId && parentNode.root) break;
+				parentPath = getParentPath(parentPath);
+				parentNode = treeMap[parentPath];
+			}
+			if (parentNode) handleSelectTreeItem(parentPath, parentNode);
+		} else if (selectedNode.type === "directory") {
+			const currentFolderChildren = getNodeChildren(parentToChildrenMap, selectedNode.path);
+			if (currentFolderChildren.length > 0 && currentFolderChildren.every((child) => checkedItems.has(child.path))) {
+				const parentPath = getParentPath(selectedNode.path);
+				const parentNode = treeMap[parentPath];
+				if (parentNode) handleSelectTreeItem(parentPath, parentNode);
+			}
+		}
+	};
+	const handleDelete = async () => {
+		if (!pendingDelete || pendingDelete.length === 0) {
+			notify.error(t.messages.noItemsForDeletion);
+			return;
+		}
+		const parentPath = getParentPath(pendingDelete[0].path);
+		const parentNode = treeMap[parentPath];
+		const factory = await getStorageProviderAndClient(pendingDelete[0].storageId);
+		if (!factory) return;
+		const { storage, provider, client } = factory;
+		if (!provider?.deleteFilesInput) {
+			notify.error(t.messages.deleteUnsupported);
+			return;
+		}
+		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);
+				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);
+		} catch (err) {
+			notify.dismiss();
+			notify.error(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);
+			return;
+		}
+		if (!storageCanUpload(selectedNode.storageId)) {
+			notify.error(t.messages.uploadsUnsupported);
+			return;
+		}
+		if (waitForUpload) {
+			notify.warning(t.messages.waitForCurrentUpload);
+			return;
+		}
+		setWaitForUpload(true);
+		const uploadNodes = Array.from(files).map((file) => ({
+			name: file.name,
+			file,
+			relativePath: file.webkitRelativePath || file.name
+		}));
+		const totalSize = calculateUploadNodesTotalSize(uploadNodes);
+		setPendingUpload({
+			targetPath: selectedNode.path,
+			uploadNodes,
+			totalSize
+		});
+		setUploadModalOpen(true);
+		setWaitForUpload(false);
+		if (fileInputRef.current) fileInputRef.current.value = "";
+		if (folderInputRef.current) folderInputRef.current.value = "";
+	};
+	const handleUpload = async () => {
+		if (!pendingUpload) {
+			notify.error(t.messages.noFilesToUpload);
+			return;
+		}
+		if (waitForUpload) {
+			notify.info(t.messages.waitForUpload);
+			return;
+		}
+		const targetNode = treeMap[pendingUpload.targetPath];
+		if (!targetNode || !targetNode.storageId) {
+			notify.error(t.messages.invalidUploadTarget);
+			return;
+		}
+		const factory = await getStorageProviderAndClient(targetNode.storageId);
+		if (!factory) {
+			notify.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);
+			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
+			});
+			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
+			});
+			return;
+		}
+		setUploadModalOpen(false);
+		setPendingUpload(null);
+		setWaitForUpload(false);
+	};
+	const validateFolderName = (name) => {
+		if (createFolderTarget?.type !== "directory") return null;
+		const error = getDirectoryNameError(name, getNodeChildren(parentToChildrenMap, createFolderTarget.path));
+		return error ? t.createFolder.validation[error] : null;
+	};
+	const handleCreateFolder = async (name) => {
+		if (!isStorageDirectory(createFolderTarget)) {
+			notify.error(t.createFolder.invalidTarget);
+			return false;
+		}
+		if (!storageCanWrite(createFolderTarget.storageId)) {
+			notify.error(t.createFolder.noWriteAccess);
+			return false;
+		}
+		if (!storageCanUpload(createFolderTarget.storageId)) {
+			notify.error(t.createFolder.unsupported);
+			return false;
+		}
+		try {
+			const factory = await getStorageProviderAndClient(createFolderTarget.storageId);
+			if (!factory) return false;
+			const { storage, provider, client } = factory;
+			if (!provider.uploadFileInput) {
+				notify.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));
+			return true;
+		} catch (error) {
+			notify.error(t.createFolder.error(getErrorMessage(error)));
+			return false;
+		}
+	};
+	const handleRefresh = async (opts) => {
+		const dirs = [...expandedPaths].map((path) => treeMap[path]).filter((node) => !!node && node.type === "directory" && !!node.storageId);
+		if (selectedNode?.type === "directory" && selectedNode.storageId && !dirs.some((dir) => dir.path === selectedNode.path)) dirs.push(selectedNode);
+		if (dirs.length > 0) return { corsError: (await Promise.all(dirs.map((dir) => fetchNodeChildren(dir, {
+			replace: true,
+			silent: opts?.silent
+		})))).some((result) => result.corsError) };
+		if (onRefresh) onRefresh();
+		return { corsError: false };
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full h-full flex relative",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "w-full h-full flex",
+				children: [/* @__PURE__ */ jsx(TreeFrame, {
+					treeOnly,
+					sidebarWidth,
+					onWidthChange: setSidebarWidth,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "h-full flex flex-col border-r theme-border bg-(--theme-panel-bg)/60",
+						children: [/* @__PURE__ */ jsx("div", {
+							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("button", {
+									type: "button",
+									"aria-label": t.chrome.refresh,
+									"data-tooltip-id": TOOLTIP_ID,
+									"data-tooltip-content": "Refresh",
+									"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" })
+								}), /* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": t.chrome.collapse,
+									"data-tooltip-id": TOOLTIP_ID,
+									"data-tooltip-content": "Collapse All",
+									"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" })
+								})]
+							})
+						}), /* @__PURE__ */ jsx(TreeView, {
+							rootNodes,
+							parentToChildrenMap,
+							expandedPaths,
+							selectedPath: normalizedSelectedPath,
+							loadingPaths,
+							onToggleExpand: handleToggleExpand,
+							onSelect: (path, node) => {
+								handleSelectTreeItem(path, node);
+								if (treeOnly && node.type === "file") openPreview(node);
+							},
+							onDropToFolder: onDropFiles,
+							onContextMenu: openNodeContextMenu,
+							onPreviewFile: openPreview,
+							paging: treePaging
+						})]
+					})
+				}), !treeOnly && /* @__PURE__ */ jsx("div", {
+					className: "h-full flex flex-col flex-1 min-w-0",
+					children: !selectedNode && normalizedSelectedPath ? hydrationStuck ? /* @__PURE__ */ jsx(NotFoundPreview, {
+						path: normalizedSelectedPath,
+						onRetry: () => {
+							const deepest = stuck?.deepest;
+							hydrationPagesRef.current = {
+								path: "",
+								pages: 0
+							};
+							setStuck(null);
+							if (deepest) setListings((prev) => hasMore(prev, deepest) ? clearListingError(prev, deepest) : clearListingsUnder(prev, deepest));
+						}
+					}) : /* @__PURE__ */ jsx(ListSkeleton, {}) : !selectedNode && showUserHierarchy ? /* @__PURE__ */ jsxs("div", {
+						className: "overflow-auto h-full",
+						children: [/* @__PURE__ */ jsxs(Table, {
+							...listTableProps,
+							children: [
+								/* @__PURE__ */ jsx(Table.Header, {
+									caps: false,
+									className: "py-2",
+									style: { minWidth: 200 },
+									children: "Name"
+								}),
+								/* @__PURE__ */ jsx(Table.Header, {
+									caps: false,
+									className: "w-[22%] py-2",
+									children: "Type"
+								}),
+								/* @__PURE__ */ jsx(Table.Header, {
+									caps: false,
+									className: "w-[22%] py-2",
+									children: "Storages"
+								}),
+								/* @__PURE__ */ jsx(ListActionsHeader, { actionCount: 1 }),
+								rootNodes.map((rootNode) => /* @__PURE__ */ jsx(UserRow, {
+									node: rootNode,
+									icon: getNodeIcon(rootNode, slots.storageIconUrl, t.chrome.storageIconAlt),
+									storageCount: getNodeChildren(parentToChildrenMap, rootNode.path).length,
+									getItems: () => [{
+										kind: "action",
+										label: t.preview.open,
+										icon: /* @__PURE__ */ jsx(FolderIcon, {}),
+										onSelect: () => openUserNode(rootNode)
+									}],
+									openMenu,
+									onOpen: openUserNode
+								}, rootNode.path))
+							]
+						}), rootNodes.length === 0 && /* @__PURE__ */ jsx(NoDataAvailablePreview, {
+							selectedStorage: null,
+							onRefresh: handleRefresh
+						})]
+					}) : !selectedNode ? /* @__PURE__ */ jsx(NoFileSelectedPreview, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between gap-3 px-4 h-12 shrink-0 border-b theme-border",
+							children: [renderBreadcrumb(), /* @__PURE__ */ jsxs("div", {
+								className: "flex shrink-0 items-center gap-2",
+								children: [
+									folderHasMore && /* @__PURE__ */ jsx(StatusBadge, {
+										variant: "muted",
+										className: "whitespace-nowrap tabular-nums",
+										children: t.partialCount(selectedNodeChildren.length)
+									}),
+									selectedInFolderCount > 0 && /* @__PURE__ */ jsx(StatusBadge, {
+										variant: "muted",
+										className: "whitespace-nowrap tabular-nums",
+										children: t.selectedCount(selectedInFolderCount)
+									}),
+									!selectedNodeCanWrite && /* @__PURE__ */ jsx(StatusBadge, {
+										variant: "muted",
+										className: "uppercase tracking-wider",
+										children: t.readOnly
+									}),
+									/* @__PURE__ */ jsx("input", {
+										type: "file",
+										multiple: true,
+										ref: fileInputRef,
+										className: "hidden",
+										onChange: (e) => {
+											handleUploadInputChange(e.target.files, selectedNode);
+										}
+									}),
+									/* @__PURE__ */ jsx("input", {
+										type: "file",
+										multiple: true,
+										webkitdirectory: "true",
+										ref: folderInputRef,
+										className: "hidden",
+										onChange: (e) => {
+											handleUploadInputChange(e.target.files, selectedNode);
+										}
+									}),
+									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										"aria-label": t.createFolder.action,
+										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", {
+											className: "hidden md:inline",
+											children: t.createFolder.action
+										})]
+									}),
+									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsxs(MenuButton, {
+										"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", {
+											className: "hidden md:inline",
+											children: t.chrome.upload
+										})] }), /* @__PURE__ */ jsx(AngleDownIcon, { className: "h-4 w-4 ml-2" })]
+									}), /* @__PURE__ */ jsxs(MenuItems, {
+										transition: true,
+										anchor: "bottom end",
+										className: "theme-panel w-36 rounded-md border p-1 mt-1 shadow-lg z-50 origin-top-right transition duration-100\n                    ease-out data-closed:scale-95 data-closed:opacity-0 focus:outline-none",
+										children: [/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx("button", {
+											type: "button",
+											className: "text-sm rounded-sm hover:theme-hover cursor-pointer w-full items-center px-2 py-1.5",
+											onClick: () => fileInputRef.current?.click(),
+											children: "Select Files"
+										}) }), /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx("button", {
+											type: "button",
+											className: "text-sm rounded-sm hover:theme-hover cursor-pointer w-full items-center px-2 py-1.5",
+											onClick: () => folderInputRef.current?.click(),
+											children: "Select Folder"
+										}) })]
+									})] }),
+									/* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsxs(MenuButton, {
+										"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", {
+											className: "hidden md:inline",
+											children: t.chrome.download
+										})] }), /* @__PURE__ */ jsx(AngleDownIcon, { className: "h-4 w-4 ml-2" })]
+									}), /* @__PURE__ */ jsxs(MenuItems, {
+										transition: true,
+										anchor: "bottom end",
+										className: "theme-panel w-72 rounded-md border p-1 mt-1 shadow-lg z-50 origin-top-right transition duration-100 \n                    ease-out data-closed:scale-95 data-closed:opacity-0 focus:outline-none",
+										children: [/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx("button", {
+											type: "button",
+											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", {
+											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__ */ jsxs("button", {
+										type: "button",
+										"aria-label": t.chrome.access,
+										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", {
+											className: "hidden md:inline",
+											children: t.chrome.manageAccess
+										})]
+									}),
+									selectedNodeCanWrite && /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										"aria-label": t.chrome.delete,
+										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", {
+											className: "hidden md:inline",
+											children: t.chrome.delete
+										})]
+									})
+								]
+							})]
+						}),
+						selectedNode.type === "directory" && /* @__PURE__ */ jsxs(DragDropZone, {
+							className: "min-h-0 flex-1 overflow-hidden",
+							onDropFiles: selectedNodeCanWrite ? (files) => {
+								onDropFiles(selectedNode.path, files);
+							} : void 0,
+							children: [loadingPaths.has(selectedNode.path) && /* @__PURE__ */ jsx(ListSkeleton, {}), !loadingPaths.has(selectedNode.path) && (selectedNodeChildren.length > 0 || folderHasMore ? /* @__PURE__ */ jsx(FileTable, {
+								nodes: selectedNodeChildren,
+								checkedItems,
+								allSelected: allItemsSelected,
+								someSelected: selectedInFolderCount > 0,
+								onSelectAll: handleBatchCheckbox,
+								getItems: buildRowMenu,
+								openMenu,
+								onOpen: (n) => handleSelectTreeItem(n.path, n),
+								onToggleCheck: handleItemCheckbox,
+								onPreview: openPreview,
+								loadMore: loadMoreProps
+							}, selectedNode.path) : /* @__PURE__ */ jsxs("div", {
+								className: "h-full flex flex-col",
+								children: [/* @__PURE__ */ jsx(Table, {
+									...listTableFixedProps,
+									wrapperClassName: "overflow-x-auto",
+									children: /* @__PURE__ */ jsx(FileTableHeaders, {
+										allSelected: allItemsSelected,
+										someSelected: selectedInFolderCount > 0,
+										onSelectAll: handleBatchCheckbox
+									})
+								}), /* @__PURE__ */ jsx(NoDataAvailablePreview, {
+									selectedStorage: storages.find((s) => s.id === selectedNode.storageId) || null,
+									canWrite: selectedNodeCanWrite,
+									onRefresh: handleRefresh,
+									error: hasCorsIssue.get(selectedNode.storageId ?? "") ? new CorsError(connectionIssuesMessage.get(selectedNode.storageId ?? "") || "") : null,
+									connectionIssueMessage: selectedNode.storageId ? connectionIssuesMessage.get(selectedNode.storageId) : null
+								})]
+							}))]
+						}),
+						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 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) => 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-element)" : "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", {
+									className: "flex shrink-0 items-center border-b theme-border px-3",
+									children: [/* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: tabClass(effectiveTab === "details"),
+										onClick: () => setDetailTab("details"),
+										children: t.preview.detailsTab
+									}), previewable && /* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: tabClass(effectiveTab === "preview"),
+										onClick: () => setDetailTab("preview"),
+										children: t.preview.previewTab
+									})]
+								}), effectiveTab === "preview" && previewable ? /* @__PURE__ */ jsx(FilePreviewInline, {
+									node: selectedNode,
+									storage: storages.find((s) => s.id === selectedNode.storageId) ?? null,
+									getPresignedUrl,
+									onOpenFull: openPreview,
+									onDownload: downloadNode,
+									active: !previewOpen
+								}) : /* @__PURE__ */ jsxs("div", {
+									className: "min-h-0 flex-1 overflow-auto",
+									children: [
+										/* @__PURE__ */ jsxs("div", {
+											className: "flex items-start gap-4 px-6 pt-6 pb-5 border-b theme-border",
+											children: [/* @__PURE__ */ jsx("div", {
+												className: "shrink-0 inline-flex items-center justify-center w-12 h-12 rounded-lg theme-muted-panel",
+												children: /* @__PURE__ */ jsx("div", {
+													className: "*:h-5 *:w-5 *:mr-0",
+													children: fileIcon
+												})
+											}), /* @__PURE__ */ jsxs("div", {
+												className: "flex-1 min-w-0",
+												children: [/* @__PURE__ */ jsx("h2", {
+													className: "text-lg font-semibold leading-tight break-all",
+													children: selectedNode.name
+												}), /* @__PURE__ */ jsxs("div", {
+													className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 mt-1 text-xs theme-muted-text",
+													children: [
+														selectedNode.contentType && /* @__PURE__ */ jsx("span", {
+															className: "inline-flex items-center rounded-full border theme-border px-2 py-0.5 font-mono text-[10.5px] uppercase tracking-wider",
+															children: selectedNode.contentType
+														}),
+														typeof selectedNode.size === "number" && /* @__PURE__ */ jsx("span", {
+															className: "tabular-nums",
+															children: formatFileSize(selectedNode.size)
+														}),
+														modifiedDt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+															"aria-hidden": true,
+															children: "·"
+														}), /* @__PURE__ */ jsxs("span", { children: ["Modified ", modifiedDt.toRelative()] })] })
+													]
+												})]
+											})]
+										}),
+										uris.length > 0 && /* @__PURE__ */ jsx("div", {
+											className: "px-6 pt-5 space-y-2",
+											children: uris.map((uri) => /* @__PURE__ */ jsx(UriCard, { value: uri }, uri))
+										}),
+										selectedNodeCanShare && /* @__PURE__ */ jsxs("div", {
+											className: "flex items-center gap-2 px-6 pt-4",
+											children: [/* @__PURE__ */ jsx(ShareFileButton, {
+												node: selectedNode,
+												onShare: onShareFileButtonClick
+											}), /* @__PURE__ */ jsx(TooltipInfo, {
+												text: "This will generate a pre-signed URL for this file. Anyone with this link can temporarily access and download the file, even if they don't have an account. The link will automatically expire after 12 hours.",
+												place: "right"
+											})]
+										}),
+										/* @__PURE__ */ jsxs("div", {
+											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"
+											}), /* @__PURE__ */ jsxs("dl", {
+												className: "grid grid-cols-[minmax(0,140px)_1fr] gap-x-6 gap-y-2 text-sm",
+												children: [
+													typeof selectedNode.size === "number" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+														className: "theme-muted-text",
+														children: t.chrome.size
+													}), /* @__PURE__ */ jsx("dd", {
+														className: "tabular-nums",
+														children: formatFileSize(selectedNode.size)
+													})] }),
+													selectedNode.contentType && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+														className: "theme-muted-text",
+														children: "Content Type"
+													}), /* @__PURE__ */ jsx("dd", {
+														className: "font-mono text-xs",
+														children: selectedNode.contentType
+													})] }),
+													createdDt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+														className: "theme-muted-text",
+														children: t.chrome.created
+													}), /* @__PURE__ */ jsxs("dd", { children: [
+														createdDt.toLocaleString(DateTime.DATETIME_MED),
+														" ",
+														/* @__PURE__ */ jsxs("span", {
+															className: "theme-muted-text",
+															children: ["· ", createdDt.toRelative()]
+														})
+													] })] }),
+													modifiedDt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+														className: "theme-muted-text",
+														children: "Last Modified"
+													}), /* @__PURE__ */ jsxs("dd", { children: [
+														modifiedDt.toLocaleString(DateTime.DATETIME_MED),
+														" ",
+														/* @__PURE__ */ jsxs("span", {
+															className: "theme-muted-text",
+															children: ["· ", modifiedDt.toRelative()]
+														})
+													] })] }),
+													selectedNode.hash && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+														className: "theme-muted-text",
+														children: t.chrome.hash
+													}), /* @__PURE__ */ jsx("dd", {
+														className: "font-mono text-xs break-all",
+														children: selectedNode.hash.replace(/^"|"$/g, "")
+													})] }),
+													selectedNode.storageClass && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+														className: "theme-muted-text",
+														children: "Storage Class"
+													}), /* @__PURE__ */ jsx("dd", {
+														className: "font-mono text-xs uppercase tracking-wider",
+														children: selectedNode.storageClass
+													})] })
+												]
+											})]
+										})
+									]
+								})]
+							});
+						})()
+					] })
+				})]
+			}),
+			contextMenu,
+			/* @__PURE__ */ jsx(FilePreview, {
+				open: previewOpen,
+				node: previewNode,
+				siblings: previewSiblings,
+				storage: storages.find((s) => s.id === previewNode?.storageId) ?? null,
+				getPresignedUrl,
+				onNavigate: setPreviewNode,
+				onClose: closePreview,
+				onDownload: downloadNode,
+				onCopyUri: copyNodeUri
+			}),
+			/* @__PURE__ */ jsx(CreateModal, {
+				open: !!createFolderTarget,
+				onClose: () => setCreateFolderTarget(null),
+				typeIcon: /* @__PURE__ */ jsx(FolderIcon, { className: "w-3 h-3" }),
+				typeLabel: t.createFolder.folder,
+				namePlaceholder: t.createFolder.namePlaceholder,
+				submitLabel: t.createFolder.submit,
+				submittingLabel: t.createFolder.creating,
+				validateName: validateFolderName,
+				onSubmit: handleCreateFolder
+			}),
+			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 })
+			}),
+			/* @__PURE__ */ jsx(ConfirmModal, {
+				open: uploadModalOpen && !!pendingUpload,
+				onClose: () => {
+					setUploadModalOpen(false);
+					setPendingUpload(null);
+				},
+				align: "center",
+				title: t.confirmUpload.title,
+				description: t.confirmUpload.text(pendingUpload?.targetPath || t.confirmUpload.defaultPath),
+				confirmLabel: t.confirmUpload.confirm,
+				onConfirm: handleUpload,
+				confirmDisabled: pendingUpload ? isUploadSizeExceeded(pendingUpload.totalSize) : false,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "text-sm flex flex-col gap-2 mt-2 text-left",
+					children: [
+						/* @__PURE__ */ jsx("ul", {
+							className: "list-disc pl-5 max-h-40 overflow-auto theme-muted-panel py-1",
+							children: pendingUpload?.uploadNodes && renderUploadNodes(pendingUpload.uploadNodes)
+						}),
+						/* @__PURE__ */ jsxs("div", { children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "font-semibold",
+								children: t.confirmUpload.target
+							}),
+							" ",
+							pendingUpload?.targetPath || t.confirmUpload.noPath
+						] }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "text-xs mt-1",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "font-semibold",
+									children: t.confirmUpload.totalSize
+								}),
+								" ",
+								/* @__PURE__ */ jsx("span", {
+									className: cx(isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && "text-amber-800 font-semibold"),
+									children: formatFileSize(pendingUpload?.totalSize ?? 0)
+								})
+							]
+						}),
+						isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && /* @__PURE__ */ jsx("div", {
+							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", {
+									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 })]
+									})]
+								})]
+							})
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfirmModal, {
+				open: deleteModalOpen && !!pendingDelete,
+				onClose: () => {
+					setDeleteModalOpen(false);
+					setPendingDelete(null);
+					setCheckedItems(/* @__PURE__ */ new Set());
+				},
+				align: "center",
+				destructive: true,
+				title: t.confirmDelete.title,
+				description: t.confirmDelete.text,
+				confirmLabel: t.confirmDelete.action,
+				onConfirm: handleDelete,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "text-sm flex flex-col gap-2 mt-2 text-left",
+					children: /* @__PURE__ */ jsx("ul", {
+						className: "list-disc pl-5 max-h-40 overflow-auto theme-muted-panel py-1",
+						children: pendingDelete?.map((node) => /* @__PURE__ */ jsx("li", { children: node.path }, node.path))
+					})
+				})
+			}),
+			selectedNode?.storageId && !groupsLoading && slots.accessDrawer?.({
+				open: accessDrawerOpen,
+				setOpen: setAccessDrawerOpen,
+				groups,
+				storage: storages.find((s) => s.id === selectedNode.storageId)
+			})
+		]
+	});
+}
+//#endregion
+export { FileExplorer as default };