Fix Reactivity issue with library imports when changing version

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

@@ -33,7 +33,7 @@ const emit = defineEmits<{
   (e: 'execute'): void;
 }>();
 
-watch(() => props.libs, async () => {
+watch(props.libs, async () => {
   updateEditorTypes();
 });
 

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

@@ -3,9 +3,10 @@
     <div class="editor-container" :style="editorContainerStyle">
       <code-editor v-model="code" @execute="executeCode" :style="editorStyle" :libs="libs" :is-dark="isDark"/>
       <div class="editor-buttons">
-        <button v-if="!hideRunButton" @click="executeCode" class="primary-button">Run Code</button>
+        <button v-if="!hideRunButton" @click="executeCode" class="primary-button ">Run Code</button>
       </div>
     </div>
+    
 
     <div v-if="showLogs || fullHeight" class="output-container" :style="outputContainerStyle">
       <div class="output-container-buttons">
@@ -40,7 +41,7 @@
 
 <script setup lang="ts">
 import { useData } from 'vitepress';
-import { ref, onMounted, onBeforeUnmount, computed, version } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
 
 // Import the iframe HTML template
 // NOTE: Having this in an external file is many-fold neater than stashing it all in here.
@@ -79,8 +80,7 @@ interface ConsoleLog {
 }
 
 // Define share URL base
-// const SHARE_BASE_URL = 'https://stack.xo.cash/playground.html';
-const SHARE_BASE_URL = 'http://localhost:5173/playground.html';
+const SHARE_BASE_URL = 'https://stack.xo.cash/playground.html';
 
 // Define a unique ID to pass into the IFrame.
 // NOTE: We do this so that we can reliably identify where the postMessage came from.
@@ -406,6 +406,7 @@ defineExpose({
   right: 0px;
   display: flex;
   gap: 8px;
+  z-index: 1001; /* Monaco's editor is z-index 1000, so we need to be above it */
 }
 
 .output-container {

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

@@ -21,7 +21,7 @@
       outputHeight="20%"
       fullHeight
       hideRunButton
-      :libs="libs"
+      :libs="xocashLibs"
       :isDark="isDark"
     >
       <slot></slot>
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { useData } from 'vitepress';
 
 import { useXOCashLibs } from '../utils/useXOCashLibs';
@@ -38,10 +38,6 @@ import CodeSandbox from './CodeSandbox.vue'
 
 const xocashLibs = useXOCashLibs();
 
-const libs = computed(() => {
-  return { ...xocashLibs }
-});
-
 const { isDark } = useData();
 
 const sandbox = ref<InstanceType<typeof CodeSandbox> | null>(null);