# Project: FlatRender
# A Renderforest-style platform with Video Maker and Image Maker products.

## 🧠 Project Memory — READ THIS FIRST
# Before starting ANY task, read PROJECT_MEMORY.md at the project root.
# It contains: completed features, backlog, known bugs, architecture decisions,
# environment variable status, and the full file map.
# After completing a task, update PROJECT_MEMORY.md:
#   - Move item from Backlog → Completed
#   - Add any new bugs to Known Issues
#   - Add a row to the Session Log with today's date and what changed

## Stack
- Next.js 14 App Router (never use pages/ directory)
- TypeScript (strict mode, no `any`)
- Tailwind CSS for all styling (no inline styles, no CSS modules)
- shadcn/ui for base components (import from @/components/ui)
- Framer Motion for animations
- Lucide React for icons
- Supabase for auth + database
- Zustand for client state
- react-hook-form + zod for forms
- Stripe for payments

## Folder Structure
- /app — Next.js routes only (page.tsx, layout.tsx, loading.tsx)
- /components/layout — Navbar, Footer, Sidebar
- /components/sections — Page sections (Hero, Pricing, FAQ, etc.)
- /components/ui — shadcn/ui components (do not edit these)
- /lib — supabase.ts, stripe.ts, utils.ts
- /hooks — custom React hooks

## Code Rules
- Every component is a named export, never default export from a file with multiple exports
- Use `cn()` from @/lib/utils for conditional Tailwind classes
- Server Components by default; add "use client" only when needed (event handlers, hooks, animations)
- All images use next/image with width/height or fill + sizes
- No hardcoded colors — use Tailwind palette only
- Primary brand color: blue-600 (#2563EB)
- No useEffect for data fetching — use React Server Components or SWR
- Zod schema defined before the form component, not inside it

## Design System
- Font: Plus Jakarta Sans (headings), Inter (body)
- Border radius: rounded-xl for cards, rounded-lg for buttons
- Shadows: shadow-sm default, shadow-xl for elevated cards
- Spacing scale: follow Tailwind defaults (don't invent custom values)
- Animations: max 400ms duration, ease-out easing, whileInView with viewport once:true

## Component Patterns
- Section components accept className prop for layout overrides
- Cards use: bg-white rounded-xl border border-gray-100 shadow-sm
- Primary button: bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-6 py-2.5
- All interactive elements have focus-visible ring for accessibility
- Empty states include an illustration placeholder + CTA button

## Products
- Video Maker: route /video-maker, accent color blue-600
- Image Maker: route /image-maker, accent color violet-600

## What NOT to do
- Never use <style> tags or styled-components
- Never use the pages/ router
- Never install axios — use native fetch
- Never add console.log to committed code
- Never create a component larger than 150 lines — split it
- Never skip TypeScript types on props — always define an interface

## Studio Modules
- Canvas editor uses React-Konva (never plain HTML5 canvas API)
- All canvas state lives in Zustand studio-store.ts
- ffmpeg.wasm runs in a Web Worker only (never on main thread)
- Studio pages are "use client" — they are 100% client components
- Timeline px-per-second default: 60 (1 second = 60px wide)
- Konva Stage base size: 1280x720 (scaled to container)
- Image editor and Video Studio share the same Layer type interface
- Server render API uses nexrender for After Effects pipeline
- Never block UI during ffmpeg processing — always show progress
- All studio panels are dark theme (bg-gray-900, text-white)