windmill-components 1.37.0 → 1.46.1

package/components/graph/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FlowGraph } from './FlowGraph.svelte';
+export * from './model';
+export * from './util';

package/components/graph/index.js

@@ -0,0 +1,3 @@
+export { default as FlowGraph } from './FlowGraph.svelte';
+export * from './model';
+export * from './util';

package/components/graph/model.d.ts

@@ -0,0 +1,20 @@
+import type { Node as SvelvetNode } from "svelvet";
+export declare type ModuleHost = 'workspace' | 'inline' | 'hub';
+export declare type Node = SvelvetNode & {
+    parentIds: string[];
+    edgeLabel?: string;
+    host?: ModuleHost;
+};
+export declare type Loop = {
+    type: 'loop';
+    items: NestedNodes;
+};
+export declare type Branch = {
+    type: 'branch';
+    items: NestedNodes[];
+};
+export declare type GraphItem = Node | Loop | Branch;
+export declare type NestedNodes = GraphItem[];
+export declare function isNode(item: GraphItem | NestedNodes | undefined): item is Node;
+export declare function isLoop(item: GraphItem | NestedNodes | undefined): item is Loop;
+export declare function isBranch(item: GraphItem | NestedNodes | undefined): item is Branch;

package/components/graph/model.js

@@ -0,0 +1,9 @@
+export function isNode(item) {
+    return typeof item?.['id'] === 'number';
+}
+export function isLoop(item) {
+    return item?.['type'] === 'loop';
+}
+export function isBranch(item) {
+    return item?.['type'] === 'branch';
+}

package/components/graph/util.d.ts

@@ -0,0 +1,9 @@
+export declare const NODE: {
+    width: number;
+    height: number;
+    gap: {
+        horizontal: number;
+        vertical: number;
+    };
+};
+export declare function createIdGenerator(): Generator<number, number, unknown>;

package/components/graph/util.js

@@ -0,0 +1,14 @@
+export const NODE = {
+    width: 200,
+    height: 35,
+    gap: {
+        horizontal: 40,
+        vertical: 50
+    }
+};
+export function* createIdGenerator() {
+    let id = 0;
+    while (true) {
+        yield id++;
+    }
+}

package/components/icons/WindmillIcon.svelte

@@ -1,68 +1,101 @@
 <script>export let height = '24px';
 export let width = '24px';
+export let white = false;
 </script>
 
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg
+	class={$$props.class}
+	version="1.1"
+	id="Calque_1"
 	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
 	x="0px"
 	y="0px"
 	{width}
 	{height}
-	viewBox="0 0 188.8 258.10001"
-	preserveAspectRatio="xMidYMid meet"
-	id="svg12"
-	inkscape:export-filename="/home/rfiszel/Downloads/windmill.png"
-	inkscape:export-xdpi="31.02663"
-	inkscape:export-ydpi="31.02663"
+	viewBox="0 0 256 256"
+	style="enable-background:new 0 0 256 256;"
+	xml:space="preserve"
 >
-	<defs id="defs16" />
-	<sodipodi:namedview
-		id="namedview14"
-		borderopacity="1.0"
-		inkscape:pageshadow="2"
-		inkscape:pageopacity="0.0"
-		inkscape:pagecheckerboard="0"
-		inkscape:document-units="pt"
-		showgrid="false"
-		inkscape:zoom="0.50043491"
-		inkscape:cx="57.949594"
-		inkscape:cy="197.82793"
-		inkscape:window-width="1276"
-		inkscape:window-height="1436"
-		inkscape:window-x="0"
-		inkscape:window-y="0"
-		inkscape:window-maximized="1"
-		inkscape:current-layer="svg12"
-		fit-margin-top="0"
-		fit-margin-left="0"
-		fit-margin-right="0"
-		fit-margin-bottom="0"
-	/>
-	<metadata id="metadata2"> Created by potrace 1.16, written by Peter Selinger 2001-2019 </metadata>
-	<g
-		transform="matrix(0.1,0,0,-0.1,-273.6,405.1)"
-		fill="#000000"
-		stroke="none"
-		id="g10"
-		inkscape:export-filename="/home/rfiszel/Downloads/g10.png"
-		inkscape:export-xdpi="31.02663"
-		inkscape:export-ydpi="31.02663"
-		style="fill:#000000;fill-opacity:1"
-	>
-		<path
-			d="m 2760,4025 -24,-26 447,-447 447,-447 -447,-447 -447,-447 24,-26 24,-26 448,448 448,448 448,-448 448,-448 24,26 24,26 -447,447 -447,447 447,447 447,447 -24,26 -24,26 -448,-448 -448,-448 -448,448 -448,448 z"
-			id="path4"
-			style="fill:#000000;fill-opacity:1"
+	<style>
+		.st0 {
+			fill: #ffffff;
+		}
+		.st1 {
+			opacity: 0.4;
+			fill: #ffffff;
+		}
+		.st2 {
+			fill: #999;
+		}
+		.st3 {
+			fill: black;
+		}
+		.st4 {
+			fill: #999;
+		}
+		.st5 {
+			fill: url(#SVGID_1_);
+		}
+		.st6 {
+			fill: url(#SVGID_00000021089067129159788970000008246765442136188072_);
+		}
+		.st7 {
+			fill: url(#SVGID_00000117639240116366130650000015074833605515028638_);
+		}
+		.st8 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000101781798616409025840000016567063639337360777_);
+		}
+		.st9 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000052086836598721292040000002033117744178971046_);
+		}
+		.st10 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000159460939004760751800000002448009281983951536_);
+		}
+		.st11 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000013177830667419993080000017721442101626521532_);
+		}
+		.st12 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000152235521444854938490000006526001119318383285_);
+		}
+		.st13 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000119823135212293698520000012774889010992664993_);
+		}</style>
+	<g>
+		<polygon
+			class="st2"
+			points="134.78,14.22 114.31,48.21 101.33,69.75 158.22,69.75 177.97,36.95 191.67,14.22 	"
 		/>
