@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/file-manager/file-manager.js

@@ -0,0 +1,1387 @@
+import { useActionRunner, useChoice, useDirection, useFormatter, usePanel, useT } from "../../context.js";
+import { usePageActionContext } from "../actions/action-context.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { Spinner } from "../ui/spinner.js";
+import { Card } from "../ui/card.js";
+import { Input } from "../ui/input.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog.js";
+import { showToast } from "../notifications/flash-toasts.js";
+import { useIsMobile } from "../../hooks/use-mobile.js";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../ui/sheet.js";
+import { ImageEditorDialog } from "../fields/image-editor-dialog.js";
+import { FileManagerController, clientErrorNotification, fetchEditableImage, fileManagerAcceptAttribute, fileManagerExpiry, fileManagerSize } from "@alfakit/core";
+import { useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DownloadIcon, FileArchiveIcon, FileIcon, FileImageIcon, FileMusicIcon, FilePlayIcon, FileSpreadsheetIcon, FileTextIcon, FolderIcon, FolderInputIcon, FolderOpenIcon, FolderPlusIcon, FolderTreeIcon, InfoIcon, LayoutGridIcon, LinkIcon, ListIcon, PencilIcon, PresentationIcon, RefreshCwIcon, RotateCcwIcon, SearchIcon, Share2Icon, SquarePenIcon, Trash2Icon, UploadIcon, XIcon } from "lucide-react";
+//#region src/components/file-manager/file-manager.tsx
+const SELECT = "border-input focus-visible:border-ring focus-visible:ring-ring/50 h-9 min-w-0 rounded-md border bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:ring-[3px]";
+const KIND_ICONS = {
+	folder: FolderIcon,
+	image: FileImageIcon,
+	video: FilePlayIcon,
+	audio: FileMusicIcon,
+	pdf: FileTextIcon,
+	text: FileTextIcon,
+	archive: FileArchiveIcon,
+	document: FileTextIcon,
+	spreadsheet: FileSpreadsheetIcon,
+	presentation: PresentationIcon,
+	other: FileIcon
+};
+const SORT_FIELDS = [
+	"name",
+	"size",
+	"modified",
+	"type"
+];
+const IMAGE_EDITOR = {
+	aspectRatios: [null],
+	circle: false
+};
+/**
+* The file manager of alfasix/alfakit-file-manager (schema component `file-manager`): a
+* folder tree, breadcrumbs, grid and list views, sorting, search, multi-selection with
+* mouse and keyboard, drag and drop (uploads and moves), uploads with progress, previews,
+* details, sharing and the trash. Everything is listed, checked and changed by the server.
+*/
+function FileManager({ component }) {
+	return component ? /* @__PURE__ */ jsx(FileManagerView, { schema: component }, `${component.disk}:${component.mode}`) : null;
+}
+function FileManagerView({ schema, onChoose, onCancel }) {
+	const runner = useActionRunner();
+	const page = usePageActionContext();
+	const panel = usePanel();
+	const t = useT();
+	const choice = useChoice();
+	const direction = useDirection();
+	const formatter = useFormatter();
+	const labelId = useId();
+	const hintId = useId();
+	const tt = (key, replacements, fallback) => t(`file-manager.${key}`, replacements, fallback);
+	const environment = () => ({
+		runner,
+		token: page.token,
+		uploadEndpoint: panel.endpoints.upload,
+		uploadChunkEndpoint: panel.endpoints.uploadChunks,
+		uploadChunkSize: panel.uploadChunkSize,
+		t,
+		choice,
+		formatter,
+		notify: (notifications) => notifications.forEach((notification) => showToast(notification)),
+		error: (message) => showToast(clientErrorNotification("file-manager", message))
+	});
+	const [controller] = useState(() => new FileManagerController(schema, environment(), formatter.locale));
+	useEffect(() => {
+		controller.setEnvironment(environment());
+	});
+	const first = useRef(true);
+	useEffect(() => {
+		if (first.current) {
+			first.current = false;
+			return;
+		}
+		controller.setSchema(schema);
+	}, [controller, schema]);
+	useEffect(() => {
+		if (schema.mode === "picker") controller.ensureLoaded();
+		return () => controller.dispose();
+	}, [controller, schema.mode]);
+	const state = useStore(controller.store);
+	const entries = controller.visibleEntries();
+	const selected = controller.selectedEntries();
+	const picker = schema.mode === "picker";
+	const listRef = useRef(null);
+	const items = useRef(/* @__PURE__ */ new Map());
+	const uploadInput = useRef(null);
+	const [foldersOpen, setFoldersOpen] = useState(false);
+	const mobile = useIsMobile();
+	const focusPath = state.focus ?? entries[0]?.path ?? null;
+	const focusItem = (path) => {
+		if (path) requestAnimationFrame(() => items.current.get(path)?.focus());
+	};
+	const columns = () => {
+		const element = listRef.current;
+		if (!element || state.view !== "grid" || typeof getComputedStyle === "undefined") return 1;
+		return Math.max(1, getComputedStyle(element).gridTemplateColumns.split(" ").filter(Boolean).length);
+	};
+	const onItemKeyDown = (event) => {
+		const result = controller.handleKey(event, columns(), direction);
+		if (result.handled) {
+			event.preventDefault();
+			focusItem(result.focus);
+		}
+	};
+	const pointer = useRef("mouse");
+	const onItemClick = (entry, event) => {
+		controller.click(entry.path, {
+			shift: event.shiftKey,
+			toggle: event.metaKey || event.ctrlKey,
+			touch: pointer.current === "touch"
+		});
+	};
+	const onItemDoubleClick = (entry) => {
+		if (picker && entry.type === "file") {
+			if (entry.selectable !== false && entry.value) onChoose?.([entry]);
+			return;
+		}
+		controller.openEntry(entry);
+	};
+	const copying = (event) => event.ctrlKey || event.altKey || event.metaKey;
+	const dropHandlers = (target) => ({
+		onDragOver: (event) => {
+			if (controller.dragOver(target, event.dataTransfer, copying(event))) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		},
+		onDragLeave: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) controller.dragLeave(target);
+		},
+		onDrop: (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			controller.drop(target, event.dataTransfer, copying(event));
+		}
+	});
+	const canWrite = !picker && !state.trash;
+	const single = selected.length === 1 ? selected[0] : void 0;
+	const folderLabel = state.trash ? tt("trash", {}, "Trash") : state.breadcrumbs[state.breadcrumbs.length - 1]?.name ?? tt("root", {}, "Files");
+	const tree = /* @__PURE__ */ jsx(FolderTree, {
+		controller,
+		onOpen: (path) => {
+			setFoldersOpen(false);
+			controller.open(path);
+		},
+		active: state.trash ? null : state.path,
+		dropHandlers: canWrite ? dropHandlers : void 0,
+		dropTarget: state.dropTarget
+	});
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "relative gap-0 overflow-hidden py-0",
+		"data-slot": "file-manager",
+		"data-view": state.view,
+		"data-mode": schema.mode,
+		"aria-labelledby": labelId,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: "sr-only",
+				children: tt("label", {}, "File manager")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "sr-only",
+				role: "status",
+				"aria-live": "polite",
+				children: state.announcement
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2 border-b p-3",
+				"data-slot": "file-manager-toolbar",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						size: "icon-sm",
+						className: "md:hidden",
+						onClick: () => setFoldersOpen(true),
+						"aria-label": tt("toggle_folders", {}, "Show folders"),
+						children: /* @__PURE__ */ jsx(FolderTreeIcon, { "aria-hidden": "true" })
+					}),
+					schema.disks.length > 1 && /* @__PURE__ */ jsxs("label", {
+						className: "flex items-center",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: tt("disk", {}, "Storage")
+						}), /* @__PURE__ */ jsx("select", {
+							className: SELECT,
+							value: state.disk,
+							onChange: (event) => controller.setDisk(event.target.value),
+							children: schema.disks.map((disk) => /* @__PURE__ */ jsx("option", {
+								value: disk.name,
+								children: disk.label
+							}, disk.name))
+						})]
+					}),
+					/* @__PURE__ */ jsx("nav", {
+						"aria-label": tt("breadcrumb", {}, "Folder path"),
+						className: "min-w-0 flex-1",
+						"data-slot": "file-manager-breadcrumb",
+						children: /* @__PURE__ */ jsxs("ol", {
+							className: "flex min-w-0 flex-wrap items-center gap-1 text-sm",
+							children: [/* @__PURE__ */ jsx("li", {
+								className: "flex items-center",
+								children: /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "hover:bg-accent rounded px-1.5 py-1 font-medium",
+									"aria-current": !state.trash && state.path === "" ? "page" : void 0,
+									onClick: () => state.trash ? void controller.showTrash(false) : void controller.open(""),
+									children: tt("root", {}, "Files")
+								})
+							}), state.trash ? /* @__PURE__ */ jsx(Crumb, {
+								current: true,
+								children: tt("trash", {}, "Trash")
+							}) : state.breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsx(Crumb, {
+								current: index === state.breadcrumbs.length - 1,
+								onClick: () => void controller.open(crumb.path),
+								children: crumb.name
+							}, crumb.path))]
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex w-full flex-wrap items-center gap-2 sm:w-auto",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "relative min-w-40 flex-1 sm:flex-none",
+								children: [/* @__PURE__ */ jsx(SearchIcon, {
+									className: "text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2",
+									"aria-hidden": "true"
+								}), /* @__PURE__ */ jsx(Input, {
+									type: "search",
+									value: state.query,
+									onChange: (event) => controller.setQuery(event.target.value),
+									placeholder: tt("search_placeholder", {}, "Search…"),
+									"aria-label": tt("search", {}, "Search in this folder"),
+									className: "h-9 ps-8 sm:w-52",
+									disabled: state.trash
+								})]
+							}),
+							schema.search.recursive && !state.trash && /* @__PURE__ */ jsxs("label", {
+								className: "flex items-center gap-2 text-sm",
+								children: [/* @__PURE__ */ jsx(Checkbox, {
+									checked: state.recursive,
+									onCheckedChange: (checked) => controller.setRecursive(checked === true)
+								}), tt("search_everywhere", {}, "Include subfolders")]
+							}),
+							/* @__PURE__ */ jsxs("label", {
+								className: "flex items-center gap-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: tt("sort", {}, "Sort by")
+								}), /* @__PURE__ */ jsx("select", {
+									className: SELECT,
+									value: state.sort.field,
+									onChange: (event) => controller.setSort(event.target.value, state.sort.direction),
+									children: SORT_FIELDS.map((field) => /* @__PURE__ */ jsx("option", {
+										value: field,
+										children: tt(`sort_${field}`, {}, field)
+									}, field))
+								})]
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "outline",
+								size: "icon-sm",
+								onClick: () => controller.setSort(state.sort.field, state.sort.direction === "asc" ? "desc" : "asc"),
+								"aria-label": state.sort.direction === "asc" ? tt("ascending", {}, "Ascending") : tt("descending", {}, "Descending"),
+								children: state.sort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDownIcon, { "aria-hidden": "true" })
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex rounded-md border",
+								role: "group",
+								"aria-label": tt("view", {}, "View"),
+								children: [/* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: state.view === "grid" ? "secondary" : "ghost",
+									size: "icon-sm",
+									"aria-pressed": state.view === "grid",
+									"aria-label": tt("view_grid", {}, "Grid"),
+									onClick: () => controller.setView("grid"),
+									children: /* @__PURE__ */ jsx(LayoutGridIcon, { "aria-hidden": "true" })
+								}), /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: state.view === "list" ? "secondary" : "ghost",
+									size: "icon-sm",
+									"aria-pressed": state.view === "list",
+									"aria-label": tt("view_list", {}, "List"),
+									onClick: () => controller.setView("list"),
+									children: /* @__PURE__ */ jsx(ListIcon, { "aria-hidden": "true" })
+								})]
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-sm",
+								onClick: () => void controller.refresh(),
+								"aria-label": tt("refresh", {}, "Refresh"),
+								children: /* @__PURE__ */ jsx(RefreshCwIcon, {
+									"aria-hidden": "true",
+									className: cn(state.loading && "animate-spin")
+								})
+							}),
+							!state.trash && controller.can("createFolder") && /* @__PURE__ */ jsxs(Button, {
+								type: "button",
+								variant: "outline",
+								size: "sm",
+								onClick: () => controller.openDialog({ type: "createFolder" }),
+								children: [/* @__PURE__ */ jsx(FolderPlusIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+									className: "max-sm:sr-only",
+									children: tt("new_folder", {}, "New folder")
+								})]
+							}),
+							!state.trash && controller.can("upload") && schema.upload && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
+								type: "button",
+								size: "sm",
+								onClick: () => uploadInput.current?.click(),
+								children: [/* @__PURE__ */ jsx(UploadIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+									className: "max-sm:sr-only",
+									children: tt("upload", {}, "Upload")
+								})]
+							}), /* @__PURE__ */ jsx("input", {
+								ref: uploadInput,
+								type: "file",
+								multiple: true,
+								hidden: true,
+								accept: fileManagerAcceptAttribute(schema.upload.accept),
+								"data-slot": "file-manager-upload-input",
+								onChange: (event) => {
+									if (event.target.files) controller.upload(Array.from(event.target.files));
+									event.target.value = "";
+								}
+							})] }),
+							schema.trash && !picker && /* @__PURE__ */ jsxs(Button, {
+								type: "button",
+								variant: state.trash ? "secondary" : "ghost",
+								size: "sm",
+								"aria-pressed": state.trash,
+								onClick: () => void controller.showTrash(!state.trash),
+								children: [/* @__PURE__ */ jsx(Trash2Icon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+									className: "max-sm:sr-only",
+									children: state.trash ? tt("back_to_files", {}, "Back to files") : tt("trash", {}, "Trash")
+								})]
+							})
+						]
+					})
+				]
+			}),
+			selected.length > 0 && !picker && /* @__PURE__ */ jsxs("div", {
+				className: "bg-muted/50 flex flex-wrap items-center gap-1 border-b px-3 py-2 text-sm",
+				"data-slot": "file-manager-selection",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "me-2 font-medium",
+						children: tt("selected", { count: selected.length }, ":count selected")
+					}),
+					state.trash ? /* @__PURE__ */ jsxs(Fragment$1, { children: [controller.can("restore") && /* @__PURE__ */ jsx(ToolButton, {
+						icon: RotateCcwIcon,
+						onClick: () => void controller.restore(),
+						children: tt("restore", {}, "Restore")
+					}), controller.can("delete") && /* @__PURE__ */ jsx(ToolButton, {
+						icon: Trash2Icon,
+						onClick: () => controller.confirmDelete(),
+						destructive: true,
+						children: tt("delete_permanently", {}, "Delete permanently")
+					})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						single && /* @__PURE__ */ jsx(ToolButton, {
+							icon: single.type === "folder" ? FolderOpenIcon : SearchIcon,
+							onClick: () => controller.openEntry(single),
+							children: single.type === "folder" ? tt("open", {}, "Open") : tt("preview", {}, "Preview")
+						}),
+						controller.can("download") && (single?.type === "file" || controller.can("zip")) && /* @__PURE__ */ jsx(ToolButton, {
+							icon: DownloadIcon,
+							onClick: () => void controller.download(),
+							children: single?.type === "file" ? tt("download", {}, "Download") : tt("download_zip", {}, "Download as zip")
+						}),
+						single && controller.can("rename") && /* @__PURE__ */ jsx(ToolButton, {
+							icon: PencilIcon,
+							onClick: () => controller.openDialog({
+								type: "rename",
+								entry: single
+							}),
+							children: tt("rename", {}, "Rename")
+						}),
+						controller.can("move") && /* @__PURE__ */ jsx(ToolButton, {
+							icon: FolderInputIcon,
+							onClick: () => controller.openDialog({
+								type: "move",
+								paths: state.selection,
+								destination: state.path
+							}),
+							children: tt("move", {}, "Move")
+						}),
+						controller.can("copy") && /* @__PURE__ */ jsx(ToolButton, {
+							icon: CopyIcon,
+							onClick: () => controller.openDialog({
+								type: "copy",
+								paths: state.selection,
+								destination: state.path
+							}),
+							children: tt("copy", {}, "Copy")
+						}),
+						single?.type === "file" && controller.can("share") && schema.share && /* @__PURE__ */ jsx(ToolButton, {
+							icon: Share2Icon,
+							onClick: () => void controller.openShare(single),
+							children: tt("share", {}, "Share")
+						}),
+						/* @__PURE__ */ jsx(ToolButton, {
+							icon: InfoIcon,
+							onClick: () => void controller.showDetails(single),
+							children: tt("details", {}, "Details")
+						}),
+						controller.can("delete") && /* @__PURE__ */ jsx(ToolButton, {
+							icon: Trash2Icon,
+							onClick: () => controller.confirmDelete(),
+							destructive: true,
+							children: tt("delete", {}, "Delete")
+						})
+					] }),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						className: "ms-auto",
+						onClick: () => controller.clearSelection(),
+						"aria-label": tt("clear_selection", {}, "Clear selection"),
+						children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("flex", picker ? "h-[60vh]" : "min-h-[28rem]"),
+				children: [
+					/* @__PURE__ */ jsx("aside", {
+						className: "hidden w-60 shrink-0 overflow-y-auto border-e p-2 md:block",
+						"data-slot": "file-manager-sidebar",
+						children: tree
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "relative min-w-0 flex-1 overflow-y-auto",
+						"data-slot": "file-manager-content",
+						"data-drop-target": state.dropTarget === "" ? "" : void 0,
+						...canWrite ? dropHandlers("") : {},
+						children: [
+							state.trash && state.retentionDays && /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground border-b px-4 py-2 text-xs",
+								children: tt("trash_hint", { days: state.retentionDays }, "Items in the trash are deleted for good after :days days.")
+							}),
+							(state.truncated || state.resultsTruncated) && /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground border-b px-4 py-2 text-xs",
+								role: "note",
+								children: state.resultsTruncated ? tt("search_truncated", {}, "Only the first results are shown. Refine your search.") : tt("truncated", {}, "This folder has more items than can be shown here.")
+							}),
+							/* @__PURE__ */ jsx("p", {
+								id: hintId,
+								className: "sr-only",
+								children: tt("keyboard", {}, "Arrow keys move between items, Shift selects a range, Enter opens.")
+							}),
+							(state.loading || state.searching) && entries.length === 0 ? /* @__PURE__ */ jsxs("div", {
+								className: "flex justify-center py-16",
+								children: [/* @__PURE__ */ jsx(Spinner, {}), /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: tt("loading", {}, "Loading files")
+								})]
+							}) : entries.length === 0 ? /* @__PURE__ */ jsxs("div", {
+								className: "text-muted-foreground flex flex-col items-center gap-2 px-6 py-16 text-center text-sm",
+								"data-slot": "file-manager-empty",
+								children: [
+									/* @__PURE__ */ jsx(FolderOpenIcon, {
+										className: "size-10 opacity-40",
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ jsx("p", {
+										className: "text-foreground font-medium",
+										children: state.query ? tt("no_results", {}, "Nothing matches your search") : state.trash ? tt("empty_trash_state", {}, "The trash is empty") : tt("empty", {}, "This folder is empty")
+									}),
+									!state.query && canWrite && controller.can("upload") && /* @__PURE__ */ jsx("p", { children: tt("empty_hint", {}, "Drop files here or choose Upload.") })
+								]
+							}) : /* @__PURE__ */ jsxs("div", {
+								ref: listRef,
+								role: "listbox",
+								"aria-multiselectable": !picker || schema.multiple === true,
+								"aria-labelledby": labelId,
+								"aria-describedby": hintId,
+								"aria-busy": state.loading || void 0,
+								"data-slot": "file-manager-items",
+								className: cn(state.view === "grid" ? "grid grid-cols-2 gap-3 p-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6" : "flex flex-col p-1", state.loading && "opacity-60"),
+								children: [state.view === "list" && /* @__PURE__ */ jsxs("div", {
+									className: "text-muted-foreground hidden grid-cols-[1fr_7rem_10rem] gap-3 px-3 py-1.5 text-xs font-medium sm:grid",
+									"aria-hidden": "true",
+									children: [
+										/* @__PURE__ */ jsx("span", { children: tt("name", {}, "Name") }),
+										/* @__PURE__ */ jsx("span", {
+											className: "text-end",
+											children: tt("size", {}, "Size")
+										}),
+										/* @__PURE__ */ jsx("span", { children: tt("modified", {}, "Modified") })
+									]
+								}), entries.map((entry) => /* @__PURE__ */ jsx(EntryItem, {
+									entry,
+									view: state.view,
+									selected: state.selection.includes(entry.path),
+									focusable: entry.path === focusPath,
+									dropTarget: state.dropTarget === entry.path,
+									disabled: picker && entry.type === "file" && entry.selectable === false,
+									draggable: canWrite && (controller.can("move") || controller.can("copy")),
+									showLocation: state.results !== null,
+									formatter,
+									tt,
+									ref: (element) => {
+										if (element) items.current.set(entry.path, element);
+										else items.current.delete(entry.path);
+									},
+									onPointerDown: (event) => pointer.current = event.pointerType,
+									onClick: (event) => onItemClick(entry, event),
+									onDoubleClick: () => onItemDoubleClick(entry),
+									onKeyDown: onItemKeyDown,
+									onFocus: () => controller.focus(entry.path),
+									onDragStart: (event) => controller.dragStart(entry.path, event.dataTransfer),
+									onDragEnd: () => controller.dragEnd(),
+									dropHandlers: entry.type === "folder" && canWrite ? dropHandlers(entry.path) : void 0
+								}, entry.path))]
+							}),
+							state.dropTarget === "" && /* @__PURE__ */ jsx("div", {
+								className: "border-primary bg-primary/5 text-primary pointer-events-none absolute inset-2 flex items-center justify-center rounded-lg border-2 border-dashed text-sm font-medium",
+								"data-slot": "file-manager-drop",
+								children: tt("drop_here", { folder: folderLabel }, "Drop files to upload them to :folder")
+							})
+						]
+					}),
+					state.detailsOpen && /* @__PURE__ */ jsx("aside", {
+						className: "hidden w-72 shrink-0 overflow-y-auto border-s md:block",
+						"data-slot": "file-manager-details",
+						children: /* @__PURE__ */ jsx(Details, {
+							controller,
+							tt,
+							formatter
+						})
+					})
+				]
+			}),
+			state.trash && entries.length > 0 && controller.can("delete") && /* @__PURE__ */ jsx("div", {
+				className: "flex justify-end border-t p-3",
+				children: /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					onClick: () => controller.openDialog({ type: "emptyTrash" }),
+					children: [/* @__PURE__ */ jsx(Trash2Icon, { "aria-hidden": "true" }), tt("empty_trash", {}, "Empty trash")]
+				})
+			}),
+			picker && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-end gap-2 border-t p-3",
+				"data-slot": "file-manager-picker-footer",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground me-auto text-sm",
+						children: selected.length > 0 ? tt("selected", { count: controller.chosen().length }, ":count selected") : ""
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: onCancel,
+						children: tt("cancel", {}, "Cancel")
+					}),
+					/* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						disabled: controller.chosen().length === 0,
+						onClick: () => onChoose?.(controller.chosen()),
+						children: [/* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }), tt("picker_choose", {}, "Choose")]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Sheet, {
+				open: foldersOpen,
+				onOpenChange: setFoldersOpen,
+				children: /* @__PURE__ */ jsxs(SheetContent, {
+					side: direction === "rtl" ? "right" : "left",
+					className: "p-4",
+					children: [/* @__PURE__ */ jsx(SheetHeader, {
+						className: "p-0",
+						children: /* @__PURE__ */ jsx(SheetTitle, { children: tt("folders", {}, "Folders") })
+					}), tree]
+				})
+			}),
+			/* @__PURE__ */ jsx(Sheet, {
+				open: state.detailsOpen && mobile,
+				onOpenChange: (open) => !open && controller.closeDetails(),
+				children: /* @__PURE__ */ jsxs(SheetContent, {
+					side: direction === "rtl" ? "left" : "right",
+					className: "p-0",
+					children: [/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: tt("details", {}, "Details") }) }), /* @__PURE__ */ jsx(Details, {
+						controller,
+						tt,
+						formatter,
+						hideHeading: true
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(Uploads, {
+				controller,
+				tt
+			}),
+			/* @__PURE__ */ jsx(Dialogs, {
+				controller,
+				tt,
+				choice,
+				formatter
+			}),
+			/* @__PURE__ */ jsx(Preview, {
+				controller,
+				tt,
+				direction
+			})
+		]
+	});
+}
+function Crumb({ children, current, onClick }) {
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex min-w-0 items-center gap-1",
+		children: [/* @__PURE__ */ jsx(ChevronRightIcon, {
+			className: "text-muted-foreground size-3.5 shrink-0 rtl:rotate-180",
+			"aria-hidden": "true"
+		}), current || !onClick ? /* @__PURE__ */ jsx("span", {
+			className: "truncate px-1.5 py-1 font-medium",
+			"aria-current": "page",
+			children
+		}) : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "hover:bg-accent truncate rounded px-1.5 py-1",
+			onClick,
+			children
+		})]
+	});
+}
+function ToolButton({ icon: IconComponent, children, onClick, destructive }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		variant: "ghost",
+		size: "sm",
+		onClick,
+		className: cn(destructive && "text-destructive hover:text-destructive"),
+		children: [/* @__PURE__ */ jsx(IconComponent, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+			className: "max-md:sr-only",
+			children
+		})]
+	});
+}
+function EntryIcon({ entry, className }) {
+	const IconComponent = KIND_ICONS[entry.kind] ?? FileIcon;
+	return /* @__PURE__ */ jsx(IconComponent, {
+		className: cn(entry.type === "folder" && "text-primary", className),
+		"aria-hidden": "true"
+	});
+}
+function EntryItem({ entry, view, selected, focusable, dropTarget, disabled, draggable, showLocation, formatter, tt, ref, dropHandlers, ...handlers }) {
+	const [broken, setBroken] = useState(false);
+	const size = entry.type === "file" ? fileManagerSize(entry.size, formatter) : "";
+	const modified = entry.modified ? formatter.dateTime(entry.modified) : "";
+	const location = showLocation && entry.path.includes("/") ? entry.path.slice(0, entry.path.lastIndexOf("/")) : null;
+	const thumbnail = entry.thumbnail && !broken ? entry.thumbnail : null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "option",
+		"aria-label": entry.name,
+		"aria-selected": selected,
+		"aria-disabled": disabled || void 0,
+		tabIndex: focusable ? 0 : -1,
+		draggable,
+		"data-slot": "file-manager-item",
+		"data-type": entry.type,
+		"data-kind": entry.kind,
+		"data-selected": selected ? "" : void 0,
+		"data-drop-target": dropTarget ? "" : void 0,
+		title: entry.name,
+		className: cn("group focus-visible:ring-ring/50 relative cursor-default rounded-lg outline-none select-none focus-visible:ring-[3px]", view === "grid" ? "hover:bg-accent/50 flex flex-col gap-2 border p-2" : "hover:bg-accent/50 grid grid-cols-[auto_1fr] items-center gap-3 px-3 py-2 sm:grid-cols-[auto_1fr_7rem_10rem]", selected && "bg-primary/10 border-primary/40 hover:bg-primary/15", dropTarget && "ring-primary ring-2", disabled && "opacity-50"),
+		...handlers,
+		...dropHandlers,
+		children: [view === "grid" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+			className: "bg-muted/60 flex aspect-[4/3] items-center justify-center overflow-hidden rounded-md",
+			children: thumbnail ? /* @__PURE__ */ jsx("img", {
+				src: thumbnail,
+				alt: "",
+				loading: "lazy",
+				draggable: false,
+				className: "size-full object-cover",
+				onError: () => setBroken(true)
+			}) : /* @__PURE__ */ jsx(EntryIcon, {
+				entry,
+				className: "size-10"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 px-0.5",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "truncate text-sm font-medium",
+				children: entry.name
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground truncate text-xs",
+				children: location ?? (entry.type === "folder" ? tt(`kinds.folder`, {}, "Folder") : size)
+			})]
+		})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			thumbnail ? /* @__PURE__ */ jsx("img", {
+				src: thumbnail,
+				alt: "",
+				loading: "lazy",
+				draggable: false,
+				className: "size-8 rounded object-cover",
+				onError: () => setBroken(true)
+			}) : /* @__PURE__ */ jsx(EntryIcon, {
+				entry,
+				className: "size-5"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "truncate text-sm font-medium",
+					children: entry.name
+				}), location && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground truncate text-xs",
+					children: location
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground hidden text-end text-sm tabular-nums sm:block",
+				children: size
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground hidden truncate text-sm sm:block",
+				children: modified
+			})
+		] }), selected && /* @__PURE__ */ jsx(CheckIcon, {
+			className: "bg-primary text-primary-foreground absolute end-1.5 top-1.5 size-4 rounded-full p-0.5",
+			"aria-hidden": "true"
+		})]
+	});
+}
+function FolderTree({ controller, onOpen, active, dropHandlers, dropTarget }) {
+	const t = useT();
+	useStore(controller.store);
+	const renderLevel = (parent, level) => {
+		const folders = controller.children(parent);
+		if (!folders || folders.length === 0) return null;
+		return /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col",
+			role: level === 1 ? void 0 : "group",
+			children: folders.map((folder) => {
+				const expanded = controller.isExpanded(folder.path);
+				return /* @__PURE__ */ jsxs("li", {
+					"data-slot": "file-manager-tree-item",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: cn("hover:bg-accent flex items-center gap-1 rounded-md pe-2 text-sm", active === folder.path && "bg-accent font-medium", dropTarget === folder.path && "ring-primary ring-2"),
+						style: { paddingInlineStart: `${(level - 1) * .75}rem` },
+						...dropHandlers ? dropHandlers(folder.path) : {},
+						children: [folder.hasChildren ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "text-muted-foreground hover:text-foreground rounded p-1",
+							"aria-expanded": expanded,
+							"aria-label": t(expanded ? "file-manager.collapse" : "file-manager.expand", { name: folder.name }, expanded ? "Collapse :name" : "Expand :name"),
+							onClick: () => void controller.toggleFolder(folder.path),
+							children: /* @__PURE__ */ jsx(ChevronRightIcon, {
+								className: cn("size-3.5 transition-transform", expanded ? "rotate-90" : "rtl:rotate-180"),
+								"aria-hidden": "true"
+							})
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "w-5.5 shrink-0",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: "flex min-w-0 flex-1 items-center gap-2 py-1.5 text-start",
+							"aria-current": active === folder.path ? "page" : void 0,
+							onClick: () => onOpen(folder.path),
+							children: [/* @__PURE__ */ jsx(FolderIcon, {
+								className: "text-primary size-4 shrink-0",
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: folder.name
+							})]
+						})]
+					}), expanded && renderLevel(folder.path, level + 1)]
+				}, folder.path);
+			})
+		});
+	};
+	return /* @__PURE__ */ jsxs("nav", {
+		"aria-label": t("file-manager.folders", {}, "Folders"),
+		"data-slot": "file-manager-tree",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: cn("hover:bg-accent flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-start text-sm", active === "" && "bg-accent font-medium", dropTarget === "" && active !== "" && "ring-primary ring-2"),
+			"aria-current": active === "" ? "page" : void 0,
+			onClick: () => onOpen(""),
+			children: [/* @__PURE__ */ jsx(FolderOpenIcon, {
+				className: "text-primary size-4",
+				"aria-hidden": "true"
+			}), t("file-manager.root", {}, "Files")]
+		}), renderLevel("", 1)]
+	});
+}
+function Details({ controller, tt, formatter, hideHeading }) {
+	const state = useStore(controller.store);
+	const details = state.details;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4 p-4",
+		children: [!hideHeading && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-sm font-semibold",
+				children: tt("details", {}, "Details")
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-xs",
+				onClick: () => controller.closeDetails(),
+				"aria-label": tt("close", {}, "Close"),
+				children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+			})]
+		}), !details ? /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: tt("picker_empty", {}, "No file chosen")
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "bg-muted/60 flex aspect-video items-center justify-center overflow-hidden rounded-md",
+				children: details.thumbnail ? /* @__PURE__ */ jsx("img", {
+					src: details.thumbnail,
+					alt: "",
+					className: "size-full object-contain"
+				}) : /* @__PURE__ */ jsx(EntryIcon, {
+					entry: details,
+					className: "size-12"
+				})
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "font-medium break-all",
+				children: details.name
+			}),
+			state.detailsLoading && /* @__PURE__ */ jsx(Spinner, {}),
+			/* @__PURE__ */ jsxs("dl", {
+				className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm",
+				children: [
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: tt("type", {}, "Type"),
+						value: details.mime ?? tt(`kinds.${details.kind}`, {}, details.kind)
+					}),
+					details.type === "file" && /* @__PURE__ */ jsx(DetailRow, {
+						label: tt("size", {}, "Size"),
+						value: fileManagerSize(details.size, formatter)
+					}),
+					details.items !== void 0 && /* @__PURE__ */ jsx(DetailRow, {
+						label: tt("items", {}, "Items"),
+						value: `${formatter.number(details.items)}${details.itemsTruncated ? "+" : ""}`
+					}),
+					details.width && details.height && /* @__PURE__ */ jsx(DetailRow, {
+						label: tt("dimensions", {}, "Dimensions"),
+						value: tt("dimensions_value", {
+							width: formatter.number(details.width),
+							height: formatter.number(details.height)
+						}, ":width × :height px")
+					}),
+					details.trashed ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DetailRow, {
+						label: tt("original_location", {}, "Original location"),
+						value: details.trashed.originalPath
+					}), details.trashed.deletedAt && /* @__PURE__ */ jsx(DetailRow, {
+						label: tt("deleted_at", {}, "Deleted"),
+						value: formatter.dateTime(details.trashed.deletedAt)
+					})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						details.modified && /* @__PURE__ */ jsx(DetailRow, {
+							label: tt("modified", {}, "Modified"),
+							value: formatter.dateTime(details.modified)
+						}),
+						details.location !== void 0 && /* @__PURE__ */ jsx(DetailRow, {
+							label: tt("location", {}, "Location"),
+							value: details.location === "" ? tt("root", {}, "Files") : details.location
+						}),
+						details.links !== void 0 && /* @__PURE__ */ jsx(DetailRow, {
+							label: tt("links", {}, "Links"),
+							value: formatter.number(details.links)
+						})
+					] })
+				]
+			})
+		] })]
+	});
+}
+function DetailRow({ label, value }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+		className: "text-muted-foreground",
+		children: label
+	}), /* @__PURE__ */ jsx("dd", {
+		className: "min-w-0 break-all",
+		children: value
+	})] });
+}
+function Uploads({ controller, tt }) {
+	const state = useStore(controller.store);
+	const formatter = useFormatter();
+	if (state.uploads.length === 0) return null;
+	const done = state.uploads.filter((upload) => upload.status === "done").length;
+	const finished = state.uploads.every((upload) => upload.status === "done" || upload.status === "error");
+	return /* @__PURE__ */ jsxs("section", {
+		className: "bg-popover fixed end-4 bottom-4 z-40 flex max-h-80 w-[min(22rem,calc(100vw-2rem))] flex-col overflow-hidden rounded-lg border shadow-lg",
+		"aria-label": tt("uploads", {}, "Uploads"),
+		"data-slot": "file-manager-uploads",
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "flex items-center gap-2 border-b px-3 py-2 text-sm font-medium",
+			children: [
+				/* @__PURE__ */ jsx(UploadIcon, {
+					className: "size-4",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1",
+					role: "status",
+					children: tt("uploads_summary", {
+						done,
+						total: state.uploads.length
+					}, ":done of :total uploaded")
+				}),
+				finished && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-xs",
+					onClick: () => controller.clearUploads(),
+					"aria-label": tt("dismiss", {}, "Dismiss"),
+					children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+				})
+			]
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-2 overflow-y-auto p-3",
+			children: state.uploads.map((upload) => /* @__PURE__ */ jsxs("li", {
+				className: "flex flex-col gap-1 text-sm",
+				"data-status": upload.status,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate",
+						children: upload.name
+					}), upload.status === "done" ? /* @__PURE__ */ jsx(CheckIcon, {
+						className: "size-4 text-emerald-600",
+						"aria-label": tt("upload_done", {}, "Uploaded")
+					}) : upload.status === "error" ? /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-xs",
+						onClick: () => controller.dismissUpload(upload.id),
+						"aria-label": tt("dismiss", {}, "Dismiss"),
+						children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-xs tabular-nums",
+						children: formatter.percent(upload.progress)
+					})]
+				}), upload.status === "error" ? /* @__PURE__ */ jsx("p", {
+					className: "text-destructive text-xs",
+					role: "alert",
+					children: upload.error ?? tt("upload_failed", {}, "Failed")
+				}) : upload.status !== "done" && /* @__PURE__ */ jsx("div", {
+					role: "progressbar",
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-valuenow": Math.round(upload.progress * 100),
+					"aria-label": tt("upload_progress", {
+						name: upload.name,
+						percent: formatter.percent(upload.progress)
+					}, ":name, :percent uploaded"),
+					className: "bg-muted h-1.5 overflow-hidden rounded-full",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "bg-primary h-full rounded-full transition-[width]",
+						style: { width: `${upload.progress * 100}%` }
+					})
+				})]
+			}, upload.id))
+		})]
+	});
+}
+function Dialogs({ controller, tt, choice, formatter }) {
+	const state = useStore(controller.store);
+	const dialog = state.dialog;
+	const [name, setName] = useState("");
+	const [expiry, setExpiry] = useState("");
+	const [copied, setCopied] = useState(false);
+	const nameId = useId();
+	const errorId = useId();
+	const close = () => controller.closeDialog();
+	const share = controller.component.share;
+	const dialogKey = dialog ? `${dialog.type}:${"entry" in dialog ? dialog.entry.path : ""}` : "";
+	const [openedDialog, setOpenedDialog] = useState("");
+	if (dialogKey !== openedDialog) {
+		setOpenedDialog(dialogKey);
+		if (dialog?.type === "rename") setName(dialog.entry.name);
+		if (dialog?.type === "createFolder") setName("");
+		if (dialog?.type === "share") {
+			setExpiry(String(share?.expiries[0] ?? ""));
+			setCopied(false);
+		}
+	}
+	const error = state.error ? /* @__PURE__ */ jsx("p", {
+		id: errorId,
+		className: "text-destructive text-sm",
+		role: "alert",
+		children: state.error
+	}) : null;
+	const copy = async (url) => {
+		try {
+			await navigator.clipboard.writeText(url);
+			setCopied(true);
+		} catch {
+			setCopied(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Dialog, {
+			open: dialog?.type === "createFolder" || dialog?.type === "rename",
+			onOpenChange: (open) => !open && close(),
+			children: /* @__PURE__ */ jsx(DialogContent, {
+				"data-slot": "file-manager-dialog",
+				children: /* @__PURE__ */ jsxs("form", {
+					className: "flex flex-col gap-4",
+					onSubmit: (event) => {
+						event.preventDefault();
+						if (dialog?.type === "rename") controller.rename(dialog.entry.path, name);
+						else controller.createFolder(name);
+					},
+					children: [
+						/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: dialog?.type === "rename" ? tt("rename_heading", { name: dialog.entry.name }, "Rename “:name”") : tt("new_folder", {}, "New folder") }) }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-2",
+							children: [
+								/* @__PURE__ */ jsx("label", {
+									htmlFor: nameId,
+									className: "text-sm font-medium",
+									children: dialog?.type === "rename" ? tt("name", {}, "Name") : tt("folder_name", {}, "Folder name")
+								}),
+								/* @__PURE__ */ jsx(Input, {
+									id: nameId,
+									value: name,
+									autoFocus: true,
+									onChange: (event) => setName(event.target.value),
+									"aria-invalid": state.error ? true : void 0,
+									"aria-describedby": state.error ? errorId : void 0
+								}),
+								error
+							]
+						}),
+						/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "outline",
+							onClick: close,
+							children: tt("cancel", {}, "Cancel")
+						}), /* @__PURE__ */ jsxs(Button, {
+							type: "submit",
+							disabled: state.busy || name.trim() === "",
+							children: [state.busy && /* @__PURE__ */ jsx(Spinner, {}), dialog?.type === "rename" ? tt("save", {}, "Save") : tt("create", {}, "Create")]
+						})] })
+					]
+				})
+			})
+		}),
+		/* @__PURE__ */ jsx(Dialog, {
+			open: dialog?.type === "move" || dialog?.type === "copy",
+			onOpenChange: (open) => !open && close(),
+			children: /* @__PURE__ */ jsxs(DialogContent, {
+				"data-slot": "file-manager-dialog",
+				children: [
+					/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: dialog?.type === "move" || dialog?.type === "copy" ? choice(`file-manager.${dialog.type}_heading`, dialog.paths.length, {}, dialog.type === "move" ? "Move :count items" : "Copy :count items") : "" }), /* @__PURE__ */ jsx(DialogDescription, { children: tt("destination", {}, "Destination folder") })] }),
+					/* @__PURE__ */ jsx("div", {
+						className: "max-h-72 overflow-y-auto rounded-md border p-2",
+						children: (dialog?.type === "move" || dialog?.type === "copy") && /* @__PURE__ */ jsx(FolderTree, {
+							controller,
+							active: dialog.destination,
+							onOpen: (path) => controller.openDialog({
+								...dialog,
+								destination: path
+							})
+						})
+					}),
+					error,
+					/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: close,
+						children: tt("cancel", {}, "Cancel")
+					}), /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						disabled: state.busy,
+						onClick: () => {
+							if (dialog?.type === "move" || dialog?.type === "copy") controller.transfer(dialog.type, dialog.paths, dialog.destination);
+						},
+						children: [state.busy && /* @__PURE__ */ jsx(Spinner, {}), dialog?.type === "copy" ? tt("copy_here", {}, "Copy here") : tt("move_here", {}, "Move here")]
+					})] })
+				]
+			})
+		}),
+		/* @__PURE__ */ jsx(Dialog, {
+			open: dialog?.type === "delete" || dialog?.type === "emptyTrash",
+			onOpenChange: (open) => !open && close(),
+			children: /* @__PURE__ */ jsxs(DialogContent, {
+				"data-slot": "file-manager-dialog",
+				children: [
+					/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: dialog?.type === "delete" ? choice("file-manager.delete_heading", dialog.paths.length, {}, "Delete :count items?") : tt("empty_trash_heading", {}, "Empty the trash?") }), /* @__PURE__ */ jsx(DialogDescription, { children: dialog?.type === "delete" && !dialog.permanent ? tt("delete_description_trash", {}, "They go to the trash, where you can restore them.") : dialog?.type === "emptyTrash" ? tt("empty_trash_description", {}, "Everything in the trash is deleted for good.") : tt("delete_description", {}, "They are deleted for good. This cannot be undone.") })] }),
+					error,
+					/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: close,
+						children: tt("cancel", {}, "Cancel")
+					}), /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "destructive",
+						disabled: state.busy,
+						onClick: () => {
+							if (dialog?.type === "delete") controller.remove(dialog.paths);
+							else controller.emptyTrash();
+						},
+						children: [state.busy && /* @__PURE__ */ jsx(Spinner, {}), dialog?.type === "emptyTrash" ? tt("empty_trash", {}, "Empty trash") : dialog?.type === "delete" && dialog.permanent ? tt("delete_permanently", {}, "Delete permanently") : tt("delete", {}, "Delete")]
+					})] })
+				]
+			})
+		}),
+		/* @__PURE__ */ jsx(Dialog, {
+			open: dialog?.type === "share",
+			onOpenChange: (open) => !open && close(),
+			children: /* @__PURE__ */ jsx(DialogContent, {
+				"data-slot": "file-manager-dialog",
+				children: dialog?.type === "share" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: tt("share_heading", { name: dialog.entry.name }, "Share “:name”") }), /* @__PURE__ */ jsx(DialogDescription, { children: tt("share_hint", {}, "Anyone with the link can open this file, without signing in.") })] }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-end gap-2",
+						children: [/* @__PURE__ */ jsxs("label", {
+							className: "flex min-w-40 flex-1 flex-col gap-1 text-sm",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: tt("share_expiry", {}, "Link expires after")
+							}), /* @__PURE__ */ jsxs("select", {
+								className: SELECT,
+								value: expiry,
+								onChange: (event) => setExpiry(event.target.value),
+								children: [(share?.expiries ?? []).map((minutes) => {
+									const label = fileManagerExpiry(minutes);
+									return /* @__PURE__ */ jsx("option", {
+										value: minutes,
+										children: choice(`file-manager.${label.key}`, label.count, {}, `:count`)
+									}, minutes);
+								}), share?.publicLinks && /* @__PURE__ */ jsx("option", {
+									value: "never",
+									children: tt("expiry_never", {}, "Never")
+								})]
+							})]
+						}), /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							disabled: state.busy,
+							onClick: () => void controller.createLink(expiry === "never" ? null : Number(expiry)),
+							children: [state.busy ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(LinkIcon, { "aria-hidden": "true" }), tt("create_link", {}, "Create link")]
+						})]
+					}),
+					error,
+					dialog.url && /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "text-sm font-medium",
+								children: tt("link", {}, "Shareable link")
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ jsx(Input, {
+									readOnly: true,
+									value: dialog.url,
+									dir: "ltr",
+									onFocus: (event) => event.target.select(),
+									"aria-label": tt("link", {}, "Shareable link")
+								}), /* @__PURE__ */ jsxs(Button, {
+									type: "button",
+									variant: "outline",
+									onClick: () => void copy(dialog.url ?? ""),
+									children: [copied ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": "true" }), copied ? tt("link_copied", {}, "Link copied") : tt("copy_link", {}, "Copy link")]
+								})]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground text-xs",
+								children: dialog.expiresAt ? tt("link_expires", { date: formatter.dateTime(dialog.expiresAt) }, "Expires :date") : tt("link_never_expires", {}, "Never expires")
+							})
+						]
+					}),
+					share?.publicLinks && /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						"data-slot": "file-manager-links",
+						children: [/* @__PURE__ */ jsx("h4", {
+							className: "text-sm font-medium",
+							children: tt("links", {}, "Links")
+						}), dialog.links === null ? /* @__PURE__ */ jsx(Spinner, {}) : dialog.links.length === 0 ? /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-sm",
+							children: tt("no_links", {}, "No links yet")
+						}) : /* @__PURE__ */ jsx("ul", {
+							className: "flex max-h-48 flex-col divide-y overflow-y-auto rounded-md border",
+							children: dialog.links.map((link) => /* @__PURE__ */ jsxs("li", {
+								className: "flex items-center gap-2 px-3 py-2 text-sm",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "min-w-0 flex-1",
+										children: [/* @__PURE__ */ jsx("p", {
+											className: cn("truncate", link.expired && "text-muted-foreground line-through"),
+											dir: "ltr",
+											children: link.url
+										}), /* @__PURE__ */ jsxs("p", {
+											className: "text-muted-foreground text-xs",
+											children: [
+												link.expired ? tt("link_expired", {}, "Expired") : link.expiresAt ? tt("link_expires", { date: formatter.dateTime(link.expiresAt) }, "Expires :date") : tt("link_never_expires", {}, "Never expires"),
+												" · ",
+												choice("file-manager.link_downloads", link.downloads, {}, ":count downloads")
+											]
+										})]
+									}),
+									link.url && !link.expired && /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "icon-xs",
+										onClick: () => void copy(link.url ?? ""),
+										"aria-label": tt("copy_link", {}, "Copy link"),
+										children: /* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": "true" })
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "sm",
+										className: "text-destructive",
+										onClick: () => void controller.revokeLink(link.id),
+										children: tt("revoke", {}, "Revoke")
+									})
+								]
+							}, link.id))
+						})]
+					}),
+					/* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: close,
+						children: tt("close", {}, "Close")
+					}) })
+				] })
+			})
+		})
+	] });
+}
+function Preview({ controller, tt, direction }) {
+	const preview = useStore(controller.store).preview;
+	const data = preview?.data;
+	const [editing, setEditing] = useState(null);
+	const previous = controller.previewSibling(-1);
+	const next = controller.previewSibling(1);
+	const edit = async () => {
+		if (!data?.url || !preview) return;
+		const source = await fetchEditableImage(data.url, preview.entry.name);
+		if (!source) return;
+		setEditing({
+			file: source,
+			resolve: (edited) => {
+				setEditing(null);
+				if (edited && edited !== source) controller.saveEditedImage(edited);
+			}
+		});
+	};
+	const onKeyDown = (event) => {
+		const back = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+		const forward = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+		if (event.target instanceof HTMLElement && [
+			"VIDEO",
+			"AUDIO",
+			"INPUT"
+		].includes(event.target.tagName)) return;
+		if (event.key === back && previous) controller.openPreview(previous);
+		if (event.key === forward && next) controller.openPreview(next);
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Dialog, {
+		open: preview !== null,
+		onOpenChange: (open) => !open && controller.closePreview(),
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "flex max-h-[90vh] flex-col sm:max-w-4xl",
+			"data-slot": "file-manager-preview",
+			onKeyDown,
+			children: [
+				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, {
+					className: "truncate pe-8",
+					children: preview?.entry.name
+				}) }),
+				/* @__PURE__ */ jsx("div", {
+					className: "bg-muted/40 flex min-h-64 flex-1 items-center justify-center overflow-auto rounded-md",
+					children: !data ? /* @__PURE__ */ jsx(Spinner, {}) : !data.previewable ? /* @__PURE__ */ jsxs("div", {
+						className: "text-muted-foreground flex flex-col items-center gap-2 p-8 text-center text-sm",
+						children: [preview && /* @__PURE__ */ jsx(EntryIcon, {
+							entry: preview.entry,
+							className: "size-12"
+						}), /* @__PURE__ */ jsx("p", { children: tt("preview_unavailable", {}, "There is no preview for this type of file.") })]
+					}) : data.kind === "image" ? /* @__PURE__ */ jsx("img", {
+						src: data.url,
+						alt: preview?.entry.name ?? "",
+						className: "max-h-[70vh] max-w-full object-contain"
+					}) : data.kind === "pdf" ? /* @__PURE__ */ jsx("iframe", {
+						src: data.url,
+						title: preview?.entry.name ?? "",
+						className: "h-[70vh] w-full rounded-md bg-white"
+					}) : data.kind === "video" ? /* @__PURE__ */ jsx("video", {
+						src: data.url,
+						controls: true,
+						className: "max-h-[70vh] max-w-full",
+						children: /* @__PURE__ */ jsx("track", { kind: "captions" })
+					}) : data.kind === "audio" ? /* @__PURE__ */ jsx("audio", {
+						src: data.url,
+						controls: true,
+						className: "w-full max-w-md"
+					}) : /* @__PURE__ */ jsx("pre", {
+						className: "h-full max-h-[70vh] w-full overflow-auto p-4 font-mono text-xs whitespace-pre-wrap",
+						dir: "auto",
+						tabIndex: 0,
+						children: data.text
+					})
+				}),
+				data?.truncated && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					children: tt("preview_truncated", {}, "Only the beginning of this file is shown.")
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, {
+					className: "flex-row flex-wrap items-center sm:justify-between",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex gap-1",
+						children: [/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "outline",
+							size: "icon-sm",
+							disabled: !previous,
+							onClick: () => previous && void controller.openPreview(previous),
+							"aria-label": tt("previous", {}, "Previous file"),
+							children: /* @__PURE__ */ jsx(ChevronLeftIcon, {
+								className: "rtl:rotate-180",
+								"aria-hidden": "true"
+							})
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "outline",
+							size: "icon-sm",
+							disabled: !next,
+							onClick: () => next && void controller.openPreview(next),
+							"aria-label": tt("next", {}, "Next file"),
+							children: /* @__PURE__ */ jsx(ChevronRightIcon, {
+								className: "rtl:rotate-180",
+								"aria-hidden": "true"
+							})
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-2",
+						children: [data?.editable && data.url && /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							onClick: () => void edit(),
+							children: [/* @__PURE__ */ jsx(SquarePenIcon, { "aria-hidden": "true" }), tt("edit_image", {}, "Edit image")]
+						}), data?.downloadUrl && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "sm",
+							asChild: true,
+							children: /* @__PURE__ */ jsxs("a", {
+								href: data.downloadUrl,
+								children: [/* @__PURE__ */ jsx(DownloadIcon, { "aria-hidden": "true" }), tt("download", {}, "Download")]
+							})
+						})]
+					})]
+				})
+			]
+		})
+	}), /* @__PURE__ */ jsx(ImageEditorDialog, {
+		request: editing,
+		options: IMAGE_EDITOR
+	})] });
+}
+//#endregion
+export { FileManager, FileManagerView };
+
+//# sourceMappingURL=file-manager.js.map