fix(template-builder): selection highlight, 0,0 repositioning on z-index change

Bug 1 — Selection not working
  Root cause: canvas.js was tracking _selectedUuid locally. When the layers
  panel selected an element, the parent's selectedElement updated but the
  canvas's _selectedUuid never changed, so @isSelected was always false.
  Additionally, the canvas's {{on "click" handleDeselectAll}} was firing even
  when a child element was tapped (interact.js tap does not stop the native
  click from bubbling), immediately clearing the selection.

  Fix:
  - canvas.js: removed local _selectedUuid state entirely. selectedUuid is
    now a getter derived from @selectedElement (the parent's source of truth).
    This means any selection source (canvas tap, layers panel, keyboard) is
    automatically reflected in the canvas highlight.
  - canvas.js: handleDeselectAll now guards with
    event.target !== event.currentTarget so it only fires when the canvas
    background itself is clicked, not when a child element is tapped.

Bug 2 — z-index change repositions all elements to 0,0
  Root cause: reorderElement replaces element objects with new spread copies.
  Glimmer re-renders the ElementRenderer's style attribute (wrapperStyle).
  wrapperStyle intentionally omits the CSS transform (which is managed
  imperatively by interact.js). When Glimmer writes the new style attribute,
  it clears the transform, snapping every element to 0,0.

  Fix:
  - element-renderer.hbs: added {{did-update this.handleUpdate @element}}.
  - element-renderer.js: handleUpdate re-applies _applyTransform(el) after
    Glimmer updates the style attribute, restoring the correct position.

Bonus fix — reorderElement now syncs selectedElement to the new object so
the properties panel reflects the updated z_index immediately.

Author: roncodes

addon/components/template-builder.js

@@ -338,6 +338,11 @@ export default class TemplateBuilderComponent extends Component {
             if (el.uuid === swapElement.uuid) return { ...el, z_index: currentZ };
             return el;
         });
+
+        // Sync selectedElement so the properties panel reflects the new z_index.
+        if (this.selectedElement?.uuid === uuid) {
+            this.selectedElement = this._content.find((el) => el.uuid === uuid) ?? null;
+        }
     }
 
     // -------------------------------------------------------------------------

addon/components/template-builder/canvas.js

@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 
@@ -31,12 +30,10 @@ import { guidFor } from '@ember/object/internals';
 export default class TemplateBuilderCanvasComponent extends Component {
     canvasId = `tb-canvas-${guidFor(this)}`;
 
-    /**
-     * Tracked UUID of the currently selected element. Using a primitive string
-     * (not an object reference) ensures Glimmer detects the change and
-     * re-renders only the affected ElementRenderer's selection ring.
-     */
-    @tracked _selectedUuid = null;
+    // No local selection state. The canvas derives selectedUuid from
+    // @selectedElement (owned by TemplateBuilderComponent) so that selections
+    // made from the layers panel, keyboard shortcuts, or any other source are
+    // always reflected here without duplication.
 
     // -------------------------------------------------------------------------
     // Canvas dimensions
@@ -70,7 +67,7 @@ export default class TemplateBuilderCanvasComponent extends Component {
     }
 
     get selectedUuid() {
-        return this._selectedUuid;
+        return this.args.selectedElement?.uuid ?? null;
     }
 
     // -------------------------------------------------------------------------
@@ -79,15 +76,20 @@ export default class TemplateBuilderCanvasComponent extends Component {
 
     @action
     handleSelectElement(element) {
-        this._selectedUuid = element.uuid;
+        // Delegate entirely to the parent. The parent sets selectedElement,
+        // which flows back down as @selectedElement, which drives selectedUuid.
         if (this.args.onSelectElement) {
             this.args.onSelectElement(element);
         }
     }
 
     @action
-    handleDeselectAll() {
-        this._selectedUuid = null;
+    handleDeselectAll(event) {
+        // Only deselect when the user clicks the canvas background directly.
+        // If the click originated from a child element (an ElementRenderer),
+        // interact.js has already fired its tap event and called handleSelectElement.
+        // We must not clear the selection here in that case.
+        if (event.target !== event.currentTarget) return;
         if (this.args.onDeselectAll) {
             this.args.onDeselectAll();
         }

addon/components/template-builder/element-renderer.hbs

@@ -8,6 +8,7 @@
     data-element-type={{this.elementType}}
     data-element-uuid={{@element.uuid}}
     {{did-insert this.handleInsert}}
+    {{did-update this.handleUpdate @element}}
     {{will-destroy this.handleDestroy}}
 >
     {{! TEXT }}

addon/components/template-builder/element-renderer.js

@@ -60,6 +60,16 @@ export default class TemplateBuilderElementRendererComponent extends Component {
         this._setupInteract(el);
     }
 
+    @action
+    handleUpdate(el) {
+        // Glimmer has just re-rendered the style attribute (e.g. after a z_index
+        // change via reorderElement). The style attribute does not include the
+        // CSS transform — that is managed imperatively by interact.js and
+        // _applyTransform. Re-apply it now so the element stays at its current
+        // position rather than snapping to 0,0.
+        this._applyTransform(el);
+    }
+
     @action
     handleDestroy(el) {
         if (this._interactable) {