windmill-components 1.623.2 → 1.642.0

package/package/components/meltComponents/Popover.svelte.d.ts

@@ -34,11 +34,13 @@ declare const Popover: $$__sveltets_2_IsomorphicComponent<{
     disabled?: boolean | undefined;
     documentationLink?: string | undefined | undefined;
     disableFocusTrap?: boolean | undefined;
+    openFocus?: string | HTMLElement | (() => HTMLElement | null) | null | undefined;
     escapeBehavior?: EscapeBehaviorType | undefined;
     enableFlyTransition?: boolean | undefined;
     onKeyDown?: ((e: KeyboardEvent) => void) | undefined;
     onClose?: (() => void) | undefined;
     targetId?: string | undefined | undefined;
+    excludeSelectors?: string | undefined | undefined;
     isOpen?: boolean | undefined;
     close?: (() => void) | undefined;
     open?: (() => void) | undefined;

package/package/components/meltComponents/Tooltip.svelte

@@ -12,6 +12,7 @@ export let disablePopup = false;
 export let openDelay = 300;
 export let closeDelay = 0;
 export let portal = 'body';
+export let customBgClass = undefined;
 const { elements: { trigger, content }, states: { open } } = createTooltip({
     positioning: {
         placement
@@ -39,7 +40,7 @@ const { elements: { trigger, content }, states: { open } } = createTooltip({
 
 {#if $open && !disablePopup}
 	<div {...$content} use:$content.action transition:fade={{ duration: 100 }} style="z-index: {zIndexes.tooltip}">
-		<TooltipInner {documentationLink} {markdownTooltip}>
+		<TooltipInner {documentationLink} {markdownTooltip} {customBgClass}>
 			<slot name="text" />
 		</TooltipInner>
 	</div>

package/package/components/meltComponents/Tooltip.svelte.d.ts

@@ -28,6 +28,7 @@ declare const Tooltip: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWi
     openDelay?: number | undefined;
     closeDelay?: number | undefined;
     portal?: string | undefined | null | undefined;
+    customBgClass?: string | undefined | undefined;
 }, {
     default: {};
     text: {};

package/package/components/moveRenameManager.d.ts

@@ -0,0 +1,21 @@
+type ItemKind = 'flow' | 'script' | 'app';
+/**
+ * Check whether a flow uses on_behalf_of_email.
+ * Callers use this to show a warning before saving.
+ */
+export declare function checkFlowOnBehalfOf(workspace: string, path: string): Promise<string | undefined>;
+/**
+ * Shared utility that performs the API call to update an item's path and summary.
+ * No toast, no navigation — callers handle those.
+ *
+ * Note: on_behalf_of_email is intentionally omitted from flow updates for security
+ * reasons — the backend will redeploy the flow on behalf of the current user.
+ */
+export declare function updateItemPathAndSummary(opts: {
+    workspace: string;
+    kind: ItemKind;
+    initialPath: string;
+    newPath: string;
+    newSummary: string;
+}): Promise<void>;
+export {};

package/package/components/moveRenameManager.js

@@ -0,0 +1,61 @@
+import { AppService, FlowService, ScriptService } from '../gen';
+/**
+ * Check whether a flow uses on_behalf_of_email.
+ * Callers use this to show a warning before saving.
+ */
+export async function checkFlowOnBehalfOf(workspace, path) {
+    const flow = await FlowService.getFlowByPath({ workspace, path });
+    return flow.on_behalf_of_email;
+}
+/**
+ * Shared utility that performs the API call to update an item's path and summary.
+ * No toast, no navigation — callers handle those.
+ *
+ * Note: on_behalf_of_email is intentionally omitted from flow updates for security
+ * reasons — the backend will redeploy the flow on behalf of the current user.
+ */
+export async function updateItemPathAndSummary(opts) {
+    const { workspace, kind, initialPath, newPath, newSummary } = opts;
+    if (kind === 'flow') {
+        const flow = await FlowService.getFlowByPath({ workspace, path: initialPath });
+        await FlowService.updateFlow({
+            workspace,
+            path: initialPath,
+            requestBody: {
+                path: newPath,
+                summary: newSummary,
+                description: flow.description,
+                value: flow.value,
+                schema: flow.schema,
+                tag: flow.tag,
+                dedicated_worker: flow.dedicated_worker,
+                ws_error_handler_muted: flow.ws_error_handler_muted,
+                visible_to_runner_only: flow.visible_to_runner_only
+            }
+        });
+    }
+    else if (kind === 'script') {
+        const script = await ScriptService.getScriptByPath({ workspace, path: initialPath });
+        script.summary = newSummary;
+        await ScriptService.createScript({
+            workspace,
+            requestBody: {
+                ...script,
+                description: script.description ?? '',
+                lock: script.lock,
+                parent_hash: script.hash,
+                path: newPath
+            }
+        });
+    }
+    else if (kind === 'app') {
+        await AppService.updateApp({
+            workspace,
+            path: initialPath,
+            requestBody: {
+                path: newPath !== initialPath ? newPath : undefined,
+                summary: newSummary
+            }
+        });
+    }
+}

package/package/components/progressBar/ProgressBar.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">import { Tween } from 'svelte/motion';
 import { linear } from 'svelte/easing';
 import { twMerge } from 'tailwind-merge';
-let { error = undefined, index, subIndex, subLength, nextInProgress = false, subIndexIsPercent = false, compact = false, hideStepTitle = false, length, class: className = '' } = $props();
+import { Loader2 } from 'lucide-svelte';
+import { fade } from 'svelte/transition';
+let { error = undefined, index, subIndex, subLength, nextInProgress = false, subIndexIsPercent = false, compact = false, hideStepTitle = false, slim = false, length, class: className = '', textPosition = 'top', stepId, showStepId = false, isWaitingForEvents = false, isCanceled = false, isScheduled = false } = $props();
 let duration = 200;
 let percent = new Tween(0, { duration, easing: linear });
 export function resetP() {
@@ -20,30 +22,12 @@ function getPercent(partIndex, _pct) {
     return res;
 }
 let finished = $derived(index == length);
+const status = $derived(error != undefined ? 'error' : finished ? 'done' : 'running');
 </script>
 
-<div class={className}>
-	{#if !compact}
-		<div
-			class="flex justify-between items-end font-medium mb-1 {error != undefined
-				? 'text-red-700 dark:text-red-200'
-				: 'text-blue-700 dark:text-blue-200'}"
-		>
-			<span class="text-base">
-				{error != undefined
-					? 'Error occurred'
-					: finished
-						? 'Done'
-						: hideStepTitle
-							? `Running`
-							: subIndexIsPercent
-								? `Step ${index + 1} (${subIndex !== undefined ? `${subIndex}%)` : ''}`
-								: `Step ${index + 1}${subIndex !== undefined ? `.${subIndex + 1}` : ''}`}
-			</span>
-			<span class="text-sm">
-				{percent.current.toFixed(0)}%
-			</span>
-		</div>
+<div class={twMerge('flex flex-col gap-1', className)}>
+	{#if textPosition == 'top'}
+		{@render text('top')}
 	{/if}
 	<!-- {#each state as step, index}
 		{index} {JSON.stringify(step)}
@@ -57,22 +41,29 @@ let finished = $derived(index == length);
 	<div
 		class={twMerge(
 			'flex w-full bg-gray-200 overflow-hidden',
-			compact ? 'rounded-none h-3' : 'rounded-full h-4'
+			compact ? 'rounded-none h-3' : slim ? 'rounded-full h-2.5' : 'rounded-full h-4'
 		)}
 	>
 		{#each new Array(length) as _, partIndex (partIndex)}
 			<div class="h-full relative border-white {partIndex === 0 ? '' : 'border-l'} w-full">
 				{#if partIndex == index && nextInProgress}
 					<div
-						class="absolute left-0 bottom-0 h-full bg-blue-400/50 animate-pulse"
+						class={twMerge(
+							'absolute left-0 bottom-0 h-full bg-blue-400/50',
+							isCanceled ? '' : ' animate-pulse'
+						)}
 						style="width: 100%"
+						transition:fade={{ duration: 200 }}
 					></div>
 				{/if}
 				{#if partIndex < index - 1}
-					<div class="absolute left-0 bottom-0 h-full w-full bg-blue-400"></div>
+					<div
+						class="absolute left-0 bottom-0 h-full w-full bg-blue-400 transition-colors duration-300 ease-in-out"
+					></div>
 				{:else if partIndex == index - 1 || (partIndex == index && subIndex !== undefined) || error == partIndex}
 					<div
-						class="absolute left-0 bottom-0 h-full {error == partIndex
+						class="absolute left-0 bottom-0 h-full transition-all duration-300 ease-in-out {error ==
+						partIndex
 							? 'bg-red-400'
 							: 'bg-blue-400'}"
 						style="width: {getPercent(partIndex, percent.current)}%"
@@ -81,4 +72,55 @@ let finished = $derived(index == length);
 			</div>
 		{/each}
 	</div>
+
+	{#if textPosition == 'bottom'}
+		{@render text('bottom')}
+	{/if}
 </div>
+
+{#snippet text(position: 'top' | 'bottom')}
+	{#if !compact}
+		<div
+			class="flex justify-between items-end font-medium transition-colors duration-300 ease-in-out {error !=
+				undefined || isCanceled
+				? 'text-red-700 dark:text-red-200'
+				: 'text-blue-700 dark:text-blue-200'}"
+		>
+			<div class={twMerge(slim ? 'text-xs' : 'text-sm', 'flex items-center gap-1')}>
+				{#if status == 'running' && !isCanceled && !isScheduled}
+					<Loader2 class="animate-spin" size={14} />
+				{/if}
+				{#key status + isWaitingForEvents + stepId + isCanceled + isScheduled}
+					<span in:fade={{ duration: 150 }}>
+						{#if status == 'error'}
+							Error occurred
+						{:else if status == 'done' && isCanceled}
+							Canceled
+						{:else if status == 'done'}
+							Done
+						{:else if isWaitingForEvents}
+							Waiting to be resumed
+						{:else if isScheduled}
+							(not started)
+						{:else if showStepId}
+							{stepId
+								? `${isCanceled ? 'Canceled at' : 'Running'} step ${stepId}`
+								: `${isCanceled ? 'Canceled' : ''}`}
+						{:else if hideStepTitle}
+							{isCanceled ? 'Canceled' : 'Running'}
+						{:else if subIndexIsPercent}
+							{(isCanceled ? 'Canceled at ' : '') + `Step ${index + 1} (${subIndex !== undefined ? subIndex + '%' : ''})`}
+						{:else}
+							{(isCanceled ? 'Canceled at ' : '') + `Step ${index + 1}${subIndex !== undefined ? `.${subIndex + 1}` : ''}`}
+						{/if}
+					</span>
+				{/key}
+			</div>
+			<span
+				class={twMerge(slim ? 'text-xs' : 'text-sm', 'transition-all duration-200 ease-in-out')}
+			>
+				{percent.current.toFixed(0)}%
+			</span>
+		</div>
+	{/if}
+{/snippet}

package/package/components/progressBar/ProgressBar.svelte.d.ts

@@ -7,8 +7,15 @@ interface Props {
     subIndexIsPercent?: boolean;
     compact?: boolean;
     hideStepTitle?: boolean;
+    slim?: boolean;
     length: number;
     class?: string;
+    textPosition?: 'top' | 'bottom';
+    stepId?: string;
+    showStepId?: boolean;
+    isWaitingForEvents?: boolean;
+    isCanceled?: boolean;
+    isScheduled?: boolean;
 }
 declare const ProgressBar: import("svelte").Component<Props, {
     resetP: () => void;

package/package/components/prop_picker.d.ts

@@ -1,8 +1,6 @@
 import type { Writable } from 'svelte/store';
 import type { PickableProperties } from './flows/previousResults';
-type InsertionMode = 'append' | 'connect' | 'insert';
 export type FlowPropPickerConfig = {
-    insertionMode: InsertionMode;
     clearFocus: () => void;
     onSelect: (path: string) => boolean;
 };
@@ -10,4 +8,3 @@ export type PropPickerContext = {
     flowPropPickerConfig: Writable<FlowPropPickerConfig | undefined>;
     pickablePropertiesFiltered: Writable<PickableProperties | undefined>;
 };
-export {};

package/package/components/propertyPicker/PropPicker.svelte

@@ -1,39 +1,32 @@
 <script lang="ts">import { ResourceService, VariableService } from '../../gen';
 import { workspaceStore } from '../../stores';
-import { getContext, onDestroy } from 'svelte';
+import { getContext, onDestroy, untrack } from 'svelte';
 import { Badge, Button } from '../common';
 import ObjectViewer from './ObjectViewer.svelte';
 import { keepByKey } from './utils';
 import ClearableInput from '../common/clearableInput/ClearableInput.svelte';
 import { filterNestedObject } from '../flows/previousResults';
 import Scrollable from '../Scrollable.svelte';
-export let pickableProperties;
-export let displayContext = true;
-export let error = false;
-export let allowCopy = false;
-export let previousId = undefined;
-export let flow_env = undefined;
-export let result = undefined;
-export let extraResults = undefined;
-let variables = {};
-let resources = {};
-let displayVariable = false;
-let displayResources = false;
-let displayFlowEnv = false;
-let allResultsCollapsed = true;
+let { pickableProperties, displayContext = true, error = false, allowCopy = false, previousId = undefined, flow_env = undefined, result = undefined, extraResults = undefined } = $props();
+let variables = $state({});
+let resources = $state({});
+let displayVariable = $state(false);
+let displayResources = $state(false);
+let displayFlowEnv = $state(false);
+let allResultsCollapsed = $state(true);
 let collapsableInitialState;
-let filterActive = false;
 const EMPTY_STRING = '';
-let search = '';
-const { propPickerConfig, inputMatches } = getContext('PropPickerWrapper');
+let search = $state('');
+const { propPickerConfig, inputMatches, exprBeingEdited: propsBeingEdited } = getContext('PropPickerWrapper');
 const { pickablePropertiesFiltered } = getContext('PropPickerContext');
-$: $pickablePropertiesFiltered = pickableProperties;
-let flowInputsFiltered = pickableProperties.flow_input;
-let resultByIdFiltered = pickableProperties.priorIds;
-let flowEnvFiltered = pickableProperties.flow_env;
+$effect(() => {
+    $pickablePropertiesFiltered = pickableProperties;
+});
+let flowInputsFiltered = $state(pickableProperties.flow_input);
+let resultByIdFiltered = $state(pickableProperties.priorIds);
+let flowEnvFiltered = $state(pickableProperties.flow_env);
 let timeout;
 function onSearch(search) {
-    filterActive = false;
     if (timeout) {
         clearTimeout(timeout);
     }
@@ -52,11 +45,12 @@ function onSearch(search) {
                 : keepByKey(pickableProperties.flow_env, search);
     }, 50);
 }
-$: suggestedPropsFiltered =
-    $propPickerConfig && $propPickerConfig.propName
-        ? keepByKey(pickableProperties.priorIds, $propPickerConfig.propName ?? '')
-        : undefined;
-$: search != undefined && onSearch(search);
+let suggestedPropsFiltered = $derived($propPickerConfig && $propPickerConfig.propName
+    ? keepByKey(pickableProperties.priorIds, $propPickerConfig.propName ?? '')
+    : undefined);
+$effect(() => {
+    search != undefined && untrack(() => onSearch(search));
+});
 async function loadVariables() {
     variables = Object.fromEntries((await VariableService.listVariable({
         workspace: $workspaceStore ?? ''
@@ -67,9 +61,9 @@ async function loadResources() {
         workspace: $workspaceStore ?? ''
     })).map((resource) => [resource.path, resource.description ?? '']));
 }
-let filteringFlowInputsOrResult = '';
+let filteringFlowInputsOrResult = $state('');
 async function filterPickableProperties() {
-    if (!$propPickerConfig || !filterActive) {
+    if ($propsBeingEdited?.length == 0 || $propPickerConfig || !$inputMatches?.length) {
         if (search === EMPTY_STRING) {
             flowInputsFiltered = pickableProperties.flow_input;
             resultByIdFiltered = pickableProperties.priorIds;
@@ -163,24 +157,15 @@ function resetCollapsable() {
         collapsableInitialState);
     collapsableInitialState = undefined;
 }
-async function updateFilterActive() {
-    const prev = filterActive;
-    filterActive = Boolean($inputMatches &&
-        $inputMatches?.length > 0 &&
-        $propPickerConfig?.insertionMode === 'insert' &&
-        search === EMPTY_STRING);
-    if (prev && !filterActive) {
-        flowInputsFiltered = pickableProperties.flow_input;
-        resultByIdFiltered = pickableProperties.priorIds;
-        flowEnvFiltered = pickableProperties.flow_env;
-    }
-}
 async function updateState() {
-    await updateFilterActive();
     await filterPickableProperties();
     await updateCollapsable();
 }
-$: (search, $inputMatches, $propPickerConfig, pickableProperties, updateState());
+$effect(() => {
+    ;
+    [search, $inputMatches, $propPickerConfig, pickableProperties, $propsBeingEdited];
+    untrack(() => updateState());
+});
 onDestroy(() => {
     clearTimeout(timeout);
 });
@@ -218,7 +203,7 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 				/>
 			</div>
 		{/if}
-		{#if flowInputsFiltered && (Object.keys(flowInputsFiltered ?? {}).length > 0 || !filterActive)}
+		{#if flowInputsFiltered && Object.keys(flowInputsFiltered ?? {}).length > 0}
 			<span class={categoryTitleClasses}>Flow Input</span>
 			<div class={categoryContentClasses}>
 				<ObjectViewer
@@ -291,7 +276,7 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 				</div>
 			{/if}
 			{#if Object.keys(pickableProperties.priorIds).length > 0}
-				{#if !filterActive && suggestedPropsFiltered && Object.keys(suggestedPropsFiltered).length > 0}
+				{#if suggestedPropsFiltered && Object.keys(suggestedPropsFiltered).length > 0}
 					<span class={categoryTitleClasses}>Suggested Results</span>
 					<div class={categoryContentClasses}>
 						<ObjectViewer
@@ -322,7 +307,7 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 		{/if}
 
 		{#if displayContext}
-			{#if !filterActive || $inputMatches?.some((match) => match.word === 'variable')}
+			{#if $inputMatches?.some((match) => match.word === 'variable')}
 				<span class={categoryTitleClasses}>Variables</span>
 				<div class={categoryContentClasses}>
 					{#if displayVariable}
@@ -359,7 +344,7 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 					{/if}
 				</div>
 			{/if}
-			{#if !filterActive || $inputMatches?.some((match) => match.word === 'resource')}
+			{#if $inputMatches?.some((match) => match.word === 'resource')}
 				<span class={categoryTitleClasses}>Resources</span>
 				<div class={categoryContentClasses}>
 					{#if displayResources}
@@ -396,7 +381,7 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 					{/if}
 				</div>
 			{/if}
-			{#if flow_env && Object.keys(flow_env).length > 0 && (!filterActive || $inputMatches?.some((match) => match.word === 'flow_env'))}
+			{#if flow_env && Object.keys(flow_env).length > 0 && $inputMatches?.some((match) => match.word === 'flow_env')}
 				<div class="overflow-y-auto pb-2">
 					<span class="font-normal text-xs text-secondary">Flow Env Variables:</span>
 

package/package/components/propertyPicker/PropPicker.svelte.d.ts

@@ -1,4 +1,14 @@
 import type { PickableProperties } from '../flows/previousResults';
+interface Props {
+    pickableProperties: PickableProperties;
+    displayContext?: boolean;
+    error?: boolean;
+    allowCopy?: boolean;
+    previousId?: string | undefined;
+    flow_env?: Record<string, any> | undefined;
+    result?: any | undefined;
+    extraResults?: any;
+}
 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;
@@ -12,19 +22,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PropPicker: $$__sveltets_2_IsomorphicComponent<{
-    pickableProperties: PickableProperties;
-    displayContext?: boolean;
-    error?: boolean;
-    allowCopy?: boolean;
-    previousId?: string | undefined;
-    flow_env?: Record<string, any> | undefined;
-    result?: any | undefined;
-    extraResults?: any;
-}, {
+declare const PropPicker: $$__sveltets_2_IsomorphicComponent<Props, {
     select: any;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type PropPicker = InstanceType<typeof PropPicker>;
 export default PropPicker;

package/package/components/raw_apps/FileTreeNode.svelte

@@ -68,6 +68,7 @@ function handleInputKeydown(e) {
         finishEdit();
     }
     else if (e.key === 'Escape') {
+        e.stopPropagation();
         editValue = node.name; // Reset to original
         onCancelEdit?.();
     }

package/package/components/raw_apps/RawAppBackgroundRunner.svelte

@@ -13,14 +13,14 @@ let listener = async (event) => {
         let error = false;
         let result;
         try {
-            result = await waitJob(uuid);
+            result = await waitJob(uuid, workspace);
         }
         catch (e) {
             error = true;
             console.log('e', e);
             result = e;
         }
-        if (event.data.type == 'backend') {
+        if (event.data.type == 'backend' || event.data.type == 'waitJob') {
             respond({ result, error });
         }
         if (editor) {
@@ -97,6 +97,7 @@ let listener = async (event) => {
         const reqId = data.reqId;
         const params = new URLSearchParams();
         params.set('fast', 'true');
+        params.set('only_result', 'true');
         const sseUrl = `/api/w/${workspace}/jobs_u/getupdate_sse/${jobId}?${params.toString()}`;
         const eventSource = new EventSource(sseUrl);
         eventSource.onmessage = (sseEvent) => {

package/package/components/raw_apps/RawAppEditor.svelte

@@ -13,27 +13,17 @@ import DarkModeObserver from '../DarkModeObserver.svelte';
 import RawAppSidebar from './RawAppSidebar.svelte';
 import { isRunnableByName, isRunnableByPath } from '../apps/inputType';
 import { aiChatManager, AIMode } from '../copilot/chat/AIChatManager.svelte';
-import { onMount } from 'svelte';
+import { onMount, untrack } from 'svelte';
 import { rawAppLintStore } from './lintStore';
 import { dbSchemas } from '../../stores';
 import { runScriptAndPollResult } from '../jobs/utils';
 import { RawAppHistoryManager } from './RawAppHistoryManager.svelte';
 import { sendUserToast } from '../../utils';
 import { parseDataTableRef, formatDataTableRef, DEFAULT_DATA } from './dataTableRefUtils';
-let { initFiles, initRunnables, initData, newApp, policy, summary = $bindable(''), path, newPath = undefined, savedApp = $bindable(undefined), diffDrawer = undefined } = $props();
+let { files = $bindable({}), runnables = $bindable({}), data = $bindable(DEFAULT_DATA), newApp, policy, summary = $bindable(''), path, newPath = undefined, savedApp = $bindable(undefined), diffDrawer = undefined } = $props();
 export const version = undefined;
-let runnables = $state(initRunnables);
-// Data configuration with tables and creation policy
-let data = $state(initData ?? DEFAULT_DATA);
 // Convert to object format for child components
 let dataTableRefsObjects = $derived(data.tables.map(parseDataTableRef));
-let initRunnablesContent = Object.fromEntries(Object.entries(initRunnables).map(([key, runnable]) => {
-    if (isRunnableByName(runnable)) {
-        return [key, runnable?.inlineScript?.content ?? ''];
-    }
-    return [key, ''];
-}));
-let files = $state(initFiles);
 // Initialize history manager
 const historyManager = new RawAppHistoryManager({
     maxEntries: 50,
@@ -111,8 +101,21 @@ function convertToBackendRunnable(key, runnable) {
     return backendRunnable;
 }
 let iframeLoaded = $state(false); // @hmr:keep
+let suppressSetActiveDocument = false;
 function populateFiles() {
-    setFilesInIframe(initFiles);
+    if (files) {
+        // Suppress iframe's automatic setActiveDocument for a short window
+        // after sending files, to prevent it from resetting to App.tsx.
+        suppressSetActiveDocument = true;
+        setTimeout(() => { suppressSetActiveDocument = false; }, 500);
+        const doc = untrack(() => selectedDocument);
+        if (doc) {
+            setFilesAndSelectInIframe(files, doc);
+        }
+        else {
+            setFilesInIframe(files);
+        }
+    }
 }
 function setFilesInIframe(newFiles) {
     const files = Object.fromEntries(Object.entries(newFiles).filter(([path, _]) => !path.endsWith('/')));
@@ -487,7 +490,7 @@ let modules = $state({});
 // Normalize Windows-style path separators to Linux-style
 function normalizeFilePaths(filesObj) {
     if (!filesObj)
-        return filesObj;
+        return {};
     return Object.fromEntries(Object.entries(filesObj).map(([path, content]) => [path.replace(/\\/g, '/'), content]));
 }
 function listener(e) {
@@ -507,6 +510,8 @@ function listener(e) {
         modules = e.data.modules;
     }
     else if (e.data.type === 'setActiveDocument') {
+        if (suppressSetActiveDocument)
+            return;
         // Normalize Windows-style path separators to Linux-style
         selectedDocument = e.data.path?.replace(/\\/g, '/');
     }
@@ -561,7 +566,7 @@ $effect(() => {
     });
 });
 $effect(() => {
-    iframe && iframeLoaded && initFiles && populateFiles();
+    iframe && iframeLoaded && files && populateFiles();
 });
 $effect(() => {
     iframe && iframeLoaded && runnables && populateRunnables();
@@ -756,7 +761,6 @@ function handleKeydown(e) {
 						<RawAppInlineScriptsPanel
 							appPath={path}
 							{selectedRunnable}
-							{initRunnablesContent}
 							bind:runnables
 							onSelectionChange={(selection) => {
 								console.log('handle selection', selection)

package/package/components/raw_apps/RawAppEditor.svelte.d.ts

@@ -3,10 +3,10 @@ import DiffDrawer from '../DiffDrawer.svelte';
 import { type Runnable } from './utils';
 import { type RawAppData } from './dataTableRefUtils';
 interface Props {
-    initFiles: Record<string, string>;
-    initRunnables: Record<string, Runnable>;
+    files?: Record<string, string>;
+    runnables?: Record<string, Runnable>;
     /** Data configuration including tables and creation policy */
-    initData: RawAppData | undefined;
+    data?: RawAppData;
     newApp: boolean;
     policy: Policy;
     summary?: string;
@@ -43,6 +43,6 @@ declare const RawAppEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     version: number | undefined;
-}, "summary" | "savedApp">;
+}, "summary" | "files" | "data" | "runnables" | "savedApp">;
 type RawAppEditor = InstanceType<typeof RawAppEditor>;
 export default RawAppEditor;