Resolve "Monaco Playground Typing and Rollup Bundles"

packages/docs/src/.vitepress/theme/components/Playground.vue

@@ -6,6 +6,9 @@
         <img class="dark-only" src="/logo-dark.svg" alt="XO Stack Logo">
         XO Stack - Playground
       </div>
+      <select class="version-select" v-model="xocashLibs['@xocash/stack'].selectedVersion">
+        <option v-for="version in xocashLibs['@xocash/stack'].versions" :key="version" :value="version">{{ version }}</option>
+      </select>
       <div class="button-container">
         <button class="primary-button" @click="shareCode">Share</button>
         <button class="primary-button" @click="executeCode">Run Code</button>
@@ -18,6 +21,8 @@
       outputHeight="20%"
       fullHeight
       hideRunButton
+      :libs="libs"
+      :isDark="isDark"
     >
       <slot></slot>
     </CodeSandbox>
@@ -25,21 +30,28 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useData } from 'vitepress';
 
-import CodeSandbox from '@theme/components/CodeSandbox.vue'
+import { useXOCashLibs } from '../utils/useXOCashLibs';
+import CodeSandbox from './CodeSandbox.vue'
+
+const xocashLibs = useXOCashLibs();
+
+const libs = computed(() => {
+  return { ...xocashLibs }
+});
 
 const { isDark } = useData();
 
 const sandbox = ref<InstanceType<typeof CodeSandbox> | null>(null);
 
 async function executeCode() {
-  sandbox.value.executeCode();
+  sandbox.value?.executeCode();
 }
 
 async function shareCode() {
-  sandbox.value.shareCode()
+  sandbox.value?.shareCode()
 }
 </script>
 
@@ -101,4 +113,14 @@ display: flex; align-items: center;
 .console-output {
   white-space: pre-wrap;
 }
+.version-select {
+  margin-right: 10px;
+  background-color: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-border);
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 14px;
+  font-family: var(--vp-font-family-base);
+}
 </style>