jsx-repl 0.0.1 → 0.0.5

package/README.md

@@ -1,10 +1,8 @@
 # jsx-repl
 
-JSX REPL, support Vite plugins and Volar plugins.
+Supports Vite plugins and Volar plugins.
 
-## Basic Usage
-
-**Note: `jsx-repl` supports Monaco Editor, but also requires explicitly passing in the editor to be used for tree-shaking.**
+## Setup
 
 ```ts
 // vite.config.ts
@@ -17,89 +15,11 @@ export default defineConfig({
 })
 ```
 
-### With CodeMirror Editor
-
-Basic editing experience with no intellisense. Lighter weight, fewer network requests, better for embedding use cases.
+## Usage
 
-```vue
-<script setup>
+```jsx
+// src/App.jsx
 import { Repl } from 'jsx-repl'
-import CodeMirror from 'jsx-repl/codemirror-editor'
-</script>
-
-<template>
-  <Repl :editor="CodeMirror" />
-</template>
-```
-
-### With Monaco Editor
-
-With Volar support, autocomplete, type inference, and semantic highlighting. Heavier bundle, loads dts files from CDN, better for standalone use cases.
-
-```vue
-<script setup>
-import { Repl } from 'jsx-repl'
-import Monaco from 'jsx-repl/monaco-editor'
-</script>
-
-<template>
-  <Repl :editor="Monaco" />
-</template>
-```
-
-## Advanced Usage
-
-Customize the behavior of the REPL by manually initializing the store.
-
-See [v4 Migration Guide](https://github.com/vuejs/repl/releases/tag/v4.0.0)
-
-```vue
-<script setup>
-import { watchEffect, ref } from 'vue'
-import { Repl, useStore, useVueImportMap } from 'jsx-repl'
-import Monaco from 'jsx-repl/monaco-editor'
-
-// retrieve some configuration options from the URL
-const query = new URLSearchParams(location.search)
-
-const {
-  importMap: builtinImportMap,
-  vueVersion,
-  productionMode,
-} = useVueImportMap({
-  // specify the default URL to import Vue runtime from in the sandbox
-  // default is the CDN link from jsdelivr.com with version matching Vue's version
-  // from peerDependency
-  runtimeDev: 'cdn link to vue.runtime.esm-browser.js',
-  runtimeProd: 'cdn link to vue.runtime.esm-browser.prod.js',
-  serverRenderer: 'cdn link to server-renderer.esm-browser.js',
-})
-
-const store = useStore(
-  {
-    // pre-set import map
-    builtinImportMap,
-    vueVersion,
-    // starts on the output pane (mobile only) if the URL has a showOutput query
-    showOutput: ref(query.has('showOutput')),
-    // starts on a different tab on the output pane if the URL has a outputMode query
-    // and default to the "preview" tab
-    outputMode: ref(query.get('outputMode') || 'preview'),
-  },
-  // initialize repl with previously serialized state
-  location.hash,
-)
-
-// persist state to URL hash
-watchEffect(() => history.replaceState({}, '', store.serialize()))
-
-// use a specific version of Vue
-vueVersion.value = '3.2.8'
-// production mode is enabled
-productionMode.value = true
-</script>
 
