design-studio-production-audit

name	Design Studio Production Audit
description	Comprehensive audit of the SKAPARA design studio — canvas editor, AI generation pipeline, composition rendering, mockup generation, and design-to-product flow. Use when asked to audit the design studio, design editor, canvas, AI generation, or product creation pipeline.

Design Studio Production Audit

Systematic audit of the Fabric.js-based design studio: canvas editor, AI multi-provider generation, composition rendering, mockup generation, persistence, and the full design-to-product pipeline.

Prerequisites

Before starting, read these files for architectural context:

• CLAUDE.md — component standards, semantic tokens, route groups, Printful/Supabase connection reference
• frontend/docs/design-studio-audit/DESIGN_STUDIO_AUDIT_E2E.md — prior E2E audit (Phases 1-3 status, known bugs)
• frontend/docs/design-studio-research/11-gap-analysis.md — gap analysis across prior research reports

File Map

Keep this reference open throughout the audit. All paths relative to frontend/src/.

Canvas Editor

File	Role
components/design-studio/DesignStudioPage.tsx	Top-level orchestrator — mounts canvas, panels, header
components/design-studio/CanvasWorkspace.tsx	Fabric.js canvas init, object manipulation, export, clipboard
components/design-studio/EditorHeader.tsx	Save, preview, undo/redo, product info bar
components/design-studio/CanvasToolbar.tsx	Tool selection (text, image, shapes, draw)
components/design-studio/CanvasProperties.tsx	Object properties panel (fill, stroke, opacity, shadow, font)
components/design-studio/LayersPanel.tsx	Layer list, z-order, visibility, lock
components/design-studio/PanelSwitcher.tsx	Multi-position panel switching (front, back, sleeves)
components/design-studio/ClipartPanel.tsx	Clipart/asset browser
components/design-studio/TemplatesPanel.tsx	Template gallery
components/design-studio/PreviewMockupModal.tsx	Preview overlay with mockup rendering
components/design-studio/EmbroideryConstraints.tsx	Embroidery-specific validation (colors, line width)

Canvas Tools

File	Role
components/design-studio/tools/TextTool.tsx	Text object creation and editing
components/design-studio/tools/ImageTool.tsx	Image upload and placement
components/design-studio/tools/ColorPicker.tsx	Color selection with brand palette
components/design-studio/tools/FontPicker.tsx	Font browser and selection
components/design-studio/tools/GradientEditor.tsx	Gradient fill configuration
components/design-studio/tools/ShadowControl.tsx	Drop shadow configuration

State Management

File	Role
hooks/useDesignEditor.ts	Zustand store — canvas state, panels, selected object, variant color
hooks/useCanvasHistory.ts	Undo/redo stack management
hooks/useCanvasExport.ts	PNG/production export utilities
hooks/useDesignPersistence.ts	Auto-save and load from Supabase

AI Generation Pipeline

File	Role
lib/ai-design-orchestrator.ts	Intent classification, provider selection, prompt routing
lib/design-generation.ts	Generation execution, retry logic, result processing
lib/design-presets.ts	Style presets (meme, branded, minimalist, etc.)
lib/design-cost-guard.ts	Per-user generation limits, tier enforcement
lib/providers/router.ts	Multi-provider routing (cost, quality, speed)
lib/providers/fal-provider.ts	fal.ai provider (Flux, SDXL)
lib/providers/openai-provider.ts	DALL-E 3 provider
lib/providers/ideogram-provider.ts	Ideogram provider (text rendering)
lib/providers/recraft-provider.ts	Recraft provider (vector, brand)
lib/providers/prompt-engineer.ts	Prompt enhancement and safety filtering
lib/providers/background-removal.ts	Background removal via rembg sidecar
lib/providers/storage-upload.ts	Supabase Storage upload for generated images
lib/providers/types.ts	Shared TypeScript types for provider system

Composition & Mockup

File	Role
lib/composition-renderer.ts	Sharp-based server-side composition rendering
lib/mockup-generator.ts	Product mockup overlay generation
lib/canvas-helpers.ts	Canvas utility functions (print area, scaling, crop)
lib/fabric-init.ts	Fabric.js initialization and configuration

API Endpoints

