# Badge Creation Platform PRO

An enterprise-grade badge creation and SVG rendering platform designed for law enforcement, diplomatic, security, commercial, and government agencies.

## Features

### Phase 1 - Core Builder (Current)
- ✅ Dynamic resizable badge layout (2.0" - 4.0" diameter)
- ✅ Star engine (5-10 points with customizable inner/outer radius)
- ✅ Shield builder (1-4 quadrants with image upload)
- ✅ Arc text engine (top/bottom positioning)
- ✅ Ribbon & title bar system
- ✅ Real-time SVG preview with zoom/pan
- ✅ Basic export (SVG/PNG)
- ✅ Undo/Redo history system

### Coming Soon
- Layer management system
- Manufacturing export formats (AI/EPS/DXF/PDF)
- Icon library integration
- Cloud storage and versioning
- Multi-user collaboration
- AI-assisted design
- And more...

## Tech Stack

- **Frontend**: React 18+ with TypeScript
- **Build Tool**: Vite
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui (Radix UI primitives)
- **State Management**: Zustand
- **SVG Rendering**: Native SVG DOM + custom generators
- **Drag & Drop**: React DnD

## Getting Started

### Prerequisites

- Node.js 18+ and pnpm

### Installation

1. Install dependencies:
```bash
pnpm install
```

2. Start the development server:
```bash
pnpm dev
```

3. Open your browser to `http://localhost:5173`

### Build for Production

```bash
pnpm build
```

The production build will be in the `dist` directory.

## Project Structure

```
src/
├── components/
│   ├── ui/              # shadcn/ui components
│   ├── controls/        # Badge control panels
│   ├── BadgeCanvas.tsx  # Main SVG canvas
│   └── ExportModal.tsx  # Export dialog
├── stores/
│   └── badgeStore.ts    # Zustand state management
├── types/
│   └── badge.ts         # TypeScript type definitions
├── utils/
│   └── svgGenerators.ts # SVG generation utilities
└── lib/
    └── utils.ts         # Utility functions
```

## Usage

1. **Adjust Badge Geometry**: Use the left panel to set diameter, stroke width, and dual-ring options
2. **Add Star**: Enable and configure a star with customizable points, radii, and metallic finish
3. **Configure Shield**: Set up 1-4 quadrants with background colors and images
4. **Add Text**: Create arc text (top/bottom) or ribbon text with full styling options
5. **Export**: Click the Export button to download as SVG or PNG

## Development Roadmap

See the implementation plan for detailed phases:
- Phase 1: Core Builder ✅
- Phase 2: Pro Tools (Layer Management, Advanced Exports)
- Phase 3: Cloud & Accounts
- Phase 4: Agency/Enterprise Features
- Phase 5: AI & Plugins
- Phase 6: Testing & Deployment

## License

Proprietary - All rights reserved