elit 1.1.0 → 2.0.1

package/README.md

@@ -1,79 +1,182 @@
 # Elit
 
-⚡ A lightweight, zero-dependency library for building reactive web applications with direct DOM manipulation.
+⚡ A lightweight TypeScript framework with built-in dev server, HMR, routing, and reactive state management. Minimal dependencies, maximum developer experience.
 
 [![npm version](https://img.shields.io/npm/v/elit.svg)](https://www.npmjs.com/package/elit)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Bundle Size](https://img.shields.io/badge/bundle%20size-~10KB%20gzipped-success)](https://bundlephobia.com/package/elit)
+[![Bundle Size](https://img.shields.io/badge/bundle%20size-lightweight-success)](https://bundlephobia.com/package/elit)
 
-> **Quick Links:** [Installation](#installation) | [Features](#features) | [Quick Start](#quick-start) | [API](#api) | [Examples](#examples) | [@elit/server](./server/README.md)
+> **Quick Links:** [Installation](#installation) | [Features](#features) | [Quick Start](#quick-start) | [CLI Tools](#cli-tools) | [API](#api) | [Deployment](#deployment)
 
 ## Why Elit?
 
-- **🎯 Tiny Bundle Size**: Only ~10KB gzipped (30KB minified) - no framework bloat
-- **📦 Zero Dependencies**: Pure TypeScript, no external dependencies
+- **🎯 Lightweight**: Minimal bundle size with tree-shaking support
 - **⚡ Lightning Fast**: Direct DOM manipulation - no virtual DOM overhead
 - **🔷 TypeScript First**: Full type safety and IntelliSense out of the box
-- **🔄 Reactive State**: Simple but powerful reactive state management
+- **🔄 Reactive State**: Simple but powerful reactive state management with `createState` and `computed`
 - **🌲 Tree-Shakeable**: Import only what you need for optimal bundle size
-- **🚀 Modern Features**: Router, SSR, virtual scrolling, CSS-in-JS, and more
-- **🎨 Developer Experience**: Clean, intuitive API with excellent tooling support
+- **🚀 Full-Stack Ready**: Built-in dev server, HMR, build tool, and REST API
+- **🔥 Hot Module Replacement**: Instant development feedback with automatic HMR
+- **🏗️ Build System**: Integrated esbuild for fast production builds
+- **🌐 ServerRouter**: Built-in server-side routing for REST APIs
+- **🔌 WebSocket Support**: Real-time communication via WebSocket
+- **🎨 CSS-in-JS**: Type-safe styling with `CreateStyle`
+- **🛣️ Client Router**: Hash and history mode routing with guards
+- **📦 Modular Exports**: Import from specific paths (`elit/dom`, `elit/router`, `elit/state`)
 
 ## Installation
 
 ```bash
 npm install elit
+```
+
+## CLI Tools
+
+Elit includes a powerful CLI for development and production:
+
+```bash
+# Development server with HMR
+npx elit dev
 
-# Optional: Install dev server with HMR
-npm install --save-dev @elit/server
+# Production build
+npx elit build
+
+# Preview production build
+npx elit preview
+```
+
+### Configuration
+
+Create `elit.config.mjs` (or .ts, .js, .json) in your project root:
+
+```javascript
+import { defineConfig } from 'elit';
+import { resolve } from 'path';
+
+export default defineConfig({
+  dev: {
+    port: 3000,
+    host: 'localhost',
+    root: './src',
+    basePath: '/',
+    open: true
+  },
+  build: {
+    entry: './src/main.ts',
+    outDir: './dist',
+    format: 'esm',
+    minify: true,
+    platform: 'browser',
+    basePath: '/app',
+    copy: [
+      {
+        from: 'index.html',
+        to: 'index.html',
+        transform: (content, config) => {
+          // Inject base tag from basePath
+          return content;
+        }
+      }
+    ]
+  },
+  preview: {
+    port: 4173,
+    root: './dist',
+    basePath: '/app'
+  }
+});
 ```
 
 ## Features
 
-### Core Library (elit)
+### Frontend Framework
 
-- 🎯 **Ultra Lightweight**: Just 30KB minified, ~10KB gzipped - optimized for performance
+- 🎯 **Ultra Lightweight**: Just 30KB minified, ~10KB gzipped
 - ⚡ **Reactive State**: Built-in reactive state management with `createState`
 - 🔄 **Computed Values**: Automatic dependency tracking with `computed`
-- 🌐 **Shared State**: Real-time state sync with `@elit/server` (optional)
-- 🎨 **CSS-in-JS**: Type-safe styling with `CreateStyle` - full CSS features support
+- 🎨 **CSS-in-JS**: Type-safe styling with `CreateStyle`
 - 🛣️ **Client-Side Router**: Hash and history mode routing with dynamic parameters
-- 📱 **Virtual Scrolling**: Handle 100k+ items efficiently with built-in virtual list
+- 📱 **Virtual Scrolling**: Handle 100k+ items efficiently
 - 🖥️ **SSR Support**: Full server-side rendering capabilities
-- 🎭 **SVG & MathML**: Complete support for SVG and MathML elements (100+ elements)
-- 🔧 **Performance Utilities**: Throttle, debounce, batch rendering, and chunked rendering
-- 📦 **Tree-Shakeable**: Import only what you need - excellent for bundle optimization
-- 🎮 **DOM Utilities**: Convenient helper functions for common DOM operations
-- 🔌 **No Build Required**: Works directly in browsers via CDN
-
-### Development Server (@elit/server)
-
-- ⚡ **Hot Module Replacement (HMR)**: Instant updates without page refresh
-- 🌐 **REST API Router**: Built-in routing system with regex parameters
-- 🔧 **Middleware Stack**: CORS, logging, error handling, rate limiting, compression, security headers
-- 🔄 **Shared State Sync**: Real-time WebSocket state synchronization
-- 📊 **WebSocket Support**: Built-in WebSocket server for real-time features
-- 📁 **Static File Server**: Serves your application files with MIME type detection
-- 🎯 **Zero Config**: Works out of the box with sensible defaults
-- 🛠️ **CLI Tool**: Simple command-line interface (`elit-dev`)
-- 📦 **Lightweight**: Minimal dependencies (chokidar, ws, mime-types)
+- 🎭 **SVG & MathML**: Complete support for all elements
+- 🔧 **Performance Utilities**: Throttle, debounce, batch rendering
+- 📦 **Tree-Shakeable**: Import only what you need
+- 🎮 **DOM Utilities**: Convenient helper functions
+
+### Development Tools
+
+- 🔥 **Hot Module Replacement**: Instant development feedback with automatic reload
+- 🏗️ **Build System**: Integrated esbuild for fast production builds
+- 🌐 **ServerRouter**: Built-in REST API routing for server-side logic
+- 🔧 **Middleware Support**: Add custom middleware to the ServerRouter
+- 🔌 **WebSocket Server**: Built-in WebSocket support for real-time features
+- 📁 **Static File Server**: Efficient static file serving with proper MIME types
+- 🎯 **Smart Defaults**: Works with minimal configuration
+- 📦 **TypeScript Compilation**: Automatic TypeScript compilation with esbuild
 
 ## Quick Start
 
-### Development Server with HMR
-
-Get started instantly with hot module replacement:
+### 1. Create Your Project
 
 ```bash
-# Install Elit and dev server
+# Create a new directory
+mkdir my-elit-app
+cd my-elit-app
+
+# Initialize package.json
+npm init -y
+
+# Install Elit
 npm install elit
-npm install --save-dev @elit/server
+```
 
-# Start dev server
-npx elit-dev
+### 2. Create Your App
+
+Create `src/main.ts`:
+
+```typescript
+import { div, h1, button, createState, reactive, dom } from 'elit';
+
+const count = createState(0);
+
+const app = div({ className: 'app' },
+  h1('Hello Elit! 🚀'),
+  reactive(count, (value) =>
+    button({
+      onclick: () => count.value++,
+      className: 'btn'
+    }, `Count: ${value}`)
+  )
+);
+
+// Render to DOM
+dom.render('#app', app);
 ```
 
-Your app will automatically reload when you make changes!
+Create `index.html`:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Elit App</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="src/main.ts"></script>
+</body>
+</html>
+```
+
+### 3. Start Development Server
+
+```bash
+npx elit dev
+```
+
+Your app will automatically reload when you make changes with HMR!
 
 ### NPM Installation
 
@@ -82,7 +185,7 @@ npm install elit
 ```
 
 ```typescript
-import { div, h1, p, button, createState, reactive, domNode } from 'elit';
+import { div, h1, p, button, createState, reactive, dom } from 'elit';
 
 // Create reactive state
 const count = createState(0);
@@ -100,7 +203,7 @@ const app = div({ className: 'app' },
 );
 
 // Render to DOM
-domNode.render('#app', app);
+dom.render('#app', app);
 ```
 
 ### CDN Usage
@@ -114,7 +217,7 @@ domNode.render('#app', app);
 <body>
   <div id="app"></div>
   <script>
-    const { div, h1, button, createState, reactive, domNode } = window;
+    const { div, h1, button, createState, reactive, dom } = window;
 
     const count = createState(0);
     const app = div(
@@ -124,7 +227,7 @@ domNode.render('#app', app);
       )
     );
 
-    domNode.render('#app', app);
+    dom.render('#app', app);
   </script>
 </body>
 </html>
@@ -165,106 +268,142 @@ const deepState = createState({ nested: { value: 1 } }, { deep: true });
 ### Reactive Rendering
 
 ```typescript
-import { reactive, text, bindValue } from 'elit';
+import { reactive, text, bindValue, bindChecked } from 'elit';
 
 const message = createState('Hello');
+const isEnabled = createState(false);
 
 // Reactive element - re-renders when state changes
 const display = reactive(message, (value) =>
   div({ className: 'message' }, value)
 );
 
-// Reactive text
+// Reactive text node
 const label = text(message);
 
 // Two-way binding for inputs
 const inputEl = input({ type: 'text', ...bindValue(message) });
+const checkbox = input({ type: 'checkbox', ...bindChecked(isEnabled) });
 ```
 
 ### Shared State (Real-time Sync)
 
-**Requires `@elit/server`** - Shared state syncs automatically between backend and frontend via WebSocket:
+Shared state automatically syncs between server and client via WebSocket:
+
+**Client-side:**
 
 ```typescript
 import { createSharedState, reactive } from 'elit';
 
-// Create shared state (auto-connects to @elit/server)
+// Create shared state (auto-connects to WebSocket server)
 const counter = createSharedState('counter', 0);
-const todos = createSharedState('todos', []);
+const users = createSharedState('users', []);
 
 // Use with reactive rendering
 const app = div(
   reactive(counter.state, value =>
     div(`Counter: ${value}`)
   ),
-  button({ onclick: () => counter.value++ }, 'Increment')
+  button({ onclick: () => counter.set(counter.state.value + 1) }, 'Increment')
 );
 
 // Listen to changes
-counter.onChange((newValue, oldValue) => {
-  console.log(`${oldValue} → ${newValue}`);
+counter.onChange((newValue) => {
+  console.log('Counter changed to:', newValue);
 });
 
-// Update from any client - syncs to all
-counter.value++;
+// Update from any client - automatically syncs to all connected clients
+counter.set(10);
 ```
 
-**Backend (Node.js with @elit/server):**
+**Server-side:**
 
-```javascript
-const { createDevServer } = require('@elit/server');
+```typescript
+import { createDevServer, StateManager } from 'elit';
 
 const server = createDevServer({ port: 3000 });
 
-// Create matching shared states
-const counter = server.state.create('counter', { initial: 0 });
-const todos = server.state.create('todos', { initial: [] });
-
-// Listen to changes
-counter.onChange((newValue, oldValue) => {
-  console.log(`Counter: ${oldValue} → ${newValue}`);
-});
-
-// Update from backend - syncs to all clients
-counter.value++;
+// StateManager is built-in and handles WebSocket connections
+// All clients with matching shared state keys will sync automatically
 ```
 
-### @elit/server - Development Server
+### Development Server with REST API
 
-Full-featured development server with HMR, REST API, and real-time features:
+Elit includes a built-in development server with HMR, WebSocket support, and REST API routing:
 
-```javascript
-const { createDevServer, Router, cors, logger } = require('@elit/server');
+**Server Configuration (server.ts):**
+
+```typescript
+import { createDevServer, ServerRouter, cors, logger, json } from 'elit';
 
 // Create REST API router
-const api = new Router();
+const api = new ServerRouter();
 
 // Add middleware
-api.use(cors());
+api.use(cors({ origin: '*', methods: ['GET', 'POST', 'PUT', 'DELETE'] }));
 api.use(logger());
 
-// Define routes
+// Define API routes with helper functions
 api.get('/api/users', (ctx) => {
-  return { success: true, users: [...] };
+  json(ctx, { success: true, users: [] });
 });
 
-api.post('/api/users', (ctx) => {
+api.post('/api/users', async (ctx) => {
   const user = ctx.body;
-  return { success: true, user };
+  json(ctx, { success: true, user });
 });
 
-// Create server with API
+// Create development server
 const server = createDevServer({
   port: 3000,
-  root: __dirname,
-  api,
-  logging: true
+  root: './src',
+  open: true,
+  router: api
+});
+```
+
+**Available Middleware:**
+
+```typescript
+import {
+  cors,          // CORS headers
+  logger,        // Request logging
+  errorHandler,  // Error handling
+  rateLimit,     // Rate limiting
+  bodyLimit,     // Request body size limit
+  cacheControl,  // Cache headers
+  compress,      // Gzip compression
+  security       // Security headers
+} from 'elit';
+
+// Example usage
+api.use(cors({ origin: '*' }));
+api.use(logger({ format: 'detailed' }));
+api.use(rateLimit({ max: 100, windowMs: 60000 }));
+api.use(bodyLimit({ limit: 1024 * 1024 })); // 1MB
+api.use(compress());
+api.use(security());
+```
+
+**Helper Functions:**
+
+```typescript
+import { json, sendText, html, status } from 'elit';
+
+api.get('/api/data', (ctx) => {
+  json(ctx, { message: 'Hello' }); // JSON response
+});
+
+api.get('/text', (ctx) => {
+  sendText(ctx, 'Hello World'); // Text response
 });
 
-// Access shared state
-const counter = server.state.create('counter', {
-  initial: 0,
-  validate: (value) => typeof value === 'number'
+api.get('/page', (ctx) => {
+  html(ctx, '<h1>Hello</h1>'); // HTML response
+});
+
+api.get('/error', (ctx) => {
+  status(ctx, 404, 'Not Found'); // Custom status
 });
 ```
 
@@ -272,41 +411,16 @@ const counter = server.state.create('counter', {
 
 ```bash
 # Start dev server
-npx elit-dev
+npx elit dev
 
 # Custom port
-npx elit-dev --port 8080
+npx elit dev --port 8080
 
 # Custom root directory
-npx elit-dev --root ./public
+npx elit dev --root ./public
 
 # Disable auto-open browser
-npx elit-dev --no-open
-
-# Silent mode
-npx elit-dev --silent
-```
-
-**Middleware:**
-
-```javascript
-const {
-  cors,           // CORS headers
-  logger,         // Request logging
-  errorHandler,   // Error handling
-  rateLimit,      // Rate limiting
-  bodyLimit,      // Request body size limit
-  cacheControl,   // Cache headers
-  compress,       // Gzip compression
-  security        // Security headers
-} = require('@elit/server');
-
-api.use(cors({ origin: '*' }));
-api.use(logger());
-api.use(rateLimit({ max: 100, window: 60000 }));
-api.use(bodyLimit(1024 * 1024)); // 1MB
-api.use(compress());
-api.use(security());
+npx elit dev --no-open
 ```
 
 ### Server-Side Rendering
@@ -376,7 +490,15 @@ const btn = button({ className: buttonClass }, 'Click me');
 ### Performance Utilities
 
 ```typescript
-import { batchRender, renderChunked, createVirtualList, throttle, debounce } from 'elit';
+import {
+  batchRender,
+  renderChunked,
+  createVirtualList,
+  throttle,
+  debounce,
+  lazy,
+  cleanupUnused
+} from 'elit';
 
 // Batch render multiple elements
 batchRender('#container', elements);
@@ -386,7 +508,7 @@ renderChunked('#container', largeArray, 5000, (current, total) => {
   console.log(`Rendered ${current}/${total}`);
 });
 
-// Virtual scrolling
+// Virtual scrolling for 100k+ items
 const virtualList = createVirtualList(
   container,
   items,
@@ -395,9 +517,61 @@ const virtualList = createVirtualList(
   5   // buffer size
 );
 
+// Lazy loading components
+const LazyComponent = lazy(() => import('./HeavyComponent'));
+
 // Throttle and debounce
 const throttledFn = throttle(handleScroll, 100);
 const debouncedFn = debounce(handleInput, 300);
+
+// Cleanup unused DOM elements
+const cleaned = cleanupUnused(rootElement);
+console.log(`Cleaned ${cleaned} elements`);
+```
+
+### Additional Features
+
+**DOM Utilities:**
+
+```typescript
+import { doc, el, els, createEl, elId, elClass, fragment } from 'elit';
+
+// Query selectors
+const element = el('.my-class');      // querySelector
+const elements = els('.my-class');    // querySelectorAll
+const byId = elId('my-id');          // getElementById
+const byClass = elClass('my-class'); // getElementsByClassName
+
+// Create elements
+const div = createEl('div');         // createElement
+const frag = fragment();             // createDocumentFragment
+
+// Access document
+doc.title = 'New Title';
+```
+
+**Effect System:**
+
+```typescript
+import { createState, effect } from 'elit';
+
+const count = createState(0);
+
+// Run side effects when state changes
+effect(() => {
+  console.log('Count is now:', count.value);
+});
+```
+
+**Reactive As (Advanced):**
+
+```typescript
+import { reactiveAs } from 'elit';
+
+// Use different reactive context
+const display = reactiveAs(customState, customContext, (value) =>
+  div(value)
+);
 ```
 
 ### JSON Rendering
@@ -428,7 +602,7 @@ renderVNode('#app', {
 ### Head Management
 
 ```typescript
-import { setTitle, addMeta, addLink, addStyle, renderToHead } from 'elit';
+import { setTitle, addMeta, addLink, addStyle } from 'elit';
 
 setTitle('My App');
 addMeta({ name: 'description', content: 'My awesome app' });
@@ -436,27 +610,6 @@ addLink({ rel: 'stylesheet', href: '/styles.css' });
 addStyle('body { margin: 0; }');
 ```
 
-### DOM Utilities
-
-Elit provides convenient DOM utility functions for common operations:
-
-```typescript
-import { doc, el, els, createEl, elId, elClass, fragment } from 'elit';
-
-// Query selectors (bound to document)
-const element = el('.my-class');           // querySelector
-const elements = els('.my-class');         // querySelectorAll
-const byId = elId('my-id');               // getElementById
-const byClass = elClass('my-class');      // getElementsByClassName
-
-// Create elements
-const div = createEl('div');              // createElement
-const frag = fragment();                  // createDocumentFragment
-
-// Access document object
-doc.title = 'New Title';
-```
-
 ## Available Elements
 
 ### HTML Elements (100+)
@@ -516,7 +669,7 @@ When loaded via script tag, all exports are available on the `window` object:
 ```html
 <script src="https://unpkg.com/elit@latest/dist/index.global.js"></script>
 <script>
-  const { div, span, createState, domNode } = window;
+  const { div, span, createState, dom } = window;
   // or use DomLib global namespace
   const app = DomLib.div('Hello');
 </script>
@@ -599,100 +752,165 @@ const users: State<User[]> = createState([]);
 // Full IntelliSense support for all 100+ HTML elements
 ```
 
-## Comparison with Other Libraries
+## Deployment
 
-| Feature | Elit | React | Vue | Svelte |
-|---------|------|-------|-----|--------|
-| Bundle Size (min) | 30KB | ~140KB | ~90KB | ~15KB* |
-| Zero Dependencies | ✅ | ❌ | ❌ | ✅ |
-| Virtual DOM | ❌ | ✅ | ✅ | ❌ |
-| TypeScript First | ✅ | ✅ | ✅ | ✅ |
-| Built-in Router | ✅ | ❌ | ❌ | ❌ |
-| Built-in State | ✅ | ❌ | ✅ | ✅ |
-| SSR Support | ✅ | ✅ | ✅ | ✅ |
-| Learning Curve | Easy | Medium | Medium | Easy |
+Deploy your Elit application to production:
 
-*Svelte requires compilation
+### Build for Production
 
-## Packages
+```bash
+# Build your app
+npx elit build
 
-This monorepo contains two packages:
+# Preview production build
+npx elit preview
+```
 
-### elit
-[![npm version](https://img.shields.io/npm/v/elit.svg)](https://www.npmjs.com/package/elit)
+### Deploy to Vercel
 
-The core library for building reactive web applications.
+```bash
+npm i -g vercel
+npm run build
+vercel --prod
+```
+
+### Deploy to Netlify
 
 ```bash
-npm install elit
+npm i -g netlify-cli
+npm run build
+netlify deploy --prod --dir=dist
 ```
 
-### @elit/server
-[![npm version](https://img.shields.io/npm/v/@elit/server.svg)](https://www.npmjs.com/package/@elit/server)
+### Deploy to GitHub Pages
+
+Create `.github/workflows/deploy.yml`:
+
+```yaml
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm install
+      - run: npm run build
+      - uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+```
 
-Development server with HMR, REST API, and real-time state synchronization.
+### Docker Deployment
 
-```bash
-npm install --save-dev @elit/server
+```dockerfile
+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
+```
+
+### Environment Variables
+
+Create `.env.production`:
+
+```env
+VITE_API_URL=https://api.example.com
+VITE_ENV=production
 ```
 
-[View @elit/server documentation →](./server/README.md)
+Access in your code:
+
+```typescript
+const apiUrl = import.meta.env.VITE_API_URL;
+const isProd = import.meta.env.PROD;
+```
+
+## Comparison with Other Frameworks
+
+| Feature | Elit | Vite + React | Next.js | SvelteKit |
+|---------|----------|--------------|---------|-----------|
+| Runtime Size | Lightweight | ~140KB+ | ~200KB+ | ~15KB* |
+| Dependencies | Minimal (5) | Many | Many | Many |
+| Dev Server | ✅ Built-in | ✅ Vite | ✅ Built-in | ✅ Built-in |
+| HMR | ✅ | ✅ | ✅ | ✅ |
+| Build Tool | ✅ esbuild | ✅ Vite | ✅ Turbopack | ✅ Vite |
+| REST API | ✅ Built-in | ❌ | ✅ | ✅ |
+| Middleware | ✅ Built-in | ❌ | ✅ | ✅ |
+| WebSocket | ✅ Built-in | ❌ | ❌ | ❌ |
+| Shared State | ✅ Built-in | ❌ | ❌ | ❌ |
+| TypeScript | ✅ | ✅ | ✅ | ✅ |
+| SSR | ✅ | ❌ | ✅ | ✅ |
+| Learning Curve | Easy | Medium | Medium | Easy |
+
+*Svelte requires compilation step
 
 ## Documentation
 
-- 📚 [Documentation Hub](./docs/README.md)
-- ⚡ [Quick Start Guide](./docs/QUICK_START.md) - Get started in 5 minutes
-- 📖 [API Reference](./docs/API.md) - Complete API documentation
-- ⚖️ [Comparison Guide](./docs/COMPARISON.md) - Compare with React, Vue, Svelte
-- 🔄 [Migration Guide](./docs/MIGRATION.md) - Migrate from other frameworks
-- 🤝 [Contributing Guide](./CONTRIBUTING.md) - Contribute to Elit
+- 📚 [Full Documentation](https://d-osc.github.io/elit)
+- ⚡ [Quick Start](https://d-osc.github.io/elit#/docs)
+- 📖 [API Reference](https://d-osc.github.io/elit#/api)
+- 🎮 [Interactive Examples](https://d-osc.github.io/elit#/examples)
 
 ## Changelog
 
-### elit v0.1.0
+### Elit - Full-Stack Framework
+
+**Major Changes:**
+- 🚀 **Integrated Build System**: Built-in esbuild with automatic client/server code separation
+- 🔥 **CLI Tools**: New commands - `npx elit dev`, `npx elit build`, `npx elit preview`
+- 🏗️ **Zero Config**: Works out of the box with optional `elit.config.mjs`
+- 🌐 **REST API Router**: Server-side routing with full middleware stack
+- 🔄 **Shared State**: Real-time WebSocket state synchronization
+- 🎯 **basePath Support**: Configure base paths for subdirectory deployments
+- 🔐 **Environment Variables**: .env file support with VITE_ prefix
+- 📦 **Gzip Compression**: Automatic compression for production builds
+- 💾 **Cache Headers**: Smart caching for static assets
+- ⚡ **Hot Module Replacement**: Instant development feedback
 
 **Core Library:**
-- 🎉 Initial release
-- ⚡ Optimized bundle size (50% reduction from initial builds - 30KB minified)
-- 🚀 Full TypeScript support with complete type definitions
-- 🎨 Complete CSS-in-JS with CreateStyle
-- 🛣️ Client-side router with navigation guards
-- 📦 Tree-shakeable ES modules
+- 🎯 Ultra lightweight (~10KB gzipped)
+- ⚡ Reactive state management
+- 🎨 CSS-in-JS with CreateStyle
+- 🛣️ Client-side router
+- 📱 Virtual scrolling
+- 🖥️ SSR support
 - 🎭 100+ HTML, SVG, and MathML elements
-- 🔧 Performance utilities (throttle, debounce, virtual scrolling)
-- 🖥️ SSR capabilities with renderToString
-- 🎮 DOM utility functions
-- 🌐 Shared state integration with @elit/server
-
-**New Package - @elit/server v0.1.0:**
-- ⚡ Hot Module Replacement (HMR) with WebSocket
-- 🌐 REST API router with regex-based parameters
-- 🔧 Middleware stack (CORS, logging, error handling, rate limiting, compression, security)
-- 🔄 Real-time shared state synchronization
-- 📊 Built-in WebSocket server
-- 📁 Static file server with MIME type detection
-- 🛠️ CLI tool (`elit-dev`)
-- 🎯 Zero-config with sensible defaults
+- 🔧 Performance utilities
+- 📦 Tree-shakeable ES modules
 
 ## Examples
 
-Check out the example applications in the repository:
+Example applications demonstrating Elit features:
 
-- **[HMR Example](./server/example/hmr-example.html)** - Hot Module Replacement demo
-- **[REST API Example](./server/example/api-example.js)** - Full REST API with todos
-- **[Shared State (Vanilla)](./server/example/state-demo.html)** - Real-time state sync without Elit
-- **[Shared State (Elit)](./server/example/elit-state-demo.html)** - Real-time state with Elit reactive system
-- **[Todo App](./examples)** - Complete todo application (coming soon)
+- 📖 **[Documentation Site](./docs)** - Full-featured docs site with i18n and blog
+- 🎯 **[Counter App](./examples/counter)** - Simple reactive counter
+- ✅ **[Todo App](./examples/todo)** - Todo list with state management
+- 🎨 **[Styled Components](./examples/styled)** - CSS-in-JS examples
 
-[View all examples →](./server/example/README.md)
+[View all examples →](./examples)
 
 ## Links
 
-- 📦 [npm - elit](https://www.npmjs.com/package/elit)
-- 📦 [npm - @elit/server](https://www.npmjs.com/package/@elit/server)
-- 🐙 [GitHub Repository](https://github.com/oangsa/elit)
-- 📚 Documentation (coming soon)
-- 💬 Discord Community (coming soon)
+- 📦 [npm Package](https://www.npmjs.com/package/elit)
+- 🐙 [GitHub Repository](https://github.com/d-osc/elit)
+- 📚 [Documentation](https://d-osc.github.io/elit)
+- 💬 Community & Issues: [GitHub Discussions](https://github.com/d-osc/elit/discussions)
 
 ## Contributing