@motiadev/workbench 0.5.11-beta.120-382150 → 0.5.11-beta.120-391598

package/dist/index.html

@@ -26,14 +26,14 @@
         optOut: true,
       })
     </script>
-
+    
     <!-- Start of Reo Javascript -->
     <script type="text/javascript">
       !(function () {
         var e, t, n
         ;(e = 'd8f0ce9cae8ae64'),
           (t = function () {
-            Reo.init({ clientID: 'd8f0ce9cae8ae64' })
+            Reo.init({ clientID: 'd8f0ce9cae8ae64', source: 'internal' })
           }),
           ((n = document.createElement('script')).src = 'https://static.reo.dev/' + e + '/reo.js'),
           (n.defer = !0),

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,7 @@ const processCwdPlugin = () => {
         },
     };
 };
-const applyMiddleware = async (app) => {
+const applyMiddleware = async (app, port) => {
     const vite = await (0, vite_1.createServer)({
         appType: 'spa',
         root: __dirname,
@@ -26,6 +26,7 @@ const applyMiddleware = async (app) => {
             middlewareMode: true,
             allowedHosts: true,
             host: true,
+            hmr: { port: 21678 + port },
             fs: {
                 allow: [
                     __dirname, // workbench root

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

@@ -1,5 +1,39 @@
 import { useNodesInitialized, useReactFlow } from '@xyflow/react';
 import { useEffect, useRef } from 'react';
+import dagre from 'dagre';
+const organizeNodes = (nodes, edges) => {
+    const dagreGraph = new dagre.graphlib.Graph({ compound: true });
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+    dagreGraph.setGraph({ rankdir: 'LR', ranksep: 80, nodesep: 60, edgesep: 20, ranker: 'tight-tree' });
+    nodes.forEach((node) => {
+        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 }) => {
     const { setNodes, getNodes, getEdges, fitView } = useReactFlow();
     const nodesInitialized = useNodesInitialized();
@@ -7,14 +41,12 @@ export const NodeOrganizer = ({ onInitialized }) => {
     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)
+            const nodes = getNodes();
+            const edges = getEdges();
+            const organizedNodes = organizeNodes(nodes, edges);
+            setNodes(organizedNodes);
             onInitialized();
-            setTimeout(async () => {
-                await fitView();
-            }, 1);
+            setTimeout(() => fitView(), 1);
         }
     }, [nodesInitialized, onInitialized, setNodes, getNodes, getEdges, fitView]);
     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 } },