@homebridge-plugins/homebridge-eufy-security 0.0.1

package/homebridge-ui/public/assets/icons/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M440-280h80v-240h-80v240Zm68.5-331.5Q520-623 520-640t-11.5-28.5Q497-680 480-680t-28.5 11.5Q440-657 440-640t11.5 28.5Q463-600 480-600t28.5-11.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

package/homebridge-ui/public/assets/icons/inventory.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M200-80q-33 0-56.5-23.5T120-160v-451q-18-11-29-28.5T80-680v-120q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v120q0 23-11 40.5T840-611v451q0 33-23.5 56.5T760-80H200Zm0-520v440h560v-440H200Zm-40-80h640v-120H160v120Zm200 280h240v-80H360v80Zm120 20Z"/></svg>

package/homebridge-ui/public/assets/icons/refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>

package/homebridge-ui/public/assets/icons/satellite_alt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M560-32v-80q117 0 198.5-81.5T840-392h80q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T560-32Zm0-160v-80q50 0 85-35t35-85h80q0 83-58.5 141.5T560-192ZM222-57q-15 0-30-6t-27-17L23-222q-11-12-17-27t-6-30q0-16 6-30.5T23-335l127-127q23-23 57-23.5t57 22.5l50 50 28-28-50-50q-23-23-23-56t23-56l57-57q23-23 56.5-23t56.5 23l50 50 28-28-50-50q-23-23-23-56.5t23-56.5l127-127q12-12 27-18t30-6q15 0 29.5 6t26.5 18l142 142q12 11 17.5 25.5T895-730q0 15-5.5 30T872-673L745-546q-23 23-56.5 23T632-546l-50-50-28 28 50 50q23 23 22.5 56.5T603-405l-56 56q-23 23-56.5 23T434-349l-50-50-28 28 50 50q23 23 22.5 57T405-207L278-80q-11 11-25.5 17T222-57Zm0-79 42-42-142-142-42 42 142 142Zm85-85 42-42-142-142-42 42 142 142Zm184-184 56-56-142-142-56 56 142 142Zm198-198 42-42-142-142-42 42 142 142Zm85-85 42-42-142-142-42 42 142 142ZM448-504Z"/></svg>

package/homebridge-ui/public/assets/icons/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>

package/homebridge-ui/public/assets/icons/settings_backup_restore.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M480-400q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0 280q-139 0-241-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Z"/></svg>

package/homebridge-ui/public/assets/icons/solar_power.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="m80-80 80-400h640l80 400H80Zm40-720v-80h120v80H120Zm58 640h262v-80H194l-16 80Zm67-427-57-56 85-85 57 56-85 85Zm-35 267h230v-80H226l-16 80Zm128.5-418.5Q280-797 280-880h80q0 50 35 85t85 35q50 0 85-35t35-85h80q0 83-58.5 141.5T480-680q-83 0-141.5-58.5ZM480-880Zm-40 360v-120h80v120h-80Zm80 360h262l-16-80H520v80Zm0-160h230l-16-80H520v80Zm195-267-84-85 56-56 85 84-57 57Zm5-213v-80h120v80H720Z"/></svg>

package/homebridge-ui/public/assets/icons/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm330.5-51.5Q520-263 520-280t-11.5-28.5Q497-320 480-320t-28.5 11.5Q440-297 440-280t11.5 28.5Q463-240 480-240t28.5-11.5ZM440-360h80v-200h-80v200Zm40-100Z"/></svg>

package/homebridge-ui/public/components/device-card.js

