[pro-web] feat: implement logo generation wizard with multi-step creation flow #601
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…igation - Add LogoGenerationWizard component with 4-step flow (Style, Direction, Refine, Confirm) - Implement dual-wizard navigation between Brand Kit and Logo Generation - Update WizardStepper to support 'brandKit' and 'logoGeneration' variants - Add checkpoint navigation indicator with FlagTriangleRight and Goal icons - Refactor BrandKitDialog to manage three views: entry, brandKit, and logoGeneration - Move Google Fonts constants to brand-kit folder for better organization - Add onGenerateLogo callback prop to WizardStepProps interface - Update CheckpointStep to transition to logo generation wizard instead of closing - Implement proper step tracking and navigation between wizards - Add variant-specific stepper styling with checkpoint prefix for logo flow
…view - Add SnapSlider component for discrete value selection with visual feedback - Implement WordmarkPreview component with auto-scaling and canvas-based measurement - Create 11 wordmark presets with typography rules (casing, tracking, weight constraints) - Add interactive controls for casing, tracking, and font weight selection - Integrate RadioGroup component for font family switching (primary/secondary) - Add wordmark state management to useWorkspaceMedia hook - Define brand-kit types: WordmarkStyle, WordmarkCasing, WordmarkFontWeight - Add font weight validation helpers (getAvailableWordmarkWeights, getFallbackWeight) - Implement LogoStyleStep with carousel-based preset selection - Create constants for wordmark presets and casing options with icons
…ction - Add LogoDirectionStep component with style selection interface - Define 12 symbol style options (monogram, geometric badge, abstract, etc.) - Define 11 wordmark style options (all caps tight/wide, title case, etc.) - Implement responsive grid layout with preview images for each style - Add conditional rendering based on selected logo style (wordmark vs symbol) - Integrate style selection with useWorkspaceMedia state management - Add navigation controls with back/continue/cancel actions - Include hover states and selected state visual feedback
…generation - Add RefineLogoStep component with 4-slot reference asset system - Create LogoReferenceSlot component for managing reference images - Implement ImagePreviewModal for full-screen image viewing - Add brand-kit checksums for fonts, palettes, and style previews - Create logo-prompt helper for building AI-ready generation prompts - Add logo-reference-assets helper for converting brand kit to reference images - Include 71 font preview images - Include 8 palette preview images - Include 12 symbol style preview images - Include 11 wordmark style preview images - Support reference upload, brand kit auto-population, and manual selection - Integrate with image generation system for logo refinement
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Reviewer's GuideImplements a new multi-step Logo Generation wizard integrated with the existing Brand Kit flow, adds a full wordmark/logo-typography system (presets, casing, weights, auto-scaling preview), extends workspace media state/actions for logo data, and introduces precomputed Google Fonts and reference-asset helpers for AI logo generation. Sequence diagram for Brand Kit checkpoint to Logo Generation wizard transitionsequenceDiagram
actor User
participant BrandKitDialog
participant BrandKitWizard
participant CheckpointStep
participant WorkspaceMedia
participant LogoGenerationWizard
User->>BrandKitDialog: open Brand_Kit_dialog
BrandKitDialog->>BrandKitWizard: render view brandKit
User->>BrandKitWizard: complete previous_steps
BrandKitWizard->>CheckpointStep: render CheckpointStep
User->>CheckpointStep: click Generate_Logo
CheckpointStep->>WorkspaceMedia: buildBrandKitData
alt activeOrganization_exists
CheckpointStep->>WorkspaceMedia: saveBrandKit
WorkspaceMedia-->>CheckpointStep: save_success
CheckpointStep->>WorkspaceMedia: clearBrandKitStep
else no_activeOrganization
Note over CheckpointStep,WorkspaceMedia: Skip_saving_brand_kit
end
CheckpointStep->>BrandKitWizard: onGenerateLogo_callback
BrandKitWizard->>BrandKitDialog: onGenerateLogo
BrandKitDialog->>BrandKitDialog: setCurrentView logoGeneration
BrandKitDialog->>LogoGenerationWizard: render LogoGenerationWizard
LogoGenerationWizard->>LogoGenerationWizard: initialize steps Logo_Style,Direction,Refine,Confirm
Sequence diagram for Refine Logo step AI generation with reference assetssequenceDiagram
actor User
participant RefineLogoStep
participant WorkspaceMedia
participant LogoPromptHelper as logo-prompt
participant LogoRefAssetsHelper as logo-reference-assets
participant ImageGen as useImageGeneration
RefineLogoStep->>WorkspaceMedia: get selectedLogoStyle
RefineLogoStep->>WorkspaceMedia: get selectedSymbolStyle
RefineLogoStep->>WorkspaceMedia: get selectedWordmarkStyle
RefineLogoStep->>WorkspaceMedia: get wordmarkName
RefineLogoStep->>WorkspaceMedia: get selectedVibes
RefineLogoStep->>WorkspaceMedia: get selectedPalette
RefineLogoStep->>WorkspaceMedia: get selectedFonts
RefineLogoStep->>LogoRefAssetsHelper: preloadLogoReferenceAssets selectedFonts,selectedPalette,selectedLogoStyle,selectedWordmarkStyle,selectedSymbolStyle
LogoRefAssetsHelper-->>RefineLogoStep: logoReferenceAssets[4]
RefineLogoStep->>WorkspaceMedia: setLogoReferenceAssets logoReferenceAssets
RefineLogoStep->>LogoPromptHelper: buildLogoPrompt selectedLogoStyle,selectedSymbolStyle,selectedWordmarkStyle,wordmarkName,selectedVibes,selectedPalette,selectedFonts
LogoPromptHelper-->>RefineLogoStep: generatedPrompt
RefineLogoStep->>RefineLogoStep: set prompt_if_not_dirty
User->>RefineLogoStep: edit_prompt_optional
User->>RefineLogoStep: click Generate_logo
RefineLogoStep->>LogoRefAssetsHelper: getLogoReferenceChecksums selectedFonts,selectedPalette,selectedLogoStyle,selectedWordmarkStyle,selectedSymbolStyle
LogoRefAssetsHelper-->>RefineLogoStep: referenceImageChecksums[]
RefineLogoStep->>ImageGen: generateImage prompt,gemini-3-pro-image-preview,referenceImageChecksums,aspectRatio_1_1
ImageGen-->>RefineLogoStep: generatedImage_or_error
RefineLogoStep->>WorkspaceMedia: handlePromptSubmit prompt
RefineLogoStep-->>User: show generated_logo_preview_or_error_state
Updated class diagram for workspace media state and brand kit logo typesclassDiagram
class WorkspaceMediaProvider {
+generatedImage
+selectedVibes
+selectedFonts
+selectedPalette
+brandKitCurrentStep
+isSavingBrandKit
+selectedLogoStyle LogoStyle
+selectedSymbolStyle SymbolStyle
+selectedWordmarkStyle WordmarkStyle
+wordmarkName string
+logoReferenceAssets LogoReferenceAsset[]
+wordmarkPreset WordmarkStyle
+wordmarkCasing WordmarkCasing
+wordmarkTracking number
+wordmarkFontWeight WordmarkFontWeight
+setSelectedLogoStyle(style)
+setSelectedSymbolStyle(style)
+setSelectedWordmarkStyle(style)
+setWordmarkName(name)
+setLogoReferenceAssets(assets)
+addLogoReferenceAsset(asset,index)
+removeLogoReferenceAsset(index)
+setWordmarkPreset(preset)
+setWordmarkCasing(casing)
+setWordmarkTracking(tracking)
+setWordmarkFontWeight(weight)
}
class LogoStyle {
<<enumeration>>
+wordmark
+symbol
}
class LogoReferenceAsset {
+type
+previewUrl string
+label string
+metadata Record
}
class SymbolStyle {
<<enumeration>>
+monogram
+geometric-badge
+soft-blob
+sharp-crest
+abstract-symbol
+literal-pictogram
+negative-space
+line-grid
+emblem-seal
+motion-arrow
+mascot-head
+pattern-tile
}
class WordmarkStyle {
<<enumeration>>
+all-caps-tight
+all-caps-wide
+title-case-neutral
+lowercase-soft
+heavy-weight
+light-weight
+condensed
+extended-wide
+small-caps
+custom-letter-tweak
+accent-touch
+color-system-set
}
class WordmarkCasing {
<<enumeration>>
+all-caps
+title-case
+lowercase
+small-caps
}
class WordmarkFontWeight {
<<enumeration>>
+extra_light
+light
+regular
+medium
+semibold
+bold
+black
}
class WordmarkPreset {
+id WordmarkStyle
+title string
+subtitle string
+casingMode
+fixedCasing WordmarkCasing
+trackingMin number
+trackingMax number
+defaultTracking number
+allowedWeights WordmarkFontWeight[]
+defaultWeight WordmarkFontWeight
+notes string
}
class CasingOption {
+id WordmarkCasing
+label string
+icon LucideIcon
}
WorkspaceMediaProvider "1" --> "*" LogoReferenceAsset : manages
WorkspaceMediaProvider --> LogoStyle
WorkspaceMediaProvider --> SymbolStyle
WorkspaceMediaProvider --> WordmarkStyle
WorkspaceMediaProvider --> WordmarkCasing
WorkspaceMediaProvider --> WordmarkFontWeight
WordmarkPreset --> WordmarkStyle
WordmarkPreset --> WordmarkCasing
WordmarkPreset --> WordmarkFontWeight
CasingOption --> WordmarkCasing
Flow diagram for logo reference assets and AI generationflowchart LR
subgraph Brand_Kit_state
A_selectedFonts["Selected fonts in WorkspaceMedia"]
B_selectedPalette["Selected palette in WorkspaceMedia"]
C_logoStyle["selectedLogoStyle"]
D_wordmarkStyle["selectedWordmarkStyle"]
E_symbolStyle["selectedSymbolStyle"]
end
subgraph Refine_Logo_step
F_preload["preloadLogoReferenceAssets"]
G_assets["logoReferenceAssets[4]"]
H_slot["LogoReferenceSlot components"]
I_checksums["getLogoReferenceChecksums"]
end
subgraph Image_generation
J_generate["useImageGeneration.generateImage"]
K_model["Gemini image model"]
end
A_selectedFonts --> F_preload
B_selectedPalette --> F_preload
C_logoStyle --> F_preload
D_wordmarkStyle --> F_preload
E_symbolStyle --> F_preload
F_preload --> G_assets
G_assets --> H_slot
H_slot --> I_checksums
A_selectedFonts --> I_checksums
B_selectedPalette --> I_checksums
C_logoStyle --> I_checksums
D_wordmarkStyle --> I_checksums
E_symbolStyle --> I_checksums
I_checksums --> J_generate
J_generate --> K_model
subgraph Checksum_lookup
L_fonts["BRAND_KIT_CHECKSUMS.fonts"]
M_palettes["BRAND_KIT_CHECKSUMS.palettes"]
N_wordmark["BRAND_KIT_CHECKSUMS.wordmark"]
O_symbol["BRAND_KIT_CHECKSUMS.symbol"]
end
I_checksums --> L_fonts
I_checksums --> M_palettes
I_checksums --> N_wordmark
I_checksums --> O_symbol
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Contributor
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Comment |
- Create SelectableCarousel generic component for item selection with pagination - Extract carousel logic from ColorsStep to shared component - Extract carousel logic from LogoStyleStep to shared component - Remove duplicate carousel state management (carouselApi, currentPage, totalPages) - Simplify palette and preset selection with declarative API - Support generic items with getKey, isSelected, and onSelect callbacks - Reduce code duplication across brand kit wizard steps
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📖 Description
🚧 Work in Progress
Implements a comprehensive Logo Generation wizard integrated with the Brand Kit system, enabling users to create professional wordmark and symbol logos through a guided AI-powered process. This PR introduces the foundation for a 4-step logo creation workflow with a fully functional interactive wordmark designer featuring 11 typography presets, live preview, and dynamic controls. Additional steps (Direction, Refine, Confirm) are currently in development.
✅ Changes Made
Logo Generation Wizard Architecture:
LogoGenerationWizardwith 4-step flow (Style → Direction → Refine → Confirm)BrandKitDialogto manage three views: entry, brandKit, and logoGenerationWizard Stepper Enhancement:
brandKitandlogoGenerationFlagTriangleRighticonGoalicon for final step in logo generation flowLogo Style Step (Wordmark Designer) - ✅ Complete:
LogoStyleStepwith 11 wordmark preset templatesWordmarkPreviewcomponent with auto-scaling typography using canvas measurementsSnapSlidercomponent for discrete value selection with keyboard navigationRadioGroupcomponentWordmark System & Typography:
getAvailableWordmarkWeights,getFallbackWeightGoogle Fonts Refactoring:
lib/constants/google-fonts.tstolib/constants/brand-kit/google-fonts.tsFONT_WEIGHTS_BY_FAMILYconstant with available weights per fontWordmarkFontWeighttype with semantic names (extra light to black)Additional Wizard Steps - 🚧 In Progress:
LogoDirectionStepplaceholder (style selection interface)RefineLogoStepplaceholder (reference assets system)LogoConfirmStepplaceholder (download assets)Brand Kit Reference Assets (102 images):
/public/brand-kit/fonts//public/brand-kit/palettes//public/brand-kit/symbol//public/brand-kit/wordmark/State Management Extensions:
useWorkspaceMedia:selectedLogoStyle,selectedSymbolStyle,selectedWordmarkStylewordmarkName,logoReferenceAssets(4-slot array)wordmarkPreset,wordmarkCasing,wordmarkTracking,wordmarkFontWeightsetSelectedLogoStyle,setWordmarkName,addLogoReferenceAsset,removeLogoReferenceAsset,setWordmarkPreset, etc.Type Definitions:
SymbolStyle(12 options),WordmarkStyle(11 presets),WordmarkCasing(4 modes),WordmarkFontWeight(7 weights)WordmarkPreset,CasingOption,LogoStyle,LogoReferenceAssetinterfacesUI Components:
RadioGroupandRadioGroupItemfrom Radix UIWizardStepPropsto include optionalonGenerateLogocallback🖼️ Media (screenshots/videos)
https://www.loom.com/share/a2026741139a459eb31b8c1b95b25fe2
Summary by Sourcery
Introduce a multi-step AI-assisted logo generation flow integrated with the Brand Kit, including a completed wordmark style step, foundational direction/refinement/confirmation steps, and supporting typography and asset infrastructure.
New Features:
Enhancements:
Build: