@motiadev/workbench 0.0.6 → 0.0.7-build.20250529212805

package/dist/src/publicComponents/node-props.d.ts

@@ -1,5 +1,5 @@
-import { EventNodeData, ApiNodeData, NoopNodeData } from '../views/flow/nodes/nodes.types';
-export type BaseNodeProps = EventNodeProps | NoopNodeProps | ApiNodeProps;
+import { EventNodeData, ApiNodeData, NoopNodeData, CronNodeData } from '../views/flow/nodes/nodes.types';
+export type BaseNodeProps = EventNodeProps | NoopNodeProps | ApiNodeProps | CronNodeProps;
 export type EventNodeProps = {
     data: EventNodeData;
 };
@@ -9,4 +9,6 @@ export type NoopNodeProps = {
 export type ApiNodeProps = {
     data: ApiNodeData;
 };
-//# sourceMappingURL=node-props.d.ts.map
+export type CronNodeProps = {
+    data: CronNodeData;
+};

package/dist/src/publicComponents/noop-node.d.ts

@@ -5,4 +5,3 @@ type Props = PropsWithChildren<{
 }>;
 export declare const NoopNode: ({ data, children }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=noop-node.d.ts.map

package/dist/src/publicComponents/noop-node.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BaseNode } from './base-node';
 export const NoopNode = ({ data, children }) => {
-    return (_jsxs(BaseNode, { variant: "noop", title: data.name, disableSourceHandle: !data.emits?.length, disableTargetHandle: !data.subscribes?.length, children: [data.description && _jsx("div", { className: "text-sm max-w-[300px] text-white/60", children: data.description }), children] }));
+    return (_jsxs(BaseNode, { variant: "noop", title: data.name, disableSourceHandle: !data.virtualEmits.length, disableTargetHandle: !data.subscribes?.length, children: [data.description && _jsx("div", { className: "text-sm max-w-[300px] text-muted-foreground", children: data.description }), children] }));
 };

package/dist/src/publicComponents/subscribe.d.ts

@@ -1,5 +1,4 @@
-import { EventNodeData } from '../views/flow/nodes/nodes.types';
+import React from 'react';
 export declare const Subscribe: React.FC<{
-    data: EventNodeData;
+    subscribes: string[];
 }>;
-//# sourceMappingURL=subscribe.d.ts.map

package/dist/src/publicComponents/subscribe.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Eye } from 'lucide-react';
-export const Subscribe = ({ data }) => {
-    return (_jsx(_Fragment, { children: data.subscribes.map((subscribe) => (_jsxs("div", { className: "flex gap-2 items-center text-xs text-white/60", "data-testid": `subscribes__${subscribe}`, children: [_jsx(Eye, { className: "w-3 h-3 text-white/40" }), _jsx("div", { className: "font-mono tracking-wider", children: subscribe })] }, subscribe))) }));
+export const Subscribe = ({ subscribes }) => {
+    return (_jsx(_Fragment, { children: subscribes.map((subscribe) => (_jsxs("div", { className: "flex gap-2 items-center text-xs text-muted-foreground", "data-testid": `subscribes__${subscribe}`, children: [_jsx(Eye, { className: "w-4 h-4 text-muted-foreground/60" }), _jsx("div", { className: "font-mono tracking-wider", children: subscribe })] }, subscribe))) }));
 };

package/dist/src/route-wrapper.d.ts

@@ -1,4 +1,2 @@
-export declare const RouteWrapper: ({ children }: {
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=route-wrapper.d.ts.map
+import React, { PropsWithChildren } from 'react';
+export declare const RouteWrapper: React.FC<PropsWithChildren>;

package/dist/src/route-wrapper.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AppSidebar } from './components/app-sidebar';
-import { SidebarProvider } from './components/ui/sidebar';
-export const RouteWrapper = ({ children }) => (_jsxs(SidebarProvider, { children: [_jsx(AppSidebar, {}), children] }));
+import { ReactFlowProvider } from '@xyflow/react';
+export const RouteWrapper = ({ children }) => (_jsx("div", { className: "flex flex-row bg-background text-foreground", children: _jsxs(ReactFlowProvider, { children: [_jsx(AppSidebar, {}), _jsx("div", { className: "flex-1", children: children })] }) }));

package/dist/src/routes/endpoints-page.d.ts

@@ -0,0 +1 @@
+export declare const EndpointsPage: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/routes/endpoints-page.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Endpoints } from '../components/endpoints/endpoints';
+export const EndpointsPage = () => {
+    return _jsx(Endpoints, {});
+};

package/dist/src/routes/flow.d.ts

@@ -0,0 +1 @@
+export declare const Flow: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/routes/flow.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FlowView } from '@/views/flow/flow-view';
+import { useCallback, useEffect, useState } from 'react';
+import { useParams } from 'react-router';
+export const Flow = () => {
+    const { id } = useParams();
+    const flowId = id;
+    const [flow, setFlow] = useState(null);
+    const [flowConfig, setFlowConfig] = useState(null);
+    const fetchFlow = useCallback(() => {
+        Promise.all([fetch(`/flows/${flowId}`), fetch(`/flows/${flowId}/config`)])
+            .then(([flowRes, configRes]) => Promise.all([flowRes.json(), configRes.json()]))
+            .then(([flow, config]) => {
+            setFlow(flow);
+            setFlowConfig(config);
+        });
+    }, [flowId]);
+    useEffect(fetchFlow, [fetchFlow]);
+    if (!flow || flow.error)
+        return (_jsx("div", { className: "w-full h-screen bg-background flex flex-col items-center justify-center", children: _jsx("p", { children: flow?.error }) }));
+    return (_jsx("div", { className: "w-full h-screen bg-background", children: _jsx(FlowView, { flow: flow, flowConfig: flowConfig }) }));
+};

