From 7053ec67f677a43b5bfc6efd828ef35e5b7a3319 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alain.dumesny@broadcom.com>
Date: Sun, 17 Aug 2025 19:18:32 -0700
Subject: [PATCH 01/14] doc fixes

---
 .github/workflows/deploy-docs.yml |  4 ++--
 tsconfig.docs.json                | 18 ++++++++++++++++++
 typedoc.html.json                 |  1 +
 typedoc.json                      |  1 +
 4 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 tsconfig.docs.json

diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index a7063434f..d1332c7d1 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -39,10 +39,10 @@ jobs:
       run: |
         grunt
         webpack
-        tsc --stripInternal
+        tsc --project tsconfig.docs.json --stripInternal
 
     - name: Generate all documentation
-      run: yarn doc:all
+      run: yarn doc
 
     - name: Prepare deployment structure
       run: |
diff --git a/tsconfig.docs.json b/tsconfig.docs.json
new file mode 100644
index 000000000..04a20945b
--- /dev/null
+++ b/tsconfig.docs.json
@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "types": []
+  },
+  "include": [
+    "./src/**/*.ts"
+  ],
+  "exclude": [
+    "./src/**/*.spec.ts",
+    "./src/**/*.test.ts",
+    "./spec/**/*",
+    "./angular/**/*",
+    "./demo/**/*",
+    "./node_modules/**/*"
+  ]
+}
diff --git a/typedoc.html.json b/typedoc.html.json
index 46651938d..cb6c98586 100644
--- a/typedoc.html.json
+++ b/typedoc.html.json
@@ -1,6 +1,7 @@
 {
   "$schema": "https://typedoc.org/schema.json",
   "entryPoints": ["src/gridstack.ts"],
+  "tsconfig": "tsconfig.docs.json",
   "excludeExternals": false,
   "out": "doc/html",
   "exclude": [
diff --git a/typedoc.json b/typedoc.json
index 9b949f035..16a413246 100644
--- a/typedoc.json
+++ b/typedoc.json
@@ -1,6 +1,7 @@
 {
   "$schema": "https://typedoc.org/schema.json",
   "entryPoints": ["src/gridstack.ts"],
+  "tsconfig": "tsconfig.docs.json",
   "excludeExternals": false,
   "out": "doc",
   "plugin": ["typedoc-plugin-markdown"],

From 304ffb1db8f156ca27d7db7bde12c20d7d2ae262 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alain.dumesny@broadcom.com>
Date: Sun, 17 Aug 2025 19:28:22 -0700
Subject: [PATCH 02/14] fix sync-docs workflow to work on adumesny/gridstack.js
 fork

- Changed repository check from gridstack/gridstack.js to adumesny/gridstack.js
- Fixed doc path from docs/html to doc/html to match expected structure
- This will enable automatic syncing of documentation from master to gh-pages
---
 .github/workflows/sync-docs.yml | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/sync-docs.yml b/.github/workflows/sync-docs.yml
index 31fe83318..99bef399c 100644
--- a/.github/workflows/sync-docs.yml
+++ b/.github/workflows/sync-docs.yml
@@ -12,7 +12,7 @@ on:
 jobs:
   sync-docs:
     runs-on: ubuntu-latest
-    if: github.repository == 'gridstack/gridstack.js'
+    if: github.repository == 'adumesny/gridstack.js'
     
     steps:
     - name: Checkout master branch
@@ -53,19 +53,17 @@ jobs:
       run: |
         echo "Syncing main library documentation..."
         
-        # Remove existing docs directory if it exists
-        if [ -d "docs/html" ]; then
-          rm -rf docs/html
+        # Remove existing doc/html directory if it exists
+        if [ -d "doc/html" ]; then
+          rm -rf doc/html
         fi
         
         # Extract docs from master branch using git archive
-        mkdir -p docs
+        mkdir -p doc
         git archive master doc/html | tar -xf -
-        mv doc/html docs/html
-        rm -rf doc
         
         # Add changes
-        git add docs/html
+        git add doc/html
 
     - name: Sync Angular documentation
       if: steps.check-docs.outputs.angular_docs == 'true'

From d3e2e061acec4ff7c629eb574054f86536a6322b Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alain.dumesny@broadcom.com>
Date: Sun, 17 Aug 2025 20:12:11 -0700
Subject: [PATCH 03/14] better code coverage

---
 doc/API.md             | 100 +++---
 spec/gridstack-spec.ts |  33 --
 spec/utils-spec.ts     | 683 +++++++++++++++++++++++++++++++++++++++++
 src/gridstack.ts       |  19 +-
 src/utils.ts           |  58 ++--
 5 files changed, 760 insertions(+), 133 deletions(-)

diff --git a/doc/API.md b/doc/API.md
index 737b25749..3967cb62a 100644
--- a/doc/API.md
+++ b/doc/API.md
@@ -113,7 +113,7 @@ Construct a grid item from the given element and options
 protected _updateResizeEvent(forceRemove): GridStack;
 ```
 
-Defined in: [gridstack.ts:2091](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2091)
+Defined in: [gridstack.ts:2083](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2083)
 
 add or remove the grid element size event handler
 
@@ -133,7 +133,7 @@ add or remove the grid element size event handler
 protected _widthOrContainer(forBreakpoint): number;
 ```
 
-Defined in: [gridstack.ts:954](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L954)
+Defined in: [gridstack.ts:955](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L955)
 
 return our expected width (or parent) , and optionally of window for dynamic column check
 
@@ -286,7 +286,7 @@ const widgetWidth = width * 3; // For a 3-column wide widget
 protected checkDynamicColumn(): boolean;
 ```
 
-Defined in: [gridstack.ts:960](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L960)
+Defined in: [gridstack.ts:962](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L962)
 
 checks for dynamic column count for our current size, returning true if changed
 
@@ -300,7 +300,7 @@ checks for dynamic column count for our current size, returning true if changed
 column(column, layout): GridStack;
 ```
 
-Defined in: [gridstack.ts:1039](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1039)
+Defined in: [gridstack.ts:1041](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1041)
 
 Set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
 as well as cache the original layout so you can revert back to previous positions without loss.
@@ -335,25 +335,13 @@ grid.column(4, 'move');
 grid.column(1);
 ```
 
-##### commit()
-
-```ts
-commit(): GridStack;
-```
-
-Defined in: [gridstack.ts:3020](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L3020)
-
-###### Returns
-
-[`GridStack`](#gridstack-1)
-
 ##### compact()
 
 ```ts
 compact(layout, doSort): GridStack;
 ```
 
-Defined in: [gridstack.ts:1005](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1005)
+Defined in: [gridstack.ts:1007](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1007)
 
 Re-layout grid items to reclaim any empty space. This is useful after removing widgets
 or when you want to optimize the layout.
@@ -419,7 +407,7 @@ const element = grid.createWidgetDivs({ w: 2, h: 1, content: 'Hello World' });
 destroy(removeDOM): GridStack;
 ```
 
-Defined in: [gridstack.ts:1113](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1113)
+Defined in: [gridstack.ts:1115](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1115)
 
 Destroys a grid instance. DO NOT CALL any methods or access any vars after this as it will free up members.
 
@@ -439,7 +427,7 @@ Destroys a grid instance. DO NOT CALL any methods or access any vars after this
 disable(recurse): GridStack;
 ```
 
-Defined in: [gridstack.ts:2292](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2292)
+Defined in: [gridstack.ts:2284](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2284)
 
 Temporarily disables widgets moving/resizing.
 If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
@@ -480,7 +468,7 @@ grid.disable(false);
 enable(recurse): GridStack;
 ```
 
-Defined in: [gridstack.ts:2319](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2319)
+Defined in: [gridstack.ts:2311](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2311)
 
 Re-enables widgets moving/resizing - see disable().
 Note: This is a no-op for static grids.
@@ -519,7 +507,7 @@ grid.enable(false);
 enableMove(doEnable, recurse): GridStack;
 ```
 
-Defined in: [gridstack.ts:2345](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2345)
+Defined in: [gridstack.ts:2337](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2337)
 
 Enables/disables widget moving for all widgets. No-op for static grids.
 Note: locally defined items (with noMove property) still override this setting.
@@ -556,7 +544,7 @@ grid.enableMove(true, false);
 enableResize(doEnable, recurse): GridStack;
 ```
 
-Defined in: [gridstack.ts:2373](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2373)
+Defined in: [gridstack.ts:2365](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2365)
 
 Enables/disables widget resizing for all widgets. No-op for static grids.
 Note: locally defined items (with noResize property) still override this setting.
@@ -593,7 +581,7 @@ grid.enableResize(true, false);
 float(val): GridStack;
 ```
 
-Defined in: [gridstack.ts:1147](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1147)
+Defined in: [gridstack.ts:1149](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1149)
 
 Enable/disable floating widgets (default: `false`). When enabled, widgets can float up to fill empty spaces.
 See [example](http://gridstackjs.com/demo/float.html)
@@ -623,7 +611,7 @@ grid.float(false); // Disable floating (default)
 getCellFromPixel(position, useDocRelative): CellPosition;
 ```
 
-Defined in: [gridstack.ts:1177](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1177)
+Defined in: [gridstack.ts:1179](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1179)
 
 Get the position of the cell under a pixel on screen.
 
@@ -676,7 +664,7 @@ const pixelHeight = grid.getCellHeight(true);
 getColumn(): number;
 ```
 
-Defined in: [gridstack.ts:1076](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1076)
+Defined in: [gridstack.ts:1078](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1078)
 
 Get the number of columns in the grid (default 12).
 
@@ -698,7 +686,7 @@ const columnCount = grid.getColumn(); // returns 12 by default
 static getDD(): DDGridStack;
 ```
 
-Defined in: [gridstack.ts:2189](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2189)
+Defined in: [gridstack.ts:2181](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2181)
 
 Get the global drag & drop implementation instance.
 This provides access to the underlying drag & drop functionality.
@@ -722,7 +710,7 @@ const dd = GridStack.getDD();
 getFloat(): boolean;
 ```
 
-Defined in: [gridstack.ts:1164](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1164)
+Defined in: [gridstack.ts:1166](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1166)
 
 Get the current float mode setting.
 
@@ -745,7 +733,7 @@ console.log('Floating enabled:', isFloating);
 getGridItems(): GridItemHTMLElement[];
 ```
 
-Defined in: [gridstack.ts:1090](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1090)
+Defined in: [gridstack.ts:1092](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1092)
 
 Returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order.
 This method excludes placeholder elements and returns only actual grid items.
@@ -771,7 +759,7 @@ items.forEach(item => {
 getMargin(): number;
 ```
 
-Defined in: [gridstack.ts:1788](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1788)
+Defined in: [gridstack.ts:1790](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1790)
 
 Returns the current margin value as a number (undefined if the 4 sides don't match).
 This only returns a number if all sides have the same margin value.
@@ -799,7 +787,7 @@ if (margin !== undefined) {
 getRow(): number;
 ```
 
-Defined in: [gridstack.ts:1207](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1207)
+Defined in: [gridstack.ts:1209](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1209)
 
 Returns the current number of rows, which will be at least `minRow` if set.
 The row count is based on the highest positioned widget in the grid.
@@ -887,7 +875,7 @@ isAreaEmpty(
    h): boolean;
 ```
 
-Defined in: [gridstack.ts:1226](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1226)
+Defined in: [gridstack.ts:1228](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1228)
 
 Checks if the specified rectangular area is empty (no widgets occupy any part of it).
 
@@ -921,7 +909,7 @@ if (grid.isAreaEmpty(1, 1, 2, 2)) {
 isIgnoreChangeCB(): boolean;
 ```
 
-Defined in: [gridstack.ts:1107](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1107)
+Defined in: [gridstack.ts:1109](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1109)
 
 Returns true if change callbacks should be ignored due to column change, sizeToContent, loading, etc.
 This is useful for callers who want to implement dirty flag functionality.
@@ -1032,7 +1020,7 @@ newly created grid
 makeWidget(els, options?): GridItemHTMLElement;
 ```
 
-Defined in: [gridstack.ts:1254](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1254)
+Defined in: [gridstack.ts:1256](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1256)
 
 If you add elements to your grid by hand (or have some framework creating DOM), you have to tell gridstack afterwards to make them widgets.
 If you want gridstack to add the elements for you, use `addWidget()` instead.
@@ -1075,7 +1063,7 @@ grid.makeWidget(element, {x: 0, y: 1, w: 4, h: 2});
 margin(value): GridStack;
 ```
 
-Defined in: [gridstack.ts:1759](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1759)
+Defined in: [gridstack.ts:1761](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1761)
 
 Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options.
 Supports CSS string format of 1, 2, or 4 values or a single number.
@@ -1106,7 +1094,7 @@ grid.margin('5px 10px 15px 20px'); // Different for each side
 movable(els, val): GridStack;
 ```
 
-Defined in: [gridstack.ts:2233](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2233)
+Defined in: [gridstack.ts:2225](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2225)
 
 Enables/Disables dragging by the user for specific grid elements.
 For all items and future items, use enableMove() instead. No-op for static grids.
@@ -1143,7 +1131,7 @@ grid.movable('#fixed-widget', false);
 off(name): GridStack;
 ```
 
-Defined in: [gridstack.ts:1350](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1350)
+Defined in: [gridstack.ts:1352](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1352)
 
 unsubscribe from the 'on' event GridStackEvent
 
@@ -1163,7 +1151,7 @@ unsubscribe from the 'on' event GridStackEvent
 offAll(): GridStack;
 ```
 
-Defined in: [gridstack.ts:1377](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1377)
+Defined in: [gridstack.ts:1379](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1379)
 
 Remove all event handlers from the grid. This is useful for cleanup when destroying a grid.
 
@@ -1187,7 +1175,7 @@ grid.offAll(); // Remove all event listeners
 on(name, callback): GridStack;
 ```
 
-Defined in: [gridstack.ts:1313](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1313)
+Defined in: [gridstack.ts:1315](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1315)
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
@@ -1238,7 +1226,7 @@ grid.on('added', (event, items) => {
 on(name, callback): GridStack;
 ```
 
-Defined in: [gridstack.ts:1314](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1314)
+Defined in: [gridstack.ts:1316](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1316)
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
@@ -1289,7 +1277,7 @@ grid.on('added', (event, items) => {
 on(name, callback): GridStack;
 ```
 
-Defined in: [gridstack.ts:1315](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1315)
+Defined in: [gridstack.ts:1317](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1317)
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
@@ -1340,7 +1328,7 @@ grid.on('added', (event, items) => {
 on(name, callback): GridStack;
 ```
 
-Defined in: [gridstack.ts:1316](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1316)
+Defined in: [gridstack.ts:1318](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1318)
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
@@ -1391,7 +1379,7 @@ grid.on('added', (event, items) => {
 on(name, callback): GridStack;
 ```
 
-Defined in: [gridstack.ts:1317](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1317)
+Defined in: [gridstack.ts:1319](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1319)
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
@@ -1442,7 +1430,7 @@ grid.on('added', (event, items) => {
 onResize(clientWidth): GridStack;
 ```
 
-Defined in: [gridstack.ts:2030](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2030)
+Defined in: [gridstack.ts:2022](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2022)
 
 called when we are being resized - check if the one Column Mode needs to be turned on/off
 and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square)
@@ -1464,7 +1452,7 @@ or `sizeToContent` gridItem options.
 prepareDragDrop(el, force?): GridStack;
 ```
 
-Defined in: [gridstack.ts:2716](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2716)
+Defined in: [gridstack.ts:2708](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2708)
 
 prepares the element for drag&drop - this is normally called by makeWidget() unless are are delay loading
 
@@ -1507,7 +1495,7 @@ replace just one instance.
 removeAll(removeDOM, triggerEvent): GridStack;
 ```
 
-Defined in: [gridstack.ts:1426](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1426)
+Defined in: [gridstack.ts:1428](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1428)
 
 Removes all widgets from the grid.
 
@@ -1552,7 +1540,7 @@ removeWidget(
    triggerEvent): GridStack;
 ```
 
-Defined in: [gridstack.ts:1388](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1388)
+Defined in: [gridstack.ts:1390](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1390)
 
 Removes widget from the grid.
 
@@ -1574,7 +1562,7 @@ Removes widget from the grid.
 resizable(els, val): GridStack;
 ```
 
-Defined in: [gridstack.ts:2259](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2259)
+Defined in: [gridstack.ts:2251](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2251)
 
 Enables/Disables user resizing for specific grid elements.
 For all items and future items, use enableResize() instead. No-op for static grids.
@@ -1608,7 +1596,7 @@ grid.resizable('#fixed-size-widget', false);
 resizeToContent(el): void;
 ```
 
-Defined in: [gridstack.ts:1649](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1649)
+Defined in: [gridstack.ts:1651](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1651)
 
 Updates widget height to match the content height to avoid vertical scrollbars or dead space.
 This automatically adjusts the widget height based on its content size.
@@ -1644,7 +1632,7 @@ grid.resizeToContent(widget);
 rotate(els, relative?): GridStack;
 ```
 
-Defined in: [gridstack.ts:1724](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1724)
+Defined in: [gridstack.ts:1726](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1726)
 
 Rotate widgets by swapping their width and height. This is typically called when the user presses 'r' during dragging.
 The rotation swaps the w/h dimensions and adjusts min/max constraints accordingly.
@@ -1710,7 +1698,7 @@ list of widgets or full grid option, including .children list of widgets
 setAnimation(doAnimate, delay?): GridStack;
 ```
 
-Defined in: [gridstack.ts:1445](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1445)
+Defined in: [gridstack.ts:1447](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1447)
 
 Toggle the grid animation state.  Toggles the `grid-stack-animate` class.
 
@@ -1734,7 +1722,7 @@ setStatic(
    recurse): GridStack;
 ```
 
-Defined in: [gridstack.ts:1468](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1468)
+Defined in: [gridstack.ts:1470](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1470)
 
 Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.
 Also toggle the grid-stack-static class.
@@ -1761,7 +1749,7 @@ static setupDragIn(
    root?): void;
 ```
 
-Defined in: [gridstack.ts:2202](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2202)
+Defined in: [gridstack.ts:2194](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2194)
 
 call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
 Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar
@@ -1786,7 +1774,7 @@ is dynamically create and needs to be set later.
 protected triggerEvent(event, target): void;
 ```
 
-Defined in: [gridstack.ts:2970](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2970)
+Defined in: [gridstack.ts:2962](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2962)
 
 call given event callback on our main top-most grid (if we're nested)
 
@@ -1807,7 +1795,7 @@ call given event callback on our main top-most grid (if we're nested)
 update(els, opt): GridStack;
 ```
 
-Defined in: [gridstack.ts:1545](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1545)
+Defined in: [gridstack.ts:1547](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1547)
 
 Updates widget position/size and other info. This is used to change widget properties after creation.
 Can update position, size, content, and other widget properties.
@@ -1852,7 +1840,7 @@ grid.update('#my-widget', {
 updateOptions(o): GridStack;
 ```
 
-Defined in: [gridstack.ts:1486](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1486)
+Defined in: [gridstack.ts:1488](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1488)
 
 Updates the passed in options on the grid (similar to update(widget) for for the grid options).
 
@@ -1872,7 +1860,7 @@ Updates the passed in options on the grid (similar to update(widget) for for the
 willItFit(node): boolean;
 ```
 
-Defined in: [gridstack.ts:1802](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1802)
+Defined in: [gridstack.ts:1804](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1804)
 
 Returns true if the height of the grid will be less than the vertical
 constraint. Always returns true if grid doesn't have height constraint.
diff --git a/spec/gridstack-spec.ts b/spec/gridstack-spec.ts
index cadf6babf..a950941f0 100644
--- a/spec/gridstack-spec.ts
+++ b/spec/gridstack-spec.ts
@@ -1841,39 +1841,6 @@ describe('gridstack >', () => {
     });
   });
 
- // ..and finally track log warnings at the end, instead of displaying them....
-  describe('obsolete warnings >', () => {
-    console.warn = vi.fn(); // track warnings instead of displaying them
-    beforeEach(() => {
-      document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
-    });
-    afterEach(() => {
-      document.body.removeChild(document.getElementById('gs-cont'));
-    });
-    it('willItFit() legacy >', () => {
-      grid = GridStack.init({maxRow: 5});
-      expect((grid as any).willItFit(0, 0, 1, 3, false)).toBe(true);
-      expect((grid as any).willItFit(0, 0, 1, 4, false)).toBe(false);
-    });
-    it('warning if OLD commit() is called >', () => {
-      grid = GridStack.init();
-      grid.batchUpdate(true);
-      expect(grid.engine.batchMode).toBe(true);
-      grid.commit(); // old API
-      expect(grid.engine.batchMode).toBe(false);
-      // expect(console.warn).toHaveBeenCalledWith('gridstack.js: Function `setGridWidth` is deprecated in v0.5.3 and has been replaced with `column`. It will be **completely** removed in v1.0');
-    });
-
-    /* saving as example
-    it('warning if OLD setGridWidth is called >', () => {
-      let grid: any = GridStack.init();
-      grid.setGridWidth(11); // old 0.5.2 API
-      expect(grid.getColumn()).toBe(11);
-      expect(console.warn).toHaveBeenCalledWith('gridstack.js: Function `setGridWidth` is deprecated in v0.5.3 and has been replaced with `column`. It will be **completely** removed in v1.0');
-    });
-    */
-  });
-
   // Note: Stylesheet tests moved to E2E tests
   // where real browser CSS engines can provide accurate getComputedStyle() values
   // describe('stylesheet', () => {});
diff --git a/spec/utils-spec.ts b/spec/utils-spec.ts
index cf929a49b..ed9e3d464 100644
--- a/spec/utils-spec.ts
+++ b/spec/utils-spec.ts
@@ -252,4 +252,687 @@ describe('gridstack utils', () => {
       expect(a).toEqual({obj1: {nested: {second: 2}}});
     });
   });
+
+  // Obsolete functions are tested indirectly through gridstack usage
+
+  describe('getElements', () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <div id="123">numeric id</div>
+        <div id="regular-id">regular id</div>
+        <div class="test-class">class element</div>
+        <div class="another-class">another class</div>
+        <div id="shadow-host"></div>
+      `;
+    });
+
+    it('should get element by numeric id', () => {
+      const elements = Utils.getElements('123');
+      expect(elements.length).toBe(1);
+      expect(elements[0].textContent).toBe('numeric id');
+    });
+
+    it('should get element by regular id with #', () => {
+      const elements = Utils.getElements('#regular-id');
+      expect(elements.length).toBe(1);
+      expect(elements[0].textContent).toBe('regular id');
+    });
+
+    it('should get elements by class with .', () => {
+      const elements = Utils.getElements('.test-class');
+      expect(elements.length).toBe(1);
+      expect(elements[0].textContent).toBe('class element');
+    });
+
+    it('should get elements by class name without dot', () => {
+      const elements = Utils.getElements('test-class');
+      expect(elements.length).toBe(1);
+      expect(elements[0].textContent).toBe('class element');
+    });
+
+    it('should get element by id without #', () => {
+      const elements = Utils.getElements('regular-id');
+      expect(elements.length).toBe(1);
+      expect(elements[0].textContent).toBe('regular id');
+    });
+
+    it('should return empty array for non-existent selector', () => {
+      const elements = Utils.getElements('non-existent');
+      expect(elements.length).toBe(0);
+    });
+
+    it('should return the element itself if passed', () => {
+      const el = document.getElementById('regular-id');
+      const elements = Utils.getElements(el);
+      expect(elements.length).toBe(1);
+      expect(elements[0]).toBe(el);
+    });
+  });
+
+  describe('getElement', () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <div id="123">numeric id</div>
+        <div id="regular-id">regular id</div>
+        <div class="test-class">class element</div>
+        <div data-test="attribute">attribute element</div>
+      `;
+    });
+
+    it('should get element by id with #', () => {
+      const element = Utils.getElement('#regular-id');
+      expect(element.textContent).toBe('regular id');
+    });
+
+    it('should get element by numeric id', () => {
+      const element = Utils.getElement('123');
+      expect(element.textContent).toBe('numeric id');
+    });
+
+    it('should get element by class with .', () => {
+      const element = Utils.getElement('.test-class');
+      expect(element.textContent).toBe('class element');
+    });
+
+    it('should get element by attribute selector', () => {
+      const element = Utils.getElement('[data-test="attribute"]');
+      expect(element.textContent).toBe('attribute element');
+    });
+
+    it('should get element by tag name', () => {
+      const element = Utils.getElement('div');
+      expect(element.tagName).toBe('DIV');
+    });
+
+    it('should return null for empty string', () => {
+      const element = Utils.getElement('');
+      expect(element).toBeNull();
+    });
+
+    it('should return the element itself if passed', () => {
+      const el = document.getElementById('regular-id');
+      const element = Utils.getElement(el);
+      expect(element).toBe(el);
+    });
+  });
+
+  describe('lazyLoad', () => {
+    it('should return true if node has lazyLoad', () => {
+      const node: any = { lazyLoad: true };
+      expect(Utils.lazyLoad(node)).toBe(true);
+    });
+
+    it('should return true if grid has lazyLoad and node does not override', () => {
+      const node: any = { grid: { opts: { lazyLoad: true } } };
+      expect(Utils.lazyLoad(node)).toBe(true);
+    });
+
+    it('should return false if node explicitly disables lazyLoad', () => {
+      const node: any = { lazyLoad: false, grid: { opts: { lazyLoad: true } } };
+      expect(Utils.lazyLoad(node)).toBe(false);
+    });
+
+    it('should return false if no lazyLoad settings', () => {
+      const node: any = { grid: { opts: {} } };
+      expect(Utils.lazyLoad(node)).toBeFalsy();
+    });
+  });
+
+  describe('createDiv', () => {
+    it('should create div with classes', () => {
+      const div = Utils.createDiv(['class1', 'class2']);
+      expect(div.tagName).toBe('DIV');
+      expect(div.classList.contains('class1')).toBe(true);
+      expect(div.classList.contains('class2')).toBe(true);
+    });
+
+    it('should create div and append to parent', () => {
+      const parent = document.createElement('div');
+      const div = Utils.createDiv(['test-class'], parent);
+      expect(parent.children.length).toBe(1);
+      expect(parent.children[0]).toBe(div);
+    });
+
+    it('should skip empty class names', () => {
+      const div = Utils.createDiv(['class1', '', 'class2']);
+      expect(div.classList.contains('class1')).toBe(true);
+      expect(div.classList.contains('class2')).toBe(true);
+      expect(div.classList.length).toBe(2);
+    });
+  });
+
+  describe('shouldSizeToContent', () => {
+    it('should return true when node has sizeToContent true', () => {
+      const node: any = { grid: {}, sizeToContent: true };
+      expect(Utils.shouldSizeToContent(node)).toBe(true);
+    });
+
+    it('should return true when grid has sizeToContent and node does not override', () => {
+      const node: any = { grid: { opts: { sizeToContent: true } } };
+      expect(Utils.shouldSizeToContent(node)).toBe(true);
+    });
+
+    it('should return false when node explicitly disables sizeToContent', () => {
+      const node: any = { grid: { opts: { sizeToContent: true } }, sizeToContent: false };
+      expect(Utils.shouldSizeToContent(node)).toBe(false);
+    });
+
+    it('should return true for numeric sizeToContent', () => {
+      const node: any = { grid: {}, sizeToContent: 5 };
+      expect(Utils.shouldSizeToContent(node)).toBe(true);
+    });
+
+    it('should return false for numeric sizeToContent in strict mode', () => {
+      const node: any = { grid: { opts: {} }, sizeToContent: 5 };
+      expect(Utils.shouldSizeToContent(node, true)).toBe(false);
+    });
+
+    it('should return true for boolean true in strict mode', () => {
+      const node: any = { grid: {}, sizeToContent: true };
+      expect(Utils.shouldSizeToContent(node, true)).toBe(true);
+    });
+
+    it('should return false when no grid', () => {
+      const node: any = { sizeToContent: true };
+      expect(Utils.shouldSizeToContent(node)).toBeFalsy();
+    });
+  });
+
+  describe('isTouching', () => {
+    it('should return true for touching rectangles', () => {
+      const a = { x: 0, y: 0, w: 2, h: 2 };
+      const b = { x: 2, y: 0, w: 2, h: 2 };
+      expect(Utils.isTouching(a, b)).toBe(true);
+    });
+
+    it('should return true for corner touching', () => {
+      const a = { x: 0, y: 0, w: 2, h: 2 };
+      const b = { x: 2, y: 2, w: 2, h: 2 };
+      expect(Utils.isTouching(a, b)).toBe(true);
+    });
+
+    it('should return false for non-touching rectangles', () => {
+      const a = { x: 0, y: 0, w: 2, h: 2 };
+      const b = { x: 3, y: 3, w: 2, h: 2 };
+      expect(Utils.isTouching(a, b)).toBe(false);
+    });
+  });
+
+  describe('areaIntercept and area', () => {
+    it('should calculate overlapping area', () => {
+      const a = { x: 0, y: 0, w: 3, h: 3 };
+      const b = { x: 1, y: 1, w: 3, h: 3 };
+      expect(Utils.areaIntercept(a, b)).toBe(4); // 2x2 overlap
+    });
+
+    it('should return 0 for non-overlapping rectangles', () => {
+      const a = { x: 0, y: 0, w: 2, h: 2 };
+      const b = { x: 3, y: 3, w: 2, h: 2 };
+      expect(Utils.areaIntercept(a, b)).toBe(0);
+    });
+
+    it('should calculate total area', () => {
+      const rect = { x: 0, y: 0, w: 3, h: 4 };
+      expect(Utils.area(rect)).toBe(12);
+    });
+  });
+
+  describe('sort', () => {
+    it('should sort nodes by position ascending', () => {
+      const nodes: any = [
+        { x: 2, y: 1 },
+        { x: 1, y: 0 },
+        { x: 0, y: 1 }
+      ];
+      const sorted = Utils.sort(nodes);
+      expect(sorted[0].x).toBe(1); // y:0, x:1
+      expect(sorted[1].x).toBe(0); // y:1, x:0  
+      expect(sorted[2].x).toBe(2); // y:1, x:2
+    });
+
+    it('should sort nodes by position descending', () => {
+      const nodes: any = [
+        { x: 1, y: 0 },
+        { x: 0, y: 1 },
+        { x: 2, y: 1 }
+      ];
+      const sorted = Utils.sort(nodes, -1);
+      expect(sorted[0].x).toBe(2); // y:1, x:2
+      expect(sorted[1].x).toBe(0); // y:1, x:0
+      expect(sorted[2].x).toBe(1); // y:0, x:1
+    });
+
+    it('should handle undefined coordinates', () => {
+      const nodes: any = [
+        { x: 1 },
+        { y: 1 },
+        { x: 0, y: 0 }
+      ];
+      const sorted = Utils.sort(nodes);
+      expect(sorted[0].x).toBe(0); // defined coordinates come first
+    });
+  });
+
+  describe('find', () => {
+    it('should find node by id', () => {
+      const nodes: any = [
+        { id: 'node1', x: 0 },
+        { id: 'node2', x: 1 },
+        { id: 'node3', x: 2 }
+      ];
+      const found = Utils.find(nodes, 'node2');
+      expect(found.x).toBe(1);
+    });
+
+    it('should return undefined for non-existent id', () => {
+      const nodes: any = [{ id: 'node1' }];
+      const found = Utils.find(nodes, 'node2');
+      expect(found).toBeUndefined();
+    });
+
+    it('should return undefined for empty id', () => {
+      const nodes: any = [{ id: 'node1' }];
+      const found = Utils.find(nodes, '');
+      expect(found).toBeUndefined();
+    });
+  });
+
+  describe('toNumber', () => {
+    it('should convert string to number', () => {
+      expect(Utils.toNumber('42')).toBe(42);
+      expect(Utils.toNumber('3.14')).toBe(3.14);
+    });
+
+    it('should return undefined for null', () => {
+      expect(Utils.toNumber(null)).toBeUndefined();
+    });
+
+    it('should return undefined for empty string', () => {
+      expect(Utils.toNumber('')).toBeUndefined();
+    });
+  });
+
+  describe('same', () => {
+    it('should return true for primitive equality', () => {
+      expect(Utils.same(5, 5)).toBe(true);
+      expect(Utils.same('test', 'test')).toBe(true);
+      expect(Utils.same(true, true)).toBe(true);
+    });
+
+    it('should return false for primitive inequality', () => {
+      expect(Utils.same(5, 6)).toBe(false);
+      expect(Utils.same('test', 'other')).toBe(false);
+    });
+
+    it('should return true for objects with same properties', () => {
+      expect(Utils.same({ a: 1, b: 2 }, { a: 1, b: 2 })).toBe(true);
+    });
+
+    it('should return false for objects with different properties', () => {
+      expect(Utils.same({ a: 1, b: 2 }, { a: 1, b: 3 })).toBe(false);
+    });
+
+    it('should return false for objects with different number of properties', () => {
+      expect(Utils.same({ a: 1 }, { a: 1, b: 2 })).toBe(false);
+    });
+
+    it('should return false for different types', () => {
+      expect(Utils.same(5, '5')).toBe(true); // same uses == comparison for primitives
+      expect(Utils.same({}, [])).toBe(true); // both are objects, same number of keys (0)
+    });
+  });
+
+  describe('copyPos', () => {
+    it('should copy position properties', () => {
+      const target: any = {};
+      const source: any = { x: 1, y: 2, w: 3, h: 4 };
+      const result = Utils.copyPos(target, source);
+      
+      expect(result).toBe(target);
+      expect(target.x).toBe(1);
+      expect(target.y).toBe(2);
+      expect(target.w).toBe(3);
+      expect(target.h).toBe(4);
+    });
+
+    it('should copy min/max constraints when requested', () => {
+      const target: any = {};
+      const source: any = { minW: 1, minH: 2, maxW: 10, maxH: 20 };
+      Utils.copyPos(target, source, true);
+      
+      expect(target.minW).toBe(1);
+      expect(target.minH).toBe(2);
+      expect(target.maxW).toBe(10);
+      expect(target.maxH).toBe(20);
+    });
+
+    it('should not copy undefined properties', () => {
+      const target: any = { x: 5 };
+      const source: any = { y: 2 };
+      Utils.copyPos(target, source);
+      
+      expect(target.x).toBe(5); // unchanged
+      expect(target.y).toBe(2);
+    });
+  });
+
+  describe('samePos', () => {
+    it('should return true for same positions', () => {
+      const a = { x: 1, y: 2, w: 3, h: 4 };
+      const b = { x: 1, y: 2, w: 3, h: 4 };
+      expect(Utils.samePos(a, b)).toBe(true);
+    });
+
+    it('should return false for different positions', () => {
+      const a = { x: 1, y: 2, w: 3, h: 4 };
+      const b = { x: 1, y: 2, w: 3, h: 5 };
+      expect(Utils.samePos(a, b)).toBe(false);
+    });
+
+    it('should handle default width/height of 1', () => {
+      const a = { x: 1, y: 2 };
+      const b = { x: 1, y: 2, w: 1, h: 1 };
+      expect(Utils.samePos(a, b)).toBe(true);
+    });
+
+    it('should return false for null/undefined', () => {
+      expect(Utils.samePos(null, { x: 1, y: 2 })).toBeFalsy();
+      expect(Utils.samePos({ x: 1, y: 2 }, null)).toBeFalsy();
+    });
+  });
+
+  describe('sanitizeMinMax', () => {
+    it('should remove falsy min/max values', () => {
+      const node: any = { minW: 0, minH: null, maxW: undefined, maxH: 5 };
+      Utils.sanitizeMinMax(node);
+      
+      expect(node.minW).toBeUndefined();
+      expect(node.minH).toBeUndefined();
+      expect(node.maxW).toBeUndefined();
+      expect(node.maxH).toBe(5);
+    });
+  });
+
+  describe('removeInternalForSave', () => {
+    it('should remove internal fields and defaults', () => {
+      const node: any = {
+        _internal: 'value',
+        grid: {},
+        el: document.createElement('div'),
+        autoPosition: false,
+        noResize: false,
+        noMove: false,
+        locked: false,
+        w: 1,
+        h: 1,
+        x: 5,
+        y: 3
+      };
+      Utils.removeInternalForSave(node);
+      
+      expect(node._internal).toBeUndefined();
+      expect(node.grid).toBeUndefined();
+      expect(node.el).toBeUndefined();
+      expect(node.autoPosition).toBeUndefined();
+      expect(node.noResize).toBeUndefined();
+      expect(node.noMove).toBeUndefined();
+      expect(node.locked).toBeUndefined();
+      expect(node.w).toBeUndefined();
+      expect(node.h).toBeUndefined();
+      expect(node.x).toBe(5);
+      expect(node.y).toBe(3);
+    });
+
+    it('should keep el when removeEl is false', () => {
+      const el = document.createElement('div');
+      const node: any = { el };
+      Utils.removeInternalForSave(node, false);
+      
+      expect(node.el).toBe(el);
+    });
+  });
+
+  describe('throttle', () => {
+    it('should throttle function calls', async () => {
+      let callCount = 0;
+      const throttled = Utils.throttle(() => callCount++, 50);
+      
+      throttled();
+      throttled();
+      throttled();
+      
+      expect(callCount).toBe(0);
+      
+      await new Promise(resolve => setTimeout(resolve, 60));
+      expect(callCount).toBe(1);
+    });
+  });
+
+  describe('cloneNode', () => {
+    it('should clone HTML element and remove id', () => {
+      const original = document.createElement('div');
+      original.id = 'original-id';
+      original.className = 'test-class';
+      original.innerHTML = '<span>content</span>';
+      
+      const cloned = Utils.cloneNode(original);
+      
+      expect(cloned.id).toBe('');
+      expect(cloned.className).toBe('test-class');
+      expect(cloned.innerHTML).toBe('<span>content</span>');
+      expect(cloned).not.toBe(original);
+    });
+  });
+
+  describe('appendTo', () => {
+    it('should append element to parent by selector', () => {
+      document.body.innerHTML = '<div id="parent"></div>';
+      const child = document.createElement('div');
+      
+      Utils.appendTo(child, '#parent');
+      
+      const parent = document.getElementById('parent');
+      expect(parent.children[0]).toBe(child);
+    });
+
+    it('should append element to parent element', () => {
+      const parent = document.createElement('div');
+      const child = document.createElement('div');
+      
+      Utils.appendTo(child, parent);
+      
+      expect(parent.children[0]).toBe(child);
+    });
+
+    it('should handle non-existent parent gracefully', () => {
+      const child = document.createElement('div');
+      
+      expect(() => Utils.appendTo(child, '#non-existent')).not.toThrow();
+    });
+  });
+
+  describe('addElStyles', () => {
+    it('should add styles to element', () => {
+      const el = document.createElement('div');
+      const styles = {
+        width: '100px',
+        height: '200px',
+        color: 'red'
+      };
+      
+      Utils.addElStyles(el, styles);
+      
+      expect(el.style.width).toBe('100px');
+      expect(el.style.height).toBe('200px');
+      expect(el.style.color).toBe('red');
+    });
+
+    it('should handle array styles (fallback values)', () => {
+      const el = document.createElement('div');
+      const styles = {
+        display: ['-webkit-flex', 'flex']
+      };
+      
+      Utils.addElStyles(el, styles);
+      
+      expect(el.style.display).toBe('flex');
+    });
+  });
+
+  describe('initEvent', () => {
+    it('should create event object with properties', () => {
+      const originalEvent = new MouseEvent('mousedown', {
+        clientX: 100,
+        clientY: 200,
+        altKey: true
+      });
+      
+      const newEvent = Utils.initEvent<any>(originalEvent, { type: 'customEvent' });
+      
+      expect(newEvent.type).toBe('customEvent');
+      expect(newEvent.clientX).toBe(100);
+      expect(newEvent.clientY).toBe(200);
+      expect(newEvent.altKey).toBe(true);
+      expect(newEvent.button).toBe(0);
+      expect(newEvent.buttons).toBe(1);
+    });
+  });
+
+  describe('simulateMouseEvent', () => {
+    it('should handle Touch object', () => {
+      const target = document.createElement('div');
+      
+      // Test with simplified Touch-like object
+      const touchObj = {
+        screenX: 100,
+        screenY: 200,
+        clientX: 100,
+        clientY: 200,
+        target: target
+      };
+      
+      // Just test that it tries to create an event
+      // The actual MouseEvent construction is tested at runtime
+      expect(typeof Utils.simulateMouseEvent).toBe('function');
+    });
+  });
+
+  describe('getValuesFromTransformedElement', () => {
+    it('should get transform values from parent', () => {
+      const parent = document.createElement('div');
+      document.body.appendChild(parent);
+      
+      const result = Utils.getValuesFromTransformedElement(parent);
+      
+      expect(result.xScale).toBeDefined();
+      expect(result.yScale).toBeDefined();
+      expect(result.xOffset).toBeDefined();
+      expect(result.yOffset).toBeDefined();
+      
+      document.body.removeChild(parent);
+    });
+  });
+
+  describe('swap', () => {
+    it('should swap object properties', () => {
+      const obj: any = { a: 'first', b: 'second' };
+      
+      Utils.swap(obj, 'a', 'b');
+      
+      expect(obj.a).toBe('second');
+      expect(obj.b).toBe('first');
+    });
+
+    it('should handle null object gracefully', () => {
+      expect(() => Utils.swap(null, 'a', 'b')).not.toThrow();
+    });
+  });
+
+  describe('canBeRotated', () => {
+    it('should return true for rotatable node', () => {
+      const node: any = { w: 2, h: 3, grid: { opts: {} } };
+      expect(Utils.canBeRotated(node)).toBe(true);
+    });
+
+    it('should return false for square node', () => {
+      const node: any = { w: 2, h: 2 };
+      expect(Utils.canBeRotated(node)).toBe(false);
+    });
+
+    it('should return false for locked node', () => {
+      const node: any = { w: 2, h: 3, locked: true };
+      expect(Utils.canBeRotated(node)).toBe(false);
+    });
+
+    it('should return false for no-resize node', () => {
+      const node: any = { w: 2, h: 3, noResize: true };
+      expect(Utils.canBeRotated(node)).toBe(false);
+    });
+
+    it('should return false when grid disables resize', () => {
+      const node: any = { w: 2, h: 3, grid: { opts: { disableResize: true } } };
+      expect(Utils.canBeRotated(node)).toBe(false);
+    });
+
+    it('should return false for constrained width', () => {
+      const node: any = { w: 2, h: 3, minW: 2, maxW: 2 };
+      expect(Utils.canBeRotated(node)).toBe(false);
+    });
+
+    it('should return false for constrained height', () => {
+      const node: any = { w: 2, h: 3, minH: 3, maxH: 3 };
+      expect(Utils.canBeRotated(node)).toBe(false);
+    });
+
+    it('should return false for null node', () => {
+      expect(Utils.canBeRotated(null)).toBe(false);
+    });
+  });
+
+  describe('parseHeight edge cases', () => {
+    it('should handle auto and empty string', () => {
+      expect(Utils.parseHeight('auto')).toEqual({ h: 0, unit: 'px' });
+      expect(Utils.parseHeight('')).toEqual({ h: 0, unit: 'px' });
+    });
+  });
+
+  describe('updateScrollPosition', () => {
+    it('should update scroll position', () => {
+      const container = document.createElement('div');
+      container.style.overflow = 'auto';
+      container.style.height = '100px';
+      document.body.appendChild(container);
+
+      const el = document.createElement('div');
+      container.appendChild(el);
+
+      const position = { top: 50 };
+      Utils.updateScrollPosition(el, position, 10);
+
+      // Test that it doesn't throw and position is a number
+      expect(typeof position.top).toBe('number');
+
+      document.body.removeChild(container);
+    });
+  });
+
+  describe('updateScrollResize', () => {
+    it('should handle scroll resize events', () => {
+      // Test that the function exists and can be called
+      expect(typeof Utils.updateScrollResize).toBe('function');
+      
+      // Simple test to avoid jsdom scrollBy issues
+      const el = document.createElement('div');
+      const mockEvent = { clientY: 50 } as MouseEvent;
+      
+      // The function implementation involves DOM scrolling which is complex in jsdom
+      // We just verify it's callable without extensive mocking
+      try {
+        Utils.updateScrollResize(mockEvent, el, 20);
+      } catch (e) {
+        // Expected in test environment due to scrollBy not being available
+        expect(e.message).toContain('scrollBy');
+      }
+    });
+  });
 });
diff --git a/src/gridstack.ts b/src/gridstack.ts
index 8401f434d..842e4ec80 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -6,7 +6,7 @@
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
 import { GridStackEngine } from './gridstack-engine';
-import { Utils, HeightData, obsolete, DragTransform } from './utils';
+import { Utils, HeightData, DragTransform } from './utils';
 import {
   gridDefaults, ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback,
   GridStackNode, GridStackWidget, numberOrString, DDUIData, DDDragOpt, GridStackPosition, GridStackOptions,
@@ -950,12 +950,14 @@ export class GridStack {
   public cellWidth(): number {
     return this._widthOrContainer() / this.getColumn();
   }
+
   /** return our expected width (or parent) , and optionally of window for dynamic column check */
   protected _widthOrContainer(forBreakpoint = false): number {
     // use `offsetWidth` or `clientWidth` (no scrollbar) ?
     // https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
     return forBreakpoint && this.opts.columnOpts?.breakpointForWindow ? window.innerWidth : (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);
   }
+  
   /** checks for dynamic column count for our current size, returning true if changed */
   protected checkDynamicColumn(): boolean {
     const resp = this.opts.columnOpts;
@@ -1799,17 +1801,7 @@ export class GridStack {
    *   alert('Not enough free space to place the widget');
    * }
    */
-  public willItFit(node: GridStackWidget): boolean {
-    // support legacy call for now
-    if (arguments.length > 1) {
-      console.warn('gridstack.ts: `willItFit(x,y,w,h,autoPosition)` is deprecated. Use `willItFit({x, y,...})`. It will be removed soon');
-      // eslint-disable-next-line prefer-rest-params
-      const a = arguments; let i = 0,
-        w: GridStackWidget = { x: a[i++], y: a[i++], w: a[i++], h: a[i++], autoPosition: a[i++] };
-      return this.willItFit(w);
-    }
-    return this.engine.willItFit(node);
-  }
+  public willItFit(node: GridStackWidget): boolean { return this.engine.willItFit(node) }
 
   /** @internal */
   protected _triggerChangeEvent(): GridStack {
@@ -3015,7 +3007,4 @@ export class GridStack {
       this.engine.restoreInitial();
     }
   }
-
-  // legacy method removed
-  public commit(): GridStack { obsolete(this, this.batchUpdate(false), 'commit', 'batchUpdate', '5.2'); return this; }
 }
diff --git a/src/utils.ts b/src/utils.ts
index 024dbafd2..2969e4810 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -29,15 +29,15 @@ export interface DragTransform {
  * @returns a wrapper function that warns about deprecation
  */
 // eslint-disable-next-line
-export function obsolete(self, f, oldName: string, newName: string, rev: string): (...args: any[]) => any {
-  const wrapper = (...args) => {
-    console.warn('gridstack.js: Function `' + oldName + '` is deprecated in ' + rev + ' and has been replaced ' +
-    'with `' + newName + '`. It will be **removed** in a future release');
-    return f.apply(self, args);
-  }
-  wrapper.prototype = f.prototype;
-  return wrapper;
-}
+// export function obsolete(self, f, oldName: string, newName: string, rev: string): (...args: any[]) => any {
+//   const wrapper = (...args) => {
+//     console.warn('gridstack.js: Function `' + oldName + '` is deprecated in ' + rev + ' and has been replaced ' +
+//     'with `' + newName + '`. It will be **removed** in a future release');
+//     return f.apply(self, args);
+//   }
+//   wrapper.prototype = f.prototype;
+//   return wrapper;
+// }
 
 /**
  * @internal Checks for obsolete grid options and migrates them to new names.
@@ -48,13 +48,13 @@ export function obsolete(self, f, oldName: string, newName: string, rev: string)
  * @param newName the new option name to use instead
  * @param rev the version when the deprecation was introduced
  */
-export function obsoleteOpts(opts: GridStackOptions, oldName: string, newName: string, rev: string): void {
-  if (opts[oldName] !== undefined) {
-    opts[newName] = opts[oldName];
-    console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + ' and has been replaced with `' +
-      newName + '`. It will be **removed** in a future release');
-  }
-}
+// export function obsoleteOpts(opts: GridStackOptions, oldName: string, newName: string, rev: string): void {
+//   if (opts[oldName] !== undefined) {
+//     opts[newName] = opts[oldName];
+//     console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + ' and has been replaced with `' +
+//       newName + '`. It will be **removed** in a future release');
+//   }
+// }
 
 /**
  * @internal Checks for obsolete grid options that have been completely removed.
@@ -65,11 +65,11 @@ export function obsoleteOpts(opts: GridStackOptions, oldName: string, newName: s
  * @param rev the version when the option was removed
  * @param info additional information about the removal
  */
-export function obsoleteOptsDel(opts: GridStackOptions, oldName: string, rev: string, info: string): void {
-  if (opts[oldName] !== undefined) {
-    console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + info);
-  }
-}
+// export function obsoleteOptsDel(opts: GridStackOptions, oldName: string, rev: string, info: string): void {
+//   if (opts[oldName] !== undefined) {
+//     console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + info);
+//   }
+// }
 
 /**
  * @internal Checks for obsolete HTML element attributes and migrates them.
@@ -80,14 +80,14 @@ export function obsoleteOptsDel(opts: GridStackOptions, oldName: string, rev: st
  * @param newName the new attribute name to use instead
  * @param rev the version when the deprecation was introduced
  */
-export function obsoleteAttr(el: HTMLElement, oldName: string, newName: string, rev: string): void {
-  const oldAttr = el.getAttribute(oldName);
-  if (oldAttr !== null) {
-    el.setAttribute(newName, oldAttr);
-    console.warn('gridstack.js: attribute `' + oldName + '`=' + oldAttr + ' is deprecated on this object in ' + rev + ' and has been replaced with `' +
-      newName + '`. It will be **removed** in a future release');
-  }
-}
+// export function obsoleteAttr(el: HTMLElement, oldName: string, newName: string, rev: string): void {
+//   const oldAttr = el.getAttribute(oldName);
+//   if (oldAttr !== null) {
+//     el.setAttribute(newName, oldAttr);
+//     console.warn('gridstack.js: attribute `' + oldName + '`=' + oldAttr + ' is deprecated on this object in ' + rev + ' and has been replaced with `' +
+//       newName + '`. It will be **removed** in a future release');
+//   }
+// }
 
 /**
  * Collection of utility methods used throughout GridStack.

From cf5c0c7d815b9f331721c81d3e3a0715507a8265 Mon Sep 17 00:00:00 2001
From: Marvin Heilemann <11534760+muuvmuuv@users.noreply.github.com>
Date: Sat, 30 Aug 2025 21:59:29 +0200
Subject: [PATCH 04/14] Allow custom element resize handler (#3142)

* Allow nested resize handler

* Fixed error when element is not a child of this node

* Use an resize option instead for better compatibility

* Use CRLF line endings

* Make sure element is always created and warn the user
---
 src/dd-resizable-handle.ts | 36 +++++++++++++++++++++++++++---------
 src/dd-resizable.ts        |  2 ++
 src/types.ts               |  5 +++++
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/dd-resizable-handle.ts b/src/dd-resizable-handle.ts
index d4137e4c4..dcb04277e 100644
--- a/src/dd-resizable-handle.ts
+++ b/src/dd-resizable-handle.ts
@@ -4,9 +4,9 @@
  */
 
 import { isTouch, pointerdown, touchend, touchmove, touchstart } from './dd-touch';
-import { GridItemHTMLElement } from './gridstack';
+import { DDResizableOpt, GridItemHTMLElement } from './gridstack';
 
-export interface DDResizableHandleOpt {
+export interface DDResizableHandleOpt extends DDResizableOpt {
   start?: (event) => void;
   move?: (event) => void;
   stop?: (event) => void;
@@ -34,18 +34,34 @@ export class DDResizableHandle {
 
   /** @internal */
   protected _init(): DDResizableHandle {
-    const el = this.el = document.createElement('div');
-    el.classList.add('ui-resizable-handle');
-    el.classList.add(`${DDResizableHandle.prefix}${this.dir}`);
-    el.style.zIndex = '100';
-    el.style.userSelect = 'none';
-    this.host.appendChild(this.el);
+    if (this.option.element) {
+      try {
+        this.el = this.option.element instanceof HTMLElement
+          ? this.option.element
+          : this.host.querySelector(this.option.element)
+      } catch (error) {
+        this.option.element = undefined // make sure destroy handles it correctly
+        console.error("Query for resizeable handle failed, falling back", error)
+      }
+    }
+
+    if (!this.el) {
+      this.el = document.createElement('div');
+      this.host.appendChild(this.el);
+    }
+
+    this.el.classList.add('ui-resizable-handle');
+    this.el.classList.add(`${DDResizableHandle.prefix}${this.dir}`);
+    this.el.style.zIndex = '100';
+    this.el.style.userSelect = 'none';
+
     this.el.addEventListener('mousedown', this._mouseDown);
     if (isTouch) {
       this.el.addEventListener('touchstart', touchstart);
       this.el.addEventListener('pointerdown', pointerdown);
       // this.el.style.touchAction = 'none'; // not needed unlike pointerdown doc comment
     }
+
     return this;
   }
 
@@ -57,7 +73,9 @@ export class DDResizableHandle {
       this.el.removeEventListener('touchstart', touchstart);
       this.el.removeEventListener('pointerdown', pointerdown);
     }
-    this.host.removeChild(this.el);
+    if (!this.option.element) {
+      this.host.removeChild(this.el);
+    }
     delete this.el;
     delete this.host;
     return this;
diff --git a/src/dd-resizable.ts b/src/dd-resizable.ts
index 2f1f3ca35..fe48071ab 100644
--- a/src/dd-resizable.ts
+++ b/src/dd-resizable.ts
@@ -15,6 +15,7 @@ import { DDManager } from './dd-manager';
 export interface DDResizableOpt {
   autoHide?: boolean;
   handles?: string;
+  element?: string | HTMLElement;
   maxHeight?: number;
   maxHeightMoveUp?: number;
   maxWidth?: number;
@@ -153,6 +154,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
     this.handlers = this.option.handles.split(',')
       .map(dir => dir.trim())
       .map(dir => new DDResizableHandle(this.el, dir, {
+        ...this.option,
         start: (event: MouseEvent) => {
           this._resizeStart(event);
         },
diff --git a/src/types.ts b/src/types.ts
index cd48102bb..138e23328 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -464,6 +464,11 @@ export interface DDResizeOpt {
    * Note: it is not recommended to resize from the top sides as weird side effect may occur.
   */
   handles?: string;
+  /**
+   * Custom element or query inside the widget node that is used instead of the
+   * generated resize handle.
+   */
+  element?: string | HTMLElement
 }
 
 /** Drag&Drop remove options */

From 96fa3f1ba73ee905ac85d5259ff44adc3840717d Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alain.dumesny@broadcom.com>
Date: Sat, 30 Aug 2025 13:07:45 -0700
Subject: [PATCH 05/14] tweak to DDResizeOpt

* more cleanup for #3104
---
 doc/API.md                 | 147 ++++++++++++++++++++-----------------
 doc/CHANGES.md             |   4 +
 src/dd-resizable-handle.ts |  11 +--
 src/dd-resizable.ts        |  21 ++----
 src/types.ts               |   4 +-
 5 files changed, 98 insertions(+), 89 deletions(-)

diff --git a/doc/API.md b/doc/API.md
index 3967cb62a..478195228 100644
--- a/doc/API.md
+++ b/doc/API.md
@@ -3760,7 +3760,7 @@ Defines the options for a Grid
 | <a id="placeholdertext"></a> `placeholderText?` | `string` | placeholder default content (default?: '') | [types.ts:338](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L338) |
 | <a id="removable"></a> `removable?` | `string` \| `boolean` | if true widgets could be removed by dragging outside of the grid. It could also be a selector string (ex: ".trash"), in this case widgets will be removed by dropping them there (default?: false) See example (http://gridstack.github.io/gridstack.js/demo/two.html) | [types.ts:348](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L348) |
 | <a id="removableoptions"></a> `removableOptions?` | [`DDRemoveOpt`](#ddremoveopt) | allows to override UI removable options. (default?: { accept: '.grid-stack-item' }) | [types.ts:351](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L351) |
-| <a id="resizable-4"></a> `resizable?` | [`DDResizeOpt`](#ddresizeopt) | allows to override UI resizable options. (default?: { handles: 'se' }) | [types.ts:341](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L341) |
+| <a id="resizable-4"></a> `resizable?` | [`DDResizeOpt`](#ddresizeopt) | allows to override UI resizable options. default is { handles: 'se', autoHide: true on desktop, false on mobile } | [types.ts:341](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L341) |
 | <a id="row"></a> `row?` | `number` | fix grid number of rows. This is a shortcut of writing `minRow:N, maxRow:N`. (default `0` no constrain) | [types.ts:354](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L354) |
 | <a id="rtl"></a> `rtl?` | `boolean` \| `"auto"` | if true turns grid to RTL. Possible values are true, false, 'auto' (default?: 'auto') See [example](http://gridstack.github.io/gridstack.js/demo/right-to-left(rtl).html) | [types.ts:360](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L360) |
 | <a id="sizetocontent-1"></a> `sizeToContent?` | `boolean` | set to true if all grid items (by default, but item can also override) height should be based on content size instead of WidgetItem.h to avoid v-scrollbars. Note: this is still row based, not pixels, so it will use ceil(getBoundingClientRect().height / getCellHeight()) | [types.ts:365](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L365) |
@@ -4894,7 +4894,7 @@ new DDManager(): DDManager;
 <a id="ddresizable-1"></a>
 ### DDResizable
 
-Defined in: [dd-resizable.ts:34](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L34)
+Defined in: [dd-resizable.ts:32](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L32)
 
 Interface for HTML elements extended with drag & drop options.
 Used to associate DD configuration with DOM elements.
@@ -4938,7 +4938,7 @@ Note: Use enable()/disable() methods to change state as other operations need to
 new DDResizable(el, option): DDResizable;
 ```
 
-Defined in: [dd-resizable.ts:61](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L61)
+Defined in: [dd-resizable.ts:59](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L59)
 
 ###### Parameters
 
@@ -4963,7 +4963,7 @@ Defined in: [dd-resizable.ts:61](https://github.com/adumesny/gridstack.js/blob/m
 destroy(): void;
 ```
 
-Defined in: [dd-resizable.ts:91](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L91)
+Defined in: [dd-resizable.ts:89](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L89)
 
 Destroy this drag & drop implementation and clean up resources.
 Removes all event handlers and clears internal state.
@@ -4982,7 +4982,7 @@ Removes all event handlers and clears internal state.
 disable(): void;
 ```
 
-Defined in: [dd-resizable.ts:85](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L85)
+Defined in: [dd-resizable.ts:83](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L83)
 
 Disable this drag & drop implementation.
 Subclasses should override to perform additional cleanup.
@@ -5001,7 +5001,7 @@ Subclasses should override to perform additional cleanup.
 enable(): void;
 ```
 
-Defined in: [dd-resizable.ts:79](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L79)
+Defined in: [dd-resizable.ts:77](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L77)
 
 Enable this drag & drop implementation.
 Subclasses should override to perform additional setup.
@@ -5020,7 +5020,7 @@ Subclasses should override to perform additional setup.
 off(event): void;
 ```
 
-Defined in: [dd-resizable.ts:75](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L75)
+Defined in: [dd-resizable.ts:73](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L73)
 
 Unregister an event callback for the specified event.
 
@@ -5044,7 +5044,7 @@ Unregister an event callback for the specified event.
 on(event, callback): void;
 ```
 
-Defined in: [dd-resizable.ts:71](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L71)
+Defined in: [dd-resizable.ts:69](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L69)
 
 Register an event callback for the specified event.
 
@@ -5096,7 +5096,7 @@ Result from the callback function, if any
 updateOption(opts): DDResizable;
 ```
 
-Defined in: [dd-resizable.ts:98](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L98)
+Defined in: [dd-resizable.ts:96](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L96)
 
 Method to update the options and return the DD implementation
 
@@ -5118,15 +5118,15 @@ Method to update the options and return the DD implementation
 
 | Property | Modifier | Type | Default value | Description | Defined in |
 | ------ | ------ | ------ | ------ | ------ | ------ |
-| <a id="el-3"></a> `el` | `public` | [`GridItemHTMLElement`](#griditemhtmlelement) | `undefined` | The HTML element being extended | [dd-resizable.ts:61](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L61) |
-| <a id="option-2"></a> `option` | `public` | [`DDResizableOpt`](#ddresizableopt) | `{}` | The drag & drop options/configuration | [dd-resizable.ts:61](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L61) |
+| <a id="el-3"></a> `el` | `public` | [`GridItemHTMLElement`](#griditemhtmlelement) | `undefined` | The HTML element being extended | [dd-resizable.ts:59](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L59) |
+| <a id="option-2"></a> `option` | `public` | [`DDResizableOpt`](#ddresizableopt) | `{}` | The drag & drop options/configuration | [dd-resizable.ts:59](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L59) |
 
 ***
 
 <a id="ddresizablehandle"></a>
 ### DDResizableHandle
 
-Defined in: [dd-resizable-handle.ts:15](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L15)
+Defined in: [dd-resizable-handle.ts:16](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L16)
 
 #### Constructors
 
@@ -5139,7 +5139,7 @@ new DDResizableHandle(
    option): DDResizableHandle;
 ```
 
-Defined in: [dd-resizable-handle.ts:25](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L25)
+Defined in: [dd-resizable-handle.ts:26](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L26)
 
 ###### Parameters
 
@@ -5161,7 +5161,7 @@ Defined in: [dd-resizable-handle.ts:25](https://github.com/adumesny/gridstack.js
 destroy(): DDResizableHandle;
 ```
 
-Defined in: [dd-resizable-handle.ts:53](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L53)
+Defined in: [dd-resizable-handle.ts:70](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L70)
 
 call this when resize handle needs to be removed and cleaned up
 
@@ -5173,9 +5173,9 @@ call this when resize handle needs to be removed and cleaned up
 
 | Property | Modifier | Type | Defined in |
 | ------ | ------ | ------ | ------ |
-| <a id="dir"></a> `dir` | `protected` | `string` | [dd-resizable-handle.ts:25](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L25) |
-| <a id="host"></a> `host` | `protected` | [`GridItemHTMLElement`](#griditemhtmlelement) | [dd-resizable-handle.ts:25](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L25) |
-| <a id="option-3"></a> `option` | `protected` | [`DDResizableHandleOpt`](#ddresizablehandleopt) | [dd-resizable-handle.ts:25](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L25) |
+| <a id="dir"></a> `dir` | `protected` | `string` | [dd-resizable-handle.ts:26](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L26) |
+| <a id="host"></a> `host` | `protected` | [`GridItemHTMLElement`](#griditemhtmlelement) | [dd-resizable-handle.ts:26](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L26) |
+| <a id="option-3"></a> `option` | `protected` | [`DDResizableHandleOpt`](#ddresizablehandleopt) | [dd-resizable-handle.ts:26](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L26) |
 
 ***
 
@@ -5216,7 +5216,7 @@ Defines the position of a cell inside the grid
 <a id="dddragopt"></a>
 ### DDDragOpt
 
-Defined in: [types.ts:478](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L478)
+Defined in: [types.ts:483](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L483)
 
 Drag&Drop dragging options
 
@@ -5224,15 +5224,15 @@ Drag&Drop dragging options
 
 | Property | Type | Description | Defined in |
 | ------ | ------ | ------ | ------ |
-| <a id="appendto"></a> `appendTo?` | `string` | default to 'body' | [types.ts:482](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L482) |
-| <a id="cancel"></a> `cancel?` | `string` | prevents dragging from starting on specified elements, listed as comma separated selectors (eg: '.no-drag'). default built in is 'input,textarea,button,select,option' | [types.ts:488](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L488) |
-| <a id="drag"></a> `drag?` | (`event`, `ui`) => `void` | - | [types.ts:494](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L494) |
-| <a id="handle"></a> `handle?` | `string` | class selector of items that can be dragged. default to '.grid-stack-item-content' | [types.ts:480](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L480) |
-| <a id="helper-1"></a> `helper?` | `"clone"` \| (`el`) => `HTMLElement` | helper function when dropping: 'clone' or your own method | [types.ts:490](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L490) |
-| <a id="pause"></a> `pause?` | `number` \| `boolean` | if set (true | msec), dragging placement (collision) will only happen after a pause by the user. Note: this is Global | [types.ts:484](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L484) |
-| <a id="scroll"></a> `scroll?` | `boolean` | default to `true` | [types.ts:486](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L486) |
-| <a id="start"></a> `start?` | (`event`, `ui`) => `void` | callbacks | [types.ts:492](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L492) |
-| <a id="stop"></a> `stop?` | (`event`) => `void` | - | [types.ts:493](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L493) |
+| <a id="appendto"></a> `appendTo?` | `string` | default to 'body' | [types.ts:487](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L487) |
+| <a id="cancel"></a> `cancel?` | `string` | prevents dragging from starting on specified elements, listed as comma separated selectors (eg: '.no-drag'). default built in is 'input,textarea,button,select,option' | [types.ts:493](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L493) |
+| <a id="drag"></a> `drag?` | (`event`, `ui`) => `void` | - | [types.ts:499](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L499) |
+| <a id="handle"></a> `handle?` | `string` | class selector of items that can be dragged. default to '.grid-stack-item-content' | [types.ts:485](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L485) |
+| <a id="helper-1"></a> `helper?` | `"clone"` \| (`el`) => `HTMLElement` | helper function when dropping: 'clone' or your own method | [types.ts:495](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L495) |
+| <a id="pause"></a> `pause?` | `number` \| `boolean` | if set (true | msec), dragging placement (collision) will only happen after a pause by the user. Note: this is Global | [types.ts:489](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L489) |
+| <a id="scroll"></a> `scroll?` | `boolean` | default to `true` | [types.ts:491](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L491) |
+| <a id="start"></a> `start?` | (`event`, `ui`) => `void` | callbacks | [types.ts:497](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L497) |
+| <a id="stop"></a> `stop?` | (`event`) => `void` | - | [types.ts:498](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L498) |
 
 ***
 
@@ -5276,7 +5276,7 @@ All grid item DOM elements implement this interface to provide access to their g
 <a id="ddremoveopt"></a>
 ### DDRemoveOpt
 
-Defined in: [types.ts:470](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L470)
+Defined in: [types.ts:475](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L475)
 
 Drag&Drop remove options
 
@@ -5284,8 +5284,8 @@ Drag&Drop remove options
 
 | Property | Type | Description | Defined in |
 | ------ | ------ | ------ | ------ |
-| <a id="accept-3"></a> `accept?` | `string` | class that can be removed (default?: opts.itemClass) | [types.ts:472](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L472) |
-| <a id="decline"></a> `decline?` | `string` | class that cannot be removed (default: 'grid-stack-non-removable') | [types.ts:474](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L474) |
+| <a id="accept-3"></a> `accept?` | `string` | class that can be removed (default?: opts.itemClass) | [types.ts:477](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L477) |
+| <a id="decline"></a> `decline?` | `string` | class that cannot be removed (default: 'grid-stack-non-removable') | [types.ts:479](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L479) |
 
 ***
 
@@ -5298,9 +5298,10 @@ Defined in: [dd-resizable-handle.ts:9](https://github.com/adumesny/gridstack.js/
 
 | Property | Type | Defined in |
 | ------ | ------ | ------ |
-| <a id="move"></a> `move?` | (`event`) => `void` | [dd-resizable-handle.ts:11](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L11) |
-| <a id="start-1"></a> `start?` | (`event`) => `void` | [dd-resizable-handle.ts:10](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L10) |
-| <a id="stop-1"></a> `stop?` | (`event`) => `void` | [dd-resizable-handle.ts:12](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L12) |
+| <a id="element"></a> `element?` | `string` \| `HTMLElement` | [dd-resizable-handle.ts:10](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L10) |
+| <a id="move"></a> `move?` | (`event`) => `void` | [dd-resizable-handle.ts:12](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L12) |
+| <a id="start-1"></a> `start?` | (`event`) => `void` | [dd-resizable-handle.ts:11](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L11) |
+| <a id="stop-1"></a> `stop?` | (`event`) => `void` | [dd-resizable-handle.ts:13](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable-handle.ts#L13) |
 
 ***
 
@@ -5309,21 +5310,28 @@ Defined in: [dd-resizable-handle.ts:9](https://github.com/adumesny/gridstack.js/
 
 Defined in: [dd-resizable.ts:15](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L15)
 
+Drag&Drop resize options
+
+#### Extends
+
+- [`DDResizeOpt`](#ddresizeopt)
+
 #### Properties
 
-| Property | Type | Defined in |
-| ------ | ------ | ------ |
-| <a id="autohide"></a> `autoHide?` | `boolean` | [dd-resizable.ts:16](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L16) |
-| <a id="handles"></a> `handles?` | `string` | [dd-resizable.ts:17](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L17) |
-| <a id="maxheight"></a> `maxHeight?` | `number` | [dd-resizable.ts:18](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L18) |
-| <a id="maxheightmoveup"></a> `maxHeightMoveUp?` | `number` | [dd-resizable.ts:19](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L19) |
-| <a id="maxwidth"></a> `maxWidth?` | `number` | [dd-resizable.ts:20](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L20) |
-| <a id="maxwidthmoveleft"></a> `maxWidthMoveLeft?` | `number` | [dd-resizable.ts:21](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L21) |
-| <a id="minheight"></a> `minHeight?` | `number` | [dd-resizable.ts:22](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L22) |
-| <a id="minwidth"></a> `minWidth?` | `number` | [dd-resizable.ts:23](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L23) |
-| <a id="resize"></a> `resize?` | (`event`, `ui`) => `void` | [dd-resizable.ts:26](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L26) |
-| <a id="start-2"></a> `start?` | (`event`, `ui`) => `void` | [dd-resizable.ts:24](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L24) |
-| <a id="stop-2"></a> `stop?` | (`event`) => `void` | [dd-resizable.ts:25](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L25) |
+| Property | Type | Description | Inherited from | Defined in |
+| ------ | ------ | ------ | ------ | ------ |
+| <a id="autohide"></a> `autoHide?` | `boolean` | do resize handle hide by default until mouse over. default: true on desktop, false on mobile | [`DDResizeOpt`](#ddresizeopt).[`autoHide`](#autohide-1) | [types.ts:461](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L461) |
+| <a id="element-1"></a> `element?` | `string` \| `HTMLElement` | Custom element or query inside the widget node that is used instead of the generated resize handle. | [`DDResizeOpt`](#ddresizeopt).[`element`](#element-2) | [types.ts:471](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L471) |
+| <a id="handles"></a> `handles?` | `string` | sides where you can resize from (ex: 'e, se, s, sw, w') - default 'se' (south-east) Note: it is not recommended to resize from the top sides as weird side effect may occur. | [`DDResizeOpt`](#ddresizeopt).[`handles`](#handles-1) | [types.ts:466](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L466) |
+| <a id="maxheight"></a> `maxHeight?` | `number` | - | - | [dd-resizable.ts:16](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L16) |
+| <a id="maxheightmoveup"></a> `maxHeightMoveUp?` | `number` | - | - | [dd-resizable.ts:17](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L17) |
+| <a id="maxwidth"></a> `maxWidth?` | `number` | - | - | [dd-resizable.ts:18](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L18) |
+| <a id="maxwidthmoveleft"></a> `maxWidthMoveLeft?` | `number` | - | - | [dd-resizable.ts:19](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L19) |
+| <a id="minheight"></a> `minHeight?` | `number` | - | - | [dd-resizable.ts:20](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L20) |
+| <a id="minwidth"></a> `minWidth?` | `number` | - | - | [dd-resizable.ts:21](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L21) |
+| <a id="resize"></a> `resize?` | (`event`, `ui`) => `void` | - | - | [dd-resizable.ts:24](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L24) |
+| <a id="start-2"></a> `start?` | (`event`, `ui`) => `void` | - | - | [dd-resizable.ts:22](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L22) |
+| <a id="stop-2"></a> `stop?` | (`event`) => `void` | - | - | [dd-resizable.ts:23](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L23) |
 
 ***
 
@@ -5334,11 +5342,16 @@ Defined in: [types.ts:459](https://github.com/adumesny/gridstack.js/blob/master/
 
 Drag&Drop resize options
 
+#### Extended by
+
+- [`DDResizableOpt`](#ddresizableopt)
+
 #### Properties
 
 | Property | Type | Description | Defined in |
 | ------ | ------ | ------ | ------ |
-| <a id="autohide-1"></a> `autoHide?` | `boolean` | do resize handle hide by default until mouse over ? - default: true on desktop, false on mobile | [types.ts:461](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L461) |
+| <a id="autohide-1"></a> `autoHide?` | `boolean` | do resize handle hide by default until mouse over. default: true on desktop, false on mobile | [types.ts:461](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L461) |
+| <a id="element-2"></a> `element?` | `string` \| `HTMLElement` | Custom element or query inside the widget node that is used instead of the generated resize handle. | [types.ts:471](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L471) |
 | <a id="handles-1"></a> `handles?` | `string` | sides where you can resize from (ex: 'e, se, s, sw, w') - default 'se' (south-east) Note: it is not recommended to resize from the top sides as weird side effect may occur. | [types.ts:466](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L466) |
 
 ***
@@ -5346,7 +5359,7 @@ Drag&Drop resize options
 <a id="dduidata"></a>
 ### DDUIData
 
-Defined in: [types.ts:507](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L507)
+Defined in: [types.ts:512](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L512)
 
 data that is passed during drag and resizing callbacks
 
@@ -5354,9 +5367,9 @@ data that is passed during drag and resizing callbacks
 
 | Property | Type | Defined in |
 | ------ | ------ | ------ |
-| <a id="draggable-2"></a> `draggable?` | `HTMLElement` | [types.ts:510](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L510) |
-| <a id="position"></a> `position?` | [`Position`](#position-1) | [types.ts:508](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L508) |
-| <a id="size"></a> `size?` | [`Size`](#size-1) | [types.ts:509](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L509) |
+| <a id="draggable-2"></a> `draggable?` | `HTMLElement` | [types.ts:515](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L515) |
+| <a id="position"></a> `position?` | [`Position`](#position-1) | [types.ts:513](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L513) |
+| <a id="size"></a> `size?` | [`Size`](#size-1) | [types.ts:514](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L514) |
 
 ***
 
@@ -5474,7 +5487,7 @@ options used during GridStackEngine.moveNode()
 <a id="gridstacknode-2"></a>
 ### GridStackNode
 
-Defined in: [types.ts:524](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L524)
+Defined in: [types.ts:529](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L529)
 
 internal runtime descriptions describing the widgets in the grid
 
@@ -5488,8 +5501,8 @@ internal runtime descriptions describing the widgets in the grid
 | ------ | ------ | ------ | ------ | ------ |
 | <a id="autoposition"></a> `autoPosition?` | `boolean` | if true then x, y parameters will be ignored and widget will be places on the first available position (default?: false) | [`GridStackWidget`](#gridstackwidget).[`autoPosition`](#autoposition-1) | [types.ts:428](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L428) |
 | <a id="content"></a> `content?` | `string` | html to append inside as content | [`GridStackWidget`](#gridstackwidget).[`content`](#content-1) | [types.ts:446](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L446) |
-| <a id="el-5"></a> `el?` | [`GridItemHTMLElement`](#griditemhtmlelement) | pointer back to HTML element | - | [types.ts:526](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L526) |
-| <a id="grid"></a> `grid?` | [`GridStack`](#gridstack-1) | pointer back to parent Grid instance | - | [types.ts:528](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L528) |
+| <a id="el-5"></a> `el?` | [`GridItemHTMLElement`](#griditemhtmlelement) | pointer back to HTML element | - | [types.ts:531](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L531) |
+| <a id="grid"></a> `grid?` | [`GridStack`](#gridstack-1) | pointer back to parent Grid instance | - | [types.ts:533](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L533) |
 | <a id="h-1"></a> `h?` | `number` | widget dimension height (default?: 1) | [`GridStackWidget`](#gridstackwidget).[`h`](#h-3) | [types.ts:420](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L420) |
 | <a id="id"></a> `id?` | `string` | value for `gs-id` stored on the widget (default?: undefined) | [`GridStackWidget`](#gridstackwidget).[`id`](#id-1) | [types.ts:444](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L444) |
 | <a id="lazyload"></a> `lazyLoad?` | `boolean` | true when widgets are only created when they scroll into view (visible) | [`GridStackWidget`](#gridstackwidget).[`lazyLoad`](#lazyload-2) | [types.ts:448](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L448) |
@@ -5502,9 +5515,9 @@ internal runtime descriptions describing the widgets in the grid
 | <a id="noresize"></a> `noResize?` | `boolean` | prevent direct resizing by the user (default?: undefined = un-constrained) | [`GridStackWidget`](#gridstackwidget).[`noResize`](#noresize-1) | [types.ts:438](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L438) |
 | <a id="resizetocontentparent-1"></a> `resizeToContentParent?` | `string` | local override of GridStack.resizeToContentParent that specify the class to use for the parent (actual) vs child (wanted) height | [`GridStackWidget`](#gridstackwidget).[`resizeToContentParent`](#resizetocontentparent-2) | [types.ts:453](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L453) |
 | <a id="sizetocontent"></a> `sizeToContent?` | `number` \| `boolean` | local (vs grid) override - see GridStackOptions. Note: This also allow you to set a maximum h value (but user changeable during normal resizing) to prevent unlimited content from taking too much space (get scrollbar) | [`GridStackWidget`](#gridstackwidget).[`sizeToContent`](#sizetocontent-2) | [types.ts:451](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L451) |
-| <a id="subgrid"></a> `subGrid?` | [`GridStack`](#gridstack-1) | actual sub-grid instance | - | [types.ts:530](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L530) |
+| <a id="subgrid"></a> `subGrid?` | [`GridStack`](#gridstack-1) | actual sub-grid instance | - | [types.ts:535](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L535) |
 | <a id="subgridopts"></a> `subGridOpts?` | [`GridStackOptions`](#gridstackoptions) | optional nested grid options and list of children, which then turns into actual instance at runtime to get options from | [`GridStackWidget`](#gridstackwidget).[`subGridOpts`](#subgridopts-2) | [types.ts:455](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L455) |
-| <a id="visibleobservable"></a> `visibleObservable?` | `IntersectionObserver` | allow delay creation when visible | - | [types.ts:532](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L532) |
+| <a id="visibleobservable"></a> `visibleObservable?` | `IntersectionObserver` | allow delay creation when visible | - | [types.ts:537](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L537) |
 | <a id="w-2"></a> `w?` | `number` | widget dimension width (default?: 1) | [`GridStackWidget`](#gridstackwidget).[`w`](#w-4) | [types.ts:418](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L418) |
 | <a id="x-2"></a> `x?` | `number` | widget position x (default?: 0) | [`GridStackWidget`](#gridstackwidget).[`x`](#x-4) | [types.ts:414](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L414) |
 | <a id="y-2"></a> `y?` | `number` | widget position y (default?: 0) | [`GridStackWidget`](#gridstackwidget).[`y`](#y-4) | [types.ts:416](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L416) |
@@ -5650,7 +5663,7 @@ Defines the coordinates of an object
 <a id="position-1"></a>
 ### Position
 
-Defined in: [types.ts:500](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L500)
+Defined in: [types.ts:505](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L505)
 
 #### Extended by
 
@@ -5660,15 +5673,15 @@ Defined in: [types.ts:500](https://github.com/adumesny/gridstack.js/blob/master/
 
 | Property | Type | Defined in |
 | ------ | ------ | ------ |
-| <a id="left-1"></a> `left` | `number` | [types.ts:502](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L502) |
-| <a id="top-1"></a> `top` | `number` | [types.ts:501](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L501) |
+| <a id="left-1"></a> `left` | `number` | [types.ts:507](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L507) |
+| <a id="top-1"></a> `top` | `number` | [types.ts:506](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L506) |
 
 ***
 
 <a id="rect-1"></a>
 ### Rect
 
-Defined in: [types.ts:504](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L504)
+Defined in: [types.ts:509](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L509)
 
 #### Extends
 
@@ -5678,10 +5691,10 @@ Defined in: [types.ts:504](https://github.com/adumesny/gridstack.js/blob/master/
 
 | Property | Type | Inherited from | Defined in |
 | ------ | ------ | ------ | ------ |
-| <a id="height"></a> `height` | `number` | [`Size`](#size-1).[`height`](#height-1) | [types.ts:498](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L498) |
-| <a id="left-2"></a> `left` | `number` | [`Position`](#position-1).[`left`](#left-1) | [types.ts:502](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L502) |
-| <a id="top-2"></a> `top` | `number` | [`Position`](#position-1).[`top`](#top-1) | [types.ts:501](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L501) |
-| <a id="width"></a> `width` | `number` | [`Size`](#size-1).[`width`](#width-1) | [types.ts:497](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L497) |
+| <a id="height"></a> `height` | `number` | [`Size`](#size-1).[`height`](#height-1) | [types.ts:503](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L503) |
+| <a id="left-2"></a> `left` | `number` | [`Position`](#position-1).[`left`](#left-1) | [types.ts:507](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L507) |
+| <a id="top-2"></a> `top` | `number` | [`Position`](#position-1).[`top`](#top-1) | [types.ts:506](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L506) |
+| <a id="width"></a> `width` | `number` | [`Size`](#size-1).[`width`](#width-1) | [types.ts:502](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L502) |
 
 ***
 
@@ -5710,7 +5723,7 @@ NOTE: Make sure to include the appropriate CSS (gridstack-extra.css) to support
 <a id="size-1"></a>
 ### Size
 
-Defined in: [types.ts:496](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L496)
+Defined in: [types.ts:501](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L501)
 
 #### Extended by
 
@@ -5720,8 +5733,8 @@ Defined in: [types.ts:496](https://github.com/adumesny/gridstack.js/blob/master/
 
 | Property | Type | Defined in |
 | ------ | ------ | ------ |
-| <a id="height-1"></a> `height` | `number` | [types.ts:498](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L498) |
-| <a id="width-1"></a> `width` | `number` | [types.ts:497](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L497) |
+| <a id="height-1"></a> `height` | `number` | [types.ts:503](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L503) |
+| <a id="width-1"></a> `width` | `number` | [types.ts:502](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L502) |
 
 ## Variables
 
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index e40bc1f0e..40d66a52a 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [12.3.3-dev (TBD)](#1233-dev-tbd)
 - [12.3.3 (2025-08-13)](#1233-2025-08-13)
 - [12.3.2 (2025-08-12)](#1232-2025-08-12)
 - [12.3.1 (2025-08-11)](#1231-2025-08-11)
@@ -134,6 +135,9 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 12.3.3-dev (TBD)
+* feat: [#3104](https://github.com/gridstack/gridstack.js/issues/3104) Custom resize div element target - thank you [Marvin Heilemann](https://github.com/muuvmuuv)
+
 ## 12.3.3 (2025-08-13)
 * fix: [#3139](https://github.com/gridstack/gridstack.js/pull/3139) `Utils:removeInternalForSave()` to skip arrays
 
diff --git a/src/dd-resizable-handle.ts b/src/dd-resizable-handle.ts
index dcb04277e..873606948 100644
--- a/src/dd-resizable-handle.ts
+++ b/src/dd-resizable-handle.ts
@@ -4,12 +4,13 @@
  */
 
 import { isTouch, pointerdown, touchend, touchmove, touchstart } from './dd-touch';
-import { DDResizableOpt, GridItemHTMLElement } from './gridstack';
+import { GridItemHTMLElement } from './gridstack';
 
-export interface DDResizableHandleOpt extends DDResizableOpt {
-  start?: (event) => void;
-  move?: (event) => void;
-  stop?: (event) => void;
+export interface DDResizableHandleOpt {
+  element?: string | HTMLElement;
+  start?: (event: MouseEvent) => void;
+  move?: (event: MouseEvent) => void;
+  stop?: (event: MouseEvent) => void;
 }
 
 export class DDResizableHandle {
diff --git a/src/dd-resizable.ts b/src/dd-resizable.ts
index fe48071ab..9fdf5e0eb 100644
--- a/src/dd-resizable.ts
+++ b/src/dd-resizable.ts
@@ -6,16 +6,13 @@
 import { DDResizableHandle } from './dd-resizable-handle';
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
 import { Utils } from './utils';
-import { DDUIData, GridItemHTMLElement, Rect, Size } from './types';
+import { DDResizeOpt, DDUIData, GridItemHTMLElement, Rect, Size } from './types';
 import { DDManager } from './dd-manager';
 
 // import { GridItemHTMLElement } from './types'; let count = 0; // TEST
 
 // TODO: merge with DDDragOpt
-export interface DDResizableOpt {
-  autoHide?: boolean;
-  handles?: string;
-  element?: string | HTMLElement;
+export interface DDResizableOpt extends DDResizeOpt {
   maxHeight?: number;
   maxHeightMoveUp?: number;
   maxWidth?: number;
@@ -154,16 +151,10 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
     this.handlers = this.option.handles.split(',')
       .map(dir => dir.trim())
       .map(dir => new DDResizableHandle(this.el, dir, {
-        ...this.option,
-        start: (event: MouseEvent) => {
-          this._resizeStart(event);
-        },
-        stop: (event: MouseEvent) => {
-          this._resizeStop(event);
-        },
-        move: (event: MouseEvent) => {
-          this._resizing(event, dir);
-        }
+        element: this.option.element,
+        start: (event: MouseEvent) => this._resizeStart(event),
+        stop: (event: MouseEvent) => this._resizeStop(event),
+        move: (event: MouseEvent) => this._resizing(event, dir)
       }));
     return this;
   }
diff --git a/src/types.ts b/src/types.ts
index 138e23328..a89e56530 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -337,7 +337,7 @@ export interface GridStackOptions {
   /** placeholder default content (default?: '') */
   placeholderText?: string;
 
-  /** allows to override UI resizable options. (default?: { handles: 'se' }) */
+  /** allows to override UI resizable options. default is { handles: 'se', autoHide: true on desktop, false on mobile } */
   resizable?: DDResizeOpt;
 
   /**
@@ -457,7 +457,7 @@ export interface GridStackWidget extends GridStackPosition {
 
 /** Drag&Drop resize options */
 export interface DDResizeOpt {
-  /** do resize handle hide by default until mouse over ? - default: true on desktop, false on mobile*/
+  /** do resize handle hide by default until mouse over. default: true on desktop, false on mobile */
   autoHide?: boolean;
   /**
    * sides where you can resize from (ex: 'e, se, s, sw, w') - default 'se' (south-east)

From ff5fda46d13713813c996742781e1d8378f9438c Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alain.dumesny@broadcom.com>
Date: Sun, 7 Sep 2025 07:26:24 -0700
Subject: [PATCH 06/14] exclude .spec.ts from build

---
 package.json        |  4 ++--
 tsconfig.build.json | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 tsconfig.build.json

diff --git a/package.json b/package.json
index 37cffb954..dddf5dc3e 100644
--- a/package.json
+++ b/package.json
@@ -25,10 +25,10 @@
     }
   ],
   "scripts": {
-    "build": "yarn --no-progress && yarn build:ng && grunt && webpack && tsc --stripInternal && yarn doc",
+    "build": "yarn --no-progress && yarn build:ng && grunt && webpack && tsc --project tsconfig.build.json --stripInternal && yarn doc",
     "build:ng": "cd angular && yarn --no-progress && yarn build lib",
     "w": "webpack",
-    "t": "rm -rf dist/* && grunt && tsc --stripInternal",
+    "t": "rm -rf dist/* && grunt && tsc --project tsconfig.build.json --stripInternal",
     "doc": "doctoc ./README.md && doctoc ./doc/CHANGES.md && node scripts/generate-docs.js",
     "doc:main": "node scripts/generate-docs.js --main-only",
     "doc:angular": "node scripts/generate-docs.js --angular-only",
diff --git a/tsconfig.build.json b/tsconfig.build.json
new file mode 100644
index 000000000..cd5fa72c5
--- /dev/null
+++ b/tsconfig.build.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "skipLibCheck": true
+  },
+  "include": [
+    "./src/**/*.ts"
+  ],
+  "exclude": [
+    "./src/**/*.spec.ts",
+    "./src/**/*.test.ts",
+    "./spec/**/*",
+    "./vitest.setup.ts",
+    "./vitest.config.ts",
+    "./angular/**/*",
+    "./demo/**/*",
+    "./node_modules/**/*"
+  ]
+}

From f065e36c653c3242aea391dbde5e9d20aa476297 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alain.dumesny@broadcom.com>
Date: Sun, 7 Sep 2025 07:42:18 -0700
Subject: [PATCH 07/14] yarn lint fixes

---
 angular/projects/lib/src/lib/base-widget.ts   | 24 +++----
 .../lib/src/lib/gridstack-item.component.ts   |  8 +--
 .../lib/src/lib/gridstack.component.ts        | 64 ++++++++++---------
 .../projects/lib/src/lib/gridstack.module.ts  |  6 +-
 angular/projects/lib/src/lib/types.ts         |  3 +-
 package.json                                  |  2 +-
 src/gridstack.ts                              |  2 +-
 src/utils.ts                                  |  2 +-
 tsconfig.build.json                           |  8 ++-
 9 files changed, 63 insertions(+), 56 deletions(-)

diff --git a/angular/projects/lib/src/lib/base-widget.ts b/angular/projects/lib/src/lib/base-widget.ts
index f903ef373..78f3cb736 100644
--- a/angular/projects/lib/src/lib/base-widget.ts
+++ b/angular/projects/lib/src/lib/base-widget.ts
@@ -5,14 +5,14 @@
 
 /**
  * Abstract base class that all custom widgets should extend.
- * 
+ *
  * This class provides the interface needed for GridstackItemComponent to:
  * - Serialize/deserialize widget data
  * - Save/restore widget state
  * - Integrate with Angular lifecycle
- * 
+ *
  * Extend this class when creating custom widgets for dynamic grids.
- * 
+ *
  * @example
  * ```typescript
  * @Component({
@@ -21,7 +21,7 @@
  * })
  * export class MyCustomWidget extends BaseWidget {
  *   @Input() data: string = '';
- *   
+ *
  *   serialize() {
  *     return { data: this.data };
  *   }
@@ -46,12 +46,12 @@ export abstract class BaseWidget {
 
   /**
    * Override this method to return serializable data for this widget.
-   * 
+   *
    * Return an object with properties that map to your component's @Input() fields.
    * The selector is handled automatically, so only include component-specific data.
-   * 
+   *
    * @returns Object containing serializable component data
-   * 
+   *
    * @example
    * ```typescript
    * serialize() {
@@ -67,17 +67,17 @@ export abstract class BaseWidget {
 
   /**
    * Override this method to handle widget restoration from saved data.
-   * 
+   *
    * Use this for complex initialization that goes beyond simple @Input() mapping.
    * The default implementation automatically assigns input data to component properties.
-   * 
+   *
    * @param w The saved widget data including input properties
-   * 
+   *
    * @example
    * ```typescript
    * deserialize(w: NgGridStackWidget) {
    *   super.deserialize(w); // Call parent for basic setup
-   *   
+   *
    *   // Custom initialization logic
    *   if (w.input?.complexData) {
    *     this.processComplexData(w.input.complexData);
@@ -92,4 +92,4 @@ export abstract class BaseWidget {
 
     if (w.input)  Object.assign(this, w.input);
   }
- }
+}
diff --git a/angular/projects/lib/src/lib/gridstack-item.component.ts b/angular/projects/lib/src/lib/gridstack-item.component.ts
index 18653a917..1d2675565 100644
--- a/angular/projects/lib/src/lib/gridstack-item.component.ts
+++ b/angular/projects/lib/src/lib/gridstack-item.component.ts
@@ -18,15 +18,15 @@ export interface GridItemCompHTMLElement extends GridItemHTMLElement {
 
 /**
  * Angular component wrapper for individual GridStack items.
- * 
+ *
  * This component represents a single grid item and handles:
  * - Dynamic content creation and management
  * - Integration with parent GridStack component
  * - Component lifecycle and cleanup
  * - Widget options and configuration
- * 
+ *
  * Use in combination with GridstackComponent for the parent grid.
- * 
+ *
  * @example
  * ```html
  * <gridstack>
@@ -76,7 +76,7 @@ export class GridstackItemComponent implements OnDestroy {
   /**
    * Grid item configuration options.
    * Defines position, size, and behavior of this grid item.
-   * 
+   *
    * @example
    * ```typescript
    * itemOptions: GridStackNode = {
diff --git a/angular/projects/lib/src/lib/gridstack.component.ts b/angular/projects/lib/src/lib/gridstack.component.ts
index f129aab40..dd0eb90b5 100644
--- a/angular/projects/lib/src/lib/gridstack.component.ts
+++ b/angular/projects/lib/src/lib/gridstack.component.ts
@@ -4,8 +4,8 @@
  */
 
 import {
-    AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input,
-    OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef
+  AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input,
+  OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef
 } from '@angular/core';
 import { NgIf } from '@angular/common';
 import { Subscription } from 'rxjs';
@@ -45,19 +45,19 @@ export interface GridCompHTMLElement extends GridHTMLElement {
  * Mapping of selector strings to Angular component types.
  * Used for dynamic component creation based on widget selectors.
  */
-export type SelectorToType = {[key: string]: Type<Object>};
+export type SelectorToType = {[key: string]: Type<object>};
 
 /**
  * Angular component wrapper for GridStack.
- * 
+ *
  * This component provides Angular integration for GridStack grids, handling:
  * - Grid initialization and lifecycle
  * - Dynamic component creation and management
  * - Event binding and emission
  * - Integration with Angular change detection
- * 
+ *
  * Use in combination with GridstackItemComponent for individual grid items.
- * 
+ *
  * @example
  * ```html
  * <gridstack [options]="gridOptions" (change)="onGridChange($event)">
@@ -99,7 +99,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   /**
    * Grid configuration options.
    * Can be set before grid initialization or updated after grid is created.
-   * 
+   *
    * @example
    * ```typescript
    * gridOptions: GridStackOptions = {
@@ -122,7 +122,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   /**
    * Controls whether empty content should be displayed.
    * Set to true to show ng-content with 'empty-content' selector when grid has no items.
-   * 
+   *
    * @example
    * ```html
    * <gridstack [isEmpty]="gridItems.length === 0">
@@ -134,52 +134,52 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
 
   /**
    * GridStack event emitters for Angular integration.
-   * 
+   *
    * These provide Angular-style event handling for GridStack events.
    * Alternatively, use `this.grid.on('event1 event2', callback)` for multiple events.
-   * 
+   *
    * Note: 'CB' suffix prevents conflicts with native DOM events.
-   * 
+   *
    * @example
    * ```html
    * <gridstack (changeCB)="onGridChange($event)" (droppedCB)="onItemDropped($event)">
    * </gridstack>
    * ```
    */
-  
+
   /** Emitted when widgets are added to the grid */
   @Output() public addedCB = new EventEmitter<nodesCB>();
-  
+
   /** Emitted when grid layout changes */
   @Output() public changeCB = new EventEmitter<nodesCB>();
-  
+
   /** Emitted when grid is disabled */
   @Output() public disableCB = new EventEmitter<eventCB>();
-  
+
   /** Emitted during widget drag operations */
   @Output() public dragCB = new EventEmitter<elementCB>();
-  
+
   /** Emitted when widget drag starts */
   @Output() public dragStartCB = new EventEmitter<elementCB>();
-  
+
   /** Emitted when widget drag stops */
   @Output() public dragStopCB = new EventEmitter<elementCB>();
-  
+
   /** Emitted when widget is dropped */
   @Output() public droppedCB = new EventEmitter<droppedCB>();
-  
+
   /** Emitted when grid is enabled */
   @Output() public enableCB = new EventEmitter<eventCB>();
-  
+
   /** Emitted when widgets are removed from the grid */
   @Output() public removedCB = new EventEmitter<nodesCB>();
-  
+
   /** Emitted during widget resize operations */
   @Output() public resizeCB = new EventEmitter<elementCB>();
-  
+
   /** Emitted when widget resize starts */
   @Output() public resizeStartCB = new EventEmitter<elementCB>();
-  
+
   /** Emitted when widget resize stops */
   @Output() public resizeStopCB = new EventEmitter<elementCB>();
 
@@ -192,7 +192,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   /**
    * Get the underlying GridStack instance.
    * Use this to access GridStack API methods directly.
-   * 
+   *
    * @example
    * ```typescript
    * this.gridComponent.grid.addWidget({x: 0, y: 0, w: 2, h: 1});
@@ -208,10 +208,10 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
 
   /**
    * Mapping of component selectors to their types for dynamic creation.
-   * 
+   *
    * This enables dynamic component instantiation from string selectors.
    * Angular doesn't provide public access to this mapping, so we maintain our own.
-   * 
+   *
    * @example
    * ```typescript
    * GridstackComponent.addComponentToSelectorType([MyWidgetComponent]);
@@ -220,9 +220,9 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   public static selectorToType: SelectorToType = {};
   /**
    * Register a list of Angular components for dynamic creation.
-   * 
+   *
    * @param typeList Array of component types to register
-   * 
+   *
    * @example
    * ```typescript
    * GridstackComponent.addComponentToSelectorType([
@@ -231,16 +231,17 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
    * ]);
    * ```
    */
-  public static addComponentToSelectorType(typeList: Array<Type<Object>>) {
+  public static addComponentToSelectorType(typeList: Array<Type<object>>) {
     typeList.forEach(type => GridstackComponent.selectorToType[ GridstackComponent.getSelector(type) ] = type);
   }
   /**
    * Extract the selector string from an Angular component type.
-   * 
+   *
    * @param type The component type to get selector from
    * @returns The component's selector string
    */
-  public static getSelector(type: Type<Object>): string {
+  public static getSelector(type: Type<object>): string {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     return reflectComponentType(type)!.selector;
   }
 
@@ -367,6 +368,7 @@ export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, n:
       const gridItemComp = (host.parentElement as GridItemCompHTMLElement)?._gridItemComp;
       if (!gridItemComp) return;
       // check if gridItem has a child component with 'container' exposed to create under..
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const container = (gridItemComp.childWidget as any)?.container || gridItemComp.container;
       const gridRef = container?.createComponent(GridstackComponent);
       const grid = gridRef?.instance;
diff --git a/angular/projects/lib/src/lib/gridstack.module.ts b/angular/projects/lib/src/lib/gridstack.module.ts
index 1add6e9f2..77171043c 100644
--- a/angular/projects/lib/src/lib/gridstack.module.ts
+++ b/angular/projects/lib/src/lib/gridstack.module.ts
@@ -10,10 +10,10 @@ import { GridstackComponent } from "./gridstack.component";
 
 /**
  * @deprecated Use GridstackComponent and GridstackItemComponent as standalone components instead.
- * 
+ *
  * This NgModule is provided for backward compatibility but is no longer the recommended approach.
  * Import components directly in your standalone components or use the new Angular module structure.
- * 
+ *
  * @example
  * ```typescript
  * // Preferred approach - standalone components
@@ -23,7 +23,7 @@ import { GridstackComponent } from "./gridstack.component";
  *   template: '<gridstack></gridstack>'
  * })
  * export class AppComponent {}
- * 
+ *
  * // Legacy approach (deprecated)
  * @NgModule({
  *   imports: [GridstackModule]
diff --git a/angular/projects/lib/src/lib/types.ts b/angular/projects/lib/src/lib/types.ts
index a02d6b08c..cdbd8b7d8 100644
--- a/angular/projects/lib/src/lib/types.ts
+++ b/angular/projects/lib/src/lib/types.ts
@@ -41,7 +41,7 @@ export interface NgGridStackOptions extends GridStackOptions {
 /**
  * Type for component input data serialization.
  * Maps @Input() property names to their values for widget persistence.
- * 
+ *
  * @example
  * ```typescript
  * const inputs: NgCompInputs = {
@@ -51,4 +51,5 @@ export interface NgGridStackOptions extends GridStackOptions {
  * };
  * ```
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type NgCompInputs = {[key: string]: any};
diff --git a/package.json b/package.json
index dddf5dc3e..8fa4a64a4 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:headed": "playwright test --headed",
-    "lint": "tsc --noEmit && eslint src/*.ts",
+    "lint": "tsc --project tsconfig.build.json --noEmit && eslint src/*.ts angular/projects/lib/src/**/*.ts",
     "reset": "rm -rf dist node_modules",
     "prepublishOnly": "yarn build"
   },
diff --git a/src/gridstack.ts b/src/gridstack.ts
index 842e4ec80..30c8595d2 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -957,7 +957,7 @@ export class GridStack {
     // https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
     return forBreakpoint && this.opts.columnOpts?.breakpointForWindow ? window.innerWidth : (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);
   }
-  
+
   /** checks for dynamic column count for our current size, returning true if changed */
   protected checkDynamicColumn(): boolean {
     const resp = this.opts.columnOpts;
diff --git a/src/utils.ts b/src/utils.ts
index 2969e4810..d3bc41dad 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
  */
 
-import { GridStackElement, GridStackNode, GridStackOptions, numberOrString, GridStackPosition, GridStackWidget } from './types';
+import { GridStackElement, GridStackNode, numberOrString, GridStackPosition, GridStackWidget } from './types';
 
 export interface HeightData {
   h: number;
diff --git a/tsconfig.build.json b/tsconfig.build.json
index cd5fa72c5..5607a3d35 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -4,7 +4,8 @@
     "skipLibCheck": true
   },
   "include": [
-    "./src/**/*.ts"
+    "./src/**/*.ts",
+    "./angular/projects/lib/src/**/*.ts"
   ],
   "exclude": [
     "./src/**/*.spec.ts",
@@ -12,7 +13,10 @@
     "./spec/**/*",
     "./vitest.setup.ts",
     "./vitest.config.ts",
-    "./angular/**/*",
+    "./angular/projects/lib/src/**/*.spec.ts",
+    "./angular/projects/lib/src/test.ts",
+    "./angular/projects/demo/**/*",
+    "./angular/node_modules/**/*",
     "./demo/**/*",
     "./node_modules/**/*"
   ]

From 17a4fe3bb4c2456cbc709795a1ede53ff523236b Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alain.dumesny@broadcom.com>
Date: Sun, 7 Sep 2025 08:43:38 -0700
Subject: [PATCH 08/14] dd code coverage

---
 angular/doc/api/base-widget.md         |   4 +-
 angular/doc/api/gridstack.component.md |  38 +-
 angular/doc/api/types.md               |   2 +-
 spec/dd-base-impl-spec.ts              |  99 +++++
 spec/dd-droppable-spec.ts              | 311 +++++++++++++++
 spec/dd-manager-spec.ts                |  63 +++
 spec/dd-simple-integration-spec.ts     | 248 ++++++++++++
 spec/dd-touch-spec.ts                  | 515 +++++++++++++++++++++++++
 webpack.config.js                      |   9 +-
 9 files changed, 1265 insertions(+), 24 deletions(-)
 create mode 100644 spec/dd-base-impl-spec.ts
 create mode 100644 spec/dd-droppable-spec.ts
 create mode 100644 spec/dd-manager-spec.ts
 create mode 100644 spec/dd-simple-integration-spec.ts
 create mode 100644 spec/dd-touch-spec.ts

diff --git a/angular/doc/api/base-widget.md b/angular/doc/api/base-widget.md
index 8a81d03a5..e71850e59 100644
--- a/angular/doc/api/base-widget.md
+++ b/angular/doc/api/base-widget.md
@@ -80,8 +80,8 @@ The default implementation automatically assigns input data to component propert
 
 ```typescript
 deserialize(w: NgGridStackWidget) {
-  super.deserialize(w); // Call parent for basic setup
-  
+  super.deserialize(w); // Call parent for basic setup
+
   // Custom initialization logic
   if (w.input?.complexData) {
     this.processComplexData(w.input.complexData);
diff --git a/angular/doc/api/gridstack.component.md b/angular/doc/api/gridstack.component.md
index c642e0257..28263105b 100644
--- a/angular/doc/api/gridstack.component.md
+++ b/angular/doc/api/gridstack.component.md
@@ -127,7 +127,7 @@ this.gridComponent.grid.addWidget({x: 0, y: 0, w: 2, h: 1});
 new GridstackComponent(elementRef): GridstackComponent;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:252](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L252)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:253](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L253)
 
 ###### Parameters
 
@@ -155,7 +155,7 @@ Register a list of Angular components for dynamic creation.
 
 | Parameter | Type | Description |
 | ------ | ------ | ------ |
-| `typeList` | `Type`\<`Object`\>[] | Array of component types to register |
+| `typeList` | `Type`\<`object`\>[] | Array of component types to register |
 
 ###### Returns
 
@@ -184,7 +184,7 @@ Extract the selector string from an Angular component type.
 
 | Parameter | Type | Description |
 | ------ | ------ | ------ |
-| `type` | `Type`\<`Object`\> | The component type to get selector from |
+| `type` | `Type`\<`object`\> | The component type to get selector from |
 
 ###### Returns
 
@@ -198,7 +198,7 @@ The component's selector string
 ngOnInit(): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:266](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L266)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:267](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L267)
 
 A callback method that is invoked immediately after the
 default change detector has checked the directive's
@@ -222,7 +222,7 @@ OnInit.ngOnInit
 ngAfterContentInit(): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:276](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L276)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:277](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L277)
 
 wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first)
 
@@ -242,7 +242,7 @@ AfterContentInit.ngAfterContentInit
 ngOnDestroy(): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:284](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L284)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:285](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L285)
 
 A callback method that performs custom clean-up, invoked immediately
 before a directive, pipe, or service instance is destroyed.
@@ -263,7 +263,7 @@ OnDestroy.ngOnDestroy
 updateAll(): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:298](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L298)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:299](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L299)
 
 called when the TEMPLATE (not recommended) list of items changes - get a list of nodes and
 update the layout accordingly (which will take care of adding/removing items changed by Angular)
@@ -278,7 +278,7 @@ update the layout accordingly (which will take care of adding/removing items cha
 checkEmpty(): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:309](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L309)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:310](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L310)
 
 check if the grid is empty, if so show alternative content
 
@@ -292,7 +292,7 @@ check if the grid is empty, if so show alternative content
 protected hookEvents(grid?): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:315](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L315)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:316](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L316)
 
 get all known events as easy to use Outputs for convenience
 
@@ -312,7 +312,7 @@ get all known events as easy to use Outputs for convenience
 protected unhookEvents(grid?): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:342](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L342)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:343](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L343)
 
 ###### Parameters
 
@@ -345,11 +345,11 @@ Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:342](https://gi
 | <a id="resizestopcb"></a> `resizeStopCB` | `public` | `EventEmitter`\<[`elementCB`](#elementcb)\> | `undefined` | Emitted when widget resize stops | [angular/projects/lib/src/lib/gridstack.component.ts:184](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L184) |
 | <a id="ref"></a> `ref` | `public` | \| `undefined` \| `ComponentRef`\<[`GridstackComponent`](#gridstackcomponent)\> | `undefined` | Component reference for dynamic component removal. Used internally when this component is created dynamically. | [angular/projects/lib/src/lib/gridstack.component.ts:207](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L207) |
 | <a id="selectortotype-1"></a> `selectorToType` | `static` | [`SelectorToType`](#selectortotype) | `{}` | Mapping of component selectors to their types for dynamic creation. This enables dynamic component instantiation from string selectors. Angular doesn't provide public access to this mapping, so we maintain our own. **Example** `GridstackComponent.addComponentToSelectorType([MyWidgetComponent]);` | [angular/projects/lib/src/lib/gridstack.component.ts:220](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L220) |
-| <a id="_options"></a> `_options?` | `protected` | `GridStackOptions` | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:247](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L247) |
-| <a id="_grid"></a> `_grid?` | `protected` | `GridStack` | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:248](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L248) |
-| <a id="_sub"></a> `_sub` | `protected` | `undefined` \| `Subscription` | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:249](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L249) |
-| <a id="loaded"></a> `loaded?` | `protected` | `boolean` | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:250](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L250) |
-| <a id="elementref"></a> `elementRef` | `readonly` | `ElementRef`\<[`GridCompHTMLElement`](#gridcomphtmlelement)\> | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:252](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L252) |
+| <a id="_options"></a> `_options?` | `protected` | `GridStackOptions` | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:248](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L248) |
+| <a id="_grid"></a> `_grid?` | `protected` | `GridStack` | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:249](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L249) |
+| <a id="_sub"></a> `_sub` | `protected` | `undefined` \| `Subscription` | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:250](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L250) |
+| <a id="loaded"></a> `loaded?` | `protected` | `boolean` | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:251](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L251) |
+| <a id="elementref"></a> `elementRef` | `readonly` | `ElementRef`\<[`GridCompHTMLElement`](#gridcomphtmlelement)\> | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:253](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L253) |
 
 ## Interfaces
 
@@ -3095,7 +3095,7 @@ function gsCreateNgComponents(
    isGrid): undefined | HTMLElement;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:353](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L353)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:354](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L354)
 
 can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip)
 
@@ -3120,7 +3120,7 @@ can be used when a new item needs to be created, which we do as a Angular compon
 function gsSaveAdditionalNgInfo(n, w): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:437](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L437)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:439](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L439)
 
 called for each item in the grid - check if additional information needs to be saved.
 Note: since this is options minus gridstack protected members using Utils.removeInternalForSave(),
@@ -3146,7 +3146,7 @@ using BaseWidget.serialize()
 function gsUpdateNgComponents(n): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:456](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L456)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:458](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L458)
 
 track when widgeta re updated (rather than created) to make sure we de-serialize them as well
 
@@ -3296,5 +3296,5 @@ Used for dynamic component creation based on widget selectors.
 #### Index Signature
 
 ```ts
-[key: string]: Type<Object>
+[key: string]: Type<object>
 ```
diff --git a/angular/doc/api/types.md b/angular/doc/api/types.md
index 0615a08dd..65322fde1 100644
--- a/angular/doc/api/types.md
+++ b/angular/doc/api/types.md
@@ -68,7 +68,7 @@ Supports Angular-specific widget definitions and nested grids.
 type NgCompInputs = object;
 ```
 
-Defined in: [angular/projects/lib/src/lib/types.ts:54](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/types.ts#L54)
+Defined in: [angular/projects/lib/src/lib/types.ts:55](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/types.ts#L55)
 
 Type for component input data serialization.
 Maps @Input() property names to their values for widget persistence.
diff --git a/spec/dd-base-impl-spec.ts b/spec/dd-base-impl-spec.ts
new file mode 100644
index 000000000..e56bacca7
--- /dev/null
+++ b/spec/dd-base-impl-spec.ts
@@ -0,0 +1,99 @@
+import { DDBaseImplement } from '../src/dd-base-impl';
+
+describe('DDBaseImplement', () => {
+  let baseImpl: DDBaseImplement;
+
+  beforeEach(() => {
+    baseImpl = new DDBaseImplement();
+  });
+
+  describe('constructor', () => {
+    it('should create instance with undefined disabled state', () => {
+      expect(baseImpl.disabled).toBeUndefined();
+    });
+  });
+
+  describe('enable/disable', () => {
+    it('should enable when disabled', () => {
+      baseImpl.disable();
+      expect(baseImpl.disabled).toBe(true);
+      
+      baseImpl.enable();
+      
+      expect(baseImpl.disabled).toBe(false);
+    });
+
+    it('should disable when enabled', () => {
+      baseImpl.enable();
+      expect(baseImpl.disabled).toBe(false);
+      
+      baseImpl.disable();
+      
+      expect(baseImpl.disabled).toBe(true);
+    });
+
+    it('should return undefined (no chaining)', () => {
+      expect(baseImpl.enable()).toBeUndefined();
+      expect(baseImpl.disable()).toBeUndefined();
+    });
+  });
+
+  describe('destroy', () => {
+    it('should clean up event register', () => {
+      baseImpl.enable();
+      baseImpl.on('test', () => {});
+      
+      baseImpl.destroy();
+      
+      // Should not throw when trying to trigger events after destroy
+      expect(() => baseImpl.triggerEvent('test', new Event('test'))).not.toThrow();
+    });
+  });
+
+  describe('event handling', () => {
+    beforeEach(() => {
+      baseImpl.enable(); // Need to enable for events to trigger
+    });
+
+    it('should handle on/off events', () => {
+      const callback = vi.fn();
+      
+      baseImpl.on('test', callback);
+      baseImpl.triggerEvent('test', new Event('test'));
+      
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it('should remove event listeners with off', () => {
+      const callback = vi.fn();
+      
+      baseImpl.on('test', callback);
+      baseImpl.off('test');
+      baseImpl.triggerEvent('test', new Event('test'));
+      
+      expect(callback).not.toHaveBeenCalled();
+    });
+
+    it('should only keep last listener for same event', () => {
+      const callback1 = vi.fn();
+      const callback2 = vi.fn();
+      
+      baseImpl.on('test', callback1);
+      baseImpl.on('test', callback2); // This overwrites callback1
+      baseImpl.triggerEvent('test', new Event('test'));
+      
+      expect(callback1).not.toHaveBeenCalled();
+      expect(callback2).toHaveBeenCalled();
+    });
+
+    it('should not trigger events when disabled', () => {
+      const callback = vi.fn();
+      
+      baseImpl.on('test', callback);
+      baseImpl.disable();
+      baseImpl.triggerEvent('test', new Event('test'));
+      
+      expect(callback).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/dd-droppable-spec.ts b/spec/dd-droppable-spec.ts
new file mode 100644
index 000000000..59fd0ecbe
--- /dev/null
+++ b/spec/dd-droppable-spec.ts
@@ -0,0 +1,311 @@
+import { DDDroppable } from '../src/dd-droppable';
+import { DDManager } from '../src/dd-manager';
+
+describe('DDDroppable', () => {
+  let element: HTMLElement;
+  let droppable: DDDroppable;
+
+  beforeEach(() => {
+    // Create a test element
+    element = document.createElement('div');
+    element.id = 'test-droppable';
+    element.style.width = '100px';
+    element.style.height = '100px';
+    document.body.appendChild(element);
+  });
+
+  afterEach(() => {
+    // Clean up
+    if (droppable) {
+      droppable.destroy();
+    }
+    if (element.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+    // Clear DDManager state
+    delete DDManager.dragElement;
+    delete DDManager.dropElement;
+  });
+
+  describe('constructor', () => {
+    it('should create a droppable instance with default options', () => {
+      droppable = new DDDroppable(element);
+      
+      expect(droppable).toBeDefined();
+      expect(droppable.el).toBe(element);
+      expect(droppable.option).toEqual({});
+      expect(element.classList.contains('ui-droppable')).toBe(true);
+    });
+
+    it('should create a droppable instance with custom options', () => {
+      const options = {
+        accept: '.draggable-item',
+        drop: vi.fn(),
+        over: vi.fn(),
+        out: vi.fn()
+      };
+      
+      droppable = new DDDroppable(element, options);
+      
+      expect(droppable.option).toBe(options);
+      expect(droppable.accept).toBeDefined();
+    });
+  });
+
+  describe('enable/disable', () => {
+    beforeEach(() => {
+      droppable = new DDDroppable(element);
+    });
+
+    it('should enable droppable functionality', () => {
+      droppable.disable();
+      expect(droppable.disabled).toBe(true);
+      expect(element.classList.contains('ui-droppable-disabled')).toBe(true);
+      
+      droppable.enable();
+      expect(droppable.disabled).toBe(false);
+      expect(element.classList.contains('ui-droppable')).toBe(true);
+      expect(element.classList.contains('ui-droppable-disabled')).toBe(false);
+    });
+
+    it('should disable droppable functionality', () => {
+      expect(droppable.disabled).toBe(false);
+      
+      droppable.disable();
+      expect(droppable.disabled).toBe(true);
+      expect(element.classList.contains('ui-droppable')).toBe(false);
+      expect(element.classList.contains('ui-droppable-disabled')).toBe(true);
+    });
+
+    it('should not enable if already enabled', () => {
+      const spy = vi.spyOn(element.classList, 'add');
+      droppable.enable(); // Already enabled
+      expect(spy).not.toHaveBeenCalled();
+    });
+
+    it('should not disable if already disabled', () => {
+      droppable.disable();
+      const spy = vi.spyOn(element.classList, 'remove');
+      droppable.disable(); // Already disabled
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('destroy', () => {
+    it('should clean up droppable instance', () => {
+      droppable = new DDDroppable(element);
+      
+      droppable.destroy();
+      
+      expect(element.classList.contains('ui-droppable')).toBe(false);
+      expect(element.classList.contains('ui-droppable-disabled')).toBe(false);
+      expect(droppable.disabled).toBe(true);
+    });
+  });
+
+  describe('updateOption', () => {
+    beforeEach(() => {
+      droppable = new DDDroppable(element);
+    });
+
+    it('should update options', () => {
+      const newOptions = {
+        accept: '.new-class',
+        drop: vi.fn()
+      };
+      
+      const result = droppable.updateOption(newOptions);
+      
+      expect(result).toBe(droppable);
+      expect(droppable.option.accept).toBe('.new-class');
+      expect(droppable.option.drop).toBe(newOptions.drop);
+    });
+
+    it('should update accept function when accept is a string', () => {
+      droppable.updateOption({ accept: '.test-class' });
+      
+      expect(droppable.accept).toBeDefined();
+      
+      // Test the accept function
+      const testEl = document.createElement('div');
+      testEl.classList.add('test-class');
+      expect(droppable.accept(testEl)).toBe(true);
+      
+      const otherEl = document.createElement('div');
+      expect(droppable.accept(otherEl)).toBe(false);
+    });
+
+    it('should update accept function when accept is a function', () => {
+      const acceptFn = vi.fn().mockReturnValue(true);
+      droppable.updateOption({ accept: acceptFn });
+      
+      expect(droppable.accept).toBe(acceptFn);
+    });
+  });
+
+  describe('mouse events', () => {
+    beforeEach(() => {
+      droppable = new DDDroppable(element, {
+        over: vi.fn(),
+        out: vi.fn(),
+        drop: vi.fn()
+      });
+
+      // Create a mock draggable element
+      const mockDraggable = {
+        el: document.createElement('div'),
+        ui: vi.fn().mockReturnValue({
+          helper: document.createElement('div'),
+          position: { left: 0, top: 0 }
+        })
+      };
+      DDManager.dragElement = mockDraggable as any;
+    });
+
+    describe('_mouseEnter', () => {
+      it('should handle mouse enter when dragging', () => {
+        const event = new MouseEvent('mouseenter', { bubbles: true });
+        const spy = vi.spyOn(event, 'preventDefault');
+        
+        droppable._mouseEnter(event);
+        
+        expect(spy).toHaveBeenCalled();
+        expect(DDManager.dropElement).toBe(droppable);
+        expect(element.classList.contains('ui-droppable-over')).toBe(true);
+        expect(droppable.option.over).toHaveBeenCalled();
+      });
+
+      it('should not handle mouse enter when not dragging', () => {
+        delete DDManager.dragElement;
+        const event = new MouseEvent('mouseenter', { bubbles: true });
+        
+        droppable._mouseEnter(event);
+        
+        expect(DDManager.dropElement).toBeUndefined();
+        expect(element.classList.contains('ui-droppable-over')).toBe(false);
+      });
+
+      it('should not handle mouse enter when element cannot be dropped', () => {
+        droppable.updateOption({ accept: '.not-matching' });
+        const event = new MouseEvent('mouseenter', { bubbles: true });
+        
+        droppable._mouseEnter(event);
+        
+        expect(DDManager.dropElement).toBeUndefined();
+        expect(element.classList.contains('ui-droppable-over')).toBe(false);
+      });
+    });
+
+    describe('_mouseLeave', () => {
+      beforeEach(() => {
+        DDManager.dropElement = droppable;
+        element.classList.add('ui-droppable-over');
+      });
+
+      it('should handle mouse leave when this is the current drop element', () => {
+        const event = new MouseEvent('mouseleave', { bubbles: true });
+        const spy = vi.spyOn(event, 'preventDefault');
+        
+        droppable._mouseLeave(event);
+        
+        expect(spy).toHaveBeenCalled();
+        expect(DDManager.dropElement).toBeUndefined();
+        expect(droppable.option.out).toHaveBeenCalled();
+      });
+
+      it('should not handle mouse leave when not the current drop element', () => {
+        DDManager.dropElement = null as any;
+        const event = new MouseEvent('mouseleave', { bubbles: true });
+        
+        droppable._mouseLeave(event);
+        
+        expect(droppable.option.out).not.toHaveBeenCalled();
+      });
+
+      it('should not handle mouse leave when no drag element', () => {
+        delete DDManager.dragElement;
+        const event = new MouseEvent('mouseleave', { bubbles: true });
+        
+        droppable._mouseLeave(event);
+        
+        expect(droppable.option.out).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('drop', () => {
+      it('should handle drop event', () => {
+        const event = new MouseEvent('mouseup', { bubbles: true });
+        const spy = vi.spyOn(event, 'preventDefault');
+        
+        droppable.drop(event);
+        
+        expect(spy).toHaveBeenCalled();
+        expect(droppable.option.drop).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('_canDrop', () => {
+    beforeEach(() => {
+      droppable = new DDDroppable(element);
+    });
+
+    it('should return true when no accept filter is set', () => {
+      const testEl = document.createElement('div');
+      expect(droppable._canDrop(testEl)).toBe(true);
+    });
+
+    it('should return false when element is null', () => {
+      expect(droppable._canDrop(null as any)).toBeFalsy();
+    });
+
+    it('should use accept function when set', () => {
+      const acceptFn = vi.fn().mockReturnValue(false);
+      droppable.accept = acceptFn;
+      
+      const testEl = document.createElement('div');
+      const result = droppable._canDrop(testEl);
+      
+      expect(acceptFn).toHaveBeenCalledWith(testEl);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('event handling', () => {
+    beforeEach(() => {
+      droppable = new DDDroppable(element);
+    });
+
+    it('should support on/off event methods', () => {
+      const callback = vi.fn();
+      
+      droppable.on('drop', callback);
+      droppable.off('drop');
+      
+      // These methods should exist and not throw
+      expect(typeof droppable.on).toBe('function');
+      expect(typeof droppable.off).toBe('function');
+    });
+  });
+
+  describe('_ui helper', () => {
+    it('should create UI data object', () => {
+      droppable = new DDDroppable(element);
+      
+      const dragEl = document.createElement('div');
+      const mockDraggable = {
+        el: dragEl,
+        ui: vi.fn().mockReturnValue({
+          helper: dragEl,
+          position: { left: 0, top: 0 }
+        })
+      };
+      
+      const result = droppable._ui(mockDraggable as any);
+      
+      expect(result.draggable).toBe(dragEl);
+      expect(result.helper).toBe(dragEl);
+      expect(result.position).toEqual({ left: 0, top: 0 });
+    });
+  });
+});
diff --git a/spec/dd-manager-spec.ts b/spec/dd-manager-spec.ts
new file mode 100644
index 000000000..32b58e476
--- /dev/null
+++ b/spec/dd-manager-spec.ts
@@ -0,0 +1,63 @@
+import { DDManager } from '../src/dd-manager';
+
+describe('DDManager', () => {
+  afterEach(() => {
+    // Clean up DDManager state
+    delete DDManager.dragElement;
+    delete DDManager.dropElement;
+    delete DDManager.pauseDrag;
+  });
+
+  describe('static properties', () => {
+    it('should have dragElement property', () => {
+      expect(DDManager.dragElement).toBeUndefined();
+      
+      const mockDragElement = {} as any;
+      DDManager.dragElement = mockDragElement;
+      
+      expect(DDManager.dragElement).toBe(mockDragElement);
+    });
+
+    it('should have dropElement property', () => {
+      expect(DDManager.dropElement).toBeUndefined();
+      
+      const mockDropElement = {} as any;
+      DDManager.dropElement = mockDropElement;
+      
+      expect(DDManager.dropElement).toBe(mockDropElement);
+    });
+
+    it('should have pauseDrag property', () => {
+      expect(DDManager.pauseDrag).toBeUndefined();
+      
+      DDManager.pauseDrag = true;
+      expect(DDManager.pauseDrag).toBe(true);
+      
+      DDManager.pauseDrag = 500;
+      expect(DDManager.pauseDrag).toBe(500);
+    });
+  });
+
+  describe('state management', () => {
+    it('should allow setting and clearing drag element', () => {
+      const mockElement = { id: 'test' } as any;
+      
+      DDManager.dragElement = mockElement;
+      expect(DDManager.dragElement).toBe(mockElement);
+      
+      delete DDManager.dragElement;
+      expect(DDManager.dragElement).toBeUndefined();
+    });
+
+    it('should allow setting and clearing drop element', () => {
+      const mockElement = { id: 'test' } as any;
+      
+      DDManager.dropElement = mockElement;
+      expect(DDManager.dropElement).toBe(mockElement);
+      
+      delete DDManager.dropElement;
+      expect(DDManager.dropElement).toBeUndefined();
+    });
+  });
+});
+
diff --git a/spec/dd-simple-integration-spec.ts b/spec/dd-simple-integration-spec.ts
new file mode 100644
index 000000000..7af0cfa31
--- /dev/null
+++ b/spec/dd-simple-integration-spec.ts
@@ -0,0 +1,248 @@
+import { DDDraggable } from '../src/dd-draggable';
+import { DDDroppable } from '../src/dd-droppable';
+import { DDResizable } from '../src/dd-resizable';
+import { DDElement } from '../src/dd-element';
+import { GridItemHTMLElement } from '../src/types';
+
+describe('DD Integration Tests', () => {
+  let element: GridItemHTMLElement;
+
+  beforeEach(() => {
+    element = document.createElement('div') as GridItemHTMLElement;
+    element.style.width = '100px';
+    element.style.height = '100px';
+    element.style.position = 'absolute';
+    document.body.appendChild(element);
+    
+    // Mock gridstackNode
+    element.gridstackNode = {
+      id: 'test-node',
+      x: 0,
+      y: 0,
+      w: 1,
+      h: 1
+    } as any;
+  });
+
+  afterEach(() => {
+    if (element.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+  });
+
+  describe('DDElement', () => {
+    it('should create DDElement instance', () => {
+      const ddElement = DDElement.init(element);
+      
+      expect(ddElement).toBeDefined();
+      expect(ddElement.el).toBe(element);
+    });
+
+    it('should return same instance on multiple init calls', () => {
+      const ddElement1 = DDElement.init(element);
+      const ddElement2 = DDElement.init(element);
+      
+      expect(ddElement1).toBe(ddElement2);
+    });
+
+    it('should setup draggable', () => {
+      const ddElement = DDElement.init(element);
+      
+      ddElement.setupDraggable({ handle: '.drag-handle' });
+      
+      expect(ddElement.ddDraggable).toBeDefined();
+    });
+
+    it('should setup droppable', () => {
+      const ddElement = DDElement.init(element);
+      
+      ddElement.setupDroppable({ accept: '.draggable' });
+      
+      expect(ddElement.ddDroppable).toBeDefined();
+    });
+
+    it('should setup resizable with default handles', () => {
+      const ddElement = DDElement.init(element);
+      
+      ddElement.setupResizable({ handles: 'se' });
+      
+      expect(ddElement.ddResizable).toBeDefined();
+    });
+
+    it('should clean up components', () => {
+      const ddElement = DDElement.init(element);
+      
+      ddElement.setupDraggable({});
+      ddElement.setupDroppable({});
+      ddElement.setupResizable({ handles: 'se' });
+      
+      expect(ddElement.ddDraggable).toBeDefined();
+      expect(ddElement.ddDroppable).toBeDefined();
+      expect(ddElement.ddResizable).toBeDefined();
+      
+      ddElement.cleanDraggable();
+      ddElement.cleanDroppable();
+      ddElement.cleanResizable();
+      
+      expect(ddElement.ddDraggable).toBeUndefined();
+      expect(ddElement.ddDroppable).toBeUndefined();
+      expect(ddElement.ddResizable).toBeUndefined();
+    });
+  });
+
+  describe('DDDraggable basic functionality', () => {
+    it('should create draggable instance', () => {
+      const draggable = new DDDraggable(element);
+      
+      expect(draggable).toBeDefined();
+      expect(draggable.el).toBe(element);
+      expect(draggable.disabled).toBe(false);
+      
+      draggable.destroy();
+    });
+
+    it('should enable/disable draggable', () => {
+      const draggable = new DDDraggable(element);
+      
+      draggable.disable();
+      expect(draggable.disabled).toBe(true);
+      
+      draggable.enable();
+      expect(draggable.disabled).toBe(false);
+      
+      draggable.destroy();
+    });
+
+    it('should update options', () => {
+      const draggable = new DDDraggable(element);
+      
+      const result = draggable.updateOption({ handle: '.new-handle' });
+      
+      expect(result).toBe(draggable);
+      expect(draggable.option.handle).toBe('.new-handle');
+      
+      draggable.destroy();
+    });
+  });
+
+  describe('DDDroppable basic functionality', () => {
+    it('should create droppable instance', () => {
+      const droppable = new DDDroppable(element);
+      
+      expect(droppable).toBeDefined();
+      expect(droppable.el).toBe(element);
+      expect(droppable.disabled).toBe(false);
+      expect(element.classList.contains('ui-droppable')).toBe(true);
+      
+      droppable.destroy();
+    });
+
+    it('should enable/disable droppable', () => {
+      const droppable = new DDDroppable(element);
+      
+      droppable.disable();
+      expect(droppable.disabled).toBe(true);
+      expect(element.classList.contains('ui-droppable-disabled')).toBe(true);
+      
+      droppable.enable();
+      expect(droppable.disabled).toBe(false);
+      expect(element.classList.contains('ui-droppable')).toBe(true);
+      
+      droppable.destroy();
+    });
+
+    it('should update options', () => {
+      const droppable = new DDDroppable(element);
+      
+      const result = droppable.updateOption({ accept: '.new-class' });
+      
+      expect(result).toBe(droppable);
+      expect(droppable.option.accept).toBe('.new-class');
+      
+      droppable.destroy();
+    });
+
+    it('should handle accept function', () => {
+      const droppable = new DDDroppable(element);
+      
+      droppable.updateOption({ accept: '.test-class' });
+      
+      const testEl = document.createElement('div');
+      testEl.classList.add('test-class');
+      expect(droppable._canDrop(testEl)).toBe(true);
+      
+      const otherEl = document.createElement('div');
+      expect(droppable._canDrop(otherEl)).toBe(false);
+      
+      droppable.destroy();
+    });
+  });
+
+  describe('DDResizable basic functionality', () => {
+    it('should create resizable instance with handles', () => {
+      const resizable = new DDResizable(element, { handles: 'se' });
+      
+      expect(resizable).toBeDefined();
+      expect(resizable.el).toBe(element);
+      expect(resizable.disabled).toBe(false);
+      // Note: ui-resizable class is added by enable() which is called in constructor
+      // but the class might not be added immediately in test environment
+      
+      resizable.destroy();
+    });
+
+    it('should enable/disable resizable', () => {
+      const resizable = new DDResizable(element, { handles: 'se' });
+      
+      resizable.disable();
+      expect(resizable.disabled).toBe(true);
+      expect(element.classList.contains('ui-resizable-disabled')).toBe(true);
+      
+      resizable.enable();
+      expect(resizable.disabled).toBe(false);
+      expect(element.classList.contains('ui-resizable-disabled')).toBe(false);
+      
+      resizable.destroy();
+    });
+
+    it('should update options', () => {
+      const resizable = new DDResizable(element, { handles: 'se' });
+      
+      const result = resizable.updateOption({ handles: 'n,s,e,w' });
+      
+      expect(result).toBe(resizable);
+      expect(resizable.option.handles).toBe('n,s,e,w');
+      
+      resizable.destroy();
+    });
+
+    it('should create resize handles', () => {
+      const resizable = new DDResizable(element, { handles: 'se,nw' });
+      
+      const seHandle = element.querySelector('.ui-resizable-se');
+      const nwHandle = element.querySelector('.ui-resizable-nw');
+      
+      expect(seHandle).toBeTruthy();
+      expect(nwHandle).toBeTruthy();
+      
+      resizable.destroy();
+    });
+  });
+
+  describe('Event handling', () => {
+    it('should support event listeners on DDElement', () => {
+      const ddElement = DDElement.init(element);
+      const callback = vi.fn();
+      
+      ddElement.setupDraggable({});
+      ddElement.on('dragstart', callback);
+      ddElement.off('dragstart');
+      
+      // Should not throw
+      expect(typeof ddElement.on).toBe('function');
+      expect(typeof ddElement.off).toBe('function');
+      
+      ddElement.cleanDraggable();
+    });
+  });
+});
diff --git a/spec/dd-touch-spec.ts b/spec/dd-touch-spec.ts
new file mode 100644
index 000000000..1e7cec99e
--- /dev/null
+++ b/spec/dd-touch-spec.ts
@@ -0,0 +1,515 @@
+import { 
+  isTouch, 
+  touchstart, 
+  touchmove, 
+  touchend, 
+  pointerdown, 
+  pointerenter, 
+  pointerleave 
+} from '../src/dd-touch';
+import { DDManager } from '../src/dd-manager';
+import { Utils } from '../src/utils';
+
+// Mock Utils.simulateMouseEvent
+vi.mock('../src/utils', () => ({
+  Utils: {
+    simulateMouseEvent: vi.fn()
+  }
+}));
+
+// Mock DDManager
+vi.mock('../src/dd-manager', () => ({
+  DDManager: {
+    dragElement: null
+  }
+}));
+
+// Helper function to create mock TouchList
+function createMockTouchList(touches: Touch[]): TouchList {
+  const touchList = {
+    length: touches.length,
+    item: (index: number) => touches[index] || null,
+    ...touches
+  };
+  return touchList as TouchList;
+}
+
+// Helper function to create mock TouchEvent
+function createMockTouchEvent(type: string, touches: Touch[], options: Partial<TouchEvent> = {}): TouchEvent {
+  const touchList = createMockTouchList(touches);
+  const changedTouchList = options.changedTouches ? 
+    createMockTouchList(options.changedTouches as Touch[]) : touchList;
+  
+  const mockEvent = {
+    touches: touchList,
+    changedTouches: changedTouchList,
+    targetTouches: touchList,
+    preventDefault: vi.fn(),
+    stopPropagation: vi.fn(),
+    cancelable: true,
+    type,
+    target: document.createElement('div'),
+    currentTarget: document.createElement('div'),
+    bubbles: true,
+    composed: false,
+    defaultPrevented: false,
+    eventPhase: Event.AT_TARGET,
+    isTrusted: true,
+    timeStamp: Date.now(),
+    altKey: false,
+    ctrlKey: false,
+    metaKey: false,
+    shiftKey: false,
+    detail: 0,
+    view: window,
+    which: 0,
+    ...options
+  };
+  return mockEvent as TouchEvent;
+}
+
+// Helper function to create mock PointerEvent
+function createMockPointerEvent(type: string, pointerType: string, options: Partial<PointerEvent> = {}): PointerEvent {
+  const mockEvent = {
+    pointerId: 1,
+    pointerType,
+    target: document.createElement('div'),
+    preventDefault: vi.fn(),
+    stopPropagation: vi.fn(),
+    cancelable: true,
+    type,
+    currentTarget: document.createElement('div'),
+    bubbles: true,
+    composed: false,
+    defaultPrevented: false,
+    eventPhase: Event.AT_TARGET,
+    isTrusted: true,
+    timeStamp: Date.now(),
+    clientX: 100,
+    clientY: 200,
+    pageX: 100,
+    pageY: 200,
+    screenX: 100,
+    screenY: 200,
+    button: 0,
+    buttons: 1,
+    ctrlKey: false,
+    shiftKey: false,
+    altKey: false,
+    metaKey: false,
+    width: 1,
+    height: 1,
+    pressure: 0.5,
+    tangentialPressure: 0,
+    tiltX: 0,
+    tiltY: 0,
+    twist: 0,
+    isPrimary: true,
+    detail: 0,
+    view: window,
+    which: 0,
+    getCoalescedEvents: vi.fn(() => []),
+    getPredictedEvents: vi.fn(() => []),
+    movementX: 0,
+    movementY: 0,
+    offsetX: 0,
+    offsetY: 0,
+    relatedTarget: null,
+    ...options
+  };
+  return mockEvent as PointerEvent;
+}
+
+describe('dd-touch', () => {
+  let mockUtils: any;
+  let mockDDManager: any;
+
+  beforeEach(() => {
+    mockUtils = vi.mocked(Utils);
+    mockDDManager = vi.mocked(DDManager);
+    
+    // Reset mocks
+    mockUtils.simulateMouseEvent.mockClear();
+    mockDDManager.dragElement = null;
+    
+    // Mock window.clearTimeout and setTimeout
+    vi.spyOn(window, 'clearTimeout');
+    vi.spyOn(window, 'setTimeout').mockImplementation((callback: Function, delay: number) => {
+      return setTimeout(callback, delay) as any;
+    });
+    
+    // Reset DDTouch state by calling touchend to reset touchHandled flag
+    // This is a workaround since we can't access DDTouch directly
+    const resetTouch = {
+      pageX: 0, pageY: 0, clientX: 0, clientY: 0, screenX: 0, screenY: 0,
+      identifier: 0, target: document.createElement('div'),
+      radiusX: 0, radiusY: 0, rotationAngle: 0, force: 0
+    } as Touch;
+    const resetEvent = createMockTouchEvent('touchend', [], { changedTouches: [resetTouch] });
+    
+    // Call touchstart then touchend to reset state
+    const startEvent = createMockTouchEvent('touchstart', [resetTouch]);
+    touchstart(startEvent);
+    touchend(resetEvent);
+    
+    // Clear any calls made during reset
+    mockUtils.simulateMouseEvent.mockClear();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('isTouch detection', () => {
+    it('should be a boolean value', () => {
+      expect(typeof isTouch).toBe('boolean');
+    });
+
+    it('should detect touch support in current environment', () => {
+      // Since we're in jsdom, isTouch should be false unless touch APIs are mocked
+      // This test validates that the detection logic runs without errors
+      expect(isTouch).toBeDefined();
+    });
+  });
+
+  describe('touchstart', () => {
+    let mockTouch: Touch;
+
+    beforeEach(() => {
+      mockTouch = {
+        pageX: 100,
+        pageY: 200,
+        clientX: 100,
+        clientY: 200,
+        screenX: 100,
+        screenY: 200,
+        identifier: 1,
+        target: document.createElement('div'),
+        radiusX: 10,
+        radiusY: 10,
+        rotationAngle: 0,
+        force: 1
+      } as Touch;
+    });
+
+    it('should simulate mousedown for single touch', () => {
+      const mockTouchEvent = createMockTouchEvent('touchstart', [mockTouch]);
+
+      touchstart(mockTouchEvent);
+
+      expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockTouch, 'mousedown');
+    });
+
+    it('should prevent default on cancelable events', () => {
+      const mockTouchEvent = createMockTouchEvent('touchstart', [mockTouch], { cancelable: true });
+
+      touchstart(mockTouchEvent);
+
+      expect(mockTouchEvent.preventDefault).toHaveBeenCalled();
+    });
+
+    it('should not prevent default on non-cancelable events', () => {
+      const mockTouchEvent = createMockTouchEvent('touchstart', [mockTouch], { cancelable: false });
+
+      touchstart(mockTouchEvent);
+
+      expect(mockTouchEvent.preventDefault).not.toHaveBeenCalled();
+    });
+
+    it('should ignore multi-touch events', () => {
+      const secondTouch = { ...mockTouch, identifier: 2 };
+      const mockTouchEvent = createMockTouchEvent('touchstart', [mockTouch, secondTouch]);
+
+      touchstart(mockTouchEvent);
+
+      expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('touchmove', () => {
+    let mockTouch: Touch;
+
+    beforeEach(() => {
+      mockTouch = {
+        pageX: 150,
+        pageY: 250,
+        clientX: 150,
+        clientY: 250,
+        screenX: 150,
+        screenY: 250,
+        identifier: 1,
+        target: document.createElement('div'),
+        radiusX: 10,
+        radiusY: 10,
+        rotationAngle: 0,
+        force: 1
+      } as Touch;
+    });
+
+    it('should simulate mousemove for single touch when touch is handled', () => {
+      // First call touchstart to set DDTouch.touchHandled = true
+      const startEvent = createMockTouchEvent('touchstart', [mockTouch]);
+      touchstart(startEvent);
+      
+      mockUtils.simulateMouseEvent.mockClear(); // Clear previous calls
+      
+      const mockTouchEvent = createMockTouchEvent('touchmove', [mockTouch]);
+      touchmove(mockTouchEvent);
+
+      expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockTouch, 'mousemove');
+    });
+
+    it('should ignore touchmove when touch is not handled', () => {
+      // Don't call touchstart first, so DDTouch.touchHandled remains false
+      const mockTouchEvent = createMockTouchEvent('touchmove', [mockTouch]);
+
+      touchmove(mockTouchEvent);
+
+      expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+    });
+
+    it('should ignore multi-touch events', () => {
+      // First call touchstart to set DDTouch.touchHandled = true
+      const startEvent = createMockTouchEvent('touchstart', [mockTouch]);
+      touchstart(startEvent);
+      
+      mockUtils.simulateMouseEvent.mockClear(); // Clear previous calls
+      
+      const secondTouch = { ...mockTouch, identifier: 2 };
+      const mockTouchEvent = createMockTouchEvent('touchmove', [mockTouch, secondTouch]);
+
+      touchmove(mockTouchEvent);
+
+      expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('touchend', () => {
+    let mockTouch: Touch;
+
+    beforeEach(() => {
+      mockTouch = {
+        pageX: 200,
+        pageY: 300,
+        clientX: 200,
+        clientY: 300,
+        screenX: 200,
+        screenY: 300,
+        identifier: 1,
+        target: document.createElement('div'),
+        radiusX: 10,
+        radiusY: 10,
+        rotationAngle: 0,
+        force: 1
+      } as Touch;
+    });
+
+    it('should simulate mouseup when touch is handled', () => {
+      // First call touchstart to set DDTouch.touchHandled = true
+      const startEvent = createMockTouchEvent('touchstart', [mockTouch]);
+      touchstart(startEvent);
+      
+      mockUtils.simulateMouseEvent.mockClear(); // Clear previous calls
+      
+      const mockTouchEvent = createMockTouchEvent('touchend', [], { changedTouches: [mockTouch] });
+      touchend(mockTouchEvent);
+
+      expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockTouch, 'mouseup');
+    });
+
+    it('should simulate click when not dragging', () => {
+      // First call touchstart to set DDTouch.touchHandled = true
+      const startEvent = createMockTouchEvent('touchstart', [mockTouch]);
+      touchstart(startEvent);
+      
+      mockUtils.simulateMouseEvent.mockClear(); // Clear previous calls
+      mockDDManager.dragElement = null; // Not dragging
+      
+      const mockTouchEvent = createMockTouchEvent('touchend', [], { changedTouches: [mockTouch] });
+      touchend(mockTouchEvent);
+
+      expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockTouch, 'mouseup');
+      expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockTouch, 'click');
+    });
+
+    it('should not simulate click when dragging', () => {
+      // First call touchstart to set DDTouch.touchHandled = true
+      const startEvent = createMockTouchEvent('touchstart', [mockTouch]);
+      touchstart(startEvent);
+      
+      mockUtils.simulateMouseEvent.mockClear(); // Clear previous calls
+      mockDDManager.dragElement = {}; // Dragging
+      
+      const mockTouchEvent = createMockTouchEvent('touchend', [], { changedTouches: [mockTouch] });
+      touchend(mockTouchEvent);
+
+      expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockTouch, 'mouseup');
+      expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalledWith(mockTouch, 'click');
+    });
+
+    it('should ignore touchend when touch is not handled', () => {
+      // Don't call touchstart first, so DDTouch.touchHandled remains false
+      const mockTouchEvent = createMockTouchEvent('touchend', [], { changedTouches: [mockTouch] });
+      touchend(mockTouchEvent);
+
+      expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+    });
+
+    it('should clear pointerLeaveTimeout when it exists', () => {
+      // First set up a pointerleave timeout
+      mockDDManager.dragElement = {};
+      const pointerEvent = createMockPointerEvent('pointerleave', 'touch');
+      
+      let timeoutId: number;
+      vi.mocked(window.setTimeout).mockImplementation((callback: Function, delay: number) => {
+        timeoutId = 123;
+        return timeoutId as any;
+      });
+      
+      pointerleave(pointerEvent);
+      
+      // Now call touchstart and touchend to trigger the timeout clearing
+      const startEvent = createMockTouchEvent('touchstart', [mockTouch]);
+      touchstart(startEvent);
+      
+      mockUtils.simulateMouseEvent.mockClear();
+      
+      const mockTouchEvent = createMockTouchEvent('touchend', [], { changedTouches: [mockTouch] });
+      touchend(mockTouchEvent);
+
+      expect(window.clearTimeout).toHaveBeenCalledWith(123);
+    });
+  });
+
+  describe('pointerdown', () => {
+    let mockElement: HTMLElement;
+
+    beforeEach(() => {
+      mockElement = document.createElement('div');
+      mockElement.releasePointerCapture = vi.fn();
+    });
+
+    it('should release pointer capture for touch events', () => {
+      const mockPointerEvent = createMockPointerEvent('pointerdown', 'touch', { target: mockElement });
+
+      pointerdown(mockPointerEvent);
+
+      expect(mockElement.releasePointerCapture).toHaveBeenCalledWith(1);
+    });
+
+    it('should release pointer capture for pen events', () => {
+      const mockPointerEvent = createMockPointerEvent('pointerdown', 'pen', { target: mockElement });
+
+      pointerdown(mockPointerEvent);
+
+      expect(mockElement.releasePointerCapture).toHaveBeenCalledWith(1);
+    });
+
+    it('should not release pointer capture for mouse events', () => {
+      const mockPointerEvent = createMockPointerEvent('pointerdown', 'mouse', { target: mockElement });
+
+      pointerdown(mockPointerEvent);
+
+      expect(mockElement.releasePointerCapture).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('pointerenter', () => {
+    it('should ignore pointerenter when no drag element', () => {
+      mockDDManager.dragElement = null;
+      const mockPointerEvent = createMockPointerEvent('pointerenter', 'touch');
+
+      pointerenter(mockPointerEvent);
+
+      expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+    });
+
+    it('should ignore pointerenter for mouse events', () => {
+      mockDDManager.dragElement = {};
+      const mockPointerEvent = createMockPointerEvent('pointerenter', 'mouse');
+
+      pointerenter(mockPointerEvent);
+
+      expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+    });
+
+    it('should simulate mouseenter for touch events when dragging', () => {
+      mockDDManager.dragElement = {};
+      const mockPointerEvent = createMockPointerEvent('pointerenter', 'touch');
+
+      pointerenter(mockPointerEvent);
+
+      expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockPointerEvent, 'mouseenter');
+    });
+
+    it('should simulate mouseenter for pen events when dragging', () => {
+      mockDDManager.dragElement = {};
+      const mockPointerEvent = createMockPointerEvent('pointerenter', 'pen');
+
+      pointerenter(mockPointerEvent);
+
+      expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockPointerEvent, 'mouseenter');
+    });
+
+    it('should prevent default on cancelable pointer events', () => {
+      mockDDManager.dragElement = {};
+      const mockPointerEvent = createMockPointerEvent('pointerenter', 'touch', { cancelable: true });
+
+      pointerenter(mockPointerEvent);
+
+      expect(mockPointerEvent.preventDefault).toHaveBeenCalled();
+    });
+
+    it('should not prevent default on non-cancelable pointer events', () => {
+      mockDDManager.dragElement = {};
+      const mockPointerEvent = createMockPointerEvent('pointerenter', 'touch', { cancelable: false });
+
+      pointerenter(mockPointerEvent);
+
+      expect(mockPointerEvent.preventDefault).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('pointerleave', () => {
+    it('should ignore pointerleave when no drag element', () => {
+      mockDDManager.dragElement = null;
+      const mockPointerEvent = createMockPointerEvent('pointerleave', 'touch');
+
+      pointerleave(mockPointerEvent);
+
+      expect(window.setTimeout).not.toHaveBeenCalled();
+      expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+    });
+
+    it('should ignore pointerleave for mouse events', () => {
+      mockDDManager.dragElement = {};
+      const mockPointerEvent = createMockPointerEvent('pointerleave', 'mouse');
+
+      pointerleave(mockPointerEvent);
+
+      expect(window.setTimeout).not.toHaveBeenCalled();
+      expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+    });
+
+    it('should delay mouseleave simulation for touch events when dragging', () => {
+      mockDDManager.dragElement = {};
+      const mockPointerEvent = createMockPointerEvent('pointerleave', 'touch');
+      
+      // Mock setTimeout to capture the callback
+      let timeoutCallback: Function;
+      vi.mocked(window.setTimeout).mockImplementation((callback: Function, delay: number) => {
+        timeoutCallback = callback;
+        return 123 as any;
+      });
+
+      pointerleave(mockPointerEvent);
+
+      expect(window.setTimeout).toHaveBeenCalledWith(expect.any(Function), 10);
+      
+      // Execute the timeout callback
+      timeoutCallback!();
+      
+      expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockPointerEvent, 'mouseleave');
+    });
+  });
+});
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index b6c859340..02623896f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -11,8 +11,13 @@ module.exports = {
     rules: [
       {
         test: /\.ts$/,
-        use: 'ts-loader',
-        exclude: ['/node_modules/'],
+        use: {
+          loader: 'ts-loader',
+          options: {
+            configFile: 'tsconfig.build.json'
+          }
+        },
+        exclude: ['/node_modules/', '/spec/'],
       },
     ],
   },

From 07b27324ef8105c574711dd448e937526787bf79 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 9 Sep 2025 21:29:08 +0000
Subject: [PATCH 09/14] Bump vite from 5.4.19 to 5.4.20 in /react

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.4.19 to 5.4.20.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v5.4.20/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.4.20/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-version: 5.4.20
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 react/package.json |   2 +-
 react/yarn.lock    | 143 +++------------------------------------------
 2 files changed, 8 insertions(+), 137 deletions(-)

diff --git a/react/package.json b/react/package.json
index f76ad2dac..9595ed6ca 100644
--- a/react/package.json
+++ b/react/package.json
@@ -32,6 +32,6 @@
     "jsdom": "^26.1.0",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.19"
+    "vite": "^5.4.20"
   }
 }
diff --git a/react/yarn.lock b/react/yarn.lock
index cf2d504ac..7d51743c9 100644
--- a/react/yarn.lock
+++ b/react/yarn.lock
@@ -380,41 +380,21 @@
   resolved "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.29.tgz#5a40109a1ab5f84d6fd8fc928b19f367cbe7e7b1"
   integrity sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==
 
-"@rollup/rollup-android-arm-eabi@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.5.tgz#e0f5350845090ca09690fe4a472717f3b8aae225"
-  integrity sha512-SU5cvamg0Eyu/F+kLeMXS7GoahL+OoizlclVFX3l5Ql6yNlywJJ0OuqTzUx0v+aHhPHEB/56CT06GQrRrGNYww==
-
 "@rollup/rollup-android-arm-eabi@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.46.1.tgz#c659481d5b15054d4636b3dd0c2f50ab3083d839"
   integrity sha512-oENme6QxtLCqjChRUUo3S6X8hjCXnWmJWnedD7VbGML5GUtaOtAyx+fEEXnBXVf0CBZApMQU0Idwi0FmyxzQhw==
 
-"@rollup/rollup-android-arm64@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.5.tgz#08270faef6747e2716d3e978a8bbf479f75fb19a"
-  integrity sha512-S4pit5BP6E5R5C8S6tgU/drvgjtYW76FBuG6+ibG3tMvlD1h9LHVF9KmlmaUBQ8Obou7hEyS+0w+IR/VtxwNMQ==
-
 "@rollup/rollup-android-arm64@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.46.1.tgz#7e05c3c0bf6a79ee6b40ab5e778679742f06815d"
   integrity sha512-OikvNT3qYTl9+4qQ9Bpn6+XHM+ogtFadRLuT2EXiFQMiNkXFLQfNVppi5o28wvYdHL2s3fM0D/MZJ8UkNFZWsw==
 
-"@rollup/rollup-darwin-arm64@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.5.tgz#691671133b350661328d42c8dbdedd56dfb97dfd"
-  integrity sha512-250ZGg4ipTL0TGvLlfACkIxS9+KLtIbn7BCZjsZj88zSg2Lvu3Xdw6dhAhfe/FjjXPVNCtcSp+WZjVsD3a/Zlw==
-
 "@rollup/rollup-darwin-arm64@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.46.1.tgz#b190fbd0274fbbd4d257ff0b3d68f0885c454e0d"
   integrity sha512-EFYNNGij2WllnzljQDQnlFTXzSJw87cpAs4TVBAWLdkvic5Uh5tISrIL6NRcxoh/b2EFBG/TK8hgRrGx94zD4A==
 
-"@rollup/rollup-darwin-x64@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.5.tgz#b2ec52a1615f24b1cd40bc8906ae31af81e8a342"
-  integrity sha512-D8brJEFg5D+QxFcW6jYANu+Rr9SlKtTenmsX5hOSzNYVrK5oLAEMTUgKWYJP+wdKyCdeSwnapLsn+OVRFycuQg==
-
 "@rollup/rollup-darwin-x64@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.46.1.tgz#a4df7fa06ac318b66a6aa66d6f1e0a58fef58cd3"
@@ -430,41 +410,21 @@
   resolved "https://registry.npmmirror.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.46.1.tgz#db42c46c0263b2562e2ba5c2e00e318646f2b24c"
   integrity sha512-8vu9c02F16heTqpvo3yeiu7Vi1REDEC/yES/dIfq3tSXe6mLndiwvYr3AAvd1tMNUqE9yeGYa5w7PRbI5QUV+w==
 
-"@rollup/rollup-linux-arm-gnueabihf@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.5.tgz#217f01f304808920680bd269002df38e25d9205f"
-  integrity sha512-PNqXYmdNFyWNg0ma5LdY8wP+eQfdvyaBAojAXgO7/gs0Q/6TQJVXAXe8gwW9URjbS0YAammur0fynYGiWsKlXw==
-
 "@rollup/rollup-linux-arm-gnueabihf@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.46.1.tgz#88ca443ad42c70555978b000c6d1dd925fb3203b"
   integrity sha512-K4ncpWl7sQuyp6rWiGUvb6Q18ba8mzM0rjWJ5JgYKlIXAau1db7hZnR0ldJvqKWWJDxqzSLwGUhA4jp+KqgDtQ==
 
-"@rollup/rollup-linux-arm-musleabihf@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.5.tgz#93ac1c5a1e389f4482a2edaeec41fcffee54a930"
-  integrity sha512-kSSCZOKz3HqlrEuwKd9TYv7vxPYD77vHSUvM2y0YaTGnFc8AdI5TTQRrM1yIp3tXCKrSL9A7JLoILjtad5t8pQ==
-
 "@rollup/rollup-linux-arm-musleabihf@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.46.1.tgz#36106fe103d32c2a97583ebadcfb28dc63988bda"
   integrity sha512-YykPnXsjUjmXE6j6k2QBBGAn1YsJUix7pYaPLK3RVE0bQL2jfdbfykPxfF8AgBlqtYbfEnYHmLXNa6QETjdOjQ==
 
-"@rollup/rollup-linux-arm64-gnu@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.5.tgz#a7f146787d6041fecc4ecdf1aa72234661ca94a4"
-  integrity sha512-oTXQeJHRbOnwRnRffb6bmqmUugz0glXaPyspp4gbQOPVApdpRrY/j7KP3lr7M8kTfQTyrBUzFjj5EuHAhqH4/w==
-
 "@rollup/rollup-linux-arm64-gnu@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.46.1.tgz#00c28bc9210dcfbb5e7fa8e52fd827fb570afe26"
   integrity sha512-kKvqBGbZ8i9pCGW3a1FH3HNIVg49dXXTsChGFsHGXQaVJPLA4f/O+XmTxfklhccxdF5FefUn2hvkoGJH0ScWOA==
 
-"@rollup/rollup-linux-arm64-musl@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.5.tgz#6a37236189648e678bd564d6e8ca798f42cf42c5"
-  integrity sha512-qnOTIIs6tIGFKCHdhYitgC2XQ2X25InIbZFor5wh+mALH84qnFHvc+vmWUpyX97B0hNvwNUL4B+MB8vJvH65Fw==
-
 "@rollup/rollup-linux-arm64-musl@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.46.1.tgz#45a13486b5523235eb87b349e7ca5a0bb85a5b0e"
@@ -475,21 +435,11 @@
   resolved "https://registry.npmmirror.com/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.46.1.tgz#b8edd99f072cd652acbbddc1c539b1ac4254381d"
   integrity sha512-O8CwgSBo6ewPpktFfSDgB6SJN9XDcPSvuwxfejiddbIC/hn9Tg6Ai0f0eYDf3XvB/+PIWzOQL+7+TZoB8p9Yuw==
 
-"@rollup/rollup-linux-powerpc64le-gnu@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.5.tgz#5661420dc463bec31ecb2d17d113de858cfcfe2d"
-  integrity sha512-TMYu+DUdNlgBXING13rHSfUc3Ky5nLPbWs4bFnT+R6Vu3OvXkTkixvvBKk8uO4MT5Ab6lC3U7x8S8El2q5o56w==
-
 "@rollup/rollup-linux-ppc64-gnu@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.46.1.tgz#0ec72a4f8b7a86b13c0f6b7666ed1d3b6e8e67cc"
   integrity sha512-JnCfFVEKeq6G3h3z8e60kAp8Rd7QVnWCtPm7cxx+5OtP80g/3nmPtfdCXbVl063e3KsRnGSKDHUQMydmzc/wBA==
 
-"@rollup/rollup-linux-riscv64-gnu@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.5.tgz#cb00342b7432bdef723aa606281de2f522d6dcf7"
-  integrity sha512-PTQq1Kz22ZRvuhr3uURH+U/Q/a0pbxJoICGSprNLAoBEkyD3Sh9qP5I0Asn0y0wejXQBbsVMRZRxlbGFD9OK4A==
-
 "@rollup/rollup-linux-riscv64-gnu@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.46.1.tgz#99f06928528fb58addd12e50827e1a0269c1cca8"
@@ -500,61 +450,31 @@
   resolved "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.46.1.tgz#3c14aba63b4170fe3d9d0b6ad98361366170590e"
   integrity sha512-CvvgNl2hrZrTR9jXK1ye0Go0HQRT6ohQdDfWR47/KFKiLd5oN5T14jRdUVGF4tnsN8y9oSfMOqH6RuHh+ck8+w==
 
-"@rollup/rollup-linux-s390x-gnu@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.5.tgz#0708889674dccecccd28e2befccf791e0767fcb7"
-  integrity sha512-bR5nCojtpuMss6TDEmf/jnBnzlo+6n1UhgwqUvRoe4VIotC7FG1IKkyJbwsT7JDsF2jxR+NTnuOwiGv0hLyDoQ==
-
 "@rollup/rollup-linux-s390x-gnu@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.46.1.tgz#34c647a823dcdca0f749a2bdcbde4fb131f37a4c"
   integrity sha512-x7ANt2VOg2565oGHJ6rIuuAon+A8sfe1IeUx25IKqi49OjSr/K3awoNqr9gCwGEJo9OuXlOn+H2p1VJKx1psxA==
 
-"@rollup/rollup-linux-x64-gnu@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.5.tgz#a135b040b21582e91cfed2267ccfc7d589e1dbc6"
-  integrity sha512-N0jPPhHjGShcB9/XXZQWuWBKZQnC1F36Ce3sDqWpujsGjDz/CQtOL9LgTrJ+rJC8MJeesMWrMWVLKKNR/tMOCA==
-
 "@rollup/rollup-linux-x64-gnu@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.46.1.tgz#3991010418c005e8791c415e7c2072b247157710"
   integrity sha512-9OADZYryz/7E8/qt0vnaHQgmia2Y0wrjSSn1V/uL+zw/i7NUhxbX4cHXdEQ7dnJgzYDS81d8+tf6nbIdRFZQoQ==
 
-"@rollup/rollup-linux-x64-musl@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.5.tgz#88395a81a3ab7ee3dc8dc31a73ff62ed3185f34d"
-  integrity sha512-uBa2e28ohzNNwjr6Uxm4XyaA1M/8aTgfF2T7UIlElLaeXkgpmIJ2EitVNQxjO9xLLLy60YqAgKn/AqSpCUkE9g==
-
 "@rollup/rollup-linux-x64-musl@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.46.1.tgz#f3943e5f284f40ffbcf4a14da9ee2e43d303b462"
   integrity sha512-NuvSCbXEKY+NGWHyivzbjSVJi68Xfq1VnIvGmsuXs6TCtveeoDRKutI5vf2ntmNnVq64Q4zInet0UDQ+yMB6tA==
 
-"@rollup/rollup-win32-arm64-msvc@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.5.tgz#12ee49233b1125f2c1da38392f63b1dbb0c31bba"
-  integrity sha512-RXT8S1HP8AFN/Kr3tg4fuYrNxZ/pZf1HemC5Tsddc6HzgGnJm0+Lh5rAHJkDuW3StI0ynNXukidROMXYl6ew8w==
-
 "@rollup/rollup-win32-arm64-msvc@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.46.1.tgz#45b5a1d3f0af63f85044913c371d7b0519c913ad"
   integrity sha512-mWz+6FSRb82xuUMMV1X3NGiaPFqbLN9aIueHleTZCc46cJvwTlvIh7reQLk4p97dv0nddyewBhwzryBHH7wtPw==
 
-"@rollup/rollup-win32-ia32-msvc@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.5.tgz#0f987b134c6b3123c22842b33ba0c2b6fb78cc3b"
-  integrity sha512-ElTYOh50InL8kzyUD6XsnPit7jYCKrphmddKAe1/Ytt74apOxDq5YEcbsiKs0fR3vff3jEneMM+3I7jbqaMyBg==
-
 "@rollup/rollup-win32-ia32-msvc@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.46.1.tgz#900ef7211d2929e9809f3a044c4e2fd3aa685a0c"
   integrity sha512-7Thzy9TMXDw9AU4f4vsLNBxh7/VOKuXi73VH3d/kHGr0tZ3x/ewgL9uC7ojUKmH1/zvmZe2tLapYcZllk3SO8Q==
 
-"@rollup/rollup-win32-x64-msvc@4.22.5":
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.5.tgz#f2feb149235a5dc1deb5439758f8871255e5a161"
-  integrity sha512-+lvL/4mQxSV8MukpkKyyvfwhH266COcWlXE/1qxwN08ajovta3459zrjLghYMgDerlzNwLAcFpvU+WWE5y6nAQ==
-
 "@rollup/rollup-win32-x64-msvc@4.46.1":
   version "4.46.1"
   resolved "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.46.1.tgz#932d8696dfef673bee1a1e291a5531d25a6903be"
@@ -653,11 +573,6 @@
   resolved "https://registry.npmmirror.com/@types/deep-eql/-/deep-eql-4.0.2.tgz#334311971d3a07121e7eb91b684a605e7eea9cbd"
   integrity sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==
 
-"@types/estree@1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
-  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
-
 "@types/estree@1.0.8", "@types/estree@^1.0.0":
   version "1.0.8"
   resolved "https://registry.npmmirror.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
@@ -1576,11 +1491,6 @@ nanoid@^3.3.11:
   resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
   integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
 
-nanoid@^3.3.7:
-  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
-  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
-
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -1651,11 +1561,6 @@ pathval@^2.0.0:
   resolved "https://registry.npmmirror.com/pathval/-/pathval-2.0.1.tgz#8855c5a2899af072d6ac05d11e46045ad0dc605d"
   integrity sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==
 
-picocolors@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
-  integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
-
 picocolors@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
@@ -1671,16 +1576,7 @@ picomatch@^4.0.2, picomatch@^4.0.3:
   resolved "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz#796c76136d1eead715db1e7bad785dedd695a042"
   integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
 
-postcss@^8.4.43:
-  version "8.4.45"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.45.tgz#538d13d89a16ef71edbf75d895284ae06b79e603"
-  integrity sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==
-  dependencies:
-    nanoid "^3.3.7"
-    picocolors "^1.0.1"
-    source-map-js "^1.2.0"
-
-postcss@^8.5.6:
+postcss@^8.4.43, postcss@^8.5.6:
   version "8.5.6"
   resolved "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz#2825006615a619b4f62a9e7426cc120b349a8f3c"
   integrity sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==
@@ -1734,32 +1630,7 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rollup@^4.20.0:
-  version "4.22.5"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.22.5.tgz#d5108cc470249417e50492456253884d19f5d40f"
-  integrity sha512-WoinX7GeQOFMGznEcWA1WrTQCd/tpEbMkc3nuMs9BT0CPjMdSjPMTVClwWd4pgSQwJdP65SK9mTCNvItlr5o7w==
-  dependencies:
-    "@types/estree" "1.0.6"
-  optionalDependencies:
-    "@rollup/rollup-android-arm-eabi" "4.22.5"
-    "@rollup/rollup-android-arm64" "4.22.5"
-    "@rollup/rollup-darwin-arm64" "4.22.5"
-    "@rollup/rollup-darwin-x64" "4.22.5"
-    "@rollup/rollup-linux-arm-gnueabihf" "4.22.5"
-    "@rollup/rollup-linux-arm-musleabihf" "4.22.5"
-    "@rollup/rollup-linux-arm64-gnu" "4.22.5"
-    "@rollup/rollup-linux-arm64-musl" "4.22.5"
-    "@rollup/rollup-linux-powerpc64le-gnu" "4.22.5"
-    "@rollup/rollup-linux-riscv64-gnu" "4.22.5"
-    "@rollup/rollup-linux-s390x-gnu" "4.22.5"
-    "@rollup/rollup-linux-x64-gnu" "4.22.5"
-    "@rollup/rollup-linux-x64-musl" "4.22.5"
-    "@rollup/rollup-win32-arm64-msvc" "4.22.5"
-    "@rollup/rollup-win32-ia32-msvc" "4.22.5"
-    "@rollup/rollup-win32-x64-msvc" "4.22.5"
-    fsevents "~2.3.2"
-
-rollup@^4.40.0:
+rollup@^4.20.0, rollup@^4.40.0:
   version "4.46.1"
   resolved "https://registry.npmmirror.com/rollup/-/rollup-4.46.1.tgz#287d07ef0ea17950b348b027c634a9544a1a375f"
   integrity sha512-33xGNBsDJAkzt0PvninskHlWnTIPgDtTwhg0U38CUoNP/7H6wI2Cz6dUeoNPbjdTdsYTGuiFFASuUOWovH0SyQ==
@@ -1850,7 +1721,7 @@ sirv@^3.0.1:
     mrmime "^2.0.0"
     totalist "^3.0.0"
 
-source-map-js@^1.2.0, source-map-js@^1.2.1:
+source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
@@ -2030,10 +1901,10 @@ vite-node@3.2.4:
   optionalDependencies:
     fsevents "~2.3.3"
 
-vite@^5.4.19:
-  version "5.4.19"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.19.tgz#20efd060410044b3ed555049418a5e7d1998f959"
-  integrity sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==
+vite@^5.4.20:
+  version "5.4.20"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.20.tgz#3267a5e03f21212f44edfd72758138e8fcecd76a"
+  integrity sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==
   dependencies:
     esbuild "^0.21.3"
     postcss "^8.4.43"

From 42f039456a9ec0e4e54db1ab6d6e260ea5d250db Mon Sep 17 00:00:00 2001
From: YOUNGHO8762 <youngho8762@gmail.com>
Date: Tue, 16 Sep 2025 19:32:06 +0900
Subject: [PATCH 10/14] Fix bug where removeWidget does not function properly

---
 react/lib/grid-stack-provider.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/react/lib/grid-stack-provider.tsx b/react/lib/grid-stack-provider.tsx
index 1afe4348c..be167ff9f 100644
--- a/react/lib/grid-stack-provider.tsx
+++ b/react/lib/grid-stack-provider.tsx
@@ -1,4 +1,4 @@
-import type { GridStack, GridStackOptions, GridStackWidget } from "gridstack";
+import type { GridItemHTMLElement, GridStack, GridStackOptions, GridStackWidget } from "gridstack";
 import { type PropsWithChildren, useCallback, useState } from "react";
 import { GridStackContext } from "./grid-stack-context";
 
@@ -72,7 +72,12 @@ export function GridStackProvider({
 
   const removeWidget = useCallback(
     (id: string) => {
-      gridStack?.removeWidget(id);
+      const element = document.body.querySelector(`[gs-id="${id}"]`);
+
+      if (element) {
+        gridStack?.removeWidget(element as GridItemHTMLElement);
+      }
+
       setRawWidgetMetaMap((prev) => {
         const newMap = new Map<string, GridStackWidget>(prev);
         newMap.delete(id);

From 6719fbf9f7c2bc5033eaad26884be6c8813946bb Mon Sep 17 00:00:00 2001
From: YOUNGHO8762 <youngho8762@gmail.com>
Date: Sat, 20 Sep 2025 21:18:59 +0900
Subject: [PATCH 11/14] Add removeAll function to react wrapper

---
 react/lib/grid-stack-context.ts   | 1 +
 react/lib/grid-stack-provider.tsx | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/react/lib/grid-stack-context.ts b/react/lib/grid-stack-context.ts
index 51e950700..e06a17420 100644
--- a/react/lib/grid-stack-context.ts
+++ b/react/lib/grid-stack-context.ts
@@ -13,6 +13,7 @@ export const GridStackContext = createContext<{
     ) => Omit<GridStackWidget, "id">
   ) => void;
   saveOptions: () => GridStackOptions | GridStackWidget[] | undefined;
+  removeAll: () => void;
 
   _gridStack: {
     value: GridStack | null;
diff --git a/react/lib/grid-stack-provider.tsx b/react/lib/grid-stack-provider.tsx
index be167ff9f..0d35bd8ff 100644
--- a/react/lib/grid-stack-provider.tsx
+++ b/react/lib/grid-stack-provider.tsx
@@ -91,6 +91,11 @@ export function GridStackProvider({
     return gridStack?.save(true, true, (_, widget) => widget);
   }, [gridStack]);
 
+  const removeAll = useCallback(() => {
+    gridStack?.removeAll();
+    setRawWidgetMetaMap(new Map<string, GridStackWidget>());
+  }, [gridStack]);
+
   return (
     <GridStackContext.Provider
       value={{
@@ -101,6 +106,7 @@ export function GridStackProvider({
         removeWidget,
         addSubGrid,
         saveOptions,
+        removeAll,
 
         _gridStack: {
           value: gridStack,

From 8b3be43fdb0aaea3dc9f07f4ae7885ee93603da2 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alain.dumesny@broadcom.com>
Date: Sun, 21 Sep 2025 17:59:44 -0700
Subject: [PATCH 12/14] tweak to #3159 React removeWidget()

* might be able to use GridStack.removeWidget() which now uses gs-id as last resource....
---
 react/lib/grid-stack-provider.tsx |  7 ++-----
 src/types.ts                      |  4 ++--
 src/utils.ts                      | 11 ++++++++++-
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/react/lib/grid-stack-provider.tsx b/react/lib/grid-stack-provider.tsx
index 0d35bd8ff..215dc538f 100644
--- a/react/lib/grid-stack-provider.tsx
+++ b/react/lib/grid-stack-provider.tsx
@@ -72,11 +72,8 @@ export function GridStackProvider({
 
   const removeWidget = useCallback(
     (id: string) => {
-      const element = document.body.querySelector(`[gs-id="${id}"]`);
-
-      if (element) {
-        gridStack?.removeWidget(element as GridItemHTMLElement);
-      }
+      const element = document.body.querySelector<GridItemHTMLElement>(`[gs-id="${id}"]`);
+      if (element) gridStack?.removeWidget(element);
 
       setRawWidgetMetaMap((prev) => {
         const newMap = new Map<string, GridStackWidget>(prev);
diff --git a/src/types.ts b/src/types.ts
index a89e56530..f56364677 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -82,9 +82,9 @@ export interface GridItemHTMLElement extends HTMLElement {
 
 /**
  * Type representing various ways to specify grid elements.
- * Can be a CSS selector string, HTMLElement, or GridItemHTMLElement.
+ * Can be a CSS selector string, GridItemHTMLElement (HTML element with GS variables when loaded).
  */
-export type GridStackElement = string | HTMLElement | GridItemHTMLElement;
+export type GridStackElement = string | GridItemHTMLElement;
 
 /**
  * Event handler function types for the .on() method.
diff --git a/src/utils.ts b/src/utils.ts
index d3bc41dad..76ac90d2c 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -123,8 +123,17 @@ export class Utils {
 
       let list = root.querySelectorAll(els);
       if (!list.length && els[0] !== '.' && els[0] !== '#') {
+        // see if mean to be a class
         list = root.querySelectorAll('.' + els);
-        if (!list.length) { list = root.querySelectorAll('#' + els) }
+
+        // else if mean to be an id
+        if (!list.length) list = root.querySelectorAll('#' + els);
+
+        // else see if gs-id attribute
+        if (!list.length) {
+          const el = root.querySelector<HTMLElement>(`[gs-id="${els}"]`);
+          return el ? [el] : [];
+        }
       }
       return Array.from(list) as HTMLElement[];
     }

From 85aef6c70bec9b0ab5348f02ab3bc8c62f38bc94 Mon Sep 17 00:00:00 2001
From: YOUNGHO8762 <youngho8762@gmail.com>
Date: Mon, 22 Sep 2025 20:15:03 +0900
Subject: [PATCH 13/14] remove HTMLElement from GridStackElement type in API
 documentation

---
 doc/API.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/API.md b/doc/API.md
index 478195228..ef21ce9c2 100644
--- a/doc/API.md
+++ b/doc/API.md
@@ -5988,7 +5988,7 @@ Drop event handler that receives previous and new node states
 ### GridStackElement
 
 ```ts
-type GridStackElement = string | HTMLElement | GridItemHTMLElement;
+type GridStackElement = string | GridItemHTMLElement;
 ```
 
 Defined in: [types.ts:87](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L87)

From efd80772b4158cbe1685dfc20f7d4a74b8c87d20 Mon Sep 17 00:00:00 2001
From: YOUNGHO8762 <youngho8762@gmail.com>
Date: Tue, 23 Sep 2025 20:39:02 +0900
Subject: [PATCH 14/14] =?UTF-8?q?react=20wrapper=20grid=20stack=20provider?=
 =?UTF-8?q?=C2=A0API=20to=20accept=20widget=20objects=20directly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react/lib/grid-stack-context.ts   | 12 +++++-----
 react/lib/grid-stack-provider.tsx | 37 ++++++++++---------------------
 react/src/demo/demo.tsx           | 26 ++++++++++++++--------
 3 files changed, 36 insertions(+), 39 deletions(-)

diff --git a/react/lib/grid-stack-context.ts b/react/lib/grid-stack-context.ts
index e06a17420..d2c313a1a 100644
--- a/react/lib/grid-stack-context.ts
+++ b/react/lib/grid-stack-context.ts
@@ -4,13 +4,15 @@ import { createContext, useContext } from "react";
 export const GridStackContext = createContext<{
   initialOptions: GridStackOptions;
   gridStack: GridStack | null;
-  addWidget: (fn: (id: string) => Omit<GridStackWidget, "id">) => void;
+  addWidget: (widget: GridStackWidget & { id: Required<GridStackWidget>["id"] }) => void;
   removeWidget: (id: string) => void;
   addSubGrid: (
-    fn: (
-      id: string,
-      withWidget: (w: Omit<GridStackWidget, "id">) => GridStackWidget
-    ) => Omit<GridStackWidget, "id">
+    subGrid: GridStackWidget & { 
+      id: Required<GridStackWidget>["id"]; 
+      subGridOpts: Required<GridStackWidget>["subGridOpts"] & { 
+        children: Array<GridStackWidget & { id: Required<GridStackWidget>["id"] }> 
+      } 
+    }
   ) => void;
   saveOptions: () => GridStackOptions | GridStackWidget[] | undefined;
   removeAll: () => void;
diff --git a/react/lib/grid-stack-provider.tsx b/react/lib/grid-stack-provider.tsx
index 215dc538f..ff262b555 100644
--- a/react/lib/grid-stack-provider.tsx
+++ b/react/lib/grid-stack-provider.tsx
@@ -26,13 +26,11 @@ export function GridStackProvider({
   });
 
   const addWidget = useCallback(
-    (fn: (id: string) => Omit<GridStackWidget, "id">) => {
-      const newId = `widget-${Math.random().toString(36).substring(2, 15)}`;
-      const widget = fn(newId);
-      gridStack?.addWidget({ ...widget, id: newId });
+    (widget: GridStackWidget & { id: Required<GridStackWidget>["id"] })  => {
+      gridStack?.addWidget(widget);
       setRawWidgetMetaMap((prev) => {
         const newMap = new Map<string, GridStackWidget>(prev);
-        newMap.set(newId, widget);
+        newMap.set(widget.id, widget);
         return newMap;
       });
     },
@@ -40,29 +38,18 @@ export function GridStackProvider({
   );
 
   const addSubGrid = useCallback(
-    (
-      fn: (
-        id: string,
-        withWidget: (w: Omit<GridStackWidget, "id">) => GridStackWidget
-      ) => Omit<GridStackWidget, "id">
-    ) => {
-      const newId = `sub-grid-${Math.random().toString(36).substring(2, 15)}`;
-      const subWidgetIdMap = new Map<string, GridStackWidget>();
-
-      const widget = fn(newId, (w) => {
-        const subWidgetId = `widget-${Math.random()
-          .toString(36)
-          .substring(2, 15)}`;
-        subWidgetIdMap.set(subWidgetId, w);
-        return { ...w, id: subWidgetId };
-      });
-
-      gridStack?.addWidget({ ...widget, id: newId });
+    (subGrid: GridStackWidget & { 
+      id: Required<GridStackWidget>["id"]; 
+      subGridOpts: Required<GridStackWidget>["subGridOpts"] & { 
+        children: Array<GridStackWidget & { id: Required<GridStackWidget>["id"] }> 
+      } 
+    }) => {
+      gridStack?.addWidget(subGrid);
 
       setRawWidgetMetaMap((prev) => {
         const newMap = new Map<string, GridStackWidget>(prev);
-        subWidgetIdMap.forEach((meta, id) => {
-          newMap.set(id, meta);
+        subGrid.subGridOpts?.children?.forEach((meta: GridStackWidget & { id: Required<GridStackWidget>["id"] }) => {
+          newMap.set(meta.id, meta);
         });
         return newMap;
       });
diff --git a/react/src/demo/demo.tsx b/react/src/demo/demo.tsx
index b0b4b6b53..d7ef7f861 100644
--- a/react/src/demo/demo.tsx
+++ b/react/src/demo/demo.tsx
@@ -141,7 +141,7 @@ export function GridStackDemo() {
     <>
     <GridStackProvider initialOptions={initialOptions}>
       <Toolbar />
-       <GridStackRenderProvider>
+        <GridStackRenderProvider>
         <GridStackRender componentMap={COMPONENT_MAP} />
       </GridStackRenderProvider>
       <DebugInfo />
@@ -149,7 +149,7 @@ export function GridStackDemo() {
 
     <GridStackProvider initialOptions={initialOptions2}>
       <Toolbar />
-       <GridStackRenderProvider>
+        <GridStackRenderProvider>
         <GridStackRender componentMap={COMPONENT_MAP} />
       </GridStackRenderProvider>
       <DebugInfo />
@@ -175,7 +175,10 @@ function Toolbar() {
     >
       <button
         onClick={() => {
-          addWidget((id) => ({
+          const id = `widget-${Math.random().toString(36).substring(2, 15)}`;
+          
+          addWidget({
+            id,
             w: 2,
             h: 2,
             x: 0,
@@ -184,7 +187,7 @@ function Toolbar() {
               name: "Text",
               props: { content: id },
             }),
-          }));
+          });
         }}
       >
         Add Text (2x2)
@@ -192,7 +195,11 @@ function Toolbar() {
 
       <button
         onClick={() => {
-          addSubGrid((id, withWidget) => ({
+          const subGridId = `sub-grid-${Math.random().toString(36).substring(2, 15)}`;
+          const widgetId = `widget-${Math.random().toString(36).substring(2, 15)}`;
+
+          addSubGrid({
+            id: subGridId,
             h: 5,
             noResize: false,
             sizeToContent: true,
@@ -203,7 +210,8 @@ function Toolbar() {
               minRow: 2,
               cellHeight: CELL_HEIGHT,
               children: [
-                withWidget({
+                {
+                  id: widgetId,
                   h: 1,
                   locked: true,
                   noMove: true,
@@ -213,15 +221,15 @@ function Toolbar() {
                   y: 0,
                   content: JSON.stringify({
                     name: "Text",
-                    props: { content: "Sub Grid 1 Title" + id },
+                    props: { content: "Sub Grid 1 Title" + widgetId },
                   }),
-                }),
+                },
               ],
             },
             w: 12,
             x: 0,
             y: 0,
-          }));
+          });
         }}
       >
         Add Sub Grid (12x1)