From 393c418758cf0f57c96da54b6bba573b39ac724f Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Wed, 24 Sep 2025 18:29:54 +0200
Subject: [PATCH 01/18] #15: Starting to integrate luna-console

Modifying the vue-repl based on https://github.com/vuejs/repl/pull/333
---
 packages/vue-repl/package.json           |  10 +-
 packages/vue-repl/src/Repl.vue           |  20 +++
 packages/vue-repl/src/output/Output.vue  |  16 +-
 packages/vue-repl/src/output/Preview.vue |   1 +
 packages/vue-repl/src/output/Sandbox.vue |  52 +++---
 packages/vue-repl/src/output/srcdoc.html | 210 ++++++-----------------
 packages/vue-repl/src/store.ts           |  16 +-
 packages/vue-repl/src/types.ts           |  33 ++++
 packages/vue-repl/test/main.ts           |   4 +-
 packages/vue-repl/vite.config.ts         |   7 +-
 pnpm-lock.yaml                           |  49 ++++++
 src/components/YvRepl.vue                |   5 +
 12 files changed, 235 insertions(+), 188 deletions(-)

diff --git a/packages/vue-repl/package.json b/packages/vue-repl/package.json
index ee24e9e..6932129 100644
--- a/packages/vue-repl/package.json
+++ b/packages/vue-repl/package.json
@@ -26,6 +26,11 @@
       "import": "./dist/codemirror-editor.js",
       "require": null
     },
+    "./luna-console": {
+      "types": "./dist/luna-console.d.ts",
+      "import": "./dist/luna-console.js",
+      "require": null
+    },
     "./core": {
       "types": "./dist/core.d.ts",
       "import": "./dist/core.js",
@@ -117,6 +122,9 @@
     "volar-service-typescript": "0.0.65",
     "vscode-uri": "^3.1.0",
     "vue": "^3.5.18",
-    "vue-tsc": "3.0.7-alpha.1"
+    "vue-tsc": "3.0.7-alpha.1",
+     "luna-console": "^1.3.5",
+    "luna-data-grid": "^1.3.0",
+    "luna-object-viewer": "^0.3.1"
   }
 }
