diff --git a/package.json b/package.json
index 3ded1d47..850a78d4 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,10 @@
     "@vue/repl": "^4.6.2",
     "@vueuse/core": "^12.8.2",
     "element-plus": "^2.10.4",
+    "luna-console": "^1.3.6",
+    "luna-data-grid": "^1.6.5",
+    "luna-dom-viewer": "^1.8.4",
+    "luna-object-viewer": "^0.3.2",
     "semver": "^7.7.2",
     "vue": "^3.5.18"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 33167f7e..228b1843 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,18 @@ importers:
       element-plus:
         specifier: ^2.10.4
         version: 2.10.4(vue@3.5.18(typescript@5.8.3))
+      luna-console:
+        specifier: ^1.3.6
+        version: 1.3.6(luna-data-grid@1.6.5)(luna-dom-viewer@1.8.4)(luna-object-viewer@0.3.2)
+      luna-data-grid:
+        specifier: ^1.6.5
+        version: 1.6.5
+      luna-dom-viewer:
+        specifier: ^1.8.4
+        version: 1.8.4
+      luna-object-viewer:
+        specifier: ^0.3.2
+        version: 0.3.2
       semver:
         specifier: ^7.7.2
         version: 7.7.2
@@ -2045,6 +2057,9 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  licia@1.48.0:
+    resolution: {integrity: sha512-bBWiT5CSdEtwuAHiYTJ74yItCjIFdHi4xiFk6BRDfKa+sdCpkUHp69YKb5udNOJlHDzFjNjcMgNZ/+wQIHrB8A==}
+
   local-pkg@1.1.1:
     resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
     engines: {node: '>=14'}
@@ -2075,6 +2090,22 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
+  luna-console@1.3.6:
+    resolution: {integrity: sha512-lA8aj4h5wCU8Av8vOqDsWMrIFcrQfVoQWnCXi4xtxelkD6/F31rzmwv3JRSjx/RNSqo9OTcZyzBij7NBL9sGHg==}
+    peerDependencies:
+      luna-data-grid: ^1.4.1
+      luna-dom-viewer: ^1.8.2
+      luna-object-viewer: ^0.3.2
+
+  luna-data-grid@1.6.5:
+    resolution: {integrity: sha512-nk3ks0wVaeAE48m8BrldWFzAFadWXUA0oxz0Xa+t4wjYQagSSN82j7TwDcGn+jzMF0TpKfxnKNE1CJGhM2S7hQ==}
+
+  luna-dom-viewer@1.8.4:
+    resolution: {integrity: sha512-WuuwM4j0WO87almRUXqzkziqN4qLNt7WOar9L7oEeUtrxtEF31+tJ6JdwSG+NXyCaPNfA80Gp3LAfKWTPkvgPw==}
+
+  luna-object-viewer@0.3.2:
+    resolution: {integrity: sha512-m5zB+Wg3q23jLLijMFLHLuigp4rB9gPVI+MPop9yqAPGOSIdUo7uFRPZDt/Pbkbj34UNaHckdv1OUhWElxZzdQ==}
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -4863,6 +4894,8 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  licia@1.48.0: {}
+
   local-pkg@1.1.1:
     dependencies:
       mlly: 1.7.4
@@ -4889,6 +4922,25 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
+  luna-console@1.3.6(luna-data-grid@1.6.5)(luna-dom-viewer@1.8.4)(luna-object-viewer@0.3.2):
+    dependencies:
+      licia: 1.48.0
+      luna-data-grid: 1.6.5
+      luna-dom-viewer: 1.8.4
+      luna-object-viewer: 0.3.2
+
+  luna-data-grid@1.6.5:
+    dependencies:
+      licia: 1.48.0
+
+  luna-dom-viewer@1.8.4:
+    dependencies:
+      licia: 1.48.0
+
+  luna-object-viewer@0.3.2:
+    dependencies:
+      licia: 1.48.0
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
diff --git a/src/App.vue b/src/App.vue
index 4034ea47..018ec0fe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,9 +3,13 @@
 import { Repl } from '@vue/repl'
 import Monaco from '@vue/repl/monaco-editor'
 import { useStore } from './composables/store'
+import { useConsole } from './composables/use-console'
 
 const loading = ref(true)
 const replRef = ref<InstanceType<typeof Repl>>()
+const showConsole = useLocalStorage('console-visible', false)
+const consoleHeight = useLocalStorage('console-height', 200)
+const { logs, clearLogs } = useConsole()
 
 const AUTO_SAVE_KEY = 'auto-save-state'
 function getAutoSaveState() {
@@ -18,6 +22,7 @@ function setAutoSaveState(value: boolean) {
 const autoSave = ref(getAutoSaveState())
 
 const previewOptions = {
+  showRuntimeError: false,
   headHTML: `
     <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"><\/script>
     <script>
@@ -92,16 +97,26 @@ const handleKeydown = (evt: KeyboardEvent) => {
   }
 }
 
-// persist state
-watchEffect(() =>
+useEventListener(window, 'keydown', (evt: KeyboardEvent) => {
+  if ((evt.ctrlKey || evt.metaKey) && evt.code === 'Backquote') {
+    evt.preventDefault()
+    showConsole.value = !showConsole.value
+  }
+})
+
+// persist state & clear console on file changes
+watchEffect(() => {
+  const serialized = store.serialize()
   history.replaceState(
     {},
     '',
-    `${location.origin}${location.pathname}#${store.serialize()}`,
-  ),
-)
+    `${location.origin}${location.pathname}#${serialized}`,
+  )
+  clearLogs()
+})
 
 const refreshPreview = () => {
+  clearLogs()
   replRef.value?.reload()
 }
 
@@ -110,7 +125,12 @@ watch(autoSave, setAutoSaveState)
 
 <template>
   <div v-if="!loading" antialiased>
