windmill-components 1.87.0 → 1.89.1

package/package/components/apps/editor/settingsPanel/ComponentPanel.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { GridItem } from '../../types';
+declare const __propDef: {
+    props: {
+        componentSettings?: {
+            item: GridItem;
+            parent: string | undefined;
+        } | undefined;
+        rowColumns?: boolean | undefined;
+        onDelete?: (() => void) | undefined;
+        noGrid?: boolean | undefined;
+        duplicateMoveAllowed?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentPanelProps = typeof __propDef.props;
+export type ComponentPanelEvents = typeof __propDef.events;
+export type ComponentPanelSlots = typeof __propDef.slots;
+export default class ComponentPanel extends SvelteComponentTyped<ComponentPanelProps, ComponentPanelEvents, ComponentPanelSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/GridPane.svelte

@@ -0,0 +1,73 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import { deleteGridItem } from '../appUtils';
+import PanelSection from './common/PanelSection.svelte';
+export let panes;
+export let component;
+const { app, runnableComponents } = getContext('AppViewerContext');
+function addTab() {
+    const numberOfPanes = panes.length;
+    panes = Array(panes.length + 1)
+        .fill(0)
+        .map((_) => Math.floor(100 / (panes.length + 1)));
+    if (!$app.subgrids) {
+        $app.subgrids = {};
+    }
+    $app.subgrids[`${component.id}-${numberOfPanes}`] = [];
+    component.numberOfSubgrids = panes.length;
+}
+function deleteSubgrid(index) {
+    let subgrid = `${component.id}-${index}`;
+    for (const item of $app.subgrids[subgrid]) {
+        const components = deleteGridItem($app, item.data, subgrid, false);
+        console.log(components);
+        for (const key in components) {
+            delete $runnableComponents[key];
+        }
+    }
+    $runnableComponents = $runnableComponents;
+    for (let i = index; i < panes.length - 1; i++) {
+        $app.subgrids[`${component.id}-${i}`] = $app.subgrids[`${component.id}-${i + 1}`];
+    }
+    panes.splice(index, 1);
+    panes = panes;
+    component.numberOfSubgrids = panes.length;
+    $app = $app;
+}
+</script>
+
+<PanelSection title={`panes ${panes.length > 0 ? `(${panes.length})` : ''}`}>
+	{#if panes.length == 0}
+		<span class="text-xs text-gray-500">No panes</span>
+	{/if}
+	<div class="w-full flex gap-2 flex-col mt-2">
+		{#each panes as value, index (index)}
+			<div class="w-full flex flex-row gap-2 items-center relative">
+				<input on:keydown|stopPropagation type="number" bind:value />
+
+				<div class="absolute top-1 right-1">
+					<Button
+						size="xs"
+						color="light"
+						variant="border"
+						on:click={() => {
+							deleteSubgrid(index)
+						}}
+						iconOnly
+						btnClasses="!text-red-500"
+						startIcon={{ icon: faTrashAlt }}
+					/>
+				</div>
+			</div>
+		{/each}
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faPlus }}
+			on:click={addTab}
+			iconOnly
+		/>
+	</div>
+</PanelSection>

package/package/components/apps/editor/settingsPanel/GridPane.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        panes: number[];
+        component: AppComponent;
+    };
+    events: {
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridPaneProps = typeof __propDef.props;
+export type GridPaneEvents = typeof __propDef.events;
+export type GridPaneSlots = typeof __propDef.slots;
+export default class GridPane extends SvelteComponentTyped<GridPaneProps, GridPaneEvents, GridPaneSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/GridTab.svelte

@@ -0,0 +1,151 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import CloseButton from '../../../common/CloseButton.svelte';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { getContext, tick } from 'svelte';
+import { deleteGridItem } from '../appUtils';
+import PanelSection from './common/PanelSection.svelte';
+import { dndzone } from 'svelte-dnd-action';
+import { generateRandomString } from '../../../../utils';
+import { GripVertical } from 'lucide-svelte';
+export let tabs;
+export let component;
+let items = tabs.map((tab, index) => {
+    return { value: tab, id: generateRandomString(), originalIndex: index };
+});
+const { app, runnableComponents, componentControl } = getContext('AppViewerContext');
+function addTab() {
+    const numberOfTabs = tabs.length;
+    tabs = [...tabs, `Tab ${numberOfTabs + 1}`];
+    if (!$app.subgrids) {
+        $app.subgrids = {};
+    }
+    $app.subgrids[`${component.id}-${numberOfTabs}`] = [];
+    component.numberOfSubgrids = tabs.length;
+    items = [
+        ...items,
+        {
+            value: tabs[tabs.length - 1],
+            id: generateRandomString(),
+            originalIndex: tabs.length - 1
+        }
+    ];
+}
+function deleteSubgrid(index) {
+    let subgrid = `${component.id}-${index}`;
+    for (const item of $app.subgrids[subgrid]) {
+        const components = deleteGridItem($app, item.data, subgrid, false);
+        for (const key in components) {
+            delete $runnableComponents[key];
+        }
+    }
+    $runnableComponents = $runnableComponents;
+    for (let i = index; i < tabs.length - 1; i++) {
+        $app.subgrids[`${component.id}-${i}`] = $app.subgrids[`${component.id}-${i + 1}`];
+    }
+    tabs.splice(index, 1);
+    tabs = tabs;
+    component.numberOfSubgrids = tabs.length;
+    $app = $app;
+    // Remove the corresponding item from the items array
+    items = items.filter((item) => item.originalIndex !== index);
+    // Update the originalIndex of the remaining items
+    items.forEach((item, i) => {
+        item.originalIndex = i;
+    });
+}
+function handleConsider(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+}
+function updateItemValue(index, e) {
+    const newValue = e.target.value;
+    items[index].value = newValue;
+    items = [...items];
+}
+function handleFinalize(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+    tabs = items.map((item) => item.value);
+    // if the originalIndex are not in order, we should swap the subgrids
+    if (items.some((item, index) => item.originalIndex !== index)) {
+        const newSubgrids = {};
+        for (let i = 0; i < tabs.length; i++) {
+            newSubgrids[`${component.id}-${i}`] =
+                $app.subgrids[`${component.id}-${items[i].originalIndex}`] ?? [];
+        }
+        // update originalIndex
+        items.forEach((item, i) => {
+            item.originalIndex = i;
+        });
+        $app.subgrids = {
+            ...$app.subgrids,
+            ...newSubgrids
+        };
+        $app = $app;
+        tick().then(() => {
+            const targetIndex = items.findIndex((i) => i.id === e.detail.info.id);
+            $componentControl[component.id]?.setTab?.(targetIndex);
+        });
+    }
+    dragDisabled = true;
+}
+let dragDisabled = true;
+function startDrag(event) {
+    event.preventDefault();
+    dragDisabled = false;
+}
+function handleKeyDown(event) {
+    if ((event.key === 'Enter' || event.key === ' ') && dragDisabled) {
+        dragDisabled = false;
+    }
+}
+</script>
+
+<PanelSection title={`Tabs ${tabs.length > 0 ? `(${tabs.length})` : ''}`}>
+	{#if tabs.length == 0}
+		<span class="text-xs text-gray-500">No Tabs</span>
+	{/if}
+	<div class="w-full flex gap-2 flex-col mt-2">
+		<section
+			use:dndzone={{
+				items,
+				flipDurationMs: 200,
+				dropTargetStyle: {}
+			}}
+			on:consider={handleConsider}
+			on:finalize={handleFinalize}
+		>
+			{#each items as item, index (item.id)}
+				<div class="w-full flex flex-row gap-2 items-center relative my-1">
+					<input
+						on:keydown|stopPropagation
+						on:input={(e) => updateItemValue(index, e)}
+						type="text"
+						bind:value={tabs[index]}
+					/>
+					<div class="absolute right-6">
+						<CloseButton noBg on:close={() => deleteSubgrid(index)} />
+					</div>
+					<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+					<div
+						tabindex={dragDisabled ? 0 : -1}
+						class="w-4 h-4"
+						on:mousedown={startDrag}
+						on:touchstart={startDrag}
+						on:keydown={handleKeyDown}
+					>
+						<GripVertical size={16} />
+					</div>
+				</div>
+			{/each}
+		</section>
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faPlus }}
+			on:click={addTab}
+			iconOnly
+		/>
+	</div>
+</PanelSection>

package/package/components/apps/editor/settingsPanel/GridTab.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        tabs: string[];
+        component: AppComponent;
+    };
+    events: {
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridTabProps = typeof __propDef.props;
+export type GridTabEvents = typeof __propDef.events;
+export type GridTabSlots = typeof __propDef.slots;
+export default class GridTab extends SvelteComponentTyped<GridTabProps, GridTabEvents, GridTabSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -0,0 +1,121 @@
+<script>import { addWhitespaceBeforeCapitals, capitalize, classNames } from '../../../../utils';
+import Tooltip from '../../../Tooltip.svelte';
+import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
+import EvalInputEditor from './inputEditor/EvalInputEditor.svelte';
+import RowInputEditor from './inputEditor/RowInputEditor.svelte';
+import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
+import UploadInputEditor from './inputEditor/UploadInputEditor.svelte';
+import { getContext } from 'svelte';
+import ToggleButtonGroup from '../../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../../../common/toggleButton-v2/ToggleButton.svelte';
+import { Pen, Plug2, Upload, User } from 'lucide-svelte';
+import { fieldTypeToTsType } from '../../utils';
+export let id;
+export let componentInput;
+export let key;
+export let hasRows = false;
+export let userInputEnabled = false;
+export let shouldCapitalize = true;
+export let resourceOnly = false;
+export let tooltip = undefined;
+export let onlyStatic = false;
+export let fieldType;
+export let subFieldType;
+export let format;
+export let selectOptions;
+export let fileUpload = undefined;
+export let placeholder;
+export let customTitle = undefined;
+export let displayType = false;
+const { connectingInput } = getContext('AppViewerContext');
+$: if (componentInput == undefined) {
+    //@ts-ignore
+    componentInput = {
+        type: 'static',
+        value: undefined
+    };
+}
+</script>
+
+{#if !(resourceOnly && (fieldType !== 'object' || !format?.startsWith('resource-')))}
+	<div
+		class={classNames(
+			'flex gap-1',
+			onlyStatic ? 'flex-row items-center justify-between' : 'flex-col'
+		)}
+	>
+		<div class="flex justify-between items-end">
+			<div class="flex flex-row gap-4 items-center">
+				<span class="text-xs font-semibold truncate text-gray-800">
+					{customTitle
+						? customTitle
+						: shouldCapitalize
+						? capitalize(addWhitespaceBeforeCapitals(key))
+						: key}
+					{#if tooltip}
+						<Tooltip>
+							{tooltip}
+						</Tooltip>
+					{/if}
+				</span>
+				{#if displayType}
+					<div class="text-xs text-gray-500">
+						{fieldType === 'array' && subFieldType
+							? `${fieldTypeToTsType(subFieldType)}[]`
+							: fieldTypeToTsType(fieldType)}
+					</div>
+				{/if}
+			</div>
+
+			<div class={classNames('flex gap-x-2 gap-y-1 flex-wrap justify-end items-center')}>
+				{#if !onlyStatic && componentInput?.type && componentInput.type != 'eval'}
+					<ToggleButtonGroup
+						class="h-7"
+						bind:selected={componentInput.type}
+						on:selected={(e) => {
+							if (e.detail == 'connected' && !componentInput['connection']) {
+								$connectingInput = {
+									opened: true,
+									input: undefined,
+									hoveredComponent: undefined
+								}
+							}
+						}}
+					>
+						<ToggleButton value="static" icon={Pen} iconOnly tooltip="Static" />
+						{#if userInputEnabled && !format?.startsWith('resource-')}
+							<ToggleButton value="user" icon={User} iconOnly tooltip="User Input" />
+						{/if}
+						{#if fileUpload}
+							<ToggleButton value="upload" icon={Upload} iconOnly tooltip="Upload" />
+						{/if}
+						<ToggleButton value="connected" icon={Plug2} iconOnly tooltip="Connect" />
+					</ToggleButtonGroup>
+				{/if}
+			</div>
+		</div>
+
+		{#if componentInput?.type === 'connected'}
+			<ConnectedInputEditor bind:componentInput />
+		{:else if componentInput?.type === 'row'}
+			<RowInputEditor bind:componentInput />
+		{:else if componentInput?.type === 'static'}
+			<div class={onlyStatic ? 'w-2/3 flex justify-end' : 'w-full'}>
+				<StaticInputEditor
+					{fieldType}
+					{subFieldType}
+					{selectOptions}
+					{format}
+					{placeholder}
+					bind:componentInput
+				/>
+			</div>
+		{:else if componentInput?.type === 'eval'}
+			<EvalInputEditor {hasRows} {id} bind:componentInput />
+		{:else if componentInput?.type === 'upload'}
+			<UploadInputEditor bind:componentInput {fileUpload} />
+		{:else if componentInput?.type === 'user'}
+			<span class="text-2xs italic text-gray-600">Field's value is set by the user</span>
+		{/if}
+	</div>
+{/if}

package/package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichConfiguration } from '../../types';
+import type { InputType, UploadAppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: RichConfiguration;
+        key: string;
+        hasRows?: boolean | undefined;
+        userInputEnabled?: boolean | undefined;
+        shouldCapitalize?: boolean | undefined;
+        resourceOnly?: boolean | undefined;
+        tooltip?: string | undefined;
+        onlyStatic?: boolean | undefined;
+        fieldType: InputType;
+        subFieldType: InputType | undefined;
+        format: string | undefined;
+        selectOptions: string[] | undefined;
+        fileUpload?: UploadAppInput['fileUpload'] | undefined;
+        placeholder: string | undefined;
+        customTitle?: string | undefined;
+        displayType?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputsSpecEditorProps = typeof __propDef.props;
+export type InputsSpecEditorEvents = typeof __propDef.events;
+export type InputsSpecEditorSlots = typeof __propDef.slots;
+export default class InputsSpecEditor extends SvelteComponentTyped<InputsSpecEditorProps, InputsSpecEditorEvents, InputsSpecEditorSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -0,0 +1,54 @@
+<script>import InputsSpecEditor from './InputsSpecEditor.svelte';
+import OneOfInputSpecsEditor from './OneOfInputSpecsEditor.svelte';
+export let id;
+export let inputSpecs;
+export let inputSpecsConfiguration = inputSpecs;
+export let userInputEnabled = false;
+export let shouldCapitalize = true;
+export let rowColumns = false;
+export let resourceOnly = false;
+export let displayType = false;
+</script>
+
+{#if inputSpecs}
+	<div class="w-full flex flex-col gap-4">
+		{#each Object.keys(inputSpecsConfiguration) as k}
+			{#if inputSpecsConfiguration[k]?.type == 'oneOf'}
+				<OneOfInputSpecsEditor
+					key={k}
+					bind:oneOf={inputSpecs[k]}
+					{id}
+					{shouldCapitalize}
+					{resourceOnly}
+					{rowColumns}
+					inputSpecsConfiguration={inputSpecsConfiguration?.[k]?.['configuration']}
+					labels={inputSpecsConfiguration?.[k]?.['labels']}
+					tooltip={inputSpecsConfiguration?.[k]?.['tooltip']}
+				/>
+			{:else}
+				{@const meta = inputSpecsConfiguration?.[k]}
+				<InputsSpecEditor
+					key={k}
+					bind:componentInput={inputSpecs[k]}
+					{id}
+					{userInputEnabled}
+					{shouldCapitalize}
+					{resourceOnly}
+					hasRows={rowColumns}
+					fieldType={meta?.['fieldType']}
+					subFieldType={meta?.['subFieldType']}
+					format={meta?.['format']}
+					selectOptions={meta?.['selectOptions']}
+					tooltip={meta?.['tooltip']}
+					onlyStatic={meta?.['onlyStatic']}
+					fileUpload={meta?.['fileUpload']}
+					placeholder={meta?.['placeholder']}
+					customTitle={meta?.['customTitle']}
+					{displayType}
+				/>
+			{/if}
+		{/each}
+	</div>
+{:else}
+	<div class="text-gray-500 text-sm">No inputs</div>
+{/if}

package/package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        inputSpecs: RichConfigurations;
+        inputSpecsConfiguration?: RichConfigurations | undefined;
+        userInputEnabled?: boolean | undefined;
+        shouldCapitalize?: boolean | undefined;
+        rowColumns?: boolean | undefined;
+        resourceOnly?: boolean | undefined;
+        displayType?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputsSpecsEditorProps = typeof __propDef.props;
+export type InputsSpecsEditorEvents = typeof __propDef.events;
+export type InputsSpecsEditorSlots = typeof __propDef.slots;
+export default class InputsSpecsEditor extends SvelteComponentTyped<InputsSpecsEditorProps, InputsSpecsEditorEvents, InputsSpecsEditorSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte

@@ -0,0 +1,73 @@
+<script>import Tooltip from '../../../Tooltip.svelte';
+import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
+import InputsSpecEditor from './InputsSpecEditor.svelte';
+export let key;
+export let oneOf;
+export let inputSpecsConfiguration;
+export let labels;
+export let shouldCapitalize;
+export let id;
+export let resourceOnly;
+export let rowColumns;
+export let tooltip;
+$: {
+    if (oneOf == undefined) {
+        oneOf = { configuration: {}, selected: '' };
+    }
+    if (oneOf.configuration == undefined) {
+        oneOf.configuration = {};
+    }
+    if (oneOf.selected == undefined) {
+        oneOf.selected = '';
+    }
+    if (oneOf?.configuration[oneOf?.selected] == undefined) {
+        oneOf.configuration[oneOf.selected] = {};
+    }
+}
+</script>
+
+<div class="p-2 border">
+	<div class="mb-2 text-sm font-semibold">
+		{capitalize(addWhitespaceBeforeCapitals(key))}&nbsp;
+		{#if tooltip}
+			<Tooltip>{tooltip}</Tooltip>
+		{/if}
+	</div>
+	<select
+		class="w-full border border-gray-300 rounded-md p-2"
+		value={oneOf.selected}
+		on:change={(e) => {
+			oneOf = { ...oneOf, selected: e?.target?.['value'] }
+		}}
+	>
+		{#each Object.keys(inputSpecsConfiguration ?? {}) as choice}
+			<option value={choice}>{labels?.[choice] ?? choice}</option>
+		{/each}
+	</select>
+	{#if oneOf.selected !== 'none'}
+		<div class="mb-4" />
+	{/if}
+	<div class="flex flex-col gap-4">
+		{#each Object.keys(inputSpecsConfiguration?.[oneOf.selected] ?? {}) as nestedKey}
+			{@const config = inputSpecsConfiguration?.[oneOf.selected]?.[nestedKey]}
+			{#if config && oneOf.configuration[oneOf.selected]}
+				<InputsSpecEditor
+					key={nestedKey}
+					bind:componentInput={oneOf.configuration[oneOf.selected][nestedKey]}
+					{id}
+					userInputEnabled={false}
+					{shouldCapitalize}
+					{resourceOnly}
+					hasRows={rowColumns}
+					fieldType={config?.['fieldType']}
+					subFieldType={config?.['subFieldType']}
+					format={config?.['format']}
+					selectOptions={config?.['selectOptions']}
+					placeholder={config?.['placeholder']}
+					onlyStatic={config?.['onlyStatic']}
+					customTitle={config?.['customTitle']}
+				/>
+			{/if}
+		{/each}
+	</div>
+</div>

package/package/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichConfiguration } from '../../types';
+declare const __propDef: {
+    props: {
+        key: string;
+        oneOf: {
+            selected: string;
+            configuration: RichConfiguration;
+        } | any;
+        inputSpecsConfiguration: RichConfiguration | any;
+        labels: Record<string, string> | undefined;
+        shouldCapitalize: boolean;
+        id: string;
+        resourceOnly: boolean;
+        rowColumns: boolean;
+        tooltip: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type OneOfInputSpecsEditorProps = typeof __propDef.props;
+export type OneOfInputSpecsEditorEvents = typeof __propDef.events;
+export type OneOfInputSpecsEditorSlots = typeof __propDef.slots;
+export default class OneOfInputSpecsEditor extends SvelteComponentTyped<OneOfInputSpecsEditorProps, OneOfInputSpecsEditorEvents, OneOfInputSpecsEditorSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/PickFlow.svelte

@@ -0,0 +1,38 @@
+<script>import ItemPicker from '../../../ItemPicker.svelte';
+import { FlowService } from '../../../../gen';
+import { workspaceStore } from '../../../../stores';
+import { createEventDispatcher } from 'svelte';
+import Button from '../../../common/button/Button.svelte';
+import { Icon } from 'svelte-awesome';
+import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+let itemPicker;
+const dispatch = createEventDispatcher();
+async function loadItems() {
+    return await FlowService.listFlows({ workspace: $workspaceStore });
+}
+</script>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, summary) => {
+		dispatch('pick', { path, summary })
+	}}
+	itemName="Flow"
+	extraField="summary"
+	{loadItems}
+/>
+
+<Button
+	on:click={() => itemPicker.openDrawer()}
+	btnClasses="w-24 truncate"
+	size="sm"
+	spacingSize="md"
+	variant="border"
+	color="light"
+>
+	<div class="flex justify-center flex-col items-center gap-2">
+		<Icon data={faBarsStaggered} scale={0.8} class="mr-1" />
+
+		<span class="text-xs">Flow</span>
+	</div>
+</Button>

package/package/components/apps/editor/settingsPanel/PickFlow.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PickFlowProps = typeof __propDef.props;
+export type PickFlowEvents = typeof __propDef.events;
+export type PickFlowSlots = typeof __propDef.slots;
+export default class PickFlow extends SvelteComponentTyped<PickFlowProps, PickFlowEvents, PickFlowSlots> {
+}
+export {};