feat: add mockup creation from image cards on images page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/(dashboard)/images/page.tsx

@@ -5,6 +5,7 @@ import { DropZone } from '@/components/images/DropZone'
 import { ImageCard } from '@/components/images/ImageCard'
 import { Lightbox } from '@/components/images/Lightbox'
 import { GlobalActions } from '@/components/images/GlobalActions'
+import { MockupModalFromImage } from '@/components/mockup/MockupModalFromImage'
 import { ErrorBoundary } from '@/components/common/ErrorBoundary'
 import { useImages } from '@/hooks/useImages'
 import type { ImageItem } from '@/types/images'
@@ -12,6 +13,12 @@ import type { ImageItem } from '@/types/images'
 function ImagesPageInner() {
   const { items, addFiles, setFeather, setAlphaThreshold, rotate, uploadOne, uploadAll, removeItem, assignProduct, reprocess, detour } = useImages()
   const [lightboxItem, setLightboxItem] = useState<ImageItem | null>(null)
+  const [mockupItem, setMockupItem] = useState<ImageItem | null>(null)
+
+  const openMockup = useCallback((id: string) => {
+    const item = items.find(i => i.id === id)
+    if (item) setMockupItem(item)
+  }, [items])
   const [selected, setSelected] = useState<Set<string>>(new Set())
 
   const toggleSelect = useCallback((id: string, value: boolean) => {
@@ -101,6 +108,7 @@ function ImagesPageInner() {
                 onAssignProduct={assignProduct}
                 onReprocess={reprocess}
                 onDetour={detour}
+                onMockup={openMockup}
               />
             ))}
           </div>
@@ -116,6 +124,9 @@ function ImagesPageInner() {
       </div>
 
       <Lightbox item={lightboxItem} onClose={() => setLightboxItem(null)} />
+      {mockupItem && (
+        <MockupModalFromImage item={mockupItem} onClose={() => setMockupItem(null)} />
+      )}
     </>
   )
 }