@antontranelis/money-printer 1.0.18 → 1.0.20

package/README.md

@@ -1,133 +1,163 @@
-# Money Generator
+# Money Printer
 
 Create personalized time vouchers that look like real currency. Design your own "Zeitgutscheine" (time vouchers) with custom portraits, names, and descriptions - perfect as unique gifts.
 
-![Money Generator Preview](docs/preview.png)
+**[Live Demo](https://antontranelis.github.io/money-printer/)**
 
 ## Features
 
-- **Custom Portrait**: Upload your photo and optionally enhance it with AI for a vintage currency look
+- **Custom Portrait**: Upload your photo with zoom and pan controls
+- **Background Removal**: AI-powered background removal with adjustable opacity and blur
+- **Sepia Effect**: Local vintage currency engraving effect (no API required)
 - **Personalization**: Add your name, email, and phone number
 - **Multiple Denominations**: Choose between 1, 5, or 10 hour vouchers
 - **Bilingual**: Full support for German and English
 - **High-Quality Export**: Download as print-ready PDF (A4 landscape)
-- **Portrait Zoom**: Adjust the portrait size with an intuitive zoom slider
+- **Responsive**: Works on desktop and mobile with touch support
 
-## Demo
+## Installation
 
-Try it live: [Money Generator Demo](https://yourusername.github.io/money-generator/)
+```bash
+npm install @antontranelis/money-printer
+```
 
-## Tech Stack
+## Usage
 
-- **React 19** - UI Framework
-- **TypeScript** - Type Safety
-- **Zustand** - State Management
-- **jsPDF** - PDF Generation
-- **Tailwind CSS + DaisyUI** - Styling
-- **Vite** - Build Tool
+### As a React Component
 
-## Getting Started
+```tsx
+import { MoneyPrinter } from '@antontranelis/money-printer';
 
-### Prerequisites
+function App() {
+  return <MoneyPrinter />;
+}
+```
 
-- Node.js 18+
-- npm or yarn
+### Individual Components
+
+```tsx
+import {
+  BillForm,
+  BillPreview,
+  ExportButton,
+  PortraitUpload,
+  useBillStore
+} from '@antontranelis/money-printer';
+
+function CustomEditor() {
+  const portrait = useBillStore((state) => state.portrait);
+
+  return (
+    <div>
+      <PortraitUpload />
+      <BillPreview />
+      <ExportButton />
+    </div>
+  );
+}
+```
 
-### Installation
+### Services
+
+```tsx
+import {
+  // PDF Generation
+  generateBillPDF,
+  exportBillAsPDF,
+
+  // Canvas Rendering
+  renderFrontSide,
+  renderBackSide,
+
+  // Image Effects (local, no API)
+  applyEngravingEffect,
+  resizeImage,
+  compositeWithBackground,
+  clearImageCache,
+
+  // AI Enhancement (requires API key)
+  removeBackground,
+  setApiKey,
+  hasApiKey,
+} from '@antontranelis/money-printer';
+```
 
-```bash
-# Clone the repository
-git clone https://github.com/yourusername/money-generator.git
-cd money-generator
+## Portrait Controls
 
-# Install dependencies
-npm install
+### Zoom & Pan
 
-# Start development server
-npm run dev
-```
+- **Zoom Slider**: Adjust portrait size from 50% to 200%
+- **Pan/Drag**: When zoomed in, drag the portrait to reposition (mouse & touch supported)
+- Works in both the avatar preview and the bill preview canvas
 
-### Build
+### Background Removal
 
-```bash
-# Build for production
-npm run build
+1. Toggle "Remove background" (requires Stability AI API key)
+2. Adjust **Background Opacity** (0-100%) to blend original background
+3. Adjust **Blur** (0-100%) for depth-of-field effect
 
-# Preview production build
-npm run preview
-```
+### Sepia Effect
 
-## Usage
-
-1. **Upload a Portrait**: Click the upload area or drag & drop an image
-2. **Adjust Zoom**: Use the slider to zoom in/out on your portrait
-3. **Enter Details**: Fill in your name and contact information
-4. **Choose Hours**: Select 1, 5, or 10 hours for your voucher
-5. **Add Description**: Optionally add a custom description
-6. **Download PDF**: Click the download button to get your print-ready voucher
+- Local processing, no API required
+- Adjustable intensity (0-100%)
+- Applies vintage currency engraving look
 
-## AI Portrait Enhancement (Optional)
+## AI Features (Optional)
 
-The app includes optional AI-powered portrait enhancement using Stability AI. This transforms your photo into a vintage currency engraving style.
+Background removal uses Stability AI. To enable:
 
-To enable:
 1. Get an API key from [Stability AI](https://stability.ai/)
-2. Click "Add API Key for better results" in the app
-3. Or set the environment variable: `VITE_STABILITY_API_KEY=your-key`
+2. Click "Remove background" toggle in the app
+3. Enter your API key when prompted
 
-Without an API key, a basic canvas-based enhancement is available.
+The sepia/engraving effect runs locally and doesn't require an API key.
 
-## Customization
+## Tech Stack
+
+- **React 18/19** - UI Framework
+- **TypeScript** - Type Safety
+- **Zustand** - State Management
+- **jsPDF** - PDF Generation
+- **Canvas API** - Image Processing
 
-### Templates
+## Templates
 
-Templates are located in `public/templates/`. The app supports two template sets:
+The package includes two template sets:
 
-- **German (DE)**: High-DPI templates (6144x4096px)
+- **German (DE)**: High-DPI templates (6144x3200px)
 - **English (EN)**: Standard-DPI templates (1536x1024px)
 
-To customize, replace the template images and update the layout coordinates in `src/constants/templates.ts`.
+Templates are bundled in `public/templates/`.
 
-### Translations
+## Development
 
-All text is internationalized. Add or modify translations in `src/constants/translations.ts`.
+```bash
+# Clone the repository
+git clone https://github.com/antontranelis/money-printer.git
+cd money-printer
 
-## Project Structure
+# Install dependencies
+npm install
 
-```
-src/
-├── components/          # React components
-│   ├── BillForm.tsx     # Main form container
-│   ├── BillPreview.tsx  # Canvas preview
-│   ├── ExportButton.tsx # PDF download
-│   ├── PortraitUpload.tsx
-│   └── ...
-├── services/            # Core services
-│   ├── pdfGenerator.ts  # PDF creation
-│   ├── canvasRenderer.ts # Canvas drawing
-│   └── stabilityAI.ts   # AI enhancement
-├── stores/              # Zustand stores
-│   └── billStore.ts     # App state
-├── types/               # TypeScript types
-├── constants/           # Templates & translations
-└── hooks/               # Custom React hooks
-```
+# Start development server
+npm run dev
 
-## Contributing
+# Build library
+npm run build:lib
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+# Build standalone app
+npm run build
+```
 
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
-3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
-4. Push to the branch (`git push origin feature/AmazingFeature`)
-5. Open a Pull Request
+## Performance Optimizations
 
-## License
+The image processing is optimized for smooth performance:
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+- **Image Caching**: Avoids reloading the same data URLs
+- **Uint32Array**: Fast pixel manipulation for sepia effect
+- **Reusable Canvas**: Reduces garbage collection pressure
+- **Debounced Updates**: Slider changes are debounced to prevent lag
 
-## Acknowledgments
+## License
 
-- Inspired by the concept of "Zeitgutscheine" (time vouchers) as meaningful gifts
-- Built with modern React patterns and best practices
+MIT License - see [LICENSE](LICENSE) for details.