@parallelworks/ui 0.40.1 → 0.42.0

package/dist/file-explorer/FileExplorer.js

@@ -1,5 +1,3 @@
-import { safeUrl } from "../safeUrl.js";
-import { useNotify, useSlots, useStrings } from "../components/Provider.js";
 import { BiSolidTrashAlt } from "../icons/bi/BiSolidTrashAlt.js";
 import { BsArrowsCollapse } from "../icons/bs/BsArrowsCollapse.js";
 import { FaAngleDown } from "../icons/fa/FaAngleDown.js";
@@ -16,16 +14,21 @@ import { LuEye } from "../icons/lu/LuEye.js";
 import { MdRefresh } from "../icons/md/MdRefresh.js";
 import { PiShareBold } from "../icons/pi/PiShareBold.js";
 import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
+import { MenuItem, MenuPopup, MenuSeparator } from "../components/Menu.js";
+import { safeUrl } from "../safeUrl.js";
 import { keyedByContent } from "../components/keys.js";
-import { TOOLTIP_ID, TooltipInfo } from "../components/Tooltip.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { useNotify, useSlots, useStrings } from "../components/Provider.js";
 import { ConfirmModal } from "../components/ConfirmModal.js";
+import { useContextMenu } from "../components/ContextMenu.js";
 import CopyToClipboard, { CopyCodeBlock } from "../components/CopyToClipboard.js";
+import { InfoTip } from "../components/InfoTip.js";
 import { CreateModal } from "../components/CreateModal.js";
 import Loader from "../components/Loader.js";
