From e6c66902969439d932f949fb39dcd0128ed44f98 Mon Sep 17 00:00:00 2001
From: Myriad-Dreamin <camiyoru@gmail.com>
Date: Fri, 3 Nov 2023 22:20:43 +0800
Subject: [PATCH] feat: use typst repr in cetz editor

---
 projects/cetz-editor/definitions.typ  |  21 +
 projects/cetz-editor/definitions.yaml |  43 --
 projects/cetz-editor/index.html       | 564 +++++++++++++------------
 projects/cetz-editor/src/global.d.mts |   1 +
 projects/cetz-editor/src/index.mts    | 583 +++++++++++++++++++++++++-
 projects/cetz-editor/typst-style.css  |   8 +-
 6 files changed, 888 insertions(+), 332 deletions(-)
 create mode 100644 projects/cetz-editor/definitions.typ
 delete mode 100644 projects/cetz-editor/definitions.yaml
diff --git a/projects/cetz-editor/definitions.typ b/projects/cetz-editor/definitions.typ
new file mode 100644
index 00000000..21b545ec
--- /dev/null
+++ b/projects/cetz-editor/definitions.typ
@@ -0,0 +1,21 @@
+
+#let x-circle(rad: 200, inner-text: "") = {
+  circle((0, 0), radius: rad, name: node-label)
+  debug-label((-rad*0.7, -rad*0.7))
+  content(node-label, inner-text)
+}
+#let x-rect(x: 200, y: none, inner-text: "") = {
+  let y = if y == none {
+    x
+  } else {
+    y
+  }
+  rect((0, 0), (x, y), name: node-label)
+  debug-label((0, 0))
+  content(node-label, inner-text)
+}
+#let x-arrow(start: (0, 10), end: (50, 10), inner-text: "", mark: (end: ">")) = {
+  set-style(mark: (fill: none, size: 14))
+  line(start, end, name: "t", mark: mark)
+  content("t", inner-text)
+}
\ No newline at end of file
diff --git a/projects/cetz-editor/definitions.yaml b/projects/cetz-editor/definitions.yaml
deleted file mode 100644
index 445a1ce1..00000000
--- a/projects/cetz-editor/definitions.yaml
+++ /dev/null
@@ -1,43 +0,0 @@
-definitions:
-  - id: x-circle
-    props: # default props
-      rad: 200
-      inner-text: '""'
-    draw: |
-      {
-        circle((0, 0), radius: rad, name: node-label)
-        debug-label((-rad*0.7, -rad*0.7))
-        content(node-label, inner-text)
-      }
-  - id: x-rect
-    props: # default props
-      x: 200
-      y: none
-      inner-text: '""'
-    draw: |
-      {
-        let y = if y == none {
-          x
-        } else {
-          y
-        }
-        rect((0, 0), (x, y), name: node-label)
-        debug-label((0, 0))
-        content(node-label, inner-text)
-
-      }
-  - id: x-arrow
-    props: # default props
-      start: (0, 10)
-      end: (50, 10)
-      inner-text: '""'
-      mark: |
-        (end: ">")
-    draw: |
-      {
-        set-style(mark: (fill: none, size: 7))
-        line(start, end, name: "t", mark: mark)
-        content("t", inner-text)
-      }
-width: 600pt
-height: 600pt
diff --git a/projects/cetz-editor/index.html b/projects/cetz-editor/index.html
index 0cf35abb..e0352b1a 100644
--- a/projects/cetz-editor/index.html
+++ b/projects/cetz-editor/index.html
@@ -2,299 +2,319 @@
 <html lang="en">
 
 <head>
-  <link rel="icon" href="favicon.svg" />
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Cetz Editor</title>
-  <script>
-    window.script$jsYamlLoad = new Promise(resolve => {
-      window.script$jsYamlLoadResolve = resolve;
-    });
-  </script>
-  <script id="script-main" type="module" src="/dist/esm/index.mjs"></script>
-  <link rel="stylesheet" href="typst-style.css" />
-  <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/dev/vs/loader.min.js"></script>
-  <script type="module">
-    import jsYaml from 'https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/+esm';
-    window.jsYaml = jsYaml;
-    window.script$jsYamlLoadResolve(jsYaml);
-  </script>
+    <link rel="icon" href="favicon.svg" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cetz Editor</title>
+    <script>
+        window.script$jsYamlLoad = new Promise(resolve => {
+            window.script$jsYamlLoadResolve = resolve;
+        });
+    </script>
+    <script id="script-main" type="module" src="/dist/esm/index.mjs"></script>
+    <link rel="stylesheet" href="typst-style.css" />
+    <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/dev/vs/loader.min.js"></script>
 </head>
 
 <body style="height: 100vh; overflow: hidden">
-  <div class="editor-main flex-column" style="height: 100vh">
-    <div class="top-panel" style="flex: 0 0 auto">
-      <div class="flex-row" style="margin: 5px; align-items: center;">
-        <image src="favicon.svg" style="height: 1rem; margin: 3px; margin-left: 2px;"></image>
-        <div class="editor-menu-group" style="margin-left: 1em; padding: 1px 3px;">
-          <a class="editor-menu" id="export-svg">SVG</a>
-          <a class="editor-menu" id="export-pdf">PDF</a>
-          <a class="editor-menu" id="export-cetz">CeTZ</a>
-          <a class="editor-menu" id="export-elem">Element</a>
+    <div class="editor-main flex-column" style="height: 100vh">
+        <div class="top-panel" style="flex: 0 0 auto">
+            <div class="flex-row" style="margin: 5px; align-items: center;">
+                <image src="favicon.svg" style="height: 1rem; margin: 3px; margin-left: 2px;"></image>
+                <div class="editor-menu-group" style="margin-left: 1em; padding: 1px 3px;">
+                    <a class="editor-menu" id="export-svg">SVG</a>
+                    <a class="editor-menu" id="export-pdf">PDF</a>
+                    <a class="editor-menu" id="export-cetz">CeTZ</a>
+                    <a class="editor-menu" id="export-elem">Element</a>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-    <div class="bottom-panel flex-row" style="flex: 1">
-      <div style="flex: 0 0 35px">
-      </div>
-      <div class="flex-column" style="flex: 1">
-        <div style="margin: 5px; flex: 1">
-          <div class="editor-action-group">
-            <span>definition:</span>
-            <select id="preview-selector" class="editor-code-select"></select>
-          </div>
-          <div class="editor-action-group">
-            <span>element:</span>
-            <div class="flex-row" style="display: inline-flex; justify-content:
+        <div class="bottom-panel flex-row" style="flex: 1">
+            <div style="flex: 0 0 35px">
+            </div>
+            <div class="flex-column" style="flex: 1">
+                <div style="margin: 5px; flex: 1">
+                    <div class="editor-action-group">
+                        <span>definition:</span>
+                        <select id="preview-selector" class="editor-code-select"></select>
+                        <span>from</span>
+                        <div class="flex-row" style="display: inline-flex; justify-content:
             space-around; gap: 5px">