diff --git a/packages/vue-repl/src/Repl.vue b/packages/vue-repl/src/Repl.vue
index a290c96..a82b2d0 100644
--- a/packages/vue-repl/src/Repl.vue
+++ b/packages/vue-repl/src/Repl.vue
@@ -4,6 +4,9 @@ import Output from './output/Output.vue'
 import { type Store, useStore } from './store'
 import { computed, provide, toRefs, useTemplateRef } from 'vue'
 import {
+    type ConsoleComponentType,
+
+
   type EditorComponentType,
   injectKeyPreviewRef,
   injectKeyProps,
@@ -15,6 +18,9 @@ export interface Props {
   theme?: 'dark' | 'light'
   previewTheme?: boolean
   editor: EditorComponentType
+    console?: ConsoleComponentType
+
+
   store?: Store
   autoResize?: boolean
   showCompileOutput?: boolean
@@ -22,6 +28,9 @@ export interface Props {
   showImportMap?: boolean
   showSsrOutput?: boolean
   showTsConfig?: boolean
+    showConsole?: boolean
+
+
   clearConsole?: boolean
   layout?: 'horizontal' | 'vertical'
   layoutReverse?: boolean
@@ -59,6 +68,9 @@ const props = withDefaults(defineProps<Props>(), {
   showImportMap: true,
   showSsrOutput: false,
   showTsConfig: true,
+    showConsole: false,
+
+
   clearConsole: true,
   layoutReverse: false,
   ssr: false,
@@ -72,6 +84,10 @@ if (!props.editor) {
   throw new Error('The "editor" prop is now required.')
 }
 
+const consoleWrapper = computed<ConsoleComponentType>(
+  () => props.console ?? (() => ({})),
+)
+
 const outputRef = useTemplateRef('output')
 
 props.store.init()
@@ -81,6 +97,9 @@ const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
 provide(injectKeyProps, {
   ...toRefs(props),
+    console: consoleWrapper,
+
+
   autoSave,
 })
 provide(
@@ -108,6 +127,7 @@ defineExpose({ reload })
         <Output
           ref="output"
           :editor-component="editor"
+          :console-component="consoleWrapper"
           :show-compile-output="props.showCompileOutput"
           :show-open-source-map="props.showOpenSourceMap"
           :show-ssr-output="props.showSsrOutput"
diff --git a/packages/vue-repl/src/output/Output.vue b/packages/vue-repl/src/output/Output.vue
index 13d6feb..1dfb1be 100644
--- a/packages/vue-repl/src/output/Output.vue
+++ b/packages/vue-repl/src/output/Output.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import Preview from './Preview.vue'
+import SplitPane from '../SplitPane.vue'
 import SsrOutput from './SsrOutput.vue'
 import { computed, inject, useTemplateRef, watchEffect } from 'vue'
 import {
+  type ConsoleComponentType,
   type EditorComponentType,
   type OutputModes,
   injectKeyProps,
@@ -10,13 +12,14 @@ import {
 
 const props = defineProps<{
   editorComponent: EditorComponentType
+  consoleComponent: ConsoleComponentType
   showCompileOutput?: boolean
   showOpenSourceMap?: boolean
   showSsrOutput?: boolean
   ssr: boolean
 }>()
 
-const { store } = inject(injectKeyProps)!
+const { store, showConsole } = inject(injectKeyProps)!
 const previewRef = useTemplateRef('preview')
 const modes = computed(() => {
   const outputModes: OutputModes[] = ['preview']
@@ -51,6 +54,9 @@ function openSourceMap() {
 
 function reload() {
   previewRef.value?.reload()
+  store.value.clearConsole?.()
+
+
 }
 
 defineExpose({ reload, previewRef })
@@ -69,6 +75,14 @@ defineExpose({ reload, previewRef })
   </div>
 
   <div class="output-container">
+    <SplitPane v-if="showConsole" layout="vertical">
+      <template #left>
+        <Preview ref="preview" :show="mode === 'preview'" :ssr="ssr" />
+      </template>
+      <template #right>
+        <props.consoleComponent />
+      </template>
+    </SplitPane>
     <Preview ref="preview" :show="mode === 'preview'" :ssr="ssr" />
     <SsrOutput
       v-if="mode === 'ssr output'"
diff --git a/packages/vue-repl/src/output/Preview.vue b/packages/vue-repl/src/output/Preview.vue
index 20c6f37..1afd257 100644
--- a/packages/vue-repl/src/output/Preview.vue
+++ b/packages/vue-repl/src/output/Preview.vue
@@ -30,5 +30,6 @@ defineExpose({
     :preview-options="previewOptions"
     :ssr="props.ssr"
     :clear-console="clearConsole"
+    @log="store.executeLog"
   />
 </template>
diff --git a/packages/vue-repl/src/output/Sandbox.vue b/packages/vue-repl/src/output/Sandbox.vue
index c62f480..8c969f0 100644
--- a/packages/vue-repl/src/output/Sandbox.vue
+++ b/packages/vue-repl/src/output/Sandbox.vue
@@ -15,7 +15,7 @@ import srcdoc from './srcdoc.html?raw'
 import { PreviewProxy } from './PreviewProxy'
 import { compileModulesForPreview } from './moduleCompiler'
 import type { Store } from '../store'
-import { injectKeyProps } from '../types'
+import { type LogLevel, type SandboxEmits, injectKeyProps } from '../types'
 import { getVersions, isVaporSupported } from '../import-map'
 
 export interface SandboxProps {
@@ -47,6 +47,10 @@ const props = withDefaults(defineProps<SandboxProps>(), {
   previewOptions: () => ({}),
   autoStoreInit: true,
 })
+
+const emit = defineEmits<SandboxEmits>()
+
+
 const { store, theme, clearConsole, previewOptions } = toRefs(props)
 
 const keyProps = inject(injectKeyProps)
@@ -132,6 +136,9 @@ function createSandbox() {
   sandbox.srcdoc = sandboxSrc
   containerRef.value?.appendChild(sandbox)
 
+   const doLog = (logLevel: LogLevel, data?: any) =>
+    emit('log', { logLevel, data })
+
   proxy = new PreviewProxy(sandbox, {
     on_fetch_progress: (progress: any) => {
       // pending_imports = progress;
@@ -157,33 +164,33 @@ function createSandbox() {
       }
       runtimeError.value = 'Uncaught (in promise): ' + error.message
     },
-    on_console: (log: any) => {
-      if (log.duplicate) {
-        return
-      }
+     on_console: (log: any) => {
+      const maybeMsg = log.args[0]
       if (log.level === 'error') {
-        if (log.args[0] instanceof Error) {
-          runtimeError.value = log.args[0].message
-        } else {
-          runtimeError.value = log.args[0]
-        }
-      } else if (log.level === 'warn') {
-        if (log.args[0].toString().includes('[Vue warn]')) {
-          runtimeWarning.value = log.args
-            .join('')
-            .replace(/\[Vue warn\]:/, '')
-            .trim()
+        if (maybeMsg instanceof Error) {
+          runtimeError.value = maybeMsg.message
+        } else if (!maybeMsg?.startsWith('[vue-repl]')) {
+          runtimeError.value = maybeMsg
         }
+      } else if (
+        log.level === 'warn' &&
+        maybeMsg.toString().includes('[Vue warn]')
+      ) {
+        runtimeWarning.value = log.args
+          .join('')
+          .replace(/\[Vue warn\]:/, '')
+          .trim()
       }
+      doLog(log.level || 'log', log.args)
     },
     on_console_group: (action: any) => {
-      // group_logs(action.label, false);
+      doLog('group', action.label)
     },
     on_console_group_end: () => {
-      // ungroup_logs();
+      doLog('groupEnd')
     },
     on_console_group_collapsed: (action: any) => {
-      // group_logs(action.label, true);
+      doLog('groupCollapsed', action.label)
     },
   })
 
@@ -348,12 +355,7 @@ defineExpose({ reload, container: containerRef })
 </script>
 
 <template>
-  <div
-    v-show="props.show"
-    ref="container"
-    class="iframe-container"
-    :class="theme"
-  />
+  <div v-show="show" ref="container" class="iframe-container" :class="theme" />
   <Message :err="(previewOptions?.showRuntimeError ?? true) && runtimeError" />
   <Message
     v-if="!runtimeError && (previewOptions?.showRuntimeWarning ?? true)"
diff --git a/packages/vue-repl/src/output/srcdoc.html b/packages/vue-repl/src/output/srcdoc.html
index 75fa51b..bddb0b3 100644
--- a/packages/vue-repl/src/output/srcdoc.html
+++ b/packages/vue-repl/src/output/srcdoc.html
@@ -6,8 +6,9 @@
         color-scheme: dark;
       }
       body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-          Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        font-family:
+          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+          Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       }
     </style>
     <!-- PREVIEW-OPTIONS-HEAD-HTML -->
@@ -157,50 +158,51 @@
             )
           }
         })
-
-        let previous = { level: null, args: null }
-
-        ;['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach(
-          (level) => {
-            const original = console[level]
-            console[level] = (...args) => {
-              const msg = args[0]
-              if (typeof msg === 'string') {
-                if (
-                  msg.includes('You are running a development build of Vue') ||
-                  msg.includes('You are running the esm-bundler build of Vue')
-                ) {
-                  return
-                }
-              }
-
-              original(...args)
-
-              const stringifiedArgs = stringify(args)
+        const errorColorStr = 'color: #fb2c36'
+        const errorMsg = 'please open the devtool to see correctly this log'
+        ;[
+          'clear',
+          'log',
+          'info',
+          'dir',
+          'warn',
+          'error',
+          'table',
+          'debug',
+          'time',
+          'timeLog',
+          'timeEnd',
+          'assert',
+          'count',
+          'countReset',
+        ].forEach((level) => {
+          const original = console[level]
+          console[level] = (...args) => {
+            const msg = args[0]
+            if (typeof msg === 'string') {
               if (
-                previous.level === level &&
-                previous.args &&
-                previous.args === stringifiedArgs
+                msg.includes('You are running a development build of Vue') ||
+                msg.includes('You are running the esm-bundler build of Vue')
               ) {
-                parent.postMessage(
-                  { action: 'console', level, duplicate: true },
-                  '*',
-                )
-              } else {
-                previous = { level, args: stringifiedArgs }
-
-                try {
-                  parent.postMessage({ action: 'console', level, args }, '*')
-                } catch (err) {
-                  parent.postMessage(
-                    { action: 'console', level, args: args.map(toString) },
-                    '*',
-                  )
-                }
+                return
               }
             }
-          },
-        )
+            original(...args)
+            const postMessage = () =>
+              parent.postMessage({ action: 'console', level, args }, '*')
+            try {
+              postMessage()
+            } catch {
+              args = args.map(toString)
+              if (!args?.[0]?.startsWith('[Vue warn]'))
+                args = [
+                  `[vue-repl]: %c Cannot clone the message, ${errorMsg}. Supported types are listed here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#javascript_types`,
+                  errorColorStr,
+                ]
+              postMessage()
+            }
+          }
+        })
         ;[
           { method: 'group', action: 'console_group' },
           { method: 'groupEnd', action: 'console_group_end' },
@@ -213,119 +215,17 @@
             original(label)
           }
         })
-
-        const timers = new Map()
-        const original_time = console.time
-        const original_timelog = console.timeLog
-        const original_timeend = console.timeEnd
-
-        console.time = (label = 'default') => {
-          original_time(label)
-          timers.set(label, performance.now())
-        }
-        console.timeLog = (label = 'default') => {
-          original_timelog(label)
-          const now = performance.now()
-          if (timers.has(label)) {
-            parent.postMessage(
-              {
-                action: 'console',
-                level: 'system-log',
-                args: [`${label}: ${now - timers.get(label)}ms`],
-              },
-              '*',
-            )
-          } else {
-            parent.postMessage(
-              {
-                action: 'console',
-                level: 'system-warn',
-                args: [`Timer '${label}' does not exist`],
-              },
-              '*',
-            )
-          }
-        }
-        console.timeEnd = (label = 'default') => {
-          original_timeend(label)
-          const now = performance.now()
-          if (timers.has(label)) {
-            parent.postMessage(
-              {
-                action: 'console',
-                level: 'system-log',
-                args: [`${label}: ${now - timers.get(label)}ms`],
-              },
-              '*',
-            )
-          } else {
-            parent.postMessage(
-              {
-                action: 'console',
-                level: 'system-warn',
-                args: [`Timer '${label}' does not exist`],
-              },
-              '*',
-            )
-          }
-          timers.delete(label)
-        }
-
-        const original_assert = console.assert
-        console.assert = (condition, ...args) => {
-          if (condition) {
-            const stack = new Error().stack
-            parent.postMessage(
-              { action: 'console', level: 'assert', args, stack },
-              '*',
-            )
-          }
-          original_assert(condition, ...args)
-        }
-
-        const counter = new Map()
-        const original_count = console.count
-        const original_countreset = console.countReset
-
-        console.count = (label = 'default') => {
-          counter.set(label, (counter.get(label) || 0) + 1)
-          parent.postMessage(
-            {
-              action: 'console',
-              level: 'system-log',
-              args: `${label}: ${counter.get(label)}`,
-            },
-            '*',
-          )
-          original_count(label)
-        }
-
-        console.countReset = (label = 'default') => {
-          if (counter.has(label)) {
-            counter.set(label, 0)
-          } else {
-            parent.postMessage(
-              {
-                action: 'console',
-                level: 'system-warn',
-                args: `Count for '${label}' does not exist`,
-              },
-              '*',
-            )
+        ;['profile', 'profileEnd', 'trace', 'dirXml'].forEach((level) => {
+          const original = console[level]
+          console[level] = () => {
+            original()
+            const args = [
+              `[vue-repl]: %c Cannot handle "${level}" log, ${errorMsg}.`,
+              errorColorStr,
+            ]
+            parent.postMessage({ action: 'console', level: 'log', args }, '*')
           }
-          original_countreset(label)
-        }
-
-        const original_trace = console.trace
-
-        console.trace = (...args) => {
-          const stack = new Error().stack
-          parent.postMessage(
-            { action: 'console', level: 'trace', args, stack },
-            '*',
-          )
-          original_trace(...args)
-        }
+        })
 
         function toString(value) {
           if (value instanceof Error) {
@@ -377,4 +277,4 @@
   <body>
     <!--PREVIEW-OPTIONS-PLACEHOLDER-HTML-->
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/packages/vue-repl/src/store.ts b/packages/vue-repl/src/store.ts
index cc30ec5..044b5d9 100644
--- a/packages/vue-repl/src/store.ts
+++ b/packages/vue-repl/src/store.ts
@@ -18,7 +18,7 @@ import type {
 import * as defaultCompiler from 'vue/compiler-sfc'
 import { type ImportMap, mergeImportMap, useVueImportMap } from './import-map'
 import { compileFile } from './transform'
-import type { OutputModes } from './types'
+import type { LogPayload, OutputModes } from './types'
 import { atou, utoa } from './utils'
 
 import newSFCCode from './template/new-sfc.vue?raw'
@@ -626,6 +626,8 @@ const applyFullState: ReplStore['applyFullState'] = async (fileState, activeFile
   }
   activeFilename ||= ref(mainFile.value)
   const activeFile = computed(() => files.value[activeFilename.value])
+  const executeLog = ref()
+  const clearConsole = ref()
 
   applyBuiltinImportMap()
 
@@ -675,7 +677,11 @@ const applyFullState: ReplStore['applyFullState'] = async (fileState, activeFile
     getFileLastModified,
     hasFile,
     batchUpdate,
-    applyFullState
+    applyFullState,
+
+    // console
+    executeLog,
+    clearConsole,
   })
 
   return store
@@ -774,6 +780,10 @@ export interface ReplStore<E extends Editor = Editor> extends UnwrapRef<StoreSta
   hasFile(filename: string): boolean
   batchUpdate(updates: BatchUpdateOperation[]): Promise<void>
   applyFullState(fileState: Record<string, string>, activeFilenameHint?: string): Promise<void>
+
+  // console
+  executeLog?(payload: LogPayload): void
+  clearConsole?(): void
 }
 
 export type Store<E extends Editor = Editor> = Pick<
@@ -799,6 +809,8 @@ export type Store<E extends Editor = Editor> = Pick<
   | 'renameFile'
   | 'getImportMap'
   | 'getTsConfig'
+   | 'executeLog'
+  | 'clearConsole'
 >
 
 function addSrcPrefix(file: string) {
diff --git a/packages/vue-repl/src/types.ts b/packages/vue-repl/src/types.ts
index 7018ca6..890b179 100644
--- a/packages/vue-repl/src/types.ts
+++ b/packages/vue-repl/src/types.ts
@@ -8,11 +8,44 @@ export interface EditorProps {
   readonly?: boolean
   mode?: EditorMode
 }
+
+export type LogLevel =
+  | 'clear'
+  | 'log'
+  | 'error'
+  | 'warn'
+  | 'group'
+  | 'groupCollapsed'
+  | 'groupEnd'
+  | 'assert'
+  | 'count'
+  | 'countReset'
+  | 'debug'
+  | 'dir'
+  | 'info'
+  | 'table'
+  | 'time'
+  | 'timeEnd'
+  | 'timeLog'
+  | 'warn'
+
+export interface LogPayload {
+  logLevel: LogLevel
+  data?: any[]
+}
+
 export interface EditorEmits {
   (e: 'change', code: string): void
 }
+
+export interface SandboxEmits {
+  (e: 'log', payload: LogPayload): void
+}
+
 export type EditorComponentType = Component<EditorProps>
 
+export type ConsoleComponentType = Component
+
 export type OutputModes = 'preview' | 'ssr output' | EditorMode
 
 export const injectKeyProps: InjectionKey<
diff --git a/packages/vue-repl/test/main.ts b/packages/vue-repl/test/main.ts
index 43a674c..d91fec3 100644
--- a/packages/vue-repl/test/main.ts
+++ b/packages/vue-repl/test/main.ts
@@ -3,8 +3,8 @@ import { createApp, h, ref, watchEffect } from 'vue'
 import { type OutputModes, Repl, useStore, useVueImportMap } from '../src'
 // @ts-ignore
 import MonacoEditor from '../src/editor/MonacoEditor.vue'
+import LunaConsole from '../src/output/LunaConsole.vue'
 // @ts-ignore
-import CodeMirrorEditor from '../src/editor/CodeMirrorEditor.vue'
 
 const window = globalThis.window as any
 window.process = { env: {} }
@@ -61,7 +61,9 @@ const App = {
         showOpenSourceMap: true,
         // layout: 'vertical',
         ssr: true,
+        showConsole: true,
         showSsrOutput: true,
+        console: LunaConsole,
         sfcOptions: {
           script: {
             // inlineTemplate: false
diff --git a/packages/vue-repl/vite.config.ts b/packages/vue-repl/vite.config.ts
index 1b007b8..6a52d23 100644
--- a/packages/vue-repl/vite.config.ts
+++ b/packages/vue-repl/vite.config.ts
@@ -1,8 +1,8 @@
+import fs from 'node:fs'
+import path from 'node:path'
 import { type Plugin, mergeConfig } from 'vite'
 import dts from 'vite-plugin-dts'
 import base from './vite.preview.config'
-import fs from 'node:fs'
-import path from 'node:path'
 
 const genStub: Plugin = {
   name: 'gen-stub',
@@ -26,7 +26,7 @@ const patchCssFiles: Plugin = {
   writeBundle() {
     //  inject css imports to the files
     const outDir = path.resolve('dist')
-    ;['vue-repl', 'monaco-editor', 'codemirror-editor'].forEach((file) => {
+    ;['vue-repl', 'monaco-editor', 'codemirror-editor', 'luna-console'].forEach((file) => {
       const filePath = path.resolve(outDir, file + '.js')
       const content = fs.readFileSync(filePath, 'utf-8')
       fs.writeFileSync(filePath, `import './${file}.css'\n${content}`)
@@ -60,6 +60,7 @@ export default mergeConfig(base, {
         core: './src/core.ts',
         'monaco-editor': './src/editor/MonacoEditor.vue',
         'codemirror-editor': './src/editor/CodeMirrorEditor.vue',
+        'luna-console': './src/output/LunaConsole.vue',
       },
       formats: ['es'],
       fileName: () => '[name].js',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0aaf6fc..a9dcd6e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -296,6 +296,15 @@ importers:
       lint-staged:
         specifier: ^16.1.4
         version: 16.1.6
+      luna-console:
+        specifier: ^1.3.5
+        version: 1.3.6(luna-data-grid@1.6.5)(luna-dom-viewer@1.8.3)(luna-object-viewer@0.3.2)
+      luna-data-grid:
+        specifier: ^1.3.0
+        version: 1.6.5
+      luna-object-viewer:
+        specifier: ^0.3.1
+        version: 0.3.2
       monaco-editor-core:
         specifier: 0.52.2
         version: 0.52.2
@@ -3211,6 +3220,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==}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -3274,6 +3286,22 @@ packages:
     peerDependencies:
       vue: '>=3.0.1'
 
+  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.3:
+    resolution: {integrity: sha512-AcmT6T9z/UesheB26AYWoXXhu/knpkSj+cTu8hoHckmK9XrrbR4q8ChU6oQl5hBFxIfsDWqedfH+dUJVuE5NvQ==}
+
+  luna-object-viewer@0.3.2:
+    resolution: {integrity: sha512-m5zB+Wg3q23jLLijMFLHLuigp4rB9gPVI+MPop9yqAPGOSIdUo7uFRPZDt/Pbkbj34UNaHckdv1OUhWElxZzdQ==}
+
   magic-string@0.30.19:
     resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
 
@@ -8373,6 +8401,8 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  licia@1.48.0: {}
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
@@ -8450,6 +8480,25 @@ snapshots:
     dependencies:
       vue: 3.5.18(typescript@5.8.3)
 
+  luna-console@1.3.6(luna-data-grid@1.6.5)(luna-dom-viewer@1.8.3)(luna-object-viewer@0.3.2):
+    dependencies:
+      licia: 1.48.0
+      luna-data-grid: 1.6.5
+      luna-dom-viewer: 1.8.3
+      luna-object-viewer: 0.3.2
+
+  luna-data-grid@1.6.5:
+    dependencies:
+      licia: 1.48.0
+
+  luna-dom-viewer@1.8.3:
+    dependencies:
+      licia: 1.48.0
+
+  luna-object-viewer@0.3.2:
+    dependencies:
+      licia: 1.48.0
+
   magic-string@0.30.19:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
diff --git a/src/components/YvRepl.vue b/src/components/YvRepl.vue
index 80c2698..af7415d 100644
--- a/src/components/YvRepl.vue
+++ b/src/components/YvRepl.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Repl, useReplEditor } from '@calmecac-vue/repl';
+import LunaConsole from '@calmecac-vue/repl/luna-console';
 import Monaco from '@calmecac-vue/repl/monaco-editor';
 import { useIntervalFn } from '@vueuse/core';
 import * as MonacoCore from 'monaco-editor-core';
@@ -35,6 +36,8 @@ onMounted(() => {
         type: 'manual',
         message: 'Manual save from editor',
       });
+
+      // editor.getAction('editor.action.formatDocument')?.run();
     });
   }
   else {
@@ -52,6 +55,8 @@ onMounted(() => {
   >
     <Repl
       :editor="Monaco"
+      :console="LunaConsole"
+      :show-console="true"
       :show-compile-output="false"
       :show-import-map="false"
       :show-ts-config="false"

From 12ebbf48122d8d28778828e4eaf1ea1d119d1b16 Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Wed, 24 Sep 2025 18:54:16 +0200
Subject: [PATCH 02/18] Missing file.

---
 packages/vue-repl/src/output/LunaConsole.vue | 82 ++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 packages/vue-repl/src/output/LunaConsole.vue

diff --git a/packages/vue-repl/src/output/LunaConsole.vue b/packages/vue-repl/src/output/LunaConsole.vue
new file mode 100644
index 0000000..cfbfa3c
--- /dev/null
+++ b/packages/vue-repl/src/output/LunaConsole.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { inject, onMounted, ref, useTemplateRef, watch } from 'vue'
+import LunaConsole from 'luna-console'
+import { type LogPayload, injectKeyProps } from '../types'
+import 'luna-object-viewer/luna-object-viewer.css'
+import 'luna-data-grid/luna-data-grid.css'
+import 'luna-console/luna-console.css'
+
+const { store, theme } = inject(injectKeyProps)!
+const lunaRef = useTemplateRef('luna-ref')
+const lunaConsole = ref<LunaConsole>()
+
+onMounted(() => {
+  if (!lunaRef.value) return
+  lunaConsole.value = new LunaConsole(lunaRef.value, {
+    theme: theme.value || 'light',
+  })
+  store.value.executeLog = ({ logLevel, data = [] }: LogPayload) => {
+    ;(lunaConsole.value?.[logLevel] as any)?.(...data)
+  }
+  store.value.clearConsole = clearLunaConsole
+})
+
+function clearLunaConsole() {
+  lunaConsole.value?.clear(true)
+}
+
+watch(() => store.value.activeFile.code, clearLunaConsole)
+</script>
+
+<template>
+  <div class="console-wrapper">
+    <div class="console-title">
+      <strong>Console</strong>
+      <button class="clear-btn" @click="clearLunaConsole">clear</button>
+    </div>
+    <div class="luna-container">
+      <div ref="luna-ref" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.console-wrapper {
+  height: 100%;
+}
+
+.luna-container {
+  height: 100%;
+  width: 100%;
+  overflow: scroll;
+}
+.luna-console-theme-dark {
+  background-color: var(--bg) !important;
+}
+
+.console-title {
+  position: sticky;
+  top: 0;
+  border-bottom: 1px solid var(--border);
+  background-color: var(--bg);
+  padding-left: 10px;
+  color: var(--text-light);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.clear-btn {
+  font-size: 0.85rem;
+  font-family: var(--font-code);
+  color: #999;
+  padding: 0.4rem;
+  margin: 0.2rem;
+  background-color: var(--bg);
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  &:hover {
+    color: var(--color-branding);
+  }
+}
+</style>

From 7bd62ed6a0ad3428243dfe8d15ebdb90410df51f Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Wed, 24 Sep 2025 18:54:49 +0200
Subject: [PATCH 03/18] fix: Hiding container for controls when none of them
 are presented.

---
 packages/vue-repl/src/editor/EditorContainer.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/vue-repl/src/editor/EditorContainer.vue b/packages/vue-repl/src/editor/EditorContainer.vue
index 76e543a..05cbe5a 100644
--- a/packages/vue-repl/src/editor/EditorContainer.vue
+++ b/packages/vue-repl/src/editor/EditorContainer.vue
@@ -43,7 +43,10 @@ watch(showMessage, () => {
     />
     <Message v-show="showMessage" :err="store.errors[0]" />
 
-    <div class="editor-floating">
+    <div
+      v-show="editorOptions?.showErrorText !== false || editorOptions?.autoSaveText !== false"
+      class="editor-floating"
+    >
       <ToggleButton
         v-if="editorOptions?.showErrorText !== false"
         v-model="showMessage"

From c9e798e768fd8ea475ea507eac50dd28e6400db3 Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Wed, 24 Sep 2025 21:37:23 +0200
Subject: [PATCH 04/18] #15: Serializing and rebuilding the messages.

This enables elements to be rendered, for example.
---
 packages/vue-repl/package.json               |  10 +-
 packages/vue-repl/src/SplitPane.vue          |   3 +
 packages/vue-repl/src/output/LunaConsole.vue | 120 ++++++-
 packages/vue-repl/src/output/srcdoc.html     | 341 ++++++++++++++++---
 packages/vue-repl/test/main.ts               |   3 +-
 5 files changed, 412 insertions(+), 65 deletions(-)

diff --git a/packages/vue-repl/package.json b/packages/vue-repl/package.json
index 6932129..3275090 100644
--- a/packages/vue-repl/package.json
+++ b/packages/vue-repl/package.json
@@ -108,7 +108,12 @@
     "eslint-plugin-vue": "^10.4.0",
     "fflate": "^0.8.2",
     "hash-sum": "^2.0.0",
+    "licia": "^1.48.0",
     "lint-staged": "^16.1.4",
+    "luna-console": "^1.3.5",
+    "luna-data-grid": "^1.3.0",
+    "luna-dom-viewer": "^1.8.3",
+    "luna-object-viewer": "^0.3.1",
     "monaco-editor-core": "0.52.2",
     "prettier": "^3.6.2",
     "shiki": "^3.9.2",
@@ -122,9 +127,6 @@
     "volar-service-typescript": "0.0.65",
     "vscode-uri": "^3.1.0",
     "vue": "^3.5.18",
-    "vue-tsc": "3.0.7-alpha.1",
-     "luna-console": "^1.3.5",
-    "luna-data-grid": "^1.3.0",
-    "luna-object-viewer": "^0.3.1"
+    "vue-tsc": "3.0.7-alpha.1"
   }
 }
diff --git a/packages/vue-repl/src/SplitPane.vue b/packages/vue-repl/src/SplitPane.vue
index 8985631..71ae492 100644
--- a/packages/vue-repl/src/SplitPane.vue
+++ b/packages/vue-repl/src/SplitPane.vue
@@ -125,6 +125,9 @@ function changeViewSize() {
   font-size: 12px;
   color: var(--text-light);
   z-index: 100;
+  background-color: var(--bg-soft);
+  padding: 0.5rem;
+  border-radius: 4px;
 }
 .left {
   border-right: 1px solid var(--border);
diff --git a/packages/vue-repl/src/output/LunaConsole.vue b/packages/vue-repl/src/output/LunaConsole.vue
index cfbfa3c..381ae6e 100644
--- a/packages/vue-repl/src/output/LunaConsole.vue
+++ b/packages/vue-repl/src/output/LunaConsole.vue
@@ -3,8 +3,10 @@ import { inject, onMounted, ref, useTemplateRef, watch } from 'vue'
 import LunaConsole from 'luna-console'
 import { type LogPayload, injectKeyProps } from '../types'
 import 'luna-object-viewer/luna-object-viewer.css'
+import 'luna-dom-viewer/luna-dom-viewer.css'
 import 'luna-data-grid/luna-data-grid.css'
 import 'luna-console/luna-console.css'
+import toEl from 'licia/toEl'
 
 const { store, theme } = inject(injectKeyProps)!
 const lunaRef = useTemplateRef('luna-ref')
@@ -16,7 +18,8 @@ onMounted(() => {
     theme: theme.value || 'light',
   })
   store.value.executeLog = ({ logLevel, data = [] }: LogPayload) => {
-    ;(lunaConsole.value?.[logLevel] as any)?.(...data)
+    const deserialized = data.map(deserializeMessage)
+      ; (lunaConsole.value?.[logLevel] as any)?.(...deserialized)
   }
   store.value.clearConsole = clearLunaConsole
 })
@@ -26,6 +29,107 @@ function clearLunaConsole() {
 }
 
 watch(() => store.value.activeFile.code, clearLunaConsole)
+
+/**
+ * Lossless deserialization:
+ * - Recreates primitives as-is
+ * - Returns enriched objects for complex types (with __type metadata)
+ * - Keeps outerHTML, function source, accessor info, etc.
+ */
+function deserializeMessage(arg: any): any {
+  if (arg === null || arg === undefined) return arg
+  if (typeof arg !== 'object' || !arg.__type) return arg
+
+  switch (arg.__type) {
+    case 'undefined':
+      return undefined
+
+    case 'function': {
+      // Approximated with a Function constructor (non-invocable stub)
+      const fn = new Function(`/* [Function ${arg.name}] */`)
+        ; (fn as any).__isStub = true
+        ; (fn as any).__preview = `[Function ${arg.name}]${arg.isNative ? ' [native]' : ''}`
+      return fn
+    }
+
+    case 'symbol':
+      return Symbol(arg.description ?? '')
+
+    case 'bigint':
+      try {
+        return BigInt(arg.value)
+      } catch {
+        return Object(`BigInt(${arg.value})`) // fallback object wrapper
+      }
+
+     case 'date':
+      return arg.invalid ? new Date('Invalid Date') : new Date(arg.value).toString()
+
+    case 'regexp':
+      return new RegExp(arg.source, arg.flags)
+
+    case 'error': {
+      const e = new Error(arg.message)
+      e.name = arg.name
+        ; (e as any).stack = arg.stack
+      return e
+    }
+
+   case 'dom': {
+     if (arg.outerHTML) {
+       const el = toEl(arg.outerHTML)
+       Object.defineProperty(el, '__preview', {
+         value: arg.outerHTML.replace(/\n/g, ''), // one-liner preview
+         enumerable: false,
+       })
+       return el
+     }
+     if (arg.nodeType === 3 && arg.textContent) {
+       return document.createTextNode(arg.textContent)
+     }
+     return `[DOM ${arg.tagName || 'Unknown'}]`
+   }
+
+    case 'vue_component':
+      return `[VueComponent ${arg.name}]`
+
+    case 'array': {
+      const items = arg.items?.map(deserializeMessage) ?? []
+      if (arg.truncated) {
+        items.push(`...and ${arg.truncated} more items`)
+      }
+      return items
+    }
+
+    case 'object': {
+      const out: Record<string, any> = {}
+      for (const key in arg.properties) {
+        const prop = arg.properties[key]
+        if (prop && 'value' in prop) {
+          out[key] = deserializeMessage(prop.value)
+        }
+      }
+      if (arg.truncatedProperties) {
+        out['__truncated__'] = `${arg.truncatedProperties} more properties`
+      }
+      // Method, not property
+      Object.defineProperty(out, 'toString', {
+        value: () => `[Object ${arg.constructor}]`,
+        enumerable: false,
+      })
+      return out
+    }
+
+    case 'circular':
+      return `[Circular ${arg.path ?? ''}]`
+
+    case 'accessor':
+      return `[Getter/Setter]`
+
+    default:
+      return `[Unrecognized ${arg.__type}]`
+  }
+}
 </script>
 
 <template>
@@ -48,8 +152,9 @@ watch(() => store.value.activeFile.code, clearLunaConsole)
 .luna-container {
   height: 100%;
   width: 100%;
-  overflow: scroll;
+  overflow: auto;
 }
+
 .luna-console-theme-dark {
   background-color: var(--bg) !important;
 }
@@ -69,14 +174,15 @@ watch(() => store.value.activeFile.code, clearLunaConsole)
 .clear-btn {
   font-size: 0.85rem;
   font-family: var(--font-code);
-  color: #999;
-  padding: 0.4rem;
+  color: var(--text-light);
+  padding: 0.3rem;
   margin: 0.2rem;
   background-color: var(--bg);
   border-radius: 4px;
   border: 1px solid var(--border);
-  &:hover {
-    color: var(--color-branding);
-  }
+}
+
+.clear-btn:hover {
+  color: var(--color-branding);
 }
 </style>
diff --git a/packages/vue-repl/src/output/srcdoc.html b/packages/vue-repl/src/output/srcdoc.html
index bddb0b3..4ce4690 100644
--- a/packages/vue-repl/src/output/srcdoc.html
+++ b/packages/vue-repl/src/output/srcdoc.html
@@ -31,6 +31,233 @@
           return Promise.resolve(window.__modules__[key])
         }
 
+        // Enhanced serialization for Luna Console
+        function serializeForPostMessage(data, maxDepth = 10, currentDepth = 0) {
+          if (currentDepth >= maxDepth) return '[Max Depth Reached]'
+          if (data === null) return null
+          if (data === undefined) return { __type: 'undefined' }
+          
+          const dataType = typeof data
+          
+          // Handle primitives
+          if (dataType === 'boolean' || dataType === 'number' || dataType === 'string') {
+            return data
+          }
+          
+          // Handle functions
+          if (dataType === 'function') {
+            return {
+              __type: 'function',
+              name: data.name || 'anonymous',
+              source: data.toString().substring(0, 500),
+              isNative: data.toString().includes('[native code]')
+            }
+          }
+          
+          // Handle symbols
+          if (dataType === 'symbol') {
+            return {
+              __type: 'symbol',
+              description: data.description,
+              toString: data.toString()
+            }
+          }
+          
+          // Handle bigint
+          if (dataType === 'bigint') {
+            return {
+              __type: 'bigint',
+              value: data.toString()
+            }
+          }
+          
+          // For objects, we need to be more careful
+          if (dataType === 'object') {
+            // Use WeakSet to track circular references within this serialization call
+            const seen = serializeForPostMessage._seen || (serializeForPostMessage._seen = new WeakSet())
+            
+            if (seen.has(data)) {
+              return { __type: 'circular', toString: Object.prototype.toString.call(data) }
+            }
+            seen.add(data)
+            
+            try {
+              // Handle dates
+              if (data instanceof Date) {
+                return {
+                  __type: 'date',
+                  value: data.toISOString(),
+                  invalid: isNaN(data.getTime())
+                }
+              }
+              
+              // Handle regexps
+              if (data instanceof RegExp) {
+                return {
+                  __type: 'regexp',
+                  source: data.source,
+                  flags: data.flags
+                }
+              }
+              
+              // Handle errors
+              if (data instanceof Error) {
+                return {
+                  __type: 'error',
+                  name: data.name,
+                  message: data.message,
+                  stack: data.stack
+                }
+              }
+              
+              // Handle DOM nodes
+              if (data.nodeType) {
+                const result = {
+                  __type: 'dom',
+                  nodeType: data.nodeType,
+                  nodeName: data.nodeName
+                }
+                
+                if (data.nodeType === 1) { // Element node
+                  result.tagName = data.tagName
+                  result.className = data.className
+                  result.id = data.id
+                  result.outerHTML = data.outerHTML?.substring(0, 200)
+                  result.attributes = Array.from(data.attributes || []).map(attr => ({
+                    name: attr.name,
+                    value: attr.value
+                  }))
+                } else if (data.nodeType === 3) { // Text node
+                  result.textContent = data.textContent
+                }
+                
+                return result
+              }
+              
+              // Handle Vue component proxies
+              if (isComponentProxy(data)) {
+                return {
+                  __type: 'vue_component',
+                  name: data.$options?.name || data.$.type?.name || 'Anonymous',
+                  props: serializeForPostMessage(data.$props, maxDepth, currentDepth + 1),
+                  data: serializeForPostMessage(data.$data, maxDepth, currentDepth + 1)
+                }
+              }
+              
+              // Handle arrays
+              if (Array.isArray(data)) {
+                const result = {
+                  __type: 'array',
+                  length: data.length,
+                  items: []
+                }
+                
+                // Only serialize first 100 items for performance
+                const itemsToSerialize = Math.min(data.length, 100)
+                for (let i = 0; i < itemsToSerialize; i++) {
+                  try {
+                    result.items[i] = serializeForPostMessage(data[i], maxDepth, currentDepth + 1)
+                  } catch (e) {
+                    result.items[i] = { __type: 'error', message: 'Serialization failed' }
+                  }
+                }
+                
+                if (data.length > 100) {
+                  result.truncated = data.length - 100
+                }
+                
+                return result
+              }
+              
+              // Handle plain objects and other object types
+              const result = {
+                __type: 'object',
+                constructor: data.constructor?.name,
+                toString: Object.prototype.toString.call(data),
+                properties: {}
+              }
+              
+              // Get all property names (including non-enumerable)
+              const allKeys = new Set([
+                ...Object.keys(data),
+                ...Object.getOwnPropertyNames(data)
+              ])
+              
+              let propertyCount = 0
+              const maxProperties = 50 // Limit properties for performance
+              
+              for (const key of allKeys) {
+                if (propertyCount >= maxProperties) {
+                  result.truncatedProperties = allKeys.size - maxProperties
+                  break
+                }
+                
+                try {
+                  const descriptor = Object.getOwnPropertyDescriptor(data, key)
+                  if (descriptor) {
+                    const prop = {
+                      enumerable: descriptor.enumerable,
+                      configurable: descriptor.configurable,
+                      writable: descriptor.writable
+                    }
+                    
+                    if (descriptor.get || descriptor.set) {
+                      prop.getter = !!descriptor.get
+                      prop.setter = !!descriptor.set
+                      prop.value = { __type: 'accessor' }
+                    } else {
+                      prop.value = serializeForPostMessage(descriptor.value, maxDepth, currentDepth + 1)
+                    }
+                    
+                    result.properties[key] = prop
+                  }
+                } catch (e) {
+                  result.properties[key] = {
+                    value: { __type: 'error', message: 'Property access failed' },
+                    enumerable: false
+                  }
+                }
+                propertyCount++
+              }
+              
+              return result
+              
+            } finally {
+              seen.delete(data)
+            }
+          }
+          
+          return { __type: 'unknown', typeof: dataType }
+        }
+
+        // Helper function to detect Vue component proxy
+        function isComponentProxy(value) {
+          return (
+            value &&
+            typeof value === 'object' &&
+            value.__v_skip === true &&
+            typeof value.$nextTick === 'function' &&
+            value.$ &&
+            value._
+          )
+        }
+
+        // Fallback toString function for unsupported types
+        function toString(value) {
+          if (value instanceof Error) {
+            return value.message
+          }
+          for (const fn of [
+            String,
+            (v) => Object.prototype.toString.call(v),
+            (v) => typeof v,
+          ]) {
+            try {
+              return fn(value)
+            } catch (err) {}
+          }
+        }
+
         async function handle_message(ev) {
           let { action, cmd_id } = ev.data
           const send_message = (payload) =>
@@ -123,7 +350,7 @@
         window.onerror = function (msg, url, lineNo, columnNo, error) {
           // ignore errors from import map polyfill - these are necessary for
           // it to detect browser support
-          if (msg.includes('module specifier “vue”')) {
+          if (msg.includes('module specifier "vue"')) {
             // firefox only error, ignore
             return false
           }
@@ -158,8 +385,11 @@
             )
           }
         })
+
         const errorColorStr = 'color: #fb2c36'
         const errorMsg = 'please open the devtool to see correctly this log'
+        
+        // Enhanced console methods with proper serialization
         ;[
           'clear',
           'log',
@@ -188,21 +418,51 @@
               }
             }
             original(...args)
-            const postMessage = () =>
-              parent.postMessage({ action: 'console', level, args }, '*')
+            
+            // Enhanced serialization for Luna Console
             try {
-              postMessage()
-            } catch {
-              args = args.map(toString)
-              if (!args?.[0]?.startsWith('[Vue warn]'))
-                args = [
-                  `[vue-repl]: %c Cannot clone the message, ${errorMsg}. Supported types are listed here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#javascript_types`,
-                  errorColorStr,
-                ]
-              postMessage()
+              // Clear the WeakSet for each console call to avoid memory leaks
+              serializeForPostMessage._seen = new WeakSet()
+              
+              const serializedArgs = args.map(arg => serializeForPostMessage(arg))
+              
+              parent.postMessage({ 
+                action: 'console', 
+                level, 
+                args: serializedArgs,
+                timestamp: Date.now()
+              }, '*')
+              
+            } catch (error) {
+              // Fallback to original behavior if serialization completely fails
+              console.warn('Serialization failed:', error)
+              try {
+                const fallbackArgs = args.map(toString)
+                parent.postMessage({ 
+                  action: 'console', 
+                  level, 
+                  args: fallbackArgs.length ? fallbackArgs : [
+                    `[vue-repl]: %c Serialization failed, ${errorMsg}`,
+                    errorColorStr,
+                  ],
+                  timestamp: Date.now()
+                }, '*')
+              } catch (fallbackError) {
+                parent.postMessage({ 
+                  action: 'console', 
+                  level: 'error', 
+                  args: [
+                    `[vue-repl]: %c Console message could not be displayed, ${errorMsg}`,
+                    errorColorStr,
+                  ],
+                  timestamp: Date.now()
+                }, '*')
+              }
             }
           }
         })
+        
+        // Console group methods
         ;[
           { method: 'group', action: 'console_group' },
           { method: 'groupEnd', action: 'console_group_end' },
@@ -210,58 +470,33 @@
         ].forEach((group_action) => {
           const original = console[group_action.method]
           console[group_action.method] = (label) => {
-            parent.postMessage({ action: group_action.action, label }, '*')
+            parent.postMessage({ 
+              action: group_action.action, 
+              label: label ? serializeForPostMessage(label) : undefined,
+              timestamp: Date.now()
+            }, '*')
 
             original(label)
           }
         })
+        
+        // Unsupported console methods
         ;['profile', 'profileEnd', 'trace', 'dirXml'].forEach((level) => {
           const original = console[level]
-          console[level] = () => {
-            original()
-            const args = [
+          console[level] = (...args) => {
+            original(...args)
+            const fallbackArgs = [
               `[vue-repl]: %c Cannot handle "${level}" log, ${errorMsg}.`,
               errorColorStr,
             ]
-            parent.postMessage({ action: 'console', level: 'log', args }, '*')
+            parent.postMessage({ 
+              action: 'console', 
+              level: 'log', 
+              args: fallbackArgs,
+              timestamp: Date.now()
+            }, '*')
           }
         })
-
-        function toString(value) {
-          if (value instanceof Error) {
-            return value.message
-          }
-          for (const fn of [
-            String,
-            (v) => Object.prototype.toString.call(v),
-            (v) => typeof v,
-          ]) {
-            try {
-              return fn(value)
-            } catch (err) {}
-          }
-        }
-
-        function isComponentProxy(value) {
-          return (
-            value &&
-            typeof value === 'object' &&
-            value.__v_skip === true &&
-            typeof value.$nextTick === 'function' &&
-            value.$ &&
-            value._
-          )
-        }
-
-        function stringify(args) {
-          try {
-            return JSON.stringify(args, (key, value) => {
-              return isComponentProxy(value) ? '{component proxy}' : value
-            })
-          } catch (error) {
-            return null
-          }
-        }
       })()
     </script>
 
diff --git a/packages/vue-repl/test/main.ts b/packages/vue-repl/test/main.ts
index d91fec3..5012249 100644
--- a/packages/vue-repl/test/main.ts
+++ b/packages/vue-repl/test/main.ts
@@ -56,10 +56,11 @@ const App = {
       h(Repl, {
         store,
         theme: theme.value,
-        previewTheme: previewTheme.value,
+        previewTheme: true,
         editor: MonacoEditor,
         showOpenSourceMap: true,
         // layout: 'vertical',
+
         ssr: true,
         showConsole: true,
         showSsrOutput: true,

From 6b4d8e4eec1e37bc08a6569493249493359180b0 Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Wed, 24 Sep 2025 21:37:49 +0200
Subject: [PATCH 05/18] Updating lock file

---
 pnpm-lock.yaml | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a9dcd6e..5564b87 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -120,6 +120,9 @@ importers:
       jiti:
         specifier: ^2.4.2
         version: 2.5.1
+      licia:
+        specifier: ^1.48.0
+        version: 1.48.0
       motion-v:
         specifier: ^1.7.1
         version: 1.7.1(@vueuse/core@13.7.0(vue@3.5.18(typescript@5.8.3)))(vue@3.5.18(typescript@5.8.3))
@@ -302,6 +305,9 @@ importers:
       luna-data-grid:
         specifier: ^1.3.0
         version: 1.6.5
+      luna-dom-viewer:
+        specifier: ^1.8.3
+        version: 1.8.3
       luna-object-viewer:
         specifier: ^0.3.1
         version: 0.3.2

From 1bce669ef0784e1292e0695537c8206ca6d3c55b Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Wed, 24 Sep 2025 21:39:39 +0200
Subject: [PATCH 06/18] Updating lock file once more

---
 pnpm-lock.yaml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5564b87..7e14c08 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -120,9 +120,6 @@ importers:
       jiti:
         specifier: ^2.4.2
         version: 2.5.1
-      licia:
-        specifier: ^1.48.0
-        version: 1.48.0
       motion-v:
         specifier: ^1.7.1
         version: 1.7.1(@vueuse/core@13.7.0(vue@3.5.18(typescript@5.8.3)))(vue@3.5.18(typescript@5.8.3))
@@ -296,6 +293,9 @@ importers:
       hash-sum:
         specifier: ^2.0.0
         version: 2.0.0
+      licia:
+        specifier: ^1.48.0
+        version: 1.48.0
       lint-staged:
         specifier: ^16.1.4
         version: 16.1.6

From 7947ca03908ce5fcd7b29998be6825ee7b5a11d6 Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Thu, 25 Sep 2025 18:16:50 +0200
Subject: [PATCH 07/18] #15: Adding some configs to show and hide the console
 and to display horizontally/vertically within the preview

---
 packages/vue-repl/src/Repl.vue               | 22 +++++++++++---------
 packages/vue-repl/src/output/LunaConsole.vue |  3 ++-
 packages/vue-repl/src/output/Output.vue      |  4 +++-
 packages/vue-repl/test/main.ts               |  5 +++--
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/vue-repl/src/Repl.vue b/packages/vue-repl/src/Repl.vue
index a82b2d0..e5ae627 100644
--- a/packages/vue-repl/src/Repl.vue
+++ b/packages/vue-repl/src/Repl.vue
@@ -13,14 +13,13 @@ import {
 } from './types'
 import EditorContainer from './editor/EditorContainer.vue'
 import type * as monaco from 'monaco-editor-core'
+import LunaConsole from './output/LunaConsole.vue'
 
 export interface Props {
   theme?: 'dark' | 'light'
   previewTheme?: boolean
   editor: EditorComponentType
-    console?: ConsoleComponentType
-
-
+  console?: ConsoleComponentType
   store?: Store
   autoResize?: boolean
   showCompileOutput?: boolean
@@ -28,11 +27,11 @@ export interface Props {
   showImportMap?: boolean
   showSsrOutput?: boolean
   showTsConfig?: boolean
-    showConsole?: boolean
-
-
+  showConsole?: boolean
   clearConsole?: boolean
+  showOutput?: boolean
   layout?: 'horizontal' | 'vertical'
+  outputLayout?: 'horizontal' | 'vertical'
   layoutReverse?: boolean
   ssr?: boolean
   previewOptions?: {
@@ -62,19 +61,20 @@ const props = withDefaults(defineProps<Props>(), {
   theme: 'light',
   previewTheme: false,
   store: () => useStore(),
+  console: LunaConsole,
   autoResize: true,
   showCompileOutput: true,
   showOpenSourceMap: false,
   showImportMap: true,
   showSsrOutput: false,
   showTsConfig: true,
-    showConsole: false,
-
-
+  showOutput: true,
+  showConsole: false,
   clearConsole: true,
   layoutReverse: false,
   ssr: false,
   layout: 'horizontal',
+  outputLayout: 'vertical',
   previewOptions: () => ({}),
   editorOptions: () => ({}),
   splitPaneOptions: () => ({}),
@@ -119,7 +119,7 @@ defineExpose({ reload })
 
 <template>
   <div class="vue-repl">
-    <SplitPane :layout="layout">
+    <SplitPane v-if="showOutput" :layout="layout">
       <template #[editorSlotName]>
         <EditorContainer :editor-component="editor" />
       </template>
@@ -128,6 +128,8 @@ defineExpose({ reload })
           ref="output"
           :editor-component="editor"
           :console-component="consoleWrapper"
+          :show-output="props.showOutput"
+          :layout="outputLayout"
           :show-compile-output="props.showCompileOutput"
           :show-open-source-map="props.showOpenSourceMap"
           :show-ssr-output="props.showSsrOutput"
diff --git a/packages/vue-repl/src/output/LunaConsole.vue b/packages/vue-repl/src/output/LunaConsole.vue
index 381ae6e..99d6384 100644
--- a/packages/vue-repl/src/output/LunaConsole.vue
+++ b/packages/vue-repl/src/output/LunaConsole.vue
@@ -28,7 +28,8 @@ function clearLunaConsole() {
   lunaConsole.value?.clear(true)
 }
 
-watch(() => store.value.activeFile.code, clearLunaConsole)
+// maybe make this configurable, but don't do it by default
+// watch(() => store.value.activeFile.code, clearLunaConsole)
 
 /**
  * Lossless deserialization:
diff --git a/packages/vue-repl/src/output/Output.vue b/packages/vue-repl/src/output/Output.vue
index 1dfb1be..15d4630 100644
--- a/packages/vue-repl/src/output/Output.vue
+++ b/packages/vue-repl/src/output/Output.vue
@@ -17,6 +17,8 @@ const props = defineProps<{
   showOpenSourceMap?: boolean
   showSsrOutput?: boolean
   ssr: boolean
+  showOutput: boolean
+  layout: 'horizontal' | 'vertical'
 }>()
 
 const { store, showConsole } = inject(injectKeyProps)!
@@ -75,7 +77,7 @@ defineExpose({ reload, previewRef })
   </div>
 
   <div class="output-container">
-    <SplitPane v-if="showConsole" layout="vertical">
+    <SplitPane v-if="showConsole" :layout="layout">
       <template #left>
         <Preview ref="preview" :show="mode === 'preview'" :ssr="ssr" />
       </template>
diff --git a/packages/vue-repl/test/main.ts b/packages/vue-repl/test/main.ts
index 5012249..7db59c7 100644
--- a/packages/vue-repl/test/main.ts
+++ b/packages/vue-repl/test/main.ts
@@ -57,10 +57,11 @@ const App = {
         store,
         theme: theme.value,
         previewTheme: true,
+        showOutput: true,
         editor: MonacoEditor,
         showOpenSourceMap: true,
-        // layout: 'vertical',
-
+        layout: 'vertical',
+        outputLayout: 'horizontal',
         ssr: true,
         showConsole: true,
         showSsrOutput: true,

From 3657836586cb2ee51eb05b0a12d48ace26b38844 Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Thu, 25 Sep 2025 20:24:00 +0200
Subject: [PATCH 08/18] #15 #28 Adding toggles for the different layout configs

For some reason I had to rename LunaConsole.vue to luna-console.vue or vite would lose my luna-console.css and break the built component (not the build process, but the dist files got messed up and yv would not load it).
---
 packages/vue-repl/src/Repl.vue                |  4 +-
 .../{LunaConsole.vue => luna-console.vue}     |  2 +-
 packages/vue-repl/test/main.ts                |  4 +-
 packages/vue-repl/vite.config.ts              |  2 +-
 src/components/YvHeader.vue                   | 95 +++++++++++++++++--
 src/components/YvRepl.vue                     |  4 +-
 src/composables/useSettingsStore.ts           | 32 ++++++-
 uno.config.ts                                 |  2 +-
 8 files changed, 131 insertions(+), 14 deletions(-)
 rename packages/vue-repl/src/output/{LunaConsole.vue => luna-console.vue} (98%)

diff --git a/packages/vue-repl/src/Repl.vue b/packages/vue-repl/src/Repl.vue
index e5ae627..aebabf9 100644
--- a/packages/vue-repl/src/Repl.vue
+++ b/packages/vue-repl/src/Repl.vue
@@ -13,7 +13,7 @@ import {
 } from './types'
 import EditorContainer from './editor/EditorContainer.vue'
 import type * as monaco from 'monaco-editor-core'
-import LunaConsole from './output/LunaConsole.vue'
+import LunaConsole from './output/luna-console.vue'
 
 export interface Props {
   theme?: 'dark' | 'light'
@@ -137,6 +137,8 @@ defineExpose({ reload })
         />
       </template>
     </SplitPane>
+
+    <EditorContainer v-else :editor-component="editor" />
   </div>
 </template>
 
diff --git a/packages/vue-repl/src/output/LunaConsole.vue b/packages/vue-repl/src/output/luna-console.vue
similarity index 98%
rename from packages/vue-repl/src/output/LunaConsole.vue
rename to packages/vue-repl/src/output/luna-console.vue
index 99d6384..1a37eec 100644
--- a/packages/vue-repl/src/output/LunaConsole.vue
+++ b/packages/vue-repl/src/output/luna-console.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, onMounted, ref, useTemplateRef, watch } from 'vue'
+import { inject, onMounted, ref, useTemplateRef } from 'vue'
 import LunaConsole from 'luna-console'
 import { type LogPayload, injectKeyProps } from '../types'
 import 'luna-object-viewer/luna-object-viewer.css'
diff --git a/packages/vue-repl/test/main.ts b/packages/vue-repl/test/main.ts
index 7db59c7..a441581 100644
--- a/packages/vue-repl/test/main.ts
+++ b/packages/vue-repl/test/main.ts
@@ -3,7 +3,7 @@ import { createApp, h, ref, watchEffect } from 'vue'
 import { type OutputModes, Repl, useStore, useVueImportMap } from '../src'
 // @ts-ignore
 import MonacoEditor from '../src/editor/MonacoEditor.vue'
-import LunaConsole from '../src/output/LunaConsole.vue'
+import LunaConsole from '../src/output/luna-console.vue'
 // @ts-ignore
 
 const window = globalThis.window as any
@@ -57,7 +57,7 @@ const App = {
         store,
         theme: theme.value,
         previewTheme: true,
-        showOutput: true,
+        showOutput: false,
         editor: MonacoEditor,
         showOpenSourceMap: true,
         layout: 'vertical',
diff --git a/packages/vue-repl/vite.config.ts b/packages/vue-repl/vite.config.ts
index 6a52d23..be9208f 100644
--- a/packages/vue-repl/vite.config.ts
+++ b/packages/vue-repl/vite.config.ts
@@ -60,7 +60,7 @@ export default mergeConfig(base, {
         core: './src/core.ts',
         'monaco-editor': './src/editor/MonacoEditor.vue',
         'codemirror-editor': './src/editor/CodeMirrorEditor.vue',
-        'luna-console': './src/output/LunaConsole.vue',
+        'luna-console': './src/output/luna-console.vue',
       },
       formats: ['es'],
       fileName: () => '[name].js',
diff --git a/src/components/YvHeader.vue b/src/components/YvHeader.vue
index f3a5a81..6323e02 100644
--- a/src/components/YvHeader.vue
+++ b/src/components/YvHeader.vue
@@ -1,9 +1,23 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { useFileManagerStore } from '@/composables/useFileManagerStore';
 import { useSettingsStore } from '@/composables/useSettingsStore';
+
+import Popover from './ui/popover/Popover.vue';
+import PopoverContent from './ui/popover/PopoverContent.vue';
+import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
 import YvOnlineStatus from './YvOnlineStatus.vue';
 
-const { settings, toggleLayout, toggleTheme } = useSettingsStore();
+const {
+  settings,
+  toggleLayout,
+  toggleTheme,
+  toggleOutput,
+  toggleConsole,
+  toggleOutputLayout,
+} = useSettingsStore();
+
+const isLayoutPopoverOpen = ref(false);
 
 const fm = useFileManagerStore();
 </script>
@@ -12,7 +26,7 @@ const fm = useFileManagerStore();
   <div>
     <nav
       flex="~ justify-between"
-      relative p-4 pr-6 z-999
+      relative p-4 pr-6 z-40
       shadow-md
       bg="light dark:dark-900"
       border="b neutral-300/10"
@@ -45,15 +59,84 @@ const fm = useFileManagerStore();
         </button>
 
         <button
-          v-tooltip.bottom="`${fm.isDrawerOpen ? 'Close' : 'Open'} history`" class="sc-toolbar-btn"
+          v-tooltip.bottom="`${fm.isDrawerOpen ? 'Close' : 'Open'} history`"
+          class="sc-toolbar-btn"
           @click="fm.isDrawerOpen = !fm.isDrawerOpen"
         >
           <div class="i-mynaui:clock-hexagon hover:i-mynaui:clock-hexagon-solid" :class="fm.isDrawerOpen ? 'i-mynaui:clock-hexagon-solid' : 'i-mynaui:clock-hexagon'" />
         </button>
 
-        <button v-tooltip.bottom-end="`Switch to ${settings.layout === 'vertical' ? 'horizontal' : 'vertical'} layout`" sc-toolbar-btn @click="toggleLayout">
-          <div :class="settings.layout === 'vertical' ? 'i-mynaui:rectangle hover:i-mynaui:rectangle-solid' : 'i-mynaui:rectangle-vertical hover:i-mynaui:rectangle-vertical-solid'" />
-        </button>
+        <Popover v-model:open="isLayoutPopoverOpen">
+          <PopoverTrigger>
+            <button
+              v-tooltip.bottom="`Layout`"
+              class="sc-toolbar-btn"
+            >
+              <div
+                class="cursor-pointer i-mynaui:layout hover:i-mynaui:layout-solid"
+                :class="isLayoutPopoverOpen
+                  ? 'i-mynaui:layout-solid'
+                  : 'i-mynaui:layout'"
+              />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent w-auto>
+            <div flex flex-col gap-3 text-neutral-500>
+              <button
+                v-tooltip.left-start="`Switch to ${settings.layout === 'vertical' ? 'horizontal' : 'vertical'} layout`"
+                sc-toolbar-btn
+                @click="toggleLayout"
+              >
+                <div
+                  :class="settings.layout === 'vertical'
+                    ? 'i-mynaui:rectangle hover:i-mynaui:rectangle-solid'
+                    : 'i-mynaui:rectangle-vertical hover:i-mynaui:rectangle-vertical-solid'"
+                />
+              </button>
+
+              <button
+                v-tooltip.left-start="`${settings.showOutput ? 'Hide' : 'Show'} preview`"
+                sc-toolbar-btn
+                @click="toggleOutput"
+              >
+                <div
+                  class="hover:i-mynaui-desktop-solid"
+                  :class="settings.showOutput
+                    ? 'i-mynaui-desktop-solid'
+                    : 'i-mynaui-desktop'"
+                />
+              </button>
+
+              <button
+                v-tooltip.left-start="`${settings.showConsole ? 'Hide' : 'Show'} console`"
+                sc-toolbar-btn
+                :disabled="!settings.showOutput"
+                @click="toggleConsole"
+              >
+                <div
+                  class="hover:i-mynaui-terminal-solid"
+                  :class="settings.showConsole
+                    ? 'i-mynaui-terminal-solid'
+                    : 'i-mynaui-terminal'"
+                />
+              </button>
+
+              <button
+                v-tooltip.left-start="`Switch to ${settings.outputLayout === 'vertical' ? 'horizontal' : 'vertical'} output layout`"
+                :disabled="!settings.showConsole || !settings.showOutput"
+                sc-toolbar-btn
+                @click="toggleOutputLayout"
+              >
+                <div
+                  class="hover:i-mynaui-square-half-solid"
+                  :class="settings.outputLayout === 'vertical'
+                    ? 'i-mynaui-square-half rotate-90'
+                    : 'i-mynaui-square-half'"
+                />
+              </button>
+            </div>
+          </PopoverContent>
+        </Popover>
 
         <button
           v-tooltip.bottom-end="`Switch to ${settings.theme === 'dark' ? 'light' : 'dark'} theme`"
diff --git a/src/components/YvRepl.vue b/src/components/YvRepl.vue
index af7415d..662e5fe 100644
--- a/src/components/YvRepl.vue
+++ b/src/components/YvRepl.vue
@@ -56,12 +56,14 @@ onMounted(() => {
     <Repl
       :editor="Monaco"
       :console="LunaConsole"
-      :show-console="true"
+      :show-console="settings.showConsole"
       :show-compile-output="false"
       :show-import-map="false"
       :show-ts-config="false"
       :theme="settings.theme"
       :layout="settings.layout"
+      :show-output="settings.showOutput"
+      :output-layout="settings.outputLayout"
       :editor-options="{
         autoSaveText: false,
         showErrorText: false,
diff --git a/src/composables/useSettingsStore.ts b/src/composables/useSettingsStore.ts
index 4ff9596..dfefa79 100644
--- a/src/composables/useSettingsStore.ts
+++ b/src/composables/useSettingsStore.ts
@@ -9,16 +9,25 @@ type YVSettingsStore = {
   settings: typeof settings;
   toggleLayout: () => void;
   toggleTheme: () => void;
+  toggleOutput: () => void;
+  toggleConsole: () => void;
+  toggleOutputLayout?: () => void;
 };
 
 type YVSettings = {
   theme: RemovableRef<Theme>;
   layout: RemovableRef<Layout>;
+  showOutput?: RemovableRef<boolean>;
+  showConsole?: RemovableRef<boolean>;
+  outputLayout?: RemovableRef<Layout>;
 };
 
 const settings = ref<YVSettings>({
   theme: useStorage<Theme>('yehyecoa-vue-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
   layout: useStorage<Layout>('yehyecoa-vue-layout', 'horizontal'),
+  showOutput: useStorage<boolean>('yehyecoa-vue-show-output', true),
+  showConsole: useStorage<boolean>('yehyecoa-vue-show-console', true),
+  outputLayout: useStorage<Layout>('yehyecoa-vue-output-layout', 'vertical'),
 });
 
 export function useSettingsStore(): YVSettingsStore {
@@ -41,5 +50,26 @@ export function useSettingsStore(): YVSettingsStore {
     });
   }
 
-  return { settings, toggleLayout, toggleTheme };
+  function toggleOutput(): void {
+    settings.value.showOutput = !settings.value.showOutput;
+  }
+
+  function toggleConsole(): void {
+    settings.value.showConsole = !settings.value.showConsole;
+  }
+
+  function toggleOutputLayout(): void {
+    settings.value.outputLayout = settings.value.outputLayout === 'horizontal'
+      ? 'vertical'
+      : 'horizontal';
+  }
+
+  return {
+    settings,
+    toggleLayout,
+    toggleTheme,
+    toggleOutput,
+    toggleConsole,
+    toggleOutputLayout,
+  };
 }
diff --git a/uno.config.ts b/uno.config.ts
index f997bd5..9e36191 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -68,7 +68,7 @@ export default defineConfig({
     transformerDirectives(),
   ],
   shortcuts: {
-    'sc-toolbar-btn': 'cursor-pointer hover:text-foreground/80 hover:scale-120 transition duration-200',
+    'sc-toolbar-btn': 'cursor-pointer hover:text-foreground/80 hover:scale-120 transition duration-200 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100',
     'sc-btn-base': 'p-2 rounded-lg bg-transparent',
     'btn': 'sc-btn-base bg-neutral-800 text-neutral-200 dark:bg-neutral-200 dark:text-dark-900',
     'sc-btn-outline': 'sc-btn-base outline-solid outline-neutral text-neutral hover',

From 4bda50ddad8b900605c3df5bae0f896b16c06512 Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Fri, 26 Sep 2025 14:50:26 +0200
Subject: [PATCH 09/18] #15: Adding some animations

Working on some styles too
---
 packages/vue-repl/src/output/luna-console.vue |   1 +
 src/components/YvHeader.vue                   | 150 +++++++++++-------
 src/components/ui/popover/PopoverContent.vue  |  20 ++-
 src/styles/globals.css                        |   3 +-
 uno.config.ts                                 |   2 +-
 5 files changed, 117 insertions(+), 59 deletions(-)

diff --git a/packages/vue-repl/src/output/luna-console.vue b/packages/vue-repl/src/output/luna-console.vue
index 1a37eec..e8805c1 100644
--- a/packages/vue-repl/src/output/luna-console.vue
+++ b/packages/vue-repl/src/output/luna-console.vue
@@ -148,6 +148,7 @@ function deserializeMessage(arg: any): any {
 <style scoped>
 .console-wrapper {
   height: 100%;
+  border-left: 1px solid var(--border);
 }
 
 .luna-container {
diff --git a/src/components/YvHeader.vue b/src/components/YvHeader.vue
index 6323e02..da06aa4 100644
--- a/src/components/YvHeader.vue
+++ b/src/components/YvHeader.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { AnimatePresence, motion } from 'motion-v';
 import { ref } from 'vue';
 import { useFileManagerStore } from '@/composables/useFileManagerStore';
 import { useSettingsStore } from '@/composables/useSettingsStore';
@@ -20,6 +21,25 @@ const {
 const isLayoutPopoverOpen = ref(false);
 
 const fm = useFileManagerStore();
+
+const groupVariants = {
+  initial: { opacity: 0, y: 16 },
+  enter: {
+    opacity: 1,
+    y: 0,
+    transition: { staggerChildren: 0.08, delayChildren: 0.05 },
+  },
+  leave: {
+    opacity: 0,
+    y: 16,
+    transition: { staggerChildren: 0.08, delayChildren: 0.05, staggerDirection: -1 },
+  },
+};
+const itemVariants = {
+  initial: { opacity: 0, y: 0 },
+  enter: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 16 },
+};
 </script>
 
 <template>
@@ -80,61 +100,83 @@ const fm = useFileManagerStore();
               />
             </button>
           </PopoverTrigger>
-          <PopoverContent w-auto>
-            <div flex flex-col gap-3 text-neutral-500>
-              <button
-                v-tooltip.left-start="`Switch to ${settings.layout === 'vertical' ? 'horizontal' : 'vertical'} layout`"
-                sc-toolbar-btn
-                @click="toggleLayout"
-              >
-                <div
-                  :class="settings.layout === 'vertical'
-                    ? 'i-mynaui:rectangle hover:i-mynaui:rectangle-solid'
-                    : 'i-mynaui:rectangle-vertical hover:i-mynaui:rectangle-vertical-solid'"
-                />
-              </button>
-
-              <button
-                v-tooltip.left-start="`${settings.showOutput ? 'Hide' : 'Show'} preview`"
-                sc-toolbar-btn
-                @click="toggleOutput"
-              >
-                <div
-                  class="hover:i-mynaui-desktop-solid"
-                  :class="settings.showOutput
-                    ? 'i-mynaui-desktop-solid'
-                    : 'i-mynaui-desktop'"
-                />
-              </button>
-
-              <button
-                v-tooltip.left-start="`${settings.showConsole ? 'Hide' : 'Show'} console`"
-                sc-toolbar-btn
-                :disabled="!settings.showOutput"
-                @click="toggleConsole"
+          <PopoverContent class="w-auto">
+            <AnimatePresence>
+              <motion.div
+                v-if="isLayoutPopoverOpen"
+                role="menu"
+                tabindex="0"
+                flex flex-col gap-3 text-neutral-500
+                :variants="groupVariants"
+                initial="initial"
+                animate="enter"
+                exit="leave"
               >
-                <div
-                  class="hover:i-mynaui-terminal-solid"
-                  :class="settings.showConsole
-                    ? 'i-mynaui-terminal-solid'
-                    : 'i-mynaui-terminal'"
-                />
-              </button>
-
-              <button
-                v-tooltip.left-start="`Switch to ${settings.outputLayout === 'vertical' ? 'horizontal' : 'vertical'} output layout`"
-                :disabled="!settings.showConsole || !settings.showOutput"
-                sc-toolbar-btn
-                @click="toggleOutputLayout"
-              >
-                <div
-                  class="hover:i-mynaui-square-half-solid"
-                  :class="settings.outputLayout === 'vertical'
-                    ? 'i-mynaui-square-half rotate-90'
-                    : 'i-mynaui-square-half'"
-                />
-              </button>
-            </div>
+                <motion.div :variants="itemVariants">
+                  <button
+                    v-tooltip.left-start="`${settings.showOutput ? 'Hide' : 'Show'} preview`"
+                    class="sc-toolbar-btn"
+
+                    @click.prevent="toggleOutput"
+                  >
+                    <div
+                      class="hover:i-mynaui-desktop-solid"
+                      :class="settings.showOutput
+                        ? 'i-mynaui-desktop-solid'
+                        : 'i-mynaui-desktop'"
+                    />
+                  </button>
+                </motion.div>
+
+                <motion.div :variants="itemVariants">
+                  <button
+                    v-tooltip.left-start="`Switch to ${settings.layout === 'vertical' ? 'horizontal' : 'vertical'} layout`"
+                    class="sc-toolbar-btn"
+                    :disabled="!settings.showOutput"
+
+                    @click="toggleLayout"
+                  >
+                    <div
+                      :class="settings.layout === 'vertical'
+                        ? 'i-mynaui:rectangle hover:i-mynaui:rectangle-solid'
+                        : 'i-mynaui:rectangle-vertical hover:i-mynaui:rectangle-vertical-solid'"
+                    />
+                  </button>
+                </motion.div>
+                <motion.div :variants="itemVariants">
+                  <button
+                    v-tooltip.left-start="`${settings.showConsole ? 'Hide' : 'Show'} console`"
+                    class="sc-toolbar-btn"
+                    :disabled="!settings.showOutput"
+
+                    @click="toggleConsole"
+                  >
+                    <div
+                      class="hover:i-mynaui-terminal-solid"
+                      :class="settings.showConsole
+                        ? 'i-mynaui-terminal-solid'
+                        : 'i-mynaui-terminal'"
+                    />
+                  </button>
+                </motion.div>
+                <motion.div :variants="itemVariants">
+                  <button
+                    v-tooltip.left-start="`Switch to ${settings.outputLayout === 'vertical' ? 'horizontal' : 'vertical'} output layout`"
+                    :disabled="!settings.showConsole || !settings.showOutput"
+                    class="sc-toolbar-btn"
+
+                    @click="toggleOutputLayout"
+                  >
+                    <div
+                      class="hover:i-mynaui-square-half-solid"
+                      :class="settings.outputLayout === 'vertical'
+                        ? 'i-mynaui-square-half rotate-90'
+                        : 'i-mynaui-square-half'"
+                    />
+                  </button>
+                </motion.div>
+              </motion.div>
+            </AnimatePresence>
           </PopoverContent>
         </Popover>
 
diff --git a/src/components/ui/popover/PopoverContent.vue b/src/components/ui/popover/PopoverContent.vue
index 8b8ad36..7f886fb 100644
--- a/src/components/ui/popover/PopoverContent.vue
+++ b/src/components/ui/popover/PopoverContent.vue
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          `bg-popover relative
+          `bg-background relative
            text-popover-foreground
            data-[state=open]:animate-in
            data-[state=closed]:animate-out
@@ -43,8 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
            data-[state=open]:fade-in-0
            data-[state=closed]:zoom-out-95
            data-[state=open]:zoom-in-95
-           data-[side=bottom]
-           :slide-in-from-top-2
+           data-[side=bottom]:slide-in-from-top-2
            data-[side=left]:slide-in-from-right-2
            data-[side=right]:slide-in-from-left-2
            data-[side=top]:slide-in-from-bottom-2
@@ -59,3 +58,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     </PopoverContent>
   </PopoverPortal>
 </template>
+
+<style>
+/**
+  todo: follow up on the animations
+  somehow, this animates the popover but also the select
+*/
+
+[data-state="open"] {
+  animation-duration: 200ms !important;
+}
+
+[data-state="closed"] {
+  animation-duration: 200ms !important;
+}
+</style>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 8f39dec..85bcec3 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,6 +1,7 @@
-/* @import "tailwindcss";*/
+/* @import "tailwindcss";
 
 @import "tw-animate-css";
+*/
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/uno.config.ts b/uno.config.ts
index 9e36191..be5a4da 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -68,7 +68,7 @@ export default defineConfig({
     transformerDirectives(),
   ],
   shortcuts: {
-    'sc-toolbar-btn': 'cursor-pointer hover:text-foreground/80 hover:scale-120 transition duration-200 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100',
+    'sc-toolbar-btn': 'cursor-pointer hover:text-foreground/80 hover:scale-120 transition duration-200 disabled:cursor-not-allowed disabled:opacity-35 disabled:hover:scale-100 active:scale-95',
     'sc-btn-base': 'p-2 rounded-lg bg-transparent',
     'btn': 'sc-btn-base bg-neutral-800 text-neutral-200 dark:bg-neutral-200 dark:text-dark-900',
     'sc-btn-outline': 'sc-btn-base outline-solid outline-neutral text-neutral hover',

From 6ecd351b5d5d78f7bf57e7b5578538ab758cd828 Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Fri, 26 Sep 2025 14:59:30 +0200
Subject: [PATCH 10/18] #15: Making luna console theme reactive

---
 packages/vue-repl/src/output/luna-console.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/vue-repl/src/output/luna-console.vue b/packages/vue-repl/src/output/luna-console.vue
index e8805c1..fa8a4e9 100644
--- a/packages/vue-repl/src/output/luna-console.vue
+++ b/packages/vue-repl/src/output/luna-console.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, onMounted, ref, useTemplateRef } from 'vue'
+import { inject, onMounted, ref, useTemplateRef, watch } from 'vue'
 import LunaConsole from 'luna-console'
 import { type LogPayload, injectKeyProps } from '../types'
 import 'luna-object-viewer/luna-object-viewer.css'
@@ -8,6 +8,7 @@ import 'luna-data-grid/luna-data-grid.css'
 import 'luna-console/luna-console.css'
 import toEl from 'licia/toEl'
 
+
 const { store, theme } = inject(injectKeyProps)!
 const lunaRef = useTemplateRef('luna-ref')
 const lunaConsole = ref<LunaConsole>()
@@ -19,11 +20,21 @@ onMounted(() => {
   })
   store.value.executeLog = ({ logLevel, data = [] }: LogPayload) => {
     const deserialized = data.map(deserializeMessage)
-      ; (lunaConsole.value?.[logLevel] as any)?.(...deserialized)
+    ;(lunaConsole.value?.[logLevel] as any)?.(...deserialized)
   }
   store.value.clearConsole = clearLunaConsole
 })
 
+// Watch for theme changes and update LunaConsole theme reactively
+watch(
+  () => theme.value,
+  (newTheme) => {
+    if (lunaConsole.value) {
+      lunaConsole.value.setOption('theme', newTheme || 'light')
+    }
+  }
+)
+
 function clearLunaConsole() {
   lunaConsole.value?.clear(true)
 }

From d931befee559b036ed70ff277fc7028b8cb7f7d9 Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Fri, 26 Sep 2025 15:27:11 +0200
Subject: [PATCH 11/18] #15: Actually making luna console theme reactive this
 time

---
 packages/vue-repl/src/output/luna-console.vue | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/vue-repl/src/output/luna-console.vue b/packages/vue-repl/src/output/luna-console.vue
index fa8a4e9..e73466f 100644
--- a/packages/vue-repl/src/output/luna-console.vue
+++ b/packages/vue-repl/src/output/luna-console.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, onMounted, ref, useTemplateRef, watch } from 'vue'
+import { inject, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue'
 import LunaConsole from 'luna-console'
 import { type LogPayload, injectKeyProps } from '../types'
 import 'luna-object-viewer/luna-object-viewer.css'
@@ -21,6 +21,8 @@ onMounted(() => {
   store.value.executeLog = ({ logLevel, data = [] }: LogPayload) => {
     const deserialized = data.map(deserializeMessage)
     ;(lunaConsole.value?.[logLevel] as any)?.(...deserialized)
+    // Ensure theme is applied after log (for late-rendered viewers)
+    updateLunaThemeClass(theme.value || 'light')
   }
   store.value.clearConsole = clearLunaConsole
 })
@@ -31,10 +33,38 @@ watch(
   (newTheme) => {
     if (lunaConsole.value) {
       lunaConsole.value.setOption('theme', newTheme || 'light')
+      // Update theme class on root and sub-viewers
+      updateLunaThemeClass(newTheme || 'light')
     }
-  }
+  },
+  { immediate: true }
 )
 
+async function updateLunaThemeClass(theme: string) {
+  // Helper to update theme classes
+  function applyTheme() {
+    const root = lunaRef.value
+    if (!root) return
+    root.classList.remove('luna-console-theme-dark', 'luna-console-theme-light')
+    root.classList.add(`luna-console-theme-${theme}`)
+
+    const viewerTypes = ['object-viewer', 'dom-viewer', 'data-grid']
+    for (const type of viewerTypes) {
+      // Update theme class on all theme-marked elements
+      const themeEls = root.querySelectorAll(`[class*="luna-${type}-theme-"]`)
+      themeEls.forEach(el => {
+        el.classList.remove(`luna-${type}-theme-dark`, `luna-${type}-theme-light`)
+        el.classList.add(`luna-${type}-theme-${theme}`)
+      })
+    }
+  }
+  // Run immediately
+  applyTheme()
+  // Run again after DOM updates using Vue's nextTick
+  await nextTick()
+  applyTheme()
+}
+
 function clearLunaConsole() {
   lunaConsole.value?.clear(true)
 }

From 6ff389fe27ed3d6d62f191a8286200cddf8ad0a8 Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Fri, 26 Sep 2025 20:12:16 +0200
Subject: [PATCH 12/18] Small tweak on the history snapshots

---
 src/components/YvVersioningDrawer/YvSnapshot.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/YvVersioningDrawer/YvSnapshot.vue b/src/components/YvVersioningDrawer/YvSnapshot.vue
index 6587590..4d50f71 100644
--- a/src/components/YvVersioningDrawer/YvSnapshot.vue
+++ b/src/components/YvVersioningDrawer/YvSnapshot.vue
@@ -33,9 +33,9 @@ const { settings } = useSettingsStore();
 const typeColors = computed((): TypeColorConfig => {
   const colorMap: Record<SnapshotType, TypeColorConfig> = {
     manual: {
-      dot: 'bg-orange-700 outline-orange-700',
-      line: 'before:bg-orange-700',
-      text: 'text-orange-700',
+      dot: 'bg-orange-600 outline-orange-600',
+      line: 'before:bg-orange-600',
+      text: 'text-orange-600',
     },
     periodic: {
       dot: 'bg-violet-700 outline-violet-700',
@@ -43,9 +43,9 @@ const typeColors = computed((): TypeColorConfig => {
       text: 'text-violet-700',
     },
     auto: {
-      dot: 'bg-pink-700 outline-pink-700',
-      line: 'before:bg-pink-700',
-      text: 'text-pink-700',
+      dot: 'bg-sky-600 outline-sky-600',
+      line: 'before:bg-sky-600',
+      text: 'text-sky-600',
     },
   };
 
@@ -82,7 +82,7 @@ const didFilesChange = computed(() => {
             typeColors.line,
           ]"
         />
-        <p text="sm" font-bold mr-2 :class="typeColors.text">
+        <p text="xs font-sans" mr-2 :class="typeColors.text">
           {{ props.snapshot.type }}
         </p>
         <Menu v-if="didFilesChange" theme="diff-card" :arrow-overflow="true" arrow-padding="1rem">

From 207f7c1cb888d95ffb248437050c34813e195cd7 Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Fri, 26 Sep 2025 20:10:22 +0200
Subject: [PATCH 13/18] chore: bump version to 0.2.0-beta

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 11b5a00..80d63b4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "yehyecoa-vue",
   "type": "module",
-  "version": "0.1.0-beta",
+  "version": "0.2.0-beta",
   "private": true,
   "packageManager": "pnpm@10.17.0",
   "engines": {

From 05c2a8fd33d9a29154331bba77de48889dd3b11f Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Fri, 26 Sep 2025 20:42:56 +0200
Subject: [PATCH 14/18] Fixing variation in the position for the
 connected/disconnected indicator

It was driving me mad.
---
 src/components/YvWorkshopJoiner.vue | 44 ++++++++++++++---------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/YvWorkshopJoiner.vue b/src/components/YvWorkshopJoiner.vue
index 562f7aa..29591c3 100644
--- a/src/components/YvWorkshopJoiner.vue
+++ b/src/components/YvWorkshopJoiner.vue
@@ -11,21 +11,19 @@ const pks = usePartyKitStore();
 <template>
   <div>
     <Popover v-if="pks.isConnected">
-      <div
-
-        flex="~ items-center gap-1"
-      >
+      <div flex="~ items-center gap-1">
         <PopoverTrigger>
-          <span
+          <button
             v-tooltip.right="'Leave workshop'"
-            class="sc-toolbar-btn"
+            class="flex items-center sc-toolbar-btn"
           >
-            <div
+            <span
+              inline-block
               w-3.5 h-3.5
               bg-emerald-500
               i-ph-broadcast-fill
             />
-          </span>
+          </button>
         </PopoverTrigger>
         <div text="xs emerald-500/60">
           {{ pks.currentRoomId }}
@@ -44,20 +42,22 @@ const pks = usePartyKitStore();
     </Popover>
 
     <Popover v-else>
-      <PopoverTrigger>
-        <span
-          v-if="!pks.isConnected"
-          v-tooltip.right="'Check for workshops'"
-          class="sc-toolbar-btn"
-          p-0
-          m-0 @click="pks.checkForAvailableWorkshop()"
-        >
-          <div
-            w-3.5 h-3.5
-            i-ph-broadcast-fill
-          />
-        </span>
-      </PopoverTrigger>
+      <div flex="~ items-center gap-1">
+        <PopoverTrigger>
+          <button
+            v-if="!pks.isConnected"
+            v-tooltip.right="'Check for workshops'"
+            class="flex items-center sc-toolbar-btn"
+            @click="pks.checkForAvailableWorkshop()"
+          >
+            <span
+              inline-block
+              w-3.5 h-3.5
+              i-ph-broadcast-fill
+            />
+          </button>
+        </PopoverTrigger>
+      </div>
 
       <PopoverContent w-auto>
         <div v-if="!pks.isConnected && pks.isWorkshopAvailable">

From 6703bd1c49f15e81a9a62bdbaba3a5e948da2c91 Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Fri, 26 Sep 2025 21:50:14 +0200
Subject: [PATCH 15/18] #28: Adding a toggle for reverse layout

Abstracting the layout menu into its own component
---
 src/App.vue                              |  10 +-
 src/components/YvHeader.vue              | 197 -----------------------
 src/components/YvHeader/YvHeader.vue     |  75 +++++++++
 src/components/YvHeader/YvLayoutMenu.vue | 151 +++++++++++++++++
 src/components/YvRepl.vue                |   1 +
 src/composables/useSettingsStore.ts      |   8 +
 6 files changed, 240 insertions(+), 202 deletions(-)
 delete mode 100644 src/components/YvHeader.vue
 create mode 100644 src/components/YvHeader/YvHeader.vue
 create mode 100644 src/components/YvHeader/YvLayoutMenu.vue

diff --git a/src/App.vue b/src/App.vue
index 68f4241..dd4d741 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import YVHeader from '@/components/YvHeader.vue';
-import YvToasts from './components/toasts/YvToasts.vue';
+import YvToasts from '@/components/toasts/YvToasts.vue';
 // import Drawer from './components/ui/drawer/Drawer.vue';
-import YvFooter from './components/YvFooter.vue';
-import YvRepl from './components/YvRepl.vue';
-import YvSidebar from './components/YvSidebar/YvSidebar.vue';
+import YvFooter from '@/components/YvFooter.vue';
+import YVHeader from '@/components/YvHeader/YvHeader.vue';
+import YvRepl from '@/components/YvRepl.vue';
+import YvSidebar from '@/components/YvSidebar/YvSidebar.vue';
 import '@calmecac-vue/repl/style.css';
 
 function setVH() {
diff --git a/src/components/YvHeader.vue b/src/components/YvHeader.vue
deleted file mode 100644
index da06aa4..0000000
--- a/src/components/YvHeader.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<script setup lang="ts">
-import { AnimatePresence, motion } from 'motion-v';
-import { ref } from 'vue';
-import { useFileManagerStore } from '@/composables/useFileManagerStore';
-import { useSettingsStore } from '@/composables/useSettingsStore';
-
-import Popover from './ui/popover/Popover.vue';
-import PopoverContent from './ui/popover/PopoverContent.vue';
-import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
-import YvOnlineStatus from './YvOnlineStatus.vue';
-
-const {
-  settings,
-  toggleLayout,
-  toggleTheme,
-  toggleOutput,
-  toggleConsole,
-  toggleOutputLayout,
-} = useSettingsStore();
-
-const isLayoutPopoverOpen = ref(false);
-
-const fm = useFileManagerStore();
-
-const groupVariants = {
-  initial: { opacity: 0, y: 16 },
-  enter: {
-    opacity: 1,
-    y: 0,
-    transition: { staggerChildren: 0.08, delayChildren: 0.05 },
-  },
-  leave: {
-    opacity: 0,
-    y: 16,
-    transition: { staggerChildren: 0.08, delayChildren: 0.05, staggerDirection: -1 },
-  },
-};
-const itemVariants = {
-  initial: { opacity: 0, y: 0 },
-  enter: { opacity: 1, y: 0 },
-  exit: { opacity: 0, y: 16 },
-};
-</script>
-
-<template>
-  <div>
-    <nav
-      flex="~ justify-between"
-      relative p-4 pr-6 z-40
-      shadow-md
-      bg="light dark:dark-900"
-      border="b neutral-300/10"
-      text="#333 dark:neutral-300"
-      h="var(--nav-height)"
-      transition="background-color 0.2s ease"
-    >
-      <h1 text-md font-500 inline-flex items-center>
-        <!-- TODO: maybe a logo would be cool -->
-        <!-- <img alt="logo" src="/logo.svg" /> -->
-        <!-- <span>yehyecoa-vue</span> -->
-        <!-- yehyecoa-vue -->
-      </h1>
-
-      <!-- true center -->
-      <div
-        absolute w-max
-        class="-translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2"
-      >
-        <YvOnlineStatus />
-      </div>
-
-      <div flex gap-4 text-neutral-500>
-        <button
-          v-tooltip.bottom="'Save snapshot'"
-          class="sc-toolbar-btn"
-          @click="fm.saveSnapshot({ type: 'manual', message: 'Manually saved' })"
-        >
-          <div class="i-mynaui:save hover:i-mynaui:save-solid" />
-        </button>
-
-        <button
-          v-tooltip.bottom="`${fm.isDrawerOpen ? 'Close' : 'Open'} history`"
-          class="sc-toolbar-btn"
-          @click="fm.isDrawerOpen = !fm.isDrawerOpen"
-        >
-          <div class="i-mynaui:clock-hexagon hover:i-mynaui:clock-hexagon-solid" :class="fm.isDrawerOpen ? 'i-mynaui:clock-hexagon-solid' : 'i-mynaui:clock-hexagon'" />
-        </button>
-
-        <Popover v-model:open="isLayoutPopoverOpen">
-          <PopoverTrigger>
-            <button
-              v-tooltip.bottom="`Layout`"
-              class="sc-toolbar-btn"
-            >
-              <div
-                class="cursor-pointer i-mynaui:layout hover:i-mynaui:layout-solid"
-                :class="isLayoutPopoverOpen
-                  ? 'i-mynaui:layout-solid'
-                  : 'i-mynaui:layout'"
-              />
-            </button>
-          </PopoverTrigger>
-          <PopoverContent class="w-auto">
-            <AnimatePresence>
-              <motion.div
-                v-if="isLayoutPopoverOpen"
-                role="menu"
-                tabindex="0"
-                flex flex-col gap-3 text-neutral-500
-                :variants="groupVariants"
-                initial="initial"
-                animate="enter"
-                exit="leave"
-              >
-                <motion.div :variants="itemVariants">
-                  <button
-                    v-tooltip.left-start="`${settings.showOutput ? 'Hide' : 'Show'} preview`"
-                    class="sc-toolbar-btn"
-
-                    @click.prevent="toggleOutput"
-                  >
-                    <div
-                      class="hover:i-mynaui-desktop-solid"
-                      :class="settings.showOutput
-                        ? 'i-mynaui-desktop-solid'
-                        : 'i-mynaui-desktop'"
-                    />
-                  </button>
-                </motion.div>
-
-                <motion.div :variants="itemVariants">
-                  <button
-                    v-tooltip.left-start="`Switch to ${settings.layout === 'vertical' ? 'horizontal' : 'vertical'} layout`"
-                    class="sc-toolbar-btn"
-                    :disabled="!settings.showOutput"
-
-                    @click="toggleLayout"
-                  >
-                    <div
-                      :class="settings.layout === 'vertical'
-                        ? 'i-mynaui:rectangle hover:i-mynaui:rectangle-solid'
-                        : 'i-mynaui:rectangle-vertical hover:i-mynaui:rectangle-vertical-solid'"
-                    />
-                  </button>
-                </motion.div>
-                <motion.div :variants="itemVariants">
-                  <button
-                    v-tooltip.left-start="`${settings.showConsole ? 'Hide' : 'Show'} console`"
-                    class="sc-toolbar-btn"
-                    :disabled="!settings.showOutput"
-
-                    @click="toggleConsole"
-                  >
-                    <div
-                      class="hover:i-mynaui-terminal-solid"
-                      :class="settings.showConsole
-                        ? 'i-mynaui-terminal-solid'
-                        : 'i-mynaui-terminal'"
-                    />
-                  </button>
-                </motion.div>
-                <motion.div :variants="itemVariants">
-                  <button
-                    v-tooltip.left-start="`Switch to ${settings.outputLayout === 'vertical' ? 'horizontal' : 'vertical'} output layout`"
-                    :disabled="!settings.showConsole || !settings.showOutput"
-                    class="sc-toolbar-btn"
-
-                    @click="toggleOutputLayout"
-                  >
-                    <div
-                      class="hover:i-mynaui-square-half-solid"
-                      :class="settings.outputLayout === 'vertical'
-                        ? 'i-mynaui-square-half rotate-90'
-                        : 'i-mynaui-square-half'"
-                    />
-                  </button>
-                </motion.div>
-              </motion.div>
-            </AnimatePresence>
-          </PopoverContent>
-        </Popover>
-
-        <button
-          v-tooltip.bottom-end="`Switch to ${settings.theme === 'dark' ? 'light' : 'dark'} theme`"
-          sc-toolbar-btn
-          @click="toggleTheme"
-        >
-          <div class="i-mynaui:sun hover:i-mynaui:sun-solid dark:i-mynaui:moon dark:hover:i-mynaui:moon-solid" />
-        </button>
-      </div>
-    </nav>
-  </div>
-</template>
-
-  <style>
-
-  </style>
diff --git a/src/components/YvHeader/YvHeader.vue b/src/components/YvHeader/YvHeader.vue
new file mode 100644
index 0000000..a13f154
--- /dev/null
+++ b/src/components/YvHeader/YvHeader.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import YvOnlineStatus from '@/components/YvOnlineStatus.vue';
+import { useFileManagerStore } from '@/composables/useFileManagerStore';
+import { useSettingsStore } from '@/composables/useSettingsStore';
+import YvLayoutMenu from './YvLayoutMenu.vue';
+
+const {
+  settings,
+  toggleTheme,
+} = useSettingsStore();
+
+const fm = useFileManagerStore();
+</script>
+
+<template>
+  <div>
+    <nav
+      flex="~ justify-between"
+      relative p-4 pr-6 z-40
+      shadow-md
+      bg="light dark:dark-900"
+      border="b neutral-300/10"
+      text="#333 dark:neutral-300"
+      h="var(--nav-height)"
+      transition="background-color 0.2s ease"
+    >
+      <h1 text-md font-500 inline-flex items-center>
+        <!-- TODO: maybe a logo would be cool -->
+        <!-- <img alt="logo" src="/logo.svg" /> -->
+        <!-- <span>yehyecoa-vue</span> -->
+        <!-- yehyecoa-vue -->
+      </h1>
+
+      <!-- true center -->
+      <div
+        absolute w-max
+        class="-translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2"
+      >
+        <YvOnlineStatus />
+      </div>
+
+      <div flex gap-4 text-neutral-500>
+        <button
+          v-tooltip.bottom="'Save snapshot'"
+          class="sc-toolbar-btn"
+          @click="fm.saveSnapshot({ type: 'manual', message: 'Manually saved' })"
+        >
+          <div class="i-mynaui:save hover:i-mynaui:save-solid" />
+        </button>
+
+        <button
+          v-tooltip.bottom="`${fm.isDrawerOpen ? 'Close' : 'Open'} history`"
+          class="sc-toolbar-btn"
+          @click="fm.isDrawerOpen = !fm.isDrawerOpen"
+        >
+          <div class="i-mynaui:clock-hexagon hover:i-mynaui:clock-hexagon-solid" :class="fm.isDrawerOpen ? 'i-mynaui:clock-hexagon-solid' : 'i-mynaui:clock-hexagon'" />
+        </button>
+
+        <YvLayoutMenu />
+
+        <button
+          v-tooltip.bottom-end="`Switch to ${settings.theme === 'dark' ? 'light' : 'dark'} theme`"
+          class="sc-toolbar-btn"
+          @click="toggleTheme"
+        >
+          <div class="i-mynaui:sun hover:i-mynaui:sun-solid dark:i-mynaui:moon dark:hover:i-mynaui:moon-solid" />
+        </button>
+      </div>
+    </nav>
+  </div>
+</template>
+
+  <style>
+
+  </style>
diff --git a/src/components/YvHeader/YvLayoutMenu.vue b/src/components/YvHeader/YvLayoutMenu.vue
new file mode 100644
index 0000000..f63d748
--- /dev/null
+++ b/src/components/YvHeader/YvLayoutMenu.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { AnimatePresence, motion } from 'motion-v';
+import { ref } from 'vue';
+import Popover from '@/components/ui/popover/Popover.vue';
+import PopoverContent from '@/components/ui/popover/PopoverContent.vue';
+import PopoverTrigger from '@/components/ui/popover/PopoverTrigger.vue';
+import { useSettingsStore } from '@/composables/useSettingsStore';
+
+const {
+  settings,
+  toggleLayout,
+  toggleOutput,
+  toggleConsole,
+  toggleOutputLayout,
+} = useSettingsStore();
+
+const isLayoutPopoverOpen = ref(false);
+
+const groupVariants = {
+  initial: { opacity: 0, y: 16 },
+  enter: {
+    opacity: 1,
+    y: 0,
+    transition: { staggerChildren: 0.06, delayChildren: 0.05 },
+  },
+  leave: {
+    opacity: 0,
+    y: 16,
+    transition: { staggerChildren: 0.06, delayChildren: 0.05, staggerDirection: -1 },
+  },
+};
+const itemVariants = {
+  initial: { opacity: 0, y: 0 },
+  enter: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 16 },
+};
+</script>
+
+<template>
+  <Popover v-model:open="isLayoutPopoverOpen">
+    <PopoverTrigger>
+      <button
+        v-tooltip.bottom="`Layout`"
+        class="sc-toolbar-btn"
+      >
+        <div
+          class="cursor-pointer i-mynaui:layout hover:i-mynaui:layout-solid"
+          :class="isLayoutPopoverOpen
+            ? 'i-mynaui:layout-solid'
+            : 'i-mynaui:layout'"
+        />
+      </button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto">
+      <AnimatePresence>
+        <motion.div
+          v-if="isLayoutPopoverOpen"
+          role="menu"
+          tabindex="0"
+          flex flex-col gap-3 text-neutral-500
+          :variants="groupVariants"
+          initial="initial"
+          animate="enter"
+          exit="leave"
+        >
+          <motion.div :variants="itemVariants">
+            <button
+              v-tooltip.left-start="`${settings.showOutput ? 'Hide' : 'Show'} preview`"
+              class="sc-toolbar-btn"
+
+              @click.prevent="toggleOutput"
+            >
+              <div
+                class="hover:i-mynaui-desktop-solid"
+                :class="settings.showOutput
+                  ? 'i-mynaui-desktop-solid'
+                  : 'i-mynaui-desktop'"
+              />
+            </button>
+          </motion.div>
+
+          <motion.div :variants="itemVariants">
+            <button
+              v-tooltip.left-start="`Switch to ${settings.layout === 'vertical' ? 'horizontal' : 'vertical'} layout`"
+              class="sc-toolbar-btn"
+              :disabled="!settings.showOutput"
+              @click="toggleLayout"
+            >
+              <div
+                :class="settings.layout === 'vertical'
+                  ? 'i-mynaui:rectangle hover:i-mynaui:rectangle-solid'
+                  : 'i-mynaui:rectangle-vertical hover:i-mynaui:rectangle-vertical-solid'"
+              />
+            </button>
+          </motion.div>
+
+          <motion.div :variants="itemVariants">
+            <button
+              v-tooltip.left-start="`${settings.layoutReverse ? 'Normal' : 'Reverse'} layout`"
+              class="sc-toolbar-btn"
+              :disabled="!settings.showOutput"
+              @click="settings.layoutReverse = !settings.layoutReverse"
+            >
+              <motion.div
+                :key="settings.layout"
+                :variants="itemVariants"
+                class="transition-all duration-200"
+                :class="settings.layout === 'horizontal'
+                  ? 'i-mynaui-arrow-left-right hover:i-mynaui-arrow-left-right-solid'
+                  : 'i-mynaui-arrow-up-down hover:i-mynaui-arrow-up-down-solid'"
+              />
+            </button>
+          </motion.div>
+
+          <motion.div :variants="itemVariants">
+            <button
+              v-tooltip.left-start="`${settings.showConsole ? 'Hide' : 'Show'} console`"
+              class="sc-toolbar-btn"
+              :disabled="!settings.showOutput"
+
+              @click="toggleConsole"
+            >
+              <div
+                class="hover:i-mynaui-terminal-solid"
+                :class="settings.showConsole
+                  ? 'i-mynaui-terminal-solid'
+                  : 'i-mynaui-terminal'"
+              />
+            </button>
+          </motion.div>
+          <motion.div :variants="itemVariants">
+            <button
+              v-tooltip.left-start="`Switch to ${settings.outputLayout === 'vertical' ? 'horizontal' : 'vertical'} output layout`"
+              :disabled="!settings.showConsole || !settings.showOutput"
+              class="sc-toolbar-btn"
+
+              @click="toggleOutputLayout"
+            >
+              <div
+                class="hover:i-mynaui-square-half-solid"
+                :class="settings.outputLayout === 'vertical'
+                  ? 'i-mynaui-square-half rotate-90'
+                  : 'i-mynaui-square-half'"
+              />
+            </button>
+          </motion.div>
+        </motion.div>
+      </AnimatePresence>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/src/components/YvRepl.vue b/src/components/YvRepl.vue
index 662e5fe..ee12123 100644
--- a/src/components/YvRepl.vue
+++ b/src/components/YvRepl.vue
@@ -62,6 +62,7 @@ onMounted(() => {
       :show-ts-config="false"
       :theme="settings.theme"
       :layout="settings.layout"
+      :layout-reverse="settings.layoutReverse"
       :show-output="settings.showOutput"
       :output-layout="settings.outputLayout"
       :editor-options="{
diff --git a/src/composables/useSettingsStore.ts b/src/composables/useSettingsStore.ts
index dfefa79..3382c52 100644
--- a/src/composables/useSettingsStore.ts
+++ b/src/composables/useSettingsStore.ts
@@ -12,6 +12,7 @@ type YVSettingsStore = {
   toggleOutput: () => void;
   toggleConsole: () => void;
   toggleOutputLayout?: () => void;
+  toggleLayoutReverse?: () => void;
 };
 
 type YVSettings = {
@@ -20,6 +21,7 @@ type YVSettings = {
   showOutput?: RemovableRef<boolean>;
   showConsole?: RemovableRef<boolean>;
   outputLayout?: RemovableRef<Layout>;
+  layoutReverse?: RemovableRef<boolean>;
 };
 
 const settings = ref<YVSettings>({
@@ -28,6 +30,7 @@ const settings = ref<YVSettings>({
   showOutput: useStorage<boolean>('yehyecoa-vue-show-output', true),
   showConsole: useStorage<boolean>('yehyecoa-vue-show-console', true),
   outputLayout: useStorage<Layout>('yehyecoa-vue-output-layout', 'vertical'),
+  layoutReverse: useStorage<boolean>('yehyecoa-vue-layout-reverse', false),
 });
 
 export function useSettingsStore(): YVSettingsStore {
@@ -64,6 +67,10 @@ export function useSettingsStore(): YVSettingsStore {
       : 'horizontal';
   }
 
+  function toggleLayoutReverse(): void {
+    settings.value.layoutReverse = !settings.value.layoutReverse;
+  }
+
   return {
     settings,
     toggleLayout,
@@ -71,5 +78,6 @@ export function useSettingsStore(): YVSettingsStore {
     toggleOutput,
     toggleConsole,
     toggleOutputLayout,
+    toggleLayoutReverse,
   };
 }

From debb36ba2ea073d89c145f657eed29d2ec5f3386 Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Sat, 27 Sep 2025 14:03:16 +0200
Subject: [PATCH 16/18] #28: WIP fixing mobile output layout

---
 packages/vue-repl/src/OutputSplitPane.vue | 200 ++++++++++++++++++++++
 packages/vue-repl/src/output/Output.vue   |  13 +-
 packages/vue-repl/test/main.ts            |   4 +-
 3 files changed, 209 insertions(+), 8 deletions(-)
 create mode 100644 packages/vue-repl/src/OutputSplitPane.vue

diff --git a/packages/vue-repl/src/OutputSplitPane.vue b/packages/vue-repl/src/OutputSplitPane.vue
new file mode 100644
index 0000000..1e82fb3
--- /dev/null
+++ b/packages/vue-repl/src/OutputSplitPane.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { computed, inject, reactive, useTemplateRef } from 'vue'
+import { injectKeyPreviewRef, injectKeyProps } from './types'
+
+const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>()
+const isVertical = computed(() => props.layout === 'vertical')
+
+const containerRef = useTemplateRef('container')
+const previewRef = inject(injectKeyPreviewRef)!
+
+const { store, layoutReverse, splitPaneOptions } = inject(injectKeyProps)!
+
+const state = reactive({
+  dragging: false,
+  split: 50,
+  viewHeight: 0,
+  viewWidth: 0,
+})
+
+const boundSplit = computed(() => {
+  const { split } = state
+  return split < 20 ? 20 : split > 80 ? 80 : split
+})
+
+let startPosition = 0
+let startSplit = 0
+
+function dragStart(e: MouseEvent) {
+  state.dragging = true
+  startPosition = isVertical.value ? e.pageY : e.pageX
+  startSplit = boundSplit.value
+
+  changeViewSize()
+}
+
+function dragMove(e: MouseEvent) {
+  if (containerRef.value && state.dragging) {
+    const position = isVertical.value ? e.pageY : e.pageX
+    const totalSize = isVertical.value
+      ? containerRef.value.offsetHeight
+      : containerRef.value.offsetWidth
+    const dp = position - startPosition
+    state.split = startSplit + +((dp / totalSize) * 100).toFixed(2)
+
+    changeViewSize()
+  }
+}
+
+function dragEnd() {
+  state.dragging = false
+}
+
+function changeViewSize() {
+  const el = previewRef.value
+  if (!el) return
+  state.viewHeight = el.offsetHeight
+  state.viewWidth = el.offsetWidth
+}
+</script>
+
+<template>
+  <div
+    ref="container"
+    class="split-pane"
+    :class="{
+      dragging: state.dragging,
+      reverse: layoutReverse,
+      vertical: isVertical,
+    }"
+    @mousemove="dragMove"
+    @mouseup="dragEnd"
+    @mouseleave="dragEnd"
+  >
+    <div
+      class="first"
+      :style="{ [isVertical ? 'height' : 'width']: boundSplit + '%' }"
+    >
+      <slot name="first" />
+      <div class="dragger" @mousedown.prevent="dragStart" />
+    </div>
+    <div
+      class="second"
+      :style="{ [isVertical ? 'height' : 'width']: 100 - boundSplit + '%' }"
+    >
+      <div v-show="state.dragging" class="view-size">
+        {{ `${state.viewWidth}px x ${state.viewHeight}px` }}
+      </div>
+      <slot name="second" />
+    </div>
+
+    <button class="toggler" @click="store.showOutput = !store.showOutput">
+      {{
+        store.showOutput
+          ? splitPaneOptions?.codeTogglerText || '< Code'
+          : splitPaneOptions?.outputTogglerText || 'Output >'
+      }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.split-pane {
+  display: flex;
+  height: 100%;
+  position: relative;
+}
+.split-pane.dragging {
+  cursor: ew-resize;
+}
+.dragging .first,
+.dragging .second {
+  pointer-events: none;
+}
+.first,
+.second {
+  position: relative;
+  height: 100%;
+}
+.view-size {
+  position: absolute;
+  top: 40px;
+  left: 10px;
+  font-size: 12px;
+  color: var(--text-light);
+  z-index: 100;
+  background-color: var(--bg-soft);
+  padding: 0.5rem;
+  border-radius: 4px;
+}
+.first {
+  border-right: 1px solid var(--border);
+}
+.dragger {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  bottom: 0;
+  right: -5px;
+  width: 10px;
+  height: 10px;
+  cursor: ew-resize;
+}
+.vertical .dragger {
+  top: auto;
+  height: 10px;
+  width: 100%;
+  left: 0;
+  right: 0;
+  bottom: -5px;
+  cursor: ns-resize;
+}
+.toggler {
+  display: none;
+  z-index: 3;
+  font-family: var(--font-code);
+  color: var(--text-light);
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  background-color: var(--bg);
+  padding: 8px 12px;
+  border-radius: 8px;
+  transform: translateX(-50%);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
+}
+
+.dark .toggler {
+  background-color: var(--bg);
+}
+
+.split-pane.vertical {
+  display: block;
+}
+
+.split-pane.vertical.dragging {
+  cursor: ns-resize;
+}
+
+.vertical .dragger {
+  top: auto;
+  height: 10px;
+  width: 100%;
+  left: 0;
+  right: 0;
+  bottom: -5px;
+  cursor: ns-resize;
+}
+
+.vertical .first,
+.vertical .second {
+  width: 100%;
+}
+.vertical .first {
+  border-right: none;
+  border-bottom: 1px solid var(--border);
+}
+
+
+
+</style>
diff --git a/packages/vue-repl/src/output/Output.vue b/packages/vue-repl/src/output/Output.vue
index 15d4630..8b759c7 100644
--- a/packages/vue-repl/src/output/Output.vue
+++ b/packages/vue-repl/src/output/Output.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import Preview from './Preview.vue'
-import SplitPane from '../SplitPane.vue'
 import SsrOutput from './SsrOutput.vue'
 import { computed, inject, useTemplateRef, watchEffect } from 'vue'
 import {
@@ -9,6 +8,7 @@ import {
   type OutputModes,
   injectKeyProps,
 } from '../types'
+import OutputSplitPane from '../OutputSplitPane.vue'
 
 const props = defineProps<{
   editorComponent: EditorComponentType
@@ -19,6 +19,7 @@ const props = defineProps<{
   ssr: boolean
   showOutput: boolean
   layout: 'horizontal' | 'vertical'
+  outputLayout?: 'horizontal' | 'vertical'
 }>()
 
 const { store, showConsole } = inject(injectKeyProps)!
@@ -77,15 +78,15 @@ defineExpose({ reload, previewRef })
   </div>
 
   <div class="output-container">
-    <SplitPane v-if="showConsole" :layout="layout">
-      <template #left>
+    <OutputSplitPane v-if="showConsole" :layout="props.outputLayout || layout">
+      <template #first>
         <Preview ref="preview" :show="mode === 'preview'" :ssr="ssr" />
       </template>
-      <template #right>
+      <template #second>
         <props.consoleComponent />
       </template>
-    </SplitPane>
-    <Preview ref="preview" :show="mode === 'preview'" :ssr="ssr" />
+    </OutputSplitPane>
+    <Preview v-else ref="preview" :show="mode === 'preview'" :ssr="ssr" />
     <SsrOutput
       v-if="mode === 'ssr output'"
       :context="store.ssrOutput.context"
diff --git a/packages/vue-repl/test/main.ts b/packages/vue-repl/test/main.ts
index a441581..cfa2063 100644
--- a/packages/vue-repl/test/main.ts
+++ b/packages/vue-repl/test/main.ts
@@ -57,11 +57,11 @@ const App = {
         store,
         theme: theme.value,
         previewTheme: true,
-        showOutput: false,
+        showOutput: true,
         editor: MonacoEditor,
         showOpenSourceMap: true,
         layout: 'vertical',
-        outputLayout: 'horizontal',
+        outputLayout: 'vertical',
         ssr: true,
         showConsole: true,
         showSsrOutput: true,

From cb0d5efd9518ce20c57d5d676a85d718b6db0de5 Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Sat, 27 Sep 2025 14:15:41 +0200
Subject: [PATCH 17/18] #28: Fixing resizing for output in horizontal mode

---
 packages/vue-repl/src/OutputSplitPane.vue | 65 ++++++++++-------------
 1 file changed, 27 insertions(+), 38 deletions(-)

diff --git a/packages/vue-repl/src/OutputSplitPane.vue b/packages/vue-repl/src/OutputSplitPane.vue
index 1e82fb3..54b8ef0 100644
--- a/packages/vue-repl/src/OutputSplitPane.vue
+++ b/packages/vue-repl/src/OutputSplitPane.vue
@@ -60,28 +60,17 @@ function changeViewSize() {
 
 <template>
   <div
-    ref="container"
-    class="split-pane"
-    :class="{
+    ref="container" class="split-pane" :class="{
       dragging: state.dragging,
       reverse: layoutReverse,
       vertical: isVertical,
-    }"
-    @mousemove="dragMove"
-    @mouseup="dragEnd"
-    @mouseleave="dragEnd"
+    }" @mousemove="dragMove" @mouseup="dragEnd" @mouseleave="dragEnd"
   >
-    <div
-      class="first"
-      :style="{ [isVertical ? 'height' : 'width']: boundSplit + '%' }"
-    >
+    <div class="first" :style="{ [isVertical ? 'height' : 'width']: boundSplit + '%' }">
       <slot name="first" />
       <div class="dragger" @mousedown.prevent="dragStart" />
     </div>
-    <div
-      class="second"
-      :style="{ [isVertical ? 'height' : 'width']: 100 - boundSplit + '%' }"
-    >
+    <div class="second" :style="{ [isVertical ? 'height' : 'width']: 100 - boundSplit + '%' }">
       <div v-show="state.dragging" class="view-size">
         {{ `${state.viewWidth}px x ${state.viewHeight}px` }}
       </div>
@@ -91,9 +80,7 @@ function changeViewSize() {
     <button class="toggler" @click="store.showOutput = !store.showOutput">
       {{
         store.showOutput
-          ? splitPaneOptions?.codeTogglerText || '< Code'
-          : splitPaneOptions?.outputTogglerText || 'Output >'
-      }}
+          ? splitPaneOptions?.codeTogglerText || '< Code' : splitPaneOptions?.outputTogglerText || 'Output >' }}
     </button>
   </div>
 </template>
@@ -101,21 +88,26 @@ function changeViewSize() {
 <style scoped>
 .split-pane {
   display: flex;
+  flex-direction: row;
   height: 100%;
   position: relative;
 }
+
 .split-pane.dragging {
   cursor: ew-resize;
 }
+
 .dragging .first,
 .dragging .second {
   pointer-events: none;
 }
+
 .first,
 .second {
   position: relative;
   height: 100%;
 }
+
 .view-size {
   position: absolute;
   top: 40px;
@@ -127,19 +119,16 @@ function changeViewSize() {
   padding: 0.5rem;
   border-radius: 4px;
 }
+
 .first {
   border-right: 1px solid var(--border);
 }
+
 .dragger {
   position: absolute;
   z-index: 3;
-  top: 0;
-  bottom: 0;
-  right: -5px;
-  width: 10px;
-  height: 10px;
-  cursor: ew-resize;
 }
+
 .vertical .dragger {
   top: auto;
   height: 10px;
@@ -149,6 +138,7 @@ function changeViewSize() {
   bottom: -5px;
   cursor: ns-resize;
 }
+
 .toggler {
   display: none;
   z-index: 3;
@@ -168,21 +158,22 @@ function changeViewSize() {
   background-color: var(--bg);
 }
 
-.split-pane.vertical {
-  display: block;
+
+.split-pane:not(.vertical) .dragger {
+  top: 0;
+  bottom: 0;
+  left: auto;
+  right: -5px;
+  width: 10px;
+  height: 100%;
+  cursor: ew-resize;
 }
 
-.split-pane.vertical.dragging {
-  cursor: ns-resize;
+.split-pane.vertical {
+  flex-direction: column;
 }
 
-.vertical .dragger {
-  top: auto;
-  height: 10px;
-  width: 100%;
-  left: 0;
-  right: 0;
-  bottom: -5px;
+.split-pane.vertical.dragging {
   cursor: ns-resize;
 }
 
@@ -190,11 +181,9 @@ function changeViewSize() {
 .vertical .second {
   width: 100%;
 }
+
 .vertical .first {
   border-right: none;
   border-bottom: 1px solid var(--border);
 }
-
-
-
 </style>

From 638f29db450fd8688b2f0e0507fcda287a5c6f99 Mon Sep 17 00:00:00 2001
From: ackzell <ackzell@gmail.com>
Date: Sat, 27 Sep 2025 14:57:39 +0200
Subject: [PATCH 18/18] Using more specific class names to preserve resizing on
 horizontal layout even after building the package

---
 packages/vue-repl/src/OutputSplitPane.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/vue-repl/src/OutputSplitPane.vue b/packages/vue-repl/src/OutputSplitPane.vue
index 54b8ef0..9ad4753 100644
--- a/packages/vue-repl/src/OutputSplitPane.vue
+++ b/packages/vue-repl/src/OutputSplitPane.vue
@@ -60,8 +60,8 @@ function changeViewSize() {
 
 <template>
   <div
-    ref="container" class="split-pane" :class="{
-      dragging: state.dragging,
+    ref="container" class="output-split-pane" :class="{
+      'osp-dragging': state.dragging,
       reverse: layoutReverse,
       vertical: isVertical,
     }" @mousemove="dragMove" @mouseup="dragEnd" @mouseleave="dragEnd"
@@ -86,19 +86,19 @@ function changeViewSize() {
 </template>
 
 <style scoped>
-.split-pane {
+.output-split-pane {
   display: flex;
   flex-direction: row;
   height: 100%;
   position: relative;
 }
 
-.split-pane.dragging {
+.output-split-pane.osp-dragging {
   cursor: ew-resize;
 }
 
-.dragging .first,
-.dragging .second {
+.osp-dragging .first,
+.osp-dragging .second {
   pointer-events: none;
 }
 
@@ -159,7 +159,7 @@ function changeViewSize() {
 }
 
 
-.split-pane:not(.vertical) .dragger {
+.output-split-pane:not(.vertical) .dragger {
   top: 0;
   bottom: 0;
   left: auto;
@@ -169,11 +169,11 @@ function changeViewSize() {
   cursor: ew-resize;
 }
 
-.split-pane.vertical {
+.output-split-pane.vertical {
   flex-direction: column;
 }
 
-.split-pane.vertical.dragging {
+.output-split-pane.vertical.osp-dragging {
   cursor: ns-resize;
 }