1 files changed, 155 insertions, 0 deletions
diff --git a/js/baba-yaga/web/editor/test-formatter.html b/js/baba-yaga/web/editor/test-formatter.html
new file mode 100644
index 0000000..616afe2
--- /dev/null
+++ b/js/baba-yaga/web/editor/test-formatter.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test Baba Yaga Formatter</title>
+    <style>
+        body {
+            font-family: monospace;
+            padding: 20px;
+            background: #1e1e1e;
+            color: #d4d4d4;
+        }
+        .test-section {
+            margin: 20px 0;
+            padding: 20px;
+            border: 1px solid #3e3e42;
+            border-radius: 8px;
+        }
+        .code-block {
+            background: #2d2d30;
+            padding: 10px;
+            border-radius: 4px;
+            white-space: pre-wrap;
+            margin: 10px 0;
+        }
+        .success { color: #4ec9b0; }
+        .error { color: #f14c4c; }
+        button {
+            background: #007acc;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 10px 0;
+        }
+        button:hover {
+            background: #005a9e;
+        }
+    </style>
+</head>
+<body>
+    <h1>Baba Yaga Formatter Test</h1>
+    
+    <div class="test-section">
+        <h2>Test 1: Basic Function Formatting</h2>
+        <div class="code-block" id="input1">add:x y->x+y;</div>
+        <button onclick="testFormat1()">Format Test 1</button>
+        <div class="code-block" id="output1"></div>
+        <div id="result1"></div>
+    </div>
+
+    <div class="test-section">
+        <h2>Test 2: Complex Code Formatting</h2>
+        <div class="code-block" id="input2">factorial:n->when n is 0 then 1 1 then 1 _ then n*factorial(n-1);</div>
+        <button onclick="testFormat2()">Format Test 2</button>
+        <div class="code-block" id="output2"></div>
+        <div id="result2"></div>
+    </div>
+
+    <div class="test-section">
+        <h2>Test 3: Multiple Functions</h2>
+        <div class="code-block" id="input3">add:x y->x+y;
+multiply:x y->x*y;
+result:add 5 3;</div>
+        <button onclick="testFormat3()">Format Test 3</button>
+        <div class="code-block" id="output3"></div>
+        <div id="result3"></div>
+    </div>
+
+    <!-- Load Baba Yaga components -->
+    <script type="module">
+        import { createLexer, tokenTypes } from '../../lexer.js';
+        import { createParser } from '../../parser.js';
+        
+        // Make them globally available
+        window.createLexer = createLexer;
+        window.createParser = createParser;
+        window.tokenTypes = tokenTypes;
+        
+        console.log('Baba Yaga modules loaded');
+    </script>
+
+    <!-- Load formatter -->
+    <script src="js/formatter.js"></script>
+
+    <script>
+        function testFormat1() {
+            const input = document.getElementById('input1').textContent;
+            const output = document.getElementById('output1');
+            const result = document.getElementById('result1');
+            
+            try {
+                const formatter = new BabaYagaFormatter();
+                const formatted = formatter.format(input);
+                output.textContent = formatted;
+                result.innerHTML = '<span class="success">✓ Formatting successful!</span>';
+            } catch (error) {
+                output.textContent = 'Error: ' + error.message;
+                result.innerHTML = '<span class="error">✗ Formatting failed: ' + error.message + '</span>';
+            }
+        }
+
+        function testFormat2() {
+            const input = document.getElementById('input2').textContent;
+            const output = document.getElementById('output2');
+            const result = document.getElementById('result2');
+            
+            try {
+                const formatter = new BabaYagaFormatter();
+                const formatted = formatter.format(input);
+                output.textContent = formatted;
+                result.innerHTML = '<span class="success">✓ Formatting successful!</span>';
+            } catch (error) {
+                output.textContent = 'Error: ' + error.message;
+                result.innerHTML = '<span class="error">✗ Formatting failed: ' + error.message + '</span>';
+            }
+        }
+
+        function testFormat3() {
+            const input = document.getElementById('input3').textContent;
+            const output = document.getElementById('output3');
+            const result = document.getElementById('result3');
+            
+            try {
+                const formatter = new BabaYagaFormatter();
+                const formatted = formatter.format(input);
+                output.textContent = formatted;
+                result.innerHTML = '<span class="success">✓ Formatting successful!</span>';
+            } catch (error) {
+                output.textContent = 'Error: ' + error.message;
+                result.innerHTML = '<span class="error">✗ Formatting failed: ' + error.message + '</span>';
+            }
+        }
+
+        // Test formatter availability on load
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                if (typeof BabaYagaFormatter !== 'undefined') {
+                    console.log('✓ BabaYagaFormatter is available');
+                } else {
+                    console.error('✗ BabaYagaFormatter is not available');
+                }
+                
+                if (typeof createLexer !== 'undefined' && typeof createParser !== 'undefined') {
+                    console.log('✓ Baba Yaga language components are available');
+                } else {
+                    console.error('✗ Baba Yaga language components are not available');
+                }
+            }, 1000);
+        });
+    </script>
+</body>
+</html>