@parallelworks/ui 0.41.0 → 0.42.0

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 {};

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

@@ -1,4 +1,3 @@
-import { useStrings } from "../../components/Provider.js";
 import { FaLink } from "../../icons/fa/FaLink.js";
 import { FiDownload } from "../../icons/fi/FiDownload.js";
 import { FiFile } from "../../icons/fi/FiFile.js";
@@ -7,16 +6,17 @@ import { LuChevronLeft } from "../../icons/lu/LuChevronLeft.js";
 import { LuChevronRight } from "../../icons/lu/LuChevronRight.js";
 import { LuZoomIn } from "../../icons/lu/LuZoomIn.js";
 import { LuZoomOut } from "../../icons/lu/LuZoomOut.js";
+import { useStrings } from "../../components/Provider.js";
+import { Modal } from "../../components/Modal.js";
 import { formatFileSize } from "../lib/utils.js";
 import { getPreviewKind } from "./previewType.js";
 import { StreamedBadge } from "./StreamedBadge.js";
 import { usePresignedUrl } from "./usePresignedUrl.js";
 import { FilePreviewViewer } from "./Viewer.js";
-import cx from "classnames";
-import { useCallback, useEffect, useState } from "react";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
 //#region src/file-explorer/FilePreview/index.tsx
 /** Document views run their own chrome and text to the edge of the stage, which
 * full-window bars would float on top of; they get the bars in flow instead. */
@@ -35,50 +35,27 @@ function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigat
 	const index = node ? siblings.findIndex((s) => s.path === node.path) : -1;
 	const hasPrev = index > 0;
 	const hasNext = index > -1 && index < siblings.length - 1;
-	const goPrev = useCallback(() => {
+	const goPrev = () => {
 		const prev = index > 0 ? siblings[index - 1] : void 0;
 		if (prev) onNavigate(prev);
-	}, [
-		index,
-		siblings,
-		onNavigate
-	]);
-	const goNext = useCallback(() => {
+	};
+	const goNext = () => {
 		const next = index > -1 ? siblings[index + 1] : void 0;
 		if (next) onNavigate(next);
-	}, [
-		index,
-		siblings,
-		onNavigate
-	]);
+	};
 	useEffect(() => {
 		setZoom(100);
 	}, [node]);
