@motiadev/workbench 0.14.0-beta.165-285707 → 0.15.0-beta.165

package/dist/motia-plugin/validator.js

@@ -1,163 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.validatePluginConfig = validatePluginConfig;
-exports.validatePlugins = validatePlugins;
-const fs_1 = require("fs");
-const zod_1 = require("zod");
-const types_1 = require("./types");
-const utils_1 = require("./utils");
-/**
- * Zod schema for WorkbenchPlugin configuration.
- * Provides runtime type validation with detailed error messages.
- */
-const WorkbenchPluginSchema = zod_1.z.object({
-    packageName: zod_1.z
-        .string()
-        .min(1, 'packageName is required and cannot be empty')
-        .refine((name) => name.startsWith('~/') || name.startsWith('@') || /^[a-z0-9-_]+$/i.test(name), {
-        message: 'packageName must be a valid npm package name or local path (starting with ~/)',
-    }),
-    componentName: zod_1.z.string().optional(),
-    position: zod_1.z
-        .enum(['top', 'bottom'])
-        .optional()
-        .refine((pos) => pos === undefined || (0, types_1.isValidPosition)(pos), {
-        message: 'position must be either "top" or "bottom"',
-    }),
-    label: zod_1.z.string().optional(),
-    labelIcon: zod_1.z.string().optional(),
-    cssImports: zod_1.z.array(zod_1.z.string()).optional(),
-    props: zod_1.z.record(zod_1.z.any(), zod_1.z.any()).optional(),
-});
-/**
- * Validates a single plugin configuration.
- *
- * @param plugin - The plugin configuration to validate
- * @param index - The index of the plugin in the array (for error messages)
- * @returns A validation result with errors, warnings, and normalized plugin
- */
-function validatePluginConfig(plugin, index) {
-    const errors = [];
-    const warnings = [];
-    if (typeof plugin !== 'object' || plugin === null) {
-        return {
-            valid: false,
-            errors: [`Plugin at index ${index}: expected object, got ${typeof plugin}`],
-            warnings: [],
-        };
-    }
-    try {
-        const result = WorkbenchPluginSchema.safeParse(plugin);
-        if (!result.success) {
-            result.error.issues.forEach((err) => {
-                const path = err.path.join('.');
-                errors.push(`Plugin at index ${index}, field "${path}": ${err.message}`);
-            });
-            return { valid: false, errors, warnings };
-        }
-        const validatedPlugin = result.data;
-        if ((0, utils_1.isLocalPlugin)(validatedPlugin.packageName)) {
-            const resolvedPath = (0, utils_1.resolveLocalPath)(validatedPlugin.packageName);
-            if (!(0, fs_1.existsSync)(resolvedPath)) {
-                warnings.push(`Plugin at index ${index}: local path "${validatedPlugin.packageName}" does not exist at "${resolvedPath}". ` +
-                    `Make sure the path is correct relative to the project root.`);
-            }
-        }
-        if (!validatedPlugin.label) {
-            warnings.push(`Plugin at index ${index}: "label" not specified, will use default "${types_1.CONSTANTS.DEFAULTS.LABEL}"`);
-        }
-        if (!validatedPlugin.labelIcon) {
-            warnings.push(`Plugin at index ${index}: "labelIcon" not specified, will use default "${types_1.CONSTANTS.DEFAULTS.ICON}"`);
-        }
-        if (!validatedPlugin.position) {
-            warnings.push(`Plugin at index ${index}: "position" not specified, will use default "${types_1.CONSTANTS.DEFAULTS.POSITION}"`);
-        }
-        if (validatedPlugin.props && Object.keys(validatedPlugin.props).length === 0) {
-            warnings.push(`Plugin at index ${index}: "props" is an empty object`);
-        }
-        if (validatedPlugin.cssImports) {
-            if (validatedPlugin.cssImports.length === 0) {
-                warnings.push(`Plugin at index ${index}: "cssImports" is an empty array`);
-            }
-            validatedPlugin.cssImports.forEach((cssImport, cssIndex) => {
-                if (!cssImport || cssImport.trim() === '') {
-                    warnings.push(`Plugin at index ${index}: cssImport at index ${cssIndex} is empty or whitespace`);
-                }
-            });
-        }
-        return {
-            valid: true,
-            errors: [],
-            warnings,
-            plugin: validatedPlugin,
-        };
-    }
-    catch (error) {
-        return {
-            valid: false,
-            errors: [`Plugin at index ${index}: unexpected validation error: ${error}`],
-            warnings: [],
-        };
-    }
-}
-/**
- * Validates an array of plugin configurations.
- *
- * @param plugins - Array of plugin configurations to validate
- * @param options - Validation options
- * @returns Combined validation result for all plugins
- */
-function validatePlugins(plugins, options = {}) {
-    const allErrors = [];
-    const allWarnings = [];
-    const validatedPlugins = [];
-    if (!Array.isArray(plugins)) {
-        return {
-            valid: false,
-            errors: [`Expected plugins to be an array, got ${typeof plugins}`],
-            warnings: [],
-        };
-    }
-    if (plugins.length === 0) {
-        console.warn('[motia-plugins] No plugins provided to validate');
-        return {
-            valid: true,
-            errors: [],
-            warnings: ['No plugins configured'],
-        };
-    }
-    for (let i = 0; i < plugins.length; i++) {
-        const result = validatePluginConfig(plugins[i], i);
-        allErrors.push(...result.errors);
-        allWarnings.push(...result.warnings);
-        if (result.valid && result.plugin) {
-            validatedPlugins.push(result.plugin);
-        }
-        if (options.failFast && result.errors.length > 0) {
-            break;
-        }
-    }
-    const packageNames = validatedPlugins.map((p) => p.packageName);
-    const duplicates = packageNames.filter((name, index) => packageNames.indexOf(name) !== index);
-    if (duplicates.length > 0) {
-        const uniqueDuplicates = [...new Set(duplicates)];
-        uniqueDuplicates.forEach((dup) => {
-            allWarnings.push(`Duplicate package name found: "${dup}". This may cause conflicts.`);
-        });
-    }
-    const valid = allErrors.length === 0;
-    if (valid) {
-        console.log(`[motia-plugins] ✓ Validated ${validatedPlugins.length} plugin(s) successfully`);
-        if (allWarnings.length > 0) {
-            console.warn(`[motia-plugins] Found ${allWarnings.length} warning(s)`);
-        }
-    }
-    else {
-        console.error(`[motia-plugins] ✗ Validation failed with ${allErrors.length} error(s)`);
-    }
-    return {
-        valid,
-        errors: allErrors,
-        warnings: allWarnings,
-    };
-}

