UPD: Pane switching (random for testing)

src/components/device/DevicePreview.vue

@@ -30,10 +30,10 @@
         class="rounded-full outline-2 absolute h-[41.5%] top-[24.5%] aspect-square left-0 right-0 mx-auto transition-all"
         :class="{'outline outline-white': selected==='ring',
         'hover:outline outline-zinc-400': selected!=='ring'}"
-        @click="selected='ring'" />
+        @click="selected='ring'; $emit('select', selected)" />
       <DeviceKeys
         :selected="selected" class="absolute w-[72.7%] top-[77.2%] gap-[2.8%] left-0 right-0 mx-auto"
-        @select="args => selected=args" />
+        @select="args => {selected=args; $emit('select', selected)}" />
     </div>
   </div>
 </template>
@@ -48,6 +48,8 @@ import DeviceLEDRing from '@/components/device/DeviceLEDRing.vue'
 import gsap from 'gsap'
 import DeviceKeys from '@/components/device/DeviceKeys.vue'
 
+defineEmits(['select'])
+
 const selected = ref('a')
 
 const value = ref(69)