@switchbot/homebridge-switchbot 5.0.0-beta.11 → 5.0.0-beta.111

package/dist/homebridge-ui/public/js/render.ts

@@ -0,0 +1,579 @@
+import type { DEVICE_TYPES } from './constants.js'
+
+/**
+ * Get RSSI signal quality level and color based on dBm value
+ * @param rssi Signal strength in dBm (typically -30 to -90)
+ * @returns Object with quality level, color, and description
+ */
+export function getRssiSignalQuality(rssi: number | undefined): {
+  level: 'excellent' | 'good' | 'fair' | 'poor' | 'unknown'
+  color: string
+  bgColor: string
+  description: string
+  bars: number
+} {
+  if (!rssi || rssi === 0) {
+    return {
+      level: 'unknown',
+      color: '#999',
+      bgColor: '#f5f5f5',
+      description: 'Signal strength unknown',
+      bars: 0,
+    }
+  }
+
+  const dbm = Math.floor(rssi)
+
+  if (dbm > -60) {
+    return {
+      level: 'excellent',
+      color: '#34a853',
+      bgColor: '#e8f5e9',
+      description: `Excellent (${dbm} dBm)`,
+      bars: 4,
+    }
+  } else if (dbm > -75) {
+    return {
+      level: 'good',
+      color: '#fbbc04',
+      bgColor: '#fffde7',
+      description: `Good (${dbm} dBm)`,
+      bars: 3,
+    }
+  } else if (dbm > -85) {
+    return {
+      level: 'fair',
+      color: '#ff9800',
+      bgColor: '#fff3e0',
+      description: `Fair (${dbm} dBm)`,
+      bars: 2,
+    }
+  } else {
+    return {
+      level: 'poor',
+      color: '#ea4335',
+      bgColor: '#ffebee',
+      description: `Poor (${dbm} dBm) - unreliable`,
+      bars: 1,
+    }
+  }
+}
+
+/**
+ * Create visual signal strength indicator bars
+ * @param rssi Signal strength in dBm
+ * @returns HTML element showing filled bars
+ */
+export function renderSignalBars(rssi: number | undefined): HTMLElement {
+  const quality = getRssiSignalQuality(rssi)
+
+  const container = document.createElement('span')
+  container.style.display = 'inline-flex'
+  container.style.gap = '2px'
+  container.style.alignItems = 'center'
+  container.style.marginLeft = '8px'
+  container.style.fontSize = '12px'
+
+  // Create 4 bars
+  for (let i = 1; i <= 4; i++) {
+    const bar = document.createElement('span')
+    bar.style.height = `${i * 3}px`
+    bar.style.width = '3px'
+    bar.style.borderRadius = '1px'
+    bar.style.border = `1px solid ${quality.color}`
+
+    if (i <= quality.bars) {
+      bar.style.backgroundColor = quality.color
+    } else {
+      bar.style.backgroundColor = 'transparent'
+    }
+
+    container.appendChild(bar)
+  }
+
+  // Add tooltip
+  container.title = quality.description
+
+  return container
+}
+
+/**
+ * Create signal quality badge with color
+ * @param rssi Signal strength in dBm
+ * @returns HTML element showing quality level
+ */
+export function renderSignalQualityBadge(rssi: number | undefined): HTMLElement {
+  const quality = getRssiSignalQuality(rssi)
+
+  const badge = document.createElement('span')
+  badge.textContent = quality.level.charAt(0).toUpperCase() + quality.level.slice(1)
+  badge.style.cssText = `
+    background: ${quality.color};
+    color: white;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 600;
+    margin-left: 8px;
+  `
+  badge.title = quality.description
+
+  return badge
+}
+
+export function renderBadge(text: string, style: string): HTMLElement {
+  const badge = document.createElement('span')
+  badge.textContent = text
+  badge.style.cssText = style
+  return badge
+}
+
+export function renderConnectionBadge(connectionType: string): HTMLElement | null {
+  if (!connectionType) { return null }
+
+  const badge = renderBadge(connectionType, '')
+
+  if (connectionType === 'BLE') {
+    badge.style.cssText
+      = 'background: #4285f4; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 8px;'
+  } else if (connectionType === 'Both') {
+    badge.style.cssText
+      = 'background: #34a853; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 8px;'
+  } else {
+    badge.style.cssText
+      = 'background: #9e9e9e; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 8px;'
+  }
+
+  return badge
+}
+
+export function renderIRBadge(): HTMLElement {
+  return renderBadge(
+    'IR',
+    'background: #ff6b35; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 8px;',
+  )
+}
+
+function normalizeId(value: any): string {
+  return String(value ?? '').trim().toLowerCase()
+}
+
+function scrollToConfiguredDevice(deviceId: string): void {
+  const normalizedId = normalizeId(deviceId)
+  const target = document.querySelector(`[data-device-id="${normalizedId}"]`) as HTMLElement | null
+  if (!target) {
+    return
+  }
+
+  target.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  const originalOutline = target.style.outline
+  const originalBackground = target.style.background
+  target.style.outline = '2px solid var(--switchbot-red, #ef4444)'
+  target.style.background = 'rgba(239, 68, 68, 0.08)'
+  setTimeout(() => {
+    target.style.outline = originalOutline
+    target.style.background = originalBackground
+  }, 1800)
+}
+
+export async function renderDiscoveredDevices(
+  devices: any[],
+  options: { configuredIds?: Set<string> } = {},
+): Promise<HTMLElement> {
+  const ul = document.createElement('ul')
+  ul.style.maxHeight = '400px'
+  ul.style.overflowY = 'auto'
+  ul.style.marginTop = '12px'
+  ul.style.padding = '0'
+  ul.style.listStyle = 'none'
+
+  const { addDeviceToConfig } = await import('./discovery.js')
+  const { loadConfiguredDevices } = await import('./devices.js')
+  const configuredIds = options.configuredIds ?? new Set<string>()
+
+  for (const d of devices) {
+    const deviceId = normalizeId(d.id)
+    const alreadyAdded = configuredIds.has(deviceId)
+
+    const li = document.createElement('li')
+    li.className = 'device-item'
+    li.style.display = 'flex'
+    li.style.alignItems = 'center'
+    li.style.justifyContent = 'space-between'
+    li.style.padding = '10px 12px'
+    li.style.marginBottom = '6px'
+    li.style.borderRadius = '6px'
+    li.style.transition = 'all 0.2s ease'
+
+    const info = document.createElement('div')
+    info.style.flex = '1'
+
+    const nameContainer = document.createElement('div')
+    nameContainer.style.display = 'flex'
+    nameContainer.style.alignItems = 'center'
+    nameContainer.style.marginBottom = '4px'
+    nameContainer.style.flexWrap = 'wrap'
+    nameContainer.style.gap = '6px'
+
+    const name = document.createElement('div')
+    name.style.fontWeight = '500'
+    name.style.fontSize = '14px'
+    name.textContent = d.name || d.id
+
+    nameContainer.appendChild(name)
+
+    const duplicateBadge = document.createElement('span')
+    duplicateBadge.textContent = alreadyAdded ? '✓ Already Added' : '➕ New Device'
+    duplicateBadge.style.cssText = alreadyAdded
+      ? 'background: #16a34a; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600;'
+      : 'background: #2563eb; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600;'
+    nameContainer.appendChild(duplicateBadge)
+
+    // Add connection type badge
+    if (d.connectionType) {
+      const badge = renderConnectionBadge(d.connectionType)
+      if (badge) { nameContainer.appendChild(badge) }
+    }
+
+    // Add IR badge if it's an IR device
+    if (d.isIR) {
+      nameContainer.appendChild(renderIRBadge())
+    }
+
+    // Add signal strength visualization (only for BLE/wireless devices)
+    if (d.rssi !== undefined && d.rssi !== null && d.rssi !== 0) {
+      nameContainer.appendChild(renderSignalBars(d.rssi))
+      nameContainer.appendChild(renderSignalQualityBadge(d.rssi))
+    }
+
+    const details = document.createElement('div')
+    details.style.fontSize = '11px'
+    details.style.opacity = '0.7'
+    details.style.marginTop = '4px'
+    details.style.fontFamily = 'monospace'
+
+    let detailsText = `ID: ${d.id} | Type: ${d.type} | Model: ${d.model || 'N/A'}`
+    if (d.hubDeviceId) { detailsText += ` | Hub: ${d.hubDeviceId}` }
+    if (d.address) { detailsText += ` | MAC: ${d.address}` }
+    details.textContent = detailsText
+
+    info.appendChild(nameContainer)
+    info.appendChild(details)
+
+    const addBtn = document.createElement('button')
+    addBtn.textContent = alreadyAdded ? 'Already Added' : 'Add to Config'
+    addBtn.style.marginLeft = '8px'
+    addBtn.style.padding = '6px 14px'
+    addBtn.style.fontSize = '12px'
+    addBtn.style.whiteSpace = 'nowrap'
+    addBtn.style.flexShrink = '0'
+    addBtn.disabled = alreadyAdded
+    if (alreadyAdded) {
+      addBtn.style.opacity = '0.65'
+      addBtn.style.cursor = 'not-allowed'
+      addBtn.style.background = '#6b7280'
+    }
+    addBtn.onclick = async () => {
+      if (alreadyAdded) {
+        return
+      }
+      await addDeviceToConfig(d)
+    }
+
+    if (alreadyAdded) {
+      const viewBtn = document.createElement('button')
+      viewBtn.textContent = 'View in Config'
+      viewBtn.className = 'secondary'
+      viewBtn.style.marginLeft = '8px'
+      viewBtn.style.padding = '6px 12px'
+      viewBtn.style.fontSize = '12px'
+      viewBtn.onclick = async () => {
+        await loadConfiguredDevices()
+        scrollToConfiguredDevice(d.id)
+      }
+      li.appendChild(info)
+      const actions = document.createElement('div')
+      actions.style.display = 'flex'
+      actions.style.alignItems = 'center'
+      actions.appendChild(viewBtn)
+      actions.appendChild(addBtn)
+      li.appendChild(actions)
+      ul.appendChild(li)
+      continue
+    }
+
+    li.appendChild(info)
+    li.appendChild(addBtn)
+    ul.appendChild(li)
+  }
+
+  return ul
+}
+
+/**
+ * Filter devices by connection type and search query
+ * @param devices Discovered devices array
+ * @param connectionType Filter: 'all' | 'ble' | 'api' | 'both' | 'ir'
+ * @param searchQuery Search term to match against name/id/type
+ * @returns Filtered devices array
+ */
+export function filterDevices(
+  devices: any[],
+  connectionType: 'all' | 'ble' | 'api' | 'both' | 'ir' = 'all',
+  searchQuery = '',
+): any[] {
+  let filtered = [...devices]
+
+  // Filter by connection type
+  if (connectionType !== 'all') {
+    filtered = filtered.filter(d => {
+      if (connectionType === 'ir') {
+        return d.isIR === true
+      }
+      if (connectionType === 'ble') {
+        return d.connectionType === 'BLE' || d.connectionType?.includes('BLE')
+      }
+      if (connectionType === 'api') {
+        return d.connectionType === 'OpenAPI' || d.connectionType === 'API' || d.connectionType?.includes('API')
+      }
+      if (connectionType === 'both') {
+        return d.connectionType === 'Both' || d.connectionType?.includes('Both')
+      }
+      return true
+    })
+  }
+
+  // Filter by search query
+  if (searchQuery.trim()) {
+    const query = searchQuery.toLowerCase()
+    filtered = filtered.filter(d => {
+      const name = (d.name || '').toLowerCase()
+      const id = (d.id || '').toLowerCase()
+      const type = (d.type || '').toLowerCase()
+      const model = (d.model || '').toLowerCase()
+      return name.includes(query) || id.includes(query) || type.includes(query) || model.includes(query)
+    })
+  }
+
+  return filtered
+}
+
+/**
+ * Sort devices by specified criteria
+ * @param devices Devices array to sort
+ * @param sortBy Sort criterion: 'name' | 'signal' | 'type' | 'connection'
+ * @returns Sorted devices array
+ */
+export function sortDevices(
+  devices: any[],
+  sortBy: 'name' | 'signal' | 'type' | 'connection' = 'name',
+): any[] {
+  const sorted = [...devices]
+
+  switch (sortBy) {
+    case 'signal': {
+      // Sort by RSSI descending (strongest signal first)
+      sorted.sort((a, b) => {
+        const aRssi = a.rssi || 0
+        const bRssi = b.rssi || 0
+        return bRssi - aRssi // Descending order (higher is stronger)
+      })
+      break
+    }
+    case 'type': {
+      // Sort by device type alphabetically
+      sorted.sort((a, b) => {
+        const aType = (a.type || '').localeCompare(b.type || '')
+        return aType
+      })
+      break
+    }
+    case 'connection': {
+      // Sort by connection type: Both > BLE > OpenAPI > Others
+      const connectionOrder: Record<string, number> = {
+        'Both': 0,
+        'BLE': 1,
+        'OpenAPI': 2,
+        'API': 2,
+        'Unknown': 3,
+      }
+      sorted.sort((a, b) => {
+        const aOrder = connectionOrder[a.connectionType || 'Unknown'] ?? 3
+        const bOrder = connectionOrder[b.connectionType || 'Unknown'] ?? 3
+        return aOrder - bOrder
+      })
+      break
+    }
+    case 'name':
+    default: {
+      // Sort by name alphabetically
+      sorted.sort((a, b) => (a.name || a.id || '').localeCompare(b.name || b.id || ''))
+      break
+    }
+  }
+
+  return sorted
+}
+
+/**
+ * Get filter/sort preferences from localStorage
+ * @returns Object with current filter and sort preferences
+ */
+export function getDiscoveryPreferences(): {
+  connectionType: 'all' | 'ble' | 'api' | 'both' | 'ir'
+  sortBy: 'name' | 'signal' | 'type' | 'connection'
+  searchQuery: string
+} {
+  try {
+    const stored = localStorage.getItem('discoveryPreferences')
+    if (stored) {
+      return JSON.parse(stored)
+    }
+  } catch (_e) {
+    // Ignore parse errors
+  }
+
+  return {
+    connectionType: 'all',
+    sortBy: 'name',
+    searchQuery: '',
+  }
+}
+
+/**
+ * Save filter/sort preferences to localStorage
+ * @param preferences Preferences object to save
+ */
+export function setDiscoveryPreferences(preferences: {
+  connectionType: 'all' | 'ble' | 'api' | 'both' | 'ir'
+  sortBy: 'name' | 'signal' | 'type' | 'connection'
+  searchQuery: string
+}): void {
+  try {
+    localStorage.setItem('discoveryPreferences', JSON.stringify(preferences))
+  } catch (_e) {
+    // Ignore storage errors
+  }
+}
+
+export function renderDeviceList(list: any[]): void {
+  const ul = document.getElementById('devices')
+  const status = document.getElementById('status')
+  const removeAllContainer = document.getElementById('removeAllContainer')
+
+  if (!ul || !status) { return }
+
+  if (!list.length) {
+    status.textContent = 'No devices found in config.'
+    ul.innerHTML = ''
+    // Hide remove all button when no devices
+    if (removeAllContainer) {
+      removeAllContainer.style.display = 'none'
+    }
+    return
+  }
+
+  status.textContent = `Found ${list.length} device(s)`
+  ul.innerHTML = ''
+
+  // Show remove all button when devices exist
+  if (removeAllContainer) {
+    removeAllContainer.style.display = 'block'
+  }
+
+  for (const d of list) {
+    const li = document.createElement('li')
+    li.className = 'device-item'
+    li.setAttribute('data-device-id', normalizeId(d.id))
+
+    const info = document.createElement('div')
+    info.style.flex = '1'
+
+    const nameContainer = document.createElement('div')
+    nameContainer.style.display = 'flex'
+    nameContainer.style.alignItems = 'center'
+    nameContainer.style.flexWrap = 'wrap'
+    nameContainer.style.gap = '6px'
+
+    const name = document.createElement('div')
+    name.style.fontWeight = '500'
+    name.textContent = d.name || d.id
+
+    const code = document.createElement('code')
+    code.textContent = d.id
+    code.style.fontSize = '12px'
+    code.style.opacity = '0.75'
+    code.style.marginLeft = '8px'
+
+    nameContainer.appendChild(name)
+    nameContainer.appendChild(code)
+
+    // Add signal strength visualization if RSSI is available
+    if (d.rssi !== undefined && d.rssi !== null && d.rssi !== 0) {
+      nameContainer.appendChild(renderSignalBars(d.rssi))
+      nameContainer.appendChild(renderSignalQualityBadge(d.rssi))
+    }
+
+    const meta = document.createElement('div')
+    meta.style.opacity = '0.75'
+    meta.style.marginTop = '4px'
+    meta.style.fontSize = '12px'
+
+    const typeText = d.type ? `type: ${d.type}` : ''
+    const connText = d.connectionPreference ? `conn: ${d.connectionPreference}` : ''
+    const roomText = d.room ? `room: ${d.room}` : ''
+    meta.textContent = [typeText, connText, roomText].filter(Boolean).join(' | ')
+
+    info.appendChild(nameContainer)
+    info.appendChild(meta)
+
+    const buttons = document.createElement('div')
+    buttons.style.display = 'flex'
+    buttons.style.gap = '8px'
+
+    const editBtn = document.createElement('button')
+    editBtn.textContent = '✏️ Edit'
+    editBtn.style.padding = '6px 12px'
+    editBtn.style.fontSize = '12px'
+    editBtn.onclick = async () => {
+      const { editDevice } = await import('./modals.js')
+      await editDevice(d)
+    }
+
+    const copyBtn = document.createElement('button')
+    copyBtn.textContent = 'Copy ID'
+    copyBtn.style.padding = '6px 12px'
+    copyBtn.style.fontSize = '12px'
+    copyBtn.addEventListener('click', async () => {
+      try {
+        await navigator.clipboard.writeText(d.id)
+        copyBtn.textContent = 'Copied'
+        copyBtn.classList.add('success')
+        setTimeout(() => {
+          copyBtn.textContent = 'Copy ID'
+          copyBtn.classList.remove('success')
+        }, 1200)
+      } catch (e) {
+        alert('Failed to copy')
+      }
+    })
+
+    const deleteBtn = document.createElement('button')
+    deleteBtn.textContent = '🗑️ Delete'
+    deleteBtn.style.padding = '6px 12px'
+    deleteBtn.style.fontSize = '12px'
+    deleteBtn.style.background = '#ef4444'
+    deleteBtn.onclick = async () => {
+      const { deleteDeviceFromConfig } = await import('./devices-delete.js')
+      await deleteDeviceFromConfig(d.id, d.name || d.id)
+    }
+
+    buttons.appendChild(editBtn)
+    buttons.appendChild(copyBtn)
+    buttons.appendChild(deleteBtn)
+
+    li.appendChild(info)
+    li.appendChild(buttons)
+    ul.appendChild(li)
+  }
+}

