refactor: dbg calls in Selector.svelte identify element

webui/src/components/utils/Selector.svelte

@@ -92,6 +92,7 @@
 
   const dispatch = createEventDispatcher();
   const dbg = debug("kestrel:Selector");
+  let selectorEl: HTMLElement;
 
   export let MAX_OPTIONS = 25;
 
@@ -259,7 +260,7 @@
     options = result;
   }, 200);
 
-  $: dbg("Options: %O", options);
+  $: dbg("%o Options: %O", selectorEl, options);
 
   $: {
     if (inputFocused) {
@@ -275,7 +276,7 @@
   }
 
   async function set(option: SelectorOption) {
-    dbg("Setting option %O", option);
+    dbg("%o Setting option %O", selectorEl, option);
 
     switch (option.t) {
       case "Address":
@@ -328,7 +329,7 @@
         break;
     }
 
-    dbg("Result set value: %O", current);
+    dbg("%o Result set value: %O", selectorEl, current);
     dispatch("input", current);
 
     options = [];
@@ -381,7 +382,7 @@
 
   let input: Input;
   export function focus() {
-    // dbg("Focusing input");
+    // dbg("%o Focusing input", selectorEl);
     input.focus();
   }
 
@@ -391,10 +392,16 @@
     (inputFocused || hover || optionFocusIndex > -1) && Boolean(options.length);
   $: dispatch("focus", inputFocused || hover || optionFocusIndex > -1);
 
-  $: dbg("focus = %s, hover = %s, visible = %s", inputFocused, hover, visible);
+  $: dbg(
+    "%o focus = %s, hover = %s, visible = %s",
+    selectorEl,
+    inputFocused,
+    hover,
+    visible,
+  );
 </script>
 
-<div class="selector">
+<div class="selector" bind:this={selectorEl}>
   {#if current?.t === "Address" && inputValue.length > 0}
     <div class="input">
       <div class="label">