Make widget state changes reactive

Substate stores

src/lib/widgets/ComboWidget.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
- import type { WidgetDrawState, WidgetUIState } from "$lib/stores/widgetState";
+ import type { WidgetDrawState, WidgetUIState, WidgetUIStateStore } from "$lib/stores/widgetState";
  import { BlockTitle } from "@gradio/atoms";
  import { Dropdown } from "@gradio/form";
+ import { get } from "svelte/store";
  import Select from 'svelte-select';
  export let item: WidgetUIState | null = null;
+ let itemValue: WidgetUIStateStore | null = null;
+ let option: any;
 
- let option: any = null;
-
- $: if(item && !option) option = item.value;
+ $: if(item) {
+     option = get(item.value);
+     itemValue = item.value
+ };
 </script>
 
 <div class="wrapper">
@@ -16,7 +20,7 @@
             <BlockTitle show_label={true}>{item.widget.name}</BlockTitle>
             <Select
                 bind:value={option}
-                bind:justValue={item.value}
+                bind:justValue={$itemValue}
                 bind:items={item.widget.options.values}
                 disabled={item.widget.options.values.length === 0}
                 clearable={false}

src/lib/widgets/ComfyGalleryWidget.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
  import { onMount } from "svelte";
  import { ImageViewer } from "$lib/ImageViewer";
- import type { WidgetUIState } from "$lib/stores/widgetState";
+ import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/widgetState";
  import { Block } from "@gradio/atoms";
  import { Gallery } from "@gradio/gallery";
  import type { Styles } from "@gradio/utils";
+
  export let item: WidgetUIState | null = null;
+ let itemValue: WidgetUIStateStore | null = null; // stores must be declared at top level
+
+ $: if(item) {
+     itemValue = item.value;
+ }
 
  let style: Styles = {
      // grid_cols: [2],
@@ -28,10 +34,10 @@
 
 </script>
 <div class="wrapper comfy-gallery-widget" bind:this={element}>
-    {#if item}
+    {#if item && itemValue}
         <Block variant="solid" padding={false}>
             <Gallery
-                bind:value={item.value}
+                bind:value={$itemValue}
                 label={item.widget.name}
                 show_label={true}
                 {style}

src/lib/widgets/RangeWidget.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
- import type { WidgetUIState } from "$lib/stores/widgetState";
+ import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/widgetState";
  import { Range } from "@gradio/form";
  export let item: WidgetUIState | null = null;
+ let itemValue: WidgetUIStateStore | null = null;
+ $: if (item) { itemValue = item.value; }
 </script>
 
 <div class="wrapper">
-    {#if item}
+    {#if item && itemValue}
         <Range
-            bind:value={item.value}
+            bind:value={$itemValue}
             minimum={item.widget.options.min}
             maximum={item.widget.options.max}
             step={item.widget.options.step}

src/lib/widgets/TextWidget.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
- import type { WidgetUIState } from "$lib/stores/widgetState";
+ import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/widgetState";
  import { TextBox } from "@gradio/form";
  export let item: WidgetUIState | null = null;
+ let itemValue: WidgetUIStateStore | null = null;
+ $: if (item) { itemValue = item.value; }
 </script>
 
 <div class="wrapper">
-    {#if item}
+    {#if item && itemValue}
         <TextBox
-            bind:value={item.value}
+            bind:value={$itemValue}
             label={item.widget.name}
             lines={item.widget.options.multiline ? 5 : 1}
             max_lines={item.widget.options.multiline ? 5 : 1}