windmill-components 1.504.0 → 1.504.2

package/package/components/common/OnChange.svelte

@@ -0,0 +1,18 @@
+<!--
+	Useful to listen to changes on a list without recomputing the whole list
+	when a single item changes
+-->
+
+<script lang="ts" generics="T">import { untrack } from 'svelte';
+let { key, onChange, runFirstEffect = false } = $props();
+let isFirstRun = true;
+$effect(() => {
+    key;
+    if (isFirstRun) {
+        isFirstRun = false;
+        if (!runFirstEffect)
+            return;
+    }
+    untrack(() => onChange());
+});
+</script>

package/package/components/common/OnChange.svelte.d.ts

@@ -0,0 +1,21 @@
+declare class __sveltets_Render<T> {
+    props(): {
+        key: T;
+        onChange: () => void;
+        runFirstEffect?: boolean;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const OnChange: $$IsomorphicComponent;
+type OnChange<T> = InstanceType<typeof OnChange<T>>;
+export default OnChange;

package/package/components/common/button/UndoRedo.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import { Redo, Undo } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import { Button } from '..';
-let { undoProps = {}, redoProps = {} } = $props();
+export let undoProps = {};
+export let redoProps = {};
 const dispatch = createEventDispatcher();
 </script>
 
@@ -28,5 +29,4 @@ const dispatch = createEventDispatcher();
 	>
 		<Redo size={14} />
 	</Button>
-	
 </div>

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

@@ -1,7 +1,3 @@
-interface Props {
-    undoProps?: Record<string, any>;
-    redoProps?: Record<string, any>;
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -15,11 +11,14 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const UndoRedo: $$__sveltets_2_IsomorphicComponent<Props, {
+declare const UndoRedo: $$__sveltets_2_IsomorphicComponent<{
+    undoProps?: Record<string, any>;
+    redoProps?: Record<string, any>;
+}, {
     undo: CustomEvent<any>;
     redo: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, string>;
 type UndoRedo = InstanceType<typeof UndoRedo>;
 export default UndoRedo;

package/package/components/copilot/chat/script/core.js

@@ -62,8 +62,8 @@ wmill.runScriptAsync(path: string, args?: Record<string, any>): Promise<string>
 wmill.waitJob(jobId: string): Promise<any> // Wait for job completion and get result
 
 // S3 file operations (if S3 is configured)
-wmill.loadS3File(s3object: S3Object): Promise<Uint8Array> // Load file content from S3
-wmill.writeS3File(s3object: S3Object, content: string | Blob): Promise<S3Object> // Write file to S3
+wmill.loadS3File(s3object: S3Object | string): Promise<Uint8Array> // Load file content from S3
+wmill.writeS3File(s3object: S3Object | string, content: string | Blob): Promise<S3Object> // Write file to S3
 
 // Flow operations
 wmill.setFlowUserState(key: string, value: any): Promise<void> // Set flow user state
@@ -97,8 +97,8 @@ wmill.run_script_async(path: str, args: dict = None, scheduled_in_secs: int = No
 wmill.wait_job(job_id: str, timeout = None) -> Any  // Wait for job completion and get result
 
 // S3 file operations (if S3 is configured)
-wmill.load_s3_file(s3object: S3Object, s3_resource_path: str = None) -> bytes  // Load file content from S3
-wmill.write_s3_file(s3object: S3Object, file_content: bytes, s3_resource_path: str = None) -> S3Object  // Write file to S3
+wmill.load_s3_file(s3object: S3Object | str, s3_resource_path: str = None) -> bytes  // Load file content from S3
+wmill.write_s3_file(s3object: S3Object | str, file_content: bytes, s3_resource_path: str = None) -> S3Object  // Write file to S3
 
 // Flow operations  
 wmill.run_flow_async(path: str, args: dict = None) -> str  // Run flow asynchronously

package/package/components/custom_ui.d.ts

@@ -69,6 +69,7 @@ export type EditorBarUi = {
     library?: boolean;
     useVsCode?: boolean;
     diffMode?: boolean;
+    s3object?: boolean;
 };
 export type EditableSchemaFormUi = {
     jsonOnly?: boolean;

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

@@ -45,8 +45,10 @@ import { JobService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { checkIfParentLoop } from '../utils';
 import ModulePreviewResultViewer from '../../ModulePreviewResultViewer.svelte';
-import { refreshStateStore } from '../../../svelte5Utils.svelte';
+import { refreshStateStore, usePromise } from '../../../svelte5Utils.svelte';
 import { getStepHistoryLoaderContext } from '../../stepHistoryLoader.svelte';
+import AssetsDropdownButton from '../../assets/AssetsDropdownButton.svelte';
+import { inferAssets } from '../../../infer';
 const { selectedId, currentEditor, previewArgs, flowStateStore, flowStore, pathStore, saveDraft, customUi, executionCount } = getContext('FlowEditorContext');
 let { flowModule = $bindable(), failureModule = false, preprocessorModule = false, parentModule = $bindable(), previousModule, scriptKind = 'script', scriptTemplate = 'script', noEditor, enableAi, savedModule = undefined, forceTestTab = false, highlightArg = undefined } = $props();
 let workspaceScriptTag = $state(undefined);
@@ -220,6 +222,15 @@ $effect(() => {
         }, 100);
     }
 });
+let assets = usePromise(async () => flowModule.value.type === 'rawscript'
+    ? await inferAssets(flowModule.value.language, flowModule.value.content)
+    : undefined, { clearValueOnRefresh: false, loadInit: false });
+$effect(() => {
+    if (flowModule.value.type !== 'rawscript')
+        return;
+    [flowModule.value.content, flowModule.value.language];
+    untrack(() => assets.refresh());
+});
 let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.value.language : undefined);
 </script>
 
@@ -327,6 +338,14 @@ let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.v
 							{#if flowModule.value.type === 'rawscript'}
 								{#if !noEditor}
 									{#key flowModule.id}
+										<div class="absolute top-2 right-4 z-10 flex flex-row gap-2">
+											{#if assets.value?.length}
+												<AssetsDropdownButton
+													assets={assets.value}
+													bind:fallbackAccessTypes={flowModule.value.asset_fallback_access_types}
+												/>
+											{/if}
+										</div>
 										<Editor
 											loadAsync
 											folding

package/package/components/flows/types.d.ts

@@ -1,5 +1,5 @@
 import type { OpenFlow } from '../../gen';
-import type { History } from '../../history';
+import type { History } from '../../history.svelte';
 import type { Writable } from 'svelte/store';
 import type ScriptEditorDrawer from './content/ScriptEditorDrawer.svelte';
 import type { FlowState } from './flowState';
@@ -8,6 +8,10 @@ import type Editor from '../Editor.svelte';
 import type SimpleEditor from '../SimpleEditor.svelte';
 import type { StateStore } from '../../utils';
 import type { TestSteps } from './testSteps.svelte';
+import type { Asset, AssetWithAccessType } from '../assets/lib';
+import type S3FilePicker from '../S3FilePicker.svelte';
+import type DbManagerDrawer from '../DBManagerDrawer.svelte';
+import type ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
 import type { ModulesTestStates } from '../modulesTest.svelte';
 export type FlowInput = Record<string, {
     flowStepWarnings?: Record<string, {
@@ -64,3 +68,13 @@ export type FlowEditorContext = {
     modulesTestStates: ModulesTestStates;
     outputPickerOpenFns: Record<string, () => void>;
 };
+export type FlowGraphAssetContext = StateStore<{
+    selectedAsset: Asset | undefined;
+    assetsMap: Record<string, AssetWithAccessType[]>;
+    s3FilePicker: S3FilePicker | undefined;
+    dbManagerDrawer: DbManagerDrawer | undefined;
+    resourceEditorDrawer: ResourceEditorDrawer | undefined;
+    resourceMetadataCache: Record<string, {
+        resource_type?: string;
+    } | undefined>;
+}>;

package/package/components/graph/FlowGraphV2.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { FlowService } from '../../gen';
+<script lang="ts">import { AssetService, FlowService, ResourceService } from '../../gen';
 import { NODE } from '.';
 import { getContext, onDestroy, setContext, tick, untrack } from 'svelte';
 import { get, writable } from 'svelte/store';
@@ -18,7 +18,7 @@ import { sugiyama, dagStratify, coordCenter, decrossTwoLayer, decrossOpt } from
 import { Expand } from 'lucide-svelte';
 import Toggle from '../Toggle.svelte';
 import DataflowEdge from './renderers/edges/DataflowEdge.svelte';
-import { encodeState } from '../../utils';
+import { encodeState, readFieldsRecursively } from '../../utils';
 import BranchOneStart from './renderers/nodes/BranchOneStart.svelte';
 import NoBranchNode from './renderers/nodes/NoBranchNode.svelte';
 import HiddenBaseEdge from './renderers/edges/HiddenBaseEdge.svelte';
@@ -31,12 +31,21 @@ import { workspaceStore } from '../../stores';
 import SubflowBound from './renderers/nodes/SubflowBound.svelte';
 import { deepEqual } from 'fast-equals';
 import ViewportResizer from './ViewportResizer.svelte';
+import AssetNode, { computeAssetNodes } from './renderers/nodes/AssetNode.svelte';
+import { getAllModules } from '../flows/flowExplorer';
+import { inferAssets } from '../../infer';
+import OnChange from '../common/OnChange.svelte';
+import S3FilePicker from '../S3FilePicker.svelte';
+import DbManagerDrawer from '../DBManagerDrawer.svelte';
+import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
+import { assetEq } from '../assets/lib';
+import AssetsOverflowedNode from './renderers/nodes/AssetsOverflowedNode.svelte';
 let useDataflow = writable(false);
 const triggerContext = getContext('TriggerContext');
 let fullWidth = 0;
 let width = $state(0);
 let simplifiableFlow = $state(undefined);
-let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, selectedId = writable(undefined), path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moving = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = writable({}), flowHasChanged = false } = $props();
+let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, selectedId = writable(undefined), path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moving = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), inputAssets, onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = writable({}), flowHasChanged = false } = $props();
 setContext('FlowGraphContext', { selectedId, useDataflow });
 if (triggerContext && allowSimplifiedPoll) {
     if (isSimplifiable(modules)) {
@@ -46,6 +55,66 @@ if (triggerContext && allowSimplifiedPoll) {
         computeSimplifiableFlow(modules ?? [], value ?? false);
     });
 }
+const flowGraphAssetsCtx = $state({
+    val: {
+        assetsMap: inputAssets ? { Input: inputAssets } : {},
+        selectedAsset: undefined,
+        dbManagerDrawer: undefined,
+        s3FilePicker: undefined,
+        resourceEditorDrawer: undefined,
+        resourceMetadataCache: {}
+    }
+});
+setContext('FlowGraphAssetContext', flowGraphAssetsCtx);
+const assetsMap = $derived(flowGraphAssetsCtx.val.assetsMap);
+$effect(() => {
+    if (inputAssets)
+        flowGraphAssetsCtx.val.assetsMap.Input = inputAssets;
+});
+// Fetch resource metadata for the ExploreAssetButton
+const resMetadataCache = $derived(flowGraphAssetsCtx.val.resourceMetadataCache);
+$effect(() => {
+    for (const asset of Object.values(assetsMap ?? []).flatMap((x) => x)) {
+        if (asset.kind !== 'resource' || asset.path in resMetadataCache)
+            continue;
+        resMetadataCache[asset.path] = undefined; // avoid fetching multiple times because of async
+        ResourceService.getResource({ path: asset.path, workspace: $workspaceStore }).then((r) => (resMetadataCache[asset.path] = { resource_type: r.resource_type }));
+    }
+});
+// Fetch transitive assets (path scripts and flows)
+$effect(() => {
+    if (!$workspaceStore)
+        return;
+    let usages = [];
+    let modIds = [];
+    for (const mod of getAllModules(modules)) {
+        if (mod.id in assetsMap)
+            continue;
+        assetsMap[mod.id] = []; // avoid fetching multiple times because of async
+        if (mod.value.type === 'flow' || mod.value.type === 'script') {
+            usages.push({ path: mod.value.path, kind: mod.value.type });
+            modIds.push(mod.id);
+        }
+    }
+    if (usages.length) {
+        AssetService.listAssetsByUsage({
+            workspace: $workspaceStore,
+            requestBody: { usages }
+        }).then((result) => {
+            result.forEach((assets, idx) => {
+                assetsMap[modIds[idx]] = assets;
+            });
+        });
+    }
+});
+// Prune assetsMap to only contain assets that are actually used
+$effect(() => {
+    const allModules = new Set(getAllModules(modules).map((mod) => mod.id));
+    for (const modId in assetsMap) {
+        if (modId !== 'Input' && !allModules.has(modId))
+            delete assetsMap[modId];
+    }
+});
 function computeSimplifiableFlow(modules, simplifiedFlow) {
     const isSimplif = isSimplifiable(modules);
     simplifiableFlow = isSimplif ? { simplifiedFlow } : undefined;
@@ -61,7 +130,7 @@ function onModulesChange(modules) {
 let lastNodes = undefined;
 function layoutNodes(nodes) {
     let lastResult = lastNodes?.[1];
-    if (lastResult && deepEqual(nodes, lastNodes?.[0])) {
+    if (lastResult && nodes === lastNodes?.[0]) {
         return lastResult;
     }
     let seenId = [];
@@ -220,8 +289,11 @@ async function updateStores() {
     }
     let newGraph = graph;
     newGraph.nodes.sort((a, b) => b.id.localeCompare(a.id));
-    nodes = layoutNodes(newGraph.nodes);
-    edges = newGraph.edges;
+    [nodes, edges] = computeAssetNodes(layoutNodes(newGraph.nodes), newGraph.edges, assetsMap, {
+        moving,
+        eventHandlers: eventHandler,
+        disableAi
+    });
     await tick();
     height = Math.max(...nodes.map((n) => n.position.y + NODE.height + 100), minHeight);
 }
@@ -239,7 +311,9 @@ const nodeTypes = {
     branchOneEnd: BranchOneEndNode,
     subflowBound: SubflowBound,
     noBranch: NoBranchNode,
-    trigger: TriggersNode
+    trigger: TriggersNode,
+    asset: AssetNode,
+    assetsOverflowed: AssetsOverflowedNode
 };
 const edgeTypes = {
     edge: BaseEdge,
@@ -281,7 +355,9 @@ let graph = $derived.by(() => {
 });
 $effect(() => {
     ;
-    (graph || allowSimplifiedPoll) && untrack(() => updateStores());
+    [graph, allowSimplifiedPoll];
+    readFieldsRecursively(assetsMap);
+    untrack(() => updateStores());
 });
 let showDataflow = $derived($selectedId != undefined &&
     !$selectedId.startsWith('constants') &&
@@ -405,6 +481,33 @@ export function isNodeVisible(nodeId) {
 	{/if}
 </div>
 
+{#each getAllModules(modules) as mod (mod.id)}
+	{#if mod.value.type === 'rawscript'}
+		{@const v = mod.value}
+		<OnChange
+			key={[v.content, v.asset_fallback_access_types]}
+			runFirstEffect
+			onChange={() =>
+				inferAssets(v.language, v.content)
+					.then((assets) => {
+						for (const override of v.asset_fallback_access_types ?? []) {
+							assets = assets.map((asset) => {
+								if (assetEq(asset, override) && !asset.access_type)
+									return { ...asset, access_type: override.access_type }
+								return asset
+							})
+						}
+						if (assetsMap && !deepEqual(assetsMap[mod.id], assets)) assetsMap[mod.id] = assets
+					})
+					.catch((e) => {})}
+		/>
+	{/if}
+{/each}
+
+<S3FilePicker bind:this={flowGraphAssetsCtx.val.s3FilePicker} readOnlyMode />
+<DbManagerDrawer bind:this={flowGraphAssetsCtx.val.dbManagerDrawer} />
+<ResourceEditorDrawer bind:this={flowGraphAssetsCtx.val.resourceEditorDrawer} />
+
 <style>
 	:global(.svelte-flow__handle) {
 		opacity: 0;

package/package/components/graph/FlowGraphV2.svelte.d.ts

@@ -3,6 +3,7 @@ import { type GraphModuleState } from '.';
 import { type Writable } from 'svelte/store';
 import '@xyflow/svelte/dist/base.css';
 import { type InlineScript, type InsertKind, type onSelectedIteration } from './graphBuilder.svelte';
+import { type AssetWithAccessType } from '../assets/lib';
 interface Props {
     success?: boolean | undefined;
     modules?: FlowModule[] | undefined;
@@ -28,6 +29,7 @@ interface Props {
     editMode?: boolean;
     allowSimplifiedPoll?: boolean;
     expandedSubflows?: Record<string, FlowModule[]>;
+    inputAssets?: AssetWithAccessType[];
     isOwner?: boolean;
     isRunning?: boolean;
     individualStepTests?: boolean;

package/package/components/graph/graphBuilder.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { FlowModule, Job, RawScript, Script } from '../../gen';
 import { type Edge } from '@xyflow/svelte';
 import type { GraphModuleState } from './model';
+import type { AssetWithAccessType } from '../assets/lib';
 import type { Writable } from 'svelte/store';
 export type InsertKind = 'script' | 'forloop' | 'whileloop' | 'branchone' | 'branchall' | 'flow' | 'trigger' | 'approval' | 'end';
 export type InlineScript = {
@@ -70,7 +71,7 @@ export type NodeLayout = {
     id: string;
     parentIds?: string[];
 } & FlowNode;
-export type FlowNode = InputN | ModuleN | BranchAllStartN | BranchAllEndN | ForLoopEndN | ForLoopStartN | ResultN | WhileLoopStartN | WhileLoopEndN | BranchOneStartN | BranchOneEndN | SubflowBoundN | NoBranchN | TriggerN;
+export type FlowNode = InputN | ModuleN | BranchAllStartN | BranchAllEndN | ForLoopEndN | ForLoopStartN | ResultN | WhileLoopStartN | WhileLoopEndN | BranchOneStartN | BranchOneEndN | SubflowBoundN | NoBranchN | TriggerN | AssetN | AssetsOverflowedN;
 export type InputN = {
     type: 'input2';
     data: {
@@ -232,6 +233,18 @@ export type TriggerN = {
         disableAi: boolean;
     };
 };
+export type AssetN = {
+    type: 'asset';
+    data: {
+        asset: AssetWithAccessType;
+    };
+};
+export type AssetsOverflowedN = {
+    type: 'assetsOverflowed';
+    data: {
+        overflowedAssets: AssetWithAccessType[];
+    };
+};
 export declare function graphBuilder(modules: FlowModule[] | undefined, extra: {
     disableAi: boolean;
     insertable: boolean;

package/package/components/graph/renderers/edges/BaseEdge.svelte

@@ -4,14 +4,18 @@ import { ClipboardCopy, Hourglass } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { getStraightLinePath } from '../utils';
 import { twMerge } from 'tailwind-merge';
+import {} from '../../../flows/types';
+import { assetDisplaysAsOutputInFlowGraph, NODE_WITH_WRITE_ASSET_Y_OFFSET } from '../nodes/AssetNode.svelte';
 import { workspaceStore } from '../../../../stores';
 import FlowStatusWaitingForEvents from '../../../FlowStatusWaitingForEvents.svelte';
 const { useDataflow } = getContext('FlowGraphContext');
+const flowGraphAssetCtx = getContext('FlowGraphAssetContext');
 let { 
 // id,
 sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, markerEnd, 
 // style,
 data } = $props();
+const shouldOffsetInsertButtonDueToAssetNode = flowGraphAssetCtx?.val.assetsMap?.[data.sourceId]?.some(assetDisplaysAsOutputInFlowGraph);
 let [edgePath] = $derived(getBezierPath({
     sourceX,
     sourceY: targetY - sourceY > 100 ? targetY - 100 : sourceY,
@@ -31,7 +35,12 @@ let waitingForEvents = $derived(data?.flowModuleStates?.[data.targetId]?.type ==
 const suspendStatus = $derived(data?.suspendStatus);
 </script>
 
-<EdgeLabel x={sourceX} y={sourceY + 28} class="base-edge" style="">
+<EdgeLabel
+	x={sourceX}
+	y={sourceY + 28 + (shouldOffsetInsertButtonDueToAssetNode ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)}
+	class="base-edge"
+	style=""
+>
 	{#if data?.insertable && !$useDataflow && !data?.moving && !waitingForEvents}
 		<div
 			class={twMerge('edgeButtonContainer nodrag nopan top-0')}

package/package/components/graph/renderers/edges/EmptyEdge.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import { getBezierPath, BaseEdge } from '@xyflow/svelte';
 import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
 export let sourceX;
 export let sourceY;
 export let sourcePosition;
@@ -7,6 +8,7 @@ export let targetX;
 export let targetY;
 export let targetPosition;
 export let markerEnd = undefined;
+export let data = {};
 const { useDataflow } = getContext('FlowGraphContext');
 $: [edgePath] = getBezierPath({
     sourceX,
@@ -19,4 +21,8 @@ $: [edgePath] = getBezierPath({
 });
 </script>
 
-<BaseEdge path={edgePath} {markerEnd} class={$useDataflow ? 'hidden' : ''} />
+<BaseEdge
+	path={edgePath}
+	{markerEnd}
+	class={twMerge($useDataflow ? 'hidden' : '', data.class ?? '')}
+/>

package/package/components/graph/renderers/edges/EmptyEdge.svelte.d.ts

@@ -20,6 +20,9 @@ declare const EmptyEdge: $$__sveltets_2_IsomorphicComponent<{
     targetY: number;
     targetPosition: Position;
     markerEnd?: string | undefined;
+    data?: {
+        class?: string;
+    };
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;