From 713259952ef96e7e21bbad557d91c1c7a39b9f5b Mon Sep 17 00:00:00 2001
From: Fine Archs <cicada1003@gmail.com>
Date: Tue, 7 Nov 2023 21:57:03 +0900
Subject: [PATCH] Revert "MainArea"

This reverts commit a8bb0ebfac687064bcd738cfc3429ce22623f871.
---
 src/App.vue                                   |  23 ++-
 src/versions/0.14.1/index.ts                  |  55 ------
 .../0.14.1/index.vue}                         | 128 +++++++-----
 src/versions/0.15.0/index.ts                  |  55 ------
 src/versions/0.15.0/index.vue                 | 184 +++++++++++++++++
 src/versions/0.16.0/index.ts                  |  56 ------
 src/versions/0.16.0/index.vue                 | 187 ++++++++++++++++++
 src/versions/develop/index.ts                 |  56 ------
 src/versions/develop/index.vue                | 187 ++++++++++++++++++
 src/versions/next/index.ts                    |  56 ------
 src/versions/next/index.vue                   | 187 ++++++++++++++++++
 11 files changed, 837 insertions(+), 337 deletions(-)
 delete mode 100644 src/versions/0.14.1/index.ts
 rename src/{MainArea.vue => versions/0.14.1/index.vue} (52%)
 delete mode 100644 src/versions/0.15.0/index.ts
 create mode 100644 src/versions/0.15.0/index.vue
 delete mode 100644 src/versions/0.16.0/index.ts
 create mode 100644 src/versions/0.16.0/index.vue
 delete mode 100644 src/versions/develop/index.ts
 create mode 100644 src/versions/develop/index.vue
 delete mode 100644 src/versions/next/index.ts
 create mode 100644 src/versions/next/index.vue

diff --git a/src/App.vue b/src/App.vue
index 27295e0..c965a69 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,4 @@
 <template>
-	<div id='wrapper'>
   <h1>
     AiScript (
     <MenuButton id="version" :options="menu" @select="onVersionSelect">{{
@@ -7,16 +6,23 @@
     }}</MenuButton>
     ) Playground
   </h1>
-	<div v-for='v in versions'>
-		<MainArea :ver='v' v-if='v==version'/>
-	</div>
-	</div>
+  <Next v-if="version === 'next'"></Next>
+  <Develop v-if="version === 'develop'"></Develop>
+  <V0_16_0 v-if="version === '0.16.0'"></V0_16_0>
+  <V0_15_0 v-if="version === '0.15.0'"></V0_15_0>
+  <V0_14_1 v-if="version === '0.14.1'"></V0_14_1>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
-import MainArea, { versions, latest } from './MainArea.vue';
 import MenuButton from "@common/MenuButton.vue";
