@parallelworks/ui 0.50.0 → 0.52.0

package/dist/file-explorer/TreeView.js

@@ -1,12 +1,13 @@
 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 { Skeleton } from "../components/Skeleton.js";
 import { 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";
@@ -24,6 +25,7 @@ function rowHeight(row) {
 *  of truth for rendering, arrow keys and ARIA. */
 function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath, loadingPaths, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onPreviewFile, 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 +75,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 +112,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) => {
@@ -167,6 +178,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 +224,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()
 			})
@@ -285,9 +297,9 @@ 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. */
+/** 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, onSelect, onToggleExpand, onDelegate }) {
 	if (e.key === "Enter") {
 		e.preventDefault();
@@ -363,7 +375,18 @@ var TreeRowItem = memo(function TreeRowItem({ row, isSelected, onToggleExpand, o
 /** 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, };

package/dist/file-explorer/helpers.js

@@ -3,7 +3,7 @@ import { CustomizeIcon, DiskIcon, FileIcon, FileTextIcon, FolderIcon, ImageIcon,
 import { toast } from "../components/Toast.js";
 import { usePersistedState, useProvisionCorsRules, useSlots, useStrings } from "../components/Provider.js";
 import { Button } from "../components/Button.js";
-import Callout from "../components/Callout.js";
+import { Callout } from "../components/Callout.js";
 import { ProgressBar } from "../components/Meter.js";
 import { Skeleton } from "../components/Skeleton.js";
 import { formatBytes } from "../format.js";
@@ -219,20 +219,17 @@ function CorsIssuePreview({ selectedStorage, onRefresh }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col items-center justify-center max-w-lg mx-auto",
 		children: [/* @__PURE__ */ jsxs(Callout, {
-			className: "text-left",
-			type: "info",
+			className: "my-4 text-left",
+			tone: "info",
+			title: t.explanation.title,
 			children: [
-				/* @__PURE__ */ jsx("h4", {
-					className: "font-semibold mb-2",
-					children: t.explanation.title
-				}),
 				/* @__PURE__ */ jsx("p", {
 					className: "mb-2",
 					children: t.explanation.description
 				}),
 				/* @__PURE__ */ jsx("p", { children: t.explanation.action }),
 				/* @__PURE__ */ jsx("p", {
-					className: "mt-2 text-sm italic",
+					className: "mt-2 italic",
 					children: t.explanation.note
 				})
 			]
@@ -264,32 +261,33 @@ function CorsPropagatingPreview() {
 	return /* @__PURE__ */ jsxs("div", {
 		role: "status",
 		"aria-live": "polite",
-		className: "flex flex-col items-center justify-center max-w-md mx-auto px-6 py-8 animate-[fadeInUp_400ms_ease-out]",
+		className: "flex flex-col items-center justify-center max-w-md mx-auto px-6 py-8 motion-safe:animate-[fadeInUp_400ms_ease-out]",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
 				className: "relative w-28 h-28 mb-6 flex items-center justify-center",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: "absolute inline-flex h-full w-full rounded-full bg-blue-400/30 animate-ping",
+						className: "absolute inline-flex h-full w-full rounded-full bg-(--theme-info)/30 motion-safe:animate-ping",
 						style: { animationDuration: "2.4s" }
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "absolute inline-flex h-2/3 w-2/3 rounded-full bg-blue-500/40 animate-ping",
+						className: "absolute inline-flex h-2/3 w-2/3 rounded-full bg-(--theme-info)/40 motion-safe:animate-ping",
 						style: {
 							animationDuration: "2.4s",
 							animationDelay: "0.6s"
 						}
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "absolute inline-flex h-1/3 w-1/3 rounded-full bg-blue-500/60 animate-ping",
+						className: "absolute inline-flex h-1/3 w-1/3 rounded-full bg-(--theme-info)/60 motion-safe:animate-ping",
 						style: {
 							animationDuration: "2.4s",
 							animationDelay: "1.2s"
 						}
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "relative inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 shadow-[0_0_24px_rgba(59,130,246,0.55)]",
-						children: /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-2 w-2 rounded-full bg-white animate-pulse" })
+						className: "relative inline-flex items-center justify-center w-8 h-8 rounded-full bg-(--theme-info) shadow-[0_0_24px_color-mix(in_oklab,var(--theme-info)_55%,transparent)]",
+						children: /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-2 w-2 rounded-full bg-(--theme-panel-bg) motion-safe:animate-pulse" })
 					})
 				]
 			}),
