@og-mcp/reactflow-mcp 1.0.4 → 1.0.6

package/dist/data/templates.js

@@ -2,133 +2,133 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TEMPLATES = void 0;
 exports.TEMPLATES = {
-    "custom-node": `import { memo } from 'react';
-import { Handle, Position, NodeToolbar, type NodeProps, type Node } from '@xyflow/react';
-
-type CustomNodeData = {
-  label: string;
-  description?: string;
-  icon?: string;
-  status?: 'active' | 'inactive' | 'error';
-};
-
-type CustomNodeType = Node<CustomNodeData, 'custom'>;
-
-const CustomNode = memo(({ data, selected }: NodeProps<CustomNodeType>) => {
-  const statusColor = {
-    active: 'bg-green-500',
-    inactive: 'bg-gray-400',
-    error: 'bg-red-500',
-  }[data.status ?? 'inactive'];
-
-  return (
-    <>
-      <NodeToolbar isVisible={selected} position={Position.Top}>
-        <button className="px-2 py-1 text-xs bg-white border rounded shadow">Edit</button>
-        <button className="px-2 py-1 text-xs bg-red-50 border border-red-200 rounded shadow ml-1">Delete</button>
-      </NodeToolbar>
-
-      <Handle type="target" position={Position.Left} />
-
-      <div className={\`px-4 py-3 rounded-lg border shadow-sm bg-white \${selected ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-200'}\`}>
-        <div className="flex items-center gap-2">
-          <div className={\`w-2 h-2 rounded-full \${statusColor}\`} />
-          <span className="font-medium text-sm">{data.label}</span>
-        </div>
-        {data.description && (
-          <p className="text-xs text-gray-500 mt-1">{data.description}</p>
-        )}
-      </div>
-
-      <Handle type="source" position={Position.Right} />
-    </>
-  );
-});
-
-CustomNode.displayName = 'CustomNode';
+    "custom-node": `import { memo } from 'react';
+import { Handle, Position, NodeToolbar, type NodeProps, type Node } from '@xyflow/react';
+
+type CustomNodeData = {
+  label: string;
+  description?: string;
+  icon?: string;
+  status?: 'active' | 'inactive' | 'error';
+};
+
+type CustomNodeType = Node<CustomNodeData, 'custom'>;
+
+const CustomNode = memo(({ data, selected }: NodeProps<CustomNodeType>) => {
+  const statusColor = {
+    active: 'bg-green-500',
+    inactive: 'bg-gray-400',
+    error: 'bg-red-500',
+  }[data.status ?? 'inactive'];
+
+  return (
+    <>
+      <NodeToolbar isVisible={selected} position={Position.Top}>
+        <button className="px-2 py-1 text-xs bg-white border rounded shadow">Edit</button>
+        <button className="px-2 py-1 text-xs bg-red-50 border border-red-200 rounded shadow ml-1">Delete</button>
+      </NodeToolbar>
+
+      <Handle type="target" position={Position.Left} />
+
+      <div className={\`px-4 py-3 rounded-lg border shadow-sm bg-white \${selected ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-200'}\`}>
+        <div className="flex items-center gap-2">
+          <div className={\`w-2 h-2 rounded-full \${statusColor}\`} />
+          <span className="font-medium text-sm">{data.label}</span>
+        </div>
+        {data.description && (
+          <p className="text-xs text-gray-500 mt-1">{data.description}</p>
+        )}
+      </div>
+
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+});
+
+CustomNode.displayName = 'CustomNode';
 export default CustomNode;`,
-    "custom-edge": `import { BaseEdge, EdgeLabelRenderer, getBezierPath, useReactFlow, type EdgeProps } from '@xyflow/react';
-
-export default function CustomEdge({
-  id, sourceX, sourceY, targetX, targetY,
-  sourcePosition, targetPosition, style, markerEnd, selected,
-}: EdgeProps) {
-  const [edgePath, labelX, labelY] = getBezierPath({
-    sourceX, sourceY, targetX, targetY,
-    sourcePosition, targetPosition,
-  });
-  const { setEdges } = useReactFlow();
-
-  return (
-    <>
-      <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
-      {selected && (
-        <EdgeLabelRenderer>
-          <div
-            style={{
-              position: 'absolute',
-              transform: \`translate(-50%, -50%) translate(\${labelX}px,\${labelY}px)\`,
-              pointerEvents: 'all',
-            }}
-            className="nodrag nopan"
-          >
-            <button
-              className="w-5 h-5 rounded-full bg-red-500 text-white text-xs flex items-center justify-center hover:bg-red-600"
-              onClick={() => setEdges((es) => es.filter((e) => e.id !== id))}
-            >
-              x
-            </button>
-          </div>
-        </EdgeLabelRenderer>
-      )}
-    </>
-  );
+    "custom-edge": `import { BaseEdge, EdgeLabelRenderer, getBezierPath, useReactFlow, type EdgeProps } from '@xyflow/react';
+
+export default function CustomEdge({
+  id, sourceX, sourceY, targetX, targetY,
+  sourcePosition, targetPosition, style, markerEnd, selected,
+}: EdgeProps) {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX, sourceY, targetX, targetY,
+    sourcePosition, targetPosition,
+  });
+  const { setEdges } = useReactFlow();
+
+  return (
+    <>
+      <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
+      {selected && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: 'absolute',
+              transform: \`translate(-50%, -50%) translate(\${labelX}px,\${labelY}px)\`,
+              pointerEvents: 'all',
+            }}
+            className="nodrag nopan"
+          >
+            <button
+              className="w-5 h-5 rounded-full bg-red-500 text-white text-xs flex items-center justify-center hover:bg-red-600"
+              onClick={() => setEdges((es) => es.filter((e) => e.id !== id))}
+            >
+              x
+            </button>
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
 }`,
-    "zustand-store": `import { create } from 'zustand';
-import {
-  type Node, type Edge, type OnNodesChange, type OnEdgesChange, type OnConnect,
-  applyNodeChanges, applyEdgeChanges, addEdge,
-} from '@xyflow/react';
-
-export type FlowState = {
-  nodes: Node[];
-  edges: Edge[];
-  onNodesChange: OnNodesChange;
-  onEdgesChange: OnEdgesChange;
-  onConnect: OnConnect;
-  setNodes: (nodes: Node[]) => void;
-  setEdges: (edges: Edge[]) => void;
-  addNode: (node: Node) => void;
-  removeNode: (id: string) => void;
-  updateNodeData: (id: string, data: Partial<Record<string, unknown>>) => void;
-};
-
-const useFlowStore = create<FlowState>((set, get) => ({
-  nodes: [],
-  edges: [],
-  onNodesChange: (changes) => set({ nodes: applyNodeChanges(changes, get().nodes) }),
-  onEdgesChange: (changes) => set({ edges: applyEdgeChanges(changes, get().edges) }),
-  onConnect: (connection) => set({ edges: addEdge(connection, get().edges) }),
-  setNodes: (nodes) => set({ nodes }),
-  setEdges: (edges) => set({ edges }),
-  addNode: (node) => set({ nodes: [...get().nodes, node] }),
-  removeNode: (id) => set({
-    nodes: get().nodes.filter((n) => n.id !== id),
-    edges: get().edges.filter((e) => e.source !== id && e.target !== id),
-  }),
-  updateNodeData: (id, data) => set({
-    nodes: get().nodes.map((n) => n.id === id ? { ...n, data: { ...n.data, ...data } } : n),
-  }),
-}));
-
-// Stable selector — use to prevent re-renders
-export const flowSelector = (s: FlowState) => ({
-  nodes: s.nodes,
-  edges: s.edges,
-  onNodesChange: s.onNodesChange,
-  onEdgesChange: s.onEdgesChange,
-  onConnect: s.onConnect,
-});
-
+    "zustand-store": `import { create } from 'zustand';
+import {
+  type Node, type Edge, type OnNodesChange, type OnEdgesChange, type OnConnect,
+  applyNodeChanges, applyEdgeChanges, addEdge,
+} from '@xyflow/react';
+
+export type FlowState = {
+  nodes: Node[];
+  edges: Edge[];
+  onNodesChange: OnNodesChange;
+  onEdgesChange: OnEdgesChange;
+  onConnect: OnConnect;
+  setNodes: (nodes: Node[]) => void;
+  setEdges: (edges: Edge[]) => void;
+  addNode: (node: Node) => void;
+  removeNode: (id: string) => void;
+  updateNodeData: (id: string, data: Partial<Record<string, unknown>>) => void;
+};
+
+const useFlowStore = create<FlowState>((set, get) => ({
+  nodes: [],
+  edges: [],
+  onNodesChange: (changes) => set({ nodes: applyNodeChanges(changes, get().nodes) }),
+  onEdgesChange: (changes) => set({ edges: applyEdgeChanges(changes, get().edges) }),
+  onConnect: (connection) => set({ edges: addEdge(connection, get().edges) }),
+  setNodes: (nodes) => set({ nodes }),
+  setEdges: (edges) => set({ edges }),
+  addNode: (node) => set({ nodes: [...get().nodes, node] }),
+  removeNode: (id) => set({
+    nodes: get().nodes.filter((n) => n.id !== id),
+    edges: get().edges.filter((e) => e.source !== id && e.target !== id),
+  }),
+  updateNodeData: (id, data) => set({
+    nodes: get().nodes.map((n) => n.id === id ? { ...n, data: { ...n.data, ...data } } : n),
+  }),
+}));
+
+// Stable selector — use to prevent re-renders
+export const flowSelector = (s: FlowState) => ({
+  nodes: s.nodes,
+  edges: s.edges,
+  onNodesChange: s.onNodesChange,
+  onEdgesChange: s.onEdgesChange,
+  onConnect: s.onConnect,
+});
+
 export default useFlowStore;`,
 };

package/dist/data/utilities.js

@@ -7,9 +7,9 @@ const addEdgeUtil = {
     description: "Convenience function to add a new edge to an array. Validates and prevents duplicates.",
     importPath: "import { addEdge } from '@xyflow/react'",
     returns: "Edge[]",
-    usage: `const onConnect = useCallback(
-  (connection) => setEdges((eds) => addEdge(connection, eds)),
-  [setEdges],
+    usage: `const onConnect = useCallback(
+  (connection) => setEdges((eds) => addEdge(connection, eds)),
+  [setEdges],
 );`,
     examples: [],
     relatedApis: ["ReactFlow", "useEdgesState"],
@@ -20,8 +20,8 @@ const applyNodeChangesUtil = {
     description: "Apply an array of NodeChange objects to your nodes array. Used in Zustand stores for controlled flows.",
     importPath: "import { applyNodeChanges } from '@xyflow/react'",
     returns: "Node[]",
-    usage: `onNodesChange: (changes) => {
-  set({ nodes: applyNodeChanges(changes, get().nodes) });
+    usage: `onNodesChange: (changes) => {
+  set({ nodes: applyNodeChanges(changes, get().nodes) });
 },`,
     examples: [],
     relatedApis: ["applyEdgeChanges", "useNodesState"],
@@ -32,8 +32,8 @@ const applyEdgeChangesUtil = {
     description: "Apply an array of EdgeChange objects to your edges array. Used in Zustand stores for controlled flows.",
     importPath: "import { applyEdgeChanges } from '@xyflow/react'",
     returns: "Edge[]",
-    usage: `onEdgesChange: (changes) => {
-  set({ edges: applyEdgeChanges(changes, get().edges) });
+    usage: `onEdgesChange: (changes) => {
+  set({ edges: applyEdgeChanges(changes, get().edges) });
 },`,
     examples: [],
     relatedApis: ["applyNodeChanges", "useEdgesState"],
@@ -44,10 +44,10 @@ const getBezierPathUtil = {
     description: "Returns SVG path string and label position for a bezier edge between two points.",
     importPath: "import { getBezierPath } from '@xyflow/react'",
     returns: "[path: string, labelX: number, labelY: number, offsetX: number, offsetY: number]",
-    usage: `const [edgePath, labelX, labelY] = getBezierPath({
-  sourceX, sourceY, targetX, targetY,
-  sourcePosition, targetPosition,
-  curvature: 0.25, // optional
+    usage: `const [edgePath, labelX, labelY] = getBezierPath({
+  sourceX, sourceY, targetX, targetY,
+  sourcePosition, targetPosition,
+  curvature: 0.25, // optional
 });`,
     examples: [],
     relatedApis: ["getSmoothStepPath", "getStraightPath", "getSimpleBezierPath", "BaseEdge"],
@@ -58,11 +58,11 @@ const getSmoothStepPathUtil = {
     description: "Returns SVG path string for a stepped/rounded edge with configurable border radius.",
     importPath: "import { getSmoothStepPath } from '@xyflow/react'",
     returns: "[path, labelX, labelY, offsetX, offsetY]",
-    usage: `const [edgePath, labelX, labelY] = getSmoothStepPath({
-  sourceX, sourceY, targetX, targetY,
-  sourcePosition, targetPosition,
-  borderRadius: 8, // rounded corners
-  offset: 25, // step offset
+    usage: `const [edgePath, labelX, labelY] = getSmoothStepPath({
+  sourceX, sourceY, targetX, targetY,
+  sourcePosition, targetPosition,
+  borderRadius: 8, // rounded corners
+  offset: 25, // step offset
 });`,
     examples: [],
     relatedApis: ["getBezierPath", "getStraightPath"],
@@ -73,8 +73,8 @@ const getStraightPathUtil = {
     description: "Calculates a straight line path between two points.",
     importPath: "import { getStraightPath } from '@xyflow/react'",
     returns: "[path, labelX, labelY]",
-    usage: `const [edgePath, labelX, labelY] = getStraightPath({
-  sourceX, sourceY, targetX, targetY,
+    usage: `const [edgePath, labelX, labelY] = getStraightPath({
+  sourceX, sourceY, targetX, targetY,
 });`,
     examples: [],
     relatedApis: ["getBezierPath", "getSmoothStepPath"],
@@ -85,8 +85,8 @@ const getSimpleBezierPathUtil = {
     description: "Returns SVG path for a simple bezier curve (less pronounced curve than getBezierPath).",
     importPath: "import { getSimpleBezierPath } from '@xyflow/react'",
     returns: "[path, labelX, labelY, offsetX, offsetY]",
-    usage: `const [edgePath] = getSimpleBezierPath({
-  sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition,
+    usage: `const [edgePath] = getSimpleBezierPath({
+  sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition,
 });`,
     examples: [],
     relatedApis: ["getBezierPath"],
@@ -147,20 +147,20 @@ const reconnectEdgeUtil = {
     description: "Reconnect an existing edge with new source/target. Used in onReconnect handlers.",
     importPath: "import { reconnectEdge } from '@xyflow/react'",
     returns: "Edge[]",
-    usage: `const onReconnect = useCallback((oldEdge, newConnection) => {
-  setEdges((els) => reconnectEdge(oldEdge, newConnection, els));
+    usage: `const onReconnect = useCallback((oldEdge, newConnection) => {
+  setEdges((els) => reconnectEdge(oldEdge, newConnection, els));
 }, []);`,
     examples: [
         {
             title: "Edge reconnection",
             category: "connections",
-            code: `<ReactFlow
-  edgesReconnectable
-  onReconnect={(oldEdge, newConnection) =>
-    setEdges((els) => reconnectEdge(oldEdge, newConnection, els))
-  }
-  onReconnectStart={() => setIsReconnecting(true)}
-  onReconnectEnd={() => setIsReconnecting(false)}
+            code: `<ReactFlow
+  edgesReconnectable
+  onReconnect={(oldEdge, newConnection) =>
+    setEdges((els) => reconnectEdge(oldEdge, newConnection, els))
+  }
+  onReconnectStart={() => setIsReconnecting(true)}
+  onReconnectEnd={() => setIsReconnecting(false)}
 />`,
         },
     ],

package/dist/tools/cheatsheet.js

@@ -6,90 +6,90 @@ function register(server) {
         description: "React Flow v12 quick reference cheatsheet",
         mimeType: "text/markdown",
     }, async () => {
-        const text = `# React Flow v12 — Cheatsheet
-
-## Install & Import
-\`\`\`bash
-npm install @xyflow/react zustand
-\`\`\`
-\`\`\`tsx
-import { ReactFlow, Background, Controls, MiniMap, Handle, Position,
-  useReactFlow, useNodesState, useEdgesState, addEdge,
-  applyNodeChanges, applyEdgeChanges } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-\`\`\`
-
-## Minimal Flow
-\`\`\`tsx
-const nodes = [{ id: '1', position: { x: 0, y: 0 }, data: { label: 'Hello' } }];
-const edges = [{ id: 'e1-2', source: '1', target: '2' }];
-
-<div style={{ width: '100%', height: '100vh' }}>
-  <ReactFlow nodes={nodes} edges={edges} fitView>
-    <Background /> <Controls />
-  </ReactFlow>
-</div>
-\`\`\`
-
-## Custom Node
-\`\`\`tsx
-type MyNode = Node<{ label: string }, 'myNode'>;
-
-function MyNode({ data }: NodeProps<MyNode>) {
-  return (
-    <>
-      <Handle type="target" position={Position.Left} />
-      <div>{data.label}</div>
-      <Handle type="source" position={Position.Right} />
-    </>
-  );
-}
-const nodeTypes = { myNode: MyNode }; // define OUTSIDE component
-\`\`\`
-
-## Controlled Flow (Zustand)
-\`\`\`tsx
-const useStore = create((set, get) => ({
-  nodes: [], edges: [],
-  onNodesChange: (c) => set({ nodes: applyNodeChanges(c, get().nodes) }),
-  onEdgesChange: (c) => set({ edges: applyEdgeChanges(c, get().edges) }),
-  onConnect: (conn) => set({ edges: addEdge(conn, get().edges) }),
-}));
-\`\`\`
-
-## Key Hooks
-| Hook | Use |
-|------|-----|
-| \`useReactFlow()\` | Imperative API — getNodes, setNodes, fitView, screenToFlowPosition |
-| \`useNodesState()\` | Quick prototyping — [nodes, setNodes, onNodesChange] |
-| \`useNodesData(ids)\` | Subscribe to specific node data changes |
-| \`useConnection()\` | Active connection state during drag |
-| \`useNodesInitialized()\` | Wait for all nodes to be measured |
-
-## Node Types
-- \`"default"\` — both handles
-- \`"input"\` — source handle only
-- \`"output"\` — target handle only
-- \`"group"\` — container for sub-flows
-
-## Edge Types
-- \`"default"\` — bezier curve
-- \`"straight"\` — straight line
-- \`"step"\` — right-angle steps
-- \`"smoothstep"\` — rounded steps
-- \`"simplebezier"\` — simple curve
-
-## CSS Classes
-- \`nodrag\` — prevent drag on elements inside nodes
-- \`nopan\` — prevent pan when clicking element
-- \`nowheel\` — prevent zoom on scroll
-
-## v12 Key Changes (from v11)
-- Package: \`reactflow\` → \`@xyflow/react\`
-- Import: default → named exports
-- \`node.width\` → \`node.measured.width\`
-- \`project()\` → \`screenToFlowPosition()\`
-- \`onEdgeUpdate\` → \`onReconnect\`
+        const text = `# React Flow v12 — Cheatsheet
+
+## Install & Import
+\`\`\`bash
+npm install @xyflow/react zustand
+\`\`\`
+\`\`\`tsx
+import { ReactFlow, Background, Controls, MiniMap, Handle, Position,
+  useReactFlow, useNodesState, useEdgesState, addEdge,
+  applyNodeChanges, applyEdgeChanges } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+\`\`\`
+
+## Minimal Flow
+\`\`\`tsx
+const nodes = [{ id: '1', position: { x: 0, y: 0 }, data: { label: 'Hello' } }];
+const edges = [{ id: 'e1-2', source: '1', target: '2' }];
+
+<div style={{ width: '100%', height: '100vh' }}>
+  <ReactFlow nodes={nodes} edges={edges} fitView>
+    <Background /> <Controls />
+  </ReactFlow>
+</div>
+\`\`\`
+
+## Custom Node
+\`\`\`tsx
+type MyNode = Node<{ label: string }, 'myNode'>;
+
+function MyNode({ data }: NodeProps<MyNode>) {
+  return (
+    <>
+      <Handle type="target" position={Position.Left} />
+      <div>{data.label}</div>
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+}
+const nodeTypes = { myNode: MyNode }; // define OUTSIDE component
+\`\`\`
+
+## Controlled Flow (Zustand)
+\`\`\`tsx
+const useStore = create((set, get) => ({
+  nodes: [], edges: [],
+  onNodesChange: (c) => set({ nodes: applyNodeChanges(c, get().nodes) }),
+  onEdgesChange: (c) => set({ edges: applyEdgeChanges(c, get().edges) }),
+  onConnect: (conn) => set({ edges: addEdge(conn, get().edges) }),
+}));
+\`\`\`
+
+## Key Hooks
+| Hook | Use |
+|------|-----|
+| \`useReactFlow()\` | Imperative API — getNodes, setNodes, fitView, screenToFlowPosition |
+| \`useNodesState()\` | Quick prototyping — [nodes, setNodes, onNodesChange] |
+| \`useNodesData(ids)\` | Subscribe to specific node data changes |
+| \`useConnection()\` | Active connection state during drag |
+| \`useNodesInitialized()\` | Wait for all nodes to be measured |
+
+## Node Types
+- \`"default"\` — both handles
+- \`"input"\` — source handle only
+- \`"output"\` — target handle only
+- \`"group"\` — container for sub-flows
+
+## Edge Types
+- \`"default"\` — bezier curve
+- \`"straight"\` — straight line
+- \`"step"\` — right-angle steps
+- \`"smoothstep"\` — rounded steps
+- \`"simplebezier"\` — simple curve
+
+## CSS Classes
+- \`nodrag\` — prevent drag on elements inside nodes
+- \`nopan\` — prevent pan when clicking element
+- \`nowheel\` — prevent zoom on scroll
+
+## v12 Key Changes (from v11)
+- Package: \`reactflow\` → \`@xyflow/react\`
+- Import: default → named exports
+- \`node.width\` → \`node.measured.width\`
+- \`project()\` → \`screenToFlowPosition()\`
+- \`onEdgeUpdate\` → \`onReconnect\`
 `;
         return {
             contents: [