@keenmate/svelte-treeview 3.0.0 → 3.1.0

package/dist/Branch.svelte

@@ -28,7 +28,7 @@ function selectionChanged(node) {
 }
 // drag and drop
 function handleDragStart(e, node) {
-    internal_onHandleDragStart?.({ node: node, e: e });
+    internal_onHandleDragStart?.({ node: node, event: e });
 }
 function handleDragDrop(e, node, el) {
     e.stopImmediatePropagation();
@@ -172,25 +172,19 @@ function onContextMenu(ev, node) {
 					{insertionType}
 					{focusedNode}
 					{allowKeyboardNavigation}
-					on:open-ctxmenu
-					on:internal-expand
-					on:internal-selectionChanged
-					on:internal-handleDragStart
-					on:internal-handleDragDrop
-					on:internal-handleDragOver
-					on:internal-handleDragEnter
-					on:internal-handleDragEnd
-					on:internal-handleDragLeave
-					on:internal-keypress
-					
-				>
-					{#snippet children({ node: nodeNested })}
-										{@render children?.({node: nodeNested,})}
-						<!--<svelte:fragment slot="nest-highlight">-->
-						<!--	<slot name="nest-highlight" />-->
-						<!--</svelte:fragment>-->
-														{/snippet}
-								</Branch>
+					{children}
+					{nestHighlight}
+					{onOpenCtxmenu}
+					{internal_onExpand}
+					{internal_onSelectionChanged}
+					{internal_onHandleDragStart}
+					{internal_onHandleDragDrop}
+					{internal_onHandleDragOver}
+					{internal_onHandleDragEnter}
+					{internal_onHandleDragEnd}
+					{internal_onHandleDragLeave}
+					{internal_onKeypress}
+				/>
 			{/if}
 			{#if !expanded && node.hasChildren}
 				<ul class:child-menu={childDepth > 0}></ul>

package/dist/Branch.svelte.d.ts

@@ -1,4 +1,70 @@
 import Branch from "./Branch.svelte";
-declare const Branch: any;
-type Branch = InstanceType<typeof Branch>;
+import { type CustomizableClasses, InsertionType, type Node, SelectionModes } from "./types.js";
+import type { TreeHelper } from "./helpers/tree-helper.js";
+interface Props {
+    tree: Node[];
+    treeId: string;
+    recursive?: boolean;
+    checkboxes?: SelectionModes;
+    onlyLeafCheckboxes: boolean;
+    hideDisabledCheckboxes: boolean;
+    dragAndDrop: boolean;
+    verticalLines: boolean;
+    readonly: boolean;
+    expandTo: number;
+    classes: CustomizableClasses;
+    helper: TreeHelper;
+    childDepth: number;
+    branchRootNode: Node | null;
+    draggedNode: Node | null;
+    highlightedNode: Node | null;
+    insertionType: InsertionType;
+    focusedNode: Node | null;
+    allowKeyboardNavigation: boolean;
+    onOpenCtxmenu?: () => void;
+    internal_onExpand?: ({ node: any, changeTo: boolean }: {
+        node: any;
+        changeTo: any;
+    }) => void;
+    internal_onSelectionChanged?: ({ node: any }: {
+        node: any;
+    }) => void;
+    internal_onHandleDragStart?: ({ node: any, event: any }: {
+        node: any;
+        event: any;
+    }) => void;
+    internal_onHandleDragDrop?: ({ node: any, event: any, element: any }: {
+        node: any;
+        event: any;
+        element: any;
+    }) => void;
+    internal_onHandleDragOver?: ({ node: any, event: any, element: any, nest: any }: {
+        node: any;
+        event: any;
+        element: any;
+        nest: any;
+    }) => void;
+    internal_onHandleDragEnter?: ({ node: any, event: any, element: any }: {
+        node: any;
+        event: any;
+        element: any;
+    }) => void;
+    internal_onHandleDragEnd?: ({ node: any, event: any }: {
+        node: any;
+        event: any;
+    }) => void;
+    internal_onHandleDragLeave?: ({ node: any, event: any, element: any }: {
+        node: any;
+        event: any;
+        element: any;
+    }) => void;
+    internal_onKeypress?: ({ node: any, event: any }: {
+        node: any;
+        event: any;
+    }) => void;
+    children?: import("svelte").Snippet<[any]>;
+    nestHighlight?: import("svelte").Snippet;
+}
+declare const Branch: import("svelte").Component<Props, {}, "">;
+type Branch = ReturnType<typeof Branch>;
 export default Branch;

package/dist/TreeView.svelte

@@ -1,9 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: migrating this component would require adding a `$props` rune but there's already a variable named props.
-     Rename the variable and try again or migrate by hand. -->
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (context-menu to context_menu) making the component unusable -->
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (nest-highlight to nest_highlight) making the component unusable -->
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (nest-highlight to nest_highlight) making the component unusable -->
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (nest-highlight to nest_highlight) making the component unusable -->
 <script lang="ts">import ContextMenu from "./menu/ContextMenu.svelte";
 import { defaultClasses, defaultPropNames } from "./constants.js";
 import { InsertionType, SelectionModes as SelectionModes } from "./types.js";
@@ -14,12 +8,6 @@ import { DragDropProvider } from "./providers/drag-drop-provider.js";
 import uniq from "lodash.uniq";
 import { calculateNewFocusedNode, parseMovementDirection } from "./providers/movement-provider.js";
 let { treeId, tree, value = [], treeProps = {}, verticalLines = false, readonly = false, separator = ".", recursiveSelection = false, selectionMode = SelectionModes.none, onlyLeafCheckboxes = false, hideDisabledCheckboxes = false, loadChildrenAsync = null, showContextMenu = false, expandTo = 0, expansionThreshold = 0, customClasses = {}, filter = null, logger = null, nodeSorter = null, dragAndDrop = false, dropDisabledCallback = null, allowKeyboardNavigation = false, onFocus = undefined, onFocusLeave = undefined, onExpansion = undefined, onExpanded = undefined, onClosed = undefined, onChange = undefined, onSelection = undefined, onSelected = undefined, onUnselected = undefined, onMoved = undefined, children, nestHighlight, contextMenu } = $props();
-let ctxMenu = $state();
-let expandedPaths = $state([]);
-let draggedNode = $state(null);
-let highlightedNode = $state(null);
-let insertionType = $state(InsertionType.none);
-let focusedNode = $state(null);
 export function changeAllExpansion(changeTo) {
     debugLog("changing expansion of every node to ", changeTo ? "expanded" : "collapsed");
     if (changeTo) {
@@ -47,10 +35,15 @@ export function setNodeExpansion(nodePath, changeTo) {
         console.warn("Cannot expand node with null path");
         return;
     }
+    const expandedPathsBefore = $state.snapshot(expandedPaths);
     if (changeTo === null) {
         changeTo = !expandedPaths.includes(nodePath);
     }
     expandedPaths = helper.changeExpansion(nodePath, changeTo, expandedPaths);
+    console.log("Setting expansion", {
+        expandedPathsBefore: expandedPathsBefore,
+        expandedPaths: $state.snapshot(expandedPaths),
+    });
 }
 export function setExpansions(expansions) {
     if (!Array.isArray(expansions)) {
@@ -77,10 +70,13 @@ export function focusFirstNode() {
     onFocus?.(focusedNode);
     return focusedNode;
 }
+let ctxMenu = $state();
+let expandedPaths = $state([]);
+let draggedNode = $state(null);
+let highlightedNode = $state(null);
+let insertionType = $state(InsertionType.none);
+let focusedNode = $state(null);
 let computedClasses = $derived({ ...defaultClasses, ...(customClasses ?? {}) });
-$effect(() => {
-    dragAndDrop && console.warn("Drag and drop is not supported in this version");
-});
 let helper = $derived(new TreeHelper({
     separator,
     nodeSorter
@@ -88,6 +84,9 @@ let helper = $derived(new TreeHelper({
 let dragAndDropProvider = $derived(new DragDropProvider(helper));
 let selectionProvider = $derived(new SelectionProvider(helper, recursiveSelection));
 let computedTree = $derived(computeTree(helper, selectionProvider, tree, filter, treeProps, expandedPaths, value));
+$effect(() => {
+    dragAndDrop && console.warn("Drag and drop is not supported in this version");
+});
 function computeTree(helper, selectionProvider, userProvidedTree, filter, props, expandedPaths, value) {
     if (!Array.isArray(userProvidedTree) || !Array.isArray(value)) {
         console.error("value and tree must be arrays!!");
@@ -108,8 +107,8 @@ function computeTree(helper, selectionProvider, userProvidedTree, filter, props,
     debugLog(`Tree computed in: ${end - start}`, computeTree);
     return filteredTree;
 }
-function onExpand(detail) {
-    const { node, changeTo } = detail;
+function onExpand(data) {
+    const { node, changeTo } = data;
     expandedPaths = helper.changeExpansion(node.path, changeTo, expandedPaths);
     debugLog("changed expansion of node '", node.id, "' to ", changeTo);
     //trigger callback if it is present and node has useCallback property set to true
@@ -145,8 +144,8 @@ function handleCallback(node) {
     // this is now responsibility of user
     loadChildrenAsync(node);
 }
-function onSelectionChanged(detail) {
-    const { node } = detail;
+function onSelectionChanged(data) {
+    const { node } = data;
     const nodePath = node.path;
     const changeTo = !selectionProvider.isNodeSelected(node);
     const newValue = selectionProvider.setSelection(computedTree, nodePath, changeTo, value);
@@ -163,28 +162,28 @@ function onSelectionChanged(detail) {
         onUnselected?.({ node, value: newValue });
     }
 }
-function openContextMenu(ce) {
-    const { e, node } = ce.detail;
+function openContextMenu(data) {
+    const { event, node } = data;
     if (!showContextMenu) {
         return;
     }
-    e.preventDefault();
-    ctxMenu.onRightClick(e, node);
+    event.preventDefault();
+    ctxMenu.onRightClick(event, node);
 }
-function onDragStart(event) {
-    const { node, e } = event.detail;
+function onDragStart(data) {
+    const { node, event } = data;
     draggedNode = null;
     if (!dragAndDrop || node.dragDisabled) {
         return;
     }
     draggedNode = node;
 }
-function onDragEnd({ detail: { node, event, element } }) {
+function onDragEnd({ node, event, element }) {
     // fires when you stop dragging element
     draggedNode = null;
     highlightedNode = null;
 }
-function onDragDrop({ detail: { node, event, element } }) {
+function onDragDrop({ node, event, element }) {
     // here we assume that highlightType is correctly calculated in handleDragOver
     if (!dragAndDrop || draggedNode === null || insertionType === InsertionType.none) {
         event.preventDefault();
@@ -199,7 +198,7 @@ function onDragDrop({ detail: { node, event, element } }) {
     });
 }
 // handle highlighting
-function onDragEnter({ detail: { node, event, element } }) {
+function onDragEnter({ node, event, element }) {
     highlightedNode = null;
     if (!draggedNode || !dragAndDrop) {
         return;
@@ -220,7 +219,7 @@ function onDragEnter({ detail: { node, event, element } }) {
         highlightedNode = node;
     }
 }
-function onDragOver({ detail: { node, event, element, nest } }) {
+function onDragOver({ node, event, element, nest }) {
     if (!dragAndDrop || draggedNode === null || node.dropDisabled) {
         return;
     }
@@ -231,11 +230,11 @@ function onDragOver({ detail: { node, event, element, nest } }) {
     event.preventDefault();
     insertionType = insertType;
 }
-function onDragLeave({ detail: { node, event, element } }) {
+function onDragLeave({ node, event, element }) {
     insertionType = InsertionType.none;
 }
-function onKeyPress(detail) {
-    const { event, node: targetNode } = detail;
+function onKeyPress(data) {
+    const { event, node: targetNode } = data;
     if (!allowKeyboardNavigation) {
         return;
     }
@@ -269,68 +268,73 @@ function debugLog(...data) {
 }
 </script>
 
-<Branch
-	branchRootNode={null}
-	{treeId}
-	checkboxes={selectionMode}
-	tree={computedTree}
-	recursive={recursiveSelection}
-	{onlyLeafCheckboxes}
-	{hideDisabledCheckboxes}
-	{expandTo}
-	{dragAndDrop}
-	{readonly}
-	{helper}
-	classes={computedClasses}
-	{verticalLines}
-	childDepth={0}
-	{insertionType}
-	{highlightedNode}
-	{draggedNode}
-	{focusedNode}
-	{allowKeyboardNavigation}
-	{children}
-	{nestHighlight}
-	internal_onHandleDragStart={onDragStart}
-	internal_onHandleDragDrop={onDragDrop}
-	internal_onHandleDragOver={onDragOver}
-	internal_onHandleDragEnter={onDragEnter}
-	internal_onHandleDragEnd={onDragEnd}
-	internal_onHandleDragLeave={onDragLeave}
-	internal_onKeypress={(e) => onKeyPress(e.detail)}
-	internal_onExpand={(e) => onExpand(e.detail)}
-	internal_onSelectionChanged={(e) => onSelectionChanged(e.detail)}
-	onOpenCtxmenu={openContextMenu}
-/>
-<ContextMenu bind:this={ctxMenu}>
-	{#snippet children({node})}
-		{@render contextMenu?.({node})}
-	{/snippet}
-</ContextMenu>
+<div class="treeview-parent">
+	<Branch
+		branchRootNode={null}
+		{treeId}
+		checkboxes={selectionMode}
+		tree={computedTree}
+		recursive={recursiveSelection}
+		{onlyLeafCheckboxes}
+		{hideDisabledCheckboxes}
+		{expandTo}
+		{dragAndDrop}
+		{readonly}
+		{helper}
+		classes={computedClasses}
+		{verticalLines}
+		childDepth={0}
+		{insertionType}
+		{highlightedNode}
+		{draggedNode}
+		{focusedNode}
+		{allowKeyboardNavigation}
+		{children}
+		{nestHighlight}
+		internal_onHandleDragStart={onDragStart}
+		internal_onHandleDragDrop={onDragDrop}
+		internal_onHandleDragOver={onDragOver}
+		internal_onHandleDragEnter={onDragEnter}
+		internal_onHandleDragEnd={onDragEnd}
+		internal_onHandleDragLeave={onDragLeave}
+		internal_onKeypress={onKeyPress}
+		internal_onExpand={onExpand}
+		internal_onSelectionChanged={onSelectionChanged}
+		onOpenCtxmenu={openContextMenu}
+	/>
+	<ContextMenu bind:this={ctxMenu}>
+		{#snippet children({node})}
+			{@render contextMenu?.({node})}
+		{/snippet}
+	</ContextMenu>
+</div>
 
-<style global>:global(.treeview) {
+<style global>:global(.treeview-parent) {
+  color: red !important;
+}
+:global(.treeview-parent) :global(.treeview) {
   padding: 0;
 }
-:global(.treeview.show-lines) :global(ul:before) {
+:global(.treeview-parent) :global(.treeview.show-lines) :global(ul:before) {
   border-left: solid black 1px;
 }
-:global(.treeview.show-lines) :global(ul) :global(li:before) {
+:global(.treeview-parent) :global(.treeview.show-lines) :global(ul) :global(li:before) {
   border-top: solid black 1px;
   margin: 0;
   padding: 0;
   list-style: none;
 }
-:global(.treeview) :global(ul), :global(.treeview) :global(li) {
+:global(.treeview-parent) :global(.treeview) :global(ul), :global(.treeview-parent) :global(.treeview) :global(li) {
   margin: 0;
   padding: 0;
   list-style: none;
 }
-:global(.treeview) :global(ul) {
+:global(.treeview-parent) :global(.treeview) :global(ul) {
   margin-left: 0.4em;
   position: relative;
   margin-left: 0.3em;
 }
-:global(.treeview) :global(ul:before) {
+:global(.treeview-parent) :global(.treeview) :global(ul:before) {
   content: "";
   display: block;
   width: 0;
@@ -339,7 +343,7 @@ function debugLog(...data) {
   bottom: 0;
   left: 0;
 }
-:global(.treeview) :global(ul) :global(li:before) {
+:global(.treeview-parent) :global(.treeview) :global(ul) :global(li:before) {
   content: "";
   display: block;
   width: 10px;
@@ -349,48 +353,48 @@ function debugLog(...data) {
   top: 0.8em;
   left: 0;
 }
-:global(.treeview) :global(ul) :global(li:not(.has-children):before) {
+:global(.treeview-parent) :global(.treeview) :global(ul) :global(li:not(.has-children):before) {
   width: 26px;
 }
-:global(.treeview) :global(ul) :global(li:last-child:before) {
+:global(.treeview-parent) :global(.treeview) :global(ul) :global(li:last-child:before) {
   background: #fff;
   height: auto;
   top: 1em;
   bottom: 0;
 }
-:global(.treeview) :global(li) {
+:global(.treeview-parent) :global(.treeview) :global(li) {
   margin: 0;
-  padding: 0 0.8em;
+  padding: 0 0.8e;
   color: #555;
-  font-weight: 700;
-  position: relative;
+  font-weight: 70;
+  position: relat;
 }
-:global(.treeview) :global(.tree-item) {
+:global(.treeview-parent) :global(.treeview) :global(.tree-item) {
   display: flex;
   column-gap: 0.4em;
   align-items: center;
   padding: 4px 0;
 }
-:global(.treeview) :global(.no-arrow) {
+:global(.treeview-parent) :global(.treeview) :global(.no-arrow) {
   padding-left: 0.5rem;
 }
-:global(.treeview) :global(.arrow) {
+:global(.treeview-parent) :global(.treeview) :global(.arrow) {
   cursor: pointer;
   display: inline-block;
 }
-:global(.treeview) :global(.arrowDown) {
+:global(.treeview-parent) :global(.treeview) :global(.arrowDown) {
   transform: rotate(90deg);
 }
-:global(.treeview) :global(.invisible) {
+:global(.treeview-parent) :global(.treeview) :global(.invisible) {
   visibility: hidden;
 }
-:global(.treeview) :global(.inserting-highlighted) {
+:global(.treeview-parent) :global(.treeview) :global(.inserting-highlighted) {
   color: red;
 }
-:global(.treeview) :global(.hover) {
+:global(.treeview-parent) :global(.treeview) :global(.hover) {
   font-weight: bold;
 }
-:global(.treeview) :global(.insert-line) {
+:global(.treeview-parent) :global(.treeview) :global(.insert-line) {
   position: absolute;
   left: 0;
   z-index: 99;
@@ -402,24 +406,24 @@ function debugLog(...data) {
   margin-left: 28px;
   pointer-events: none;
 }
-:global(.treeview) :global(.insert-line-child) {
+:global(.treeview-parent) :global(.treeview) :global(.insert-line-child) {
   margin-left: calc(28px + 5em);
   background-color: red;
   height: 6px;
 }
-:global(.treeview) :global(.insert-line-wrapper) {
+:global(.treeview-parent) :global(.treeview) :global(.insert-line-wrapper) {
   position: relative;
 }
-:global(.treeview) :global(.currently-dragged) {
+:global(.treeview-parent) :global(.treeview) :global(.currently-dragged) {
   color: LightGray;
 }
-:global(.treeview) :global(.pointer-cursor) {
+:global(.treeview-parent) :global(.treeview) :global(.pointer-cursor) {
   cursor: grab;
 }
-:global(.treeview) :global(.expansion-button) {
+:global(.treeview-parent) :global(.treeview) :global(.expansion-button) {
   all: unset;
 }
-:global(.treeview) :global(.fixed-icon) {
+:global(.treeview-parent) :global(.treeview) :global(.fixed-icon) {
   text-align: center;
   width: 1.25em;
   min-width: 1.25em;

package/dist/helpers/tree-helper.js

@@ -32,11 +32,9 @@ export class TreeHelper {
         }
     }
     markExpanded(tree, expandedPaths) {
-        {
-            tree.forEach((node) => {
-                node.expanded = expandedPaths.includes(node.path ?? "");
-            });
-        }
+        tree.forEach((node) => {
+            node.expanded = expandedPaths.includes(node.path ?? "");
+        });
     }
     //#region basic helpers
     getParentNodePath(nodePath) {

package/dist/tree-styles.scss

@@ -0,0 +1,151 @@
+$treeview-lines: solid black 1px;
+
+
+.treeview {
+	padding: 0;
+	//will show lines if you set show-lines to root element
+	&.show-lines {
+		ul {
+			&:before {
+				border-left: $treeview-lines;
+			}
+
+			li:before {
+				border-top: $treeview-lines;
+				margin: 0;
+				padding: 0;
+				list-style: none;
+			}
+		}
+	}
+
+	ul, li {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	ul {
+		margin-left: 0.4em;
+		position: relative;
+		margin-left: .3em;
+
+		&:before {
+			content: "";
+			display: block;
+			width: 0;
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+		}
+
+		li:before {
+			content: "";
+			display: block;
+			width: 10px;
+			height: 0;
+			margin-top: -1px;
+			position: absolute;
+			top: 0.8em;
+			left: 0;
+		}
+
+		li:not(.has-children):before {
+			width: 26px;
+		}
+
+		li:last-child:before {
+			background: #fff;
+			height: auto;
+			top: 1em;
+			bottom: 0;
+		}
+	}
+
+	li {
+		margin: 0;
+		padding: 0 0.8e;
+		color: #555;
+		font-weight: 70;
+		position: relat;
+	}
+
+	.tree-item {
+		display: flex;
+		column-gap: 0.4em;
+		align-items: center;
+		padding: 4px 0;
+	}
+
+	.no-arrow {
+		padding-left: .5rem;
+	}
+
+	.arrow {
+		cursor: pointer;
+		display: inline-block;
+	}
+
+	.arrowDown {
+		transform: rotate(90deg);
+	}
+
+	.invisible {
+		visibility: hidden;
+	}
+
+	.inserting-highlighted {
+		color: red;
+	}
+
+	.hover {
+		font-weight: bold;
+	}
+
+	.insert-line {
+		position: absolute;
+		left: 0;
+		z-index: 99;
+		height: 2px;
+		width: 200px;
+		background-color: blue;
+		display: block;
+		border-radius: 3px;
+		margin-left: 28px;
+		pointer-events: none;
+	}
+
+	//! this is needed to fix flickering issue
+	// margin-bottom: -2px
+	// margin-top: -2px
+	.insert-line-child {
+		margin-left: calc(28px + 5em);
+		background-color: red;
+		height: 6px;
+	}
+
+	.insert-line-wrapper {
+		position: relative;
+	}
+
+	.currently-dragged {
+		color: LightGray;
+	}
+
+	.pointer-cursor {
+		cursor: grab;
+	}
+
+	.expansion-button {
+		all: unset;
+	}
+
+	.fixed-icon {
+		text-align: center;
+		width: 1.25em;
+		// fix deformation on small screens
+		min-width: 1.25em;
+	}
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"repository": {
 		"url": "https://github.com/keenmate/svelte-treeview"
 	},
@@ -22,6 +22,9 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
+		},
+		"./*": {
+			"import": "./dist/*"
 		}
 	},
 	"files": [

package/dist/tree-styles.sass

@@ -1,121 +0,0 @@
-$treeview-lines: solid black 1px
-.treeview
-	padding: 0
-	//will show lines if you set show-lines to root element
-	&.show-lines
-		ul
-			&:before
-				border-left: $treeview-lines
-
-			li:before
-				border-top: $treeview-lines
-				margin: 0
-				padding: 0
-				list-style: none
-
-	ul, li
-		margin: 0
-		padding: 0
-		list-style: none
-
-	ul
-		margin-left: 0.4em
-		position: relative
-		margin-left: .3em
-
-		&:before
-			content: ""
-			display: block
-			width: 0
-			position: absolute
-			top: 0
-			bottom: 0
-			left: 0
-
-		li:before
-			content: ""
-			display: block
-			width: 10px
-			height: 0
-			margin-top: -1px
-			position: absolute
-			top: 0.8em
-			left: 0
-
-		li:not(.has-children):before
-			width: 26px
-
-		li:last-child:before
-			background: #fff
-			height: auto
-			top: 1em
-			bottom: 0
-
-	li
-		margin: 0
-		padding: 0 0.8em
-		color: #555
-		font-weight: 700
-		position: relative
-
-	.tree-item
-		display: flex
-		column-gap: 0.4em
-		align-items: center
-		padding: 4px 0
-
-	.no-arrow
-		padding-left: .5rem
-
-	.arrow
-		cursor: pointer
-		display: inline-block
-
-	.arrowDown
-		transform: rotate(90deg)
-
-	.invisible
-		visibility: hidden
-
-	.inserting-highlighted
-		color: red
-
-	.hover
-		font-weight: bold
-
-	.insert-line
-		position: absolute
-		left: 0
-		z-index: 99
-		height: 2px
-		width: 200px
-		background-color: blue
-		display: block
-		border-radius: 3px
-		margin-left: 28px
-		pointer-events: none
-	//! this is needed to fix flickering issue
-	// margin-bottom: -2px
-	// margin-top: -2px
-	.insert-line-child
-		margin-left: calc(28px + 5em)
-		background-color: red
-		height: 6px
-
-	.insert-line-wrapper
-		position: relative
-
-	.currently-dragged
-		color: LightGray
-
-	.pointer-cursor
-		cursor: grab
-
-	.expansion-button
-		all: unset
-
-	.fixed-icon
-		text-align: center
-		width: 1.25em
-		// fix deformation on small screens
-		min-width: 1.25em