From 6885227c304267842a36888bf93246e94d865462 Mon Sep 17 00:00:00 2001
From: Lumi Pakkanen <lumi.pakkanen@gmail.com>
Date: Sat, 15 Jun 2024 12:20:12 +0300
Subject: [PATCH] Fix auto-focus when async modal is opened

ref #49
---
 src/components/ExporterButtons.vue            |  3 +
 src/components/ModalDialog.vue                |  3 +-
 src/components/ModifyScale.vue                | 63 ++++++++++--
 src/components/NewScale.vue                   | 15 +++
 src/components/modals/ShareUrl.vue            | 95 -------------------
 src/components/modals/export/KorgExport.vue   |  3 +-
 .../modals/export/MtsSysexExport.vue          |  3 +-
 src/components/modals/export/ReaperExport.vue |  3 +-
 .../generation/CombinationProductSet.vue      |  6 +-
 .../modals/generation/ConcordanceShell.vue    |  6 +-
 .../modals/generation/EnumerateChord.vue      |  6 +-
 .../modals/generation/EqualTemperament.vue    |  6 +-
 .../modals/generation/EulerGenus.vue          |  6 +-
 .../modals/generation/GeneratorSequence.vue   |  6 +-
 .../modals/generation/HarmonicSeries.vue      |  6 +-
 .../modals/generation/HistoricalScale.vue     |  6 +-
 .../modals/generation/LoadPreset.vue          |  6 +-
 src/components/modals/generation/MosScale.vue |  5 +
 src/components/modals/generation/RankTwo.vue  |  5 +
 .../modals/generation/SpanLattice.vue         |  6 +-
 .../modals/generation/StackSteps.vue          |  6 +-
 .../modals/generation/SubharmonicSeries.vue   |  6 +-
 .../modals/generation/SummonOctaplex.vue      |  6 +-
 .../modification/ApproximateByHarmonics.vue   |  6 +-
 .../modification/ApproximateByRatios.vue      |  6 +-
 .../ApproximateBySubharmonics.vue             |  6 +-
 .../modification/CoalesceDuplicates.vue       |  6 +-
 .../modals/modification/ConvertType.vue       |  6 +-
 .../modals/modification/EnumerateScale.vue    |  6 +-
 .../modals/modification/EqualizeScale.vue     |  6 +-
 .../modals/modification/ExpandScale.vue       |  6 +-
 .../modals/modification/MergeOffsets.vue      |  6 +-
 .../modals/modification/RandomVariance.vue    |  6 +-
 .../modals/modification/RepeatScale.vue       |  6 +-
 .../modals/modification/RotateScale.vue       |  6 +-
 .../modals/modification/StretchScale.vue      |  6 +-
 .../modals/modification/TakeSubset.vue        |  6 +-
 .../modals/modification/TemperScale.vue       |  6 +-
 38 files changed, 231 insertions(+), 135 deletions(-)
 delete mode 100644 src/components/modals/ShareUrl.vue

diff --git a/src/components/ExporterButtons.vue b/src/components/ExporterButtons.vue
index 0e0994c3..3ef33aea 100644
--- a/src/components/ExporterButtons.vue
+++ b/src/components/ExporterButtons.vue
@@ -120,6 +120,7 @@ function doExport(exporter: ExporterKey) {
   <Teleport to="body">
     <KorgExportModal
       v-if="showKorgExportModal"
+      :show="showKorgExportModal"
       @confirm="showKorgExportModal = false"
       @cancel="showKorgExportModal = false"
       :newline="state.newline"
@@ -131,6 +132,7 @@ function doExport(exporter: ExporterKey) {
 
     <MtsSysexExportModal
       v-if="showMtsSysexExportModal"
+      :show="showMtsSysexExportModal"
       @confirm="showMtsSysexExportModal = false"
       @cancel="showMtsSysexExportModal = false"
       :newline="state.newline"
@@ -142,6 +144,7 @@ function doExport(exporter: ExporterKey) {
 
     <ReaperExportModal
       v-if="showReaperExportModal"
+      :show="showReaperExportModal"
       @confirm="showReaperExportModal = false"
       @cancel="showReaperExportModal = false"
       :newline="state.newline"
diff --git a/src/components/ModalDialog.vue b/src/components/ModalDialog.vue
index bf95d913..ebb54027 100644
--- a/src/components/ModalDialog.vue
+++ b/src/components/ModalDialog.vue
@@ -71,7 +71,8 @@ watch(
         }
       })
     }
-  }
+  },
+  { immediate: true } // Needed to make async components work.
 )
 </script>
 
diff --git a/src/components/ModifyScale.vue b/src/components/ModifyScale.vue
index feaba26d..61f7132d 100644
--- a/src/components/ModifyScale.vue
+++ b/src/components/ModifyScale.vue
@@ -185,46 +185,93 @@ defineExpose({ blur })
   <Teleport to="body">
     <ApproximateByHarmonicsModal
       v-if="showApproximateByHarmonicsModal"
