Add code export and interactive preview mode

Author: rimsila

apps/desktop/src/main/index.ts

@@ -9,8 +9,8 @@
  */
 
 import { app, BrowserWindow, ipcMain, dialog, shell, nativeTheme, Menu } from 'electron';
-import { join } from 'node:path';
-import { readFile, writeFile } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { watch, type FSWatcher } from 'node:fs';
 import { is } from '@electron-toolkit/utils';
 import { setupMCPIPC } from './mcp-client';
@@ -82,6 +82,13 @@ function setupIPC(): void {
     return result.canceled ? null : result.filePaths[0];
   });
 
+  ipcMain.handle('fs:pick-directory', async () => {
+    const result = await dialog.showOpenDialog(mainWindow!, {
+      properties: ['openDirectory', 'createDirectory'],
+    });
+    return result.canceled ? null : result.filePaths[0];
+  });
+
   ipcMain.handle('fs:save-dialog', async (_event) => {
     const result = await dialog.showSaveDialog(mainWindow!, {
       filters: [
@@ -92,6 +99,14 @@ function setupIPC(): void {
     return result.canceled ? null : result.filePath;
   });
 
+  ipcMain.handle('fs:write-batch', async (_event, basePath: string, files: Array<{ path: string; content: string }>) => {
+    for (const file of files) {
+      const targetPath = join(basePath, file.path);
+      await mkdir(dirname(targetPath), { recursive: true });
+      await writeFile(targetPath, file.content, 'utf-8');
+    }
+  });
+
   // Theme
   ipcMain.handle('theme:get', () => {
     return nativeTheme.shouldUseDarkColors ? 'dark' : 'light';

apps/desktop/src/main/mcp-client.ts

@@ -57,7 +57,7 @@ interface LiveMutationOperation {
 
 type LiveMutation =
   | { kind: 'applyOperations'; operations: LiveMutationOperation[] }
-  | { kind: 'replaceSpec'; spec: unknown }
+  | { kind: 'replaceSpec'; spec: unknown; filePath?: string | null }
   | { kind: 'undo' }
   | { kind: 'redo' }
   | { kind: 'setSelection'; selectedIds: string[] };

apps/desktop/src/preload/index.ts

@@ -12,7 +12,9 @@ export interface DesignForgeAPI {
     read(path: string): Promise<string>;
     write(path: string, content: string): Promise<void>;
     pick(filters?: string[]): Promise<string | null>;
+    pickDirectory(): Promise<string | null>;
     saveDialog(): Promise<string | null>;
+    writeBatch(basePath: string, files: Array<{ path: string; content: string }>): Promise<void>;
   };
   theme: {
     get(): Promise<'light' | 'dark'>;
@@ -85,7 +87,10 @@ const api: DesignForgeAPI = {
     read: (path: string) => ipcRenderer.invoke('fs:read', path),
     write: (path: string, content: string) => ipcRenderer.invoke('fs:write', path, content),
     pick: (filters?: string[]) => ipcRenderer.invoke('fs:pick', filters),
+    pickDirectory: () => ipcRenderer.invoke('fs:pick-directory'),
     saveDialog: () => ipcRenderer.invoke('fs:save-dialog'),
+    writeBatch: (basePath: string, files: Array<{ path: string; content: string }>) =>
+      ipcRenderer.invoke('fs:write-batch', basePath, files),
   },
   theme: {
     get: () => ipcRenderer.invoke('theme:get'),