windmill-components 1.56.5 → 1.57.2

package/components/apps/store.d.ts

@@ -0,0 +1,2 @@
+import type { App } from './types';
+export declare const importStore: import("svelte/store").Writable<App | undefined>;

package/components/apps/store.js

@@ -0,0 +1,2 @@
+import { writable } from "svelte/store";
+export const importStore = writable(undefined);

package/components/apps/types.d.ts

@@ -12,6 +12,8 @@ export type TextInputComponent = BaseComponent<'textinputcomponent'>;
 export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>;
 export type DateInputComponent = BaseComponent<'dateinputcomponent'>;
 export type NumberInputComponent = BaseComponent<'numberinputcomponent'>;
+export type HtmlComponent = BaseComponent<'htmlcomponent'>;
+export type TimeseriesComponent = BaseComponent<'timeseriescomponent'>;
 export type ButtonComponent = BaseComponent<'buttoncomponent'> & {
     recomputeIds: string[] | undefined;
 };
@@ -21,6 +23,7 @@ export type FormComponent = BaseComponent<'formcomponent'> & {
 export type RunFormComponent = BaseComponent<'runformcomponent'>;
 export type BarChartComponent = BaseComponent<'barchartcomponent'>;
 export type PieChartComponent = BaseComponent<'piechartcomponent'>;
+export type ScatterChartComponent = BaseComponent<'scatterchartcomponent'>;
 export type TableComponent = BaseComponent<'tablecomponent'> & {
     actionButtons: (BaseAppComponent & ButtonComponent)[];
 };
@@ -39,7 +42,9 @@ export type Aligned = {
 export interface BaseAppComponent extends Partial<Aligned> {
     id: ComponentID;
     componentInput: AppInput | undefined;
-    configuration: Record<string, StaticAppInput | ConnectedAppInput | UserAppInput>;
+    configuration: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput) & {
+        onlyStatic?: boolean;
+    }>;
     card: boolean | undefined;
     /**
      * If `true` then the wrapper will allow items to flow outside of it's borders.
@@ -48,7 +53,7 @@ export interface BaseAppComponent extends Partial<Aligned> {
      */
     softWrap?: boolean;
 }
-export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | BarChartComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent);
+export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent);
 export type ComponentSet = {
     title: string;
     components: AppComponent[];
@@ -70,7 +75,7 @@ export type InlineScript = {
 };
 export type App = {
     grid: GridItem[];
-    title: string;
+    fullscreen: boolean;
     unusedInlineScripts: Array<{
         name: string;
         inlineScript: InlineScript;
@@ -80,18 +85,29 @@ export type ConnectingInput = {
     opened: boolean;
     input?: ConnectedInput;
     sourceName?: string;
+    hoveredComponent: string | undefined;
 };
 export type AppEditorContext = {
     worldStore: Writable<World | undefined>;
     staticOutputs: Writable<Record<string, string[]>>;
     lazyGrid: Writable<GridItem[]>;
     app: Writable<App>;
+    summary: Writable<string>;
     selectedComponent: Writable<string | undefined>;
     mode: Writable<EditorMode>;
     connectingInput: Writable<ConnectingInput>;
     breakpoint: Writable<EditorBreakpoint>;
     runnableComponents: Writable<Record<string, () => Promise<void>>>;
+    staticExporter: Writable<Record<string, () => any>>;
     appPath: string;
+    workspace: string;
+    onchange: (() => void) | undefined;
+    isEditor: boolean;
+    jobs: Writable<{
+        job: string;
+        component: string;
+    }[]>;
+    noBackend: boolean;
 };
 export type EditorMode = 'dnd' | 'preview';
 export type EditorBreakpoint = 'sm' | 'lg';

package/components/apps/utils.d.ts

@@ -1,8 +1,8 @@
 import type { Schema } from '../../common';
-import type { AppInput, AppInputs, InputType, ResultAppInput } from './inputType';
+import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
 import type { AppComponent } from './types';
 export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<Schema>;
-export declare function schemaToInputsSpec(schema: Schema): AppInputs;
+export declare function schemaToInputsSpec(schema: Schema): Record<string, StaticAppInput>;
 export declare const displayData: Record<AppComponent['type'], {
     name: string;
     icon: any;

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: {
@@ -162,7 +176,7 @@ export function isScriptByPathDefined(appInput) {
 }
 export function clearResultAppInput(appInput) {
     appInput.runnable = undefined;
-    if (Object.keys(appInput.fields).length > 0) {
+    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,11 +51,12 @@ const colorVariants = {
 };
 $: buttonProps = {
     id,
-    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 truncate', 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) {
@@ -90,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,6 +19,7 @@ declare const __propDef: {
         nonCaptureEvent?: boolean | undefined;
         buttonType?: "reset" | "submit" | "button" | undefined;
         loading?: boolean | undefined;
+        title?: string | undefined;
     };
     events: {
         pointerdown: PointerEvent;

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,7 +2,7 @@
 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';
@@ -10,6 +10,8 @@ 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>
@@ -37,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"
@@ -59,10 +62,30 @@ const dispatch = createEventDispatcher();
 			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,

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

@@ -54,7 +54,7 @@ let scheduleEditor;
 							size="xs"
 							variant="border"
 							startIcon={{ icon: faEdit }}
-							href="/flows/edit/{path}"
+							href="/flows/edit/{path}?nodraft=true"
 						>
 							Edit
 						</Button>
@@ -107,7 +107,7 @@ let scheduleEditor;
 				{
 					displayName: 'Edit',
 					icon: faEdit,
-					href: `/flows/edit/${path}`,
+					href: `/flows/edit/${path}?nodraft=true`,
 					disabled: !canWrite
 				},
 				{
@@ -121,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
 				},

package/components/common/table/RowIcon.svelte

@@ -1,6 +1,6 @@
 <script>import { classNames } from '../../../utils';
 import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
-import { Code2, LayoutDashboard, Wind } from 'lucide-svelte';
+import { Code2, LayoutDashboard } from 'lucide-svelte';
 import Icon from 'svelte-awesome';
 export let kind;
 export let href = '#';

package/components/common/table/ScriptRow.svelte

@@ -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
 				},

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/common/toggleButton/ToggleButtonGroup.svelte

@@ -4,13 +4,13 @@
 <script>import { createEventDispatcher, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 export let selected;
-const dispatch = createEventDispatcher();
 export let col = false;
-$: setSelected(selected);
+const dispatch = createEventDispatcher();
+const selectedContent = writable(selected);
 function setSelected(selected) {
     selectedContent.set(selected);
 }
-const selectedContent = writable(selected);
+$: setSelected(selected);
 $: $selectedContent && dispatch('selected', $selectedContent);
 setContext('ToggleButtonGroup', {
     selected: selectedContent,

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

@@ -5,13 +5,21 @@ 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) => x[1].type == 'static')
+        .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
 ])
@@ -23,10 +31,15 @@ setContext('PropPickerWrapper', {
 });
 </script>
 
-<div class="h-full overflow-hidden">
+<div class="min-h-full">
 	<FlowCard title="All Static Inputs">
-		<div class="h-full flex-1">
-			<Alert type="info" title="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
@@ -35,11 +48,11 @@ setContext('PropPickerWrapper', {
 			{#if steps.length == 0}
 				<div class="mt-2" />
 				{#if $flowStore.value.modules.length == 0}
-					<Alert type="warning" title="No steps">
+					<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">
+					<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>
@@ -47,9 +60,9 @@ setContext('PropPickerWrapper', {
 			{/if}
 			{#each steps as [args, filter, m] (m.id)}
 				{#if filter.length > 0}
-					<div class="box">
-						<h2 class="pb-4 inline-flex items-center"
-							><span class="mr-4">{m.summary || m.value['path'] || 'Inline script'}</span>
+					<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>
 
@@ -57,6 +70,7 @@ setContext('PropPickerWrapper', {
 							noDynamicToggle
 							inputTransform
 							{filter}
+							class="mt-2"
 							schema={$flowStateStore[m.id]?.schema ?? {}}
 							bind:args
 						/>

package/components/flows/content/FlowInputs.svelte

@@ -62,7 +62,7 @@ let filter = '';
 		>
 	{/if}
 	<h3 class="pb-2 pt-4">
-		Inline new <span class="text-blue-500">{kind == 'script' ? 'common' : kind}</span> script
+		Inline new <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script
 		<Tooltip>
 			Embed a script directly inside a flow instead of saving the script into your workspace for
 			reuse. You can always save an inline script to your workspace later.
@@ -141,7 +141,7 @@ let filter = '';
 	</div>
 
 	<h3 class="mb-2 mt-6"
-		>Use pre-made <span class="text-blue-500">{kind == 'script' ? 'common' : kind}</span> script</h3
+		>Use pre-made <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script</h3
 	>
 	{#if pick_existing == 'hub'}
 		<PickHubScript bind:filter {kind} on:pick>

package/components/flows/content/FlowModuleHeader.svelte

@@ -1,19 +1,17 @@
 <script>import Button from '../../common/button/Button.svelte';
-import { classNames } from '../../../utils';
-import { faBed, faCodeBranch, faSave, faStop } from '@fortawesome/free-solid-svg-icons';
+import { faCodeBranch, faSave } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
-import Icon from 'svelte-awesome';
 import { Bed, PhoneIncoming, Repeat, Square } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
 export let module;
 const dispatch = createEventDispatcher();
-let width = 0;
 $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 </script>
 
-<div class="flex flex-row space-x-2" bind:clientWidth={width}>
+<div class="flex flex-row space-x-2">
 	{#if module.value.type === 'script' || module.value.type === 'rawscript'}
 		<Popover
+			placement="bottom"
 			class="center-center rounded border p-2 
 			{moduleRetry
 				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
@@ -24,6 +22,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 			<svelte:fragment slot="text">Retries</svelte:fragment>
 		</Popover>
 		<Popover
+			placement="bottom"
 			class="center-center rounded border p-2
 			{module.stop_after_if
 				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
@@ -34,6 +33,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 			<svelte:fragment slot="text">Early stop/break</svelte:fragment>
 		</Popover>
 		<Popover
+			placement="bottom"
 			class="center-center rounded border p-2 
 			{module.suspend
 				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
@@ -44,6 +44,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 			<svelte:fragment slot="text">Suspend</svelte:fragment>
 		</Popover>
 		<Popover
+			placement="bottom"
 			class="center-center rounded border p-2
 			{module.sleep
 				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'