ui: hide handles immediately on leaving resize zone; dim styling further

src/ui.tsx

@@ -280,20 +280,17 @@ function Plugin () {
   // reliability. Handles appear only after the cursor has rested in the window for 500ms
   // (so they don't flash while just passing through); the handle under the cursor is
   // rendered a touch brighter than the others.
-  const [rootHover, setRootHover] = useState(false)
   const [hoveredHandle, setHoveredHandle] = useState<string | null>(null)
   const [handlesShown, setHandlesShown] = useState(false)
   // Reveal the handles only after the cursor has dwelt on a resize area for 500ms.
-  // Once revealed they stay visible while the cursor remains in the window (so moving
-  // between handles doesn't re-trigger the delay); they hide only when leaving the window.
+  // Hide immediately as soon as the cursor leaves the resize zone (hoveredHandle null).
   useEffect(function () {
     if (hoveredHandle !== null) {
       const t = setTimeout(function () { setHandlesShown(true) }, 500)
       return function () { clearTimeout(t) }
-    } else if (!rootHover) {
-      setHandlesShown(false)
     }
-  }, [hoveredHandle, rootHover])
+    setHandlesShown(false)
+  }, [hoveredHandle])
   function hitboxStyle (dir: string, pos: { [k: string]: number | string }) {
     const active = hoveredHandle === dir
     return {
@@ -301,8 +298,8 @@ function Plugin () {
       position: 'fixed',
       zIndex: 3,
       opacity: handlesShown ? 1 : 0,
-      background: active ? 'rgba(255,255,255,0.6)' : 'rgba(255,255,255,0.3)',
-      border: '1px solid ' + (active ? 'rgba(90,90,90,0.85)' : 'rgba(120,120,120,0.6)'),
+      background: active ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.15)',
+      border: '1px solid ' + (active ? 'rgba(100,100,100,0.65)' : 'rgba(130,130,130,0.4)'),
       borderRadius: 4,
       transition: 'opacity 150ms ease, background 150ms ease, border-color 150ms ease'
     } as any
@@ -312,9 +309,7 @@ function Plugin () {
   const isMaximized = isMaxToggled
 
   return (
-    <div className="plugin-root" style={{ width: '100%', height: '100%' }}
-      onPointerEnter={function () { setRootHover(true) }}
-      onPointerLeave={function () { setRootHover(false) }}>
+    <div className="plugin-root" style={{ width: '100%', height: '100%' }}>
       <Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
         <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
           <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>