chaincss 2.3.0 → 2.3.2

package/README.md

@@ -1,36 +1,51 @@
 <h1 align="center">ChainCSS</h1>
 
 <p align="center">
-  <strong>The first CSS-in-JS library with true auto-detection mixed mode.</strong><br>
-  Zero runtime by default. Dynamic when you need it. No compromises.
+  <strong>The CSS-in-JS platform with compiler intelligence.</strong><br>
+  Zero runtime by default. Semantic styling. WCAG-aware. Intent-driven.
 </p>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/chaincss">
     <img src="https://img.shields.io/npm/v/chaincss" alt="npm">
   </a>
+
   <a href="https://github.com/melcanz08/chaincss/blob/main/LICENSE">
     <img src="https://img.shields.io/github/license/melcanz08/chaincss" alt="license">
   </a>
-  <a href="https://chaincss.dev">
-    <img src="https://img.shields.io/badge/docs-chaincss.dev-blue" alt="docs">
-  </a>
+
   <a href="https://github.com/melcanz08/chaincss/actions">
-    <img src="https://img.shields.io/badge/tests-258%20passed-brightgreen" alt="tests">
+    <img src="https://img.shields.io/badge/tests-708%20passed-brightgreen" alt="tests">
+  </a>
+
+  <a href="https://github.com/melcanz08/chaincss">
+    <img src="https://img.shields.io/badge/modules-17-blue" alt="modules">
   </a>
 </p>
 
 
+
 # What is ChainCSS?
 
 ChainCSS lets you write styles as **native JavaScript method chains** — no CSS syntax, no template literals, no object literals.
 
 It automatically detects which styles are static (compiled to zero-runtime CSS) and which are dynamic (stay in JS), then splits them automatically.
 
+ChainCSS is also a **CSS intelligence platform** — not just a styling library.
+
+It writes, checks, and optimizes your styles at build time with zero runtime cost.
+
 ```ts
 import { chain } from "chaincss";
 
+// A single intent expands to a full,
+// accessible, responsive card:
 const card = chain()
+  .intent("card")
+  .$el("card");
+
+// Or write explicit styles:
+const hero = chain()
   .display("flex")
   .flexDirection("column")
   .gap(16)
@@ -41,505 +56,589 @@ const card = chain()
     .boxShadow("0 4px 12px rgba(0,0,0,0.15)")
     .transform("translateY(-2px)")
   .end()
-  .$el("card");
+  .$el("hero");
 ```
 
-**No CSS syntax. No template literals. No object literals. Just JavaScript.**
+**No CSS syntax. No template literals. Compiler-enforced quality.**
 
 
-# Installation
+# Constraint-Based Styling
 
-```bash
-npm install chaincss
-```
+Declare relationships, not values. The constraint solver compiles them to native CSS at build time.
 
-## Quick Start
+**No runtime JS. No manual `calc()`. The compiler picks the best CSS feature.**
 
-| Environment | Setup |
-|---|---|
-| **Vite** | Add `chaincss()` plugin to `vite.config.ts` |
-| **Node.js** | `import { chain } from "chaincss"` |
-| **Browser CDN** | `import { chain } from "https://cdn.jsdelivr.net/npm/chaincss/dist/browser.js"` |
-| **Browser + import map** | Map `"chaincss"` to `./node_modules/chaincss/dist/browser.js` |
+---
 
+## 1. Aspect Ratios from Math
 
-## Vite Configuration
+Describe the relationship between width and height:
 
 ```ts
-// vite.config.ts
-import { defineConfig } from "vite";
-import chaincss from "chaincss/plugin/vite";
-
-export default defineConfig({
-  plugins: [chaincss({ atomic: true })],
-});
+chain()
+  .constrain("height", "= width * 0.5") // 2:1 ratio
+  .constrain("width", "< parent")       // Don't overflow container
+  .$el("video");
 ```
 
+### Compiles to
 
-# Core API
+```css
+.video {
+  aspect-ratio: 1 / 2;
+  max-width: 100%;
+}
+```
 
-## The Chain
+The solver detects `width * 0.5` and emits `aspect-ratio` instead of:
 
-Every style starts with `chain()` and ends with `$el()`.
+```css
+height: calc(width * 0.5);
+```
 
-```ts
-import { chain } from "chaincss";
+`aspect-ratio` has better performance and avoids layout shifts.
 
-const styles = chain()
-  .display("flex")
-  .padding(20)
-  .color("red")
-  .$el("my-component");
+### Tailwind Equivalent
+
+```txt
+aspect-[2/1] max-w-full
 ```
 
-## Smart Chain (Auto-Detection)
+### ChainCSS Difference
 
-```ts
-import { smartChain } from "chaincss";
+You write the math. The compiler writes the CSS.
 
-const styles = smartChain()
-  .display("flex")
-  .padding(20)
-  .color(props.textColor)
-  .fontSize(theme.sizes.lg)
-  .$el("hybrid-card");
-```
+---
+
+## 2. Container-Aware Responsive Layouts
 
-## Runtime Injection
+Use conditional constraints to generate `@container` queries automatically.
 
 ```ts
-import { chain, injectChainStyles } from "chaincss";
+chain()
+  .constrain("columns", ">= 3 when > 768px")
+  .constrain("gap", "= 24px")
+  .$el("grid");
+```
 
-const heading = chain()
-  .fs(48)
-  .fw(800)
-  .textGradient(["#6366f1", "#06b6d4"])
-  .$el("h1");
+### Compiles to
+
+```css
+.grid {
+  gap: 24px;
+}
 
-injectChainStyles({ heading });
+@container (min-width: 768px) {
+  .grid {
+    columns: 3;
+  }
+}
 ```
 
+> Requires `container-type: inline-size` on the parent.  
+> ChainCSS adds it automatically when container constraints are detected.
+
+---
 
-# Feature Reference
+## 3. Fluid Values with `clamp()`
 
-## Shorthands (80+)
+Stop calculating `clamp()` manually.
 
 ```ts
 chain()
-  .bg("#fff")
-  .m(16)
-  .p(20)
-  .br(8)
-  .fs(16)
-  .fw(700)
-  .c("#333")
-  .w(200)
-  .h(100)
-  .d("flex")
-  .z(10)
-  .op(0.5)
-  .ov("hidden")
-  .pos("relative");
+  .constrain("fontSize", "= clamp(14px, 5vw, 24px)")
+  .constrain("padding", "= clamp(16px, 4vw, 32px)")
+  .$el("hero");
 ```
 
+### Compiles to
 
-## Macros (57)
+```css
+.hero {
+  font-size: clamp(14px, 5vw, 24px);
+  padding: clamp(16px, 4vw, 32px);
+}
+```
+
+Works with:
+
+- `clamp()`
+- `min()`
+- `max()`
+- `calc()`
 
-### Layout & Display
+---
+
+## 4. Scroll-Driven Sticky Positioning
+
+"Stick this element until another element reaches the viewport."
 
 ```ts
-chain().flex();
-chain().grid();
-chain().center();
-chain().flexCenter();
-chain().gridCenter();
-chain().stack(16);
-chain().cols(3);
-chain().rows(2);
-chain().bento(4);
-chain().gridTable("200px");
+chain()
+  .constrain("sidebar", "sticky until footer")
+  .$el("sidebar");
 ```
 
-### Spacing
+### Compiles to
 
-```ts
-chain().mx(10);
-chain().my(20);
-chain().px(16);
-chain().py(24);
-chain().size(50);
-chain().gap(16);
-chain().gapX(8);
-chain().gapY(12);
-chain().inset(0);
-chain().insetX(16);
-chain().insetY(8);
+```css
+.sidebar {
+  position: sticky;
+  top: 0;
+
+  animation: sticky-sidebar 1s linear both;
+  animation-timeline: scroll();
+  animation-range: contain 0% contain 100%;
+}
+
+@keyframes sticky-sidebar {
+  to {
+    position: relative;
+  }
+}
 ```
 
-### Borders
+Zero JavaScript. Uses native `animation-timeline: scroll()` available in modern Chromium browsers.
+
+---
+
+## 5. Parent-Relative Constraints
+
+Keep elements inside their parents without writing media queries.
 
 ```ts
-chain().borderX("1px solid red");
-chain().borderY("1px solid blue");
+chain()
+  .constrain("width", "< parent")
+  .constrain("width", "> 320px")
+  .$el("modal");
 ```
 
-### Positioning
+### Compiles to
 
-```ts
-chain().absolute({ top: 0, left: 0 });
-chain().fixed({ top: 0, right: 0 });
-chain().sticky({ top: 0 });
-chain().relative();
+```css
+.modal {
+  max-width: 100%;
+  min-width: 320px;
+}
 ```
 
-### Visibility & Behavior
+---
 
-```ts
-chain().hide();
-chain().show();
-chain().unselectable();
-chain().scrollable("y");
-chain().safeArea("top");
+# How It Works
+
+The compiler parses constraint expressions and resolves them into the most optimal native CSS feature.
+
+| You Write | Compiler Resolves To | Strategy |
+|---|---|---|
+| `width < parent` | `max-width: 100%` | Direct mapping |
+| `height = width * 0.5` | `aspect-ratio: 1 / 2` | Aspect-ratio optimization |
+| `fontSize = clamp(14, 5vw, 24)` | `font-size: clamp(...)` | Native clamp |
+| `columns >= 3 when > 768px` | `@container (min-width: 768px)` | Container query |
+| `sidebar sticky until footer` | `animation-timeline: scroll()` | Scroll timeline |
+
+---
+
+## Supported Operators
+
+```txt
+<   >   <=   >=   =   !=
 ```
 
-### Shapes & Typography
+## Supported References
 
-```ts
-chain().circle(50);
-chain().square(40);
-chain().pill();
-chain().truncate();
-chain().aspect("16/9");
-chain().aspect("square");
-chain().fluidText({ min: 16, max: 24 });
-chain().lineClamp(3);
+```txt
+parent
+viewport
+self
+sibling.width
 ```
 
-### Aesthetic Effects
+## Supported Functions
 
-```ts
-chain().glass();
-chain().glass(5);
-chain().glow("#ff0000");
-chain().glow({ color: "#6366f1", size: 20 });
-chain().textGradient(["#667eea", "#764ba2"]);
-chain().meshGradient(["#f0f", "#0ff", "#ff0", "#0f0"]);
-chain().noise(0.05);
-chain().shimmer();
+```txt
+clamp()
+min()
+max()
+calc()
 ```
 
-### State & Interactions
+---
 
-```ts
-chain().clickScale(0.95);
-chain().pressable();
-chain().focusRing("#3b82f6");
-chain().skeleton(true);
+# Debugging Constraints
 
-chain()
-  .dark(c => c.bg("#1a202c").c("white"))
-  .light(c => c.bg("white").c("#1a202c"));
+See how constraints were resolved during compilation.
+
+## CLI
+
+```bash
+chaincss build --explain
 ```
 
-### Utility
+### Output
 
-```ts
-chain().fullScreen();
-chain().containerMacro(1200);
-chain().outlineDebug();
-chain().parallax(2);
-chain().frostedNav(15);
+```txt
+card: height = width * 0.5 → aspect-ratio: 1/2
+card: width < parent → max-width: 100%
 ```
 
-## Conditional Styles
+---
+
+## Programmatic Debugging
 
 ```ts
-chain()
-  .padding(12)
-  .when(isActive, c => c.background("#10b981").color("white"))
-  .when(isDisabled, c => c.opacity(0.5).cursor("not-allowed"))
-  .$el("stateful-btn");
+import { resolveConstraint } from "chaincss/compiler";
+
+const result = resolveConstraint({
+  property: "height",
+  operator: "=",
+  expression: "width * 0.5",
+});
+
+console.log(result.explanation);
+// "height = width * 0.5 → aspect-ratio: 1/2"
 ```
 
-## Nested Selectors
 
