@parallelworks/ui 0.51.0 → 0.53.0

package/dist/file-explorer/FileExplorer.js

@@ -1,26 +1,29 @@
 import { cx } from "../cx.js";
-import { AccessIcon, ChevronDownIcon, ChevronRightIcon, CollapseIcon, CopyIcon, DownloadIcon, FileIcon, FileTextIcon, FolderIcon, LinkIcon, PreviewIcon, ShareIcon, TrashIcon, UploadIcon, WarningIcon } from "../icons.js";
+import { buttonClasses } from "../components/buttonClasses.js";
+import { AccessIcon, ChevronDownIcon, ChevronRightIcon, CollapseIcon, DownloadIcon, FileIcon, FileTextIcon, FolderIcon, LinkIcon, PreviewIcon, ShareIcon, TrashIcon, UploadIcon } from "../icons.js";
 import { MenuItem, MenuPopup, MenuSeparator } from "../components/Menu.js";
 import { safeUrl } from "../safeUrl.js";
-import { keyedByContent } from "../components/keys.js";
-import { buttonClasses } from "../components/buttonClasses.js";
 import { Loader } from "../components/Loader.js";
 import { toast } from "../components/Toast.js";
+import { keyedByContent } from "../components/keys.js";
 import { Tooltip } from "../components/Tooltip.js";
-import { usePersistedState, useSlots, useStrings } from "../components/Provider.js";
+import { useNavigation, usePersistedState, useSlots, useStrings } from "../components/Provider.js";
+import { AppLink } from "../components/AppLink.js";
 import { useCopy } from "../components/useCopy.js";
 import { Button } from "../components/Button.js";
+import { Callout } from "../components/Callout.js";
+import { InfoTip } from "../components/InfoTip.js";
 import { ConfirmModal } from "../components/ConfirmModal.js";
 import { useContextMenu } from "../components/ContextMenu.js";
-import CopyToClipboard, { CopyCodeBlock } from "../components/CopyToClipboard.js";
+import { CopyButton, CopyCodeBlock } from "../components/CopyButton.js";
 import { CreateModal } from "../components/CreateModal.js";
-import { InfoTip } from "../components/InfoTip.js";
 import { useSplitter } from "../components/splitter.js";
 import { formatBytes, formatDateTime } from "../format.js";
 import { RelativeTime } from "../components/relativeTime.js";
 import { RefreshButton } from "../components/RefreshButton.js";
 import { StatusBadge } from "../components/StatusBadge.js";
 import { Table } from "../components/Table.js";
+import { Tabs } from "../components/Tabs.js";
 import { ListActionsHeader, ListSkeleton, listTableFixedProps, listTableProps } from "../list/ListTable.js";
 import { assembleRowMenu, useCopySubmenu } from "../list/rowMenu.js";
 import { calculateUploadNodesTotalSize, createTreeBuilder, getDirectoryNameError, getDirectoryObjectPath, getNodeChildren, getObjectKeyFromNode, getParentPath, getUploadNodesFromDataTransferItems, getUriScheme, pruneNodesInsideSelectedDirectories, removeLeadingAndTrailingSlashes } from "./lib/utils.js";
@@ -42,12 +45,10 @@ import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRe
 import { DateTime } from "luxon";
 //#region src/file-explorer/FileExplorer.tsx
 function UriCard({ value }) {
-	const { common } = useStrings();
+	const { fileExplorer: t } = useStrings();
 	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",
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-stretch overflow-hidden rounded-lg border theme-border bg-(--theme-input-bg)",
 		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",
@@ -58,13 +59,22 @@ function UriCard({ value }) {
 				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: common.copyToClipboard,
-				children: /* @__PURE__ */ jsx(CopyIcon, { className: "h-3.5 w-3.5" })
+				className: "shrink-0 inline-flex items-center border-l theme-border px-1.5",
+				children: /* @__PURE__ */ jsx(CopyButton, {
+					text: value,
+					"aria-label": t.preview.copyUri
+				})
 			})
 		]
 	});
 }
