Flatted and issues fixed with Claude Desktop.

src/hooks/useExport.js

@@ -0,0 +1,47 @@
+import { useState, useCallback } from 'react';
+
+export function useExport() {
+  const [exporting, setExporting] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [exportUrl, setExportUrl] = useState(null);
+  const [error, setError] = useState(null);
+
+  const exportDesign = useCallback(async (elements, designName = 'design', template = null) => {
+    setExporting(true); setProgress(0); setError(null); setExportUrl(null);
+
+    try {
+      const progressInterval = setInterval(() => { setProgress((prev) => Math.min(prev + 10, 90)); }, 200);
+
+      const response = await fetch('/api/export', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ elements, designName, template }),
+      });
+
+      clearInterval(progressInterval);
+      setProgress(100);
+
+      if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error || 'Export failed'); }
+
+      const data = await response.json();
+      setExportUrl(data.export.url);
+
+      const link = document.createElement('a');
+      link.href = data.export.url;
+      link.download = data.export.filename;
+      link.click();
+
+      setExporting(false);
+      return data;
+    } catch (err) {
+      console.error('Export failed:', err);
+      setError(err.message);
+      setExporting(false);
+      throw err;
+    }
+  }, []);
+
+  const clearExport = useCallback(() => { setExportUrl(null); setError(null); }, []);
+
+  return { exporting, progress, exportUrl, error, exportDesign, clearExport };
+}