-```ts
-chain()
-  .display("flex")
-  .nest("& > *", c => c.flex(1))
-  .nest("&:first-child", c => c.fontWeight(700))
-  .nest(".child", c => c.color("red"))
-  .$el("flex-container");
+# What Makes ChainCSS Different
+
+| Capability | ChainCSS | Tailwind | StyleX | Vanilla Extract |
+|---|---|---|---|---|
+| Zero runtime | ✅ | ✅ | ✅ | ✅ |
+| Intent-based API | ✅ | ❌ | ❌ | ❌ |
+| Semantic tokens | ✅ | ❌ | ❌ | ❌ |
+| WCAG accessibility checking | ✅ | ❌ | ❌ | ❌ |
+| Responsive inference | ✅ | ❌ | ❌ | ❌ |
+| Pattern learning | ✅ | ❌ | ❌ | ❌ |
+| CSS `if()` transpiler | ✅ | ❌ | ❌ | ❌ |
+| Constraint-based styling | ✅ | ❌ | ❌ | ❌ |
+| Layout intelligence | ✅ | ❌ | ❌ | ❌ |
+| Scroll-driven animations | ✅ | ❌ | ❌ | ❌ |
+| Self-healing CSS | ✅ | ❌ | ❌ | ❌ |
+| Source-aware optimization | ✅ | ❌ | ❌ | ❌ |
+| Design system extraction | ✅ | ❌ | ❌ | ❌ |
+| 3 modes (build/runtime/hybrid) | ✅ | ❌ | ❌ | ❌ |
+
+
+
+# Installation
+
+```bash
+npm install chaincss
 ```
 
-### Mixins with use()
+
+# Quick Start
+
+| Environment | Setup |
+|---|---|
+| Vite | Add `chaincss()` plugin to `vite.config.ts` |
+| Node.js | `import { chain } from "chaincss"` |
+| Browser CDN | `import { chain } from "https://cdn.jsdelivr.net/npm/chaincss/dist/browser.js"` |
+
+
+# Intent API (v2.3)
+
+The highest-level API.
+
+Write what you want — the compiler figures out how.
 
 ```ts
-const shared = { display: "flex", alignItems: "center", gap: 8 };
-chain().use(shared).padding(20).$el("reused");
+// Layout intents
+chain().intent("center-content").$el("centered");
+chain().intent("stack").$el("stack");
+chain().intent("sidebar-layout").$el("dashboard");
+
+// Component intents
+chain().intent("card").$el("card");
+chain().intent("button-primary").$el("cta");
+chain().intent("modal").$el("dialog");
+
+// Semantic intents
+chain().intent("hero-section").$el("hero");
+chain().intent("sticky-header").$el("nav");
+
+// Interaction intents
+chain().intent("hover-lift").$el("interactive");
+chain().intent("focus-ring").$el("accessible");
 ```
 
-## Responsive Design
+Each intent triggers:
+- semantic tokens
+- responsive overrides
+- accessibility checks
+- theme adaptation
+
+—all at build time.
+
+
+
+# Semantic Tokens
 
 ```ts
 chain()
-  .display("flex")
-  .flexDirection("column")
-  .responsive("md", c => c.flexDirection("row"))
-  .media("(min-width: 1024px)", c => c.maxWidth(1200))
-  .$el("responsive");
+  .surface("interactive")
+  .text("primary")
+  .elevation("floating")
+  .spacing("comfortable")
+  .state("hover")
+  .state("focus")
+  .$el("composed");
 ```
 
-**Built-in breakpoints (20):** `sm`, `md`, `lg`, `xl`, `2xl`, `mobile`, `tablet`, `desktop`, `portrait`, `landscape`, `dark`, `light`, `reducedMotion`, `highContrast`, `print`, `hover`, `no-hover`, `fine`, `coarse`
+| Category | Available Intents |
+|---|---|
+| surface | interactive, container, overlay, sheet |
+| text | primary, secondary, muted, link |
+| elevation | flat, raised, floating, modal |
+| spacing | none, tight, compact, spacious |
+| state | hover, active, focus, disabled |
+
+
 
-## Transform Methods
+# Compiler Intelligence
+
+ChainCSS analyzes your styles at build time and reports issues before they ship.
 
 ```ts
 chain()