-<template>
-  <Repl :store="store" :editor="Monaco" :showCompileOutput="true" />
-</template>
+export default () => <Repl />
 ```

package/dist/favicon.svg

@@ -0,0 +1,6 @@
+<svg width="580" height="580" viewBox="0 0 580 580" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 120C40 75.8172 75.8172 40 120 40H460C504.183 40 540 75.8172 540 120V460C540 504.183 504.183 540 460 540H120C75.8172 540 40 504.183 40 460V120Z" fill="#383838"/>
+<path d="M120 41H460V39H120V41ZM539 120V460H541V120H539ZM460 539H120V541H460V539ZM41 460V120H39V460H41ZM120 539C76.3695 539 41 503.63 41 460H39C39 504.735 75.2649 541 120 541V539ZM539 460C539 503.63 503.63 539 460 539V541C504.735 541 541 504.735 541 460H539ZM460 41C503.63 41 539 76.3695 539 120H541C541 75.2649 504.735 39 460 39V41ZM120 39C75.2649 39 39 75.2649 39 120H41C41 76.3695 76.3695 41 120 41V39Z" fill="black" fill-opacity="0.1"/>
+<path d="M201.091 483V389.909H237.818C244.848 389.909 250.848 391.167 255.818 393.682C260.818 396.167 264.621 399.697 267.227 404.273C269.864 408.818 271.182 414.167 271.182 420.318C271.182 426.5 269.848 431.818 267.182 436.273C264.515 440.697 260.652 444.091 255.591 446.455C250.561 448.818 244.47 450 237.318 450H212.727V434.182H234.136C237.894 434.182 241.015 433.667 243.5 432.636C245.985 431.606 247.833 430.061 249.045 428C250.288 425.939 250.909 423.379 250.909 420.318C250.909 417.227 250.288 414.621 249.045 412.5C247.833 410.379 245.97 408.773 243.455 407.682C240.97 406.561 237.833 406 234.045 406H220.773V483H201.091ZM251.364 440.636L274.5 483H252.773L230.136 440.636H251.364ZM285.091 483V389.909H347.818V406.136H304.773V428.318H344.591V444.545H304.773V466.773H348V483H285.091ZM363.466 483V389.909H400.193C407.254 389.909 413.269 391.258 418.239 393.955C423.208 396.621 426.996 400.333 429.602 405.091C432.239 409.818 433.557 415.273 433.557 421.455C433.557 427.636 432.223 433.091 429.557 437.818C426.89 442.545 423.027 446.227 417.966 448.864C412.936 451.5 406.845 452.818 399.693 452.818H376.284V437.045H396.511C400.299 437.045 403.42 436.394 405.875 435.091C408.36 433.758 410.208 431.924 411.42 429.591C412.663 427.227 413.284 424.515 413.284 421.455C413.284 418.364 412.663 415.667 411.42 413.364C410.208 411.03 408.36 409.227 405.875 407.955C403.39 406.652 400.239 406 396.42 406H383.148V483H363.466ZM446.341 483V389.909H466.023V466.773H505.932V483H446.341Z" fill="white"/>
+<path d="M307.364 242.909H326.818V307.818C326.818 313.818 325.47 319.03 322.773 323.455C320.106 327.879 316.394 331.288 311.636 333.682C306.879 336.076 301.348 337.273 295.045 337.273C289.439 337.273 284.348 336.288 279.773 334.318C275.227 332.318 271.621 329.288 268.955 325.227C266.288 321.136 264.97 316 265 309.818H284.591C284.652 312.273 285.152 314.379 286.091 316.136C287.061 317.864 288.379 319.197 290.045 320.136C291.742 321.045 293.742 321.5 296.045 321.5C298.47 321.5 300.515 320.985 302.182 319.955C303.879 318.894 305.167 317.348 306.045 315.318C306.924 313.288 307.364 310.788 307.364 307.818V242.909ZM393.591 269.682C393.227 266.015 391.667 263.167 388.909 261.136C386.152 259.106 382.409 258.091 377.682 258.091C374.47 258.091 371.758 258.545 369.545 259.455C367.333 260.333 365.636 261.561 364.455 263.136C363.303 264.712 362.727 266.5 362.727 268.5C362.667 270.167 363.015 271.621 363.773 272.864C364.561 274.106 365.636 275.182 367 276.091C368.364 276.97 369.939 277.742 371.727 278.409C373.515 279.045 375.424 279.591 377.455 280.045L385.818 282.045C389.879 282.955 393.606 284.167 397 285.682C400.394 287.197 403.333 289.061 405.818 291.273C408.303 293.485 410.227 296.091 411.591 299.091C412.985 302.091 413.697 305.53 413.727 309.409C413.697 315.106 412.242 320.045 409.364 324.227C406.515 328.379 402.394 331.606 397 333.909C391.636 336.182 385.167 337.318 377.591 337.318C370.076 337.318 363.53 336.167 357.955 333.864C352.409 331.561 348.076 328.152 344.955 323.636C341.864 319.091 340.242 313.47 340.091 306.773H359.136C359.348 309.894 360.242 312.5 361.818 314.591C363.424 316.652 365.561 318.212 368.227 319.273C370.924 320.303 373.97 320.818 377.364 320.818C380.697 320.818 383.591 320.333 386.045 319.364C388.53 318.394 390.455 317.045 391.818 315.318C393.182 313.591 393.864 311.606 393.864 309.364C393.864 307.273 393.242 305.515 392 304.091C390.788 302.667 389 301.455 386.636 300.455C384.303 299.455 381.439 298.545 378.045 297.727L367.909 295.182C360.061 293.273 353.864 290.288 349.318 286.227C344.773 282.167 342.515 276.697 342.545 269.818C342.515 264.182 344.015 259.258 347.045 255.045C350.106 250.833 354.303 247.545 359.636 245.182C364.97 242.818 371.03 241.636 377.818 241.636C384.727 241.636 390.758 242.818 395.909 245.182C401.091 247.545 405.121 250.833 408 255.045C410.879 259.258 412.364 264.136 412.455 269.682H393.591ZM445.42 242.909L464.193 274.636H464.92L483.784 242.909H506.011L477.602 289.455L506.648 336H484.011L464.92 304.227H464.193L445.102 336H422.557L451.693 289.455L423.102 242.909H445.42Z" fill="white"/>
+</svg>

package/dist/{monaco-editor.css → index.css}

@@ -1,3 +1,456 @@
+*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}.i-carbon\:add-large{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M17 15V5h-2v10H5v2h10v10h2V17h10v-2z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:checkmark{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m13 24l-9-9l1.414-1.414L13 21.171L26.586 7.586L28 9z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:close-outline{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M16 2C8.2 2 2 8.2 2 16s6.2 14 14 14s14-6.2 14-14S23.8 2 16 2m0 26C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12s-5.4 12-12 12'/%3E%3Cpath fill='currentColor' d='M21.4 23L16 17.6L10.6 23L9 21.4l5.4-5.4L9 10.6L10.6 9l5.4 5.4L21.4 9l1.6 1.6l-5.4 5.4l5.4 5.4z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:download{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:edit{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M2 26h28v2H2zM25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4zm-5-5L24 7.6l-3 3L17.4 7zM6 22v-3.6l10-10l3.6 3.6l-10 10z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:light{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M15 2h2v5h-2zm6.688 6.9l3.506-3.506l1.414 1.414l-3.506 3.506zM25 15h5v2h-5zm-3.312 8.1l1.414-1.413l3.506 3.506l-1.414 1.414zM15 25h2v5h-2zm-9.606.192L8.9 21.686l1.414 1.414l-3.505 3.506zM2 15h5v2H2zm3.395-8.192l1.414-1.414L10.315 8.9L8.9 10.314zM16 12a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:logo-github{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.7 3.7 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:moon{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M13.503 5.414a15.076 15.076 0 0 0 11.593 18.194a11.1 11.1 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1 1 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.07 13.07 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:next-outline{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m16 8l-1.43 1.393L20.15 15H8v2h12.15l-5.58 5.573L16 24l8-8z'/%3E%3Cpath fill='currentColor' d='M16 30a14 14 0 1 1 14-14a14.016 14.016 0 0 1-14 14m0-26a12 12 0 1 0 12 12A12.014 12.014 0 0 0 16 4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:previous-outline{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m16 8l1.43 1.393L11.85 15H24v2H11.85l5.58 5.573L16 24l-8-8z'/%3E%3Cpath fill='currentColor' d='M16 30a14 14 0 1 1 14-14a14.016 14.016 0 0 1-14 14m0-26a12 12 0 1 0 12 12A12.014 12.014 0 0 0 16 4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:renew{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 10H6.78A11 11 0 0 1 27 16h2A13 13 0 0 0 6 7.68V4H4v8h8zm8 12h5.22A11 11 0 0 1 5 16H3a13 13 0 0 0 23 8.32V28h2v-8h-8z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:rotate-180{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M14.091 26.823l-.346 1.968a12.896 12.896 0 0 1-4.24-1.541l1-1.731a10.909 10.909 0 0 0 3.586 1.305z' fill='currentColor'/%3E%3Cpath d='M7.577 23.068l-1.532 1.285a12.981 12.981 0 0 1-2.25-3.91l1.877-.684a10.98 10.98 0 0 0 1.905 3.31z' fill='currentColor'/%3E%3Cpath d='M22.495 27.25a12.896 12.896 0 0 1-4.24 1.542l-.347-1.968a10.909 10.909 0 0 0 3.587-1.305z' fill='currentColor'/%3E%3Cpath d='M26.327 19.759l1.878.683a12.981 12.981 0 0 1-2.25 3.911l-.311-.261l-1.22-1.024a10.982 10.982 0 0 0 1.903-3.31z' fill='currentColor'/%3E%3Cpath d='M13.662 5.256c-.16.034-.315.08-.472.121a10.96 10.96 0 0 0-.633.183c-.164.054-.325.116-.486.178c-.193.074-.383.15-.57.235c-.161.072-.32.15-.476.23q-.268.136-.526.286c-.153.09-.305.18-.454.276c-.167.11-.33.224-.492.342c-.14.102-.281.203-.417.312c-.161.13-.315.268-.47.406c-.122.11-.248.217-.365.332c-.167.164-.322.338-.478.512A10.944 10.944 0 0 0 5 16H3a12.936 12.936 0 0 1 3.05-8.35l-.005-.004c.092-.11.197-.206.293-.312c.184-.205.367-.41.563-.603c.139-.136.286-.262.43-.391c.183-.165.366-.329.558-.482c.16-.128.325-.247.49-.367c.192-.14.385-.277.585-.406c.175-.113.353-.22.532-.324q.309-.179.626-.341c.184-.094.37-.185.56-.27c.222-.1.449-.191.678-.28c.19-.072.378-.145.571-.208c.246-.082.498-.15.75-.217c.186-.049.368-.102.556-.143c.29-.063.587-.107.884-.15c.159-.023.314-.056.475-.073A12.933 12.933 0 0 1 26 7.703V4h2v8h-8v-2h5.189A10.961 10.961 0 0 0 16 5a11.111 11.111 0 0 0-1.189.067c-.136.015-.268.042-.403.061c-.25.037-.501.075-.746.128z' fill='currentColor'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:save{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m27.71 9.29l-5-5A1 1 0 0 0 22 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V10a1 1 0 0 0-.29-.71M12 6h8v4h-8Zm8 20h-8v-8h8Zm2 0v-8a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8H6V6h4v4a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6.41l4 4V26Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:trash-can{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 12h2v12h-2zm6 0h2v12h-2z'/%3E%3Cpath fill='currentColor' d='M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20zm4-26h8v2h-8z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:view{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M30.94 15.66A16.69 16.69 0 0 0 16 5A16.69 16.69 0 0 0 1.06 15.66a1 1 0 0 0 0 .68A16.69 16.69 0 0 0 16 27a16.69 16.69 0 0 0 14.94-10.66a1 1 0 0 0 0-.68M16 25c-5.3 0-10.9-3.93-12.93-9C5.1 10.93 10.7 7 16 7s10.9 3.93 12.93 9C26.9 21.07 21.3 25 16 25'/%3E%3Cpath fill='currentColor' d='M16 10a6 6 0 1 0 6 6a6 6 0 0 0-6-6m0 10a4 4 0 1 1 4-4a4 4 0 0 1-4 4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.i-carbon\:view-off{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m5.24 22.51l1.43-1.42A14.06 14.06 0 0 1 3.07 16C5.1 10.93 10.7 7 16 7a12.4 12.4 0 0 1 4 .72l1.55-1.56A14.7 14.7 0 0 0 16 5A16.69 16.69 0 0 0 1.06 15.66a1 1 0 0 0 0 .68a16 16 0 0 0 4.18 6.17'/%3E%3Cpath fill='currentColor' d='M12 15.73a4 4 0 0 1 3.7-3.7l1.81-1.82a6 6 0 0 0-7.33 7.33zm18.94-.07a16.4 16.4 0 0 0-5.74-7.44L30 3.41L28.59 2L2 28.59L3.41 30l5.1-5.1A15.3 15.3 0 0 0 16 27a16.69 16.69 0 0 0 14.94-10.66a1 1 0 0 0 0-.68M20 16a4 4 0 0 1-6 3.44L19.44 14a4 4 0 0 1 .56 2m-4 9a13.05 13.05 0 0 1-6-1.58l2.54-2.54a6 6 0 0 0 8.35-8.35l2.87-2.87A14.54 14.54 0 0 1 28.93 16C26.9 21.07 21.3 25 16 25'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}.container{width:100%;}.bg{background-color:var(--bg) /* var(--bg) */;}.bg\!{background-color:var(--bg) /* var(--bg) */ !important;}.text,[text=""]{color:var(--text) /* var(--text) */;}.text\!,[\!text=""]{color:var(--text) /* var(--text) */ !important;}.file-text::file-selector-button{color:var(--text) /* var(--text) */;}[file-text=""]::file-selector-button{color:var(--text) /* var(--text) */;}@media (min-width: 640px){.container{max-width:640px;}}@media (min-width: 768px){.container{max-width:768px;}}@media (min-width: 1024px){.container{max-width:1024px;}}@media (min-width: 1280px){.container{max-width:1280px;}}@media (min-width: 1536px){.container{max-width:1536px;}}.pointer-events-none{pointer-events:none;}.absolute,[absolute=""]{position:absolute;}.relative,[relative=""]{position:relative;}.static,[static=""]{position:static;}.inset-0{inset:0;}.bottom-0{bottom:0;}.left-0{left:0;}.right-0{right:0;}.top-0{top:0;}.top-45\%{top:45%;}.m-auto,[m-auto=""]{margin:auto;}.m\[1\]{margin:1;}.m\[5\]{margin:5;}.m\[k\]{margin:k;}[m1=""]{margin:0.25rem;}[m2=""]{margin:0.5rem;}.mx--5{margin-left:-1.25rem;margin-right:-1.25rem;}.my-auto{margin-top:auto;margin-bottom:auto;}.mb1{margin-bottom:0.25rem;}.mb2{margin-bottom:0.5rem;}.ml,[ml=""]{margin-left:1rem;}.ml-1{margin-left:0.25rem;}.ml-1\!{margin-left:0.25rem !important;}.ml-auto{margin-left:auto;}.ml-auto\!{margin-left:auto !important;}.ml3{margin-left:0.75rem;}.mr--2{margin-right:-0.5rem;}.mr-1\.5{margin-right:0.375rem;}.mr-2,.mr2{margin-right:0.5rem;}.mr1{margin-right:0.25rem;}.ms,[ms=""]{margin-inline-start:1rem;}.mt--4{margin-top:-1rem;}.mt2{margin-top:0.5rem;}.block{display:block;}.inline-block,[inline-block=""]{display:inline-block;}.contents{display:contents;}.hidden,[hidden=""]{display:none;}.h-10{height:2.5rem;}.h-6,.h6{height:1.5rem;}.h-full,[h-full=""]{height:100%;}.h12{height:3rem;}.h5{height:1.25rem;}.max-h-78{max-height:19.5rem;}.min-w-40{min-width:10rem;}.w-10{width:2.5rem;}.w-4{width:1rem;}.w-46{width:11.5rem;}.w-6,.w6{width:1.5rem;}.w-full{width:100%;}.w1,[w1=""]{width:0.25rem;}.w12{width:3rem;}.w2,[w2=""]{width:0.5rem;}.w5{width:1.25rem;}[\!w1=""]{width:0.25rem !important;}[\!w2=""]{width:0.5rem !important;}.flex,[flex=""]{display:flex;}.flex-1{flex:1 1 0%;}.flex-col{flex-direction:column;}.table,[table=""]{display:table;}.transform,[transform=""]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite;}.cursor-pointer,[cursor-pointer=""]{cursor:pointer;}.items-center,[items-center=""]{align-items:center;}.gap-2{gap:0.5rem;}.overflow-hidden{overflow:hidden;}.overflow-x-hidden{overflow-x:hidden;}.overflow-y-auto{overflow-y:auto;}.\!b,[\!b=""]{border-width:1px !important;}.b,.border,[b=""]{border-width:1px;}.b-0{border-width:0px;}[-border=""]{border-width:-1px;}.b-b-1{border-bottom-width:1px;}.b-r-4{border-right-width:4px;}.border-t-0\!,[border-t-0~="\!"]{border-top-width:0px !important;}.b-\$border{border-color:var(--border);}.b-gray5{--un-border-opacity:1;border-color:rgb(107 114 128 / var(--un-border-opacity));}.rounded{border-radius:0.25rem;}.rounded-full{border-radius:9999px;}.b-solid{border-style:solid;}.border-none{border-style:none;}.bg-\$bg-soft{background-color:var(--bg-soft) /* var(--bg-soft) */;}.bg-\$border{background-color:var(--border) /* var(--border) */;}.bg-\$text{background-color:var(--text) /* var(--text) */;}.bg-\$text\!{background-color:var(--text) /* var(--text) */ !important;}.bg-green-400\/15{background-color:rgb(74 222 128 / 0.15) /* #4ade80 */;}.bg-green-400\/30{background-color:rgb(74 222 128 / 0.3) /* #4ade80 */;}.bg-red-400\/15{background-color:rgb(248 113 113 / 0.15) /* #f87171 */;}.bg-red-400\/30{background-color:rgb(248 113 113 / 0.3) /* #f87171 */;}[bg-green-400=""]{--un-bg-opacity:1;background-color:rgb(74 222 128 / var(--un-bg-opacity)) /* #4ade80 */;}[bg-red-400=""]{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity)) /* #f87171 */;}.hover\:bg-\$bg-soft:hover{background-color:var(--bg-soft) /* var(--bg-soft) */;}[stroke~="\#999"]{--un-stroke-opacity:1;stroke:rgb(153 153 153 / var(--un-stroke-opacity)) /* #999 */;}.p\[s\]{padding:s;}.p1,[p1=""]{padding:0.25rem;}.p2{padding:0.5rem;}.px,.px4,[px=""]{padding-left:1rem;padding-right:1rem;}.px-1{padding-left:0.25rem;padding-right:0.25rem;}.px2\.5{padding-left:0.625rem;padding-right:0.625rem;}.px5{padding-left:1.25rem;padding-right:1.25rem;}.py1\.3{padding-top:0.325rem;padding-bottom:0.325rem;}.py2{padding-top:0.5rem;padding-bottom:0.5rem;}.pl-1\!{padding-left:0.25rem !important;}.pr,[pr=""]{padding-right:1rem;}.pr-2{padding-right:0.5rem;}[pl=""]{padding-left:1rem;}.text-center{text-align:center;}.text-left{text-align:left;}.indent,[indent=""]{text-indent:1.5rem;}.text-2xl{font-size:1.5rem;line-height:2rem;}.text-lg{font-size:1.125rem;line-height:1.75rem;}.text-sm{font-size:0.875rem;line-height:1.25rem;}.text-xl{font-size:1.25rem;line-height:1.75rem;}.text-gray{--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity)) /* #9ca3af */;}.uppercase,[uppercase=""]{text-transform:uppercase;}.lowercase{text-transform:lowercase;}.italic,[italic=""]{font-style:italic;}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}.op0{opacity:0;}.op50,.opacity-50{opacity:0.5;}.op70{opacity:0.7;}.op80{opacity:0.8;}.outline-1px{outline-width:1px;}.outline-gray4{--un-outline-color-opacity:1;outline-color:rgb(156 163 175 / var(--un-outline-color-opacity)) /* #9ca3af */;}.outline-orange{--un-outline-color-opacity:1;outline-color:rgb(251 146 60 / var(--un-outline-color-opacity)) /* #fb923c */;}.outline,.outline-solid{outline-style:solid;}.outline-none{outline:2px solid transparent;outline-offset:2px;}[invert=""]{--un-invert:invert(1);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.filter,[filter=""]{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}[\!filter=""]{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia) !important;}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);}
+.jsx-repl,
+  .v-popper__popper {
+    --bg: #fff;
+    --bg-soft: #f8f8f8;
+    --border: #ddd;
+    --text: #000;
+    --text-light: #888;
+    --font-code: Menlo, Monaco, Consolas, "Courier New", monospace;
+    --color-branding: #42b883;
+    --color-branding-dark: #416f9c;
+    --header-height: 38px;
+}
+.jsx-repl {
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+    font-size: 13px;
+    font-family:
+      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+      Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    background-color: var(--bg-soft);
+}
+.dark .jsx-repl,
+  .v-popper__popper {
+    --bg: #1a1a1a;
+    --bg-soft: #282828;
+    --border: #383838;
+    --text: #fff;
+    --text-light: #aaa;
+    --color-branding: #42d392;
+    --color-branding-dark: #89ddff;
+}
+html.dark {
+    color-scheme: dark;
+}
+.jsx-repl button {
+    border: none;
+    outline: none;
+    cursor: pointer;
+    margin: 0;
+    background-color: transparent;
+}
+
+.split-pane[data-v-74ec2161] {
+        display: flex;
+        height: 100%;
+        position: relative;
+}
+.split-pane.dragging[data-v-74ec2161] {
+        cursor: ew-resize;
+}
+.dragging .left[data-v-74ec2161],
+      .dragging .right[data-v-74ec2161] {
+        pointer-events: none;
+}
+.left[data-v-74ec2161],
+      .right[data-v-74ec2161] {
+        position: relative;
+        height: 100%;
+}
+.view-size[data-v-74ec2161] {
+        position: absolute;
+        top: 40px;
+        left: 10px;
+        font-size: 12px;
+        color: var(--text-light);
+        z-index: 100;
+}
+.left[data-v-74ec2161] {
+        border-right: 1px solid var(--border);
+}
+.dragger[data-v-74ec2161] {
+        position: absolute;
+        z-index: 3;
+        top: 0;
+        bottom: 0;
+        right: -5px;
+        width: 10px;
+        cursor: ew-resize;
+}
+.toggler[data-v-74ec2161] {
+        display: none;
+        z-index: 3;
+        font-family: var(--font-code);
+        color: var(--text-light);
+        position: absolute;
+        left: 50%;
+        bottom: 20px;
+        margin-bottom: 5px;
+        background-color: var(--border);
+        padding: 8px 12px;
+        border-radius: 8px;
+        transform: translateX(-50%);
+        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
+}
+.dark .toggler[data-v-74ec2161] {
+        background-color: var(--border);
+}
+      
+      /* vertical */
+.split-pane.vertical[data-v-74ec2161] {
+        display: block;
+}
+.split-pane.vertical.dragging[data-v-74ec2161] {
+        cursor: ns-resize;
+}
+.vertical .dragger[data-v-74ec2161] {
+        top: auto;
+        height: 10px;
+        width: 100%;
+        left: 0;
+        right: 0;
+        bottom: -5px;
+        cursor: ns-resize;
+}
+.vertical .left[data-v-74ec2161],
+      .vertical .right[data-v-74ec2161] {
+        width: 100%;
+}
+.vertical .left[data-v-74ec2161] {
+        border-right: none;
+}
+      /* mobile */
+@media (max-width: 720px) {
+.horizontal > .left[data-v-74ec2161],
+        .horizontal > .right[data-v-74ec2161] {
+          position: absolute;
+          inset: 0;
+          width: auto !important;
+          height: auto !important;
+}
+.horizontal > .dragger[data-v-74ec2161] {
+          display: none;
+}
+.split-pane.horizontal > .toggler[data-v-74ec2161] {
+          display: block;
+}
+.split-pane.horizontal > .right[data-v-74ec2161] {
+          z-index: -1;
+          pointer-events: none;
+}
+.split-pane.horizontal > .left[data-v-74ec2161] {
+          z-index: 0;
+          pointer-events: all;
+}
+.split-pane.show-output.horizontal > .right[data-v-74ec2161] {
+          z-index: 0;
+          pointer-events: all;
+}
+.split-pane.show-output.horizontal > .left[data-v-74ec2161] {
+          z-index: -1;
+          pointer-events: none;
+}
+}
+    
+.tab-buttons[data-v-41696cc5] {
+        display: flex;
+        box-sizing: border-box;
+        border-top: 1px solid var(--border);
+        border-bottom: 1px solid var(--border);
+        background-color: var(--bg);
+        min-height: var(--header-height);
+        overflow: hidden;
+}
+.tab-buttons button[data-v-41696cc5] {
+        padding: 0;
+        box-sizing: border-box;
+}
+.tab-buttons .actions button[data-v-41696cc5] {
+        background-color: currentColor;
+}
+.tab-buttons span[data-v-41696cc5] {
+        font-size: 13px;
+        font-family: var(--font-code);
+        text-transform: uppercase;
+        color: var(--text-light);
+        display: inline-block;
+        padding: 8px 16px 6px;
+        line-height: 20px;
+}
+button.active[data-v-41696cc5] {
+        color: var(--color-branding-dark);
+        border-bottom: 3px solid var(--color-branding-dark);
+}
+    
+.iframe-container[data-v-40bb0bb6],
+    .iframe-container[data-v-40bb0bb6] iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+      background-color: #fff;
+}
+.iframe-container[data-v-40bb0bb6] {
+      height: calc(100% - 38px);
+}
+.iframe-container.dark[data-v-40bb0bb6] iframe {
+      background-color: #1e1e1e;
+}
+  
+.msg.err[data-v-277281f1] {
+        --color: #f56c6c;
+        --bg-color: #fef0f0;
+}
+.dark .msg.err[data-v-277281f1] {
+        --bg-color: #2b1d1d;
+}
+.msg.warn[data-v-277281f1] {
+        --color: #e6a23c;
+        --bg-color: #fdf6ec;
+}
+.dark .msg.warn[data-v-277281f1] {
+        --bg-color: #292218;
+}
+pre[data-v-277281f1] {
+        margin: 0;
+        padding: 12px 20px;
+        overflow: auto;
+}
+.msg[data-v-277281f1] {
+        position: absolute;
+        bottom: 0;
+        left: 8px;
+        right: 8px;
+        z-index: 20;
+        border: 2px solid transparent;
+        border-radius: 6px;
+        font-family: var(--font-code);
+        white-space: pre-wrap;
+        margin-bottom: 8px;
+        max-height: calc(100% - 300px);
+        min-height: 40px;
+        display: flex;
+        align-items: stretch;
+        color: var(--color);
+        border-color: var(--color);
+        background-color: var(--bg-color);
+}
+.dismiss[data-v-277281f1] {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        width: 18px;
+        height: 18px;
+        line-height: 18px;
+        border-radius: 9px;
+        text-align: center;
+        display: block;
+        font-size: 9px;
+        padding: 0;
+        color: var(--bg-color);
+        background-color: var(--color);
+}
+@media (max-width: 720px) {
+.dismiss[data-v-277281f1] {
+          top: -9px;
+          right: -9px;
+}
+.msg[data-v-277281f1] {
+          bottom: 50px;
+}
+}
+.fade-enter-active[data-v-277281f1],
+      .fade-leave-active[data-v-277281f1] {
+        transition: all 0.15s ease-out;
+}
+.fade-enter-from[data-v-277281f1],
+      .fade-leave-to[data-v-277281f1] {
+        opacity: 0;
+        transform: translate(0, 10px);
+}
+    
+.diff-added {
+    background-color:rgb(74 222 128 / 0.15) /* #4ade80 */;
+}
+.diff-removed {
+    background-color:rgb(248 113 113 / 0.15) /* #f87171 */;
+}
+.diff-added-inline {
+    background-color:rgb(74 222 128 / 0.3) /* #4ade80 */;
+}
+.diff-removed-inline {
+    background-color:rgb(248 113 113 / 0.3) /* #f87171 */;
+}
+
+.editor-container[data-v-be56a9be] {
+        height: 100%;
+        overflow: hidden;
+        position: relative;
+}
+.editor-floating[data-v-be56a9be] {
+        position: absolute;
+        bottom: 38px;
+        right: 16px;
+        z-index: 11;
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+        gap: 8px;
+        background-color: var(--bg);
+        color: var(--text-light);
+        padding: 8px;
+}
+    
+.cursor {
+    position: relative;
+    display: inline-block;
+    outline: none;
+}
+.cursor::after {
+    content: "";
+    outline: none;
+    position: absolute;
+    left: 100%;
+    top: 0;
+    width: 2px;
+    height: 1.5em;
+    background: oklch(87.2% 0.01 258.338);
+    animation: blink 1s infinite;
+}
+@keyframes blink {
+0%,
+    100% {
+      opacity: 1;
+}
+50% {
+      opacity: 0;
+}
+}
+
+.file-selector {
+    display: flex;
+    box-sizing: border-box;
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    background-color: var(--bg);
+    overflow-y: hidden;
+    overflow-x: auto;
+    white-space: nowrap;
+    position: relative;
+    height: var(--header-height);
+}
+.file-selector::-webkit-scrollbar {
+    height: 1px;
+}
+.file-selector::-webkit-scrollbar-track {
+    background-color: var(--border);
+}
+.file-selector::-webkit-scrollbar-thumb {
+    background-color: var(--color-branding);
+}
+.file {
+    position: relative;
+    display: inline-block;
+    font-size: 13px;
+    font-family: var(--font-code);
+    cursor: pointer;
+    color: var(--text-light);
+    box-sizing: border-box;
+}
+.file.active {
+    color: var(--color-branding);
+    border-bottom: 3px solid var(--color-branding);
+    cursor: text;
+}
+.file span {
+    display: inline-block;
+    padding: 8px 10px 6px;
+    line-height: 20px;
+}
+.file.pending span {
+    min-width: 50px;
+    min-height: 34px;
+    padding-right: 32px;
+    background-color: rgba(200, 200, 200, 0.2);
+    color: transparent;
+}
+.file.pending input {
+    position: absolute;
+    inset: 8px 7px auto;
+    font-size: 13px;
+    font-family: var(--font-code);
+    line-height: 20px;
+    outline: none;
+    border: none;
+    padding: 0 3px;
+    min-width: 1px;
+    color: inherit;
+    background-color: transparent;
+}
+.file .remove {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 12px;
+    cursor: pointer;
+    padding-left: 0;
+}
+.add {
+    font-size: 18px;
+    font-family: var(--font-code);
+    color: #999;
+    vertical-align: middle;
+    margin-left: 6px;
+    position: relative;
+    top: -1px;
+}
+.add:hover {
+    color: var(--color-branding);
+}
+.icon {
+    margin-top: -1px;
+}
+
+.wrapper[data-v-196fefd0] {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      user-select: none;
+}
+.toggle[data-v-196fefd0] {
+      display: inline-block;
+      margin-left: 4px;
+      width: 32px;
+      height: 18px;
+      border-radius: 12px;
+      position: relative;
+      background-color: var(--border);
+}
+.indicator[data-v-196fefd0] {
+      font-size: 12px;
+      background-color: var(--text-light);
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      transition: transform ease-in-out 0.2s;
+      position: absolute;
+      left: 2px;
+      top: 2px;
+      color: var(--bg);
+      text-align: center;
+}
+.active .indicator[data-v-196fefd0] {
+      background-color: var(--color-branding);
+      transform: translateX(14px);
+      color: white;
+}
+  
+.editor {
+    position: relative;
+    height: calc(100% - 38px);
+    width: 100%;
+    overflow: hidden;
+}
 /*---------------------------------------------------------------------------------------------
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the MIT License. See License.txt in the project root for license information.
@@ -6576,10 +7029,26 @@
 		}
 	}
 }
-
-.editor {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
+.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
+.v-popper--theme-dropdown .v-popper__inner {
+  border-width:1px;border-color:var(--border);border-radius:0.25rem;background-color:var(--bg) /* var(--bg) */;color:var(--text) /* var(--text) */;--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+  box-shadow: 0 6px 30px #0000001a;
+}
+.v-popper--theme-dropdown .v-popper__arrow-inner {
+  visibility: visible;
+  border-color:var(--bg);
+}
+.v-popper--theme-dropdown .v-popper__arrow-outer {
+  border-color:var(--border);
+}
+.v-popper--theme-tooltip .v-popper__inner {
+  border-width:1px;border-color:var(--border);border-radius:0.25rem;background-color:var(--bg) /* var(--bg) */;color:var(--text) /* var(--text) */;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+  padding: 7px 12px 6px;
+}
+.v-popper--theme-tooltip .v-popper__arrow-inner {
+  visibility: visible;
+  @apply: border-bg;
+}
+.v-popper--theme-tooltip .v-popper__arrow-outer {
+  border-color:var(--border);
 }