From 89960e03033a2fd6aff5515d6cbb503540bb638a Mon Sep 17 00:00:00 2001
From: Lumi Pakkanen <lumi.pakkanen@gmail.com>
Date: Thu, 16 May 2024 20:11:24 +0300
Subject: [PATCH] Upload scales to a server for sharing

Add privacy policy and terms of service.

ref #456
---
 .env.development                   |   1 +
 .gitignore                         |   3 +
 README.md                          |   4 +
 cypress/e2e/basic.cy.ts            |   2 +-
 package-lock.json                  |  12 +-
 package.json                       |   4 +-
 src/App.vue                        |  24 ++-
 src/__tests__/util.spec.ts         |  33 +++-
 src/components/ExporterButtons.vue | 109 ++++++++---
 src/constants.ts                   |   3 +
 src/main.ts                        |  26 +++
 src/router/index.ts                |  15 ++
 src/scale.ts                       |  33 ++++
 src/stores/__tests__/scale.spec.ts |  42 ++++
 src/stores/audio.ts                |  53 +++--
 src/stores/scale.ts                |  89 +++++++--
 src/stores/state.ts                |  13 +-
 src/utils.ts                       |  78 ++++++++
 src/views/LoadScaleView.vue        |  70 +++++++
 src/views/NotFoundView.vue         |   2 +-
 src/views/PreferencesView.vue      |   9 +
 src/views/PrivacyPolicy.vue        | 209 ++++++++++++++++++++
 src/views/ScaleView.vue            |   5 +-
 src/views/SynthView.vue            |   4 +-
 src/views/TermsOfService.vue       | 304 +++++++++++++++++++++++++++++
 src/views/VirtualKeyboardView.vue  |   4 +-
 src/views/VirtualQwerty.vue        |   4 +-
 27 files changed, 1071 insertions(+), 84 deletions(-)
 create mode 100644 .env.development
 create mode 100644 src/stores/__tests__/scale.spec.ts
 create mode 100644 src/views/LoadScaleView.vue
 create mode 100644 src/views/PrivacyPolicy.vue
 create mode 100644 src/views/TermsOfService.vue

