@parallelworks/ui 0.51.0 → 0.53.0

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

@@ -1,8 +1,8 @@
 import { cx } from "../../cx.js";
 import { ChevronLeftIcon, ChevronRightIcon, CloseIcon, DownloadIcon, FileIcon, LinkIcon, ZoomInIcon, ZoomOutIcon } from "../../icons.js";
 import { usePersistedState, useStrings } from "../../components/Provider.js";
-import { Modal } from "../../components/Modal.js";
 import { IconButton } from "../../components/IconButton.js";
+import { Modal } from "../../components/Modal.js";
 import { formatBytes } from "../../format.js";
 import { SegmentedControl } from "../../components/SegmentedControl.js";
 import { getPreviewKind } from "./previewType.js";
@@ -20,7 +20,7 @@ function isDocumentView(kind) {
 function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigate, onClose, onDownload, onCopyUri }) {
 	const t = useStrings().fileExplorer;
 	const { common } = useStrings();
-	const [style, setStyle] = usePersistedState("fileExplorer.previewStyle", "quicklook");
+	const [style, setStyle] = usePersistedState("fileExplorer.previewStyle", "compact");
 	const [zoom, setZoom] = useState(100);
 	const { url, loading: urlLoading, error: urlError } = usePresignedUrl(node, getPresignedUrl, {
 		enabled: open,
@@ -67,8 +67,8 @@ function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigat
 						value: style,
 						onValueChange: setStyle,
 						options: [{
-							value: "quicklook",
-							label: t.preview.quickLook
+							value: "compact",
+							label: t.preview.compact
 						}, {
 							value: "overlay",
 							label: t.preview.fullWindow

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-blue-500/5" : 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

@@ -1,7 +1,8 @@
 import { FileIcon, FolderIcon } from "../icons.js";
+import { isDev } from "../dev.js";
 import { canPreview } from "./FilePreview/previewType.js";
 import { getNodeIcon } from "./helpers.js";
-import { FileRow } from "./FileRow.js";
+import { FileRow, ROW_HEIGHT_TALL, isTwoLineRow } from "./FileRow.js";
 import { LoadMoreRow } from "./LoadMoreRow.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
@@ -22,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: [
@@ -43,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),
@@ -73,13 +75,43 @@ function Spacer({ height }) {
 /** A nested overflow container stealing the scroll leaves the virtualizer at
 *  scrollTop 0 forever, rendering only the first window. */
 function useNestedScrollerWarning(scrollEl, count) {
-	useEffect(() => {}, [scrollEl, count]);
+	useEffect(() => {
+		if (!isDev() || !scrollEl || count <= 100) return;
+		if (scrollEl.scrollHeight <= scrollEl.clientHeight) console.warn("FileRowsWindow: scrollEl is not scrolling — a nested overflow container likely stole it, so only the first window will ever render.");
+	}, [scrollEl, count]);
+}
+/** Pitch per kind, from the first adjacent same-kind pair: a mixed pair says
+*  nothing about either one. */
+function measurePitches(rows) {
+	const pitches = /* @__PURE__ */ new Map();
+	rows.forEach((row, i) => {
+		const next = rows[i + 1];
+		if (next && next.kind === row.kind && !pitches.has(row.kind)) pitches.set(row.kind, next.top - row.top);
+	});
+	return pitches;
 }
 /** The constants must equal the row *pitch*, not the row's own height —
 *  under border-collapse the shared border sits between rows. A 1px error
 *  compounds to 10,000px across a 10k-row directory. */
 function useRowPitchAudit(scrollEl, nodes, items) {
-	useEffect(() => {}, [
+	useEffect(() => {
+		if (!isDev() || !scrollEl || items.length < 3) return;
+		const rows = [...scrollEl.querySelectorAll("tbody tr")].filter((row) => !row.hasAttribute("aria-hidden")).map((row, i) => {
+			const node = nodes[items[i]?.index ?? -1];
+			return node ? {
+				kind: isTwoLineRow(node) ? "tall" : "short",
+				top: row.getBoundingClientRect().top
+			} : null;
+		}).filter((row) => row !== null);
+		const expected = {
+			short: 45,
+			tall: ROW_HEIGHT_TALL
+		};
+		for (const [kind, measured] of measurePitches(rows)) if (measured > 0 && Math.abs(measured - expected[kind]) > .5) {
+			const name = `ROW_HEIGHT_${kind.toUpperCase()}`;
+			console.warn(`FileRowsWindow: ${name} is ${expected[kind]} but the rendered pitch is ${measured}. Set ${name} = ${measured} in FileRow.tsx, or the scrollbar will not reach the last row.`);
+		}
+	}, [
 		scrollEl,
 		nodes,
 		items

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 {};

package/dist/file-explorer/FileTable.js

@@ -1,4 +1,5 @@
 import { cx } from "../cx.js";
+import { useStrings } from "../components/Provider.js";
 import { Table } from "../components/Table.js";
 import { listTableFixedProps } from "../list/ListTable.js";
 import { fileRowHeight } from "./FileRow.js";
@@ -11,11 +12,12 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 /** 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. */
-function FileTable({ nodes, checkedItems, allSelected, someSelected, onSelectAll, getItems, openMenu, onOpen, onToggleCheck, onPreview, loadMore }) {
+function FileTable({ nodes, checkedItems, allSelected, someSelected, onSelectAll, getItems, openMenu, onOpen, onToggleCheck, onPreview, pathHref, loadMore }) {
 	const [scrollEl, setScrollEl] = useState(null);
 	const [activeIndex, setActiveIndex] = useState(-1);
 	const [theadHeight, setTheadHeight] = useState(0);
 	const rowIdPrefix = useId();
+	const t = useStrings().fileExplorer;
 	useLayoutEffect(() => {
 		const thead = scrollEl?.querySelector("thead");
 		if (thead instanceof HTMLElement) setTheadHeight(thead.offsetHeight);
@@ -137,7 +139,7 @@ function FileTable({ nodes, checkedItems, allSelected, someSelected, onSelectAll
 			wrapperClassName: "overflow-x-auto",
 			tableProps: {
 				role: "grid",
-				"aria-label": "Files",
+				"aria-label": t.chrome.files,
 				"aria-rowcount": loadMore ? -1 : nodes.length + 1,
 				"aria-multiselectable": true,
 				tabIndex: 0,
@@ -163,7 +165,8 @@ function FileTable({ nodes, checkedItems, allSelected, someSelected, onSelectAll
 				openMenu,
 				onOpen: handleOpen,
 				onToggleCheck,
-				onPreview
+				onPreview,
+				pathHref
 			})]
 		})
 	});

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

@@ -13,6 +13,10 @@ interface TreeViewProps {
     onDropToFolder: (folderPath: string, files: FileList | DataTransferItemList) => void;
     onContextMenu: (e: React.MouseEvent, node: TreeNode) => void;
     onPreviewFile: (node: TreeNode) => void;
+    /** The URL of a path; set, each row is a link to its path. */
+    pathHref?: ((path: string) => string) | undefined;
+    /** A plain click on a row's link, which moves to its path on its own. */
+    onFollowLink?: ((node: TreeNode) => void) | undefined;
     /** Directories with pages left to fetch, and how to fetch them. */
     paging?: {
         incompletePaths: ReadonlySet<string>;
@@ -23,5 +27,5 @@ interface TreeViewProps {
 }
 /** The sidebar tree, flattened and windowed. The flat array is the single source
  *  of truth for rendering, arrow keys and ARIA. */
-export declare function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath, loadingPaths, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onPreviewFile, paging, }: TreeViewProps): import("react").JSX.Element;
+export declare function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath, loadingPaths, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onPreviewFile, pathHref, onFollowLink, paging, }: TreeViewProps): import("react").JSX.Element;
 export {};

package/dist/file-explorer/TreeView.js

@@ -1,12 +1,14 @@
 import { cx } from "../cx.js";
 import { ChevronRightIcon, FolderIcon, FolderOpenIcon } from "../icons.js";
+import { isDev } from "../dev.js";
 import { positionKeys } from "../components/keys.js";
 import { useStrings } from "../components/Provider.js";
+import { AppLink, isPlainClick } from "../components/AppLink.js";
 import { Skeleton } from "../components/Skeleton.js";
-import { getParentPath } from "./lib/utils.js";
+import { carriesFiles, getParentPath } from "./lib/utils.js";
 import { canPreview } from "./FilePreview/previewType.js";
 import { getNodeIcon } from "./helpers.js";
-import { findRowIndex, flattenTreeRows, nextFileLimit, stepRow } from "./treeRows.js";
+import { edgeRow, findRowIndex, firstChildRow, flattenTreeRows, nextFileLimit, parentRow, stepRow } from "./treeRows.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -22,8 +24,9 @@ function rowHeight(row) {
 }
 /** The sidebar tree, flattened and windowed. The flat array is the single source
 *  of truth for rendering, arrow keys and ARIA. */
-function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath, loadingPaths, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onPreviewFile, paging }) {
+function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath, loadingPaths, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onPreviewFile, pathHref, onFollowLink, paging }) {
 	const [scrollEl, setScrollEl] = useState(null);
+	const treeLabel = useStrings().fileExplorer.chrome.folders;
 	const [fileLimits, setFileLimits] = useState(() => /* @__PURE__ */ new Map());
 	const incompletePaths = paging?.incompletePaths;
 	const rows = useMemo(() => flattenTreeRows(rootNodes, parentToChildrenMap, expandedPaths, {
@@ -73,11 +76,11 @@ function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath,
 		getItemKey: getRowKey,
 		overscan: 10
 	});
-	const move = useCallback((from, direction) => {
+	const move = useCallback((from, pick) => {
 		const cursorIndex = findRowIndex(rows, cursorRef.current ?? "");
 		const index = cursorIndex >= 0 ? cursorIndex : findRowIndex(rows, from.path);
 		if (index === -1) return;
-		const target = stepRow(rows, index, direction);
+		const target = pick(index);
 		if (!target) return;
 		cursorRef.current = target.node.path;
 		pendingNavRef.current.add(target.node.path);
@@ -110,14 +113,23 @@ function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath,
 			onPreviewFile(node);
 			return;
 		}
-		if (e.key === "ArrowDown") {
+		const target = {
+			ArrowDown: (i) => stepRow(rows, i, 1),
+			ArrowUp: (i) => stepRow(rows, i, -1),
+			ArrowRight: (i) => firstChildRow(rows, i),
+			ArrowLeft: (i) => parentRow(rows, i),
+			Home: () => edgeRow(rows, "first"),
+			End: () => edgeRow(rows, "last")
+		}[e.key];
+		if (target) {
 			e.preventDefault();
-			move(node, 1);
-		} else if (e.key === "ArrowUp") {
-			e.preventDefault();
-			move(node, -1);
+			move(node, target);
 		}
-	}, [move, onPreviewFile]);
+	}, [
+		move,
+		onPreviewFile,
+		rows
+	]);
 	const items = virtualizer.getVirtualItems();
 	useTreePitchAudit(scrollEl, rows, items);
 	const renderRow = (index, top, height) => {
@@ -140,6 +152,8 @@ function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath,
 			}) : /* @__PURE__ */ jsx(TreeRowItem, {
 				row,
 				isSelected: row.node.path === selectedPath,
+				href: pathHref?.(row.node.path),
+				onFollowLink,
 				onToggleExpand,
 				onSelect,
 				onDropToFolder,
@@ -167,6 +181,7 @@ function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath,
 		ref: setScrollEl,
 		className: "overflow-auto flex-1 px-2 py-2",
 		role: "tree",
+		"aria-label": treeLabel,
 		onDragOver: (e) => e.preventDefault(),
 		onDrop: (e) => e.preventDefault(),
 		children: /* @__PURE__ */ jsx("div", {
@@ -212,7 +227,7 @@ function TreeMoreRow({ depth, hiddenFiles, partial, loading, failed, onReveal })
 			style: { paddingLeft: depth * INDENT_PER_LEVEL + ROW_PAD_FILE },
 			children: loading ? /* @__PURE__ */ jsx("span", { children: t.loadingMore }) : /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: cx("cursor-pointer underline", failed ? "text-red-500" : "theme-link"),
+				className: cx("cursor-pointer underline", failed ? "text-(--theme-error-text)" : "theme-link"),
 				onClick: onReveal,
 				children: label()
 			})
@@ -257,6 +272,7 @@ function useSpringLoadedDrop({ node, dropPath, isDirectory, isExpanded, onToggle
 		dragHandlers: {
 			onDragEnter: (e) => {
 				e.preventDefault();
+				if (!carriesFiles(e.dataTransfer)) return;
 				e.stopPropagation();
 				hoverCount.current += 1;
 				setDragActive(true);
@@ -268,6 +284,7 @@ function useSpringLoadedDrop({ node, dropPath, isDirectory, isExpanded, onToggle
 			onDragOver: (e) => e.preventDefault(),
 			onDragLeave: (e) => {
 				e.preventDefault();
+				if (!carriesFiles(e.dataTransfer)) return;
 				e.stopPropagation();
 				hoverCount.current -= 1;
 				if (hoverCount.current > 0) return;
@@ -275,8 +292,9 @@ function useSpringLoadedDrop({ node, dropPath, isDirectory, isExpanded, onToggle
 				clear();
 			},
 			onDrop: (e) => {
-				e.stopPropagation();
 				e.preventDefault();
+				if (!carriesFiles(e.dataTransfer)) return;
+				e.stopPropagation();
 				hoverCount.current = 0;
 				setDragActive(false);
 				clear();
@@ -285,11 +303,12 @@ function useSpringLoadedDrop({ node, dropPath, isDirectory, isExpanded, onToggle
 		}
 	};
 }
-/** Keys a row handles itself; the arrows that move between rows delegate upward,
-*  where the flat array is. The set is deliberately narrow:
-*  no Home/End, no typeahead, and ArrowLeft/Right only toggle a directory. */
-function dispatchRowKey(e, { node, isDirectory, isExpanded, onSelect, onToggleExpand, onDelegate }) {
+/** Keys a row handles itself: Enter, Space, and Right or Left on a folder that
+*  can open or close. The keys that move between rows delegate upward, where
+*  the flat array is. There is no typeahead. */
+function dispatchRowKey(e, { node, isDirectory, isExpanded, isLink, onSelect, onToggleExpand, onDelegate }) {
 	if (e.key === "Enter") {
+		if (isLink && (e.metaKey || e.ctrlKey || e.shiftKey)) return;
 		e.preventDefault();
 		onSelect(e);
 		return;
@@ -307,7 +326,7 @@ function dispatchRowKey(e, { node, isDirectory, isExpanded, onSelect, onToggleEx
 	}
 	onDelegate(e, node);
 }
-var TreeRowItem = memo(function TreeRowItem({ row, isSelected, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onKeyDown }) {
+var TreeRowItem = memo(function TreeRowItem({ row, isSelected, href, onFollowLink, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onKeyDown }) {
 	const { node, depth, isExpanded } = row;
 	const isDirectory = node.type === "directory";
 	const { dragActive, dragHandlers } = useSpringLoadedDrop({
@@ -323,47 +342,75 @@ var TreeRowItem = memo(function TreeRowItem({ row, isSelected, onToggleExpand, o
 		onSelect(node.path, node);
 		if (isDirectory) onToggleExpand(node.path);
 	};
+	const handleLinkClick = (e) => {
+		if (!isPlainClick(e)) return;
+		onFollowLink?.(node);
+		if (isDirectory) onToggleExpand(node.path);
+	};
 	const handleKeyDown = (e) => dispatchRowKey(e, {
 		node,
 		isDirectory,
 		isExpanded,
+		isLink: !!href,
 		onSelect: handleSelect,
 		onToggleExpand,
 		onDelegate: onKeyDown
 	});
 	const customIcon = getNodeIcon(node);
 	const label = isDirectory && node.storageId && node.displayName ? node.displayName : node.name;
+	const tabIndex = isSelected ? 0 : -1;
+	const itemProps = {
+		className: cx("group relative flex items-center gap-1.5 pr-2 py-1 rounded-md cursor-pointer", "transition-colors duration-150", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--theme-link)", isSelected ? "bg-(--theme-accent)/15 font-medium" : dragActive ? "theme-hover" : "hover:theme-hover"),
+		style: indentStyle(depth, isDirectory),
+		onContextMenu: (e) => onContextMenu(e, node),
+		"aria-level": depth + 1,
+		"aria-posinset": row.posInSet,
+		"aria-setsize": row.setSize,
+		"aria-selected": isSelected,
+		...isDirectory && { "aria-expanded": isExpanded },
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RowIcons, {
+			isDirectory,
+			isExpanded,
+			customIcon
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-sm truncate",
+			children: label
+		})] })
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("relative h-full rounded-md transition-[box-shadow,background-color] duration-150", dragActive && "ring-1 ring-(--theme-link)/60"),
 		...dragHandlers,
-		children: [/* @__PURE__ */ jsx(IndentGuides, { depth }), /* @__PURE__ */ jsxs("div", {
-			className: cx("group relative flex items-center gap-1.5 pr-2 py-1 rounded-md cursor-pointer", "transition-colors duration-150", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--theme-link)", isSelected ? "bg-(--theme-accent)/15 font-medium" : dragActive ? "theme-hover" : "hover:theme-hover"),
-			style: indentStyle(depth, isDirectory),
-			onClick: handleSelect,
-			onKeyDown: handleKeyDown,
-			onContextMenu: (e) => onContextMenu(e, node),
+		children: [/* @__PURE__ */ jsx(IndentGuides, { depth }), href ? /* @__PURE__ */ jsx(AppLink, {
+			...itemProps,
+			role: "treeitem",
+			tabIndex,
+			href,
+			onClick: handleLinkClick,
+			onKeyDown: handleKeyDown
+		}) : /* @__PURE__ */ jsx("div", {
+			...itemProps,
 			role: "treeitem",
-			"aria-level": depth + 1,
-			"aria-posinset": row.posInSet,
-			"aria-setsize": row.setSize,
-			"aria-selected": isSelected,
-			...isDirectory && { "aria-expanded": isExpanded },
-			tabIndex: isSelected ? 0 : -1,
-			children: [/* @__PURE__ */ jsx(RowIcons, {
-				isDirectory,
-				isExpanded,
-				customIcon
-			}), /* @__PURE__ */ jsx("span", {
-				className: "text-sm truncate",
-				children: label
-			})]
+			tabIndex,
+			onClick: handleSelect,
+			onKeyDown: handleKeyDown
 		})]
 	});
 });
 /** The height constants must equal the rendered pitch, or the scrollbar
 *  drifts from the content. Reports the measured value to use. */
 function useTreePitchAudit(scrollEl, rows, items) {
-	useEffect(() => {}, [
+	useEffect(() => {
+		if (!isDev() || !scrollEl || items.length < 2) return;
+		for (const item of items) {
+			const row = rows[item.index];
+			const el = scrollEl.querySelector(`[data-index="${item.index}"]`);
+			if (row?.kind !== "node" || !(el instanceof HTMLElement)) continue;
+			const inner = el.firstElementChild?.lastElementChild;
+			const measured = inner ? inner.getBoundingClientRect().height : 0;
+			if (measured > 30.5) console.warn(`TreeView: TREE_ROW_HEIGHT is 30 but a row's content measures ${measured}. Set TREE_ROW_HEIGHT = ${Math.ceil(measured)} in TreeView.tsx.`);
+			return;
+		}
+	}, [
 		scrollEl,
 		rows,
 		items

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

@@ -19,6 +19,7 @@ declare function CorsIssuePreview({ selectedStorage, onRefresh, }: {
     selectedStorage: TStorage | null;
     onRefresh?: CorsAwareRefresh | undefined;
 }): JSX.Element;
+declare function CorsPropagatingPreview(): JSX.Element;
 declare function NoDataAvailablePreview({ selectedStorage, error, onRefresh, connectionIssueMessage, className, canWrite, }: {
     selectedStorage: TStorage | null;
     error?: Error | null;
@@ -39,4 +40,4 @@ interface IShareFileButtonProps {
     onShare: (node: TreeNode) => Promise<void>;
 }
 declare function ShareFileButton({ node, onShare }: IShareFileButtonProps): JSX.Element;
-export { CorsIssuePreview, DragDropZone, getNodeIcon, NoDataAvailablePreview, NoFileSelectedPreview, NotFoundPreview, renderUploadNodes, ShareFileButton, SIDEBAR_WIDTH_DEFAULT, SIDEBAR_WIDTH_STORAGE_KEY, SkeletonPreview, };
+export { CorsIssuePreview, CorsPropagatingPreview, DragDropZone, getNodeIcon, NoDataAvailablePreview, NoFileSelectedPreview, NotFoundPreview, renderUploadNodes, ShareFileButton, SIDEBAR_WIDTH_DEFAULT, SIDEBAR_WIDTH_STORAGE_KEY, SkeletonPreview, };