feat: add per-layer LED range and collapsible layers to composite source

Composite layers now support optional start/end LED range (toggleable)
and reverse flag, making composite a superset of mapped source. Layers
are collapsible with animated expand/collapse and consistent 0.85rem
font sizing. Delete button restyled as ghost icon button.

Also includes minor dashboard CSS overflow fixes.

server/src/wled_controller/static/css/base.css

@@ -115,6 +115,7 @@ body {
 
 html {
     background: var(--bg-color);
+    overflow-x: hidden;
     overflow-y: scroll;
     scroll-behavior: smooth;
     scrollbar-gutter: stable;

server/src/wled_controller/static/css/dashboard.css

@@ -119,6 +119,11 @@
     color: var(--primary-text-color);
 }
 
+.dashboard-target-info > div {
+    min-width: 0;
+    overflow: hidden;
+}
+
 .dashboard-target-name {
     font-size: 0.85rem;
     font-weight: 600;
@@ -130,6 +135,11 @@
     gap: 4px;
 }
 
+.dashboard-target-name-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .dashboard-card-link {
     cursor: pointer;
 }

server/src/wled_controller/static/css/modal.css

@@ -1536,6 +1536,78 @@
     background: var(--card-bg);
 }
 
+.composite-layer-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.composite-layer-expand-btn {
+    font-size: 0.6rem;
+    color: var(--text-secondary);
+    transition: transform 0.15s ease;
+    flex-shrink: 0;
+    width: 12px;
+    text-align: center;
+}
+
+.composite-layer-expanded .composite-layer-expand-btn {
+    transform: rotate(90deg);
+}
+
+.composite-layer-summary {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    overflow: hidden;
+}
+
+.composite-layer-summary-name {
+    font-size: 0.85rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.composite-layer-summary-blend {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    background: var(--bg-secondary);
+    padding: 1px 6px;
+    border-radius: 3px;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.composite-layer-body-wrapper {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.2s ease;
+}
+
+.composite-layer-expanded .composite-layer-body-wrapper {
+    grid-template-rows: 1fr;
+}
+
+.composite-layer-body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding-top: 0;
+    overflow: hidden;
+    min-height: 0;
+    transition: padding-top 0.2s ease;
+    font-size: 0.85rem;
+}
+
+.composite-layer-expanded .composite-layer-body {
+    padding-top: 4px;
+}
+
 .composite-layer-row {
     display: flex;
     align-items: center;
@@ -1550,7 +1622,6 @@
 .composite-layer-brightness-label {
     flex-shrink: 0;
     width: 90px;
-    font-size: 0.8rem;
     color: var(--text-secondary);
 }
 
@@ -1566,7 +1637,6 @@
 }
 
 .composite-layer-opacity-label {
-    font-size: 0.8rem;
     white-space: nowrap;
     flex-shrink: 0;
 }
@@ -1581,11 +1651,66 @@
 }
 
 .composite-layer-remove-btn {
-    font-size: 0.75rem;
-    padding: 0;
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 0.85rem;
     width: 26px;
     height: 26px;
     flex: 0 0 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: color 0.2s, background 0.2s;
+}
+
+.composite-layer-remove-btn:hover {
+    color: var(--danger-color);
+    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
+}
+
+.composite-layer-range-toggle-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+    color: var(--text-secondary);
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.composite-layer-range-fields {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+    min-width: 0;
+}
+
+.composite-layer-range-fields label {
+    color: var(--text-secondary);
+    flex-shrink: 0;
+}
+
+.composite-layer-range-fields input[type="number"] {
+    width: 60px;
+    flex-shrink: 0;
+}
+
+.composite-layer-range-disabled {
+    opacity: 0.35;
+    pointer-events: none;
+}
+
+.composite-layer-reverse-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: auto;
+    white-space: nowrap;
+    color: var(--text-secondary);
 }
 
 /* ── Composite layer drag-to-reorder ── */

server/src/wled_controller/static/js/features/color-strips-composite.ts

@@ -102,51 +102,130 @@ export function compositeRenderList() {
                 `<option value="${tmpl.id}"${layer.processing_template_id === tmpl.id ? ' selected' : ''}>${escapeHtml(tmpl.name)}</option>`
             ).join('');
         const canRemove = _compositeLayers.length > 1;
