windmill-components 1.408.1 → 1.430.2

package/package/components/flows/map/InsertModuleButton.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         stop?: boolean | undefined;
         index?: number | undefined;
         funcDesc?: string | undefined;
@@ -9,6 +10,7 @@ declare const __propDef: {
         disableAi?: boolean | undefined;
         kind?: "script" | "failure" | "trigger" | "preprocessor" | undefined;
         allowTrigger?: boolean | undefined;
+        iconSize?: number | undefined;
         placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top-center" | "bottom-center" | undefined;
     };
     events: {
@@ -16,6 +18,7 @@ declare const __propDef: {
         new: CustomEvent<any>;
         pickScript: CustomEvent<any>;
         pickFlow: CustomEvent<any>;
+        open: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/flows/map/MapItem.svelte

@@ -8,18 +8,15 @@ import { prettyLanguage } from '../../../common';
 import { msToSec } from '../../../utils';
 import BarsStaggered from '../../icons/BarsStaggered.svelte';
 import FlowJobsMenu from './FlowJobsMenu.svelte';
-import FlowCopilotButton from './FlowCopilotButton.svelte';
+import { isTriggerStep } from '../../graph/graphBuilder';
 export let mod;
 export let insertable;
-export let disableAi;
 export let annotation = undefined;
 export let bgColor = '';
-export let modules;
 export let moving = undefined;
 export let duration_ms = undefined;
 export let retries = undefined;
 export let flowJobs;
-$: idx = modules.findIndex((m) => m.id === mod.id);
 const { selectedId } = getContext('FlowGraphContext');
 const dispatch = createEventDispatcher();
 $: itemProps = {
@@ -40,9 +37,6 @@ function onDelete(event) {
 
 {#if mod}
 	<div class="relative">
-		{#if insertable && !disableAi && mod.id === 'preprocessor'}
-			<FlowCopilotButton className="-top-10" />
-		{/if}
 		{#if moving == mod.id}
 			<div class="absolute z-10 right-20 top-0.5 center-center">
 				<Button color="dark" on:click={() => dispatch('move')} size="xs" variant="border">
@@ -64,13 +58,14 @@ function onDelete(event) {
 		{#if flowJobs && !insertable && (mod.value.type === 'forloopflow' || mod.value.type === 'whileloopflow')}
 			<div class="absolute right-8 z-50 -top-5">
 				<FlowJobsMenu
+					id={mod.id}
 					on:selectedIteration={(e) => {
 						dispatch('selectedIteration', e.detail)
 					}}
 					flowJobsSuccess={flowJobs.flowJobsSuccess}
 					flowJobs={flowJobs.flowJobs}
 					selected={flowJobs.selected}
-					index={idx}
+					selectedManually={flowJobs.selectedManually}
 				/>
 			</div>
 		{/if}
@@ -155,6 +150,8 @@ function onDelete(event) {
 						(mod.value.type === 'rawscript'
 							? `Inline ${prettyLanguage(mod.value.language)}`
 							: 'To be defined')}
+					path={`path` in mod.value && mod.summary ? mod.value.path : ''}
+					isTrigger={isTriggerStep(mod)}
 				>
 					<div slot="icon">
 						{#if mod.value.type === 'rawscript'}

package/package/components/flows/map/MapItem.svelte.d.ts

@@ -4,10 +4,8 @@ declare const __propDef: {
     props: {
         mod: FlowModule;
         insertable: boolean;
-        disableAi: boolean;
         annotation?: string | undefined;
         bgColor?: string | undefined;
-        modules: FlowModule[];
         moving?: string | undefined;
         duration_ms?: number | undefined;
         retries?: number | undefined;
@@ -15,6 +13,7 @@ declare const __propDef: {
             flowJobs: string[];
             selected: number;
             flowJobsSuccess: (boolean | undefined)[];
+            selectedManually: boolean | undefined;
         } | undefined;
     };
     events: {

package/package/components/flows/map/VirtualItem.svelte

@@ -1,6 +1,7 @@
 <script>import { Badge } from '../../common';
-import { classNames } from '../../../utils';
-import { createEventDispatcher, getContext } from 'svelte';
+import { getContext } from 'svelte';
+import VirtualItemWrapper from './VirtualItemWrapper.svelte';
+import FlowPropPicker from '../propPicker/FlowPropPicker.svelte';
 export let label = undefined;
 export let bgColor = '';
 export let selected;
@@ -10,35 +11,26 @@ export let center = true;
 export let borderColor = undefined;
 export let hideId = false;
 export let preLabel = undefined;
-const dispatch = createEventDispatcher();
+export let inputJson = undefined;
+export let prefix = '';
+export let alwaysPluggable = false;
 const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotContext') || {};
+const propPickerContext = getContext('PropPickerContext');
+const flowPropPickerConfig = propPickerContext?.flowPropPickerConfig;
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-	class={classNames(
-		'w-full flex relative overflow-hidden rounded-sm',
-		selectable ? 'cursor-pointer' : '',
-		selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : '',
-		label === 'Input' && $copilotCurrentStepStore === 'Input' ? 'z-[901]' : ''
-	)}
-	style="width: 275px; max-height: 34px; background-color: {bgColor} !important;"
-	on:click={() => {
-		if (selectable) {
-			if (id) {
-				dispatch('select', id)
-			} else {
-				dispatch('select', label || label || '')
-			}
-		}
-	}}
-	title={(label ? label + ' ' : '') + (label ?? '')}
-	id={`flow-editor-virtual-${encodeURIComponent(label || label || '')}`}
+<VirtualItemWrapper
+	{label}
+	{bgColor}
+	{selected}
+	{selectable}
+	{id}
+	onTop={label === 'Input' && $copilotCurrentStepStore === 'Input'}
+	on:select
 >
 	<div
 		style={borderColor ? `border-color: ${borderColor};` : 'border: 0'}
-		class="flex gap-1 justify-between {center
+		class="flex flex-row gap-1 justify-between {center
 			? 'items-center'
 			: 'items-baseline'} w-full overflow-hidden rounded-sm border p-2 text-2xs module text-primary border-gray-400 dark:border-gray-600"
 	>
@@ -46,8 +38,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 			<slot name="icon" />
 			<span class="mr-2" />
 		{/if}
-		<div />
-		<div class="flex flex-col w-full">
+		<div class="flex flex-col flex-grow shrink-0 max-w-full min-w-0">
 			{#if label}
 				<div class="truncate text-center">{label}</div>
 			{/if}
@@ -55,10 +46,18 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 				<div class="truncate text-2xs text-center"><pre>{preLabel}</pre></div>
 			{/if}
 		</div>
-		<div class="flex items-center space-x-2">
-			{#if id && !hideId}
-				<Badge color="indigo">{id}</Badge>
-			{/if}
-		</div>
+		{#if id && !hideId && !id?.startsWith('subflow:')}
+			<div class="flex items-center shrink min-w-0">
+				<Badge color="indigo" wrapperClass="w-full" baseClass="max-w-full" title={id}>
+					<span class="max-w-full text-2xs truncate">{id}</span>
+				</Badge>
+			</div>
+		{/if}
 	</div>
-</div>
+
+	{#if inputJson && $flowPropPickerConfig && (Object.keys(inputJson).length > 0 || alwaysPluggable)}
+		<div class="absolute -bottom-[14px] right-[21px] translate-x-[50%] center-center">
+			<FlowPropPicker json={inputJson} {prefix} />
+		</div>
+	{/if}
+</VirtualItemWrapper>

package/package/components/flows/map/VirtualItem.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponent } from "svelte";
-import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
         label?: string | undefined;
@@ -11,18 +10,11 @@ declare const __propDef: {
         borderColor?: string | undefined;
         hideId?: boolean | undefined;
         preLabel?: string | undefined;
+        inputJson?: Object | undefined;
+        prefix?: string | undefined;
+        alwaysPluggable?: boolean | undefined;
     };
     events: {
-        insert: CustomEvent<{
-            script?: {
-                path: string;
-                summary: string;
-                hash: string | undefined;
-            } | undefined;
-            detail: 'script' | 'forloop' | 'branchone' | 'branchall' | 'trigger' | 'move';
-            modules: FlowModule[];
-            index: number;
-        }>;
         select: CustomEvent<string>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/flows/map/VirtualItemWrapper.svelte

@@ -0,0 +1,33 @@
+<script>import { classNames } from '../../../utils';
+import { createEventDispatcher } from 'svelte';
+export let label;
+export let selectable;
+export let selected;
+export let id;
+export let onTop = false;
+export let bgColor;
+const dispatch = createEventDispatcher();
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class={classNames(
+		'w-full flex relative rounded-sm',
+		selectable ? 'cursor-pointer' : '',
+		selected ? 'outline outline-offset-1 outline-2  outline-gray-600 dark:outline-gray-400' : '',
+		onTop ? 'z-[901]' : ''
+	)}
+	style="width: 275px; max-height: 34px; background-color: {bgColor} !important;"
+	on:click={() => {
+		if (selectable) {
+			if (id) {
+				dispatch('select', id)
+			} else {
+				dispatch('select', label || label || '')
+			}
+		}
+	}}
+	title={label ? label + ' ' : ''}
+	id={`flow-editor-virtual-${encodeURIComponent(label || label || '')}`}><slot /></div
+>

package/package/components/flows/map/VirtualItemWrapper.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        label: string | undefined;
+        selectable: boolean;
+        selected: boolean;
+        id: string | undefined;
+        onTop?: boolean | undefined;
+        bgColor: string;
+    };
+    events: {
+        insert: CustomEvent<{
+            script?: {
+                path: string;
+                summary: string;
+                hash: string | undefined;
+            } | undefined;
+            detail: 'script' | 'forloop' | 'branchone' | 'branchall' | 'trigger' | 'move';
+            modules: FlowModule[];
+            index: number;
+        }>;
+        select: CustomEvent<string>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type VirtualItemWrapperProps = typeof __propDef.props;
+export type VirtualItemWrapperEvents = typeof __propDef.events;
+export type VirtualItemWrapperSlots = typeof __propDef.slots;
+export default class VirtualItemWrapper extends SvelteComponent<VirtualItemWrapperProps, VirtualItemWrapperEvents, VirtualItemWrapperSlots> {
+}
+export {};

package/package/components/flows/pickers/FlowScriptPickerQuick.svelte

@@ -25,6 +25,7 @@ function click() {
 <svelte:window on:keydown={handleKeydown} />
 
 <button
+	id={`flow-editor-new-${lang}`}
 	class={twMerge(
 		'px-3 py-2 gap-2 w-full text-left hover:bg-surface-hover flex flex-row items-center transition-all rounded-md',
 		selected ? 'bg-surface-hover' : ''

package/package/components/flows/pickers/PickHubScriptQuick.svelte

@@ -4,6 +4,7 @@ import { classNames } from '../../../utils';
 import { APP_TO_ICON_COMPONENT } from '../../icons';
 import { IntegrationService, ScriptService } from '../../../gen';
 import { Circle } from 'lucide-svelte';
+import Popover from '../../Popover.svelte';
 export let kind = 'script';
 export let filter = '';
 export let loading = false;
@@ -12,6 +13,7 @@ let hubNotAvailable = false;
 const dispatch = createEventDispatcher();
 export let appFilter = undefined;
 export let items = [];
+export let displayPath = false;
 export let apps = [];
 let allApps = [];
 $: applyFilter(filter, kind, appFilter);
@@ -101,32 +103,56 @@ function onKeyDown(e) {
 	<ul>
 		{#each items as item, index (item.path)}
 			<li class="w-full">
-				<button
-					class="px-3 py-2 gap-2 flex flex-row w-full hover:bg-surface-hover transition-all items-center rounded-md {index ===
-					selected
-						? 'bg-surface-hover'
-						: ''}"
-					on:click={() => dispatch('pickScript', item)}
-				>
-					<div class={classNames('flex justify-center items-center')}>
-						{#if item['app'] in APP_TO_ICON_COMPONENT}
-							<svelte:component this={APP_TO_ICON_COMPONENT[item['app']]} height={14} width={14} />
-						{:else}
-							<div
-								class="w-[14px] h-[14px] text-gray-400 flex flex-row items-center justify-center"
+				<Popover class="w-full" placement="right" forceOpen={index === selected}>
+					<svelte:fragment slot="text">
+						<div class="flex flex-col">
+							<div class="text-left text-xs font-normal leading-tight py-0"
+								>{item.summary ?? ''}</div
 							>
-								<Circle size="12" />
+							<div class="text-left text-2xs font-normal">
+								{item.path ?? ''}
 							</div>
-						{/if}
-					</div>
+						</div>
+					</svelte:fragment>
+					<button
+						class="px-3 py-2 gap-2 flex flex-row w-full hover:bg-surface-hover transition-all items-center rounded-md {index ===
+						selected
+							? 'bg-surface-hover'
+							: ''}"
+						on:click={() => dispatch('pickScript', item)}
+					>
+						<div class={classNames('flex justify-center items-center')}>
+							{#if item['app'] in APP_TO_ICON_COMPONENT}
+								<svelte:component
+									this={APP_TO_ICON_COMPONENT[item['app']]}
+									height={14}
+									width={14}
+								/>
+							{:else}
+								<div
+									class="w-[14px] h-[14px] text-gray-400 flex flex-row items-center justify-center"
+								>
+									<Circle size="12" />
+								</div>
+							{/if}
+						</div>
 
-					<span class="grow truncate text-left text-2xs text-primary font-normal">
-						{item.summary ?? ''}
-					</span>
-					{#if index === selected}
-						<kbd class="!text-xs">&crarr;</kbd>
-					{/if}
-				</button>
+						<div class="flex flex-col grow min-w-0">
+							<div
+								class="grow truncate text-left text-2xs text-primary font-normal leading-tight py-0.5"
+								>{item.summary ?? ''}</div
+							>
+							{#if displayPath && item.path}
+								<div class="grow truncate text-left text-2xs text-secondary font-[220]">
+									{item.path}
+								</div>
+							{/if}
+						</div>
+						{#if index === selected}
+							<kbd class="!text-xs">&crarr;</kbd>
+						{/if}
+					</button>
+				</Popover>
 			</li>
 		{/each}
 	</ul>

package/package/components/flows/pickers/PickHubScriptQuick.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
             app: string;
             kind: HubScriptKind;
         }[] | undefined;
+        displayPath?: boolean | undefined;
         apps?: string[] | undefined;
     };
     events: {

package/package/components/flows/pickers/TopLevelNode.svelte

@@ -9,6 +9,7 @@ const dispatch = createEventDispatcher();
 </script>
 
 <button
+	id={`flow-editor-flow-kind-${label.replaceAll(' ', '-').toLowerCase()}`}
 	class={twMerge(
 		'w-full text-left py-2 px-1.5 hover:bg-surface-hover text-xs font-medium transition-all whitespace-nowrap flex flex-row gap-2 items-center rounded-md',
 		selected ? 'bg-surface-hover' : '',

package/package/components/flows/pickers/WorkspaceScriptPickerQuick.svelte

@@ -6,9 +6,11 @@ import { Skeleton } from '../../common';
 import { emptyString } from '../../../utils';
 import { Code2 } from 'lucide-svelte';
 import BarsStaggered from '../../icons/BarsStaggered.svelte';
+import Popover from '../../Popover.svelte';
 export let kind = 'script';
 export let isTemplate = undefined;
 export let selected = undefined;
+export let displayPath = false;
 let items = undefined;
 let filteredItems = undefined;
 export let filteredWithOwner = undefined;
@@ -81,35 +83,52 @@ function onKeyDown(e) {
 	<ul>
 		{#each filteredWithOwner ?? [] as { path, hash, summary, marked }, index}
 			<li class="w-full">
-				<button
-					class="px-3 py-2 gap-2 flex flex-row w-full hover:bg-surface-hover transition-all items-center rounded-md {index ===
-					selected
-						? 'bg-surface-hover'
-						: ''}"
-					on:click={() => {
-						if (kind == 'flow') {
-							dispatch('pickFlow', { path: path })
-						} else {
-							dispatch('pickScript', { path: path, hash: lockHash ? hash : undefined, kind })
-						}
-					}}
-				>
-					{#if kind == 'flow'}
-						<BarsStaggered size={14} class="shrink-0" />
-					{:else}
-						<Code2 size={14} />
-					{/if}
-					<span class="grow min-w-0 truncate text-left text-2xs text-primary font-normal">
-						{#if marked}
-							{@html marked}
-						{:else}
-							{!summary || summary.length == 0 ? path : summary}
-						{/if}</span
+				<Popover class="w-full " placement="right" forceOpen={index === selected}>
+					<svelte:fragment slot="text">
+						<div class="flex flex-col">
+							<div class="text-left text-xs font-normal leading-tight py-0">{summary ?? ''}</div>
+							<div class="text-left text-2xs font-normal">
+								{path ?? ''}
+							</div>
+						</div>
+					</svelte:fragment>
+					<button
+						class="px-3 py-2 gap-2 flex flex-row w-full hover:bg-surface-hover transition-all items-center rounded-md {index ===
+						selected
+							? 'bg-surface-hover'
+							: ''}"
+						on:click={() => {
+							if (kind == 'flow') {
+								dispatch('pickFlow', { path: path })
+							} else {
+								dispatch('pickScript', { path: path, hash: lockHash ? hash : undefined, kind })
+							}
+						}}
 					>
-					{#if index === selected}
-						<kbd class="!text-xs">&crarr;</kbd>
-					{/if}
-				</button>
+						{#if kind == 'flow'}
+							<BarsStaggered size={14} class="shrink-0" />
+						{:else}
+							<Code2 size={14} />
+						{/if}
+						<div class="flex flex-col grow min-w-0">
+							<div class="grow min-w-0 truncate text-left text-2xs text-primary font-normal">
+								{#if marked}
+									{@html marked}
+								{:else}
+									{!summary || summary.length == 0 ? path : summary}
+								{/if}
+							</div>
+							{#if displayPath && path}
+								<div class="grow min-w-0 truncate text-left text-2xs text-secondary font-[220]">
+									{path}
+								</div>
+							{/if}
+						</div>
+						{#if index === selected}
+							<kbd class="!text-xs">&crarr;</kbd>
+						{/if}
+					</button>
+				</Popover>
 			</li>
 		{/each}
 	</ul>

package/package/components/flows/pickers/WorkspaceScriptPickerQuick.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         kind?: "script" | "failure" | "trigger" | "approval" | "flow" | "preprocessor" | undefined;
         isTemplate?: boolean | undefined;
         selected?: number | undefined;
+        displayPath?: boolean | undefined;
         filteredWithOwner?: ({
             path: string;
             summary?: string | undefined;

package/package/components/flows/previousResults.d.ts

@@ -24,4 +24,9 @@ export declare function getFailureStepPropPicker(flowState: FlowState, flow: Ope
 };
 export declare function getStepPropPicker(flowState: FlowState, parentModule: FlowModule | undefined, previousModule: FlowModule | undefined, id: string, flow: OpenFlow, args: any, include_node: boolean): StepPropPicker;
 export declare function buildExtraLib(flowInput: Record<string, any>, results: Record<string, any>, resume: boolean): string;
+export declare function buildPrefixRegex(words: string[]): Array<{
+    regex: RegExp;
+    word: string;
+}>;
+export declare function filterNestedObject(obj: any, nestedKeys: string[]): any;
 export {};

package/package/components/flows/previousResults.js

@@ -34,7 +34,10 @@ function getFlowInput(parentModules, flowState, args, schema) {
     const parentState = parentModule ? flowState[parentModule.id] : undefined;
     if (parentState && parentModule) {
         if (parentState.previewArgs &&
-            !(parentModule.value?.type === 'forloopflow' && parentModule.value?.modules?.length === 1)) {
+            !(parentModule.value?.type === 'forloopflow' && parentModule.value?.modules?.length === 1) &&
+            parentState &&
+            typeof parentState.previewArgs == 'object' &&
+            `iter` in parentState.previewArgs) {
             return { ...topFlowInput, ...parentState.previewArgs };
         }
         else {
@@ -183,3 +186,34 @@ declare const approvers: string
         : ''}
 `;
 }
+export function buildPrefixRegex(words) {
+    return words.map((word) => {
+        const prefixes = [];
+        for (let i = 1; i <= word.length; i++) {
+            prefixes.push(word.slice(0, i) + '$');
+        }
+        prefixes.push(word + '\\.');
+        prefixes.push(word + '\\[');
+        return {
+            regex: new RegExp(`^(${prefixes.join('|')}).*`),
+            word
+        };
+    });
+}
+export function filterNestedObject(obj, nestedKeys) {
+    if (nestedKeys.length === 0)
+        return {};
+    if (nestedKeys.length === 1) {
+        if (nestedKeys[0] === '') {
+            return obj;
+        }
+        return Object.fromEntries(Object.entries(obj).filter(([key]) => key.startsWith(nestedKeys[0])));
+    }
+    const [key, ...rest] = nestedKeys;
+    if (obj && typeof obj === 'object' && key in obj) {
+        const result = {};
+        result[key] = filterNestedObject(obj[key], rest);
+        return result;
+    }
+    return {};
+}

package/package/components/flows/propPicker/FlowPropPicker.svelte

@@ -0,0 +1,69 @@
+<script>import ObjectViewer from '../../propertyPicker/ObjectViewer.svelte';
+import AnimatedButton from '../../common/button/AnimatedButton.svelte';
+import { Popup } from '../../common';
+import { Plug } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+import { getContext } from 'svelte';
+import Popover from '../../Popover.svelte';
+import { tick } from 'svelte';
+export let json = {};
+export let prefix = '';
+let isConnecting = false;
+const { flowPropPickerConfig } = getContext('PropPickerContext');
+async function updateConnecting() {
+    await tick();
+    isConnecting = $flowPropPickerConfig?.insertionMode === 'connect';
+}
+$: $flowPropPickerConfig, updateConnecting();
+</script>
+
+<button
+	on:click|preventDefault|stopPropagation={(e) => {
+		e.preventDefault()
+		e.stopPropagation()
+	}}
+	on:keydown|preventDefault|stopPropagation
+	data-prop-picker
+>
+	<AnimatedButton
+		animate={isConnecting}
+		wrapperClasses="h-[20px] w-[20px] "
+		baseRadius="9999px"
+		marginWidth="1px"
+	>
+		<Popup floatingConfig={{ strategy: 'fixed', placement: 'bottom-start' }}>
+			<svelte:fragment slot="button" let:open>
+				<Popover disablePopup={open}>
+					<svelte:fragment slot="text">node outputs</svelte:fragment>
+					<button
+						class={twMerge(
+							'rounded-full center-center h-[18px] w-[18px]',
+							isConnecting
+								? 'bg-surface text-blue-500'
+								: 'outline-[1px] outline dark:outline-gray-500 outline-gray-300 duration-150 bg-blue-500 hover:bg-blue-700 text-white'
+						)}
+					>
+						<Plug size={12} strokeWidth={2} />
+					</button>
+				</Popover>
+			</svelte:fragment>
+			<div data-prop-picker>
+				<ObjectViewer
+					{json}
+					topBrackets={false}
+					pureViewer={false}
+					{prefix}
+					on:select={({ detail }) => {
+						if ($flowPropPickerConfig?.onSelect(detail)) {
+							$flowPropPickerConfig?.clearFocus()
+							// console.log('BAR')
+						} else {
+							// console.log('FOO')
+						}
+					}}
+					allowCopy={!$flowPropPickerConfig}
+				/>
+			</div>
+		</Popup>
+	</AnimatedButton>
+</button>

package/package/components/flows/propPicker/FlowPropPicker.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        json?: {} | undefined;
+        prefix?: string | undefined;
+    };
+    events: {
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowPropPickerProps = typeof __propDef.props;
+export type FlowPropPickerEvents = typeof __propDef.events;
+export type FlowPropPickerSlots = typeof __propDef.slots;
+export default class FlowPropPicker extends SvelteComponent<FlowPropPickerProps, FlowPropPickerEvents, FlowPropPickerSlots> {
+}
+export {};