-import { 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 { assembleRowMenu, useCopySubmenu } from "../list/rowMenu.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";
@@ -39,11 +42,11 @@ 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 { Menu } from "@base-ui/react/menu";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
-import { 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
@@ -258,7 +261,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const [pendingDelete, setPendingDelete] = useState(null);
 	const [detailTab, setDetailTab] = useState("details");
 	useEffect(() => clearPreviewCache, []);
-	const { openMenu, contextMenu } = useRowMenu();
+	const { openMenu, contextMenu } = useContextMenu();
 	const [sidebarWidth, setSidebarWidth] = useLocalStorage(SIDEBAR_WIDTH_STORAGE_KEY, 300);
 	const handleToggleExpand = useCallback((path) => {
 		setExpandedPaths((prev) => {
@@ -630,7 +633,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			key: "create-folder",
 			label: t.createFolder.action,
 			icon: /* @__PURE__ */ jsx(FaRegFolder, {}),
-			onSelect: () => openCreateFolder(node)
+			onClick: () => openCreateFolder(node)
 		}];
 	};
 	const buildRowMenu = (node) => {
@@ -644,20 +647,20 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			key: "preview",
 			label: t.preview.preview,
 			icon: /* @__PURE__ */ jsx(LuEye, {}),
-			onSelect: () => openPreview(node)
+			onClick: () => openPreview(node)
 		});
 		if (isFile) {
 			actions.push({
 				key: "download",
 				label: t.preview.download,
 				icon: /* @__PURE__ */ jsx(FiDownload, {}),
-				onSelect: () => downloadNode(node)
+				onClick: () => downloadNode(node)
 			});
 			if (nodeCanShare) actions.push({
 				key: "share",
 				label: t.preview.shareFile,
 				icon: /* @__PURE__ */ jsx(PiShareBold, {}),
-				onSelect: () => onShareFileButtonClick(node)
+				onClick: () => onShareFileButtonClick(node)
 			});
 		}
 		actions.push(...getCreateFolderActions(node, storage));
@@ -667,13 +670,12 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			label: t.preview.delete,
 			icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, {}),
 			destructive: true,
-			onSelect: () => deleteNode(node)
+			onClick: () => deleteNode(node)
 		});
 		const lead = [{
-			kind: "action",
 			label: isFile ? t.preview.viewDetails : t.preview.openFolder,
 			icon: isFile ? /* @__PURE__ */ jsx(FiFileText, {}) : /* @__PURE__ */ jsx(FaRegFolder, {}),
-			onSelect: () => handleSelectTreeItem(node.path, node)
+			onClick: () => handleSelectTreeItem(node.path, node)
 		}];
 		const uriExtras = uris.map((value) => ({
 			label: `${getUriScheme(value).toUpperCase()} URI`,
@@ -694,7 +696,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		if (items.length === 0) return;
 		e.preventDefault();
 		e.stopPropagation();
-		openMenu(e.clientX, e.clientY, items);
+		openMenu(e, items);
 	};
 	const renderBreadcrumb = () => {
 		const chain = [];
@@ -951,24 +953,24 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 							className: "flex items-center justify-end h-10 px-3 shrink-0 border-b theme-border",
 							children: /* @__PURE__ */ jsxs("div", {
 								className: "flex gap-x-0.5",
-								children: [/* @__PURE__ */ jsx("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(MdRefresh, { 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(BsArrowsCollapse, { className: "h-3.5 w-3.5" })
+								children: [/* @__PURE__ */ jsx(Tooltip, {
+									content: t.chrome.refresh,
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": t.chrome.refresh,
+										className: "inline-flex items-center justify-center h-7 w-7 rounded-md cursor-pointer theme-muted-text hover:theme-text hover:theme-hover transition-colors duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-(--theme-link)",
+										onClick: () => handleRefresh(),
+										children: /* @__PURE__ */ jsx(MdRefresh, { className: "h-3.5 w-3.5" })
+									})
+								}), /* @__PURE__ */ jsx(Tooltip, {
+									content: t.chrome.collapse,
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": t.chrome.collapse,
+										className: "inline-flex items-center justify-center h-7 w-7 rounded-md cursor-pointer theme-muted-text hover:theme-text hover:theme-hover transition-colors duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-(--theme-link)",
+										onClick: collapseAll,
+										children: /* @__PURE__ */ jsx(BsArrowsCollapse, { className: "h-3.5 w-3.5" })
+									})
 								})]
 							})
 						}), /* @__PURE__ */ jsx(TreeView, {
@@ -1028,10 +1030,9 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 									icon: getNodeIcon(rootNode, slots.storageIconUrl, t.chrome.storageIconAlt),
 									storageCount: getNodeChildren(parentToChildrenMap, rootNode.path).length,
 									getItems: () => [{
-										kind: "action",
 										label: t.preview.open,
 										icon: /* @__PURE__ */ jsx(FaRegFolder, {}),
-										onSelect: () => openUserNode(rootNode)
+										onClick: () => openUserNode(rootNode)
 									}],
 									openMenu,
 									onOpen: openUserNode
@@ -1041,7 +1042,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 							selectedStorage: null,
 							onRefresh: handleRefresh
 						})]
-					}) : !selectedNode ? /* @__PURE__ */ jsx(NoFileSelectedPreview, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					}) : !selectedNode ? /* @__PURE__ */ jsx(NoFileSelectedPreview, {}) : /* @__PURE__ */ jsxs(Fragment, { 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", {
@@ -1093,7 +1094,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											children: t.createFolder.action
 										})]
 									}),
-									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsxs(MenuButton, {
+									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
 										"aria-label": t.chrome.upload,
 										className: "btn btn-info cursor-pointer flex items-center justify-between pr-0.5!",
 										disabled: selectedNode.type === "file" || !selectedNode.storageId,
@@ -1101,23 +1102,18 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											className: "hidden md:inline",
 											children: t.chrome.upload
 										})] }), /* @__PURE__ */ jsx(FaAngleDown, { 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",
+									}), /* @__PURE__ */ jsxs(MenuPopup, {
+										align: "end",
+										className: "w-36",
+										children: [/* @__PURE__ */ jsx(MenuItem, {
 											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",
+										}), /* @__PURE__ */ jsx(MenuItem, {
 											onClick: () => folderInputRef.current?.click(),
 											children: "Select Folder"
-										}) })]
+										})]
 									})] }),
