What is best naming convention to distinguish between store and normal variable in svelte?

Question

I am currently struggling with naming store(writable, readable etc) in svelte.

store.ts

export type CanvasContext = ReturnType<typeof createCanvasStore>

export const createCanvasStore = () => {
  const canvasState = writable<CanvasState>('idle')

  // other writable stores...

  return {
    canvasState,
    // other writable stores...
  }
}

const canvasContextSymbol = Symbol('canvasContext')

export const useCanvasContext = () => useContext(canvasContextSymbol, createCanvasContext)

logic.ts

export const changeCanvasState = (payload: {canvasState: CanvasState, canvasStateStore: Writable<CanvasState>}) => {
  
  const { canvasState, canvasStateStore } = payload

  if (canvasState === 'idle') {
    canvasStateStore.set('pressed')
  } else {
    canvasStateStore.set('idle')
  }
}

App.svelte

<script lang='ts'>
  import { useCanvasContext } from './store'
  import { changeCanvasState } from './logic'

  const canvasContext = useCanvasContext()

  const {
    canvasState,
    // many other writables...
  } = canvasContext

  const handleClick = () => {
    changeCanvasState({
      canvasState: $canvasState,
      canvasStateStore: canvasState,

      // ...canvasContext
      // I want pass canvasContext but name colliding
    })
  }
<script/>

<div>
  {$canvasState}
</div>
<button on:click={handleClick}>
  change canvas state
</button>

I am using this naming convention and I want to make this seamlessly with logic.ts not destructuring useCanvasContext by just passing canvasContext.

any ideas?