@@ -0,0 +1,162 @@
+/**
+ * DeviceCard component — renders a single device/station card for the dashboard grid.
+ *
+ * Usage:
+ *   DeviceCard.render(container, {
+ *     device: { uniqueId, displayName, type, typename, ... },
+ *     isStation: false,
+ *     enabled: true,
+ *     onClick: (device) => { ... },
+ *     onToggle: (device, enabled) => { ... }
+ *   });
+ */
+// eslint-disable-next-line no-unused-vars
+const DeviceCard = {
+
+  /**
+   * @param {HTMLElement} container
+   * @param {object} opts
+   * @param {object} opts.device - L_Device or L_Station data
+   * @param {boolean} [opts.isStation]
+   * @param {boolean} opts.enabled - whether device is enabled (not ignored)
+   * @param {function} opts.onClick - callback(device)
+   * @param {function} opts.onToggle - callback(device, enabled)
+   * @returns {HTMLElement}
+   */
+  render(container, opts) {
+    const d = opts.device;
+    const isUnsupported = d.unsupported === true;
+    const isIgnored = d.ignored === true;
+
+    const col = document.createElement('div');
+    col.className = 'col-6 col-md-4 col-lg-3 mb-3';
+
+    const card = document.createElement('div');
+    card.className = 'device-card';
+    if (isUnsupported) card.classList.add('device-card--unsupported');
+    if (isIgnored) card.classList.add('device-card--ignored');
+
+    // Image (skip for unsupported)
+    if (!isUnsupported) {
+      const imgWrap = document.createElement('div');
+      imgWrap.className = 'device-card__image-wrap';
+      const img = document.createElement('img');
+      img.src = DeviceImages.getPath(d.type);
+      img.alt = d.displayName;
+      img.loading = 'lazy';
+      imgWrap.appendChild(img);
+      card.appendChild(imgWrap);
+    }
+
+    // Body
+    const body = document.createElement('div');
+    body.className = 'device-card__body';
+
+    const name = document.createElement('div');
+    name.className = 'device-card__name';
+    name.textContent = d.displayName;
+    name.title = d.displayName;
+
+    // Meta row: left side = battery/charging info, right side = toggle
+    const metaRow = document.createElement('div');
+    metaRow.className = 'device-card__meta-row';
+
+    const meta = document.createElement('div');
+    meta.className = 'device-card__meta';
+
+    // Build meta line with DOM nodes so we can mix text and SVG icons
+    const metaFragments = [];
+    if (isUnsupported) {
+      metaFragments.push('Type ' + d.type);
+    }
+
+    // Power info (pre-computed by server)
+    const pw = d.power || {};
+    if (pw.battery !== undefined) {
+      metaFragments.push({ icon: Helpers.batteryIcon(pw.battery), text: pw.battery + '%' });
+    } else if (pw.batteryLow === true) {
+      metaFragments.push({ icon: Helpers.batteryIcon(0), text: 'Low' });
+    } else if (pw.batteryLow === false) {
+      metaFragments.push({ icon: Helpers.batteryIcon(100), text: 'OK' });
+    }
+    if (pw.icon && pw.label) {
+      metaFragments.push({ icon: pw.icon, text: pw.label });
+    }
+    metaFragments.forEach((frag, i) => {
+      if (i > 0) meta.append(' · ');
+      if (typeof frag === 'string') {
+        meta.append(frag);
+      } else {
+        meta.appendChild(Helpers.icon(frag.icon, 14, frag.text));
+        meta.append(' ' + frag.text);
+      }
+    });
+
+    metaRow.appendChild(meta);
+
+    // Toggle — inline with meta, only for non-unsupported devices
+    if (!isUnsupported) {
+      const switchWrap = document.createElement('div');
+      switchWrap.className = 'form-check form-switch mb-0';
+      switchWrap.addEventListener('click', (e) => e.stopPropagation());
+
+      const toggle = document.createElement('input');
+      toggle.type = 'checkbox';
+      toggle.className = 'form-check-input';
+      toggle.checked = opts.enabled;
+      toggle.role = 'switch';
+      toggle.title = opts.enabled ? 'Enabled in HomeKit' : 'Disabled in HomeKit';
+
+      toggle.addEventListener('change', (e) => {
+        e.stopPropagation();
+        if (opts.onToggle) opts.onToggle(d, toggle.checked);
+      });
+
+      switchWrap.appendChild(toggle);
+      metaRow.appendChild(switchWrap);
+    }
+
+    body.appendChild(name);
+    body.appendChild(metaRow);
+
+    // Footer with badges (unsupported / disabled)
+    const footer = document.createElement('div');
+    footer.className = 'device-card__footer';
+
+    const badgeArea = document.createElement('div');
+    let hasBadge = false;
+
+    if (isUnsupported) {
+      const badge = document.createElement('span');
+      badge.className = 'badge badge-unsupported';
+      badge.textContent = 'Not Supported';
+      badgeArea.appendChild(badge);
+
+      const hint = document.createElement('div');
+      hint.className = 'device-card__hint';
+      hint.textContent = 'Click to help us add support';
+      badgeArea.appendChild(hint);
+      hasBadge = true;
+    } else if (isIgnored) {
+      const badge = document.createElement('span');
+      badge.className = 'badge bg-secondary';
+      badge.textContent = 'Disabled';
+      badgeArea.appendChild(badge);
+      hasBadge = true;
+    }
+
+    footer.appendChild(badgeArea);
+
+    card.appendChild(body);
+    if (hasBadge) card.appendChild(footer);
+
+    // Click handler — navigate to detail
+    card.addEventListener('click', () => {
+      if (opts.onClick) opts.onClick(d);
+    });
+
+    col.appendChild(card);
+    if (container) container.appendChild(col);
+    return col;
+  },
+};