package/dist/src/routes/index.d.ts

@@ -1,2 +1 @@
-export declare const Route: import("@tanstack/react-router").Route<import("@tanstack/react-router").RootRoute<undefined, {}, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, undefined, unknown, unknown>, "/", "/", "/", "/", undefined, Record<never, string>, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, undefined, unknown>;
-//# sourceMappingURL=index.d.ts.map
+export declare const Index: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/routes/index.js

@@ -1,8 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createFileRoute } from '@tanstack/react-router';
-export const Route = createFileRoute('/')({
-    component: Index,
-});
-function Index() {
-    return (_jsx("div", { className: "flex items-center justify-center w-full h-screen", children: _jsx("p", { className: "text-gray-500", children: "Select a flow" }) }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../components/ui/button';
+export const Index = () => {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center w-full h-screen gap-10 bg-gradient-to-r from-background via-background to-muted", children: [_jsx("h1", { className: "text-5xl font-extrabold max-w-[600px] text-center text-foreground", children: "Code-first framework for intelligent workflows" }), _jsx("div", { className: "max-w-[600px] text-center text-xl font-medium text-muted-foreground", children: "Write in any language. Automate anything. From AI agents to backend automation, Motia runs event-driven workflows with zero overhead." }), _jsx("div", { className: "p-[1px] min-w-[600px] rounded-lg shadow-lg border border-border", children: _jsx("div", { className: "rounded-lg bg-card p-8 font-semibold text-xl min-h-[100px] flex items-center", children: _jsxs("div", { className: "flex items-center gap-2 font-mono", children: [_jsx("span", { className: "text-primary", children: "$" }), _jsx("span", { className: "text-card-foreground", children: "npx motia generate step" })] }) }) }), _jsxs("div", { className: "flex flex-col gap-8 items-center", children: [_jsx("span", { className: "text-muted-foreground text-xl", children: "or" }), _jsx("a", { href: "https://motia.dev/docs", target: "_blank", children: _jsx(Button, { size: "lg", className: "text-xl py-6 px-8", children: "Read developer docs" }) })] })] }));
+};

package/dist/src/routes/logs-page.d.ts

@@ -0,0 +1 @@
+export declare const LogsPage: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/routes/logs-page.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Logs } from '../components/logs/logs';
+import { useLogs } from '../stores/use-logs';
+import { useEffect } from 'react';
+export const LogsPage = () => {
+    const setUnreadLogsCount = useLogs((state) => state.setUnreadLogsCount);
+    useEffect(() => {
+        setUnreadLogsCount(0);
+        return () => setUnreadLogsCount(0);
+    }, [setUnreadLogsCount]);
+    return (_jsxs("div", { className: "w-full h-screen overflow-hidden bg-background text-foreground", children: [_jsxs("header", { className: "p-4 border-b border-border", children: [_jsx("h1", { className: "text-2xl font-bold text-foreground", children: "Logs" }), _jsx("span", { className: "text-sm text-muted-foreground", children: "Check all logs saved locally" })] }), _jsx(Logs, {})] }));
+};

package/dist/src/routes/states-page.d.ts

@@ -0,0 +1 @@
+export declare const StatesPage: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/routes/states-page.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { States } from '../components/states/states';
+export const StatesPage = () => {
+    return (_jsxs("div", { className: "w-full h-screen overflow-hidden bg-background text-foreground", children: [_jsxs("header", { className: "p-4 border-b border-border", children: [_jsx("h1", { className: "text-xl font-bold text-foreground", children: "State details" }), _jsx("span", { className: "text-sm text-muted-foreground", children: "Check all states saved locally along with all fields" })] }), _jsx(States, {})] }));
+};

package/dist/src/stores/use-logs.d.ts

@@ -10,6 +10,7 @@ export type LogsState = {
     logs: Log[];
     addLog: (log: Log) => void;
     resetLogs: () => void;
+    unreadLogsCount: number;
+    setUnreadLogsCount: (count: number) => void;
 };
-export declare const useLogs: import("zustand").UseBoundStore<import("zustand").StoreApi<LogsState>>;
-//# sourceMappingURL=use-logs.d.ts.map
+export declare function useLogs<SelectorOutput = LogsState>(selector?: (state: LogsState) => SelectorOutput): SelectorOutput;

package/dist/src/stores/use-logs.js

@@ -1,6 +1,52 @@
-import { create } from 'zustand';
-export const useLogs = create()((set) => ({
-    logs: [],
-    addLog: (log) => set((state) => ({ ...state, logs: [...state.logs, log] })),
-    resetLogs: () => set({ logs: [] }),
-}));
+import { useSyncExternalStore, useCallback } from 'react';
+const listeners = new Set();
+let currentLogs = [];
+let currentUnreadLogsCount = 0;
+let memoizedSnapshot;
+const updateMemoizedSnapshot = () => {
+    memoizedSnapshot = {
+        logs: currentLogs,
+        unreadLogsCount: currentUnreadLogsCount,
+        addLog: storeActions.addLog,
+        resetLogs: storeActions.resetLogs,
+        setUnreadLogsCount: storeActions.setUnreadLogsCount,
+    };
+};
+const notify = () => {
+    listeners.forEach((listener) => listener());
+};
+const storeActions = {
+    addLog: (log) => {
+        currentLogs = [log, ...currentLogs];
+        currentUnreadLogsCount += 1;
+        updateMemoizedSnapshot();
+        notify();
+    },
+    resetLogs: () => {
+        if (currentLogs.length === 0 && currentUnreadLogsCount === 0) {
+            return;
+        }
+        currentLogs = [];
+        currentUnreadLogsCount = 0;
+        updateMemoizedSnapshot();
+        notify();
+    },
+    setUnreadLogsCount: (count) => {
+        if (currentUnreadLogsCount === count) {
+            return;
+        }
+        currentUnreadLogsCount = count;
+        updateMemoizedSnapshot();
+        notify();
+    },
+};
+updateMemoizedSnapshot();
+// Stable subscribe function so React doesn't unnecessarily tear down the subscription
+const subscribe = (onStoreChange) => {
+    listeners.add(onStoreChange);
+    return () => listeners.delete(onStoreChange);
+};
+export function useLogs(selector = (state) => state) {
+    const getSnapshot = useCallback(() => selector(memoizedSnapshot), [selector]);
+    return useSyncExternalStore(subscribe, getSnapshot);
+}

package/dist/src/views/flow/arrow-head.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 type Props = {
-    color: string;
+    color?: string;
     id: string;
+    className?: string;
 };
 export declare const ArrowHead: React.FC<Props>;
 export {};
-//# sourceMappingURL=arrow-head.d.ts.map

package/dist/src/views/flow/arrow-head.js

@@ -1,2 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ArrowHead = (props) => (_jsxs("marker", { id: props.id, viewBox: "-5 -5 10 10", markerUnits: "strokeWidth", markerWidth: "10", markerHeight: "10", children: [_jsx("line", { x1: 0, y1: 0, x2: 2, y2: -2, stroke: props.color, strokeWidth: "1", strokeOpacity: "1", strokeLinecap: "round" }), _jsx("line", { x1: -2, y1: -2, x2: 0, y2: 0, stroke: props.color, strokeWidth: "1", strokeOpacity: "1", strokeLinecap: "round" })] }));
+export const ArrowHead = (props) => {
+    // Use CSS custom property for theme-aware coloring, fallback to provided color
+    const strokeColor = props.color || 'var(--arrow-color, #B3B3B3)';
+    return (_jsxs("marker", { id: props.id, viewBox: "-5 -5 10 10", markerUnits: "strokeWidth", markerWidth: "10", markerHeight: "10", className: props.className, children: [_jsx("line", { x1: 0, y1: 0, x2: 2, y2: -2, stroke: strokeColor, strokeWidth: "1", strokeOpacity: "1", strokeLinecap: "round" }), _jsx("line", { x1: -2, y1: -2, x2: 0, y2: 0, stroke: strokeColor, strokeWidth: "1", strokeOpacity: "1", strokeLinecap: "round" })] }));
+};

package/dist/src/views/flow/base-edge.d.ts

@@ -1,4 +1,3 @@
 import { EdgeProps } from '@xyflow/react';
 import React from 'react';
 export declare const BaseEdge: React.FC<EdgeProps>;
-//# sourceMappingURL=base-edge.d.ts.map

package/dist/src/views/flow/base-edge.js

@@ -1,8 +1,23 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BaseEdge as BaseReactFlowEdge, getSmoothStepPath } from '@xyflow/react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BaseEdge as BaseReactFlowEdge, EdgeLabelRenderer, getSmoothStepPath } from '@xyflow/react';
+import { cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+const labelVariants = cva('absolute pointer-events-all text-cs border p-1 px-2', {
+    variants: {
+        color: {
+            default: 'border-[#b3b3b3] bg-[#060014] text-gray-100 font-semibold border-solid rounded-full',
+            conditional: 'bg-amber-300 border-amber-950 text-amber-950 border-solid font-semibold italic rounded-lg',
+        },
+    },
+    defaultVariants: {
+        color: 'default',
+    },
+});
 export const BaseEdge = (props) => {
     const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data } = props;
-    const [edgePath] = getSmoothStepPath({
+    const label = data?.label;
+    const labelVariant = data?.labelVariant;
+    const [edgePath, labelX, labelY] = getSmoothStepPath({
         sourceX,
         sourceY,
         targetX,
@@ -12,11 +27,11 @@ export const BaseEdge = (props) => {
         borderRadius: 20,
         offset: 10,
     });
-    return (_jsx(BaseReactFlowEdge, { path: edgePath, style: {
-            stroke: data?.variant === 'virtual' ? 'rgb(147, 169, 197)' : 'rgb(133, 176, 132)',
-            strokeWidth: 0.5,
-            shapeRendering: 'geometricPrecision',
-            fill: 'none',
-            mixBlendMode: 'screen',
-        }, className: "edge-animated" }));
+    return (_jsxs(_Fragment, { children: [_jsx(BaseReactFlowEdge, { path: edgePath, style: {
+                    stroke: data?.variant === 'virtual' ? 'rgb(111, 111, 111)' : '#0094FF',
+                    strokeWidth: 2,
+                    shapeRendering: 'geometricPrecision',
+                    fill: 'none',
+                    mixBlendMode: 'screen',
+                }, className: "edge-animated" }), label && (_jsx(EdgeLabelRenderer, { children: _jsx("div", { className: cn(labelVariants({ color: labelVariant })), style: { transform: `translateX(-50%) translateY(-50%) translate(${labelX}px, ${labelY}px)` }, children: _jsx("div", { className: "text-xs font-mono", children: label }) }) }))] }));
 };

package/dist/src/views/flow/flow-loader.d.ts

@@ -1,2 +1 @@
 export declare const FlowLoader: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=flow-loader.d.ts.map

package/dist/src/views/flow/flow-loader.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const FlowLoader = () => {
-    return _jsx("div", { className: "absolute z-10 inset-0 w-full h-full bg-[#060911]" });
+    return _jsx("div", { className: "absolute z-10 inset-0 w-full h-full bg-background" });
 };

package/dist/src/views/flow/flow-view.d.ts

@@ -1,8 +1,13 @@
+import React from 'react';
+import { EdgeData, NodeData } from './nodes/nodes.types';
+import { FlowConfigResponse, FlowResponse } from './hooks/use-get-flow-state';
+import { Node as ReactFlowNode, Edge as ReactFlowEdge } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { FlowResponse } from './hooks/use-get-flow-state';
+export type FlowNode = ReactFlowNode<NodeData>;
+export type FlowEdge = ReactFlowEdge<EdgeData>;
 type Props = {
     flow: FlowResponse;
+    flowConfig: FlowConfigResponse;
 };
 export declare const FlowView: React.FC<Props>;
 export {};
-//# sourceMappingURL=flow-view.d.ts.map

package/dist/src/views/flow/flow-view.js

@@ -1,40 +1,64 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Background, BackgroundVariant, ReactFlow } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-import { BaseEdge } from './base-edge';
+import { LogConsole } from '@/components/logs/log-console';
+import { Background, BackgroundVariant, ReactFlow, useReactFlow } from '@xyflow/react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ArrowHead } from './arrow-head';
-import { useGetFlowState } from './hooks/use-get-flow-state';
-import { useCallback, useEffect, useState } from 'react';
-import { NodeOrganizer } from './node-organizer';
+import { BaseEdge } from './base-edge';
 import { FlowLoader } from './flow-loader';
-import { useLogListener } from '@/hooks/use-log-listener';
-import { LogConsole } from '@/components/log-console';
+import { useGetFlowState } from './hooks/use-get-flow-state';
 import { Legend } from './legend';
+import { useSaveWorkflowConfig } from './hooks/use-save-workflow-config';
+import { NodeOrganizer } from './node-organizer';
+import { useDebounced } from '@/hooks/use-debounced';
+import '@xyflow/react/dist/style.css';
 const edgeTypes = {
     base: BaseEdge,
 };
-export const FlowView = ({ flow }) => {
-    const { nodes, edges, onNodesChange, onEdgesChange, nodeTypes } = useGetFlowState(flow);
+export const FlowView = ({ flow, flowConfig }) => {
+    const { nodes, edges, onNodesChange, onEdgesChange, nodeTypes } = useGetFlowState(flow, flowConfig);
     const [initialized, setInitialized] = useState(false);
+    const { getNodes } = useReactFlow();
+    const { saveConfig } = useSaveWorkflowConfig(flow.id);
     const [hoveredType, setHoveredType] = useState(null);
-    useLogListener();
     useEffect(() => setInitialized(false), [flow]);
     const onInitialized = useCallback(() => {
         setTimeout(() => setInitialized(true), 10);
     }, []);
-    const highlightClass = (nodeType) => {
+    const getClassName = useCallback((nodeType) => {
         if (!hoveredType)
             return '';
-        return nodeType === hoveredType
-            ? 'shadow-[0_0_15px_rgba(255,255,255,0.15)] border border-white/30 scale-[1.02] transition-all duration-300'
-            : 'opacity-30 transition-all duration-300';
-    };
-    const nodesWithHighlights = nodes.map((node) => ({
+        if (nodeType) {
+            return nodeType === hoveredType
+                ? 'border border-border scale-[1.02] transition-all duration-300'
+                : 'opacity-30 transition-all duration-300';
+        }
+        // If no nodeType is provided, this is an edge
+        return 'opacity-30 transition-all duration-300';
+    }, [hoveredType]);
+    const nodesWithHighlights = useMemo(() => nodes.map((node) => ({
         ...node,
-        className: highlightClass(node.data.type), // Access type from `data.type`
-    }));
+        className: getClassName(node.data.type),
+    })), [nodes, getClassName]);
+    const edgesWithHighlights = useMemo(() => edges.map((edge) => ({
+        ...edge,
+        className: getClassName(), // No argument means it's an edge
+    })), [edges, getClassName]);
+    const saveFlowConfig = useCallback(() => {
+        const steps = getNodes().reduce((acc, node) => {
+            if (node.data.filePath) {
+                acc[node.data.filePath] = node.position;
+            }
+            return acc;
+        }, {});
+        return saveConfig(steps);
+    }, [saveConfig, getNodes]);
+    const debouncedSaveConfig = useDebounced(saveFlowConfig);
+    const onNodesChangeHandler = useCallback((changes) => {
+        onNodesChange(changes);
+        debouncedSaveConfig();
+    }, [onNodesChange, debouncedSaveConfig]);
     if (!nodeTypes) {
         return null;
     }
-    return (_jsxs("div", { className: "w-full h-full relative bg-black", children: [!initialized && _jsx(FlowLoader, {}), _jsx(Legend, { onHover: setHoveredType }), _jsxs(ReactFlow, { nodes: nodesWithHighlights, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 20, size: 1, color: "#444" }), _jsx(NodeOrganizer, { onInitialized: onInitialized }), _jsx("svg", { children: _jsx("defs", { children: _jsx(ArrowHead, { color: "#B3B3B3", id: "arrowhead" }) }) })] }), _jsx(LogConsole, {})] }));
+    return (_jsxs("div", { className: "w-full h-full relative bg-background", children: [!initialized && _jsx(FlowLoader, {}), _jsx(Legend, { onHover: setHoveredType }), _jsxs(ReactFlow, { nodes: nodesWithHighlights, edges: edgesWithHighlights, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesChange: onNodesChangeHandler, onEdgesChange: onEdgesChange, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 50, size: 2, className: "[--xy-background-color-dots:theme(colors.muted.DEFAULT)] [--xy-background-color:theme(colors.background)]" }), _jsx(NodeOrganizer, { onInitialized: onInitialized }), _jsx("svg", { className: "[--arrow-color:theme(colors.muted.foreground)]", children: _jsx("defs", { children: _jsx(ArrowHead, { id: "arrowhead" }) }) })] }), _jsx(LogConsole, {})] }));
 };

