homebridge-config-ui-x 5.3.1-beta.3 → 5.3.1-beta.30

package/public/assets/accessory-icons/air-quality-sensor.svg

@@ -0,0 +1,30 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- outer casing -->
+  <rect x="3" y="1" width="25" height="30" rx="3" stroke="#7f7f7f" fill="none" stroke-width="1.2" />
+
+  <!-- leaves -->
+  <g transform="translate(4.6, 3) scale(0.68)">
+    <path
+      fill="#7f7f7f"
+      class="leaves"
+      d="M10.1435881,25.4905179 C10.286009,26.7050605 10.531254,27.9706077 10.8919121,29.2887103 C6.25942062,27.4175104 3.57173247,24.180341 2.39781526,19.889403 C1.54190101,16.760839 1.56931096,13.3702525 2.13724518,10.1783222 C2.1501971,10.1055292 2.17646546,9.96330988 2.17646546,9.96330988 C2.17646546,9.96330988 2.33770347,10.0208429 2.92620872,10.2769757 C4.60998953,11.0098007 6.29364519,11.9318703 7.85704035,13.0517448 C9.19214306,14.0080913 10.3087445,15.0188915 11.223018,16.0899229 L11.223018,16.0899229 C10.426841,18.1910249 9.96797687,20.5297906 9.99206994,23.1241613 L5.43414987,14.7605739 C5.30203551,14.5181498 4.99858593,14.4288208 4.75637627,14.5610522 C4.51416661,14.6932836 4.42491674,14.9970019 4.5570311,15.2394261 L10.1435881,25.4905179 Z M13.0333542,29.4136738 C10.9912074,19.9059085 11.088992,14.922477 21.5133004,6.73565972 C23.6127007,5.0868782 25.9746706,4.01306759 28.2881453,3.03596757 C29.0967374,2.69445726 29.3182746,2.61774651 29.3182746,2.61774651 C29.3182746,2.61774651 29.3543667,2.80737221 29.3721623,2.90442957 C30.1524904,7.1603367 30.190151,11.6811187 29.0141452,15.8525373 C27.1508473,22.4618551 22.5118613,27.1961122 14.1841552,29.413553 L25.4116309,9.74806947 C25.5485147,9.50831075 25.46529,9.20288341 25.2257434,9.06587843 C24.9861969,8.92887344 24.6810398,9.01217181 24.544156,9.25193053 L13.0333542,29.4136738 Z M13.4880693,32 C38.9655056,25.5 30.755735,0 30.755735,0 C30.755735,0 17.0308715,3.72274828 11.9893965,14.5 C7.99293593,9 0.873098889,8 0.873098889,8 C-3.99644586,30.5 13.4880693,32 13.4880693,32 Z"
+    />
+  </g>
+
+  <!-- grille horizontal lines -->
+  <line stroke-linecap="round" x1="6.5" y1="26" x2="24.5" y2="26" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="6.5" y1="27.5" x2="24.5" y2="27.5" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="6.5" y1="29" x2="24.5" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+
+  <!-- grille vertical lines -->
+  <line stroke-linecap="round" x1="6.5" y1="26" x2="6.5" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="8.5" y1="26" x2="8.5" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="10.5" y1="26" x2="10.5" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="12.5" y1="26" x2="12.5" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="14.5" y1="26" x2="14.5" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="16.5" y1="26" x2="16.5" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="18.5" y1="26" x2="18.5" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="20.5" y1="26" x2="20.5" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="22.5" y1="26" x2="22.5" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="24.5" y1="26" x2="24.5" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+</svg>

package/public/assets/accessory-icons/carbon-dioxide-sensor.svg