-	useEffect(() => {
-		if (!open) return;
-		const onKeyDown = (e) => {
-			if (e.key === "Escape") onClose();
-			else if (e.key === "ArrowRight") goNext();
-			else if (e.key === "ArrowLeft") goPrev();
-		};
-		document.addEventListener("keydown", onKeyDown);
-		return () => document.removeEventListener("keydown", onKeyDown);
-	}, [
-		open,
-		onClose,
-		goNext,
-		goPrev
-	]);
-	if (!open || !node) return null;
+	if (!node) return null;
 	const kind = getPreviewKind(node);
 	const showZoom = kind === "image";
 	const floatingChrome = isOverlay && !isDocumentView(kind);
 	const topBar = /* @__PURE__ */ jsxs("div", {
-		className: cx("flex items-center justify-between gap-3 px-4 py-3", floatingChrome ? "absolute inset-x-0 top-0 z-10 bg-linear-to-b from-black/80 to-transparent text-white" : "shrink-0 border-b theme-border"),
+		className: clsx("flex items-center justify-between gap-3 px-4 py-3", floatingChrome ? "absolute inset-x-0 top-0 z-10 bg-linear-to-b from-black/80 to-transparent text-white" : "shrink-0 border-b theme-border"),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 items-center gap-2.5",
 			children: [
-				/* @__PURE__ */ jsx(FiFile, { className: cx("h-4 w-4 shrink-0", !floatingChrome && "theme-muted-text") }),
+				/* @__PURE__ */ jsx(FiFile, { className: clsx("h-4 w-4 shrink-0", !floatingChrome && "theme-muted-text") }),
 				/* @__PURE__ */ jsx("span", {
 					className: "truncate font-semibold",
 					children: node.name
@@ -89,7 +66,7 @@ function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigat
 			className: "flex shrink-0 items-center gap-1.5",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					className: cx("mr-1 flex items-center rounded-lg p-0.5", floatingChrome ? "bg-white/10" : "theme-muted-panel"),
+					className: clsx("mr-1 flex items-center rounded-lg p-0.5", floatingChrome ? "bg-white/10" : "theme-muted-panel"),
 					children: [/* @__PURE__ */ jsx(SegButton, {
 						active: !isOverlay,
 						overlayChrome: floatingChrome,
@@ -124,14 +101,14 @@ function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigat
 		})]
 	});
 	const footer = /* @__PURE__ */ jsxs("div", {
-		className: cx("flex items-center justify-between gap-4 px-4 py-2.5", floatingChrome ? "absolute inset-x-0 bottom-0 z-10 bg-linear-to-t from-black/80 to-transparent text-white" : "shrink-0 border-t theme-border"),
+		className: clsx("flex items-center justify-between gap-4 px-4 py-2.5", floatingChrome ? "absolute inset-x-0 bottom-0 z-10 bg-linear-to-t from-black/80 to-transparent text-white" : "shrink-0 border-t theme-border"),
 		children: [/* @__PURE__ */ jsxs("span", {
-			className: cx("text-xs", !floatingChrome && "theme-muted-text"),
+			className: clsx("text-xs", !floatingChrome && "theme-muted-text"),
 			children: [typeof node.size === "number" && formatFileSize(node.size), node.contentType && ` · ${node.contentType}`]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-3",
 			children: [showZoom && /* @__PURE__ */ jsxs("div", {
-				className: cx("flex items-center gap-1 rounded-lg p-0.5", floatingChrome ? "bg-white/10" : "theme-muted-panel"),
+				className: clsx("flex items-center gap-1 rounded-lg p-0.5", floatingChrome ? "bg-white/10" : "theme-muted-panel"),
 				children: [
 					/* @__PURE__ */ jsx(MiniButton, {
 						overlay: floatingChrome,
@@ -188,49 +165,41 @@ function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigat
 			onDownload: () => onDownload(node)
 		}, node.path)
 	});
-	return createPortal(/* @__PURE__ */ jsxs("div", {
-		role: "none",
-		className: "fixed inset-0 z-9995 flex items-center justify-center",
-		style: {
-			backgroundColor: isOverlay ? "rgba(1,4,9,.94)" : "rgba(1,4,9,.62)",
-			backdropFilter: isOverlay ? void 0 : "blur(3px)",
-			WebkitBackdropFilter: isOverlay ? void 0 : "blur(3px)"
-		},
-		onClick: (e) => {
-			if (e.target === e.currentTarget) onClose();
+	return /* @__PURE__ */ jsxs(Modal, {
+		open,
+		onClose,
+		align: "center",
+		panel: false,
+		"aria-label": node.name,
+		backdropClassName: isOverlay ? "bg-[rgba(1,4,9,.94)]" : "bg-[rgba(1,4,9,.62)] backdrop-blur-[3px]",
+		className: clsx("flex flex-col", isOverlay ? "fixed inset-0" : "relative h-[min(780px,90vh)] w-[min(1120px,94vw)] overflow-hidden rounded-2xl border theme-border shadow-2xl", floatingChrome ? "bg-transparent" : "bg-(--theme-panel-bg)"),
+		onKeyDown: (e) => {
+			if (e.key === "ArrowRight") goNext();
+			else if (e.key === "ArrowLeft") goPrev();
 		},
-		children: [isOverlay && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(EdgeButton, {
-			side: "left",
-			label: t.preview.previousFile,
-			disabled: !hasPrev,
-			onClick: goPrev
-		}), /* @__PURE__ */ jsx(EdgeButton, {
-			side: "right",
-			label: t.preview.nextFile,
-			disabled: !hasNext,
-			onClick: goNext
-		})] }), /* @__PURE__ */ jsxs("div", {
-			role: "dialog",
-			"aria-modal": "true",
-			"aria-label": node.name,
-			className: cx("relative flex flex-col", isOverlay ? "h-screen w-screen" : "overflow-hidden rounded-2xl border theme-border shadow-2xl", floatingChrome ? "bg-transparent" : "bg-(--theme-panel-bg)"),
-			style: isOverlay ? void 0 : {
-				width: "min(1120px, 94vw)",
-				height: "min(780px, 90vh)"
-			},
-			children: [
-				topBar,
-				stage,
-				footer
-			]
-		})]
-	}), document.body);
+		children: [
+			isOverlay && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(EdgeButton, {
+				side: "left",
+				label: t.preview.previousFile,
+				disabled: !hasPrev,
+				onClick: goPrev
+			}), /* @__PURE__ */ jsx(EdgeButton, {
+				side: "right",
+				label: t.preview.nextFile,
+				disabled: !hasNext,
+				onClick: goNext
+			})] }),
+			topBar,
+			stage,
+			footer
+		]
+	});
 }
 function SegButton({ active, overlayChrome, onClick, children }) {
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		onClick,
-		className: cx("cursor-pointer whitespace-nowrap rounded-md px-2.5 py-1 text-[11.5px] font-medium transition-colors", active ? "bg-(--theme-element) text-(--theme-element-text)" : overlayChrome ? "text-white/70 hover:text-white" : "theme-muted-text hover:theme-text"),
+		className: clsx("cursor-pointer whitespace-nowrap rounded-md px-2.5 py-1 text-[11.5px] font-medium transition-colors", active ? "bg-(--theme-element) text-(--theme-element-text)" : overlayChrome ? "text-white/70 hover:text-white" : "theme-muted-text hover:theme-text"),
 		children
 	});
 }
@@ -240,7 +209,7 @@ function ChromeButton({ overlay, label, onClick, children }) {
 		"aria-label": label,
 		title: label,
 		onClick,
-		className: cx("flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg transition-colors", overlay ? "text-white/90 hover:bg-white/15" : "theme-muted-text hover:theme-hover hover:theme-text"),
+		className: clsx("flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg transition-colors", overlay ? "text-white/90 hover:bg-white/15" : "theme-muted-text hover:theme-hover hover:theme-text"),
 		children
 	});
 }
