@motiadev/workbench 0.0.29 → 0.0.30

package/dist/src/index.css

@@ -149,7 +149,7 @@ table {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: 'PT Sans', serif;
+  font-family: 'DM Sans', serif;
   font-optical-sizing: auto;
 }
 
@@ -162,7 +162,7 @@ body {
 
 button,
 textarea {
-  font-family: 'PT Sans', serif;
+  font-family: 'DM Sans', serif;
 }
 
 strong {
@@ -216,7 +216,8 @@ body,
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
   .dark {
-    --background: 224 71.4% 4.1%;
+    --background: 249 23% 11%;
+    --border: 240 18% 18%;
     --foreground: 210 20% 98%;
     --card: 224 71.4% 4.1%;
     --card-foreground: 210 20% 98%;
@@ -232,7 +233,6 @@ body,
     --accent-foreground: 210 20% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 20% 98%;
-    --border: 215 27.9% 16.9%;
     --input: 215 27.9% 16.9%;
     --ring: 216 12.2% 83.9%;
     --chart-1: 220 70% 50%;
@@ -249,6 +249,19 @@ body,
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
+  
+  .text-md {
+    font-size: 14px;
+  }
+
+  .text-lg {
+    font-size: 16px !important;
+  }
+
+  * {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 }
 
 @layer base {

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

@@ -1,7 +1,5 @@
 import { PropsWithChildren } from 'react';
 import { ApiNodeProps } from './node-props';
-type Props = PropsWithChildren<ApiNodeProps & {
-    excludePubsub?: boolean;
-}>;
-export declare const ApiNode: ({ data, children, excludePubsub }: Props) => import("react/jsx-runtime").JSX.Element;
+type Props = PropsWithChildren<ApiNodeProps>;
+export declare const ApiNode: ({ data, children }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Webhook } from 'lucide-react';
 import { BaseNode } from './base-node';
-import { Emits } from './emits';
-export const ApiNode = ({ data, children, excludePubsub }) => {
-    return (_jsxs(BaseNode, { variant: "api", title: data.name, disableSourceHandle: !data.emits?.length && !data.virtualEmits?.length, disableTargetHandle: !data.subscribes?.length && !data.virtualSubscribes?.length, children: [data.description && _jsx("div", { className: "text-sm max-w-[300px] text-white/60", children: data.description }), children, data.webhookUrl && (_jsxs("div", { className: "flex gap-1 items-center text-xs text-white/60", children: [_jsx(Webhook, { className: "w-3 h-3 text-white/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] })), !excludePubsub && _jsx(Emits, { emits: data.emits })] }));
+import { DetailItem, NodeDetails } from './node-details';
+export const ApiNode = ({ data, children }) => {
+    return (_jsxs(BaseNode, { variant: "api", title: data.name, language: data.language, disableSourceHandle: !data.emits?.length && !data.virtualEmits?.length, disableTargetHandle: !data.subscribes?.length && !data.virtualSubscribes?.length, children: [data.description && _jsx("div", { className: "text-sm text-white/60", children: data.description }), children, data.webhookUrl && (_jsxs("div", { className: "flex gap-1 items-center text-xs text-white/60", children: [_jsx(Webhook, { className: "w-3 h-3 text-white/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] })), _jsx(NodeDetails, { type: "api", name: data.name, subscribes: data.subscribes, emits: data.emits, description: data.description, language: data.language, children: _jsx(DetailItem, { label: "Webhook URL", children: _jsxs("div", { className: "flex gap-1 items-center text-xs text-white/60", children: [_jsx(Webhook, { className: "w-3 h-3 text-white/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] }) }) })] }));
 };

package/dist/src/publicComponents/base-handle.d.ts

@@ -2,6 +2,7 @@ import React, { HTMLAttributes } from 'react';
 import { HandleProps } from '@xyflow/react';
 type Props = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
     isHidden?: boolean;
+    variant?: string | null;
 };
 export declare const BaseHandle: React.FC<Props>;
 export {};

package/dist/src/publicComponents/base-handle.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Position, Handle as RFHandle } from '@xyflow/react';
 import clsx from 'clsx';
+import { colorMap } from './colorMap';
 export const BaseHandle = (props) => {
-    const { isHidden, position, ...rest } = props;
-    return (_jsx("div", { className: clsx('absolute w-1 h-1', position === Position.Top && '-top-[10px]', position === Position.Bottom && '-bottom-[10px]', 'left-1/2 -ml-[2px]', isHidden && 'hidden'), children: _jsx(RFHandle, { ...rest, position: position, className: "\n        !static\n        !w-1\n        !h-1\n        !min-w-[6px]\n        !min-h-[6px]\n        !p-0\n        !border-none\n        !bg-[#666666]\n        !transform-none\n        !rounded-full\n        !outline-none\n        !shadow-none\n      " }) }));
+    const { isHidden, position, variant, ...rest } = props;
+    return (_jsx("div", { className: clsx('absolute w-[6px] h-[6px]', position === Position.Top && '-top-[20px]', position === Position.Bottom && '-bottom-[20px]', 'left-1/2 -ml-[2px]', isHidden && 'hidden'), children: _jsx(RFHandle, { ...rest, position: position, style: {
+                background: colorMap[variant],
+            }, className: "\n        !static\n        !w-[6px]\n        !h-[6px]\n        !min-w-[6px]\n        !min-h-[6px]\n        !p-0\n        !border-none\n        !transform-none\n        !rounded-full\n        !outline-none\n        !shadow-none\n      " }) }));
 };

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

@@ -1,11 +1,12 @@
 import { type VariantProps } from 'class-variance-authority';
 import React, { PropsWithChildren } from 'react';
-declare const baseBackgroundVariants: (props?: ({
+declare const baseDot: (props?: ({
     variant?: "event" | "api" | "noop" | "cron" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type Props = PropsWithChildren<{
-    variant?: VariantProps<typeof baseBackgroundVariants>['variant'];
     title: string;
+    variant: VariantProps<typeof baseDot>['variant'];
+    language?: string;
     headerChildren?: React.ReactNode;
     className?: string;
     disableSourceHandle?: boolean;

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

@@ -3,19 +3,23 @@ import { cn } from '@/lib/utils';
 import { Position } from '@xyflow/react';
 import { cva } from 'class-variance-authority';
 import { BaseHandle } from './base-handle';
-const baseNodeVariants = cva('relative flex flex-col min-w-[300px] rounded-md overflow-hidden font-mono');
-const baseBackgroundVariants = cva('absolute -inset-[1px] rounded-md bg-gradient-to-r', {
+import { LanguageIndicator } from '../views/flow/nodes/language-indicator';
+import { colorMap } from './colorMap';
+const baseDot = cva('w-[6px] h-[6px] rounded-full', {
     variants: {
         variant: {
-            event: 'from-teal-500/20 to-teal-400/10',
-            api: 'from-blue-500/20 to-blue-400/10',
-            noop: 'from-white/20 to-white/10',
-            cron: 'from-purple-500/20 to-purple-400/10',
+            event: 'bg-[rgba(0,117,255,1)]',
+            api: 'bg-[rgba(189,255,0,1)]',
+            noop: 'bg-[rgba(255,49,234,1)]',
+            cron: 'bg-[rgba(255,113,11,1)]',
         },
     },
 });
-const HeaderBar = ({ text, children }) => (_jsxs("div", { className: "px-3 py-1 border-b border-white/20 bg-black/30 text-xs text-white/70 flex justify-between items-center", children: [_jsx("span", { children: text }), children] }));
+const Dot = ({ variant }) => (_jsx("div", { className: cn(baseDot({ variant })) }));
+const HeaderBar = ({ text, variant, children, }) => (_jsxs("div", { className: "text-sm text-white flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Dot, { variant: variant }), _jsx("span", { children: text })] }), children] }));
 export const BaseNode = (props) => {
-    const { title, variant, className, children, disableSourceHandle, disableTargetHandle, headerChildren } = props;
-    return (_jsxs("div", { className: "group relative", children: [_jsx("div", { className: cn(baseBackgroundVariants({ variant })) }), _jsxs("div", { className: cn(baseNodeVariants(), className), children: [_jsx(HeaderBar, { text: title, children: headerChildren }), _jsx("div", { className: "p-4 space-y-3", children: children })] }), !disableTargetHandle && _jsx(BaseHandle, { type: "target", position: Position.Top }), !disableSourceHandle && _jsx(BaseHandle, { type: "source", position: Position.Bottom }), _jsx("div", { className: "absolute inset-0 -z-10 translate-y-1 translate-x-1 bg-black/20 rounded-md border border-white/5" })] }));
+    const { title, variant, children, disableSourceHandle, disableTargetHandle, language } = props;
+    return (_jsx("div", { className: "p-[1px] rounded-lg shadow-[0px_7px_14px_0px_rgba(7,0,23,0.98)] max-w-[350px] ", style: {
+            background: `linear-gradient(100.74deg, rgba(0, 71, 255, 0) -2.15%, ${colorMap[variant]} 45.08%, rgba(0, 71, 255, 0) 96.79%)`,
+        }, children: _jsx("div", { className: "rounded-lg bg-[#060014] p-4", children: _jsxs("div", { className: "group relative", children: [_jsx(HeaderBar, { text: title, variant: variant, children: _jsx(LanguageIndicator, { language: language }) }), _jsx("div", { className: "pt-4 space-y-3", children: children }), !disableTargetHandle && _jsx(BaseHandle, { type: "target", position: Position.Top, variant: variant }), !disableSourceHandle && _jsx(BaseHandle, { type: "source", position: Position.Bottom, variant: variant }), _jsx("div", { className: "absolute inset-0 -z-10 translate-y-1 translate-x-1 bg-black/20 rounded-md border border-white/5" })] }) }) }));
 };

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

@@ -0,0 +1,6 @@
+export declare const colorMap: {
+    event: string;
+    api: string;
+    noop: string;
+    cron: string;
+};

package/dist/src/publicComponents/colorMap.js

@@ -0,0 +1,6 @@
+export const colorMap = {
+    event: 'rgb(0,117,255)',
+    api: 'rgb(189,255,0)',
+    noop: 'rgb(255,49,234)',
+    cron: 'rgb(255,113,11)',
+};

package/dist/src/publicComponents/components/header-bar.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from 'class-variance-authority';
+import React from 'react';
+declare const baseDot: (props?: ({
+    variant?: "event" | "api" | "noop" | "cron" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const HeaderBar: ({ text, variant, children, }: {
+    text: string;
+    variant: VariantProps<typeof baseDot>["variant"];
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/publicComponents/components/header-bar.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+import { cva } from 'class-variance-authority';
+const baseDot = cva('w-[6px] h-[6px] rounded-full', {
+    variants: {
+        variant: {
+            event: 'bg-[rgba(0,117,255,1)]',
+            api: 'bg-[rgba(189,255,0,1)]',
+            noop: 'bg-[rgba(255,49,234,1)]',
+            cron: 'bg-[rgba(255,113,11,1)]',
+        },
+    },
+});
+const Dot = ({ variant }) => (_jsx("div", { className: cn(baseDot({ variant })) }));
+export const HeaderBar = ({ text, variant, children, }) => (_jsxs("div", { className: "text-sm text-white flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Dot, { variant: variant }), _jsx("span", { children: text })] }), children] }));

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BaseNode } from './base-node';
-import { Emits } from './emits';
 import { Clock } from 'lucide-react';
+import { NodeDetails, DetailItem } from './node-details';
 export const CronNode = ({ data }) => {
-    return (_jsxs(BaseNode, { variant: "cron", title: data.name, headerChildren: _jsx(Clock, { className: "w-4 h-4 text-purple-400" }), disableTargetHandle: !data.virtualSubscribes?.length, disableSourceHandle: !data.virtualEmits?.length, children: [_jsx("div", { className: "text-sm text-white/70", children: data.description }), _jsxs("div", { className: "text-xs text-white/50 flex items-center gap-2", children: [_jsx(Clock, { className: "w-3 h-3" }), " ", data.cronExpression] }), _jsx(Emits, { emits: data.emits })] }));
+    return (_jsxs(BaseNode, { variant: "cron", title: data.name, language: data.language, headerChildren: _jsx(Clock, { className: "w-4 h-4 text-purple-400" }), disableTargetHandle: !data.virtualSubscribes?.length, disableSourceHandle: !data.virtualEmits?.length && !data.emits?.length, children: [_jsx("div", { className: "text-sm text-white/70", children: data.description }), _jsxs("div", { className: "text-xs text-white/50 flex items-center gap-2", children: [_jsx(Clock, { className: "w-3 h-3" }), " ", data.cronExpression] }), _jsx(NodeDetails, { type: "cron", name: data.name, description: data.description, language: data.language, children: _jsx(DetailItem, { label: "Cron Expression", children: _jsx("div", { className: "flex gap-1 items-center text-xs text-white/60", children: _jsxs("div", { className: "text-xs text-white/50 flex items-center gap-2", children: [_jsx(Clock, { className: "w-3 h-3" }), " ", data.cronExpression] }) }) }) })] }));
 };

package/dist/src/publicComponents/emits.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Send } from 'lucide-react';
-const toType = (emit) => typeof emit === 'string' ? emit : emit.type;
+const toTopic = (emit) => typeof emit === 'string' ? emit : emit.topic;
 export const Emits = ({ emits }) => {
-    return (_jsx(_Fragment, { children: emits.map((emit) => (_jsxs("div", { className: "flex gap-2 items-center text-xs text-white/60", "data-testid": `emits__${toType(emit)}`, children: [_jsx(Send, { className: "w-3 h-3 text-white/40" }), _jsx("div", { className: "font-mono tracking-wider", children: toType(emit) })] }, toType(emit)))) }));
+    return (_jsx(_Fragment, { children: emits.map((emit) => (_jsxs("div", { className: "flex gap-2 items-center text-xs text-white/60", "data-testid": `emits__${toTopic(emit)}`, children: [_jsx(Send, { className: "w-4 h-4 text-white/40" }), _jsx("div", { className: "font-mono tracking-wider", children: toTopic(emit) })] }, toTopic(emit)))) }));
 };

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

@@ -1,7 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { EventNodeProps } from './node-props';
 type Props = PropsWithChildren<EventNodeProps & {
-    excludePubsub?: boolean;
     className?: string;
 }>;
 export declare const EventNode: (props: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LanguageIndicator } from '../views/flow/nodes/language-indicator';
 import { BaseNode } from './base-node';
-import { Emits } from './emits';
-import { Subscribe } from './subscribe';
+import { NodeDetails } from './node-details';
 export const EventNode = (props) => {
-    const { data, excludePubsub, children } = props;
-    return (_jsxs(BaseNode, { variant: "event", title: data.name, disableSourceHandle: !data.emits.length && !data.virtualEmits?.length, disableTargetHandle: !data.subscribes.length && !data.virtualSubscribes?.length, headerChildren: _jsx(LanguageIndicator, { language: data.language }), children: [data.description && _jsx("div", { className: "text-sm max-w-[300px] text-white/60", children: data.description }), children, !excludePubsub && (_jsx("div", { className: "space-y-2 pt-2 border-t border-white/10", children: _jsx(Subscribe, { data: data }) })), _jsx(Emits, { emits: data.emits })] }));
+    const { data, children } = props;
+    return (_jsxs(BaseNode, { variant: "event", title: data.name, language: data.language, disableSourceHandle: !data.emits.length && !data.virtualEmits?.length, disableTargetHandle: !data.subscribes.length && !data.virtualSubscribes?.length, children: [children, _jsx(NodeDetails, { type: "event", name: data.name, subscribes: data.subscribes, emits: data.emits, description: data.description, language: data.language })] }));
 };

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

@@ -0,0 +1,17 @@
+import React, { PropsWithChildren } from 'react';
+type Props = PropsWithChildren<{
+    name: string;
+    type: 'event' | 'api' | 'noop' | 'cron';
+    subscribes?: string[];
+    emits?: Array<string | {
+        topic: string;
+        label?: string;
+    }>;
+    description?: string;
+    language?: string;
+}>;
+export declare const DetailItem: React.FC<PropsWithChildren<{
+    label: string;
+}>>;
+export declare const NodeDetails: React.FC<Props>;
+export {};

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from 'lucide-react';
+import { DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '../components/ui/dialog';
+import { DialogContent } from '../components/ui/dialog';
+import { Dialog } from '../components/ui/dialog';
+import { Label } from '../components/ui/label';
+import { LanguageIndicator } from '../views/flow/nodes/language-indicator';
+import { Emits } from './emits';
+import { Subscribe } from './subscribe';
+import { colorMap } from './colorMap';
+import { HeaderBar } from './components/header-bar';
+export const DetailItem = (props) => {
+    const { label, children } = props;
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { className: "text-white", children: label }), children] }));
+};
+export const NodeDetails = (props) => {
+    const { name, type, subscribes, emits, description, language, children } = props;
+    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx("div", { className: "flex justify-end gap-2", children: _jsx("div", { className: "border border-solid border-white/10 p-1 rounded-md cursor-pointer", children: _jsx(ChevronRight, { className: "w-4 h-4" }) }) }) }), _jsxs(DialogContent, { className: "border border-solid", style: { borderColor: colorMap[type] }, children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: _jsx(HeaderBar, { variant: type, text: name }) }) }), _jsx(DialogDescription, { children: _jsxs("div", { className: "flex flex-col gap-6", children: [description && (_jsx(DetailItem, { label: "Description", children: _jsx("span", { className: "text-sm text-white/60", children: description }) })), _jsx(DetailItem, { label: "Language", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LanguageIndicator, { language: language }), _jsx("span", { className: "capitalize", children: language })] }) }), subscribes && (_jsx(DetailItem, { label: "Subscribes", children: _jsx(Subscribe, { subscribes: subscribes }) })), emits && (_jsx(DetailItem, { label: "Emits", children: _jsx(Emits, { emits: emits }) })), children] }) })] })] }));
+};

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

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

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-white/60", "data-testid": `subscribes__${subscribe}`, children: [_jsx(Eye, { className: "w-4 h-4 text-white/40" }), _jsx("div", { className: "font-mono tracking-wider", children: subscribe })] }, subscribe))) }));
 };

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", children: _jsxs(ReactFlowProvider, { children: [_jsx(AppSidebar, {}), _jsx("div", { className: "flex-1", children: children })] }) }));

package/dist/src/routes/flow.js

@@ -7,14 +7,18 @@ export const Flow = () => {
     const { id } = useParams();
     const flowId = id;
     const [flow, setFlow] = useState(null);
+    const [flowConfig, setFlowConfig] = useState(null);
     const fetchFlow = useCallback(() => {
-        fetch(`/flows/${flowId}`)
-            .then((res) => res.json())
-            .then((flow) => setFlow(flow));
+        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]);
     useFlowUpdateListener(flowId, fetchFlow);
     if (!flow)
         return null;
-    return (_jsx("div", { className: "w-screen h-screen", children: _jsx(FlowView, { flow: flow }) }));
+    return (_jsx("div", { className: "w-full h-screen", children: _jsx(FlowView, { flow: flow, flowConfig: flowConfig }) }));
 };

package/dist/src/routes/index.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../components/ui/button';
 export const 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" }) }));
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center w-full h-screen gap-10 bg-gradient-to-r from-black to-gray-900", children: [_jsx("h1", { className: "text-5xl font-extrabold max-w-[600px] text-center", children: "Code-first framework for intelligent workflows" }), _jsx("div", { className: "max-w-[600px] text-center text-xl font-medium text-gray-400", 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-[0px_7px_14px_0px_rgba(7,0,23,0.98),0px_26px_26px_0px_rgba(7,0,23,0.85),0px_59px_35px_0px_rgba(7,0,23,0.5),0px_105px_42px_0px_rgba(7,0,23,0.15),0px_164px_46px_0px_rgba(7,0,23,0.02)]", children: _jsx("div", { className: "rounded-lg bg-black 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-[rgb(0,117,255)]", children: "$" }), _jsx("span", { className: "text-white", children: "npx motia generate step" })] }) }) }), _jsxs("div", { className: "flex flex-col gap-8 items-center", children: [_jsx("span", { className: "text-gray-400 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/views/flow/base-edge.js

@@ -5,7 +5,7 @@ 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-black text-gray-100 font-semibold border-solid rounded-full',
+            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',
         },
     },
@@ -28,8 +28,8 @@ export const BaseEdge = (props) => {
         offset: 10,
     });
     return (_jsxs(_Fragment, { children: [_jsx(BaseReactFlowEdge, { path: edgePath, style: {
-                    stroke: data?.variant === 'virtual' ? 'rgb(147, 169, 197)' : 'rgb(133, 176, 132)',
-                    strokeWidth: 0.5,
+                    stroke: data?.variant === 'virtual' ? 'rgb(111, 111, 111)' : '#0094FF',
+                    strokeWidth: 2,
                     shapeRendering: 'geometricPrecision',
                     fill: 'none',
                     mixBlendMode: 'screen',

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

@@ -1,8 +1,13 @@
-import '@xyflow/react/dist/style.css';
 import React from 'react';
-import { FlowResponse } from './hooks/use-get-flow-state';
+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';
+export type FlowNode = ReactFlowNode<NodeData>;
+export type FlowEdge = ReactFlowEdge<EdgeData>;
 type Props = {
     flow: FlowResponse;
+    flowConfig: FlowConfigResponse;
 };
 export declare const FlowView: React.FC<Props>;
 export {};

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

@@ -1,20 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/workbench/src/views/flow/flow-view.tsx
 import { LogConsole } from '@/components/logs/log-console';
-import { Background, BackgroundVariant, ReactFlow } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
+import { Background, BackgroundVariant, ReactFlow, useReactFlow } from '@xyflow/react';
 import { useCallback, useEffect, useState } from 'react';
 import { ArrowHead } from './arrow-head';
 import { BaseEdge } from './base-edge';
 import { FlowLoader } from './flow-loader';
 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, getEdges } = useReactFlow();
+    const { saveConfig } = useSaveWorkflowConfig(flow.id);
     const [hoveredType, setHoveredType] = useState(null);
     useEffect(() => setInitialized(false), [flow]);
     const onInitialized = useCallback(() => {
@@ -39,8 +44,16 @@ export const FlowView = ({ flow }) => {
         ...edge,
         className: getClassName(), // No argument means it's an edge
     }));
+    const saveFlowConfig = useCallback(() => {
+        return saveConfig({ steps: getNodes(), edges: getEdges() });
+    }, [saveConfig, getNodes, getEdges]);
+    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: edgesWithHighlights, 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-black", 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: 20, size: 1, color: "#99a", bgColor: "#1d1c2a" }), _jsx(NodeOrganizer, { onInitialized: onInitialized }), _jsx("svg", { children: _jsx("defs", { children: _jsx(ArrowHead, { color: "#B3B3B3", id: "arrowhead" }) }) })] }), _jsx(LogConsole, {})] }));
 };

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

@@ -1,8 +1,8 @@
 import { Edge, Node } from '@xyflow/react';
 import React from 'react';
-import type { EdgeData, NodeData } from '../nodes/nodes.types';
+import type { EdgeData, FlowNodeData, NodeData } from '../nodes/nodes.types';
 type Emit = string | {
-    type: string;
+    topic: string;
     label?: string;
 };
 type FlowStep = {
@@ -24,13 +24,17 @@ export type FlowResponse = {
     steps: FlowStep[];
     edges: FlowEdge[];
 };
+export type FlowConfigResponse = {
+    steps: FlowNodeData[];
+    edges: FlowEdge[];
+};
 type FlowEdge = {
     id: string;
     source: string;
     target: string;
     data: EdgeData;
 };
-export declare const useGetFlowState: (flow: FlowResponse) => {
+export declare const useGetFlowState: (flow: FlowResponse, flowConfig: FlowConfigResponse) => {
     nodes: Node<NodeData>[];
     edges: Edge<EdgeData>[];
     onNodesChange: import("@xyflow/react").OnNodesChange<Node<NodeData>>;

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

@@ -4,7 +4,11 @@ import { ApiFlowNode } from '../nodes/api-flow-node';
 import { NoopFlowNode } from '../nodes/noop-flow-node';
 import { EventFlowNode } from '../nodes/event-flow-node';
 import { CronNode } from '@/publicComponents/cron-node';
-async function importFlow(flow) {
+const getNodePosition = (flowConfig, stepName) => {
+    const configStep = flowConfig?.steps?.find((step) => step.data?.name === stepName);
+    return configStep?.position || { x: 0, y: 0 };
+};
+async function importFlow(flow, flowConfig) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const nodeTypes = {
         event: EventFlowNode,
@@ -23,7 +27,7 @@ async function importFlow(flow) {
     const nodes = flow.steps.map((step) => ({
         id: step.id,
         type: step.nodeComponentPath ? step.nodeComponentPath : step.type,
-        position: { x: 0, y: 0 },
+        position: getNodePosition(flowConfig, step.name),
         data: step,
         language: step.language,
     }));
@@ -34,7 +38,7 @@ 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([]);
@@ -42,11 +46,11 @@ export const useGetFlowState = (flow) => {
     useEffect(() => {
         if (!flow)
             return;
-        importFlow(flow).then(({ nodes, edges, nodeTypes }) => {
+        importFlow(flow, flowConfig).then(({ nodes, edges, nodeTypes }) => {
             setNodes(nodes);
             setEdges(edges);
             setNodeTypes(nodeTypes);
         });
-    }, [flow, setNodes, setEdges, setNodeTypes]);
+    }, [flow, flowConfig, setNodes, setEdges, setNodeTypes]);
     return { nodes, edges, onNodesChange, onEdgesChange, nodeTypes };
 };

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

@@ -0,0 +1,3 @@
+export declare const useSaveWorkflowConfig: (flowId: string) => {
+    saveConfig: (config: any) => 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 (config) => {
+        try {
+            const response = await fetch(`/flows/${flowId}/config`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(config),
+            });
+            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 };
+};