homebridge-config-ui-x 5.4.1 → 5.4.2-beta.1

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to `homebridge-config-ui-x` will be documented in this file. This project tries to adhere to [Semantic Versioning](http://semver.org/).
 
+## v5.4.2 (Unreleased)
+
+### UI Changes
+
+- refreshed icons: security system
+- refreshed icons: lock mechanism
+- refreshed icons: irrigation system + valves
+- refreshed icons: light, leak, motion, occ. sensor
+
+### Other Changes
+
+- fix saving custom attributes for ui layouts
+- update `@homebridge/node-pty-prebuilt-multiarch` to `v0.14-beta`
+
+### Homebridge Dependencies
+
+- `@homebridge/hap-client` @ `v3.1.1`
+- `@homebridge/node-pty-prebuilt-multiarch` @ `v0.14.1-beta`
+- `@homebridge/plugin-ui-utils` @ `v2.1.0`
+
 ## v5.4.1 (2025-08-05)
 
 ### UI Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebridge-config-ui-x",
   "displayName": "Homebridge UI",
-  "version": "5.4.1",
+  "version": "5.4.2-beta.1",
   "description": "A web based management, configuration and control platform for Homebridge.",
   "author": "oznu <dev@oz.nu>",
   "license": "MIT",
@@ -82,7 +82,7 @@
     "@fastify/multipart": "9.0.3",
     "@fastify/static": "8.2.0",
     "@homebridge/hap-client": "3.1.1",
-    "@homebridge/node-pty-prebuilt-multiarch": "0.13.1",
+    "@homebridge/node-pty-prebuilt-multiarch": "0.14.1-beta.1",
     "@nestjs/axios": "4.0.1",
     "@nestjs/common": "11.1.5",
     "@nestjs/core": "11.1.5",

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

@@ -1,9 +1,9 @@
 <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" />
+  <rect x="3.5" 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)">
+  <g transform="translate(5.1, 3) scale(0.68)">
     <path
       fill="#7f7f7f"
       class="leaves"
@@ -12,19 +12,19 @@
   </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" />
+  <line stroke-linecap="round" x1="7" y1="26" x2="25" y2="26" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="7" y1="27.5" x2="25" y2="27.5" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="7" y1="29" x2="25" 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" />
+  <line stroke-linecap="round" x1="7" y1="26" x2="7" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="9" y1="26" x2="9" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="11" y1="26" x2="11" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="13" y1="26" x2="13" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="15" y1="26" x2="15" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="17" y1="26" x2="17" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="19" y1="26" x2="19" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="21" y1="26" x2="21" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="23" y1="26" x2="23" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="25" y1="26" x2="25" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
 </svg>

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

@@ -6,7 +6,17 @@
   <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" />
+  <rect
+    class="panel"
+    x="11.2"
+    y="4.2"
+    width="9.6"
+    height="10.8"
+    stroke="#7f7f7f"
+    fill-opacity="0"
+    stroke-width="0.5"
+    rx="0.25"
+  />
 
   <!-- bottom panel -->
   <rect
@@ -18,11 +28,22 @@
     stroke="#7f7f7f"
     fill-opacity="0"
     stroke-width="0.5"
+    rx="0.25"
   />
 
   <!-- 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" />
+  <rect
+    class="handle"
+    x="19.25"
+    y="15.87"
+    width="1.55"
+    height="0.05"
+    stroke="#1976d2"
+    fill="none"
+    stroke-width="0.5"
+    rx="10"
+  />
 </svg>

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

@@ -1,6 +1,6 @@
 <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)">
+  <g transform="translate(-0.85, 0.2) scale(0.99)">
     <path
       class="fan-blades"
       fill="#7f7f7f"
@@ -11,5 +11,5 @@
   </g>
 
   <!-- middle circle -->
