diff options
Diffstat (limited to 'js/baba-yaga/web/editor/structural.html')
| -rw-r--r-- | js/baba-yaga/web/editor/structural.html | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/js/baba-yaga/web/editor/structural.html b/js/baba-yaga/web/editor/structural.html new file mode 100644 index 0000000..169e696 --- /dev/null +++ b/js/baba-yaga/web/editor/structural.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Baba Yaga Structural Editor - Advanced AST Editing</title> + <link rel="stylesheet" href="styles.css"> + <!-- CodeMirror for text editing --> + <link rel="stylesheet" href="../../node_modules/codemirror/lib/codemirror.css"> + <link rel="stylesheet" href="../../node_modules/codemirror/theme/monokai.css"> + <script src="../../node_modules/codemirror/lib/codemirror.js"></script> + <script src="../../node_modules/codemirror/addon/edit/closebrackets.js"></script> + <script src="../../node_modules/codemirror/addon/edit/matchbrackets.js"></script> + <script src="../../node_modules/codemirror/addon/fold/foldcode.js"></script> + <script src="../../node_modules/codemirror/addon/fold/foldgutter.js"></script> + <script src="../../node_modules/codemirror/addon/fold/brace-fold.js"></script> + <script src="../../node_modules/codemirror/addon/fold/indent-fold.js"></script> + <!-- Baba Yaga Language Components --> + <script type="module"> + // Import Baba Yaga components and make them globally available + import { createLexer, tokenTypes } from '../../lexer.js'; + import { createParser } from '../../parser.js'; + import { createInterpreter } from '../../interpreter.js'; + + // Make them globally available + window.createLexer = createLexer; + window.createParser = createParser; + window.createInterpreter = createInterpreter; + window.tokenTypes = tokenTypes; + + console.log('Baba Yaga modules loaded and made globally available'); + </script> + <!-- Baba Yaga Language Mode - Load after CodeMirror --> + <script src="js/baba-yaga-mode.js"></script> + <!-- Tree-sitter for parsing (optional for now) --> + <script src="https://unpkg.com/tree-sitter@0.20.6/dist/tree-sitter.js"></script> +</head> +<body> + <div class="editor-container"> + <!-- Header --> + <header class="editor-header"> + <h1>Baba Yaga Structural Editor</h1> + <div class="header-controls"> + <button id="parse-btn">Parse</button> + <button id="format-btn">Format</button> + <button id="run-btn">Run</button> + <a href="index.html" style="text-decoration: none; display: inline-block; background-color: #8b5cf6; color: white; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: background-color 0.2s;" onmouseover="this.style.backgroundColor='#7c3aed'" onmouseout="this.style.backgroundColor='#8b5cf6'">▶ Code Runner</a> + </div> + </header> + + <!-- Main editor area --> + <div class="editor-main"> + <!-- Top row: Code editor and AST tree view side by side --> + <div class="top-row"> + <!-- Code editor (50% width) --> + <div class="code-editor-panel"> + <h3>Code Editor <span id="parse-status" class="parse-status"></span><button id="retry-syntax-btn" class="retry-btn" title="Retry loading syntax highlighting">🔄</button></h3> + <div class="code-editor-container"> + <textarea id="code-editor" placeholder="Enter your Baba Yaga code here..."></textarea> + </div> + </div> + + <!-- AST Tree View/Editor (50% width) --> + <div class="ast-editor-panel"> + <h3>AST Tree Editor <button id="add-function-btn" class="add-btn">+ Function</button><button id="add-when-btn" class="add-btn">+ When</button><button id="add-with-btn" class="add-btn">+ With</button></h3> + <div class="tree-editor-container"> + <div id="tree-view"></div> + </div> + </div> + </div> + + <!-- Bottom row: Output panel --> + <div class="output-panel"> + <h3>Output</h3> + <div class="output-tabs"> + <button class="tab-btn active" data-tab="output">Output</button> + <button class="tab-btn" data-tab="errors">Errors</button> + <button class="tab-btn" data-tab="ast-json">AST JSON</button> + </div> + <div class="output-content"> + <div id="output-tab" class="tab-pane active"> + <pre id="output-text"></pre> + </div> + <div id="errors-tab" class="tab-pane"> + <pre id="errors-text"></pre> + </div> + <div id="ast-json-tab" class="tab-pane"> + <pre id="ast-json-text"></pre> + </div> + </div> + </div> + </div> + </div> + + <!-- Scripts --> + <script src="js/tree-sitter-baba-yaga.js"></script> + <script src="js/editor.js"></script> + <script src="js/ast-synchronizer.js"></script> + <script src="js/main.js"></script> +</body> +</html> |