@@ -349,7 +347,7 @@ function PropagationStage({ status, label }) {
 	return /* @__PURE__ */ jsxs("li", {
 		className: "flex flex-col items-center gap-1.5",
 		children: [/* @__PURE__ */ jsxs("span", {
-			className: cx("relative flex items-center justify-center w-6 h-6 rounded-full border transition-colors", status === "done" && "bg-green-500 border-green-500 text-white", status === "active" && "border-blue-500", status === "pending" && "theme-border"),
+			className: cx("relative flex items-center justify-center w-6 h-6 rounded-full border transition-colors", status === "done" && "bg-(--theme-success-solid) border-(--theme-success-solid) text-white", status === "active" && "border-(--theme-info)", status === "pending" && "theme-border"),
 			children: [
 				status === "done" && /* @__PURE__ */ jsx("svg", {
 					viewBox: "0 0 16 16",
@@ -362,7 +360,7 @@ function PropagationStage({ status, label }) {
 					"aria-hidden": "true",
 					children: /* @__PURE__ */ jsx("polyline", { points: "3.5 8.5 6.5 11.5 12.5 5" })
 				}),
-				status === "active" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400/60" }), /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-blue-500" })] }),
+				status === "active" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full motion-safe:animate-ping rounded-full bg-(--theme-info)/60" }), /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-(--theme-info)" })] }),
 				status === "pending" && /* @__PURE__ */ jsx("span", { className: "inline-flex h-1.5 w-1.5 rounded-full theme-muted-text opacity-60" })
 			]
 		}), /* @__PURE__ */ jsx("span", {
@@ -374,7 +372,7 @@ function PropagationStage({ status, label }) {
 function PropagationConnector({ active }) {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: cx("h-px w-8 -mt-5 transition-colors", active ? "bg-blue-500" : "theme-border border-t")
+		className: cx("h-px w-8 -mt-5 transition-colors", active ? "bg-(--theme-info)" : "theme-border border-t")
 	});
 }
 function NoDataAvailablePreview({ selectedStorage, error, onRefresh, connectionIssueMessage = null, className, canWrite = true }) {
@@ -409,8 +407,11 @@ function NoDataAvailablePreview({ selectedStorage, error, onRefresh, connectionI
 			className: "flex flex-col items-center justify-center max-w-md p-8",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "inline-flex items-center justify-center w-14 h-14 rounded-full bg-amber-500/10 mb-4",
-					children: /* @__PURE__ */ jsx(WarningIcon, { className: "h-6 w-6 text-amber-500" })
+					className: "inline-flex items-center justify-center w-14 h-14 rounded-full bg-(--theme-warning-muted) mb-4",
+					children: /* @__PURE__ */ jsx(WarningIcon, {
+						"aria-hidden": "true",
+						className: "h-6 w-6 text-(--theme-warning)"
+					})
 				}),
 				/* @__PURE__ */ jsx("h2", {
 					className: "text-base font-semibold mb-1",
@@ -532,4 +533,4 @@ async function addCorsRules({ provision, strings, csp, type, username, storageNa
 	toast.warning(strings.corsPropagating);
 }
 //#endregion
-export { CorsIssuePreview, DragDropZone, NoDataAvailablePreview, NoFileSelectedPreview, NotFoundPreview, SIDEBAR_WIDTH_STORAGE_KEY, ShareFileButton, SkeletonPreview, getNodeIcon, renderUploadNodes };
+export { CorsIssuePreview, CorsPropagatingPreview, DragDropZone, NoDataAvailablePreview, NoFileSelectedPreview, NotFoundPreview, SIDEBAR_WIDTH_STORAGE_KEY, ShareFileButton, SkeletonPreview, getNodeIcon, renderUploadNodes };

package/dist/file-explorer/toasts.js

@@ -1,8 +1,10 @@
 import { cx } from "../cx.js";
 import { ChevronDownIcon, ChevronUpIcon, CloseIcon, ExpandVerticalIcon, MinimizeIcon, SuccessIcon, UploadIcon, WarningIcon } from "../icons.js";
+import { toneIcon } from "../components/tone.js";
 import { useStrings } from "../components/Provider.js";
 import { Button } from "../components/Button.js";
 import { IconButton } from "../components/IconButton.js";
+import { Callout } from "../components/Callout.js";
 import { ProgressBar } from "../components/Meter.js";
 import { formatBytes, formatTimeLeft } from "../format.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -11,28 +13,34 @@ import { useState } from "react";
 function getSessionStatusInfo(session, queueLength, strings) {
 	switch (session.status) {
 		case "queued": return {
-			icon: /* @__PURE__ */ jsx(UploadIcon, { className: "w-5 h-5 text-blue-600" }),
+			icon: /* @__PURE__ */ jsx(UploadIcon, { className: cx("w-5 h-5", toneIcon.info) }),
 			title: strings.inQueue(session.queueIndex + 1, queueLength),
 			shortTitle: strings.queuedShort(session.queueIndex + 1, queueLength),
-			bgColor: "bg-blue-100"
+			bgColor: "bg-(--theme-info-muted)"
 		};
 		case "uploading": return {
-			icon: /* @__PURE__ */ jsx(UploadIcon, { className: "w-5 h-5 text-blue-600" }),
+			icon: /* @__PURE__ */ jsx(UploadIcon, { className: cx("w-5 h-5", toneIcon.info) }),
 			title: strings.uploading,
 			shortTitle: strings.uploading,
-			bgColor: "bg-blue-100"
+			bgColor: "bg-(--theme-info-muted)"
 		};
 		case "completed": return {
-			icon: /* @__PURE__ */ jsx(SuccessIcon, { className: "w-5 h-5 text-green-600" }),
+			icon: /* @__PURE__ */ jsx(SuccessIcon, { className: cx("w-5 h-5", toneIcon.success) }),
 			title: strings.completeTitle,
 			shortTitle: strings.completed,
-			bgColor: "bg-green-100"
+			bgColor: "bg-(--theme-success-muted)"
 		};
 		case "failed": return {
-			icon: /* @__PURE__ */ jsx(WarningIcon, { className: "w-5 h-5 text-red-600" }),
+			icon: /* @__PURE__ */ jsx(WarningIcon, { className: cx("w-5 h-5", toneIcon.error) }),
 			title: strings.failedTitle,
 			shortTitle: strings.failed,
-			bgColor: "bg-red-100"
+			bgColor: "bg-(--theme-error-muted)"
+		};
+		case "canceled": return {
+			icon: /* @__PURE__ */ jsx(CloseIcon, { className: "w-5 h-5 theme-muted-text" }),
+			title: strings.canceled,
+			shortTitle: strings.canceled,
+			bgColor: "bg-(--theme-muted-panel-bg)"
 		};
 		default: return {
 			icon: /* @__PURE__ */ jsx(UploadIcon, { className: "w-5 h-5 theme-muted-text" }),
@@ -178,6 +186,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 								}), /* @__PURE__ */ jsx("button", {
 									type: "button",
 									"aria-label": strings.expandDetails,
+									"aria-expanded": false,
 									className: "flex items-center justify-between text-xs theme-muted-text hover:theme-text cursor-pointer",
 									onClick: handleExpandClick,
 									title: strings.expandDetails,
@@ -221,6 +230,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
 						"aria-label": strings.minimizeDetails,
+						"aria-expanded": true,
 						className: "flex items-center justify-between text-xs theme-muted-text hover:theme-text cursor-pointer mr-2",
 						onClick: handleExpandClick,
 						title: strings.minimizeDetails,
@@ -250,15 +260,11 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 						]
 					})
 				}),
-				isUploading && /* @__PURE__ */ jsx("div", {
-					className: "mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "flex gap-2",
-						children: [/* @__PURE__ */ jsx(WarningIcon, { className: "w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ jsx("p", {
-							className: "text-xs text-amber-800",
-							children: strings.keepPageOpen
-						})]
-					})
+				isUploading && /* @__PURE__ */ jsx(Callout, {
+					tone: "warning",
+					size: "sm",
+					className: "mb-4",
+					children: strings.keepPageOpen
 				}),
 				session.uploadNodes.length > 1 && isUploading && /* @__PURE__ */ jsx(ProgressBar, {
 					value: totalProgress,
@@ -271,6 +277,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 					children: [/* @__PURE__ */ jsxs("button", {
 						type: "button",
 						className: "flex items-center justify-between text-xs theme-muted-text hover:theme-text cursor-pointer",
+						"aria-expanded": isFileListExpanded,
 						onClick: () => setIsExpanded(!isFileListExpanded),
 						children: [/* @__PURE__ */ jsx("span", { children: strings.fileCount(session.uploadNodes.length) }), isFileListExpanded ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-4 h-4" })]
 					}), isFileListExpanded && /* @__PURE__ */ jsx("div", {
@@ -294,10 +301,11 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-end",
 					children: [shouldShowSessionCancelButton && /* @__PURE__ */ jsx(Button, {
-						variant: "danger",
+						variant: "outline",
 						size: "xs",
+						className: "*:text-(--theme-error-text)",
 						onClick: handleCancelClick,
-						children: common.cancel
+						children: /* @__PURE__ */ jsx("span", { children: common.cancel })
 					}), showCancelConfirm && /* @__PURE__ */ jsxs("div", {
 						className: "flex items-center space-x-2",
 						children: [

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

@@ -32,4 +32,10 @@ export declare function nextFileLimit(current: number | undefined): number;
 export declare function findRowIndex(rows: readonly TreeRow[], path: string): number;
 /** The next selectable row in `direction`, skipping skeleton and more rows. */
 export declare function stepRow(rows: readonly TreeRow[], from: number, direction: 1 | -1): TreeRow | undefined;
+/** The row's parent: the nearest row above it one level up, or undefined at a root. */
+export declare function parentRow(rows: readonly TreeRow[], index: number): TreeRow | undefined;
+/** An open folder's first child row, or undefined when it shows none yet. */
+export declare function firstChildRow(rows: readonly TreeRow[], index: number): TreeRow | undefined;
+/** The first or last selectable row, for Home and End. */
+export declare function edgeRow(rows: readonly TreeRow[], edge: 'first' | 'last'): TreeRow | undefined;
 export {};

package/dist/file-explorer/treeRows.js

@@ -69,5 +69,23 @@ function stepRow(rows, from, direction) {
 		if (row?.kind === "node") return row;
 	}
 }
+/** The row's parent: the nearest row above it one level up, or undefined at a root. */
+function parentRow(rows, index) {
+	const depth = rows[index]?.depth ?? 0;
+	for (let i = index - 1; i >= 0; i--) {
+		const row = rows[i];
+		if (row?.kind === "node" && row.depth < depth) return row.depth === depth - 1 ? row : void 0;
+	}
+}
+/** An open folder's first child row, or undefined when it shows none yet. */
+function firstChildRow(rows, index) {
+	const depth = rows[index]?.depth ?? 0;
+	const next = rows[index + 1];
+	return next?.kind === "node" && next.depth === depth + 1 ? next : void 0;
+}
+/** The first or last selectable row, for Home and End. */
+function edgeRow(rows, edge) {
+	return edge === "first" ? stepRow(rows, -1, 1) : stepRow(rows, rows.length, -1);
+}
 //#endregion
-export { findRowIndex, flattenTreeRows, nextFileLimit, stepRow };
+export { edgeRow, findRowIndex, firstChildRow, flattenTreeRows, nextFileLimit, parentRow, stepRow };

package/dist/file-explorer/useNearEnd.js

@@ -1,16 +1,13 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useEffectEvent } from "react";
 //#region src/file-explorer/useNearEnd.ts
 /** Fires once the element comes within 100px of the bottom of `root`. */
 function useNearEnd(ref, { active, root, onNear }) {
-	const latestOnNear = useRef(onNear);
-	useEffect(() => {
-		latestOnNear.current = onNear;
-	}, [onNear]);
+	const near = useEffectEvent(onNear);
 	useEffect(() => {
 		const el = ref.current;
 		if (!active || !el) return;
 		const observer = new IntersectionObserver((entries) => {
-			if (entries.some((entry) => entry.isIntersecting)) latestOnNear.current();
+			if (entries.some((entry) => entry.isIntersecting)) near();
 		}, {
 			root,
 			rootMargin: "100px"

package/dist/form/Fields/CheckboxGroupField.js

@@ -5,7 +5,7 @@ import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { fieldOption } from "./fieldOption.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useId, useState } from "react";
 //#region src/form/Fields/CheckboxGroupField.tsx
 function impliedFrom(values, implies = {}) {
 	const result = /* @__PURE__ */ new Set();
@@ -19,6 +19,7 @@ function CheckboxGroupField(props) {
 	const { field, error, disabled, onChange } = props;
 	const [value, change] = useFieldValue(field.name ?? "");
 	const implies = field.implies;
+	const uid = useId();
 	const rawOf = new Map((field.options ?? []).map((choice) => {
 		const option = fieldOption(choice);
 		return [option.value, option.raw];
@@ -40,26 +41,32 @@ function CheckboxGroupField(props) {
 	return /* @__PURE__ */ jsx(Field, {
 		...fieldFrame(props, { group: true }),
 		children: /* @__PURE__ */ jsx("div", {
-			className: "flex min-w-0 max-w-lg flex-col gap-1",
-			children: field.options?.map((raw) => {
+			className: "flex min-w-0 max-w-lg flex-col",
+			children: field.options?.map((raw, index) => {
 				const option = fieldOption(raw);
 				const locked = forced.has(option.value);
 				const optionDisabled = disabled || locked;
+				const labelId = `${uid}label${index}`;
+				const descriptionId = option.description && `${uid}description${index}`;
 				return /* @__PURE__ */ jsxs(FieldOption, {
 					disabled: optionDisabled,
-					className: cx("-mx-2 flex items-start gap-2.5 rounded-md px-2 py-1.5 transition-colors", !optionDisabled && "hover:bg-(--theme-hover) has-[:focus-visible]:bg-(--theme-hover)"),
+					className: cx("-mx-2 flex items-start gap-2.5 rounded-md px-2 py-2 transition-colors", !optionDisabled && "hover:bg-(--theme-hover) has-[:focus-visible]:bg-(--theme-hover)"),
 					children: [/* @__PURE__ */ jsx(Checkbox, {
 						checked: manual.includes(option.value) || locked,
 						disabled: optionDisabled,
 						onCheckedChange: () => handleToggle(option.value),
 						"aria-invalid": error !== void 0 || void 0,
+						"aria-labelledby": labelId,
+						"aria-describedby": descriptionId || void 0,
 						className: "mt-0.5"
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex min-w-0 flex-col",
 						children: [/* @__PURE__ */ jsx("span", {
-							className: "font-medium leading-tight theme-text",
+							id: labelId,
+							className: "font-medium leading-5 theme-text",
 							children: option.label
 						}), option.description && /* @__PURE__ */ jsx("span", {
+							id: descriptionId,
 							className: "mt-0.5 text-xs leading-snug theme-muted-text",
 							children: option.description
 						})]

package/dist/form/Fields/DurationField.js

@@ -1,7 +1,7 @@
 import { useStrings } from "../../components/Provider.js";
+import { fieldBox } from "../../components/fieldBox.js";
 import { Checkbox } from "../../components/Checkbox.js";
 import { Field, FieldOption } from "../../components/Field.js";
-import { fieldBox } from "../../components/fieldBox.js";
 import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { formatDurationText, parseDurationText } from "../utils/duration.js";

package/dist/form/Fields/LabelField.js

@@ -10,7 +10,7 @@ function LabelField(props) {
 				whiteSpace: "pre-wrap",
 				...field.size ? { fontSize: `${field.size}px` } : {}
 			},
-			className: cx("relative", "text-md", field.bold !== false ? "font-bold" : ""),
+			className: cx("text-base", field.bold !== false && "font-bold"),
 			children: field.text?.toString().replace(/(\r)/g, "").replace(/(\\n)/g, "\n") || label
 		})
 	});

package/dist/form/Fields/ObjectField.d.ts

@@ -4,4 +4,4 @@ export interface IObjectField extends BaseField {
     type: 'object';
     options: DynamicFormSchema;
 }
-export default function ObjectField({ field, label, tooltipComponent, labelPosition, spaceCompact, }: FieldComponentProps<IObjectField>): import("react").JSX.Element;
+export default function ObjectField({ field, label, help, labelPosition, spaceCompact, }: FieldComponentProps<IObjectField>): import("react").JSX.Element;

package/dist/form/Fields/ObjectField.js

@@ -1,15 +1,16 @@
+import { InfoTip } from "../../components/InfoTip.js";
 import { Section } from "../../components/Section.js";
 import { FieldsFromOptions, resolveMetaOverrides } from "../Form.js";
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 //#region src/form/Fields/ObjectField.tsx
-function ObjectField({ field, label, tooltipComponent, labelPosition, spaceCompact }) {
+function ObjectField({ field, label, help, labelPosition, spaceCompact }) {
 	const fieldName = field.name ?? "";
 	const meta = resolveMetaOverrides(field.options, labelPosition, spaceCompact ?? false);
 	const parentInfo = useMemo(() => ({ fieldNamePrefix: `${fieldName}.` }), [fieldName]);
 	return /* @__PURE__ */ jsx(Section, {
 		title: field.label || label,
-		beside: tooltipComponent,
+		beside: help && /* @__PURE__ */ jsx(InfoTip, { text: help }),
 		collapsible: !field.noCollapse,
 		defaultOpen: !field.collapsed,
 		children: /* @__PURE__ */ jsx(FieldsFromOptions, {

package/dist/form/Fields/StringField.js

@@ -1,16 +1,14 @@
-import { cx } from "../../cx.js";
-import { Field, RevealToggle } from "../../components/Field.js";
-import { fieldBox } from "../../components/fieldBox.js";
+import { Field } from "../../components/Field.js";
+import { Input } from "../../components/Input.js";
 import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 //#region src/form/Fields/StringField.tsx
 function StringField(props) {
 	const { field, disabled, onChange } = props;
 	const [value, change] = useFieldValue(field.name ?? "");
-	const [revealed, setRevealed] = useState(false);
 	const password = field.type === "password";
 	const fallback = field.default ?? "";
 	const disallowed = useMemo(() => {
@@ -31,29 +29,18 @@ function StringField(props) {
 	};
 	return /* @__PURE__ */ jsx(Field, {
 		...fieldFrame(props),
-		children: (control) => {
-			const input = /* @__PURE__ */ jsx("input", {
-				...control,
-				"data-1p-ignore": true,
-				className: cx(fieldBox(), password && "pr-9"),
-				name: field.name,
-				value: password && value === fallback ? "" : value ?? "",
-				type: password && !revealed ? "password" : "text",
-				disabled,
-				placeholder: password && field.placeholder === void 0 ? "•".repeat(fallback.toString().length > 0 ? 16 : 0) : getPlaceholder(field.placeholder, field.default),
-				minLength: field.minLength,
-				maxLength: field.maxLength,
-				onChange: handleChange
-			});
-			return password ? /* @__PURE__ */ jsxs("div", {
-				className: "relative w-full",
-				children: [input, /* @__PURE__ */ jsx(RevealToggle, {
-					revealed,
-					onRevealedChange: setRevealed,
-					disabled
-				})]
-			}) : input;
-		}
+		children: (control) => /* @__PURE__ */ jsx(Input, {
+			...control,
+			"data-1p-ignore": true,
+			name: field.name,
+			value: password && value === fallback ? "" : value ?? "",
+			type: password ? "password" : "text",
+			disabled,
+			placeholder: password && field.placeholder === void 0 ? "•".repeat(fallback.toString().length > 0 ? 16 : 0) : getPlaceholder(field.placeholder, field.default),
+			minLength: field.minLength,
+			maxLength: field.maxLength,
+			onChange: handleChange
+		})
 	});
 }
 //#endregion

package/dist/form/Fields/TextAreaField.js

@@ -1,6 +1,5 @@
-import { cx } from "../../cx.js";
 import { Field } from "../../components/Field.js";
-import { fieldBox } from "../../components/fieldBox.js";
+import { Textarea } from "../../components/Input.js";
 import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";
@@ -11,9 +10,9 @@ function TextAreaField(props) {
 	const [value, change] = useFieldValue(field.name ?? "");
 	return /* @__PURE__ */ jsx(Field, {
 		...fieldFrame(props),
-		children: (control) => /* @__PURE__ */ jsx("textarea", {
+		children: (control) => /* @__PURE__ */ jsx(Textarea, {
 			...control,
-			className: cx(fieldBox({ multiline: true }), "h-20 resize-y"),
+			className: "h-20 min-h-20",
 			name: field.name,
 			value: value ?? "",
 			placeholder: getPlaceholder(field.placeholder, field.default),