-  <circle cx="17" cy="16" r="3.5" stroke="#7f7f7f" stroke-width="0.6" fill="#1976d2" fill-opacity="0.5" />
+  <circle cx="16" cy="16" r="3.6" stroke="#7f7f7f" stroke-width="2" fill="#1976d2" fill-opacity="0.5" />
 </svg>

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

@@ -33,7 +33,7 @@
   <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" />
+  <line x1="6" y1="17" x2="6" y2="31" stroke="#7f7f7f" stroke-width="1.5" stroke-linecap="" />
 
   <!-- right garage line -->
   <line x1="26" y1="17" x2="26" y2="31" stroke="#7f7f7f" stroke-width="1.5" />

package/public/assets/service-icons/irrigation-system.svg

@@ -0,0 +1,34 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- water tank -->
+  <rect
+    x="9"
+    y="1"
+    width="14"
+    height="6.5"
+    rx="2"
+    fill="#1976d2"
+    stroke="#7b7b7b"
+    stroke-width="0.5"
+    fill-opacity="0.5"
+  />
+
+  <!-- vertical pipe -->
+  <line class="pipe" x1="16" y1="8" x2="16" y2="31" stroke="#7f7f7f" stroke-width="1" stroke-linecap="round" />
+
+  <!-- horizontal pipes, top to bottom -->
+  <line class="pipe" x1="1" y1="9" x2="31" y2="9" stroke="#7f7f7f" stroke-width="1" stroke-linecap="round" />
+  <line class="pipe" x1="1" y1="20" x2="31" y2="20" stroke="#7f7f7f" stroke-width="1" stroke-linecap="round" />
+  <line class="pipe" x1="1" y1="31" x2="31" y2="31" stroke="#7f7f7f" stroke-width="1" stroke-linecap="round" />
+
+  <!-- top left field -->
+  <rect class="field" x="1" y="10" width="14" height="9" rx="0" fill="#7f7f7f" stroke-width="0" fill-opacity="0.5" />
+
+  <!-- top right field -->
+  <rect class="field" x="17" y="10" width="14" height="9" rx="0" fill="#7f7f7f" stroke-width="0" fill-opacity="0.5" />
+
+  <!-- bottom left field -->
+  <rect class="field" x="1" y="21" width="14" height="9" rx="0" fill="#7f7f7f" stroke-width="0" fill-opacity="0.5" />
+
+  <!-- bottom right field -->
+  <rect class="field" x="17" y="21" width="14" height="9" rx="0" fill="#7f7f7f" stroke-width="0" fill-opacity="0.5" />
+</svg>

package/public/assets/service-icons/leak-sensor.svg

@@ -0,0 +1,42 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- outer casing -->
+  <rect
+    class="red-outline"
+    x="3.5"
+    y="1"
+    width="25"
+    height="30"
+    rx="3"
+    stroke="#7f7f7f"
+    fill="none"
+    stroke-width="1.2"
+  />
+
+  <!-- water droplet -->
+  <g transform="translate(1.8, -4.3), scale(0.85)">
+    <path
+      d="M23.61 24.58C23.61 28.67 20.44 31.99 16.56 31.99C12.68 31.99 9.52 28.67 9.52 24.58C9.52 20.49 12.68 17.13 16.56 10.87C20.44 17.13 23.61 20.49 23.61 24.58Z"
+      fill="#1976d2"
+      fill-opacity="0.25"
+      stroke="#7f7f7f"
+      stroke-width="1"
+    />
+  </g>
+
+  <!-- grille horizontal lines -->
+  <line stroke-linecap="round" x1="7" y1="26" x2="25" y2="26" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="7" y1="27.5" x2="25" y2="27.5" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="7" y1="29" x2="25" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+
+  <!-- grille vertical lines -->
+  <line stroke-linecap="round" x1="7" y1="26" x2="7" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="9" y1="26" x2="9" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="11" y1="26" x2="11" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="13" y1="26" x2="13" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="15" y1="26" x2="15" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="17" y1="26" x2="17" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="19" y1="26" x2="19" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="21" y1="26" x2="21" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="23" y1="26" x2="23" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="25" y1="26" x2="25" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+</svg>

