feat: autospace toggle

package.json

@@ -72,6 +72,7 @@
     "prettier-plugin-svelte": "^3.3.3",
     "rxjs": "^7.8.2",
     "sass": "^1.86.0",
+    "semver": "^7.7.2",
     "socket.io-client": "^4.8.1",
     "stylelint": "^16.17.0",
     "stylelint-config-clean-order": "^7.0.0",

pnpm-lock.yaml

@@ -122,6 +122,9 @@ importers:
       sass:
         specifier: ^1.86.0
         version: 1.86.0
+      semver:
+        specifier: ^7.7.2
+        version: 7.7.2
       socket.io-client:
         specifier: ^4.8.1
         version: 4.8.1
@@ -3442,13 +3445,8 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.6.2:
-    resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==}
-    engines: {node: '>=10'}
-    hasBin: true
-
-  semver@7.7.1:
-    resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
+  semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -4306,7 +4304,7 @@ snapshots:
       '@babel/traverse': 7.24.7
       '@babel/types': 7.24.7
       convert-source-map: 2.0.0
-      debug: 4.3.7(supports-color@8.1.1)
+      debug: 4.4.0
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -4366,7 +4364,7 @@ snapshots:
       '@babel/core': 7.24.7
       '@babel/helper-compilation-targets': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
-      debug: 4.3.7(supports-color@8.1.1)
+      debug: 4.4.0
       lodash.debounce: 4.0.8
       resolve: 1.22.8
     transitivePeerDependencies:
@@ -5043,7 +5041,7 @@ snapshots:
       '@babel/helper-split-export-declaration': 7.24.7
       '@babel/parser': 7.24.7
       '@babel/types': 7.24.7
-      debug: 4.3.7(supports-color@8.1.1)
+      debug: 4.4.0
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -5635,7 +5633,7 @@ snapshots:
 
   '@tauri-apps/cli@1.6.3':
     dependencies:
-      semver: 7.6.2
+      semver: 7.7.2
     optionalDependencies:
       '@tauri-apps/cli-darwin-arm64': 1.6.3
       '@tauri-apps/cli-darwin-x64': 1.6.3
@@ -6153,7 +6151,7 @@ snapshots:
       process: 0.11.10
       proxy-from-env: 1.0.0
       request-progress: 3.0.0
-      semver: 7.7.1
+      semver: 7.7.2
       supports-color: 8.1.1
       tmp: 0.2.3
       tree-kill: 1.2.2
@@ -7722,9 +7720,7 @@ snapshots:
 
   semver@6.3.1: {}
 
-  semver@7.6.2: {}
-
-  semver@7.7.1: {}
+  semver@7.7.2: {}
 
   serialize-javascript@6.0.2:
     dependencies:
@@ -7906,14 +7902,14 @@ snapshots:
       define-properties: 1.2.1
       es-abstract: 1.23.3
       es-errors: 1.3.0
-      es-object-atoms: 1.0.0
-      get-intrinsic: 1.2.4
-      gopd: 1.0.1
-      has-symbols: 1.0.3
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-symbols: 1.1.0
       internal-slot: 1.0.7
       regexp.prototype.flags: 1.5.2
       set-function-name: 2.0.2
-      side-channel: 1.0.6
+      side-channel: 1.1.0
 
   string.prototype.padend@3.1.6:
     dependencies:

src/lib/assets/keymaps/keymap.d.ts

@@ -16,4 +16,7 @@ export interface ActionInfo {
   variant: "left" | "right";
   variantOf: number;
   keyCode: string;
+  printable?: boolean;
+  separator?: boolean;
+  breaking?: boolean;
 }

src/lib/style/form/_toggle.scss