package/dist/src/App.d.ts

@@ -1,2 +0,0 @@
-import { type FC } from 'react';
-export declare const App: FC;

package/dist/src/App.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useEffect, useMemo } from 'react';
-import { FlowPage } from './components/flow/flow-page';
-import { FlowTabMenuItem } from './components/flow/flow-tab-menu-item';
-import { registerPluginTabs } from './lib/plugins';
-import { getViewModeFromURL } from './lib/utils';
-import { ProjectViewMode } from './project-view-mode';
-import { TabLocation, useAppTabsStore } from './stores/use-app-tabs-store';
-import { SystemViewMode } from './system-view-mode';
-const TAB_IDS = {
-    FLOW: 'flow',
-    LOGS: 'logs',
-};
-const topTabs = [
-    {
-        id: TAB_IDS.FLOW,
-        tabLabel: FlowTabMenuItem,
-        content: FlowPage,
-    },
-];
-export const App = memo(() => {
-    const setTabs = useAppTabsStore((state) => state.setTabs);
-    const addTab = useAppTabsStore((state) => state.addTab);
-    useEffect(() => {
-        const timeout = setTimeout(() => {
-            setTabs(TabLocation.TOP, topTabs);
-            registerPluginTabs(addTab);
-        }, 10);
-        return () => clearTimeout(timeout);
-    }, [setTabs, addTab]);
-    const viewMode = useMemo(getViewModeFromURL, []);
-    const ViewComponent = viewMode === 'project' ? ProjectViewMode : SystemViewMode;
-    return _jsx(ViewComponent, {});
-});
-App.displayName = 'App';

