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

package/dist/src/App.tsx

@@ -0,0 +1,41 @@
+import { type FC, 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, type ViewMode } from './lib/utils'
+import { ProjectViewMode } from './project-view-mode'
+import { type AppTab, TabLocation, useAppTabsStore } from './stores/use-app-tabs-store'
+import { SystemViewMode } from './system-view-mode'
+
+const TAB_IDS = {
+  FLOW: 'flow',
+  LOGS: 'logs',
+} as const
+
+const topTabs: AppTab[] = [
+  {
+    id: TAB_IDS.FLOW,
+    tabLabel: FlowTabMenuItem,
+    content: FlowPage,
+  },
+]
+
+export const App: FC = 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<ViewMode>(getViewModeFromURL, [])
+
+  const ViewComponent = viewMode === 'project' ? ProjectViewMode : SystemViewMode
+
+  return <ViewComponent />
+})
+App.displayName = 'App'

package/dist/src/components/NotFoundPage.tsx

@@ -0,0 +1,11 @@
+import { Header } from './header/header'
+
+export const NotFoundPage = () => (
+  <div className="grid grid-rows-[auto_1fr] h-screen bg-background text-foreground">
+    <Header />
+    <div className="flex flex-col items-center justify-center">
+      <h1 className="text-4xl font-bold mb-4">404 – Page Not Found</h1>
+      <p className="text-lg opacity-80 mb-6">This route doesn’t exist.</p>
+    </div>
+  </div>
+)

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

