@ecsplico/editor 0.0.0-stage → 1.0.0

package/dist/tree/DocumentTree.js

@@ -0,0 +1,595 @@
+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";
+//#region src/tree/DocumentTree.vue
+const _hoisted_1 = { class: "flex flex-col gap-2" };
+const _hoisted_2 = {
+	key: 0,
+	class: "flex items-center"
+};
+const _hoisted_3 = {
+	key: 1,
+	class: "flex flex-col gap-1"
+};
+const _hoisted_4 = {
+	key: 0,
+	class: "px-0.5 text-xs text-[var(--sk-danger)]",
+	role: "alert"
+};
+const _hoisted_5 = {
+	key: 2,
+	class: "px-2.5 py-1.5 text-sm text-[var(--sk-muted)]"
+};
+const _hoisted_6 = [
+	"draggable",
+	"onDragstart",
+	"onDragover",
+	"onDragleave",
+	"onDrop"
+];
+const _hoisted_7 = {
+	key: 1,
+	class: "size-3.5 shrink-0"
+};
+const _hoisted_8 = {
+	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 = {
+	key: 4,
+	class: "px-2.5 py-1.5 text-sm text-[var(--sk-muted)]"
+};
+const OUTLINE_DEBOUNCE_MS = 150;
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "DocumentTree",
+	props: /*@__PURE__*/ mergeModels({
+		store: {},
+		editor: {}
+	}, {
+		"selectedFolder": { default: "" },
+		"selectedFolderModifiers": {}
+	}),
+	emits: ["update:selectedFolder"],
+	setup(__props) {
+		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);
+		}
+		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;
+		}
+		function revealOutlineItem(item) {
+			if (editor.value && !editor.value.isDestroyed) revealBlockInEditor(editor.value, {
+				id: item.blockId ?? null,
+				pos: item.pos
+			});
+		}
+		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];
+		}
+		/** 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 groups = [[{
+				type: "label",
+				label: t("tree.filter.show")
+			}, ...filterKinds$1(item).map((kind) => ({
+				label: kind.label,
+				icon: kind.icon,
+				type: "checkbox",
+				checked: !hidden.includes(kind.id),
+				onUpdateChecked: (visible) => model.setKindHidden(item.key, kind.id, !visible),
+				onSelect: (event) => event.preventDefault()
+			}))]];
+			if (hidden.length) groups.push([{
+				label: t("tree.filter.reset"),
+				icon: "i-lucide-filter-x",
+				onSelect: () => model.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);
+		}
+		function onDragStart(event, item) {
+			if (!isDraggable$1(item) || !event.dataTransfer) return event.preventDefault();
+			const payload = dragPayloadOf(item);
+			dragging.value = payload;
+			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;
+		}
+		function onDragLeave(event, item) {
+			if (dropKey.value === item.key && !event.currentTarget.contains(event.relatedTarget)) dropKey.value = null;
+		}
+		function endDrag() {
+			dragging.value = null;
+			dropKey.value = 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: 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 (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				hasFilters.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(UButton), {
+					icon: "i-lucide-filter-x",
+					label: unref(t)("tree.filter.reset"),
+					size: "xs",
+					color: "neutral",
+					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),
+					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"),
+					"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)
+				}, null, 8, [
+					"modelValue",
+					"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), {
+					key: 3,
+					expanded: treeExpanded.value,
+					"onUpdate:expanded": _cache[9] || (_cache[9] = ($event) => treeExpanded.value = $event),
+					items: items.value,
+					"get-key": (item) => item.key,
+					size: "sm",
+					"aria-label": unref(t)("tree.aria")
+				}, {
+					"item-wrapper": withCtx(({ item, expanded: isOpen }) => [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)]"
+						]]),
+						draggable: isDraggable$1(item),
+						onDragstart: ($event) => onDragStart($event, item),
+						onDragover: ($event) => onDragOver($event, item),
+						onDragleave: ($event) => onDragLeave($event, item),
+						onDrop: ($event) => onDrop($event, item),
+						onDragend: endDrag
+					}, [
+						item.type === "root" || item.type === "folder" || item.children?.length ? (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"]),
+							onClick: ($event) => onChevronClick($event, item)
+						}, null, 8, ["class", "onClick"])) : item.type === "composite" || item.type === "heading" ? (openBlock(), createElementBlock("span", _hoisted_7)) : 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),
+							size: "xs",
+							class: "min-w-0",
+							autofocus: "",
+							color: renameError.value ? "error" : void 0,
+							highlight: !!renameError.value,
+							"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"])),
+							onKeydown: [
+								_cache[6] || (_cache[6] = withModifiers(() => {}, ["stop"])),
+								withKeys(commitRename, ["enter"]),
+								withKeys(cancelRename, ["esc"])
+							],
+							onBlur: onRenameBlur
+						}, null, 8, [
+							"modelValue",
+							"color",
+							"highlight",
+							"aria-label",
+							"aria-invalid"
+						]), renameError.value ? (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 }, [
+							createElementVNode("span", {
+								class: "min-w-0 flex-1 truncate",
+								title: item.label
+							}, toDisplayString(item.label), 9, _hoisted_9),
+							item.hasSummary ? (openBlock(), createBlock(unref(UIcon), {
+								key: 0,
+								name: "i-lucide-text-quote",
+								class: "size-3.5 shrink-0 text-[var(--sk-muted)]",
+								title: unref(t)("tree.summary")
+							}, 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), {
+								key: 0,
+								items: filterMenu(item),
+								content: { align: "start" }
+							}, {
+								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"),
+									title: unref(t)("tree.filter.title"),
+									"aria-label": unref(t)("tree.filter.title")
+								}, null, 8, [
+									"color",
+									"variant",
+									"class",
+									"title",
+									"aria-label"
+								])]),
+								_: 2
+							}, 1032, ["items"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_10, [
+								addMenu(item).length ? (openBlock(), createBlock(unref(UDropdownMenu), {
+									key: 0,
+									items: addMenu(item),
+									content: {
+										align: "start",
+										onCloseAutoFocus: (event) => event.preventDefault()
+									}
+								}, {
+									default: withCtx(() => [createVNode(unref(UButton), {
+										icon: "i-lucide-plus",
+										size: "xs",
+										color: "neutral",
+										variant: "ghost",
+										title: unref(t)("tree.add"),
+										"aria-label": unref(t)("tree.add")
+									}, null, 8, ["title", "aria-label"])]),
+									_: 1
+								}, 8, ["items", "content"])) : createCommentVNode("v-if", true),
+								item.type === "document" ? renderSlot(_ctx.$slots, "document-actions", {
+									id: item.id,
+									title: item.label
+								}, void 0, void 0, 1) : createCommentVNode("v-if", true),
+								item.type === "document" || item.type === "folder" ? (openBlock(), createBlock(unref(UButton), {
+									key: 2,
+									icon: "i-lucide-trash-2",
+									size: "xs",
+									color: "error",
+									variant: "ghost",
+									"aria-label": unref(t)("tree.delete"),
+									"loading-auto": "",
+									onClick: ($event) => removeItem(item)
+								}, null, 8, ["aria-label", "onClick"])) : createCommentVNode("v-if", true)
+							])])
+						], 64))
+					], 42, _hoisted_6)]),
+					_: 3
+				}, 8, [
+					"expanded",
+					"items",
+					"get-key",
+					"aria-label"
+				])),
+				isEmpty.value ? (openBlock(), createElementBlock("p", _hoisted_11, toDisplayString(unref(t)("tree.empty")), 1)) : createCommentVNode("v-if", true)
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=DocumentTree.js.map