package/homebridge-ui/public/components/guard-modes.js

@@ -0,0 +1,88 @@
+/**
+ * Guard Modes mapping component.
+ * Maps HomeKit modes (Home, Away, Night, Off) to Eufy guard mode numbers.
+ *
+ * Usage:
+ *   GuardModes.render(container, {
+ *     hkHome: 1, hkAway: 0, hkNight: 1, hkOff: 63,
+ *     onChange: (modes) => { ... }  // { hkHome, hkAway, hkNight, hkOff }
+ *   });
+ */
+// eslint-disable-next-line no-unused-vars
+const GuardModes = {
+  EUFY_MODES: [
+    { value: '0', label: 'Away' },
+    { value: '1', label: 'Home' },
+    { value: '2', label: 'Schedule' },
+    { value: '3', label: 'Custom 1' },
+    { value: '4', label: 'Custom 2' },
+    { value: '5', label: 'Custom 3' },
+    { value: '6', label: 'Off' },
+    { value: '47', label: 'Geofencing' },
+    { value: '63', label: 'Disarmed' },
+  ],
+
+  /**
+   * @param {HTMLElement} container
+   * @param {object} opts
+   * @param {number} [opts.hkHome]
+   * @param {number} [opts.hkAway]
+   * @param {number} [opts.hkNight]
+   * @param {number} [opts.hkOff]
+   * @param {boolean} [opts.disabled]
+   * @param {function} opts.onChange - callback({ hkHome, hkAway, hkNight, hkOff })
+   * @returns {HTMLElement}
+   */
+  render(container, opts) {
+    const wrap = document.createElement('div');
+    wrap.className = 'guard-mode-grid';
+
+    const modes = {
+      hkHome: { label: 'HomeKit Home', value: opts.hkHome ?? 1 },
+      hkAway: { label: 'HomeKit Away', value: opts.hkAway ?? 0 },
+      hkNight: { label: 'HomeKit Night', value: opts.hkNight ?? 1 },
+      hkOff: { label: 'HomeKit Off', value: opts.hkOff ?? 63 },
+    };
+
+    const currentValues = {
+      hkHome: modes.hkHome.value,
+      hkAway: modes.hkAway.value,
+      hkNight: modes.hkNight.value,
+      hkOff: modes.hkOff.value,
+    };
+
+    Object.entries(modes).forEach(([key, mode]) => {
+      const group = document.createElement('div');
+      group.className = 'form-group';
+
+      const label = document.createElement('label');
+      label.textContent = mode.label;
+      label.setAttribute('for', 'guard-' + key);
+
+      const select = document.createElement('select');
+      select.className = 'form-select form-select-sm';
+      select.id = 'guard-' + key;
+      select.disabled = !!opts.disabled;
+
+      this.EUFY_MODES.forEach((em) => {
+        const option = document.createElement('option');
+        option.value = em.value;
+        option.textContent = em.label;
+        if (String(em.value) === String(mode.value)) option.selected = true;
+        select.appendChild(option);
+      });
+
+      select.addEventListener('change', () => {
+        currentValues[key] = parseInt(select.value);
+        if (opts.onChange) opts.onChange({ ...currentValues });
+      });
+
+      group.appendChild(label);
+      group.appendChild(select);
+      wrap.appendChild(group);
+    });
+
+    if (container) container.appendChild(wrap);
+    return wrap;
+  },
+};

package/homebridge-ui/public/components/number-input.js

