@fleetbase/ember-ui 0.3.22 → 0.3.24

package/addon/components/layout/header/smart-nav-menu/dropdown.hbs

@@ -2,9 +2,10 @@
     Layout::Header::SmartNavMenu::Dropdown
     Phase 2: multi-column card grid with search filter.
 
-    Shortcuts are expanded as independent sibling items in the grid (AWS-style).
-    The JS getter `expandedItems` interleaves parent MenuItems and their
-    shortcut objects so each appears as its own flat card.
+    Shortcuts are already registered as first-class items in the universe
+    registry by menu-service.registerHeaderMenuItem(), so @items already
+    contains both parent extension items and their shortcut siblings.
+    No client-side expansion is needed.
 
     Args:
       @items            - Array of MenuItem objects to display
@@ -15,9 +16,13 @@
       @onQuickPin       - Action to pin an item directly from the dropdown
       @atPinnedLimit    - Boolean: true when the bar is full (pin button hidden)
 
-    NOTE: Route-based cards use <LinkToExternal> with no click handler.
-    The dropdown is closed via the routeDidChange listener in smart-nav-menu.js
-    which sets isMoreOpen = false on every route transition.
+    Click-area pattern:
+      Each card is wrapped in a `snm-dropdown-card-wrap` div (position: relative).
+      The card itself is the <LinkToExternal> (or <a> for onClick items), making
+      the entire card surface clickable.  The pin button is a sibling of the card
+      inside the wrapper, absolutely positioned in the top-right corner so it
+      sits above the card link and receives its own clicks without violating the
+      no-nested-interactive rule.
 }}
 <div
     class="snm-dropdown snm-dropdown--wide"
@@ -38,7 +43,7 @@
         </button>
     </div>
 
-    {{! ── Search bar (own row) ────────────────────────────────────────────── }}
+    {{! ── Search bar ──────────────────────────────────────────────────────── }}
     <div class="snm-dropdown-search-bar">
         <span class="snm-dropdown-search-icon" aria-hidden="true">
             <FaIcon @icon="magnifying-glass" @size="xs" />