package/dist/homebridge-ui/public/js/toast.d.ts

@@ -0,0 +1,6 @@
+import './types.js';
+export declare function toastSuccess(message: string, title?: string): void;
+export declare function toastError(message: string, title?: string): void;
+export declare function toastWarning(message: string, title?: string): void;
+export declare function toastInfo(message: string, title?: string): void;
+//# sourceMappingURL=toast.d.ts.map

package/dist/homebridge-ui/public/js/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../src/homebridge-ui/public/js/toast.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAA;AAsBnB,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAElE;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAEhE;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAElE;AAED,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAE/D"}

package/dist/homebridge-ui/public/js/toast.js

@@ -0,0 +1,29 @@
+import './types.js';
+import { uiLog } from './logger.js';
+function showToast(method, message, title = 'SwitchBot') {
+    try {
+        const toast = homebridge?.toast;
+        const fn = toast?.[method];
+        if (typeof fn === 'function') {
+            fn(message, title);
+            return;
+        }
+        uiLog.info(`[Toast:${method}] ${title} - ${message}`);
+    }
+    catch (e) {
+        uiLog.warn(`Toast ${method} failed:`, e);
+    }
+}
+export function toastSuccess(message, title) {
+    showToast('success', message, title);
+}
+export function toastError(message, title) {
+    showToast('error', message, title);
+}
+export function toastWarning(message, title) {
+    showToast('warning', message, title);
+}
+export function toastInfo(message, title) {
+    showToast('info', message, title);
+}
+//# sourceMappingURL=toast.js.map

