feat: 3d click in layout

feat: action autocomplete

[deploy]

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 {