feat: migrate PlaygroundView to browser-based compilation with esbuild-wasm and component registration

package.json

@@ -12,21 +12,24 @@
  "new": "rm -rf node_modules/.vite && npm run start"
  },
  "dependencies": {
- "@codesandbox/sandpack-client": "^2.19.8",
  "@mdx-js/mdx": "^3.1.1",
+ "@monaco-editor/loader": "^1.5.0",
+ "esbuild-wasm": "^0.25.10",
  "highlight.js": "^11.11.1",
- "lucide": "^0.544.0",
+ "lucide": "^0.545.0",
+ "monaco-editor": "^0.54.0",
  "remark-gfm": "^4.0.1",
  "typecomposer": "^0.1.56"
  },
  "devDependencies": {
  "typecomposer-plugin": "^1.0.12",
- "@types/node": "^24.6.0",
+ "@types/node": "^24.7.1",
  "autoprefixer": "^10.4.21",
  "csstype": "^3.1.3",
  "sass": "^1.93.2",
- "tailwindcss": "^3.4.17",
- "typescript": "^5.9.2",
- "vite": "^7.1.6"
+ "tailwindcss": "^4.1.14",
+ "@tailwindcss/vite": "^4.1.14",
+ "typescript": "^5.9.3",
+ "vite": "^7.1.9"
  }
 }

src/components/editor/MonacoEditor.ts

@@ -0,0 +1,150 @@
+import { Component } from "typecomposer";
+import loader from "@monaco-editor/loader";
+import type * as Monaco from "monaco-editor";
+
+export class MonacoEditor extends Component {
+	private editor: Monaco.editor.IStandaloneCodeEditor | null = null;
+	private monaco: typeof Monaco | null = null;
+	private _value: string = "";
+	private _language: string = "typescript";
+	private _onChange: ((value: string) => void) | null = null;
+
+	constructor(config: {
+ value?: string;
+ language?: string;
+ onChange?: (value: string) => void;
+ className?: string;
+	} = {}) {
+ super({
+ className: config.className,
+ });
+
+ this.style.width = "100%";
+ this.style.height = "100%";
+
+ this._value = config.value || "";
+ this._language = config.language || "typescript";
+ this._onChange = config.onChange || null;
+	}
+
+	async onInit() {
+ try {
+ // Load Monaco Editor
+ this.monaco = await loader.init();
+
+ // Configure TypeScript compiler options
+ this.monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+ target: this.monaco.languages.typescript.ScriptTarget.ESNext,
+ allowNonTsExtensions: true,
+ moduleResolution: this.monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+ module: this.monaco.languages.typescript.ModuleKind.ESNext,
+ noEmit: true,
+ esModuleInterop: true,
+ jsx: this.monaco.languages.typescript.JsxEmit.React,
+ reactNamespace: "React",
+ allowJs: true,
+ typeRoots: ["node_modules/@types"],
+ experimentalDecorators: true,
+ emitDecoratorMetadata: true,
+ });
+
+ // Add TypeComposer type definitions (basic)
+ this.monaco.languages.typescript.typescriptDefaults.addExtraLib(
+ `
+declare module 'typecomposer' {
+ export class Component extends HTMLElement {
+ constructor(config?: any);
+ onInit?(): void | Promise<void>;
+ appendChild<T extends Node>(node: T): T;
+ }
+
+ export class DivElement extends Component {}
+ export class ButtonElement extends Component {}
+ export class VBox extends Component {}
+ export class HBox extends Component {}
+ export class IFrameElement extends Component {}
+}
+`,
+ "file:///node_modules/@types/typecomposer/index.d.ts"
+ );
+
+ // Create the editor
+ this.editor = this.monaco.editor.create(this, {
+ value: this._value,
+ language: this._language,
+ theme: "vs-dark",
+ automaticLayout: true,
+ minimap: { enabled: false },
+ fontSize: 14,
+ lineNumbers: "on",
+ roundedSelection: false,
+ scrollBeyondLastLine: false,
+ readOnly: false,
+ cursorStyle: "line",
+ formatOnPaste: true,
+ formatOnType: true,
+ tabSize: 2,
+ });
+
+ // Listen for content changes
+ this.editor.onDidChangeModelContent(() => {
+ const value = this.editor?.getValue() || "";
+ this._value = value;
+ if (this._onChange) {
+ this._onChange(value);
+ }
+ });
+ } catch (error) {
+ console.error("Failed to initialize Monaco Editor:", error);
+ }
+	}
+
+	/**
+ * Get current editor value
+ */
+	public getValue(): string {
+ return this.editor?.getValue() || this._value;
+	}
+
+	/**
+ * Set editor value
+ */
+	public setValue(value: string): void {
+ this._value = value;
+ if (this.editor) {
+ this.editor.setValue(value);
+ }
+	}
+
+	/**
+ * Set editor language
+ */
+	public setLanguage(language: string): void {
+ this._language = language;
+ if (this.editor && this.monaco) {
+ const model = this.editor.getModel();
+ if (model) {
+ this.monaco.editor.setModelLanguage(model, language);
+ }
+ }
+	}
+
+	/**
+ * Focus the editor
+ */
+	public focus(): void {
+ this.editor?.focus();
+	}
+
+	/**
+ * Cleanup when component is removed
+ */
+	disconnectedCallback() {
+ this.editor?.dispose();
+	}
+}
+
+// Only register if not already registered (prevents HMR errors)
+if (!customElements.get("monaco-editor")) {
+	customElements.define("monaco-editor", MonacoEditor);
+}

src/main.ts

@@ -1 +1,2 @@
-import "@/style.scss";
+import "@/styles/index.css";
+import "@/styles/style.scss";

src/router/router.ts

@@ -40,7 +40,7 @@ loadDocs().finally(() => {
  { path: "reactivity/computed", component: BaseView },
  { path: "router", component: BaseView },
  { path: "router-view", component: BaseView },
- { path: "home", component: BaseView }
+ { path: "home", component: BaseView },
  ],
  },
  { path: "/playground", component: PlaygroundPage },

src/styles/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/style.scss → src/styles/style.scss

