In a nutshell, I am building a web app like mycolor.space, where you type in the hex value of a color and the application spits out a bunch of color palettes using a library called tinycolor, which does some simple lightening/darkening/rotation of hues.

So I'm able to do handle all the binding and subscriptions to the store value that we'll call primaryColor. primaryColor successfully updates when the user types in a hex code into an input field. I have a svelte component called Palettes.svelte which looks something like this:

<script>
import tiny color from 'tinycolor2'

export let color

const palettes = [
  {
    name: 'Simple Gradient',
    colors: [
      tinycolor(color).colorMutationFunction1(),
      tinycolor(color).colorMutationFunction2(),
      .
      .
      .
      ]
  },
  .
  .
  .

]
</script>
<main>
  <h1>{color}</h1>
  {#each palettes as palette}
    {#each palette.colors as color}
      <div>{color}</div>
    {/each}
  {/each}
</main>

So the core functionality is there. It produces color palettes based on the initial store value, which lives inside the array from the getgo. The problem is that the value color inside of the palettes array does not update reactively when the user changes the hex color value in the input. The h1 tag in the main body of this component predictably does update alongside the store. I have read here and there that in order to iteratively change array values based on a change in the state of a store variable in svelte that you have to do some weird syntax that sets the array to itself, like palettes = palettes. However, I have only ever seen this in the context of a function.

Please let me know if any more information would be of any insight. The rest of my app is updating and passing the store variable just fine, so I know I'm just missing something fundamental about how to handle this.