windmill-components 1.642.0 → 1.655.0

package/package/components/flows/content/AgentToolWrapper.svelte

@@ -24,7 +24,7 @@ let { tool = $bindable(), noEditor = false, enableAi = false, parentModule = und
 	/>
 {:else if isMcpTool(tool)}
 	<!-- MCP tool - use McpToolEditor -->
-	<McpToolEditor bind:tool={tool as McpTool} />
+	<McpToolEditor bind:tool />
 {:else if isWebsearchTool(tool)}
 	<WebsearchToolDisplay />
 {/if}

package/package/components/flows/content/DynamicInputHelpBox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import Alert from '../../common/alert/Alert.svelte';
 import Button from '../../common/button/Button.svelte';
 import { ChevronDown } from 'lucide-svelte';
-$: opened = false;
+let opened = $state(false);
 </script>
 
 <div class="text-xs flex flex-row-reverse">

package/package/components/flows/content/DynamicInputHelpBox.svelte.d.ts

@@ -1,18 +1,3 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DynamicInputHelpBox: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DynamicInputHelpBox = InstanceType<typeof DynamicInputHelpBox>;
+declare const DynamicInputHelpBox: import("svelte").Component<Record<string, never>, {}, "">;
+type DynamicInputHelpBox = ReturnType<typeof DynamicInputHelpBox>;
 export default DynamicInputHelpBox;

package/package/components/flows/content/FlowEditorPanel.svelte

@@ -11,6 +11,7 @@ import { handleSelectTriggerFromKind } from '../../triggers/utils';
 import { computeMissingInputWarnings } from '../missingInputWarnings';
 import FlowResult from './FlowResult.svelte';
 import FlowSelectionPanel from './FlowSelectionPanel.svelte';
+import { resolveSelectedModuleIds, locateModules, areContiguousSiblings } from '../multiSelectUtils';
 let { noEditor = false, enableAi = false, newFlow = false, disabledFlowInputs = false, savedFlow = undefined, onDeployTrigger = () => { }, forceTestTab, highlightArg, onTestFlow, job, isOwner, suspendStatus, onOpenDetails, previewOpen = false, flowModuleSchemaMap = undefined } = $props();
 const { selectionManager, flowStore, flowStateStore, flowInputsStore, pathStore, initialPathStore, fakeInitialPath, previewArgs, flowInputEditorState, stepsInputArgs } = getContext('FlowEditorContext');
 const selectedId = $derived(selectionManager.getSelectedId());
@@ -28,10 +29,22 @@ function checkDup(modules) {
 $effect(() => {
     computeMissingInputWarnings(flowStore, flowStateStore.val, flowInputsStore);
 });
+// Derived state for multi-select operations in the side panel
+let resolvedModuleIds = $derived(resolveSelectedModuleIds(selectionManager.selectedIds, flowStore.val.value.modules ?? []));
+let canMoveSelected = $derived(resolvedModuleIds.length > 0 &&
+    areContiguousSiblings(locateModules(resolvedModuleIds, flowStore.val.value.modules ?? [])));
 </script>
 
 {#if selectionManager && selectionManager.selectedIds.length > 1}
-	<FlowSelectionPanel {selectionManager} {noEditor} />
+	<FlowSelectionPanel
+		{selectionManager}
+		{noEditor}
+		onDeleteSelected={() => flowModuleSchemaMap?.deleteMultiple(resolvedModuleIds)}
+		onDuplicateSelected={() => flowModuleSchemaMap?.duplicateMultiple(resolvedModuleIds)}
+		onMoveSelected={() => flowModuleSchemaMap?.moveMultiple(resolvedModuleIds)}
+		{canMoveSelected}
+		resolvedCount={resolvedModuleIds.length}
+	/>
 {:else if selectedId?.startsWith('settings')}
 	<FlowSettings {enableAi} {noEditor} />
 {:else if selectedId === 'Input'}

package/package/components/flows/content/FlowEnvironmentVariables.svelte

@@ -2,11 +2,15 @@
 import { getContext, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { Button } from '../../common';
-import { Plus, Trash2 } from 'lucide-svelte';
+import { DollarSign, Plus, Trash2 } from 'lucide-svelte';
 import FlowCard from '../common/FlowCard.svelte';
 import JsonEditor from '../../JsonEditor.svelte';
 import Label from '../../Label.svelte';
 import Select from '../../select/Select.svelte';
+import ItemPicker from '../../ItemPicker.svelte';
+import ResourcePicker from '../../ResourcePicker.svelte';
+import { VariableService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
 let { noEditor } = $props();
 const { flowStore } = getContext('FlowEditorContext');
 if (!flowStore.val.value.flow_env) {
@@ -15,6 +19,9 @@ if (!flowStore.val.value.flow_env) {
 let flowEnvVarsMap = $derived(new Map(Object.entries(flowStore.val.value.flow_env || {})));
 function determineValueType(value) {
     if (typeof value === 'string') {
+        if (value.startsWith('$res:')) {
+            return 'resource';
+        }
         try {
             JSON.parse(value);
             return value.trim().startsWith('{') ||
@@ -32,23 +39,42 @@ function determineValueType(value) {
 let flowEnvTypes = $state({});
 const typeOptions = [
     { label: 'String', value: 'string' },
-    { label: 'JSON', value: 'json' }
+    { label: 'JSON', value: 'json' },
+    { label: 'Resource', value: 'resource' }
 ];
+// Track resource paths separately for bind:value with ResourcePicker
+let resourcePaths = $state({});
+// Initialize resourcePaths from existing flow_env values
+for (const [key, value] of Object.entries(flowStore.val.value.flow_env || {})) {
+    if (typeof value === 'string' && value.startsWith('$res:')) {
+        resourcePaths[key] = value.substring('$res:'.length);
+    }
+}
+// Initialize types for new keys and sync resourcePaths → flow_env
 $effect(() => {
     for (const [key, value] of flowEnvVarsMap.entries()) {
         if (!flowEnvTypes[key]) {
             flowEnvTypes[key] = determineValueType(value);
         }
     }
+    for (const [key, path] of Object.entries(resourcePaths)) {
+        if (flowStore.val.value.flow_env && flowEnvTypes[key] === 'resource') {
+            const newVal = '$res:' + (path || '');
+            if (flowStore.val.value.flow_env[key] !== newVal) {
+                flowStore.val.value.flow_env[key] = newVal;
+                flowStore.val = flowStore.val;
+            }
+        }
+    }
 });
+// Convert values when user changes the type dropdown
+let prevTypes = {};
 $effect(() => {
     for (const [key, type] of Object.entries(flowEnvTypes)) {
-        if (flowStore.val.value.flow_env && key in flowStore.val.value.flow_env) {
-            const currentType = determineValueType(flowStore.val.value.flow_env[key]);
-            if (currentType !== type) {
-                updateEnvType(key, type);
-            }
+        if (prevTypes[key] && prevTypes[key] !== type) {
+            updateEnvType(key, type);
         }
+        prevTypes[key] = type;
     }
 });
 let flowEnvEntries = $derived(Array.from(flowEnvVarsMap.entries()).map(([key, value]) => {
@@ -82,6 +108,7 @@ function removeEnvVar(key) {
     if (flowStore.val.value.flow_env && key in flowStore.val.value.flow_env) {
         delete flowStore.val.value.flow_env[key];
         delete flowEnvTypes[key];
+        delete resourcePaths[key];
         flowStore.val = flowStore.val;
     }
 }
@@ -118,29 +145,51 @@ function updateEnvKey(oldKey, newKey) {
         flowStore.val.value.flow_env = newEnvVars;
         delete flowEnvTypes[oldKey];
         flowEnvTypes[newKey] = type;
+        // Move resource path if applicable
+        if (type === 'resource' && oldKey in resourcePaths) {
+            resourcePaths[newKey] = resourcePaths[oldKey];
+            delete resourcePaths[oldKey];
+        }
         flowStore.val = flowStore.val;
     }
 }
 function updateEnvType(key, newType) {
     if (flowStore.val.value.flow_env && key in flowStore.val.value.flow_env) {
-        const currentValue = flowStore.val.value.flow_env[key];
-        const stringValue = typeof currentValue === 'string' ? currentValue : JSON.stringify(currentValue, null, 2);
         flowEnvTypes[key] = newType;
-        if (newType === 'json') {
-            try {
-                const parsed = JSON.parse(stringValue);
-                flowStore.val.value.flow_env[key] = parsed;
-            }
-            catch {
-                flowStore.val.value.flow_env[key] = stringValue;
+        if (newType === 'resource') {
+            flowStore.val.value.flow_env[key] = '$res:';
+            resourcePaths[key] = '';
+        }
+        else if (newType === 'json') {
+            delete resourcePaths[key];
+            const currentValue = flowStore.val.value.flow_env[key];
+            if (typeof currentValue === 'string') {
+                try {
+                    flowStore.val.value.flow_env[key] = JSON.parse(currentValue);
+                }
+                catch {
+                    // keep as string if not valid JSON
+                }
             }
         }
         else {
-            flowStore.val.value.flow_env[key] = stringValue;
+            delete resourcePaths[key];
+            const currentValue = flowStore.val.value.flow_env[key];
+            if (typeof currentValue !== 'string') {
+                flowStore.val.value.flow_env[key] = JSON.stringify(currentValue, null, 2);
+            }
         }
         flowStore.val = flowStore.val;
     }
 }
+function setVarPath(key, path) {
+    if (flowStore.val.value.flow_env) {
+        flowStore.val.value.flow_env[key] = '$var:' + path;
+        flowStore.val = flowStore.val;
+    }
+}
+let variablePicker = $state(undefined);
+let pickForKey = $state(undefined);
 setContext('PropPickerWrapper', {
     inputMatches: writable(undefined),
     connectProp: () => { },
@@ -157,8 +206,8 @@ setContext('PropPickerWrapper', {
 				Flow envs can be referenced in any flow step input using the syntax{' '}
 				<code>flow_env.VARIABLE_NAME</code> or <code>flow_env["VARIABLE_NAME"]</code>. These
 				variables are available in the property picker and can be used in JavaScript expressions and
-				input bindings. You can choose between String or JSON types for each variable - JSON types
-				allow complex data structures.
+				input bindings. String values can link to workspace variables using the <DollarSign size={12}
+					class="inline" /> button. Resource type references workspace resources resolved at runtime.
 			</Alert>
 
 			{#if flowEnvEntries.length === 0}
@@ -211,10 +260,13 @@ setContext('PropPickerWrapper', {
 								{/if}
 							</div>
 
-							<div class="flex flex-col gap-1">
-								<!-- svelte-ignore a11y_label_has_associated_control -->
-								<label class="text-sm font-medium">Value</label>
-								{#if entry.type === 'json'}
+							<Label label="Value">
+								{#if entry.type === 'resource'}
+									<ResourcePicker
+										bind:value={resourcePaths[entry.key]}
+										disabled={noEditor}
+									/>
+								{:else if entry.type === 'json'}
 									<div class="w-full">
 										<JsonEditor
 											bind:code={entry.displayValue}
@@ -226,16 +278,43 @@ setContext('PropPickerWrapper', {
 										/>
 									</div>
 								{:else}
-									<input
-										type="text"
-										value={entry.displayValue}
-										oninput={(e) => updateEnvValue(entry.key, e.currentTarget.value, 'string')}
-										disabled={noEditor}
-										class="input w-full"
-										placeholder="Variable value"
-									/>
+									<div class="relative group w-full">
+										<input
+											type="text"
+											value={entry.displayValue}
+											oninput={(e) =>
+												updateEnvValue(entry.key, e.currentTarget.value, 'string')}
+											disabled={noEditor}
+											class="input w-full"
+											placeholder="Variable value"
+										/>
+										{#if !noEditor}
+											<Button
+												iconOnly
+												startIcon={{ icon: DollarSign }}
+												unifiedSize="sm"
+												onClick={() => {
+													pickForKey = entry.key
+													variablePicker?.openDrawer?.()
+												}}
+												wrapperClasses="opacity-0 group-hover:opacity-100 transition-opacity absolute right-2 top-1/2 -translate-y-1/2 bg-surface-input"
+												variant="subtle"
+												title="Insert a Variable"
+											/>
+										{/if}
+									</div>
+									{#if typeof entry.value === 'string' && entry.value.startsWith('$var:') && entry.value.length > 5}
+										<div class="text-2xs text-tertiary">
+											Linked to variable <a
+												href="/variables#{entry.value.slice(5)}"
+												target="_blank"
+												class="text-accent underline font-normal"
+												>{entry.value.slice(5)}</a
+											>
+										</div>
+									{/if}
 								{/if}
-							</div>
+							</Label>
 						</div>
 					{/each}
 				</div>
@@ -250,3 +329,20 @@ setContext('PropPickerWrapper', {
 		</div>
 	</FlowCard>
 </div>
+
+<ItemPicker
+	bind:this={variablePicker}
+	pickCallback={(path, _) => {
+		if (pickForKey) {
+			setVarPath(pickForKey, path)
+			pickForKey = undefined
+		}
+	}}
+	itemName="Variable"
+	extraField="path"
+	loadItems={async () =>
+		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
+			name: x.path,
+			...x
+		}))}
+/>

package/package/components/flows/content/FlowFailureModule.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">import { getContext } from 'svelte';
 import FlowModuleWrapper from './FlowModuleWrapper.svelte';
-export let noEditor = false;
-export let savedModule = undefined;
-const { flowStore } = getContext('FlowEditorContext');
+let { noEditor = false, savedModule = undefined } = $props();
+const { flowStore } = $state(getContext('FlowEditorContext'));
 </script>
 
 {#if flowStore.val.value.failure_module}

package/package/components/flows/content/FlowFailureModule.svelte.d.ts

@@ -1,22 +1,8 @@
 import type { FlowModule } 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 FlowFailureModule: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     noEditor?: boolean;
     savedModule?: FlowModule | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowFailureModule = InstanceType<typeof FlowFailureModule>;
+}
+declare const FlowFailureModule: import("svelte").Component<Props, {}, "">;
+type FlowFailureModule = ReturnType<typeof FlowFailureModule>;
 export default FlowFailureModule;

package/package/components/flows/content/FlowInputs.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Alert } from '../../common';
 import ToggleHubWorkspace from '../../ToggleHubWorkspace.svelte';
 import Tooltip from '../../Tooltip.svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, untrack } from 'svelte';
 import FlowScriptPicker from '../pickers/FlowScriptPicker.svelte';
 import PickHubScript from '../pickers/PickHubScript.svelte';
 import WorkspaceScriptPicker from '../pickers/WorkspaceScriptPicker.svelte';
@@ -17,7 +17,7 @@ import DefaultScripts from '../../DefaultScripts.svelte';
 import { canHavePreprocessor } from '../../../script_helpers';
 let { failureModule, preprocessorModule, shouldDisableTriggerScripts = false, noEditor, summary = $bindable(undefined) } = $props();
 const dispatch = createEventDispatcher();
-let kind = $state(failureModule
+let kind = $state(untrack(() => failureModule)
     ? 'failure'
     : summary == 'Trigger'
         ? 'trigger'
@@ -251,6 +251,24 @@ let customUi = getContext('customUi');
 			{/each}
 		</div>
 
+		{#if !failureModule && !preprocessorModule}
+			<h3 class="pb-2 pt-4">AI Sandbox</h3>
+			<div class="flex flex-row flex-wrap gap-2">
+				<FlowScriptPicker
+					label="Claude Code"
+					lang="claudesandbox"
+					on:click={() => {
+						dispatch('new', {
+							language: 'bun',
+							kind,
+							subkind: 'claudesandbox',
+							summary
+						})
+					}}
+				/>
+			</div>
+		{/if}
+
 		<h3 class="mb-2 mt-6"
 			>Use pre-made <span class="text-blue-500 dark:text-blue-400"
 				>{kind == 'script' ? 'action' : kind}</span

package/package/components/flows/content/FlowInputsQuick.svelte

@@ -402,6 +402,27 @@ let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'f
 			{/await}
 			<div class="pb-1"></div>
 		{/if}
+		{#if selectedKind === 'script' && preFilter === 'all' && !selected}
+			<div class="pb-0 text-2xs font-normal text-secondary ml-2">AI Sandbox</div>
+			<FlowScriptPickerQuick
+				eeRestricted={false}
+				selected={false}
+				enterpriseLangs={[]}
+				label="Claude Code"
+				lang="claudesandbox"
+				on:click={() => {
+					dispatch('new', {
+						kind: selectedKind,
+						inlineScript: {
+							language: 'bun',
+							kind: selectedKind,
+							subkind: 'claudesandbox',
+							summary
+						}
+					})
+				}}
+			/>
+		{/if}
 		{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
 			{#if (!selected || selected?.kind === 'integrations') && (preFilter === 'hub' || preFilter === 'all')}
 				{#if !selected && preFilter !== 'hub'}

package/package/components/flows/content/FlowLoop.svelte

@@ -128,7 +128,8 @@ let suggestion = $state(undefined);
 								documentationLink="https://www.windmill.dev/docs/flows/flow_loops"
 								>If disabled, the flow will fail as soon as one of the iteration fail. Otherwise,
 								the error will be collected as the result of the iteration. Regardless of this
-								setting, if an error handler is defined, it will process the error.</Tooltip
+								setting, if a flow level error handler is defined, it will process the error.
+								(Workspace error handlers will NOT be used to process errors if enabled.)</Tooltip
 							></div
 						>
 						<Toggle
@@ -376,7 +377,6 @@ let suggestion = $state(undefined);
 									on:blur={() => {
 										iteratorFieldFocused = false
 									}}
-									autofocus
 									lang="javascript"
 									bind:code={mod.value.iterator.expr}
 									class="h-full"

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -85,7 +85,7 @@ let websocketAlive = $state({
     ruff: false,
     shellcheck: false
 });
-let selected = $state(preprocessorModule ? 'test' : 'inputs');
+let selected = $state(untrack(() => preprocessorModule) ? 'test' : 'inputs');
 let advancedSelected = $state('retries');
 let advancedRuntimeSelected = $state('concurrency');
 let s3Kind = $state('s3_client');
@@ -162,7 +162,7 @@ function selectAdvanced(subtab) {
     advancedSelected = subtab;
 }
 let forceReload = $state(0);
-let editorPanelSize = $state(noEditor ? 0 : flowModule.value.type == 'script' ? 30 : 50);
+let editorPanelSize = $state(untrack(() => noEditor) ? 0 : flowModule.value.type == 'script' ? 30 : 50);
 let editorSettingsPanelSize = $state(100 - untrack(() => editorPanelSize));
 let stepHistoryLoader = getStepHistoryLoaderContext();
 function onSelectedIdChange() {

package/package/components/flows/content/FlowModuleMockTransitionMessage.svelte

@@ -2,7 +2,7 @@
 import { base } from '../../../base';
 import DarkModeObserver from '../../DarkModeObserver.svelte';
 import { Info } from 'lucide-svelte';
-let darkMode = true;
+let darkMode = $state(true);
 function openFullscreen(event) {
     const img = event.target;
     if (img.requestFullscreen) {
@@ -56,13 +56,13 @@ function openFullscreen(event) {
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-history-dark.png` : `${base}/pin-history.png`}
 							alt="History picker"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>
@@ -79,13 +79,13 @@ function openFullscreen(event) {
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-pin-dark.png` : `${base}/pin-pin.png`}
 							alt="Pin action"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>
@@ -102,13 +102,13 @@ function openFullscreen(event) {
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-restore-dark.png` : `${base}/pin-restore.png`}
 							alt="Recover pins"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>
@@ -126,13 +126,13 @@ function openFullscreen(event) {
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-flow-view-dark.png` : `${base}/pin-flow-view.png`}
 							alt="Flow view pinning"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>

package/package/components/flows/content/FlowModuleMockTransitionMessage.svelte.d.ts

@@ -1,18 +1,3 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowModuleMockTransitionMessage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleMockTransitionMessage = InstanceType<typeof FlowModuleMockTransitionMessage>;
+declare const FlowModuleMockTransitionMessage: import("svelte").Component<Record<string, never>, {}, "">;
+type FlowModuleMockTransitionMessage = ReturnType<typeof FlowModuleMockTransitionMessage>;
 export default FlowModuleMockTransitionMessage;

package/package/components/flows/content/FlowModuleScript.svelte

@@ -28,7 +28,7 @@ function getCachedValues(path, hash) {
     tag = cachedValues[key]?.tag;
     notFound = cachedValues[key]?.notFound ?? false;
 }
-getCachedValues(path, hash);
+getCachedValues(untrack(() => path), untrack(() => hash));
 async function loadPreviousCode(previousHash) {
     try {
         const previousScript = await ScriptService.getScriptByHash({

package/package/components/flows/content/FlowPathViewer.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">import Skeleton from '../../common/skeleton/Skeleton.svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import Skeleton from '../../common/skeleton/Skeleton.svelte';
 import FlowGraphViewer from '../../FlowGraphViewer.svelte';
 import { Triggers } from '../../triggers/triggers.svelte';
 import { FlowService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
-export let path;
-export let noSide = false;
-let flow = undefined;
+let { path, noSide = false } = $props();
+let flow = $state(undefined);
 const triggersCount = writable(undefined);
 setContext('TriggerContext', {
     triggersCount: triggersCount,
@@ -19,7 +19,9 @@ async function loadFlow(path) {
     flow = await FlowService.getFlowByPath({ workspace: $workspaceStore, path });
     triggersCount.set(await FlowService.getTriggersCountOfFlow({ workspace: $workspaceStore, path }));
 }
-$: path && loadFlow(path);
+run(() => {
+    path && loadFlow(path);
+});
 </script>
 
 <div class="flex flex-col flex-1 h-full overflow-auto">

package/package/components/flows/content/FlowPathViewer.svelte.d.ts

@@ -1,21 +1,7 @@
-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 FlowPathViewer: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     path: string;
     noSide?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowPathViewer = InstanceType<typeof FlowPathViewer>;
+}
+declare const FlowPathViewer: import("svelte").Component<Props, {}, "">;
+type FlowPathViewer = ReturnType<typeof FlowPathViewer>;
 export default FlowPathViewer;

package/package/components/flows/content/FlowPreprocessorModule.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">import { getContext } from 'svelte';
 import FlowModuleWrapper from './FlowModuleWrapper.svelte';
-export let noEditor = false;
-export let savedModule = undefined;
-const { flowStore } = getContext('FlowEditorContext');
+let { noEditor = false, savedModule = undefined } = $props();
+const { flowStore } = $state(getContext('FlowEditorContext'));
 </script>
 
 {#if flowStore.val.value.preprocessor_module}