@ecsplico/editor 2.0.0 → 2.1.1

package/dist/tree/react/DocumentTree.js

@@ -1,453 +1,162 @@
 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 { DRAG_MIME } from "../tree-items.js";
+import { rowOf } from "../tree-model.js";
+import { useTreeModel } from "./use-tree-model.js";
+import { useRef } 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 label with the part the title filter matched highlighted. */
+function Label({ label, match }) {
+	if (!match) return /* @__PURE__ */ jsx(Fragment$1, { children: label });
+	const [at, length] = match;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		label.slice(0, at),
+		/* @__PURE__ */ jsx("mark", {
+			className: "rounded-sm bg-primary/20 text-inherit",
+			children: label.slice(at, at + length)
+		}),
+		label.slice(at + length)
+	] });
+}
 /** 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 }) {
+function DocumentTree({ store, editor, selectedFolder, 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);
-		};
-	}, [
+	const binding = useTreeModel({
+		store,
 		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));
-	}
+		selectedFolder,
+		onSelectedFolderChange
+	});
+	const treeElement = useRef(null);
+	if (!binding) return null;
+	const { model, state } = binding;
+	const { view, creatingFolder } = state;
 	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));
+		model.toggle(item.key);
 	}
 	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);
+		const { expandable, open } = rowOf(state, item, t);
+		if (event.key === "Enter" || event.key === " ") model.activate(item);
+		else if (event.key === "ArrowRight" && expandable && !open) model.setOpen(item.key, true);
+		else if (event.key === "ArrowLeft" && expandable && open) model.setOpen(item.key, 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;
+		const payload = model.dragStart(item);
+		if (!payload) return event.preventDefault();
 		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);
+		const verdict = model.dragOver(item);
+		if (!verdict) return;
+		if (verdict.ok) event.preventDefault();
+		event.dataTransfer.dropEffect = verdict.ok ? "move" : "none";
 	}
 	function onDragLeave(event, item) {
-		if (dropKey === item.key && !event.currentTarget.contains(event.relatedTarget)) setDropKey(null);
+		if (!event.currentTarget.contains(event.relatedTarget)) model.dragLeave(item);
 	}
-	function endDrag() {
-		dragging.current = null;
-		setDropKey(null);
-	}
-	async function onDrop(event, target) {
-		const raw = event.dataTransfer.getData(DRAG_MIME);
-		endDrag();
-		if (!raw) return;
+	function onDrop(event, item) {
+		if (!state.drag) 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);
+		model.drop(item);
 	}
 	const filterMenu = (item) => {
-		const hidden = hiddenBelow(item);
+		const { filterKinds, hiddenKinds } = rowOf(state, item, t);
 		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),
+				filterKinds.map((kind) => /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+					checked: !hiddenKinds.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, {
+				hiddenKinds.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", {
+	const renderRow = (item, level) => {
+		const row = rowOf(state, item, t);
+		const add = model.addMenu(item);
+		const filtered = row.hiddenKinds.length > 0;
+		const refused = row.drop && !row.drop.ok ? row.drop.reason : null;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__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),
+			"aria-expanded": row.expandable ? row.open : void 0,
+			"aria-selected": row.active ? 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", row.active && "bg-primary/10 font-medium text-primary", row.selected && "bg-muted", row.drop?.ok && "ring-1 ring-primary", refused && "bg-destructive/10 ring-1 ring-destructive"),
+			draggable: model.isDraggable(item),
+			onClick: () => model.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,
+			onDrop: (event) => onDrop(event, item),
+			onDragEnd: () => model.dragEnd(),
 			children: [
-				chevron ? /* @__PURE__ */ jsx("span", {
+				row.expandable ? /* @__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")
+						className: cn("size-3.5 text-muted-foreground transition-transform", row.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", {
+				row.renaming ? /* @__PURE__ */ jsxs("div", {
 					className: "flex min-w-0 flex-1 flex-col gap-0.5",
 					children: [/* @__PURE__ */ jsx(Input, {
-						value: renaming.draft,
+						value: row.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
-						}),
+						"aria-invalid": !!row.renaming.error,
+						onChange: (event) => model.setRenameDraft(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);
+							if (event.key === "Enter") model.commitRename();
+							else if (event.key === "Escape") model.cancelRename();
 						},
-						onBlur: () => void onRenameBlur()
-					}), renameError && /* @__PURE__ */ jsx("p", {
+						onBlur: () => void model.blurRename()
+					}), row.renaming.error && /* @__PURE__ */ jsx("p", {
 						className: "text-xs text-destructive",
 						role: "alert",
 						onClick: (event) => event.stopPropagation(),
-						children: renameError
+						children: row.renaming.error
 					})]
 				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "min-w-0 flex-1 truncate",
 						title: item.label,
-						children: item.label
+						children: /* @__PURE__ */ jsx(Label, {
+							label: item.label,
+							match: row.match
+						})
 					}),
 					item.hasSummary && /* @__PURE__ */ jsx(Icon, {
 						name: "i-lucide-text-quote",
@@ -456,7 +165,7 @@ function DocumentTree({ store, editor, selectedFolder: controlledFolder, onSelec
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex shrink-0",
 						onClick: (event) => event.stopPropagation(),
-						children: [showFilter(item) && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+						children: [row.showFilter && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 							asChild: true,
 							children: /* @__PURE__ */ jsx(Button, {
 								size: "icon-xs",
@@ -483,7 +192,7 @@ function DocumentTree({ store, editor, selectedFolder: controlledFolder, onSelec
 									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,
+										onSelect: entry.run,
 										children: [/* @__PURE__ */ jsx(Icon, { name: entry.icon }), entry.label]
 									}, entry.label))] }, index))
 								})] }),
