@motiadev/workbench 0.6.1-beta.124 → 0.6.2-beta.126

package/dist/index.html

@@ -27,22 +27,6 @@
       })
     </script>
 
-    <!-- Start of Reo Javascript -->
-    <script type="text/javascript">
-      !(function () {
-        var e, t, n
-        ;(e = 'd8f0ce9cae8ae64'),
-          (t = function () {
-            Reo.init({ clientID: 'd8f0ce9cae8ae64' })
-          }),
-          ((n = document.createElement('script')).src = 'https://static.reo.dev/' + e + '/reo.js'),
-          (n.defer = !0),
-          (n.onload = t),
-          document.head.appendChild(n)
-      })()
-    </script>
-    <!-- End of Reo Javascript -->
-
     <script>
       const importFile = async (path) => {
         // Normalize the path for cross-platform compatibility

package/dist/middleware.d.ts

@@ -1,2 +1,2 @@
 import type { Express } from 'express';
-export declare const applyMiddleware: (app: Express) => Promise<void>;
+export declare const applyMiddleware: (app: Express, port: number) => Promise<void>;

package/dist/middleware.js

@@ -18,7 +18,24 @@ const processCwdPlugin = () => {
         },
     };
 };
-const applyMiddleware = async (app) => {
+const reoPlugin = () => {
+    return {
+        name: 'html-transform',
+        transformIndexHtml(html) {
+            const isAnalyticsEnabled = process.env.MOTIA_ANALYTICS_DISABLED !== 'true';
+            if (!isAnalyticsEnabled) {
+                return html;
+            }
+            // inject before </head>
+            return html.replace('</head>', `
+        <script type="text/javascript">
+          !function(){var e,t,n;e="d8f0ce9cae8ae64",t=function(){Reo.init({clientID:"d8f0ce9cae8ae64", source: "internal"})},(n=document.createElement("script")).src="https://static.reo.dev/"+e+"/reo.js",n.defer=!0,n.onload=t,document.head.appendChild(n)}();
+        </script>
+    </head>`);
+        },
+    };
+};
+const applyMiddleware = async (app, port) => {
     const vite = await (0, vite_1.createServer)({
         appType: 'spa',
         root: __dirname,
@@ -26,6 +43,7 @@ const applyMiddleware = async (app) => {
             middlewareMode: true,
             allowedHosts: true,
             host: true,
+            hmr: { port: 21678 + port },
             fs: {
                 allow: [
                     __dirname, // workbench root
@@ -37,7 +55,7 @@ const applyMiddleware = async (app) => {
         resolve: {
             alias: { '@': path_1.default.resolve(__dirname, './src') },
         },
-        plugins: [(0, plugin_react_1.default)(), processCwdPlugin()],
+        plugins: [(0, plugin_react_1.default)(), processCwdPlugin(), reoPlugin()],
     });
     app.use(vite.middlewares);
     app.use('*', async (req, res, next) => {

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

@@ -17,5 +17,5 @@ export const FlowView = ({ flow, flowConfig }) => {
     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 })] })] }));
+    return (_jsxs("div", { className: "w-full h-full relative", children: [!initialized && _jsx(FlowLoader, {}), _jsxs(ReactFlow, { minZoom: 0.1, nodes: nodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesChange: onNodesChangeHandler, onEdgesChange: onEdgesChange, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 50, size: 2, className: "bg-canvas-background!" }), _jsx(NodeOrganizer, { onInitialized: onInitialized, nodes: nodes, edges: edges })] })] }));
 };

package/dist/src/components/flow/node-organizer.d.ts

@@ -1,6 +1,10 @@
+import { EdgeData, NodeData } from '@/types/flow';
+import { Edge, Node } from '@xyflow/react';
 import React from 'react';
 type Props = {
     onInitialized: () => void;
+    nodes: Node<NodeData>[];
+    edges: Edge<EdgeData>[];
 };
 export declare const NodeOrganizer: React.FC<Props>;
 export {};

package/dist/src/components/flow/node-organizer.js

@@ -1,21 +1,82 @@
 import { useNodesInitialized, useReactFlow } from '@xyflow/react';
+import dagre from 'dagre';
+import isEqual from 'fast-deep-equal';
 import { useEffect, useRef } from 'react';
