Disable zero-LED calibration edges with visual dimming

Edges with 0 LEDs now:
- Dim to 25% opacity (15% for toggle zones)
- Block interaction (pointer-events: none)
- Keep LED input editable to allow changing from 0
- Prevent test toggle, span drag on disabled edges

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

server/src/wled_controller/static/app.js

@@ -1211,6 +1211,15 @@ function updateCalibrationPreview() {
         }
     });
 
+    // Disable edges with 0 LEDs
+    ['top', 'right', 'bottom', 'left'].forEach(edge => {
+        const count = parseInt(document.getElementById(`cal-${edge}-leds`).value) || 0;
+        const edgeEl = document.querySelector(`.preview-edge.edge-${edge}`);
+        const toggleEl = document.querySelector(`.edge-toggle.toggle-${edge}`);
+        if (edgeEl) edgeEl.classList.toggle('edge-disabled', count === 0);
+        if (toggleEl) toggleEl.classList.toggle('edge-disabled', count === 0);
+    });
+
     // Position span bars and render canvas overlay
     updateSpanBars();
     renderCalibrationCanvas();
@@ -1532,6 +1541,8 @@ function initSpanDrag() {
         // Handle resize via handles
         bar.querySelectorAll('.edge-span-handle').forEach(handle => {
             handle.addEventListener('mousedown', e => {
+                const edgeLeds = parseInt(document.getElementById(`cal-${edge}-leds`).value) || 0;
+                if (edgeLeds === 0) return;
                 e.preventDefault();
                 e.stopPropagation();
                 const handleType = handle.dataset.handle;
@@ -1635,6 +1646,9 @@ function toggleDirection() {
 }
 
 async function toggleTestEdge(edge) {
+    const edgeLeds = parseInt(document.getElementById(`cal-${edge}-leds`).value) || 0;
+    if (edgeLeds === 0) return;
+
     const deviceId = document.getElementById('calibration-device-id').value;
     const error = document.getElementById('calibration-error');
 

server/src/wled_controller/static/style.css

@@ -1090,6 +1090,22 @@ input:-webkit-autofill:focus {
     background: rgba(128, 128, 128, 0.25);
 }
 
+.preview-edge.edge-disabled {
+    opacity: 0.25;
+    pointer-events: none;
+}
+
+.preview-edge.edge-disabled .edge-led-input {
+    pointer-events: auto;
+    opacity: 1;
+}
+
+.edge-toggle.edge-disabled {
+    opacity: 0.15;
+    pointer-events: none;
+    cursor: default;
+}
+
 .toggle-top {
     top: -16px;
     left: 56px;