+var breadcrumbClass = "max-w-[16rem] cursor-pointer truncate text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)";
+/** `href` resolved against the page, as the browser's "Copy link" gives it. */
+function absoluteUrl(href) {
+	const url = safeUrl(href);
+	if (!url || typeof window === "undefined") return url;
+	return new URL(url, window.location.href).href;
+}
 var MAX_UPLOAD_SIZE = 85899345920;
 function isUploadSizeExceeded(size) {
 	return size > MAX_UPLOAD_SIZE;
@@ -108,12 +118,13 @@ function TreeFrame({ treeOnly, sidebarWidth, onWidthChange, children }) {
 		children: [children, /* @__PURE__ */ jsx("div", { ...splitter.separatorProps })]
 	});
 }
-function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHierarchy = false, groups = [], groupsLoading = false, selectedPath, onPathChange, getProviderAndClient, treeOnly = false, initialExpandedPaths, onExpandedPathsChange, objectUris, downloadCommand, extraRowActions, headerAccessory }) {
+function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHierarchy = false, groups = [], groupsLoading = false, selectedPath, onPathChange, pathHref, getProviderAndClient, treeOnly = false, initialExpandedPaths, onExpandedPathsChange, objectUris, downloadCommand, extraRowActions, headerAccessory }) {
 	const copySubmenu = useCopySubmenu();
 	const t = useStrings().fileExplorer;
 	const { common } = useStrings();
 	const { copy } = useCopy();
 	const slots = useSlots();
+	const { goTo } = useNavigation();
 	const fileExplorerContext = useFileExplorer();
 	const [listings, setListings] = useState(() => /* @__PURE__ */ new Map());
 	const fetchesInFlightRef = useRef(/* @__PURE__ */ new Map());
@@ -144,7 +155,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		if (treeMap[selectedPath]) return selectedPath;
 		return `${selectedPath}/`;
 	}, [selectedPath, treeMap]);
-	const setSelectedPath = onPathChange;
+	const setSelectedPath = (path) => onPathChange ? onPathChange(path) : pathHref && goTo(pathHref(path));
 	const [expandedPaths, setExpandedPaths] = useState(() => /* @__PURE__ */ new Set(["", ...initialExpandedPaths ?? []]));
 	const onExpandedPathsChangeRef = useRef(onExpandedPathsChange);
 	onExpandedPathsChangeRef.current = onExpandedPathsChange;
@@ -159,10 +170,12 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		if (selectedNode?.type === "directory" && selectedNode.storageId) fetchNodeChildren(selectedNode, { replace: true });
 	}, [refreshKey, selectedNode]);
 	const [checkedItems, setCheckedItems] = useState(/* @__PURE__ */ new Set());
+	const [detailTab, setDetailTab] = useState("details");
 	const [checkedItemsPath, setCheckedItemsPath] = useState(selectedPath);
 	if (checkedItemsPath !== selectedPath) {
 		setCheckedItemsPath(selectedPath);
 		setCheckedItems(/* @__PURE__ */ new Set());
+		setDetailTab("details");
 	}
 	const selectedNodeChildren = useMemo(() => selectedNode ? getNodeChildren(parentToChildrenMap, selectedNode.path) : [], [parentToChildrenMap, selectedNode]);
 	const findStorage = (storageId) => storages.find((s) => s.id === storageId);
@@ -242,7 +255,6 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const folderInputRef = useRef(null);
 	const [deleteModalOpen, setDeleteModalOpen] = useState(false);
 	const [pendingDelete, setPendingDelete] = useState(null);
-	const [detailTab, setDetailTab] = useState("details");
 	useEffect(() => clearPreviewCache, []);
 	const { openMenu, contextMenu } = useContextMenu();
 	const [sidebarWidth, setSidebarWidth] = usePersistedState(SIDEBAR_WIDTH_STORAGE_KEY, 300);
@@ -320,10 +332,10 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			return { corsError: false };
 		} catch (error) {
 			const isCorsError = error instanceof CorsError;
-			const errorMessage = isCorsError ? error.message || "CORS error" : error instanceof Error ? error.message : "Unknown error";
+			const errorMessage = error instanceof Error && error.message || t.messages.unknownError;
 			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, t.messages.loadFailed(node.displayName || node.name, errorMessage)));
 				if (isCorsError) setHasCorsIssue((prev) => new Map(prev).set(nodeStorageId, true));
 			}
 			return { corsError: isCorsError };