diff --git a/.env.development b/.env.development
new file mode 100644
index 00000000..8ba9c0cf
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:17461/
diff --git a/.gitignore b/.gitignore
index 78710161..a1040d94 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,6 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+# Production secrets
+.env.production
diff --git a/README.md b/README.md
index b822df06..fc234b94 100644
--- a/README.md
+++ b/README.md
@@ -192,6 +192,10 @@ npm run test:e2e
 npm run lint
 ```
 
+### Run the backend server
+
+See [sw-server](https://github.com/xenharmonic-devs/sw-server) for the backend component for storing and retrieving scales.
+
 ## License
 
 MIT, see [LICENCE](LICENSE) for details.
diff --git a/cypress/e2e/basic.cy.ts b/cypress/e2e/basic.cy.ts
index df334961..c7016060 100644
--- a/cypress/e2e/basic.cy.ts
+++ b/cypress/e2e/basic.cy.ts
@@ -25,7 +25,7 @@ describe("404 page", () => {
   it("creates an octaplex", () => {
     cy.visit("/non-existing-page");
     cy.contains("h2", "Not found");
-    cy.get("a").last().click();
+    cy.get("#octaplex").click();
     cy.get("button").first().click();
     cy.contains("h2", "Scale data");
     cy.get("#scale-name").should(
diff --git a/package-lock.json b/package-lock.json
index 0df40f59..1caef265 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "scale-workshop",
-  "version": "3.0.0-beta.27",
+  "version": "3.0.0-beta.28",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "scale-workshop",
-      "version": "3.0.0-beta.27",
+      "version": "3.0.0-beta.28",
       "dependencies": {
         "isomorphic-qwerty": "^0.0.2",
         "ji-lattice": "^0.0.3",
@@ -14,7 +14,7 @@
         "moment-of-symmetry": "^0.5.2",
         "pinia": "^2.1.7",
         "qs": "^6.12.0",
-        "sonic-weave": "^0.1.1",
+        "sonic-weave": "^0.2.0",
         "sw-synth": "^0.1.0",
         "temperaments": "^0.5.3",
         "values.js": "^2.1.1",
@@ -5455,9 +5455,9 @@
       }
     },
     "node_modules/sonic-weave": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/sonic-weave/-/sonic-weave-0.1.1.tgz",
-      "integrity": "sha512-zhCZ046qwdQ8+skDQkRrr70Sf3yNwEwZxxVy+zS4L4c3Vv9u/4MmxiRYr7d7o7LJuZMwE6QmmD1P6fELXjyYmA==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/sonic-weave/-/sonic-weave-0.2.0.tgz",
+      "integrity": "sha512-dc9Gd0V5hSR2Xc1nXopLjuqas39UcDEfqRDl6GmQQ3riHW/eaLCSlSfhh2Xo91L2sZHnL1n9oJEbnEbxNSmQBw==",
       "dependencies": {
         "moment-of-symmetry": "^0.5.3",
         "xen-dev-utils": "^0.7.0"
diff --git a/package.json b/package.json
index 0475f02e..76267354 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scale-workshop",
-  "version": "3.0.0-beta.27",
+  "version": "3.0.0-beta.28",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
@@ -21,7 +21,7 @@
     "moment-of-symmetry": "^0.5.2",
     "pinia": "^2.1.7",
     "qs": "^6.12.0",
-    "sonic-weave": "^0.1.1",
+    "sonic-weave": "^0.2.0",
     "sw-synth": "^0.1.0",
     "temperaments": "^0.5.3",
     "values.js": "^2.1.1",
diff --git a/src/App.vue b/src/App.vue
index 2fcbb06b..61a4a162 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -313,7 +313,7 @@ function typingKeydown(event: CoordinateKeyboardEvent) {
   let index = scale.scale.baseMidiNote + scale.scale.size * scale.equaveShift + scale.degreeShift
 
   if (scale.keyboardMode === 'isomorphic') {
-    index += x * state.isomorphicHorizontal + (2 - y) * state.isomorphicVertical
+    index += x * scale.isomorphicHorizontal + (2 - y) * scale.isomorphicVertical
   } else {
     if (scale.qwertyMapping.has(event.code)) {
       // QWERTY mapping incorporates shifts
@@ -356,8 +356,8 @@ onMounted(() => {
       scale.userBaseFrequency = scaleWorkshopOneData.freq
       scale.autoFrequency = false
       scale.baseMidiNote = scaleWorkshopOneData.midi
-      state.isomorphicHorizontal = scaleWorkshopOneData.horizontal
-      state.isomorphicVertical = scaleWorkshopOneData.vertical
+      scale.isomorphicHorizontal = scaleWorkshopOneData.horizontal
+      scale.isomorphicVertical = scaleWorkshopOneData.vertical
 
       if (scaleWorkshopOneData.data !== undefined) {
         const colors = scaleWorkshopOneData.colors ?? ''
@@ -394,8 +394,8 @@ onMounted(() => {
       scale.userBaseFrequency = decodedState.baseFrequency
       scale.autoFrequency = false
       scale.baseMidiNote = decodedState.baseMidiNote
-      state.isomorphicHorizontal = decodedState.isomorphicHorizontal
-      state.isomorphicVertical = decodedState.isomorphicVertical
+      scale.isomorphicHorizontal = decodedState.isomorphicHorizontal
+      scale.isomorphicVertical = decodedState.isomorphicVertical
       scale.keyboardMode = decodedState.keyboardMode
       scale.pianoMode = pianoMode
       scale.equaveShift = decodedState.equaveShift
@@ -505,6 +505,10 @@ function panic() {
     :typingKeyboard="typingKeyboard"
     @panic="panic"
   />
+  <footer id="app-footer">
+    <RouterLink to="/privacy-policy">Privacy policy</RouterLink>,
+    <RouterLink to="/terms-of-service">Terms of service</RouterLink>
+  </footer>
 </template>
 
 <style>
@@ -600,4 +604,14 @@ nav a:first-of-type {
 #app-tray ul li .active {
   color: var(--color-accent-text);
 }
+
+#app-footer {
+  font-size: small;
+  line-height: 1;
+  padding-right: 1em;
+  text-align: right;
+}
+#app-footer a {
+  color: var(--color-text-mute);
+}
 </style>
diff --git a/src/__tests__/util.spec.ts b/src/__tests__/util.spec.ts
index 0cd95b97..7869a817 100644
--- a/src/__tests__/util.spec.ts
+++ b/src/__tests__/util.spec.ts
@@ -1,6 +1,13 @@
 import { describe, it, expect } from 'vitest'
 
-import { autoKeyColors, formatExponential, formatHertz, gapKeyColors } from '../utils'
+import {
+  autoKeyColors,
+  encodeUrlSafe64,
+  formatExponential,
+  formatHertz,
+  gapKeyColors,
+  randomId
+} from '../utils'
 
 function naiveExponential(x: number, fractionDigits = 3) {
   if (Math.abs(x) < 10000) {
@@ -92,3 +99,27 @@ describe('Gap key color algorithm', () => {
     )
   })
 })
+
+describe('URL safe number encoder', () => {
+  it('encodes the whole range', () => {
+    const expected = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-~'
+    for (let i = 0; i < 64; ++i) {
+      expect(encodeUrlSafe64(i)).toBe(expected[i])
+    }
+  })
+})
+
+describe('Unique ID generator', () => {
+  it('produces a short URL-friendly identifier', () => {
+    const urlSafe = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-~'
+    const id = randomId()
+    expect(id).toHaveLength(9)
+    for (const char of id) {
+      expect(urlSafe).toContain(char)
+    }
+  })
+
+  it("won't collide with this particular identifier for 30 years", () => {
+    expect(randomId()).not.toBe('oKh5gWb04')
+  })
+})
diff --git a/src/components/ExporterButtons.vue b/src/components/ExporterButtons.vue
index 64626b9d..f5fe068f 100644
--- a/src/components/ExporterButtons.vue
+++ b/src/components/ExporterButtons.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { APP_TITLE } from '@/constants'
+import { API_URL, APP_TITLE } from '@/constants'
 import { exportFile, type ExporterKey } from '@/exporters'
 import type { ExporterParams } from '@/exporters/base'
+import { useAudioStore } from '@/stores/audio'
 import { useScaleStore } from '@/stores/scale'
 import { useStateStore } from '@/stores/state'
-import { sanitizeFilename } from '@/utils'
-import { defineAsyncComponent, ref } from 'vue'
+import { makeEnvelope, sanitizeFilename } from '@/utils'
+import { computed, defineAsyncComponent, ref } from 'vue'
 
 const KorgExportModal = defineAsyncComponent(
   () => import('@/components/modals/export/KorgExport.vue')
@@ -19,42 +20,90 @@ const ReaperExportModal = defineAsyncComponent(
 
 const state = useStateStore()
 const scale = useScaleStore()
+const audio = useAudioStore()
 
-const exportTextClipboard = ref('[URL sharing disabled]')
+const exportTextClipboard = ref(
+  API_URL ? "Copy this scale's unique URL to clipboard" : '[URL sharing disabled]'
+)
 const showKorgExportModal = ref(false)
 const showMtsSysexExportModal = ref(false)
 const showReaperExportModal = ref(false)
 
+const uploadBody = computed(() => {
+  return JSON.stringify({
+    id: scale.id,
+    payload: {
+      scale: scale.toJSON(),
+      audio: audio.toJSON()
+    },
+    envelope: makeEnvelope(state.shareStatistics)
+  })
+})
+
+function uploadScale(retries = 1): Promise<string> {
+  const uploadId = scale.id
+  if (scale.uploadedId === uploadId) {
+    return Promise.resolve(`${window.location.host}/scale/${uploadId}`)
+  }
+  return new Promise((resolve) => {
+    if (!API_URL) {
+      return resolve(window.location.host)
+    }
+    fetch(new URL('scale', API_URL), { method: 'POST', body: uploadBody.value })
+      .then((res) => {
+        // Id collision: Retry
+        if (res.status === 409 && retries > 0) {
+          scale.rerollId()
+          return uploadScale(retries - 1).then(resolve)
+        }
+        if (res.ok) {
+          scale.uploadedId = uploadId
+          return resolve(`${window.location.host}/scale/${uploadId}`)
+        } else {
+          return resolve(window.location.host)
+        }
+      })
+      .catch(() => resolve(window.location.host))
+  })
+}
+
+defineExpose({ uploadScale })
+
 function copyToClipboard() {
-  exportTextClipboard.value = 'No!'
-  window.setTimeout(() => {
-    exportTextClipboard.value = '[URL sharing disabled]'
-  }, 5000)
-  /*
-  window.navigator.clipboard.writeText(window.location.href)
-  exportTextClipboard.value = '[Copied URL to clipboard]'
-  window.setTimeout(() => {
-    exportTextClipboard.value = "Copy this scale's unique URL to clipboard"
-  }, 5000)
-  */
+  if (API_URL) {
+    uploadScale().then((url) => {
+      window.navigator.clipboard.writeText(url)
+      exportTextClipboard.value = '[Copied URL to clipboard]'
+      window.setTimeout(() => {
+        exportTextClipboard.value = "Copy this scale's unique URL to clipboard"
+      }, 5000)
+    })
+  } else {
+    exportTextClipboard.value = 'You must have sw-server running for this to work!'
+    window.setTimeout(() => {
+      exportTextClipboard.value = '[URL sharing disabled]'
+    }, 5000)
+  }
 }
 
 function doExport(exporter: ExporterKey) {
-  const params: ExporterParams = {
-    newline: state.newline,
-    scaleUrl: window.location.href,
-    filename: sanitizeFilename(scale.scale.title),
-    relativeIntervals: scale.relativeIntervals,
-    scale: scale.scale,
-    labels: scale.labels,
-    midiOctaveOffset: -1,
-    description: scale.scale.title,
-    sourceText: scale.sourceText,
-    appTitle: APP_TITLE,
-    date: new Date()
-  }
+  uploadScale().then((scaleUrl) => {
+    const params: ExporterParams = {
+      newline: state.newline,
+      scaleUrl,
+      filename: sanitizeFilename(scale.scale.title),
+      relativeIntervals: scale.relativeIntervals,
+      scale: scale.scale,
+      labels: scale.labels,
+      midiOctaveOffset: -1,
+      description: scale.scale.title,
+      sourceText: scale.sourceText,
+      appTitle: APP_TITLE,
+      date: new Date()
+    }
 
-  exportFile(exporter, params)
+    exportFile(exporter, params)
+  })
 }
 </script>
 <template>
@@ -93,7 +142,7 @@ function doExport(exporter: ExporterKey) {
     />
   </Teleport>
   <h2>Export current settings</h2>
-  <a href="#" class="btn disabled" @click="copyToClipboard">
+  <a href="#" :class="{ btn: true, disabled: !API_URL }" @click="copyToClipboard">
     <p><strong>Share scale</strong></p>
     <p>{{ exportTextClipboard }}</p>
   </a>
diff --git a/src/constants.ts b/src/constants.ts
index 41a8acba..c5ad088e 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -2,6 +2,9 @@ import { Interval, TimeMonzo } from 'sonic-weave'
 import { version } from '../package.json'
 import { Fraction, PRIME_CENTS } from 'xen-dev-utils'
 
+// .env config
+export const API_URL: string | undefined = import.meta.env.VITE_API_URL
+
 // GLOBALS
 export const APP_TITLE = `Scale Workshop ${version}`
 
diff --git a/src/main.ts b/src/main.ts
index c74443cb..1ec74768 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,32 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from '@/App.vue'
 import router from '@/router'
+import { API_URL } from './constants'
+
+if (import.meta.env.DEV) {
+  if (API_URL) {
+    fetch(API_URL)
+      .then((res) => res.text())
+      .then((body) => {
+        if (!body.includes('Scale Workshop server')) {
+          console.warn('VITE_API_URL responded with foreign data.')
+          console.log(body)
+        } else {
+          console.info('VITE_API_URL responded. Scale URLs should work.')
+        }
+      })
+      .catch((err) => {
+        console.warn('VITE_API_URL did not respond. Is sw-server running?')
+        console.error(err)
+      })
+  } else {
+    console.warn('VITE_API_URL not configured. Scale URLs will not work.')
+  }
+}
+
+if (!localStorage.getItem('uuid')) {
+  localStorage.setItem('uuid', crypto.randomUUID())
+}
 
 const app = createApp(App)
 
diff --git a/src/router/index.ts b/src/router/index.ts
index cf64acc2..677804c3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -37,6 +37,21 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue')
     },
+    {
+      path: '/scale/:id',
+      name: 'load-scale',
+      component: () => import('../views/LoadScaleView.vue')
+    },
+    {
+      path: '/privacy-policy',
+      name: 'privacy-policy',
+      component: () => import('../views/PrivacyPolicy.vue')
+    },
+    {
+      path: '/terms-of-service',
+      name: 'terms-of-service',
+      component: () => import('../views/TermsOfService.vue')
+    },
     {
       path: '/analysis',
       name: 'analysis',
diff --git a/src/scale.ts b/src/scale.ts
index 6aab29ec..da0bd83e 100644
--- a/src/scale.ts
+++ b/src/scale.ts
@@ -38,6 +38,39 @@ export class Scale {
     return valueToCents(this.equaveRatio)
   }
 
+  /**
+   * Convert this {@link Scale} instance to JSON.
+   * @returns The serialized object with property `type` set to `'ScaleWorkshopScale'`.
+   */
+  toJSON() {
+    return {
+      type: 'ScaleWorkshopScale',
+      intervalRatios: this.intervalRatios,
+      baseFrequency: this.baseFrequency,
+      baseMidiNote: this.baseMidiNote,
+      title: this.title
+    }
+  }
+
+  /**
+   * Revive a {@link Scale} instance produced by `Scale.toJSON()`. Return everything else as is.
+   *
+   * Intended usage:
+   * ```ts
+   * const data = JSON.parse(serializedData, Scale.reviver);
+   * ```
+   *
+   * @param key Property name.
+   * @param value Property value.
+   * @returns Deserialized {@link Scale} instance or other data without modifications.
+   */
+  static reviver(key: string, value: any) {
+    if (typeof value === 'object' && value !== null && value.type === 'ScaleWorkshopScale') {
+      return new Scale(value.intervalRatios, value.baseFrequency, value.baseMidiNote, value.title)
+    }
+    return value
+  }
+
   /**
    * Obtain the ratio agains the base MIDI note.
    * @param index MIDI index of a note.
diff --git a/src/stores/__tests__/scale.spec.ts b/src/stores/__tests__/scale.spec.ts
new file mode 100644
index 00000000..661e1a53
--- /dev/null
+++ b/src/stores/__tests__/scale.spec.ts
@@ -0,0 +1,42 @@
+import { describe, beforeEach, it, expect } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { useScaleStore } from '../scale'
+import { Scale } from '../../scale'
+import { Interval } from 'sonic-weave'
+
+const SERIALIZED = String.raw`{"scale":{"type":"ScaleWorkshopScale","intervalRatios":[1.148698354997035,1.3195079107728942,1.515716566510398,1.7411011265922482,2],"baseFrequency":261.6255653005987,"baseMidiNote":60,"title":""},"relativeIntervals":[{"type":"Interval","v":{"type":"TimeMonzo","t":{"n":0,"d":1},"p":[1,5],"r":{"n":1,"d":1}},"d":1,"s":0,"l":"","n":{"type":"n","n":1,"d":5,"p":null,"q":null},"t":[]},{"type":"Interval","v":{"type":"TimeMonzo","t":{"n":0,"d":1},"p":[2,5],"r":{"n":1,"d":1}},"d":1,"s":0,"l":"","n":{"type":"n","n":2,"d":5,"p":null,"q":null},"t":[]},{"type":"Interval","v":{"type":"TimeMonzo","t":{"n":0,"d":1},"p":[3,5],"r":{"n":1,"d":1}},"d":1,"s":0,"l":"","n":{"type":"n","n":3,"d":5,"p":null,"q":null},"t":[]},{"type":"Interval","v":{"type":"TimeMonzo","t":{"n":0,"d":1},"p":[4,5],"r":{"n":1,"d":1}},"d":1,"s":0,"l":"","n":{"type":"n","n":4,"d":5,"p":null,"q":null},"t":[]},{"type":"Interval","v":{"type":"TimeMonzo","t":{"n":0,"d":1},"p":[1,1],"r":{"n":1,"d":1}},"d":1,"s":0,"l":"","n":{"type":"n","n":5,"d":5,"p":null,"q":null},"t":[]}],"name":"","baseMidiNote":60,"userBaseFrequency":261.63,"autoFrequency":true,"autoColors":"silver","sourceText":"tet(5)","colors":["silver","silver","silver","silver","gray"],"labels":["1\\5","2\\5","3\\5","4\\5","5\\5"],"error":"","warning":"","isomorphicVertical":5,"isomorphicHorizontal":1,"keyboardMode":"isomorphic","equaveShift":0,"degreeShift":0,"pianoMode":"Asdf","accidentalColor":"black","lowAccidentalColor":"maroon","middleAccidentalColor":"navy","highAccidentalColor":"indigo"}`
+
+describe('Scale store', () => {
+  beforeEach(() => {
+    // creates a fresh pinia and makes it active
+    // so it's automatically picked up by any useStore() call
+    // without having to pass it to it: `useStore(pinia)`
+    setActivePinia(createPinia())
+  })
+
+  it('serializes 5edo', () => {
+    const scale = useScaleStore()
+    scale.sourceText = 'tet(5)'
+    scale.computeScale()
+    const serialized = JSON.stringify(scale)
+    expect(serialized).toBe(SERIALIZED)
+  })
+
+  it('deserializes 5edo', () => {
+    const data = JSON.parse(SERIALIZED, (key: string, value: any) =>
+      Scale.reviver(key, Interval.reviver(key, value))
+    )
+    data.id = '123abcABC'
+    const scale = useScaleStore()
+    scale.fromJSON(data)
+    expect(scale.id).toBe('123abcABC')
+    expect(scale.uploadedId).toBe('123abcABC')
+    const centss = scale.scale.getCentsRange(60, 66)
+    expect(centss[0]).toBeCloseTo(0)
+    expect(centss[1]).toBeCloseTo(240)
+    expect(centss[2]).toBeCloseTo(480)
+    expect(centss[3]).toBeCloseTo(720)
+    expect(centss[4]).toBeCloseTo(960)
+    expect(centss[5]).toBeCloseTo(1200)
+  })
+})
diff --git a/src/stores/audio.ts b/src/stores/audio.ts
index 00e710e0..4503d180 100644
--- a/src/stores/audio.ts
+++ b/src/stores/audio.ts
@@ -25,6 +25,8 @@ import {
 type AudioStore = {
   initialize: () => void
   unintialize: () => Promise<void>
+  toJSON: () => any
+  fromJSON: (data: any) => void
   context: Ref<AudioContext>
   mainVolume: Ref<number>
   waveform: Ref<string>
@@ -363,13 +365,7 @@ export const useAudioStore = defineStore<'audio', AudioStore>('audio', () => {
     pingPongGainNode.value.gain.setValueAtTime(newValue, context.value.currentTime)
   })
 
-  return {
-    // Methods
-    initialize,
-    unintialize,
-
-    // Public state
-    context,
+  const LIVE_STATE = {
     mainVolume,
     waveform,
     attackTime,
@@ -380,16 +376,49 @@ export const useAudioStore = defineStore<'audio', AudioStore>('audio', () => {
     spread,
     aperiodicWaveform,
     audioDelay,
-    maxPolyphony,
-    synth,
     synthType,
-    virtualSynth,
-    pingPongDelay,
     pingPongDelayTime,
     pingPongFeedback,
     pingPongGain,
-    pingPongSeparation,
+    pingPongSeparation
+  }
+
+  /**
+   * Convert live state to a format suitable for storing on the server.
+   */
+  function toJSON() {
+    const result: any = {}
+    for (const [key, value] of Object.entries(LIVE_STATE)) {
+      result[key] = value.value
+    }
+    return result
+  }
 
+  /**
+   * Apply revived state to current state.
+   * @param data JSON data as an Object instance.
+   */
+  function fromJSON(data: any) {
+    for (const key in LIVE_STATE) {
+      LIVE_STATE[key as keyof typeof LIVE_STATE].value = data[key]
+    }
+  }
+
+  return {
+    // Methods
+    initialize,
+    unintialize,
+    toJSON,
+    fromJSON,
+
+    // Live state
+    ...LIVE_STATE,
+    // Other public state
+    context,
+    maxPolyphony,
+    synth,
+    virtualSynth,
+    pingPongDelay,
     // "Private" state must be exposed for Pinia
     mainGain,
     mainLowpass,
diff --git a/src/stores/scale.ts b/src/stores/scale.ts
index b0cd55d4..3643e5f3 100644
--- a/src/stores/scale.ts
+++ b/src/stores/scale.ts
@@ -4,7 +4,8 @@ import {
   type AccidentalStyle,
   syncValues,
   isBlackMidiNote,
-  midiNoteNumberToName
+  midiNoteNumberToName,
+  randomId
 } from '@/utils'
 import { defineStore } from 'pinia'
 import { computed, ref, watch } from 'vue'
@@ -94,6 +95,9 @@ export const useScaleStore = defineStore('scale', () => {
   const error = ref('')
   const warning = ref('')
 
+  // Isomorphic offsets don't couple to anything else here, but they're part of the shareable live state.
+  const isomorphicVertical = ref(5)
+  const isomorphicHorizontal = ref(1)
   // Keyboard mode affects both physical qwerty and virtual keyboards
   const keyboardMode = ref<'isomorphic' | 'piano'>('isomorphic')
   // QWERTY mapping is coupled to equave and degree shifts
@@ -109,6 +113,9 @@ export const useScaleStore = defineStore('scale', () => {
   const middleAccidentalColor = ref('navy')
   const highAccidentalColor = ref('indigo')
 
+  const id = ref('000000000')
+  const uploadedId = ref('000000000')
+
   // === Computed state ===
   const sourcePrefix = computed(() => {
     const base = `numComponents(${DEFAULT_NUMBER_OF_COMPONENTS})\n`
@@ -334,6 +341,10 @@ export const useScaleStore = defineStore('scale', () => {
   }
 
   // Methods
+  function rerollId() {
+    id.value = randomId()
+  }
+
   function getUserScopeVisitor() {
     const globalVisitor = getGlobalScaleWorkshopVisitor()
     const visitor = new StatementVisitor(globalVisitor)
@@ -435,27 +446,21 @@ export const useScaleStore = defineStore('scale', () => {
     }
   }
 
-  return {
-    // Live state
+  const LIVE_STATE = {
     name,
     baseMidiNote,
     userBaseFrequency,
     autoFrequency,
     autoColors,
-    baseFrequencyDisplay,
-    sourcePrefix,
     sourceText,
     scale,
     relativeIntervals,
     colors,
     labels,
-    latticePermutation,
-    inverseLatticePermutation,
-    latticeIntervals,
-    latticeColors,
-    latticeLabels,
     error,
     warning,
+    isomorphicVertical,
+    isomorphicHorizontal,
     keyboardMode,
     equaveShift,
     degreeShift,
@@ -463,12 +468,69 @@ export const useScaleStore = defineStore('scale', () => {
     accidentalColor,
     lowAccidentalColor,
     middleAccidentalColor,
-    highAccidentalColor,
+    highAccidentalColor
+  }
+
+  let skipNextRerollWatch = false
+  watch(Object.values(LIVE_STATE), () => {
+    if (skipNextRerollWatch) {
+      skipNextRerollWatch = false
+      return
+    }
+    if (uploadedId.value === id.value) {
+      rerollId()
+    }
+  })
+
+  /**
+   * Convert live state to a format suitable for storing on the server.
+   */
+  function toJSON() {
+    const result: any = {
+      scale: scale.value.toJSON(),
+      relativeIntervals: relativeIntervals.value.map((i) => i.toJSON())
+    }
+    for (const [key, value] of Object.entries(LIVE_STATE)) {
+      if (key in result) {
+        continue
+      }
+      result[key] = value.value
+    }
+    return result
+  }
+
+  /**
+   * Apply revived state to current state.
+   * @param data JSON revived through {@link Scale.reviver} and {@link Interval.reviver}.
+   */
+  function fromJSON(data: any) {
+    skipNextRerollWatch = true
+    for (const key in LIVE_STATE) {
+      LIVE_STATE[key as keyof typeof LIVE_STATE].value = data[key]
+    }
+    id.value = data['id']
+    uploadedId.value = data['id']
+  }
+
+  return {
+    // Live state
+    ...LIVE_STATE,
+    id,
+    uploadedId,
     // Presistent state
     accidentalPreference,
     hasLeftOfZ,
     gas,
     // Computed state
+    // With setters
+    baseFrequencyDisplay,
+    // Get only
+    sourcePrefix,
+    latticePermutation,
+    inverseLatticePermutation,
+    latticeIntervals,
+    latticeColors,
+    latticeLabels,
     frequencies,
     centss,
     qwertyMapping,
@@ -476,10 +538,13 @@ export const useScaleStore = defineStore('scale', () => {
     whiteIndices,
     whiteModeOffset,
     // Methods
+    rerollId,
     getUserScopeVisitor,
     computeScale,
     getFrequency,
     colorForIndex,
-    labelForIndex
+    labelForIndex,
+    toJSON,
+    fromJSON
   }
 })
diff --git a/src/stores/state.ts b/src/stores/state.ts
index a8a93c40..23463e62 100644
--- a/src/stores/state.ts
+++ b/src/stores/state.ts
@@ -4,8 +4,6 @@ import { UNIX_NEWLINE } from '@/constants'
 import { syncValues } from '@/utils'
 
 export const useStateStore = defineStore('state', () => {
-  const isomorphicVertical = ref(5)
-  const isomorphicHorizontal = ref(1)
   // Mapping from MIDI index to number of interfaces currently pressing the key down
   const heldNotes = reactive(new Map<number, number>())
   const typingActive = ref(true)
@@ -48,6 +46,9 @@ export const useStateStore = defineStore('state', () => {
   const degreeUpCode = ref(storage.getItem('degreeUpCode') ?? 'NumpadAdd')
   const degreeDownCode = ref(storage.getItem('degreeDownCode') ?? 'NumpadSubtract')
 
+  // Opt-in for user statistics
+  const shareStatistics = ref(storage.getItem('shareStatistics') === 'true')
+
   // Local storage watchers
   syncValues({
     newline,
@@ -68,7 +69,8 @@ export const useStateStore = defineStore('state', () => {
     equaveUpCode,
     equaveDownCode,
     degreeUpCode,
-    degreeDownCode
+    degreeDownCode,
+    shareStatistics
   })
   watch(
     colorScheme,
@@ -81,8 +83,6 @@ export const useStateStore = defineStore('state', () => {
 
   return {
     // Live state
-    isomorphicVertical,
-    isomorphicHorizontal,
     heldNotes,
     typingActive,
     latticeType,
@@ -106,6 +106,7 @@ export const useStateStore = defineStore('state', () => {
     equaveUpCode,
     equaveDownCode,
     degreeUpCode,
-    degreeDownCode
+    degreeDownCode,
+    shareStatistics
   }
 })
diff --git a/src/utils.ts b/src/utils.ts
index 0166072b..7cfe51a5 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,6 +1,8 @@
 import { computed, watch, type ComputedRef, type Ref } from 'vue'
 import { gcd, mmod } from 'xen-dev-utils'
 import { evaluateExpression, getSourceVisitor, Interval, parseAST, repr } from 'sonic-weave'
+import { version } from '../package.json'
+import { Scale } from './scale'
 
 /**
  * Calculate the smallest power of two greater or equal to the input value.
@@ -472,3 +474,79 @@ export function padEndOrTruncate<T>(array: T[], targetLength: number, padValue:
   }
   array.length = targetLength
 }
+
+const URL_SAFE_CHARS64 = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-~'
+
+export function encodeUrlSafe64(n: number) {
+  if (n < 0 || n >= 64 || !Number.isInteger(n)) {
+    throw new Error('Number outside integer range 0-63')
+  }
+  return URL_SAFE_CHARS64[n]
+}
+
+/**
+ * Generate a random 9-character identifier
+ * @returns Random identifiers with a low chance of collision
+ */
+export function randomId() {
+  // Coarce timestamp for indexing in ~30 year cycles
+  const msSince1970 = new Date().valueOf()
+  const hour = Math.floor(msSince1970 / (1000 * 60 * 60))
+  const hourLow = hour & 63
+  const hourMid = (hour >> 5) & 63
+  const hourHigh = (hour >> 10) & 63
+
+  const ns = [hourLow, hourMid, hourHigh]
+
+  // Random segment to avoid collisions within one hour
+  // Chance of collision assuming 1000 identifiers per hour ~ 0.047 %
+  const r = new Uint32Array(1)
+  crypto.getRandomValues(r)
+  for (let i = 0; i < 6; ++i) {
+    ns.push(r[0] & 63)
+    r[0] >>>= 5
+  }
+  // 2 bits of randomness wasted
+
+  return ns.map(encodeUrlSafe64).join('')
+}
+
+export function isRandomId(identifier: string) {
+  if (identifier.length !== 9) {
+    return false
+  }
+  for (const char of identifier) {
+    if (!URL_SAFE_CHARS64.includes(char)) {
+      return false
+    }
+  }
+  return true
+}
+
+export function makeEnvelope(shareStatistics = false) {
+  const sonicWeaveVersion = evaluateExpression('VERSION')
+  const msSince1970 = new Date().valueOf()
+  let navigatorPart = null
+  let userUUID = null
+  if (shareStatistics) {
+    navigatorPart = {
+      userAgent: navigator.userAgent,
+      language: navigator.language,
+      languages: navigator.languages
+    }
+    userUUID = localStorage.getItem('uuid')
+  }
+  return {
+    version,
+    sonicWeaveVersion,
+    msSince1970,
+    navigator: navigatorPart,
+    userUUID
+  }
+}
+
+export function unpackPayload(body: string, id: string) {
+  const data = JSON.parse(body, (key, value) => Interval.reviver(key, Scale.reviver(key, value)))
+  data.scale.id = id
+  return data
+}
diff --git a/src/views/LoadScaleView.vue b/src/views/LoadScaleView.vue
new file mode 100644
index 00000000..9f75b274
--- /dev/null
+++ b/src/views/LoadScaleView.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { API_URL } from '@/constants'
+import { useAudioStore } from '@/stores/audio'
+import { useScaleStore } from '@/stores/scale'
+import { isRandomId, unpackPayload } from '@/utils'
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const scale = useScaleStore()
+const audio = useAudioStore()
+
+const router = useRouter()
+
+const text = ref('Loading scale...')
+
+onMounted(() => {
+  const route = useRoute()
+  const id = route.params.id as string
+
+  if (id === '000000000') {
+    router.push('/')
+    return
+  }
+
+  if (!isRandomId(id)) {
+    alert('Invalid identifier')
+    return
+  }
+
+  if (!API_URL) {
+    alert('API URL not configured')
+  } else {
+    fetch(new URL(`scale/${id}.json`, API_URL))
+      .then((res) => {
+        if (res.ok) {
+          text.value = 'Scale loaded. Redirecting...'
+          return res.text()
+        } else if (res.status === 404) {
+          text.value = 'Scale not found.'
+        } else {
+          text.value = 'Internal server error.'
+        }
+      })
+      .then((body) => {
+        if (body) {
+          const payload = unpackPayload(body, id)
+          audio.initialize()
+          audio.fromJSON(payload.audio)
+          scale.fromJSON(payload.scale)
+          router.push('/')
+        }
+      })
+      .catch(() => (text.value = 'Failed to connect to server.'))
+  }
+})
+</script>
+<template>
+  <div>
+    <p>{{ text }}</p>
+  </div>
+</template>
+
+<style scoped>
+div {
+  padding: 1rem;
+}
+p {
+  font-size: large;
+}
+</style>
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index e58ea5a3..0f3fb7ae 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -27,7 +27,7 @@ function openTheGates(source: string) {
       <h2>Not found</h2>
       <p>
         We couldn't find what you were looking for, but
-        <a href="#" @click="ritualInProgress = true">here's an octaplex</a>.
+        <a id="octaplex" href="#" @click="ritualInProgress = true">here's an octaplex</a>.
       </p>
     </div>
     <Teleport to="body">
diff --git a/src/views/PreferencesView.vue b/src/views/PreferencesView.vue
index f26a6355..958ce4a3 100644
--- a/src/views/PreferencesView.vue
+++ b/src/views/PreferencesView.vue
@@ -118,6 +118,15 @@ const scale = useScaleStore()
             />
           </div>
         </div>
+        <h2>Analytics</h2>
+        <div class="control-group">
+          <div class="control checkbox-container">
+            <input id="virtual-qwerty" type="checkbox" v-model="state.shareStatistics" />
+            <label for="virtual-qwerty" class="right-of-checkbox"
+              >Share statistics to help improve the application</label
+            >
+          </div>
+        </div>
       </div>
     </div>
   </main>
diff --git a/src/views/PrivacyPolicy.vue b/src/views/PrivacyPolicy.vue
new file mode 100644
index 00000000..9452d5f4
--- /dev/null
+++ b/src/views/PrivacyPolicy.vue
@@ -0,0 +1,209 @@
+<template>
+  <main id="privacy-policy">
+    <h1>Privacy Policy</h1>
+    <p>
+      The Xenharmonic Developers ("us", "we", or "our") operates Scale Workshop (the "Service").
+    </p>
+    <p>
+      This page informs you of our policies regarding the collection, use, and disclosure of
+      personal data when you use our Service and the choices you have associated with that data.
+    </p>
+    <p>
+      We use your data to provide and improve the Service. By using the Service, you agree to the
+      collection and use of informationin accordance with this policy. Unless otherwise defined in
+      this Privacy Policy,terms used in this Privacy Policy have the same meanings as in our
+      <RouterLink to="/terms-of-service">Terms of Service</RouterLink>.
+    </p>
+    <h2>Information Collection And Use</h2>
+    <p>
+      We collect several different types of information for various purposes to provide and improve
+      our Service to you.
+    </p>
+    <h3>Types of Data Collected</h3>
+    <h4>Personal Data</h4>
+    <p>
+      While using our Service, we may ask you to provide us with certain personally identifiable
+      information that can be used to contact or identify you ("Personal Data"). Personally
+      identifiable information may include, but is not limited to:
+    </p>
+    <ul>
+      <li>Email address</li>
+      <li>Cookies and Usage Data</li>
+    </ul>
+    <h4>Usage Data</h4>
+    <p>
+      We may also collect information how the Service is accessed and used ("Usage Data"). This
+      Usage Data may include information such as your computer's Internet Protocol address (e.g. IP
+      address), browser type, browser version, the pages of our Service that you visit, the time and
+      date of your visit, the time spent on those pages, unique device identifiers and other
+      diagnostic data.
+    </p>
+    <h4>Tracking</h4>
+    <p>
+      We use the browser local storage to track the activity on our Service and hold certain
+      information.
+    </p>
+    <p>
+      Local storage holds an anonymous unique identifier. This identifier is randomly computed by
+      your browser and stored on your device. Tracking technologies also used are beacons, tags, and
+      scripts to collect and track information and to improve and analyze our Service.
+    </p>
+    <p>
+      Local storage is specific to this website. You can instruct your browser to refuse the use of
+      local storage or to indicate when local storage is being used. However, if you do not accept
+      manipulation of the local storage, you may not be able to use some portions of our Service.
+    </p>
+    <p>Examples of data we store</p>
+    <ul>
+      <li><strong>Session data.</strong> We store session data to operate our Service.</li>
+      <li>
+        <strong>Preferences.</strong> We store preferences to remember your preferences and various
+        settings.
+      </li>
+    </ul>
+    <h2>Use of Data</h2>
+    <p>The Xenharmonic Developers use the collected data for various purposes:</p>
+    <ul>
+      <li>To provide and maintain the Service</li>
+      <li>To notify you about changes to our Service</li>
+      <li>
+        To allow you to participate in interactive features of our Service when you choose to do so
+      </li>
+      <li>To provide customer care and support</li>
+      <li>To provide analysis or valuable information so that we can improve the Service</li>
+      <li>To monitor the usage of the Service</li>
+      <li>To detect, prevent and address technical issues</li>
+    </ul>
+    <h2>Transfer Of Data</h2>
+    <p>
+      Your information, including Personal Data, may be transferred to — and maintained on —
+      computers located outside of your state, province, country or other governmental jurisdiction
+      where the data protection laws may differ than those from your jurisdiction.
+    </p>
+    <p>
+      If you are located outside of the European Union and choose to provide information to us,
+      please note that we transfer the data, including Personal Data, to the EU and process it
+      there.
+    </p>
+    <p>
+      Your consent to this Privacy Policy followed by your submission of such information represents
+      your agreement to that transfer.
+    </p>
+    <p>
+      The Xenharmonic Developers will take all steps reasonably necessary to ensure that your data
+      is treated securely and in accordance with this Privacy Policy and no transfer of your
+      Personal Data will take place to an organization or a country unless there are adequate
+      controls in place including the security of your data and other personal information.
+    </p>
+    <h2>Disclosure Of Data</h2>
+    <h3>Legal Requirements</h3>
+    <p>
+      The Xenharmonic Developers may disclose your Personal Data in the good faith belief that such
+      action is necessary to:
+    </p>
+    <ul>
+      <li>To comply with a legal obligation</li>
+      <li>To protect and defend the rights or property of The Xenharmonic Developers</li>
+      <li>To prevent or investigate possible wrongdoing in connection with the Service</li>
+      <li>To protect the personal safety of users of the Service or the public</li>
+      <li>To protect against legal liability</li>
+    </ul>
+    <h2>Security Of Data</h2>
+    <p>
+      The security of your data is important to us, but remember that no method of transmission over
+      the Internet, or method of electronic storage is 100% secure. While we strive to use
+      commercially acceptable means to protect your Personal Data, we cannot guarantee its absolute
+      security.
+    </p>
+    <h2>Service Providers</h2>
+    <p>
+      We may employ third party companies and individuals to facilitate our Service ("Service
+      Providers"), to provide the Service on our behalf, to perform Service-related services or to
+      assist us in analyzing how our Service is used.
+    </p>
+    <p>
+      These third parties have access to your Personal Data only to perform these tasks on our
+      behalf and are obligated not to disclose or use it for any other purpose.
+    </p>
+    <h3>Analytics</h3>
+    <p>We may use third-party Service Providers to monitor and analyze the use of our Service.</p>
+    <ul>
+      <li>
+        <p><strong>Google Analytics</strong></p>
+        <p>
+          Google Analytics is a web analytics service offered by Google that tracks and reports
+          website traffic. Google uses the data collected to track and monitor the use of our
+          Service. This data is shared with other Google services. Google may use the collected data
+          to contextualize and personalize the ads of its own advertising network.
+        </p>
+        <p>
+          You can opt-out of having made your activity on the Service available to Google Analytics
+          by installing the Google Analytics opt-out browser add-on. The add-on prevents the Google
+          Analytics JavaScript (ga.js, analytics.js, and dc.js) from sharing information with Google
+          Analytics about visits activity.
+        </p>
+        <p>
+          For more information on the privacy practices of Google, please visit the Google Privacy
+          &amp; Terms web page:
+          <a rel="nofollow" class="external free" href="https://policies.google.com/privacy?hl=en"
+            >https://policies.google.com/privacy?hl=en</a
+          >
+        </p>
+      </li>
+    </ul>
+    <h2>Links To Other Sites</h2>
+    <p>
+      Our Service may contain links to other sites that are not operated by us. If you click on a
+      third party link, you will be directed to that third party's site. We strongly advise you to
+      review the Privacy Policy of every site you visit.
+    </p>
+    <p>
+      We have no control over and assume no responsibility for the content, privacy policies or
+      practices of any third party sites or services.
+    </p>
+    <h2>Children's Privacy</h2>
+    <p>Our Service does not address anyone under the age of 13 ("Children").</p>
+    <p>
+      We do not knowingly collect personally identifiable information from anyone under the age of
+      13. If you are a parent or guardian and you are aware that your Children has provided us with
+      Personal Data, please contact us. If we become aware that we have collected Personal Data from
+      children without verification of parental consent, we take steps to remove that information
+      from our servers.
+    </p>
+    <h2>Changes To This Privacy Policy</h2>
+    <p>
+      We may update our Privacy Policy from time to time. We will notify you of any changes by
+      posting the new Privacy Policy on this page.
+    </p>
+    <p>
+      We will let you know via email and/or a prominent notice on our Service, prior to the change
+      becoming effective and update the "effective date" at the top of this Privacy Policy.
+    </p>
+    <p>
+      You are advised to review this Privacy Policy periodically for any changes. Changes to this
+      Privacy Policy are effective when they are posted on this page.
+    </p>
+    <h2>Contact Us</h2>
+    <p>
+      If you have any questions about this Privacy Policy, please contact us by email at
+      lumi.pakkanen<img
+        alt="@"
+        src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/At_sign.svg/17px-At_sign.svg.png"
+        decoding="async"
+        title="@"
+        width="17"
+        height="17"
+        srcset="
+          https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/At_sign.svg/26px-At_sign.svg.png 1.5x,
+          https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/At_sign.svg/34px-At_sign.svg.png 2x
+        "
+      />gmail.com.
+    </p>
+  </main>
+</template>
+<style scoped>
+#privacy-policy {
+  padding: 1em;
+  overflow-y: visible;
+}
+</style>
diff --git a/src/views/ScaleView.vue b/src/views/ScaleView.vue
index 57054378..9d202ba5 100644
--- a/src/views/ScaleView.vue
+++ b/src/views/ScaleView.vue
@@ -17,6 +17,7 @@ const state = useStateStore()
 const controls = ref<typeof ScaleControls | null>(null)
 const newScale = ref<typeof NewScale | null>(null)
 const modifyScale = ref<typeof ModifyScale | null>(null)
+const exporterButtons = ref<typeof ExporterButtons | null>(null)
 
 const updateScale = debounce(scale.computeScale)
 
@@ -56,8 +57,8 @@ onMounted(() => {
           :labels="scale.labels"
         />
       </div>
-      <div class="column exporters">
-        <ExporterButtons />
+      <div class="column exporters" @mouseenter="exporterButtons!.uploadScale()">
+        <ExporterButtons ref="exporterButtons" />
       </div>
     </div>
   </main>
diff --git a/src/views/SynthView.vue b/src/views/SynthView.vue
index 415dbb73..56098815 100644
--- a/src/views/SynthView.vue
+++ b/src/views/SynthView.vue
@@ -490,11 +490,11 @@ onUnmounted(() => {
           >
             <div class="control" style="width: 50%">
               <label for="vertical">Vertical</label>
-              <input type="number" id="vertical" v-model="state.isomorphicVertical" />
+              <input type="number" id="vertical" v-model="scale.isomorphicVertical" />
             </div>
             <div class="control" style="width: 50%">
               <label for="horizontal">Horizontal</label>
-              <input type="number" id="horizontal" v-model="state.isomorphicHorizontal" />
+              <input type="number" id="horizontal" v-model="scale.isomorphicHorizontal" />
             </div>
           </div>
         </template>
diff --git a/src/views/TermsOfService.vue b/src/views/TermsOfService.vue
new file mode 100644
index 00000000..ceef7c4d
--- /dev/null
+++ b/src/views/TermsOfService.vue
@@ -0,0 +1,304 @@
+<template>
+  <main id="terms-of-service">
+    <h2>Privacy Policy</h2>
+    <p>
+      We ask that you review the terms of our
+      <RouterLink to="/privacy-policy">Privacy Policy</RouterLink>, so that you are aware of how we
+      collect and use your information. Because our services are used by people all over the world,
+      personal information that we collect may be stored and processed in the European Union or any
+      country in which we or our agents maintain facilities. By using our services, you consent to
+      any such transfer of information outside your country.
+    </p>
+    <h2>Refraining from Certain Activities</h2>
+    <p>
+      Scale Workshop only exists because of the vibrant community of users like you who collaborate
+      to develop the application and write, edit, and curate the content. We happily welcome your
+      participation in this community. We encourage you to be civil and polite in your interactions
+      with others in the community, to act in good faith, and to make edits and contributions aimed
+      at furthering the mission of the application.
+    </p>
+    <p>
+      Certain activities, whether legal or illegal, may be harmful to other users and violate our
+      rules, and some activities may also subject you to liability. Therefore, for your own
+      protection and for that of other users, you may not engage in such activities on our sites.
+      These activities include:
+    </p>
+    <dl>
+      <dd><b>Harassing and Abusing Others</b></dd>
+    </dl>
+    <dl>
+      <dd>
+        <dl>
+          <dd>
+            <ul>
+              <li>Engaging in harassment, threats, stalking, spamming, or vandalism; and</li>
+              <li>Transmitting chain mail, junk mail, or spam to other users.</li>
+            </ul>
+          </dd>
+        </dl>
+      </dd>
+    </dl>
+    <dl>
+      <dd><b>Violating the Privacy of Others</b></dd>
+    </dl>
+    <dl>
+      <dd>
+        <dl>
+          <dd>
+            <ul>
+              <li>
+                Infringing the privacy rights of others under the laws of the United States of
+                America or other applicable laws (which may include the laws where you live or where
+                you view or edit content);
+              </li>
+              <li>
+                Soliciting personally identifiable information for purposes of harassment,
+                exploitation, violation of privacy, or any promotional or commercial purpose not
+                explicitly approved by the Xenharmonic Developers; and
+              </li>
+              <li>
+                Soliciting personally identifiable information from anyone under the age of 18 for
+                an illegal purpose or violating any applicable law regarding the health or
+                well-being of minors.
+              </li>
+            </ul>
+          </dd>
+        </dl>
+      </dd>
+    </dl>
+    <dl>
+      <dd><b>Engaging in False Statements, Impersonation, or Fraud</b></dd>
+    </dl>
+    <dl>
+      <dd>
+        <dl>
+          <dd>
+            <ul>
+              <li>
+                Intentionally or knowingly posting content that constitutes libel or defamation;
+              </li>
+              <li>With the intent to deceive, posting content that is false or inaccurate;</li>
+              <li>
+                Attempting to impersonate another user or individual, misrepresenting your
+                affiliation with any individual or entity, or using the username of another user
+                with the intent to deceive; and
+              </li>
+              <li>Engaging in fraud.</li>
+            </ul>
+          </dd>
+        </dl>
+      </dd>
+    </dl>
+    <dl>
+      <dd><b>Committing Infringement</b></dd>
+    </dl>
+    <dl>
+      <dd>
+        <dl>
+          <dd>
+            <ul>
+              <li>
+                Infringing copyrights, trademarks, patents, or other proprietary rights under
+                applicable law.
+              </li>
+            </ul>
+          </dd>
+        </dl>
+      </dd>
+    </dl>
+    <dl>
+      <dd><b>Misusing Our Services for Other Illegal Purposes</b></dd>
+    </dl>
+    <dl>
+      <dd>
+        <dl>
+          <dd>
+            <ul>
+              <li>
+                Posting child pornography or any other content that violates applicable law
+                concerning child pornography;
+              </li>
+              <li>
+                Posting or trafficking in obscene material that is unlawful under applicable law;
+                and
+              </li>
+              <li>Using the services in a manner that is inconsistent with applicable law.</li>
+            </ul>
+          </dd>
+        </dl>
+      </dd>
+    </dl>
+    <dl>
+      <dd><b>Engaging in Disruptive and Illegal Misuse of Facilities</b></dd>
+    </dl>
+    <dl>
+      <dd>
+        <dl>
+          <dd>
+            <ul>
+              <li>
+                Posting or distributing content that contains any viruses, malware, worms, Trojan
+                horses, malicious code, or other device that could harm our technical infrastructure
+                or system or that of our users;
+              </li>
+              <li>
+                Engaging in automated uses of the site that are abusive or disruptive of the
+                services and have not been approved by the Xenharmonic Developers community;
+              </li>
+              <li>
+                Disrupting the services by placing an undue burden on the application or the
+                networks or servers connected with the application;
+              </li>
+              <li>
+                Disrupting the services by inundating the application with communications or other
+                traffic that suggests no serious intent to use the application for its stated
+                purpose;
+              </li>
+              <li>
+                Knowingly accessing, tampering with, or using any of our non-public areas in our
+                computer systems without authorization; and
+              </li>
+              <li>
+                Probing, scanning, or testing the vulnerability of any of our technical systems or
+                networks unless all the following conditions are met:
+              </li>
+            </ul>
+          </dd>
+        </dl>
+      </dd>
+    </dl>
+    <dl>
+      <dd>
+        <dl>
+          <dd>
+            <dl>
+              <dd>
+                <ul>
+                  <li>
+                    such actions do not unduly abuse or disrupt our technical systems or networks;
+                  </li>
+                  <li>such actions are not for personal gain (except for credit for your work);</li>
+                  <li>
+                    you report any vulnerabilities to Scale Workshop admins (or fix it yourself);
+                    and
+                  </li>
+                  <li>you do not undertake such actions with malicious or destructive intent.</li>
+                </ul>
+              </dd>
+            </dl>
+          </dd>
+        </dl>
+      </dd>
+    </dl>
+    <p>
+      We reserve the right to exercise our enforcement discretion with respect to the above terms.
+    </p>
+    <h2>Password Security</h2>
+    <p>
+      You are responsible for safeguarding your own password and should never disclose it to any
+      third party.
+    </p>
+    <h2>DMCA Compliance</h2>
+    <p>
+      The Xenharmonic Developers wants to ensure that the content that we host can be re-used by
+      other users without fear of liability and that it is not infringing the proprietary rights of
+      others. In fairness to our users, as well as to other creators and copyright holders, our
+      policy is to respond to notices of alleged infringement that comply with the formalities of
+      the Digital Millennium Copyright Act (DMCA). Pursuant to the DMCA, we will terminate, in
+      appropriate circumstances, users and account holders of our system and network who are repeat
+      infringers.
+    </p>
+    <p>
+      However, we also recognize that not every takedown notice is valid or in good faith. In such
+      cases, we strongly encourage users to file counter-notifications when they appropriately
+      believe a DMCA takedown demand is invalid or improper. For more information on what to do if
+      you think a DMCA notice has been improperly filed, you may wish to consult the Chilling
+      Effects website.
+    </p>
+    <p>
+      If you are the owner of content that is being improperly used on one of the application
+      without your permission, you may request that the content be removed under the DMCA. To make
+      such a request, please email us at lumi.pakkanen<img
+        alt="@"
+        src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/At_sign.svg/17px-At_sign.svg.png"
+        decoding="async"
+        title="@"
+        width="17"
+        height="17"
+        srcset="
+          https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/At_sign.svg/26px-At_sign.svg.png 1.5x,
+          https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/At_sign.svg/34px-At_sign.svg.png 2x
+        "
+      />gmail.com or snail mail our designated agent at this address.
+    </p>
+    <p>
+      Alternatively, you may make a request to our community, which often handles copyright issues
+      faster and more effectively than prescribed under the DMCA. In that case, you can post a
+      notice explaining your copyright concerns. Before filing a DMCA claim, you also have the
+      option of sending an email to the community at lumi.pakkanen<img
+        alt="@"
+        src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/At_sign.svg/17px-At_sign.svg.png"
+        decoding="async"
+        title="@"
+        width="17"
+        height="17"
+        srcset="
+          https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/At_sign.svg/26px-At_sign.svg.png 1.5x,
+          https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/At_sign.svg/34px-At_sign.svg.png 2x
+        "
+      />gmail.com.
+    </p>
+    <h2>Third-party Websites and Resources</h2>
+    <p>
+      You are solely responsible for your use of any third-party websites or resources. Although the
+      application may contain links to third-party websites and resources, we do not endorse and are
+      not responsible or liable for their availability, accuracy, or the related content, products,
+      or services (including, without limitation, any viruses or other disabling features), nor do
+      we have any obligation to monitor such third-party content.
+    </p>
+    <h2>Disclaimers</h2>
+    <p>
+      Your use of our services is at your sole risk. We provide these services on an "as is" and "as
+      available" basis, and we expressly disclaim all express or implied warranties of all kinds,
+      including but not limited to the implied warranties of merchantability, fitness for a
+      particular purpose, and non-infringement. We make no warranty that our services will meet your
+      requirements, be safe, secure, uninterrupted, timely, accurate, or error-free, or that your
+      information will be secure.
+    </p>
+    <p>
+      We are not responsible for the content, data, or actions of third parties, and you release us,
+      our directors, officers, employees, and agents from any claims and damages, known and unknown,
+      arising out of or in any way connected with any claim you have against any such third parties.
+      No advice or information, whether oral or written, obtained by you from us or through or from
+      our services creates any warranty not expressly stated in these Terms of Use.
+    </p>
+    <p>
+      Any material downloaded or otherwise obtained through your use of our services is done at your
+      own discretion and risk, and you will be solely responsible for any damage to your computer
+      system or loss of data that results from the download of any such material. You agree that we
+      have no responsibility or liability for the deletion of, or the failure to store or to
+      transmit, any content or communication maintained by the service. We retain the right to
+      create limits on use and storage at our sole discretion at any time with or without notice.
+    </p>
+    <p>
+      Some states or jurisdictions do not allow the types of disclaimers in this section, so they
+      may not apply to you either in part or in full depending on the law.
+    </p>
+    <hr />
+    <p>
+      Shamelessly adapted from the
+      <a
+        rel="nofollow"
+        class="external text"
+        href="https://foundation.wikimedia.org/wiki/Terms_of_Use/en"
+        >Wikimedia Terms of Use</a
+      >.
+    </p>
+  </main>
+</template>
+<style scoped>
+#terms-of-service {
+  padding: 1em;
+  overflow-y: visible;
+}
+</style>
diff --git a/src/views/VirtualKeyboardView.vue b/src/views/VirtualKeyboardView.vue
index 32c99e98..d42ad5fc 100644
--- a/src/views/VirtualKeyboardView.vue
+++ b/src/views/VirtualKeyboardView.vue
@@ -39,8 +39,8 @@ type NoteOnCallback = (index: number) => NoteOff
       v-else
       :baseIndex="baseIndex"
       :baseMidiNote="scale.scale.baseMidiNote"
-      :isomorphicHorizontal="state.isomorphicHorizontal"
-      :isomorphicVertical="state.isomorphicVertical"
+      :isomorphicHorizontal="scale.isomorphicHorizontal"
+      :isomorphicVertical="scale.isomorphicVertical"
       :colorMap="scale.colorForIndex"
       :noteOn="noteOn"
       :heldNotes="state.heldNotes"
diff --git a/src/views/VirtualQwerty.vue b/src/views/VirtualQwerty.vue
index b557e472..abd44f88 100644
--- a/src/views/VirtualQwerty.vue
+++ b/src/views/VirtualQwerty.vue
@@ -25,12 +25,12 @@ const baseIndex = computed(
   <main>
     <VirtualTypingKeyboard
       :baseIndex="baseIndex"
-      :isomorphicHorizontal="state.isomorphicHorizontal"
+      :isomorphicHorizontal="scale.isomorphicHorizontal"
       :keyboardMode="scale.keyboardMode"
       :colorScheme="state.colorScheme"
       :qwertyMapping="scale.qwertyMapping"
       :hasLeftOfZ="scale.hasLeftOfZ"
-      :isomorphicVertical="state.isomorphicVertical"
+      :isomorphicVertical="scale.isomorphicVertical"
       :colorMap="scale.colorForIndex"
       :noteOn="noteOn"
       :heldNotes="state.heldNotes"