a

client/src/compilers/web.ts

@@ -6,7 +6,6 @@ interface CompileOptions {
   visualElements: VisualElement[];
   activeFile?: ProjectFile;
   projectName: string;
-  blockGeneratedCode?: string;
 }
 
 export function compileWeb(options: CompileOptions): string {
@@ -23,7 +22,7 @@ export function compileWeb(options: CompileOptions): string {
     case 'css':
       return activeFile.content || '/* Styles */\n';
     case 'js':
-      return options.blockGeneratedCode || activeFile.content || '// JavaScript\n';
+      return activeFile.content || '// JavaScript\n';
     default:
       return activeFile.content || '';
   }
@@ -88,7 +87,7 @@ export function compileElectron(options: CompileOptions): string {
 
   switch (activeFile.type) {
     case 'typescript':
-      return options.blockGeneratedCode || activeFile.content || generateDefaultElectronMain(options);
+      return activeFile.content || generateDefaultElectronMain(options);
     case 'html':
       return activeFile.content || generateDefaultHTML(options);
     case 'css':
@@ -199,7 +198,7 @@ export function compileNodeJS(options: CompileOptions): string {
 
   switch (activeFile.type) {
     case 'js':
-      return options.blockGeneratedCode || activeFile.content || generateDefaultExpress(options);
+      return activeFile.content || generateDefaultExpress(options);
     case 'json':
       return activeFile.content || generateDefaultPackageJson(options);
     case 'env':

client/src/components/BlockEditor/BlockEditor.tsx

@@ -293,10 +293,15 @@ export default function BlockEditor() {
   const workspaceRef = useRef<Blockly.WorkspaceSvg | null>(null);
   const { currentProject } = useProjectStore();
   const framework = currentProject?.framework || 'web';
+  const activeFileId = useEditorStore((s) => s.activeFileId);
+  const getBlocksXml = useEditorStore((s) => s.getBlocksXml);
+  const setBlocksXml = useEditorStore((s) => s.setBlocksXml);
+  const saveGeneratedCodeToFile = useEditorStore((s) => s.saveGeneratedCodeToFile);
 
   // Initialize Blockly workspace
   useEffect(() => {
     if (!blocklyDiv.current) return;
+    if (!activeFileId) return;
 
     // Register all blocks for the current framework
     const blocks = getBlocksForFramework(framework as any);
@@ -337,15 +342,15 @@ export default function BlockEditor() {
       },
       trashcan: true,
 
-      renderer: 'zelos', // Blockly's Scratch-like renderer
+      renderer: 'zelos',
       theme: Blockly.Themes.Zelos,
       sounds: false,
     });
 
     workspaceRef.current = ws;
 
-    // Restore saved blocks
-    const savedXml = useEditorStore.getState().blocksXml;
+    // Restore saved blocks for this specific file
+    const savedXml = getBlocksXml(activeFileId);
     if (savedXml) {
       try {
         const dom = Blockly.utils.xml.textToDom(savedXml);
@@ -355,16 +360,19 @@ export default function BlockEditor() {
       }
     }
 
-    // Auto-save blocks on change
+    // Auto-save blocks on change - per-file
     const saveBlocks = () => {
       const dom = Blockly.Xml.workspaceToDom(ws);
       const xml = Blockly.Xml.domToText(dom);
-      useEditorStore.getState().setBlocksXml(xml);
-      try {
-        const code = javascriptGenerator.workspaceToCode(ws);
-        useEditorStore.getState().setBlockGeneratedCode(code || '');
-      } catch (e) {
-        // code generation failed
+      const currentFileId = useEditorStore.getState().activeFileId;
+      if (currentFileId) {
+        setBlocksXml(currentFileId, xml);
+        try {
+          const code = javascriptGenerator.workspaceToCode(ws);
+          saveGeneratedCodeToFile(currentFileId, code || '');
+        } catch (e) {
+          // code generation failed
+        }
       }
     };
     ws.addChangeListener(saveBlocks);
@@ -374,18 +382,7 @@ export default function BlockEditor() {
       ws.dispose();
       workspaceRef.current = null;
     };
-  }, [framework]);
-
-  // Generate code from workspace
-  const generateCode = useCallback(() => {
-    if (!workspaceRef.current) return '';
-    return javascriptGenerator.workspaceToCode(workspaceRef.current);
-  }, []);
-
-  // Expose code generator to window for debugging
-  useEffect(() => {
-    (window as any).generateBlocksCode = generateCode;
-  }, [generateCode]);
+  }, [framework, activeFileId]);
 
   const fitView = useCallback(() => {
     if (workspaceRef.current) {
@@ -400,6 +397,14 @@ export default function BlockEditor() {
     }
   }, []);
 
+  if (!activeFileId) {
+    return (
+      <div className="flex items-center justify-center h-full bg-[#1a1f2e] text-surface-400 text-sm">
+        Select a file to edit its blocks
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col h-full bg-[#1a1f2e]">
       {/* Toolbar */}

client/src/components/CodeView/CodeView.tsx

@@ -8,7 +8,7 @@ import { compileMaui } from '../../compilers/maui';
 import { compileNodeJS } from '../../compilers/nodejs';
 import { SyntaxHighlight } from './SyntaxHighlight';
 import {
-  Download, Copy, Check, FileCode, RefreshCw,
+  Download, Copy, FileCode,
   Eye, Code2, SplitSquareHorizontal
 } from 'lucide-react';
 import { saveAs } from 'file-saver';
@@ -16,18 +16,15 @@ import JSZip from 'jszip';
 
 export default function CodeView() {
   const { currentProject } = useProjectStore();
-  const { activeFileId, fileTree, viewMode, setViewMode, visualElements, blockGeneratedCode } = useEditorStore();
+  const { activeFileId, fileTree, viewMode, setViewMode, visualElements } = useEditorStore();
 
   const compiledCode = useMemo(() => {
     if (!currentProject) return '';
 
-    // If there's block-generated code, show it directly
-    if (blockGeneratedCode) {
-      return blockGeneratedCode;
-    }
+    // Show the active file's content directly (blocks compile to file content on change)
+    const activeFile = fileTree.find(f => f.id === activeFileId);
 
     const blocks = getBlocksForFramework(currentProject.framework);
-    const activeFile = fileTree.find(f => f.id === activeFileId);
 
     const compilerOptions = {
       blocks,
@@ -49,7 +46,7 @@ export default function CodeView() {
       default:
         return '// Select a framework to generate code';
     }
-  }, [currentProject, activeFileId, fileTree, visualElements, blockGeneratedCode]);
+  }, [currentProject, activeFileId, fileTree, visualElements]);
 
   const handleDownload = useCallback(async () => {
     if (!currentProject) return;

client/src/components/ProjectEditor/ProjectEditor.tsx

@@ -41,7 +41,7 @@ export default function ProjectEditor() {
     editorMode, setEditorMode, viewMode, setViewMode,
     activeFileId, setActiveFile, fileTree, setFileTree,
     visualElements, setVisualElements, snapToGrid, toggleSnapToGrid,
-    showMiniMap, toggleMiniMap, blocksXml, setBlocksXml
+    showMiniMap, toggleMiniMap, setBlocksXml
   } = useEditorStore();
   const [showSidebar, setShowSidebar] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -56,8 +56,12 @@ export default function ProjectEditor() {
       setVisualElements(
         currentProject.data.visual?.[activeFileId || ''] || []
       );
+      // Restore per-file blocksXml metadata
       if (currentProject.data.blocksXml) {
-        setBlocksXml(currentProject.data.blocksXml);
+        const xmlMap = currentProject.data.blocksXml;
+        Object.entries(xmlMap).forEach(([fid, xml]) => {
+          setBlocksXml(fid, xml);
+        });
       }
       if (!activeFileId && currentProject.data.files?.length > 0) {
         const firstFile = currentProject.data.files[0];
@@ -71,6 +75,15 @@ export default function ProjectEditor() {
     }
   }, [currentProject, setFileTree, setVisualElements, setActiveFile, activeFileId, setEditorMode, setBlocksXml]);
 
+  // When activeFileId changes, load visual elements for that file
+  useEffect(() => {
+    if (currentProject?.data && activeFileId) {
+      setVisualElements(
+        currentProject.data.visual?.[activeFileId] || []
+      );
+    }
+  }, [activeFileId, currentProject, setVisualElements]);
+
   const activeFile = useMemo(
     () => (activeFileId ? findFileById(fileTree, activeFileId) : null),
     [activeFileId, fileTree]
@@ -112,6 +125,7 @@ export default function ProjectEditor() {
     if (!currentProject || !id) return;
     setSaving(true);
     try {
+      const { blocksXml: currentBlocksXml } = useEditorStore.getState();
       const data = {
         ...currentProject.data,
         files: fileTree,
@@ -119,13 +133,13 @@ export default function ProjectEditor() {
           ...currentProject.data.visual,
           [activeFileId || '']: visualElements,
         },
-        blocksXml: blocksXml || undefined,
+        blocksXml: currentBlocksXml,
       };
       await updateProject(id, { data });
     } finally {
       setSaving(false);
     }
-  }, [currentProject, id, fileTree, visualElements, activeFileId, updateProject, blocksXml]);
+  }, [currentProject, id, fileTree, visualElements, activeFileId, updateProject]);
 
   useEffect(() => {
     const interval = setInterval(() => {

client/src/store/editorStore.ts

@@ -1,5 +1,4 @@
 import { create } from 'zustand';
-import { FrameworkType } from '../types';
 import { ProjectFile, VisualElement } from '../types/blocks';
 
 type EditorMode = 'blocks' | 'visual' | 'code' | 'files';
@@ -17,8 +16,7 @@ interface EditorStore {
   showMiniMap: boolean;
   visualElements: VisualElement[];
   fileTree: ProjectFile[];
-  blocksXml: string;
-  blockGeneratedCode: string;
+  blocksXml: Record<string, string>;
 
   setActiveFile: (fileId: string | null) => void;
   setActiveFileContent: (content: string) => void;
@@ -37,8 +35,9 @@ interface EditorStore {
   addFile: (file: ProjectFile, parentId?: string) => void;
   removeFile: (id: string) => void;
   updateFile: (id: string, updates: Partial<ProjectFile>) => void;
-  setBlocksXml: (xml: string) => void;
-  setBlockGeneratedCode: (code: string) => void;
+  getBlocksXml: (fileId: string) => string;
+  setBlocksXml: (fileId: string, xml: string) => void;
+  saveGeneratedCodeToFile: (fileId: string, code: string) => void;
 }
 
 export const useEditorStore = create<EditorStore>((set, get) => ({
@@ -53,10 +52,21 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
   showMiniMap: true,
   visualElements: [],
   fileTree: [],
-  blocksXml: '',
-  blockGeneratedCode: '',
+  blocksXml: {},
 
-  setActiveFile: (fileId) => set({ activeFileId: fileId }),
+  setActiveFile: (fileId) => {
+    const state = get();
+    if (fileId && fileId !== state.activeFileId) {
+      const file = findFileById(state.fileTree, fileId);
+      set({
+        activeFileId: fileId,
+        activeFileContent: file?.content || '',
+        visualElements: [],
+      });
+    } else {
+      set({ activeFileId: fileId });
+    }
+  },
   setActiveFileContent: (content) => set({ activeFileContent: content }),
   setEditorMode: (mode) => set({ editorMode: mode }),
   setViewMode: (mode) => set({ viewMode: mode }),
@@ -138,8 +148,27 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
         activeFileId: state.activeFileId === id ? null : state.activeFileId,
       };
     }),
-  setBlocksXml: (xml) => set({ blocksXml: xml }),
-  setBlockGeneratedCode: (code) => set({ blockGeneratedCode: code }),
+  getBlocksXml: (fileId: string) => {
+    return get().blocksXml[fileId] || '';
+  },
+  setBlocksXml: (fileId: string, xml: string) =>
+    set((state) => ({
+      blocksXml: { ...state.blocksXml, [fileId]: xml },
+    })),
+  saveGeneratedCodeToFile: (fileId: string, code: string) =>
+    set((state) => {
+      const files = state.fileTree || [];
+      const updateRecursive = (entries: ProjectFile[]): ProjectFile[] =>
+        (entries || []).map((f) => {
+          if (f.id === fileId) return { ...f, content: code };
+          if (f.children) return { ...f, children: updateRecursive(f.children) };
+          return f;
+        });
+      return {
+        fileTree: updateRecursive(files),
+        activeFileContent: fileId === state.activeFileId ? code : state.activeFileContent,
+      };
+    }),
   updateFile: (id, updates) =>
     set((state) => {
       const files = state.fileTree || [];
@@ -152,3 +181,14 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
       return { fileTree: updateRecursive(files) };
     }),
 }));
+
+function findFileById(files: ProjectFile[], id: string): ProjectFile | null {
+  for (const f of files) {
+    if (f.id === id) return f;
+    if (f.children) {
+      const found = findFileById(f.children, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}

client/src/types/index.ts

@@ -39,7 +39,7 @@ export interface ProjectData {
   files: ProjectFile[];
   blocks: Record<string, BlockNode[]>;
   visual: Record<string, VisualElement[]>;
-  blocksXml?: string;
+  blocksXml: Record<string, string>;
 }
 
 export interface ProjectFile {

server/src/routes/projects.ts

@@ -191,6 +191,7 @@ function getDefaultProjectData(framework: string): any {
     files: [] as any[],
     blocks: {} as Record<string, any>,
     visual: {} as Record<string, any>,
+    blocksXml: {} as Record<string, string>,
   };
 
   switch (framework) {