@howssatoshi/quantumcss 1.7.2 → 1.7.4

package/README.md

@@ -1,8 +1,8 @@
 # Quantum CSS - Next-Generation Utility Framework
 
-![Quantum CSS](https://img.shields.io/badge/Quantum%20CSS-v1.7.2-blue)
+![Quantum CSS](https://img.shields.io/badge/Quantum%20CSS-v1.7.3-blue)
 ![License](https://img.shields.io/badge/license-MIT-green)
-![Bundle Size](https://img.shields.io/badge/bundle%20size-24%20KB%20(gzipped)-brightgreen)
+![Bundle Size](https://img.shields.io/badge/bundle%20size-18%20KB%20(gzipped)-brightgreen)
 
 A modern, performance-optimized utility-first CSS framework with semantic naming, recursive component presets, and advanced cosmic effects.
 
@@ -13,12 +13,14 @@ A modern, performance-optimized utility-first CSS framework with semantic naming
 - **Recursive Component Presets** - Define custom components in config using existing utilities.
 - **Cosmic Animation Library** - Advanced effects like parallax nebula drifts and orbit paths.
 - **High Contrast Mode** - Native support for `prefers-contrast` and `forced-colors`.
-- **JIT Dark Mode** - Dynamic generation of dark mode variants via `dark:` prefix.
+- **JIT Attribute Mode** - Clean separation of concerns via semantic attributes (`hover`, `md`, `dark`).
 
 ### Developer Experience
 - **Advanced CLI Scaffolding** - Instantly generate pre-styled templates (Gaming, Blog, News, Shopping, Travel)
 - **Dynamic Documentation** - Generate a "Kitchen Sink" overview of your unique design tokens
 - **Unified Naming Standard** - Consistent `--q-` prefix for all CSS variables (e.g., `--q-color-primary`).
+- **Attribute-Driven Styling** - No more monolithic class strings! Use dedicated attributes for environment and interactivity.
+- **Zero-Escape CSS** - 100% clean CSS output without risky backslash escapes.
 - **TypeScript Support** - Full type definitions
 - **Zero Configuration** - Works out of the box
 
@@ -28,50 +30,52 @@ A modern, performance-optimized utility-first CSS framework with semantic naming
 QuantumCSS provides powerful JIT gradient utilities with support for multiple color stops and transparency:
 - `bg-gradient-to-{r|l|t|b|tr|tl|br|bl}` - Set gradient direction
 - `from-{color}`, `via-{color}`, `to-{color}` - Define color stops
-- `from-{color}/50` - Opacity support for gradient stops
+- `from-{color}_50` - Opacity support for gradient stops (uses `_` separator)
 - `text-transparent bg-clip-text` - Create gradient text
 
-### SVG & Data Visualization
-Specialized utilities for handling complex SVG scaling and data overlays:
-- `svg-fluid` - Responsive SVG scaling
-- `vector-non-scaling` - Constant-width strokes regardless of SVG scale
-- `overlay-base` - Centered absolute-positioned data labels
-- `overlay-top-left`, `overlay-bottom-right`, etc. - Corner positioning
+### Lane-Based Attributes
+Separate your styles into semantic lanes for maximum readability:
+- **Environment**: `sm`, `md`, `lg`, `xl`, `2xl`
+- **Interactivity**: `hover`, `focus`, `active`, `group-hover`
+- **Theme**: `dark`, `light`
 
-## 📦 Installation
-
-```bash
-npm install @howssatoshi/quantumcss
+```html
+<!-- Clean, Semantic, Conflict-Free -->
+<div class="grid cols-1" md="cols-3" hover="bg-primary" dark="bg-black">
+  <button class="btn-starlight" hover="scale-105" active="scale-95">
+    Launch
+  </button>
+</div>
 ```
 
-## 🎯 Quick Start
+## 📦 Installation & CLI
 
-### CLI Scaffolding
-Quickly jumpstart your project with a premium template:
+Install the core library and the JIT engine:
 ```bash
-npx @howssatoshi/quantumcss scaffold gaming index.html
+npm install @howssatoshi/quantumcss
 ```
-*Available templates: `gaming`, `blog`, `news`, `shopping`, `travel`, `starlight`*
 
-### HTML Usage
-```html
-<button class="btn-starlight ani-float">
-  Launch Experience
-</button>
-```
+### Command Line Interface
+QuantumCSS includes a powerful CLI for project orchestration:
+
+- **`npx quantumcss init`** - Generate a default `quantum.config.json`.
+- **`npx quantumcss build [output]`** - Generate the JIT CSS bundle (default: `dist/quantum.css`).
+- **`npx quantumcss watch [output]`** - Automatically rebuild when your HTML or config changes.
+- **`npx quantumcss scaffold <type>`** - Generate a starter template (`gaming`, `blog`, `travel`, etc.).
 
 ## ⚙️ Configuration
 
 ### Decoupled Component Architecture
 QuantumCSS separates structural logic from aesthetic themes for maximum reusability. Define your own components in `quantum.config.json` by combining these layers:
 
-**1. Structural Base Classes**
+**1. Structural & Interactive Base Classes**
 - `nav-base` - Standard flex row navigation
 - `card-base` - Flex column container with overflow hidden
 - `btn-base` - Center-aligned interactive button
 - `input-base` - Block-level form input
 - `dialog-base` - Centered modal container
 - `badge-base` - Inline-flex status indicator
+- `focus-glow` - Premium cosmic focus state (soft colored glow)
 
 **2. Aesthetic Theme Classes**
 - `theme-starlight` - The iconic cosmic gradient and glow
@@ -82,7 +86,7 @@ QuantumCSS separates structural logic from aesthetic themes for maximum reusabil
 ```json
 {
   "componentPresets": {
-    "btn-action": "btn-base theme-starlight px-8 py-3",
+    "btn-action": "btn-base theme-starlight px-8 py-3 focus-glow",
     "card-premium": "card-base theme-glass-dark p-10 shadow-2xl"
   }
 }