-		<path
-			d="m 3569,2823 -107,-108 -66,-539 c -39,-315 -63,-543 -58,-548 5,-5 67,-7 138,-6 l 129,3 2,155 c 1,146 2,155 23,172 29,23 91,23 119,1 19,-17 21,-29 23,-173 l 3,-155 138,-3 137,-3 v 28 c 0,15 -20,186 -45,378 -25,193 -53,421 -64,509 l -19,159 -118,118 c -65,66 -121,119 -124,119 -3,0 -53,-48 -111,-107 z"
-			id="path6"
-			style="fill:#000000;fill-opacity:1"
+		<polygon
+			class:st3={!white}
+			class:st0={white}
+			points="227.55,69.75 186.61,69.75 101.33,69.75 129.78,119.02 158.16,119.02 228.61,119.02 256,119.02 	"
 		/>
-		<path
-			d="m 3317,1543 c -4,-3 -7,-21 -7,-40 v -33 h 380 380 v 24 c 0,59 21,56 -379,56 -202,0 -371,-3 -374,-7 z"
-			id="path8"
-			style="fill:#000000;fill-opacity:1"
+		<polygon
+			class:st3={!white}
+			class:st0={white}
+			points="136.93,132.47 116.46,167.93 73.82,241.78 130.71,241.78 144.9,217.2 180.13,156.18 193.82,132.46 	
+		"
+		/>
+		<polygon
+			class:st3={!white}
+			class:st0={white}
+			points="121.7,131.95 101.23,96.49 58.59,22.63 30.15,71.91 44.34,96.49 79.57,157.5 93.26,181.22 	"
+		/>
+		<polygon
+			class="st2"
+			points="64.81,131.95 25.15,131.21 0,130.74 28.44,180.01 66.73,180.72 93.26,181.21 	"
+		/>
+		<polygon
+			class="st2"
+			points="165.38,181.74 184.58,216.46 196.75,238.47 225.19,189.2 206.66,155.69 193.83,132.46 	"
 		/>
 	</g>
 </svg>

package/components/icons/WindmillIcon.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         height?: string | undefined;
         width?: string | undefined;
+        white?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/jobs/JobDetail.svelte

@@ -1,7 +1,10 @@
-<script>import { displayDate, displayDaysAgo, forLater, msToSec, truncateHash, truncateRev } from '../../utils';
-import { faCalendar, faCircle, faClock, faFastForward, faHourglassHalf, faRobot, faTimes, faUser, faWind } from '@fortawesome/free-solid-svg-icons';
+<script>import { goto } from '$app/navigation';
+import { page } from '$app/stores';
+import { displayDate, displayDaysAgo, forLater, msToSec, truncateHash, truncateRev } from '../../utils';
+import { faCalendar, faCircle, faClock, faFastForward, faHourglassHalf, faRobot, faSearch, faTimes, faUser, faWind } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { check } from 'svelte-awesome/icons';
+import { Badge, Button } from '../common';
 const SMALL_ICON_SCALE = 0.7;
 export let job;
 </script>
