From ac13b9e0e2774e64a554b5f2ef8eccf750ebbd1e Mon Sep 17 00:00:00 2001
From: Myriad-Dreamin <camiyoru@gmail.com>
Date: Fri, 3 Nov 2023 15:20:09 +0800
Subject: [PATCH] dev: beautify editor styles

---
 projects/cetz-editor/index.html      | 1867 ++++++++++++++++++++++++--
 projects/cetz-editor/src/index.mts   |    5 +
 projects/cetz-editor/typst-style.css |  131 +-
 3 files changed, 1873 insertions(+), 130 deletions(-)
diff --git a/projects/cetz-editor/index.html b/projects/cetz-editor/index.html
index 3741527e..0cf35abb 100644
--- a/projects/cetz-editor/index.html
+++ b/projects/cetz-editor/index.html
@@ -1,131 +1,223 @@
 <!doctype html>
 <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://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/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>
-  </head>
-  <body style="height: 100vh; overflow: hidden">
-    <div id="main">
-      <div style="display: flex; flex-direction: column; flex: 4; height: 100vh">
-        <div id="def-editor" style="flex: 5"></div>
-        <div id="main-editor" style="flex: 2"></div>
+
+<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>
+</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>
+      </div>
+    </div>
+    <div class="bottom-panel flex-row" style="flex: 1">
+      <div style="flex: 0 0 35px">
       </div>
-      <div id="preview" style="flex: 6">
-        <div>
-          <button id="export-svg">Export As SVG</button>
-          <button id="export-pdf">PDF</button>
-          <button id="export-cetz">CeTZ Code</button>
-          <button id="export-elem">Element</button>
+      <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:
+            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>
-          <span>Element Id:</span>
-          <input id="insert-name" type="text" />
-          <button id="insert-elem">Insert</button>
+        <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>
-        <select id="insert-selector"></select>
-        <div>Show Definition:</div>
-        <select id="preview-selector"></select>
-        <div id="preview-panel"></div>
       </div>
     </div>
-    <script>
-      window.onload = function () {
-        const insertSelector = document.getElementById('insert-selector');
-        const insertName = document.getElementById('insert-name');
-        const previewSelector = document.getElementById('preview-selector');
-
-        // require is provided by loader.min.js.
-        require.config({
-          paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs' },
+  </div>
+  <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 };
+            })
+          );
+        }
+      }
+      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';
+
+      // 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',
         });
-        require(['vs/editor/editor.main'], () => {
-          const definitionEditor = monaco.editor.create(document.getElementById('def-editor'), {
-            value: '',
-            language: 'yaml',
-            theme: 'vs-dark',
-          });
-          const mainEditor = monaco.editor.create(document.getElementById('main-editor'), {
-            value: '',
-            language: 'yaml',
-            theme: 'vs-dark',
-          });
-          $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 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);
+        });
+
+        const checkLength = (v) => {
+          if (v.endsWith('pt')) {
+            v = v.substring(0, t.length - 2);
+          }
+          if (!v) {
+            v = '600';
+          }
+
+          const t = Number.parseFloat(v);
+          if (Number.isNaN(t)) {
+            throw new Error('invalid number');
+          }
 
-          const triggerSyncDefinition = () => {
-            const yml = definitionEditor.getValue();
-            script$jsYamlLoad.then(() => {
-              try {
-                $preview.doSetDefinitions(jsYaml.load(yml));
-                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);
-                  }
+          return `${t}pt`;
+        };
+
+        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 => {
-            triggerSyncDefinition();
+            } catch (e) {
+              console.log('error', e);
+            }
           });
+        };
+        definitionEditor.getModel().onDidChangeContent(e => {
+          triggerSyncEditorState();
+        });
+        inputSvgWidth.oninput = triggerSyncEditorState;
+        inputSvgHeight.oninput = triggerSyncEditorState;
 
-          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;
+        const triggerSyncMain = () => {
+          const yml = mainEditor.getValue();
+          script$jsYamlLoad.then(() => {
+            try {
+              $preview.doSetMainContent(jsYaml.load(yml));
+            } catch (e) {
+              console.log('error', e);
             }
-            triggerSyncMain();
           });
+        };
+        mainEditor.getModel().onDidChangeContent(e => {
+          if (e.isFlush) {
+            return;
+          }
+          triggerSyncMain();
+        });
 
-          definitionEditor.setValue(`definitions:
+        definitionEditor.setValue(`definitions:
 - id: x-circle
   props: # default props
     rad: 200
@@ -165,10 +257,8 @@
       set-style(mark: (fill: none, size: 7))
       line(start, end, name: "t", mark: mark)
       content("t", inner-text)
-    }
-width: 600pt
-height: 600pt`);
-          mainEditor.setValue(`
+    }`);
+        mainEditor.setValue(`
 - name: c0
   type: x-circle
   args:
