windmill-components 1.56.1 → 1.56.5

package/assets/app.css

@@ -0,0 +1,54 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	@font-face {
+		font-family: 'Inter';
+		src: url('/Inter-Variable.ttf');
+		font-weight: 100 900;
+		font-display: swap;
+	}
+
+	.splitpanes--vertical > .splitpanes__pane {
+		transition: none !important;
+	}
+
+	.splitpanes--horizontal > .splitpanes__pane {
+		transition: none !important;
+	}
+
+	.monaco-workbench > .notifications-toasts.visible {
+		display: none !important;
+	}
+
+	.nowrap pre code.hljs {
+		whitespace: normal !important;
+	}
+
+	svelte-virtual-list-row {
+		overflow: visible !important;
+	}
+
+	svelte-virtual-list-contents > * + * {
+		border-top-width: 1px !important;
+		border-bottom-width: 0px !important;
+	}
+
+	.monaco-editor textarea:focus {
+		box-shadow: none !important;
+	}
+
+	.templatable-editor span.mtk20 {
+		color: black !important;
+	}
+}
+
+@layer components {
+	/* Flow graph viewer -> Svelvet library internal class overwrite */
+	.Node {
+		display: flex !important;
+		cursor: pointer !important;
+	}
+}

package/components/CenteredModal.svelte

@@ -1,36 +1,38 @@
 <script>import { SettingsService } from '../gen';
+import { onMount } from 'svelte';
 import WindmillIcon from './icons/WindmillIcon.svelte';
 export let subtitle = undefined;
 export let title = 'Windmill';
+export let disableLogo = false;
 let version = '';
