@ctrl-ui/react 0.8.0

package/dist/blocks/file-explorer-data.d.ts

@@ -0,0 +1,57 @@
+import { ReactNode } from "react";
+//#region src/blocks/file-explorer-data.d.ts
+type FileExplorerEntryDetail = {
+  label: string;
+  value: ReactNode;
+};
+type FileExplorerEntry = {
+  id: string;
+  name: string;
+  kind: "file" | "folder";
+  group?: string;
+  icon?: ReactNode;
+  description?: ReactNode;
+  details?: readonly FileExplorerEntryDetail[];
+  preview?: ReactNode;
+  children?: readonly FileExplorerEntry[];
+};
+type FileExplorerLocation = {
+  id: string;
+  label: string;
+  group?: string;
+  icon?: ReactNode;
+  entries: readonly FileExplorerEntry[];
+};
+type FileExplorerColumn = {
+  id: string;
+  label: string;
+  entries: readonly FileExplorerEntry[];
+  selectedId?: string;
+};
+type FileExplorerBreadcrumb = {
+  id: string;
+  label: string;
+  path: readonly string[];
+  entry?: FileExplorerEntry;
+};
+type FileExplorerResolution = {
+  columns: readonly FileExplorerColumn[];
+  breadcrumbs: readonly FileExplorerBreadcrumb[];
+  selectedEntry?: FileExplorerEntry;
+  validPath: readonly string[];
+};
+type FileExplorerSearchResult = {
+  entry: FileExplorerEntry;
+  path: readonly string[];
+  parents: readonly string[];
+};
+declare function resolveFileExplorer(location: FileExplorerLocation, selectedPath: readonly string[]): FileExplorerResolution;
+declare function groupFileExplorerItems<T extends {
+  group?: string;
+}>(items: readonly T[]): {
+  label: string;
+  items: T[];
+}[];
+declare function searchFileExplorer(location: FileExplorerLocation, query: string): readonly FileExplorerSearchResult[];
+//#endregion
+export { FileExplorerBreadcrumb, FileExplorerColumn, FileExplorerEntry, FileExplorerEntryDetail, FileExplorerLocation, FileExplorerResolution, FileExplorerSearchResult, groupFileExplorerItems, resolveFileExplorer, searchFileExplorer };

package/dist/blocks/file-explorer-data.js

@@ -0,0 +1,74 @@
+//#region src/blocks/file-explorer-data.ts
+function resolveFileExplorer(location, selectedPath) {
+	const columns = [];
+	const breadcrumbs = [{
+		id: location.id,
+		label: location.label,
+		path: []
+	}];
+	const validPath = [];
+	let entries = location.entries;
+	let selectedEntry;
+	let columnLabel = location.label;
+	for (let depth = 0;; depth += 1) {
+		const selectedId = selectedPath[depth];
+		const selected = selectedId ? entries.find((entry) => entry.id === selectedId) : void 0;
+		columns.push({
+			id: depth === 0 ? `location:${location.id}` : `folder:${validPath[depth - 1]}`,
+			label: columnLabel,
+			entries,
+			selectedId: selected?.id
+		});
+		if (!selected) break;
+		selectedEntry = selected;
+		validPath.push(selected.id);
+		breadcrumbs.push({
+			id: selected.id,
+			label: selected.name,
+			path: [...validPath],
+			entry: selected
+		});
+		if (selected.kind !== "folder") break;
+		entries = selected.children ?? [];
+		columnLabel = selected.name;
+	}
+	return {
+		columns,
+		breadcrumbs,
+		selectedEntry,
+		validPath
+	};
+}
+function groupFileExplorerItems(items) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const item of items) {
+		const label = item.group ?? "";
+		const group = groups.get(label) ?? [];
+		group.push(item);
+		groups.set(label, group);
+	}
+	return [...groups].map(([label, groupedItems]) => ({
+		label,
+		items: groupedItems
+	}));
+}
+function searchFileExplorer(location, query) {
+	const normalizedQuery = query.trim().toLocaleLowerCase();
+	if (!normalizedQuery) return [];
+	const results = [];
+	function visit(entries, path, parents) {
+		for (const entry of entries) {
+			const entryPath = [...path, entry.id];
+			if (entry.name.toLocaleLowerCase().includes(normalizedQuery)) results.push({
+				entry,
+				path: entryPath,
+				parents
+			});
+			if (entry.kind === "folder" && entry.children) visit(entry.children, entryPath, [...parents, entry.name]);
+		}
+	}
+	visit(location.entries, [], []);
+	return results;
+}
+//#endregion
+export { groupFileExplorerItems, resolveFileExplorer, searchFileExplorer };

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