package/dist/src/components/NotFoundPage.d.ts

@@ -1 +0,0 @@
-export declare const NotFoundPage: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/NotFoundPage.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Header } from './header/header';
-export const NotFoundPage = () => (_jsxs("div", { className: "grid grid-rows-[auto_1fr] h-screen bg-background text-foreground", children: [_jsx(Header, {}), _jsxs("div", { className: "flex flex-col items-center justify-center", children: [_jsx("h1", { className: "text-4xl font-bold mb-4", children: "404 \u2013 Page Not Found" }), _jsx("p", { className: "text-lg opacity-80 mb-6", children: "This route doesn\u2019t exist." })] })] }));

package/dist/src/components/bottom-panel.d.ts

@@ -1 +0,0 @@
-export declare const BottomPanel: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/src/components/bottom-panel.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CollapsiblePanel, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
-import { memo } from 'react';
-import { useShallow } from 'zustand/react/shallow';
-import { TabLocation, useAppTabsStore } from '../stores/use-app-tabs-store';
-import { useTabsStore } from '../stores/use-tabs-store';
-const bottomTabsSelector = (state) => state.tabs[TabLocation.BOTTOM];
-const bottomPanelId = 'bottom-panel';
-export const BottomPanel = memo(() => {
-    const defaultTab = useTabsStore((state) => state.tab.bottom);
-    const setBottomTab = useTabsStore((state) => state.setBottomTab);
-    const tabs = useAppTabsStore(useShallow(bottomTabsSelector));
-    return (_jsx(CollapsiblePanel, { id: bottomPanelId, variant: 'tabs', defaultTab: defaultTab, onTabChange: setBottomTab, header: _jsx(TabsList, { children: tabs.map(({ id, tabLabel: Label }) => (_jsx(TabsTrigger, { value: id, "data-testid": `${id.toLowerCase()}-link`, className: "cursor-pointer", children: _jsx(Label, {}) }, id))) }), children: tabs.map(({ id, content: Element }) => (_jsx(TabsContent, { value: id, className: "h-full", children: _jsx(Element, {}) }, id))) }));
-});
-BottomPanel.displayName = 'BottomPanel';

package/dist/src/components/flow/base-edge.d.ts

@@ -1,3 +0,0 @@
-import { type EdgeProps } from '@xyflow/react';
-import type React from 'react';
-export declare const BaseEdge: React.FC<EdgeProps>;

package/dist/src/components/flow/base-edge.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, useThemeStore } from '@motiadev/ui';
-import { BaseEdge as BaseReactFlowEdge, EdgeLabelRenderer, getSmoothStepPath } from '@xyflow/react';
-import { cva } from 'class-variance-authority';
-const labelVariants = cva('absolute pointer-events-all text-cs border p-1 px-2', {
-    variants: {
-        color: {
-            default: 'border-[#b3b3b3] bg-[#060014] text-gray-100 font-semibold border-solid rounded-full',
-            conditional: 'bg-amber-300 border-amber-950 text-amber-950 border-solid font-semibold italic rounded-lg',
-        },
-    },
-    defaultVariants: {
-        color: 'default',
-    },
-});
-export const BaseEdge = (props) => {
-    const theme = useThemeStore((state) => state.theme);
-    const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data } = props;
-    const label = data?.label;
-    const labelVariant = data?.labelVariant;
-    const virtualColor = theme === 'dark' ? 'rgb(225, 225, 225)' : 'rgb(85, 85, 85)';
-    const [edgePath, labelX, labelY] = getSmoothStepPath({
-        sourceX,
-        sourceY,
-        targetX,
-        targetY,
-        sourcePosition,
-        targetPosition,
-        borderRadius: 20,
-        offset: 10,
-    });
-    return (_jsxs(_Fragment, { children: [_jsx(BaseReactFlowEdge, { path: edgePath, style: {
-                    stroke: data?.variant === 'virtual' ? virtualColor : '#0094FF',
-                    strokeWidth: 2,
-                    shapeRendering: 'geometricPrecision',
-                    fill: 'none',
-                    mixBlendMode: 'screen',
-                }, className: "edge-animated" }), label && (_jsx(EdgeLabelRenderer, { children: _jsx("div", { className: cn(labelVariants({ color: labelVariant })), style: { transform: `translateX(-50%) translateY(-50%) translate(${labelX}px, ${labelY}px)` }, children: _jsx("div", { className: "text-xs font-mono", children: label }) }) }))] }));
-};