+      :show="showApproximateByHarmonicsModal"
       @done="closeModals"
       @cancel="showApproximateByHarmonicsModal = false"
     />
     <ApproximateByRatiosModal
       v-if="showApproximateByRatiosModal"
+      :show="showApproximateByRatiosModal"
       @done="closeModals"
       @cancel="showApproximateByRatiosModal = false"
     />
     <ApproximateBySubharmonicsModal
       v-if="showApproximateBySubharmonicsModal"
+      :show="showApproximateBySubharmonicsModal"
       @done="closeModals"
       @cancel="showApproximateBySubharmonicsModal = false"
     />
     <CoalesceModal
       v-if="showCoalesceModal"
+      :show="showCoalesceModal"
       @done="closeModals"
       @cancel="showCoalesceModal = false"
     />
-    <ConvertModal v-if="showConvertModal" @done="closeModals" @cancel="showConvertModal = false" />
+    <ConvertModal
+      v-if="showConvertModal"
+      :show="showConvertModal"
+      @done="closeModals"
+      @cancel="showConvertModal = false"
+    />
     <EnumerateModal
       v-if="showEnumerateModal"
+      :show="showEnumerateModal"
       @done="closeModals"
       @cancel="showEnumerateModal = false"
     />
     <EqualizeModal
       v-if="showEqualizeModal"
+      :show="showEqualizeModal"
       @done="closeModals"
       @cancel="showEqualizeModal = false"
     />
-    <ExpandModal v-if="showExpandModal" @done="closeModals" @cancel="showExpandModal = false" />
+    <ExpandModal
+      v-if="showExpandModal"
+      :show="showExpandModal"
+      @done="closeModals"
+      @cancel="showExpandModal = false"
+    />
     <MergeOffsetsModal
       v-if="showMergeOffsetsModal"
+      :show="showMergeOffsetsModal"
       @done="closeModals"
       @cancel="showMergeOffsetsModal = false"
     />
-    <RandomModal v-if="showRandomModal" @done="closeModals" @cancel="showRandomModal = false" />
-    <RepeatModal v-if="showRepeatModal" @done="closeModals" @cancel="showRepeatModal = false" />
-    <RotateModal v-if="showRotateModal" @done="closeModals" @cancel="showRotateModal = false" />
-    <StretchModal v-if="showStretchModal" @done="closeModals" @cancel="showStretchModal = false" />
-    <SubsetModal v-if="showSubsetModal" @done="closeModals" @cancel="showSubsetModal = false" />
-    <TemperModal v-if="showTemperModal" @done="closeModals" @cancel="showTemperModal = false" />
+    <RandomModal
+      v-if="showRandomModal"
+      :show="showRandomModal"
+      @done="closeModals"
+      @cancel="showRandomModal = false"
+    />
+    <RepeatModal
+      v-if="showRepeatModal"
+      :show="showRepeatModal"
+      @done="closeModals"
+      @cancel="showRepeatModal = false"
+    />
+    <RotateModal
+      v-if="showRotateModal"
+      :show="showRotateModal"
+      @done="closeModals"
+      @cancel="showRotateModal = false"
+    />
+    <StretchModal
+      v-if="showStretchModal"
+      :show="showStretchModal"
+      @done="closeModals"
+      @cancel="showStretchModal = false"
+    />
+    <SubsetModal
+      v-if="showSubsetModal"
+      :show="showSubsetModal"
+      @done="closeModals"
+      @cancel="showSubsetModal = false"
+    />
+    <TemperModal
+      v-if="showTemperModal"
+      :show="showTemperModal"
+      @done="closeModals"
+      @cancel="showTemperModal = false"
+    />
   </Teleport>
 </template>
diff --git a/src/components/NewScale.vue b/src/components/NewScale.vue
index 91dd3292..b69ed3e4 100644
--- a/src/components/NewScale.vue
+++ b/src/components/NewScale.vue
@@ -168,50 +168,59 @@ defineExpose({ blur })
   />
 
   <Teleport to="body">
+    <!-- v-if is required to prevent premature asyncs while :show makes the focus watcher trigger -->
     <EnumerateModal
       v-if="showEnumerateModal"
+      :show="showEnumerateModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showEnumerateModal = false"
     />
     <EqualTemperamentModal
       v-if="showEqualTemperamentModal"
+      :show="showEqualTemperamentModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showEqualTemperamentModal = false"
     />
     <EulerGenusModal
       v-if="showEulerGenusModal"
+      :show="showEulerGenusModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showEulerGenusModal = false"
     />
     <GeneratorSequenceModal
       v-if="showGeneratorSequenceModal"
+      :show="showGeneratorSequenceModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showGeneratorSequenceModal = false"
     />
     <ConcordanceShellModal
       v-if="showConcordanceShellModal"
+      :show="showConcordanceShellModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showConcordanceShellModal = false"
     />
     <CpsModal
       v-if="showCpsModal"
