file saving

client/src/components/BlockEditor/BlockEditor.tsx

@@ -738,6 +738,14 @@ export default function BlockEditor() {
     ws.addChangeListener(saveBlocks);
 
     return () => {
+      // Save current blocks for the file before workspace is disposed
+      if (activeFileId) {
+        try {
+          const dom = Blockly.Xml.workspaceToDom(ws);
+          const xml = Blockly.Xml.domToText(dom);
+          setBlocksXml(activeFileId, xml);
+        } catch (e) {}
+      }
       ws.removeChangeListener(saveBlocks);
       ws.dispose();
       workspaceRef.current = null;

client/src/components/ProjectEditor/ProjectEditor.tsx

@@ -60,8 +60,9 @@ export default function ProjectEditor() {
     editorMode, setEditorMode, viewMode, setViewMode,
     activeFileId, setActiveFile, fileTree, setFileTree,
     visualElements, setVisualElements, setElementRegistry,
-    elementRegistry, snapToGrid, toggleSnapToGrid,
-    showMiniMap, toggleMiniMap, setBlocksXml
+    elementRegistry, blocksXml, blockCode, cssRules,
+    snapToGrid, toggleSnapToGrid,
+    showMiniMap, toggleMiniMap, setBlocksXml, setCssRules
   } = useEditorStore();
   const [showSidebar, setShowSidebar] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -111,6 +112,12 @@ export default function ProjectEditor() {
           setBlockCode(fid, code);
         });
       }
+      // Restore per-file CSS rules
+      if (currentProject.data.cssRules) {
+        Object.entries(currentProject.data.cssRules).forEach(([fid, rules]) => {
+          setCssRules(fid, rules as any[]);
+        });
+      }
       if (!activeFileId && currentProject.data.files?.length > 0) {
         const firstFile = currentProject.data.files[0];
         if (firstFile) {
@@ -122,7 +129,7 @@ export default function ProjectEditor() {
         }
       }
     }
-  }, [currentProject, setFileTree, setVisualElements, setActiveFile, activeFileId, setEditorMode, setBlocksXml, setElementRegistry]);
+  }, [currentProject, setFileTree, setVisualElements, setActiveFile, activeFileId, setEditorMode, setBlocksXml, setElementRegistry, setCssRules]);
 
   // When activeFileId changes, load visual elements from the registry
   useEffect(() => {
@@ -227,7 +234,7 @@ export default function ProjectEditor() {
     if (!currentProject || !id) return;
     setSaving(true);
     try {
-      const { blocksXml: currentBlocksXml, blockCode: currentBlockCode, elementRegistry: currentRegistry } = useEditorStore.getState();
+      const { blocksXml: currentBlocksXml, blockCode: currentBlockCode, elementRegistry: currentRegistry, cssRules: currentCssRules } = useEditorStore.getState();
 
       // Sync current visual elements into registry before saving
       const fullRegistry = { ...currentRegistry };
@@ -241,6 +248,7 @@ export default function ProjectEditor() {
         visual: fullRegistry,
         blocksXml: currentBlocksXml,
         blockCode: currentBlockCode,
+        cssRules: currentCssRules,
       };
 
       // Try WebSocket save first, fall back to REST
@@ -259,7 +267,7 @@ export default function ProjectEditor() {
     if (!currentProject || !id || !connected) return;
     const timer = setTimeout(() => handleSave(), 2000);
     return () => clearTimeout(timer);
-  }, [currentProject, id, fileTree, visualElements, elementRegistry, activeFileId, connected, handleSave]);
+  }, [currentProject, id, fileTree, visualElements, elementRegistry, activeFileId, blocksXml, blockCode, cssRules, connected, handleSave]);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {