Add command palette entity selector for all editor dropdowns

Replace plain <select> dropdowns with a searchable command palette modal
for 16 entity selectors across 6 editors (targets, streams, CSS sources,
value sources, audio sources, pattern templates). Unified EntityPalette
singleton + EntitySelect wrapper in core/entity-palette.js.

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

server/src/wled_controller/static/css/components.css

@@ -583,3 +583,145 @@ textarea:focus-visible {
     .icon-select-cell { padding: 8px 4px; }
     .icon-select-grid { gap: 4px; padding: 4px; }
 }
+
+/* ── Entity Palette (command-palette style selector) ─────── */
+
+.entity-palette-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    background: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: min(20vh, 120px);
+}
+.entity-palette-overlay.open {
+    display: flex;
+}
+.entity-palette {
+    width: min(500px, 90vw);
+    max-height: 60vh;
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.entity-palette-search-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border-color);
+}
+.entity-palette-search-row .icon {
+    width: 18px;
+    height: 18px;
+    opacity: 0.5;
+    flex-shrink: 0;
+}
+.entity-palette-input {
+    flex: 1;
+    background: none;
+    border: none;
+    outline: none;
+    color: var(--text-primary);
+    font-size: 1rem;
+    padding: 0;
+}
+.entity-palette-list {
+    overflow-y: auto;
+    padding: 4px 0;
+}
+.entity-palette-empty {
+    padding: 16px;
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+.entity-palette-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 14px;
+    cursor: pointer;
+    transition: background 0.1s;
+}
+.entity-palette-item:hover,
+.entity-palette-item.ep-highlight {
+    background: var(--bg-secondary);
+}
+.entity-palette-item.ep-current {
+    border-left: 3px solid var(--primary-color);
+    padding-left: 11px;
+}
+.ep-item-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+}
+.ep-item-icon .icon {
+    width: 18px;
+    height: 18px;
+}
+.ep-item-label {
+    flex: 1;
+    font-size: 0.95rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ep-item-desc {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 40%;
+}
+
+/* Entity Select trigger (replaces <select>) */
+.entity-select-trigger {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    background: var(--bg-color);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 1rem;
+    cursor: pointer;
+    text-align: left;
+    transition: border-color 0.2s;
+}
+.entity-select-trigger:hover {
+    border-color: var(--primary-color);
+}
+.es-trigger-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+}
+.es-trigger-icon .icon {
+    width: 16px;
+    height: 16px;
+}
+.es-trigger-label {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.es-trigger-none {
+    color: var(--text-secondary);
+}
+.es-trigger-arrow {
+    flex-shrink: 0;
+    opacity: 0.5;
+    font-size: 0.9rem;
+}