Merge pull request #2357 from wbkd/refactor/styling

Refactor: don't inject styles anymore

examples/nextjs/package.json

@@ -3,18 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "yarn run copystyles && next dev",
+    "dev": "next dev",
-    "copystyles": "cp ../../packages/core/src/styles/theme-default.css ./styles/theme-default.css",
+    "copystyles": "cp ../../node_modules/@react-flow/renderer/dist/style.css ./styles/rf-style.css",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@preconstruct/next": "^4.0.0",
-    "@react-flow/background": "11.0.0",
+    "@react-flow/bundle": "11.0.0",
-    "@react-flow/controls": "11.0.0",
-    "@react-flow/core": "11.0.0",
-    "@react-flow/minimap": "11.0.0",
     "dagre": "^0.8.5",
     "localforage": "^1.10.0",
     "next": "12.2.2",
@@ -27,6 +24,7 @@
     "eslint-config-next": "12.2.2",
     "postcss": "^8.4.16",
     "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6",
     "postcss-preset-env": "^7.7.2"
   }

examples/nextjs/pages/Backgrounds/index.tsx

@@ -5,13 +5,10 @@ import {
   Node,
   ReactFlowProvider,
   useNodesState,
-} from '@react-flow/core';
-
-import {
   Background,
   BackgroundProps,
   BackgroundVariant,
-} from '@react-flow/background';
+} from '@react-flow/bundle';
 
 import styles from './style.module.css';
 
@@ -23,10 +20,7 @@ const initialNodes: Node[] = [
   },
 ];
 