@@ -0,0 +1,53 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- outer casing -->
+  <rect x="1" y="1" width="30" height="12" rx="1" stroke="#7f7f7f" fill="none" stroke-width="1.25" />
+
+  <!-- alarm type -->
+  <text
+    class="type"
+    text-anchor="middle"
+    dominant-baseline="middle"
+    font-family="Arial"
+    font-size="7.5"
+    x="16"
+    y="7.7"
+    fill="#7f7f7f"
+    stroke-width="0.6"
+    font-weight="900"
+  >
+    CO2
+  </text>
+
+  <!-- grille blue background -->
+  <line x1="6" y1="14.5" x2="25.5" y2="14.5" stroke="#1976d2" stroke-opacity="0.5" stroke-width="2" />
+
+  <!-- grille vertical lines -->
+  <line stroke-linecap="round" x1="5" y1="13" x2="6.5" y2="16" stroke="#7f7f7f" stroke-width="1.25" />
+  <line stroke-linecap="round" x1="11" y1="13" x2="11" y2="16" stroke="#7f7f7f" stroke-width="1" />
+  <line stroke-linecap="round" x1="15.5" y1="13" x2="15.5" y2="16" stroke="#7f7f7f" stroke-width="1" />
+  <line stroke-linecap="round" x1="20" y1="13" x2="20" y2="16" stroke="#7f7f7f" stroke-width="1" />
+  <line stroke-linecap="round" x1="26" y1="13" x2="24.5" y2="16" stroke="#7f7f7f" stroke-width="1.25" />
+
+  <!-- grille horizontal lines -->
+  <line stroke-linecap="round" x1="6.5" y1="16" x2="24.5" y2="16" stroke="#7f7f7f" stroke-width="1.25" />
+
+  <!-- top wave -->
+  <path
+    d="M3,24.0706147 C3.28945166,24.8007217 5.978098,25.1773883 10.0660175,25.2006147 C12.5085124,25.2144929 18.5053297,22.8514837 22.4060749,22.1943647 C24.1588716,21.898084 26.5955382,22.1756219 28.716875,23.0221772"
+    class="air-line"
+    stroke="#7f7f7f"
+    fill="transparent"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+
+  <!-- bottom wave -->
+  <path
+    d="M3,30.0706147 C3.28945166,30.8007217 5.978098,31.1773883 10.0660175,31.2006147 C12.5085124,31.2144929 18.5053297,28.8514837 22.4060749,28.1943647 C24.1588716,27.898084 26.5955382,28.1756219 28.716875,29.0221772"
+    class="air-line"
+    stroke="#7f7f7f"
+    fill="transparent"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+</svg>

package/public/assets/accessory-icons/carbon-monoxide-sensor.svg

@@ -0,0 +1,53 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- outer casing -->
+  <rect x="1" y="1" width="30" height="12" rx="1" stroke="#7f7f7f" fill="none" stroke-width="1.25" />
+
+  <!-- alarm type -->
+  <text
+    class="type"
+    text-anchor="middle"
+    dominant-baseline="middle"
+    font-family="Arial"
+    font-size="7.5"
+    x="16"
+    y="7.7"
+    fill="#7f7f7f"
+    stroke-width="0.6"
+    font-weight="900"
+  >
+    CO
+  </text>
+
+  <!-- grille blue background -->
+  <line x1="6" y1="14.5" x2="25.5" y2="14.5" stroke="#1976d2" stroke-opacity="0.5" stroke-width="2" />
+
+  <!-- grille vertical lines -->
+  <line stroke-linecap="round" x1="5" y1="13" x2="6.5" y2="16" stroke="#7f7f7f" stroke-width="1.25" />
+  <line stroke-linecap="round" x1="11" y1="13" x2="11" y2="16" stroke="#7f7f7f" stroke-width="1" />
+  <line stroke-linecap="round" x1="15.5" y1="13" x2="15.5" y2="16" stroke="#7f7f7f" stroke-width="1" />
+  <line stroke-linecap="round" x1="20" y1="13" x2="20" y2="16" stroke="#7f7f7f" stroke-width="1" />
+  <line stroke-linecap="round" x1="26" y1="13" x2="24.5" y2="16" stroke="#7f7f7f" stroke-width="1.25" />
+
+  <!-- grille horizontal lines -->
+  <line stroke-linecap="round" x1="6.5" y1="16" x2="24.5" y2="16" stroke="#7f7f7f" stroke-width="1.25" />
+
+  <!-- top wave -->
+  <path
+    d="M3,23 C6,25 9,21 12,23 C15,25 18,21 21,23 C24,25 27,21 30,23"
+    class="air-line"
+    stroke="#7f7f7f"
+    fill="transparent"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+
+  <!-- bottom wave -->
+  <path
+    d="M3,30 C6,32 9,28 12,30 C15,32 18,28 21,30 C24,32 27,28 30,30"
+    class="air-line"
+    stroke="#7f7f7f"
+    fill="transparent"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+</svg>