+import Next from "./versions/next/index.vue";
+import Develop from "./versions/develop/index.vue";
+import V0_16_0 from "./versions/0.16.0/index.vue";
+import V0_15_0 from "./versions/0.15.0/index.vue";
+import V0_14_1 from "./versions/0.14.1/index.vue";
+const versions = ["next", "develop", "0.16.0", "0.15.0", "0.14.1"] as const;
+const latest = "0.16.0";
 
 const version = ref(window.localStorage.getItem("version") ?? latest);
 const menu = Object.fromEntries(
@@ -56,11 +62,8 @@ body {
 </style>
 
 <style scoped>
-#wrapper {
-	padding: 16px;
-}
 h1 {
   font-size: 1.5em;
-  margin: 0 16px;
+  margin: 16px 16px 0 16px;
 }
 </style>
diff --git a/src/versions/0.14.1/index.ts b/src/versions/0.14.1/index.ts
deleted file mode 100644
index 33c17c3..0000000
--- a/src/versions/0.14.1/index.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Interpreter, Parser, values, utils, Ast } from "./version.ts";
-import { version, samples } from "./version.ts";
-import type { Log } from '@/MainArea.vue';
-
-export { version, samples };
-
-let ast: Ast.Node[] = [];
-let interpreter: Interpreter | null = null;
-
-export function parse(code: string): string {
-	ast = Parser.parse(code);
-	return JSON.stringify(ast, null, "\t");
-}
-
-export async function exec(io: {
-	in: (q: string) => Promise<string>;
-	out: (l: Log) => void;
-	end: (l: Log) => void;
-	err: (e: any) => void;
-}): Promise<void> {
-  interpreter?.abort();
-  interpreter = new Interpreter(
-    {},
-    {
-			in: io.in,
-      out: (value: values.Value) => {
-        io.out({
-          id: Math.random(),
-          type: value.type,
-          text: utils.valToString(value, true),
-          print: true,
-        });
-      },
-      log: (type: string, params: Record<string, any>) => {
-        switch (type) {
-          case "end":
-            io.end({
-              id: Math.random(),
-              text: utils.valToString(params.val, true),
-              print: false,
-            });
-            break;
-          default:
-            break;
-        }
-      },
-    },
-  );
-
-  try {
-    await interpreter.exec(ast);
-  } catch (e) {
-		io.err(e);
-  }
-};
diff --git a/src/MainArea.vue b/src/versions/0.14.1/index.vue
similarity index 52%
rename from src/MainArea.vue
rename to src/versions/0.14.1/index.vue
index 9be2223..b5f65c6 100644
--- a/src/MainArea.vue
+++ b/src/versions/0.14.1/index.vue
@@ -22,7 +22,7 @@
     <div id="grid2">
       <Container id="ast">
         <template #header>AST</template>
-        <pre>{{ ast }}</pre>
+        <pre>{{ JSON.stringify(ast, null, "\t") }}</pre>
       </Container>
       <Container id="bin">
         <template #header>Bytecode</template>
@@ -35,43 +35,26 @@
   </div>
 </template>
 
-<script lang="ts">
-export const versions = ["next", "develop", "0.16.0", "0.15.0", "0.14.1"] as const;
-export const latest = "0.16.0" as const;
-export type Log = {
-	id: number;
-	type?: string;
-	text?: string;
-	print?: boolean;
-}
-</script>
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { Interpreter, Parser, values, utils, Ast } from "./version.ts";
+import { version, samples } from "./version.ts";
 import Editor from "@common/Editor.vue";
 import Container from "@common/Container.vue";
-import * as Next from "@/versions/next/index.ts";
-import * as Develop from "@/versions/develop/index.ts";
-import * as V0_16_0 from "@/versions/0.16.0/index.ts";
-import * as V0_15_0 from "@/versions/0.15.0/index.ts";
-import * as V0_14_1 from "@/versions/0.14.1/index.ts";
-
-const props = defineProps<{
-	ver: typeof versions[number];
-}>();
-const { parse, exec, version, samples } = {
-	'next': Next,
-	'develop': Develop,
-	'0.16.0': V0_16_0,
-	'0.15.0': V0_15_0,
-	'0.14.1': V0_14_1,
-}[props.ver];
 
 const script = ref(
   window.localStorage.getItem(version) ?? '<: "Hello, AiScript!"',
 );
 
