this works for inputs

app/components/Input.tsx

@@ -3,6 +3,8 @@ import { IconDefinition } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Label } from "./Typography";
 import { kebabCase } from "~/utilities";
+import { disableHotkeyInput,enableHotkeyInput,DomLevels } from "~/pages/PageEnigma/store";
+
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
@@ -10,6 +12,10 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 
 export function Input({ label, icon, className, id, ...rest }: InputProps) {
+  // const captureAllEvents = (e:React.FormEvent<HTMLInputElement>)=>{
+  //   e.preventDefault();
+  //   e.stopPropagation();
+  // };
   return (
     <div className={twMerge("flex flex-col gap-2", className)}>
       {label && <Label htmlFor={id ? id : kebabCase(label)}>{label}</Label>}
@@ -24,6 +30,8 @@ export function Input({ label, icon, className, id, ...rest }: InputProps) {
             "h-10 w-full rounded-md bg-brand-secondary px-3 py-2.5 text-white outline-none outline-offset-0 transition-all duration-150 ease-in-out focus:outline-brand-primary",
             icon ? "pl-12" : "",
           )}
+          onFocus={() => disableHotkeyInput(DomLevels.INPUT)}
+          onBlur={() => enableHotkeyInput(DomLevels.INPUT)}
           {...rest}
         />
       </div>

app/components/InputVector.tsx

@@ -1,6 +1,6 @@
 import { useRef } from "react";
 import { twMerge } from "tailwind-merge";
-import { ignoreDelete } from "~/pages/PageEnigma/store";
+import { disableHotkeyInput,enableHotkeyInput,DomLevels } from "~/pages/PageEnigma/store";
 
 interface InputVectorProps {
   x: number;
@@ -42,8 +42,8 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={xRef}
           value={x}
-          onFocus={() => (ignoreDelete.value = true)}
-          onBlur={() => (ignoreDelete.value = false)}
+          onFocus={() => disableHotkeyInput(DomLevels.INPUT)}
+          onBlur={() => enableHotkeyInput(DomLevels.INPUT)}
         />
       </span>
       <span
@@ -58,8 +58,8 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={yRef}
           value={y}
-          onFocus={() => (ignoreDelete.value = true)}
-          onBlur={() => (ignoreDelete.value = false)}
+          onFocus={() => disableHotkeyInput(DomLevels.INPUT)}
+          onBlur={() => enableHotkeyInput(DomLevels.INPUT)}
         />
       </span>
       <span
@@ -74,8 +74,8 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={zRef}
           value={z}
-          onFocus={() => (ignoreDelete.value = true)}
-          onBlur={() => (ignoreDelete.value = false)}
+          onFocus={() => disableHotkeyInput(DomLevels.INPUT)}
+          onBlur={() => enableHotkeyInput(DomLevels.INPUT)}
         />
       </span>
     </div>

app/pages/PageEnigma/comps/Timeline/Timeline.tsx

@@ -9,11 +9,12 @@ import {
   deleteAudioClip,
   deleteCharacterClip,
   selectedItem,
-  ignoreDelete,
+  ignoreKeyDelete,
   timelineScrollX,
   timelineScrollY,
   filmLength,
   scale,
+  isHotkeysDisabled,
 } from "~/pages/PageEnigma/store";
 import { useQueueHandler } from "~/pages/PageEnigma/comps/Timeline/utils/useQueueHandler";
 import { useSignals } from "@preact/signals-react/runtime";
@@ -51,7 +52,7 @@ export const Timeline = () => {
   }, []);
 
   const onDeleteAsk = useCallback((event: KeyboardEvent) => {
-    if (ignoreDelete.value) {
+    if (ignoreKeyDelete.value || !isHotkeysDisabled()) {
       return;
     }
     if (

app/pages/PageEnigma/store/selectedItem.ts

@@ -3,4 +3,45 @@ import { Clip, Keyframe } from "~/pages/PageEnigma/models";
 
 export const selectedItem = signal<Clip | Keyframe | null>(null);
 
-export const ignoreDelete = signal(false);
+export const ignoreKeyDelete = signal(false);
+
+export enum DomLevels {
+  NONE,
+  INPUT,
+  PANEL,
+  DIALOGUE,
+}
+type HotkeysStatusType = {
+  disabled: boolean,
+  disabledBy: DomLevels,
+}
+export const hotkeysStatus = signal<HotkeysStatusType>({
+  disabled:false,
+  disabledBy:DomLevels.NONE,
+});
+
+export const isHotkeysDisabled = ()=>{
+  return hotkeysStatus.value.disabled;
+}
+export const disableHotkeyInput = (level: number)=>{
+  if(hotkeysStatus.value.disabled){
+    if (level > hotkeysStatus.value.disabledBy){
+      hotkeysStatus.value.disabledBy === level;
+    }
+  }else{
+    hotkeysStatus.value = {
+      disabled: true,
+      disabledBy: level,
+    }
+  }
+}
+export const enableHotkeyInput = (level: number)=>{
+  if(hotkeysStatus.value.disabled){
+    if (level >= hotkeysStatus.value.disabledBy){
+      hotkeysStatus.value = {
+        disabled: false,
+        disabledBy: DomLevels.NONE,
+      }
+    }
+  }
+}