+      :show="showCpsModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showCpsModal = false"
     />
     <HarmonicSeriesModal
       v-if="showHarmonicModal"
+      :show="showHarmonicModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showHarmonicModal = false"
     />
     <HistoricalModal
       v-if="showHistoricalModal"
+      :show="showHistoricalModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @update:baseFrequency="updateBaseFrequency"
@@ -220,18 +229,21 @@ defineExpose({ blur })
     />
     <LatticeModal
       v-if="showLatticeModal"
+      :show="showLatticeModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showLatticeModal = false"
     />
     <MosModal
       v-if="showMosModal"
+      :show="showMosModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showMosModal = false"
     />
     <PresetModal
       v-if="showPresetModal"
+      :show="showPresetModal"
       @update:scaleName="scale.name = $event"
       @update:baseFrequency="updateBaseFrequency"
       @update:baseMidiNote="scale.baseMidiNote = $event"
@@ -240,18 +252,21 @@ defineExpose({ blur })
     />
     <RankTwoModal
       v-if="showRankTwoModal"
+      :show="showRankTwoModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showRankTwoModal = false"
     />
     <StackModal
       v-if="showStackModal"
+      :show="showStackModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showStackModal = false"
     />
     <SubharmonicSeriesModal
       v-if="showSubharmonicModal"
