@parallelworks/ui 0.52.0 → 0.53.0

package/dist/editor/themes.js

@@ -54,8 +54,13 @@ function editorTheme(style, mode) {
 			"editor.lineHighlightBackground": c("--theme-hover"),
 			"editorLineNumber.foreground": c("--theme-placeholder"),
 			"editorLineNumber.activeForeground": c("--theme-muted-text-color"),
-			"editor.selectionBackground": c("--theme-accent-subtle"),
-			"editor.inactiveSelectionBackground": c("--theme-hover")
+			...mode === "dark" ? {
+				"editor.selectionBackground": `${c("--theme-accent")}66`,
+				"editor.inactiveSelectionBackground": `${c("--theme-accent")}40`
+			} : {
+				"editor.selectionBackground": c("--theme-accent-subtle"),
+				"editor.inactiveSelectionBackground": c("--theme-hover")
+			}
 		}
 	};
 }

package/dist/editor/workers.d.ts

@@ -1,7 +1,7 @@
 /**
- * Points window.MonacoEnvironment at the bundled workers. Idempotent, and a
- * host that already configured its own MonacoEnvironment wins — the editor
- * calls this on first load only when nothing is configured.
+ * Points window.MonacoEnvironment at the bundled workers and those a host added with
+ * `addEditorLanguages`. Idempotent, and a host that already configured its own
+ * MonacoEnvironment wins — the editor calls this on first load only when nothing is configured.
  */
 export declare function setupMonacoWorkers(): void;
 /**

package/dist/editor/workers.js

@@ -1,20 +1,24 @@
+import { hostEditorWorker } from "./languages.js";
 //#region src/editor/workers.ts
 var monacoEnvironment = { getWorker(_moduleId, label) {
+	const host = hostEditorWorker(label);
+	if (host) return host();
 	if (label === "json") return new Worker(new URL(
 		/* @vite-ignore */
 		new URL("../assets/json.worker-BKkHJbNB.js", import.meta.url).href,
 		"" + import.meta.url
 	), { type: "module" });
