error-lang/ide/index.html at 8cefc487b0a464a4a70d0803ac6c9abbe65c73f3 · hyperpolymath/error-lang · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<!-- SPDX-License-Identifier: MPL-2.0 -->
<!-- Error-Lang Studio - Language Archaeology IDE -->
<!-- Author: Jonathan D.A. Jewell <j.d.a.jewell@open.ac.uk> -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Error-Lang Studio - Language Archaeology IDE</title>
  <meta name="description" content="Interactive IDE for Error-Lang - explore computational haptics, stability tracking, and paradox discovery">
  <link rel="stylesheet" href="/src/styles.css">

  <!-- Monaco Editor: Load via AMD (require.js) from CDN -->
  <!-- Monaco does not support ES modules natively; AMD is the standard loader -->
  <style>
    /* Monaco editor container must have explicit dimensions */
    #monaco-editor-container {
      width: 100%;
      height: 100%;
      min-height: 300px;
    }
    /* Loading state while Monaco downloads */
    .monaco-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #808080;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
    }
    .monaco-loading::after {
      content: "Loading editor...";
    }
  </style>
</head>
<body>
  <div id="app"></div>

  <!-- Load Monaco Editor via AMD loader from jsDelivr CDN -->
  <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs/loader.js"></script>
  <script>
    // Configure AMD loader paths for Monaco
    require.config({
      paths: {
        vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs"
      }
    });

    // Load Monaco editor core, then initialize Error-Lang support
    require(["vs/editor/editor.main"], function () {
      console.log("Monaco editor core loaded");

      // Import and run the Error-Lang setup module
      import("/src/monaco-setup.js").then(function (setup) {
        // Store setup module globally for TEA interop
        window.__errorLangSetup = setup;

        // Initialize will be called when the DOM container is ready
        // The TEA app creates the container, then calls initMonacoEditor
        console.log("Error-Lang Monaco setup module loaded");

        // If the container already exists (e.g., static HTML), init immediately
        if (document.getElementById("monaco-editor-container")) {
          setup.initMonacoEditor();
        }
      });
    });
  </script>

  <!-- Main application (TEA architecture; AffineScript compiled to a Deno-ESM
       bundle (src/Main.js) and driven by the host shim (src/host.js)) -->
  <script type="module" src="/src/host.js"></script>
</body>
</html>