-  .scale(1.1)
-  .rotate("45deg")
-  .x(10)
-  .y(20)
-  .skew("5deg")
-  .$el("transformed");
+  .width("1200px")
+  .color("#999")
+  .fontSize("10px")
+  .outline("none")
+  .animation("fadeIn 1s")
+  .$el("risky-button");
 ```
 
-### Math Helpers (15)
+The compiler can:
+- detect WCAG contrast failures
+- fix invalid font sizes
+- add focus-visible fallbacks
+- wrap animations in reduced-motion queries
+- prevent mobile overflow
 
-```ts
-chain()
-.width(helpers.calc("100% - 20px"))
-.fontSize(helpers.clamp(16, 4, 24))
-.margin(helpers.add(10, 20))
-.$el("calculated");
 
-// helpers.add(), .sub(), .mul(), .div(), .sum(), .difference()
-// helpers.mpx(), .rem(), .em(), .percent(), .vw(), .vh()
-// helpers.min(), .max(), .clamp(), .round(), .rgba(), .hsla()
-// helpers.fluidType(min, max, minWidth, maxWidth)
-```
 
-## Design Tokens
+# Constraint-Based Styling
 
 ```ts
-import { createTokens } from "chaincss";
-
-const tokens = createTokens({
-  colors: {
-    primary: "#6366f1",
-    secondary: "#10b981",
-  },
-  spacing: {
-    sm: "8px",
-    md: "16px",
-    lg: "24px",
-  },
-});
+chain()
+  .constrain("width", "< parent")
+  .constrain("height", "= width * 0.5")
+  .constrain("columns", ">= 3 when > 768px")
+  .$el("responsive-card");
 ```
 
-### Theme Contracts
 
-```ts
-import { createThemeContract, createTheme, validateTheme } from "chaincss";
 
-const contract = createThemeContract({
-colors: { primary: "", background: "" },
-spacing: { sm: "", md: "" },
-});
+# Scroll Timeline Engine
 
-const light = createTheme(contract, {
-colors: { primary: "#3b82f6", background: "#fff" },
-spacing: { sm: "8px", md: "16px" },
-});
+```ts
+import {
+  createScrollAnimation,
+  compileScrollAnimation
+} from "chaincss";
 
-const theme = new Theme(light);
-theme.toCSSVariables("my-theme"); // -> :root { --my-theme-colors-primary: #3b82f6; ... }
+const fadeIn = createScrollAnimation(
+  "fadeIn",
+  ".reveal"
+);
+
+const parallax = createScrollAnimation(
+  "parallax",
+  ".bg"
+);
 ```
 
-## Recipe System (Variants)
+Native scroll-driven animations with zero JavaScript runtime.
 
-```ts
-import { recipe } from "chaincss";
 
-const button = recipe({
-base: { selectors: ["btn"], display: "inline-flex", borderRadius: "8px", fontWeight: 600 },
-variants: {
-size: {
-sm: { padding: "8px 16px", fontSize: "14px" },
-lg: { padding: "16px 32px", fontSize: "18px" },
-},
-color: {
-primary: { background: "#3b82f6", color: "white" },
-danger: { background: "#ef4444", color: "white" },
-},
-},
-defaultVariants: { size: "md", color: "primary" },
-compoundVariants: [
-{ variants: { size: "lg", color: "primary" }, style: { fontWeight: 800 } },
-],
-});
 
-const styles = button({ size: "lg", color: "danger" });
-```
+# Core API
 
-### Animations (42 presets)
+## The Chain
 
 ```ts
-chain().fadeIn().$el("el"); chain().slideInUp().$el("el");  chain().slideInUp().$el("el");
-chain().zoomIn().$el("el"); chain().bounce().$el("el"); chain().bounce().$el("el");
-chain().pulse().$el("el");  chain().spin().$el("el"); chain().spin().$el("el");
-chain().shake().$el("el");  chain().wiggle().$el("el"); chain().wiggle().$el("el");
-chain().float().$el("el");  chain().flash().$el("el");  chain().flash().$el("el");
-chain().textReveal().$el("el");
+import { chain } from "chaincss";
 
-// Custom animation
-chain().animate("myName", { "0%": { opacity: 0 }, "100%": { opacity: 1 } }, { duration: "0.5s" }).$el("el");
+const styles = chain()
+  .display("flex")
+  .padding(20)
+  .color("red")
+  .$el("my-component");
 ```
 
