feat: [US-035] - Export project as .vnflow file

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/editor/[projectId]/FlowchartEditor.tsx

@@ -53,6 +53,7 @@ type ConditionEditorState = {
 
 type FlowchartEditorProps = {
   projectId: string
+  projectName: string
   initialData: FlowchartData
 }
 
@@ -145,7 +146,7 @@ function flowchartDataEquals(a: FlowchartData, b: FlowchartData): boolean {
 }
 
 // Inner component that uses useReactFlow hook
-function FlowchartEditorInner({ projectId, initialData }: FlowchartEditorProps) {
+function FlowchartEditorInner({ projectId, projectName, initialData }: FlowchartEditorProps) {
   // Define custom node types - memoized to prevent re-renders
   const nodeTypes: NodeTypes = useMemo(
     () => ({
@@ -351,8 +352,32 @@ function FlowchartEditorInner({ projectId, initialData }: FlowchartEditorProps)
   }, [isSaving, nodes, edges, projectId])
 
   const handleExport = useCallback(() => {
-    // TODO: Implement in US-035
-  }, [])
+    // Convert React Flow state to FlowchartData
+    const flowchartData: FlowchartData = {
+      nodes: fromReactFlowNodes(nodes),
+      edges: fromReactFlowEdges(edges),
+    }
+
+    // Create pretty-printed JSON
+    const jsonContent = JSON.stringify(flowchartData, null, 2)
+
+    // Create blob with JSON content
+    const blob = new Blob([jsonContent], { type: 'application/json' })
+
+    // Create download URL
+    const url = URL.createObjectURL(blob)
+
+    // Create temporary link element and trigger download
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${projectName}.vnflow`
+    document.body.appendChild(link)
+    link.click()
+
+    // Cleanup
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+  }, [nodes, edges, projectName])
 
   const handleImport = useCallback(() => {
     // TODO: Implement in US-036

src/app/editor/[projectId]/page.tsx

@@ -66,6 +66,7 @@ export default async function EditorPage({ params }: PageProps) {
       <div className="flex-1">
         <FlowchartEditor
           projectId={project.id}
+          projectName={project.name}
           initialData={flowchartData}
         />
       </div>