Refactor resize system to use edge/corner zones

Replace single bottom-right resizer with 8 invisible resize zones along
all edges and corners (n, s, e, w, ne, nw, se, sw). Window can now be
resized from any direction.

Changes:
- Add ResizeDirection type and resizeDirection state
- Add startX/startY to DragState for proper delta calculations
- Update DEFAULT_WINDOW_TEMPLATE with 8 resize zone divs
- Update DEFAULT_STYLES to position resize zones and use flexbox layout
- Refactor initDragAndResize() to setup handlers for all directions
- Add handleDirectionalResize() method for directional resize logic
- Update updateDockedResizerCursor() to show/hide zones based on dock state
- Update documentation and demo to reflect new resize behavior

Author: PhantomYdn

demo/index.html

@@ -232,7 +232,7 @@ <h1>service-injector Demo</h1>
 
     <div class="note">
       <strong>Tip:</strong> After selecting options, look for the floating tab on the edge of the screen. 
-      Click the tab to open the window. You can drag the window header and resize from the bottom-right corner 
+      Click the tab to open the window. You can drag the window header and resize from any edge or corner 
       (if those features are enabled). When dockable is enabled, drag the window to any screen edge to dock it 
       (pushes page content aside). Double-click the header or drag away to undock.
     </div>
@@ -279,8 +279,7 @@ <h1>service-injector Demo</h1>
                 "#%prefix%-header { background: #16213e; color: #eee; }" +
                 "#%prefix%-window { background: #1a1a2e; border: 1px solid #444; }" +
                 "#%prefix%-body { border-color: #444; }" +
-                "#%prefix%-header a { color: #eee; }" +
-                "#%prefix%-resizer { border-color: #666; }"
+                "#%prefix%-header a { color: #eee; }"
       },
       minimal: {
         tabTemplate: "<a onclick='return %prefix%ToggleWindow();' href='%url%'>☰</a>",

docs/README.md

@@ -8,10 +8,10 @@
 ┌─────────────────────────────────────┐
 │  Client's Website                   │
 │                                     │
-│  ┌─────────┐                        │
-│  │ Your    │  ← Floating tab        │
-│  │ Service │    (click to open)     │
-│  └─────────┘                        │
+│─────────┐                           │
+│ Your    │  ← Floating tab           │
+│ Service │    (click to open)        │
+│─────────┘                           │
 │                                     │
 └─────────────────────────────────────┘
 

docs/customization.md

@@ -136,12 +136,11 @@ These are the DOM elements created by service-injector:
 ├── #si-tab (floating tab button)
 │   └── [your tab template content]
 └── #si-window (popup window)
-    └── #si-inner
-        ├── #si-header (draggable header)
-        ├── #si-body
-        │   └── #si-iframe (your content)
-        └── #si-footer
-            └── #si-resizer (resize handle)
+    ├── #si-inner
+    │   ├── #si-header (draggable header)
+    │   └── #si-body
+    │       └── #si-iframe (your content)
+    └── resize zones (invisible, on all edges and corners)
 ```
 
 <!-- TODO: Add annotated screenshot showing element IDs -->
@@ -153,10 +152,10 @@ These are the DOM elements created by service-injector:
 | `#si-header` | Draggable header bar | Background, height, cursor |
 | `#si-body` | Content area | Border, padding |
 | `#si-iframe` | Embedded content | Width, height (auto-managed) |
-| `#si-footer` | Footer area | Usually minimal styling |
-| `#si-resizer` | Resize handle | Cursor, size |
 | `#si-shadow` | Animation placeholder | Background color |
 
+**Resize zones:** The window can be resized from all edges and corners. These zones are invisible (6px wide) and positioned along each edge.
+
 **Note:** Replace `si` with your custom prefix if using one.
 
 ---
@@ -181,10 +180,8 @@ For reference when creating custom templates:
   <div id='%prefix%-body'>
     <iframe id='%prefix%-iframe'></iframe>
   </div>
-  <div id='%prefix%-footer'>
-    <div id='%prefix%-resizer'></div>
-  </div>
 </div>
+<!-- Resize zones are automatically added for all edges and corners -->
 ```
 
 ### Default Styles
@@ -205,41 +202,31 @@ For reference when creating custom templates:
   height: 100%;
   width: 100%;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 #si-header {
   height: 1.5em;
   background: #aaa;
   text-align: right;
   padding: 0 0.5em;
   cursor: move;
+  flex-shrink: 0;
 }
 #si-body {
   border: 1px solid #aaa;
-  bottom: 0;
+  flex: 1;
+  overflow: hidden;
 }
 #si-iframe {
   border: 0;
-}
-#si-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-#si-resizer {
-  width: 10px;
-  height: 10px;
-  float: right;
-  position: relative;
-  right: -2px;
-  bottom: -2px;
-  border-right: 3px solid black;
-  border-bottom: 3px solid black;
-  cursor: se-resize;
+  width: 100%;
+  height: 100%;
 }
 #si-shadow {
   background: grey;
 }
+/* Resize zones are positioned along edges and corners */
 ```
 
 ---
@@ -307,9 +294,7 @@ For reference when creating custom templates:
       #si-body {
         border-color: #444;
       }
-      #si-resizer {
-        border-color: #666;
-      }
+
     `
   };
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "service-injector",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Lightweight library for SaaS providers to embed services on client websites as a floating tab/window with iframe integration",
   "author": "OrienteerBAP",
   "license": "Apache-2.0",