@fleetbase/ember-ui 0.3.22 → 0.3.24

package/addon/components/template-builder/toolbar.hbs

@@ -0,0 +1,134 @@
+{{! 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: 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"
+                class="tb-toolbar-btn flex items-center space-x-1 px-2 py-1.5 rounded text-xs font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-colors"
+                title="Add {{et.label}}"
+                {{on "click" (fn this.addElement et.type)}}
+            >
+                <FaIcon @icon={{et.icon}} class="w-3.5 h-3.5" />
+                <span class="hidden xl:inline">{{et.label}}</span>
+            </button>
+        {{/each}}
+    </div>
+
+    {{! Center: Zoom controls }}
+    <div class="flex items-center space-x-1">
+        <button
+            type="button"
+            class="tb-toolbar-btn p-1.5 rounded text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            title="Zoom out"
+            {{on "click" this.zoomOut}}
+        >
+            <FaIcon @icon="magnifying-glass-minus" class="w-3.5 h-3.5" />
+        </button>
+        <button
+            type="button"
+            class="tb-toolbar-btn px-2 py-1 rounded text-xs font-mono text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors min-w-12 text-center"
+            title="Reset zoom"
+            {{on "click" this.zoomReset}}
+        >
+            {{this.zoomPercent}}
+        </button>
+        <button
+            type="button"
+            class="tb-toolbar-btn p-1.5 rounded text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            title="Zoom in"
+            {{on "click" this.zoomIn}}
+        >
+            <FaIcon @icon="magnifying-glass-plus" class="w-3.5 h-3.5" />
+        </button>
+    </div>
+
+    {{! Right: Rotate + Undo/Redo + Preview + Save }}
+    <div class="flex items-center space-x-1">
+
+        {{! Rotate left/right — enabled only when an element is selected }}
+        <button
+            type="button"
+            class="tb-toolbar-btn p-1.5 rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed
+                {{if @selectedElement
+                    'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+                    'text-gray-400 dark:text-gray-600'}}"
+            title="Rotate left 90°"
+            disabled={{not @selectedElement}}
+            {{on "click" this.rotateLeft}}
+        >
+            <FaIcon @icon="rotate-left" class="w-3.5 h-3.5" />
+        </button>
+        <button
+            type="button"
+            class="tb-toolbar-btn p-1.5 rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed
+                {{if @selectedElement
+                    'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+                    'text-gray-400 dark:text-gray-600'}}"
+            title="Rotate right 90°"
+            disabled={{not @selectedElement}}
+            {{on "click" this.rotateRight}}
+        >
+            <FaIcon @icon="rotate-right" class="w-3.5 h-3.5" />
+        </button>
+
+        <div class="w-px h-5 bg-gray-200 dark:bg-gray-700 mx-1"></div>
+
+        <button
+            type="button"
+            class="tb-toolbar-btn p-1.5 rounded text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+            title="Undo"
+            disabled={{not @canUndo}}
+            {{on "click" this.undo}}
+        >
+            <FaIcon @icon="step-backward" class="w-3.5 h-3.5" />
+        </button>
+        <button
+            type="button"
+            class="tb-toolbar-btn p-1.5 rounded text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+            title="Redo"
+            disabled={{not @canRedo}}
+            {{on "click" this.redo}}
+        >
+            <FaIcon @icon="step-forward" class="w-3.5 h-3.5" />
+        </button>
+
+        <div class="w-px h-5 bg-gray-200 dark:bg-gray-700 mx-1"></div>
+
+        <button
+            type="button"
+            class="tb-toolbar-btn flex items-center space-x-1.5 px-3 py-1.5 rounded text-xs font-medium text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+            title="Preview template"
+            {{on "click" this.preview}}
+        >
+            <FaIcon @icon="eye" class="w-3.5 h-3.5" />
+            <span>Preview</span>
+        </button>
+
+        <Button
+            @type="primary"
+            @icon="floppy-disk"
+            @text="Save"
+            @size="xs"
+            @isLoading={{@isSaving}}
+            @onClick={{this.save}}
+        />
+    </div>
+</div>

package/addon/components/template-builder/toolbar.js

@@ -0,0 +1,106 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+/**
+ * TemplateBuilderToolbarComponent
+ *
+ * Top toolbar for the template builder. Provides:
+ * - Element type buttons (add text, image, table, line, shape, QR, barcode)
+ * - Zoom controls
+ * - Undo / Redo
+ * - Preview and Save/Publish actions
+ *
+ * @argument {Number}   zoom             - Current zoom level (e.g. 1 = 100%)
+ * @argument {Object}   selectedElement  - Currently selected element (or null)
+ * @argument {Boolean}  canUndo          - Whether undo is available
+ * @argument {Boolean}  canRedo          - Whether redo is available
+ * @argument {Boolean}  isSaving         - Whether a save is in progress
+ * @argument {Function} onAddElement     - Called with element type string
+ * @argument {Function} onZoomIn         - Called when zoom in is clicked
+ * @argument {Function} onZoomOut        - Called when zoom out is clicked
+ * @argument {Function} onZoomReset      - Called when zoom reset is clicked
+ * @argument {Function} onUndo           - Called when undo is clicked
+ * @argument {Function} onRedo           - Called when redo is clicked
+ * @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 = [
+        { type: 'text', icon: 'font', label: 'Text' },
+        { type: 'image', icon: 'image', label: 'Image' },
+        { type: 'table', icon: 'table', label: 'Table' },
+        { type: 'line', icon: 'minus', label: 'Line' },
+        { type: 'shape', icon: 'square', label: 'Shape' },
+        { type: 'qr_code', icon: 'qrcode', label: 'QR Code' },
+        { type: 'barcode', icon: 'barcode', label: 'Barcode' },
+    ];
+
+    get zoomPercent() {
+        return `${Math.round((this.args.zoom ?? 1) * 100)}%`;
+    }
+
+    @action
+    addElement(type) {
+        if (this.args.onAddElement) {
+            this.args.onAddElement(type);
+        }
+    }
+
+    @action
+    zoomIn() {
+        if (this.args.onZoomIn) this.args.onZoomIn();
+    }
+
+    @action
+    zoomOut() {
+        if (this.args.onZoomOut) this.args.onZoomOut();
+    }
+
+    @action
+    zoomReset() {
+        if (this.args.onZoomReset) this.args.onZoomReset();
+    }
+
+    @action
+    undo() {
+        if (this.args.onUndo) this.args.onUndo();
+    }
+
+    @action
+    redo() {
+        if (this.args.onRedo) this.args.onRedo();
+    }
+
+    @action
+    preview() {
+        if (this.args.onPreview) this.args.onPreview();
+    }
+
+    @action
+    save() {
+        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) {
+            this.args.onRotateElement(this.args.selectedElement.uuid, -90);
+        }
+    }
+
+    @action
+    rotateRight() {
+        if (this.args.onRotateElement && this.args.selectedElement) {
+            this.args.onRotateElement(this.args.selectedElement.uuid, 90);
+        }
+    }
+}

package/addon/components/template-builder/variable-picker.hbs

@@ -0,0 +1,210 @@
+{{! Template Builder Variable Picker }}
+{{#if @isOpen}}
+    <div class="tb-variable-picker fixed inset-0 z-50 flex items-center justify-center" role="dialog" aria-modal="true">
+        {{! Backdrop }}
+        <div class="absolute inset-0 bg-black/40 dark:bg-black/60" {{on "click" this.close}}></div>
+
+        {{! Modal }}
+        <div class="relative z-10 w-full max-w-lg bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 flex flex-col max-h-[80vh]">
+
+            {{! Header }}
+            <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+                <div class="flex items-center space-x-2">
+                    <FaIcon @icon="code" class="w-4 h-4 text-blue-500" />
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Insert Variable or Formula</h3>
+                </div>
+                <button type="button" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400" {{on "click" this.close}}>
+                    <FaIcon @icon="xmark" class="w-4 h-4" />
+                </button>
+            </div>
+
+            {{! Tabs }}
+            <div class="flex border-b border-gray-200 dark:border-gray-700">
+                <button
+                    type="button"
+                    class="flex-1 px-4 py-2 text-xs font-medium border-b-2 transition-colors {{if (eq this.activeTab 'variables') 'border-blue-500 text-blue-600 dark:text-blue-400' 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}}"
+                    {{on "click" (fn this.switchTab "variables")}}
+                >
+                    <FaIcon @icon="brackets-curly" class="w-3 h-3 mr-1.5 inline" />
+                    Variables
+                </button>
+                <button
+                    type="button"
+                    class="flex-1 px-4 py-2 text-xs font-medium border-b-2 transition-colors {{if (eq this.activeTab 'formula') 'border-blue-500 text-blue-600 dark:text-blue-400' 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}}"
+                    {{on "click" (fn this.switchTab "formula")}}
+                >
+                    <FaIcon @icon="calculator" class="w-3 h-3 mr-1.5 inline" />
+                    Formula
+                </button>
+            </div>
+
+            {{! VARIABLES TAB }}
+            {{#if (eq this.activeTab "variables")}}
+                {{! Search }}
+                <div class="px-3 py-2 border-b border-gray-100 dark:border-gray-800">
+                    <div class="relative">
+                        <FaIcon @icon="magnifying-glass" class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3 h-3 text-gray-400" />
+                        <input
+                            type="text"
+                            class="w-full pl-7 pr-3 py-1.5 text-xs bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md outline-none focus:border-blue-400 dark:focus:border-blue-500"
+                            placeholder="Search variables..."
+                            value={{this.searchQuery}}
+                            {{on "input" this.updateSearch}}
+                        />
+                    </div>
+                </div>
+
+                {{! Variable list }}
+                <div class="flex-1 overflow-y-auto">
+                    {{! Global variables section }}
+                    <div class="border-b border-gray-100 dark:border-gray-800">
+                        <button
+                            type="button"
+                            class="w-full flex items-center justify-between px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                            {{on "click" (fn this.toggleNamespace "__global__")}}
+                        >
+                            <div class="flex items-center space-x-2">
+                                <FaIcon @icon="globe" class="w-3.5 h-3.5 text-purple-500" />
+                                <span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Global</span>
+                                <span class="text-xs text-gray-400 dark:text-gray-500">Always available</span>
+                            </div>
+                            <FaIcon @icon={{if (this.isExpanded "__global__") "chevron-up" "chevron-down"}} class="w-3 h-3 text-gray-400" />
+                        </button>
+                        {{#if (this.isExpanded "__global__")}}
+                            {{#each this.globalVariables as |variable|}}
+                                <button
+                                    type="button"
+                                    class="w-full flex items-center px-4 py-1.5 hover:bg-blue-50 dark:hover:bg-blue-900/20 group transition-colors"
+                                    {{on "click" (fn this.insertVariable variable)}}
+                                >
+                                    <FaIcon @icon={{this.typeIcon variable.type}} class="w-3 h-3 mr-2 text-gray-400 dark:text-gray-500 flex-shrink-0" />
+                                    <div class="flex-1 min-w-0 text-left">
+                                        <span class="block text-xs text-gray-700 dark:text-gray-300 font-mono">{{variable.path}}</span>
+                                        <span class="block text-xs text-gray-400 dark:text-gray-500 truncate">{{variable.label}}</span>
+                                    </div>
+                                    <span class="text-xs text-gray-300 dark:text-gray-600 font-mono truncate max-w-24 ml-2 hidden group-hover:block">{{variable.example}}</span>
+                                </button>
+                            {{/each}}
+                        {{/if}}
+                    </div>
+
+                    {{! Context schema sections }}
+                    {{#if this.hasResults}}
+                        {{#each this.filteredSchemas as |schema|}}
+                            <div class="border-b border-gray-100 dark:border-gray-800">
+                                <button
+                                    type="button"
+                                    class="w-full flex items-center justify-between px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                                    {{on "click" (fn this.toggleNamespace schema.namespace)}}
+                                >
+                                    <div class="flex items-center space-x-2">
+                                        <FaIcon @icon={{schema.icon}} class="w-3.5 h-3.5 text-blue-500" />
+                                        <span class="text-xs font-semibold text-gray-700 dark:text-gray-300 capitalize">{{schema.label}}</span>
+                                        <span class="text-xs text-gray-400 dark:text-gray-500">{{schema.variables.length}} variables</span>
+                                    </div>
+                                    <FaIcon @icon={{if (this.isExpanded schema.namespace) "chevron-up" "chevron-down"}} class="w-3 h-3 text-gray-400" />
+                                </button>
+                                {{#if (this.isExpanded schema.namespace)}}
+                                    {{#each schema.variables as |variable|}}
+                                        <button
+                                            type="button"
+                                            class="w-full flex items-center px-4 py-1.5 hover:bg-blue-50 dark:hover:bg-blue-900/20 group transition-colors"
+                                            {{on "click" (fn this.insertVariable variable)}}
+                                        >
+                                            <FaIcon @icon={{this.typeIcon variable.type}} class="w-3 h-3 mr-2 text-gray-400 dark:text-gray-500 flex-shrink-0" />
+                                            <div class="flex-1 min-w-0 text-left">
+                                                <span class="block text-xs text-gray-700 dark:text-gray-300 font-mono">{{variable.path}}</span>
+                                                <span class="block text-xs text-gray-400 dark:text-gray-500 truncate">{{variable.label}}</span>
+                                            </div>
+                                            <span class="text-xs text-gray-300 dark:text-gray-600 font-mono truncate max-w-24 ml-2 hidden group-hover:block">{{variable.example}}</span>
+                                        </button>
+                                    {{/each}}
+                                {{/if}}
+                            </div>
+                        {{/each}}
+                    {{else}}
+                        <div class="flex flex-col items-center justify-center py-10 text-center">
+                            <FaIcon @icon="magnifying-glass" class="w-6 h-6 text-gray-300 dark:text-gray-600 mb-2" />
+                            <p class="text-xs text-gray-400 dark:text-gray-500">No variables match "{{this.searchQuery}}"</p>
+                        </div>
+                    {{/if}}
+                </div>
+            {{/if}}
+
+            {{! FORMULA TAB }}
+            {{#if (eq this.activeTab "formula")}}
+                <div class="flex-1 overflow-y-auto p-4 space-y-4">
+                    {{! Syntax guide }}
+                    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
+                        <p class="text-xs font-semibold text-blue-700 dark:text-blue-300 mb-1">Formula Syntax</p>
+                        <p class="text-xs text-blue-600 dark:text-blue-400 font-mono">[{ expression }]</p>
+                        <p class="text-xs text-blue-500 dark:text-blue-400 mt-1">Use variables inside the expression:</p>
+                        <p class="text-xs text-blue-600 dark:text-blue-400 font-mono mt-0.5">[{ {invoice.subtotal} * 1.1 }]</p>
+                        <p class="text-xs text-blue-600 dark:text-blue-400 font-mono">[{ {order.quantity} * {order.unit_price} }]</p>
+                        <p class="text-xs text-blue-500 dark:text-blue-400 mt-1">Supported: + − × ÷ ( ) round() abs() ceil() floor()</p>
+                    </div>
+
+                    {{! Formula input }}
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Expression</label>
+                        <textarea
+                            class="w-full font-mono text-xs bg-gray-50 dark:bg-gray-800 border {{if this.formulaError 'border-red-400' 'border-gray-200 dark:border-gray-700'}} rounded-lg px-3 py-2 outline-none focus:border-blue-400 dark:focus:border-blue-500 resize-none min-h-20"
+                            placeholder="{invoice.subtotal} * 1.1"
+                            {{on "input" this.updateFormula}}
+                        >{{this.formulaExpression}}</textarea>
+                        {{#if this.formulaError}}
+                            <p class="text-xs text-red-500 mt-1">{{this.formulaError}}</p>
+                        {{/if}}
+                    </div>
+
+                    {{! Preview }}
+                    {{#if this.formulaPreview}}
+                        <div>
+                            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Preview</label>
+                            <div class="font-mono text-xs bg-gray-900 dark:bg-gray-950 text-green-400 rounded-lg px-3 py-2 break-all">
+                                {{this.formulaPreview}}
+                            </div>
+                        </div>
+                    {{/if}}
+
+                    {{! Quick-insert variables into formula }}
+                    <div>
+                        <p class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">Quick-insert variable</p>
+                        <div class="space-y-1 max-h-40 overflow-y-auto">
+                            {{#each this.contextSchemas as |schema|}}
+                                {{#each schema.variables as |variable|}}
+                                    {{#if (eq variable.type "number")}}
+                                        <button
+                                            type="button"
+                                            class="w-full flex items-center px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-left transition-colors"
+                                            {{on "click" (fn this.insertVariableIntoFormula variable)}}
+                                        >
+                                            <FaIcon @icon="hashtag" class="w-3 h-3 mr-2 text-gray-400 flex-shrink-0" />
+                                            <span class="text-xs font-mono text-gray-700 dark:text-gray-300">{{variable.path}}</span>
+                                            <span class="text-xs text-gray-400 dark:text-gray-500 ml-2 truncate">{{variable.label}}</span>
+                                        </button>
+                                    {{/if}}
+                                {{/each}}
+                            {{/each}}
+                        </div>
+                    </div>
+                </div>
+
+                {{! Footer }}
+                <div class="flex items-center justify-end space-x-2 px-4 py-3 border-t border-gray-200 dark:border-gray-700">
+                    <button type="button" class="px-3 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors" {{on "click" this.close}}>
+                        Cancel
+                    </button>
+                    <Button
+                        @type="primary"
+                        @text="Insert Formula"
+                        @icon="calculator"
+                        @size="xs"
+                        @isDisabled={{not this.formulaExpression}}
+                        @onClick={{this.insertFormula}}
+                    />
+                </div>
+            {{/if}}
+        </div>
+    </div>
+{{/if}}

package/addon/components/template-builder/variable-picker.js

@@ -0,0 +1,181 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+/**
+ * TemplateBuilderVariablePickerComponent
+ *
+ * A modal/panel for browsing available variables from the context schema
+ * and inserting them — or a formula using the [{...}] syntax — into the
+ * currently targeted element property.
+ *
+ * The component is split into two tabs:
+ *   1. Variables — browse the context schema tree and click to insert
+ *   2. Formula   — compose a formula expression with variable autocomplete
+ *
+ * @argument {Array}    contextSchemas - Array of context schema objects from the API
+ *                                       Each schema: { namespace, label, icon, variables: [{path, label, type, example}] }
+ * @argument {Boolean}  isOpen         - Whether the picker is visible
+ * @argument {Function} onInsert       - Called with the final string to insert (e.g. '{invoice.total}' or '[{ {a} + {b} }]')
+ * @argument {Function} onClose        - Called when the picker should be dismissed
+ */
+export default class TemplateBuilderVariablePickerComponent extends Component {
+    @tracked activeTab = 'variables';
+    @tracked searchQuery = '';
+    @tracked expandedNamespaces = new Set();
+    @tracked formulaExpression = '';
+    @tracked formulaError = null;
+
+    // -------------------------------------------------------------------------
+    // Computed
+    // -------------------------------------------------------------------------
+
+    get contextSchemas() {
+        const raw = this.args.contextSchemas;
+        // Guard: the API may return an object keyed by namespace instead of an
+        // array. The routes normalise this, but be defensive here too.
+        if (Array.isArray(raw)) return raw;
+        return [];
+    }
+
+    get filteredSchemas() {
+        const q = this.searchQuery.toLowerCase().trim();
+        if (!q) return this.contextSchemas;
+
+        return this.contextSchemas
+            .map((schema) => ({
+                ...schema,
+                variables: (schema.variables ?? []).filter((v) => v.path.toLowerCase().includes(q) || (v.label ?? '').toLowerCase().includes(q)),
+            }))
+            .filter((schema) => schema.variables.length > 0);
+    }
+
+    get hasResults() {
+        return this.filteredSchemas.some((s) => (s.variables ?? []).length > 0);
+    }
+
+    get formulaPreview() {
+        if (!this.formulaExpression.trim()) return '';
+        return `[{ ${this.formulaExpression.trim()} }]`;
+    }
+
+    @action
+    isExpanded(namespace) {
+        return this.expandedNamespaces.has(namespace);
+    }
+
+    // -------------------------------------------------------------------------
+    // Actions
+    // -------------------------------------------------------------------------
+
+    @action
+    switchTab(tab) {
+        this.activeTab = tab;
+    }
+
+    @action
+    updateSearch(event) {
+        this.searchQuery = event.target.value;
+        // Auto-expand all namespaces when searching
+        if (this.searchQuery) {
+            this.expandedNamespaces = new Set(this.contextSchemas.map((s) => s.namespace));
+        }
+    }
+
+    @action
+    toggleNamespace(namespace) {
+        const next = new Set(this.expandedNamespaces);
+        if (next.has(namespace)) {
+            next.delete(namespace);
+        } else {
+            next.add(namespace);
+        }
+        this.expandedNamespaces = next;
+    }
+
+    @action
+    insertVariable(variable) {
+        const token = `{${variable.path}}`;
+        if (this.args.onInsert) {
+            this.args.onInsert(token);
+        }
+        this.close();
+    }
+
+    @action
+    insertVariableIntoFormula(variable) {
+        this.formulaExpression = `${this.formulaExpression}{${variable.path}}`;
+    }
+
+    @action
+    updateFormula(event) {
+        this.formulaExpression = event.target.value;
+        this.formulaError = null;
+    }
+
+    @action
+    insertFormula() {
+        if (!this.formulaExpression.trim()) return;
+
+        // Basic client-side validation: check balanced braces
+        const expr = this.formulaExpression;
+        const openBraces = (expr.match(/\{/g) ?? []).length;
+        const closeBraces = (expr.match(/\}/g) ?? []).length;
+        if (openBraces !== closeBraces) {
+            this.formulaError = 'Unbalanced curly braces in formula.';
+            return;
+        }
+
+        const token = `[{ ${expr.trim()} }]`;
+        if (this.args.onInsert) {
+            this.args.onInsert(token);
+        }
+        this.close();
+    }
+
+    @action
+    close() {
+        this.searchQuery = '';
+        this.formulaExpression = '';
+        this.formulaError = null;
+        this.activeTab = 'variables';
+        if (this.args.onClose) {
+            this.args.onClose();
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Global variable shortcuts
+    // -------------------------------------------------------------------------
+
+    get globalVariables() {
+        return [
+            { path: 'company.name', label: 'Company Name', type: 'string', example: 'Acme Logistics' },
+            { path: 'company.email', label: 'Company Email', type: 'string', example: 'hello@acme.com' },
+            { path: 'company.phone', label: 'Company Phone', type: 'string', example: '+1 555 0100' },
+            { path: 'company.address', label: 'Company Address', type: 'string', example: '123 Main St' },
+            { path: 'company.logo', label: 'Company Logo URL', type: 'url', example: 'https://...' },
+            { path: 'user.name', label: 'Current User', type: 'string', example: 'John Doe' },
+            { path: 'user.email', label: 'User Email', type: 'string', example: 'john@acme.com' },
+            { path: 'now', label: 'Current DateTime', type: 'datetime', example: '2025-03-03 14:00' },
+            { path: 'today', label: "Today's Date", type: 'date', example: '2025-03-03' },
+            { path: 'year', label: 'Current Year', type: 'number', example: '2025' },
+        ];
+    }
+
+    get typeIcon() {
+        return (type) => {
+            const map = {
+                string: 'font',
+                number: 'hashtag',
+                date: 'calendar',
+                datetime: 'clock',
+                url: 'link',
+                boolean: 'toggle-on',
+                array: 'list',
+                object: 'cube',
+            };
+            return map[type] ?? 'circle-dot';
+        };
+    }
+}