From 1a8329ecc9a8d8e43a64ba0e7824386e43c0e6cf Mon Sep 17 00:00:00 2001
From: Jaryt <jarytbustard@gmail.com>
Date: Tue, 29 Nov 2022 20:29:05 -0500
Subject: [PATCH 1/2] test: adding ghost

---
 src/components/flow/ConnectionLine.tsx |  7 +-
 src/components/flow/Flow.tsx           | 89 ++++++++++++++++++++++----
 src/components/flow/GhostNode.tsx      | 48 ++++++++++++++
 src/components/flow/JobNode.tsx        |  8 +--
 src/state/FlowStore.tsx                |  3 +
 src/state/Store.tsx                    | 17 -----
 6 files changed, 136 insertions(+), 36 deletions(-)
 create mode 100644 src/components/flow/GhostNode.tsx

diff --git a/src/components/flow/ConnectionLine.tsx b/src/components/flow/ConnectionLine.tsx
index e2c0c9c..65612f7 100644
--- a/src/components/flow/ConnectionLine.tsx
+++ b/src/components/flow/ConnectionLine.tsx
@@ -1,14 +1,17 @@
+import { debug } from 'console';
 import { ConnectionLineComponentProps, getBezierPath, MarkerType } from 'reactflow';
 import { useStoreState } from '../../state/Hooks';
 
 function ConnectionLine({ fromX, fromY, toX, toY, connectionLineStyle, fromNode, fromHandle }: ConnectionLineComponentProps) {
     const stepDist = 20;
-    const realStartX = fromX + (fromNode?.width || 2) / 2;
+    const realStartX = fromX - 4;
     const isSource = fromHandle?.position == 'right';
     useStoreState((state) => state.mode);
     const valid = isSource ? toX >= realStartX + stepDist : toX <= realStartX + stepDist;
     const color = '#76CDFF';
 
+    console.log(fromX, realStartX, fromNode)
+
     const edgePath = valid ? getSteppedPath(realStartX, fromY, toX, toY, stepDist) : `M${realStartX},${fromY} ${realStartX + stepDist},${fromY}`;
 
     return (
@@ -26,7 +29,7 @@ function ConnectionLine({ fromX, fromY, toX, toY, connectionLineStyle, fromNode,
             <path d="M 0 0 L 4 2 L 0 4 z" fill={color} strokeWidth={1.5}/>
             </marker>
         </defs>
-        <path style={connectionLineStyle} className="animated" fill="none" strokeWidth={1.5} stroke={color} d={edgePath} markerEnd="url(#triangle)" />
+        <path style={connectionLineStyle} className="animated -z-30" fill="none" strokeWidth={1.5} stroke={color} d={edgePath} markerEnd="url(#triangle)" />
         {valid && <circle cx={toX} cy={toY} fill="white" r={3} stroke={color} strokeWidth={1.5} /> }
         </g>
     );
diff --git a/src/components/flow/Flow.tsx b/src/components/flow/Flow.tsx
index ed78aa8..e63b3ae 100644
--- a/src/components/flow/Flow.tsx
+++ b/src/components/flow/Flow.tsx
@@ -2,7 +2,9 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import ReactFlow, { Background, useOnViewportChange, BackgroundVariant, ControlButton, Controls, MiniMap, Node, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, useStoreApi, useViewport, Viewport, XYPosition, applyNodeChanges, applyEdgeChanges, addEdge, Edge, Connection, ConnectionMode } from "reactflow";
 import { FlowMode } from "../../state/FlowStore";
 import { useStoreState } from "../../state/Hooks";
+import { DataModel } from "../../state/Store";
 import ConnectionLine from "./ConnectionLine";
+import GhostNode from "./GhostNode";
 import JobNode from "./JobNode";
 
 export type FlowProps = { className?: string }
@@ -10,6 +12,7 @@ export type FlowProps = { className?: string }
 
 const nodeTypes = {
   job: JobNode,
+  ghost: GhostNode,
 };
 
 const initialNodes = [
@@ -17,7 +20,7 @@ const initialNodes = [
       id: '1',
       type: 'job',
       data: { label: 'Node A' },
-      position: { x: 250, y: 0 },
+      position: { x: 0, y: 0 },
     },
     {
       id: '2',
@@ -33,18 +36,80 @@ const initialNodes = [
     },
   ];
 
-  const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'updatable edge' }];
-  const MIN_DISTANCE = 1000;
+const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'updatable edge' }];
+const MIN_DISTANCE = 1000;
+
+type FlowDropEvent = (position: XYPosition, dragging?: DataModel) => void;
+
+function useFlowOffset(func: FlowDropEvent, offset?: DOMRect, deps?: any[]) {
+  const { project } = useReactFlow();
+  const dragging = useStoreState((state) => state.dragging);
+
+  return useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+// console.log(dragging?.dataType?.dragTarget);
+
+//     if (dragging?.dataType?.dragTarget !== 'workflow') {
+//       return;
+//     }
+
+    const eventPos = project({ x: e.clientX, y: e.clientY - (offset?.y || 0)});
+
+    func(eventPos, dragging);
+
+    e.preventDefault();
+  }, deps ? [project, ...deps] : [project]);
+}
+
+function useFlowDragAndDrop(offset?: DOMRect) {
+  const { addNodes, setNodes, deleteElements, getNodes,  } = useReactFlow();
+  const [lastPos, setPos] = useState<XYPosition>();
+
+  const onDragEnter = useFlowOffset((position, data) => {
+    console.log(position)
+    addNodes({  id: 'ghost', position, type: 'ghost',data: ''});
+   }, offset); // Upon entering the flow, create the drop ghost
+  const onDragOver = useFlowOffset((position, data) => {
+    if (lastPos) {
+      const dx = lastPos.x - position.x;
+      const dy = lastPos.y - position.y;
+      const dist = Math.abs(dx * dy);
+
+      if (dist > 150) {
+        console.log(dist)
+          const nodes = getNodes();
+          const changes = applyNodeChanges([ {  id: 'ghost', type: 'position', position, dragging: true } ], nodes);
+          setNodes(changes);
+          setPos(position);
+      }
+    } else {
+      setPos(position);
+    }
+  }, offset, [lastPos]); // While dragging, move the ghost
+  const onDragLeave = useFlowOffset((pos, data) => {
+    deleteElements({ nodes: [{ id: 'ghost' }]})
+    console.log('leave', pos)
+  }, offset); // Upon drop and leave, remove the ghost
+  const onDrop = useFlowOffset((pos, data) => {
+    deleteElements({ nodes: [{ id: 'ghost' }]})
+    console.log('end', pos)
+  }, offset); // Upon drop and leave, remove the ghost
+
+
+  return [onDragEnter, onDragOver, onDragLeave, onDrop]
+}
 
 const Flow = (props: FlowProps) => {
     const store = useStoreApi();
-    const dragging = useStoreState((state) => state.dragging);
     const viewport = useViewport();
+    const { project, viewportInitialized } = useReactFlow();
     const flowRef = useRef<HTMLDivElement>(null);
-    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+    const nodeState = useNodesState(initialNodes);
+    const [nodes, setNodes, onNodesChange] = nodeState;
     const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
     const mode = useStoreState((state) => state.mode);
     const onConnect = useCallback((params: Edge | Connection) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+    const flowRect = flowRef.current?.getBoundingClientRect();
+    const [onDragEnter, onDragOver, onDragLeave, onDrop] = useFlowDragAndDrop(flowRect);
 
 
     return <ReactFlow
@@ -53,23 +118,21 @@ const Flow = (props: FlowProps) => {
         nodes={nodes}
         edges={edges}
         ref={flowRef}
+        // onPaneMouseMove={(e) => { console.log(e.clientX, e.clientY)}}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
         nodesDraggable={mode == FlowMode.MOVE}
         elementsSelectable={mode == FlowMode.SELECT}
         connectionLineComponent={ConnectionLine}
+        connectionLineStyle={ { zIndex: -10 }}
         snapToGrid
         nodeTypes={nodeTypes}
         className={props.className}
-        onDragOver={(e) => {
-            if (dragging?.dataType?.dragTarget === 'workflow') {
-            e.preventDefault();
-            }
-        }}
-        onMouseMove={(event) => {
-            // getClosestNode({ x: event.clientX, y: event.clientY });
-        }}
+        onDragOver={onDragOver}
+        onDragEnter={onDragEnter}
+        onDragLeaveCapture={onDragLeave}
+        onDrop={onDrop}
         onInit={(reactFlowInstance) => console.log('flow loaded:', reactFlowInstance)}
         >
         <Background
diff --git a/src/components/flow/GhostNode.tsx b/src/components/flow/GhostNode.tsx
new file mode 100644
index 0000000..d83b8a6
--- /dev/null
+++ b/src/components/flow/GhostNode.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useMemo } from 'react';
+import { Handle, NodeProps, Position, ReactFlowState, useStore } from 'reactflow';
+import { FlowMode } from '../../state/FlowStore';
+import { useStoreState } from '../../state/Hooks';
+
+const connectionNodeIdSelector = (state: ReactFlowState) => state.connectionNodeId;
+
+export default function GhostNode({ id, selected }: NodeProps) {
+  const connectionNodeId = useStore(connectionNodeIdSelector);
+  const mode = useStoreState((state) => state.mode);
+
+  const isTarget = connectionNodeId && connectionNodeId !== id;
+
+  const label = 'Ghost';
+  const nodeBase = "p-2 pr-3 text-sm bg-white node flex flex-row text-black rounded-md border cursor-pointer"
+  const outline = selected ? "border-circle-blue" : " border-circle-gray-300"
+
+  const Handles = useMemo(() => {
+    const connectMode = mode == FlowMode.CONNECT;
+    const handleBase = `${ connectMode ? '!w-full !h-full' : '!w-0 h-0'} !rounded  opacity-50`
+    const notConnecting = connectionNodeId == null
+
+    return (
+        <>
+          <Handle
+            className={`${handleBase} ${isTarget ? 'z-0' : !connectMode ? '-z-10' : 'z-10'}`}
+            style={{transform: notConnecting ? 'translate(-3px, -50%)' : ''}}
+            position={Position.Right}
+            type="source"
+          />
+          <Handle
+            className={`${handleBase} ${isTarget ? 'z-10' : !connectMode ? '-z-10' : 'z-0'}`}
+            // style={{transform: 'translate(4px, -50%)'}}
+            position={Position.Left}
+            type="target"
+          />
+        </>
+    )
+
+  }, [mode, connectionNodeId])
+
+  return (
+    <div className={`${nodeBase} ${outline} z-10 `} onDragEnter={() => { console.log('hehujasj') }}>
+        {label}
+        {Handles}
+    </div>
+  );
+}
diff --git a/src/components/flow/JobNode.tsx b/src/components/flow/JobNode.tsx
index 97ad5d9..e0ed004 100644
--- a/src/components/flow/JobNode.tsx
+++ b/src/components/flow/JobNode.tsx
@@ -12,26 +12,26 @@ export default function JobNode({ id, selected }: NodeProps) {
 
   const isTarget = connectionNodeId && connectionNodeId !== id;
 
-  const label = isTarget ? 'Drop here' : 'Drag to connect';
+  const label = 'Job Name';
   const nodeBase = "p-2 pr-3 text-sm bg-white node flex flex-row text-black rounded-md border cursor-pointer"
   const outline = selected ? "border-circle-blue" : " border-circle-gray-300"
 
   const Handles = useMemo(() => {
     const connectMode = mode == FlowMode.CONNECT;
-    const handleBase = `${ connectMode ? '!w-full !h-full' : '!w-0 h-0'} !rounded opacity-0`
+    const handleBase = `${ connectMode ? '!w-full !h-full' : '!w-0 h-0'} !rounded opacity-50`
     const notConnecting = connectionNodeId == null
 
     return (
         <>
           <Handle
             className={`${handleBase} ${isTarget ? 'z-0' : !connectMode ? '-z-10' : 'z-10'}`}
-            style={{transform: notConnecting ? 'translate(-5px, -50%)' : ''}}
+            style={{transform: notConnecting ? 'translate(-3px, -50%)' : ''}}
             position={Position.Right}
             type="source"
           />
           <Handle
             className={`${handleBase} ${isTarget ? 'z-10' : !connectMode ? '-z-10' : 'z-0'}`}
-            style={{transform: 'translate(4px, -50%)'}}
+            // style={{transform: 'translate(4px, -50%)'}}
             position={Position.Left}
             type="target"
           />
diff --git a/src/state/FlowStore.tsx b/src/state/FlowStore.tsx
index 21a7aed..b2a942f 100644
--- a/src/state/FlowStore.tsx
+++ b/src/state/FlowStore.tsx
@@ -1,4 +1,5 @@
 import { Action, action } from "easy-peasy";
+import { DataModel } from "./Store";
 
 export enum FlowMode {
     SELECT,
@@ -10,6 +11,8 @@ export enum FlowMode {
 
 export type FlowStoreModel = {
     mode: FlowMode;
+    /** Data being dragged from definition */
+    dragging?: DataModel;
 }
 
 export type FlowActionsModel = {
diff --git a/src/state/Store.tsx b/src/state/Store.tsx
index 3aa79f9..9addd37 100644
--- a/src/state/Store.tsx
+++ b/src/state/Store.tsx
@@ -120,23 +120,6 @@ export type StoreModel = DefinitionsStoreModel & FlowStoreModel & {
   confirm?: ConfirmationModalModel;
   tooltip?: InfoToolTip;
 
-  /** Data being dragged from definition */
-  dragging?: DataModel;
-  altAction?: boolean;
-  connecting?: {
-    intent: 'creating' | 'deleting';
-    start?: {
-      ref?: MutableRefObject<any>;
-      id: Connection;
-      name?: string;
-    };
-    end?: {
-      id: Connection;
-      pos?: XYPosition;
-      ref?: MutableRefObject<any>;
-      name?: string;
-    };
-  };
   /** Currently selected workflow pane index */
   selectedWorkflowId: string;
   configError?: string;

From 5c45f8e7911124153ce9d96d4bfb8025426053d7 Mon Sep 17 00:00:00 2001
From: Jaryt <jarytbustard@gmail.com>
Date: Wed, 30 Nov 2022 17:31:46 -0500
Subject: [PATCH 2/2] refactor: Converted drag and drop functionality to hook

---
 src/App.tsx                                   |  18 +-
 src/components/flow/Flow.tsx                  | 206 ------------------
 src/{ => core}/components/atoms/AddButton.tsx |   2 +-
 src/{ => core}/components/atoms/Button.tsx    |   0
 src/{ => core}/components/atoms/Card.tsx      |   0
 .../components/atoms/ComponentInfo.tsx        |   2 +-
 .../components/atoms/ConnectionLine.tsx       |   0
 .../components/atoms/Definition.tsx           |  20 +-
 src/{ => core}/components/atoms/Edge.tsx      |   0
 src/{ => core}/components/atoms/Empty.tsx     |   0
 src/{ => core}/components/atoms/Footer.tsx    |   2 +-
 src/{ => core}/components/atoms/Info.tsx      |   0
 .../components/atoms/OpenConfig.tsx           |   2 +-
 src/{ => core}/components/atoms/Select.tsx    |   2 +-
 src/{ => core}/components/atoms/Toast.tsx     |   0
 src/{ => core}/components/atoms/Tooltip.tsx   |   0
 .../components/atoms/WorkflowSelector.tsx     |   2 +-
 .../atoms/form/AdjacentStepListItem.tsx       |   0
 .../atoms/form/ExecutorProperty.tsx           |   2 +-
 .../atoms/form/InspectorProperty.tsx          |   0
 .../components/atoms/form/ListProperty.tsx    |   0
 .../components/atoms/form/MatrixProperty.tsx  |   0
 .../components/atoms/form/StepListItem.tsx    |   0
 .../components/atoms/nodes/JobNode.tsx        |   0
 .../atoms/summaries/CommandSummary.tsx        |   0
 .../atoms/summaries/ExecutorSummary.tsx       |   0
 .../components/atoms/summaries/JobSummary.tsx |   0
 .../atoms/summaries/ParameterSummary.tsx      |   0
 .../components/containers/BreadCrumbs.tsx     |   0
 .../components/containers/CollapsibleList.tsx |   0
 .../containers/ConfirmationModal.tsx          |   2 +-
 .../containers/DefinitionsContainer.tsx       |   2 +-
 .../containers/DropdownContainer.tsx          |   0
 .../components/containers/ExternalLinks.tsx   |   2 +-
 .../containers/FilterPreviewContainer.tsx     |   0
 .../components/containers/GuideContainer.tsx  |   0
 .../components/containers/HeaderMenu.tsx      |   2 +-
 .../components/containers/KBarList.tsx        |   0
 .../containers/OrbImportsContainer.tsx        |   4 +-
 .../containers/ParamListContainer.tsx         |   0
 .../containers/ParametersContainer.tsx        |   6 +-
 .../components/containers/PreviewToolbox.tsx  |   0
 .../containers/WorkflowContainer.tsx          |   0
 .../containers/inspector/CommandInspector.tsx |   2 +-
 .../inspector/ExecutorInspector.tsx           |   0
 .../containers/inspector/JobInspector.tsx     |   4 +-
 .../inspector/ParameterInspector.tsx          |   0
 .../inspector/subtypes/CommandSubtypes.tsx    |   0
 .../inspector/subtypes/ExecutorSubtypes.tsx   |   2 +-
 .../inspector/subtypes/ParameterSubtypes.tsx  |   2 +-
 .../components/menus/SubTypeMenu.tsx          |   0
 .../components/menus/TabbedMenu.tsx           |   0
 .../menus/definitions/DefinitionsMenu.tsx     |   6 +-
 .../definitions/InspectorDefinitionMenu.tsx   |  11 +-
 .../menus/definitions/OrbDefinitionsMenu.tsx  |   4 +-
 .../menus/definitions/OrbImportMenu.tsx       |   2 +-
 .../menus/definitions/StepDefinitionMenu.tsx  |   0
 .../definitions/subtypes/ExecutorTypePage.tsx |   0
 .../subtypes/ParameterTypePage.tsx            |   2 +-
 .../definitions/subtypes/StepTypePage.tsx     |   0
 .../menus/stage/StagedFilterMenu.tsx          |   0
 .../components/menus/stage/StagedJobMenu.tsx  |   2 +-
 .../components/panes/EditorPane.tsx           |   4 +-
 .../components/panes/NavigationPane.tsx       |   2 +-
 .../components/panes/WorkflowsPane.tsx        |   6 +-
 src/{ => core}/icons/IconProps.tsx            |   0
 .../icons/components/CommandIcon.tsx          |   0
 .../icons/components/ExecutorIcon.tsx         |   0
 src/{ => core}/icons/components/JobIcon.tsx   |   0
 .../icons/components/JobOnHoldIcon.tsx        |   0
 src/{ => core}/icons/components/OrbIcon.tsx   |   0
 .../icons/components/ParameterIcon.tsx        |   0
 .../icons/components/WorkflowIcon.tsx         |   0
 src/{ => core}/icons/ui/AddIcon.tsx           |   0
 src/{ => core}/icons/ui/BranchIcon.tsx        |   0
 .../icons/ui/BreadCrumbArrowIcon.tsx          |   0
 src/{ => core}/icons/ui/CircleCI.tsx          |   0
 src/{ => core}/icons/ui/CopyIcon.tsx          |   0
 src/{ => core}/icons/ui/DeleteItemIcon.tsx    |   0
 src/{ => core}/icons/ui/DragItemIcon.tsx      |   0
 src/{ => core}/icons/ui/EditIcon.tsx          |   0
 src/{ => core}/icons/ui/ExpandIcon.tsx        |   0
 src/{ => core}/icons/ui/FilterIcon.tsx        |   0
 src/{ => core}/icons/ui/InfoIcon.tsx          |   0
 src/{ => core}/icons/ui/Loading.tsx           |   0
 src/{ => core}/icons/ui/Logo.tsx              |   0
 src/{ => core}/icons/ui/MinusIcon.tsx         |   0
 src/{ => core}/icons/ui/MoreIcon.tsx          |   0
 src/{ => core}/icons/ui/NewWindowIcon.tsx     |   0
 src/{ => core}/icons/ui/OpenIcon.tsx          |   0
 src/{ => core}/icons/ui/PlusIcon.tsx          |   0
 src/{ => core}/icons/ui/Switch.tsx            |   0
 src/{ => core}/icons/ui/TagIcon.tsx           |   0
 .../icons/ui/ToolTipPointerIcon.tsx           |   0
 src/{ => core}/state/DefinitionStore.tsx      |  14 +-
 src/{ => core}/state/Hooks.tsx                |   0
 src/{ => core}/state/Store.tsx                |  19 +-
 .../components}/ConnectionLine.tsx            |   2 +-
 src/flow/components/Flow.tsx                  | 116 ++++++++++
 .../flow => flow/components}/FlowTools.tsx    |  12 +-
 .../flow => flow/components}/GhostNode.tsx    |   4 +-
 .../flow => flow/components}/JobNode.tsx      |  16 +-
 src/flow/hooks/useFlowDnD.ts                  |  71 ++++++
 src/flow/hooks/useFlowOffset.ts               |  18 ++
 src/{ => flow}/state/FlowStore.tsx            |   8 +-
 src/{ => flow}/util/FlowUtil.tsx              |   0
 src/hooks/useMapping.tsx                      |   5 -
 src/mappings/GenerableMapping.tsx             |   4 +-
 src/mappings/InspectableMapping.tsx           |  16 +-
 src/mappings/NodeMapping.tsx                  |  22 ++
 src/mappings/components/CommandMapping.tsx    |  10 +-
 src/mappings/components/ExecutorMapping.tsx   |  14 +-
 src/mappings/components/JobMapping.tsx        |  69 +++---
 src/mappings/components/ParameterMapping.tsx  |  12 +-
 src/mappings/components/WorkflowMapping.tsx   |   4 +-
 115 files changed, 386 insertions(+), 375 deletions(-)
 delete mode 100644 src/components/flow/Flow.tsx
 rename src/{ => core}/components/atoms/AddButton.tsx (96%)
 rename src/{ => core}/components/atoms/Button.tsx (100%)
 rename src/{ => core}/components/atoms/Card.tsx (100%)
 rename src/{ => core}/components/atoms/ComponentInfo.tsx (93%)
 rename src/{ => core}/components/atoms/ConnectionLine.tsx (100%)
 rename src/{ => core}/components/atoms/Definition.tsx (83%)
 rename src/{ => core}/components/atoms/Edge.tsx (100%)
 rename src/{ => core}/components/atoms/Empty.tsx (100%)
 rename src/{ => core}/components/atoms/Footer.tsx (91%)
 rename src/{ => core}/components/atoms/Info.tsx (100%)
 rename src/{ => core}/components/atoms/OpenConfig.tsx (96%)
 rename src/{ => core}/components/atoms/Select.tsx (98%)
 rename src/{ => core}/components/atoms/Toast.tsx (100%)
 rename src/{ => core}/components/atoms/Tooltip.tsx (100%)
 rename src/{ => core}/components/atoms/WorkflowSelector.tsx (95%)
 rename src/{ => core}/components/atoms/form/AdjacentStepListItem.tsx (100%)
 rename src/{ => core}/components/atoms/form/ExecutorProperty.tsx (98%)
 rename src/{ => core}/components/atoms/form/InspectorProperty.tsx (100%)
 rename src/{ => core}/components/atoms/form/ListProperty.tsx (100%)
 rename src/{ => core}/components/atoms/form/MatrixProperty.tsx (100%)
 rename src/{ => core}/components/atoms/form/StepListItem.tsx (100%)
 rename src/{ => core}/components/atoms/nodes/JobNode.tsx (100%)
 rename src/{ => core}/components/atoms/summaries/CommandSummary.tsx (100%)
 rename src/{ => core}/components/atoms/summaries/ExecutorSummary.tsx (100%)
 rename src/{ => core}/components/atoms/summaries/JobSummary.tsx (100%)
 rename src/{ => core}/components/atoms/summaries/ParameterSummary.tsx (100%)
 rename src/{ => core}/components/containers/BreadCrumbs.tsx (100%)
 rename src/{ => core}/components/containers/CollapsibleList.tsx (100%)
 rename src/{ => core}/components/containers/ConfirmationModal.tsx (98%)
 rename src/{ => core}/components/containers/DefinitionsContainer.tsx (98%)
 rename src/{ => core}/components/containers/DropdownContainer.tsx (100%)
 rename src/{ => core}/components/containers/ExternalLinks.tsx (93%)
 rename src/{ => core}/components/containers/FilterPreviewContainer.tsx (100%)
 rename src/{ => core}/components/containers/GuideContainer.tsx (100%)
 rename src/{ => core}/components/containers/HeaderMenu.tsx (83%)
 rename src/{ => core}/components/containers/KBarList.tsx (100%)
 rename src/{ => core}/components/containers/OrbImportsContainer.tsx (99%)
 rename src/{ => core}/components/containers/ParamListContainer.tsx (100%)
 rename src/{ => core}/components/containers/ParametersContainer.tsx (96%)
 rename src/{ => core}/components/containers/PreviewToolbox.tsx (100%)
 rename src/{ => core}/components/containers/WorkflowContainer.tsx (100%)
 rename src/{ => core}/components/containers/inspector/CommandInspector.tsx (96%)
 rename src/{ => core}/components/containers/inspector/ExecutorInspector.tsx (100%)
 rename src/{ => core}/components/containers/inspector/JobInspector.tsx (97%)
 rename src/{ => core}/components/containers/inspector/ParameterInspector.tsx (100%)
 rename src/{ => core}/components/containers/inspector/subtypes/CommandSubtypes.tsx (100%)
 rename src/{ => core}/components/containers/inspector/subtypes/ExecutorSubtypes.tsx (96%)
 rename src/{ => core}/components/containers/inspector/subtypes/ParameterSubtypes.tsx (98%)
 rename src/{ => core}/components/menus/SubTypeMenu.tsx (100%)
 rename src/{ => core}/components/menus/TabbedMenu.tsx (100%)
 rename src/{ => core}/components/menus/definitions/DefinitionsMenu.tsx (94%)
 rename src/{ => core}/components/menus/definitions/InspectorDefinitionMenu.tsx (96%)
 rename src/{ => core}/components/menus/definitions/OrbDefinitionsMenu.tsx (98%)
 rename src/{ => core}/components/menus/definitions/OrbImportMenu.tsx (99%)
 rename src/{ => core}/components/menus/definitions/StepDefinitionMenu.tsx (100%)
 rename src/{ => core}/components/menus/definitions/subtypes/ExecutorTypePage.tsx (100%)
 rename src/{ => core}/components/menus/definitions/subtypes/ParameterTypePage.tsx (97%)
 rename src/{ => core}/components/menus/definitions/subtypes/StepTypePage.tsx (100%)
 rename src/{ => core}/components/menus/stage/StagedFilterMenu.tsx (100%)
 rename src/{ => core}/components/menus/stage/StagedJobMenu.tsx (99%)
 rename src/{ => core}/components/panes/EditorPane.tsx (97%)
 rename src/{ => core}/components/panes/NavigationPane.tsx (93%)
 rename src/{ => core}/components/panes/WorkflowsPane.tsx (93%)
 rename src/{ => core}/icons/IconProps.tsx (100%)
 rename src/{ => core}/icons/components/CommandIcon.tsx (100%)
 rename src/{ => core}/icons/components/ExecutorIcon.tsx (100%)
 rename src/{ => core}/icons/components/JobIcon.tsx (100%)
 rename src/{ => core}/icons/components/JobOnHoldIcon.tsx (100%)
 rename src/{ => core}/icons/components/OrbIcon.tsx (100%)
 rename src/{ => core}/icons/components/ParameterIcon.tsx (100%)
 rename src/{ => core}/icons/components/WorkflowIcon.tsx (100%)
 rename src/{ => core}/icons/ui/AddIcon.tsx (100%)
 rename src/{ => core}/icons/ui/BranchIcon.tsx (100%)
 rename src/{ => core}/icons/ui/BreadCrumbArrowIcon.tsx (100%)
 rename src/{ => core}/icons/ui/CircleCI.tsx (100%)
 rename src/{ => core}/icons/ui/CopyIcon.tsx (100%)
 rename src/{ => core}/icons/ui/DeleteItemIcon.tsx (100%)
 rename src/{ => core}/icons/ui/DragItemIcon.tsx (100%)
 rename src/{ => core}/icons/ui/EditIcon.tsx (100%)
 rename src/{ => core}/icons/ui/ExpandIcon.tsx (100%)
 rename src/{ => core}/icons/ui/FilterIcon.tsx (100%)
 rename src/{ => core}/icons/ui/InfoIcon.tsx (100%)
 rename src/{ => core}/icons/ui/Loading.tsx (100%)
 rename src/{ => core}/icons/ui/Logo.tsx (100%)
 rename src/{ => core}/icons/ui/MinusIcon.tsx (100%)
 rename src/{ => core}/icons/ui/MoreIcon.tsx (100%)
 rename src/{ => core}/icons/ui/NewWindowIcon.tsx (100%)
 rename src/{ => core}/icons/ui/OpenIcon.tsx (100%)
 rename src/{ => core}/icons/ui/PlusIcon.tsx (100%)
 rename src/{ => core}/icons/ui/Switch.tsx (100%)
 rename src/{ => core}/icons/ui/TagIcon.tsx (100%)
 rename src/{ => core}/icons/ui/ToolTipPointerIcon.tsx (100%)
 rename src/{ => core}/state/DefinitionStore.tsx (97%)
 rename src/{ => core}/state/Hooks.tsx (100%)
 rename src/{ => core}/state/Store.tsx (98%)
 rename src/{components/flow => flow/components}/ConnectionLine.tsx (96%)
 create mode 100644 src/flow/components/Flow.tsx
 rename src/{components/flow => flow/components}/FlowTools.tsx (62%)
 rename src/{components/flow => flow/components}/GhostNode.tsx (94%)
 rename src/{components/flow => flow/components}/JobNode.tsx (76%)
 create mode 100644 src/flow/hooks/useFlowDnD.ts
 create mode 100644 src/flow/hooks/useFlowOffset.ts
 rename src/{ => flow}/state/FlowStore.tsx (78%)
 rename src/{ => flow}/util/FlowUtil.tsx (100%)
 delete mode 100644 src/hooks/useMapping.tsx
 create mode 100644 src/mappings/NodeMapping.tsx

diff --git a/src/App.tsx b/src/App.tsx
index f6014e8..6d3756d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,16 @@
 import algoliasearch from 'algoliasearch';
 import { createStore, StoreProvider } from 'easy-peasy';
 import { useRef } from 'react';
-import Toast from './components/atoms/Toast';
-import ToolTip from './components/atoms/Tooltip';
-import ConfirmationModal from './components/containers/ConfirmationModal';
-import KBarList from './components/containers/KBarList';
-import EditorPane from './components/panes/EditorPane';
-import NavigationPane from './components/panes/NavigationPane';
-import WorkflowsPane from './components/panes/WorkflowsPane';
+import Toast from './core/components/atoms/Toast';
+import ToolTip from './core/components/atoms/Tooltip';
+import ConfirmationModal from './core/components/containers/ConfirmationModal';
+import KBarList from './core/components/containers/KBarList';
+import EditorPane from './core/components/panes/EditorPane';
+import NavigationPane from './core/components/panes/NavigationPane';
+import WorkflowsPane from './core/components/panes/WorkflowsPane';
 import './index.css';
-import useWindowDimensions, { useStoreState } from './state/Hooks';
-import Store from './state/Store';
+import useWindowDimensions, { useStoreState } from './core/state/Hooks';
+import Store from './core/state/Store';
 export const store = createStore(Store);
 export const inspectorWidth = 400;
 
diff --git a/src/components/flow/Flow.tsx b/src/components/flow/Flow.tsx
deleted file mode 100644
index e63b3ae..0000000
--- a/src/components/flow/Flow.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import ReactFlow, { Background, useOnViewportChange, BackgroundVariant, ControlButton, Controls, MiniMap, Node, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, useStoreApi, useViewport, Viewport, XYPosition, applyNodeChanges, applyEdgeChanges, addEdge, Edge, Connection, ConnectionMode } from "reactflow";
-import { FlowMode } from "../../state/FlowStore";
-import { useStoreState } from "../../state/Hooks";
-import { DataModel } from "../../state/Store";
-import ConnectionLine from "./ConnectionLine";
-import GhostNode from "./GhostNode";
-import JobNode from "./JobNode";
-
-export type FlowProps = { className?: string }
-
-
-const nodeTypes = {
-  job: JobNode,
-  ghost: GhostNode,
-};
-
-const initialNodes = [
-    {
-      id: '1',
-      type: 'job',
-      data: { label: 'Node A' },
-      position: { x: 0, y: 0 },
-    },
-    {
-      id: '2',
-      type: 'job',
-      data: { label: 'Node B' },
-      position: { x: 100, y: 200 },
-    },
-    {
-      id: '3',
-      type: 'job',
-      data: { label: 'Node C' },
-      position: { x: 350, y: 200 },
-    },
-  ];
-
-const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'updatable edge' }];
-const MIN_DISTANCE = 1000;
-
-type FlowDropEvent = (position: XYPosition, dragging?: DataModel) => void;
-
-function useFlowOffset(func: FlowDropEvent, offset?: DOMRect, deps?: any[]) {
-  const { project } = useReactFlow();
-  const dragging = useStoreState((state) => state.dragging);
-
-  return useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-// console.log(dragging?.dataType?.dragTarget);
-
-//     if (dragging?.dataType?.dragTarget !== 'workflow') {
-//       return;
-//     }
-
-    const eventPos = project({ x: e.clientX, y: e.clientY - (offset?.y || 0)});
-
-    func(eventPos, dragging);
-
-    e.preventDefault();
-  }, deps ? [project, ...deps] : [project]);
-}
-
-function useFlowDragAndDrop(offset?: DOMRect) {
-  const { addNodes, setNodes, deleteElements, getNodes,  } = useReactFlow();
-  const [lastPos, setPos] = useState<XYPosition>();
-
-  const onDragEnter = useFlowOffset((position, data) => {
-    console.log(position)
-    addNodes({  id: 'ghost', position, type: 'ghost',data: ''});
-   }, offset); // Upon entering the flow, create the drop ghost
-  const onDragOver = useFlowOffset((position, data) => {
-    if (lastPos) {
-      const dx = lastPos.x - position.x;
-      const dy = lastPos.y - position.y;
-      const dist = Math.abs(dx * dy);
-
-      if (dist > 150) {
-        console.log(dist)
-          const nodes = getNodes();
-          const changes = applyNodeChanges([ {  id: 'ghost', type: 'position', position, dragging: true } ], nodes);
-          setNodes(changes);
-          setPos(position);
-      }
-    } else {
-      setPos(position);
-    }
-  }, offset, [lastPos]); // While dragging, move the ghost
-  const onDragLeave = useFlowOffset((pos, data) => {
-    deleteElements({ nodes: [{ id: 'ghost' }]})
-    console.log('leave', pos)
-  }, offset); // Upon drop and leave, remove the ghost
-  const onDrop = useFlowOffset((pos, data) => {
-    deleteElements({ nodes: [{ id: 'ghost' }]})
-    console.log('end', pos)
-  }, offset); // Upon drop and leave, remove the ghost
-
-
-  return [onDragEnter, onDragOver, onDragLeave, onDrop]
-}
-
-const Flow = (props: FlowProps) => {
-    const store = useStoreApi();
-    const viewport = useViewport();
-    const { project, viewportInitialized } = useReactFlow();
-    const flowRef = useRef<HTMLDivElement>(null);
-    const nodeState = useNodesState(initialNodes);
-    const [nodes, setNodes, onNodesChange] = nodeState;
-    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-    const mode = useStoreState((state) => state.mode);
-    const onConnect = useCallback((params: Edge | Connection) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    const flowRect = flowRef.current?.getBoundingClientRect();
-    const [onDragEnter, onDragOver, onDragLeave, onDrop] = useFlowDragAndDrop(flowRect);
-
-
-    return <ReactFlow
-        minZoom={-Infinity}
-        fitView
-        nodes={nodes}
-        edges={edges}
-        ref={flowRef}
-        // onPaneMouseMove={(e) => { console.log(e.clientX, e.clientY)}}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onConnect={onConnect}
-        nodesDraggable={mode == FlowMode.MOVE}
-        elementsSelectable={mode == FlowMode.SELECT}
-        connectionLineComponent={ConnectionLine}
-        connectionLineStyle={ { zIndex: -10 }}
-        snapToGrid
-        nodeTypes={nodeTypes}
-        className={props.className}
-        onDragOver={onDragOver}
-        onDragEnter={onDragEnter}
-        onDragLeaveCapture={onDragLeave}
-        onDrop={onDrop}
-        onInit={(reactFlowInstance) => console.log('flow loaded:', reactFlowInstance)}
-        >
-        <Background
-          gap={15}
-          color="#c7c7c7"
-          className="bg-circle-gray-200"
-          size={2}
-        />
-        <Controls>
-        </Controls>
-    </ReactFlow>
-}
-
-const GraphWrapper = (props: FlowProps) => {
-    return <ReactFlowProvider>
-        <Flow {...props} />
-    </ReactFlowProvider>
-}
-
-export { GraphWrapper, Flow };
-      // const onConnect = useCallback((params) => setEdges((els) => addEdge(params, els)), []);
-
-    // const onNodesChange = useCallback(
-    //   (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
-    //   [setNodes]
-    // );
-    // const onEdgesChange = useCallback(
-    //   (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
-    //   [setEdges]
-    // );
-    // const onConnect = useCallback(
-    //   (connection) => setEdges((eds) => addEdge(connection, eds)),
-    //   [setEdges]
-    // );
-
-    // const getClosestNode = useCallback((pos: XYPosition) => {
-    //     const { nodeInternals } = store.getState();
-    //     const storeNodes = Array.from(nodeInternals.values());
-
-    //     const closestNode = storeNodes.reduce<{ distance: number, node?: Node<any>}>(
-    //       (res, n) => {
-    //         const boundingRect = flowRef.current?.getBoundingClientRect() || { x: 0, y: 0};
-    //         const mouseX = Math.abs((pos.x - boundingRect.x) * viewport.zoom + viewport.x);
-    //         const mouseY = Math.abs((pos.y - boundingRect.y) * viewport.zoom + viewport.y)
-    //         const dx = Math.abs(n.position.x) - mouseX;
-    //         const dy = Math.abs(n.position.y) - mouseY;
-    //         const d = Math.sqrt(dx * dx + dy * dy);
-
-    //         // console.log(pos.y - boundingRect.y, mouseY, viewport.y)
-
-    //         if (d < res.distance && d < MIN_DISTANCE) {
-    //             res.distance = d;
-    //             res.node = n;
-    //         }
-
-    //         return res;
-    //       },
-    //       {
-    //         distance: Number.MAX_VALUE,
-    //         node: undefined,
-    //       }
-    //     );
-
-    //     if (!closestNode.node) {
-    //       return null;
-    //     }
-
-    // // console.log(closestNode.node)
-
-    //     return closestNode.node;
-    //   }, [viewport]);
diff --git a/src/components/atoms/AddButton.tsx b/src/core/components/atoms/AddButton.tsx
similarity index 96%
rename from src/components/atoms/AddButton.tsx
rename to src/core/components/atoms/AddButton.tsx
index 47f9c7a..e2d7f55 100644
--- a/src/components/atoms/AddButton.tsx
+++ b/src/core/components/atoms/AddButton.tsx
@@ -7,7 +7,7 @@ const AddButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
       type="button"
       {...props}
       className={
-        `bg-circle-gray-300 transition-colors h-8 w-8 rounded ${props.className} 
+        `bg-circle-gray-300 transition-colors h-8 w-8 rounded ${props.className}
       ${props.disabled ? 'opacity-50 cursor-default' : 'hover:bg-circle-gray-400 '}`
       }
     >
diff --git a/src/components/atoms/Button.tsx b/src/core/components/atoms/Button.tsx
similarity index 100%
rename from src/components/atoms/Button.tsx
rename to src/core/components/atoms/Button.tsx
diff --git a/src/components/atoms/Card.tsx b/src/core/components/atoms/Card.tsx
similarity index 100%
rename from src/components/atoms/Card.tsx
rename to src/core/components/atoms/Card.tsx
diff --git a/src/components/atoms/ComponentInfo.tsx b/src/core/components/atoms/ComponentInfo.tsx
similarity index 93%
rename from src/components/atoms/ComponentInfo.tsx
rename to src/core/components/atoms/ComponentInfo.tsx
index 27cc6bf..8cc764e 100644
--- a/src/components/atoms/ComponentInfo.tsx
+++ b/src/core/components/atoms/ComponentInfo.tsx
@@ -1,6 +1,6 @@
 import InspectableMapping, {
   GenerableInfoType,
-} from '../../mappings/InspectableMapping';
+} from '../../../mappings/InspectableMapping';
 
 const ComponentInfo = ({
   type,
diff --git a/src/components/atoms/ConnectionLine.tsx b/src/core/components/atoms/ConnectionLine.tsx
similarity index 100%
rename from src/components/atoms/ConnectionLine.tsx
rename to src/core/components/atoms/ConnectionLine.tsx
diff --git a/src/components/atoms/Definition.tsx b/src/core/components/atoms/Definition.tsx
similarity index 83%
rename from src/components/atoms/Definition.tsx
rename to src/core/components/atoms/Definition.tsx
index 24d26ae..c5e6e60 100644
--- a/src/components/atoms/Definition.tsx
+++ b/src/core/components/atoms/Definition.tsx
@@ -5,7 +5,7 @@ import {
   OrbImport,
   OrbRef,
 } from '@circleci/circleci-config-sdk/dist/src/lib/Orb';
-import InspectableMapping from '../../mappings/InspectableMapping';
+import InspectableMapping from '../../../mappings/InspectableMapping';
 import { useStoreActions } from '../../state/Hooks';
 import { InspectorDefinitionMenuNav } from '../menus/definitions/InspectorDefinitionMenu';
 
@@ -35,7 +35,7 @@ export const flattenGenerable = (data: Generable, nested?: boolean) => {
   )[0];
 };
 
-const Definition = (props: {
+const Definition = ({ data, ...props}: {
   data: Generable | OrbRef<AnyParameterLiteral>;
   type: InspectableMapping;
   index: number;
@@ -47,27 +47,27 @@ const Definition = (props: {
 
   return (
     <button
-      className="w-full mb-2 p-4 py-2 cursor-pointer text-left text-circle-black 
+      className="w-full mb-2 p-4 py-2 cursor-pointer text-left text-circle-black
       bg-white border border-circle-gray-300 rounded-md2 hover:border-gray-700 text-base"
       draggable="true"
       onDragStart={(e) => {
-        const type = props.type;
+        const dataMapping = props.type;
 
-        if (type?.dragTarget) {
-          setDragging({ dataType: type, data: props.data });
+        if (dataMapping?.dragTarget) {
+          setDragging({ dataMapping, data });
         }
       }}
       onClick={(e) => {
-        if (props.data instanceof CircleCI.orb.OrbRef) {
+        if (data instanceof CircleCI.orb.OrbRef) {
           return;
         }
 
-        const flattened = flattenGenerable(props.data);
+        const flattened = flattenGenerable(data);
 
         navigateTo({
           component: InspectorDefinitionMenuNav,
           props: {
-            data: props.data,
+            data,
             editing: true,
             values: flattened,
             dataType: props.type,
@@ -76,7 +76,7 @@ const Definition = (props: {
         });
       }}
     >
-      <Summary data={props.data} />
+      <Summary data={data} />
     </button>
   );
 };
diff --git a/src/components/atoms/Edge.tsx b/src/core/components/atoms/Edge.tsx
similarity index 100%
rename from src/components/atoms/Edge.tsx
rename to src/core/components/atoms/Edge.tsx
diff --git a/src/components/atoms/Empty.tsx b/src/core/components/atoms/Empty.tsx
similarity index 100%
rename from src/components/atoms/Empty.tsx
rename to src/core/components/atoms/Empty.tsx
diff --git a/src/components/atoms/Footer.tsx b/src/core/components/atoms/Footer.tsx
similarity index 91%
rename from src/components/atoms/Footer.tsx
rename to src/core/components/atoms/Footer.tsx
index ef1d469..b749af3 100644
--- a/src/components/atoms/Footer.tsx
+++ b/src/core/components/atoms/Footer.tsx
@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { inspectorWidth } from '../../App';
+import { inspectorWidth } from '../../../App';
 
 export const Footer = ({
   children,
diff --git a/src/components/atoms/Info.tsx b/src/core/components/atoms/Info.tsx
similarity index 100%
rename from src/components/atoms/Info.tsx
rename to src/core/components/atoms/Info.tsx
diff --git a/src/components/atoms/OpenConfig.tsx b/src/core/components/atoms/OpenConfig.tsx
similarity index 96%
rename from src/components/atoms/OpenConfig.tsx
rename to src/core/components/atoms/OpenConfig.tsx
index b94fc35..2a3b6f0 100644
--- a/src/components/atoms/OpenConfig.tsx
+++ b/src/core/components/atoms/OpenConfig.tsx
@@ -5,7 +5,7 @@ import {
   useStoreActions,
   useStoreState,
 } from '../../state/Hooks';
-import { Button } from '../atoms/Button';
+import { Button } from './Button';
 
 export const OpenConfig = () => {
   const inputFile = useRef<HTMLInputElement>(null);
diff --git a/src/components/atoms/Select.tsx b/src/core/components/atoms/Select.tsx
similarity index 98%
rename from src/components/atoms/Select.tsx
rename to src/core/components/atoms/Select.tsx
index afd1600..0b7ee26 100644
--- a/src/components/atoms/Select.tsx
+++ b/src/core/components/atoms/Select.tsx
@@ -61,7 +61,7 @@ const Select = (props: SelectProps) => {
         props.borderless
           ? 'border-transparent'
           : ' border-circle-gray-300 shadow-sm'
-      } px-2 hover:border-circle-gray-700 border 
+      } px-2 hover:border-circle-gray-700 border
         ${props.className}`}
     >
       <div className="flex flex-row w-full">
diff --git a/src/components/atoms/Toast.tsx b/src/core/components/atoms/Toast.tsx
similarity index 100%
rename from src/components/atoms/Toast.tsx
rename to src/core/components/atoms/Toast.tsx
diff --git a/src/components/atoms/Tooltip.tsx b/src/core/components/atoms/Tooltip.tsx
similarity index 100%
rename from src/components/atoms/Tooltip.tsx
rename to src/core/components/atoms/Tooltip.tsx
diff --git a/src/components/atoms/WorkflowSelector.tsx b/src/core/components/atoms/WorkflowSelector.tsx
similarity index 95%
rename from src/components/atoms/WorkflowSelector.tsx
rename to src/core/components/atoms/WorkflowSelector.tsx
index 21118e4..ac48d17 100644
--- a/src/components/atoms/WorkflowSelector.tsx
+++ b/src/core/components/atoms/WorkflowSelector.tsx
@@ -1,7 +1,7 @@
 import { v4 } from 'uuid';
 import WorkflowIcon from '../../icons/components/WorkflowIcon';
 import ExpandIcon from '../../icons/ui/ExpandIcon';
-import { WorkflowStage } from '../../mappings/components/WorkflowMapping';
+import { WorkflowStage } from '../../../mappings/components/WorkflowMapping';
 import { useStoreActions, useStoreState } from '../../state/Hooks';
 import DropdownContainer from '../containers/DropdownContainer';
 
diff --git a/src/components/atoms/form/AdjacentStepListItem.tsx b/src/core/components/atoms/form/AdjacentStepListItem.tsx
similarity index 100%
rename from src/components/atoms/form/AdjacentStepListItem.tsx
rename to src/core/components/atoms/form/AdjacentStepListItem.tsx
diff --git a/src/components/atoms/form/ExecutorProperty.tsx b/src/core/components/atoms/form/ExecutorProperty.tsx
similarity index 98%
rename from src/components/atoms/form/ExecutorProperty.tsx
rename to src/core/components/atoms/form/ExecutorProperty.tsx
index 82ef582..36cd539 100644
--- a/src/components/atoms/form/ExecutorProperty.tsx
+++ b/src/core/components/atoms/form/ExecutorProperty.tsx
@@ -31,7 +31,7 @@ export const ExecutorProperty = ({
       label={label || "Executor"}
       as="select"
       name={`${name}.name`}
-      className="w-full"  
+      className="w-full"
       {...props}
       dependent={(executorName: string) => {
         const splitName = executorName?.split('/');
diff --git a/src/components/atoms/form/InspectorProperty.tsx b/src/core/components/atoms/form/InspectorProperty.tsx
similarity index 100%
rename from src/components/atoms/form/InspectorProperty.tsx
rename to src/core/components/atoms/form/InspectorProperty.tsx
diff --git a/src/components/atoms/form/ListProperty.tsx b/src/core/components/atoms/form/ListProperty.tsx
similarity index 100%
rename from src/components/atoms/form/ListProperty.tsx
rename to src/core/components/atoms/form/ListProperty.tsx
diff --git a/src/components/atoms/form/MatrixProperty.tsx b/src/core/components/atoms/form/MatrixProperty.tsx
similarity index 100%
rename from src/components/atoms/form/MatrixProperty.tsx
rename to src/core/components/atoms/form/MatrixProperty.tsx
diff --git a/src/components/atoms/form/StepListItem.tsx b/src/core/components/atoms/form/StepListItem.tsx
similarity index 100%
rename from src/components/atoms/form/StepListItem.tsx
rename to src/core/components/atoms/form/StepListItem.tsx
diff --git a/src/components/atoms/nodes/JobNode.tsx b/src/core/components/atoms/nodes/JobNode.tsx
similarity index 100%
rename from src/components/atoms/nodes/JobNode.tsx
rename to src/core/components/atoms/nodes/JobNode.tsx
diff --git a/src/components/atoms/summaries/CommandSummary.tsx b/src/core/components/atoms/summaries/CommandSummary.tsx
similarity index 100%
rename from src/components/atoms/summaries/CommandSummary.tsx
rename to src/core/components/atoms/summaries/CommandSummary.tsx
diff --git a/src/components/atoms/summaries/ExecutorSummary.tsx b/src/core/components/atoms/summaries/ExecutorSummary.tsx
similarity index 100%
rename from src/components/atoms/summaries/ExecutorSummary.tsx
rename to src/core/components/atoms/summaries/ExecutorSummary.tsx
diff --git a/src/components/atoms/summaries/JobSummary.tsx b/src/core/components/atoms/summaries/JobSummary.tsx
similarity index 100%
rename from src/components/atoms/summaries/JobSummary.tsx
rename to src/core/components/atoms/summaries/JobSummary.tsx
diff --git a/src/components/atoms/summaries/ParameterSummary.tsx b/src/core/components/atoms/summaries/ParameterSummary.tsx
similarity index 100%
rename from src/components/atoms/summaries/ParameterSummary.tsx
rename to src/core/components/atoms/summaries/ParameterSummary.tsx
diff --git a/src/components/containers/BreadCrumbs.tsx b/src/core/components/containers/BreadCrumbs.tsx
similarity index 100%
rename from src/components/containers/BreadCrumbs.tsx
rename to src/core/components/containers/BreadCrumbs.tsx
diff --git a/src/components/containers/CollapsibleList.tsx b/src/core/components/containers/CollapsibleList.tsx
similarity index 100%
rename from src/components/containers/CollapsibleList.tsx
rename to src/core/components/containers/CollapsibleList.tsx
diff --git a/src/components/containers/ConfirmationModal.tsx b/src/core/components/containers/ConfirmationModal.tsx
similarity index 98%
rename from src/components/containers/ConfirmationModal.tsx
rename to src/core/components/containers/ConfirmationModal.tsx
index 17ab25e..cbcd7e7 100644
--- a/src/components/containers/ConfirmationModal.tsx
+++ b/src/core/components/containers/ConfirmationModal.tsx
@@ -33,7 +33,7 @@ const confirmDialogue: ConfirmationDialogueTemplates = {
   },
   delete: {
     header: `Delete ${placeholder} ${placeholder}?`,
-    body: `When you delete the ${placeholder} named ${placeholder}, it will be removed from each component that uses it. 
+    body: `When you delete the ${placeholder} named ${placeholder}, it will be removed from each component that uses it.
     This definition has %s dependent components.`,
     button: 'Delete',
     buttonVariant: 'dangerous',
diff --git a/src/components/containers/DefinitionsContainer.tsx b/src/core/components/containers/DefinitionsContainer.tsx
similarity index 98%
rename from src/components/containers/DefinitionsContainer.tsx
rename to src/core/components/containers/DefinitionsContainer.tsx
index 8aaf730..cc6cb8f 100644
--- a/src/components/containers/DefinitionsContainer.tsx
+++ b/src/core/components/containers/DefinitionsContainer.tsx
@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import InspectableMapping from '../../mappings/InspectableMapping';
+import InspectableMapping from '../../../mappings/InspectableMapping';
 import { mapDefinitions, NamedGenerable } from '../../state/DefinitionStore';
 import { useStoreActions, useStoreState } from '../../state/Hooks';
 import AddButton from '../atoms/AddButton';
diff --git a/src/components/containers/DropdownContainer.tsx b/src/core/components/containers/DropdownContainer.tsx
similarity index 100%
rename from src/components/containers/DropdownContainer.tsx
rename to src/core/components/containers/DropdownContainer.tsx
diff --git a/src/components/containers/ExternalLinks.tsx b/src/core/components/containers/ExternalLinks.tsx
similarity index 93%
rename from src/components/containers/ExternalLinks.tsx
rename to src/core/components/containers/ExternalLinks.tsx
index 1cdea3a..18c01b3 100644
--- a/src/components/containers/ExternalLinks.tsx
+++ b/src/core/components/containers/ExternalLinks.tsx
@@ -1,5 +1,5 @@
 import MoreIcon from '../../icons/ui/MoreIcon';
-import DropdownContainer from '../containers/DropdownContainer';
+import DropdownContainer from './DropdownContainer';
 
 export const ExternalLinks = () => {
   const links = [
diff --git a/src/components/containers/FilterPreviewContainer.tsx b/src/core/components/containers/FilterPreviewContainer.tsx
similarity index 100%
rename from src/components/containers/FilterPreviewContainer.tsx
rename to src/core/components/containers/FilterPreviewContainer.tsx
diff --git a/src/components/containers/GuideContainer.tsx b/src/core/components/containers/GuideContainer.tsx
similarity index 100%
rename from src/components/containers/GuideContainer.tsx
rename to src/core/components/containers/GuideContainer.tsx
diff --git a/src/components/containers/HeaderMenu.tsx b/src/core/components/containers/HeaderMenu.tsx
similarity index 83%
rename from src/components/containers/HeaderMenu.tsx
rename to src/core/components/containers/HeaderMenu.tsx
index ff9bc90..efdee59 100644
--- a/src/components/containers/HeaderMenu.tsx
+++ b/src/core/components/containers/HeaderMenu.tsx
@@ -1,6 +1,6 @@
+import { FlowTools } from '../../../flow/components/FlowTools';
 import { Button } from '../atoms/Button';
 import { ExternalLinks } from './ExternalLinks';
-import { FlowTools } from '../flow/FlowTools';
 import PreviewToolbox from './PreviewToolbox';
 
 export default function HeaderMenu() {
diff --git a/src/components/containers/KBarList.tsx b/src/core/components/containers/KBarList.tsx
similarity index 100%
rename from src/components/containers/KBarList.tsx
rename to src/core/components/containers/KBarList.tsx
diff --git a/src/components/containers/OrbImportsContainer.tsx b/src/core/components/containers/OrbImportsContainer.tsx
similarity index 99%
rename from src/components/containers/OrbImportsContainer.tsx
rename to src/core/components/containers/OrbImportsContainer.tsx
index ef04f34..d9b0173 100644
--- a/src/components/containers/OrbImportsContainer.tsx
+++ b/src/core/components/containers/OrbImportsContainer.tsx
@@ -21,11 +21,11 @@ const OrbImportsContainer = (props: OrbImportProps) => {
   const ref = useRef(null);
   const orbDefinitions = useMemo(
     () =>
-    
+
       mapDefinitions(items, (orb) => {
         return (
           <button
-            className="w-full mb-2 p-4 py-2 text-sm cursor-pointer text-left text-circle-black 
+            className="w-full mb-2 p-4 py-2 text-sm cursor-pointer text-left text-circle-black
       bg-white border border-circle-gray-300 rounded-md2 flex flex-row hover:border-black"
             onClick={() => {
               navigateTo({
diff --git a/src/components/containers/ParamListContainer.tsx b/src/core/components/containers/ParamListContainer.tsx
similarity index 100%
rename from src/components/containers/ParamListContainer.tsx
rename to src/core/components/containers/ParamListContainer.tsx
diff --git a/src/components/containers/ParametersContainer.tsx b/src/core/components/containers/ParametersContainer.tsx
similarity index 96%
rename from src/components/containers/ParametersContainer.tsx
rename to src/core/components/containers/ParametersContainer.tsx
index 640333b..936e643 100644
--- a/src/components/containers/ParametersContainer.tsx
+++ b/src/core/components/containers/ParametersContainer.tsx
@@ -1,7 +1,7 @@
 import { FieldArray, useField } from 'formik';
 import ParameterIcon from '../../icons/components/ParameterIcon';
-import { ParameterMapping } from '../../mappings/components/ParameterMapping';
-import GenerableMapping from '../../mappings/GenerableMapping';
+import { ParameterMapping } from '../../../mappings/components/ParameterMapping';
+import GenerableMapping from '../../../mappings/GenerableMapping';
 import { useStoreActions } from '../../state/Hooks';
 import { Button } from '../atoms/Button';
 import { Empty } from '../atoms/Empty';
@@ -72,7 +72,7 @@ const ParameterContainer = (props: {
             <Empty
               label="No Parameters Yet"
               Logo={ParameterIcon}
-              description="Add a parameter by clicking the button above 
+              description="Add a parameter by clicking the button above
               to implement dynamic functionality."
             />
           )}
diff --git a/src/components/containers/PreviewToolbox.tsx b/src/core/components/containers/PreviewToolbox.tsx
similarity index 100%
rename from src/components/containers/PreviewToolbox.tsx
rename to src/core/components/containers/PreviewToolbox.tsx
diff --git a/src/components/containers/WorkflowContainer.tsx b/src/core/components/containers/WorkflowContainer.tsx
similarity index 100%
rename from src/components/containers/WorkflowContainer.tsx
rename to src/core/components/containers/WorkflowContainer.tsx
diff --git a/src/components/containers/inspector/CommandInspector.tsx b/src/core/components/containers/inspector/CommandInspector.tsx
similarity index 96%
rename from src/components/containers/inspector/CommandInspector.tsx
rename to src/core/components/containers/inspector/CommandInspector.tsx
index f5f409d..68ac817 100644
--- a/src/components/containers/inspector/CommandInspector.tsx
+++ b/src/core/components/containers/inspector/CommandInspector.tsx
@@ -1,6 +1,6 @@
 import { FormikValues } from 'formik';
 import CommandIcon from '../../../icons/components/CommandIcon';
-import { CommandMapping } from '../../../mappings/components/CommandMapping';
+import { CommandMapping } from '../../../../mappings/components/CommandMapping';
 import { DefinitionsModel } from '../../../state/DefinitionStore';
 import { useStoreActions } from '../../../state/Hooks';
 import AddButton from '../../atoms/AddButton';
diff --git a/src/components/containers/inspector/ExecutorInspector.tsx b/src/core/components/containers/inspector/ExecutorInspector.tsx
similarity index 100%
rename from src/components/containers/inspector/ExecutorInspector.tsx
rename to src/core/components/containers/inspector/ExecutorInspector.tsx
diff --git a/src/components/containers/inspector/JobInspector.tsx b/src/core/components/containers/inspector/JobInspector.tsx
similarity index 97%
rename from src/components/containers/inspector/JobInspector.tsx
rename to src/core/components/containers/inspector/JobInspector.tsx
index 23355f3..4122691 100644
--- a/src/components/containers/inspector/JobInspector.tsx
+++ b/src/core/components/containers/inspector/JobInspector.tsx
@@ -2,8 +2,8 @@ import { executors, Job, orb } from '@circleci/circleci-config-sdk';
 import { FormikValues, useField } from 'formik';
 import CommandIcon from '../../../icons/components/CommandIcon';
 import DeleteItemIcon from '../../../icons/ui/DeleteItemIcon';
-import { UNDEFINED_EXECUTOR } from '../../../mappings/components/ExecutorMapping';
-import { JobMapping } from '../../../mappings/components/JobMapping';
+import { UNDEFINED_EXECUTOR } from '../../../../mappings/components/ExecutorMapping';
+import { JobMapping } from '../../../../mappings/components/JobMapping';
 import {
   DefinitionsModel,
   DefinitionSubscriptions,
diff --git a/src/components/containers/inspector/ParameterInspector.tsx b/src/core/components/containers/inspector/ParameterInspector.tsx
similarity index 100%
rename from src/components/containers/inspector/ParameterInspector.tsx
rename to src/core/components/containers/inspector/ParameterInspector.tsx
diff --git a/src/components/containers/inspector/subtypes/CommandSubtypes.tsx b/src/core/components/containers/inspector/subtypes/CommandSubtypes.tsx
similarity index 100%
rename from src/components/containers/inspector/subtypes/CommandSubtypes.tsx
rename to src/core/components/containers/inspector/subtypes/CommandSubtypes.tsx
diff --git a/src/components/containers/inspector/subtypes/ExecutorSubtypes.tsx b/src/core/components/containers/inspector/subtypes/ExecutorSubtypes.tsx
similarity index 96%
rename from src/components/containers/inspector/subtypes/ExecutorSubtypes.tsx
rename to src/core/components/containers/inspector/subtypes/ExecutorSubtypes.tsx
index 252d21b..8e2f923 100644
--- a/src/components/containers/inspector/subtypes/ExecutorSubtypes.tsx
+++ b/src/core/components/containers/inspector/subtypes/ExecutorSubtypes.tsx
@@ -1,5 +1,5 @@
 import { executors } from '@circleci/circleci-config-sdk';
-import { SubTypeMapping } from '../../../../mappings/GenerableMapping';
+import { SubTypeMapping } from '../../../../../mappings/GenerableMapping';
 import InspectorProperty from '../../../atoms/form/InspectorProperty';
 
 export interface ExecutorSubTypes {
diff --git a/src/components/containers/inspector/subtypes/ParameterSubtypes.tsx b/src/core/components/containers/inspector/subtypes/ParameterSubtypes.tsx
similarity index 98%
rename from src/components/containers/inspector/subtypes/ParameterSubtypes.tsx
rename to src/core/components/containers/inspector/subtypes/ParameterSubtypes.tsx
index 5bb8adf..e4c452a 100644
--- a/src/components/containers/inspector/subtypes/ParameterSubtypes.tsx
+++ b/src/core/components/containers/inspector/subtypes/ParameterSubtypes.tsx
@@ -1,5 +1,5 @@
 import { ReusableExecutor } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Reusable';
-import { SubTypeMapping } from '../../../../mappings/GenerableMapping';
+import { SubTypeMapping } from '../../../../../mappings/GenerableMapping';
 import InspectorProperty from '../../../atoms/form/InspectorProperty';
 import ListProperty from '../../../atoms/form/ListProperty';
 
diff --git a/src/components/menus/SubTypeMenu.tsx b/src/core/components/menus/SubTypeMenu.tsx
similarity index 100%
rename from src/components/menus/SubTypeMenu.tsx
rename to src/core/components/menus/SubTypeMenu.tsx
diff --git a/src/components/menus/TabbedMenu.tsx b/src/core/components/menus/TabbedMenu.tsx
similarity index 100%
rename from src/components/menus/TabbedMenu.tsx
rename to src/core/components/menus/TabbedMenu.tsx
diff --git a/src/components/menus/definitions/DefinitionsMenu.tsx b/src/core/components/menus/definitions/DefinitionsMenu.tsx
similarity index 94%
rename from src/components/menus/definitions/DefinitionsMenu.tsx
rename to src/core/components/menus/definitions/DefinitionsMenu.tsx
index 65c4ca3..a246f9a 100644
--- a/src/components/menus/definitions/DefinitionsMenu.tsx
+++ b/src/core/components/menus/definitions/DefinitionsMenu.tsx
@@ -1,8 +1,8 @@
 import { Form, Formik } from 'formik';
 import WorkflowIcon from '../../../icons/components/WorkflowIcon';
-import { WorkflowStage } from '../../../mappings/components/WorkflowMapping';
-import { dataMappings } from '../../../mappings/GenerableMapping';
-import InspectableMapping from '../../../mappings/InspectableMapping';
+import { WorkflowStage } from '../../../../mappings/components/WorkflowMapping';
+import { dataMappings } from '../../../../mappings/GenerableMapping';
+import InspectableMapping from '../../../../mappings/InspectableMapping';
 import { useStoreActions, useStoreState } from '../../../state/Hooks';
 import { NavigationComponent } from '../../../state/Store';
 import { Button } from '../../atoms/Button';
diff --git a/src/components/menus/definitions/InspectorDefinitionMenu.tsx b/src/core/components/menus/definitions/InspectorDefinitionMenu.tsx
similarity index 96%
rename from src/components/menus/definitions/InspectorDefinitionMenu.tsx
rename to src/core/components/menus/definitions/InspectorDefinitionMenu.tsx
index fc6a85e..196fad1 100644
--- a/src/components/menus/definitions/InspectorDefinitionMenu.tsx
+++ b/src/core/components/menus/definitions/InspectorDefinitionMenu.tsx
@@ -1,6 +1,6 @@
 import { Form, Formik } from 'formik';
 import EditIcon from '../../../icons/ui/EditIcon';
-import InspectableMapping from '../../../mappings/InspectableMapping';
+import InspectableMapping from '../../../../mappings/InspectableMapping';
 import {
   DefinitionsModel,
   DefinitionSubscriptions,
@@ -14,7 +14,7 @@ import ParameterContainer from '../../containers/ParametersContainer';
 import { SubTypeMenuPageProps } from '../SubTypeMenu';
 import TabbedMenu from '../TabbedMenu';
 
-type InspectorDefinitionProps = DataModel & {
+type InspectorDefinitionProps = DataModel<any, InspectableMapping> & {
   values: Record<string, object>;
   dependencies: Array<DefinitionSubscriptions>;
   editing?: boolean;
@@ -62,12 +62,11 @@ const getDependencies = (
  * For Orb definitions see OrbDefinitionsMenu.tsx
  * For Step definitions see StepDefinitionMenu.tsx
  */
-const InspectorDefinitionMenu = (props: InspectorDefinitionProps) => {
+const InspectorDefinitionMenu = ({ dataMapping, ...props}: InspectorDefinitionProps) => {
   const definitions = useStoreState((state) => state.definitions);
   const navigateBack = useStoreActions((actions) => actions.navigateBack);
   const setGuideStep = useStoreActions((actions) => actions.setGuideStep);
   const guideStep = useStoreState((state) => state.guideStep);
-  const dataMapping = props.dataType;
   const submitToStore = useStoreActions(
     (actions) =>
       (props.editing
@@ -320,12 +319,12 @@ const InspectorDefinitionMenuNav: NavigationComponent = {
   Label: (props: InspectorDefinitionProps) => {
     return (
       <p>
-        {props.editing ? 'Edit' : 'New'} {props.dataType?.name.singular}
+        {props.editing ? 'Edit' : 'New'} {props.dataMapping?.name.singular}
       </p>
     );
   },
   Icon: (props: InspectorDefinitionProps) => {
-    let iconComponent = props.dataType?.components.icon;
+    let iconComponent = props.dataMapping?.components.icon;
 
     if (!iconComponent) {
       return null;
diff --git a/src/components/menus/definitions/OrbDefinitionsMenu.tsx b/src/core/components/menus/definitions/OrbDefinitionsMenu.tsx
similarity index 98%
rename from src/components/menus/definitions/OrbDefinitionsMenu.tsx
rename to src/core/components/menus/definitions/OrbDefinitionsMenu.tsx
index 1e9a930..7cb193d 100644
--- a/src/components/menus/definitions/OrbDefinitionsMenu.tsx
+++ b/src/core/components/menus/definitions/OrbDefinitionsMenu.tsx
@@ -10,8 +10,8 @@ import {
 } from '@circleci/circleci-config-sdk/dist/src/lib/Orb/types/Orb.types';
 import { useEffect, useState } from 'react';
 import Loading from '../../../icons/ui/Loading';
-import { typeToMapping } from '../../../mappings/GenerableMapping';
-import InspectableMapping from '../../../mappings/InspectableMapping';
+import { typeToMapping } from '../../../../mappings/GenerableMapping';
+import InspectableMapping from '../../../../mappings/InspectableMapping';
 import { useStoreActions, useStoreState } from '../../../state/Hooks';
 import { NavigationComponent } from '../../../state/Store';
 import { Button } from '../../atoms/Button';
diff --git a/src/components/menus/definitions/OrbImportMenu.tsx b/src/core/components/menus/definitions/OrbImportMenu.tsx
similarity index 99%
rename from src/components/menus/definitions/OrbImportMenu.tsx
rename to src/core/components/menus/definitions/OrbImportMenu.tsx
index 18439e4..e01a4cd 100644
--- a/src/components/menus/definitions/OrbImportMenu.tsx
+++ b/src/core/components/menus/definitions/OrbImportMenu.tsx
@@ -9,7 +9,7 @@ import {
   useSearchBox,
   UseSearchBoxProps,
 } from 'react-instantsearch-hooks-web';
-import { searchClient } from '../../../App';
+import { searchClient } from '../../../../App';
 import DeleteItemIcon from '../../../icons/ui/DeleteItemIcon';
 import Loading from '../../../icons/ui/Loading';
 import { useStoreActions } from '../../../state/Hooks';
diff --git a/src/components/menus/definitions/StepDefinitionMenu.tsx b/src/core/components/menus/definitions/StepDefinitionMenu.tsx
similarity index 100%
rename from src/components/menus/definitions/StepDefinitionMenu.tsx
rename to src/core/components/menus/definitions/StepDefinitionMenu.tsx
diff --git a/src/components/menus/definitions/subtypes/ExecutorTypePage.tsx b/src/core/components/menus/definitions/subtypes/ExecutorTypePage.tsx
similarity index 100%
rename from src/components/menus/definitions/subtypes/ExecutorTypePage.tsx
rename to src/core/components/menus/definitions/subtypes/ExecutorTypePage.tsx
diff --git a/src/components/menus/definitions/subtypes/ParameterTypePage.tsx b/src/core/components/menus/definitions/subtypes/ParameterTypePage.tsx
similarity index 97%
rename from src/components/menus/definitions/subtypes/ParameterTypePage.tsx
rename to src/core/components/menus/definitions/subtypes/ParameterTypePage.tsx
index 30f5240..a6a03e7 100644
--- a/src/components/menus/definitions/subtypes/ParameterTypePage.tsx
+++ b/src/core/components/menus/definitions/subtypes/ParameterTypePage.tsx
@@ -1,5 +1,5 @@
 import ParameterIcon from '../../../../icons/components/ParameterIcon';
-import InspectableMapping from '../../../../mappings/InspectableMapping';
+import InspectableMapping from '../../../../../mappings/InspectableMapping';
 import { NavigationComponent } from '../../../../state/Store';
 import Card from '../../../atoms/Card';
 import BreadCrumbs from '../../../containers/BreadCrumbs';
diff --git a/src/components/menus/definitions/subtypes/StepTypePage.tsx b/src/core/components/menus/definitions/subtypes/StepTypePage.tsx
similarity index 100%
rename from src/components/menus/definitions/subtypes/StepTypePage.tsx
rename to src/core/components/menus/definitions/subtypes/StepTypePage.tsx
diff --git a/src/components/menus/stage/StagedFilterMenu.tsx b/src/core/components/menus/stage/StagedFilterMenu.tsx
similarity index 100%
rename from src/components/menus/stage/StagedFilterMenu.tsx
rename to src/core/components/menus/stage/StagedFilterMenu.tsx
diff --git a/src/components/menus/stage/StagedJobMenu.tsx b/src/core/components/menus/stage/StagedJobMenu.tsx
similarity index 99%
rename from src/components/menus/stage/StagedJobMenu.tsx
rename to src/core/components/menus/stage/StagedJobMenu.tsx
index 24fbd41..b2e1446 100644
--- a/src/components/menus/stage/StagedJobMenu.tsx
+++ b/src/core/components/menus/stage/StagedJobMenu.tsx
@@ -175,7 +175,7 @@ const StagedJobMenu = ({ source, values, id }: WorkflowJobMenuProps) => {
               >
                 <InspectorProperty type="button" name="name" label="Source Job">
                   <div
-                    className="w-full mb-2 p-2 text-sm  text-left text-circle-black 
+                    className="w-full mb-2 p-2 text-sm  text-left text-circle-black
                   bg-circle-gray-200 border border-circle-gray-300 rounded flex flex-row"
                   >
                     <JobIcon className="ml-1 mr-2 w-5 h-5" />
diff --git a/src/components/panes/EditorPane.tsx b/src/core/components/panes/EditorPane.tsx
similarity index 97%
rename from src/components/panes/EditorPane.tsx
rename to src/core/components/panes/EditorPane.tsx
index ae9980c..7cf6350 100644
--- a/src/components/panes/EditorPane.tsx
+++ b/src/core/components/panes/EditorPane.tsx
@@ -6,10 +6,10 @@ import {
   useStoreActions,
   useStoreState,
 } from '../../state/Hooks';
-import { version } from '../../version.json';
+import { version } from '../../../version.json';
 import { Button } from '../atoms/Button';
 import { OpenConfig } from '../atoms/OpenConfig';
-import templates from '../../examples';
+import templates from '../../../examples';
 import Editor, { DiffEditor } from '@monaco-editor/react';
 
 const EditorPane = (props: any) => {
diff --git a/src/components/panes/NavigationPane.tsx b/src/core/components/panes/NavigationPane.tsx
similarity index 93%
rename from src/components/panes/NavigationPane.tsx
rename to src/core/components/panes/NavigationPane.tsx
index cddeef1..d6e20e4 100644
--- a/src/components/panes/NavigationPane.tsx
+++ b/src/core/components/panes/NavigationPane.tsx
@@ -1,5 +1,5 @@
 import { FocusScope } from 'react-aria';
-import { inspectorWidth } from '../../App';
+import { inspectorWidth } from '../../../App';
 import { useStoreState } from '../../state/Hooks';
 
 interface NavigationPaneProps {
diff --git a/src/components/panes/WorkflowsPane.tsx b/src/core/components/panes/WorkflowsPane.tsx
similarity index 93%
rename from src/components/panes/WorkflowsPane.tsx
rename to src/core/components/panes/WorkflowsPane.tsx
index 89ad1e6..0582963 100644
--- a/src/components/panes/WorkflowsPane.tsx
+++ b/src/core/components/panes/WorkflowsPane.tsx
@@ -1,8 +1,8 @@
 import Logo from '../../icons/ui/Logo';
 import HeaderMenu from '../containers/HeaderMenu';
 // import WorkflowContainer from '../containers/WorkflowContainer';
-import { GraphWrapper } from '../flow/Flow';
 import ReactFlow, { Background, BackgroundVariant, ControlButton, Controls } from 'reactflow';
+import { GraphWrapper } from '../../../flow/components/Flow';
 
 const WorkflowsPane = () => {
   return (
@@ -21,8 +21,8 @@ const WorkflowsPane = () => {
         <HeaderMenu />
       </header>
       <GraphWrapper className="z-10 border border-r-0 h-full border-b-0 border-circle-gray-300"></GraphWrapper>
- 
-      
+
+
     </div>
   );
 };
diff --git a/src/icons/IconProps.tsx b/src/core/icons/IconProps.tsx
similarity index 100%
rename from src/icons/IconProps.tsx
rename to src/core/icons/IconProps.tsx
diff --git a/src/icons/components/CommandIcon.tsx b/src/core/icons/components/CommandIcon.tsx
similarity index 100%
rename from src/icons/components/CommandIcon.tsx
rename to src/core/icons/components/CommandIcon.tsx
diff --git a/src/icons/components/ExecutorIcon.tsx b/src/core/icons/components/ExecutorIcon.tsx
similarity index 100%
rename from src/icons/components/ExecutorIcon.tsx
rename to src/core/icons/components/ExecutorIcon.tsx
diff --git a/src/icons/components/JobIcon.tsx b/src/core/icons/components/JobIcon.tsx
similarity index 100%
rename from src/icons/components/JobIcon.tsx
rename to src/core/icons/components/JobIcon.tsx
diff --git a/src/icons/components/JobOnHoldIcon.tsx b/src/core/icons/components/JobOnHoldIcon.tsx
similarity index 100%
rename from src/icons/components/JobOnHoldIcon.tsx
rename to src/core/icons/components/JobOnHoldIcon.tsx
diff --git a/src/icons/components/OrbIcon.tsx b/src/core/icons/components/OrbIcon.tsx
similarity index 100%
rename from src/icons/components/OrbIcon.tsx
rename to src/core/icons/components/OrbIcon.tsx
diff --git a/src/icons/components/ParameterIcon.tsx b/src/core/icons/components/ParameterIcon.tsx
similarity index 100%
rename from src/icons/components/ParameterIcon.tsx
rename to src/core/icons/components/ParameterIcon.tsx
diff --git a/src/icons/components/WorkflowIcon.tsx b/src/core/icons/components/WorkflowIcon.tsx
similarity index 100%
rename from src/icons/components/WorkflowIcon.tsx
rename to src/core/icons/components/WorkflowIcon.tsx
diff --git a/src/icons/ui/AddIcon.tsx b/src/core/icons/ui/AddIcon.tsx
similarity index 100%
rename from src/icons/ui/AddIcon.tsx
rename to src/core/icons/ui/AddIcon.tsx
diff --git a/src/icons/ui/BranchIcon.tsx b/src/core/icons/ui/BranchIcon.tsx
similarity index 100%
rename from src/icons/ui/BranchIcon.tsx
rename to src/core/icons/ui/BranchIcon.tsx
diff --git a/src/icons/ui/BreadCrumbArrowIcon.tsx b/src/core/icons/ui/BreadCrumbArrowIcon.tsx
similarity index 100%
rename from src/icons/ui/BreadCrumbArrowIcon.tsx
rename to src/core/icons/ui/BreadCrumbArrowIcon.tsx
diff --git a/src/icons/ui/CircleCI.tsx b/src/core/icons/ui/CircleCI.tsx
similarity index 100%
rename from src/icons/ui/CircleCI.tsx
rename to src/core/icons/ui/CircleCI.tsx
diff --git a/src/icons/ui/CopyIcon.tsx b/src/core/icons/ui/CopyIcon.tsx
similarity index 100%
rename from src/icons/ui/CopyIcon.tsx
rename to src/core/icons/ui/CopyIcon.tsx
diff --git a/src/icons/ui/DeleteItemIcon.tsx b/src/core/icons/ui/DeleteItemIcon.tsx
similarity index 100%
rename from src/icons/ui/DeleteItemIcon.tsx
rename to src/core/icons/ui/DeleteItemIcon.tsx
diff --git a/src/icons/ui/DragItemIcon.tsx b/src/core/icons/ui/DragItemIcon.tsx
similarity index 100%
rename from src/icons/ui/DragItemIcon.tsx
rename to src/core/icons/ui/DragItemIcon.tsx
diff --git a/src/icons/ui/EditIcon.tsx b/src/core/icons/ui/EditIcon.tsx
similarity index 100%
rename from src/icons/ui/EditIcon.tsx
rename to src/core/icons/ui/EditIcon.tsx
diff --git a/src/icons/ui/ExpandIcon.tsx b/src/core/icons/ui/ExpandIcon.tsx
similarity index 100%
rename from src/icons/ui/ExpandIcon.tsx
rename to src/core/icons/ui/ExpandIcon.tsx
diff --git a/src/icons/ui/FilterIcon.tsx b/src/core/icons/ui/FilterIcon.tsx
similarity index 100%
rename from src/icons/ui/FilterIcon.tsx
rename to src/core/icons/ui/FilterIcon.tsx
diff --git a/src/icons/ui/InfoIcon.tsx b/src/core/icons/ui/InfoIcon.tsx
similarity index 100%
rename from src/icons/ui/InfoIcon.tsx
rename to src/core/icons/ui/InfoIcon.tsx
diff --git a/src/icons/ui/Loading.tsx b/src/core/icons/ui/Loading.tsx
similarity index 100%
rename from src/icons/ui/Loading.tsx
rename to src/core/icons/ui/Loading.tsx
diff --git a/src/icons/ui/Logo.tsx b/src/core/icons/ui/Logo.tsx
similarity index 100%
rename from src/icons/ui/Logo.tsx
rename to src/core/icons/ui/Logo.tsx
diff --git a/src/icons/ui/MinusIcon.tsx b/src/core/icons/ui/MinusIcon.tsx
similarity index 100%
rename from src/icons/ui/MinusIcon.tsx
rename to src/core/icons/ui/MinusIcon.tsx
diff --git a/src/icons/ui/MoreIcon.tsx b/src/core/icons/ui/MoreIcon.tsx
similarity index 100%
rename from src/icons/ui/MoreIcon.tsx
rename to src/core/icons/ui/MoreIcon.tsx
diff --git a/src/icons/ui/NewWindowIcon.tsx b/src/core/icons/ui/NewWindowIcon.tsx
similarity index 100%
rename from src/icons/ui/NewWindowIcon.tsx
rename to src/core/icons/ui/NewWindowIcon.tsx
diff --git a/src/icons/ui/OpenIcon.tsx b/src/core/icons/ui/OpenIcon.tsx
similarity index 100%
rename from src/icons/ui/OpenIcon.tsx
rename to src/core/icons/ui/OpenIcon.tsx
diff --git a/src/icons/ui/PlusIcon.tsx b/src/core/icons/ui/PlusIcon.tsx
similarity index 100%
rename from src/icons/ui/PlusIcon.tsx
rename to src/core/icons/ui/PlusIcon.tsx
diff --git a/src/icons/ui/Switch.tsx b/src/core/icons/ui/Switch.tsx
similarity index 100%
rename from src/icons/ui/Switch.tsx
rename to src/core/icons/ui/Switch.tsx
diff --git a/src/icons/ui/TagIcon.tsx b/src/core/icons/ui/TagIcon.tsx
similarity index 100%
rename from src/icons/ui/TagIcon.tsx
rename to src/core/icons/ui/TagIcon.tsx
diff --git a/src/icons/ui/ToolTipPointerIcon.tsx b/src/core/icons/ui/ToolTipPointerIcon.tsx
similarity index 100%
rename from src/icons/ui/ToolTipPointerIcon.tsx
rename to src/core/icons/ui/ToolTipPointerIcon.tsx
diff --git a/src/state/DefinitionStore.tsx b/src/core/state/DefinitionStore.tsx
similarity index 97%
rename from src/state/DefinitionStore.tsx
rename to src/core/state/DefinitionStore.tsx
index 0ce8d63..e904949 100644
--- a/src/state/DefinitionStore.tsx
+++ b/src/core/state/DefinitionStore.tsx
@@ -11,27 +11,27 @@ import {
   thunkOn,
 } from 'easy-peasy';
 import { v4 } from 'uuid';
-import { store } from '../App';
+import { store } from '../../App';
 import { OrbImportWithMeta } from '../components/menus/definitions/OrbDefinitionsMenu';
 import {
   CommandActions,
   CommandMapping,
-} from '../mappings/components/CommandMapping';
+} from '../../mappings/components/CommandMapping';
 import {
   ExecutorActions,
   ExecutorMapping,
-} from '../mappings/components/ExecutorMapping';
-import { JobActions, JobMapping } from '../mappings/components/JobMapping';
+} from '../../mappings/components/ExecutorMapping';
+import { JobActions, JobMapping } from '../../mappings/components/JobMapping';
 import {
   ParameterActions,
   ParameterMapping,
-} from '../mappings/components/ParameterMapping';
+} from '../../mappings/components/ParameterMapping';
 import {
   WorkflowActions,
   WorkflowMapping,
   WorkflowStage,
-} from '../mappings/components/WorkflowMapping';
-import GenerableMapping, { typeToMapping } from '../mappings/GenerableMapping';
+} from '../../mappings/components/WorkflowMapping';
+import GenerableMapping, { typeToMapping } from '../../mappings/GenerableMapping';
 import { StoreActionsModel, StoreModel, UpdateType } from './Store';
 
 export type ParameterDefinition = 'parameters';
diff --git a/src/state/Hooks.tsx b/src/core/state/Hooks.tsx
similarity index 100%
rename from src/state/Hooks.tsx
rename to src/core/state/Hooks.tsx
diff --git a/src/state/Store.tsx b/src/core/state/Store.tsx
similarity index 98%
rename from src/state/Store.tsx
rename to src/core/state/Store.tsx
index 9addd37..f13fd1d 100644
--- a/src/state/Store.tsx
+++ b/src/core/state/Store.tsx
@@ -16,14 +16,14 @@ import {
   XYPosition
 } from 'reactflow';
 import { v4 } from 'uuid';
-import { searchClient, store } from '../App';
+import { searchClient, store } from '../../App';
 import { ConfirmationModalModel } from '../components/containers/ConfirmationModal';
 import DefinitionsMenu from '../components/menus/definitions/DefinitionsMenu';
 import { OrbImportWithMeta } from '../components/menus/definitions/OrbDefinitionsMenu';
 import {
   WorkflowStage
-} from '../mappings/components/WorkflowMapping';
-import InspectableMapping from '../mappings/InspectableMapping';
+} from '../../mappings/components/WorkflowMapping';
+import InspectableMapping from '../../mappings/InspectableMapping';
 import {
   AllDefinitionActions,
   createDefinitionStore,
@@ -36,7 +36,7 @@ import {
   generateLifeCycleMatrix,
   NamedGenerable
 } from './DefinitionStore';
-import { FlowActions, FlowActionsModel, FlowStore, FlowStoreModel } from './FlowStore';
+import { FlowActions, FlowActionsModel, FlowStore, FlowStoreModel } from '../../flow/state/FlowStore';
 
 export interface NavigationBack {
   distance?: number;
@@ -65,9 +65,9 @@ export interface PreviewToolboxModel {
   };
 }
 
-export interface DataModel {
-  data?: any;
-  dataType?: InspectableMapping;
+export interface DataModel<DataType = any, Mapping extends InspectableMapping = InspectableMapping> {
+  data?: DataType;
+  dataMapping?: Mapping;
 }
 
 export interface InfoToolTip {
@@ -138,7 +138,6 @@ export interface UpdateType<Out, In = Out> {
 
 export type StoreActionsModel = AllDefinitionActions & FlowActionsModel & {
   persistProps: Action<StoreModel, { [key: string]: object }>;
-  setDragging: Action<StoreModel, DataModel | undefined>;
   setGuideStep: Action<StoreModel, number | undefined>;
 
   navigateTo: Action<StoreModel, NavigationStop & { values?: any }>;
@@ -279,10 +278,6 @@ const StoreActions: StoreActionsModel = {
     },
   ),
 
-  setDragging: action((state, payload) => {
-    state.dragging = payload;
-  }),
-
   selectWorkflow: action((state, index) => {
     state.selectedWorkflowId = index;
   }),
diff --git a/src/components/flow/ConnectionLine.tsx b/src/flow/components/ConnectionLine.tsx
similarity index 96%
rename from src/components/flow/ConnectionLine.tsx
rename to src/flow/components/ConnectionLine.tsx
index 65612f7..6bb0d27 100644
--- a/src/components/flow/ConnectionLine.tsx
+++ b/src/flow/components/ConnectionLine.tsx
@@ -1,6 +1,6 @@
 import { debug } from 'console';
 import { ConnectionLineComponentProps, getBezierPath, MarkerType } from 'reactflow';
-import { useStoreState } from '../../state/Hooks';
+import { useStoreState } from '../../core/state/Hooks';
 
 function ConnectionLine({ fromX, fromY, toX, toY, connectionLineStyle, fromNode, fromHandle }: ConnectionLineComponentProps) {
     const stepDist = 20;
diff --git a/src/flow/components/Flow.tsx b/src/flow/components/Flow.tsx
new file mode 100644
index 0000000..57780ab
--- /dev/null
+++ b/src/flow/components/Flow.tsx
@@ -0,0 +1,116 @@
+import { useCallback, useRef } from "react";
+import ReactFlow, { addEdge, Background, Connection, Controls, Edge, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, useStoreApi, useViewport } from "reactflow";
+import { useStoreState } from "../../core/state/Hooks";
+import { useFlowDragAndDrop } from "../hooks/useFlowDnD";
+import { FlowMode } from "../state/FlowStore";
+import ConnectionLine from "./ConnectionLine";
+import GhostNode from "./GhostNode";
+import JobNode from "./JobNode";
+
+export type FlowProps = { className?: string }
+
+const nodeTypes = {
+  workflow_job: JobNode,
+  ghost: GhostNode,
+};
+
+const Flow = (props: FlowProps) => {
+    const flowRef = useRef<HTMLDivElement>(null);
+    const nodeState = useNodesState([]);
+    const [nodes, , onNodesChange] = nodeState;
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+    const mode = useStoreState((state) => state.mode);
+    const onConnect = useCallback((params: Edge | Connection) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+    const flowRect = flowRef.current?.getBoundingClientRect();
+    const {onDragEnter, onDragOver, onDrop} = useFlowDragAndDrop(flowRect);
+
+    return <ReactFlow
+        minZoom={-Infinity}
+        fitView
+        nodes={nodes}
+        edges={edges}
+        ref={flowRef}
+        // onPaneMouseMove={(e) => { console.log(e.clientX, e.clientY)}}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        nodesDraggable={mode == FlowMode.MOVE}
+        elementsSelectable={mode == FlowMode.SELECT}
+        connectionLineComponent={ConnectionLine}
+        snapToGrid
+        nodeTypes={nodeTypes}
+        className={props.className}
+        onDrop={onDrop}
+        onDragOver={onDragOver}
+        onDragEnter={onDragEnter}
+        onInit={(reactFlowInstance) => console.log('flow loaded:', reactFlowInstance)}
+        >
+        <Background
+          gap={15}
+          color="#c7c7c7"
+          className="bg-circle-gray-200"
+          size={2}
+        />
+        <Controls>
+        </Controls>
+    </ReactFlow>
+}
+
+const GraphWrapper = (props: FlowProps) => {
+    return <ReactFlowProvider>
+        <Flow {...props} />
+    </ReactFlowProvider>
+}
+
+export { GraphWrapper, Flow };
+      // const onConnect = useCallback((params) => setEdges((els) => addEdge(params, els)), []);
+
+    // const onNodesChange = useCallback(
+    //   (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
+    //   [setNodes]
+    // );
+    // const onEdgesChange = useCallback(
+    //   (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+    //   [setEdges]
+    // );
+    // const onConnect = useCallback(
+    //   (connection) => setEdges((eds) => addEdge(connection, eds)),
+    //   [setEdges]
+    // );
+
+    // const getClosestNode = useCallback((pos: XYPosition) => {
+    //     const { nodeInternals } = store.getState();
+    //     const storeNodes = Array.from(nodeInternals.values());
+
+    //     const closestNode = storeNodes.reduce<{ distance: number, node?: Node<any>}>(
+    //       (res, n) => {
+    //         const boundingRect = flowRef.current?.getBoundingClientRect() || { x: 0, y: 0};
+    //         const mouseX = Math.abs((pos.x - boundingRect.x) * viewport.zoom + viewport.x);
+    //         const mouseY = Math.abs((pos.y - boundingRect.y) * viewport.zoom + viewport.y)
+    //         const dx = Math.abs(n.position.x) - mouseX;
+    //         const dy = Math.abs(n.position.y) - mouseY;
+    //         const d = Math.sqrt(dx * dx + dy * dy);
+
+    //         // console.log(pos.y - boundingRect.y, mouseY, viewport.y)
+
+    //         if (d < res.distance && d < MIN_DISTANCE) {
+    //             res.distance = d;
+    //             res.node = n;
+    //         }
+
+    //         return res;
+    //       },
+    //       {
+    //         distance: Number.MAX_VALUE,
+    //         node: undefined,
+    //       }
+    //     );
+
+    //     if (!closestNode.node) {
+    //       return null;
+    //     }
+
+    // // console.log(closestNode.node)
+
+    //     return closestNode.node;
+    //   }, [viewport]);
diff --git a/src/components/flow/FlowTools.tsx b/src/flow/components/FlowTools.tsx
similarity index 62%
rename from src/components/flow/FlowTools.tsx
rename to src/flow/components/FlowTools.tsx
index 5960b6b..6ddd831 100644
--- a/src/components/flow/FlowTools.tsx
+++ b/src/flow/components/FlowTools.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useMemo } from "react";
-import { FlowMode } from "../../state/FlowStore";
-import { useStoreState, useStoreActions } from "../../state/Hooks"
-import { Button } from "../atoms/Button"
-import PreviewToolbox from "../containers/PreviewToolbox"
+import { Button } from "../../core/components/atoms/Button";
+import PreviewToolbox from "../../core/components/containers/PreviewToolbox";
+import { useStoreActions, useStoreState } from "../../core/state/Hooks";
+import { FlowMode } from "../state/FlowStore";
 
 const buttons = [
   {
@@ -29,8 +29,8 @@ const FlowTools = () => {
 
     const Buttons = useMemo(() => {
       return buttons.map((flowMapping, i) => {
-          const className = i == 0 ? 'mr-0 rounded-r-none' : i == buttons.length - 1 ? 'ml-0 rounded-l-none' : 'mx-0 rounded-none';
-          return (<Button key={flowMapping.mode} selected={mode == flowMapping.mode} variant="secondary" className={className} onClick={() => updateMode(flowMapping.mode)}>
+        const className = i == 0 ? 'ml-3 bg-red rounded-r-none' : i == buttons.length - 1 ? 'mr-3 rounded-l-none' : 'mx-0 rounded-l-none rounded-r-none';
+          return (<Button key={flowMapping.mode} selected={mode == flowMapping.mode} variant="secondary" margin="0" className={className} onClick={() => updateMode(flowMapping.mode)}>
             {flowMapping.text}
             </Button>)
       })
diff --git a/src/components/flow/GhostNode.tsx b/src/flow/components/GhostNode.tsx
similarity index 94%
rename from src/components/flow/GhostNode.tsx
rename to src/flow/components/GhostNode.tsx
index d83b8a6..eb201ca 100644
--- a/src/components/flow/GhostNode.tsx
+++ b/src/flow/components/GhostNode.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from 'react';
 import { Handle, NodeProps, Position, ReactFlowState, useStore } from 'reactflow';
-import { FlowMode } from '../../state/FlowStore';
-import { useStoreState } from '../../state/Hooks';
+import { useStoreState } from '../../core/state/Hooks';
+import { FlowMode } from '../state/FlowStore';
 
 const connectionNodeIdSelector = (state: ReactFlowState) => state.connectionNodeId;
 
diff --git a/src/components/flow/JobNode.tsx b/src/flow/components/JobNode.tsx
similarity index 76%
rename from src/components/flow/JobNode.tsx
rename to src/flow/components/JobNode.tsx
index e0ed004..6d46276 100644
--- a/src/components/flow/JobNode.tsx
+++ b/src/flow/components/JobNode.tsx
@@ -1,24 +1,26 @@
+
 import { useEffect, useMemo } from 'react';
+import {workflow} from '@circleci/circleci-config-sdk';
 import { Handle, NodeProps, Position, ReactFlowState, useStore } from 'reactflow';
-import JobIcon from '../../icons/components/JobIcon';
-import { FlowMode } from '../../state/FlowStore';
-import { useStoreState } from '../../state/Hooks';
+import JobIcon from '../../core/icons/components/JobIcon';
+import { useStoreState } from '../../core/state/Hooks';
+import { FlowMode } from '../state/FlowStore';
 
 const connectionNodeIdSelector = (state: ReactFlowState) => state.connectionNodeId;
 
-export default function JobNode({ id, selected }: NodeProps) {
+export default function JobNode({ id, selected, data }: NodeProps) {
   const connectionNodeId = useStore(connectionNodeIdSelector);
   const mode = useStoreState((state) => state.mode);
-
+  const workflowJob = data as workflow.WorkflowJob;
   const isTarget = connectionNodeId && connectionNodeId !== id;
 
-  const label = 'Job Name';
+  const label = useMemo(() => workflowJob.parameters?.name || workflowJob.name, [data]);
   const nodeBase = "p-2 pr-3 text-sm bg-white node flex flex-row text-black rounded-md border cursor-pointer"
   const outline = selected ? "border-circle-blue" : " border-circle-gray-300"
 
   const Handles = useMemo(() => {
     const connectMode = mode == FlowMode.CONNECT;
-    const handleBase = `${ connectMode ? '!w-full !h-full' : '!w-0 h-0'} !rounded opacity-50`
+    const handleBase = `${ connectMode ? '!w-full !h-full' : '!w-0 h-0'} !rounded opacity-0`
     const notConnecting = connectionNodeId == null
 
     return (
diff --git a/src/flow/hooks/useFlowDnD.ts b/src/flow/hooks/useFlowDnD.ts
new file mode 100644
index 0000000..0aa12ed
--- /dev/null
+++ b/src/flow/hooks/useFlowDnD.ts
@@ -0,0 +1,71 @@
+import { useCallback, useState } from "react";
+import { applyNodeChanges, useReactFlow, XYPosition } from "reactflow";
+import { v4 } from "uuid";
+import { useStoreActions, useStoreState } from "../../core/state/Hooks";
+import InspectableMapping from "../../mappings/InspectableMapping";
+import { NodeMapping } from "../../mappings/NodeMapping";
+import { FlowActionsModel, FlowStoreModel } from "../state/FlowStore";
+import { useFlowOffset } from "./useFlowOffset";
+
+// Alternative to control a node during drag and drop cycle
+// If abstracted a layer higher, useDragAndDrop may come in handy later
+export function useFlowDragAndDrop(offset?: DOMRect) {
+  const { addNodes, getNodes } = useReactFlow();
+  const dragging = useStoreState((state) => state.dragging);
+  const cancel = useCallback((e: React.DragEvent<HTMLDivElement>) => { e.preventDefault() }, []);
+  const onDrop = useFlowOffset((position, droppedItem) => {
+    const mapping = dragging?.dataMapping as unknown as NodeMapping & InspectableMapping;
+
+    if (dragging == undefined || !mapping?.node) {
+      return;
+    }
+
+    const nodes = getNodes();
+    const data = mapping.node.transform(dragging.data, nodes);
+    const id = mapping.node.getId(data)
+
+    addNodes({  id, position, type: mapping.node.key, data});
+  }, offset, [dragging]);
+
+  return { onDragEnter: cancel, onDragOver: cancel, onDrop }
+}
+
+// Alternative to control a node during drag and drop cycle
+// export function useFlowDragAndDrop(offset?: DOMRect) {
+//   const { addNodes, setNodes, deleteElements, getNodes } = useReactFlow();
+//   const [lastPos, setPos] = useState<XYPosition>();
+
+//   // Upon entering the flow, create the drop ghost
+//   const onDragEnter = useFlowOffset((position, data) => {
+//     addNodes({  id: 'ghost', position, type: 'ghost',data: ''});
+//     }, offset);
+
+//   // While dragging, move the ghost
+//   const onDragOver = useFlowOffset((position, data) => {
+//     if (lastPos) {
+//       const dx = lastPos.x - position.x;
+//       const dy = lastPos.y - position.y;
+//       const dist = Math.abs(dx * dy);
+
+//       if (dist > 150) {
+//         console.log(dist)
+//           const nodes = getNodes();
+//           const changes = applyNodeChanges([ {  id: 'ghost', type: 'position', position, dragging: true } ], nodes);
+//           setNodes(changes);
+//           setPos(position);
+//       }
+//     } else {
+//       setPos(position);
+//     }
+//   }, offset, [lastPos]);
+//   // Upon drop and leave, remove the ghost`
+//   const onDragLeave = useFlowOffset((pos, data) => {
+//     deleteElements({ nodes: [{ id: 'ghost' }]})
+//   }, offset);
+//   const onDrop = useFlowOffset((position, data) => {
+//     addNodes({  id: 'ghost', position, type: 'job', data});
+//   }, offset);
+
+
+//   return [onDragEnter, onDragOver, onDragLeave, onDrop]
+// }
diff --git a/src/flow/hooks/useFlowOffset.ts b/src/flow/hooks/useFlowOffset.ts
new file mode 100644
index 0000000..5cc8250
--- /dev/null
+++ b/src/flow/hooks/useFlowOffset.ts
@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+import { useReactFlow, XYPosition } from "reactflow";
+import { useStoreState } from "../../core/state/Hooks";
+import { DataModel } from "../../core/state/Store";
+
+type FlowEvent = (position: XYPosition, dragging?: DataModel) => void;
+
+export function useFlowOffset(func: FlowEvent, offset?: DOMRect, deps?: any[]) {
+  const { project } = useReactFlow();
+
+  return useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    const eventPos = project({ x: e.clientX, y: e.clientY - (offset?.y || 0)});
+
+    func(eventPos);
+
+    e.preventDefault();
+  }, deps ? [project, ...deps] : [project]);
+}
diff --git a/src/state/FlowStore.tsx b/src/flow/state/FlowStore.tsx
similarity index 78%
rename from src/state/FlowStore.tsx
rename to src/flow/state/FlowStore.tsx
index b2a942f..342ecb7 100644
--- a/src/state/FlowStore.tsx
+++ b/src/flow/state/FlowStore.tsx
@@ -1,5 +1,5 @@
 import { Action, action } from "easy-peasy";
-import { DataModel } from "./Store";
+import { DataModel } from "../../core/state/Store";
 
 export enum FlowMode {
     SELECT,
@@ -17,12 +17,16 @@ export type FlowStoreModel = {
 
 export type FlowActionsModel = {
     setMode: Action<FlowStoreModel, FlowMode>;
+    setDragging: Action<FlowStoreModel, DataModel | undefined>;
 }
 
 export const FlowActions: FlowActionsModel = {
     setMode: action((state, mode) => {
         state.mode = mode;
-    })
+    }),
+    setDragging: action((state, payload) => {
+      state.dragging = payload;
+    }),
 }
 
 /**
diff --git a/src/util/FlowUtil.tsx b/src/flow/util/FlowUtil.tsx
similarity index 100%
rename from src/util/FlowUtil.tsx
rename to src/flow/util/FlowUtil.tsx
diff --git a/src/hooks/useMapping.tsx b/src/hooks/useMapping.tsx
deleted file mode 100644
index 821180c..0000000
--- a/src/hooks/useMapping.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export type MappingOpts = { }
-
-export const useMapping = () => {
-
-}
\ No newline at end of file
diff --git a/src/mappings/GenerableMapping.tsx b/src/mappings/GenerableMapping.tsx
index 23ead9e..2746462 100644
--- a/src/mappings/GenerableMapping.tsx
+++ b/src/mappings/GenerableMapping.tsx
@@ -11,8 +11,8 @@ import {
   DefinitionType,
   MappingSubscriptions,
   NamedGenerable,
-} from '../state/DefinitionStore';
-import Store, { StoreActionsModel, StoreModel, UpdateType } from '../state/Store';
+} from '../core/state/DefinitionStore';
+import Store, { StoreActionsModel, StoreModel, UpdateType } from '../core/state/Store';
 import { CommandMapping } from './components/CommandMapping';
 import { ExecutorMapping } from './components/ExecutorMapping';
 import { JobMapping } from './components/JobMapping';
diff --git a/src/mappings/InspectableMapping.tsx b/src/mappings/InspectableMapping.tsx
index 4dbe452..862932f 100644
--- a/src/mappings/InspectableMapping.tsx
+++ b/src/mappings/InspectableMapping.tsx
@@ -1,13 +1,13 @@
 import { Generable } from '@circleci/circleci-config-sdk/dist/src/lib/Components';
 import { FormikValues } from 'formik';
     import { Edge, NodeProps } from 'reactflow';
-import { IconProps } from '../icons/IconProps';
+import { IconProps } from '../core/icons/IconProps';
 import {
   DefinitionsModel,
   DefinitionSubscriptions,
   NamedGenerable,
-} from '../state/DefinitionStore';
-import { NavigationComponent } from '../state/Store';
+} from '../core/state/DefinitionStore';
+import { NavigationComponent } from '../core/state/Store';
 import { WorkflowStage } from './components/WorkflowMapping';
 import GenerableMapping, { SubTypeMapping } from './GenerableMapping';
 export interface GenerableInfoType {
@@ -61,16 +61,6 @@ export default interface InspectableMapping<
     data: GenerableType,
     nodeData: ConfigNodeProps,
   ) => { [K in KeysOfUnion<ConfigNodeProps>]?: any };
-  node?: {
-    /** Transform definition data */
-    transform?: (
-      data: GenerableType,
-      extras?: any,
-      stage?: { nodes: Node[], edges: Edge[] },
-    ) => ConfigNodeProps;
-    /** @todo: Add store functionality to better support updating definitions and their corresponding workflow nodes */
-    component: React.FunctionComponent<{ data: ConfigNodeProps } & NodeProps>;
-  };
   subtypes?: {
     component: NavigationComponent;
     getSubtype: (data: GenerableType) => string | undefined;
diff --git a/src/mappings/NodeMapping.tsx b/src/mappings/NodeMapping.tsx
new file mode 100644
index 0000000..8272837
--- /dev/null
+++ b/src/mappings/NodeMapping.tsx
@@ -0,0 +1,22 @@
+import { Node, NodeProps } from "reactflow";
+import { NamedGenerable } from "../core/state/DefinitionStore";
+
+export interface NodeMapping<InType extends NamedGenerable = any,
+    ManagedType extends NamedGenerable = any, >
+{
+    node: {
+        /**
+         * generated id from managed type
+         */
+        getId: (data: ManagedType) => string;
+        key: string;
+        /** Transform definition data */
+        transform: (
+            data: InType,
+            nodes: Node[],
+            extras?: any,
+        ) => ManagedType;
+        /** @todo: Add store functionality to better support updating definitions and their corresponding workflow nodes */
+        component: React.FunctionComponent<{ data: ManagedType } & NodeProps>;
+    };
+}
diff --git a/src/mappings/components/CommandMapping.tsx b/src/mappings/components/CommandMapping.tsx
index ffceda4..5133513 100644
--- a/src/mappings/components/CommandMapping.tsx
+++ b/src/mappings/components/CommandMapping.tsx
@@ -1,13 +1,13 @@
 import { parseReusableCommand } from '@circleci/circleci-config-parser';
 import { reusable } from '@circleci/circleci-config-sdk';
-import CommandSummary from '../../components/atoms/summaries/CommandSummary';
-import CommandInspector from '../../components/containers/inspector/CommandInspector';
-import { componentParametersSubtypes } from '../../components/containers/inspector/subtypes/ParameterSubtypes';
-import CommandIcon from '../../icons/components/CommandIcon';
+import CommandSummary from '../../core/components/atoms/summaries/CommandSummary';
+import CommandInspector from '../../core/components/containers/inspector/CommandInspector';
+import { componentParametersSubtypes } from '../../core/components/containers/inspector/subtypes/ParameterSubtypes';
+import CommandIcon from '../../core/icons/components/CommandIcon';
 import {
   DefinitionAction,
   definitionsAsArray,
-} from '../../state/DefinitionStore';
+} from '../../core/state/DefinitionStore';
 import InspectableMapping from '../InspectableMapping';
 
 export const CommandMapping: InspectableMapping<reusable.ReusableCommand> = {
diff --git a/src/mappings/components/ExecutorMapping.tsx b/src/mappings/components/ExecutorMapping.tsx
index 23f8677..808f62b 100644
--- a/src/mappings/components/ExecutorMapping.tsx
+++ b/src/mappings/components/ExecutorMapping.tsx
@@ -5,13 +5,13 @@ import {
   workflow,
 } from '@circleci/circleci-config-sdk';
 import { parseReusableExecutor } from '@circleci/circleci-config-parser';
-import ExecutorSummary from '../../components/atoms/summaries/ExecutorSummary';
-import ExecutorInspector from '../../components/containers/inspector/ExecutorInspector';
-import { executorSubtypes } from '../../components/containers/inspector/subtypes/ExecutorSubtypes';
-import { componentParametersSubtypes } from '../../components/containers/inspector/subtypes/ParameterSubtypes';
-import ExecutorTypePageNav from '../../components/menus/definitions/subtypes/ExecutorTypePage';
-import ExecutorIcon from '../../icons/components/ExecutorIcon';
-import { DefinitionAction } from '../../state/DefinitionStore';
+import ExecutorSummary from '../../core/components/atoms/summaries/ExecutorSummary';
+import ExecutorInspector from '../../core/components/containers/inspector/ExecutorInspector';
+import { executorSubtypes } from '../../core/components/containers/inspector/subtypes/ExecutorSubtypes';
+import { componentParametersSubtypes } from '../../core/components/containers/inspector/subtypes/ParameterSubtypes';
+import ExecutorTypePageNav from '../../core/components/menus/definitions/subtypes/ExecutorTypePage';
+import ExecutorIcon from '../../core/icons/components/ExecutorIcon';
+import { DefinitionAction } from '../../core/state/DefinitionStore';
 import InspectableMapping from '../InspectableMapping';
 import { JobMapping } from './JobMapping';
 
diff --git a/src/mappings/components/JobMapping.tsx b/src/mappings/components/JobMapping.tsx
index da70577..9fed511 100644
--- a/src/mappings/components/JobMapping.tsx
+++ b/src/mappings/components/JobMapping.tsx
@@ -1,18 +1,19 @@
 import { parseJob } from '@circleci/circleci-config-parser';
 import { Job, orb, reusable, workflow } from '@circleci/circleci-config-sdk';
-import JobNode from '../../components/atoms/nodes/JobNode';
-import JobSummary from '../../components/atoms/summaries/JobSummary';
-import JobInspector from '../../components/containers/inspector/JobInspector';
-import { componentParametersSubtypes } from '../../components/containers/inspector/subtypes/ParameterSubtypes';
-import JobIcon from '../../icons/components/JobIcon';
+import JobSummary from '../../core/components/atoms/summaries/JobSummary';
+import JobInspector from '../../core/components/containers/inspector/JobInspector';
+import { componentParametersSubtypes } from '../../core/components/containers/inspector/subtypes/ParameterSubtypes';
+import JobIcon from '../../core/icons/components/JobIcon';
 import {
   DefinitionAction,
   definitionsAsArray,
-} from '../../state/DefinitionStore';
+} from '../../core/state/DefinitionStore';
+import JobNode from '../../flow/components/JobNode';
 import InspectableMapping from '../InspectableMapping';
+import { NodeMapping } from '../NodeMapping';
 import { UNDEFINED_EXECUTOR } from './ExecutorMapping';
 
-export const JobMapping: InspectableMapping<Job, workflow.WorkflowJob> = {
+export const JobMapping: InspectableMapping<Job> & NodeMapping<Job, workflow.WorkflowJob> = {
   key: 'jobs',
   name: {
     singular: 'Job',
@@ -101,36 +102,40 @@ export const JobMapping: InspectableMapping<Job, workflow.WorkflowJob> = {
     remove: (actions) => actions.delete_jobs,
   },
   dragTarget: 'workflow',
-  // node: {
-  //   transform: (data, params, elements) => {
-  //     const stagedNames = new Set(
-  //       elements
-  //         ?.filter((element) => element.type === 'jobs')
-  //         .map((job) => job.data.parameters?.name || job.data.name),
-  //     );
-  //     let name = data.name;
+  node: {
+    getId: (data) => {
+      return data.parameters?.name || data.name;
+    },
+    transform: (data, nodes, params) => {
+      const stagedNames = new Set(
+        nodes
+          ?.filter((element) => element.type === 'workflow_job')
+          .map((node) => node.data.parameters?.name || node.data.name),
+      );
+      let name = data.name;
 
-  //     if (stagedNames && stagedNames.has(name)) {
-  //       for (let i = 2; true; i++) {
-  //         const newName = `${name} (${i})`;
+      if (stagedNames.has(name)) {
+        for (let i = 2; true; i++) {
+          const newName = `${name} (${i})`;
 
-  //         if (!stagedNames.has(newName)) {
-  //           name = newName;
-  //           break;
-  //         }
-  //       }
-  //     }
+          if (!stagedNames.has(newName)) {
+            name = newName;
+            break;
+          }
+        }
+      }
 
-  //     const newParams = params || {};
+      const newParams = params || {};
 
-  //     if (name !== data.name) {
-  //       newParams.name = name;
-  //     }
+      if (name !== data.name) {
+        newParams.name = name;
+      }
 
-  //     return new workflow.WorkflowJob(data, newParams);
-  //   },
-  //   component: JobNode,
-  // },
+      return new workflow.WorkflowJob(data, newParams);
+    },
+    component: JobNode,
+    key: 'workflow_job'
+  },
   components: {
     icon: JobIcon,
     summary: JobSummary,
diff --git a/src/mappings/components/ParameterMapping.tsx b/src/mappings/components/ParameterMapping.tsx
index aff6e55..aafa2a7 100644
--- a/src/mappings/components/ParameterMapping.tsx
+++ b/src/mappings/components/ParameterMapping.tsx
@@ -2,12 +2,12 @@ import { parseParameter } from '@circleci/circleci-config-parser';
 import { parameters } from '@circleci/circleci-config-sdk';
 import { CustomParameter } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Parameters';
 import { PipelineParameterLiteral } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Parameters/types/CustomParameterLiterals.types';
-import ParameterSummary from '../../components/atoms/summaries/ParameterSummary';
-import ParameterInspector from '../../components/containers/inspector/ParameterInspector';
-import { parameterSubtypes } from '../../components/containers/inspector/subtypes/ParameterSubtypes';
-import ParameterTypePageNav from '../../components/menus/definitions/subtypes/ParameterTypePage';
-import ParameterIcon from '../../icons/components/ParameterIcon';
-import { DefinitionAction } from '../../state/DefinitionStore';
+import ParameterSummary from '../../core/components/atoms/summaries/ParameterSummary';
+import ParameterInspector from '../../core/components/containers/inspector/ParameterInspector';
+import { parameterSubtypes } from '../../core/components/containers/inspector/subtypes/ParameterSubtypes';
+import ParameterTypePageNav from '../../core/components/menus/definitions/subtypes/ParameterTypePage';
+import ParameterIcon from '../../core/icons/components/ParameterIcon';
+import { DefinitionAction } from '../../core/state/DefinitionStore';
 import InspectableMapping from '../InspectableMapping';
 
 export const ParameterMapping: InspectableMapping<
diff --git a/src/mappings/components/WorkflowMapping.tsx b/src/mappings/components/WorkflowMapping.tsx
index a434244..922518f 100644
--- a/src/mappings/components/WorkflowMapping.tsx
+++ b/src/mappings/components/WorkflowMapping.tsx
@@ -2,8 +2,8 @@ import { Job, workflow, Workflow } from '@circleci/circleci-config-sdk';
 import { When } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Logic';
 import { WorkflowJobAbstract } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Workflow';
 import { Edge, Node } from 'reactflow';
-import { Definition, DefinitionAction } from '../../state/DefinitionStore';
-import { StoreModel } from '../../state/Store';
+import { Definition, DefinitionAction } from '../../core/state/DefinitionStore';
+import { StoreModel } from '../../core/state/Store';
 import GenerableMapping from '../GenerableMapping';
 
 export type WorkflowElements = { nodes: Node[], edges: Edge[]};