@@ -0,0 +1,121 @@
+/**
+ * NumberInput component — renders a number input with +/- buttons, label, and optional help tooltip.
+ *
+ * Usage:
+ *   NumberInput.render(container, {
+ *     id: 'polling-interval',
+ *     label: 'Polling Interval',
+ *     help: 'Minutes between cloud polls',
+ *     value: 10,
+ *     min: 1,
+ *     max: 120,
+ *     step: 1,
+ *     suffix: 'min',
+ *     onChange: (value) => { ... }
+ *   });
+ */
+// eslint-disable-next-line no-unused-vars
+const NumberInput = {
+  /**
+   * @param {HTMLElement} container
+   * @param {object} opts
+   * @param {string} opts.id
+   * @param {string} opts.label
+   * @param {string} [opts.help]
+   * @param {number} opts.value
+   * @param {number} [opts.min]
+   * @param {number} [opts.max]
+   * @param {number} [opts.step]
+   * @param {string} [opts.suffix] - text after the input (e.g., 'min', 'sec')
+   * @param {boolean} [opts.disabled]
+   * @param {function} opts.onChange - callback(value: number)
+   * @returns {HTMLElement}
+   */
+  render(container, opts) {
+    const row = document.createElement('div');
+    row.className = 'eufy-toggle';
+
+    const labelWrap = document.createElement('div');
+    labelWrap.className = 'eufy-toggle__label';
+
+    const labelEl = document.createElement('label');
+    labelEl.setAttribute('for', opts.id);
+    labelEl.textContent = opts.label;
+    labelWrap.appendChild(labelEl);
+
+    if (opts.help) {
+      const helpEl = document.createElement('span');
+      helpEl.className = 'eufy-toggle__help';
+      helpEl.textContent = '?';
+      helpEl.title = opts.help;
+      labelWrap.appendChild(helpEl);
+    }
+
+    const inputGroup = document.createElement('div');
+    inputGroup.className = 'number-input-group';
+
+    const step = opts.step || 1;
+    const min = opts.min !== undefined ? opts.min : 0;
+    const max = opts.max !== undefined ? opts.max : 99999;
+
+    const btnMinus = document.createElement('button');
+    btnMinus.type = 'button';
+    btnMinus.className = 'btn btn-outline-secondary btn-sm';
+    btnMinus.textContent = '−';
+
+    const input = document.createElement('input');
+    input.type = 'number';
+    input.className = 'form-control form-control-sm';
+    input.id = opts.id;
+    input.value = opts.value;
+    input.min = min;
+    input.max = max;
+    input.step = step;
+    input.disabled = !!opts.disabled;
+
+    const btnPlus = document.createElement('button');
+    btnPlus.type = 'button';
+    btnPlus.className = 'btn btn-outline-secondary btn-sm';
+    btnPlus.textContent = '+';
+
+    const fireChange = () => {
+      let val = parseFloat(input.value);
+      if (isNaN(val)) val = min;
+      val = Math.max(min, Math.min(max, val));
+      input.value = val;
+      if (opts.onChange) opts.onChange(val);
+    };
+
+    btnMinus.addEventListener('click', () => {
+      let val = parseFloat(input.value) - step;
+      input.value = Math.max(min, val);
+      fireChange();
+    });
+
+    btnPlus.addEventListener('click', () => {
+      let val = parseFloat(input.value) + step;
+      input.value = Math.min(max, val);
+      fireChange();
+    });
+
+    input.addEventListener('change', fireChange);
+
+    inputGroup.appendChild(btnMinus);
+    inputGroup.appendChild(input);
+    inputGroup.appendChild(btnPlus);
+
+    if (opts.suffix) {
+      const suffixEl = document.createElement('span');
+      suffixEl.className = 'text-muted ms-1';
+      suffixEl.style.fontSize = '0.8rem';
+      suffixEl.textContent = opts.suffix;
+      inputGroup.appendChild(suffixEl);
+    }
+
+    row.appendChild(labelWrap);
+    row.appendChild(inputGroup);
+
+    if (container) container.appendChild(row);
+    return row;
+  },
+};

package/homebridge-ui/public/components/select.js

@@ -0,0 +1,73 @@
+/**
+ * Select component — renders a dropdown with label and optional help tooltip.
+ *
+ * Usage:
+ *   Select.render(container, {
+ *     id: 'snapshot-method',
+ *     label: 'Snapshot Method',
+ *     help: 'How snapshots are captured',
+ *     options: [{ value: '0', label: 'Auto' }, { value: '1', label: 'From Stream' }],
+ *     value: '0',
+ *     onChange: (value) => { ... }
+ *   });
+ */
+// eslint-disable-next-line no-unused-vars
+const Select = {
+  /**
+   * @param {HTMLElement} container
+   * @param {object} opts
+   * @param {string} opts.id
+   * @param {string} opts.label
+   * @param {string} [opts.help]
+   * @param {Array<{value: string, label: string}>} opts.options
+   * @param {string} opts.value - initial selected value
+   * @param {boolean} [opts.disabled]
+   * @param {function} opts.onChange - callback(value: string)
+   * @returns {HTMLElement}
+   */
+  render(container, opts) {
+    const row = document.createElement('div');
+    row.className = 'eufy-toggle';
+
+    const labelWrap = document.createElement('div');
+    labelWrap.className = 'eufy-toggle__label';
+
+    const labelEl = document.createElement('label');
+    labelEl.setAttribute('for', opts.id);
+    labelEl.textContent = opts.label;
+    labelWrap.appendChild(labelEl);
+
+    if (opts.help) {
+      const helpEl = document.createElement('span');
+      helpEl.className = 'eufy-toggle__help';
+      helpEl.textContent = '?';
+      helpEl.title = opts.help;
+      labelWrap.appendChild(helpEl);
+    }
+
+    const selectEl = document.createElement('select');
+    selectEl.className = 'form-select form-select-sm';
+    selectEl.id = opts.id;
+    selectEl.style.width = 'auto';
+    selectEl.style.maxWidth = '200px';
+    selectEl.disabled = !!opts.disabled;
+
+    (opts.options || []).forEach((opt) => {
+      const option = document.createElement('option');
+      option.value = opt.value;
+      option.textContent = opt.label;
+      if (String(opt.value) === String(opts.value)) option.selected = true;
+      selectEl.appendChild(option);
+    });
+
+    selectEl.addEventListener('change', () => {
+      if (opts.onChange) opts.onChange(selectEl.value);
+    });
+
+    row.appendChild(labelWrap);
+    row.appendChild(selectEl);
+
+    if (container) container.appendChild(row);
+    return row;
+  },
+};

