@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/blocks/file-explorer.js

@@ -1,25 +1,35 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
+import { LiveStatus } from "../ui/live-status.js";
 import { ScrollArea } from "../ui/scroll-area.js";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "../ui/input-group.js";
-import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
+import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
+import { Input } from "../ui/input.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarRail, SidebarTrigger } from "../ui/sidebar.js";
+import { Drawer, DrawerBody, DrawerContent, DrawerTitle, DrawerTrigger } from "../ui/drawer.js";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable.js";
-import { groupFileExplorerItems, resolveFileExplorer, searchFileExplorer } from "./file-explorer-data.js";
-import { useState } from "react";
+import { groupFileExplorerItems, orderFileExplorerEntries, resolveFileExplorer, searchFileExplorer } from "./file-explorer-data.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../ui/breadcrumb.js";
+import { Fragment, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRightIcon, FileIcon, FolderIcon, SearchIcon, XIcon } from "lucide-react";
+import { ChevronLeftIcon, ChevronRightIcon, FileIcon, FolderIcon, MoreHorizontalIcon, SearchIcon, XIcon } from "lucide-react";
 //#region src/blocks/file-explorer.tsx
-function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath = [], searchValue, defaultSearchValue = "", onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, searchPlaceholder = "Search files", layout = "viewport", className, style, ...props }) {
+function defaultSearchStatusLabel(count, query) {
+	if (count === 0) return `No results for “${query}”`;
+	return count === 1 ? "1 result" : `${count} results`;
+}
+function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath = [], searchValue, defaultSearchValue = "", onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, headerMenuItems, searchPlaceholder = "Search files", searchLabel = "Search files", clearSearchLabel = "Clear search", searchResultsLabel = "Search results", searchStatusLabel = defaultSearchStatusLabel, backLabel = "Go back", moreActionsLabel = "More actions", detailsLabel = "Details", layout = "viewport", className, style, ...props }) {
 	const [internalLocationId, setInternalLocationId] = useState(defaultActiveLocationId ?? locations[0]?.id);
 	const [internalSelectedPath, setInternalSelectedPath] = useState(defaultSelectedPath);
 	const [internalSearchValue, setInternalSearchValue] = useState(defaultSearchValue);
 	const currentLocationId = activeLocationId ?? internalLocationId;
 	const currentPath = selectedPath ?? internalSelectedPath;
 	const query = searchValue ?? internalSearchValue;
+	const trimmedQuery = query.trim();
 	const activeLocation = locations.find((location) => location.id === currentLocationId) ?? locations[0];
 	const contained = layout === "contained";
 	function changePath(path, entry) {
@@ -43,9 +53,7 @@ function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationI
 	});
 	const resolution = resolveFileExplorer(activeLocation, currentPath);
 	const searchResults = searchFileExplorer(activeLocation, query);
-	function selectEntry(entry, columnIndex) {
-		changePath([...resolution.validPath.slice(0, columnIndex), entry.id], entry);
-	}
+	const searchStatus = trimmedQuery ? searchStatusLabel(searchResults.length, trimmedQuery) : "";
 	function selectSearchResult(result) {
 		changePath(result.path, result.entry);
 		changeQuery("");
@@ -58,50 +66,62 @@ function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationI
 		...style
 	};
 	return /* @__PURE__ */ jsxs(SidebarProvider, {
-		className: cn("overflow-hidden bg-background text-foreground", contained ? "relative h-full min-h-0" : "h-svh min-h-svh", className),
+		layout,
+		className: cn("bg-background text-foreground", !contained && "h-svh overflow-hidden", className),
 		style: providerStyle,
 		...props,
 		children: [/* @__PURE__ */ jsx(FileExplorerSidebar, {
 			locations,
 			activeLocationId: activeLocation.id,
-			contained,
 			sidebarTop,
 			sidebarFooter,
 			onLocationSelect: changeLocation
 		}), /* @__PURE__ */ jsxs(SidebarInset, {
-			className: "h-full min-h-0 min-w-0 overflow-hidden",
+			className: "@container/explorer h-full min-h-0 min-w-0 overflow-hidden",
 			children: [
 				/* @__PURE__ */ jsx(FileExplorerHeader, {
 					location: activeLocation,
+					headingAs: contained ? "h2" : "h1",
 					breadcrumbs: resolution.breadcrumbs,
 					query,
 					searchPlaceholder,
+					searchLabel,
+					clearSearchLabel,
+					backLabel,
+					moreActionsLabel,
 					canGoBack: resolution.validPath.length > 0,
 					headerActions,
+					headerMenuItems,
 					onBack: () => changePath(resolution.validPath.slice(0, -1), resolution.breadcrumbs.at(-2)?.entry),
 					onBreadcrumbSelect: (breadcrumb) => changePath(breadcrumb.path, breadcrumb.entry),
 					onQueryChange: changeQuery
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "min-h-0 flex-1 overflow-hidden",
-					children: query.trim() ? /* @__PURE__ */ jsx(FileExplorerSearchResults, {
-						query,
+					children: trimmedQuery ? /* @__PURE__ */ jsx(FileExplorerSearchResults, {
+						label: searchResultsLabel,
+						status: searchStatus,
+						clearSearchLabel,
 						results: searchResults,
 						onSelect: selectSearchResult,
-						onOpen: openEntry
+						onOpen: openEntry,
+						onClear: () => changeQuery("")
 					}) : /* @__PURE__ */ jsx(FileExplorerColumns, {
 						columns: resolution.columns,
 						selectedEntry: resolution.selectedEntry,
 						selectedPath: resolution.validPath,
-						onSelect: selectEntry,
+						headingAs: contained ? "h3" : "h2",
+						backLabel,
+						detailsLabel,
+						onNavigate: changePath,
 						onOpen: openEntry
 					})
 				}),
 				/* @__PURE__ */ jsx(FileExplorerStatusBar, {
 					breadcrumbs: resolution.breadcrumbs,
-					selectedEntry: resolution.selectedEntry,
-					onBreadcrumbSelect: (breadcrumb) => changePath(breadcrumb.path, breadcrumb.entry)
-				})
+					selectedEntry: resolution.selectedEntry
+				}),
+				/* @__PURE__ */ jsx(LiveStatus, { message: searchStatus })
 			]
 		})]
 	});
