fix(template-builder): fix drag regression in template builder (#35277)

## Summary

- Reverts the `identify` track function — removes the method entirely
and uses `row.id` / `box.id` directly in `@for` track expressions. The
previous `${id}-${index}` approach caused Angular to treat widgets by
position rather than identity, desyncing GridStack's DOM during
column-between-row drags and leaving the source row empty.
- Bumps gridstack `8.1.1` → `8.4.0`
- Guards against `undefined` `oldChild` in `updateOldRows` when a column
has moved to a new X position after a drag

## Related

Closes #33073

🤖 Generated with [Claude Code](https://claude.com/claude-code)

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes how Angular tracks grid items and updates GridStack
dependency, which can affect drag/drop rendering and layout state
synchronization.
> 
> **Overview**
> Fixes a template-builder drag regression by switching `@for` tracking
to stable `row.id`/`box.id` (and removing the custom `identify()` key
generator) so GridStack DOM/widget identity stays consistent during
cross-row column drags.
> 
> Hardens `updateOldRows` merging to avoid crashing/losing state when a
column’s previous X position can’t be found (`oldChild?.id ??
newChild.id`), and bumps `gridstack` from `8.1.1` to `8.4.0`.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
ab89c85. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Claude Sonnet 4.6 <[email protected]>

Author: zJaaal

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
                                   };
                               })

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 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($index, box)) {
+                            @for (box of row.subGridOpts?.children; track box.id) {
                                 <div
                                     [attr.gs-id]="box.id"
                                     [attr.gs-auto]="true"

core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts

@@ -384,26 +384,6 @@ export class TemplateBuilderComponent implements OnDestroy, OnChanges, OnInit {
         this.destroy$.complete();
     }
 
-    /**
-     * @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}`;
-    }
-
     /**
      * @description This method maintains the GridStack Model in sync with the store when you delete a column
      *

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",

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"