@@ -76,15 +81,15 @@
         {{else}}
             {{#each this.filteredItems as |item|}}
                 {{#if item._isShortcut}}
-                    {{! ── Shortcut sibling card (AWS-style flat item) ─────── }}
-                    <div class="snm-dropdown-card" role="presentation">
-                        <div class="snm-dropdown-card-header">
-                            <LinkToExternal
-                                @route={{item.route}}
-                                id={{concat (dasherize (or item.route item.id "sc")) "-dropdown-card"}}
-                                class="snm-dropdown-card-link"
-                                title={{item.title}}
-                            >
+                    {{! ── Shortcut card ───────────────────────────────────── }}
+                    <div class="snm-dropdown-card-wrap">
+                        <LinkToExternal
+                            @route={{item.route}}
+                            id={{concat (dasherize (or item.route item.id "sc")) "-dropdown-card"}}
+                            class="snm-dropdown-card"
+                            title={{item.title}}
+                        >
+                            <div class="snm-dropdown-card-header">
                                 <span class="snm-dropdown-card-icon">
                                     {{#if item.iconComponent}}
                                         {{component (lazy-engine-component item.iconComponent) options=item.iconComponentOptions}}
@@ -92,43 +97,42 @@
                                         <FaIcon @icon={{or item.icon "circle-dot"}} @prefix={{item.iconPrefix}} @size="sm" />
                                     {{/if}}
                                 </span>
-                                {{! Title row: shortcut name + always-visible muted parent attribution }}
                                 <span class="snm-dropdown-card-title-group">
                                     <span class="snm-dropdown-card-title">{{item.title}}</span>
                                     {{#if item._parentTitle}}
                                         <span class="snm-dropdown-card-parent-label" aria-label="from {{item._parentTitle}}">· {{item._parentTitle}}</span>
                                     {{/if}}
                                 </span>
-                            </LinkToExternal>
-                            {{#unless @atPinnedLimit}}
-                                <button
-                                    type="button"
-                                    class="snm-dropdown-pin-btn"
-                                    title="Pin to navigation bar"
-                                    aria-label="Pin {{item.title}} to navigation bar"
-                                    {{on "click" (fn @onQuickPin item)}}
-                                >
-                                    <FaIcon @icon="thumbtack" @size="xs" />
-                                </button>
-                            {{/unless}}
-                        </div>
-                        {{#if item.description}}
-                            <p class="snm-dropdown-card-description">{{item.description}}</p>
-                        {{else if item._parentTitle}}
-                            <p class="snm-dropdown-card-description snm-dropdown-card-description--from"><em>from {{item._parentTitle}}</em></p>
-                        {{/if}}
+                            </div>
+                            {{#if item.description}}
+                                <p class="snm-dropdown-card-description">{{item.description}}</p>
+                            {{else if item._parentTitle}}
+                                <p class="snm-dropdown-card-description snm-dropdown-card-description--from"><em>from {{item._parentTitle}}</em></p>
+                            {{/if}}
+                        </LinkToExternal>
+                        {{#unless @atPinnedLimit}}
+                            <button
+                                type="button"
+                                class="snm-dropdown-pin-btn"
+                                title="Pin to navigation bar"
+                                aria-label="Pin {{item.title}} to navigation bar"
+                                {{on "click" (fn @onQuickPin item)}}
+                            >
+                                <FaIcon @icon="thumbtack" @size="xs" />
+                            </button>
+                        {{/unless}}
                     </div>
                 {{else}}
                     {{! ── Primary extension card ──────────────────────────── }}
-                    <div class="snm-dropdown-card" role="presentation">
-                        <div class="snm-dropdown-card-header">
-                            {{#if item.onClick}}
-                                <a
-                                    href="javascript:;"
-                                    class="snm-dropdown-card-link"
-                                    title={{item.title}}
-                                    {{on "click" (fn this.handleItemClick item)}}
-                                >
+                    <div class="snm-dropdown-card-wrap">
+                        {{#if item.onClick}}
+                            <a
+                                href="javascript:;"
+                                class="snm-dropdown-card"
+                                title={{item.title}}
+                                {{on "click" (fn this.handleItemClick item)}}
+                            >
+                                <div class="snm-dropdown-card-header">
                                     <span class="snm-dropdown-card-icon">
                                         {{#if item.iconComponent}}
                                             {{component (lazy-engine-component item.iconComponent) options=item.iconComponentOptions}}
@@ -142,14 +146,19 @@
                                             <span class="snm-dropdown-card-parent-label" aria-label="from {{item._parentTitle}}">· {{item._parentTitle}}</span>
                                         {{/if}}
                                     </span>
-                                </a>
-                            {{else}}
-                                <LinkToExternal
-                                    @route={{item.route}}
-                                    id={{concat (dasherize (or item.route item.id "nav")) "-dropdown-card"}}
-                                    class="snm-dropdown-card-link"
-                                    title={{item.title}}
-                                >
+                                </div>
+                                {{#if item.description}}
+                                    <p class="snm-dropdown-card-description">{{item.description}}</p>
+                                {{/if}}
+                            </a>
+                        {{else}}
+                            <LinkToExternal
+                                @route={{item.route}}
+                                id={{concat (dasherize (or item.route item.id "nav")) "-dropdown-card"}}
+                                class="snm-dropdown-card"
+                                title={{item.title}}
+                            >
+                                <div class="snm-dropdown-card-header">
                                     <span class="snm-dropdown-card-icon">
                                         {{#if item.iconComponent}}
                                             {{component (lazy-engine-component item.iconComponent) options=item.iconComponentOptions}}
@@ -163,23 +172,23 @@
                                             <span class="snm-dropdown-card-parent-label" aria-label="from {{item._parentTitle}}">· {{item._parentTitle}}</span>
                                         {{/if}}
                                     </span>
-                                </LinkToExternal>
-                            {{/if}}
-                            {{#unless @atPinnedLimit}}
-                                <button
-                                    type="button"
-                                    class="snm-dropdown-pin-btn"
-                                    title="Pin to navigation bar"
-                                    aria-label="Pin {{item.title}} to navigation bar"
-                                    {{on "click" (fn @onQuickPin item)}}
-                                >
-                                    <FaIcon @icon="thumbtack" @size="xs" />
-                                </button>
-                            {{/unless}}
-                        </div>
-                        {{#if item.description}}
-                            <p class="snm-dropdown-card-description">{{item.description}}</p>
+                                </div>
+                                {{#if item.description}}
+                                    <p class="snm-dropdown-card-description">{{item.description}}</p>
+                                {{/if}}
+                            </LinkToExternal>
                         {{/if}}
+                        {{#unless @atPinnedLimit}}
+                            <button
+                                type="button"
+                                class="snm-dropdown-pin-btn"
+                                title="Pin to navigation bar"
+                                aria-label="Pin {{item.title}} to navigation bar"
+                                {{on "click" (fn @onQuickPin item)}}
+                            >
+                                <FaIcon @icon="thumbtack" @size="xs" />
+                            </button>
+                        {{/unless}}
                     </div>
                 {{/if}}
             {{/each}}

package/addon/components/layout/header/smart-nav-menu/dropdown.js

@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { dasherize } from '@ember/string';
 import { isArray } from '@ember/array';
 import { htmlSafe } from '@ember/template';
 
@@ -25,62 +24,16 @@ export default class LayoutHeaderSmartNavMenuDropdownComponent extends Component
     }
 
     /**
-     * Expand every MenuItem's shortcuts array into sibling flat items.
-     * The resulting array interleaves parent items and their shortcuts in
-     * registration order, matching the AWS Console pattern.
+     * Returns the items array as-is for filtering.
      *
-     * Each shortcut is normalised to:
-     *   { title, route, icon, iconPrefix, id, _isShortcut: true, _parentTitle }
+     * Shortcuts are already registered as first-class items in the universe
+     * registry (with `_isShortcut: true` and `_parentTitle` set) by
+     * `menu-service.registerHeaderMenuItem()` at boot time.  There is no need
+     * to expand `item.shortcuts` here — doing so would produce a duplicate card
+     * for every shortcut (one from the registry, one from the expansion).
      */
     get expandedItems() {
-        const items = this.args.items ?? [];
-        const result = [];
-        for (const item of items) {
-            result.push(item);
-            if (isArray(item.shortcuts)) {
-                for (const sc of item.shortcuts) {
-                    const scId = sc.id ?? dasherize(item.id + '-sc-' + sc.title);
-                    result.push({
-                        // ── Identity ────────────────────────────────────────
-                        id: scId,
-                        slug: sc.slug ?? scId,
-                        title: sc.title,
-                        text: sc.text ?? sc.title,
-                        label: sc.label ?? sc.title,
-
-                        // ── Routing ──────────────────────────────────────────
-                        route: sc.route ?? item.route,
-                        queryParams: sc.queryParams ?? {},
-                        routeParams: sc.routeParams ?? [],
-
-                        // ── Icons (full surface) ─────────────────────────────
-                        icon: sc.icon ?? item.icon ?? 'arrow-right',
-                        iconPrefix: sc.iconPrefix ?? item.iconPrefix ?? null,
-                        iconSize: sc.iconSize ?? null,
-                        iconClass: sc.iconClass ?? null,
-                        iconComponent: sc.iconComponent ?? null,
-                        iconComponentOptions: sc.iconComponentOptions ?? {},
-
-                        // ── Metadata ─────────────────────────────────────────
-                        description: sc.description ?? null,
-                        tags: isArray(sc.tags) ? sc.tags : isArray(item.tags) ? item.tags : null,
-
-                        // ── Behaviour ────────────────────────────────────────
-                        onClick: sc.onClick ?? null,
-                        disabled: sc.disabled ?? false,
-
-                        // ── Styling ───────────────────────────────────────────
-                        class: sc.class ?? null,
-
-                        // ── Internal flags ────────────────────────────────────
-                        _isShortcut: true,
-                        _parentTitle: item.title,
-                        _parentId: item.id,
-                    });
-                }
-            }
-        }
-        return result;
+        return this.args.items ?? [];
     }
 
     get filteredItems() {

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

@@ -0,0 +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}}
+    {{on "click" this.handleDeselectAll}}
+    ...attributes
+>
+    {{#each this.elements key="uuid" as |element|}}
+        <TemplateBuilder::ElementRenderer
+            @element={{element}}
+            @isSelected={{eq element.uuid this.selectedUuid}}
+            @zoom={{this.zoom}}
+            @canvasWidth={{this.canvasWidthPx}}
+            @canvasHeight={{this.canvasHeightPx}}
+            @onSelect={{this.handleSelectElement}}
+            @onMove={{@onMoveElement}}
+            @onResize={{@onResizeElement}}
+        />
+    {{/each}}
+</div>

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

@@ -0,0 +1,116 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+
+/**
+ * TemplateBuilderCanvasComponent
+ *
+ * Renders the document canvas — a pixel-accurate representation of the
+ * template page. Each element is rendered by an ElementRenderer component
+ * that owns its own interact.js instance, drag/resize behaviour, and
+ * selection tap handling.
+ *
+ * This component is intentionally thin:
+ *   - Computes canvas dimensions and style from @template
+ *   - Tracks which element is selected (by uuid primitive)
+ *   - Handles deselect-all when the canvas background is clicked
+ *   - Passes @canvasWidth / @canvasHeight to each ElementRenderer so it can
+ *     clamp drag/resize to the canvas boundary
+ *
+ * It has no knowledge of interact.js, DOM nodes, or element data mutations.
+ *
+ * @argument {Object}   template         - The template object (width, height, unit, background_color, content)
+ * @argument {Object}   selectedElement  - The currently selected element (or null)
+ * @argument {Number}   zoom             - Zoom level (1 = 100%)
+ * @argument {Function} onSelectElement  - Called with (element) when an element is tapped
+ * @argument {Function} onMoveElement    - Called with (uuid, { x, y }) after a drag ends
+ * @argument {Function} onResizeElement  - Called with (uuid, { x, y, width, height }) after a resize ends
+ * @argument {Function} onDeselectAll    - Called when the canvas background is clicked
+ */
+export default class TemplateBuilderCanvasComponent extends Component {
+    canvasId = `tb-canvas-${guidFor(this)}`;
+
+    // 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
+    // -------------------------------------------------------------------------
+
+    get zoom() {
+        return this.args.zoom ?? 1;
+    }
+
+    get canvasWidthPx() {
+        const { template } = this.args;
+        if (!template) return 794;
+        return this._unitToPx(template.width ?? 210, template.unit ?? 'mm');
+    }
+
+    get canvasHeightPx() {
+        const { template } = this.args;
+        if (!template) return 1123;
+        return this._unitToPx(template.height ?? 297, template.unit ?? 'mm');
+    }
+
+    get canvasStyle() {
+        const w = this.canvasWidthPx * this.zoom;
+        const h = this.canvasHeightPx * this.zoom;
+        const bg = this.args.template?.background_color ?? '#ffffff';
+        return `width:${w}px; height:${h}px; background:${bg}; position:relative; overflow:hidden;`;
+    }
+
+    get elements() {
+        return this.args.template?.content ?? [];
+    }
+
+    get selectedUuid() {
+        return this.args.selectedElement?.uuid ?? null;
+    }
+
+    // -------------------------------------------------------------------------
+    // Selection
+    // -------------------------------------------------------------------------
+
+    @action
+    handleSelectElement(element) {
+        // 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(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();
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Helpers
+    // -------------------------------------------------------------------------
+
+    _unitToPx(value, unit) {
+        const PPI = 96;
+        switch (unit) {
+            case 'mm':
+                return Math.round((value / 25.4) * PPI);
+            case 'cm':
+                return Math.round((value / 2.54) * PPI);
+            case 'in':
+                return Math.round(value * PPI);
+            case 'px':
+            default:
+                return Math.round(value);
+        }
+    }
+}

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

@@ -0,0 +1,126 @@
+{{! Template Builder Element Renderer }}
+{{! Each element owns its own interact.js instance. did-insert sets it up;
+    will-destroy tears it down. The parent canvas passes @onMove, @onResize,
+    and @onSelect callbacks — it never touches the DOM directly. }}
+<div
+    class="tb-element {{this.selectionClass}}"
+    style={{this.wrapperStyle}}
+    data-element-type={{this.elementType}}
+    data-element-uuid={{@element.uuid}}
+    {{did-insert this.handleInsert}}
+    {{did-update this.handleUpdate @element}}
+    {{will-destroy this.handleDestroy}}
+>
+    {{! TEXT }}
+    {{#if this.isText}}
+        <div class="tb-element-text" style={{this.textStyle}}>
+            {{this.textContent}}
+        </div>
+    {{/if}}
+
+    {{! IMAGE }}
+    {{#if this.isImage}}
+        {{#if this.imageSrc}}
+            <img
+                src={{this.imageSrc}}
+                alt={{this.imageAlt}}
+                style={{this.imageStyle}}
+                draggable="false"
+            />
+        {{else}}
+            <div class="w-full h-full flex items-center justify-center bg-gray-100 dark:bg-gray-700 border border-dashed border-gray-300 dark:border-gray-600 rounded">
+                <div class="text-center text-gray-400 dark:text-gray-500 text-xs">
+                    <FaIcon @icon="image" @size="lg" class="mb-1 block" />
+                    <span>Image</span>
+                </div>
+            </div>
+        {{/if}}
+    {{/if}}
+
+    {{! TABLE }}
+    {{#if this.isTable}}
+        <div class="tb-element-table w-full h-full overflow-auto">
+            <table class="w-full border-collapse text-xs" style={{this.tableBorderStyle}}>
+                {{#if this.tableColumns}}
+                    <thead>
+                        <tr>
+                            {{#each this.tableColumns as |col|}}
+                                <th class="border px-2 py-1 text-left" style={{this.tableHeaderStyle}}>
+                                    {{col.label}}
+                                </th>
+                            {{/each}}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {{#if this.tableRows.length}}
+                            {{#each this.tableRows as |row|}}
+                                <tr>
+                                    {{#each this.tableColumns as |col|}}
+                                        <td class="border px-2 py-1" style={{this.tableCellStyle}}>
+                                            {{get row col.key}}
+                                        </td>
+                                    {{/each}}
+                                </tr>
+                            {{/each}}
+                        {{else}}
+                            {{! Preview placeholder rows }}
+                            {{#each (array 1 2 3)}}
+                                <tr>
+                                    {{#each this.tableColumns}}
+                                        <td class="border px-2 py-1 text-gray-400" style={{this.tableCellStyle}}>—</td>
+                                    {{/each}}
+                                </tr>
+                            {{/each}}
+                        {{/if}}
+                    </tbody>
+                {{else}}
+                    <tbody>
+                        <tr>
+                            <td class="border px-2 py-1 text-gray-400 text-center" colspan="1">No columns defined</td>
+                        </tr>
+                    </tbody>
+                {{/if}}
+            </table>
+        </div>
+    {{/if}}
+
+    {{! LINE }}
+    {{#if this.isLine}}
+        <div class="tb-element-line" style={{this.lineStyle}}>
+            <div style={{this.lineInnerStyle}}></div>
+        </div>
+    {{/if}}
+
+    {{! SHAPE }}
+    {{#if this.isShape}}
+        <div class="tb-element-shape" style={{this.shapeStyle}}></div>
+    {{/if}}
+
+    {{! QR CODE }}
+    {{#if this.isQrCode}}
+        <div class="w-full h-full flex items-center justify-center bg-gray-50 dark:bg-gray-800 border border-dashed border-gray-300 dark:border-gray-600 rounded">
+            <div class="text-center text-gray-400 dark:text-gray-500 text-xs">
+                <FaIcon @icon="qrcode" @size="2x" class="mb-1 block" />
+                <span class="block truncate max-w-full px-1">{{this.codeLabel}}</span>
+            </div>
+        </div>
+    {{/if}}
+
+    {{! BARCODE }}
+    {{#if this.isBarcode}}
+        <div class="w-full h-full flex items-center justify-center bg-gray-50 dark:bg-gray-800 border border-dashed border-gray-300 dark:border-gray-600 rounded">
+            <div class="text-center text-gray-400 dark:text-gray-500 text-xs">
+                <FaIcon @icon="barcode" @size="2x" class="mb-1 block" />
+                <span class="block truncate max-w-full px-1">{{this.codeLabel}}</span>
+            </div>
+        </div>
+    {{/if}}
+
+    {{! Selection handles (shown when selected) }}
+    {{#if @isSelected}}
+        <div class="tb-element-handle tb-handle-nw"></div>
+        <div class="tb-element-handle tb-handle-ne"></div>
+        <div class="tb-element-handle tb-handle-sw"></div>
+        <div class="tb-element-handle tb-handle-se"></div>
+    {{/if}}
+</div>