@@ -0,0 +1,24 @@
+import { FileExplorerBreadcrumb, FileExplorerColumn, FileExplorerEntry, FileExplorerEntryDetail, FileExplorerLocation, FileExplorerResolution, FileExplorerSearchResult } from "./file-explorer-data.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/blocks/file-explorer.d.ts
+type FileExplorerBlockProps = Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> & {
+  locations: readonly FileExplorerLocation[];
+  activeLocationId?: string;
+  defaultActiveLocationId?: string;
+  selectedPath?: readonly string[];
+  defaultSelectedPath?: readonly string[];
+  searchValue?: string;
+  defaultSearchValue?: string;
+  onActiveLocationChange?: (location: FileExplorerLocation) => void;
+  onSelectedPathChange?: (path: readonly string[], entry: FileExplorerEntry | undefined) => void;
+  onSearchValueChange?: (value: string) => void;
+  onOpenEntry?: (entry: FileExplorerEntry, path: readonly string[]) => void;
+  sidebarTop?: ReactNode;
+  sidebarFooter?: ReactNode;
+  headerActions?: ReactNode;
+  searchPlaceholder?: string | false;
+  layout?: "viewport" | "contained";
+};
+declare function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath, searchValue, defaultSearchValue, onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, searchPlaceholder, layout, className, style, ...props }: FileExplorerBlockProps): import("react").JSX.Element;
+//#endregion
+export { FileExplorerBlock, FileExplorerBlockProps, type FileExplorerBreadcrumb, type FileExplorerColumn, type FileExplorerEntry, type FileExplorerEntryDetail, type FileExplorerLocation, type FileExplorerResolution, type FileExplorerSearchResult };

package/dist/blocks/file-explorer.js