@@ -191,18 +281,1537 @@
     end: '"c2"'
   pos: [0, 0]
 `);
-          triggerSyncDefinition();
-          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('');
-        });
-      };
-    </script>
-    <ul id="svg-edit-menu" class="absolute hidden"></menu>
-  </body>
-</html>
+        $preview.doSelectDef('');
+      });
+    };
+
+    function tokyoNightTheme() {
+      return monacoThemeFromVscTheme(parseJson5(`{
+    "name": "Tokyo Night",
+    "author": "Enkia",
+    "maintainers": [
+        "Enkia <enki77@gmail.com>"
+    ],
+    "type": "dark",
+    "semanticTokenColors": {
+        "parameter.declaration": {
+            "foreground": "#e0af68"
+        },
+        "parameter": {
+            "foreground": "#d9d4cd"
+        },
+        "property.declaration": {
+            "foreground": "#73daca"
+        },
+        "property.defaultLibrary": {
+            "foreground": "#2ac3de"
+        },
+        "*.defaultLibrary": {
+            "foreground": "#2ac3de"
+        },
+        "variable.defaultLibrary": {
+            "foreground": "#2ac3de"
+        },
+        "variable.declaration": {
+            "foreground": "#bb9af7"
+        },
+        "variable": {
+            "foreground": "#c0caf5"
+        }
+    },
+    "semanticClass": "tokyo-night",
+    "colors": {
+        "foreground": "#787c99",
+        "descriptionForeground": "#515670",
+        "focusBorder": "#545c7e33",
+        "errorForeground": "#515670",
+        "widget.shadow": "#ffffff00",
+        "scrollbar.shadow": "#00000033",
+        "badge.background": "#7e83b230",
+        "badge.foreground": "#acb0d0",
+        "icon.foreground": "#787c99",
+        "settings.headerForeground": "#6183bb",
+        "window.activeBorder": "#0d0f17",
+        "window.inactiveBorder": "#0d0f17",
+        "sash.hoverBorder": "#29355a",
+        "toolbar.activeBackground": "#202330",
+        "toolbar.hoverBackground": "#202330",
+        "extensionButton.prominentBackground": "#3d59a1DD",
+        "extensionButton.prominentHoverBackground": "#3d59a1AA",
+        "extensionButton.prominentForeground": "#ffffff",
+        "extensionBadge.remoteBackground": "#3d59a1",
+        "extensionBadge.remoteForeground": "#ffffff",
+        "button.background": "#3d59a1dd",
+        "button.hoverBackground": "#3d59a1AA",
+        "button.secondaryBackground": "#3b3e52",
+        "button.foreground": "#ffffff",
+        "progressBar.background": "#3d59a1",
+        "input.background": "#14141b",
+        "input.foreground": "#a9b1d6",
+        "input.border": "#0f0f14",
+        "input.placeholderForeground": "#787c998A",
+        "inputOption.activeForeground": "#c0caf5",
+        "inputOption.activeBackground": "#3d59a144",
+        "inputValidation.infoForeground": "#bbc2e0",
+        "inputValidation.infoBackground": "#3d59a15c",
+        "inputValidation.infoBorder": "#3d59a1",
+        "inputValidation.warningForeground": "#000000",
+        "inputValidation.warningBackground": "#c2985b",
+        "inputValidation.warningBorder": "#e0af68",
+        "inputValidation.errorForeground": "#bbc2e0",
+        "inputValidation.errorBackground": "#85353e",
+        "inputValidation.errorBorder": "#963c47",
+        "dropdown.foreground": "#787c99",
+        "dropdown.background": "#14141b",
+        "dropdown.listBackground": "#14141b",
+        "activityBar.background": "#16161e",
+        "activityBar.foreground": "#787c99",
+        "activityBar.inactiveForeground": "#3b3e52",
+        "activityBar.border": "#16161e",
+        "activityBarBadge.background": "#3d59a1",
+        "activityBarBadge.foreground": "#fff",
+        "tree.indentGuidesStroke": "#2b2b3b",
+        "sideBar.foreground": "#787c99",
+        "sideBar.background": "#16161e",
+        "sideBar.border": "#101014",
+        "sideBarTitle.foreground": "#787c99",
+        "sideBarSectionHeader.background": "#16161e",
+        "sideBarSectionHeader.foreground": "#a9b1d6",
+        "sideBarSectionHeader.border": "#101014",
+        "sideBar.dropBackground": "#1e202e",
+        "list.dropBackground": "#1e202e",
+        "list.deemphasizedForeground": "#787c99",
+        "list.activeSelectionBackground": "#202330",
+        "list.activeSelectionForeground": "#a9b1d6",
+        "list.inactiveSelectionBackground": "#1c1d29",
+        "list.inactiveSelectionForeground": "#a9b1d6",
+        "list.focusBackground": "#1c1d29",
+        "list.focusForeground": "#a9b1d6",
+        "list.hoverBackground": "#13131a",
+        "list.hoverForeground": "#a9b1d6",
+        "list.highlightForeground": "#668ac4",
+        "list.invalidItemForeground": "#c97018",
+        "list.errorForeground": "#bb616b",
+        "list.warningForeground": "#c49a5a",
+        "listFilterWidget.background": "#101014",
+        "listFilterWidget.outline": "#3d59a1",
+        "listFilterWidget.noMatchesOutline": "#a6333f",
+        "pickerGroup.foreground": "#a9b1d6",
+        "pickerGroup.border": "#101014",
+        "scrollbarSlider.background": "#868bc415",
+        "scrollbarSlider.hoverBackground": "#868bc410",
+        "scrollbarSlider.activeBackground": "#868bc422",
+        "editorBracketHighlight.foreground1": "#698cd6",
+        "editorBracketHighlight.foreground2": "#68b3de",
+        "editorBracketHighlight.foreground3": "#9a7ecc",
+        "editorBracketHighlight.foreground4": "#25aac2",
+        "editorBracketHighlight.foreground5": "#80a856",
+        "editorBracketHighlight.foreground6": "#c49a5a",
+        "editorBracketHighlight.unexpectedBracket.foreground": "#db4b4b",
+        "editorBracketPairGuide.activeBackground1": "#698cd6",
+        "editorBracketPairGuide.activeBackground2": "#68b3de",
+        "editorBracketPairGuide.activeBackground3": "#9a7ecc",
+        "editorBracketPairGuide.activeBackground4": "#25aac2",
+        "editorBracketPairGuide.activeBackground5": "#80a856",
+        "editorBracketPairGuide.activeBackground6": "#c49a5a",
+        "selection.background": "#515c7e40",
+        "editor.background": "#1a1b26",
+        "editor.foreground": "#a9b1d6",
+        "editor.foldBackground": "#1111174a",
+        "editorLink.activeForeground": "#acb0d0",
+        "editor.selectionBackground": "#515c7e40",
+        "editor.inactiveSelectionBackground": "#515c7e25",
+        "editor.findMatchBackground": "#3d59a166",
+        "editor.findMatchBorder": "#e0af68",
+        "editor.findMatchHighlightBackground": "#3d59a166",
+        "editor.findRangeHighlightBackground": "#515c7e33",
+        "editor.rangeHighlightBackground": "#515c7e20",
+        "editor.wordHighlightBackground": "#515c7e44",
+        "editor.wordHighlightStrongBackground": "#515c7e55",
+        "editor.selectionHighlightBackground": "#515c7e44",
+        "editorCursor.foreground": "#c0caf5",
+        "editorIndentGuide.background": "#1e202e",
+        "editorIndentGuide.activeBackground": "#363b54",
+        "editorLineNumber.foreground": "#363b54",
+        "editorLineNumber.activeForeground": "#737aa2",
+        "editor.lineHighlightBackground": "#1e202e",
+        "editorWhitespace.foreground": "#363b54",
+        "editorMarkerNavigation.background": "#16161e",
+        "editorHoverWidget.background": "#16161e",
+        "editorHoverWidget.border": "#101014",
+        "editorBracketMatch.background": "#16161e",
+        "editorBracketMatch.border": "#42465d",
+        "editorOverviewRuler.border": "#101014",
+        "editorOverviewRuler.errorForeground": "#db4b4b",
+        "editorOverviewRuler.warningForeground": "#e0af68",
+        "editorOverviewRuler.infoForeground": "#1abc9c",
+        "editorOverviewRuler.bracketMatchForeground": "#101014",
+        "editorOverviewRuler.findMatchForeground": "#a9b1d644",
+        "editorOverviewRuler.rangeHighlightForeground": "#a9b1d644",
+        "editorOverviewRuler.selectionHighlightForeground": "#a9b1d622",
+        "editorOverviewRuler.wordHighlightForeground": "#bb9af755",
+        "editorOverviewRuler.wordHighlightStrongForeground": "#bb9af766",
+        "editorOverviewRuler.modifiedForeground": "#394b70",
+        "editorOverviewRuler.addedForeground": "#164846",
+        "editorOverviewRuler.deletedForeground": "#703438",
+        "editorRuler.foreground": "#101014",
+        "editorError.foreground": "#db4b4b",
+        "editorWarning.foreground": "#e0af68",
+        "editorInfo.foreground": "#0da0ba",
+        "editorHint.foreground": "#0da0ba",
+        "editorGutter.modifiedBackground": "#394b70",
+        "editorGutter.addedBackground": "#164846",
+        "editorGutter.deletedBackground": "#823c41",
+        "editorGhostText.foreground": "#646e9c",
+        "minimapGutter.modifiedBackground": "#425882",
+        "minimapGutter.addedBackground": "#1C5957",
+        "minimapGutter.deletedBackground": "#944449",
+        "editorGroup.border": "#101014",
+        "editorGroup.dropBackground": "#1e202e",
+        "editorGroupHeader.tabsBorder": "#101014",
+        "editorGroupHeader.tabsBackground": "#16161e",
+        "editorGroupHeader.noTabsBackground": "#16161e",
+        "editorGroupHeader.border": "#101014",
+        "editorPane.background": "#16161e",
+        "editorWidget.background": "#16161e",
+        "editorWidget.resizeBorder": "#545c7e33",
+        "editorSuggestWidget.background": "#16161e",
+        "editorSuggestWidget.border": "#101014",
+        "editorSuggestWidget.selectedBackground": "#20222c",
+        "editorSuggestWidget.highlightForeground": "#6183bb",
+        "editorCodeLens.foreground": "#484f70",
+        "editorLightBulb.foreground": "#e0af68",
+        "editorLightBulbAutoFix.foreground": "#e0af68",
+        "peekView.border": "#101014",
+        "peekViewEditor.background": "#16161e",
+        "peekViewEditor.matchHighlightBackground": "#3d59a166",
+        "peekViewTitle.background": "#101014",
+        "peekViewTitleLabel.foreground": "#a9b1d6",
+        "peekViewTitleDescription.foreground": "#787c99",
+        "peekViewResult.background": "#101014",
+        "peekViewResult.selectionForeground": "#a9b1d6",
+        "peekViewResult.selectionBackground": "#3d59a133",
+        "peekViewResult.lineForeground": "#a9b1d6",
+        "peekViewResult.fileForeground": "#787c99",
+        "peekViewResult.matchHighlightBackground": "#3d59a166",
+        "diffEditor.insertedTextBackground": "#41a6b520",
+        "diffEditor.removedTextBackground": "#db4b4b22",
+        "diffEditor.insertedLineBackground": "#41a6b520",
+        "diffEditor.removedLineBackground": "#db4b4b22",
+        "diffEditorGutter.insertedLineBackground": "#41a6b525",
+        "diffEditorGutter.removedLineBackground": "#db4b4b22",
+        "diffEditorOverview.insertedForeground": "#41a6b525",
+        "diffEditorOverview.removedForeground": "#db4b4b22",
+        "diffEditor.diagonalFill": "#292e42",
+        "breadcrumb.background": "#16161e",
+        "breadcrumbPicker.background": "#16161e",
+        "breadcrumb.foreground": "#515670",
+        "breadcrumb.focusForeground": "#a9b1d6",
+        "breadcrumb.activeSelectionForeground": "#a9b1d6",
+        "tab.activeBackground": "#16161e",
+        "tab.inactiveBackground": "#16161e",
+        "tab.activeForeground": "#a9b1d6",
+        "tab.hoverForeground": "#a9b1d6",
+        "tab.activeBorder": "#3d59a1",
+        "tab.inactiveForeground": "#787c99",
+        "tab.border": "#101014",
+        "tab.unfocusedActiveForeground": "#a9b1d6",
+        "tab.unfocusedInactiveForeground": "#787c99",
+        "tab.unfocusedHoverForeground": "#a9b1d6",
+        "tab.activeModifiedBorder": "#1a1b26",
+        "tab.inactiveModifiedBorder": "#1f202e",
+        "tab.unfocusedActiveBorder": "#1f202e",
+        "tab.lastPinnedBorder": "#222333",
+        "panel.background": "#16161e",
+        "panel.border": "#101014",
+        "panelTitle.activeForeground": "#787c99",
+        "panelTitle.inactiveForeground": "#42465d",
+        "panelTitle.activeBorder": "#16161e",
+        "panelInput.border": "#16161e",
+        "statusBar.foreground": "#787c99",
+        "statusBar.background": "#16161e",
+        "statusBar.border": "#101014",
+        "statusBar.noFolderBackground": "#16161e",
+        "statusBar.debuggingBackground": "#16161e",
+        "statusBar.debuggingForeground": "#787c99",
+        "statusBarItem.activeBackground": "#101014",
+        "statusBarItem.hoverBackground": "#20222c",
+        "statusBarItem.prominentBackground": "#101014",
+        "statusBarItem.prominentHoverBackground": "#20222c",
+        "titleBar.activeForeground": "#787c99",
+        "titleBar.inactiveForeground": "#787c99",
+        "titleBar.activeBackground": "#16161e",
+        "titleBar.inactiveBackground": "#16161e",
+        "titleBar.border": "#101014",
+        "walkThrough.embeddedEditorBackground": "#16161e",
+        "textLink.foreground": "#6183bb",
+        "textLink.activeForeground": "#7dcfff",
+        "textPreformat.foreground": "#9699a8",
+        "textBlockQuote.background": "#16161e",
+        "textCodeBlock.background": "#16161e",
+        "textSeparator.foreground": "#363b54",
+        "debugExceptionWidget.border": "#963c47",
+        "debugExceptionWidget.background": "#101014",
+        "debugToolBar.background": "#101014",
+        "debugConsole.infoForeground": "#787c99",
+        "debugConsole.errorForeground": "#bb616b",
+        "debugConsole.sourceForeground": "#787c99",
+        "debugConsole.warningForeground": "#c49a5a",
+        "debugConsoleInputIcon.foreground": "#73daca",
+        "editor.stackFrameHighlightBackground": "#E2BD3A20",
+        "editor.focusedStackFrameHighlightBackground": "#73daca20",
+        "debugView.stateLabelForeground": "#787c99",
+        "debugView.stateLabelBackground": "#14141b",
+        "debugView.valueChangedHighlight": "#3d59a1aa",
+        "debugTokenExpression.name": "#7dcfff",
+        "debugTokenExpression.value": "#9aa5ce",
+        "debugTokenExpression.string": "#9ece6a",
+        "debugTokenExpression.boolean": "#ff9e64",
+        "debugTokenExpression.number": "#ff9e64",
+        "debugTokenExpression.error": "#bb616b",
+        "debugIcon.breakpointForeground": "#db4b4b",
+        "debugIcon.breakpointDisabledForeground": "#414761",
+        "debugIcon.breakpointUnverifiedForeground": "#c24242",
+        "terminal.background": "#16161e",
+        "terminal.foreground": "#787c99",
+        "terminal.selectionBackground": "#515c7e30",
+        "terminal.ansiBlack": "#363b54",
+        "terminal.ansiRed": "#f7768e",
+        "terminal.ansiGreen": "#41a6b5",
+        "terminal.ansiYellow": "#e0af68",
+        "terminal.ansiBlue": "#7aa2f7",
+        "terminal.ansiMagenta": "#bb9af7",
+        "terminal.ansiCyan": "#7dcfff",
+        "terminal.ansiWhite": "#787c99",
+        "terminal.ansiBrightBlack": "#363b54",
+        "terminal.ansiBrightRed": "#f7768e",
+        "terminal.ansiBrightGreen": "#41a6b5",
+        "terminal.ansiBrightYellow": "#e0af68",
+        "terminal.ansiBrightBlue": "#7aa2f7",
+        "terminal.ansiBrightMagenta": "#bb9af7",
+        "terminal.ansiBrightCyan": "#7dcfff",
+        "terminal.ansiBrightWhite": "#acb0d0",
+        "gitDecoration.modifiedResourceForeground": "#6183bb",
+        "gitDecoration.ignoredResourceForeground": "#515670",
+        "gitDecoration.deletedResourceForeground": "#914c54",
+        "gitDecoration.renamedResourceForeground": "#449dab",
+        "gitDecoration.addedResourceForeground": "#449dab",
+        "gitDecoration.untrackedResourceForeground": "#449dab",
+        "gitDecoration.conflictingResourceForeground": "#e0af68cc",
+        "gitDecoration.stageDeletedResourceForeground": "#914c54",
+        "gitDecoration.stageModifiedResourceForeground": "#6183bb",
+        "notebook.editorBackground": "#1a1b26",
+        "notebook.cellEditorBackground": "#16161e",
+        "notebook.cellBorderColor": "#101014",
+        "notebook.focusedCellBorder": "#29355a",
+        "notebook.cellStatusBarItemHoverBackground": "#1c1d29",
+        "charts.red": "#f7768e",
+        "charts.blue": "#7aa2f7",
+        "charts.yellow": "#e0af68",
+        "charts.orange": "#ff9e64",
+        "charts.green": "#41a6b5",
+        "charts.purple": "#9d7cd8",
+        "charts.foreground": "#9AA5CE",
+        "charts.lines": "#16161e",
+        "merge.currentHeaderBackground": "#41a6b525",
+        "merge.currentContentBackground": "#007a7544",
+        "merge.incomingHeaderBackground": "#3d59a1aa",
+        "merge.incomingContentBackground": "#3d59a144",
+        "mergeEditor.change.background": "#41a6b525",
+        "mergeEditor.change.word.background": "#41a6b540",
+        "mergeEditor.conflict.unhandledUnfocused.border": "#e0af6888",
+        "mergeEditor.conflict.unhandledFocused.border": "#e0af68b0",
+        "mergeEditor.conflict.handledUnfocused.border": "#41a6b525",
+        "mergeEditor.conflict.handledFocused.border": "#41a6b565",
+        "mergeEditor.conflict.handled.minimapOverViewRuler": "#449dab",
+        "mergeEditor.conflict.unhandled.minimapOverViewRuler": "#e0af68",
+        "gitlens.trailingLineForegroundColor": "#444b6a",
+        "gitlens.gutterUncommittedForegroundColor": "#444b6a",
+        "gitlens.gutterForegroundColor": "#444b6a",
+        "notificationCenterHeader.background": "#101014",
+        "notifications.background": "#101014",
+        "notificationLink.foreground": "#6183bb",
+        "notificationsErrorIcon.foreground": "#bb616b",
+        "notificationsWarningIcon.foreground": "#bba461",
+        "notificationsInfoIcon.foreground": "#0da0ba",
+        "menubar.selectionForeground": "#a9b1d6",
+        "menubar.selectionBackground": "#1e202e",
+        "menubar.selectionBorder": "#1b1e2e",
+        "menu.foreground": "#787c99",
+        "menu.background": "#16161e",
+        "menu.selectionForeground": "#a9b1d6",
+        "menu.selectionBackground": "#1e202e",
+        "menu.separatorBackground": "#101014",
+        "menu.border": "#101014"
+    },
+    "tokenColors": [
+        {
+            "name": "Italics - Comments, Storage, Keyword Flow, Vue attributes, Decorators",
+            "scope": [
+                "comment",
+                "meta.var.expr storage.type",
+                "keyword.control.flow",
+                "keyword.control.return",
+                "meta.directive.vue punctuation.separator.key-value.html",
+                "meta.directive.vue entity.other.attribute-name.html",
+                "tag.decorator.js entity.name.tag.js",
+                "tag.decorator.js punctuation.definition.tag.js",
+                "storage.modifier"
+            ],
+            "settings": {
+                "fontStyle": "italic"
+            }
+        },
+        {
+            "name": "Fix YAML block scalar",
+            "scope": "keyword.control.flow.block-scalar.literal",
+            "settings": {
+                "fontStyle": ""
+            }
+        },
+        {
+            "name": "Comment",
+            "scope": [
+                "comment",
+                "comment.block.documentation",
+                "punctuation.definition.comment",
+                "comment.block.documentation punctuation"
+            ],
+            "settings": {
+                "foreground": "#444b6a"
+            }
+        },
+        {
+            "name": "Comment Doc",
+            "scope": [
+                "keyword.operator.assignment.jsdoc",
+                "comment.block.documentation variable",
+                "comment.block.documentation storage",
+                "comment.block.documentation keyword",
+                "comment.block.documentation support",
+                "comment.block.documentation markup",
+                "comment.block.documentation markup.inline.raw.string.markdown",
+                "meta.other.type.phpdoc.php keyword.other.type.php",
+                "meta.other.type.phpdoc.php support.other.namespace.php",
+                "meta.other.type.phpdoc.php punctuation.separator.inheritance.php",
+                "meta.other.type.phpdoc.php support.class",
+                "keyword.other.phpdoc.php",
+                "log.date"
+            ],
+            "settings": {
+                "foreground": "#5a638c"
+            }
+        },
+        {
+            "name": "Comment Doc Emphasized",
+            "scope": [
+                "meta.other.type.phpdoc.php support.class",
+                "comment.block.documentation storage.type",
+                "comment.block.documentation punctuation.definition.block.tag",
+                "comment.block.documentation entity.name.type.instance"
+            ],
+            "settings": {
+                "foreground": "#646e9c"
+            }
+        },
+        {
+            "name": "Number, Boolean, Undefined, Null",
+            "scope": [
+                "variable.other.constant",
+                "punctuation.definition.constant",
+                "constant.language",
+                "constant.numeric",
+                "support.constant"
+            ],
+            "settings": {
+                "foreground": "#ff9e64"
+            }
+        },
+        {
+            "name": "String, Symbols",
+            "scope": [
+                "string",
+                "constant.other.symbol",
+                "constant.other.key",
+                "meta.attribute-selector"
+            ],
+            "settings": {
+                "fontStyle": "",
+                "foreground": "#9ece6a"
+            }
+        },
+        {
+            "name": "Colors",
+            "scope": [
+                "constant.other.color",
+                "constant.other.color.rgb-value.hex punctuation.definition.constant"
+            ],
+            "settings": {
+                "foreground": "#9aa5ce"
+            }
+        },
+        {
+            "name": "Invalid",
+            "scope": [
+                "invalid",
+                "invalid.illegal"
+            ],
+            "settings": {
+                "foreground": "#ff5370"
+            }
+        },
+        {
+            "name": "Invalid deprecated",
+            "scope": "invalid.deprecated",
+            "settings": {
+                "foreground": "#bb9af7"
+            }
+        },
+        {
+            "name": "Storage Type",
+            "scope": "storage.type",
+            "settings": {
+                "foreground": "#bb9af7"
+            }
+        },
+        {
+            "name": "Storage - modifier, var, const, let",
+            "scope": [
+                "meta.var.expr storage.type",
+                "storage.modifier"
+            ],
+            "settings": {
+                "foreground": "#9d7cd8"
+            }
+        },
+        {
+            "name": "Interpolation, PHP tags, Smarty tags",
+            "scope": [
+                "punctuation.definition.template-expression",
+                "punctuation.section.embedded",
+                "meta.embedded.line.tag.smarty",
+                "support.constant.handlebars",
+                "punctuation.section.tag.twig"
+            ],
+            "settings": {
+                "foreground": "#7dcfff"
+            }
+        },
+        {
+            "name": "Blade, Twig, Smarty Handlebars keywords",
+            "scope": [
+                "keyword.control.smarty",
+                "keyword.control.twig",
+                "support.constant.handlebars keyword.control",
+                "keyword.operator.comparison.twig",
+                "keyword.blade",
+                "entity.name.function.blade"
+            ],
+            "settings": {
+                "foreground": "#0db9d7"
+            }
+        },
+        {
+            "name": "Spread",
+            "scope": [
+                "keyword.operator.spread",
+                "keyword.operator.rest"
+            ],
+            "settings": {
+                "foreground": "#f7768e",
+                "fontStyle": "bold"
+            }
+        },
+        {
+            "name": "Operator, Misc",
+            "scope": [
+                "keyword.operator",
+                "keyword.control.as",
+                "keyword.other",
+                "keyword.operator.bitwise.shift",
+                "punctuation",
+                "expression.embbeded.vue punctuation.definition.tag",
+                "text.html.twig meta.tag.inline.any.html",
+                "meta.tag.template.value.twig meta.function.arguments.twig",
+                "meta.directive.vue punctuation.separator.key-value.html",
+                "punctuation.definition.constant.markdown",
+                "punctuation.definition.string",
+                "punctuation.support.type.property-name",
+                "text.html.vue-html meta.tag",
+                "punctuation.definition.keyword",
+                "punctuation.terminator.rule",
+                "punctuation.definition.entity",
+                "punctuation.separator.inheritance.php",
+                "keyword.other.template",
+                "keyword.other.substitution",
+                "entity.name.operator",
+                "meta.property-list punctuation.separator.key-value",
+                "meta.at-rule.mixin punctuation.separator.key-value",
+                "meta.at-rule.function variable.parameter.url"
+            ],
+            "settings": {
+                "foreground": "#89ddff"
+            }
+        },
+        {
+            "name": "Import, Export, From, Default",
+            "scope": [
+                "keyword.control.import",
+                "keyword.control.export",
+                "keyword.control.from",
+                "keyword.control.default",
+                "meta.import keyword.other"
+            ],
+            "settings": {
+                "foreground": "#7dcfff"
+            }
+        },
+        {
+            "name": "Keyword",
+            "scope": [
+                "keyword",
+                "keyword.control",
+                "keyword.other.important"
+            ],
+            "settings": {
+                "foreground": "#bb9af7"
+            }
+        },
+        {
+            "name": "Keyword SQL",
+            "scope": "keyword.other.DML",
+            "settings": {
+                "foreground": "#7dcfff"
+            }
+        },
+        {
+            "name": "Keyword Operator Logical, Arrow, Ternary, Comparison",
+            "scope": [
+                "keyword.operator.logical",
+                "storage.type.function",
+                "keyword.operator.bitwise",
+                "keyword.operator.ternary",
+                "keyword.operator.comparison",
+                "keyword.operator.relational",
+                "keyword.operator.or.regexp"
+            ],
+            "settings": {
+                "foreground": "#bb9af7"
+            }
+        },
+        {
+            "name": "Tag",
+            "scope": "entity.name.tag",
+            "settings": {
+                "foreground": "#f7768e"
+            }
+        },
+        {
+            "name": "Tag - Custom",
+            "scope": [
+                "entity.name.tag support.class.component",
+                "meta.tag.custom entity.name.tag",
+                "meta.tag"
+            ],
+            "settings": {
+                "foreground": "#de5971"
+            }
+        },
+        {
+            "name": "Tag Punctuation",
+            "scope": "punctuation.definition.tag",
+            "settings": {
+                "foreground": "#ba3c97"
+            }
+        },
+        {
+            "name": "Globals, PHP Constants, etc",
+            "scope": [
+                "constant.other.php",
+                "variable.other.global.safer",
+                "variable.other.global.safer punctuation.definition.variable",
+                "variable.other.global",
+                "variable.other.global punctuation.definition.variable",
+                "constant.other"
+            ],
+            "settings": {
+                "foreground": "#e0af68"
+            }
+        },
+        {
+            "name": "Variables",
+            "scope": [
+                "variable",
+                "support.variable",
+                "string constant.other.placeholder",
+                "variable.parameter.handlebars",
+                "variable.other.object"
+            ],
+            "settings": {
+                "foreground": "#c0caf5"
+            }
+        },
+        {
+            "name": "Variable Array Key",
+            "scope": "meta.array.literal variable",
+            "settings": {
+                "foreground": "#7dcfff"
+            }
+        },
+        {
+            "name": "Object Key",
+            "scope": [
+                "meta.object-literal.key",
+                "entity.name.type.hcl",
+                "string.alias.graphql",
+                "string.unquoted.graphql",
+                "string.unquoted.alias.graphql",
+                "meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js",
+                "meta.field.declaration.ts variable.object.property"
+            ],
+            "settings": {
+                "foreground": "#73daca"
+            }
+        },
+        {
+            "name": "Object Property",
+            "scope": [
+                "variable.other.property",
+                "support.variable.property",
+                "support.variable.property.dom",
+                "meta.function-call variable.other.object.property"
+            ],
+            "settings": {
+                "foreground": "#7dcfff"
+            }
+        },
+        {
+            "name": "Object Property",
+            "scope": "variable.other.object.property",
+            "settings": {
+                "foreground": "#c0caf5"
+            }
+        },
+        {
+            "name": "Object Literal Member lvl 3 (Vue Prop Validation)",
+            "scope": "meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key",
+            "settings": {
+                "foreground": "#41a6b5"
+            }
+        },
+        {
+            "name": "C-related Block Level Variables",
+            "scope": "source.cpp meta.block variable.other",
+            "settings": {
+                "foreground": "#f7768e"
+            }
+        },
+        {
+            "name": "Other Variable",
+            "scope": "support.other.variable",
+            "settings": {
+                "foreground": "#f7768e"
+            }
+        },
+        {
+            "name": "Methods",
+            "scope": [
+                "meta.class-method.js entity.name.function.js",
+                "entity.name.method.js",
+                "variable.function.constructor",
+                "keyword.other.special-method",
+                "storage.type.cs"
+            ],
+            "settings": {
+                "foreground": "#7aa2f7"
+            }
+        },
+        {
+            "name": "Function Definition",
+            "scope": [
+                "entity.name.function",
+                "variable.other.enummember",
+                "meta.function-call",
+                "meta.function-call entity.name.function",
+                "variable.function",
+                "meta.definition.method entity.name.function",
+                "meta.object-literal entity.name.function"
+            ],
+            "settings": {
+                "foreground": "#7aa2f7"
+            }
+        },
+        {
+            "name": "Function Argument",
+            "scope": [
+                "variable.parameter.function.language.special",
+                "variable.parameter",
+                "meta.function.parameters punctuation.definition.variable",
+                "meta.function.parameter variable"
+            ],
+            "settings": {
+                "foreground": "#e0af68"
+            }
+        },
+        {
+            "name": "Constant, Tag Attribute",
+            "scope": [
+                "keyword.other.type.php",
+                "storage.type.php",
+                "constant.character",
+                "constant.escape",
+                "keyword.other.unit"
+            ],
+            "settings": {
+                "foreground": "#bb9af7"
+            }
+        },
+        {
+            "name": "Variable Definition",
+            "scope": [
+                "meta.definition.variable variable.other.constant",
+                "meta.definition.variable variable.other.readwrite",
+                "variable.declaration.hcl variable.other.readwrite.hcl",
+                "meta.mapping.key.hcl variable.other.readwrite.hcl",
+                "variable.other.declaration"
+            ],
+            "settings": {
+                "foreground": "#bb9af7"
+            }
+        },
+        {
+            "name": "Inherited Class",
+            "scope": "entity.other.inherited-class",
+            "settings": {
+                "fontStyle": "",
+                "foreground": "#bb9af7"
+            }
+        },
+        {
+            "name": "Class, Support, DOM, etc",
+            "scope": [
+                "support.class",
+                "support.type",
+                "variable.other.readwrite.alias",
+                "support.orther.namespace.use.php",
+                "meta.use.php",
+                "support.other.namespace.php",
+                "support.type.sys-types",
+                "support.variable.dom",
+                "support.constant.math",
+                "support.type.object.module",
+                "support.constant.json",
+                "entity.name.namespace",
+                "meta.import.qualifier",
+                "variable.other.constant.object"
+            ],
+            "settings": {
+                "foreground": "#0db9d7"
+            }
+        },
+        {
+            "name": "Class Name",
+            "scope": "entity.name",
+            "settings": {
+                "foreground": "#c0caf5"
+            }
+        },
+        {
+            "name": "Support Function",
+            "scope": "support.function",
+            "settings": {
+                "foreground": "#0db9d7"
+            }
+        },
+        {
+            "name": "CSS Class and Support",
+            "scope": [
+                "source.css support.type.property-name",
+                "source.sass support.type.property-name",
+                "source.scss support.type.property-name",
+                "source.less support.type.property-name",
+                "source.stylus support.type.property-name",
+                "source.postcss support.type.property-name",
+                "support.type.property-name.css",
+                "support.type.vendored.property-name",
+                "support.type.map.key"
+            ],
+            "settings": {
+                "foreground": "#7aa2f7"
+            }
+        },
+        {
+            "name": "CSS Font",
+            "scope": [
+                "support.constant.font-name",
+                "meta.definition.variable"
+            ],
+            "settings": {
+                "foreground": "#9ece6a"
+            }
+        },
+        {
+            "name": "CSS Class",
+            "scope": [
+                "entity.other.attribute-name.class",
+                "meta.at-rule.mixin.scss entity.name.function.scss"
+            ],
+            "settings": {
+                "foreground": "#9ece6a"
+            }
+        },
+        {
+            "name": "CSS ID",
+            "scope": "entity.other.attribute-name.id",
+            "settings": {
+                "foreground": "#fc7b7b"
+            }
+        },
+        {
+            "name": "CSS Tag",
+            "scope": "entity.name.tag.css",
+            "settings": {
+                "foreground": "#0db9d7"
+            }
+        },
+        {
+            "name": "CSS Tag Reference, Pseudo & Class Punctuation",
+            "scope": [
+                "entity.other.attribute-name.pseudo-class punctuation.definition.entity",
+                "entity.other.attribute-name.pseudo-element punctuation.definition.entity",
+                "entity.other.attribute-name.class punctuation.definition.entity",
+                "entity.name.tag.reference"
+            ],
+            "settings": {
+                "foreground": "#e0af68"
+            }
+        },
+        {
+            "name": "CSS Punctuation",
+            "scope": "meta.property-list",
+            "settings": {
+                "foreground": "#9abdf5"
+            }
+        },
+        {
+            "name": "CSS at-rule fix",
+            "scope": [
+                "meta.property-list meta.at-rule.if",
+                "meta.at-rule.return variable.parameter.url",
+                "meta.property-list meta.at-rule.else"
+            ],
+            "settings": {
+                "foreground": "#ff9e64"
+            }
+        },
+        {
+            "name": "CSS Parent Selector Entity",
+            "scope": [
+                "entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css"
+            ],
+            "settings": {
+                "foreground": "#73daca"
+            }
+        },
+        {
+            "name": "CSS Punctuation comma fix",
+            "scope": "meta.property-list meta.property-list",
+            "settings": {
+                "foreground": "#9abdf5"
+            }
+        },
+        {
+            "name": "SCSS @",
+            "scope": [
+                "meta.at-rule.mixin keyword.control.at-rule.mixin",
+                "meta.at-rule.include entity.name.function.scss",
+                "meta.at-rule.include keyword.control.at-rule.include"
+            ],
+            "settings": {
+                "foreground": "#bb9af7"
+            }
+        },
+        {
+            "name": "SCSS Mixins, Extends, Include Keyword",
+            "scope": [
+                "keyword.control.at-rule.include punctuation.definition.keyword",
+                "keyword.control.at-rule.mixin punctuation.definition.keyword",
+                "meta.at-rule.include keyword.control.at-rule.include",
+                "keyword.control.at-rule.extend punctuation.definition.keyword",
+                "meta.at-rule.extend keyword.control.at-rule.extend",
+                "entity.other.attribute-name.placeholder.css punctuation.definition.entity.css",
+                "meta.at-rule.media keyword.control.at-rule.media",
+                "meta.at-rule.mixin keyword.control.at-rule.mixin",
+                "meta.at-rule.function keyword.control.at-rule.function",
+                "keyword.control punctuation.definition.keyword"
+            ],
+            "settings": {
+                "foreground": "#9d7cd8"
+            }
+        },
+        {
+            "name": "SCSS Include Mixin Argument",
+            "scope": "meta.property-list meta.at-rule.include",
+            "settings": {
+                "foreground": "#c0caf5"
+            }
+        },
+        {
+            "name": "CSS value",
+            "scope": "support.constant.property-value",
+            "settings": {
+                "foreground": "#ff9e64"
+            }
+        },
+        {
+            "name": "Sub-methods",
+            "scope": [
+                "entity.name.module.js",
+                "variable.import.parameter.js",
+                "variable.other.class.js"
+            ],
+            "settings": {
+                "foreground": "#c0caf5"
+            }
+        },
+        {
+            "name": "Language methods",
+            "scope": "variable.language",
+            "settings": {
+                "foreground": "#f7768e"
+            }
+        },
+        {
+            "name": "Variable punctuation",
+            "scope": "variable.other punctuation.definition.variable",
+            "settings": {
+                "foreground": "#c0caf5"
+            }
+        },
+        {
+            "name": "Keyword this with Punctuation, ES7 Bind Operator",
+            "scope": [
+                "source.js constant.other.object.key.js string.unquoted.label.js",
+                "variable.language.this punctuation.definition.variable",
+                "keyword.other.this"
+            ],
+            "settings": {
+                "foreground": "#f7768e"
+            }
+        },
+        {
+            "name": "HTML Attributes",
+            "scope": [
+                "entity.other.attribute-name",
+                "text.html.basic entity.other.attribute-name.html",
+                "text.html.basic entity.other.attribute-name"
+            ],
+            "settings": {
+                "foreground": "#bb9af7"
+            }
+        },
+        {
+            "name": "HTML Character Entity",
+            "scope": "text.html constant.character.entity",
+            "settings": {
+                "foreground": "#0DB9D7"
+            }
+        },
+        {
+            "name": "Vue Template attributes",
+            "scope": [
+                "entity.other.attribute-name.id.html",
+                "meta.directive.vue entity.other.attribute-name.html"
+            ],
+            "settings": {
+                "foreground": "#bb9af7"
+            }
+        },
+        {
+            "name": "CSS ID's",
+            "scope": "source.sass keyword.control",
+            "settings": {
+                "foreground": "#7aa2f7"
+            }
+        },
+        {
+            "name": "CSS psuedo selectors",
+            "scope": [
+                "entity.other.attribute-name.pseudo-class",
+                "entity.other.attribute-name.pseudo-element",
+                "entity.other.attribute-name.placeholder",
+                "meta.property-list meta.property-value"
+            ],
+            "settings": {
+                "foreground": "#bb9af7"
+            }
+        },
+        {
+            "name": "Inserted",
+            "scope": "markup.inserted",
+            "settings": {
+                "foreground": "#449dab"
+            }
+        },
+        {
+            "name": "Deleted",
+            "scope": "markup.deleted",
+            "settings": {
+                "foreground": "#914c54"
+            }
+        },
+        {
+            "name": "Changed",
+            "scope": "markup.changed",
+            "settings": {
+                "foreground": "#6183bb"
+            }
+        },
+        {
+            "name": "Regular Expressions",
+            "scope": "string.regexp",
+            "settings": {
+                "foreground": "#b4f9f8"
+            }
+        },
+        {
+            "name": "Regular Expressions - Punctuation",
+            "scope": "punctuation.definition.group",
+            "settings": {
+                "foreground": "#f7768e"
+            }
+        },
+        {
+            "name": "Regular Expressions - Character Class",
+            "scope": [
+                "constant.other.character-class.regexp"
+            ],
+            "settings": {
+                "foreground": "#bb9af7"
+            }
+        },
+        {
+            "name": "Regular Expressions - Character Class Set",
+            "scope": [
+                "constant.other.character-class.set.regexp",
+                "punctuation.definition.character-class.regexp"
+            ],
+            "settings": {
+                "foreground": "#e0af68"
+            }
+        },
+        {
+            "name": "Regular Expressions - Quantifier",
+            "scope": "keyword.operator.quantifier.regexp",
+            "settings": {
+                "foreground": "#89ddff"
+            }
+        },
+        {
+            "name": "Regular Expressions - Backslash",
+            "scope": "constant.character.escape.backslash",
+            "settings": {
+                "foreground": "#c0caf5"
+            }
+        },
+        {
+            "name": "Escape Characters",
+            "scope": "constant.character.escape",
+            "settings": {
+                "foreground": "#89ddff"
+            }
+        },
+        {
+            "name": "Decorators",
+            "scope": [
+                "tag.decorator.js entity.name.tag.js",
+                "tag.decorator.js punctuation.definition.tag.js"
+            ],
+            "settings": {
+                "foreground": "#7aa2f7"
+            }
+        },
+        {
+            "name": "CSS Units",
+            "scope": "keyword.other.unit",
+            "settings": {
+                "foreground": "#f7768e"
+            }
+        },
+        {
+            "name": "JSON Key - Level 0",
+            "scope": [
+                "source.json meta.structure.dictionary.json support.type.property-name.json"
+            ],
+            "settings": {
+                "foreground": "#7aa2f7"
+            }
+        },
+        {
+            "name": "JSON Key - Level 1",
+            "scope": [
+                "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+            ],
+            "settings": {
+                "foreground": "#0db9d7"
+            }
+        },
+        {
+            "name": "JSON Key - Level 2",
+            "scope": [
+                "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+            ],
+            "settings": {
+                "foreground": "#7dcfff"
+            }
+        },
+        {
+            "name": "JSON Key - Level 3",
+            "scope": [
+                "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+            ],
+            "settings": {
+                "foreground": "#bb9af7"
+            }
+        },
+        {
+            "name": "JSON Key - Level 4",
+            "scope": [
+                "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+            ],
+            "settings": {
+                "foreground": "#e0af68"
+            }
+        },
+        {
+            "name": "JSON Key - Level 5",
+            "scope": [
+                "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+            ],
+            "settings": {
+                "foreground": "#0db9d7"
+            }
+        },
+        {
+            "name": "JSON Key - Level 6",
+            "scope": [
+                "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+            ],
+            "settings": {
+                "foreground": "#73daca"
+            }
+        },
+        {
+            "name": "JSON Key - Level 7",
+            "scope": [
+                "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+            ],
+            "settings": {
+                "foreground": "#f7768e"
+            }
+        },
+        {
+            "name": "JSON Key - Level 8",
+            "scope": [
+                "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+            ],
+            "settings": {
+                "foreground": "#9ece6a"
+            }
+        },
+        {
+            "name": "Plain Punctuation",
+            "scope": "punctuation.definition.list_item.markdown",
+            "settings": {
+                "foreground": "#9abdf5"
+            }
+        },
+        {
+            "name": "Block Punctuation",
+            "scope": [
+                "meta.block",
+                "meta.brace",
+                "punctuation.definition.block",
+                "punctuation.definition.use",
+                "punctuation.definition.class",
+                "punctuation.definition.begin.bracket",
+                "punctuation.definition.end.bracket",
+                "punctuation.definition.switch-expression.begin.bracket",
+                "punctuation.definition.switch-expression.end.bracket",
+                "punctuation.definition.section.switch-block.begin.bracket",
+                "punctuation.definition.section.switch-block.end.bracket",
+                "punctuation.definition.group.shell",
+                "punctuation.definition.parameters",
+                "punctuation.definition.arguments",
+                "punctuation.definition.dictionary",
+                "punctuation.definition.array",
+                "punctuation.section"
+            ],
+            "settings": {
+                "foreground": "#9abdf5"
+            }
+        },
+        {
+            "name": "Markdown - Plain",
+            "scope": [
+                "meta.jsx.children",
+                "meta.embedded.block"
+            ],
+            "settings": {
+                "foreground": "#c0caf5"
+            }
+        },
+        {
+            "name": "HTML text",
+            "scope": [
+                "text.html",
+                "text.log"
+            ],
+            "settings": {
+                "foreground": "#9aa5ce"
+            }
+        },
+        {
+            "name": "Markdown - Markup Raw Inline",
+            "scope": "text.html.markdown markup.inline.raw.markdown",
+            "settings": {
+                "foreground": "#bb9af7"
+            }
+        },
+        {
+            "name": "Markdown - Markup Raw Inline Punctuation",
+            "scope": "text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown",
+            "settings": {
+                "foreground": "#4E5579"
+            }
+        },
+        {
+            "name": "Markdown - Heading 1",
+            "scope": [
+                "heading.1.markdown entity.name",
+                "heading.1.markdown punctuation.definition.heading.markdown"
+            ],
+            "settings": {
+                "fontStyle": "bold",
+                "foreground": "#89ddff"
+            }
+        },
+        {
+            "name": "Markdown - Heading 2",
+            "scope": [
+                "heading.2.markdown entity.name",
+                "heading.2.markdown punctuation.definition.heading.markdown"
+            ],
+            "settings": {
+                "fontStyle": "bold",
+                "foreground": "#61bdf2"
+            }
+        },
+        {
+            "name": "Markdown - Heading 3",
+            "scope": [
+                "heading.3.markdown entity.name",
+                "heading.3.markdown punctuation.definition.heading.markdown"
+            ],
+            "settings": {
+                "fontStyle": "bold",
+                "foreground": "#7aa2f7"
+            }
+        },
+        {
+            "name": "Markdown - Heading 4",
+            "scope": [
+                "heading.4.markdown entity.name",
+                "heading.4.markdown punctuation.definition.heading.markdown"
+            ],
+            "settings": {
+                "fontStyle": "bold",
+                "foreground": "#6d91de"
+            }
+        },
+        {
+            "name": "Markdown - Heading 5",
+            "scope": [
+                "heading.5.markdown entity.name",
+                "heading.5.markdown punctuation.definition.heading.markdown"
+            ],
+            "settings": {
+                "fontStyle": "bold",
+                "foreground": "#9aa5ce"
+            }
+        },
+        {
+            "name": "Markdown - Heading 6",
+            "scope": [
+                "heading.6.markdown entity.name",
+                "heading.6.markdown punctuation.definition.heading.markdown"
+            ],
+            "settings": {
+                "fontStyle": "bold",
+                "foreground": "#747ca1"
+            }
+        },
+        {
+            "name": "Markup - Italic",
+            "scope": [
+                "markup.italic",
+                "markup.italic punctuation"
+            ],
+            "settings": {
+                "fontStyle": "italic",
+                "foreground": "#c0caf5"
+            }
+        },
+        {
+            "name": "Markup - Bold",
+            "scope": [
+                "markup.bold",
+                "markup.bold punctuation"
+            ],
+            "settings": {
+                "fontStyle": "bold",
+                "foreground": "#c0caf5"
+            }
+        },
+        {
+            "name": "Markup - Bold-Italic",
+            "scope": [
+                "markup.bold markup.italic",
+                "markup.bold markup.italic punctuation"
+            ],
+            "settings": {
+                "fontStyle": "bold italic",
+                "foreground": "#c0caf5"
+            }
+        },
+        {
+            "name": "Markup - Underline",
+            "scope": [
+                "markup.underline",
+                "markup.underline punctuation"
+            ],
+            "settings": {
+                "fontStyle": "underline"
+            }
+        },
+        {
+            "name": "Markdown - Blockquote",
+            "scope": "markup.quote punctuation.definition.blockquote.markdown",
+            "settings": {
+                "foreground": "#4e5579"
+            }
+        },
+        {
+            "name": "Markup - Quote",
+            "scope": "markup.quote",
+            "settings": {
+                "fontStyle": "italic"
+            }
+        },
+        {
+            "name": "Markdown - Link",
+            "scope": [
+                "string.other.link",
+                "markup.underline.link",
+                "constant.other.reference.link.markdown",
+                "string.other.link.description.title.markdown"
+            ],
+            "settings": {
+                "foreground": "#73daca"
+            }
+        },
+        {
+            "name": "Markdown - Fenced Code Block",
+            "scope": [
+                "markup.fenced_code.block.markdown",
+                "markup.inline.raw.string.markdown",
+                "variable.language.fenced.markdown"
+            ],
+            "settings": {
+                "foreground": "#89ddff"
+            }
+        },
+        {
+            "name": "Markdown - Separator",
+            "scope": "meta.separator",
+            "settings": {
+                "fontStyle": "bold",
+                "foreground": "#444b6a"
+            }
+        },
+        {
+            "name": "Markup - Table",
+            "scope": "markup.table",
+            "settings": {
+                "foreground": "#c0cefc"
+            }
+        },
+        {
+            "name": "Token - Info",
+            "scope": "token.info-token",
+            "settings": {
+                "foreground": "#0db9d7"
+            }
+        },
+        {
+            "name": "Token - Warn",
+            "scope": "token.warn-token",
+            "settings": {
+                "foreground": "#ffdb69"
+            }
+        },
+        {
+            "name": "Token - Error",
+            "scope": "token.error-token",
+            "settings": {
+                "foreground": "#db4b4b"
+            }
+        },
+        {
+            "name": "Token - Debug",
+            "scope": "token.debug-token",
+            "settings": {
+                "foreground": "#b267e6"
+            }
+        },
+        {
+            "name": "Apache Tag",
+            "scope": "entity.tag.apacheconf",
+            "settings": {
+                "foreground": "#f7768e"
+            }
+        },
+        {
+            "name": "Preprocessor",
+            "scope": [
+                "meta.preprocessor"
+            ],
+            "settings": {
+                "foreground": "#73daca"
+            }
+        },
+        {
+            "name": "ENV value",
+            "scope": "source.env",
+            "settings": {
+                "foreground": "#7aa2f7"
+            }
+        }
+    ]
+}`));
+    }
+
+  </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/index.mts b/projects/cetz-editor/src/index.mts
index 5a539a99..664f7062 100644
--- a/projects/cetz-editor/src/index.mts
+++ b/projects/cetz-editor/src/index.mts
@@ -249,6 +249,11 @@ export class PreviewState {
     if (!def) {
       return;
     }
+
+    if (this.instances[id]) {
+      return;
+    }
+
     this.instances[id] = {
       type: ty,
       pos: [0, 0],
diff --git a/projects/cetz-editor/typst-style.css b/projects/cetz-editor/typst-style.css
index 13a6a94f..bf943c45 100644
--- a/projects/cetz-editor/typst-style.css
+++ b/projects/cetz-editor/typst-style.css
@@ -1,13 +1,28 @@
+@font-face {
+  font-family: Inter;
+  src: local('Inter'),
+    url('https://interactive-examples.mdn.mozilla.net/media/fonts/Inter.var.woff2');
+}
+
 body {
   margin: 0;
   padding: 0;
+  background-color: #16161e;
+  color: rgba(156, 163, 175, 1);
+  font-family: BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 }
 
-#main {
+.flex-row {
   display: flex;
   flex-direction: row;
 }
 
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
 #preview {
   display: flex;
   flex-direction: column;
@@ -15,6 +30,8 @@ body {
 
 #preview-panel {
   padding: 20px;
+  background-color: white;
+  overflow: scroll;
 }
 .typst-cetz-elem {
   pointer-events: bounding-box;
@@ -34,6 +51,21 @@ body {
   background-color: #f7fafc;
 }
 
+.editor-menu {
+  padding: 0 0.61rem;
+  font-family: BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  border: 0px solid #cbd5e0;
+  border-radius: 0.25rem;
+  transition: background-color 0.2s;
+}
+
+.editor-menu:hover {
+  cursor: pointer;
+  /* border rect */
+  background-color: hsla(0, 0%, 100%, 0.15);
+}
+
 .hidden {
   /* The menu is hidden at first */
   display: none;
@@ -50,3 +82,100 @@ body {
 .menu-item input {
   float: right;
 }
+
+.editor-action-group,
+.editor-menu-group {
+  display: inline-block;
+  border-width: 1px;
+  border-radius: 8px;
+  border: 1px solid #333;
+  padding: 3px;
+}
+
+#insert-name {
+  max-width: 80px;
+}
+
+.editor-code-select {
+  appearance: none;
+  /* safari */
+  -webkit-appearance: none;
+  /* other styles for aesthetics */
+  width: 6.5em;
+  background-color: hsla(0, 0%, 100%, 0.1);
+
+  transition: color 0.3s;
+}
+.editor-code-select:focus,
+.editor-code-select:focus-visible {
+  outline: none;
+}
+
+.editor-code-select:hover,
+.editor-code-select:focus,
+.editor-code-select:focus-visible {
+  color: #fff;
+}
+
+.editor-code-select,
+.editor-code-select option {
+  text-overflow: ellipsis;
+  padding: 0.125rem 0.25em;
+  font-size: 1rem;
+  border: 1px solid hsla(0, 0%, 100%, 0.1);
+  border-radius: 0.25rem;
+  color: #888;
+  cursor: pointer;
+  font-size: 0.9em;
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    Liberation Mono,
+    Courier New,
+    monospace;
+}
+
+.editor-code-select option {
+  background-color: #16161e;
+}
+
+.editor-input-box {
+  background-color: #16161e;
+  border: 1px solid hsla(0, 0%, 100%, 0.1);
+  border-radius: 0.25rem;
+  transition: border-color 0.2s;
+  color: #e5e5e5;
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    Liberation Mono,
+    Courier New,
+    monospace;
+}
+
+.editor-input-box:focus,
+.editor-input-box:focus-visible {
+  outline: none;
+  border-color: hsla(0, 0%, 100%, 0.5);
+}
+
+.editor-input-button {
+  background-color: #16161e;
+  border-radius: 0.25rem;
+  border: 1px solid #a3a3a3;
+  color: #e5e5e5;
+  transition: border-color 0.3s;
+  font-weight: 500;
+  font-family: Inter, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
+.editor-input-button:hover {
+  border-color: #e5e5e5;
+}
