windmill-components 1.56.2 → 1.57.1

package/components/apps/utils.js

@@ -1,6 +1,6 @@
 import { FlowService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
-import { BarChart4, Binary, CircleDot, FormInput, Inspect, List, Monitor, PieChart, Play, Table2, Image, TextCursorInput, Type, Lock, Calendar, ToggleLeft } from 'lucide-svelte';
+import { BarChart4, Binary, CircleDot, FormInput, Inspect, List, Monitor, PieChart, Play, Table2, Image, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2 } from 'lucide-svelte';
 export async function loadSchema(workspace, path, runType) {
     if (runType === 'script') {
         const script = await ScriptService.getScriptByPath({
@@ -25,12 +25,14 @@ export async function loadSchema(workspace, path, runType) {
     }
 }
 export function schemaToInputsSpec(schema) {
+    if (schema?.properties == undefined) {
+        return {};
+    }
     return Object.keys(schema.properties).reduce((accu, key) => {
         const property = schema.properties[key];
         accu[key] = {
             type: 'static',
-            defaultValue: property.default,
-            value: undefined,
+            value: property.default,
             visible: property.format ? false : true,
             fieldType: property.type,
             format: property.format
@@ -56,13 +58,25 @@ export const displayData = {
         icon: FormInput
     },
     piechartcomponent: {
-        name: 'Pie chart',
+        name: 'Pie Chart',
         icon: PieChart
     },
     barchartcomponent: {
-        name: 'Bar chart',
+        name: 'Bar/Line Chart',
         icon: BarChart4
     },
+    htmlcomponent: {
+        name: 'Html',
+        icon: Code2
+    },
+    timeseriescomponent: {
+        name: 'Timeseries',
+        icon: GripHorizontal
+    },
+    scatterchartcomponent: {
+        name: 'Scatter Chart',
+        icon: GripHorizontal
+    },
     tablecomponent: {
         name: 'Table',
         icon: Table2
@@ -96,11 +110,11 @@ export const displayData = {
         icon: List
     },
     numberinputcomponent: {
-        name: 'Number input',
+        name: 'Number',
         icon: Binary
     },
     passwordinputcomponent: {
-        name: 'Password input',
+        name: 'Password',
         icon: Lock
     },
     dateinputcomponent: {
@@ -147,7 +161,7 @@ export function isScriptByNameDefined(appInput) {
         return false;
     }
     if (appInput.type === 'runnable' && appInput.runnable?.type == 'runnableByName') {
-        return Boolean(appInput.runnable?.name);
+        return appInput.runnable?.name != undefined;
     }
     return false;
 }
@@ -162,6 +176,8 @@ export function isScriptByPathDefined(appInput) {
 }
 export function clearResultAppInput(appInput) {
     appInput.runnable = undefined;
-    appInput.fields = {};
+    if (Object.keys(appInput.fields ?? {}).length > 0) {
+        appInput.fields = {};
+    }
     return appInput;
 }

package/components/common/button/Button.svelte

@@ -3,7 +3,7 @@ import { classNames } from '../../../utils';
 import Icon from 'svelte-awesome';
 import { ButtonType } from './model';
 import { goto } from '$app/navigation';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { Loader2 } from 'lucide-svelte';
 export let size = 'md';
 export let spacingSize = size;
 export let color = 'blue';
@@ -20,6 +20,7 @@ export let id = '';
 export let nonCaptureEvent = false;
 export let buttonType = 'button';
 export let loading = false;
+export let title = undefined;
 const dispatch = createEventDispatcher();
 // Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
 const colorVariants = {
@@ -50,15 +51,17 @@ const colorVariants = {
 };
 $: buttonProps = {
     id,
-    class: classNames(colorVariants[color][variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-2 font-semibold', 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? 'bg-gray-300' : ''),
+    class: classNames(colorVariants[color][variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-2 font-semibold', 'duration-200 rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? 'bg-gray-300' : ''),
     href,
     target,
     tabindex: disabled ? -1 : 0,
-    type: buttonType
+    type: buttonType,
+    title
 };
 async function onClick(event) {
     if (!nonCaptureEvent) {
         event.preventDefault();
+        event.stopPropagation();
         dispatch('click', event);
         if (href) {
             if (href.startsWith('http') || target == '_blank') {
@@ -80,6 +83,7 @@ $: endIconClass = classNames(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', e
 <svelte:element
 	this={href ? 'a' : 'button'}
 	bind:this={element}
+	on:pointerdown
 	on:click={onClick}
 	on:focus
 	on:blur
@@ -88,11 +92,7 @@ $: endIconClass = classNames(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', e
 	type="submit"
 >
 	{#if loading}
-		<Icon
-			data={faSpinner}
-			class={`animate-spin ${startIconClass}`}
-			scale={ButtonType.IconScale[size]}
-		/>
+		<Loader2 class="animate-spin mr-1" size={14} />
 	{:else if startIcon}
 		<Icon data={startIcon.icon} class={startIconClass} scale={ButtonType.IconScale[size]} />
 	{/if}

package/components/common/button/Button.svelte.d.ts

@@ -19,8 +19,10 @@ declare const __propDef: {
         nonCaptureEvent?: boolean | undefined;
         buttonType?: "reset" | "submit" | "button" | undefined;
         loading?: boolean | undefined;
+        title?: string | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
         focus: FocusEvent;
         blur: FocusEvent;
         click: CustomEvent<any>;

package/components/common/confirmationModal/ConfirmationModal.svelte

@@ -12,6 +12,7 @@ const dispatch = createEventDispatcher();
 function onKeyDown(event) {
     if (open) {
         event.stopPropagation();
+        event.preventDefault();
         switch (event.key) {
             case 'Enter':
                 dispatch('confirmed');

package/components/common/confirmationModal/UnsavedConfirmationModal.svelte

@@ -41,6 +41,9 @@ onDestroy(() => {
 	}}
 >
 	<div class="flex flex-col w-full space-y-4">
-		<span>Are you sure you want to discard change you have made?</span>
+		<span
+			>Are you sure you want to discard change you have made? (A draft has been temporarily and
+			locally saved)</span
+		>
 	</div>
 </ConfirmationModal>

package/components/common/popup/Popup.svelte

@@ -125,7 +125,7 @@ onDestroy(removeAllListeners);
 	aria-expanded={$stateMachine.currentState !== 'closed'}
 >
 	{#if $stateMachine.currentState !== 'closed'}
-		<div transition:slide={{ duration: 200 }} class={outerClasses}>
+		<div transition:slide|local={{ duration: 200 }} class={outerClasses}>
 			<div class={innerClasses}>
 				<slot />
 			</div>

package/components/common/table/AppRow.svelte

@@ -2,13 +2,16 @@
 import SharedBadge from '../../SharedBadge.svelte';
 import { AppService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
-import { faEdit, faEye, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faEdit, faEye, faFileExport, faPen, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { MoreVertical } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
 export let app;
 export let marked;
 export let starred;
+export let shareModal;
+export let moveDrawer;
 let { summary, path, extra_perms, canWrite, workspace_id } = app;
 const dispatch = createEventDispatcher();
 </script>
@@ -36,13 +39,14 @@ const dispatch = createEventDispatcher();
 							size="xs"
 							variant="border"
 							startIcon={{ icon: faEdit }}
-							href="/apps/edit/{path}"
+							href="/apps/edit/{path}?nodraft=true"
 						>
 							Edit
 						</Button>
 					</div>
 				{/if}
 			{/if}
+
 			<Button
 				href="/apps/get/{path}"
 				color="dark"
@@ -55,12 +59,33 @@ const dispatch = createEventDispatcher();
 		</span>
 		<Dropdown
 			placement="bottom-end"
+			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px]"
 			dropdownItems={[
 				{
-					displayName: 'View app',
+					displayName: 'View',
 					icon: faEye,
 					href: `/apps/get/${path}`
 				},
+				{
+					displayName: 'Edit',
+					icon: faPen,
+					href: `/apps/edit/${path}?nodraft=true`
+				},
+				{
+					displayName: 'Move/Rename',
+					icon: faFileExport,
+					action: () => {
+						moveDrawer.openDrawer(path, summary, 'app')
+					},
+					disabled: !canWrite
+				},
+				{
+					displayName: canWrite ? 'Share' : 'See Permissions',
+					icon: faShare,
+					action: () => {
+						shareModal.openDrawer && shareModal.openDrawer(path, 'app')
+					}
+				},
 				{
 					displayName: 'Delete',
 					icon: faTrashAlt,
@@ -72,6 +97,8 @@ const dispatch = createEventDispatcher();
 					disabled: !canWrite
 				}
 			]}
-		/>
+		>
+			<MoreVertical size={20} />
+		</Dropdown>
 	</svelte:fragment>
 </Row>

package/components/common/table/AppRow.svelte.d.ts

@@ -1,4 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
+import type MoveDrawer from '../../MoveDrawer.svelte';
+import type ShareModal from '../../ShareModal.svelte';
 import { type ListableApp } from '../../../gen';
 declare const __propDef: {
     props: {
@@ -7,6 +9,8 @@ declare const __propDef: {
         };
         marked: string | undefined;
         starred: boolean;
+        shareModal: ShareModal;
+        moveDrawer: MoveDrawer;
     };
     events: {
         change: CustomEvent<any>;

package/components/common/table/FlowRow.svelte

@@ -6,6 +6,7 @@ import { FlowService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
 import { sendUserToast } from '../../../utils';
 import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faFileExport, faList, faPlay, faShare } from '@fortawesome/free-solid-svg-icons';
+import { MoreVertical } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
@@ -53,7 +54,7 @@ let scheduleEditor;
 							size="xs"
 							variant="border"
 							startIcon={{ icon: faEdit }}
-							href="/flows/edit/{path}"
+							href="/flows/edit/{path}?nodraft=true"
 						>
 							Edit
 						</Button>
@@ -96,6 +97,7 @@ let scheduleEditor;
 
 		<Dropdown
 			placement="bottom-end"
+			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px]"
 			dropdownItems={[
 				{
 					displayName: 'View flow',
@@ -105,7 +107,7 @@ let scheduleEditor;
 				{
 					displayName: 'Edit',
 					icon: faEdit,
-					href: `/flows/edit/${path}`,
+					href: `/flows/edit/${path}?nodraft=true`,
 					disabled: !canWrite
 				},
 				{
@@ -119,10 +121,10 @@ let scheduleEditor;
 					href: `/runs/${path}`
 				},
 				{
-					displayName: 'Move',
+					displayName: 'Move/Rename',
 					icon: faFileExport,
 					action: () => {
-						moveDrawer.openDrawer(path, 'flow')
+						moveDrawer.openDrawer(path, summary, 'flow')
 					},
 					disabled: !canWrite
 				},
@@ -150,6 +152,8 @@ let scheduleEditor;
 					disabled: !canWrite
 				}
 			]}
-		/>
+		>
+			<MoreVertical size={20} />
+		</Dropdown>
 	</svelte:fragment>
 </Row>

package/components/common/table/Row.svelte

@@ -1,5 +1,4 @@
-<script>import { goto } from '$app/navigation';
-import Star from '../../Star.svelte';
+<script>import Star from '../../Star.svelte';
 import { createEventDispatcher } from 'svelte';
 import RowIcon from './RowIcon.svelte';
 export let marked;
@@ -18,10 +17,11 @@ const color = {
 }[kind];
 </script>
 
-<div class="hover:bg-gray-50 w-full inline-flex items-center p-4 gap-4 {color} rounded-md">
+<div class="hover:bg-gray-50 w-full inline-flex items-center p-4 gap-4 first-of-type:!border-t-0 
+first-of-type:rounded-t-md last-of-type:rounded-b-md {color}">
 	<RowIcon {href} {kind} />
 
-	<a {href} class="w-full min-w-0 grow hover:underline decoration-gray-400">
+	<a {href} class="min-w-0 grow hover:underline decoration-gray-400">
 		<div class="text-gray-900 flex-wrap text-left text-md font-semibold mb-1 truncate ">
 			{#if marked}
 				{@html marked}
@@ -33,15 +33,17 @@ const color = {
 			{path}
 		</div>
 	</a>
-	<div class="w-96 hidden lg:flex flex-row max-w-xs gap-1 items-start flex-wrap">
-		<slot name="badges" />
-	</div>
+	{#if $$slots.badges}
+		<div class="w-32 hidden lg:flex flex-row gap-1 items-start flex-wrap">
+			<slot name="badges" />
+		</div>
+	{/if}
 
 	<div class="flex gap-1 items-center justify-end">
 		<slot name="actions" />
 	</div>
 	{#if canFavorite}
-		<div class="text-left text-sm font-semibold text-gray-900">
+		<div class="center-center h-full text-sm font-semibold text-gray-900">
 			<Star
 				{kind}
 				{path}

package/components/common/table/ScriptRow.svelte

@@ -6,6 +6,7 @@ import { ScriptService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
 import { capitalize, sendUserToast } from '../../../utils';
 import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faFileExport, faList, faPlay, faShare } from '@fortawesome/free-solid-svg-icons';
+import { MoreVertical } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import Badge from '../badge/Badge.svelte';
 import Button from '../button/Button.svelte';
@@ -39,17 +40,15 @@ let scheduleEditor;
 	on:change
 >
 	<svelte:fragment slot="badges">
-		<span class="hidden md:block">
-			<SharedBadge {canWrite} extraPerms={extra_perms} />
-			{#if lock_error_logs}
-				<Badge color="red" baseClass="border border-red-200">Deployment failed</Badge>
-			{/if}
-			{#if kind !== 'script'}
-				<Badge color="gray" baseClass="border">{capitalize(kind)}</Badge>
-			{/if}
+		<SharedBadge {canWrite} extraPerms={extra_perms} />
+		{#if lock_error_logs}
+			<Badge color="red" baseClass="border border-red-200">Deployment failed</Badge>
+		{/if}
+		{#if kind !== 'script'}
+			<Badge color="gray" baseClass="border">{capitalize(kind)}</Badge>
+		{/if}
 
-			<LanguageBadge {language} />
-		</span>
+		<LanguageBadge {language} />
 	</svelte:fragment>
 
 	<svelte:fragment slot="actions">
@@ -104,6 +103,7 @@ let scheduleEditor;
 		</span>
 		<Dropdown
 			placement="bottom-end"
+			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px]"
 			dropdownItems={[
 				{
 					displayName: 'View script',
@@ -129,10 +129,10 @@ let scheduleEditor;
 					href: `/scripts/add?template=${path}`
 				},
 				{
-					displayName: 'Move',
+					displayName: 'Move/Rename',
 					icon: faFileExport,
 					action: () => {
-						moveDrawer.openDrawer(path, 'script')
+						moveDrawer.openDrawer(path, summary, 'script')
 					},
 					disabled: !canWrite
 				},
@@ -165,6 +165,8 @@ let scheduleEditor;
 					disabled: !canWrite
 				}
 			]}
-		/>
+		>
+			<MoreVertical size={20} />
+		</Dropdown>
 	</svelte:fragment>
 </Row>

package/components/common/tabs/Tabs.svelte

@@ -24,7 +24,7 @@ function updateSelected() {
 
 <div
 	class={classNames(
-		'border-b border-gray-200 flex flex-row whitespace-nowrap overflow-y-auto scrollbar-hidden',
+		'border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden',
 		$$props.class
 	)}
 >

package/components/common/toggleButton/ToggleButton.svelte

@@ -4,11 +4,13 @@ import Button from '../button/Button.svelte';
 export let value;
 export let position;
 export let light = false;
+export let title = undefined;
 const { select, selected } = getContext('ToggleButtonGroup');
 </script>
 
 <Button
 	{...$$props}
+	{title}
 	on:click={() => select(value)}
 	btnClasses={classNames(
 		'border-gray-200 focus:ring-0 w-full',

package/components/common/toggleButton/ToggleButton.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         value: any;
         position: 'left' | 'center' | 'right';
         light?: boolean | undefined;
+        title?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/flows/CreateActionsApp.svelte

@@ -0,0 +1,43 @@
+<script>import { goto } from '$app/navigation';
+import { faBarsStaggered, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { Button, ButtonPopup, ButtonPopupItem } from '../common';
+import Drawer from '../common/drawer/Drawer.svelte';
+import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import SimpleEditor from '../SimpleEditor.svelte';
+import { importStore } from '../apps/store';
+import { LayoutDashboard } from 'lucide-svelte';
+let drawer = undefined;
+let pendingJson;
+async function importJson() {
+    $importStore = JSON.parse(pendingJson);
+    await goto('/apps/add?nodraft=true');
+    drawer?.closeDrawer?.();
+}
+</script>
+
+<!-- Buttons -->
+<div class="flex flex-row gap-2">
+	<ButtonPopup
+		size="sm"
+		spacingSize="xl"
+		startIcon={{ icon: faPlus }}
+		href="/apps/add?nodraft=true"
+	>
+		<svelte:fragment slot="main"
+			>New App (alpha) <LayoutDashboard class="ml-1.5" size={18} />
+		</svelte:fragment>
+		<ButtonPopupItem on:click={() => drawer?.toggleDrawer?.()}>
+			Import from raw JSON
+		</ButtonPopupItem>
+	</ButtonPopup>
+</div>
+
+<!-- Raw JSON -->
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent title="Import app from JSON" on:close={() => drawer?.toggleDrawer?.()}>
+		<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" fixedOverflowWidgets={false} />
+		<svelte:fragment slot="actions">
+			<Button size="sm" on:click={importJson}>Import</Button>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>

package/components/flows/CreateActionsApp.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CreateActionsAppProps = typeof __propDef.props;
+export type CreateActionsAppEvents = typeof __propDef.events;
+export type CreateActionsAppSlots = typeof __propDef.slots;
+export default class CreateActionsApp extends SvelteComponentTyped<CreateActionsAppProps, CreateActionsAppEvents, CreateActionsAppSlots> {
+}
+export {};

package/components/flows/CreateActionsFlow.svelte

@@ -18,7 +18,12 @@ async function importJson() {
 
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
-	<ButtonPopup size="sm" spacingSize="xl" startIcon={{ icon: faPlus }} href="/flows/add">
+	<ButtonPopup
+		size="sm"
+		spacingSize="xl"
+		startIcon={{ icon: faPlus }}
+		href="/flows/add?nodraft=true"
+	>
 		<svelte:fragment slot="main"
 			>New Flow <Icon data={faBarsStaggered} scale={0.8} class="ml-1.5" />
 		</svelte:fragment>

package/components/flows/content/DynamicInputHelpBox.svelte

@@ -18,7 +18,7 @@ $: opened = false;
 
 {#if opened}
 	<div
-		transition:slide
+		transition:slide|local
 		class="bg-gray-100 border-l-4 border-gray-600 text-gray-700 p-4 m-4"
 		role="alert"
 		id="dynamic-input-help-box"

package/components/flows/content/FlowConstants.svelte

@@ -0,0 +1,82 @@
+<script>import { dfs, flowStore } from '../flowStore';
+import FlowCard from '../common/FlowCard.svelte';
+import { Alert, Badge } from '../../common';
+import SchemaForm from '../../SchemaForm.svelte';
+import { flowStateStore } from '../flowState';
+import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { slide } from 'svelte/transition';
+import Toggle from '../../Toggle.svelte';
+let hideOptional = false;
+$: steps = dfs($flowStore.value.modules, (x) => x)
+    .map((x) => [x.value, x])
+    .filter((x) => x[0].type == 'script' || x[0].type == 'rawscript')
+    .map(([v, m]) => [
+    v.input_transforms,
+    Object.entries(v.input_transforms)
+        .filter((x) => {
+        const shouldDisplay = hideOptional
+            ? $flowStateStore[m.id]?.schema.required?.includes(x[0])
+            : true;
+        return x[1].type == 'static' && shouldDisplay;
+    })
+        .map((x) => x[0]),
+    m
+])
+    .filter(([i, f, m]) => f.length > 0);
+setContext('PropPickerWrapper', {
+    focusProp: () => { },
+    propPickerConfig: writable(undefined),
+    clearFocus: () => { }
+});
+</script>
+
+<div class="min-h-full">
+	<FlowCard title="All Static Inputs">
+		<Toggle
+			slot="header"
+			bind:checked={hideOptional}
+			options={{left: 'Hide optional inputs'}}
+		/>
+		<div class="min-h-full flex-1">
+			<Alert type="info" title="Static Inputs" class="m-4"
+				>This page centralizes the static inputs of every steps. It is akin to a file containing all
+				constants. Modifying a value here modify it in the step input directly. It is especially
+				useful when forking a flow to get an overview of all the variables to parametrize that are
+				not exposed directly as flow inputs.</Alert
+			>
+			{#if steps.length == 0}
+				<div class="mt-2" />
+				{#if $flowStore.value.modules.length == 0}
+					<Alert type="warning" title="No steps" class="m-4">
+						This flow has no steps. Add a step to see its static inputs.
+					</Alert>
+				{:else}
+					<Alert type="warning" title="No static inputs" class="m-4">
+						This flow has no steps with static inputs. Add a step with static inputs to see them
+						here.
+					</Alert>
+				{/if}
+			{/if}
+			{#each steps as [args, filter, m] (m.id)}
+				{#if filter.length > 0}
+					<div transition:slide class="relative h-full border-t p-4">
+						<h2 class="sticky w-full top-0 z-10 inline-flex items-center bg-white py-2">
+							<span class="mr-4">{m.summary || m.value['path'] || 'Inline script'}</span>
+							<Badge large color="indigo">{m.id}</Badge>
+						</h2>
+
+						<SchemaForm
+							noDynamicToggle
+							inputTransform
+							{filter}
+							class="mt-2"
+							schema={$flowStateStore[m.id]?.schema ?? {}}
+							bind:args
+						/>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	</FlowCard>
+</div>

package/components/flows/content/FlowConstants.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowConstantsProps = typeof __propDef.props;
+export type FlowConstantsEvents = typeof __propDef.events;
+export type FlowConstantsSlots = typeof __propDef.slots;
+export default class FlowConstants extends SvelteComponentTyped<FlowConstantsProps, FlowConstantsEvents, FlowConstantsSlots> {
+}
+export {};