-const logs = ref<Log[]>([]);
-const ast = ref<string>('');
+const ast = ref<Ast.Node[] | null>(null);
+const logs = ref<
+  {
+    id: number;
+    type?: string;
+    text?: string;
+    print?: boolean;
+  }[]
+>([]);
 const syntaxErrorMessage = ref<string | null>(null);
 
 watch(
@@ -79,7 +62,7 @@ watch(
   () => {
     window.localStorage.setItem(version, script.value);
     try {
-      ast.value = parse(script.value);
+      ast.value = Parser.parse(script.value);
       syntaxErrorMessage.value = null;
     } catch (e) {
       const err = e as Error;
@@ -87,24 +70,57 @@ watch(
       console.error("info" in err ? err.info : err);
       return;
     }
-  }, { immediate: true, }
+  },
+  {
+    immediate: true,
+  },
 );
 
-function run() {
+let interpreter: Interpreter | null = null;
+const run = async () => {
   logs.value = [];
-	exec({
-		in: (q: string) => new Promise((ok) => {
-			const res = window.prompt(q);
-			ok(res ?? "");
-		}),
-		out: (l: Log) => logs.value.push(l),
-		end: (l: Log) => logs.value.push(l),
-		err: (e: any) => {
-			console.error(e);
-			window.alert(`{e}`);
-		}
-	});
-}
+
+  interpreter?.abort();
+  interpreter = new Interpreter(
+    {},
+    {
+      in: (q: string) => {
+        return new Promise((ok) => {
+          const res = window.prompt(q);
+          ok(res ?? "");
+        });
+      },
+      out: (value: values.Value) => {
+        logs.value.push({
+          id: Math.random(),
+          type: value.type,
+          text: utils.valToString(value, true),
+          print: true,
+        });
+      },
+      log: (type: string, params: Record<string, any>) => {
+        switch (type) {
+          case "end":
+            logs.value.push({
+              id: Math.random(),
+              text: utils.valToString(params.val, true),
+              print: false,
+            });
+            break;
+          default:
+            break;
+        }
+      },
+    },
+  );
+
+  try {
+    await interpreter.exec(ast.value!);
+  } catch (e) {
+    console.error(e);
+    window.alert(`{e}`);
+  }
+};
 </script>
 
 <style scoped>
@@ -118,16 +134,30 @@ pre {
   height: 100vh;
 }
 
-.grid {
+#grid1 {
+  box-sizing: border-box;
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 16px;
+  padding: 16px 16px 16px 16px;
+  min-height: 0;
+}
+#grid1 > * {
+  min-height: 0;
+}
+#grid2 {
   box-sizing: border-box;
   flex: 1;
   display: grid;
-  grid-template-columns:
-		repeat(auto-fit, min-max(100px, 1fr));
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr;
   grid-gap: 16px;
+  padding: 0 16px 16px 16px;
   min-height: 0;
 }
-.grid > * {
+#grid2 > * {
   min-height: 0;
 }
 
