diff --git a/coverage/lcov-report/components/menu/index.html b/coverage/lcov-report/components/menu/index.html
index f332812..782c509 100644
--- a/coverage/lcov-report/components/menu/index.html
+++ b/coverage/lcov-report/components/menu/index.html
@@ -116,7 +116,7 @@ <h1><a href="../../index.html">All files</a> components/menu</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/menu/index.tsx.html b/coverage/lcov-report/components/menu/index.tsx.html
index 302c954..f9acd42 100644
--- a/coverage/lcov-report/components/menu/index.tsx.html
+++ b/coverage/lcov-report/components/menu/index.tsx.html
@@ -157,7 +157,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/m
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/menu/menu-item.tsx.html b/coverage/lcov-report/components/menu/menu-item.tsx.html
index 10daccd..fb01e9e 100644
--- a/coverage/lcov-report/components/menu/menu-item.tsx.html
+++ b/coverage/lcov-report/components/menu/menu-item.tsx.html
@@ -166,7 +166,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/m
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/popup/index.html b/coverage/lcov-report/components/popup/index.html
index 4aca77f..93667a6 100644
--- a/coverage/lcov-report/components/popup/index.html
+++ b/coverage/lcov-report/components/popup/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/popup</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/popup/index.tsx.html b/coverage/lcov-report/components/popup/index.tsx.html
index c827253..9f037ee 100644
--- a/coverage/lcov-report/components/popup/index.tsx.html
+++ b/coverage/lcov-report/components/popup/index.tsx.html
@@ -211,7 +211,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/p
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/toolbar/index.html b/coverage/lcov-report/components/toolbar/index.html
index 4cc9b19..df904ba 100644
--- a/coverage/lcov-report/components/toolbar/index.html
+++ b/coverage/lcov-report/components/toolbar/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/toolbar</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/toolbar/index.tsx.html b/coverage/lcov-report/components/toolbar/index.tsx.html
index 8b2abc0..764b279 100644
--- a/coverage/lcov-report/components/toolbar/index.tsx.html
+++ b/coverage/lcov-report/components/toolbar/index.tsx.html
@@ -181,7 +181,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/t
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/effects/default.tsx.html b/coverage/lcov-report/effects/default.tsx.html
index a83e3d0..c4b1830 100644
--- a/coverage/lcov-report/effects/default.tsx.html
+++ b/coverage/lcov-report/effects/default.tsx.html
@@ -223,7 +223,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> def
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/effects/index.html b/coverage/lcov-report/effects/index.html
index a63e386..9448a16 100644
--- a/coverage/lcov-report/effects/index.html
+++ b/coverage/lcov-report/effects/index.html
@@ -23,16 +23,16 @@ <h1><a href="../index.html">All files</a> effects</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80.02% </span>
+                <span class="strong">79.95% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>761/951</span>
+                <span class='fraction'>762/953</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">67.44% </span>
+                <span class="strong">66.66% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>58/86</span>
+                <span class='fraction'>58/87</span>
             </div>
         
             
@@ -44,9 +44,9 @@ <h1><a href="../index.html">All files</a> effects</h1>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80.02% </span>
+                <span class="strong">79.95% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>761/951</span>
+                <span class='fraction'>762/953</span>
             </div>
         
             
@@ -61,7 +61,7 @@ <h1><a href="../index.html">All files</a> effects</h1>
             </div>
         </template>
     </div>
-    <div class='status-line high'></div>
+    <div class='status-line medium'></div>
     <div class="pad1">
 <table class="coverage-summary">
 <thead>
@@ -185,17 +185,17 @@ <h1><a href="../index.html">All files</a> effects</h1>
 
 <tr>
 	<td class="file medium" data-value="utils.ts"><a href="utils.ts.html">utils.ts</a></td>
-	<td data-value="72.51" class="pic medium">
+	<td data-value="72.25" class="pic medium">
 	<div class="chart"><div class="cover-fill" style="width: 72%"></div><div class="cover-empty" style="width: 28%"></div></div>
 	</td>