package/public/assets/accessory-icons/contact-sensor.svg

@@ -0,0 +1,45 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- left object -->
+  <rect class="left-object" x="1" y="1" width="15" height="30" rx="2" stroke="#7f7f7f" fill="none" stroke-width="1.5" />
+
+  <!-- right object -->
+  <rect
+    class="right-object"
+    x="16"
+    y="1"
+    width="15"
+    height="30"
+    rx="2"
+    stroke="#7f7f7f"
+    fill="none"
+    stroke-width="1.5"
+  />
+
+  <!-- left sensor -->
+  <rect
+    class="left-sensor"
+    x="10"
+    y="11"
+    width="6"
+    height="10"
+    rx="1"
+    stroke="#7f7f7f"
+    fill="#4caf50"
+    fill-opacity="0.5"
+    stroke-width="0.5"
+  />
+
+  <!-- right sensor -->
+  <rect
+    class="right-sensor"
+    x="16"
+    y="11"
+    width="6"
+    height="10"
+    rx="1"
+    stroke="#7f7f7f"
+    fill="#4caf50"
+    fill-opacity="0.5"
+    stroke-width="0.5"
+  />
+</svg>

package/public/assets/accessory-icons/door.svg

@@ -0,0 +1,28 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- outer frame -->
+  <rect x="7.8" y="0.8" width="16.4" height="30.2" rx="0.5" stroke="#7f7f7f" fill="none" stroke-width="1.5" />
+
+  <!-- door outline -->
+  <rect class="outline" x="9.6" y="2.6" width="12.8" height="26.6" stroke="#7f7f7f" fill="none" stroke-width="1" />
+
+  <!-- top panel -->
+  <rect class="panel" x="11.2" y="4.2" width="9.6" height="10.8" stroke="#7f7f7f" fill-opacity="0" stroke-width="0.5" />
+
+  <!-- bottom panel -->
+  <rect
+    class="panel"
+    x="11.2"
+    y="16.8"
+    width="9.6"
+    height="10.8"
+    stroke="#7f7f7f"
+    fill-opacity="0"
+    stroke-width="0.5"
+  />
+
+  <!-- wider floor -->
+  <line x1="0" y1="31" x2="32" y2="31" stroke="#7f7f7f" stroke-width="1.5" />
+
+  <!-- door handle -->
+  <rect class="handle" x="19.25" y="15.87" width="1.55" height="0.05" stroke="#1976d2" fill="none" stroke-width="0.5" />
+</svg>

package/public/assets/accessory-icons/doorbell.svg

@@ -0,0 +1,7 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- outer casing -->
+  <rect x="6" y="1" width="18" height="30" rx="3" stroke="#7f7f7f" fill="none" stroke-width="2" />
+
+  <!-- power button -->
+  <circle cx="15" cy="16" r="5" stroke="#7f7f7f" stroke-width="2" fill="#1976d2" fill-opacity="0.5" />
+</svg>

package/public/assets/accessory-icons/fan.svg

