{{! Template Builder — top-level layout }}
<div class="tb-root flex flex-col h-full w-full bg-gray-100 dark:bg-gray-950 overflow-hidden" ...attributes>

    {{! ================================================================ }}
    {{! TOOLBAR }}
    {{! ================================================================ }}
    <TemplateBuilder::Toolbar
        @zoom={{this.zoom}}
        @selectedElement={{this.selectedElement}}
        @canUndo={{this.canUndo}}
        @canRedo={{this.canRedo}}
        @isSaving={{@isSaving}}
        @onAddElement={{this.addElement}}
        @onZoomIn={{this.zoomIn}}
        @onZoomOut={{this.zoomOut}}
        @onZoomReset={{this.zoomReset}}
        @onUndo={{this.undo}}
        @onRedo={{this.redo}}
        @onPreview={{this.preview}}
        @onSave={{this.save}}
        @onRotateElement={{this.rotateElement}}
        @onClose={{@onClose}}
        @closeIcon={{@closeIcon}}
        @closeLabel={{@closeLabel}}
    />

    {{! ================================================================ }}
    {{! MAIN AREA: Layers/Queries | Canvas | Properties }}
    {{! ================================================================ }}
    <div class="flex flex-1 min-h-0 overflow-hidden">

        {{! LEFT: Layers + Queries panel }}
        <div class="tb-panel-left w-52 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden flex flex-col">

            {{! Tab switcher }}
            <div class="flex border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
                <button
                    type="button"
                    class="flex-1 flex items-center justify-center space-x-1.5 py-2 text-xs font-medium transition-colors
                        {{if (eq this.leftPanelTab 'layers')
                            'text-blue-600 dark:text-blue-400 border-b-2 border-blue-500 -mb-px'
                            'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}}"
                    {{on "click" (fn this.setLeftPanelTab "layers")}}
                >
                    <FaIcon @icon="layer-group" class="w-3 h-3" />
                    <span>Layers</span>
                </button>
                <button
                    type="button"
                    class="flex-1 flex items-center justify-center space-x-1.5 py-2 text-xs font-medium transition-colors
                        {{if (eq this.leftPanelTab 'queries')
                            'text-blue-600 dark:text-blue-400 border-b-2 border-blue-500 -mb-px'
                            'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}}"
                    {{on "click" (fn this.setLeftPanelTab "queries")}}
                >
                    <FaIcon @icon="database" class="w-3 h-3" />
                    <span>Queries</span>
                    {{#if this.queries.length}}
                        <span class="ml-0.5 px-1 py-0 rounded-full bg-indigo-100 dark:bg-indigo-900/40 text-indigo-600 dark:text-indigo-400 text-xs leading-4">{{this.queries.length}}</span>
                    {{/if}}
                </button>
            </div>

            {{! Panel content }}
            <div class="flex-1 overflow-hidden flex flex-col">
                {{#if (eq this.leftPanelTab "layers")}}
                    <TemplateBuilder::LayersPanel
                        @elements={{this.elements}}
                        @selectedElement={{this.selectedElement}}
                        @onSelectElement={{this.selectElement}}
                        @onUpdateElement={{this.updateElement}}
                        @onDeleteElement={{this.deleteElement}}
                        @onReorderElement={{this.reorderElement}}
                    />
                {{else}}
                    <TemplateBuilder::QueriesPanel
                        @queries={{this.queries}}
                        @onQueriesChange={{this.handleQueriesChange}}
                    />
                {{/if}}
            </div>
        </div>

        {{! CENTER: Canvas area (scrollable) }}
        <div class="tb-canvas-area flex-1 overflow-auto p-8 flex items-start justify-center">
            <TemplateBuilder::Canvas
                @template={{this.template}}
                @selectedElement={{this.selectedElement}}
                @zoom={{this.zoom}}
                @onSelectElement={{this.selectElement}}
                @onMoveElement={{this.moveElement}}
                @onResizeElement={{this.resizeElement}}
                @onDeselectAll={{this.deselectAll}}
            />
        </div>

        {{! RIGHT: Properties panel }}
        <div class="tb-panel-right w-64 flex-shrink-0 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden flex flex-col">
            <TemplateBuilder::PropertiesPanel
                @selectedElement={{this.selectedElement}}
                @template={{this.template}}
                @contextSchemas={{this.contextSchemas}}
                @onUpdateElement={{this.updateElement}}
                @onUpdateTemplate={{this.updateTemplate}}
                @onOpenVariablePicker={{this.openVariablePicker}}
            />
        </div>
    </div>

    {{! ================================================================ }}
    {{! VARIABLE PICKER MODAL }}
    {{! ================================================================ }}
    <TemplateBuilder::VariablePicker
        @isOpen={{this.variablePickerOpen}}
        @contextSchemas={{this.enrichedContextSchemas}}
        @onInsert={{this.handleVariableInsert}}
        @onClose={{this.closeVariablePicker}}
    />
</div>