kilatjs 0.1.0 → 0.1.4

package/README.md

@@ -14,425 +14,612 @@
 
 KilatJS is a server-first web framework inspired by the simplicity of PHP and the power of modern component libraries. It rejects the complexity of SPAs, hydration, and client-side routing in favor of **real HTML rendered on the server**.
 
-**🔥 Powered by Bun's Native APIs - No Abstractions, Pure Performance:**
-- 🚀 **Bun.FileSystemRouter** - Zero-config file-based routing at native speed
-- ⚡ **Bun.serve()** - HTTP/2 server with built-in WebSocket support
-- 🔧 **Bun.file()** - Streaming file operations with automatic MIME detection
-- 📦 **Bun.build()** - Native TypeScript/JSX bundling (no Webpack/Vite needed)
-- 🔄 **Bun.spawn()** - Process management for build tools and external commands
-- 💾 **Bun.write()** - Optimized file writing with atomic operations
-- 🔍 **Bun.glob()** - Pattern matching for static site generation
-
 ### One-Line Positioning
 
 > **"Request → Load → Render HTML → Response. That's it."**
 
 ---
 
-## 🔥 Why Bun Native?
-
-KilatJS leverages Bun's runtime directly instead of abstracting it away:
+## ⚡ Quick Start
 
-```typescript
-// Direct Bun.FileSystemRouter usage
-const router = new Bun.FileSystemRouter({
-    style: "nextjs",
-    dir: "./routes"
-});
+### Create a New Project
 
-// Native Bun.serve() with streaming
-export default {
-    port: 3000,
-    fetch: async (request) => {
-        // Zero-copy request handling
-        return new Response(Bun.file("./static/index.html"));
-    }
-};
+The easiest way to start is using the KilatJS CLI:
 
-// Built-in TypeScript compilation
-const result = await Bun.build({
-    entrypoints: ["./src/index.tsx"],
-    outdir: "./dist",
-    target: "bun"
-});
+```bash
+# Create a new project in my-app folder
+bunx kilat create my-app
+cd my-app
+bun install
+bun run dev
 ```
 
-**Performance Benefits:**
-- ⚡ **3x faster** cold starts vs Node.js frameworks
-- 🚀 **Native TypeScript** - no transpilation overhead
-- 💾 **Zero-copy streaming** for static files
-- 🔧 **Built-in bundling** eliminates build tool complexity
+Visit [http://localhost:3000](http://localhost:3000) 🎉
 
 ---
 
-## ✅ Core Principles
-
-1. **HTML is the protocol** — Every response is complete, semantic HTML
-2. **Server owns all truth** — No client-side state management nightmares
-3. **Every meaningful change = HTTP request** — Forms, mutations, navigation
-4. **UI frameworks render, never orchestrate** — React/Solid/Vue for templating only
-5. **JavaScript is optional, not required** — Sites work without JS
-
----
+## 📖 CLI Commands
 
-## ❌ Strict Non-Goals
+| Command              | Description                                     |
+| -------------------- | ----------------------------------------------- |
+| `kilat create [dir]` | Create a new project from template              |
+| `kilat dev`          | Start development server with HMR + Live Reload |
+| `kilat build`        | Build for production                            |
+| `kilat serve`        | Run production server (`bun dist/server.js`)    |
+| `kilat preview`      | Preview build output                            |
 
-KilatJS intentionally avoids:
+### Development Output
 
-- ❌ Client-Side Rendering (CSR)
-- ❌ Hydration / Islands architecture
-- ❌ Client-side routing
-- ❌ Framework hooks (`useLoaderData`, `useRoute`, etc.)
-- ❌ Middleware chains
-- ❌ Dependency injection
-- ❌ SPA build assumptions
-- ❌ Vite as a hard dependency
+```
+⚡ KilatJS Dev Server
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  ➜ http://localhost:3000
+  ➜ HMR + Live Reload enabled
+  ➜ Edit files and see changes instantly
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
 
 ---
 
-## 🚀 Quick Start
+## 📁 Project Structure
 
-### 1. Install dependencies
+KilatJS uses a simplified, root-level structure:
 
-```bash
-bun install
 ```