@@ -27,11 +27,11 @@ label:has(input[type="checkbox"]) {
 
     width: $width;
     height: $height;
+    border-radius: calc($height / 2);
 
     font-size: inherit;
     color: inherit;
 
-    border-radius: calc($height / 2);
     outline: $border solid currentcolor;
     outline-offset: calc(-1 * $border);
 
@@ -46,8 +46,8 @@ label:has(input[type="checkbox"]) {
 
       width: $diameter;
       height: $diameter;
-
       border-radius: calc($radius);
+
       outline-color: inherit;
       outline-style: solid;
       outline-width: $radius;
@@ -62,4 +62,85 @@ label:has(input[type="checkbox"]) {
       outline-offset: calc($padding / 2);
     }
   }
+
+  &:has(span.icon) {
+    $line-width: 10%;
+    $side: calc(($line-width * 2) / sqrt(2));
+    $mid: calc($side / 2);
+
+    > input[type="checkbox"] {
+      display: none;
+    }
+
+    > span.icon {
+      position: relative;
+
+      display: block;
+
+      width: 1em;
+      height: 1em;
+
+      font-size: inherit;
+
+      clip-path: polygon(
+        0% $side,
+        $mid $mid,
+        calc(100% - $mid) calc(100% - $mid),
+        calc(100% - $side) 100%,
+        0% 100%,
+        0% $side,
+        $side 0%,
+        100% calc(100% - $side),
+        calc(100% - $side) 100%,
+        calc(100% - $side) 100%,
+        100% calc(100% - $side),
+        100% calc(100% - $side),
+        100% 0%,
+        $side 0%
+      );
+
+      transition: all 250ms ease;
+
+      &::before {
+        content: "";
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, 0) rotate(45deg);
+
+        display: block;
+
+        width: calc(100% * sqrt(2));
+        height: $line-width;
+
+        background-color: currentcolor;
+
+        transition: all 250ms ease;
+      }
+    }
+
+    &:has(:checked) > span.icon {
+      clip-path: polygon(
+        0% $side,
+        $mid $mid,
+        calc(100% - $mid) calc(100% - $mid),
+        calc(100% - $side) 100%,
+        0% 100%,
+        0% $side,
+        $side 0%,
+        100% calc(100% - $side),
+        calc(100% - $side) 100%,
+        0% $side,
+        $side 0%,
+        100% calc(100% - $side),
+        100% 0%,
+        $side 0%
+      );
+
+      &::before {
+        transform: translate(-50%, 0) rotate(45deg) translateX(-100%);
+      }
+    }
+  }
 }

src/lib/style/theme.scss

@@ -2,7 +2,6 @@
 
 @use "form/button";
 @use "form/toggle";
-@use "form/checkbox";
 
 @use "kbd";
 @use "print";

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
   import { onMount, tick } from "svelte";
   import { changes, ChangeType } from "$lib/undo-redo";
   import type { ChordInfo } from "$lib/undo-redo";
@@ -6,11 +7,16 @@
   import ActionString from "$lib/components/ActionString.svelte";
   import { selectAction } from "./action-selector";
   import { inputToAction } from "./input-converter";
-  import { serialPort } from "$lib/serial/connection";
+  import { deviceMeta, serialPort } from "$lib/serial/connection";
   import { get } from "svelte/store";
+  import { action } from "$lib/title";
+  import semverGte from "semver/functions/gte";
 
   let { chord }: { chord: ChordInfo } = $props();
 
