refactor: key colors targets → CSS source type, HA target improvements

Key Colors refactor:
- New `key_colors` CSS source type with inline rectangles
- KeyColorsColorStripStream: extracts N colors from screen regions
- CSS editor: EntitySelect for picture source, IconSelect for color mode
- Configure Regions button on card opens pattern canvas editor
- Live WS preview at 5 FPS with rectangle overlay + color swatches
- Removed KC target type, pattern template entity, and related API routes
- Removed KC/pattern template sections from Targets tab

HA light target improvements:
- Update rate, transition, mappings, brightness VS now editable via PUT
- Card crosslinks for HA source, CSS source, brightness VS
- HA connection status icon, text metrics (Hz, uptime)
- Brightness value source selector in editor

server/src/wled_controller/templates/modals/css-editor.html

@@ -37,6 +37,7 @@
                         <option value="candlelight" data-i18n="color_strip.type.candlelight">Candlelight</option>
                         <option value="weather" data-i18n="color_strip.type.weather">Weather</option>
                         <option value="processed" data-i18n="color_strip.type.processed">Processed</option>
+                        <option value="key_colors" data-i18n="color_strip.type.key_colors">Key Colors</option>
                     </select>
                 </div>
 
@@ -676,6 +677,40 @@
                     </div>
                 </div>
 
+                <!-- Key Colors section -->
+                <div id="css-editor-key-colors-section" style="display:none">
+                    <div class="form-group">
+                        <div class="label-row">
+                            <label for="css-editor-kc-picture-source" data-i18n="color_strip.key_colors.picture_source">Picture Source:</label>
+                        </div>
+                        <select id="css-editor-kc-picture-source"></select>
+                    </div>
+                    <div class="form-group">
+                        <div class="label-row">
+                            <label for="css-editor-kc-interpolation" data-i18n="color_strip.key_colors.interpolation">Color Mode:</label>
+                        </div>
+                        <select id="css-editor-kc-interpolation">
+                            <option value="average">Average</option>
+                            <option value="median">Median</option>
+                            <option value="dominant">Dominant</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <div class="label-row">
+                            <label for="css-editor-kc-smoothing"><span data-i18n="color_strip.key_colors.smoothing">Smoothing:</span> <span id="css-editor-kc-smoothing-val">0.30</span></label>
+                        </div>
+                        <input type="range" id="css-editor-kc-smoothing" min="0" max="1" step="0.05" value="0.3"
+                            oninput="document.getElementById('css-editor-kc-smoothing-val').textContent = parseFloat(this.value).toFixed(2)">
+                    </div>
+                    <div class="form-group">
+                        <div class="label-row">
+                            <label for="css-editor-kc-brightness"><span data-i18n="color_strip.key_colors.brightness">Brightness:</span> <span id="css-editor-kc-brightness-val">1.00</span></label>
+                        </div>
+                        <input type="range" id="css-editor-kc-brightness" min="0" max="1" step="0.05" value="1.0"
+                            oninput="document.getElementById('css-editor-kc-brightness-val').textContent = parseFloat(this.value).toFixed(2)">
+                    </div>
+                </div>
+
                 <!-- Shared LED count field -->
                 <div id="css-editor-led-count-group" class="form-group">
                     <div class="label-row">