-
-### 2. Run the example
-
-```bash
-bun run dev
+my-app/
+├── public/                # Static assets & index.html
+├── routes/                # SSR routes (index.tsx, about.tsx)
+├── components/            # React/Kilat components
+├── kilat.config.ts        # Configuration
+├── input.css              # Tailwind input
+├── index.client.tsx       # (Optional) React client entry
+├── App.tsx                # (Optional) Client-side app
+└── dist/                  # Production build
 ```
 
-Visit [http://localhost:3000](http://localhost:3000) to see the example site.
-
 ---
 
-## 📁 Project Structure
+## ⚛️ React Client Support (Opt-in)
 
-```
-kilatjs/
-├── src/
-│   ├── index.ts           # Main entry point
-│   ├── core/
-│   │   ├── router.ts      # File-based router
-│   │   └── types.ts       # TypeScript types
-│   ├── adapters/
-│   │   └── react.ts       # React SSR adapter
-│   └── server/
-│       └── server.ts      # Bun HTTP server
-├── example/
-│   ├── server.ts          # Example server entry
-│   ├── build.ts           # Static build script
-│   ├── styles.css         # CSS styles
-│   ├── components/
-│   │   └── Layout.tsx     # Shared layout
-│   └── routes/
-│       ├── index.tsx      # Home page
-│       ├── about.tsx      # About page
-│       ├── contact.tsx    # Contact form
-│       ├── contact/
-│       │   └── success.tsx
-│       └── blog/
-│           ├── index.tsx  # Blog listing
-│           └── [slug].tsx # Dynamic blog posts
-└── README.md
+While KilatJS is HTML-first, you can easily add a full React client-side application for complex interactive features.
+
+1. **Auto-detection**: If `index.client.tsx` exists in your root, KilatJS will automatically bundle it.
+2. **Setup**: Create a `public/index.html` with a mount point:
+
+```html
+<div id="root"></div>
+<script type="module" src="/client/index.client.js"></script>
 ```
 
+3. **Route**: Define `clientRoute: "/client"` in `kilat.config.ts` to host your SPA.
+
 ---
 
 ## 📄 Route Contract
 
-Each route file may export **at most**:
+Each route file can export:
 
 ```tsx
-// Rendering mode: "static" (build-time) or "ssr" (request-time)
-export const mode = "ssr";
-
-// UI framework: "react" | "solid" | "vue" (default: react)
-export const ui = "react";
-
 // SEO meta tags
 export const meta = {
-    title: "Page Title",
-    description: "Page description for SEO",
-    robots: "index,follow",
-    ogTitle: "Open Graph Title",
-    ogDescription: "Open Graph description",
-    ogImage: "https://example.com/image.jpg"
+  title: "Page Title",
+  description: "Page description",
+  robots: "index,follow",
+  ogTitle: "Open Graph Title",
+  ogDescription: "OG description",
+  ogImage: "https://example.com/image.jpg",
 };
 
-// For static generation of dynamic routes
-export function getStaticPaths() {
-    return ["/blog/post-1", "/blog/post-2"];
-}
-
-// Server-only data loading
+// Server-side data loading
 export async function load(ctx) {
-    const data = await fetchFromDatabase();
-    return { posts: data };
+  const data = await fetchData();
+  return { items: data };
 }
 
-// HTTP action handlers
+// HTTP method handlers (POST, PUT, DELETE, etc.)
 export async function POST(ctx) {
-    const formData = await ctx.request.formData();
-    // Process form...
-    return Response.redirect("/success", 302);
+  const formData = await ctx.request.formData();
+  // Process form...
+  return Response.redirect("/success", 302);
 }
 
-// Pure render function
+// Page component (receives data from load())
 export default function Page({ data, params, state }) {
-    return <div>{data.posts.map(p => <h2>{p.title}</h2>)}</div>;
+  return (
+    <div>
+      {data.items.map((item) => (
+        <p>{item.name}</p>
+      ))}
+    </div>
+  );
 }
 ```
 
 ---
 
-## 🔄 Actions (PRG Pattern)
+## 🔧 Tutorial: Building a Blog
+
+### Step 1: Create Layout Component
 
-All meaningful state changes happen via HTTP requests:
+**`src/components/Layout.tsx`:**
 
 ```tsx
-// routes/contact.tsx
-export async function POST({ request }) {
-    const formData = await request.formData();
-    const email = formData.get("email");
-    
-    await saveToDatabase({ email });
-    
-    // PRG: Post-Redirect-Get pattern
-    return Response.redirect("/contact/success", 302);
+interface LayoutProps {
+  children: React.ReactNode;
+  title?: string;
 }
 
-export default function ContactPage() {
-    return (
-        <form method="POST" action="/contact">
-            <input type="email" name="email" required />
-            <button type="submit">Subscribe</button>
-        </form>
-    );
+export function Layout({ children, title = "My Blog" }: LayoutProps) {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <header className="bg-white shadow">
+        <nav className="max-w-4xl mx-auto px-4 py-4">
+          <a href="/" className="text-xl font-bold">
+            My Blog
+          </a>
+          <div className="float-right space-x-4">
+            <a href="/" className="text-gray-600 hover:text-gray-900">
+              Home
+            </a>
+            <a href="/blog" className="text-gray-600 hover:text-gray-900">
+              Blog
+            </a>
+            <a href="/about" className="text-gray-600 hover:text-gray-900">
+              About
+            </a>
+          </div>
+        </nav>
+      </header>
+      <main className="max-w-4xl mx-auto px-4 py-8">{children}</main>
+    </div>
+  );
 }
 ```
 
-**No JavaScript required.** Forms work natively.
+### Step 2: Create Blog List Page
 
----
+**`src/routes/blog/index.tsx`:**
+
+```tsx
+import { Layout } from "../../components/Layout";
 
-## 🎨 Styling (Tailwind-Ready)
+export const meta = {
+  title: "Blog - My Site",
+  description: "Read our latest articles",
+};
 
-KilatJS supports Tailwind CSS via CLI (no Vite required):
+export async function load() {
+  // In real app, fetch from database
+  const posts = [
+    {
+      id: 1,
+      slug: "hello-world",
+      title: "Hello World",
+      excerpt: "My first post...",
+    },
+    {
+      id: 2,
+      slug: "getting-started",
+      title: "Getting Started",
+      excerpt: "Learn how to...",
+    },
+  ];
+  return { posts };
+}
 
-```bash
-# Generate CSS
-npx tailwindcss -i ./input.css -o ./styles.css --watch
+export default function BlogPage({ data }) {
+  return (
+    <Layout>
+      <h1 className="text-3xl font-bold mb-8">Blog</h1>
+      <div className="space-y-6">
+        {data.posts.map((post) => (
+          <article key={post.id} className="bg-white p-6 rounded-lg shadow">
+            <h2 className="text-xl font-semibold">
+              <a href={`/blog/${post.slug}`} className="hover:text-blue-600">
+                {post.title}
+              </a>
+            </h2>
+            <p className="text-gray-600 mt-2">{post.excerpt}</p>
+          </article>
+        ))}
+      </div>
+    </Layout>
+  );
+}
 ```
 
-Configure in your `kilat.config.ts`:
+### Step 3: Create Dynamic Blog Post Page
 
-```ts
-import { createKilat } from 'kilatjs';
-
-createKilat({
-    routesDir: "./routes",
-    tailwind: {
-        enabled: true,
-        cssPath: "./styles.css"
-    }
-});
+**`src/routes/blog/[slug].tsx`:**
+
+```tsx
+import { Layout } from "../../components/Layout";
+
+export const meta = {
+  title: "Blog Post",
+  description: "Read this article",
+};
+
+export async function load({ params }) {
+  // params.slug contains the URL parameter
+  const post = await getPostBySlug(params.slug);
+
+  if (!post) {
+    throw new Response("Not Found", { status: 404 });
+  }
+
+  return { post };
+}
+
+async function getPostBySlug(slug: string) {
+  // In real app, fetch from database
+  const posts = {
+    "hello-world": { title: "Hello World", content: "This is my first post!" },
+    "getting-started": {
+      title: "Getting Started",
+      content: "Let me show you how...",
+    },
+  };
+  return posts[slug] || null;
+}
+
+export default function BlogPostPage({ data, params }) {
+  return (
+    <Layout>
+      <article>
+        <h1 className="text-4xl font-bold mb-4">{data.post.title}</h1>
+        <div className="prose max-w-none">{data.post.content}</div>
+      </article>
+      <a href="/blog" className="text-blue-600 mt-8 inline-block">
+        ← Back to Blog
+      </a>
+    </Layout>
+  );
+}
 ```
 
----
+### Step 4: Create API Route
 
-## 📊 Rendering Modes
+**`src/routes/api/posts.ts`:**
 
-### Static Generation
+```ts
+import { RouteContext } from "kilatjs";
 
-- Build-time HTML
-- Best for SEO & caching
-- Requires explicit path enumeration for dynamic routes
+const posts = [
+  { id: 1, title: "Hello World", slug: "hello-world" },
+  { id: 2, title: "Getting Started", slug: "getting-started" },
+];
 
-```tsx
-export const mode = "static";
+// GET /api/posts
+export async function GET(ctx: RouteContext) {
+  const search = ctx.query.get("search")?.toLowerCase();
+
+  let results = posts;
+  if (search) {
+    results = posts.filter((p) => p.title.toLowerCase().includes(search));
+  }
+
+  return new Response(JSON.stringify({ data: results }), {
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+// POST /api/posts
+export async function POST(ctx: RouteContext) {
+  const body = await ctx.request.json();
+
+  const newPost = {
+    id: posts.length + 1,
+    title: body.title,
+    slug: body.title.toLowerCase().replace(/\s+/g, "-"),
+  };
+
+  posts.push(newPost);
 
-export function getStaticPaths() {
-    return ["/blog/post-1", "/blog/post-2"];
+  return new Response(JSON.stringify({ data: newPost }), {
+    status: 201,
+    headers: { "Content-Type": "application/json" },
+  });
 }
 ```
 
-### Server-Side Rendering (SSR)
+### Step 5: Create Contact Form with PRG Pattern
 
-- Request-time HTML
-- PHP-style execution
-- Infinite routes allowed
+**`src/routes/contact.tsx`:**
 
 ```tsx
-export const mode = "ssr"; // or omit (default)
-```
+import { Layout } from "../components/Layout";
 
----
+export const meta = {
+  title: "Contact Us",
+  description: "Get in touch with us",
+};
 
-## 🔐 Authentication
+// Handle form submission
+export async function POST({ request }) {
+  const formData = await request.formData();
+  const name = formData.get("name");
+  const email = formData.get("email");
+  const message = formData.get("message");
 
-Identity is proven **per request** via cookies/headers:
+  // Save to database, send email, etc.
+  console.log("Contact form:", { name, email, message });
 
-```tsx
-export async function load({ request }) {
-    const session = await getSession(request.headers.get("cookie"));
-    
-    if (!session) {
-        throw Response.redirect("/login");
-    }
-    
-    return { user: session.user };
+  // PRG: Post-Redirect-Get pattern
+  return Response.redirect("/contact/success", 302);
+}
+
+export default function ContactPage() {
+  return (
+    <Layout>
+      <h1 className="text-3xl font-bold mb-8">Contact Us</h1>
+      <form method="POST" className="max-w-md space-y-4">
+        <div>
+          <label className="block text-sm font-medium mb-1">Name</label>
+          <input
+            type="text"
+            name="name"
+            required
+            className="w-full px-3 py-2 border rounded-lg"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium mb-1">Email</label>
+          <input
+            type="email"
+            name="email"
+            required
+            className="w-full px-3 py-2 border rounded-lg"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium mb-1">Message</label>
+          <textarea
+            name="message"
+            rows={4}
+            required
+            className="w-full px-3 py-2 border rounded-lg"
+          />
+        </div>
+        <button
+          type="submit"
+          className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700"
+        >
+          Send Message
+        </button>
+      </form>
+    </Layout>
+  );
 }
 ```
 
-- Never trust localStorage for auth
-- Server validates every request
-- Cookies are the source of truth
+**`src/routes/contact/success.tsx`:**
+
+```tsx
+import { Layout } from "../../components/Layout";
+
+export const meta = {
+  title: "Message Sent",
+};
+
+export default function ContactSuccessPage() {
+  return (
+    <Layout>
+      <div className="text-center py-12">
+        <h1 className="text-3xl font-bold text-green-600 mb-4">
+          ✓ Message Sent!
+        </h1>
+        <p className="text-gray-600 mb-8">
+          Thank you for contacting us. We'll get back to you soon.
+        </p>
+        <a href="/" className="text-blue-600 hover:underline">
+          ← Back to Home
+        </a>
+      </div>
+    </Layout>
+  );
+}
+```
 
 ---
 
-## 🏃 Running Your App
+## 🔐 Authentication Example
+
+```tsx
+// src/routes/dashboard.tsx
+export async function load({ request }) {
+  const cookie = request.headers.get("cookie");
+  const session = await getSession(cookie);
 
-### Development
+  if (!session) {
+    // Redirect to login if not authenticated
+    throw Response.redirect("/login", 302);
+  }
 
-```ts
-// Named import
-import { createKilat } from 'kilatjs';
-
-// Or default import  
-import Kilat from 'kilatjs';
-
-const server = createKilat({
-    routesDir: "./routes",
-    port: 3000,
-    dev: true,
-    tailwind: {
-        enabled: false,
-        cssPath: "./styles.css"
-    }
-});
+  return { user: session.user };
+}
 
-server.start();
+export default function DashboardPage({ data }) {
+  return (
+    <div>
+      <h1>Welcome, {data.user.name}!</h1>
+      <form method="POST" action="/logout">
+        <button type="submit">Logout</button>
+      </form>
+    </div>
+  );
+}
 ```
 
-### Static Build
+---
+
+## 🛠️ Configuration Reference
 
 ```ts
-import { buildStatic } from 'kilatjs';
-
-buildStatic({
-    routesDir: "./routes",
-    outDir: "./dist"
+// kilat.config.ts
+import { defineConfig } from "kilatjs";
+
+export default defineConfig({
+  appDir: "./src", // Source directory (auto-detects routes/ or pages/)
+  outDir: "./dist", // Production build output
+  port: 3000, // Server port
+  hostname: "localhost", // Server hostname
+  publicDir: "./public", // Static assets directory
+  tailwind: {
+    enabled: true, // Enable Tailwind CSS
+    inputPath: "./input.css",
+    cssPath: "./styles.css",
+  },
 });
 ```
 
 ---
 
-## 🧩 UI Framework Support
+## 🔥 Why Bun Native?
 
-| Framework | Status | Notes |
-|-----------|--------|-------|
-| React | ✅ Default | Full SSR support |
-| Solid | 🚧 Planned | Coming soon |
-| Vue | 🚧 Planned | Coming soon |
+KilatJS leverages Bun's runtime directly:
 
-**Rule:** One renderer per route. No mixing.
+- ⚡ **Bun.FileSystemRouter** - Zero-config file-based routing
+- 🚀 **Bun.serve()** - HTTP server with WebSocket support
+- 📦 **Bun.build()** - Native TypeScript/JSX bundling
+- 💾 **Bun.file()** - Streaming file operations
+- 🔍 **Bun.Glob** - Pattern matching for routes
 
----
+**Performance:**
 
-## 🎯 SEO Guarantee
+- 3x faster cold starts vs Node.js
+- Native TypeScript - no transpilation
+- Zero-copy streaming for static files
+
+---
 
-> **If a route exists, it is SEO-friendly.**
+## ✅ Core Principles
 
-Because:
-- HTML is always complete
-- `<head>` is server-rendered
-- No JS required for content
-- Meta tags are first-class
+1. **HTML is the protocol** — Every response is complete, semantic HTML
+2. **Server owns all truth** — No client-side state management
+3. **Every change = HTTP request** — Forms, mutations, navigation
+4. **UI frameworks render only** — React for templating, not orchestration
+5. **JavaScript is optional** — Sites work without JS
 
 ---
 
-## 📜 Philosophy
+## ⚡ Client-Side Interactivity
 
-KilatJS rejects modern web complexity:
+KilatJS is server-first, but you can add client-side interactivity using these patterns:
 
-| We Don't Do | We Do |
-|-------------|-------|
-| Client-side rendering | Server-rendered HTML |
-| Hydration/Islands | Static markup |
-| Client-side router | HTTP navigation |
-| Framework hooks | Props from loader |
-| State sync | HTTP mutations |
+### 1. `clientScript` Export (Recommended)
 
----
+Export a function that runs in the browser. TypeScript/LSP fully supports it!
+
+```tsx
+// src/routes/counter.tsx
+
+// Client-side script - auto-injected, LSP checks the code!
+export function clientScript() {
+  let count = 0;
+  const countEl = document.getElementById("count")!;
+
+  document.getElementById("decrement")!.onclick = () => {
+    countEl.textContent = String(--count);
+  };
+  document.getElementById("increment")!.onclick = () => {
+    countEl.textContent = String(++count);
+  };
+}
+
+export default function CounterPage() {
+  return (
+    <div>
+      <button id="decrement">-</button>
+      <span id="count">0</span>
+      <button id="increment">+</button>
+    </div>
+  );
+}
+```
 
-## 🛠️ API Reference
+The framework automatically injects the script - no manual `<script>` tags needed!
 
-### `createKilat(config)`
+### 2. Alpine.js
 
-Creates a Kilat server instance.
+Lightweight reactivity with declarative HTML attributes:
 
-```ts
-interface KilatConfig {
-    routesDir: string;      // Path to routes directory
-    outDir: string;         // Output for static builds
-    port?: number;          // Server port (default: 3000)
-    hostname?: string;      // Server hostname (default: "localhost")
-    dev?: boolean;          // Development mode
-    publicDir?: string;     // Static assets directory
-    tailwind?: {
-        enabled: boolean;
-        cssPath: string;
-        configPath?: string;
-    };
+```tsx
+export default function AlpinePage() {
+  return (
+    <div x-data="{ count: 0 }">
+      <button x-on:click="count--">-</button>
+      <span x-text="count">0</span>
+      <button x-on:click="count++">+</button>
+    </div>
+  );
 }
 ```
 
-### `RouteContext`
+### 3. HTMX
 
-Passed to `load()` and action handlers:
+Server-driven UI updates without JavaScript:
 
-```ts
-interface RouteContext {
-    request: Request;                    // Web Request object
-    params: Record<string, string>;      // URL parameters
-    query: URLSearchParams;              // Query string
-    state: ServerGlobalState;            // Request-scoped state
-}
+```html
+<!-- Can use .html files directly in routes/ -->
+<button hx-get="/api/greeting" hx-target="#result" hx-swap="innerHTML">
+  Load
+</button>
+<div id="result"></div>
 ```
 
-### `PageProps`
+KilatJS supports `.html` files as routes - perfect for HTMX pages!
+
+### 4. Native HTML Forms
+
+Best for mutations - no JS required:
+
+```tsx
+<form method="POST" action="/contact">
+  <input name="email" type="email" />
+  <button type="submit">Submit</button>
+</form>
+```
 
-Passed to page components:
+## 🛠️ Configuration Reference
 
 ```ts
-interface PageProps {
-    data: any;                           // From load()
-    params: Record<string, string>;      // URL parameters
-    state: ServerGlobalState;            // Request-scoped state
-}
+// kilat.config.ts
+import { defineConfig } from "kilatjs";
+
+export default defineConfig({
+  appDir: ".", // Root directory for routes/ and components/
+  outDir: "./dist", // Production build output
+  port: 3000, // Server port
+  publicDir: "./public", // Static assets directory (auto-detects index.html)
+  clientRoute: "/client", // (Optional) Path for React client SPA
+  tailwind: {
+    enabled: true, // Enable Tailwind CSS
+    inputPath: "./input.css",
+    cssPath: "./public/styles.css",
+  },
+});
 ```
 
 ---
 
-## 📝 License
+## ⚡ Hybrid Approach
 
-MIT
+KilatJS uniquely allows you to mix **HTML-First SSR** with **Full React CSR**:
 
----
+- **Use SSR** for public pages, SEO, blogs, and landing pages.
+- **Use CSR** for complex dashboards, interactive editors, or apps requiring shared state.
+
+> **Note**: KilatJS keeps these worlds separate. SSR pages are pure HTML (no React runtime), while CSR pages are full React apps. This gives you the speed of a static site with the power of a modern app.
 
-## 🤝 Contributing
+---
 
-KilatJS is in early development. Contributions welcome!
+## 📝 License
 
-1. Fork the repository
-2. Create a feature branch
-3. Submit a pull request
+MIT
 
 ---
 
 <p align="center">
-  <strong>Built with 💜 for the real web using Bun's native APIs.</strong>
-</p>
+  <strong>Built with 💜 for the real web using Bun.</strong>
+</p>