@@ -566,6 +578,9 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const closePreview = () => {
 		setPreviewOpen(false);
 	};
+	const openFromTree = (node) => {
+		if (treeOnly && node.type === "file") openPreview(node);
+	};
 	const openUserNode = (node) => {
 		handleSelectTreeItem(node.path, node);
 		if (!expandedPaths.has(node.path)) handleToggleExpand(node.path);
@@ -649,9 +664,16 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			destructive: true,
 			onClick: () => deleteNode(node)
 		});
-		const lead = [{
+		const open = {
 			label: isFile ? t.preview.viewDetails : t.preview.openFolder,
-			icon: isFile ? /* @__PURE__ */ jsx(FileTextIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {}),
+			icon: isFile ? /* @__PURE__ */ jsx(FileTextIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {})
+		};
+		const href = pathHref?.(node.path);
+		const lead = [href ? {
+			...open,
+			href
+		} : {
+			...open,
 			onClick: () => handleSelectTreeItem(node.path, node)
 		}];
 		const uriExtras = uris.map((value) => ({
@@ -659,6 +681,12 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			value,
 			icon: /* @__PURE__ */ jsx(LinkIcon, {})
 		}));
+		const pageUrl = absoluteUrl(href);
+		if (pageUrl) uriExtras.unshift({
+			label: t.preview.link,
+			value: pageUrl,
+			icon: /* @__PURE__ */ jsx(LinkIcon, {})
+		});
 		return assembleRowMenu({
 			lead,
 			actions,
@@ -687,22 +715,34 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		}
 		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] cursor-pointer truncate text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)",
-						children: label
-					})]
-				}, node.path);
+			"aria-label": t.chrome.location,
+			className: "flex min-w-0 flex-1 overflow-hidden text-[13px]",
+			children: /* @__PURE__ */ jsx("ol", {
+				className: "flex min-w-0 items-center gap-1",
+				children: chain.map((node, i) => {
+					const isLast = i === chain.length - 1;
+					const label = node.displayName || node.name;
+					return /* @__PURE__ */ jsxs("li", {
+						className: "flex min-w-0 items-center gap-1",
+						children: [i > 0 && /* @__PURE__ */ jsx(ChevronRightIcon, {
+							"aria-hidden": "true",
+							className: "h-3 w-3 shrink-0 text-(--theme-muted-text-color) rtl:rotate-180"
+						}), isLast ? /* @__PURE__ */ jsx("span", {
+							"aria-current": "location",
+							className: "truncate font-semibold text-(--theme-app)",
+							children: label
+						}) : pathHref ? /* @__PURE__ */ jsx(AppLink, {
+							href: pathHref(node.path),
+							className: breadcrumbClass,
+							children: label
+						}) : /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => handleSelectTreeItem(node.path, node),
+							className: breadcrumbClass,
+							children: label
+						})]
+					}, node.path);
+				})
 			})
 		});
 	};
@@ -955,8 +995,10 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 							onToggleExpand: handleToggleExpand,
 							onSelect: (path, node) => {
 								handleSelectTreeItem(path, node);
-								if (treeOnly && node.type === "file") openPreview(node);
+								openFromTree(node);
 							},
+							pathHref,
+							onFollowLink: openFromTree,
 							onDropToFolder: onDropFiles,
 							onContextMenu: openNodeContextMenu,
 							onPreviewFile: openPreview,
@@ -998,18 +1040,28 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 									children: t.chrome.storages
 								}),
 								/* @__PURE__ */ jsx(ListActionsHeader, { actionCount: 1 }),