@@ -0,0 +1,39 @@
+import { CollapsiblePanel, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui'
+import { memo } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { type AppTabsState, TabLocation, useAppTabsStore } from '../stores/use-app-tabs-store'
+import { useTabsStore } from '../stores/use-tabs-store'
+
+const bottomTabsSelector = (state: AppTabsState) => 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 (
+    <CollapsiblePanel
+      id={bottomPanelId}
+      variant={'tabs'}
+      defaultTab={defaultTab}
+      onTabChange={setBottomTab}
+      header={
+        <TabsList>
+          {tabs.map(({ id, tabLabel: Label }) => (
+            <TabsTrigger key={id} value={id} data-testid={`${id.toLowerCase()}-link`} className="cursor-pointer">
+              <Label />
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      }
+    >
+      {tabs.map(({ id, content: Element }) => (
+        <TabsContent key={id} value={id} className="h-full">
+          <Element />
+        </TabsContent>
+      ))}
+    </CollapsiblePanel>
+  )
+})
+BottomPanel.displayName = 'BottomPanel'

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

@@ -0,0 +1,61 @@
+import { cn, useThemeStore } from '@motiadev/ui'
+import { BaseEdge as BaseReactFlowEdge, EdgeLabelRenderer, type EdgeProps, getSmoothStepPath } from '@xyflow/react'
+import { cva } from 'class-variance-authority'
+import type React from 'react'
+
+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: React.FC<EdgeProps> = (props: EdgeProps) => {
+  const theme = useThemeStore((state) => state.theme)
+  const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data } = props
+  const label = data?.label as string | undefined
+  const labelVariant = data?.labelVariant as 'default' | 'conditional' | null | undefined
+  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 (
+    <>
+      <BaseReactFlowEdge
+        path={edgePath}
+        style={{
+          stroke: data?.variant === 'virtual' ? virtualColor : '#0094FF',
+          strokeWidth: 2,
+          shapeRendering: 'geometricPrecision',
+          fill: 'none',
+          mixBlendMode: 'screen',
+        }}
+        className="edge-animated"
+      />
+      {label && (
+        <EdgeLabelRenderer>
+          <div
+            className={cn(labelVariants({ color: labelVariant }))}
+            style={{ transform: `translateX(-50%) translateY(-50%) translate(${labelX}px, ${labelY}px)` }}
+          >
+            <div className="text-xs font-mono">{label}</div>
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,3 @@
+export const FlowLoader = () => {
+  return <div className="absolute z-10 inset-0 w-full h-full bg-background" />
+}

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

@@ -0,0 +1,75 @@
+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 type { FlowConfigResponse, FlowResponse } from '../../types/flow'
+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<FlowResponse>(streamItemArgs)
+
+  const streamItemArgsConfig = useMemo(
+    () => ({ streamName: '__motia.flowsConfig', groupId: 'default', id: selectedFlowId ?? '' }),
+    [selectedFlowId],
+  )
+  const { data: flowConfig } = useStreamItem<FlowConfigResponse>(streamItemArgsConfig)
+
+  if (flows.length === 0 || flow?.error) {
+    return (
+      <div className="flex w-full h-full bg-background">
+        <Empty>
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <Workflow />
+            </EmptyMedia>
+            {flow?.error ? (
+              <>
+                <EmptyTitle>Error loading flow</EmptyTitle>
+                <EmptyDescription>{flow.error}</EmptyDescription>
+              </>
+            ) : (
+              <>
+                <EmptyTitle>No flows registered</EmptyTitle>
+                <EmptyDescription>
+                  You haven't registered any flows yet. Get started by registering your first flow.
+                </EmptyDescription>
+              </>
+            )}
+          </EmptyHeader>
+          <EmptyContent>
+            <Button variant="link" asChild size="sm">
+              <a
+                href="https://www.motia.dev/docs/development-guide/flows"
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() => motiaAnalytics.track('flows_docs_link_clicked')}
+              >
+                Learn more <ExternalLink />
+              </a>
+            </Button>
+          </EmptyContent>
+        </Empty>
+      </div>
+    )
+  }
+
+  if (!flow) return null
+
+  return (
+    <ReactFlowProvider>
+      <FlowView flow={flow} flowConfig={flowConfig!} />
+    </ReactFlowProvider>
+  )
+})
+FlowPage.displayName = 'FlowPage'

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

@@ -0,0 +1,52 @@
+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: string) => {
+    selectFlowId(flowId)
+    motiaAnalytics.track('flow_selected', { flow: flowId })
+  }
+
+  return (
+    <div className="flex flex-row justify-center items-center gap-2 cursor-pointer">
+      <Workflow />
+      {flows.length > 0 && selectedFlowId ? selectedFlowId : 'Flows'}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <div
+            className="flex flex-row justify-center items-center gap-2 cursor-pointer"
+            data-testid="flows-dropdown-trigger"
+          >
+            <ChevronsUpDown className="size-4" />
+          </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="bg-background text-foreground flows-dropdown">
+          {flows.length === 0 ? (
+            <DropdownMenuItem disabled>Loading flows...</DropdownMenuItem>
+          ) : (
+            flows.map((item) => (
+              <DropdownMenuItem
+                data-testid={`dropdown-${item}`}
+                key={`dropdown-${item}`}
+                className="cursor-pointer gap-2 flow-link"
+                onSelect={() => handleFlowSelect(item)}
+              >
+                {item}
+              </DropdownMenuItem>
+            ))
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

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

@@ -0,0 +1,66 @@
+import {
+  Background,
+  BackgroundVariant,
+  type NodeChange,
+  type OnNodesChange,
+  ReactFlow,
+  type Edge as ReactFlowEdge,
+  type Node as ReactFlowNode,
+} from '@xyflow/react'
+import type React from 'react'
+import { useCallback, useState } from 'react'
+import type { EdgeData, FlowConfigResponse, FlowResponse, NodeData } from '../../types/flow'
+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'
+
+export type FlowNode = ReactFlowNode<NodeData>
+export type FlowEdge = ReactFlowEdge<EdgeData>
+
+const edgeTypes = {
+  base: BaseEdge,
+}
+
+type Props = {
+  flow: FlowResponse
+  flowConfig: FlowConfigResponse
+}
+
+export const FlowView: React.FC<Props> = ({ flow, flowConfig }) => {
+  const { nodes, edges, onNodesChange, onEdgesChange, nodeTypes } = useGetFlowState(flow, flowConfig)
+  const [initialized, setInitialized] = useState(false)
+  const onInitialized = useCallback(() => setInitialized(true), [])
+
+  const onNodesChangeHandler = useCallback<OnNodesChange<FlowNode>>(
+    (changes: NodeChange<FlowNode>[]) => onNodesChange(changes),
+    [onNodesChange],
+  )
+
+  if (!nodeTypes) {
+    return null
+  }
+
+  return (
+    <div className="w-full h-full relative">
+      {!initialized && <FlowLoader />}
+      <ReactFlow
+        minZoom={0.1}
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        onNodesChange={onNodesChangeHandler}
+        onEdgesChange={onEdgesChange}
+        className="isolate"
+      >
+        <BackgroundEffect />
+        <Background variant={BackgroundVariant.Dots} gap={20} size={1} />
+        <NodeOrganizer onInitialized={onInitialized} nodes={nodes} edges={edges} />
+      </ReactFlow>
+    </div>
+  )
+}

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

@@ -0,0 +1,171 @@
+import { type Edge, type Node, useEdgesState, useNodesState } from '@xyflow/react'
+import isEqual from 'fast-deep-equal'
+import type React from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { EdgeData, FlowConfigResponse, FlowResponse, NodeConfig, NodeData } from '../../../types/flow'
+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: NodeConfig = { x: 0, y: 0 }
+
+const getNodePosition = (flowConfig: FlowConfigResponse | null, stepName: string): NodeConfig => {
+  return flowConfig?.config[stepName] || DEFAULT_CONFIG
+}
+
+type FlowState = {
+  nodes: Node<NodeData>[]
+  edges: Edge<EdgeData>[]
+  nodeTypes: Record<string, React.ComponentType<any>>
+}
+
+const nodeComponentCache = new Map<string, React.ComponentType<any>>()
+
+const BASE_NODE_TYPES: Record<string, React.ComponentType<any>> = {
+  event: EventFlowNode,
+  api: ApiFlowNode,
+  noop: NoopFlowNode,
+  cron: CronFlowNode,
+}
+
+async function importFlow(flow: FlowResponse, flowConfig: FlowConfigResponse | null): Promise<FlowState> {
+  const nodeTypes: Record<string, React.ComponentType<any>> = { ...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: Node<NodeData>[] = 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: Edge<EdgeData>[] = flow.edges.map((edge) => ({
+    ...edge,
+    type: 'base',
+  }))
+
+  return { nodes, edges, nodeTypes }
+}
+
+export const useGetFlowState = (flow: FlowResponse, flowConfig: FlowConfigResponse) => {
+  const [nodeTypes, setNodeTypes] = useState<Record<string, React.ComponentType<any>>>(BASE_NODE_TYPES)
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node<NodeData>>([])
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge<EdgeData>>([])
+
+  const saveConfig = useSaveWorkflowConfig()
+
+  const flowIdRef = useRef<string>('')
+  const saveTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null)
+  const lastSavedConfigRef = useRef<FlowConfigResponse['config']>(null)
+  const lastSavedFlowRef = useRef<FlowResponse>(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: Node<NodeData>[]) => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current)
+      }
+
+      saveTimeoutRef.current = setTimeout(async () => {
+        const steps = nodesToSave.reduce<FlowConfigResponse['config']>((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.ts

@@ -0,0 +1,25 @@
+import { useCallback } from 'react'
+import type { FlowConfigResponse } from '../../../types/flow'
+
+export const useSaveWorkflowConfig = () => {
+  return useCallback(async (body: FlowConfigResponse) => {
+    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.tsx

@@ -0,0 +1,103 @@
+import { type Edge, type Node, useNodesInitialized, useReactFlow } from '@xyflow/react'
+import dagre from 'dagre'
+import isEqual from 'fast-deep-equal'
+import type React from 'react'
+import { useEffect, useRef } from 'react'
+import type { EdgeData, NodeData } from '../../types/flow'
+
+const organizeNodes = (nodes: Node<NodeData>[], edges: Edge<EdgeData>[]): Node<NodeData>[] => {
+  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 }
+  })
+}
+
+type Props = {
+  onInitialized: () => void
+  nodes: Node<NodeData>[]
+  edges: Edge<EdgeData>[]
+}
+
+export const NodeOrganizer: React.FC<Props> = ({ onInitialized, nodes, edges }) => {
+  const { setNodes, getNodes, getEdges, fitView } = useReactFlow()
+  const nodesInitialized = useNodesInitialized()
+  const initialized = useRef(false)
+
+  const lastNodesRef = useRef<Node<NodeData>[]>([])
+  const lastEdgesRef = useRef<Edge<EdgeData>[]>([])
+
+  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.tsx

@@ -0,0 +1,6 @@
+import { ApiNode } from '../../../publicComponents/api-node'
+import type { ApiNodeProps } from '../../../publicComponents/node-props'
+
+export const ApiFlowNode = ({ data }: ApiNodeProps) => {
+  return <ApiNode data={data} />
+}

package/dist/src/components/flow/nodes/cron-flow-node.tsx

@@ -0,0 +1,6 @@
+import { CronNode } from '../../../publicComponents/cron-node'
+import type { CronNodeProps } from '../../../publicComponents/node-props'
+
+export const CronFlowNode = ({ data }: CronNodeProps) => {
+  return <CronNode data={data} />
+}

package/dist/src/components/flow/nodes/event-flow-node.tsx

@@ -0,0 +1,6 @@
+import { EventNode } from '../../../publicComponents/event-node'
+import type { EventNodeProps } from '../../../publicComponents/node-props'
+
+export const EventFlowNode = ({ data }: EventNodeProps) => {
+  return <EventNode data={data} />
+}