package/dist/homebridge-ui/public/js/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../../src/homebridge-ui/public/js/toast.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAA;AACnB,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,SAAS,SAAS,CAChB,MAAgD,EAChD,OAAe,EACf,KAAK,GAAG,WAAW;IAEnB,IAAI,CAAC;QACH,MAAM,KAAK,GAAG,UAAU,EAAE,KAAK,CAAA;QAC/B,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,CAAA;QAC1B,IAAI,OAAO,EAAE,KAAK,UAAU,EAAE,CAAC;YAC7B,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;YAClB,OAAM;QACR,CAAC;QAED,KAAK,CAAC,IAAI,CAAC,UAAU,MAAM,KAAK,KAAK,MAAM,OAAO,EAAE,CAAC,CAAA;IACvD,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,KAAK,CAAC,IAAI,CAAC,SAAS,MAAM,UAAU,EAAE,CAAC,CAAC,CAAA;IAC1C,CAAC;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,KAAc;IAC1D,SAAS,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,CAAA;AACtC,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,OAAe,EAAE,KAAc;IACxD,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,CAAA;AACpC,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,KAAc;IAC1D,SAAS,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,CAAA;AACtC,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,OAAe,EAAE,KAAc;IACvD,SAAS,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,CAAA;AACnC,CAAC"}

