diff --git a/plugins/core/package-lock.json b/plugins/core/package-lock.json
index a793c42c32..8cfd0b2e0f 100644
--- a/plugins/core/package-lock.json
+++ b/plugins/core/package-lock.json
@@ -1,12 +1,12 @@
 {
    "name": "@scrypted/core",
-   "version": "0.1.105",
+   "version": "0.1.106",
    "lockfileVersion": 2,
    "requires": true,
    "packages": {
       "": {
          "name": "@scrypted/core",
-         "version": "0.1.105",
+         "version": "0.1.106",
          "license": "Apache-2.0",
          "dependencies": {
             "@scrypted/common": "file:../../common",
diff --git a/plugins/core/package.json b/plugins/core/package.json
index c40c97c5d0..b0e2a8c564 100644
--- a/plugins/core/package.json
+++ b/plugins/core/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@scrypted/core",
-   "version": "0.1.105",
+   "version": "0.1.106",
    "description": "Scrypted Core plugin. Provides the UI, websocket, and engine.io APIs.",
    "author": "Scrypted",
    "license": "Apache-2.0",
diff --git a/plugins/core/ui/src/interfaces/Charger.vue b/plugins/core/ui/src/interfaces/Charger.vue
index d3cd8365de..cdaf2f9359 100644
--- a/plugins/core/ui/src/interfaces/Charger.vue
+++ b/plugins/core/ui/src/interfaces/Charger.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import { ChargeState } from '@scrypted/sdk';
+import { ChargeState } from '@scrypted/types';
 import RPCInterface from "./RPCInterface.vue";
 
 export default {
diff --git a/plugins/core/ui/src/interfaces/Setting.vue b/plugins/core/ui/src/interfaces/Setting.vue
index ca685793f5..e5ce834a86 100644
--- a/plugins/core/ui/src/interfaces/Setting.vue
+++ b/plugins/core/ui/src/interfaces/Setting.vue
@@ -41,8 +41,7 @@
       </template>
     </DevicePicker>
     <DevicePicker v-else-if="lazyValue.type === 'interface'" v-model="lazyValue.value" :multiple="lazyValue.multiple"
-      :readonly="lazyValue.readonly" :devices="interfaces" :title="lazyValue.title"
-      :description="lazyValue.description">
+      :readonly="lazyValue.readonly" :devices="interfaces" :title="lazyValue.title" :description="lazyValue.description">
       <template v-slot:append-outer>
         <v-btn v-if="dirty && device" color="success" @click="save" class="shift-up">
           <v-icon>send</v-icon>
@@ -52,7 +51,7 @@
     <div v-else-if="lazyValue.type === 'clippath'" class="mb-2">
       <v-btn small block @click="editZone">{{ lazyValue.title }} </v-btn>
       <Camera :value="device" :device="device" :clipPathValue="sanitizedClipPathValue" :showDialog="editingZone"
-        :hidePreview="true" @dialog="editingZoneChanged" @clipPath="lazyValue.value = $event"></Camera>
+        :hidePreview="true" @dialog="editingZoneChanged" @clipPath="updateClipPath"></Camera>
     </div>
     <v-textarea v-else-if="lazyValue.type === 'textarea'" v-model="lazyValue.value" outlined persistent-hint
       :hint="lazyValue.description" :label="lazyValue.title">
@@ -88,6 +87,7 @@ export default {
   data() {
     return {
       editingZone: false,
+      clipPathThrottle: null,
     };
   },
   watch: {
@@ -142,7 +142,7 @@ export default {
         );
       },
       set(val) {
-        this.lazyValue.value = val.toString();
+        this.lazyValue.value = !!val;
       },
     },
     dirty() {
@@ -228,6 +228,17 @@ export default {
   },
   methods: {
     onChange() { },
+    updateClipPath(e) {
+      clearTimeout(this.clipPathThrottle);
+      this.clipPathThrottle = setTimeout(() => {
+        // this.lazyValue.value = e;
+        this.rpc().putSetting(
+          this.lazyValue.key,
+          this.createInputValue().value
+        );
+        this.onInput();
+      }, 500)
+    },
     editingZoneChanged(value) {
       this.editingZone = value;
       if (!value) {