How to Clone PhotoRoom

Create a PhotoRoom-style product-photo app called Cutout Studio as a Next.js (App Router) + Tailwind + Prisma + SQLite project, aimed at online sellers.

## Product
Remove a product photo's background, composite the subject onto a clean/AI background, size for a marketplace, and export. Freemium: free is single-photo, watermarked, standard-res; Pro is HD, batch and AI backgrounds.

## Screens
- Marketing landing: before/after hero, feature cards, pricing toggle (monthly/yearly, yearly highlighted), FAQ accordion
- Editor: auto-cutout floating on a chosen background; panel for Background (white/gradient/scene/AI), Shadow, subject transform, Text/logo, marketplace size selector; Export
- Batch: multi-upload, apply one background+template to all, grid preview, export all
- Templates: branded product-card templates
- My Photos: grid of exports with re-edit/download
- Profile: subscription, brand kit (logo/color), account

## Prisma schema
User (id, email, name, isPro, trialEndsAt, aiCredits, brandLogoUrl, brandColor), Photo (id, userId, originalUrl, cutoutUrl, exportUrl, marketplace, createdAt), Background (id, type, title, valueOrUrl, isPremium), Template (id, title, thumbnailUrl, layoutJson, isPremium), Batch (id, userId, backgroundId, templateId, status)

## Logic
- removeBackground(photo): a single async function that currently mocks a cutout after a timeout - structure it so a hosted matting API drops in. State clearly in the UI that this is an external AI call
- Composition model in JSON: { cutoutUrl, background, shadow, overlays[], marketplacePreset } so re-edit and batch-apply replay the same recipe
- Compositing on a WebGL/Skia or canvas layer: place the cutout, add a drop shadow/reflection, swap backgrounds, overlay text/logo, export at the marketplace's ratio/size
- Marketplace presets are a registry of {name, width, height}; 'export for Etsy' applies the right ratio and uses outpaint to fill if the source is too tight
- Free: single photo, watermark, standard res; Pro: batch, HD, AI backgrounds + image-expand (gate behind isPro, decrement aiCredits for AI ops)
- Batch runs background removal + composite for each uploaded photo and zips/export the set; show per-item status and handle partial failures
- 'Start free trial' sets isPro with trialEndsAt = now + 7 days (mock checkout; structure it so Stripe replaces it)

## Style
Clean commerce-credible: white surfaces, blue/teal brand, crisp cards, product-as-hero editor. Inter. Mobile-first for capture, batch view great on laptop.
Checkerboard behind transparency, soft realistic shadows, and fast tappable background swatches.

Seed: ~10 backgrounds (mix free/premium), 4 templates, a demo Pro user with 3 exports.

Build a production-quality PhotoRoom-style product-photo app for online sellers. Web-first PWA now; keep the compositing model portable to a React Native port.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa
- Compositing: WebGL/Skia behind a typed Composition model (subject layer + background + shadow + overlays); non-destructive and replayable
- Matting + AI: a provider-agnostic ImageService - removeBackground (hosted matting API), generateScene + expand (Replicate/fal). Do NOT train a model; this is an explicit external dependency
- Supabase: Postgres, Auth, Storage for originals/cutouts/exports; a job queue for batch + AI
- Stripe Billing: Pro monthly + yearly, trial, customer portal

## Critical architecture
- Composition is the source of truth: { subjectCutoutUrl, background, shadow, overlays[], marketplacePreset }; the canvas renders from it so re-edit, batch-apply and export are pure operations
- Matting and AI scenes are async + metered: a server route calls the provider, writes a job row, decrements credits server-side; free clients can't trigger batch, HD export, or AI calls without entitlement
- Batch is a queue: N photos each get removeBackground + the shared Composition + export; show per-item status; cap concurrency and handle partial failures gracefully
- Marketplace presets are first-class: a registry of {name, width, height, background-fill rules} so 'export for Etsy' is one tap and outpaint fills when the source is too tight

## Schema
profiles (id, is_pro, trial_ends_at, ai_credits, brand_logo_path, brand_color), photos (id, user_id, original_path, cutout_path, export_path, marketplace, created_at), backgrounds (id, type, title, value_or_path, is_premium), templates (id, title, thumb_path, layout jsonb, is_premium), batches (id, user_id, background_id, template_id, status), ai_jobs (id, user_id, type, status, credits_spent). RLS everywhere; per-user storage; signed URLs.

## Implementation order
1. Scaffold, Supabase schema + RLS, auth, upload to storage
2. ImageService.removeBackground + the Composition model + canvas compositing (place subject, background, shadow, text/logo)
3. Marketplace presets + export pipeline (correct sizes; outpaint when too tight)
4. Paywall + Stripe Checkout with trial; webhook sets is_pro; gate batch/HD/AI
5. Batch queue with per-item status; brand kit (logo/colors) applied across exports
6. AI scenes + image-expand via ImageService with credit metering; PWA polish

