diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd013752..318fb2ad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,47 @@
+# [4.0.0](https://github.com/vuejs/repl/compare/v4.0.0-beta.0...v4.0.0) (2024-02-10)
+
+
+### Features
+
+* expose loading status ([eee6bb3](https://github.com/vuejs/repl/commit/eee6bb38ddecbe8bf7ba3ab77d6a549e654b6313))
+* save vue version ([08b4492](https://github.com/vuejs/repl/commit/08b4492fe883bdd4bbe7fd972cd3fbbd8f6416cf))
+
+
+
+# [4.0.0-beta.0](https://github.com/vuejs/repl/compare/v4.0.0-alpha.1...v4.0.0-beta.0) (2024-02-10)
+
+
+### Bug Fixes
+
+* pass readonly in code mirror editor ([1100158](https://github.com/vuejs/repl/commit/1100158aec97dae9cf47ac04ff2bb9ec00d05e58))
+
+
+
+# [4.0.0-alpha.1](https://github.com/vuejs/repl/compare/v4.0.0-alpha.0...v4.0.0-alpha.1) (2024-01-24)
+
+
+### Bug Fixes
+
+* don't re-create import map file ([9e6f078](https://github.com/vuejs/repl/commit/9e6f078206883821d9bc618a194cf50333f38d3d))
+
+
+
+# [4.0.0-alpha.0](https://github.com/vuejs/repl/compare/v3.3.0...v4.0.0-alpha.0) (2024-01-21)
+
+
+### Bug Fixes
+
+* add corresponding black theme background ([#206](https://github.com/vuejs/repl/issues/206)) ([3921c85](https://github.com/vuejs/repl/commit/3921c85f90a40a871838f9740fa3588e2cfa4758))
+* don't overwrite `a` tag without href ([#209](https://github.com/vuejs/repl/issues/209)) ([c7fcf38](https://github.com/vuejs/repl/commit/c7fcf381f195ffce6284cc92c26f8a90e09b484a))
+* don't show tsconfig if not present ([ca548b2](https://github.com/vuejs/repl/commit/ca548b240addd4f58851a545622684a00eb09a0a))
+
+
+### Features
+
+* export `package.json` ([79a22de](https://github.com/vuejs/repl/commit/79a22deb84aa50e31cf6506a67e93f69291fb82f))
+
+
+
 # [3.3.0](https://github.com/vuejs/repl/compare/v3.2.0...v3.3.0) (2024-01-11)
 
 
diff --git a/package.json b/package.json
index 01268cd5..4b07089f 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@vue/repl",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "description": "Vue component for editing Vue components",
-  "packageManager": "pnpm@8.14.0",
+  "packageManager": "pnpm@8.15.1",
   "type": "module",
   "main": "dist/ssr-stub.js",
   "module": "dist/vue-repl.js",
@@ -38,6 +38,9 @@
       ]
     }
   },
+  "publishConfig": {
+    "tag": "latest"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -68,35 +71,35 @@
   },
   "homepage": "https://github.com/vuejs/repl#readme",
   "devDependencies": {
-    "@babel/types": "^7.23.6",
+    "@babel/types": "^7.23.9",
     "@rollup/plugin-replace": "^5.0.5",
     "@types/codemirror": "^5.60.15",
     "@types/hash-sum": "^1.0.2",
-    "@types/node": "^20.10.6",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@vitejs/plugin-vue": "^5.0.2",
+    "@types/node": "^20.11.17",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@volar/cdn": "~1.11.1",
     "@volar/monaco": "~1.11.1",
     "@volar/typescript": "~1.11.1",
     "@vue/language-service": "1.9.0-alpha.3",
-    "bumpp": "^9.2.1",
+    "bumpp": "^9.3.0",
     "codemirror": "^5.65.16",
     "conventional-changelog-cli": "^4.1.0",
     "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.20.0",
-    "fflate": "^0.8.1",
+    "eslint-plugin-vue": "^9.21.1",
+    "fflate": "^0.8.2",
     "hash-sum": "^2.0.0",
-    "lint-staged": "^15.2.0",
-    "monaco-editor-core": "^0.45.0",
-    "prettier": "^3.1.1",
-    "shikiji": "^0.9.17",
-    "shikiji-monaco": "^0.9.17",
+    "lint-staged": "^15.2.2",
+    "monaco-editor-core": "^0.46.0",
+    "prettier": "^3.2.5",
+    "shiki": "^1.1.1",
+    "@shikijs/monaco": "^1.1.1",
     "simple-git-hooks": "^2.9.0",
     "sucrase": "^3.35.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11",
-    "vite-plugin-dts": "^3.7.0",
-    "vue": "^3.4.5",
+    "vite": "^5.1.1",
+    "vite-plugin-dts": "^3.7.2",
+    "vue": "^3.4.18",
     "vue-tsc": "1.9.0-alpha.3"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e893fcb9..205964a5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,11 +6,14 @@ settings:
 
 devDependencies:
   '@babel/types':
-    specifier: ^7.23.6
-    version: 7.23.6
+    specifier: ^7.23.9
+    version: 7.23.9
   '@rollup/plugin-replace':
     specifier: ^5.0.5
     version: 5.0.5
+  '@shikijs/monaco':
+    specifier: ^1.1.1
+    version: 1.1.1
   '@types/codemirror':
     specifier: ^5.60.15
     version: 5.60.15
@@ -18,14 +21,14 @@ devDependencies:
     specifier: ^1.0.2
     version: 1.0.2
   '@types/node':
-    specifier: ^20.10.6
-    version: 20.10.6
+    specifier: ^20.11.17
+    version: 20.11.17
   '@typescript-eslint/eslint-plugin':
-    specifier: ^6.18.1
-    version: 6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.3.3)
+    specifier: ^6.21.0
+    version: 6.21.0(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.3.3)
   '@vitejs/plugin-vue':
-    specifier: ^5.0.2
-    version: 5.0.2(vite@5.0.11)(vue@3.4.5)
+    specifier: ^5.0.4
+    version: 5.0.4(vite@5.1.1)(vue@3.4.18)
   '@volar/cdn':
     specifier: ~1.11.1
     version: 1.11.1
@@ -39,8 +42,8 @@ devDependencies:
     specifier: 1.9.0-alpha.3
     version: 1.9.0-alpha.3(typescript@5.3.3)
   bumpp:
-    specifier: ^9.2.1
-    version: 9.2.1
+    specifier: ^9.3.0
+    version: 9.3.0
   codemirror:
     specifier: ^5.65.16
     version: 5.65.16
@@ -51,29 +54,26 @@ devDependencies:
     specifier: ^8.56.0
     version: 8.56.0
   eslint-plugin-vue:
-    specifier: ^9.20.0
-    version: 9.20.0(eslint@8.56.0)
+    specifier: ^9.21.1
+    version: 9.21.1(eslint@8.56.0)
   fflate:
-    specifier: ^0.8.1
-    version: 0.8.1
+    specifier: ^0.8.2
+    version: 0.8.2
   hash-sum:
     specifier: ^2.0.0
     version: 2.0.0
   lint-staged:
-    specifier: ^15.2.0
-    version: 15.2.0
+    specifier: ^15.2.2
+    version: 15.2.2
   monaco-editor-core:
-    specifier: ^0.45.0
-    version: 0.45.0
+    specifier: ^0.46.0
+    version: 0.46.0
   prettier:
-    specifier: ^3.1.1
-    version: 3.1.1
-  shikiji:
-    specifier: ^0.9.17
-    version: 0.9.17
-  shikiji-monaco:
-    specifier: ^0.9.17
-    version: 0.9.17
+    specifier: ^3.2.5
+    version: 3.2.5
+  shiki:
+    specifier: ^1.1.1
+    version: 1.1.1
   simple-git-hooks:
     specifier: ^2.9.0
     version: 2.9.0
@@ -84,14 +84,14 @@ devDependencies:
     specifier: ^5.3.3
     version: 5.3.3
   vite:
-    specifier: ^5.0.11
-    version: 5.0.11(@types/node@20.10.6)
+    specifier: ^5.1.1
+    version: 5.1.1(@types/node@20.11.17)
   vite-plugin-dts:
-    specifier: ^3.7.0
-    version: 3.7.0(@types/node@20.10.6)(typescript@5.3.3)(vite@5.0.11)
+    specifier: ^3.7.2
+    version: 3.7.2(@types/node@20.11.17)(typescript@5.3.3)(vite@5.1.1)
   vue:
-    specifier: ^3.4.5
-    version: 3.4.5(typescript@5.3.3)
+    specifier: ^3.4.18
+    version: 3.4.18(typescript@5.3.3)
   vue-tsc:
     specifier: 1.9.0-alpha.3
     version: 1.9.0-alpha.3(typescript@5.3.3)
@@ -135,11 +135,19 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.23.6
+      '@babel/types': 7.23.9
     dev: true
 
-  /@babel/types@7.23.6:
-    resolution: {integrity: sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==}
+  /@babel/parser@7.23.9:
+    resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.23.9
+    dev: true
+
+  /@babel/types@7.23.9:
+    resolution: {integrity: sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-string-parser': 7.23.4
@@ -488,24 +496,24 @@ packages:
       type-detect: 4.0.8
     dev: true
 
-  /@microsoft/api-extractor-model@7.28.3(@types/node@20.10.6):
+  /@microsoft/api-extractor-model@7.28.3(@types/node@20.11.17):
     resolution: {integrity: sha512-wT/kB2oDbdZXITyDh2SQLzaWwTOFbV326fP0pUwNW00WeliARs0qjmXBWmGWardEzp2U3/axkO3Lboqun6vrig==}
     dependencies:
       '@microsoft/tsdoc': 0.14.2
       '@microsoft/tsdoc-config': 0.16.2
-      '@rushstack/node-core-library': 3.62.0(@types/node@20.10.6)
+      '@rushstack/node-core-library': 3.62.0(@types/node@20.11.17)
     transitivePeerDependencies:
       - '@types/node'
     dev: true
 
-  /@microsoft/api-extractor@7.39.0(@types/node@20.10.6):
+  /@microsoft/api-extractor@7.39.0(@types/node@20.11.17):
     resolution: {integrity: sha512-PuXxzadgnvp+wdeZFPonssRAj/EW4Gm4s75TXzPk09h3wJ8RS3x7typf95B4vwZRrPTQBGopdUl+/vHvlPdAcg==}
     hasBin: true
     dependencies:
-      '@microsoft/api-extractor-model': 7.28.3(@types/node@20.10.6)
+      '@microsoft/api-extractor-model': 7.28.3(@types/node@20.11.17)
       '@microsoft/tsdoc': 0.14.2
       '@microsoft/tsdoc-config': 0.16.2
-      '@rushstack/node-core-library': 3.62.0(@types/node@20.10.6)
+      '@rushstack/node-core-library': 3.62.0(@types/node@20.11.17)
       '@rushstack/rig-package': 0.5.1
       '@rushstack/ts-command-line': 4.17.1
       colors: 1.2.5
@@ -690,7 +698,7 @@ packages:
     dev: true
     optional: true
 
-  /@rushstack/node-core-library@3.62.0(@types/node@20.10.6):
+  /@rushstack/node-core-library@3.62.0(@types/node@20.11.17):
     resolution: {integrity: sha512-88aJn2h8UpSvdwuDXBv1/v1heM6GnBf3RjEy6ZPP7UnzHNCqOHA2Ut+ScYUbXcqIdfew9JlTAe3g+cnX9xQ/Aw==}
     peerDependencies:
       '@types/node': '*'
@@ -698,7 +706,7 @@ packages:
       '@types/node':
         optional: true
     dependencies:
-      '@types/node': 20.10.6
+      '@types/node': 20.11.17
       colors: 1.2.5
       fs-extra: 7.0.1
       import-lazy: 4.0.0
@@ -724,6 +732,16 @@ packages:
       string-argv: 0.3.2
     dev: true
 
+  /@shikijs/core@1.1.1:
+    resolution: {integrity: sha512-WSHuW0i4W04+UZgim378oxHBAp4S5X3hVI2zXh+t5v2fx2u/7QXz9VNisoOD/CA4O9Lc6Zs97TrKiDbWyZua6Q==}
+    dev: true
+
+  /@shikijs/monaco@1.1.1:
+    resolution: {integrity: sha512-HdQnDhj/I3Yf/G14ls1YrmAUUYsDFLqqzaf7oMjpGiDTI48W65dbwPH5X+m3Ol2K4hxkR0QcCQKSAWxxLbEV6w==}
+    dependencies:
+      '@shikijs/core': 1.1.1
+    dev: true
+
   /@types/argparse@1.0.38:
     resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
     dev: true
@@ -746,8 +764,8 @@ packages:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
 
-  /@types/node@20.10.6:
-    resolution: {integrity: sha512-Vac8H+NlRNNlAmDfGUP7b5h/KA+AtWIzuXy0E6OyP8f1tCLYAtPvKRRDJjAPqhpCb0t6U2j7/xqAuLEebW2kiw==}
+  /@types/node@20.11.17:
+    resolution: {integrity: sha512-QmgQZGWu1Yw9TDyAP9ZzpFJKynYNeOvwMJmaxABfieQoVoiVOS6MN1WSpqpRcbeA5+RW82kraAVxCCJg+780Qw==}
     dependencies:
       undici-types: 5.26.5
     dev: true
@@ -766,8 +784,8 @@ packages:
       '@types/estree': 1.0.5
     dev: true
 
-  /@typescript-eslint/eslint-plugin@6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-nISDRYnnIpk7VCFrGcu1rnZfM1Dh9LRHnfgdkjcbi/l7g16VYRri3TjXi9Ir4lOZSw5N/gnV/3H7jIPQ8Q4daA==}
+  /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
@@ -779,10 +797,10 @@ packages:
     dependencies:
       '@eslint-community/regexpp': 4.10.0
       '@typescript-eslint/parser': 6.18.1(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/scope-manager': 6.18.1
-      '@typescript-eslint/type-utils': 6.18.1(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/visitor-keys': 6.18.1
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/type-utils': 6.21.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.3.4
       eslint: 8.56.0
       graphemer: 1.4.0
@@ -824,8 +842,16 @@ packages:
       '@typescript-eslint/visitor-keys': 6.18.1
     dev: true
 
-  /@typescript-eslint/type-utils@6.18.1(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-wyOSKhuzHeU/5pcRDP2G2Ndci+4g653V43gXTpt4nbyoIOAASkGDA9JIAgbQCdCkcr1MvpSYWzxTz0olCn8+/Q==}
+  /@typescript-eslint/scope-manager@6.21.0:
+    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+    dev: true
+
+  /@typescript-eslint/type-utils@6.21.0(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -834,8 +860,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.18.1(typescript@5.3.3)
-      '@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.56.0)(typescript@5.3.3)
       debug: 4.3.4
       eslint: 8.56.0
       ts-api-utils: 1.0.3(typescript@5.3.3)
@@ -849,6 +875,11 @@ packages:
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
+  /@typescript-eslint/types@6.21.0:
+    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dev: true
+
   /@typescript-eslint/typescript-estree@6.18.1(typescript@5.3.3):
     resolution: {integrity: sha512-fv9B94UAhywPRhUeeV/v+3SBDvcPiLxRZJw/xZeeGgRLQZ6rLMG+8krrJUyIf6s1ecWTzlsbp0rlw7n9sjufHA==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -871,8 +902,30 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@6.18.1(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-zZmTuVZvD1wpoceHvoQpOiewmWu3uP9FuTWo8vqpy2ffsmfCE8mklRPi+vmnIYAIk9t/4kOThri2QCDgor+OpQ==}
+  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.3.3):
+    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.3
+      semver: 7.5.4
+      ts-api-utils: 1.0.3(typescript@5.3.3)
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/utils@6.21.0(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -880,9 +933,9 @@ packages:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
       '@types/json-schema': 7.0.15
       '@types/semver': 7.5.6
-      '@typescript-eslint/scope-manager': 6.18.1
-      '@typescript-eslint/types': 6.18.1
-      '@typescript-eslint/typescript-estree': 6.18.1(typescript@5.3.3)
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3)
       eslint: 8.56.0
       semver: 7.5.4
     transitivePeerDependencies:
@@ -898,19 +951,27 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
+  /@typescript-eslint/visitor-keys@6.21.0:
+    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@vitejs/plugin-vue@5.0.2(vite@5.0.11)(vue@3.4.5):
-    resolution: {integrity: sha512-kEjJHrLb5ePBvjD0SPZwJlw1QTRcjjCA9sB5VyfonoXVBxTS7TMnqL6EkLt1Eu61RDeiuZ/WN9Hf6PxXhPI2uA==}
+  /@vitejs/plugin-vue@5.0.4(vite@5.1.1)(vue@3.4.18):
+    resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.0.11(@types/node@20.10.6)
-      vue: 3.4.5(typescript@5.3.3)
+      vite: 5.1.1(@types/node@20.11.17)
+      vue: 3.4.18(typescript@5.3.3)
     dev: true
 
   /@volar/cdn@1.11.1:
@@ -969,6 +1030,16 @@ packages:
     resolution: {integrity: sha512-JT5CvrIYYCrmB+dCana8sUqJEcGB1ZDXNLMQ2+42bW995WmNoenijWMUdZfwmuQUTQcEVVIa2OecZzTYWUW9Cg==}
     dev: true
 
+  /@vue/compiler-core@3.4.18:
+    resolution: {integrity: sha512-F7YK8lMK0iv6b9/Gdk15A67wM0KKZvxDxed0RR60C1z9tIJTKta+urs4j0RTN5XqHISzI3etN3mX0uHhjmoqjQ==}
+    dependencies:
+      '@babel/parser': 7.23.9
+      '@vue/shared': 3.4.18
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.0.2
+    dev: true
+
   /@vue/compiler-core@3.4.5:
     resolution: {integrity: sha512-Daka7P1z2AgKjzuueWXhwzIsKu0NkLB6vGbNVEV2iJ8GJTrzraZo/Sk4GWCMRtd/qVi3zwnk+Owbd/xSZbwHtQ==}
     dependencies:
@@ -979,6 +1050,13 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /@vue/compiler-dom@3.4.18:
+    resolution: {integrity: sha512-24Eb8lcMfInefvQ6YlEVS18w5Q66f4+uXWVA+yb7praKbyjHRNuKVWGuinfSSjM0ZIiPi++QWukhkgznBaqpEA==}
+    dependencies:
+      '@vue/compiler-core': 3.4.18
+      '@vue/shared': 3.4.18
+    dev: true
+
   /@vue/compiler-dom@3.4.5:
     resolution: {integrity: sha512-J8YlxknJVd90SXFJ4HwGANSAXsx5I0lK30sO/zvYV7s5gXf7gZR7r/1BmZ2ju7RGH1lnc6bpBc6nL61yW+PsAQ==}
     dependencies:
@@ -986,25 +1064,25 @@ packages:
       '@vue/shared': 3.4.5
     dev: true
 
-  /@vue/compiler-sfc@3.4.5:
-    resolution: {integrity: sha512-jauvkDuSSUbP0ebhfNqljhShA90YEfX/0wZ+w40oZF43IjGyWYjqYaJbvMJwGOd+9+vODW6eSvnk28f0SGV7OQ==}
+  /@vue/compiler-sfc@3.4.18:
+    resolution: {integrity: sha512-rG5tqtnzwrVpMqAQ7FHtvHaV70G6LLfJIWLYZB/jZ9m/hrnZmIQh+H3ewnC5onwe/ibljm9+ZupxeElzqCkTAw==}
     dependencies:
-      '@babel/parser': 7.23.6
-      '@vue/compiler-core': 3.4.5
-      '@vue/compiler-dom': 3.4.5
-      '@vue/compiler-ssr': 3.4.5
-      '@vue/shared': 3.4.5
+      '@babel/parser': 7.23.9
+      '@vue/compiler-core': 3.4.18
+      '@vue/compiler-dom': 3.4.18
+      '@vue/compiler-ssr': 3.4.18
+      '@vue/shared': 3.4.18
       estree-walker: 2.0.2
-      magic-string: 0.30.5
+      magic-string: 0.30.7
       postcss: 8.4.33
       source-map-js: 1.0.2
     dev: true
 
-  /@vue/compiler-ssr@3.4.5:
-    resolution: {integrity: sha512-DDdEcDzj2lWTMfUMMtEpLDhURai9LhM0zSZ219jCt7b2Vyl0/jy3keFgCPMitG0V1S1YG4Cmws3lWHWdxHQOpg==}
+  /@vue/compiler-ssr@3.4.18:
+    resolution: {integrity: sha512-hSlv20oUhPxo2UYUacHgGaxtqP0tvFo6ixxxD6JlXIkwzwoZ9eKK6PFQN4hNK/R13JlNyldwWt/fqGBKgWJ6nQ==}
     dependencies:
-      '@vue/compiler-dom': 3.4.5
-      '@vue/shared': 3.4.5
+      '@vue/compiler-dom': 3.4.18
+      '@vue/shared': 3.4.18
     dev: true
 
   /@vue/language-core@1.8.27(typescript@5.3.3):
@@ -1072,35 +1150,39 @@ packages:
       - typescript
     dev: true
 
-  /@vue/reactivity@3.4.5:
-    resolution: {integrity: sha512-BcWkKvjdvqJwb7BhhFkXPLDCecX4d4a6GATvCduJQDLv21PkPowAE5GKuIE5p6RC07/Lp9FMkkq4AYCTVF5KlQ==}
+  /@vue/reactivity@3.4.18:
+    resolution: {integrity: sha512-7uda2/I0jpLiRygprDo5Jxs2HJkOVXcOMlyVlY54yRLxoycBpwGJRwJT9EdGB4adnoqJDXVT2BilUAYwI7qvmg==}
     dependencies:
-      '@vue/shared': 3.4.5
+      '@vue/shared': 3.4.18
     dev: true
 
-  /@vue/runtime-core@3.4.5:
-    resolution: {integrity: sha512-wh9ELIOQKeWT9SaUPdLrsxRkZv14jp+SJm9aiQGWio+/MWNM3Lib0wE6CoKEqQ9+SCYyGjDBhTOTtO47kCgbkg==}
+  /@vue/runtime-core@3.4.18:
+    resolution: {integrity: sha512-7mU9diCa+4e+8/wZ7Udw5pwTH10A11sZ1nldmHOUKJnzCwvZxfJqAtw31mIf4T5H2FsLCSBQT3xgioA9vIjyDQ==}
     dependencies:
-      '@vue/reactivity': 3.4.5
-      '@vue/shared': 3.4.5
+      '@vue/reactivity': 3.4.18
+      '@vue/shared': 3.4.18
     dev: true
 
-  /@vue/runtime-dom@3.4.5:
-    resolution: {integrity: sha512-n5ewvOjyG3IEpqGBahdPXODFSpVlSz3H4LF76Sx0XAqpIOqyJ5bIb2PrdYuH2ogBMAQPh+o5tnoH4nJpBr8U0Q==}
+  /@vue/runtime-dom@3.4.18:
+    resolution: {integrity: sha512-2y1Mkzcw1niSfG7z3Qx+2ir9Gb4hdTkZe5p/I8x1aTIKQE0vY0tPAEUPhZm5tx6183gG3D/KwHG728UR0sIufA==}
     dependencies:
-      '@vue/runtime-core': 3.4.5
-      '@vue/shared': 3.4.5
+      '@vue/runtime-core': 3.4.18
+      '@vue/shared': 3.4.18
       csstype: 3.1.3
     dev: true
 
-  /@vue/server-renderer@3.4.5(vue@3.4.5):
-    resolution: {integrity: sha512-jOFc/VE87yvifQpNju12VcqimH8pBLxdcT+t3xMeiED1K6DfH9SORyhFEoZlW5TG2Vwfn3Ul5KE+1aC99xnSBg==}
+  /@vue/server-renderer@3.4.18(vue@3.4.18):
+    resolution: {integrity: sha512-YJd1wa7mzUN3NRqLEsrwEYWyO+PUBSROIGlCc3J/cvn7Zu6CxhNLgXa8Z4zZ5ja5/nviYO79J1InoPeXgwBTZA==}
     peerDependencies:
-      vue: 3.4.5
+      vue: 3.4.18
     dependencies:
-      '@vue/compiler-ssr': 3.4.5
-      '@vue/shared': 3.4.5
-      vue: 3.4.5(typescript@5.3.3)
+      '@vue/compiler-ssr': 3.4.18
+      '@vue/shared': 3.4.18
+      vue: 3.4.18(typescript@5.3.3)
+    dev: true
+
+  /@vue/shared@3.4.18:
+    resolution: {integrity: sha512-CxouGFxxaW5r1WbrSmWwck3No58rApXgRSBxrqgnY1K+jk20F6DrXJkHdH9n4HVT+/B6G2CAn213Uq3npWiy8Q==}
     dev: true
 
   /@vue/shared@3.4.5:
@@ -1248,8 +1330,8 @@ packages:
       fill-range: 7.0.1
     dev: true
 
-  /bumpp@9.2.1:
-    resolution: {integrity: sha512-mq6/e8+bnIsOMy1VceTLC49WucMIZqd2nYn0e7Et5LhTO3yYQ8OWJsTl/B+uJDs5eywZmJ4Yt1WTEd2HCI35pw==}
+  /bumpp@9.3.0:
+    resolution: {integrity: sha512-P46VikoEZadYCqx7mbClKlaJnOyvc+JfRJPRf1YwlOjwqeYmutgFe1w9hvfXe819VhpU0N0TNXtxyVAUlAgaNA==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
@@ -1257,6 +1339,7 @@ packages:
       c12: 1.6.1
       cac: 6.7.14
       fast-glob: 3.3.2
+      js-yaml: 4.1.0
       prompts: 2.4.2
       semver: 7.5.4
     dev: true
@@ -1730,8 +1813,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint-plugin-vue@9.20.0(eslint@8.56.0):
-    resolution: {integrity: sha512-9/DV5CM7ItfgWmXjL6j3zyDtVTrslYdnEm+rnYNajdElx17b3erxi/Wc6FY7t3BQ6dgo0t/UBpgiWCOKtJyN8Q==}
+  /eslint-plugin-vue@9.21.1(eslint@8.56.0):
+    resolution: {integrity: sha512-XVtI7z39yOVBFJyi8Ljbn7kY9yHzznKXL02qQYn+ta63Iy4A9JFBw6o4OSB9hyD2++tVT+su9kQqetUyCCwhjw==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
@@ -1742,7 +1825,7 @@ packages:
       nth-check: 2.1.1
       postcss-selector-parser: 6.0.15
       semver: 7.5.4
-      vue-eslint-parser: 9.4.0(eslint@8.56.0)
+      vue-eslint-parser: 9.4.2(eslint@8.56.0)
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -1893,8 +1976,8 @@ packages:
       reusify: 1.0.4
     dev: true
 
-  /fflate@0.8.1:
-    resolution: {integrity: sha512-/exOvEuc+/iaUm105QIiOt4LpBdMTWsXxqR0HDF35vx3fmaKzw7354gTilCh5rkzEt8WYyG//ku3h3nRmd7CHQ==}
+  /fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
     dev: true
 
   /file-entry-cache@6.0.1:
@@ -2413,8 +2496,8 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: true
 
-  /lint-staged@15.2.0:
-    resolution: {integrity: sha512-TFZzUEV00f+2YLaVPWBWGAMq7So6yQx+GG8YRMDeOEIf95Zn5RyiLMsEiX4KTNl9vq/w+NqRJkLA1kPIo15ufQ==}
+  /lint-staged@15.2.2:
+    resolution: {integrity: sha512-TiTt93OPh1OZOsb5B7k96A/ATl2AjIZo+vnzFZ6oHK5FuTk63ByDtxGQpHm+kFETjEWqgkF95M8FRXKR/LEBcw==}
     engines: {node: '>=18.12.0'}
     hasBin: true
     dependencies:
@@ -2423,7 +2506,7 @@ packages:
       debug: 4.3.4
       execa: 8.0.1
       lilconfig: 3.0.0
-      listr2: 8.0.0
+      listr2: 8.0.1
       micromatch: 4.0.5
       pidtree: 0.6.0
       string-argv: 0.3.2
@@ -2432,8 +2515,8 @@ packages:
       - supports-color
     dev: true
 
-  /listr2@8.0.0:
-    resolution: {integrity: sha512-u8cusxAcyqAiQ2RhYvV7kRKNLgUvtObIbhOX2NCXqvp1UU32xIg5CT22ykS2TPKJXZWJwtK3IKLiqAGlGNE+Zg==}
+  /listr2@8.0.1:
+    resolution: {integrity: sha512-ovJXBXkKGfq+CwmKTjluEqFi3p4h8xvkxGQQAQan22YCgef4KZ1mKGjzfGh6PL6AW5Csw0QiQPNuQyH+6Xk3hA==}
     engines: {node: '>=18.0.0'}
     dependencies:
       cli-truncate: 4.0.0
@@ -2504,6 +2587,13 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
+  /magic-string@0.30.7:
+    resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
   /meow@12.1.1:
     resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
     engines: {node: '>=16.10'}
@@ -2593,8 +2683,8 @@ packages:
       ufo: 1.3.2
     dev: true
 
-  /monaco-editor-core@0.45.0:
-    resolution: {integrity: sha512-3eqO61jcP+YSMwVB47FNIjma51HNPepMpLsBE8pV4kFw/ynf3KEvSKAbm6HtueZnjVoatKFtSyKhXi7B58/8aA==}
+  /monaco-editor-core@0.46.0:
+    resolution: {integrity: sha512-JA5BzCaC0nUB5zUhzGUfecNhVNxEXpJxp6YNBYLr0SPyv0DKSIeBpF21WVkpwYm00UJaVc4m3TTcwB9/Gzd/nw==}
     dev: true
 
   /ms@2.1.2:
@@ -2856,13 +2946,22 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /postcss@8.4.35:
+    resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /prettier@3.1.1:
-    resolution: {integrity: sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==}
+  /prettier@3.2.5:
+    resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}
     engines: {node: '>=14'}
     hasBin: true
     dev: true
@@ -3041,20 +3140,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /shikiji-core@0.9.17:
-    resolution: {integrity: sha512-r1FWTXk6SO2aYqfWgcsJ11MuVQ1ymPSdXzJjK7q8EXuyqu8yc2N5qrQy5+BL6gTVOaF4yLjbxFjF+KTRM1Sp8Q==}
-    dev: true
-
-  /shikiji-monaco@0.9.17:
-    resolution: {integrity: sha512-5HLHQSLtg8QdOU+dkLxIiWovkqqKacYLuuJtVMYBayviZKTTBdY9IxvUSFq0Maj/LDC2OI0HEEs51DqwPSCRow==}
+  /shiki@1.1.1:
+    resolution: {integrity: sha512-7ksyiu01NltBvEcLq9GcguF+7RGa5lDwozjgdbiXnlkro1FtMCcrVtHUWbKuYBSOZW74gC4KlnBcgRCwK2ERAw==}
     dependencies:
-      shikiji-core: 0.9.17
-    dev: true
-
-  /shikiji@0.9.17:
-    resolution: {integrity: sha512-0z/1NfkhBkm3ijrfFeHg3G9yDNuHhXdAGbQm7tRxj4WQ5z2y0XDbnagFyKyuV2ebCTS1Mwy1I3n0Fzcc/4xdmw==}
-    dependencies:
-      shikiji-core: 0.9.17
+      '@shikijs/core': 1.1.1
     dev: true
 
   /signal-exit@3.0.7:
@@ -3388,8 +3477,8 @@ packages:
     engines: {node: '>= 0.10'}
     dev: true
 
-  /vite-plugin-dts@3.7.0(@types/node@20.10.6)(typescript@5.3.3)(vite@5.0.11):
-    resolution: {integrity: sha512-np1uPaYzu98AtPReB8zkMnbjwcNHOABsLhqVOf81b3ol9b5M2wPcAVs8oqPnOpr6Us+7yDXVauwkxsk5+ldmRA==}
+  /vite-plugin-dts@3.7.2(@types/node@20.11.17)(typescript@5.3.3)(vite@5.1.1):
+    resolution: {integrity: sha512-kg//1nDA01b8rufJf4TsvYN8LMkdwv0oBYpiQi6nRwpHyue+wTlhrBiqgipdFpMnW1oOYv6ywmzE5B0vg6vSEA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -3398,13 +3487,13 @@ packages:
       vite:
         optional: true
     dependencies:
-      '@microsoft/api-extractor': 7.39.0(@types/node@20.10.6)
+      '@microsoft/api-extractor': 7.39.0(@types/node@20.11.17)
       '@rollup/pluginutils': 5.1.0
       '@vue/language-core': 1.8.27(typescript@5.3.3)
       debug: 4.3.4
       kolorist: 1.8.0
       typescript: 5.3.3
-      vite: 5.0.11(@types/node@20.10.6)
+      vite: 5.1.1(@types/node@20.11.17)
       vue-tsc: 1.8.27(typescript@5.3.3)
     transitivePeerDependencies:
       - '@types/node'
@@ -3412,8 +3501,8 @@ packages:
       - supports-color
     dev: true
 
-  /vite@5.0.11(@types/node@20.10.6):
-    resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==}
+  /vite@5.1.1(@types/node@20.11.17):
+    resolution: {integrity: sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -3440,9 +3529,9 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.10.6
+      '@types/node': 20.11.17
       esbuild: 0.19.11
-      postcss: 8.4.33
+      postcss: 8.4.35
       rollup: 4.9.4
     optionalDependencies:
       fsevents: 2.3.3
@@ -3615,8 +3704,8 @@ packages:
     resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
     dev: true
 
-  /vue-eslint-parser@9.4.0(eslint@8.56.0):
-    resolution: {integrity: sha512-7KsNBb6gHFA75BtneJsoK/dbZ281whUIwFYdQxA68QrCrGMXYzUMbPDHGcOQ0OocIVKrWSKWXZ4mL7tonCXoUw==}
+  /vue-eslint-parser@9.4.2(eslint@8.56.0):
+    resolution: {integrity: sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
@@ -3664,19 +3753,19 @@ packages:
       typescript: 5.3.3
     dev: true
 
-  /vue@3.4.5(typescript@5.3.3):
-    resolution: {integrity: sha512-VH6nHFhLPjgu2oh5vEBXoNZxsGHuZNr3qf4PHClwJWw6IDqw6B3x+4J+ABdoZ0aJuT8Zi0zf3GpGlLQCrGWHrw==}
+  /vue@3.4.18(typescript@5.3.3):
+    resolution: {integrity: sha512-0zLRYamFRe0wF4q2L3O24KQzLyLpL64ye1RUToOgOxuWZsb/FhaNRdGmeozdtVYLz6tl94OXLaK7/WQIrVCw1A==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.4.5
-      '@vue/compiler-sfc': 3.4.5
-      '@vue/runtime-dom': 3.4.5
-      '@vue/server-renderer': 3.4.5(vue@3.4.5)
-      '@vue/shared': 3.4.5
+      '@vue/compiler-dom': 3.4.18
+      '@vue/compiler-sfc': 3.4.18
+      '@vue/runtime-dom': 3.4.18
+      '@vue/server-renderer': 3.4.18(vue@3.4.18)
+      '@vue/shared': 3.4.18
       typescript: 5.3.3
     dev: true
 
diff --git a/src/Repl.vue b/src/Repl.vue
index 15e9dec9..4b14ebfb 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import SplitPane from './SplitPane.vue'
 import Output from './output/Output.vue'
-import { ReplStore, type SFCOptions, type Store } from './store'
-import { computed, provide, ref, toRef, watchEffect } from 'vue'
-import type { EditorComponentType } from './types'
+import { type Store, useStore } from './store'
+import { computed, provide, ref, toRef } from 'vue'
+import { type EditorComponentType, injectKeyStore } from './types'
 import EditorContainer from './editor/EditorContainer.vue'
 
 export interface Props {
@@ -15,7 +15,6 @@ export interface Props {
   showImportMap?: boolean
   showTsConfig?: boolean
   clearConsole?: boolean
-  sfcOptions?: SFCOptions
   layout?: 'horizontal' | 'vertical'
   layoutReverse?: boolean
   ssr?: boolean
@@ -32,7 +31,7 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   theme: 'light',
-  store: () => new ReplStore(),
+  store: () => useStore(),
   autoResize: true,
   showCompileOutput: true,
   showImportMap: true,
@@ -49,7 +48,6 @@ const props = withDefaults(defineProps<Props>(), {
       useCode: '',
     },
   }),
-  sfcOptions: () => ({}),
   layout: 'horizontal',
 })
 
@@ -59,28 +57,12 @@ if (!props.editor) {
 
 const outputRef = ref<InstanceType<typeof Output>>()
 
-watchEffect(() => {
-  const { store } = props
-  const sfcOptions = (store.options = props.sfcOptions || {})
-  sfcOptions.script ||= {}
-  sfcOptions.script.fs = {
-    fileExists(file: string) {
-      if (file.startsWith('/')) file = file.slice(1)
-      return !!store.state.files[file]
-    },
-    readFile(file: string) {
-      if (file.startsWith('/')) file = file.slice(1)
-      return store.state.files[file].code
-    },
-  }
-})
-
 props.store.init()
 
 const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
 const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
-provide('store', props.store)
+provide(injectKeyStore, props.store)
 provide('autoresize', props.autoResize)
 provide('import-map', toRef(props, 'showImportMap'))
 provide('tsconfig', toRef(props, 'showTsConfig'))
diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 662d2ba6..ac7e2964 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, reactive, ref } from 'vue'
-import type { Store } from './store'
+import { computed, inject, reactive, ref, toRef } from 'vue'
+import { injectKeyStore } from './types'
 
 const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>()
 const isVertical = computed(() => props.layout === 'vertical')
@@ -8,8 +8,8 @@ const isVertical = computed(() => props.layout === 'vertical')
 const container = ref()
 
 // mobile only
-const store = inject('store') as Store
-const showOutput = ref(store.initialShowOutput)
+const store = inject(injectKeyStore)!
+const showOutput = toRef(store, 'showOutput')
 
 const state = reactive({
   dragging: false,
diff --git a/src/editor/CodeMirrorEditor.vue b/src/editor/CodeMirrorEditor.vue
index d4a38837..c87d089e 100644
--- a/src/editor/CodeMirrorEditor.vue
+++ b/src/editor/CodeMirrorEditor.vue
@@ -39,5 +39,10 @@ const activeMode = computed(() => {
 </script>
 
 <template>
-  <CodeMirror :value="value" :mode="activeMode" @change="onChange" />
+  <CodeMirror
+    :value="value"
+    :mode="activeMode"
+    :readonly="readonly"
+    @change="onChange"
+  />
 </template>
diff --git a/src/editor/EditorContainer.vue b/src/editor/EditorContainer.vue
index 1e58f106..4801adff 100644
--- a/src/editor/EditorContainer.vue
+++ b/src/editor/EditorContainer.vue
@@ -3,9 +3,8 @@ import FileSelector from './FileSelector.vue'
 import Message from '../Message.vue'
 import { debounce } from '../utils'
 import { inject, ref, watch } from 'vue'
-import type { Store } from '../store'
 import MessageToggle from './MessageToggle.vue'
-import type { EditorComponentType } from '../types'
+import { type EditorComponentType, injectKeyStore } from '../types'
 
 const SHOW_ERROR_KEY = 'repl_show_error'
 
@@ -13,11 +12,11 @@ const props = defineProps<{
   editorComponent: EditorComponentType
 }>()
 
-const store = inject('store') as Store
+const store = inject(injectKeyStore)!
 const showMessage = ref(getItem())
 
 const onChange = debounce((code: string) => {
-  store.state.activeFile.code = code
+  store.activeFile.code = code
 }, 250)
 
 function setItem() {
@@ -38,11 +37,11 @@ watch(showMessage, () => {
   <FileSelector />
   <div class="editor-container">
     <props.editorComponent
-      :value="store.state.activeFile.code"
-      :filename="store.state.activeFile.filename"
+      :value="store.activeFile.code"
+      :filename="store.activeFile.filename"
       @change="onChange"
     />
-    <Message v-show="showMessage" :err="store.state.errors[0]" />
+    <Message v-show="showMessage" :err="store.errors[0]" />
     <MessageToggle v-model="showMessage" />
   </div>
 </template>
diff --git a/src/editor/FileSelector.vue b/src/editor/FileSelector.vue
index ea209fa9..06f9b98b 100644
--- a/src/editor/FileSelector.vue
+++ b/src/editor/FileSelector.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import {
-  type Store,
-  importMapFile,
-  stripSrcPrefix,
-  tsconfigFile,
-} from '../store'
+import { injectKeyStore } from '../../src/types'
+import { importMapFile, stripSrcPrefix, tsconfigFile } from '../store'
 import { type Ref, type VNode, computed, inject, ref } from 'vue'
 
-const store = inject('store') as Store
+const store = inject(injectKeyStore)!
 
 /**
  * When `true`: indicates adding a new file
@@ -23,7 +19,7 @@ const pendingFilename = ref('Comp.vue')
 const showTsConfig = inject<Ref<boolean>>('tsconfig')
 const showImportMap = inject<Ref<boolean>>('import-map')
 const files = computed(() =>
-  Object.entries(store.state.files)
+  Object.entries(store.files)
     .filter(
       ([name, file]) =>
         name !== importMapFile && name !== tsconfigFile && !file.hidden,
@@ -37,7 +33,7 @@ function startAddFile() {
 
   while (true) {
     let hasConflict = false
-    for (const filename in store.state.files) {
+    for (const filename in store.files) {
       if (stripSrcPrefix(filename) === name) {
         hasConflict = true
         name = `Comp${++i}.vue`
@@ -68,18 +64,18 @@ function doneNameFile() {
   const oldFilename = pending.value === true ? '' : pending.value
 
   if (!/\.(vue|js|ts|css|json)$/.test(filename)) {
-    store.state.errors = [
+    store.errors = [
       `Playground only supports *.vue, *.js, *.ts, *.css, *.json files.`,
     ]
     return
   }
 
-  if (filename !== oldFilename && filename in store.state.files) {
-    store.state.errors = [`File "${filename}" already exists.`]
+  if (filename !== oldFilename && filename in store.files) {
+    store.errors = [`File "${filename}" already exists.`]
     return
   }
 
-  store.state.errors = []
+  store.errors = []
   cancelNameFile()
 
   if (filename === oldFilename) {
@@ -122,7 +118,7 @@ function horizontalScroll(e: WheelEvent) {
       <div
         v-if="pending !== file"
         class="file"
-        :class="{ active: store.state.activeFile.filename === file }"
+        :class="{ active: store.activeFile.filename === file }"
         @click="store.setActive(file)"
         @dblclick="i > 0 && editFileName(file)"
       >
@@ -154,9 +150,9 @@ function horizontalScroll(e: WheelEvent) {
 
     <div class="import-map-wrapper">
       <div
-        v-if="showTsConfig && store.state.files[tsconfigFile]"
+        v-if="showTsConfig && store.files[tsconfigFile]"
         class="file"
-        :class="{ active: store.state.activeFile.filename === tsconfigFile }"
+        :class="{ active: store.activeFile.filename === tsconfigFile }"
         @click="store.setActive(tsconfigFile)"
       >
         <span class="label">tsconfig.json</span>
@@ -164,7 +160,7 @@ function horizontalScroll(e: WheelEvent) {
       <div
         v-if="showImportMap"
         class="file"
-        :class="{ active: store.state.activeFile.filename === importMapFile }"
+        :class="{ active: store.activeFile.filename === importMapFile }"
         @click="store.setActive(importMapFile)"
       >
         <span class="label">Import Map</span>
diff --git a/src/import-map.ts b/src/import-map.ts
new file mode 100644
index 00000000..62a27d6d
--- /dev/null
+++ b/src/import-map.ts
@@ -0,0 +1,58 @@
+import { computed, version as currentVersion, ref } from 'vue'
+
+export function useVueImportMap(
+  defaults: {
+    runtimeDev?: string | (() => string)
+    runtimeProd?: string | (() => string)
+    serverRenderer?: string | (() => string)
+  } = {},
+) {
+  function normalizeDefaults(defaults?: string | (() => string)) {
+    if (!defaults) return
+    return typeof defaults === 'string' ? defaults : defaults()
+  }
+
+  const productionMode = ref(false)
+  const vueVersion = ref<string | null>(null)
+  const importMap = computed<ImportMap>(() => {
+    const vue =
+      (!vueVersion.value &&
+        normalizeDefaults(
+          productionMode.value ? defaults.runtimeProd : defaults.runtimeDev,
+        )) ||
+      `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${
+        vueVersion.value || currentVersion
+      }/dist/runtime-dom.esm-browser${productionMode.value ? `.prod` : ``}.js`
+
+    const serverRenderer =
+      (!vueVersion.value && normalizeDefaults(defaults.serverRenderer)) ||
+      `https://cdn.jsdelivr.net/npm/@vue/server-renderer@${
+        vueVersion.value || currentVersion
+      }/dist/server-renderer.esm-browser.js`
+    return {
+      imports: {
+        vue,
+        'vue/server-renderer': serverRenderer,
+      },
+    }
+  })
+
+  return {
+    productionMode,
+    importMap,
+    vueVersion,
+    defaultVersion: currentVersion,
+  }
+}
+
+export interface ImportMap {
+  imports?: Record<string, string | undefined>
+  scopes?: Record<string, Record<string, string>>
+}
+
+export function mergeImportMap(a: ImportMap, b: ImportMap): ImportMap {
+  return {
+    imports: { ...a.imports, ...b.imports },
+    scopes: { ...a.scopes, ...b.scopes },
+  }
+}
diff --git a/src/index.ts b/src/index.ts
index fc2c9e6d..5ccf83bd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,14 @@
 export { default as Repl } from './Repl.vue'
 export { default as Preview } from './output/Preview.vue'
-export { ReplStore, File } from './store'
+export {
+  useStore,
+  File,
+  type SFCOptions,
+  type StoreState,
+  type Store,
+  type ReplStore,
+} from './store'
+export { useVueImportMap, mergeImportMap, type ImportMap } from './import-map'
 export { compileFile } from './transform'
 export type { Props as ReplProps } from './Repl.vue'
-export type { Store, StoreOptions, SFCOptions, StoreState } from './store'
 export type { OutputModes } from './types'
diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
index 194ea6c8..dc4b18e8 100644
--- a/src/monaco/Monaco.vue
+++ b/src/monaco/Monaco.vue
@@ -13,8 +13,7 @@ import {
 import * as monaco from 'monaco-editor-core'
 import { initMonaco } from './env'
 import { getOrCreateModel } from './utils'
-import type { Store } from '../store'
-import type { EditorMode } from '../types'
+import { type EditorMode, injectKeyStore } from '../types'
 
 const props = withDefaults(
   defineProps<{
@@ -37,7 +36,7 @@ const emit = defineEmits<{
 const containerRef = ref<HTMLDivElement>()
 const ready = ref(false)
 const editor = shallowRef<monaco.editor.IStandaloneCodeEditor>()
-const store = inject<Store>('store')!
+const store = inject(injectKeyStore)!
 
 initMonaco(store)
 
@@ -113,7 +112,7 @@ onMounted(async () => {
       () => props.filename,
       (_, oldFilename) => {
         if (!editorInstance) return
-        const file = store.state.files[props.filename]
+        const file = store.files[props.filename]
         if (!file) return null
         const model = getOrCreateModel(
           monaco.Uri.parse(`file:///${props.filename}`),
@@ -121,7 +120,7 @@ onMounted(async () => {
           file.code,
         )
 
-        const oldFile = oldFilename ? store.state.files[oldFilename] : null
+        const oldFile = oldFilename ? store.files[oldFilename] : null
         if (oldFile) {
           oldFile.editorViewState = editorInstance.saveViewState()
         }
diff --git a/src/monaco/env.ts b/src/monaco/env.ts
index 5892f8da..a58d60ad 100644
--- a/src/monaco/env.ts
+++ b/src/monaco/env.ts
@@ -15,8 +15,8 @@ export function initMonaco(store: Store) {
 
   watchEffect(() => {
     // create a model for each file in the store
-    for (const filename in store.state.files) {
-      const file = store.state.files[filename]
+    for (const filename in store.files) {
+      const file = store.files[filename]
       if (editor.getModel(Uri.parse(`file:///${filename}`))) continue
       getOrCreateModel(
         Uri.parse(`file:///${filename}`),
@@ -28,7 +28,7 @@ export function initMonaco(store: Store) {
     // dispose of any models that are not in the store
     for (const model of editor.getModels()) {
       const uri = model.uri.toString()
-      if (store.state.files[uri.substring('file:///'.length)]) continue
+      if (store.files[uri.substring('file:///'.length)]) continue
       if (uri.startsWith(jsDelivrUriBase + '/')) continue
       if (uri.startsWith('inmemory://')) continue
 
@@ -46,7 +46,7 @@ export function initMonaco(store: Store) {
       const path = resource.path
       if (/^\//.test(path)) {
         const fileName = path.replace('/', '')
-        if (fileName !== store.state.activeFile.filename) {
+        if (fileName !== store.activeFile.filename) {
           store.setActive(fileName)
           return true
         }
@@ -70,7 +70,7 @@ export async function reloadLanguageTools(store: Store) {
   disposeVue?.()
 
   let dependencies: Record<string, string> = {
-    ...store.state.dependencyVersion,
+    ...store.dependencyVersion,
   }
 
   if (store.vueVersion) {
@@ -88,10 +88,10 @@ export async function reloadLanguageTools(store: Store) {
     }
   }
 
-  if (store.state.typescriptVersion) {
+  if (store.typescriptVersion) {
     dependencies = {
       ...dependencies,
-      typescript: store.state.typescriptVersion,
+      typescript: store.typescriptVersion,
     }
   }
 
@@ -106,9 +106,7 @@ export async function reloadLanguageTools(store: Store) {
   })
   const languageId = ['vue', 'javascript', 'typescript']
   const getSyncUris = () =>
-    Object.keys(store.state.files).map((filename) =>
-      Uri.parse(`file:///${filename}`),
-    )
+    Object.keys(store.files).map((filename) => Uri.parse(`file:///${filename}`))
   const { dispose: disposeMarkers } = volar.editor.activateMarkers(
     worker,
     languageId,
@@ -155,8 +153,8 @@ export function loadMonacoEnv(store: Store) {
           })
           worker.postMessage({
             event: 'init',
-            tsVersion: store.state.typescriptVersion,
-            tsLocale: store.state.typescriptLocale || store.state.locale,
+            tsVersion: store.typescriptVersion,
+            tsLocale: store.locale,
           } satisfies WorkerMessage)
         })
         await init
diff --git a/src/monaco/highlight.ts b/src/monaco/highlight.ts
index f63fda0d..80f31473 100644
--- a/src/monaco/highlight.ts
+++ b/src/monaco/highlight.ts
@@ -1,20 +1,19 @@
 import * as monaco from 'monaco-editor-core'
-import { getHighlighterCore } from 'shikiji/core'
-import { getWasmInlined } from 'shikiji/wasm'
-import { shikijiToMonaco } from 'shikiji-monaco'
+import { getHighlighterCore } from 'shiki/core'
+import { shikiToMonaco } from '@shikijs/monaco'
 
-import langVue from 'shikiji/langs/vue.mjs'
-import themeDark from 'shikiji/themes/dark-plus.mjs'
-import themeLight from 'shikiji/themes/light-plus.mjs'
+import langVue from 'shiki/langs/vue.mjs'
+import themeDark from 'shiki/themes/dark-plus.mjs'
+import themeLight from 'shiki/themes/light-plus.mjs'
 
 export async function registerHighlighter() {
   const highlighter = await getHighlighterCore({
     themes: [themeDark, themeLight],
     langs: [langVue],
-    loadWasm: getWasmInlined,
+    loadWasm: import('shiki/wasm'),
   })
   monaco.languages.register({ id: 'vue' })
-  shikijiToMonaco(highlighter, monaco)
+  shikiToMonaco(highlighter, monaco)
   return {
     light: themeLight.name!,
     dark: themeDark.name!,
diff --git a/src/output/Output.vue b/src/output/Output.vue
index 1ab7e53b..da613737 100644
--- a/src/output/Output.vue
+++ b/src/output/Output.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import Preview from './Preview.vue'
-import type { Store } from '../store'
 import { computed, inject, ref } from 'vue'
-import type { EditorComponentType, OutputModes } from '../types'
+import {
+  type EditorComponentType,
+  type OutputModes,
+  injectKeyStore,
+} from '../types'
 
 const props = defineProps<{
   editorComponent: EditorComponentType
@@ -10,7 +13,7 @@ const props = defineProps<{
   ssr: boolean
 }>()
 
-const store = inject('store') as Store
+const store = inject(injectKeyStore)!
 const previewRef = ref<InstanceType<typeof Preview>>()
 const modes = computed(() =>
   props.showCompileOutput
@@ -18,11 +21,17 @@ const modes = computed(() =>
     : (['preview'] as const),
 )
 
-const mode = ref<OutputModes>(
-  (modes.value as readonly string[]).includes(store.initialOutputMode)
-    ? (store.initialOutputMode as OutputModes)
-    : 'preview',
-)
+const mode = computed<OutputModes>({
+  get: () =>
+    (modes.value as readonly string[]).includes(store.outputMode)
+      ? store.outputMode
+      : 'preview',
+  set(value) {
+    if ((modes.value as readonly string[]).includes(store.outputMode)) {
+      store.outputMode = value
+    }
+  },
+})
 
 function reload() {
   previewRef.value?.reload()
@@ -48,8 +57,8 @@ defineExpose({ reload })
     <props.editorComponent
       v-if="mode !== 'preview'"
       readonly
-      :filename="store.state.activeFile.filename"
-      :value="store.state.activeFile.compiled[mode]"
+      :filename="store.activeFile.filename"
+      :value="store.activeFile.compiled[mode]"
       :mode="mode"
     />
   </div>
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index 22476f66..0c182031 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.vue
@@ -13,16 +13,16 @@ import {
 import srcdoc from './srcdoc.html?raw'
 import { PreviewProxy } from './PreviewProxy'
 import { compileModulesForPreview } from './moduleCompiler'
-import type { Store } from '../store'
 import type { Props } from '../Repl.vue'
+import { injectKeyStore } from '../../src/types'
 
 const props = defineProps<{ show: boolean; ssr: boolean }>()
 
-const store = inject('store') as Store
-const clearConsole = inject('clear-console') as Ref<boolean>
-const theme = inject('theme') as Ref<'dark' | 'light'>
+const store = inject(injectKeyStore)!
+const clearConsole = inject<Ref<boolean>>('clear-console')!
+const theme = inject<Ref<'dark' | 'light'>>('theme')!
 
-const previewOptions = inject('preview-options') as Props['previewOptions']
+const previewOptions = inject<Props['previewOptions']>('preview-options')
 
 const container = ref()
 const runtimeError = ref()
@@ -42,15 +42,12 @@ watch(
     try {
       createSandbox()
     } catch (e: any) {
-      store.state.errors = [e as Error]
+      store.errors = [e as Error]
       return
     }
   },
 )
 
-// reset sandbox when version changes
-watch(() => store.state.resetFlip, createSandbox)
-
 // reset theme
 watch(
   () => theme.value,
@@ -90,12 +87,6 @@ function createSandbox() {
   )
 
   const importMap = store.getImportMap()
-  if (!importMap.imports) {
-    importMap.imports = {}
-  }
-  if (!importMap.imports.vue) {
-    importMap.imports.vue = store.state.vueRuntimeURL
-  }
   const sandboxSrc = srcdoc
     .replace(/<html>/, `<html class="${theme.value}">`)
     .replace(/<!--IMPORT_MAP-->/, JSON.stringify(importMap))
@@ -193,7 +184,7 @@ async function updatePreview() {
   }
 
   try {
-    const mainFile = store.state.mainFile
+    const mainFile = store.mainFile
 
     // if SSR, generate the SSR bundle and eval it to render the HTML
     if (isSSR && mainFile.endsWith('.vue')) {
diff --git a/src/output/moduleCompiler.ts b/src/output/moduleCompiler.ts
index afe2c84e..536497ef 100644
--- a/src/output/moduleCompiler.ts
+++ b/src/output/moduleCompiler.ts
@@ -13,19 +13,13 @@ import type { ExportSpecifier, Identifier, Node } from '@babel/types'
 export function compileModulesForPreview(store: Store, isSSR = false) {
   const seen = new Set<File>()
   const processed: string[] = []
-  processFile(
-    store,
-    store.state.files[store.state.mainFile],
-    processed,
-    seen,
-    isSSR,
-  )
+  processFile(store, store.files[store.mainFile], processed, seen, isSSR)
 
   if (!isSSR) {
     // also add css files that are not imported
-    for (const filename in store.state.files) {
+    for (const filename in store.files) {
       if (filename.endsWith('.css')) {
-        const file = store.state.files[filename]
+        const file = store.files[filename]
         if (!seen.has(file)) {
           processed.push(
             `\nwindow.__css__.push(${JSON.stringify(file.compiled.css)})`,
@@ -96,14 +90,14 @@ function processChildFiles(
 ) {
   if (hasDynamicImport) {
     // process all files
-    for (const file of Object.values(store.state.files)) {
+    for (const file of Object.values(store.files)) {
       if (seen.has(file)) continue
       processFile(store, file, processed, seen, isSSR)
     }
   } else if (importedFiles.size > 0) {
     // crawl child imports
     for (const imported of importedFiles) {
-      processFile(store, store.state.files[imported], processed, seen, isSSR)
+      processFile(store, store.files[imported], processed, seen, isSSR)
     }
   }
 }
@@ -122,7 +116,7 @@ function processModule(store: Store, src: string, filename: string) {
   const importToIdMap = new Map<string, string>()
 
   function resolveImport(raw: string): string | undefined {
-    const files = store.state.files
+    const files = store.files
     let resolved = raw
     const file =
       files[resolved] ||
diff --git a/src/store.ts b/src/store.ts
index 0204f717..a52604eb 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,4 +1,13 @@
-import { reactive, version, watch, watchEffect } from 'vue'
+import {
+  type ToRefs,
+  type UnwrapRef,
+  computed,
+  reactive,
+  ref,
+  shallowRef,
+  watch,
+  watchEffect,
+} from 'vue'
 import * as defaultCompiler from 'vue/compiler-sfc'
 import { compileFile } from './transform'
 import { atou, utoa } from './utils'
@@ -9,486 +18,466 @@ import type {
 } from 'vue/compiler-sfc'
 import type { OutputModes } from './types'
 import type { editor } from 'monaco-editor-core'
-import welcomeCode from './template/welcome.vue?raw'
-import newSFCCode from './template/new-sfc.vue?raw'
+import { type ImportMap, mergeImportMap } from './import-map'
 
-const defaultMainFile = 'src/App.vue'
+import welcomeSFCCode from './template/welcome.vue?raw'
+import newSFCCode from './template/new-sfc.vue?raw'
 
 export const importMapFile = 'import-map.json'
 export const tsconfigFile = 'tsconfig.json'
 
-const tsconfig = {
-  compilerOptions: {
-    allowJs: true,
-    checkJs: true,
-    jsx: 'Preserve',
-    target: 'ESNext',
-    module: 'ESNext',
-    moduleResolution: 'Bundler',
-    allowImportingTsExtensions: true,
-  },
-  vueCompilerOptions: {
-    target: 3.3,
-  },
-}
-
-export class File {
-  filename: string
-  code: string
-  hidden: boolean
-  compiled = {
-    js: '',
-    css: '',
-    ssr: '',
-  }
-  editorViewState: editor.ICodeEditorViewState | null = null
-
-  constructor(filename: string, code = '', hidden = false) {
-    this.filename = filename
-    this.code = code
-    this.hidden = hidden
-  }
-
-  get language() {
-    if (this.filename.endsWith('.vue')) {
-      return 'vue'
-    }
-    if (this.filename.endsWith('.html')) {
-      return 'html'
-    }
-    if (this.filename.endsWith('.css')) {
-      return 'css'
-    }
-    if (this.filename.endsWith('.ts')) {
-      return 'typescript'
-    }
-    return 'javascript'
-  }
-}
-
-export interface StoreState {
-  mainFile: string
-  files: Record<string, File>
-  activeFile: File
-  errors: (string | Error)[]
-  vueRuntimeURL: string
-  vueServerRendererURL: string
-  typescriptVersion: string
-  /** @deprecated use `locale` instead */
-  typescriptLocale?: string | undefined
-  locale?: string | undefined
-  // used to force reset the sandbox
-  resetFlip: boolean
-  /** \{ dependencyName: version \} */
-  dependencyVersion?: Record<string, string>
-}
-
-export interface SFCOptions {
-  script?: Partial<SFCScriptCompileOptions>
-  style?: Partial<SFCAsyncStyleCompileOptions>
-  template?: Partial<SFCTemplateCompileOptions>
-}
-
-export interface Store {
-  state: StoreState
-  options?: SFCOptions
-  compiler: typeof defaultCompiler
-  vueVersion?: string
-  init: () => void
-  setActive: (filename: string) => void
-  addFile: (filename: string | File) => void
-  deleteFile: (filename: string) => void
-  renameFile: (oldFilename: string, newFilename: string) => void
-  getImportMap: () => any
-  getTsConfig?: () => any
-  reloadLanguageTools?: undefined | (() => void)
-  initialShowOutput: boolean
-  initialOutputMode: OutputModes
-  customElement: boolean | string | RegExp | (string | RegExp)[]
-}
-
-export interface StoreOptions {
-  serializedState?: string
-  showOutput?: boolean
-  // loose type to allow getting from the URL without inducing a typing error
-  outputMode?: OutputModes | string
-  productionMode?: boolean
-  defaultVueRuntimeURL?: string
-  defaultVueRuntimeProdURL?: string
-  defaultVueServerRendererURL?: string
-  customElement?: boolean | string | RegExp | (string | RegExp)[]
-  welcomeFileTemplate?: string
-  newSFCTemplate?: string
-}
-
-export class ReplStore implements Store {
-  state: StoreState
-  compiler = defaultCompiler
-  vueVersion?: string
-  productionMode = false
-  options?: SFCOptions
-  initialShowOutput: boolean
-  initialOutputMode: OutputModes
-  reloadLanguageTools: undefined | (() => void)
-  customElement: boolean | string | RegExp | (string | RegExp)[]
-
-  private defaultVueRuntimeDevURL: string
-  private defaultVueRuntimeProdURL: string
-  private defaultVueServerRendererURL: string
-  private pendingCompiler: Promise<any> | null = null
-  private welcomeFileTemplate?: string
-  private newSFCTemplate?: string
-
-  constructor({
-    serializedState = '',
-    defaultVueRuntimeURL = `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.js`,
-    defaultVueRuntimeProdURL = `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.prod.js`,
-    defaultVueServerRendererURL = `https://cdn.jsdelivr.net/npm/@vue/server-renderer@${version}/dist/server-renderer.esm-browser.js`,
-    showOutput = false,
-    outputMode = 'preview',
-    productionMode = false,
-    customElement = /\.ce\.vue$/,
-    welcomeFileTemplate = welcomeCode,
-    newSFCTemplate = newSFCCode,
-  }: StoreOptions = {}) {
-    const files: StoreState['files'] = {}
-    this.welcomeFileTemplate = welcomeFileTemplate
-    this.newSFCTemplate = newSFCTemplate
-
-    if (serializedState) {
-      const saved = JSON.parse(atou(serializedState))
-      for (const filename in saved) {
-        setFile(files, filename, saved[filename])
-      }
-    } else {
-      setFile(files, defaultMainFile, this.welcomeFileTemplate)
-    }
-
-    this.productionMode = productionMode
-    this.defaultVueRuntimeDevURL = defaultVueRuntimeURL
-    this.defaultVueRuntimeProdURL = defaultVueRuntimeProdURL
-    this.defaultVueServerRendererURL = defaultVueServerRendererURL
-    this.initialShowOutput = showOutput
-    this.customElement = customElement
-    this.initialOutputMode = outputMode as OutputModes
-
-    let mainFile = defaultMainFile
-    if (!files[mainFile]) {
-      mainFile = Object.keys(files)[0]
-    }
-    this.state = reactive({
-      mainFile,
-      files,
-      activeFile: files[mainFile],
-      errors: [],
-      vueRuntimeURL: this.defaultVueRuntimeURL,
-      vueServerRendererURL: this.defaultVueServerRendererURL,
-      typescriptVersion: 'latest',
-      typescriptLocale: undefined,
-      resetFlip: true,
-    })
-
-    this.initImportMap()
-    this.initTsConfig()
-  }
-
-  get defaultVueRuntimeURL(): string {
-    return this.productionMode
-      ? this.defaultVueRuntimeProdURL
-      : this.defaultVueRuntimeDevURL
+export function useStore(
+  {
+    files = ref(Object.create(null)),
+    activeFilename = undefined!, // set later
+    mainFile = ref('src/App.vue'),
+    template = ref({
+      welcomeSFC: welcomeSFCCode,
+      newSFC: newSFCCode,
+    }),
+    builtinImportMap = ref({}),
+
+    errors = ref([]),
+    showOutput = ref(false),
+    outputMode = ref('preview'),
+    sfcOptions = ref({}),
+    compiler = shallowRef(defaultCompiler),
+    vueVersion = ref(null),
+
+    locale = ref(),
+    typescriptVersion = ref('latest'),
+    dependencyVersion = ref(Object.create(null)),
+    reloadLanguageTools = ref(),
+  }: Partial<StoreState> = {},
+  serializedState?: string,
+): ReplStore {
+  const loading = ref(false)
+
+  function applyBuiltinImportMap() {
+    const importMap = mergeImportMap(builtinImportMap.value, getImportMap())
+    setImportMap(importMap)
   }
 
-  // don't start compiling until the options are set
-  init() {
+  function init() {
     watchEffect(() =>
-      compileFile(this, this.state.activeFile).then(
-        (errs) => (this.state.errors = errs),
+      compileFile(store, activeFile.value).then(
+        (errs) => (errors.value = errs),
       ),
     )
 
     watch(
       () => [
-        this.state.files[tsconfigFile]?.code,
-        this.state.typescriptVersion,
-        this.state.typescriptLocale,
-        this.state.locale,
-        this.state.dependencyVersion,
+        files.value[tsconfigFile]?.code,
+        typescriptVersion.value,
+        locale.value,
+        dependencyVersion.value,
+        vueVersion.value,
       ],
-      () => this.reloadLanguageTools?.(),
+      () => reloadLanguageTools.value?.(),
       { deep: true },
     )
 
-    this.state.errors = []
-    for (const file in this.state.files) {
-      if (file !== defaultMainFile) {
-        compileFile(this, this.state.files[file]).then((errs) =>
-          this.state.errors.push(...errs),
+    watch(
+      builtinImportMap,
+      () => {
+        setImportMap(mergeImportMap(getImportMap(), builtinImportMap.value))
+      },
+      { deep: true, immediate: true },
+    )
+
+    watch(vueVersion, async (version) => {
+      if (version) {
+        const compilerUrl = `https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`
+        loading.value = true
+        compiler.value = await import(/* @vite-ignore */ compilerUrl).finally(
+          () => (loading.value = false),
         )
+        console.info(`[@vue/repl] Now using Vue version: ${version}`)
+      } else {
+        // reset to default
+        compiler.value = defaultCompiler
+        console.info(`[@vue/repl] Now using default Vue version`)
       }
+    })
+
+    watch(
+      sfcOptions,
+      () => {
+        sfcOptions.value.script ||= {}
+        sfcOptions.value.script.fs = {
+          fileExists(file: string) {
+            if (file.startsWith('/')) file = file.slice(1)
+            return !!store.files[file]
+          },
+          readFile(file: string) {
+            if (file.startsWith('/')) file = file.slice(1)
+            return store.files[file].code
+          },
+        }
+      },
+      { immediate: true },
+    )
+
+    // init tsconfig
+    if (!files.value[tsconfigFile]) {
+      files.value[tsconfigFile] = new File(
+        tsconfigFile,
+        JSON.stringify(tsconfig, undefined, 2),
+      )
     }
-  }
 
-  private initTsConfig() {
-    if (!this.state.files[tsconfigFile]) {
-      this.setTsConfig(tsconfig)
+    // compile rest of the files
+    errors.value = []
+    for (const [filename, file] of Object.entries(files.value)) {
+      if (filename !== mainFile.value) {
+        compileFile(store, file).then((errs) => errors.value.push(...errs))
+      }
     }
   }
 
-  setTsConfig(config: any) {
-    this.state.files[tsconfigFile] = new File(
-      tsconfigFile,
-      JSON.stringify(config, undefined, 2),
-    )
-  }
+  function setImportMap(map: ImportMap) {
+    if (map.imports)
+      for (const [key, value] of Object.entries(map.imports)) {
+        if (value) {
+          map.imports![key] = fixURL(value)
+        }
+      }
 
-  getTsConfig() {
-    try {
-      return JSON.parse(this.state.files[tsconfigFile].code)
-    } catch {
-      return {}
+    const code = JSON.stringify(map, undefined, 2)
+    if (files.value[importMapFile]) {
+      files.value[importMapFile].code = code
+    } else {
+      files.value[importMapFile] = new File(importMapFile, code)
     }
   }
 
-  setActive(filename: string) {
-    this.state.activeFile = this.state.files[filename]
+  const setActive: Store['setActive'] = (filename) => {
+    activeFilename.value = filename
   }
-
-  addFile(fileOrFilename: string | File): void {
+  const addFile: Store['addFile'] = (fileOrFilename) => {
     let file: File
     if (typeof fileOrFilename === 'string') {
       file = new File(
         fileOrFilename,
-        fileOrFilename.endsWith('.vue') ? this.newSFCTemplate : '',
+        fileOrFilename.endsWith('.vue') ? template.value.newSFC : '',
       )
     } else {
       file = fileOrFilename
     }
-    this.state.files[file.filename] = file
-    if (!file.hidden) this.setActive(file.filename)
+    files.value[file.filename] = file
+    if (!file.hidden) setActive(file.filename)
   }
-
-  deleteFile(filename: string) {
+  const deleteFile: Store['deleteFile'] = (filename) => {
     if (
-      confirm(`Are you sure you want to delete ${stripSrcPrefix(filename)}?`)
+      !confirm(`Are you sure you want to delete ${stripSrcPrefix(filename)}?`)
     ) {
-      if (this.state.activeFile.filename === filename) {
-        this.state.activeFile = this.state.files[this.state.mainFile]
-      }
-      delete this.state.files[filename]
+      return
     }
-  }
 
-  renameFile(oldFilename: string, newFilename: string) {
-    const { files } = this.state
-    const file = files[oldFilename]
+    if (activeFilename.value === filename) {
+      activeFilename.value = mainFile.value
+    }
+    delete files.value[filename]
+  }
+  const renameFile: Store['renameFile'] = (oldFilename, newFilename) => {
+    const file = files.value[oldFilename]
 
     if (!file) {
-      this.state.errors = [`Could not rename "${oldFilename}", file not found`]
+      errors.value = [`Could not rename "${oldFilename}", file not found`]
       return
     }
 
     if (!newFilename || oldFilename === newFilename) {
-      this.state.errors = [`Cannot rename "${oldFilename}" to "${newFilename}"`]
+      errors.value = [`Cannot rename "${oldFilename}" to "${newFilename}"`]
       return
     }
 
     file.filename = newFilename
-
     const newFiles: Record<string, File> = {}
 
     // Preserve iteration order for files
-    for (const name in files) {
+    for (const [name, file] of Object.entries(files.value)) {
       if (name === oldFilename) {
         newFiles[newFilename] = file
       } else {
-        newFiles[name] = files[name]
+        newFiles[name] = file
       }
     }
 
-    this.state.files = newFiles
+    files.value = newFiles
 
-    if (this.state.mainFile === oldFilename) {
-      this.state.mainFile = newFilename
+    if (mainFile.value === oldFilename) {
+      mainFile.value = newFilename
     }
 
-    compileFile(this, file).then((errs) => (this.state.errors = errs))
+    compileFile(store, file).then((errs) => (errors.value = errs))
   }
-
-  serialize() {
-    const files = this.getFiles()
+  const getImportMap: Store['getImportMap'] = () => {
+    try {
+      return JSON.parse(files.value[importMapFile].code)
+    } catch (e) {
+      errors.value = [
+        `Syntax error in ${importMapFile}: ${(e as Error).message}`,
+      ]
+      return {}
+    }
+  }
+  const getTsConfig: Store['getTsConfig'] = () => {
+    try {
+      return JSON.parse(files.value[tsconfigFile].code)
+    } catch {
+      return {}
+    }
+  }
+  const serialize: ReplStore['serialize'] = () => {
+    const files = getFiles()
     const importMap = files[importMapFile]
     if (importMap) {
-      const { imports, ...restImportMap } = JSON.parse(importMap)
-      if (imports['vue'] === this.defaultVueRuntimeURL) {
-        delete imports['vue']
+      const parsed = JSON.parse(importMap)
+      const builtin = builtinImportMap.value.imports || {}
+
+      if (parsed.imports) {
+        for (const [key, value] of Object.entries(parsed.imports)) {
+          if (builtin[key] === value) {
+            delete parsed.imports[key]
+          }
+        }
+        if (parsed.imports && !Object.keys(parsed.imports).length) {
+          delete parsed.imports
+        }
       }
-      if (imports['vue/server-renderer'] === this.defaultVueServerRendererURL) {
-        delete imports['vue/server-renderer']
+      if (parsed.scopes && !Object.keys(parsed.scopes).length) {
+        delete parsed.scopes
       }
-      if (!Object.keys(imports).length) {
-        delete files[importMapFile]
+      if (Object.keys(parsed).length) {
+        files[importMapFile] = JSON.stringify(parsed, null, 2)
       } else {
-        files[importMapFile] = JSON.stringify(
-          { imports, ...restImportMap },
-          null,
-          2,
-        )
+        delete files[importMapFile]
       }
     }
     return '#' + utoa(JSON.stringify(files))
   }
-
-  getFiles() {
+  const deserialize: ReplStore['deserialize'] = (serializedState: string) => {
+    if (serializedState.startsWith('#'))
+      serializedState = serializedState.slice(1)
+    const saved = JSON.parse(atou(serializedState))
+    for (const filename in saved) {
+      if (filename === '_version') {
+        vueVersion.value = saved[filename]
+      } else {
+        setFile(files.value, filename, saved[filename])
+      }
+    }
+  }
+  const getFiles: ReplStore['getFiles'] = () => {
     const exported: Record<string, string> = {}
-    for (const filename in this.state.files) {
-      const normalized =
-        filename === importMapFile ? filename : stripSrcPrefix(filename)
-      exported[normalized] = this.state.files[filename].code
+    for (const [filename, file] of Object.entries(files.value)) {
+      const normalized = stripSrcPrefix(filename)
+      exported[normalized] = file.code
     }
+    if (vueVersion.value) exported._version = vueVersion.value
     return exported
   }
-
-  async setFiles(newFiles: Record<string, string>, mainFile = defaultMainFile) {
-    const files: Record<string, File> = {}
-    if (mainFile === defaultMainFile && !newFiles[mainFile]) {
-      setFile(files, mainFile, welcomeCode)
+  const setFiles: ReplStore['setFiles'] = async (
+    newFiles,
+    mainFile = store.mainFile,
+  ) => {
+    const files: Record<string, File> = Object.create(null)
+
+    mainFile = addSrcPrefix(mainFile)
+    if (!newFiles[mainFile]) {
+      setFile(files, mainFile, template.value.welcomeSFC || welcomeSFCCode)
     }
-    for (const filename in newFiles) {
-      setFile(files, filename, newFiles[filename])
+    for (const [filename, file] of Object.entries(newFiles)) {
+      setFile(files, filename, file)
     }
+
     const errors = []
-    for (const file in files) {
-      errors.push(...(await compileFile(this, files[file])))
+    for (const file of Object.values(files)) {
+      errors.push(...(await compileFile(store, file)))
     }
-    this.state.errors = errors
-    this.state.mainFile = addSrcPrefix(mainFile)
-    this.state.files = files
-    this.initImportMap()
-    this.setActive(this.state.mainFile)
-    this.forceSandboxReset()
-  }
 
-  private forceSandboxReset() {
-    this.state.resetFlip = !this.state.resetFlip
+    store.mainFile = mainFile
+    store.files = files
+    store.errors = errors
+    applyBuiltinImportMap()
+    setActive(store.mainFile)
   }
 
-  private initImportMap() {
-    const map = this.state.files[importMapFile]
-    if (!map) {
-      this.state.files[importMapFile] = new File(
-        importMapFile,
-        JSON.stringify(
-          {
-            imports: {
-              vue: this.defaultVueRuntimeURL,
-              'vue/server-renderer': this.defaultVueServerRendererURL,
-            },
-          },
-          null,
-          2,
-        ),
-      )
-    } else {
-      try {
-        const json = JSON.parse(map.code)
-        if (!json.imports.vue) {
-          json.imports.vue = this.defaultVueRuntimeURL
-        } else {
-          json.imports.vue = fixURL(json.imports.vue)
-        }
-        if (!json.imports['vue/server-renderer']) {
-          json.imports['vue/server-renderer'] = this.defaultVueServerRendererURL
-        } else {
-          json.imports['vue/server-renderer'] = fixURL(
-            json.imports['vue/server-renderer'],
-          )
-        }
-        map.code = JSON.stringify(json, null, 2)
-      } catch {}
-    }
+  if (serializedState) {
+    deserialize(serializedState)
+  } else {
+    setFile(
+      files.value,
+      mainFile.value,
+      template.value.welcomeSFC || welcomeSFCCode,
+    )
   }
-
-  getImportMap() {
-    try {
-      return JSON.parse(this.state.files[importMapFile].code)
-    } catch (e) {
-      this.state.errors = [
-        `Syntax error in import-map.json: ${(e as Error).message}`,
-      ]
-      return {}
-    }
+  if (!files.value[mainFile.value]) {
+    mainFile.value = Object.keys(files.value)[0]
   }
+  activeFilename ||= ref(mainFile.value)
+  const activeFile = computed(() => files.value[activeFilename.value])
+
+  applyBuiltinImportMap()
+
+  const store: ReplStore = reactive({
+    files,
+    activeFile,
+    activeFilename,
+    mainFile,
+    template,
+    builtinImportMap,
+
+    errors,
+    showOutput,
+    outputMode,
+    sfcOptions,
+    compiler,
+    loading,
+    vueVersion,
+
+    locale,
+    typescriptVersion,
+    dependencyVersion,
+    reloadLanguageTools,
+
+    init,
+    setActive,
+    addFile,
+    deleteFile,
+    renameFile,
+    getImportMap,
+    getTsConfig,
+    serialize,
+    deserialize,
+    getFiles,
+    setFiles,
+  })
+  return store
+}
 
-  setImportMap(map: {
-    imports: Record<string, string>
-    scopes?: Record<string, Record<string, string>>
-  }) {
-    this.state.files[importMapFile]!.code = JSON.stringify(map, null, 2)
-  }
+const tsconfig = {
+  compilerOptions: {
+    allowJs: true,
+    checkJs: true,
+    jsx: 'Preserve',
+    target: 'ESNext',
+    module: 'ESNext',
+    moduleResolution: 'Bundler',
+    allowImportingTsExtensions: true,
+  },
+  vueCompilerOptions: {
+    target: 3.4,
+  },
+}
 
-  setTypeScriptVersion(version: string) {
-    this.state.typescriptVersion = version
-    console.info(`[@vue/repl] Now using TypeScript version: ${version}`)
-  }
+export interface SFCOptions {
+  script?: Partial<SFCScriptCompileOptions>
+  style?: Partial<SFCAsyncStyleCompileOptions>
+  template?: Partial<SFCTemplateCompileOptions>
+}
 
-  async setVueVersion(version: string) {
-    this.vueVersion = version
-    const compilerUrl = `https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`
-    // differentiate prod/dev for runtime
-    const runtimeUrl = `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser${
-      this.productionMode ? `.prod` : ``
-    }.js`
-    const ssrUrl = `https://cdn.jsdelivr.net/npm/@vue/server-renderer@${version}/dist/server-renderer.esm-browser.js`
-    this.pendingCompiler = import(/* @vite-ignore */ compilerUrl)
-    this.compiler = await this.pendingCompiler
-    this.pendingCompiler = null
-    this.state.vueRuntimeURL = runtimeUrl
-    this.state.vueServerRendererURL = ssrUrl
-    const importMap = this.getImportMap()
-    const imports = importMap.imports || (importMap.imports = {})
-    imports.vue = runtimeUrl
-    imports['vue/server-renderer'] = ssrUrl
-    this.setImportMap(importMap)
-    this.forceSandboxReset()
-    this.reloadLanguageTools?.()
-    console.info(`[@vue/repl] Now using Vue version: ${version}`)
+export type StoreState = ToRefs<{
+  files: Record<string, File>
+  activeFilename: string
+  mainFile: string
+  template: {
+    welcomeSFC?: string
+    newSFC?: string
   }
+  builtinImportMap: ImportMap
+
+  // output
+  errors: (string | Error)[]
+  showOutput: boolean
+  outputMode: OutputModes
+  sfcOptions: SFCOptions
+  /** `@vue/compiler-sfc` */
+  compiler: typeof defaultCompiler
+  /* only apply for compiler-sfc */
+  vueVersion: string | null
+
+  // volar-related
+  locale: string | undefined
+  typescriptVersion: string
+  /** \{ dependencyName: version \} */
+  dependencyVersion: Record<string, string>
+  reloadLanguageTools?: (() => void) | undefined
+}>
 
-  resetVueVersion() {
-    this.vueVersion = undefined
-    this.compiler = defaultCompiler
-    this.state.vueRuntimeURL = this.defaultVueRuntimeURL
-    this.state.vueServerRendererURL = this.defaultVueServerRendererURL
-    const importMap = this.getImportMap()
-    const imports = importMap.imports || (importMap.imports = {})
-    imports.vue = this.defaultVueRuntimeURL
-    imports['vue/server-renderer'] = this.defaultVueServerRendererURL
-    this.setImportMap(importMap)
-    this.forceSandboxReset()
-    console.info(`[@vue/repl] Now using default Vue version`)
+export interface ReplStore extends UnwrapRef<StoreState> {
+  activeFile: File
+  /** Loading compiler */
+  loading: boolean
+  init(): void
+  setActive(filename: string): void
+  addFile(filename: string | File): void
+  deleteFile(filename: string): void
+  renameFile(oldFilename: string, newFilename: string): void
+  getImportMap(): ImportMap
+  getTsConfig(): Record<string, any>
+  serialize(): string
+  deserialize(serializedState: string): void
+  getFiles(): Record<string, string>
+  setFiles(newFiles: Record<string, string>, mainFile?: string): Promise<void>
+}
+
+export type Store = Pick<
+  ReplStore,
+  | 'files'
+  | 'activeFile'
+  | 'mainFile'
+  | 'errors'
+  | 'showOutput'
+  | 'outputMode'
+  | 'sfcOptions'
+  | 'compiler'
+  | 'vueVersion'
+  | 'locale'
+  | 'typescriptVersion'
+  | 'dependencyVersion'
+  | 'reloadLanguageTools'
+  | 'init'
+  | 'setActive'
+  | 'addFile'
+  | 'deleteFile'
+  | 'renameFile'
+  | 'getImportMap'
+  | 'getTsConfig'
+>
+
+export class File {
+  compiled = {
+    js: '',
+    css: '',
+    ssr: '',
   }
+  editorViewState: editor.ICodeEditorViewState | null = null
 
-  toggleProduction() {
-    this.productionMode = !this.productionMode
-    if (this.vueVersion) {
-      this.setVueVersion(this.vueVersion)
-    } else {
-      this.resetVueVersion()
+  constructor(
+    public filename: string,
+    public code = '',
+    public hidden = false,
+  ) {}
+
+  get language() {
+    if (this.filename.endsWith('.vue')) {
+      return 'vue'
+    }
+    if (this.filename.endsWith('.html')) {
+      return 'html'
+    }
+    if (this.filename.endsWith('.css')) {
+      return 'css'
+    }
+    if (this.filename.endsWith('.ts')) {
+      return 'typescript'
     }
+    return 'javascript'
   }
 }
 
-function setFile(
-  files: Record<string, File>,
-  filename: string,
-  content: string,
-) {
-  // prefix user files with src/
-  // for cleaner Volar path completion when using Monaco editor
-  const normalized = addSrcPrefix(filename)
-  files[normalized] = new File(normalized, content)
-}
-
 function addSrcPrefix(file: string) {
   return file === importMapFile ||
     file === tsconfigFile ||
@@ -497,10 +486,19 @@ function addSrcPrefix(file: string) {
     : `src/${file}`
 }
 
+export function stripSrcPrefix(file: string) {
+  return file.replace(/^src\//, '')
+}
+
 function fixURL(url: string) {
   return url.replace('https://sfc.vuejs', 'https://play.vuejs')
 }
 
-export function stripSrcPrefix(file: string) {
-  return file.replace(/^src\//, '')
+function setFile(
+  files: Record<string, File>,
+  filename: string,
+  content: string,
+) {
+  const normalized = addSrcPrefix(filename)
+  files[normalized] = new File(normalized, content)
 }
diff --git a/src/transform.ts b/src/transform.ts
index dc6779ef..ad3ca37d 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -56,7 +56,7 @@ export async function compileFile(
   const { errors, descriptor } = store.compiler.parse(code, {
     filename,
     sourceMap: true,
-    templateParseOptions: store.options?.template?.compilerOptions,
+    templateParseOptions: store.sfcOptions?.template?.compilerOptions,
   })
   if (errors.length) {
     return errors
@@ -130,7 +130,8 @@ export async function compileFile(
   // only need dedicated compilation if not using <script setup>
   if (
     descriptor.template &&
-    (!descriptor.scriptSetup || store.options?.script?.inlineTemplate === false)
+    (!descriptor.scriptSetup ||
+      store.sfcOptions?.script?.inlineTemplate === false)
   ) {
     const clientTemplateResult = await doCompileTemplate(
       store,
@@ -168,27 +169,15 @@ export async function compileFile(
   }
 
   // styles
-  const ceFilter = store.customElement
+  const ceFilter = store.sfcOptions.script?.customElement || /\.ce\.vue$/
   function isCustomElement(filters: typeof ceFilter): boolean {
     if (typeof filters === 'boolean') {
       return filters
     }
-
-    if (typeof filters === 'string') {
-      return filters.includes(filename)
-    } else if (
-      !Array.isArray(filters) &&
-      Object.prototype.toString.call(filters) === '[object RegExp]'
-    ) {
-      return filters.test(filename)
-    }
-
-    if (Array.isArray(filters)) {
-      return filters.some((filter) => {
-        return isCustomElement(filter)
-      })
+    if (typeof filters === 'function') {
+      return filters(filename)
     }
-    return false
+    return filters.test(filename)
   }
   let isCE = isCustomElement(ceFilter)
 
@@ -200,7 +189,7 @@ export async function compileFile(
     }
 
     const styleResult = await store.compiler.compileStyleAsync({
-      ...store.options?.style,
+      ...store.sfcOptions?.style,
       source: style.content,
       filename,
       id,
@@ -211,7 +200,7 @@ export async function compileFile(
       // postcss uses pathToFileURL which isn't polyfilled in the browser
       // ignore these errors for now
       if (!styleResult.errors[0].message.includes('pathToFileURL')) {
-        store.state.errors = styleResult.errors
+        store.errors = styleResult.errors
       }
       // proceed even if css compile errors
     } else {
@@ -256,14 +245,14 @@ async function doCompileScript(
       : undefined
     const compiledScript = store.compiler.compileScript(descriptor, {
       inlineTemplate: true,
-      ...store.options?.script,
+      ...store.sfcOptions?.script,
       id,
       templateOptions: {
-        ...store.options?.template,
+        ...store.sfcOptions?.template,
         ssr,
         ssrCssVars: descriptor.cssVars,
         compilerOptions: {
-          ...store.options?.template?.compilerOptions,
+          ...store.sfcOptions?.template?.compilerOptions,
           expressionPlugins,
         },
       },
@@ -304,7 +293,7 @@ async function doCompileTemplate(
 ) {
   let { code, errors } = store.compiler.compileTemplate({
     isProd: false,
-    ...store.options?.template,
+    ...store.sfcOptions?.template,
     ast: descriptor.template!.ast,
     source: descriptor.template!.content,
     filename: descriptor.filename,
@@ -314,7 +303,7 @@ async function doCompileTemplate(
     ssr,
     ssrCssVars: descriptor.cssVars,
     compilerOptions: {
-      ...store.options?.template?.compilerOptions,
+      ...store.sfcOptions?.template?.compilerOptions,
       bindingMetadata,
       expressionPlugins: isTS ? ['typescript'] : undefined,
     },
diff --git a/src/types.ts b/src/types.ts
index 898f38d8..761f453b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,4 +1,5 @@
-import type { Component } from 'vue'
+import type { Component, InjectionKey } from 'vue'
+import type { Store } from './store'
 
 export type EditorMode = 'js' | 'css' | 'ssr'
 export interface EditorProps {
@@ -13,3 +14,5 @@ export interface EditorEmits {
 export type EditorComponentType = Component<EditorProps>
 
 export type OutputModes = 'preview' | EditorMode
+
+export const injectKeyStore: InjectionKey<Store> = Symbol('store')
diff --git a/test/main.ts b/test/main.ts
index 53d64fe8..93d05773 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -1,42 +1,52 @@
-import { createApp, h, watchEffect } from 'vue'
-import { Repl, ReplStore } from '../src'
+/* eslint-disable @typescript-eslint/prefer-ts-expect-error */
+import { createApp, h, ref, watchEffect } from 'vue'
+import { type OutputModes, Repl, useStore, useVueImportMap } from '../src'
+// @ts-ignore
 import MonacoEditor from '../src/editor/MonacoEditor.vue'
-// import CodeMirrorEditor from '../src/editor/CodeMirrorEditor.vue'
-;(window as any).process = { env: {} }
+// @ts-ignore
+import CodeMirrorEditor from '../src/editor/CodeMirrorEditor.vue'
+
+const window = globalThis.window as any
+window.process = { env: {} }
 
 const App = {
   setup() {
     const query = new URLSearchParams(location.search)
-    const store = ((window as any).store = new ReplStore({
-      serializedState: location.hash.slice(1),
-      showOutput: query.has('so'),
-      outputMode: query.get('om') || 'preview',
-      defaultVueRuntimeURL: import.meta.env.PROD
+    const { importMap: builtinImportMap, vueVersion } = useVueImportMap({
+      runtimeDev: import.meta.env.PROD
         ? undefined
         : `${location.origin}/src/vue-dev-proxy`,
-      defaultVueServerRendererURL: import.meta.env.PROD
+      serverRenderer: import.meta.env.PROD
         ? undefined
         : `${location.origin}/src/vue-server-renderer-dev-proxy`,
-    }))
-
+    })
+    const store = (window.store = useStore(
+      {
+        builtinImportMap,
+        vueVersion,
+        showOutput: ref(query.has('so')),
+        outputMode: ref((query.get('om') as OutputModes) || 'preview'),
+      },
+      location.hash,
+    ))
     console.info(store)
 
     watchEffect(() => history.replaceState({}, '', store.serialize()))
 
     // setTimeout(() => {
-    // store.setFiles(
-    //   {
-    //     'index.html': '<h1>yo</h1>',
-    //     'main.js': 'document.body.innerHTML = "<h1>hello</h1>"',
-    //     'foo.js': 'document.body.innerHTML = "<h1>hello</h1>"',
-    //     'bar.js': 'document.body.innerHTML = "<h1>hello</h1>"',
-    //     'baz.js': 'document.body.innerHTML = "<h1>hello</h1>"'
-    //   },
-    //   'index.html'
-    // )
-    // }, 1000);
+    //   store.setFiles(
+    //     {
+    //       'src/index.html': '<h1>yo</h1>',
+    //       'src/main.js': 'document.body.innerHTML = "<h1>hello</h1>"',
+    //       'src/foo.js': 'document.body.innerHTML = "<h1>hello</h1>"',
+    //       'src/bar.js': 'document.body.innerHTML = "<h1>hello</h1>"',
+    //       'src/baz.js': 'document.body.innerHTML = "<h1>hello</h1>"',
+    //     },
+    //     'src/index.html',
+    //   )
+    // }, 1000)
 
-    // store.setVueVersion('3.2.8')
+    // store.vueVersion = '3.4.1'
 
     return () =>
       h(Repl, {