@parallelworks/ui 0.19.0 → 0.19.1

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

@@ -0,0 +1,266 @@
+import { useStrings } from "../../components/Provider.js";
+import { ChevronLeftIcon, ChevronRightIcon, CloseIcon, DownloadFileIcon, FileIcon, LinkIcon, ZoomInIcon, ZoomOutIcon } 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 cx from "classnames";
+import { useCallback, useEffect, useState } from "react";
+import { useLocalStorage } from "usehooks-ts";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#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. */
+function isDocumentView(kind) {
+	return kind === "code" || kind === "csv" || kind === "notebook";
+}
+function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigate, onClose, onDownload, onCopyUri, showSecurityIndicator = true }) {
+	const t = useStrings().fileExplorer;
+	const [style, setStyle] = useLocalStorage("fileExplorer.previewStyle", "quicklook");
+	const [zoom, setZoom] = useState(100);
+	const { url, loading: urlLoading, error: urlError } = usePresignedUrl(open ? node : null, getPresignedUrl, {
+		enabled: open,
+		linkErrorMessage: t.preview.linkError
+	});
+	const isOverlay = style === "overlay";
+	const index = node ? siblings.findIndex((s) => s.path === node.path) : -1;
+	const hasPrev = index > 0;
+	const hasNext = index > -1 && index < siblings.length - 1;
+	const goPrev = useCallback(() => {
+		const prev = index > 0 ? siblings[index - 1] : void 0;
+		if (prev) onNavigate(prev);
+	}, [
+		index,
+		siblings,
+		onNavigate
+	]);
+	const goNext = useCallback(() => {
+		const next = index > -1 ? siblings[index + 1] : void 0;
+		if (next) onNavigate(next);
+	}, [
+		index,
+		siblings,
+		onNavigate
+	]);
+	useEffect(() => {
+		setZoom(100);
+	}, [node]);
+	useEffect(() => {
+		if (!open) return;
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") onClose();
+			else if (e.key === "ArrowRight") goNext();
+			else if (e.key === "ArrowLeft") goPrev();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [
+		open,
+		onClose,
+		goNext,
+		goPrev
+	]);
+	if (!open || !node) return null;
+	const kind = getPreviewKind(node);
+	const showZoom = kind === "image";
+	const floatingChrome = isOverlay && !isDocumentView(kind);
+	const topBar = /* @__PURE__ */ jsxs("div", {
+		className: cx("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"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-2.5",
+			children: [
+				/* @__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
+				}),
+				showSecurityIndicator && url && /* @__PURE__ */ jsx(StreamedBadge, {})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-1.5",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: cx("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(ChromeButton, {
+					overlay: floatingChrome,
+					label: t.preview.copyUri,
+					onClick: () => onCopyUri(node),
+					children: /* @__PURE__ */ jsx(LinkIcon, { className: "h-4 w-4" })
+				}),
+				/* @__PURE__ */ jsx(ChromeButton, {
+					overlay: floatingChrome,
+					label: t.preview.download,
+					onClick: () => onDownload(node),
+					children: /* @__PURE__ */ jsx(DownloadFileIcon, { className: "h-4 w-4" })
+				}),
+				/* @__PURE__ */ jsx(ChromeButton, {
+					overlay: floatingChrome,
+					label: t.preview.close,
+					onClick: onClose,
+					children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-4 w-4" })
+				})
+			]
+		})]
+	});
+	const footer = /* @__PURE__ */ jsxs("div", {
+		className: cx("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"),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: cx("text-xs", !floatingChrome && "theme-muted-text"),
+			children: [typeof node.size === "number" && formatFileSize(node.size), node.contentType && ` · ${node.contentType}`]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [showZoom && /* @__PURE__ */ jsxs("div", {
+				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,
+						onClick: () => setZoom((z) => Math.max(25, z - 25)),
+						children: /* @__PURE__ */ jsx(ZoomOutIcon, { className: "h-3.5 w-3.5" })
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "min-w-11 text-center text-xs tabular-nums",
+						children: [zoom, "%"]
+					}),
+					/* @__PURE__ */ jsx(MiniButton, {
+						overlay: floatingChrome,
+						label: t.preview.zoomIn,
+						onClick: () => setZoom((z) => Math.min(400, z + 25)),
+						children: /* @__PURE__ */ jsx(ZoomInIcon, { className: "h-3.5 w-3.5" })
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ jsx(MiniButton, {
+						overlay: floatingChrome,
+						label: t.preview.previousFile,
+						disabled: !hasPrev,
+						onClick: goPrev,
+						children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-4 w-4" })
+					}),
+					/* @__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,
+						label: t.preview.nextFile,
+						disabled: !hasNext,
+						onClick: goNext,
+						children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4" })
+					})
+				]
+			})]
+		})]
+	});
+	const stage = /* @__PURE__ */ jsx("div", {
+		className: "relative min-h-0 flex-1 overflow-hidden",
+		children: /* @__PURE__ */ jsx(FilePreviewViewer, {
+			node,
+			kind,
+			url,
+			urlLoading,
+			urlError,
+			zoom,
+			storage,
+			onDownload: () => onDownload(node)
+		}, node.path)
+	});
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		role: "none",
+		className: "fixed inset-0 z-9995 flex items-center justify-center",
+		style: {
+			backgroundColor: isOverlay ? "rgba(1,4,9,.94)" : "rgba(1,4,9,.62)",
+			backdropFilter: isOverlay ? void 0 : "blur(3px)",
+			WebkitBackdropFilter: isOverlay ? void 0 : "blur(3px)"
+		},
+		onClick: (e) => {
+			if (e.target === e.currentTarget) onClose();
+		},
+		children: [isOverlay && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(EdgeButton, {
+			side: "left",
+			label: t.preview.previousFile,
+			disabled: !hasPrev,
+			onClick: goPrev
+		}), /* @__PURE__ */ jsx(EdgeButton, {
+			side: "right",
+			label: t.preview.nextFile,
+			disabled: !hasNext,
+			onClick: goNext
+		})] }), /* @__PURE__ */ jsxs("div", {
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": node.name,
+			className: cx("relative flex flex-col", isOverlay ? "h-screen w-screen" : "overflow-hidden rounded-2xl border theme-border shadow-2xl", floatingChrome ? "bg-transparent" : "bg-(--theme-panel-bg)"),
+			style: isOverlay ? void 0 : {
+				width: "min(1120px, 94vw)",
+				height: "min(780px, 90vh)"
+			},
+			children: [
+				topBar,
+				stage,
+				footer
+			]
+		})]
+	}), document.body);
+}
+function SegButton({ active, overlayChrome, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		className: cx("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: cx("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: cx("flex h-6 w-7 items-center justify-center rounded-md transition-colors", disabled ? "cursor-not-allowed opacity-40" : cx("cursor-pointer", overlay ? "hover:bg-white/15" : "hover:theme-hover")),
+		children
+	});
+}
+function EdgeButton({ side, label, disabled, onClick }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		disabled,
+		onClick: (e) => {
+			e.stopPropagation();
+			onClick();
+		},
+		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(ChevronLeftIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-6 w-6" })
+	});
+}
+//#endregion
+export { FilePreview };

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

