add bed cooler project.

data/www/components/led-card.js

@@ -0,0 +1,32 @@
+class LedCard extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <style>
+        :host{display:block}section{height:100%;box-sizing:border-box}.rangeRow{display:flex;gap:12px;align-items:center}.rangeRow input{flex:1}.rangeRow output{min-width:3ch;text-align:right;font-weight:650}
+      </style>
+      <section>
+        <h3>LED</h3>
+        <label>Brightness</label>
+        <div class="rangeRow"><input id="brightness" type="range" min="0" max="100" value="0"><output id="value">0</output></div>
+        <button id="apply">Apply</button>
+        <pre id="out"></pre>
+      </section>`;
+    this.brightness = this.querySelector('#brightness');
+    this.value = this.querySelector('#value');
+    this.brightness.addEventListener('input', () => this.value.value = this.brightness.value);
+    this.querySelector('#apply').addEventListener('click', () => this.setLed());
+    window.addEventListener('app:settings-loaded', event => this.applySettings(event.detail.settings));
+  }
+
+  applySettings(settings) {
+    if (!settings || settings.ledBrightness === undefined) return;
+    this.brightness.value = settings.ledBrightness;
+    this.value.value = settings.ledBrightness;
+  }
+
+  async setLed() {
+    this.querySelector('#out').textContent = await window.App.req('POST', '/api/led', {brightness: +this.brightness.value});
+  }
+}
+
+customElements.define('led-card', LedCard);