diff --git a/README.md b/README.md index 834c24e..1f4be6a 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Built with **Next.js 16**, **React 19**, and **Tailwind CSS 4**, Kit UI delivers ## 🚀 The Toolkit -Kit UI currently ships **7 tools**: +Kit UI currently ships **8 tools**: ### 🎨 [Color](./app/(app)/color) — Color Manipulation Modern color manipulation toolkit with palette generation and format conversion. @@ -59,6 +59,13 @@ Visual editor for CSS `@keyframe` animations with live preview and export. - **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 @@ -80,6 +87,7 @@ Visual editor for CSS `@keyframe` animations with live preview and export. - **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) @@ -90,7 +98,7 @@ Visual editor for CSS `@keyframe` animations with live preview and export. ```bash . ├── app/ # Next.js App Router (Pages & Layouts) -│ ├── (app)/ # Tool pages (color, units, ascii, media, favicon, qrcode, animate) +│ ├── (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 @@ -101,6 +109,7 @@ Visual editor for CSS `@keyframe` animations with live preview and export. │ ├── 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 @@ -109,7 +118,8 @@ Visual editor for CSS `@keyframe` animations with live preview and export. │ ├── media/ # FFmpeg & ImageMagick WASM orchestration │ ├── favicon/ # Favicon generation logic │ ├── qrcode/ # QR code generation logic -│ └── animate/ # CSS builder, presets, and defaults +│ ├── 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