-								rootNodes.map((rootNode) => /* @__PURE__ */ jsx(UserRow, {
-									node: rootNode,
-									icon: getNodeIcon(rootNode),
-									storageCount: getNodeChildren(parentToChildrenMap, rootNode.path).length,
-									getItems: () => [{
+								rootNodes.map((rootNode) => {
+									const href = pathHref?.(rootNode.path);
+									const open = {
 										label: t.preview.open,
-										icon: /* @__PURE__ */ jsx(FolderIcon, {}),
-										onClick: () => openUserNode(rootNode)
-									}],
-									openMenu,
-									onOpen: openUserNode
-								}, rootNode.path))
+										icon: /* @__PURE__ */ jsx(FolderIcon, {})
+									};
+									return /* @__PURE__ */ jsx(UserRow, {
+										node: rootNode,
+										icon: getNodeIcon(rootNode),
+										href,
+										storageCount: getNodeChildren(parentToChildrenMap, rootNode.path).length,
+										getItems: () => [href ? {
+											...open,
+											href
+										} : {
+											...open,
+											onClick: () => openUserNode(rootNode)
+										}],
+										openMenu,
+										onOpen: openUserNode
+									}, rootNode.path);
+								})
 							]
 						}), rootNodes.length === 0 && /* @__PURE__ */ jsx(NoDataAvailablePreview, {
 							selectedStorage: null,
@@ -1056,33 +1108,41 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											handleUploadInputChange(e.target.files, selectedNode);
 										}
 									}),
-									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsx(Button, {
-										variant: "primary",
-										size: "sm",
-										"aria-label": t.createFolder.action,
-										icon: /* @__PURE__ */ jsx(FolderIcon, {}),
-										disabled: selectedNode.type === "file" || !selectedNode.storageId,
-										onClick: () => setCreateFolderTarget(selectedNode),
-										children: /* @__PURE__ */ jsx("span", {
-											className: "hidden @4xl:inline",
-											children: t.createFolder.action
+									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsx(Tooltip, {
+										content: t.createFolder.action,
+										side: "bottom",
+										children: /* @__PURE__ */ jsx(Button, {
+											variant: "outline",
+											size: "sm",
+											"aria-label": t.createFolder.action,
+											icon: /* @__PURE__ */ jsx(FolderIcon, {}),
+											disabled: selectedNode.type === "file" || !selectedNode.storageId,
+											onClick: () => setCreateFolderTarget(selectedNode),
+											children: /* @__PURE__ */ jsx("span", {
+												className: "hidden @4xl:inline",
+												children: t.createFolder.action
+											})
 										})
 									}),
-									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
-										"aria-label": t.chrome.upload,
-										className: buttonClasses({
-											variant: "primary",
-											size: "sm"
-										}),
-										disabled: selectedNode.type === "file" || !selectedNode.storageId,
-										children: [
-											/* @__PURE__ */ jsx(UploadIcon, {}),
-											/* @__PURE__ */ jsx("span", {
-												className: "hidden @4xl:inline",
-												children: t.chrome.upload
+									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Tooltip, {
+										content: t.chrome.upload,
+										side: "bottom",
+										children: /* @__PURE__ */ jsxs(Menu.Trigger, {
+											"aria-label": t.chrome.upload,
+											className: buttonClasses({
+												variant: selectedNode.type === "directory" ? "primary" : "outline",
+												size: "sm"
 											}),
-											/* @__PURE__ */ jsx(ChevronDownIcon, {})
-										]
+											disabled: selectedNode.type === "file" || !selectedNode.storageId,
+											children: [
+												/* @__PURE__ */ jsx(UploadIcon, {}),
+												/* @__PURE__ */ jsx("span", {
+													className: "hidden @4xl:inline",
+													children: t.chrome.upload
+												}),
+												/* @__PURE__ */ jsx(ChevronDownIcon, {})
+											]
+										})
 									}), /* @__PURE__ */ jsxs(MenuPopup, {
 										align: "end",
 										className: "w-36",
@@ -1094,21 +1154,25 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											children: t.chrome.selectFolder
 										})]
 									})] }),
