@ecsplico/editor 3.1.0 → 3.2.0

package/dist/tree/DocumentTree.js

@@ -1,63 +1,83 @@
+import { findBlockById } from "../core/schema/block-ids.js";
+import { blockTransferOf, readBlockTransfer, writeBlockTransfer } from "../core/block-transfer.js";
+import { basketById } from "../features/composites/baskets.js";
 import { useUiKit } from "../vue/kit/use-ui-kit.js";
 import { useEditorSettings } from "../vue/settings.js";
 import { useEditorI18n } from "../vue/use-editor-i18n.js";
-import { DRAG_MIME } from "./tree-items.js";
+import { DRAG_MIME, focusCrumbs, itemBasket } from "./tree-items.js";
 import { rowOf } from "./tree-model.js";
 import { useTreeModel } from "./use-tree-model.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useModel, withCtx, withKeys, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, renderList, 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 = { class: "flex items-center justify-end" };
-const _hoisted_3 = { class: "inline-flex" };
-const _hoisted_4 = {
+const _hoisted_2 = { class: "flex items-center gap-1" };
+const _hoisted_3 = ["aria-label"];
+const _hoisted_4 = ["aria-checked", "onClick"];
+const _hoisted_5 = { class: "truncate" };
+const _hoisted_6 = { class: "truncate" };
+const _hoisted_7 = { class: "flex items-center justify-end" };
+const _hoisted_8 = { class: "inline-flex" };
+const _hoisted_9 = {
 	key: 0,
 	class: "flex items-center"
 };
-const _hoisted_5 = {
+const _hoisted_10 = {
 	key: 1,
 	class: "flex flex-col gap-1"
 };
-const _hoisted_6 = {
+const _hoisted_11 = {
 	key: 0,
 	class: "px-0.5 text-xs text-[var(--sk-danger)]",
 	role: "alert"
 };
-const _hoisted_7 = {
+const _hoisted_12 = {
 	key: 2,
+	class: "flex flex-wrap items-center gap-0.5 text-xs"
+};
+const _hoisted_13 = {
+	key: 0,
+	class: "min-w-0 truncate px-1.5 font-medium",
+	"aria-current": "location"
+};
+const _hoisted_14 = {
+	key: 3,
 	class: "px-2.5 py-1.5 text-sm text-[var(--sk-muted)]"
 };
-const _hoisted_8 = { class: "w-full" };
-const _hoisted_9 = [
+const _hoisted_15 = { class: "w-full" };
+const _hoisted_16 = [
 	"draggable",
 	"onDragstart",
 	"onDragover",
 	"onDragleave",
 	"onDrop"
 ];
-const _hoisted_10 = {
+const _hoisted_17 = {
 	key: 1,
 	class: "size-3.5 shrink-0"
 };
-const _hoisted_11 = {
+const _hoisted_18 = {
 	key: 2,
 	class: "flex min-w-0 flex-1 flex-col gap-0.5"
 };
-const _hoisted_12 = ["title"];
-const _hoisted_13 = { class: "rounded-sm bg-[color-mix(in_oklab,var(--sk-primary)_20%,transparent)] text-inherit" };
-const _hoisted_14 = { class: "flex opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 has-data-[state=open]:opacity-100" };
-const _hoisted_15 = {
+const _hoisted_19 = ["title", "aria-label"];
+const _hoisted_20 = ["title"];
+const _hoisted_21 = { class: "rounded-sm bg-[color-mix(in_oklab,var(--sk-primary)_20%,transparent)] text-inherit" };
+const _hoisted_22 = { class: "flex opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 has-data-[state=open]:opacity-100" };
+const _hoisted_23 = {
 	key: 0,
 	class: "px-2 pt-0.5 text-xs text-[var(--sk-danger)]",
 	role: "status"
 };
-const _hoisted_16 = {
-	key: 4,
+const _hoisted_24 = {
+	key: 5,
 	class: "px-2.5 py-1.5 text-sm text-[var(--sk-muted)]"
 };
-const _hoisted_17 = {
-	key: 5,
+const _hoisted_25 = {
+	key: 6,
 	class: "px-2.5 py-1.5 text-sm text-[var(--sk-muted)]"
 };
+const basketOption = "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm text-[var(--sk-fg)] transition-colors duration-150 hover:bg-[var(--sk-bg-elevated)] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--sk-primary)]";
+/** The breadcrumb of the focus: the document (first crumb, leaves focus) and the Bausteine down to the focused one. */
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "DocumentTree",
 	props: /*@__PURE__*/ mergeModels({
@@ -73,7 +93,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		/** 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 { t } = useEditorI18n();
-		const { Button: UButton, DropdownMenu: UDropdownMenu, Icon: UIcon, Input: UInput, Tooltip: UTooltip, Tree: UTree } = useUiKit();
+		const { Button: UButton, DropdownMenu: UDropdownMenu, Icon: UIcon, Input: UInput, Popover: UPopover, Tooltip: UTooltip, Tree: UTree } = useUiKit();
 		const { model, state } = useTreeModel({
 			store: () => props.store,
 			editor: () => props.editor,
@@ -85,6 +105,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			settings.value.blocks.treeRoot = settings.value.blocks.treeRoot === "file" ? "folders" : "file";
 		}
 		const row = (item) => rowOf(state.value, item, t);
+		/** The basket `item` is in, when the open editor offers it (the row shows its colour as a dot). */
+		const basketOf = (item) => itemBasket(item, state.value.baskets);
+		/** The basket filter button needs a live editor that offers baskets. */
+		const showBasketFilter = computed(() => state.value.hasEditor && state.value.baskets.length > 0);
+		/** The chosen baskets the open editor offers (an unknown id never filters, see `TreeModel`). */
+		const shownBaskets = computed(() => state.value.basketFilter.filter((id) => basketById(state.value.baskets, id)));
+		const breadcrumb = computed(() => focusCrumbs(state.value.focusPath));
 		/** Why dropping the drag on `item` is refused, while the pointer is over it. */
 		function refusal(item) {
 			const drop = row(item).drop;
@@ -145,50 +172,124 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (!payload) return event.preventDefault();
 			if (!event.dataTransfer) return model.value.dragEnd();
 			event.dataTransfer.setData(DRAG_MIME, JSON.stringify(payload));
-			event.dataTransfer.effectAllowed = "move";
+			const editor = props.editor;
+			const found = payload.type === "composite" && editor && !editor.isDestroyed ? findBlockById(editor.state.doc, payload.blockId) : null;
+			const transfer = found && editor ? blockTransferOf(editor, found.pos) : null;
+			if (transfer) writeBlockTransfer(event.dataTransfer, transfer);
+			event.dataTransfer.effectAllowed = transfer ? "copyMove" : "move";
 		}
+		/** A drag of this tree's own rows is running (a foreign drag is not). */
+		const ownDrag = () => !!state.value.drag && state.value.drag.source.type !== "foreign-block";
 		function onDragOver(event, item) {
-			const verdict = model.value.dragOver(item);
+			const foreign = !ownDrag() && !!event.dataTransfer?.types.includes("application/x-tip-block");
+			const verdict = foreign ? model.value.foreignDragOver(item) : model.value.dragOver(item);
 			if (!verdict) return;
 			if (verdict.ok) event.preventDefault();
-			if (event.dataTransfer) event.dataTransfer.dropEffect = verdict.ok ? "move" : "none";
+			if (event.dataTransfer) event.dataTransfer.dropEffect = verdict.ok ? foreign ? "copy" : "move" : "none";
 		}
 		function onDragLeave(event, item) {
 			if (!event.currentTarget.contains(event.relatedTarget)) model.value.dragLeave(item);
 		}
 		function onDrop(event, item) {
-			if (!state.value.drag) return;
+			if (ownDrag()) {
+				event.preventDefault();
+				return model.value.drop(item);
+			}
+			const payload = event.dataTransfer ? readBlockTransfer(event.dataTransfer) : null;
+			if (!payload) return;
 			event.preventDefault();
-			return model.value.drop(item);
+			return model.value.dropForeign(item, payload, event.shiftKey, event.clientX, event.clientY);
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
-				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"
+				createElementVNode("div", _hoisted_2, [
+					createVNode(unref(UInput), {
+						"model-value": unref(state).filterText,
+						class: "min-w-0 flex-1",
+						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"
+					]),
+					createCommentVNode(" A popover, not a dropdown menu: a menu item cannot show a dot in an arbitrary CSS colour. "),
+					showBasketFilter.value ? (openBlock(), createBlock(unref(UPopover), {
+						key: 0,
+						content: {
+							side: "bottom",
+							align: "end",
+							sideOffset: 4,
+							onCloseAutoFocus: (event) => event.preventDefault()
+						},
+						ui: { content: "w-44 p-1" }
+					}, {
+						content: withCtx(() => [createElementVNode("div", {
+							role: "menu",
+							"aria-label": unref(t)("tree.basketFilter.label")
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(state).baskets, (basket) => {
+							return openBlock(), createElementBlock("button", {
+								key: basket.id,
+								type: "button",
+								role: "menuitemcheckbox",
+								"aria-checked": shownBaskets.value.includes(basket.id),
+								class: normalizeClass(basketOption),
+								onClick: ($event) => unref(model).setBasketShown(basket.id, !shownBaskets.value.includes(basket.id))
+							}, [
+								createElementVNode("span", {
+									class: "size-2.5 shrink-0 rounded-full",
+									style: normalizeStyle({ backgroundColor: basket.color })
+								}, null, 4),
+								createElementVNode("span", _hoisted_5, toDisplayString(basket.label), 1),
+								shownBaskets.value.includes(basket.id) ? (openBlock(), createBlock(unref(UIcon), {
+									key: 0,
+									name: "i-lucide-check",
+									class: "ml-auto size-3.5 shrink-0"
+								})) : createCommentVNode("v-if", true)
+							], 8, _hoisted_4);
+						}), 128)), shownBaskets.value.length ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							type: "button",
+							role: "menuitem",
+							class: normalizeClass(basketOption),
+							onClick: _cache[3] || (_cache[3] = ($event) => unref(model).clearBasketFilter())
+						}, [createVNode(unref(UIcon), {
+							name: "i-lucide-filter-x",
+							class: "size-3.5 shrink-0 text-[var(--sk-muted)]"
+						}), createElementVNode("span", _hoisted_6, toDisplayString(unref(t)("tree.basketFilter.reset")), 1)])) : createCommentVNode("v-if", true)], 8, _hoisted_3)]),
+						default: withCtx(() => [createVNode(unref(UButton), {
+							icon: "i-lucide-paint-bucket",
+							size: "xs",
+							color: shownBaskets.value.length ? "primary" : "neutral",
+							variant: shownBaskets.value.length ? "soft" : "ghost",
+							title: unref(t)("tree.basketFilter.label"),
+							"aria-label": unref(t)("tree.basketFilter.label")
+						}, null, 8, [
+							"color",
+							"variant",
+							"title",
+							"aria-label"
+						])]),
+						_: 1
+					}, 8, ["content"])) : createCommentVNode("v-if", true)
 				]),
-				createElementVNode("div", _hoisted_2, [createVNode(unref(UTooltip), { text: canUseFileRoot.value ? "" : unref(t)("tree.root.unavailable") }, {
-					default: withCtx(() => [createCommentVNode(" A disabled button swallows pointer events, so the tooltip hangs on the wrapper. "), createElementVNode("span", _hoisted_3, [createVNode(unref(UButton), {
+				createElementVNode("div", _hoisted_7, [createVNode(unref(UTooltip), { text: canUseFileRoot.value ? "" : unref(t)("tree.root.unavailable") }, {
+					default: withCtx(() => [createCommentVNode(" A disabled button swallows pointer events, so the tooltip hangs on the wrapper. "), createElementVNode("span", _hoisted_8, [createVNode(unref(UButton), {
 						icon: unref(state).virtual ? "i-lucide-file-stack" : "i-lucide-folder-tree",
 						label: unref(t)(unref(state).virtual ? "tree.root.file" : "tree.root.folders"),
 						size: "xs",
@@ -206,7 +307,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					])])]),
 					_: 1
 				}, 8, ["text"])]),
-				unref(state).view.hasKindFilters ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(unref(UButton), {
+				unref(state).view.hasKindFilters ? (openBlock(), createElementBlock("div", _hoisted_9, [createVNode(unref(UButton), {
 					icon: "i-lucide-filter-x",
 					label: unref(t)("tree.filter.reset"),
 					size: "xs",
@@ -214,7 +315,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					variant: "subtle",
 					onClick: unref(model).clearAllFilters
 				}, null, 8, ["label", "onClick"])])) : createCommentVNode("v-if", true),
-				unref(state).creatingFolder ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(unref(UInput), {
+				unref(state).creatingFolder ? (openBlock(), createElementBlock("div", _hoisted_10, [createVNode(unref(UInput), {
 					"model-value": unref(state).creatingFolder.draft,
 					size: "sm",
 					autofocus: "",
@@ -223,7 +324,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					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": !!unref(state).creatingFolder.error,
-					"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => unref(model).setFolderDraft($event)),
+					"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => unref(model).setFolderDraft($event)),
 					onKeydown: [withKeys(unref(model).commitCreateFolder, ["enter"]), withKeys(unref(model).cancelCreateFolder, ["esc"])],
 					onBlur: unref(model).cancelCreateFolder
 				}, null, 8, [
@@ -235,9 +336,35 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"aria-invalid",
 					"onKeydown",
 					"onBlur"
-				]), unref(state).creatingFolder.error ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(unref(state).creatingFolder.error), 1)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
-				!unref(state).tree && !unref(state).virtual ? (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString(unref(state).tree === null ? unref(t)("tree.loadFailed") : unref(t)("tree.loading")), 1)) : (openBlock(), createBlock(unref(UTree), {
-					key: 3,
+				]), unref(state).creatingFolder.error ? (openBlock(), createElementBlock("p", _hoisted_11, toDisplayString(unref(state).creatingFolder.error), 1)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
+				breadcrumb.value.crumbs.length ? (openBlock(), createElementBlock("div", _hoisted_12, [createVNode(unref(UButton), {
+					icon: "i-lucide-corner-up-left",
+					label: breadcrumb.value.document?.label ?? unref(t)("tree.focus.root"),
+					size: "xs",
+					color: "neutral",
+					variant: "ghost",
+					title: unref(t)("tree.focus.leave"),
+					"aria-label": unref(t)("tree.focus.leave"),
+					onClick: _cache[5] || (_cache[5] = ($event) => unref(model).defocus())
+				}, null, 8, [
+					"label",
+					"title",
+					"aria-label"
+				]), (openBlock(true), createElementBlock(Fragment, null, renderList(breadcrumb.value.crumbs, (crumb, index) => {
+					return openBlock(), createElementBlock(Fragment, { key: crumb.key }, [createVNode(unref(UIcon), {
+						name: "i-lucide-chevron-right",
+						class: "size-3 shrink-0 text-[var(--sk-muted)]"
+					}), index === breadcrumb.value.crumbs.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(crumb.label), 1)) : (openBlock(), createBlock(unref(UButton), {
+						key: 1,
+						label: crumb.label,
+						size: "xs",
+						color: "neutral",
+						variant: "ghost",
+						onClick: ($event) => unref(model).focus(crumb.key)
+					}, null, 8, ["label", "onClick"]))], 64);
+				}), 128))])) : createCommentVNode("v-if", true),
+				!unref(state).tree && !unref(state).virtual ? (openBlock(), createElementBlock("p", _hoisted_14, toDisplayString(unref(state).tree === null ? unref(t)("tree.loadFailed") : unref(t)("tree.loading")), 1)) : (openBlock(), createBlock(unref(UTree), {
+					key: 4,
 					expanded: unref(state).view.open,
 					items: unref(state).view.items,
 					"get-key": (item) => item.key,
@@ -245,31 +372,32 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"aria-label": unref(t)("tree.aria"),
 					"onUpdate:expanded": onExpanded
 				}, {
-					"item-wrapper": withCtx(({ item }) => [createElementVNode("div", _hoisted_8, [createElementVNode("div", {
+					"item-wrapper": withCtx(({ item }) => [createElementVNode("div", _hoisted_15, [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)]", [
 							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)]"
+							refusal(item) && "bg-[color-mix(in_oklab,var(--sk-danger)_10%,transparent)] ring-1 ring-[var(--sk-danger)]",
+							row(item).dimmed && "opacity-60"
 						]]),
 						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: _cache[10] || (_cache[10] = (...args) => unref(model).dragEnd && unref(model).dragEnd(...args))
+						onDragend: _cache[12] || (_cache[12] = (...args) => unref(model).dragEnd && unref(model).dragEnd(...args))
 					}, [
 						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", row(item).open && "rotate-90"]),
 							onClick: ($event) => onChevronClick($event, item)
-						}, null, 8, ["class", "onClick"])) : item.type === "composite" || item.type === "heading" ? (openBlock(), createElementBlock("span", _hoisted_10)) : createCommentVNode("v-if", true),
+						}, null, 8, ["class", "onClick"])) : item.type === "composite" || item.type === "heading" ? (openBlock(), createElementBlock("span", _hoisted_17)) : createCommentVNode("v-if", true),
 						createVNode(unref(UIcon), {
 							name: item.icon,
 							class: "size-4 shrink-0"
 						}, null, 8, ["name"]),
-						row(item).renaming ? (openBlock(), createElementBlock("div", _hoisted_11, [createVNode(unref(UInput), {
+						row(item).renaming ? (openBlock(), createElementBlock("div", _hoisted_18, [createVNode(unref(UInput), {
 							"model-value": row(item).renaming.draft,
 							size: "xs",
 							class: "min-w-0",
@@ -278,11 +406,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							highlight: !!row(item).renaming.error,
 							"aria-label": unref(t)("tree.folder.name"),
 							"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"])),
+							"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => unref(model).setRenameDraft($event)),
+							onFocus: _cache[7] || (_cache[7] = ($event) => $event.target.select()),
+							onClick: _cache[8] || (_cache[8] = withModifiers(() => {}, ["stop"])),
 							onKeydown: [
-								_cache[7] || (_cache[7] = withModifiers(() => {}, ["stop"])),
+								_cache[9] || (_cache[9] = withModifiers(() => {}, ["stop"])),
 								withKeys(unref(model).commitRename, ["enter"]),
 								withKeys(unref(model).cancelRename, ["esc"])
 							],
@@ -299,25 +427,34 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							key: 0,
 							class: "text-xs text-[var(--sk-danger)]",
 							role: "alert",
-							onClick: _cache[8] || (_cache[8] = withModifiers(() => {}, ["stop"]))
+							onClick: _cache[10] || (_cache[10] = withModifiers(() => {}, ["stop"]))
 						}, toDisplayString(row(item).renaming.error), 1)) : createCommentVNode("v-if", true)])) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+							basketOf(item) ? (openBlock(), createElementBlock("span", {
+								key: 0,
+								class: "size-2 shrink-0 rounded-full",
+								style: normalizeStyle({ backgroundColor: basketOf(item).color }),
+								title: basketOf(item).label,
+								"aria-label": basketOf(item).label,
+								role: "img",
+								"data-basket-dot": ""
+							}, null, 12, _hoisted_19)) : createCommentVNode("v-if", true),
 							createElementVNode("span", {
 								class: "min-w-0 flex-1 truncate",
 								title: item.label
 							}, [labelParts(item) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
 								createTextVNode(toDisplayString(labelParts(item)[0]), 1),
-								createElementVNode("mark", _hoisted_13, toDisplayString(labelParts(item)[1]), 1),
+								createElementVNode("mark", _hoisted_21, 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_12),
+							], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(item.label), 1)], 64))], 8, _hoisted_20),
 							item.hasSummary ? (openBlock(), createBlock(unref(UIcon), {
-								key: 0,
+								key: 1,
 								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[9] || (_cache[9] = withModifiers(() => {}, ["stop"]))
+								onClick: _cache[11] || (_cache[11] = withModifiers(() => {}, ["stop"]))
 							}, [row(item).showFilter ? (openBlock(), createBlock(unref(UDropdownMenu), {
 								key: 0,
 								items: filterMenu(item),
@@ -339,9 +476,23 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 									"aria-label"
 								])]),
 								_: 2
-							}, 1032, ["items"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_14, [
-								addMenu(item).length ? (openBlock(), createBlock(unref(UDropdownMenu), {
+							}, 1032, ["items"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_22, [
+								item.type === "composite" && item.blockId ? (openBlock(), createBlock(unref(UButton), {
 									key: 0,
+									icon: "i-lucide-focus",
+									size: "xs",
+									color: "neutral",
+									variant: "ghost",
+									title: unref(t)("tree.focus.enter"),
+									"aria-label": unref(t)("tree.focus.enter"),
+									onClick: ($event) => unref(model).focus(item.key)
+								}, null, 8, [
+									"title",
+									"aria-label",
+									"onClick"
+								])) : createCommentVNode("v-if", true),
+								addMenu(item).length ? (openBlock(), createBlock(unref(UDropdownMenu), {
+									key: 1,
 									items: addMenu(item),
 									content: {
 										align: "start",
@@ -361,9 +512,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								item.type === "document" ? renderSlot(_ctx.$slots, "document-actions", {
 									id: item.id,
 									title: item.label
-								}, void 0, void 0, 1) : createCommentVNode("v-if", true),
+								}, void 0, void 0, 2) : createCommentVNode("v-if", true),
 								item.type === "document" || item.type === "folder" ? (openBlock(), createBlock(unref(UButton), {
-									key: 2,
+									key: 3,
 									icon: "i-lucide-trash-2",
 									size: "xs",
 									color: "error",
@@ -374,7 +525,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								}, null, 8, ["aria-label", "onClick"])) : createCommentVNode("v-if", true)
 							])])
 						], 64))
-					], 42, _hoisted_9), refusal(item) ? (openBlock(), createElementBlock("p", _hoisted_15, toDisplayString(refusal(item)), 1)) : createCommentVNode("v-if", true)])]),
+					], 42, _hoisted_16), refusal(item) ? (openBlock(), createElementBlock("p", _hoisted_23, toDisplayString(refusal(item)), 1)) : createCommentVNode("v-if", true)])]),
 					_: 3
 				}, 8, [
 					"expanded",
@@ -382,8 +533,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"get-key",
 					"aria-label"
 				])),
-				unref(state).view.noMatches ? (openBlock(), createElementBlock("p", _hoisted_16, toDisplayString(unref(t)("tree.noMatches")), 1)) : createCommentVNode("v-if", true),
-				unref(state).view.isEmpty ? (openBlock(), createElementBlock("p", _hoisted_17, toDisplayString(unref(t)("tree.empty")), 1)) : createCommentVNode("v-if", true)
+				unref(state).view.noMatches ? (openBlock(), createElementBlock("p", _hoisted_24, toDisplayString(unref(t)("tree.noMatches")), 1)) : createCommentVNode("v-if", true),
+				unref(state).view.isEmpty ? (openBlock(), createElementBlock("p", _hoisted_25, toDisplayString(unref(t)("tree.empty")), 1)) : createCommentVNode("v-if", true)
 			]);
 		};
 	}