windmill-components 1.623.2 → 1.655.0

package/package/components/graph/renderers/nodes/AssetsOverflowedNode.svelte

@@ -8,7 +8,7 @@ import AssetNode from './AssetNode.svelte';
 import { getContext } from 'svelte';
 import { assetEq } from '../../../assets/lib';
 import { getNodeColorClasses } from '../../util';
-let { data } = $props();
+let { data, id } = $props();
 const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
 let isOpen = $state(false);
 let includesSelected = $derived(data.overflowedAssets.some((asset) => assetEq(flowGraphAssetsCtx?.val.selectedAsset, asset)));
@@ -26,7 +26,7 @@ $effect(() => {
 const colors = $derived(getNodeColorClasses(undefined, includesSelected));
 </script>
 
-<NodeWrapper>
+<NodeWrapper nodeId={id}>
 	{#snippet children({ darkMode })}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<Popover
@@ -42,18 +42,22 @@ const colors = $derived(getNodeColorClasses(undefined, includesSelected));
 			)}
 			placement="top"
 		>
-			<svelte:fragment slot="trigger">
-				+{data.overflowedAssets.length}
-			</svelte:fragment>
-			<svelte:fragment slot="content">
-				<ul>
-					{#each data.overflowedAssets as asset}
-						<li class="w-48">
-							<AssetNode data={{ asset }} />
-						</li>
-					{/each}
-				</ul>
-			</svelte:fragment>
+			{#snippet trigger()}
+					
+					+{data.overflowedAssets.length}
+				
+					{/snippet}
+			{#snippet content()}
+					
+					<ul>
+						{#each data.overflowedAssets as asset}
+							<li class="w-48">
+								<AssetNode data={{ asset, displayedAccessType: data.displayedAccessType }} />
+							</li>
+						{/each}
+					</ul>
+				
+					{/snippet}
 		</Popover>
 	{/snippet}
 </NodeWrapper>

package/package/components/graph/renderers/nodes/AssetsOverflowedNode.svelte.d.ts

@@ -1,6 +1,7 @@
 import { type AssetsOverflowedN } from '../../graphBuilder.svelte';
 interface Props {
     data: AssetsOverflowedN['data'];
+    id?: string;
 }
 declare const AssetsOverflowedNode: import("svelte").Component<Props, {}, "">;
 type AssetsOverflowedNode = ReturnType<typeof AssetsOverflowedNode>;

package/package/components/graph/renderers/nodes/BranchAllEndNode.svelte

@@ -5,7 +5,7 @@ let { data, id } = $props();
 const { selectionManager } = getGraphContext();
 </script>
 
-<NodeWrapper offset={data.offset} enableSourceHandle enableTargetHandle>
+<NodeWrapper enableSourceHandle enableTargetHandle nodeId={id}>
 	{#snippet children({ darkMode })}
 		<VirtualItem
 			label={'Collect result from all branches'}

package/package/components/graph/renderers/nodes/BranchAllStart.svelte

@@ -7,7 +7,7 @@ let { data, id } = $props();
 const { selectionManager } = getGraphContext();
 </script>
 
-<NodeWrapper offset={data.offset}>
+<NodeWrapper nodeId={id}>
 	{#snippet children({ darkMode })}
 		<VirtualItem
 			label={data.label}

package/package/components/graph/renderers/nodes/BranchOneStart.svelte

@@ -7,7 +7,7 @@ const { selectionManager } = getGraphContext();
 let { data, id } = $props();
 </script>
 
-<NodeWrapper offset={data.offset}>
+<NodeWrapper nodeId={id}>
 	{#snippet children({ darkMode })}
 		<VirtualItem
 			label={data.label}

package/package/components/graph/renderers/nodes/ForLoopEndNode.svelte

@@ -5,7 +5,7 @@ let { data, id } = $props();
 const { selectionManager } = getGraphContext();
 </script>
 
-<NodeWrapper offset={data.offset}>
+<NodeWrapper nodeId={id}>
 	{#snippet children({ darkMode })}
 		{#if data.simplifiedTriggerView}
 			<VirtualItem

package/package/components/graph/renderers/nodes/ForLoopStartNode.svelte

@@ -37,7 +37,7 @@ function isSelectedDescendant(module, selectedId) {
 let filteredInput = $derived(filterIterFromInput($pickablePropertiesFiltered?.flow_input));
 </script>
 
-<NodeWrapper offset={data.offset}>
+<NodeWrapper nodeId={id}>
 	{#snippet children({ darkMode })}
 		<VirtualItem
 			label={data.simplifiedTriggerView ? 'For each new event' : 'Do one iteration'}

package/package/components/graph/renderers/nodes/ModuleNode.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import MapItem from '../../../flows/map/MapItem.svelte';
-import { GitBranchPlus } from 'lucide-svelte';
+import { GitBranchPlus, Move, Copy, Trash2, StickyNote } from 'lucide-svelte';
 import NodeWrapper from './NodeWrapper.svelte';
 import { jobToGraphModuleState } from '../../../modulesTest.svelte';
 import { getNoteEditorContext } from '../../noteEditor.svelte';
-import { addGroupNoteContextMenuItem } from '../../noteUtils.svelte';
+import { isMac } from '../../../../utils';
 let { data } = $props();
 // Get NoteEditor context for group note creation
 const noteEditorContext = getNoteEditorContext();
@@ -28,10 +28,48 @@ let type = $derived.by(() => {
     return typ;
 });
 // Define context menu items
-const contextMenuItems = $derived(data.editMode ? [addGroupNoteContextMenuItem(data.id, noteEditorContext)] : []);
+let noteDisabled = $derived(!noteEditorContext?.noteEditor ||
+    (noteEditorContext?.noteEditor?.isNodeOnlyMemberOfGroupNote(data.id) ?? false));
+let isPreprocessor = $derived(data.id === 'preprocessor');
+const menuItems = $derived(data.editMode
+    ? [
+        ...(isPreprocessor
+            ? []
+            : [
+                {
+                    displayName: 'Move',
+                    icon: Move,
+                    action: () => data.eventHandlers.move({ id: data.id })
+                },
+                {
+                    displayName: 'Duplicate',
+                    icon: Copy,
+                    action: () => data.eventHandlers.duplicate({ id: data.id })
+                }
+            ]),
+        {
+            displayName: 'Delete',
+            icon: Trash2,
+            type: 'delete',
+            shortcut: isMac() ? '⌫' : 'Del',
+            action: () => data.eventHandlers.delete({ id: data.id }, '')
+        },
+        {
+            displayName: 'Add note',
+            icon: StickyNote,
+            separatorTop: true,
+            disabled: noteDisabled,
+            action: () => {
+                if (noteEditorContext?.noteEditor && !noteDisabled) {
+                    noteEditorContext.noteEditor.createGroupNote([data.id]);
+                }
+            }
+        }
+    ]
+    : []);
 </script>
 
-<NodeWrapper offset={data.offset} {contextMenuItems}>
+<NodeWrapper {menuItems}>
 	{#snippet children({ darkMode })}
 		<MapItem
 			moduleId={data.id}
@@ -39,8 +77,9 @@ const contextMenuItems = $derived(data.editMode ? [addGroupNoteContextMenuItem(d
 			insertable={data.insertable}
 			editMode={data.editMode}
 			moduleAction={data.moduleAction}
+			{menuItems}
 			annotation={flowJobs &&
-			(data.module.value.type === 'forloopflow' || data.module.value.type === 'whileloopflow')
+			(data.module?.value?.type === 'forloopflow' || data.module?.value?.type === 'whileloopflow')
 				? 'Iteration: ' +
 					((state?.selectedForloopIndex ?? 0) >= 0
 						? (state?.selectedForloopIndex ?? 0) + 1
@@ -49,7 +88,6 @@ const contextMenuItems = $derived(data.editMode ? [addGroupNoteContextMenuItem(d
 					(state?.iteration_total ?? '?')
 				: ''}
 			nodeState={state?.skipped ? '_Skipped' : type}
-			moving={data.moving}
 			duration_ms={state?.duration_ms}
 			retries={state?.retries}
 			{flowJobs}
@@ -78,15 +116,18 @@ const contextMenuItems = $derived(data.editMode ? [addGroupNoteContextMenuItem(d
 			onEditInput={data.eventHandlers.editInput}
 			flowJob={data.flowJob}
 			isOwner={data.isOwner}
-			maximizeSubflow={data.module.value.type == 'flow' && 'path' in data.module.value
+			maximizeSubflow={data.module?.value?.type == 'flow' && 'path' in data.module.value
 				? () => {
-						data.eventHandlers.expandSubflow(data.id, data.module.value['path'])
+						const path = data.module?.value && 'path' in data.module.value ? data.module.value['path'] as string : undefined
+						if (path) {
+							data.eventHandlers.expandSubflow(data.id, path)
+						}
 					}
 				: undefined}
 		/>
 
 		<div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 z-10">
-			{#if (data.module.value.type === 'branchall' || data.module.value.type === 'branchone') && data.insertable}
+			{#if (data.module?.value?.type === 'branchall' || data.module?.value?.type === 'branchone') && data.insertable}
 				<button
 					title="Add branch"
 					class="rounded text-secondary border hover:bg-surface-hover bg-surface p-1"

package/package/components/graph/renderers/nodes/NewAIToolNode.svelte

@@ -3,11 +3,15 @@ import InsertModuleInner from '../../../flows/map/InsertModuleInner.svelte';
 import { Plus } from 'lucide-svelte';
 import Popover from '../../../meltComponents/Popover.svelte';
 import { Button } from '../../../common';
+import { getGraphContext } from '../../graphContext';
 let funcDesc = $state('');
 let { data } = $props();
+const { moveManager } = getGraphContext();
+let isMoving = $derived(!!moveManager?.dragging || !!moveManager?.movingModuleId);
 let open = $state(false);
 </script>
 
+{#if !isMoving}
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <Popover
 	bind:isOpen={open}
@@ -93,6 +97,15 @@ let open = $state(false);
 				})
 				close()
 			}}
+			on:pickAiAgentTool={(e) => {
+				data.eventHandlers.insert({
+					index: -1,
+					agentId: data.agentModuleId,
+					kind: 'aiAgentTool'
+				})
+				close()
+			}}
 		/>
 	{/snippet}
 </Popover>
+{/if}

package/package/components/graph/renderers/nodes/NoBranchNode.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import VirtualItem from '../../../flows/map/VirtualItem.svelte';
 import NodeWrapper from './NodeWrapper.svelte';
-let { data } = $props();
+let { data, id } = $props();
 </script>
 
-<NodeWrapper offset={data.offset} enableSourceHandle enableTargetHandle>
+<NodeWrapper enableSourceHandle enableTargetHandle nodeId={id}>
 	{#snippet children({ darkMode })}
 		<VirtualItem
 			label={data.label ?? 'No branches'}

package/package/components/graph/renderers/nodes/NoBranchNode.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { NoBranchN } from '../../graphBuilder.svelte';
 interface Props {
     data: NoBranchN['data'];
+    id: string;
 }
 declare const NoBranchNode: import("svelte").Component<Props, {}, "">;
 type NoBranchNode = ReturnType<typeof NoBranchNode>;

package/package/components/graph/renderers/nodes/NodeWrapper.svelte

@@ -2,22 +2,38 @@
 import { Handle, Position } from '@xyflow/svelte';
 import { twMerge } from 'tailwind-merge';
 import ContextMenu, {} from '../../../common/contextmenu/ContextMenu.svelte';
-let { enableSourceHandle = true, enableTargetHandle = true, offset = 0, wrapperClass = '', contextMenuItems = undefined, children } = $props();
+import { getGraphContext } from '../../graphContext';
+let { enableSourceHandle = true, enableTargetHandle = true, wrapperClass = '', contextMenuItems = undefined, menuItems = undefined, nodeId = undefined, children } = $props();
+let resolvedContextMenuItems = $derived(contextMenuItems ??
+    menuItems?.flatMap((item) => [
+        ...(item.separatorTop ? [{ id: `${item.displayName}-divider`, label: '', divider: true }] : []),
+        {
+            id: item.displayName,
+            label: item.displayName,
+            icon: item.icon,
+            disabled: item.disabled,
+            type: item.type,
+            shortcut: item.shortcut,
+            onClick: item.action
+        }
+    ]));
+const { moveManager } = getGraphContext();
+let faded = $derived(nodeId != null && (moveManager?.draggedNodeIds?.has(nodeId) ?? false));
 let darkMode = $state(false);
 </script>
 
 <DarkModeObserver bind:darkMode />
 
-{#if contextMenuItems && contextMenuItems.length > 0}
-	<ContextMenu items={contextMenuItems}>
-		<div class={twMerge('relative rounded-md', wrapperClass)} style={`margin-left: ${offset}px;`}>
+{#if resolvedContextMenuItems && resolvedContextMenuItems.length > 0}
+	<ContextMenu items={resolvedContextMenuItems}>
+		<div class={twMerge('relative rounded-md', faded ? 'opacity-30' : '', wrapperClass)}>
 			{@render children?.({ darkMode })}
 		</div>
 
 		{@render handles()}
 	</ContextMenu>
 {:else}
-	<div class={twMerge('relative rounded-md', wrapperClass)} style={`margin-left: ${offset}px;`}>
+	<div class={twMerge('relative rounded-md', faded ? 'opacity-30' : '', wrapperClass)}>
 		{@render children?.({ darkMode })}
 	</div>
 
@@ -30,7 +46,6 @@ let darkMode = $state(false);
 			type="source"
 			isConnectable={false}
 			position={Position.Bottom}
-			style={`margin-left: ${offset / 2}px;`}
 		/>
 	{/if}
 
@@ -39,7 +54,6 @@ let darkMode = $state(false);
 			type="target"
 			isConnectable={false}
 			position={Position.Top}
-			style={`margin-left: ${offset / 2}px;`}
 		/>
 	{/if}
 {/snippet}

package/package/components/graph/renderers/nodes/NodeWrapper.svelte.d.ts

@@ -1,10 +1,13 @@
 import { type ContextMenuItem } from '../../../common/contextmenu/ContextMenu.svelte';
+import type { Item } from '../../../../utils';
 interface Props {
     enableSourceHandle?: boolean;
     enableTargetHandle?: boolean;
-    offset?: number;
     wrapperClass?: string;
     contextMenuItems?: ContextMenuItem[];
+    menuItems?: Item[];
+    /** xyflow node ID — used to fade nodes that are part of a moving subflow */
+    nodeId?: string;
     children?: import('svelte').Snippet<[any]>;
 }
 declare const NodeWrapper: import("svelte").Component<Props, {}, "">;

package/package/components/graph/renderers/nodes/NoteNode.svelte

@@ -9,7 +9,7 @@ import { Button } from '../../../common';
 import { getNoteEditorContext } from '../../noteEditor.svelte';
 import { getGraphContext } from '../../graphContext';
 import { clickOutside } from '../../../../utils';
-import { tick } from 'svelte';
+import { tick, untrack } from 'svelte';
 let { data, dragging = false } = $props();
 // Get SvelteFlow utilities for accessing node position
 const { getNode } = useSvelteFlow();
@@ -25,7 +25,7 @@ const currentNode = $derived(getNode(data.noteId));
 let textareaElement = $state(undefined);
 let editMode = $state(false);
 let hovering = $state(false);
-let textContent = $state(data.text ?? '');
+let textContent = $state(untrack(() => data).text ?? '');
 let containerHeight = $state(0);
 // Use data props directly - they're kept in sync by NoteManager observer
 const color = $derived(data.color ?? DEFAULT_NOTE_COLOR);

package/package/components/graph/renderers/nodes/SubflowBound.svelte

@@ -7,7 +7,7 @@ let { data, id } = $props();
 const { selectionManager } = getGraphContext();
 </script>
 
-<NodeWrapper offset={data.offset}>
+<NodeWrapper>
 	{#snippet children({ darkMode })}
 		<VirtualItem
 			label={data.label}

package/package/components/graph/renderers/nodes/branchOneEndNode.svelte

@@ -5,7 +5,7 @@ const { selectionManager } = getGraphContext();
 let { data, id } = $props();
 </script>
 
-<NodeWrapper offset={data.offset}>
+<NodeWrapper nodeId={id}>
 	{#snippet children({ darkMode })}
 		<VirtualItem
 			label={'Collect result from chosen branch'}

package/package/components/graph/renderers/triggers/TriggerButton.svelte

@@ -1,13 +1,15 @@
-<script lang="ts">import { twMerge } from 'tailwind-merge';
-export let selected;
+<script lang="ts">import { createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+import { twMerge } from 'tailwind-merge';
+let { selected, children } = $props();
 </script>
 
 <button
-	on:click
+	onclick={bubble('click')}
 	class={twMerge(
 		'hover:bg-surface-hover rounded-md border text-xs w-[23px] h-[23px] relative center-center cursor-pointer bg-surface',
 		selected ? 'outline-1 outline-tertiary outline' : 'outline-0'
 	)}
 >
-	<slot />
+	{@render children?.()}
 </button>

package/package/components/graph/renderers/triggers/TriggerButton.svelte.d.ts

@@ -1,31 +1,7 @@
-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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const TriggerButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     selected: boolean;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type TriggerButton = InstanceType<typeof TriggerButton>;
+    children?: import('svelte').Snippet;
+}
+declare const TriggerButton: import("svelte").Component<Props, {}, "">;
+type TriggerButton = ReturnType<typeof TriggerButton>;
 export default TriggerButton;

package/package/components/graph/renderers/triggers/TriggerCount.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { Loader2 } from 'lucide-svelte';
-export let count = undefined;
+let { count = undefined } = $props();
 </script>
 
 {#if count && count > 0}

package/package/components/graph/renderers/triggers/TriggerCount.svelte.d.ts

@@ -1,20 +1,6 @@
-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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const TriggerCount: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     count?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TriggerCount = InstanceType<typeof TriggerCount>;
+}
+declare const TriggerCount: import("svelte").Component<Props, {}, "">;
+type TriggerCount = ReturnType<typeof TriggerCount>;
 export default TriggerCount;

package/package/components/graph/renderers/triggers/TriggersBadge.svelte

@@ -12,6 +12,7 @@ import SchedulePollIcon from '../../../icons/SchedulePollIcon.svelte';
 import TriggerLabel from '../../../triggers/TriggerLabel.svelte';
 import CountBadge from '../../../common/badge/CountBadge.svelte';
 import NextcloudIcon from '../../../icons/NextcloudIcon.svelte';
+import GoogleIcon from '../../../icons/GoogleIcon.svelte';
 const { triggersState, triggersCount } = getContext('TriggerContext');
 let { selected, showOnlyWithCount, 
 // @ts-ignore - This is an output-only prop used with bind:
@@ -34,7 +35,8 @@ let triggerTypeConfig = $derived(() => {
         gcp: { icon: GoogleCloudIcon, countKey: 'gcp_count', disabled: !$enterpriseLicense },
         poll: { icon: SchedulePollIcon },
         cli: { icon: Terminal },
-        nextcloud: { icon: NextcloudIcon, countKey: 'nextcloud_count' }
+        nextcloud: { icon: NextcloudIcon, countKey: 'nextcloud_count' },
+        google: { icon: GoogleIcon, countKey: 'google_count' }
     };
     // Add native trigger services that are available
     for (const { service, icon } of availableNativeServices) {
@@ -57,7 +59,8 @@ let allTypes = $derived([
     'email',
     'poll',
     'cli',
-    'nextcloud'
+    'nextcloud',
+    'google'
 ]);
 function camelCaseToWords(s) {
     const result = s.replace(/([A-Z])/g, ' $1');
@@ -122,11 +125,7 @@ $effect(() => {
 				type === 'email' ||
 				type === 'cli' ||
 				(triggersGrouped[type] && triggersGrouped[type].length === 1)}
-			<Tooltip
-				disablePopup={menuOpen}
-				placement={vertical ? 'right' : 'bottom'}
-				on:click={(e) => e.stopPropagation()}
-			>
+			<Tooltip disablePopup={menuOpen} placement={vertical ? 'right' : 'bottom'}>
 				{#snippet text()}
 					{camelCaseToWords(type)}
 				{/snippet}
@@ -212,7 +211,7 @@ $effect(() => {
 			isSelected ? 'bg-surface-accent-selected text-accent border-border-selected' : '',
 			small ? 'w-[23px] h-[23px]' : 'p-2'
 		)}
-		on:click={(e) => {
+		onClick={(e) => {
 			e.stopPropagation()
 			e.preventDefault()
 			if (singleItem) {

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

@@ -9,6 +9,7 @@ export declare class SelectionManager {
     set mode(mode: 'normal' | 'rect-select');
     get selectedIds(): any[];
     selectNodes(nodes: Node[]): void;
+    selectByIds(ids: string[]): void;
     clearSelection(): void;
     isNodeSelected(nodeId: string): boolean;
     handleKeyDown(event: KeyboardEvent): void;

package/package/components/graph/selectionUtils.svelte.js

@@ -70,11 +70,21 @@ export class SelectionManager {
             return;
         }
         // If the new selection is the same as the current selection, do nothing
-        if (JSON.stringify(nodes) === JSON.stringify($state.snapshot(this.#selectedNodes))) {
+        const newIds = nodes.map((n) => n.id).join(',');
+        const currentIds = this.#selectedNodes.map((n) => n.id).join(',');
+        if (newIds === currentIds) {
             return;
         }
         this.#selectedNodes = nodes;
     }
+    // Select multiple nodes by their IDs
+    selectByIds(ids) {
+        if (!ids || ids.length === 0) {
+            this.clearSelection();
+            return;
+        }
+        this.#selectedNodes = ids.map((id) => ({ id }));
+    }
     // Clear all selections
     clearSelection() {
         this.#selectedNodes = [{ id: 'settings' }];

package/package/components/graph/util.d.ts

@@ -22,7 +22,7 @@ export type FlowNodeState = FlowStatusModule['type'] | '_VirtualItem' | '_Skippe
 export declare function aiActionToNodeState(action: AIModuleAction): FlowNodeState;
 export declare function getNodeColorClasses(state: FlowNodeState, selected: boolean): FlowNodeColorClasses;
 /**
- * Calculate the bounding box for a collection of nodes, accounting for CSS offset
+ * Calculate the bounding box for a collection of nodes.
  * Also includes expanded subflow nodes when calculating bounds for subflow containers
  * @param containedIds - Array of node IDs to calculate bounds for
  * @param allNodes - Array of all nodes to search for expanded subflow nodes
@@ -34,9 +34,6 @@ export declare function calculateNodesBoundsWithOffset(containedIds: string[], a
         x: number;
         y: number;
     };
-    data?: {
-        offset?: number;
-    };
     type: string;
 }>): {
     minX: number;

package/package/components/graph/util.js

@@ -184,7 +184,7 @@ export function getNodeColorClasses(state, selected) {
     return r;
 }
 /**
- * Calculate the bounding box for a collection of nodes, accounting for CSS offset
+ * Calculate the bounding box for a collection of nodes.
  * Also includes expanded subflow nodes when calculating bounds for subflow containers
  * @param containedIds - Array of node IDs to calculate bounds for
  * @param allNodes - Array of all nodes to search for expanded subflow nodes
@@ -194,13 +194,10 @@ export function calculateNodesBoundsWithOffset(containedIds, allNodes) {
     // Find related subflow nodes
     const nodesToCalculate = getAllRelatedSubflowNodes(containedIds, allNodes);
     return nodesToCalculate.reduce((acc, node) => {
-        // Account for CSS offset applied by NodeWrapper
-        const cssOffset = node.data?.offset ?? 0;
-        const visualX = node.position.x + cssOffset;
         return {
-            minX: Math.min(acc.minX, visualX),
+            minX: Math.min(acc.minX, node.position.x),
             minY: Math.min(acc.minY, node.position.y),
-            maxX: Math.max(acc.maxX, visualX + NODE.width),
+            maxX: Math.max(acc.maxX, node.position.x + NODE.width),
             maxY: Math.max(acc.maxY, node.position.y + NODE.height)
         };
     }, {

package/package/components/graph/wacToFlow.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Detect whether a script is a workflow-as-code entry point.
+ */
+export declare function isWorkflowAsCode(code: string, language: string): boolean;

package/package/components/graph/wacToFlow.js

@@ -0,0 +1,14 @@
+/**
+ * Detect whether a script is a workflow-as-code entry point.
+ */
+export function isWorkflowAsCode(code, language) {
+    if (language === 'python3') {
+        return /^\s*@workflow\s*$/m.test(code) || /from\s+wmill\s+import.*workflow/.test(code);
+    }
+    if (language === 'bun' || language === 'deno') {
+        return (/workflow\s*\(/.test(code) &&
+            /task\s*\(/.test(code) &&
+            /import.*(?:workflow|task).*from\s+['"]windmill-client(?:@[^'"]*)?['"]/.test(code));
+    }
+    return false;
+}

package/package/components/home/FlowIcon.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">import BarsStaggered from '../icons/BarsStaggered.svelte';
 import { twMerge } from 'tailwind-merge';
-export let color = 'black';
+let { color = 'black', class: className = '' } = $props();
 </script>
 
-<div class={twMerge(`text-${color}`, $$props.class)}>
+<div class={twMerge(`text-${color}`, className)}>
 	<BarsStaggered size={14} />
 </div>