package/public/assets/service-icons/light-sensor.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.5" y="1" width="25" height="30" rx="3" stroke="#7f7f7f" fill="none" stroke-width="1.2" />
+
+  <!-- sun outline -->
+  <circle cx="16" cy="13.75" r="6" stroke="#ff9800" fill="none" stroke-width="1.2" stroke-opacity="0.5" />
+
+  <!-- sun rays, top first going clockwise -->
+  <line x1="16" y1="2.5" x2="16" y2="6.5" stroke="#ff9800" stroke-width="1.2" stroke-opacity="0.5" />
+  <line x1="24" y1="5.5" x2="21" y2="8.5" stroke="#ff9800" stroke-width="1.2" stroke-opacity="0.5" />
+  <line x1="23.25" y1="13.5" x2="27.25" y2="13.5" stroke="#ff9800" stroke-width="1.2" stroke-opacity="0.5" />
+  <line x1="21.25" y1="18.75" x2="24.25" y2="21.75" stroke="#ff9800" stroke-width="1.2" stroke-opacity="0.5" />
+  <line x1="16" y1="21" x2="16" y2="25" stroke="#ff9800" stroke-width="1.2" stroke-opacity="0.5" />
+  <line x1="10.75" y1="18.75" x2="7.75" y2="21.75" stroke="#ff9800" stroke-width="1.2" stroke-opacity="0.5" />
+  <line x1="4.75" y1="13.5" x2="8.75" y2="13.5" stroke="#ff9800" stroke-width="1.2" stroke-opacity="0.5" />
+  <line x1="8" y1="5.5" x2="11" y2="8.5" stroke="#ff9800" stroke-width="1.2" stroke-opacity="0.5" />
+
+  <!-- grille horizontal lines -->
+  <line stroke-linecap="round" x1="7" y1="26" x2="25" y2="26" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="7" y1="27.5" x2="25" y2="27.5" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="7" y1="29" x2="25" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+
+  <!-- grille vertical lines -->
+  <line stroke-linecap="round" x1="7" y1="26" x2="7" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="9" y1="26" x2="9" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="11" y1="26" x2="11" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="13" y1="26" x2="13" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="15" y1="26" x2="15" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="17" y1="26" x2="17" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="19" y1="26" x2="19" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="21" y1="26" x2="21" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="23" y1="26" x2="23" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="25" y1="26" x2="25" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+</svg>

package/public/assets/service-icons/lock-mechanism.svg

@@ -0,0 +1,39 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- shackle, locked -->
+  <path
+    d="M8 16 C6 -4, 26 -4, 24 16"
+    fill="none"
+    stroke="#7f7f7f"
+    stroke-width="2"
+    class="shackle-locked"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+
+  <!-- shackle, unlocked -->
+  <path
+    d="M8 16 C6 -2, 22 -2, 24 7"
+    fill="none"
+    stroke="#7f7f7f"
+    stroke-width="2"
+    class="shackle-unlocked"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-opacity="0"
+  />
+
+  <!-- main lock -->
+  <rect x="5" y="16" width="22" height="15" rx="3" fill="none" stroke="#7f7f7f" stroke-width="2" />
+
+  <!-- status keyhole -->
+  <circle
+    cx="16"
+    cy="23.5"
+    r="3"
+    stroke="#7f7f7f"
+    stroke-width="0.5"
+    fill="#4caf50"
+    fill-opacity="0.5"
+    class="keyhole"
+  />
+</svg>

package/public/assets/service-icons/motion-sensor.svg

