windmill-components 1.383.9 → 1.389.1

package/package/components/apps/svelte-grid/Grid.svelte

@@ -93,7 +93,9 @@ const updateMatrix = ({ detail }) => {
                     ...shadows[id]
                 }
             };
-            sortedItems = moveItem(activeItem, sortedItems, getComputedCols);
+            let { items, overlap } = moveItem(activeItem, sortedItems, getComputedCols);
+            sortedItems = items;
+            overlapped = overlap ? id : undefined;
         }
     }
     for (let id of nselectedIds ?? []) {
@@ -140,6 +142,7 @@ export function handleInitMove({ detail }) {
         }
     });
 }
+let overlapped = undefined;
 </script>
 
 <div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
@@ -169,9 +172,10 @@ export function handleInitMove({ detail }) {
 				{sensor}
 				container={scroller}
 				nativeContainer={container}
+				{overlapped}
 			>
 				{#if item[getComputedCols]}
-					<slot dataItem={item} hidden={false} />
+					<slot dataItem={item} hidden={false} {overlapped} />
 				{/if}
 			</MoveResize>
 		{/if}

package/package/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -32,6 +32,7 @@ declare class __sveltets_Render<T> {
         default: {
             dataItem: FilledItem<T>;
             hidden: boolean;
+            overlapped: undefined;
         };
     };
 }

package/package/components/apps/svelte-grid/MoveResize.svelte

@@ -1,5 +1,6 @@
 <script>import { createEventDispatcher, getContext, onMount } from 'svelte';
 import { writable } from 'svelte/store';
+import { twMerge } from 'tailwind-merge';
 const dispatch = createEventDispatcher();
 export let sensor;
 export let width;
@@ -17,6 +18,7 @@ export let cols;
 export let nativeContainer;
 export let onTop;
 export let shadow = undefined;
+export let overlapped = undefined;
 const ctx = getContext('AppEditorContext');
 const { mode } = getContext('AppViewerContext');
 const scale = ctx ? ctx.scale : writable(100);
@@ -313,7 +315,10 @@ const resizePointerUp = (e) => {
 
 {#if xPerPx > 0 && (active || trans) && shadow}
 	<div
-		class="svlt-grid-shadow shadow-active"
+		class={twMerge(
+			'svlt-grid-shadow shadow-active',
+			overlapped ? 'svlte-grid-shadow-forbidden' : ''
+		)}
 		style="width: {shadow.w * xPerPx - gapX * 2}px; height: {shadow.h * yPerPx -
 			gapY * 2}px; transform: translate({shadow.x * xPerPx + gapX}px, {shadow.y * yPerPx +
 			gapY}px); "
@@ -399,9 +404,12 @@ const resizePointerUp = (e) => {
 
 	.svlt-grid-shadow {
 		position: absolute;
-		background: red;
 		will-change: transform;
-		background: pink;
 		backface-visibility: hidden;
 		-webkit-backface-visibility: hidden;
+		background: #93c4fdd0;
+	}
+
+	.svlte-grid-shadow-forbidden {
+		background: rgba(255, 99, 71, 0.2) !important;
 	}</style>

package/package/components/apps/svelte-grid/MoveResize.svelte.d.ts

@@ -22,6 +22,7 @@ declare const __propDef: {
             w: number;
             h: number;
         } | undefined;
+        overlapped?: string | undefined;
         inActivate?: (() => void) | undefined;
         initmove?: (() => void) | undefined;
         updateMove?: ((newCoordDiff: any, clientY: any) => void) | undefined;

package/package/components/apps/svelte-grid/utils/item.d.ts

@@ -5,7 +5,10 @@ export declare function findFreeSpaceForItem<T>(matrix: FilledItem<T>[][], item:
     x: number;
     y: number;
 };
-export declare function moveItem(active: any, items: any, cols: any): any;
+export declare function moveItem(active: any, items: any, cols: any): {
+    items: any;
+    overlap: boolean;
+};
 export declare function normalize(items: any, col: any): any;
 export declare function adjust<T>(items: FilledItem<T>[], col: any): FilledItem<T>[];
 export declare function getUndefinedItems(items: any, col: any, breakpoints: any): any;

package/package/components/apps/svelte-grid/utils/item.js

@@ -105,8 +105,12 @@ export function moveItem(active, items, cols) {
     // Getting whenever of these items is fixed
     const fixed = closeObj.find((value) => value[cols].fixed);
     // If found fixed, reset the active to its original position
-    if (fixed)
-        return items;
+    if (fixed) {
+        return {
+            items: items,
+            overlap: closeBlocks.length > 0
+        };
+    }
     // Update items
     items = updateItem(items, active, item, cols);
     // Create matrix of items expect close elements
@@ -130,7 +134,10 @@ export function moveItem(active, items, cols) {
         matrix = makeMatrixFromItemsIgnore(tempItems, getIgnoreItems, getRowsCount(tempItems, cols), cols);
     });
     // Return result
-    return tempItems;
+    return {
+        items: tempItems,
+        overlap: false
+    };
 }
 // Helper function
 export function normalize(items, col) {
@@ -138,7 +145,7 @@ export function normalize(items, col) {
     result.forEach((value) => {
         const getItem = value[col];
         if (!getItem.static) {
-            result = moveItem(getItem, result, col);
+            result = moveItem(getItem, result, col).items;
         }
     });
     return result;

package/package/components/common/button/Button.svelte.d.ts

@@ -35,12 +35,12 @@ declare const __propDef: {
         } | undefined;
         dropdownItems?: {
             label: string;
-            onClick?: (() => void) | undefined;
+            onClick?: ((e?: Event) => void) | undefined;
             href?: string | undefined;
             icon?: any;
         }[] | (() => {
             label: string;
-            onClick?: (() => void) | undefined;
+            onClick?: ((e?: Event) => void) | undefined;
             href?: string | undefined;
             icon?: any;
         }[]) | undefined;

package/package/components/common/calendarPicker/CalendarPicker.svelte

@@ -6,12 +6,13 @@ export let date;
 export let label;
 export let useDropdown = false;
 export let clearable = false;
+export let target = undefined;
 const dispatch = createEventDispatcher();
 let input;
 export let placement = 'top-end';
 </script>
 
-<Popup floatingConfig={{ placement: placement, strategy: 'absolute' }}>
+<Popup floatingConfig={{ placement: placement, strategy: 'absolute' }} {target}>
 	<svelte:fragment slot="button">
 		<button
 			title="Open calendar picker"
@@ -26,9 +27,12 @@ export let placement = 'top-end';
 	</svelte:fragment>
 
 	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<label class="block text-primary">
 		<div class="pb-1 text-sm text-secondary">{label}</div>
-		<div class="flex w-full">
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div on:click|stopPropagation class="flex w-full">
 			<DateTimeInput
 				{clearable}
 				{useDropdown}

package/package/components/common/calendarPicker/CalendarPicker.svelte.d.ts

@@ -6,9 +6,11 @@ declare const __propDef: {
         label: string;
         useDropdown?: boolean | undefined;
         clearable?: boolean | undefined;
+        target?: string | HTMLElement | undefined;
         placement?: Placement | undefined;
     };
     events: {
+        click: MouseEvent;
         change: CustomEvent<any>;
         clear: CustomEvent<any>;
     } & {

package/package/components/common/drawer/ConditionalPortal.svelte

@@ -1,9 +1,10 @@
 <script>import Portal from '../../Portal.svelte';
 export let condition = false;
+export let target = undefined;
 </script>
 
 {#if condition}
-	<Portal><slot /></Portal>
+	<Portal {target}><slot /></Portal>
 {:else}
 	<slot />
 {/if}

package/package/components/common/drawer/ConditionalPortal.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         condition?: boolean | undefined;
+        target?: string | HTMLElement | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/common/languageIcons/LanguageIcon.svelte

@@ -13,6 +13,7 @@ import MSSqlServerIcon from '../../icons/MSSqlServerIcon.svelte';
 import BunIcon from '../../icons/BunIcon.svelte';
 import DenoIcon from '../../icons/DenoIcon.svelte';
 import PHPIcon from '../../icons/PHPIcon.svelte';
+import RustIcon from '../../icons/RustIcon.svelte';
 export let lang;
 export let width = 30;
 export let height = 30;
@@ -32,7 +33,8 @@ const languageLabel = {
     mysql: 'MySQL',
     mssql: 'MS SQL Server',
     bun: 'TypeScript',
-    php: 'PHP'
+    php: 'PHP',
+    rust: 'Rust'
 };
 const langToComponent = {
     go: GoIcon,
@@ -54,7 +56,8 @@ const langToComponent = {
     postgresql: PostgresIcon,
     nativets: RestIcon,
     graphql: GraphqlIcon,
-    php: PHPIcon
+    php: PHPIcon,
+    rust: RustIcon
 };
 let subIconScale = width === 30 ? 0.6 : 0.8;
 </script>

package/package/components/common/popup/Popup.svelte

@@ -9,6 +9,7 @@ export let containerClasses = 'rounded-lg shadow-md border p-4 bg-surface';
 const [floatingRef, floatingContent] = createFloatingActions(floatingConfig);
 export let blockOpen = false;
 export let shouldUsePortal = true;
+export let target = undefined;
 </script>
 
 <Popover on:close class="leading-none">
@@ -17,7 +18,7 @@ export let shouldUsePortal = true;
 			<slot name="button" />
 		</div>
 	</PopoverButton>
-	<ConditionalPortal condition={shouldUsePortal}>
+	<ConditionalPortal condition={shouldUsePortal} {target}>
 		<div use:floatingContent class="z5000">
 			<Transition
 				show={blockOpen || undefined}

package/package/components/common/popup/Popup.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         containerClasses?: string | undefined;
         blockOpen?: boolean | undefined;
         shouldUsePortal?: boolean | undefined;
+        target?: string | HTMLElement | undefined;
     };
     events: {
         close: CustomEvent<any>;

package/package/components/common/table/AppRow.svelte

@@ -8,13 +8,13 @@ import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
 import DraftBadge from '../../DraftBadge.svelte';
 import Badge from '../badge/Badge.svelte';
-import { ExternalLink, Eye, File, FileJson, FileUp, GitFork, Globe, History, Pen, Share, Trash, Clipboard } from 'lucide-svelte';
+import { ExternalLink, Eye, File, FileJson, FileUp, GitFork, Globe, History, Pen, Share, Trash, Clipboard, Loader2 } from 'lucide-svelte';
 import { goto as gotoUrl } from '$app/navigation';
 import { page } from '$app/stores';
 import { DELETE, copyToClipboard } from '../../../utils';
 import AppDeploymentHistory from '../../apps/editor/AppDeploymentHistory.svelte';
-import AppJsonEditor from '../../apps/editor/AppJsonEditor.svelte';
 import { isDeployable } from '../../../utils_deployable';
+import { getDeployUiSettings } from '../../home/deploy_ui';
 export let app;
 export let marked;
 export let starred;
@@ -24,17 +24,20 @@ export let deploymentDrawer;
 export let deleteConfirmedCallback;
 export let depth = 0;
 export let menuOpen = false;
-export let deployUiSettings = undefined;
 const dispatch = createEventDispatcher();
-let appExport;
+let appExport = undefined;
 let appDeploymentHistory = undefined;
 async function loadAppJson() {
-    appExport.open(app.path);
+    appExport?.open(app.path);
 }
 </script>
 
 {#if menuOpen}
-	<AppJsonEditor on:change bind:this={appExport} />
+	{#await import('../../apps/editor/AppJsonEditor.svelte')}
+		<Loader2 class="animate-spin" />
+	{:then Module}
+		<Module.default on:change bind:this={appExport} />
+	{/await}
 	<AppDeploymentHistory bind:this={appDeploymentHistory} appPath={app.path} />
 {/if}
 
@@ -94,7 +97,7 @@ async function loadAppJson() {
 			{/if}
 		</span>
 		<Dropdown
-			items={() => {
+			items={async () => {
 				let { draft_only, canWrite, summary, execution_mode, path, has_draft } = app
 
 				if (draft_only) {
@@ -144,7 +147,7 @@ async function loadAppJson() {
 						disabled: !canWrite,
 						hide: $userStore?.operator
 					},
-					...(isDeployable('app', path, deployUiSettings)
+					...(isDeployable('app', path, await getDeployUiSettings())
 						? [
 								{
 									displayName: 'Deploy to staging/prod',

package/package/components/common/table/AppRow.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type MoveDrawer from '../../MoveDrawer.svelte';
 import type ShareModal from '../../ShareModal.svelte';
-import { type ListableApp, type WorkspaceDeployUISettings } from '../../../gen';
+import { type ListableApp } from '../../../gen';
 import type DeployWorkspaceDrawer from '../../DeployWorkspaceDrawer.svelte';
 declare const __propDef: {
     props: {
@@ -18,7 +18,6 @@ declare const __propDef: {
         deleteConfirmedCallback: (() => void) | undefined;
         depth?: number | undefined;
         menuOpen?: boolean | undefined;
-        deployUiSettings?: WorkspaceDeployUISettings | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/common/table/FlowRow.svelte

@@ -15,6 +15,7 @@ import { DELETE, copyToClipboard, isOwner } from '../../../utils';
 import { isDeployable } from '../../../utils_deployable';
 import { Pen, GitFork, Trash, List, FileUp, Globe, Calendar, Share, Archive, Clipboard, Eye, HistoryIcon } from 'lucide-svelte';
 import FlowHistory from '../../flows/FlowHistory.svelte';
+import { getDeployUiSettings } from '../../home/deploy_ui';
 export let flow;
 export let marked;
 export let starred;
@@ -25,7 +26,6 @@ export let deploymentDrawer;
 export let errorHandlerMuted;
 export let depth = 0;
 export let menuOpen = false;
-export let deployUiSettings = undefined;
 const dispatch = createEventDispatcher();
 async function archiveFlow(path, archived) {
     try {
@@ -115,7 +115,7 @@ let flowHistory;
 		</span>
 
 		<Dropdown
-			items={() => {
+			items={async () => {
 				let { draft_only, path, archived, has_draft } = flow
 				let owner = isOwner(path, $userStore, $workspaceStore)
 				if (draft_only) {
@@ -173,7 +173,7 @@ let flowHistory;
 							copyToClipboard(path)
 						}
 					},
-					...(isDeployable('flow', path, deployUiSettings)
+					...(isDeployable('flow', path, await getDeployUiSettings())
 						? [
 								{
 									displayName: 'Deploy to staging/prod',

package/package/components/common/table/FlowRow.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type MoveDrawer from '../../MoveDrawer.svelte';
 import type ShareModal from '../../ShareModal.svelte';
-import { type Flow, type WorkspaceDeployUISettings } from '../../../gen';
+import { type Flow } from '../../../gen';
 import type DeployWorkspaceDrawer from '../../DeployWorkspaceDrawer.svelte';
 declare const __propDef: {
     props: {
@@ -19,7 +19,6 @@ declare const __propDef: {
         errorHandlerMuted: boolean;
         depth?: number | undefined;
         menuOpen?: boolean | undefined;
-        deployUiSettings?: WorkspaceDeployUISettings | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/common/table/RawAppRow.svelte

@@ -12,6 +12,7 @@ import FileInput from '../fileInput/FileInput.svelte';
 import { goto } from '../../../navigation';
 import { FileUp, Globe, Pen, Share, Trash } from 'lucide-svelte';
 import { isDeployable } from '../../../utils_deployable';
+import { getDeployUiSettings } from '../../home/deploy_ui';
 export let app;
 export let marked;
 export let starred;
@@ -21,7 +22,6 @@ export let deleteConfirmedCallback;
 export let deploymentDrawer;
 export let depth = 0;
 export let menuOpen = false;
-export let deployUiSettings = undefined;
 let updateAppDrawer;
 const dispatch = createEventDispatcher();
 </script>
@@ -81,7 +81,7 @@ const dispatch = createEventDispatcher();
 			{/if}
 		</span>
 		<Dropdown
-			items={() => {
+			items={async () => {
 				let { summary, path, canWrite } = app
 
 				return [
@@ -93,7 +93,7 @@ const dispatch = createEventDispatcher();
 						},
 						disabled: !canWrite
 					},
-					...(isDeployable('app', path, deployUiSettings)
+					...(isDeployable('app', path, await getDeployUiSettings())
 						? [
 								{
 									displayName: 'Deploy to prod/staging',

package/package/components/common/table/RawAppRow.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type MoveDrawer from '../../MoveDrawer.svelte';
 import type ShareModal from '../../ShareModal.svelte';
-import { type ListableRawApp, type WorkspaceDeployUISettings } from '../../../gen';
+import { type ListableRawApp } from '../../../gen';
 import type DeployWorkspaceDrawer from '../../DeployWorkspaceDrawer.svelte';
 declare const __propDef: {
     props: {
@@ -16,7 +16,6 @@ declare const __propDef: {
         deploymentDrawer: DeployWorkspaceDrawer;
         depth?: number | undefined;
         menuOpen?: boolean | undefined;
-        deployUiSettings?: WorkspaceDeployUISettings | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/common/table/ScriptRow.svelte

@@ -19,6 +19,7 @@ import ScriptVersionHistory from '../../ScriptVersionHistory.svelte';
 import { Drawer, DrawerContent } from '..';
 import NoMainFuncBadge from '../../NoMainFuncBadge.svelte';
 import Tooltip from '../../Tooltip.svelte';
+import { getDeployUiSettings } from '../../home/deploy_ui';
 export let script;
 export let marked;
 export let starred;
@@ -30,7 +31,6 @@ export let errorHandlerMuted;
 export let showCode;
 export let depth = 0;
 export let menuOpen = false;
-export let deployUiSettings = undefined;
 const dispatch = createEventDispatcher();
 async function archiveScript(path) {
     await ScriptService.archiveScriptByPath({ workspace: $workspaceStore, path });
@@ -135,7 +135,7 @@ let versionsDrawerOpen = false;
 			{/if}
 		</span>
 		<Dropdown
-			items={() => {
+			items={async () => {
 				let owner = isOwner(script.path, $userStore, $workspaceStore)
 				if (script.draft_only) {
 					return [
@@ -188,7 +188,7 @@ let versionsDrawerOpen = false;
 						disabled: !owner || script.archived,
 						hide: $userStore?.operator
 					},
-					...(isDeployable('script', script.path, deployUiSettings)
+					...(isDeployable('script', script.path, await getDeployUiSettings())
 						? [
 								{
 									displayName: 'Deploy to staging/prod',

package/package/components/common/table/ScriptRow.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type MoveDrawer from '../../MoveDrawer.svelte';
 import type ShareModal from '../../ShareModal.svelte';
-import { type Script, type WorkspaceDeployUISettings } from '../../../gen';
+import { type Script } from '../../../gen';
 import type DeployWorkspaceDrawer from '../../DeployWorkspaceDrawer.svelte';
 declare const __propDef: {
     props: {
@@ -19,7 +19,6 @@ declare const __propDef: {
         showCode: (path: string, summary: string) => void;
         depth?: number | undefined;
         menuOpen?: boolean | undefined;
-        deployUiSettings?: WorkspaceDeployUISettings | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/copilot/CodeCompletionStatus.svelte

@@ -1,53 +1,28 @@
-<script>import { SparklesIcon } from 'lucide-svelte';
-import Button from '../common/button/Button.svelte';
-import { codeCompletionLoading, copilotInfo, codeCompletionSessionEnabled } from '../../stores';
-import Popover from '../Popover.svelte';
-import { getLocalSetting, storeLocalSetting } from '../../utils';
-import SparklesOffIcon from '../icons/SparklesOffIcon.svelte';
-const SETTING_NAME = 'codeCompletionSessionEnabled';
-function loadSetting() {
-    $codeCompletionSessionEnabled = (getLocalSetting(SETTING_NAME) ?? 'true') == 'true';
-}
+<script>import { codeCompletionSessionEnabled, copilotInfo, FORMAT_ON_SAVE_SETTING_NAME } from '../../stores';
+import { storeLocalSetting } from '../../utils';
+import Toggle from '../Toggle.svelte';
 function storeSetting() {
-    $codeCompletionSessionEnabled = !$codeCompletionSessionEnabled;
-    storeLocalSetting(SETTING_NAME, $codeCompletionSessionEnabled.toString());
+    storeLocalSetting(FORMAT_ON_SAVE_SETTING_NAME, $codeCompletionSessionEnabled.toString());
 }
-loadSetting();
 </script>
 
 {#if $copilotInfo.exists_openai_resource_path && $copilotInfo.code_completion_enabled}
-	<Popover>
-		<svelte:fragment slot="text"
-			>Code completion: {$codeCompletionSessionEnabled ? 'enabled' : 'disabled'} (applies only to you)</svelte:fragment
-		>
-		<Button
-			color="light"
-			size="xs"
-			loading={$codeCompletionLoading}
-			startIcon={$codeCompletionLoading
-				? undefined
-				: {
-						icon: $codeCompletionSessionEnabled ? SparklesIcon : SparklesOffIcon,
-						classes: $codeCompletionSessionEnabled
-							? 'text-violet-800 dark:text-violet-400'
-							: 'text-violet-800/50 dark:text-violet-400/50'
-				  }}
-			on:click={() => {
-				storeSetting()
-			}}
-		/>
-	</Popover>
+	<Toggle
+		size="xs"
+		bind:checked={$codeCompletionSessionEnabled}
+		on:change={() => {
+			storeSetting()
+		}}
+		options={{ right: 'AI code completion' }}
+	/>
 {:else}
-	<Popover>
-		<svelte:fragment slot="text"
-			>Code completion is disabled in the workspace settings</svelte:fragment
-		>
-		<Button
-			color="light"
-			startIcon={{
-				icon: SparklesOffIcon
-			}}
-			btnClasses="text-violet-800/50 dark:text-violet-400/50"
-		/>
-	</Popover>
+	<Toggle
+		disabled
+		size="xs"
+		checked={false}
+		on:change={() => {
+			storeSetting()
+		}}
+		options={{ right: 'AI code completion (disabled in workspace settings)' }}
+	/>
 {/if}

package/package/components/copilot/StepGen.svelte

@@ -27,7 +27,8 @@ $: prefilteredItems = scripts ?? [];
 async function loadScripts() {
     const loadedScripts = await ScriptService.listScripts({
         workspace: $workspaceStore,
-        perPage: 300
+        perPage: 300,
+        kinds: trigger ? 'trigger' : 'script'
     });
     scripts = loadedScripts;
 }

package/package/components/custom_ui.d.ts

@@ -8,6 +8,7 @@ export type FlowBuilderWhitelabelCustomUi = {
         tutorials?: boolean;
         diff?: boolean;
         extraDeployOptions?: boolean;
+        editableSummary?: boolean;
     };
     settingsPanel?: boolean;
     settingsTabs?: {
@@ -41,8 +42,9 @@ export type EditorBarUi = {
     assistants?: boolean;
     multiplayer?: boolean;
     autoformatting?: boolean;
+    vimMode?: boolean;
     aiGen?: boolean;
-    aiFix?: boolean;
+    aiCompletion?: boolean;
     library?: boolean;
     useVsCode?: boolean;
 };
@@ -54,6 +56,7 @@ export type ScriptBuilderWhitelabelCustomUi = {
         path?: boolean;
         settings?: boolean;
         extraDeployOptions?: boolean;
+        editableSummary?: boolean;
     };
     editorBar?: EditorBarUi;
 };

package/package/components/flows/CreateActionsApp.svelte

@@ -3,8 +3,7 @@ import { base } from '../../base';
 import { Button, FileInput } from '../common';
 import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
-import SimpleEditor from '../SimpleEditor.svelte';
-import { LayoutDashboard, Plus } from 'lucide-svelte';
+import { LayoutDashboard, Loader2, Plus } from 'lucide-svelte';
 import { importStore } from '../apps/store';
 import { RawAppService } from '../../gen';
 import { workspaceStore } from '../../stores';
@@ -79,12 +78,16 @@ async function importRawApp() {
 		title={'Import low-code app from ' + (importType === 'yaml' ? 'YAML' : 'JSON')}
 		on:close={() => drawer?.toggleDrawer?.()}
 	>
-		<SimpleEditor
-			bind:code={pendingRaw}
-			lang={importType}
-			class="h-full"
-			fixedOverflowWidgets={false}
-		/>
+		{#await import('../SimpleEditor.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				bind:code={pendingRaw}
+				lang={importType}
+				class="h-full"
+				fixedOverflowWidgets={false}
+			/>
+		{/await}
 		<svelte:fragment slot="actions">
 			<Button size="sm" on:click={importRaw}>Import</Button>
 		</svelte:fragment>