@@ -13,7 +16,7 @@ export let job;
 				{#if job === undefined}
 					No job found
 				{:else}
-					<div class="block text-center align-middle pb-3 pt-2 px-6">
+					<div class="block text-center align-middle  px-6">
 						{#if 'success' in job && job.success}
 							{#if job.is_skipped}
 								<Icon
@@ -61,36 +64,43 @@ export let job;
 						{/if}
 					</div>
 
-					<h3 class="break-all  py-2">
-						{#if job.script_path}
-							<a class="pr-3" href="/run/{job.id}">{job.script_path} </a>
-						{:else if 'job_kind' in job && job.job_kind == 'preview'}
-							<a class="pr-3" href="/run/{job.id}">Preview without path </a>
-						{:else if 'job_kind' in job && job.job_kind != 'script'}
-							<a class="pr-3" href="/run/{job.id}">lock dependencies</a>
-						{/if}
-						{#if job.script_hash}
-							<a href="/scripts/get/{job.script_hash}" class="commit-hash"
-								>{truncateHash(job.script_hash ?? '')}</a
-							>
-						{/if}
-						{#if 'job_kind' in job && job.job_kind != 'script'}<span
-								class="bg-blue-200 text-gray-700 text-xs rounded px-1 mx-3 whitespace-nowrap"
-								><a href="/run/{job.id}">{job.job_kind}</a></span
-							>
-						{:else if job.is_flow_step}
-							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1 mx-3"
-								><a href="/run/{job.parent_job}">step of flow</a></span
+					<div class="flex flex-row space-x-2">
+						<div class="whitespace-nowrap">
+							{#if job.script_path}
+								<a href="/run/{job.id}?workspace={job.workspace_id}">{job.script_path} </a>
+							{:else if 'job_kind' in job && job.job_kind == 'preview'}
+								<a href="/run/{job.id}?workspace={job.workspace_id}">Preview without path </a>
+							{:else if 'job_kind' in job && job.job_kind == 'dependencies'}
+								<a href="/run/{job.id}?workspace={job.workspace_id}"
+									>lock deps of {truncateHash(job.script_hash ?? '')}</a
+								>
+							{:else if 'job_kind' in job && job.job_kind == 'identity'}
+								<a href="/run/{job.id}?workspace={job.workspace_id}">no op</a>
+							{/if}
+							<button
+								class="ml-1"
+								on:click={() => {
+									goto(`/runs/${job.script_path}?${$page.url.searchParams.toString()}`)
+								}}><Badge><Icon scale={0.7} data={faSearch} /></Badge></button
 							>
-						{/if}
-					</h3>
+						</div>
+						<div class="whitespace-nowrap">
+							{#if 'job_kind' in job}<a href="/run/{job.id}"
+									><Badge color="blue">{job.job_kind}</Badge></a
+								>
+							{/if}
+							{#if job.is_flow_step && (job.job_kind == 'script' || job.job_kind == 'preview')}
+								<a href="/run/{job.parent_job}?workspace={job.workspace_id}"
+									><Badge color="gray">flow step</Badge></a
+								>
+							{/if}
+						</div>
+					</div>
 				{/if}
 			</div>
-			<div>
-				<span class="pl-14 italic text-gray-500 text-2xs  whitespace-nowrap overflow-hidden"
-					>Run {job.id}</span
-				>
-			</div>
+			<div class="pl-14 italic text-gray-500 text-2xs  whitespace-nowrap overflow-hidden"
+				>{truncateRev(job.id, 8, '')}</div
+			>
 		</div>
 		<div class="bg-white grid grid-cols-2 gap-x-2 col-span-2">
 			<div class="w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4 overflow-hidden">

package/components/landing/FlowGettingStarted.svelte

@@ -5,9 +5,9 @@
 	import HatIcon from '../icons/HatIcon.svelte'
 </script>
 
-<div class="p-4 border border-gray-300 rounded-md bg-gray-50 ">
+<div class="p-4 border border-gray-300 rounded-md bg-gray-50 overflow-auto">
 	<div class="flex items-center">
-		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
+		<h3 class="inline-flex items-center font-semibold">
 			<HatIcon class="w-6 h-6 mr-2" />
 			Getting started
 		</h3>
@@ -17,7 +17,7 @@
 		together. Each Flow is composed of one or more steps. Create a new flow or find inspiration on
 		the Hub!
 	</div>
-	<div class="inline-flex flex-wrap gap-y-2">
+	<div class="flex flex-row flex-wrap gap-y-2">
 		<Button
 			on:click={() => goto('flows/add')}
 			color="dark"
@@ -42,6 +42,7 @@
 			variant="border"
 			size="xs"
 			startIcon={{ icon: faExternalLink }}
+			target="_blank"
 		>
 			Explore community flows on WindmillHub
 		</Button>

package/components/landing/FlowLandingBox.svelte

@@ -1,69 +1,39 @@
 <script>import { goto } from '$app/navigation';
+import { faPencil, faPlay } from '@fortawesome/free-solid-svg-icons';
+import { Button } from '../common';
 export let flow;
 </script>
 
-<div
-	class="border p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 flex flex-col justify-between cursor-pointer"
+<a
+	href="#{flow.path}"
+	class="border p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 text-gray-800 flex flex-col justify-between cursor-pointer"
 	on:click={() => goto(`/flows/get/${flow.path}`)}
 >
-	<div class="font-bold">{flow.summary}</div>
+	<div class="font-bold">{flow.summary || flow.path}</div>
 
-	<div class="inline-flex justify-between w-full h-16">
+	<div class="inline-flex justify-between w-full break-words">
 		<div class="text-xs">{flow.path}</div>
 	</div>
 
-	<div
-		class="inline-flex space-x-2 space-x-reverse flex-row-reverse w-full bottom-4 right-4 flex-wrap"
-	>
-		<button
-			on:click|stopPropagation={() => goto(`/flows/edit/${flow.path}`)}
-			type="button"
-			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
-			data-dismiss-target="#alert-additional-content-5"
-			aria-label="Close"
+	<div class="flex flex-row-reverse gap-x-2">
+		<Button
+			on:click={() => goto(`/flows/edit/${flow.path}`)}
+			color="dark"
+			size="xs"
+			variant="border"
+			startIcon={{ icon: faPencil }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-				/>
-			</svg>
 			Edit
-		</button>
+		</Button>
 
-		<button
-			on:click|stopPropagation={() => goto(`/flows/run/${flow.path}`)}
-			type="button"
-			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
-			data-dismiss-target="#alert-additional-content-5"
-			aria-label="Close"
+		<Button
+			on:click={() => goto(`/flows/run/${flow.path}`)}
+			color="dark"
+			size="xs"
+			variant="border"
+			startIcon={{ icon: faPlay }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-				/><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
 			Run
-		</button>
+		</Button>
 	</div>
-</div>
+</a>

package/components/landing/RessourceGettingStarted.svelte

@@ -7,7 +7,7 @@
 
 <div class="p-4 border border-gray-300 rounded-md bg-gray-50 dark:border-gray-600 dark:bg-gray-700">
 	<div class="flex items-center">
-		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
+		<h3 class="inline-flex items-center font-semibold">
 			<HatIcon class="w-6 h-6 mr-2" />
 			Getting started
 		</h3>

package/components/landing/ScriptBox.svelte

@@ -1,13 +1,13 @@
 <script>import { goto } from '$app/navigation';
 import { truncateHash } from '../../utils';
 import { faPencil, faPlay } from '@fortawesome/free-solid-svg-icons';
-import { Button, Badge, ActionRow } from '../common';
+import { Button, Badge } from '../common';
 export let script;
 </script>
 
-<div
-	class="border p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 flex flex-col justify-between cursor-pointer"
-	on:click={() => goto(`/scripts/get/${script.hash}`)}
+<a
+	class="border p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 text-gray-800 flex flex-col justify-between"
+	href="/scripts/get/{script.hash}"
 >
 	<div class="font-bold">{script.summary || script.path}</div>
 
@@ -28,27 +28,25 @@ export let script;
 			</Badge>
 		{/if}
 	</div>
-	<ActionRow>
-		<svelte:fragment slot="right">
-			<Button
-				on:click={() => goto(`/scripts/edit/${script.hash}?step=2`)}
-				color="dark"
-				size="xs"
-				variant="border"
-				startIcon={{ icon: faPencil }}
-			>
-				Edit
-			</Button>
+	<div class="flex flex-row-reverse gap-x-2">
+		<Button
+			on:click={() => goto(`/scripts/edit/${script.hash}?step=2`)}
+			color="dark"
+			size="xs"
+			variant="border"
+			startIcon={{ icon: faPencil }}
+		>
+			Edit
+		</Button>
 
-			<Button
-				on:click={() => goto(`/scripts/run/${script.hash}`)}
-				color="dark"
-				size="xs"
-				variant="border"
-				startIcon={{ icon: faPlay }}
-			>
-				Run
-			</Button>
-		</svelte:fragment>
-	</ActionRow>
-</div>
+		<Button
+			on:click={() => goto(`/scripts/run/${script.hash}`)}
+			color="dark"
+			size="xs"
+			variant="border"
+			startIcon={{ icon: faPlay }}
+		>
+			Run
+		</Button>
+	</div>
+</a>

package/components/landing/ScriptGettingStarted.svelte

@@ -5,9 +5,9 @@
 	import HatIcon from '../icons/HatIcon.svelte'
 </script>
 
-<div class="p-4 border border-gray-300 rounded-md bg-gray-50 ">
+<div class="p-4 border border-gray-300 rounded-md bg-gray-50 overflow-auto">
 	<div class="flex items-center">
-		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
+		<h3 class="inline-flex items-center font-semibold">
 			<HatIcon class="w-6 h-6 mr-2" />
 			Getting started
 		</h3>
@@ -15,7 +15,7 @@
 	<div class="mt-2 mb-4 text-sm text-gray-700 ">
 		Create a new script or find inspiration on the Hub!
 	</div>
-	<div class="inline-flex flex-wrap gap-y-2 ">
+	<div class="inline-flex flex-wrap gap-y-2">
 		<Button
 			on:click={() => goto('scripts/add')}
 			color="dark"
@@ -40,6 +40,7 @@
 			variant="border"
 			size="xs"
 			startIcon={{ icon: faExternalLink }}
+			target="_blank"
 		>
 			Explore community scripts on WindmillHub
 		</Button>

package/components/preview/FlowPreviewStatus.svelte

@@ -17,7 +17,7 @@ export let job;
 						Job Id
 					</th>
 					<td class="py-2">
-						<a href="/run/{job?.id}">
+						<a rel="noreferrer" target="_blank" href="/run/{job?.id}?workspace={job?.workspace_id}">
 							{job?.id}
 						</a>
 					</td>

package/components/progressBar/ProgressBar.svelte

@@ -0,0 +1,89 @@
+<script>import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { isLoopStep, isLoopState, getTween } from './model';
+import ProgressBarGeneralPart from './ProgressBarGeneralPart.svelte';
+import ProgressBarLoopPart from './ProgressBarLoopPart.svelte';
+export let steps;
+export let error = false;
+export let duration = 100;
+let percent = getTween(0, duration);
+let finished = false;
+let state = [];
+const stateStore = writable({
+    length: state.length,
+    index: 0,
+    finished,
+    error
+});
+setContext('state', stateStore);
+$: state = steps.map((step, i) => {
+    if (isLoopStep(step)) {
+        return {
+            type: step.type,
+            isDone: error ? false : step.isDone,
+            isDoneChanged: !state[i]?.isDone && step.isDone,
+            length: step.length,
+            index: step.index,
+            indexChanged: state[i]?.index !== step.index
+        };
+    }
+    else {
+        return {
+            type: step.type,
+            isDone: step.isDone,
+            isDoneChanged: !state[i]?.isDone && step.isDone
+        };
+    }
+});
+$: stateStore.update(({ index }) => ({ length: state.length, index, finished, error }));
+$: stepIndex = state.findIndex(({ isDone }) => !isDone);
+$: lastStep = state.at(-1);
+$: if (typeof lastStep?.isDone === 'boolean') {
+    finished = lastStep.isDone;
+    if ($percent >= 100 && !lastStep.isDone) {
+        percent = getTween(0, duration);
+    }
+}
+$: subStepIndex = lastStep ? lastStep['index'] : undefined;
+$: length = 100 / (state.length || 1);
+$: if (finished) {
+    percent.set(100);
+}
+else {
+    const product = length * stepIndex;
+    percent.set(product < 0 ? 0 : product);
+}
+</script>
+
+<div class={$$props.class}>
+	<div
+		class="flex justify-between items-end font-medium mb-1 {error
+			? 'text-red-700'
+			: 'text-blue-700'}"
+	>
+		<span class="text-base">
+			{error
+				? 'Error occured'
+				: finished
+				? 'Done'
+				: `Step ${stepIndex + 1}${subStepIndex !== undefined ? `.${subStepIndex + 1}` : ''}`}
+		</span>
+		<span class="text-sm">
+			{state.length ? $percent.toFixed(0) : 0}%
+		</span>
+	</div>
+	<div class="flex w-full bg-gray-200 rounded-full h-4 overflow-hidden">
+		{#each state as step, index}
+			<div
+				class="h-full relative border-white {index === 0 ? '' : 'border-l'}"
+				style="width: {length}%;"
+			>
+				{#if isLoopState(step)}
+					<ProgressBarLoopPart {step} {index} {duration} />
+				{:else}
+					<ProgressBarGeneralPart {step} {index} {duration} />
+				{/if}
+			</div>
+		{/each}
+	</div>
+</div>