## Quality bar
- Cutout-to-composite feels instant after the API returns; the editor is smooth with shadows/overlays
- No batch/HD/AI operation is reachable without server-verified entitlement; matting cost is metered
- Funnel events to PostHog (cutout_done, background_changed, batch_started, paywall_shown, trial_started)

Start with step 1, then show me the ImageService interface and Composition types before building the canvas.

Design the complete UI for a PhotoRoom-style product-photo app called Cutout Studio, aimed at online sellers. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: clean, bright and commerce-credible - white surfaces, a confident blue/teal brand, crisp rounded cards, soft shadows, a spacious editor where the product photo is unmistakably the hero. Inter type.

## Screens

### 1. Marketing landing
- Hero with a draggable before/after slider (cluttered phone snapshot → clean studio product shot), headline 'Studio product photos in one tap', solid CTA
- Three feature cards (Remove background, Marketplace sizes, Batch), pricing toggle (monthly $7.99 / yearly $39.99 with badge), FAQ accordion, light footer

### 2. Editor (the centerpiece)
- Center: the product cut out and floating on the selected background, with transform handles and a soft drop shadow, on a subtle checkerboard when transparent
- Right panel tabs: Background (swatches for white/gradient + scene preset thumbnails + an 'AI scene' field), Shadow (presets + intensity), Text/Logo, and a Marketplace size selector (eBay, Etsy, Shopify, Vinted, Amazon, Instagram) showing the active aspect ratio
- Top bar: project name, undo/redo, and a prominent Export button

### 3. Batch view
- A multi-upload dropzone, then a responsive grid of products each auto-cut-out, with a single shared Background + Template control above and a 'Export all' button; per-item processing spinners

### 4. Templates
- Grid of branded product-card templates (logo + price + badge layouts) with premium crowns and an 'apply' action

### 5. Paywall modal
- Glass card over a blurred editor: benefits (HD exports, Batch, AI backgrounds, No watermark), plan selector (yearly preselected), trial note, primary CTA, restore link

### 6. Profile & brand kit
- Avatar header, a brand-kit card (logo upload, brand color swatch), credit-balance chip, subscription row, account rows

### 7. Empty & loading states
- Editor empty state: a camera/upload dropzone with a 'try a sample product' shortcut
- Removing-background state: a shimmer over the subject with a 'cutting out your product…' caption and a note that it's an AI call
- Batch processing: per-tile spinners and a summary bar ('8 of 12 done')

Mobile-first for the capture/edit flow, but design the batch and templates views to shine on a laptop. Use realistic content - product photos (sneakers, a vintage lamp, a candle), marketplace labels, scene preset names like 'Marble Counter' and 'Wooden Table'. Make the before/after slider and the background swatches feel tactile.
Keep surfaces white and trustworthy; let the blue/teal brand color carry the CTAs, the active marketplace preset and the Pro badges.

Build a product-photo app (PhotoRoom model) called Cutout Studio for online sellers.

## Entities
- Photo: user, originalUrl, cutoutUrl, exportUrl, marketplace, createdAt
- Background: type (color/gradient/scene/ai), title, valueOrUrl, isPremium
- Template: title, thumbnailUrl, layoutJson, isPremium
- Batch: user, background reference, template reference, status (queued/processing/done)
- UserProfile: isPro, trialEndsAt, aiCredits, brandLogoUrl, brandColor

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: one photo at a time, watermarked, standard resolution; batch and AI backgrounds are locked
- Pro user: HD exports, batch, AI backgrounds, image-expand, brand kit
- Admin: dashboard (users, Pro count, photos processed), manage backgrounds and templates

## Pages
1. Landing: before/after hero, pricing (monthly $7.99 / yearly $39.99 with trial), FAQ
2. Editor: auto-cutout on a chosen background, Background/Shadow/Text panels, marketplace size selector, export
3. Batch: multi-upload, apply one background+template to all, export all
4. Templates: branded product-card templates
5. My Photos: grid of exports with re-edit and download
6. Profile: subscription, brand kit (logo/color), account
7. Admin: backgrounds and templates tables with uploads

## Rules
- Free exports are watermarked and standard-res; Pro exports are HD and unwatermarked
- Background removal calls an external AI matting API; AI scenes/expand spend credits; batch requires Pro
- Trial sets isPro true and trialEndsAt = now + 7 days; revert to free after expiry
- State clearly that background removal depends on an external AI model - do not imply you trained one

## Look & feel
Clean commerce-credible: white surfaces, blue/teal brand, crisp cards, product-as-hero editor. Mobile-first for capture, batch great on laptop.

Seed with one admin user, a demo Pro user with 3 exports, ~10 backgrounds and 4 templates.