windmill-components 1.382.7 → 1.383.2

package/package/components/Dev.svelte

@@ -371,7 +371,8 @@ setContext('FlowEditorContext', {
     testStepStore,
     saveDraft: () => { },
     initialPath: '',
-    flowInputsStore: writable({})
+    flowInputsStore: writable({}),
+    customUi: {}
 });
 $: updateFlow($flowStore);
 let lastSent = undefined;

package/package/components/DiffDrawer.svelte

@@ -158,6 +158,7 @@ $: updateContentType(data, diffType);
 							{#key diffType}
 								{#if contentType === 'content'}
 									<DiffEditor
+										open={true}
 										automaticLayout
 										class="h-full"
 										defaultLang={lang}
@@ -168,6 +169,7 @@ $: updateContentType(data, diffType);
 									/>
 								{:else if contentType === 'metadata'}
 									<DiffEditor
+										open={true}
 										automaticLayout
 										class="h-full"
 										defaultLang="yaml"

package/package/components/DiffEditor.svelte

@@ -1,12 +1,10 @@
 <script>import { BROWSER } from 'esm-env';
 import { onMount } from 'svelte';
+import '@codingame/monaco-vscode-standalone-languages';
+import '@codingame/monaco-vscode-standalone-json-language-features';
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
 import { editor as meditor } from 'monaco-editor';
-import 'monaco-editor/esm/vs/basic-languages/python/python.contribution';
-import 'monaco-editor/esm/vs/basic-languages/go/go.contribution';
-import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution';
-import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
-import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
-import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
+import 'vscode/localExtensionHost';
 import { initializeVscode } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
 import { buildWorkerDefinition } from './build_workers';
@@ -22,6 +20,7 @@ export let readOnly = false;
 let diffEditor;
 let diffDivEl = null;
 let editorWidth = SIDE_BY_SIDE_MIN_WIDTH;
+export let open = false;
 async function loadDiffEditor() {
     await initializeVscode();
     if (!diffDivEl) {
@@ -72,18 +71,18 @@ export function getModified() {
     return diffEditor?.getModel()?.modified.getValue() ?? '';
 }
 export function show() {
-    diffDivEl?.classList.remove('hidden');
+    open = true;
 }
 export function hide() {
-    diffDivEl?.classList.add('hidden');
+    open = false;
 }
 function onWidthChange(editorWidth) {
     diffEditor?.updateOptions({ renderSideBySide: editorWidth >= SIDE_BY_SIDE_MIN_WIDTH });
 }
 $: onWidthChange(editorWidth);
+$: open && diffDivEl && loadDiffEditor();
 onMount(() => {
     if (BROWSER) {
-        loadDiffEditor();
         return () => {
             diffEditor?.dispose();
         };
@@ -91,6 +90,7 @@ onMount(() => {
 });
 </script>
 
-<EditorTheme />
-
-<div bind:this={diffDivEl} class="{$$props.class} editor" bind:clientWidth={editorWidth} />
+{#if open}
+	<EditorTheme />
+	<div bind:this={diffDivEl} class="{$$props.class} editor" bind:clientWidth={editorWidth} />
+{/if}

package/package/components/DiffEditor.svelte.d.ts

@@ -1,10 +1,8 @@
 import { SvelteComponent } from "svelte";
-import 'monaco-editor/esm/vs/basic-languages/python/python.contribution';
-import 'monaco-editor/esm/vs/basic-languages/go/go.contribution';
-import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution';
-import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
-import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
-import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
+import '@codingame/monaco-vscode-standalone-languages';
+import '@codingame/monaco-vscode-standalone-json-language-features';
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
+import 'vscode/localExtensionHost';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -15,6 +13,7 @@ declare const __propDef: {
         defaultOriginal?: string | undefined;
         defaultModified?: string | undefined;
         readOnly?: boolean | undefined;
+        open?: boolean | undefined;
         setupModel?: ((lang: string, original?: string, modified?: string, modifiedLang?: string) => void) | undefined;
         setOriginal?: ((code: string) => void) | undefined;
         getOriginal?: (() => string) | undefined;

package/package/components/Editor.svelte

@@ -1,21 +1,18 @@
+<!-- <script lang="ts"></script> -->
+
 <script>import { BROWSER } from 'esm-env';
 import { sendUserToast } from '../toast';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import libStdContent from '../es6.d.ts.txt?raw';
+import domContent from '../dom.d.ts.txt?raw';
+import denoFetchContent from '../deno_fetch.d.ts.txt?raw';
+import '@codingame/monaco-vscode-standalone-languages';
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
+import 'vscode/localExtensionHost';
 import * as vscode from 'vscode';
-import { editor as meditor, languages, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor';
-import 'monaco-editor/esm/vs/basic-languages/python/python.contribution';
-import 'monaco-editor/esm/vs/basic-languages/go/go.contribution';
-import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution';
-import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
-import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
-import 'monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution';
-import 'monaco-editor/esm/vs/basic-languages/powershell/powershell.contribution';
-import 'monaco-editor/esm/vs/basic-languages/php/php.contribution';
-import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
-import 'monaco-editor/esm/vs/basic-languages/css/css.contribution';
-// import libStdContent from '../es6.d.ts.txt?raw'
-// import domContent from '../dom.d.ts.txt?raw'
-// import denoFetchContent from '../deno_fetch.d.ts.txt?raw'
+// import '@codingame/monaco-vscode-typescript-basics-default-extension'
+// import '@codingame/monaco-vscode-typescript-language-features-default-extension'
+// import 'vscode/localExtensionHost'
 import processStdContent from '../process.d.ts.txt?raw';
 import windmillFetchContent from '../windmill_fetch.d.ts.txt?raw';
 import { MonacoLanguageClient } from 'monaco-languageclient';
@@ -27,17 +24,18 @@ import { createHash as randomHash, editorConfig, langToExt, updateOptions } from
 import { buildWorkerDefinition } from './build_workers';
 import { workspaceStore } from '../stores';
 import { UserService } from '../gen';
-import { initializeMode } from 'monaco-graphql/esm/initializeMode.js';
+import { initializeVscode } from './vscode';
+// import { initializeMode } from 'monaco-graphql/esm/initializeMode.js'
 import { sleep } from '../utils';
 import { editorCodeCompletion } from './copilot/completion';
-import { initializeVscode } from './vscode';
+import { editor as meditor, languages, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor';
 import EditorTheme from './EditorTheme.svelte';
 import { BIGQUERY_TYPES, MSSQL_TYPES, MYSQL_TYPES, POSTGRES_TYPES, SNOWFLAKE_TYPES } from '../consts';
 import { setupTypeAcquisition } from '../ata/index';
 import { initWasm, parseDeps } from '../infer';
 // import EditorTheme from './EditorTheme.svelte'
 let divEl = null;
-let editor;
+let editor = null;
 export let lang;
 export let code = '';
 export let cmdEnterAction = undefined;
@@ -91,6 +89,7 @@ const uri = lang != 'go' && lang != 'typescript' && lang != 'python'
     : `file:///tmp/monaco/${randomHash()}.${langToExt(lang)}`;
 console.log('uri', uri);
 buildWorkerDefinition('../../../workers', import.meta.url, false);
+// buildWorkerDefinition()
 export function getCode() {
     return editor?.getValue() ?? '';
 }
@@ -283,13 +282,13 @@ function addDBSchemaCompletions() {
         return;
     }
     if (schemaLang === 'graphql') {
-        graphqlService ||= initializeMode();
-        graphqlService?.setSchemaConfig([
-            {
-                uri: 'my-schema.graphql',
-                introspectionJSON: schema
-            }
-        ]);
+        // graphqlService ||= initializeMode()
+        // graphqlService?.setSchemaConfig([
+        // 	{
+        // 		uri: 'my-schema.graphql',
+        // 		introspectionJSON: schema
+        // 	}
+        // ])
     }
     else {
         if (sqlSchemaCompletor) {
@@ -765,7 +764,8 @@ let ata = undefined;
 async function loadMonaco() {
     try {
         console.log("Loading Monaco's language client");
-        await initializeVscode();
+        await initializeVscode('editor');
+        console.log('done loading Monaco and vscode');
     }
     catch (e) {
         console.log('error initializing services', e);
@@ -773,32 +773,6 @@ async function loadMonaco() {
     // console.log('bef ready')
     // console.log('af ready')
     initialized = true;
-    languages.typescript.typescriptDefaults.setCompilerOptions({
-        target: languages.typescript.ScriptTarget.Latest,
-        allowNonTsExtensions: true,
-        noSemanticValidation: false,
-        noSyntaxValidation: false,
-        completionItems: true,
-        hovers: true,
-        documentSymbols: true,
-        definitions: true,
-        references: true,
-        documentHighlights: true,
-        rename: true,
-        diagnostics: true,
-        documentRangeFormattingEdits: true,
-        signatureHelp: true,
-        onTypeFormattingEdits: true,
-        codeActions: true,
-        inlayHints: true,
-        checkJs: true,
-        allowJs: true,
-        noUnusedLocals: true,
-        strict: true,
-        noLib: false,
-        allowImportingTsExtensions: true,
-        moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-    });
     languages.typescript.typescriptDefaults.addExtraLib(processStdContent, 'process.d.ts');
     languages.typescript.javascriptDefaults.setModeConfiguration({
         completionItems: true,
@@ -844,6 +818,32 @@ async function loadMonaco() {
         noSuggestionDiagnostics: false,
         diagnosticCodesToIgnore: [1108]
     });
+    languages.typescript.typescriptDefaults.setCompilerOptions({
+        target: languages.typescript.ScriptTarget.Latest,
+        allowNonTsExtensions: true,
+        noSemanticValidation: false,
+        noSyntaxValidation: false,
+        completionItems: true,
+        hovers: true,
+        documentSymbols: true,
+        definitions: true,
+        references: true,
+        documentHighlights: true,
+        rename: true,
+        diagnostics: true,
+        documentRangeFormattingEdits: true,
+        signatureHelp: true,
+        onTypeFormattingEdits: true,
+        codeActions: true,
+        inlayHints: true,
+        checkJs: true,
+        allowJs: true,
+        noUnusedLocals: true,
+        strict: true,
+        noLib: false,
+        allowImportingTsExtensions: true,
+        moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
+    });
     languages.typescript.javascriptDefaults.setCompilerOptions({
         target: languages.typescript.ScriptTarget.Latest,
         allowNonTsExtensions: true,
@@ -878,9 +878,24 @@ async function loadMonaco() {
         tabSize: lang == 'python' ? 4 : 2,
         folding
     });
+    // const wrapper = new MonacoEditorLanguageClientWrapper()
+    // const userConfig: UserConfig = {
+    // 	wrapperConfig: {
+    // 		editorAppConfig: {
+    // 			$type: 'classic',
+    // 			codeResources: {
+    // 				main: {
+    // 					text: 'console.log("FOO")")',
+    // 					uri: '/workspace/hello.ts'
+    // 				}
+    // 			}
+    // 		}
+    // 	}
+    // }
+    // await wrapper.initAndStart(userConfig, divEl)
     let timeoutModel = undefined;
     let ataModel = undefined;
-    editor.onDidChangeModelContent((event) => {
+    editor?.onDidChangeModelContent((event) => {
         timeoutModel && clearTimeout(timeoutModel);
         timeoutModel = setTimeout(() => {
             let ncode = getCode();
@@ -894,20 +909,20 @@ async function loadMonaco() {
             ata?.(getCode());
         }, 1000);
     });
-    editor.onDidBlurEditorText(() => {
+    editor?.onDidBlurEditorText(() => {
         dispatch('blur');
     });
-    editor.onDidFocusEditorText(() => {
+    editor?.onDidFocusEditorText(() => {
         dispatch('focus');
-        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
+        editor?.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
             code = getCode();
             shouldBindKey && format && format();
         });
-        editor.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, function () {
+        editor?.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, function () {
             code = getCode();
             shouldBindKey && cmdEnterAction && cmdEnterAction();
         });
-        editor.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () {
+        editor?.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () {
             // CMD + slash (toggle comment) on some EU keyboards
             editor?.trigger('keyboard', 'editor.action.commentLine', {});
         });
@@ -941,15 +956,15 @@ async function loadMonaco() {
 async function setTypescriptExtraLibs() {
     if (lang === 'typescript' && scriptLang != 'deno') {
         const hostname = getHostname();
-        // const stdLib = { content: libStdContent, filePath: 'es6.d.ts' }
+        const stdLib = { content: libStdContent, filePath: 'es6.d.ts' };
         if (scriptLang == 'bun' || scriptLang == 'bunnative') {
-            // const processLib = { content: processStdContent, filePath: 'process.d.ts' }
-            // const domLib = { content: domContent, filePath: 'dom.d.ts' }
-            // languages.typescript.typescriptDefaults.setExtraLibs([stdLib, domLib, processLib])
+            const processLib = { content: processStdContent, filePath: 'process.d.ts' };
+            const domLib = { content: domContent, filePath: 'dom.d.ts' };
+            languages.typescript.typescriptDefaults.setExtraLibs([stdLib, domLib, processLib]);
         }
         else {
-            // const denoFetch = { content: denoFetchContent, filePath: 'deno_fetch.d.ts' }
-            // languages.typescript.typescriptDefaults.setExtraLibs([stdLib, denoFetch])
+            const denoFetch = { content: denoFetchContent, filePath: 'deno_fetch.d.ts' };
+            languages.typescript.typescriptDefaults.setExtraLibs([stdLib, denoFetch]);
             let localContent = windmillFetchContent;
             let p = '/tmp/monaco/windmill.d.ts';
             let nuri = mUri.parse(p);

package/package/components/Editor.svelte.d.ts

@@ -1,17 +1,10 @@
 import { SvelteComponent } from "svelte";
-import { editor as meditor } from 'monaco-editor';
-import 'monaco-editor/esm/vs/basic-languages/python/python.contribution';
-import 'monaco-editor/esm/vs/basic-languages/go/go.contribution';
-import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution';
-import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
-import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
-import 'monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution';
-import 'monaco-editor/esm/vs/basic-languages/powershell/powershell.contribution';
-import 'monaco-editor/esm/vs/basic-languages/php/php.contribution';
-import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
-import 'monaco-editor/esm/vs/basic-languages/css/css.contribution';
+import '@codingame/monaco-vscode-standalone-languages';
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
+import 'vscode/localExtensionHost';
 import { type Preview } from '../gen';
 import type { Text } from 'yjs';
+import { editor as meditor } from 'monaco-editor';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/EditorTheme.svelte

@@ -1,7 +1,7 @@
-<script>import { editor as meditor } from 'monaco-editor/esm/vs/editor/editor.api';
+<script>import { isInitialized } from './vscode';
+import { editor as meditor } from 'monaco-editor/esm/vs/editor/editor.api';
 import { onMount } from 'svelte';
 import DarkModeObserver from './DarkModeObserver.svelte';
-import { isInitialized } from './vscode';
 function onThemeChange() {
     if (isInitialized) {
         if (document.documentElement.classList.contains('dark')) {

package/package/components/ScriptEditor.svelte

@@ -277,12 +277,7 @@ function collabUrl() {
 						{fixedOverflowWidgets}
 						{args}
 					/>
-					<DiffEditor
-						bind:this={diffEditor}
-						automaticLayout
-						{fixedOverflowWidgets}
-						class="hidden h-full"
-					/>
+					<DiffEditor bind:this={diffEditor} automaticLayout {fixedOverflowWidgets} />
 				{/key}
 			</div>
 		</Pane>

package/package/components/SimpleEditor.svelte

@@ -6,14 +6,20 @@
 <script>import { BROWSER } from 'esm-env';
 import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 import { editor as meditor, KeyCode, KeyMod, Uri as mUri, languages } from 'monaco-editor';
-import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
-import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution';
-import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
-import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
-import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
-import 'monaco-editor/esm/vs/language/json/monaco.contribution';
-import 'monaco-editor/esm/vs/basic-languages/css/css.contribution';
-import 'monaco-editor/esm/vs/language/css/monaco.contribution';
+// import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'
+// import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'
+// import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
+// import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
+// import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'
+// import 'monaco-editor/esm/vs/language/json/monaco.contribution'
+// import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
+// import 'monaco-editor/esm/vs/language/css/monaco.contribution'
+import '@codingame/monaco-vscode-standalone-languages';
+import '@codingame/monaco-vscode-standalone-json-language-features';
+import '@codingame/monaco-vscode-standalone-css-language-features';
+// import '@codingame/monaco-vscode-standalone-yaml-language-features'
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
+import 'vscode/localExtensionHost';
 import { allClasses } from './apps/editor/componentsPanel/cssUtils';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import libStdContent from '../es6.d.ts.txt?raw';
@@ -43,7 +49,13 @@ export let domLib = false;
 export let autofocus = false;
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.${langToExt(lang)}`;
-buildWorkerDefinition('../../../workers', import.meta.url, false);
+buildWorkerDefinition();
+// monaco.languages.register({
+// 	id: 'json',
+// 	extensions: ['.json', '.jsonc'],
+// 	aliases: ['JSON', 'json'],
+// 	mimetypes: ['application/json']
+// })
 export function getCode() {
     return editor?.getValue() ?? '';
 }
@@ -107,25 +119,25 @@ $: disableTabCond?.set(!code && !!suggestion);
 async function loadMonaco() {
     await initializeVscode();
     initialized = true;
-    languages.typescript.javascriptDefaults.setCompilerOptions({
-        target: languages.typescript.ScriptTarget.Latest,
-        allowNonTsExtensions: true,
-        noSemanticValidation: false,
-        noLib: true,
-        moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-    });
-    languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-        noSemanticValidation: false,
-        noSyntaxValidation: false,
-        noSuggestionDiagnostics: false,
-        diagnosticCodesToIgnore: [1108]
-    });
-    languages.json.jsonDefaults.setDiagnosticsOptions({
-        validate: true,
-        allowComments: false,
-        schemas: [],
-        enableSchemaRequest: true
-    });
+    // languages.typescript.javascriptDefaults.setCompilerOptions({
+    // 	target: languages.typescript.ScriptTarget.Latest,
+    // 	allowNonTsExtensions: true,
+    // 	noSemanticValidation: false,
+    // 	noLib: true,
+    // 	moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
+    // })
+    // languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+    // 	noSemanticValidation: false,
+    // 	noSyntaxValidation: false,
+    // 	noSuggestionDiagnostics: false,
+    // 	diagnosticCodesToIgnore: [1108]
+    // })
+    // languages.json.jsonDefaults.setDiagnosticsOptions({
+    // 	validate: true,
+    // 	allowComments: false,
+    // 	schemas: [],
+    // 	enableSchemaRequest: true
+    // })
     try {
         model = meditor.createModel(code, lang, mUri.parse(uri));
     }

package/package/components/SimpleEditor.svelte.d.ts

@@ -1,13 +1,10 @@
 import { SvelteComponent } from "svelte";
 import { editor as meditor } from 'monaco-editor';
-import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
-import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution';
-import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
-import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
-import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
-import 'monaco-editor/esm/vs/language/json/monaco.contribution';
-import 'monaco-editor/esm/vs/basic-languages/css/css.contribution';
-import 'monaco-editor/esm/vs/language/css/monaco.contribution';
+import '@codingame/monaco-vscode-standalone-languages';
+import '@codingame/monaco-vscode-standalone-json-language-features';
+import '@codingame/monaco-vscode-standalone-css-language-features';
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
+import 'vscode/localExtensionHost';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/TemplateEditor.svelte

@@ -5,9 +5,9 @@ import { editor as meditor, Uri as mUri, languages, Range, KeyMod, KeyCode } fro
 import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte';
 import { writable } from 'svelte/store';
 import { buildWorkerDefinition } from './build_workers';
-import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
-import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
-import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
+import '@codingame/monaco-vscode-standalone-languages';
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
+import 'vscode/localExtensionHost';
 import { initializeVscode } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
 export const conf = {
@@ -359,7 +359,9 @@ let width = 0;
 let initialized = false;
 let jsLoader = undefined;
 async function loadMonaco() {
-    await initializeVscode();
+    console.log('init template');
+    await initializeVscode('templateEditor');
+    console.log('initialized');
     initialized = true;
     languages.typescript.javascriptDefaults.setCompilerOptions({
         target: languages.typescript.ScriptTarget.Latest,

package/package/components/TemplateEditor.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
-import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
-import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
-import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
+import '@codingame/monaco-vscode-standalone-languages';
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
+import 'vscode/localExtensionHost';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/apps/components/display/AppNavbarItem.svelte

@@ -55,7 +55,7 @@ function getButtonProps(resolvedPath) {
                 const hash = url.hash;
                 replaceStateFn?.(`${window.location.pathname}${queryParams}${hash}`);
                 $worldStore.outputsById['ctx'].query.set(Object.fromEntries(new URLSearchParams(queryParams).entries()));
-                $worldStore.outputsById['ctx'].hash.set(url.hash);
+                $worldStore.outputsById['ctx'].hash.set(hash.substring(1));
                 $selected = resolvedPath === extractPathDetails() ? resolvedPath : undefined;
             },
             href: undefined,

package/package/components/apps/editor/AppEditor.svelte

@@ -20,7 +20,7 @@ import ItemPicker from '../../ItemPicker.svelte';
 import VariableEditor from '../../VariableEditor.svelte';
 import { VariableService } from '../../../gen';
 import { initHistory } from '../../../history';
-import { Component, Minus, Paintbrush, Plus } from 'lucide-svelte';
+import { Component, Minus, Paintbrush, Plus, Smartphone } from 'lucide-svelte';
 import { findGridItem, findGridItemParentGrid } from './appUtils';
 import ComponentNavigation from './component/ComponentNavigation.svelte';
 import CssSettings from './componentsPanel/CssSettings.svelte';
@@ -69,7 +69,7 @@ let context = {
     groups: $userStore?.groups,
     username: $userStore?.username,
     query: Object.fromEntries($page.url.searchParams.entries()),
-    hash: $page.url.hash,
+    hash: $page.url.hash.substring(1),
     workspace: $workspaceStore,
     mode: 'editor',
     summary: $summaryStore,
@@ -159,7 +159,10 @@ function hashchange(e) {
     context = context;
 }
 $: context.mode = $mode == 'dnd' ? 'editor' : 'viewer';
-$: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full';
+$: width =
+    $breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false
+        ? 'min-w-[400px] max-w-[656px]'
+        : 'min-w-[710px] w-full';
 let selectedTab = 'insert';
 let befSelected = undefined;
 $: if ($selectedComponent?.[0] != befSelected) {
@@ -537,6 +540,34 @@ let stillInJobEnter = false;
 												<GridEditor {policy} />
 											</div>
 										{/if}
+										{#if !$appStore?.mobileViewOnSmallerScreens && $breakpoint === 'sm'}
+											<div
+												class="absolute inset-0 flex bg-surface center-center z-10000 bg-opacity-60"
+											>
+												<div
+													class="bg-surface shadow-md rounded-md p-4 max-w-sm flex flex-col gap-2"
+												>
+													<div class="text-sm font-semibold"> Mobile View </div>
+													<div class="text-xs">
+														Enabling mobile view allows you to adjust component placement for
+														smaller screens.
+													</div>
+													<Button
+														color="light"
+														variant="border"
+														size="xs"
+														on:click={() => {
+															$appStore.mobileViewOnSmallerScreens = true
+														}}
+														startIcon={{
+															icon: Smartphone
+														}}
+													>
+														Add mobile view on smaller screens
+													</Button>
+												</div>
+											</div>
+										{/if}
 									</div>
 								</div>
 							</Pane>

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -46,6 +46,7 @@ import { getUpdateInput } from '../components/display/dbtable/queries/update';
 import { getDeleteInput } from '../components/display/dbtable/queries/delete';
 import { collectOneOfFields } from './appUtils';
 import Summary from '../../Summary.svelte';
+import ToggleEnable from '../../common/toggleButton-v2/ToggleEnable.svelte';
 async function hash(message) {
     try {
         const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -1162,20 +1163,29 @@ export function openTroubleshootPanel() {
 					/>
 				</ToggleButtonGroup>
 			{/if}
-			<div>
+			<div class="flex flex-row gap-2">
 				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
 					<ToggleButton
-						tooltip="Mobile View"
-						icon={Smartphone}
-						value="sm"
+						tooltip="Computer View"
+						icon={Laptop2}
+						value={'lg'}
 						iconProps={{ size: 16 }}
 					/>
 					<ToggleButton
-						tooltip="Computer View"
-						icon={Laptop2}
-						value="lg"
+						tooltip="Mobile View"
+						icon={Smartphone}
+						value={'sm'}
 						iconProps={{ size: 16 }}
 					/>
+					{#if $breakpoint === 'sm'}
+						<ToggleEnable
+							tooltip="Desktop view is enabled by default. Enable this to customize the layout of the components for the mobile view"
+							label="Enable mobile view for smaller screens"
+							bind:checked={$app.mobileViewOnSmallerScreens}
+							iconProps={{ size: 16 }}
+							iconOnly={false}
+						/>
+					{/if}
 				</ToggleButtonGroup>
 			</div>
 		</div>

package/package/components/apps/editor/AppPreview.svelte

@@ -122,7 +122,10 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
         .flatMap((id) => dfs(app.grid, id, app.subgrids ?? {}))
         .filter((x) => x != undefined);
 }
-$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full min-w-[768px]';
+$: width =
+    $breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false
+        ? 'max-w-[640px]'
+        : 'w-full min-w-[768px]';
 $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
 function onThemeChange() {
     $darkMode = document.documentElement.classList.contains('dark');

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -327,8 +327,9 @@ async function inferSuggestions(code) {
 				{/if}
 
 				<DiffEditor
+					open={false}
 					bind:this={diffEditor}
-					class="hidden h-full"
+					class="h-full"
 					automaticLayout
 					fixedOverflowWidgets
 				/>

package/package/components/apps/types.d.ts

@@ -107,6 +107,7 @@ export type App = {
     subgrids?: Record<string, GridItem[]>;
     theme: AppTheme | undefined;
     hideLegacyTopBar?: boolean | undefined;
+    mobileViewOnSmallerScreens?: boolean | undefined;
 };
 export type ConnectingInput = {
     opened: boolean;

package/package/components/build_workers.d.ts

@@ -1 +1 @@
-export declare function buildWorkerDefinition(workerPath: string, basePath: string, useModuleWorker: boolean): void;
+export declare function buildWorkerDefinition(...args: any[]): void;

package/package/components/build_workers.js

@@ -4,57 +4,152 @@
 // import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker&inline'
 // import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker&inline'
 // import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker&inline'
-import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-export function buildWorkerDefinition(workerPath, basePath, useModuleWorker) {
-    const monWin = self;
-    const workerOverrideGlobals = {
-        basePath: basePath,
-        workerPath: workerPath,
-        workerOptions: {
-            type: useModuleWorker ? 'module' : 'classic'
-        }
-    };
-    if (!monWin.MonacoEnvironment) {
-        monWin.MonacoEnvironment = {
-            workerOverrideGlobals: workerOverrideGlobals,
-            createTrustedTypesPolicy: (_policyName) => {
-                return undefined;
-            }
-        };
-    }
-    const monEnv = monWin.MonacoEnvironment;
-    monEnv.workerOverrideGlobals = workerOverrideGlobals;
-    const getWorker = (_, label) => {
-        console.log('getWorker: workerId: ' + _ + ' label: ' + label);
-        switch (label) {
-            case 'template':
-            case 'typescript':
-            case 'javascript':
-                return new tsWorker();
-            case 'html':
-            case 'handlebars':
-            case 'razor':
-                return new htmlWorker();
-            case 'css':
-            case 'scss':
-            case 'less':
-                return new cssWorker();
-            case 'json':
-                return new jsonWorker();
-            case 'graphql':
-                const workerFilename = `graphql.worker.bundle.js`;
-                const workerPathLocal = `${workerOverrideGlobals.workerPath}/${workerFilename}`;
-                const workerUrl = new URL(workerPathLocal, workerOverrideGlobals.basePath);
-                return new Worker(workerUrl.href, {
-                    name: label
+// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+// import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+// import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+// import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+// import type { Environment } from 'monaco-editor/esm/vs/editor/editor.api.js'
+// interface MonacoEnvironmentEnhanced extends Environment {
+// 	workerOverrideGlobals: WorkerOverrideGlobals
+// }
+// type WorkerOverrideGlobals = {
+// 	basePath: string
+// 	workerPath: string
+// 	workerOptions: WorkerOptions
+// }
+// export function buildWorkerDefinition(
+// 	workerPath: string,
+// 	basePath: string,
+// 	useModuleWorker: boolean
+// ) {
+// 	const monWin = self as Window
+// 	const workerOverrideGlobals: WorkerOverrideGlobals = {
+// 		basePath: basePath,
+// 		workerPath: workerPath,
+// 		workerOptions: {
+// 			type: useModuleWorker ? 'module' : 'classic'
+// 		}
+// 	}
+// 	if (!monWin.MonacoEnvironment) {
+// 		monWin.MonacoEnvironment = {
+// 			workerOverrideGlobals: workerOverrideGlobals,
+// 			createTrustedTypesPolicy: (_policyName: string) => {
+// 				return undefined
+// 			}
+// 		} as MonacoEnvironmentEnhanced
+// 	}
+// 	const monEnv = monWin.MonacoEnvironment as MonacoEnvironmentEnhanced
+// 	monEnv.workerOverrideGlobals = workerOverrideGlobals
+// 	const getWorker = (_: string, label: string) => {
+// 		console.log('getWorker: workerId: ' + _ + ' label: ' + label)
+// 		switch (label) {
+// 			case 'template':
+// 			case 'typescript':
+// 			case 'javascript':
+// 				return new tsWorker()
+// 			case 'html':
+// 			case 'handlebars':
+// 			case 'razor':
+// 				return new htmlWorker()
+// 			case 'css':
+// 			case 'scss':
+// 			case 'less':
+// 				return new cssWorker()
+// 			case 'json':
+// 				return new jsonWorker()
+// 			case 'graphql':
+// 				const workerFilename = `graphql.worker.bundle.js`
+// 				const workerPathLocal = `${workerOverrideGlobals.workerPath}/${workerFilename}`
+// 				const workerUrl = new URL(workerPathLocal, workerOverrideGlobals.basePath)
+// 				return new Worker(workerUrl.href, {
+// 					name: label
+// 				})
+// 			default:
+// 				return new editorWorker()
+// 		}
+// 	}
+// 	monWin.MonacoEnvironment.getWorker = getWorker
+// }
+// //
+// export type WorkerLoader = () => Worker
+// const workerLoaders: Partial<Record<string, WorkerLoader>> = {
+// 	editorWorkerService: () =>
+// 		new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), {
+// 			type: 'module'
+// 		}),
+// 	textMateWorker: () =>
+// 		new Worker(
+// 			new URL('@codingame/monaco-vscode-textmate-service-override/worker', import.meta.url),
+// 			{ type: 'module' }
+// 		),
+// 	languageDetectionWorkerService: () =>
+// 		new Worker(
+// 			new URL(
+// 				'@codingame/monaco-vscode-language-detection-worker-service-override/worker',
+// 				import.meta.url
+// 			),
+// 			{ type: 'module' }
+// 		)
+// }
+// export function registerWorkerLoader(label: string, workerLoader: WorkerLoader): void {
+// 	workerLoaders[label] = workerLoader
+// }
+// export function buildWorkerDefinition() {
+// 	// Do not use monaco-editor-webpack-plugin because it doesn't handle properly cross origin workers
+// 	window.MonacoEnvironment = {
+// 		getWorker: function (moduleId, label) {
+// 			console.log('LOAD')
+// 			const workerFactory = workerLoaders[label]
+// 			if (workerFactory != null) {
+// 				return workerFactory()
+// 			}
+// 			throw new Error(`Unimplemented worker ${label} (${moduleId})`)
+// 		}
+// 	}
+// }
+import { graphql } from 'graphql';
+import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory';
+export function buildWorkerDefinition(...args) {
+    useWorkerFactory({
+        ignoreMapping: true,
+        workerLoaders: {
+            editorWorkerService: () => {
+                console.log('editorWorkerService');
+                return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), {
+                    type: 'module'
+                });
+            },
+            javascript: () => {
+                console.log('javascript');
+                return new Worker(new URL('monaco-editor-wrapper/workers/module/ts', import.meta.url), {
+                    type: 'module'
+                });
+            },
+            typescript: () => {
+                console.log('typescript');
+                return new Worker(new URL('monaco-editor-wrapper/workers/module/ts', import.meta.url), {
+                    type: 'module'
                 });
-            default:
-                return new editorWorker();
+            },
+            json: () => {
+                console.log('json');
+                return new Worker(new URL('monaco-editor-wrapper/workers/module/json', import.meta.url), {
+                    type: 'module'
+                });
+            },
+            html: () => {
+                console.log('html');
+                return new Worker(new URL('monaco-editor-wrapper/workers/module/html', import.meta.url), {
+                    type: 'module'
+                });
+            },
+            css: () => {
+                console.log('html');
+                return new Worker(new URL('monaco-editor-wrapper/workers/module/css', import.meta.url), {
+                    type: 'module'
+                });
+            }
         }
-    };
-    monWin.MonacoEnvironment.getWorker = getWorker;
+    });
 }

package/package/components/common/toggleButton-v2/ToggleEnable.svelte

@@ -0,0 +1,34 @@
+<script>import { Tab } from '@rgossiaux/svelte-headlessui';
+import { twMerge } from 'tailwind-merge';
+import Toggle from '../../Toggle.svelte';
+export let label = undefined;
+export let tooltip = undefined;
+export let disabled = false;
+export let small = false;
+export let light = false;
+export let checked = false;
+export let id = undefined;
+</script>
+
+<div {id} class="flex">
+	<Tab
+		{disabled}
+		class={twMerge(
+			' rounded-md transition-all text-xs flex gap-1 flex-row items-center',
+			small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1',
+			light ? 'font-medium' : '',
+			'bg-surface-secondary ',
+			$$props.class
+		)}
+	>
+		<Toggle
+			size="xs"
+			options={{
+				right: label,
+				rightTooltip: tooltip
+			}}
+			textClass="text-2xs whitespace-nowrap white !w-full"
+			bind:checked
+		/>
+	</Tab>
+</div>

package/package/components/common/toggleButton-v2/ToggleEnable.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        label?: string | undefined;
+        tooltip?: string | undefined;
+        disabled?: boolean | undefined;
+        small?: boolean | undefined;
+        light?: boolean | undefined;
+        checked?: boolean | undefined;
+        id?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToggleEnableProps = typeof __propDef.props;
+export type ToggleEnableEvents = typeof __propDef.events;
+export type ToggleEnableSlots = typeof __propDef.slots;
+export default class ToggleEnable extends SvelteComponent<ToggleEnableProps, ToggleEnableEvents, ToggleEnableSlots> {
+}
+export {};

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -284,10 +284,11 @@ function setFlowInput(argName) {
 										)}
 									/>
 									<DiffEditor
+										open={false}
 										bind:this={diffEditor}
 										automaticLayout
 										fixedOverflowWidgets
-										class="hidden h-full"
+										class="h-full"
 									/>
 								{/key}
 							{/if}

package/package/components/flows/content/FlowModuleScript.svelte

@@ -61,6 +61,7 @@ export let showDiff = false;
 		{#if showDiff}
 			{#key previousCode + code}
 				<DiffEditor
+					open={true}
 					class="h-screen"
 					readOnly
 					automaticLayout

package/package/components/flows/idUtils.js

@@ -9,7 +9,8 @@ export const forbiddenIds = [
     'for',
     'delete',
     'while',
-    'new'
+    'new',
+    'in'
 ];
 export function numberToChars(n) {
     if (n < 0) {

package/package/components/vscode.d.ts

@@ -1,3 +1,4 @@
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
 export declare let isInitialized: boolean;
 export declare let isInitializing: boolean;
-export declare function initializeVscode(): Promise<void>;
+export declare function initializeVscode(caller?: string): Promise<void>;

package/package/components/vscode.js

@@ -1,18 +1,30 @@
-import { initServices } from 'monaco-languageclient';
-import { LogLevel } from 'vscode/services';
+import { initServices } from 'monaco-languageclient/vscode/services';
+// import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override'
+// import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override'
+import getMonarchServiceOverride from '@codingame/monaco-vscode-monarch-service-override';
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
 import { editor as meditor } from 'monaco-editor/esm/vs/editor/editor.api';
+import { is } from 'date-fns/locale';
 export let isInitialized = false;
 export let isInitializing = false;
-export async function initializeVscode() {
-    if (!isInitialized) {
+export async function initializeVscode(caller) {
+    if (!isInitialized && !isInitializing) {
+        console.log(`Initializing vscode-api from ${caller ?? 'unknown'}`);
         isInitializing = true;
-        isInitialized = true;
         try {
             // init vscode-api
             await initServices({
-                debugLogging: true,
-                logLevel: LogLevel.Info
+                serviceConfig: {
+                    userServices: {
+                        // ...getThemeServiceOverride(),
+                        // ...getTextmateServiceOverride()
+                        ...getMonarchServiceOverride()
+                    },
+                    debugLogging: true,
+                    enableExtHostWorker: true
+                }
             });
+            isInitialized = true;
             meditor.defineTheme('nord', {
                 base: 'vs-dark',
                 inherit: true,
@@ -123,13 +135,15 @@ export async function initializeVscode() {
             }
         }
         catch (e) {
+            console.error('Failed to initialize monaco services', e);
         }
         finally {
+            isInitialized = true;
             isInitializing = false;
         }
     }
     else {
-        while (isInitializing) {
+        while (isInitializing && !isInitialized) {
             console.log('Waiting for initialization of monaco services');
             await new Promise((resolve) => setTimeout(resolve, 100));
         }

package/package/editorUtils.d.ts

@@ -1,3 +1,4 @@
+import { ShowLightbulbIconMode } from 'vscode/vscode/vs/editor/common/config/editorOptions';
 export declare function editorConfig(code: string, lang: string, automaticLayout: boolean, fixedOverflowWidgets: boolean): {
     value: string;
     language: string;
@@ -15,7 +16,7 @@ export declare function editorConfig(code: string, lang: string, automaticLayout
         enabled: boolean;
     };
     lightbulb: {
-        enabled: boolean;
+        enabled: ShowLightbulbIconMode;
     };
     suggest: {
         showKeywords: boolean;
@@ -23,6 +24,10 @@ export declare function editorConfig(code: string, lang: string, automaticLayout
     bracketPairColorization: {
         enabled: boolean;
     };
+    'workbench.colorTheme': string;
+    workbench: {
+        colorTheme: string;
+    };
     'bracketPairColorization.enabled': boolean;
     matchBrackets: "always";
 };

package/package/editorUtils.js

@@ -1,4 +1,5 @@
 import { languages } from 'monaco-editor/esm/vs/editor/editor.api';
+import { ShowLightbulbIconMode } from 'vscode/vscode/vs/editor/common/config/editorOptions';
 export function editorConfig(code, lang, automaticLayout, fixedOverflowWidgets) {
     return {
         value: code,
@@ -16,7 +17,7 @@ export function editorConfig(code, lang, automaticLayout, fixedOverflowWidgets)
             enabled: false
         },
         lightbulb: {
-            enabled: true
+            enabled: ShowLightbulbIconMode.On
         },
         suggest: {
             showKeywords: true
@@ -24,6 +25,10 @@ export function editorConfig(code, lang, automaticLayout, fixedOverflowWidgets)
         bracketPairColorization: {
             enabled: true
         },
+        'workbench.colorTheme': 'Default Dark Modern',
+        workbench: {
+            colorTheme: 'Default Dark Modern'
+        },
         'bracketPairColorization.enabled': true,
         matchBrackets: 'always'
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.382.7",
+	"version": "1.383.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -17,6 +17,7 @@
 		"filter-classes": "node filterTailwindClasses.js"
 	},
 	"devDependencies": {
+		"@windmill-labs/esbuild-import-meta-url-plugin": "0.0.0-semantic-release",
 		"@floating-ui/core": "^1.3.1",
 		"@hey-api/openapi-ts": "^0.43.0",
 		"@playwright/test": "^1.34.3",
@@ -72,25 +73,22 @@
 		"@rgossiaux/svelte-headlessui": {
 			"svelte": "$svelte"
 		},
-		"ag-grid-svelte": {
-			"svelte": "$svelte"
-		},
 		"svelte-chartjs": {
 			"svelte": "$svelte"
-		},
-		"svelte-timezone-picker": {
-			"svelte": "$svelte"
-		},
-		"monaco-editor": "$monaco-editor",
-		"vscode": "$vscode"
-	},
-	"resolutions": {
-		"monaco-editor": "npm:@codingame/monaco-editor-treemended@>=1.83.5 <1.84.0",
-		"vscode": "npm:@codingame/monaco-vscode-api@>=1.83.5 <1.84.0"
+		}
 	},
 	"type": "module",
 	"dependencies": {
 		"@aws-crypto/sha256-js": "^4.0.0",
+		"@codingame/monaco-vscode-configuration-service-override": "~8.0.2",
+		"@codingame/monaco-vscode-files-service-override": "~8.0.2",
+		"@codingame/monaco-vscode-keybindings-service-override": "~8.0.2",
+		"@codingame/monaco-vscode-lifecycle-service-override": "~8.0.2",
+		"@codingame/monaco-vscode-localization-service-override": "~8.0.2",
+		"@codingame/monaco-vscode-standalone-json-language-features": "~8.0.2",
+		"@codingame/monaco-vscode-standalone-languages": "~8.0.2",
+		"@codingame/monaco-vscode-standalone-css-language-features": "~8.0.2",
+		"@codingame/monaco-vscode-standalone-typescript-language-features": "~8.0.2",
 		"@json2csv/plainjs": "^7.0.6",
 		"@leeoniya/ufuzzy": "^1.0.8",
 		"@popperjs/core": "^2.11.6",
@@ -117,9 +115,10 @@
 		"highlight.js": "^11.8.0",
 		"lucide-svelte": "^0.293.0",
 		"minimatch": "^10.0.1",
-		"monaco-editor": "npm:@codingame/monaco-editor-treemended@>=1.83.5 <1.84.0",
-		"monaco-graphql": "^1.5.1",
-		"monaco-languageclient": "~7.0.1",
+		"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~8.0.2",
+		"monaco-editor-wrapper": "^5.5.2",
+		"monaco-graphql": "^1.6.0",
+		"monaco-languageclient": "~8.8.2",
 		"ol": "^7.4.0",
 		"openai": "^4.47.1",
 		"p-limit": "^6.1.0",
@@ -132,10 +131,10 @@
 		"svelte-infinite-loading": "^1.3.8",
 		"svelte-tiny-virtual-list": "^2.0.5",
 		"tailwind-merge": "^1.13.2",
-		"vscode": "npm:@codingame/monaco-vscode-api@>=1.83.5 <1.84.0",
+		"vscode": "npm:@codingame/monaco-vscode-api@~8.0.2",
 		"vscode-languageclient": "~9.0.1",
 		"vscode-uri": "~3.0.8",
-		"vscode-ws-jsonrpc": "~3.1.0",
+		"vscode-ws-jsonrpc": "~3.3.2",
 		"windmill-parser-wasm": "^1.367.2",
 		"windmill-sql-datatype-parser-wasm": "^1.318.0",
 		"y-monaco": "^0.1.4",