windmill-components 1.623.2 → 1.655.0

package/package/components/WorkerGroup.svelte.d.ts

@@ -15,6 +15,7 @@ interface Props {
         autoscaling?: AutoscalingConfig;
         periodic_script_bash?: string;
         periodic_script_interval_seconds?: number;
+        native_mode?: boolean;
     };
     activeWorkers: number;
     customTags: string[] | undefined;
@@ -25,6 +26,7 @@ interface Props {
     shouldAutoOpenDrawer?: boolean;
     onDrawerOpened?: () => void;
     onDeleted?: (deletedGroupName: string) => void;
+    onOpenYamlEditor?: () => void;
     selectGroup?: import('svelte').Snippet;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {

package/package/components/WorkerRepl.svelte

@@ -333,9 +333,8 @@ listPendingJobs();
 						Full path
 
 						<Tooltip
-							markdownTooltip="Commands run in the default directory. Run a standalone `cd` to change it. Chained or invalid `cd` commands won’t apply."
 							class="absolute top-0.5"
-						/>
+						>Commands run in the default directory. Run a standalone ‘cd’ to change it. Chained or invalid ‘cd’ commands won’t apply.</Tooltip>
 					</Badge>
 				</div>
 				<input type="text" disabled bind:value={working_directory} />

package/package/components/WorkflowTimeline.svelte

@@ -2,27 +2,23 @@
 import { displayDate, msToSec } from '../utils';
 import { onDestroy } from 'svelte';
 import { getDbClockNow } from '../forLater';
-import { ExternalLink, Loader2 } from 'lucide-svelte';
+import { Loader2 } from 'lucide-svelte';
 import TimelineBar from './TimelineBar.svelte';
-export let flow_status;
-export let flowDone = false;
-$: min = Object.values(flow_status).reduce((a, b) => Math.min(a, b.scheduled_for ? new Date(b.scheduled_for).getTime() : Infinity), Infinity);
-$: max = flowDone
-    ? Object.values(flow_status).reduce((a, b) => Math.max(a, b.started_at ? new Date(b.started_at).getTime() + (b.duration_ms ?? 0) : 0), 0)
-    : undefined;
-$: total = flowDone && max ? max - min : now - min;
-let now = getDbClockNow().getTime();
-let interval = setInterval((x) => {
+let { flow_status, flowDone = false } = $props();
+let now = $state(getDbClockNow().getTime());
+let interval = setInterval(() => {
     if (!max) {
         now = getDbClockNow().getTime();
     }
-    if (min && (!max || total == undefined)) {
-        total = max ? max - min : Math.max(now - min, 2000);
-    }
 }, 30);
 onDestroy(() => {
     interval && clearInterval(interval);
 });
+let min = $derived(Object.values(flow_status).reduce((a, b) => Math.min(a, b.scheduled_for ? new Date(b.scheduled_for).getTime() : Infinity), Infinity));
+let max = $derived(flowDone
+    ? Object.values(flow_status).reduce((a, b) => Math.max(a, b.started_at ? new Date(b.started_at).getTime() + (b.duration_ms ?? 0) : 0), 0)
+    : undefined);
+let total = $derived(flowDone && max ? max - min : Math.max(now - min, 2000));
 </script>
 
 {#if flow_status}
@@ -57,7 +53,7 @@ onDestroy(() => {
 			<div class="overflow-auto max-h-60 shadow-inner dark:shadow-gray-700 relative">
 				<div class="px-2 py-2 text-xs grid grid-cols-6 w-full gap-1">
 					<a target="_blank" class="inline-flex gap-2 items-baseline" href="{base}/run/{k}"
-						>{v.name ?? k} <ExternalLink size={12} /></a
+						>{v.name ?? k}</a
 					>
 					<div class="col-span-5 flex min-h-6 w-full">
 						{#if min && total}

package/package/components/WorkflowTimeline.svelte.d.ts

@@ -1,22 +1,8 @@
 import type { WorkflowStatus } from '../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const WorkflowTimeline: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flow_status: Record<string, WorkflowStatus>;
     flowDone?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type WorkflowTimeline = InstanceType<typeof WorkflowTimeline>;
+}
+declare const WorkflowTimeline: import("svelte").Component<Props, {}, "">;
+type WorkflowTimeline = ReturnType<typeof WorkflowTimeline>;
 export default WorkflowTimeline;

package/package/components/WorkspaceDependenciesEditor.svelte

@@ -117,9 +117,9 @@ numpy>=1.24.0
 	}
 }`,
     // 		go: `module mymod
-    // go 1.25
+    // go 1.26
     // require (
-    // 	rsc.io/quote v1.5.2 
+    // 	rsc.io/quote v1.5.2
     // 	github.com/gorilla/mux v1.8.1
     // 	github.com/lib/pq v1.10.9
     // 	github.com/joho/godotenv v1.5.1
@@ -159,7 +159,9 @@ $effect(() => {
 // Track when editor is ready
 let editorReady = $state(false);
 // Calculate when deploy button should be disabled
-let isDisabled = $derived(!can_write || !valid || (workspaceDependenciesType === 'named' && workspaceDependenciesName.trim() === ''));
+let isDisabled = $derived(!can_write ||
+    !valid ||
+    (workspaceDependenciesType === 'named' && workspaceDependenciesName.trim() === ''));
 $effect(() => {
     if (editor && !editorReady) {
         editor.setCode(workspaceDependencies.content);
@@ -192,7 +194,7 @@ export async function initNew() {
     workspaceDependencies = {
         content: LANGUAGE_TEMPLATES.python3,
         language: 'python3',
-        description: "",
+        description: ''
     };
     edit = false;
     initialName = undefined;
@@ -252,10 +254,12 @@ async function updateWorkspaceDependencies() {
                 content: workspaceDependencies.content,
                 language: workspaceDependencies.language,
                 workspace_id: $workspaceStore,
-                description: workspaceDependencies.description,
+                description: workspaceDependencies.description
             }
         });
-        const displayName = workspaceDependenciesType === 'workspace' ? `workspace default for ${workspaceDependencies.language}` : workspaceDependenciesName;
+        const displayName = workspaceDependenciesType === 'workspace'
+            ? `workspace default for ${workspaceDependencies.language}`
+            : workspaceDependenciesName;
         sendUserToast(`Deployed enforced dependencies: ${displayName}`);
         dispatch('create');
         drawer?.closeDrawer();
@@ -290,7 +294,9 @@ function cancelDeploy() {
 
 <Drawer bind:this={drawer} size="1200px">
 	<DrawerContent
-		title={edit ? `Deploy ${getFullFilename(workspaceDependencies.language, workspaceDependenciesType === 'workspace' ? null : workspaceDependenciesName)}` : 'Add enforced dependencies'}
+		title={edit
+			? `Deploy ${getFullFilename(workspaceDependencies.language, workspaceDependenciesType === 'workspace' ? null : workspaceDependenciesName)}`
+			: 'Add enforced dependencies'}
 		on:close={drawer?.closeDrawer}
 	>
 		<div class="flex flex-col gap-8">
@@ -303,15 +309,20 @@ function cancelDeploy() {
 			{#if showWarning && currentImportedPath}
 				<DependenciesDeploymentWarning
 					importedPath={currentImportedPath}
-					title={workspaceDependenciesType === 'workspace' ? "Redeploy impacted runnables?" : "Deployment Warning"}
-					confirmText={workspaceDependenciesType === 'workspace' ? "I'm Sure - Deploy Default" : "Deploy Anyway"}
+					title={workspaceDependenciesType === 'workspace'
+						? 'Redeploy impacted runnables?'
+						: 'Deployment Warning'}
+					confirmText={workspaceDependenciesType === 'workspace'
+						? "I'm Sure - Deploy Default"
+						: 'Deploy Anyway'}
 					onConfirm={confirmDeploy}
 					onCancel={cancelDeploy}
 					isUnnamedDefault={workspaceDependenciesType === 'workspace'}
-					language={LANGUAGE_OPTIONS.find(opt => opt.value === workspaceDependencies.language)?.label || workspaceDependencies.language}
+					language={LANGUAGE_OPTIONS.find((opt) => opt.value === workspaceDependencies.language)
+						?.label || workspaceDependencies.language}
 				/>
 			{/if}
-			
+
 			<Section label="Enforced Dependencies Type">
 				<div class="flex flex-col gap-4">
 					{#if hasWorkspaceDefault(workspaceDependencies.language) && !edit}
@@ -335,7 +346,10 @@ function cancelDeploy() {
 							</Button>
 						</div>
 					{:else}
-						<ToggleButtonGroup bind:selected={workspaceDependenciesType} disabled={!can_write || edit}>
+						<ToggleButtonGroup
+							bind:selected={workspaceDependenciesType}
+							disabled={!can_write || edit}
+						>
 							{#snippet children({ item })}
 								<ToggleButton
 									disabled={!can_write || edit}
@@ -363,8 +377,8 @@ function cancelDeploy() {
 					{/if}
 					<div class="text-sm text-tertiary">
 						<FolderOpen size={16} class="inline mr-2" />
-						Default Enforced Dependencies are used when no specific Dependencies are referenced from runnables.
-						Named dependencies can be referenced by scripts using
+						Default Enforced Dependencies are used when no specific Dependencies are referenced from
+						runnables. Named dependencies can be referenced by scripts using
 						<a
 							href="https://www.windmill.dev/docs/core_concepts/workspace_dependencies"
 							target="_blank"
@@ -386,7 +400,9 @@ function cancelDeploy() {
 					/>
 					<div class="text-sm text-tertiary">
 						<Code2 size={16} class="inline mr-2" />
-						{edit ? 'Language cannot be changed after creation.' : 'Select the programming language these dependencies are for. This will load a default template.'}
+						{edit
+							? 'Language cannot be changed after creation.'
+							: 'Select the programming language these dependencies are for. This will load a default template.'}
 					</div>
 				</div>
 			</Section>
@@ -400,7 +416,8 @@ function cancelDeploy() {
 					class="input"
 				/>
 				<div class="text-sm text-tertiary mt-2">
-					Provide a brief description to help others understand the purpose of these enforced dependencies.
+					Provide a brief description to help others understand the purpose of these enforced
+					dependencies.
 				</div>
 			</Section>
 
@@ -426,9 +443,8 @@ function cancelDeploy() {
 					{/await}
 				</div>
 			</Section>
-
 		</div>
-		
+
 		{#snippet actions()}
 			<Button
 				on:click={handleDeployClick}

package/package/components/WorkspaceDeployLayout.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">import { Loader2 } from 'lucide-svelte';
+import { Badge } from './common';
+import Row from './common/table/Row.svelte';
+import Tooltip from './Tooltip.svelte';
+let { items, selectedItems, selectablePredicate = () => true, deploymentStatus, allSelected = false, emptyMessage = 'No items to deploy', header, alerts, itemSummary, itemActions, footer, onToggleItem, onSelectAll, onDeselectAll } = $props();
+let selectableItems = $derived(items.filter(selectablePredicate));
+let hasSelectableItems = $derived(selectableItems.length > 0);
+</script>
+
+<div class="flex flex-col h-full">
+	<!-- Header section -->
+	{#if header}
+		<div class="bg-surface">
+			{@render header()}
+		</div>
+	{/if}
+
+	<!-- Alerts section -->
+	{#if alerts}
+		{@render alerts()}
+	{/if}
+
+	{#if items.length > 0}
+		<!-- Select all row -->
+		<div class="px-4 py-2 flex items-center justify-between">
+			<div
+				class="flex items-center gap-2 text-secondary text-sm"
+				class:opacity-50={!hasSelectableItems}
+			>
+				<input
+					type="checkbox"
+					disabled={!hasSelectableItems}
+					checked={allSelected}
+					onchange={allSelected ? onDeselectAll : onSelectAll}
+					class="rounded max-w-4 w-full"
+				/> Select all
+			</div>
+		</div>
+
+		<!-- Items list -->
+		<div class="overflow-y-auto">
+			<div class="border rounded-md bg-surface-tertiary">
+				{#each items as item (item.key)}
+					{@const isSelectable = selectablePredicate(item)}
+					{@const isSelected = selectedItems.includes(item.key)}
+					{@const status = deploymentStatus[item.key]}
+					{@const isDeployed = status?.status === 'deployed'}
+
+					<Row
+						isSelectable={isSelectable && !isDeployed}
+						alignWithSelectable={true}
+						disabled={!isSelectable}
+						selected={isSelected && !isDeployed}
+						onSelect={() => onToggleItem?.(item)}
+						path={item.kind !== 'resource' &&
+						item.kind !== 'variable' &&
+						item.kind !== 'resource_type'
+							? item.path
+							: ''}
+						marked={undefined}
+						kind={item.kind}
+						triggerKind={item.triggerKind}
+						canFavorite={false}
+						workspaceId=""
+					>
+						{#snippet customSummary()}
+							{#if itemSummary}
+								{@render itemSummary(item)}
+							{:else}
+								{item.path}
+							{/if}
+						{/snippet}
+						{#snippet actions()}
+							{#if itemActions}
+								{@render itemActions(item)}
+							{/if}
+							<!-- Deployment status always shown -->
+							{#if status}
+								{#if status.status === 'loading'}
+									<Loader2 class="animate-spin" />
+								{:else if status.status === 'deployed'}
+									<Badge color="green">Deployed</Badge>
+								{:else if status.status === 'failed'}
+									<div class="inline-flex gap-1">
+										<Badge color="red">Failed</Badge>
+										<Tooltip>{status.error}</Tooltip>
+									</div>
+								{/if}
+							{/if}
+						{/snippet}
+					</Row>
+				{/each}
+			</div>
+		</div>
+	{:else}
+		<div class="flex items-center justify-center h-full">
+			<div class="text-gray-500">{emptyMessage}</div>
+		</div>
+	{/if}
+
+	<!-- Footer -->
+	{#if footer}
+		<div class="p-4 bg-surface">
+			{@render footer()}
+		</div>
+	{/if}
+</div>

package/package/components/WorkspaceDeployLayout.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { Kind } from '../utils_deployable';
+interface DeployableItem {
+    key: string;
+    path: string;
+    kind: Kind;
+    triggerKind?: string;
+    [key: string]: unknown;
+}
+interface Props {
+    items: DeployableItem[];
+    selectedItems: string[];
+    selectablePredicate?: (item: DeployableItem) => boolean;
+    deploymentStatus: Record<string, {
+        status: 'loading' | 'deployed' | 'failed';
+        error?: string;
+    }>;
+    allSelected?: boolean;
+    emptyMessage?: string;
+    header?: Snippet;
+    alerts?: Snippet;
+    itemSummary?: Snippet<[DeployableItem]>;
+    itemActions?: Snippet<[DeployableItem]>;
+    footer?: Snippet;
+    onToggleItem?: (item: DeployableItem) => void;
+    onSelectAll?: () => void;
+    onDeselectAll?: () => void;
+}
+declare const WorkspaceDeployLayout: import("svelte").Component<Props, {}, "">;
+type WorkspaceDeployLayout = ReturnType<typeof WorkspaceDeployLayout>;
+export default WorkspaceDeployLayout;

package/package/components/ZitadelSetting.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
-export let value;
-$: enabled = value != undefined;
-let org = '';
-$: changeOrg(org);
+import SettingCard from './instanceSettings/SettingCard.svelte';
+let { value = $bindable() } = $props();
+let org = $state('');
 function changeOrg(org) {
     if (value) {
         value = {
@@ -23,10 +23,14 @@ function changeOrg(org) {
         };
     }
 }
+let enabled = $derived(value != undefined);
+run(() => {
+    changeOrg(org);
+});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'zitadel'} after={true} /></div><Toggle
 			checked={enabled}
@@ -40,7 +44,7 @@ function changeOrg(org) {
 		/></label
 	>
 	{#if enabled}
-		<div class="border rounded p-4 flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Zitadel Url</span>
 				<span class="text-secondary font-normal text-xs">{'ZITADEL_URL/oauth/v2/authorize'}</span>
@@ -67,6 +71,6 @@ function changeOrg(org) {
 					bind:value={value['secret']}
 				/>
 			</label>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/ZitadelSetting.svelte.d.ts

@@ -1,20 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ZitadelSetting: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ZitadelSetting = InstanceType<typeof ZitadelSetting>;
+}
+declare const ZitadelSetting: import("svelte").Component<Props, {}, "value">;
+type ZitadelSetting = ReturnType<typeof ZitadelSetting>;
 export default ZitadelSetting;

package/package/components/aiProviderStorage.d.ts

@@ -0,0 +1,5 @@
+import type { ProviderConfig } from '../gen';
+export declare function loadStoredConfig(): ProviderConfig | undefined;
+export declare function saveConfig(config: ProviderConfig | undefined): void;
+export declare function removeConfig(): void;
+export declare function isSameAsStoredConfig(config: ProviderConfig | undefined): boolean;

package/package/components/aiProviderStorage.js

@@ -0,0 +1,50 @@
+import { AI_PROVIDERS } from './copilot/lib';
+const STORAGE_KEY = 'windmill_ai_provider_config';
+export function loadStoredConfig() {
+    if (typeof localStorage === 'undefined') {
+        return undefined;
+    }
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            // Validate that the stored provider is still available
+            if (parsed.kind && AI_PROVIDERS[parsed.kind]) {
+                return parsed;
+            }
+        }
+    }
+    catch (e) {
+        console.error('Failed to load AI provider config from localStorage:', e);
+    }
+    return undefined;
+}
+export function saveConfig(config) {
+    if (typeof localStorage === 'undefined') {
+        return;
+    }
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+    }
+    catch (e) {
+        console.error('Failed to save AI provider config to localStorage:', e);
+    }
+}
+export function removeConfig() {
+    if (typeof localStorage === 'undefined') {
+        return;
+    }
+    try {
+        localStorage.removeItem(STORAGE_KEY);
+    }
+    catch (e) {
+        console.error('Failed to remove AI provider config from localStorage:', e);
+    }
+}
+export function isSameAsStoredConfig(config) {
+    const storedConfig = loadStoredConfig();
+    return (storedConfig !== undefined &&
+        storedConfig.kind === config?.kind &&
+        storedConfig.resource === config?.resource &&
+        storedConfig.model === config?.model);
+}

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

@@ -1,6 +1,9 @@
-<script lang="ts">import { setContext } from 'svelte';
+<script lang="ts">import { setContext, untrack } from 'svelte';
 let { context, id, children } = $props();
-setContext('GroupContext', { id, context });
+setContext('GroupContext', {
+    id: untrack(() => id),
+    context: untrack(() => context)
+});
 </script>
 
 {@render children?.()}

package/package/components/apps/components/buttons/AppButton.svelte

@@ -17,14 +17,15 @@ const rowContext = getContext('RowWrapperContext');
 const rowInputs = getContext('RowInputs');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
-let resolvedConfig = $state(initConfig(components['buttoncomponent'].initialData.configuration, configuration));
-let outputs = initOutput($worldStore, id, {
+let resolvedConfig = $state(initConfig(components['buttoncomponent'].initialData.configuration, untrack(() => configuration)));
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false,
     jobId: undefined
 });
-if (controls) {
-    $componentControl[id] = controls;
+const untrackedControls = untrack(() => controls);
+if (untrackedControls) {
+    $componentControl[untrack(() => id)] = untrackedControls;
 }
 let runnableComponent = $state();
 let confirmedCallback = $state(undefined);
@@ -119,7 +120,7 @@ async function handleClick(event) {
 }
 let loading = $state(false);
 let backgroundClickFeedback = $state(false);
-let css = $state(initCss($app.css?.buttoncomponent, customCss));
+let css = $state(initCss($app.css?.buttoncomponent, untrack(() => customCss)));
 $effect(() => {
     errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay';
 });

package/package/components/apps/components/buttons/AppForm.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { Button } from '../../../common';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { components } from '../../editor/component';
 import { initCss } from '../../utils';
@@ -12,13 +12,13 @@ import { User } from 'lucide-svelte';
 let { id, componentInput, configuration, recomputeIds = undefined, extraQueryParams = {}, horizontalAlignment = undefined, customCss = undefined, render, errorHandledByComponent = $bindable(false) } = $props();
 export const staticOutputs = ['loading', 'result', 'jobId'];
 const { app, worldStore, stateId, componentControl } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false,
     jobId: undefined
 });
-const resolvedConfig = $state(initConfig(components['formcomponent'].initialData.configuration, configuration));
-$componentControl[id] = {
+const resolvedConfig = $state(initConfig(components['formcomponent'].initialData.configuration, untrack(() => configuration)));
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         wrapper?.setArgs(nvalue);
     },
@@ -34,7 +34,7 @@ $componentControl[id] = {
 };
 let runnableComponent = $state();
 let loading = $state(false);
-let css = $state(initCss($app.css?.formcomponent, customCss));
+let css = $state(initCss($app.css?.formcomponent, untrack(() => customCss)));
 let wrapper = $state();
 $effect(() => {
     errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay';

package/package/components/apps/components/buttons/AppFormButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { Button } from '../../../common';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { User } from 'lucide-svelte';
@@ -12,7 +12,7 @@ import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, componentInput, configuration, recomputeIds = undefined, extraQueryParams = {}, horizontalAlignment = undefined, verticalAlignment = undefined, customCss = undefined, render, errorHandledByComponent = $bindable(false) } = $props();
 const { app, worldStore, componentControl } = getContext('AppViewerContext');
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     onDelete: () => {
         modal?.close();
     },
@@ -26,14 +26,14 @@ $componentControl[id] = {
         runnableComponent?.validate(key);
     }
 };
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false
 });
-let resolvedConfig = $state(initConfig(components['formbuttoncomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['formbuttoncomponent'].initialData.configuration, untrack(() => configuration)));
 let runnableComponent = $state();
 let errors = {};
-let css = $state(initCss($app?.css?.formbuttoncomponent, customCss));
+let css = $state(initCss($app?.css?.formbuttoncomponent, untrack(() => customCss)));
 let runnableWrapper = $state();
 let loading = $state(false);
 let modal = $state();

package/package/components/apps/components/buttons/AppSchemaForm.svelte

@@ -16,7 +16,7 @@ let { id, componentInput, initializing = $bindable(undefined), render, configura
 const { worldStore, connectingInput, app, selectedComponent, componentControl, appPath, isEditor, workspace } = getContext('AppViewerContext');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false,
     valid: true,
@@ -40,7 +40,7 @@ onDestroy(() => {
     listInputs?.remove(id);
 });
 let schemaForm = $state();
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         args = nvalue;
         outputs.values.set(nvalue, false);
@@ -55,8 +55,8 @@ $componentControl[id] = {
         schemaForm?.validate(key);
     }
 };
-let css = $state(initCss($app.css?.schemaformcomponent, customCss));
-const resolvedConfig = $state(initConfig(components['schemaformcomponent'].initialData.configuration, configuration));
+let css = $state(initCss($app.css?.schemaformcomponent, untrack(() => customCss)));
+const resolvedConfig = $state(initConfig(components['schemaformcomponent'].initialData.configuration, untrack(() => configuration)));
 let valid = $state(true);
 let previousDefault = $state(resolvedConfig.defaultValues);
 function onDefaultChange() {
@@ -114,6 +114,7 @@ $effect(() => {
 			class={twMerge('p-2 overflow-auto h-full', css?.container?.class, 'wm-schema-form')}
 			style={css?.container?.style}
 		>
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				onpointerdown={stopPropagation(
 					(e) =>