@feugene/granularity 0.44.0 → 0.46.0

package/dist/components/GrTree/chunks/{GrTree-CkHzgYg1.js → GrTree-6yZrncJE.js}

@@ -12,70 +12,9 @@ import { t as minus_default } from "../../../chunks/minus-oxdbHF33.js";
 import { t as useTypeahead } from "../../../chunks/useTypeahead-mxPtPBf2.js";
 import { useDragSort } from "../../../composables/useDragSort.js";
 import { t as grip_vertical_default } from "../../../chunks/grip-vertical-lRha2S7q.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, watch, withModifiers } from "vue";
-import '../styles.css';//#region src/components/GrTree/grTreeDataAdapter.ts
-var DEFAULT_CHILDREN_KEY = "children";
-var DEFAULT_LABEL_KEY = "label";
-var DEFAULT_IS_LEAF_KEY = "isLeaf";
-function isTreeKey(value) {
-	return typeof value === "string" || typeof value === "number";
-}
-function resolveMapValue(map, key, fallback) {
-	return map?.[key] ?? fallback;
-}
-function createGrTreeDataAdapter(options) {
-	function hasNodeKey() {
-		return options.nodeKey != null;
-	}
-	function getChildrenKey() {
-		return resolveMapValue(options.props, "children", DEFAULT_CHILDREN_KEY);
-	}
-	function getLabelKey() {
-		return resolveMapValue(options.props, "label", DEFAULT_LABEL_KEY);
-	}
-	function getLabel(data) {
-		const value = data[getLabelKey()];
-		return value == null ? "" : String(value);
-	}
-	function getIsLeaf(data) {
-		const value = data[resolveMapValue(options.props, "isLeaf", DEFAULT_IS_LEAF_KEY)];
-		return typeof value === "boolean" ? value : void 0;
-	}
-	function getChildren(data) {
-		const value = data[getChildrenKey()];
-		return Array.isArray(value) ? value : [];
-	}
-	function ensureChildren(data) {
-		const key = getChildrenKey();
-		const record = data;
-		if (Array.isArray(record[key])) return record[key];
-		record[key] = [];
-		return record[key];
-	}
-	function getExplicitNodeKey(data) {
-		if (options.nodeKey == null) return void 0;
-		const value = data[options.nodeKey];
-		return isTreeKey(value) ? value : void 0;
-	}
-	function getNodeKey(data, index, parentKey) {
-		const explicitKey = getExplicitNodeKey(data);
-		if (explicitKey != null) return explicitKey;
-		return parentKey == null ? index : `${String(parentKey)}:${index}`;
-	}
-	return {
-		hasNodeKey,
-		getChildrenKey,
-		getLabelKey,
-		getLabel,
-		getIsLeaf,
-		getChildren,
-		ensureChildren,
-		getNodeKey,
-		getExplicitNodeKey
-	};
-}
-//#endregion
-//#region src/components/GrTree/grTreeInteractionContext.ts
+import { n as createGrTreeDataAdapter, t as useTree } from "../../../chunks/useTree-BebEiBcL.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, watch, withModifiers } from "vue";
+import '../styles.css';//#region src/components/GrTree/grTreeInteractionContext.ts
 function createGrTreeInteractionContext(options, emitters) {
 	const hoveredKey = ref(void 0);
 	const draggingNode = shallowRef(null);
@@ -115,442 +54,12 @@ function createGrTreeInteractionContext(options, emitters) {
 	};
 }
 //#endregion