@@ -117,30 +137,25 @@ function FileExplorerUnavailable({ className, ...props }) {
 		] }) })
 	});
 }
-function FileExplorerSidebar({ locations, activeLocationId, contained, sidebarTop, sidebarFooter, onLocationSelect }) {
+function FileExplorerSidebar({ locations, activeLocationId, sidebarTop, sidebarFooter, onLocationSelect }) {
 	const { setOpenMobile } = useSidebar();
 	const groups = groupFileExplorerItems(locations);
 	return /* @__PURE__ */ jsxs(Sidebar, {
 		collapsible: "offcanvas",
-		className: contained ? "absolute! inset-y-0! h-full border-r border-sidebar-border" : void 0,
 		children: [
 			sidebarTop ? /* @__PURE__ */ jsx(SidebarHeader, {
 				className: "min-h-11 justify-center border-b border-sidebar-border px-3",
 				children: sidebarTop
 			}) : null,
-			/* @__PURE__ */ jsx(SidebarContent, { children: groups.map((group) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [group.label ? /* @__PURE__ */ jsx(SidebarGroupLabel, { children: group.label }) : null, /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((location) => {
-				const isActive = location.id === activeLocationId;
-				return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
-					size: "sm",
-					isActive,
-					"aria-current": isActive ? "location" : void 0,
-					onClick: () => {
-						onLocationSelect(location);
-						setOpenMobile(false);
-					},
-					children: [location.icon ?? /* @__PURE__ */ jsx(FolderIcon, {}), /* @__PURE__ */ jsx("span", { children: location.label })]
-				}) }, location.id);
-			}) })] }, group.label || "locations")) }),
+			/* @__PURE__ */ jsx(SidebarContent, { children: groups.map((group) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [group.label ? /* @__PURE__ */ jsx(SidebarGroupLabel, { children: group.label }) : null, /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((location) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+				size: "sm",
+				isActive: location.id === activeLocationId,
+				onClick: () => {
+					onLocationSelect(location);
+					setOpenMobile(false);
+				},
+				children: [location.icon ?? /* @__PURE__ */ jsx(FolderIcon, {}), /* @__PURE__ */ jsx("span", { children: location.label })]
+			}) }, location.id)) })] }, group.label || "locations")) }),
 			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, {
 				className: "border-t border-sidebar-border",
 				children: sidebarFooter
@@ -149,7 +164,7 @@ function FileExplorerSidebar({ locations, activeLocationId, contained, sidebarTo
 		]
 	});
 }
