windmill-components 1.472.1 → 1.472.2

package/package/components/propertyPicker/ObjectViewer.svelte

@@ -0,0 +1,278 @@
+<script>import { copyToClipboard, truncate } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import { computeKey } from './utils';
+import { NEVER_TESTED_THIS_FAR } from '../flows/models';
+import Portal from '../Portal.svelte';
+import { Button } from '../common';
+import { Download, PanelRightOpen, TriangleAlertIcon } from 'lucide-svelte';
+import S3FilePicker from '../S3FilePicker.svelte';
+import { workspaceStore } from '../../stores';
+import AnimatedButton from '../common/button/AnimatedButton.svelte';
+import Popover from '../Popover.svelte';
+export let json;
+export let level = 0;
+export let currentPath = '';
+export let pureViewer = false;
+export let collapsed = (level != 0 && level % 3 == 0) || Array.isArray(json);
+export let rawKey = false;
+export let topBrackets = false;
+export let allowCopy = true;
+export let collapseLevel = undefined;
+export let prefix = '';
+export let expandedEvenOnLevel0 = undefined;
+export let connecting = false;
+let s3FileViewer;
+let hoveredKey = null;
+const collapsedSymbol = '...';
+$: keys = ['object', 's3object'].includes(getTypeAsString(json)) ? Object.keys(json) : [];
+$: isArray = Array.isArray(json);
+$: openBracket = isArray ? '[' : '{';
+$: closeBracket = isArray ? ']' : '}';
+export function getTypeAsString(arg) {
+    if (arg === null) {
+        return 'null';
+    }
+    if (arg === undefined) {
+        return 'undefined';
+    }
+    if (Object.keys(arg).length === 1 && Object.keys(arg).includes('s3')) {
+        return 's3object';
+    }
+    return typeof arg;
+}
+function collapse() {
+    collapsed = !collapsed;
+}
+const dispatch = createEventDispatcher();
+function computeFullKey(key, rawKey) {
+    if (rawKey) {
+        return `${prefix}('${key}')`;
+    }
+    const keyToSelect = computeKey(key, isArray, currentPath);
+    const separator = !prefix || keyToSelect.startsWith('[') ? '' : '.';
+    return prefix + separator + keyToSelect;
+}
+function selectProp(key, value, clickedValue) {
+    const fullKey = computeFullKey(key, rawKey);
+    if (allowCopy) {
+        if (pureViewer && clickedValue) {
+            copyToClipboard(typeof value == 'string' ? value : JSON.stringify(value));
+        }
+        else {
+            copyToClipboard(fullKey);
+        }
+    }
+    dispatch('select', fullKey);
+}
+$: keyLimit = isArray ? 5 : 100;
+$: fullyCollapsed = keys.length > 1 && collapsed;
+</script>
+
+<Portal name="object-viewer">
+	<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />
+</Portal>
+{#if keys.length > 0}
+	{#if !fullyCollapsed}
+		<span>
+			{#if level != 0 && keys.length > 1}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+
+				<Button
+					color="light"
+					size="xs2"
+					variant="border"
+					on:click={collapse}
+					wrapperClasses="!inline-flex w-fit"
+					btnClasses="font-mono h-4 text-2xs px-1 font-thin text-primary rounded-[0.275rem]"
+					>-</Button
+				>
+			{/if}
+			{#if level == 0 && topBrackets}<span class="text-tertiary">{openBracket}</span>{/if}
+			<ul
+				class={`w-full ${
+					level === 0 ? `border-none ${topBrackets ? 'pl-2' : ''}` : 'pl-2 border-l border-dotted'
+				}`}
+			>
+				{#each keys.length > keyLimit ? keys.slice(0, keyLimit) : keys as key, index (key)}
+					<li>
+						<AnimatedButton
+							animate={connecting && hoveredKey === key}
+							marginWidth="1px"
+							wrapperClasses="inline-flex h-fit w-fit items-center"
+							baseRadius="0.275rem"
+							animationDuration="2s"
+						>
+							<Button
+								on:click={() => selectProp(key, undefined, false)}
+								on:mouseenter={() => {
+									hoveredKey = key
+								}}
+								on:mouseleave={() => (hoveredKey = null)}
+								size="xs2"
+								color="light"
+								variant="border"
+								wrapperClasses="p-0 whitespace-nowrap w-fit"
+								btnClasses="font-mono h-4 py-1 text-2xs font-thin px-1 rounded-[0.275rem]"
+								title={computeFullKey(key, rawKey)}
+							>
+								<span class={pureViewer ? 'cursor-auto' : ''}>{!isArray ? key : index} </span>
+							</Button>
+						</AnimatedButton>
+						<span class="text-2xs -ml-0.5 text-tertiary">:</span>
+
+						{#if getTypeAsString(json[key]) === 'object'}
+							<svelte:self
+								json={json[key]}
+								level={level + 1}
+								currentPath={computeFullKey(key, rawKey)}
+								{pureViewer}
+								{allowCopy}
+								on:select
+								{collapseLevel}
+								collapsed={collapseLevel !== undefined
+									? level + 1 >= collapseLevel && key != expandedEvenOnLevel0
+									: undefined}
+							/>
+						{:else}
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<span
+								class="val inline text-left {pureViewer
+									? 'cursor-auto'
+									: ''} rounded pl-0.5 {getTypeAsString(json[key])}"
+								on:click={() => {
+									selectProp(key, json[key], true)
+								}}
+								title={JSON.stringify(json[key])}
+							>
+								{#if json[key] === NEVER_TESTED_THIS_FAR}
+									<span class="text-2xs text-tertiary font-normal">
+										Test the flow to see a value
+									</span>
+								{:else if json[key] == undefined}
+									<span class="text-2xs">undefined</span>
+								{:else if json[key] == null}
+									<span class="text-2xs">null</span>
+								{:else if typeof json[key] == 'string'}
+									<span class="text-2xs">"{truncate(json[key], 200)}"</span>
+								{:else if typeof json[key] == 'number' && Number.isInteger(json[key]) && !Number.isSafeInteger(json[key])}
+									<span class="inline-flex flex-row gap-1 items-center text-2xs">
+										{truncate(JSON.stringify(json[key]), 200)}
+										<Popover>
+											<TriangleAlertIcon size={14} class="text-yellow-500 mb-0.5" />
+											<svelte:fragment slot="text">
+												This number is too large for the frontend to handle correctly and may be
+												rounded.
+											</svelte:fragment>
+										</Popover>
+									</span>
+								{:else}
+									<span class="text-2xs">
+										{truncate(JSON.stringify(json[key]), 200)}
+									</span>
+								{/if}
+							</span>
+						{/if}
+					</li>
+				{/each}
+				{#if keys.length > keyLimit}
+					{@const increment = Math.min(100, keys.length - keyLimit)}
+					<button on:click={() => (keyLimit += increment)} class="text-2xs px-2 text-secondary">
+						{keyLimit}/{keys.length}: Load {increment} more...
+					</button>
+				{/if}
+			</ul>
+			{#if level == 0 && topBrackets}
+				<div class="flex">
+					<span class="text-tertiary">{closeBracket}</span>
+					{#if getTypeAsString(json) === 's3object'}
+						<a
+							class="text-secondary underline font-semibold text-2xs whitespace-nowrap ml-1 w-fit"
+							href={`/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${json?.s3}${
+								json?.storage ? `&storage=${json.storage}` : ''
+							}`}
+							download={json?.s3.split('/').pop() ?? 'unnamed_download.file'}
+						>
+							<span class="flex items-center gap-1"><Download size={12} />download</span>
+						</a>
+						<button
+							class="text-secondary underline text-2xs whitespace-nowrap ml-1"
+							on:click={() => {
+								s3FileViewer?.open?.(json)
+							}}
+							><span class="flex items-center gap-1"><PanelRightOpen size={12} />open preview</span>
+						</button>
+					{/if}
+				</div>
+			{/if}
+		</span>
+	{/if}
+
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+
+	{#if fullyCollapsed}
+		<span>
+			<Button
+				color="light"
+				size="xs2"
+				variant="border"
+				on:click={collapse}
+				wrapperClasses="!inline-flex w-fit"
+				btnClasses="h-4 text-[9px] px-1  text-primary rounded-[0.275rem]"
+			>
+				{openBracket}{collapsedSymbol}{closeBracket}
+			</Button>
+		</span>
+	{/if}
+{:else if topBrackets}
+	<span class="text-primary">{openBracket}{closeBracket}</span>
+{:else if json == undefined}
+	<span class="text-tertiary text-2xs ml-2">undefined</span>
+{:else}
+	<span class="text-tertiary text-2xs ml-2">No items</span>
+{/if}
+
+<style>
+	ul {
+		list-style: none;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+	}
+
+	.val.undefined {
+		--tw-text-opacity: 1;
+		color: rgb(var(--color-text-tertiary) / var(--tw-text-opacity));
+}
+	.val.null {
+		--tw-text-opacity: 1;
+		color: rgb(var(--color-text-tertiary) / var(--tw-text-opacity));
+}
+	.val.string {
+		--tw-text-opacity: 1;
+		color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+	:is(.dark .val.string) {
+		color: rgb(74 222 128 / 0.8);
+}
+
+	.val.number {
+		--tw-text-opacity: 1;
+		color: rgb(234 88 12 / var(--tw-text-opacity));
+}
+
+	:is(.dark .val.number) {
+		color: rgb(251 146 60 / 0.9);
+}
+
+	.val.number {
+		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+	.val.boolean {
+		--tw-text-opacity: 1;
+		color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+	:is(.dark .val.boolean) {
+		color: rgb(96 165 250 / 0.9);
+}</style>

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

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        json: any;
+        level?: number | undefined;
+        currentPath?: string | undefined;
+        pureViewer?: boolean | undefined;
+        collapsed?: boolean | undefined;
+        rawKey?: boolean | undefined;
+        topBrackets?: boolean | undefined;
+        allowCopy?: boolean | undefined;
+        collapseLevel?: number | undefined;
+        prefix?: string | undefined;
+        expandedEvenOnLevel0?: string | undefined;
+        connecting?: boolean | undefined;
+        getTypeAsString?: ((arg: any) => string) | undefined;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ObjectViewerProps = typeof __propDef.props;
+export type ObjectViewerEvents = typeof __propDef.events;
+export type ObjectViewerSlots = typeof __propDef.slots;
+export default class ObjectViewer extends SvelteComponent<ObjectViewerProps, ObjectViewerEvents, ObjectViewerSlots> {
+    get getTypeAsString(): (arg: any) => string;
+}
+export {};

package/package/components/propertyPicker/PropPicker.svelte

@@ -0,0 +1,370 @@
+<script>import { ResourceService, VariableService } from '../../gen';
+import { workspaceStore } from '../../stores';
+import { getContext } 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 alwaysOn = false;
+export let previousId = undefined;
+let variables = {};
+let resources = {};
+let displayVariable = false;
+let displayResources = false;
+let allResultsCollapsed = true;
+let collapsableInitialState;
+let filterActive = false;
+const EMPTY_STRING = '';
+let search = '';
+const { propPickerConfig, inputMatches } = getContext('PropPickerWrapper');
+const { pickablePropertiesFiltered } = getContext('PropPickerContext');
+$: $pickablePropertiesFiltered = pickableProperties;
+let flowInputsFiltered = pickableProperties.flow_input;
+let resultByIdFiltered = pickableProperties.priorIds;
+let timeout;
+function onSearch(search) {
+    filterActive = false;
+    clearTimeout(timeout);
+    setTimeout(() => {
+        flowInputsFiltered =
+            search === EMPTY_STRING
+                ? pickableProperties.flow_input
+                : keepByKey(pickableProperties.flow_input, search);
+        resultByIdFiltered =
+            search === EMPTY_STRING
+                ? pickableProperties.priorIds
+                : keepByKey(pickableProperties.priorIds, search);
+    }, 50);
+}
+$: suggestedPropsFiltered =
+    $propPickerConfig && $propPickerConfig.propName
+        ? keepByKey(pickableProperties.priorIds, $propPickerConfig.propName ?? '')
+        : undefined;
+$: search != undefined && onSearch(search);
+async function loadVariables() {
+    variables = Object.fromEntries((await VariableService.listVariable({
+        workspace: $workspaceStore ?? ''
+    })).map((variable) => [variable.path, variable.is_secret ? '***' : variable.value ?? '']));
+}
+async function loadResources() {
+    resources = Object.fromEntries((await ResourceService.listResource({
+        workspace: $workspaceStore ?? ''
+    })).map((resource) => [resource.path, resource.description ?? '']));
+}
+let filteringFlowInputsOrResult = '';
+async function filterPickableProperties() {
+    if (!$propPickerConfig || !filterActive) {
+        if (search === EMPTY_STRING) {
+            flowInputsFiltered = pickableProperties.flow_input;
+            resultByIdFiltered = pickableProperties.priorIds;
+        }
+        filteringFlowInputsOrResult = '';
+        return;
+    }
+    if (!$inputMatches?.some((match) => match.word === 'flow_input')) {
+        flowInputsFiltered = {};
+    }
+    if (!$inputMatches?.some((match) => match.word === 'results')) {
+        resultByIdFiltered = {};
+    }
+    if ($inputMatches?.length == 1) {
+        filteringFlowInputsOrResult = $inputMatches[0].value;
+        if ($inputMatches[0].word === 'flow_input') {
+            flowInputsFiltered = pickableProperties.flow_input;
+            let [, ...nestedKeys] = $inputMatches[0].value.split('.');
+            let filtered = filterNestedObject(flowInputsFiltered, nestedKeys);
+            if (Object.keys(filtered).length > 0) {
+                flowInputsFiltered = filtered;
+            }
+        }
+        else if ($inputMatches[0].word === 'results') {
+            resultByIdFiltered = pickableProperties.priorIds;
+            let [, ...nestedKeys] = $inputMatches[0].value.split('.');
+            let filtered = filterNestedObject(resultByIdFiltered, nestedKeys);
+            if (Object.keys(filtered).length > 0) {
+                resultByIdFiltered = filtered;
+            }
+        }
+    }
+    else {
+        filteringFlowInputsOrResult = '';
+    }
+    // if ($pickablePropertiesFiltered) {
+    // 	resultByIdFiltered && ($pickablePropertiesFiltered.priorIds = resultByIdFiltered)
+    // 	flowInputsFiltered && ($pickablePropertiesFiltered.flow_input = flowInputsFiltered)
+    // }
+}
+async function updateCollapsable() {
+    if (!$inputMatches || $inputMatches.length !== 1) {
+        resetCollapsable();
+        return;
+    }
+    if (!collapsableInitialState) {
+        collapsableInitialState = { allResultsCollapsed, displayVariable, displayResources };
+    }
+    if ($inputMatches[0].word === 'variable') {
+        await loadVariables();
+        displayVariable = true;
+        return;
+    }
+    if ($inputMatches[0].word === 'resource') {
+        await loadResources();
+        displayResources = true;
+        return;
+    }
+    if ($inputMatches[0].word === 'results') {
+        allResultsCollapsed = false;
+        return;
+    }
+}
+function resetCollapsable() {
+    if (!collapsableInitialState) {
+        return;
+    }
+    ;
+    ({ allResultsCollapsed, displayVariable, displayResources } = 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;
+    }
+}
+async function updateState() {
+    await updateFilterActive();
+    await filterPickableProperties();
+    await updateCollapsable();
+}
+$: search, $inputMatches, $propPickerConfig, pickableProperties, updateState();
+</script>
+
+<div class="flex flex-col h-full rounded">
+	<div class="px-1 py-1">
+		<ClearableInput bind:value={search} placeholder="Search prop..." />
+	</div>
+	<!-- <div
+	class="px-2 pt-2 grow relative"
+	class:bg-surface-secondary={!$propPickerConfig && !alwaysOn} -->
+	<Scrollable
+		scrollableClass="grow relative min-h-0 px-1 xl:px-2 py-1 shrink {!$propPickerConfig && !alwaysOn
+			? 'bg-surface-secondary'
+			: ''}"
+	>
+		<!-- <div
+			class="px-2 pt-2 grow relative"
+			class:bg-surface-secondary={!$propPickerConfig && !alwaysOn}
+		> -->
+		<!-- <pre class="text-2xs w-full"
+			>{JSON.stringify({ pickableProperties, resultByIdFiltered }, null, 2)}</pre
+		> -->
+		{#if filteringFlowInputsOrResult}
+			<div class="absolute bottom-0 right-0">
+				<Badge small>filter: {filteringFlowInputsOrResult}</Badge>
+			</div>
+		{/if}
+		{#if flowInputsFiltered && (Object.keys(flowInputsFiltered ?? {}).length > 0 || !filterActive)}
+			<div class="flex justify-between items-center space-x-1">
+				<span class="font-normal text-sm text-secondary"
+					><span class="font-mono">flow_input</span></span
+				>
+				<div class="flex space-x-2 items-center" />
+			</div>
+			<div class="overflow-y-auto pb-2">
+				<ObjectViewer
+					{allowCopy}
+					pureViewer={!$propPickerConfig}
+					json={flowInputsFiltered}
+					prefix="flow_input"
+					on:select
+				/>
+			</div>
+		{/if}
+		{#if error}
+			<span class="font-normal text-sm text-secondary">Error</span>
+			<div class="overflow-y-auto pb-2">
+				<ObjectViewer
+					{allowCopy}
+					pureViewer={!$propPickerConfig}
+					json={{
+						error: {
+							message: 'The error message',
+							name: 'The error name',
+							stack: 'The error stack',
+							step_id: 'The step id'
+						}
+					}}
+					on:select
+				/>
+			</div>
+			{#if Object.keys(pickableProperties.priorIds).length > 0}
+				{#if suggestedPropsFiltered && Object.keys(suggestedPropsFiltered).length > 0}
+					<span class="font-normal text-sm text-secondary">Suggested Results</span>
+					<div class="overflow-y-auto pb-2">
+						<ObjectViewer
+							{allowCopy}
+							pureViewer={!$propPickerConfig}
+							collapsed={false}
+							json={suggestedPropsFiltered}
+							prefix="results"
+							on:select
+						/>
+					</div>
+				{/if}
+				<span class="font-normal text-sm text-tertiary font-mono">results</span>
+				<div class="overflow-y-auto pb-2">
+					<ObjectViewer
+						expandedEvenOnLevel0={previousId}
+						{allowCopy}
+						pureViewer={!$propPickerConfig}
+						collapseLevel={allResultsCollapsed ? 1 : undefined}
+						json={resultByIdFiltered}
+						prefix="results"
+						on:select
+					/>
+				</div>
+			{/if}
+		{:else}
+			{#if pickableProperties.hasResume}
+				<span class="font-normal text-sm text-secondary">Resume payloads</span>
+				<div class="overflow-y-auto pb-2">
+					<ObjectViewer
+						{allowCopy}
+						pureViewer={!$propPickerConfig}
+						json={{
+							resume: 'The resume payload',
+							resumes: 'All resume payloads from all approvers',
+							approvers: 'The list of approvers'
+						}}
+						on:select
+					/>
+				</div>
+			{/if}
+			{#if Object.keys(pickableProperties.priorIds).length > 0}
+				{#if !filterActive && suggestedPropsFiltered && Object.keys(suggestedPropsFiltered).length > 0}
+					<span class="font-normal text-sm text-secondary">Suggested Results</span>
+					<div class="overflow-y-auto pb-2">
+						<ObjectViewer
+							{allowCopy}
+							pureViewer={!$propPickerConfig}
+							collapsed={false}
+							json={suggestedPropsFiltered}
+							prefix="results"
+							on:select
+						/>
+					</div>
+				{/if}
+				{#if Object.keys(resultByIdFiltered ?? {}).length > 0}
+					<div class="overflow-y-auto pb-2 pt-2">
+						<span class="font-normal text-sm text-tertiary font-mono">results</span>
+
+						<ObjectViewer
+							{allowCopy}
+							pureViewer={!$propPickerConfig}
+							collapseLevel={allResultsCollapsed ? 1 : undefined}
+							json={resultByIdFiltered}
+							expandedEvenOnLevel0={previousId}
+							prefix="results"
+							on:select
+						/>
+					</div>
+				{/if}
+			{/if}
+		{/if}
+
+		{#if displayContext}
+			{#if !filterActive || $inputMatches?.some((match) => match.word === 'variable')}
+				<div class="overflow-y-auto pb-2 pt-4">
+					<span class="font-normal text-xs text-secondary">Variables:</span>
+
+					{#if displayVariable}
+						<Button
+							color="light"
+							size="xs2"
+							variant="border"
+							on:click={() => {
+								displayVariable = false
+							}}
+							wrapperClasses="inline-flex whitespace-nowrap w-fit"
+							btnClasses="font-mono h-4 text-2xs font-thin px-1 rounded-[0.275rem]">-</Button
+						>
+						<ObjectViewer
+							{allowCopy}
+							pureViewer={!$propPickerConfig}
+							rawKey={true}
+							json={variables}
+							prefix="variable"
+							on:select
+						/>
+					{:else}
+						<Button
+							color="light"
+							size="xs2"
+							variant="border"
+							on:click={async () => {
+								await loadVariables()
+								displayVariable = true
+							}}
+							wrapperClasses="inline-flex w-fit"
+							btnClasses="font-normal text-2xs rounded-[0.275rem] h-4 px-1"
+						>
+							{'{...}'}
+						</Button>
+					{/if}
+				</div>
+			{/if}
+			{#if !filterActive || $inputMatches?.some((match) => match.word === 'resource')}
+				<div class="overflow-y-auto pb-2">
+					<span class="font-normal text-xs text-secondary">Resources:</span>
+
+					{#if displayResources}
+						<Button
+							color="light"
+							size="xs2"
+							variant="border"
+							on:click={() => {
+								displayResources = false
+							}}
+							wrapperClasses="inline-flex whitespace-nowrap w-fit"
+							btnClasses="font-mono h-4 text-2xs font-thin px-1 rounded-[0.275rem]">-</Button
+						>
+						<ObjectViewer
+							{allowCopy}
+							pureViewer={!$propPickerConfig}
+							rawKey={true}
+							json={resources}
+							prefix="resource"
+							on:select
+						/>
+					{:else}
+						<Button
+							color="light"
+							size="xs2"
+							variant="border"
+							on:click={async () => {
+								await loadResources()
+								displayResources = true
+							}}
+							wrapperClasses="inline-flex whitespace-nowrap w-fit"
+							btnClasses="font-normal text-2xs rounded-[0.275rem] h-4 px-1"
+						>
+							{'{...}'}
+						</Button>
+					{/if}
+				</div>
+			{/if}
+		{/if}
+		<!-- </div> -->
+	</Scrollable>
+</div>

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { PickableProperties } from '../flows/previousResults';
+declare const __propDef: {
+    props: {
+        pickableProperties: PickableProperties;
+        displayContext?: boolean | undefined;
+        error?: boolean | undefined;
+        allowCopy?: boolean | undefined;
+        alwaysOn?: boolean | undefined;
+        previousId?: string | undefined;
+    };
+    events: {
+        select: any;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PropPickerProps = typeof __propDef.props;
+export type PropPickerEvents = typeof __propDef.events;
+export type PropPickerSlots = typeof __propDef.slots;
+export default class PropPicker extends SvelteComponent<PropPickerProps, PropPickerEvents, PropPickerSlots> {
+}
+export {};