-//#region src/components/GrTree/grTreeChecking.ts
-/**
-* Раскладывает отмеченные ключи по всему дереву: родитель отмечен, когда
-* отмечены все дети, и наполовину — когда часть.
-*
-* Считается от листьев вверх, поэтому `checkedKeys` снаружи может содержать
-* только листья (типовой формат ответа сервера) — родители посчитаются сами.
-* При `strict` дерево не связывает узлы вовсе: каждый отвечает сам за себя.
-*/
-function resolveCheckStates(roots, checkedKeys, strict) {
-	const states = /* @__PURE__ */ new Map();
-	const walk = (node) => {
-		if (strict || node.childNodes.length === 0) {
-			const state = checkedKeys.has(node.key) ? "checked" : "unchecked";
-			if (strict) node.childNodes.forEach(walk);
-			states.set(node.key, state);
-			return state;
-		}
-		const childStates = node.childNodes.map(walk);
-		const allChecked = childStates.every((s) => s === "checked");
-		const someMarked = childStates.some((s) => s !== "unchecked");
-		const state = allChecked ? "checked" : someMarked || checkedKeys.has(node.key) ? "half" : "unchecked";
-		states.set(node.key, state);
-		return state;
-	};
-	roots.forEach(walk);
-	return states;
-}
-/**
-* Новый набор отмеченных ключей после переключения узла.
-*
-* Каскад идёт вниз (все потомки повторяют решение) и вверх (родитель отмечен,
-* только если отмечены все его дети). Возвращается набор с родителями —
-* `getCheckedKeys({ leafOnly: true })` при необходимости отбросит их обратно.
-*/
-function toggleCheckedKeys(roots, checkedKeys, node, checked, strict) {
-	const next = new Set(checkedKeys);
-	if (strict) {
-		if (checked) next.add(node.key);
-		else next.delete(node.key);
-		return next;
-	}
-	const applyDown = (target) => {
-		if (checked) next.add(target.key);
-		else next.delete(target.key);
-		target.childNodes.forEach(applyDown);
-	};
-	applyDown(node);
-	for (let parent = node.parent; parent; parent = parent.parent) if (parent.childNodes.every((child) => next.has(child.key))) next.add(parent.key);
-	else next.delete(parent.key);
-	return pruneToTree(roots, next);
-}
-/** Отбрасывает ключи, которых нет в текущей модели (данные могли смениться). */
-function pruneToTree(roots, keys) {
-	const known = /* @__PURE__ */ new Set();
-	const walk = (node) => {
-		known.add(node.key);
-		node.childNodes.forEach(walk);
-	};
-	roots.forEach(walk);
-	const next = /* @__PURE__ */ new Set();
-	for (const key of keys) if (known.has(key)) next.add(key);
-	return next;
-}
-/** Ключи в состоянии `checked`; `leafOnly` оставляет только листья. */
-function collectCheckedKeys(roots, states, leafOnly) {
-	const out = [];
-	const walk = (node) => {
-		const isLeaf = node.childNodes.length === 0;
-		if (states.get(node.key) === "checked" && (!leafOnly || isLeaf)) out.push(node.key);
-		node.childNodes.forEach(walk);
-	};
-	roots.forEach(walk);
-	return out;
-}
-/** Ключи в состоянии `half` — родители с частично отмеченными потомками. */
-function collectHalfCheckedKeys(states) {
-	const out = [];
-	for (const [key, state] of states) if (state === "half") out.push(key);
-	return out;
-}
-//#endregion
-//#region src/components/GrTree/grTreeStore.ts
-function createGrTreeStore(options) {
-	const filterValue = ref("");
-	const expandedKeys = shallowRef(/* @__PURE__ */ new Set());
-	const checkedKeys = shallowRef(new Set(toValue(options.defaultCheckedKeys) ?? []));
-	const loadingKeys = shallowRef(/* @__PURE__ */ new Set());
-	const loadedKeys = shallowRef(/* @__PURE__ */ new Set());
-	const loadedChildren = shallowRef(/* @__PURE__ */ new Map());
-	const currentKey = ref(void 0);
-	const getData = () => toValue(options.data) ?? [];
-	const getFilterNodeMethod = () => toValue(options.filterNodeMethod);
-	watch(() => toValue(options.defaultExpandedKeys), (keys) => {
-		expandedKeys.value = new Set(keys ?? []);
-	}, { immediate: true });
-	watch(() => toValue(options.checkedKeys), (keys) => {
-		if (keys) checkedKeys.value = new Set(keys);
-	}, { immediate: true });
-	const treeModel = computed(() => {
-		const byKey = /* @__PURE__ */ new Map();
-		const byData = /* @__PURE__ */ new WeakMap();
-		const build = (items, parent, level) => {
-			return items.map((item, index) => {
-				const node = {
-					key: options.adapter.getNodeKey(item, index, parent?.key),
-					label: options.adapter.getLabel(item),
-					data: item,
-					level,
-					parent,
-					childNodes: []
-				};
-				byKey.set(node.key, node);
-				byData.set(item, node);
-				const ownChildren = options.adapter.getChildren(item);
-				const lazyChildren = loadedChildren.value.get(node.key) ?? [];
-				node.childNodes = build([...ownChildren, ...lazyChildren], node, level + 1);
-				return node;
-			});
-		};
-		return {
-			roots: build(getData(), void 0, 1),
-			byKey,
-			byData
-		};
-	});
-	const autoExpandedKeys = /* @__PURE__ */ new Set();
-	watch(treeModel, (model) => {
-		if (!toValue(options.defaultExpandAll)) return;
-		const next = new Set(expandedKeys.value);
-		let changed = false;
-		for (const key of model.byKey.keys()) {
-			if (autoExpandedKeys.has(key)) continue;
-			autoExpandedKeys.add(key);
-			next.add(key);
-			changed = true;
-		}
-		if (changed) expandedKeys.value = next;
-	}, { immediate: true });
-	const filterInfo = computed(() => {
-		const value = filterValue.value;
-		const isActive = value.trim().length > 0;
-		const valueLower = value.toLowerCase();
-		const subtreeHasMatch = /* @__PURE__ */ new Map();
-		const matchedKeys = /* @__PURE__ */ new Set();
-		const autoExpandKeys = /* @__PURE__ */ new Set();
-		if (!isActive) return {
-			isActive,
-			subtreeHasMatch,
-			matchedKeys,
-			autoExpandKeys
-		};
-		const match = (node) => {
-			const filterNodeMethod = getFilterNodeMethod();
-			if (filterNodeMethod) return filterNodeMethod(value, node.data, node);
-			return node.label.toLowerCase().includes(valueLower);
-		};
-		const walk = (nodes) => {
-			let any = false;
-			for (const node of nodes) {
-				const self = match(node);
-				const childAny = walk(node.childNodes);
-				const has = self || childAny;
-				subtreeHasMatch.set(node.key, has);
-				if (self) matchedKeys.add(node.key);
-				if (childAny) autoExpandKeys.add(node.key);
-				any ||= has;
-			}
-			return any;
-		};
-		walk(treeModel.value.roots);
-		return {
-			isActive,
-			subtreeHasMatch,
-			matchedKeys,
-			autoExpandKeys
-		};
-	});
-	function getNode(key) {
-		return treeModel.value.byKey.get(key);
-	}
-	function findNodeByData(data) {
-		return treeModel.value.byData.get(data);
-	}
-	function isTreeNode(target) {
-		return typeof target === "object" && target !== null && "key" in target && "data" in target && "childNodes" in target;
-	}
-	function resolveNodeTarget(target) {
-		if (target == null) return void 0;
-		if (typeof target === "string" || typeof target === "number") return getNode(target);
-		if (isTreeNode(target)) return getNode(target.key) ?? target;
-		const key = options.adapter.getExplicitNodeKey(target);
-		if (key != null) return getNode(key);
-		return findNodeByData(target);
-	}
-	function getNodeContainer(node) {
-		const items = node.parent ? options.adapter.ensureChildren(node.parent.data) : getData();
-		let index = items.findIndex((item) => item === node.data);
-		if (index >= 0) return {
-			items,
-			index
-		};
-		const key = options.adapter.getExplicitNodeKey(node.data);
-		if (key == null) return void 0;
-		index = items.findIndex((item) => options.adapter.getExplicitNodeKey(item) === key);
-		if (index < 0) return void 0;
-		return {
-			items,
-			index
-		};
-	}
-	function isDescendantNode(ancestor, node) {
-		let current = node.parent;
-		while (current) {
-			if (current.key === ancestor.key) return true;
-			current = current.parent;
-		}
-		return false;
-	}
-	function canMoveNode(node, referenceNode, dropType) {
-		const sourceNode = resolveNodeTarget(node);
-		const targetNode = resolveNodeTarget(referenceNode);
-		if (!sourceNode || !targetNode) return false;
-		if (sourceNode.key === targetNode.key) return false;
-		if (isDescendantNode(sourceNode, targetNode)) return false;
-		if (!getNodeContainer(sourceNode)) return false;
-		if (dropType === "inner") return true;
-		return Boolean(getNodeContainer(targetNode));
-	}
-	function sanitizeTreeState() {
-		const byKey = treeModel.value.byKey;
-		if (currentKey.value != null && !byKey.has(currentKey.value)) currentKey.value = void 0;
-		const nextExpandedKeys = new Set(Array.from(expandedKeys.value).filter((key) => byKey.has(key)));
-		if (nextExpandedKeys.size !== expandedKeys.value.size) expandedKeys.value = nextExpandedKeys;
-		const nextCheckedKeys = new Set(Array.from(checkedKeys.value).filter((key) => byKey.has(key)));
-		if (nextCheckedKeys.size !== checkedKeys.value.size) checkedKeys.value = nextCheckedKeys;
-	}
-	function isExpandedKey(key) {
-		return expandedKeys.value.has(key);
-	}
-	function setExpandedKey(key, expanded) {
-		const next = new Set(expandedKeys.value);
-		if (expanded) next.add(key);
-		else next.delete(key);
-		expandedKeys.value = next;
-	}
-	function toggleExpand(node) {
-		setExpandedKey(node.key, !isExpandedKey(node.key));
-	}
-	function setCurrentKey(key) {
-		currentKey.value = key;
-	}
-	function getCurrentKey() {
-		return currentKey.value;
-	}
-	function getCurrentNode() {
-		const key = currentKey.value;
-		return key == null ? void 0 : getNode(key);
-	}
-	function setCurrentNode(node) {
-		if (node == null) {
-			currentKey.value = void 0;
-			return true;
-		}
-		const targetNode = resolveNodeTarget(node);
-		if (!targetNode) return false;
-		currentKey.value = targetNode.key;
-		return true;
-	}
-	function resolveInsertedNode(data) {
-		const key = options.adapter.getExplicitNodeKey(data);
-		if (key != null) return getNode(key);
-		return findNodeByData(data);
-	}
-	function moveNode(node, referenceNode, dropType) {
-		const sourceNode = resolveNodeTarget(node);
-		const targetNode = resolveNodeTarget(referenceNode);
-		if (!sourceNode || !targetNode) return void 0;
-		if (!canMoveNode(sourceNode, targetNode, dropType)) return void 0;
-		const sourceContainer = getNodeContainer(sourceNode);
-		if (!sourceContainer) return void 0;
-		let destinationItems;
-		let destinationIndex;
-		if (dropType === "inner") {
-			destinationItems = options.adapter.ensureChildren(targetNode.data);
-			destinationIndex = destinationItems.length;
-		} else {
-			const targetContainer = getNodeContainer(targetNode);
-			if (!targetContainer) return void 0;
-			destinationItems = targetContainer.items;
-			destinationIndex = dropType === "prev" ? targetContainer.index : targetContainer.index + 1;
-		}
-		if (destinationItems === sourceContainer.items && sourceContainer.index < destinationIndex) destinationIndex -= 1;
-		const [movedData] = sourceContainer.items.splice(sourceContainer.index, 1);
-		destinationItems.splice(destinationIndex, 0, movedData);
-		if (dropType === "inner") setExpandedKey(targetNode.key, true);
-		sanitizeTreeState();
-		return resolveInsertedNode(movedData);
-	}
-	function appendNode(data, parent) {
-		const parentNode = resolveNodeTarget(parent);
-		if (!parentNode) return void 0;
-		options.adapter.ensureChildren(parentNode.data).push(data);
-		setExpandedKey(parentNode.key, true);
-		sanitizeTreeState();
-		return resolveInsertedNode(data);
-	}
-	function removeNode(node) {
-		if (!options.adapter.hasNodeKey()) return false;
-		const targetNode = resolveNodeTarget(node);
-		if (!targetNode) return false;
-		const container = getNodeContainer(targetNode);
-		if (!container) return false;
-		container.items.splice(container.index, 1);
-		sanitizeTreeState();
-		return true;
-	}
-	function insertNodeBefore(data, referenceNode) {
-		const targetNode = resolveNodeTarget(referenceNode);
-		if (!targetNode) return void 0;
-		const container = getNodeContainer(targetNode);
-		if (!container) return void 0;
-		container.items.splice(container.index, 0, data);
-		sanitizeTreeState();
-		return resolveInsertedNode(data);
-	}
-	function insertNodeAfter(data, referenceNode) {
-		const targetNode = resolveNodeTarget(referenceNode);
-		if (!targetNode) return void 0;
-		const container = getNodeContainer(targetNode);
-		if (!container) return void 0;
-		container.items.splice(container.index + 1, 0, data);
-		sanitizeTreeState();
-		return resolveInsertedNode(data);
-	}
-	const checkStates = computed(() => resolveCheckStates(treeModel.value.roots, checkedKeys.value, Boolean(toValue(options.checkStrictly))));
-	function getCheckState(key) {
-		return checkStates.value.get(key) ?? "unchecked";
-	}
-	function setChecked(node, checked) {
-		const targetNode = resolveNodeTarget(node);
-		if (!targetNode) return void 0;
-		checkedKeys.value = toggleCheckedKeys(treeModel.value.roots, checkedKeys.value, targetNode, checked, Boolean(toValue(options.checkStrictly)));
-		return targetNode;
-	}
-	function toggleChecked(node) {
-		return setChecked(node, getCheckState(node.key) !== "checked");
-	}
-	function getCheckedKeys(opts) {
-		return collectCheckedKeys(treeModel.value.roots, checkStates.value, Boolean(opts?.leafOnly));
-	}
-	function setCheckedKeys(keys) {
-		checkedKeys.value = pruneToTree(treeModel.value.roots, new Set(keys));
-	}
-	function getHalfCheckedKeys() {
-		return collectHalfCheckedKeys(checkStates.value);
-	}
-	function isLeafNode(node) {
-		if (node.childNodes.length > 0) return false;
-		if (!toValue(options.lazy)) return true;
-		const declared = options.adapter.getIsLeaf(node.data);
-		if (declared !== void 0) return declared;
-		return loadedKeys.value.has(node.key);
-	}
-	function isLoadingKey(key) {
-		return loadingKeys.value.has(key);
-	}
-	function markLoading(key, loading) {
-		const next = new Set(loadingKeys.value);
-		if (loading) next.add(key);
-		else next.delete(key);
-		loadingKeys.value = next;
-	}
-	function ensureLoaded(node) {
-		const load = toValue(options.load);
-		if (!toValue(options.lazy) || !load) return;
-		if (loadedKeys.value.has(node.key) || loadingKeys.value.has(node.key) || isLeafNode(node)) return;
-		markLoading(node.key, true);
-		let settled = false;
-		load(node, (children) => {
-			if (settled) return;
-			settled = true;
-			const next = new Map(loadedChildren.value);
-			next.set(node.key, [...children ?? []]);
-			loadedChildren.value = next;
-			loadedKeys.value = new Set(loadedKeys.value).add(node.key);
-			markLoading(node.key, false);
-		});
-	}
-	function filter(value) {
-		filterValue.value = value;
-	}
-	return {
-		filterValue,
-		expandedKeys,
-		loadedChildren,
-		checkedKeys,
-		checkStates,
-		loadingKeys,
-		loadedKeys,
-		currentKey,
-		treeModel,
-		filterInfo,
-		filter,
-		isExpandedKey,
-		setExpandedKey,
-		toggleExpand,
-		setCurrentKey,
-		getCurrentKey,
-		getCurrentNode,
-		setCurrentNode,
-		getNode,
-		canMoveNode,
-		moveNode,
-		appendNode,
-		removeNode,
-		insertNodeBefore,
-		insertNodeAfter,
-		getCheckState,
-		setChecked,
-		toggleChecked,
-		getCheckedKeys,
-		setCheckedKeys,
-		getHalfCheckedKeys,
-		isLeafNode,
-		isLoadingKey,
-		ensureLoaded
-	};
-}
-//#endregion
 //#region src/components/GrTree/grTreeStyles.ts
 var treeSizeVars = {
 	xs: {
 		"--gr-tree-row-min-height": "22px",
 		"--gr-tree-row-px": "4px",
-		"--gr-tree-row-py": "3px",
+		"--gr-tree-row-py": "2px",
 		"--gr-tree-toggle-size": "18px",
 		"--gr-tree-drag-handle-size": "18px",
 		"--gr-tree-icon-size": "12px",
@@ -560,7 +69,7 @@ var treeSizeVars = {
 	sm: {
 		"--gr-tree-row-min-height": "24px",
 		"--gr-tree-row-px": "6px",
-		"--gr-tree-row-py": "5px",
+		"--gr-tree-row-py": "3px",
 		"--gr-tree-toggle-size": "20px",
 		"--gr-tree-drag-handle-size": "20px",
 		"--gr-tree-icon-size": "14px",
@@ -570,7 +79,7 @@ var treeSizeVars = {
 	md: {
 		"--gr-tree-row-min-height": "28px",
 		"--gr-tree-row-px": "8px",
-		"--gr-tree-row-py": "8px",
+		"--gr-tree-row-py": "4px",
 		"--gr-tree-toggle-size": "24px",
 		"--gr-tree-drag-handle-size": "24px",
 		"--gr-tree-icon-size": "16px",
@@ -580,7 +89,7 @@ var treeSizeVars = {
 	lg: {
 		"--gr-tree-row-min-height": "32px",
 		"--gr-tree-row-px": "10px",
-		"--gr-tree-row-py": "10px",
+		"--gr-tree-row-py": "6px",
 		"--gr-tree-toggle-size": "28px",
 		"--gr-tree-drag-handle-size": "28px",
 		"--gr-tree-icon-size": "20px",
@@ -588,6 +97,87 @@ var treeSizeVars = {
 		"--gr-tree-font-size": "15px"
 	}
 };
+var grTreeViewVars = {
+	/**
+	* Плотный проводник: максимум узлов на экран, колена связей вместо простых
+	* вертикалей. Под мышь — 24px меньше минимальной цели касания.
+	*/
+	explorer: {
+		"--gr-tree-row-min-height": "24px",
+		"--gr-tree-row-py": "2px",
+		"--gr-tree-row-radius": "4px",
+		"--gr-tree-children-pl": "6px",
+		"--gr-tree-branch-line-offset": "8px",
+		"--gr-tree-branch-elbow-width": "10px",
+		"--gr-tree-content-gap": "6px",
+		"--gr-tree-branch-line-width": "1px",
+		"--gr-tree-branch-line-default-color": "var(--gr-brd)",
+		"--gr-tree-font-size": "12.5px",
+		"--gr-tree-toggle-size": "16px",
+		"--gr-tree-icon-size": "14px",
+		"--gr-tree-branch-font-weight": "400",
+		"--gr-tree-row-current-color": "var(--gr-primary-text)"
+	},
+	/**
+	* Навигация: выбранная строка — сплошная плашка, скруглённая только справа.
+	* Плоский левый край — не украшение: плашка начинается от отступа уровня, и
+	* скругление с той стороны читалось бы как отдельная кнопка, оторванная от
+	* рельса. Текст перекрашивается своим токеном, иначе на насыщенной подложке
+	* он остался бы нечитаемым.
+	*/
+	rail: {
+		"--gr-tree-row-min-height": "30px",
+		"--gr-tree-row-py": "3px",
+		"--gr-tree-row-radius": "0 999px 999px 0",
+		"--gr-tree-row-current-bg": "var(--gr-primary)",
+		"--gr-tree-row-current-hover-bg": "var(--gr-primary-hover, var(--gr-primary))",
+		"--gr-tree-row-current-color": "var(--gr-primary-fg)",
+		"--gr-tree-branch-line-default-color": "var(--gr-brd)"
+	},
+	/**
+	* Отбор: дерево, по которому не ходят, а которое размечают. Строка просторнее
+	* остальных видов, потому что цель нажатия здесь — квадрат отметки, а не
+	* подпись: 38px и увеличенный квадрат делают её достижимой и пальцем.
+	*
+	* Сам по себе вид отметок не включает — это ортогональная ось (`showCheckbox`),
+	* и она же работает в любом другом виде. Набор задаёт только плотность под неё.
+	*/
+	picker: {
+		"--gr-tree-row-min-height": "38px",
+		"--gr-tree-row-py": "7px",
+		"--gr-tree-row-px": "6px",
+		"--gr-tree-row-pr": "10px",
+		"--gr-tree-row-radius": "9px",
+		"--gr-tree-content-gap": "9px",
+		"--gr-tree-indent-step": "22px",
+		"--gr-tree-checkbox-size": "17px",
+		"--gr-tree-checkbox-radius": "5px",
+		"--gr-tree-checkbox-mr": "9px",
+		"--gr-tree-checkbox-brd-width": "1.5px"
+	},
+	/**
+	* Оглавление: иерархию несёт набор, а не хром. Направляющие и подложки
+	* гасятся, выбор отмечается полосой у края списка, цветом и весом — вид
+	* рассчитан на то, чтобы стоять рядом с читаемым текстом и не спорить с ним.
+	*
+	* Ступени кегля по уровням задаются `rowClass`: это единственное, чего набор
+	* значений сделать не может — уровень строки знает только разметка.
+	*/
+	outline: {
+		"--gr-tree-row-min-height": "26px",
+		"--gr-tree-row-py": "3px",
+		"--gr-tree-row-px": "6px",
+		"--gr-tree-row-radius": "6px",
+		"--gr-tree-row-hover-bg": "transparent",
+		"--gr-tree-row-current-bg": "transparent",
+		"--gr-tree-row-current-hover-bg": "transparent",
+		"--gr-tree-row-current-color": "var(--gr-primary-text)",
+		"--gr-tree-row-current-bar-width": "2px",
+		"--gr-tree-children-pl": "4px",
+		"--gr-tree-branch-line-offset": "6px",
+		"--gr-tree-branch-font-weight": "inherit"
+	}
+};
 //#endregion
 //#region src/components/GrTree/GrTree.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-gr-virtual", "aria-multiselectable"];
@@ -663,8 +253,8 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			default: true
 		},
 		branchLine: {
-			type: Boolean,
-			default: false
+			type: [Boolean, String],
+			default: "line"
 		},
 		branchLineColor: {
 			type: [String, Function],
@@ -791,17 +381,19 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		]);
 		const props = __props;
 		const emit = __emit;
-		const treeStore = createGrTreeStore({
-			adapter: createGrTreeDataAdapter(props),
+		const dataAdapter = createGrTreeDataAdapter(props);
+		const treeStore = useTree({
+			adapter: dataAdapter,
+			branchColorFor: branchColorForNode,
 			data: () => props.data,
 			defaultExpandedKeys: () => props.defaultExpandedKeys,
 			defaultExpandAll: () => props.defaultExpandAll,
-			filterNodeMethod: () => props.filterNodeMethod,
+			filterNodeMethod: filterNodeForModel,
 			defaultCheckedKeys: () => props.defaultCheckedKeys,
 			checkedKeys: () => props.checkedKeys,
 			checkStrictly: () => props.checkStrictly,
 			lazy: () => props.lazy,
-			load: () => props.load
+			load: loadForModel
 		});
 		const interactionContext = createGrTreeInteractionContext(props, {
 			emitNodeClick: (data, node) => emit("nodeClick", data, node),
@@ -840,39 +432,11 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		}, { immediate: true });
 		const treeRootEl = ref(null);
 		/**
-		* Видимые строки одним плоским списком в порядке отображения.
-		*
-		* Плоско — потому что рекурсивный рендер стоил по инстансу компонента на каждый
-		* раскрытый узел: дерево на 2 000 видимых строк превращалось в 2 000
-		* компонентов со своими вычислениями и подписками. Иерархию несут `aria-level`,
-		* `aria-posinset` и `aria-setsize`, отступ — `padding-left` строки.
+		* Видимые строки считает модель (`useTree`): в плоском DOM группы нет, и
+		* структуру дерева диктору сообщают `aria-level`, `aria-posinset` и
+		* `aria-setsize` — всё это приходит из неё готовым.
 		*/
-		const visibleRows = computed(() => {
-			const { roots } = treeStore.treeModel.value;
-			const { isActive, subtreeHasMatch, matchedKeys, autoExpandKeys } = treeStore.filterInfo.value;
-			const branch = treeProps.branchLine;
-			const rows = [];
-			const walk = (nodes, ancestorColors) => {
-				const siblings = isActive ? nodes.filter((node) => subtreeHasMatch.get(node.key)) : nodes;
-				siblings.forEach((node, index) => {
-					const isLeaf = treeStore.isLeafNode(node);
-					const isExpanded = treeStore.isExpandedKey(node.key) || isActive && autoExpandKeys.has(node.key);
-					rows.push({
-						node,
-						isExpanded,
-						isLeaf,
-						isMatched: matchedKeys.has(node.key),
-						posInSet: index + 1,
-						setSize: siblings.length,
-						isLoading: treeStore.isLoadingKey(node.key),
-						branchColors: ancestorColors
-					});
-					if (isExpanded && node.childNodes.length) walk(node.childNodes, branch ? [...ancestorColors, resolveBranchLineColor(node)] : ancestorColors);
-				});
-			};
-			walk(roots, []);
-			return rows;
-		});
+		const visibleRows = treeStore.visibleRows;
 		/**
 		* Кольцо roving-фокуса: ровно один `treeitem` на всё дерево держит `tabindex=0`.
 		*
@@ -1120,6 +684,38 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		* Направляющая уровня-предка. Считается от того же шага отступа, что и сам
 		* отступ строки, — иначе линия и содержимое разъедутся на вложенных уровнях.
 		*/
+		/**
+		* Колено рисуется только у направляющей собственного уровня строки: остальные
+		* — это транзит предков, и горизонтальная черта у них указывала бы на строку,
+		* к которой они не относятся.
+		*
+		* У последнего ребёнка вертикаль обрывается на середине: продолжать её значит
+		* обещать сиблинга, которого нет.
+		*/
+		/**
+		* Цвет направляющей уровня для модели. Объявление функцией, а не стрелкой на
+		* месте вызова: `treeProps` определяются ниже, и ссылка на них в выражении
+		* читалась бы до объявления.
+		*/
+		/**
+		* Обёртки над пропами для модели: объявлением, а не стрелкой на месте вызова —
+		* `treeProps` определяются ниже. `undefined` от фильтра означает «решай сам»:
+		* так обёртка возвращает модель к её подстрочному матчу, когда своего правила
+		* потребитель не задал.
+		*/
+		function filterNodeForModel(value, data, node) {
+			return treeProps.filterNodeMethod?.(value, data, node);
+		}
+		function loadForModel(node, resolve) {
+			treeProps.load?.(node, resolve);
+		}
+		function branchColorForNode(node) {
+			return treeProps.branchLine ? resolveBranchLineColor(node) : void 0;
+		}
+		function branchGuideModifiers(row, index) {
+			if (treeProps.branchLine !== "elbow" || index !== row.branchColors.length - 1) return void 0;
+			return row.posInSet === row.setSize ? "gr-tree__branch-guide--elbow gr-tree__branch-guide--last" : "gr-tree__branch-guide--elbow";
+		}
 		function branchGuideStyle(row, index) {
 			return {
 				"left": `calc(${treeProps.indent && treeProps.indent > 0 ? `${treeProps.indent}px` : "var(--gr-tree-indent-step)"} * ${index} + var(--gr-tree-branch-line-offset))`,
@@ -1333,6 +929,7 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 					"data-gr-tree-row": "",
 					class: normalizeClass(["gr-tree__row", [
 						unref(treeProps).highlightCurrent && unref(currentKey) === row.node.key ? "gr-tree__row--current" : "",
+						row.isLeaf ? "gr-tree__row--leaf" : "",
 						row.isMatched ? "gr-tree__row--matched" : "",
 						unref(dropTarget)?.key === row.node.key && unref(dropTarget).allowed && unref(dropTarget).type === "inner" ? "gr-tree__row--drop-inner" : "",
 						unref(dropTarget)?.key === row.node.key && unref(dropTarget).allowed && unref(dropTarget).type === "prev" ? "gr-tree__row--drop-prev" : "",
@@ -1350,10 +947,10 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 						return openBlock(), createElementBlock("span", {
 							key: guideIndex,
 							"data-gr-tree-branch-guide": "",
-							class: "gr-tree__branch-guide",
+							class: normalizeClass(["gr-tree__branch-guide", branchGuideModifiers(row, guideIndex)]),
 							style: normalizeStyle(branchGuideStyle(row, guideIndex)),
 							"aria-hidden": "true"
-						}, null, 4);
+						}, null, 6);
 					}), 128)),
 					unref(treeProps).draggable ? (openBlock(), createElementBlock("button", {
 						key: 0,
@@ -1411,6 +1008,6 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}), 128))], 46, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-0ff88d29"]]);
+}), [["__scopeId", "data-v-5a669f90"]]);
 //#endregion
-export { GrTree_default as t };
+export { grTreeViewVars as n, GrTree_default as t };