Endpoint	Route File
GET/POST /api/designs	app/api/designs/route.ts
POST /api/designs/ai-generate	app/api/designs/ai-generate/route.ts
POST /api/designs/generate	app/api/designs/generate/route.ts
POST /api/designs/compose	app/api/designs/compose/route.ts
POST /api/designs/compose-v2	app/api/designs/compose-v2/route.ts
GET /api/designs/composition/[id]	app/api/designs/composition/[id]/route.ts
GET /api/designs/history	app/api/designs/history/route.ts
POST /api/designs/estimate	app/api/designs/estimate/route.ts
POST /api/designs/mockup	app/api/designs/mockup/route.ts
POST /api/designs/remove-bg	app/api/designs/remove-bg/route.ts
GET /api/designs/logs	app/api/designs/logs/route.ts
POST /api/designs/[id]/create-product	app/api/designs/[id]/create-product/route.ts

Database Tables

Table	Purpose
designs	Saved design documents (canvas JSON, metadata)
design_sessions	Active editing sessions (user, product, timestamps)
ai_generations	AI generation log (provider, prompt, cost, result)
design_compositions	Rendered compositions (production URLs, panel data)
user_design_assets	Uploaded user images/assets
design_templates_clipart	Template and clipart library entries

Pages

Page	File
Design editor	app/[locale]/(editor)/design/[productId]/page.tsx
Editor client wrapper	app/[locale]/(editor)/design/[productId]/DesignEditorClient.tsx
Designs gallery	app/[locale]/(app)/designs/page.tsx

---

Workflow

Execute each phase sequentially. Record every finding with severity, file path, and line number.

Phase 1: Canvas Editor UX (15 checks)

1.1 Canvas Initialization

• Read lib/fabric-init.ts and CanvasWorkspace.tsx
• Check: Is Fabric.js initialized with correct defaults (selection, rendering, retina)?
• Check: Is canvas.dispose() called on unmount to prevent memory leaks?
• Check: Does canvas resize correctly on window resize / container resize?
• Benchmark: Canvas should initialize in <500ms on desktop

1.2 Object Manipulation

• Read CanvasWorkspace.tsx — object add/select/transform methods
• Check: Can user add text, images, shapes, and SVGs?
• Check: Do alignment guidelines work (snap to center, edges)?
• Check: Are transform controls (scale, rotate, skew) functional and constrained?
• Check: Is multi-select supported (Shift+click or drag selection)?

1.3 Undo/Redo

• Read hooks/useCanvasHistory.ts
• Check: Does Ctrl+Z undo the last operation?
• Check: Does Ctrl+Shift+Z (or Ctrl+Y) redo?
• Check: Is history cleared correctly on panel switch?
• Check: Are undo/redo stacks bounded (memory limit)?
• Benchmark: Industry standard is 50+ undo steps

1.4 Keyboard Shortcuts

• Search for keydown or addEventListener.*key in CanvasWorkspace.tsx and DesignStudioPage.tsx
• Check: Ctrl+S (save), Ctrl+D (duplicate), Delete (remove), Escape (deselect), Arrows (nudge 1px), Shift+Arrows (nudge 10px)
• Check: Are shortcuts documented in UI (tooltip or help modal)?
• Check: Do shortcuts conflict with browser defaults?

1.5 Zoom & Pan

• Search for zoomToPoint, viewportTransform, zoomLevel in canvas files
• Check: Mouse wheel zoom works (clamp 0.25x-5x)
• Check: Space+drag panning works
• Check: Zoom controls UI shows percentage and has fit-to-canvas
• Check: Viewport is reset before export (critical for production PNG)
• Benchmark: Industry standard supports at least 10x-2000% zoom range

1.6 Color & Fill

• Read tools/ColorPicker.tsx, tools/GradientEditor.tsx
• Check: Brand palette is available as preset swatches
• Check: Custom hex/RGB input works
• Check: Gradient editor supports linear and radial gradients
• Check: Color changes apply to selected object immediately

1.7 Typography

• Read tools/TextTool.tsx, tools/FontPicker.tsx
• Check: At least 12 fonts available (verify count in FontPicker)
• Check: Font size, weight, style (italic), decoration (underline/strikethrough) all work
• Check: Text alignment (left, center, right) works
• Check: Letter spacing and line height adjustable
• Check: Text editing on double-click canvas object
• Benchmark: Competitors (Canva, Printful) offer 50+ fonts

1.8 Image Handling

