From 153ff2ae276a4dbb5cdece08a9dd3da54011658c Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@local>
Date: Thu, 10 Sep 2026 17:34:01 +0200
Subject: [PATCH] fix: hitbox edges inset 16px from corners (no overlap)

---
 src/ui.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/ui.tsx b/src/ui.tsx
index dc560ca..5be9608 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -476,12 +476,12 @@ function Plugin () {
           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: 0, right: 0, 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', '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: 0, bottom: 0, 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: 0, bottom: 0, 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, '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: 0, right: 0, 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', '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>
   )