@@ -0,0 +1,15 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- fan icon -->
+  <g transform="translate(1.28, 1.28) scale(0.92)">
+    <path
+      class="fan-blades"
+      fill="#7f7f7f"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M20.988 10.265c.382-.596.951-1.424 1.844-2.71C25.462 3.61 23.456 0 18 0c-6.263 0-10.09 5.649-6.835 11.923-.594-.382-1.416-.948-2.682-1.826-3.945-2.63-7.555-.625-7.555 4.832 0 6.308 5.73 10.145 12.057 6.763-.383.599-.958 1.436-1.872 2.753C8.485 28.39 10.49 32 15.947 32c6.267 0 10.095-5.655 6.83-11.932.593.382 1.412.946 2.668 1.818 3.945 2.63 7.555.625 7.555-4.832 0-6.293-5.703-10.127-12.012-6.788Zm-.407 2.602C26.101 8.924 31 11.805 31 17.053c0 3.877-1.845 4.902-4.445 3.169-2.525-1.761-3.46-2.385-4.406-2.763a7.87 7.87 0 0 0-1.01-.317c.105-.382.161-.785.161-1.2 0-1.327-.919-3.134-.919-3.134ZM18.405 10.85c.378-.946 1.001-1.88 2.763-4.405C22.902 3.845 21.877 2 18 2c-5.247 0-8.129 4.899-4.186 10.419 0 0 1.89-.919 3.186-.919.398 0 .783.052 1.15.149.064-.269.149-.533.255-.798ZM11.78 14.524c-.946-.378-1.88-1.001-4.405-2.763-2.6-1.734-4.445-.709-4.445 3.168 0 5.247 4.899 8.129 10.419 4.186 0 0-.848-1.812-.848-3.115 0-.416.057-.819.163-1.201a7.81 7.81 0 0 0-1.183-.275Zm3.763 6.625c-.378.946-1.001 1.88-2.763 4.405-1.734 2.6-.709 4.445 3.168 4.445 5.248 0 8.13-4.899 4.187-10.419 0 0-1.831.919-3.133.919-.416 0-.819-.057-1.201-.162a7.802 7.802 0 0 0-.258.812ZM17 19.5c-1.933 0-3.5-1.567-3.5-3.5s1.567-3.5 3.5-3.5 3.5 1.567 3.5 3.5-1.567 3.5-3.5 3.5Z"
+    />
+  </g>
+
+  <!-- middle circle -->
+  <circle cx="17" cy="16" r="3.5" stroke="#7f7f7f" stroke-width="0.6" fill="#1976d2" fill-opacity="0.5" />
+</svg>

package/public/assets/accessory-icons/garage-door.svg

