windmill-components 1.89.1 → 1.103.1

package/package/components/flows/content/FlowInputs.svelte

@@ -7,6 +7,8 @@ import { createEventDispatcher } from 'svelte';
 import FlowScriptPicker from '../pickers/FlowScriptPicker.svelte';
 import PickHubScript from '../pickers/PickHubScript.svelte';
 import WorkspaceScriptPicker from '../pickers/WorkspaceScriptPicker.svelte';
+import { isCloudHosted } from '../../../cloud';
+import { sendUserToast } from '../../../toast';
 export let failureModule;
 export let shouldDisableTriggerScripts = false;
 export let summary = undefined;
@@ -44,19 +46,22 @@ let filter = '';
 								size="sm"
 								startIcon={{ icon: faBolt }}
 							>
-								Trigger &nbsp;<Tooltip>
+								Trigger &nbsp;<Tooltip
+									documentationLink="https://docs.windmill.dev/docs/flows/flow_trigger"
+								>
 									Used as a first step most commonly with a state and a schedule to watch for
-									changes on an external system, compute the diff since last time, set the new
+									changes on an external system, compute the diff since last time and set the new
 									state. The diffs are then treated one by one with a for-loop.
 								</Tooltip>
 							</ToggleButton>
 						{/if}
 						<ToggleButton position="right" value="approval" size="sm" startIcon={{ icon: faCheck }}>
-							Approval &nbsp;<Tooltip>
+							Approval &nbsp;<Tooltip
+								documentationLink="https://docs.windmill.dev/docs/flows/flow_approval"
+							>
 								An approval step will suspend the execution of a flow until it has been approved
 								through the resume endpoints or the approval page by and solely by the recipients of
-								those secret urls. Use `wmill.getResumeUrls()` in Typescript or
-								`wmill.get_resume_urls()` in Python from the wmill client to generate those URLs.
+								those secret urls.
 							</Tooltip>
 						</ToggleButton>
 					</ToggleButtonGroup>
@@ -72,7 +77,7 @@ let filter = '';
 		{/if}
 		<h3 class="pb-2 pt-4">
 			Inline new <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script
-			<Tooltip>
+			<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/flow_error_handler">
 				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.
 			</Tooltip>