+  const JOIN_ACTION = 574;
+  const NO_CONCATENATOR_ACTION = 256;
+
   onMount(() => {
     if (chord.phrase.length === 0) {
       box?.focus();
@@ -102,35 +108,137 @@
     );
   }
 
+  function resolveAutospace(autospace: boolean) {
+    if (autospace) {
+      if (chord.phrase.at(-1) === JOIN_ACTION) {
+        if (
+          chord.phrase.every(
+            (action, i, arr) =>
+              $KEYMAP_CODES.get(action)?.printable || i === arr.length - 1,
+          )
+        ) {
+          deleteAction(chord.phrase.length - 1);
+        } else {
+          return;
+        }
+      } else {
+        if (isPrintable) {
+          return;
+        } else if (chord.phrase.at(-1) === NO_CONCATENATOR_ACTION) {
+          deleteAction(chord.phrase.length - 1);
+        } else {
+          insertAction(chord.phrase.length, JOIN_ACTION);
+        }
+      }
+    } else {
+      if (chord.phrase.at(-1) === JOIN_ACTION) {
+        deleteAction(chord.phrase.length - 1);
+      } else {
+        if (chord.phrase.at(-1) === NO_CONCATENATOR_ACTION) {
+          if (
+            chord.phrase.every(
+              (action, i, arr) =>
+                $KEYMAP_CODES.get(action)?.printable || i === arr.length - 1,
+            )
+          ) {
+            return;
+          } else {
+            deleteAction(chord.phrase.length - 1);
+          }
+        } else {
+          insertAction(chord.phrase.length, NO_CONCATENATOR_ACTION);
+        }
+      }
+    }
+  }
+
   let button: HTMLButtonElement | undefined = $state();
   let box: HTMLDivElement | undefined = $state();
   let cursorPosition = 0;
   let cursorOffset = $state(0);
 
   let hasFocus = $state(false);
+
+  let isPrintable = $derived(
+    chord.phrase.every(
+      (action) => $KEYMAP_CODES.get(action)?.printable === true,
+    ),
+  );
+  let supportsAutospace = $derived(
+    semverGte($deviceMeta?.version ?? "0.0.0", "2.1.0"),
+  );
+  let hasAutospace = $derived(
+    isPrintable || chord.phrase.at(-1) === JOIN_ACTION,
+  );
+
+  let displayPhrase = $derived(
+    chord.phrase.filter(
+      (it, i, arr) =>
+        !(
+          (i === 0 && it === JOIN_ACTION) ||
+          (i === arr.length - 1 &&
+            (it === JOIN_ACTION || it === NO_CONCATENATOR_ACTION))
+        ),
+    ),
+  );
 </script>
 
-<div
-  onkeydown={keypress}
-  onmousedown={clickCursor}
-  role="textbox"
-  tabindex="0"
-  bind:this={box}
-  class:edited={!chord.deleted && chord.phraseChanged}
-  onfocusin={() => (hasFocus = true)}
-  onfocusout={(event) => {
-    if (event.relatedTarget !== button) hasFocus = false;
-  }}
->
-  {#if hasFocus}
-    <div transition:scale class="cursor" style:translate="{cursorOffset}px 0">
-      <button class="icon" bind:this={button} onclick={addSpecial}>add</button>
-    </div>
-  {:else}
-    <div></div>
-    <!-- placeholder for cursor placement -->
+<div class="wrapper" class:edited={!chord.deleted && chord.phraseChanged}>
+  {#if supportsAutospace}
+    <label
+      class="auto-space-edit"
+      use:action={{ title: "Remove previous concatenator" }}
+      ><span class="icon">join_inner</span><input
+        checked={chord.phrase[0] === JOIN_ACTION}
+        onchange={(event) => {
+          const autospace = hasAutospace;
+          if ((event.target as HTMLInputElement).checked) {
+            if (chord.phrase[0] !== JOIN_ACTION) {
+              insertAction(0, JOIN_ACTION);
+            }
+          } else {
+            if (chord.phrase[0] === JOIN_ACTION) {
+              deleteAction(0, 1);
+            }
+          }
+          tick().then(() => resolveAutospace(autospace));
+        }}
+        type="checkbox"
+      /></label
+    >
+  {/if}
+  <div
+    onkeydown={keypress}
+    onmousedown={clickCursor}
+    role="textbox"
+    tabindex="0"
+    bind:this={box}
+    onfocusin={() => (hasFocus = true)}
+    onfocusout={(event) => {
+      if (event.relatedTarget !== button) hasFocus = false;
+    }}
+  >
+    {#if hasFocus}
+      <div transition:scale class="cursor" style:translate="{cursorOffset}px 0">
+        <button class="icon" bind:this={button} onclick={addSpecial}>add</button
+        >
+      </div>
+    {:else}
+      <div></div>
+      <!-- placeholder for cursor placement -->
+    {/if}
+    <ActionString actions={displayPhrase} />
+  </div>
+  {#if supportsAutospace}
+    <label class="auto-space-edit" use:action={{ title: "Add concatenator" }}
+      ><span class="icon">space_bar</span><input
+        checked={hasAutospace}
+        onchange={(event) =>
+          resolveAutospace((event.target as HTMLInputElement).checked)}
+        type="checkbox"
+      /></label
+    >
   {/if}
-  <ActionString actions={chord.phrase} />
   <sup>•</sup>
 </div>
 
@@ -177,17 +285,35 @@
     }
   }
 
-  [role="textbox"] {
-    cursor: text;
+  .auto-space-edit {
+    padding-inline: 0;
+    font-size: 1.3em;
+    margin-inline: 8px;
+    background: var(--md-sys-color-tertiary-container);
+    color: var(--md-sys-color-on-tertiary-container);
+    height: 1em;
+    border-radius: 4px;
 
-    position: relative;
+    &:first-of-type:not(:has(:checked)),
+    &:last-of-type:has(:checked) {
+      opacity: 0;
+    }
+  }
 
+  .wrapper:hover .auto-space-edit {
+    opacity: 1;
+  }
+
+  .wrapper {
     display: flex;
     align-items: center;
 
-    height: 1em;
+    position: relative;
+
     padding-block: 4px;
 
+    height: 1em;
+
     &::after,
     &::before {
       content: "";
@@ -195,7 +321,7 @@
       position: absolute;
       bottom: -4px;
 
-      width: 100%;
+      width: calc(100% - 8px);
       height: 1px;
 
       opacity: 0;
@@ -215,13 +341,23 @@
       opacity: 0.3;
     }
 
+    &:has(> :focus-within)::after {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+
+  [role="textbox"] {
+    cursor: text;
+
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    white-space: pre;
+
     &:focus-within {
       outline: none;
-
-      &::after {
-        scale: 1;
-        opacity: 1;
-      }
     }
   }
 </style>