package/homebridge-ui/public/components/toggle.js

@@ -0,0 +1,68 @@
+/**
+ * Toggle component — renders an on/off switch with label and optional help tooltip.
+ *
+ * Usage:
+ *   Toggle.render(container, {
+ *     id: 'enable-camera',
+ *     label: 'Enable Camera',
+ *     help: 'Show this camera in HomeKit',
+ *     checked: true,
+ *     onChange: (checked) => { ... }
+ *   });
+ */
+// eslint-disable-next-line no-unused-vars
+const Toggle = {
+  /**
+   * @param {HTMLElement} container - parent element to append into
+   * @param {object} opts
+   * @param {string} opts.id - unique id for the input
+   * @param {string} opts.label - display label
+   * @param {string} [opts.help] - tooltip text
+   * @param {boolean} opts.checked - initial state
+   * @param {boolean} [opts.disabled] - disabled state
+   * @param {function} opts.onChange - callback(checked: boolean)
+   * @returns {HTMLElement}
+   */
+  render(container, opts) {
+    const row = document.createElement('div');
+    row.className = 'eufy-toggle';
+
+    const labelWrap = document.createElement('div');
+    labelWrap.className = 'eufy-toggle__label';
+
+    const labelEl = document.createElement('label');
+    labelEl.setAttribute('for', opts.id);
+    labelEl.textContent = opts.label;
+    labelWrap.appendChild(labelEl);
+
+    if (opts.help) {
+      const helpEl = document.createElement('span');
+      helpEl.className = 'eufy-toggle__help';
+      helpEl.textContent = '?';
+      helpEl.title = opts.help;
+      labelWrap.appendChild(helpEl);
+    }
+
+    const switchWrap = document.createElement('div');
+    switchWrap.className = 'form-check form-switch mb-0';
+
+    const input = document.createElement('input');
+    input.type = 'checkbox';
+    input.className = 'form-check-input';
+    input.id = opts.id;
+    input.checked = !!opts.checked;
+    input.disabled = !!opts.disabled;
+    input.role = 'switch';
+
+    input.addEventListener('change', () => {
+      if (opts.onChange) opts.onChange(input.checked);
+    });
+
+    switchWrap.appendChild(input);
+    row.appendChild(labelWrap);
+    row.appendChild(switchWrap);
+
+    if (container) container.appendChild(row);
+    return row;
+  },
+};

package/homebridge-ui/public/index.html

@@ -0,0 +1,27 @@
+<link rel="stylesheet" href="style.css">
+
+<div id="app">
+  <div class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
+    <div class="spinner-border text-primary" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
+</div>
+
+<script src="utils/countries.js"></script>
+<script src="utils/device-images.js"></script>
+<script src="utils/helpers.js"></script>
+<script src="services/api.js"></script>
+<script src="services/config.js"></script>
+<script src="components/toggle.js"></script>
+<script src="components/select.js"></script>
+<script src="components/number-input.js"></script>
+<script src="components/guard-modes.js"></script>
+<script src="components/device-card.js"></script>
+<script src="views/login.js"></script>
+<script src="views/dashboard.js"></script>
+<script src="views/device-detail.js"></script>
+<script src="views/unsupported-detail.js"></script>
+<script src="views/settings.js"></script>
+<script src="views/diagnostics.js"></script>
+<script src="app.js"></script>