Simplify calibration model, add pixel preview, and improve UI

- Replace segment-based calibration with core parameters (leds_top/right/bottom/left);
  segments are now derived at runtime via lookup tables
- Fix clockwise/counterclockwise edge traversal order for all 8 start_position/layout
  combinations (e.g. bottom_left+clockwise now correctly goes up-left first)
- Add pixel layout preview overlay with color-coded edges, LED index labels,
  direction arrows, and start position marker
- Move "Add New Device" form into a modal dialog triggered by "+" button
- Add display index selector to device settings modal
- Migrate from requirements.txt to pyproject.toml for dependency management
- Update Dockerfile and docs to use `pip install .`

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

server/tests/test_calibration.py

@@ -10,6 +10,8 @@ from wled_controller.core.calibration import (
     create_default_calibration,
     calibration_from_dict,
     calibration_to_dict,
+    EDGE_ORDER,
+    EDGE_REVERSE,
 )
 from wled_controller.core.screen_capture import BorderPixels
 
@@ -31,84 +33,50 @@ def test_calibration_segment():
 
 def test_calibration_config_validation():
     """Test calibration configuration validation."""
-    segments = [
-        CalibrationSegment(edge="bottom", led_start=0, led_count=40),
-        CalibrationSegment(edge="right", led_start=40, led_count=30),
-        CalibrationSegment(edge="top", led_start=70, led_count=40),
-        CalibrationSegment(edge="left", led_start=110, led_count=40),
-    ]
-
     config = CalibrationConfig(
         layout="clockwise",
         start_position="bottom_left",
-        segments=segments,
+        leds_bottom=40,
+        leds_right=30,
+        leds_top=40,
+        leds_left=40,
     )
 
     assert config.validate() is True
     assert config.get_total_leds() == 150
 
 
-def test_calibration_config_duplicate_edges():
-    """Test validation fails with duplicate edges."""
-    segments = [
-        CalibrationSegment(edge="top", led_start=0, led_count=40),
-        CalibrationSegment(edge="top", led_start=40, led_count=40),  # Duplicate
-    ]
-
+def test_calibration_config_all_zero_leds():
+    """Test validation fails when all LED counts are zero."""
     config = CalibrationConfig(
         layout="clockwise",
         start_position="bottom_left",
-        segments=segments,
     )
 
-    with pytest.raises(ValueError, match="Duplicate edges"):
+    with pytest.raises(ValueError, match="at least one LED"):
         config.validate()
 
 
-def test_calibration_config_overlapping_indices():
-    """Test validation fails with overlapping LED indices."""
-    segments = [
-        CalibrationSegment(edge="bottom", led_start=0, led_count=50),
-        CalibrationSegment(edge="right", led_start=40, led_count=30),  # Overlaps
-    ]
-
+def test_calibration_config_negative_led_count():
+    """Test validation fails with negative LED counts."""
     config = CalibrationConfig(
         layout="clockwise",
         start_position="bottom_left",
-        segments=segments,
+        leds_top=-5,
+        leds_bottom=40,
     )
 
-    with pytest.raises(ValueError, match="overlap"):
-        config.validate()
-
-
-def test_calibration_config_invalid_led_count():
-    """Test validation fails with invalid LED counts."""
-    segments = [
-        CalibrationSegment(edge="top", led_start=0, led_count=0),  # Invalid
-    ]
-
-    config = CalibrationConfig(
-        layout="clockwise",
-        start_position="bottom_left",
-        segments=segments,
-    )
-
-    with pytest.raises(ValueError):
+    with pytest.raises(ValueError, match="non-negative"):
         config.validate()
 
 
 def test_get_segment_for_edge():
     """Test getting segment by edge name."""
