npm - @motiadev/workbench - Versions diffs - 0.3.1-beta.87 → 0.3.1-beta.88-041205 - Mend

@motiadev/workbench 0.3.1-beta.87 → 0.3.1-beta.88-041205

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (219) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -1,9 +1,8 @@
 export { EventNode } from './src/publicComponents/event-node';
 export { ApiNode } from './src/publicComponents/api-node';
 export { NoopNode } from './src/publicComponents/noop-node';
-export { BaseNode } from './src/publicComponents/base-node';
-export { BaseHandle } from './src/publicComponents/base-handle';
+export { BaseNode } from './src/publicComponents/base-node/base-node';
+export { BaseHandle } from './src/publicComponents/base-node/base-handle';
 export { Position } from '@xyflow/react';
-export type { EventNodeData, ApiNodeData } from './src/views/flow/nodes/nodes.types';
+export type { EventNodeData, ApiNodeData } from './src/types/flow';
 export type { ApiNodeProps, BaseNodeProps, CronNodeProps, EventNodeProps, NoopNodeProps, } from './src/publicComponents/node-props';
-export { Button } from './src/components/ui/button';

package/dist/index.html CHANGED Viewed

@@ -3,10 +3,11 @@
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/icon.png" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
       rel="stylesheet"
     />
     <script src="https://cdn.amplitude.com/libs/analytics-browser-2.11.1-min.js.gz"></script>
@@ -23,7 +24,7 @@
     </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Motia</title>
+    <title>Motia Workbench</title>
   </head>
   <body class="dark">
     <div id="root"></div>

package/dist/index.js CHANGED Viewed

@@ -1,7 +1,6 @@
 export { EventNode } from './src/publicComponents/event-node';
 export { ApiNode } from './src/publicComponents/api-node';
 export { NoopNode } from './src/publicComponents/noop-node';
-export { BaseNode } from './src/publicComponents/base-node';
-export { BaseHandle } from './src/publicComponents/base-handle';
+export { BaseNode } from './src/publicComponents/base-node/base-node';
+export { BaseHandle } from './src/publicComponents/base-node/base-handle';
 export { Position } from '@xyflow/react';
-export { Button } from './src/components/ui/button';

package/dist/public/icon.png ADDED Viewed

Binary file

package/dist/public/motia-dark.png ADDED Viewed

Binary file

package/dist/public/motia-light.png ADDED Viewed

Binary file

package/dist/src/App.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import React from 'react';
2	+ export declare const App: React.FC;

package/dist/src/App.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CollapsiblePanel, CollapsiblePanelGroup, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
+import { ReactFlowProvider } from '@xyflow/react';
+import { File, GanttChart, Link2, LogsIcon } from 'lucide-react';
+import { EndpointsPage } from './components/endpoints/endpoints-page';
+import { FlowPage } from './components/flow/flow-page';
+import { FlowTabMenuItem } from './components/flow/flow-tab-menu-item';
+import { Header } from './components/header/header';
+import { LogsPage } from './components/logs/logs-page';
+import { TracesPage } from './components/observability/traces-page';
+import { APP_SIDEBAR_CONTAINER_ID } from './components/sidebar/sidebar';
+import { StatesPage } from './components/states/states-page';
+import { useTabsStore } from './stores/use-tabs-store';
+export const App = () => {
+    const tab = useTabsStore((state) => state.tab);
+    const setTopTab = useTabsStore((state) => state.setTopTab);
+    const setBottomTab = useTabsStore((state) => state.setBottomTab);
+    return (_jsxs("div", { className: "grid grid-rows-[auto_1fr] grid-cols-[1fr_auto] bg-background text-foreground h-screen", children: [_jsx("div", { className: "col-span-2", children: _jsx(Header, {}) }), _jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsxs(CollapsiblePanelGroup, { autoSaveId: "app-panel", direction: "vertical", className: "gap-1 h-full", "aria-label": "Workbench panels", children: [_jsxs(CollapsiblePanel, { id: "top-panel", variant: 'tabs', defaultTab: tab.top, onTabChange: setTopTab, header: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "flow", children: _jsx(FlowTabMenuItem, {}) }), _jsxs(TabsTrigger, { value: "endpoint", children: [_jsx(Link2, {}), "Endpoint"] })] }), children: [_jsx(TabsContent, { value: "flow", className: "h-full", asChild: true, children: _jsx(ReactFlowProvider, { children: _jsx(FlowPage, {}) }) }), _jsx(TabsContent, { value: "endpoint", asChild: true, children: _jsx(EndpointsPage, {}) })] }), _jsxs(CollapsiblePanel, { id: "bottom-panel", variant: 'tabs', defaultTab: tab.bottom, onTabChange: setBottomTab, header: _jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: "tracing", children: [_jsx(GanttChart, {}), " Tracing"] }), _jsxs(TabsTrigger, { value: "logs", children: [_jsx(LogsIcon, {}), "Logs"] }), _jsxs(TabsTrigger, { value: "states", children: [_jsx(File, {}), "States"] })] }), children: [_jsx(TabsContent, { value: "tracing", className: "max-h-fit", asChild: true, children: _jsx(TracesPage, {}) }), _jsx(TabsContent, { value: "logs", asChild: true, children: _jsx(LogsPage, {}) }), _jsx(TabsContent, { value: "states", asChild: true, children: _jsx(StatesPage, {}) })] })] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
+};

