Add reusable icon-grid type selector for CSS source editor

Replaces the plain <select> dropdown with a visual grid popup showing
icon, label, and description for each source type. The IconSelect
component is generic and reusable for other type selectors.

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

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

@@ -16,6 +16,7 @@ import {
 } from '../core/icons.js';
 import { wrapCard } from '../core/card-colors.js';
 import { attachProcessPicker } from '../core/process-picker.js';
+import { IconSelect } from '../core/icon-select.js';
 
 class CSSEditorModal extends Modal {
     constructor() {
@@ -70,10 +71,46 @@ class CSSEditorModal extends Modal {
 
 const cssEditorModal = new CSSEditorModal();
 
+/* ── Icon-grid type selector ──────────────────────────────────── */
+
+const CSS_TYPE_KEYS = [
+    'picture', 'static', 'gradient', 'color_cycle',
+    'effect', 'composite', 'mapped', 'audio',
+    'api_input', 'notification',
+];
+
+function _buildCSSTypeItems() {
+    return CSS_TYPE_KEYS.map(key => ({
+        value: key,
+        icon: getColorStripIcon(key),
+        label: t(`color_strip.type.${key}`),
+        desc: t(`color_strip.type.${key}.desc`),
+    }));
+}
+
+let _cssTypeIconSelect = null;
+
+function _ensureCSSTypeIconSelect() {
+    const sel = document.getElementById('css-editor-type');
+    if (!sel) return;
+    if (_cssTypeIconSelect) {
+        // Refresh labels (language may have changed)
+        _cssTypeIconSelect.updateItems(_buildCSSTypeItems());
+        return;
+    }
+    _cssTypeIconSelect = new IconSelect({
+        target: sel,
+        items: _buildCSSTypeItems(),
+        columns: 2,
+    });
+}
+
 /* ── Type-switch helper ───────────────────────────────────────── */
 
 export function onCSSTypeChange() {
     const type = document.getElementById('css-editor-type').value;
+    // Sync icon-select trigger display
+    if (_cssTypeIconSelect) _cssTypeIconSelect.setValue(type);
     document.getElementById('css-editor-picture-section').style.display = type === 'picture' ? '' : 'none';
     document.getElementById('css-editor-static-section').style.display = type === 'static' ? '' : 'none';
     document.getElementById('css-editor-color-cycle-section').style.display = type === 'color_cycle' ? '' : 'none';
@@ -967,6 +1004,9 @@ export async function showCSSEditor(cssId = null, cloneData = null) {
             document.getElementById('css-editor-led-count').value = css.led_count ?? 0;
         };
 
+        // Initialize icon-grid type selector (idempotent)
+        _ensureCSSTypeIconSelect();
+
         // Hide type selector in edit mode (type is immutable)
         document.getElementById('css-editor-type-group').style.display = cssId ? 'none' : '';