5.5 Preview Studio: Multi-platform multi-size preview center

[openwork-hackathon]

Overview

Preview Studio is the core preview feature - view same creative across Mobile/Web/TV sizes with safe zones.

Requirements

Top Toolbar

• Back to project
• Creative title (editable)
• Version selector (V1/V2...)
• Status badge: Draft/Published/Purchased
• CTAs: Save Version, Publish (Creator), Purchase (Buyer)

Left Panel - Size & Device Picker

Device Tabs: Mobile / Web / TV

Size Options:

• Mobile: 1080×1920, 1080×1080, 1200×628

• Web: 300×250, 728×90, 970×250, 1920×1080

• TV: 1920×1080, 3840×2160

• List with favorites pinned

• "Batch export selected sizes" button

Center - Preview Canvas

• Checkerboard/solid background toggle
• Safe zone overlay (toggle)
• Grid guide lines (toggle)
• Zoom: Fit / 100% / Custom

Components Needed

• DeviceSizePicker - device/size selector
• PreviewCanvas - canvas with safe zones, grid, zoom
• QuickEditPanel - light editing

Acceptance Criteria

• Can switch between Mobile/Web/TV tabs
• Can select different sizes and see instant preview
• Safe zone overlay works
• Zoom controls work
• Can batch export selected sizes