@parallelworks/ui 0.44.0 → 0.45.0

package/dist/file-explorer/FileExplorerContext.js

@@ -1,5 +1,6 @@
 import { keyedByContent } from "../components/keys.js";
-import { useNotify, useStrings } from "../components/Provider.js";
+import { toast } from "../components/Toast.js";
+import { useStrings } from "../components/Provider.js";
 import { mapWithConcurrency } from "./lib/batch.js";
 import { calculateUploadNodesTotalSize, getUploadSessionETA, removeLeadingSlash } from "./lib/utils.js";
 import { UploadSessionToast } from "./toasts.js";
@@ -17,7 +18,6 @@ function isPermissionDenied(reason) {
 	return permissionMessagePattern.test(reason.message);
 }
 function FileExplorerProvider({ children }) {
-	const notify = useNotify();
 	const t = useStrings().fileExplorer;
 	const uploadSessionMapRef = useRef(/* @__PURE__ */ new Map());
 	const uploadQueueRef = useRef([]);
@@ -84,13 +84,13 @@ function FileExplorerProvider({ children }) {
 		};
 		uploadSessionMapRef.current.set(sessionId, newSession);
 		uploadQueueRef.current.push(sessionId);
-		notify.loading(/* @__PURE__ */ jsx(UploadSessionToast, {
+		toast.loading(/* @__PURE__ */ jsx(UploadSessionToast, {
 			session: newSession,
 			queueLength: uploadQueueRef.current.length
 		}), {
-			toastId: sessionId,
+			id: sessionId,
 			icon: false,
-			closeButton: false
+			dismissible: false
 		});
 		processNextUploadSessionInQueue();
 		return sessionId;
@@ -126,20 +126,16 @@ function FileExplorerProvider({ children }) {
 	const startUploadSession = async (sessionId) => {
 		const session = getUploadSessionById(sessionId);
 		if (!session) {
-			notify.update(sessionId, {
-				render: t.messages.uploadInitFailed,
-				type: "error",
-				isLoading: false,
-				closeButton: null
+			toast.update(sessionId, {
+				message: t.messages.uploadInitFailed,
+				tone: "error"
 			});
 			return;
 		}
 		if (session.status !== "queued") {
-			notify.update(sessionId, {
-				render: t.upload.sessionNotQueued(sessionId, session.status),
-				type: "error",
-				isLoading: false,
-				closeButton: null
+			toast.update(sessionId, {
+				message: t.upload.sessionNotQueued(sessionId, session.status),
+				tone: "error"
 			});
 			return;
 		}
@@ -152,12 +148,11 @@ function FileExplorerProvider({ children }) {
 			onCancelFile: (path) => cancelFileInSession(sessionId, path)
 		});
 		try {
-			notify.update(sessionId, {
-				render: progressToast(),
+			toast.update(sessionId, {
+				message: progressToast(),
 				icon: false,
-				isLoading: false,
-				closeButton: false,
-				autoClose: false
+				dismissible: false,
+				timeout: false
 			});
 			const results = await mapWithConcurrency(session.uploadNodes, UPLOAD_CONCURRENCY, async (node) => {
 				const fileProgress = session.progress?.allFiles?.get(node.relativePath);
@@ -198,12 +193,11 @@ function FileExplorerProvider({ children }) {
 					session.progress.lastProgressTime = lastProgressTime;
 					session.progress.lastProgressBytes = lastProgressBytes;
 					if (shouldUpdateETA) session.progress.estimatedSecondsLeft = estimatedSecondsLeft;
-					notify.update(sessionId, {
-						render: progressToast(),
+					toast.update(sessionId, {
+						message: progressToast(),
 						icon: false,
-						isLoading: false,
-						closeButton: false,
-						autoClose: false
+						dismissible: false,
+						timeout: false
 					});
 				};
 				try {
@@ -213,8 +207,8 @@ function FileExplorerProvider({ children }) {
 					const errorMessage = error instanceof Error ? error.message : String(error ?? "");
 					const isCancelled = errorMessage.toLowerCase().includes("abort") || errorMessage.toLowerCase().includes("cancel");
 					updateFileProgressInUploadSession(session, node.relativePath, { status: isCancelled ? "cancelled" : "failed" });
-					notify.update(sessionId, {
-						render: progressToast({
+					toast.update(sessionId, {
+						message: progressToast({
 							...session,
 							progress: {
 								completedFiles: 0,
@@ -224,9 +218,8 @@ function FileExplorerProvider({ children }) {
 							}
 						}),
 						icon: false,
-						isLoading: false,
-						closeButton: session.status === "failed" || session.status === "cancelled",
-						autoClose: false
+						dismissible: session.status === "failed" || session.status === "cancelled",
+						timeout: false
 					});
 					throw error;
 				}
@@ -234,7 +227,7 @@ function FileExplorerProvider({ children }) {
 			try {
 				await session.refreshTargetNode(session.targetNode);
 			} catch (err) {
-				notify.error(t.upload.refreshFailed(session.storageName, err instanceof Error ? err.message : t.upload.unknownError));
+				toast.error(t.upload.refreshFailed(session.storageName, err instanceof Error ? err.message : t.upload.unknownError));
 			}
 			const failedResults = results.filter((r) => r.status === "rejected");
 			const actualFailedResults = failedResults.filter((result) => {
@@ -247,8 +240,8 @@ function FileExplorerProvider({ children }) {
 				return session.uploadNodes[originalIndex]?.name || `File #${originalIndex + 1}`;
 			});
 			const successfulCount = results.length - failedResults.length;
-			if (actualFailedResults.length > 0) notify.update(sessionId, {
-				render: /* @__PURE__ */ jsxs("div", {
+			if (actualFailedResults.length > 0) toast.update(sessionId, {
+				message: /* @__PURE__ */ jsxs("div", {
 					className: "text-md",
 					children: [
 						/* @__PURE__ */ jsx("div", {
@@ -269,37 +262,22 @@ function FileExplorerProvider({ children }) {
 						})
 					]
 				}),
-				type: "error",
-				icon: null,
-				isLoading: false,
-				closeButton: null
+				tone: "error"
 			});
-			else if (abortedCount > 0 && successfulCount > 0) notify.update(sessionId, {
-				render: /* @__PURE__ */ jsxs("div", {
+			else if (abortedCount > 0 && successfulCount > 0) toast.update(sessionId, {
+				message: /* @__PURE__ */ jsxs("div", {
 					className: "w-full flex flex-col gap-1",
 					children: [/* @__PURE__ */ jsx("div", { children: t.upload.someUploaded(successfulCount) }), /* @__PURE__ */ jsx("div", { children: t.upload.someCancelled(abortedCount) })]
 				}),
-				type: "success",
-				icon: null,
-				isLoading: false,
-				closeButton: null,
-				autoClose: null
+				tone: "success"
 			});
-			else if (abortedCount > 0 && successfulCount === 0) notify.update(sessionId, {
-				render: t.upload.allCancelled(abortedCount),
-				type: "info",
-				icon: null,
-				isLoading: false,
-				closeButton: null,
-				autoClose: null
+			else if (abortedCount > 0 && successfulCount === 0) toast.update(sessionId, {
+				message: t.upload.allCancelled(abortedCount),
+				tone: "info"
 			});
-			else notify.update(sessionId, {
-				render: t.upload.allUploaded,
-				type: "success",
-				icon: null,
-				isLoading: false,
-				closeButton: null,
-				autoClose: null
+			else toast.update(sessionId, {
+				message: t.upload.allUploaded,
+				tone: "success"
 			});
 			session.status = actualFailedResults.length > 0 ? "failed" : "completed";
 			const queueIndex = getUploadQueueIndex(sessionId);

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

@@ -1,5 +1,5 @@
 import { useCssIsDark } from "../../components/useCssIsDark.js";
-import { defineEditorThemes, getThemeName } from "../../editor/themes.js";
+import { defineEditorThemes, followThemeTokens, getThemeName } from "../../editor/themes.js";
 import { setupMonacoWorkers } from "../../editor/workers.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
@@ -43,6 +43,7 @@ function CodePreviewEditor({ value, language }) {
 			defineEditorThemes(monaco.editor);
 			monaco.editor.setTheme(getThemeName(isDark));
 		}
+		return followThemeTokens(monaco.editor, () => getThemeName(isDark));
 	}, [isDark]);
 	return /* @__PURE__ */ jsx("div", {
 		className: "h-full w-full",

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

@@ -1,6 +1,7 @@
-import { FaExpand } from "../../icons/fa/FaExpand.js";
+import { ExpandIcon } from "../../icons.js";
 import { useStrings } from "../../components/Provider.js";
-import { formatFileSize } from "../lib/utils.js";
+import { Button } from "../../components/Button.js";
+import { formatBytes } from "../../format.js";
 import { getPreviewKind } from "./previewType.js";
 import { StreamedBadge } from "./StreamedBadge.js";
 import { usePresignedUrl } from "./usePresignedUrl.js";
@@ -31,12 +32,13 @@ function FilePreviewInline({ node, storage, getPresignedUrl, onOpenFull, onDownl
 			className: "flex shrink-0 items-center justify-between gap-3 border-t theme-border px-4 py-2.5",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 text-xs theme-muted-text",
-				children: [/* @__PURE__ */ jsxs("span", { children: [typeof node.size === "number" && formatFileSize(node.size), node.contentType && ` · ${node.contentType}`] }), url && /* @__PURE__ */ jsx(StreamedBadge, {})]
-			}), /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				className: "btn btn-neutral cursor-pointer",
+				children: [/* @__PURE__ */ jsxs("span", { children: [typeof node.size === "number" && formatBytes(node.size), node.contentType && ` · ${node.contentType}`] }), url && /* @__PURE__ */ jsx(StreamedBadge, {})]
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "sm",
+				icon: /* @__PURE__ */ jsx(ExpandIcon, {}),
 				onClick: () => onOpenFull(node),
-				children: [/* @__PURE__ */ jsx(FaExpand, { className: "mr-2 h-4 w-4" }), t.preview.openFullPreview]
+				children: t.preview.openFullPreview
 			})]
 		})]
 	});

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

@@ -1,4 +1,4 @@
-import { FaLock } from "../../icons/fa/FaLock.js";
+import { LockIcon } from "../../icons.js";
 import { useStrings } from "../../components/Provider.js";
 import { InfoTip } from "../../components/InfoTip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -8,7 +8,7 @@ function StreamedBadge() {
 	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]
+		children: [/* @__PURE__ */ jsx(LockIcon, { className: "h-2.5 w-2.5" }), t.preview.streamed]
 	});
 }
 //#endregion

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

@@ -1,20 +1,18 @@
-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 { 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 { useStrings } from "../../components/Provider.js";
-import Loader from "../../components/Loader.js";
+import { Button } from "../../components/Button.js";
 import Markdown from "../../components/Markdown.js";
-import { formatFileSize, getFileExtension } from "../lib/utils.js";
+import { formatBytes } from "../../format.js";
+import { getFileExtension } from "../lib/utils.js";
 import { getMonacoLanguage, previewLimitsFor } from "./previewType.js";
 import { CorsIssuePreview } from "../helpers.js";
 import { joinSource, parseDelimited, parseNotebook, stripAnsi } from "./parse.js";
 import { countLines } from "./readCappedBytes.js";
 import { useObjectBlobUrl } from "./useObjectBlobUrl.js";
 import { useObjectText } from "./useObjectText.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useCallback, useMemo, useState } from "react";
 //#region src/file-explorer/FilePreview/Viewer.tsx
@@ -40,19 +38,19 @@ function FilePreviewViewer({ node, kind, url, urlLoading, urlError, zoom = 100,
 		return { corsError: false };
 	}, [url]);
 	if (urlError) return /* @__PURE__ */ jsx(NotPreviewable, {
-		icon: /* @__PURE__ */ jsx(FiFile, { className: "h-9 w-9 theme-muted-text" }),
+		icon: /* @__PURE__ */ jsx(FileIcon, { className: "h-9 w-9 theme-muted-text" }),
 		title: t.preview.errorTitle,
 		message: urlError,
 		onDownload
 	});
 	if (kind === "archive") return /* @__PURE__ */ jsx(NotPreviewable, {
-		icon: /* @__PURE__ */ jsx(BsFileEarmarkZip, { className: "h-9 w-9 text-(--theme-link)" }),
+		icon: /* @__PURE__ */ jsx(ZipIcon, { className: "h-9 w-9 text-(--theme-link)" }),
 		title: t.preview.archiveTitle,
 		message: t.preview.archiveMessage,
 		onDownload
 	});
 	if (kind === "unsupported") return /* @__PURE__ */ jsx(NotPreviewable, {
-		icon: /* @__PURE__ */ jsx(FiFile, { className: "h-9 w-9 theme-muted-text" }),
+		icon: /* @__PURE__ */ jsx(FileIcon, { className: "h-9 w-9 theme-muted-text" }),
 		title: t.preview.unsupportedTitle,
 		message: t.preview.unsupportedMessage,
 		onDownload
@@ -61,7 +59,7 @@ function FilePreviewViewer({ node, kind, url, urlLoading, urlError, zoom = 100,
 		className: "flex h-full w-full items-center justify-center",
 		children: /* @__PURE__ */ jsx(Loader, {
 			size: 40,
-			text: t.preview.loading
+			label: t.preview.loading
 		})
 	});
 	switch (kind) {
@@ -126,7 +124,7 @@ function ImageView({ node, url, zoom, onDownload, storage }) {
 		children: /* @__PURE__ */ jsx("img", {
 			src: url,
 			alt: node.name,
-			className: clsx("block rounded-md shadow-lg", fit && "object-contain"),
+			className: cx("block rounded-md shadow-lg", fit && "object-contain"),
 			style: fit ? {
 				maxWidth: "100%",
 				maxHeight: "100%"
@@ -161,8 +159,8 @@ function AudioView({ node, url, onDownload }) {
 			className: "flex w-full max-w-xl flex-col items-center gap-6",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "flex h-28 w-28 items-center justify-center rounded-2xl bg-linear-to-br from-(--theme-element) to-(--theme-link) shadow-lg",
-					children: /* @__PURE__ */ jsx(BsMusicNoteBeamed, { className: "h-12 w-12 text-white" })
+					className: "flex h-28 w-28 items-center justify-center rounded-2xl bg-linear-to-br from-(--theme-accent) to-(--theme-link) shadow-lg",
+					children: /* @__PURE__ */ jsx(MusicIcon, { className: "h-12 w-12 text-white" })
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "text-center",
@@ -171,7 +169,7 @@ function AudioView({ node, url, onDownload }) {
 						children: node.name
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "mt-0.5 text-xs theme-muted-text",
-						children: [node.contentType, typeof node.size === "number" && ` · ${formatFileSize(node.size)}`]
+						children: [node.contentType, typeof node.size === "number" && ` · ${formatBytes(node.size)}`]
 					})]
 				}),
 				/* @__PURE__ */ jsx("audio", {
@@ -188,7 +186,7 @@ function AudioView({ node, url, onDownload }) {
 function PreviewError({ onDownload }) {
 	const t = useStrings().fileExplorer;
 	return /* @__PURE__ */ jsx(NotPreviewable, {
-		icon: /* @__PURE__ */ jsx(FiFile, { className: "h-9 w-9 theme-muted-text" }),
+		icon: /* @__PURE__ */ jsx(FileIcon, { className: "h-9 w-9 theme-muted-text" }),
 		title: t.preview.errorTitle,
 		message: t.preview.previewError,
 		onDownload
@@ -249,19 +247,19 @@ 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: clsx("cursor-pointer px-2 py-0.5", tail ? "theme-muted-text theme-hover" : "theme-element"),
+						className: cx("cursor-pointer px-2 py-0.5", tail ? "theme-muted-text theme-hover" : "theme-accent"),
 						onClick: () => setTail(false),
 						children: t.preview.head
 					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
-						className: clsx("cursor-pointer px-2 py-0.5", tail ? "theme-element" : "theme-muted-text theme-hover"),
+						className: cx("cursor-pointer px-2 py-0.5", tail ? "theme-accent" : "theme-muted-text theme-hover"),
 						onClick: () => setTail(true),
 						children: t.preview.tail
 					})]
 				}),
 				/* @__PURE__ */ jsxs("span", {
 					className: "inline-flex shrink-0 items-center gap-1 rounded-full border theme-border px-2 py-0.5 text-[11px] theme-muted-text",
-					children: [/* @__PURE__ */ jsx(FaLock, { className: "h-2.5 w-2.5" }), t.readOnly]
+					children: [/* @__PURE__ */ jsx(LockIcon, { className: "h-2.5 w-2.5" }), t.readOnly]
 				})
 			]
 		}), /* @__PURE__ */ jsx("div", {
@@ -348,7 +346,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: clsx(r % 2 === 1 && "bg-(--theme-panel-bg)/50"),
+					className: cx(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
@@ -491,11 +489,11 @@ function NotPreviewable({ icon, title, message, onDownload }) {
 					className: "mt-1 text-sm theme-muted-text",
 					children: message
 				})] }),
-				onDownload && /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					className: "btn btn-info cursor-pointer",
+				onDownload && /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					icon: /* @__PURE__ */ jsx(DownloadIcon, {}),
 					onClick: onDownload,
-					children: [/* @__PURE__ */ jsx(FiDownload, { className: "mr-2 h-4 w-4" }), t.preview.downloadInstead]
+					children: t.preview.downloadInstead
 				})
 			]
 		})
@@ -509,12 +507,12 @@ function TooLargeInline({ size, onDownload }) {
 			className: "flex max-w-md flex-col items-center gap-3 text-center",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "text-sm theme-muted-text",
-				children: typeof size === "number" ? t.preview.tooLargeSize(formatFileSize(size)) : t.preview.tooLarge
-			}), onDownload && /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				className: "btn btn-info cursor-pointer",
+				children: typeof size === "number" ? t.preview.tooLargeSize(formatBytes(size)) : t.preview.tooLarge
+			}), onDownload && /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				icon: /* @__PURE__ */ jsx(DownloadIcon, {}),
 				onClick: onDownload,
-				children: [/* @__PURE__ */ jsx(FiDownload, { className: "mr-2 h-4 w-4" }), t.preview.downloadInstead]
+				children: t.preview.downloadInstead
 			})]
 		})
 	});
@@ -528,11 +526,11 @@ function InlineError({ message, onDownload }) {
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "text-sm theme-muted-text",
 				children: message
-			}), onDownload && /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				className: "btn btn-neutral cursor-pointer",
+			}), onDownload && /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				icon: /* @__PURE__ */ jsx(DownloadIcon, {}),
 				onClick: onDownload,
-				children: [/* @__PURE__ */ jsx(FiDownload, { className: "mr-2 h-4 w-4" }), t.preview.downloadInstead]
+				children: t.preview.downloadInstead
 			})]
 		})
 	});