@parallelworks/ui 0.19.0 → 0.19.1

package/dist/file-explorer/FileExplorerContext.js

@@ -0,0 +1,370 @@
+import { useNotify, useStrings } from "../components/Provider.js";
+import { keyedByContent } from "../components/keys.js";
+import { getUploadSessionETA, removeLeadingSlash } from "./lib/utils.js";
+import { UploadSessionToast } from "./toasts.js";
+import { createContext, use, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/file-explorer/FileExplorerContext.tsx
+var FileExplorerContext = createContext(void 0);
+var permissionMessagePattern = /not authorized|access denied|status code 403/i;
+function isPermissionDenied(reason) {
+	if (!(reason instanceof Error)) return false;
+	if ("statusCode" in reason && reason.statusCode === 403) return true;
+	if ("status" in reason && reason.status === 403) return true;
+	if ("$metadata" in reason && typeof reason.$metadata === "object" && reason.$metadata !== null && "httpStatusCode" in reason.$metadata && reason.$metadata.httpStatusCode === 403) return true;
+	return permissionMessagePattern.test(reason.message);
+}
+function FileExplorerProvider({ children }) {
+	const notify = useNotify();
+	const t = useStrings().fileExplorer;
+	const uploadSessionMapRef = useRef(/* @__PURE__ */ new Map());
+	const uploadQueueRef = useRef([]);
+	const isProcessingRef = useRef(false);
+	const uploadSessionIdCounter = useRef(0);
+	const uploadSessionIdPrefix = "upload-session";
+	const generateUploadSessionId = () => {
+		return `${uploadSessionIdPrefix}-${Date.now()}-${uploadSessionIdCounter.current++}`;
+	};
+	const calculateWeightedProgress = (session) => {
+		if (!session.progress?.allFiles || session.progress.allFiles.size === 0) return 0;
+		let totalWeightedProgress = 0;
+		let totalWeight = 0;
+		session.progress.allFiles.forEach((fileProgress) => {
+			const fileSize = fileProgress.fileSizeBytes || 0;
+			const filePercentage = fileProgress?.percentage || 0;
+			totalWeightedProgress += filePercentage / 100 * fileSize;
+			totalWeight += fileSize;
+		});
+		return totalWeight > 0 ? totalWeightedProgress / totalWeight * 100 : 0;
+	};
+	const calculateOverallLoadedBytes = (session) => {
+		if (!session.progress?.allFiles) return {
+			loaded: 0,
+			total: session.progress?.totalSizeBytes || 0
+		};
+		let totalLoaded = 0;
+		let totalSize = 0;
+		session.progress.allFiles.forEach((fileProgress) => {
+			totalLoaded += fileProgress.loadedBytes || 0;
+			totalSize += fileProgress.fileSizeBytes || 0;
+		});
+		return {
+			loaded: totalLoaded,
+			total: totalSize
+		};
+	};
+	const updateFileProgressInUploadSession = (session, relativePath, updates) => {
+		if (!session.progress?.allFiles) return;
+		const fileProgress = session.progress.allFiles.get(relativePath);
+		if (!fileProgress) return;
+		const updatedFileProgress = {
+			...fileProgress,
+			...updates
+		};
+		session.progress.allFiles.set(relativePath, updatedFileProgress);
+	};
+	const addUploadSession = (storageName, targetPath, uploadNodes, client, provider, targetNode, refreshTargetNode) => {
+		const sessionId = generateUploadSessionId();
+		const newSession = {
+			id: sessionId,
+			storageName,
+			targetPath,
+			uploadNodes,
+			status: "queued",
+			queueIndex: uploadQueueRef.current.length,
+			client,
+			provider,
+			progress: {
+				completedFiles: 0,
+				totalFiles: uploadNodes.length,
+				totalSizeBytes: uploadNodes.reduce((sum, node) => sum + (node.file?.size || 0), 0),
+				allFiles: new Map(uploadNodes.map((file) => [file.relativePath, {
+					fileKey: file.relativePath,
+					fileSizeBytes: file.file?.size || 0,
+					abortController: new AbortController(),
+					status: "pending",
+					percentage: 0
+				}]))
+			},
+			toastId: sessionId,
+			abortController: new AbortController(),
+			targetNode,
+			refreshTargetNode
+		};
+		uploadSessionMapRef.current.set(sessionId, newSession);
+		uploadQueueRef.current.push(sessionId);
+		notify.loading(/* @__PURE__ */ jsx(UploadSessionToast, {
+			session: newSession,
+			queueLength: uploadQueueRef.current.length
+		}), {
+			toastId: sessionId,
+			icon: false,
+			closeButton: false
+		});
+		processNextUploadSessionInQueue();
+		return sessionId;
+	};
+	const getUploadSessionById = (sessionId) => {
+		return uploadSessionMapRef.current.get(sessionId);
+	};
+	const getUploadQueueIndex = (sessionId) => {
+		return uploadQueueRef.current.indexOf(sessionId);
+	};
+	const cancelFileInSession = (sessionId, relativePath) => {
+		const session = getUploadSessionById(sessionId);
+		if (!session?.progress?.allFiles) return;
+		const fileProgress = session.progress.allFiles.get(relativePath);
+		if (fileProgress?.abortController && (fileProgress.status === "pending" || fileProgress.status === "uploading")) {
+			fileProgress.abortController.abort();
+			updateFileProgressInUploadSession(session, relativePath, { status: "cancelled" });
+		}
+	};
+	const handleSessionCancel = (session) => {
+		if (session.progress?.allFiles) session.progress.allFiles.forEach((fileProgress, relativePath) => {
+			if (fileProgress.abortController && (fileProgress.status === "pending" || fileProgress.status === "uploading")) {
+				fileProgress.abortController.abort();
+				session.progress?.allFiles?.set(relativePath, {
+					...fileProgress,
+					status: "cancelled"
+				});
+			}
+		});
+		session.abortController?.abort();
+		session.status = "cancelled";
+	};
+	const startUploadSession = async (sessionId) => {
+		const session = getUploadSessionById(sessionId);
+		if (!session) {
+			notify.update(sessionId, {
+				render: t.messages.uploadInitFailed,
+				type: "error",
+				isLoading: false,
+				closeButton: null
+			});
+			return;
+		}
+		if (session.status !== "queued") {
+			notify.update(sessionId, {
+				render: t.upload.sessionNotQueued(sessionId, session.status),
+				type: "error",
+				isLoading: false,
+				closeButton: null
+			});
+			return;
+		}
+		session.status = "uploading";
+		isProcessingRef.current = true;
+		try {
+			notify.update(sessionId, {
+				render: /* @__PURE__ */ jsx(UploadSessionToast, {
+					session,
+					queueLength: uploadQueueRef.current.length,
+					onCancel: () => handleSessionCancel(session),
+					onCancelFile: (path) => cancelFileInSession(sessionId, path)
+				}),
+				icon: false,
+				isLoading: false,
+				closeButton: false,
+				autoClose: false
+			});
+			const results = await Promise.allSettled(session.uploadNodes.map(async (node) => {
+				if (node && node.file) {
+					const fileProgress = session.progress?.allFiles?.get(node.relativePath);
+					if (!fileProgress) return;
+					if (fileProgress.status === "cancelled") return {
+						reason: "Upload cancelled by user",
+						status: "rejected"
+					};
+					updateFileProgressInUploadSession(session, node.relativePath, {
+						status: "uploading",
+						loadedBytes: 0,
+						totalBytes: node.file.size,
+						percentage: 0
+					});
+					const objectPath = session.targetPath ? `${session.targetPath}/${removeLeadingSlash(node.relativePath)}` : removeLeadingSlash(node.relativePath);
+					const uploadFileInput = session.provider.uploadFileInput;
+					if (!uploadFileInput) return {
+						reason: "Upload is not supported for this storage provider",
+						status: "rejected"
+					};
+					const input = uploadFileInput(session.storageName, objectPath, node.file);
+					const onProgress = (progress) => {
+						if (session.status === "cancelled") return;
+						if (session.progress?.allFiles) {
+							const currentFileProgress = session.progress.allFiles.get(node.relativePath);
+							if (!currentFileProgress) return;
+							if ([
+								"failed",
+								"cancelled",
+								"complete"
+							].includes(currentFileProgress.status ?? "")) return;
+							const wasCompleted = currentFileProgress.percentage === 100;
+							updateFileProgressInUploadSession(session, node.relativePath, {
+								loadedBytes: progress.loadedBytes,
+								totalBytes: progress.totalBytes,
+								percentage: progress.percentage,
+								status: progress.percentage === 100 ? "completed" : "uploading"
+							});
+							if (progress.percentage === 100 && !wasCompleted) session.progress.completedFiles += 1;
+							const overallProgress = calculateWeightedProgress(session);
+							const { loaded: totalLoadedBytes } = calculateOverallLoadedBytes(session);
+							session.progress.overallProgress = overallProgress;
+							session.progress.totalLoadedBytes = totalLoadedBytes;
+							const { estimatedSecondsLeft, lastProgressTime, lastProgressBytes, shouldUpdateETA } = getUploadSessionETA(totalLoadedBytes, session.progress.totalSizeBytes, session.progress.lastProgressTime, session.progress.lastProgressBytes);
+							session.progress.lastProgressTime = lastProgressTime;
+							session.progress.lastProgressBytes = lastProgressBytes;
+							if (shouldUpdateETA) session.progress.estimatedSecondsLeft = estimatedSecondsLeft;
+							notify.update(sessionId, {
+								render: /* @__PURE__ */ jsx(UploadSessionToast, {
+									session,
+									queueLength: uploadQueueRef.current.length,
+									onCancel: () => handleSessionCancel(session),
+									onCancelFile: (path) => cancelFileInSession(sessionId, path)
+								}),
+								icon: false,
+								isLoading: false,
+								closeButton: false,
+								autoClose: false
+							});
+						}
+					};
+					try {
+						await session.client.uploadFile(input, onProgress, fileProgress.abortController);
+						updateFileProgressInUploadSession(session, node.relativePath, { status: "completed" });
+					} catch (error) {
+						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: /* @__PURE__ */ jsx(UploadSessionToast, {
+								session: {
+									...session,
+									progress: {
+										completedFiles: 0,
+										totalFiles: 0,
+										totalSizeBytes: 0,
+										...session.progress
+									}
+								},
+								queueLength: uploadQueueRef.current.length,
+								onCancel: () => handleSessionCancel(session),
+								onCancelFile: (path) => cancelFileInSession(sessionId, path)
+							}),
+							icon: false,
+							isLoading: false,
+							closeButton: session.status === "failed" || session.status === "cancelled",
+							autoClose: false
+						});
+						throw error;
+					}
+				}
+			}));
+			try {
+				await session.refreshTargetNode(session.targetNode);
+			} catch (err) {
+				notify.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) => {
+				if (result.status === "rejected") {
+					const reason = result.reason?.message || result.reason?.toString() || "";
+					return !reason.toLowerCase().includes("abort") && !reason.toLowerCase().includes("cancel");
+				}
+				return false;
+			});
+			const abortedCount = failedResults?.length - actualFailedResults?.length;
+			const failedFileNames = actualFailedResults.map((result) => {
+				const originalIndex = results.findIndex((r) => r === result);
+				return session.uploadNodes[originalIndex]?.name || `File #${originalIndex + 1}`;
+			}).filter(Boolean);
+			const successfulCount = results?.length - failedResults?.length;
+			if (actualFailedResults?.length > 0) notify.update(sessionId, {
+				render: /* @__PURE__ */ jsxs("div", {
+					className: "text-md",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "font-medium mb-2",
+							children: t.upload.failedSummary(actualFailedResults.length, results.length)
+						}),
+						/* @__PURE__ */ jsx("ul", {
+							className: "text-sm space-y-1 max-h-32 overflow-y-auto",
+							children: keyedByContent(failedFileNames, (n) => n).map(({ key, item: name }, i) => /* @__PURE__ */ jsxs("li", { children: [
+								"• ",
+								name,
+								actualFailedResults[i]?.reason ? `: ${actualFailedResults[i].reason}` : ""
+							] }, key))
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "mt-2 text-sm",
+							children: actualFailedResults.every((result) => isPermissionDenied(result.reason)) ? t.messages.noWriteAccess : t.upload.failReasonGeneric
+						})
+					]
+				}),
+				type: "error",
+				icon: null,
+				isLoading: false,
+				closeButton: null
+			});
+			else if (abortedCount > 0 && successfulCount > 0) notify.update(sessionId, {
+				render: /* @__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
+			});
+			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 notify.update(sessionId, {
+				render: t.upload.allUploaded,
+				type: "success",
+				icon: null,
+				isLoading: false,
+				closeButton: null,
+				autoClose: null
+			});
+			session.status = actualFailedResults.length > 0 ? "failed" : "completed";
+			const queueIndex = getUploadQueueIndex(sessionId);
+			if (queueIndex !== -1) uploadQueueRef.current.splice(queueIndex, 1);
+			uploadSessionMapRef.current.delete(sessionId);
+			setTimeout(() => {
+				processNextUploadSessionInQueue();
+			}, 1e3);
+		} finally {
+			isProcessingRef.current = false;
+		}
+	};
+	const processNextUploadSessionInQueue = async () => {
+		if (isProcessingRef.current || uploadQueueRef.current.length === 0) return;
+		const nextSessionId = uploadQueueRef.current[0];
+		await startUploadSession(nextSessionId);
+	};
+	const contextValue = {
+		uploadSessionMap: uploadSessionMapRef.current,
+		uploadQueue: uploadQueueRef.current,
+		addUploadSession,
+		getUploadSessionById,
+		getUploadQueueIndex,
+		startUploadSession
+	};
+	return /* @__PURE__ */ jsx(FileExplorerContext.Provider, {
+		value: contextValue,
+		children
+	});
+}
+function useFileExplorer() {
+	const context = use(FileExplorerContext);
+	if (!context) throw new Error("useFileExplorer must be used within a FileExplorerProvider");
+	return context;
+}
+//#endregion
+export { FileExplorerProvider, useFileExplorer };

package/dist/{chunks/CodePreviewEditor-YqQBz1YL.js → file-explorer/FilePreview/CodePreviewEditor.js}

@@ -1,5 +1,6 @@
-import { t as useCssIsDark } from "./useCssIsDark-DHr05dG2.js";
-import { a as getThemeName, i as defineEditorThemes, r as setupMonacoWorkers } from "./editor-Dk1rbV75.js";
+import { useCssIsDark } from "../../components/useCssIsDark.js";
+import { defineEditorThemes, getThemeName } from "../../editor/themes.js";
+import { setupMonacoWorkers } from "../../editor/workers.js";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as monaco from "monaco-editor";

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

@@ -0,0 +1,45 @@
+import { useStrings } from "../../components/Provider.js";
+import { ExpandIcon } from "../../icons.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 { jsx, jsxs } from "react/jsx-runtime";
+//#region src/file-explorer/FilePreview/Inline.tsx
+function FilePreviewInline({ node, storage, getPresignedUrl, onOpenFull, onDownload, active = true, showSecurityIndicator = true }) {
+	const t = useStrings().fileExplorer;
+	const { url, loading, error } = usePresignedUrl(node, getPresignedUrl, {
+		enabled: active,
+		linkErrorMessage: t.preview.linkError
+	});
+	const kind = getPreviewKind(node);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-0 flex-col",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-hidden",
+			children: /* @__PURE__ */ jsx(FilePreviewViewer, {
+				node,
+				kind,
+				url,
+				urlLoading: loading,
+				urlError: error,
+				storage,
+				onDownload: () => onDownload(node)
+			}, node.path)
+		}), /* @__PURE__ */ jsxs("div", {
+			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}`] }), showSecurityIndicator && url && /* @__PURE__ */ jsx(StreamedBadge, {})]
+			}), /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "btn btn-neutral cursor-pointer",
+				onClick: () => onOpenFull(node),
+				children: [/* @__PURE__ */ jsx(ExpandIcon, { className: "mr-2 h-4 w-4" }), t.preview.openFullPreview]
+			})]
+		})]
+	});
+}
+//#endregion
+export { FilePreviewInline };

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

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