README.md

# 🛠️ Kit UI 

[![Production](https://img.shields.io/badge/Production-kit.pivoine.art-blue?style=for-the-badge)](https://kit.pivoine.art)
[![Next.js](https://img.shields.io/badge/Next.js-16-black?style=for-the-badge&logo=next.js)](https://nextjs.org)
[![React](https://img.shields.io/badge/React-19-61DAFB?style=for-the-badge&logo=react)](https://react.dev)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-38B2AC?style=for-the-badge&logo=tailwind-css)](https://tailwindcss.com)

**Kit UI** is a high-performance, aesthetically pleasing toolkit for developers and designers. It consolidates essential creative tools—from color manipulation and CSS animation editing to ASCII art generation—into a single, unified workspace.

Built with **Next.js 16**, **React 19**, and **Tailwind CSS 4**, Kit UI delivers a lightning-fast, glassmorphic experience with a focus on precision and accessibility.

---

## 🚀 The Toolkit

Kit UI currently ships **8 tools**:

### 🎨 [Color](./app/(app)/color) — Color Manipulation
Modern color manipulation toolkit with palette generation and format conversion.
- **Color Playground**: Interactive HSL/RGB/HEX manipulation with real-time analysis.
- **Accessibility Suite**: WCAG 2.1 Contrast Checker and a real-time Colorblindness Simulator.
- **Generative Tools**: Harmony generator (Analogous, Triadic, etc.), Palette Generator, and Gradient Architect.
- **WASM Powered**: Utilizes `@valknarthing/pastel-wasm` for high-performance color calculations.

### 📐 [Units](./app/(app)/units) — Units Converter
Smart unit converter with 187 units across 23 categories.
- **187+ Units**: Length, Mass, Temperature, Force, Digital Storage, and more.
- **Real-time Bidirectional Conversion**: Instant results as you type with fuzzy search.
- **Favorites & History**: Save your most-used conversions for instant access.

### ✍️ [ASCII](./app/(app)/ascii) — ASCII Art Generator
Create stunning text banners, terminal art, and retro designs.
- **373 Fonts**: From classic `Standard` to complex 3D and cursive styles.
- **Real-time Preview**: See your ASCII art transform as you type.
- **Multi-Export**: Copy as raw text, download `.txt` files, or export as `.png` images.

### 🎬 [Media](./app/(app)/media) — Media Converter
Privacy-first, local-only media conversion powered by WebAssembly.
- **Video & Audio**: Transcode between MP4, WebM, MP3, WAV, and more using FFmpeg.
- **Image Processing**: Convert and resize PNG, JPG, WebP, and SVG via ImageMagick.
- **Zero Server Uploads**: All processing happens locally in your browser.

### 🌐 [Favicon](./app/(app)/favicon) — Favicon Generator
Complete favicon and PWA asset generation for modern web presence.
- **Complete Icon Set**: Standard favicons, Apple Touch icons, and Android Chrome icons.
- **PWA Manifest**: Automatically generates a standards-compliant `site.webmanifest`.
- **HTML Snippets**: Copy-paste ready `<head>` tags for easy integration.

### 🔲 [QR Code](./app/(app)/qrcode) — QR Code Generator
Generate QR codes with live preview and full customization.
- **Custom Colors**: Foreground, background, and logo overlay support.
- **Error Correction**: Configurable L / M / Q / H error correction levels.
- **Export**: Download as PNG or SVG directly from the browser.

### 🎞️ [Animate](./app/(app)/animate) — CSS Animation Editor
Visual editor for CSS `@keyframe` animations with live preview and export.
- **Visual Keyframe Timeline**: Drag keyframes, set per-frame transforms and visual properties.
- **20+ Built-in Presets**: Entrance, exit, attention seekers, and special effects.
- **Live Preview**: Real-time preview with speed control and element selector.
- **Export**: Plain CSS or Tailwind v4 `@utility` format.

### 🧮 [Calculate](./app/(app)/calculate) — Calculator & Grapher
Advanced mathematical expression evaluator with an interactive function grapher.
- **Full Math.js Engine**: Trig, logarithms, complex numbers, matrices, factorials, combinatorics, and more.
- **Named Variables**: Define and reuse variables (`x = 5`) across expressions and graph functions.
- **32 Quick-Insert Keys**: One-click constants (π, e, φ) and functions (sin, ln, gcd, nCr…).
- **Interactive Graph**: Plot up to 8 simultaneous color-coded functions with pan (drag) and zoom (scroll); crosshair tooltip shows coordinates and per-function values.

---

## ✨ Core Features

- 🎭 **Glassmorphic UI**: A modern, translucent aesthetic with smooth Framer Motion transitions.
- ⚡ **Turbopack Optimized**: Built for speed using the latest Next.js 16 Turbopack engine.
- 📱 **Full PWA Support**: Installable application with offline usage capabilities and service worker integration.
- ♿ **Accessibility First**: Integrated tools to ensure your designs meet global standards.
- 📱 **Responsive & Fluid**: Tailored experience across mobile, tablet, and desktop.
- 🛠️ **Developer Friendly**: Keyboard shortcuts, command palettes, and URL-state sharing.
- 🐳 **Production Ready**: Full Docker & Nginx integration for seamless deployment.

---

## 💻 Tech Stack

- **Framework**: [Next.js 16](https://nextjs.org) (App Router, Static Export)
- **Library**: [React 19](https://react.dev)
- **Styling**: [Tailwind CSS 4](https://tailwindcss.com) (CSS-first configuration)
- **Animations**: [Framer Motion](https://www.framer.com/motion/)
- **State Management**: [Zustand](https://github.com/pmndrs/zustand) & [React Query](https://tanstack.com/query)
- **Math Engine**: [Math.js 15](https://mathjs.org) (expression evaluation, compilation cache)
- **Icons**: [Lucide React](https://lucide.dev)
- **Type Safety**: [TypeScript 5](https://www.typescriptlang.org)

---

## 🏗️ Project Structure

```bash
.
├── app/                  # Next.js App Router (Pages & Layouts)
│   ├── (app)/            # Tool pages (color, units, ascii, media, favicon, qrcode, animate, calculate)
│   ├── manifest.ts       # PWA manifest generation
│   └── api/              # Backend API routes
├── components/           # Reusable UI & Logic Components
│   ├── color/            # Color-specific components
│   ├── units/            # Converter-specific components
│   ├── ascii/            # ASCII-specific components
│   ├── media/            # Media conversion components
│   ├── favicon/          # Favicon-specific components
│   ├── qrcode/           # QR code components
│   ├── animate/          # CSS animation editor components
│   ├── calculate/        # Calculator & grapher components
│   └── ui/               # Base Atomic Components (Buttons, Cards, etc.)
├── lib/                  # Business Logic & Utilities
│   ├── color/            # WASM wrappers & Color logic
│   ├── units/            # Conversion algorithms
│   ├── ascii/            # Font loading & ASCII generation
│   ├── media/            # FFmpeg & ImageMagick WASM orchestration
│   ├── favicon/          # Favicon generation logic
│   ├── qrcode/           # QR code generation logic
│   ├── animate/          # CSS builder, presets, and defaults
│   └── calculate/        # Math.js engine, graph sampler, Zustand store
├── public/               # Static assets & ASCII fonts
├── Dockerfile            # Multi-stage Docker build
└── nginx.conf            # Production Nginx configuration
```

---

## 🛠️ Development & Deployment

### Prerequisites
- **Node.js**: 20.x or higher
- **pnpm**: 9.x or higher

### Local Development
```bash
# Clone and install
pnpm install

# Start development server with Turbopack
pnpm dev
```

### Production Build
```bash
# Build for static export
pnpm build

# The output will be in the /out directory
```

### Docker Deployment
```bash
# Build locally
docker build -t kit-ui .

# Run with Nginx
docker run -p 80:80 kit-ui
```

---

## 📈 Performance & Optimization

- **Static Site Generation (SSG)**: Entire toolkit is exported as static HTML/JS for sub-second load times.
- **Client-Side WASM**: Complex processing (FFmpeg, ImageMagick, Color) is offloaded to WebAssembly for native-level performance without server latency.
- **CSS-First Configuration**: Leveraging Tailwind 4's native CSS variables for zero-runtime styling overhead.
- **Automatic CI/CD**: GitHub Actions pipeline for multi-architecture Docker builds.

---

## 📝 License

© 2026 [pivoine.art](https://pivoine.art). All rights reserved.