windmill-components 1.377.7 → 1.379.2

package/package/ata/apis.d.ts

@@ -28,3 +28,4 @@ export interface ResLimit {
     usage: number;
 }
 export declare function isOverlimit(resLimit: ResLimit): boolean;
+export declare const limit: import("p-limit").LimitFunction;

package/package/ata/apis.js

@@ -1,4 +1,5 @@
 //  https://github.com/jsdelivr/data.jsdelivr.com
+import pLimit from 'p-limit';
 export const getNPMVersionsForModule = (moduleName, resLimit) => {
     const url = `https://data.jsdelivr.com/v1/package/npm/${moduleName}`;
     return api(url, resLimit, {
@@ -27,7 +28,7 @@ export const getFiletreeForModuleWithVersion = async (moduleName, version, raw,
 export const getDTSFileForModuleWithVersion = async (moduleName, version, file) => {
     // file comes with a prefix /
     const url = `https://cdn.jsdelivr.net/npm/${moduleName}@${version}${file}`;
-    const res = await fetch(url);
+    const res = await limit(() => fetch(url));
     if (res.ok) {
         return res.text();
     }
@@ -38,12 +39,13 @@ export const getDTSFileForModuleWithVersion = async (moduleName, version, file)
 export function isOverlimit(resLimit) {
     return resLimit.usage > 5000000;
 }
+export const limit = pLimit(6);
 function api(url, resLimit, init) {
     if (isOverlimit(resLimit)) {
         console.warn(`Exceeded limit of types downloaded for the needs of the assistant fetching: ${url}, ${resLimit.usage}`);
         return new Promise(() => new Error('Exceeded limit of 100MB of data downloaded.'));
     }
-    return fetch(url, init).then((res) => {
+    return limit(() => fetch(url, init).then((res) => {
         if (res.ok) {
             return res.text().then((text) => {
                 resLimit.usage += text.length;
@@ -54,5 +56,5 @@ function api(url, resLimit, init) {
         else {
             return new Error('OK');
         }
-    });
+    }));
 }

package/package/ata/index.d.ts

@@ -36,7 +36,7 @@ export declare const setupTypeAcquisition: (config: ATABootstrapConfig) => (init
 /** The bulk load of the work in getting the filetree based on how people think about npm names and versions */
 export declare const getFileTreeForModuleWithTag: (moduleName: string, tag: string | undefined, raw: string, resLimit: ResLimit) => Promise<{
     moduleName: string;
-    version: string; /** code to dependency parser */
+    version: string;
     raw: string;
     default: string;
     files: {

package/package/ata/index.js

@@ -1,4 +1,4 @@
-import { getDTSFileForModuleWithVersion, getFiletreeForModuleWithVersion, getNPMVersionForModuleReference, getNPMVersionsForModule, isOverlimit } from './apis';
+import { getDTSFileForModuleWithVersion, getFiletreeForModuleWithVersion, getNPMVersionForModuleReference, getNPMVersionsForModule, isOverlimit, limit } from './apis';
 import { isRelativePath, mapModuleNameToModule } from './edgeCases';
 /**
  * The function which starts up type acquisition,
@@ -12,6 +12,7 @@ import { isRelativePath, mapModuleNameToModule } from './edgeCases';
 export const setupTypeAcquisition = (config) => {
     const moduleMap = new Map();
     const fsMap = new Map();
+    limit.clearQueue();
     let estimatedToDownload = 0;
     let estimatedDownloaded = 0;
     let resLimit = { usage: 0 };

package/package/components/DateInput.svelte

@@ -1,16 +1,43 @@
 <script>import { createEventDispatcher } from 'svelte';
-import { format, isValid } from 'date-fns';
+import { format, isValid, parse } from 'date-fns';
+import { sendUserToast } from '../toast';
 export let value = undefined;
 export let autofocus = false;
 export let minDate = undefined;
 export let maxDate = undefined;
 export let dateFormat = 'dd-MM-yyyy';
-let date = undefined;
+let date = computeDate(value);
 const dispatch = createEventDispatcher();
+const defaultDateFormat = 'dd-MM-yyyy';
+const defaultHtmlDateFormat = 'yyyy-MM-dd';
+function computeDate(value) {
+    if (dateFormat === undefined) {
+        dateFormat = defaultDateFormat;
+    }
+    if (value && value.length > 0) {
+        try {
+            let date = parse(value, dateFormat, new Date());
+            if (date.toString() === 'Invalid Date') {
+                console.debug('falling back to default html date format');
+                date = parse(value, defaultHtmlDateFormat, new Date());
+            }
+            const res = format(date, defaultHtmlDateFormat);
+            return res;
+        }
+        catch (error) {
+            sendUserToast(`Failed to parse date: ${value} with format ${dateFormat} and ${defaultHtmlDateFormat}`, true);
+            console.error(`Failed to parse date: ${value}`, error);
+            return undefined;
+        }
+    }
+    else {
+        return undefined;
+    }
+}
 function updateValue(newDate) {
     if (newDate && isValid(new Date(newDate))) {
         if (dateFormat === undefined) {
-            dateFormat = 'dd-MM-yyyy';
+            dateFormat = defaultDateFormat;
         }
         try {
             let dateFromValue = newDate ? new Date(newDate + 'T00:00:00') : undefined;

package/package/components/DisplayResult.svelte

@@ -31,6 +31,7 @@ export let hideAsJson = false;
 export let noControls = false;
 export let drawerOpen = false;
 export let nodeId = undefined;
+export let language = undefined;
 const IMG_MAX_SIZE = 10000000;
 const TABLE_MAX_SIZE = 5000000;
 const DISPLAY_MAX_SIZE = 100000;
@@ -296,17 +297,14 @@ let seeS3PreviewFileFromList = '';
 			/>
 		{/each}</div
 	>
-{:else}
-	<div
+{:else}<div
 		class="inline-highlight relative grow {['plain', 'markdown'].includes(resultKind ?? '')
 			? ''
 			: 'min-h-[200px]'}"
-	>
-		{#if result != undefined && length != undefined && largeObject != undefined}
-			<div class="flex justify-between items-center w-full">
-				<div class="text-tertiary text-sm">
-					{#if !hideAsJson && !['json', 's3object'].includes(resultKind ?? '') && typeof result === 'object'}
-						<ToggleButtonGroup
+		>{#if result != undefined && length != undefined && largeObject != undefined}<div
+				class="flex justify-between items-center w-full"
+				><div class="text-tertiary text-sm">
+					{#if !hideAsJson && !['json', 's3object'].includes(resultKind ?? '') && typeof result === 'object'}<ToggleButtonGroup
 							class="h-6"
 							selected={forceJson ? 'json' : resultKind?.startsWith('table-') ? 'table' : 'pretty'}
 							on:selected={(ev) => {
@@ -456,13 +454,24 @@ let seeS3PreviewFileFromList = '';
 					</div>
 				{:else if !forceJson && resultKind == 'error' && result?.error}
 					<div class="flex flex-col items-start">
-						<span class="text-red-500 font-semibold text-sm whitespace-pre-wrap"
+						<span class="text-red-500 pt-2 font-semibold !text-xs whitespace-pre-wrap"
 							>{#if result.error.name || result.error.message}{result.error.name}: {result.error
 									.message}{:else}{JSON.stringify(result.error, null, 4)}{/if}</span
 						>
-						<pre class="text-sm whitespace-pre-wrap text-primary">{result.error.stack ?? ''}</pre>
+						<pre class="text-xs pt-2 whitespace-pre-wrap text-primary"
+							>{result.error.stack ?? ''}</pre
+						>
 						<slot />
 					</div>
+					{#if language == 'bun'}
+						<div class="pt-20" />
+						<Alert size="xs" type="info" title="Seeing an odd error?">
+							Bun script are bundled for performance reasons. If you see an odd error that doesn't
+							appear when testing (which doesn't use bundling), try putting <code>//nobundling</code
+							> at the top of your script to disable bundling and feel free to mention it to the Windmill's
+							team.
+						</Alert>
+					{/if}
 				{:else if !forceJson && resultKind == 'approval'}<div class="flex flex-col gap-3 mt-2 mx-4">
 						<Button
 							color="green"

package/package/components/DisplayResult.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         noControls?: boolean | undefined;
         drawerOpen?: boolean | undefined;
         nodeId?: string | undefined;
+        language?: string | undefined;
         forceJson?: boolean | undefined;
     };
     events: {

package/package/components/FlowStatusViewer.svelte

@@ -7,6 +7,7 @@ export let jobId;
 export let workspaceId = undefined;
 export let flowStateStore = writable({});
 export let selectedJobStep = undefined;
+export let hideFlowResult = false;
 export let isOwner = false;
 export let wideResults = false;
 let lastJobId = jobId;
@@ -33,6 +34,7 @@ $: jobId && updateJobId();
 </script>
 
 <FlowStatusViewerInner
+	{hideFlowResult}
 	on:jobsLoaded={({ detail }) => {
 		let { job } = detail
 		if (job.script_path != lastScriptPath && job.script_path) {

package/package/components/FlowStatusViewer.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         workspaceId?: string | undefined;
         flowStateStore?: Writable<FlowState> | undefined;
         selectedJobStep?: string | undefined;
+        hideFlowResult?: boolean | undefined;
         isOwner?: boolean | undefined;
         wideResults?: boolean | undefined;
     };

package/package/components/FlowStatusViewerInner.svelte

@@ -36,6 +36,7 @@ export let globalRefreshes = {};
 export let childFlow = false;
 export let reducedPolling = false;
 export let wideResults = false;
+export let hideFlowResult = false;
 let jobResults = flowJobIds?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? [];
 let retry_selected = '';
 let timeout;
@@ -515,16 +516,18 @@ let storedListJobs = {};
 						<Loader2 class="animate-spin" />
 					</div>
 				{:else if `result` in job}
-					<div class="w-full h-full">
-						<FlowJobResult
-							workspaceId={job?.workspace_id}
-							jobId={job?.id}
-							loading={job['running'] == true}
-							result={job.result}
-							logs={job.logs}
-							durationStates={localDurationStatuses}
-						/>
-					</div>
+					{#if !hideFlowResult}
+						<div class="w-full h-full">
+							<FlowJobResult
+								workspaceId={job?.workspace_id}
+								jobId={job?.id}
+								loading={job['running'] == true}
+								result={job.result}
+								logs={job.logs}
+								durationStates={localDurationStatuses}
+							/>
+						</div>
+					{/if}
 				{:else if job.flow_status?.modules?.[job?.flow_status?.step]?.type === 'WaitingForEvents'}
 					<FlowStatusWaitingForEvents {workspaceId} {job} {isOwner} />
 				{:else if $suspendStatus && Object.keys($suspendStatus).length > 0}

package/package/components/FlowStatusViewerInner.svelte.d.ts

@@ -25,6 +25,7 @@ declare const __propDef: {
         childFlow?: boolean | undefined;
         reducedPolling?: boolean | undefined;
         wideResults?: boolean | undefined;
+        hideFlowResult?: boolean | undefined;
         job?: Job | undefined;
         refresh?: ((root: boolean, loopJob: {
             index: number;

package/package/components/FlowViewer.svelte.d.ts

@@ -11,7 +11,7 @@ declare const __propDef: {
         initialOpen?: number | undefined;
         noSide?: boolean | undefined;
         noGraph?: boolean | undefined;
-        tab?: "schema" | "raw" | "ui" | undefined;
+        tab?: "schema" | "ui" | "raw" | undefined;
         noSummary?: boolean | undefined;
     };
     events: {

package/package/components/InstanceSettings.svelte

@@ -686,6 +686,7 @@ export async function openCustomerPortal() {
 												/>
 											{:else if setting.fieldType == 'password'}
 												<input
+													autocomplete="new-password"
 													type="password"
 													placeholder={setting.placeholder}
 													bind:value={values[setting.key]}

package/package/components/LightweightArgInput.svelte

@@ -158,9 +158,14 @@ function testRegex(pattern, value) {
     }
 }
 let prevDefaultValue = undefined;
+let defaultChange = 0;
 async function changeDefaultValue(inputCat, defaultValue) {
-    if (value == null || value == undefined || deepEqual(value, prevDefaultValue)) {
+    if (value == null ||
+        value == undefined ||
+        deepEqual(value, prevDefaultValue) ||
+        (prevDefaultValue != undefined && !deepEqual(defaultValue, prevDefaultValue))) {
         value = defaultValue;
+        defaultChange += 1;
     }
     prevDefaultValue = structuredClone(defaultValue);
     if (value == null || value == undefined) {
@@ -472,11 +477,13 @@ function addItemByItemsType() {
 						{/each}
 					</select>
 				{:else if inputCat == 'date'}
-					{#if format === 'date'}
-						<DateInput bind:value dateFormat={extra['dateFormat']} />
-					{:else}
-						<DateTimeInput useDropdown bind:value />
-					{/if}
+					{#key defaultChange}
+						{#if format === 'date'}
+							<DateInput bind:value dateFormat={extra['dateFormat']} />
+						{:else}
+							<DateTimeInput useDropdown bind:value />
+						{/if}
+					{/key}
 				{:else if inputCat == 'base64'}
 					<div class="flex flex-col my-6 w-full">
 						<input

package/package/components/LightweightSchemaForm.svelte

@@ -55,7 +55,10 @@ function reorder() {
 }
 </script>
 
-<div class={twMerge('w-full flex flex-col px-0.5 pb-2', largeGap ? 'gap-8' : 'gap-2')}>
+<div
+	class={twMerge('w-full flex flex-col px-0.5 pb-2', largeGap ? 'gap-8' : 'gap-2')}
+	on:pointerdown
+>
 	{#each keys as argName (argName)}
 		{#if typeof args == 'object' && schema?.properties[argName] && args}
 			<LightweightArgInput

package/package/components/LightweightSchemaForm.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
         validateAll?: (() => void) | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
         inputClicked: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/LogViewer.svelte

@@ -78,9 +78,6 @@ function truncateContent(jobContent, loadedFromObjectStore, limit) {
     }
     return content;
 }
-$: if (content != undefined && isLoading) {
-    isLoading = false;
-}
 $: truncatedContent && scrollToBottom();
 $: html = ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != undefined
     ? truncatedContent.substring(truncatedContent.substring(1).indexOf('\n') + 2, truncatedContent.length)

package/package/components/Login.svelte

@@ -1,10 +1,11 @@
-<script>import Github from './icons/brands/Github.svelte';
+<script>import { goto } from '../navigation';
+import Github from './icons/brands/Github.svelte';
 import Gitlab from './icons/brands/Gitlab.svelte';
 import Google from './icons/brands/Google.svelte';
 import Microsoft from './icons/brands/Microsoft.svelte';
 import Okta from './icons/brands/Okta.svelte';
 import { OauthService, UserService, WorkspaceService } from '../gen';
-import { usersWorkspaceStore, workspaceStore, userStore, enterpriseLicense } from '../stores';
+import { usersWorkspaceStore, workspaceStore, userStore } from '../stores';
 import { classNames, emptyString, parseQueryParams } from '../utils';
 import { base } from '../base';
 import { getUserExt } from '../user';
@@ -18,8 +19,6 @@ export let email = undefined;
 export let password = undefined;
 export let error = undefined;
 export let popup = false;
-export let loginPasswordRequireEEOnPublicApps = false;
-export let gotoFn = (path, opt) => window.history.pushState(null, '', path);
 const providers = [
     {
         type: 'github',
@@ -80,7 +79,7 @@ async function login() {
 async function redirectUser() {
     const firstTimeCookie = document.cookie.match('(^|;)\\s*first_time\\s*=\\s*([^;]+)')?.pop() || '0';
     if (Number(firstTimeCookie) > 0 && email === 'admin@windmill.dev') {
-        gotoFn('/user/first-time');
+        goto('/user/first-time');
         return;
     }
     if (rd?.startsWith('http')) {
@@ -88,13 +87,13 @@ async function redirectUser() {
         return;
     }
     if ($workspaceStore) {
-        gotoFn(rd ?? '/');
+        goto(rd ?? '/');
     }
     else {
         let workspaceTarget = parseQueryParams(rd ?? undefined)['workspace'];
         if (rd && workspaceTarget) {
             $workspaceStore = workspaceTarget;
-            gotoFn(rd);
+            goto(rd);
             return;
         }
         if (!$usersWorkspaceStore) {
@@ -112,24 +111,24 @@ async function redirectUser() {
                     workspace: $workspaceStore
                 });
                 if (!emptyString(defaultApp.default_app_path)) {
-                    gotoFn(`/apps/get/${defaultApp.default_app_path}`);
+                    goto(`/apps/get/${defaultApp.default_app_path}`);
                 }
                 else {
-                    gotoFn(rd ?? '/');
+                    goto(rd ?? '/');
                 }
             }
             else {
-                gotoFn(rd ?? '/');
+                goto(rd ?? '/');
             }
         }
         else if (rd?.startsWith('/user/workspaces')) {
-            gotoFn(rd);
+            goto(rd);
         }
         else if (rd == '/#user-settings') {
-            gotoFn(`/user/workspaces#user-settings`);
+            goto(`/user/workspaces#user-settings`);
         }
         else {
-            gotoFn(`/user/workspaces${rd ? `?rd=${encodeURIComponent(rd)}` : ''}`);
+            goto(`/user/workspaces${rd ? `?rd=${encodeURIComponent(rd)}` : ''}`);
         }
     }
 }
@@ -247,74 +246,68 @@ $: error && sendUserToast(error, true);
 	{/if}
 
 	{#if showPassword}
-		{#if loginPasswordRequireEEOnPublicApps && !$enterpriseLicense}
-			<p class="text-xs text-red-400 italic p-6">
-				To log in with email and password on a public app, Windmill requires an enterprise license
-			</p>
-		{:else}
-			<div>
-				<div class="space-y-6">
-					{#if isCloudHosted()}
-						<p class="text-xs text-tertiary italic pb-6">
-							To get credentials without the OAuth providers above, send an email at
-							contact@windmill.dev
-						</p>
-					{/if}
+		<div>
+			<div class="space-y-6">
+				{#if isCloudHosted()}
+					<p class="text-xs text-tertiary italic pb-6">
+						To get credentials without the OAuth providers above, send an email at
+						contact@windmill.dev
+					</p>
+				{/if}
+				<div>
+					<label for="email" class="block text-sm font-medium leading-6 text-primary">
+						Email
+					</label>
 					<div>
-						<label for="email" class="block text-sm font-medium leading-6 text-primary">
-							Email
-						</label>
-						<div>
-							<input
-								type="email"
-								bind:value={email}
-								id="email"
-								autocomplete="email"
-								class="block w-full rounded-md border-0 py-1.5 text-primary shadow-sm ring-1 ring-inset placeholder:text-secondary focus:ring-2 focus:ring-inset focus:ring-frost-600 sm:text-sm sm:leading-6"
-							/>
-						</div>
+						<input
+							type="email"
+							bind:value={email}
+							id="email"
+							autocomplete="email"
+							class="block w-full rounded-md border-0 py-1.5 text-primary shadow-sm ring-1 ring-inset placeholder:text-secondary focus:ring-2 focus:ring-inset focus:ring-frost-600 sm:text-sm sm:leading-6"
+						/>
 					</div>
+				</div>
 
+				<div>
+					<label for="password" class="block text-sm font-medium leading-6 text-primary">
+						Password
+					</label>
 					<div>
-						<label for="password" class="block text-sm font-medium leading-6 text-primary">
-							Password
-						</label>
-						<div>
-							<input
-								on:keyup={handleKeyUp}
-								bind:value={password}
-								id="password"
-								type="password"
-								autocomplete="current-password"
-								class="block w-full rounded-md border-0 py-1.5 text-shadow shadow-sm ring-1 ring-inset placeholder:text-secondary focus:ring-2 focus:ring-inset focus:ring-frost-600 sm:text-sm sm:leading-6"
-							/>
-						</div>
+						<input
+							on:keyup={handleKeyUp}
+							bind:value={password}
+							id="password"
+							type="password"
+							autocomplete="current-password"
+							class="block w-full rounded-md border-0 py-1.5 text-shadow shadow-sm ring-1 ring-inset placeholder:text-secondary focus:ring-2 focus:ring-inset focus:ring-frost-600 sm:text-sm sm:leading-6"
+						/>
 					</div>
+				</div>
 
-					<div class="pt-2">
-						<button
-							on:click={login}
-							disabled={!email || !password}
-							class="flex w-full justify-center rounded-md bg-frost-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-frost-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-frost-600"
-						>
-							Sign in
-						</button>
-					</div>
+				<div class="pt-2">
+					<button
+						on:click={login}
+						disabled={!email || !password}
+						class="flex w-full justify-center rounded-md bg-frost-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-frost-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-frost-600"
+					>
+						Sign in
+					</button>
 				</div>
 			</div>
-		{/if}
-	{/if}
 
-	{#if isCloudHosted()}
-		<p class="text-2xs text-tertiary italic mt-10 text-center">
-			By logging in, you agree to our
-			<a href="https://windmill.dev/terms_of_service" target="_blank" rel="noreferrer">
-				Terms of Service
-			</a>
-			and
-			<a href="https://windmill.dev/privacy_policy" target="_blank" rel="noreferrer">
-				Privacy Policy
-			</a>
-		</p>
+			{#if isCloudHosted()}
+				<p class="text-2xs text-tertiary italic mt-10 text-center">
+					By logging in, you agree to our
+					<a href="https://windmill.dev/terms_of_service" target="_blank" rel="noreferrer">
+						Terms of Service
+					</a>
+					and
+					<a href="https://windmill.dev/privacy_policy" target="_blank" rel="noreferrer">
+						Privacy Policy
+					</a>
+				</p>
+			{/if}
+		</div>
 	{/if}
 </div>

package/package/components/Login.svelte.d.ts

@@ -6,8 +6,6 @@ declare const __propDef: {
         password?: string | undefined;
         error?: string | undefined;
         popup?: boolean | undefined;
-        loginPasswordRequireEEOnPublicApps?: boolean | undefined;
-        gotoFn?: ((path: string, opt?: Record<string, any> | undefined) => void) | undefined;
     };
     events: {
         login: CustomEvent<any>;

package/package/components/ModulePreview.svelte

@@ -108,7 +108,7 @@ let forceJson = false;
 					duration={testJob?.['duration_ms']}
 					mem={testJob?.['mem_peak']}
 					content={testJob?.logs}
-					isLoading={testIsLoading}
+					isLoading={testIsLoading && testJob?.['running'] == false}
 					tag={testJob?.tag}
 				/>
 			</Pane>

package/package/components/ObjectStoreConfigSettings.svelte

@@ -125,7 +125,7 @@ async function testConnection() {
 			<span class="text-tertiary text-2xs"
 				>If left empty, will be derived automatically from $AWS_SECRET_KEY, pod or ec2 profile</span
 			>
-			<input type="password" bind:value={bucket_config.secret_key} />
+			<input type="password" autocomplete="new-password" bind:value={bucket_config.secret_key} />
 		</label>
 		<label class="block pb-2">
 			<span class="text-primary font-semibold text-sm">Endpoint</span>
@@ -151,7 +151,7 @@ async function testConnection() {
 		</label>
 		<label class="block pb-2">
 			<span class="text-primary font-semibold text-sm">Access Key</span>
-			<input type="password" bind:value={bucket_config.accessKey} />
+			<input type="password" autocomplete="new-password" bind:value={bucket_config.accessKey} />
 		</label>
 		<label class="block pb-2">
 			<span class="text-primary font-semibold text-sm"

package/package/components/Password.svelte

@@ -44,7 +44,7 @@ $: red = required && (password == '' || password == undefined);
 		type="password"
 		bind:value={password}
 		on:keydown
-		autocomplete="off"
+		autocomplete="new-password"
 		{placeholder}
 		{disabled}
 	/>

package/package/components/Portal.svelte

@@ -29,11 +29,11 @@
 					}. Allowed types: string (CSS selector) or HTMLElement.`
 				)
 			}
-			targetEl.appendChild(el)
-			el.hidden = false
 			if (!el.classList.contains('windmill-app')) {
 				el.classList.add('windmill-app')
 			}
+			targetEl.appendChild(el)
+			el.hidden = false
 		}
 
 		function destroy() {

package/package/components/apps/components/GroupWrapper.svelte

@@ -1,6 +1,7 @@
 <script>import { setContext } from 'svelte';
-export let groupContext;
-setContext('GroupContext', groupContext);
+export let context;
+export let id;
+setContext('GroupContext', { id, context });
 </script>
 
 <slot />

package/package/components/apps/components/GroupWrapper.svelte.d.ts

@@ -2,7 +2,8 @@ import { SvelteComponent } from "svelte";
 import type { Writable } from 'svelte/store';
 declare const __propDef: {
     props: {
-        groupContext: Writable<Record<string, any>>;
+        context: Writable<Record<string, any>>;
+        id: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;