Session 13: Cover Creator, 3D Book Mockups, Vendor Research Update

Date: March 9, 2026 Focus: Cover design feature, 3D book size comparison, Blurb API correction, client communication

Work Completed

1. Print-on-Demand Research Update (1 SP)

What Changed:

• Discovered Blurb's API is enterprise/partner-only (requires sales contact and contract) — not self-service as previously documented
• Updated POD research doc to correct Blurb API status and bias recommendation toward Lulu as primary and only automated vendor
• Published client-facing page at notes.ath.how explaining the Lulu-first print vendor decision for Sheri

Files Modified:

• docs/planning/print-on-demand-research.md — Corrected Blurb API status, updated recommendation, added March 2026 findings callout

2. 3D Book Size Comparison (3 SP)

What Changed:

• Rewrote size comparison strip with true 3D CSS book mockups
• Books render at proportional scale (PX_PER_INCH = 20) so sizes are visually comparable
• Hover reveals spine via rotateY(30deg) — left side rotates toward viewer
• Spine positioned with transform-origin: right center; transform: translateX(-14px) rotateY(-90deg)
• Updated all 6 featured sizes to Lulu-only (removed Blurb sizes from featured list)
• Added when-to-choose descriptions (photo-heavy, text-heavy, landscape, etc.)
• Removed all Lulu branding from customer-facing UI (protects margin)
• Fixed Astro style scoping issue — <style is:global> required for dynamically injected HTML

Files Modified:

• src/pages/dashboard/[bookId]/sizes.astro — Complete rewrite with 3D mockups, comparison strip, detail cards
• src/lib/book-sizes.ts — Added description field, updated FEATURED_SIZES to Lulu-only, added guidance descriptions

Technical Details: CSS 3D transforms with perspective: 800px, transform-style: preserve-3d on the container, and rotateY(30deg) on hover. The spine is an absolutely positioned div that folds 90deg into the screen from the left edge of the cover. Astro scopes <style> blocks by default via data attributes, which don't apply to elements created via innerHTML at runtime — must use <style is:global>.

3. Cover Creator Feature (5 SP)

What Changed:

• New CoverDesign TypeScript interface and defaults stored as JSONB on books.cover_design
• Database migration adding cover_design column
• Full React component with live preview and tabbed controls:
  • Colors tab: 8 curated color presets (Classic Cream, Elegant Navy, Deep Teal, Warm Rose, Forest, Midnight, Soft White, Lavender)
  • Photo tab: Upload photo or pick from contributor submission photos; size/shape/position controls
  • Text tab: Title/subtitle editing with font family (serif/sans), size, color
  • Style tab: Decorative line toggle and color
• Auto-saves after 1.5s of inactivity via debounced timer
• Astro page at /dashboard/{bookId}/cover following existing mount pattern (createRoot)
• "Design Cover" nav link added to dashboard (gold, next to "Compare Sizes" with separator)
• PDF rendering supports custom cover design — falls back to legacy cover when no design saved

New Files:

• src/lib/cover-design.ts — CoverDesign interface, defaults, color presets, helpers
• src/components/CoverCreator.tsx — React component with live preview + controls
• src/pages/dashboard/[bookId]/cover.astro — Astro page mounting CoverCreator
• supabase/migrations/20260309000000_add_cover_design.sql — ALTER TABLE migration

Modified Files:

• src/components/TributeBookPDF.tsx — New renderCoverPage() with custom cover support
• src/components/PDFDownloadButton.tsx — Added coverDesign prop passthrough
• src/components/PDFGenerator.tsx — Added coverDesign prop passthrough
• src/pages/dashboard/[bookId].astro — "Design Cover" link + JS wiring

4. Client Communication Page

• Published notes.ath.how page for Sheri: vendor comparison, all Lulu sizes, book mockups, printing flow timeline, cover specs, Blurb future path
• Corrected CTA from "Reply in Signal" to email/phone (Signal is internal tracking only)

Decisions Made

1. Lulu as sole automated vendor — Blurb API requires enterprise partnership; not viable for MVP
2. No vendor names shown to customers — Protects margin, customers don't need to know fulfillment vendor
3. 6 Lulu featured sizes — US Trade 6x9, Small Square 7.5x7.5, Executive 7x10, Square 8.5x8.5, Full Page 8.5x11, Small Landscape 9x7
4. Cover design stored as JSONB — Flexible schema for future cover features without migrations
5. Auto-save with debounce — 1.5s idle timer for cover edits; no explicit save button needed

Database Changes

Migrations:

• 20260309000000_add_cover_design.sql — ALTER TABLE books ADD COLUMN IF NOT EXISTS cover_design jsonb;

Blockers & Challenges

Blocker: Supabase CLI Auth

Issue: db push failed with SASL auth error Resolution: Ran migration via Supabase management API (curl POST to /v1/projects/.../database/query), then authenticated CLI with npx supabase login --token

Challenge: Astro Style Scoping

Issue: CSS classes not applying to book mockups — elements created via innerHTML don't receive Astro's scoped data attributes Resolution: Changed <style> to <style is:global>

Challenge: 3D Book Rotation Direction

Issue: rotateY(-25deg) rotated right side toward viewer instead of left (spine) Resolution: Positive rotateY(30deg) brings left side forward; spine transform uses transform-origin: right center; transform: translateX(-14px) rotateY(-90deg)

Next Steps

• Test cover creator end-to-end with Sheri
• Wire cover design into preview page (/preview/[code].astro)
• Add Lulu pod_package_id values to book-sizes.ts for API integration
• Integrate Lulu print-job-cost-calculations API for real-time pricing
• Build print order checkout flow (Stripe → Lulu API)
• Explore Blurb enterprise partnership for premium photo book tier

File Changes Summary

New: 4 files (cover-design.ts, CoverCreator.tsx, cover.astro, migration) Modified: 8 files (TributeBookPDF, PDFDownloadButton, PDFGenerator, book-sizes, sizes.astro, [bookId].astro, POD research, settings)

Generated with Claude Code Co-Authored-By: Claude noreply@anthropic.com