refactor keyboard and mouse code: SVG -> div components & logical refactoring. Add some new DEV-features

public/svg/visual/arrow-keys.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  Chevron icons: Lucide (https://lucide.dev), ISC License, ? Lucide Contributors.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 88" width="104" height="88" aria-hidden="true">
+  <defs>
+    <style type="text/css">
+      <![CDATA[
+        .key-cap {
+          fill: var(--sg-keyboard-key-surface-idle);
+          stroke: none;
+        }
+        .sg-lucide path,
+        .sg-lucide line,
+        .sg-lucide polyline {
+          fill: none;
+          stroke: var(--sg-keyboard-ink-soft);
+          stroke-width: 1.55;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+      ]]>
+    </style>
+  </defs>
+  <!-- inverted-T: up / left down right -->
+  <rect id="K_kb7u" class="key-cap" x="36" y="2" width="32" height="32" rx="6" ry="6" />
+  <g id="S_kb7u" class="sg-lucide" transform="translate(52,18) scale(0.72) translate(-12,-12)">
+    <path d="m18 15-6-6-6 6" />
+  </g>
+
+  <rect id="K_kb7l" class="key-cap" x="2" y="38" width="32" height="32" rx="6" ry="6" />
+  <g id="S_kb7l" class="sg-lucide" transform="translate(18,54) scale(0.72) translate(-12,-12)">
+    <path d="m15 18-6-6 6-6" />
+  </g>
+
+  <rect id="K_kb7d" class="key-cap" x="36" y="38" width="32" height="32" rx="6" ry="6" />
+  <g id="S_kb7d" class="sg-lucide" transform="translate(52,54) scale(0.72) translate(-12,-12)">
+    <path d="m6 9 6 6 6-6" />
+  </g>
+
+  <rect id="K_kb7r" class="key-cap" x="70" y="38" width="32" height="32" rx="6" ry="6" />
+  <g id="S_kb7r" class="sg-lucide" transform="translate(86,54) scale(0.72) translate(-12,-12)">
+    <path d="m9 18 6-6-6-6" />
+  </g>
+</svg>