Fix Auto Hide

PackageSources/js-bundle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tfdidesign-md11-load-manager",
-  "version": "0.1.153",
+  "version": "0.1.164",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -59,6 +59,7 @@
     "typescript": "5.8.3"
   },
   "dependencies": {
+    "lucide-react": "^0.555.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "uuid": "^11.1.0"

PackageSources/js-bundle/pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      lucide-react:
+        specifier: ^0.555.0
+        version: 0.555.0(react@19.1.0)
       react:
         specifier: ^19.1.0
         version: 19.1.0
@@ -1897,6 +1900,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-react@0.555.0:
+    resolution: {integrity: sha512-D8FvHUGbxWBRQM90NZeIyhAvkFfsh3u9ekrMvJ30Z6gnpBHS6HC6ldLg7tL45hwiIz/u66eKDtdA23gwwGsAHA==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
@@ -4842,6 +4850,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-react@0.555.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0

PackageSources/js-bundle/src/components/keyboard/Keyboard.tsx

@@ -0,0 +1,107 @@
+import { ArrowBigUp, Delete, Space, X } from 'lucide-react';
+import { forwardRef, RefObject, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+const defaultLayout = {
+  default: [
+    '1 2 3 4 5 6 7 8 9 0 {bksp}',
+    'q w e r t y u i o p',
+    'a s d f g h j k l',
+    '{shift} z x c v b n m /',
+    '{space} {close}',
+  ],
+  shift: [
+    '1 2 3 4 5 6 7 8 9 0 {bksp}',
+    'Q W E R T Y U I O P',
+    'A S D F G H J K L',
+    '{shift} Z X C V B N M /',
+    '{space} {close}',
+  ],
+};
+
+const Keyboard = forwardRef<
+  HTMLDivElement,
+  {
+    value: string;
+    blurRef: RefObject<boolean>
+    onInput: (value: string) => void;
+    onClose: () => void;
+  }
+>(({ value, blurRef, onInput, onClose }, ref) => {
+  const [shift, setShift] = useState(false);
+
+  const layout = shift ? defaultLayout.shift : defaultLayout.default;
+
+  const handleKeyPress = (key: string) => {
+    console.log('KEY PRESSED', key);
+
+    if (key === '{close}') {
+      onClose();
+      return;
+    }
+
+    blurRef.current = true;
+
+    if (key === '{shift}') {
+      setShift(!shift);
+      return;
+    }
+
+    let newValue = value;
+
+    if (key === '{bksp}') {
+      newValue = value.slice(0, -1);
+    } else if (key === '{space}') {
+      newValue = value + ' ';
+    } else if (key.length === 1) {
+      newValue = value + key;
+    }
+
+    onInput(newValue);
+  };
+
+  return createPortal(
+    <div
+      ref={ref}
+      className="absolute bottom-0 left-0 z-50 box-border w-full touch-manipulation select-none overflow-hidden bg-zinc-800 p-2 text-white"
+      onClick={() => console.log('Parent click captured')}
+    >
+      {layout.map((row, rowIndex) => (
+        <div key={`row-${rowIndex}`} className="mb-1 flex w-full justify-center gap-1">
+          {row.split(' ').map((key, keyIndex) => {
+            let keyIdent = <>{key}</>;
+            switch (key) {
+              case '{shift}':
+                keyIdent = <ArrowBigUp />;
+                break;
+              case '{bksp}':
+                keyIdent = <Delete />;
+                break;
+              case '{close}':
+                keyIdent = <X />;
+                break;
+              case '{space}':
+                keyIdent = <Space />;
+                break;
+            }
+
+            return (
+              <button
+                key={`key-${rowIndex}-${keyIndex}`}
+                className={`flex justify-center rounded-md p-4 ${
+                  key === '{close}' ? 'bg-zinc-700 px-12 focus:bg-zinc-600' : 'flex-1 bg-zinc-600'
+                }`}
+                onMouseDown={() => handleKeyPress(key)}
+              >
+                {keyIdent}
+              </button>
+            );
+          })}
+        </div>
+      ))}
+    </div>,
+    document.body
+  );
+});
+
+export default Keyboard;