moreminimore-vibe/README-LOGO-INTEGRATION.md

# MoreMinimore Logo Integration Guide

## 🎯 Overview

The MoreMinimore update and debranding script now includes comprehensive logo replacement functionality that automatically converts your custom logo into all required formats for the Electron application.

## 📁 Logo Files Generated

### **Source Logo**
- `assets/moreminimorelogo.png` - Your original PNG logo (source for all conversions)

### **Web Assets**
- `assets/logo.svg` - SVG version for web components (TitleBar, etc.)
- `assets/logo.png` - Optimized 24x24 PNG for TitleBar

### **Electron Icons**
- `assets/icon/logo.png` - Main icon file
- `assets/icon/logo.ico` - Windows application icon
- `assets/icon/logo.icns` - macOS application icon
- `assets/icon/logo_16x16.png` through `assets/icon/logo_1024x1024.png` - Multi-resolution icons

### **Test Fixtures**
- `e2e-tests/fixtures/images/logo.png` - Logo for automated testing

## 🔄 Automatic Conversion Process

### **Image Processing Tools**
The script automatically installs required tools:
- **macOS**: ImageMagick via Homebrew
- **Linux**: ImageMagick via apt-get/yum
- **Windows**: Manual installation required

### **Conversion Steps**
1. **PNG to SVG**: Creates SVG wrapper with embedded base64 PNG data
2. **Multi-size Generation**: Creates icons in all required sizes (16x16 to 1024x1024)
3. **Platform Icons**: Generates ICO (Windows) and ICNS (macOS) files
4. **Optimization**: Creates 24x24 version for TitleBar display
5. **Test Updates**: Updates test fixtures with new logo

## 🚀 Usage

### **Full Update (Recommended)**
```bash
./scripts/update-and-debrand.sh
```
This runs the complete debranding process including logo updates.

### **Logo-Only Update**
```bash
bash -c 'source scripts/update-and-debrand.sh && update_logos'
```
This updates only the logos without running the full debranding.

## 📋 Requirements

### **Source Logo**
- Place your logo at `assets/moreminimorelogo.png`
- Recommended size: 512x512px or larger
- Format: PNG with transparency support
- Square aspect ratio works best

### **System Requirements**
- **macOS**: Homebrew (auto-installed if needed)
- **Linux**: apt-get or yum package manager
- **Windows**: ImageMagick must be manually installed

## 🔧 Technical Details

### **SVG Generation**
The script creates an SVG wrapper that embeds the PNG as base64 data:
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <image href="data:image/png;base64,..." width="128" height="128"/>
</svg>
```

### **Icon Sizes**
- **16x16**: Taskbar, small UI elements
- **32x32**: Desktop icons, medium UI elements
- **48x48**: Control panel, larger UI elements
- **64x64**: High-DPI small icons
- **128x128**: Standard application icons
- **256x256**: High-DPI application icons
- **512x512**: App Store, high-resolution displays
- **1024x1024**: Retina displays, future-proofing

### **Platform-Specific Formats**
- **ICO (Windows)**: Multi-resolution icon file
- **ICNS (macOS)**: Native macOS icon format with iconset

## 🛠️ Troubleshooting

### **ImageMagick Issues**
```bash
# Check if ImageMagick is installed
convert --version

# Install manually if needed
# macOS
brew install imagemagick

# Ubuntu/Debian
sudo apt-get install imagemagick

# CentOS/RHEL
sudo yum install ImageMagick
```

### **Base64 Encoding Issues**
The script uses cross-platform compatible base64 encoding:
```bash
base64 -i input.png -o - | tr -d '\n'
```

### **Permission Issues**
```bash
# Make script executable
chmod +x scripts/update-and-debrand.sh
```

## 📝 Backup and Restore

### **Automatic Backups**
The script automatically creates backups of all original files:
- `assets/logo.svg.backup`
- `assets/logo.png.backup`
- `assets/icon/logo.png.backup`
- `assets/icon/logo.ico.backup`
- `assets/icon/logo.icns.backup`
- `e2e-tests/fixtures/images/logo.png.backup`

### **Manual Restore**
```bash
# Restore specific files
cp assets/logo.svg.backup assets/logo.svg
cp assets/icon/logo.ico.backup assets/icon/logo.ico

# Restore all backups
find assets -name "*.backup" -exec sh -c 'mv "$1" "${1%.backup}"' _ {} \;
```

## 🎨 Design Guidelines

### **Logo Requirements**
- **Format**: PNG with transparency
- **Size**: Minimum 256x256px (recommended 512x512px)
- **Aspect Ratio**: Square (1:1) works best
- **Colors**: Works well on both light and dark backgrounds
- **Complexity**: Simple designs scale better at small sizes

### **Visibility Testing**
Test your logo at different sizes:
- **16x16**: Should be recognizable as a small icon
- **24x24**: TitleBar display size
- **32x32**: Standard icon size
- **128x128**: Full detail visible

## 🔄 Future Updates

When updating the original Dyad codebase:
1. Run `./scripts/update-and-debrand.sh`
2. The script will automatically:
   - Apply all custom features
   - Update branding
   - Replace all logos with your MoreMinimore branding
   - Generate required icon formats
   - Update test fixtures

## 📊 Integration Points

### **Code References**
- `src/app/TitleBar.tsx` - Uses `assets/logo.svg`
- `forge.config.ts` - Uses `assets/icon/logo` for Electron
- `e2e-tests/fixtures/images/logo.png` - Test fixtures

### **Build Process**
The generated icons are automatically included in the Electron build process through the `forge.config.ts` configuration.

## 🎉 Success Indicators

After successful logo integration:
- ✅ All logo files generated in correct formats
- ✅ TypeScript compilation passes
- ✅ Application builds without errors
- ✅ Logo displays correctly in TitleBar
- ✅ Application icons show MoreMinimore branding
- ✅ Test fixtures updated with new logo

## 📞 Support

If you encounter issues:
1. Check that `assets/moreminimorelogo.png` exists
2. Verify ImageMagick is installed (`convert --version`)
3. Check file permissions
4. Review script output for error messages
5. Test with a simple PNG file first

The logo integration system is designed to be robust and handle edge cases gracefully, with fallbacks when image processing tools are not available.