@@ -137,6 +142,28 @@ let filter = '';
 							on:click={() =>
 								dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
 						/>
+						<FlowScriptPicker
+							label={`Docker`}
+							lang="docker"
+							on:click={() => {
+								if (isCloudHosted() || true) {
+									sendUserToast(
+										'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
+										true,
+										[
+											{
+												label: 'Learn more',
+												callback: () => {
+													window.open('https://docs.windmill.dev/docs/advanced/docker', '_blank')
+												}
+											}
+										]
+									)
+									return
+								}
+								dispatch('new', { language: RawScript.language.BASH, kind, subkind: 'docker' })
+							}}
+						/>
 
 						<!-- <FlowScriptPicker
 							label={`MySQL`}

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -8,7 +8,7 @@ import { createScriptFromInlineScript, fork } from '../flowStateUtils';
 import { RawScript } from '../../../gen';
 import FlowCard from '../common/FlowCard.svelte';
 import FlowModuleHeader from './FlowModuleHeader.svelte';
-import { getLatestHashForScript, schemaToObject, scriptLangToEditorLang } from '../../../utils';
+import { getLatestHashForScript, scriptLangToEditorLang } from '../../../scripts';
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import { afterUpdate, getContext } from 'svelte';
 import { loadSchemaFromModule } from '../utils';
@@ -23,7 +23,8 @@ import Alert from '../../common/alert/Alert.svelte';
 import FlowModuleSleep from './FlowModuleSleep.svelte';
 import FlowPathViewer from './FlowPathViewer.svelte';
 import InputTransformSchemaForm from '../../InputTransformSchemaForm.svelte';
-const { selectedId, previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
+import { schemaToObject } from '../../../schema';
+const { selectedId, previewArgs, flowStateStore, flowStore, saveDraft } = getContext('FlowEditorContext');
 export let flowModule;
 export let failureModule = false;
 export let parentModule = undefined;
@@ -32,7 +33,14 @@ let value = flowModule.value;
 $: value = flowModule.value;
 let editor;
 let modulePreview;
-let websocketAlive = { pyright: false, black: false, deno: false, go: false };
+let websocketAlive = {
+    pyright: false,
+    black: false,
+    deno: false,
+    go: false,
+    ruff: false,
+    shellcheck: false
+};
 let selected = 'inputs';
 let advancedSelected = 'retries';
 let wrapper;
@@ -170,11 +178,13 @@ let forceReload = 0;
 								automaticLayout={true}
 								cmdEnterAction={async () => {
 									selected = 'test'
-									if (value.type === 'rawscript') {
-										value.content = editor.getCode()
+									if ($selectedId == flowModule.id) {
+										if (value.type === 'rawscript') {
+											value.content = editor.getCode()
+										}
+										await reload(flowModule)
+										modulePreview?.runTestWithStepArgs()
 									}
-									await reload(flowModule)
-									modulePreview?.runTestWithStepArgs()
 								}}
 								on:change={async (event) => {
 									if (flowModule.value.type === 'rawscript') {
@@ -182,7 +192,10 @@ let forceReload = 0;
 									}
 									await reload(flowModule)
 								}}
-								formatAction={() => reload(flowModule)}
+								formatAction={() => {
+									reload(flowModule)
+									saveDraft()
+								}}
 								fixedOverflowWidgets={true}
 							/>
 						{:else if value.type === 'script'}
@@ -216,6 +229,7 @@ let forceReload = 0;
 								</div>
 							{:else if selected === 'test'}
 								<ModulePreview
+									pickableProperties={stepPropPicker.pickableProperties}
 									bind:this={modulePreview}
 									mod={flowModule}
 									schema={$flowStateStore[$selectedId]?.schema ?? {}}

package/package/components/flows/content/FlowModuleEarlyStop.svelte

@@ -2,8 +2,8 @@
 import Toggle from '../../Toggle.svelte';
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import Tooltip from '../../Tooltip.svelte';
-import { NEVER_TESTED_THIS_FAR } from '../utils';
 import { getContext } from 'svelte';
+import { NEVER_TESTED_THIS_FAR } from '../models';
 const { flowStateStore } = getContext('FlowEditorContext');
 export let flowModule;
 let editor = undefined;
@@ -14,11 +14,9 @@ $: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_F
 <div class="flex flex-col items-start space-y-2 {$$props.class}">
 	<h2>
 		Early stop/Break
-		<Tooltip>
+		<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/early_stop">
 			If defined, at the end of the step, the predicate expression will be evaluated to decide if
-			the flow should stop early. Skipped flows are just a label useful to not see them in the runs
-			page. If stop early is run within a forloop, it will just break the for-loop and have it stop
-			at that iteration instead of stopping the whole flow.
+			the flow should stop early.
 		</Tooltip>
 	</h2>
 	<Toggle

package/package/components/flows/content/FlowModuleHeader.svelte

@@ -4,8 +4,9 @@ import { faCodeBranch, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher, getContext } from 'svelte';
 import { Bed, PhoneIncoming, Repeat, Square } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
-import { getLatestHashForScript, sendUserToast } from '../../../utils';
+import { sendUserToast } from '../../../utils';
 import { workerTags } from '../../../stores';
+import { getLatestHashForScript } from '../../../scripts';
 export let module;
 const { scriptEditorDrawer } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();

package/package/components/flows/content/FlowModuleScript.svelte

@@ -1,7 +1,7 @@
 <script>import HighlightCode from '../../HighlightCode.svelte';
 import { ScriptService } from '../../../gen';
+import { getScriptByPath } from '../../../scripts';
 import { workspaceStore } from '../../../stores';
-import { getScriptByPath } from '../../../utils';
 export let path;
 export let hash = undefined;
 let code;

package/package/components/flows/content/FlowModuleSleep.svelte

@@ -19,10 +19,9 @@ $: isSleepEnabled = Boolean(flowModule.sleep);
 
 <h2>
 	Sleep
-	<Tooltip>
+	<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/sleep">
 		If defined, at the end of the step, the flow will sleep for a number of seconds before
-		scheduling the next job (if any, no effect if the step is the last one). Sleeping is passive and
-		does not consume any resources.
+		scheduling the next job (if any, no effect if the step is the last one).
 	</Tooltip>
 </h2>
 <Toggle

package/package/components/flows/content/FlowModuleSuspend.svelte

@@ -13,11 +13,10 @@ $: isSuspendEnabled = Boolean(flowModule.suspend);
 
 <h2>
 	Suspend
-	<Tooltip>
+	<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/flow_approval">
 		If defined, at the end of the step, the flow will be suspended until it receives external
 		requests to be resumed or canceled. This is most useful to implement approval steps but can be
-		used flexibly for other purpose. To get the resume urls, use `wmill.getResumeUrls()` in
-		Typescript, or `wmill.get_resume_urls()` in Python.
+		used flexibly for other purpose.
 	</Tooltip>
 </h2>
 <Toggle

package/package/components/flows/content/FlowModuleWrapper.svelte

@@ -28,9 +28,11 @@ export let previousModule = undefined;
 		<FlowBranchesAllWrapper {previousModule} bind:flowModule />
 	{:else if flowModule.value.type === 'identity'}
 		{#if $selectedId == 'failure'}
-			<Alert type="info" title="Error handlers are triggered upon non recovered errors">
-				If defined, the error handler will take the error as input.
-			</Alert>
+			<div class="p-4">
+				<Alert type="info" title="Error handlers are triggered upon non recovered errors">
+					If defined, the error handler will take the error as input.
+				</Alert>
+			</div>
 		{/if}
 
 		{#if flowModule.value.flow}

package/package/components/flows/content/FlowRetries.svelte

@@ -28,10 +28,9 @@ $: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential);
 <div class="h-full flex flex-col {$$props.class ?? ''}">
 	<h2>
 		Retries
-		<Tooltip>
+		<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/retries">
 			If defined, upon error this step will be retried with a delay and a maximum number of attempts
-			as defined below. If both static and exponential delay is defined, the static delay attempts
-			are tried before the exponential ones.
+			as defined below.
 		</Tooltip>
 	</h2>
 

package/package/components/flows/content/FlowSettings.svelte

@@ -1,6 +1,7 @@
 <script>import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TabContent from '../../common/tabs/TabContent.svelte';
+import { BROWSER } from 'esm-env';
 import Path from '../../Path.svelte';
 import Required from '../../Required.svelte';
 import FlowCard from '../common/FlowCard.svelte';
@@ -10,14 +11,15 @@ import { Alert } from '../../common';
 import { getContext } from 'svelte';
 import autosize from 'svelte-autosize';
 import Slider from '../../Slider.svelte';
-import { page } from '$app/stores';
 import { workspaceStore } from '../../../stores';
 import { copyToClipboard } from '../../../utils';
 import { Icon } from 'svelte-awesome';
 import { faClipboard } from '@fortawesome/free-solid-svg-icons';
-const { selectedId, flowStore } = getContext('FlowEditorContext');
-export let initialPath;
-$: url = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore?.path}`;
+import Tooltip from '../../Tooltip.svelte';
+const { selectedId, flowStore, initialPath } = getContext('FlowEditorContext');
+let hostname = BROWSER ? window.location.protocol + '//' + window.location.host : 'SSR';
+$: url = `${hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore?.path}`;
+$: syncedUrl = `${hostname}/api/w/${$workspaceStore}/jobs/run_wait_result/f/${$flowStore?.path}`;
 </script>
 
 <div class="h-full overflow-hidden">
@@ -58,43 +60,92 @@ $: url = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore
 									/>
 								</span>
 							</label>
-							<Slider text="How to trigger from external events?">
-								<div class="text-sm text-gray-600 border p-4">
-									There are 2 ways to trigger a flow based on external events:
+							<Slider text="How to trigger flows?">
+								<div class="text-sm text-gray-600 border p-4 mb-20">
+									On-demand:
 									<ul class="pt-4">
-										<li
-											>1. Send a webhook after each event: <a
-												on:click={(e) => {
-													e.preventDefault()
-													copyToClipboard(url)
-												}}
-												href={$page.url.protocol + '//' + url}
-												class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+										<li>
+											1. <a
+												href="https://docs.windmill.dev/docs/core_concepts/auto_generated_uis"
+												target="_blank">Auto-generated UIs</a
 											>
-												{url}
-												<span class="text-gray-700 ml-2">
-													<Icon data={faClipboard} />
-												</span>
-											</a>
 										</li>
+										<li>
+											2. <a href="/apps/add?nodraft=true" target="_blank"> App Editor</a> for customized-UIs
+										</li>
+										<li>
+											3. <a href="/schedules" target="_blank">Scheduling</a>
+										</li>
+										<li>
+											4. <a href="https://docs.windmill.dev/docs/advanced/cli" target="_blank"
+												>Windmill CLI</a
+											>
+										</li>
+										<br />
 										<li class="mt-2">
 											<div class="flex flex-col gap-2">
-												<p>
-													2. Use a trigger script and schedule this flow to run as frequently as
-													needed and compare a state persisted in Windmill to the state of the
-													external system. If a difference is detected, then the rest of the flow is
-													triggered. Oftentimes, the second step of a flow is a for-loop that will
-													iterate over every elements. When using a trigger, a default schedule will
-													be created.
-												</p>
-												<div>
-													<img
-														class="shadow-lg border rounded"
-														alt="static button"
-														src="/trigger_button.png"
-													/>
-												</div>
+												<p> From external events: </p>
 											</div>
+										</li>
+										<li class="mt-2">
+											5. Send a <a
+												href="https://docs.windmill.dev/docs/core_concepts/webhooks"
+												target="_blank">webhook</a
+											>
+											after each event:
+											<ul class="list-disc pl-4"
+												><li
+													>Async <Tooltip
+														>Return an uuid instantly that you can use to fetch status and result</Tooltip
+													>:
+													<a
+														on:click={(e) => {
+															e.preventDefault()
+															copyToClipboard(url)
+														}}
+														href={url}
+														class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+													>
+														{url}
+														<span class="text-gray-700 ml-2">
+															<Icon data={faClipboard} />
+														</span>
+													</a>
+												</li>
+												<li
+													>Sync <Tooltip>Wait for result within a timeout of 20s</Tooltip>:
+													<a
+														on:click={(e) => {
+															e.preventDefault()
+															copyToClipboard(syncedUrl)
+														}}
+														href={syncedUrl}
+														class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+													>
+														{syncedUrl}
+														<span class="text-gray-700 ml-2">
+															<Icon data={faClipboard} />
+														</span>
+													</a>
+												</li>
+											</ul></li
+										>
+										<br />
+										<li>
+											6. Use a <a
+												href="https://docs.windmill.dev/docs/flows/flow_trigger"
+												target="_blank">trigger script</a
+											>
+											and schedule this flow to run as frequently as needed and compare a state persisted
+											in Windmill to the state of the external system. If a difference is detected, then
+											the rest of the flow is triggered. Oftentimes, the second step of a flow is a for-loop
+											that will iterate over every elements. When using a trigger, a default schedule
+											will be created.
+											<img
+												class="shadow-lg border rounded"
+												alt="static button"
+												src="/trigger_button.png"
+											/>
 										</li></ul
 									>
 								</div>
@@ -102,7 +153,11 @@ $: url = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore
 						</div>
 					</TabContent>
 					<TabContent value="settings-schedule" class="p-4">
-						<Alert type="info" title="Primary Schedule">
+						<Alert
+							type="info"
+							title="Primary Schedule"
+							documentationLink="https://docs.windmill.dev/docs/core_concepts/scheduling"
+						>
 							Flows can be triggered by any schedules, their webhooks or their UI but they only have
 							only one primary schedules with which they share the same path. The primary schedule
 							can be set here.

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

@@ -1,8 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        initialPath: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/flows/content/ScriptEditorDrawer.svelte

@@ -1,6 +1,6 @@
 <script>import { Button, Drawer, DrawerContent } from '../../common';
 import ScriptEditor from '../../ScriptEditor.svelte';
-import { ScriptService } from '../../../gen';
+import { ScriptService, Script } from '../../../gen';
 import { inferArgs } from '../../../infer';
 import { workspaceStore } from '../../../stores';
 import { emptySchema, sendUserToast } from '../../../utils';
@@ -69,7 +69,7 @@ async function saveScript() {
 					noSyncFromGithub
 					lang={script.language}
 					path={script.path}
-					fixedOverflowWidgets={false}
+					fixedOverflowWidgets={true}
 					bind:code={script.content}
 					bind:schema={script.schema}
 					tag={undefined}

package/package/components/flows/flowStateUtils.js

@@ -1,10 +1,11 @@
 import { Script, ScriptService } from '../../gen';
 import { initialCode } from '../../script_helpers';
 import { userStore, workspaceStore } from '../../stores';
-import { getScriptByPath } from '../../utils';
+import { getScriptByPath } from '../../scripts';
 import { get } from 'svelte/store';
 import { charsToNumber, numberToChars } from './idUtils';
-import { emptyFlowModuleState, findNextAvailablePath, loadSchemaFromModule, NEVER_TESTED_THIS_FAR } from './utils';
+import { emptyFlowModuleState, findNextAvailablePath, loadSchemaFromModule } from './utils';
+import { NEVER_TESTED_THIS_FAR } from './models';
 export async function loadFlowModuleState(flowModule) {
     try {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
@@ -88,7 +89,7 @@ export async function createBranchAll(id) {
         id,
         value: {
             type: 'branchall',
-            branches: []
+            branches: [{ modules: [] }]
         },
         summary: ''
     };

package/package/components/flows/header/FlowImportExportMenu.svelte

@@ -18,7 +18,7 @@ let jsonViewerDrawer;
 	on:click={() => jsonViewerDrawer.toggleDrawer()}
 >
 	<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
-	Export JSON
+	JSON
 </Button>
 
 <Drawer bind:this={jsonViewerDrawer} size="800px">

package/package/components/flows/header/FlowPreviewButtons.svelte

@@ -26,16 +26,6 @@ $: upToDisabled =
         $selectedId?.includes('branch');
 </script>
 
-<Button
-	size="xs"
-	on:click={() => {
-		previewMode = 'whole'
-		previewOpen = !previewOpen
-	}}
-	startIcon={{ icon: faPlay }}
->
-	Test flow
-</Button>
 {#if !upToDisabled}
 	<Button
 		size="xs"
@@ -55,6 +45,18 @@ $: upToDisabled =
 	</Button>
 {/if}
 
+<Button
+	color="dark"
+	size="xs"
+	on:click={() => {
+		previewMode = 'whole'
+		previewOpen = !previewOpen
+	}}
+	startIcon={{ icon: faPlay }}
+>
+	Test flow
+</Button>
+
 <Drawer bind:open={previewOpen} alwaysOpen size="75%">
 	<FlowPreviewContent
 		open={previewOpen}

package/package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -3,7 +3,7 @@ import Icon from 'svelte-awesome';
 import { faBug } from '@fortawesome/free-solid-svg-icons';
 import { classNames, emptySchema } from '../../../utils';
 import Toggle from '../../Toggle.svelte';
-import { NEVER_TESTED_THIS_FAR } from '../utils';
+import { NEVER_TESTED_THIS_FAR } from '../models';
 const { selectedId, flowStateStore, flowStore } = getContext('FlowEditorContext');
 function onToggle() {
     if ($flowStore?.value?.failure_module) {

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

@@ -53,7 +53,7 @@ let openMenu = false;
 	}}
 >
 	<div
-		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm 
+		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
 			border border-gray-400 p-2 text-2xs module"
 	>
 		{#if $$slots.icon}
@@ -89,7 +89,7 @@ let openMenu = false;
 					}
 				}}
 				type="button"
-				class=" text-gray-900 bg-white border mx-0.5  border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+				class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 			>
 				<ClipboardCopy size={12} />
 			</button>

package/package/components/flows/models.d.ts

@@ -0,0 +1 @@
+export declare const NEVER_TESTED_THIS_FAR = "never tested this far";

package/package/components/flows/models.js

@@ -0,0 +1 @@
+export const NEVER_TESTED_THIS_FAR = 'never tested this far';

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

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         disabled?: boolean | undefined;
         label: string;
-        lang?: SupportedLanguage | 'pgsql' | 'mysql' | 'javascript' | 'fetch' | undefined;
+        lang?: SupportedLanguage | 'pgsql' | 'mysql' | 'javascript' | 'fetch' | 'docker' | undefined;
         icon?: IconDefinition | undefined;
         iconColor?: string | undefined;
     };

package/package/components/flows/pickers/PickHubApp.svelte

@@ -1,10 +1,10 @@
 <script>import { createEventDispatcher, onMount } from 'svelte';
 import { Badge, Skeleton } from '../../common';
 import SearchItems from '../../SearchItems.svelte';
-import { loadHubApps } from '../../../utils';
 import ListFilters from '../../home/ListFilters.svelte';
 import NoItemFound from '../../home/NoItemFound.svelte';
 import RowIcon from '../../common/table/RowIcon.svelte';
+import { loadHubApps } from '../../../hub';
 export let filter = '';
 let hubApps = undefined;
 let filteredItems = [];
@@ -45,7 +45,7 @@ onMount(async () => {
 						<div class="flex items-center gap-4">
 							<RowIcon kind="app" />
 
-							<div class="w-full text-left font-normal ">
+							<div class="w-full text-left font-normal">
 								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}

package/package/components/flows/pickers/PickHubFlow.svelte

@@ -1,10 +1,10 @@
 <script>import { createEventDispatcher, onMount } from 'svelte';
 import { Badge, Skeleton } from '../../common';
 import SearchItems from '../../SearchItems.svelte';
-import { loadHubFlows } from '../../../utils';
 import ListFilters from '../../home/ListFilters.svelte';
 import NoItemFound from '../../home/NoItemFound.svelte';
 import RowIcon from '../../common/table/RowIcon.svelte';
+import { loadHubFlows } from '../../../hub';
 export let filter = '';
 let hubFlows = undefined;
 let filteredItems = [];
@@ -45,7 +45,7 @@ onMount(async () => {
 						<div class="flex items-center gap-4">
 							<RowIcon kind="flow" />
 
-							<div class="w-full text-left font-normal ">
+							<div class="w-full text-left font-normal">
 								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}

package/package/components/flows/pickers/PickHubScript.svelte

@@ -2,10 +2,11 @@
 import { createEventDispatcher, onMount } from 'svelte';
 import { Badge, Skeleton } from '../../common';
 import SearchItems from '../../SearchItems.svelte';
-import { capitalize, classNames, loadHubScripts } from '../../../utils';
+import { capitalize, classNames } from '../../../utils';
 import NoItemFound from '../../home/NoItemFound.svelte';
 import { APP_TO_ICON_COMPONENT } from '../../icons';
 import ListFilters from '../../home/ListFilters.svelte';
+import { loadHubScripts } from '../../../scripts';
 export let kind = 'script';
 export let filter = '';
 const dispatch = createEventDispatcher();
@@ -54,7 +55,7 @@ const maxItems = 40;
 								/>
 							</div>
 
-							<div class="w-full text-left font-normal ">
+							<div class="w-full text-left font-normal">
 								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}
@@ -62,7 +63,7 @@ const maxItems = 40;
 										{item.summary ?? ''}
 									{/if}
 								</div>
-								<div class="text-gray-600 text-xs ">
+								<div class="text-gray-600 text-xs">
 									{item.path}
 								</div>
 							</div>