@@ -0,0 +1,63 @@
+//#region src/file-explorer/FilePreview/parse.ts
+/** Parse CSV/TSV, honoring quoted fields (embedded delimiter/newline/escaped quote);
+* `maxRows` stops early so a big file isn't walked in full for a preview. */
+function parseDelimited(text, delimiter, maxRows) {
+	const rows = [];
+	let row = [];
+	let field = "";
+	let inQuotes = false;
+	for (let i = 0; i < text.length; i++) {
+		const char = text[i];
+		if (inQuotes) {
+			if (char === "\"") {
+				if (text[i + 1] === "\"") {
+					field += "\"";
+					i++;
+				} else inQuotes = false;
+			} else field += char;
+			continue;
+		}
+		if (char === "\"") inQuotes = true;
+		else if (char === delimiter) {
+			row.push(field);
+			field = "";
+		} else if (char === "\n" || char === "\r") {
+			if (char === "\r" && text[i + 1] === "\n") i++;
+			row.push(field);
+			rows.push(row);
+			row = [];
+			field = "";
+			if (maxRows !== void 0 && rows.length >= maxRows) break;
+		} else field += char;
+	}
+	if (field.length > 0 || row.length > 0) {
+		row.push(field);
+		rows.push(row);
+	}
+	while (rows.length > 0) {
+		const last = rows[rows.length - 1];
+		if (last && last.length === 1 && last[0] === "") rows.pop();
+		else break;
+	}
+	return rows;
+}
+function parseNotebook(text) {
+	try {
+		const parsed = JSON.parse(text);
+		if (!parsed || !Array.isArray(parsed.cells)) return null;
+		return parsed;
+	} catch {
+		return null;
+	}
+}
+/** nbformat `source`/`text` is a string or an array of lines; normalize to one string. */
+function joinSource(source) {
+	if (Array.isArray(source)) return source.map((s) => typeof s === "string" ? s : "").join("");
+	return typeof source === "string" ? source : "";
+}
+var ANSI_ESCAPE = /\x1b\[[0-9;]*m/g;
+function stripAnsi(text) {
+	return text.replace(ANSI_ESCAPE, "");
+}
+//#endregion
+export { joinSource, parseDelimited, parseNotebook, stripAnsi };

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

@@ -0,0 +1,98 @@
+import { CorsError } from "../lib/errors.js";
+//#region src/file-explorer/FilePreview/previewCache.ts
+var MAX_ENTRIES = 2;
+var urlCache = /* @__PURE__ */ new Map();
+var contentCache = /* @__PURE__ */ new Map();
+function trim(cache, onEvict) {
+	while (cache.size > MAX_ENTRIES) {
+		const oldest = cache.keys().next().value;
+		if (oldest === void 0) return;
+		const evicted = cache.get(oldest);
+		cache.delete(oldest);
+		if (evicted !== void 0) onEvict(evicted);
+	}
+}
+function disposeContent(record) {
+	record.controller.abort();
+	if (record.value !== void 0) record.dispose?.(record.value);
+}
+function moveToNewest(cache, path, record) {
+	cache.delete(path);
+	cache.set(path, record);
+}
+/** Request a presigned URL for `path` once and remember the result; a failed or
+* empty result is not cached so a later mount retries. */
+function loadPreviewUrl(path, loader) {
+	const existing = urlCache.get(path);
+	if (existing) {
+		moveToNewest(urlCache, path, existing);
+		return existing;
+	}
+	const record = { promise: loader() };
+	record.promise.then((value) => {
+		if (value[0] && !value[1]) record.value = value;
+		else if (urlCache.get(path) === record) urlCache.delete(path);
+	}).catch(() => {
+		if (urlCache.get(path) === record) urlCache.delete(path);
+	});
+	urlCache.set(path, record);
+	trim(urlCache, () => {});
+	return record;
+}
+/** Fetch the object for `path` once and remember it; `dispose` frees the value
+* (e.g. revokes a blob URL) when the entry is evicted. A rejected fetch is not
+* cached so a later mount retries. */
+function loadPreviewContent(path, loader, dispose) {
+	const existing = contentCache.get(path);
+	if (existing) {
+		moveToNewest(contentCache, path, existing);
+		return existing;
+	}
+	const controller = new AbortController();
+	const record = {
+		promise: loader(controller.signal),
+		controller,
+		dispose
+	};
+	record.promise.then((value) => {
+		record.value = value;
+	}).catch(() => {
+		if (contentCache.get(path) === record) contentCache.delete(path);
+	});
+	contentCache.set(path, record);
+	trim(contentCache, disposeContent);
+	return record;
+}
+/** Fetch a preview object over its signed URL; a 401/403 means the URL is stale
+* or unauthorized, so drop it from the cache and let the next mount fetch a fresh
+* one instead of replaying the dead one. */
+async function fetchPreviewObject(path, url, signal, headers) {
+	let response;
+	try {
+		response = await fetch(url, {
+			signal,
+			...headers ? { headers } : {}
+		});
+	} catch (error) {
+		if (error instanceof TypeError) throw new CorsError();
+		throw error;
+	}
+	if (!response.ok) {
+		if (response.status === 401 || response.status === 403) urlCache.delete(path);
+		throw new Error(`Failed to load file (${response.status})`);
+	}
+	return response;
+}
+function peekPreviewUrl(path) {
+	return urlCache.get(path)?.value;
+}
+function peekPreviewContent(path) {
+	return contentCache.get(path)?.value;
+}
+function clearPreviewCache() {
+	for (const record of contentCache.values()) disposeContent(record);
+	contentCache.clear();
+	urlCache.clear();
+}
+//#endregion
+export { clearPreviewCache, fetchPreviewObject, loadPreviewContent, loadPreviewUrl, peekPreviewContent, peekPreviewUrl };

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

@@ -0,0 +1,151 @@
+import { getFileExtension } from "../lib/utils.js";
+//#region src/file-explorer/FilePreview/previewType.ts
+/** Short-lived so the link doesn't linger; an hour covers a viewing session. */
+var PREVIEW_URL_EXPIRES_IN = 3600;
+/** Cap text pulled into the tab; media streams through native elements uncapped. */
+var CODE_PREVIEW_MAX_BYTES = 10485760;
+var TABULAR_PREVIEW_MAX_BYTES = 20971520;
+/** A line cap bounds what a text preview holds and renders; the byte cap above cuts
+* short whatever the line cap hasn't, and refuses outright only content with no line
+* break to cut on. Well under Monaco's 20MB and 300K-line thresholds, past which it
+* stops tokenizing and highlighting dies. */
+var CODE_PREVIEW_MAX_LINES = 5e3;
+/** Fetched into a blob URL to render inline regardless of served content type; falls back to download above this. */
+var PDF_PREVIEW_MAX_BYTES = 52428800;
+var IMAGE_EXT = /* @__PURE__ */ new Set([
+	"png",
+	"jpg",
+	"jpeg",
+	"gif",
+	"webp",
+	"bmp",
+	"ico",
+	"avif",
+	"svg"
+]);
+var VIDEO_EXT = /* @__PURE__ */ new Set([
+	"mp4",
+	"mov",
+	"webm",
+	"m4v",
+	"ogv"
+]);
+var AUDIO_EXT = /* @__PURE__ */ new Set([
+	"mp3",
+	"wav",
+	"ogg",
+	"oga",
+	"flac",
+	"m4a",
+	"aac"
+]);
+var ARCHIVE_EXT = /* @__PURE__ */ new Set([
+	"zip",
+	"tar",
+	"gz",
+	"tgz",
+	"bz2",
+	"xz",
+	"7z",
+	"rar"
+]);
+var LANGUAGE_BY_EXT = {
+	py: "python",
+	ipy: "python",
+	js: "javascript",
+	jsx: "javascript",
+	ts: "typescript",
+	tsx: "typescript",
+	go: "go",
+	rs: "rust",
+	java: "java",
+	c: "c",
+	h: "c",
+	cpp: "cpp",
+	cc: "cpp",
+	hpp: "cpp",
+	cs: "csharp",
+	rb: "ruby",
+	php: "php",
+	swift: "swift",
+	kt: "kotlin",
+	scala: "scala",
+	r: "r",
+	jl: "julia",
+	sh: "shell",
+	bash: "shell",
+	zsh: "shell",
+	fish: "shell",
+	ps1: "powershell",
+	sql: "sql",
+	json: "json",
+	jsonl: "json",
+	yaml: "yaml",
+	yml: "yaml",
+	toml: "ini",
+	ini: "ini",
+	cfg: "ini",
+	conf: "ini",
+	env: "ini",
+	xml: "xml",
+	html: "html",
+	htm: "html",
+	css: "css",
+	scss: "scss",
+	md: "markdown",
+	markdown: "markdown",
+	tex: "plaintext",
+	txt: "plaintext",
+	log: "plaintext",
+	gitignore: "plaintext"
+};
+var LANGUAGE_BY_FILENAME = {
+	dockerfile: "dockerfile",
+	makefile: "plaintext"
+};
+function getMonacoLanguage(node) {
+	const ext = getFileExtension(node.name);
+	if (ext && LANGUAGE_BY_EXT[ext]) return LANGUAGE_BY_EXT[ext];
+	return LANGUAGE_BY_FILENAME[node.name.toLowerCase()] ?? "plaintext";
+}
+function isCodeFile(node) {
+	const ext = getFileExtension(node.name);
+	return ext !== null && ext in LANGUAGE_BY_EXT || node.name.toLowerCase() in LANGUAGE_BY_FILENAME;
+}
+function kindFromContentType(ct) {
+	if (ct === "application/pdf") return "pdf";
+	if (ct === "application/x-ipynb+json") return "notebook";
+	if (ct === "text/csv") return "csv";
+	if (ct.startsWith("image/")) return "image";
+	if (ct.startsWith("video/")) return "video";
+	if (ct.startsWith("audio/")) return "audio";
+	if (ct.startsWith("text/") || ct === "application/json" || ct === "application/xml") return "code";
+	return null;
+}
+function kindFromExtension(ext) {
+	if (ext === "pdf") return "pdf";
+	if (ext === "ipynb") return "notebook";
+	if (ext === "csv" || ext === "tsv") return "csv";
+	if (IMAGE_EXT.has(ext)) return "image";
+	if (VIDEO_EXT.has(ext)) return "video";
+	if (AUDIO_EXT.has(ext)) return "audio";
+	if (ARCHIVE_EXT.has(ext)) return "archive";
+	if (ext in LANGUAGE_BY_EXT) return "code";
+	return null;
+}
+/** Content type wins when present; extension is the fallback. */
+function getPreviewKind(node) {
+	if (node.type !== "file") return "unsupported";
+	const ct = (node.contentType ?? "").split(";")[0]?.toLowerCase().trim() ?? "";
+	const ext = getFileExtension(node.name);
+	const ctKind = kindFromContentType(ct);
+	const extKind = ext !== null ? kindFromExtension(ext) : null;
+	if (ctKind === "code" && (extKind === "csv" || extKind === "notebook")) return extKind;
+	return ctKind ?? extKind ?? (isCodeFile(node) ? "code" : "unsupported");
+}
+function canPreview(node) {
+	const kind = getPreviewKind(node);
+	return kind !== "unsupported" && kind !== "archive";
+}
+//#endregion
+export { CODE_PREVIEW_MAX_BYTES, CODE_PREVIEW_MAX_LINES, PDF_PREVIEW_MAX_BYTES, PREVIEW_URL_EXPIRES_IN, TABULAR_PREVIEW_MAX_BYTES, canPreview, getFileExtension, getMonacoLanguage, getPreviewKind };