+      :show="showSubharmonicModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showSubharmonicModal = false"
diff --git a/src/components/modals/ShareUrl.vue b/src/components/modals/ShareUrl.vue
deleted file mode 100644
index 57b5d19a..00000000
--- a/src/components/modals/ShareUrl.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<script setup lang="ts">
-import { nextTick, ref } from 'vue'
-import Modal from '@/components/ModalDialog.vue'
-
-const props = defineProps<{
-  scaleName: string
-  newline: string
-}>()
-
-const emit = defineEmits(['confirm', 'cancel'])
-defineExpose({ initialize })
-
-// This ref is for display purposes only.
-// The methods use location directly.
-const url = ref(window.location.href)
-const urlInput = ref<HTMLInputElement | null>(null)
-
-function initialize() {
-  url.value = window.location.href
-  nextTick(() => {
-    if (urlInput.value !== null) {
-      urlInput.value.select()
-      urlInput.value.setSelectionRange(0, 99999)
-    }
-  })
-}
-
-function copyToClipboard() {
-  window.navigator.clipboard.writeText(window.location.href)
-  emit('confirm')
-}
-
-function email() {
-  const recipient = ''
-  const subject = encodeURIComponent(`Scale Workshop - ${props.scaleName}`)
-  const bodyLines = [
-    'Sending you this musical scale:',
-    props.scaleName,
-    '',
-    'The link below has more info:',
-    '',
-    window.location.href
-  ]
-  const body = encodeURIComponent(bodyLines.join(props.newline))
-  window.open(`mailto:${recipient}?subject=${subject}&body=${body}`)
-}
-
-function tweet() {
-  const text = encodeURIComponent(props.scaleName + ' ♫ ' + window.location.href)
-  window.open(`https://twitter.com/intent/tweet?text=${text}`)
-}
-
-function postOnFacebook() {
-  let link: string
-  // Sharing a local URL won't work because Facebook screens the URL it receives.
-  if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-    link = encodeURIComponent('https://sevish.com/scaleworkshop/')
-  } else {
-    link = encodeURIComponent(window.location.href)
-  }
-  window.open(`https://www.facebook.com/sharer/sharer.php?u=${link}`)
-}
-</script>
-
-<template>
-  <Modal @confirm="copyToClipboard" @cancel="$emit('cancel')">
-    <template #header>
-      <h2>Share scale as URL</h2>
-    </template>
-    <template #body>
-      <div class="control-group">
-        <p>This sharing link allows others to try your scale.</p>
-        <textarea
-          ref="urlInput"
-          class="control"
-          style="resize: vertical"
-          rows="6"
-          readonly
-          v-model="url"
-        ></textarea>
-        <div class="control">
-          <button @click="email">Email</button>
-          <button href="#" @click="tweet">Twitter</button>
-          <button href="#" @click="postOnFacebook">Facebook</button>
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <div class="btn-group">
-        <button @click="copyToClipboard">Copy URL</button>
-        <button @click="$emit('cancel')">Cancel</button>
-      </div>
-    </template>
-  </Modal>
-</template>
diff --git a/src/components/modals/export/KorgExport.vue b/src/components/modals/export/KorgExport.vue
index 627940c7..d07a0d0a 100644
--- a/src/components/modals/export/KorgExport.vue
+++ b/src/components/modals/export/KorgExport.vue
@@ -8,6 +8,7 @@ import type { Interval } from 'sonic-weave'
 import type { Scale } from '@/scale'
 
 const props = defineProps<{
+  show: boolean
   newline: string
   midiOctaveOffset: number
   relativeIntervals: Interval[]
@@ -59,7 +60,7 @@ async function doExport() {
 </script>
 
 <template>
-  <Modal @cancel="$emit('cancel')">
+  <Modal :show="show" @cancel="$emit('cancel')">
     <template #header>
       <h2>Export Korg Sound Librarian scale</h2>
     </template>
diff --git a/src/components/modals/export/MtsSysexExport.vue b/src/components/modals/export/MtsSysexExport.vue
index ac62378e..a1b1adbe 100644
--- a/src/components/modals/export/MtsSysexExport.vue
+++ b/src/components/modals/export/MtsSysexExport.vue
@@ -9,6 +9,7 @@ import type { Scale } from '@/scale'
 import type { Interval } from 'sonic-weave'
 
 const props = defineProps<{
+  show: boolean
   newline: string
   midiOctaveOffset: number
   relativeIntervals: Interval[]
@@ -69,7 +70,7 @@ function doExport() {
 </script>
 
 <template>
-  <Modal @confirm="doExport" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="doExport" @cancel="$emit('cancel')">
     <template #header>
       <h2>Export MTS Bulk Tuning Dump</h2>
     </template>
diff --git a/src/components/modals/export/ReaperExport.vue b/src/components/modals/export/ReaperExport.vue
index 7dc1fd42..d6568d36 100644
--- a/src/components/modals/export/ReaperExport.vue
+++ b/src/components/modals/export/ReaperExport.vue
@@ -8,6 +8,7 @@ import type { Scale } from '@/scale'
 import type { Interval } from 'sonic-weave'
 
 const props = defineProps<{
+  show: boolean
   newline: string
   midiOctaveOffset: number
   relativeIntervals: Interval[]
@@ -55,7 +56,7 @@ function doExport() {
 </script>
 
 <template>
-  <Modal @confirm="doExport" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="doExport" @cancel="$emit('cancel')">
     <template #header>
       <h2>Export Reaper note name map</h2>
     </template>
diff --git a/src/components/modals/generation/CombinationProductSet.vue b/src/components/modals/generation/CombinationProductSet.vue
index 0115f36a..f54114a1 100644
--- a/src/components/modals/generation/CombinationProductSet.vue
+++ b/src/components/modals/generation/CombinationProductSet.vue
@@ -7,6 +7,10 @@ import { useModalStore } from '@/stores/modal'
 import { setAndReportValidity } from '@/utils'
 import { arrayToString, expandCode } from '@/utils'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['update:scaleName', 'update:source', 'cancel'])
 
 const modal = useModalStore()
@@ -47,7 +51,7 @@ function generate(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="generate" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="generate" @cancel="$emit('cancel')">
     <template #header>
       <h2>Generate combination product set</h2>
     </template>
diff --git a/src/components/modals/generation/ConcordanceShell.vue b/src/components/modals/generation/ConcordanceShell.vue
index 5edd86ca..dabfbaf9 100644
--- a/src/components/modals/generation/ConcordanceShell.vue
+++ b/src/components/modals/generation/ConcordanceShell.vue
@@ -7,6 +7,10 @@ import { expandCode } from '@/utils'
 import { linear } from 'sonic-weave'
 import { mmod } from 'xen-dev-utils'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['update:source', 'update:scaleName', 'cancel'])
 
 const modal = useModalStore()
@@ -51,7 +55,7 @@ function generate(shell = true, expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="generate" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="generate" @cancel="$emit('cancel')">
     <template #header>
       <h2>Generate VAO / concordance shell</h2>
     </template>
diff --git a/src/components/modals/generation/EnumerateChord.vue b/src/components/modals/generation/EnumerateChord.vue
index a54497cd..dfdfe038 100644
--- a/src/components/modals/generation/EnumerateChord.vue
+++ b/src/components/modals/generation/EnumerateChord.vue
@@ -3,6 +3,10 @@ import Modal from '@/components/ModalDialog.vue'
 import { expandCode } from '@/utils'
 import { useModalStore } from '@/stores/modal'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['update:source', 'update:scaleName', 'cancel'])
 
 const modal = useModalStore()
@@ -30,7 +34,7 @@ function generate(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="generate" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="generate" @cancel="$emit('cancel')">
     <template #header>
       <h2>Enumerate chord</h2>
     </template>
diff --git a/src/components/modals/generation/EqualTemperament.vue b/src/components/modals/generation/EqualTemperament.vue
index f8119625..19b89e97 100644
--- a/src/components/modals/generation/EqualTemperament.vue
+++ b/src/components/modals/generation/EqualTemperament.vue
@@ -7,6 +7,10 @@ import { useModalStore } from '@/stores/modal'
 import { setAndReportValidity } from '@/utils'
 import { useStateStore } from '@/stores/state'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['update:source', 'update:scaleName', 'cancel'])
 
 const state = useStateStore()
@@ -56,7 +60,7 @@ function generate(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="generate" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="generate" @cancel="$emit('cancel')">
     <template #header>
       <h2>Generate equal temperament</h2>
     </template>
diff --git a/src/components/modals/generation/EulerGenus.vue b/src/components/modals/generation/EulerGenus.vue
index 1a753fb7..53151df1 100644
--- a/src/components/modals/generation/EulerGenus.vue
+++ b/src/components/modals/generation/EulerGenus.vue
@@ -4,6 +4,10 @@ import { clamp } from 'xen-dev-utils'
 import { useModalStore } from '@/stores/modal'
 import { expandCode } from '@/utils'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['update:source', 'update:scaleName', 'cancel'])
 
 const modal = useModalStore()
@@ -35,7 +39,7 @@ function generate(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="generate" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="generate" @cancel="$emit('cancel')">
     <template #header>
       <h2>Generate Euler-Fokker genus</h2>
     </template>
diff --git a/src/components/modals/generation/GeneratorSequence.vue b/src/components/modals/generation/GeneratorSequence.vue
index 814a461b..20e3b7a6 100644
--- a/src/components/modals/generation/GeneratorSequence.vue
+++ b/src/components/modals/generation/GeneratorSequence.vue
@@ -6,6 +6,10 @@ import { useModalStore } from '@/stores/modal'
 import { OCTAVE } from '@/constants'
 import { ref, watch } from 'vue'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['update:source', 'update:scaleName', 'cancel'])
 
 const modal = useModalStore()
@@ -107,7 +111,7 @@ function generate(kind: 'expanded' | 'raw' | 'lattice' = 'expanded') {
 </script>
 
 <template>
-  <Modal @confirm="generate" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="generate" @cancel="$emit('cancel')">
     <template #header>
       <h2>Generator sequence</h2>
     </template>
diff --git a/src/components/modals/generation/HarmonicSeries.vue b/src/components/modals/generation/HarmonicSeries.vue
index 7ba6da1d..5502b735 100644
--- a/src/components/modals/generation/HarmonicSeries.vue
+++ b/src/components/modals/generation/HarmonicSeries.vue
@@ -4,6 +4,10 @@ import { clamp } from 'xen-dev-utils'
 import { useModalStore } from '@/stores/modal'
 import { expandCode } from '@/utils'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['update:source', 'update:scaleName', 'cancel'])
 
 const modal = useModalStore()
@@ -25,7 +29,7 @@ function generate(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="generate" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="generate" @cancel="$emit('cancel')">
     <template #header>
       <h2>Generate harmonic series segment</h2>
     </template>
diff --git a/src/components/modals/generation/HistoricalScale.vue b/src/components/modals/generation/HistoricalScale.vue
index 7e3b6c7e..562074da 100644
--- a/src/components/modals/generation/HistoricalScale.vue
+++ b/src/components/modals/generation/HistoricalScale.vue
@@ -11,6 +11,10 @@ import { useStateStore } from '@/stores/state'
 import { Interval, TimeMonzo } from 'sonic-weave'
 import { useScaleStore } from '@/stores/scale'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits([
   'update:scaleName',
   'update:source',
@@ -169,7 +173,7 @@ function generate(expand = true) {
 }
 </script>
 <template>
-  <Modal @confirm="generate" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="generate" @cancel="$emit('cancel')">
     <template #header>
       <h2>Generate historical temperament</h2>
     </template>
diff --git a/src/components/modals/generation/LoadPreset.vue b/src/components/modals/generation/LoadPreset.vue
index 150598a5..79c9c6ae 100644
--- a/src/components/modals/generation/LoadPreset.vue
+++ b/src/components/modals/generation/LoadPreset.vue
@@ -4,6 +4,10 @@ import { presets, presetsByGroup } from '@/presets'
 import { expandCode } from '@/utils'
 import { ref } from 'vue'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits([
   'update:source',
   'update:scaleName',
@@ -29,7 +33,7 @@ function confirm(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="confirm" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="confirm" @cancel="$emit('cancel')">
     <template #header>
       <h2>Load preset scale</h2>
     </template>
diff --git a/src/components/modals/generation/MosScale.vue b/src/components/modals/generation/MosScale.vue
index ff515a62..23328227 100644
--- a/src/components/modals/generation/MosScale.vue
+++ b/src/components/modals/generation/MosScale.vue
@@ -22,6 +22,10 @@ const COLORS = {
   unknown: 'indigo'
 }
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['update:source', 'update:scaleName', 'cancel'])
 
 const modal = useModalStore()
@@ -135,6 +139,7 @@ function edoClick(info: MosScaleInfo) {
 
 <template>
   <Modal
+    :show="show"
     extraStyle="min-width: 40rem;max-width: 41rem"
     @confirm="generate"
     @cancel="$emit('cancel')"
diff --git a/src/components/modals/generation/RankTwo.vue b/src/components/modals/generation/RankTwo.vue
index 16a5aeb6..4b71233a 100644
--- a/src/components/modals/generation/RankTwo.vue
+++ b/src/components/modals/generation/RankTwo.vue
@@ -15,6 +15,10 @@ const state = useStateStore()
 const scale = useScaleStore()
 const rank2 = useRank2Store()
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['update:scaleName', 'update:source', 'cancel'])
 
 const commasInput = ref<HTMLInputElement | null>(null)
@@ -170,6 +174,7 @@ function generate(expand = true) {
 
 <template>
   <Modal
+    :show="show"
     extraStyle="min-width: 30rem;max-width: 31rem"
     @confirm="generate"
     @cancel="$emit('cancel')"
diff --git a/src/components/modals/generation/SpanLattice.vue b/src/components/modals/generation/SpanLattice.vue
index e4628249..62dc36f1 100644
--- a/src/components/modals/generation/SpanLattice.vue
+++ b/src/components/modals/generation/SpanLattice.vue
@@ -10,6 +10,10 @@ import { useStateStore } from '@/stores/state'
 import { arrayToString, expandCode, parseInterval } from '@/utils'
 import { Interval, intervalValueAs } from 'sonic-weave'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['update:source', 'update:scaleName', 'cancel'])
 
 const lattice = useLatticeStore()
@@ -94,7 +98,7 @@ function generate(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="generate" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="generate" @cancel="$emit('cancel')">
     <template #header>
       <h2>Generate parallelotope</h2>
     </template>
diff --git a/src/components/modals/generation/StackSteps.vue b/src/components/modals/generation/StackSteps.vue
index 4610ecb6..36c30d68 100644
--- a/src/components/modals/generation/StackSteps.vue
+++ b/src/components/modals/generation/StackSteps.vue
@@ -4,6 +4,10 @@ import Modal from '@/components/ModalDialog.vue'
 import { debounce, expandCode } from '@/utils'
 import { evaluateExpression } from 'sonic-weave'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['update:source', 'update:scaleName', 'cancel'])
 
 const scaleData = ref('')
@@ -32,7 +36,7 @@ function generate(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="generate" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="generate" @cancel="$emit('cancel')">
     <template #header>
       <h2>Stack relative scale steps</h2>
     </template>
diff --git a/src/components/modals/generation/SubharmonicSeries.vue b/src/components/modals/generation/SubharmonicSeries.vue
index 6efe93e8..f4e22393 100644
--- a/src/components/modals/generation/SubharmonicSeries.vue
+++ b/src/components/modals/generation/SubharmonicSeries.vue
@@ -4,6 +4,10 @@ import { clamp } from 'xen-dev-utils'
 import { useModalStore } from '@/stores/modal'
 import { expandCode } from '@/utils'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['update:source', 'update:scaleName', 'cancel'])
 
 const modal = useModalStore()
@@ -21,7 +25,7 @@ function generate(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="generate" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="generate" @cancel="$emit('cancel')">
     <template #header>
       <h2>Generate subharmonic series segment</h2>
     </template>
diff --git a/src/components/modals/generation/SummonOctaplex.vue b/src/components/modals/generation/SummonOctaplex.vue
index f6b50a40..700b28ff 100644
--- a/src/components/modals/generation/SummonOctaplex.vue
+++ b/src/components/modals/generation/SummonOctaplex.vue
@@ -6,6 +6,10 @@ import { OCTAVE } from '@/constants'
 import { computedAndError, expandCode, setAndReportValidity } from '@/utils'
 import { parseChord } from 'sonic-weave'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['update:source', 'update:scaleName', 'cancel'])
 
 const basisString = ref('3 5 7 11')
@@ -49,7 +53,7 @@ function generate(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="generate" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="generate" @cancel="$emit('cancel')">
     <template #header>
       <h2>Generate octaplex (24-cell)</h2>
     </template>
diff --git a/src/components/modals/modification/ApproximateByHarmonics.vue b/src/components/modals/modification/ApproximateByHarmonics.vue
index bd99929a..82b5e686 100644
--- a/src/components/modals/modification/ApproximateByHarmonics.vue
+++ b/src/components/modals/modification/ApproximateByHarmonics.vue
@@ -5,6 +5,10 @@ import { computed } from 'vue'
 import { useScaleStore } from '@/stores/scale'
 import { valueToCents } from 'xen-dev-utils'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['done', 'cancel'])
 
 const modal = useModalStore()
@@ -40,7 +44,7 @@ function modify(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="modify" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="modify" @cancel="$emit('cancel')">
     <template #header>
       <h2>Approximate by harmonics</h2>
     </template>
diff --git a/src/components/modals/modification/ApproximateByRatios.vue b/src/components/modals/modification/ApproximateByRatios.vue
index 901f31cc..d0019303 100644
--- a/src/components/modals/modification/ApproximateByRatios.vue
+++ b/src/components/modals/modification/ApproximateByRatios.vue
@@ -15,6 +15,10 @@ import { useScaleStore } from '@/stores/scale'
 
 const MAX_LENGTH = 128
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['done', 'cancel'])
 
 const approx = useApproximateByRatiosStore()
@@ -129,7 +133,7 @@ function cancel() {
 </script>
 
 <template>
-  <Modal @confirm="modify(true)" @cancel="cancel">
+  <Modal :show="show" @confirm="modify(true)" @cancel="cancel">
     <template #header>
       <h2>Approximate by ratios</h2>
     </template>
diff --git a/src/components/modals/modification/ApproximateBySubharmonics.vue b/src/components/modals/modification/ApproximateBySubharmonics.vue
index 1e5226c9..33f14eb8 100644
--- a/src/components/modals/modification/ApproximateBySubharmonics.vue
+++ b/src/components/modals/modification/ApproximateBySubharmonics.vue
@@ -5,6 +5,10 @@ import { useScaleStore } from '@/stores/scale'
 import { computed } from 'vue'
 import { valueToCents } from 'xen-dev-utils'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['done', 'cancel'])
 
 const modal = useModalStore()
@@ -32,7 +36,7 @@ function modify(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="modify" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="modify" @cancel="$emit('cancel')">
     <template #header>
       <h2>Approximate by subharmonics</h2>
     </template>
diff --git a/src/components/modals/modification/CoalesceDuplicates.vue b/src/components/modals/modification/CoalesceDuplicates.vue
index 1be5db55..86f19d23 100644
--- a/src/components/modals/modification/CoalesceDuplicates.vue
+++ b/src/components/modals/modification/CoalesceDuplicates.vue
@@ -4,6 +4,10 @@ import { useModalStore } from '@/stores/modal'
 import { useScaleStore } from '@/stores/scale'
 import { centString } from '@/utils'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['done', 'cancel'])
 
 const modal = useModalStore()
@@ -21,7 +25,7 @@ function modify(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="modify" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="modify" @cancel="$emit('cancel')">
     <template #header>
       <h2>Coalesce duplicates</h2>
     </template>
diff --git a/src/components/modals/modification/ConvertType.vue b/src/components/modals/modification/ConvertType.vue
index d17fee2f..9e205bf1 100644
--- a/src/components/modals/modification/ConvertType.vue
+++ b/src/components/modals/modification/ConvertType.vue
@@ -6,6 +6,10 @@ import { useStateStore } from '@/stores/state'
 import { useScaleStore } from '@/stores/scale'
 import { centString } from '@/utils'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['done', 'cancel'])
 
 const modal = useModalStore()
@@ -47,7 +51,7 @@ function modify(expand = false) {
 </script>
 
 <template>
-  <Modal @confirm="modify" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="modify" @cancel="$emit('cancel')">
     <template #header>
       <h2>Convert interval values</h2>
     </template>
diff --git a/src/components/modals/modification/EnumerateScale.vue b/src/components/modals/modification/EnumerateScale.vue
index bbbd0362..5808cb48 100644
--- a/src/components/modals/modification/EnumerateScale.vue
+++ b/src/components/modals/modification/EnumerateScale.vue
@@ -2,6 +2,10 @@
 import Modal from '@/components/ModalDialog.vue'
 import { useScaleStore } from '@/stores/scale'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['done', 'cancel'])
 
 const scale = useScaleStore()
@@ -64,7 +68,7 @@ function revposition() {
 </script>
 
 <template>
-  <Modal @confirm="$emit('done')" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="$emit('done')" @cancel="$emit('cancel')">
     <template #header>
       <h2>Enumerate</h2>
     </template>
diff --git a/src/components/modals/modification/EqualizeScale.vue b/src/components/modals/modification/EqualizeScale.vue
index 9cbea8c9..7156b20e 100644
--- a/src/components/modals/modification/EqualizeScale.vue
+++ b/src/components/modals/modification/EqualizeScale.vue
@@ -8,6 +8,10 @@ import { computed } from 'vue'
 import { valueToCents } from 'xen-dev-utils'
 import { linear } from 'sonic-weave'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['done', 'cancel'])
 
 const modal = useModalStore()
@@ -49,7 +53,7 @@ function modify(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="modify" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="modify" @cancel="$emit('cancel')">
     <template #header>
       <h2>Equalize</h2>
     </template>
diff --git a/src/components/modals/modification/ExpandScale.vue b/src/components/modals/modification/ExpandScale.vue
index 39ed99c8..1cae6e79 100644
--- a/src/components/modals/modification/ExpandScale.vue
+++ b/src/components/modals/modification/ExpandScale.vue
@@ -3,6 +3,10 @@ import Modal from '@/components/ModalDialog.vue'
 import { useModalStore } from '@/stores/modal'
 import { useScaleStore } from '@/stores/scale'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['done', 'cancel'])
 
 const scale = useScaleStore()
@@ -23,7 +27,7 @@ function modify() {
 </script>
 
 <template>
-  <Modal @confirm="modify" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="modify" @cancel="$emit('cancel')">
     <template #header>
       <h2>Expand</h2>
     </template>
diff --git a/src/components/modals/modification/MergeOffsets.vue b/src/components/modals/modification/MergeOffsets.vue
index 84f78029..3f89cb56 100644
--- a/src/components/modals/modification/MergeOffsets.vue
+++ b/src/components/modals/modification/MergeOffsets.vue
@@ -6,6 +6,10 @@ import { arrayToString } from '@/utils'
 import type { Interval } from 'sonic-weave'
 import { ref, watch } from 'vue'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['done', 'cancel'])
 
 const modal = useModalStore()
@@ -29,7 +33,7 @@ function modify(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="modify" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="modify" @cancel="$emit('cancel')">
     <template #header>
       <h2>Merge offset copies of the scale</h2>
     </template>
diff --git a/src/components/modals/modification/RandomVariance.vue b/src/components/modals/modification/RandomVariance.vue
index d61e182a..9401806d 100644
--- a/src/components/modals/modification/RandomVariance.vue
+++ b/src/components/modals/modification/RandomVariance.vue
@@ -6,6 +6,10 @@ import { useScaleStore } from '@/stores/scale'
 import { centString } from '@/utils'
 import { useStateStore } from '@/stores/state'
 
+defineProps<{
+  show: boolean
+}>()
+
 const EPSILON = 1e-6
 
 const emit = defineEmits(['done', 'cancel'])
@@ -34,7 +38,7 @@ function modify(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="modify" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="modify" @cancel="$emit('cancel')">
     <template #header>
       <h2>Random variance</h2>
     </template>
diff --git a/src/components/modals/modification/RepeatScale.vue b/src/components/modals/modification/RepeatScale.vue
index 52c2cbfc..858df145 100644
--- a/src/components/modals/modification/RepeatScale.vue
+++ b/src/components/modals/modification/RepeatScale.vue
@@ -3,6 +3,10 @@ import Modal from '@/components/ModalDialog.vue'
 import { useModalStore } from '@/stores/modal'
 import { useScaleStore } from '@/stores/scale'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['done', 'cancel'])
 
 const modal = useModalStore()
@@ -20,7 +24,7 @@ function modify(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="modify" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="modify" @cancel="$emit('cancel')">
     <template #header>
       <h2>Repeat scale</h2>
     </template>
diff --git a/src/components/modals/modification/RotateScale.vue b/src/components/modals/modification/RotateScale.vue
index 6a0da943..cc9225ec 100644
--- a/src/components/modals/modification/RotateScale.vue
+++ b/src/components/modals/modification/RotateScale.vue
@@ -3,6 +3,10 @@ import Modal from '@/components/ModalDialog.vue'
 import { useModalStore } from '@/stores/modal'
 import { useScaleStore } from '@/stores/scale'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['done', 'cancel'])
 
 const modal = useModalStore()
@@ -20,7 +24,7 @@ function modify(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="modify" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="modify" @cancel="$emit('cancel')">
     <template #header>
       <h2>Rotate</h2>
     </template>
diff --git a/src/components/modals/modification/StretchScale.vue b/src/components/modals/modification/StretchScale.vue
index 2ebafaf7..174237fb 100644
--- a/src/components/modals/modification/StretchScale.vue
+++ b/src/components/modals/modification/StretchScale.vue
@@ -7,6 +7,10 @@ import { useScaleStore } from '@/stores/scale'
 import { useStateStore } from '@/stores/state'
 import { decimalString } from '@/utils'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['done', 'cancel'])
 
 const modal = useModalStore()
@@ -25,7 +29,7 @@ function modify(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="modify" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="modify" @cancel="$emit('cancel')">
     <template #header>
       <h2>Stretch/compress scale</h2>
     </template>
diff --git a/src/components/modals/modification/TakeSubset.vue b/src/components/modals/modification/TakeSubset.vue
index cd194d6f..ca8154df 100644
--- a/src/components/modals/modification/TakeSubset.vue
+++ b/src/components/modals/modification/TakeSubset.vue
@@ -5,6 +5,10 @@ import { useModalStore } from '@/stores/modal'
 import { useScaleStore } from '@/stores/scale'
 import { arrayToString } from '@/utils'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['done', 'cancel'])
 
 const scale = useScaleStore()
@@ -47,7 +51,7 @@ function modify(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="modify" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="modify" @cancel="$emit('cancel')">
     <template #header>
       <h2>Take subset</h2>
     </template>
diff --git a/src/components/modals/modification/TemperScale.vue b/src/components/modals/modification/TemperScale.vue
index e3fe9eb2..b0770a92 100644
--- a/src/components/modals/modification/TemperScale.vue
+++ b/src/components/modals/modification/TemperScale.vue
@@ -7,6 +7,10 @@ import { useScaleStore } from '@/stores/scale'
 import { useStateStore } from '@/stores/state'
 import { setAndReportValidity } from '@/utils'
 
+defineProps<{
+  show: boolean
+}>()
+
 const emit = defineEmits(['done', 'cancel'])
 
 const temper = useTemperStore()
@@ -77,7 +81,7 @@ function modify(expand = true) {
 </script>
 
 <template>
-  <Modal @confirm="modify" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="modify" @cancel="$emit('cancel')">
     <template #header>
       <h2>Temper scale</h2>
     </template>