├── src
    ├── data
    │   ├── colors.ts
    │   └── examples.ts
    ├── shims-vue.d.ts
    ├── utils
    │   ├── delay.ts
    │   ├── formatter.ts
    │   └── parser.ts
    ├── components
    │   ├── QueueView.vue
    │   ├── StackView.vue
    │   ├── TerminalLog.vue
    │   ├── Controls.vue
    │   ├── CodeEditor.vue
    │   ├── HelloWorld.vue
    │   └── ExecutionVisualizer.vue
    ├── composables
    │   ├── useAnimator.ts
    │   ├── useParser.ts
    │   └── useExecutionFlow.ts
    ├── vite-env.d.ts
    ├── main.ts
    ├── App.vue
    ├── store
    │   └── execution.ts
    ├── assets
    │   └── vue.svg
    ├── views
    │   └── HomeView.vue
    └── style.css
├── .vscode
    └── extensions.json
├── tsconfig.json
├── vite.config.ts
├── .gitignore
├── index.html
├── tsconfig.app.json
├── README.md
├── tsconfig.node.json
├── package.json
└── public
    └── vite.svg


/src/data/colors.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/utils/delay.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/data/examples.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/utils/formatter.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/utils/parser.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/components/QueueView.vue:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/components/StackView.vue:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/components/TerminalLog.vue:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/composables/useAnimator.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import { createPinia } from 'pinia'
 4 | 
 5 | import './style.css'
 6 | 
 7 | const app = createApp(App)
 8 | app.use(createPinia())
 9 | app.mount('#app')
