Build Multi-Format Logo Export Modal + Branding Guide Button (No Favicon)

Stack & style: React + TypeScript + Tailwind + shadcn/ui, lucide-react for icons. Keep current theme.

Goal

Add a “Download” flow that lets users select multiple export formats for the current logo, then downloads a single ZIP. Add a second button that sends the current logo + brand metadata to the Branding Guide Generator (no modal).

Note: Favicon export is out of scope. We’ll add a separate Icon-Only Generator later that exports from an isolated icon layer (no text).

UI

Buttons (top-right of preview or toolbar):

Primary: Download

Secondary (ghost): Generate Branding Guide

Download → Modal:

Title: Export Logo Files

Description: “Choose formats to export. We’ll bundle them in one ZIP.”

Checkbox list (with helper text):

SVG — Scalable vector; editable in Figma/Illustrator; web-ready

PNG — Transparent; web/docs. Sizes: 256/512/1024 px

JPEG — Compressed (no alpha); social/email (1024 px)

PDF — Print-ready; preserves vector when possible

EPS — Vector for pro print vendors

(Optional) WEBP — Modern compressed raster (1024 px)

If PNG is checked, show size options [256, 512, 1024] (pre-checked).

Footer: Cancel (ghost) | Confirm & Download (primary)

Small note: “Large exports may take a few seconds.”

Branding Guide button (no modal):

POST { svgMarkup, brandName, colors, fonts } to POST /api/branding-guide/queue.

Success toast: “Branding Guide requested — we’ll notify you when it’s ready.”

Data & inputs

Source of truth: svgMarkup: string.

Brand data: brandMeta: { brandName: string; colors: string[]; fonts: string[] }.

Implementation
Files

components/export/ExportModal.tsx

lib/exporters/svg.ts → normalizeSvg(svg: string): string

lib/exporters/png.ts → svgToPng(svg: string, size: number): Promise<Blob>

lib/exporters/jpeg.ts → pngToJpeg(png: Blob): Promise<Blob>

lib/exporters/pdf.ts → svgToPdf(svg: string): Promise<Blob> (use pdf-lib)

lib/exporters/eps.ts → svgToEps(svg: string): Promise<Blob> (graceful fallback allowed)

lib/exporters/webp.ts (optional) → pngToWebp(png: Blob): Promise<Blob>

lib/zip.ts → bundle with JSZip

Wire in components/toolbar/LogoActions.tsx (or existing toolbar)

Behavior

Validate at least one format selected.

SVG: minify, ensure viewBox, inline styles, preserve preserveAspectRatio="xMidYMid meet".

PNG: render via offscreen <canvas> at selected sizes (keep alpha).

JPEG: draw white background, 1024 px.

WEBP (optional): 1024 px from PNG pipeline.

PDF: center art on Letter/A4 using pdf-lib; vector preferred (allow raster fallback if needed).

EPS: attempt SVG→EPS; if unavailable in browser, skip and show toast: “EPS unavailable in this environment.” (Include comment explaining desktop/server export option.)

Create brandname_logo_export.zip with:

/{brandName}/
  logo.svg                (if selected)
  logo-256.png            (if selected)
  logo-512.png
  logo-1024.png
  logo-1024.jpg           (if selected)
  logo.webp               (if selected)
  logo.pdf                (if selected)
  logo.eps                (if selected)
  README.txt


Show loading state on confirm; toasts for success/error; partial success still zips what succeeded.

README.txt (include as-is)
Common Logo File Types

SVG → Vector (scales infinitely). Editable in Figma/Illustrator. Essential for web/app usage.
PNG → Raster, transparent background. For websites, presentations, docs. Included sizes: 256/512/1024 px.
JPEG → Raster, compressed (no transparency). Good for social/email. Included size: 1024 px.
PDF → Print-ready, preserves vector when possible. Printers love this.
EPS → Industry-standard vector for signage/embroidery/swag (if included).

Tip: Use SVG for design & high-quality web; PNG for transparent placements; JPEG for quick previews; PDF/EPS for professional print.

shadcn components

Use Dialog, Checkbox, Button, Label, Separator, ScrollArea, and your toast system.

Acceptance criteria

Modal opens, validates, and exports only selected formats/sizes.

Transparent PNGs are crisp; JPEG has white background; PDF centered; EPS handled or gracefully skipped.

Branding Guide request POSTs and toasts success.

Comment hook for future Icon-Only Generator
// Future: Icon-Only Generator (favicons/app icons)
// Requires the editor to maintain separate SVG layers/groups:
// <g id="icon-layer">…</g> and <g id="text-layer">…</g>
// Export pipeline would render only #icon-layer at 16/32/48/180/512 px, etc.