improve mouseover behavior for components

frontend/src/lib/components/InstanceSettings.svelte

@@ -292,7 +292,7 @@
 												</div>
 												{#if values[setting.key]?.length > 0}
 													{#if parseDate(values[setting.key])}
-														<span class="text-gray-600 text-2xs"
+														<span class="text-tertiary text-2xs"
 															>License key expires on {parseDate(values[setting.key])}</span
 														>
 													{/if}

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -578,7 +578,7 @@
 											/>
 											<SecondaryMenu right />
 										{:else}
-											<div class="min-w-[150px] text-sm text-secondary text-center py-8 px-2">
+											<div class="min-w-[150px] text-sm !text-secondary text-center py-8 px-2">
 												Select a component to see the settings&nbsp;for&nbsp;it
 											</div>
 										{/if}

frontend/src/lib/components/apps/editor/ComponentHeader.svelte

@@ -15,7 +15,7 @@
 	export let selected: boolean
 	export let locked: boolean = false
 	export let hover: boolean = false
-	export let shouldHideActions: boolean = false
+	export let connecting: boolean = false
 	export let hasInlineEditor: boolean = false
 	export let inlineEditorOpened: boolean = false
 	export let errorHandledByComponent: boolean = false
@@ -35,7 +35,11 @@
 </script>
 
 {#if selected || hover}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<span
+		on:mouseover|stopPropagation={() => {
+			dispatch('mouseover')
+		}}
 		on:mousedown|stopPropagation|capture
 		draggable="false"
 		title={`Id: ${component.id}`}
@@ -52,7 +56,7 @@
 	</span>
 {/if}
 
-{#if selected && !shouldHideActions}
+{#if selected && !connecting}
 	<div class="top-[-9px] -right-[8px] flex flex-row absolute gap-1.5 z-50">
 		{#if hasInlineEditor}
 			<button
@@ -102,6 +106,7 @@
 				<Anchor aria-label="Lock position" size={14} />
 			{/if}
 		</button>
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			draggable="false"
 			title="Move"

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -74,28 +74,44 @@
 	let componentContainerHeight: number = 0
 
 	let inlineEditorOpened: boolean = false
+
+	let outTimeout: NodeJS.Timeout | undefined = undefined
+
+	function mouseOut() {
+		outTimeout && clearTimeout(outTimeout)
+		outTimeout = setTimeout(() => {
+			if ($hoverStore !== undefined) {
+				$hoverStore = undefined
+			}
+		}, 50)
+	}
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	on:mouseover|stopPropagation={() => {
+		outTimeout && clearTimeout(outTimeout)
 		if (component.id !== $hoverStore) {
 			$hoverStore = component.id
 		}
 	}}
-	on:mouseout|stopPropagation={() => {
-		if ($hoverStore !== undefined) {
-			$hoverStore = undefined
-		}
-	}}
+	on:mouseout|stopPropagation={mouseOut}
 	class="h-full flex flex-col w-full component {initializing ? 'overflow-hidden h-0' : ''}"
 >
 	{#if $mode !== 'preview'}
 		<ComponentHeader
+			on:mouseover={() => {
+				outTimeout && clearTimeout(outTimeout)
+
+				if (component.id !== $hoverStore) {
+					$hoverStore = component.id
+				}
+			}}
 			hover={$hoverStore === component.id}
 			{component}
 			{selected}
-			shouldHideActions={$connectingInput.opened}
+			connecting={$connectingInput.opened}
 			on:lock
 			on:expand
 			{locked}

frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte

@@ -113,9 +113,8 @@
 	})
 </script>
 
-
 {#if component}
-  {#key component?.id}
+	{#key component?.id}
 		<div class="px-2 flex items-center gap-2 flex-row justify-between">
 			{#if !cssEditorOpen}
 				<Button
@@ -275,5 +274,5 @@
 		<CssMigrationModal bind:this={migrationModal} bind:component />
 	{/key}
 {:else}
-	<span class="text-sm text-gray-600 mx-2">Select a component to style it in this panel</span>
+	<span class="text-sm text-secondary mx-2">Select a component to style it in this panel</span>
 {/if}