@motiadev/workbench 0.6.0-beta.123 → 0.6.2-beta.125

package/dist/index.html

@@ -27,25 +27,35 @@
       })
     </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) => {
-        return await import(/* @vite-ignore */ `/@fs/${processCwd}/${path}`)
+        // Normalize the path for cross-platform compatibility
+        const normalizedPath = path.replace(/\\/g, '/')
+        const fullPath = `${processCwd}/${normalizedPath}`.replace(/\\/g, '/')
+        
+        // Handle Windows drive letters properly
+        let importPath = fullPath
+        if (navigator.platform.includes('Win')) {
+          // On Windows, ensure proper drive letter handling
+          if (fullPath.match(/^[A-Za-z]:/)) {
+            importPath = `/@fs/${fullPath}`
+          } else {
+            importPath = `/@fs/${fullPath}`
+          }
+        } else {
+          importPath = `/@fs/${fullPath}`
+        }
+        
+        try {
+          return await import(/* @vite-ignore */ importPath)
+        } catch (error) {
+          console.error(`Failed to import ${path}:`, error)
+          // Return empty module if tutorial.tsx doesn't exist
+          if (path === 'tutorial.tsx') {
+            return { steps: [] }
+          }
+          throw error
+        }
       }
     </script>
 

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

@@ -12,12 +12,30 @@ const processCwdPlugin = () => {
     return {
         name: 'html-transform',
         transformIndexHtml: (html) => {
-            const cwd = process.cwd();
+            // Normalize path for cross-platform compatibility
+            const cwd = process.cwd().replace(/\\/g, '/');
             return html.replace('</head>', `<script>const processCwd = "${cwd}";</script></head>`);
         },
     };
 };
-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,
@@ -25,6 +43,7 @@ const applyMiddleware = async (app) => {
             middlewareMode: true,
             allowedHosts: true,
             host: true,
+            hmr: { port: 21678 + port },
             fs: {
                 allow: [
                     __dirname, // workbench root
@@ -36,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/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/components/tutorial/hooks/use-tutorial-engine.js

@@ -38,6 +38,7 @@ export const useTutorialEngine = () => {
             // Run any before actions
             if (step.before) {
                 for (const action of step.before) {
+                    const monaco = window.monaco;
                     if (action.type === 'click') {
                         const element = await waitForElementByXPath(action.selector, action.optional);
                         if (element) {
@@ -131,10 +132,15 @@ export const useTutorialEngine = () => {
         }
     };
     useEffect(() => {
-        importFile('tutorial.tsx').then((module) => {
+        importFile('tutorial.tsx')
+            .then((module) => {
             if (Array.isArray(module.steps) && module.steps.length > 0) {
                 MotiaTutorial.register(module.steps);
             }
+        })
+            .catch((error) => {
+            // Tutorial file is optional, so we don't need to throw an error
+            console.log('Tutorial file not found or could not be loaded:', error.message);
         });
     }, []);
     useEffect(() => {

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 } },