@@ -0,0 +1,84 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- outer casing -->
+  <rect
+    class="orange-outline"
+    x="3.5"
+    y="1"
+    width="25"
+    height="30"
+    rx="3"
+    stroke="#7f7f7f"
+    fill="none"
+    stroke-width="1.2"
+  />
+
+  <!-- human figure -->
+  <g transform="translate(7, -0.75), scale(0.075)">
+    <path
+      d="M190.85 83.94C190.85 70.36 180.09 59.24 166.93 59.24C153.78 59.24 143.02 70.36 143.02 83.94C143.02 97.53 153.78 108.65 166.93 108.65C180.09 108.65 190.85 97.53 190.85 83.94Z"
+      fill="#1976d2"
+      fill-opacity="0.25"
+      stroke="#7f7f7f"
+      stroke-width="7"
+    />
+    <path
+      d="M232.24 175.95C210.12 175.95 190.98 163.6 180.22 145.69C179.08 143.72 169.99 127.91 168.86 125.93C164.67 118.52 156.9 114.2 148.53 114.2C145.54 114.2 142.55 114.81 139.56 116.05C135.37 117.82 114.45 126.67 76.78 142.6L76.78 200.66L100.69 200.66L100.69 159.28L121.62 150.02L88.73 324.17L113.85 324.17L134.78 225.36L160.49 250.06L160.49 324.17L184.4 324.17L184.4 230.92L159.89 205.6C164.19 183.36 166.59 171.01 167.06 168.54C182.61 188.3 205.93 200.66 232.24 200.66C232.24 195.72 232.24 178.42 232.24 175.95Z"
+      fill="#1976d2"
+      fill-opacity="0.25"
+      stroke="#7f7f7f"
+      stroke-width="7"
+    />
+  </g>
+
+  <!-- motion lines, top to bottom -->
+  <rect
+    x="9"
+    y="9"
+    width="2"
+    height="1"
+    rx="0.2"
+    stroke="#7f7f7f"
+    fill="#1976d2"
+    fill-opacity="0.25"
+    stroke-width="0.25"
+  />
+  <rect
+    x="7"
+    y="13"
+    width="3"
+    height="1"
+    rx="0.2"
+    stroke="#7f7f7f"
+    fill="#1976d2"
+    fill-opacity="0.25"
+    stroke-width="0.25"
+  />
+  <rect
+    x="8"
+    y="17"
+    width="4"
+    height="1"
+    rx="0.2"
+    stroke="#7f7f7f"
+    fill="#1976d2"
+    fill-opacity="0.25"
+    stroke-width="0.25"
+  />
+
+  <!-- grille horizontal lines -->
+  <line stroke-linecap="round" x1="7" y1="26" x2="25" y2="26" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="7" y1="27.5" x2="25" y2="27.5" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="7" y1="29" x2="25" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+
+  <!-- grille vertical lines -->
+  <line stroke-linecap="round" x1="7" y1="26" x2="7" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="9" y1="26" x2="9" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="11" y1="26" x2="11" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="13" y1="26" x2="13" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="15" y1="26" x2="15" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="17" y1="26" x2="17" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="19" y1="26" x2="19" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="21" y1="26" x2="21" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="23" y1="26" x2="23" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="25" y1="26" x2="25" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+</svg>

package/public/assets/service-icons/occupancy-sensor.svg