@@ -0,0 +1,120 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- circle in roof -->
+  <circle
+    class="window"
+    cx="15.5"
+    cy="10.25"
+    r="3"
+    stroke="#7f7f7f"
+    stroke-width="0.5"
+    fill="#1976d2"
+    fill-opacity="0.5"
+  />
+
+  <!-- left roof line -->
+  <line x1="1" y1="12" x2="15" y2="1" stroke="#7f7f7f" stroke-width="1.5" stroke-linecap="round" />
+
+  <!-- right roof line -->
+  <line x1="31" y1="12" x2="16" y2="1" stroke="#7f7f7f" stroke-width="1.5" stroke-linecap="round" />
+
+  <!-- roof summit -->
+  <circle cx="15.5" cy="1.3" r="0.5" stroke="#7f7f7f" stroke-width="1.5" />
+
+  <!-- side left line -->
+  <line x1="3" y1="11" x2="3" y2="31" stroke="#7f7f7f" stroke-width="1.5" stroke-linecap="round" />
+
+  <!-- right side line -->
+  <line x1="29" y1="11" x2="29" y2="31" stroke="#7f7f7f" stroke-width="1.5" stroke-linecap="round" />
+
+  <!-- bottom left horizontal line -->
+  <line x1="3" y1="31" x2="6" y2="31" stroke="#7f7f7f" stroke-width="1.5" stroke-linecap="round" />
+
+  <!-- bottom right horizontal line -->
+  <line x1="26" y1="31" x2="29" y2="31" stroke="#7f7f7f" stroke-width="1.5" stroke-linecap="round" />
+
+  <!-- left garage line -->
+  <line x1="6" y1="17" x2="6" y2="31" stroke="#7f7f7f" stroke-width="1.5" />
+
+  <!-- right garage line -->
+  <line x1="26" y1="17" x2="26" y2="31" stroke="#7f7f7f" stroke-width="1.5" />
+
+  <!-- garage door lines -->
+  <line x1="5.25" y1="17" x2="26.75" y2="17" stroke="#7f7f7f" stroke-width="1" />
+  <line
+    class="line line1"
+    x1="6.75"
+    y1="18"
+    x2="25.25"
+    y2="18"
+    stroke="#1976d2"
+    stroke-width="1"
+    stroke-opacity="0.5"
+  />
+  <line class="line line2" x1="5.25" y1="19" x2="26.75" y2="19" stroke="#7f7f7f" stroke-width="1" />
+  <line
+    class="line line3"
+    x1="6.75"
+    y1="20"
+    x2="25.25"
+    y2="20"
+    stroke="#1976d2"
+    stroke-width="1"
+    stroke-opacity="0.5"
+  />
+  <line class="line line4" x1="5.25" y1="21" x2="26.75" y2="21" stroke="#7f7f7f" stroke-width="1" />
+  <line
+    class="line line5"
+    x1="6.75"
+    y1="22"
+    x2="25.25"
+    y2="22"
+    stroke="#1976d2"
+    stroke-width="1"
+    stroke-opacity="0.5"
+  />
+  <line class="line line6" x1="5.25" y1="23" x2="26.75" y2="23" stroke="#7f7f7f" stroke-width="1" />
+  <line
+    class="line line7"
+    x1="6.75"
+    y1="24"
+    x2="25.25"
+    y2="24"
+    stroke="#1976d2"
+    stroke-width="1"
+    stroke-opacity="0.5"
+  />
+  <line class="line line8" x1="5.25" y1="25" x2="26.75" y2="25" stroke="#7f7f7f" stroke-width="1" />
+  <line
+    class="line line9"
+    x1="6.75"
+    y1="26"
+    x2="25.25"
+    y2="26"
+    stroke="#1976d2"
+    stroke-width="1"
+    stroke-opacity="0.5"
+  />
+  <line class="line line10" x1="5.25" y1="27" x2="26.75" y2="27" stroke="#7f7f7f" stroke-width="1" />
+  <line
+    class="line line11"
+    x1="6.75"
+    y1="28"
+    x2="25.25"
+    y2="28"
+    stroke="#1976d2"
+    stroke-width="1"
+    stroke-opacity="0.5"
+  />
+  <line class="line line12" x1="5.25" y1="29" x2="26.75" y2="29" stroke="#7f7f7f" stroke-width="1" />
+  <line
+    class="line line13"
+    x1="6.75"
+    y1="30"
+    x2="25.25"
+    y2="30"
+    stroke="#1976d2"
+    stroke-width="1"
+    stroke-opacity="0.5"
+  />
+  <line class="line line14" x1="5.25" y1="31" x2="26.75" y2="31" stroke="#7f7f7f" stroke-width="1" />
+</svg>

package/public/assets/accessory-icons/microphone.svg

@@ -0,0 +1,12 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- outer casing -->
+  <rect x="6" y="1" width="18" height="30" rx="3" stroke="#7f7f7f" fill="none" stroke-width="2" />
+
+  <!-- grille lines -->
+  <line stroke-linecap="round" x1="10" y1="6" x2="20" y2="6" stroke="#7f7f7f" stroke-width="2" />
+  <line stroke-linecap="round" x1="10" y1="10" x2="20" y2="10" stroke="#7f7f7f" stroke-width="2" />
+  <line stroke-linecap="round" x1="10" y1="14" x2="20" y2="14" stroke="#7f7f7f" stroke-width="2" />
+
+  <!-- power button -->
+  <circle cx="15" cy="23" r="3" stroke="#7f7f7f" stroke-width="2" fill="#1976d2" fill-opacity="0.5" />
+</svg>

