fix: can't select empty chord outputs

update dependencies
use new title popover

src/lib/components/Action.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
   import type { KeyInfo } from "$lib/serial/keymap-codes";
-  import { action as title } from "$lib/title";
   import { osLayout } from "$lib/os-layout";
+  import { tooltip } from "$lib/hover-popover";
 
   let {
     action,
@@ -16,42 +16,49 @@
   );
   let dynamicMapping = $derived(info.keyCode && $osLayout.get(info.keyCode));
 
-  let tooltip = $derived(
-    `&lt;${info.id ?? `0x${info.code.toString(16)}`}&gt; ` +
-      (info.title ?? "") +
-      (info.variant === "left"
-        ? " (left)"
-        : info.variant === "right"
-          ? " (right)"
-          : ""),
-  );
+  let popover: HTMLElement | undefined = $state(undefined);
 </script>
 
+{#snippet popoverSnippet()}
+<div bind:this={popover} popover="hint">
+&lt;{info.id ?? `0x${info.code.toString(16)}`}&gt;
+{#if info.title} 
+{info.title}
+{/if}
+  {#if info.variant === "left"}
+    (Left)
+  {:else if info.variant === "right"}
+    (Right)
+  {/if}
+</div>
+{/snippet}
+
 {#if display === "keys"}
   <kbd
     class:icon={!!info.icon}
     class:left={info.variant === "left"}
     class:right={info.variant === "right"}
-    use:title={{ title: tooltip }}
+    {@attach tooltip(popover)}
   >
     {dynamicMapping ??
       info.icon ??
       info.display ??
       info.id ??
       `0x${info.code.toString(16)}`}
+    {@render popoverSnippet()}
   </kbd>
 {:else if display === "inline-keys"}
   {#if !info.icon && dynamicMapping?.length === 1}
     <span
-      use:title={{ title: tooltip }}
+    {@attach tooltip(popover)}
       class:left={info.variant === "left"}
-      class:right={info.variant === "right"}>{dynamicMapping}</span
+      class:right={info.variant === "right"}>{dynamicMapping}{@render popoverSnippet()}</span
     >
   {:else if !info.icon && info.id?.length === 1}
     <span
-      use:title={{ title: tooltip }}
+    {@attach tooltip(popover)}
       class:left={info.variant === "left"}
-      class:right={info.variant === "right"}>{info.id}</span
+      class:right={info.variant === "right"}>{info.id}{@render popoverSnippet()}</span
     >
   {:else}
     <kbd
@@ -59,13 +66,13 @@
       class:left={info.variant === "left"}
       class:right={info.variant === "right"}
       class:icon={!!info.icon}
-      use:title={{ title: tooltip }}
+    {@attach tooltip(popover)}
     >
       {dynamicMapping ??
         info.icon ??
         info.display ??
         info.id ??
-        `0x${info.code.toString(16)}`}</kbd
+        `0x${info.code.toString(16)}`}{@render popoverSnippet()}</kbd
     >
   {/if}
 {/if}

src/lib/hover-popover.ts

@@ -0,0 +1,39 @@
+import type { Attachment } from "svelte/attachments";
+
+export const hotkeys = new Map<string, HTMLElement>();
+
+export function tooltip(
+  target: HTMLElement | undefined,
+  shortcut?: string,
+): Attachment<HTMLElement> {
+  return (node: HTMLElement) => {
+    function show() {
+      if (!target) return;
+      target.showPopover({ source: node });
+    }
+    function hide() {
+      if (!target) return;
+      target.hidePopover();
+    }
+
+    node.addEventListener("mouseenter", show);
+    node.addEventListener("focus", show);
+    node.addEventListener("mouseout", hide);
+    node.addEventListener("blur", hide);
+
+    if (shortcut && node instanceof HTMLElement) {
+      hotkeys.set(shortcut, node);
+    }
+
+    return () => {
+      node.removeEventListener("mouseenter", show);
+      node.removeEventListener("focus", show);
+      node.removeEventListener("mouseout", hide);
+      node.removeEventListener("blur", hide);
+
+      if (shortcut && node instanceof HTMLElement) {
+        hotkeys.delete(shortcut);
+      }
+    };
+  };
+}

src/lib/style/elements/_popover.scss

@@ -4,13 +4,15 @@ $translate: translateY(8px);
 [popover] {
   position: absolute;
   inset: unset;
-  transform: $translate;
 
   margin: 0;
   padding: 8px;
   border: 1px solid var(--md-sys-color-outline);
   border-radius: 8px;
 
+  font-family: "Noto Sans Mono", monospace;
+  font-size: initial;
+  font-weight: initial;
   color: var(--md-sys-color-on-surface);
 
   opacity: 0;
@@ -18,12 +20,14 @@ $translate: translateY(8px);
 
   transition:
     transform $animation-duration ease,
-    opacity $animation-duration ease,
+    opacity $animation-duration linear,
     overlay $animation-duration allow-discrete,
     display $animation-duration allow-discrete;
 
-  position-area: bottom span-right;
+  position-area: bottom span-all;
   position-try-fallbacks:
+    top span-all,
+    bottom span-right,
     top span-right,
     bottom span-left,
     top span-left;
@@ -43,9 +47,21 @@ $translate: translateY(8px);
   }
 }
 
+[popover="auto"] {
+  transform: $translate;
+}
+
+[popover="hint"] {
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+}
+
 @starting-style {
   [popover]:popover-open {
-    transform: $translate;
     opacity: 0;
   }
+
+  [popover="auto"] {
+    transform: $translate;
+  }
 }

src/lib/title.ts

@@ -5,6 +5,9 @@ import Tooltip from "$lib/components/Tooltip.svelte";
 
 export const hotkeys = new Map<string, HTMLElement>();
 
+/**
+ * @deprecated Use `tooltip` instead.
+ */
 export const action: Action<Element, { title?: string; shortcut?: string }> = (
   node: Element,
   { title, shortcut },

src/routes/(app)/config/chords/ChordPhraseEdit.svelte

@@ -183,7 +183,13 @@
   );
 </script>
 
-<div class="wrapper" class:edited={!chord.deleted && chord.phraseChanged}>
+<div
+  class="wrapper"
+  class:edited={!chord.deleted && chord.phraseChanged}
+  onclick={() => {
+    box.focus();
+  }}
+>
   {#if supportsAutospace}
     <label
       class="auto-space-edit"