feat: 3d click in layout

feat: action autocomplete

[deploy]

src/lib/components/ActionAutocomplete.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
+  import ActionListItem from "$lib/components/ActionListItem.svelte"
+
+  export let exact: number | undefined = undefined
+  export let code: number = Number.NaN
+  export let results: number[] = []
+
+  export let width: number
+
+  console.log(width)
+</script>
+
+<div class="list" style="width: {width}px">
+  {#if exact !== undefined}
+    <div class="exact">
+      <i>Exact match</i>
+      <ActionListItem id={exact} />
+    </div>
+  {/if}
+  {#if !exact && code}
+    {#if code >= 2 ** 5 && code < 2 ** 13}
+      <button>USE CODE</button>
+    {:else}
+      <div>Action code is out of range</div>
+    {/if}
+  {/if}
+  {#each results as id (id)}
+    <ActionListItem {id} />
+  {/each}
+</div>
+
+<style lang="scss">
+  .list {
+    --scrollbar-color: var(--md-sys-color-on-surface-variant);
+
+    scrollbar-gutter: stable both-edges;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+
+    max-height: 500px;
+    padding-block: 8px;
+  }
+
+  .exact {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+
+    border: 1px solid var(--md-sys-color-primary);
+    border-radius: 8px;
+
+    > i {
+      padding-inline: 8px;
+      color: var(--md-sys-color-on-primary);
+      background: var(--md-sys-color-primary);
+      border-radius: 0 0 8px 8px;
+    }
+  }
+</style>

src/lib/components/ActionListItem.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
+  import type {KeyInfo} from "$lib/serial/keymap-codes"
+
+  export let id: number | KeyInfo
+
+  $: key = (typeof id === "number" ? KEYMAP_CODES[id] ?? id : id) as number | KeyInfo
+</script>
+
+<button>
+  {#if typeof key === "object"}
+    <div class="title">
+      <b>
+        {key.title || ""}
+        {#if key.variant === "left"}
+          (Left)
+        {:else if key.variant === "right"}
+          (Right)
+        {/if}
+      </b>
+      {#if key.description}
+        <i>{key.description}</i>
+      {/if}
+    </div>
+    <span class:icon={!!key.icon} class="key">{key.icon || key.id || `0x${key.code.toString(16)}`}</span>
+  {:else}
+    <span class="key">0x{key.toString(16)}</span>
+  {/if}
+</button>
+
+<style lang="scss">
+  button {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+
+    width: 100%;
+    margin: 0;
+    padding: 8px;
+
+    font-family: "Noto Sans Mono", monospace;
+    color: inherit;
+
+    background: transparent;
+    border: none;
+  }
+
+  .title {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    text-align: start;
+  }
+
+  .key {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    min-width: 32px;
+    padding: 4px;
+
+    font-weight: 600;
+
+    border: 1px solid currentcolor;
+    border-radius: 4px;
+  }
+</style>

src/lib/components/layout/InputEdit.svelte

@@ -3,52 +3,16 @@
   import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
   import ActionSelector from "$lib/components/layout/ActionSelector.svelte"
   import {popup} from "$lib/popup"
+  import ActionListItem from "$lib/components/ActionListItem.svelte"
 
   export let id: number = 0
 </script>
 
 <table>
   {#each $layout as layer, i}
-    {@const action = KEYMAP_CODES[layer[id]]}
     <tr>
       <th class="icon">counter_{i + 1}</th>
-      <td
-        ><button use:popup={ActionSelector}
-          >{action?.title || action?.id} <span class="icon">edit</span></button
-        ></td
-      >
+      <ActionListItem id={layer[id]} />
     </tr>
   {/each}
 </table>
-
-<style lang="scss">
-  span.icon {
-    opacity: 0;
-    transition: opacity 250ms ease;
-  }
-
-  button {
-    cursor: pointer;
-
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    justify-content: space-between;
-
-    width: 100%;
-
-    font-family: "Noto Sans Mono", monospace;
-    font-weight: 600;
-    color: var(--md-sys-color-on-surface);
-
-    background: transparent;
-    border: none;
-    border-radius: 8px;
-
-    transition: all 250ms ease;
-  }
-
-  button:hover > span.icon {
-    opacity: 1;
-  }
-</style>

src/lib/components/layout/Layout.svelte

@@ -1,9 +1,15 @@
-<script>
+<script lang="ts">
   import {serialPort} from "$lib/serial/connection"
   import LayoutCC1 from "$lib/components/layout/LayoutCC1.svelte"
 
   $: device = $serialPort?.device ?? "ONE"
   let activeLayer = 0
+
+  const layers = [
+    ["Numeric Layer", "123", 1],
+    ["Primary Layer", "abc", 0],
+    ["Function Layer", "function", 2],
+  ] as const
 </script>
 
 <div>
@@ -13,7 +19,7 @@
   </select>
 
   <fieldset>
-    {#each [["Numeric Layer", "123", 1], ["Primary Layer", "abc", 0], ["Function Layer", "function", 2]] as [title, icon, value]}
+    {#each layers as [title, icon, value]}
       <button
         {title}
         class="icon"

src/lib/components/layout/RingInput.svelte

@@ -29,7 +29,7 @@
 </script>
 
 <div class="radial {type}">
-  {#each [keys.n, keys.e, keys.s, keys.w] as id, quadrant}
+  {#each [keys.n, keys.e, keys.s, keys.w, keys.d] as id, quadrant}
     {@const actions = getActions(id, $layout)}
     <button
       use:editableLayout={{id, quadrant}}
@@ -154,6 +154,21 @@
     &:nth-child(4) {
       clip-path: polygon(50% 50%, 0 0, 0 100%);
     }
+
+    &:last-child {
+      top: 50%;
+      left: 50%;
+      translate: -50% -50%;
+
+      overflow: hidden;
+
+      width: 25cqw;
+      height: 25cqh;
+
+      border-radius: 50%;
+
+      mask-image: none;
+    }
   }
 
   .secondary > button {