@@ -0,0 +1,427 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "../ui/button.js";
+import { ScrollArea } from "../ui/scroll-area.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../ui/input-group.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger, useSidebar } from "../ui/sidebar.js";
+import { groupFileExplorerItems, resolveFileExplorer, searchFileExplorer } from "./file-explorer-data.js";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon, FileIcon, FolderIcon, 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 }) {
+	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 activeLocation = locations.find((location) => location.id === currentLocationId) ?? locations[0];
+	const contained = layout === "contained";
+	function changePath(path, entry) {
+		if (selectedPath === void 0) setInternalSelectedPath(path);
+		onSelectedPathChange?.(path, entry);
+	}
+	function changeQuery(value) {
+		if (searchValue === void 0) setInternalSearchValue(value);
+		onSearchValueChange?.(value);
+	}
+	function changeLocation(location) {
+		if (activeLocationId === void 0) setInternalLocationId(location.id);
+		changePath([], void 0);
+		changeQuery("");
+		onActiveLocationChange?.(location);
+	}
+	if (!activeLocation) return /* @__PURE__ */ jsx(FileExplorerUnavailable, {
+		className,
+		style,
+		...props
+	});
+	const resolution = resolveFileExplorer(activeLocation, currentPath);
+	const searchResults = searchFileExplorer(activeLocation, query);
+	function selectEntry(entry, columnIndex) {
+		changePath([...resolution.validPath.slice(0, columnIndex), entry.id], entry);
+	}
+	function selectSearchResult(result) {
+		changePath(result.path, result.entry);
+		changeQuery("");
+	}
+	function openEntry(entry, path) {
+		onOpenEntry?.(entry, path);
+	}
+	const providerStyle = {
+		"--sidebar-width": "14.5rem",
+		...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),
+		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",
+			children: [
+				/* @__PURE__ */ jsx(FileExplorerHeader, {
+					location: activeLocation,
+					breadcrumbs: resolution.breadcrumbs,
+					query,
+					searchPlaceholder,
+					canGoBack: resolution.validPath.length > 0,
+					headerActions,
+					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,
+						results: searchResults,
+						onSelect: selectSearchResult,
+						onOpen: openEntry
+					}) : /* @__PURE__ */ jsx(FileExplorerColumns, {
+						columns: resolution.columns,
+						selectedEntry: resolution.selectedEntry,
+						selectedPath: resolution.validPath,
+						onSelect: selectEntry,
+						onOpen: openEntry
+					})
+				}),
+				/* @__PURE__ */ jsx(FileExplorerStatusBar, {
+					breadcrumbs: resolution.breadcrumbs,
+					selectedEntry: resolution.selectedEntry,
+					onBreadcrumbSelect: (breadcrumb) => changePath(breadcrumb.path, breadcrumb.entry)
+				})
+			]
+		})]
+	});
+}
+function FileExplorerUnavailable({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-h-96 items-center justify-center border bg-background", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Empty, { children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+			/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(FolderIcon, {}) }),
+			/* @__PURE__ */ jsx(EmptyTitle, { children: "No locations" }),
+			/* @__PURE__ */ jsx(EmptyDescription, { children: "Add at least one location to populate the file explorer." })
+		] }) })
+	});
+}
+function FileExplorerSidebar({ locations, activeLocationId, contained, 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")) }),
+			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, {
+				className: "border-t border-sidebar-border",
+				children: sidebarFooter
+			}) : null,
+			/* @__PURE__ */ jsx(SidebarRail, {})
+		]
+	});
+}
+function FileExplorerHeader({ location, breadcrumbs, query, searchPlaceholder, canGoBack, headerActions, onBack, onBreadcrumbSelect, onQueryChange }) {
+	return /* @__PURE__ */ jsxs("header", {
+		className: "shrink-0 border-b border-border/70 bg-card/35",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex h-12 items-center gap-2 px-3",
+			children: [
+				/* @__PURE__ */ jsx(SidebarTrigger, { size: "xs" }),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "xs",
+					disabled: !canGoBack,
+					"aria-label": "Go back",
+					onClick: onBack,
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 rotate-180" })
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					className: "min-w-0 flex-1 truncate text-label font-semibold",
+					children: location.label
+				}),
+				headerActions ? /* @__PURE__ */ jsx("div", {
+					className: "hidden shrink-0 items-center gap-1 sm:flex",
+					children: headerActions
+				}) : null,
+				searchPlaceholder ? /* @__PURE__ */ jsxs(InputGroup, {
+					size: "sm",
+					className: "w-36 bg-background/60 md:w-48",
+					children: [
+						/* @__PURE__ */ jsx(InputGroupAddon, {
+							className: "pl-2",
+							children: /* @__PURE__ */ jsx(SearchIcon, {
+								className: "size-3.5",
+								"aria-hidden": "true"
+							})
+						}),
+						/* @__PURE__ */ jsx(InputGroupInput, {
+							type: "search",
+							"aria-label": searchPlaceholder,
+							placeholder: searchPlaceholder,
+							value: query,
+							onChange: (event) => onQueryChange(event.currentTarget.value)
+						}),
+						query ? /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "xs",
+							iconOnly: true,
+							className: "mr-1",
+							"aria-label": "Clear search",
+							onClick: () => onQueryChange(""),
+							children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+						}) : null
+					]
+				}) : null
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "px-3 pb-2",
+			children: /* @__PURE__ */ jsx(FileExplorerBreadcrumbs, {
+				breadcrumbs,
+				onSelect: onBreadcrumbSelect,
+				variant: "address"
+			})
+		})]
+	});
+}
+function FileExplorerColumns({ columns, selectedEntry, selectedPath, onSelect, onOpen }) {
+	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 })
+		})]
+	});
+}
+function FileExplorerPanel({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ResizablePanel, {
+		...props,
+		children
+	}), /* @__PURE__ */ jsx(ResizableHandle, {})] });
+}
+function FileExplorerColumnView({ column, columnIndex, onSelect, onOpen }) {
+	const groups = groupFileExplorerItems(column.entries);
+	if (column.entries.length === 0) return /* @__PURE__ */ jsx(Empty, {
+		className: "h-full rounded-none",
+		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+			/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(FolderIcon, {}) }),
+			/* @__PURE__ */ jsx(EmptyTitle, { children: "Empty folder" }),
+			/* @__PURE__ */ jsxs(EmptyDescription, { children: [column.label, " has no files yet."] })
+		] })
+	});
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		className: "h-full",
+		lockAxis: "x",
+		children: /* @__PURE__ */ jsx("div", {
+			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"))
+		})
+	});
+}
+function FileExplorerPreview({ entry }) {
+	if (!entry) return /* @__PURE__ */ jsx(Empty, {
+		className: "h-full rounded-none bg-background/45",
+		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+			/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(FileIcon, {}) }),
+			/* @__PURE__ */ jsx(EmptyTitle, { children: "Select an item" }),
+			/* @__PURE__ */ jsx(EmptyDescription, { children: "Choose a file or folder to inspect its details." })
+		] })
+	});
+	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
+			]
+		})
+	});
+}
+function FileExplorerSearchResults({ query, results, onSelect, onOpen }) {
+	if (results.length === 0) return /* @__PURE__ */ jsx(Empty, {
+		className: "h-full rounded-none",
+		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+			/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
+			/* @__PURE__ */ jsxs(EmptyTitle, { children: [
+				"No results for “",
+				query,
+				"”"
+			] }),
+			/* @__PURE__ */ jsx(EmptyDescription, { children: "Try a shorter file or folder name." })
+		] })
+	});
+	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("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("/")))]
+		})
+	});
+}
+function FileExplorerStatusBar({ breadcrumbs, selectedEntry, onBreadcrumbSelect }) {
+	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"
+		}), /* @__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"
+		})]
+	});
+}
+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"),
+			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"),
+						onClick: () => onSelect(breadcrumb),
+						children: breadcrumb.label
+					})]
+				}, `${breadcrumb.id}:${breadcrumb.path.join("/")}`);
+			})
+		})
+	});
+}
+//#endregion
+export { FileExplorerBlock };

package/dist/blocks/settings-data.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+//#region src/blocks/settings-data.d.ts
+type SettingsControlProps = {
+  id: string;
+  "aria-labelledby": string;
+  "aria-describedby"?: string;
+};
+type SettingDefinition = {
+  id: string;
+  title: string;
+  description?: string;
+  keywords?: readonly string[];
+  renderControl: (props: SettingsControlProps) => ReactNode;
+};
+type SettingsSectionDefinition = {
+  id: string;
+  title: string;
+  settings: readonly SettingDefinition[];
+};
+type SettingsPageDefinition = {
+  id: string;
+  title: string;
+  icon?: ReactNode;
+  sections: readonly SettingsSectionDefinition[];
+};
+type SettingsSearchResult = {
+  page: SettingsPageDefinition;
+  section: SettingsSectionDefinition;
+  setting: SettingDefinition;
+  score: number;
+  order: number;
+};
+declare function normalizeSettingsSearchText(value: string): string;
+declare function searchSettings(pages: readonly SettingsPageDefinition[], query: string): SettingsSearchResult[];
+//#endregion
+export { SettingDefinition, SettingsControlProps, SettingsPageDefinition, SettingsSearchResult, SettingsSectionDefinition, normalizeSettingsSearchText, searchSettings };

package/dist/blocks/settings-data.js

@@ -0,0 +1,66 @@
+//#region src/blocks/settings-data.ts
+function normalizeSettingsSearchText(value) {
+	return value.normalize("NFKD").replace(/\p{Diacritic}/gu, "").toLocaleLowerCase().trim().replace(/\s+/g, " ");
+}
+function titleSearchScore(title, query) {
+	if (title === query) return 1e3;
+	if (title.startsWith(query)) return 800;
+	if (title.includes(query)) return 600;
+	return 0;
+}
+function settingSearchScore(fields, query, tokens) {
+	const { title, description, keywords, pageTitle, sectionTitle } = fields;
+	const searchableText = [
+		title,
+		description,
+		keywords,
+		pageTitle,
+		sectionTitle
+	].join(" ");
+	for (const token of tokens) if (!searchableText.includes(token)) return void 0;
+	let score = titleSearchScore(title, query);
+	if (keywords.includes(query)) score += 300;
+	if (sectionTitle.includes(query)) score += 180;
+	if (pageTitle.includes(query)) score += 160;
+	if (description.includes(query)) score += 100;
+	for (const token of tokens) score += (title.indexOf(token) >= 0 ? 20 : 0) + (keywords.indexOf(token) >= 0 ? 10 : 0);
+	return score;
+}
+function searchSettings(pages, query) {
+	const normalizedQuery = normalizeSettingsSearchText(query);
+	if (!normalizedQuery) return [];
+	const tokens = new Set(normalizedQuery.split(" "));
+	let order = 0;
+	const results = [];
+	for (const page of pages) {
+		const pageTitle = normalizeSettingsSearchText(page.title);
+		for (const section of page.sections) {
+			const sectionTitle = normalizeSettingsSearchText(section.title);
+			for (const setting of section.settings) {
+				const title = normalizeSettingsSearchText(setting.title);
+				const description = normalizeSettingsSearchText(setting.description ?? "");
+				const keywords = normalizeSettingsSearchText(setting.keywords?.join(" ") ?? "");
+				const currentOrder = order;
+				order += 1;
+				const score = settingSearchScore({
+					title,
+					description,
+					keywords,
+					pageTitle,
+					sectionTitle
+				}, normalizedQuery, tokens);
+				if (score === void 0) continue;
+				results.push({
+					page,
+					section,
+					setting,
+					score,
+					order: currentOrder
+				});
+			}
+		}
+	}
+	return results.sort((a, b) => b.score - a.score || a.order - b.order);
+}
+//#endregion
+export { normalizeSettingsSearchText, searchSettings };