-									/* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsxs(MenuButton, {
+									/* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
 										"aria-label": t.chrome.download,
 										className: "btn btn-info cursor-pointer flex items-center justify-between pr-0.5!",
 										disabled: checkedItems.size === 0 && selectedNode.type !== "file" || hasFolderSelected() || !selectedNode.storageId,
@@ -1125,28 +1121,28 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											className: "hidden md:inline",
 											children: t.chrome.download
 										})] }), /* @__PURE__ */ jsx(FaAngleDown, { 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",
+									}), /* @__PURE__ */ jsxs(MenuPopup, {
+										align: "end",
+										className: "w-72",
+										children: [/* @__PURE__ */ jsx(MenuItem, {
 											onClick: handleDownload,
 											children: t.chrome.downloadFromBrowser
-										}) }), downloadCommand && downloadCommandText && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuSeparator, { className: "my-0.5 h-px theme-border" }), /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-											className: "text-sm w-full text-center pointer-events-none px-2 py-1.5",
-											children: downloadCommand.label
-										}), /* @__PURE__ */ jsx(CopyCodeBlock, {
-											textToCopy: downloadCommandText,
-											children: /* @__PURE__ */ jsx("div", {
-												className: "overflow-x-auto text-xs",
-												children: keyedByContent(downloadCommandText.split("\n"), (l) => l).map(({ key, item: line }) => /* @__PURE__ */ jsx("div", {
-													className: "whitespace-nowrap",
-													children: line
-												}, key))
-											})
-										})] }) })] })]
+										}), downloadCommand && downloadCommandText && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsxs("div", {
+											className: "px-2 py-1.5",
+											children: [/* @__PURE__ */ jsx("p", {
+												className: "text-sm text-center pb-1.5",
+												children: downloadCommand.label
+											}), /* @__PURE__ */ jsx(CopyCodeBlock, {
+												textToCopy: downloadCommandText,
+												children: /* @__PURE__ */ jsx("div", {
+													className: "overflow-x-auto text-xs",
+													children: keyedByContent(downloadCommandText.split("\n"), (l) => l).map(({ key, item: line }) => /* @__PURE__ */ jsx("div", {
+														className: "whitespace-nowrap",
+														children: line
+													}, key))
+												})
+											})]
+										})] })]
 									})] }),
 									/* @__PURE__ */ jsxs("button", {
 										type: "button",
@@ -1217,7 +1213,7 @@ 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-element)" : "theme-muted-text border-transparent hover:theme-text");
+							const tabClass = (active) => clsx("mx-2.5 border-b-2 px-1 py-2.5 text-[13px] font-medium cursor-pointer transition-colors", active ? "theme-text border-(--theme-element)" : "theme-muted-text border-transparent hover:theme-text");
 							return /* @__PURE__ */ jsxs("div", {
 								className: "flex h-full min-h-0 flex-col",
 								children: [/* @__PURE__ */ jsxs("div", {
@@ -1267,7 +1263,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 															className: "tabular-nums",
 															children: formatFileSize(selectedNode.size)
 														}),
-														modifiedDt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+														modifiedDt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 															"aria-hidden": true,
 															children: "·"
 														}), /* @__PURE__ */ jsxs("span", { children: ["Modified ", modifiedDt.toRelative()] })] })
@@ -1284,9 +1280,9 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											children: [/* @__PURE__ */ jsx(ShareFileButton, {
 												node: selectedNode,
 												onShare: onShareFileButtonClick
-											}), /* @__PURE__ */ jsx(TooltipInfo, {
+											}), /* @__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.",
-												place: "right"
+												side: "right"
 											})]
 										}),
 										/* @__PURE__ */ jsxs("div", {
@@ -1297,21 +1293,21 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											}), /* @__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", {
+													typeof selectedNode.size === "number" && /* @__PURE__ */ jsxs(Fragment, { 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", {
+													selectedNode.contentType && /* @__PURE__ */ jsxs(Fragment, { 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", {
+													createdDt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: t.chrome.created
 													}), /* @__PURE__ */ jsxs("dd", { children: [
@@ -1322,7 +1318,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 															children: ["· ", createdDt.toRelative()]
 														})
 													] })] }),
-													modifiedDt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+													modifiedDt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: "Last Modified"
 													}), /* @__PURE__ */ jsxs("dd", { children: [
@@ -1333,14 +1329,14 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 															children: ["· ", modifiedDt.toRelative()]
 														})
 													] })] }),
-													selectedNode.hash && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+													selectedNode.hash && /* @__PURE__ */ jsxs(Fragment, { 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", {
+													selectedNode.storageClass && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: "Storage Class"
 													}), /* @__PURE__ */ jsx("dd", {
@@ -1420,7 +1416,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 								}),
 								" ",
 								/* @__PURE__ */ jsx("span", {
-									className: cx(isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && "text-amber-800 font-semibold"),
+									className: clsx(isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && "text-amber-800 font-semibold"),
 									children: formatFileSize(pendingUpload?.totalSize ?? 0)
 								})
 							]

package/dist/file-explorer/FileExplorerContext.js

@@ -1,10 +1,10 @@
-import { useNotify, useStrings } from "../components/Provider.js";
 import { keyedByContent } from "../components/keys.js";
+import { useNotify, useStrings } from "../components/Provider.js";
 import { mapWithConcurrency } from "./lib/batch.js";
 import { calculateUploadNodesTotalSize, getUploadSessionETA, removeLeadingSlash } from "./lib/utils.js";
 import { UploadSessionToast } from "./toasts.js";
-import { createContext, use, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useRef } from "react";
 //#region src/file-explorer/FileExplorerContext.tsx
 var UPLOAD_CONCURRENCY = 3;
 var FileExplorerContext = createContext(void 0);

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

@@ -1,8 +1,8 @@
 import { useCssIsDark } from "../../components/useCssIsDark.js";
 import { defineEditorThemes, getThemeName } from "../../editor/themes.js";
 import { setupMonacoWorkers } from "../../editor/workers.js";
