Flatten transparent product images to white and allow cropper unzoom.

PNG/WebP uploads no longer bake to black on JPEG; product croppers can zoom out with white padding, and SEO tools move into the product overflow menu.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/pages/AddNewProductPage.tsx

@@ -6,7 +6,6 @@ import { ImageCropper } from '../components/ImageCropper'
 import { ImageUploader } from '../components/ImageUploader'
 import { TagInput } from '../components/TagInput'
 import { RichTextEditor } from '../components/RichTextEditor'
-import { SeoMetaFields } from '../components/SeoMetaFields'
 import { Breadcrumbs } from '../components/Breadcrumbs'
 import { ProductFieldAiPromptModal } from '../components/ProductFieldAiPromptModal'
 import { Tooltip } from '../components/Tooltip'
@@ -30,7 +29,6 @@ import {
 } from '../services/productAiService'
 import type { Category, FlatCategory } from '../types/category'
 import { flattenCategories } from '../utils/categories'
-import { seoMetaPayload } from '../utils/seoMeta'
 import pageStyles from '../components/PageContent.module.css'
 import aiStyles from '../styles/ai.module.css'
 import styles from './AddNewProductPage.module.css'
@@ -54,8 +52,6 @@ export function AddNewProductPage() {
   const [thumbnail, setThumbnail] = useState<string | null>(null)
   const [images, setImages] = useState<string[]>([])
   const [tags, setTags] = useState<string[]>([])
-  const [seoMetaTitle, setSeoMetaTitle] = useState('')
-  const [seoMetaDescription, setSeoMetaDescription] = useState('')
   const [thumbnailMediaId, setThumbnailMediaId] = useState<string | null>(null)
   const [galleryMediaIds, setGalleryMediaIds] = useState<string[]>([])
   const [loaded, setLoaded] = useState(!isEdit)
@@ -175,8 +171,6 @@ export function AddNewProductPage() {
         setThumbnail(form.thumbnail)
         setImages(form.images)
         setTags(form.tags)
-        setSeoMetaTitle(form.seoMetaTitle)
-        setSeoMetaDescription(form.seoMetaDescription)
         setThumbnailMediaId(form.thumbnailMediaId)
         setGalleryMediaIds(form.galleryMediaIds)
         setLoaded(true)
@@ -225,7 +219,6 @@ export function AddNewProductPage() {
         featuredMediaId: featuredMediaId ?? undefined,
         galleryMediaIds: nextGalleryMediaIds,
         tags,
-        ...seoMetaPayload(seoMetaTitle, seoMetaDescription),
         status: 'published' as const,
       }
 
@@ -293,7 +286,7 @@ export function AddNewProductPage() {
         <div className={styles.formGrid}>
           <div className={`${styles.field} ${styles.col2} ${styles.thumbnailField}`}>
             <label>{t('products.form.thumbnail')}</label>
-            <ImageCropper value={thumbnail} onChange={setThumbnail} />
+            <ImageCropper value={thumbnail} onChange={setThumbnail} minZoom={0.4} />
           </div>
 
           <div className={styles.col10}>
@@ -445,19 +438,6 @@ export function AddNewProductPage() {
               placeholder={t('products.form.tagsPlaceholder')}
             />
           </div>
-
-          <SeoMetaFields
-            seoMetaTitle={seoMetaTitle}
-            seoMetaDescription={seoMetaDescription}
-            onTitleChange={setSeoMetaTitle}
-            onDescriptionChange={setSeoMetaDescription}
-            disabled={isSubmitting}
-            hint={t('seo.meta.hint')}
-            titleLabel={t('seo.meta.title')}
-            descriptionLabel={t('seo.meta.description')}
-            titlePlaceholder={t('seo.meta.titlePlaceholder')}
-            descriptionPlaceholder={t('seo.meta.descriptionPlaceholder')}
-          />
         </div>
 
         <div className={styles.actions}>