Flatted and issues fixed with Claude Desktop.

src/components/editor/PhotoPreEditor.jsx

@@ -0,0 +1,43 @@
+import { useState, useEffect, useRef } from 'react';
+import FilerobotImageEditor from 'react-filerobot-image-editor';
+
+export function PhotoPreEditor({ imageSrc, onComplete, onClose }) {
+  const [saving, setSaving] = useState(false);
+  const modalContentRef = useRef(null);
+  const previousFocusRef = useRef(null);
+
+  useEffect(() => {
+    previousFocusRef.current = document.activeElement;
+    const handleKeyDown = (e) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      previousFocusRef.current?.focus();
+    };
+  }, [onClose]);
+
+  const handleComplete = (editedImageObject) => {
+    setSaving(true);
+    editedImageObject.exportAsync({ quality: 1, mimeType: 'image/png' })
+      .then((blob) => { setSaving(false); onComplete(URL.createObjectURL(blob)); })
+      .catch((error) => { console.error('Export failed:', error); setSaving(false); onClose(); });
+  };
+
+  return (
+    <div className="filerobot-overlay" role="dialog" aria-modal="true" aria-labelledby="photo-editor-title">
+      <div className="filerobot-container" ref={modalContentRef} role="document">
+        <FilerobotImageEditor
+          source={imageSrc} onSave={handleComplete} onClose={onClose}
+          annotationsCommon={{ fill: '#ff0000', stroke: '#000000', strokeWidth: 0 }}
+          annotations={['Text', 'Rectangle', 'Ellipse', 'Line', 'Pen', 'Eraser']}
+          tabs={['adjust', 'filters', 'finetune', 'annotate', 'watermark']}
+          defaultTabId="adjust"
+          theme={{ accentColor: '#38bdf8', palettePrimary: '#38bdf8' }}
+          saveButtonProps={{ label: saving ? 'Exporting...' : 'Use Edited Image' }}
+          closeOnSave
+        />
+      </div>
+      <h2 id="photo-editor-title" style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0,0,0,0)' }}>Photo Editor</h2>
+    </div>
+  );
+}