-export const NodeOrganizer = ({ onInitialized }) => {
+const organizeNodes = (nodes, edges) => {
+    const dagreGraph = new dagre.graphlib.Graph({ directed: true, compound: false, multigraph: false });
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+    dagreGraph.setGraph({ rankdir: 'LR', ranksep: 0, nodesep: 20, edgesep: 0 });
+    nodes.forEach((node) => {
+        if (node.position.x !== 0 || node.position.y !== 0) {
+            dagreGraph.setNode(node.id, {
+                width: node.measured?.width,
+                height: node.measured?.height,
+                x: node.position.x,
+                y: node.position.y,
+            });
+        }
+        else {
+            dagreGraph.setNode(node.id, {
+                width: node.measured?.width,
+                height: node.measured?.height,
+            });
+        }
+    });
+    edges.forEach((edge) => {
+        if (typeof edge.label === 'string') {
+            dagreGraph.setEdge(edge.source, edge.target, {
+                label: edge.label ?? '',
+                width: edge.label.length * 40, // Add width for the label
+                height: 30, // Add height for the label
+                labelpos: 'c', // Position label in center
+            });
+        }
+        else {
+            dagreGraph.setEdge(edge.source, edge.target);
+        }
+    });
+    dagre.layout(dagreGraph);
+    return nodes.map((node) => {
+        if (node.position.x !== 0 || node.position.y !== 0) {
+            return node;
+        }
+        const { x, y } = dagreGraph.node(node.id);
+        const position = {
+            x: x - (node.measured?.width ?? 0) / 2,
+            y: y - (node.measured?.height ?? 0) / 2,
+        };
+        return { ...node, position };
+    });
+};
+export const NodeOrganizer = ({ onInitialized, nodes, edges }) => {
     const { setNodes, getNodes, getEdges, fitView } = useReactFlow();
     const nodesInitialized = useNodesInitialized();
     const initialized = useRef(false);
+    const lastNodesRef = useRef([]);
+    const lastEdgesRef = useRef([]);
     useEffect(() => {
-        if (nodesInitialized && !initialized.current) {
-            initialized.current = true;
-            // const nodes = getNodes() as Node<EventNodeData | ApiNodeData>[]
-            // const edges = getEdges() as Edge<EdgeData>[]
-            // const organizedNodes = organizeNodes(nodes, edges)
-            // setNodes(organizedNodes)
-            onInitialized();
-            setTimeout(async () => {
-                await fitView();
-            }, 1);
+        if (nodesInitialized) {
+            if (isEqual(lastNodesRef.current, nodes) && isEqual(lastEdgesRef.current, edges)) {
+                return;
+            }
+            lastNodesRef.current = nodes;
+            lastEdgesRef.current = edges;
+            try {
+                const nodesToOrganize = nodes.some((node) => node.position.x === 0 && node.position.y === 0);
+                if (nodesToOrganize) {
+                    const organizedNodes = organizeNodes(nodes, edges);
+                    setNodes(organizedNodes);
+                }
+                if (!initialized.current) {
+                    initialized.current = true;
+                    onInitialized();
+                    setTimeout(() => fitView(), 1);
+                }
+            }
+            catch (error) {
+                console.error('Error organizing nodes:', error);
+            }
         }
-    }, [nodesInitialized, onInitialized, setNodes, getNodes, getEdges, fitView]);
+    }, [nodesInitialized, onInitialized, setNodes, getNodes, getEdges, fitView, nodes, edges]);
     return null;
 };

package/dist/src/components/logs/log-level-dot.js

@@ -4,11 +4,11 @@ const badgeVariants = cva('text-xs font-medium tracking-wide rounded-full h-[6px
     variants: {
         variant: {
             info: 'bg-[#2862FE] outline-[#2862FE]/20',
-            trace: 'bg-sky-500 outline-sky-500',
-            debug: 'bg-sky-500 outline-sky-500',
-            error: 'bg-rose-500 outline-rose-500',
-            fatal: 'bg-rose-500 outline-rose-500',
-            warn: 'bg-amber-500 outline-amber-500',
+            trace: 'bg-[#2862FE] outline-[#2862FE]/20',
+            debug: 'bg-[#2862FE] outline-[#2862FE]/20',
+            error: 'bg-[#E22A6D] outline-[#E22A6D]/20',
+            fatal: 'bg-[#E22A6D] outline-[#E22A6D]/20',
+            warn: 'bg-[#F59F0B] outline-[#F59F0B]/20',
         },
     },
 });