-	return new Worker(new URL(
+	if (label === "editorWorkerService") return new Worker(new URL(
 		/* @vite-ignore */
 		new URL("../assets/editor.worker-Cc3TfJ_-.js", import.meta.url).href,
 		"" + import.meta.url
 	), { type: "module" });
+	throw new Error(`The editor has no worker for Monaco's "${label}" service: pass one to addEditorLanguages.`);
 } };
 /**
-* Points window.MonacoEnvironment at the bundled workers. Idempotent, and a
-* host that already configured its own MonacoEnvironment wins — the editor
-* calls this on first load only when nothing is configured.
+* Points window.MonacoEnvironment at the bundled workers and those a host added with
+* `addEditorLanguages`. Idempotent, and a host that already configured its own
+* MonacoEnvironment wins — the editor calls this on first load only when nothing is configured.
 */
 function setupMonacoWorkers() {
 	if (window.MonacoEnvironment) return;

package/dist/editor/yamlLanguage.js

@@ -1,6 +1,6 @@
 import { createYamlWorker } from "./workers.js";
 import { onYamlSchemas } from "./yaml.js";
-import * as monaco from "monaco-editor";
+import * as monaco from "monaco-editor/editor/editor.api";
 //#region src/editor/yamlLanguage.ts
 var LANGUAGE_ID = "yaml";
 var MARKER_OWNER = "yaml";
@@ -186,41 +186,59 @@ function answerServer(method, params) {
 	return null;
 }
 function startYamlLanguage() {
-	const worker = createYamlWorker();
-	worker.postMessage({});
-	const connection = new WorkerConnection(worker, answerServer);
+	let server;
+	let schemas = [];
 	const open = /* @__PURE__ */ new Map();
-	const ready = connection.request("initialize", {
-		processId: null,
-		rootUri: null,
-		capabilities: {
-			workspace: { configuration: true },
-			textDocument: {
-				synchronization: {},
-				completion: { completionItem: {
-					snippetSupport: true,
-					insertReplaceSupport: true,
-					documentationFormat: ["markdown", "plaintext"]
-				} },
-				hover: { contentFormat: ["markdown", "plaintext"] },
-				publishDiagnostics: {}
-			}
-		}
-	}).then(() => {
-		connection.notify("initialized", {});
-		connection.notify("workspace/didChangeConfiguration", { settings: null });
-	});
-	onYamlSchemas((schemas) => {
-		ready.then(() => connection.notify("json/schemaAssociations", [schemas]));
-	});
-	connection.onNotification("textDocument/publishDiagnostics", (params) => {
-		const { uri, diagnostics } = params;
-		const model = open.get(uri);
-		if (model && !model.isDisposed()) monaco.editor.setModelMarkers(model, MARKER_OWNER, diagnostics.map(toMarker));
+	function connect() {
+		if (server) return server;
+		const worker = createYamlWorker();
+		worker.postMessage({});
+		const connection = new WorkerConnection(worker, answerServer);
+		connection.onNotification("textDocument/publishDiagnostics", (params) => {
+			const { uri, diagnostics } = params;
+			const model = open.get(uri);
+			if (model && !model.isDisposed()) monaco.editor.setModelMarkers(model, MARKER_OWNER, diagnostics.map(toMarker));
+		});
+		server = {
+			connection,
+			ready: connection.request("initialize", {
+				processId: null,
+				rootUri: null,
+				capabilities: {
+					workspace: { configuration: true },
+					textDocument: {
+						synchronization: {},
+						completion: { completionItem: {
+							snippetSupport: true,
+							insertReplaceSupport: true,
+							documentationFormat: ["markdown", "plaintext"]
+						} },
+						hover: { contentFormat: ["markdown", "plaintext"] },
+						publishDiagnostics: {}
+					}
+				}
+			}).then(() => {
+				connection.notify("initialized", {});
+				connection.notify("workspace/didChangeConfiguration", { settings: null });
+				sendSchemas();
+			})
+		};
+		return server;
+	}
+	function notify(method, params) {
+		const { connection, ready } = connect();
+		ready.then(() => connection.notify(method, params));
+	}
+	function sendSchemas() {
+		server?.connection.notify("json/schemaAssociations", [schemas]);
+	}
+	onYamlSchemas((added) => {
+		schemas = added;
+		server?.ready.then(sendSchemas);
 	});
 	function close(uri, model) {
 		open.delete(uri);
-		ready.then(() => connection.notify("textDocument/didClose", { textDocument: { uri } }));
+		notify("textDocument/didClose", { textDocument: { uri } });
 		if (!model.isDisposed()) monaco.editor.setModelMarkers(model, MARKER_OWNER, []);
 	}
 	function track(model) {
@@ -229,26 +247,24 @@ function startYamlLanguage() {
 			const isYaml = model.getLanguageId() === LANGUAGE_ID;
 			if (isYaml && !open.has(uri)) {
 				open.set(uri, model);
-				const textDocument = {
+				notify("textDocument/didOpen", { textDocument: {
 					uri,
 					languageId: LANGUAGE_ID,
 					version: model.getVersionId(),
 					text: model.getValue()
-				};
-				ready.then(() => connection.notify("textDocument/didOpen", { textDocument }));
+				} });
 			} else if (!isYaml && open.has(uri)) close(uri, model);
 		};
 		model.onDidChangeLanguage(sync);
 		model.onDidChangeContent(() => {
 			if (!open.has(uri)) return;
-			const params = {
+			notify("textDocument/didChange", {
 				textDocument: {
 					uri,
 					version: model.getVersionId()
 				},
 				contentChanges: [{ text: model.getValue() }]
-			};
-			ready.then(() => connection.notify("textDocument/didChange", params));
+			});
 		});
 		model.onWillDispose(() => {
 			if (open.get(uri) === model) close(uri, model);
@@ -258,6 +274,7 @@ function startYamlLanguage() {
 	for (const model of monaco.editor.getModels()) track(model);
 	monaco.editor.onDidCreateModel(track);
 	async function request(method, model, params, token) {
+		const { connection, ready } = connect();
 		await ready;
 		return connection.request(method, {
 			textDocument: { uri: model.uri.toString() },

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

@@ -2,7 +2,22 @@ import { type ReactNode } from 'react';
 import { type RowAction } from '../list/index.js';
 import type { IFileExplorerClient, IFileExplorerProvider } from './lib/fileExplorer.js';
 import type { ExplorerObject, TreeNode, TStorage } from './lib/types.js';
-interface IFileExplorerProps {
+/** How the explorer moves between folders and files. */
+type ExplorerNavigation = {
+    /** The URL of a path, for a host that keeps the path in its URL. Rows, the
+     * tree, the trail and each row menu's "Open folder" are then links through
+     * the host's router (`useLink`), so a path opens in a new tab, shows its
+     * URL and can be copied, and back and forward move between paths. */
+    pathHref: (path: string) => string;
+    /** Moves to a path without a link: from the keyboard, a delete, an upload.
+     * Absent, the explorer goes to `pathHref(path)` through the provider's
+     * `navigation.goTo`. */
+    onPathChange?: ((path: string) => void) | undefined;
+} | {
+    pathHref?: undefined;
+    onPathChange: (path: string) => void;
+};
+type IFileExplorerProps = ExplorerNavigation & {
     storages: TStorage[];
     /** Resolves the storage's injected provider pair; the host owns caching. */
     getProviderAndClient: (storage: TStorage) => Promise<{
@@ -21,7 +36,6 @@ interface IFileExplorerProps {
     }[] | undefined;
     groupsLoading?: boolean;
     selectedPath: string;
-    onPathChange: (path: string) => void;
     /** Renders only the tree, for a host that embeds it as a navigator and owns
      * the pane beside it (the notebooks page puts its editor there). The host
      * also owns the width, so the tree fills its container instead of carrying
@@ -48,6 +62,6 @@ interface IFileExplorerProps {
     extraRowActions?: ((node: TreeNode, storage: TStorage | undefined) => RowAction[]) | undefined;
     /** Host content for the selected folder's header, before its badges. */
     headerAccessory?: ((node: TreeNode, storage: TStorage | undefined) => ReactNode) | undefined;
-}
-export default function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHierarchy, groups, groupsLoading, selectedPath, onPathChange, getProviderAndClient, treeOnly, initialExpandedPaths, onExpandedPathsChange, objectUris, downloadCommand, extraRowActions, headerAccessory, }: IFileExplorerProps): import("react").JSX.Element;
+};
+export default function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHierarchy, groups, groupsLoading, selectedPath, onPathChange, pathHref, getProviderAndClient, treeOnly, initialExpandedPaths, onExpandedPathsChange, objectUris, downloadCommand, extraRowActions, headerAccessory, }: IFileExplorerProps): import("react").JSX.Element;
 export {};

package/dist/file-explorer/FileExplorer.js

@@ -7,7 +7,8 @@ import { Loader } from "../components/Loader.js";
 import { toast } from "../components/Toast.js";
 import { keyedByContent } from "../components/keys.js";
 import { Tooltip } from "../components/Tooltip.js";
-import { usePersistedState, useSlots, useStrings } from "../components/Provider.js";
+import { useNavigation, usePersistedState, useSlots, useStrings } from "../components/Provider.js";
+import { AppLink } from "../components/AppLink.js";
 import { useCopy } from "../components/useCopy.js";
 import { Button } from "../components/Button.js";
 import { Callout } from "../components/Callout.js";
@@ -67,6 +68,13 @@ function UriCard({ value }) {
 		]
 	});
 }
+var breadcrumbClass = "max-w-[16rem] cursor-pointer truncate text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)";
+/** `href` resolved against the page, as the browser's "Copy link" gives it. */
+function absoluteUrl(href) {
+	const url = safeUrl(href);
+	if (!url || typeof window === "undefined") return url;
+	return new URL(url, window.location.href).href;
+}
 var MAX_UPLOAD_SIZE = 85899345920;
 function isUploadSizeExceeded(size) {
 	return size > MAX_UPLOAD_SIZE;
@@ -110,12 +118,13 @@ function TreeFrame({ treeOnly, sidebarWidth, onWidthChange, children }) {
 		children: [children, /* @__PURE__ */ jsx("div", { ...splitter.separatorProps })]
 	});
 }
-function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHierarchy = false, groups = [], groupsLoading = false, selectedPath, onPathChange, getProviderAndClient, treeOnly = false, initialExpandedPaths, onExpandedPathsChange, objectUris, downloadCommand, extraRowActions, headerAccessory }) {
+function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHierarchy = false, groups = [], groupsLoading = false, selectedPath, onPathChange, pathHref, getProviderAndClient, treeOnly = false, initialExpandedPaths, onExpandedPathsChange, objectUris, downloadCommand, extraRowActions, headerAccessory }) {
 	const copySubmenu = useCopySubmenu();
 	const t = useStrings().fileExplorer;
 	const { common } = useStrings();
 	const { copy } = useCopy();
 	const slots = useSlots();
+	const { goTo } = useNavigation();
 	const fileExplorerContext = useFileExplorer();
 	const [listings, setListings] = useState(() => /* @__PURE__ */ new Map());
 	const fetchesInFlightRef = useRef(/* @__PURE__ */ new Map());
@@ -146,7 +155,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		if (treeMap[selectedPath]) return selectedPath;
 		return `${selectedPath}/`;
 	}, [selectedPath, treeMap]);
