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

package/dist/index.html

@@ -26,22 +26,6 @@
         optOut: true,
       })
     </script>
-    
-    <!-- Start of Reo Javascript -->
-    <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>
-    <!-- End of Reo Javascript -->
 
     <script>
       const importFile = async (path) => {

package/dist/middleware.js

@@ -18,6 +18,23 @@ const processCwdPlugin = () => {
         },
     };
 };
+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',
@@ -38,7 +55,7 @@ const applyMiddleware = async (app, port) => {
         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,12 +1,26 @@
 import { useNodesInitialized, useReactFlow } from '@xyflow/react';
-import { useEffect, useRef } from 'react';
 import dagre from 'dagre';
+import isEqual from 'fast-deep-equal';
+import { useEffect, useRef } from 'react';
 const organizeNodes = (nodes, edges) => {
-    const dagreGraph = new dagre.graphlib.Graph({ compound: true });
+    const dagreGraph = new dagre.graphlib.Graph({ directed: true, compound: false, multigraph: false });
     dagreGraph.setDefaultEdgeLabel(() => ({}));
-    dagreGraph.setGraph({ rankdir: 'LR', ranksep: 80, nodesep: 60, edgesep: 20, ranker: 'tight-tree' });
+    dagreGraph.setGraph({ rankdir: 'LR', ranksep: 0, nodesep: 20, edgesep: 0 });
     nodes.forEach((node) => {
-        dagreGraph.setNode(node.id, { width: node.measured?.width, height: node.measured?.height });
+        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') {
@@ -34,20 +48,35 @@ const organizeNodes = (nodes, edges) => {
         return { ...node, position };
     });
 };
-export const NodeOrganizer = ({ onInitialized }) => {
+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();
-            const edges = getEdges();
-            const organizedNodes = organizeNodes(nodes, edges);
-            setNodes(organizedNodes);
-            onInitialized();
-            setTimeout(() => 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/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) }))] }));
 };