• Read tools/ImageTool.tsx
• Check: Upload accepts PNG, JPG, SVG, WebP
• Check: Blob URLs are converted to data URLs for persistence (blobUrlToDataUrl)
• Check: Image cropping or masking available?
• Check: Background removal integration works (calls /api/designs/remove-bg)
• Check: Max file size validation exists

1.9 Layers Panel

• Read LayersPanel.tsx
• Check: Layer list displays all canvas objects with names/thumbnails
• Check: Drag-to-reorder changes z-index
• Check: Visibility toggle (eye icon) hides/shows objects
• Check: Lock toggle prevents selection/editing
• Check: Layer names are editable

1.10 Multi-Position Design

• Read PanelSwitcher.tsx and panel-related state in useDesignEditor.ts
• Check: Panels available per product type (front, back, sleeves, neck, wrist)
• Check: Switching panels preserves design state for each panel
• Check: Panel names map correctly to Printful placement names (PANEL_TO_PRINTFUL)
• Check: Each panel has correct canvas dimensions per product type
• Check: Ghost templates load for each panel (not just front)
• Known Bug: BUG-06 — blankImages not panel-specific. Verify current status.

1.11 Templates & Clipart

• Read TemplatesPanel.tsx, ClipartPanel.tsx
• Check: Template gallery loads and templates can be applied to canvas
• Check: Clipart browser loads assets from design_templates_clipart table
• Check: At least 10 templates exist (query design_templates_clipart count)
• Benchmark: Competitors offer 100+ templates per category

1.12 Print Area Enforcement

• Search for clipPath, clipRectRef, getCanvasPrintArea in canvas files
• Check: Visual clip path restricts objects to print area
• Check: Objects outside print area are visually clipped (not hard-deleted)
• Check: Ghost template outlines show safe zone
• Check: Print area dimensions match Printful specs per product type
• Known Bug: BUG-05 — fallback getCanvasPrintArea ignores product type. Verify status.

1.13 Embroidery Constraints

• Read EmbroideryConstraints.tsx
• Check: Max 3 thread colors enforced for embroidery products
• Check: No gradients allowed on embroidery products
• Check: Minimum line width enforced (1.5mm)
• Check: Minimum text size enforced (5mm)
• Check: Constraints activate only for embroidery product types

1.14 Preview & Mockup

• Read PreviewMockupModal.tsx
• Check: Preview modal renders canvas at 2x resolution
• Check: Mockup overlay shows design on product photo
• Check: Apply-to-cart button works from preview modal
• Check: Multiple views available (front, back) if multi-position

1.15 DPI Validation

• Search for dpi, resolution, PRODUCTION_DIMENSIONS across design studio files
• Check: Production export outputs at 300+ DPI
• Check: User is warned if uploaded image resolution is too low for print size
• Check: PRODUCTION_DIMENSIONS match Printful printfile specs
• Benchmark: 300 DPI minimum for print, 150 DPI minimum warning threshold

Phase 2: AI Generation Pipeline (12 checks)

2.1 Intent Classification

• Read lib/ai-design-orchestrator.ts
• Check: User prompt is classified into intent categories (meme, branded, text-only, photo, illustration, etc.)
• Check: Classification drives provider selection (not random/hardcoded)
• Check: Unknown/ambiguous intents have a sensible default path

2.2 Provider Routing

• Read lib/providers/router.ts
• Check: Router selects provider based on intent, quality preference, and cost
• Check: Fallback chain exists (if primary provider fails, try secondary)
• Check: Provider health/availability is checked before routing
• Check: Routing decision is logged for debugging

2.3 Provider Implementations

• Read each provider file: fal-provider.ts, openai-provider.ts, ideogram-provider.ts, recraft-provider.ts
• Check: Each provider implements a consistent interface (from types.ts)
• Check: API keys are read from server-side env vars (never exposed to client)
• Check: Error handling catches provider-specific errors and returns normalized errors
• Check: Timeouts are configured (no infinite hangs)
• Check: Response format is normalized across providers

2.4 Prompt Engineering

• Read lib/providers/prompt-engineer.ts
• Check: Prompts are enhanced with style-specific suffixes
• Check: Content safety filtering rejects harmful/prohibited content
• Check: Prompt length is validated (provider-specific max lengths)
• Check: Brand-specific keywords are injected when appropriate

2.5 Cost Guards

