windmill-components 1.642.0 → 1.655.0

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,7 +117,7 @@ numpy>=1.24.0
 	}
 }`,
     // 		go: `module mymod
-    // go 1.25
+    // go 1.26
     // require (
     // 	rsc.io/quote v1.5.2
     // 	github.com/gorilla/mux v1.8.1

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,11 +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';
 import SettingCard from './instanceSettings/SettingCard.svelte';
-export let value;
-$: enabled = value != undefined;
-let org = '';
-$: changeOrg(org);
+let { value = $bindable() } = $props();
+let org = $state('');
 function changeOrg(org) {
     if (value) {
         value = {
@@ -24,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}

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/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) =>

package/package/components/apps/components/display/AppAccordionList.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { createBubbler, stopPropagation } from 'svelte/legacy';
 const bubble = createBubbler();
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { initOutput } from '../../editor/appUtils';
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
@@ -12,12 +12,12 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, componentInput, customCss = undefined, render, initializing = $bindable(), componentContainerHeight } = $props();
 let accordionInput = $derived(componentInput);
 const { app, focusedGrid, selectedComponent, worldStore, connectingInput } = getContext('AppViewerContext');
-let everRender = $state(render);
+let everRender = $state(untrack(() => render));
 $effect.pre(() => {
     render && !everRender && (everRender = true);
 });
 let activeIndex = $state(0);
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     activeIndex: 0,
     loading: false,
@@ -29,7 +29,7 @@ function onFocus() {
         subGridIndex: 0
     };
 }
-let css = $state(initCss($app.css?.accordionlistcomponent, customCss));
+let css = $state(initCss($app.css?.accordionlistcomponent, untrack(() => customCss)));
 let result = $state(undefined);
 let inputs = $state({});
 $effect.pre(() => {

package/package/components/apps/components/display/AppAlert.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
 import { components } from '../../editor/component';
@@ -11,9 +11,9 @@ import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import { appendClass } from '../../editor/componentsPanel/cssUtils';
 let { id, configuration, customCss = undefined, render, verticalAlignment = undefined } = $props();
 const { app, worldStore } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['alertcomponent'].initialData.configuration, configuration));
-initOutput($worldStore, id, {});
-let css = $state(initCss($app.css?.alertcomponent, customCss));
+let resolvedConfig = $state(initConfig(components['alertcomponent'].initialData.configuration, untrack(() => configuration)));
+initOutput($worldStore, untrack(() => id), {});
+let css = $state(initCss($app.css?.alertcomponent, untrack(() => customCss)));
 </script>
 
 {#each Object.keys(components['alertcomponent'].initialData.configuration) as key (key)}

package/package/components/apps/components/display/AppBarChart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from 'chart.js';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { Bar, Line } from '../../../chartjs-wrappers/chartJs';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
@@ -10,8 +10,8 @@ import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, componentInput, configuration, initializing = $bindable(undefined), customCss = undefined, render } = $props();
 const { app, worldStore } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['barchartcomponent'].initialData.configuration, configuration));
-let outputs = initOutput($worldStore, id, {
+let resolvedConfig = $state(initConfig(components['barchartcomponent'].initialData.configuration, untrack(() => configuration)));
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false
 });
@@ -65,7 +65,7 @@ let data = $derived({
         }
     }
 });
-let css = $state(initCss($app.css?.barchartcomponent, customCss));
+let css = $state(initCss($app.css?.barchartcomponent, untrack(() => customCss)));
 </script>
 
 {#each Object.keys(components['barchartcomponent'].initialData.configuration) as key (key)}

package/package/components/apps/components/display/AppCarouselList.svelte

@@ -14,24 +14,24 @@ import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, componentInput, configuration, customCss = undefined, render, initializing = $bindable(), componentContainerHeight } = $props();
 const { app, focusedGrid, selectedComponent, worldStore, connectingInput, componentControl } = getContext('AppViewerContext');
-let everRender = $state(render);
+let everRender = $state(untrack(() => render));
 $effect.pre(() => {
     render && !everRender && (everRender = true);
 });
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false,
     inputs: {},
     currentIndex: 0
 });
-const resolvedConfig = $state(initConfig(components['carousellistcomponent'].initialData.configuration, configuration));
+const resolvedConfig = $state(initConfig(components['carousellistcomponent'].initialData.configuration, untrack(() => configuration)));
 function onFocus() {
     $focusedGrid = {
         parentComponentId: id,
         subGridIndex: 0
     };
 }
