windmill-components 1.623.1 → 1.642.0

package/package/components/propertyPicker/PropPicker.svelte

@@ -1,37 +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;
-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);
     }
@@ -45,14 +40,17 @@ function onSearch(search) {
                 ? pickableProperties.priorIds
                 : keepByKey(pickableProperties.priorIds, search);
         flowEnvFiltered =
-            search === EMPTY_STRING ? pickableProperties.flow_env : keepByKey(pickableProperties.flow_env, search);
+            search === EMPTY_STRING
+                ? pickableProperties.flow_env
+                : 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 ?? ''
@@ -63,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;
@@ -159,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);
 });
@@ -204,7 +193,17 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 				<Badge small>filter: {filteringFlowInputsOrResult}</Badge>
 			</div>
 		{/if}
-		{#if flowInputsFiltered && (Object.keys(flowInputsFiltered ?? {}).length > 0 || !filterActive)}
+		{#if result != undefined}
+			<span class={categoryTitleClasses}>Step Result</span>
+			<div class={categoryContentClasses}>
+				<ObjectViewer
+					{allowCopy}
+					json={{ result, ...(extraResults ? extraResults : {}) }}
+					on:select
+				/>
+			</div>
+		{/if}
+		{#if flowInputsFiltered && Object.keys(flowInputsFiltered ?? {}).length > 0}
 			<span class={categoryTitleClasses}>Flow Input</span>
 			<div class={categoryContentClasses}>
 				<ObjectViewer
@@ -277,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
@@ -308,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}
@@ -345,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}
@@ -382,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,17 +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;
-}, {
+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/DefaultDatabaseSelector.svelte

@@ -3,6 +3,7 @@ import Popover from '../meltComponents/Popover.svelte';
 import Select from '../select/Select.svelte';
 import { workspaceStore } from '../../stores';
 import { createDatatablesResource, createSchemasResource, toDatatableItems, toSchemaItems } from './datatableUtils.svelte';
+import { Button } from '../common';
 let { datatable, schema, onChange, description = 'Set the default datatable and schema for new tables. This is where AI will create new tables when needed.' } = $props();
 // Load available datatables and schemas using shared utilities
 const datatables = createDatatablesResource(() => $workspaceStore);
@@ -22,15 +23,18 @@ $effect(() => {
 
 <Popover>
 	<svelte:fragment slot="trigger">
-		<button
-			class="pt-1.5 pb-0.5 px-1 hover:bg-surface-hover rounded transition-colors"
+		<Button
 			title="Configure default datatable & schema"
+			unifiedSize="xs"
+			variant="subtle"
+			nonCaptureEvent
+			btnClasses="px-1"
 		>
-			<Settings size={12} class="text-tertiary" />
-		</button>
+			<Settings size={12} />
+		</Button>
 	</svelte:fragment>
 	<svelte:fragment slot="content">
-		<div class="flex flex-col gap-3 p-2 min-w-64 max-w-80">
+		<div class="flex flex-col gap-3 p-4 min-w-64 max-w-80">
 			<div class="text-xs font-medium text-primary">Default Datatable & Schema</div>
 
 			<p class="text-2xs text-tertiary leading-relaxed">

package/package/components/raw_apps/FileEditorIcon.svelte

@@ -1,24 +1,29 @@
+<script lang="ts" module>export const SUPPORTED_EXTENSIONS = ['tsx', 'json', 'ts', 'js', 'vue', 'css', 'svelte'];
+</script>
+
 <script lang="ts">import TypeScript from '../common/languageIcons/TypeScript.svelte';
 import JavaScriptIcon from '../icons/JavaScriptIcon.svelte';
 import JsonIcon from '../icons/JsonIcon.svelte';
 import ReactIcon from '../icons/ReactIcon.svelte';
 import SvelteIcon from '../icons/SvelteIcon.svelte';
 import VueIcon from '../icons/VueIcon.svelte';
-let { file } = $props();
+let { file, size = 16 } = $props();
+const width = $derived(size.toString() + 'px');
+const height = $derived(size.toString() + 'px');
 </script>
 
 {#if file.endsWith('.tsx')}
-	<ReactIcon width="16px" height="16px" />
+	<ReactIcon {width} {height} />
 {:else if file.endsWith('.json')}
-	<JsonIcon width="16px" height="16px" />
+	<JsonIcon {width} {height} />
 {:else if file.endsWith('.ts')}
-	<TypeScript width={16} height={16} />
+	<TypeScript width={size} height={size} />
 {:else if file.endsWith('.js')}
-	<JavaScriptIcon width="16px" height="16px" />
+	<JavaScriptIcon {width} {height} />
 {:else if file.endsWith('.vue')}
-	<VueIcon width="16px" height="16px" />
+	<VueIcon {width} {height} />
 {:else if file.endsWith('.css')}
 	<span class="text-blue-600 ml-0.5" style="font-size: 16px;">#</span>
 {:else if file.endsWith('.svelte')}
-	<SvelteIcon width="16px" height="16px" />
+	<SvelteIcon {width} {height} />
 {/if}

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

@@ -1,5 +1,7 @@
+export declare const SUPPORTED_EXTENSIONS: string[];
 interface Props {
     file: string;
+    size?: number;
 }
 declare const FileEditorIcon: import("svelte").Component<Props, {}, "">;
 type FileEditorIcon = ReturnType<typeof FileEditorIcon>;

package/package/components/raw_apps/FileTreeNode.svelte

@@ -1,15 +1,41 @@
-<script lang="ts">import { ChevronRight, ChevronDown, File, Folder, FileJson, FileCode, ImageIcon, Palette, Pencil, Trash2, Lock } from 'lucide-svelte';
+<script lang="ts">import { ChevronRight, ChevronDown, File, Folder, Pencil, Trash2, Lock, Ellipsis, ImageIcon } from 'lucide-svelte';
 import Self from './FileTreeNode.svelte';
-let { node, onFileClick, onAddFile, onAddFolder, onRename, onDelete, selectedPath, pathToRename, pathToExpand, noEdit = false, level = 0 } = $props();
-let expanded = $state(level === 0); // Root folders start expanded
+import { twMerge } from 'tailwind-merge';
+import DropdownV2 from '../DropdownV2.svelte';
+import { Button } from '../common';
+import TextInput from '../text_input/TextInput.svelte';
+import TypeScript from '../common/languageIcons/TypeScript.svelte';
+import JavaScriptIcon from '../icons/JavaScriptIcon.svelte';
+import JsonIcon from '../icons/JsonIcon.svelte';
+import ReactIcon from '../icons/ReactIcon.svelte';
+import SvelteIcon from '../icons/SvelteIcon.svelte';
+import VueIcon from '../icons/VueIcon.svelte';
+import CssIcon from '../icons/CssIcon.svelte';
+import SassIcon from '../icons/SassIcon.svelte';
+import LessIcon from '../icons/LessIcon.svelte';
+import HtmlIcon from '../icons/HtmlIcon.svelte';
+import MarkdownIcon from '../icons/MarkdownIcon.svelte';
+import YamlIcon from '../icons/YamlIcon.svelte';
+import { tick } from 'svelte';
+let { node, onFileClick, onAddFile, onAddFolder, onRename, onDelete, onRequestEdit, onCancelEdit, selectedPath, pathToEdit, noEdit = false, level = 0 } = $props();
+let userExpanded = $state(null); // null = not set by user
 let isHovered = $state(false);
-let isEditing = $state(false);
 let editValue = $state(node.name);
-let inputElement = $state();
+let textInputElement = $state();
+let dropdownOpen = $state(false);
 const isSelected = $derived(selectedPath === node.path);
+const isEditing = $derived(pathToEdit === node.path);
+const expanded = $derived(
+// Auto-expand for editing nested paths takes priority
+pathToEdit && node.isFolder && pathToEdit.startsWith(node.path)
+    ? true
+    : userExpanded !== null
+        ? userExpanded
+        : level === 0 // Default: root expanded
+);
 function toggleExpanded() {
     if (node.isFolder) {
-        expanded = !expanded;
+        userExpanded = !expanded;
     }
 }
 function handleClick() {
@@ -22,61 +48,44 @@ function handleClick() {
 }
 function handleEdit(e) {
     e.stopPropagation();
-    isEditing = true;
-    editValue = node.name;
+    onRequestEdit?.(node.path);
 }
 function handleDelete(e) {
     e.stopPropagation();
     onDelete?.(node.path);
 }
 function finishEdit() {
-    if (isEditing && editValue.trim() && editValue !== node.name) {
+    if (isEditing && editValue.trim()) {
+        // Always call onRename - parent handles whether it's a new file or actual rename
         onRename?.(node.path, editValue.trim());
     }
-    isEditing = false;
+    else {
+        onCancelEdit?.();
+    }
 }
 function handleInputKeydown(e) {
     if (e.key === 'Enter') {
         finishEdit();
     }
     else if (e.key === 'Escape') {
-        isEditing = false;
-        editValue = node.name;
+        e.stopPropagation();
+        editValue = node.name; // Reset to original
+        onCancelEdit?.();
     }
 }
-function handleInputBlur() {
+function handleInputBlur(e) {
     finishEdit();
 }
+// Single effect for DOM operations only
 $effect(() => {
-    if (isEditing && inputElement) {
-        inputElement.focus();
-        inputElement.select();
-    }
-});
-// Automatically enter edit mode for newly created files
-$effect(() => {
-    if (pathToRename === node.path && !isEditing) {
-        isEditing = true;
+    if (isEditing && textInputElement) {
+        // Reset edit value when entering edit mode
         editValue = node.name;
-        // If this is a folder, expand it
-        if (node.isFolder) {
-            expanded = true;
-        }
-    }
-});
-// Expand parent folders when a child needs to be renamed
-$effect(() => {
-    if (pathToRename && node.isFolder && pathToRename.startsWith(node.path + '/')) {
-        expanded = true;
-    }
-});
-// Expand folder when pathToExpand matches this node or a parent of pathToExpand
-$effect(() => {
-    if (pathToExpand && node.isFolder) {
-        // Expand if this folder is the target or an ancestor of the target
-        if (node.path === pathToExpand || pathToExpand.startsWith(node.path + '/')) {
-            expanded = true;
-        }
+        // Focus and select input (DOM side effects)
+        tick().then(() => {
+            textInputElement?.focus();
+            textInputElement?.select();
+        });
     }
 });
 const sortedChildren = $derived(node.children?.slice().sort((a, b) => {
@@ -97,22 +106,26 @@ const fileIcon = $derived.by(() => {
     const ext = getFileExtension(node.name);
     switch (ext) {
         case 'json':
-            return { icon: FileJson, className: 'text-yellow-500' };
+            return { icon: JsonIcon };
         case 'tsx':
+            return { icon: ReactIcon };
         case 'jsx':
-            return { icon: FileCode, className: 'text-blue-500' };
+            return { icon: ReactIcon };
         case 'ts':
+            return { icon: TypeScript };
         case 'js':
-            return { icon: FileCode, className: 'text-blue-400' };
+            return { icon: JavaScriptIcon };
         case 'svelte':
-            return { icon: FileCode, className: 'text-orange-500' };
+            return { icon: SvelteIcon };
         case 'vue':
-            return { icon: FileCode, className: 'text-green-500' };
+            return { icon: VueIcon };
         case 'css':
+            return { icon: CssIcon };
         case 'scss':
         case 'sass':
+            return { icon: SassIcon };
         case 'less':
-            return { icon: Palette, className: 'text-pink-500' };
+            return { icon: LessIcon };
         case 'png':
         case 'jpg':
         case 'jpeg':
@@ -121,6 +134,15 @@ const fileIcon = $derived.by(() => {
         case 'webp':
         case 'ico':
             return { icon: ImageIcon, className: 'text-purple-500' };
+        case 'html':
+        case 'htm':
+            return { icon: HtmlIcon };
+        case 'md':
+        case 'markdown':
+            return { icon: MarkdownIcon };
+        case 'yaml':
+        case 'yml':
+            return { icon: YamlIcon };
         default:
             return { icon: File, className: 'text-tertiary' };
     }
@@ -136,7 +158,7 @@ const fileIcon = $derived.by(() => {
 	>
 		{#if isEditing}
 			<div
-				class="w-full flex items-center gap-1 px-2 py-1 text-xs rounded {isSelected
+				class="w-full flex items-center gap-1 px-2 min-h-6 text-xs rounded {isSelected
 					? 'bg-blue-100 dark:bg-blue-900/30'
 					: ''}"
 				style="padding-left: {level * 12}px"
@@ -150,26 +172,28 @@ const fileIcon = $derived.by(() => {
 							<ChevronRight size={12} />
 						{/if}
 					</span>
-					<IconComponent size={12} class="flex-shrink-0 {fileIcon.className}" />
+					<IconComponent size={14} class="flex-shrink-0 {fileIcon.className}" />
 				{:else}
 					{@const IconComponent = fileIcon.icon}
 					<span class="flex-shrink-0"></span>
-					<IconComponent size={12} class="flex-shrink-0 {fileIcon.className}" />
+					<IconComponent size={14} class="flex-shrink-0 {fileIcon.className}" />
 				{/if}
-				<input
-					bind:this={inputElement}
+				<TextInput
+					bind:this={textInputElement}
 					bind:value={editValue}
-					onkeydown={handleInputKeydown}
-					onblur={handleInputBlur}
-					class="flex-1 min-w-0 bg-surface border border-blue-500 rounded px-1 text-primary font-mono focus:outline-none focus:ring-1 focus:ring-blue-500"
-					type="text"
+					inputProps={{
+						onkeydown: handleInputKeydown,
+						onblur: (e) => handleInputBlur(e),
+						type: 'text'
+					}}
+					size="xs"
 				/>
 			</div>
 		{:else}
 			<button
 				onclick={handleClick}
 				class="w-full flex items-center gap-1 px-2 py-1 text-xs hover:bg-surface-hover transition-colors rounded text-left {isSelected
-					? 'bg-blue-100 dark:bg-blue-900/30'
+					? 'bg-surface-accent-selected'
 					: ''}"
 				style="padding-left: {level * 12}px"
 			>
@@ -188,32 +212,44 @@ const fileIcon = $derived.by(() => {
 					<span class="flex-shrink-0"></span>
 					<IconComponent size={12} class="flex-shrink-0 {fileIcon.className}" />
 				{/if}
-				<span class="truncate text-primary font-mono">{node.name}</span>
+				<span class={twMerge('truncate text-primary font-normal', isSelected ? 'text-accent' : '')}
+					>{node.name}</span
+				>
 			</button>
 
-			{#if isHovered && !isEditing}
-				<div
-					class="absolute right-1 top-1 flex gap-0.5 bg-surface rounded shadow-sm border border-gray-200 dark:border-gray-700"
-				>
-					{#if !noEdit}
-						<button
-							onclick={handleEdit}
-							class="p-0.5 hover:bg-surface-hover rounded transition-colors"
-							title="Rename"
-						>
-							<Pencil size={12} class="text-secondary" />
-						</button>
-						<button
-							onclick={handleDelete}
-							class="p-0.5 hover:bg-surface-hover rounded transition-colors"
-							title="Delete"
-						>
-							<Trash2 size={12} class="text-red-500" />
-						</button>
-					{:else}
-						<Lock size={12} class="text-secondary" />
-					{/if}
-				</div>
+			{#if isHovered || dropdownOpen}
+				{#if !noEdit}
+					<DropdownV2
+						items={[
+							{
+								displayName: 'Rename',
+								icon: Pencil,
+								action: handleEdit
+							},
+							{
+								displayName: 'Delete',
+								icon: Trash2,
+								action: handleDelete,
+								type: 'delete'
+							}
+						]}
+						placement="bottom-end"
+						class="absolute -translate-y-1/2 top-1/2 right-1"
+						bind:open={dropdownOpen}
+					>
+						{#snippet buttonReplacement()}
+							<Button
+								iconOnly
+								unifiedSize="xs"
+								variant="subtle"
+								nonCaptureEvent
+								startIcon={{ icon: Ellipsis }}
+							></Button>
+						{/snippet}
+					</DropdownV2>
+				{:else}
+					<Lock size={12} class="text-secondary absolute -translate-y-1/2 top-1/2 right-2" />
+				{/if}
 			{/if}
 		{/if}
 	</div>
@@ -227,9 +263,10 @@ const fileIcon = $derived.by(() => {
 				{onAddFolder}
 				{onRename}
 				{onDelete}
+				{onRequestEdit}
+				{onCancelEdit}
 				{selectedPath}
-				{pathToRename}
-				{pathToExpand}
+				{pathToEdit}
 				level={level + 1}
 			/>
 		{/each}