-const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({
+const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) => {
-  id,
-  bgProps,
-}) => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
 
   return (
@@ -41,14 +35,8 @@ const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({
 const Backgrounds: FC = () => (
   <div className={styles.wrapper}>
     <Flow id="flow-a" bgProps={{ variant: BackgroundVariant.Dots }} />
-    <Flow
+    <Flow id="flow-b" bgProps={{ variant: BackgroundVariant.Lines, gap: [50, 50] }} />
-      id="flow-b"
+    <Flow id="flow-c" bgProps={{ variant: BackgroundVariant.Cross, gap: [100, 50] }} />
-      bgProps={{ variant: BackgroundVariant.Lines, gap: [50, 50] }}
-    />
-    <Flow
-      id="flow-c"
-      bgProps={{ variant: BackgroundVariant.Cross, gap: [100, 50] }}
-    />
   </div>
 );
 

examples/nextjs/pages/ControlledUncontrolled/index.tsx

@@ -7,8 +7,9 @@ import {
   ReactFlowProvider,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+  Background,
-import { Background, BackgroundVariant } from '@react-flow/background';
+  BackgroundVariant,
+} from '@react-flow/bunde';
 
 const defaultNodes: Node[] = [
   {

examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx

@@ -1,12 +1,7 @@
 import React, { FC } from 'react';
-import { ConnectionLineComponentProps } from '@react-flow/core';
+import { ConnectionLineComponentProps } from '@react-flow/bundle';
 
-const ConnectionLine: FC<ConnectionLineComponentProps> = ({
+const ConnectionLine: FC<ConnectionLineComponentProps> = ({ fromX, fromY, toX, toY }) => {
-  fromX,
-  fromY,
-  toX,
-  toY,
-}) => {
   return (
     <g>
       <path
@@ -16,14 +11,7 @@ const ConnectionLine: FC<ConnectionLineComponentProps> = ({
         className="animated"
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
       />
-      <circle
+      <circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
-        cx={toX}
-        cy={toY}
-        fill="#fff"
-        r={3}
-        stroke="#222"
-        strokeWidth={1.5}
-      />
     </g>
   );
 };

examples/nextjs/pages/CustomConnectionLine/index.tsx

@@ -7,8 +7,9 @@ import {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+  Background,
-import { Background, BackgroundVariant } from '@react-flow/background';
+  BackgroundVariant,
+} from '@react-flow/bundle';
 
 import ConnectionLine from './ConnectionLine';
 
@@ -25,10 +26,7 @@ const initialEdges: Edge[] = [];
 const ConnectionLineFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
 
   return (
     <ReactFlow

examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx

@@ -1,11 +1,5 @@
 import React, { memo, FC, CSSProperties } from 'react';
-import {
+import { Handle, Position, NodeProps, Connection, Edge } from '@react-flow/bundle';
-  Handle,
-  Position,
-  NodeProps,
-  Connection,
-  Edge,
-} from '@react-flow/renderer';
 
 const targetHandleStyle: CSSProperties = { background: '#555' };
 const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
@@ -15,27 +9,16 @@ const sourceHandleStyleB: CSSProperties = {
   top: 'auto',
 };
 
-const onConnect = (params: Connection | Edge) =>
+const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
-  console.log('handle onConnect', params);
 
 const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
   return (
     <>
-      <Handle
+      <Handle type="target" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
-        type="target"
-        position={Position.Left}
-        style={targetHandleStyle}
-        onConnect={onConnect}
-      />
       <div>
         Custom Color Picker Node: <strong>{data.color}</strong>
       </div>
-      <input
+      <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
-        className="nodrag"
-        type="color"
-        onChange={data.onChange}
-        defaultValue={data.color}
-      />
       <Handle
         type="source"
         position={Position.Right}
@@ -46,13 +29,7 @@ const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
           console.log('You trigger mousedown event', e);
         }}
       />
-      <Handle
+      <Handle type="source" position={Position.Right} id="b" style={sourceHandleStyleB} isConnectable={isConnectable} />
-        type="source"
-        position={Position.Right}
-        id="b"
-        style={sourceHandleStyleB}
-        isConnectable={isConnectable}
-      />
     </>
   );
 };

examples/nextjs/pages/CustomNode/index.tsx

@@ -11,7 +11,7 @@ import {
   Connection,
   useNodesState,
   useEdgesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import ColorSelectorNode from './ColorSelectorNode';
 
@@ -120,9 +120,7 @@ const CustomNodeFlow = () => {
   }, []);
 
   const onConnect = (connection: Connection) =>
-    setEdges((eds) =>
+    setEdges((eds) => addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds));
-      addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds)
-    );
 
   return (
     <ReactFlow

examples/nextjs/pages/DefaultNodes/index.tsx

@@ -5,8 +5,9 @@ import {
   Node,
   Edge,
   ReactFlowProvider,
-} from '@react-flow/core';
+  Background,
-import { Background, BackgroundVariant } from '@react-flow/background';
+  BackgroundVariant,
+} from '@react-flow/bundle';
 
 const defaultNodes: Node[] = [
   {
@@ -77,12 +78,7 @@ const DefaultNodes = () => {
   };
 
   return (
-    <ReactFlow
+    <ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} defaultEdgeOptions={defaultEdgeOptions} fitView>
-      defaultNodes={defaultNodes}
-      defaultEdges={defaultEdges}
-      defaultEdgeOptions={defaultEdgeOptions}
-      fitView
-    >
       <Background variant={BackgroundVariant.Lines} />
 
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>

examples/nextjs/pages/DragHandle/DragHandleNode.tsx

@@ -1,15 +1,8 @@
 import React, { memo, FC } from 'react';
 
-import {
+import { Handle, Position, NodeProps, Connection, Edge } from '@react-flow/bundle';
-  Handle,
-  Position,
-  NodeProps,
-  Connection,
-  Edge,
-} from '@react-flow/core';
 
-const onConnect = (params: Connection | Edge) =>
+const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
-  console.log('handle onConnect', params);
 
 const labelStyle = {
   display: 'flex',
@@ -28,12 +21,11 @@ const dragHandleStyle = {
 const ColorSelectorNode: FC<NodeProps> = () => {
   return (
     <>
-      <Handle type='target' position={Position.Left} onConnect={onConnect} />
+      <Handle type="target" position={Position.Left} onConnect={onConnect} />
       <div style={labelStyle}>
-        Only draggable here →{' '}
+        Only draggable here → <span className="custom-drag-handle" style={dragHandleStyle} />
-        <span className='custom-drag-handle' style={dragHandleStyle} />
       </div>
-      <Handle type='source' position={Position.Right} />
+      <Handle type="source" position={Position.Right} />
     </>
   );
 };

examples/nextjs/pages/DragNDrop/index.tsx

@@ -9,8 +9,8 @@ import {
   Node,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+  Controls,
-import { Controls } from '@react-flow/controls';
+} from '@react-flow/bundle';
 
 import Sidebar from './Sidebar';
 
@@ -34,13 +34,11 @@ let id = 0;
 const getId = () => `dndnode_${id++}`;
 
 const DnDFlow = () => {
-  const [reactFlowInstance, setReactFlowInstance] =
+  const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance>();
-    useState<ReactFlowInstance>();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-  const onConnect = (params: Connection | Edge) =>
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
-    setEdges((eds) => addEdge(params, eds));
   const onInit = (rfi: ReactFlowInstance) => setReactFlowInstance(rfi);
 
   const onDrop = (event: DragEvent) => {

examples/nextjs/pages/EdgeTypes/index.tsx

@@ -14,7 +14,7 @@ import {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import { getElements } from './utils';
 
@@ -31,8 +31,7 @@ const deleteKeyCode = ['AltLeft+KeyD', 'Backspace'];
 const EdgeTypesFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) =>
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
-    setEdges((eds) => addEdge(params, eds));
 
   return (
     <ReactFlow

examples/nextjs/pages/EdgeTypes/utils.ts

@@ -1,4 +1,4 @@
-import { Edge, Node, Position } from '@react-flow/core';
+import { Edge, Node, Position } from '@react-flow/bundle';
 
 const nodeWidth = 80;
 const nodeGapWidth = nodeWidth * 2;
@@ -54,18 +54,10 @@ const getNodeId = (): string => (id++).toString();
 export function getElements(): { nodes: Node[]; edges: Edge[] } {
   const initialElements = { nodes: [] as Node[], edges: [] as Edge[] };
 
-  for (
+  for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) {
-    let sourceTargetIndex = 0;
-    sourceTargetIndex < sourceTargetPositions.length;
-    sourceTargetIndex++
-  ) {
     const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex];
 
-    for (
+    for (let edgeTypeIndex = 0; edgeTypeIndex < edgeTypes.length; edgeTypeIndex++) {
-      let edgeTypeIndex = 0;
-      edgeTypeIndex < edgeTypes.length;
-      edgeTypeIndex++
-    ) {
       const currEdgeType = edgeTypes[edgeTypeIndex];
 
       for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {

examples/nextjs/pages/Edges/CustomEdge.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { EdgeProps, getBezierPath } from '@react-flow/core';
+import { EdgeProps, getBezierPath } from '@react-flow/bundle';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,
@@ -22,14 +22,9 @@ const CustomEdge: FC<EdgeProps> = ({
 
   return (
     <>
-      <path id={id} className='react-flow__edge-path' d={edgePath} />
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
       <text>
-        <textPath
+        <textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" textAnchor="middle">
-          href={`#${id}`}
-          style={{ fontSize: '12px' }}
-          startOffset='50%'
-          textAnchor='middle'
-        >
           {data.text}
         </textPath>
       </text>

examples/nextjs/pages/Edges/CustomEdge2.tsx

@@ -1,10 +1,5 @@
 import React, { FC } from 'react';
-import {
+import { EdgeProps, getBezierPath, EdgeText, getBezierEdgeCenter } from '@react-flow/bundle';
-  EdgeProps,
-  getBezierPath,
-  EdgeText,
-  getBezierEdgeCenter,
-} from '@react-flow/core';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,
@@ -33,7 +28,7 @@ const CustomEdge: FC<EdgeProps> = ({
 
   return (
     <>
-      <path id={id} className='react-flow__edge-path' d={edgePath} />
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
       <EdgeText
         x={centerX}
         y={centerY}

examples/nextjs/pages/Edges/index.tsx

@@ -12,23 +12,18 @@ import {
   Node,
   useEdgesState,
   useNodesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';
 
-const onNodeDragStop = (_: MouseEvent, node: Node) =>
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-  console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
-const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) =>
+const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('dblclick', edge);
-  console.log('dblclick', edge);
+const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('enter', edge);
-const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) =>
+const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('move', edge);
-  console.log('enter', edge);
+const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('leave', edge);
-const onEdgeMouseMove = (_: MouseEvent, edge: Edge) =>
-  console.log('move', edge);
-const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) =>
-  console.log('leave', edge);
 
 const initialNodes: Node[] = [
   {
@@ -189,10 +184,7 @@ const defaultViewport = {
 const EdgesFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
 
   return (
     <ReactFlow

examples/nextjs/pages/Empty/index.tsx

@@ -12,13 +12,11 @@ import {
   useNodesState,
   useEdgesState,
   ReactFlowInstance,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
-const onInit = (reactFlowInstance: ReactFlowInstance) =>
+const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
-  console.log('flow loaded:', reactFlowInstance);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
-const onNodeDragStop = (_: MouseEvent, node: Node) =>
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-  console.log('drag stop', node);
 
 const buttonStyle: CSSProperties = {
   position: 'absolute',
@@ -31,10 +29,7 @@ const EmptyFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((els) => addEdge(params, els)), [setEdges]);
-    (params: Connection | Edge) => setEdges((els) => addEdge(params, els)),
-    [setEdges]
-  );
   const addRandomNode = () => {
     const nodeId = (nodes.length + 1).toString();
     const newNode: Node = {

examples/nextjs/pages/FloatingEdges/FloatingConnectionLine.tsx

@@ -1,9 +1,5 @@
 import React, { FC } from 'react';
-import {
+import { getBezierPath, ConnectionLineComponentProps, Node } from '@react-flow/bundle';
-  getBezierPath,
-  ConnectionLineComponentProps,
-  Node,
-} from '@react-flow/core';
 
 import { getEdgeParams } from './utils';
 
@@ -37,21 +33,8 @@ const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({
 
   return (
     <g>
-      <path
+      <path fill="none" stroke="#222" strokeWidth={1.5} className="animated" d={d} />
-        fill='none'
+      <circle cx={targetX} cy={targetY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
-        stroke='#222'
-        strokeWidth={1.5}
-        className='animated'
-        d={d}
-      />
-      <circle
-        cx={targetX}
-        cy={targetY}
-        fill='#fff'
-        r={3}
-        stroke='#222'
-        strokeWidth={1.5}
-      />
     </g>
   );
 };

examples/nextjs/pages/FloatingEdges/FloatingEdge.tsx

@@ -1,10 +1,5 @@
 import React, { FC, useMemo, CSSProperties } from 'react';
-import {
+import { EdgeProps, useStore, getBezierPath, ReactFlowState } from '@react-flow/bundle';
-  EdgeProps,
-  useStore,
-  getBezierPath,
-  ReactFlowState,
-} from '@react-flow/core';
 
 import { getEdgeParams } from './utils';
 
@@ -13,23 +8,14 @@ const nodeSelector = (s: ReactFlowState) => s.nodeInternals;
 const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
   const nodeInternals = useStore(nodeSelector);
 
-  const sourceNode = useMemo(
+  const sourceNode = useMemo(() => nodeInternals.get(source), [source, nodeInternals]);
-    () => nodeInternals.get(source),
+  const targetNode = useMemo(() => nodeInternals.get(target), [target, nodeInternals]);
-    [source, nodeInternals]
-  );
-  const targetNode = useMemo(
-    () => nodeInternals.get(target),
-    [target, nodeInternals]
-  );
 
   if (!sourceNode || !targetNode) {
     return null;
   }
 
-  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
-    sourceNode,
-    targetNode
-  );
 
   const d = getBezierPath({
     sourceX: sx,
@@ -41,13 +27,8 @@ const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
   });
 
   return (
-    <g className='react-flow__connection'>
+    <g className="react-flow__connection">
-      <path
+      <path id={id} className="react-flow__edge-path" d={d} style={style as CSSProperties} />
-        id={id}
-        className='react-flow__edge-path'
-        d={d}
-        style={style as CSSProperties}
-      />
     </g>
   );
 };

examples/nextjs/pages/FloatingEdges/index.tsx

@@ -9,7 +9,7 @@ import {
   Connection,
   useNodesState,
   useEdgesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import styles from './style.module.css';
 
@@ -17,8 +17,7 @@ import FloatingConnectionLine from './FloatingConnectionLine';
 import FloatingEdge from './FloatingEdge';
 import { createElements } from './utils';
 
-const onInit = (reactFlowInstance: ReactFlowInstance) =>
+const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
-  reactFlowInstance.fitView();
 
 const { nodes: initialNodes, edges: initialEdges } =
   typeof window !== 'undefined' ? createElements() : { nodes: [], edges: [] };

examples/nextjs/pages/FloatingEdges/utils.ts

@@ -1,11 +1,8 @@
-import React, { Position, XYPosition, Node, Edge } from '@react-flow/core';
+import { Position, XYPosition, Node, Edge } from '@react-flow/bundle';
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
-function getNodeIntersection(
+function getNodeIntersection(intersectionNode: Node, targetNode: Node): XYPosition {
-  intersectionNode: Node,
-  targetNode: Node
-): XYPosition {
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
 
   const {

examples/nextjs/pages/Hidden/index.tsx

@@ -8,10 +8,9 @@ import {
   Node,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+  MiniMap,
-
+  Controls,
-import { Controls } from '@react-flow/controls';
+} from '@react-flow/bundle';
-import { MiniMap } from '@react-flow/minimap';
 
 const initialNodes: Node[] = [
   {

examples/nextjs/pages/Interaction/index.tsx

@@ -1,8 +1,4 @@
-import React, {
+import React, { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
-  useState,
-  MouseEvent as ReactMouseEvent,
-  WheelEvent,
-} from 'react';
 import {
   ReactFlow,
   addEdge,
@@ -13,10 +9,9 @@ import {
   Viewport,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+  Controls,
-
+  MiniMap,
-import { Controls } from '@react-flow/controls';
+} from '@react-flow/bundle';
-import { MiniMap } from '@react-flow/minimap';
 
 const initialNodes: Node[] = [
   {
@@ -35,27 +30,19 @@ const initialEdges: Edge[] = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
-const onNodeDragStart = (_: ReactMouseEvent, node: Node) =>
+const onNodeDragStart = (_: ReactMouseEvent, node: Node) => console.log('drag start', node);
-  console.log('drag start', node);
+const onNodeDragStop = (_: ReactMouseEvent, node: Node) => console.log('drag stop', node);
-const onNodeDragStop = (_: ReactMouseEvent, node: Node) =>
+const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('click', node);
-  console.log('drag stop', node);
+const onEdgeClick = (_: ReactMouseEvent, edge: Edge) => console.log('click', edge);
-const onNodeClick = (_: ReactMouseEvent, node: Node) =>
+const onPaneClick = (event: ReactMouseEvent) => console.log('onPaneClick', event);
-  console.log('click', node);
-const onEdgeClick = (_: ReactMouseEvent, edge: Edge) =>
-  console.log('click', edge);
-const onPaneClick = (event: ReactMouseEvent) =>
-  console.log('onPaneClick', event);
 const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
-const onPaneContextMenu = (event: ReactMouseEvent) =>
+const onPaneContextMenu = (event: ReactMouseEvent) => console.log('onPaneContextMenu', event);
-  console.log('onPaneContextMenu', event);
+const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) => console.log('onMoveEnd', viewport);
-const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) =>
-  console.log('onMoveEnd', viewport);
 
 const InteractionFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) =>
+  const onConnect = (params: Connection | Edge) => setEdges((els) => addEdge(params, els));
-    setEdges((els) => addEdge(params, els));
 
   const [isSelectable, setIsSelectable] = useState<boolean>(false);
   const [isDraggable, setIsDraggable] = useState<boolean>(false);
@@ -63,15 +50,12 @@ const InteractionFlow = () => {
   const [zoomOnScroll, setZoomOnScroll] = useState<boolean>(false);
   const [zoomOnPinch, setZoomOnPinch] = useState<boolean>(false);
   const [panOnScroll, setPanOnScroll] = useState<boolean>(false);
-  const [panOnScrollMode, setPanOnScrollMode] = useState<PanOnScrollMode>(
+  const [panOnScrollMode, setPanOnScrollMode] = useState<PanOnScrollMode>(PanOnScrollMode.Free);
-    PanOnScrollMode.Free
-  );
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState<boolean>(false);
   const [panOnDrag, setPanOnDrag] = useState<boolean>(true);
   const [captureZoomClick, setCaptureZoomClick] = useState<boolean>(false);
   const [captureZoomScroll, setCaptureZoomScroll] = useState<boolean>(false);
-  const [captureElementClick, setCaptureElementClick] =
+  const [captureElementClick, setCaptureElementClick] = useState<boolean>(false);
-    useState<boolean>(false);
 
   return (
     <ReactFlow
@@ -180,9 +164,7 @@ const InteractionFlow = () => {
             <select
               id="panonscrollmode"
               value={panOnScrollMode}
-              onChange={(event) =>
+              onChange={(event) => setPanOnScrollMode(event.target.value as PanOnScrollMode)}
-                setPanOnScrollMode(event.target.value as PanOnScrollMode)
-              }
               className="react-flow__panonscrollmode"
             >
               <option value="free">free</option>

examples/nextjs/pages/Layouting/index.tsx

@@ -11,7 +11,7 @@ import {
   useEdgesState,
   MarkerType,
   EdgeMarker,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import dagre from 'dagre';
 
@@ -78,10 +78,7 @@ const LayoutFlow = () => {
       eds.map((e) => ({
         ...e,
         markerEnd: {
-          type:
+          type: (e.markerEnd as EdgeMarker)?.type === MarkerType.Arrow ? MarkerType.ArrowClosed : MarkerType.Arrow,
-            (e.markerEnd as EdgeMarker)?.type === MarkerType.Arrow
-              ? MarkerType.ArrowClosed
-              : MarkerType.Arrow,
         },
       }))
     );

examples/nextjs/pages/Layouting/initial-elements.ts

@@ -1,4 +1,4 @@
-import { Node, Edge, XYPosition, MarkerType } from '@react-flow/core';
+import { Node, Edge, XYPosition, MarkerType } from '@react-flow/bundle';
 
 const position: XYPosition = { x: 0, y: 0 };
 

examples/nextjs/pages/MultiFlows/index.tsx

@@ -11,7 +11,7 @@ import {
   useNodesState,
   useEdgesState,
   MarkerType,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import styles from './multiflows.module.css';
 
@@ -58,8 +58,7 @@ const Flow: FC<{ id: string }> = ({ id }) => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-  const onConnect = (params: Edge | Connection) =>
+  const onConnect = (params: Edge | Connection) => setEdges((eds) => addEdge(params, eds));
-    setEdges((eds) => addEdge(params, eds));
 
   return (
     <ReactFlowProvider>

examples/nextjs/pages/NestedNodes/index.tsx

@@ -11,10 +11,9 @@ import {
   Edge,
   ReactFlowInstance,
   Connection,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
-const onNodeDragStop = (_: MouseEvent, node: Node) =>
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-  console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
 
@@ -110,10 +109,7 @@ const NestedFlow = () => {
     },
     [setEdges]
   );
-  const onInit = useCallback(
+  const onInit = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
-    (reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance),
-    []
-  );
 
   const updatePos = () => {
     setNodes((nds) => {

examples/nextjs/pages/NodeTypeChange/index.tsx

@@ -1,15 +1,6 @@
 import React, { CSSProperties, useCallback } from 'react';
 
-import {
+import { ReactFlow, addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from '@react-flow/bundle';
-  ReactFlow,
-  addEdge,
-  Node,
-  Position,
-  Connection,
-  Edge,
-  useNodesState,
-  useEdgesState,
-} from '@react-flow/core';
 
 const initialNodes: Node[] = [
   {
@@ -29,9 +20,7 @@ const initialNodes: Node[] = [
   },
 ];
 
-const initialEdges: Edge[] = [
+const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true }];
-  { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
-];
 
 const buttonStyle: CSSProperties = {
   position: 'absolute',
@@ -43,10 +32,7 @@ const buttonStyle: CSSProperties = {
 const NodeTypeChangeFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
   const changeType = () => {
     setNodes((nds) =>
       nds.map((node) => {

examples/nextjs/pages/NodeTypesObjectChange/index.tsx

@@ -11,7 +11,7 @@ import {
   NodeTypes,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 
 const initialNodes: Node[] = [
   {
@@ -68,10 +68,7 @@ const NodeTypeChangeFlow = () => {
   const [nodeTypesId, setNodeTypesId] = useState<string>('a');
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
   const changeType = () => setNodeTypesId((nt) => (nt === 'a' ? 'b' : 'a'));
 
   return (

examples/nextjs/pages/Overview/index.tsx

@@ -1,8 +1,4 @@
-import React, {
+import React, { MouseEvent as ReactMouseEvent, CSSProperties, useCallback } from 'react';
-  MouseEvent as ReactMouseEvent,
-  CSSProperties,
-  useCallback,
-} from 'react';
 
 import {
   ReactFlow,
@@ -16,63 +12,42 @@ import {
   useNodesState,
   useEdgesState,
   OnSelectionChangeParams,
-} from '@react-flow/core';
+  Controls,
+  Background,
+  MiniMap,
+} from '@react-flow/bundle';
 
-import { Controls } from '@react-flow/controls';
+const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes);
-import { Background } from '@react-flow/background';
+const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
-import { MiniMap } from '@react-flow/minimap';
+const onNodeDragStop = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
-
+const onNodeDoubleClick = (_: ReactMouseEvent, node: Node) => console.log('node double click', node);
-const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
+const onPaneClick = (event: ReactMouseEvent) => console.log('pane click', event);
-  console.log('drag start', node, nodes);
+const onPaneScroll = (event?: ReactMouseEvent) => console.log('pane scroll', event);
-const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
+const onPaneContextMenu = (event: ReactMouseEvent) => console.log('pane context menu', event);
-  console.log('drag', node, nodes);
+const onSelectionDrag = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag', nodes);
-const onNodeDragStop = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
+const onSelectionDragStart = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag start', nodes);
-  console.log('drag stop', node, nodes);
+const onSelectionDragStop = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag stop', nodes);
-const onNodeDoubleClick = (_: ReactMouseEvent, node: Node) =>
-  console.log('node double click', node);
-const onPaneClick = (event: ReactMouseEvent) =>
-  console.log('pane click', event);
-const onPaneScroll = (event?: ReactMouseEvent) =>
-  console.log('pane scroll', event);
-const onPaneContextMenu = (event: ReactMouseEvent) =>
-  console.log('pane context menu', event);
-const onSelectionDrag = (_: ReactMouseEvent, nodes: Node[]) =>
-  console.log('selection drag', nodes);
-const onSelectionDragStart = (_: ReactMouseEvent, nodes: Node[]) =>
-  console.log('selection drag start', nodes);
-const onSelectionDragStop = (_: ReactMouseEvent, nodes: Node[]) =>
-  console.log('selection drag stop', nodes);
 const onSelectionContextMenu = (event: ReactMouseEvent, nodes: Node[]) => {
   event.preventDefault();
   console.log('selection context menu', nodes);
 };
-const onNodeClick = (_: ReactMouseEvent, node: Node) =>
+const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('node click:', node);
-  console.log('node click:', node);
 
-const onSelectionChange = ({ nodes, edges }: OnSelectionChangeParams) =>
+const onSelectionChange = ({ nodes, edges }: OnSelectionChangeParams) => console.log('selection change', nodes, edges);
-  console.log('selection change', nodes, edges);
 const onInit = (reactFlowInstance: ReactFlowInstance) => {
   console.log('pane ready:', reactFlowInstance);
 };
 
-const onMoveStart = (_: MouseEvent | TouchEvent, viewport: Viewport) =>
+const onMoveStart = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move start', viewport);
-  console.log('zoom/move start', viewport);
+const onMoveEnd = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move end', viewport);
-const onMoveEnd = (_: MouseEvent | TouchEvent, viewport: Viewport) =>
+const onEdgeContextMenu = (_: ReactMouseEvent, edge: Edge) => console.log('edge context menu', edge);
-  console.log('zoom/move end', viewport);
+const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
-const onEdgeContextMenu = (_: ReactMouseEvent, edge: Edge) =>
+const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse move', edge);
-  console.log('edge context menu', edge);
+const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
-const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) =>
+const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) => console.log('edge double click', edge);
-  console.log('edge mouse enter', edge);
-const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) =>
-  console.log('edge mouse move', edge);
-const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) =>
-  console.log('edge mouse leave', edge);
-const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) =>
-  console.log('edge double click', edge);
 const onNodesDelete = (nodes: Node[]) => console.log('nodes delete', nodes);
 const onEdgesDelete = (edges: Edge[]) => console.log('edges delete', edges);
-const onPaneMouseMove = (e: ReactMouseEvent) =>
+const onPaneMouseMove = (e: ReactMouseEvent) => console.log('pane move', e.clientX);
-  console.log('pane move', e.clientX);
 
 const initialNodes: Node[] = [
   {
@@ -122,11 +97,7 @@ const initialNodes: Node[] = [
       label: (
         <>
           You can find the docs on{' '}
-          <a
+          <a href="https://github.com/wbkd/react-flow" target="_blank" rel="noopener noreferrer">
-            href="https://github.com/wbkd/react-flow"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
             Github
           </a>
         </>
@@ -215,10 +186,7 @@ const nodeColor = (n: Node): string => {
 const OverviewFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
 
   return (
     <ReactFlow
@@ -259,11 +227,7 @@ const OverviewFlow = () => {
       onEdgesDelete={onEdgesDelete}
       onPaneMouseMove={onPaneMouseMove}
     >
-      <MiniMap
+      <MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
-        nodeStrokeColor={nodeStrokeColor}
-        nodeColor={nodeColor}
-        nodeBorderRadius={2}
-      />
       <Controls />
       <Background color="#aaa" gap={25} />
     </ReactFlow>

examples/nextjs/pages/Provider/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useStore, useStoreApi } from '@react-flow/core';
+import { useStore, useStoreApi } from '@react-flow/bundle';
 
 import styles from './provider.module.css';
 
@@ -16,19 +16,16 @@ const Sidebar = () => {
   return (
     <aside className={styles.aside}>
       <div className={styles.description}>
-        This is an example of how you can access the internal state outside of
+        This is an example of how you can access the internal state outside of the ReactFlow component.
-        the ReactFlow component.
       </div>
       <div className={styles.title}>Zoom & pan transform</div>
       <div className={styles.transform}>
-        [{transform[0].toFixed(2)}, {transform[1].toFixed(2)},{' '}
+        [{transform[0].toFixed(2)}, {transform[1].toFixed(2)}, {transform[2].toFixed(2)}]
-        {transform[2].toFixed(2)}]
       </div>
       <div className={styles.title}>Nodes</div>
       {Array.from(nodeInternals).map(([, node]) => (
         <div key={node.id}>
-          Node {node.id} - x: {node.position.x.toFixed(2)}, y:{' '}
+          Node {node.id} - x: {node.position.x.toFixed(2)}, y: {node.position.y.toFixed(2)}
-          {node.position.y.toFixed(2)}
         </div>
       ))}
 

examples/nextjs/pages/Provider/index.tsx

@@ -11,15 +11,14 @@ import {
   useNodesState,
   useEdgesState,
   ReactFlowInstance,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import Sidebar from './Sidebar';
 
 import styles from './provider.module.css';
 
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
-const onInit = (reactFlowInstance: ReactFlowInstance) =>
+const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('pane ready:', reactFlowInstance);
-  console.log('pane ready:', reactFlowInstance);
 
 const initialNodes: Node[] = [
   {
@@ -41,10 +40,7 @@ const initialEdges: Edge[] = [
 const ProviderFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
-    (params: Edge | Connection) => setEdges((els) => addEdge(params, els)),
-    [setEdges]
-  );
 
   return (
     <div className={styles.providerflow}>

examples/nextjs/pages/SaveRestore/Controls.tsx

@@ -1,10 +1,5 @@
 import React, { memo, useCallback, Dispatch, FC } from 'react';
-import {
+import { useReactFlow, Edge, Node, ReactFlowJsonObject } from '@react-flow/bundle';
-  useReactFlow,
-  Edge,
-  Node,
-  ReactFlowJsonObject,
-} from '@react-flow/core';
 import localforage from 'localforage';
 
 import styles from './save.module.css';
@@ -33,9 +28,7 @@ const Controls: FC<ControlsProps> = ({ setNodes, setEdges }) => {
 
   const onRestore = useCallback(() => {
     const restoreFlow = async () => {
-      const flow: ReactFlowJsonObject | null = await localforage.getItem(
+      const flow: ReactFlowJsonObject | null = await localforage.getItem(flowKey);
-        flowKey
-      );
 
       if (flow) {
         const { x, y, zoom } = flow.viewport;

examples/nextjs/pages/SaveRestore/index.tsx

@@ -8,7 +8,7 @@ import {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 import Controls from './Controls';
 
 const initialNodes: Node[] = [
@@ -21,10 +21,7 @@ const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
 const SaveRestore = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
 
   return (
     <ReactFlowProvider>

examples/nextjs/pages/Stress/index.tsx

@@ -10,10 +10,10 @@ import {
   addEdge,
   applyEdgeChanges,
   EdgeChange,
-} from '@react-flow/core';
+  Controls,
-import { Controls } from '@react-flow/controls';
+  Background,
-import { Background } from '@react-flow/background';
+  MiniMap,
-import { MiniMap } from '@react-flow/minimap';
+} from '@react-flow/bundle';
 
 import { getNodesAndEdges } from './utils';
 

examples/nextjs/pages/Stress/utils.ts

@@ -1,14 +1,11 @@
-import { Node, Edge } from '@react-flow/core';
+import { Node, Edge } from '@react-flow/bundle';
 
 type ElementsCollection = {
   nodes: Node[];
   edges: Edge[];
 };
 
-export function getNodesAndEdges(
+export function getNodesAndEdges(xElements = 10, yElements = 10): ElementsCollection {
-  xElements: number = 10,
-  yElements: number = 10
-): ElementsCollection {
   const initialNodes = [];
   const initialEdges: Edge[] = [];
   let nodeId = 1;

examples/nextjs/pages/Subflow/DebugNode.tsx

@@ -1,6 +1,6 @@
 import React, { memo, FC, CSSProperties } from 'react';
 
-import { Handle, NodeProps, Position } from '@react-flow/core';
+import { Handle, NodeProps, Position } from '@react-flow/bundle';
 
 const infoStyle: CSSProperties = { fontSize: 11 };
 const idStyle: CSSProperties = {
@@ -14,12 +14,12 @@ const idStyle: CSSProperties = {
 const DebugNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
   return (
     <>
-      <Handle type='target' position={Position.Top} />
+      <Handle type="target" position={Position.Top} />
       <div style={idStyle}>{id}</div>
       <div style={infoStyle}>
         x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
       </div>
-      <Handle type='source' position={Position.Bottom} />
+      <Handle type="source" position={Position.Bottom} />
     </>
   );
 };

examples/nextjs/pages/Subflow/index.tsx

@@ -9,17 +9,15 @@ import {
   MarkerType,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+  Controls,
-import { Controls } from '@react-flow/controls';
+  MiniMap,
-import { Background } from '@react-flow/background';
+  Background,
-import { MiniMap } from '@react-flow/minimap';
+} from '@react-flow/bundle';
 
 import DebugNode from './DebugNode';
 
-const onNodeDrag = (_: MouseEvent, node: Node, nodes: Node[]) =>
+const onNodeDrag = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
-  console.log('drag', node, nodes);
+const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
-const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) =>
-  console.log('drag stop', node, nodes);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
 
@@ -150,14 +148,8 @@ const Subflow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-  const onConnect = useCallback(
+  const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
-    (connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
+  const onInit = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
-    [setEdges]
-  );
-  const onInit = useCallback(
-    (reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance),
-    []
-  );
 
   const updatePos = () => {
     setNodes((nds) => {

examples/nextjs/pages/Switch/index.tsx

@@ -1,16 +1,7 @@
 import React, { MouseEvent, useCallback } from 'react';
-import {
+import { ReactFlow, addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from '@react-flow/bundle';
-  ReactFlow,
-  addEdge,
-  Node,
-  Connection,
-  Edge,
-  useNodesState,
-  useEdgesState,
-} from '@react-flow/core';
 
-const onNodeDragStop = (_: MouseEvent, node: Node) =>
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-  console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 
 const nodesA: Node[] = [
@@ -96,10 +87,7 @@ const BasicFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(nodesA);
   const [edges, setEdges, onEdgesChange] = useEdgesState(edgesA);
 
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
 
   return (
     <ReactFlow

examples/nextjs/pages/TouchDevice/index.tsx

@@ -1,14 +1,5 @@
 import React, { useCallback } from 'react';
-import {
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from '@react-flow/bundle';
-  ReactFlow,
-  Node,
-  Edge,
-  useNodesState,
-  useEdgesState,
-  Position,
-  Connection,
-  addEdge,
-} from '@react-flow/core';
 
 import styles from './touch-device.module.css';
 
@@ -34,20 +25,11 @@ const initialEdges: Edge[] = [];
 const TouchDeviceFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
+  const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
-    (connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
-    [setEdges]
-  );
   const onConnectStart = useCallback(() => console.log('connect start'), []);
   const onConnectEnd = useCallback(() => console.log('connect end'), []);
-  const onClickConnectStart = useCallback(
+  const onClickConnectStart = useCallback(() => console.log('click connect start'), []);
-    () => console.log('click connect start'),
+  const onClickConnectEnd = useCallback(() => console.log('click connect end'), []);
-    []
-  );
-  const onClickConnectEnd = useCallback(
-    () => console.log('click connect end'),
-    []
-  );
 
   return (
     <ReactFlow

examples/nextjs/pages/Undirectional/CustomNode.tsx

@@ -1,6 +1,6 @@
 import React, { memo, FC, CSSProperties } from 'react';
 
-import { Handle, Position, NodeProps } from '@react-flow/core';
+import { Handle, Position, NodeProps } from '@react-flow/bundle';
 
 const nodeStyles: CSSProperties = {
   padding: '10px 15px',
@@ -11,10 +11,10 @@ const CustomNode: FC<NodeProps> = ({ id }) => {
   return (
     <div style={nodeStyles}>
       <div>node {id}</div>
-      <Handle type='source' id='left' position={Position.Left} />
+      <Handle type="source" id="left" position={Position.Left} />
-      <Handle type='source' id='right' position={Position.Right} />
+      <Handle type="source" id="right" position={Position.Right} />
-      <Handle type='source' id='top' position={Position.Top} />
+      <Handle type="source" id="top" position={Position.Top} />
-      <Handle type='source' id='bottom' position={Position.Bottom} />
+      <Handle type="source" id="bottom" position={Position.Bottom} />
     </div>
   );
 };

examples/nextjs/pages/Undirectional/index.tsx

@@ -14,7 +14,7 @@ import {
   updateEdge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 import CustomNode from './CustomNode';
 
 const initialNodes: Node[] = [
@@ -184,8 +184,7 @@ const UpdateNodeInternalsFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-  const onConnect = (params: Edge | Connection) =>
+  const onConnect = (params: Edge | Connection) => setEdges((els) => addEdge(params, els));
-    setEdges((els) => addEdge(params, els));
   const { project } = useReactFlow();
   const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
     setEdges((els) => updateEdge(oldEdge, newConnection, els));

examples/nextjs/pages/UpdatableEdge/index.tsx

@@ -12,7 +12,7 @@ import {
   NodeChange,
   EdgeChange,
   HandleType,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 
 import { Controls } from '@react-flow/controls';
 
@@ -59,17 +59,11 @@ const initialNodes: Node[] = [
   },
 ];
 
-const initialEdges = [
+const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' }];
-  { id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' },
-];
 
-const onInit = (reactFlowInstance: ReactFlowInstance) =>
+const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
-  reactFlowInstance.fitView();
+const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge, handleType: HandleType) =>
-const onEdgeUpdateStart = (
+  console.log(`start update ${handleType} handle`, edge);
-  _: React.MouseEvent,
-  edge: Edge,
-  handleType: HandleType
-) => console.log(`start update ${handleType} handle`, edge);
 const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge, handleType: HandleType) =>
   console.log(`end update ${handleType} handle`, edge);
 
@@ -78,8 +72,7 @@ const UpdatableEdge = () => {
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
   const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
     setEdges((els) => updateEdge(oldEdge, newConnection, els));
-  const onConnect = (connection: Connection) =>
+  const onConnect = (connection: Connection) => setEdges((els) => addEdge(connection, els));
-    setEdges((els) => addEdge(connection, els));
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {
     console.log(changes);

examples/nextjs/pages/UpdateNode/index.tsx

@@ -1,11 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import {
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from '@react-flow/bundle';
-  ReactFlow,
-  Node,
-  Edge,
-  useNodesState,
-  useEdgesState,
-} from '@react-flow/core';
 
 import styles from './updatenode.module.css';
 
@@ -77,21 +71,14 @@ const UpdateNode = () => {
     >
       <div className={styles.controls}>
         <label>label:</label>
-        <input
+        <input value={nodeName} onChange={(evt) => setNodeName(evt.target.value)} />
-          value={nodeName}
-          onChange={(evt) => setNodeName(evt.target.value)}
-        />
 
         <label className={styles.bgLabel}>background:</label>
         <input value={nodeBg} onChange={(evt) => setNodeBg(evt.target.value)} />
 
         <div className="updatenode__checkboxwrapper">
           <label>hidden:</label>
-          <input
+          <input type="checkbox" checked={nodeHidden} onChange={(evt) => setNodeHidden(evt.target.checked)} />
-            type="checkbox"
-            checked={nodeHidden}
-            onChange={(evt) => setNodeHidden(evt.target.checked)}
-          />
         </div>
       </div>
     </ReactFlow>

examples/nextjs/pages/UseKeyPress/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useKeyPress } from '@react-flow/core';
+import { useKeyPress } from '@react-flow/bundle';
 
 const UseKeyPressComponent = () => {
   const metaPressed = useKeyPress(['Meta']);

examples/nextjs/pages/UseReactFlow/index.tsx

@@ -11,7 +11,7 @@ import {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 const initialNodes: Node[] = [
   {
@@ -53,8 +53,7 @@ const getId = () => `${id++}`;
 const UseZoomPanHelperFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) =>
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
-    setEdges((eds) => addEdge(params, eds));
   const {
     project,
     setCenter,
@@ -117,10 +116,7 @@ const UseZoomPanHelperFlow = () => {
     addEdges({ id: 'e3-4', source: '3', target: '4' });
   }, [addEdges]);
 
-  const onResetNodes = useCallback(
+  const onResetNodes = useCallback(() => setNodesHook(initialNodes), [setNodesHook]);
-    () => setNodesHook(initialNodes),
-    [setNodesHook]
-  );
 
   return (
     <ReactFlow
@@ -138,9 +134,7 @@ const UseZoomPanHelperFlow = () => {
       <div style={{ position: 'absolute', left: 0, top: 0, zIndex: 100 }}>
         <button onClick={() => zoomIn({ duration: 1200 })}>zoomIn</button>
         <button onClick={() => zoomOut({ duration: 0 })}>zoomOut</button>
-        <button onClick={() => fitView({ duration: 1200, padding: 0.3 })}>
+        <button onClick={() => fitView({ duration: 1200, padding: 0.3 })}>fitView</button>
-          fitView
-        </button>
         <button onClick={onAddNode}>add node</button>
         <button onClick={onResetNodes}>reset nodes</button>
         <button onClick={logNodes}>useNodes</button>

examples/nextjs/pages/UseUpdateNodeInternals/CustomNode.tsx

@@ -1,5 +1,5 @@
 import React, { memo, FC, useMemo, CSSProperties } from 'react';
-import { Handle, Position, NodeProps } from '@react-flow/core';
+import { Handle, Position, NodeProps } from '@react-flow/bundle';
 
 const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
 
@@ -11,7 +11,7 @@ const CustomNode: FC<NodeProps> = ({ data }) => {
         return (
           <Handle
             key={handleId}
-            type='source'
+            type="source"
             position={Position.Right}
             id={handleId}
             style={{ top: 10 * i + data.handlePosition * 10 }}
@@ -23,7 +23,7 @@ const CustomNode: FC<NodeProps> = ({ data }) => {
 
   return (
     <div style={nodeStyles}>
-      <Handle type='target' position={Position.Left} />
+      <Handle type="target" position={Position.Left} />
       <div>output handle count: {data.handleCount}</div>
       {handles}
     </div>

examples/nextjs/pages/UseUpdateNodeInternals/index.tsx

@@ -12,7 +12,7 @@ import {
   Position,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 
 import CustomNode from './CustomNode';
 
@@ -48,10 +48,7 @@ const getId = (): string => `${id++}`;
 const UpdateNodeInternalsFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
-    (params: Edge | Connection) => setEdges((els) => addEdge(params, els)),
-    [setEdges]
-  );
 
   const updateNodeInternals = useUpdateNodeInternals();
   const { project } = useReactFlow();
@@ -98,10 +95,7 @@ const UpdateNodeInternalsFlow = () => {
     );
   }, [setNodes]);
 
-  const updateNode = useCallback(
+  const updateNode = useCallback(() => updateNodeInternals('1'), [updateNodeInternals]);
-    () => updateNodeInternals('1'),
-    [updateNodeInternals]
-  );
 
   return (
     <ReactFlow

examples/nextjs/pages/Validation/index.tsx

@@ -12,7 +12,7 @@ import {
   useNodesState,
   useEdgesState,
   OnConnectStartParams,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 
 import styles from './validation.module.css';
 
@@ -28,27 +28,15 @@ const isValidConnection = (connection: Connection) => connection.target === 'B';
 const CustomInput: FC<NodeProps> = () => (
   <>
     <div>Only connectable with B</div>
-    <Handle
+    <Handle type="source" position={Position.Right} isValidConnection={isValidConnection} />
-      type="source"
-      position={Position.Right}
-      isValidConnection={isValidConnection}
-    />
   </>
 );
 
 const CustomNode: FC<NodeProps> = ({ id }) => (
   <>
-    <Handle
+    <Handle type="target" position={Position.Left} isValidConnection={isValidConnection} />
-      type="target"
-      position={Position.Left}
-      isValidConnection={isValidConnection}
-    />
     <div>{id}</div>
-    <Handle
+    <Handle type="source" position={Position.Right} isValidConnection={isValidConnection} />
-      type="source"
-      position={Position.Right}
-      isValidConnection={isValidConnection}
-    />
   </>
 );
 

examples/nextjs/pages/_app.tsx

@@ -7,7 +7,7 @@ import '../styles/globals.css';
 // import '@react-flow/core/dist/theme-default.css';
 
 // this is a workaround for testing the theme. See explanation above.
-// import '../styles/theme-default.css';
+import '../styles/rf-style.css';
 
 const routes = [
   '/',

examples/nextjs/pages/index.tsx

@@ -1,20 +1,19 @@
 import React, { MouseEvent } from 'react';
 
 import {
+  MiniMap,
   ReactFlow,
+  Background,
+  BackgroundVariant,
+  Controls,
   ReactFlowProvider,
   Node,
   Edge,
   useReactFlow,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
-
-import { MiniMap } from '@react-flow/minimap';
-import { Background, BackgroundVariant } from '@react-flow/background';
-import { Controls } from '@react-flow/controls';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
-const onNodeDragStop = (_: MouseEvent, node: Node) =>
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-  console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 
 const initialNodes: Node[] = [

examples/nextjs/pages/theme-default.css

@@ -1,111 +0,0 @@
-.react-flow__edge {
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    outline: none;
-
-    .react-flow__edge-path {
-      stroke: #555;
-    }
-  }
-
-  &.animated path {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-
-  &.updating {
-    .react-flow__edge-path {
-      stroke: #777;
-    }
-  }
-}
-
-.react-flow__edge-path {
-  stroke: #b1b1b7;
-  stroke-width: 1;
-}
-
-.react-flow__edge-text {
-  font-size: 10px;
-}
-
-.react-flow__connection-path {
-  stroke: #b1b1b7;
-  stroke-width: 1;
-}
-
-.react-flow__node {
-  cursor: grab;
-}
-
-.react-flow__node-default,
-.react-flow__node-input,
-.react-flow__node-output,
-.react-flow__node-group {
-  padding: 10px;
-  border-radius: 3px;
-  width: 150px;
-  font-size: 12px;
-  color: #222;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-  background: #fff;
-  border-color: #1a192b;
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    box-shadow: 0 0 0 0.5px #1a192b;
-    outline: none;
-  }
-
-  .react-flow__handle {
-    background: #1a192b;
-  }
-}
-
-.react-flow__node-default.selectable,
-.react-flow__node-input.selectable,
-.react-flow__node-output.selectable,
-.react-flow__node-group.selectable {
-  &:hover {
-    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-  }
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
-  }
-}
-
-.react-flow__node-group {
-  background: rgba(240, 240, 240, 0.25);
-  border-color: #1a192b;
-}
-
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(0, 89, 220, 0.08);
-  border: 1px dotted rgba(0, 89, 220, 0.8);
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.react-flow__handle {
-  width: 6px;
-  height: 6px;
-  background: #555;
-  border: 1px solid white;
-  border-radius: 100%;
-
-  &.connectable {
-    cursor: crosshair;
-  }
-}

examples/nextjs/postcss.config.json

@@ -1,6 +1,7 @@
 {
   "plugins": [
     "postcss-nested",
+    "postcss-import",
     "postcss-flexbugs-fixes",
     [
       "postcss-preset-env",

examples/nextjs/styles/rf-base.css

@@ -1,4 +1,5 @@
-const style = `
+/* these are very simple styles so that it doesnt look broken */
+/* these are the necessary styles for React Flow */
 .react-flow__container {
   position: absolute;
   width: 100%;
@@ -6,221 +7,222 @@ const style = `
   top: 0;
   left: 0;
 }
-
 .react-flow__pane {
   z-index: 1;
 }
-
 .react-flow__viewport {
   transform-origin: 0 0;
   z-index: 2;
   pointer-events: none;
 }
-
 .react-flow__renderer {
   z-index: 4;
 }
-
 .react-flow__selectionpane {
   z-index: 5;
 }
-
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(150, 150, 180, 0.1);
-  border: 1px dotted rgba(155, 155, 155, 0.8);
-}
-
 .react-flow__nodesselection-rect:focus,
 .react-flow__nodesselection-rect:focus-visible {
   outline: none;
 }
-
 .react-flow .react-flow__edges {
   pointer-events: none;
   overflow: visible;
 }
-
+.react-flow__edge-path,
-.react-flow__connection {
+.react-flow__connection-path {
-  pointer-events: none;
-}
-
-.react-flow__connection.animated {
-  stroke-dasharray: 5;
-  animation: dashdraw 0.5s linear infinite;
-}
-
-.react-flow .react-flow__connectionline {
-  z-index: 1001;
-}
-
-.react-flow__connectionline path, .react-flow__edge path {
-  fill: none;
-}
-
-.react-flow__edge-path, .react-flow__connection-path {
   stroke: #b1b1b7;
   stroke-width: 1;
 }
-
 .react-flow__edge {
   pointer-events: visibleStroke;
 }
-
 .react-flow__edge.animated path {
   stroke-dasharray: 5;
+  -webkit-animation: dashdraw 0.5s linear infinite;
   animation: dashdraw 0.5s linear infinite;
 }
-
 .react-flow__edge.inactive {
   pointer-events: none;
 }
-
+.react-flow__edge.selected,
-.react-flow__edge.selected, .react-flow__edge:focus, .react-flow__edge:focus-visible {
+.react-flow__edge:focus,
+.react-flow__edge:focus-visible {
   outline: none;
 }
-
 .react-flow__edge.selected .react-flow__edge-path,
 .react-flow__edge:focus .react-flow__edge-path,
 .react-flow__edge:focus-visible .react-flow__edge-path {
   stroke: #555;
 }
-
-@keyframes dashdraw {
-  from {
-    stroke-dashoffset: 10;
-  }
-}
-
 .react-flow__edge-textwrapper {
   pointer-events: all;
 }
-
-.react-flow__edge-text {
-  pointer-events: none;
-  user-select: none;
-}
-
 .react-flow__edge-textbg {
   fill: white;
 }
-
+.react-flow__edge .react-flow__edge-text {
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.react-flow__connection {
+  pointer-events: none;
+}
+.react-flow__connection.animated {
+  stroke-dasharray: 5;
+  -webkit-animation: dashdraw 0.5s linear infinite;
+  animation: dashdraw 0.5s linear infinite;
+}
+.react-flow__connectionline {
+  z-index: 1001;
+}
 .react-flow__nodes {
   pointer-events: none;
   transform-origin: 0 0;
 }
-
 .react-flow__node {
   position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
   user-select: none;
   pointer-events: all;
   transform-origin: 0 0;
   box-sizing: border-box;
   background-color: white;
+  cursor: -webkit-grab;
   cursor: grab;
-  border: 1px solid #bbb;
 }
-
-.react-flow__node.selected,
-.react-flow__node:focus,
-.react-flow__node:focus-visible  {
-  outline: none;
-  border: 1px solid #555;
-}
-
 .react-flow__nodesselection {
   z-index: 3;
   transform-origin: left top;
   pointer-events: none;
 }
-
 .react-flow__nodesselection-rect {
   position: absolute;
   pointer-events: all;
+  cursor: -webkit-grab;
   cursor: grab;
 }
-
 .react-flow__handle {
   position: absolute;
   pointer-events: none;
   min-width: 5px;
   min-height: 5px;
-  background-color: #333;
 }
-
 .react-flow__handle.connectable {
   pointer-events: all;
 }
-
 .react-flow__handle-bottom {
   top: auto;
   left: 50%;
   bottom: -4px;
   transform: translate(-50%, 0);
 }
-
 .react-flow__handle-top {
   left: 50%;
   top: -4px;
   transform: translate(-50%, 0);
 }
-
 .react-flow__handle-left {
   top: 50%;
   left: -4px;
   transform: translate(0, -50%);
 }
-
 .react-flow__handle-right {
   right: -4px;
   top: 50%;
   transform: translate(0, -50%);
 }
-
 .react-flow__edgeupdater {
   cursor: move;
   pointer-events: all;
 }
-
 .react-flow__panel {
   position: absolute;
   z-index: 1000;
   margin: 15px;
 }
-
 .react-flow__panel.top {
   top: 0;
 }
-
 .react-flow__panel.bottom {
   bottom: 0;
 }
-
 .react-flow__panel.left {
   left: 0;
 }
-
 .react-flow__panel.right {
   right: 0;
 }
-
 .react-flow__panel.center {
   left: 50%;
   transform: translateX(-50%);
 }
-
 .react-flow__attribution {
   font-size: 10px;
   background: rgba(255, 255, 255, 0.5);
   padding: 2px 3px;
-  color: #999;
   margin: 0;
 }
-
 .react-flow__attribution a {
-  color: #555;
   text-decoration: none;
+  color: #999;
+}
+@-webkit-keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+.react-flow__node {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #bbb;
+}
+.react-flow__node.selected,
+.react-flow__node:focus,
+.react-flow__node:focus-visible {
+  outline: none;
+  border: 1px solid #555;
+}
+.react-flow__nodesselection-rect,
+.react-flow__selection {
+  background: rgba(150, 150, 180, 0.1);
+  border: 1px dotted rgba(155, 155, 155, 0.8);
+}
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+}
+.react-flow__controls-button {
+  border: none;
+  background: #fefefe;
+  border-bottom: 1px solid #eee;
+  box-sizing: content-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  padding: 5px;
+}
+.react-flow__controls-button:hover {
+  background: #f4f4f4;
+}
+.react-flow__controls-button svg {
+  width: 100%;
+  max-width: 12px;
+  max-height: 12px;
+}
+.react-flow__minimap {
+  background-color: #fff;
 }
-`;
-
-export default style;

examples/nextjs/styles/rf-style.css

@@ -0,0 +1,267 @@
+/* these are the necessary styles for React Flow */
+.react-flow__container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.react-flow__pane {
+  z-index: 1;
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+.react-flow__pane.dragging {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
+.react-flow__viewport {
+  transform-origin: 0 0;
+  z-index: 2;
+  pointer-events: none;
+}
+.react-flow__renderer {
+  z-index: 4;
+}
+.react-flow__selectionpane {
+  z-index: 5;
+}
+.react-flow__nodesselection-rect:focus,
+.react-flow__nodesselection-rect:focus-visible {
+  outline: none;
+}
+.react-flow .react-flow__edges {
+  pointer-events: none;
+  overflow: visible;
+}
+.react-flow__edge-path,
+.react-flow__connection-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+}
+.react-flow__edge {
+  pointer-events: visibleStroke;
+  cursor: pointer;
+}
+.react-flow__edge.animated path {
+    stroke-dasharray: 5;
+    -webkit-animation: dashdraw 0.5s linear infinite;
+            animation: dashdraw 0.5s linear infinite;
+  }
+.react-flow__edge.inactive {
+    pointer-events: none;
+  }
+.react-flow__edge.selected,
+  .react-flow__edge:focus,
+  .react-flow__edge:focus-visible {
+    outline: none;
+  }
+.react-flow__edge.selected .react-flow__edge-path,
+  .react-flow__edge:focus .react-flow__edge-path,
+  .react-flow__edge:focus-visible .react-flow__edge-path {
+    stroke: #555;
+  }
+.react-flow__edge-textwrapper {
+    pointer-events: all;
+  }
+.react-flow__edge-textbg {
+    fill: white;
+  }
+.react-flow__edge .react-flow__edge-text {
+    pointer-events: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+.react-flow__connection {
+  pointer-events: none;
+}
+.react-flow__connection.animated {
+    stroke-dasharray: 5;
+    -webkit-animation: dashdraw 0.5s linear infinite;
+            animation: dashdraw 0.5s linear infinite;
+  }
+.react-flow__connectionline {
+  z-index: 1001;
+}
+.react-flow__nodes {
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+.react-flow__node {
+  position: absolute;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  background-color: white;
+  cursor: -webkit-grab;
+  cursor: grab;
+  padding: 10px;
+  border-radius: 3px;
+  width: 150px;
+  font-size: 12px;
+  color: #222;
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #1a192b;
+}
+.react-flow__node.dragging {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
+.react-flow__nodesselection {
+  z-index: 3;
+  transform-origin: left top;
+  pointer-events: none;
+}
+.react-flow__nodesselection-rect {
+    position: absolute;
+    pointer-events: all;
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+.react-flow__handle {
+  position: absolute;
+  pointer-events: none;
+  min-width: 5px;
+  min-height: 5px;
+  width: 6px;
+  height: 6px;
+  background: #1a192b;
+  border: 1px solid white;
+  border-radius: 100%;
+}
+.react-flow__handle.connectable {
+    pointer-events: all;
+    cursor: crosshair;
+  }
+.react-flow__handle-bottom {
+    top: auto;
+    left: 50%;
+    bottom: -4px;
+    transform: translate(-50%, 0);
+  }
+.react-flow__handle-top {
+    left: 50%;
+    top: -4px;
+    transform: translate(-50%, 0);
+  }
+.react-flow__handle-left {
+    top: 50%;
+    left: -4px;
+    transform: translate(0, -50%);
+  }
+.react-flow__handle-right {
+    right: -4px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+.react-flow__edgeupdater {
+  cursor: move;
+  pointer-events: all;
+}
+.react-flow__panel {
+  position: absolute;
+  z-index: 1000;
+  margin: 15px;
+}
+.react-flow__panel.top {
+    top: 0;
+  }
+.react-flow__panel.bottom {
+    bottom: 0;
+  }
+.react-flow__panel.left {
+    left: 0;
+  }
+.react-flow__panel.right {
+    right: 0;
+  }
+.react-flow__panel.center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+.react-flow__attribution {
+  font-size: 10px;
+  background: rgba(255, 255, 255, 0.5);
+  padding: 2px 3px;
+  margin: 0;
+}
+.react-flow__attribution a {
+    text-decoration: none;
+    color: #999;
+  }
+@-webkit-keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+.react-flow__edge.updating .react-flow__edge-path {
+      stroke: #777;
+    }
+.react-flow__edge-text {
+    font-size: 10px;
+  }
+.react-flow__node.selectable:hover {
+      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+    }
+.react-flow__node.selectable.selected,
+    .react-flow__node.selectable:focus,
+    .react-flow__node.selectable:focus-visible {
+      box-shadow: 0 0 0 0.5px #1a192b;
+      outline: none;
+    }
+.react-flow__node-group {
+    background: rgba(240, 240, 240, 0.25);
+    border-color: #1a192b;
+  }
+.react-flow__nodesselection-rect,
+.react-flow__selection {
+  background: rgba(0, 89, 220, 0.08);
+  border: 1px dotted rgba(0, 89, 220, 0.8);
+}
+.react-flow__nodesselection-rect:focus,
+  .react-flow__nodesselection-rect:focus-visible,
+  .react-flow__selection:focus,
+  .react-flow__selection:focus-visible {
+    outline: none;
+  }
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+}
+.react-flow__controls-button {
+    border: none;
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+    box-sizing: content-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    padding: 5px;
+  }
+.react-flow__controls-button:hover {
+      background: #f4f4f4;
+    }
+.react-flow__controls-button svg {
+      width: 100%;
+      max-width: 12px;
+      max-height: 12px;
+    }
+.react-flow__minimap {
+  background-color: #fff;
+}

examples/nextjs/styles/theme-default.css

@@ -1,83 +0,0 @@
-.react-flow__edge {
-  &.updating {
-    .react-flow__edge-path {
-      stroke: #777;
-    }
-  }
-}
-
-.react-flow__edge-text {
-  font-size: 10px;
-}
-
-.react-flow__node-default,
-.react-flow__node-input,
-.react-flow__node-output,
-.react-flow__node-group {
-  padding: 10px;
-  border-radius: 3px;
-  width: 150px;
-  font-size: 12px;
-  color: #222;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #1a192b;
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    border: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
-    outline: none;
-  }
-
-  .react-flow__handle {
-    background: #1a192b;
-  }
-}
-
-.react-flow__node-default.selectable,
-.react-flow__node-input.selectable,
-.react-flow__node-output.selectable,
-.react-flow__node-group.selectable {
-  &:hover {
-    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-  }
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    border: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
-    outline: none;
-  }
-}
-
-.react-flow__node-group {
-  background: rgba(240, 240, 240, 0.25);
-  border-color: #1a192b;
-}
-
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(0, 89, 220, 0.08);
-  border: 1px dotted rgba(0, 89, 220, 0.8);
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.react-flow__handle {
-  width: 6px;
-  height: 6px;
-  background: #555;
-  border: 1px solid white;
-  border-radius: 100%;
-
-  &.connectable {
-    cursor: crosshair;
-  }
-}

package.json

@@ -40,6 +40,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "latest",
     "postcss": "^8.4.16",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6",
     "prettier": "^2.7.1",

packages/background/README.md

@@ -0,0 +1,10 @@
+# @react-flow/background
+
+Background component for React Flow.
+
+## Installation 
+
+```sh 
+npm install @react-flow/background
+```
+

packages/bundle/README.md

@@ -0,0 +1,16 @@
+# @react-flow/bundle
+
+Bundles:
+
+* @react-flow/core
+* @react-flow/background
+* @react-flow/controls
+* @react-flow/minimap
+
+
+## Installation 
+
+```sh 
+npm install @react-flow/bundle
+```
+

packages/bundle/package.json

@@ -1,9 +1,9 @@
 {
-  "name": "@react-flow/renderer",
+  "name": "@react-flow/bundle",
   "version": "11.0.0",
-  "description": "The main React Flow package that comes with all the essentials.",
+  "description": "The bundled React Flow package that comes with all the essentials.",
-  "main": "dist/react-flow-renderer.cjs.js",
+  "main": "dist/react-flow-bundle.cjs.js",
-  "module": "dist/react-flow-renderer.esm.js",
+  "module": "dist/react-flow-bundle.esm.js",
   "license": "MIT",
   "scripts": {
     "build": "postcss src/*.css --config ../../postcss.config.json --dir dist"
@@ -22,6 +22,7 @@
     "autoprefixer": "^10.4.8",
     "postcss": "^8.4.14",
     "postcss-cli": "^10.0.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6"
   }

packages/bundle/src/base.css

@@ -0,0 +1,3 @@
+@import '../../core/src/styles/base.css';
+@import '../../controls/src/style.css';
+@import '../../minimap/src/style.css';

packages/bundle/src/style.css

@@ -0,0 +1,3 @@
+@import '../../core/src/styles/style.css';
+@import '../../controls/src/style.css';
+@import '../../minimap/src/style.css';

packages/controls/README.md

@@ -0,0 +1,10 @@
+# @react-flow/controls
+
+Controls component for React Flow.
+
+## Installation 
+
+```sh 
+npm install @react-flow/controls
+```
+

packages/controls/package.json

@@ -5,13 +5,23 @@
   "main": "dist/react-flow-controls.cjs.js",
   "module": "dist/react-flow-controls.esm.js",
   "license": "MIT",
+  "scripts": {
+    "build": "postcss src/*.css --config ../../postcss.config.json --dir dist"
+  },
   "dependencies": {
     "@react-flow/core": "^11.0.0",
-    "@react-flow/css-utils": "^11.0.0",
     "classcat": "^5.0.3"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.16",
+    "postcss-cli": "^10.0.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-import": "^14.1.0",
+    "postcss-nested": "^5.0.6"
   }
 }

packages/controls/src/Controls.tsx

@@ -1,13 +1,6 @@
 import { memo, FC, useEffect, useState, PropsWithChildren } from 'react';
 import cc from 'classcat';
-import {
+import { useStore, useStoreApi, useReactFlow, ReactFlowState, Panel } from '@react-flow/core';
-  useStore,
-  useStoreApi,
-  useReactFlow,
-  ReactFlowState,
-  Panel,
-} from '@react-flow/core';
-import { injectStyle } from '@react-flow/css-utils';
 
 import PlusIcon from './Icons/Plus';
 import MinusIcon from './Icons/Minus';
@@ -15,14 +8,10 @@ import FitviewIcon from './Icons/FitView';
 import LockIcon from './Icons/Lock';
 import UnlockIcon from './Icons/Unlock';
 import ControlButton from './ControlButton';
-import baseStyle from './style';
 
 import { ControlProps } from './types';
 
-injectStyle(baseStyle);
+const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
-
-const isInteractiveSelector = (s: ReactFlowState) =>
-  s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
 
 const Controls: FC<PropsWithChildren<ControlProps>> = ({
   style,
@@ -77,11 +66,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
   };
 
   return (
-    <Panel
+    <Panel className={cc(['react-flow__controls', className])} position={position} style={style}>
-      className={cc(['react-flow__controls', className])}
-      position={position}
-      style={style}
-    >
       {showZoom && (
         <>
           <ControlButton

packages/controls/src/style.css

@@ -0,0 +1,28 @@
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+
+  &-button {
+    border: none;
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+    box-sizing: content-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    user-select: none;
+    padding: 5px;
+
+    &:hover {
+      background: #f4f4f4;
+    }
+
+    svg {
+      width: 100%;
+      max-width: 12px;
+      max-height: 12px;
+    }
+  }
+}

packages/controls/src/style.ts

@@ -1,31 +0,0 @@
-const style = `
-.react-flow__controls {
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-}
-
-.react-flow__controls-button {
-  border: none;
-  background: #fefefe;
-  border-bottom: 1px solid #eee;
-  box-sizing: content-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  user-select: none;
-  padding: 5px;
-}
-
-.react-flow__controls-button svg {
-  width: 100%;
-  max-width: 12px;
-  max-height: 12px;
-}
-
-.react-flow__controls-button:hover {
-  background: #f4f4f4;
-}`;
-
-export default style;

packages/core/README.md

@@ -0,0 +1,8 @@
+# @react-flow/core
+
+## Installation 
+
+```sh 
+npm install @react-flow/core
+```
+

packages/core/package.json

@@ -13,11 +13,10 @@
     "url": "https://github.com/wbkd/react-flow.git"
   },
   "scripts": {
-    "build": "postcss src/styles/*.css --config ../../postcss.config.json --dir dist"
+    "build": "postcss src/styles/{base,style}.css --config ../../postcss.config.json --dir dist"
   },
   "dependencies": {
     "@babel/runtime": "^7.18.0",
-    "@react-flow/css-utils": "^11.0.0",
     "classcat": "^5.0.3",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
@@ -38,6 +37,7 @@
     "autoprefixer": "^10.4.8",
     "postcss": "^8.4.14",
     "postcss-cli": "^10.0.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6"
   }

packages/core/src/components/Nodes/wrapNode.tsx

@@ -149,6 +149,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
             selected,
             selectable: isSelectable,
             parent: isParent,
+            dragging,
           },
         ])}
         ref={nodeRef}

packages/core/src/container/FlowRenderer/Pane.tsx

@@ -0,0 +1,34 @@
+import { MouseEvent } from 'react';
+import cc from 'classcat';
+
+import { useStore } from '../../hooks/useStore';
+import { containerStyle } from '../../styles';
+import type { ReactFlowState } from '../../types';
+import type { FlowRendererProps } from '.';
+
+type PaneProps = Pick<FlowRendererProps, 'onClick' | 'onContextMenu' | 'onWheel'> & {
+  onMouseEnter?: (event: MouseEvent) => void;
+  onMouseMove?: (event: MouseEvent) => void;
+  onMouseLeave?: (event: MouseEvent) => void;
+};
+
+const selector = (s: ReactFlowState) => s.paneDragging;
+
+function Pane({ onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onWheel }: PaneProps) {
+  const dragging = useStore(selector);
+
+  return (
+    <div
+      className={cc(['react-flow__pane', { dragging }])}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseMove={onMouseMove}
+      onMouseLeave={onMouseLeave}
+      onContextMenu={onContextMenu}
+      onWheel={onWheel}
+      style={containerStyle}
+    />
+  );
+}
+
+export default Pane;

packages/core/src/container/FlowRenderer/index.tsx

@@ -7,9 +7,9 @@ import { GraphViewProps } from '../GraphView';
 import ZoomPane from '../ZoomPane';
 import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
+import Pane from './Pane';
 
 import { ReactFlowState } from '../../types';
-import { containerStyle } from '../../styles';
 
 export type FlowRendererProps = Omit<
   GraphViewProps,
@@ -110,15 +110,13 @@ const FlowRenderer = ({
           disableKeyboardA11y={disableKeyboardA11y}
         />
       )}
-      <div
+      <Pane
-        className="react-flow__pane"
         onClick={onClick}
         onMouseEnter={onPaneMouseEnter}
         onMouseMove={onPaneMouseMove}
         onMouseLeave={onPaneMouseLeave}
         onContextMenu={onContextMenu}
         onWheel={onWheel}
-        style={containerStyle}
       />
     </ZoomPane>
   );

packages/core/src/container/ReactFlow/index.tsx

@@ -1,6 +1,5 @@
 import { CSSProperties, forwardRef, useId } from 'react';
 import cc from 'classcat';
-import { injectStyle } from '@react-flow/css-utils';
 
 import Attribution from '../../components/Attribution';
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
@@ -9,9 +8,6 @@ import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import SelectionListener from '../../components/SelectionListener';
 import StoreUpdater from '../../components/StoreUpdater';
-import baseStyle from '../../styles/base';
-
-injectStyle(baseStyle);
 
 import {
   ConnectionLineType,

packages/core/src/container/ZoomPane/index.tsx

@@ -169,7 +169,9 @@ const ZoomPane = ({
     if (d3Zoom) {
       d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
         isZoomingOrPanning.current = true;
-
+        if (event.sourceEvent?.type === 'mousedown') {
+          store.setState({ paneDragging: true });
+        }
         if (onMoveStart) {
           const flowTransform = eventToFlowTransform(event.transform);
           prevTransform.current = flowTransform;
@@ -184,6 +186,7 @@ const ZoomPane = ({
     if (d3Zoom) {
       d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
         isZoomingOrPanning.current = false;
+        store.setState({ paneDragging: false });
 
         if (onMoveEnd && viewChanged(prevTransform.current, event.transform)) {
           const flowTransform = eventToFlowTransform(event.transform);

packages/core/src/store/initialState.ts

@@ -30,6 +30,7 @@ const initialState: ReactFlowStore = {
   connectionPosition: { x: 0, y: 0 },
   connectionMode: ConnectionMode.Strict,
   domNode: null,
+  paneDragging: false,
 
   snapGrid: [15, 15],
   snapToGrid: false,

packages/core/src/styles/base.css

@@ -0,0 +1,25 @@
+/* these are very simple styles so that it doesnt look broken */
+@import './init.css';
+
+.react-flow__handle {
+  background-color: #333;
+}
+
+.react-flow__node {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #bbb;
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    border: 1px solid #555;
+  }
+}
+
+.react-flow__nodesselection-rect,
+.react-flow__selection {
+  background: rgba(150, 150, 180, 0.1);
+  border: 1px dotted rgba(155, 155, 155, 0.8);
+}

packages/core/src/styles/init.css

@@ -0,0 +1,216 @@
+/* these are the necessary styles for React Flow */
+.react-flow__container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.react-flow__pane {
+  z-index: 1;
+  cursor: grab;
+
+  &.dragging {
+    cursor: grabbing;
+  }
+}
+
+.react-flow__viewport {
+  transform-origin: 0 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.react-flow__renderer {
+  z-index: 4;
+}
+
+.react-flow__selectionpane {
+  z-index: 5;
+}
+
+.react-flow__nodesselection-rect:focus,
+.react-flow__nodesselection-rect:focus-visible {
+  outline: none;
+}
+
+.react-flow .react-flow__edges {
+  pointer-events: none;
+  overflow: visible;
+}
+
+.react-flow__edge-path,
+.react-flow__connection-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+}
+
+.react-flow__edge {
+  pointer-events: visibleStroke;
+  cursor: pointer;
+
+  &.animated path {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+
+  &.inactive {
+    pointer-events: none;
+  }
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
+  &.selected .react-flow__edge-path,
+  &:focus .react-flow__edge-path,
+  &:focus-visible .react-flow__edge-path {
+    stroke: #555;
+  }
+
+  &-textwrapper {
+    pointer-events: all;
+  }
+
+  &-textbg {
+    fill: white;
+  }
+
+  .react-flow__edge-text {
+    pointer-events: none;
+    user-select: none;
+  }
+}
+
+.react-flow__connection {
+  pointer-events: none;
+
+  &.animated {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+}
+
+.react-flow__connectionline {
+  z-index: 1001;
+}
+
+.react-flow__nodes {
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
+.react-flow__node {
+  position: absolute;
+  user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  background-color: white;
+  cursor: grab;
+
+  &.dragging {
+    cursor: grabbing;
+  }
+}
+
+.react-flow__nodesselection {
+  z-index: 3;
+  transform-origin: left top;
+  pointer-events: none;
+
+  &-rect {
+    position: absolute;
+    pointer-events: all;
+    cursor: grab;
+  }
+}
+
+.react-flow__handle {
+  position: absolute;
+  pointer-events: none;
+  min-width: 5px;
+  min-height: 5px;
+
+  &.connectable {
+    pointer-events: all;
+  }
+
+  &-bottom {
+    top: auto;
+    left: 50%;
+    bottom: -4px;
+    transform: translate(-50%, 0);
+  }
+
+  &-top {
+    left: 50%;
+    top: -4px;
+    transform: translate(-50%, 0);
+  }
+
+  &-left {
+    top: 50%;
+    left: -4px;
+    transform: translate(0, -50%);
+  }
+
+  &-right {
+    right: -4px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+}
+
+.react-flow__edgeupdater {
+  cursor: move;
+  pointer-events: all;
+}
+
+.react-flow__panel {
+  position: absolute;
+  z-index: 1000;
+  margin: 15px;
+
+  &.top {
+    top: 0;
+  }
+
+  &.bottom {
+    bottom: 0;
+  }
+
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  &.center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.react-flow__attribution {
+  font-size: 10px;
+  background: rgba(255, 255, 255, 0.5);
+  padding: 2px 3px;
+  margin: 0;
+
+  a {
+    text-decoration: none;
+    color: #999;
+  }
+}
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}

packages/core/src/styles/style.css

@@ -0,0 +1,66 @@
+@import './init.css';
+
+.react-flow__edge {
+  &.updating {
+    .react-flow__edge-path {
+      stroke: #777;
+    }
+  }
+
+  &-text {
+    font-size: 10px;
+  }
+}
+
+.react-flow__node {
+  padding: 10px;
+  border-radius: 3px;
+  width: 150px;
+  font-size: 12px;
+  color: #222;
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #1a192b;
+
+  &.selectable {
+    &:hover {
+      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+    }
+
+    &.selected,
+    &:focus,
+    &:focus-visible {
+      box-shadow: 0 0 0 0.5px #1a192b;
+      outline: none;
+    }
+  }
+
+  &-group {
+    background: rgba(240, 240, 240, 0.25);
+    border-color: #1a192b;
+  }
+}
+
+.react-flow__nodesselection-rect,
+.react-flow__selection {
+  background: rgba(0, 89, 220, 0.08);
+  border: 1px dotted rgba(0, 89, 220, 0.8);
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.react-flow__handle {
+  width: 6px;
+  height: 6px;
+  background: #1a192b;
+  border: 1px solid white;
+  border-radius: 100%;
+
+  &.connectable {
+    cursor: crosshair;
+  }
+}

packages/core/src/styles/theme-default.css

@@ -1,83 +0,0 @@
-.react-flow__edge {
-  &.updating {
-    .react-flow__edge-path {
-      stroke: #777;
-    }
-  }
-}
-
-.react-flow__edge-text {
-  font-size: 10px;
-}
-
-.react-flow__node-default,
-.react-flow__node-input,
-.react-flow__node-output,
-.react-flow__node-group {
-  padding: 10px;
-  border-radius: 3px;
-  width: 150px;
-  font-size: 12px;
-  color: #222;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #1a192b;
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    border: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
-    outline: none;
-  }
-
-  .react-flow__handle {
-    background: #1a192b;
-  }
-}
-
-.react-flow__node-default.selectable,
-.react-flow__node-input.selectable,
-.react-flow__node-output.selectable,
-.react-flow__node-group.selectable {
-  &:hover {
-    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-  }
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    border: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
-    outline: none;
-  }
-}
-
-.react-flow__node-group {
-  background: rgba(240, 240, 240, 0.25);
-  border-color: #1a192b;
-}
-
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(0, 89, 220, 0.08);
-  border: 1px dotted rgba(0, 89, 220, 0.8);
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.react-flow__handle {
-  width: 6px;
-  height: 6px;
-  background: #555;
-  border: 1px solid white;
-  border-radius: 100%;
-
-  &.connectable {
-    cursor: crosshair;
-  }
-}

packages/core/src/types/general.ts

@@ -137,6 +137,7 @@ export type ReactFlowStore = {
   hasDefaultNodes: boolean;
   hasDefaultEdges: boolean;
   domNode: HTMLDivElement | null;
+  paneDragging: boolean;
 
   d3Zoom: ZoomBehavior<Element, unknown> | null;
   d3Selection: D3Selection<Element, unknown, null, undefined> | null;

packages/css-utils/package.json

@@ -1,8 +0,0 @@
-{
-  "name": "@react-flow/css-utils",
-  "version": "11.0.0",
-  "description": "Utils for handling styles.",
-  "main": "dist/react-flow-css-utils.cjs.js",
-  "module": "dist/react-flow-css-utils.esm.js",
-  "license": "MIT"
-}

packages/css-utils/src/index.ts

@@ -1,10 +0,0 @@
-export function injectStyle(css: string) {
-  if (typeof document === 'undefined') return;
-
-  const head = document.head || document.getElementsByTagName('head')[0];
-  const style = document.createElement('style');
-
-  head.prepend(style);
-
-  style.appendChild(document.createTextNode(css));
-}

packages/minimap/README.md

@@ -0,0 +1,10 @@
+# @react-flow/minimap
+
+Mini map component for React Flow.
+
+## Installation 
+
+```sh 
+npm install @react-flow/minimap
+```
+

packages/minimap/package.json

@@ -5,14 +5,24 @@
   "main": "dist/react-flow-minimap.cjs.js",
   "module": "dist/react-flow-minimap.esm.js",
   "license": "MIT",
+  "scripts": {
+    "build": "postcss src/*.css --config ../../postcss.config.json --dir dist"
+  },
   "dependencies": {
     "@react-flow/core": "^11.0.0",
-    "@react-flow/css-utils": "^11.0.0",
     "classcat": "^5.0.3",
     "zustand": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.16",
+    "postcss-cli": "^10.0.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-import": "^14.1.0",
+    "postcss-nested": "^5.0.6"
   }
 }

packages/minimap/src/MiniMap.tsx

@@ -2,22 +2,11 @@
 import { memo, useId } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
-import {
+import { useStore, getRectOfNodes, ReactFlowState, Rect, Panel, getBoundsOfRects } from '@react-flow/core';
-  useStore,
-  getRectOfNodes,
-  ReactFlowState,
-  Rect,
-  Panel,
-  getBoundsOfRects,
-} from '@react-flow/core';
-import { injectStyle } from '@react-flow/css-utils';
 
 import MiniMapNode from './MiniMapNode';
-import baseStyle from './style';
 import { MiniMapProps, GetMiniMapNodeAttribute } from './types';
 
-injectStyle(baseStyle);
-
 declare const window: any;
 
 const defaultWidth = 200;
@@ -35,15 +24,11 @@ const selector = (s: ReactFlowState) => {
   return {
     nodes: nodes.filter((node) => !node.hidden && node.width && node.height),
     viewBB,
-    boundingRect:
+    boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes), viewBB) : viewBB,
-      nodes.length > 0
-        ? getBoundsOfRects(getRectOfNodes(nodes), viewBB)
-        : viewBB,
   };
 };
 
-const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
+const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
-  func instanceof Function ? func : () => func;
 
 const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
 
@@ -75,18 +60,11 @@ function MiniMap({
   const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
   const width = viewWidth + offset * 2;
   const height = viewHeight + offset * 2;
-  const shapeRendering =
+  const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
-    typeof window === 'undefined' || !!window.chrome
-      ? 'crispEdges'
-      : 'geometricPrecision';
   const labelledBy = `${ARIA_LABEL_KEY}-${minimapId}`;
 
   return (
-    <Panel
+    <Panel position={position} style={style} className={cc(['react-flow__minimap', className])}>
-      position={position}
-      style={style}
-      className={cc(['react-flow__minimap', className])}
-    >
       <svg
         width={elementWidth}
         height={elementHeight}
@@ -115,12 +93,8 @@ function MiniMap({
         })}
         <path
           className="react-flow__minimap-mask"
-          d={`M${x - offset},${y - offset}h${width + offset * 2}v${
+          d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
-            height + offset * 2
+        M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
-          }h${-width - offset * 2}z
-        M${viewBB.x},${viewBB.y}h${viewBB.width}v${
-            viewBB.height
-          }h${-viewBB.width}z`}
           fill={maskColor}
           fillRule="evenodd"
         />

packages/minimap/src/style.css

@@ -1,6 +1,3 @@
-const style = `
 .react-flow__minimap {
   background-color: #fff;
-}`;
+}
-
-export default style;

packages/renderer/src/theme-default.css

@@ -1 +0,0 @@
-@import '@react-flow/core/dist/theme-default.css';

postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: [
     require('postcss-nested'),
+    require('postcss-combine-duplicated-selectors'),
     require('autoprefixer'),
     require('postcss-import'),
   ],

yarn.lock

@@ -2187,13 +2187,38 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@react-flow/bundle@11.0.0, @react-flow/bundle@workspace:packages/bundle":
+  version: 0.0.0-use.local
+  resolution: "@react-flow/bundle@workspace:packages/bundle"
+  dependencies:
+    "@react-flow/background": 11.0.0
+    "@react-flow/controls": 11.0.0
+    "@react-flow/core": 11.0.0
+    "@react-flow/minimap": 11.0.0
+    autoprefixer: ^10.4.8
+    postcss: ^8.4.14
+    postcss-cli: ^10.0.0
+    postcss-combine-duplicated-selectors: ^10.0.3
+    postcss-import: ^14.1.0
+    postcss-nested: ^5.0.6
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  languageName: unknown
+  linkType: soft
+
 "@react-flow/controls@11.0.0, @react-flow/controls@workspace:packages/controls":
   version: 0.0.0-use.local
   resolution: "@react-flow/controls@workspace:packages/controls"
   dependencies:
     "@react-flow/core": ^11.0.0
-    "@react-flow/css-utils": ^11.0.0
+    autoprefixer: ^10.4.8
     classcat: ^5.0.3
+    postcss: ^8.4.16
+    postcss-cli: ^10.0.0
+    postcss-combine-duplicated-selectors: ^10.0.3
+    postcss-import: ^14.1.0
+    postcss-nested: ^5.0.6
   peerDependencies:
     react: ">=18"
     react-dom: ">=18"
@@ -2205,7 +2230,6 @@ __metadata:
   resolution: "@react-flow/core@workspace:packages/core"
   dependencies:
     "@babel/runtime": ^7.18.0
-    "@react-flow/css-utils": ^11.0.0
     "@types/d3": ^7.4.0
     "@types/react": ^18.0.15
     autoprefixer: ^10.4.8
@@ -2215,6 +2239,7 @@ __metadata:
     d3-zoom: ^3.0.0
     postcss: ^8.4.14
     postcss-cli: ^10.0.0
+    postcss-combine-duplicated-selectors: ^10.0.3
     postcss-import: ^14.1.0
     postcss-nested: ^5.0.6
     zustand: ^4.0.0
@@ -2224,41 +2249,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-flow/css-utils@^11.0.0, @react-flow/css-utils@workspace:packages/css-utils":
-  version: 0.0.0-use.local
-  resolution: "@react-flow/css-utils@workspace:packages/css-utils"
-  languageName: unknown
-  linkType: soft
-
 "@react-flow/minimap@11.0.0, @react-flow/minimap@workspace:packages/minimap":
   version: 0.0.0-use.local
   resolution: "@react-flow/minimap@workspace:packages/minimap"
   dependencies:
     "@react-flow/core": ^11.0.0
-    "@react-flow/css-utils": ^11.0.0
-    classcat: ^5.0.3
-    zustand: ^4.0.0
-  peerDependencies:
-    react: ^18.1.0
-    react-dom: ">=18"
-  languageName: unknown
-  linkType: soft
-
-"@react-flow/renderer@workspace:packages/renderer":
-  version: 0.0.0-use.local
-  resolution: "@react-flow/renderer@workspace:packages/renderer"
-  dependencies:
-    "@react-flow/background": 11.0.0
-    "@react-flow/controls": 11.0.0
-    "@react-flow/core": 11.0.0
-    "@react-flow/minimap": 11.0.0
     autoprefixer: ^10.4.8
-    postcss: ^8.4.14
+    classcat: ^5.0.3
+    postcss: ^8.4.16
     postcss-cli: ^10.0.0
+    postcss-combine-duplicated-selectors: ^10.0.3
     postcss-import: ^14.1.0
     postcss-nested: ^5.0.6
+    zustand: ^4.0.0
   peerDependencies:
-    react: ^18.1.0
+    react: ">=18"
     react-dom: ">=18"
   languageName: unknown
   linkType: soft
@@ -7460,6 +7465,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-combine-duplicated-selectors@npm:^10.0.3":
+  version: 10.0.3
+  resolution: "postcss-combine-duplicated-selectors@npm:10.0.3"
+  dependencies:
+    postcss-selector-parser: ^6.0.4
+  peerDependencies:
+    postcss: ^8.1.0
+  checksum: 45c3dff41d0cddb510752ed92fe8c7fc66e5cf88f4988314655419d3ecdf1dc66f484a25ee73f4f292da5da851a0fdba0ec4d59bdedeee935d05b26d31d997ed
+  languageName: node
+  linkType: hard
+
 "postcss-custom-media@npm:^8.0.2":
   version: 8.0.2
   resolution: "postcss-custom-media@npm:8.0.2"
@@ -8050,10 +8066,7 @@ __metadata:
   resolution: "react-flow-examples@workspace:examples/nextjs"
   dependencies:
     "@preconstruct/next": ^4.0.0
-    "@react-flow/background": 11.0.0
+    "@react-flow/bundle": 11.0.0
-    "@react-flow/controls": 11.0.0
-    "@react-flow/core": 11.0.0
-    "@react-flow/minimap": 11.0.0
     "@types/dagre": ^0.7.47
     dagre: ^0.8.5
     eslint: 8.19.0
@@ -8062,6 +8075,7 @@ __metadata:
     next: 12.2.2
     postcss: ^8.4.16
     postcss-flexbugs-fixes: ^5.0.2
+    postcss-import: ^14.1.0
     postcss-nested: ^5.0.6
     postcss-preset-env: ^7.7.2
     react: 18.2.0
@@ -8088,6 +8102,7 @@ __metadata:
     eslint-plugin-prettier: ^4.2.1
     eslint-plugin-react: latest
     postcss: ^8.4.16
+    postcss-combine-duplicated-selectors: ^10.0.3
     postcss-import: ^14.1.0
     postcss-nested: ^5.0.6
     prettier: ^2.7.1