• Read lib/design-cost-guard.ts
• Check: Per-user generation limits exist (daily/monthly)
• Check: Limits differ by user tier (free, pro, etc.)
• Check: Cost estimation endpoint (/api/designs/estimate) returns accurate costs
• Check: Generation is blocked when limit is exceeded (not just warned)
• Check: Admin/staff bypass exists for testing

2.6 Generation API Security

• Read app/api/designs/ai-generate/route.ts and app/api/designs/generate/route.ts
• Check: Auth required (user must be logged in)
• Check: Rate limiting exists (per-user, per-IP)
• Check: Input validation (prompt length, parameters)
• Check: Response does not leak internal error details
• Check: Cost is deducted from user's balance/quota atomically

2.7 Background Removal

• Read lib/providers/background-removal.ts and app/api/designs/remove-bg/route.ts
• Check: Routes to self-hosted rembg sidecar (port 7000/8080)
• Check: Fallback if rembg is unavailable
• Check: Input validation (file type, size)
• Check: Result quality — verify PNG with alpha channel is returned

2.8 Style Presets

• Read lib/design-presets.ts
• Check: Preset list covers key styles (meme, minimalist, branded, vintage, neon, etc.)
• Check: Each preset defines provider preference, prompt template, and post-processing
• Check: Presets are selectable in the UI
• Benchmark: At least 8-10 presets for good coverage

2.9 Generation Latency

• Search for timeout values, AbortController, signal in generation files
• Check: Timeouts are set per provider (fal ~10s, DALL-E ~30s)
• Check: User sees loading indicator during generation
• Check: User can cancel in-progress generation
• Benchmark: Quick generation <10s, quality generation <30s

2.10 Generation Logging

• Read app/api/designs/logs/route.ts and search for ai_generations table inserts
• Check: Every generation attempt is logged (provider, prompt, cost, duration, success/failure)
• Check: Failed generations record the error reason
• Check: Logs are queryable for cost analytics and debugging

2.11 Content Safety

• Search for safety, nsfw, moderation, filter, block in provider and prompt files
• Check: Prompt is checked against blocked terms/patterns before sending to provider
• Check: Generated images are checked for NSFW content (provider-side or post-generation)
• Check: Rejected content returns a user-friendly message (not a raw error)
• Benchmark: All major POD platforms (Printful, Printify, Redbubble) enforce content policies

2.12 Storage Upload

• Read lib/providers/storage-upload.ts
• Check: Generated images are uploaded to Supabase Storage designs/ bucket
• Check: File naming includes user ID and timestamp (prevents collisions)
• Check: Public URL is returned for use in canvas
• Check: Old/unused generations are cleaned up (or storage cost is bounded)

Phase 3: Composition & Production Pipeline (10 checks)

3.1 Production Export

• Search for exportProductionPNG, PRODUCTION_DIMENSIONS in hooks and canvas files
• Check: Export scales canvas to Printful-required dimensions per product type
• Check: Viewport is reset before export (zoom/pan must not affect output)
• Check: Guide objects, ghost templates, and background are excluded from export
• Check: Output is PNG with transparency (no white background unless DTG on white)

3.2 Composition Rendering (compose-v2)

• Read app/api/designs/compose-v2/route.ts and lib/composition-renderer.ts
• Check: Server-side composition uses Sharp (not client-side canvas)
• Check: All panels are composed (front + back + sleeves if designed)
• Check: Production URLs are saved to design_compositions table
• Check: Composition images are uploaded to Supabase Storage
• Check: Error handling for Sharp failures (memory, format)

3.3 Mockup Generation

• Read app/api/designs/mockup/route.ts and lib/mockup-generator.ts
• Check: Mockup overlays design onto product photo at correct position/scale
• Check: Perspective transform applied (design wraps on curved surfaces)
• Check: Multiple mockup views available (if templates exist)
• Check: Mockup templates exist for major product types
• Search public/mockup-templates/ — count available templates
• Known Gap: Prior audit found only 7 templates — hats, sneakers, tumblers, desk mats, kids, tanks missing

3.4 Design-to-Product Pipeline

• Read app/api/designs/[id]/create-product/route.ts
• Check: Creates product on Printful with correct blueprint, provider, and variants
• Check: Print areas map correctly from canvas panels to Printful placements
• Check: Pricing is set per PRICING_RULES (margin >= 35%)
• Check: GPSR compliance data is attached before publish
• Check: Product is synced to Supabase after Printful creation

3.5 Cart Integration