@@ -251,7 +220,7 @@ function MiniButton({ overlay, label, onClick, disabled, children }) {
 		title: label,
 		onClick,
 		disabled,
-		className: cx("flex h-6 w-7 items-center justify-center rounded-md transition-colors", disabled ? "cursor-not-allowed opacity-40" : cx("cursor-pointer", overlay ? "hover:bg-white/15" : "hover:theme-hover")),
+		className: clsx("flex h-6 w-7 items-center justify-center rounded-md transition-colors", disabled ? "cursor-not-allowed opacity-40" : clsx("cursor-pointer", overlay ? "hover:bg-white/15" : "hover:theme-hover")),
 		children
 	});
 }
@@ -260,11 +229,8 @@ function EdgeButton({ side, label, disabled, onClick }) {
 		type: "button",
 		"aria-label": label,
 		disabled,
-		onClick: (e) => {
-			e.stopPropagation();
-			onClick();
-		},
-		className: cx("absolute top-1/2 z-20 flex h-13 w-13 -translate-y-1/2 items-center justify-center rounded-full text-white backdrop-blur", side === "left" ? "left-5" : "right-5", disabled ? "cursor-not-allowed opacity-30" : "cursor-pointer hover:bg-white/20"),
+		onClick,
+		className: clsx("absolute top-1/2 z-20 flex h-13 w-13 -translate-y-1/2 items-center justify-center rounded-full text-white backdrop-blur", side === "left" ? "left-5" : "right-5", disabled ? "cursor-not-allowed opacity-30" : "cursor-pointer hover:bg-white/20"),
 		style: { backgroundColor: "rgba(22,27,34,.7)" },
 		children: side === "left" ? /* @__PURE__ */ jsx(LuChevronLeft, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx(LuChevronRight, { className: "h-6 w-6" })
 	});

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

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
-import { type OpenMenu, type RowMenuItem } from '../list/index.js';
+import type { OpenMenu } from '../components/ContextMenu.js';
+import type { MenuEntry } from '../components/MenuEntries.js';
 import type { TreeNode } from './lib/types.js';
 export declare const ROW_HEIGHT_SHORT = 45;
 export declare const ROW_HEIGHT_TALL = 52.25;
