@parallelworks/ui 0.19.0 → 0.20.0

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

@@ -0,0 +1,526 @@
+import { useStrings } from "../../components/Provider.js";
+import { DownloadFileIcon, FileIcon, LockIcon, MusicIcon, ZipIcon } from "../../icons.js";
+import { positionKeys, withPositionKeys } from "../../components/keys.js";
+import Loader from "../../components/Loader.js";
+import Markdown from "../../components/Markdown.js";
+import { formatFileSize, getFileExtension } from "../lib/utils.js";
+import { CODE_PREVIEW_MAX_BYTES, CODE_PREVIEW_MAX_LINES, PDF_PREVIEW_MAX_BYTES, TABULAR_PREVIEW_MAX_BYTES, getMonacoLanguage } 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 cx from "classnames";
+import { Suspense, lazy, useCallback, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/file-explorer/FilePreview/Viewer.tsx
+var CodePreviewEditor = lazy(() => import("./CodePreviewEditor.js"));
+var PREVIEW_MARKDOWN_CONTROLS = {
+	table: { fullscreen: false },
+	mermaid: { fullscreen: false }
+};
+function FilePreviewViewer({ node, kind, url, urlLoading, urlError, zoom = 100, onDownload, storage = null }) {
+	const t = useStrings().fileExplorer;
+	const [reloadNonce, setReloadNonce] = useState(0);
+	const onCorsRetry = useCallback(async (opts) => {
+		if (opts?.silent) {
+			if (!url) return { corsError: true };
+			try {
+				(await fetch(url)).body?.cancel().catch(() => {});
+				return { corsError: false };
+			} catch {
+				return { corsError: true };
+			}
+		}
+		setReloadNonce((n) => n + 1);
+		return { corsError: false };
+	}, [url]);
+	if (urlError) return /* @__PURE__ */ jsx(NotPreviewable, {
+		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(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(FileIcon, { className: "h-9 w-9 theme-muted-text" }),
+		title: t.preview.unsupportedTitle,
+		message: t.preview.unsupportedMessage,
+		onDownload
+	});
+	if (urlLoading || !url) return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full w-full items-center justify-center",
+		children: /* @__PURE__ */ jsx(Loader, {
+			size: 40,
+			text: t.preview.loading
+		})
+	});
+	switch (kind) {
+		case "image": return /* @__PURE__ */ jsx(ImageView, {
+			node,
+			url,
+			zoom,
+			onDownload
+		});
+		case "video": return /* @__PURE__ */ jsx(VideoView, {
+			node,
+			url,
+			onDownload
+		});
+		case "audio": return /* @__PURE__ */ jsx(AudioView, {
+			node,
+			url,
+			onDownload
+		});
+		case "pdf": return /* @__PURE__ */ jsx(PdfView, {
+			node,
+			url,
+			onDownload,
+			storage,
+			onCorsRetry
+		}, reloadNonce);
+		case "code": return /* @__PURE__ */ jsx(CodeView, {
+			node,
+			url,
+			onDownload,
+			storage,
+			onCorsRetry
+		}, reloadNonce);
+		case "csv": return /* @__PURE__ */ jsx(CsvView, {
+			node,
+			url,
+			onDownload,
+			storage,
+			onCorsRetry
+		}, reloadNonce);
+		case "notebook": return /* @__PURE__ */ jsx(NotebookView, {
+			node,
+			url,
+			onDownload,
+			storage,
+			onCorsRetry
+		}, reloadNonce);
+		default: return null;
+	}
+}
+function ImageView({ node, url, zoom, onDownload }) {
+	const [hasError, setHasError] = useState(false);
+	if (hasError) return /* @__PURE__ */ jsx(PreviewError, { onDownload });
+	const fit = zoom === 100;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full w-full items-center justify-center overflow-auto bg-(--theme-app-bg) p-4",
+		children: /* @__PURE__ */ jsx("img", {
+			src: url,
+			alt: node.name,
+			className: cx("block rounded-md shadow-lg", fit && "object-contain"),
+			style: fit ? {
+				maxWidth: "100%",
+				maxHeight: "100%"
+			} : {
+				width: `${zoom}%`,
+				maxWidth: "none"
+			},
+			onError: () => setHasError(true)
+		})
+	});
+}
+function VideoView({ node, url, onDownload }) {
+	const [hasError, setHasError] = useState(false);
+	if (hasError) return /* @__PURE__ */ jsx(PreviewError, { onDownload });
+	return /* @__PURE__ */ jsx("div", {
+		className: "h-full w-full bg-black",
+		children: /* @__PURE__ */ jsx("video", {
+			src: url,
+			controls: true,
+			className: "h-full w-full object-contain",
+			"aria-label": node.name,
+			onError: () => setHasError(true)
+		})
+	});
+}
+function AudioView({ node, url, onDownload }) {
+	const [hasError, setHasError] = useState(false);
+	if (hasError) return /* @__PURE__ */ jsx(PreviewError, { onDownload });
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full w-full items-center justify-center p-6",
+		children: /* @__PURE__ */ jsxs("div", {
+			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(MusicIcon, { className: "h-12 w-12 text-white" })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-center",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "break-all font-medium",
+						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)}`]
+					})]
+				}),
+				/* @__PURE__ */ jsx("audio", {
+					src: url,
+					controls: true,
+					className: "w-full",
+					"aria-label": node.name,
+					onError: () => setHasError(true)
+				})
+			]
+		})
+	});
+}
+function PreviewError({ onDownload }) {
+	const t = useStrings().fileExplorer;
+	return /* @__PURE__ */ jsx(NotPreviewable, {
+		icon: /* @__PURE__ */ jsx(FileIcon, { className: "h-9 w-9 theme-muted-text" }),
+		title: t.preview.errorTitle,
+		message: t.preview.previewError,
+		onDownload
+	});
+}
+function PdfView({ node, url, onDownload, storage, onCorsRetry }) {
+	const { blobUrl, loading, error, tooLarge, corsError } = useObjectBlobUrl(url, {
+		enabled: true,
+		maxBytes: PDF_PREVIEW_MAX_BYTES,
+		knownSize: node.size,
+		mimeType: "application/pdf",
+		cacheKey: node.path
+	});
+	return /* @__PURE__ */ jsx(PreviewFetchState, {
+		loading,
+		tooLarge,
+		error,
+		corsError,
+		storage,
+		onCorsRetry,
+		onDownload,
+		children: blobUrl ? /* @__PURE__ */ jsx("iframe", {
+			src: blobUrl,
+			title: node.name,
+			className: "h-full w-full border-0 bg-(--theme-app-bg)"
+		}) : null
+	});
+}
+function CodeView({ node, url, onDownload, storage, onCorsRetry }) {
+	const t = useStrings().fileExplorer;
+	const language = getMonacoLanguage(node);
+	const [tail, setTail] = useState(false);
+	const { text, loading, error, tooLarge, truncated, corsError } = useObjectText(url, {
+		enabled: true,
+		maxBytes: CODE_PREVIEW_MAX_BYTES,
+		maxLines: CODE_PREVIEW_MAX_LINES,
+		knownSize: node.size,
+		cacheKey: node.path,
+		tail
+	});
+	const shownLines = useMemo(() => countLines(text ?? ""), [text]);
+	const canToggle = truncated || tail;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full w-full flex-col bg-(--theme-app-bg)",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-2 border-b theme-border px-3.5 py-2",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate font-mono text-xs theme-muted-text",
+					children: node.name
+				}),
+				/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+				truncated && text !== null && /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 font-mono text-[11px] theme-muted-text",
+					children: tail ? t.preview.lastLines(shownLines) : t.preview.firstLines(shownLines)
+				}),
+				canToggle && /* @__PURE__ */ jsxs("div", {
+					className: "inline-flex shrink-0 overflow-hidden rounded-full border theme-border text-[11px]",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: cx("cursor-pointer px-2 py-0.5", tail ? "theme-muted-text theme-hover" : "theme-element"),
+						onClick: () => setTail(false),
+						children: t.preview.head
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: cx("cursor-pointer px-2 py-0.5", tail ? "theme-element" : "theme-muted-text theme-hover"),
+						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(LockIcon, { className: "h-2.5 w-2.5" }), t.readOnly]
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-hidden",
+			children: /* @__PURE__ */ jsx(PreviewFetchState, {
+				loading,
+				tooLarge,
+				error,
+				corsError,
+				storage,
+				onCorsRetry,
+				onDownload,
+				children: language === "markdown" ? /* @__PURE__ */ jsx("div", {
+					className: "h-full overflow-auto px-5 py-4",
+					children: /* @__PURE__ */ jsx(Markdown, {
+						controls: PREVIEW_MARKDOWN_CONTROLS,
+						children: text ?? ""
+					})
+				}) : /* @__PURE__ */ jsx(Suspense, {
+					fallback: /* @__PURE__ */ jsx(PreviewLoading, {}),
+					children: /* @__PURE__ */ jsx(CodePreviewEditor, {
+						value: text ?? "",
+						language
+					})
+				})
+			})
+		})]
+	});
+}
+/** Wrap code in a fenced block for the markdown renderer, using a fence long
+* enough to survive backtick runs inside the content. */
+function toFencedCode(text, language) {
+	const longestRun = (text.match(/`+/g) ?? []).reduce((max, run) => Math.max(max, run.length), 0);
+	const fence = "`".repeat(Math.max(3, longestRun + 1));
+	return `${fence}${language}\n${text}\n${fence}`;
+}
+function CsvView({ node, url, onDownload, storage, onCorsRetry }) {
+	const { text, loading, error, tooLarge, corsError } = useObjectText(url, {
+		enabled: true,
+		maxBytes: TABULAR_PREVIEW_MAX_BYTES,
+		maxLines: 502,
+		knownSize: node.size,
+		cacheKey: node.path
+	});
+	return /* @__PURE__ */ jsx(PreviewFetchState, {
+		loading,
+		tooLarge,
+		error,
+		corsError,
+		storage,
+		onCorsRetry,
+		onDownload,
+		children: /* @__PURE__ */ jsx(CsvTable, {
+			node,
+			text: text ?? ""
+		})
+	});
+}
+function CsvTable({ node, text }) {
+	const t = useStrings().fileExplorer;
+	const delimiter = getFileExtension(node.name) === "tsv" ? "	" : ",";
+	const rows = parseDelimited(text, delimiter, 502);
+	const header = rows[0] ?? [];
+	const body = rows.slice(1);
+	const shown = body.slice(0, 500);
+	const truncated = body.length > 500;
+	const columnCount = Math.max(header.length, ...shown.map((r) => r.length));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full w-full flex-col bg-(--theme-app-bg)",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-auto",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "w-full border-collapse font-mono text-xs",
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+					className: "sticky top-0 bg-(--theme-panel-bg)",
+					children: [/* @__PURE__ */ jsx("th", {
+						className: "w-11 border-b theme-border px-3.5 py-2 text-right font-semibold theme-muted-text",
+						children: "#"
+					}), positionKeys(columnCount, "column").map((key, i) => /* @__PURE__ */ jsx("th", {
+						className: "border-b theme-border px-3.5 py-2 text-left font-semibold",
+						children: header[i] ?? ""
+					}, key))]
+				}) }), /* @__PURE__ */ jsx("tbody", { children: withPositionKeys(shown, "row").map(({ key, item: row }, r) => /* @__PURE__ */ jsxs("tr", {
+					className: cx(r % 2 === 1 && "bg-(--theme-panel-bg)/50"),
+					children: [/* @__PURE__ */ jsx("td", {
+						className: "px-3.5 py-1.5 text-right theme-muted-text",
+						children: r + 1
+					}), positionKeys(columnCount, "cell").map((cellKey, c) => /* @__PURE__ */ jsx("td", {
+						className: "px-3.5 py-1.5",
+						children: row[c] ?? ""
+					}, cellKey))]
+				}, key)) })]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "shrink-0 border-t theme-border px-3.5 py-1.5 font-mono text-[11px] theme-muted-text",
+			children: truncated ? t.preview.csvFirstRows(shown.length, columnCount) : t.preview.csvRows(body.length, columnCount)
+		})]
+	});
+}
+function NotebookView({ node, url, onDownload, storage, onCorsRetry }) {
+	const { text, loading, error, tooLarge, corsError } = useObjectText(url, {
+		enabled: true,
+		maxBytes: TABULAR_PREVIEW_MAX_BYTES,
+		knownSize: node.size,
+		cacheKey: node.path
+	});
+	return /* @__PURE__ */ jsx(PreviewFetchState, {
+		loading,
+		tooLarge,
+		error,
+		corsError,
+		storage,
+		onCorsRetry,
+		onDownload,
+		children: /* @__PURE__ */ jsx(NotebookBody, {
+			text: text ?? "",
+			onDownload
+		})
+	});
+}
+function NotebookBody({ text, onDownload }) {
+	const t = useStrings().fileExplorer;
+	const notebook = parseNotebook(text);
+	if (!notebook) return /* @__PURE__ */ jsx(InlineError, {
+		message: t.preview.notebookParseError,
+		onDownload
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "h-full w-full overflow-auto bg-(--theme-app-bg) p-4",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "mx-auto flex max-w-4xl flex-col gap-3",
+			children: withPositionKeys(notebook.cells, "cell").map(({ key, item: cell }) => {
+				const source = joinSource(cell.source);
+				if (cell.cell_type === "markdown") return /* @__PURE__ */ jsx("div", {
+					className: "rounded-lg border theme-border px-4 py-3",
+					children: /* @__PURE__ */ jsx(Markdown, {
+						controls: PREVIEW_MARKDOWN_CONTROLS,
+						children: source
+					})
+				}, key);
+				if (cell.cell_type === "code") return /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "w-14 shrink-0 pt-3 font-mono text-[11px] theme-muted-text",
+						children: typeof cell.execution_count === "number" ? `In [${cell.execution_count}]:` : "In [ ]:"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "rounded-lg border theme-border px-1 py-1 text-xs",
+							children: /* @__PURE__ */ jsx(Markdown, { children: toFencedCode(source, "python") })
+						}), withPositionKeys(cell.outputs ?? [], "output").map(({ key: outputKey, item: output }) => /* @__PURE__ */ jsx(NotebookOutputView, { output }, outputKey))]
+					})]
+				}, key);
+				return null;
+			})
+		})
+	});
+}
+function NotebookOutputView({ output }) {
+	const t = useStrings().fileExplorer;
+	const [imgError, setImgError] = useState(false);
+	const png = output.data?.["image/png"];
+	if ((typeof png === "string" || Array.isArray(png)) && !imgError) return /* @__PURE__ */ jsx("div", {
+		className: "mt-2 rounded-lg bg-white p-3",
+		children: /* @__PURE__ */ jsx("img", {
+			src: `data:image/png;base64,${joinSource(png)}`,
+			alt: t.preview.notebookOutput,
+			className: "max-w-full",
+			onError: () => setImgError(true)
+		})
+	});
+	if (output.output_type === "stream") return /* @__PURE__ */ jsx("pre", {
+		className: "mt-2 overflow-auto rounded-lg bg-(--theme-panel-bg) px-3 py-2 font-mono text-[11px] theme-muted-text",
+		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",
+		children: stripAnsi((output.traceback ?? []).join("\n"))
+	});
+	const plain = output.data?.["text/plain"];
+	if (plain !== void 0) return /* @__PURE__ */ jsx("pre", {
+		className: "mt-2 overflow-auto rounded-lg bg-(--theme-panel-bg) px-3 py-2 font-mono text-[11px]",
+		children: joinSource(plain)
+	});
+	return null;
+}
+function PreviewLoading() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full items-center justify-center",
+		children: /* @__PURE__ */ jsx(Loader, { size: 36 })
+	});
+}
+function PreviewFetchState({ loading, tooLarge, error, corsError, storage, onCorsRetry, onDownload, children }) {
+	if (loading) return /* @__PURE__ */ jsx(PreviewLoading, {});
+	if (corsError) return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full w-full items-center justify-center p-6",
+		children: /* @__PURE__ */ jsx(CorsIssuePreview, {
+			selectedStorage: storage,
+			onRefresh: onCorsRetry
+		})
+	});
+	if (tooLarge) return /* @__PURE__ */ jsx(TooLargeInline, { onDownload });
+	if (error) return /* @__PURE__ */ jsx(PreviewError, { onDownload });
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+function NotPreviewable({ icon, title, message, onDownload }) {
+	const t = useStrings().fileExplorer;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full w-full items-center justify-center p-6",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex max-w-md flex-col items-center gap-4 text-center",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "flex h-18 w-18 items-center justify-center rounded-2xl theme-muted-panel",
+					children: icon
+				}),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+					className: "font-semibold",
+					children: title
+				}), /* @__PURE__ */ jsx("div", {
+					className: "mt-1 text-sm theme-muted-text",
+					children: message
+				})] }),
+				onDownload && /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "btn btn-info cursor-pointer",
+					onClick: onDownload,
+					children: [/* @__PURE__ */ jsx(DownloadFileIcon, { className: "mr-2 h-4 w-4" }), t.preview.downloadInstead]
+				})
+			]
+		})
+	});
+}
+function TooLargeInline({ onDownload }) {
+	const t = useStrings().fileExplorer;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full items-center justify-center p-6",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex max-w-md flex-col items-center gap-3 text-center",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "text-sm theme-muted-text",
+				children: t.preview.tooLarge
+			}), onDownload && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "btn btn-info cursor-pointer",
+				onClick: onDownload,
+				children: [/* @__PURE__ */ jsx(DownloadFileIcon, { className: "mr-2 h-4 w-4" }), t.preview.downloadInstead]
+			})]
+		})
+	});
+}
+function InlineError({ message, onDownload }) {
+	const t = useStrings().fileExplorer;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full items-center justify-center p-6",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex max-w-md flex-col items-center gap-3 text-center",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "text-sm theme-muted-text",
+				children: message
+			}), onDownload && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "btn btn-neutral cursor-pointer",
+				onClick: onDownload,
+				children: [/* @__PURE__ */ jsx(DownloadFileIcon, { className: "mr-2 h-4 w-4" }), t.preview.downloadInstead]
+			})]
+		})
+	});
+}
+//#endregion
+export { FilePreviewViewer };