@ecsplico/editor 1.0.0 → 2.1.0

package/dist/tree/DocumentTree.js

@@ -1,16 +1,9 @@
 import { useUiKit } from "../vue/kit/use-ui-kit.js";
-import { useEditorSettings } from "../vue/settings.js";
 import { useEditorI18n } from "../vue/use-editor-i18n.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 { remapFolderPath } from "./folder-paths.js";
-import { DRAG_MIME, EMPTY_OUTLINE, ancestorKeys, applyNodeFilters, canDrop, collectFolderPaths, collectKeys, collectParentKeys, compositeInsertPos, dragPayloadOf, filterKinds, folderItem, folderNamesIn, holdsComposites, isDraggable, joinPath, outlineItems, parentPath, readOutline, virtualRootItem } from "./tree-items.js";
-import { useStoreRef } from "../vue/store-ref.js";
-import { useFileImport } from "../features/media/vue.js";
-import { useTreeView } from "./tree-view.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref, useModel, watch, withCtx, withKeys, withModifiers } from "vue";
+import { DRAG_MIME } from "./tree-items.js";
+import { rowOf } from "./tree-model.js";
+import { useTreeModel } from "./use-tree-model.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useModel, withCtx, withKeys, withModifiers } from "vue";
 //#region src/tree/DocumentTree.vue
 const _hoisted_1 = { class: "flex flex-col gap-2" };
 const _hoisted_2 = {
@@ -30,28 +23,38 @@ const _hoisted_5 = {
 	key: 2,
 	class: "px-2.5 py-1.5 text-sm text-[var(--sk-muted)]"
 };
-const _hoisted_6 = [
+const _hoisted_6 = { class: "w-full" };
+const _hoisted_7 = [
 	"draggable",
 	"onDragstart",
 	"onDragover",
 	"onDragleave",
 	"onDrop"
 ];
-const _hoisted_7 = {
+const _hoisted_8 = {
 	key: 1,
 	class: "size-3.5 shrink-0"
 };
-const _hoisted_8 = {
+const _hoisted_9 = {
 	key: 2,
 	class: "flex min-w-0 flex-1 flex-col gap-0.5"
 };
-const _hoisted_9 = ["title"];
-const _hoisted_10 = { class: "flex opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 has-data-[state=open]:opacity-100" };
-const _hoisted_11 = {
+const _hoisted_10 = ["title"];
+const _hoisted_11 = { class: "rounded-sm bg-[color-mix(in_oklab,var(--sk-primary)_20%,transparent)] text-inherit" };
+const _hoisted_12 = { class: "flex opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 has-data-[state=open]:opacity-100" };
+const _hoisted_13 = {
+	key: 0,
+	class: "px-2 pt-0.5 text-xs text-[var(--sk-danger)]",
+	role: "status"
+};
+const _hoisted_14 = {
 	key: 4,
 	class: "px-2.5 py-1.5 text-sm text-[var(--sk-muted)]"
 };
-const OUTLINE_DEBOUNCE_MS = 150;
+const _hoisted_15 = {
+	key: 5,
+	class: "px-2.5 py-1.5 text-sm text-[var(--sk-muted)]"
+};
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "DocumentTree",
 	props: /*@__PURE__*/ mergeModels({
@@ -66,357 +69,117 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		/** The folder new documents, folders and host imports go to. Reset to `''` when it is deleted or moved away. */
 		const selectedFolder = useModel(__props, "selectedFolder");
-		const { expanded, nodeFilters, model } = useTreeView();
-		const { expand } = model;
 		const { t } = useEditorI18n();
-		const { importFiles } = useFileImport(() => props.editor);
-		const { settings } = useEditorSettings();
-		const { Button: UButton, DropdownMenu: UDropdownMenu, Icon: UIcon, Input: UInput, Tree: UTree, notifier } = useUiKit();
-		const notify = notifier();
-		const tree = useStoreRef(() => props.store.tree);
-		const storedDocuments = useStoreRef(() => props.store.documents);
-		const documents = computed(() => storedDocuments.value ?? []);
-		const activeId = useStoreRef(() => props.store.activeId);
-		const editor = computed(() => props.editor);
-		/** Virtual mode: block ID of the selected `folder`/`document` composite; `null` = the document itself. */
-		const virtualTarget = ref(null);
-		function selectItem(item) {
-			if (renamingKey.value === item.key) return;
-			if (item.key === "vroot") {
-				virtualTarget.value = null;
-				return;
-			}
-			if (item.type === "document") {
-				selectedFolder.value = item.folder ?? "";
-				props.store.open(item.id).catch(() => void 0);
-			} else selectedFolder.value = item.path ?? "";
-		}
-		const fsItems = computed(() => tree.value ? [folderItem(tree.value, activeId.value, outlineItems$1.value, selectItem)] : []);
-		const isEmpty = computed(() => !virtual.value && !!tree.value && !tree.value.folders.length && !tree.value.documents.length);
-		const virtualRoot = computed(() => virtualRootItem(documents.value.find((d) => d.id === activeId.value)?.title ?? t("tree.rootFallback"), outlineItems$1.value, selectItem));
-		const unfilteredItems = computed(() => virtual.value ? [virtualRoot.value] : fsItems.value);
-		const items = computed(() => applyNodeFilters(unfilteredItems.value, nodeFilters.value));
-		computed(() => settings.value.blocks.structure === "composite" && !!editor.value);
-		const kinds = computed(() => editor.value ? compositeKindsOf(editor.value) : []);
-		/**
-		* What is loaded decides the view: a composite file (open document, composite structure) is the drawer's single root
-		* when the `blocks.treeRoot` setting says so; otherwise (no document open, headings structure, or nesting files in
-		* folders allowed) the drawer shows the folders of the store.
-		*/
-		const virtual = computed(() => settings.value.blocks.treeRoot === "file" && settings.value.blocks.structure === "composite" && !!editor.value);
-		watch(virtual, (isVirtual) => isVirtual && expand(["vroot"]), { immediate: true });
-		const outline = shallowRef(EMPTY_OUTLINE);
-		function refreshOutline() {
-			outline.value = readOutline(editor.value, settings.value.blocks.structure, t);
+		const { Button: UButton, DropdownMenu: UDropdownMenu, Icon: UIcon, Input: UInput, Tree: UTree } = useUiKit();
+		const { model, state } = useTreeModel({
+			store: () => props.store,
+			editor: () => props.editor,
+			selectedFolder
+		});
+		const row = (item) => rowOf(state.value, item, t);
+		/** Why dropping the drag on `item` is refused, while the pointer is over it. */
+		function refusal(item) {
+			const drop = row(item).drop;
+			return drop && !drop.ok ? drop.reason : null;
 		}
-		let outlineTimer;
-		watch(editor, (instance, _previous, onCleanup) => {
-			refreshOutline();
-			if (!instance) return;
-			const onUpdate = () => {
-				clearTimeout(outlineTimer);
-				outlineTimer = setTimeout(refreshOutline, OUTLINE_DEBOUNCE_MS);
-			};
-			instance.on("update", onUpdate);
-			onCleanup(() => {
-				clearTimeout(outlineTimer);
-				instance.off("update", onUpdate);
-			});
-		}, { immediate: true });
-		watch(() => settings.value.blocks.structure, refreshOutline);
-		function selectOutline(item) {
-			revealOutlineItem(item);
-			if (virtual.value && item.blockId && (item.kind === "folder" || item.kind === "document")) virtualTarget.value = item.blockId;
+		/** UTree reports the keys of the rows it wants open; the model decides what that changes. */
+		function onExpanded(next) {
+			const wanted = new Set(next);
+			const open = new Set(state.value.view.open);
+			for (const key of wanted) if (!open.has(key)) model.value.setOpen(key, true);
+			for (const key of open) if (!wanted.has(key)) model.value.setOpen(key, false);
 		}
-		function revealOutlineItem(item) {
-			if (editor.value && !editor.value.isDestroyed) revealBlockInEditor(editor.value, {
-				id: item.blockId ?? null,
-				pos: item.pos
-			});
+		/** The label split around the part the title filter matched, `null` when it did not match here. */
+		function labelParts(item) {
+			const match = row(item).match;
+			if (!match) return null;
+			const [at, length] = match;
+			return [
+				item.label.slice(0, at),
+				item.label.slice(at, at + length),
+				item.label.slice(at + length)
+			];
 		}
-		const outlineItems$1 = computed(() => outlineItems(outline.value.nodes, kinds.value, selectOutline));
-		const collapsedOutline = ref([]);
-		const outlineParentKeys = computed(() => collectParentKeys(outlineItems$1.value, []));
-		const treeExpanded = computed({
-			get: () => [...expanded.value, ...outlineParentKeys.value.filter((key) => !collapsedOutline.value.includes(key))],
-			set: (value) => {
-				const open = new Set(value);
-				expanded.value = value.filter((key) => !outlineParentKeys.value.includes(key));
-				collapsedOutline.value = outlineParentKeys.value.filter((key) => !open.has(key));
-			}
-		});
 		function onChevronClick(event, item) {
 			if (item.type === "root" || item.type === "folder") return;
 			event.stopPropagation();
-			if (item.type === "composite" || item.type === "heading") {
-				collapsedOutline.value = collapsedOutline.value.includes(item.key) ? collapsedOutline.value.filter((key) => key !== item.key) : [...collapsedOutline.value, item.key];
-				return;
-			}
-			expanded.value = expanded.value.includes(item.key) ? expanded.value.filter((key) => key !== item.key) : [...expanded.value, item.key];
+			model.value.toggle(item.key);
 		}
-		/** The kinds `item`'s filter can hide below it. */
-		const filterKinds$1 = (item) => filterKinds(item, {
-			structure: settings.value.blocks.structure,
-			activeId: activeId.value,
-			kinds: kinds.value,
-			t
-		});
-		const hiddenBelow = (item) => nodeFilters.value[item.key] ?? [];
-		const isFiltered = (item) => hiddenBelow(item).length > 0;
-		const showFilter = (item) => filterKinds$1(item).length > 0 && (item.type === "root" || item.type === "folder" || !!item.children?.length || isFiltered(item));
 		function filterMenu(item) {
-			const hidden = hiddenBelow(item);
+			const { filterKinds, hiddenKinds } = row(item);
 			const groups = [[{
 				type: "label",
 				label: t("tree.filter.show")
-			}, ...filterKinds$1(item).map((kind) => ({
+			}, ...filterKinds.map((kind) => ({
 				label: kind.label,
 				icon: kind.icon,
 				type: "checkbox",
-				checked: !hidden.includes(kind.id),
-				onUpdateChecked: (visible) => model.setKindHidden(item.key, kind.id, !visible),
+				checked: !hiddenKinds.includes(kind.id),
+				onUpdateChecked: (visible) => model.value.setKindHidden(item.key, kind.id, !visible),
 				onSelect: (event) => event.preventDefault()
 			}))]];
-			if (hidden.length) groups.push([{
+			if (hiddenKinds.length) groups.push([{
 				label: t("tree.filter.reset"),
 				icon: "i-lucide-filter-x",
-				onSelect: () => model.clearFilter(item.key)
+				onSelect: () => model.value.clearFilter(item.key)
 			}]);
 			return groups;
 		}
-		const hasFilters = computed(() => {
-			const keys = collectKeys(unfilteredItems.value, /* @__PURE__ */ new Set());
-			return Object.entries(nodeFilters.value).some(([key, hidden]) => hidden.length > 0 && keys.has(key));
-		});
-		watch(tree, (value) => {
-			if (!value) return;
-			const paths = /* @__PURE__ */ new Set();
-			collectFolderPaths(value, paths);
-			if (!paths.has(selectedFolder.value)) selectedFolder.value = "";
-		});
-		const activeFolder = computed(() => documents.value.find((d) => d.id === activeId.value)?.folder);
-		watch(activeFolder, (folder) => {
-			expand(ancestorKeys(folder ?? ""));
-			if (folder !== void 0) selectedFolder.value = folder;
-		}, { immediate: true });
-		watch(activeId, (id) => id && expand([`doc:${id}`]), { immediate: true });
-		/** A folder moved from `from` to `to`: its open/selected state follows it. */
-		function followFolderMove(from, to) {
-			model.followFolderMove(from, to);
-			selectedFolder.value = remapFolderPath(selectedFolder.value, from, to);
-			expand(ancestorKeys(parentPath(to)));
-		}
-		/** Makes a composite's children visible in the outline again. */
-		function openOutline(blockId) {
-			collapsedOutline.value = collapsedOutline.value.filter((key) => key !== `outline:${blockId}`);
-		}
-		async function importIntoComposite(blockId) {
-			const files = await pickFiles("*/*");
-			const instance = editor.value;
-			if (!files.length || !instance || instance.isDestroyed) return;
-			await importFiles(instance, files, compositeInsertPos(instance, blockId));
-			if (blockId) openOutline(blockId);
-		}
-		function createCompositeFolder(blockId) {
-			const instance = editor.value;
-			if (!instance || instance.isDestroyed) return;
-			const pos = compositeInsertPos(instance, blockId);
-			instance.chain().insertContentAt(pos, compositeJSON("folder")).setTextSelection(pos + 2).focus().scrollIntoView().run();
-			if (blockId) openOutline(blockId);
-		}
-		async function createDocumentIn(folder) {
-			selectedFolder.value = folder;
-			const doc = await props.store.create(void 0, folder).catch(() => void 0);
-			if (!doc) return;
-			expand(ancestorKeys(folder));
-			await props.store.open(doc.id).catch(() => void 0);
-		}
-		const creatingFolder = ref(false);
-		const folderDraft = ref("");
-		/** Folder path the folder being named is created in. */
-		const folderParent = ref("");
-		const folderError = computed(() => folderDraft.value.trim() ? props.store.validateName(folderDraft.value, folderNamesIn(tree.value, folderParent.value)) : null);
-		function startCreateFolder(parent) {
-			selectedFolder.value = parent;
-			folderParent.value = parent;
-			folderDraft.value = "";
-			creatingFolder.value = true;
-		}
-		async function commitCreateFolder() {
-			if (!creatingFolder.value) return;
-			if (!folderDraft.value.trim()) {
-				creatingFolder.value = false;
-				return;
-			}
-			if (folderError.value) return;
-			creatingFolder.value = false;
-			const parent = folderParent.value;
-			if (await props.store.createFolder(joinPath(parent, folderDraft.value.trim())).then(() => true, () => false)) expand(ancestorKeys(parent));
-		}
-		/**
-		* 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: settings.value.blocks.structure,
-				editor: editor.value,
-				activeId: activeId.value
-			})) {
-				const blockId = item.blockId ?? null;
-				groups.push([{
-					label: t("tree.menu.newCompositeFolder"),
-					icon: "i-lucide-folder-plus",
-					onSelect: () => {
-						createCompositeFolder(blockId);
-						if (!blockId) expand([item.key]);
-					}
-				}, {
-					label: t("tree.menu.importFile"),
-					icon: "i-lucide-file-up",
-					onSelect: () => {
-						importIntoComposite(blockId);
-						if (!blockId) expand([item.key]);
-					}
-				}]);
-			}
-			if (item.type === "folder") groups.push([{
-				label: t("tree.menu.rename"),
-				icon: "i-lucide-pencil",
-				onSelect: () => startRename(item)
-			}]);
-			return groups;
-		}
-		const renamingKey = ref(null);
-		const renamingItem = shallowRef(null);
-		const renameDraft = ref("");
-		function startRename(item) {
-			renamingItem.value = item;
-			renamingKey.value = item.key;
-			renameDraft.value = item.label;
-		}
-		const renameError = computed(() => {
-			const item = renamingItem.value;
-			if (!item || renamingKey.value === null || renameDraft.value.trim() === item.label) return null;
-			return props.store.validateName(renameDraft.value, folderNamesIn(tree.value, parentPath(item.path), item.path));
-		});
-		function cancelRename() {
-			renamingKey.value = null;
-			renamingItem.value = null;
-		}
-		function onRenameBlur() {
-			if (renamingKey.value === null) return;
-			if (renameError.value) {
-				notify({
-					title: t("tree.folder.renameFailed"),
-					description: renameError.value,
-					kind: "warning",
-					icon: "i-lucide-circle-alert"
-				});
-				cancelRename();
-				return;
-			}
-			return commitRename();
-		}
-		async function commitRename() {
-			const item = renamingItem.value;
-			if (!item || renamingKey.value === null) return;
-			if (renameError.value) return;
-			const name = renameDraft.value.trim();
-			cancelRename();
-			if (name === item.label) return;
-			const to = joinPath(parentPath(item.path), name);
-			if (await props.store.moveFolder(item.path, to).then(() => true, () => false)) followFolderMove(item.path, to);
-		}
-		async function removeWithUndo(id, folder) {
-			const removed = await props.store.remove(id, folder).catch(() => void 0);
-			if (!removed) return;
-			notify({
-				title: t("tree.removed"),
-				description: removed.title,
-				icon: "i-lucide-trash-2",
-				action: {
-					label: t("tree.undo"),
-					onClick: () => restore(removed)
-				}
-			});
-		}
-		async function restore(removed) {
-			const restored = await removed.restore().catch(() => void 0);
-			if (restored) await props.store.open(restored.id).catch(() => void 0);
-		}
-		function removeItem(item) {
-			if (item.type === "document") return removeWithUndo(item.id, item.folder ?? "");
-			return props.store.removeFolder(item.path).catch(() => void 0);
-		}
-		const dragging = ref(null);
-		const dropKey = ref(null);
-		function isDraggable$1(item) {
-			return renamingKey.value !== item.key && isDraggable(item, virtual.value);
+			return model.value.addMenu(item).map((group) => group.map((entry) => ({
+				label: entry.label,
+				icon: entry.icon,
+				onSelect: entry.run
+			})));
 		}
 		function onDragStart(event, item) {
-			if (!isDraggable$1(item) || !event.dataTransfer) return event.preventDefault();
-			const payload = dragPayloadOf(item);
-			dragging.value = payload;
+			const payload = model.value.dragStart(item);
+			if (!payload) return event.preventDefault();
+			if (!event.dataTransfer) return model.value.dragEnd();
 			event.dataTransfer.setData(DRAG_MIME, JSON.stringify(payload));
 			event.dataTransfer.effectAllowed = "move";
 		}
 		function onDragOver(event, item) {
-			if (!canDrop(dragging.value, item, {
-				virtual: virtual.value,
-				editor: editor.value
-			})) return;
-			event.preventDefault();
-			if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
-			dropKey.value = item.key;
+			const verdict = model.value.dragOver(item);
+			if (!verdict) return;
+			if (verdict.ok) event.preventDefault();
+			if (event.dataTransfer) event.dataTransfer.dropEffect = verdict.ok ? "move" : "none";
 		}
 		function onDragLeave(event, item) {
-			if (dropKey.value === item.key && !event.currentTarget.contains(event.relatedTarget)) dropKey.value = null;
+			if (!event.currentTarget.contains(event.relatedTarget)) model.value.dragLeave(item);
 		}
-		function endDrag() {
-			dragging.value = null;
-			dropKey.value = null;
-		}
-		async function onDrop(event, target) {
-			const raw = event.dataTransfer?.getData(DRAG_MIME);
-			endDrag();
-			if (!raw) return;
+		function onDrop(event, item) {
+			if (!state.value.drag) return;
 			event.preventDefault();
-			const source = JSON.parse(raw);
-			if (!canDrop(source, target, {
-				virtual: virtual.value,
-				editor: editor.value
-			})) return;
-			if (source.type === "composite") {
-				const instance = editor.value;
-				const targetId = target.key === "vroot" ? null : target.blockId;
-				if (instance && moveBlockInto(instance, source.blockId, targetId) && targetId) openOutline(targetId);
-				return;
-			}
-			const targetPath = target.path;
-			if (source.type === "document") {
-				if (await props.store.move(source.id, targetPath).then(() => true, () => false)) expand(ancestorKeys(targetPath));
-				return;
-			}
-			const to = joinPath(targetPath, source.path.slice(source.path.lastIndexOf("/") + 1));
-			if (await props.store.moveFolder(source.path, to).then(() => true, () => false)) followFolderMove(source.path, to);
+			return model.value.drop(item);
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
-				hasFilters.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(UButton), {
+				createVNode(unref(UInput), {
+					"model-value": unref(state).filterText,
+					icon: "i-lucide-search",
+					size: "sm",
+					placeholder: unref(t)("tree.filterText.placeholder"),
+					"aria-label": unref(t)("tree.filterText.placeholder"),
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(model).setFilterText($event)),
+					onKeydown: _cache[2] || (_cache[2] = withKeys(($event) => unref(model).setFilterText(""), ["esc"]))
+				}, createSlots({ _: 2 }, [unref(state).filterText ? {
+					name: "trailing",
+					fn: withCtx(() => [createVNode(unref(UButton), {
+						icon: "i-lucide-x",
+						size: "xs",
+						color: "neutral",
+						variant: "link",
+						"aria-label": unref(t)("tree.filterText.clear"),
+						onClick: _cache[0] || (_cache[0] = ($event) => unref(model).setFilterText(""))
+					}, null, 8, ["aria-label"])]),
+					key: "0"
+				} : void 0]), 1032, [
+					"model-value",
+					"placeholder",
+					"aria-label"
+				]),
+				unref(state).view.hasKindFilters ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(UButton), {
 					icon: "i-lucide-filter-x",
 					label: unref(t)("tree.filter.reset"),
 					size: "xs",
@@ -424,93 +187,101 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					variant: "subtle",
 					onClick: unref(model).clearAllFilters
 				}, null, 8, ["label", "onClick"])])) : createCommentVNode("v-if", true),
-				creatingFolder.value ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(UInput), {
-					modelValue: folderDraft.value,
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => folderDraft.value = $event),
+				unref(state).creatingFolder ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(UInput), {
+					"model-value": unref(state).creatingFolder.draft,
 					size: "sm",
 					autofocus: "",
-					color: folderError.value ? "error" : void 0,
-					highlight: !!folderError.value,
-					placeholder: folderParent.value ? unref(t)("tree.folder.placeholderIn", { parent: folderParent.value }) : unref(t)("tree.folder.placeholder"),
+					color: unref(state).creatingFolder.error ? "error" : void 0,
+					highlight: !!unref(state).creatingFolder.error,
+					placeholder: unref(state).creatingFolder.parent ? unref(t)("tree.folder.placeholderIn", { parent: unref(state).creatingFolder.parent }) : unref(t)("tree.folder.placeholder"),
 					"aria-label": unref(t)("tree.folder.name"),
-					"aria-invalid": !!folderError.value,
-					onKeydown: [withKeys(commitCreateFolder, ["enter"]), _cache[1] || (_cache[1] = withKeys(($event) => creatingFolder.value = false, ["esc"]))],
-					onBlur: _cache[2] || (_cache[2] = ($event) => creatingFolder.value = false)
+					"aria-invalid": !!unref(state).creatingFolder.error,
+					"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => unref(model).setFolderDraft($event)),
+					onKeydown: [withKeys(unref(model).commitCreateFolder, ["enter"]), withKeys(unref(model).cancelCreateFolder, ["esc"])],
+					onBlur: unref(model).cancelCreateFolder
 				}, null, 8, [
-					"modelValue",
+					"model-value",
 					"color",
 					"highlight",
 					"placeholder",
 					"aria-label",
-					"aria-invalid"
-				]), folderError.value ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(folderError.value), 1)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
-				!unref(tree) && !virtual.value ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(unref(tree) === null ? unref(t)("tree.loadFailed") : unref(t)("tree.loading")), 1)) : (openBlock(), createBlock(unref(UTree), {
+					"aria-invalid",
+					"onKeydown",
+					"onBlur"
+				]), unref(state).creatingFolder.error ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(unref(state).creatingFolder.error), 1)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
+				!unref(state).tree && !unref(state).virtual ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(unref(state).tree === null ? unref(t)("tree.loadFailed") : unref(t)("tree.loading")), 1)) : (openBlock(), createBlock(unref(UTree), {
 					key: 3,
-					expanded: treeExpanded.value,
-					"onUpdate:expanded": _cache[9] || (_cache[9] = ($event) => treeExpanded.value = $event),
-					items: items.value,
+					expanded: unref(state).view.open,
+					items: unref(state).view.items,
 					"get-key": (item) => item.key,
 					size: "sm",
-					"aria-label": unref(t)("tree.aria")
+					"aria-label": unref(t)("tree.aria"),
+					"onUpdate:expanded": onExpanded
 				}, {
-					"item-wrapper": withCtx(({ item, expanded: isOpen }) => [createElementVNode("div", {
+					"item-wrapper": withCtx(({ item }) => [createElementVNode("div", _hoisted_6, [createElementVNode("div", {
 						class: normalizeClass(["group flex w-full cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-sm select-none hover:bg-[color-mix(in_oklab,var(--sk-bg-elevated)_60%,transparent)]", [
-							item.id !== void 0 && item.id === unref(activeId) && "bg-[color-mix(in_oklab,var(--sk-primary)_10%,transparent)] font-medium text-[var(--sk-primary)]",
-							item.type !== "document" && item.path === selectedFolder.value && "bg-[var(--sk-bg-elevated)]",
-							virtual.value && (item.key === unref("vroot") ? virtualTarget.value === null : !!item.blockId && item.blockId === virtualTarget.value) && "bg-[var(--sk-bg-elevated)]",
-							dropKey.value === item.key && "ring-1 ring-[var(--sk-primary)]"
+							row(item).active && "bg-[color-mix(in_oklab,var(--sk-primary)_10%,transparent)] font-medium text-[var(--sk-primary)]",
+							row(item).selected && "bg-[var(--sk-bg-elevated)]",
+							row(item).drop?.ok && "ring-1 ring-[var(--sk-primary)]",
+							refusal(item) && "bg-[color-mix(in_oklab,var(--sk-danger)_10%,transparent)] ring-1 ring-[var(--sk-danger)]"
 						]]),
-						draggable: isDraggable$1(item),
+						draggable: unref(model).isDraggable(item),
 						onDragstart: ($event) => onDragStart($event, item),
 						onDragover: ($event) => onDragOver($event, item),
 						onDragleave: ($event) => onDragLeave($event, item),
 						onDrop: ($event) => onDrop($event, item),
-						onDragend: endDrag
+						onDragend: _cache[10] || (_cache[10] = (...args) => unref(model).dragEnd && unref(model).dragEnd(...args))
 					}, [
-						item.type === "root" || item.type === "folder" || item.children?.length ? (openBlock(), createBlock(unref(UIcon), {
+						row(item).expandable ? (openBlock(), createBlock(unref(UIcon), {
 							key: 0,
 							name: "i-lucide-chevron-right",
-							class: normalizeClass(["size-3.5 shrink-0 text-[var(--sk-muted)] transition-transform", isOpen && "rotate-90"]),
+							class: normalizeClass(["size-3.5 shrink-0 text-[var(--sk-muted)] transition-transform", row(item).open && "rotate-90"]),
 							onClick: ($event) => onChevronClick($event, item)
-						}, null, 8, ["class", "onClick"])) : item.type === "composite" || item.type === "heading" ? (openBlock(), createElementBlock("span", _hoisted_7)) : createCommentVNode("v-if", true),
+						}, null, 8, ["class", "onClick"])) : item.type === "composite" || item.type === "heading" ? (openBlock(), createElementBlock("span", _hoisted_8)) : createCommentVNode("v-if", true),
 						createVNode(unref(UIcon), {
 							name: item.icon,
 							class: "size-4 shrink-0"
 						}, null, 8, ["name"]),
-						renamingKey.value === item.key ? (openBlock(), createElementBlock("div", _hoisted_8, [createVNode(unref(UInput), {
-							modelValue: renameDraft.value,
-							"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => renameDraft.value = $event),
+						row(item).renaming ? (openBlock(), createElementBlock("div", _hoisted_9, [createVNode(unref(UInput), {
+							"model-value": row(item).renaming.draft,
 							size: "xs",
 							class: "min-w-0",
 							autofocus: "",
-							color: renameError.value ? "error" : void 0,
-							highlight: !!renameError.value,
+							color: row(item).renaming.error ? "error" : void 0,
+							highlight: !!row(item).renaming.error,
 							"aria-label": unref(t)("tree.folder.name"),
-							"aria-invalid": !!renameError.value,
-							onFocus: _cache[4] || (_cache[4] = ($event) => $event.target.select()),
-							onClick: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop"])),
+							"aria-invalid": !!row(item).renaming.error,
+							"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => unref(model).setRenameDraft($event)),
+							onFocus: _cache[5] || (_cache[5] = ($event) => $event.target.select()),
+							onClick: _cache[6] || (_cache[6] = withModifiers(() => {}, ["stop"])),
 							onKeydown: [
-								_cache[6] || (_cache[6] = withModifiers(() => {}, ["stop"])),
-								withKeys(commitRename, ["enter"]),
-								withKeys(cancelRename, ["esc"])
+								_cache[7] || (_cache[7] = withModifiers(() => {}, ["stop"])),
+								withKeys(unref(model).commitRename, ["enter"]),
+								withKeys(unref(model).cancelRename, ["esc"])
 							],
-							onBlur: onRenameBlur
+							onBlur: unref(model).blurRename
 						}, null, 8, [
-							"modelValue",
+							"model-value",
 							"color",
 							"highlight",
 							"aria-label",
-							"aria-invalid"
-						]), renameError.value ? (openBlock(), createElementBlock("p", {
+							"aria-invalid",
+							"onKeydown",
+							"onBlur"
+						]), row(item).renaming.error ? (openBlock(), createElementBlock("p", {
 							key: 0,
 							class: "text-xs text-[var(--sk-danger)]",
 							role: "alert",
-							onClick: _cache[7] || (_cache[7] = withModifiers(() => {}, ["stop"]))
-						}, toDisplayString(renameError.value), 1)) : createCommentVNode("v-if", true)])) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+							onClick: _cache[8] || (_cache[8] = withModifiers(() => {}, ["stop"]))
+						}, toDisplayString(row(item).renaming.error), 1)) : createCommentVNode("v-if", true)])) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
 							createElementVNode("span", {
 								class: "min-w-0 flex-1 truncate",
 								title: item.label
-							}, toDisplayString(item.label), 9, _hoisted_9),
+							}, [labelParts(item) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+								createTextVNode(toDisplayString(labelParts(item)[0]), 1),
+								createElementVNode("mark", _hoisted_11, toDisplayString(labelParts(item)[1]), 1),
+								createTextVNode(toDisplayString(labelParts(item)[2]), 1)
+							], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(item.label), 1)], 64))], 8, _hoisted_10),
 							item.hasSummary ? (openBlock(), createBlock(unref(UIcon), {
 								key: 0,
 								name: "i-lucide-text-quote",
@@ -519,8 +290,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							}, null, 8, ["title"])) : createCommentVNode("v-if", true),
 							createElementVNode("div", {
 								class: "flex shrink-0",
-								onClick: _cache[8] || (_cache[8] = withModifiers(() => {}, ["stop"]))
-							}, [showFilter(item) ? (openBlock(), createBlock(unref(UDropdownMenu), {
+								onClick: _cache[9] || (_cache[9] = withModifiers(() => {}, ["stop"]))
+							}, [row(item).showFilter ? (openBlock(), createBlock(unref(UDropdownMenu), {
 								key: 0,
 								items: filterMenu(item),
 								content: { align: "start" }
@@ -528,9 +299,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								default: withCtx(() => [createVNode(unref(UButton), {
 									icon: "i-lucide-filter",
 									size: "xs",
-									color: isFiltered(item) ? "primary" : "neutral",
-									variant: isFiltered(item) ? "soft" : "ghost",
-									class: normalizeClass(!isFiltered(item) && "opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"),
+									color: row(item).hiddenKinds.length ? "primary" : "neutral",
+									variant: row(item).hiddenKinds.length ? "soft" : "ghost",
+									class: normalizeClass(!row(item).hiddenKinds.length && "opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"),
 									title: unref(t)("tree.filter.title"),
 									"aria-label": unref(t)("tree.filter.title")
 								}, null, 8, [
@@ -541,7 +312,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 									"aria-label"
 								])]),
 								_: 2
-							}, 1032, ["items"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_10, [
+							}, 1032, ["items"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_12, [
 								addMenu(item).length ? (openBlock(), createBlock(unref(UDropdownMenu), {
 									key: 0,
 									items: addMenu(item),
@@ -572,11 +343,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 									variant: "ghost",
 									"aria-label": unref(t)("tree.delete"),
 									"loading-auto": "",
-									onClick: ($event) => removeItem(item)
+									onClick: ($event) => unref(model).remove(item)
 								}, null, 8, ["aria-label", "onClick"])) : createCommentVNode("v-if", true)
 							])])
 						], 64))
-					], 42, _hoisted_6)]),
+					], 42, _hoisted_7), refusal(item) ? (openBlock(), createElementBlock("p", _hoisted_13, toDisplayString(refusal(item)), 1)) : createCommentVNode("v-if", true)])]),
 					_: 3
 				}, 8, [
 					"expanded",
@@ -584,7 +355,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"get-key",
 					"aria-label"
 				])),
-				isEmpty.value ? (openBlock(), createElementBlock("p", _hoisted_11, toDisplayString(unref(t)("tree.empty")), 1)) : createCommentVNode("v-if", true)
+				unref(state).view.noMatches ? (openBlock(), createElementBlock("p", _hoisted_14, toDisplayString(unref(t)("tree.noMatches")), 1)) : createCommentVNode("v-if", true),
+				unref(state).view.isEmpty ? (openBlock(), createElementBlock("p", _hoisted_15, toDisplayString(unref(t)("tree.empty")), 1)) : createCommentVNode("v-if", true)
 			]);
 		};
 	}