package/public/assets/{hap-icons/vacuum-on.svg → accessory-icons/robot-vacuum.svg}

@@ -1,34 +1,37 @@
-<svg
-  width="32px"
-  height="32px"
-  viewBox="0 0 32 32"
-  version="1.1"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
->
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <!-- Clip lines to the top part, above robot back (approx y=5) -->
+    <!-- clip lines to above the machine -->
     <clipPath id="motionClip">
       <rect x="0" y="-0.5" width="32" height="8" />
     </clipPath>
   </defs>
 
   <g transform="translate(0, 5)">
-    <!-- Robot shape -->
-    <ellipse cx="16" cy="10" rx="14" ry="8.4" stroke="#7F7F7F" stroke-width="1.75" fill="none" />
-    <line x1="2" y1="10" x2="2" y2="16" stroke="#7F7F7F" stroke-width="1.75" />
-    <line x1="30" y1="10" x2="30" y2="16" stroke="#7F7F7F" stroke-width="1.75" />
-    <path d="M2,16 A14,6.9 0 0,0 30,16" stroke="#7F7F7F" stroke-width="1.75" fill="none" />
-    <ellipse cx="16" cy="10" rx="4.2" ry="2.5" stroke="#7F7F7F" stroke-width="1" fill="#1976d2" fill-opacity="0.3" />
-    <circle cx="16" cy="15" r="0.9" fill="#7F7F7F" />
-    <line x1="2" y1="16" x2="0.5" y2="18.5" stroke="#7F7F7F" stroke-width="1" />
-    <line x1="2" y1="16" x2="0.5" y2="14" stroke="#7F7F7F" stroke-width="1" />
-    <line x1="30" y1="16" x2="31.5" y2="18.5" stroke="#7F7F7F" stroke-width="1" />
-    <line x1="30" y1="16" x2="31.5" y2="14" stroke="#7F7F7F" stroke-width="1" />
+    <!-- main ellipse -->
+    <ellipse cx="16" cy="10" rx="14" ry="8.4" stroke="#7f7f7f" stroke-width="1.75" fill="none" />
+
+    <!-- side walls -->
+    <line x1="2" y1="10" x2="2" y2="16" stroke="#7f7f7f" stroke-width="1.75" />
+    <line x1="30" y1="10" x2="30" y2="16" stroke="#7f7f7f" stroke-width="1.75" />
+
+    <!-- base arc -->
+    <path d="M2,16 A14,6.9 0 0,0 30,16" stroke="#7f7f7f" stroke-width="1.75" fill="none" />
+
+    <!-- blue ring -->
+    <ellipse cx="16" cy="10" rx="4.2" ry="2.5" stroke="#7f7f7f" stroke-width="1" fill="#1976d2" fill-opacity="0.5" />
+
+    <!-- power button -->
+    <circle cx="16" cy="15" r="0.9" fill="#7f7f7f" />
+
+    <!-- whisker brushes -->
+    <line x1="2" y1="16" x2="0.5" y2="18.5" stroke="#7f7f7f" stroke-width="1" />
+    <line x1="2" y1="16" x2="0.5" y2="14" stroke="#7f7f7f" stroke-width="1" />
+    <line x1="30" y1="16" x2="31.5" y2="18.5" stroke="#7f7f7f" stroke-width="1" />
+    <line x1="30" y1="16" x2="31.5" y2="14" stroke="#7f7f7f" stroke-width="1" />
   </g>
 
-  <g clip-path="url(#motionClip)" stroke="#7F7F7F" stroke-linecap="round">
-    <!-- Left middle line -->
+  <g class="motion-lines" style="display: none;" clip-path="url(#motionClip)" stroke="#7f7f7f" stroke-linecap="round">
+    <!-- left line -->
     <line x1="12" y1="8" x2="12" y2="14" stroke-width="2.1" opacity="0">
       <animate attributeName="y1" values="8;0" dur="3s" begin="0.3s" repeatCount="indefinite" />
       <animate attributeName="y2" values="14;6" dur="3s" begin="0.3s" repeatCount="indefinite" />