+        const srcName = _compositeAvailableSources.find(s => s.id === layer.source_id)?.name || '—';
+        const blendLabel = t(`color_strip.composite.blend_mode.${layer.blend_mode}`) || layer.blend_mode;
         return `
             <div class="composite-layer-item" data-layer-index="${i}">
-                <div class="composite-layer-row">
+                <div class="composite-layer-header">
                     <span class="composite-layer-drag-handle" title="${t('filters.drag_to_reorder')}">&#x2807;</span>
-                    <select class="composite-layer-source" data-idx="${i}">${srcOptions}</select>
-                    <select class="composite-layer-blend" data-idx="${i}">
-                        <option value="normal"${layer.blend_mode === 'normal' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.normal')}</option>
-                        <option value="add"${layer.blend_mode === 'add' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.add')}</option>
-                        <option value="multiply"${layer.blend_mode === 'multiply' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.multiply')}</option>
-                        <option value="screen"${layer.blend_mode === 'screen' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.screen')}</option>
-                        <option value="override"${layer.blend_mode === 'override' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.override')}</option>
-                    </select>
-                </div>
-                <div class="composite-layer-row">
-                    <label class="composite-layer-opacity-label">
-                        <span>${t('color_strip.composite.opacity')}:</span>
-                        <span class="composite-opacity-val">${parseFloat(layer.opacity).toFixed(2)}</span>
-                    </label>
-                    <input type="range" class="composite-layer-opacity" data-idx="${i}"
-                           min="0" max="1" step="0.05" value="${layer.opacity}">
+                    <span class="composite-layer-expand-btn">&#x25B6;</span>
+                    <span class="composite-layer-summary">
+                        <span class="composite-layer-summary-name">${escapeHtml(srcName)}</span>
+                        <span class="composite-layer-summary-blend">${escapeHtml(blendLabel)}</span>
+                    </span>
                     <label class="settings-toggle composite-layer-toggle">
                         <input type="checkbox" class="composite-layer-enabled" data-idx="${i}"${layer.enabled ? ' checked' : ''}>
                         <span class="settings-toggle-slider"></span>
                     </label>
                     ${canRemove
-                        ? `<button type="button" class="btn btn-secondary composite-layer-remove-btn"
-                                   onclick="compositeRemoveLayer(${i})">&#x2715;</button>`
+                        ? `<button type="button" class="composite-layer-remove-btn"
+                                   onclick="compositeRemoveLayer(${i})" title="${t('common.delete')}">&#x2715;</button>`
                         : ''}
                 </div>