-	<td data-value="72.51" class="pct medium">72.51%</td>
-	<td data-value="171" class="abs medium">124/171</td>
-	<td data-value="42.85" class="pct low">42.85%</td>
-	<td data-value="14" class="abs low">6/14</td>
+	<td data-value="72.25" class="pct medium">72.25%</td>
+	<td data-value="173" class="abs medium">125/173</td>
+	<td data-value="40" class="pct low">40%</td>
+	<td data-value="15" class="abs low">6/15</td>
 	<td data-value="62.5" class="pct medium">62.5%</td>
 	<td data-value="8" class="abs medium">5/8</td>
-	<td data-value="72.51" class="pct medium">72.51%</td>
-	<td data-value="171" class="abs medium">124/171</td>
+	<td data-value="72.25" class="pct medium">72.25%</td>
+	<td data-value="173" class="abs medium">125/173</td>
 	</tr>
 
 </tbody>
@@ -206,7 +206,7 @@ <h1><a href="../index.html">All files</a> effects</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/effects/useContextMenu.tsx.html b/coverage/lcov-report/effects/useContextMenu.tsx.html
index f025a46..b76915a 100644
--- a/coverage/lcov-report/effects/useContextMenu.tsx.html
+++ b/coverage/lcov-report/effects/useContextMenu.tsx.html
@@ -622,7 +622,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> use
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/effects/useMousePointer.tsx.html b/coverage/lcov-report/effects/useMousePointer.tsx.html
index 69bb42b..4db114e 100644
--- a/coverage/lcov-report/effects/useMousePointer.tsx.html
+++ b/coverage/lcov-report/effects/useMousePointer.tsx.html
@@ -430,7 +430,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> use
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/effects/useMousePosition.ts.html b/coverage/lcov-report/effects/useMousePosition.ts.html
index dc7428c..1092762 100644
--- a/coverage/lcov-report/effects/useMousePosition.ts.html
+++ b/coverage/lcov-report/effects/useMousePosition.ts.html
@@ -430,7 +430,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> use
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/effects/useMouseWheel.ts.html b/coverage/lcov-report/effects/useMouseWheel.ts.html
index 3dafd41..e9d47f3 100644
--- a/coverage/lcov-report/effects/useMouseWheel.ts.html
+++ b/coverage/lcov-report/effects/useMouseWheel.ts.html
@@ -244,7 +244,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> use
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/effects/usePopup.tsx.html b/coverage/lcov-report/effects/usePopup.tsx.html
index daa2dca..799a6a5 100644
--- a/coverage/lcov-report/effects/usePopup.tsx.html
+++ b/coverage/lcov-report/effects/usePopup.tsx.html
@@ -565,7 +565,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> use
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/effects/useTheme.ts.html b/coverage/lcov-report/effects/useTheme.ts.html
index 4ca5a0d..b79118b 100644
--- a/coverage/lcov-report/effects/useTheme.ts.html
+++ b/coverage/lcov-report/effects/useTheme.ts.html
@@ -316,7 +316,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> use
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/effects/utils.ts.html b/coverage/lcov-report/effects/utils.ts.html
index 7c0b3f6..f395bba 100644
--- a/coverage/lcov-report/effects/utils.ts.html
+++ b/coverage/lcov-report/effects/utils.ts.html
@@ -23,16 +23,16 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> uti
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">72.51% </span>
+                <span class="strong">72.25% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>124/171</span>
+                <span class='fraction'>125/173</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">42.85% </span>
+                <span class="strong">40% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>6/14</span>
+                <span class='fraction'>6/15</span>
             </div>
         
             
@@ -44,9 +44,9 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> uti
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">72.51% </span>
+                <span class="strong">72.25% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>124/171</span>
+                <span class='fraction'>125/173</span>
             </div>
         
             
@@ -234,7 +234,9 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> uti
 <a name='L169'></a><a href='#L169'>169</a>
 <a name='L170'></a><a href='#L170'>170</a>
 <a name='L171'></a><a href='#L171'>171</a>