-    <Header :store="store" @refresh="refreshPreview" />
+    <Header
+      :store="store"
+      :show-console="showConsole"
+      @refresh="refreshPreview"
+      @toggle-console="showConsole = !showConsole"
+    />
     <Repl
       ref="replRef"
       v-model="autoSave"
@@ -119,9 +139,16 @@ watch(autoSave, setAutoSaveState)
       :store="store"
       :editor="Monaco"
       :preview-options="previewOptions"
-      :clear-console="false"
       @keydown="handleKeydown"
     />
+    <Teleport defer to=".vue-repl .right">
+      <ConsolePanel
+        v-if="showConsole"
+        v-model:height="consoleHeight"
+        :logs="logs"
+        @clear="clearLogs"
+      />
+    </Teleport>
   </div>
   <template v-else>
     <div v-loading="{ text: 'Loading...' }" h-100vh />
@@ -142,6 +169,21 @@ body {
   height: calc(100vh - var(--nav-height)) !important;
 }
 
+.vue-repl .right {
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.vue-repl .right > .tab-buttons {
+  flex-shrink: 0;
+}
+
+.vue-repl .right > .output-container {
+  flex: 1;
+  height: auto !important;
+  min-height: 0;
+}
+
 .dark .vue-repl,
 .vue-repl {
   --color-branding: var(--el-color-primary) !important;
diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 0dcdbe4e..fb4f2b16 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -6,326 +6,306 @@
 // biome-ignore lint: disable
 export {}
 declare global {
-  const EffectScope: (typeof import('vue'))['EffectScope']
-  const ElMessage: (typeof import('element-plus/es'))['ElMessage']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: (typeof import('element-plus/es'))['ElMessageBox']
-  const IMPORT_MAP: (typeof import('./composables/store'))['IMPORT_MAP']
+  const IMPORT_MAP: typeof import('./composables/store')['IMPORT_MAP']
   const LEGACY_IMPORT_MAP: (typeof import('./composables/store'))['LEGACY_IMPORT_MAP']
-  const TSCONFIG: (typeof import('./composables/store'))['TSCONFIG']
-  const asyncComputed: (typeof import('@vueuse/core'))['asyncComputed']
-  const autoResetRef: (typeof import('@vueuse/core'))['autoResetRef']
-  const computed: (typeof import('vue'))['computed']
-  const computedAsync: (typeof import('@vueuse/core'))['computedAsync']
-  const computedEager: (typeof import('@vueuse/core'))['computedEager']
-  const computedInject: (typeof import('@vueuse/core'))['computedInject']
-  const computedWithControl: (typeof import('@vueuse/core'))['computedWithControl']
-  const controlledComputed: (typeof import('@vueuse/core'))['controlledComputed']
-  const controlledRef: (typeof import('@vueuse/core'))['controlledRef']
-  const createApp: (typeof import('vue'))['createApp']
-  const createEventHook: (typeof import('@vueuse/core'))['createEventHook']
-  const createGlobalState: (typeof import('@vueuse/core'))['createGlobalState']
-  const createInjectionState: (typeof import('@vueuse/core'))['createInjectionState']
-  const createReactiveFn: (typeof import('@vueuse/core'))['createReactiveFn']
-  const createRef: (typeof import('@vueuse/core'))['createRef']
-  const createReusableTemplate: (typeof import('@vueuse/core'))['createReusableTemplate']
-  const createSharedComposable: (typeof import('@vueuse/core'))['createSharedComposable']
-  const createTemplatePromise: (typeof import('@vueuse/core'))['createTemplatePromise']
-  const createUnrefFn: (typeof import('@vueuse/core'))['createUnrefFn']
-  const customRef: (typeof import('vue'))['customRef']
-  const debouncedRef: (typeof import('@vueuse/core'))['debouncedRef']
-  const debouncedWatch: (typeof import('@vueuse/core'))['debouncedWatch']
-  const defineAsyncComponent: (typeof import('vue'))['defineAsyncComponent']
-  const defineComponent: (typeof import('vue'))['defineComponent']
-  const eagerComputed: (typeof import('@vueuse/core'))['eagerComputed']
-  const effectScope: (typeof import('vue'))['effectScope']
-  const extendRef: (typeof import('@vueuse/core'))['extendRef']
-  const getCurrentInstance: (typeof import('vue'))['getCurrentInstance']
-  const getCurrentScope: (typeof import('vue'))['getCurrentScope']
-  const h: (typeof import('vue'))['h']
-  const ignorableWatch: (typeof import('@vueuse/core'))['ignorableWatch']
-  const inject: (typeof import('vue'))['inject']
-  const injectLocal: (typeof import('@vueuse/core'))['injectLocal']
-  const isDefined: (typeof import('@vueuse/core'))['isDefined']
-  const isProxy: (typeof import('vue'))['isProxy']
-  const isReactive: (typeof import('vue'))['isReactive']
-  const isReadonly: (typeof import('vue'))['isReadonly']
-  const isRef: (typeof import('vue'))['isRef']
-  const makeDestructurable: (typeof import('@vueuse/core'))['makeDestructurable']
-  const markRaw: (typeof import('vue'))['markRaw']
-  const nextTick: (typeof import('vue'))['nextTick']
-  const onActivated: (typeof import('vue'))['onActivated']
-  const onBeforeMount: (typeof import('vue'))['onBeforeMount']
-  const onBeforeUnmount: (typeof import('vue'))['onBeforeUnmount']
-  const onBeforeUpdate: (typeof import('vue'))['onBeforeUpdate']
-  const onClickOutside: (typeof import('@vueuse/core'))['onClickOutside']
-  const onDeactivated: (typeof import('vue'))['onDeactivated']
-  const onElementRemoval: (typeof import('@vueuse/core'))['onElementRemoval']
-  const onErrorCaptured: (typeof import('vue'))['onErrorCaptured']
-  const onKeyStroke: (typeof import('@vueuse/core'))['onKeyStroke']
-  const onLongPress: (typeof import('@vueuse/core'))['onLongPress']
-  const onMounted: (typeof import('vue'))['onMounted']
-  const onRenderTracked: (typeof import('vue'))['onRenderTracked']
-  const onRenderTriggered: (typeof import('vue'))['onRenderTriggered']
-  const onScopeDispose: (typeof import('vue'))['onScopeDispose']
-  const onServerPrefetch: (typeof import('vue'))['onServerPrefetch']
-  const onStartTyping: (typeof import('@vueuse/core'))['onStartTyping']
-  const onUnmounted: (typeof import('vue'))['onUnmounted']
-  const onUpdated: (typeof import('vue'))['onUpdated']
-  const onWatcherCleanup: (typeof import('vue'))['onWatcherCleanup']
-  const pausableWatch: (typeof import('@vueuse/core'))['pausableWatch']
-  const provide: (typeof import('vue'))['provide']
-  const provideLocal: (typeof import('@vueuse/core'))['provideLocal']
-  const reactify: (typeof import('@vueuse/core'))['reactify']
-  const reactifyObject: (typeof import('@vueuse/core'))['reactifyObject']
-  const reactive: (typeof import('vue'))['reactive']
-  const reactiveComputed: (typeof import('@vueuse/core'))['reactiveComputed']
-  const reactiveOmit: (typeof import('@vueuse/core'))['reactiveOmit']
-  const reactivePick: (typeof import('@vueuse/core'))['reactivePick']
-  const readonly: (typeof import('vue'))['readonly']
-  const ref: (typeof import('vue'))['ref']
-  const refAutoReset: (typeof import('@vueuse/core'))['refAutoReset']
-  const refDebounced: (typeof import('@vueuse/core'))['refDebounced']
-  const refDefault: (typeof import('@vueuse/core'))['refDefault']
-  const refThrottled: (typeof import('@vueuse/core'))['refThrottled']
-  const refWithControl: (typeof import('@vueuse/core'))['refWithControl']
-  const resolveComponent: (typeof import('vue'))['resolveComponent']
-  const resolveRef: (typeof import('@vueuse/core'))['resolveRef']
-  const resolveUnref: (typeof import('@vueuse/core'))['resolveUnref']
-  const shallowReactive: (typeof import('vue'))['shallowReactive']
-  const shallowReadonly: (typeof import('vue'))['shallowReadonly']
-  const shallowRef: (typeof import('vue'))['shallowRef']
-  const syncRef: (typeof import('@vueuse/core'))['syncRef']
-  const syncRefs: (typeof import('@vueuse/core'))['syncRefs']
-  const templateRef: (typeof import('@vueuse/core'))['templateRef']
-  const throttledRef: (typeof import('@vueuse/core'))['throttledRef']
-  const throttledWatch: (typeof import('@vueuse/core'))['throttledWatch']
-  const toRaw: (typeof import('vue'))['toRaw']
-  const toReactive: (typeof import('@vueuse/core'))['toReactive']
-  const toRef: (typeof import('vue'))['toRef']
-  const toRefs: (typeof import('vue'))['toRefs']
-  const toValue: (typeof import('vue'))['toValue']
-  const triggerRef: (typeof import('vue'))['triggerRef']
-  const tryOnBeforeMount: (typeof import('@vueuse/core'))['tryOnBeforeMount']
-  const tryOnBeforeUnmount: (typeof import('@vueuse/core'))['tryOnBeforeUnmount']
-  const tryOnMounted: (typeof import('@vueuse/core'))['tryOnMounted']
-  const tryOnScopeDispose: (typeof import('@vueuse/core'))['tryOnScopeDispose']
-  const tryOnUnmounted: (typeof import('@vueuse/core'))['tryOnUnmounted']
-  const unref: (typeof import('vue'))['unref']
-  const unrefElement: (typeof import('@vueuse/core'))['unrefElement']
-  const until: (typeof import('@vueuse/core'))['until']
-  const useActiveElement: (typeof import('@vueuse/core'))['useActiveElement']
-  const useAnimate: (typeof import('@vueuse/core'))['useAnimate']
-  const useArrayDifference: (typeof import('@vueuse/core'))['useArrayDifference']
-  const useArrayEvery: (typeof import('@vueuse/core'))['useArrayEvery']
-  const useArrayFilter: (typeof import('@vueuse/core'))['useArrayFilter']
-  const useArrayFind: (typeof import('@vueuse/core'))['useArrayFind']
-  const useArrayFindIndex: (typeof import('@vueuse/core'))['useArrayFindIndex']
-  const useArrayFindLast: (typeof import('@vueuse/core'))['useArrayFindLast']
-  const useArrayIncludes: (typeof import('@vueuse/core'))['useArrayIncludes']
-  const useArrayJoin: (typeof import('@vueuse/core'))['useArrayJoin']
-  const useArrayMap: (typeof import('@vueuse/core'))['useArrayMap']
-  const useArrayReduce: (typeof import('@vueuse/core'))['useArrayReduce']
-  const useArraySome: (typeof import('@vueuse/core'))['useArraySome']
-  const useArrayUnique: (typeof import('@vueuse/core'))['useArrayUnique']
-  const useAsyncQueue: (typeof import('@vueuse/core'))['useAsyncQueue']
-  const useAsyncState: (typeof import('@vueuse/core'))['useAsyncState']
-  const useAttrs: (typeof import('vue'))['useAttrs']
-  const useBase64: (typeof import('@vueuse/core'))['useBase64']
-  const useBattery: (typeof import('@vueuse/core'))['useBattery']
-  const useBluetooth: (typeof import('@vueuse/core'))['useBluetooth']
-  const useBreakpoints: (typeof import('@vueuse/core'))['useBreakpoints']
-  const useBroadcastChannel: (typeof import('@vueuse/core'))['useBroadcastChannel']
-  const useBrowserLocation: (typeof import('@vueuse/core'))['useBrowserLocation']
-  const useCached: (typeof import('@vueuse/core'))['useCached']
-  const useClipboard: (typeof import('@vueuse/core'))['useClipboard']
-  const useClipboardItems: (typeof import('@vueuse/core'))['useClipboardItems']
-  const useCloned: (typeof import('@vueuse/core'))['useCloned']
-  const useColorMode: (typeof import('@vueuse/core'))['useColorMode']
-  const useConfirmDialog: (typeof import('@vueuse/core'))['useConfirmDialog']
-  const useCountdown: (typeof import('@vueuse/core'))['useCountdown']
-  const useCounter: (typeof import('@vueuse/core'))['useCounter']
-  const useCssModule: (typeof import('vue'))['useCssModule']
-  const useCssVar: (typeof import('@vueuse/core'))['useCssVar']
-  const useCssVars: (typeof import('vue'))['useCssVars']
-  const useCurrentElement: (typeof import('@vueuse/core'))['useCurrentElement']
-  const useCycleList: (typeof import('@vueuse/core'))['useCycleList']
-  const useDark: (typeof import('@vueuse/core'))['useDark']
-  const useDateFormat: (typeof import('@vueuse/core'))['useDateFormat']
-  const useDebounce: (typeof import('@vueuse/core'))['useDebounce']
-  const useDebounceFn: (typeof import('@vueuse/core'))['useDebounceFn']
-  const useDebouncedRefHistory: (typeof import('@vueuse/core'))['useDebouncedRefHistory']
-  const useDeviceMotion: (typeof import('@vueuse/core'))['useDeviceMotion']
-  const useDeviceOrientation: (typeof import('@vueuse/core'))['useDeviceOrientation']
-  const useDevicePixelRatio: (typeof import('@vueuse/core'))['useDevicePixelRatio']
-  const useDevicesList: (typeof import('@vueuse/core'))['useDevicesList']
-  const useDisplayMedia: (typeof import('@vueuse/core'))['useDisplayMedia']
-  const useDocumentVisibility: (typeof import('@vueuse/core'))['useDocumentVisibility']
-  const useDraggable: (typeof import('@vueuse/core'))['useDraggable']
-  const useDropZone: (typeof import('@vueuse/core'))['useDropZone']
-  const useElementBounding: (typeof import('@vueuse/core'))['useElementBounding']
-  const useElementByPoint: (typeof import('@vueuse/core'))['useElementByPoint']
-  const useElementHover: (typeof import('@vueuse/core'))['useElementHover']
-  const useElementSize: (typeof import('@vueuse/core'))['useElementSize']
-  const useElementVisibility: (typeof import('@vueuse/core'))['useElementVisibility']
-  const useEventBus: (typeof import('@vueuse/core'))['useEventBus']
-  const useEventListener: (typeof import('@vueuse/core'))['useEventListener']
-  const useEventSource: (typeof import('@vueuse/core'))['useEventSource']
-  const useEyeDropper: (typeof import('@vueuse/core'))['useEyeDropper']
-  const useFavicon: (typeof import('@vueuse/core'))['useFavicon']
-  const useFetch: (typeof import('@vueuse/core'))['useFetch']
-  const useFileDialog: (typeof import('@vueuse/core'))['useFileDialog']
-  const useFileSystemAccess: (typeof import('@vueuse/core'))['useFileSystemAccess']
-  const useFocus: (typeof import('@vueuse/core'))['useFocus']
-  const useFocusWithin: (typeof import('@vueuse/core'))['useFocusWithin']
-  const useFps: (typeof import('@vueuse/core'))['useFps']
-  const useFullscreen: (typeof import('@vueuse/core'))['useFullscreen']
-  const useGamepad: (typeof import('@vueuse/core'))['useGamepad']
-  const useGeolocation: (typeof import('@vueuse/core'))['useGeolocation']
-  const useId: (typeof import('vue'))['useId']
-  const useIdle: (typeof import('@vueuse/core'))['useIdle']
-  const useImage: (typeof import('@vueuse/core'))['useImage']
-  const useInfiniteScroll: (typeof import('@vueuse/core'))['useInfiniteScroll']
-  const useIntersectionObserver: (typeof import('@vueuse/core'))['useIntersectionObserver']
-  const useInterval: (typeof import('@vueuse/core'))['useInterval']
-  const useIntervalFn: (typeof import('@vueuse/core'))['useIntervalFn']
-  const useKeyModifier: (typeof import('@vueuse/core'))['useKeyModifier']
-  const useLastChanged: (typeof import('@vueuse/core'))['useLastChanged']
-  const useLocalStorage: (typeof import('@vueuse/core'))['useLocalStorage']
-  const useMagicKeys: (typeof import('@vueuse/core'))['useMagicKeys']
-  const useManualRefHistory: (typeof import('@vueuse/core'))['useManualRefHistory']
-  const useMediaControls: (typeof import('@vueuse/core'))['useMediaControls']
-  const useMediaQuery: (typeof import('@vueuse/core'))['useMediaQuery']
-  const useMemoize: (typeof import('@vueuse/core'))['useMemoize']
-  const useMemory: (typeof import('@vueuse/core'))['useMemory']
-  const useModel: (typeof import('vue'))['useModel']
-  const useMounted: (typeof import('@vueuse/core'))['useMounted']
-  const useMouse: (typeof import('@vueuse/core'))['useMouse']
-  const useMouseInElement: (typeof import('@vueuse/core'))['useMouseInElement']
-  const useMousePressed: (typeof import('@vueuse/core'))['useMousePressed']
-  const useMutationObserver: (typeof import('@vueuse/core'))['useMutationObserver']
-  const useNavigatorLanguage: (typeof import('@vueuse/core'))['useNavigatorLanguage']
-  const useNetwork: (typeof import('@vueuse/core'))['useNetwork']
-  const useNow: (typeof import('@vueuse/core'))['useNow']
-  const useObjectUrl: (typeof import('@vueuse/core'))['useObjectUrl']
-  const useOffsetPagination: (typeof import('@vueuse/core'))['useOffsetPagination']
-  const useOnline: (typeof import('@vueuse/core'))['useOnline']
-  const usePageLeave: (typeof import('@vueuse/core'))['usePageLeave']
-  const useParallax: (typeof import('@vueuse/core'))['useParallax']
-  const useParentElement: (typeof import('@vueuse/core'))['useParentElement']
-  const usePerformanceObserver: (typeof import('@vueuse/core'))['usePerformanceObserver']
-  const usePermission: (typeof import('@vueuse/core'))['usePermission']
-  const usePointer: (typeof import('@vueuse/core'))['usePointer']
-  const usePointerLock: (typeof import('@vueuse/core'))['usePointerLock']
-  const usePointerSwipe: (typeof import('@vueuse/core'))['usePointerSwipe']
-  const usePreferredColorScheme: (typeof import('@vueuse/core'))['usePreferredColorScheme']
-  const usePreferredContrast: (typeof import('@vueuse/core'))['usePreferredContrast']
-  const usePreferredDark: (typeof import('@vueuse/core'))['usePreferredDark']
-  const usePreferredLanguages: (typeof import('@vueuse/core'))['usePreferredLanguages']
-  const usePreferredReducedMotion: (typeof import('@vueuse/core'))['usePreferredReducedMotion']
-  const usePreferredReducedTransparency: (typeof import('@vueuse/core'))['usePreferredReducedTransparency']
-  const usePrevious: (typeof import('@vueuse/core'))['usePrevious']
-  const useRafFn: (typeof import('@vueuse/core'))['useRafFn']
-  const useRefHistory: (typeof import('@vueuse/core'))['useRefHistory']
-  const useResizeObserver: (typeof import('@vueuse/core'))['useResizeObserver']
-  const useSSRWidth: (typeof import('@vueuse/core'))['useSSRWidth']
-  const useScreenOrientation: (typeof import('@vueuse/core'))['useScreenOrientation']
-  const useScreenSafeArea: (typeof import('@vueuse/core'))['useScreenSafeArea']
-  const useScriptTag: (typeof import('@vueuse/core'))['useScriptTag']
-  const useScroll: (typeof import('@vueuse/core'))['useScroll']
-  const useScrollLock: (typeof import('@vueuse/core'))['useScrollLock']
-  const useSessionStorage: (typeof import('@vueuse/core'))['useSessionStorage']
-  const useShare: (typeof import('@vueuse/core'))['useShare']
-  const useSlots: (typeof import('vue'))['useSlots']
-  const useSorted: (typeof import('@vueuse/core'))['useSorted']
-  const useSpeechRecognition: (typeof import('@vueuse/core'))['useSpeechRecognition']
-  const useSpeechSynthesis: (typeof import('@vueuse/core'))['useSpeechSynthesis']
-  const useStepper: (typeof import('@vueuse/core'))['useStepper']
-  const useStorage: (typeof import('@vueuse/core'))['useStorage']
-  const useStorageAsync: (typeof import('@vueuse/core'))['useStorageAsync']
-  const useStore: (typeof import('./composables/store'))['useStore']
-  const useStyleTag: (typeof import('@vueuse/core'))['useStyleTag']
-  const useSupported: (typeof import('@vueuse/core'))['useSupported']
-  const useSwipe: (typeof import('@vueuse/core'))['useSwipe']
-  const useTemplateRef: (typeof import('vue'))['useTemplateRef']
-  const useTemplateRefsList: (typeof import('@vueuse/core'))['useTemplateRefsList']
-  const useTextDirection: (typeof import('@vueuse/core'))['useTextDirection']
-  const useTextSelection: (typeof import('@vueuse/core'))['useTextSelection']
-  const useTextareaAutosize: (typeof import('@vueuse/core'))['useTextareaAutosize']
-  const useThrottle: (typeof import('@vueuse/core'))['useThrottle']
-  const useThrottleFn: (typeof import('@vueuse/core'))['useThrottleFn']
-  const useThrottledRefHistory: (typeof import('@vueuse/core'))['useThrottledRefHistory']
-  const useTimeAgo: (typeof import('@vueuse/core'))['useTimeAgo']
-  const useTimeout: (typeof import('@vueuse/core'))['useTimeout']
-  const useTimeoutFn: (typeof import('@vueuse/core'))['useTimeoutFn']
-  const useTimeoutPoll: (typeof import('@vueuse/core'))['useTimeoutPoll']
-  const useTimestamp: (typeof import('@vueuse/core'))['useTimestamp']
-  const useTitle: (typeof import('@vueuse/core'))['useTitle']
-  const useToNumber: (typeof import('@vueuse/core'))['useToNumber']
-  const useToString: (typeof import('@vueuse/core'))['useToString']
-  const useToggle: (typeof import('@vueuse/core'))['useToggle']
-  const useTransition: (typeof import('@vueuse/core'))['useTransition']
-  const useTypeLoadingState: (typeof import('./composables/useTypeLoadingState'))['useTypeLoadingState']
-  const useUrlSearchParams: (typeof import('@vueuse/core'))['useUrlSearchParams']
-  const useUserMedia: (typeof import('@vueuse/core'))['useUserMedia']
-  const useVModel: (typeof import('@vueuse/core'))['useVModel']
-  const useVModels: (typeof import('@vueuse/core'))['useVModels']
-  const useVibrate: (typeof import('@vueuse/core'))['useVibrate']
-  const useVirtualList: (typeof import('@vueuse/core'))['useVirtualList']
-  const useWakeLock: (typeof import('@vueuse/core'))['useWakeLock']
-  const useWebNotification: (typeof import('@vueuse/core'))['useWebNotification']
-  const useWebSocket: (typeof import('@vueuse/core'))['useWebSocket']
-  const useWebWorker: (typeof import('@vueuse/core'))['useWebWorker']
-  const useWebWorkerFn: (typeof import('@vueuse/core'))['useWebWorkerFn']
-  const useWindowFocus: (typeof import('@vueuse/core'))['useWindowFocus']
-  const useWindowScroll: (typeof import('@vueuse/core'))['useWindowScroll']
-  const useWindowSize: (typeof import('@vueuse/core'))['useWindowSize']
-  const watch: (typeof import('vue'))['watch']
-  const watchArray: (typeof import('@vueuse/core'))['watchArray']
-  const watchAtMost: (typeof import('@vueuse/core'))['watchAtMost']
-  const watchDebounced: (typeof import('@vueuse/core'))['watchDebounced']
-  const watchDeep: (typeof import('@vueuse/core'))['watchDeep']
-  const watchEffect: (typeof import('vue'))['watchEffect']
-  const watchIgnorable: (typeof import('@vueuse/core'))['watchIgnorable']
-  const watchImmediate: (typeof import('@vueuse/core'))['watchImmediate']
-  const watchOnce: (typeof import('@vueuse/core'))['watchOnce']
-  const watchPausable: (typeof import('@vueuse/core'))['watchPausable']
-  const watchPostEffect: (typeof import('vue'))['watchPostEffect']
-  const watchSyncEffect: (typeof import('vue'))['watchSyncEffect']
-  const watchThrottled: (typeof import('@vueuse/core'))['watchThrottled']
-  const watchTriggerable: (typeof import('@vueuse/core'))['watchTriggerable']
-  const watchWithFilter: (typeof import('@vueuse/core'))['watchWithFilter']
-  const whenever: (typeof import('@vueuse/core'))['whenever']
+  const TSCONFIG: typeof import('./composables/store')['TSCONFIG']
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createRef: typeof import('@vueuse/core')['createRef']
+  const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const customRef: typeof import('vue')['customRef']
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onElementRemoval: typeof import('@vueuse/core')['onElementRemoval']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
+  const reactify: typeof import('@vueuse/core')['reactify']
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+  const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAnimate: typeof import('@vueuse/core')['useAnimate']
+  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
+  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
+  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
+  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
+  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
+  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
+  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
+  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
+  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
+  const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBase64: typeof import('@vueuse/core')['useBase64']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
+  const useCloned: typeof import('@vueuse/core')['useCloned']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useConsole: typeof import('./composables/use-console')['useConsole']
+  const useCountdown: typeof import('@vueuse/core')['useCountdown']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useId: typeof import('vue')['useId']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useModel: typeof import('vue')['useModel']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const useParentElement: typeof import('@vueuse/core')['useParentElement']
+  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const usePreferredReducedTransparency: typeof import('@vueuse/core')['usePreferredReducedTransparency']
+  const usePrevious: typeof import('@vueuse/core')['usePrevious']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useSSRWidth: typeof import('@vueuse/core')['useSSRWidth']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSorted: typeof import('@vueuse/core')['useSorted']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStepper: typeof import('@vueuse/core')['useStepper']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStore: typeof import('./composables/store')['useStore']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSupported: typeof import('@vueuse/core')['useSupported']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToNumber: typeof import('@vueuse/core')['useToNumber']
+  const useToString: typeof import('@vueuse/core')['useToString']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useTypeLoadingState: typeof import('./composables/useTypeLoadingState')['useTypeLoadingState']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const watch: typeof import('vue')['watch']
+  const watchArray: typeof import('@vueuse/core')['watchArray']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchDeep: typeof import('@vueuse/core')['watchDeep']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
 }
 // for type re-export
 declare global {
   // @ts-ignore
-  export type {
-    Component,
-    Slot,
-    Slots,
-    ComponentPublicInstance,
-    ComputedRef,
-    DirectiveBinding,
-    ExtractDefaultPropTypes,
-    ExtractPropTypes,
-    ExtractPublicPropTypes,
-    InjectionKey,
-    PropType,
-    Ref,
-    MaybeRef,
-    MaybeRefOrGetter,
-    VNode,
-    WritableComputedRef,
-  } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
   // @ts-ignore
-  export type {
-    Initial,
-    VersionKey,
-    Versions,
-    UserOptions,
-    SerializeState,
-    Store,
-  } from './composables/store'
+  export type { Initial, VersionKey, Versions, UserOptions, SerializeState, Store } from './composables/store'
   import('./composables/store')
+  // @ts-ignore
+  export type { ConsoleLevel, ConsoleLogPayload, ConsoleGroupPayload, ConsolePayload } from './composables/use-console'
+  import('./composables/use-console')
 }
diff --git a/src/components.d.ts b/src/components.d.ts
index 2435931d..a7edf0be 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ConsolePanel: typeof import('./components/ConsolePanel.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElForm: typeof import('element-plus/es')['ElForm']
diff --git a/src/components/ConsolePanel.vue b/src/components/ConsolePanel.vue
new file mode 100644
index 00000000..1fe364b4
--- /dev/null
+++ b/src/components/ConsolePanel.vue
@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import LunaConsole from 'luna-console'
+import 'luna-object-viewer/luna-object-viewer.css'
+import 'luna-data-grid/luna-data-grid.css'
+import 'luna-console/luna-console.css'
+
+import type {
+  ConsoleGroupPayload,
+  ConsolePayload,
+} from '@/composables/use-console'
+
+const HEADER_HEIGHT = 30
+const MIN_HEIGHT = 100
+const MAX_HEIGHT = 600
+
+const props = defineProps<{
+  logs: ConsolePayload[]
+  height: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:height', value: number): void
+  (e: 'clear'): void
+}>()
+
+const dark = useDark()
+
+const collapsed = ref(false)
+const containerRef = ref<HTMLElement>()
+const panelRef = ref<HTMLElement>()
+
+let startY = 0
+let startHeight = 0
+let lunaConsole: LunaConsole | undefined
+let processedCount = 0
+let heightBeforeCollapse = props.height
+
+const clampedHeight = computed(() =>
+  Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, props.height)),
+)
+
+const panelHeight = computed(() =>
+  collapsed.value ? HEADER_HEIGHT : clampedHeight.value,
+)
+
+watch(dark, (isDark) => {
+  lunaConsole?.setOption('theme', isDark ? 'dark' : 'light')
+})
+
+watch(
+  () => props.logs,
+  (newLogs) => {
+    if (!lunaConsole) return
+
+    if (newLogs.length < processedCount) {
+      lunaConsole.clear(true)
+      processedCount = 0
+    }
+
+    for (let i = processedCount; i < newLogs.length; i++) {
+      const payload = newLogs[i]
+
+      if (isGroupPayload(payload)) {
+        switch (payload.action) {
+          case 'console_group':
+            lunaConsole.group(payload.label ?? 'console.group')
+            break
+          case 'console_group_collapsed':
+            lunaConsole.groupCollapsed(payload.label ?? 'console.group')
+            break
+          case 'console_group_end':
+            lunaConsole.groupEnd()
+            break
+        }
+      } else {
+        const { level, args } = payload
+        switch (level) {
+          case 'log':
+          case 'info':
+          case 'error':
+          case 'table':
+            lunaConsole[level](...args)
+            break
+          case 'debug':
+            lunaConsole.debug(...args)
+            break
+          case 'warn':
+          case 'system-warn':
+            lunaConsole.warn(...args)
+            break
+          case 'dir':
+            lunaConsole.dir(args[0])
+            break
+          case 'system-log':
+            lunaConsole.log(...args)
+            break
+          case 'assert':
+            lunaConsole.error('Assertion failed:', ...args)
+            break
+          case 'trace':
+            lunaConsole.log(...args)
+            break
+          default:
+            lunaConsole.log(...args)
+        }
+      }
+    }
+
+    processedCount = newLogs.length
+  },
+)
+
+function isGroupPayload(p: ConsolePayload): p is ConsoleGroupPayload {
+  return 'action' in p
+}
+
+function toggleCollapsed() {
+  if (collapsed.value) {
+    collapsed.value = false
+    emit('update:height', Math.max(MIN_HEIGHT, heightBeforeCollapse))
+  } else {
+    heightBeforeCollapse = clampedHeight.value
+    collapsed.value = true
+  }
+}
+
+function clearConsole() {
+  lunaConsole?.clear(true)
+  processedCount = 0
+  emit('clear')
+}
+
+function onDragStart(e: PointerEvent) {
+  e.preventDefault()
+  startY = e.clientY
+  startHeight = collapsed.value ? HEADER_HEIGHT : clampedHeight.value
+  document.body.classList.add('console-resizing')
+  document.addEventListener('pointermove', onDragMove)
+  document.addEventListener('pointerup', onDragEnd)
+  document.addEventListener('pointercancel', onDragEnd)
+}
+
+function onDragMove(e: PointerEvent) {
+  if (!panelRef.value) return
+  const rawH = startHeight + startY - e.clientY
+
+  if (rawH < MIN_HEIGHT) {
+    collapsed.value = true
+    panelRef.value.style.height = `${HEADER_HEIGHT}px`
+  } else {
+    collapsed.value = false
+    panelRef.value.style.height = `${Math.min(MAX_HEIGHT, rawH)}px`
+  }
+}
+
+function onDragEnd() {
+  document.body.classList.remove('console-resizing')
+  if (panelRef.value && !collapsed.value) {
+    const h = Number.parseInt(panelRef.value.style.height, 10)
+    heightBeforeCollapse = h
+    emit('update:height', h)
+  }
+  document.removeEventListener('pointermove', onDragMove)
+  document.removeEventListener('pointerup', onDragEnd)
+  document.removeEventListener('pointercancel', onDragEnd)
+}
+
+onMounted(() => {
+  if (!containerRef.value) return
+  lunaConsole = new LunaConsole(containerRef.value, {
+    theme: dark.value ? 'dark' : 'light',
+    maxNum: 10_000,
+  })
+
+  if (clampedHeight.value !== props.height) {
+    emit('update:height', clampedHeight.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  lunaConsole?.destroy()
+  document.removeEventListener('pointermove', onDragMove)
+  document.removeEventListener('pointerup', onDragEnd)
+  document.removeEventListener('pointercancel', onDragEnd)
+})
+</script>
+
+<template>
+  <div
+    ref="panelRef"
+    class="console-panel"
+    :style="{ height: `${panelHeight}px` }"
+  >
+    <div class="console-header" @pointerdown="onDragStart">
+      <span class="console-title">Console</span>
+      <div class="console-actions">
+        <el-button
+          v-show="!collapsed"
+          text
+          type="info"
+          size="small"
+          @click.stop="clearConsole"
+        >
+          Clear console
+        </el-button>
+        <button
+          class="console-toggle-btn"
+          :title="collapsed ? 'Expand console' : 'Collapse console'"
+          @click.stop="toggleCollapsed"
+        >
+          <div
+            :class="
+              collapsed ? 'i-ri-arrow-up-s-line' : 'i-ri-arrow-down-s-line'
+            "
+          />
+        </button>
+      </div>
+    </div>
+    <div v-show="!collapsed" ref="containerRef" class="console-output" />
+  </div>
+</template>
+
+<style lang="scss">
+.console-panel {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--border);
+  background-color: var(--bg);
+  overflow: hidden;
+}
+
+.console-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--border);
+  cursor: ns-resize;
+  user-select: none;
+  touch-action: none;
+  flex-shrink: 0;
+}
+
+.console-title {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-light);
+}
+
+.console-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.console-toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-light);
+  cursor: pointer;
+  font-size: 16px;
+
+  &:hover {
+    background-color: var(--border);
+  }
+}
+
+.console-output {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+
+.luna-console-theme-dark {
+  background-color: var(--bg);
+}
+
+body.console-resizing {
+  cursor: ns-resize;
+  user-select: none;
+}
+
+body.console-resizing iframe {
+  pointer-events: none;
+}
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index d2b12a75..a45301a8 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { languageToolsVersion } from '@vue/repl'
+import { useTypeLoadingState } from '@/composables/useTypeLoadingState'
 import {
   getSupportedEpVersions,
   getSupportedTSVersions,
   getSupportedVueVersions,
 } from '@/utils/dependency'
 import type { Store, VersionKey } from '@/composables/store'
-import { useTypeLoadingState } from '@/composables/useTypeLoadingState'
 import type { Ref } from 'vue'
 
 const appVersion = import.meta.env.APP_VERSION
@@ -21,6 +21,7 @@ const dtsLabels: Record<string, string> = {
 const emit = defineEmits<{
   (e: 'refresh'): void
   (e: 'reset'): void
+  (e: 'toggleConsole'): void
 }>()
 const nightly = ref(false)
 const showReset = ref(false)
@@ -29,6 +30,7 @@ const toggleDark = useToggle(dark)
 
 const { store } = defineProps<{
   store: Store
+  showConsole: boolean
 }>()
 
 interface Version {
@@ -189,7 +191,7 @@ function resetFiles() {
           width="200px"
         >
           <div flex justify-center>Want to reset the editor ?</div>
-          <el-button flex self-end size="small" plain @click="resetFiles">
+          <el-button size="small" plain flex self-end @click="resetFiles">
             Yes
           </el-button>
           <template #reference>
@@ -208,6 +210,13 @@ function resetFiles() {
           hover:color-primary
           @click="copyLink"
         />
+        <button
+          i-ri-terminal-box-line
+          title="Toggle console"
+          hover:color-primary
+          :class="{ 'color-primary': showConsole }"
+          @click="emit('toggleConsole')"
+        />
         <button
           i-ri-sun-line
           title="Toggle theme"
diff --git a/src/composables/store.ts b/src/composables/store.ts
index eaadd7c3..a948faab 100644
--- a/src/composables/store.ts
+++ b/src/composables/store.ts
@@ -1,11 +1,11 @@
 import {
-  compileFile as originalCompileFile,
   File,
   mergeImportMap,
+  compileFile as originalCompileFile,
   useStore as useReplStore,
   type ImportMap,
-  type StoreState,
   type ReplStore,
+  type StoreState,
 } from '@vue/repl'
 import { objectOmit } from '@vueuse/core'
 import { IS_DEV } from '@/constants'
diff --git a/src/composables/use-console.ts b/src/composables/use-console.ts
new file mode 100644
index 00000000..720937ec
--- /dev/null
+++ b/src/composables/use-console.ts
@@ -0,0 +1,109 @@
+export type ConsoleLevel =
+  | 'log'
+  | 'info'
+  | 'debug'
+  | 'warn'
+  | 'error'
+  | 'dir'
+  | 'table'
+  | 'assert'
+  | 'trace'
+  | 'system-log'
+  | 'system-warn'
+
+export interface ConsoleLogPayload {
+  level: ConsoleLevel
+  args: unknown[]
+}
+
+export interface ConsoleGroupPayload {
+  action: 'console_group' | 'console_group_end' | 'console_group_collapsed'
+  label?: string
+}
+
+export type ConsolePayload = ConsoleLogPayload | ConsoleGroupPayload
+
+const MAX_BUFFER = 1000
+
+export function useConsole() {
+  const logs = shallowRef<ConsolePayload[]>([])
+  const buffer: ConsolePayload[] = []
+  let rafId = 0
+
+  function flush() {
+    rafId = 0
+    if (buffer.length > MAX_BUFFER) {
+      buffer.splice(0, buffer.length - MAX_BUFFER)
+    }
+    logs.value = [...buffer]
+  }
+
+  function cancelPendingFlush() {
+    if (rafId) {
+      cancelAnimationFrame(rafId)
+      rafId = 0
+    }
+  }
+
+  function scheduleFlush() {
+    if (!rafId) rafId = requestAnimationFrame(flush)
+  }
+
+  let lastLogPayload: ConsoleLogPayload | undefined
+
+  const handler = (event: MessageEvent) => {
+    const { data } = event
+    if (!data || typeof data !== 'object') return
+
+    if (data.action === 'console') {
+      if (data.duplicate) {
+        if (lastLogPayload) {
+          buffer.push({
+            level: lastLogPayload.level,
+            args: lastLogPayload.args,
+          })
+          scheduleFlush()
+        }
+        return
+      }
+
+      if (data.level === 'clear') {
+        buffer.length = 0
+        cancelPendingFlush()
+        logs.value = []
+        lastLogPayload = undefined
+        return
+      }
+
+      const payload: ConsoleLogPayload = { level: data.level, args: data.args }
+      lastLogPayload = payload
+      buffer.push(payload)
+      scheduleFlush()
+    } else if (
+      data.action === 'console_group' ||
+      data.action === 'console_group_end' ||
+      data.action === 'console_group_collapsed'
+    ) {
+      buffer.push({
+        action: data.action,
+        label: data.label,
+      })
+      scheduleFlush()
+    }
+  }
+
+  window.addEventListener('message', handler)
+
+  const clearLogs = () => {
+    buffer.length = 0
+    cancelPendingFlush()
+    logs.value = []
+  }
+
+  tryOnScopeDispose(() => {
+    window.removeEventListener('message', handler)
+    cancelPendingFlush()
+  })
+
+  return { logs, clearLogs }
+}
diff --git a/src/env.d.ts b/src/env.d.ts
index f614c5bd..88c9bc6b 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1,2 +1,3 @@
 /// <reference types="vite/client" />
 /// <reference types="element-plus/global" />
+