-### Suggestions Engine
+## Smart Chain
 
 ```ts
-import { getSuggestion, getSuggestions } from "chaincss";
+import { smartChain } from "chaincss";
 
-getSuggestion("bakcground"); // -> "background"
-getSuggestion("felx"); // -> "flex"
-getSuggestions("bordr"); // -> ["border", "borderW", "borderC"]
+const styles = smartChain()
+  .display("flex")
+  .padding(20)
+  .color(props.textColor)
+  .fontSize(theme.sizes.lg)
+  .$el("hybrid-card");
 ```
 
-### Style Timeline
 
-```ts
-import { enableTimeline, getStyleHistory, getStyleDiff } from "chaincss";
 
-enableTimeline(true);
-// ... compile styles ...
-const history = getStyleHistory();
-const diff = getStyleDiff(snapshotId1, snapshotId2);
-// -> { added: {...}, removed: {...}, modified: {...} }
+# Shorthands
+
+```ts
+chain()
+  .bg("#fff")
+  .m(16)
+  .p(20)
+  .br(8)
+  .fs(16)
+  .fw(700)
+  .c("#333");
 ```
 
 
-# CLI
+# Macros
 
-```bash
-chaincss init
-chaincss build
-chaincss watch
-chaincss cache clear
-chaincss cache stats
-chaincss timeline list
+```ts
+chain().flex();
+chain().grid();
+chain().center();
+chain().stack(16);
+chain().glass();
+chain().glow("#6366f1");
+chain().focusRing("#3b82f6");
 ```
 
 
-# Configuration
+
+# Conditional Styles
 
 ```ts
-// chaincss.config.js
-export default {
-  inputs: ["src/**/*.chain.{js,ts}", "src/**/*.tsx"],
+chain()
+  .padding(12)
+  .when(isActive, c =>
+    c.background("#10b981")
+      .color("white")
+  )
+  .$el("stateful-btn");
+```
 
-  output: {
-    cssFile: "global.css",
-    minify: true,
-  },
 
-  atomic: {
-    enabled: true,
-    mode: "hybrid",
-    threshold: 2,
-    naming: "hash",
-  },
 
-  breakpoints: {
-    sm: "(min-width: 640px)",
-    md: "(min-width: 768px)",
-  },
+# Responsive Design
 
-  tokens: {
-    enabled: true,
-    prefix: "$",
-  },
-};
+```ts
+chain()
+  .display("flex")
+  .flexDirection("column")
+  .responsive("md", c =>
+    c.flexDirection("row")
+  )
+  .$el("responsive");
 ```
 
 
-# Framework Integration
 
-## React
+# Math Engine
 
-```tsx
-import { chain } from "chaincss";
+```ts
+import {
+  math,
+  add,
+  fluidType,
+  convert
+} from "chaincss";
+
+add("10px", "2rem");
+
+fluidType({
+  minSize: 14,
+  maxSize: 20
+});
 
-function Card() {
-  const styles = chain()
-    .bg("white")
-    .p(24)
-    .rounded(12)
-    .$el("card");
-
-  return (
-    <div className={styles.selectors[0]}>
-      Content
-    </div>
-  );
-}
+convert("32px", "rem");
 ```
 
-## Vue
+
+
+# Design Tokens
 
 ```ts
-import { chain } from "chaincss";
+import {
+  createTokens,
+  createThemeContract,
+  createTheme
+} from "chaincss";
 
-const styles = chain().display("grid").cols(3).gap(16).$el("grid");
-// <div :class="styles.selectors[0]">
+const tokens = createTokens({
+  colors: {
+    primary: "#6366f1",
+    secondary: "#10b981"
+  }
+});
 ```
 
-## Svelte
+
+
+# Recipe System
 
 ```ts
