fix: correctly highlight hovered node (#160)

src/lib/nodes/Anchor.svelte

@@ -6,6 +6,7 @@
 
 <style>
 	div {
+		width: 100%;
 		color: rgb(151, 164, 179);
 	}
 

src/lib/nodes/Block.svelte

@@ -37,6 +37,7 @@
 
 <style>
 	div {
+		width: 100%;
 		display: flex;
 		color: rgb(151, 164, 179);
 	}

src/lib/nodes/Element.svelte

@@ -100,6 +100,7 @@
 
 <style>
 	div {
+		width: 100%;
 		display: flex;
 		flex-wrap: wrap;
 	}

src/lib/nodes/Node.svelte

@@ -28,14 +28,14 @@
 	{@const left = depth * 12 + 4}
 
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<li
 		class:flash
 		bind:this={node.dom}
 		on:animationend={() => (flash = false)}
 		on:click|stopPropagation={() => selected.set(node)}
-		on:mouseenter|stopPropagation={() => {
+		on:mousemove|stopPropagation={() => {
+			if ($hovered?.id === node.id) return;
 			background.send('ext/highlight', node.id);
 			hovered.set(node);
 		}}
@@ -144,15 +144,6 @@
 		background: #e0e0e2;
 	}
 
-	/* li:hover,
-	li.hovered {
-		background: #f0f9fe;
-	}
-	li.selected {
-		background: rgb(0, 116, 232);
-		color: #ffffff;
-	} */
-
 	li.flash :global(> :first-child),
 	li.flash :global(> :first-child *),
 	li :global(.flash),
@@ -175,13 +166,10 @@
 		background: #f0f9fe;
 	}
 
-	:global(.dark) li:hover,
-	/* :global(.dark) li.hovered, */
 	:global(.dark) li :global(.hover) {
 		background: rgb(53, 59, 72);
 	}
 
-	/* :global(.dark) li.selected, */
 	:global(.dark) li :global(.selected),
 	:global(.dark) li :global(.selected *),
 	:global(.dark) li :global(.hover.selected) {

src/lib/nodes/Slot.svelte

@@ -33,6 +33,7 @@
 
 <style>
 	div {
+		width: 100%;
 		display: flex;
 	}
 </style>

src/routes/+layout.svelte

@@ -35,6 +35,11 @@
 	function interactive({ type }: (typeof $root)[number]) {
 		return $visibility[type] && type !== 'text' && type !== 'anchor';
 	}
+
+	function reset() {
+		background.send('ext/highlight', null);
+		hovered.set(undefined);
+	}
 </script>
 
 <svelte:window
@@ -112,12 +117,7 @@
 			</Button>
 		</Toolbar>
 
-		<ul
-			on:mouseleave={() => {
-				background.send('ext/highlight', null);
-				hovered.set(undefined);
-			}}
-		>
+		<ul on:mousemove|self={reset} on:mouseleave={reset}>
 			{#each $root as node (node.id)}
 				<Node {node} />
 			{/each}
@@ -161,7 +161,6 @@
 
 	ul {
 		overflow: auto;
-		padding-left: 0.5rem;
 	}
 
 	h2 {