-function FileExplorerHeader({ location, breadcrumbs, query, searchPlaceholder, canGoBack, headerActions, onBack, onBreadcrumbSelect, onQueryChange }) {
+function FileExplorerHeader({ location, headingAs: Heading, breadcrumbs, query, searchPlaceholder, searchLabel, clearSearchLabel, backLabel, moreActionsLabel, canGoBack, headerActions, headerMenuItems, onBack, onBreadcrumbSelect, onQueryChange }) {
 	return /* @__PURE__ */ jsxs("header", {
 		className: "shrink-0 border-b border-border/70 bg-card/35",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -159,33 +174,52 @@ function FileExplorerHeader({ location, breadcrumbs, query, searchPlaceholder, c
 				/* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
 					size: "xs",
+					className: "hidden @xl/explorer:inline-flex",
 					disabled: !canGoBack,
-					"aria-label": "Go back",
+					"aria-label": backLabel,
 					onClick: onBack,
-					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 rotate-180" })
+					children: /* @__PURE__ */ jsx(ChevronLeftIcon, {
+						className: "size-4",
+						"data-icon-dir": "inline"
+					})
 				}),
-				/* @__PURE__ */ jsx("h1", {
+				/* @__PURE__ */ jsx(Heading, {
 					className: "min-w-0 flex-1 truncate text-label font-semibold",
+					title: location.label,
 					children: location.label
 				}),
 				headerActions ? /* @__PURE__ */ jsx("div", {
-					className: "hidden shrink-0 items-center gap-1 sm:flex",
+					className: cn("shrink-0 items-center gap-1", headerMenuItems ? "hidden @2xl/explorer:flex" : "flex"),
 					children: headerActions
 				}) : null,
+				headerMenuItems ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					variant: "ghost",
+					size: "xs",
+					iconOnly: true,
+					"aria-label": moreActionsLabel,
+					className: headerActions ? "@2xl/explorer:hidden" : void 0,
+					children: /* @__PURE__ */ jsx(MoreHorizontalIcon, {
+						className: "size-3.5",
+						"aria-hidden": "true"
+					})
+				}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+					align: "end",
+					children: headerMenuItems
+				})] }) : null,
 				searchPlaceholder ? /* @__PURE__ */ jsxs(InputGroup, {
 					size: "sm",
-					className: "w-36 bg-background/60 md:w-48",
+					className: "flex-[0_1_9rem] bg-background/60 @xl/explorer:flex-[0_0_12rem]",
 					children: [
 						/* @__PURE__ */ jsx(InputGroupAddon, {
-							className: "pl-2",
+							className: "ps-2",
 							children: /* @__PURE__ */ jsx(SearchIcon, {
 								className: "size-3.5",
 								"aria-hidden": "true"
 							})
 						}),
-						/* @__PURE__ */ jsx(InputGroupInput, {
+						/* @__PURE__ */ jsx(Input, {
 							type: "search",
-							"aria-label": searchPlaceholder,
+							"aria-label": searchLabel,
 							placeholder: searchPlaceholder,
 							value: query,
 							onChange: (event) => onQueryChange(event.currentTarget.value)
@@ -194,8 +228,8 @@ function FileExplorerHeader({ location, breadcrumbs, query, searchPlaceholder, c
 							variant: "ghost",
 							size: "xs",
 							iconOnly: true,
-							className: "mr-1",
-							"aria-label": "Clear search",
+							className: "me-1",
+							"aria-label": clearSearchLabel,
 							onClick: () => onQueryChange(""),
 							children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
 						}) : null
@@ -204,44 +238,218 @@ function FileExplorerHeader({ location, breadcrumbs, query, searchPlaceholder, c
 			]
 		}), /* @__PURE__ */ jsx("div", {
 			className: "px-3 pb-2",
-			children: /* @__PURE__ */ jsx(FileExplorerBreadcrumbs, {
+			children: /* @__PURE__ */ jsx(FileExplorerAddressBar, {
 				breadcrumbs,
-				onSelect: onBreadcrumbSelect,
-				variant: "address"
+				onSelect: onBreadcrumbSelect
 			})
 		})]
 	});
 }
-function FileExplorerColumns({ columns, selectedEntry, selectedPath, onSelect, onOpen }) {
+function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingAs, backLabel, detailsLabel, onNavigate, onOpen }) {
+	const rootRef = useRef(null);
+	const optionElements = useRef(/* @__PURE__ */ new Map());
+	const pendingFocus = useRef(null);
+	const restoreFocus = useRef(false);
+	const backRef = useRef(null);
+	const [narrowRef, narrowDisplayed] = useDisplayed();
+	const [wideRef, wideDisplayed] = useDisplayed();
+	const [pinned, setPinned] = useState(null);
+	const lastIndex = columns.length - 1;
+	const activeIndex = pinned?.pathKey === JSON.stringify(selectedPath) ? Math.min(pinned.columnIndex, lastIndex) : lastIndex;
+	const activeColumn = columns[activeIndex];
+	const parentColumn = activeIndex > 0 ? columns[activeIndex - 1] : void 0;
 	const paneCount = columns.length + 1;
 	const columnSize = `${Math.max(18, Math.floor(68 / paneCount))}%`;
-	return /* @__PURE__ */ jsxs(ResizablePanelGroup, {
-		orientation: "horizontal",
-		className: "rounded-none border-0 bg-card shadow-none",
-		children: [columns.map((column, columnIndex) => /* @__PURE__ */ jsx(FileExplorerPanel, {
-			defaultSize: columnSize,
-			minSize: "16%",
-			children: /* @__PURE__ */ jsx(FileExplorerColumnView, {
-				column,
-				columnIndex,
-				onSelect,
-				onOpen: (entry) => onOpen(entry, [...selectedPath.slice(0, columnIndex), entry.id])
-			})
-		}, column.id)), /* @__PURE__ */ jsx(ResizablePanel, {
-			defaultSize: "32%",
-			minSize: "20%",
-			children: /* @__PURE__ */ jsx(FileExplorerPreview, { entry: selectedEntry })
+	useEffect(() => {
+		const target = pendingFocus.current;
+		if (target && focusOption(target)) pendingFocus.current = null;
+		if (!restoreFocus.current) return;
+		restoreFocus.current = false;
+		if (rootRef.current?.contains(document.activeElement)) return;
+		([...optionElements.current.values()].find((option) => option.tabIndex === 0 && option.checkVisibility()) ?? backRef.current)?.focus();
+	});
+	function focusOption(target) {
+		for (const layout of ["narrow", "wide"]) {
+			const option = optionElements.current.get(`${layout}:${target.columnIndex}:${target.entryId}`);
+			if (option?.checkVisibility()) {
+				option.focus();
+				return true;
+			}
+		}
+		return false;
+	}
+	function moveTo(columnIndex, entry, path) {
+		onNavigate(path, entry);
+		setPinned({
+			pathKey: JSON.stringify(path),
+			columnIndex
+		});
+		const target = {
+			columnIndex,
+			entryId: entry.id
+		};
+		pendingFocus.current = focusOption(target) ? null : target;
+	}
+	function moveToParent(columnIndex) {
+		const parentId = selectedPath[columnIndex - 1];
+		const parent = columns[columnIndex - 1]?.entries.find((entry) => entry.id === parentId);
+		if (parent) moveTo(columnIndex - 1, parent, selectedPath.slice(0, columnIndex));
+	}
+	function select(columnIndex, entry) {
+		setPinned(null);
+		restoreFocus.current = true;
+		onNavigate([...selectedPath.slice(0, columnIndex), entry.id], entry);
+	}
+	function moveAlongInlineAxis(event, columnIndex, entry) {
+		if (!(event.key === "ArrowRight" !== (getComputedStyle(event.currentTarget).direction === "rtl"))) {
+			moveToParent(columnIndex);
+			return;
+		}
+		const child = entry.kind === "folder" ? orderFileExplorerEntries(entry.children ?? [])[0] : void 0;
+		if (child) moveTo(columnIndex + 1, child, [
+			...selectedPath.slice(0, columnIndex),
+			entry.id,
+			child.id
+		]);
+	}
+	function handleOptionKeyDown(event, columnIndex, entry) {
+		const ordered = orderFileExplorerEntries(columns[columnIndex]?.entries ?? []);
+		const index = ordered.indexOf(entry);
+		const base = selectedPath.slice(0, columnIndex);
+		let target;
+		switch (event.key) {
+			case "ArrowDown":
+				target = ordered[index + 1];
+				break;
+			case "ArrowUp":
+				target = ordered[index - 1];
+				break;
+			case "Home":
+				target = ordered[0];
+				break;
+			case "End":
+				target = ordered.at(-1);
+				break;
+			case "ArrowLeft":
+			case "ArrowRight":
+				event.preventDefault();
+				moveAlongInlineAxis(event, columnIndex, entry);
+				return;
+			case "Enter":
+				event.preventDefault();
+				onOpen(entry, [...base, entry.id]);
+				return;
+			default: return;
+		}
+		event.preventDefault();
+		if (target) moveTo(columnIndex, target, [...base, target.id]);
+	}
+	function renderColumn(column, columnIndex, layout) {
+		return /* @__PURE__ */ jsx(FileExplorerColumnView, {
+			column,
+			optionRef: (entryId) => (element) => {
+				const key = `${layout}:${columnIndex}:${entryId}`;
+				if (element) optionElements.current.set(key, element);
+				return () => {
+					optionElements.current.delete(key);
+				};
+			},
+			onSelect: (entry) => select(columnIndex, entry),
+			onOpen: (entry) => onOpen(entry, [...selectedPath.slice(0, columnIndex), entry.id]),
+			onOptionKeyDown: (event, entry) => handleOptionKeyDown(event, columnIndex, entry)
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		className: "h-full min-h-0",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: narrowRef,
+			className: "flex h-full min-h-0 flex-col @xl/explorer:hidden",
+			children: narrowDisplayed ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex h-10 shrink-0 items-center gap-2 border-b border-border/70 px-2",
+				children: [parentColumn ? /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "xs",
+					className: "min-w-0 justify-start",
+					ref: backRef,
+					"aria-label": `${backLabel}: ${parentColumn.label}`,
+					onClick: () => moveToParent(activeIndex),
+					children: [/* @__PURE__ */ jsx(ChevronLeftIcon, {
+						className: "size-4",
+						"data-icon-dir": "inline"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: parentColumn.label
+					})]
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate px-1 text-label font-medium",
+					children: activeColumn?.label
+				}), /* @__PURE__ */ jsxs(Drawer, { children: [/* @__PURE__ */ jsx(DrawerTrigger, {
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "xs",
+						className: "ms-auto",
+						disabled: !selectedEntry
+					}),
+					children: detailsLabel
+				}), /* @__PURE__ */ jsx(DrawerContent, { children: selectedEntry ? /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsx(FileExplorerPreviewContent, {
+					entry: selectedEntry,
+					title: /* @__PURE__ */ jsx(DrawerTitle, {
+						className: "mt-4 max-w-full truncate text-heading-4 font-semibold",
+						children: selectedEntry.name
+					})
+				}) }) : null })] })]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1 bg-card",
+				children: activeColumn ? renderColumn(activeColumn, activeIndex, "narrow") : null
+			})] }) : null
+		}), /* @__PURE__ */ jsx("div", {
+			ref: wideRef,
+			className: "hidden h-full min-h-0 @xl/explorer:block",
+			children: wideDisplayed ? /* @__PURE__ */ jsxs(ResizablePanelGroup, {
+				orientation: "horizontal",
+				className: "rounded-none border-0 bg-card shadow-none",
+				children: [columns.map((column, columnIndex) => /* @__PURE__ */ jsx(FileExplorerPanel, {
+					defaultSize: columnSize,
+					minSize: "16%",
+					children: renderColumn(column, columnIndex, "wide")
+				}, column.id)), /* @__PURE__ */ jsx(ResizablePanel, {
+					defaultSize: "32%",
+					minSize: "20%",
+					children: /* @__PURE__ */ jsx(FileExplorerPreview, {
+						entry: selectedEntry,
+						headingAs
+					})
+				})]
+			}) : null
 		})]
 	});
 }
