@parallelworks/ui 0.50.0 → 0.52.0

package/dist/file-explorer/FileExplorer.js

@@ -1,26 +1,28 @@
 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 { 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 +44,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,9 +58,11 @@ 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
+				})
 			})
 		]
 	});
@@ -320,10 +322,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 };
@@ -687,22 +689,30 @@ 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
+						}) : /* @__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);
+				})
 			})
 		});
 	};
@@ -1056,33 +1066,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 +1112,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 +1143,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 +1154,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
+											})
 										})
 									})
 								]
@@ -1202,22 +1233,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 +1303,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 +1417,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 +1438,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,7 +1,7 @@
 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";
@@ -439,7 +439,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"];

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

@@ -1,8 +1,8 @@
 import { cx } from "../../cx.js";
 import { ChevronLeftIcon, ChevronRightIcon, CloseIcon, DownloadIcon, FileIcon, LinkIcon, ZoomInIcon, ZoomOutIcon } from "../../icons.js";
 import { usePersistedState, useStrings } from "../../components/Provider.js";
-import { Modal } from "../../components/Modal.js";
 import { IconButton } from "../../components/IconButton.js";
+import { Modal } from "../../components/Modal.js";
 import { formatBytes } from "../../format.js";
 import { SegmentedControl } from "../../components/SegmentedControl.js";
 import { getPreviewKind } from "./previewType.js";
@@ -20,7 +20,7 @@ function isDocumentView(kind) {
 function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigate, onClose, onDownload, onCopyUri }) {
 	const t = useStrings().fileExplorer;
 	const { common } = useStrings();
-	const [style, setStyle] = usePersistedState("fileExplorer.previewStyle", "quicklook");
+	const [style, setStyle] = usePersistedState("fileExplorer.previewStyle", "compact");
 	const [zoom, setZoom] = useState(100);
 	const { url, loading: urlLoading, error: urlError } = usePresignedUrl(node, getPresignedUrl, {
 		enabled: open,
@@ -67,8 +67,8 @@ function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigat
 						value: style,
 						onValueChange: setStyle,
 						options: [{
-							value: "quicklook",
-							label: t.preview.quickLook
+							value: "compact",
+							label: t.preview.compact
 						}, {
 							value: "overlay",
 							label: t.preview.fullWindow

package/dist/file-explorer/FileRow.js

@@ -80,7 +80,7 @@ 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: cx("group", checked ? "bg-(--theme-accent-subtle)/60" : 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) },
 		...rowContextMenuProps(openRowMenu, getItems),

package/dist/file-explorer/FileRowsWindow.js

@@ -1,7 +1,8 @@
 import { FileIcon, FolderIcon } from "../icons.js";
+import { isDev } from "../dev.js";
 import { canPreview } from "./FilePreview/previewType.js";
 import { getNodeIcon } from "./helpers.js";
-import { FileRow } from "./FileRow.js";
+import { FileRow, ROW_HEIGHT_TALL, isTwoLineRow } from "./FileRow.js";
 import { LoadMoreRow } from "./LoadMoreRow.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
@@ -73,13 +74,43 @@ function Spacer({ height }) {
 /** A nested overflow container stealing the scroll leaves the virtualizer at
 *  scrollTop 0 forever, rendering only the first window. */
 function useNestedScrollerWarning(scrollEl, count) {
-	useEffect(() => {}, [scrollEl, count]);
+	useEffect(() => {
+		if (!isDev() || !scrollEl || count <= 100) return;
+		if (scrollEl.scrollHeight <= scrollEl.clientHeight) console.warn("FileRowsWindow: scrollEl is not scrolling — a nested overflow container likely stole it, so only the first window will ever render.");
+	}, [scrollEl, count]);
+}
+/** Pitch per kind, from the first adjacent same-kind pair: a mixed pair says
+*  nothing about either one. */
+function measurePitches(rows) {
+	const pitches = /* @__PURE__ */ new Map();
+	rows.forEach((row, i) => {
+		const next = rows[i + 1];
+		if (next && next.kind === row.kind && !pitches.has(row.kind)) pitches.set(row.kind, next.top - row.top);
+	});
+	return pitches;
 }
 /** The constants must equal the row *pitch*, not the row's own height —
 *  under border-collapse the shared border sits between rows. A 1px error
 *  compounds to 10,000px across a 10k-row directory. */
 function useRowPitchAudit(scrollEl, nodes, items) {
-	useEffect(() => {}, [
+	useEffect(() => {
+		if (!isDev() || !scrollEl || items.length < 3) return;
+		const rows = [...scrollEl.querySelectorAll("tbody tr")].filter((row) => !row.hasAttribute("aria-hidden")).map((row, i) => {
+			const node = nodes[items[i]?.index ?? -1];
+			return node ? {
+				kind: isTwoLineRow(node) ? "tall" : "short",
+				top: row.getBoundingClientRect().top
+			} : null;
+		}).filter((row) => row !== null);
+		const expected = {
+			short: 45,
+			tall: ROW_HEIGHT_TALL
+		};
+		for (const [kind, measured] of measurePitches(rows)) if (measured > 0 && Math.abs(measured - expected[kind]) > .5) {
+			const name = `ROW_HEIGHT_${kind.toUpperCase()}`;
+			console.warn(`FileRowsWindow: ${name} is ${expected[kind]} but the rendered pitch is ${measured}. Set ${name} = ${measured} in FileRow.tsx, or the scrollbar will not reach the last row.`);
+		}
+	}, [
 		scrollEl,
 		nodes,
 		items

package/dist/file-explorer/FileTable.js

@@ -1,4 +1,5 @@
 import { cx } from "../cx.js";
+import { useStrings } from "../components/Provider.js";
 import { Table } from "../components/Table.js";
 import { listTableFixedProps } from "../list/ListTable.js";
 import { fileRowHeight } from "./FileRow.js";
@@ -16,6 +17,7 @@ function FileTable({ nodes, checkedItems, allSelected, someSelected, onSelectAll
 	const [activeIndex, setActiveIndex] = useState(-1);
 	const [theadHeight, setTheadHeight] = useState(0);
 	const rowIdPrefix = useId();
+	const t = useStrings().fileExplorer;
 	useLayoutEffect(() => {
 		const thead = scrollEl?.querySelector("thead");
 		if (thead instanceof HTMLElement) setTheadHeight(thead.offsetHeight);
@@ -137,7 +139,7 @@ function FileTable({ nodes, checkedItems, allSelected, someSelected, onSelectAll
 			wrapperClassName: "overflow-x-auto",
 			tableProps: {
 				role: "grid",
-				"aria-label": "Files",
+				"aria-label": t.chrome.files,
 				"aria-rowcount": loadMore ? -1 : nodes.length + 1,
 				"aria-multiselectable": true,
 				tabIndex: 0,