diff --git a/src/versions/0.15.0/index.ts b/src/versions/0.15.0/index.ts
deleted file mode 100644
index 33c17c3..0000000
--- a/src/versions/0.15.0/index.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Interpreter, Parser, values, utils, Ast } from "./version.ts";
-import { version, samples } from "./version.ts";
-import type { Log } from '@/MainArea.vue';
-
-export { version, samples };
-
-let ast: Ast.Node[] = [];
-let interpreter: Interpreter | null = null;
-
-export function parse(code: string): string {
-	ast = Parser.parse(code);
-	return JSON.stringify(ast, null, "\t");
-}
-
-export async function exec(io: {
-	in: (q: string) => Promise<string>;
-	out: (l: Log) => void;
-	end: (l: Log) => void;
-	err: (e: any) => void;
-}): Promise<void> {
-  interpreter?.abort();
-  interpreter = new Interpreter(
-    {},
-    {
-			in: io.in,
-      out: (value: values.Value) => {
-        io.out({
-          id: Math.random(),
-          type: value.type,
-          text: utils.valToString(value, true),
-          print: true,
-        });
-      },
-      log: (type: string, params: Record<string, any>) => {
-        switch (type) {
-          case "end":
-            io.end({
-              id: Math.random(),
-              text: utils.valToString(params.val, true),
-              print: false,
-            });
-            break;
-          default:
-            break;
-        }
-      },
-    },
-  );
-
-  try {
-    await interpreter.exec(ast);
-  } catch (e) {
-		io.err(e);
-  }
-};
diff --git a/src/versions/0.15.0/index.vue b/src/versions/0.15.0/index.vue
new file mode 100644
index 0000000..b5f65c6
--- /dev/null
+++ b/src/versions/0.15.0/index.vue
@@ -0,0 +1,184 @@
+<template>
+  <div id="root">
+    <div id="grid1">
+      <Editor
+        v-model="script"
+        :samples="samples"
+        :parseError="syntaxErrorMessage"
+        @run="run"
+      />
+      <Container id="logs">
+        <template #header>Output</template>
+        <div
+          v-for="log in logs"
+          class="log"
+          :key="log.id"
+          :class="[{ print: log.print }, log.type]"
+        >
+          <span class="type">{{ log.type }}</span> {{ log.text }}
+        </div>
+      </Container>
+    </div>
+    <div id="grid2">
+      <Container id="ast">
+        <template #header>AST</template>
+        <pre>{{ JSON.stringify(ast, null, "\t") }}</pre>
+      </Container>
+      <Container id="bin">
+        <template #header>Bytecode</template>
+        <header></header>
+      </Container>
+      <Container id="debugger">
+        <template #header>Debugger</template>
+      </Container>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { Interpreter, Parser, values, utils, Ast } from "./version.ts";
+import { version, samples } from "./version.ts";
+import Editor from "@common/Editor.vue";
+import Container from "@common/Container.vue";
+
+const script = ref(
+  window.localStorage.getItem(version) ?? '<: "Hello, AiScript!"',
+);
+
+const ast = ref<Ast.Node[] | null>(null);
+const logs = ref<
+  {
+    id: number;
+    type?: string;
+    text?: string;
+    print?: boolean;
+  }[]
+>([]);
+const syntaxErrorMessage = ref<string | null>(null);
+
+watch(
+  script,
+  () => {
+    window.localStorage.setItem(version, script.value);
+    try {
+      ast.value = Parser.parse(script.value);
+      syntaxErrorMessage.value = null;
+    } catch (e) {
+      const err = e as Error;
+      syntaxErrorMessage.value = err.message;
+      console.error("info" in err ? err.info : err);
+      return;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+let interpreter: Interpreter | null = null;
+const run = async () => {
+  logs.value = [];
+
+  interpreter?.abort();
+  interpreter = new Interpreter(
+    {},
+    {
+      in: (q: string) => {
+        return new Promise((ok) => {
+          const res = window.prompt(q);
+          ok(res ?? "");
+        });
+      },
+      out: (value: values.Value) => {
+        logs.value.push({
+          id: Math.random(),
+          type: value.type,
+          text: utils.valToString(value, true),
+          print: true,
+        });
+      },
+      log: (type: string, params: Record<string, any>) => {
+        switch (type) {
+          case "end":
+            logs.value.push({
+              id: Math.random(),
+              text: utils.valToString(params.val, true),
+              print: false,
+            });
+            break;
+          default:
+            break;
+        }
+      },
+    },
+  );
+
+  try {
+    await interpreter.exec(ast.value!);
+  } catch (e) {
+    console.error(e);
+    window.alert(`{e}`);
+  }
+};
+</script>
+
+<style scoped>
+pre {
+  margin: 0;
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+#grid1 {
+  box-sizing: border-box;
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 16px;
+  padding: 16px 16px 16px 16px;
+  min-height: 0;
+}
+#grid1 > * {
+  min-height: 0;
+}
+#grid2 {
+  box-sizing: border-box;
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 16px;
+  padding: 0 16px 16px 16px;
+  min-height: 0;
+}
+#grid2 > * {
+  min-height: 0;
+}
+
+#logs .log .type {
+  opacity: 0.5;
+  color: #fff;
+}
+#logs .log:not(.print) {
+  opacity: 0.7;
+}
+#logs .log.num {
+  color: #0ff;
+}
+#logs .log.str {
+  color: #ff0;
+}
+
+#ast {
+}
+
+.actions {
+  margin-left: auto;
+}
+</style>
diff --git a/src/versions/0.16.0/index.ts b/src/versions/0.16.0/index.ts
deleted file mode 100644
index b5fdb4d..0000000
--- a/src/versions/0.16.0/index.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Interpreter, Parser, values, utils, Ast } from "./version.ts";
-import { version, samples } from "./version.ts";
-import type { Log } from '@/MainArea.vue';
-
-export { version, samples };
-
-let ast: Ast.Node[] = [];
-let interpreter: Interpreter | null = null;
-
-export function parse(code: string): string {
-	ast = Parser.parse(code);
-	return JSON.stringify(ast, null, "\t");
-}
-
-export async function exec(io: {
-	in: (q: string) => Promise<string>;
-	out: (l: Log) => void;
-	end: (l: Log) => void;
-	err: (e: any) => void;
-}): Promise<void> {
-  interpreter?.abort();
-  interpreter = new Interpreter(
-    {},
-    {
-			in: io.in,
-      out: (value: values.Value) => {
-        io.out({
-          id: Math.random(),
-          type: value.type,
-          text: utils.valToString(value, true),
-          print: true,
-        });
-      },
-      err: io.err,
-      log: (type: string, params: Record<string, any>) => {
-        switch (type) {
-          case "end":
-            io.end({
-              id: Math.random(),
-              text: utils.valToString(params.val, true),
-              print: false,
-            });
-            break;
-          default:
-            break;
-        }
-      },
-    },
-  );
-
-  try {
-    await interpreter.exec(ast);
-  } catch (e) {
-		io.err(e);
-  }
-};
diff --git a/src/versions/0.16.0/index.vue b/src/versions/0.16.0/index.vue
new file mode 100644
index 0000000..06222c2
--- /dev/null
+++ b/src/versions/0.16.0/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <div id="root">
+    <div id="grid1">
+      <Editor
+        v-model="script"
+        :samples="samples"
+        :parseError="syntaxErrorMessage"
+        @run="run"
+      />
+      <Container id="logs">
+        <template #header>Output</template>
+        <div
+          v-for="log in logs"
+          class="log"
+          :key="log.id"
+          :class="[{ print: log.print }, log.type]"
+        >
+          <span class="type">{{ log.type }}</span> {{ log.text }}
+        </div>
+      </Container>
+    </div>
+    <div id="grid2">
+      <Container id="ast">
+        <template #header>AST</template>
+        <pre>{{ JSON.stringify(ast, null, "\t") }}</pre>
+      </Container>
+      <Container id="bin">
+        <template #header>Bytecode</template>
+        <header></header>
+      </Container>
+      <Container id="debugger">
+        <template #header>Debugger</template>
+      </Container>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { Interpreter, Parser, values, utils, Ast } from "./version.ts";
+import { version, samples } from "./version.ts";
+import Editor from "@common/Editor.vue";
+import Container from "@common/Container.vue";
+
+const script = ref(
+  window.localStorage.getItem(version) ?? '<: "Hello, AiScript!"',
+);
+
+const ast = ref<Ast.Node[] | null>(null);
+const logs = ref<
+  {
+    id: number;
+    type?: string;
+    text?: string;
+    print?: boolean;
+  }[]
+>([]);
+const syntaxErrorMessage = ref<string | null>(null);
+
+watch(
+  script,
+  () => {
+    window.localStorage.setItem(version, script.value);
+    try {
+      ast.value = Parser.parse(script.value);
+      syntaxErrorMessage.value = null;
+    } catch (e) {
+      const err = e as Error;
+      syntaxErrorMessage.value = err.message;
+      console.error("info" in err ? err.info : err);
+      return;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+let interpreter: Interpreter | null = null;
+const run = async () => {
+  logs.value = [];
+
+  interpreter?.abort();
+  interpreter = new Interpreter(
+    {},
+    {
+      in: (q: string) => {
+        return new Promise((ok) => {
+          const res = window.prompt(q);
+          ok(res ?? "");
+        });
+      },
+      out: (value: values.Value) => {
+        logs.value.push({
+          id: Math.random(),
+          type: value.type,
+          text: utils.valToString(value, true),
+          print: true,
+        });
+      },
+      err: (e: Error) => {
+        window.alert(e.toString());
+      },
+      log: (type: string, params: Record<string, any>) => {
+        switch (type) {
+          case "end":
+            logs.value.push({
+              id: Math.random(),
+              text: utils.valToString(params.val, true),
+              print: false,
+            });
+            break;
+          default:
+            break;
+        }
+      },
+    },
+  );
+
+  try {
+    await interpreter.exec(ast.value!);
+  } catch (e) {
+    console.error(e);
+    window.alert("Internal Error: " + e);
+  }
+};
+</script>
+
+<style scoped>
+pre {
+  margin: 0;
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+#grid1 {
+  box-sizing: border-box;
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 16px;
+  padding: 16px 16px 16px 16px;
+  min-height: 0;
+}
+#grid1 > * {
+  min-height: 0;
+}
+#grid2 {
+  box-sizing: border-box;
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 16px;
+  padding: 0 16px 16px 16px;
+  min-height: 0;
+}
+#grid2 > * {
+  min-height: 0;
+}
+
+#logs .log .type {
+  opacity: 0.5;
+  color: #fff;
+}
+#logs .log:not(.print) {
+  opacity: 0.7;
+}
+#logs .log.num {
+  color: #0ff;
+}
+#logs .log.str {
+  color: #ff0;
+}
+
+#ast {
+}
+
+.actions {
+  margin-left: auto;
+}
+</style>
diff --git a/src/versions/develop/index.ts b/src/versions/develop/index.ts
deleted file mode 100644
index b5fdb4d..0000000
--- a/src/versions/develop/index.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Interpreter, Parser, values, utils, Ast } from "./version.ts";
-import { version, samples } from "./version.ts";
-import type { Log } from '@/MainArea.vue';
-
-export { version, samples };
-
-let ast: Ast.Node[] = [];
-let interpreter: Interpreter | null = null;
-
-export function parse(code: string): string {
-	ast = Parser.parse(code);
-	return JSON.stringify(ast, null, "\t");
-}
-
-export async function exec(io: {
-	in: (q: string) => Promise<string>;
-	out: (l: Log) => void;
-	end: (l: Log) => void;
-	err: (e: any) => void;
-}): Promise<void> {
-  interpreter?.abort();
-  interpreter = new Interpreter(
-    {},
-    {
-			in: io.in,
-      out: (value: values.Value) => {
-        io.out({
-          id: Math.random(),
-          type: value.type,
-          text: utils.valToString(value, true),
-          print: true,
-        });
-      },
-      err: io.err,
-      log: (type: string, params: Record<string, any>) => {
-        switch (type) {
-          case "end":
-            io.end({
-              id: Math.random(),
-              text: utils.valToString(params.val, true),
-              print: false,
-            });
-            break;
-          default:
-            break;
-        }
-      },
-    },
-  );
-
-  try {
-    await interpreter.exec(ast);
-  } catch (e) {
-		io.err(e);
-  }
-};
diff --git a/src/versions/develop/index.vue b/src/versions/develop/index.vue
new file mode 100644
index 0000000..06222c2
--- /dev/null
+++ b/src/versions/develop/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <div id="root">
+    <div id="grid1">
+      <Editor
+        v-model="script"
+        :samples="samples"
+        :parseError="syntaxErrorMessage"
+        @run="run"
+      />
+      <Container id="logs">
+        <template #header>Output</template>
+        <div
+          v-for="log in logs"
+          class="log"
+          :key="log.id"
+          :class="[{ print: log.print }, log.type]"
+        >
+          <span class="type">{{ log.type }}</span> {{ log.text }}
+        </div>
+      </Container>
+    </div>
+    <div id="grid2">
+      <Container id="ast">
+        <template #header>AST</template>
+        <pre>{{ JSON.stringify(ast, null, "\t") }}</pre>
+      </Container>
+      <Container id="bin">
+        <template #header>Bytecode</template>
+        <header></header>
+      </Container>
+      <Container id="debugger">
+        <template #header>Debugger</template>
+      </Container>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { Interpreter, Parser, values, utils, Ast } from "./version.ts";
+import { version, samples } from "./version.ts";
+import Editor from "@common/Editor.vue";
+import Container from "@common/Container.vue";
+
+const script = ref(
+  window.localStorage.getItem(version) ?? '<: "Hello, AiScript!"',
+);
+
+const ast = ref<Ast.Node[] | null>(null);
+const logs = ref<
+  {
+    id: number;
+    type?: string;
+    text?: string;
+    print?: boolean;
+  }[]
+>([]);
+const syntaxErrorMessage = ref<string | null>(null);
+
+watch(
+  script,
+  () => {
+    window.localStorage.setItem(version, script.value);
+    try {
+      ast.value = Parser.parse(script.value);
+      syntaxErrorMessage.value = null;
+    } catch (e) {
+      const err = e as Error;
+      syntaxErrorMessage.value = err.message;
+      console.error("info" in err ? err.info : err);
+      return;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+let interpreter: Interpreter | null = null;
+const run = async () => {
+  logs.value = [];
+
+  interpreter?.abort();
+  interpreter = new Interpreter(
+    {},
+    {
+      in: (q: string) => {
+        return new Promise((ok) => {
+          const res = window.prompt(q);
+          ok(res ?? "");
+        });
+      },
+      out: (value: values.Value) => {
+        logs.value.push({
+          id: Math.random(),
+          type: value.type,
+          text: utils.valToString(value, true),
+          print: true,
+        });
+      },
+      err: (e: Error) => {
+        window.alert(e.toString());
+      },
+      log: (type: string, params: Record<string, any>) => {
+        switch (type) {
+          case "end":
+            logs.value.push({
+              id: Math.random(),
+              text: utils.valToString(params.val, true),
+              print: false,
+            });
+            break;
+          default:
+            break;
+        }
+      },
+    },
+  );
+
+  try {
+    await interpreter.exec(ast.value!);
+  } catch (e) {
+    console.error(e);
+    window.alert("Internal Error: " + e);
+  }
+};
+</script>
+
+<style scoped>
+pre {
+  margin: 0;
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+#grid1 {
+  box-sizing: border-box;
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 16px;
+  padding: 16px 16px 16px 16px;
+  min-height: 0;
+}
+#grid1 > * {
+  min-height: 0;
+}
+#grid2 {
+  box-sizing: border-box;
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 16px;
+  padding: 0 16px 16px 16px;
+  min-height: 0;
+}
+#grid2 > * {
+  min-height: 0;
+}
+
+#logs .log .type {
+  opacity: 0.5;
+  color: #fff;
+}
+#logs .log:not(.print) {
+  opacity: 0.7;
+}
+#logs .log.num {
+  color: #0ff;
+}
+#logs .log.str {
+  color: #ff0;
+}
+
+#ast {
+}
+
+.actions {
+  margin-left: auto;
+}
+</style>
diff --git a/src/versions/next/index.ts b/src/versions/next/index.ts
deleted file mode 100644
index b5fdb4d..0000000
--- a/src/versions/next/index.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Interpreter, Parser, values, utils, Ast } from "./version.ts";
-import { version, samples } from "./version.ts";
-import type { Log } from '@/MainArea.vue';
-
-export { version, samples };
-
-let ast: Ast.Node[] = [];
-let interpreter: Interpreter | null = null;
-
-export function parse(code: string): string {
-	ast = Parser.parse(code);
-	return JSON.stringify(ast, null, "\t");
-}
-
-export async function exec(io: {
-	in: (q: string) => Promise<string>;
-	out: (l: Log) => void;
-	end: (l: Log) => void;
-	err: (e: any) => void;
-}): Promise<void> {
-  interpreter?.abort();
-  interpreter = new Interpreter(
-    {},
-    {
-			in: io.in,
-      out: (value: values.Value) => {
-        io.out({
-          id: Math.random(),
-          type: value.type,
-          text: utils.valToString(value, true),
-          print: true,
-        });
-      },
-      err: io.err,
-      log: (type: string, params: Record<string, any>) => {
-        switch (type) {
-          case "end":
-            io.end({
-              id: Math.random(),
-              text: utils.valToString(params.val, true),
-              print: false,
-            });
-            break;
-          default:
-            break;
-        }
-      },
-    },
-  );
-
-  try {
-    await interpreter.exec(ast);
-  } catch (e) {
-		io.err(e);
-  }
-};
diff --git a/src/versions/next/index.vue b/src/versions/next/index.vue
new file mode 100644
index 0000000..06222c2
--- /dev/null
+++ b/src/versions/next/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <div id="root">
+    <div id="grid1">
+      <Editor
+        v-model="script"
+        :samples="samples"
+        :parseError="syntaxErrorMessage"
+        @run="run"
+      />
+      <Container id="logs">
+        <template #header>Output</template>
+        <div
+          v-for="log in logs"
+          class="log"
+          :key="log.id"
+          :class="[{ print: log.print }, log.type]"
+        >
+          <span class="type">{{ log.type }}</span> {{ log.text }}
+        </div>
+      </Container>
+    </div>
+    <div id="grid2">
+      <Container id="ast">
+        <template #header>AST</template>
+        <pre>{{ JSON.stringify(ast, null, "\t") }}</pre>
+      </Container>
+      <Container id="bin">
+        <template #header>Bytecode</template>
+        <header></header>
+      </Container>
+      <Container id="debugger">
+        <template #header>Debugger</template>
+      </Container>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { Interpreter, Parser, values, utils, Ast } from "./version.ts";
+import { version, samples } from "./version.ts";
+import Editor from "@common/Editor.vue";
+import Container from "@common/Container.vue";
+
+const script = ref(
+  window.localStorage.getItem(version) ?? '<: "Hello, AiScript!"',
+);
+
+const ast = ref<Ast.Node[] | null>(null);
+const logs = ref<
+  {
+    id: number;
+    type?: string;
+    text?: string;
+    print?: boolean;
+  }[]
+>([]);
+const syntaxErrorMessage = ref<string | null>(null);
+
+watch(
+  script,
+  () => {
+    window.localStorage.setItem(version, script.value);
+    try {
+      ast.value = Parser.parse(script.value);
+      syntaxErrorMessage.value = null;
+    } catch (e) {
+      const err = e as Error;
+      syntaxErrorMessage.value = err.message;
+      console.error("info" in err ? err.info : err);
+      return;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+let interpreter: Interpreter | null = null;
+const run = async () => {
+  logs.value = [];
+
+  interpreter?.abort();
+  interpreter = new Interpreter(
+    {},
+    {
+      in: (q: string) => {
+        return new Promise((ok) => {
+          const res = window.prompt(q);
+          ok(res ?? "");
+        });
+      },
+      out: (value: values.Value) => {
+        logs.value.push({
+          id: Math.random(),
+          type: value.type,
+          text: utils.valToString(value, true),
+          print: true,
+        });
+      },
+      err: (e: Error) => {
+        window.alert(e.toString());
+      },
+      log: (type: string, params: Record<string, any>) => {
+        switch (type) {
+          case "end":
+            logs.value.push({
+              id: Math.random(),
+              text: utils.valToString(params.val, true),
+              print: false,
+            });
+            break;
+          default:
+            break;
+        }
+      },
+    },
+  );
+
+  try {
+    await interpreter.exec(ast.value!);
+  } catch (e) {
+    console.error(e);
+    window.alert("Internal Error: " + e);
+  }
+};
+</script>
+
+<style scoped>
+pre {
+  margin: 0;
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+#grid1 {
+  box-sizing: border-box;
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 16px;
+  padding: 16px 16px 16px 16px;
+  min-height: 0;
+}
+#grid1 > * {
+  min-height: 0;
+}
+#grid2 {
+  box-sizing: border-box;
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 16px;
+  padding: 0 16px 16px 16px;
+  min-height: 0;
+}
+#grid2 > * {
+  min-height: 0;
+}
+
+#logs .log .type {
+  opacity: 0.5;
+  color: #fff;
+}
+#logs .log:not(.print) {
+  opacity: 0.7;
+}
+#logs .log.num {
+  color: #0ff;
+}
+#logs .log.str {
+  color: #ff0;
+}
+
+#ast {
+}
+
+.actions {
+  margin-left: auto;
+}
+</style>