• Search for composition_id, design_id in cart-related files
• Check: cart_items table has composition_id column
• Check: Adding designed product to cart stores composition reference
• Check: Cart displays design preview (not generic product image)

3.6 Order Print Files

• Search for files, productionUrlsMap, production_url in checkout/order files
• Check: Stripe webhook reads production_url from composition
• Check: Printful order includes files[] param with production URLs
• Check: No temp products are created (direct files[] flow)
• Check: Print file URLs are accessible to Printful (public or signed URLs)

3.7 Design Persistence

• Read hooks/useDesignPersistence.ts
• Check: Auto-save triggers on canvas change (debounced, not on every stroke)
• Check: Canvas JSON is serialized correctly (guides/ghost excluded via filterGuideObjectsFromJSON)
• Check: Loading a saved design restores all objects, positions, and styles
• Check: Designs list page (/designs) shows user's saved designs
• Check: Designs are user-scoped (RLS or explicit user_id filter)

3.8 Session Management

• Search for design_sessions in API and hook files
• Check: Session is created on editor open
• Check: Session tracks active editing time
• Check: Concurrent editing is handled (lock or last-write-wins)

3.9 Asset Management

• Search for user_design_assets in API and component files
• Check: Uploaded images are stored in Supabase Storage
• Check: Asset library shows user's uploaded images
• Check: Assets are user-scoped (no cross-user access)
• Check: File size and type validation on upload

3.10 History Endpoint

• Read app/api/designs/history/route.ts
• Check: Returns user's design history (saved designs + generations)
• Check: Auth required
• Check: Pagination implemented
• Check: Includes metadata (timestamps, thumbnails, product type)

Phase 4: API Security & Validation (8 checks)

4.1 Authentication on All Endpoints

• Read every route file under app/api/designs/
• Check: Every endpoint validates user auth (extracts user from session/token)
• Check: Unauthenticated requests return 401
• Check: User ID is extracted server-side (never trusted from request body)
• Severity: CRITICAL if any mutating endpoint lacks auth

4.2 Input Validation

• For each POST endpoint, check request body parsing:
• Check: Prompt text is sanitized (no script injection)
• Check: Image URLs are validated (no SSRF via internal URLs)
• Check: Numeric parameters are bounded (width, height, count)
• Check: File uploads validate type and size

4.3 Rate Limiting

• Search for rateLimit, throttle, X-RateLimit in design API files
• Check: AI generation endpoints have rate limits
• Check: Upload endpoints have rate limits
• Check: Rate limit headers are returned in responses
• Benchmark: Typical limits: 10 generations/hour free tier, 50/hour pro

4.4 Error Handling

• Search for try.*catch, NextResponse.json.*500 in design API files
• Check: All endpoints wrap logic in try-catch
• Check: Internal errors return generic message (not stack traces)
• Check: Supabase/Printful errors are caught and normalized
• Check: Error responses use consistent format { error: string, code?: string }

4.5 CORS & Headers

• Search for headers, Access-Control, Content-Security-Policy in design API files
• Check: API responses include appropriate security headers
• Check: CORS is not overly permissive (no wildcard * in production)
• Check: File upload responses set correct Content-Type

4.6 Supabase Client Usage

• Search for supabase-admin, SUPABASE_SERVICE_KEY in design API files
• Check: Admin client is used only where RLS bypass is needed (cron, admin ops)
• Check: User-facing endpoints use server client with user auth
• Check: No admin client usage in client-side code
• Severity: CRITICAL if admin client is imported in any "use client" file

4.7 External Service Security

• Check provider files for API key handling:
• Check: fal.ai, OpenAI, Ideogram, Recraft keys are in env vars (not hardcoded)
• Check: Keys are only accessed server-side (API routes, not lib/ imported by client)
• Check: Provider responses are validated before processing (no blind trust)

4.8 Storage Security

• Check Supabase Storage bucket configuration:
• Check: designs/ bucket has appropriate RLS policies
• Check: Users can only access their own uploads
• Check: Public URLs are only generated for shared/published designs
• Check: No directory traversal possible in upload paths

Phase 5: Database Schema & Integrity (6 checks)

5.1 Table Schema Completeness

• Query or read migrations for designs, design_sessions, ai_generations, design_compositions, user_design_assets, design_templates_clipart
• Check: All tables have created_at, updated_at timestamps
• Check: All user-scoped tables have user_id with FK to auth.users
• Check: Primary keys are UUIDs (consistent with rest of schema)