-	const setSelectedPath = onPathChange;
+	const setSelectedPath = (path) => onPathChange ? onPathChange(path) : pathHref && goTo(pathHref(path));
 	const [expandedPaths, setExpandedPaths] = useState(() => /* @__PURE__ */ new Set(["", ...initialExpandedPaths ?? []]));
 	const onExpandedPathsChangeRef = useRef(onExpandedPathsChange);
 	onExpandedPathsChangeRef.current = onExpandedPathsChange;
@@ -161,10 +170,12 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		if (selectedNode?.type === "directory" && selectedNode.storageId) fetchNodeChildren(selectedNode, { replace: true });
 	}, [refreshKey, selectedNode]);
 	const [checkedItems, setCheckedItems] = useState(/* @__PURE__ */ new Set());
+	const [detailTab, setDetailTab] = useState("details");
 	const [checkedItemsPath, setCheckedItemsPath] = useState(selectedPath);
 	if (checkedItemsPath !== selectedPath) {
 		setCheckedItemsPath(selectedPath);
 		setCheckedItems(/* @__PURE__ */ new Set());
+		setDetailTab("details");
 	}
 	const selectedNodeChildren = useMemo(() => selectedNode ? getNodeChildren(parentToChildrenMap, selectedNode.path) : [], [parentToChildrenMap, selectedNode]);
 	const findStorage = (storageId) => storages.find((s) => s.id === storageId);
