@motiadev/workbench 0.2.1-beta.54 → 0.2.1-beta.56

package/dist/src/views/flow/flow-loader.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const FlowLoader = () => {
-    return _jsx("div", { className: "absolute z-10 inset-0 w-full h-full bg-[#060911]" });
+    return _jsx("div", { className: "absolute z-10 inset-0 w-full h-full bg-background" });
 };

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// packages/workbench/src/views/flow/flow-view.tsx
 import { LogConsole } from '@/components/logs/log-console';
 import { Background, BackgroundVariant, ReactFlow, useReactFlow } from '@xyflow/react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ArrowHead } from './arrow-head';
 import { BaseEdge } from './base-edge';
 import { FlowLoader } from './flow-loader';
@@ -25,25 +24,25 @@ export const FlowView = ({ flow, flowConfig }) => {
     const onInitialized = useCallback(() => {
         setTimeout(() => setInitialized(true), 10);
     }, []);
-    const getClassName = (nodeType) => {
+    const getClassName = useCallback((nodeType) => {
         if (!hoveredType)
             return '';
         if (nodeType) {
             return nodeType === hoveredType
-                ? 'border border-white/30 scale-[1.02] transition-all duration-300'
+                ? 'border border-border scale-[1.02] transition-all duration-300'
                 : 'opacity-30 transition-all duration-300';
         }
         // If no nodeType is provided, this is an edge
         return 'opacity-30 transition-all duration-300';
-    };
-    const nodesWithHighlights = nodes.map((node) => ({
+    }, [hoveredType]);
+    const nodesWithHighlights = useMemo(() => nodes.map((node) => ({
         ...node,
         className: getClassName(node.data.type),
-    }));
-    const edgesWithHighlights = edges.map((edge) => ({
+    })), [nodes, getClassName]);
+    const edgesWithHighlights = useMemo(() => edges.map((edge) => ({
         ...edge,
         className: getClassName(), // No argument means it's an edge
-    }));
+    })), [edges, getClassName]);
     const saveFlowConfig = useCallback(() => {
         const steps = getNodes().reduce((acc, node) => {
             if (node.data.filePath) {
@@ -61,5 +60,5 @@ export const FlowView = ({ flow, flowConfig }) => {
     if (!nodeTypes) {
         return null;
     }
-    return (_jsxs("div", { className: "w-full h-full relative bg-black", children: [!initialized && _jsx(FlowLoader, {}), _jsx(Legend, { onHover: setHoveredType }), _jsxs(ReactFlow, { nodes: nodesWithHighlights, edges: edgesWithHighlights, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesChange: onNodesChangeHandler, onEdgesChange: onEdgesChange, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 50, size: 2, color: "#222", bgColor: "#000" }), _jsx(NodeOrganizer, { onInitialized: onInitialized }), _jsx("svg", { children: _jsx("defs", { children: _jsx(ArrowHead, { color: "#B3B3B3", id: "arrowhead" }) }) })] }), _jsx(LogConsole, {})] }));
+    return (_jsxs("div", { className: "w-full h-full relative bg-background", children: [!initialized && _jsx(FlowLoader, {}), _jsx(Legend, { onHover: setHoveredType }), _jsxs(ReactFlow, { nodes: nodesWithHighlights, edges: edgesWithHighlights, 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 }), _jsx("svg", { className: "[--arrow-color:theme(colors.muted.foreground)]", children: _jsx("defs", { children: _jsx(ArrowHead, { id: "arrowhead" }) }) })] }), _jsx(LogConsole, {})] }));
 };

package/dist/src/views/flow/legend.js

@@ -1,10 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
-import { AnimatePresence, motion } from 'framer-motion';
 import { LayoutList, X } from 'lucide-react';
 import { useState } from 'react';