-                <div class="composite-layer-row">
-                    <label class="composite-layer-brightness-label">
-                        <span>${t('color_strip.composite.brightness')}:</span>
-                    </label>
-                    <select class="composite-layer-brightness" data-idx="${i}">${vsOptions}</select>
+                <div class="composite-layer-body-wrapper">
+                <div class="composite-layer-body">
+                    <div class="composite-layer-row">
+                        <select class="composite-layer-source" data-idx="${i}">${srcOptions}</select>
+                        <select class="composite-layer-blend" data-idx="${i}">
+                            <option value="normal"${layer.blend_mode === 'normal' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.normal')}</option>
+                            <option value="add"${layer.blend_mode === 'add' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.add')}</option>
+                            <option value="multiply"${layer.blend_mode === 'multiply' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.multiply')}</option>
+                            <option value="screen"${layer.blend_mode === 'screen' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.screen')}</option>
+                            <option value="override"${layer.blend_mode === 'override' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.override')}</option>
+                        </select>
+                    </div>
+                    <div class="composite-layer-row">
+                        <label class="composite-layer-opacity-label">
+                            <span>${t('color_strip.composite.opacity')}:</span>
+                            <span class="composite-opacity-val">${parseFloat(layer.opacity).toFixed(2)}</span>
+                        </label>
+                        <input type="range" class="composite-layer-opacity" data-idx="${i}"
+                               min="0" max="1" step="0.05" value="${layer.opacity}">
+                    </div>
+                    <div class="composite-layer-row">
+                        <label class="composite-layer-brightness-label">
+                            <span>${t('color_strip.composite.brightness')}:</span>
+                        </label>
+                        <select class="composite-layer-brightness" data-idx="${i}">${vsOptions}</select>
+                    </div>
+                    <div class="composite-layer-row">
+                        <label class="composite-layer-brightness-label">
+                            <span>${t('color_strip.composite.processing')}:</span>
+                        </label>
+                        <select class="composite-layer-cspt" data-idx="${i}">${csptOptions}</select>
+                    </div>
+                    <div class="composite-layer-row composite-layer-range-row">
+                        <label class="composite-layer-range-toggle-label">
+                            <input type="checkbox" class="composite-layer-range-toggle" data-idx="${i}"${(layer.start > 0 || layer.end > 0) ? ' checked' : ''}>
+                            <span>${t('color_strip.composite.range')}</span>
+                        </label>
+                        <div class="composite-layer-range-fields${(layer.start > 0 || layer.end > 0) ? '' : ' composite-layer-range-disabled'}">
+                            <label>${t('color_strip.composite.range_start')}</label>
+                            <input type="number" class="composite-layer-start" data-idx="${i}"
+                                   min="0" value="${layer.start || 0}"${(layer.start > 0 || layer.end > 0) ? '' : ' disabled'}>
+                            <label>${t('color_strip.composite.range_end')}</label>
+                            <input type="number" class="composite-layer-end" data-idx="${i}"
+                                   min="0" value="${layer.end || 0}"${(layer.start > 0 || layer.end > 0) ? '' : ' disabled'}>
+                        </div>
+                        <label class="composite-layer-reverse-label">
+                            <input type="checkbox" class="composite-layer-reverse" data-idx="${i}"${layer.reverse ? ' checked' : ''}>
+                            <span>${t('color_strip.composite.reverse')}</span>
+                        </label>
+                    </div>
                 </div>
-                <div class="composite-layer-row">
-                    <label class="composite-layer-brightness-label">
-                        <span>${t('color_strip.composite.processing')}:</span>
-                    </label>
-                    <select class="composite-layer-cspt" data-idx="${i}">${csptOptions}</select>
                 </div>
             </div>
         `;
     }).join('');
 
+    // Wire up expand/collapse
+    list.querySelectorAll('.composite-layer-header').forEach(header => {
+        const item = header.closest('.composite-layer-item') as HTMLElement;
+
+        header.addEventListener('click', (e: Event) => {
+            const target = e.target as HTMLElement;
+            if (target.closest('.settings-toggle, .composite-layer-remove-btn, .composite-layer-drag-handle')) return;
+            item.classList.toggle('composite-layer-expanded');
+        });
+    });
+
+    // Wire up source/blend change to update summary text
+    list.querySelectorAll<HTMLSelectElement>('.composite-layer-source').forEach(sel => {
+        sel.addEventListener('change', () => {
+            const item = sel.closest('.composite-layer-item') as HTMLElement;
+            const nameEl = item.querySelector('.composite-layer-summary-name') as HTMLElement;
+            const selectedOpt = sel.options[sel.selectedIndex];
+            if (nameEl && selectedOpt) nameEl.textContent = selectedOpt.text;
+        });
+    });
+    list.querySelectorAll<HTMLSelectElement>('.composite-layer-blend').forEach(sel => {
+        sel.addEventListener('change', () => {
+            const item = sel.closest('.composite-layer-item') as HTMLElement;
+            const blendEl = item.querySelector('.composite-layer-summary-blend') as HTMLElement;
+            const selectedOpt = sel.options[sel.selectedIndex];
+            if (blendEl && selectedOpt) blendEl.textContent = selectedOpt.text;
+        });
+    });
+
+    // Wire up range toggle: enable/disable fields, clear values when unchecked
+    list.querySelectorAll<HTMLInputElement>('.composite-layer-range-toggle').forEach(el => {
+        el.addEventListener('change', () => {
+            const row = el.closest('.composite-layer-range-row')!;
+            const fields = row.querySelector('.composite-layer-range-fields') as HTMLElement;
+            const startInput = fields.querySelector('.composite-layer-start') as HTMLInputElement;
+            const endInput = fields.querySelector('.composite-layer-end') as HTMLInputElement;
+            if (el.checked) {
+                fields.classList.remove('composite-layer-range-disabled');
+                if (startInput) startInput.disabled = false;
+                if (endInput) endInput.disabled = false;
+            } else {
+                fields.classList.add('composite-layer-range-disabled');
+                if (startInput) { startInput.value = '0'; startInput.disabled = true; }
+                if (endInput) { endInput.value = '0'; endInput.disabled = true; }
+            }
+        });
+    });
+
     // Wire up live opacity display
     list.querySelectorAll<HTMLInputElement>('.composite-layer-opacity').forEach(el => {
         el.addEventListener('input', () => {
@@ -205,6 +284,9 @@ export function compositeAddLayer() {
         enabled: true,
         brightness_source_id: null,
         processing_template_id: null,
+        start: 0,
+        end: 0,
+        reverse: false,
     });
     compositeRenderList();
 }
@@ -225,6 +307,9 @@ function _compositeLayersSyncFromDom() {
     const enableds = list.querySelectorAll<HTMLInputElement>('.composite-layer-enabled');
     const briSrcs = list.querySelectorAll<HTMLSelectElement>('.composite-layer-brightness');
     const csptSels = list.querySelectorAll<HTMLSelectElement>('.composite-layer-cspt');
+    const starts = list.querySelectorAll<HTMLInputElement>('.composite-layer-start');
+    const ends = list.querySelectorAll<HTMLInputElement>('.composite-layer-end');
+    const reverses = list.querySelectorAll<HTMLInputElement>('.composite-layer-reverse');
     if (srcs.length === _compositeLayers.length) {
         for (let i = 0; i < srcs.length; i++) {
             _compositeLayers[i].source_id = srcs[i].value;
@@ -233,6 +318,9 @@ function _compositeLayersSyncFromDom() {
             _compositeLayers[i].enabled = enableds[i].checked;
             _compositeLayers[i].brightness_source_id = briSrcs[i] ? (briSrcs[i].value || null) : null;
             _compositeLayers[i].processing_template_id = csptSels[i] ? (csptSels[i].value || null) : null;
+            _compositeLayers[i].start = starts[i] ? (parseInt(starts[i].value) || 0) : 0;
+            _compositeLayers[i].end = ends[i] ? (parseInt(ends[i].value) || 0) : 0;
+            _compositeLayers[i].reverse = reverses[i] ? reverses[i].checked : false;
         }
     }
 }
@@ -393,6 +481,9 @@ export function compositeGetLayers() {
         };
         if (l.brightness_source_id) layer.brightness_source_id = l.brightness_source_id;
         if (l.processing_template_id) layer.processing_template_id = l.processing_template_id;
+        if (l.start) layer.start = l.start;
+        if (l.end) layer.end = l.end;
+        if (l.reverse) layer.reverse = l.reverse;
         return layer;
     });
 }
@@ -407,7 +498,10 @@ export function loadCompositeState(css: any) {
             enabled: l.enabled != null ? l.enabled : true,
             brightness_source_id: l.brightness_source_id || null,
             processing_template_id: l.processing_template_id || null,
+            start: l.start || 0,
+            end: l.end || 0,
+            reverse: l.reverse || false,
         }))
-        : [{ source_id: '', blend_mode: 'normal', opacity: 1.0, enabled: true, brightness_source_id: null, processing_template_id: null }];
+        : [{ source_id: '', blend_mode: 'normal', opacity: 1.0, enabled: true, brightness_source_id: null, processing_template_id: null, start: 0, end: 0, reverse: false }];
     compositeRenderList();
 }

server/src/wled_controller/static/js/features/dashboard.ts

@@ -598,7 +598,7 @@ function renderDashboardTarget(target: any, isRunning: boolean, devicesMap: Reco
             <div class="dashboard-target-info">
                 <span class="dashboard-target-icon">${icon}</span>
                 <div>
-                    <div class="dashboard-target-name">${escapeHtml(target.name)}${healthDot}</div>
+                    <div class="dashboard-target-name"><span class="dashboard-target-name-text">${escapeHtml(target.name)}</span>${healthDot}</div>
                     ${subtitleParts.length ? `<div class="dashboard-target-subtitle">${escapeHtml(subtitleParts.join(' · '))}</div>` : ''}
                 </div>
             </div>

server/src/wled_controller/static/locales/en.json

@@ -1192,6 +1192,10 @@
     "color_strip.composite.error.min_layers": "At least 1 layer is required",
     "color_strip.composite.error.no_source": "Each layer must have a source selected",
     "color_strip.composite.layers_count": "layers",
+    "color_strip.composite.range": "LED Range",
+    "color_strip.composite.range_start": "Start",
+    "color_strip.composite.range_end": "End",
+    "color_strip.composite.reverse": "Reverse",
     "color_strip.mapped.zones": "Zones:",
     "color_strip.mapped.zones.hint": "Each zone maps a color strip source to a specific LED range. Zones are placed side-by-side — gaps between zones stay black.",
     "color_strip.mapped.add_zone": "+ Add Zone",

server/src/wled_controller/static/locales/ru.json

@@ -1157,6 +1157,10 @@
     "color_strip.composite.error.min_layers": "Необходим хотя бы 1 слой",
     "color_strip.composite.error.no_source": "Для каждого слоя должен быть выбран источник",
     "color_strip.composite.layers_count": "слоёв",
+    "color_strip.composite.range": "Диапазон LED",
+    "color_strip.composite.range_start": "Начало",
+    "color_strip.composite.range_end": "Конец",
+    "color_strip.composite.reverse": "Реверс",
     "color_strip.mapped.zones": "Зоны:",
     "color_strip.mapped.zones.hint": "Каждая зона привязывает источник цветовой полосы к определённому диапазону LED. Зоны размещаются рядом — промежутки остаются чёрными.",
     "color_strip.mapped.add_zone": "+ Добавить зону",

server/src/wled_controller/static/locales/zh.json

@@ -1157,6 +1157,10 @@
     "color_strip.composite.error.min_layers": "至少需要 1 个图层",
     "color_strip.composite.error.no_source": "每个图层必须选择一个源",
     "color_strip.composite.layers_count": "个图层",
+    "color_strip.composite.range": "LED范围",
+    "color_strip.composite.range_start": "起始",
+    "color_strip.composite.range_end": "结束",
+    "color_strip.composite.reverse": "反转",
     "color_strip.mapped.zones": "区域：",
     "color_strip.mapped.zones.hint": "每个区域将色带源映射到特定 LED 范围。区域并排放置 — 区域之间的间隙保持黑色。",
     "color_strip.mapped.add_zone": "+ 添加区域",