From a541603267ceb664f1fb3a36343af98f01a326ef Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 6 Feb 2025 09:57:04 +0000
Subject: [PATCH] Type hover and selection indicators

---
 .../src/components/preview/HoverIndicator.svelte | 16 ++++++++++------
 .../components/preview/SelectionIndicator.svelte |  2 +-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte
index 4930fc35eb..d8846bdb42 100644
--- a/packages/client/src/components/preview/HoverIndicator.svelte
+++ b/packages/client/src/components/preview/HoverIndicator.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { onMount, onDestroy } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
   import { dndIsDragging, hoverStore, builderStore } from "stores"
@@ -7,20 +7,24 @@
   $: selectedComponentId = $builderStore.selectedComponentId
   $: selected = componentId === selectedComponentId
 
-  const onMouseOver = e => {
+  const onMouseOver = (e: MouseEvent) => {
+    const target = e.target as HTMLElement
+
     // Ignore if dragging
     if (e.buttons > 0) {
       return
     }
 
     let newId
-    if (e.target.classList.contains("anchor")) {
+    if (target.classList.contains("anchor")) {
       // Handle resize anchors
-      newId = e.target.dataset.id
+      newId = target.dataset.id
     } else {
       // Handle normal components
-      const element = e.target.closest(".interactive.component:not(.root)")
-      newId = element?.dataset?.id
+      const element = target.closest(".interactive.component:not(.root)")
+      if (element instanceof HTMLElement) {
+        newId = element.dataset?.id
+      }
     }
 
     if (newId !== componentId) {
diff --git a/packages/client/src/components/preview/SelectionIndicator.svelte b/packages/client/src/components/preview/SelectionIndicator.svelte
index e3998df5af..ac1c52c0fa 100644
--- a/packages/client/src/components/preview/SelectionIndicator.svelte
+++ b/packages/client/src/components/preview/SelectionIndicator.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { dndIsDragging, builderStore } from "@/stores"
   import IndicatorSet from "./IndicatorSet.svelte"