-    segments = [
-        CalibrationSegment(edge="bottom", led_start=0, led_count=40),
-        CalibrationSegment(edge="right", led_start=40, led_count=30),
-    ]
-
     config = CalibrationConfig(
         layout="clockwise",
         start_position="bottom_left",
-        segments=segments,
+        leds_bottom=40,
+        leds_right=30,
     )
 
     bottom_seg = config.get_segment_for_edge("bottom")
@@ -119,6 +87,100 @@ def test_get_segment_for_edge():
     assert missing_seg is None
 
 
+def test_build_segments_basic():
+    """Test that build_segments produces correct output."""
+    config = CalibrationConfig(
+        layout="clockwise",
+        start_position="bottom_left",
+        leds_bottom=10,
+        leds_right=20,
+        leds_top=10,
+        leds_left=20,
+    )
+
+    segments = config.build_segments()
+    assert len(segments) == 4
+
+    # Clockwise from bottom_left: left(up), top(right), right(down), bottom(left)
+    assert segments[0].edge == "left"
+    assert segments[0].led_start == 0
+    assert segments[0].led_count == 20
+    assert segments[0].reverse is True
+
+    assert segments[1].edge == "top"
+    assert segments[1].led_start == 20
+    assert segments[1].led_count == 10
+    assert segments[1].reverse is False
+
+    assert segments[2].edge == "right"
+    assert segments[2].led_start == 30
+    assert segments[2].led_count == 20
+    assert segments[2].reverse is False
+
+    assert segments[3].edge == "bottom"
+    assert segments[3].led_start == 50
+    assert segments[3].led_count == 10
+    assert segments[3].reverse is True
+
+
+def test_build_segments_skips_zero_edges():
+    """Test that edges with 0 LEDs are skipped."""
+    config = CalibrationConfig(
+        layout="clockwise",
+        start_position="bottom_left",
+        leds_right=288,
+        leds_top=358,
+        leds_left=288,
+    )
+
+    segments = config.build_segments()
+    assert len(segments) == 3
+    edges = [s.edge for s in segments]
+    assert "bottom" not in edges
+
+
+@pytest.mark.parametrize("start_position,layout", [
+    ("bottom_left", "clockwise"),
+    ("bottom_left", "counterclockwise"),
+    ("bottom_right", "clockwise"),
+    ("bottom_right", "counterclockwise"),
+    ("top_left", "clockwise"),
+    ("top_left", "counterclockwise"),
+    ("top_right", "clockwise"),
+    ("top_right", "counterclockwise"),
+])
+def test_build_segments_all_combinations(start_position, layout):
+    """Test build_segments matches lookup tables for all 8 combinations."""
+    config = CalibrationConfig(
+        layout=layout,
+        start_position=start_position,
+        leds_top=10,
+        leds_right=10,
+        leds_bottom=10,
+        leds_left=10,
+    )
+
+    segments = config.build_segments()
+    assert len(segments) == 4
+
+    # Verify edge order matches EDGE_ORDER table
+    expected_order = EDGE_ORDER[(start_position, layout)]
+    actual_order = [s.edge for s in segments]
+    assert actual_order == expected_order
+
+    # Verify reverse flags match EDGE_REVERSE table
+    expected_reverse = EDGE_REVERSE[(start_position, layout)]
+    for seg in segments:
+        assert seg.reverse == expected_reverse[seg.edge], \
+            f"Mismatch for {start_position}/{layout}/{seg.edge}: expected reverse={expected_reverse[seg.edge]}"
+
+    # Verify led_start values are cumulative
+    expected_start = 0
+    for seg in segments:
+        assert seg.led_start == expected_start
+        expected_start += seg.led_count
+
+
 def test_pixel_mapper_initialization():
     """Test pixel mapper initialization."""
     config = create_default_calibration(150)
@@ -156,12 +218,13 @@ def test_pixel_mapper_map_border_to_leds():
 
     # Verify colors are reasonable (allowing for some rounding)
     # Bottom LEDs should be mostly blue
