refactor(template-builder): encapsulate interact.js inside ElementRenderer

Each component now owns exactly its own responsibilities:

ElementRenderer
  - Imports interact.js and sets up its own interactable in did-insert
  - Tears it down in will-destroy (no parent involvement)
  - Emits @onmove(uuid, {x,y}) when a drag ends
  - Emits @onresize(uuid, {x,y,width,height}) when a resize ends
  - Emits @onselect(element) when tapped
  - Reads @canvasWidth/@canvasHeight for boundary clamping
  - Reads @zoom at event time (no closure staleness)
  - Reads rotation from el.dataset.rotation (written by _applyTransform)
    so the applyTransform closure never holds a stale element reference

Canvas
  - Removed: interact.js import, _interactables map, setupElement,
    teardownElement, _setupInteract, didInsertCanvas, willDestroyCanvas
  - Owns only: canvas dimensions/style, selectedUuid tracking,
    handleSelectElement, handleDeselectAll
  - Passes @canvasWidth/@canvasHeight/@zoom to each ElementRenderer
  - Forwards @onMoveElement → @onmove, @onResizeElement → @onresize

TemplateBuilder
  - Added resizeElement action (separate from moveElement)
  - moveElement: drag-end only, syncs {x,y}
  - resizeElement: resize-end only, syncs {x,y,width,height}
  - Both are silent in-place mutations (no re-render, no undo entry)
  - Removed @onUpdateElement from canvas wiring (canvas never needed it)

This eliminates the entire class of bugs caused by the parent managing
child DOM lifecycle: no more interact.js destruction on property updates,
no stale closure references, no need for data-attribute workarounds.

Author: roncodes

addon/components/template-builder.hbs

@@ -86,7 +86,7 @@
                 @zoom={{this.zoom}}
                 @onSelectElement={{this.selectElement}}
                 @onMoveElement={{this.moveElement}}
-                @onUpdateElement={{this.updateElement}}
+                @onResizeElement={{this.resizeElement}}
                 @onDeselectAll={{this.deselectAll}}
             />
         </div>

addon/components/template-builder.js

@@ -259,16 +259,29 @@ export default class TemplateBuilderComponent extends Component {
     }
 
     /**
-     * Silently sync the position/size of an element after a drag or resize
-     * gesture completes. Does NOT trigger any Glimmer re-render.
+     * Silently sync an element's position after a drag gesture ends.
+     * Mutates in-place — no Glimmer re-render, no undo entry.
+     * interact.js has already updated the DOM; this just keeps the data model
+     * in sync so the correct position is included in the next save.
      */
     @action
-    moveElement(uuid, changes) {
+    moveElement(uuid, { x, y }) {
         const el = this._content.find((e) => e.uuid === uuid);
         if (!el) return;
-        // Mutate in-place only. No _content replacement, no selectedElement write.
-        // Zero re-renders. interact.js instances remain alive.
-        Object.assign(el, changes);
+        Object.assign(el, { x, y });
+    }
+
+    /**
+     * Silently sync an element's position and size after a resize gesture ends.
+     * Mutates in-place — no Glimmer re-render, no undo entry.
+     * interact.js has already updated the DOM; this just keeps the data model
+     * in sync so the correct dimensions are included in the next save.
+     */
+    @action
+    resizeElement(uuid, { x, y, width, height }) {
+        const el = this._content.find((e) => e.uuid === uuid);
+        if (!el) return;
+        Object.assign(el, { x, y, width, height });
     }
 
     /**

addon/components/template-builder/canvas.hbs

@@ -1,28 +1,23 @@
 {{! Template Builder Canvas }}
+{{! This component is a thin rendering shell. Each ElementRenderer owns its
+    own interact.js instance and emits @onMove / @onResize / @onSelect. }}
 <div
     id={{this.canvasId}}
     class="tb-canvas shadow-xl mx-auto select-none"
     style={{this.canvasStyle}}
-    {{did-insert this.didInsertCanvas}}
-    {{will-destroy this.willDestroyCanvas}}
-    {{on "click" this.deselectAll}}
+    {{on "click" this.handleDeselectAll}}
     ...attributes
 >
-    {{! key="uuid" tells Glimmer to track each ElementRenderer by the element's
-        uuid rather than by array index. When updateElement replaces an element
-        object with a new spread copy (same uuid, new reference), Glimmer reuses
-        the existing component instance and DOM node — so interact.js stays alive —
-        but passes the new object as @element, causing the template to re-render
-        and all getters (textContent, textStyle, wrapperStyle, etc.) to re-evaluate. }}
     {{#each this.elements key="uuid" as |element|}}
         <TemplateBuilder::ElementRenderer
             @element={{element}}
             @isSelected={{eq element.uuid this.selectedUuid}}
-            @rotation={{element.rotation}}
             @zoom={{this.zoom}}
-            @onSelect={{fn this.selectElement element}}
-            @onDidInsert={{fn this.setupElement element}}
-            @onWillDestroy={{fn this.teardownElement element}}
+            @canvasWidth={{this.canvasWidthPx}}
+            @canvasHeight={{this.canvasHeightPx}}
+            @onSelect={{this.handleSelectElement}}
+            @onMove={{@onMoveElement}}
+            @onResize={{@onResizeElement}}
         />
     {{/each}}
 </div>