Krasola — Multi-Utility Creative Workspace

An ultra-fast, client-first design studio and prototyping workspace.
Generate harmonious color schemes, procedural SVG patterns, customize 1,000+ vector icons, process canvas photos, and sync assets directly in browser sandboxes.

Explore Live Workspace · Changelog · Report Bug · Request Feature

---

✨ Features & Integrated Studios

• 🎨 Palette Lab: Generate mathematically verified color harmonies (Monochromatic, Analogous, Complementary, Triadic, Tetradic, Split-Complementary) with real-time WCAG 2.1 AA/AAA contrast verification.
• 📐 Pattern Studio: 16 procedural vector pattern formulas (Isometric Cubes, Bézier Waves, Hexagons, Tech Grid, Polka Dots) with instant inline SVG DataURI export.
• ⚡ Icon Finder: Search and customize 1,000+ Lucide vector icons with live stroke width, pixel sizing, active palette tinting, and 1-click React JSX export.
• 🖼️ Image Studio: 60fps client-side HTML5 canvas filters, dominant 5-color palette extraction, and WebP compression.
• ☁️ Cloud Vault: Dual-storage engine supporting offline LocalStorage persistence and authenticated Supabase PostgreSQL cloud sync.
• ⌨️ Command Palette: Universal Ctrl + K / Cmd + K navigation across all studios, themes, and actions.
• 📱 Mobile-First PWA: Installable standalone application with offline service worker caching, 48px touch targets, and automatic update alerts.
• 🎭 16 Curated Themes: Instant theme switching powered by CSS Custom Property token architecture.

---

🚀 Quickstart

Prerequisites

• Node.js: v18.0.0 or higher
• npm / pnpm / yarn

Installation

1. Clone the repository:

   git clone https://github.com/Ambrisoft/Krasola.git
   cd Krasola

2. Install dependencies:

   npm install

3. Configure Environment Variables (Optional): Copy the example environment file:

   cp .env.example .env

   (Krasola runs in full offline sandbox mode without Supabase credentials. Add Supabase URL and Anon Key only if you wish to enable authenticated cloud sync).

4. Start Development Server:

   npm run dev

   Open http://localhost:5173 in your browser.

---

🛠️ Scripts & Release Engineering

Script	Command	Description
Development	npm run dev	Starts Vite local development server.
Production Build	npm run build	Compiles optimized production bundle in dist/.
Preview	npm run preview	Previews production build locally.
Patch Release	npm run release:patch	Bumps SemVer patch 0.0.X, synchronizes PWA cache, and builds.
Minor Release	npm run release:minor	Bumps SemVer minor 0.X.0 for new features.

---

🏗️ Architecture & Tech Stack

• Frontend Core: React 18 + Vite 6
• Styling & Tokens: Tailwind CSS + CSS Custom Properties (--app-bg, --app-accent)
• Iconography: Lucide React
• Backend & Cloud Auth: Supabase (PostgreSQL with Row Level Security)
• PWA & Caching: Custom Service Worker (sw.js) with cache busting & update listener

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!
Please review our CONTRIBUTING.md and CODE_OF_CONDUCT.md before submitting pull requests.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'feat: Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

🔒 Security

For security vulnerabilities and responsible disclosure, please refer to SECURITY.md.

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

_{Crafted with pride by Ambrisoft Technologies}