Add composite layer preview, configurable LED count, and notification fire button to CSS test modal

- Composite sources show per-layer strip canvases with composite result on top
- Server sends composite wire format with per-layer RGB data
- LED count is configurable via input field, persisted in localStorage
- Notification sources show a bell fire button on the strip preview
- Composite with notification layers shows per-layer fire buttons
- Fixed stale WS frame bug with generation counter and unique consumer IDs
- Modal width is now fixed at 700px to prevent layout jumps
- Target card composite layers now use same-height canvases

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/api/routes/color_strip_sources.py

@@ -34,7 +34,7 @@ from wled_controller.core.capture.calibration import (
 )
 from wled_controller.core.capture.screen_capture import get_available_displays
 from wled_controller.core.processing.processor_manager import ProcessorManager
-from wled_controller.storage.color_strip_source import AdvancedPictureColorStripSource, ApiInputColorStripSource, NotificationColorStripSource, PictureColorStripSource
+from wled_controller.storage.color_strip_source import AdvancedPictureColorStripSource, ApiInputColorStripSource, CompositeColorStripSource, NotificationColorStripSource, PictureColorStripSource
 from wled_controller.storage.color_strip_store import ColorStripStore
 from wled_controller.storage.picture_source import ProcessedPictureSource, ScreenCapturePictureSource
 from wled_controller.storage.picture_source_store import PictureSourceStore