10 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "types": ["node"],
 7 |     "baseUrl": ".",
 8 |     "paths": {
 9 |       "@/*": ["src/*"]
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="app-container">
 3 |     <HomeView />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 | import HomeView from './views/HomeView.vue'
 9 | </script>
10 | 
11 | <style scoped>
12 | .app-container {
13 |   padding: 20px;
14 |   font-family: sans-serif;
15 | }
16 | </style>
17 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'node:url'
 2 | import { defineConfig } from 'vite'
 3 | import vue from '@vitejs/plugin-vue'
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [vue()],
 8 |   resolve: {
 9 |     alias: {
10 |       '@': fileURLToPath(new URL('./src', import.meta.url))
11 |     }
12 |   }
13 | })
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/src/store/execution.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | import type { ExecutionStep } from '../composables/useExecutionFlow'
 3 | 
 4 | export const useExecutionStore = defineStore('execution', {
 5 |   state: () => ({
 6 |     steps: [] as ExecutionStep[]
 7 |   }),
 8 |   actions: {
 9 |     setSteps(newSteps: ExecutionStep[]) {
10 |       this.steps = newSteps
11 |     }
12 |   }
13 | })
14 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + Vue + TS</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/composables/useParser.ts:
--------------------------------------------------------------------------------
 1 | import * as esprima from 'esprima'
 2 | 
 3 | export function useParser() {
 4 |   const parseCodeToAST = (code: string) => {
 5 |     try {
 6 |       const ast = esprima.parseScript(code, { loc: true })
 7 |       return ast
 8 |     } catch (err) {
 9 |       console.error('Parsing error:', err)
10 |       return null
11 |     }
12 |   }
13 | 
14 |   return {
15 |     parseCodeToAST
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "compilerOptions": {
 4 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 5 | 
 6 |     /* Linting */
 7 |     "strict": true,
 8 |     "noUnusedLocals": true,
 9 |     "noUnusedParameters": true,
10 |     "noFallthroughCasesInSwitch": true,
11 |     "noUncheckedSideEffectImports": true
12 |   },
13 |   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
14 | }
15 | 


--------------------------------------------------------------------------------
/src/assets/vue.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <<<<<<< HEAD
 2 | # Vue 3 + TypeScript + Vite
 3 | 
 4 | This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 5 | 
 6 | Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
 7 | =======
 8 | # open-source2 hello world
 9 | >>>>>>> 12a5006804526e81d021d709c928b89182997b4e
10 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 4 |     "target": "ES2022",
 5 |     "lib": ["ES2023"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "isolatedModules": true,
13 |     "moduleDetection": "force",
14 |     "noEmit": true,
15 | 
16 |     /* Linting */
17 |     "strict": true,
18 |     "noUnusedLocals": true,
19 |     "noUnusedParameters": true,
20 |     "noFallthroughCasesInSwitch": true,
21 |     "noUncheckedSideEffectImports": true
22 |   },
23 |   "include": ["vite.config.ts"]
24 | }
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "code-editor",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vue-tsc -b && vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "d3": "^7.9.0",
13 |     "esprima": "^4.0.1",
14 |     "lottie-web": "^5.12.2",
15 |     "monaco-editor": "^0.52.2",
16 |     "pinia": "^3.0.2",
17 |     "vue": "^3.5.13"
18 |   },
19 |   "devDependencies": {
20 |     "@types/esprima": "^4.0.6",
21 |     "@types/node": "^22.14.1",
22 |     "@vitejs/plugin-vue": "^5.2.2",
23 |     "@vue/tsconfig": "^0.7.0",
24 |     "typescript": "~5.7.2",
25 |     "vite": "^6.3.1",
26 |     "vue-tsc": "^2.2.8"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/Controls.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="controls">
 3 |       <button @click="$emit('run')">▶️ Run</button>
 4 |       <button disabled>⏸ Pause</button>
 5 |       <button disabled>⏭ Step</button>
 6 |     </div>
 7 |   </template>
 8 |   
 9 |   <script setup lang="ts">
10 |   // emits defined in template
11 |   </script>
12 |   
13 |   <style scoped>
14 |   .controls {
15 |     display: flex;
16 |     gap: 10px;
17 |     margin-bottom: 20px;
18 |   }
19 |   
20 |   button {
21 |     background: #4f46e5;
22 |     color: white;
23 |     border: none;
24 |     padding: 8px 14px;
25 |     border-radius: 6px;
26 |     font-weight: bold;
27 |     cursor: pointer;
28 |     transition: 0.3s;
29 |   }
30 |   
31 |   button:hover {
32 |     background: #4338ca;
33 |   }
34 |   
35 |   button:disabled {
36 |     background: #aaa;
37 |     cursor: not-allowed;
38 |   }
39 |   </style>
40 |   


--------------------------------------------------------------------------------
/src/components/CodeEditor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="code-editor">
 3 |       <label>✍️ Write your code here:</label>
 4 |       <textarea v-model="editableValue" rows="10" />
 5 |     </div>
 6 |   </template>
 7 |   
 8 |   <script setup lang="ts">
 9 |   import { computed } from 'vue'
10 |   
11 |   const props = defineProps<{
12 |     modelValue: string
13 |   }>()
14 |   
15 |   const emit = defineEmits<{
16 |     (e: 'update:modelValue', value: string): void
17 |   }>()
18 |   
19 |   const editableValue = computed({
20 |     get: () => props.modelValue,
21 |     set: (val: string) => emit('update:modelValue', val)
22 |   })
23 |   </script>
24 |   
25 |   <style scoped>
26 |   .code-editor {
27 |     margin-bottom: 1rem;
28 |   }
29 |   
30 |   textarea {
31 |     width: 100%;
32 |     font-family: monospace;
33 |     font-size: 14px;
34 |     padding: 10px;
35 |     border-radius: 8px;
36 |     border: 1px solid #ccc;
37 |     background: #f9f9f9;
38 |     resize: vertical;
39 |   }
40 |   </style>
41 |   


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | 
 4 | defineProps<{ msg: string }>()
 5 | 
 6 | const count = ref(0)
 7 | </script>
 8 | 
 9 | <template>
10 |   <h1>{{ msg }}</h1>
11 | 
12 |   <div class="card">
13 |     <button type="button" @click="count++">count is {{ count }}</button>
14 |     <p>
15 |       Edit
16 |       <code>components/HelloWorld.vue</code> to test HMR
17 |     </p>
18 |   </div>
19 | 
20 |   <p>
21 |     Check out
22 |     <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
23 |       >create-vue</a
24 |     >, the official Vue + Vite starter
25 |   </p>
26 |   <p>
27 |     Learn more about IDE Support for Vue in the
28 |     <a
29 |       href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
30 |       target="_blank"
31 |       >Vue Docs Scaling up Guide</a
32 |     >.
33 |   </p>
34 |   <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
35 | </template>
36 | 
37 | <style scoped>
38 | .read-the-docs {
39 |   color: #888;
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 |   import { ref } from 'vue'
 3 |   
 4 |   import CodeEditor from '../components/CodeEditor.vue'
 5 |   import Controls from '../components/Controls.vue'
 6 |   import ExecutionVisualizer from '../components/ExecutionVisualizer.vue'
 7 |   import { useParser } from '../composables/useParser'
 8 | 
 9 |   import { useExecutionFlow } from '@/composables/useExecutionFlow'
10 | import { useExecutionStore } from '@/store/execution'
11 | 
12 | const code = ref(`function greet() {
13 |   console.log("Hello, world!");
14 | }
15 | greet();`)
16 | 
17 | const { parseCodeToAST } = useParser()
18 | const { analyzeAST } = useExecutionFlow()
19 | const store = useExecutionStore()
20 | 
21 | const handleRun = () => {
22 |   const ast = parseCodeToAST(code.value)
23 |   if (!ast) return
24 | 
25 |   const steps = analyzeAST(ast)
26 |   store.setSteps(steps)
27 | }
28 |   </script>
29 |   <template>
30 |     <div class="home">
31 |       <h1>JS Execution Visualizer</h1>
32 |       <CodeEditor v-model="code" />
33 |       <Controls @run="handleRun" />
34 |       <ExecutionVisualizer :code="code" />
35 |     </div>
36 |   </template>
37 |   <style scoped>
38 |   .home {
39 |     max-width: 900px;
40 |     margin: auto;
41 |   }
42 |   </style>
43 |   


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/composables/useExecutionFlow.ts:
--------------------------------------------------------------------------------
 1 | import { Program, CallExpression } from 'estree'
 2 | 
 3 | export interface ExecutionStep {
 4 |   type: 'callStack' | 'microtask' | 'macrotask' | 'log'
 5 |   label: string
 6 | }
 7 | 
 8 | export function useExecutionFlow() {
 9 |   const analyzeAST = (ast: Program): ExecutionStep[] => {
10 |     const steps: ExecutionStep[] = []
11 | 
12 |     const walk = (node: any) => {
13 |       if (!node) return
14 | 
15 |       switch (node.type) {
16 |         case 'CallExpression': {
17 |           const calleeName = node.callee?.name || ''
18 | 
19 |           if (calleeName === 'console') {
20 |             steps.push({ type: 'log', label: 'console.log()' })
21 |           } else if (calleeName === 'setTimeout') {
22 |             steps.push({ type: 'macrotask', label: 'setTimeout()' })
23 |           } else if (calleeName === 'Promise') {
24 |             steps.push({ type: 'microtask', label: 'Promise.resolve()' })
25 |           } else {
26 |             steps.push({ type: 'callStack', label: `${calleeName}()` })
27 |           }
28 | 
29 |           // recurse arguments
30 |           node.arguments?.forEach(walk)
31 |           break
32 |         }
33 | 
34 |         case 'ExpressionStatement':
35 |         case 'VariableDeclaration':
36 |         case 'FunctionDeclaration':
37 |         case 'BlockStatement':
38 |         case 'Program': {
39 |           Object.values(node.body || []).forEach(walk)
40 |           break
41 |         }
42 |       }
43 |     }
44 | 
45 |     walk(ast)
46 |     return steps
47 |   }
48 | 
49 |   return { analyzeAST }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
 3 |   line-height: 1.5;
 4 |   font-weight: 400;
 5 | 
 6 |   color-scheme: light dark;
 7 |   color: rgba(255, 255, 255, 0.87);
 8 |   background-color: #242424;
 9 | 
10 |   font-synthesis: none;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | 
16 | a {
17 |   font-weight: 500;
18 |   color: #646cff;
19 |   text-decoration: inherit;
20 | }
21 | a:hover {
22 |   color: #535bf2;
23 | }
24 | 
25 | body {
26 |   margin: 0;
27 |   display: flex;
28 |   place-items: center;
29 |   min-width: 320px;
30 |   min-height: 100vh;
31 | }
32 | 
33 | h1 {
34 |   font-size: 3.2em;
35 |   line-height: 1.1;
36 | }
37 | 
38 | button {
39 |   border-radius: 8px;
40 |   border: 1px solid transparent;
41 |   padding: 0.6em 1.2em;
42 |   font-size: 1em;
43 |   font-weight: 500;
44 |   font-family: inherit;
45 |   background-color: #1a1a1a;
46 |   cursor: pointer;
47 |   transition: border-color 0.25s;
48 | }
49 | button:hover {
50 |   border-color: #646cff;
51 | }
52 | button:focus,
53 | button:focus-visible {
54 |   outline: 4px auto -webkit-focus-ring-color;
55 | }
56 | 
57 | .card {
58 |   padding: 2em;
59 | }
60 | 
61 | #app {
62 |   max-width: 1280px;
63 |   margin: 0 auto;
64 |   padding: 2rem;
65 |   text-align: center;
66 | }
67 | 
68 | @media (prefers-color-scheme: light) {
69 |   :root {
70 |     color: #213547;
71 |     background-color: #ffffff;
72 |   }
73 |   a:hover {
74 |     color: #747bff;
75 |   }
76 |   button {
77 |     background-color: #f9f9f9;
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/components/ExecutionVisualizer.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { storeToRefs } from 'pinia'
 3 | import { useExecutionStore } from '../store/execution'
 4 | import { computed } from 'vue'
 5 | 
 6 | const { steps } = storeToRefs(useExecutionStore())
 7 | 
 8 | const callStack = computed(() =>
 9 |   steps.value.filter((step) => step.type === 'callStack')
10 | )
11 | const microtasks = computed(() =>
12 |   steps.value.filter((step) => step.type === 'microtask')
13 | )
14 | const macrotasks = computed(() =>
15 |   steps.value.filter((step) => step.type === 'macrotask')
16 | )
17 | </script>
18 | 
19 | <template>
20 |   <div class="visualizer">
21 |     <div class="section">
22 |       <h3>📚 Call Stack</h3>
23 |       <div class="stack-box">
24 |         <div v-for="(item, index) in callStack" :key="index" class="stack-item">
25 |           {{ item.label }}
26 |         </div>
27 |       </div>
28 |     </div>
29 | 
30 |     <div class="section">
31 |       <h3>🧩 Microtask Queue</h3>
32 |       <div class="queue-box">
33 |         <div v-for="(item, index) in microtasks" :key="index" class="queue-item">
34 |           {{ item.label }}
35 |         </div>
36 |       </div>
37 |     </div>
38 | 
39 |     <div class="section">
40 |       <h3>⏱ Macrotask Queue</h3>
41 |       <div class="queue-box">
42 |         <div v-for="(item, index) in macrotasks" :key="index" class="queue-item">
43 |           {{ item.label }}
44 |         </div>
45 |       </div>
46 |     </div>
47 |   </div>
48 | </template>
49 |   
50 |   <style scoped>
51 |   .visualizer {
52 |     display: grid;
53 |     grid-template-columns: repeat(3, 1fr);
54 |     gap: 20px;
55 |   }
56 |   
57 |   .section {
58 |     background: #f3f4f6;
59 |     border-radius: 10px;
60 |     padding: 1rem;
61 |     box-shadow: 0 0 10px #e5e7eb;
62 |   }
63 |   
64 |   .stack-box,
65 |   .queue-box {
66 |     margin-top: 10px;
67 |     min-height: 120px;
68 |     background: white;
69 |     border-radius: 8px;
70 |     padding: 10px;
71 |     border: 1px solid #ddd;
72 |   }
73 |   
74 |   .stack-item,
75 |   .queue-item {
76 |     background: #e0e7ff;
77 |     padding: 6px 10px;
78 |     margin-bottom: 6px;
79 |     border-radius: 6px;
80 |     text-align: center;
81 |     font-weight: 500;
82 |   }
83 |   </style>
84 |   


--------------------------------------------------------------------------------