@ecsplico/editor 0.0.0-stage → 2.0.0

package/dist/tree/react/DocumentTree.js

@@ -0,0 +1,579 @@
+import { useEditorI18n } from "../../react/use-editor-i18n.js";
+import { cn } from "../../react/ui/utils.js";
+import { Icon } from "../../react/Icon.js";
+import { useStore } from "../../react/use-store.js";
+import { useEditorSettings } from "../../react/settings.js";
+import { Button } from "../../react/ui/button.js";
+import { revealBlockInEditor } from "../../outline/heading-outline.js";
+import { compositeJSON, compositeKindsOf } from "../../features/composites/nodes.js";
+import { moveBlockInto } from "../../features/composites/outline.js";
+import { pickFiles } from "../../features/media/upload.js";
+import { useNotifier } from "../../react/use-notifier.js";
+import { Input } from "../../react/ui/input.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../../react/ui/dropdown-menu.js";
+import { useFileImport } from "../../features/media/react.js";
+import { remapFolderPath } from "../folder-paths.js";
+import { Collapsible, CollapsibleContent } from "../../react/ui/collapsible.js";
+import { DRAG_MIME, EMPTY_OUTLINE, VIRTUAL_ROOT, ancestorKeys, applyNodeFilters, canDrop, collectFolderPaths, collectKeys, compositeInsertPos, dragPayloadOf, filterKinds, folderItem, folderNamesIn, holdsComposites, isDraggable, joinPath, outlineItems, parentPath, readOutline, virtualRootItem } from "../tree-items.js";
+import { useTreeView } from "./use-tree-view.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+//#region src/tree/react/DocumentTree.tsx
+const OUTLINE_DEBOUNCE_MS = 150;
+const EMPTY_DOCUMENTS = [];
+const EMPTY_KINDS = [];
+const REVEAL_ON_HOVER = "opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100";
+const isOutlineItem = (item) => item.type === "composite" || item.type === "heading";
+/** The file browser of a document store: folders and documents with their drag and drop, the open document's outline below it. */
+function DocumentTree({ store, editor, selectedFolder: controlledFolder, onSelectedFolderChange, documentActions, className }) {
+	const { t } = useEditorI18n();
+	const { nodeFilters, expanded, model } = useTreeView();
+	const { settings } = useEditorSettings();
+	const { importFiles } = useFileImport(editor);
+	const notify = useNotifier(editor);
+	const tree = useStore(store.tree);
+	const documents = useStore(store.documents) ?? EMPTY_DOCUMENTS;
+	const activeId = useStore(store.activeId);
+	const structure = settings.blocks.structure;
+	const virtual = settings.blocks.treeRoot === "file" && structure === "composite" && !!editor;
+	const treeElement = useRef(null);
+	const [ownFolder, setOwnFolder] = useState("");
+	const selectedFolder = controlledFolder ?? ownFolder;
+	const selectedFolderRef = useRef(selectedFolder);
+	selectedFolderRef.current = selectedFolder;
+	const onSelectedFolderChangeRef = useRef(onSelectedFolderChange);
+	onSelectedFolderChangeRef.current = onSelectedFolderChange;
+	const setSelectedFolder = useCallback((folder) => {
+		selectedFolderRef.current = folder;
+		setOwnFolder(folder);
+		onSelectedFolderChangeRef.current?.(folder);
+	}, []);
+	/** Virtual mode: block ID of the selected `folder`/`document` composite; `null` = the document itself. */
+	const [virtualTarget, setVirtualTarget] = useState(null);
+	const [collapsedOutline, setCollapsedOutline] = useState([]);
+	const [dropKey, setDropKey] = useState(null);
+	const dragging = useRef(null);
+	const [removing, setRemoving] = useState(null);
+	const [renaming, setRenamingState] = useState(null);
+	const renamingRef = useRef(null);
+	const setRenaming = (next) => {
+		renamingRef.current = next;
+		setRenamingState(next);
+	};
+	const [creatingFolder, setCreatingFolderState] = useState(null);
+	const creatingFolderRef = useRef(null);
+	const setCreatingFolder = (next) => {
+		creatingFolderRef.current = next;
+		setCreatingFolderState(next);
+	};
+	const kinds = useMemo(() => editor ? compositeKindsOf(editor) : EMPTY_KINDS, [editor]);
+	const [outline, setOutline] = useState(EMPTY_OUTLINE);
+	useEffect(() => {
+		setOutline(readOutline(editor, structure, t));
+		if (!editor) return;
+		let timer;
+		const onUpdate = () => {
+			clearTimeout(timer);
+			timer = setTimeout(() => setOutline(readOutline(editor, structure, t)), OUTLINE_DEBOUNCE_MS);
+		};
+		editor.on("update", onUpdate);
+		return () => {
+			clearTimeout(timer);
+			editor.off("update", onUpdate);
+		};
+	}, [
+		editor,
+		structure,
+		t
+	]);
+	const activeFolder = documents.find((d) => d.id === activeId)?.folder;
+	useEffect(() => {
+		if (virtual) model.expand([VIRTUAL_ROOT]);
+	}, [virtual, model]);
+	useEffect(() => {
+		model.expand(ancestorKeys(activeFolder ?? ""));
+		if (activeFolder !== void 0) setSelectedFolder(activeFolder);
+	}, [
+		activeFolder,
+		model,
+		setSelectedFolder
+	]);
+	useEffect(() => {
+		if (activeId) model.expand([`doc:${activeId}`]);
+	}, [activeId, model]);
+	useEffect(() => {
+		if (!tree) return;
+		const paths = /* @__PURE__ */ new Set();
+		collectFolderPaths(tree, paths);
+		if (!paths.has(selectedFolderRef.current)) setSelectedFolder("");
+	}, [tree, setSelectedFolder]);
+	/** A folder moved from `from` to `to`: its open/selected state follows it. */
+	function followFolderMove(from, to) {
+		model.followFolderMove(from, to);
+		setSelectedFolder(remapFolderPath(selectedFolderRef.current, from, to));
+		model.expand(ancestorKeys(parentPath(to)));
+	}
+	/** Makes a composite's children visible in the outline again. */
+	function openOutline(blockId) {
+		setCollapsedOutline((current) => current.filter((key) => key !== `outline:${blockId}`));
+	}
+	function selectItem(item) {
+		if (renamingRef.current?.item.key === item.key) return;
+		if (item.key === "vroot") {
+			setVirtualTarget(null);
+			return;
+		}
+		if (item.type === "document") {
+			setSelectedFolder(item.folder ?? "");
+			store.open(item.id).catch(() => void 0);
+		} else setSelectedFolder(item.path ?? "");
+	}
+	function selectOutline(item) {
+		if (editor && !editor.isDestroyed) revealBlockInEditor(editor, {
+			id: item.blockId ?? null,
+			pos: item.pos
+		});
+		if (virtual && item.blockId && (item.kind === "folder" || item.kind === "document")) setVirtualTarget(item.blockId);
+	}
+	const outlineList = outlineItems(outline.nodes, kinds, selectOutline);
+	const unfilteredItems = virtual ? [virtualRootItem(documents.find((d) => d.id === activeId)?.title ?? t("tree.rootFallback"), outlineList, selectItem)] : tree ? [folderItem(tree, activeId, outlineList, selectItem)] : [];
+	const items = applyNodeFilters(unfilteredItems, nodeFilters);
+	const isEmpty = !virtual && !!tree && !tree.folders.length && !tree.documents.length;
+	const isOpen = (item) => isOutlineItem(item) ? !collapsedOutline.includes(item.key) : expanded.includes(item.key);
+	function setOpen(item, open) {
+		if (isOutlineItem(item)) setCollapsedOutline((current) => open ? current.filter((key) => key !== item.key) : current.includes(item.key) ? current : [...current, item.key]);
+		else if (open) model.expand([item.key]);
+		else model.expanded.set(model.expanded.get().filter((key) => key !== item.key));
+	}
+	function onChevronClick(event, item) {
+		if (item.type === "root" || item.type === "folder") return;
+		event.stopPropagation();
+		setOpen(item, !isOpen(item));
+	}
+	function activate(item) {
+		item.onSelect?.();
+		if (item.type === "root" || item.type === "folder") setOpen(item, !isOpen(item));
+	}
+	function onRowKeyDown(event, item) {
+		if (event.target !== event.currentTarget) return;
+		const expandable = item.type === "root" || item.type === "folder" || !!item.children?.length;
+		if (event.key === "Enter" || event.key === " ") activate(item);
+		else if (event.key === "ArrowRight" && expandable && !isOpen(item)) setOpen(item, true);
+		else if (event.key === "ArrowLeft" && expandable && isOpen(item)) setOpen(item, false);
+		else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			const rows = [...treeElement.current?.querySelectorAll("[role=\"treeitem\"]") ?? []];
+			rows[rows.indexOf(event.currentTarget) + (event.key === "ArrowDown" ? 1 : -1)]?.focus();
+		} else return;
+		event.preventDefault();
+	}
+	const kindsOf = (item) => filterKinds(item, {
+		structure,
+		activeId,
+		kinds,
+		t
+	});
+	const hiddenBelow = (item) => nodeFilters[item.key] ?? [];
+	const isFiltered = (item) => hiddenBelow(item).length > 0;
+	const showFilter = (item) => kindsOf(item).length > 0 && (item.type === "root" || item.type === "folder" || !!item.children?.length || isFiltered(item));
+	const visibleKeys = collectKeys(unfilteredItems, /* @__PURE__ */ new Set());
+	const hasFilters = Object.entries(nodeFilters).some(([key, hidden]) => hidden.length > 0 && visibleKeys.has(key));
+	async function importIntoComposite(blockId) {
+		const files = await pickFiles("*/*");
+		if (!files.length || !editor || editor.isDestroyed) return;
+		await importFiles(editor, files, compositeInsertPos(editor, blockId));
+		if (blockId) openOutline(blockId);
+	}
+	function createCompositeFolder(blockId) {
+		if (!editor || editor.isDestroyed) return;
+		const pos = compositeInsertPos(editor, blockId);
+		editor.chain().insertContentAt(pos, compositeJSON("folder")).setTextSelection(pos + 2).focus().scrollIntoView().run();
+		if (blockId) openOutline(blockId);
+	}
+	async function createDocumentIn(folder) {
+		setSelectedFolder(folder);
+		const doc = await store.create(void 0, folder).catch(() => void 0);
+		if (!doc) return;
+		model.expand(ancestorKeys(folder));
+		await store.open(doc.id).catch(() => void 0);
+	}
+	const folderError = creatingFolder?.draft.trim() ? store.validateName(creatingFolder.draft, folderNamesIn(tree, creatingFolder.parent)) : null;
+	function startCreateFolder(parent) {
+		setSelectedFolder(parent);
+		setCreatingFolder({
+			parent,
+			draft: ""
+		});
+	}
+	async function commitCreateFolder() {
+		const current = creatingFolderRef.current;
+		if (!current) return;
+		if (!current.draft.trim()) {
+			setCreatingFolder(null);
+			return;
+		}
+		if (folderError) return;
+		setCreatingFolder(null);
+		if (await store.createFolder(joinPath(current.parent, current.draft.trim())).then(() => true, () => false)) model.expand(ancestorKeys(current.parent));
+	}
+	const renameErrorOf = (current) => !current || current.draft.trim() === current.item.label ? null : store.validateName(current.draft, folderNamesIn(tree, parentPath(current.item.path), current.item.path));
+	const renameError = renameErrorOf(renaming);
+	async function commitRename() {
+		const current = renamingRef.current;
+		if (!current) return;
+		if (renameErrorOf(current)) return;
+		const name = current.draft.trim();
+		setRenaming(null);
+		if (name === current.item.label) return;
+		const to = joinPath(parentPath(current.item.path), name);
+		if (await store.moveFolder(current.item.path, to).then(() => true, () => false)) followFolderMove(current.item.path, to);
+	}
+	function onRenameBlur() {
+		const current = renamingRef.current;
+		if (!current) return;
+		const error = renameErrorOf(current);
+		if (error) {
+			notify({
+				kind: "warning",
+				title: t("tree.folder.renameFailed"),
+				description: error
+			});
+			setRenaming(null);
+			return;
+		}
+		return commitRename();
+	}
+	async function restore(removed) {
+		const restored = await removed.restore().catch(() => void 0);
+		if (restored) await store.open(restored.id).catch(() => void 0);
+	}
+	async function removeWithUndo(id, folder) {
+		const removed = await store.remove(id, folder).catch(() => void 0);
+		if (!removed) return;
+		toast(t("tree.removed"), {
+			description: removed.title,
+			icon: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-trash-2" }),
+			action: {
+				label: t("tree.undo"),
+				onClick: () => {
+					restore(removed);
+				}
+			}
+		});
+	}
+	async function removeItem(item) {
+		setRemoving(item.key);
+		try {
+			if (item.type === "document") await removeWithUndo(item.id, item.folder ?? "");
+			else await store.removeFolder(item.path).catch(() => void 0);
+		} finally {
+			setRemoving(null);
+		}
+	}
+	/**
+	* What can be created below `item`: folders of the store take documents and sub-folders, the open file (as the root or
+	* as a document row) and its Ordner/Dokument composites take Ordner and imported Dokument Bausteine. Other rows take
+	* nothing. Folders also list „Umbenennen“ here: renaming a document happens in the editor's title field.
+	*/
+	function addMenu(item) {
+		const groups = [];
+		if (item.key !== "vroot" && (item.type === "root" || item.type === "folder")) {
+			const path = item.path;
+			groups.push([{
+				label: t("tree.menu.newDocument"),
+				icon: "i-lucide-file-plus",
+				onSelect: () => void createDocumentIn(path)
+			}, {
+				label: item.type === "root" ? t("tree.menu.newFolder") : t("tree.menu.newSubfolder"),
+				icon: "i-lucide-folder-plus",
+				onSelect: () => startCreateFolder(path)
+			}]);
+		} else if (holdsComposites(item, {
+			structure,
+			editor,
+			activeId
+		})) {
+			const blockId = item.blockId ?? null;
+			groups.push([{
+				label: t("tree.menu.newCompositeFolder"),
+				icon: "i-lucide-folder-plus",
+				onSelect: () => {
+					createCompositeFolder(blockId);
+					if (!blockId) model.expand([item.key]);
+				}
+			}, {
+				label: t("tree.menu.importFile"),
+				icon: "i-lucide-file-up",
+				onSelect: () => {
+					importIntoComposite(blockId);
+					if (!blockId) model.expand([item.key]);
+				}
+			}]);
+		}
+		if (item.type === "folder") groups.push([{
+			label: t("tree.menu.rename"),
+			icon: "i-lucide-pencil",
+			onSelect: () => setRenaming({
+				item,
+				draft: item.label
+			})
+		}]);
+		return groups;
+	}
+	const isDraggable$1 = (item) => renaming?.item.key !== item.key && isDraggable(item, virtual);
+	function onDragStart(event, item) {
+		if (!isDraggable$1(item)) return event.preventDefault();
+		const payload = dragPayloadOf(item);
+		dragging.current = payload;
+		event.dataTransfer.setData(DRAG_MIME, JSON.stringify(payload));
+		event.dataTransfer.effectAllowed = "move";
+	}
+	function onDragOver(event, item) {
+		if (!canDrop(dragging.current, item, {
+			virtual,
+			editor
+		})) return;
+		event.preventDefault();
+		event.dataTransfer.dropEffect = "move";
+		setDropKey(item.key);
+	}
+	function onDragLeave(event, item) {
+		if (dropKey === item.key && !event.currentTarget.contains(event.relatedTarget)) setDropKey(null);
+	}
+	function endDrag() {
+		dragging.current = null;
+		setDropKey(null);
+	}
+	async function onDrop(event, target) {
+		const raw = event.dataTransfer.getData(DRAG_MIME);
+		endDrag();
+		if (!raw) return;
+		event.preventDefault();
+		const source = JSON.parse(raw);
+		if (!canDrop(source, target, {
+			virtual,
+			editor
+		})) return;
+		if (source.type === "composite") {
+			const targetId = target.key === "vroot" ? null : target.blockId;
+			if (editor && moveBlockInto(editor, source.blockId, targetId) && targetId) openOutline(targetId);
+			return;
+		}
+		const targetPath = target.path;
+		if (source.type === "document") {
+			if (await store.move(source.id, targetPath).then(() => true, () => false)) model.expand(ancestorKeys(targetPath));
+			return;
+		}
+		const to = joinPath(targetPath, source.path.slice(source.path.lastIndexOf("/") + 1));
+		if (await store.moveFolder(source.path, to).then(() => true, () => false)) followFolderMove(source.path, to);
+	}
+	const filterMenu = (item) => {
+		const hidden = hiddenBelow(item);
+		return /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "start",
+			className: "w-auto",
+			children: [
+				/* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("tree.filter.show") }),
+				kindsOf(item).map((kind) => /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+					checked: !hidden.includes(kind.id),
+					onCheckedChange: (visible) => model.setKindHidden(item.key, kind.id, !visible),
+					onSelect: (event) => event.preventDefault(),
+					children: [/* @__PURE__ */ jsx(Icon, { name: kind.icon }), kind.label]
+				}, kind.id)),
+				hidden.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onSelect: () => model.clearFilter(item.key),
+					children: [/* @__PURE__ */ jsx(Icon, { name: "i-lucide-filter-x" }), t("tree.filter.reset")]
+				})] })
+			]
+		});
+	};
+	const renderRow = (item, open, level) => {
+		const chevron = item.type === "root" || item.type === "folder" || !!item.children?.length;
+		const selectedInVirtual = virtual && (item.key === "vroot" ? virtualTarget === null : !!item.blockId && item.blockId === virtualTarget);
+		const add = addMenu(item);
+		const filtered = isFiltered(item);
+		return /* @__PURE__ */ jsxs("div", {
+			role: "treeitem",
+			tabIndex: 0,
+			"aria-level": level + 1,
+			"aria-expanded": chevron ? open : void 0,
+			"aria-selected": item.id !== void 0 && item.id === activeId ? true : void 0,
+			className: cn("group flex w-full cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-sm select-none outline-none hover:bg-muted/60 focus-visible:ring-1 focus-visible:ring-ring", item.id !== void 0 && item.id === activeId && "bg-primary/10 font-medium text-primary", item.type !== "document" && item.path === selectedFolder && "bg-muted", selectedInVirtual && "bg-muted", dropKey === item.key && "ring-1 ring-primary"),
+			draggable: isDraggable$1(item),
+			onClick: () => activate(item),
+			onKeyDown: (event) => onRowKeyDown(event, item),
+			onDragStart: (event) => onDragStart(event, item),
+			onDragOver: (event) => onDragOver(event, item),
+			onDragLeave: (event) => onDragLeave(event, item),
+			onDrop: (event) => void onDrop(event, item),
+			onDragEnd: endDrag,
+			children: [
+				chevron ? /* @__PURE__ */ jsx("span", {
+					className: "flex shrink-0",
+					onClick: (event) => onChevronClick(event, item),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "i-lucide-chevron-right",
+						className: cn("size-3.5 text-muted-foreground transition-transform", open && "rotate-90")
+					})
+				}) : isOutlineItem(item) && /* @__PURE__ */ jsx("span", { className: "size-3.5 shrink-0" }),
+				/* @__PURE__ */ jsx(Icon, { name: item.icon }),
+				renaming?.item.key === item.key ? /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-0.5",
+					children: [/* @__PURE__ */ jsx(Input, {
+						value: renaming.draft,
+						className: "h-6 min-w-0 px-2 text-xs md:text-xs",
+						autoFocus: true,
+						"aria-label": t("tree.folder.name"),
+						"aria-invalid": !!renameError,
+						onChange: (event) => setRenaming({
+							item: renaming.item,
+							draft: event.target.value
+						}),
+						onFocus: (event) => event.currentTarget.select(),
+						onClick: (event) => event.stopPropagation(),
+						onKeyDown: (event) => {
+							event.stopPropagation();
+							if (event.key === "Enter") commitRename();
+							else if (event.key === "Escape") setRenaming(null);
+						},
+						onBlur: () => void onRenameBlur()
+					}), renameError && /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-destructive",
+						role: "alert",
+						onClick: (event) => event.stopPropagation(),
+						children: renameError
+					})]
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate",
+						title: item.label,
+						children: item.label
+					}),
+					item.hasSummary && /* @__PURE__ */ jsx(Icon, {
+						name: "i-lucide-text-quote",
+						className: "size-3.5 text-muted-foreground"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0",
+						onClick: (event) => event.stopPropagation(),
+						children: [showFilter(item) && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, {
+								size: "icon-xs",
+								variant: filtered ? "secondary" : "ghost",
+								className: cn(!filtered && REVEAL_ON_HOVER),
+								title: t("tree.filter.title"),
+								"aria-label": t("tree.filter.title"),
+								children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-filter" })
+							})
+						}), filterMenu(item)] }), /* @__PURE__ */ jsxs("div", {
+							className: "flex opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 has-data-[state=open]:opacity-100",
+							children: [
+								add.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx(Button, {
+										size: "icon-xs",
+										variant: "ghost",
+										title: t("tree.add"),
+										"aria-label": t("tree.add"),
+										children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-plus" })
+									})
+								}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+									align: "start",
+									className: "w-auto",
+									onCloseAutoFocus: (event) => event.preventDefault(),
+									children: add.map((group, index) => /* @__PURE__ */ jsxs("div", { children: [index > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), group.map((entry) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+										onSelect: entry.onSelect,
+										children: [/* @__PURE__ */ jsx(Icon, { name: entry.icon }), entry.label]
+									}, entry.label))] }, index))
+								})] }),
+								item.type === "document" && documentActions?.({
+									id: item.id,
+									title: item.label
+								}),
+								(item.type === "document" || item.type === "folder") && /* @__PURE__ */ jsx(Button, {
+									size: "icon-xs",
+									variant: "ghost",
+									className: "text-destructive hover:text-destructive",
+									"aria-label": t("tree.delete"),
+									disabled: removing === item.key,
+									onClick: () => void removeItem(item),
+									children: /* @__PURE__ */ jsx(Icon, {
+										name: removing === item.key ? "i-lucide-loader-circle" : "i-lucide-trash-2",
+										className: cn(removing === item.key && "animate-spin")
+									})
+								})
+							]
+						})]
+					})
+				] })
+			]
+		});
+	};
+	const renderItems = (list, level) => /* @__PURE__ */ jsx("ul", {
+		role: level === 0 ? "tree" : "group",
+		"aria-label": level === 0 ? t("tree.aria") : void 0,
+		ref: level === 0 ? treeElement : void 0,
+		className: cn("m-0 list-none p-0", level > 0 && "ml-3 border-l border-border pl-1"),
+		children: list.map((item) => {
+			const open = isOpen(item);
+			return /* @__PURE__ */ jsx("li", {
+				role: "none",
+				children: /* @__PURE__ */ jsxs(Collapsible, {
+					open,
+					children: [renderRow(item, open, level), item.children?.length ? /* @__PURE__ */ jsx(CollapsibleContent, { children: renderItems(item.children, level + 1) }) : null]
+				})
+			}, item.key);
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-2", className),
+		children: [
+			hasFilters && /* @__PURE__ */ jsx("div", {
+				className: "flex items-center",
+				children: /* @__PURE__ */ jsxs(Button, {
+					size: "xs",
+					variant: "secondary",
+					onClick: () => model.clearAllFilters(),
+					children: [/* @__PURE__ */ jsx(Icon, { name: "i-lucide-filter-x" }), t("tree.filter.reset")]
+				})
+			}),
+			creatingFolder && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx(Input, {
+					value: creatingFolder.draft,
+					className: "h-7 text-sm md:text-sm",
+					autoFocus: true,
+					placeholder: creatingFolder.parent ? t("tree.folder.placeholderIn", { parent: creatingFolder.parent }) : t("tree.folder.placeholder"),
+					"aria-label": t("tree.folder.name"),
+					"aria-invalid": !!folderError,
+					onChange: (event) => setCreatingFolder({
+						parent: creatingFolder.parent,
+						draft: event.target.value
+					}),
+					onKeyDown: (event) => {
+						if (event.key === "Enter") commitCreateFolder();
+						else if (event.key === "Escape") setCreatingFolder(null);
+					},
+					onBlur: () => setCreatingFolder(null)
+				}), folderError && /* @__PURE__ */ jsx("p", {
+					className: "px-0.5 text-xs text-destructive",
+					role: "alert",
+					children: folderError
+				})]
+			}),
+			!tree && !virtual ? /* @__PURE__ */ jsx("p", {
+				className: "px-2.5 py-1.5 text-sm text-muted-foreground",
+				children: tree === null ? t("tree.loadFailed") : t("tree.loading")
+			}) : renderItems(items, 0),
+			isEmpty && /* @__PURE__ */ jsx("p", {
+				className: "px-2.5 py-1.5 text-sm text-muted-foreground",
+				children: t("tree.empty")
+			})
+		]
+	});
+}
+//#endregion
+export { DocumentTree };
+
+//# sourceMappingURL=DocumentTree.js.map