@@ -0,0 +1,49 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- outer casing -->
+  <rect
+    class="orange-outline"
+    x="3.5"
+    y="1"
+    width="25"
+    height="30"
+    rx="3"
+    stroke="#7f7f7f"
+    fill="none"
+    stroke-width="1.2"
+  />
+
+  <!-- human figure -->
+  <g transform="translate(4.75, -0.75), scale(0.075)">
+    <path
+      d="M190.85 83.94C190.85 70.36 180.09 59.24 166.93 59.24C153.78 59.24 143.02 70.36 143.02 83.94C143.02 97.53 153.78 108.65 166.93 108.65C180.09 108.65 190.85 97.53 190.85 83.94Z"
+      fill="#ff9800"
+      fill-opacity="0.25"
+      stroke="#7f7f7f"
+      stroke-width="7"
+    />
+    <path
+      d="M232.24 175.95C210.12 175.95 190.98 163.6 180.22 145.69C179.08 143.72 169.99 127.91 168.86 125.93C164.67 118.52 156.9 114.2 148.53 114.2C145.54 114.2 142.55 114.81 139.56 116.05C135.37 117.82 114.45 126.67 76.78 142.6L76.78 200.66L100.69 200.66L100.69 159.28L121.62 150.02L88.73 324.17L113.85 324.17L134.78 225.36L160.49 250.06L160.49 324.17L184.4 324.17L184.4 230.92L159.89 205.6C164.19 183.36 166.59 171.01 167.06 168.54C182.61 188.3 205.93 200.66 232.24 200.66C232.24 195.72 232.24 178.42 232.24 175.95Z"
+      fill="#ff9800"
+      fill-opacity="0.25"
+      stroke="#7f7f7f"
+      stroke-width="7"
+    />
+  </g>
+
+  <!-- grille horizontal lines -->
+  <line stroke-linecap="round" x1="7" y1="26" x2="25" y2="26" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="7" y1="27.5" x2="25" y2="27.5" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="7" y1="29" x2="25" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+
+  <!-- grille vertical lines -->
+  <line stroke-linecap="round" x1="7" y1="26" x2="7" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="9" y1="26" x2="9" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="11" y1="26" x2="11" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="13" y1="26" x2="13" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="15" y1="26" x2="15" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="17" y1="26" x2="17" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="19" y1="26" x2="19" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="21" y1="26" x2="21" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="23" y1="26" x2="23" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+  <line stroke-linecap="round" x1="25" y1="26" x2="25" y2="29" stroke="#7f7f7f" stroke-width="0.5" />
+</svg>

package/public/assets/service-icons/security-system.svg

@@ -0,0 +1,19 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- siren dome -->
+  <path
+    class="dome"
+    d="M7 18 C7 5, 25 5, 25 18 V26 H7 V18 Z"
+    fill="none"
+    stroke="#7f7f7f"
+    stroke-width="1.5"
+    fill-opacity="0.5"
+  />
+
+  <!-- base -->
+  <rect x="2" y="26" width="28" height="4" fill="none" stroke="#7f7f7f" stroke-width="1.5" rx="1" />
+
+  <!-- light waves left to right -->
+  <line class="ray" x1="6" y1="3" x2="10" y2="7" stroke-width="3" />
+  <line class="ray" x1="16" y1="0" x2="16" y2="5" stroke-width="3" />
+  <line class="ray" x1="26" y1="3" x2="22" y2="7" stroke-width="3" />
+</svg>

package/public/assets/service-icons/stateless-programmable-switch.svg

@@ -13,6 +13,6 @@
   <circle class="long" cx="16" cy="23.5" r="5" stroke="#7f7f7f" stroke-width="1" fill="none" fill-opacity="0.5" />
 
   <!-- long click lies, left then right -->
-  <line x1="5" y1="23.5" x2="11" y2="23.5" stroke="#7f7f7f" stroke-width="0.5" />
-  <line x1="21" y1="23.5" x2="27" y2="23.5" stroke="#7f7f7f" stroke-width="0.5" />
+  <line x1="5" y1="23.5" x2="11" y2="23.5" stroke="#7f7f7f" stroke-width="0.5" stroke-linecap="round" />
+  <line x1="21" y1="23.5" x2="27" y2="23.5" stroke="#7f7f7f" stroke-width="0.5" stroke-linecap="round" />
 </svg>

package/public/assets/service-icons/valve-faucet.svg