package/dist/src/components/flow/flow-loader.d.ts

@@ -1 +0,0 @@
-export declare const FlowLoader: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +0,0 @@
-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-background" });
-};

package/dist/src/components/flow/flow-page.d.ts

@@ -1 +0,0 @@
-export declare const FlowPage: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;

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

@@ -1,25 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useStreamItem } from '@motiadev/stream-client-react';
-import { Button, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@motiadev/ui';
-import { ReactFlowProvider } from '@xyflow/react';
-import { ExternalLink, Workflow } from 'lucide-react';
-import { memo, useMemo } from 'react';
-import { useShallow } from 'zustand/react/shallow';
-import { motiaAnalytics } from '@/lib/motia-analytics';
-import { useFlowStore } from '@/stores/use-flow-store';
-import { FlowView } from './flow-view';
-export const FlowPage = memo(() => {
-    const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
-    const flows = useFlowStore(useShallow((state) => Object.values(state.flows)));
-    const streamItemArgs = useMemo(() => ({ streamName: '__motia.flows', groupId: 'default', id: selectedFlowId ?? '' }), [selectedFlowId]);
-    const { data: flow } = useStreamItem(streamItemArgs);
-    const streamItemArgsConfig = useMemo(() => ({ streamName: '__motia.flowsConfig', groupId: 'default', id: selectedFlowId ?? '' }), [selectedFlowId]);
-    const { data: flowConfig } = useStreamItem(streamItemArgsConfig);
-    if (flows.length === 0 || flow?.error) {
-        return (_jsx("div", { className: "flex w-full h-full bg-background", children: _jsxs(Empty, { children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(Workflow, {}) }), flow?.error ? (_jsxs(_Fragment, { children: [_jsx(EmptyTitle, { children: "Error loading flow" }), _jsx(EmptyDescription, { children: flow.error })] })) : (_jsxs(_Fragment, { children: [_jsx(EmptyTitle, { children: "No flows registered" }), _jsx(EmptyDescription, { children: "You haven't registered any flows yet. Get started by registering your first flow." })] }))] }), _jsx(EmptyContent, { children: _jsx(Button, { variant: "link", asChild: true, size: "sm", children: _jsxs("a", { href: "https://www.motia.dev/docs/development-guide/flows", target: "_blank", rel: "noopener noreferrer", onClick: () => motiaAnalytics.track('flows_docs_link_clicked'), children: ["Learn more ", _jsx(ExternalLink, {})] }) }) })] }) }));
-    }
-    if (!flow)
-        return null;
-    return (_jsx(ReactFlowProvider, { children: _jsx(FlowView, { flow: flow, flowConfig: flowConfig }) }));
-});
-FlowPage.displayName = 'FlowPage';

package/dist/src/components/flow/flow-tab-menu-item.d.ts

