From c0845d8e4ce5f53d39b2a2c3d4ab2d01c4cc102d Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@local>
Date: Wed, 16 Sep 2026 14:20:14 +0200
Subject: [PATCH] ui: resize hitboxes now rounded, reveal on hover, uniform
 light color

---
 src/ui.tsx | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/ui.tsx b/src/ui.tsx
index 42a7d0c..e9c0887 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -281,7 +281,18 @@ function Plugin () {
   const isMaximized = isMaxToggled
 
   return (
-    <Fragment>
+    <div className="plugin-root" style={{ width: '100%', height: '100%' }}>
+      <style>{`
+        .plugin-root { width: 100%; height: 100%; }
+        .resize-hitbox {
+          opacity: 0;
+          transition: opacity 120ms ease;
+          background: rgba(255, 255, 255, 0.5);
+          border: 1px solid rgba(255, 255, 255, 0.65);
+          border-radius: 4px;
+        }
+        .plugin-root:hover .resize-hitbox { opacity: 1; }
+      `}</style>
       <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' }}>
@@ -333,15 +344,15 @@ function Plugin () {
           Corners = violet. Edges colored per side: top=red, bottom=green, left=blue, right=orange.
           Edge handles span the FULL side length (left:0;right:0 / top:0;bottom:0).
           Center is button-only (not in perimeter). */}
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top-left', 'top-left') }} style={{ position: 'fixed', top: -3, left: -3, width: 12, height: 12, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'nwse-resize' }} aria-hidden="true" />
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top', 'top-center') }} style={{ position: 'fixed', top: -3, left: 16, right: 16, height: 8, zIndex: 3, background: 'rgba(255,99,99,0.5)', cursor: 'ns-resize' }} aria-hidden="true" />
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top-right', 'top-right') }} style={{ position: 'fixed', top: -3, right: -3, width: 12, height: 12, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'nesw-resize' }} aria-hidden="true" />
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'left', 'center-left') }} style={{ position: 'fixed', top: 16, bottom: 16, left: -3, width: 8, zIndex: 3, background: 'rgba(99,149,255,0.5)', cursor: 'ew-resize' }} aria-hidden="true" />
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'right', 'center-right') }} style={{ position: 'fixed', top: 16, bottom: 16, right: -3, width: 8, zIndex: 3, background: 'rgba(255,165,0,0.5)', cursor: 'ew-resize' }} aria-hidden="true" />
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom-left', 'bottom-left') }} style={{ position: 'fixed', bottom: -3, left: -3, width: 12, height: 12, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'nesw-resize' }} aria-hidden="true" />
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom', 'bottom-center') }} style={{ position: 'fixed', bottom: -3, left: 16, right: 16, height: 8, zIndex: 3, background: 'rgba(99,199,99,0.5)', cursor: 'ns-resize' }} aria-hidden="true" />
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom-right', 'bottom-right') }} style={{ position: 'fixed', bottom: -3, right: -3, width: 12, height: 12, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'nwse-resize' }} aria-hidden="true" />
-    </Fragment>
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top-left', 'top-left') }} style={{ position: 'fixed', top: -3, left: -3, width: 12, height: 12, zIndex: 3, className: 'resize-hitbox', cursor: 'nwse-resize' }} aria-hidden="true" />
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top', 'top-center') }} style={{ position: 'fixed', top: -3, left: 16, right: 16, height: 8, zIndex: 3, className: 'resize-hitbox', cursor: 'ns-resize' }} aria-hidden="true" />
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top-right', 'top-right') }} style={{ position: 'fixed', top: -3, right: -3, width: 12, height: 12, zIndex: 3, className: 'resize-hitbox', cursor: 'nesw-resize' }} aria-hidden="true" />
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'left', 'center-left') }} style={{ position: 'fixed', top: 16, bottom: 16, left: -3, width: 8, zIndex: 3, className: 'resize-hitbox', cursor: 'ew-resize' }} aria-hidden="true" />
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'right', 'center-right') }} style={{ position: 'fixed', top: 16, bottom: 16, right: -3, width: 8, zIndex: 3, className: 'resize-hitbox', cursor: 'ew-resize' }} aria-hidden="true" />
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom-left', 'bottom-left') }} style={{ position: 'fixed', bottom: -3, left: -3, width: 12, height: 12, zIndex: 3, className: 'resize-hitbox', cursor: 'nesw-resize' }} aria-hidden="true" />
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom', 'bottom-center') }} style={{ position: 'fixed', bottom: -3, left: 16, right: 16, height: 8, zIndex: 3, className: 'resize-hitbox', cursor: 'ns-resize' }} aria-hidden="true" />
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom-right', 'bottom-right') }} style={{ position: 'fixed', bottom: -3, right: -3, width: 12, height: 12, zIndex: 3, className: 'resize-hitbox', cursor: 'nwse-resize' }} aria-hidden="true" />
+    </div>
   )
 }