windmill-components 1.382.3 → 1.383.1

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/FlowViewer.svelte

@@ -1,28 +1,16 @@
-<script>import Highlight from 'svelte-highlight';
-import json from 'svelte-highlight/languages/json';
-import { Tab, Tabs, TabContent, Button } from './common';
+<script>import { Tab, Tabs, TabContent } from './common';
 import SchemaViewer from './SchemaViewer.svelte';
 import FieldHeader from './FieldHeader.svelte';
-import { copyToClipboard } from '../utils';
 import FlowGraphViewer from './FlowGraphViewer.svelte';
-import { Clipboard } from 'lucide-svelte';
-import YAML from 'yaml';
-import { yaml } from 'svelte-highlight/languages';
 import HighlightTheme from './HighlightTheme.svelte';
+import FlowViewerInner from './FlowViewerInner.svelte';
 export let flow;
 export let initialOpen = undefined;
 export let noSide = false;
-$: flowFiltered = {
-    summary: flow.summary,
-    description: flow.description,
-    value: flow.value,
-    schema: flow.schema
-};
 export let noGraph = false;
 export let tab = noGraph ? 'schema' : 'ui';
 export let noSummary = false;
 export let noGraphDownload = false;
-let rawType = 'yaml';
 let open = {};
 if (initialOpen) {
     open[initialOpen] = true;
@@ -77,37 +65,8 @@ function toAny(x) {
 				<FlowGraphViewer download={!noGraphDownload} {noSide} {flow} overflowAuto />
 			</div>
 		</TabContent>
-		<TabContent value="raw"
-			><Tabs bind:selected={rawType} wrapperClass="mt-4">
-				<Tab value="yaml">YAML</Tab>
-				<Tab value="json">JSON</Tab>
-				<svelte:fragment slot="content">
-					<div class="relative pt-2">
-						<Button
-							on:click={() =>
-								copyToClipboard(
-									rawType === 'yaml'
-										? YAML.stringify(flowFiltered)
-										: JSON.stringify(flowFiltered, null, 4)
-								)}
-							color="light"
-							variant="border"
-							size="xs"
-							startIcon={{ icon: Clipboard }}
-							btnClasses="absolute top-2 right-2 w-min"
-						>
-							Copy content
-						</Button>
-						<Highlight
-							class="overflow-auto px-1"
-							language={rawType === 'yaml' ? yaml : json}
-							code={rawType === 'yaml'
-								? YAML.stringify(flowFiltered)
-								: JSON.stringify(flowFiltered, null, 4)}
-						/>
-					</div>
-				</svelte:fragment>
-			</Tabs>
+		<TabContent value="raw">
+			<FlowViewerInner {flow} />
 		</TabContent>
 		<TabContent value="schema">
 			<div class="my-4" />

package/package/components/FlowViewerInner.svelte

@@ -0,0 +1,109 @@
+<script>import Highlight from 'svelte-highlight';
+import json from 'svelte-highlight/languages/json';
+import { Tab, Tabs, Button } from './common';
+import { copyToClipboard } from '../utils';
+import { ArrowDown, Clipboard } from 'lucide-svelte';
+import YAML from 'yaml';
+import { yaml } from 'svelte-highlight/languages';
+import HighlightTheme from './HighlightTheme.svelte';
+export let flow;
+$: flowFiltered = {
+    summary: flow.summary,
+    description: flow.description,
+    value: flow.value,
+    schema: flow.schema
+};
+let rawType = 'yaml';
+function trimStringToLines(inputString, maxLines = 100) {
+    const lines = inputString?.split('\n') ?? [];
+    const linesToKeep = lines.slice(0, maxLines);
+    return linesToKeep.join('\n');
+}
+let code = '';
+function computeCode() {
+    const str = rawType === 'json' ? JSON.stringify(flowFiltered, null, 4) : YAML.stringify(flowFiltered);
+    const numberOfLines = str.split('\n').length;
+    if (numberOfLines > maxLines) {
+        shouldDisplayLoadMore = true;
+    }
+    code = str;
+}
+let shouldDisplayLoadMore = false;
+$: flowFiltered && rawType && computeCode();
+let maxLines = 100;
+</script>
+
+<HighlightTheme />
+
+<div>
+	<Tabs
+		bind:selected={rawType}
+		on:selected={() => {
+			maxLines = 100
+		}}
+	>
+		<Tab value="yaml">YAML</Tab>
+		<Tab value="json">JSON</Tab>
+		<svelte:fragment slot="content">
+			<div class="relative pt-2">
+				<Button
+					on:click={() =>
+						copyToClipboard(
+							rawType === 'yaml'
+								? YAML.stringify(flowFiltered)
+								: JSON.stringify(flowFiltered, null, 4)
+						)}
+					color="light"
+					variant="border"
+					size="xs"
+					startIcon={{ icon: Clipboard }}
+					btnClasses="absolute top-2 right-2 w-min"
+				>
+					Copy content
+				</Button>
+
+				<div class={shouldDisplayLoadMore ? 'code-container' : ''}>
+					<Highlight
+						class="overflow-auto px-1"
+						language={rawType === 'yaml' ? yaml : json}
+						code={trimStringToLines(code, maxLines)}
+					/>
+				</div>
+				{#if shouldDisplayLoadMore}
+					<Button
+						on:click={() => {
+							maxLines += 500
+
+							// If the code is less than the max lines, we don't need to show the button
+							if (maxLines >= code?.split('\n').length) {
+								shouldDisplayLoadMore = false
+							}
+						}}
+						color="light"
+						size="xs"
+						btnClasses="mb-2 mx-2"
+						startIcon={{ icon: ArrowDown }}
+					>
+						Show more
+					</Button>
+				{/if}
+			</div>
+		</svelte:fragment>
+	</Tabs>
+</div>
+
+<style>
+	.code-container {
+		position: relative;
+		overflow: hidden;
+	}
+	.code-container::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 100px;
+		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(var(--color-surface)));
+		pointer-events: none;
+	}</style>

package/package/components/FlowViewerInner.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { FlowValue } from '../gen';
+declare const __propDef: {
+    props: {
+        flow: {
+            summary: string;
+            description?: string;
+            value: FlowValue;
+            schema?: any;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowViewerInnerProps = typeof __propDef.props;
+export type FlowViewerInnerEvents = typeof __propDef.events;
+export type FlowViewerInnerSlots = typeof __propDef.slots;
+export default class FlowViewerInner extends SvelteComponent<FlowViewerInnerProps, FlowViewerInnerEvents, FlowViewerInnerSlots> {
+}
+export {};

package/package/components/ScriptBuilder.svelte

@@ -38,16 +38,18 @@ export let template = 'script';
 export let initialArgs = {};
 export let lockedLanguage = false;
 export let showMeta = false;
+export let neverShowMeta = false;
 export let diffDrawer = undefined;
 export let savedScript = undefined;
 export let searchParams = new URLSearchParams();
 export let disableHistoryChange = false;
 export let replaceStateFn = (url) => window.history.replaceState(null, '', url);
 export let customUi = {};
-let metadataOpen = showMeta ||
-    (initialPath == '' &&
-        searchParams.get('state') == undefined &&
-        searchParams.get('collab') == undefined);
+let metadataOpen = !neverShowMeta &&
+    (showMeta ||
+        (initialPath == '' &&
+            searchParams.get('state') == undefined &&
+            searchParams.get('collab') == undefined));
 let editor = undefined;
 let scriptEditor = undefined;
 let scheduleStore = writable({

package/package/components/ScriptBuilder.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         initialArgs?: Record<string, any> | undefined;
         lockedLanguage?: boolean | undefined;
         showMeta?: boolean | undefined;
+        neverShowMeta?: boolean | undefined;
         diffDrawer?: DiffDrawer | undefined;
         savedScript?: NewScriptWithDraft | undefined;
         searchParams?: URLSearchParams | undefined;

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>