@@ -1 +0,0 @@
-export declare const FlowTabMenuItem: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/flow/flow-tab-menu-item.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@motiadev/ui';
-import { ChevronsUpDown, Workflow } from 'lucide-react';
-import { useShallow } from 'zustand/react/shallow';
-import { useFetchFlows } from '@/hooks/use-fetch-flows';
-import { motiaAnalytics } from '@/lib/motia-analytics';
-import { useFlowStore } from '@/stores/use-flow-store';
-export const FlowTabMenuItem = () => {
-    useFetchFlows();
-    const selectFlowId = useFlowStore((state) => state.selectFlowId);
-    const flows = useFlowStore(useShallow((state) => Object.values(state.flows)));
-    const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
-    const handleFlowSelect = (flowId) => {
-        selectFlowId(flowId);
-        motiaAnalytics.track('flow_selected', { flow: flowId });
-    };
-    return (_jsxs("div", { className: "flex flex-row justify-center items-center gap-2 cursor-pointer", children: [_jsx(Workflow, {}), flows.length > 0 && selectedFlowId ? selectedFlowId : 'Flows', flows.length > 0 && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("div", { className: "flex flex-row justify-center items-center gap-2 cursor-pointer", "data-testid": "flows-dropdown-trigger", children: _jsx(ChevronsUpDown, { className: "size-4" }) }) }), _jsx(DropdownMenuContent, { className: "bg-background text-foreground flows-dropdown", children: flows.map((item) => (_jsx(DropdownMenuItem, { "data-testid": `dropdown-${item}`, className: "cursor-pointer gap-2 flow-link", onSelect: () => handleFlowSelect(item), children: item }, `dropdown-${item}`))) })] }))] }));
-};

package/dist/src/components/flow/flow-view.d.ts

@@ -1,12 +0,0 @@
-import { type Edge as ReactFlowEdge, type Node as ReactFlowNode } from '@xyflow/react';
-import type React from 'react';
-import type { EdgeData, FlowConfigResponse, FlowResponse, NodeData } from '@/types/flow';
-import '@xyflow/react/dist/style.css';
-export type FlowNode = ReactFlowNode<NodeData>;
-export type FlowEdge = ReactFlowEdge<EdgeData>;
-type Props = {
-    flow: FlowResponse;
-    flowConfig: FlowConfigResponse;
-};
-export declare const FlowView: React.FC<Props>;
-export {};

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

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Background, BackgroundVariant, ReactFlow, } from '@xyflow/react';
-import { useCallback, useState } from 'react';
-import { BaseEdge } from './base-edge';
-import { FlowLoader } from './flow-loader';
-import { useGetFlowState } from './hooks/use-get-flow-state';
-import { NodeOrganizer } from './node-organizer';
-import '@xyflow/react/dist/style.css';
-import { BackgroundEffect } from '@motiadev/ui';
-const edgeTypes = {
-    base: BaseEdge,
-};
-export const FlowView = ({ flow, flowConfig }) => {
-    const { nodes, edges, onNodesChange, onEdgesChange, nodeTypes } = useGetFlowState(flow, flowConfig);
-    const [initialized, setInitialized] = useState(false);
-    const onInitialized = useCallback(() => setInitialized(true), []);
-    const onNodesChangeHandler = useCallback((changes) => onNodesChange(changes), [onNodesChange]);
-    if (!nodeTypes) {
-        return null;
-    }
-    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, className: "isolate", children: [_jsx(BackgroundEffect, {}), _jsx(Background, { variant: BackgroundVariant.Dots, gap: 20, size: 1 }), _jsx(NodeOrganizer, { onInitialized: onInitialized, nodes: nodes, edges: edges })] })] }));
-};

package/dist/src/components/flow/hooks/use-get-flow-state.d.ts

@@ -1,10 +0,0 @@
-import { type Edge, type Node } from '@xyflow/react';
-import type React from 'react';
-import type { EdgeData, FlowConfigResponse, FlowResponse, NodeData } from '@/types/flow';
-export declare const useGetFlowState: (flow: FlowResponse, flowConfig: FlowConfigResponse) => {
-    nodes: Node<NodeData>[];
-    edges: Edge<EdgeData>[];
-    onNodesChange: import("@xyflow/react").OnNodesChange<Node<NodeData>>;
-    onEdgesChange: import("@xyflow/react").OnEdgesChange<Edge<EdgeData>>;
-    nodeTypes: Record<string, React.ComponentType<any>>;
-};