@@ -496,11 +205,11 @@ function DocumentTree({ store, editor, selectedFolder: controlledFolder, onSelec
 									variant: "ghost",
 									className: "text-destructive hover:text-destructive",
 									"aria-label": t("tree.delete"),
-									disabled: removing === item.key,
-									onClick: () => void removeItem(item),
+									disabled: row.removing,
+									onClick: () => void model.remove(item),
 									children: /* @__PURE__ */ jsx(Icon, {
-										name: removing === item.key ? "i-lucide-loader-circle" : "i-lucide-trash-2",
-										className: cn(removing === item.key && "animate-spin")
+										name: row.removing ? "i-lucide-loader-circle" : "i-lucide-trash-2",
+										className: cn(row.removing && "animate-spin")
 									})
 								})
 							]
@@ -508,28 +217,56 @@ function DocumentTree({ store, editor, selectedFolder: controlledFolder, onSelec
 					})
 				] })
 			]
-		});
+		}), refused && /* @__PURE__ */ jsx("p", {
+			className: "px-2 pt-0.5 text-xs text-destructive",
+			role: "status",
+			children: refused
+		})] });
 	};
 	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);
-		})
+		children: list.map((item) => /* @__PURE__ */ jsx("li", {
+			role: "none",
+			children: /* @__PURE__ */ jsxs(Collapsible, {
+				open: rowOf(state, item, t).open,
+				children: [renderRow(item, 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", {
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						name: "i-lucide-search",
+						className: "pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-muted-foreground"
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						value: state.filterText,
+						className: "h-7 pr-7 pl-7 text-sm md:text-sm",
+						placeholder: t("tree.filterText.placeholder"),
+						"aria-label": t("tree.filterText.placeholder"),
+						onChange: (event) => model.setFilterText(event.target.value),
+						onKeyDown: (event) => {
+							if (event.key === "Escape") model.setFilterText("");
+						}
+					}),
+					state.filterText && /* @__PURE__ */ jsx(Button, {
+						size: "icon-xs",
+						variant: "ghost",
+						className: "absolute top-1/2 right-1 -translate-y-1/2",
+						"aria-label": t("tree.filterText.clear"),
+						onClick: () => model.setFilterText(""),
+						children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-x" })
+					})
+				]
+			}),
+			view.hasKindFilters && /* @__PURE__ */ jsx("div", {
 				className: "flex items-center",
 				children: /* @__PURE__ */ jsxs(Button, {
 					size: "xs",
@@ -546,27 +283,28 @@ function DocumentTree({ store, editor, selectedFolder: controlledFolder, onSelec
 					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
-					}),
+					"aria-invalid": !!creatingFolder.error,
+					onChange: (event) => model.setFolderDraft(event.target.value),
 					onKeyDown: (event) => {
-						if (event.key === "Enter") commitCreateFolder();
-						else if (event.key === "Escape") setCreatingFolder(null);
+						if (event.key === "Enter") model.commitCreateFolder();
+						else if (event.key === "Escape") model.cancelCreateFolder();
 					},
-					onBlur: () => setCreatingFolder(null)
-				}), folderError && /* @__PURE__ */ jsx("p", {
+					onBlur: () => model.cancelCreateFolder()
+				}), creatingFolder.error && /* @__PURE__ */ jsx("p", {
 					className: "px-0.5 text-xs text-destructive",
 					role: "alert",
-					children: folderError
+					children: creatingFolder.error
 				})]
 			}),
-			!tree && !virtual ? /* @__PURE__ */ jsx("p", {
+			!state.tree && !state.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", {
+				children: state.tree === null ? t("tree.loadFailed") : t("tree.loading")
+			}) : renderItems(view.items, 0),
+			view.noMatches && /* @__PURE__ */ jsx("p", {
+				className: "px-2.5 py-1.5 text-sm text-muted-foreground",
+				children: t("tree.noMatches")
+			}),
+			view.isEmpty && /* @__PURE__ */ jsx("p", {
 				className: "px-2.5 py-1.5 text-sm text-muted-foreground",
 				children: t("tree.empty")
 			})