-              <select id="insert-selector" class="editor-code-select"></select>
-              <input id="insert-name" class="editor-input-box" type="text" placeholder="name" />
-              <button id="insert-elem" class="editor-input-button">Insert</button>
+                            <select id="definition-source-selector" class="editor-code-select">
+                                <option value="builtin">builtin</option>
+                                <option value="url">Url</option>
+                                <option value="file">File</option>
+                            </select>
+                            <input id="definition-source-value" class="editor-input-box" type="text" placeholder="https://..." />
+                        </div>
+                        </div>
+                    <div class="editor-action-group">
+                        <span>element:</span>
+                        <div class="flex-row" style="display: inline-flex; justify-content:
+            space-around; gap: 5px">
+                            <select id="insert-selector" class="editor-code-select"></select>
+                            <input id="insert-name" class="editor-input-box" type="text" placeholder="name" />
+                            <button id="insert-elem" class="editor-input-button">Insert</button>
+                        </div>
+                    </div>
+                    <div class="editor-action-group" style="float: right;">
+                        <span>viewport:</span>
+                        <input id="input-svg-width" class="editor-input-box" type="text" placeholder="width"
+                            style="width: 2.5em;" />
+                        <span>·</span>
+                        <input id="input-svg-height" class="editor-input-box" type="text" placeholder="height"
+                            style="width: 2.5em;" />
+                    </div>
+                </div>
+                <div class="flex-row" style="flex: 1">
+                    <div class="flex-column" style="flex: 4; height: 100vh">
+                        <div id="def-editor" style="flex: 5"></div>
+                        <div id="main-editor" style="flex: 2"></div>
+                    </div>
+                    <div id="preview" style="flex: 6">
+                        <div id="preview-panel"></div>
+                    </div>
+                </div>
             </div>
-          </div>
-          <div class="editor-action-group" style="float: right;">
-            <span>viewport:</span>
-            <input id="input-svg-width" class="editor-input-box" type="text"
-            placeholder="width" style="width: 2.5em;" />
-            <span>·</span>
-            <input id="input-svg-height" class="editor-input-box" type="text" placeholder="height" style="width: 2.5em;" />
-          </div>
-        </div>
-        <div class="flex-row" style="flex: 1">
-          <div class="flex-column" style="flex: 4; height: 100vh">
-            <div id="def-editor" style="flex: 5"></div>
-            <div id="main-editor" style="flex: 2"></div>
-          </div>
-          <div id="preview" style="flex: 6">
-            <div id="preview-panel"></div>
-          </div>
         </div>
-      </div>
     </div>
-  </div>
-  <script>
-    function parseJson5(str) {
-      str = str.replace(
-        /\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g,
-        (m, g) => (g ? "" : m)
-      );
-      return JSON.parse(str);
-    }
+    <script>
+        function parseJson5(str) {
+            str = str.replace(
+                /\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g,
+                (m, g) => (g ? "" : m)
+            );
+            return JSON.parse(str);
+        }
 