package/dist/src/components/flow/hooks/use-get-flow-state.js

@@ -1,133 +0,0 @@
-import { useEdgesState, useNodesState } from '@xyflow/react';
-import isEqual from 'fast-deep-equal';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ApiFlowNode } from '../nodes/api-flow-node';
-import { CronFlowNode } from '../nodes/cron-flow-node';
-import { EventFlowNode } from '../nodes/event-flow-node';
-import { NoopFlowNode } from '../nodes/noop-flow-node';
-import { useSaveWorkflowConfig } from './use-save-workflow-config';
-const DEFAULT_CONFIG = { x: 0, y: 0 };
-const getNodePosition = (flowConfig, stepName) => {
-    return flowConfig?.config[stepName] || DEFAULT_CONFIG;
-};
-const nodeComponentCache = new Map();
-const BASE_NODE_TYPES = {
-    event: EventFlowNode,
-    api: ApiFlowNode,
-    noop: NoopFlowNode,
-    cron: CronFlowNode,
-};
-async function importFlow(flow, flowConfig) {
-    const nodeTypes = { ...BASE_NODE_TYPES };
-    const customNodePromises = flow.steps
-        .filter((step) => step.nodeComponentPath)
-        .map(async (step) => {
-        const path = step.nodeComponentPath;
-        // Check cache first
-        if (nodeComponentCache.has(path)) {
-            nodeTypes[path] = nodeComponentCache.get(path);
-            return;
-        }
-        try {
-            const module = await import(/* @vite-ignore */ `/@fs/${path}`);
-            const component = module.Node ?? module.default;
-            nodeComponentCache.set(path, component);
-            nodeTypes[path] = component;
-        }
-        catch (error) {
-            console.error(`Failed to load custom node component: ${path}`, error);
-        }
-    });
-    await Promise.all(customNodePromises);
-    const nodes = flow.steps.map((step) => ({
-        id: step.id,
-        type: step.nodeComponentPath || step.type,
-        filePath: step.filePath,
-        position: step.filePath ? getNodePosition(flowConfig, step.filePath) : DEFAULT_CONFIG,
-        data: { ...step, nodeConfig: step.filePath ? getNodePosition(flowConfig, step.filePath) : DEFAULT_CONFIG },
-        language: step.language,
-    }));
-    const edges = flow.edges.map((edge) => ({
-        ...edge,
-        type: 'base',
-    }));
-    return { nodes, edges, nodeTypes };
-}
-export const useGetFlowState = (flow, flowConfig) => {
-    const [nodeTypes, setNodeTypes] = useState(BASE_NODE_TYPES);
-    const [nodes, setNodes, onNodesChange] = useNodesState([]);
-    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-    const saveConfig = useSaveWorkflowConfig();
-    const flowIdRef = useRef('');
-    const saveTimeoutRef = useRef(null);
-    const lastSavedConfigRef = useRef(null);
-    const lastSavedFlowRef = useRef(null);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const memoizedFlowConfig = useMemo(() => flowConfig, [flowConfig?.id, flowConfig?.config]);
-    useEffect(() => {
-        if (!flow || flow.error)
-            return;
-        const hasSameConfig = isEqual(lastSavedConfigRef.current, memoizedFlowConfig?.config);
-        const hasSameFlow = isEqual(lastSavedFlowRef.current, flow);
-        if (hasSameConfig && hasSameFlow)
-            return;
-        lastSavedConfigRef.current = memoizedFlowConfig?.config;
-        flowIdRef.current = flow.id;
-        lastSavedFlowRef.current = flow;
-        const importFlowAsync = async () => {
-            try {
-                const { nodes, edges, nodeTypes } = await importFlow(flow, flowConfig);
-                setNodes(nodes);
-                setEdges(edges);
-                setNodeTypes(nodeTypes);
-            }
-            catch (error) {
-                console.error('Failed to import flow:', error);
-            }
-        };
-        importFlowAsync();
-    }, [flow, memoizedFlowConfig, setNodes, setEdges, flowConfig]);
-    const saveFlowConfig = useCallback((nodesToSave) => {
-        if (saveTimeoutRef.current) {
-            clearTimeout(saveTimeoutRef.current);
-        }
-        saveTimeoutRef.current = setTimeout(async () => {
-            const steps = nodesToSave.reduce((acc, node) => {
-                if (node.data.filePath) {
-                    acc[node.data.filePath] = {
-                        x: Math.round(node.position.x),
-                        y: Math.round(node.position.y),
-                    };
-                    if (node.data.nodeConfig?.sourceHandlePosition) {
-                        acc[node.data.filePath].sourceHandlePosition = node.data.nodeConfig.sourceHandlePosition;
-                    }
-                    if (node.data.nodeConfig?.targetHandlePosition) {
-                        acc[node.data.filePath].targetHandlePosition = node.data.nodeConfig.targetHandlePosition;
-                    }
-                }
-                return acc;
-            }, {});
-            if (!isEqual(steps, lastSavedConfigRef.current)) {
-                lastSavedConfigRef.current = steps;
-                const newConfig = { id: flowIdRef.current, config: steps };
-                try {
-                    await saveConfig(newConfig);
-                }
-                catch (error) {
-                    console.error('Failed to save flow config:', error);
-                }
-            }
-        }, 300);
-    }, [saveConfig]);
-    useEffect(() => {
-        if (nodes.length > 0) {
-            saveFlowConfig(nodes);
-        }
-        return () => {
-            if (saveTimeoutRef.current) {
-                clearTimeout(saveTimeoutRef.current);
-            }
-        };
-    }, [nodes, saveFlowConfig]);
-    return useMemo(() => ({ nodes, edges, onNodesChange, onEdgesChange, nodeTypes }), [nodes, edges, onNodesChange, onEdgesChange, nodeTypes]);
-};

