Add test preview for color strip sources with LED strip and rectangle views

New WebSocket endpoint streams real-time RGB frames from any CSS source.
Generic sources show a horizontal LED strip canvas. Picture sources show
a rectangle with per-edge canvases matching the calibration layout.

Server computes exact output indices per edge (offset + reverse + CW/CCW)
so the frontend renders edges in correct visual orientation.

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

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

@@ -118,6 +118,61 @@
     font-size: 0.9em;
 }
 
+/* Color strip test preview */
+.css-test-strip-canvas {
+    display: block;
+    width: 100%;
+    height: 48px;
+    background: #111;
+    border-radius: 6px;
+    image-rendering: pixelated;
+}
+
+.css-test-rect {
+    display: grid;
+    grid-template-columns: 14px 1fr 14px;
+    grid-template-rows: 14px auto 14px;
+    width: 100%;
+}
+
+.css-test-rect-corner {
+    background: transparent;
+}
+
+.css-test-rect-screen {
+    background: #111;
+    border-radius: 2px;
+    aspect-ratio: 16 / 9;
+}
+
+.css-test-edge-h,
+.css-test-edge-v {
+    image-rendering: pixelated;
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.css-test-info {
+    display: flex;
+    gap: 16px;
+    padding: 8px 0 0;
+    font-family: monospace;
+    font-size: 0.85em;
+    color: var(--text-muted, #888);
+}
+
+.css-test-status {
+    text-align: center;
+    padding: 8px 0;
+    color: var(--text-muted, #888);
+    font-size: 0.9em;
+}
+
+#test-css-source-modal.css-test-wide .modal-content {
+    max-width: 700px;
+}
+
 @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }