From 3a5917e8efadd6f9825455faaa6fd2c6292e4d95 Mon Sep 17 00:00:00 2001
From: Lumi Pakkanen <lumi.pakkanen@gmail.com>
Date: Tue, 2 Jan 2024 21:47:43 +0200
Subject: [PATCH] Use pinia to manage app state

Fix a bug where deactivated channel messages were passed to MIDI out from MIDI in.

ref #367
---
 src/App.vue                                   | 522 +++++-------------
 src/components/ScaleBuilder.vue               | 228 ++++----
 .../modals/generation/HistoricalScale.vue     |   6 +-
 src/stores/midi.ts                            |  22 +
 src/stores/state.ts                           | 236 ++++++++
 src/views/AnalysisView.vue                    |  35 +-
 src/views/LatticeView.vue                     |  17 +-
 src/views/MidiView.vue                        |  83 ++-
 src/views/NotFoundView.vue                    |  53 +-
 src/views/PreferencesView.vue                 |  78 +--
 src/views/ScaleView.vue                       |  45 +-
 src/views/SynthView.vue                       |  99 +---
 src/views/VirtualKeyboardView.vue             |  41 +-
 src/views/VirtualQwerty.vue                   |  52 +-
 14 files changed, 640 insertions(+), 877 deletions(-)
 create mode 100644 src/stores/midi.ts
 create mode 100644 src/stores/state.ts

diff --git a/src/App.vue b/src/App.vue
index 49371c5c..c3ce5d5c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,141 +1,22 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, reactive, watch } from 'vue'
 import { RouterLink, RouterView, useRouter, type LocationQuery } from 'vue-router'
-import {
-  DEFAULT_NUMBER_OF_COMPONENTS,
-  NEWLINE_TEST,
-  NUMBER_OF_NOTES,
-  UNIX_NEWLINE,
-  WHITE_MODE_OFFSET
-} from '@/constants'
+import { NEWLINE_TEST, WHITE_MODE_OFFSET } from '@/constants'
 import { ScaleWorkshopOneData } from '@/scale-workshop-one'
 import type { Input, Output } from 'webmidi'
-import { computeWhiteIndices } from '@/midi'
 import { MidiIn, midiKeyInfo, MidiOut } from 'xen-midi'
 import { Keyboard, type CoordinateKeyboardEvent } from 'isomorphic-qwerty'
 import { decodeQuery, encodeQuery, type DecodedState } from '@/url-encode'
 import { debounce } from '@/utils'
 import { version } from '../package.json'
-import { arraysEqual } from 'xen-dev-utils'
-import { mapWhiteAsdfBlackQwerty, mapWhiteQweZxcBlack123Asd } from './keyboard-mapping'
 import { useAudioStore } from '@/stores/audio'
-import {
-  Interval,
-  parseLine,
-  Scale,
-  type IntervalOptions,
-  reverseParseScale
-} from 'scale-workshop-core'
+import { useStateStore } from './stores/state'
+import { useMidiStore } from './stores/midi'
 
 // === Pinia-managed state ===
 const audio = useAudioStore()
-
-// === Application state ===
-const scaleName = ref('')
-const scaleLines = ref<string[]>([])
-const scale = reactive(Scale.fromIntervalArray([parseLine('1/1', DEFAULT_NUMBER_OF_COMPONENTS)]))
-const baseMidiNote = ref(69)
-const keyColors = ref([
-  'white',
-  'black',
-  'white',
-  'white',
-  'black',
-  'white',
-  'black',
-  'white',
-  'white',
-  'black',
-  'white',
-  'black'
-])
-const isomorphicVertical = ref(5)
-const isomorphicHorizontal = ref(1)
-// Keyboard mode affects both physical qwerty and virtual keyboards
-const keyboardMode = ref<'isomorphic' | 'piano'>('isomorphic')
-// Physical layout mimics a piano layout in one or two layers
-const pianoMode = ref<'Asdf' | 'QweZxc0' | 'QweZxc1'>('Asdf')
-const equaveShift = ref(0)
-const degreeShift = ref(0)
-const heldNotes = reactive(new Map<number, number>())
-const typingActive = ref(true)
-const midiInput = ref<Input | null>(null)
-const midiOutput = ref<Output | null>(null)
-const midiInputChannels = reactive(new Set([1]))
-// Channel 10 is reserved for percussion
-const midiOutputChannels = ref(new Set([1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 15, 16]))
-const midiVelocityOn = ref(true)
-
-const midiWhiteMode = ref<'off' | 'simple' | 'blackAverage' | 'keyColors'>('off')
-
-// These are user preferences and are fetched from local storage.
-const newline = ref(UNIX_NEWLINE)
-const colorScheme = ref<'light' | 'dark'>('light')
-const centsFractionDigits = ref(3)
-const decimalFractionDigits = ref(5)
-const showVirtualQwerty = ref(false)
-const midiOctaveOffset = ref(-1)
-const intervalMatrixIndexing = ref(0)
-
-// Special keyboard codes also from local storage.
-const deactivationCode = ref('Backquote')
-const equaveUpCode = ref('NumpadMultiply')
-const equaveDownCode = ref('NumpadDivide')
-const degreeUpCode = ref('NumpadAdd')
-const degreeDownCode = ref('NumpadSubtract')
-
-// === Computed state ===
-const frequencies = computed(() =>
-  scale.getFrequencyRange(-baseMidiNote.value, NUMBER_OF_NOTES - baseMidiNote.value)
-)
-
-// For midi mapping
-const whiteIndices = computed(() => computeWhiteIndices(baseMidiNote.value, keyColors.value))
-
-const keyboardMapping = computed<Map<string, number>>(() => {
-  const baseIndex = baseMidiNote.value + equaveShift.value * scale.size + degreeShift.value
-  if (pianoMode.value === 'Asdf') {
-    return mapWhiteAsdfBlackQwerty(keyColors.value, baseMidiNote.value, baseIndex)
-  } else if (pianoMode.value === 'QweZxc0') {
-    return mapWhiteQweZxcBlack123Asd(keyColors.value, scale.size, baseMidiNote.value, baseIndex, 0)
-  } else {
-    return mapWhiteQweZxcBlack123Asd(keyColors.value, scale.size, baseMidiNote.value, baseIndex, 1)
-  }
-})
-
-// === State updates ===
-function updateFromScaleLines(lines: string[]) {
-  if (arraysEqual(lines, scaleLines.value)) {
-    return
-  }
-  scaleLines.value = lines
-  const intervals: Interval[] = []
-  const options: IntervalOptions = {
-    centsFractionDigits: centsFractionDigits.value,
-    decimalFractionDigits: decimalFractionDigits.value
-  }
-  lines.forEach((line) => {
-    try {
-      const interval = parseLine(line, DEFAULT_NUMBER_OF_COMPONENTS, options)
-      intervals.push(interval)
-    } catch {
-      /* empty */
-    }
-  })
-  if (!intervals.length) {
-    intervals.push(parseLine('1/1', DEFAULT_NUMBER_OF_COMPONENTS, options))
-  }
-
-  const surrogate = Scale.fromIntervalArray(intervals)
-  scale.intervals = surrogate.intervals
-  scale.equave = surrogate.equave
-}
-
-function updateFromScale(surrogate: Scale) {
-  scale.intervals = surrogate.intervals
-  scale.equave = surrogate.equave
-  scaleLines.value = reverseParseScale(scale)
-}
+const state = useStateStore()
+const midi = useMidiStore()
 
 // == URL path handling ==
 /**
@@ -161,18 +42,18 @@ const encodeState = debounce(() => {
   }
   justEncodedUrl = true
 
-  const state: DecodedState = {
-    scaleName: scaleName.value,
-    scaleLines: scaleLines.value,
-    baseFrequency: scale.baseFrequency,
-    baseMidiNote: baseMidiNote.value,
-    keyColors: keyColors.value,
-    isomorphicHorizontal: isomorphicHorizontal.value,
-    isomorphicVertical: isomorphicVertical.value,
-    keyboardMode: keyboardMode.value,
-    pianoMode: pianoMode.value,
-    equaveShift: equaveShift.value,
-    degreeShift: degreeShift.value,
+  const decodedState: DecodedState = {
+    scaleName: state.scaleName,
+    scaleLines: state.scaleLines,
+    baseFrequency: state.scale.baseFrequency,
+    baseMidiNote: state.baseMidiNote,
+    keyColors: state.keyColors,
+    isomorphicHorizontal: state.isomorphicHorizontal,
+    isomorphicVertical: state.isomorphicVertical,
+    keyboardMode: state.keyboardMode,
+    pianoMode: state.pianoMode,
+    equaveShift: state.equaveShift,
+    degreeShift: state.degreeShift,
     waveform: audio.waveform,
     attackTime: audio.attackTime,
     decayTime: audio.decayTime,
@@ -184,7 +65,7 @@ const encodeState = debounce(() => {
     pingPongGain: audio.pingPongGain
   }
 
-  const query = encodeQuery(state) as LocationQuery
+  const query = encodeQuery(decodedState) as LocationQuery
   query.version = version
 
   // XXX: There are some sporadic issues with useRoute().fullPath
@@ -194,27 +75,19 @@ const encodeState = debounce(() => {
   router.push({ path: getPath(url), query })
 }, 200)
 
-watch(baseMidiNote, (newValue) => {
-  if (isNaN(newValue)) {
-    baseMidiNote.value = 69
-  } else if (Math.round(newValue) != newValue) {
-    baseMidiNote.value = Math.round(newValue)
-  }
-})
-
 watch(
   () => [
-    scaleName.value,
-    scaleLines.value,
-    scale.baseFrequency,
-    baseMidiNote.value,
-    keyColors.value,
-    isomorphicHorizontal.value,
-    isomorphicVertical.value,
-    keyboardMode.value,
-    pianoMode.value,
-    equaveShift.value,
-    degreeShift.value,
+    state.scaleName,
+    state.scaleLines,
+    state.scale.baseFrequency,
+    state.baseMidiNote,
+    state.keyColors,
+    state.isomorphicHorizontal,
+    state.isomorphicVertical,
+    state.keyboardMode,
+    state.pianoMode,
+    state.equaveShift,
+    state.degreeShift,
     audio.waveform,
     audio.attackTime,
     audio.decayTime,
@@ -245,29 +118,29 @@ router.afterEach((to, from) => {
   const query = url.searchParams
   if (query.has('version')) {
     try {
-      const state = decodeQuery(query)
+      const decodedState = decodeQuery(query)
       justDecodedUrl = true
 
-      scaleName.value = state.scaleName
-      scale.baseFrequency = state.baseFrequency
-      baseMidiNote.value = state.baseMidiNote
-      keyColors.value = state.keyColors
-      isomorphicHorizontal.value = state.isomorphicHorizontal
-      isomorphicVertical.value = state.isomorphicVertical
-      keyboardMode.value = state.keyboardMode
-      pianoMode.value = state.pianoMode
-      updateFromScaleLines(state.scaleLines)
-      equaveShift.value = state.equaveShift
-      degreeShift.value = state.degreeShift
-      audio.waveform = state.waveform
-      audio.attackTime = state.attackTime
-      audio.decayTime = state.decayTime
-      audio.sustainLevel = state.sustainLevel
-      audio.releaseTime = state.releaseTime
-      audio.pingPongDelayTime = state.pingPongDelayTime
-      audio.pingPongFeedback = state.pingPongFeedback
-      audio.pingPongSeparation = state.pingPongSeparation
-      audio.pingPongGain = state.pingPongGain
+      state.scaleName = decodedState.scaleName
+      state.scale.baseFrequency = decodedState.baseFrequency
+      state.baseMidiNote = decodedState.baseMidiNote
+      state.keyColors = decodedState.keyColors
+      state.isomorphicHorizontal = decodedState.isomorphicHorizontal
+      state.isomorphicVertical = decodedState.isomorphicVertical
+      state.keyboardMode = decodedState.keyboardMode
+      state.pianoMode = decodedState.pianoMode
+      state.scaleLines = decodedState.scaleLines
+      state.equaveShift = decodedState.equaveShift
+      state.degreeShift = decodedState.degreeShift
+      audio.waveform = decodedState.waveform
+      audio.attackTime = decodedState.attackTime
+      audio.decayTime = decodedState.decayTime
+      audio.sustainLevel = decodedState.sustainLevel
+      audio.releaseTime = decodedState.releaseTime
+      audio.pingPongDelayTime = decodedState.pingPongDelayTime
+      audio.pingPongFeedback = decodedState.pingPongFeedback
+      audio.pingPongSeparation = decodedState.pingPongSeparation
+      audio.pingPongGain = decodedState.pingPongGain
     } catch (error) {
       console.error(`Error parsing version ${query.get('version')} URL`, error)
     }
@@ -289,7 +162,7 @@ function tuningTableKeyOn(index: number) {
     ;(window as any).TUNING_TABLE_ROWS[index] = tuningTableRow
   }
   // Virtual keyboard state is too complex so we take the performance hit.
-  heldNotes.set(index, (heldNotes.get(index) || 0) + 1)
+  state.heldNotes.set(index, (state.heldNotes.get(index) ?? 0) + 1)
 }
 
 function tuningTableKeyOff(index: number) {
@@ -306,20 +179,12 @@ function tuningTableKeyOff(index: number) {
       ;(window as any).TUNING_TABLE_ROWS[index] = tuningTableRow
     }
   }
-  heldNotes.set(index, (heldNotes.get(index) || 1) - 1)
+  state.heldNotes.set(index, Math.max(0, (state.heldNotes.get(index) ?? 0) - 1))
 }
 
 // === MIDI input / output ===
-function getFrequency(index: number) {
-  if (index >= 0 && index < frequencies.value.length) {
-    return frequencies.value[index]
-  } else {
-    // Support more than 128 notes with some additional computational cost
-    return scale.getFrequency(index - baseMidiNote.value)
-  }
-}
 
-const midiOut = computed(() => new MidiOut(midiOutput.value as Output, midiOutputChannels.value))
+const midiOut = computed(() => new MidiOut(midi.output as Output, midi.outputChannels))
 
 function sendNoteOn(frequency: number, rawAttack: number) {
   const midiOff = midiOut.value.sendNoteOn(frequency, rawAttack)
@@ -347,15 +212,15 @@ function midiNoteOn(index: number, rawAttack?: number) {
   if (rawAttack === undefined) {
     rawAttack = 80
   }
-  let frequency = frequencies.value[index]
-  if (!midiVelocityOn.value) {
+  let frequency = state.frequencies[index]
+  if (!midi.velocityOn) {
     rawAttack = 80
   }
 
   // Store state to ensure consistent note off.
   const info = midiKeyInfo(index)
-  const whiteMode = midiWhiteMode.value
-  const indices = whiteIndices.value
+  const whiteMode = midi.whiteMode
+  const indices = state.whiteIndices
 
   if (whiteMode === 'off') {
     tuningTableKeyOn(index)
@@ -364,19 +229,19 @@ function midiNoteOn(index: number, rawAttack?: number) {
       frequency = NaN
     } else {
       info.whiteNumber += WHITE_MODE_OFFSET
-      frequency = getFrequency(info.whiteNumber)
+      frequency = state.getFrequency(info.whiteNumber)
       tuningTableKeyOn(info.whiteNumber)
     }
   } else if (whiteMode === 'blackAverage') {
     if (info.whiteNumber === undefined) {
       info.flatOf += WHITE_MODE_OFFSET
       info.sharpOf += WHITE_MODE_OFFSET
-      frequency = Math.sqrt(getFrequency(info.flatOf) * getFrequency(info.sharpOf))
+      frequency = Math.sqrt(state.getFrequency(info.flatOf) * state.getFrequency(info.sharpOf))
       tuningTableKeyOn(info.flatOf)
       tuningTableKeyOn(info.sharpOf)
     } else {
       info.whiteNumber += WHITE_MODE_OFFSET
-      frequency = getFrequency(info.whiteNumber)
+      frequency = state.getFrequency(info.whiteNumber)
       tuningTableKeyOn(info.whiteNumber)
     }
   } else if (whiteMode === 'keyColors') {
@@ -388,12 +253,12 @@ function midiNoteOn(index: number, rawAttack?: number) {
         if (index === indices[info.sharpOf + 1]) {
           frequency = NaN
         } else {
-          frequency = getFrequency(index)
+          frequency = state.getFrequency(index)
           tuningTableKeyOn(index)
         }
       } else {
         index = indices[info.whiteNumber]
-        frequency = getFrequency(index)
+        frequency = state.getFrequency(index)
         tuningTableKeyOn(index)
       }
     } else {
@@ -411,7 +276,7 @@ function midiNoteOn(index: number, rawAttack?: number) {
     if (rawRelease === undefined) {
       rawRelease = 80
     }
-    if (!midiVelocityOn.value) {
+    if (!midi.velocityOn) {
       rawRelease = 80
     }
     if (whiteMode === 'simple') {
@@ -432,39 +297,45 @@ function midiNoteOn(index: number, rawAttack?: number) {
   }
 }
 
+const midiInputChannels = reactive(new Set([1]))
+
 const midiIn = new MidiIn(midiNoteOn, midiInputChannels)
 
 const RESERVED_MESSAGES = ['noteon', 'noteoff', 'pitchbend']
-
-watch(midiInput, (newValue, oldValue) => {
-  if (oldValue !== null) {
-    midiIn.unlisten(oldValue as Input)
-  }
-  if (newValue !== null) {
-    midiIn.listen(newValue as Input)
-
-    // Pass everything else through and distrubute among the channels
-    newValue.addListener('midimessage', (event) => {
-      if (!RESERVED_MESSAGES.includes(event.message.type) && midiOutput.value !== null) {
-        if (event.message.isChannelMessage && midiInputChannels.has(event.message.channel)) {
-          const status = event.message.statusByte & 0b11110000
-          for (const channel of midiOutputChannels.value) {
-            const data = [...event.message.data]
-            data[0] = status | (channel - 1)
-            midiOutput.value.send(data)
+watch(
+  () => midi.input,
+  (newValue, oldValue) => {
+    if (oldValue !== null) {
+      midiIn.unlisten(oldValue as Input)
+    }
+    if (newValue !== null) {
+      midiIn.listen(newValue as Input)
+
+      // Pass everything else through and distrubute among the channels
+      ;(newValue as Input).addListener('midimessage', (event) => {
+        if (!RESERVED_MESSAGES.includes(event.message.type) && midi.output !== null) {
+          if (event.message.isChannelMessage) {
+            if (midiInputChannels.has(event.message.channel)) {
+              const status = event.message.statusByte & 0b11110000
+              for (const channel of midi.outputChannels) {
+                const data = [...event.message.data]
+                data[0] = status | (channel - 1)
+                midi.output.send(data)
+              }
+            }
+          } else {
+            midi.output.send(event.message)
           }
-        } else {
-          midiOutput.value.send(event.message)
         }
-      }
-    })
+      })
+    }
   }
-})
+)
 
 // === Virtual and typing keyboard ===
 function keyboardNoteOn(index: number) {
   tuningTableKeyOn(index)
-  const noteOff = sendNoteOn(getFrequency(index), 80)
+  const noteOff = sendNoteOn(state.getFrequency(index), 80)
   function keyOff() {
     tuningTableKeyOff(index)
     return noteOff(80)
@@ -480,7 +351,7 @@ function windowKeydownOrUp(event: KeyboardEvent | MouseEvent) {
   const target = event.target
   // Keep typing activated while adjusting sliders
   if (target instanceof HTMLInputElement && ['range', 'radio', 'checkbox'].includes(target.type)) {
-    typingActive.value = true
+    state.typingActive = true
     return
   }
   // Disable typing for other types of input elements
@@ -489,16 +360,16 @@ function windowKeydownOrUp(event: KeyboardEvent | MouseEvent) {
     target instanceof HTMLInputElement ||
     target instanceof HTMLSelectElement
   ) {
-    typingActive.value = false
+    state.typingActive = false
   } else {
-    typingActive.value = true
+    state.typingActive = true
   }
 }
 
 // === Handle special keys ===
 function windowKeydown(event: KeyboardEvent) {
   // Currently editing the scale, bail out
-  if (!typingActive.value) {
+  if (!state.typingActive) {
     return
   }
 
@@ -509,28 +380,28 @@ function windowKeydown(event: KeyboardEvent) {
   }
 
   // The key left of Digit1 releases sustained keys
-  if (event.code === deactivationCode.value) {
+  if (event.code === state.deactivationCode) {
     typingKeyboard.deactivate()
     return
   }
 
   // "Octave" keys
-  if (event.code === equaveUpCode.value) {
-    equaveShift.value++
+  if (event.code === state.equaveUpCode) {
+    state.equaveShift++
     return
   }
-  if (event.code === equaveDownCode.value) {
-    equaveShift.value--
+  if (event.code === state.equaveDownCode) {
+    state.equaveShift--
     return
   }
 
   // "Transpose" keys
-  if (event.code === degreeUpCode.value) {
-    degreeShift.value++
+  if (event.code === state.degreeUpCode) {
+    state.degreeShift++
     return
   }
-  if (event.code === degreeDownCode.value) {
-    degreeShift.value--
+  if (event.code === state.degreeDownCode) {
+    state.degreeShift--
     return
   }
 
@@ -560,13 +431,13 @@ function typingKeydown(event: CoordinateKeyboardEvent) {
     return emptyKeyup
   }
 
-  let index = baseMidiNote.value + scale.size * equaveShift.value
+  let index = state.baseMidiNote + state.scale.size * state.equaveShift
 
-  if (keyboardMode.value === 'isomorphic') {
-    index += degreeShift.value + x * isomorphicHorizontal.value + (2 - y) * isomorphicVertical.value
+  if (state.keyboardMode === 'isomorphic') {
+    index += state.degreeShift + x * state.isomorphicHorizontal + (2 - y) * state.isomorphicVertical
   } else {
-    if (keyboardMapping.value.has(event.code)) {
-      index = keyboardMapping.value.get(event.code)!
+    if (state.keyboardMapping.has(event.code)) {
+      index = state.keyboardMapping.get(event.code)!
     } else {
       // No user mapping for the key, bail out
       return emptyKeyup
@@ -599,20 +470,20 @@ onMounted(() => {
     try {
       const scaleWorkshopOneData = new ScaleWorkshopOneData()
 
-      scaleName.value = scaleWorkshopOneData.name
-      scale.baseFrequency = scaleWorkshopOneData.freq
-      baseMidiNote.value = scaleWorkshopOneData.midi
-      isomorphicHorizontal.value = scaleWorkshopOneData.horizontal
-      isomorphicVertical.value = scaleWorkshopOneData.vertical
+      state.scaleName = scaleWorkshopOneData.name
+      state.scale.baseFrequency = scaleWorkshopOneData.freq
+      state.baseMidiNote = scaleWorkshopOneData.midi
+      state.isomorphicHorizontal = scaleWorkshopOneData.horizontal
+      state.isomorphicVertical = scaleWorkshopOneData.vertical
       if (scaleWorkshopOneData.colors !== undefined) {
-        keyColors.value = scaleWorkshopOneData.colors.split(' ')
+        state.keyColors = scaleWorkshopOneData.colors.split(' ')
       }
 
       if (scaleWorkshopOneData.data !== undefined) {
         // Check that the scale is valid by attempting a parse
         scaleWorkshopOneData.parseTuningData()
         // Store raw text lines
-        updateFromScaleLines(scaleWorkshopOneData.data.split(NEWLINE_TEST))
+        state.scaleLines = scaleWorkshopOneData.data.split(NEWLINE_TEST)
       }
 
       audio.waveform = scaleWorkshopOneData.waveform || 'semisine'
@@ -624,56 +495,6 @@ onMounted(() => {
       console.error('Error parsing version 1 URL', error)
     }
   }
-
-  // Fetch user preferences
-  const storage = window.localStorage
-  if ('newline' in storage) {
-    newline.value = storage.getItem('newline')!
-  }
-  if ('colorScheme' in storage) {
-    const scheme = storage.getItem('colorScheme')
-    if (scheme === 'light' || scheme === 'dark') {
-      colorScheme.value = scheme
-    }
-  } else {
-    // Infer based on a media query.
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      colorScheme.value = 'dark'
-    } else {
-      colorScheme.value = 'light'
-    }
-  }
-  if ('centsFractionDigits' in storage) {
-    centsFractionDigits.value = parseInt(storage.getItem('centsFractionDigits')!)
-  }
-  if ('decimalFractionDigits' in storage) {
-    decimalFractionDigits.value = parseInt(storage.getItem('decimalFractionDigits')!)
-  }
-  if ('showVirtualQwerty' in storage) {
-    showVirtualQwerty.value = storage.getItem('showVirtualQwerty') === 'true'
-  }
-  if ('midiOctaveOffset' in storage) {
-    midiOctaveOffset.value = parseInt(storage.getItem('midiOctaveOffset')!)
-  }
-  if ('intervalMatrixIndexing' in storage) {
-    intervalMatrixIndexing.value = parseInt(storage.getItem('intervalMatrixIndexing') ?? '0', 10)
-  }
-  // Fetch special key map
-  if ('deactivationCode' in storage) {
-    deactivationCode.value = storage.getItem('deactivationCode')!
-  }
-  if ('equaveUpCode' in storage) {
-    equaveUpCode.value = storage.getItem('equaveUpCode')!
-  }
-  if ('equaveDownCode' in storage) {
-    equaveDownCode.value = storage.getItem('equaveDownCode')!
-  }
-  if ('degreeUpCode' in storage) {
-    degreeUpCode.value = storage.getItem('degreeUpCode')!
-  }
-  if ('degreeDownCode' in storage) {
-    degreeDownCode.value = storage.getItem('degreeDownCode')!
-  }
 })
 
 onUnmounted(() => {
@@ -684,57 +505,25 @@ onUnmounted(() => {
   window.removeEventListener('mousedown', windowKeydownOrUp)
   window.removeEventListener('touchstart', audio.initialize)
   typingKeyboard.removeEventListener(typingKeydown)
-  if (midiInput.value !== null) {
-    midiInput.value.removeListener()
+  if (midi.input !== null) {
+    midi.input.removeListener()
   }
   audio.unintialize()
 })
 
-function updateMidiInputChannels(newValue: Set<number>) {
-  midiInputChannels.clear()
-  newValue.forEach((channel) => midiInputChannels.add(channel))
-}
-
 function panic() {
   console.log('Firing global key off.')
   typingKeyboard.deactivate()
   midiIn.deactivate()
-  if (midiOutput.value !== null) {
-    midiOutput.value.sendAllNotesOff({
-      channels: [...midiOutputChannels.value]
+  if (midi.output !== null) {
+    midi.output.sendAllNotesOff({
+      channels: [...midi.outputChannels]
     })
   }
   if (audio.synth !== null) {
     audio.synth.allNotesOff()
   }
 }
-
-watch(newline, (newValue) => window.localStorage.setItem('newline', newValue))
-watch(colorScheme, (newValue) => {
-  window.localStorage.setItem('colorScheme', newValue)
-  document.documentElement.setAttribute('data-theme', newValue)
-})
-watch(centsFractionDigits, (newValue) =>
-  window.localStorage.setItem('centsFractionDigits', newValue.toString())
-)
-watch(decimalFractionDigits, (newValue) =>
-  window.localStorage.setItem('decimalFractionDigits', newValue.toString())
-)
-watch(showVirtualQwerty, (newValue) =>
-  window.localStorage.setItem('showVirtualQwerty', newValue.toString())
-)
-watch(midiOctaveOffset, (newValue) =>
-  window.localStorage.setItem('midiOctaveOffset', newValue.toString())
-)
-watch(intervalMatrixIndexing, (newValue) =>
-  window.localStorage.setItem('intervalMatrixIndexing', newValue.toString())
-)
-// Store keymaps
-watch(deactivationCode, (newValue) => window.localStorage.setItem('deactivationCode', newValue))
-watch(equaveUpCode, (newValue) => window.localStorage.setItem('equaveUpCode', newValue))
-watch(equaveDownCode, (newValue) => window.localStorage.setItem('equaveDownCode', newValue))
-watch(degreeUpCode, (newValue) => window.localStorage.setItem('degreeUpCode', newValue))
-watch(degreeDownCode, (newValue) => window.localStorage.setItem('degreeDownCode', newValue))
 </script>
 
 <template>
@@ -747,7 +536,7 @@ watch(degreeDownCode, (newValue) => window.localStorage.setItem('degreeDownCode'
       <li><RouterLink to="/analysis">Analysis</RouterLink></li>
       <li><RouterLink to="/lattice">Lattice</RouterLink></li>
       <li><RouterLink to="/vk">Virtual Keyboard</RouterLink></li>
-      <li v-if="showVirtualQwerty">
+      <li v-if="state.showVirtualQwerty">
         <RouterLink to="/qwerty">Virtual QWERTY</RouterLink>
       </li>
       <li><RouterLink to="/synth">Synth</RouterLink></li>
@@ -756,7 +545,7 @@ watch(degreeDownCode, (newValue) => window.localStorage.setItem('degreeDownCode'
     </ul>
     <div id="app-tray" class="hidden-sm">
       <ul>
-        <template v-if="typingActive">
+        <template v-if="state.typingActive">
           <li title="Type on your computer keyboard to hear the synth">
             <span class="typing-info active">Key</span>
           </li>
@@ -770,70 +559,9 @@ watch(degreeDownCode, (newValue) => window.localStorage.setItem('degreeDownCode'
     </div>
   </nav>
   <RouterView
-    :scaleName="scaleName"
-    :scaleLines="scaleLines"
-    :baseMidiNote="baseMidiNote"
-    :keyColors="keyColors"
-    :scale="scale"
-    :frequencies="frequencies"
-    :keyboardMode="keyboardMode"
-    :pianoMode="pianoMode"
-    :isomorphicHorizontal="isomorphicHorizontal"
-    :isomorphicVertical="isomorphicVertical"
-    :equaveShift="equaveShift"
-    :degreeShift="degreeShift"
-    :midiInput="midiInput"
-    :midiOutput="midiOutput"
     :noteOn="keyboardNoteOn"
-    :heldNotes="heldNotes"
     :midiInputChannels="midiInputChannels"
-    :midiOutputChannels="midiOutputChannels"
-    :newline="newline"
-    :colorScheme="colorScheme"
-    :centsFractionDigits="centsFractionDigits"
-    :decimalFractionDigits="decimalFractionDigits"
-    :midiVelocityOn="midiVelocityOn"
-    :midiWhiteMode="midiWhiteMode"
-    :deactivationCode="deactivationCode"
-    :equaveUpCode="equaveUpCode"
-    :equaveDownCode="equaveDownCode"
-    :degreeUpCode="degreeUpCode"
-    :degreeDownCode="degreeDownCode"
     :typingKeyboard="typingKeyboard"
-    :keyboardMapping="keyboardMapping"
-    :showVirtualQwerty="showVirtualQwerty"
-    :midiOctaveOffset="midiOctaveOffset"
-    :intervalMatrixIndexing="intervalMatrixIndexing"
-    @update:scaleName="scaleName = $event"
-    @update:scaleLines="updateFromScaleLines"
-    @update:scale="updateFromScale"
-    @update:baseMidiNote="baseMidiNote = $event"
-    @update:baseFrequency="scale.baseFrequency = $event"
-    @update:keyColors="keyColors = $event"
-    @update:isomorphicVertical="isomorphicVertical = $event"
-    @update:isomorphicHorizontal="isomorphicHorizontal = $event"
-    @update:keyboardMode="keyboardMode = $event"
-    @update:pianoMode="pianoMode = $event"
-    @update:equaveShift="equaveShift = $event"
-    @update:degreeShift="degreeShift = $event"
-    @update:midiInput="midiInput = $event"
-    @update:midiOutput="midiOutput = $event"
-    @update:midiInputChannels="updateMidiInputChannels"
-    @update:midiOutputChannels="midiOutputChannels = $event"
-    @update:midiVelocityOn="midiVelocityOn = $event"
-    @update:midiWhiteMode="midiWhiteMode = $event"
-    @update:newline="newline = $event"
-    @update:colorScheme="colorScheme = $event"
-    @update:centsFractionDigits="centsFractionDigits = $event"
-    @update:decimalFractionDigits="decimalFractionDigits = $event"
-    @update:showVirtualQwerty="showVirtualQwerty = $event"
-    @update:midiOctaveOffset="midiOctaveOffset = $event"
-    @update:intervalMatrixIndexing="intervalMatrixIndexing = $event"
-    @update:deactivationCode="deactivationCode = $event"
-    @update:equaveUpCode="equaveUpCode = $event"
-    @update:equaveDownCode="equaveDownCode = $event"
-    @update:degreeUpCode="degreeUpCode = $event"
-    @update:degreeDownCode="degreeDownCode = $event"
     @panic="panic"
   />
 </template>
diff --git a/src/components/ScaleBuilder.vue b/src/components/ScaleBuilder.vue
index b520b8d5..ccde2f6c 100644
--- a/src/components/ScaleBuilder.vue
+++ b/src/components/ScaleBuilder.vue
@@ -11,6 +11,7 @@ import { presets, presetsByGroup } from '@/presets'
 import { importFile, type ImporterKey } from '@/importers'
 import { mtof } from 'xen-dev-utils'
 import type { Scale } from 'scale-workshop-core'
+import { useStateStore } from '@/stores/state'
 
 // Export
 const KorgExportModal = defineAsyncComponent(
@@ -93,64 +94,40 @@ const TemperModal = defineAsyncComponent(
   () => import('@/components/modals/modification/TemperScale.vue')
 )
 
-const props = defineProps<{
-  scaleName: string
-  scaleLines: string[]
-  baseMidiNote: number
-  keyColors: string[]
-
-  scale: Scale
-  frequencies: number[]
-
-  centsFractionDigits: number
-  decimalFractionDigits: number
-  newline: string
-
-  midiOctaveOffset: number
-}>()
-
-const emit = defineEmits([
-  'update:scaleName',
-  'update:scaleLines',
-  'update:scale',
-  'update:baseFrequency',
-  'update:baseMidiNote',
-  'update:keyColors'
-])
+const state = useStateStore()
 
 const joinedLines = computed({
   get() {
-    return props.scaleLines.join('\n')
+    return state.scaleLines.join('\n')
   },
-  set: debounce((newValue: string) => emit('update:scaleLines', newValue.split('\n')))
+  set: debounce((newValue: string) => {
+    state.scaleLines = newValue.split('\n')
+  })
 })
 
 const joinedKeyColors = computed({
   get() {
-    return props.keyColors.join(' ')
+    return state.keyColors.join(' ')
   },
-  set: debounce((newValue: string) => emit('update:keyColors', newValue.split(' ')))
-})
-
-const scaleName = computed({
-  get: () => props.scaleName,
-  set: (newValue: string) => emit('update:scaleName', newValue)
+  set: debounce((newValue: string) => {
+    state.keyColors = newValue.split(' ')
+  })
 })
 
 const baseFrequency = computed({
-  get: () => props.scale.baseFrequency,
+  get: () => state.scale.baseFrequency,
   set: debounce((newValue: number) => {
     if (typeof newValue === 'number' && !isNaN(newValue) && isFinite(newValue)) {
-      emit('update:baseFrequency', newValue)
+      state.scale.baseFrequency = newValue
     }
   })
 })
 
 const baseMidiNote = computed({
-  get: () => props.baseMidiNote,
+  get: () => state.baseMidiNote,
   set: debounce((newValue: number) => {
     if (typeof newValue === 'number' && !isNaN(newValue)) {
-      emit('update:baseMidiNote', newValue)
+      state.baseMidiNote = newValue
     }
   })
 })
@@ -158,7 +135,7 @@ const baseMidiNote = computed({
 const midiNoteNumber = ref<HTMLInputElement | null>(null)
 
 function autoFrequency() {
-  let baseMidiNote = props.baseMidiNote
+  let baseMidiNote = state.baseMidiNote
   if (midiNoteNumber.value !== null) {
     // Circumvent debouncing for this simple click
     baseMidiNote = parseInt(midiNoteNumber.value.value)
@@ -167,20 +144,20 @@ function autoFrequency() {
     }
   }
 
-  emit('update:baseFrequency', mtof(baseMidiNote))
+  state.scale.baseFrequency = mtof(baseMidiNote)
 }
 
 function doExport(exporter: ExporterKey) {
   const params = {
-    newline: props.newline,
-    name: props.scaleName,
+    newline: state.newline,
+    name: state.scaleName,
     scaleUrl: window.location.href,
-    scale: props.scale,
-    filename: sanitizeFilename(props.scaleName),
-    baseMidiNote: props.baseMidiNote,
-    midiOctaveOffset: props.midiOctaveOffset,
-    description: props.scaleName,
-    lines: props.scaleLines,
+    scale: state.scale,
+    filename: sanitizeFilename(state.scaleName),
+    baseMidiNote: state.baseMidiNote,
+    midiOctaveOffset: state.midiOctaveOffset,
+    description: state.scaleName,
+    lines: state.scaleLines,
     appTitle: APP_TITLE,
     date: new Date()
   }
@@ -199,11 +176,11 @@ const presetSelect = ref<HTMLSelectElement | null>(null)
 const showPresetModal = ref(false)
 function selectPreset() {
   const preset = presets[presetSelect.value!.value]
-  emit('update:scaleName', preset.name)
-  emit('update:scaleLines', preset.lines)
-  emit('update:baseFrequency', preset.baseFrequency)
-  emit('update:baseMidiNote', preset.baseMidiNote)
-  emit('update:keyColors', preset.keyColors)
+  state.scaleName = preset.name
+  state.scaleLines = preset.lines
+  state.scale.baseFrequency = preset.baseFrequency
+  state.baseMidiNote = preset.baseMidiNote
+  state.keyColors = preset.keyColors
 }
 
 const showEqualTemperamentModal = ref(false)
@@ -241,15 +218,15 @@ const exportTextClipboard = ref("Copy this scale's unique URL to clipboard")
 
 async function doImport(importerKey: ImporterKey, event: Event) {
   const result = await importFile(importerKey, event)
-  emit('update:scaleLines', result.scale.toStrings())
+  state.scaleLines = result.scale.toStrings()
   if (importerKey != 'scalascl') {
-    emit('update:baseFrequency', result.scale.baseFrequency)
+    state.scale.baseFrequency = result.scale.baseFrequency
   }
   if (result.name !== undefined) {
-    emit('update:scaleName', result.name)
+    state.scaleName = result.name
   }
   if (result.baseMidiNote !== undefined) {
-    emit('update:baseMidiNote', result.baseMidiNote)
+    state.baseMidiNote = result.baseMidiNote
   }
 }
 
@@ -269,17 +246,17 @@ function clearScale() {
 }
 
 function sortAscending() {
-  emit('update:scale', props.scale.sorted())
+  state.scale = state.scale.sorted()
   scaleDataArea.value!.focus()
 }
 
 function clickReduce() {
-  emit('update:scale', props.scale.reduce())
+  state.scale = state.scale.reduce()
   scaleDataArea.value!.focus()
 }
 
 function clickInvert() {
-  emit('update:scale', props.scale.invert())
+  state.scale = state.scale.invert()
   scaleDataArea.value!.focus()
 }
 
@@ -294,7 +271,7 @@ function clickShareUrl() {
 }
 
 function updateScaleAndHideModals(scale: Scale) {
-  emit('update:scale', scale)
+  state.scale = scale
   showRankTwoModal.value = false
   showEqualTemperamentModal.value = false
   showHarmonicSeriesModal.value = false
@@ -332,7 +309,7 @@ function confirmPreset() {
         id="scale-name"
         rows="1"
         placeholder="Untitled scale"
-        v-model="scaleName"
+        v-model="state.scaleName"
       ></textarea>
 
       <ul class="btn-group">
@@ -395,7 +372,7 @@ function confirmPreset() {
         </div>
       </div>
 
-      <ScaleRule :scale="props.scale" />
+      <ScaleRule :scale="state.scale" />
 
       <div class="control-group">
         <h2>Tuning</h2>
@@ -424,7 +401,7 @@ function confirmPreset() {
             step="1"
             v-model="baseMidiNote"
           />
-          <span>{{ midiNoteNumberToName(baseMidiNote, props.midiOctaveOffset) }}</span>
+          <span>{{ midiNoteNumberToName(baseMidiNote, state.midiOctaveOffset) }}</span>
         </div>
 
         <!-- This control is for the 3rd field that is found at the top of kbm files -->
@@ -451,16 +428,16 @@ function confirmPreset() {
           <textarea v-model="joinedKeyColors"></textarea>
         </div>
         <div class="control">
-          <button @click="$emit('update:keyColors', autoKeyColors(props.scale.size))">Auto</button>
+          <button @click="state.keyColors = autoKeyColors(state.scale.size)">Auto</button>
         </div>
       </div>
     </div>
     <TuningTable
-      :scale="scale"
-      :frequencies="frequencies"
-      :lines="props.scaleLines"
-      :baseMidiNote="props.baseMidiNote"
-      :keyColors="props.keyColors"
+      :scale="state.scale"
+      :frequencies="state.frequencies"
+      :lines="state.scaleLines"
+      :baseMidiNote="state.baseMidiNote"
+      :keyColors="state.keyColors"
     />
     <div class="column exporters">
       <h2>Export current settings</h2>
@@ -559,134 +536,135 @@ function confirmPreset() {
       v-if="showKorgExportModal"
       @confirm="showKorgExportModal = false"
       @cancel="showKorgExportModal = false"
-      :newline="props.newline"
-      :scaleName="scaleName"
+      :newline="state.newline"
+      :scaleName="state.scaleName"
       :baseMidiNote="baseMidiNote"
-      :midiOctaveOffset="midiOctaveOffset"
-      :scale="scale"
+      :midiOctaveOffset="state.midiOctaveOffset"
+      :scale="state.scale"
     />
 
     <ReaperExportModal
       v-if="showReaperExportModal"
       @confirm="showReaperExportModal = false"
       @cancel="showReaperExportModal = false"
-      :newline="props.newline"
-      :scaleName="scaleName"
+      :newline="state.newline"
+      :scaleName="state.scaleName"
       :baseMidiNote="baseMidiNote"
-      :midiOctaveOffset="midiOctaveOffset"
-      :scale="scale"
+      :midiOctaveOffset="state.midiOctaveOffset"
+      :scale="state.scale"
     />
 
     <MtsSysexExportModal
       v-if="showMtsSysexExportModal"
       @confirm="showMtsSysexExportModal = false"
       @cancel="showMtsSysexExportModal = false"
-      :newline="props.newline"
-      :scaleName="scaleName"
+      :newline="state.newline"
+      :scaleName="state.scaleName"
       :baseMidiNote="baseMidiNote"
-      :midiOctaveOffset="midiOctaveOffset"
-      :scale="scale"
+      :midiOctaveOffset="state.midiOctaveOffset"
+      :scale="state.scale"
     />
 
     <RankTwoModal
       v-if="showRankTwoModal"
-      :centsFractionDigits="centsFractionDigits"
-      :scale="scale"
-      @update:scaleName="emit('update:scaleName', $event)"
+      :centsFractionDigits="state.centsFractionDigits"
+      :scale="state.scale"
+      @update:scaleName="state.scaleName = $event"
       @update:scale="updateScaleAndHideModals"
-      @update:keyColors="emit('update:keyColors', $event)"
+      @update:keyColors="state.keyColors = $event"
       @cancel="showRankTwoModal = false"
     />
 
     <HistoricalModal
       v-if="showHistoricalModal"
-      :centsFractionDigits="centsFractionDigits"
-      @update:scaleName="emit('update:scaleName', $event)"
+      :centsFractionDigits="state.centsFractionDigits"
+      :accidentalStyle="state.accidentalPreference"
+      @update:scaleName="state.scaleName = $event"
       @update:scale="updateScaleAndHideModals"
-      @update:baseFrequency="emit('update:baseFrequency', $event)"
-      @update:baseMidiNote="emit('update:baseMidiNote', $event)"
-      @update:keyColors="emit('update:keyColors', $event)"
+      @update:baseFrequency="state.scale.baseFrequency = $event"
+      @update:baseMidiNote="state.baseMidiNote = $event"
+      @update:keyColors="state.keyColors = $event"
       @cancel="showHistoricalModal = false"
     />
 
     <ShareUrlModal
       ref="shareUrlModal"
       v-if="showShareUrlModal"
-      :scaleName="scaleName"
-      :newline="newline"
+      :scaleName="state.scaleName"
+      :newline="state.newline"
       @confirm="showShareUrlModal = false"
       @cancel="showShareUrlModal = false"
     />
 
     <EqualTemperamentModal
       v-if="showEqualTemperamentModal"
-      :centsFractionDigits="centsFractionDigits"
-      :decimalFractionDigits="decimalFractionDigits"
-      @update:scaleName="emit('update:scaleName', $event)"
+      :centsFractionDigits="state.centsFractionDigits"
+      :decimalFractionDigits="state.decimalFractionDigits"
+      @update:scaleName="state.scaleName = $event"
       @update:scale="updateScaleAndHideModals"
       @cancel="showEqualTemperamentModal = false"
     />
 
     <HarmonicSeriesModal
       v-if="showHarmonicSeriesModal"
-      @update:scaleName="emit('update:scaleName', $event)"
+      @update:scaleName="state.scaleName = $event"
       @update:scale="updateScaleAndHideModals"
       @cancel="showHarmonicSeriesModal = false"
     />
 
     <MosModal
       v-if="showMosModal"
-      @update:scaleName="emit('update:scaleName', $event)"
+      @update:scaleName="state.scaleName = $event"
       @update:scale="updateScaleAndHideModals"
-      @update:keyColors="emit('update:keyColors', $event)"
+      @update:keyColors="state.keyColors = $event"
       @cancel="showMosModal = false"
     />
 
     <SubharmonicSeriesModal
       v-if="showSubharmonicSeriesModal"
-      @update:scaleName="emit('update:scaleName', $event)"
+      @update:scaleName="state.scaleName = $event"
       @update:scale="updateScaleAndHideModals"
       @cancel="showSubharmonicSeriesModal = false"
     />
 
     <EnumerateChordModal
       v-if="showEnumerateChordModal"
-      @update:scaleName="emit('update:scaleName', $event)"
+      @update:scaleName="state.scaleName = $event"
       @update:scale="updateScaleAndHideModals"
       @cancel="showEnumerateChordModal = false"
     />
 
     <CpsModal
       v-if="showCpsModal"
-      @update:scaleName="emit('update:scaleName', $event)"
+      @update:scaleName="state.scaleName = $event"
       @update:scale="updateScaleAndHideModals"
       @cancel="showCpsModal = false"
     />
 
     <EulerGenusModal
       v-if="showEulerGenusModal"
-      @update:scaleName="emit('update:scaleName', $event)"
+      @update:scaleName="state.scaleName = $event"
       @update:scale="updateScaleAndHideModals"
       @cancel="showEulerGenusModal = false"
     />
 
     <DwarfModal
       v-if="showDwarfModal"
-      @update:scaleName="emit('update:scaleName', $event)"
+      @update:scaleName="state.scaleName = $event"
       @update:scale="updateScaleAndHideModals"
       @cancel="showDwarfModal = false"
     />
 
     <CrossPolytopeModal
       v-if="showCrossPolytopeModal"
-      @update:scaleName="emit('update:scaleName', $event)"
+      @update:scaleName="state.scaleName = $event"
       @update:scale="updateScaleAndHideModals"
       @cancel="showCrossPolytopeModal = false"
     />
     <LatticeModal
       v-if="showLatticeModal"
-      :centsFractionDigits="centsFractionDigits"
-      @update:scaleName="emit('update:scaleName', $event)"
+      :centsFractionDigits="state.centsFractionDigits"
+      @update:scaleName="state.scaleName = $event"
       @update:scale="updateScaleAndHideModals"
       @cancel="showLatticeModal = false"
     />
@@ -714,7 +692,7 @@ function confirmPreset() {
       v-if="showRotateModal"
       @update:scale="updateScaleAndHideModals"
       @cancel="showRotateModal = false"
-      :scale="scale"
+      :scale="state.scale"
     />
 
     <SubsetModal
@@ -722,77 +700,77 @@ function confirmPreset() {
       v-if="showSubsetModal"
       @update:scale="updateScaleAndHideModals"
       @cancel="showSubsetModal = false"
-      :scale="scale"
+      :scale="state.scale"
     />
 
     <StretchModal
       v-if="showStretchModal"
       @update:scale="updateScaleAndHideModals"
       @cancel="showStretchModal = false"
-      :scale="scale"
-      :centsFractionDigits="centsFractionDigits"
-      :decimalFractionDigits="decimalFractionDigits"
+      :scale="state.scale"
+      :centsFractionDigits="state.centsFractionDigits"
+      :decimalFractionDigits="state.decimalFractionDigits"
     />
 
     <RandomVarianceModal
       v-if="showRandomVarianceModal"
       @update:scale="updateScaleAndHideModals"
       @cancel="showRandomVarianceModal = false"
-      :scale="scale"
-      :centsFractionDigits="centsFractionDigits"
-      :decimalFractionDigits="decimalFractionDigits"
+      :scale="state.scale"
+      :centsFractionDigits="state.centsFractionDigits"
+      :decimalFractionDigits="state.decimalFractionDigits"
     />
 
     <ApproximateByRatiosModal
       v-if="showApproximateByRatiosModal"
-      @update:scale="emit('update:scale', $event)"
+      @update:scale="state.scale = $event"
       @cancel="showApproximateByRatiosModal = false"
-      :scale="scale"
+      :scale="state.scale"
     />
 
     <ApproximateByHarmonicsModal
       v-if="showApproximateByHarmonicsModal"
       @update:scale="updateScaleAndHideModals"
       @cancel="showApproximateByHarmonicsModal = false"
-      :scale="scale"
+      :scale="state.scale"
     />
 
     <ApproximateBySubharmonicsModal
       v-if="showApproximateBySubharmonicsModal"
       @update:scale="updateScaleAndHideModals"
       @cancel="showApproximateBySubharmonicsModal = false"
-      :scale="scale"
+      :scale="state.scale"
     />
 
     <EqualizeModal
       v-if="showEqualizeModal"
       @update:scale="updateScaleAndHideModals"
       @cancel="showEqualizeModal = false"
-      :scale="scale"
+      :scale="state.scale"
     />
 
     <TemperModal
       v-if="showTemperModal"
       @update:scale="updateScaleAndHideModals"
       @cancel="showTemperModal = false"
-      :scale="scale"
-      :centsFractionDigits="centsFractionDigits"
+      :scale="state.scale"
+      :centsFractionDigits="state.centsFractionDigits"
     />
 
     <OffsetModal
       v-if="showOffsetModal"
       @update:scale="updateScaleAndHideModals"
       @cancel="showOffsetModal = false"
-      :scale="scale"
+      :scale="state.scale"
     />
 
     <ConvertModal
       v-if="showConvertModal"
       @update:scale="updateScaleAndHideModals"
       @cancel="showConvertModal = false"
-      :scale="scale"
-      :centsFractionDigits="centsFractionDigits"
-      :decimalFractionDigits="decimalFractionDigits"
+      :scale="state.scale"
+      :centsFractionDigits="state.centsFractionDigits"
+      :decimalFractionDigits="state.decimalFractionDigits"
     />
   </Teleport>
 </template>
diff --git a/src/components/modals/generation/HistoricalScale.vue b/src/components/modals/generation/HistoricalScale.vue
index 05bc5fbe..73aded97 100644
--- a/src/components/modals/generation/HistoricalScale.vue
+++ b/src/components/modals/generation/HistoricalScale.vue
@@ -10,6 +10,7 @@ import { spineLabel as spineLabel_, type AccidentalStyle } from '@/utils'
 
 const props = defineProps<{
   centsFractionDigits: number
+  accidentalStyle: AccidentalStyle
 }>()
 
 const emit = defineEmits([
@@ -53,11 +54,8 @@ const SYNTONIC = new Interval(
   'ratio'
 )
 
-const ACCIDENTAL_STYLE =
-  (localStorage.getItem('accidentalPreference') as AccidentalStyle) ?? 'double'
-
 function spineLabel(up: number) {
-  return spineLabel_(up, ACCIDENTAL_STYLE)
+  return spineLabel_(up, props.accidentalStyle)
 }
 
 const method = ref<'simple' | 'target' | 'well temperament'>('simple')
diff --git a/src/stores/midi.ts b/src/stores/midi.ts
new file mode 100644
index 00000000..10dae0e4
--- /dev/null
+++ b/src/stores/midi.ts
@@ -0,0 +1,22 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { Input, Output } from 'webmidi'
+
+export const useMidiStore = defineStore('midi', () => {
+  const input = ref<Input | null>(null)
+  const output = ref<Output | null>(null)
+  // Channel 10 is reserved for percussion
+  const outputChannels = ref(new Set([1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 15, 16]))
+  const velocityOn = ref(true)
+
+  const whiteMode = ref<'off' | 'simple' | 'blackAverage' | 'keyColors'>('off')
+
+  return {
+    // State
+    input,
+    output,
+    outputChannels,
+    velocityOn,
+    whiteMode
+  }
+})
diff --git a/src/stores/state.ts b/src/stores/state.ts
new file mode 100644
index 00000000..1d791aec
--- /dev/null
+++ b/src/stores/state.ts
@@ -0,0 +1,236 @@
+import { computed, reactive, ref, watch } from 'vue'
+import { defineStore } from 'pinia'
+import {
+  Interval,
+  Scale,
+  parseLine,
+  type IntervalOptions,
+  reverseParseScale
+} from 'scale-workshop-core'
+import { DEFAULT_NUMBER_OF_COMPONENTS, NUMBER_OF_NOTES, UNIX_NEWLINE } from '@/constants'
+import { computeWhiteIndices } from '@/midi'
+import { mapWhiteAsdfBlackQwerty, mapWhiteQweZxcBlack123Asd } from '@/keyboard-mapping'
+import { arraysEqual } from 'xen-dev-utils'
+import type { AccidentalStyle } from '@/utils'
+
+export const useStateStore = defineStore('state', () => {
+  // Nonpersistent state of the application
+  const scaleName = ref('')
+  const scaleLines = ref<string[]>([])
+  const scale = reactive(Scale.fromIntervalArray([parseLine('1/1', DEFAULT_NUMBER_OF_COMPONENTS)]))
+  const baseMidiNote = ref(69)
+  const keyColors = ref([
+    'white',
+    'black',
+    'white',
+    'white',
+    'black',
+    'white',
+    'black',
+    'white',
+    'white',
+    'black',
+    'white',
+    'black'
+  ])
+  const isomorphicVertical = ref(5)
+  const isomorphicHorizontal = ref(1)
+  // Keyboard mode affects both physical qwerty and virtual keyboards
+  const keyboardMode = ref<'isomorphic' | 'piano'>('isomorphic')
+  // Physical layout mimics a piano layout in one or two layers
+  const pianoMode = ref<'Asdf' | 'QweZxc0' | 'QweZxc1'>('Asdf')
+  const equaveShift = ref(0)
+  const degreeShift = ref(0)
+  const heldNotes = reactive(new Map<number, number>())
+  const typingActive = ref(true)
+
+  // These user preferences are fetched from local storage.
+  const storage = window.localStorage
+  const newline = ref(storage.getItem('newline') ?? UNIX_NEWLINE)
+
+  const storedScheme = storage.getItem('colorScheme')
+  const mediaScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  const colorScheme = ref<'light' | 'dark'>(
+    (storedScheme ?? mediaScheme) === 'dark' ? 'dark' : 'light'
+  )
+  const centsFractionDigits = ref(parseInt(storage.getItem('centsFractionDigits') ?? '3', 10))
+  const decimalFractionDigits = ref(parseInt(storage.getItem('decimalFractionDigits') ?? '5', 10))
+  const showVirtualQwerty = ref(storage.getItem('showVirtualQwerty') === 'true')
+  const midiOctaveOffset = ref(parseInt(storage.getItem('midiOctaveOffset') ?? '-1', 10))
+  const intervalMatrixIndexing = ref(parseInt(storage.getItem('intervalMatrixIndexing') ?? '0', 10))
+  const accidentalPreference = ref<AccidentalStyle>(
+    (localStorage.getItem('accidentalPreference') as AccidentalStyle) ?? 'double'
+  )
+
+  // Special keyboard codes also from local storage.
+  const deactivationCode = ref(storage.getItem('deactivationCode') ?? 'Backquote')
+  const equaveUpCode = ref(storage.getItem('equaveUpCode') ?? 'NumpadMultiply')
+  const equaveDownCode = ref(storage.getItem('equaveDownCode') ?? 'NumpadDivide')
+  const degreeUpCode = ref(storage.getItem('degreeUpCode') ?? 'NumpadAdd')
+  const degreeDownCode = ref(storage.getItem('degreeDownCode') ?? 'NumpadSubtract')
+
+  // === Computed state ===
+  const frequencies = computed(() =>
+    scale.getFrequencyRange(-baseMidiNote.value, NUMBER_OF_NOTES - baseMidiNote.value)
+  )
+
+  const baseIndex = computed(
+    () => baseMidiNote.value + equaveShift.value * scale.size + degreeShift.value
+  )
+
+  // For midi mapping
+  const whiteIndices = computed(() => computeWhiteIndices(baseMidiNote.value, keyColors.value))
+
+  const keyboardMapping = computed<Map<string, number>>(() => {
+    const size = scale.size
+    const baseIndex = baseMidiNote.value + equaveShift.value * size + degreeShift.value
+    if (pianoMode.value === 'Asdf') {
+      return mapWhiteAsdfBlackQwerty(keyColors.value, baseMidiNote.value, baseIndex)
+    } else if (pianoMode.value === 'QweZxc0') {
+      return mapWhiteQweZxcBlack123Asd(keyColors.value, size, baseMidiNote.value, baseIndex, 0)
+    } else {
+      return mapWhiteQweZxcBlack123Asd(keyColors.value, size, baseMidiNote.value, baseIndex, 1)
+    }
+  })
+
+  // === State updates ===
+  function updateFromScaleLines(lines: string[]) {
+    if (arraysEqual(lines, scaleLines.value)) {
+      return
+    }
+    scaleLines.value = lines
+    const intervals: Interval[] = []
+    const options: IntervalOptions = {
+      centsFractionDigits: centsFractionDigits.value,
+      decimalFractionDigits: decimalFractionDigits.value
+    }
+    lines.forEach((line) => {
+      try {
+        const interval = parseLine(line, DEFAULT_NUMBER_OF_COMPONENTS, options)
+        intervals.push(interval)
+      } catch {
+        /* empty */
+      }
+    })
+    if (!intervals.length) {
+      intervals.push(parseLine('1/1', DEFAULT_NUMBER_OF_COMPONENTS, options))
+    }
+
+    const surrogate = Scale.fromIntervalArray(intervals)
+    scale.intervals = surrogate.intervals
+    scale.equave = surrogate.equave
+  }
+
+  function updateFromScale(surrogate: Scale) {
+    scale.intervals = surrogate.intervals
+    scale.equave = surrogate.equave
+    scaleLines.value = reverseParseScale(scale)
+  }
+
+  // Computed wrappers to avoid triggering a watcher loop.
+  const scaleWrapper = computed({
+    get() {
+      return scale
+    },
+    set: updateFromScale
+  })
+
+  const scaleLinesWrapper = computed({
+    get() {
+      return scaleLines.value
+    },
+    set: updateFromScaleLines
+  })
+
+  // Local storage watchers
+  watch(newline, (newValue) => window.localStorage.setItem('newline', newValue))
+  watch(
+    colorScheme,
+    (newValue) => {
+      window.localStorage.setItem('colorScheme', newValue)
+      document.documentElement.setAttribute('data-theme', newValue)
+    },
+    { immediate: true }
+  )
+  watch(centsFractionDigits, (newValue) =>
+    window.localStorage.setItem('centsFractionDigits', newValue.toString())
+  )
+  watch(decimalFractionDigits, (newValue) =>
+    window.localStorage.setItem('decimalFractionDigits', newValue.toString())
+  )
+  watch(showVirtualQwerty, (newValue) =>
+    window.localStorage.setItem('showVirtualQwerty', newValue.toString())
+  )
+  watch(midiOctaveOffset, (newValue) =>
+    window.localStorage.setItem('midiOctaveOffset', newValue.toString())
+  )
+  watch(intervalMatrixIndexing, (newValue) =>
+    window.localStorage.setItem('intervalMatrixIndexing', newValue.toString())
+  )
+  watch(accidentalPreference, (newValue) => localStorage.setItem('accidentalPreference', newValue))
+  // Store keymaps
+  watch(deactivationCode, (newValue) => window.localStorage.setItem('deactivationCode', newValue))
+  watch(equaveUpCode, (newValue) => window.localStorage.setItem('equaveUpCode', newValue))
+  watch(equaveDownCode, (newValue) => window.localStorage.setItem('equaveDownCode', newValue))
+  watch(degreeUpCode, (newValue) => window.localStorage.setItem('degreeUpCode', newValue))
+  watch(degreeDownCode, (newValue) => window.localStorage.setItem('degreeDownCode', newValue))
+
+  // Sanity watchers
+  watch(baseMidiNote, (newValue) => {
+    if (isNaN(newValue)) {
+      baseMidiNote.value = 69
+    } else if (Math.round(newValue) != newValue) {
+      baseMidiNote.value = Math.round(newValue)
+    }
+  })
+
+  // Methods
+  function getFrequency(index: number) {
+    if (index >= 0 && index < frequencies.value.length) {
+      return frequencies.value[index]
+    } else {
+      // Support more than 128 notes with some additional computational cost
+      return scale.getFrequency(index - baseMidiNote.value)
+    }
+  }
+
+  return {
+    // Live state
+    scaleName,
+    scaleLinesRaw: scaleLines,
+    scaleLines: scaleLinesWrapper,
+    scaleRaw: scale,
+    scale: scaleWrapper,
+    baseMidiNote,
+    keyColors,
+    isomorphicVertical,
+    isomorphicHorizontal,
+    keyboardMode,
+    pianoMode,
+    equaveShift,
+    degreeShift,
+    heldNotes,
+    typingActive,
+    // Persistent state
+    newline,
+    colorScheme,
+    centsFractionDigits,
+    decimalFractionDigits,
+    showVirtualQwerty,
+    midiOctaveOffset,
+    intervalMatrixIndexing,
+    deactivationCode,
+    equaveUpCode,
+    equaveDownCode,
+    degreeUpCode,
+    degreeDownCode,
+    accidentalPreference,
+    // Computed state
+    frequencies,
+    baseIndex,
+    whiteIndices,
+    keyboardMapping,
+    // Methods
+    getFrequency
+  }
+})
diff --git a/src/views/AnalysisView.vue b/src/views/AnalysisView.vue
index 6ace5aef..c6a7b541 100644
--- a/src/views/AnalysisView.vue
+++ b/src/views/AnalysisView.vue
@@ -2,25 +2,14 @@
 import { intervalMatrix } from '@/analysis'
 import ChordWheel from '@/components/ChordWheel.vue'
 import { computed, ref } from 'vue'
-import {
-  reverseParseInterval,
-  type Interval,
-  type IntervalOptions,
-  type Scale
-} from 'scale-workshop-core'
+import { reverseParseInterval, type Interval, type IntervalOptions } from 'scale-workshop-core'
 import { useAudioStore } from '@/stores/audio'
+import { useStateStore } from '@/stores/state'
 
 const MAX_SCALE_SIZE = 100
 
-const props = defineProps<{
-  scale: Scale
-  colorScheme: 'light' | 'dark'
-  intervalMatrixIndexing: number
-}>()
-
-const emit = defineEmits(['update:intervalMatrixIndexing'])
-
 const audio = useAudioStore()
+const state = useStateStore()
 
 const cellFormat = ref<'best' | 'cents' | 'decimal'>('best')
 const trailLongevity = ref(70)
@@ -28,15 +17,15 @@ const maxOtonalRoot = ref(16)
 const maxUtonalRoot = ref(23)
 
 const intervalMatrixIndexingRadio = computed({
-  get: () => props.intervalMatrixIndexing.toString(),
-  set: (newValue: string) => emit('update:intervalMatrixIndexing', parseInt(newValue, 10))
+  get: () => state.intervalMatrixIndexing.toString(),
+  set: (newValue: string) => (state.intervalMatrixIndexing = parseInt(newValue, 10))
 })
 
 const fadeAlpha = computed(() => 1 - trailLongevity.value / 100)
 
 const backgroundRBG = computed<[number, number, number]>(() => {
   // Add dependency.
-  props.colorScheme
+  state.colorScheme
   // Fetch from document.
   const css = getComputedStyle(document.documentElement)
     .getPropertyValue('--color-background')
@@ -53,7 +42,7 @@ const backgroundRBG = computed<[number, number, number]>(() => {
 
 const strokeStyle = computed(() => {
   // Add dependency.
-  props.colorScheme
+  state.colorScheme
   // Fetch from document.
   return getComputedStyle(document.documentElement).getPropertyValue('--color-text').trim()
 })
@@ -91,7 +80,7 @@ function formatMatrixCell(interval: Interval) {
 
 const matrix = computed(() => {
   return intervalMatrix(
-    props.scale.head(MAX_SCALE_SIZE).mergeOptions({
+    state.scale.head(MAX_SCALE_SIZE).mergeOptions({
       centsFractionDigits: 1,
       decimalFractionDigits: 3
     })
@@ -106,13 +95,13 @@ const matrix = computed(() => {
       <table>
         <tr>
           <th></th>
-          <th v-for="i of Math.min(scale.size, MAX_SCALE_SIZE)" :key="i">
-            {{ i - 1 + intervalMatrixIndexing }}
+          <th v-for="i of Math.min(state.scale.size, MAX_SCALE_SIZE)" :key="i">
+            {{ i - 1 + state.intervalMatrixIndexing }}
           </th>
-          <th>({{ scale.size + intervalMatrixIndexing }})</th>
+          <th>({{ state.scale.size + state.intervalMatrixIndexing }})</th>
         </tr>
         <tr v-for="(row, i) of matrix" :key="i">
-          <th>{{ formatMatrixCell(scale.getInterval(i)) }}</th>
+          <th>{{ formatMatrixCell(state.scale.getInterval(i)) }}</th>
           <td v-for="(name, j) of row" :key="j">{{ name }}</td>
         </tr>
       </table>
diff --git a/src/views/LatticeView.vue b/src/views/LatticeView.vue
index adcd2512..d15c470c 100644
--- a/src/views/LatticeView.vue
+++ b/src/views/LatticeView.vue
@@ -1,21 +1,16 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { Scale } from 'scale-workshop-core'
 import { mmod } from 'xen-dev-utils'
 import ScaleLattice from '@/components/ScaleLattice.vue'
+import { useStateStore } from '@/stores/state'
 
-const props = defineProps<{
-  scale: Scale
-  baseMidiNote: number
-  keyColors: string[]
-  heldNotes: Map<number, number>
-}>()
+const state = useStateStore()
 
 const heldScaleDegrees = computed(() => {
   const result: Set<number> = new Set()
-  for (const tableIndex of props.heldNotes.keys()) {
-    if (props.heldNotes.get(tableIndex)! > 0) {
-      result.add(mmod(tableIndex - props.baseMidiNote, props.scale.size))
+  for (const tableIndex of state.heldNotes.keys()) {
+    if (state.heldNotes.get(tableIndex)! > 0) {
+      result.add(mmod(tableIndex - state.baseMidiNote, state.scale.size))
     }
   }
   return result
@@ -25,7 +20,7 @@ const heldScaleDegrees = computed(() => {
 <template>
   <main>
     <h2>Lattice visualization</h2>
-    <ScaleLattice :scale="scale" :heldScaleDegrees="heldScaleDegrees" />
+    <ScaleLattice :scale="state.scale" :heldScaleDegrees="heldScaleDegrees" />
   </main>
 </template>
 
diff --git a/src/views/MidiView.vue b/src/views/MidiView.vue
index efc8a933..03928f4e 100644
--- a/src/views/MidiView.vue
+++ b/src/views/MidiView.vue
@@ -1,27 +1,16 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
 import { Input, Output, WebMidi, type NoteMessageEvent, type MessageEvent } from 'webmidi'
 import MidiPiano from '@/components/MidiPiano.vue'
+import { useStateStore } from '@/stores/state'
+import { useMidiStore } from '@/stores/midi'
 
 const props = defineProps<{
-  baseMidiNote: number
-  midiInput: Input | null
-  midiOutput: Output | null
   midiInputChannels: Set<number>
-  midiOutputChannels: Set<number>
-  midiVelocityOn: boolean
-  midiWhiteMode: 'off' | 'simple' | 'blackAverage' | 'keyColors'
-  keyColors: string[]
 }>()
 
-const emit = defineEmits([
-  'update:midiInput',
-  'update:midiOutput',
-  'update:midiInputChannels',
-  'update:midiOutputChannels',
-  'update:midiVelocityOn',
-  'update:midiWhiteMode'
-])
+const state = useStateStore()
+const midi = useMidiStore()
 
 const inputs = reactive<Input[]>([])
 const outputs = reactive<Output[]>([])
@@ -31,15 +20,6 @@ const stopHighlights = ref<() => void>(() => {})
 const activeKeys = reactive<Set<number>>(new Set())
 const stopActivations = ref<() => void>(() => {})
 
-const midiVelocityOn = computed({
-  get: () => props.midiVelocityOn,
-  set: (newValue) => emit('update:midiVelocityOn', newValue)
-})
-const midiWhiteMode = computed({
-  get: () => props.midiWhiteMode,
-  set: (newValue) => emit('update:midiWhiteMode', newValue)
-})
-
 function highlightMidiChannel(event: MessageEvent) {
   inputHighlights.add(event.message.channel)
   setTimeout(() => inputHighlights.delete(event.message.channel), 500)
@@ -61,21 +41,19 @@ function selectMidiInput(event: Event) {
   const id = (event!.target as HTMLSelectElement).value
   stopHighlights.value()
   if (id === 'no-midi-input') {
-    emit('update:midiInput', null)
+    midi.input = null
     stopHighlights.value = () => {}
   } else {
     const input = WebMidi.getInputById(id)
-    emit('update:midiInput', input)
+    midi.input = input
     input.addListener('midimessage', highlightMidiChannel)
     stopHighlights.value = () => input.removeListener('midimessage', highlightMidiChannel)
   }
   stopActivations.value()
   if (id === 'no-midi-input') {
-    emit('update:midiInput', null)
     stopActivations.value = () => {}
   } else {
     const input = WebMidi.getInputById(id)
-    emit('update:midiInput', input)
     input.addListener('noteon', activateKey)
     input.addListener('noteoff', deactivateKey)
     stopActivations.value = () => {
@@ -88,9 +66,9 @@ function selectMidiInput(event: Event) {
 function selectMidiOutput(event: Event) {
   const id = (event!.target as HTMLSelectElement).value
   if (id === 'no-midi-output') {
-    emit('update:midiOutput', null)
+    midi.output = null
   } else {
-    emit('update:midiOutput', WebMidi.getOutputById(id))
+    midi.output = WebMidi.getOutputById(id)!
   }
 }
 
@@ -120,13 +98,20 @@ function toggleChannel(
   } else {
     result.delete(channel)
   }
-  emit(eventStr, result)
+  if (eventStr === 'update:midiInputChannels') {
+    props.midiInputChannels.clear()
+    for (const channel of result) {
+      props.midiInputChannels.add(channel)
+    }
+  } else {
+    midi.outputChannels = result
+  }
 }
 
 const toggleInputChannel = (event: Event) =>
   toggleChannel(event, props.midiInputChannels, 'update:midiInputChannels')
 const toggleOutputChannel = (event: Event) =>
-  toggleChannel(event, props.midiOutputChannels, 'update:midiOutputChannels')
+  toggleChannel(event, midi.outputChannels, 'update:midiOutputChannels')
 
 onMounted(async () => {
   await WebMidi.enable()
@@ -139,8 +124,8 @@ onMounted(async () => {
     setTimeout(refreshMidi, 500)
   }
 
-  if (props.midiInput !== null) {
-    const input = props.midiInput
+  if (midi.input !== null) {
+    const input = midi.input
     input.addListener('midimessage', highlightMidiChannel)
     stopHighlights.value = () => input.removeListener('midimessage', highlightMidiChannel)
 
@@ -168,12 +153,12 @@ onUnmounted(() => {
           <div class="control">
             <label for="input">Input device</label>
             <select id="input" @change="selectMidiInput" class="control">
-              <option value="no-midi-input" :selected="midiInput === null">No MIDI input</option>
+              <option value="no-midi-input" :selected="midi.input === null">No MIDI input</option>
               <option
                 v-for="input of inputs"
                 :value="input.id"
                 :key="input.id"
-                :selected="input.id === props.midiInput?.id"
+                :selected="input.id === midi.input?.id"
               >
                 {{ (input.manufacturer || '(Generic)') + ': ' + input.name }}
               </option>
@@ -194,34 +179,34 @@ onUnmounted(() => {
             </span>
           </div>
           <div class="control checkbox-container">
-            <input type="checkbox" id="midi-velocity" v-model="midiVelocityOn" />
+            <input type="checkbox" id="midi-velocity" v-model="midi.velocityOn" />
             <label for="midi-velocity">Use velocity</label>
           </div>
           <div class="control radio-group">
             <label>Color mapping</label>
             <span>
-              <input type="radio" id="white-off" value="off" v-model="midiWhiteMode" />
+              <input type="radio" id="white-off" value="off" v-model="midi.whiteMode" />
               <label for="white-off"> Chromatic </label>
             </span>
             <span>
-              <input type="radio" id="white-simple" value="simple" v-model="midiWhiteMode" />
+              <input type="radio" id="white-simple" value="simple" v-model="midi.whiteMode" />
               <label for="white-simple"> White only </label>
             </span>
             <span>
-              <input type="radio" id="white-black" value="blackAverage" v-model="midiWhiteMode" />
+              <input type="radio" id="white-black" value="blackAverage" v-model="midi.whiteMode" />
               <label for="white-black"> White w/ interpolation </label>
             </span>
             <span>
-              <input type="radio" id="white-color" value="keyColors" v-model="midiWhiteMode" />
+              <input type="radio" id="white-color" value="keyColors" v-model="midi.whiteMode" />
               <label for="white-color"> White key to white color </label>
             </span>
           </div>
         </div>
         <div class="piano-container">
           <MidiPiano
-            :baseMidiNote="baseMidiNote"
-            :midiWhiteMode="midiWhiteMode"
-            :keyColors="keyColors"
+            :baseMidiNote="state.baseMidiNote"
+            :midiWhiteMode="midi.whiteMode"
+            :keyColors="state.keyColors"
             :activeKeys="activeKeys"
           />
         </div>
@@ -232,12 +217,14 @@ onUnmounted(() => {
           <div class="control">
             <label for="output">Output device</label>
             <select id="output" @change="selectMidiOutput" class="control">
-              <option value="no-midi-output" :selected="midiOutput === null">No MIDI output</option>
+              <option value="no-midi-output" :selected="midi.output === null">
+                No MIDI output
+              </option>
               <option
                 v-for="output of outputs"
                 :value="output.id"
                 :key="output.id"
-                :selected="output.id === props.midiOutput?.id"
+                :selected="output.id === midi.output?.id"
               >
                 {{ (output.manufacturer || '(Generic)') + ': ' + output.name }}
               </option>
@@ -250,7 +237,7 @@ onUnmounted(() => {
               <input
                 type="checkbox"
                 :value="channel"
-                :checked="midiOutputChannels.has(channel)"
+                :checked="midi.outputChannels.has(channel)"
                 @input="toggleOutputChannel"
               />
             </span>
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index c87ec2a2..1a784be3 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -10,51 +10,34 @@ import { nextTick, ref } from 'vue'
 import { useRouter, type LocationQuery } from 'vue-router'
 import { version } from '../../package.json'
 import { useAudioStore } from '@/stores/audio'
-
-const props = defineProps<{
-  scaleName: string
-  scaleLines: string[]
-  baseMidiNote: number
-  keyColors: string[]
-
-  scale: Scale
-
-  isomorphicHorizontal: number
-  isomorphicVertical: number
-
-  keyboardMode: 'isomorphic' | 'piano'
-  pianoMode: 'Asdf' | 'QweZxc0' | 'QweZxc1'
-
-  equaveShift: number
-  degreeShift: number
-}>()
-
-const emit = defineEmits(['update:scale', 'update:scaleName'])
+import { useStateStore } from '@/stores/state'
 
 const ritualInProgress = ref(false)
 
 const router = useRouter()
 
+const state = useStateStore()
+
 const audio = useAudioStore()
 
 function openTheGates(scale: Scale) {
-  emit('update:scale', scale)
+  state.scale = scale
 
   // Unfortunately we need to encode the state here.
   // Simply navigating to "/" triggers decoding of the default empty state.
   nextTick(() => {
-    const state = {
-      scaleName: props.scaleName,
-      scaleLines: props.scaleLines,
-      baseFrequency: props.scale.baseFrequency,
-      baseMidiNote: props.baseMidiNote,
-      keyColors: props.keyColors,
-      isomorphicHorizontal: props.isomorphicHorizontal,
-      isomorphicVertical: props.isomorphicVertical,
-      keyboardMode: props.keyboardMode,
-      pianoMode: props.pianoMode,
-      equaveShift: props.equaveShift,
-      degreeShift: props.degreeShift,
+    const encodedState = {
+      scaleName: state.scaleName,
+      scaleLines: state.scaleLines,
+      baseFrequency: state.scale.baseFrequency,
+      baseMidiNote: state.baseMidiNote,
+      keyColors: state.keyColors,
+      isomorphicHorizontal: state.isomorphicHorizontal,
+      isomorphicVertical: state.isomorphicVertical,
+      keyboardMode: state.keyboardMode,
+      pianoMode: state.pianoMode,
+      equaveShift: state.equaveShift,
+      degreeShift: state.degreeShift,
 
       waveform: audio.waveform,
       attackTime: audio.attackTime,
@@ -68,7 +51,7 @@ function openTheGates(scale: Scale) {
       pingPongGain: audio.pingPongGain
     }
 
-    const query = encodeQuery(state) as LocationQuery
+    const query = encodeQuery(encodedState) as LocationQuery
     query.version = version
 
     router.push({ path: '/', query })
@@ -88,7 +71,7 @@ function openTheGates(scale: Scale) {
     <Teleport to="body">
       <OctaplexPortal
         :show="ritualInProgress"
-        @update:scaleName="emit('update:scaleName', $event)"
+        @update:scaleName="state.scaleName = $event"
         @update:scale="openTheGates"
         @cancel="ritualInProgress = false"
       />
diff --git a/src/views/PreferencesView.vue b/src/views/PreferencesView.vue
index f9988b76..d8f2ec0f 100644
--- a/src/views/PreferencesView.vue
+++ b/src/views/PreferencesView.vue
@@ -1,57 +1,9 @@
 <script setup lang="ts">
 import { UNIX_NEWLINE, WINDOWS_NEWLINE } from '@/constants'
-import type { AccidentalStyle } from '@/utils'
-import { ref, computed, watch } from 'vue'
 
-const props = defineProps<{
-  newline: string
-  colorScheme: 'light' | 'dark'
-  centsFractionDigits: number
-  decimalFractionDigits: number
-  showVirtualQwerty: boolean
-  midiOctaveOffset: number
-}>()
+import { useStateStore } from '@/stores/state'
 
-const emit = defineEmits([
-  'update:newline',
-  'update:colorScheme',
-  'update:centsFractionDigits',
-  'update:decimalFractionDigits',
-  'update:virtualKeyboardMode',
-  'update:showVirtualQwerty',
-  'update:midiOctaveOffset'
-])
-
-const newline = computed({
-  get: () => props.newline,
-  set: (newValue: string) => emit('update:newline', newValue)
-})
-const colorScheme = computed({
-  get: () => props.colorScheme,
-  set: (newValue: string) => emit('update:colorScheme', newValue)
-})
-const centsFractionDigits = computed({
-  get: () => props.centsFractionDigits,
-  set: (newValue: number) => emit('update:centsFractionDigits', newValue)
-})
-const decimalFractionDigits = computed({
-  get: () => props.decimalFractionDigits,
-  set: (newValue: number) => emit('update:decimalFractionDigits', newValue)
-})
-const showVirtualQwerty = computed({
-  get: () => props.showVirtualQwerty,
-  set: (newValue: boolean) => emit('update:showVirtualQwerty', newValue)
-})
-const midiOctaveOffset = computed({
-  get: () => props.midiOctaveOffset,
-  set: (newValue: number) => emit('update:midiOctaveOffset', newValue)
-})
-
-// Lazy developer here hoping to move to Pinia, so I won't drill this back to App.vue
-const accidentalPreference = ref<AccidentalStyle>(
-  (localStorage.getItem('accidentalPreference') as AccidentalStyle) ?? 'double'
-)
-watch(accidentalPreference, (newValue) => localStorage.setItem('accidentalPreference', newValue))
+const state = useStateStore()
 </script>
 
 <template>
@@ -66,7 +18,7 @@ watch(accidentalPreference, (newValue) => localStorage.setItem('accidentalPrefer
               id="newline"
               class="control"
               title="If your exported tuning files didn't work right on macOS synths, try changing this option to Unix."
-              v-model="newline"
+              v-model="state.newline"
             >
               <option :value="WINDOWS_NEWLINE">Microsoft (Windows/MS-DOS)</option>
               <option :value="UNIX_NEWLINE">Unix (Mac/Linux)</option>
@@ -76,7 +28,7 @@ watch(accidentalPreference, (newValue) => localStorage.setItem('accidentalPrefer
         <h2>Advanced</h2>
         <div class="control-group">
           <div class="control checkbox-container">
-            <input id="virtual-qwerty" type="checkbox" v-model="showVirtualQwerty" />
+            <input id="virtual-qwerty" type="checkbox" v-model="state.showVirtualQwerty" />
             <label for="virtual-qwerty"> Virtual QWERTY in top menu</label>
           </div>
         </div>
@@ -87,11 +39,11 @@ watch(accidentalPreference, (newValue) => localStorage.setItem('accidentalPrefer
           <h3>Color Scheme</h3>
           <div class="control radio-group">
             <span>
-              <input type="radio" id="scheme-light" value="light" v-model="colorScheme" />
+              <input type="radio" id="scheme-light" value="light" v-model="state.colorScheme" />
               <label for="scheme-light"> Light </label>
             </span>
             <span>
-              <input type="radio" id="scheme-dark" value="dark" v-model="colorScheme" />
+              <input type="radio" id="scheme-dark" value="dark" v-model="state.colorScheme" />
               <label for="scheme-dark"> Dark </label>
             </span>
           </div>
@@ -102,7 +54,7 @@ watch(accidentalPreference, (newValue) => localStorage.setItem('accidentalPrefer
               type="number"
               class="control"
               step="1"
-              v-model="midiOctaveOffset"
+              v-model="state.midiOctaveOffset"
             />
           </div>
           <h3>Accidentals</h3>
@@ -112,7 +64,7 @@ watch(accidentalPreference, (newValue) => localStorage.setItem('accidentalPrefer
                 type="radio"
                 id="accidentals-double"
                 value="double"
-                v-model="accidentalPreference"
+                v-model="state.accidentalPreference"
               />
               <label for="accidentals-double"> Double 𝄫/𝄪</label>
             </span>
@@ -121,7 +73,7 @@ watch(accidentalPreference, (newValue) => localStorage.setItem('accidentalPrefer
                 type="radio"
                 id="accidentals-single"
                 value="single"
-                v-model="accidentalPreference"
+                v-model="state.accidentalPreference"
               />
               <label for="accidentals-single"> Single ♭♭/♯♯</label>
             </span>
@@ -130,7 +82,7 @@ watch(accidentalPreference, (newValue) => localStorage.setItem('accidentalPrefer
                 type="radio"
                 id="accidentals-ascii"
                 value="ASCII"
-                v-model="accidentalPreference"
+                v-model="state.accidentalPreference"
               />
               <label for="accidentals-single"> ASCII bb/##</label>
             </span>
@@ -142,7 +94,13 @@ watch(accidentalPreference, (newValue) => localStorage.setItem('accidentalPrefer
         <div class="control-group">
           <div class="control">
             <label for="cents">Cents digits after decimal point</label>
-            <input id="cents" type="number" class="control" min="0" v-model="centsFractionDigits" />
+            <input
+              id="cents"
+              type="number"
+              class="control"
+              min="0"
+              v-model="state.centsFractionDigits"
+            />
           </div>
           <div class="control">
             <label for="decimal">Decimal digits after decimal comma</label>
@@ -151,7 +109,7 @@ watch(accidentalPreference, (newValue) => localStorage.setItem('accidentalPrefer
               type="number"
               class="control"
               min="0"
-              v-model="decimalFractionDigits"
+              v-model="state.decimalFractionDigits"
             />
           </div>
         </div>
diff --git a/src/views/ScaleView.vue b/src/views/ScaleView.vue
index 31020db5..b967bc53 100644
--- a/src/views/ScaleView.vue
+++ b/src/views/ScaleView.vue
@@ -1,52 +1,9 @@
 <script setup lang="ts">
 import ScaleBuilder from '@/components/ScaleBuilder.vue'
-import type { Scale } from 'scale-workshop-core'
-
-defineProps<{
-  scaleName: string
-  scaleLines: string[]
-  baseMidiNote: number
-  keyColors: string[]
-
-  scale: Scale
-  frequencies: number[]
-
-  centsFractionDigits: number
-  decimalFractionDigits: number
-  newline: string
-
-  midiOctaveOffset: number
-}>()
-
-defineEmits([
-  'update:scaleName',
-  'update:scaleLines',
-  'update:scale',
-  'update:baseFrequency',
-  'update:baseMidiNote',
-  'update:keyColors'
-])
 </script>
 
 <template>
   <main>
-    <ScaleBuilder
-      :scaleName="scaleName"
-      :scaleLines="scaleLines"
-      :baseMidiNote="baseMidiNote"
-      :keyColors="keyColors"
-      :scale="scale"
-      :frequencies="frequencies"
-      :centsFractionDigits="centsFractionDigits"
-      :decimalFractionDigits="decimalFractionDigits"
-      :newline="newline"
-      :midiOctaveOffset="midiOctaveOffset"
-      @update:scaleName="$emit('update:scaleName', $event)"
-      @update:scaleLines="$emit('update:scaleLines', $event)"
-      @update:scale="$emit('update:scale', $event)"
-      @update:baseFrequency="$emit('update:baseFrequency', $event)"
-      @update:baseMidiNote="$emit('update:baseMidiNote', $event)"
-      @update:keyColors="$emit('update:keyColors', $event)"
-    />
+    <ScaleBuilder />
   </main>
 </template>
diff --git a/src/views/SynthView.vue b/src/views/SynthView.vue
index ed8ad656..1b77591f 100644
--- a/src/views/SynthView.vue
+++ b/src/views/SynthView.vue
@@ -4,39 +4,11 @@ import TimeDomainVisualizer from '@/components/TimeDomainVisualizer.vue'
 import Modal from '@/components/ModalDialog.vue'
 import { WAVEFORMS } from '@/synth'
 import { useAudioStore } from '@/stores/audio'
+import { useStateStore } from '@/stores/state'
 
-const props = defineProps<{
-  keyboardMode: 'isomorphic' | 'piano'
-  pianoMode: 'Asdf' | 'QweZxc0' | 'QweZxc1'
-  isomorphicHorizontal: number
-  isomorphicVertical: number
-  equaveShift: number
-  degreeShift: number
-  colorScheme: 'light' | 'dark'
-  deactivationCode: string
-  equaveUpCode: string
-  equaveDownCode: string
-  degreeUpCode: string
-  degreeDownCode: string
-}>()
+const emit = defineEmits(['panic'])
 
-const emit = defineEmits([
-  'update:keyboardMode',
-  'update:pianoMode',
-  'update:isomorphicHorizontal',
-  'update:isomorphicVertical',
-  'update:equaveShift',
-  'update:degreeShift',
-  'update:deactivationCode',
-  'update:equaveUpCode',
-  'update:equaveDownCode',
-  'update:degreeUpCode',
-  'update:degreeDownCode',
-  'mapAsdf',
-  'mapZxcv0',
-  'mapZxcv1',
-  'panic'
-])
+const state = useStateStore()
 
 const audio = useAudioStore()
 
@@ -71,30 +43,6 @@ const mainVolume = computed({
     }
   }
 })
-const keyboardMode = computed({
-  get: () => props.keyboardMode,
-  set: (newValue: 'isomorphic' | 'piano') => emit('update:keyboardMode', newValue)
-})
-const pianoMode = computed({
-  get: () => props.pianoMode,
-  set: (newValue: 'Asdf' | 'QweZxc0' | 'QweZxc1') => emit('update:pianoMode', newValue)
-})
-const isomorphicVertical = computed({
-  get: () => props.isomorphicVertical,
-  set: (newValue: number) => emit('update:isomorphicVertical', newValue)
-})
-const isomorphicHorizontal = computed({
-  get: () => props.isomorphicHorizontal,
-  set: (newValue: number) => emit('update:isomorphicHorizontal', newValue)
-})
-const equaveShift = computed({
-  get: () => props.equaveShift,
-  set: (newValue: number) => emit('update:equaveShift', newValue)
-})
-const degreeShift = computed({
-  get: () => props.degreeShift,
-  set: (newValue: number) => emit('update:degreeShift', newValue)
-})
 
 const attackTime = computed({
   get: () => audio.attackTime,
@@ -194,7 +142,7 @@ const pingPongGain = computed({
 
 const strokeStyle = computed(() => {
   // Add dependency.
-  props.colorScheme
+  state.colorScheme
   // Fetch from document.
   return getComputedStyle(document.documentElement).getPropertyValue('--color-text').trim()
 })
@@ -236,7 +184,7 @@ function presetLong() {
 
 function assignCode(event: KeyboardEvent) {
   if (remappedKey.value.length && event.code.length) {
-    emit(('update:' + remappedKey.value) as any, event.code)
+    ;(state as any)[remappedKey.value] = event.code
     remappedKey.value = ''
   }
 }
@@ -412,26 +360,31 @@ onUnmounted(() => {
         <div class="control-group">
           <div class="control radio-group">
             <span>
-              <input type="radio" id="mode-isomorphic" value="isomorphic" v-model="keyboardMode" />
+              <input
+                type="radio"
+                id="mode-isomorphic"
+                value="isomorphic"
+                v-model="state.keyboardMode"
+              />
               <label for="mode-isomorphic"> Isomorphic </label>
             </span>
             <span>
-              <input type="radio" id="mode-piano" value="piano" v-model="keyboardMode" />
+              <input type="radio" id="mode-piano" value="piano" v-model="state.keyboardMode" />
               <label for="mode-piano"> Piano-style layers </label>
             </span>
           </div>
-          <template v-if="keyboardMode === 'piano'">
+          <template v-if="state.keyboardMode === 'piano'">
             <div class="control radio-group">
               <span>
-                <input type="radio" id="mode-asdf" value="Asdf" v-model="pianoMode" />
+                <input type="radio" id="mode-asdf" value="Asdf" v-model="state.pianoMode" />
                 <label for="mode-asdf"> ASDF & QWERTY </label>
               </span>
               <span>
-                <input type="radio" id="mode-qwezxc1" value="QweZxc1" v-model="pianoMode" />
+                <input type="radio" id="mode-qwezxc1" value="QweZxc1" v-model="state.pianoMode" />
                 <label for="mode-qwezxc1"> ZXCV & ASDF + QWERTY & 1234 </label>
               </span>
               <span>
-                <input type="radio" id="mode-qwezxc0" value="QweZxc0" v-model="pianoMode" />
+                <input type="radio" id="mode-qwezxc0" value="QweZxc0" v-model="state.pianoMode" />
                 <label for="mode-qwezxc0"> ZXCV etc. (shifted left) </label>
               </span>
             </div>
@@ -444,7 +397,7 @@ onUnmounted(() => {
             <code>/</code> and <code>*</code>)
           </p>
           <div class="control">
-            <input type="number" v-model="equaveShift" />
+            <input type="number" v-model="state.equaveShift" />
           </div>
         </div>
         <h2>Keyboard degree shift</h2>
@@ -454,10 +407,10 @@ onUnmounted(() => {
             <code>-</code> and <code>+</code>).
           </p>
           <div class="control">
-            <input type="number" v-model="degreeShift" />
+            <input type="number" v-model="state.degreeShift" />
           </div>
         </div>
-        <template v-if="keyboardMode === 'isomorphic'">
+        <template v-if="state.keyboardMode === 'isomorphic'">
           <h2>Isomorphic key mapping</h2>
           <p>
             Distance between adjacent keys on the horizontal/vertical axes, in scale degrees.
@@ -469,11 +422,11 @@ onUnmounted(() => {
           >
             <div class="control" style="width: 50%">
               <label for="vertical">Vertical</label>
-              <input type="number" id="vertical" v-model="isomorphicVertical" />
+              <input type="number" id="vertical" v-model="state.isomorphicVertical" />
             </div>
             <div class="control" style="width: 50%">
               <label for="horizontal">Horizontal</label>
-              <input type="number" id="horizontal" v-model="isomorphicHorizontal" />
+              <input type="number" id="horizontal" v-model="state.isomorphicHorizontal" />
             </div>
           </div>
         </template>
@@ -481,23 +434,23 @@ onUnmounted(() => {
         <div class="control-group">
           <p><code>Shift</code> sustain currently held keys after release</p>
           <p>
-            <code @click="remappedKey = 'deactivationCode'">{{ deactivationCode }}</code>
+            <code @click="remappedKey = 'deactivationCode'">{{ state.deactivationCode }}</code>
             release sustain, stop all playing notes (click to reassign)
           </p>
           <p>
-            <code @click="remappedKey = 'equaveDownCode'">{{ equaveDownCode }}</code>
+            <code @click="remappedKey = 'equaveDownCode'">{{ state.equaveDownCode }}</code>
             equave shift down (click to reassign)
           </p>
           <p>
-            <code @click="remappedKey = 'equaveUpCode'">{{ equaveUpCode }}</code>
+            <code @click="remappedKey = 'equaveUpCode'">{{ state.equaveUpCode }}</code>
             equave shift up (click to reassign)
           </p>
           <p>
-            <code @click="remappedKey = 'degreeDownCode'">{{ degreeDownCode }}</code>
+            <code @click="remappedKey = 'degreeDownCode'">{{ state.degreeDownCode }}</code>
             degree shift down (click to reassign)
           </p>
           <p>
-            <code @click="remappedKey = 'degreeUpCode'">{{ degreeUpCode }}</code>
+            <code @click="remappedKey = 'degreeUpCode'">{{ state.degreeUpCode }}</code>
             degree shift up (click to reassign)
           </p>
         </div>
diff --git a/src/views/VirtualKeyboardView.vue b/src/views/VirtualKeyboardView.vue
index 2b8c1f3e..c41271d2 100644
--- a/src/views/VirtualKeyboardView.vue
+++ b/src/views/VirtualKeyboardView.vue
@@ -1,44 +1,37 @@
 <script setup lang="ts">
 import VirtualKeyboard from '@/components/VirtualKeyboard.vue'
 import VirtualPiano from '@/components/VirtualPiano.vue'
-import type { Scale } from 'scale-workshop-core'
-
-type NoteOff = () => void
-type NoteOnCallback = (index: number) => NoteOff
+import { useStateStore } from '@/stores/state'
 
 defineProps<{
-  baseMidiNote: number
-  equaveShift: number
-  degreeShift: number
-  isomorphicHorizontal: number
-  isomorphicVertical: number
-  scale: Scale
-  keyColors: string[]
   noteOn: NoteOnCallback
-  heldNotes: Map<number, number>
-  keyboardMode: 'isomorphic' | 'piano'
 }>()
+
+const state = useStateStore()
+
+type NoteOff = () => void
+type NoteOnCallback = (index: number) => NoteOff
 </script>
 
 <template>
   <main>
     <VirtualPiano
-      v-if="keyboardMode === 'piano'"
-      :baseIndex="baseMidiNote + equaveShift * scale.size + degreeShift"
-      :baseMidiNote="baseMidiNote"
-      :keyColors="keyColors"
+      v-if="state.keyboardMode === 'piano'"
+      :baseIndex="state.baseIndex"
+      :baseMidiNote="state.baseMidiNote"
+      :keyColors="state.keyColors"
       :noteOn="noteOn"
-      :heldNotes="heldNotes"
+      :heldNotes="state.heldNotes"
     ></VirtualPiano>
     <VirtualKeyboard
       v-else
-      :baseIndex="baseMidiNote + equaveShift * scale.size + degreeShift"
-      :baseMidiNote="baseMidiNote"
-      :isomorphicHorizontal="isomorphicHorizontal"
-      :isomorphicVertical="isomorphicVertical"
-      :keyColors="keyColors"
+      :baseIndex="state.baseIndex"
+      :baseMidiNote="state.baseMidiNote"
+      :isomorphicHorizontal="state.isomorphicHorizontal"
+      :isomorphicVertical="state.isomorphicVertical"
+      :keyColors="state.keyColors"
       :noteOn="noteOn"
-      :heldNotes="heldNotes"
+      :heldNotes="state.heldNotes"
     ></VirtualKeyboard>
   </main>
 </template>
diff --git a/src/views/VirtualQwerty.vue b/src/views/VirtualQwerty.vue
index b61ffc35..f7bbf745 100644
--- a/src/views/VirtualQwerty.vue
+++ b/src/views/VirtualQwerty.vue
@@ -1,30 +1,16 @@
 <script setup lang="ts">
 import VirtualTypingKeyboard from '@/components/VirtualTypingKeyboard.vue'
 import type { Keyboard } from 'isomorphic-qwerty'
-import type { Scale } from 'scale-workshop-core'
+import { useStateStore } from '@/stores/state'
+
+const state = useStateStore()
 
 type NoteOff = () => void
 type NoteOnCallback = (index: number) => NoteOff
 
 defineProps<{
-  baseMidiNote: number
-  equaveShift: number
-  degreeShift: number
-  isomorphicHorizontal: number
-  isomorphicVertical: number
-  scale: Scale
-  keyColors: string[]
   noteOn: NoteOnCallback
-  heldNotes: Map<number, number>
-  keyboardMode: 'isomorphic' | 'piano'
-  colorScheme: 'light' | 'dark'
-  keyboardMapping: Map<string, number>
   typingKeyboard: Keyboard
-  deactivationCode: string
-  equaveUpCode: string
-  equaveDownCode: string
-  degreeUpCode: string
-  degreeDownCode: string
 }>()
 
 defineEmits(['update:equaveShift', 'update:degreeShift'])
@@ -33,24 +19,24 @@ defineEmits(['update:equaveShift', 'update:degreeShift'])
 <template>
   <main>
     <VirtualTypingKeyboard
-      :baseIndex="baseMidiNote + equaveShift * scale.size + degreeShift"
-      :baseMidiNote="baseMidiNote"
-      :isomorphicHorizontal="isomorphicHorizontal"
-      :keyboardMode="keyboardMode"
-      :colorScheme="colorScheme"
-      :keyboardMapping="keyboardMapping"
-      :isomorphicVertical="isomorphicVertical"
-      :keyColors="keyColors"
+      :baseIndex="state.baseIndex"
+      :baseMidiNote="state.baseMidiNote"
+      :isomorphicHorizontal="state.isomorphicHorizontal"
+      :keyboardMode="state.keyboardMode"
+      :colorScheme="state.colorScheme"
+      :keyboardMapping="state.keyboardMapping"
+      :isomorphicVertical="state.isomorphicVertical"
+      :keyColors="state.keyColors"
       :noteOn="noteOn"
-      :heldNotes="heldNotes"
+      :heldNotes="state.heldNotes"
       :typingKeyboard="typingKeyboard"
-      :deactivationCode="deactivationCode"
-      :equaveUpCode="equaveUpCode"
-      :equaveDownCode="equaveDownCode"
-      :degreeUpCode="degreeUpCode"
-      :degreeDownCode="degreeDownCode"
-      :equaveShift="equaveShift"
-      :degreeShift="degreeShift"
+      :deactivationCode="state.deactivationCode"
+      :equaveUpCode="state.equaveUpCode"
+      :equaveDownCode="state.equaveDownCode"
+      :degreeUpCode="state.degreeUpCode"
+      :degreeDownCode="state.degreeDownCode"
+      :equaveShift="state.equaveShift"
+      :degreeShift="state.degreeShift"
       @update:equaveShift="$emit('update:equaveShift', $event)"
       @update:degreeShift="$emit('update:degreeShift', $event)"
     ></VirtualTypingKeyboard>