diff --git a/packages/tonal/tonal.mjs b/packages/tonal/tonal.mjs
index aa54098b..05979d5e 100644
--- a/packages/tonal/tonal.mjs
+++ b/packages/tonal/tonal.mjs
@@ -8,8 +8,8 @@ import { Note, Interval, Scale } from '@tonaljs/tonal';
 import { Pattern, mod } from '@strudel.cycles/core';
 
 // transpose note inside scale by offset steps
-// function scaleTranspose(scale: string, offset: number, note: string) {
-export function scaleTranspose(scale, offset, note) {
+// function scaleOffset(scale: string, offset: number, note: string) {
+function scaleOffset(scale, offset, note) {
   let [tonic, scaleName] = Scale.tokenize(scale);
   let { notes } = Scale.get(`${tonic} ${scaleName}`);
   notes = notes.map((note) => Note.get(note).pc); // use only pc!
@@ -71,7 +71,7 @@ Pattern.prototype._scaleTranspose = function (offset /* : number | string */) {
     if (typeof hap.value !== 'string') {
       throw new Error('can only use scaleTranspose with notes');
     }
-    return hap.withValue(() => scaleTranspose(hap.context.scale, Number(offset), hap.value));
+    return hap.withValue(() => scaleOffset(hap.context.scale, Number(offset), hap.value));
   });
 };
 Pattern.prototype._scale = function (scale /* : string */) {
@@ -81,7 +81,7 @@ Pattern.prototype._scale = function (scale /* : string */) {
     if (!isNaN(asNumber)) {
       let [tonic, scaleName] = Scale.tokenize(scale);
       const { pc, oct = 3 } = Note.get(tonic);
-      note = scaleTranspose(pc + ' ' + scaleName, asNumber, pc + oct);
+      note = scaleOffset(pc + ' ' + scaleName, asNumber, pc + oct);
     }
     return hap.withValue(() => note).setContext({ ...hap.context, scale });
   });
diff --git a/tutorial/package-lock.json b/tutorial/package-lock.json
index 4985d379..a0ef2676 100644
--- a/tutorial/package-lock.json
+++ b/tutorial/package-lock.json
@@ -22,6 +22,7 @@
         "postcss": "^8.4.13",
         "tailwindcss": "^3.0.24",
         "vite": "^2.9.9",
+        "vite-plugin-externals": "^0.5.0",
         "vite-plugin-mdx": "^3.5.10"
       }
     },
@@ -1226,6 +1227,12 @@
       "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==",
       "dev": true
     },
+    "node_modules/es-module-lexer": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz",
+      "integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==",
+      "dev": true
+    },
     "node_modules/esbuild": {
       "version": "0.14.39",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.39.tgz",
@@ -1673,6 +1680,20 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -1723,6 +1744,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+      "dev": true
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -2048,6 +2075,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
@@ -2098,6 +2137,15 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "node_modules/markdown-escapes": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
@@ -2689,6 +2737,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
+    },
     "node_modules/space-separated-tokens": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
@@ -2974,6 +3028,15 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -3057,6 +3120,33 @@
         }
       }
     },
+    "node_modules/vite-plugin-externals": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-externals/-/vite-plugin-externals-0.5.0.tgz",
+      "integrity": "sha512-y7SPpHGLSk5ELCbK0SBRJrEr2OuPFxCOKIVkrFECukp9w8hZwh3teCHo2U2UmJ8UHKUP7BoOhTw2DFRbq3GJfQ==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.4.0",
+        "es-module-lexer": "^0.4.1",
+        "fs-extra": "^10.0.0",
+        "magic-string": "^0.25.7"
+      },
+      "peerDependencies": {
+        "vite": "^2.0.0"
+      }
+    },
+    "node_modules/vite-plugin-externals/node_modules/acorn": {
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/vite-plugin-mdx": {
       "version": "3.5.10",
       "resolved": "https://registry.npmjs.org/vite-plugin-mdx/-/vite-plugin-mdx-3.5.10.tgz",
@@ -4261,6 +4351,12 @@
       "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==",
       "dev": true
     },
+    "es-module-lexer": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz",
+      "integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==",
+      "dev": true
+    },
     "esbuild": {
       "version": "0.14.39",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.39.tgz",
@@ -4501,6 +4597,17 @@
       "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
       "dev": true
     },
+    "fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      }
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -4535,6 +4642,12 @@
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
       "dev": true
     },
+    "graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+      "dev": true
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -4755,6 +4868,16 @@
       "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
       "dev": true
     },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      }
+    },
     "lilconfig": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
@@ -4799,6 +4922,15 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "markdown-escapes": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
@@ -5193,6 +5325,12 @@
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
       "dev": true
     },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
+    },
     "space-separated-tokens": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
@@ -5395,6 +5533,12 @@
         "unist-util-is": "^4.0.0"
       }
     },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -5442,6 +5586,26 @@
         "rollup": "^2.59.0"
       }
     },
+    "vite-plugin-externals": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-externals/-/vite-plugin-externals-0.5.0.tgz",
+      "integrity": "sha512-y7SPpHGLSk5ELCbK0SBRJrEr2OuPFxCOKIVkrFECukp9w8hZwh3teCHo2U2UmJ8UHKUP7BoOhTw2DFRbq3GJfQ==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.4.0",
+        "es-module-lexer": "^0.4.1",
+        "fs-extra": "^10.0.0",
+        "magic-string": "^0.25.7"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "8.7.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+          "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+          "dev": true
+        }
+      }
+    },
     "vite-plugin-mdx": {
       "version": "3.5.10",
       "resolved": "https://registry.npmjs.org/vite-plugin-mdx/-/vite-plugin-mdx-3.5.10.tgz",
diff --git a/tutorial/vite.config.js b/tutorial/vite.config.js
index 9b808a31..67e17b94 100644
--- a/tutorial/vite.config.js
+++ b/tutorial/vite.config.js
@@ -15,3 +15,7 @@ const options = {
 export default defineConfig({
   plugins: [react(), mdx(options)],
 });
+
+// jsxRuntime:'classic' to prevent "jsxDevRuntime.exports.jsxDEV is not a function" for dev mode
+// mode: 'development',
+// react({ jsxRuntime: 'classic' }),
\ No newline at end of file