-    function monacoThemeFromVscTheme(vscodeTheme) {
-      const baseTokenColors = [];
-      for (const tc of vscodeTheme.tokenColors) {
-        if (typeof tc.scope === "string") {
-          baseTokenColors.push({ token: tc.scope, ...tc.settings });
-        } else {
-          baseTokenColors.push(
-            ...tc.scope.map((s) => {
-              return { token: s, ...tc.settings };
-            })
-          );
+        function monacoThemeFromVscTheme(vscodeTheme) {
+            vscodeTheme = adaptVsCodeThemeForTypst(vscodeTheme);
+            const baseTokenColors = [];
+            for (const tc of vscodeTheme.tokenColors) {
+                if (typeof tc.scope === "string") {
+                    baseTokenColors.push({ token: tc.scope, ...tc.settings });
+                } else {
+                    baseTokenColors.push(
+                        ...tc.scope.map((s) => {
+                            return { token: s, ...tc.settings };
+                        })
+                    );
+                }
+            }
+            console.log("baseTokenColors", baseTokenColors);
+            const monacoTheme = {
+                base: "vs-dark",
+                inherit: true,
+                colors: vscodeTheme.colors,
+                rules: baseTokenColors,
+            };
+            return monacoTheme;
         }
-      }
-      console.log("baseTokenColors", baseTokenColors);
-      const monacoTheme = {
-        base: "vs-dark",
-        inherit: true,
-        colors: vscodeTheme.colors,
-        rules: [
-          ...Object.keys(vscodeTheme.semanticTokenColors).map((k) => {
-            return { token: k, foreground: vscodeTheme.semanticTokenColors[k] };
-          }),
-          ...baseTokenColors,
-        ],
-      };
-      return monacoTheme;
-    }
 
 
 
-    window.onload = function () {
-      const insertSelector = document.getElementById('insert-selector');
-      const insertName = document.getElementById('insert-name');
-      const previewSelector = document.getElementById('preview-selector');
-      const inputSvgWidth = document.getElementById('input-svg-width');
-      const inputSvgHeight = document.getElementById('input-svg-height');
-      inputSvgWidth.value = inputSvgHeight.value = '600';
+        window.onload = function () {
+            const insertSelector = document.getElementById('insert-selector');
+            const insertName = document.getElementById('insert-name');
+            const previewSelector = document.getElementById('preview-selector');
+            const definitionSourceSelector = document.getElementById('definition-source-selector');
+            const definitionSourceValue = document.getElementById('definition-source-value');
+            const inputSvgWidth = document.getElementById('input-svg-width');
+            const inputSvgHeight = document.getElementById('input-svg-height');
+            inputSvgWidth.value = inputSvgHeight.value = '600';
 
-      // require is provided by loader.min.js.
-      require.config({
-        paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs' },
-      });
-      require(['vs/editor/editor.main'], () => {
-        monaco.editor.defineTheme("tokyo-night", tokyoNightTheme());
-        const definitionEditor = monaco.editor.create(document.getElementById('def-editor'), {
-          value: '',
-          language: 'yaml',
-          theme: 'tokyo-night',
-        });
-        const mainEditor = monaco.editor.create(document.getElementById('main-editor'), {
-          value: '',
-          language: 'yaml',
-          theme: 'tokyo-night',
-        });
-        $preview.bindElement(document.getElementById('preview-panel'), v => mainEditor.setValue(v));
-        document.getElementById('export-svg').addEventListener('click', () => {
-          $preview.doExport('svg');
-        });
-        document.getElementById('export-pdf').addEventListener('click', () => {
-          $preview.doExport('pdf');
-        });
-        document.getElementById('export-cetz').addEventListener('click', () => {
-          $preview.doExport('cetz');
-        });
-        document.getElementById('insert-elem').addEventListener('click', () => {
-          let insertNameValue = insertName.value;
-          if (!insertNameValue) {
-            insertNameValue = 'node-' + Math.random().toString(36).substring(7).replace('0.', '');
-          }
-          console.log('insertSelector.value', insertSelector.value, insertNameValue);
-          $preview.doInsertElem(insertSelector.value, insertNameValue);
-        });
+            // require is provided by loader.min.js.
+            require.config({
+                paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs' },
+            });
+            require(['vs/editor/editor.main'], async () => {
+                monaco.editor.defineTheme("tokyo-night", tokyoNightTheme());
+                // Register a new language
+                monaco.languages.register({ id: "typst", extensions: ['.typ'] });
+                monaco.languages.registerDocumentSemanticTokensProvider('typst', await $typst$semanticTokensProvider);
 
-        const checkLength = (v) => {
-          if (v.endsWith('pt')) {
-            v = v.substring(0, t.length - 2);
-          }
-          if (!v) {
-            v = '600';
-          }
+                const definitionEditor = monaco.editor.create(document.getElementById('def-editor'), {
+                    value: '',
+                    language: 'typst',
+                    theme: 'tokyo-night',
+                    'semanticHighlighting.enabled': true,
+                     "bracketPairColorization.enabled": true,
+                });
+                const mainEditor = monaco.editor.create(document.getElementById('main-editor'), {
+                    value: '',
+                    language: 'typst',
+                    theme: 'tokyo-night',
+                    'semanticHighlighting.enabled': true,
+                     "bracketPairColorization.enabled": true,
+                });
+                $preview.bindElement(document.getElementById('preview-panel'), v => mainEditor.setValue(v));
+                document.getElementById('export-svg').addEventListener('click', () => {
+                    $preview.doExport('svg');
+                });
+                document.getElementById('export-pdf').addEventListener('click', () => {
+                    $preview.doExport('pdf');
+                });
+                document.getElementById('export-cetz').addEventListener('click', () => {
+                    $preview.doExport('cetz');
+                });
+                document.getElementById('insert-elem').addEventListener('click', () => {
+                    let insertNameValue = insertName.value;
+                    if (!insertNameValue) {
+                        insertNameValue = 'node-' + Math.random().toString(36).substring(7).replace('0.', '');
+                    }
+                    console.log('insertSelector.value', insertSelector.value, insertNameValue);
+                    $preview.doInsertElem(insertSelector.value, insertNameValue);
+                });
 
-          const t = Number.parseFloat(v);
-          if (Number.isNaN(t)) {
-            throw new Error('invalid number');
-          }
+                const checkLength = (v) => {
+                    if (v.endsWith('pt')) {
+                        v = v.substring(0, t.length - 2);
+                    }
+                    if (!v) {
+                        v = '600';
+                    }
 
-          return `${t}pt`;
-        };
+                    const t = Number.parseFloat(v);
+                    if (Number.isNaN(t)) {
+                        throw new Error('invalid number');
+                    }
 
-        const triggerSyncEditorState = () => {
-          const yml = definitionEditor.getValue();
-          script$jsYamlLoad.then(() => {
-            try {
-              const defs = jsYaml.load(yml);
-              defs.width = checkLength(inputSvgWidth.value);
-              defs.height = checkLength(inputSvgHeight.value);
-              $preview.doSetDefinitions({ ...defs });
-              previewSelector.innerHTML = '';
-              insertSelector.innerHTML = '';
-              for (const def of ['main', ...$preview.getDefinitionNames()]) {
-                const option = document.createElement('option');
-                option.value = def;
-                option.innerText = def;
-                previewSelector.appendChild(option.cloneNode(true));
-                if (def !== 'main') {
-                  insertSelector.appendChild(option);
-                }
-              }
-            } catch (e) {
-              console.log('error', e);
-            }
-          });
-        };
-        definitionEditor.getModel().onDidChangeContent(e => {
-          triggerSyncEditorState();
-        });
-        inputSvgWidth.oninput = triggerSyncEditorState;
-        inputSvgHeight.oninput = triggerSyncEditorState;
+                    return `${t}pt`;
+                };
 
-        const triggerSyncMain = () => {
-          const yml = mainEditor.getValue();
-          script$jsYamlLoad.then(() => {
-            try {
-              $preview.doSetMainContent(jsYaml.load(yml));
-            } catch (e) {
-              console.log('error', e);
-            }
-          });
-        };
-        mainEditor.getModel().onDidChangeContent(e => {
-          if (e.isFlush) {
-            return;
-          }
-          triggerSyncMain();
-        });
+                const triggerSyncEditorState = () => {
+                    const defs = {
+                        content: definitionEditor.getValue(),
+                        width: checkLength(inputSvgWidth.value),
+                        height: checkLength(inputSvgHeight.value),
+                    };
+                    $preview.doSetDefinitions(defs);
+                    previewSelector.innerHTML = '';
+                    insertSelector.innerHTML = '';
+                    for (const def of ['main', ...$preview.getDefinitionNames()]) {
+                        const option = document.createElement('option');
+                        option.value = def;
+                        option.innerText = def;
+                        previewSelector.appendChild(option.cloneNode(true));
+                        if (def !== 'main') {
+                            insertSelector.appendChild(option);
+                        }
+                    }
+                };
+                definitionEditor.getModel().onDidChangeContent(e => {
+                    triggerSyncEditorState();
+                });
+                inputSvgWidth.oninput = triggerSyncEditorState;
+                inputSvgHeight.oninput = triggerSyncEditorState;
 
-        definitionEditor.setValue(`definitions:
-- id: x-circle
-  props: # default props
-    rad: 200
-    inner-text: '""'
-  draw: |
-    {
-      circle((0, 0), radius: rad, name: node-label)
-      debug-label((-rad*0.7, -rad*0.7))
-      content(node-label, inner-text)
-    }
-- id: x-rect
-  props: # default props
-    x: 200
-    y: none
-    inner-text: '""'
-  draw: |
-    {
-      let y = if y == none {
-        x
-      } else {
-        y
-      }
-      rect((0, 0), (x, y), name: node-label)
-      debug-label((0, 0))
-      content(node-label, inner-text)
+                const triggerSyncMain = () => {
+                    try {
+                        $preview.doSetMainContent({
+                            content: mainEditor.getValue(),
+                        });
+                    } catch (e) {
+                        console.log('error', e);
+                    }
+                };
+                mainEditor.getModel().onDidChangeContent(e => {
+                    if (e.isFlush) {
+                        return;
+                    }
+                    triggerSyncMain();
+                });
 
-    }
-- id: x-arrow
-  props: # default props
-    start: (0, 10)
-    end: (50, 10)
-    inner-text: '""'
-    mark: |
-      (end: ">")
-  draw: |
-    {
-      set-style(mark: (fill: none, size: 7))
-      line(start, end, name: "t", mark: mark)
-      content("t", inner-text)
-    }`);
-        mainEditor.setValue(`
-- name: c0
-  type: x-circle
-  args:
-    rad: 50
-  pos: [0, 0]
-- name: c1
-  type: x-rect
-  args:
-    x: 100
-  pos: [50, 50]
-- name: c2
-  type: x-circle
-  args:
-    rad: 50
-  pos: [200, 0]
-- name: c1toc2
-  type: x-arrow
-  args:
-    start: '"c1"'
-    end: '"c2"'
-  pos: [0, 0]
+                const builtinDefinitions = `
+#let x-circle(rad: 200, inner-text: "") = {
+  circle((0, 0), radius: rad, name: node-label)
+  debug-label((-rad*0.7, -rad*0.7))
+  content(node-label, inner-text)
+}
+#let x-rect(x: 200, y: none, inner-text: "") = {
+  let y = if y == none {
+    x
+  } else {
+    y
+  }
+  rect((0, 0), (x, y), name: node-label)
+  debug-label((0, 0))
+  content(node-label, inner-text)
+}
+#let x-arrow(start: (0, 10), end: (50, 10), inner-text: "", mark: (end: ">")) = {
+  set-style(mark: (fill: none, size: 14))
+  line(start, end, name: "t", mark: mark)
+  content("t", inner-text)
+}`;
+                definitionEditor.setValue(builtinDefinitions);
+                //         mainEditor.setValue(`
+                // - name: c0
+                //   type: x-circle
+                //   args:
+                //     rad: 50
+                //   pos: [0, 0]
+                // - name: c1
+                //   type: x-rect
+                //   args:
+                //     x: 100
+                //   pos: [50, 50]
+                // - name: c2
+                //   type: x-circle
+                //   args:
+                //     rad: 50
+                //   pos: [200, 0]
+                // - name: c1toc2
+                //   type: x-arrow
+                //   args:
+                //     start: '"c1"'
+                //     end: '"c2"'
+                //   pos: [0, 0]
+                // `);
+                mainEditor.setValue(`#{
+  make-ins("c0", (0, 0), "x-circle", (rad: 50))
+  make-ins("c1", (50, 50), "x-rect", (x: 100))
+  make-ins("c2", (200, 0), "x-circle", (rad: 50))
+  make-ins("c1toc2", (0, 0), "x-arrow", (start: "c1", end: "c2"))
+}
 `);
-        triggerSyncEditorState();
-        triggerSyncMain();
+                triggerSyncEditorState();
+                triggerSyncMain();
 
-        previewSelector.onchange = () => {
-          console.log('previewSelector.value', previewSelector.value);
-          $preview.doSelectDef(previewSelector.value);
-        };
+                previewSelector.onchange = () => {
+                  console.log('previewSelector.value', previewSelector.value);
+                  $preview.doSelectDef(previewSelector.value);
+                };
 
-        $preview.doSelectDef('');
-      });
-    };
+                $preview.doSelectDef('');
 
-    function tokyoNightTheme() {
-      return monacoThemeFromVscTheme(parseJson5(`{
+                definitionSourceSelector.onchange = () => {
+                    if (definitionSourceSelector.value === 'builtin') {
+                        definitionEditor.setValue(builtinDefinitions);
+                    } else if (definitionSourceSelector.value === 'url') {
+                        console.log('definitionSourceValue.value', definitionSourceValue.value);
+                        if (definitionSourceValue.value) {
+                            fetch(definitionSourceValue.value).then(r => r.text()).then(t => {
+                                definitionEditor.setValue(t);
+                            });
+                        }
+                    } else if (definitionSourceSelector.value === 'file') {
+                        const input = document.createElement('input');
+                        input.type = 'file';
+                        input.onchange = () => {
+                            const file = input.files[0];
+                            const reader = new FileReader();
+                            reader.onload = () => {
+                                definitionEditor.setValue(reader.result);
+                            };
+                            reader.readAsText(file);
+                            definitionSourceValue.value = file.name;
+                        };
+                        input.click();
+                    }
+                };
+            });
+        };
+
+        function tokyoNightTheme() {
+            return monacoThemeFromVscTheme(parseJson5(`{
     "name": "Tokyo Night",
     "author": "Enkia",
     "maintainers": [
@@ -1807,11 +1827,11 @@
         }
     ]
 }`));
-    }
+        }
 
-  </script>
-  <ul id="svg-edit-menu" class="absolute hidden">
-    </menu>
+    </script>
+    <ul id="svg-edit-menu" class="absolute hidden">
+        </menu>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/projects/cetz-editor/src/global.d.mts b/projects/cetz-editor/src/global.d.mts
index d0c22097..5a20b16b 100644
--- a/projects/cetz-editor/src/global.d.mts
+++ b/projects/cetz-editor/src/global.d.mts
@@ -3,4 +3,5 @@ interface Window {
   $wasm$typst_compiler: any;
   $wasm$typst_renderer: any;
   $preview: any;
+  $typst$semanticTokensProvider: any;
 }
diff --git a/projects/cetz-editor/src/index.mts b/projects/cetz-editor/src/index.mts
index 664f7062..2e812737 100644
--- a/projects/cetz-editor/src/index.mts
+++ b/projects/cetz-editor/src/index.mts
@@ -14,7 +14,7 @@ type ModuleSource = 'local' | 'jsdelivr';
 // @ts-ignore
 // import renderer from '@myriaddreamin/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm?url';
 
-// window.$typst$moduleSource = 'local';
+window.$typst$moduleSource = 'local';
 
 let moduleSource: ModuleSource = (window.$typst$moduleSource || 'jsdelivr') as any;
 
@@ -67,7 +67,7 @@ interface ElementDefinition {
 }
 
 interface DefinitionEditorState {
-  definitions?: ElementDefinition[];
+  content?: string;
   width?: string;
   height?: string;
 }
@@ -189,9 +189,10 @@ export class PreviewState {
    */
   doSetDefinitions(editor: DefinitionEditorState) {
     // console.log('doSetDefinitions', editor);
-    if (editor.definitions) {
+    const defs = this.parseCode(editor.content ?? '', 'definition');
+    if (defs) {
       this.definitions = new Map();
-      for (const def of editor.definitions) {
+      for (const def of defs) {
         const props = Object.keys(def.props || {})
           .map(k => `${k}: ${def.props![k]}`)
           .join(', ');
@@ -226,16 +227,19 @@ export class PreviewState {
    * Set content for preview
    * @param editor editor state
    */
-  doSetMainContent(editor: any[]) {
+  doSetMainContent(editor: { content: string }) {
+    const editorContent = this.parseCode(editor.content, 'main');
+
     const main: any = {};
     let idx = 0;
-    for (let i = 0; i < editor.length; i++) {
-      const ins = editor[i];
+    for (let i = 0; i < editorContent.length; i++) {
+      const ins = editorContent[i];
       idx += 1;
       ins.idx = idx;
       main[ins.name] = ins;
     }
     this.instances = main;
+    this.renderPreview();
   }
 
   /**
@@ -398,7 +402,7 @@ export class PreviewState {
 }, length: 1pt)
 `;
     console.log({ mainContent });
-    const content = await $typst.svg({ mainContent });
+    const content = await this.previewSvg(mainContent);
     return content;
   }
 
@@ -452,9 +456,9 @@ import cetz.draw: *
 
     switch (kind) {
       case 'svg':
-        return postProcess(await $typst.svg({ mainContent }));
+        return postProcess(await this.previewSvg(mainContent));
       case 'pdf':
-        return await $typst.pdf({ mainContent });
+        return await this.previewPdf(mainContent);
       case 'cetz':
       default:
         return mainContent;
@@ -624,6 +628,16 @@ import cetz.draw: *
     }
   }
 
+  async previewSvg(mainContent: string): Promise<string> {
+    await $typst.addSource('/preview.typ', mainContent);
+    return $typst.svg({ mainFilePath: '/preview.typ' });
+  }
+
+  async previewPdf(mainContent: string): Promise<Uint8Array> {
+    await $typst.addSource('/preview.typ', mainContent);
+    return $typst.pdf({ mainFilePath: '/preview.typ' });
+  }
+
   /// End of Export Actions
   /// Begin of DOM State Fetch/Push Actions
 
@@ -678,9 +692,15 @@ import cetz.draw: *
         x = ins.initPos[0] + ins.deltaPos[0];
         y = ins.initPos[1] - ins.deltaPos[1];
       }
-      data.push(`- name: ${ins.name}\n  type: ${ins.type}${args}\n  pos: [${x}, ${y}]`);
+      // data.push(`- name: ${ins.name}\n  type: ${ins.type}${args}\n  pos:
+      // [${x}, ${y}]`);
+      x = Math.round(x * 1000) / 1000;
+      y = Math.round(y * 1000) / 1000;
+      data.push(`make-ins("${ins.name}", (${x}, ${y}), ${ins.type}, (${args}))`);
     }
