feat(ui/templates): adopt TreeView design guide; split editor to /design/templates/{id}

Templates page is now a tree-only browser; editing happens on a dedicated
TemplateEdit page. Drag-drop is replaced by context-menu Move-to-Folder.
TreeView gains Bootstrap Icons (chevron + per-kind glyphs), ancestor guide
lines, defined hover/selected/focus tokens, and Escape-dismisses-menu per
the new Visual Design Guide (V1-V7) in Component-TreeView.md.

src/ScadaLink.CentralUI/Components/Pages/Design/TemplateCreate.razor

@@ -56,6 +56,8 @@
 </div>
 
 @code {
+    [SupplyParameterFromQuery] public int? FolderId { get; set; }
+
     private List<Template> _templates = new();
     private bool _loading = true;
 
@@ -87,11 +89,12 @@
             var user = await GetCurrentUserAsync();
             var result = await TemplateService.CreateTemplateAsync(
                 _createName.Trim(), _createDescription?.Trim(),
-                _createParentId == 0 ? null : _createParentId, user);
+                _createParentId == 0 ? null : _createParentId, user,
+                folderId: FolderId);
 
             if (result.IsSuccess)
             {
-                NavigationManager.NavigateTo("/design/templates");
+                NavigationManager.NavigateTo($"/design/templates/{result.Value.Id}");
             }
             else
             {

src/ScadaLink.CentralUI/Components/Pages/Design/TemplateEdit.razor

@@ -0,0 +1,860 @@
+@page "/design/templates/{Id:int}"
+@using ScadaLink.Security
+@using ScadaLink.Commons.Entities.Templates
+@using ScadaLink.Commons.Interfaces.Repositories
+@using ScadaLink.Commons.Types.Enums
+@using ScadaLink.TemplateEngine
+@using ScadaLink.TemplateEngine.Services
+@using ScadaLink.TemplateEngine.Validation
+@attribute [Authorize(Policy = AuthorizationPolicies.RequireDesign)]
+@inject ITemplateEngineRepository TemplateEngineRepository
+@inject TemplateService TemplateService
+@inject AuthenticationStateProvider AuthStateProvider
+@inject NavigationManager NavigationManager
+
+<div class="container-fluid mt-3">
+    <ToastNotification @ref="_toast" />
+    <ConfirmDialog @ref="_confirmDialog" />
+
+    <div class="mb-3">
+        <button class="btn btn-outline-secondary btn-sm" @onclick="GoBack">&larr; Templates</button>
+    </div>
+
+    @if (_loading)
+    {
+        <LoadingSpinner IsLoading="true" />
+    }
+    else if (_loadError != null)
+    {
+        <div class="alert alert-danger">@_loadError</div>
+    }
+    else if (_selectedTemplate == null)
+    {
+        <div class="alert alert-warning">Template not found.</div>
+    }
+    else
+    {
+        @RenderTemplateDetail()
+    }
+</div>
+
+@code {
+    [Parameter] public int Id { get; set; }
+
+    private List<Template> _templates = new();
+    private Template? _selectedTemplate;
+    private List<TemplateAttribute> _attributes = new();
+    private List<TemplateAlarm> _alarms = new();
+    private List<TemplateScript> _scripts = new();
+    private List<TemplateComposition> _compositions = new();
+
+    private bool _loading = true;
+    private string? _loadError;
+    private string _activeTab = "attributes";
+
+    // Edit properties
+    private string _editName = string.Empty;
+    private string? _editDescription;
+    private int _editParentId;
+
+    // Validation
+    private bool _validating;
+    private Commons.Types.Flattening.ValidationResult? _validationResult;
+
+    // Member add forms
+    private bool _showAttrForm;
+    private string _attrName = string.Empty;
+    private string? _attrValue;
+    private DataType _attrDataType;
+    private bool _attrIsLocked;
+    private string? _attrDataSourceRef;
+    private string? _attrFormError;
+
+    private bool _showAlarmForm;
+    private string _alarmName = string.Empty;
+    private int _alarmPriority;
+    private AlarmTriggerType _alarmTriggerType;
+    private string? _alarmTriggerConfig;
+    private bool _alarmIsLocked;
+    private string? _alarmFormError;
+
+    private bool _showScriptForm;
+    private string _scriptName = string.Empty;
+    private string _scriptCode = string.Empty;
+    private string? _scriptTriggerType;
+    private string? _scriptTriggerConfig;
+    private bool _scriptIsLocked;
+    private string? _scriptFormError;
+
+    private bool _showCompForm;
+    private int _compComposedTemplateId;
+    private string _compInstanceName = string.Empty;
+    private string? _compFormError;
+
+    private ToastNotification _toast = default!;
+    private ConfirmDialog _confirmDialog = default!;
+
+    protected override async Task OnParametersSetAsync()
+    {
+        await LoadAsync();
+    }
+
+    private async Task LoadAsync()
+    {
+        _loading = true;
+        _loadError = null;
+        try
+        {
+            _templates = (await TemplateEngineRepository.GetAllTemplatesAsync()).ToList();
+
+            _selectedTemplate = await TemplateEngineRepository.GetTemplateWithChildrenAsync(Id)
+                                ?? _templates.FirstOrDefault(t => t.Id == Id);
+            if (_selectedTemplate == null) { _loading = false; return; }
+
+            _editName = _selectedTemplate.Name;
+            _editDescription = _selectedTemplate.Description;
+            _editParentId = _selectedTemplate.ParentTemplateId ?? 0;
+
+            _attributes = (await TemplateEngineRepository.GetAttributesByTemplateIdAsync(Id)).ToList();
+            _alarms = (await TemplateEngineRepository.GetAlarmsByTemplateIdAsync(Id)).ToList();
+            _scripts = (await TemplateEngineRepository.GetScriptsByTemplateIdAsync(Id)).ToList();
+            _compositions = (await TemplateEngineRepository.GetCompositionsByTemplateIdAsync(Id)).ToList();
+
+            _validationResult = null;
+        }
+        catch (Exception ex)
+        {
+            _loadError = $"Failed to load template: {ex.Message}";
+        }
+        _loading = false;
+    }
+
+    private void GoBack()
+    {
+        NavigationManager.NavigateTo("/design/templates");
+    }
+
+    private async Task<string> GetCurrentUserAsync()
+    {
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        return authState.User.FindFirst("Username")?.Value ?? "unknown";
+    }
+
+    private RenderFragment RenderTemplateDetail() => __builder =>
+    {
+        <div class="d-flex justify-content-between align-items-center mb-3">
+            <div>
+                <h4 class="d-inline mb-0">@_selectedTemplate!.Name</h4>
+                @if (_selectedTemplate.ParentTemplateId.HasValue)
+                {
+                    <span class="text-muted ms-2">inherits @(_templates.FirstOrDefault(t => t.Id == _selectedTemplate.ParentTemplateId)?.Name)</span>
+                }
+            </div>
+            <div>
+                <button class="btn btn-outline-info btn-sm me-1" @onclick="RunValidation" disabled="@_validating">
+                    @if (_validating)
+                    {
+                        <span class="spinner-border spinner-border-sm me-1"></span>
+                    }
+                    Validate
+                </button>
+                <button class="btn btn-outline-danger btn-sm" @onclick="DeleteTemplate">Delete</button>
+            </div>
+        </div>
+
+        @* Validation results *@
+        @if (_validationResult != null)
+        {
+            <div class="mb-3">
+                @if (_validationResult.Errors.Count > 0)
+                {
+                    <div class="alert alert-danger py-2">
+                        <strong>Validation Errors (@_validationResult.Errors.Count)</strong>
+                        <ul class="mb-0 small">
+                            @foreach (var err in _validationResult.Errors)
+                            {
+                                <li>[@err.Category] @err.Message @(err.EntityName != null ? $"({err.EntityName})" : "")</li>
+                            }
+                        </ul>
+                    </div>
+                }
+                @if (_validationResult.Warnings.Count > 0)
+                {
+                    <div class="alert alert-warning py-2">
+                        <strong>Warnings (@_validationResult.Warnings.Count)</strong>
+                        <ul class="mb-0 small">
+                            @foreach (var warn in _validationResult.Warnings)
+                            {
+                                <li>[@warn.Category] @warn.Message</li>
+                            }
+                        </ul>
+                    </div>
+                }
+                @if (_validationResult.Errors.Count == 0 && _validationResult.Warnings.Count == 0)
+                {
+                    <div class="alert alert-success py-2">Validation passed with no errors or warnings.</div>
+                }
+            </div>
+        }
+
+        @* Template info edit *@
+        <div class="card mb-3">
+            <div class="card-header">Template Properties</div>
+            <div class="card-body">
+                <div class="row g-2 align-items-end">
+                    <div class="col-md-3">
+                        <label class="form-label small">Name</label>
+                        <input type="text" class="form-control form-control-sm" @bind="_editName" />
+                    </div>
+                    <div class="col-md-4">
+                        <label class="form-label small">Description</label>
+                        <input type="text" class="form-control form-control-sm" @bind="_editDescription" />
+                    </div>
+                    <div class="col-md-3">
+                        <label class="form-label small">Parent Template</label>
+                        <select class="form-select form-select-sm" @bind="_editParentId">
+                            <option value="0">(None)</option>
+                            @foreach (var t in _templates.Where(t => t.Id != _selectedTemplate.Id))
+                            {
+                                <option value="@t.Id">@t.Name</option>
+                            }
+                        </select>
+                    </div>
+                    <div class="col-md-2">
+                        <button class="btn btn-primary btn-sm" @onclick="UpdateTemplateProperties">Save Properties</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        @* Tabs: Attributes, Alarms, Scripts, Compositions *@
+        <ul class="nav nav-tabs mb-3">
+            <li class="nav-item">
+                <button class="nav-link @(_activeTab == "attributes" ? "active" : "")" @onclick='() => _activeTab = "attributes"'>
+                    Attributes <span class="badge bg-secondary">@_attributes.Count</span>
+                </button>
+            </li>
+            <li class="nav-item">
+                <button class="nav-link @(_activeTab == "alarms" ? "active" : "")" @onclick='() => _activeTab = "alarms"'>
+                    Alarms <span class="badge bg-secondary">@_alarms.Count</span>
+                </button>
+            </li>
+            <li class="nav-item">
+                <button class="nav-link @(_activeTab == "scripts" ? "active" : "")" @onclick='() => _activeTab = "scripts"'>
+                    Scripts <span class="badge bg-secondary">@_scripts.Count</span>
+                </button>
+            </li>
+            <li class="nav-item">
+                <button class="nav-link @(_activeTab == "compositions" ? "active" : "")" @onclick='() => _activeTab = "compositions"'>
+                    Compositions <span class="badge bg-secondary">@_compositions.Count</span>
+                </button>
+            </li>
+        </ul>
+
+        @if (_activeTab == "attributes")
+        {
+            @RenderAttributesTab()
+        }
+        else if (_activeTab == "alarms")
+        {
+            @RenderAlarmsTab()
+        }
+        else if (_activeTab == "scripts")
+        {
+            @RenderScriptsTab()
+        }
+        else if (_activeTab == "compositions")
+        {
+            @RenderCompositionsTab()
+        }
+    };
+
+    private async Task DeleteTemplate()
+    {
+        if (_selectedTemplate == null) return;
+        var confirmed = await _confirmDialog.ShowAsync(
+            $"Delete template '{_selectedTemplate.Name}'? This will fail if instances or child templates reference it.",
+            "Delete Template");
+        if (!confirmed) return;
+
+        try
+        {
+            var user = await GetCurrentUserAsync();
+            var result = await TemplateService.DeleteTemplateAsync(_selectedTemplate.Id, user);
+            if (result.IsSuccess)
+            {
+                _toast.ShowSuccess($"Template '{_selectedTemplate.Name}' deleted.");
+                NavigationManager.NavigateTo("/design/templates");
+            }
+            else
+            {
+                _toast.ShowError(result.Error);
+            }
+        }
+        catch (Exception ex)
+        {
+            _toast.ShowError($"Delete failed: {ex.Message}");
+        }
+    }
+
+    private async Task UpdateTemplateProperties()
+    {
+        if (_selectedTemplate == null) return;
+        try
+        {
+            var user = await GetCurrentUserAsync();
+            var result = await TemplateService.UpdateTemplateAsync(
+                _selectedTemplate.Id, _editName.Trim(), _editDescription?.Trim(),
+                _editParentId == 0 ? null : _editParentId, user);
+
+            if (result.IsSuccess)
+            {
+                _toast.ShowSuccess("Template properties updated.");
+                _selectedTemplate = result.Value;
+            }
+            else
+            {
+                _toast.ShowError(result.Error);
+            }
+        }
+        catch (Exception ex)
+        {
+            _toast.ShowError($"Update failed: {ex.Message}");
+        }
+    }
+
+    private async Task RunValidation()
+    {
+        if (_selectedTemplate == null) return;
+        _validating = true;
+        _validationResult = null;
+        try
+        {
+            var validationService = new ValidationService();
+            var flatConfig = new Commons.Types.Flattening.FlattenedConfiguration
+            {
+                InstanceUniqueName = $"validation-{_selectedTemplate.Name}",
+                TemplateId = _selectedTemplate.Id,
+                Attributes = _attributes.Select(a => new Commons.Types.Flattening.ResolvedAttribute
+                {
+                    CanonicalName = a.Name,
+                    Value = a.Value,
+                    DataType = a.DataType.ToString(),
+                    IsLocked = a.IsLocked,
+                    DataSourceReference = a.DataSourceReference
+                }).ToList(),
+                Alarms = _alarms.Select(a => new Commons.Types.Flattening.ResolvedAlarm
+                {
+                    CanonicalName = a.Name,
+                    PriorityLevel = a.PriorityLevel,
+                    IsLocked = a.IsLocked,
+                    TriggerType = a.TriggerType.ToString(),
+                    TriggerConfiguration = a.TriggerConfiguration
+                }).ToList(),
+                Scripts = _scripts.Select(s => new Commons.Types.Flattening.ResolvedScript
+                {
+                    CanonicalName = s.Name,
+                    Code = s.Code,
+                    IsLocked = s.IsLocked,
+                    TriggerType = s.TriggerType,
+                    TriggerConfiguration = s.TriggerConfiguration,
+                    ParameterDefinitions = s.ParameterDefinitions,
+                    ReturnDefinition = s.ReturnDefinition
+                }).ToList()
+            };
+            _validationResult = validationService.Validate(flatConfig);
+
+            var collisions = await TemplateService.DetectCollisionsAsync(_selectedTemplate.Id);
+            if (collisions.Count > 0)
+            {
+                var collisionErrors = collisions.Select(c =>
+                    Commons.Types.Flattening.ValidationEntry.Error(
+                        Commons.Types.Flattening.ValidationCategory.NamingCollision, c)).ToArray();
+                var collisionResult = new Commons.Types.Flattening.ValidationResult { Errors = collisionErrors };
+                _validationResult = Commons.Types.Flattening.ValidationResult.Merge(_validationResult, collisionResult);
+            }
+        }
+        catch (Exception ex)
+        {
+            _toast.ShowError($"Validation error: {ex.Message}");
+        }
+        _validating = false;
+    }
+
+    // ---- Attributes Tab ----
+    private RenderFragment RenderAttributesTab() => __builder =>
+    {
+        <div class="d-flex justify-content-between align-items-center mb-2">
+            <h6 class="mb-0">Attributes</h6>
+            <button class="btn btn-primary btn-sm" @onclick="() => { _showAttrForm = true; _attrFormError = null; _attrName = string.Empty; _attrValue = null; _attrIsLocked = false; _attrDataSourceRef = null; }">Add Attribute</button>
+        </div>
+
+        @if (_showAttrForm)
+        {
+            <div class="card mb-2">
+                <div class="card-body">
+                    <div class="row g-2 align-items-end">
+                        <div class="col-md-2">
+                            <label class="form-label small">Name</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_attrName" />
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label small">Data Type</label>
+                            <select class="form-select form-select-sm" @bind="_attrDataType">
+                                @foreach (var dt in Enum.GetValues<DataType>())
+                                {
+                                    <option value="@dt">@dt</option>
+                                }
+                            </select>
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label small">Value</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_attrValue" />
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label small">Data Source Ref</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_attrDataSourceRef" placeholder="Tag path" />
+                        </div>
+                        <div class="col-md-1">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" @bind="_attrIsLocked" id="attrLocked" />
+                                <label class="form-check-label small" for="attrLocked">Locked</label>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <button class="btn btn-success btn-sm me-1" @onclick="AddAttribute">Add</button>
+                            <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showAttrForm = false">Cancel</button>
+                        </div>
+                    </div>
+                    @if (_attrFormError != null) { <div class="text-danger small mt-1">@_attrFormError</div> }
+                </div>
+            </div>
+        }
+
+        <table class="table table-sm table-striped">
+            <thead class="table-light">
+                <tr>
+                    <th>Name</th>
+                    <th>Type</th>
+                    <th>Value</th>
+                    <th>Data Source</th>
+                    <th>Lock</th>
+                    <th style="width: 80px;">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach (var attr in _attributes)
+                {
+                    <tr>
+                        <td>@attr.Name</td>
+                        <td><span class="badge bg-light text-dark">@attr.DataType</span></td>
+                        <td class="small">@(attr.Value ?? "—")</td>
+                        <td class="small text-muted">@(attr.DataSourceReference ?? "—")</td>
+                        <td>
+                            @if (attr.IsLocked)
+                            {
+                                <span class="badge bg-danger" title="Locked">L</span>
+                            }
+                            else
+                            {
+                                <span class="badge bg-light text-dark" title="Unlocked">U</span>
+                            }
+                        </td>
+                        <td>
+                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
+                                    @onclick="() => DeleteAttribute(attr)">Delete</button>
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    };
+
+    // ---- Alarms Tab ----
+    private RenderFragment RenderAlarmsTab() => __builder =>
+    {
+        <div class="d-flex justify-content-between align-items-center mb-2">
+            <h6 class="mb-0">Alarms</h6>
+            <button class="btn btn-primary btn-sm" @onclick="() => { _showAlarmForm = true; _alarmFormError = null; _alarmName = string.Empty; _alarmPriority = 500; _alarmTriggerConfig = null; _alarmIsLocked = false; }">Add Alarm</button>
+        </div>
+
+        @if (_showAlarmForm)
+        {
+            <div class="card mb-2">
+                <div class="card-body">
+                    <div class="row g-2 align-items-end">
+                        <div class="col-md-2">
+                            <label class="form-label small">Name</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_alarmName" />
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label small">Trigger Type</label>
+                            <select class="form-select form-select-sm" @bind="_alarmTriggerType">
+                                @foreach (var tt in Enum.GetValues<AlarmTriggerType>())
+                                {
+                                    <option value="@tt">@tt</option>
+                                }
+                            </select>
+                        </div>
+                        <div class="col-md-1">
+                            <label class="form-label small">Priority</label>
+                            <input type="number" class="form-control form-control-sm" @bind="_alarmPriority" min="0" max="1000" />
+                        </div>
+                        <div class="col-md-3">
+                            <label class="form-label small">Trigger Config (JSON)</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_alarmTriggerConfig" />
+                        </div>
+                        <div class="col-md-1">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" @bind="_alarmIsLocked" id="alarmLocked" />
+                                <label class="form-check-label small" for="alarmLocked">Locked</label>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <button class="btn btn-success btn-sm me-1" @onclick="AddAlarm">Add</button>
+                            <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showAlarmForm = false">Cancel</button>
+                        </div>
+                    </div>
+                    @if (_alarmFormError != null) { <div class="text-danger small mt-1">@_alarmFormError</div> }
+                </div>
+            </div>
+        }
+
+        <table class="table table-sm table-striped">
+            <thead class="table-light">
+                <tr>
+                    <th>Name</th>
+                    <th>Trigger</th>
+                    <th>Priority</th>
+                    <th>Config</th>
+                    <th>Lock</th>
+                    <th style="width: 80px;">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach (var alarm in _alarms)
+                {
+                    <tr>
+                        <td>@alarm.Name</td>
+                        <td><span class="badge bg-light text-dark">@alarm.TriggerType</span></td>
+                        <td>@alarm.PriorityLevel</td>
+                        <td class="small text-muted text-truncate" style="max-width: 200px;">@(alarm.TriggerConfiguration ?? "—")</td>
+                        <td>
+                            @if (alarm.IsLocked) { <span class="badge bg-danger">L</span> }
+                            else { <span class="badge bg-light text-dark">U</span> }
+                        </td>
+                        <td>
+                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
+                                    @onclick="() => DeleteAlarm(alarm)">Delete</button>
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    };
+
+    // ---- Scripts Tab ----
+    private RenderFragment RenderScriptsTab() => __builder =>
+    {
+        <div class="d-flex justify-content-between align-items-center mb-2">
+            <h6 class="mb-0">Scripts</h6>
+            <button class="btn btn-primary btn-sm" @onclick="() => { _showScriptForm = true; _scriptFormError = null; _scriptName = string.Empty; _scriptCode = string.Empty; _scriptTriggerType = null; _scriptTriggerConfig = null; _scriptIsLocked = false; }">Add Script</button>
+        </div>
+
+        @if (_showScriptForm)
+        {
+            <div class="card mb-2">
+                <div class="card-body">
+                    <div class="row g-2">
+                        <div class="col-md-3">
+                            <label class="form-label small">Name</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_scriptName" />
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label small">Trigger Type</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_scriptTriggerType" placeholder="e.g. ValueChange" />
+                        </div>
+                        <div class="col-md-3">
+                            <label class="form-label small">Trigger Config (JSON)</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_scriptTriggerConfig" />
+                        </div>
+                        <div class="col-md-1">
+                            <div class="form-check mt-4">
+                                <input class="form-check-input" type="checkbox" @bind="_scriptIsLocked" id="scriptLocked" />
+                                <label class="form-check-label small" for="scriptLocked">Locked</label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-2">
+                        <label class="form-label small">Code</label>
+                        <textarea class="form-control form-control-sm font-monospace" rows="6" @bind="_scriptCode"
+                                  style="font-size: 0.8rem;"></textarea>
+                    </div>
+                    <div class="mt-2">
+                        <button class="btn btn-success btn-sm me-1" @onclick="AddScript">Add</button>
+                        <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showScriptForm = false">Cancel</button>
+                    </div>
+                    @if (_scriptFormError != null) { <div class="text-danger small mt-1">@_scriptFormError</div> }
+                </div>
+            </div>
+        }
+
+        <table class="table table-sm table-striped">
+            <thead class="table-light">
+                <tr>
+                    <th>Name</th>
+                    <th>Trigger</th>
+                    <th>Code (preview)</th>
+                    <th>Lock</th>
+                    <th style="width: 80px;">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach (var script in _scripts)
+                {
+                    <tr>
+                        <td>@script.Name</td>
+                        <td class="small">@(script.TriggerType ?? "—")</td>
+                        <td class="small text-muted text-truncate font-monospace" style="max-width: 300px;">@script.Code[..Math.Min(80, script.Code.Length)]@(script.Code.Length > 80 ? "..." : "")</td>
+                        <td>
+                            @if (script.IsLocked) { <span class="badge bg-danger">L</span> }
+                            else { <span class="badge bg-light text-dark">U</span> }
+                        </td>
+                        <td>
+                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
+                                    @onclick="() => DeleteScript(script)">Delete</button>
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    };
+
+    // ---- Compositions Tab ----
+    private RenderFragment RenderCompositionsTab() => __builder =>
+    {
+        <div class="d-flex justify-content-between align-items-center mb-2">
+            <h6 class="mb-0">Compositions</h6>
+            <button class="btn btn-primary btn-sm" @onclick="() => { _showCompForm = true; _compFormError = null; _compInstanceName = string.Empty; _compComposedTemplateId = 0; }">Add Composition</button>
+        </div>
+
+        @if (_showCompForm)
+        {
+            <div class="card mb-2">
+                <div class="card-body">
+                    <div class="row g-2 align-items-end">
+                        <div class="col-md-3">
+                            <label class="form-label small">Instance Name</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_compInstanceName" />
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label small">Composed Template</label>
+                            <select class="form-select form-select-sm" @bind="_compComposedTemplateId">
+                                <option value="0">Select template...</option>
+                                @foreach (var t in _templates.Where(t => _selectedTemplate == null || t.Id != _selectedTemplate.Id))
+                                {
+                                    <option value="@t.Id">@t.Name</option>
+                                }
+                            </select>
+                        </div>
+                        <div class="col-md-3">
+                            <button class="btn btn-success btn-sm me-1" @onclick="AddComposition">Add</button>
+                            <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showCompForm = false">Cancel</button>
+                        </div>
+                    </div>
+                    @if (_compFormError != null) { <div class="text-danger small mt-1">@_compFormError</div> }
+                </div>
+            </div>
+        }
+
+        <table class="table table-sm table-striped">
+            <thead class="table-light">
+                <tr>
+                    <th>Instance Name</th>
+                    <th>Composed Template</th>
+                    <th style="width: 80px;">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach (var comp in _compositions)
+                {
+                    <tr>
+                        <td><code>@comp.InstanceName</code></td>
+                        <td>@(_templates.FirstOrDefault(t => t.Id == comp.ComposedTemplateId)?.Name ?? $"#{comp.ComposedTemplateId}")</td>
+                        <td>
+                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
+                                    @onclick="() => DeleteComposition(comp)">Delete</button>
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    };
+
+    // ---- CRUD handlers ----
+
+    private async Task AddAttribute()
+    {
+        if (_selectedTemplate == null) return;
+        _attrFormError = null;
+        if (string.IsNullOrWhiteSpace(_attrName)) { _attrFormError = "Name is required."; return; }
+
+        var attr = new TemplateAttribute(_attrName.Trim())
+        {
+            DataType = _attrDataType,
+            Value = _attrValue?.Trim(),
+            IsLocked = _attrIsLocked,
+            DataSourceReference = _attrDataSourceRef?.Trim()
+        };
+
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.AddAttributeAsync(_selectedTemplate.Id, attr, user);
+        if (result.IsSuccess)
+        {
+            _showAttrForm = false;
+            _toast.ShowSuccess($"Attribute '{_attrName}' added.");
+            await LoadAsync();
+        }
+        else
+        {
+            _attrFormError = result.Error;
+        }
+    }
+
+    private async Task DeleteAttribute(TemplateAttribute attr)
+    {
+        var confirmed = await _confirmDialog.ShowAsync($"Delete attribute '{attr.Name}'?", "Delete Attribute");
+        if (!confirmed) return;
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.DeleteAttributeAsync(attr.Id, user);
+        if (result.IsSuccess)
+        {
+            _toast.ShowSuccess($"Attribute '{attr.Name}' deleted.");
+            await LoadAsync();
+        }
+        else
+        {
+            _toast.ShowError(result.Error);
+        }
+    }
+
+    private async Task AddAlarm()
+    {
+        if (_selectedTemplate == null) return;
+        _alarmFormError = null;
+        if (string.IsNullOrWhiteSpace(_alarmName)) { _alarmFormError = "Name is required."; return; }
+
+        var alarm = new TemplateAlarm(_alarmName.Trim())
+        {
+            TriggerType = _alarmTriggerType,
+            PriorityLevel = _alarmPriority,
+            TriggerConfiguration = _alarmTriggerConfig?.Trim(),
+            IsLocked = _alarmIsLocked
+        };
+
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.AddAlarmAsync(_selectedTemplate.Id, alarm, user);
+        if (result.IsSuccess)
+        {
+            _showAlarmForm = false;
+            _toast.ShowSuccess($"Alarm '{_alarmName}' added.");
+            await LoadAsync();
+        }
+        else
+        {
+            _alarmFormError = result.Error;
+        }
+    }
+
+    private async Task DeleteAlarm(TemplateAlarm alarm)
+    {
+        var confirmed = await _confirmDialog.ShowAsync($"Delete alarm '{alarm.Name}'?", "Delete Alarm");
+        if (!confirmed) return;
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.DeleteAlarmAsync(alarm.Id, user);
+        if (result.IsSuccess)
+        {
+            _toast.ShowSuccess($"Alarm '{alarm.Name}' deleted.");
+            await LoadAsync();
+        }
+        else { _toast.ShowError(result.Error); }
+    }
+
+    private async Task AddScript()
+    {
+        if (_selectedTemplate == null) return;
+        _scriptFormError = null;
+        if (string.IsNullOrWhiteSpace(_scriptName)) { _scriptFormError = "Name is required."; return; }
+        if (string.IsNullOrWhiteSpace(_scriptCode)) { _scriptFormError = "Code is required."; return; }
+
+        var script = new TemplateScript(_scriptName.Trim(), _scriptCode)
+        {
+            TriggerType = _scriptTriggerType?.Trim(),
+            TriggerConfiguration = _scriptTriggerConfig?.Trim(),
+            IsLocked = _scriptIsLocked
+        };
+
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.AddScriptAsync(_selectedTemplate.Id, script, user);
+        if (result.IsSuccess)
+        {
+            _showScriptForm = false;
+            _toast.ShowSuccess($"Script '{_scriptName}' added.");
+            await LoadAsync();
+        }
+        else
+        {
+            _scriptFormError = result.Error;
+        }
+    }
+
+    private async Task DeleteScript(TemplateScript script)
+    {
+        var confirmed = await _confirmDialog.ShowAsync($"Delete script '{script.Name}'?", "Delete Script");
+        if (!confirmed) return;
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.DeleteScriptAsync(script.Id, user);
+        if (result.IsSuccess)
+        {
+            _toast.ShowSuccess($"Script '{script.Name}' deleted.");
+            await LoadAsync();
+        }
+        else { _toast.ShowError(result.Error); }
+    }
+
+    private async Task AddComposition()
+    {
+        if (_selectedTemplate == null) return;
+        _compFormError = null;
+        if (string.IsNullOrWhiteSpace(_compInstanceName)) { _compFormError = "Instance name is required."; return; }
+        if (_compComposedTemplateId == 0) { _compFormError = "Select a template."; return; }
+
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.AddCompositionAsync(
+            _selectedTemplate.Id, _compComposedTemplateId, _compInstanceName.Trim(), user);
+        if (result.IsSuccess)
+        {
+            _showCompForm = false;
+            _toast.ShowSuccess($"Composition '{_compInstanceName}' added.");
+            await LoadAsync();
+        }
+        else
+        {
+            _compFormError = result.Error;
+        }
+    }
+
+    private async Task DeleteComposition(TemplateComposition comp)
+    {
+        var confirmed = await _confirmDialog.ShowAsync($"Remove composition '{comp.InstanceName}'?", "Delete Composition");
+        if (!confirmed) return;
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.DeleteCompositionAsync(comp.Id, user);
+        if (result.IsSuccess)
+        {
+            _toast.ShowSuccess($"Composition '{comp.InstanceName}' removed.");
+            await LoadAsync();
+        }
+        else { _toast.ShowError(result.Error); }
+    }
+}

src/ScadaLink.CentralUI/Components/Shared/MoveFolderDialog.razor

@@ -4,23 +4,21 @@
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h6 class="modal-title">New Template</h6>
+                    <h6 class="modal-title">Move '@FolderName' to…</h6>
                     <button type="button" class="btn-close" @onclick="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <div class="mb-2">
-                        <label class="form-label small">Name</label>
-                        <input class="form-control form-control-sm" @bind="_name" />
-                    </div>
-                    <div class="mb-2">
-                        <label class="form-label small">Description</label>
-                        <input class="form-control form-control-sm" @bind="_description" />
-                    </div>
+                    <select class="form-select form-select-sm" @bind="_targetParentId">
+                        @foreach (var opt in FolderOptions)
+                        {
+                            <option value="@opt.Id">@opt.Label</option>
+                        }
+                    </select>
                     @if (!string.IsNullOrEmpty(ErrorMessage)) { <div class="text-danger small mt-1">@ErrorMessage</div> }
                 </div>
                 <div class="modal-footer">
                     <button class="btn btn-outline-secondary btn-sm" @onclick="Close">Cancel</button>
-                    <button class="btn btn-primary btn-sm" @onclick="Submit">Create</button>
+                    <button class="btn btn-primary btn-sm" @onclick="Submit">Move</button>
                 </div>
             </div>
         </div>
@@ -30,21 +28,20 @@
 @code {
     [Parameter] public bool IsVisible { get; set; }
     [Parameter] public EventCallback<bool> IsVisibleChanged { get; set; }
-    [Parameter] public int? FolderId { get; set; }
+    [Parameter] public int FolderId { get; set; }
+    [Parameter] public string FolderName { get; set; } = string.Empty;
+    [Parameter] public IEnumerable<(int? Id, string Label)> FolderOptions { get; set; } = Array.Empty<(int?, string)>();
     [Parameter] public string? ErrorMessage { get; set; }
-    [Parameter] public EventCallback<(int? FolderId, string Name, string? Description)> OnSubmit { get; set; }
+    [Parameter] public EventCallback<(int FolderId, int? NewParentId)> OnSubmit { get; set; }
 
     private bool _wasVisible;
-    private string _name = string.Empty;
-    private string? _description;
+    private int? _targetParentId;
 
     protected override void OnParametersSet()
     {
-        // Reset internal state on transition from hidden -> visible.
         if (IsVisible && !_wasVisible)
         {
-            _name = string.Empty;
-            _description = null;
+            _targetParentId = null;
         }
         _wasVisible = IsVisible;
     }
@@ -56,6 +53,6 @@
 
     private async Task Submit()
     {
-        await OnSubmit.InvokeAsync((FolderId, _name.Trim(), _description?.Trim()));
+        await OnSubmit.InvokeAsync((FolderId, _targetParentId));
     }
 }

src/ScadaLink.CentralUI/Components/Shared/TreeView.razor

@@ -11,7 +11,7 @@
 }
 else
 {
-    <ul role="tree" class="tv-root @(ShowGuideLines ? "tv-guides" : "")" style="list-style:none;padding-left:0;margin:0;">
+    <ul role="tree" class="tv-root @(ShowGuideLines ? "tv-guides" : "")">
         @foreach (var item in _items)
         {
             RenderNode(item, 0);
@@ -22,7 +22,8 @@ else
 @if (_showContextMenu && _contextMenuItem != null && ContextMenu != null)
 {
     <div class="tv-ctx-overlay" @onclick="DismissContextMenu" style="position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1049;background:transparent;"></div>
-    <div class="dropdown-menu show" style="position:fixed;top:@(_contextMenuY)px;left:@(_contextMenuX)px;z-index:1050;">
+    <div class="dropdown-menu show" tabindex="-1" @ref="_contextMenuRef" @onkeydown="OnContextMenuKeyDown"
+         style="position:fixed;top:@(_contextMenuY)px;left:@(_contextMenuX)px;z-index:1050;outline:none;">
         @ContextMenu(_contextMenuItem)
     </div>
 }
@@ -33,19 +34,21 @@ else
         var children = ChildrenSelector(item);
         var isBranch = HasChildrenSelector(item);
         var isExpanded = _expandedKeys.Contains(KeyStr(key));
+        var isSelected = Selectable && SelectedKey != null && SelectedKey.Equals(key);
+        var rowClasses = "tv-row" + (isSelected ? " tv-selected " + SelectedCssClass : "");
 
         <li role="treeitem" @key="key"
             aria-expanded="@(isBranch ? (isExpanded ? "true" : "false") : null)"
-            aria-selected="@(Selectable && SelectedKey != null && SelectedKey.Equals(key) ? "true" : null)">
-            <div class="tv-row @(Selectable && SelectedKey != null && SelectedKey.Equals(key) ? SelectedCssClass : "")" style="padding-left: @(depth * IndentPx)px"
+            aria-selected="@(isSelected ? "true" : null)">
+            <div class="@rowClasses" style="padding-left: @(depth * IndentPx)px; --tv-depth: @depth;"
                 @oncontextmenu="(e) => OnContextMenu(e, item)" @oncontextmenu:preventDefault="@(ContextMenu != null)">
                 @if (isBranch)
                 {
-                    <span class="tv-toggle" style="display:inline-block;width:1.2em;text-align:center;cursor:pointer;" @onclick="() => ToggleExpand(key)" @onclick:stopPropagation>@(isExpanded ? "\u2212" : "+")</span>
+                    <span class="tv-toggle" @onclick="() => ToggleExpand(key)" @onclick:stopPropagation><i class="bi bi-chevron-right"></i></span>
                 }
                 else
                 {
-                    <span class="tv-spacer" style="display:inline-block;width:1.2em;"></span>
+                    <span class="tv-spacer"></span>
                 }
                 <span class="tv-content" @onclick="() => OnContentClick(key)" @onclick:stopPropagation>
                     @NodeContent(item)
@@ -53,7 +56,7 @@ else
             </div>
             @if (isBranch && isExpanded && children is { Count: > 0 })
             {
-                <ul role="group" style="list-style:none;padding-left:0;margin:0;">
+                <ul role="group">
                     @foreach (var child in children)
                     {
                         RenderNode(child, depth + 1);
@@ -76,6 +79,8 @@ else
     private double _contextMenuX;
     private double _contextMenuY;
     private bool _showContextMenu;
+    private bool _contextMenuNeedsFocus;
+    private ElementReference _contextMenuRef;
 
     [Parameter, EditorRequired] public IReadOnlyList<TItem> Items { get; set; } = [];
     [Parameter, EditorRequired] public Func<TItem, IReadOnlyList<TItem>> ChildrenSelector { get; set; } = default!;
@@ -117,6 +122,12 @@ else
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        if (_contextMenuNeedsFocus && _showContextMenu)
+        {
+            _contextMenuNeedsFocus = false;
+            try { await _contextMenuRef.FocusAsync(); } catch { /* element may have been disposed if dismissed during render */ }
+        }
+
         if (firstRender && StorageKey != null)
         {
             var json = await JSRuntime.InvokeAsync<string?>("treeviewStorage.load", StorageKey);
@@ -212,6 +223,7 @@ else
         _contextMenuX = e.ClientX;
         _contextMenuY = e.ClientY;
         _showContextMenu = true;
+        _contextMenuNeedsFocus = true;
     }
 
     private void DismissContextMenu()
@@ -220,6 +232,17 @@ else
         _contextMenuItem = default;
     }
 
+    private void OnContextMenuKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Escape")
+        {
+            DismissContextMenu();
+        }
+    }
+
+    /// <summary>Whether the node with the given key is currently expanded.</summary>
+    public bool IsExpanded(object key) => _expandedKeys.Contains(KeyStr(key));
+
     /// <summary>Expand every branch node in the tree.</summary>
     public void ExpandAll()
     {

src/ScadaLink.CentralUI/Components/Shared/TreeView.razor.css

@@ -0,0 +1,135 @@
+/* TreeView component styling — see docs/requirements/Component-TreeView.md "Visual Design Guide" (V1–V7). */
+
+/* Root list — no list styling. */
+.tv-root,
+.tv-root ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+}
+
+/* V1 — Row anatomy. Flex container; full-width hit surface; ~32px row. */
+.tv-row {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    cursor: default;
+    border-radius: 0.25rem;
+    transition: background-color 0.08s linear;
+}
+
+/* V1 — slot widths. Toggle and glyph are always present so labels align across siblings. */
+.tv-row .tv-toggle,
+.tv-row .tv-spacer {
+    flex: 0 0 auto;
+    width: 1.25rem;          /* 20px */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--bs-secondary-color);
+    user-select: none;
+}
+
+.tv-row .tv-spacer {
+    cursor: default;
+}
+
+.tv-row .tv-content {
+    flex: 1 1 auto;
+    min-width: 0;            /* required so child label can ellipsis-truncate inside a flex item */
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+/* V5 — primary label truncation. Consumers add their own bold class for branches. */
+.tv-row .tv-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* V1 — meta slot right-aligns trailing badges/text against row edge. */
+.tv-row .tv-meta {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex: 0 0 auto;
+}
+
+/* V4 — glyph slot. Bootstrap Icons render at 1em, inherit text color. */
+.tv-row .tv-glyph {
+    flex: 0 0 auto;
+    width: 1.25rem;          /* 20px, same slot size as toggle */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* V3 — hover. Subtle gray wash; suppressed when row is selected. */
+.tv-row:hover:not(.tv-selected) {
+    background-color: var(--bs-tertiary-bg);
+}
+
+/* V3 — selected. Bootstrap utility `bg-primary bg-opacity-10` is the SelectedCssClass default;
+   the .tv-selected hook is provided for consumers that prefer scoped styling. */
+.tv-row.tv-selected {
+    background-color: rgba(var(--bs-primary-rgb), 0.1);
+}
+
+/* V3 — keyboard focus. Inset ring composes with hover/selected without layout shift. */
+.tv-row:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--bs-primary);
+}
+
+/* V3 — drop-target (valid). Overrides hover/selected. */
+.tv-row.tv-drop-target {
+    background-color: rgba(var(--bs-info-rgb), 0.25);
+}
+
+/* V3 — dimmed (e.g. non-droppable while a drag is in progress; reserved for future use). */
+.tv-row.tv-dimmed {
+    opacity: 0.5;
+}
+
+/* V2 — guide lines. A pseudo-element overlays the row's depth gutter and draws
+   one vertical line per ancestor depth at 24px intervals. The `--tv-depth` variable
+   is set inline per row; lines never extend into the content area. */
+.tv-guides .tv-row {
+    position: relative;
+}
+
+.tv-guides .tv-row::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: calc(var(--tv-depth, 0) * 1.5rem);
+    pointer-events: none;
+    background-image: linear-gradient(
+        to right,
+        transparent calc(0.625rem - 0.5px),
+        var(--bs-border-color) calc(0.625rem - 0.5px),
+        var(--bs-border-color) calc(0.625rem + 0.5px),
+        transparent calc(0.625rem + 0.5px)
+    );
+    background-size: 1.5rem 100%;
+    background-repeat: repeat-x;
+}
+
+/* Branch chevron rotates on expand via the aria-expanded attribute on the parent treeitem.
+   Consumers using `bi-chevron-right` get the down-rotation for free. */
+.tv-row .tv-toggle .bi-chevron-right {
+    transition: transform 0.1s linear;
+}
+
+[role="treeitem"][aria-expanded="true"] > .tv-row .tv-toggle .bi-chevron-right {
+    transform: rotate(90deg);
+}

src/ScadaLink.Host/Components/App.razor

@@ -6,6 +6,8 @@
     <base href="/" />
     <title>ScadaLink</title>
     <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="/lib/bootstrap-icons/bootstrap-icons.css" rel="stylesheet" />
+    <link href="/ScadaLink.Host.styles.css" rel="stylesheet" />
     <style>
         .sidebar {
             min-width: 220px;