@parallelworks/ui 0.21.1 → 0.22.0

package/dist/components/Provider.d.ts

@@ -133,6 +133,7 @@ export interface UIStrings {
             errorTitle: string;
             previewError: string;
             tooLarge: string;
+            tooLargeSize: (size: string) => string;
             downloadInstead: string;
             archiveTitle: string;
             archiveMessage: string;

package/dist/components/Provider.js

@@ -137,6 +137,7 @@ var DEFAULTS = {
 				errorTitle: "Couldn't load preview",
 				previewError: "This file couldn't be previewed in your browser.",
 				tooLarge: "This file is too large to preview in the browser.",
+				tooLargeSize: (size) => `This file is ${size}, too large to preview in the browser.`,
 				downloadInstead: "Download instead",
 				archiveTitle: "Can't preview archives",
 				archiveMessage: "Archive files can't be previewed in the browser. Download the file to view its contents.",

package/dist/file-explorer/FileExplorer.js

@@ -187,6 +187,40 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const [accessDrawerOpen, setAccessDrawerOpen] = useState(false);
 	const [connectionIssuesMessage, updateConnectionIssuesMessage] = useState(/* @__PURE__ */ new Map());
 	const [hasCorsIssue, setHasCorsIssue] = useState(/* @__PURE__ */ new Map());
+	const storageRoots = useMemo(() => {
+		const roots = /* @__PURE__ */ new Map();
+		for (const node of rootNodes) {
+			const candidates = node.root ? [node] : parentToChildrenMap[node.path] ?? [];
+			for (const root of candidates) if (root.root && root.storageId) roots.set(root.storageId, root.path);
+		}
+		return roots;
+	}, [rootNodes, parentToChildrenMap]);
+	const seenStorageRootsRef = useRef(storageRoots);
+	const forgetStorages = useEffectEvent((removed) => {
+		const isUnder = (path) => removed.some(([, root]) => path !== root && path.startsWith(root));
+		const isWithin = (path) => removed.some(([, root]) => path.startsWith(root));
+		for (const path of [...fetchesInFlightRef.current.keys()]) if (isWithin(path)) fetchesInFlightRef.current.delete(path);
+		setListings((prev) => removed.reduce((next, [, root]) => clearListingsUnder(next, root), prev));
+		setLoadingPaths((prev) => new Set([...prev].filter((path) => !isWithin(path))));
+		setExpandedPaths((prev) => new Set([...prev].filter((path) => !isUnder(path))));
+		const withoutRemoved = (prev) => {
+			const next = new Map(prev);
+			for (const [id] of removed) next.delete(id);
+			return next;
+		};
+		updateConnectionIssuesMessage(withoutRemoved);
+		setHasCorsIssue(withoutRemoved);
+		const selectedRoot = removed.find(([, root]) => normalizedSelectedPath.startsWith(root))?.[1];
+		if (selectedRoot) {
+			const parent = getParentPath(selectedRoot);
+			setSelectedPath(treeMap[parent] ? parent : "");
+		}
+	});
+	useEffect(() => {
+		const removed = [...seenStorageRootsRef.current].filter(([id]) => !storageRoots.has(id));
+		seenStorageRootsRef.current = storageRoots;
+		if (removed.length > 0) forgetStorages(removed);
+	}, [storageRoots]);
 	const [uploadModalOpen, setUploadModalOpen] = useState(false);
 	const [createFolderTarget, setCreateFolderTarget] = useState(null);
 	const [pendingUpload, setPendingUpload] = useState(null);

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

@@ -8,7 +8,7 @@ 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 { getMonacoLanguage, previewLimitsFor } from "./previewType.js";
 import { CorsIssuePreview } from "../helpers.js";
 import { joinSource, parseDelimited, parseNotebook, stripAnsi } from "./parse.js";
 import { countLines } from "./readCappedBytes.js";
@@ -69,7 +69,8 @@ function FilePreviewViewer({ node, kind, url, urlLoading, urlError, zoom = 100,
 			node,
 			url,
 			zoom,
-			onDownload
+			onDownload,
+			storage
 		});
 		case "video": return /* @__PURE__ */ jsx(VideoView, {
 			node,
@@ -112,8 +113,12 @@ function FilePreviewViewer({ node, kind, url, urlLoading, urlError, zoom = 100,
 		default: return null;
 	}
 }
-function ImageView({ node, url, zoom, onDownload }) {
+function ImageView({ node, url, zoom, onDownload, storage }) {
 	const [hasError, setHasError] = useState(false);
+	if (typeof node.size === "number" && node.size > previewLimitsFor(storage).imageBytes) return /* @__PURE__ */ jsx(TooLargeInline, {
+		size: node.size,
+		onDownload
+	});
 	if (hasError) return /* @__PURE__ */ jsx(PreviewError, { onDownload });
 	const fit = zoom === 100;
 	return /* @__PURE__ */ jsx("div", {
@@ -191,7 +196,7 @@ function PreviewError({ onDownload }) {
 }
 function PdfView({ node, url, onDownload, storage, onCorsRetry }) {
 	const { blobUrl, loading, error, tooLarge, corsError } = useObjectBlobUrl(url, {
-		maxBytes: PDF_PREVIEW_MAX_BYTES,
+		maxBytes: previewLimitsFor(storage).pdfBytes,
 		knownSize: node.size,
 		mimeType: "application/pdf",
 		cacheKey: node.path
@@ -199,6 +204,7 @@ function PdfView({ node, url, onDownload, storage, onCorsRetry }) {
 	return /* @__PURE__ */ jsx(PreviewFetchState, {
 		loading,
 		tooLarge,
+		size: node.size,
 		error,
 		corsError,
 		storage,
@@ -215,9 +221,10 @@ function CodeView({ node, url, onDownload, storage, onCorsRetry }) {
 	const t = useStrings().fileExplorer;
 	const language = getMonacoLanguage(node);
 	const [tail, setTail] = useState(false);
+	const limits = previewLimitsFor(storage);
 	const { text, loading, error, tooLarge, truncated, corsError } = useObjectText(url, {
-		maxBytes: CODE_PREVIEW_MAX_BYTES,
-		maxLines: CODE_PREVIEW_MAX_LINES,
+		maxBytes: limits.codeBytes,
+		maxLines: limits.codeLines,
 		knownSize: node.size,
 		cacheKey: node.path,
 		tail
@@ -262,6 +269,7 @@ function CodeView({ node, url, onDownload, storage, onCorsRetry }) {
 			children: /* @__PURE__ */ jsx(PreviewFetchState, {
 				loading,
 				tooLarge,
+				size: node.size,
 				error,
 				corsError,
 				storage,
@@ -292,15 +300,17 @@ function toFencedCode(text, language) {
 	return `${fence}${language}\n${text}\n${fence}`;
 }
 function CsvView({ node, url, onDownload, storage, onCorsRetry }) {
+	const limits = previewLimitsFor(storage);
 	const { text, loading, error, tooLarge, corsError } = useObjectText(url, {
-		maxBytes: TABULAR_PREVIEW_MAX_BYTES,
-		maxLines: 502,
+		maxBytes: limits.tabularBytes,
+		maxLines: limits.tabularRows + 2,
 		knownSize: node.size,
 		cacheKey: node.path
 	});
 	return /* @__PURE__ */ jsx(PreviewFetchState, {
 		loading,
 		tooLarge,
+		size: node.size,
 		error,
 		corsError,
 		storage,
@@ -308,18 +318,19 @@ function CsvView({ node, url, onDownload, storage, onCorsRetry }) {
 		onDownload,
 		children: /* @__PURE__ */ jsx(CsvTable, {
 			node,
-			text: text ?? ""
+			text: text ?? "",
+			maxRows: limits.tabularRows
 		})
 	});
 }
-function CsvTable({ node, text }) {
+function CsvTable({ node, text, maxRows }) {
 	const t = useStrings().fileExplorer;
 	const delimiter = getFileExtension(node.name) === "tsv" ? "	" : ",";
-	const rows = parseDelimited(text, delimiter, 502);
+	const rows = parseDelimited(text, delimiter, maxRows + 2);
 	const header = rows[0] ?? [];
 	const body = rows.slice(1);
-	const shown = body.slice(0, 500);
-	const truncated = body.length > 500;
+	const shown = body.slice(0, maxRows);
+	const truncated = body.length > maxRows;
 	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)",
@@ -355,13 +366,14 @@ function CsvTable({ node, text }) {
 }
 function NotebookView({ node, url, onDownload, storage, onCorsRetry }) {
 	const { text, loading, error, tooLarge, corsError } = useObjectText(url, {
-		maxBytes: TABULAR_PREVIEW_MAX_BYTES,
+		maxBytes: previewLimitsFor(storage).notebookBytes,
 		knownSize: node.size,
 		cacheKey: node.path
 	});
 	return /* @__PURE__ */ jsx(PreviewFetchState, {
 		loading,
 		tooLarge,
+		size: node.size,
 		error,
 		corsError,
 		storage,
@@ -445,7 +457,7 @@ function PreviewLoading() {
 		children: /* @__PURE__ */ jsx(Loader, { size: 36 })
 	});
 }
-function PreviewFetchState({ loading, tooLarge, error, corsError, storage, onCorsRetry, onDownload, children }) {
+function PreviewFetchState({ loading, tooLarge, size, 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",
@@ -454,7 +466,10 @@ function PreviewFetchState({ loading, tooLarge, error, corsError, storage, onCor
 			onRefresh: onCorsRetry
 		})
 	});
-	if (tooLarge) return /* @__PURE__ */ jsx(TooLargeInline, { onDownload });
+	if (tooLarge) return /* @__PURE__ */ jsx(TooLargeInline, {
+		size,
+		onDownload
+	});
 	if (error) return /* @__PURE__ */ jsx(PreviewError, { onDownload });
 	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
@@ -486,7 +501,7 @@ function NotPreviewable({ icon, title, message, onDownload }) {
 		})
 	});
 }
-function TooLargeInline({ onDownload }) {
+function TooLargeInline({ size, onDownload }) {
 	const t = useStrings().fileExplorer;
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex h-full items-center justify-center p-6",
@@ -494,7 +509,7 @@ function TooLargeInline({ 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: t.preview.tooLarge
+				children: typeof size === "number" ? t.preview.tooLargeSize(formatFileSize(size)) : t.preview.tooLarge
 			}), onDownload && /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				className: "btn btn-info cursor-pointer",

package/dist/file-explorer/FilePreview/previewType.d.ts

@@ -1,4 +1,4 @@
-import type { TreeNode } from '../lib/types.js';
+import type { PreviewLimits, TreeNode, TStorage } from '../lib/types.js';
 import { getFileExtension } from '../lib/utils.js';
 export { getFileExtension };
 export type PreviewKind = 'image' | 'video' | 'audio' | 'pdf' | 'code' | 'csv' | 'notebook' | 'archive' | 'unsupported';
@@ -15,6 +15,8 @@ export declare const CSV_PREVIEW_MAX_ROWS = 500;
 export declare const CODE_PREVIEW_MAX_LINES = 5000;
 /** Fetched into a blob URL to render inline regardless of served content type; falls back to download above this. */
 export declare const PDF_PREVIEW_MAX_BYTES: number;
+export declare const DEFAULT_PREVIEW_LIMITS: PreviewLimits;
+export declare function previewLimitsFor(storage: TStorage | null | undefined): PreviewLimits;
 export declare function getMonacoLanguage(node: TreeNode): string;
 /** Content type wins when present; extension is the fallback. */
 export declare function getPreviewKind(node: TreeNode): PreviewKind;

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

@@ -12,6 +12,21 @@ var TABULAR_PREVIEW_MAX_BYTES = 20971520;
 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 DEFAULT_PREVIEW_LIMITS = {
+	codeBytes: CODE_PREVIEW_MAX_BYTES,
+	codeLines: CODE_PREVIEW_MAX_LINES,
+	tabularBytes: TABULAR_PREVIEW_MAX_BYTES,
+	tabularRows: 500,
+	imageBytes: Number.POSITIVE_INFINITY,
+	pdfBytes: PDF_PREVIEW_MAX_BYTES,
+	notebookBytes: TABULAR_PREVIEW_MAX_BYTES
+};
+function previewLimitsFor(storage) {
+	return {
+		...DEFAULT_PREVIEW_LIMITS,
+		...storage?.previewLimits
+	};
+}
 var IMAGE_EXT = /* @__PURE__ */ new Set([
 	"png",
 	"jpg",
@@ -97,6 +112,8 @@ var LANGUAGE_BY_EXT = {
 	tex: "plaintext",
 	txt: "plaintext",
 	log: "plaintext",
+	out: "plaintext",
+	err: "plaintext",
 	gitignore: "plaintext"
 };
 var LANGUAGE_BY_FILENAME = {
@@ -148,4 +165,4 @@ function canPreview(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 };
+export { CODE_PREVIEW_MAX_BYTES, CODE_PREVIEW_MAX_LINES, DEFAULT_PREVIEW_LIMITS, PDF_PREVIEW_MAX_BYTES, PREVIEW_URL_EXPIRES_IN, TABULAR_PREVIEW_MAX_BYTES, canPreview, getFileExtension, getMonacoLanguage, getPreviewKind, previewLimitsFor };

package/dist/file-explorer/FilePreview/readCappedBytes.d.ts

@@ -19,6 +19,10 @@ export declare function lastLines(text: string, maxLines: number): {
     text: string;
     truncated: boolean;
 };
+/** Range header for reading the start of an object that is larger than `maxBytes`,
+ * one byte past the cap so the read still sees the overflow and cuts on a line, as it
+ * does for an unranged body. The bytes past it never leave the server. */
+export declare function headRangeFor(knownSize: number | undefined, maxBytes: number): string | null;
 /** Range header for reading the last `maxBytes` of an object. A closed range is a
  * CORS-safelisted header value, so it travels without a preflight that a bucket's
  * CORS rules may not answer; the suffix form is not safelisted, and is only reached

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

@@ -145,6 +145,12 @@ function lastLines(text, maxLines) {
 		truncated: false
 	};
 }
+/** Range header for reading the start of an object that is larger than `maxBytes`,
+* one byte past the cap so the read still sees the overflow and cuts on a line, as it
+* does for an unranged body. The bytes past it never leave the server. */
+function headRangeFor(knownSize, maxBytes) {
+	return typeof knownSize === "number" && knownSize > maxBytes + 1 ? `bytes=0-${maxBytes}` : null;
+}
 /** Range header for reading the last `maxBytes` of an object. A closed range is a
 * CORS-safelisted header value, so it travels without a preflight that a bucket's
 * CORS rules may not answer; the suffix form is not safelisted, and is only reached
@@ -193,4 +199,4 @@ async function readTailText(response, maxBytes, maxLines, startsMidObject) {
 	};
 }
 //#endregion
-export { countLines, lastLines, readCappedBytes, readCappedText, readTailText, tailRangeFor, tailWindow };
+export { countLines, headRangeFor, lastLines, readCappedBytes, readCappedText, readTailText, tailRangeFor, tailWindow };

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

@@ -1,6 +1,6 @@
 import { CorsError } from "../lib/errors.js";
 import { fetchPreviewObject, loadPreviewContent, peekPreviewContent } from "./previewCache.js";
-import { readCappedText, readTailText, tailRangeFor, tailWindow } from "./readCappedBytes.js";
+import { headRangeFor, readCappedText, readTailText, tailRangeFor, tailWindow } from "./readCappedBytes.js";
 import { useEffect, useState } from "react";
 //#region src/file-explorer/FilePreview/useObjectText.ts
 var IDLE = {
@@ -18,10 +18,10 @@ function toState(result) {
 	};
 }
 async function readObjectText(signal, { url, cacheKey, maxBytes, maxLines, knownSize, tail }) {
-	const range = tail ? tailRangeFor(knownSize, maxBytes) : null;
+	const range = tail ? tailRangeFor(knownSize, maxBytes) : headRangeFor(knownSize, maxBytes);
 	const response = await fetchPreviewObject(cacheKey, url, signal, range ? { Range: range } : void 0);
 	let startsMidObject = false;
-	if (range) {
+	if (tail && range) {
 		const window = tailWindow(response, maxBytes);
 		if (!window) throw new Error("range request was not honored");
 		startsMidObject = window.startsMidObject;

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

@@ -6,5 +6,5 @@ export { CorsError } from './lib/errors.js';
 export type { FileExplorerDeleteFilesResult, FileExplorerGetFileResult, IFileExplorerClient, IFileExplorerProvider, } from './lib/fileExplorer.js';
 export type { TListPageRequest } from './lib/paging.js';
 export { LIST_PAGE_SIZE } from './lib/paging.js';
-export type { ExplorerObject, TreeNode, TStorage, TStorageObject, } from './lib/types.js';
+export type { ExplorerObject, PreviewLimits, TreeNode, TStorage, TStorageObject, } from './lib/types.js';
 export { attachmentDisposition, collectObjectKeysToDelete, getObjectKeyFromNode, isClientValid, removeLeadingAndTrailingSlashes, } from './lib/utils.js';

package/dist/file-explorer/lib/types.d.ts

@@ -1,4 +1,14 @@
 import type { IFileExplorerClient, IFileExplorerProvider } from './fileExplorer.js';
+/** Above these a file is not fetched for preview; the pane offers a download instead. */
+export type PreviewLimits = {
+    codeBytes: number;
+    codeLines: number;
+    tabularBytes: number;
+    tabularRows: number;
+    imageBytes: number;
+    pdfBytes: number;
+    notebookBytes: number;
+};
 export type TStorage = {
     id: string;
     name: string;
@@ -14,6 +24,7 @@ export type TStorage = {
     canUpload?: boolean | undefined;
     canShare?: boolean | undefined;
     canManageAccess?: boolean | undefined;
+    previewLimits?: Partial<PreviewLimits> | undefined;
 };
 /** A file the host is asked to name or download: its storage, key and name. */
 export interface ExplorerObject {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "description": "React UI components: a theme contract, icons, primitives, lists, forms, a job graph, a code editor, a log viewer, a file explorer and an AI chat, each on its own subpath",
   "license": "Apache-2.0",
   "repository": {
@@ -90,7 +90,7 @@
     "anser": "^2.3.5",
     "classnames": "^2.5.1",
     "fast-deep-equal": "^3.1.3",
-    "framer-motion": "^13.5.0",
+    "framer-motion": "^14.0.0",
     "luxon": "^3.7.2",
     "re-resizable": "^6.11.2",
     "react-animate-height": "^3.2.4",