tailwind-styled-v4 5.0.10 → 5.0.11

package/README.md

@@ -2,7 +2,7 @@
 
 # tailwind-styled-v4
 
-### ⚡ Rust-powered Tailwind CSS untuk React
+### ⚡ Rust-powered Tailwind CSS v4 untuk React
 **Build-time compiler · Zero runtime overhead · RSC-aware · Next.js / Vite / Rspack**
 
 [![npm](https://img.shields.io/npm/v/tailwind-styled-v4?color=blue)](https://npmjs.com/package/tailwind-styled-v4)
@@ -18,35 +18,39 @@
 
 ## Apa ini?
 
-`tailwind-styled-v4` adalah library styling untuk React yang menggabungkan **utility-first** Tailwind CSS dengan **engine berbasis Rust**. Tulis komponen dengan `tw.button` atau `tw.div({ variants })` — compiler extract dan optimasi CSS di build time, bukan runtime.
+`tailwind-styled-v4` adalah library styling untuk React yang menggabungkan **DX styled-components** dengan **performa Tailwind CSS v4** dan **engine berbasis Rust**. Tulis komponen dengan `tw.button` atau `tw.div({ variants })` — compiler extract dan optimasi CSS di build time, bukan runtime.
 
 **Perbandingan singkat:**
 
 | | tailwind-styled-v4 | styled-components | Tailwind CSS biasa |
 |---|---|---|---|
-| Build-time CSS | ✅ | ❌ | ✅ |
+| Build-time CSS | ✅ | ❌ (runtime inject) | ✅ |
 | Runtime overhead | ~0 | ~15KB | ~0 |
-| Variants API | ✅ | terbatas | ❌ |
-| RSC support | ✅ otomatis | ❌ | ✅ manual |
+| Variants API | ✅ type-safe | terbatas | ❌ |
+| SSR/RSC support | ✅ zero config | ⚠️ butuh ServerStyleSheet | ✅ manual |
+| Hydration mismatch | ✅ tidak ada | ⚠️ hash bisa beda | ✅ tidak ada |
+| DevTools readable | ✅ class name jelas | ❌ hash (`sc-abc123`) | ✅ |
 | Engine | 🦀 Rust | JS | JS |
+| Dark mode | ✅ `dark:` prefix | manual | ✅ |
+| TypeScript | ✅ full inference | partial | ✅ |
 
 ---
 
 ## Instalasi
 
 ```bash
-# npm
 npm install tailwind-styled-v4
 
-# Lalu jalankan setup otomatis
+# Setup otomatis
 npx tw setup
 ```
 
 `npx tw setup` akan otomatis:
 - Mendeteksi bundler (Next.js / Vite / Rspack)
 - Meng-inject plugin ke `next.config.ts` / `vite.config.ts`
-- Membuat `tailwind-styled.config.json`
+- Membuat `tailwind-styled.config.json` dengan CSS entry yang terdeteksi otomatis
 - Menambahkan `@import "tailwindcss"` ke CSS entry
+- Pre-warming scanner cache supaya dev pertama tidak cache miss
 
 ---
 
@@ -63,7 +67,6 @@ const Button = tw.button`
   hover:bg-blue-700 transition
 `
 
-// Pakai seperti komponen biasa
 <Button onClick={handleClick}>Klik saya</Button>
 ```
 
@@ -71,302 +74,233 @@ const Button = tw.button`
 
 ```tsx
 const Button = tw.button({
-  base: "inline-flex items-center rounded-lg px-4 py-2 font-medium transition",
+  base: "inline-flex items-center rounded-full px-5 py-2 font-medium transition-all",
   variants: {
     intent: {
-      primary:   "bg-blue-600 text-white hover:bg-blue-700",
-      secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200",
-      danger:    "bg-red-600 text-white hover:bg-red-700",
+      primary:   "bg-foreground text-background hover:bg-[#383838]",
+      secondary: "bg-white text-gray-900 border border-gray-300 hover:bg-gray-50",
+      outline:   "bg-transparent border-2 border-foreground text-foreground hover:bg-foreground hover:text-background",
+      ghost:     "bg-transparent text-foreground hover:bg-gray-100",
     },
     size: {
-      sm: "text-sm px-3 py-1.5",
-      md: "text-base px-4 py-2",
-      lg: "text-lg px-6 py-3",
+      sm: "h-10 px-4 text-sm rounded-lg",
+      md: "h-12 px-5 text-base rounded-full",
+      lg: "h-14 px-6 text-lg rounded-full",
     },
   },
   defaultVariants: { intent: "primary", size: "md" },
-})
-
-// TypeScript tahu variant apa yang valid
-<Button intent="primary" size="lg">Submit</Button>
-<Button intent="danger">Hapus</Button>
-```
-
-### 3. `.extend()` — Inheritance
-
-```tsx
-// Turunan dari Button, tambah styling tanpa override base
-const IconButton = Button.extend`
-  aspect-square justify-center rounded-full p-2
-`
-
-const LoadingButton = Button.extend`
-  opacity-60 cursor-wait
-`
-```
-
-### 4. `cx()` — Conditional Class Merge
-
-```tsx
-import { cx } from "tailwind-styled-v4"
-
-function StatusDot({ online }: { online: boolean }) {
-  return (
-    <span className={cx(
-      "h-2.5 w-2.5 rounded-full",
-      online ? "bg-green-500" : "bg-gray-300"
-    )} />
-  )
-}
-```
-
-### 5. `cv()` — Class Variants (headless)
-
-```tsx
-import { cv } from "tailwind-styled-v4"
-
-// Tanpa element HTML — untuk komponen custom
-const alertStyles = cv({
-  base: "rounded-lg border p-4 text-sm",
-  variants: {
-    type: {
-      info:    "border-blue-200 bg-blue-50 text-blue-800",
-      success: "border-green-200 bg-green-50 text-green-800",
-      error:   "border-red-200 bg-red-50 text-red-800",
-    },
+  states: {
+    loading:   "opacity-60 cursor-wait pointer-events-none",
+    disabled:  "opacity-50 cursor-not-allowed",
+    fullWidth: "w-full",
   },
 })
 
-function Alert({ type, children }) {
-  return <div className={alertStyles({ type })}>{children}</div>
-}
+// TypeScript tahu variant apa yang valid — autocomplete ✅
+<Button intent="primary" size="lg">Submit</Button>
+<Button intent="ghost">Batal</Button>
+<Button intent="outline" size="sm">Edit</Button>
+<Button loading>Memproses...</Button>
 ```
 
-### 6. Sub-components
-
-Ada **dua cara** mendefinisikan sub-components:
-
-#### A. Config Object — Direkomendasikan (Autocomplete + Type Safe)
+### 3. Sub-components
 
 ```tsx
 const Card = tw.div({
-  base: "flex flex-col p-4 rounded-xl bg-white shadow",
+  base: "rounded-xl bg-white shadow-md overflow-hidden",
   sub: {
-    header: "font-bold text-lg border-b pb-2",
-    body:   "text-gray-600 py-2",
-    footer: "border-t pt-2 text-sm text-gray-400",
+    header:        "px-6 py-4 border-b font-semibold",
+    main:          "px-6 py-4",
+    footer:        "px-6 py-4 border-t text-sm text-gray-400",
+    "div:action":  "px-6 py-4 flex gap-3",  // render <div>, akses Card.action
+  },
+  states: {
+    selected: "ring-2 ring-blue-500",
+    disabled: "opacity-50 pointer-events-none",
   },
 })
 
-// TypeScript infer keys dari object literal → autocomplete penuh
-<Card>
-  <Card.header>Judul</Card.header>    // ✅ autocomplete
-  <Card.body>Konten</Card.body>       // ✅ autocomplete
-  <Card.footer>Footer</Card.footer>   // ✅ autocomplete
-  <Card.xyz>?</Card.xyz>              // ❌ TypeScript error
+// Penggunaan
+<Card selected>
+  <Card.header>Judul Card</Card.header>
+  <Card.main>Konten card di sini.</Card.main>
+  <Card.action>
+    <Button>Lihat Detail</Button>
+    <Button intent="ghost">Batal</Button>
+  </Card.action>
+  <Card.footer>Updated 2 hours ago</Card.footer>
 </Card>
 ```
 
-#### B. Template Literal Inline — Ringkas (tanpa autocomplete)
-
-```tsx
-const Card = tw.div`
-  flex flex-col p-4 rounded-xl bg-white shadow
-  [header] { font-bold text-lg border-b pb-2 }
-  [body]   { text-gray-600 py-2 }
-  [footer] { border-t pt-2 text-sm text-gray-400 }
-`
-
-// Runtime benar, tapi TypeScript tidak bisa infer nama dari multiline template —
-// ini limitasi TypeScript, bukan bug library. Gunakan config object untuk type safety.
-<Card>
-  <Card.header>Judul</Card.header>
-  <Card.body>Konten</Card.body>
-  <Card.footer>Footer</Card.footer>
-</Card>
-```
+Format `"tag:name"` untuk sub-components — misalnya `"div:action"` render sebagai `<div>` dengan akses via `Card.action`. TypeScript otomatis strip prefix tag dari type inference.
 
-> Sub-components **tidak mewarisi** style base. Untuk mewarisi, pakai `.extend()` (lihat Pattern B di bawah).
-
-> **Sub-component tidak terdefinisi** tidak akan crash — library otomatis fallback ke `<span>` passthrough. Tapi tetap gunakan config object untuk catch typo di TypeScript.
-
-### 7. State Engine — Zero-JS State Management
+### 4. `.extend()` — Inheritance
 
 ```tsx
-// Tanpa React state — pakai data attribute langsung
-const Button = tw.button({
-  base: "transition transform",
-  state: {
-    active: "bg-blue-600 scale-95",
-    loading: "opacity-70 cursor-wait",
-    disabled: "opacity-50 cursor-not-allowed",
-  },
+const PrimaryButton = Button.extend`text-lg px-8`
+const DangerButton = Button.extend({
+  classes: "bg-red-600 hover:bg-red-700",
+  defaultVariants: { intent: "primary" }
 })
-// Usage: <Button data-active="true">Click</Button>
-// Ketika data-active="true", style aktif otomatis tanpa re-render
 ```
 
-### 8. Container Query Engine
+### 5. States — Boolean Props
 
 ```tsx
-const Card = tw.div({
-  container: {
-    sm: "flex-col",
-    md: "flex-row",
-    lg: "grid grid-cols-2",
+// states di-resolve via Rust bitmask lookup — O(1), tidak ada runtime overhead
+const Badge = tw.span({
+  base: "inline-flex px-2 py-1 rounded text-sm font-medium",
+  states: {
+    active:   "bg-green-100 text-green-800",
+    warning:  "bg-yellow-100 text-yellow-800",
+    error:    "bg-red-100 text-red-800",
   },
 })
-// Auto-generate container queries, tidak perlu tulis @container sendiri
-```
-
-### 9. Live Token Engine — Dynamic CSS Variables
 
-```tsx
-import { liveToken } from "tailwind-styled-v4"
-
-const tokens = liveToken({
-  primary: "#3b82f6",
-  secondary: "#64748b",
-  radius: "0.5rem",
-})
-// Auto-generate CSS variables: --tw-primary, --tw-secondary, dll
-// Subscribe perubahan: tokens.subscribe(callback)
+<Badge active>Online</Badge>
+<Badge error>Error</Badge>
 ```
 
-### 10. tw.server — RSC-only Components
+### 6. Dark Mode
 
-```tsx
-// tw.server adalah namespace terpisah — pakai tw.server.tagname
-const Avatar = tw.server.img`rounded-full object-cover`
-const Hero   = tw.server.section`py-24 text-center`
-
-// Bisa pakai sub-components juga
-const Card = tw.server.div`
-  p-4 rounded-xl shadow
-  [header] { font-bold text-lg }
-  [body]   { text-gray-600 }
-`
-
-// Di browser (dev): otomatis log warning kalau ter-render di client
-// Di production: silent, tidak ada overhead
-```
-
-### 11. Component Wrapping — tw(ExistingComponent)
-
-```tsx
-// Wrap komponen manapun dengan styling tambahan
-const StyledCard = tw(Card)`shadow-lg border`
-const BigButton = tw(Button)`text-xl px-8 py-4`
-// Bisa juga pakai .extend():
-const IconButton = Button.extend`p-2 rounded-full`
-```
-
----
-
-### Pattern Sub-components
-
-**Pattern A: Config Object — Direkomendasikan (autocomplete + type safe)**
+Dark mode bekerja otomatis via `prefers-color-scheme` — tidak perlu konfigurasi tambahan:
 
 ```tsx
 const Card = tw.div({
-  base: "flex flex-col p-4 rounded-xl bg-white shadow",
+  base: "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100",
   sub: {
-    header: "font-bold text-lg border-b pb-2",
-    body:   "text-gray-600 py-2",
-    footer: "border-t pt-2 text-sm",
+    header: "border-b border-gray-200 dark:border-gray-700",
   },
 })
-// TypeScript infer: Card.header, Card.body, Card.footer ✅ autocomplete
-// Card.xyz → TypeScript error ✅
 ```
 
-**Pattern A2: Inline Template `[name] { }` — Ringkas (tanpa autocomplete)**
+### 7. Compound Variants
 
 ```tsx
-const Card = tw.div`
-  flex flex-col p-4 rounded-xl bg-white shadow
-  [header] { font-bold text-lg border-b pb-2 }
-  [body]   { text-gray-600 py-2 }
-  [footer] { border-t pt-2 text-sm }
-`
-// Runtime benar — TypeScript tidak bisa infer nama dari multiline template literal
+const Button = tw.button({
+  base: "...",
+  variants: {
+    intent: { primary: "...", outline: "..." },
+    size: { sm: "...", lg: "..." },
+  },
+  compoundVariants: [
+    // Kalau intent=primary AND size=lg → tambah class ini
+    { intent: "primary", size: "lg", class: "shadow-lg" },
+  ],
+})
 ```
 
-**Pattern B: `.extend()` — Sub-components Mewarisi Style Base**
-
-Pakai ini kalau sub-components butuh semua style dari parent:
+### 8. .withSub — Strict TypeScript untuk Template Literals
 
 ```tsx
-const Card = tw.div`flex flex-col p-4 bg-white shadow`
-const CardHeader = Card.extend`font-bold text-lg border-b`
-const CardBody   = Card.extend`text-gray-600`
-const CardFooter = Card.extend`border-t pt-4 text-sm`
+const Button = tw.button`
+  flex h-12 px-5 rounded-full
+  icon { flex h-4 w-4 }
+  badge { absolute -top-1 -right-1 }
+`.withSub<"icon" | "badge">()
+
+Button.icon   // ✅ autocomplete
+Button.badge  // ✅ autocomplete
+Button.xyz    // ❌ TypeScript error
 ```
 
-**Pattern C: tw() Wrapper**
-
-Mirip `.extend()` tapi untuk wrapping komponen yang sudah ada:
+---
 
-```tsx
-const Card = tw.div`flex flex-col p-4 bg-white shadow`
-const CardHeader = tw(Card)`font-bold text-lg`
-const CardBody   = tw(Card)`text-gray-600`
-const CardFooter = tw(Card)`border-t pt-4`
-```
+## Bagaimana CSS Di-generate?
 
-**Pattern D: Base Variable**
+Pipeline baru di v5 — tidak lagi pakai empty rules:
 
-Kalau butuh share classes ke komponen yang benar-benar independen:
+```
+1. withTailwindStyled (Next.js startup)
+   └─> scanWorkspace() via Rust scanner
+         └─> ast_extract_classes() per file
+               └─> extract semua classes dari variants, states, sub, base
+
+2. generateCssForClasses(classes, globals.css)
+   └─> Tailwind JS compile(globals.css, { loadStylesheet })
+         └─> Tailwind baca @theme inline user (custom colors, fonts, dll)
+               └─> Generate real CSS untuk semua classes
+                     └─> LightningCSS post-process (production only)
+                           └─> tulis .next/tw-classes/_initial-scan.css
+
+3. globals.css: @source "../.next/tw-classes/**"
+   └─> Tailwind scan class names dari _initial-scan.css
+         └─> Generate CSS di bundle akhir
+```
 
-```tsx
-const base = "flex flex-col p-4 rounded-xl"
-const Card       = tw.div`${base} bg-white shadow`
-const CardHeader = tw.div`${base} font-bold`
-const CardBody   = tw.div`${base} text-gray-600`
+Hasilnya `_initial-scan.css` berisi real CSS (bukan empty rules):
+
+```css
+/* tw-classes: initial scan — auto-generated by withTailwindStyled */
+@layer utilities {
+  .bg-foreground {
+    background-color: var(--foreground);
+  }
+  .text-foreground {
+    color: var(--foreground);
+  }
+  .hover\:bg-foreground {
+    &:hover {
+      background-color: var(--foreground);
+    }
+  }
+  /* ... */
+}
 ```
 
+Custom colors dari `@theme inline` di `globals.css` otomatis ter-generate — tidak perlu konfigurasi tambahan.
+
 ---
 
-## Bundler Integration
+## Setup Next.js
 
-### Next.js (App Router)
+### next.config.ts
 
 ```ts
-// next.config.ts
+import { withTailwindStyled } from "tailwind-styled-v4/next"
 import type { NextConfig } from "next"
-import { withTailwindStyled } from "@tailwind-styled/next"
 
-const nextConfig: NextConfig = {
-  reactStrictMode: true,
-}
+const nextConfig: NextConfig = {}
 
-export default withTailwindStyled(nextConfig)
+export default withTailwindStyled({ verbose: true })(nextConfig)
 ```
 
-```tsx
-// app/page.tsx — Server Component, tidak perlu 'use client'
-import { tw } from "tailwind-styled-v4"
+### globals.css
 
-// Compiler otomatis deteksi RSC boundary
-const Hero = tw.section`py-24 text-center`
-const Title = tw.h1`text-5xl font-bold text-gray-900`
+```css
+@import "tailwindcss";
+@source "../.next/tw-classes/**";
 
-export default function Page() {
-  return (
-    <Hero>
-      <Title>Hello from RSC</Title>
-    </Hero>
-  )
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
 }
 ```
 
+---
+
+## Bundler Integration
+
 ### Vite
 
 ```ts
-// vite.config.ts
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
-import { tailwindStyled } from "@tailwind-styled/vite"
+import { tailwindStyled } from "tailwind-styled-v4/vite"
 
 export default defineConfig({
   plugins: [react(), tailwindStyled()],
@@ -376,9 +310,8 @@ export default defineConfig({
 ### Rspack
 
 ```js
-// rspack.config.mjs
 import { defineConfig } from "@rspack/cli"
-import { tailwindStyled } from "@tailwind-styled/rspack"
+import { tailwindStyled } from "tailwind-styled-v4/rspack"
 
 export default defineConfig({
   entry: "./src/index.ts",
@@ -391,7 +324,7 @@ export default defineConfig({
 ## CLI
 
 ```bash
-# Setup otomatis (interaktif — pilih project type)
+# Setup otomatis (detect bundler, patch config, pre-warm cache)
 npx tw setup
 
 # Verifikasi setup
@@ -406,9 +339,22 @@ npx tw benchmark
 
 ---
 
+## Kenapa Bukan styled-components?
+
+styled-components inject `<style>` tag ke DOM saat runtime — setiap component punya hash class (`sc-abc123 dEfGhI`) yang di-generate di browser. Masalahnya:
+
+- **Runtime overhead** — ~15KB JS untuk generate + inject CSS
+- **SSR mismatch** — hash bisa berbeda antara server dan client → hydration warning
+- **DevTools susah dibaca** — `sc-abc123` tidak informatif
+- **Butuh setup khusus** — `ServerStyleSheet`, `StyledEngineProvider`, dll untuk Next.js App Router
+
+`tailwind-styled-v4` tidak punya masalah ini karena CSS sudah di-bundle sebelum browser buka halaman. Class name readable, SSR dan CSR identik, tidak ada runtime overhead.
+
+---
+
 ## Benchmark
 
-Diukur di Debian Linux, Node.js 22, Rust 1.75.
+Diukur di Node.js 22, Rust 1.75.
 
 | Operasi | tailwind-styled-v4 | Tailwind CSS (JS) | Speedup |
 |---|---|---|---|
@@ -418,59 +364,94 @@ Diukur di Debian Linux, Node.js 22, Rust 1.75.
 | Cache read/write | **0.009 ms** | ~0.5 ms | **~55×** |
 | Watch mode rebuild | **< 5 ms** | ~85 ms | **~17×** |
 
-*Benchmark dijalankan via `npm run bench` (scripts/benchmark/run.mjs)*
-
 ---
 
 ## Arsitektur
 
 ```
 tailwind-styled-v4/
-├── native/                    # Rust engine (N-API, 27 functions)
-│   ├── src/lib.rs             # Entry, 27 N-API exports
-│   ├── src/oxc_parser.rs      # Oxc AST + regex hybrid parser
-│   ├── src/scan_cache.rs      # DashMap in-memory cache
-│   └── src/watcher.rs         # notify v6 file watcher
+├── native/                    # Rust engine (NAPI-RS)
+│   ├── src/application/
+│   │   └── ast_extract.rs     # Extract Tailwind classes dari source files
+│   ├── src/domain/
+│   │   ├── variants.rs        # Variant resolution (props override defaults)
+│   │   └── transform.rs       # Transform object config → JS component
+│   └── src/infrastructure/
+│       └── cache_store.rs     # Persistent cache dengan bracket-aware parser
 │
 ├── packages/
-│   ├── core/                  # tw, cx, cv, cn — core API
-│   ├── compiler/              # AST transform, CSS generation
-│   ├── scanner/               # File scanner (Rust-backed)
-│   ├── engine/                # Build engine, incremental diff
-│   ├── animate/               # Animation DSL
-│   ├── theme/                 # Multi-theme engine
-│   ├── plugin/                # Plugin system
-│   ├── cli/                   # CLI (tw setup, tw audit, dll)
-│   ├── next/                  # Next.js adapter
-│   ├── vite/                  # Vite adapter
-│   └── rspack/                # Rspack adapter
-│
-└── examples/
-    ├── vite/                  # Vite demo
-    ├── vite-react/            # Vite React demo (dark mode)
-    ├── standar-config-next-js-app/  # Next.js App Router demo
-    └── rspack/                # Rspack + Node.js demo
+│   ├── domain/
+│   │   ├── core/              # tw, cx, cv, cn — core API + createComponent
+│   │   ├── compiler/          # Tailwind JS + LightningCSS pipeline
+│   │   └── scanner/           # File scanner (Rust-backed)
+│   ├── presentation/
+│   │   └── next/              # Next.js plugin (withTailwindStyled)
+│   └── infrastructure/
+│       └── cli/               # CLI (tw setup, tw audit, dll)
+```
+
+---
+
+## TypeScript
+
+Library ini fully typed — tidak ada `any` di public API:
+
+```tsx
+// Type inference otomatis dari config
+const Button = tw.button({
+  variants: {
+    intent: { primary: "...", ghost: "...", outline: "..." },
+    size: { sm: "...", md: "...", lg: "..." },
+  },
+  defaultVariants: { intent: "primary", size: "md" },
+})
+
+// TypeScript tahu props yang valid
+<Button intent="invalid" />  // ❌ Type error
+<Button intent="primary" />  // ✅
+
+// Sub-components — ExtractSubName type inference
+const Card = tw.div({
+  sub: {
+    header: "font-bold",
+    "div:action": "flex gap-3",  // → Card.action (tag prefix di-strip otomatis)
+  },
+})
+
+Card.action  // ✅ autocomplete
+Card.xyz     // ❌ TypeScript error
 ```
 
 ---
 
+## Environment Variables
+
+| Variable | Default | Deskripsi |
+|---|---|---|
+| `TWS_LOG_LEVEL` | `info` | `debug\|info\|warn\|error\|silent` |
+| `TWS_DEBUG_SCANNER` | `0` | `1` = aktifkan scanner debug logs |
+| `STUDIO_PORT` | `3030` | Port studio server |
+
+---
+
 ## Development
 
 ```bash
-# Clone
 git clone https://github.com/Dictionar32/tailwind-styled-v4.git
 cd tailwind-styled-v4
 
-# Install dependencies
 npm install
 
 # Build Rust binary + semua packages
 npm run build
 
-# Test (Rust + JS)
+# Build Rust only
+npm run build:rust
+
+# Test
 npm run test
 
-# Dev mode (watch all packages)
+# Dev mode
 npm run dev
 
 # Benchmark
@@ -480,129 +461,20 @@ npm run bench
 **Requirements:**
 - Node.js 20+
 - Rust 1.75+ (untuk build dari source)
-- Pre-built binary sudah disertakan untuk Linux x64
 
 ---
 
 ## Contributing
 
-PR dan issue sangat welcome! Baca [CONTRIBUTING.md](CONTRIBUTING.md) untuk panduan.
+PR dan issue sangat welcome!
 
 Prioritas saat ini:
-- [x] macOS & Windows pre-built binary *(planned — see RELEASE.md)*
-- [x] Docs website *(planned — see RELEASE.md)*
+- [ ] macOS & Windows pre-built binary
+- [ ] Docs website (VitePress)
+- [ ] More bundler adapters
 
 ---
 
 ## License
 
-[MIT](LICENSE) © Dictionar32
-
----
-
-## Engine Architecture (v4.5 Platform Overhaul)
-
-Sprint 6–10 membawa perombakan arsitektur besar pada engine. Berikut ringkasannya.
-
-### 🦀 Rust-backed pipeline
-
-| Komponen | Implementasi | Fallback |
-|---|---|---|
-| Class scanner | `scan_workspace` (Rust) | JS `scanWorkspace` |
-| Persistent cache | `cache_read/write` (Rust) | JS `ScanCache` |
-| Incremental diff | `process_file_change` + DashMap | JS class set diff |
-| File watcher | `notify` crate via polling IPC | Node.js `fs.watch` |
-| Class analyzer | `analyze_classes` (Rust) | — |
-
-### ⚡ Performance
-
-- Cold start scan: **<10ms** (was >100ms) via persistent Rust cache
-- Incremental update: **~0ms** untuk unchanged files
-- Watch idle CPU: **~66% reduction** (500ms poll interval)
-- Cache hit rate: typically **>95%** pada incremental dev
-
-### 🔌 Platform Adapters
-
-Semua adapter (Next.js, Vite, Rspack) sekarang **bundle compiler secara inline** — user tidak perlu menginstall `@tailwind-styled/compiler` secara terpisah.
-
-```ts
-// next.config.ts
-import { withTailwindStyled } from 'tailwind-styled-v4/next'
-export default withTailwindStyled()(nextConfig)
-
-// vite.config.ts
-import { tailwindStyledPlugin } from 'tailwind-styled-v4/vite'
-export default defineConfig({ plugins: [tailwindStyledPlugin()] })
-```
-
-`preserveImports: true` diset di semua loader — `cv`, `cx`, `cn` tetap tersedia di output.
-
-### 📊 Developer Tooling
-
-```bash
-# Analisis workspace (Rust engine)
-tw analyze .
-tw stats .
-
-# Dashboard metrics real-time
-tw dashboard
-
-# Watch mode incremental
-tw watch .
-```
-
-DevTools overlay (`Ctrl+Shift+D`) menampilkan:
-- **Inspector** — hover element → lihat variant props & classes
-- **State** — reactive state components
-- **Container** — container query breakpoints aktif
-- **Tokens** — live token editor (perubahan instan)
-- **Analyzer** — DOM scan + engine metrics dari dashboard
-
-### 🖥️ Studio Desktop (Electron)
-
-```bash
-# Dev mode
-npm run dev -w @tailwind-styled/studio-desktop
-
-# Build distribusi
-npm run build:mac     # macOS DMG + ZIP
-npm run build:win     # Windows NSIS installer
-npm run build:linux   # AppImage + DEB
-npm run build:all     # Semua platform sekaligus
-```
-
-Engine tersedia langsung dari renderer via `window.studioDesktop`:
-
-```js
-const result = await window.studioDesktop.engineBuild()
-// { ok: true, totalFiles: 42, uniqueClasses: 312, cssLength: 18540 }
-
-window.studioDesktop.onEngineEvent((event) => {
-  if (event.type === 'change') console.log('Rebuilt:', event.result.css.length, 'bytes')
-})
-await window.studioDesktop.engineWatchStart()
-```
-
-### 🧪 Testing
-
-```ts
-import { expectEngineMetrics, toHaveEngineMetrics, tailwindMatchersWithMetrics } from '@tailwind-styled/testing'
-
-// Assertion langsung
-expectEngineMetrics(metrics, { minFiles: 10, maxBuildTimeMs: 500, cacheHitRateMin: 0.9 })
-
-// Vitest/Jest custom matcher
-expect.extend(tailwindMatchersWithMetrics)
-expect(metrics).toHaveEngineMetrics({ minFiles: 5 })
-```
-
-### 🔧 Environment Variables
-
-| Variable | Default | Deskripsi |
-|---|---|---|
-| `TWS_LOG_LEVEL` | `info` | `debug\|info\|warn\|error\|silent` |
-| `TWS_NO_NATIVE` | `0` | `1` = paksa JS fallback |
-| `TWS_NO_RUST` | `0` | Alias untuk `TWS_NO_NATIVE` |
-| `TWS_DEBUG_SCANNER` | `0` | `1` = aktifkan scanner debug logs |
-| `STUDIO_PORT` | `3030` | Port studio server |
-| `STUDIO_VERBOSE` | tidak ada | Tampilkan stdout/stderr studio server |
+[MIT](LICENSE) © Dictionar32