@@ -0,0 +1,22 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- sink -->
+  <rect class="sink" x="-3" y="28" width="21" height="6.5" fill="#7f7f7f" stroke-width="0" fill-opacity="0.5" />
+
+  <!-- cold tap -->
+  <line stroke-linecap="round" x1="24" y1="18" x2="26" y2="18" stroke="#1976d2" stroke-width="3" stroke-opacity="0.5" />
+
+  <!-- hot tap -->
+  <line stroke-linecap="round" x1="20" y1="18" x2="22" y2="18" stroke="#d32f2f" stroke-width="3" stroke-opacity="0.5" />
+
+  <!-- tap outline -->
+  <rect x="19" y="16.5" rx="1" width="8" height="3" fill="none" stroke-width="1" stroke="#7f7f7f" />
+
+  <!-- tap shape -->
+  <path d="M10 9 C10 -1, 23 -1, 23 10 V26" fill="none" stroke="#7f7f7f" stroke-width="2" />
+
+  <!-- water -->
+  <line class="stream" x1="10" y1="9" x2="10" y2="28" stroke="#1976d2" stroke-opacity="0" stroke-width="1.5" />
+
+  <!-- tap base -->
+  <line x1="20" y1="31" x2="26" y2="31" stroke="#7f7f7f" stroke-width="10" stroke-linecap="round" />
+</svg>

package/public/assets/service-icons/valve-generic.svg

@@ -0,0 +1,25 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- top twister -->
+  <line x1="8" y1="3" x2="14" y2="3" stroke="#7f7f7f" stroke-width="3" stroke-linecap="round" />
+
+  <!-- twister to main pipe -->
+  <line x1="11" y1="8" x2="11" y2="3" stroke="#7f7f7f" stroke-width="3" stroke-linecap="round" />
+
+  <!-- main pipe -->
+  <line x1="0" y1="9" x2="21" y2="9" stroke="#7f7f7f" stroke-width="4" stroke-linecap="round" />
+
+  <!-- nozzle -->
+  <line x1="21" y1="9" x2="21" y2="14" stroke="#7f7f7f" stroke-width="4" stroke-linecap="round" />
+
+  <!-- top row of drops -->
+  <circle class="drop drop-top" fill="#1976d2" fill-opacity="0" cx="21" cy="19" r="1.5" />
+
+  <!-- middle row of drops -->
+  <circle class="drop drop-middle" fill="#1976d2" fill-opacity="0" cx="17" cy="24" r="1.5" />
+  <circle class="drop drop-middle" fill="#1976d2" fill-opacity="0" cx="25" cy="24" r="1.5" />
+
+  <!-- bottom row of drops -->
+  <circle class="drop drop-bottom" fill="#1976d2" fill-opacity="0" cx="13" cy="29" r="1.5" />
+  <circle class="drop drop-bottom" fill="#1976d2" fill-opacity="0" cx="21" cy="29" r="1.5" />
+  <circle class="drop drop-bottom" fill="#1976d2" fill-opacity="0" cx="29" cy="29" r="1.5" />
+</svg>

package/public/assets/service-icons/valve-irrigation.svg

@@ -0,0 +1,34 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- small drops, left to right -->
+  <circle class="drop drop-out" fill="#1976d2" fill-opacity="0" cx="1" cy="16" r="1" />
+  <circle class="drop drop-out" fill="#1976d2" fill-opacity="0" cx="6" cy="8" r="1" />
+  <circle class="drop drop-out" fill="#1976d2" fill-opacity="0" cx="16" cy="4" r="1" />
+  <circle class="drop drop-out" fill="#1976d2" fill-opacity="0" cx="26" cy="8" r="1" />
+  <circle class="drop drop-out" fill="#1976d2" fill-opacity="0" cx="31" cy="16" r="1" />
+
+  <!-- large drops, left to right -->
+  <circle class="drop drop-in" fill="#1976d2" fill-opacity="0" cx="7" cy="16" r="1.5" />
+  <circle class="drop drop-in" fill="#1976d2" fill-opacity="0" cx="25" cy="16" r="1.5" />
+  <circle class="drop drop-in" fill="#1976d2" fill-opacity="0" cx="10.5" cy="11.5" r="1.5" />
+  <circle class="drop drop-in" fill="#1976d2" fill-opacity="0" cx="21.5" cy="11.5" r="1.5" />
+  <circle class="drop drop-in" fill="#1976d2" fill-opacity="0" cx="16" cy="9" r="1.5" />
+
+  <!-- vertical pipe -->
+  <line x1="16" y1="16" x2="16" y2="31" stroke="#7f7f7f" stroke-width="2" stroke-linecap="round" />
+
+  <!-- spout -->
+  <line x1="14" y1="16" x2="18" y2="16" stroke="#7f7f7f" stroke-width="4" stroke-linecap="round" />
+
+  <!-- grass -->
+  <line
+    class="grass"
+    x1="4"
+    y1="31"
+    x2="28"
+    y2="31"
+    stroke="#7f7f7f"
+    stroke-opacity="0.5"
+    stroke-width="10"
+    stroke-linecap="round"
+  />
+</svg>