@@ -42,7 +45,7 @@
       />
     </line>
 
-    <!-- Middle line -->
+    <!-- middle line -->
     <line x1="16" y1="8" x2="16" y2="14" stroke-width="2.5" opacity="0">
       <animate attributeName="y1" values="8;0" dur="3s" begin="0.6s" repeatCount="indefinite" />
       <animate attributeName="y2" values="14;6" dur="3s" begin="0.6s" repeatCount="indefinite" />
@@ -56,7 +59,7 @@
       />
     </line>
 
-    <!-- Right middle line -->
+    <!-- right line -->
     <line x1="20" y1="8" x2="20" y2="14" stroke-width="2.1" opacity="0">
       <animate attributeName="y1" values="8;0" dur="3s" begin="0.9s" repeatCount="indefinite" />
       <animate attributeName="y2" values="14;6" dur="3s" begin="0.9s" repeatCount="indefinite" />

package/public/assets/accessory-icons/smoke-sensor.svg

@@ -0,0 +1,38 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- outer casing -->
+  <rect x="1" y="1" width="30" height="12" rx="1" stroke="#7f7f7f" fill="none" stroke-width="1.25" />
+
+  <!-- alarm type -->
+  <text
+    class="type"
+    text-anchor="middle"
+    dominant-baseline="middle"
+    font-family="Arial"
+    font-size="7.5"
+    x="16"
+    y="7.7"
+    fill="#7f7f7f"
+    stroke-width="0.6"
+    font-weight="900"
+  >
+    SMOKE
+  </text>
+
+  <!-- grille blue background -->
+  <line x1="6" y1="14.5" x2="25.5" y2="14.5" stroke="#1976d2" stroke-opacity="0.5" stroke-width="2" />
+
+  <!-- grille vertical lines -->
+  <line stroke-linecap="round" x1="5" y1="13" x2="6.5" y2="16" stroke="#7f7f7f" stroke-width="1.25" />
+  <line stroke-linecap="round" x1="11" y1="13" x2="11" y2="16" stroke="#7f7f7f" stroke-width="1" />
+  <line stroke-linecap="round" x1="15.5" y1="13" x2="15.5" y2="16" stroke="#7f7f7f" stroke-width="1" />
+  <line stroke-linecap="round" x1="20" y1="13" x2="20" y2="16" stroke="#7f7f7f" stroke-width="1" />
+  <line stroke-linecap="round" x1="26" y1="13" x2="24.5" y2="16" stroke="#7f7f7f" stroke-width="1.25" />
+
+  <!-- grille horizontal lines -->
+  <line stroke-linecap="round" x1="6.5" y1="16" x2="24.5" y2="16" stroke="#7f7f7f" stroke-width="1.25" />
+
+  <!-- left to right air lines -->
+  <line stroke-linecap="round" x1="11" y1="21" x2="6" y2="27" stroke="#7f7f7f" stroke-width="1.25" class="air-line" />
+  <line stroke-linecap="round" x1="16" y1="21" x2="16" y2="31" stroke="#7f7f7f" stroke-width="1.25" class="air-line" />
+  <line stroke-linecap="round" x1="21" y1="21" x2="26" y2="27" stroke="#7f7f7f" stroke-width="1.25" class="air-line" />
+</svg>

package/public/assets/accessory-icons/television.svg

@@ -0,0 +1,17 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- stand -->
+  <line
+    class="stand"
+    x1="10"
+    y1="27.25"
+    x2="22"
+    y2="27.25"
+    stroke="#d32f2f"
+    stroke-width="4"
+    stroke-linecap="round"
+    stroke-opacity="0.75"
+  />
+
+  <!-- frame -->
+  <rect class="screen" x="1" y="6" width="30" height="20" rx="2" stroke="#7f7f7f" fill="#808080" stroke-width="1.5" />
+</svg>