@@ -1,35 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* ========================================
- CSS CUSTOM PROPERTIES (THEME SYSTEM)
- ======================================== */
-
-/*
-| Name (Romaji) | Hex | Description |
-| --------------------- | ------- | ------------------------- |
-| **GOFUNIRO** | #FFFFFC | Chalk |
-| **HAKUJI** | #F8FBF8 | White Porcelain |
-| **UNOHANA IRO** | #F7FCFE | Unohana [Deutzia] Flower |
-| **KINARIRO** | #FBFAF5 | Dough |
-| **SHIRONERI** | #F3F3F2 | Silk White Kneading |
-| **SOSOKU** | #EAE5E3 | Base Color |
-| **SHIRAUMENEZU** | #E5E4E6 | White Plum Grey |
-| **NYUHAKUSHOKU** | #F3F3F3 | Milky White |
-| **MURASAKISUISHIYOU** | #E7E7EB | Purple Water |
-| **SHIRONEZU** | #DCDDDD | White Grey |
-
-| Name | Hex |
-| ------------------ | ------- |
-| **Obsidian** | #0B1215 |
-| **Midnight Blue** | #101720 |
-| **Oil Black** | #0C0C0C |
-| **Rich Black** | #020D19 |
-| **Deep Navy Blue** | #011222 |
-| **Charcoal Gray** | #171717 |
-*/
-
 [data-theme="light"] {
  --primary-background-color: #ffffff;
  --secondary-background-color: #f8f9fa;
@@ -155,10 +123,6 @@ p {
  margin: 1rem 0;
 }
 
-/* ========================================
- CODE STYLING
- ======================================== */
-
 code {
  background-color: var(--code-background);
  border: 1px solid var(--border-color);
@@ -194,10 +158,6 @@ pre code {
  padding: 1rem !important;
 }
 
-/* ========================================
- FORM ELEMENTS
- ======================================== */
-
 button {
  display: flex;
  align-items: center;
@@ -839,7 +799,6 @@ label {
  }
 }
 
-/* Breadcrumb */
 .breadcrumb {
  font-size: 0.875rem;
  color: var(--text-muted);
@@ -852,7 +811,6 @@ label {
  display: none;
 }
 
-/* Mobile styles */
 @media (max-width: 768px) {
  .navbar {
  padding: 0 1rem;
@@ -937,15 +895,13 @@ label {
  cursor: pointer;
 }
 
-/* Highlight.js theme override */
 .hljs {
  background: var(--code-background) !important;
  color: var(--text-primary) !important;
  border-radius: 0.5rem;
  padding: 1rem !important;
 }
 
-/* Theme Toggle Styles */
 .navbar .nav-links .theme-toggle {
  display: flex;
  align-items: center;
@@ -1092,10 +1048,6 @@ label {
  font-size: 0.75rem;
 }
 
-/* ========================================
- ROADMAP COMPONENT STYLES
- ======================================== */
-
 .roadmap-title {
  color: var(--text-primary);
 }

package.json

@@ -12,21 +12,24 @@
  "new": "rm -rf node_modules/.vite && npm run start"
  },
  "dependencies": {
- "@codesandbox/sandpack-client": "^2.19.8",
  "@mdx-js/mdx": "^3.1.1",
+ "@monaco-editor/loader": "^1.5.0",
+ "esbuild-wasm": "^0.25.10",
  "highlight.js": "^11.11.1",
- "lucide": "^0.544.0",
+ "lucide": "^0.545.0",
+ "monaco-editor": "^0.54.0",
  "remark-gfm": "^4.0.1",
  "typecomposer": "^0.1.56"
  },
  "devDependencies": {
  "typecomposer-plugin": "^1.0.12",
- "@types/node": "^24.6.0",
+ "@types/node": "^24.7.1",
  "autoprefixer": "^10.4.21",
  "csstype": "^3.1.3",
  "sass": "^1.93.2",
- "tailwindcss": "^3.4.17",
- "typescript": "^5.9.2",
- "vite": "^7.1.6"
+ "tailwindcss": "^4.1.14",
+ "@tailwindcss/vite": "^4.1.14",
+ "typescript": "^5.9.3",
+ "vite": "^7.1.9"
  }
 }

src/components/editor/MonacoEditor.ts

@@ -0,0 +1,150 @@
+import { Component } from "typecomposer";
+import loader from "@monaco-editor/loader";
+import type * as Monaco from "monaco-editor";
+
+export class MonacoEditor extends Component {
+	private editor: Monaco.editor.IStandaloneCodeEditor | null = null;
+	private monaco: typeof Monaco | null = null;
+	private _value: string = "";
+	private _language: string = "typescript";
+	private _onChange: ((value: string) => void) | null = null;
+
+	constructor(config: {
+ value?: string;
+ language?: string;
+ onChange?: (value: string) => void;
+ className?: string;
+	} = {}) {
+ super({
+ className: config.className,
+ });
+
+ this.style.width = "100%";
+ this.style.height = "100%";
+
+ this._value = config.value || "";
+ this._language = config.language || "typescript";
+ this._onChange = config.onChange || null;
+	}
+
+	async onInit() {
+ try {
+ // Load Monaco Editor
+ this.monaco = await loader.init();
+
+ // Configure TypeScript compiler options
+ this.monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+ target: this.monaco.languages.typescript.ScriptTarget.ESNext,
+ allowNonTsExtensions: true,
+ moduleResolution: this.monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+ module: this.monaco.languages.typescript.ModuleKind.ESNext,
+ noEmit: true,
+ esModuleInterop: true,
+ jsx: this.monaco.languages.typescript.JsxEmit.React,
+ reactNamespace: "React",
+ allowJs: true,
+ typeRoots: ["node_modules/@types"],
+ experimentalDecorators: true,
+ emitDecoratorMetadata: true,
+ });
+
+ // Add TypeComposer type definitions (basic)
+ this.monaco.languages.typescript.typescriptDefaults.addExtraLib(
+ `
+declare module 'typecomposer' {
+ export class Component extends HTMLElement {
+ constructor(config?: any);
+ onInit?(): void | Promise<void>;
+ appendChild<T extends Node>(node: T): T;
+ }
+
+ export class DivElement extends Component {}
+ export class ButtonElement extends Component {}
+ export class VBox extends Component {}
+ export class HBox extends Component {}
+ export class IFrameElement extends Component {}
+}
+`,
+ "file:///node_modules/@types/typecomposer/index.d.ts"
+ );
+
+ // Create the editor
+ this.editor = this.monaco.editor.create(this, {
+ value: this._value,
+ language: this._language,
+ theme: "vs-dark",
+ automaticLayout: true,
+ minimap: { enabled: false },
+ fontSize: 14,
+ lineNumbers: "on",
+ roundedSelection: false,
+ scrollBeyondLastLine: false,
+ readOnly: false,
+ cursorStyle: "line",
+ formatOnPaste: true,
+ formatOnType: true,
+ tabSize: 2,
+ });
+
+ // Listen for content changes
+ this.editor.onDidChangeModelContent(() => {
+ const value = this.editor?.getValue() || "";
+ this._value = value;
+ if (this._onChange) {
+ this._onChange(value);
+ }
+ });
+ } catch (error) {
+ console.error("Failed to initialize Monaco Editor:", error);
+ }
+	}
+
+	/**
+ * Get current editor value
+ */
+	public getValue(): string {
+ return this.editor?.getValue() || this._value;
+	}
+
+	/**
+ * Set editor value
+ */
+	public setValue(value: string): void {
+ this._value = value;
+ if (this.editor) {
+ this.editor.setValue(value);
+ }
+	}
+
+	/**
+ * Set editor language
+ */
+	public setLanguage(language: string): void {
+ this._language = language;
+ if (this.editor && this.monaco) {
+ const model = this.editor.getModel();
+ if (model) {
+ this.monaco.editor.setModelLanguage(model, language);
+ }
+ }
+	}
+
+	/**
+ * Focus the editor
+ */
+	public focus(): void {
+ this.editor?.focus();
+	}
+
+	/**
+ * Cleanup when component is removed
+ */
+	disconnectedCallback() {
+ this.editor?.dispose();
+	}
+}
+
+// Only register if not already registered (prevents HMR errors)
+if (!customElements.get("monaco-editor")) {
+	customElements.define("monaco-editor", MonacoEditor);
+}

src/main.ts

@@ -1 +1,2 @@
-import "@/style.scss";
+import "@/styles/index.css";
+import "@/styles/style.scss";

src/router/router.ts

@@ -40,7 +40,7 @@ loadDocs().finally(() => {
  { path: "reactivity/computed", component: BaseView },
  { path: "router", component: BaseView },
  { path: "router-view", component: BaseView },
- { path: "home", component: BaseView }
+ { path: "home", component: BaseView },
  ],
  },
  { path: "/playground", component: PlaygroundPage },

src/styles/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/style.scss → src/styles/style.scss

@@ -1,35 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* ========================================
- CSS CUSTOM PROPERTIES (THEME SYSTEM)
- ======================================== */
-
-/*
-| Name (Romaji) | Hex | Description |
-| --------------------- | ------- | ------------------------- |
-| **GOFUNIRO** | #FFFFFC | Chalk |
-| **HAKUJI** | #F8FBF8 | White Porcelain |
-| **UNOHANA IRO** | #F7FCFE | Unohana [Deutzia] Flower |
-| **KINARIRO** | #FBFAF5 | Dough |
-| **SHIRONERI** | #F3F3F2 | Silk White Kneading |
-| **SOSOKU** | #EAE5E3 | Base Color |
-| **SHIRAUMENEZU** | #E5E4E6 | White Plum Grey |
-| **NYUHAKUSHOKU** | #F3F3F3 | Milky White |
-| **MURASAKISUISHIYOU** | #E7E7EB | Purple Water |
-| **SHIRONEZU** | #DCDDDD | White Grey |
-
-| Name | Hex |
-| ------------------ | ------- |
-| **Obsidian** | #0B1215 |
-| **Midnight Blue** | #101720 |
-| **Oil Black** | #0C0C0C |
-| **Rich Black** | #020D19 |
-| **Deep Navy Blue** | #011222 |
-| **Charcoal Gray** | #171717 |
-*/
-
 [data-theme="light"] {
  --primary-background-color: #ffffff;
  --secondary-background-color: #f8f9fa;
@@ -155,10 +123,6 @@ p {
  margin: 1rem 0;
 }
 
-/* ========================================
- CODE STYLING
- ======================================== */
-
 code {
  background-color: var(--code-background);
  border: 1px solid var(--border-color);
@@ -194,10 +158,6 @@ pre code {
  padding: 1rem !important;
 }
 
-/* ========================================
- FORM ELEMENTS
- ======================================== */
-
 button {
  display: flex;
  align-items: center;
@@ -839,7 +799,6 @@ label {
  }
 }
 
-/* Breadcrumb */
 .breadcrumb {
  font-size: 0.875rem;
  color: var(--text-muted);
@@ -852,7 +811,6 @@ label {
  display: none;
 }
 
-/* Mobile styles */
 @media (max-width: 768px) {
  .navbar {
  padding: 0 1rem;
@@ -937,15 +895,13 @@ label {
  cursor: pointer;
 }
 
-/* Highlight.js theme override */
 .hljs {
  background: var(--code-background) !important;
  color: var(--text-primary) !important;
  border-radius: 0.5rem;
  padding: 1rem !important;
 }
 
-/* Theme Toggle Styles */
 .navbar .nav-links .theme-toggle {
  display: flex;
  align-items: center;
@@ -1092,10 +1048,6 @@ label {
  font-size: 0.75rem;
 }
 
-/* ========================================
- ROADMAP COMPONENT STYLES
- ======================================== */
-
 .roadmap-title {
  color: var(--text-primary);
 }

package.json

@@ -12,21 +12,24 @@
  "new": "rm -rf node_modules/.vite && npm run start"
  },
  "dependencies": {
- "@codesandbox/sandpack-client": "^2.19.8",
  "@mdx-js/mdx": "^3.1.1",
+ "@monaco-editor/loader": "^1.5.0",
+ "esbuild-wasm": "^0.25.10",
  "highlight.js": "^11.11.1",
- "lucide": "^0.544.0",
+ "lucide": "^0.545.0",
+ "monaco-editor": "^0.54.0",
  "remark-gfm": "^4.0.1",
  "typecomposer": "^0.1.56"
  },
  "devDependencies": {
  "typecomposer-plugin": "^1.0.12",
- "@types/node": "^24.6.0",
+ "@types/node": "^24.7.1",
  "autoprefixer": "^10.4.21",
  "csstype": "^3.1.3",
  "sass": "^1.93.2",
- "tailwindcss": "^3.4.17",
- "typescript": "^5.9.2",
- "vite": "^7.1.6"
+ "tailwindcss": "^4.1.14",
+ "@tailwindcss/vite": "^4.1.14",
+ "typescript": "^5.9.3",
+ "vite": "^7.1.9"
  }
 }

src/components/editor/MonacoEditor.ts

@@ -0,0 +1,150 @@
+import { Component } from "typecomposer";
+import loader from "@monaco-editor/loader";
+import type * as Monaco from "monaco-editor";
+
+export class MonacoEditor extends Component {
+	private editor: Monaco.editor.IStandaloneCodeEditor | null = null;
+	private monaco: typeof Monaco | null = null;
+	private _value: string = "";
+	private _language: string = "typescript";
+	private _onChange: ((value: string) => void) | null = null;
+
+	constructor(config: {
+ value?: string;
+ language?: string;
+ onChange?: (value: string) => void;
+ className?: string;
+	} = {}) {
+ super({
+ className: config.className,
+ });
+
+ this.style.width = "100%";
+ this.style.height = "100%";
+
+ this._value = config.value || "";
+ this._language = config.language || "typescript";
+ this._onChange = config.onChange || null;
+	}
+
+	async onInit() {
+ try {
+ // Load Monaco Editor
+ this.monaco = await loader.init();
+
+ // Configure TypeScript compiler options
+ this.monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+ target: this.monaco.languages.typescript.ScriptTarget.ESNext,
+ allowNonTsExtensions: true,
+ moduleResolution: this.monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+ module: this.monaco.languages.typescript.ModuleKind.ESNext,
+ noEmit: true,
+ esModuleInterop: true,
+ jsx: this.monaco.languages.typescript.JsxEmit.React,
+ reactNamespace: "React",
+ allowJs: true,
+ typeRoots: ["node_modules/@types"],
+ experimentalDecorators: true,
+ emitDecoratorMetadata: true,
+ });
+
+ // Add TypeComposer type definitions (basic)
+ this.monaco.languages.typescript.typescriptDefaults.addExtraLib(
+ `
+declare module 'typecomposer' {
+ export class Component extends HTMLElement {
+ constructor(config?: any);
+ onInit?(): void | Promise<void>;
+ appendChild<T extends Node>(node: T): T;
+ }
+
+ export class DivElement extends Component {}
+ export class ButtonElement extends Component {}
+ export class VBox extends Component {}
+ export class HBox extends Component {}
+ export class IFrameElement extends Component {}
+}
+`,
+ "file:///node_modules/@types/typecomposer/index.d.ts"
+ );
+
+ // Create the editor
+ this.editor = this.monaco.editor.create(this, {
+ value: this._value,
+ language: this._language,
+ theme: "vs-dark",
+ automaticLayout: true,
+ minimap: { enabled: false },
+ fontSize: 14,
+ lineNumbers: "on",
+ roundedSelection: false,
+ scrollBeyondLastLine: false,
+ readOnly: false,
+ cursorStyle: "line",
+ formatOnPaste: true,
+ formatOnType: true,
+ tabSize: 2,
+ });
+
+ // Listen for content changes
+ this.editor.onDidChangeModelContent(() => {
+ const value = this.editor?.getValue() || "";
+ this._value = value;
+ if (this._onChange) {
+ this._onChange(value);
+ }
+ });
+ } catch (error) {
+ console.error("Failed to initialize Monaco Editor:", error);
+ }
+	}
+
+	/**
+ * Get current editor value
+ */
+	public getValue(): string {
+ return this.editor?.getValue() || this._value;
+	}
+
+	/**
+ * Set editor value
+ */
+	public setValue(value: string): void {
+ this._value = value;
+ if (this.editor) {
+ this.editor.setValue(value);
+ }
+	}
+
+	/**
+ * Set editor language
+ */
+	public setLanguage(language: string): void {
+ this._language = language;
+ if (this.editor && this.monaco) {
+ const model = this.editor.getModel();
+ if (model) {
+ this.monaco.editor.setModelLanguage(model, language);
+ }
+ }
+	}
+
+	/**
+ * Focus the editor
+ */
+	public focus(): void {
+ this.editor?.focus();
+	}
+
+	/**
+ * Cleanup when component is removed
+ */
+	disconnectedCallback() {
+ this.editor?.dispose();
+	}
+}
+
+// Only register if not already registered (prevents HMR errors)
+if (!customElements.get("monaco-editor")) {
+	customElements.define("monaco-editor", MonacoEditor);
+}

src/main.ts

@@ -1 +1,2 @@
-import "@/style.scss";
+import "@/styles/index.css";
+import "@/styles/style.scss";

src/router/router.ts

@@ -40,7 +40,7 @@ loadDocs().finally(() => {
  { path: "reactivity/computed", component: BaseView },
  { path: "router", component: BaseView },
  { path: "router-view", component: BaseView },
- { path: "home", component: BaseView }
+ { path: "home", component: BaseView },
  ],
  },
  { path: "/playground", component: PlaygroundPage },

src/styles/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/style.scss → src/styles/style.scss

@@ -1,35 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* ========================================
- CSS CUSTOM PROPERTIES (THEME SYSTEM)
- ======================================== */
-
-/*
-| Name (Romaji) | Hex | Description |
-| --------------------- | ------- | ------------------------- |
-| **GOFUNIRO** | #FFFFFC | Chalk |
-| **HAKUJI** | #F8FBF8 | White Porcelain |
-| **UNOHANA IRO** | #F7FCFE | Unohana [Deutzia] Flower |
-| **KINARIRO** | #FBFAF5 | Dough |
-| **SHIRONERI** | #F3F3F2 | Silk White Kneading |
-| **SOSOKU** | #EAE5E3 | Base Color |
-| **SHIRAUMENEZU** | #E5E4E6 | White Plum Grey |
-| **NYUHAKUSHOKU** | #F3F3F3 | Milky White |
-| **MURASAKISUISHIYOU** | #E7E7EB | Purple Water |
-| **SHIRONEZU** | #DCDDDD | White Grey |
-
-| Name | Hex |
-| ------------------ | ------- |
-| **Obsidian** | #0B1215 |
-| **Midnight Blue** | #101720 |
-| **Oil Black** | #0C0C0C |
-| **Rich Black** | #020D19 |
-| **Deep Navy Blue** | #011222 |
-| **Charcoal Gray** | #171717 |
-*/
-
 [data-theme="light"] {
  --primary-background-color: #ffffff;
  --secondary-background-color: #f8f9fa;
@@ -155,10 +123,6 @@ p {
  margin: 1rem 0;
 }
 
-/* ========================================
- CODE STYLING
- ======================================== */
-
 code {
  background-color: var(--code-background);
  border: 1px solid var(--border-color);
@@ -194,10 +158,6 @@ pre code {
  padding: 1rem !important;
 }
 
-/* ========================================
- FORM ELEMENTS
- ======================================== */
-
 button {
  display: flex;
  align-items: center;
@@ -839,7 +799,6 @@ label {
  }
 }
 
-/* Breadcrumb */
 .breadcrumb {
  font-size: 0.875rem;
  color: var(--text-muted);
@@ -852,7 +811,6 @@ label {
  display: none;
 }
 
-/* Mobile styles */
 @media (max-width: 768px) {
  .navbar {
  padding: 0 1rem;
@@ -937,15 +895,13 @@ label {
  cursor: pointer;
 }
 
-/* Highlight.js theme override */
 .hljs {
  background: var(--code-background) !important;
  color: var(--text-primary) !important;
  border-radius: 0.5rem;
  padding: 1rem !important;
 }
 
-/* Theme Toggle Styles */
 .navbar .nav-links .theme-toggle {
  display: flex;
  align-items: center;
@@ -1092,10 +1048,6 @@ label {
  font-size: 0.75rem;
 }
 
-/* ========================================
- ROADMAP COMPONENT STYLES
- ======================================== */
-
 .roadmap-title {
  color: var(--text-primary);
 }

package.json

@@ -12,21 +12,24 @@
  "new": "rm -rf node_modules/.vite && npm run start"
  },
  "dependencies": {
- "@codesandbox/sandpack-client": "^2.19.8",
  "@mdx-js/mdx": "^3.1.1",
+ "@monaco-editor/loader": "^1.5.0",
+ "esbuild-wasm": "^0.25.10",
  "highlight.js": "^11.11.1",
- "lucide": "^0.544.0",
+ "lucide": "^0.545.0",
+ "monaco-editor": "^0.54.0",
  "remark-gfm": "^4.0.1",
  "typecomposer": "^0.1.56"
  },
  "devDependencies": {
  "typecomposer-plugin": "^1.0.12",
- "@types/node": "^24.6.0",
+ "@types/node": "^24.7.1",
  "autoprefixer": "^10.4.21",
  "csstype": "^3.1.3",
  "sass": "^1.93.2",
- "tailwindcss": "^3.4.17",
- "typescript": "^5.9.2",
- "vite": "^7.1.6"
+ "tailwindcss": "^4.1.14",
+ "@tailwindcss/vite": "^4.1.14",
+ "typescript": "^5.9.3",
+ "vite": "^7.1.9"
  }
 }

src/components/editor/MonacoEditor.ts

@@ -0,0 +1,150 @@
+import { Component } from "typecomposer";
+import loader from "@monaco-editor/loader";
+import type * as Monaco from "monaco-editor";
+
+export class MonacoEditor extends Component {
+	private editor: Monaco.editor.IStandaloneCodeEditor | null = null;
+	private monaco: typeof Monaco | null = null;
+	private _value: string = "";
+	private _language: string = "typescript";
+	private _onChange: ((value: string) => void) | null = null;
+
+	constructor(config: {
+ value?: string;
+ language?: string;
+ onChange?: (value: string) => void;
+ className?: string;
+	} = {}) {
+ super({
+ className: config.className,
+ });
+
+ this.style.width = "100%";
+ this.style.height = "100%";
+
+ this._value = config.value || "";
+ this._language = config.language || "typescript";
+ this._onChange = config.onChange || null;
+	}
+
+	async onInit() {
+ try {
+ // Load Monaco Editor
+ this.monaco = await loader.init();
+
+ // Configure TypeScript compiler options
+ this.monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+ target: this.monaco.languages.typescript.ScriptTarget.ESNext,
+ allowNonTsExtensions: true,
+ moduleResolution: this.monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+ module: this.monaco.languages.typescript.ModuleKind.ESNext,
+ noEmit: true,
+ esModuleInterop: true,
+ jsx: this.monaco.languages.typescript.JsxEmit.React,
+ reactNamespace: "React",
+ allowJs: true,
+ typeRoots: ["node_modules/@types"],
+ experimentalDecorators: true,
+ emitDecoratorMetadata: true,
+ });
+
+ // Add TypeComposer type definitions (basic)
+ this.monaco.languages.typescript.typescriptDefaults.addExtraLib(
+ `
+declare module 'typecomposer' {
+ export class Component extends HTMLElement {
+ constructor(config?: any);
+ onInit?(): void | Promise<void>;
+ appendChild<T extends Node>(node: T): T;
+ }
+
+ export class DivElement extends Component {}
+ export class ButtonElement extends Component {}
+ export class VBox extends Component {}
+ export class HBox extends Component {}
+ export class IFrameElement extends Component {}
+}
+`,
+ "file:///node_modules/@types/typecomposer/index.d.ts"
+ );
+
+ // Create the editor
+ this.editor = this.monaco.editor.create(this, {
+ value: this._value,
+ language: this._language,
+ theme: "vs-dark",
+ automaticLayout: true,
+ minimap: { enabled: false },
+ fontSize: 14,
+ lineNumbers: "on",
+ roundedSelection: false,
+ scrollBeyondLastLine: false,
+ readOnly: false,
+ cursorStyle: "line",
+ formatOnPaste: true,
+ formatOnType: true,
+ tabSize: 2,
+ });
+
+ // Listen for content changes
+ this.editor.onDidChangeModelContent(() => {
+ const value = this.editor?.getValue() || "";
+ this._value = value;
+ if (this._onChange) {
+ this._onChange(value);
+ }
+ });
+ } catch (error) {
+ console.error("Failed to initialize Monaco Editor:", error);
+ }
+	}
+
+	/**
+ * Get current editor value
+ */
+	public getValue(): string {
+ return this.editor?.getValue() || this._value;
+	}
+
+	/**
+ * Set editor value
+ */
+	public setValue(value: string): void {
+ this._value = value;
+ if (this.editor) {
+ this.editor.setValue(value);
+ }
+	}
+
+	/**
+ * Set editor language
+ */
+	public setLanguage(language: string): void {
+ this._language = language;
+ if (this.editor && this.monaco) {
+ const model = this.editor.getModel();
+ if (model) {
+ this.monaco.editor.setModelLanguage(model, language);
+ }
+ }
+	}
+
+	/**
+ * Focus the editor
+ */
+	public focus(): void {
+ this.editor?.focus();
+	}
+
+	/**
+ * Cleanup when component is removed
+ */
+	disconnectedCallback() {
+ this.editor?.dispose();
+	}
+}
+
+// Only register if not already registered (prevents HMR errors)
+if (!customElements.get("monaco-editor")) {
+	customElements.define("monaco-editor", MonacoEditor);
+}

src/main.ts

@@ -1 +1,2 @@
-import "@/style.scss";
+import "@/styles/index.css";
+import "@/styles/style.scss";

src/router/router.ts

@@ -40,7 +40,7 @@ loadDocs().finally(() => {
  { path: "reactivity/computed", component: BaseView },
  { path: "router", component: BaseView },
  { path: "router-view", component: BaseView },
- { path: "home", component: BaseView }
+ { path: "home", component: BaseView },
  ],
  },
  { path: "/playground", component: PlaygroundPage },

src/styles/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/style.scss → src/styles/style.scss

@@ -1,35 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* ========================================
- CSS CUSTOM PROPERTIES (THEME SYSTEM)
- ======================================== */
-
-/*
-| Name (Romaji) | Hex | Description |
-| --------------------- | ------- | ------------------------- |
-| **GOFUNIRO** | #FFFFFC | Chalk |
-| **HAKUJI** | #F8FBF8 | White Porcelain |
-| **UNOHANA IRO** | #F7FCFE | Unohana [Deutzia] Flower |
-| **KINARIRO** | #FBFAF5 | Dough |
-| **SHIRONERI** | #F3F3F2 | Silk White Kneading |
-| **SOSOKU** | #EAE5E3 | Base Color |
-| **SHIRAUMENEZU** | #E5E4E6 | White Plum Grey |
-| **NYUHAKUSHOKU** | #F3F3F3 | Milky White |
-| **MURASAKISUISHIYOU** | #E7E7EB | Purple Water |
-| **SHIRONEZU** | #DCDDDD | White Grey |
-
-| Name | Hex |
-| ------------------ | ------- |
-| **Obsidian** | #0B1215 |
-| **Midnight Blue** | #101720 |
-| **Oil Black** | #0C0C0C |
-| **Rich Black** | #020D19 |
-| **Deep Navy Blue** | #011222 |
-| **Charcoal Gray** | #171717 |
-*/
-
 [data-theme="light"] {
  --primary-background-color: #ffffff;
  --secondary-background-color: #f8f9fa;
@@ -155,10 +123,6 @@ p {
  margin: 1rem 0;
 }
 
-/* ========================================
- CODE STYLING
- ======================================== */
-
 code {
  background-color: var(--code-background);
  border: 1px solid var(--border-color);
@@ -194,10 +158,6 @@ pre code {
  padding: 1rem !important;
 }
 
-/* ========================================
- FORM ELEMENTS
- ======================================== */
-
 button {
  display: flex;
  align-items: center;
@@ -839,7 +799,6 @@ label {
  }
 }
 
-/* Breadcrumb */
 .breadcrumb {
  font-size: 0.875rem;
  color: var(--text-muted);
@@ -852,7 +811,6 @@ label {
  display: none;
 }
 
-/* Mobile styles */
 @media (max-width: 768px) {
  .navbar {
  padding: 0 1rem;
@@ -937,15 +895,13 @@ label {
  cursor: pointer;
 }
 
-/* Highlight.js theme override */
 .hljs {
  background: var(--code-background) !important;
  color: var(--text-primary) !important;
  border-radius: 0.5rem;
  padding: 1rem !important;
 }
 
-/* Theme Toggle Styles */
 .navbar .nav-links .theme-toggle {
  display: flex;
  align-items: center;
@@ -1092,10 +1048,6 @@ label {
  font-size: 0.75rem;
 }
 
-/* ========================================
- ROADMAP COMPONENT STYLES
- ======================================== */
-
 .roadmap-title {
  color: var(--text-primary);
 }

package.json

@@ -12,21 +12,24 @@
  "new": "rm -rf node_modules/.vite && npm run start"
  },
  "dependencies": {
- "@codesandbox/sandpack-client": "^2.19.8",
  "@mdx-js/mdx": "^3.1.1",
+ "@monaco-editor/loader": "^1.5.0",
+ "esbuild-wasm": "^0.25.10",
  "highlight.js": "^11.11.1",
- "lucide": "^0.544.0",
+ "lucide": "^0.545.0",
+ "monaco-editor": "^0.54.0",
  "remark-gfm": "^4.0.1",
  "typecomposer": "^0.1.56"
  },
  "devDependencies": {
  "typecomposer-plugin": "^1.0.12",
- "@types/node": "^24.6.0",
+ "@types/node": "^24.7.1",
  "autoprefixer": "^10.4.21",
  "csstype": "^3.1.3",
  "sass": "^1.93.2",
- "tailwindcss": "^3.4.17",
- "typescript": "^5.9.2",
- "vite": "^7.1.6"
+ "tailwindcss": "^4.1.14",
+ "@tailwindcss/vite": "^4.1.14",
+ "typescript": "^5.9.3",
+ "vite": "^7.1.9"
  }
 }

src/components/editor/MonacoEditor.ts

@@ -0,0 +1,150 @@
+import { Component } from "typecomposer";
+import loader from "@monaco-editor/loader";
+import type * as Monaco from "monaco-editor";
+
+export class MonacoEditor extends Component {
+	private editor: Monaco.editor.IStandaloneCodeEditor | null = null;
+	private monaco: typeof Monaco | null = null;
+	private _value: string = "";
+	private _language: string = "typescript";
+	private _onChange: ((value: string) => void) | null = null;
+
+	constructor(config: {
+ value?: string;
+ language?: string;
+ onChange?: (value: string) => void;
+ className?: string;
+	} = {}) {
+ super({
+ className: config.className,
+ });
+
+ this.style.width = "100%";
+ this.style.height = "100%";
+
+ this._value = config.value || "";
+ this._language = config.language || "typescript";
+ this._onChange = config.onChange || null;
+	}
+
+	async onInit() {
+ try {
+ // Load Monaco Editor
+ this.monaco = await loader.init();
+
+ // Configure TypeScript compiler options
+ this.monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+ target: this.monaco.languages.typescript.ScriptTarget.ESNext,
+ allowNonTsExtensions: true,
+ moduleResolution: this.monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+ module: this.monaco.languages.typescript.ModuleKind.ESNext,
+ noEmit: true,
+ esModuleInterop: true,
+ jsx: this.monaco.languages.typescript.JsxEmit.React,
+ reactNamespace: "React",
+ allowJs: true,
+ typeRoots: ["node_modules/@types"],
+ experimentalDecorators: true,
+ emitDecoratorMetadata: true,
+ });
+
+ // Add TypeComposer type definitions (basic)
+ this.monaco.languages.typescript.typescriptDefaults.addExtraLib(
+ `
+declare module 'typecomposer' {
+ export class Component extends HTMLElement {
+ constructor(config?: any);
+ onInit?(): void | Promise<void>;
+ appendChild<T extends Node>(node: T): T;
+ }
+
+ export class DivElement extends Component {}
+ export class ButtonElement extends Component {}
+ export class VBox extends Component {}
+ export class HBox extends Component {}
+ export class IFrameElement extends Component {}
+}
+`,
+ "file:///node_modules/@types/typecomposer/index.d.ts"
+ );
+
+ // Create the editor
+ this.editor = this.monaco.editor.create(this, {
+ value: this._value,
+ language: this._language,
+ theme: "vs-dark",
+ automaticLayout: true,
+ minimap: { enabled: false },
+ fontSize: 14,
+ lineNumbers: "on",
+ roundedSelection: false,
+ scrollBeyondLastLine: false,
+ readOnly: false,
+ cursorStyle: "line",
+ formatOnPaste: true,
+ formatOnType: true,
+ tabSize: 2,
+ });
+
+ // Listen for content changes
+ this.editor.onDidChangeModelContent(() => {
+ const value = this.editor?.getValue() || "";
+ this._value = value;
+ if (this._onChange) {
+ this._onChange(value);
+ }
+ });
+ } catch (error) {
+ console.error("Failed to initialize Monaco Editor:", error);
+ }
+	}
+
+	/**
+ * Get current editor value
+ */
+	public getValue(): string {
+ return this.editor?.getValue() || this._value;
+	}
+
+	/**
+ * Set editor value
+ */
+	public setValue(value: string): void {
+ this._value = value;
+ if (this.editor) {
+ this.editor.setValue(value);
+ }
+	}
+
+	/**
+ * Set editor language
+ */
+	public setLanguage(language: string): void {
+ this._language = language;
+ if (this.editor && this.monaco) {
+ const model = this.editor.getModel();
+ if (model) {
+ this.monaco.editor.setModelLanguage(model, language);
+ }
+ }
+	}
+
+	/**
+ * Focus the editor
+ */
+	public focus(): void {
+ this.editor?.focus();
+	}
+
+	/**
+ * Cleanup when component is removed
+ */
+	disconnectedCallback() {
+ this.editor?.dispose();
+	}
+}
+
+// Only register if not already registered (prevents HMR errors)
+if (!customElements.get("monaco-editor")) {
+	customElements.define("monaco-editor", MonacoEditor);
+}

src/main.ts

@@ -1 +1,2 @@
-import "@/style.scss";
+import "@/styles/index.css";
+import "@/styles/style.scss";

src/router/router.ts

@@ -40,7 +40,7 @@ loadDocs().finally(() => {
  { path: "reactivity/computed", component: BaseView },
  { path: "router", component: BaseView },
  { path: "router-view", component: BaseView },
- { path: "home", component: BaseView }
+ { path: "home", component: BaseView },
  ],
  },
  { path: "/playground", component: PlaygroundPage },

src/styles/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/style.scss → src/styles/style.scss

@@ -1,35 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* ========================================
- CSS CUSTOM PROPERTIES (THEME SYSTEM)
- ======================================== */
-
-/*
-| Name (Romaji) | Hex | Description |
-| --------------------- | ------- | ------------------------- |
-| **GOFUNIRO** | #FFFFFC | Chalk |
-| **HAKUJI** | #F8FBF8 | White Porcelain |
-| **UNOHANA IRO** | #F7FCFE | Unohana [Deutzia] Flower |
-| **KINARIRO** | #FBFAF5 | Dough |
-| **SHIRONERI** | #F3F3F2 | Silk White Kneading |
-| **SOSOKU** | #EAE5E3 | Base Color |
-| **SHIRAUMENEZU** | #E5E4E6 | White Plum Grey |
-| **NYUHAKUSHOKU** | #F3F3F3 | Milky White |
-| **MURASAKISUISHIYOU** | #E7E7EB | Purple Water |
-| **SHIRONEZU** | #DCDDDD | White Grey |
-
-| Name | Hex |
-| ------------------ | ------- |
-| **Obsidian** | #0B1215 |
-| **Midnight Blue** | #101720 |
-| **Oil Black** | #0C0C0C |
-| **Rich Black** | #020D19 |
-| **Deep Navy Blue** | #011222 |
-| **Charcoal Gray** | #171717 |
-*/
-
 [data-theme="light"] {
  --primary-background-color: #ffffff;
  --secondary-background-color: #f8f9fa;
@@ -155,10 +123,6 @@ p {
  margin: 1rem 0;
 }
 
-/* ========================================
- CODE STYLING
- ======================================== */
-
 code {
  background-color: var(--code-background);
  border: 1px solid var(--border-color);
@@ -194,10 +158,6 @@ pre code {
  padding: 1rem !important;
 }
 
-/* ========================================
- FORM ELEMENTS
- ======================================== */
-
 button {
  display: flex;
  align-items: center;
@@ -839,7 +799,6 @@ label {
  }
 }
 
-/* Breadcrumb */
 .breadcrumb {
  font-size: 0.875rem;
  color: var(--text-muted);
@@ -852,7 +811,6 @@ label {
  display: none;
 }
 
-/* Mobile styles */
 @media (max-width: 768px) {
  .navbar {
  padding: 0 1rem;
@@ -937,15 +895,13 @@ label {
  cursor: pointer;
 }
 
-/* Highlight.js theme override */
 .hljs {
  background: var(--code-background) !important;
  color: var(--text-primary) !important;
  border-radius: 0.5rem;
  padding: 1rem !important;
 }
 
-/* Theme Toggle Styles */
 .navbar .nav-links .theme-toggle {
  display: flex;
  align-items: center;
@@ -1092,10 +1048,6 @@ label {
  font-size: 0.75rem;
 }
 
-/* ========================================
- ROADMAP COMPONENT STYLES
- ======================================== */
-
 .roadmap-title {
  color: var(--text-primary);
 }

package.json

@@ -12,21 +12,24 @@
  "new": "rm -rf node_modules/.vite && npm run start"
  },
  "dependencies": {
- "@codesandbox/sandpack-client": "^2.19.8",
  "@mdx-js/mdx": "^3.1.1",
+ "@monaco-editor/loader": "^1.5.0",
+ "esbuild-wasm": "^0.25.10",
  "highlight.js": "^11.11.1",
- "lucide": "^0.544.0",
+ "lucide": "^0.545.0",
+ "monaco-editor": "^0.54.0",
  "remark-gfm": "^4.0.1",
  "typecomposer": "^0.1.56"
  },
  "devDependencies": {
  "typecomposer-plugin": "^1.0.12",
- "@types/node": "^24.6.0",
+ "@types/node": "^24.7.1",
  "autoprefixer": "^10.4.21",
  "csstype": "^3.1.3",
  "sass": "^1.93.2",
- "tailwindcss": "^3.4.17",
- "typescript": "^5.9.2",
- "vite": "^7.1.6"
+ "tailwindcss": "^4.1.14",
+ "@tailwindcss/vite": "^4.1.14",
+ "typescript": "^5.9.3",
+ "vite": "^7.1.9"
  }
 }

src/components/editor/MonacoEditor.ts

@@ -0,0 +1,150 @@
+import { Component } from "typecomposer";
+import loader from "@monaco-editor/loader";
+import type * as Monaco from "monaco-editor";
+
+export class MonacoEditor extends Component {
+	private editor: Monaco.editor.IStandaloneCodeEditor | null = null;
+	private monaco: typeof Monaco | null = null;
+	private _value: string = "";
+	private _language: string = "typescript";
+	private _onChange: ((value: string) => void) | null = null;
+
+	constructor(config: {
+ value?: string;
+ language?: string;
+ onChange?: (value: string) => void;
+ className?: string;
+	} = {}) {
+ super({
+ className: config.className,
+ });
+
+ this.style.width = "100%";
+ this.style.height = "100%";
+
+ this._value = config.value || "";
+ this._language = config.language || "typescript";
+ this._onChange = config.onChange || null;
+	}
+
+	async onInit() {
+ try {
+ // Load Monaco Editor
+ this.monaco = await loader.init();
+
+ // Configure TypeScript compiler options
+ this.monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+ target: this.monaco.languages.typescript.ScriptTarget.ESNext,
+ allowNonTsExtensions: true,
+ moduleResolution: this.monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+ module: this.monaco.languages.typescript.ModuleKind.ESNext,
+ noEmit: true,
+ esModuleInterop: true,
+ jsx: this.monaco.languages.typescript.JsxEmit.React,
+ reactNamespace: "React",
+ allowJs: true,
+ typeRoots: ["node_modules/@types"],
+ experimentalDecorators: true,
+ emitDecoratorMetadata: true,
+ });
+
+ // Add TypeComposer type definitions (basic)
+ this.monaco.languages.typescript.typescriptDefaults.addExtraLib(
+ `
+declare module 'typecomposer' {
+ export class Component extends HTMLElement {
+ constructor(config?: any);
+ onInit?(): void | Promise<void>;
+ appendChild<T extends Node>(node: T): T;
+ }
+
+ export class DivElement extends Component {}
+ export class ButtonElement extends Component {}
+ export class VBox extends Component {}
+ export class HBox extends Component {}
+ export class IFrameElement extends Component {}
+}
+`,
+ "file:///node_modules/@types/typecomposer/index.d.ts"
+ );
+
+ // Create the editor
+ this.editor = this.monaco.editor.create(this, {
+ value: this._value,
+ language: this._language,
+ theme: "vs-dark",
+ automaticLayout: true,
+ minimap: { enabled: false },
+ fontSize: 14,
+ lineNumbers: "on",
+ roundedSelection: false,
+ scrollBeyondLastLine: false,
+ readOnly: false,
+ cursorStyle: "line",
+ formatOnPaste: true,
+ formatOnType: true,
+ tabSize: 2,
+ });
+
+ // Listen for content changes
+ this.editor.onDidChangeModelContent(() => {
+ const value = this.editor?.getValue() || "";
+ this._value = value;
+ if (this._onChange) {
+ this._onChange(value);
+ }
+ });
+ } catch (error) {
+ console.error("Failed to initialize Monaco Editor:", error);
+ }
+	}
+
+	/**
+ * Get current editor value
+ */
+	public getValue(): string {
+ return this.editor?.getValue() || this._value;
+	}
+
+	/**
+ * Set editor value
+ */
+	public setValue(value: string): void {
+ this._value = value;
+ if (this.editor) {
+ this.editor.setValue(value);
+ }
+	}
+
+	/**
+ * Set editor language
+ */
+	public setLanguage(language: string): void {
+ this._language = language;
+ if (this.editor && this.monaco) {
+ const model = this.editor.getModel();
+ if (model) {
+ this.monaco.editor.setModelLanguage(model, language);
+ }
+ }
+	}
+
+	/**
+ * Focus the editor
+ */
+	public focus(): void {
+ this.editor?.focus();
+	}
+
+	/**
+ * Cleanup when component is removed
+ */
+	disconnectedCallback() {
+ this.editor?.dispose();
+	}
+}
+
+// Only register if not already registered (prevents HMR errors)
+if (!customElements.get("monaco-editor")) {
+	customElements.define("monaco-editor", MonacoEditor);
+}

src/main.ts

@@ -1 +1,2 @@
-import "@/style.scss";
+import "@/styles/index.css";
+import "@/styles/style.scss";

src/router/router.ts

@@ -40,7 +40,7 @@ loadDocs().finally(() => {
  { path: "reactivity/computed", component: BaseView },
  { path: "router", component: BaseView },
  { path: "router-view", component: BaseView },
- { path: "home", component: BaseView }
+ { path: "home", component: BaseView },
  ],
  },
  { path: "/playground", component: PlaygroundPage },

src/styles/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/style.scss → src/styles/style.scss

@@ -1,35 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* ========================================
- CSS CUSTOM PROPERTIES (THEME SYSTEM)
- ======================================== */
-
-/*
-| Name (Romaji) | Hex | Description |
-| --------------------- | ------- | ------------------------- |
-| **GOFUNIRO** | #FFFFFC | Chalk |
-| **HAKUJI** | #F8FBF8 | White Porcelain |
-| **UNOHANA IRO** | #F7FCFE | Unohana [Deutzia] Flower |
-| **KINARIRO** | #FBFAF5 | Dough |
-| **SHIRONERI** | #F3F3F2 | Silk White Kneading |
-| **SOSOKU** | #EAE5E3 | Base Color |
-| **SHIRAUMENEZU** | #E5E4E6 | White Plum Grey |
-| **NYUHAKUSHOKU** | #F3F3F3 | Milky White |
-| **MURASAKISUISHIYOU** | #E7E7EB | Purple Water |
-| **SHIRONEZU** | #DCDDDD | White Grey |
-
-| Name | Hex |
-| ------------------ | ------- |
-| **Obsidian** | #0B1215 |
-| **Midnight Blue** | #101720 |
-| **Oil Black** | #0C0C0C |
-| **Rich Black** | #020D19 |
-| **Deep Navy Blue** | #011222 |
-| **Charcoal Gray** | #171717 |
-*/
-
 [data-theme="light"] {
  --primary-background-color: #ffffff;
  --secondary-background-color: #f8f9fa;
@@ -155,10 +123,6 @@ p {
  margin: 1rem 0;
 }
 
-/* ========================================
- CODE STYLING
- ======================================== */
-
 code {
  background-color: var(--code-background);
  border: 1px solid var(--border-color);
@@ -194,10 +158,6 @@ pre code {
  padding: 1rem !important;
 }
 
-/* ========================================
- FORM ELEMENTS
- ======================================== */
-
 button {
  display: flex;
  align-items: center;
@@ -839,7 +799,6 @@ label {
  }
 }
 
-/* Breadcrumb */
 .breadcrumb {
  font-size: 0.875rem;
  color: var(--text-muted);
@@ -852,7 +811,6 @@ label {
  display: none;
 }
 
-/* Mobile styles */
 @media (max-width: 768px) {
  .navbar {
  padding: 0 1rem;
@@ -937,15 +895,13 @@ label {
  cursor: pointer;
 }
 
-/* Highlight.js theme override */
 .hljs {
  background: var(--code-background) !important;
  color: var(--text-primary) !important;
  border-radius: 0.5rem;
  padding: 1rem !important;
 }
 
-/* Theme Toggle Styles */
 .navbar .nav-links .theme-toggle {
  display: flex;
  align-items: center;
@@ -1092,10 +1048,6 @@ label {
  font-size: 0.75rem;
 }
 
-/* ========================================
- ROADMAP COMPONENT STYLES
- ======================================== */
-
 .roadmap-title {
  color: var(--text-primary);
 }

package.json

@@ -12,21 +12,24 @@
  "new": "rm -rf node_modules/.vite && npm run start"
  },
  "dependencies": {
- "@codesandbox/sandpack-client": "^2.19.8",
  "@mdx-js/mdx": "^3.1.1",
+ "@monaco-editor/loader": "^1.5.0",
+ "esbuild-wasm": "^0.25.10",
  "highlight.js": "^11.11.1",
- "lucide": "^0.544.0",
+ "lucide": "^0.545.0",
+ "monaco-editor": "^0.54.0",
  "remark-gfm": "^4.0.1",
  "typecomposer": "^0.1.56"
  },
  "devDependencies": {
  "typecomposer-plugin": "^1.0.12",
- "@types/node": "^24.6.0",
+ "@types/node": "^24.7.1",
  "autoprefixer": "^10.4.21",
  "csstype": "^3.1.3",
  "sass": "^1.93.2",
- "tailwindcss": "^3.4.17",
- "typescript": "^5.9.2",
- "vite": "^7.1.6"
+ "tailwindcss": "^4.1.14",
+ "@tailwindcss/vite": "^4.1.14",
+ "typescript": "^5.9.3",
+ "vite": "^7.1.9"
  }
 }

src/components/editor/MonacoEditor.ts

@@ -0,0 +1,150 @@
+import { Component } from "typecomposer";
+import loader from "@monaco-editor/loader";
+import type * as Monaco from "monaco-editor";
+
+export class MonacoEditor extends Component {
+	private editor: Monaco.editor.IStandaloneCodeEditor | null = null;
+	private monaco: typeof Monaco | null = null;
+	private _value: string = "";
+	private _language: string = "typescript";
+	private _onChange: ((value: string) => void) | null = null;
+
+	constructor(config: {
+ value?: string;
+ language?: string;
+ onChange?: (value: string) => void;
+ className?: string;
+	} = {}) {
+ super({
+ className: config.className,
+ });
+
+ this.style.width = "100%";
+ this.style.height = "100%";
+
+ this._value = config.value || "";
+ this._language = config.language || "typescript";
+ this._onChange = config.onChange || null;
+	}
+
+	async onInit() {
+ try {
+ // Load Monaco Editor
+ this.monaco = await loader.init();
+
+ // Configure TypeScript compiler options
+ this.monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+ target: this.monaco.languages.typescript.ScriptTarget.ESNext,
+ allowNonTsExtensions: true,
+ moduleResolution: this.monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+ module: this.monaco.languages.typescript.ModuleKind.ESNext,
+ noEmit: true,
+ esModuleInterop: true,
+ jsx: this.monaco.languages.typescript.JsxEmit.React,
+ reactNamespace: "React",
+ allowJs: true,
+ typeRoots: ["node_modules/@types"],
+ experimentalDecorators: true,
+ emitDecoratorMetadata: true,
+ });
+
+ // Add TypeComposer type definitions (basic)
+ this.monaco.languages.typescript.typescriptDefaults.addExtraLib(
+ `
+declare module 'typecomposer' {
+ export class Component extends HTMLElement {
+ constructor(config?: any);
+ onInit?(): void | Promise<void>;
+ appendChild<T extends Node>(node: T): T;
+ }
+
+ export class DivElement extends Component {}
+ export class ButtonElement extends Component {}
+ export class VBox extends Component {}
+ export class HBox extends Component {}
+ export class IFrameElement extends Component {}
+}
+`,
+ "file:///node_modules/@types/typecomposer/index.d.ts"
+ );
+
+ // Create the editor
+ this.editor = this.monaco.editor.create(this, {
+ value: this._value,
+ language: this._language,
+ theme: "vs-dark",
+ automaticLayout: true,
+ minimap: { enabled: false },
+ fontSize: 14,
+ lineNumbers: "on",
+ roundedSelection: false,
+ scrollBeyondLastLine: false,
+ readOnly: false,
+ cursorStyle: "line",
+ formatOnPaste: true,
+ formatOnType: true,
+ tabSize: 2,
+ });
+
+ // Listen for content changes
+ this.editor.onDidChangeModelContent(() => {
+ const value = this.editor?.getValue() || "";
+ this._value = value;
+ if (this._onChange) {
+ this._onChange(value);
+ }
+ });
+ } catch (error) {
+ console.error("Failed to initialize Monaco Editor:", error);
+ }
+	}
+
+	/**
+ * Get current editor value
+ */
+	public getValue(): string {
+ return this.editor?.getValue() || this._value;
+	}
+
+	/**
+ * Set editor value
+ */
+	public setValue(value: string): void {
+ this._value = value;
+ if (this.editor) {
+ this.editor.setValue(value);
+ }
+	}
+
+	/**
+ * Set editor language
+ */
+	public setLanguage(language: string): void {
+ this._language = language;
+ if (this.editor && this.monaco) {
+ const model = this.editor.getModel();
+ if (model) {
+ this.monaco.editor.setModelLanguage(model, language);
+ }
+ }
+	}
+
+	/**
+ * Focus the editor
+ */
+	public focus(): void {
+ this.editor?.focus();
+	}
+
+	/**
+ * Cleanup when component is removed
+ */
+	disconnectedCallback() {
+ this.editor?.dispose();
+	}
+}
+
+// Only register if not already registered (prevents HMR errors)
+if (!customElements.get("monaco-editor")) {
+	customElements.define("monaco-editor", MonacoEditor);
+}

src/main.ts

@@ -1 +1,2 @@
-import "@/style.scss";
+import "@/styles/index.css";
+import "@/styles/style.scss";

src/router/router.ts

@@ -40,7 +40,7 @@ loadDocs().finally(() => {
  { path: "reactivity/computed", component: BaseView },
  { path: "router", component: BaseView },
  { path: "router-view", component: BaseView },
- { path: "home", component: BaseView }
+ { path: "home", component: BaseView },
  ],
  },
  { path: "/playground", component: PlaygroundPage },

src/styles/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/style.scss → src/styles/style.scss

@@ -1,35 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* ========================================
- CSS CUSTOM PROPERTIES (THEME SYSTEM)
- ======================================== */
-
-/*
-| Name (Romaji) | Hex | Description |
-| --------------------- | ------- | ------------------------- |
-| **GOFUNIRO** | #FFFFFC | Chalk |
-| **HAKUJI** | #F8FBF8 | White Porcelain |
-| **UNOHANA IRO** | #F7FCFE | Unohana [Deutzia] Flower |
-| **KINARIRO** | #FBFAF5 | Dough |
-| **SHIRONERI** | #F3F3F2 | Silk White Kneading |
-| **SOSOKU** | #EAE5E3 | Base Color |
-| **SHIRAUMENEZU** | #E5E4E6 | White Plum Grey |
-| **NYUHAKUSHOKU** | #F3F3F3 | Milky White |
-| **MURASAKISUISHIYOU** | #E7E7EB | Purple Water |
-| **SHIRONEZU** | #DCDDDD | White Grey |
-
-| Name | Hex |
-| ------------------ | ------- |
-| **Obsidian** | #0B1215 |
-| **Midnight Blue** | #101720 |
-| **Oil Black** | #0C0C0C |
-| **Rich Black** | #020D19 |
-| **Deep Navy Blue** | #011222 |
-| **Charcoal Gray** | #171717 |
-*/
-
 [data-theme="light"] {
  --primary-background-color: #ffffff;
  --secondary-background-color: #f8f9fa;
@@ -155,10 +123,6 @@ p {
  margin: 1rem 0;
 }
 
-/* ========================================
- CODE STYLING
- ======================================== */
-
 code {
  background-color: var(--code-background);
  border: 1px solid var(--border-color);
@@ -194,10 +158,6 @@ pre code {
  padding: 1rem !important;
 }
 
-/* ========================================
- FORM ELEMENTS
- ======================================== */
-
 button {
  display: flex;
  align-items: center;
@@ -839,7 +799,6 @@ label {
  }
 }
 
-/* Breadcrumb */
 .breadcrumb {
  font-size: 0.875rem;
  color: var(--text-muted);
@@ -852,7 +811,6 @@ label {
  display: none;
 }
 
-/* Mobile styles */
 @media (max-width: 768px) {
  .navbar {
  padding: 0 1rem;
@@ -937,15 +895,13 @@ label {
  cursor: pointer;
 }
 
-/* Highlight.js theme override */
 .hljs {
  background: var(--code-background) !important;
  color: var(--text-primary) !important;
  border-radius: 0.5rem;
  padding: 1rem !important;
 }
 
-/* Theme Toggle Styles */
 .navbar .nav-links .theme-toggle {
  display: flex;
  align-items: center;
@@ -1092,10 +1048,6 @@ label {
  font-size: 0.75rem;
 }
 
-/* ========================================
- ROADMAP COMPONENT STYLES
- ======================================== */
-
 .roadmap-title {
  color: var(--text-primary);
 }

package.json

@@ -12,21 +12,24 @@
  "new": "rm -rf node_modules/.vite && npm run start"
  },
  "dependencies": {
- "@codesandbox/sandpack-client": "^2.19.8",
  "@mdx-js/mdx": "^3.1.1",
+ "@monaco-editor/loader": "^1.5.0",
+ "esbuild-wasm": "^0.25.10",
  "highlight.js": "^11.11.1",
- "lucide": "^0.544.0",
+ "lucide": "^0.545.0",
+ "monaco-editor": "^0.54.0",
  "remark-gfm": "^4.0.1",
  "typecomposer": "^0.1.56"
  },
  "devDependencies": {
  "typecomposer-plugin": "^1.0.12",
- "@types/node": "^24.6.0",
+ "@types/node": "^24.7.1",
  "autoprefixer": "^10.4.21",
  "csstype": "^3.1.3",
  "sass": "^1.93.2",
- "tailwindcss": "^3.4.17",
- "typescript": "^5.9.2",
- "vite": "^7.1.6"
+ "tailwindcss": "^4.1.14",
+ "@tailwindcss/vite": "^4.1.14",
+ "typescript": "^5.9.3",
+ "vite": "^7.1.9"
  }
 }

src/components/editor/MonacoEditor.ts

@@ -0,0 +1,150 @@
+import { Component } from "typecomposer";
+import loader from "@monaco-editor/loader";
+import type * as Monaco from "monaco-editor";
+
+export class MonacoEditor extends Component {
+	private editor: Monaco.editor.IStandaloneCodeEditor | null = null;
+	private monaco: typeof Monaco | null = null;
+	private _value: string = "";
+	private _language: string = "typescript";
+	private _onChange: ((value: string) => void) | null = null;
+
+	constructor(config: {
+ value?: string;
+ language?: string;
+ onChange?: (value: string) => void;
+ className?: string;
+	} = {}) {
+ super({
+ className: config.className,
+ });
+
+ this.style.width = "100%";
+ this.style.height = "100%";
+
+ this._value = config.value || "";
+ this._language = config.language || "typescript";
+ this._onChange = config.onChange || null;
+	}
+
+	async onInit() {
+ try {
+ // Load Monaco Editor
+ this.monaco = await loader.init();
+
+ // Configure TypeScript compiler options
+ this.monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+ target: this.monaco.languages.typescript.ScriptTarget.ESNext,
+ allowNonTsExtensions: true,
+ moduleResolution: this.monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+ module: this.monaco.languages.typescript.ModuleKind.ESNext,
+ noEmit: true,
+ esModuleInterop: true,
+ jsx: this.monaco.languages.typescript.JsxEmit.React,
+ reactNamespace: "React",
+ allowJs: true,
+ typeRoots: ["node_modules/@types"],
+ experimentalDecorators: true,
+ emitDecoratorMetadata: true,
+ });
+
+ // Add TypeComposer type definitions (basic)
+ this.monaco.languages.typescript.typescriptDefaults.addExtraLib(
+ `
+declare module 'typecomposer' {
+ export class Component extends HTMLElement {
+ constructor(config?: any);
+ onInit?(): void | Promise<void>;
+ appendChild<T extends Node>(node: T): T;
+ }
+
+ export class DivElement extends Component {}
+ export class ButtonElement extends Component {}
+ export class VBox extends Component {}
+ export class HBox extends Component {}
+ export class IFrameElement extends Component {}
+}
+`,
+ "file:///node_modules/@types/typecomposer/index.d.ts"
+ );
+
+ // Create the editor
+ this.editor = this.monaco.editor.create(this, {
+ value: this._value,
+ language: this._language,
+ theme: "vs-dark",
+ automaticLayout: true,
+ minimap: { enabled: false },
+ fontSize: 14,
+ lineNumbers: "on",
+ roundedSelection: false,
+ scrollBeyondLastLine: false,
+ readOnly: false,
+ cursorStyle: "line",
+ formatOnPaste: true,
+ formatOnType: true,
+ tabSize: 2,
+ });
+
+ // Listen for content changes
+ this.editor.onDidChangeModelContent(() => {
+ const value = this.editor?.getValue() || "";
+ this._value = value;
+ if (this._onChange) {
+ this._onChange(value);
+ }
+ });
+ } catch (error) {
+ console.error("Failed to initialize Monaco Editor:", error);
+ }
+	}
+
+	/**
+ * Get current editor value
+ */
+	public getValue(): string {
+ return this.editor?.getValue() || this._value;
+	}
+
+	/**
+ * Set editor value
+ */
+	public setValue(value: string): void {
+ this._value = value;
+ if (this.editor) {
+ this.editor.setValue(value);
+ }
+	}
+
+	/**
+ * Set editor language
+ */
+	public setLanguage(language: string): void {
+ this._language = language;
+ if (this.editor && this.monaco) {
+ const model = this.editor.getModel();
+ if (model) {
+ this.monaco.editor.setModelLanguage(model, language);
+ }
+ }
+	}
+
+	/**
+ * Focus the editor
+ */
+	public focus(): void {
+ this.editor?.focus();
+	}
+
+	/**
+ * Cleanup when component is removed
+ */
+	disconnectedCallback() {
+ this.editor?.dispose();
+	}
+}
+
+// Only register if not already registered (prevents HMR errors)
+if (!customElements.get("monaco-editor")) {
+	customElements.define("monaco-editor", MonacoEditor);
+}

src/main.ts

@@ -1 +1,2 @@
-import "@/style.scss";
+import "@/styles/index.css";
+import "@/styles/style.scss";

src/router/router.ts

@@ -40,7 +40,7 @@ loadDocs().finally(() => {
  { path: "reactivity/computed", component: BaseView },
  { path: "router", component: BaseView },
  { path: "router-view", component: BaseView },
- { path: "home", component: BaseView }
+ { path: "home", component: BaseView },
  ],
  },
  { path: "/playground", component: PlaygroundPage },

src/styles/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/style.scss → src/styles/style.scss

@@ -1,35 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* ========================================
- CSS CUSTOM PROPERTIES (THEME SYSTEM)
- ======================================== */
-
-/*
-| Name (Romaji) | Hex | Description |
-| --------------------- | ------- | ------------------------- |
-| **GOFUNIRO** | #FFFFFC | Chalk |
-| **HAKUJI** | #F8FBF8 | White Porcelain |
-| **UNOHANA IRO** | #F7FCFE | Unohana [Deutzia] Flower |
-| **KINARIRO** | #FBFAF5 | Dough |
-| **SHIRONERI** | #F3F3F2 | Silk White Kneading |
-| **SOSOKU** | #EAE5E3 | Base Color |
-| **SHIRAUMENEZU** | #E5E4E6 | White Plum Grey |
-| **NYUHAKUSHOKU** | #F3F3F3 | Milky White |
-| **MURASAKISUISHIYOU** | #E7E7EB | Purple Water |
-| **SHIRONEZU** | #DCDDDD | White Grey |
-
-| Name | Hex |
-| ------------------ | ------- |
-| **Obsidian** | #0B1215 |
-| **Midnight Blue** | #101720 |
-| **Oil Black** | #0C0C0C |
-| **Rich Black** | #020D19 |
-| **Deep Navy Blue** | #011222 |
-| **Charcoal Gray** | #171717 |
-*/
-
 [data-theme="light"] {
  --primary-background-color: #ffffff;
  --secondary-background-color: #f8f9fa;
@@ -155,10 +123,6 @@ p {
  margin: 1rem 0;
 }
 
-/* ========================================
- CODE STYLING
- ======================================== */
-
 code {
  background-color: var(--code-background);
  border: 1px solid var(--border-color);
@@ -194,10 +158,6 @@ pre code {
  padding: 1rem !important;
 }
 
-/* ========================================
- FORM ELEMENTS
- ======================================== */
-
 button {
  display: flex;
  align-items: center;
@@ -839,7 +799,6 @@ label {
  }
 }
 
-/* Breadcrumb */
 .breadcrumb {
  font-size: 0.875rem;
  color: var(--text-muted);
@@ -852,7 +811,6 @@ label {
  display: none;
 }
 
-/* Mobile styles */
 @media (max-width: 768px) {
  .navbar {
  padding: 0 1rem;
@@ -937,15 +895,13 @@ label {
  cursor: pointer;
 }
 
-/* Highlight.js theme override */
 .hljs {
  background: var(--code-background) !important;
  color: var(--text-primary) !important;
  border-radius: 0.5rem;
  padding: 1rem !important;
 }
 
-/* Theme Toggle Styles */
 .navbar .nav-links .theme-toggle {
  display: flex;
  align-items: center;
@@ -1092,10 +1048,6 @@ label {
  font-size: 0.75rem;
 }
 
-/* ========================================
- ROADMAP COMPONENT STYLES
- ======================================== */
-
 .roadmap-title {
  color: var(--text-primary);
 }