@@ -244,7 +255,6 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const folderInputRef = useRef(null);
 	const [deleteModalOpen, setDeleteModalOpen] = useState(false);
 	const [pendingDelete, setPendingDelete] = useState(null);
-	const [detailTab, setDetailTab] = useState("details");
 	useEffect(() => clearPreviewCache, []);
 	const { openMenu, contextMenu } = useContextMenu();
 	const [sidebarWidth, setSidebarWidth] = usePersistedState(SIDEBAR_WIDTH_STORAGE_KEY, 300);
@@ -568,6 +578,9 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const closePreview = () => {
 		setPreviewOpen(false);
 	};
+	const openFromTree = (node) => {
+		if (treeOnly && node.type === "file") openPreview(node);
+	};
 	const openUserNode = (node) => {
 		handleSelectTreeItem(node.path, node);
 		if (!expandedPaths.has(node.path)) handleToggleExpand(node.path);
@@ -651,9 +664,16 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			destructive: true,
 			onClick: () => deleteNode(node)
 		});
-		const lead = [{
+		const open = {
 			label: isFile ? t.preview.viewDetails : t.preview.openFolder,
-			icon: isFile ? /* @__PURE__ */ jsx(FileTextIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {}),
+			icon: isFile ? /* @__PURE__ */ jsx(FileTextIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {})
+		};
+		const href = pathHref?.(node.path);
+		const lead = [href ? {
+			...open,
+			href
+		} : {
+			...open,
 			onClick: () => handleSelectTreeItem(node.path, node)
 		}];
 		const uriExtras = uris.map((value) => ({
@@ -661,6 +681,12 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			value,
 			icon: /* @__PURE__ */ jsx(LinkIcon, {})
 		}));
+		const pageUrl = absoluteUrl(href);
+		if (pageUrl) uriExtras.unshift({
+			label: t.preview.link,
+			value: pageUrl,
+			icon: /* @__PURE__ */ jsx(LinkIcon, {})
+		});
 		return assembleRowMenu({
 			lead,
 			actions,
@@ -705,10 +731,14 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 							"aria-current": "location",
 							className: "truncate font-semibold text-(--theme-app)",
 							children: label
+						}) : pathHref ? /* @__PURE__ */ jsx(AppLink, {
+							href: pathHref(node.path),
+							className: breadcrumbClass,
+							children: label
 						}) : /* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: () => handleSelectTreeItem(node.path, node),
-							className: "max-w-[16rem] cursor-pointer truncate text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)",
+							className: breadcrumbClass,
 							children: label
 						})]
 					}, node.path);
@@ -965,8 +995,10 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 							onToggleExpand: handleToggleExpand,
 							onSelect: (path, node) => {
 								handleSelectTreeItem(path, node);
-								if (treeOnly && node.type === "file") openPreview(node);
+								openFromTree(node);
 							},
+							pathHref,
+							onFollowLink: openFromTree,
 							onDropToFolder: onDropFiles,
 							onContextMenu: openNodeContextMenu,
 							onPreviewFile: openPreview,
@@ -1008,18 +1040,28 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 									children: t.chrome.storages
 								}),
 								/* @__PURE__ */ jsx(ListActionsHeader, { actionCount: 1 }),
-								rootNodes.map((rootNode) => /* @__PURE__ */ jsx(UserRow, {
-									node: rootNode,
-									icon: getNodeIcon(rootNode),
-									storageCount: getNodeChildren(parentToChildrenMap, rootNode.path).length,
-									getItems: () => [{
+								rootNodes.map((rootNode) => {
+									const href = pathHref?.(rootNode.path);
+									const open = {
 										label: t.preview.open,
-										icon: /* @__PURE__ */ jsx(FolderIcon, {}),
-										onClick: () => openUserNode(rootNode)
-									}],
-									openMenu,
-									onOpen: openUserNode
-								}, rootNode.path))
+										icon: /* @__PURE__ */ jsx(FolderIcon, {})
+									};
+									return /* @__PURE__ */ jsx(UserRow, {
+										node: rootNode,
+										icon: getNodeIcon(rootNode),
+										href,
+										storageCount: getNodeChildren(parentToChildrenMap, rootNode.path).length,
+										getItems: () => [href ? {
+											...open,
+											href
+										} : {
+											...open,
+											onClick: () => openUserNode(rootNode)
+										}],
+										openMenu,
+										onOpen: openUserNode
+									}, rootNode.path);
+								})
 							]
 						}), rootNodes.length === 0 && /* @__PURE__ */ jsx(NoDataAvailablePreview, {
 							selectedStorage: null,
@@ -1206,6 +1248,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 								onOpen: (n) => handleSelectTreeItem(n.path, n),
 								onToggleCheck: handleItemCheckbox,
 								onPreview: openPreview,
+								pathHref,
 								loadMore: loadMoreProps
 							}, selectedNode.path) : /* @__PURE__ */ jsxs("div", {
 								className: "h-full flex flex-col",

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

@@ -6,6 +6,7 @@ import { useStrings } from "../../components/Provider.js";
 import { Button } from "../../components/Button.js";
 import Markdown from "../../components/Markdown.js";
 import { formatBytes } from "../../format.js";
+import { Editor } from "../../editor/Editor.js";
 import { getFileExtension } from "../lib/utils.js";
 import { getMonacoLanguage, previewLimitsFor } from "./previewType.js";
 import { CorsIssuePreview } from "../helpers.js";
@@ -14,9 +15,8 @@ import { countLines } from "./readCappedBytes.js";
 import { useObjectBlobUrl } from "./useObjectBlobUrl.js";
 import { useObjectText } from "./useObjectText.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 //#region src/file-explorer/FilePreview/Viewer.tsx
-var CodePreviewEditor = lazy(() => import("./CodePreviewEditor.js"));
 var PREVIEW_MARKDOWN_CONTROLS = {
 	table: { fullscreen: false },
 	mermaid: { fullscreen: false }
@@ -279,12 +279,16 @@ function CodeView({ node, url, onDownload, storage, onCorsRetry }) {
 						controls: PREVIEW_MARKDOWN_CONTROLS,
 						children: text ?? ""
 					})
-				}) : /* @__PURE__ */ jsx(Suspense, {
-					fallback: /* @__PURE__ */ jsx(PreviewLoading, {}),
-					children: /* @__PURE__ */ jsx(CodePreviewEditor, {
-						value: text ?? "",
-						language
-					})
+				}) : /* @__PURE__ */ jsx(Editor, {
+					readOnly: true,
+					value: text ?? "",
+					language,
+					ariaLabel: node.name,
+					className: "!rounded-none !border-0",
+					fontSize: 12,
+					minimap: { enabled: false },
+					overviewRulerLanes: 0,
+					wordWrap: "off"
 				})
 			})
 		})]

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