package/public/assets/accessory-icons/washing-machine.svg

@@ -0,0 +1,34 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- outer casing -->
+  <rect x="3" y="1" width="25" height="30" rx="2" stroke="#7f7f7f" fill="none" stroke-width="1.2" />
+
+  <!-- top drawer -->
+  <rect x="6" y="4" width="5" rx="0.5" height="4" stroke="#7f7f7f" fill="none" stroke-width="0.5" />
+  <rect x="7" y="6" width="3" rx="0.25" height="1" stroke="#7f7f7f" fill="none" stroke-width="0.25" />
+
+  <!-- control panel + buttons -->
+  <rect x="14" y="4" width="11" height="4" rx="0.5" fill="none" stroke="#7f7f7f" stroke-width="0.5" />
+  <rect
+    x="19"
+    y="5"
+    width="5"
+    height="2"
+    rx="0.25"
+    fill="#1976d2"
+    fill-opacity="0.5"
+    stroke="#7f7f7f"
+    stroke-width="0.25"
+  />
+  <rect x="15" y="5" width="1" height="1" rx="0.25" fill="none" stroke="#7f7f7f" stroke-width="0.25" />
+  <rect x="16" y="5" width="1" height="1" rx="0.25" fill="none" stroke="#7f7f7f" stroke-width="0.25" />
+  <rect x="17" y="5" width="1" height="1" rx="0.25" fill="none" stroke="#7f7f7f" stroke-width="0.25" />
+  <rect x="15" y="6" width="1" height="1" rx="0.25" fill="none" stroke="#7f7f7f" stroke-width="0.25" />
+  <rect x="16" y="6" width="1" height="1" rx="0.25" fill="none" stroke="#7f7f7f" stroke-width="0.25" />
+  <rect x="17" y="6" width="1" height="1" rx="0.25" fill="none" stroke="#7f7f7f" stroke-width="0.25" />
+
+  <!-- drum handle -->
+  <rect class="handle" x="19" y="15.5" rx="1" width="3" height="3" fill="#7f7f7f" />
+
+  <!-- drum -->
+  <circle cx="15.5" cy="17" r="6.5" stroke="#7f7f7f" fill="none" stroke-width="1.2" />
+</svg>

package/public/assets/accessory-icons/window-covering.svg

@@ -0,0 +1,44 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- outer frame -->
+  <rect x="1" y="0.8" width="30" height="30.2" rx="0.5" stroke="#7f7f7f" fill="none" stroke-width="1.5" />
+
+  <!-- left window frame -->
+  <rect x="2.8" y="2.6" width="12.4" height="26.6" stroke="#7f7f7f" fill="none" stroke-width="1" />
+
+  <!-- left window divider -->
+  <rect x="3.66" y="15.65" width="10.68" height="0.5" stroke="#7f7f7f" fill="none" stroke-width="0.5" />
+
+  <!-- right window frame -->
+  <rect x="16.8" y="2.6" width="12.4" height="26.6" stroke="#7f7f7f" fill="none" stroke-width="1" />
+
+  <!-- right window divider -->
+  <rect x="17.66" y="15.65" width="10.68" height="0.5" stroke="#7f7f7f" fill="none" stroke-width="0.5" />
+
+  <!-- blind -->
+  <rect
+    class="c-blinds"
+    x="2.3"
+    y="2.1"
+    width="27.4"
+    height="27.6"
+    stroke="#808080"
+    fill="#808080"
+    stroke-width="0.5"
+    stroke-opacity="0.9"
+    fill-opacity="0.9"
+  />
+
+  <!-- light -->
+  <rect
+    class="c-light"
+    x="2.05"
+    y="29.9"
+    width="27.9"
+    height="0"
+    stroke="#ffffff"
+    fill="#ffffff"
+    stroke-width="0.5"
+    stroke-opacity="0"
+    fill-opacity="0.5"
+  />
+</svg>