-import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import * as monaco from "monaco-editor";
 //#region src/file-explorer/FilePreview/CodePreviewEditor.tsx
 var OPTIONS = {

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

@@ -1,5 +1,5 @@
-import { useStrings } from "../../components/Provider.js";
 import { FaExpand } from "../../icons/fa/FaExpand.js";
+import { useStrings } from "../../components/Provider.js";
 import { formatFileSize } from "../lib/utils.js";
 import { getPreviewKind } from "./previewType.js";
 import { StreamedBadge } from "./StreamedBadge.js";

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

@@ -1,14 +1,13 @@
-import { useStrings } from "../../components/Provider.js";
 import { FaLock } from "../../icons/fa/FaLock.js";
-import { TOOLTIP_ID } from "../../components/Tooltip.js";
+import { useStrings } from "../../components/Provider.js";
+import { InfoTip } from "../../components/InfoTip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/file-explorer/FilePreview/StreamedBadge.tsx
 function StreamedBadge() {
 	const t = useStrings().fileExplorer;
-	return /* @__PURE__ */ jsxs("span", {
-		className: "inline-flex shrink-0 items-center gap-1 rounded-full border border-green-500/40 bg-green-500/15 px-2 py-0.5 text-[11px] text-green-600",
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": t.preview.streamedTooltip,
+	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",
 		children: [/* @__PURE__ */ jsx(FaLock, { className: "h-2.5 w-2.5" }), t.preview.streamed]
 	});
 }

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

@@ -1,10 +1,10 @@
-import { useStrings } from "../../components/Provider.js";
 import { BsFileEarmarkZip } from "../../icons/bs/BsFileEarmarkZip.js";
 import { BsMusicNoteBeamed } from "../../icons/bs/BsMusicNoteBeamed.js";
 import { FaLock } from "../../icons/fa/FaLock.js";
 import { FiDownload } from "../../icons/fi/FiDownload.js";
 import { FiFile } from "../../icons/fi/FiFile.js";
 import { positionKeys, withPositionKeys } from "../../components/keys.js";
+import { useStrings } from "../../components/Provider.js";
 import Loader from "../../components/Loader.js";
 import Markdown from "../../components/Markdown.js";
 import { formatFileSize, getFileExtension } from "../lib/utils.js";
@@ -14,9 +14,9 @@ import { joinSource, parseDelimited, parseNotebook, stripAnsi } from "./parse.js
 import { countLines } from "./readCappedBytes.js";
 import { useObjectBlobUrl } from "./useObjectBlobUrl.js";
 import { useObjectText } from "./useObjectText.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useCallback, useMemo, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/file-explorer/FilePreview/Viewer.tsx
 var CodePreviewEditor = lazy(() => import("./CodePreviewEditor.js"));
 var PREVIEW_MARKDOWN_CONTROLS = {
@@ -126,7 +126,7 @@ function ImageView({ node, url, zoom, onDownload, storage }) {
 		children: /* @__PURE__ */ jsx("img", {
 			src: url,
 			alt: node.name,
-			className: cx("block rounded-md shadow-lg", fit && "object-contain"),
+			className: clsx("block rounded-md shadow-lg", fit && "object-contain"),
 			style: fit ? {
 				maxWidth: "100%",
 				maxHeight: "100%"
@@ -249,12 +249,12 @@ function CodeView({ node, url, onDownload, storage, onCorsRetry }) {
 					className: "inline-flex shrink-0 overflow-hidden rounded-full border theme-border text-[11px]",
 					children: [/* @__PURE__ */ jsx("button", {
 						type: "button",
-						className: cx("cursor-pointer px-2 py-0.5", tail ? "theme-muted-text theme-hover" : "theme-element"),
+						className: clsx("cursor-pointer px-2 py-0.5", tail ? "theme-muted-text theme-hover" : "theme-element"),
 						onClick: () => setTail(false),
 						children: t.preview.head
 					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
-						className: cx("cursor-pointer px-2 py-0.5", tail ? "theme-element" : "theme-muted-text theme-hover"),
+						className: clsx("cursor-pointer px-2 py-0.5", tail ? "theme-element" : "theme-muted-text theme-hover"),
 						onClick: () => setTail(true),
 						children: t.preview.tail
 					})]
@@ -348,7 +348,7 @@ function CsvTable({ node, text, maxRows }) {
 						children: header[i] ?? ""
 					}, key))]
 				}) }), /* @__PURE__ */ jsx("tbody", { children: withPositionKeys(shown, "row").map(({ key, item: row }, r) => /* @__PURE__ */ jsxs("tr", {
-					className: cx(r % 2 === 1 && "bg-(--theme-panel-bg)/50"),
+					className: clsx(r % 2 === 1 && "bg-(--theme-panel-bg)/50"),
 					children: [/* @__PURE__ */ jsx("td", {
 						className: "px-3.5 py-1.5 text-right theme-muted-text",
 						children: r + 1
@@ -471,7 +471,7 @@ function PreviewFetchState({ loading, tooLarge, size, error, corsError, storage,
 		onDownload
 	});
 	if (error) return /* @__PURE__ */ jsx(PreviewError, { onDownload });
-	return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function NotPreviewable({ icon, title, message, onDownload }) {
 	const t = useStrings().fileExplorer;

package/dist/file-explorer/FilePreview/index.d.ts

@@ -10,5 +10,5 @@ interface FilePreviewProps {
     onDownload: (node: TreeNode) => void;
     onCopyUri: (node: TreeNode) => void;
 }
-export declare function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigate, onClose, onDownload, onCopyUri, }: FilePreviewProps): import("react").ReactPortal | null;
+export declare function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigate, onClose, onDownload, onCopyUri, }: FilePreviewProps): import("react").JSX.Element | null;
 export {};