package/dist/src/views/flow/hooks/use-get-flow-state.d.ts

@@ -1,13 +1,14 @@
 import { Edge, Node } from '@xyflow/react';
+import React from 'react';
 import type { EdgeData, NodeData } from '../nodes/nodes.types';
 type Emit = string | {
-    type: string;
+    topic: string;
     label?: string;
 };
 type FlowStep = {
     id: string;
     name: string;
-    type: 'event' | 'api' | 'noop';
+    type: 'event' | 'api' | 'noop' | 'cron';
     description?: string;
     subscribes?: string[];
     emits: Emit[];
@@ -16,12 +17,17 @@ type FlowStep = {
     webhookUrl?: string;
     language?: string;
     nodeComponentPath?: string;
+    filePath?: string;
 };
 export type FlowResponse = {
     id: string;
     name: string;
     steps: FlowStep[];
     edges: FlowEdge[];
+    error?: string;
+};
+export type FlowConfigResponse = {
+    [key: string]: Position;
 };
 type FlowEdge = {
     id: string;
@@ -29,12 +35,15 @@ type FlowEdge = {
     target: string;
     data: EdgeData;
 };
-export declare const useGetFlowState: (flow: FlowResponse) => {
+type Position = {
+    x: number;
+    y: number;
+};
+export declare const useGetFlowState: (flow: FlowResponse, flowConfig: FlowConfigResponse) => {
     nodes: Node<NodeData>[];
     edges: Edge<EdgeData>[];
     onNodesChange: import("@xyflow/react").OnNodesChange<Node<NodeData>>;
     onEdgesChange: import("@xyflow/react").OnEdgesChange<Edge<EdgeData>>;
-    nodeTypes: Record<string, import("react").ComponentType<any>> | undefined;
+    nodeTypes: Record<string, React.ComponentType<any>> | undefined;
 };
 export {};
-//# sourceMappingURL=use-get-flow-state.d.ts.map

package/dist/src/views/flow/hooks/use-get-flow-state.js

@@ -3,24 +3,32 @@ import { useEffect, useState } from 'react';
 import { ApiFlowNode } from '../nodes/api-flow-node';
 import { NoopFlowNode } from '../nodes/noop-flow-node';
 import { EventFlowNode } from '../nodes/event-flow-node';
-async function importFlow(flow) {
+import { CronNode } from '@/publicComponents/cron-node';
+const getNodePosition = (flowConfig, stepName) => {
+    const position = flowConfig[stepName];
+    return position || { x: 0, y: 0 };
+};
+async function importFlow(flow, flowConfig) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const nodeTypes = {
         event: EventFlowNode,
         api: ApiFlowNode,
         noop: NoopFlowNode,
+        cron: CronNode,
     };
     // Load custom node components if they exist
     for (const step of flow.steps) {
         if (step.nodeComponentPath) {
-            const module = await import(/* @vite-ignore */ step.nodeComponentPath);
-            nodeTypes[step.nodeComponentPath] = module.default;
+            const module = await import(/* @vite-ignore */ `/@fs/${step.nodeComponentPath}`);
+            nodeTypes[step.nodeComponentPath] = module.Node ?? module.default;
         }
     }
     // Create nodes from steps
     const nodes = flow.steps.map((step) => ({
         id: step.id,
         type: step.nodeComponentPath ? step.nodeComponentPath : step.type,
-        position: { x: 0, y: 0 },
+        filePath: step.filePath,
+        position: step.filePath ? getNodePosition(flowConfig, step.filePath) : { x: 0, y: 0 },
         data: step,
         language: step.language,
     }));
@@ -31,18 +39,19 @@ async function importFlow(flow) {
     }));
     return { nodes, edges, nodeTypes };
 }
-export const useGetFlowState = (flow) => {
+export const useGetFlowState = (flow, flowConfig) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [nodeTypes, setNodeTypes] = useState();
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
     useEffect(() => {
-        if (!flow)
+        if (!flow || flow.error)
             return;
-        importFlow(flow).then(({ nodes, edges, nodeTypes }) => {
+        importFlow(flow, flowConfig).then(({ nodes, edges, nodeTypes }) => {
             setNodes(nodes);
             setEdges(edges);
             setNodeTypes(nodeTypes);
         });
-    }, [flow]);
+    }, [flow, flowConfig, setNodes, setEdges, setNodeTypes]);
     return { nodes, edges, onNodesChange, onEdgesChange, nodeTypes };
 };

package/dist/src/views/flow/hooks/use-organize-nodes.d.ts

@@ -1,4 +1,3 @@
 import { Edge, Node } from '@xyflow/react';
 import { EventNodeData, EdgeData, ApiNodeData } from '../nodes/nodes.types';
 export declare const useOrganizeNodes: (nodes: Node<EventNodeData | ApiNodeData>[], edges: Edge<EdgeData>[], setNodes: (nodes: Node<EventNodeData | ApiNodeData>[]) => void) => void;
-//# sourceMappingURL=use-organize-nodes.d.ts.map

package/dist/src/views/flow/hooks/use-save-workflow-config.d.ts

@@ -0,0 +1,9 @@
+export type NodePosition = {
+    [key: string]: {
+        x: number;
+        y: number;
+    };
+};
+export declare const useSaveWorkflowConfig: (flowId: string) => {
+    saveConfig: (body: NodePosition) => Promise<any>;
+};

package/dist/src/views/flow/hooks/use-save-workflow-config.js

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+export const useSaveWorkflowConfig = (flowId) => {
+    const saveConfig = useCallback(async (body) => {
+        try {
+            const response = await fetch(`/flows/${flowId}/config`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ [flowId]: body }),
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to save config: ${response.statusText}`);
+            }
+            return await response.json();
+        }
+        catch (error) {
+            console.error('Error saving workflow config:', error);
+            throw error;
+        }
+    }, [flowId]);
+    return { saveConfig };
+};

package/dist/src/views/flow/legend.d.ts

@@ -1,4 +1,4 @@
-export declare const Legend: ({ onHover }: {
+import { FC } from 'react';
+export declare const Legend: FC<{
     onHover: (type: string | null) => void;
-}) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=legend.d.ts.map
+}>;