-import { colorMap } from '../../publicComponents/colorMap';
+import { colorMap } from '@/publicComponents/colorMap';
 const EdgeSwatch = ({ color, dashed }) => (_jsx("svg", { className: "my-1", width: "48", height: "10", viewBox: "0 0 48 10", xmlns: "http://www.w3.org/2000/svg", children: _jsx("line", { x1: "0", y1: "5", x2: "48", y2: "5", stroke: color, strokeWidth: "2", strokeDasharray: dashed ? '4' : 'none', strokeLinecap: "round" }) }));
 const legendItems = [
     {
@@ -41,12 +40,12 @@ const edgeLegendItems = [
     },
     {
         label: 'Virtual Edge',
-        color: 'rgb(111, 111, 111)',
+        color: 'hsl(var(--muted-foreground))',
         description: 'Represents virtual connections.',
         dashed: true,
     },
 ];
 export const Legend = ({ onHover }) => {
     const [isExpanded, setIsExpanded] = useState(false);
-    return (_jsx("div", { className: 'absolute right-4 top-4 z-10 max-w-[500px]', children: _jsxs("div", { className: cn('rounded-lg border border-zinc-700 bg-zinc-900/90 p-4 flex flex-col gap-4', !isExpanded && 'rounded-b-lg'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [isExpanded && _jsx("div", { className: "text-sm text-gray-400 uppercase", children: "Flow Legend" }), _jsx("div", { className: "flex-1 flex justify-end", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setIsExpanded(!isExpanded), className: "p-2 hover:bg-white/10", children: isExpanded ? _jsx(X, { size: 16 }) : _jsx(LayoutList, { size: 16 }) }) })] }), _jsx(AnimatePresence, { children: isExpanded && (_jsxs(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2 }, className: "overflow-hidden", children: [_jsx("div", { className: "grid grid-cols-2 gap-3", children: legendItems.map((item) => (_jsx("div", { onMouseEnter: () => onHover(item.type), onMouseLeave: () => onHover(null), className: "group cursor-pointer transition-all hover:bg-white/5 rounded-md p-2", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "w-[8px] h-[8px] mt-[4px] rounded-full", style: { backgroundColor: item.color } }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-white text-sm font-medium", children: item.label }), _jsx("div", { className: "text-white/60 text-sm mt-0.5", children: item.description })] })] }) }, item.type))) }), _jsx("div", { className: "h-px bg-zinc-700 my-4" }), _jsx("div", { className: "text-sm text-gray-400 uppercase pb-4", children: "Edge Legend" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: edgeLegendItems.map((item) => (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx(EdgeSwatch, { color: item.color, dashed: item.dashed }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-white text-sm font-medium", children: item.label }), _jsx("div", { className: "text-white/60 text-sm mt-0.5", children: item.description })] })] }, item.label))) })] })) })] }) }));
+    return (_jsx("div", { className: 'absolute right-4 top-4 z-10 max-w-[500px]', children: _jsxs("div", { className: cn('rounded-lg border border-border bg-background/90 p-4 flex flex-col', !isExpanded && 'rounded-b-lg', isExpanded && 'gap-4'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [isExpanded && _jsx("div", { className: "text-sm text-muted-foreground uppercase", children: "Flow Legend" }), _jsx("div", { className: "flex-1 flex justify-end", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setIsExpanded(!isExpanded), className: "p-2 hover:bg-muted", children: isExpanded ? _jsx(X, { size: 16 }) : _jsx(LayoutList, { size: 16 }) }) })] }), _jsx("div", { className: cn('overflow-hidden transition-all duration-200 ease-in-out', isExpanded ? 'max-h-[600px] opacity-100' : 'max-h-0 opacity-0'), children: isExpanded && (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-2 gap-3", children: legendItems.map((item) => (_jsx("div", { onMouseEnter: () => onHover(item.type), onMouseLeave: () => onHover(null), className: "group cursor-pointer transition-all hover:bg-muted/20 rounded-md p-2", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "w-[8px] h-[8px] mt-[4px] rounded-full", style: { backgroundColor: item.color } }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-foreground text-sm font-medium", children: item.label }), _jsx("div", { className: "text-muted-foreground text-sm mt-0.5", children: item.description })] })] }) }, item.type))) }), _jsx("div", { className: "h-px bg-border my-4" }), _jsx("div", { className: "text-sm text-muted-foreground uppercase pb-4", children: "Edge Legend" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: edgeLegendItems.map((item) => (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx(EdgeSwatch, { color: item.color, dashed: item.dashed }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-foreground text-sm font-medium", children: item.label }), _jsx("div", { className: "text-muted-foreground text-sm mt-0.5", children: item.description })] })] }, item.label))) })] })) })] }) }));
 };