-    this.updateMainContent(data.join('\n'));
+    this.updateMainContent(`#{
+  ${data.join(INEW_LINE)}
+}`);
   }
 
   /// End of Render State Fetch/Push Actions
@@ -718,7 +738,7 @@ import cetz.draw: *
 
     let isMain = () => false;
     if (this.previewingDef === '' || this.previewingDef == 'main') {
-      // console.log('previewing main', $typst, this);
+      console.log('previewing main', $typst, this);
       content = await this.exportAs('svg', true);
       isMain = () => true;
     } else {
@@ -821,6 +841,543 @@ import cetz.draw: *
   }
 
   /// End of Rendering Drag Actions
+
+  parseCode(s: string, mode: 'definition'): ElementDefinition[];
+  parseCode(s: string, mode: 'main'): any[];
+  parseCode(s: string, mode: 'main' | 'definition') {
+    // ElementDefinition[]
+    // console.log('parseCode', s);
+
+    // analyze brackets
+    let leftChars: [number, string][] = [];
+    let jumpMap = new Map<number, number>();
+    for (let i = 0; i < s.length; i++) {
+      const c = s[i];
+      if (c === '(' || c === '{' || c === '[') {
+        leftChars.push([i, c]);
+      } else if (c === ')' || c === '}' || c === ']') {
+        const left = leftChars.pop();
+        if (left === undefined) {
+          throw new Error(`unmatched right bracket at ${i}`);
+        }
+        switch (c) {
+          case ')':
+            if (left[1] !== '(') {
+              throw new Error(`unmatched right bracket at ${i}`);
+            }
+            break;
+          case '}':
+            if (left[1] !== '{') {
+              throw new Error(`unmatched right bracket at ${i}`);
+            }
+            break;
+          case ']':
+            if (left[1] !== '[') {
+              throw new Error(`unmatched right bracket at ${i}`);
+            }
+            break;
+        }
+        jumpMap.set(left[0], i);
+      }
+    }
+
+    console.log(jumpMap);
+
+    // analyze definitions
+
+    function skipLine(i: number) {
+      for (; i < s.length; i++) {
+        const c = s[i];
+        if (c === '\n') {
+          return i;
+        }
+      }
+      return i;
+    }
+
+    function skipSpaces(i: number) {
+      for (; i < s.length; i++) {
+        const c = s[i];
+        if (!' \t\r\n'.includes(c)) {
+          return i;
+        }
+      }
+      return i;
+    }
+
+    const identMatcher = /^[a-zA-Z_][a-zA-Z0-9_\-]*/;
+    function skipIdent(i: number) {
+      let res = identMatcher.exec(s.slice(i));
+      // console.log(res, s.slice(i));
+      if (!res) {
+        return i;
+      }
+
+      return i + res[0].length;
+    }
+
+    const valueMatcher =
+      /^(?:((?:0x[a-zA-Z_]+)|(?:0[a-zA-Z\d]+)|(?:\d*\.?\d*E\-?\d*)|(?:\d*\.(?:\d{0,3}_?)*)|(?:\d+)|(?:\d*\.\d+)))|(?:["`]([^"`\\]|\\.)*["`])/;
+    function skipValue(i: number) {
+      let res = valueMatcher.exec(s.slice(i));
+      // console.log(res, s.slice(i));
+      if (!res) {
+        return i;
+      }
+
+      return i + res[0].length;
+    }
+
+    function skipExpression(i: number) {
+      if ('([{'.includes(s[i])) {
+        let bodyRight = jumpMap.get(i);
+        if (bodyRight === undefined) {
+          throw new Error(`unmatched left bracket at ${i}`);
+        }
+
+        return bodyRight + 1;
+      } else {
+        let j = skipIdent(i);
+        if (i !== j) {
+          return j;
+        }
+
+        j = skipValue(i);
+        if (i !== j) {
+          return j;
+        }
+
+        return skipLine(i);
+      }
+    }
+
+    function eatToken(i: number, token: string) {
+      if (s[i] !== token) {
+        throw new Error(`expected token ${token} at ${i}`);
+      }
+      return i + 1;
+    }
+
+    function parseProps([argsLeft, argsRight]: number[]) {
+      // console.log('parseArgs', s.slice(argsLeft, argsRight));
+
+      const props: Record<string, any> = {};
+
+      for (;;) {
+        let i = skipSpaces(argsLeft);
+        if (i === argsRight) {
+          break;
+        }
+
+        let j = skipIdent(i);
+        if (i === j) {
+          throw new Error(`expected ident at ${i}`);
+        }
+
+        const ident = s.slice(i, j);
+        i = skipSpaces(eatToken(skipIdent(j), ':'));
+        // console.log('found prop', ident, '<<', s.slice(i, i + 10));
+
+        let valueRight = skipExpression(i);
+        let defaultValue = s.slice(i, valueRight);
+        i = skipSpaces(valueRight);
+        // console.log('found propDefault', defaultValue, '<<', s.slice(i, i + 10));
+
+        props[ident] = defaultValue;
+
+        if (s[i] === ',') {
+          i += 1;
+        }
+
+        if (i <= argsLeft) {
+          break;
+        }
+
+        argsLeft = i;
+        // console.log('next round <<', s.slice(i, i + 10));
+      }
+
+      return props;
+    }
+
+    function parseDefinition() {
+      const defs: ElementDefinition[] = [];
+      for (let i = 0; i < s.length; i++) {
+        const c = s[i];
+        if (' \t\r\n'.includes(c)) {
+          continue;
+        }
+        if (c === '#') {
+          i += 1;
+          // console.log('found #', i, s.slice(i, i + 10));
+
+          if (!s.slice(i).startsWith('let')) {
+            i = skipLine(i);
+            continue;
+          }
+
+          i += 3;
+          i = skipSpaces(i);
+          // console.log('found #let', i, '<<', s.slice(i, i + 10));
+
+          let j = skipIdent(i);
+          let ident = s.slice(i, j);
+          // console.log('found #let ident', s.slice(i, j), '<<', s.slice(j, j + 10));
+          i = j;
+
+          i = skipSpaces(i);
+
+          if (!s.slice(i).startsWith('(')) {
+            i = skipLine(i);
+            continue;
+          }
+
+          let fnArgsRight = jumpMap.get(i);
+          if (fnArgsRight === undefined) {
+            throw new Error(`unmatched left bracket at ${i}`);
+          }
+
+          let fnArgs = [i + 1, fnArgsRight];
+          i = fnArgsRight + 1;
+
+          // console.log('found #let ident(args = ...)', s.slice(i, i + 10));
+
+          i = skipSpaces(eatToken(skipSpaces(i), '='));
+
+          // console.log('found #let ident(args = ...) = $exp = ', s.slice(i, i + 10));
+
+          let bodyRight = skipExpression(i);
+          let body = s.slice(i, bodyRight);
+          i = bodyRight;
+
+          const def = {
+            id: ident,
+            props: parseProps(fnArgs),
+            draw: body,
+          };
+          // console.log('found definition', def);
+
+          defs.push(def as ElementDefinition);
+        } else if (c === '/') {
+          i += 1;
+          if (s.slice(i).startsWith('/')) {
+            i = skipLine(i);
+          } else if (s.slice(i).startsWith('*')) {
+            i += 1;
+            while (i < s.length) {
+              if (s.slice(i).startsWith('*/')) {
+                i += 2;
+                break;
+              }
+              i += 1;
+            }
+          } else {
+            throw new Error(`invalid character ${c} at ${i}`);
+          }
+        } else {
+          throw new Error(`invalid character ${c} at ${i}`);
+        }
+      }
+
+      return defs;
+    }
+
+    function parseMainContent() {
+      // console.log('parseMainContent', s);
+      const instances: any[] = [];
+      let i = 0;
+      i = eatToken(skipSpaces(i), '#');
+      if (!s.slice(i).startsWith('{')) {
+        throw new Error(`expected left bracket at ${i}`);
+      }
+
+      let j = jumpMap.get(i);
+      if (j === undefined) {
+        throw new Error(`unmatched left bracket at ${i}`);
+      }
+      let bodyRight = j;
+      j = skipSpaces(j + 1);
+      if (j !== s.length) {
+        throw new Error(`unexpected content at ${j}`);
+      }
+      // console.log('found #{ ... }', s.slice(i + 1, j - 1));
+
+      let bodyLeft = i + 1;
+      while (bodyLeft < bodyRight) {
+        i = bodyLeft;
+        i = skipSpaces(i);
+        if (i >= bodyRight) {
+          break;
+        }
+        j = skipIdent(i);
+        if (i === j) {
+          throw new Error(`expected ident at ${i}`);
+        }
+        let ident = s.slice(i, j);
+        i = skipSpaces(j);
+        // console.log('found ident', ident, '<<', s.slice(i, i + 10));
+
+        if (!s.slice(i).startsWith('(')) {
+          throw new Error(`expected call at ${i}`);
+        }
+        let fnArgsRight = jumpMap.get(i);
+        if (fnArgsRight === undefined) {
+          throw new Error(`unmatched left bracket at ${i}`);
+        }
+        let fnArgs = [];
+
+        i += 1;
+        while (i < fnArgsRight) {
+          i = skipSpaces(i);
+          let arg = skipExpression(i);
+          fnArgs.push([i, arg]);
+          i = skipSpaces(arg);
+          if (s[i] === ',') {
+            i += 1;
+          }
+        }
+
+        i = fnArgsRight + 1;
+
+        // console.log(
+        //   'found call',
+        //   { ident, fnArgs: fnArgs.map(e => s.slice(e[0], e[1])) },
+        //   i,
+        //   '<<',
+        //   s.slice(i, i + 10),
+        // );
+
+        if (ident === 'make-ins') {
+          fnArgs = fnArgs.map(e => [e[0] + 1, e[1] - 1]);
+          const nodeName = s.slice(fnArgs[0][0], fnArgs[0][1]);
+          const position = s
+            .slice(fnArgs[1][0], fnArgs[1][1])
+            .split(',')
+            .map(e => Number.parseFloat(e.trim()));
+          const ty = s.slice(fnArgs[2][0], fnArgs[2][1]);
+          // console.log('parseProps', s.slice(fnArgs[3][0], fnArgs[3][1]));
+          const fnArgsParsed = parseProps(fnArgs[3]);
+          const ins = {
+            name: nodeName,
+            pos: position,
+            type: ty,
+            args: fnArgsParsed,
+          };
+          // console.log('found instance', ins);
+          instances.push(ins);
+        } else {
+          throw new Error(`unknown function ${ident} at ${i}`);
+        }
+
+        if (i <= bodyLeft) {
+          break;
+        }
+        bodyLeft = i;
+      }
+
+      return instances;
+    }
+
+    switch (mode) {
+      case 'definition':
+        return parseDefinition();
+      case 'main':
+        return parseMainContent();
+      default:
+        throw new Error(`unknown mode ${mode}`);
+    }
+  }
+
+  async queryInstances(content: string) {
+    const instances: any[] = [];
+    await $typst.addSource(
+      '/cetz-editor-preset.typ',
+      `#let instances-state = state("instance", ())
+#let template(content) = {
+  locate(loc => [
+    #metadata(instances-state.final(loc)) <cetz-instances>
+  ])
+  content
+}
+#let make-ins(name, pos, factory, props) = {
+  instances-state.update(it => {
+    it.push((name: name, pos: pos, factory: factory, props: props))
+    it
+  })
+}`,
+    );
+    await $typst.addSource('/query-instance.typ', content);
+    const checkedInstances = await $typst.query({
+      mainFilePath: '/query-instance.typ',
+      selector: '<cetz-instances>',
+    });
+    console.log(checkedInstances);
+    return instances;
+  }
+}
+
+const scopeRenamingRules: { scopes: Record<string, any> } = {
+  scopes: {
+    // vscode rules
+    namespace: ['entity.name.namespace'],
+    type: ['entity.name.type'],
+    'type.defaultLibrary': ['support.type'],
+    struct: ['storage.type.struct'],
+    class: ['entity.name.type.class'],
+    'class.defaultLibrary': ['support.class'],
+    interface: ['entity.name.type.interface'],
+    enum: ['entity.name.type.enum'],
+    function: ['entity.name.function'],
+    'function.defaultLibrary': ['support.function'],
+    method: ['entity.name.function.member'],
+    macro: ['entity.name.function.macro'],
+    variable: ['variable.other.readwrite , entity.name.variable'],
+    'variable.readonly': ['variable.other.constant'],
+    'variable.readonly.defaultLibrary': ['support.constant'],
+    parameter: ['variable.parameter'],
+    property: ['variable.other.property'],
+    'property.readonly': ['variable.other.constant.property'],
+    enumMember: ['variable.other.enummember'],
+    event: ['variable.other.event'],
+
+    // typst rules
+    '*.strong.emph': ['markup.bold.typst markup.italic.typst'],
+    '*.strong': ['markup.bold.typst'],
+    '*.emph': ['markup.italic.typst'],
+    '*.math': ['markup.math.typst'],
+    bool: ['constant.language.boolean.typst'],
+    punct: ['punctuation.typst', 'punctuation.definition.typst'],
+    escape: [
+      'constant.character.escape.typst',
+      'keyword.operator.typst',
+      'punctuation.definition.typst',
+    ],
+    link: ['markup.underline.link.typst'],
+    raw: ['markup.inline.raw.typst', 'markup.raw.inline.typst'],
+    'delim.math': [
+      'punctuation.definition.math.typst',
+      'punctuation.definition.string.end.math.typst',
+      'string.quoted.other.typst',
+    ],
+    pol: ['variable.other.readwrite , entity.name.variable'],
+  },
+};
+
+const typstTokens = [
+  'comment',
+  'string',
+  'keyword',
+  'operator',
+  'number',
+  'function',
+  'decorator',
+  'bool',
+  'punctuation',
+  'escape',
+  'link',
+  'raw',
+  'label',
+  'ref',
+  'heading',
+  'marker',
+  'term',
+  'delim',
+  'pol',
+  'error',
+  'text',
+];
+
+(window as any).adaptVsCodeThemeForTypst = (theme: any) => {
+  const { tokenColors, semanticTokenColors } = theme;
+
+  // ...Object.keys(vscodeTheme.semanticTokenColors).map((k) => {
+  //   return { token: k, foreground: vscodeTheme.semanticTokenColors[k] };
+  // }),
+  const newTokenColors: any[] = [];
+  const defaultSettings = { foreground: theme.colors.foreground };
+
+  const rules = new Map<string, any>();
+  for (const tokenColor of tokenColors) {
+    for (const s of tokenColor.scope) {
+      rules.set(s, tokenColor);
+    }
+  }
+
+  const semanticTokenRules = new Map<string, any>();
+  for (const [k, settings] of Object.entries(semanticTokenColors)) {
+    semanticTokenRules.set(k, settings);
+
+    if (k.startsWith('*.')) {
+      let suffix = k.slice('*.'.length);
+      for (const token of typstTokens) {
+        semanticTokenRules.set(`${token}.${suffix}`, settings);
+      }
+    }
+  }
+
+  for (const [k, renamedScopes] of Object.entries(scopeRenamingRules.scopes)) {
+    let scopes: string[] = [];
+    if (k.startsWith('*.')) {
+      let suffix = k.slice('*.'.length);
+      for (const token of typstTokens) {
+        scopes.push(`${token}.${suffix}`);
+      }
+    } else {
+      scopes.push(k);
+    }
+
+    let settings = defaultSettings;
+    if (semanticTokenRules.has(k)) {
+      settings = semanticTokenRules.get(k);
+    } else {
+      for (let i = 0; i < renamedScopes.length; i++) {
+        const renamedScope = renamedScopes[i];
+
+        for (let j = renamedScope.length; j > 0; j--) {
+          if (j !== renamedScope.length && renamedScope[j] !== '.') {
+            continue;
+          }
+          const rule = rules.get(renamedScope.slice(0, j));
+          if (rule) {
+            settings = rule.settings;
+            break;
+          }
+        }
+      }
+    }
+    newTokenColors.push({
+      name: `typst ${k}`,
+      scope: scopes,
+      settings,
+    });
+  }
+
+  console.log('newTokenColors', rules, newTokenColors);
+  return {
+    ...theme,
+    tokenColors: [...tokenColors, ...newTokenColors],
+  };
+};
+
+class SemanticTokensProvider {
+  constructor(private legend: any) {}
+
+  getLegend() {
+    return this.legend;
+  }
+
+  async provideDocumentSemanticTokens(model: any, lastResultId: string) {
+    // todo: support incremental update
+    void lastResultId;
+    await $typst.addSource('/semantic-tokens.typ', model.getValue());
+    return $typst.getSemanticTokens({ mainFilePath: '/semantic-tokens.typ' });
+  }
+
+  async releaseDocumentSemanticTokens(resultId: string) {}
 }
 
 window.$preview = new PreviewState();
