@fleetbase/ember-ui 0.3.22 → 0.3.24

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

@@ -0,0 +1,398 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import interact from 'interactjs';
+
+/**
+ * TemplateBuilderElementRendererComponent
+ *
+ * Renders a single template element on the canvas and owns all interaction
+ * behaviour for that element: drag, resize, and selection.
+ *
+ * Responsibilities
+ * ----------------
+ * - Sets up and tears down its own interact.js instance in did-insert /
+ *   will-destroy. No parent component needs to know about interact.js.
+ * - Emits @onMove(uuid, { x, y }) when a drag gesture ends.
+ * - Emits @onResize(uuid, { x, y, width, height }) when a resize gesture ends.
+ * - Emits @onSelect(element) when the element is tapped/clicked.
+ *
+ * Positioning strategy
+ * --------------------
+ * The wrapper div is placed at `left: 0; top: 0` and positioned exclusively
+ * via `transform: translate(x, y)`. interact.js updates this transform
+ * imperatively during drag/resize. Glimmer's wrapperStyle deliberately omits
+ * the transform so Glimmer re-renders never overwrite interact.js's live values.
+ *
+ * Canvas boundary clamping
+ * ------------------------
+ * @canvasWidth and @canvasHeight (in unscaled template pixels) are passed from
+ * the canvas so the element cannot be dragged or resized outside the canvas.
+ * @zoom is used to convert interact.js screen-pixel deltas to template pixels.
+ *
+ * @argument {Object}   element      - The element data object from template.content
+ * @argument {Boolean}  isSelected   - Whether this element is currently selected
+ * @argument {Number}   zoom         - Canvas zoom level (1 = 100%)
+ * @argument {Number}   canvasWidth  - Canvas width in unscaled template pixels
+ * @argument {Number}   canvasHeight - Canvas height in unscaled template pixels
+ * @argument {Function} onSelect     - Called with (element) when element is tapped
+ * @argument {Function} onMove       - Called with (uuid, { x, y }) after drag ends
+ * @argument {Function} onResize     - Called with (uuid, { x, y, width, height }) after resize ends
+ */
+export default class TemplateBuilderElementRendererComponent extends Component {
+    /** @type {import('interactjs').Interactable|null} */
+    _interactable = null;
+
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+
+    @action
+    handleInsert(el) {
+        // Seed position data-attributes from the element data model.
+        el.dataset.x = this.args.element.x ?? 0;
+        el.dataset.y = this.args.element.y ?? 0;
+
+        // Apply the initial CSS transform so the element appears at the correct
+        // position immediately, before any interact.js event fires.
+        this._applyTransform(el);
+
+        // Set up interact.js on this element's DOM node.
+        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() {
+        if (this._interactable) {
+            try {
+                this._interactable.unset();
+            } catch (_) {
+                // ignore
+            }
+            this._interactable = null;
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Interaction setup
+    // -------------------------------------------------------------------------
+
+    _setupInteract(el) {
+        // ── Helpers ────────────────────────────────────────────────────────────
+
+        const getPos = () => ({
+            x: parseFloat(el.dataset.x) || 0,
+            y: parseFloat(el.dataset.y) || 0,
+        });
+
+        const applyTransform = (x, y) => {
+            // Read rotation from the data-attribute so it stays current even
+            // after property-panel updates (which re-render @element but do not
+            // recreate the interact.js instance).
+            const rotation = parseFloat(el.dataset.rotation) || 0;
+            el.style.transform = rotation ? `translate(${x}px, ${y}px) rotate(${rotation}deg)` : `translate(${x}px, ${y}px)`;
+            el.dataset.x = x;
+            el.dataset.y = y;
+        };
+
+        // Read zoom and canvas dimensions at event time so changes are reflected
+        // without needing to recreate the interactable.
+        const getZoom = () => this.args.zoom ?? 1;
+        const getCanvas = () => ({
+            w: this.args.canvasWidth ?? Infinity,
+            h: this.args.canvasHeight ?? Infinity,
+        });
+
+        // ── Interactable ───────────────────────────────────────────────────────
+        this._interactable = interact(el)
+            // Tap fires for clicks/taps even when interact.js has consumed the
+            // underlying pointer events for drag detection.
+            .on('tap', (event) => {
+                event.stopPropagation();
+                if (this.args.onSelect) {
+                    this.args.onSelect(this.args.element);
+                }
+            })
+
+            // ── Drag ──────────────────────────────────────────────────────────
+            .draggable({
+                listeners: {
+                    move: (event) => {
+                        const zoom = getZoom();
+                        const canvas = getCanvas();
+                        const pos = getPos();
+
+                        let x = pos.x + event.dx / zoom;
+                        let y = pos.y + event.dy / zoom;
+
+                        // Clamp so the element cannot leave the canvas.
+                        const elW = parseFloat(el.style.width) || (this.args.element.width ?? 100);
+                        const elH = parseFloat(el.style.height) || (this.args.element.height ?? 30);
+                        x = Math.max(0, Math.min(x, canvas.w - elW));
+                        y = Math.max(0, Math.min(y, canvas.h - elH));
+
+                        applyTransform(x, y);
+                    },
+                    end: () => {
+                        const pos = getPos();
+                        if (this.args.onMove) {
+                            this.args.onMove(this.args.element.uuid, {
+                                x: Math.round(pos.x),
+                                y: Math.round(pos.y),
+                            });
+                        }
+                    },
+                },
+            })
+
+            // ── Resize ────────────────────────────────────────────────────────
+            .resizable({
+                edges: {
+                    top: '.tb-handle-nw, .tb-handle-ne',
+                    left: '.tb-handle-nw, .tb-handle-sw',
+                    bottom: '.tb-handle-sw, .tb-handle-se',
+                    right: '.tb-handle-ne, .tb-handle-se',
+                },
+                listeners: {
+                    move: (event) => {
+                        const zoom = getZoom();
+                        const canvas = getCanvas();
+                        const pos = getPos();
+
+                        let x = pos.x + event.deltaRect.left / zoom;
+                        let y = pos.y + event.deltaRect.top / zoom;
+                        let w = event.rect.width / zoom;
+                        let h = event.rect.height / zoom;
+
+                        w = Math.max(20, w);
+                        h = Math.max(10, h);
+
+                        x = Math.max(0, Math.min(x, canvas.w - w));
+                        y = Math.max(0, Math.min(y, canvas.h - h));
+
+                        el.style.width = `${w}px`;
+                        el.style.height = `${h}px`;
+                        applyTransform(x, y);
+                    },
+                    end: (event) => {
+                        const zoom = getZoom();
+                        const pos = getPos();
+                        const w = Math.max(20, event.rect.width / zoom);
+                        const h = Math.max(10, event.rect.height / zoom);
+                        if (this.args.onResize) {
+                            this.args.onResize(this.args.element.uuid, {
+                                x: Math.round(pos.x),
+                                y: Math.round(pos.y),
+                                width: Math.round(w),
+                                height: Math.round(h),
+                            });
+                        }
+                    },
+                },
+            });
+    }
+
+    // -------------------------------------------------------------------------
+    // Transform helper
+    // -------------------------------------------------------------------------
+
+    /**
+     * Apply the full CSS transform to a DOM element, reading x/y from its
+     * data-attributes (kept current by interact.js) and rotation from the
+     * element data model. Also writes data-rotation so the interact.js closure
+     * can read the current rotation without a stale object reference.
+     */
+    _applyTransform(el) {
+        const x = parseFloat(el.dataset.x) || 0;
+        const y = parseFloat(el.dataset.y) || 0;
+        const rotation = this.args.element.rotation ?? 0;
+        el.dataset.rotation = rotation;
+        el.style.transform = rotation ? `translate(${x}px, ${y}px) rotate(${rotation}deg)` : `translate(${x}px, ${y}px)`;
+    }
+
+    // -------------------------------------------------------------------------
+    // Computed styles and content
+    // -------------------------------------------------------------------------
+
+    get wrapperStyle() {
+        const el = this.args.element;
+        const parts = [
+            `position: absolute`,
+            `left: 0`,
+            `top: 0`,
+            `width: ${el.width ?? 100}px`,
+            `height: ${el.height ?? 30}px`,
+            `z-index: ${el.z_index ?? 1}`,
+            `box-sizing: border-box`,
+            `cursor: move`,
+        ];
+        if (el.opacity !== undefined && el.opacity !== null) {
+            parts.push(`opacity: ${el.opacity}`);
+        }
+        // transform is intentionally omitted — it is managed imperatively by
+        // handleInsert and interact.js so Glimmer re-renders never overwrite it.
+        return parts.join('; ');
+    }
+
+    get selectionClass() {
+        return this.args.isSelected ? 'ring-2 ring-blue-500 ring-offset-0' : 'hover:ring-1 hover:ring-blue-300 hover:ring-offset-0';
+    }
+
+    get elementType() {
+        return this.args.element?.type ?? 'text';
+    }
+
+    get isText() {
+        return this.elementType === 'text';
+    }
+
+    get isImage() {
+        return this.elementType === 'image';
+    }
+
+    get isTable() {
+        return this.elementType === 'table';
+    }
+
+    get isLine() {
+        return this.elementType === 'line';
+    }
+
+    get isShape() {
+        return this.elementType === 'shape';
+    }
+
+    get isQrCode() {
+        return this.elementType === 'qr_code';
+    }
+
+    get isBarcode() {
+        return this.elementType === 'barcode';
+    }
+
+    // ── Text ──────────────────────────────────────────────────────────────────
+
+    get textStyle() {
+        const el = this.args.element;
+        const styles = this._baseContentStyles(el);
+        if (el.font_size) styles.push(`font-size: ${el.font_size}px`);
+        if (el.font_family) styles.push(`font-family: ${el.font_family}`);
+        if (el.font_weight) styles.push(`font-weight: ${el.font_weight}`);
+        if (el.font_style) styles.push(`font-style: ${el.font_style}`);
+        if (el.text_align) styles.push(`text-align: ${el.text_align}`);
+        if (el.text_decoration) styles.push(`text-decoration: ${el.text_decoration}`);
+        if (el.line_height) styles.push(`line-height: ${el.line_height}`);
+        if (el.letter_spacing) styles.push(`letter-spacing: ${el.letter_spacing}px`);
+        if (el.color) styles.push(`color: ${el.color}`);
+        if (el.background_color) styles.push(`background-color: ${el.background_color}`);
+        if (el.padding) styles.push(`padding: ${el.padding}px`);
+        styles.push(`width: 100%; height: 100%; overflow: hidden; word-wrap: break-word;`);
+        return styles.join('; ');
+    }
+
+    get textContent() {
+        return this.args.element?.content ?? '';
+    }
+
+    // ── Image ─────────────────────────────────────────────────────────────────
+
+    get imageStyle() {
+        const el = this.args.element;
+        const styles = [`width: 100%; height: 100%; display: block;`];
+        if (el.object_fit) styles.push(`object-fit: ${el.object_fit}`);
+        if (el.border_radius) styles.push(`border-radius: ${el.border_radius}px`);
+        return styles.join('; ');
+    }
+
+    get imageSrc() {
+        return this.args.element?.src ?? '';
+    }
+
+    get imageAlt() {
+        return this.args.element?.alt ?? '';
+    }
+
+    // ── Table ─────────────────────────────────────────────────────────────────
+
+    get tableColumns() {
+        return this.args.element?.columns ?? [];
+    }
+
+    get tableRows() {
+        return this.args.element?.rows ?? [];
+    }
+
+    get tableBorderStyle() {
+        const color = this.args.element?.border_color;
+        return color ? `border-color: ${color}` : '';
+    }
+
+    get tableHeaderStyle() {
+        const el = this.args.element;
+        const styles = [];
+        if (el.header_background) styles.push(`background-color: ${el.header_background}`);
+        if (el.header_color) styles.push(`color: ${el.header_color}`);
+        if (el.header_font_size) styles.push(`font-size: ${el.header_font_size}px`);
+        if (el.header_font_weight) styles.push(`font-weight: ${el.header_font_weight}`);
+        return styles.join('; ');
+    }
+
+    get tableCellStyle() {
+        const el = this.args.element;
+        const styles = [];
+        if (el.cell_padding) styles.push(`padding: ${el.cell_padding}px`);
+        if (el.cell_font_size) styles.push(`font-size: ${el.cell_font_size}px`);
+        if (el.border_color) styles.push(`border-color: ${el.border_color}`);
+        return styles.join('; ');
+    }
+
+    // ── Line ──────────────────────────────────────────────────────────────────
+
+    get lineStyle() {
+        return `width: 100%; height: 100%; display: flex; align-items: center;`;
+    }
+
+    get lineInnerStyle() {
+        const el = this.args.element;
+        return `width: 100%; border-top: ${el.line_width ?? 1}px ${el.line_style ?? 'solid'} ${el.color ?? '#000000'}`;
+    }
+
+    // ── Shape ─────────────────────────────────────────────────────────────────
+
+    get shapeStyle() {
+        const el = this.args.element;
+        const styles = [`width: 100%; height: 100%;`];
+        if (el.background_color) styles.push(`background-color: ${el.background_color}`);
+        if (el.border_width) styles.push(`border: ${el.border_width}px ${el.border_style ?? 'solid'} ${el.border_color ?? '#000000'}`);
+        if (el.border_radius) styles.push(`border-radius: ${el.border_radius}px`);
+        if (el.shape === 'circle') styles.push(`border-radius: 50%`);
+        return styles.join('; ');
+    }
+
+    // ── QR / Barcode ──────────────────────────────────────────────────────────
+
+    get codeLabel() {
+        const el = this.args.element;
+        return el.value ?? (this.isQrCode ? 'QR Code' : 'Barcode');
+    }
+
+    // ── Private helpers ───────────────────────────────────────────────────────
+
+    _baseContentStyles(el) {
+        const styles = [];
+        if (el.border_width) {
+            styles.push(`border: ${el.border_width}px ${el.border_style ?? 'solid'} ${el.border_color ?? '#000000'}`);
+        }
+        if (el.border_radius) styles.push(`border-radius: ${el.border_radius}px`);
+        return styles;
+    }
+}

package/addon/components/template-builder/layers-panel.hbs

@@ -0,0 +1,99 @@
+{{! Template Builder Layers Panel }}
+<div class="tb-layers-panel flex flex-col h-full" ...attributes>
+    {{! Header }}
+    <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-700">
+        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Layers</span>
+        <span class="text-xs text-gray-400 dark:text-gray-500">{{this.sortedElements.length}}</span>
+    </div>
+
+    {{! Element list }}
+    <div class="flex-1 overflow-y-auto">
+        {{#if this.sortedElements.length}}
+            {{#each this.sortedElements as |element|}}
+                {{! Outer row is a div so that real <button> children are valid. }}
+                <div
+                    class="tb-layer-row group flex items-center px-2 py-1.5 cursor-pointer border-b border-transparent hover:bg-gray-50 dark:hover:bg-gray-800 {{if (this.isSelected element) 'bg-blue-50 dark:bg-blue-900/20 border-l-2 border-l-blue-500'}}"
+                    {{on "click" (fn this.selectElement element)}}
+                >
+                    {{! Type icon }}
+                    <FaIcon
+                        @icon={{this.elementIcon element.type}}
+                        class="w-3 h-3 mr-2 flex-shrink-0 {{if (this.isSelected element) 'text-blue-500' 'text-gray-400 dark:text-gray-500'}}"
+                    />
+
+                    {{! Label / rename input }}
+                    <div class="flex-1 min-w-0 mr-1">
+                        {{#if (this.isRenaming element)}}
+                            <input
+                                type="text"
+                                class="w-full text-xs bg-white dark:bg-gray-700 border border-blue-400 rounded px-1 py-0 outline-none"
+                                value={{this.renameValue}}
+                                {{on "input" (fn (mut this.renameValue) value="target.value")}}
+                                {{on "keydown" (fn this.handleRenameKeydown element)}}
+                                {{on "blur" (fn this.commitRename element)}}
+                                {{did-insert (fn (mut this.renameValue) this.renameValue)}}
+                            />
+                        {{else}}
+                            <span
+                                class="block text-xs truncate {{if (this.isSelected element) 'text-blue-700 dark:text-blue-300 font-medium' 'text-gray-700 dark:text-gray-300'}} {{unless (this.isVisible element) 'opacity-40'}}"
+                                {{on "dblclick" (fn this.startRename element)}}
+                                title="Double-click to rename"
+                            >
+                                {{this.elementLabel element}}
+                            </span>
+                        {{/if}}
+                    </div>
+
+                    {{! Action buttons (shown on hover or when selected) }}
+                    <div class="flex items-center space-x-0.5 opacity-0 group-hover:opacity-100 {{if (this.isSelected element) 'opacity-100'}} transition-opacity">
+                        {{! Visibility toggle }}
+                        <button
+                            type="button"
+                            class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+                            title={{if (this.isVisible element) "Hide element" "Show element"}}
+                            {{on "click" (fn this.toggleVisibility element)}}
+                        >
+                            <FaIcon @icon={{if (this.isVisible element) "eye" "eye-slash"}} class="w-3 h-3" />
+                        </button>
+
+                        {{! Move up }}
+                        <button
+                            type="button"
+                            class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+                            title="Move layer up"
+                            {{on "click" (fn this.moveUp element)}}
+                        >
+                            <FaIcon @icon="chevron-up" class="w-3 h-3" />
+                        </button>
+
+                        {{! Move down }}
+                        <button
+                            type="button"
+                            class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+                            title="Move layer down"
+                            {{on "click" (fn this.moveDown element)}}
+                        >
+                            <FaIcon @icon="chevron-down" class="w-3 h-3" />
+                        </button>
+
+                        {{! Delete }}
+                        <button
+                            type="button"
+                            class="p-0.5 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-gray-400 dark:text-gray-500 hover:text-red-500 dark:hover:text-red-400"
+                            title="Delete element"
+                            {{on "click" (fn this.deleteElement element)}}
+                        >
+                            <FaIcon @icon="trash" class="w-3 h-3" />
+                        </button>
+                    </div>
+                </div>
+            {{/each}}
+        {{else}}
+            <div class="flex flex-col items-center justify-center py-8 px-4 text-center">
+                <FaIcon @icon="layer-group" 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 elements yet.</p>
+                <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">Use the toolbar to add elements.</p>
+            </div>
+        {{/if}}
+    </div>
+</div>

package/addon/components/template-builder/layers-panel.js

@@ -0,0 +1,146 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+/**
+ * TemplateBuilderLayersPanelComponent
+ *
+ * Left panel showing the element tree (layers). Supports:
+ * - Selecting an element by clicking its row
+ * - Toggling element visibility
+ * - Deleting an element
+ * - Reordering via z_index controls (move up/down)
+ * - Renaming an element label
+ *
+ * @argument {Array}    elements         - The template content array (elements)
+ * @argument {Object}   selectedElement  - Currently selected element
+ * @argument {Function} onSelectElement  - Called with element when row is clicked
+ * @argument {Function} onUpdateElement  - Called with (uuid, changes) to update an element
+ * @argument {Function} onDeleteElement  - Called with uuid to delete an element
+ * @argument {Function} onReorderElement - Called with (uuid, direction) — 'up' or 'down'
+ */
+export default class TemplateBuilderLayersPanelComponent extends Component {
+    @tracked renamingUuid = null;
+    @tracked renameValue = '';
+
+    get sortedElements() {
+        const elements = this.args.elements ?? [];
+        // Sort descending by z_index so highest layer is at top of list (like Figma/Sketch)
+        return [...elements].sort((a, b) => (b.z_index ?? 1) - (a.z_index ?? 1));
+    }
+
+    @action
+    elementIcon(type) {
+        const icons = {
+            text: 'font',
+            image: 'image',
+            table: 'table',
+            line: 'minus',
+            shape: 'square',
+            qr_code: 'qrcode',
+            barcode: 'barcode',
+        };
+        return icons[type] ?? 'layer-group';
+    }
+
+    @action
+    elementLabel(element) {
+        if (element.label) return element.label;
+        const typeLabels = {
+            text: 'Text',
+            image: 'Image',
+            table: 'Table',
+            line: 'Line',
+            shape: 'Shape',
+            qr_code: 'QR Code',
+            barcode: 'Barcode',
+        };
+        return typeLabels[element.type] ?? 'Element';
+    }
+
+    @action
+    isSelected(element) {
+        return this.args.selectedElement?.uuid === element.uuid;
+    }
+
+    @action
+    isVisible(element) {
+        return element.visible !== false;
+    }
+
+    @action
+    isRenaming(element) {
+        return this.renamingUuid === element.uuid;
+    }
+
+    @action
+    selectElement(element, event) {
+        event.stopPropagation();
+        if (this.args.onSelectElement) {
+            this.args.onSelectElement(element);
+        }
+    }
+
+    @action
+    toggleVisibility(element, event) {
+        event.stopPropagation();
+        if (this.args.onUpdateElement) {
+            this.args.onUpdateElement(element.uuid, { visible: !this.isVisible(element) });
+        }
+    }
+
+    @action
+    deleteElement(element, event) {
+        event.stopPropagation();
+        if (this.args.onDeleteElement) {
+            this.args.onDeleteElement(element.uuid);
+        }
+    }
+
+    @action
+    moveUp(element, event) {
+        event.stopPropagation();
+        if (this.args.onReorderElement) {
+            this.args.onReorderElement(element.uuid, 'up');
+        }
+    }
+
+    @action
+    moveDown(element, event) {
+        event.stopPropagation();
+        if (this.args.onReorderElement) {
+            this.args.onReorderElement(element.uuid, 'down');
+        }
+    }
+
+    @action
+    startRename(element, event) {
+        event.stopPropagation();
+        this.renamingUuid = element.uuid;
+        this.renameValue = this.elementLabel(element);
+    }
+
+    @action
+    commitRename(element) {
+        if (this.renameValue.trim() && this.args.onUpdateElement) {
+            this.args.onUpdateElement(element.uuid, { label: this.renameValue.trim() });
+        }
+        this.renamingUuid = null;
+        this.renameValue = '';
+    }
+
+    @action
+    cancelRename() {
+        this.renamingUuid = null;
+        this.renameValue = '';
+    }
+
+    @action
+    handleRenameKeydown(element, event) {
+        if (event.key === 'Enter') {
+            this.commitRename(element);
+        } else if (event.key === 'Escape') {
+            this.cancelRename();
+        }
+    }
+}

package/addon/components/template-builder/properties-panel/field.hbs

@@ -0,0 +1,7 @@
+{{! Properties Panel Field }}
+<div class="tb-prop-field {{if (eq @span '2') 'col-span-2'}}">
+    {{#if @label}}
+        <label class="block text-xs text-gray-500 dark:text-gray-400 mb-0.5">{{@label}}</label>
+    {{/if}}
+    {{yield}}
+</div>

package/addon/components/template-builder/properties-panel/field.js

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+/**
+ * A labelled field row in the properties panel.
+ *
+ * @argument {String} label - Field label
+ * @argument {String} span  - Optional: '2' for full-width (grid col-span-2)
+ */
+export default class TemplateBuilderPropertiesPanelFieldComponent extends Component {}

package/addon/components/template-builder/properties-panel/section.hbs

@@ -0,0 +1,24 @@
+{{! Properties Panel Section }}
+<div class="tb-prop-section border-b border-gray-100 dark:border-gray-800">
+    <button
+        type="button"
+        class="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+        {{on "click" this.toggle}}
+    >
+        <div class="flex items-center space-x-2">
+            {{#if @icon}}
+                <FaIcon @icon={{@icon}} class="w-3 h-3 text-gray-400 dark:text-gray-500" />
+            {{/if}}
+            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">{{@title}}</span>
+        </div>
+        <FaIcon
+            @icon={{if @isOpen "chevron-up" "chevron-down"}}
+            class="w-3 h-3 text-gray-400 dark:text-gray-500 transition-transform"
+        />
+    </button>
+    {{#if @isOpen}}
+        <div class="px-3 pb-3 pt-2">
+            {{yield}}
+        </div>
+    {{/if}}
+</div>