Fabric.js design canvas implementation and supporting infrastructure

Design Canvas (Primary)
- FabricDesignCanvasV2: Fabric.js-based product customization canvas
  - Lazy-loads Fabric.js to minimize bundle impact
  - Renders product mockup with print area guide (magenta dashed box)
  - Supports front/back view switching with correct product images
  - Color swatch selection for garment customization
  - Text element creation with selection handles and transform controls
  - Fixed React dependency array to prevent infinite renders

Support Components
- DesignCanvasWrapper: Client-side wrapper for SSR compatibility
- DesignCanvasErrorBoundary: Error boundary for canvas failures
- ThemeInitializer: Theme detection and application

Configuration
- Updated .claude/launch.json with dev server settings
- Updated .claude/settings.local.json with local preferences
- Updated next.config.mjs for production build optimization
- Dependency updates in package.json and package-lock.json

Known Issues & TODO
- Image element rendering disabled (Fabric.js compatibility investigation)
- Text editing UI controls needed (font, size, color pickers)
- Delete/undo functionality pending
- Print area alignment needs visual verification
- "Add to Cart" integration with design serialization pending

Testing Artifacts
- check_*.js: Product verification scripts for debugging

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

check_front_back.js

@@ -0,0 +1,38 @@
+const { PrismaClient } = require('@prisma/client');
+const prisma = new PrismaClient();
+
+async function main() {
+  const products = await prisma.product.findMany({
+    where: {
+      slug: {
+        in: ['awd-t-shirt-at001', 'awd-hoodie']
+      }
+    },
+    select: {
+      'slug': true,
+      'name': true,
+      'imageUrl': true,
+      'imageUrlBack': true,
+      'colorPhotos': true,
+      'colorPhotosBack': true,
+      'printArea': true,
+      'printAreaBack': true
+    }
+  });
+
+  products.forEach(p => {
+    console.log(`\n${p.name} (${p.slug}):`);
+    console.log(`  Base Images: front=${!!p.imageUrl}, back=${!!p.imageUrlBack}`);
+    const colorPhotos = p.colorPhotos ? JSON.parse(p.colorPhotos) : {};
+    const colorPhotosBack = p.colorPhotosBack ? JSON.parse(p.colorPhotosBack) : {};
+    console.log(`  Color Photos: front=${Object.keys(colorPhotos).length}, back=${Object.keys(colorPhotosBack).length}`);
+    console.log(`  Print Areas: front=${!!p.printArea}, back=${!!p.printAreaBack}`);
+  });
+}
+
+main()
+  .then(() => process.exit(0))
+  .catch(err => {
+    console.error(err);
+    process.exit(1);
+  });