kit-ui/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 advanced color manipulation 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 is divided into three core specialized applications:

### 🎨 [Pastel](./app/(app)/pastel) — Professional Color Toolkit
A comprehensive suite for color theory, manipulation, and accessibility.
- **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.
- **Batch Processing**: Perform mass color operations and exports.
- **WASM Powered**: Utilizes `@valknarthing/pastel-wasm` for high-performance color calculations.

### 📐 [Units](./app/(app)/units) — Smart Unit Converter
A powerful, intuitive converter that understands the way you work.
- **187+ Units**: Supporting 23 categories including Length, Mass, Temperature, Force, and more.
- **Smart Search**: Quickly find units via a fuzzy-search command palette.
- **Visual Comparison**: Dynamic chart views for comparing scale across different units.
- **Favorites & History**: Save your most-used conversions for instant access.

### ✍️ [Figlet](./app/(app)/figlet) — ASCII Art Generator
Retro-inspired text banners for terminals and documentation.
- **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.

---

## ✨ 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.
- ♿ **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)
- **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)/            # Core Tool Pages (Pastel, Units, Figlet)
│   └── api/              # Backend API routes
├── components/           # Reusable UI & Logic Components
│   ├── pastel/           # Color-specific components
│   ├── units/            # Converter-specific components
│   ├── figlet/           # ASCII-specific components
│   └── ui/               # Base Atomic Components (Buttons, Cards, etc.)
├── lib/                  # Business Logic & Utilities
│   ├── pastel/           # WASM wrappers & Color logic
│   ├── units/            # Conversion algorithms
│   └── figlet/           # Font loading & ASCII generation
├── public/               # Static assets & Figlet 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.
- **WASM Integration**: Heavy color calculations are offloaded to WebAssembly.
- **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.