From b3c691dbe546889110012564e411757313b57d04 Mon Sep 17 00:00:00 2001
From: Jalinson Diaz <zjaaaldev@gmail.com>
Date: Thu, 9 Apr 2026 18:16:24 -0300
Subject: [PATCH 1/3] fix(template-builder): revert identify track function and
 bump gridstack to 8.4.0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../template-builder.component.html           |  4 +-
 .../template-builder.component.ts             | 13 +------
 core-web/package.json                         |  2 +-
 core-web/yarn.lock                            | 39 ++++---------------
 4 files changed, 12 insertions(+), 46 deletions(-)

diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.html b/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.html
index e38db9a3ee29..af2c40c947f1 100644
--- a/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.html
+++ b/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.html
@@ -61,7 +61,7 @@
                     [containerMap]="vm.containerMap" />
             }
             <div class="grid-stack flex-1">
-                @for (row of vm.rows; track identify($index, row)) {
+                @for (row of vm.rows; track identify(row)) {
                     <dotcms-template-builder-row
                         [attr.gs-id]="row.id"
                         [attr.gs-x]="row.x"
@@ -76,7 +76,7 @@
                         #rowElement
                         data-testId="row">
                         <div class="grid-stack-item-content grid-stack">
-                            @for (box of row.subGridOpts?.children; track identify($index, box)) {
+                            @for (box of row.subGridOpts?.children; track identify(box)) {
                                 <div
                                     [attr.gs-id]="box.id"
                                     [attr.gs-auto]="true"
diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts b/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts
index b241dc45ed89..5838c23ac369 100644
--- a/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts
+++ b/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts
@@ -387,21 +387,12 @@ export class TemplateBuilderComponent implements OnDestroy, OnChanges, OnInit {
     /**
      * @description This method is used to identify items by id
      *
-     * @param {number} index
      * @param {GridStackWidget} w
      * @return {*}
      * @memberof TemplateBuilderComponent
      */
-    identify(index: number, w: GridStackWidget): string {
-        // Ensure we always return a unique string
-        // Combine ID with index to prevent Angular 20 NG0955 errors about duplicate keys
-        // This handles cases where the same ID might appear in different rows
-        const id = w?.id;
-        if (id != null && id !== '') {
-            return `${String(id)}-${index}`;
-        }
-        // Fallback to index if ID is not available
-        return `item-${index}`;
+    identify(w: GridStackWidget): string {
+        return String(w.id);
     }
 
     /**
diff --git a/core-web/package.json b/core-web/package.json
index a8af653bd6a6..e7ca8f9cf4d9 100644
--- a/core-web/package.json
+++ b/core-web/package.json
@@ -116,7 +116,7 @@
         "execa": "9.6.0",
         "font-awesome": "4.7.0",
         "fs-extra": "11.3.2",
-        "gridstack": "8.1.1",
+        "gridstack": "8.4.0",
         "htmldiff-js": "1.0.5",
         "inquirer": "13.0.1",
         "jstat": "1.9.6",
diff --git a/core-web/yarn.lock b/core-web/yarn.lock
index 6aea2b3d4e04..71286bc1f154 100644
--- a/core-web/yarn.lock
+++ b/core-web/yarn.lock
@@ -13696,10 +13696,10 @@ graphemer@^1.4.0:
   resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
-gridstack@8.1.1:
-  version "8.1.1"
-  resolved "https://registry.npmjs.org/gridstack/-/gridstack-8.1.1.tgz#acdc910346989d2016e03763b0de55b0de0d3224"
-  integrity sha512-Ya7EdwAh72iug8A51hSjH8FI0v83zxPKjo9zIT5iw5Dvh3BUbgRl2hrrmGAkDfbPlfK5lgeEsQNx08UK8iNAQw==
+gridstack@8.4.0:
+  version "8.4.0"
+  resolved "https://registry.npmjs.org/gridstack/-/gridstack-8.4.0.tgz#7af49159f9dc144c89a2c56246e1710406f75fcf"
+  integrity sha512-qLJuJrBy9bbG3hI+h2cEhiuZ51J3MyEMmv5AXg7MCFiBeG8A4HyIUytueqtD/oZcA3Pccq2Xoj7GrwpmKOS3ig==
 
 gzip-size@^6.0.0:
   version "6.0.0"
@@ -20336,16 +20336,7 @@ string-length@^4.0.2:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -20462,14 +20453,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -22140,7 +22124,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -22158,15 +22142,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 473cf96933a987243f76dd47f257cddd53104142 Mon Sep 17 00:00:00 2001
From: Jalinson Diaz <zjaaaldev@gmail.com>
Date: Thu, 9 Apr 2026 18:18:40 -0300
Subject: [PATCH 2/3] fix(template-builder): guard against undefined oldChild
 in updateOldRows

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/template-builder/store/template-builder.store.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/store/template-builder.store.ts b/core-web/libs/template-builder/src/lib/components/template-builder/store/template-builder.store.ts
index 891129c16e2e..ea777ab42a3b 100644
--- a/core-web/libs/template-builder/src/lib/components/template-builder/store/template-builder.store.ts
+++ b/core-web/libs/template-builder/src/lib/components/template-builder/store/template-builder.store.ts
@@ -423,7 +423,7 @@ export class DotTemplateBuilderStore extends ComponentStore<DotTemplateBuilderSt
 
                                   return {
                                       ...newChild, // We want the data from the backend
-                                      id: oldChild.id, // But We do not want to lose the id, because this is the way GridStack knows that nothing changed
+                                      id: oldChild?.id ?? newChild.id, // But We do not want to lose the id, because this is the way GridStack knows that nothing changed
                                       containers: newChild.containers
                                   };
                               })

From ab89c85e10820c89190220a901cb8f9e255eaa42 Mon Sep 17 00:00:00 2001
From: Jalinson Diaz <zjaaaldev@gmail.com>
Date: Thu, 9 Apr 2026 18:25:49 -0300
Subject: [PATCH 3/3] fix(template-builder): remove identify method, use row.id
 and box.id directly in track

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../template-builder/template-builder.component.html  |  4 ++--
 .../template-builder/template-builder.component.ts    | 11 -----------
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.html b/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.html
index af2c40c947f1..424a4c7d6e30 100644
--- a/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.html
+++ b/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.html
@@ -61,7 +61,7 @@
                     [containerMap]="vm.containerMap" />
             }
             <div class="grid-stack flex-1">
-                @for (row of vm.rows; track identify(row)) {
+                @for (row of vm.rows; track row.id) {
                     <dotcms-template-builder-row
                         [attr.gs-id]="row.id"
                         [attr.gs-x]="row.x"
@@ -76,7 +76,7 @@
                         #rowElement
                         data-testId="row">
                         <div class="grid-stack-item-content grid-stack">
-                            @for (box of row.subGridOpts?.children; track identify(box)) {
+                            @for (box of row.subGridOpts?.children; track box.id) {
                                 <div
                                     [attr.gs-id]="box.id"
                                     [attr.gs-auto]="true"
diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts b/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts
index 5838c23ac369..88bd76c3db7e 100644
--- a/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts
+++ b/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts
@@ -384,17 +384,6 @@ export class TemplateBuilderComponent implements OnDestroy, OnChanges, OnInit {
         this.destroy$.complete();
     }
 
-    /**
-     * @description This method is used to identify items by id
-     *
-     * @param {GridStackWidget} w
-     * @return {*}
-     * @memberof TemplateBuilderComponent
-     */
-    identify(w: GridStackWidget): string {
-        return String(w.id);
-    }
-
     /**
      * @description This method maintains the GridStack Model in sync with the store when you delete a column
      *