5.2 RLS Policies

• Search for CREATE POLICY on design tables in migrations
• Check: Every design table has RLS enabled
• Check: SELECT policies enforce user_id = auth.uid()
• Check: INSERT policies set user_id = auth.uid() (not user-provided)
• Check: UPDATE/DELETE policies enforce ownership
• Severity: CRITICAL if any table lacks RLS

5.3 Indexes

• Search for CREATE INDEX on design tables
• Check: designs has index on user_id
• Check: ai_generations has index on user_id and created_at (for cost queries)
• Check: design_compositions has index on design_id
• Check: Any table queried by user_id has an index on it

5.4 Foreign Keys

• Check: designs.user_id references auth.users
• Check: design_compositions.design_id references designs.id
• Check: ai_generations.user_id references auth.users
• Check: ON DELETE behavior is appropriate (CASCADE or SET NULL)

5.5 Data Integrity

• Check: designs.canvas_data is JSONB (not text)
• Check: ai_generations.cost is numeric/decimal (not text)
• Check: design_compositions.production_url is text (valid URL format)
• Check: No orphaned compositions (compositions without valid design reference)

5.6 Storage Bucket Configuration

• Check: designs bucket exists in Supabase Storage
• Check: Max file size limit is configured
• Check: Allowed MIME types are restricted (image/png, image/jpeg, image/svg+xml, image/webp)

Phase 6: Mobile UX (6 checks)

6.1 Responsive Layout

• Read DesignStudioPage.tsx and check for responsive breakpoints
• Check: Editor uses mobile-first CSS (base styles for 375px, md: for tablet, lg: for desktop)
• Check: Panels collapse or switch to bottom sheets on mobile
• Check: Canvas scales proportionally on small screens
• Check: No horizontal scroll on mobile viewport

6.2 Touch Targets

• Search for p-2, p-3, w-8, h-8, w-10, h-10 in toolbar and panel components
• Check: All interactive elements have minimum 44px touch targets (p-3 or h-10+)
• Check: Toolbar buttons are not cramped on mobile
• Check: Close/dismiss buttons are easy to tap

6.3 Touch Gestures

• Search for touch, pinch, gesture, pointer in canvas files
• Check: Pinch-to-zoom supported on canvas
• Check: Two-finger pan supported
• Check: Long-press for context menu (alternative to right-click)
• Benchmark: Canva and Printful both support pinch-zoom on mobile editor

6.4 Panel Management

• Check: Only one panel visible at a time on mobile (not stacked)
• Check: Panel switching is intuitive (bottom tabs or swipe)
• Check: Canvas is not obscured by panels on small screens
• Check: Keyboard does not break layout when editing text

6.5 Performance on Mobile

• Search for useMemo, useCallback, React.memo in design studio components
• Check: Heavy components are memoized
• Check: Canvas operations are debounced for touch input
• Check: No layout thrashing from frequent re-renders
• Benchmark: Canvas should maintain 30fps during object manipulation on mobile

6.6 Offline / Network Resilience

• Check: Auto-save handles network failures gracefully (retry, queue)
• Check: AI generation shows clear loading states on slow connections
• Check: Large image uploads show progress indicator

Phase 7: Performance & Bundle (5 checks)

7.1 Bundle Size

• Check if Fabric.js is dynamically imported (not in initial bundle)
• Check: fabric import uses dynamic() or import() (not top-level import in page)
• Check: AI provider code is only loaded server-side (not bundled for client)
• Check: Design studio page uses code splitting from the route

7.2 Canvas Performance

• Search for requestAnimationFrame, renderAll, renderOnAddRemove in canvas files
• Check: renderOnAddRemove is set to false for batch operations
• Check: Canvas does not re-render on every state update (batched rendering)
• Check: Large canvases (4000x5000px) do not cause OOM

7.3 Image Optimization

• Check: Uploaded images are resized/compressed before storage (not raw 20MB files)
• Check: Thumbnails are generated for design gallery
• Check: Canvas preview images use appropriate resolution (not full production size)

7.4 Memory Management

• Check: Canvas is disposed on component unmount
• Check: Object URLs are revoked after use (URL.revokeObjectURL)
• Check: Large data URLs are not held in React state unnecessarily
• Check: Generation results are garbage-collected after placement

7.5 API Response Times

