Flatted and issues fixed with Claude Desktop.

src/components/sidebar/BackgroundRemovalButton.jsx

@@ -0,0 +1,23 @@
+import { useBackgroundRemoval } from '../../hooks/useBackgroundRemoval';
+
+export function BackgroundRemovalButton({ selectedElement, onUpdate }) {
+  const { loading, progress, hasModel, loadModel, removeBackground } = useBackgroundRemoval();
+
+  const handleRemoveBackground = async () => {
+    if (!selectedElement || selectedElement.type !== 'image') return;
+    if (!hasModel) { const loaded = await loadModel(); if (!loaded) return; }
+    const resultUrl = await removeBackground(selectedElement.src);
+    if (resultUrl) onUpdate(selectedElement.id, { src: resultUrl, bgRemoved: true });
+  };
+
+  if (!selectedElement || selectedElement.type !== 'image') return null;
+
+  return (
+    <div className="bg-removal-container">
+      <button className="bg-removal-btn" onClick={handleRemoveBackground} disabled={loading}>
+        {loading ? (<><div className="spinner-small" />{progress > 0 ? `Loading: ${progress}%` : 'Removing Background...'}</>) : (<>✨ Remove Background</>)}
+      </button>
+      {!hasModel && <p className="bg-removal-hint">First use requires downloading ~86MB model. Subsequent uses are cached.</p>}
+    </div>
+  );
+}