package/dist/src/components/endpoints/endpoint-badge.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const badgeVariants: (props?: ({
-    variant?: "POST" | "GET" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS" | null | undefined;
+    variant?: "POST" | "GET" | "DELETE" | "PUT" | "PATCH" | "HEAD" | "OPTIONS" | null | undefined;
     defaultVariants?: "variant" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {

package/dist/src/components/endpoints/endpoint-badge.js CHANGED Viewed

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
-const badgeVariants = cva('inline-flex items-center rounded-lg border px-2 py-1 text-xs font-bold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
+const badgeVariants = cva('rounded-lg px-2 py-1 text-sm font-mono font-bold transition-colors', {
     variants: {
         variant: {
-            POST: 'bg-sky-500/50 text-sky-100',
-            GET: 'bg-lime-500/50 text-lime-100',
-            PUT: 'bg-yellow-500/50 text-yellow-100',
-            DELETE: 'bg-red-500/50 text-red-100',
-            PATCH: 'bg-yellow-500/50 text-yellow-100',
-            HEAD: 'bg-blue-500/50 text-blue-100',
-            OPTIONS: 'bg-purple-500/50 text-purple-100',
+            POST: 'bg-[#258DC3]/15 text-[#258DC3]',
+            GET: 'bg-[#709A2D]/15 text-[#709A2D]',
+            DELETE: 'bg-[#DE2134]/15 text-[#DE2134]',
+            PUT: 'bg-yellow-500/50 text-yellow-100', // TODO color
+            PATCH: 'bg-yellow-500/50 text-yellow-100', // TODO color
+            HEAD: 'bg-blue-500/50 text-blue-100', // TODO color
+            OPTIONS: 'bg-purple-500/50 text-purple-100', // TODO color
         },
         defaultVariants: {
             variant: 'bg-blue-500/50 text-blue-100',

package/dist/src/components/endpoints/endpoint-call.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-import React from 'react';
-import { ApiEndpoint } from './hooks/use-get-endpoints';
+import { ApiEndpoint } from '@/types/endpoint';
+import { FC } from 'react';
 type Props = {
     endpoint: ApiEndpoint;
     onClose: () => void;
 };
-export declare const EndpointCall: React.FC<Props>;
+export declare const EndpointCall: FC<Props>;
 export {};

package/dist/src/components/endpoints/endpoint-call.js CHANGED Viewed

@@ -1,49 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
+import { Sidebar } from '@/components/sidebar/sidebar';
+import { Button, Input, Panel } from '@motiadev/ui';
 import { Loader2, Play, X } from 'lucide-react';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Textarea } from '../ui/textarea';
+import { useEffect, useMemo, useState } from 'react';
 import { EndpointBadge } from './endpoint-badge';
+import { EndpointResponse } from './endpoint-response';
+import { EndpointResponseSchema } from './endpoint-response-schema';
 import { useJsonSchemaToJson } from './hooks/use-json-schema-to-json';
 import { usePathParams } from './hooks/use-path-params';
-import { useStateStream } from './hooks/use-state-stream';
+import { JsonEditor } from './json-editor';
 export const EndpointCall = ({ endpoint, onClose }) => {
     const shouldHaveBody = ['post', 'put', 'patch'].includes(endpoint.method.toLowerCase());
     const [isRequestLoading, setIsRequestLoading] = useState(false);
-    const [responseCode, setResponseCode] = useState();
-    const [responseBody, setResponseBody] = useState();
-    const [executionTime, setExecutionTime] = useState();
+    const [responseCode, setResponseCode] = useState(undefined);
+    const [responseBody, setResponseBody] = useState(undefined);
+    const [executionTime, setExecutionTime] = useState(undefined);
     const { body, setBody } = useJsonSchemaToJson(endpoint.bodySchema);
-    const [isJsonValid, setIsJsonValid] = useState(true);
+    const [isBodyValid, setIsBodyValid] = useState(true);
     const pathParams = usePathParams(endpoint.path);
     const [pathParamsValues, setPathParamsValues] = useState(pathParams?.reduce((acc, param) => ({ ...acc, [param]: '' }), {}));
     const [queryParamsValues, setQueryParamsValues] = useState(endpoint.queryParams?.reduce((acc, param) => ({ ...acc, [param.name]: '' }), {}) ?? {});
-    const { data: responseBodyData, isStreamed } = useStateStream(responseBody);
     const isPlayEnabled = useMemo(() => {
         if (!pathParams)
             return true;
-        if (shouldHaveBody && !isJsonValid)
+        if (shouldHaveBody && !isBodyValid)
             return false;
         return pathParams?.every((param) => pathParamsValues[param]);
-    }, [pathParams, pathParamsValues, shouldHaveBody, isJsonValid]);
+    }, [pathParams, pathParamsValues, shouldHaveBody, isBodyValid]);
     const onPathParamChange = (param, value) => {
         setPathParamsValues((prev) => ({ ...prev, [param]: value }));
     };
     const onQueryParamChange = (param, value) => {
         setQueryParamsValues((prev) => ({ ...prev, [param]: value }));
     };
-    const handleBodyChange = useCallback((e) => {
-        const value = e.target.value;
-        setBody(value);
-        try {
-            JSON.parse(value);
-            setIsJsonValid(true);
+    useEffect(() => {
+        if (endpoint.id) {
+            setResponseCode(undefined);
+            setResponseBody(undefined);
+            setExecutionTime(undefined);
+            setIsRequestLoading(false);
         }
-        catch {
-            setIsJsonValid(false);
-        }
-    }, [setBody]);
+    }, [endpoint.id]);
     const handleRequest = async () => {
         setIsRequestLoading(true);
         const startTime = Date.now();
@@ -67,5 +64,13 @@ export const EndpointCall = ({ endpoint, onClose }) => {
         setExecutionTime(executionTime);
         setIsRequestLoading(false);
     };
-    return (_jsxs("div", { className: "flex flex-col gap-2 overflow-y-auto", children: [_jsxs("div", { className: "text-xs flex flex-row gap-2 items-center justify-between w-full", children: [_jsx("span", { className: "font-bold", children: "Request" }), _jsx("div", { className: "flex flex-row gap-2 items-center hover:bg-white/10 rounded-md p-1", children: _jsx(X, { className: "cursor-pointer w-4 h-4", onClick: onClose }) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-center", children: [_jsx(EndpointBadge, { variant: endpoint.method, children: endpoint.method.toUpperCase() }), _jsx("span", { className: "text-md font-bold", children: endpoint.path })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: endpoint.description }), !!pathParams.length && (_jsxs("div", { className: "flex flex-col gap-2 p-4 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Path Params" }), _jsx("div", { className: "flex flex-col gap-4", children: pathParams.map((param) => (_jsxs("div", { className: "text-xs", children: [_jsx("div", { className: "font-bold mb-2", children: param }), _jsx(Input, { className: "w-full", value: pathParamsValues[param], onChange: (e) => onPathParamChange(param, e.target.value) })] }, param))) })] })), !!endpoint.queryParams?.length && (_jsxs("div", { className: "flex flex-col gap-2 p-4 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Query Params" }), _jsx("div", { className: "flex flex-col gap-4", children: endpoint.queryParams.map((param) => (_jsxs("div", { className: "text-xs", children: [_jsx("div", { className: "font-bold mb-2", children: param.name }), _jsx(Input, { className: "w-full", value: queryParamsValues[param.name], onChange: (e) => onQueryParamChange(param.name, e.target.value) })] }, param.name))) })] })), shouldHaveBody && (_jsxs("div", { className: "flex flex-col gap-2 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Body" }), _jsx(Textarea, { "data-testid": "endpoint-body-textarea", className: `w-full font-mono font-medium min-h-[200px] ${!isJsonValid ? 'border-red-500' : ''}`, value: body, onChange: handleBodyChange }), _jsx("span", { "data-testid": "endpoint-invalid-json-message", className: `text-xs text-red-500 ${isJsonValid ? 'invisible' : ''}`, children: "Invalid JSON" })] })), _jsxs(Button, { className: "w-fit", onClick: handleRequest, "data-testid": "endpoint-play-button", disabled: isRequestLoading || !isPlayEnabled, children: [isRequestLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(Play, {}), " Play"] }), responseCode !== undefined && (_jsxs("div", { className: "flex flex-col gap-2 rounded-lg bg-muted", "data-testid": "endpoint-response-container", children: [_jsxs("span", { className: "text-xs font-bold", children: [_jsx(EndpointBadge, { variant: responseCode >= 400 ? 'DELETE' : 'GET', children: responseCode }), " Execution time: ", _jsxs("span", { className: "text-muted-foreground", children: [executionTime, "ms"] })] }), isStreamed && (_jsxs("span", { className: "flex flex-row items-center font-medium text-muted-foreground text-xs", children: [_jsxs("span", { className: "ml-1 inline-block w-2 h-2 rounded-full bg-green-500 mr-2 relative", children: [_jsx("span", { className: "absolute inset-0 rounded-full bg-green-500 animate-[ping_1.5s_ease-in-out_infinite]" }), _jsx("span", { className: "absolute inset-0 rounded-full bg-green-500" })] }), "Object is being streamed, this is not the actual response from the API Endpoint"] })), _jsx("span", { className: "text-xs font-mono font-bold dark:bg-black/50 bg-white/50 p-2 rounded-lg whitespace-pre-wrap", children: JSON.stringify(responseBodyData, null, 2) })] }))] }));
+    return (_jsxs(Sidebar, { initialWidth: 600, title: _jsxs("div", { className: "flex flex-row gap-2 items-center", children: [_jsx(EndpointBadge, { variant: endpoint.method, children: endpoint.method.toUpperCase() }), _jsx("span", { className: "text-md font-bold", children: endpoint.path })] }), onClose: onClose, actions: [
+            {
+                icon: _jsx(X, { className: "cursor-pointer w-4 h-4", onClick: onClose }),
+                onClick: onClose,
+            },
+        ], children: [endpoint.description && (_jsx("div", { className: "rounded-lg border p-4 font-medium text-muted-foreground", children: endpoint.description })), !!pathParams.length && (_jsx(Panel, { title: "Path params", size: "sm", children: _jsx("table", { children: pathParams.map((param) => (_jsxs("tr", { children: [_jsx("td", { className: "flex flex-col font-bold leading-[36px]", children: param }), _jsx("td", { className: "w-2/3 pl-4", children: _jsx(Input, { className: "w-full", value: pathParamsValues[param], onChange: (e) => onPathParamChange(param, e.target.value) }) })] }, param))) }) })), !!endpoint.queryParams?.length && (_jsx(Panel, { title: "Query params", size: "sm", children: _jsx("table", { children: endpoint.queryParams.map((param) => (_jsxs("tr", { children: [_jsxs("td", { className: "flex flex-col", children: [_jsx("span", { className: "font-bold", children: param.name }), _jsx("span", { className: "text-md text-muted-foreground", children: param.description })] }), _jsx("td", { className: "w-2/3 pl-4", children: _jsx(Input, { className: "w-full", value: queryParamsValues[param.name], onChange: (e) => onQueryParamChange(param.name, e.target.value) }) })] }, param.name))) }) })), shouldHaveBody && (_jsx(Panel, { title: "Body", size: "sm", contentClassName: "p-0", children: _jsx(JsonEditor, { value: body, schema: endpoint.bodySchema, onChange: setBody, onValidate: setIsBodyValid }) })), _jsxs(Button, { className: "w-fit", onClick: handleRequest, variant: "accent", "data-testid": "endpoint-play-button", disabled: isRequestLoading || !isPlayEnabled, children: [isRequestLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(Play, {}), " Play"] }), _jsx(EndpointResponse, { responseCode: responseCode, responseBody: responseBody, executionTime: executionTime }), _jsx(EndpointResponseSchema, { items: Object.entries(endpoint?.responseSchema ?? {}).map(([status, schema]) => ({
+                    responseCode: status,
+                    bodySchema: schema,
+                })) })] }));
 };

package/dist/src/components/endpoints/endpoint-response-schema.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+export type EndpointResponseItem = {
+    responseCode: string;
+    bodySchema: Record<string, Record<string, any>>;
+};
+type EndpointResponseProps = {
+    items: EndpointResponseItem[];
+};
+export declare const EndpointResponseSchema: FC<EndpointResponseProps>;
+export {};

package/dist/src/components/endpoints/endpoint-response-schema.js ADDED Viewed

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { convertJsonSchemaToJson } from '@/components/endpoints/hooks/utils';
+import { useThemeStore } from '@/stores/use-theme-store';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
+import { useMemo } from 'react';
+import ReactJson from 'react18-json-view';
+const EndpointResponseSchemaItem = ({ responseCode, bodySchema }) => {
+    const theme = useThemeStore((store) => store.theme);
+    const schema = useMemo(() => convertJsonSchemaToJson(bodySchema), [bodySchema]);
+    return (_jsx(TabsContent, { value: responseCode, className: "border-t", children: _jsx("div", { className: "text-xs font-mono rounded-lg whitespace-pre-wrap", children: _jsx(ReactJson, { src: schema, dark: theme === 'dark', enableClipboard: false, style: { backgroundColor: 'transparent' } }) }) }, responseCode));
+};
+export const EndpointResponseSchema = ({ items }) => {
+    if (items.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: "flex flex-col rounded-lg border", "data-testid": "endpoint-response-container", children: _jsxs(Tabs, { defaultValue: items[0].responseCode, children: [_jsx("div", { className: "flex items-center justify-between bg-card", children: _jsx(TabsList, { className: "bg-transparent p-0", children: items.map((item) => (_jsx(TabsTrigger, { value: item.responseCode, className: "text-xs font-bold cursor-pointer", children: item.responseCode }, item.responseCode))) }) }), items.map((props) => (_jsx(EndpointResponseSchemaItem, { ...props }, props.responseCode)))] }) }));
+};

package/dist/src/components/endpoints/endpoint-response.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type EndpointResponseProps = {
+    responseCode: number | string | undefined;
+    responseBody: Record<string, any> | undefined;
+    executionTime?: number;
+};
+export declare const EndpointResponse: FC<EndpointResponseProps>;
+export {};

package/dist/src/components/endpoints/endpoint-response.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStateStream } from '@/components/endpoints/hooks/use-state-stream';
+import { useThemeStore } from '@/stores/use-theme-store';
+import { Panel } from '@motiadev/ui';
+import { XCircle } from 'lucide-react';
+import { useMemo } from 'react';
+import ReactJson from 'react18-json-view';
+const getStatusMessage = (status) => {
+    switch (status) {
+        case 200:
+            return 'OK';
+        case 201:
+            return 'Created';
+        case 204:
+            return 'No Content';
+        case 400:
+            return 'Bad Request';
+        case 401:
+            return 'Unauthorized';
+        case 403:
+            return 'Forbidden';
+        case 404:
+            return 'Not Found';
+        case 500:
+            return 'Internal Server Error';
+        default:
+            return 'Unknown Status';
+    }
+};
+export const EndpointResponse = ({ responseCode, executionTime, responseBody }) => {
+    const theme = useThemeStore((state) => state.theme);
+    const { data, isStreamed } = useStateStream(responseBody);
+    const statusMessage = useMemo(() => getStatusMessage(Number(responseCode)), [responseCode]);
+    const isError = Number(responseCode) >= 400;
+    if (!responseBody || !responseCode) {
+        return null;
+    }
+    return (_jsx(Panel, { title: _jsxs("div", { className: "flex flex-row justify-between items-center flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [isError && _jsx(XCircle, { className: "text-red-500 w-4 h-4" }), _jsxs("span", { className: "font-bold text-xs", children: [responseCode, " - ", statusMessage] })] }), !!executionTime && (_jsxs("span", { className: "text-xs text-muted-foreground justify-self-end", children: ["Execution time: ", _jsxs("span", { className: "font-bold", children: [executionTime, "ms"] })] }))] }), subtitle: isStreamed && (_jsxs("span", { className: "col-span-2 flex flex-row items-center font-medium text-card-foreground text-xs mt-2", children: [_jsxs("span", { className: "inline-block w-2 h-2 rounded-full bg-green-500 mr-2 relative", children: [_jsx("span", { className: "absolute inset-0 rounded-full bg-green-500 animate-[ping_1.5s_ease-in-out_infinite]" }), _jsx("span", { className: "absolute inset-0 rounded-full bg-green-500" })] }), "Object is being streamed, this is not the actual response from the API Endpoint"] })), children: _jsx(ReactJson, { src: data, dark: theme === 'dark', enableClipboard: false, style: { backgroundColor: 'transparent' } }) }));
+};

package/dist/src/components/endpoints/endpoints-page.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+import { useGlobalStore } from '@/stores/use-global-store';
+import { useMemo } from 'react';
+import { EndpointBadge } from './endpoint-badge';
+import { EndpointCall } from './endpoint-call';
+import { useGetEndpoints } from './hooks/use-get-endpoints';
+export const EndpointsPage = () => {
+    const endpoints = useGetEndpoints();
+    const selectedEndpointId = useGlobalStore((state) => state.selectedEndpointId);
+    const selectEndpointId = useGlobalStore((state) => state.selectEndpointId);
+    const selectedEndpoint = useMemo(() => selectedEndpointId && endpoints.find((endpoint) => endpoint.id === selectedEndpointId), [endpoints, selectedEndpointId]);
+    return (_jsxs("div", { className: "flex flex-row w-full h-full", children: [_jsx("div", { className: "flex flex-col flex-1 overflow-y-auto", children: endpoints.map((endpoint) => (_jsx("div", { "data-testid": `endpoint-${endpoint.method}-${endpoint.path}`, className: cn(selectedEndpoint === endpoint && 'bg-muted-foreground/10', 'cursor-pointer select-none'), onClick: () => selectEndpointId(endpoint.id), children: _jsxs("div", { className: "flex flex-row gap-2 items-center hover:bg-muted-foreground/10 p-2", children: [_jsx(EndpointBadge, { variant: endpoint.method, children: endpoint.method.toUpperCase() }), _jsx("span", { className: "text-md font-mono font-bold whitespace-nowrap", children: endpoint.path }), _jsx("span", { className: "text-md text-muted-foreground truncate", children: endpoint.description })] }) }, `${endpoint.method} ${endpoint.path}`))) }), selectedEndpoint && _jsx(EndpointCall, { endpoint: selectedEndpoint, onClose: () => selectEndpointId(undefined) })] }));
+};

package/dist/src/components/endpoints/hooks/use-get-endpoints.d.ts CHANGED Viewed

@@ -1,16 +1,2 @@
-type ApiRouteMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'OPTIONS' | 'HEAD';
-type QueryParam = {
-    name: string;
-    description: string;
-};
-export type ApiEndpoint = {
-    id: string;
-    method: ApiRouteMethod;
-    path: string;
-    description?: string;
-    queryParams?: QueryParam[];
-    responseSchema?: Record<string, any>;
-    bodySchema?: Record<string, Record<string, any>>;
-};
+import { ApiEndpoint } from '@/types/endpoint';
 export declare const useGetEndpoints: () => ApiEndpoint[];
-export {};

package/dist/src/components/endpoints/json-editor.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+type JsonEditorProps = {
+    value: string;
+    schema: Record<string, unknown> | undefined;
+    onChange: (value: string) => void;
+    onValidate: (isValid: boolean) => void;
+};
+export declare const JsonEditor: FC<JsonEditorProps>;
+export {};

package/dist/src/components/endpoints/json-editor.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import Editor, { useMonaco } from '@monaco-editor/react';
+import { useThemeStore } from '@/stores/use-theme-store';
+export const JsonEditor = ({ value, schema, onChange, onValidate }) => {
+    const monaco = useMonaco();
+    const theme = useThemeStore((state) => state.theme);
+    const editorTheme = useMemo(() => (theme === 'dark' ? 'vs-dark' : 'light'), [theme]);
+    useEffect(() => {
+        if (!monaco || !schema)
+            return;
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+            validate: true,
+            schemas: [
+                {
+                    uri: window.location.href,
+                    fileMatch: ['*'],
+                    schema,
+                },
+            ],
+        });
+    }, [monaco, schema]);
+    return (_jsx(Editor, { height: "200px", language: "json", value: value, theme: editorTheme, onChange: (value) => {
+            onChange(value ?? '');
+        }, onValidate: (markers) => {
+            onValidate(markers.length === 0);
+        }, options: {
+            lineNumbers: 'off',
+            minimap: { enabled: false },
+        } }));
+};

package/dist/src/components/flow/flow-page.d.ts ADDED Viewed

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

package/dist/src/components/flow/flow-page.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFlowStore } from '@/stores/use-flow-store';
+import { useStreamItem } from '@motiadev/stream-client-react';
+import { FlowView } from './flow-view';
+export const FlowPage = () => {
+    const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
+    const { data: flow } = useStreamItem({
+        streamName: '__motia.flows',
+        groupId: 'default',
+        id: selectedFlowId ?? '',
+    });
+    const { data: flowConfig } = useStreamItem({
+        streamName: '__motia.flowsConfig',
+        groupId: 'default',
+        id: selectedFlowId ?? '',
+    });
+    if (!flow || flow.error)
+        return (_jsx("div", { className: "w-full h-full bg-background flex flex-col items-center justify-center", children: _jsx("p", { children: flow?.error }) }));
+    return _jsx(FlowView, { flow: flow, flowConfig: flowConfig });
+};

package/dist/src/components/flow/flow-tab-menu-item.d.ts ADDED Viewed

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

package/dist/src/components/flow/flow-tab-menu-item.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@motiadev/ui';
+import { ChevronsUpDown, Workflow } from 'lucide-react';
+import { useFlowStore } from '@/stores/use-flow-store';
+import { useFetchFlows } from '@/hooks/use-fetch-flows';
+export const FlowTabMenuItem = () => {
+    useFetchFlows();
+    const selectFlowId = useFlowStore((state) => state.selectFlowId);
+    const flows = useFlowStore((state) => state.flows);
+    const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
+    if (flows.length === 0) {
+        return null;
+    }
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("div", { className: "flex flex-row justify-center items-center gap-2 cursor-pointer", children: [_jsx(Workflow, {}), selectedFlowId ?? 'No flow selected', _jsx(ChevronsUpDown, { className: "size-4" })] }) }), _jsx(DropdownMenuContent, { className: "bg-background text-foreground", children: flows.map((item) => (_jsx(DropdownMenuItem, { className: "cursor-pointer gap-2", onClick: () => selectFlowId(item), children: item }, `dropdown-${item}`))) })] }));
+};

package/dist/src/{views → components}/flow/flow-view.d.ts RENAMED Viewed

@@ -1,7 +1,6 @@
+import { EdgeData, FlowConfigResponse, FlowResponse, NodeData } from '@/types/flow';
 import { Edge as ReactFlowEdge, Node as ReactFlowNode } from '@xyflow/react';
 import React from 'react';
-import { EdgeData, NodeData } from './nodes/nodes.types';
-import { FlowConfigResponse, FlowResponse } from './hooks/use-get-flow-state';
 import '@xyflow/react/dist/style.css';
 export type FlowNode = ReactFlowNode<NodeData>;
 export type FlowEdge = ReactFlowEdge<EdgeData>;

package/dist/src/components/flow/flow-view.js ADDED Viewed

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Background, BackgroundVariant, ReactFlow, } from '@xyflow/react';
+import { useCallback, useState } from 'react';
+import { BaseEdge } from './base-edge';
+import { FlowLoader } from './flow-loader';
+import { useGetFlowState } from './hooks/use-get-flow-state';
+import { NodeOrganizer } from './node-organizer';
+import '@xyflow/react/dist/style.css';
+const edgeTypes = {
+    base: BaseEdge,
+};
+export const FlowView = ({ flow, flowConfig }) => {
+    const { nodes, edges, onNodesChange, onEdgesChange, nodeTypes } = useGetFlowState(flow, flowConfig);
+    const [initialized, setInitialized] = useState(false);
+    const onInitialized = useCallback(() => setInitialized(true), []);
+    const onNodesChangeHandler = useCallback((changes) => onNodesChange(changes), [onNodesChange]);
+    if (!nodeTypes) {
+        return null;
+    }
+    return (_jsxs("div", { className: "w-full h-full relative", children: [!initialized && _jsx(FlowLoader, {}), _jsxs(ReactFlow, { nodes: nodes, edges: edges, 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 })] })] }));
+};

package/dist/src/components/flow/hooks/use-get-flow-state.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type { EdgeData, FlowConfigResponse, FlowResponse, NodeData } from '@/types/flow';
+import { Edge, Node } from '@xyflow/react';
+import React from 'react';
+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, React.ComponentType<any>>;
+};

package/dist/src/{views → components}/flow/hooks/use-get-flow-state.js RENAMED Viewed

@@ -1,14 +1,14 @@
 import { useEdgesState, useNodesState } from '@xyflow/react';
-import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import isEqual from 'fast-deep-equal';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ApiFlowNode } from '../nodes/api-flow-node';
-import { NoopFlowNode } from '../nodes/noop-flow-node';
+import { CronFlowNode } from '../nodes/cron-flow-node';
 import { EventFlowNode } from '../nodes/event-flow-node';
-import { CronNode } from '@/publicComponents/cron-node';
-import isEqual from 'fast-deep-equal';
-import { useSaveWorkflowConfig } from '@/views/flow/hooks/use-save-workflow-config';
-const DEFAULT_POSITION = { x: 0, y: 0 };
+import { NoopFlowNode } from '../nodes/noop-flow-node';
+import { useSaveWorkflowConfig } from './use-save-workflow-config';
+const DEFAULT_CONFIG = { x: 0, y: 0 };
 const getNodePosition = (flowConfig, stepName) => {
-    return flowConfig?.config[stepName] || DEFAULT_POSITION;
+    return flowConfig?.config[stepName] || DEFAULT_CONFIG;
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const nodeComponentCache = new Map();
@@ -17,7 +17,7 @@ const BASE_NODE_TYPES = {
     event: EventFlowNode,
     api: ApiFlowNode,
     noop: NoopFlowNode,
-    cron: CronNode,
+    cron: CronFlowNode,
 };
 async function importFlow(flow, flowConfig) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -46,8 +46,8 @@ async function importFlow(flow, flowConfig) {
         id: step.id,
         type: step.nodeComponentPath || step.type,
         filePath: step.filePath,
-        position: step.filePath ? getNodePosition(flowConfig, step.filePath) : DEFAULT_POSITION,
-        data: step,
+        position: step.filePath ? getNodePosition(flowConfig, step.filePath) : DEFAULT_CONFIG,
+        data: { ...step, nodeConfig: step.filePath ? getNodePosition(flowConfig, step.filePath) : DEFAULT_CONFIG },
         language: step.language,
     }));
     const edges = flow.edges.map((edge) => ({
@@ -102,10 +102,17 @@ export const useGetFlowState = (flow, flowConfig) => {
                         x: Math.round(node.position.x),
                         y: Math.round(node.position.y),
                     };
+                    if (node.data.nodeConfig?.sourceHandlePosition) {
+                        acc[node.data.filePath].sourceHandlePosition = node.data.nodeConfig.sourceHandlePosition;
+                    }
+                    if (node.data.nodeConfig?.targetHandlePosition) {
+                        acc[node.data.filePath].targetHandlePosition = node.data.nodeConfig.targetHandlePosition;
+                    }
                 }
                 return acc;
             }, {});
             if (!isEqual(steps, lastSavedConfigRef.current)) {
+                console.log('steps', steps, lastSavedConfigRef.current);
                 lastSavedConfigRef.current = steps;
                 const newConfig = { id: flowIdRef.current, config: steps };
                 try {

package/dist/src/{views → components}/flow/hooks/use-organize-nodes.d.ts RENAMED Viewed

@@ -1,3 +1,3 @@
+import { ApiNodeData, EdgeData, EventNodeData } from '@/types/flow';
 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;

package/dist/src/{views → components}/flow/hooks/use-save-workflow-config.d.ts RENAMED Viewed

@@ -1,2 +1,2 @@
-import { FlowConfigResponse } from '@/views/flow/hooks/use-get-flow-state';
+import { FlowConfigResponse } from '@/types/flow';
 export declare const useSaveWorkflowConfig: () => (body: FlowConfigResponse) => Promise<any>;

package/dist/src/components/flow/nodes/api-flow-node.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { ApiNodeProps } from '@/publicComponents/node-props';
2	+ export declare const ApiFlowNode: ({ data }: ApiNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/{views → components}/flow/nodes/api-flow-node.js RENAMED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ApiNode } from '../../../publicComponents/api-node';
+import { ApiNode } from '@/publicComponents/api-node';
 export const ApiFlowNode = ({ data }) => {
     return _jsx(ApiNode, { data: data });
 };

package/dist/src/components/flow/nodes/cron-flow-node.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { CronNodeProps } from '@/publicComponents/node-props';
2	+ export declare const CronFlowNode: ({ data }: CronNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/flow/nodes/cron-flow-node.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CronNode } from '@/publicComponents/cron-node';
+export const CronFlowNode = ({ data }) => {
+    return _jsx(CronNode, { data: data });
+};

package/dist/src/{views → components}/flow/nodes/event-flow-node.d.ts RENAMED Viewed

@@ -1,2 +1,2 @@
-import { EventNodeProps } from '../../../publicComponents/node-props';
+import { EventNodeProps } from '@/publicComponents/node-props';
 export declare const EventFlowNode: ({ data }: EventNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/flow/nodes/event-flow-node.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EventNode } from '@/publicComponents/event-node';
+export const EventFlowNode = ({ data }) => {
+    return _jsx(EventNode, { data: data });
+};

package/dist/src/components/flow/nodes/noop-flow-node.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { NoopNodeProps } from '@/publicComponents/node-props';
2	+ export declare const NoopFlowNode: ({ data }: NoopNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/{views → components}/flow/nodes/noop-flow-node.js RENAMED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { NoopNode } from '../../../publicComponents/noop-node';
+import { NoopNode } from '@/publicComponents/noop-node';
 export const NoopFlowNode = ({ data }) => {
     return _jsx(NoopNode, { data: data });
 };