+function useDisplayed() {
+	const ref = useRef(null);
+	const [displayed, setDisplayed] = useState(true);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const observer = new ResizeObserver(([entry]) => setDisplayed(Boolean(entry && entry.contentRect.width > 0)));
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	return [ref, displayed];
+}
 function FileExplorerPanel({ children, ...props }) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ResizablePanel, {
 		...props,
 		children
 	}), /* @__PURE__ */ jsx(ResizableHandle, {})] });
 }
-function FileExplorerColumnView({ column, columnIndex, onSelect, onOpen }) {
+function FileExplorerEntryIcon({ entry }) {
+	return entry.icon ?? (entry.kind === "folder" ? /* @__PURE__ */ jsx(FolderIcon, {}) : /* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground" }));
+}
+function FileExplorerColumnView({ column, optionRef, onSelect, onOpen, onOptionKeyDown }) {
+	const groupId = useId();
 	const groups = groupFileExplorerItems(column.entries);
+	const tabStopId = column.selectedId ?? groups[0]?.items[0]?.id;
 	if (column.entries.length === 0) return /* @__PURE__ */ jsx(Empty, {
 		className: "h-full rounded-none",
 		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
@@ -254,44 +462,62 @@ function FileExplorerColumnView({ column, columnIndex, onSelect, onOpen }) {
 		className: "h-full",
 		lockAxis: "x",
 		children: /* @__PURE__ */ jsx("div", {
+			role: "listbox",
+			"aria-label": column.label,
 			className: "grid gap-4 p-2",
-			children: groups.map((group) => /* @__PURE__ */ jsxs("section", {
-				className: "min-w-0",
-				children: [group.label ? /* @__PURE__ */ jsx("h2", {
-					className: "mb-1 px-2 text-caption font-semibold text-muted-foreground",
-					children: group.label
-				}) : null, /* @__PURE__ */ jsx("div", {
-					className: "grid gap-0.5",
-					children: group.items.map((entry) => {
-						const isSelected = entry.id === column.selectedId;
-						return /* @__PURE__ */ jsxs(Button, {
-							variant: "quiet",
-							size: "sm",
-							active: isSelected,
-							"aria-current": isSelected ? "page" : void 0,
-							className: "w-full justify-start gap-2 px-2 text-left",
-							title: entry.name,
-							onClick: () => onSelect(entry, columnIndex),
-							onDoubleClick: () => onOpen(entry),
-							children: [
-								/* @__PURE__ */ jsx("span", {
-									className: "flex size-4 shrink-0 items-center justify-center text-[oklch(0.72_0.14_235)] [&>svg]:size-4",
-									children: entry.icon ?? (entry.kind === "folder" ? /* @__PURE__ */ jsx(FolderIcon, {}) : /* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground" }))
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "min-w-0 flex-1 truncate",
-									children: entry.name
-								}),
-								entry.kind === "folder" ? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }) : null
-							]
-						}, entry.id);
-					})
-				})]
-			}, group.label || "files"))
+			children: groups.map((group, groupIndex) => {
+				const labelId = `${groupId}-${groupIndex}`;
+				const options = group.items.map((entry) => {
+					const isSelected = entry.id === column.selectedId;
+					return /* @__PURE__ */ jsxs(Button, {
+						ref: optionRef(entry.id),
+						role: "option",
+						"aria-selected": isSelected,
+						tabIndex: entry.id === tabStopId ? 0 : -1,
+						variant: "quiet",
+						size: "sm",
+						active: isSelected,
+						className: "w-full justify-start gap-2 px-2 text-start",
+						title: entry.name,
+						onClick: () => onSelect(entry),
+						onDoubleClick: () => onOpen(entry),
+						onKeyDown: (event) => onOptionKeyDown(event, entry),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "flex size-4 shrink-0 items-center justify-center text-info-text [&>svg]:size-4",
+								children: /* @__PURE__ */ jsx(FileExplorerEntryIcon, { entry })
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1 truncate",
+								children: entry.name
+							}),
+							entry.kind === "folder" ? /* @__PURE__ */ jsx(ChevronRightIcon, {
+								className: "size-3.5 shrink-0 text-muted-foreground",
+								"data-icon-dir": "inline"
+							}) : null
+						]
+					}, entry.id);
+				});
+				return group.label ? /* @__PURE__ */ jsxs("div", {
+					role: "group",
+					"aria-labelledby": labelId,
+					className: "grid min-w-0 gap-0.5",
+					children: [/* @__PURE__ */ jsx("div", {
+						role: "presentation",
+						id: labelId,
+						className: "mb-1 px-2 text-caption font-semibold text-muted-foreground",
+						children: group.label
+					}), options]
+				}, group.label) : /* @__PURE__ */ jsx("div", {
+					role: "presentation",
+					className: "grid min-w-0 gap-0.5",
+					children: options
+				}, "");
+			})
 		})
 	});
 }
-function FileExplorerPreview({ entry }) {
+function FileExplorerPreview({ entry, headingAs: Heading }) {
 	if (!entry) return /* @__PURE__ */ jsx(Empty, {
 		className: "h-full rounded-none bg-background/45",
 		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
@@ -303,124 +529,167 @@ function FileExplorerPreview({ entry }) {
 	return /* @__PURE__ */ jsx(ScrollArea, {
 		className: "h-full bg-background/45",
 		lockAxis: "x",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "mx-auto flex w-full max-w-lg flex-col items-center px-6 py-10 text-center",
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "flex size-16 items-center justify-center rounded-[var(--radius-panel)] bg-foreground/6 text-[oklch(0.72_0.14_235)] shadow-sm ring-1 ring-foreground/8 [&>svg]:size-8",
-					children: entry.icon ?? (entry.kind === "folder" ? /* @__PURE__ */ jsx(FolderIcon, {}) : /* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground" }))
-				}),
-				/* @__PURE__ */ jsx("h2", {
-					className: "mt-4 max-w-full truncate text-base font-semibold",
-					children: entry.name
-				}),
-				entry.description ? /* @__PURE__ */ jsx("div", {
-					className: "mt-1 text-caption leading-5 text-muted-foreground",
-					children: entry.description
-				}) : null,
-				entry.details && entry.details.length > 0 ? /* @__PURE__ */ jsx("dl", {
-					className: "mt-6 grid w-full grid-cols-[auto_1fr] gap-x-4 gap-y-2 border-t border-border/70 pt-4 text-left text-caption",
-					children: entry.details.map((detail) => /* @__PURE__ */ jsxs("div", {
-						className: "contents",
-						children: [/* @__PURE__ */ jsx("dt", {
-							className: "text-muted-foreground",
-							children: detail.label
-						}), /* @__PURE__ */ jsx("dd", {
-							className: "min-w-0 truncate text-right text-foreground",
-							children: detail.value
-						})]
-					}, detail.label))
-				}) : null,
-				entry.preview ? /* @__PURE__ */ jsx("div", {
-					className: "mt-6 w-full text-left",
-					children: entry.preview
-				}) : null
-			]
+		children: /* @__PURE__ */ jsx(FileExplorerPreviewContent, {
+			entry,
+			className: "px-6 py-10",
+			title: /* @__PURE__ */ jsx(Heading, {
+				className: "mt-4 max-w-full truncate text-heading-4 font-semibold",
+				title: entry.name,
+				children: entry.name
+			})
 		})
 	});
 }
-function FileExplorerSearchResults({ query, results, onSelect, onOpen }) {
-	if (results.length === 0) return /* @__PURE__ */ jsx(Empty, {
+function FileExplorerPreviewContent({ entry, title, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("mx-auto flex w-full max-w-lg flex-col items-center text-center", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex size-16 items-center justify-center rounded-[var(--radius-panel)] bg-foreground/6 text-info-text shadow-sm ring-1 ring-foreground/8 [&>svg]:size-8",
+				children: /* @__PURE__ */ jsx(FileExplorerEntryIcon, { entry })
+			}),
+			title,
+			entry.description ? /* @__PURE__ */ jsx("div", {
+				className: "mt-1 text-caption text-muted-foreground",
+				children: entry.description
+			}) : null,
+			entry.details && entry.details.length > 0 ? /* @__PURE__ */ jsx("dl", {
+				className: "mt-6 grid w-full grid-cols-[auto_1fr] gap-x-4 gap-y-2 border-t border-border/70 pt-4 text-start text-caption",
+				children: entry.details.map((detail) => /* @__PURE__ */ jsxs("div", {
+					className: "contents",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-muted-foreground",
+						children: detail.label
+					}), /* @__PURE__ */ jsx("dd", {
+						className: "min-w-0 truncate text-end text-foreground",
+						children: detail.value
+					})]
+				}, detail.label))
+			}) : null,
+			entry.preview ? /* @__PURE__ */ jsx("div", {
+				className: "mt-6 w-full text-start",
+				children: entry.preview
+			}) : null
+		]
+	});
+}
+function FileExplorerSearchResults({ label, status, clearSearchLabel, results, onSelect, onOpen, onClear }) {
+	const optionElements = useRef([]);
+	const [activeIndex, setActiveIndex] = useState(0);
+	const tabStop = Math.min(activeIndex, results.length - 1);
+	if (results.length === 0) return /* @__PURE__ */ jsxs(Empty, {
 		className: "h-full rounded-none",
-		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+		children: [/* @__PURE__ */ jsxs(EmptyHeader, { children: [
 			/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
-			/* @__PURE__ */ jsxs(EmptyTitle, { children: [
-				"No results for “",
-				query,
-				"”"
-			] }),
+			/* @__PURE__ */ jsx(EmptyTitle, { children: status }),
 			/* @__PURE__ */ jsx(EmptyDescription, { children: "Try a shorter file or folder name." })
-		] })
+		] }), /* @__PURE__ */ jsx(EmptyContent, { children: /* @__PURE__ */ jsx(Button, {
+			variant: "surface",
+			size: "sm",
+			onClick: onClear,
+			children: clearSearchLabel
+		}) })]
 	});
+	function handleKeyDown(event, index, result) {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			onOpen(result.entry, result.path);
+			return;
+		}
+		const next = {
+			ArrowDown: index + 1,
+			ArrowUp: index - 1,
+			Home: 0,
+			End: results.length - 1
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		const target = Math.max(0, Math.min(next, results.length - 1));
+		setActiveIndex(target);
+		optionElements.current[target]?.focus();
+	}
 	return /* @__PURE__ */ jsx(ScrollArea, {
 		className: "h-full",
 		lockAxis: "x",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "mx-auto grid w-full max-w-3xl gap-1 p-4",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "mb-2 flex items-center justify-between px-2 text-caption text-muted-foreground",
-				children: [/* @__PURE__ */ jsxs("span", { children: [
-					results.length,
-					" ",
-					results.length === 1 ? "result" : "results"
-				] }), /* @__PURE__ */ jsxs("span", { children: ["Search: ", query] })]
-			}), results.map((result) => /* @__PURE__ */ jsxs(Button, {
-				variant: "quiet",
-				size: "lg",
-				className: "h-auto w-full justify-start gap-3 px-3 py-2 text-left",
-				onClick: () => onSelect(result),
-				onDoubleClick: () => onOpen(result.entry, result.path),
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "flex size-8 shrink-0 items-center justify-center rounded-[var(--radius-control)] bg-foreground/6 text-[oklch(0.72_0.14_235)] [&>svg]:size-4",
-					children: result.entry.icon ?? (result.entry.kind === "folder" ? /* @__PURE__ */ jsx(FolderIcon, {}) : /* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground" }))
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "mb-2 px-2 text-caption text-muted-foreground tabular-nums",
+				children: status
+			}), /* @__PURE__ */ jsx("div", {
+				role: "listbox",
+				"aria-label": label,
+				className: "grid gap-1",
+				children: results.map((result, index) => /* @__PURE__ */ jsxs(Button, {
+					ref: (element) => {
+						optionElements.current[index] = element;
+					},
+					role: "option",
+					"aria-selected": index === tabStop,
+					tabIndex: index === tabStop ? 0 : -1,
+					variant: "quiet",
+					size: "lg",
+					className: "h-auto w-full justify-start gap-3 px-3 py-2 text-start",
+					onClick: () => onSelect(result),
+					onDoubleClick: () => onOpen(result.entry, result.path),
+					onFocus: () => setActiveIndex(index),
+					onKeyDown: (event) => handleKeyDown(event, index, result),
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "block truncate text-label text-foreground",
-						children: result.entry.name
-					}), /* @__PURE__ */ jsx("span", {
-						className: "block truncate text-caption text-muted-foreground",
-						children: result.parents.join(" / ") || "Top level"
+						className: "flex size-8 shrink-0 items-center justify-center rounded-[var(--radius-control)] bg-foreground/6 text-info-text [&>svg]:size-4",
+						children: /* @__PURE__ */ jsx(FileExplorerEntryIcon, { entry: result.entry })
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "block truncate text-label text-foreground",
+							children: result.entry.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: "block truncate text-caption text-muted-foreground",
+							children: result.parents.join(" / ") || "Top level"
+						})]
 					})]
-				})]
-			}, result.path.join("/")))]
+				}, result.path.join("/")))
+			})]
 		})
 	});
 }