+
+window.$typst$semanticTokensProvider = $typst.getSemanticTokenLegend().then(legend => {
+  return new SemanticTokensProvider(legend);
+});
diff --git a/projects/cetz-editor/typst-style.css b/projects/cetz-editor/typst-style.css
index bf943c45..e331669b 100644
--- a/projects/cetz-editor/typst-style.css
+++ b/projects/cetz-editor/typst-style.css
@@ -7,7 +7,7 @@
 body {
   margin: 0;
   padding: 0;
-  background-color: #16161e;
+  background-color: #1a1b26;
   color: rgba(156, 163, 175, 1);
   font-family: BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
     'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
@@ -139,11 +139,11 @@ body {
 }
 
 .editor-code-select option {
-  background-color: #16161e;
+  background-color: #1a1b26;
 }
 
 .editor-input-box {
-  background-color: #16161e;
+  background-color: #1a1b26;
   border: 1px solid hsla(0, 0%, 100%, 0.1);
   border-radius: 0.25rem;
   transition: border-color 0.2s;
@@ -166,7 +166,7 @@ body {
 }
 
 .editor-input-button {
-  background-color: #16161e;
+  background-color: #1a1b26;
   border-radius: 0.25rem;
   border: 1px solid #a3a3a3;
   color: #e5e5e5;