-<a name='L172'></a><a href='#L172'>172</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L172'></a><a href='#L172'>172</a>
+<a name='L173'></a><a href='#L173'>173</a>
+<a name='L174'></a><a href='#L174'>174</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -276,6 +278,13 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> uti
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -320,13 +329,6 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> uti
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -392,6 +394,8 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> uti
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
@@ -446,6 +450,13 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> uti
   return direction as MouseMovementDirection;
 };
 &nbsp;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const styleobjectToCssText = (style: any) =&gt; {
+  return Object.keys(style).reduce((acc, key) =&gt; {
+    return `${acc}${key}:${style[key]};`;
+  }, '');
+};
+&nbsp;
 const getSelectionDiv = <span class="fstat-no" title="function not covered" >(</span>
 <span class="cstat-no" title="statement not covered" >  style: SelectionStyle = {</span>
 <span class="cstat-no" title="statement not covered" >    backgroundColor: 'rgba(0, 123, 255, 0.1)',</span>
@@ -489,13 +500,6 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> uti
 <span class="cstat-no" title="statement not covered" >  );</span>
 <span class="cstat-no" title="statement not covered" >};</span>
 &nbsp;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const styleobjectToCssText = (style: any) =&gt; {
-  return Object.keys(style).reduce((acc, key) =&gt; {
-    return `${acc}${key}:${style[key]};`;
-  }, '');
-};
-&nbsp;
 /**
  * Creates a placeholder element for a popup component.
  * @param {PopupPlaceholderProps} props - The props object containing the id, target, height, width, and position of the popup.
@@ -561,6 +565,8 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> uti
 <span class="cstat-no" title="statement not covered" >      break;</span>
 <span class="branch-0 cbranch-no" title="branch not covered" >    case 'right':</span>
 <span class="cstat-no" title="statement not covered" >      left = x + targetWidth + popupGap;</span>
+<span class="cstat-no" title="statement not covered" >      break;</span>
+<span class="branch-0 cbranch-no" title="branch not covered" >    default:</span>
 <span class="cstat-no" title="statement not covered" >      break;</span>
   }
 &nbsp;
@@ -583,7 +589,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> uti
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/index.html b/coverage/lcov-report/index.html
index 51068e7..cdd447c 100644
--- a/coverage/lcov-report/index.html
+++ b/coverage/lcov-report/index.html
@@ -23,16 +23,16 @@ <h1>All files</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">79.47% </span>
+                <span class="strong">79.41% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>871/1096</span>
+                <span class='fraction'>872/1098</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">66.32% </span>
+                <span class="strong">65.65% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>65/98</span>
+                <span class='fraction'>65/99</span>
             </div>
         
             
@@ -44,9 +44,9 @@ <h1>All files</h1>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">79.47% </span>
+                <span class="strong">79.41% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>871/1096</span>
+                <span class='fraction'>872/1098</span>
             </div>
         
             
@@ -124,18 +124,18 @@ <h1>All files</h1>
 	</tr>
 
 <tr>
-	<td class="file high" data-value="effects"><a href="effects/index.html">effects</a></td>
-	<td data-value="80.02" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 80%"></div><div class="cover-empty" style="width: 20%"></div></div>
+	<td class="file medium" data-value="effects"><a href="effects/index.html">effects</a></td>
+	<td data-value="79.95" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 79%"></div><div class="cover-empty" style="width: 21%"></div></div>
 	</td>
-	<td data-value="80.02" class="pct high">80.02%</td>
-	<td data-value="951" class="abs high">761/951</td>
-	<td data-value="67.44" class="pct medium">67.44%</td>
-	<td data-value="86" class="abs medium">58/86</td>
+	<td data-value="79.95" class="pct medium">79.95%</td>
+	<td data-value="953" class="abs medium">762/953</td>
+	<td data-value="66.66" class="pct medium">66.66%</td>
+	<td data-value="87" class="abs medium">58/87</td>
 	<td data-value="68.42" class="pct medium">68.42%</td>
 	<td data-value="19" class="abs medium">13/19</td>
-	<td data-value="80.02" class="pct high">80.02%</td>
-	<td data-value="951" class="abs high">761/951</td>
+	<td data-value="79.95" class="pct medium">79.95%</td>
+	<td data-value="953" class="abs medium">762/953</td>
 	</tr>
 
 </tbody>
@@ -146,7 +146,7 @@ <h1>All files</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-06T09:02:33.912Z
+                at 2023-11-06T09:33:15.863Z
             </div>
         <script src="prettify.js"></script>
         <script>
diff --git a/coverage/lcov.info b/coverage/lcov.info
index 97760b3..8575af3 100644
--- a/coverage/lcov.info
+++ b/coverage/lcov.info
@@ -1141,20 +1141,20 @@ end_of_record
 TN:
 SF:src\effects\utils.ts
 FN:13,getDirection
-FN:42,getSelectionDiv
-FN:63,getPointerImageWrapperDiv
-FN:75,isTagTypeSpecial
-FN:86,styleobjectToCssText
+FN:43,styleobjectToCssText
+FN:49,getSelectionDiv
+FN:70,getPointerImageWrapperDiv
+FN:82,isTagTypeSpecial
 FN:97,createPopupPlaceholder
 FN:115,getAllHtmlAttrValues
 FN:134,calculatePopupPosition
 FNF:8
 FNH:5
 FNDA:3,getDirection
+FNDA:4,styleobjectToCssText
 FNDA:0,getSelectionDiv
 FNDA:2,getPointerImageWrapperDiv
 FNDA:0,isTagTypeSpecial
-FNDA:4,styleobjectToCssText
 FNDA:2,createPopupPlaceholder
 FNDA:0,getAllHtmlAttrValues
 FNDA:2,calculatePopupPosition
@@ -1200,13 +1200,13 @@ DA:39,3
 DA:40,3
 DA:41,1
 DA:42,1
-DA:43,0
-DA:44,0
-DA:45,0
-DA:46,0
-DA:47,0
-DA:48,0
-DA:49,0
+DA:43,1
+DA:44,4
+DA:45,12
+DA:46,4
+DA:47,4
+DA:48,1
+DA:49,1
 DA:50,0
 DA:51,0
 DA:52,0
@@ -1219,35 +1219,35 @@ DA:58,0
 DA:59,0
 DA:60,0
 DA:61,0
-DA:62,1
-DA:63,1
-DA:64,2
-DA:65,2
-DA:66,2
-DA:67,2
-DA:68,2
-DA:69,2
-DA:70,2
+DA:62,0
+DA:63,0
+DA:64,0
+DA:65,0
+DA:66,0
+DA:67,0
+DA:68,0
+DA:69,1
+DA:70,1
 DA:71,2
 DA:72,2
 DA:73,2
-DA:74,1
-DA:75,1
-DA:76,0
-DA:77,0
-DA:78,0
-DA:79,0
-DA:80,0
-DA:81,0
-DA:82,0
+DA:74,2
+DA:75,2
+DA:76,2
+DA:77,2
+DA:78,2
+DA:79,2
+DA:80,2
+DA:81,1
+DA:82,1
 DA:83,0
-DA:84,1
-DA:85,1
-DA:86,1
-DA:87,4
-DA:88,12
-DA:89,4
-DA:90,4
+DA:84,0
+DA:85,0
+DA:86,0
+DA:87,0
+DA:88,0
+DA:89,0
+DA:90,0
 DA:91,1
 DA:92,1
 DA:93,1
@@ -1316,7 +1316,7 @@ DA:155,2
 DA:156,0
 DA:157,0
 DA:158,2
-DA:159,2
+DA:159,0
 DA:160,2
 DA:161,2
 DA:162,2
@@ -1324,27 +1324,30 @@ DA:163,2
 DA:164,2
 DA:165,2
 DA:166,2
-DA:167,0
-DA:168,0
-DA:169,2
-DA:170,2
+DA:167,2
+DA:168,2
+DA:169,0
+DA:170,0
 DA:171,2
-LF:171
-LH:124
+DA:172,2
+DA:173,2
+LF:173
+LH:125
 BRDA:13,0,0,3
 BRDA:18,1,0,0
 BRDA:18,2,0,0
 BRDA:30,3,0,0
 BRDA:34,4,0,0
-BRDA:63,5,0,2
-BRDA:86,6,0,4
-BRDA:87,7,0,12
+BRDA:43,5,0,4
+BRDA:44,6,0,12
+BRDA:70,7,0,2
 BRDA:97,8,0,2
 BRDA:134,9,0,2
 BRDA:146,10,0,0
 BRDA:152,11,0,0
 BRDA:155,12,0,0
-BRDA:166,13,0,0
-BRF:14
+BRDA:158,13,0,0
+BRDA:168,14,0,0
+BRF:15
 BRH:6
 end_of_record
diff --git a/src/effects/useMousePosition.ts b/src/effects/useMousePosition.ts
index ed5cc09..218d1ca 100644
--- a/src/effects/useMousePosition.ts
+++ b/src/effects/useMousePosition.ts
@@ -20,11 +20,11 @@ const useMousePosition: MousePositionFunction = ({
     y: -1,
     direction: null,
     isActive: false,
-    pointerStatus: status || 'default',
+    pointerStatus: status ?? 'default',
   });
   const [isActive, setIsActive] = useState(false);
   const activePointerStatus = useRef<PointerStatus | undefined>(
-    status || 'default'
+    status ?? 'default'
   );
 
   // Event handlers are now individual functions, improving modularity
diff --git a/src/effects/useMouseSelection.ts b/src/effects/useMouseSelection.ts
index 3768b63..618a2ef 100644
--- a/src/effects/useMouseSelection.ts
+++ b/src/effects/useMouseSelection.ts
@@ -224,31 +224,18 @@ const useMouseSelection: MouseSelectionFunction = ({
     };
   }, [targetElement]);
 
-  useEffect(() => {
-    const selection = selectionRef.current;
-    const { size } = pointerStyle;
-    const { height, width, x, flipX, flipY, y } = returnValue;
-
-    if (selection && size) {
-      selection.style.width = `${width}px`;
-      selection.style.height = `${height}px`;
-      selection.style.left = (flipX ? x - width : x) + 'px';
-      selection.style.top = (flipY ? y - height : y) + 'px';
-    }
-  }, [dimensions, pointerStyle, selectionRef, startMousePosition, isActive]);
-
   const returnValue = useMemo(() => {
     const { width, height, flipX, flipY } = dimensions;
     const { x, y } = startMousePosition.current;
 
     if (isActive && width && width > 0 && height && height > 0) {
       return {
-        x: x,
-        y: y,
-        width: width,
-        height: height,
-        flipX: !!flipX,
-        flipY: !!flipY,
+        x,
+        y,
+        width,
+        height,
+        flipX: Boolean(flipX),
+        flipY: Boolean(flipY),
       };
     } else {
       return {
@@ -259,6 +246,19 @@ const useMouseSelection: MouseSelectionFunction = ({
       };
     }
   }, [dimensions, startMousePosition, isActive]);
+
+  useEffect(() => {
+    const selection = selectionRef.current;
+    const { size } = pointerStyle;
+    const { height, width, x, flipX, flipY, y } = returnValue;
+
+    if (selection && size) {
+      selection.style.width = `${width}px`;
+      selection.style.height = `${height}px`;
+      selection.style.left = `${flipX ? x - width : x}px`;
+      selection.style.top = `${flipY ? y - height : y}px`;
+    }
+  }, [dimensions, pointerStyle, selectionRef, startMousePosition, isActive]);
 };
 
 export { useMouseSelection };
diff --git a/src/effects/utils.ts b/src/effects/utils.ts
index 7c3a916..99abee5 100644
--- a/src/effects/utils.ts
+++ b/src/effects/utils.ts
@@ -39,6 +39,13 @@ const getDirection: (x: number, y: number) => MouseMovementDirection = (
   return direction as MouseMovementDirection;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const styleobjectToCssText = (style: any) => {
+  return Object.keys(style).reduce((acc, key) => {
+    return `${acc}${key}:${style[key]};`;
+  }, '');
+};
+
 const getSelectionDiv = (
   style: SelectionStyle = {
     backgroundColor: 'rgba(0, 123, 255, 0.1)',
@@ -82,13 +89,6 @@ const isTagTypeSpecial = (el: HTMLElement) => {
   );
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const styleobjectToCssText = (style: any) => {
-  return Object.keys(style).reduce((acc, key) => {
-    return `${acc}${key}:${style[key]};`;
-  }, '');
-};
-
 /**
  * Creates a placeholder element for a popup component.
  * @param {PopupPlaceholderProps} props - The props object containing the id, target, height, width, and position of the popup.
@@ -155,6 +155,8 @@ export function calculatePopupPosition(
     case 'right':
       left = x + targetWidth + popupGap;
       break;
+    default:
+      break;
   }
 
   // Center the popup horizontally for top and bottom positions