@@ -16,6 +16,8 @@ interface FileRowProps {
     rowIndex: number;
     /** The keyboard cursor row. Focus stays on the container, so nothing else marks it. */
     active: boolean;
+    /** Makes the row a link to the node. */
+    href?: string | undefined;
     checked: boolean;
     canPreview: boolean;
     getItems: () => MenuEntry[];
@@ -24,13 +26,15 @@ interface FileRowProps {
     onToggleCheck: (node: TreeNode, checked: boolean) => void;
     onPreview: (node: TreeNode) => void;
 }
-export declare function UserRow({ node, icon, storageCount, getItems, openMenu, onOpen, }: {
+export declare function UserRow({ node, icon, href, storageCount, getItems, openMenu, onOpen, }: {
     node: TreeNode;
     icon: ReactNode;
+    /** Makes the row a link to the user. */
+    href?: string | undefined;
     storageCount: number;
     getItems: () => MenuEntry[];
     openMenu: OpenMenu;
     onOpen: (node: TreeNode) => void;
 }): import("react").JSX.Element;
-export declare function FileRow({ node, icon, rowId, rowIndex, active, checked, canPreview, getItems, openMenu, onOpen, onToggleCheck, onPreview, }: FileRowProps): import("react").JSX.Element;
+export declare function FileRow({ node, icon, rowId, rowIndex, active, href, checked, canPreview, getItems, openMenu, onOpen, onToggleCheck, onPreview, }: FileRowProps): import("react").JSX.Element;
 export {};

package/dist/file-explorer/FileRow.js

@@ -2,10 +2,11 @@ import { cx } from "../cx.js";
 import { PreviewIcon } from "../icons.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useStrings } from "../components/Provider.js";
+import { AppLink, isPlainClick } from "../components/AppLink.js";
 import { formatBytes } from "../format.js";
 import { RelativeTime } from "../components/relativeTime.js";
 import { Table } from "../components/Table.js";
-import { RowSelectCheckbox } from "../list/ListTable.js";
+import { RowSelectCheckbox, STRETCHED_LINK } from "../list/ListTable.js";
 import { MoreButton, rowContextMenuProps, useRowMenuActive } from "../list/rowMenu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DateTime } from "luxon";
@@ -20,16 +21,31 @@ function fileRowHeight(node) {
 function isInteractiveTarget(e) {
 	return !!e.target.closest("a,button,input,label");
 }
-function UserRow({ node, icon, storageCount, getItems, openMenu, onOpen }) {
+/** Opens the row on a click its controls don't take. Beside a link, which
+*  covers the row, that is only a click on a gap the link leaves, and a
+*  modified one there asks for a new tab, which only the link can give. */
+function rowClickHandler(onOpen, href) {
+	return (e) => {
+		if (isInteractiveTarget(e) || href && !isPlainClick(e)) return;
+		onOpen();
+	};
+}
+/** A row's name: with an href, the link that covers the row, so the whole row
+*  opens in a new tab, shows its URL and reads as a link. */
+function RowName({ name, href }) {
+	return href ? /* @__PURE__ */ jsx(AppLink, {
+		href,
+		"data-row-link": true,
+		className: STRETCHED_LINK,
+		children: name
+	}) : name;
+}
+function UserRow({ node, icon, href, storageCount, getItems, openMenu, onOpen }) {
 	const t = useStrings().fileExplorer;
 	const { active: menuActive, openMenu: openRowMenu } = useRowMenuActive(openMenu);
-	const handleRowClick = (e) => {
-		if (isInteractiveTarget(e)) return;
-		onOpen(node);
-	};
 	return /* @__PURE__ */ jsxs("tr", {
-		className: cx("group cursor-pointer", menuActive ? "theme-hover" : "hover:theme-hover"),
-		onClick: handleRowClick,
+		className: cx("group cursor-pointer", menuActive ? "theme-hover" : "hover:theme-hover", href && "relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:z-[1]"),
+		onClick: rowClickHandler(() => onOpen(node), href),
 		...rowContextMenuProps(openRowMenu, getItems),
 		children: [
 			/* @__PURE__ */ jsx(Table.Item, {
@@ -41,7 +57,10 @@ function UserRow({ node, icon, storageCount, getItems, openMenu, onOpen }) {
 						children: icon
 					}), /* @__PURE__ */ jsx("span", {
 						className: "truncate text-[13px] font-medium text-(--theme-app)",
-						children: node.displayName || node.name
+						children: /* @__PURE__ */ jsx(RowName, {
+							name: node.displayName || node.name,
+							href
+						})
 					})]
 				})
 			}),
@@ -66,22 +85,18 @@ function UserRow({ node, icon, storageCount, getItems, openMenu, onOpen }) {
 		]
 	});
 }
-function FileRow({ node, icon, rowId, rowIndex, active, checked, canPreview, getItems, openMenu, onOpen, onToggleCheck, onPreview }) {
+function FileRow({ node, icon, rowId, rowIndex, active, href, checked, canPreview, getItems, openMenu, onOpen, onToggleCheck, onPreview }) {
 	const t = useStrings().fileExplorer;
 	const { active: menuActive, openMenu: openRowMenu } = useRowMenuActive(openMenu);
 	const isDir = node.type === "directory";
 	const modifiedDt = node.modified ? DateTime.fromISO(node.modified) : null;
 	const typeLabel = node.root ? node.storageType ?? node.type : node.type;
-	const handleRowClick = (e) => {
-		if (isInteractiveTarget(e)) return;
-		onOpen(node);
-	};
 	return /* @__PURE__ */ jsxs("tr", {
 		id: rowId,
 		"aria-rowindex": rowIndex,
 		"aria-selected": checked,
-		className: cx("group", checked ? "bg-(--theme-accent-subtle)/60" : menuActive ? "theme-hover" : "hover:theme-hover", active && "group-focus-visible/grid:ring-1 group-focus-visible/grid:ring-inset group-focus-visible/grid:ring-(--theme-link)", "cursor-pointer"),
-		onClick: handleRowClick,
+		className: cx("group", checked ? "bg-(--theme-accent-subtle)/60" : menuActive ? "theme-hover" : "hover:theme-hover", active && "group-focus-visible/grid:ring-1 group-focus-visible/grid:ring-inset group-focus-visible/grid:ring-(--theme-link)", "cursor-pointer", href && "relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:z-[1]"),
+		onClick: rowClickHandler(() => onOpen(node), href),
 		style: { height: fileRowHeight(node) },
 		...rowContextMenuProps(openRowMenu, getItems),
 		children: [
@@ -103,7 +118,10 @@ function FileRow({ node, icon, rowId, rowIndex, active, checked, canPreview, get
 							className: "min-w-0",
 							children: [/* @__PURE__ */ jsx("div", {
 								className: "truncate text-[13px] font-medium leading-tight text-(--theme-app)",
-								children: node.displayName || node.name
+								children: /* @__PURE__ */ jsx(RowName, {
+									name: node.displayName || node.name,
+									href
+								})
 							}), isTwoLineRow(node) && /* @__PURE__ */ jsx("div", {
 								className: "truncate text-xs leading-tight text-(--theme-muted-text-color)",
 								children: node.contentType

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

@@ -30,8 +30,9 @@ interface FileRowsWindowProps {
     onOpen: (node: TreeNode) => void;
     onToggleCheck: (node: TreeNode, checked: boolean) => void;
     onPreview: (node: TreeNode) => void;
+    pathHref?: ((path: string) => string) | undefined;
 }
 /** Must stay a single child of `<Table>`: Table re-keys children by traversal
  *  index, so a count that varied with scroll position would remount every row. */
-export declare function FileRowsWindow({ items, padTop, padBottom, nodes, checkedItems, activeIndex, rowIdPrefix, scrollEl, loadMore, getItems, openMenu, onOpen, onToggleCheck, onPreview, }: FileRowsWindowProps): import("react").JSX.Element;
+export declare function FileRowsWindow({ items, padTop, padBottom, nodes, checkedItems, activeIndex, rowIdPrefix, scrollEl, loadMore, getItems, openMenu, onOpen, onToggleCheck, onPreview, pathHref, }: FileRowsWindowProps): import("react").JSX.Element;
 export {};

package/dist/file-explorer/FileRowsWindow.js

@@ -23,7 +23,7 @@ function spacerHeights(items, totalSize, scrollMargin) {
 }
 /** Must stay a single child of `<Table>`: Table re-keys children by traversal
 *  index, so a count that varied with scroll position would remount every row. */
-function FileRowsWindow({ items, padTop, padBottom, nodes, checkedItems, activeIndex, rowIdPrefix, scrollEl, loadMore, getItems, openMenu, onOpen, onToggleCheck, onPreview }) {
+function FileRowsWindow({ items, padTop, padBottom, nodes, checkedItems, activeIndex, rowIdPrefix, scrollEl, loadMore, getItems, openMenu, onOpen, onToggleCheck, onPreview, pathHref }) {
 	useNestedScrollerWarning(scrollEl, nodes.length);
 	useRowPitchAudit(scrollEl, nodes, items);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -44,6 +44,7 @@ function FileRowsWindow({ items, padTop, padBottom, nodes, checkedItems, activeI
 				rowId: `${rowIdPrefix}-${item.index}`,
 				rowIndex: item.index + 2,
 				active: item.index === activeIndex,
+				href: pathHref?.(node.path),
 				node,
 				icon,
 				checked: checkedItems.has(node.path),

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

@@ -13,11 +13,13 @@ interface FileTableProps {
     onOpen: (node: TreeNode) => void;
     onToggleCheck: (node: TreeNode, checked: boolean) => void;
     onPreview: (node: TreeNode) => void;
+    /** The URL of a path; set, each row is a link to its node. */
+    pathHref?: ((path: string) => string) | undefined;
     /** Set when the folder has pages left to fetch. */
     loadMore?: LoadMoreState | undefined;
 }
 /** The file table. Give it a `key` of the folder path: a folder change must reset
  *  the cursor, the scroll offset and the virtualizer's measurements, and a remount
  *  does all three without a synchronising effect. */
-export declare function FileTable({ nodes, checkedItems, allSelected, someSelected, onSelectAll, getItems, openMenu, onOpen, onToggleCheck, onPreview, loadMore, }: FileTableProps): import("react").JSX.Element;
+export declare function FileTable({ nodes, checkedItems, allSelected, someSelected, onSelectAll, getItems, openMenu, onOpen, onToggleCheck, onPreview, pathHref, loadMore, }: FileTableProps): import("react").JSX.Element;
 export {};