-									/* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
-										"aria-label": common.download,
-										className: buttonClasses({
-											variant: "primary",
-											size: "sm"
-										}),
-										disabled: checkedItems.size === 0 && selectedNode.type !== "file" || hasFolderSelected() || !selectedNode.storageId,
-										children: [
-											/* @__PURE__ */ jsx(DownloadIcon, {}),
-											/* @__PURE__ */ jsx("span", {
-												className: "hidden @4xl:inline",
-												children: common.download
+									/* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Tooltip, {
+										content: common.download,
+										side: "bottom",
+										children: /* @__PURE__ */ jsxs(Menu.Trigger, {
+											"aria-label": common.download,
+											className: buttonClasses({
+												variant: selectedNode.type === "file" ? "primary" : "outline",
+												size: "sm"
 											}),
-											/* @__PURE__ */ jsx(ChevronDownIcon, {})
-										]
+											disabled: checkedItems.size === 0 && selectedNode.type !== "file" || hasFolderSelected() || !selectedNode.storageId,
+											children: [
+												/* @__PURE__ */ jsx(DownloadIcon, {}),
+												/* @__PURE__ */ jsx("span", {
+													className: "hidden @4xl:inline",
+													children: common.download
+												}),
+												/* @__PURE__ */ jsx(ChevronDownIcon, {})
+											]
+										})
 									}), /* @__PURE__ */ jsxs(MenuPopup, {
 										align: "end",
 										className: "w-72",
@@ -1121,7 +1185,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 												className: "text-sm text-center pb-1.5",
 												children: downloadCommand.label
 											}), /* @__PURE__ */ jsx(CopyCodeBlock, {
-												textToCopy: downloadCommandText,
+												text: 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", {
@@ -1132,28 +1196,37 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											})]
 										})] })]
 									})] }),
