gh-pages changes

2025-09-13 22:45:38 +02:00
parent 9e1112f3bd
commit 153de01a73
7 changed files with 1270 additions and 75 deletions
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -72,82 +72,92 @@ export default defineConfig({
        { text: 'FAQ', link: '/guides/faq' },
      ],

-      '/references/':[
-        {
-          text: 'Basalt', link: 'references/main',
-          collapsed: true,
-          items: [
-            {text: 'PropertySystem', link: 'references/propertySystem'},
-            {text: 'Render', link: 'references/render'},
-            {text: 'Log', link: 'references/log'},
-            {text: 'ElementManager', link: 'references/elementManager'},
-            {text: 'ErrorManager', link: 'references/errorManager'},
-            ],
-        },
-        {
-          text: 'Element', link: 'references/elements/BaseElement',
-          collapsed: false,
-          items: [
-              {text: 'VisualElement', link: 'references/elements/VisualElement', collapsed: false, items: [
-                {text: 'Container', link: 'references/elements/Container', collapsed: true, items: [
-                  {text: 'BaseFrame', link: 'references/elements/BaseFrame'},
-                  {text: 'Flexbox', link: 'references/elements/Flexbox'},
-                  {text: 'Frame', link: 'references/elements/Frame'},
-                ]},
-                {text: 'BigFont', link: 'references/elements/BigFont'},
-                {text: 'Button', link: 'references/elements/Button'},
-                {text: 'Display', link: 'references/elements/Display'},
-                {text: 'Graph', link: 'references/elements/Graph', collapsed: true, items: [
-                    {text: 'BarChart', link: 'references/elements/BarChart'},
-                    {text: 'LineChart', link: 'references/elements/LineChart'},
-                  ]},
-                {text: 'Label', link: 'references/elements/Label'},  
-                {text: 'Image', link: 'references/elements/Image'},
-                {text: 'Input', link: 'references/elements/Input'},
-                {text: 'Checkbox', link: 'references/elements/Checkbox'},
-                {text: 'List', link: 'references/elements/List', collapsed: true,
-                  items: [
-                    {text: 'Dropdown', link: 'references/elements/Dropdown'},
-                    {text: 'Menu', link: 'references/elements/Menu'},
-                  ]
-                },
-                {text: 'Table', link: 'references/elements/Table'},
-                {text: 'TextBox', link: 'references/elements/TextBox'},
-                {text: 'Tree', link: 'references/elements/Tree'},
-                //{text: 'Timer', link: 'references/elements/Timer'},
-                {text: 'ScrollBar', link: 'references/elements/ScrollBar'},
-                {text: 'Slider', link: 'references/elements/Slider'},
-                {text: 'ProgressBar', link: 'references/elements/ProgressBar'},
-                {text: 'Program', link: 'references/elements/Program'},
-              ]},
-          ]
-        },
-        {
-          text: 'plugins', link: 'references/plugins/animations',
-          collapsed: false,
-          items: [
-            {text: 'Animations', link: 'references/plugins/animation', collapsed: true,
-              items: [
-                {text: 'Animation Instance', link: 'references/plugins/animation_AnimationInstance'},
-                {text: 'VisualElement', link: 'references/plugins/animation_VisualElement'},
-              ]
-            },
-            {text: 'Benchmark', link: 'references/plugins/benchmark', collapsed: true,
-              items: [
-                {text: 'BaseElement', link: 'references/plugins/benchmark_BaseElement'},
-                {text: 'Container', link: 'references/plugins/benchmark_Container'},
-              ]
-            },
-            {text: 'Debug', link: 'references/plugins/debug'},
-            {text: 'Reactive', link: 'references/plugins/reactive'},
-            {text: 'State', link: 'references/plugins/state'},
-            {text: 'Text Wrapping', link: 'references/plugins/textWrapping'},
-            {text: 'Theme', link: 'references/plugins/theme'},
-            {text: 'Xml', link: 'references/plugins/xml'},
-          ]
-        },
-      ]
+'/references/': [
+    {
+      text: 'Basalt',
+      link: 'references/main',
+      collapsed: true,
+      items: [
+        { text: 'ElementManager', link: 'references/elementManager' },
+        { text: 'ErrorManager', link: 'references/errorManager' },
+        { text: 'Log', link: 'references/log' },
+        { text: 'PropertySystem', link: 'references/propertySystem' },
+        { text: 'Render', link: 'references/render' },
+      ],
    },
+    {
+      text: 'Element',
+      link: 'references/elements/BaseElement',
+      collapsed: false,
+      items: [
+        {
+          text: 'VisualElement',
+          link: 'references/elements/VisualElement',
+          collapsed: false,
+          items: [
+            { text: 'BigFont', link: 'references/elements/BigFont' },
+            { text: 'Button', link: 'references/elements/Button' },
+            { text: 'CheckBox', link: 'references/elements/CheckBox' },
+            {
+              text: 'Container',
+              link: 'references/elements/Container',
+              collapsed: true,
+              items: [
+                { text: 'BaseFrame', link: 'references/elements/BaseFrame' },
+                { text: 'Frame', link: 'references/elements/Frame' },
+                { text: 'TabControl', link: 'references/elements/TabControl' },
+              ],
+            },
+            { text: 'Display', link: 'references/elements/Display' },
+            {
+              text: 'Graph',
+              link: 'references/elements/Graph',
+              collapsed: true,
+              items: [
+                { text: 'BarChart', link: 'references/elements/BarChart' },
+                { text: 'LineChart', link: 'references/elements/LineChart' },
+              ],
+            },
+            { text: 'Image', link: 'references/elements/Image' },
+            { text: 'Input', link: 'references/elements/Input' },
+            { text: 'Label', link: 'references/elements/Label' },
+            {
+              text: 'List',
+              link: 'references/elements/List',
+              collapsed: true,
+              items: [
+                { text: 'DropDown', link: 'references/elements/DropDown' },
+                { text: 'Menu', link: 'references/elements/Menu' },
+              ],
+            },
+            { text: 'ProgressBar', link: 'references/elements/ProgressBar' },
+            { text: 'Program', link: 'references/elements/Program' },
+            { text: 'ScrollBar', link: 'references/elements/ScrollBar' },
+            { text: 'Slider', link: 'references/elements/Slider' },
+            { text: 'Table', link: 'references/elements/Table' },
+            { text: 'TextBox', link: 'references/elements/TextBox' },
+            { text: 'Tree', link: 'references/elements/Tree' },
+          ],
+        },
+      ],
+    },
+    {
+      text: 'plugins',
+      link: 'references/plugins',
+      collapsed: false,
+      items: [
+        { text: 'Animations', link: 'references/plugins/animation' },
+        { text: 'Benchmark', link: 'references/plugins/benchmark' },
+        { text: 'Debug', link: 'references/plugins/debug' },
+        { text: 'Reactive', link: 'references/plugins/reactive' },
+        { text: 'State', link: 'references/plugins/state' },
+        { text: 'Text Wrapping', link: 'references/plugins/textWrapping' },
+        { text: 'Theme', link: 'references/plugins/theme' },
+        { text: 'Xml', link: 'references/plugins/xml' },
+      ],
+    },
+  ],
+},


    socialLinks: [
--- a/docs/.vitepress/theme/components/BasaltDemo.vue
+++ b/docs/.vitepress/theme/components/BasaltDemo.vue
@@ -0,0 +1,178 @@
+<!-- .vitepress/theme/components/BasaltDemo.vue -->
+<script setup>
+import { ref, reactive, onMounted, useSlots } from 'vue'
+
+const showDemo = ref(false)
+const container = ref(null)
+const position = reactive({ x: 100, y: 100 })
+let offset = { x: 0, y: 0 }
+let isDragging = false
+
+const slots = useSlots()
+let luaCode = ''
+onMounted(() => {
+  luaCode = (slots.default?.() || [])
+    .map(vnode => typeof vnode.children === 'string' ? vnode.children : '')
+    .join('\n')
+})
+
+async function startDemo() {
+  showDemo.value = true
+
+  const basalt = await fetch(
+    'https://raw.githubusercontent.com/Pyroxenium/Basalt2/refs/heads/main/release/basalt.lua'
+  ).then(res => res.text())
+
+  const script = document.createElement('script')
+  script.src = 'https://copy-cat.squiddev.cc/require.js'
+  script.onload = () => {
+    window.require.config({ paths: { copycat: 'https://copy-cat.squiddev.cc/' } })
+    window.require(['copycat/embed'], (setup) => {
+      const computer = setup(container.value, {
+        hdFont: 'https://copy-cat.squiddev.cc/term_font_hd-0506b6efe5f7feae.png',
+        files: { 
+          'startup.lua': luaCode,
+          'basalt.lua': basalt
+        },
+        label: 'Basalt Demo'
+      })
+      computer.run()
+    })
+  }
+  document.body.appendChild(script)
+}
+
+function closeDemo() {
+  showDemo.value = false
+}
+
+function startDrag(e) {
+  isDragging = true
+  offset.x = e.clientX - position.x
+  offset.y = e.clientY - position.y
+  document.addEventListener('mousemove', onDrag)
+  document.addEventListener('mouseup', stopDrag)
+}
+
+function onDrag(e) {
+  if (isDragging) {
+    // Containergröße ermitteln
+    const containerEl = container.value?.parentElement
+    const contW = containerEl?.offsetWidth || 0
+    const contH = containerEl?.offsetHeight || 0
+
+    // Maximal erlaubte Positionen
+    const maxX = window.innerWidth - contW
+    const maxY = window.innerHeight - contH
+
+    // Neue Position berechnen
+    let newX = e.clientX - offset.x
+    let newY = e.clientY - offset.y
+
+    // Begrenzen (clampen)
+    if (newX < 0) newX = 0
+    if (newY < 0) newY = 0
+    if (newX > maxX) newX = maxX
+    if (newY > maxY) newY = maxY
+
+    position.x = newX
+    position.y = newY
+  }
+}
+
+function stopDrag() {
+  isDragging = false
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+}
+</script>
+
+<template>
+  <div>
+    <button
+      @click="startDemo"
+      :disabled="showDemo"
+      :style="{ pointerEvents: showDemo ? 'none' : 'auto' }"
+    >
+      ▶ Run
+    </button>
+
+    <div
+      v-if="showDemo"
+      :style="{
+        position: 'fixed',
+        top: position.y + 'px',
+        left: position.x + 'px',
+        width: '625px',
+        height: '425px',
+        background: '#1a1a1a',
+        borderRadius: '8px',
+        boxShadow: '0 10px 40px rgba(0, 0, 0, 0.5)',
+        display: 'flex',
+        flexDirection: 'column',
+        zIndex: 9999,
+        border: '1px solid #333'
+      }"
+    >
+      <!-- Header -->
+      <div
+        @mousedown="startDrag"
+        style="
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0.5rem 1rem;
+          background: linear-gradient(180deg, #2a2a2a 0%, #222 100%);
+          border-bottom: 1px solid #111;
+          cursor: move;
+          user-select: none;
+          border-radius: 8px 8px 0 0;
+        "
+      >
+        <div style="display: flex; align-items: center; gap: 0.5rem; color: #fff; font-size: 0.875rem; font-weight: 500;">
+          <span>💻</span>
+          <span>Basalt Demo</span>
+        </div>
+        <div style="display: flex; gap: 0.5rem;">
+          <button
+            @click="closeDemo"
+            style="
+              width: 24px;
+              height: 24px;
+              border-radius: 50%;
+              border: none;
+              cursor: pointer;
+              background: #ef4444;
+              color: white;
+              font-size: 12px;
+              transition: all 0.2s ease;
+            "
+            title="Close (ESC)"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+
+      <!-- Body -->
+      <div
+        ref="container"
+        style="
+          flex: 1;
+          background: #000;
+          border-radius: 0 0 8px 8px;
+          overflow: hidden;
+          position: relative;
+        "
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(canvas) {
+  image-rendering: pixelated;
+  top: 0;
+  left: 0;
+}
+</style>
--- a/docs/.vitepress/theme/components/BasaltDemoWithCode.vue
+++ b/docs/.vitepress/theme/components/BasaltDemoWithCode.vue
@@ -0,0 +1,523 @@
+<!-- .vitepress/theme/components/BasaltDemoWithCode.vue -->
+<script setup>
+import { ref, reactive, computed, useSlots, onMounted, onUnmounted, nextTick } from 'vue'
+
+const props = defineProps({
+  language: {
+    type: String,
+    default: 'lua'
+  },
+  title: {
+    type: String,
+    default: 'Basalt Demo'
+  }
+})
+
+const showDemo = ref(false)
+const container = ref(null)
+const wrapperRef = ref(null)
+const position = reactive({ x: 100, y: 100 })
+const isLoading = ref(false)
+let offset = { x: 0, y: 0 }
+let isDragging = false
+let computerInstance = null
+
+const slots = useSlots()
+function extractText(nodes) {
+  return (nodes || [])
+    .map((node) => {
+      if (!node) return ''
+      if (typeof node === 'string') return node
+      if (typeof node.children === 'string') return node.children
+      if (Array.isArray(node.children)) return extractText(node.children)
+      return ''
+    })
+    .join('\n')
+    .replace(/\r\n/g, '\n')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim()
+}
+
+const luaCode = computed(() => extractText(slots.default?.() ?? []))
+
+
+const highlightedCode = computed(() => {
+  let code = luaCode.value
+  
+  const keywords = ['local', 'function', 'if', 'then', 'else', 'elseif', 'end', 'for', 'while', 'do', 'repeat', 'until', 'return', 'break', 'true', 'false', 'nil', 'and', 'or', 'not', 'require']
+  const keywordRegex = new RegExp(`\\b(${keywords.join('|')})\\b`, 'g')
+  
+  code = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  
+  code = code.replace(keywordRegex, '<span class="keyword">$1</span>')
+  code = code.replace(/"([^"]*)"/g, '<span class="string">"$1"</span>')
+  code = code.replace(/'([^']*)'/g, '<span class="string">\'$1\'</span>')
+  code = code.replace(/--(.*)$/gm, '<span class="comment">--$1</span>')
+  code = code.replace(/\b(\d+)\b/g, '<span class="number">$1</span>')
+  code = code.replace(/\b(basalt|main)\b/g, '<span class="variable">$1</span>')
+  code = code.replace(/(:?\w+)\(/g, '<span class="function">$1</span>(')
+  
+  return code
+})
+
+async function startDemo() {
+  if (isLoading.value || showDemo.value) return
+  
+  isLoading.value = true
+  
+  try {
+    const basalt = await fetch(
+      'https://raw.githubusercontent.com/Pyroxenium/Basalt2/refs/heads/main/release/basalt.lua'
+    ).then(res => res.text())
+
+    if (!window.require) {
+      await new Promise((resolve, reject) => {
+        const script = document.createElement('script')
+        script.src = 'https://copy-cat.squiddev.cc/require.js'
+        script.onload = resolve
+        script.onerror = reject
+        document.body.appendChild(script)
+      })
+      window.require.config({ paths: { copycat: 'https://copy-cat.squiddev.cc/' } })
+    }
+
+    showDemo.value = true
+    centerWindow()
+    
+    await nextTick()
+    
+    await new Promise(resolve => setTimeout(resolve, 200))
+
+    window.require(['copycat/embed'], (setup) => {
+      if (!container.value) {
+        console.error('Container not found')
+        isLoading.value = false
+        return
+      }
+      
+      computerInstance = setup(container.value, {
+        hdFont: 'https://copy-cat.squiddev.cc/term_font_hd-0506b6efe5f7feae.png',
+        files: {
+          'startup.lua': luaCode.value,
+          'basalt.lua': basalt
+        },
+        label: props.title
+      })
+      
+      computerInstance.run()
+      
+      setTimeout(() => {
+        isLoading.value = false
+      }, 500)
+    })
+    
+  } catch (error) {
+    console.error('Error starting demo:', error)
+    isLoading.value = false
+    showDemo.value = false
+  }
+}
+
+function closeDemo() {
+  if (computerInstance) {
+    try {
+      computerInstance.shutdown()
+    } catch (e) {
+      console.warn('Error shutting down:', e)
+    }
+    computerInstance = null
+  }
+  
+  showDemo.value = false
+  isLoading.value = false
+}
+
+function centerWindow() {
+  const windowWidth = window.innerWidth
+  const windowHeight = window.innerHeight
+  position.x = Math.max(0, (windowWidth - 650) / 2)
+  position.y = Math.max(0, (windowHeight - 480) / 2)
+}
+
+function startDrag(e) {
+  if (e.target.closest('button')) return
+  isDragging = true
+  offset.x = e.clientX - position.x
+  offset.y = e.clientY - position.y
+  document.addEventListener('mousemove', onDrag)
+  document.addEventListener('mouseup', stopDrag)
+  e.preventDefault()
+}
+
+function onDrag(e) {
+  if (!isDragging) return
+  const maxX = window.innerWidth - 650
+  const maxY = window.innerHeight - 480
+  
+  position.x = Math.max(0, Math.min(e.clientX - offset.x, maxX))
+  position.y = Math.max(0, Math.min(e.clientY - offset.y, maxY))
+}
+
+function stopDrag() {
+  isDragging = false
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+}
+
+function handleKeydown(e) {
+  if (e.key === 'Escape' && showDemo.value) {
+    closeDemo()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+  closeDemo()
+})
+</script>
+
+<template>
+  <div class="basalt-demo-wrapper">
+    <!-- Code Block with Run Button -->
+    <div class="code-block-container">
+      <div class="code-header">
+        <span class="language-badge">{{ language }}</span>
+        <button 
+          class="run-button" 
+          @click="startDemo"
+          :disabled="isLoading || showDemo"
+        >
+          <span v-if="!isLoading" class="play-icon">▶</span>
+          <span v-else class="loading-icon">⟳</span>
+          <span class="button-text">{{ isLoading ? 'Loading...' : 'Run' }}</span>
+        </button>
+      </div>
+      
+      <!-- Code Block with Syntax Highlighting -->
+      <div class="code-block">
+        <pre><code v-html="highlightedCode"></code></pre>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-if="showDemo"
+        ref="wrapperRef"
+        class="terminal-window"
+        :style="{
+          top: position.y + 'px',
+          left: position.x + 'px'
+        }"
+      >
+        <div class="terminal-header" @mousedown="startDrag">
+          <div class="terminal-title">
+            <span class="terminal-icon">💻</span>
+            <span>{{ title }}</span>
+          </div>
+          <div class="terminal-controls">
+            <button 
+              class="control-button minimize" 
+              @click="centerWindow"
+              title="Center"
+            >
+              ⊡
+            </button>
+            <button 
+              class="control-button close" 
+              @click="closeDemo"
+              title="Close (ESC)"
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+        
+        <div class="terminal-body">
+          <Transition name="fade">
+            <div v-if="isLoading" class="loading-overlay">
+              <div class="spinner"></div>
+              <p>Loading emulator...</p>
+            </div>
+          </Transition>
+          
+          <div 
+            ref="container" 
+            class="terminal-container"
+            :style="{ opacity: isLoading ? 0 : 1 }"
+          ></div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.basalt-demo-wrapper {
+  position: relative;
+  margin: 1rem 0;
+}
+
+.code-block-container {
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--vp-code-block-bg, #1e1e1e);
+  border: 1px solid var(--vp-c-divider, #333);
+}
+
+.code-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background: rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid var(--vp-c-divider, #333);
+}
+
+.language-badge {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #888;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.run-button {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.75rem;
+  background: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.run-button:hover:not(:disabled) {
+  background: #45a049;
+  transform: translateY(-1px);
+}
+
+.run-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.loading-icon {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Code Block */
+.code-block {
+  overflow: auto;
+  max-height: 500px;
+}
+
+.code-block pre {
+  margin: 0;
+  padding: 1rem;
+  background: transparent;
+  font-family: 'Courier New', Consolas, monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #d4d4d4;
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.code-block code {
+  font-family: inherit;
+}
+
+.code-block :deep(.keyword) {
+  color: #C586C0;
+  font-weight: bold;
+}
+
+.code-block :deep(.string) {
+  color: #CE9178;
+}
+
+.code-block :deep(.comment) {
+  color: #6A9955;
+  font-style: italic;
+}
+
+.code-block :deep(.number) {
+  color: #B5CEA8;
+}
+
+.code-block :deep(.function) {
+  color: #DCDCAA;
+}
+
+.code-block :deep(.variable) {
+  color: #9CDCFE;
+}
+
+.terminal-window {
+  position: fixed;
+  width: 650px;
+  height: 480px;
+  background: #1a1a1a;
+  border-radius: 8px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  z-index: 9999;
+  border: 1px solid #333;
+}
+
+.terminal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: linear-gradient(180deg, #2a2a2a 0%, #222 100%);
+  border-bottom: 1px solid #111;
+  cursor: move;
+  user-select: none;
+  border-radius: 8px 8px 0 0;
+}
+
+.terminal-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.terminal-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.control-button {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  transition: all 0.2s ease;
+}
+
+.control-button.minimize {
+  background: #fbbf24;
+  color: #92400e;
+}
+
+.control-button.minimize:hover {
+  background: #f59e0b;
+}
+
+.control-button.close {
+  background: #ef4444;
+  color: white;
+}
+
+.control-button.close:hover {
+  background: #dc2626;
+}
+
+.terminal-body {
+  flex: 1;
+  position: relative;
+  background: #000;
+  border-radius: 0 0 8px 8px;
+  overflow: hidden;
+  height: calc(480px - 50px);
+}
+
+.terminal-container {
+  width: 100%;
+  height: 100%;
+  transition: opacity 0.3s ease;
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.9);
+  color: white;
+  z-index: 10;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-bottom: 1rem;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-from {
+  opacity: 0;
+}
+
+.dark .code-block-container {
+  background: #1e1e1e;
+}
+
+html:not(.dark) .code-block-container {
+  background: #f6f6f6;
+  border-color: #e0e0e0;
+}
+
+html:not(.dark) .code-block pre {
+  color: #333;
+}
+
+html:not(.dark) .code-header {
+  background: rgba(0, 0, 0, 0.05);
+  border-bottom-color: #e0e0e0;
+}
+
+html:not(.dark) .language-badge {
+  color: #666;
+}
+
+@media (max-width: 768px) {
+  .terminal-window {
+    width: 90vw !important;
+    max-width: 650px;
+    height: 70vh !important;
+    max-height: 480px;
+    left: 5vw !important;
+    top: 15vh !important;
+  }
+}
+</style>
--- a/docs/.vitepress/theme/emulator.js
+++ b/docs/.vitepress/theme/emulator.js
@@ -0,0 +1,258 @@
+// .vitepress/theme/emulator.js
+let globalComputerInstance = null
+let isGlobalLoading = false
+
+async function loadDependencies() {
+  const basalt = await fetch(
+    'https://raw.githubusercontent.com/Pyroxenium/Basalt2/refs/heads/main/release/basalt.lua'
+  ).then(res => res.text())
+
+  if (!window.require) {
+    await new Promise((resolve, reject) => {
+      const script = document.createElement('script')
+      script.src = 'https://copy-cat.squiddev.cc/require.js'
+      script.onload = resolve
+      script.onerror = reject
+      document.body.appendChild(script)
+    })
+  }
+
+  return basalt
+}
+
+async function runCodeInEmulator(code, title = 'Code Demo') {
+  console.log('runCodeInEmulator called with:', { code, title })
+
+  if (isGlobalLoading || globalComputerInstance) {
+    console.warn('Emulator already running')
+    return
+  }
+
+  isGlobalLoading = true
+  console.log('Starting emulator loading...')
+
+  try {
+    console.log('Loading dependencies...')
+    const basalt = await loadDependencies()
+    console.log('Dependencies loaded, basalt length:', basalt.length)
+
+    const tempContainer = document.createElement('div')
+    tempContainer.style.position = 'fixed'
+    tempContainer.style.top = '-9999px'
+    tempContainer.style.left = '-9999px'
+    tempContainer.style.width = '650px'
+    tempContainer.style.height = '480px'
+    tempContainer.style.padding = '0'
+    tempContainer.style.margin = '0'
+    tempContainer.style.border = 'none'
+    document.body.appendChild(tempContainer)
+    console.log('Temporary container created')
+
+    console.log('Setting up CopyCat...')
+    window.require.config({ paths: { copycat: 'https://copy-cat.squiddev.cc/' } })
+
+    window.require(['copycat/embed'], (setup) => {
+      console.log('CopyCat setup function received:', setup)
+
+      const setupPromise = setup(tempContainer, {
+        hdFont: 'https://copy-cat.squiddev.cc/term_font_hd-0506b6efe5f7feae.png',
+        files: {
+          'startup.lua': code,
+          'basalt.lua': basalt
+        },
+        label: title
+      })
+
+      console.log('Setup promise created:', setupPromise)
+
+      if (setupPromise && typeof setupPromise.then === 'function') {
+        setupPromise.then((computer) => {
+          console.log('Computer instance resolved from promise:', computer)
+          globalComputerInstance = computer
+
+          if (computer && typeof computer.run === 'function') {
+            computer.run()
+            console.log('Computer started running')
+          } else if (computer && typeof computer.start === 'function') {
+            computer.start()
+            console.log('Computer started with start()')
+          } else {
+            console.error('Computer does not have run or start method:', computer)
+            console.log('Available methods:', Object.getOwnPropertyNames(computer || {}))
+          }
+
+          console.log('Showing terminal window...')
+          showTerminalWindow(tempContainer, title)
+
+          isGlobalLoading = false
+          console.log('Emulator setup complete')
+        }).catch((error) => {
+          console.error('Error in setup promise:', error)
+          isGlobalLoading = false
+        })
+      } else {
+        console.log('Setup returned directly:', setupPromise)
+        globalComputerInstance = setupPromise
+
+        if (setupPromise && typeof setupPromise.run === 'function') {
+          setupPromise.run()
+          console.log('Computer started running (direct)')
+        } else {
+          console.error('Direct setup does not have run method:', setupPromise)
+        }
+
+        showTerminalWindow(tempContainer, title)
+        isGlobalLoading = false
+      }
+    })
+
+  } catch (error) {
+    console.error('Error starting emulator:', error)
+    isGlobalLoading = false
+  }
+}
+
+function showTerminalWindow(container, title) {
+  console.log('showTerminalWindow called with:', { container, title })
+
+  const windowDiv = document.createElement('div')
+  windowDiv.className = 'global-terminal-window'
+  console.log('Terminal window div created')
+
+  windowDiv.style.cssText = `
+    position: fixed;
+    width: 625px;
+    height: 425px;
+    background: #1a1a1a;
+    border-radius: 8px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
+    z-index: 9999;
+    border: 1px solid #333;
+    top: 100px;
+    left: 100px;
+  `
+
+  const header = document.createElement('div')
+  header.className = 'terminal-header'
+  header.style.cssText = `
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.2rem 1rem;
+    background: linear-gradient(180deg, #2a2a2a 0%, #222 100%);
+    border-bottom: 1px solid #111;
+    cursor: move;
+    user-select: none;
+    border-radius: 8px 8px 0 0;
+  `
+
+  const titleDiv = document.createElement('div')
+  titleDiv.innerHTML = `<span style="color: #fff; font-size: 0.875rem; font-weight: 500;">💻 ${title}</span>`
+
+  const controls = document.createElement('div')
+  controls.innerHTML = `
+    <button class="control-button close" style="width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer; background: #ef4444; color: white; font-size: 12px;" onclick="closeGlobalEmulator()">✕</button>
+  `
+
+  header.appendChild(titleDiv)
+  header.appendChild(controls)
+
+  const body = document.createElement('div')
+  body.style.cssText = `
+    flex: 1;
+    background: #000;
+    border-radius: 0 0 8px 8px;
+    overflow: hidden;
+    padding: 0;  /* <-- REDUCED FROM DEFAULT */
+    margin: 0;   /* <-- NO MARGIN */
+  `
+  body.appendChild(container)
+  container.style.position = 'static'
+  container.style.top = 'auto'
+  container.style.left = 'auto'
+  container.style.width = '100%'
+  container.style.height = '100%'
+  container.style.padding = '0'
+  container.style.margin = '0'
+
+  windowDiv.appendChild(header)
+  windowDiv.appendChild(body)
+
+  document.body.appendChild(windowDiv)
+  console.log('Terminal window added to body')
+
+  let isDragging = false
+  let offset = { x: 0, y: 0 }
+
+  header.addEventListener('mousedown', (e) => {
+    isDragging = true
+    offset.x = e.clientX - windowDiv.offsetLeft
+    offset.y = e.clientY - windowDiv.offsetTop
+  })
+
+  document.addEventListener('mousemove', (e) => {
+    if (!isDragging) return
+
+    const terminalWidth = windowDiv.offsetWidth
+    const terminalHeight = windowDiv.offsetHeight
+
+    let newX = e.clientX - offset.x
+    let newY = e.clientY - offset.y
+
+    const maxX = window.innerWidth - terminalWidth
+    const maxY = window.innerHeight - terminalHeight
+
+    newX = Math.max(0, Math.min(newX, maxX))
+    newY = Math.max(0, Math.min(newY, maxY))
+
+    windowDiv.style.left = newX + 'px'
+    windowDiv.style.top = newY + 'px'
+  })
+
+  document.addEventListener('mouseup', () => {
+    isDragging = false
+  })
+}
+
+function closeGlobalEmulator() {
+  if (globalComputerInstance) {
+    try {
+      globalComputerInstance.shutdown()
+    } catch (e) {
+      console.warn('Error shutting down:', e)
+    }
+    globalComputerInstance = null
+  }
+
+  const windowDiv = document.querySelector('.global-terminal-window')
+  if (windowDiv) {
+    document.body.removeChild(windowDiv)
+  }
+}
+
+window.runCodeBlock = function(button) {
+  console.log('Run button clicked!', button)
+  
+  const container = button.closest('.code-block-with-run')
+  console.log('Container found:', container)
+  
+  const codeContent = container.querySelector('.code-content')
+  console.log('Code content found:', codeContent)
+  
+  const dataCode = codeContent.getAttribute('data-code')
+  console.log('Data code:', dataCode)
+  
+  const code = atob(dataCode)
+  console.log('Decoded code:', code)
+  
+  const languageBadge = container.querySelector('.language-badge')
+  const language = languageBadge && languageBadge.textContent ? languageBadge.textContent : 'lua'
+  console.log('Language:', language)
+
+  console.log('Calling runCodeInEmulator...')
+  runCodeInEmulator(code, `Code Demo (${language})`)
+}
+
+window.closeGlobalEmulator = closeGlobalEmulator
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -1,11 +1,17 @@
 import CopyButton from 'vitepress-copy-helper';
 import 'vitepress-copy-helper/style.css'
 import DefaultTheme from 'vitepress/theme'
+import BasaltDemo from './components/BasaltDemo.vue'
+import BasaltDemoWithCode from './components/BasaltDemoWithCode.vue'
+import './emulator.js'
+import './styles.css'

 /** @type {import('vitepress').Theme} */
 export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.component('C', CopyButton)
+    app.component('BasaltDemo', BasaltDemo)
+    app.component('BasaltDemoWithCode', BasaltDemoWithCode)
  }
 }
--- a/docs/.vitepress/theme/styles.css
+++ b/docs/.vitepress/theme/styles.css
@@ -0,0 +1,88 @@
+/* .vitepress/theme/styles.css */
+
+.code-block-with-run {
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--vp-code-block-bg);
+  border: 1px solid var(--vp-c-divider);
+  margin: 1rem 0;
+}
+
+.code-block-with-run .code-header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0.4rem 0.4rem;
+  background: rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.code-block-with-run .language-badge {
+  display: none;
+}
+
+.code-block-with-run .run-button {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.15rem 0.75rem;
+  background: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.code-block-with-run .run-button:hover {
+  background: #45a049;
+  transform: translateY(-1px);
+}
+
+.code-block-with-run .code-content {
+  overflow: auto;
+  max-height: 500px;
+}
+
+.code-block-with-run .code-content pre {
+  background: transparent;
+  border: none;
+  margin: 0;
+  padding: 1rem;
+  font-family: 'Courier New', Consolas, monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #d4d4d4;
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.code-block-with-run .code-content pre code {
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+.code-block-with-run .code-data {
+  display: none;
+}
+
+.dark .code-block-with-run .code-content pre {
+  color: var(--vp-code-block-color);
+}
+
+html:not(.dark) .code-block-with-run .code-content pre {
+  color: var(--vp-code-block-color);
+}
+
+html:not(.dark) .code-block-with-run .code-header {
+  background: rgba(0, 0, 0, 0.05);
+  border-bottom-color: var(--vp-c-divider);
+}
+
+html:not(.dark) .code-block-with-run .language-badge {
+  color: #666;
+}
--- a/node_modules/.vue-global-types/vue_3.3_0.d.ts
+++ b/node_modules/.vue-global-types/vue_3.3_0.d.ts
@@ -0,0 +1,132 @@
+// @ts-nocheck
+export {};
+
+; declare module 'vue' {
+	export interface GlobalComponents { }
+	export interface GlobalDirectives { }
+}
+; declare global {
+	const __VLS_directiveBindingRestFields: { instance: null, oldValue: null, modifiers: any, dir: any };
+	const __VLS_unref: typeof import('vue').unref;
+	const __VLS_placeholder: any;
+
+	type __VLS_NativeElements = __VLS_SpreadMerge<SVGElementTagNameMap, HTMLElementTagNameMap>;
+	type __VLS_IntrinsicElements = import('vue/jsx-runtime').JSX.IntrinsicElements;
+	type __VLS_Element = import('vue/jsx-runtime').JSX.Element;
+	type __VLS_GlobalComponents = import('vue').GlobalComponents & Pick<typeof import('vue'), 'Transition' | 'TransitionGroup' | 'KeepAlive' | 'Suspense' | 'Teleport'>;
+	type __VLS_GlobalDirectives = import('vue').GlobalDirectives;
+	type __VLS_IsAny<T> = 0 extends 1 & T ? true : false;
+	type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A;
+	type __VLS_SpreadMerge<A, B> = Omit<A, keyof B> & B;
+	type __VLS_WithComponent<N0 extends string, LocalComponents, Self, N1 extends string, N2 extends string, N3 extends string> =
+		N1 extends keyof LocalComponents ? N1 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : { [K in N0]: LocalComponents[N1] } :
+		N2 extends keyof LocalComponents ? N2 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : { [K in N0]: LocalComponents[N2] } :
+		N3 extends keyof LocalComponents ? N3 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : { [K in N0]: LocalComponents[N3] } :
+		Self extends object ? { [K in N0]: Self } :
+		N1 extends keyof __VLS_GlobalComponents ? N1 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N1] } :
+		N2 extends keyof __VLS_GlobalComponents ? N2 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N2] } :
+		N3 extends keyof __VLS_GlobalComponents ? N3 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N3] } :
+		{};
+	type __VLS_FunctionalComponentCtx<T, K> = __VLS_PickNotAny<'__ctx' extends keyof __VLS_PickNotAny<K, {}>
+		? K extends { __ctx?: infer Ctx } ? NonNullable<Ctx> : never : any
+		, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any
+	>;
+	type __VLS_FunctionalComponentProps<T, K> = '__ctx' extends keyof __VLS_PickNotAny<K, {}>
+		? K extends { __ctx?: { props?: infer P } } ? NonNullable<P> : never
+		: T extends (props: infer P, ...args: any) => any ? P
+		: {};
+	type __VLS_FunctionalComponent<T> = (props: (T extends { $props: infer Props } ? Props : {}) & Record<string, unknown>, ctx?: any) => __VLS_Element & {
+		__ctx?: {
+			attrs?: any;
+			slots?: T extends { $slots: infer Slots } ? Slots : Record<string, any>;
+			emit?: T extends { $emit: infer Emit } ? Emit : {};
+			props?: (T extends { $props: infer Props } ? Props : {}) & Record<string, unknown>;
+			expose?: (exposed: T) => void;
+		};
+	};
+	type __VLS_IsFunction<T, K> = K extends keyof T
+		? __VLS_IsAny<T[K]> extends false
+		? unknown extends T[K]
+		? false
+		: true
+		: false
+		: false;
+	type __VLS_NormalizeComponentEvent<
+		Props,
+		Emits,
+		onEvent extends keyof Props,
+		Event extends keyof Emits,
+		CamelizedEvent extends keyof Emits,
+	> = __VLS_IsFunction<Props, onEvent> extends true
+		? Props
+		: __VLS_IsFunction<Emits, Event> extends true
+			? { [K in onEvent]?: Emits[Event] }
+			: __VLS_IsFunction<Emits, CamelizedEvent> extends true
+				? { [K in onEvent]?: Emits[CamelizedEvent] }
+				: Props;
+	// fix https://github.com/vuejs/language-tools/issues/926
+	type __VLS_UnionToIntersection<U> = (U extends unknown ? (arg: U) => unknown : never) extends ((arg: infer P) => unknown) ? P : never;
+	type __VLS_OverloadUnionInner<T, U = unknown> = U & T extends (...args: infer A) => infer R
+		? U extends T
+		? never
+		: __VLS_OverloadUnionInner<T, Pick<T, keyof T> & U & ((...args: A) => R)> | ((...args: A) => R)
+		: never;
+	type __VLS_OverloadUnion<T> = Exclude<
+		__VLS_OverloadUnionInner<(() => never) & T>,
+		T extends () => never ? never : () => never
+	>;
+	type __VLS_ConstructorOverloads<T> = __VLS_OverloadUnion<T> extends infer F
+		? F extends (event: infer E, ...args: infer A) => any
+		? { [K in E & string]: (...args: A) => void; }
+		: never
+		: never;
+	type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal<
+		__VLS_UnionToIntersection<
+			__VLS_ConstructorOverloads<T> & {
+				[K in keyof T]: T[K] extends any[] ? { (...args: T[K]): void } : never
+			}
+		>
+	>;
+	type __VLS_ResolveEmits<
+		Comp,
+		Emits,
+		TypeEmits = {},
+		NormalizedEmits = __VLS_NormalizeEmits<Emits> extends infer E ? string extends keyof E ? {} : E : never,
+	> = __VLS_SpreadMerge<NormalizedEmits, TypeEmits>;
+	type __VLS_ResolveDirectives<T> = {
+		[K in Exclude<keyof T, keyof __VLS_GlobalDirectives> & string as `v${Capitalize<K>}`]: T[K];
+	};
+	type __VLS_PrettifyGlobal<T> = { [K in keyof T as K]: T[K]; } & {};
+	type __VLS_UseTemplateRef<T> = Readonly<import('vue').ShallowRef<T | null>>;
+
+	function __VLS_getVForSourceType<T extends number | string | any[] | Iterable<any>>(source: T): [
+		item: T extends number ? number
+			: T extends string ? string
+			: T extends any[] ? T[number]
+			: T extends Iterable<infer T1> ? T1
+			: any,
+		index: number,
+	][];
+	function __VLS_getVForSourceType<T>(source: T): [
+		item: T[keyof T],
+		key: keyof T,
+		index: number,
+	][];
+	function __VLS_getSlotParameters<S, D extends S>(slot: S, decl?: D):
+		D extends (...args: infer P) => any ? P : any[];
+	function __VLS_asFunctionalDirective<T>(dir: T): T extends import('vue').ObjectDirective
+		? NonNullable<T['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']>
+		: T extends (...args: any) => any
+			? T
+			: (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown) => void;
+	function __VLS_makeOptional<T>(t: T): { [K in keyof T]?: T[K] };
+	function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K):
+		T extends new (...args: any) => any ? __VLS_FunctionalComponent<K>
+		: T extends () => any ? (props: {}, ctx?: any) => ReturnType<T>
+		: T extends (...args: any) => any ? T
+		: __VLS_FunctionalComponent<{}>;
+	function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
+	function __VLS_asFunctionalElement<T>(tag: T, endTag?: T): (attrs: T & Record<string, unknown>) => void;
+	function __VLS_asFunctionalSlot<S>(slot: S): S extends () => infer R ? (props: {}) => R : NonNullable<S>;
+	function __VLS_tryAsConstant<const T>(t: T): T;
+}