-SettingsService.backendVersion().then((x) => {
-    version = x;
+onMount(async () => {
+    version = await SettingsService.backendVersion();
 });
 </script>
 
-<div class="flex justify-center min-h-screen pt-10 relative bg-[#3b4252]">
-	<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:4/12 m-auto z-10">
-		<div class="border rounded-md py-4 px-16 shadow-md bg-gray-50">
-			<h1 class="justify-center text-center font-medium pb-4">
+<div class="center-center min-h-screen p-4 relative bg-[#3b4252]">
+	<div class="border rounded-md shadow-md bg-white w-full max-w-[640px] 
+	p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10">
+		<div class="mb-10">
+			<h1 class="text-center">
 				{title}
 			</h1>
 			{#if subtitle}
-				<p class="justify-center text-center font-medium pb-2 text-xs">
+				<p class="text-sm text-center text-gray-600 mt-2">
 					{subtitle}
 				</p>
 			{/if}
-			<slot />
 		</div>
-
-		<!-- empty row to make the form a little bit above vertical centering-->
-		<div class="py-12" />
+		<slot />
 	</div>
-	<div class="hidden lg:block absolute top-10 right-50">
-		<div class="animate-[spin_100s_linear_infinite] ">
-			<WindmillIcon white height="100px" width="100px" />
+	{#if !disableLogo}
+		<div class="hidden lg:block absolute top-10 right-50">
+			<div class="animate-[spin_100s_linear_infinite] ">
+				<WindmillIcon white height="100px" width="100px" />
+			</div>
+			<h2 class="text-center pt-2 text-gray-100">Windmill</h2>
 		</div>
-		<h2 class="text-center pt-2 text-gray-100">Windmill</h2>
-	</div>
+	{/if}
 	<div class="absolute top-0 right-0 text-2xs text-gray-300 italic px-3 py-1">
 		<span class="font-mono">{version}</span>
 	</div>

package/components/CenteredModal.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         subtitle?: string | undefined;
         title?: string | undefined;
+        disableLogo?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Dropdown.svelte

@@ -1,17 +1,18 @@
 <script>import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons';
+import { MoreHorizontal } from 'lucide-svelte';
 import { Button, Menu } from './common';
 export let dropdownItems;
 export let name = undefined;
 export let placement = 'bottom-start';
+export let btnClasses = '!text-blue-500 bg-transparent';
 const dispatch = createEventDispatcher();
 </script>
 
 <Menu {placement} let:close>
-	<Button color="light" size="xs" btnClasses="!text-blue-500 bg-transparent" slot="trigger">
+	<Button nonCaptureEvent color="light" size="xs" {btnClasses} slot="trigger">
 		{#if !$$slots.default}
-			<Icon data={faEllipsisH} scale={1.2} />
+			<MoreHorizontal size={20} />
 		{:else}
 			<slot />
 		{/if}

package/components/Dropdown.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         dropdownItems: DropdownItem[];
         name?: string | undefined;
         placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
+        btnClasses?: string | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/components/Editor.svelte

@@ -1,26 +1,7 @@
-<script context="module">import * as monaco from 'monaco-editor';
-monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-    target: monaco.languages.typescript.ScriptTarget.Latest,
-    allowNonTsExtensions: true,
-    noLib: true
-});
-monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-    noSemanticValidation: true,
-    noSuggestionDiagnostics: true,
-    noSyntaxValidation: true
-});
-monaco.editor.defineTheme('myTheme', {
-    base: 'vs',
-    inherit: true,
-    rules: [],
-    colors: {
-        'editorLineNumber.foreground': '#999',
-        'editorGutter.background': '#F9FAFB'
-    }
-});
-monaco.editor.setTheme('myTheme');
+<script context="module">import getMessageServiceOverride from 'vscode/service-override/messages';
+import { StandaloneServices } from 'vscode/services';
 try {
-    StandaloneServices.initialize({
+    StandaloneServices?.initialize({
         ...getMessageServiceOverride(document.body)
     });
 }
@@ -29,18 +10,37 @@ catch (e) {
 }
 </script>
 
-<script>import { browser, dev } from '$app/env';
+<script>import { browser, dev } from '$app/environment';
 import { page } from '$app/stores';
 import { sendUserToast } from '../utils';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import { buildWorkerDefinition } from 'monaco-editor-workers';
-import getMessageServiceOverride from 'vscode/service-override/messages';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { languages, editor as meditor, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor';
+languages.typescript.typescriptDefaults.setCompilerOptions({
+    target: languages.typescript.ScriptTarget.Latest,
+    allowNonTsExtensions: true,
+    noLib: true
+});
+languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: true,
+    noSuggestionDiagnostics: true,
+    noSyntaxValidation: true
+});
+meditor.defineTheme('myTheme', {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+        'editorLineNumber.foreground': '#999',
+        'editorGutter.background': '#F9FAFB'
+    }
+});
+meditor.setTheme('myTheme');
 import { BASH_INIT_CODE, DENO_INIT_CODE_CLEAR, GO_INIT_CODE, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
 import { createHash as randomHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
-import { StandaloneServices } from 'vscode/services';
 let divEl = null;
 let editor;
 export let lang;
@@ -352,25 +352,25 @@ async function closeWebsockets() {
     websocketInterval && clearInterval(websocketInterval);
 }
 async function loadMonaco() {
-    const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
+    const model = meditor.createModel(code, lang, mUri.parse(uri));
     model.updateOptions(updateOptions);
-    editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
+    editor = meditor.create(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         $dirtyStore = true;
         timeoutModel && clearTimeout(timeoutModel);
         timeoutModel = setTimeout(() => {
             code = getCode();
-            dispatch('change');
+            dispatch('change', code);
         }, 500);
     });
     editor.onDidFocusEditorText(() => {
         dispatch('focus');
-        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
             code = getCode();
             shouldBindKey && format && format();
         });
-        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, function () {
             code = getCode();
             shouldBindKey && cmdEnterAction && cmdEnterAction();
         });

package/components/Editor.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import * as monaco from 'monaco-editor';
+import { editor as meditor } from 'monaco-editor';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -24,7 +24,7 @@ declare const __propDef: {
         setCode?: ((ncode: string) => void) | undefined;
         clearContent?: (() => Promise<void>) | undefined;
         reloadWebsocket?: (() => Promise<void>) | undefined;
-        addAction?: ((id: string, label: string, callback: (editor: monaco.editor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
+        addAction?: ((id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -46,6 +46,6 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get setCode(): (ncode: string) => void;
     get clearContent(): () => Promise<void>;
     get reloadWebsocket(): () => Promise<void>;
-    get addAction(): (id: string, label: string, callback: (editor: monaco.editor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;
+    get addAction(): (id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;
 }
 export {};

package/components/FlowPreviewContent.svelte

@@ -16,7 +16,7 @@ export let previewMode;
 export let open;
 export let jobId = undefined;
 export let job = undefined;
-let isValid = false;
+let isValid = true;
 let isRunning = false;
 let jobProgressReset;
 const { selectedId, previewArgs } = getContext('FlowEditorContext');
@@ -50,7 +50,7 @@ function extractFlow(previewMode) {
     }
     else {
         const flow = JSON.parse(JSON.stringify($flowStore));
-        const idOrders = dfs(flow.value.modules);
+        const idOrders = dfs(flow.value.modules, (x) => x.id);
         let upToIndex = idOrders.indexOf($selectedId);
         if (upToIndex != -1) {
             flow.value.modules = sliceModules(flow.value.modules, upToIndex, idOrders);

package/components/InputTransformForm.svelte

@@ -8,6 +8,7 @@ import { Button, ToggleButton, ToggleButtonGroup } from './common';
 import { faCode } from '@fortawesome/free-solid-svg-icons';
 import TemplateEditor from './TemplateEditor.svelte';
 import Tooltip from './Tooltip.svelte';
+import { setInputCat as computeInputCat } from '../utils';
 export let schema;
 export let arg;
 export let argName;
@@ -17,10 +18,11 @@ export let previousModuleId;
 export let pickForField = undefined;
 export let variableEditor = undefined;
 export let itemPicker = undefined;
+export let noDynamicToggle = false;
 let monaco = undefined;
 let monacoTemplate = undefined;
 let argInput = undefined;
-let inputCat = 'object';
+let inputCat = computeInputCat(schema.properties[argName].type, schema.properties[argName].format, schema.properties[argName].items?.type, schema.properties[argName].enum, schema.properties[argName].contentEncoding);
 let propertyType = getPropertyType(arg);
 function getPropertyType(arg) {
     let type = arg?.type ?? 'static';
@@ -89,7 +91,7 @@ function onFocus() {
     }
 }
 const { focusProp, propPickerConfig } = getContext('PropPickerWrapper');
-$: isStaticTemplate(inputCat) && propertyType == 'static' && setPropertyType(arg.value);
+$: isStaticTemplate(inputCat) && propertyType == 'static' && setPropertyType(arg?.value);
 const openBracket = '${';
 const closeBracket = '}';
 </script>
@@ -117,21 +119,8 @@ const closeBracket = '}';
 				</span>
 			{/if}
 		</div>
-		<div class="flex flex-row-reverse gap-x-4 gap-y-1 flex-wrap">
-			<div>
-				<Button
-					variant="contained"
-					color="blue"
-					size="xs"
-					on:click={() => {
-						focusProp(argName, 'connect', (path) => {
-							connectProperty(path)
-							return true
-						})
-					}}>Connect &rightarrow;</Button
-				>
-			</div>
-			<div>
+		{#if !noDynamicToggle}
+			<div class="flex flex-row gap-x-4 gap-y-1 flex-wrap">
 				<ToggleButtonGroup
 					bind:selected={propertyType}
 					on:selected={(e) => {
@@ -142,24 +131,29 @@ const closeBracket = '}';
 									argName,
 									previousModuleId,
 									staticTemplate
-										? `\`${arg.value ?? ''}\``
+										? `\`${arg?.value ?? ''}\``
 										: arg.value
-										? JSON.stringify(arg.value, null, 4)
+										? JSON.stringify(arg?.value, null, 4)
 										: ''
 								)
 							}
-
-							arg.value = undefined
+							if (arg) {
+								arg.value = undefined
+							}
 							propertyType = 'javascript'
 							arg.type = 'javascript'
 						} else {
 							if (staticTemplate) {
-								arg.value = codeToStaticTemplate(arg.expr)
-								setPropertyType(arg.value)
+								if (arg) {
+									arg.value = codeToStaticTemplate(arg.expr)
+								}
+								setPropertyType(arg?.value)
 							} else {
-								arg.type = 'static'
-								arg.value = undefined
-								arg.expr = undefined
+								if (arg) {
+									arg.type = 'static'
+									arg.value = undefined
+									arg.expr = undefined
+								}
 							}
 							propertyType = 'static'
 						}
@@ -187,9 +181,21 @@ const closeBracket = '}';
 						Dynamic (JS)
 					</ToggleButton>
 				</ToggleButtonGroup>
+				<Button
+					variant="contained"
+					color="blue"
+					size="xs"
+					on:click={() => {
+						focusProp(argName, 'connect', (path) => {
+							connectProperty(path)
+							return true
+						})
+					}}>Connect &rightarrow;</Button
+				>
 			</div>
-		</div>
+		{/if}
 	</div>
+
 	<div class="max-w-xs" />
 
 	<div
@@ -204,14 +210,17 @@ const closeBracket = '}';
 				Connect input &rightarrow;
 			</span>
 		{/if}
-		{#if isStaticTemplate(inputCat) && propertyType == 'static'}
-			<div class="py-1 rounded border border-1 border-gray-500">
-				<TemplateEditor
-					bind:this={monacoTemplate}
-					{extraLib}
-					on:focus={onFocus}
-					bind:code={arg.value}
-				/>
+		{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
+			<div class="py-1 mt-2 min-h-[28px] rounded border border-1 border-gray-500">
+				{#if arg}
+					<TemplateEditor
+						bind:this={monacoTemplate}
+						{extraLib}
+						on:focus={onFocus}
+						bind:code={arg.value}
+						fontSize={14}
+					/>
+				{/if}
 			</div>
 		{:else if propertyType === undefined || propertyType == 'static'}
 			<ArgInput
@@ -264,5 +273,5 @@ const closeBracket = '}';
 	</div>
 	<div class="mb-6" />
 {:else}
-	<p class="text-sm text-gray-700">Arg at {argName} is undefined</p>
+	<p class="text-sm text-gray-700">Argument at {argName} is undefined</p>
 {/if}

package/components/InputTransformForm.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         pickForField?: string | undefined;
         variableEditor?: VariableEditor | undefined;
         itemPicker?: ItemPicker | undefined;
+        noDynamicToggle?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/LogViewer.svelte

@@ -1,4 +1,6 @@
-<script>import { fade } from 'svelte/transition';
+<script>import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { Icon } from 'svelte-awesome';
+import { fade } from 'svelte/transition';
 import { Drawer, DrawerContent } from './common';
 export let content;
 export let isLoading;
@@ -43,9 +45,10 @@ let logViewer;
 		{/if}
 
 		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
-			>{#if content}<span transition:fade={{ duration: 50 }}>{content}</span
-				>{:else if isLoading}{:else}<span class="text-gray-600">No logs are available yet</span
-				>{/if}</pre
+			>{#if content}<span>{content}</span>{:else if isLoading}<Icon
+					data={faSpinner}
+					class="animate-spin"
+				/>{:else}<span class="text-gray-600">No logs are available yet</span>{/if}</pre
 		>
 	</div>
 </div>

package/components/ModulePreview.svelte

@@ -6,46 +6,49 @@ import TestJobLoader from './TestJobLoader.svelte';
 import LogViewer from './LogViewer.svelte';
 import DisplayResult from './DisplayResult.svelte';
 import Button from './common/button/Button.svelte';
-import { faRotateRight } from '@fortawesome/free-solid-svg-icons';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { flowStateStore } from './flows/flowState';
 import { flowStore } from './flows/flowStore';
-import { Alert } from './common';
 import { workspaceStore } from '../stores';
-let testJobLoader;
-// Test
-let testIsLoading = false;
-let testJob;
+import { Icon } from 'svelte-awesome';
 export let mod;
 export let schema;
+// Test
+let testJobLoader;
+let testIsLoading = false;
+let testJob = undefined;
 let stepArgs = {};
 export function runTestWithStepArgs() {
     runTest(stepArgs);
 }
 export async function runTest(args) {
     const val = mod.value;
+    let jobId = undefined;
     if (val.type == 'rawscript') {
-        await testJobLoader?.runPreview(val.path, val.content, val.language, args);
+        jobId = await testJobLoader?.runPreview(val.path, val.content, val.language, args);
     }
     else if (val.type == 'script') {
         const script = val.hash
             ? await ScriptService.getScriptByHash({ workspace: $workspaceStore, hash: val.hash })
             : await getScriptByPath(val.path);
-        await testJobLoader?.runPreview(val.path, script.content, script.language, args);
+        jobId = await testJobLoader?.runPreview(val.path, script.content, script.language, args);
     }
     else {
         throw Error('not testable module type');
     }
-    sendUserToast(`started test ${truncateRev(testJob?.id ?? '', 10)}`);
+    sendUserToast(`started test ${truncateRev(jobId ?? '', 10)}`);
 }
 function jobDone() {
     if (testJob && !testJob.canceled && testJob.type == 'CompletedJob' && `result` in testJob) {
-        $flowStateStore[mod.id].previewResult = testJob.result;
+        if ($flowStateStore[mod.id]?.previewResult) {
+            $flowStateStore[mod.id].previewResult = testJob.result;
+        }
     }
 }
 </script>
 
 <TestJobLoader
-	on:done={jobDone}
+	on:done={() => jobDone()}
 	bind:this={testJobLoader}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
@@ -74,7 +77,7 @@ function jobDone() {
 				color="red"
 				size="sm"
 				startIcon={{
-					icon: faRotateRight,
+					icon: faSpinner,
 					classes: 'animate-spin'
 				}}
 			>
@@ -94,7 +97,11 @@ function jobDone() {
 					</pre>
 				{:else}
 					<div class="p-2">
-						{testIsLoading ? 'Waiting for result...' : 'Test to see the result here'}
+						{#if testIsLoading}
+							<Icon data={faSpinner} class="animate-spin" />
+						{:else}
+							Test to see the result here
+						{/if}
 					</div>
 				{/if}
 			</Pane>

package/components/Popover.svelte

@@ -39,29 +39,21 @@ function close() {
 	use:popperRef
 	on:mouseenter={open}
 	on:mouseleave={close}
+	on:click
+	class={$$props.class}
 >
 	<slot />
 </button>
 {#if showTooltip}
-	<div id="tooltip" use:popperContent={extraOpts} on:mouseenter={open} on:mouseleave={close}>
+	<div
+		use:popperContent={extraOpts}
+		on:mouseenter={open}
+		on:mouseleave={close}
+		class="z-50  py-2 px-3 rounded-md  text-sm font-normal !text-gray-300 bg-gray-800
+		whitespace-normal text-left {$$props.class}"
+	>
 		<div class="max-w-sm">
 			<slot name="text" />
 		</div>
 	</div>
 {/if}
-
-<style>
-	#tooltip {
-    z-index: 50;
-    white-space: normal;
-    border-radius: 0.75rem;
-    --tw-bg-opacity: 1;
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-    padding: 1rem;
-    text-align: left;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 400;
-    --tw-text-opacity: 1;
-    color: rgb(209 213 219 / var(--tw-text-opacity))
-}</style>

package/components/Popover.svelte.d.ts

@@ -1,9 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         notClickable?: boolean | undefined;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/RadioButton.svelte

@@ -2,19 +2,21 @@
 export let options;
 export let value;
 export let disabled = false;
+export let labelClass = '';
+export let inputClass = '';
 import { createEventDispatcher } from 'svelte';
 import Tooltip from './Tooltip.svelte';
 const dispatch = createEventDispatcher();
 </script>
 
 <fieldset class="w-full">
-	<legend class="sr-only">{label}</legend>
+	<legend class="sr-only {labelClass}">{label}</legend>
 	<div class="flex flex-row flex-wrap gap-2 items-center mb-2 w-full">
 		{#each options as [label, val]}
 			<label
 				class="text-center text-sm border border-gray-300 h-full rounded-sm cursor-pointer p-2 
-				grow whitespace-nowrap hover:border-gray-600 hover:bg-gray-100
-				{val === value ? '!bg-blue-50 !border-blue-500' : ''}"
+				grow whitespace-nowrap duration-200 hover:border-gray-600 hover:bg-gray-100
+				{val === value ? '!bg-blue-50 !border-blue-500' : ''} {inputClass}"
 			>
 				<input
 					{disabled}

package/components/RadioButton.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         }, any][];
         value: any;
         disabled?: boolean | undefined;
+        labelClass?: string | undefined;
+        inputClass?: string | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/components/ResourceEditor.svelte

@@ -144,8 +144,9 @@ function parseJson() {
 						{#if !emptyString(jsonError)}<span
 								class="text-red-400 text-xs mb-1 flex flex-row-reverse">{jsonError}</span
 							>{:else}<div class="py-2" />{/if}
-						<div class="h-full w-full">
+						<div class="h-full w-full border p-1 rounded">
 							<SimpleEditor
+								autoHeight
 								class="editor"
 								lang="json"
 								bind:code={rawCode}

package/components/SchemaEditor.svelte

@@ -11,6 +11,9 @@ import Tooltip from './Tooltip.svelte';
 import { flip } from 'svelte/animate';
 const dispatch = createEventDispatcher();
 export let schema = emptySchema();
+if (!schema) {
+    schema = emptySchema();
+}
 let schemaModal;
 let schemaString = '';
 // Internal state: bound to args builder modal