Fix several bugs related to the interaction between reactivity and imperative browser APIs

src/connect/ConnectSection.svelte

@@ -32,8 +32,10 @@
   })
 
   hid.addEventListener('disconnect', e => {
+    if (device === e.device) {
     toast.info('Device disconnected')
-    if (device === e.device) onchange(null)
+      onchange(null)
+    }
   })
 
   onMount(() => {

src/edit/EditSection.svelte

@@ -52,7 +52,7 @@
 
   async function renderPattern() {
     if (imageBitmap === null) {
-      onchange(null)
+      renderedBitmap = null
       return
     }
 
@@ -71,12 +71,15 @@
 
     const quantizedData = quantizer.reduce(ctx)
     renderedBitmap = quantizedData
-    onchange(quantizedData)
   }
 
   $effect(() => {
     renderPattern()
   })
+
+  $effect(() => {
+    onchange(renderedBitmap)
+  })
 </script>
 
 <div class={cn('flex max-lg:flex-col gap-4', classNames)} {...restProps}>

src/edit/preview/PreviewCanvases.svelte

@@ -36,9 +36,13 @@
   }
 
   $effect(() => {
+    const context2x = freshContext(canvas2xEl)
+    const context1x = freshContext(canvas1xEl)
+
     if (bitmap === null) return
-    drawQuantizedData(freshContext(canvas2xEl), bitmap)
+
-    drawQuantizedData(freshContext(canvas1xEl), bitmap)
+    drawQuantizedData(context2x, bitmap)
+    drawQuantizedData(context1x, bitmap)
   })
 </script>