@@ -705,10 +705,11 @@ async def test_color_strip_ws(
         await websocket.close(code=4004, reason=str(e))
         return
 
-    # Acquire stream
+    # Acquire stream – unique consumer ID per WS to avoid release races
+    import uuid as _uuid
     manager: ProcessorManager = get_processor_manager()
     csm = manager.color_strip_stream_manager
-    consumer_id = "__test__"
+    consumer_id = f"__test_{_uuid.uuid4().hex[:8]}__"
     try:
         stream = csm.acquire(source_id, consumer_id)
     except Exception as e:
@@ -724,8 +725,11 @@ async def test_color_strip_ws(
     logger.info(f"CSS test WebSocket connected for {source_id}")
 
     try:
+        from wled_controller.core.processing.composite_stream import CompositeColorStripStream
+
         # Send metadata as first message
         is_picture = isinstance(source, (PictureColorStripSource, AdvancedPictureColorStripSource))
+        is_composite = isinstance(source, CompositeColorStripSource)
         meta: dict = {
             "type": "meta",
             "source_type": source.source_type,
@@ -745,10 +749,45 @@ async def test_color_strip_ws(
                     indices = [(idx + offset) % total for idx in indices]
                 edges.append({"edge": seg.edge, "indices": indices})
             meta["edges"] = edges
+        if is_composite and hasattr(source, "layers"):
+            # Send layer info for composite preview
+            enabled_layers = [l for l in source.layers if l.get("enabled", True)]
+            layer_infos = []  # [{name, id, is_notification}, ...]
+            for layer in enabled_layers:
+                info = {"id": layer["source_id"], "name": layer.get("source_id", "?"), "is_notification": False}
+                try:
+                    layer_src = store.get_source(layer["source_id"])
+                    info["name"] = layer_src.name
+                    info["is_notification"] = isinstance(layer_src, NotificationColorStripSource)
+                except (ValueError, KeyError):
+                    pass
+                layer_infos.append(info)
+            meta["layers"] = [li["name"] for li in layer_infos]
+            meta["layer_infos"] = layer_infos
         await websocket.send_text(_json.dumps(meta))
 
         # Stream binary RGB frames at ~20 Hz
         while True:
+            # For composite sources, send per-layer data like target preview does
+            if is_composite and isinstance(stream, CompositeColorStripStream):
+                layer_colors = stream.get_layer_colors()
+                composite_colors = stream.get_latest_colors()
+                if composite_colors is not None and layer_colors and len(layer_colors) > 1:
+                    led_count = composite_colors.shape[0]
+                    rgb_size = led_count * 3
+                    # Wire format: [0xFE] [layer_count] [led_count_hi] [led_count_lo] [layer0_rgb...] ... [composite_rgb]
+                    header = bytes([0xFE, len(layer_colors), (led_count >> 8) & 0xFF, led_count & 0xFF])
+                    parts = [header]
+                    for lc in layer_colors:
+                        if lc is not None and lc.shape[0] == led_count:
+                            parts.append(lc.tobytes())
+                        else:
+                            parts.append(b'\x00' * rgb_size)
+                    parts.append(composite_colors.tobytes())
+                    await websocket.send_bytes(b''.join(parts))
+                elif composite_colors is not None:
+                    await websocket.send_bytes(composite_colors.tobytes())
+            else:
                 colors = stream.get_latest_colors()
                 if colors is not None:
                     await websocket.send_bytes(colors.tobytes())

server/src/wled_controller/static/css/cards.css

@@ -1052,15 +1052,10 @@ ul.section-tip li {
 .led-preview-layer-canvas {
     display: block;
     width: 100%;
-    height: 14px;
-    border-radius: 2px;
-    image-rendering: pixelated;
-    background: #111;
-}
-
-.led-preview-layer-composite .led-preview-layer-canvas {
     height: 24px;
     border-radius: 3px;
+    image-rendering: pixelated;
+    background: #111;
 }
 
 .led-preview-layer-label {

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

@@ -119,6 +119,10 @@
 }
 
 /* Color strip test preview */
+.css-test-strip-wrap {
+    position: relative;
+}
+
 .css-test-strip-canvas {
     display: block;
     width: 100%;
@@ -128,6 +132,30 @@
     image-rendering: pixelated;
 }
 
+.css-test-fire-btn {
+    position: absolute;
+    right: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s;
+    line-height: 1;
+}
+
+.css-test-fire-btn:hover {
+    background: rgba(255, 255, 255, 0.25);
+}
+
 .css-test-rect {
     display: grid;
     grid-template-columns: 14px 1fr 14px;
@@ -178,7 +206,71 @@
     font-size: 0.9em;
 }
 
-#test-css-source-modal.css-test-wide .modal-content {
+/* Composite layers preview */
+.css-test-layers {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.css-test-layer {
+    position: relative;
+}
+
+.css-test-layer-canvas {
+    display: block;
+    width: 100%;
+    height: 48px;
+    border-radius: 4px;
+    image-rendering: pixelated;
+    background: #111;
+}
+
+.css-test-layer-label {
+    position: absolute;
+    left: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 0.6rem;
+    font-family: var(--font-mono, monospace);
+    color: #fff;
+    text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+    white-space: nowrap;
+}
+
+.css-test-layers:hover .css-test-layer-label {
+    opacity: 1;
+}
+
+/* LED count control */
+.css-test-led-control {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 0 0;
+    font-size: 0.85em;
+}
+
+.css-test-led-input {
+    width: 70px;
+    padding: 3px 6px;
+    border: 1px solid var(--border-color, #333);
+    border-radius: 4px;
+    background: var(--input-bg, #1a1a2e);
+    color: var(--text-color, #e0e0e0);
+    font-size: 0.85em;
+    text-align: center;
+}
+
+.css-test-led-apply {
+    padding: 3px 10px;
+    font-size: 0.8em;
+}
+
+#test-css-source-modal .modal-content {
     max-width: 700px;
 }
 

server/src/wled_controller/static/js/app.js

@@ -125,7 +125,7 @@ import {
     onNotificationFilterModeChange,
     notificationAddAppColor, notificationRemoveAppColor,
     testNotification,
-    testColorStrip, closeTestCssSourceModal,
+    testColorStrip, closeTestCssSourceModal, applyCssTestLedCount, fireCssTestNotification, fireCssTestNotificationLayer,
 } from './features/color-strips.js';
 
 // Layer 5: audio sources
@@ -405,7 +405,7 @@ Object.assign(window, {
     onNotificationFilterModeChange,
     notificationAddAppColor, notificationRemoveAppColor,
     testNotification,
-    testColorStrip, closeTestCssSourceModal,
+    testColorStrip, closeTestCssSourceModal, applyCssTestLedCount, fireCssTestNotification, fireCssTestNotificationLayer,
 
     // audio sources
     showAudioSourceModal,

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

@@ -1259,7 +1259,7 @@ export function createColorStripCard(source, pictureSourceMap, audioSourceMap) {
     const testNotifyBtn = isNotification
         ? `<button class="btn btn-icon btn-secondary" onclick="event.stopPropagation(); testNotification('${source.id}')" title="${t('color_strip.notification.test')}">${ICON_BELL}</button>`
         : '';
-    const testPreviewBtn = !isNotification && !isApiInput
+    const testPreviewBtn = !isApiInput
         ? `<button class="btn btn-icon btn-secondary" onclick="event.stopPropagation(); testColorStrip('${source.id}')" title="${t('color_strip.test.title')}">${ICON_EYE}</button>`
         : '';
 
@@ -1884,69 +1884,195 @@ export async function stopCSSOverlay(cssId) {
 
 /* ── Test / Preview ───────────────────────────────────────────── */
 
+const _CSS_TEST_LED_KEY = 'css_test_led_count';
 let _cssTestWs = null;
 let _cssTestRaf = null;
 let _cssTestLatestRgb = null;
 let _cssTestMeta = null;
+let _cssTestSourceId = null;
+let _cssTestIsComposite = false;
+let _cssTestLayerData = null; // { layerCount, ledCount, layers: [Uint8Array], composite: Uint8Array }
+let _cssTestGeneration = 0;   // bumped on each connect to ignore stale WS messages
+let _cssTestNotificationIds = []; // notification source IDs to fire (self or composite layers)
+
+function _getCssTestLedCount() {
+    const stored = parseInt(localStorage.getItem(_CSS_TEST_LED_KEY), 10);
+    return (stored > 0 && stored <= 2000) ? stored : 100;
+}
 
 export function testColorStrip(sourceId) {
+    // Clean up any previous session fully
+    if (_cssTestWs) { _cssTestWs.close(); _cssTestWs = null; }
+    if (_cssTestRaf) { cancelAnimationFrame(_cssTestRaf); _cssTestRaf = null; }
+    _cssTestLatestRgb = null;
+    _cssTestMeta = null;
+    _cssTestIsComposite = false;
+    _cssTestLayerData = null;
+
     const modal = document.getElementById('test-css-source-modal');
     if (!modal) return;
     modal.style.display = 'flex';
     modal.onclick = (e) => { if (e.target === modal) closeTestCssSourceModal(); };
+    _cssTestSourceId = sourceId;
 
     // Reset views
     document.getElementById('css-test-strip-view').style.display = 'none';
     document.getElementById('css-test-rect-view').style.display = 'none';
+    document.getElementById('css-test-layers-view').style.display = 'none';
+    document.getElementById('css-test-led-control').style.display = '';
+    const layersContainer = document.getElementById('css-test-layers');
+    if (layersContainer) layersContainer.innerHTML = '';
     document.getElementById('css-test-status').style.display = '';
     document.getElementById('css-test-status').textContent = t('color_strip.test.connecting');
     document.getElementById('css-test-led-count').textContent = '';
-    _cssTestLatestRgb = null;
+
-    _cssTestMeta = null;
+    // Restore LED count + Enter key handler
+    const ledCount = _getCssTestLedCount();
+    const ledInput = document.getElementById('css-test-led-input');
+    ledInput.value = ledCount;
+    ledInput.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); applyCssTestLedCount(); } };
+
+    _cssTestConnect(sourceId, ledCount);
+}
+
+function _cssTestConnect(sourceId, ledCount) {
+    // Close existing connection if any
+    if (_cssTestWs) { _cssTestWs.close(); _cssTestWs = null; }
+
+    // Bump generation so any late messages from old WS are ignored
+    const gen = ++_cssTestGeneration;
 
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const apiKey = localStorage.getItem('wled_api_key') || '';
-    const wsUrl = `${protocol}//${window.location.host}/api/v1/color-strip-sources/${sourceId}/test/ws?token=${encodeURIComponent(apiKey)}&led_count=100`;
+    const wsUrl = `${protocol}//${window.location.host}/api/v1/color-strip-sources/${sourceId}/test/ws?token=${encodeURIComponent(apiKey)}&led_count=${ledCount}`;
 
     _cssTestWs = new WebSocket(wsUrl);
     _cssTestWs.binaryType = 'arraybuffer';
 
     _cssTestWs.onmessage = (event) => {
+        // Ignore messages from a stale connection
+        if (gen !== _cssTestGeneration) return;
+
         if (typeof event.data === 'string') {
             // JSON metadata
             _cssTestMeta = JSON.parse(event.data);
             const isPicture = _cssTestMeta.edges && _cssTestMeta.edges.length > 0;
-            document.getElementById('css-test-strip-view').style.display = isPicture ? 'none' : '';
+            _cssTestIsComposite = _cssTestMeta.layers && _cssTestMeta.layers.length > 0;
+
+            // Show correct view
+            document.getElementById('css-test-strip-view').style.display = (isPicture || _cssTestIsComposite) ? 'none' : '';
             document.getElementById('css-test-rect-view').style.display = isPicture ? '' : 'none';
+            document.getElementById('css-test-layers-view').style.display = _cssTestIsComposite ? '' : 'none';
             document.getElementById('css-test-status').style.display = 'none';
-            document.getElementById('test-css-source-modal').classList.toggle('css-test-wide', isPicture);
+
+            // Hide LED count control for picture sources (LED count is fixed by calibration)
+            document.getElementById('css-test-led-control').style.display = isPicture ? 'none' : '';
+
+            // Show fire button for notification sources (direct only; composite has per-layer buttons)
+            const isNotify = _cssTestMeta.source_type === 'notification';
+            const layerInfos = _cssTestMeta.layer_infos || [];
+            _cssTestNotificationIds = isNotify
+                ? [_cssTestSourceId]
+                : layerInfos.filter(li => li.is_notification).map(li => li.id);
+            const fireBtn = document.getElementById('css-test-fire-btn');
+            if (fireBtn) fireBtn.style.display = (isNotify && !_cssTestIsComposite) ? '' : 'none';
+
             document.getElementById('css-test-led-count').textContent = `${_cssTestMeta.led_count} LEDs`;
+
+            // Build composite layer canvases
+            if (_cssTestIsComposite) {
+                _cssTestBuildLayers(_cssTestMeta.layers, _cssTestMeta.source_type, _cssTestMeta.layer_infos);
+            }
         } else {
-            // Binary RGB frame
+            const raw = new Uint8Array(event.data);
-            _cssTestLatestRgb = new Uint8Array(event.data);
+            // Check composite wire format: [0xFE] [layer_count] [led_count_hi] [led_count_lo] [layers...] [composite...]
+            if (raw.length > 3 && raw[0] === 0xFE && _cssTestIsComposite) {
+                const layerCount = raw[1];
+                const ledCount = (raw[2] << 8) | raw[3];
+                const rgbSize = ledCount * 3;
+                let offset = 4;
+                const layers = [];
+                for (let i = 0; i < layerCount; i++) {
+                    layers.push(raw.subarray(offset, offset + rgbSize));
+                    offset += rgbSize;
+                }
+                const composite = raw.subarray(offset, offset + rgbSize);
+                _cssTestLayerData = { layerCount, ledCount, layers, composite };
+                _cssTestLatestRgb = composite;
+            } else {
+                // Standard format: raw RGB
+                _cssTestLatestRgb = raw;
+            }
         }
     };
 
     _cssTestWs.onerror = () => {
+        if (gen !== _cssTestGeneration) return;
         document.getElementById('css-test-status').textContent = t('color_strip.test.error');
     };
 
     _cssTestWs.onclose = () => {
-        _cssTestWs = null;
+        if (gen === _cssTestGeneration) _cssTestWs = null;
     };
 
-    // Start render loop
+    // Start render loop (only once)
-    _cssTestRenderLoop();
+    if (!_cssTestRaf) _cssTestRenderLoop();
+}
+
+const _BELL_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/><path d="M4 2C2.8 3.7 2 5.7 2 8"/><path d="M22 8c0-2.3-.8-4.3-2-6"/></svg>';
+
+function _cssTestBuildLayers(layerNames, sourceType, layerInfos) {
+    const container = document.getElementById('css-test-layers');
+    if (!container) return;
+    // Composite result first, then individual layers
+    let html = `<div class="css-test-layer css-test-layer-composite">` +
+        `<canvas class="css-test-layer-canvas" data-layer-idx="composite"></canvas>` +
+        `<span class="css-test-layer-label">${sourceType === 'composite' ? t('color_strip.test.composite') : ''}</span>` +
+        `</div>`;
+    for (let i = 0; i < layerNames.length; i++) {
+        const info = layerInfos && layerInfos[i];
+        const isNotify = info && info.is_notification;
+        const fireBtn = isNotify
+            ? `<button class="css-test-fire-btn" onclick="event.stopPropagation(); fireCssTestNotificationLayer('${info.id}')" title="${t('color_strip.notification.test')}">${_BELL_SVG}</button>`
+            : '';
+        html += `<div class="css-test-layer css-test-strip-wrap">` +
+            `<canvas class="css-test-layer-canvas" data-layer-idx="${i}"></canvas>` +
+            `<span class="css-test-layer-label">${escapeHtml(layerNames[i])}</span>` +
+            fireBtn +
+            `</div>`;
+    }
+    container.innerHTML = html;
+}
+
+export function applyCssTestLedCount() {
+    const input = document.getElementById('css-test-led-input');
+    if (!input || !_cssTestSourceId) return;
+    let val = parseInt(input.value, 10);
+    if (isNaN(val) || val < 1) val = 1;
+    if (val > 2000) val = 2000;
+    input.value = val;
+    localStorage.setItem(_CSS_TEST_LED_KEY, String(val));
+
+    // Clear frame data but keep views/layout intact to avoid size jump
+    _cssTestLatestRgb = null;
+    _cssTestMeta = null;
+    _cssTestLayerData = null;
+
+    // Reconnect (generation counter ignores stale frames from old WS)
+    _cssTestConnect(_cssTestSourceId, val);
 }
 
 function _cssTestRenderLoop() {
     _cssTestRaf = requestAnimationFrame(_cssTestRenderLoop);
-    if (!_cssTestLatestRgb || !_cssTestMeta) return;
+    if (!_cssTestMeta) return;
 
     const isPicture = _cssTestMeta.edges && _cssTestMeta.edges.length > 0;
-    if (isPicture) {
+
+    if (_cssTestIsComposite && _cssTestLayerData) {
+        _cssTestRenderLayers(_cssTestLayerData);
+    } else if (isPicture && _cssTestLatestRgb) {
         _cssTestRenderRect(_cssTestLatestRgb, _cssTestMeta.edges);
-    } else {
+    } else if (_cssTestLatestRgb) {
         _cssTestRenderStrip(_cssTestLatestRgb);
     }
 }
@@ -1971,6 +2097,41 @@ function _cssTestRenderStrip(rgbBytes) {
     ctx.putImageData(imageData, 0, 0);
 }
 
+function _cssTestRenderLayers(data) {
+    const container = document.getElementById('css-test-layers');
+    if (!container) return;
+    const canvases = container.querySelectorAll('.css-test-layer-canvas');
+
+    // Composite canvas is first
+    const compositeCanvas = container.querySelector('[data-layer-idx="composite"]');
+    if (compositeCanvas) _cssTestRenderStripCanvas(compositeCanvas, data.composite);
+
+    // Individual layer canvases
+    for (let i = 0; i < data.layers.length; i++) {
+        const canvas = container.querySelector(`[data-layer-idx="${i}"]`);
+        if (canvas) _cssTestRenderStripCanvas(canvas, data.layers[i]);
+    }
+}
+
+function _cssTestRenderStripCanvas(canvas, rgbBytes) {
+    const ledCount = rgbBytes.length / 3;
+    if (ledCount <= 0) return;
+    canvas.width = ledCount;
+    canvas.height = 1;
+    const ctx = canvas.getContext('2d');
+    const imageData = ctx.createImageData(ledCount, 1);
+    const data = imageData.data;
+    for (let i = 0; i < ledCount; i++) {
+        const si = i * 3;
+        const di = i * 4;
+        data[di] = rgbBytes[si];
+        data[di + 1] = rgbBytes[si + 1];
+        data[di + 2] = rgbBytes[si + 2];
+        data[di + 3] = 255;
+    }
+    ctx.putImageData(imageData, 0, 0);
+}
+
 function _cssTestRenderRect(rgbBytes, edges) {
     // edges: [{ edge: "top"|..., indices: [outputIdx, ...] }, ...]
     // indices are pre-computed on server: reverse + offset already applied
@@ -2003,13 +2164,27 @@ function _cssTestRenderRect(rgbBytes, edges) {
     }
 }
 
+export function fireCssTestNotification() {
+    for (const id of _cssTestNotificationIds) {
+        testNotification(id);
+    }
+}
+
+export function fireCssTestNotificationLayer(sourceId) {
+    testNotification(sourceId);
+}
+
 export function closeTestCssSourceModal() {
     if (_cssTestWs) { _cssTestWs.close(); _cssTestWs = null; }
     if (_cssTestRaf) { cancelAnimationFrame(_cssTestRaf); _cssTestRaf = null; }
     _cssTestLatestRgb = null;
     _cssTestMeta = null;
+    _cssTestSourceId = null;
+    _cssTestIsComposite = false;
+    _cssTestLayerData = null;
+    _cssTestNotificationIds = [];
     const modal = document.getElementById('test-css-source-modal');
-    if (modal) { modal.style.display = 'none'; modal.classList.remove('css-test-wide'); }
+    if (modal) { modal.style.display = 'none'; }
 }
 
 /* Gradient editor moved to css-gradient-editor.js */

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

@@ -931,6 +931,9 @@
   "color_strip.test.title": "Test Preview",
   "color_strip.test.connecting": "Connecting...",
   "color_strip.test.error": "Failed to connect to preview stream",
+  "color_strip.test.led_count": "LEDs:",
+  "color_strip.test.apply": "Apply",
+  "color_strip.test.composite": "Composite",
   "color_strip.type.daylight": "Daylight Cycle",
   "color_strip.type.daylight.desc": "Simulates natural daylight over 24 hours",
   "color_strip.type.daylight.hint": "Simulates the sun's color temperature throughout a 24-hour day/night cycle — from warm sunrise to cool daylight to warm sunset and dim night.",

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

@@ -931,6 +931,9 @@
   "color_strip.test.title": "Предпросмотр",
   "color_strip.test.connecting": "Подключение...",
   "color_strip.test.error": "Не удалось подключиться к потоку предпросмотра",
+  "color_strip.test.led_count": "Кол-во LED:",
+  "color_strip.test.apply": "Применить",
+  "color_strip.test.composite": "Композит",
   "color_strip.type.daylight": "Дневной цикл",
   "color_strip.type.daylight.desc": "Имитация естественного дневного света за 24 часа",
   "color_strip.type.daylight.hint": "Имитирует цветовую температуру солнца в течение суток — от тёплого рассвета до прохладного дневного света, заката и ночи.",

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

@@ -931,6 +931,9 @@
   "color_strip.test.title": "预览测试",
   "color_strip.test.connecting": "连接中...",
   "color_strip.test.error": "无法连接到预览流",
+  "color_strip.test.led_count": "LED数量:",
+  "color_strip.test.apply": "应用",
+  "color_strip.test.composite": "合成",
   "color_strip.type.daylight": "日光循环",
   "color_strip.type.daylight.desc": "模拟24小时自然日光变化",
   "color_strip.type.daylight.hint": "模拟太阳在24小时内的色温变化——从温暖的日出到冷白的日光，再到温暖的日落和昏暗的夜晚。",

server/src/wled_controller/templates/modals/test-css-source.html

@@ -2,13 +2,16 @@
 <div id="test-css-source-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="test-css-source-modal-title">
     <div class="modal-content">
         <div class="modal-header">
-            <h2 id="test-css-source-modal-title" data-i18n="color_strip.test.title">Test Color Strip</h2>
+            <h2 id="test-css-source-modal-title" data-i18n="color_strip.test.title">Test Preview</h2>
             <button class="modal-close-btn" onclick="closeTestCssSourceModal()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
         </div>
         <div class="modal-body">
             <!-- Strip view (for generic sources) -->
-            <div id="css-test-strip-view">
+            <div id="css-test-strip-view" class="css-test-strip-wrap">
                 <canvas id="css-test-strip-canvas" class="css-test-strip-canvas"></canvas>
+                <button id="css-test-fire-btn" class="css-test-fire-btn" style="display:none"
+                        onclick="fireCssTestNotification()"
+                        data-i18n-title="color_strip.notification.test"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/><path d="M4 2C2.8 3.7 2 5.7 2 8"/><path d="M22 8c0-2.3-.8-4.3-2-6"/></svg></button>
             </div>
 
             <!-- Rectangle view (for picture sources) -->
@@ -28,9 +31,22 @@
                 </div>
             </div>
 
+            <!-- Composite layers view -->
+            <div id="css-test-layers-view" style="display:none">
+                <div id="css-test-layers" class="css-test-layers"></div>
+            </div>
+
             <div class="css-test-info">
                 <span id="css-test-led-count" class="css-test-stat"></span>
             </div>
+
+            <!-- LED count control -->
+            <div class="css-test-led-control" id="css-test-led-control">
+                <label for="css-test-led-input" data-i18n="color_strip.test.led_count">LEDs:</label>
+                <input type="number" id="css-test-led-input" min="1" max="2000" step="1" value="100" class="css-test-led-input">
+                <button class="btn btn-sm btn-secondary css-test-led-apply" onclick="applyCssTestLedCount()" data-i18n="color_strip.test.apply">Apply</button>
+            </div>
+
             <div id="css-test-status" class="css-test-status" data-i18n="color_strip.test.connecting">Connecting...</div>
         </div>
     </div>