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.
2026-03-24 17:15:22 +03:00
parent 4caafbb78f
commit bbef7e5869
12 changed files with 349 additions and 51 deletions
--- a/TODO-css-improvements.md
+++ b/TODO-css-improvements.md
@@ -11,6 +11,15 @@

 ---

+## Donation / Open-Source Banner
+
+- [ ] Add a persistent but dismissible banner or notification in the dashboard UI informing users that the project is open-source and under active development, and that donations are highly appreciated
+- [ ] Include a link to the donation page (GitHub Sponsors, Ko-fi, or similar — decide on platform)
+- [ ] Remember dismissal in localStorage so it doesn't reappear every session
+- [ ] Add i18n keys for the banner text (`en.json`, `ru.json`, `zh.json`)
+
+---
+
 # Color Strip Source Improvements

 ## New Source Types
@@ -35,7 +44,6 @@ Need to research HAOS communication options first (WebSocket API, REST API, MQTT

 - [x] Add effects: rain, comet, bouncing ball, fireworks, sparkle rain, lava lamp, wave interference
 - [x] Custom palette support: user-defined [[pos,R,G,B],...] stops via JSON textarea
- [ ] Custom palette editor: replace raw JSON textarea with a proper visual editor (reuse gradient editor pattern with color pickers + position sliders)

 ### `gradient`

@@ -63,7 +71,7 @@ Need to research HAOS communication options first (WebSocket API, REST API, MQTT

 - [ ] Allow nested composites (with cycle detection)
 - [ ] More blend modes: overlay, soft light, hard light, difference, exclusion
- [ ] Per-layer LED range masks
+- [x] Per-layer LED range masks (optional start/end/reverse on each composite layer)

 ### `notification`

--- a/server/src/wled_controller/api/schemas/color_strip_sources.py
+++ b/server/src/wled_controller/api/schemas/color_strip_sources.py
@@ -36,6 +36,9 @@ class CompositeLayer(BaseModel):
    enabled: bool = Field(default=True, description="Whether this layer is active")
    brightness_source_id: Optional[str] = Field(None, description="Optional value source ID for dynamic brightness")
    processing_template_id: Optional[str] = Field(None, description="Optional color strip processing template ID")
+    start: int = Field(default=0, ge=0, description="First LED index for range (0 = full strip)")
+    end: int = Field(default=0, ge=0, description="Last LED index exclusive for range (0 = full strip)")
+    reverse: bool = Field(default=False, description="Reverse layer output within its range")


 class MappedZone(BaseModel):
--- a/server/src/wled_controller/core/processing/composite_stream.py
+++ b/server/src/wled_controller/core/processing/composite_stream.py
@@ -155,9 +155,13 @@ class CompositeColorStripStream(ColorStripStream):
    def update_source(self, source) -> None:
        """Hot-update: rebuild sub-streams if layer config changed."""
        new_layers = list(source.layers)
-        old_layer_ids = [(layer.get("source_id"), layer.get("blend_mode"), layer.get("opacity"), layer.get("enabled"), layer.get("brightness_source_id"))
+        old_layer_ids = [(layer.get("source_id"), layer.get("blend_mode"), layer.get("opacity"),
+                          layer.get("enabled"), layer.get("brightness_source_id"),
+                          layer.get("start", 0), layer.get("end", 0), layer.get("reverse", False))
                         for layer in self._layers]
-        new_layer_ids = [(layer.get("source_id"), layer.get("blend_mode"), layer.get("opacity"), layer.get("enabled"), layer.get("brightness_source_id"))
+        new_layer_ids = [(layer.get("source_id"), layer.get("blend_mode"), layer.get("opacity"),
+                          layer.get("enabled"), layer.get("brightness_source_id"),
+                          layer.get("start", 0), layer.get("end", 0), layer.get("reverse", False))
                         for layer in new_layers]

        self._layers = new_layers
@@ -187,6 +191,14 @@ class CompositeColorStripStream(ColorStripStream):
            try:
                stream = self._css_manager.acquire(src_id, consumer_id)
                if hasattr(stream, "configure") and self._led_count > 0:
+                    # Configure with zone length if layer has a range, else full strip
+                    layer_start = layer.get("start", 0)
+                    layer_end = layer.get("end", 0)
+                    if layer_start > 0 or layer_end > 0:
+                        eff_end = layer_end if layer_end > 0 else self._led_count
+                        zone_len = max(0, eff_end - layer_start)
+                        stream.configure(zone_len if zone_len > 0 else self._led_count)
+                    else:
                        stream.configure(self._led_count)
                self._sub_streams[i] = (src_id, consumer_id, stream)
            except Exception as e:
@@ -416,10 +428,35 @@ class CompositeColorStripStream(ColorStripStream):
                                    if _result is not None:
                                        colors = _result

-                        # Resize to target LED count if needed
+                        # Determine layer range
+                        layer_start = layer.get("start", 0)
+                        layer_end = layer.get("end", 0)
+                        has_range = layer_start > 0 or layer_end > 0
+
+                        if has_range:
+                            # Clamp range to strip bounds
+                            eff_start = max(0, min(layer_start, target_n))
+                            eff_end = max(eff_start, min(layer_end if layer_end > 0 else target_n, target_n))
+                            zone_len = eff_end - eff_start
+                            if zone_len <= 0:
+                                continue
+                            # Resize to zone length
+                            if len(colors) != zone_len:
+                                src_x = np.linspace(0, 1, len(colors))
+                                dst_x = np.linspace(0, 1, zone_len)
+                                resized = np.empty((zone_len, 3), dtype=np.uint8)
+                                for ch in range(3):
+                                    np.copyto(resized[:, ch], np.interp(dst_x, src_x, colors[:, ch]), casting="unsafe")
+                                colors = resized
+                        else:
+                            # Full-strip layer: resize to target LED count
                            if len(colors) != target_n:
                                colors = self._resize_to_target(colors, target_n)

+                        # Reverse if requested
+                        if layer.get("reverse", False):
+                            colors = colors[::-1].copy()
+
                        # Apply per-layer brightness from value source
                        if i in self._brightness_streams:
                            _vs_id, vs = self._brightness_streams[i]
@@ -437,14 +474,20 @@ class CompositeColorStripStream(ColorStripStream):
                        alpha = max(0, min(256, alpha))

                        if not has_result:
-                            # First layer: copy directly (or blend with black if opacity < 1)
-                            if alpha >= 256 and blend_mode == _BLEND_NORMAL:
-                                result_buf[:] = colors
-                            else:
                            result_buf[:] = 0
-                                blend_fn = self._blend_methods.get(blend_mode, self._default_blend_method)
-                                blend_fn(result_buf, colors, alpha, result_buf)
                            has_result = True
+
+                        if has_range:
+                            # Blend only into the target range — use scratch sub-slices
+                            rng = result_buf[eff_start:eff_end]
+                            u16a_rng = self._u16_a[:zone_len]
+                            u16b_rng = self._u16_b[:zone_len]
+                            blend_fn = self._blend_methods.get(blend_mode, self._default_blend_method)
+                            # Temporarily swap scratch buffers for the range size
+                            orig_u16a, orig_u16b = self._u16_a, self._u16_b
+                            self._u16_a, self._u16_b = u16a_rng, u16b_rng
+                            blend_fn(rng, colors, alpha, rng)
+                            self._u16_a, self._u16_b = orig_u16a, orig_u16b
                        else:
                            blend_fn = self._blend_methods.get(blend_mode, self._default_blend_method)
                            blend_fn(result_buf, colors, alpha, result_buf)
--- a/server/src/wled_controller/static/css/base.css
+++ b/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;
--- a/server/src/wled_controller/static/css/dashboard.css
+++ b/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;
 }
--- a/server/src/wled_controller/static/css/modal.css
+++ b/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 ── */
--- a/server/src/wled_controller/static/js/features/color-strips-composite.ts
+++ b/server/src/wled_controller/static/js/features/color-strips-composite.ts
@@ -102,10 +102,29 @@ 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>
+                    <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="composite-layer-remove-btn"
+                                   onclick="compositeRemoveLayer(${i})" title="${t('common.delete')}">&#x2715;</button>`
+                        : ''}
+                </div>
+                <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>
@@ -122,14 +141,6 @@ export function compositeRenderList() {
                        </label>
                        <input type="range" class="composite-layer-opacity" data-idx="${i}"
                               min="0" max="1" step="0.05" value="${layer.opacity}">
-                    <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>`
-                        : ''}
                    </div>
                    <div class="composite-layer-row">
                        <label class="composite-layer-brightness-label">
@@ -143,10 +154,78 @@ export function compositeRenderList() {
                        </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>
            </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();
 }
--- a/server/src/wled_controller/static/js/features/dashboard.ts
+++ b/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>
--- a/server/src/wled_controller/static/locales/en.json
+++ b/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",
--- a/server/src/wled_controller/static/locales/ru.json
+++ b/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": "+ Добавить зону",
--- a/server/src/wled_controller/static/locales/zh.json
+++ b/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": "+ 添加区域",
--- a/server/src/wled_controller/storage/color_strip_source.py
+++ b/server/src/wled_controller/storage/color_strip_source.py
@@ -664,7 +664,9 @@ class CompositeColorStripSource(ColorStripSource):
    when led_count == 0.
    """

-    # Each layer: {"source_id": str, "blend_mode": str, "opacity": float, "enabled": bool, "brightness_source_id": str|None}
+    # Each layer: {"source_id": str, "blend_mode": str, "opacity": float, "enabled": bool,
+    #              "brightness_source_id": str|None, "processing_template_id": str|None,
+    #              "start": int (0=full), "end": int (0=full), "reverse": bool}
    layers: list = field(default_factory=list)
    led_count: int = 0  # 0 = use device LED count