@@ -17,7 +18,7 @@ interface FileRowProps {
     active: boolean;
     checked: boolean;
     canPreview: boolean;
-    getItems: () => RowMenuItem[];
+    getItems: () => MenuEntry[];
     openMenu: OpenMenu;
     onOpen: (node: TreeNode) => void;
     onToggleCheck: (node: TreeNode, checked: boolean) => void;
@@ -27,7 +28,7 @@ export declare function UserRow({ node, icon, storageCount, getItems, openMenu,
     node: TreeNode;
     icon: ReactNode;
     storageCount: number;
-    getItems: () => RowMenuItem[];
+    getItems: () => MenuEntry[];
     openMenu: OpenMenu;
     onOpen: (node: TreeNode) => void;
 }): import("react").JSX.Element;

package/dist/file-explorer/FileRow.js

@@ -1,11 +1,11 @@
-import { useStrings } from "../components/Provider.js";
 import { LuEye } from "../icons/lu/LuEye.js";
-import { TOOLTIP_ID } from "../components/Tooltip.js";
-import { MoreButton, useRowMenuActive } from "../list/RowContextMenu.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { useStrings } from "../components/Provider.js";
 import { Table } from "../components/Table.js";
 import { RowSelectCheckbox } from "../list/ListTable.js";
+import { MoreButton, rowContextMenuProps, useRowMenuActive } from "../list/rowMenu.js";
 import { formatFileSize } from "./lib/utils.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 var ROW_HEIGHT_TALL = 52.25;
@@ -19,14 +19,6 @@ function fileRowHeight(node) {
 function isInteractiveTarget(e) {
 	return !!e.target.closest("a,button,input,label");
 }
-function lazyContextMenuProps(openMenu, getItems) {
-	return { onContextMenu: (e) => {
-		const items = getItems();
-		e.preventDefault();
-		if (items.length > 0) e.stopPropagation();
-		openMenu(e.clientX, e.clientY, items);
-	} };
-}
 function UserRow({ node, icon, storageCount, getItems, openMenu, onOpen }) {
 	const t = useStrings().fileExplorer;
 	const { active: menuActive, openMenu: openRowMenu } = useRowMenuActive(openMenu);
@@ -35,9 +27,9 @@ function UserRow({ node, icon, storageCount, getItems, openMenu, onOpen }) {
 		onOpen(node);
 	};
 	return /* @__PURE__ */ jsxs("tr", {
-		className: cx("group cursor-pointer", menuActive ? "theme-hover" : "hover:theme-hover"),
+		className: clsx("group cursor-pointer", menuActive ? "theme-hover" : "hover:theme-hover"),
 		onClick: handleRowClick,
-		...lazyContextMenuProps(openRowMenu, getItems),
+		...rowContextMenuProps(openRowMenu, getItems),
 		children: [
 			/* @__PURE__ */ jsx(Table.Item, {
 				className: "py-2.5",
@@ -65,8 +57,8 @@ function UserRow({ node, icon, storageCount, getItems, openMenu, onOpen }) {
 				children: /* @__PURE__ */ jsx("div", {
 					className: "absolute inset-y-0 right-0 flex items-center pr-4",
 					children: /* @__PURE__ */ jsx(MoreButton, {
-						active: menuActive,
-						onOpen: (x, y) => openRowMenu(x, y, getItems())
+						open: menuActive,
+						onOpen: (button) => openRowMenu(button, getItems())
 					})
 				})
 			})
@@ -87,10 +79,10 @@ function FileRow({ node, icon, rowId, rowIndex, active, checked, canPreview, get
 		id: rowId,
 		"aria-rowindex": rowIndex,
 		"aria-selected": checked,
-		className: cx("group", checked ? "bg-blue-500/5" : menuActive ? "theme-hover" : "hover:theme-hover", active && "group-focus-visible/grid:ring-1 group-focus-visible/grid:ring-inset group-focus-visible/grid:ring-(--theme-link)", "cursor-pointer"),
+		className: clsx("group", checked ? "bg-blue-500/5" : menuActive ? "theme-hover" : "hover:theme-hover", active && "group-focus-visible/grid:ring-1 group-focus-visible/grid:ring-inset group-focus-visible/grid:ring-(--theme-link)", "cursor-pointer"),
 		onClick: handleRowClick,
 		style: { height: fileRowHeight(node) },
-		...lazyContextMenuProps(openRowMenu, getItems),
+		...rowContextMenuProps(openRowMenu, getItems),
 		children: [
 			/* @__PURE__ */ jsx(Table.Item, {
 				className: "py-2.5",
@@ -129,32 +121,34 @@ function FileRow({ node, icon, rowId, rowIndex, active, checked, canPreview, get
 			}),
 			/* @__PURE__ */ jsx(Table.Item, {
 				className: "truncate py-2.5 text-sm text-(--theme-muted-text-color)",
-				children: /* @__PURE__ */ jsx("span", {
-					"data-tooltip-id": TOOLTIP_ID,
-					"data-tooltip-content": node.modified ?? "",
-					"data-tooltip-place": "top",
-					children: !isDir && modifiedDt?.isValid ? modifiedDt.toRelative() : "—"
-				})
+				children: !isDir && modifiedDt?.isValid ? /* @__PURE__ */ jsx(Tooltip, {
+					content: modifiedDt.toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
+					children: /* @__PURE__ */ jsx("time", {
+						dateTime: modifiedDt.toISO() ?? void 0,
+						children: modifiedDt.toRelative()
+					})
+				}) : "—"
 			}),
 			/* @__PURE__ */ jsx(Table.Item, {
 				className: "relative py-2.5",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "absolute inset-y-0 right-0 flex items-center gap-0.5 pr-4",
-					children: [!isDir && canPreview && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						"aria-label": t.preview.preview,
-						"data-tooltip-id": "global-tooltip",
-						"data-tooltip-content": t.preview.preview,
-						"data-tooltip-place": "bottom",
-						onClick: (e) => {
-							e.stopPropagation();
-							onPreview(node);
-						},
-						className: cx("rounded p-1 text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) [&>svg]:h-4 [&>svg]:w-4", menuActive ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100"),
-						children: /* @__PURE__ */ jsx(LuEye, {})
+					children: [!isDir && canPreview && /* @__PURE__ */ jsx(Tooltip, {
+						content: t.preview.preview,
+						side: "bottom",
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": t.preview.preview,
+							onClick: (e) => {
+								e.stopPropagation();
+								onPreview(node);
+							},
+							className: clsx("rounded p-1 text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) [&>svg]:h-4 [&>svg]:w-4", menuActive ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100"),
+							children: /* @__PURE__ */ jsx(LuEye, {})
+						})
 					}), /* @__PURE__ */ jsx(MoreButton, {
-						active: menuActive,
-						onOpen: (x, y) => openRowMenu(x, y, getItems())
+						open: menuActive,
+						onOpen: (button) => openRowMenu(button, getItems())
 					})]
 				})
 			})

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

@@ -1,4 +1,5 @@
-import type { OpenMenu, RowMenuItem } from '../list/index.js';
+import type { OpenMenu } from '../components/ContextMenu.js';
+import type { MenuEntry } from '../components/MenuEntries.js';
 import { type LoadMoreState } from './LoadMoreRow.js';
 import type { TreeNode } from './lib/types.js';
 interface Span {
@@ -24,7 +25,7 @@ interface FileRowsWindowProps {
     rowIdPrefix: string;
     scrollEl: HTMLElement | null;
     loadMore?: LoadMoreState | undefined;
-    getItems: (node: TreeNode) => RowMenuItem[];
+    getItems: (node: TreeNode) => MenuEntry[];
     openMenu: OpenMenu;
     onOpen: (node: TreeNode) => void;
     onToggleCheck: (node: TreeNode, checked: boolean) => void;

package/dist/file-explorer/FileRowsWindow.js

@@ -1,12 +1,12 @@
-import { useSlots, useStrings } from "../components/Provider.js";
 import { FaRegFolder } from "../icons/fa/FaRegFolder.js";
 import { FiFile } from "../icons/fi/FiFile.js";
+import { useSlots, useStrings } from "../components/Provider.js";
 import { canPreview } from "./FilePreview/previewType.js";
 import { getNodeIcon } from "./helpers.js";
 import { FileRow } from "./FileRow.js";
 import { LoadMoreRow } from "./LoadMoreRow.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/file-explorer/FileRowsWindow.tsx
 /** `start`/`end` include scrollMargin but getTotalSize() does not, so the margin
 *  has to come back out of both. */
@@ -29,7 +29,7 @@ function FileRowsWindow({ items, padTop, padBottom, nodes, checkedItems, activeI
 	const storageIconAlt = useStrings().fileExplorer.chrome.storageIconAlt;
 	useNestedScrollerWarning(scrollEl, nodes.length);
 	useRowPitchAudit(scrollEl, nodes, items);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		padTop > 0 && /* @__PURE__ */ jsx(Spacer, { height: padTop }, "pad-top"),
 		items.map((item) => {
 			const node = nodes[item.index];
@@ -62,7 +62,7 @@ function FileRowsWindow({ items, padTop, padBottom, nodes, checkedItems, activeI
 	] });
 }
 function Spacer({ height }) {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("tr", {
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("tr", {
 		"aria-hidden": "true",
 		className: "border-0",
 		children: /* @__PURE__ */ jsx("td", {

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

@@ -1,4 +1,5 @@
-import { type OpenMenu, type RowMenuItem } from '../list/index.js';
+import type { OpenMenu } from '../components/ContextMenu.js';
+import type { MenuEntry } from '../components/MenuEntries.js';
 import { type LoadMoreState } from './LoadMoreRow.js';
 import type { TreeNode } from './lib/types.js';
 interface FileTableProps {
@@ -7,7 +8,7 @@ interface FileTableProps {
     allSelected: boolean;
     someSelected: boolean;
     onSelectAll: () => void;
-    getItems: (node: TreeNode) => RowMenuItem[];
+    getItems: (node: TreeNode) => MenuEntry[];
     openMenu: OpenMenu;
     onOpen: (node: TreeNode) => void;
     onToggleCheck: (node: TreeNode, checked: boolean) => void;

package/dist/file-explorer/FileTable.js

@@ -3,9 +3,9 @@ import { listTableFixedProps } from "../list/ListTable.js";
 import { fileRowHeight } from "./FileRow.js";
 import { FileRowsWindow, spacerHeights } from "./FileRowsWindow.js";
 import { FileTableHeaders } from "./FileTableHeaders.js";
-import cx from "classnames";
-import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/file-explorer/FileTable.tsx
 /** The file table. Give it a `key` of the folder path: a folder change must reset
@@ -133,7 +133,7 @@ function FileTable({ nodes, checkedItems, allSelected, someSelected, onSelectAll
 		className: "h-full overflow-auto",
 		children: /* @__PURE__ */ jsxs(Table, {
 			...listTableFixedProps,
-			className: cx(listTableFixedProps.className, "group/grid focus:outline-none"),
+			className: clsx(listTableFixedProps.className, "group/grid focus:outline-none"),
 			wrapperClassName: "overflow-x-auto",
 			tableProps: {
 				role: "grid",

package/dist/file-explorer/LoadMoreRow.js

@@ -1,8 +1,8 @@
 import { useStrings } from "../components/Provider.js";
 import Loader from "../components/Loader.js";
 import { useNearEnd } from "./useNearEnd.js";
-import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 function LoadMoreRow({ rowId, rowIndex, loading, error, auto, root, onLoadMore }) {
 	const t = useStrings().fileExplorer;
 	const ref = useRef(null);

package/dist/file-explorer/TreeView.js

@@ -1,16 +1,15 @@
-import { useStrings } from "../components/Provider.js";
 import { FaAngleRight } from "../icons/fa/FaAngleRight.js";
 import { FaRegFolder } from "../icons/fa/FaRegFolder.js";
 import { FaRegFolderOpen } from "../icons/fa6/FaRegFolderOpen.js";
 import { positionKeys } from "../components/keys.js";
+import { useStrings } from "../components/Provider.js";
 import { getParentPath } from "./lib/utils.js";
 import { canPreview } from "./FilePreview/previewType.js";
 import { getNodeIcon } from "./helpers.js";
 import { findRowIndex, flattenTreeRows, nextFileLimit, stepRow } from "./treeRows.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import Skeleton from "react-loading-skeleton";
 import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/file-explorer/TreeView.tsx
 /** 9px margin + 12px padding, per level. */
@@ -183,7 +182,7 @@ function indentStyle(depth, isDirectory) {
 }
 function IndentGuides({ depth }) {
 	if (depth === 0) return null;
-	return /* @__PURE__ */ jsx(Fragment$1, { children: positionKeys(depth, "indent").map((key, level) => /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsx(Fragment, { children: positionKeys(depth, "indent").map((key, level) => /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
 		className: "pointer-events-none absolute inset-y-0 w-px bg-(--theme-border)/60",
 		style: { left: GUIDE_OFFSET + level * INDENT_PER_LEVEL }
@@ -195,7 +194,7 @@ function RowIcons({ isDirectory, isExpanded, customIcon }) {
 		children: customIcon
 	});
 	const folder = isExpanded ? /* @__PURE__ */ jsx(FaRegFolderOpen, { className: "h-4 w-4 mr-1 text-sky-500" }) : /* @__PURE__ */ jsx(FaRegFolder, { className: "h-4 w-4 mr-1 text-sky-500/80" });
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FaAngleRight, { className: cx("h-3.5 w-3.5 shrink-0 theme-muted-text transition-transform duration-150", isExpanded && "rotate-90") }), customIcon ?? folder] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FaAngleRight, { className: clsx("h-3.5 w-3.5 shrink-0 theme-muted-text transition-transform duration-150", isExpanded && "rotate-90") }), customIcon ?? folder] });
 }
 /** Click-only, unlike the table's sentinel: the tree is a navigation aid, and
 *  growing it automatically as the user scrolls is what the cap exists to prevent. */
@@ -213,16 +212,15 @@ function TreeMoreRow({ depth, hiddenFiles, partial, loading, failed, onReveal })
 			style: { paddingLeft: depth * INDENT_PER_LEVEL + ROW_PAD_FILE },
 			children: loading ? /* @__PURE__ */ jsx("span", { children: t.loadingMore }) : /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: cx("cursor-pointer underline", failed ? "text-red-500" : "theme-link"),
+				className: clsx("cursor-pointer underline", failed ? "text-red-500" : "theme-link"),
 				onClick: onReveal,
 				children: label()
 			})
 		})]
 	});
 }
-/** Sized by the slot, not by its contents: react-loading-skeleton wraps each bar
-*  in an inline span, so a bar occupies a line box taller than its `height` and
-*  the overflow would sit on top of the absolutely positioned row below. */
+/** Sized by the slot, not by its contents, so the bars never spill onto the
+*  absolutely positioned row below. */
 function TreeSkeletonRow({ depth }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative h-full overflow-hidden",
@@ -233,10 +231,7 @@ function TreeSkeletonRow({ depth }) {
 				0,
 				1,
 				2
-			].map((i) => /* @__PURE__ */ jsx(Skeleton, {
-				height: 12,
-				containerClassName: "block leading-none"
-			}, i))
+			].map((i) => /* @__PURE__ */ jsx("div", { className: "h-3 shrink-0 animate-pulse rounded bg-(--theme-muted-panel-bg)" }, i))
 		})]
 	});
 }
@@ -339,10 +334,10 @@ var TreeRowItem = memo(function TreeRowItem({ row, isSelected, onToggleExpand, o
 	const customIcon = getNodeIcon(node);
 	const label = isDirectory && node.storageId && node.displayName ? node.displayName : node.name;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("relative h-full rounded-md transition-[box-shadow,background-color] duration-150", dragActive && "ring-1 ring-(--theme-link)/60"),
+		className: clsx("relative h-full rounded-md transition-[box-shadow,background-color] duration-150", dragActive && "ring-1 ring-(--theme-link)/60"),
 		...dragHandlers,
 		children: [/* @__PURE__ */ jsx(IndentGuides, { depth }), /* @__PURE__ */ jsxs("div", {
-			className: cx("group relative flex items-center gap-1.5 pr-2 py-1 rounded-md cursor-pointer", "transition-colors duration-150", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--theme-link)", isSelected ? "bg-(--theme-element)/15 font-medium" : dragActive ? "theme-hover" : "hover:theme-hover"),
+			className: clsx("group relative flex items-center gap-1.5 pr-2 py-1 rounded-md cursor-pointer", "transition-colors duration-150", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--theme-link)", isSelected ? "bg-(--theme-element)/15 font-medium" : dragActive ? "theme-hover" : "hover:theme-hover"),
 			style: indentStyle(depth, isDirectory),
 			onClick: handleSelect,
 			onKeyDown: handleKeyDown,