windmill-components 1.46.3 → 1.55.0

package/components/FlowPreviewContent.svelte.d.ts

@@ -1,8 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import { Job } from '../gen';
 declare const __propDef: {
     props: {
         previewMode: 'upTo' | 'whole';
         open: boolean;
+        jobId?: string | undefined;
+        job?: Job | undefined;
         runPreview?: ((args: Record<string, any>) => Promise<void>) | undefined;
     };
     events: {
@@ -12,9 +15,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowPreviewContentProps = typeof __propDef.props;
-export declare type FlowPreviewContentEvents = typeof __propDef.events;
-export declare type FlowPreviewContentSlots = typeof __propDef.slots;
+export type FlowPreviewContentProps = typeof __propDef.props;
+export type FlowPreviewContentEvents = typeof __propDef.events;
+export type FlowPreviewContentSlots = typeof __propDef.slots;
 export default class FlowPreviewContent extends SvelteComponentTyped<FlowPreviewContentProps, FlowPreviewContentEvents, FlowPreviewContentSlots> {
     get runPreview(): (args: Record<string, any>) => Promise<void>;
 }

package/components/FlowStatusViewer.svelte

@@ -6,16 +6,35 @@ import Icon from 'svelte-awesome';
 import { faChevronDown, faChevronUp, faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import { onDestroy } from 'svelte';
-import { Button } from './common';
+import { Button, Tab } from './common';
 import DisplayResult from './DisplayResult.svelte';
+import Tabs from './common/tabs/Tabs.svelte';
+import { FlowGraph } from './graph';
+import ModuleStatus from './ModuleStatus.svelte';
+import { displayDate, truncateRev } from '../utils';
+import JobArgs from './JobArgs.svelte';
 const dispatch = createEventDispatcher();
 export let jobId;
 export let flowState = undefined;
 export let flowJobIds = undefined;
 export let job = undefined;
+export let flowModuleStates = {};
+let localFlowModuleStates = {};
+export let retry_status = {};
+let selectedNode = undefined;
 let jobResults = [];
+let jobFailures = [];
 let forloop_selected = '';
 let timeout;
+$: localFlowModuleStates && updateFlowModuleStates();
+function updateFlowModuleStates() {
+    Object.entries(localFlowModuleStates).forEach(([moduleId, state]) => {
+        if (flowModuleStates[moduleId] !== state &&
+            flowModuleStates[moduleId]?.type !== FlowStatusModule.type.FAILURE) {
+            flowModuleStates[moduleId] = state;
+        }
+    });
+}
 let lastSize = 0;
 $: {
     let len = (flowJobIds?.flowJobs ?? []).length;
@@ -24,20 +43,54 @@ $: {
         lastSize = len;
     }
 }
+$: updateFailCount(job?.flow_status?.retry?.fail_count);
+function updateFailCount(count) {
+    if (count) {
+        retry_status[jobId ?? ''] = count;
+    }
+    else {
+        delete retry_status[jobId ?? ''];
+    }
+}
 $: innerModules =
-    job?.flow_status?.modules
-        .filter((x) => x.job != jobId)
-        .concat(job?.flow_status.failure_module.type != 'WaitingForPriorSteps'
+    job?.flow_status?.modules.concat(job?.flow_status.failure_module.type != 'WaitingForPriorSteps'
         ? job?.flow_status.failure_module
         : []) ?? [];
+$: innerModules && localFlowModuleStates && updateInnerModules();
+function updateInnerModules() {
+    innerModules.forEach((mod, i) => {
+        if (mod.type === FlowStatusModule.type.WAITING_FOR_EVENTS &&
+            localFlowModuleStates?.[innerModules?.[i - 1]?.id ?? '']?.type ==
+                FlowStatusModule.type.SUCCESS) {
+            localFlowModuleStates[mod.id ?? ''] = { type: mod.type };
+        }
+        else if (mod.type === FlowStatusModule.type.WAITING_FOR_EXECUTOR &&
+            localFlowModuleStates[mod.id ?? '']?.scheduled_for == undefined) {
+            JobService.getJob({
+                workspace: $workspaceStore ?? '',
+                id: mod.job ?? ''
+            }).then((job) => {
+                localFlowModuleStates[mod.id ?? ''] = {
+                    type: mod.type,
+                    scheduled_for: 'scheduled for ' + displayDate(job?.['scheduled_for'], true),
+                    job_id: job?.id,
+                    parent_module: mod['parent_module']
+                };
+            });
+        }
+    });
+}
 let errorCount = 0;
 async function loadJobInProgress() {
     if (jobId != '00000000-0000-0000-0000-000000000000') {
         try {
-            job = await JobService.getJob({
+            const newJob = await JobService.getJob({
                 workspace: $workspaceStore ?? '',
                 id: jobId ?? ''
             });
+            if (JSON.stringify(newJob) !== JSON.stringify(job)) {
+                job = newJob;
+            }
             errorCount = 0;
         }
         catch (e) {
@@ -52,6 +105,8 @@ async function loadJobInProgress() {
 $: job && dispatch('jobsLoaded', job);
 function updateJobId() {
     if (jobId !== job?.id) {
+        retry_status = {};
+        localFlowModuleStates = {};
         loadJobInProgress();
     }
 }
@@ -60,10 +115,11 @@ $: isListJob = flowJobIds && Array.isArray(flowJobIds?.flowJobs);
 onDestroy(() => {
     timeout && clearTimeout(timeout);
 });
+let selected = 'graph';
 </script>
 
 {#if job}
-	<div class="flow-root w-full space-y-4 ">
+	<div class="flow-root w-full space-y-4">
 		{#if innerModules.length > 0}
 			<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Flow result</h3>
 		{/if}
@@ -86,119 +142,238 @@ onDestroy(() => {
 			</div>
 		{/if}
 
-		{#if isListJob}
-			<h3 class="text-md leading-6 font-bold text-gray-600 border-b mb-4">
-				Embedded flows: ({flowJobIds?.flowJobs.length} items)
-			</h3>
-			{#each flowJobIds?.flowJobs ?? [] as loopJobId, j}
-				<Button
-					variant={forloop_selected === loopJobId ? 'contained' : 'border'}
-					color={forloop_selected === loopJobId ? 'dark' : 'light'}
-					btnClasses="w-full flex justify-start"
-					on:click={() => {
-						if (forloop_selected == loopJobId) {
-							forloop_selected = ''
-						} else {
-							forloop_selected = loopJobId
-						}
-					}}
-				>
-					<span class="truncate">
-						#{j + 1}: {loopJobId}
-					</span>
+		{#if innerModules.length > 0 && !isListJob}
+			<Tabs bind:selected>
+				<Tab value="graph"><span class="font-semibold text-md">Graph</span></Tab>
+				<Tab value="sequence"><span class="font-semibold">Details</span></Tab>
+			</Tabs>
+		{/if}
 
-					<Icon
-						class="ml-2"
-						data={forloop_selected == loopJobId ? faChevronUp : faChevronDown}
-						scale={0.8}
-					/>
-				</Button>
-				<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
-					<svelte:self
-						{flowState}
-						jobId={loopJobId}
-						on:jobsLoaded={(e) => {
-							if (flowJobIds?.moduleId) {
-								if (flowState) {
-									if (
-										!flowState[flowJobIds.moduleId].previewResult ||
-										!Array.isArray(flowState[flowJobIds.moduleId]?.previewResult)
-									) {
-										flowState[flowJobIds.moduleId].previewResult = []
-									}
-									flowState[flowJobIds.moduleId].previewResult[j] = e.detail.result
-									flowState[flowJobIds.moduleId].previewArgs = e.detail.args
-									jobResults[j] = e.detail.result == null ? 'Job in progress ...' : e.detail.result
-								}
+		<div class={selected == 'graph' && !isListJob ? 'hidden' : ''}>
+			{#if isListJob}
+				<h3 class="text-md leading-6 font-bold text-gray-600 border-b mb-4">
+					Embedded flows: ({flowJobIds?.flowJobs.length} items)
+				</h3>
+				{#each flowJobIds?.flowJobs ?? [] as loopJobId, j}
+					<Button
+						variant={forloop_selected === loopJobId ? 'contained' : 'border'}
+						color={jobFailures[j] === true
+							? 'red'
+							: forloop_selected === loopJobId
+							? 'dark'
+							: 'light'}
+						btnClasses="w-full flex justify-start"
+						on:click={() => {
+							if (forloop_selected == loopJobId) {
+								forloop_selected = ''
+							} else {
+								forloop_selected = loopJobId
 							}
 						}}
-					/>
-				</div>
-			{/each}
-		{:else if innerModules.length > 0}
-			<ul class="w-full">
-				<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4 py-2">
-					Step-by-step results
-				</h3>
+					>
+						<span class="truncate">
+							#{j + 1}: {loopJobId}
+						</span>
 
-				{#each innerModules as mod, i}
-					<div class="line w-8 h-10" />
-					<h3 class="text-gray-500 mb-2 w-full">
-						{#if job?.raw_flow?.modules && i < job?.raw_flow?.modules.length}
-							Step
-							<span class="font-medium text-gray-900">
-								{i + 1}
-							</span>
-							out of
-							<span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
-							{#if job.raw_flow?.modules[i]?.summary}
-								: <span class="font-medium text-gray-900">
-									{job.raw_flow?.modules[i]?.summary ?? ''}
-								</span>
-							{/if}
-						{:else}
-							<h3>Failure module</h3>
-						{/if}
-					</h3>
-					<div class="line w-8 h-10" />
-					<li class="w-full border border-gray-600 p-6 space-y-2 bg-blue-50/50">
-						{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
-							<svelte:self
-								{flowState}
-								jobId={mod.job}
-								flowJobIds={mod.flow_jobs
-									? {
-											moduleId: mod.id,
-											flowJobs: mod.flow_jobs
-									  }
-									: undefined}
-								on:jobsLoaded={(e) => {
-									if (mod.id && (mod.flow_jobs ?? []).length == 0) {
-										if (flowState && flowState[mod.id]) {
-											flowState[mod.id].previewResult = e.detail.result
-											flowState[mod.id].previewArgs = e.detail.args
+						<Icon
+							class="ml-2"
+							data={forloop_selected == loopJobId ? faChevronUp : faChevronDown}
+							scale={0.8}
+						/>
+					</Button>
+					<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
+						<svelte:self
+							bind:retry_status
+							bind:flowState
+							bind:flowModuleStates={localFlowModuleStates}
+							jobId={loopJobId}
+							on:jobsLoaded={(e) => {
+								if (flowJobIds?.moduleId) {
+									if (flowState?.[flowJobIds.moduleId]) {
+										if (
+											!flowState[flowJobIds.moduleId].previewResult ||
+											!Array.isArray(flowState[flowJobIds.moduleId]?.previewResult)
+										) {
+											flowState[flowJobIds.moduleId].previewResult = []
 										}
+										flowState[flowJobIds.moduleId].previewResult[j] = e.detail.result
+										flowState[flowJobIds.moduleId].previewArgs = e.detail.args
+										jobResults[j] =
+											e.detail.type == 'QueuedJob' ? 'Job in progress ...' : e.detail.result
+										jobFailures[j] = e.detail.success === false
 									}
-								}}
-							/>
-						{:else}
-							<span class="italic text-gray-600">
-								<Icon data={faHourglassHalf} class="mr-2" />
+									if (e.detail.type == 'QueuedJob') {
+										localFlowModuleStates[flowJobIds.moduleId] = {
+											type: FlowStatusModule.type.IN_PROGRESS,
+											logs: e.detail.logs,
+											job_id: e.detail.id,
+											iteration_total: flowJobIds?.flowJobs.length
+										}
+									} else {
+										localFlowModuleStates[flowJobIds.moduleId] = {
+											type: e.detail.success
+												? FlowStatusModule.type.SUCCESS
+												: FlowStatusModule.type.FAILURE,
+											logs: 'All jobs completed',
+											result: jobResults,
+											job_id: e.detail.id,
+											iteration_total: flowJobIds?.flowJobs.length
+										}
+									}
+								}
+							}}
+						/>
+					</div>
+				{/each}
+			{:else if innerModules.length > 0}
+				<ul class="w-full">
+					<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4 py-2">
+						Step-by-step results
+					</h3>
 
-								{#if mod.type == FlowStatusModule.type.WAITING_FOR_EVENT}
-									Waiting to be resumed by receivent events such as approvals
-								{:else if mod.type == FlowStatusModule.type.WAITING_FOR_PRIOR_STEPS}
-									Waiting for prior steps to complete
-								{:else if mod.type == FlowStatusModule.type.WAITING_FOR_EXECUTOR}
-									Job is ready to be executed and will be picked up by the next available worker
+					{#each innerModules as mod, i}
+						<div class="line w-8 h-10" />
+						<h3 class="text-gray-500 mb-2 w-full">
+							{#if job?.raw_flow?.modules && i < job?.raw_flow?.modules.length}
+								Step
+								<span class="font-medium text-gray-900">
+									{i + 1}
+								</span>
+								out of
+								<span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
+								{#if job.raw_flow?.modules[i]?.summary}
+									: <span class="font-medium text-gray-900">
+										{job.raw_flow?.modules[i]?.summary ?? ''}
+									</span>
 								{/if}
+							{:else}
+								<h3>Failure module</h3>
+							{/if}
+						</h3>
+						<div class="line w-8 h-10" />
+						<li class="w-full border border-gray-600 p-6 space-y-2 bg-blue-50/50">
+							{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
+								<svelte:self
+									bind:retry_status
+									bind:flowState
+									bind:flowModuleStates={localFlowModuleStates}
+									jobId={mod.job}
+									flowJobIds={mod.flow_jobs
+										? {
+												moduleId: mod.id,
+												flowJobs: mod.flow_jobs
+										  }
+										: undefined}
+									on:jobsLoaded={(e) => {
+										if (mod.id && (mod.flow_jobs ?? []).length == 0) {
+											if (flowState && flowState[mod.id]) {
+												flowState[mod.id].previewResult = e.detail.result
+												flowState[mod.id].previewArgs = e.detail.args
+											}
+											if (e.detail.type == 'QueuedJob') {
+												localFlowModuleStates[mod.id] = {
+													type: FlowStatusModule.type.IN_PROGRESS,
+													logs: e.detail.logs,
+													parent_module: mod['parent_module']
+												}
+											} else {
+												localFlowModuleStates[mod.id] = {
+													type: e.detail.success
+														? FlowStatusModule.type.SUCCESS
+														: FlowStatusModule.type.FAILURE,
+													logs: e.detail.logs,
+													result: e.detail.result,
+													job_id: e.detail.id,
+													parent_module: mod['parent_module'],
+													iteration_total: mod.iterator?.itered?.length
+													// retries: flowState?.raw_flow
+												}
+											}
+										}
+									}}
+								/>
+							{:else}
+								<ModuleStatus
+									type={mod.type}
+									scheduled_for={localFlowModuleStates?.[mod.id ?? '']?.scheduled_for}
+								/>
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		</div>
+	</div>
+	{#if job.raw_flow && !isListJob}
+		<div class="{selected != 'graph' ? 'hidden' : ''} mt-4">
+			<div class="grid grid-cols-3 border border-gray-300">
+				<div class="col-span-2 bg-gray-50">
+					<div class="flex flex-col">
+						{#each Object.values(retry_status) as count}
+							<span class="text-sm">
+								Retry in progress, # of failed attempts: {count}
 							</span>
+						{/each}
+					</div>
+
+					<FlowGraph
+						flowModuleStates={localFlowModuleStates}
+						on:click={(e) => {
+							if (e.detail.id) {
+								selectedNode = e.detail.id
+							} else if (e.detail == 'Result') {
+								selectedNode = 'end'
+							} else if (e.detail == 'Input') {
+								selectedNode = 'start'
+							}
+						}}
+						modules={job.raw_flow?.modules ?? []}
+						failureModule={job.raw_flow?.failure_module}
+					/>
+				</div>
+				<div class="border-l border-gray-400 pt-1 overflow-hidden">
+					{#if selectedNode}
+						{@const node = localFlowModuleStates[selectedNode]}
+						{#if selectedNode == 'end'}
+							<FlowJobResult noBorder col result={job['result'] ?? {}} logs={job.logs ?? ''} />
+						{:else if selectedNode == 'start'}
+							{#if job.args}
+								<div class="p-2">
+									<JobArgs args={job.args} />
+								</div>
+							{:else}
+								<p class="p-2">No arguments</p>
+							{/if}
+						{:else if node}
+							<div class="px-2 flex gap-2 min-w-0 ">
+								<ModuleStatus type={node.type} scheduled_for={node['scheduled_for']} />
+								{#if node.job_id}
+									<div class="truncate"
+										><div class=" text-gray-900 whitespace-nowrap truncate">
+											<span class="font-bold">Job Id</span>
+											<a
+												rel="noreferrer"
+												target="_blank"
+												href="/run/{node.job_id ?? ''}?workspace={job?.workspace_id}"
+											>
+												{truncateRev(node.job_id ?? '', 10) ?? ''}
+											</a>
+										</div>
+									</div>
+								{/if}
+							</div>
+							<FlowJobResult noBorder col result={node.result ?? {}} logs={node.logs ?? ''} />
+						{:else}
+							<p class="p-2 text-gray-600 italic"
+								>The execution of this node has no information attached to it. The job likely did
+								not run yet</p
+							>
 						{/if}
-					</li>
-				{/each}
-			</ul>
-		{/if}
-	</div>
+					{:else}<p class="p-2 text-gray-600 italic">Select a node to see its details here</p>{/if}
+				</div>
+			</div>
+		</div>
+	{/if}
 {:else}
 	Job loading...
 {/if}

package/components/FlowStatusViewer.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { Job } from '../gen';
 import type { FlowState } from './flows/flowState';
+import { type GraphModuleState } from './graph';
 declare const __propDef: {
     props: {
         jobId: string;
@@ -10,6 +11,8 @@ declare const __propDef: {
             flowJobs: string[];
         } | undefined;
         job?: Job | undefined;
+        flowModuleStates?: Record<string, GraphModuleState> | undefined;
+        retry_status?: Record<string, number> | undefined;
     };
     events: {
         jobsLoaded: CustomEvent<any>;
@@ -18,9 +21,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowStatusViewerProps = typeof __propDef.props;
-export declare type FlowStatusViewerEvents = typeof __propDef.events;
-export declare type FlowStatusViewerSlots = typeof __propDef.slots;
+export type FlowStatusViewerProps = typeof __propDef.props;
+export type FlowStatusViewerEvents = typeof __propDef.events;
+export type FlowStatusViewerSlots = typeof __propDef.slots;
 export default class FlowStatusViewer extends SvelteComponentTyped<FlowStatusViewerProps, FlowStatusViewerEvents, FlowStatusViewerSlots> {
 }
 export {};

package/components/FlowViewer.svelte

@@ -4,14 +4,11 @@ import { faClipboard } from '@fortawesome/free-solid-svg-icons';
 import { Tab, Tabs, TabContent, Button } from './common';
 import SchemaViewer from './SchemaViewer.svelte';
 import FieldHeader from './FieldHeader.svelte';
-import SvelteMarkdown from 'svelte-markdown';
-import { copyToClipboard, scriptPathToHref } from '../utils';
-import { FlowGraph } from './graph';
-import HighlightCode from './HighlightCode.svelte';
-import InputTransformsViewer from './InputTransformsViewer.svelte';
-import IconedPath from './IconedPath.svelte';
+import { copyToClipboard } from '../utils';
+import FlowGraphViewer from './FlowGraphViewer.svelte';
 export let flow;
 export let initialOpen = undefined;
+export let noSide = false;
 $: flowFiltered = {
     summary: flow.summary,
     description: flow.description,
@@ -20,7 +17,6 @@ $: flowFiltered = {
 };
 export let tab = 'ui';
 export let noSummary = false;
-let stepDetail = undefined;
 let open = {};
 if (initialOpen) {
     open[initialOpen] = true;
@@ -40,7 +36,7 @@ function toAny(x) {
 			<div class="flow-root w-full pb-4">
 				{#if !noSummary}
 					<h2 class="my-4">{flow.summary}</h2>
-					<SvelteMarkdown source={flow.description ?? ''} />
+					<div>{flow.description ?? ''}</div>
 				{/if}
 
 				<p class="font-black text-lg w-full my-4">
@@ -68,78 +64,7 @@ function toAny(x) {
 				{:else}
 					<div class="text-gray-700 text-xs italic mb-4">No inputs</div>
 				{/if}
-				<div class="pr-40 flex flex-col">
-					<div class="mt-5 h-full w-full border border-gray-700">
-						<FlowGraph
-							modules={flow?.value?.modules}
-							failureModule={flow?.value?.failure_module}
-							on:click={(e) => (stepDetail = e.detail)}
-						/>
-					</div>
-					<div class="w-full border-l border-r border-b border-gray-700 min-h-[150px] p-2">
-						{#if stepDetail == undefined}
-							<span class="font-black text-lg w-full my-4">
-								<span>Click on a step to see its details</span>
-							</span>
-						{:else}
-							<div class="font-black text-lg w-full mb-2 "
-								>Step {stepDetail.id ?? ''}<span class="ml-2 font-normal"
-									>{stepDetail.summary || ''}</span
-								></div
-							>
-							{#if stepDetail.value.type == 'identity'}
-								<div> An identity step return as output its input </div>
-							{:else if stepDetail.value.type == 'rawscript'}
-								<div class="text-2xs mb-4">
-									<h3>Step Inputs</h3>
-									<InputTransformsViewer
-										inputTransforms={stepDetail?.value?.input_transforms ??
-											stepDetail?.input_transforms ??
-											{}}
-									/>
-								</div>
-
-								<h3>Code</h3>
-								<HighlightCode
-									language={stepDetail.value.language}
-									code={stepDetail.value.content}
-								/>
-							{:else if stepDetail.value.type == 'script'}
-								<div class="mb-4">
-									<a
-										rel="noreferrer"
-										target="_blank"
-										href={scriptPathToHref(stepDetail?.value?.path ?? '')}
-										class=""
-									>
-										<IconedPath path={stepDetail?.value?.path ?? ''} />
-									</a>
-								</div>
-								<div class="text-2xs mb-4">
-									<h3>Step Inputs</h3>
-									<InputTransformsViewer
-										inputTransforms={stepDetail?.value?.input_transforms ??
-											stepDetail?.input_transforms ??
-											{}}
-									/>
-								</div>
-								{#if stepDetail.value.path.startsWith('hub/')}
-									<div class="mt-6">
-										<h3>Code</h3>
-										<iframe
-											class="w-full h-full  text-sm"
-											title="embedded script from hub"
-											frameborder="0"
-											src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(
-												4
-											)}"
-										/>
-									</div>
-								{/if}
-							{/if}
-						{/if}
-					</div>
-				</div>
+				<FlowGraphViewer {noSide} {flow} overflowAuto />
 			</div>
 		</TabContent>
 		<TabContent value="json">

package/components/FlowViewer.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
             schema?: any;
         };
         initialOpen?: number | undefined;
+        noSide?: boolean | undefined;
         tab?: "json" | "schema" | "ui" | undefined;
         noSummary?: boolean | undefined;
     };
@@ -17,9 +18,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowViewerProps = typeof __propDef.props;
-export declare type FlowViewerEvents = typeof __propDef.events;
-export declare type FlowViewerSlots = typeof __propDef.slots;
+export type FlowViewerProps = typeof __propDef.props;
+export type FlowViewerEvents = typeof __propDef.events;
+export type FlowViewerSlots = typeof __propDef.slots;
 export default class FlowViewer extends SvelteComponentTyped<FlowViewerProps, FlowViewerEvents, FlowViewerSlots> {
 }
 export {};

package/components/GroupModal.svelte.d.ts

@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type GroupModalProps = typeof __propDef.props;
-export declare type GroupModalEvents = typeof __propDef.events;
-export declare type GroupModalSlots = typeof __propDef.slots;
+export type GroupModalProps = typeof __propDef.props;
+export type GroupModalEvents = typeof __propDef.events;
+export type GroupModalSlots = typeof __propDef.slots;
 export default class GroupModal extends SvelteComponentTyped<GroupModalProps, GroupModalEvents, GroupModalSlots> {
     get openDrawer(): (newName: string) => void;
 }

package/components/HighlightCode.svelte

@@ -22,4 +22,4 @@ function getLang(lang) {
 $: lang = getLang(language);
 </script>
 
-<Highlight language={lang} {code} />
+<Highlight className="nowrap {$$props.class}" language={lang} {code} />