package/dist/src/components/flow/hooks/use-save-workflow-config.d.ts

@@ -1,2 +0,0 @@
-import type { FlowConfigResponse } from '@/types/flow';
-export declare const useSaveWorkflowConfig: () => (body: FlowConfigResponse) => Promise<any>;

package/dist/src/components/flow/hooks/use-save-workflow-config.js

@@ -1,22 +0,0 @@
-import { useCallback } from 'react';
-export const useSaveWorkflowConfig = () => {
-    return useCallback(async (body) => {
-        try {
-            const response = await fetch(`/__motia/flows/${body.id}/config`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(body),
-            });
-            if (!response.ok) {
-                throw new Error(`Failed to save config: ${response.statusText}`);
-            }
-            return await response.json();
-        }
-        catch (error) {
-            console.error('Error saving workflow config:', error);
-            throw error;
-        }
-    }, []);
-};

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

@@ -1,10 +0,0 @@
-import { type Edge, type Node } from '@xyflow/react';
-import type React from 'react';
-import type { EdgeData, NodeData } from '@/types/flow';
-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,82 +0,0 @@
-import { useNodesInitialized, useReactFlow } from '@xyflow/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({ 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) {
-            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, nodes, edges]);
-    return null;
-};

package/dist/src/components/flow/nodes/api-flow-node.d.ts

@@ -1,2 +0,0 @@
-import type { ApiNodeProps } from '@/publicComponents/node-props';
-export declare const ApiFlowNode: ({ data }: ApiNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/flow/nodes/api-flow-node.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ApiNode } from '@/publicComponents/api-node';
-export const ApiFlowNode = ({ data }) => {
-    return _jsx(ApiNode, { data: data });
-};