package/dist/src/hooks/use-update-handle-positions.js

@@ -2,8 +2,8 @@ import { Position, useReactFlow, useUpdateNodeInternals } from '@xyflow/react';
 export const useHandlePositions = (data) => {
     const reactFlow = useReactFlow();
     const updateNodeInternals = useUpdateNodeInternals();
-    const sourcePosition = data.nodeConfig?.sourceHandlePosition === 'right' ? Position.Right : Position.Bottom;
-    const targetPosition = data.nodeConfig?.targetHandlePosition === 'left' ? Position.Left : Position.Top;
+    const sourcePosition = data.nodeConfig?.sourceHandlePosition === 'bottom' ? Position.Bottom : Position.Right;
+    const targetPosition = data.nodeConfig?.targetHandlePosition === 'top' ? Position.Top : Position.Left;
     const updateSourcePosition = (position) => {
         reactFlow.updateNode(data.id, {
             data: { ...data, nodeConfig: { ...data.nodeConfig, sourceHandlePosition: position } },

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

@@ -24,7 +24,7 @@ export const BaseNode = ({ title, variant, children, disableSourceHandle, disabl
     }, [data.id, isOpen, fetchContent]);
     return (_jsxs("div", { className: cn('p-1 rounded-lg max-w-[350px]', {
             'bg-muted-foreground/20': isOpen,
-        }), children: [_jsx("div", { className: "rounded-lg bg-background border-1 border-muted-foreground/30 border-solid", "data-testid": `node-${title?.toLowerCase().replace(/ /g, '-')}`, children: _jsxs("div", { className: "group relative", children: [_jsx(NodeHeader, { text: title, variant: variant, className: "border-b-2 border-muted-foreground/10", children: _jsx("div", { className: "flex justify-end", children: _jsx(Button, { "data-testid": `open-code-preview-button-${title?.toLowerCase()}`, variant: "ghost", className: "h-5 p-0.5", onClick: () => setIsOpen(true), children: _jsx(ScanSearch, { className: "w-4 h-4" }) }) }) }), subtitle && _jsx("div", { className: "py-4 px-6 text-sm text-muted-foreground", children: subtitle }), children && (_jsx("div", { className: "p-2", children: _jsx("div", { className: cn('space-y-3 p-4 text-sm text-muted-foreground', {
+        }), children: [_jsx("div", { className: "rounded-lg dark:bg-[#222] bg-background border-1 border-muted-foreground/30 border-solid", "data-testid": `node-${title?.toLowerCase().replace(/ /g, '-')}`, children: _jsxs("div", { className: "group relative", children: [_jsx(NodeHeader, { text: title, variant: variant, className: "border-b-2 border-muted-foreground/10", children: _jsx("div", { className: "flex justify-end", children: _jsx(Button, { "data-testid": `open-code-preview-button-${title?.toLowerCase()}`, variant: "ghost", className: "h-5 p-0.5", onClick: () => setIsOpen(true), children: _jsx(ScanSearch, { className: "w-4 h-4" }) }) }) }), subtitle && _jsx("div", { className: "py-4 px-6 text-sm text-muted-foreground", children: subtitle }), children && (_jsx("div", { className: "p-2", children: _jsx("div", { className: cn('space-y-3 p-4 text-sm text-muted-foreground', {
                                     'bg-card': variant !== 'noop',
                                 }), children: children }) })), !disableTargetHandle && (_jsx(BaseHandle, { type: "target", position: targetPosition, onTogglePosition: toggleTargetPosition })), !disableSourceHandle && (_jsx(BaseHandle, { type: "source", position: sourcePosition, onTogglePosition: toggleSourcePosition }))] }) }), content && (_jsx(NodeSidebar, { features: features, content: content, title: title, subtitle: subtitle, variant: variant, language: language, isOpen: isOpen, onClose: () => setIsOpen(false) }))] }));
 };