feat(template-builder): add conditional close button to toolbar

- toolbar.hbs: render a close/back button on the left side of the toolbar
  when @onclose is provided; separated from element-type buttons by a
  vertical divider. Defaults to a chevron-left icon; @closeIcon and
  @closeLabel args allow customisation.

- toolbar.js: add close() @action that calls @onclose if present; update
  JSDoc to document @onclose, @closeIcon, @closeLabel args.

- template-builder.hbs: forward @onclose, @closeIcon, @closeLabel from
  the root component down to <TemplateBuilder::Toolbar>.

- template-builder.js: document the three new optional args in the class
  JSDoc block.

Author: roncodes

addon/components/template-builder.hbs

@@ -19,6 +19,9 @@
         @onPreview={{this.preview}}
         @onSave={{this.save}}
         @onRotateElement={{this.rotateElement}}
+        @onClose={{@onClose}}
+        @closeIcon={{@closeIcon}}
+        @closeLabel={{@closeLabel}}
     />
 
     {{! ================================================================ }}

addon/components/template-builder.js

@@ -55,6 +55,9 @@ import { next } from '@ember/runloop';
  * @argument {Boolean}  isSaving        - Whether a save is in progress (controls toolbar spinner)
  * @argument {Function} onSave          - Called with the updated template object when Save is clicked
  * @argument {Function} onPreview       - Called with the current template object when Preview is clicked
+ * @argument {Function} [onClose]       - Optional. If provided, a close/back button appears in the toolbar.
+ * @argument {String}   [closeIcon]     - FontAwesome icon for the close button (default: 'chevron-left')
+ * @argument {String}   [closeLabel]    - Text label beside the close icon (default: none — icon only)
  */
 export default class TemplateBuilderComponent extends Component {
     @service fetch;

addon/components/template-builder/toolbar.hbs

@@ -1,8 +1,24 @@
 {{! Template Builder Toolbar }}
 <div class="tb-toolbar flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900" ...attributes>
 
-    {{! Left: Element type buttons }}
+    {{! Left: Close/back button (optional) + Element type buttons }}
     <div class="flex items-center space-x-1">
+
+        {{#if @onClose}}
+            <button
+                type="button"
+                class="tb-toolbar-btn flex items-center space-x-1 px-2 py-1.5 rounded text-xs font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-colors mr-1"
+                title={{or @closeLabel "Close"}}
+                {{on "click" this.close}}
+            >
+                <FaIcon @icon={{or @closeIcon "chevron-left"}} class="w-3.5 h-3.5" />
+                {{#if @closeLabel}}
+                    <span class="hidden xl:inline">{{@closeLabel}}</span>
+                {{/if}}
+            </button>
+            <div class="w-px h-5 bg-gray-200 dark:bg-gray-700 mr-1"></div>
+        {{/if}}
+
         {{#each this.elementTypes as |et|}}
             <button
                 type="button"

addon/components/template-builder/toolbar.js

@@ -24,6 +24,9 @@ import { action } from '@ember/object';
  * @argument {Function} onPreview        - Called when preview is clicked
  * @argument {Function} onSave           - Called when save is clicked
  * @argument {Function} onRotateElement  - Called with (uuid, deltaDegrees)
+ * @argument {Function} [onClose]        - Optional. If provided, a close/back button is rendered on the left.
+ * @argument {String}   [closeIcon]      - FontAwesome icon name for the close button (default: 'chevron-left')
+ * @argument {String}   [closeLabel]     - Text label shown beside the close icon (default: none)
  */
 export default class TemplateBuilderToolbarComponent extends Component {
     elementTypes = [
@@ -82,6 +85,11 @@ export default class TemplateBuilderToolbarComponent extends Component {
         if (this.args.onSave) this.args.onSave();
     }
 
+    @action
+    close() {
+        if (this.args.onClose) this.args.onClose();
+    }
+
     @action
     rotateLeft() {
         if (this.args.onRotateElement && this.args.selectedElement) {