-    bottom_color = led_colors[0]
+    bottom_seg = config.get_segment_for_edge("bottom")
+    bottom_color = led_colors[bottom_seg.led_start]
     assert bottom_color[2] > 200  # Blue channel high
 
     # Top LEDs should be mostly red
-    top_segment = config.get_segment_for_edge("top")
-    top_color = led_colors[top_segment.led_start]
+    top_seg = config.get_segment_for_edge("top")
+    top_color = led_colors[top_seg.led_start]
     assert top_color[0] > 200  # Red channel high
 
 
@@ -190,9 +253,7 @@ def test_pixel_mapper_test_calibration_invalid_edge():
     config = CalibrationConfig(
         layout="clockwise",
         start_position="bottom_left",
-        segments=[
-            CalibrationSegment(edge="bottom", led_start=0, led_count=40),
-        ],
+        leds_bottom=40,
     )
     mapper = PixelMapper(config)
 
@@ -209,7 +270,13 @@ def test_create_default_calibration():
     assert len(config.segments) == 4
     assert config.get_total_leds() == 150
 
-    # Check all edges are present
+    # Check all edges have LEDs
+    assert config.leds_top > 0
+    assert config.leds_right > 0
+    assert config.leds_bottom > 0
+    assert config.leds_left > 0
+
+    # Check all edges are present in derived segments
     edges = {seg.edge for seg in config.segments}
     assert edges == {"top", "right", "bottom", "left"}
 
@@ -227,22 +294,28 @@ def test_create_default_calibration_invalid():
 
 
 def test_calibration_from_dict():
-    """Test creating calibration from dictionary."""
+    """Test creating calibration from new format dictionary."""
     data = {
         "layout": "clockwise",
         "start_position": "bottom_left",
-        "segments": [
-            {"edge": "bottom", "led_start": 0, "led_count": 40, "reverse": False},
-            {"edge": "right", "led_start": 40, "led_count": 30, "reverse": False},
-        ],
+        "offset": 5,
+        "leds_top": 40,
+        "leds_right": 30,
+        "leds_bottom": 40,
+        "leds_left": 30,
     }
 
     config = calibration_from_dict(data)
 
     assert config.layout == "clockwise"
     assert config.start_position == "bottom_left"
-    assert len(config.segments) == 2
-    assert config.get_total_leds() == 70
+    assert config.offset == 5
+    assert config.leds_top == 40
+    assert config.leds_right == 30
+    assert config.leds_bottom == 40
+    assert config.leds_left == 30
+    assert config.get_total_leds() == 140
+
 
 
 def test_calibration_from_dict_missing_field():
@@ -250,7 +323,7 @@ def test_calibration_from_dict_missing_field():
     data = {
         "layout": "clockwise",
         # Missing start_position
-        "segments": [],
+        "leds_top": 10,
     }
 
     with pytest.raises(ValueError):
@@ -264,9 +337,12 @@ def test_calibration_to_dict():
 
     assert "layout" in data
     assert "start_position" in data
-    assert "segments" in data
-    assert isinstance(data["segments"], list)
-    assert len(data["segments"]) == 4
+    assert "leds_top" in data
+    assert "leds_right" in data
+    assert "leds_bottom" in data
+    assert "leds_left" in data
+    assert "segments" not in data
+    assert data["leds_top"] + data["leds_right"] + data["leds_bottom"] + data["leds_left"] == 100
 
 
 def test_calibration_round_trip():
@@ -277,5 +353,9 @@ def test_calibration_round_trip():
 
     assert restored.layout == original.layout
     assert restored.start_position == original.start_position
-    assert len(restored.segments) == len(original.segments)
+    assert restored.leds_top == original.leds_top
+    assert restored.leds_right == original.leds_right
+    assert restored.leds_bottom == original.leds_bottom
+    assert restored.leds_left == original.leds_left
     assert restored.get_total_leds() == original.get_total_leds()
+    assert len(restored.segments) == len(original.segments)