package/dist/homebridge-ui/public/js/toast.ts

@@ -0,0 +1,37 @@
+import './types.js'
+import { uiLog } from './logger.js'
+
+function showToast(
+  method: 'success' | 'error' | 'warning' | 'info',
+  message: string,
+  title = 'SwitchBot',
+): void {
+  try {
+    const toast = homebridge?.toast
+    const fn = toast?.[method]
+    if (typeof fn === 'function') {
+      fn(message, title)
+      return
+    }
+
+    uiLog.info(`[Toast:${method}] ${title} - ${message}`)
+  } catch (e) {
+    uiLog.warn(`Toast ${method} failed:`, e)
+  }
+}
+
+export function toastSuccess(message: string, title?: string): void {
+  showToast('success', message, title)
+}
+
+export function toastError(message: string, title?: string): void {
+  showToast('error', message, title)
+}
+
+export function toastWarning(message: string, title?: string): void {
+  showToast('warning', message, title)
+}
+
+export function toastInfo(message: string, title?: string): void {
+  showToast('info', message, title)
+}

package/dist/homebridge-ui/public/js/types.d.ts

@@ -0,0 +1,23 @@
+declare global {
+    interface HomebridgeToastApi {
+        success?: (message: string, title?: string) => void;
+        error?: (message: string, title?: string) => void;
+        warning?: (message: string, title?: string) => void;
+        info?: (message: string, title?: string) => void;
+    }
+    interface HomebridgePluginUiAPI {
+        request: (endpoint: string, params?: any) => Promise<any>;
+        getPluginConfig?: () => Promise<any[]>;
+        updatePluginConfig?: (config: any[]) => Promise<void>;
+        savePluginConfig?: () => Promise<void>;
+        closeSettings?: () => void;
+        showSpinner?: () => void;
+        hideSpinner?: () => void;
+        disableSaveButton?: () => void;
+        enableSaveButton?: () => void;
+        toast?: HomebridgeToastApi;
+    }
+    let homebridge: HomebridgePluginUiAPI;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/homebridge-ui/public/js/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/homebridge-ui/public/js/types.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,kBAAkB;QAC1B,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;QACnD,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;QACjD,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;QACnD,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;KACjD;IAED,UAAU,qBAAqB;QAC7B,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;QACzD,eAAe,CAAC,EAAE,MAAM,OAAO,CAAC,GAAG,EAAE,CAAC,CAAA;QACtC,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;QACrD,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;QACtC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;QAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;QACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;QACxB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;QAC9B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;QAC7B,KAAK,CAAC,EAAE,kBAAkB,CAAA;KAC3B;IAED,IAAI,UAAU,EAAE,qBAAqB,CAAA;CACtC;AAED,OAAO,EAAE,CAAA"}

package/dist/homebridge-ui/public/js/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/homebridge-ui/public/js/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/homebridge-ui/public/js/types.ts"],"names":[],"mappings":""}