package/public/assets/service-icons/valve-shower-head.svg

@@ -0,0 +1,32 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- top horizontal pipe -->
+  <line x1="1" y1="1" x2="16" y2="1" stroke="#7f7f7f" stroke-width="2" stroke-linecap="round" />
+
+  <!-- left vertical pipe -->
+  <line x1="1" y1="1" x2="1" y2="31" stroke="#7f7f7f" stroke-width="2" stroke-linecap="round" />
+
+  <!-- pipe to head -->
+  <line x1="16" y1="1" x2="16" y2="3" stroke="#7f7f7f" stroke-width="2" stroke-linecap="round" />
+
+  <!-- shower head -->
+  <path d="M8 11 A8 7 0 0 1 24 11" fill="none" stroke="#7f7f7f" stroke-width="2" />
+  <line x1="7" y1="11" x2="25" y2="11" stroke="#7f7f7f" stroke-width="2" stroke-linecap="round" />
+
+  <!-- large drops, left to right -->
+  <circle class="drop drop-top" fill="#1976d2" fill-opacity="0" cx="8" cy="16" r="1.25" />
+  <circle class="drop drop-top" fill="#1976d2" fill-opacity="0" cx="13.3" cy="16" r="1.25" />
+  <circle class="drop drop-top" fill="#1976d2" fill-opacity="0" cx="18.6" cy="16" r="1.25" />
+  <circle class="drop drop-top" fill="#1976d2" fill-opacity="0" cx="24" cy="16" r="1.25" />
+
+  <!-- middle drops, left to right -->
+  <circle class="drop drop-middle" fill="#1976d2" fill-opacity="0" cx="8" cy="22" r="1" />
+  <circle class="drop drop-middle" fill="#1976d2" fill-opacity="0" cx="13.3" cy="22" r="1" />
+  <circle class="drop drop-middle" fill="#1976d2" fill-opacity="0" cx="18.6" cy="22" r="1" />
+  <circle class="drop drop-middle" fill="#1976d2" fill-opacity="0" cx="24" cy="22" r="1" />
+
+  <!-- small drops, left to right -->
+  <circle class="drop drop-bottom" fill="#1976d2" fill-opacity="0" cx="8" cy="28" r="0.75" />
+  <circle class="drop drop-bottom" fill="#1976d2" fill-opacity="0" cx="13.3" cy="28" r="0.75" />
+  <circle class="drop drop-bottom" fill="#1976d2" fill-opacity="0" cx="18.6" cy="28" r="0.75" />
+  <circle class="drop drop-bottom" fill="#1976d2" fill-opacity="0" cx="24" cy="28" r="0.75" />
+</svg>

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

@@ -6,13 +6,13 @@
   <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" />
+  <rect x="3.66" y="15.65" width="10.68" height="0.5" stroke="#7f7f7f" fill="none" stroke-width="0.5" rx="2" />
 
   <!-- 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" />
+  <rect x="17.66" y="15.65" width="10.68" height="0.5" stroke="#7f7f7f" fill="none" stroke-width="0.5" rx="2" />
 
   <!-- blind -->
   <rect