-let css = $state(initCss($app.css?.carousellistcomponent, customCss));
+let css = $state(initCss($app.css?.carousellistcomponent, untrack(() => customCss)));
 let result = $state(undefined);
 let inputs = $state({});
 let carousel = $state();
@@ -71,7 +71,7 @@ function handleIndexChange() {
 $effect.pre(() => {
     currentPageIndex != undefined && untrack(() => handleIndexChange());
 });
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setSelectedIndex: (index) => {
         if (Array.isArray(result) && index >= 0 && index < result.length) {
             currentPageIndex = index;

package/package/components/apps/components/display/AppChartJs.svelte

@@ -2,7 +2,7 @@
 import { Chart as ChartJS, registerables } from 'chart.js';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { initCss } from '../../utils';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
@@ -10,20 +10,20 @@ import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, componentInput, configuration, initializing = $bindable(undefined), customCss = undefined, render } = $props();
 const { app, worldStore } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false
 });
 ChartJS.register(...registerables);
 let result = $state(undefined);
-const resolvedConfig = $state(initConfig(components['chartjscomponent'].initialData.configuration, configuration));
+const resolvedConfig = $state(initConfig(components['chartjscomponent'].initialData.configuration, untrack(() => configuration)));
 let options = $derived({
     responsive: true,
     animation: false,
     maintainAspectRatio: false,
     ...(resolvedConfig.options ?? {})
 });
-let css = $state(initCss($app.css?.chartjscomponent, customCss));
+let css = $state(initCss($app.css?.chartjscomponent, untrack(() => customCss)));
 </script>
 
 {#each Object.keys(components['chartjscomponent'].initialData.configuration) as key (key)}

package/package/components/apps/components/display/AppChartJsV2.svelte

@@ -2,7 +2,7 @@
 import { Chart as ChartJS, registerables } from 'chart.js';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { initCss } from '../../utils';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
@@ -14,13 +14,13 @@ let resolvedDatasets = $state(undefined);
 let resolvedDatasetsValues = $state([]);
 let resolvedXData = $state([]);
 const { app, worldStore, darkMode } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false
 });
 ChartJS.register(...registerables);
 let result = $state(undefined);
-const resolvedConfig = $state(initConfig(components['chartjscomponent'].initialData.configuration, configuration));
+const resolvedConfig = $state(initConfig(components['chartjscomponent'].initialData.configuration, untrack(() => configuration)));
 function hasScales() {
     const type = resolvedConfig?.type;
     return type === 'bar' || type === 'line' || type === 'scatter' || type === 'bubble';
@@ -60,7 +60,7 @@ let data = $derived(datasets && xData && resolvedDatasets
         }))
     }
     : result);
-let css = $state(initCss($app.css?.chartjscomponent, customCss));
+let css = $state(initCss($app.css?.chartjscomponent, untrack(() => customCss)));
 </script>
 
 {#if datasets}

package/package/components/apps/components/display/AppChat.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { components } from '../../editor/component';
@@ -15,7 +15,7 @@ import { randomUUID } from '../../../flows/conversations/FlowChatManager.svelte'
 let { id, componentInput, configuration, customCss = undefined, recomputeIds = undefined, render, errorHandledByComponent = $bindable(false) } = $props();
 const { worldStore, app, componentControl } = getContext('AppViewerContext');
 // Initialize outputs
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false,
     jobId: undefined,
@@ -23,9 +23,9 @@ let outputs = initOutput($worldStore, id, {
     userMessage: '' // Output for evalv2 field
 });
 // Resolve configuration
-let resolvedConfig = $state(initConfig(components['chatcomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['chatcomponent'].initialData.configuration, untrack(() => configuration)));
 // Initialize CSS
-let css = $state(initCss($app.css?.chatcomponent, customCss));
+let css = $state(initCss($app.css?.chatcomponent, untrack(() => customCss)));
 // State
 let runnableComponent = $state();
 let runnableWrapper = $state();
@@ -40,7 +40,7 @@ let accumulatedContent = $state('');
 // Generate stable memory_id for chat session (for agent memory persistence)
 let chatMemoryId = $state(randomUUID());
 // Register component control for programmatic access
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     sendMessage: (message) => {
         if (message && !loading) {
             inputValue = message;