-import { chain } from "chaincss";
+import { recipe } from "chaincss";
 
-const styles = chain().flex().center().$el("centered");
-// <div class={styles.selectors[0]}>
+const button = recipe({
+  base: {
+    selectors: ["btn"],
+    display: "inline-flex",
+    borderRadius: "8px"
+  }
+});
 ```
 
-### Vanilla JS
 
-```html
-<script type="module"> 
-  import { chain, injectChainStyles } from "https://cdn.jsdelivr.net/npm/chaincss/dist/browser.js"; 
-  const h1 = chain()
-    .fs(48)
-    .fw(800)
-    .textGradient(["#6366f1","#06b6d4"])
-    .$el("h1");
 
-  injectChainStyles({ h1 }); 
+# Animations
+
+```ts
+chain()
+  .fadeIn()
+  .slideInUp()
+  .zoomIn()
+  .bounce()
+  .pulse()
+  .$el("animated");
+```
+
+
+
+# Self-Healing CSS
+
+```ts
+import { correct, heal } from "chaincss";
+
+correct("display", "flexbox");
+correct("position", "abs");
 
-  document.body.innerHTML = '<h1 class="' + h1.selectors[0] + '">Hello!</h1>'; 
-</script>
+heal(
+  {
+    display: "flexbox",
+    position: "abs"
+  },
+  "smart"
+);
 ```
 
 
-## Complete Feature List
 
-| Category | Count | Details |
-|----------|-------|---------|
-| Macros | 57 | Layout, spacing, borders, positioning, visibility, shapes, effects, state, utility |
-| Shorthand Properties | 80 | 1-to-1 CSS property mappings |
-| Animation Presets | 42 | Fades, slides, zooms, bounces, shakes, spins, flips, special effects |
-| Breakpoints | 20 | Mobile-first, desktop-first, device-specific, feature queries |
-| Chain API Methods | 30+ | hover, nest, when, use, responsive, media, supports, containerQuery, layer |
-| Math Helpers | 15 | calc, add, sub, mul, div, clamp, min, max, unit conversions, fluidType |
-| CSS Properties | 300+ | Every standard CSS property via type definitions |
-| CLI Commands | 5 | init, build, watch, cache, timeline |
-| Framework Integrations | 4 | React, Vue, Svelte, Solid |
-| Plugins | 2 | Vite, Webpack |
-| Bundles | 5 | Main, Runtime, Browser, Compiler, CLI |
-| React Hooks | 6 | useSmartStyles, createSmartComponent, useChainStyles, useDynamicChainStyles, useThemeChainStyles, withSmartStyles |
-| Design Systems | 3 | Tokens, Theme Contracts, Recipes |
-| Dev Tools | 3 | Suggestions Engine, Timeline, Component Generator |
-| Tests | 258 | 18 test files, 0 failures |
+# CLI
+
+```bash
+chaincss init
+chaincss build
+chaincss watch
+chaincss cache clear
+chaincss optimize --report
+chaincss doctor
+```
+
 
 
 # Performance
@@ -547,8 +646,9 @@ const styles = chain().flex().center().$el("centered");
 - Zero runtime for static styles
 - Atomic CSS extraction
 - Smart static/dynamic splitting
-- LRU persistent caching
-- Shared property deduplication
+- Cross-file dead code elimination
+- Multi-pass optimization pipeline
+
 
 
 # Contributing
@@ -564,11 +664,15 @@ npm test
 ```
 
 
+
 # License
 
 MIT © Rommel Caneos
 
 <p align="center">
-  <strong>ChainCSS</strong> — Write styles like JavaScript. Ship zero runtime.<br>
-  <a href="https://chaincss.dev">chaincss.dev</a>
+  <strong>ChainCSS v2.3</strong> — The CSS intelligence platform.<br>
+
+  <a href="https://github.com/melcanz08/chaincss">
+    github.com/melcanz08/chaincss
+  </a>
 </p>