@parallelworks/ui 0.43.0 → 0.45.0

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

@@ -1,22 +1,16 @@
-import { FaLink } from "../../icons/fa/FaLink.js";
-import { FiDownload } from "../../icons/fi/FiDownload.js";
-import { FiFile } from "../../icons/fi/FiFile.js";
-import { IoMdClose } from "../../icons/io/IoMdClose.js";
-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 { 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 { formatFileSize } from "../lib/utils.js";
+import { IconButton } from "../../components/IconButton.js";
+import { formatBytes } from "../../format.js";
+import { SegmentedControl } from "../../components/SegmentedControl.js";
 import { getPreviewKind } from "./previewType.js";
 import { StreamedBadge } from "./StreamedBadge.js";
 import { usePresignedUrl } from "./usePresignedUrl.js";
 import { FilePreviewViewer } from "./Viewer.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { useLocalStorage } from "usehooks-ts";
 //#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. */
@@ -25,7 +19,8 @@ function isDocumentView(kind) {
 }
 function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigate, onClose, onDownload, onCopyUri }) {
 	const t = useStrings().fileExplorer;
-	const [style, setStyle] = useLocalStorage("fileExplorer.previewStyle", "quicklook");
+	const { common } = useStrings();
+	const [style, setStyle] = usePersistedState("fileExplorer.previewStyle", "quicklook");
 	const [zoom, setZoom] = useState(100);
 	const { url, loading: urlLoading, error: urlError } = usePresignedUrl(node, getPresignedUrl, {
 		enabled: open,
@@ -51,11 +46,11 @@ function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigat
 	const showZoom = kind === "image";
 	const floatingChrome = isOverlay && !isDocumentView(kind);
 	const topBar = /* @__PURE__ */ jsxs("div", {
-		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"),
+		className: cx("flex items-center justify-between gap-3 px-4 py-3", floatingChrome ? cx("absolute inset-x-0 top-0 z-10 bg-linear-to-b from-black/80 to-transparent text-white", overImage) : "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: clsx("h-4 w-4 shrink-0", !floatingChrome && "theme-muted-text") }),
+				/* @__PURE__ */ jsx(FileIcon, { className: cx("h-4 w-4 shrink-0", !floatingChrome && "theme-muted-text") }),
 				/* @__PURE__ */ jsx("span", {
 					className: "truncate font-semibold",
 					children: node.name
@@ -65,88 +60,89 @@ function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigat
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex shrink-0 items-center gap-1.5",
 			children: [
-				/* @__PURE__ */ jsxs("div", {
-					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,
-						onClick: () => setStyle("quicklook"),
-						children: t.preview.quickLook
-					}), /* @__PURE__ */ jsx(SegButton, {
-						active: isOverlay,
-						overlayChrome: floatingChrome,
-						onClick: () => setStyle("overlay"),
-						children: t.preview.fullWindow
-					})]
+				/* @__PURE__ */ jsx("div", {
+					className: "mr-1",
+					children: /* @__PURE__ */ jsx(SegmentedControl, {
+						label: t.preview.previewLayout,
+						value: style,
+						onValueChange: setStyle,
+						options: [{
+							value: "quicklook",
+							label: t.preview.quickLook
+						}, {
+							value: "overlay",
+							label: t.preview.fullWindow
+						}]
+					})
 				}),
-				/* @__PURE__ */ jsx(ChromeButton, {
-					overlay: floatingChrome,
+				/* @__PURE__ */ jsx(IconButton, {
+					size: "md",
 					label: t.preview.copyUri,
-					onClick: () => onCopyUri(node),
-					children: /* @__PURE__ */ jsx(FaLink, { className: "h-4 w-4" })
+					icon: /* @__PURE__ */ jsx(LinkIcon, {}),
+					onClick: () => onCopyUri(node)
 				}),
-				/* @__PURE__ */ jsx(ChromeButton, {
-					overlay: floatingChrome,
-					label: t.preview.download,
-					onClick: () => onDownload(node),
-					children: /* @__PURE__ */ jsx(FiDownload, { className: "h-4 w-4" })
+				/* @__PURE__ */ jsx(IconButton, {
+					size: "md",
+					label: common.download,
+					icon: /* @__PURE__ */ jsx(DownloadIcon, {}),
+					onClick: () => onDownload(node)
 				}),
-				/* @__PURE__ */ jsx(ChromeButton, {
-					overlay: floatingChrome,
-					label: t.preview.close,
-					onClick: onClose,
-					children: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" })
+				/* @__PURE__ */ jsx(IconButton, {
+					size: "md",
+					label: common.close,
+					icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+					onClick: onClose
 				})
 			]
 		})]
 	});
 	const footer = /* @__PURE__ */ jsxs("div", {
-		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"),
+		className: cx("flex items-center justify-between gap-4 px-4 py-2.5", floatingChrome ? cx("absolute inset-x-0 bottom-0 z-10 bg-linear-to-t from-black/80 to-transparent text-white", overImage) : "shrink-0 border-t theme-border"),
 		children: [/* @__PURE__ */ jsxs("span", {
-			className: clsx("text-xs", !floatingChrome && "theme-muted-text"),
-			children: [typeof node.size === "number" && formatFileSize(node.size), node.contentType && ` · ${node.contentType}`]
+			className: cx("text-xs", !floatingChrome && "theme-muted-text"),
+			children: [typeof node.size === "number" && formatBytes(node.size), node.contentType && ` · ${node.contentType}`]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-3",
 			children: [showZoom && /* @__PURE__ */ jsxs("div", {
-				className: clsx("flex items-center gap-1 rounded-lg p-0.5", floatingChrome ? "bg-white/10" : "theme-muted-panel"),
+				className: cx("flex items-center gap-1 rounded-lg p-0.5", floatingChrome ? "bg-white/10" : "theme-muted-panel"),
 				children: [
-					/* @__PURE__ */ jsx(MiniButton, {
-						overlay: floatingChrome,
-						label: t.preview.zoomOut,
+					/* @__PURE__ */ jsx(IconButton, {
+						size: "xs",
+						label: common.zoomOut,
 						onClick: () => setZoom((z) => Math.max(25, z - 25)),
-						children: /* @__PURE__ */ jsx(LuZoomOut, { className: "h-3.5 w-3.5" })
+						icon: /* @__PURE__ */ jsx(ZoomOutIcon, {})
 					}),
 					/* @__PURE__ */ jsxs("span", {
 						className: "min-w-11 text-center text-xs tabular-nums",
 						children: [zoom, "%"]
 					}),
-					/* @__PURE__ */ jsx(MiniButton, {
-						overlay: floatingChrome,
-						label: t.preview.zoomIn,
+					/* @__PURE__ */ jsx(IconButton, {
+						size: "xs",
+						label: common.zoomIn,
 						onClick: () => setZoom((z) => Math.min(400, z + 25)),
-						children: /* @__PURE__ */ jsx(LuZoomIn, { className: "h-3.5 w-3.5" })
+						icon: /* @__PURE__ */ jsx(ZoomInIcon, {})
 					})
 				]
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-1",
 				children: [
-					/* @__PURE__ */ jsx(MiniButton, {
-						overlay: floatingChrome,
+					/* @__PURE__ */ jsx(IconButton, {
+						size: "xs",
 						label: t.preview.previousFile,
 						disabled: !hasPrev,
 						onClick: goPrev,
-						children: /* @__PURE__ */ jsx(LuChevronLeft, { className: "h-4 w-4" })
+						icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "min-w-14 text-center text-xs tabular-nums",
 						children: index >= 0 ? `${index + 1} / ${siblings.length}` : ""
 					}),
-					/* @__PURE__ */ jsx(MiniButton, {
-						overlay: floatingChrome,
+					/* @__PURE__ */ jsx(IconButton, {
+						size: "xs",
 						label: t.preview.nextFile,
 						disabled: !hasNext,
 						onClick: goNext,
-						children: /* @__PURE__ */ jsx(LuChevronRight, { className: "h-4 w-4" })
+						icon: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 					})
 				]
 			})]
@@ -172,7 +168,7 @@ function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigat
 		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)"),
+		className: cx("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();
@@ -195,44 +191,16 @@ function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigat
 		]
 	});
 }
-function SegButton({ active, overlayChrome, onClick, children }) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick,
-		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
-	});
-}
-function ChromeButton({ overlay, label, onClick, children }) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-label": label,
-		title: label,
-		onClick,
-		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
-	});
-}
-function MiniButton({ overlay, label, onClick, disabled, children }) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-label": label,
-		title: label,
-		onClick,
-		disabled,
-		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
-	});
-}
+var overImage = "[--theme-app:#fff] [--theme-muted-text-color:rgb(255_255_255/0.8)] [--theme-muted-panel-bg:rgb(255_255_255/0.15)]";
 function EdgeButton({ side, label, disabled, onClick }) {
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"aria-label": label,
 		disabled,
 		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"),
+		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"),
 		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" })
+		children: side === "left" ? /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-6 w-6" })
 	});
 }
 //#endregion

package/dist/file-explorer/FileRow.js

@@ -1,11 +1,12 @@
-import { LuEye } from "../icons/lu/LuEye.js";
+import { cx } from "../cx.js";
+import { PreviewIcon } from "../icons.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useStrings } from "../components/Provider.js";
+import { formatBytes } from "../format.js";
+import { RelativeTime } from "../components/relativeTime.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 { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 var ROW_HEIGHT_TALL = 52.25;
@@ -27,7 +28,7 @@ function UserRow({ node, icon, storageCount, getItems, openMenu, onOpen }) {
 		onOpen(node);
 	};
 	return /* @__PURE__ */ jsxs("tr", {
-		className: clsx("group cursor-pointer", menuActive ? "theme-hover" : "hover:theme-hover"),
+		className: cx("group cursor-pointer", menuActive ? "theme-hover" : "hover:theme-hover"),
 		onClick: handleRowClick,
 		...rowContextMenuProps(openRowMenu, getItems),
 		children: [
@@ -79,7 +80,7 @@ function FileRow({ node, icon, rowId, rowIndex, active, checked, canPreview, get
 		id: rowId,
 		"aria-rowindex": rowIndex,
 		"aria-selected": checked,
-		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"),
+		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"),
 		onClick: handleRowClick,
 		style: { height: fileRowHeight(node) },
 		...rowContextMenuProps(openRowMenu, getItems),
@@ -113,7 +114,7 @@ function FileRow({ node, icon, rowId, rowIndex, active, checked, canPreview, get
 			}),
 			/* @__PURE__ */ jsx(Table.Item, {
 				className: "truncate py-2.5 text-sm tabular-nums text-(--theme-muted-text-color)",
-				children: typeof node.size === "number" ? formatFileSize(node.size) : "—"
+				children: typeof node.size === "number" ? formatBytes(node.size) : "—"
 			}),
 			/* @__PURE__ */ jsx(Table.Item, {
 				className: "truncate py-2.5 text-xs uppercase tracking-wider text-(--theme-muted-text-color)",
@@ -121,13 +122,7 @@ 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: !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()
-					})
-				}) : "—"
+				children: !isDir && modifiedDt?.isValid ? /* @__PURE__ */ jsx(RelativeTime, { value: modifiedDt }) : "—"
 			}),
 			/* @__PURE__ */ jsx(Table.Item, {
 				className: "relative py-2.5",
@@ -143,8 +138,8 @@ function FileRow({ node, icon, rowId, rowIndex, active, checked, canPreview, get
 								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, {})
+							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(PreviewIcon, {})
 						})
 					}), /* @__PURE__ */ jsx(MoreButton, {
 						open: menuActive,

package/dist/file-explorer/FileRowsWindow.js

@@ -1,6 +1,4 @@
-import { FaRegFolder } from "../icons/fa/FaRegFolder.js";
-import { FiFile } from "../icons/fi/FiFile.js";
-import { useSlots, useStrings } from "../components/Provider.js";
+import { FileIcon, FolderIcon } from "../icons.js";
 import { canPreview } from "./FilePreview/previewType.js";
 import { getNodeIcon } from "./helpers.js";
 import { FileRow } from "./FileRow.js";
@@ -25,8 +23,6 @@ function spacerHeights(items, totalSize, scrollMargin) {
 /** Must stay a single child of `<Table>`: Table re-keys children by traversal
 *  index, so a count that varied with scroll position would remount every row. */
 function FileRowsWindow({ items, padTop, padBottom, nodes, checkedItems, activeIndex, rowIdPrefix, scrollEl, loadMore, getItems, openMenu, onOpen, onToggleCheck, onPreview }) {
-	const { storageIconUrl } = useSlots();
-	const storageIconAlt = useStrings().fileExplorer.chrome.storageIconAlt;
 	useNestedScrollerWarning(scrollEl, nodes.length);
 	useRowPitchAudit(scrollEl, nodes, items);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -42,7 +38,7 @@ function FileRowsWindow({ items, padTop, padBottom, nodes, checkedItems, activeI
 				root: scrollEl,
 				onLoadMore: loadMore.onLoadMore
 			}, "load-more") : null;
-			const icon = getNodeIcon(node, storageIconUrl, storageIconAlt) ?? (node.type === "directory" ? /* @__PURE__ */ jsx(FaRegFolder, { className: "h-4 w-4 text-sky-500/80" }) : /* @__PURE__ */ jsx(FiFile, { className: "h-4 w-4 theme-muted-text" }));
+			const icon = getNodeIcon(node) ?? (node.type === "directory" ? /* @__PURE__ */ jsx(FolderIcon, { className: "h-4 w-4 text-sky-500/80" }) : /* @__PURE__ */ jsx(FileIcon, { className: "h-4 w-4 theme-muted-text" }));
 			return /* @__PURE__ */ jsx(FileRow, {
 				rowId: `${rowIdPrefix}-${item.index}`,
 				rowIndex: item.index + 2,

package/dist/file-explorer/FileTable.js

@@ -1,9 +1,9 @@
+import { cx } from "../cx.js";
 import { Table } from "../components/Table.js";
 import { listTableFixedProps } from "../list/ListTable.js";
 import { fileRowHeight } from "./FileRow.js";
 import { FileRowsWindow, spacerHeights } from "./FileRowsWindow.js";
 import { FileTableHeaders } from "./FileTableHeaders.js";
-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";
@@ -133,7 +133,7 @@ function FileTable({ nodes, checkedItems, allSelected, someSelected, onSelectAll
 		className: "h-full overflow-auto",
 		children: /* @__PURE__ */ jsxs(Table, {
 			...listTableFixedProps,
-			className: clsx(listTableFixedProps.className, "group/grid focus:outline-none"),
+			className: cx(listTableFixedProps.className, "group/grid focus:outline-none"),
 			wrapperClassName: "overflow-x-auto",
 			tableProps: {
 				role: "grid",

package/dist/file-explorer/FileTableHeaders.js

@@ -1,4 +1,5 @@
 import { useStrings } from "../components/Provider.js";
+import { Checkbox } from "../components/Checkbox.js";
 import { Table } from "../components/Table.js";
 import { ListActionsHeader } from "../list/ListTable.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -14,32 +15,28 @@ function FileTableHeaders({ allSelected, someSelected, onSelectAll }) {
 			style: { minWidth: 200 },
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2.5",
-				children: [/* @__PURE__ */ jsx("input", {
-					type: "checkbox",
+				children: [/* @__PURE__ */ jsx(Checkbox, {
 					"aria-label": t.chrome.selectAll,
-					className: "h-4 w-4 cursor-pointer rounded border-(--theme-border) text-blue-500 focus:ring-blue-500 focus:ring-offset-0",
-					ref: (el) => {
-						if (el) el.indeterminate = someSelected && !allSelected;
-					},
-					onChange: onSelectAll,
-					checked: allSelected
+					checked: allSelected,
+					indeterminate: someSelected && !allSelected,
+					onCheckedChange: () => onSelectAll()
 				}), /* @__PURE__ */ jsx("span", { children: t.chrome.name })]
 			})
 		}),
 		/* @__PURE__ */ jsx(Table.Header, {
 			caps: false,
 			className: "w-[14%] py-2",
-			children: "Size"
+			children: t.chrome.size
 		}),
 		/* @__PURE__ */ jsx(Table.Header, {
 			caps: false,
 			className: "w-[14%] py-2",
-			children: "Type"
+			children: t.chrome.type
 		}),
 		/* @__PURE__ */ jsx(Table.Header, {
 			caps: false,
 			className: "w-[22%] py-2",
-			children: "Last Modified"
+			children: t.chrome.lastModified
 		}),
 		/* @__PURE__ */ jsx(ListActionsHeader, { actionCount: 1 })
 	] });

package/dist/file-explorer/LoadMoreRow.js

@@ -1,10 +1,11 @@
+import { Loader } from "../components/Loader.js";
 import { useStrings } from "../components/Provider.js";
-import Loader from "../components/Loader.js";
 import { useNearEnd } from "./useNearEnd.js";
 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 { common } = useStrings();
 	const ref = useRef(null);
 	useNearEnd(ref, {
 		active: auto && !loading && !error,
@@ -25,19 +26,17 @@ function LoadMoreRow({ rowId, rowIndex, loading, error, auto, root, onLoadMore }
 					type: "button",
 					className: "cursor-pointer underline theme-link",
 					onClick: onLoadMore,
-					children: t.retry
+					children: common.retry
 				})]
-			}) : loading ? /* @__PURE__ */ jsxs("span", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx(Loader, {
-					size: 16,
-					full: false
-				}), /* @__PURE__ */ jsx("span", { children: t.loadingMore })]
+			}) : loading ? /* @__PURE__ */ jsx(Loader, {
+				size: 16,
+				inline: true,
+				label: t.loadingMore
 			}) : /* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: "cursor-pointer underline theme-link",
 				onClick: onLoadMore,
-				children: t.loadMore
+				children: common.loadMore
 			})
 		})
 	});

package/dist/file-explorer/TreeView.js

@@ -1,13 +1,12 @@
-import { FaAngleRight } from "../icons/fa/FaAngleRight.js";
-import { FaRegFolder } from "../icons/fa/FaRegFolder.js";
-import { FaRegFolderOpen } from "../icons/fa6/FaRegFolderOpen.js";
+import { cx } from "../cx.js";
+import { ChevronRightIcon, FolderIcon, FolderOpenIcon } from "../icons.js";
 import { positionKeys } from "../components/keys.js";
 import { useStrings } from "../components/Provider.js";
+import { Skeleton } from "../components/Skeleton.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 { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -193,16 +192,17 @@ function RowIcons({ isDirectory, isExpanded, customIcon }) {
 		className: "shrink-0",
 		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, { 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] });
+	const folder = isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, { className: "h-4 w-4 mr-1 text-sky-500" }) : /* @__PURE__ */ jsx(FolderIcon, { className: "h-4 w-4 mr-1 text-sky-500/80" });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChevronRightIcon, { className: cx("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. */
 function TreeMoreRow({ depth, hiddenFiles, partial, loading, failed, onReveal }) {
 	const t = useStrings().fileExplorer;
+	const { common } = useStrings();
 	const label = () => {
-		if (failed) return t.retry;
-		if (hiddenFiles === 0) return t.loadMore;
+		if (failed) return common.retry;
+		if (hiddenFiles === 0) return common.loadMore;
 		return partial ? t.treeMoreCountPartial(hiddenFiles) : t.treeMoreCount(hiddenFiles);
 	};
 	return /* @__PURE__ */ jsxs("div", {
@@ -212,7 +212,7 @@ 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: clsx("cursor-pointer underline", failed ? "text-red-500" : "theme-link"),
+				className: cx("cursor-pointer underline", failed ? "text-red-500" : "theme-link"),
 				onClick: onReveal,
 				children: label()
 			})
@@ -227,11 +227,11 @@ function TreeSkeletonRow({ depth }) {
 		children: [/* @__PURE__ */ jsx(IndentGuides, { depth }), /* @__PURE__ */ jsx("div", {
 			className: "flex h-full flex-col justify-center gap-1.5 py-1 pr-2",
 			style: { paddingLeft: depth * INDENT_PER_LEVEL + ROW_PAD_FILE },
-			children: [
-				0,
-				1,
-				2
-			].map((i) => /* @__PURE__ */ jsx("div", { className: "h-3 shrink-0 animate-pulse rounded bg-(--theme-muted-panel-bg)" }, i))
+			children: /* @__PURE__ */ jsx(Skeleton, {
+				count: 3,
+				height: 12,
+				className: "shrink-0"
+			})
 		})]
 	});
 }
@@ -334,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: clsx("relative h-full rounded-md transition-[box-shadow,background-color] duration-150", dragActive && "ring-1 ring-(--theme-link)/60"),
+		className: cx("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: 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"),
+			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-accent)/15 font-medium" : dragActive ? "theme-hover" : "hover:theme-hover"),
 			style: indentStyle(depth, isDirectory),
 			onClick: handleSelect,
 			onKeyDown: handleKeyDown,

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

@@ -2,10 +2,7 @@ import { type JSX } from 'react';
 import type { TreeNode, TStorage, UploadNode } from './lib/types.js';
 declare const SIDEBAR_WIDTH_STORAGE_KEY = "fileExplorerSidebarWidth";
 declare const SIDEBAR_WIDTH_DEFAULT = 300;
-type StorageIconUrlResolver = (args: {
-    type: string;
-}) => string | undefined;
-declare function getNodeIcon(node: TreeNode, storageIconUrl?: StorageIconUrlResolver, storageIconAlt?: string): JSX.Element | null;
+declare function getNodeIcon(node: TreeNode): JSX.Element | null;
 declare function renderUploadNodes(uploadNodes: UploadNode[]): JSX.Element[];
 declare function NoFileSelectedPreview(): JSX.Element;
 /** Shown instead of a skeleton that has nothing left to wait for. */