-function FileExplorerStatusBar({ breadcrumbs, selectedEntry, onBreadcrumbSelect }) {
+function FileExplorerStatusBar({ breadcrumbs, selectedEntry }) {
+	const path = breadcrumbs.map((breadcrumb) => breadcrumb.label).join(" / ");
+	const itemCount = selectedEntry?.children?.length ?? 0;
+	const itemLabel = itemCount === 1 ? "1 item" : `${itemCount} items`;
 	return /* @__PURE__ */ jsxs("footer", {
-		className: "flex h-8 shrink-0 items-center gap-3 border-t border-border/70 bg-card/45 px-3",
-		children: [/* @__PURE__ */ jsx(FileExplorerBreadcrumbs, {
-			breadcrumbs,
-			onSelect: onBreadcrumbSelect,
-			variant: "status"
+		className: "flex h-8 shrink-0 items-center gap-3 border-t border-border/70 bg-card/45 px-3 text-micro text-muted-foreground",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 truncate",
+			title: path,
+			children: path
 		}), /* @__PURE__ */ jsx("span", {
-			className: "ml-auto shrink-0 text-micro text-muted-foreground",
-			children: selectedEntry?.kind === "folder" ? `${selectedEntry.children?.length ?? 0} items` : selectedEntry?.name ?? "No selection"
+			className: "shrink-0 tabular-nums",
+			children: selectedEntry?.kind === "folder" ? itemLabel : selectedEntry?.name ?? "No selection"
 		})]
 	});
 }
-function FileExplorerBreadcrumbs({ breadcrumbs, onSelect, variant }) {
-	return /* @__PURE__ */ jsx("nav", {
-		"aria-label": variant === "address" ? "Current folder" : "Selected path",
-		className: cn("min-w-0 flex-1 overflow-hidden", variant === "address" && "rounded-[var(--radius-control)] border bg-background/55 px-2 py-1 shadow-inner"),
-		children: /* @__PURE__ */ jsx("ol", {
-			className: cn("flex min-w-0 flex-nowrap items-center gap-1 overflow-hidden text-caption text-muted-foreground", variant === "status" && "text-micro"),
+function FileExplorerAddressBar({ breadcrumbs, onSelect }) {
+	return /* @__PURE__ */ jsx(Breadcrumb, {
+		"aria-label": "Current folder",
+		className: "min-w-0 overflow-hidden rounded-[var(--radius-control)] border bg-background/55 px-2 py-1 shadow-inner",
+		children: /* @__PURE__ */ jsx(BreadcrumbList, {
+			className: "min-w-0 flex-nowrap overflow-hidden",
 			children: breadcrumbs.map((breadcrumb, index) => {
 				const isCurrent = index === breadcrumbs.length - 1;
-				return /* @__PURE__ */ jsxs("li", {
-					className: "flex min-w-0 items-center gap-1",
-					children: [index > 0 ? /* @__PURE__ */ jsx(ChevronRightIcon, {
-						className: "size-3 shrink-0",
-						"aria-hidden": "true"
-					}) : null, /* @__PURE__ */ jsx("button", {
-						type: "button",
-						"aria-current": isCurrent ? "page" : void 0,
-						className: cn("min-w-0 truncate rounded-[var(--radius-popup-item)] px-1 py-0.5 text-muted-foreground transition hover:bg-foreground/6 hover:text-foreground focus-visible:outline-(--focus-ring) focus-visible:outline-offset-(--focus-ring-offset) focus-visible:outline-(length:--focus-ring-width)", isCurrent && "text-foreground"),
+				return /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 ? /* @__PURE__ */ jsx(BreadcrumbSeparator, {}) : null, /* @__PURE__ */ jsx(BreadcrumbItem, {
+					className: "min-w-0",
+					children: isCurrent ? /* @__PURE__ */ jsx(BreadcrumbPage, {
+						className: "min-w-0 truncate",
+						title: breadcrumb.label,
+						children: breadcrumb.label
+					}) : /* @__PURE__ */ jsx(BreadcrumbLink, {
+						render: /* @__PURE__ */ jsx("button", { type: "button" }),
+						className: "min-w-0 truncate",
+						title: breadcrumb.label,
 						onClick: () => onSelect(breadcrumb),
 						children: breadcrumb.label
-					})]
-				}, `${breadcrumb.id}:${breadcrumb.path.join("/")}`);
+					})
+				})] }, `${breadcrumb.id}:${breadcrumb.path.join("/")}`);
 			})
 		})
 	});