-									groups.length > 0 && selectedNodeCanManageAccess && /* @__PURE__ */ jsx(Button, {
-										variant: "primary",
-										size: "sm",
-										"aria-label": t.chrome.access,
-										icon: /* @__PURE__ */ jsx(AccessIcon, {}),
-										disabled: !selectedNode.storageId,
-										onClick: () => setAccessDrawerOpen(true),
-										children: /* @__PURE__ */ jsx("span", {
-											className: "hidden @4xl:inline",
-											children: t.chrome.manageAccess
+									groups.length > 0 && selectedNodeCanManageAccess && /* @__PURE__ */ jsx(Tooltip, {
+										content: t.chrome.manageAccess,
+										side: "bottom",
+										children: /* @__PURE__ */ jsx(Button, {
+											variant: "outline",
+											size: "sm",
+											"aria-label": t.chrome.access,
+											icon: /* @__PURE__ */ jsx(AccessIcon, {}),
+											disabled: !selectedNode.storageId,
+											onClick: () => setAccessDrawerOpen(true),
+											children: /* @__PURE__ */ jsx("span", {
+												className: "hidden @4xl:inline",
+												children: t.chrome.manageAccess
+											})
 										})
 									}),
-									selectedNodeCanDelete && /* @__PURE__ */ jsx(Button, {
-										variant: "danger",
-										size: "sm",
-										"aria-label": common.delete,
-										icon: /* @__PURE__ */ jsx(TrashIcon, {}),
-										disabled: checkedItems.size === 0 && selectedNode.type !== "file" || !selectedNode.storageId,
-										onClick: onDeleteClick,
-										children: /* @__PURE__ */ jsx("span", {
-											className: "hidden @4xl:inline",
-											children: common.delete
+									selectedNodeCanDelete && /* @__PURE__ */ jsx(Tooltip, {
+										content: common.delete,
+										side: "bottom",
+										children: /* @__PURE__ */ jsx(Button, {
+											variant: "outline",
+											size: "sm",
+											"aria-label": common.delete,
+											icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+											className: "*:text-(--theme-error-text)",
+											disabled: checkedItems.size === 0 && selectedNode.type !== "file" || !selectedNode.storageId,
+											onClick: onDeleteClick,
+											children: /* @__PURE__ */ jsx("span", {
+												className: "hidden @4xl:inline",
+												children: common.delete
+											})
 										})
 									})
 								]
@@ -1175,6 +1248,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 								onOpen: (n) => handleSelectTreeItem(n.path, n),
 								onToggleCheck: handleItemCheckbox,
 								onPreview: openPreview,
+								pathHref,
 								loadMore: loadMoreProps
 							}, selectedNode.path) : /* @__PURE__ */ jsxs("div", {
 								className: "h-full flex flex-col",
@@ -1202,22 +1276,20 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 							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-accent)" : "theme-muted-text border-transparent hover:theme-text");
 							return /* @__PURE__ */ jsxs("div", {
 								className: "flex h-full min-h-0 flex-col",
-								children: [/* @__PURE__ */ jsxs("div", {
-									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
-									})]
+								children: [/* @__PURE__ */ jsx(Tabs, {
+									label: selectedNode.name,
+									items: [{
+										value: "details",
+										label: t.preview.detailsTab
+									}, ...previewable ? [{
+										value: "preview",
+										label: t.preview.previewTab
+									}] : []],
+									value: effectiveTab,
+									onValueChange: setDetailTab,
+									className: "shrink-0 px-3"
 								}), effectiveTab === "preview" && previewable ? /* @__PURE__ */ jsx(FilePreviewInline, {
 									node: selectedNode,
 									storage: selectedStorage ?? null,
@@ -1274,12 +1346,12 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 												node: selectedNode,
 												onShare: onShareFileButtonClick
 											}), /* @__PURE__ */ jsx(InfoTip, {
-												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.",
+												text: t.chrome.shareHelp,
 												side: "right"
 											})]
 										}),
 										/* @__PURE__ */ jsxs("div", {
-											className: "px-6 py-5 mt-5 border-t theme-border",
+											className: cx("px-6 py-5", (uris.length > 0 || selectedNodeCanShare) && "mt-5 border-t theme-border"),
 											children: [/* @__PURE__ */ jsx("h3", {
 												className: "text-[11px] font-semibold uppercase tracking-widest theme-muted-text mb-3",
 												children: t.chrome.details
@@ -1388,8 +1460,8 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 				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",
+						/* @__PURE__ */ jsx("div", {
+							className: "max-h-40 overflow-auto theme-muted-panel py-1 pl-3",
 							children: pendingUpload?.uploadNodes && renderUploadNodes(pendingUpload.uploadNodes)
 						}),
 						/* @__PURE__ */ jsxs("div", { children: [
@@ -1409,26 +1481,16 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 								}),
 								" ",
 								/* @__PURE__ */ jsx("span", {
-									className: cx(isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && "text-amber-800 font-semibold"),
+									className: cx(isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && "text-(--theme-warning-text) font-semibold"),
 									children: formatBytes(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(WarningIcon, { className: "w-4 h-4 text-amber-600 shrink-0 mt-0.5" }), /* @__PURE__ */ jsxs("div", {
-									className: "text-amber-800",
-									children: [/* @__PURE__ */ jsx("div", {
-										className: "font-semibold mb-1",
-										children: t.confirmUpload.sizeLimitTitle
-									}), /* @__PURE__ */ jsxs("div", {
-										className: "text-sm",
-										children: [/* @__PURE__ */ jsx("p", { children: t.confirmUpload.sizeLimitBody(formatBytes(pendingUpload?.totalSize ?? 0), formatBytes(MAX_UPLOAD_SIZE)) }), /* @__PURE__ */ jsx("p", { children: t.confirmUpload.sizeLimitHint })]
-									})]
-								})]
-							})
+						isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && /* @__PURE__ */ jsxs(Callout, {
+							tone: "warning",
+							title: t.confirmUpload.sizeLimitTitle,
+							className: "mt-3",
+							children: [/* @__PURE__ */ jsx("p", { children: t.confirmUpload.sizeLimitBody(formatBytes(pendingUpload?.totalSize ?? 0), formatBytes(MAX_UPLOAD_SIZE)) }), /* @__PURE__ */ jsx("p", { children: t.confirmUpload.sizeLimitHint })]
 						})
 					]
 				})

package/dist/file-explorer/FileExplorerContext.js

@@ -1,5 +1,5 @@
-import { keyedByContent } from "../components/keys.js";
 import { toast } from "../components/Toast.js";
+import { keyedByContent } from "../components/keys.js";
 import { useStrings } from "../components/Provider.js";
 import { mapWithConcurrency } from "./lib/batch.js";
 import { calculateUploadNodesTotalSize, getUploadSessionETA, removeLeadingSlash } from "./lib/utils.js";

package/dist/file-explorer/FilePreview/StreamedBadge.js

@@ -1,4 +1,6 @@
+import { cx } from "../../cx.js";
 import { LockIcon } from "../../icons.js";
+import { toneSurface } from "../../components/tone.js";
 import { useStrings } from "../../components/Provider.js";
 import { InfoTip } from "../../components/InfoTip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -7,7 +9,7 @@ function StreamedBadge() {
 	const t = useStrings().fileExplorer;
 	return /* @__PURE__ */ jsxs(InfoTip, {
 		text: t.preview.streamedTooltip,
-		className: "shrink-0 gap-1 rounded-full border border-green-500/40 bg-green-500/15 px-2 py-0.5 text-[11px] text-green-600",
+		className: cx("shrink-0 gap-1 rounded-full border px-2 py-0.5 text-[11px]", toneSurface.success),
 		children: [/* @__PURE__ */ jsx(LockIcon, { className: "h-2.5 w-2.5" }), t.preview.streamed]
 	});
 }

package/dist/file-explorer/FilePreview/Viewer.js

@@ -1,11 +1,12 @@
 import { cx } from "../../cx.js";
 import { DownloadIcon, FileIcon, LockIcon, MusicIcon, ZipIcon } from "../../icons.js";
-import { positionKeys, withPositionKeys } from "../../components/keys.js";
 import { Loader } from "../../components/Loader.js";
+import { positionKeys, withPositionKeys } from "../../components/keys.js";
 import { useStrings } from "../../components/Provider.js";
 import { Button } from "../../components/Button.js";
 import Markdown from "../../components/Markdown.js";
 import { formatBytes } from "../../format.js";
+import { Editor } from "../../editor/Editor.js";
 import { getFileExtension } from "../lib/utils.js";
 import { getMonacoLanguage, previewLimitsFor } from "./previewType.js";
 import { CorsIssuePreview } from "../helpers.js";
@@ -14,9 +15,8 @@ import { countLines } from "./readCappedBytes.js";
 import { useObjectBlobUrl } from "./useObjectBlobUrl.js";
 import { useObjectText } from "./useObjectText.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 //#region src/file-explorer/FilePreview/Viewer.tsx
-var CodePreviewEditor = lazy(() => import("./CodePreviewEditor.js"));
 var PREVIEW_MARKDOWN_CONTROLS = {
 	table: { fullscreen: false },
 	mermaid: { fullscreen: false }
@@ -279,12 +279,16 @@ function CodeView({ node, url, onDownload, storage, onCorsRetry }) {
 						controls: PREVIEW_MARKDOWN_CONTROLS,
 						children: text ?? ""
 					})
-				}) : /* @__PURE__ */ jsx(Suspense, {
-					fallback: /* @__PURE__ */ jsx(PreviewLoading, {}),
-					children: /* @__PURE__ */ jsx(CodePreviewEditor, {
-						value: text ?? "",
-						language
-					})
+				}) : /* @__PURE__ */ jsx(Editor, {
+					readOnly: true,
+					value: text ?? "",
+					language,
+					ariaLabel: node.name,
+					className: "!rounded-none !border-0",
+					fontSize: 12,
+					minimap: { enabled: false },
+					overviewRulerLanes: 0,
+					wordWrap: "off"
 				})
 			})
 		})]
@@ -439,7 +443,7 @@ function NotebookOutputView({ output }) {
 		children: joinSource(output.text)
 	});
 	if (output.output_type === "error") return /* @__PURE__ */ jsx("pre", {
-		className: "mt-2 overflow-auto rounded-lg bg-red-500/15 px-3 py-2 font-mono text-[11px] text-red-500",
+		className: "mt-2 overflow-auto rounded-lg bg-(--theme-error-muted) px-3 py-2 font-mono text-[11px] text-(--theme-error-text)",
 		children: stripAnsi((output.traceback ?? []).join("\n"))
 	});
 	const plain = output.data?.["text/plain"];