• Check for caching, pagination, query optimization in design API routes
• Check: Design list endpoint is paginated
• Check: Composition fetch uses indexed queries
• Check: Heavy operations (compose, mockup) return quickly or use streaming/polling

---

Output Format

Generate AUDIT_DESIGN_STUDIO_[DATE].md at the workspace root with the following structure:

# Design Studio Audit — [DATE]

## Executive Summary

[2-3 paragraph overview: what works well, what is broken, what is missing. State overall production-readiness.]

## Scorecard

| Category | Checks | Pass | Warn | Fail | Critical | Score |
|---|---|---|---|---|---|---|
| Canvas Editor UX | 15 | X | X | X | X | X% |
| AI Generation Pipeline | 12 | X | X | X | X | X% |
| Composition & Production | 10 | X | X | X | X | X% |
| API Security | 8 | X | X | X | X | X% |
| Database Schema | 6 | X | X | X | X | X% |
| Mobile UX | 6 | X | X | X | X | X% |
| Performance & Bundle | 5 | X | X | X | X | X% |
| **TOTAL** | **62** | **X** | **X** | **X** | **X** | **X%** |

## Findings

| ID | Severity | Category | Finding | File:Line | Recommendation |
|---|---|---|---|---|---|
| DS-001 | CRITICAL | API Security | [description] | `src/app/api/designs/generate/route.ts:42` | [fix] |
| DS-002 | FAIL | Canvas UX | [description] | `src/components/design-studio/CanvasWorkspace.tsx:310` | [fix] |
| DS-003 | WARN | Mobile UX | [description] | `src/components/design-studio/CanvasToolbar.tsx:88` | [fix] |
| ... | ... | ... | ... | ... | ... |

## Critical Blockers (Must Fix Before Production)

1. [DS-001] — [description and fix]
2. ...

## High Priority (Fix Within Sprint)

1. [DS-0XX] — [description]
2. ...

## Warnings (Fix Before V2)

1. [DS-0XX] — [description]
2. ...

## Industry Benchmark Comparison

| Capability | SKAPARA | Canva | Printful | Printify | Status |
|---|---|---|---|---|---|
| Canvas zoom range | 25%-500% | 10%-3000% | 50%-400% | 50%-200% | PASS |
| Font count | X | 2000+ | 50+ | 40+ | [PASS/FAIL] |
| Template count | X | 100K+ | 50+ | 20+ | [PASS/FAIL] |
| Undo depth | X | Unlimited | 50 | 20 | [PASS/FAIL] |
| Mobile editor | [Y/N] | Yes | Yes | No | [PASS/FAIL] |
| AI generation | [Y/N] | Yes (Magic) | No | No | ADVANTAGE |
| Multi-position | [Y/N] | N/A | Yes | Yes | [PASS/FAIL] |
| Embroidery constraints | [Y/N] | N/A | Yes | No | [PASS/FAIL] |
| Background removal | [Y/N] | Yes | Yes | No | [PASS/FAIL] |
| DPI validation | [Y/N] | Yes | Yes | Yes | [PASS/FAIL] |
| Design-to-order (no temp product) | [Y/N] | N/A | No | No | ADVANTAGE |

## Appendix: Known Bugs (from prior audits)

| Bug ID | Status | Description | Impact |
|---|---|---|---|
| BUG-05 | Open (LOW) | `getCanvasPrintArea` fallback ignores product type | Low — only affects legacy products |
| BUG-06 | Open (MEDIUM) | `blankImages` not panel-specific | Moderate — back panel shows front image |
| ... | ... | ... | ... |

Severity Levels

• CRITICAL: Security vulnerability, data leakage, auth bypass, production data corruption. Blocks production launch.
• FAIL: Broken functionality, missing validation, incorrect output. Must fix before release.
• WARN: Sub-optimal pattern, missing best practice, UX gap. Should fix before V2.
• PASS: Meets standards and industry benchmarks.

Notes

• Always verify findings against actual code (read the file, cite the line number). Never report speculative issues.
• Cross-reference with prior audits in frontend/docs/design-studio-audit/ to avoid duplicating known issues.
• If a prior bug has been fixed, note it as RESOLVED with the fixing commit/PR.
• For each CRITICAL or FAIL finding, include a concrete code-level recommendation (not just "fix this").
• The benchmark comparison table should use real numbers from the codebase (count fonts, templates, etc.), not estimates.