@lengkapp/edge 0.0.39 → 0.0.40

package/README.md

@@ -1,438 +1,913 @@
-# Edge Libraries
+# @lengkapp/edge
 
-Dependency-free edge runtime — HonoJS + htmx inspired. Used by **lengkapp**.
+A minimal, high-performance framework for Cloudflare Workers with built-in server-side rendering, routing, caching, and a declarative client-side partial-update library.
 
-A tiny, zero-dependency toolkit that gives you:
+Inspired by [Hono](https://hono.dev), `@lengkapp/edge` aims for the same class of performance while shipping with **zero runtime dependencies**.
 
-- **`client.js`** — browser runtime driven by HTML attributes (`_get`, `_post`, `_go`, …)
-- **`server.js`** — Cloudflare Worker router with JSX, no bundler required
+> **Security:** The server is hardened against the OWASP Top 10:2025 and ASVS 5.0 Layer 1 controls — prototype-safe params, cookies, JSON bodies and JSX attributes; CSP-friendly response headers; fail-closed middleware; strict CORS allowlist; and structured security logging. See [Security Controls](#security-controls).
 
-Small code, maximum security, no external runtime dependencies.
+## Table of Contents
 
-## Contents
+- [Features](#features)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Server API](#server-api)
+- [JSX Support](#jsx-support)
+- [Full Example](#full-example)
+- [Client (Declarative Partial Updates)](#client-declarative-partial-updates)
+- [Device Identity](#device-identity)
+- [CSRF Protection](#csrf-protection)
+- [Security Controls](#security-controls)
+- [Scheduled Tasks](#scheduled-tasks)
+- [Configuration](#configuration)
+- [Performance](#performance)
+- [Build](#build)
+- [Security Posture Summary](#security-posture-summary)
+- [License](#license)
 
-1. [Features](#1-features)
-2. [Install](#2-install)
-3. [Project Layout](#3-project-layout)
-4. [Client Usage](#4-client-usage)
-5. [Server Usage](#5-server-usage)
-6. [Full Example (sample.tsx)](#6-full-example-sampletsx)
-7. [Theming (Dark / Light)](#7-theming-dark--light)
-8. [Icons (Inline Lucide)](#8-icons-inline-lucide-svg)
-9. [Build](#9-build)
-10. [Deploy (Wrangler)](#10-deploy-wrangler)
-11. [Security](#11-security)
-12. [License](#12-license)
+## Features
 
----
+### Server
 
-## 1. Features
+- **Trie-based routing** – static and dynamic routes (`/users/:id`)
+- **JSX support** – pass JSX straight to `ctx.html(<Card />)`; no build step, no manual `renderToString` call
+- **Middleware** – CORS, logging, caching, compression, validation
+- **Cookie helpers** with validation
+- **Scheduled tasks** via Cron triggers
+- **Zero dependencies**
 
-### `client.js` (browser)
+### Client
 
-| Attribute  | Description |
-|------------|--------------|
-| `_get`     | `fetch(url)` GET |
-| `_post`    | `fetch(url)` POST, needs `_form` or `_json` |
-| `_go`      | Navigate |
-| `_open`    | Open in new tab |
-| `_in`      | Place response using `innerHTML` |
-| `_out`     | Place response using `outerHTML` |
-| `_before`  | Place response before target |
-| `_after`   | Place response after target |
-| `_form`    | FormData source selector (for `_post`) |
-| `_json`    | JSON source selector list (for `_post`) |
-| `_trigger` | `"click"` \| `"load"` \| `"visible"` (default `"click"`) |
-| `_id`      | Send `X-DeviceId` header (GET/POST only) |
+- **Declarative partial updates** via `_get` / `_post` and the placement modes `_in`, `_out`, `_before`, `_after`
+- **Client-side navigation** via `_go` (same tab) and `_open` (new tab)
+- **Opt-in device identity** via `_id` — attaches an `X-DeviceId` header to `_get` / `_post` requests, sourced from an optional `window.deviceId()` hook
+- **Click, load, and visibility triggers** – `click` (default), `load`, `visible`
+- **JSON and form bodies** – `_json="#a,#b"` or `_form="#signup"`
+- **Built-in loading and error states** – spinner loader, abortable requests, one-click retry
+- **Error toast host** via `_toast` — on a non-2xx response, inject the response body into a chosen element
+- **Zero dependencies**
 
-**Automatic behavior:**
+### Security
 
-- Always sends `X-CSRF-Token` from `<meta name="_csrf" content="...">`.
-- Sends `X-DeviceId` from `deviceId()` when `_id` is present.
-- `MutationObserver` re-attaches handlers to injected elements.
-- Loader + skeleton + retry/error UI injected around the target (cancelable via `AbortController` on repeat requests).
-- Uses `IntersectionObserver` for `_trigger="visible"`.
+- **Prototype-pollution safe** – route params, cookies, JSON bodies, JSX attributes
+- **XSS-hardened JSX** – no `on*` attributes, no `javascript:` URLs, no malformed tag names
+- **Structured security logging** – throttled JSON events for validation and handler failures
+- **Fail-closed middleware** – validation and handler errors deny by default
+- **Strict CORS allowlist** – per-origin reflection with `Vary: Origin`
 
-### `server.js` (Cloudflare Worker)
+## Installation
 
-- Hono-style router: `app.get` / `post` / `put` / `delete` / `options`
-- Path params: `"/:lang/:page"`
-- JSX without a bundler — works with `wrangler dev` / `deploy --minify`
-- Per-route config: `{ valid, auth }` for CSRF + cookie auth
-- Response helpers: `c.text`, `c.json`, `c.html`, `c.page`, `c.redirect`
-- CORS allowlist (exact hosts or `*.example.com`)
-- Extra response headers via `app.headers`
+```bash
+npm install @lengkapp/edge
+```
+
+## Quick Start
+
+**`worker.js`**
+
+```ts
+import { Edge } from '@lengkapp/edge';
+
+const app = new Edge();
+
+app.get('/', (ctx) => ctx.text('Hello World!'));
+app.get('/users/:id', (ctx) => ctx.json({ id: ctx.params.id }));
+
+export default app;
+```
+
+Or, if you use JSX, **`worker.tsx`**:
+
+```tsx
+import { Edge, jsx, Fragment } from '@lengkapp/edge';
+
+const app = new Edge();
+
+const Card = () => <div>card</div>;
+
+const LandingPage = () => (
+  <>
+    <h1>hello world</h1>
+    <Card />
+  </>
+);
+
+app.get('/', () => <LandingPage />);
+
+export default app;
+```
+
+**`tsconfig.json`** (TypeScript):
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "jsx",
+    "jsxFragmentFactory": "Fragment",
+    "paths": { "@/*": ["./src/*"] },
+    "types": ["@cloudflare/workers-types"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "lib": ["ESNext", "WebWorker"]
+  }
+}
+```
+
+**`wrangler.jsonc`**
+
+```jsonc
+{
+  "$schema": "./node_modules/wrangler/config-schema.json",
+  "name": "my-edge-app",
+  "main": "worker.js",
+  "compatibility_date": "2026-09-14"
+}
+```
+
+Or **`wrangler.toml`**:
 
----
+```toml
+name = "my-edge-app"
+main = "worker.js"
+compatibility_date = "2026-09-14"
+```
 
-## 2. Install
+Deploy:
 
 ```bash
-git clone <this repo>
-cd edge-libraries
-npm install
-npm run build        # → dist/
-npm run dev #trying sample.tsx
+wrangler deploy
 ```
 
-Requires Node 18+ (built and tested on Node 20+).
+## Server API
+
+### Context
+
+| Member | Description |
+| --- | --- |
+| `ctx.req` | Incoming `Request` |
+| `ctx.env` | Environment bindings |
+| `ctx.executionCtx` | `ExecutionContext` |
+| `ctx.params` | Prototype-safe route params object |
+| `ctx.status` | Default response status (`200`) |
+| `ctx.headers` | Response `Headers` |
+| `ctx.query` | `URLSearchParams` |
+| `ctx.url` | Parsed `URL` object |
+| `ctx.getCookie(name)` | Read a cookie |
+| `ctx.setCookie(name, value, options)` | Set a cookie (name validated) |
+| `ctx.deleteCookie(name, options)` | Delete a cookie |
+| `ctx.text(data, status?, headers?)` | Plain-text response |
+| `ctx.json(data, status?, headers?)` | JSON response |
+| `ctx.html(data, status?, headers?)` | HTML response — accepts a raw string, a JSX element, or an array of JSX elements. Async (awaits JSX rendering). |
+| `ctx.page(data, status?, headers?)` | Same as `ctx.html`, but prepends `<!DOCTYPE html>` if the body does not already start with one. Async. |
+| `ctx.redirect(location, status?)` | Redirect (default `302`), preserving headers already set on the context |
 
----
+Every response carries `X-Content-Type-Options: nosniff`, `X-Frame-Options: DENY`, `Referrer-Policy: strict-origin-when-cross-origin`, and a restrictive `Permissions-Policy`.
 
-## 3. Project Layout
+### Ambient Context (`useCtx`)
 
+`useCtx()` returns the `Context` of the request whose render is currently executing. It is backed by a synchronous stack — no `AsyncLocalStorage`, no compatibility flags.
+
+```tsx
+import { useCtx } from '@lengkapp/edge';
+
+async function User() {
+  // MUST be called synchronously, before any await.
+  const ctx = useCtx();
+  const res = await fetch(`https://api.example.com/users/${ctx.params.id}`);
+  const data = await res.json();
+  // After the await, use the captured local `ctx` — do not call useCtx() again.
+  return <div>{data.name}</div>;
+}
 ```
-client.js        browser runtime (source)
-client.d.ts      typings for the client directives
-server.js        worker runtime + JSX factory (source)
-server.d.ts      typings for Edge, Context, JSX
-sample.tsx       full demo (routing, languages, theme toggle)
-build.mjs        esbuild + terser bundler → dist/
-package.json     dev deps: esbuild, terser
-tsconfig.json    JSX: react / jsxFactory: jsx / jsxFragmentFactory: Fragment
-LICENSE          MIT
-
-dist/            build output
-  client.js      minified + banner
-  server.js      minified + banner
-  client.d.ts
-  server.d.ts
-  LICENSE
+
+**Contract:**
+
+- Call `useCtx()` at the top of a component, before any `await`.
+- After an `await`, use the captured local reference.
+- Throws if called outside an active render (module top-level, `scheduled` handler, `waitUntil` callback).
+
+### Route Options
+
+```ts
+app.get('/cached',  { cache: { ttl: 60 } }, handler);
+app.get('/api',     { cors: true }, handler);
+app.get('/gzip',    { compress: true }, handler);
+app.get('/logged',  { log: true }, handler);
+app.post('/submit', { validate: (ctx) => /* ... */ true }, handler);
 ```
 
----
+| Option | Behavior |
+| --- | --- |
+| `cache` | `{ ttl, staleWhileRevalidate }` — TTL in seconds, default `3600`. Only applied to `GET` responses with status `200`. `Set-Cookie` is stripped from cached responses. |
+| `cors` | Default is `origin: '*'`. For production, use a strict allowlist (see below). |
+| `compress` | Negotiates `gzip` or `deflate` from `Accept-Encoding` using the native `CompressionStream`. |
+| `log` | Logs `METHOD URL - STATUS` to the console. |
+| `validate` | Receives the `Context`; return `true` to allow, or `false` / a falsy value to reject with `400 Validation failed`. Async validators are awaited. Thrown errors are logged and treated as a rejection. |
 
-## 4. Client Usage
+Strict CORS allowlist:
 
-```html
-<meta name="_csrf" content="...">
+```ts
+app.defaults.cors.origin = ['https://app.example.com'];
+```
 
-<div id="page">loading</div>
+## JSX Support
 
-<!-- GET, replace inner HTML of #page, fire on click -->
-<div _get="/data" _in="#page" _trigger="click">Load</div>
+`ctx.html()` accepts JSX directly — it detects JSX nodes and arrays and renders them automatically. Raw strings are passed through untouched, so you can still serve pre-rendered HTML.
 
-<!-- GET on page load, send X-DeviceId -->
-<div _get="/stats" _in="#stats" _trigger="load" _id="1"></div>
+```tsx
+function Card({ title }) {
+  return <div class="card"><h2>{title}</h2></div>;
+}
 
-<!-- GET only when scrolled into view -->
-<div _get="/more" _in="#list" _trigger="visible"></div>
+// Pass JSX straight to ctx.html — no manual renderToString needed.
+app.get('/card',    (ctx) => ctx.html(<Card title="Hello" />));
+app.get('/heading', (ctx) => ctx.html(<h1>hello</h1>));
+app.get('/list',    (ctx) => ctx.html([<Card title="A" />, <Card title="B" />]));
 
-<form id="myForm" onSubmit="return false;">
-  <input type="text" id="emailInput" name="email" />
-  <input type="password" id="passwordInput" name="password" />
-</form>
+// Raw strings still work as before.
+app.get('/raw',     (ctx) => ctx.html('<p>pre-rendered</p>'));
+```
 
-<!-- POST multipart/form-data from #myForm -->
-<div _post="/by-form" _in="#page" _trigger="click" _form="#myForm">
-  Submit (FORM)
-</div>
+Returning a JSX element directly from a handler is also supported — it is treated as an HTML response:
 
-<!-- POST application/json from selected inputs -->
-<div _post="/by-json" _in="#page" _trigger="click"
-     _json="#emailInput,#passwordInput">
-  Submit (JSON)
-</div>
+```tsx
+app.get('/', () => <LandingPage />);
+```
 
-<!-- Navigate / new tab -->
-<div _go="/home" _trigger="click">Go home</div>
-<div _open="https://example.com" _trigger="click">Open example</div>
+`renderToString` is still exported for advanced use cases (for example, embedding rendered HTML inside another response body or email template):
 
-<!-- Placement variants -->
-<div _get="/x" _in="#target">  innerHTML  </div>
-<div _get="/x" _out="#target"> outerHTML  </div>
-<div _get="/x" _before="#target"> before </div>
-<div _get="/x" _after="#target">  after  </div>
+```tsx
+import { renderToString } from '@lengkapp/edge';
 
-<script src="/client.js"></script>
+const html = await renderToString(<Card title="Hello" />);
 ```
 
-Every element with a directive is auto-initialized, including elements added later to the DOM.
+### `renderToString` hardening
+
+- Tag names must match `^[A-Za-z][A-Za-z0-9-]*$`.
+- Attribute names must match `^[A-Za-z_:][A-Za-z0-9_:.-]*$`.
+- `on*` attributes never serialize.
+- `href` / `src` / `action` / `formaction` / `xlink:href` values beginning with `javascript:`, `vbscript:`, or `data:text/html` are stripped.
+- Prototype keys (`__proto__`, `constructor`, `prototype`) are rejected.
+- All string values are HTML-escaped.
+
+### Rendering details
+
+- **Style objects.** `style={{ backgroundColor: 'tomato', padding: 12 }}` is emitted as `style="background-color:tomato;padding:12px"`. Numeric values are suffixed with `px` unless the property is unitless (`opacity`, `lineHeight`, `zIndex`, `flex`, …).
+- **Aliases.** `className` → `class`, `htmlFor` → `for`.
+- **Boolean attributes.** `checked`, `disabled`, `required`, `readonly`, `multiple`, etc. emit as bare attributes when `true` and are dropped when `false`.
+- **`dangerouslySetInnerHTML`.** Supported via `dangerouslySetInnerHTML={{ __html: '…' }}` — the value is inserted verbatim and is **not** escaped. Only use it with trusted content.
 
----
+## Full Example
 
-## 5. Server Usage
+A single file that exercises every server feature.
 
 ```tsx
-import { Edge, jsx, Fragment } from "./dist/server.js";
+// sample.tsx
+//
+// Demonstrates every feature of @lengkapp/edge:
+//   - static & dynamic routes, all HTTP methods
+//   - params, query, cookies (get/set/delete)
+//   - ctx.text / ctx.json / ctx.html / ctx.page / ctx.redirect
+//   - JSX rendering (elements, Fragments, function components, arrays)
+//   - style objects, boolean attributes, void elements,
+//     className/htmlFor aliases, dangerouslySetInnerHTML
+//   - route options: cors, cache, compress, log, validate
+//   - security.extraHeaders, security.logSecurityEvents
+//   - scheduled handler
+//   - returning JSX directly from a handler
+//   - useCtx() inside an async component
+
+import {
+  Edge,
+  Context,
+  Fragment,
+  renderToString,
+  useCtx,
+  type JSXNode,
+  type RouteOptions,
+} from '@lengkapp/edge';
+
+/* ------------------------------------------------------------------ *
+ *  Small helper components (JSX function components)                 *
+ * ------------------------------------------------------------------ */
+
+function Layout(props: { title: string; children?: any }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="_csrf" content="token-here" />
+        <title>{props.title}</title>
+      </head>
+      <body>
+        <header>
+          <nav>
+            <a href="/">Home</a>{' · '}
+            <a href="/about">About</a>{' · '}
+            <a href="/users/42">User 42</a>{' · '}
+            <a href="/dashboard">Dashboard</a>
+          </nav>
+        </header>
+        <main>{props.children}</main>
+        <footer>© {new Date().getFullYear()}</footer>
+      </body>
+    </html>
+  );
+}
+
+function UserCard(props: { id: string; name: string; admin?: boolean }) {
+  return (
+    <div class="card" data-id={props.id}>
+      <h2>{props.name}</h2>
+      {props.admin && <span class="badge">admin</span>}
+    </div>
+  );
+}
+
+function TodoList(props: { items: string[] }) {
+  return (
+    <ul>
+      {props.items.map((item, i) => (
+        <li key={i}>{item}</li>
+      ))}
+    </ul>
+  );
+}
 
-const app = new Edge();
+// Async component using useCtx() synchronously before any await.
+async function CurrentUser() {
+  const ctx = useCtx();
+  const id = ctx.params.id ?? 'me';
+  // ...fetch with ctx.env or ctx.req...
+  return <UserCard id={id} name={`User ${id}`} />;
+}
 
-app.cors    = ["abc.com", "*.cde.com"];    // ["*"] by default
-app.headers = { "x-powered-by": "edge" };  // extra response headers
+/* ------------------------------------------------------------------ *
+ *  App                                                               *
+ * ------------------------------------------------------------------ */
 
-const config = {
-  valid: false,   // require cookie _csrf == X-CSRF-Token
-  auth:  false,   // require cookie _auth
+const app = new Edge();
+
+// ---- Security: global extra headers + keep security logging on ------
+app.security.logSecurityEvents = true;
+app.security.extraHeaders = {
+  'Strict-Transport-Security': 'max-age=31536000; includeSubDomains',
+  'X-Custom-Powered-By': 'lengkapp-server',
 };
 
-app.get("/", config, (c) => {
-  return c.page(
-    <html>
-      <body><h1>Hello Edge</h1></body>
-    </html>
+/* ================================================================== *
+ *  Basic routes                                                      *
+ * ================================================================== */
+
+app.get('/health', (ctx) => ctx.text('ok'));
+
+app.get('/api/time', (ctx) =>
+  ctx.json({ now: new Date().toISOString() }, 200)
+);
+
+// Returning JSX directly from a handler → automatically becomes
+// a text/html Response.
+app.get('/', () => (
+  <Layout title="Home">
+    <h1>Hello from lengkapp-server</h1>
+    <p>This page was rendered from JSX.</p>
+    <TodoList items={['Write routes', 'Render JSX', 'Ship it']} />
+  </Layout>
+));
+
+// Explicit ctx.html with a JSX tree
+app.get('/about', (ctx) =>
+  ctx.html(
+    <Layout title="About">
+      <h1>About</h1>
+      <p>Fragments, components, arrays — all supported.</p>
+      <Fragment>
+        <UserCard id="1" name="Ada" admin />
+        <UserCard id="2" name="Grace" />
+      </Fragment>
+    </Layout>
+  )
+);
+
+// ctx.page prepends <!DOCTYPE html> if missing
+app.get('/page', (ctx) =>
+  ctx.page(<Layout title="Page"><h1>Full document</h1></Layout>)
+);
+
+// ctx.html also accepts a raw HTML string (passes through unchanged)
+app.get('/raw', (ctx) =>
+  ctx.html('<h1>Raw HTML</h1><p>Not escaped.</p>')
+);
+
+/* ================================================================== *
+ *  Params, query, cookies                                            *
+ * ================================================================== */
+
+// Dynamic route: /users/:id
+app.get('/users/:id', async (ctx) => {
+  const { id } = ctx.params;
+  return ctx.html(
+    <Layout title={`User ${id}`}>
+      <UserCard id={id} name={`User #${id}`} />
+    </Layout>
   );
 });
 
-app.get("/:lang/:page", config, (c) => {
-  return c.html(
-    <h1>{c.req.param("lang")} / {c.req.param("page")}</h1>
-  );
+// Async component + useCtx()
+app.get('/me/:id', (ctx) =>
+  ctx.html(<Layout title="Me"><CurrentUser /></Layout>)
+);
+
+// Multiple params: /posts/:year/:slug
+app.get('/posts/:year/:slug', (ctx) => {
+  const { year, slug } = ctx.params;
+  return ctx.json({ year, slug });
 });
 
-app.post("/api/save", async (c) => {
-  const body = await c.req.json();
-  return c.json({ ok: true, body });
+// Query strings: /search?q=hello&limit=10
+app.get('/search', (ctx) => {
+  const q = ctx.query.get('q') ?? '';
+  const limit = Number(ctx.query.get('limit') ?? '10');
+  return ctx.json({ q, limit });
 });
 
-app.get("/old", (c) => c.redirect("/new", 301));
+// Cookies: read, write, delete
+app.get('/login', (ctx) => {
+  ctx.setCookie('session', 'abc123', {
+    path: '/',
+    httpOnly: true,
+    secure: true,
+    sameSite: 'Lax',
+    maxAge: 3600,
+  });
+  return ctx.redirect('/dashboard');
+});
 
-export default {
-  fetch: (request, env, ctx) => app.fetch(request, env, ctx),
-};
-```
+app.get('/logout', (ctx) => {
+  ctx.deleteCookie('session', { path: '/' });
+  return ctx.redirect('/');
+});
 
-**Response helpers:**
-
-| Helper | Behavior |
-|--------|----------|
-| `c.text(str, status?)` | `text/plain; charset=utf-8` |
-| `c.json(obj \| str, status?)` | `application/json; charset=utf-8` |
-| `c.html(str, status?)` | `text/html; charset=utf-8` |
-| `c.page(str, status?)` | `text/html`, prepends `<!DOCTYPE html>` if needed |
-| `c.redirect(url, 301 \| 302)` | default `302` |
-
-**Request helpers on `c.req`:**
-
-| Helper | Description |
-|--------|-------------|
-| `.param(name)` | path params |
-| `.query(name)` | URL query |
-| `.header(name)` | request header (lowercase) |
-| `.cookie(name)` | parsed cookie value |
-| `.json()` | parse JSON body |
-| `.text()` | parse text body |
-| `.formData()` | parse form body |
-| `.raw` | original `Request` |
-| `.url` | full URL string |
-| `.method` | HTTP verb |
-
-`c.env` is your Worker bindings. `c.ctx` is the Worker `ExecutionContext`.
-
----
-
-## 6. Full Example (sample.tsx)
-
-`sample.tsx` demonstrates:
-
-- Cookie-aware language routing (path → cookie → default)
-- Root `/` redirect to `/:lang/welcome`
-- Full localized page in the selected script
-- Client-driven partials via `_get` + `_in` + `_trigger`
-- `_trigger="load"` (fire on page load)
-- `_trigger="visible"` (`IntersectionObserver`)
-- `_id` → `X-DeviceId` header from `deviceId()` (returns `new Date().toString()`)
-- `_form` and `_json` submissions to two separate endpoints
-- `_go` navigation between language routes
-- `_open` → new tab
-- Placement variants (`_in`, `_out`, `_before`, `_after`)
-- Dark / light theme toggle (persisted, respects `prefers-color-scheme`)
-- Chakra Petch typography via Google Fonts
-- Inline lucide SVG icons (no CDN, no images)
-
-Run it locally:
+app.get('/dashboard', (ctx) => {
+  const session = ctx.getCookie('session');
+  if (!session) return ctx.redirect('/login');
+  return ctx.html(
+    <Layout title="Dashboard">
+      <h1>Dashboard</h1>
+      <p>Session: {session}</p>
+    </Layout>
+  );
+});
 
-```bash
-npm run build
-npx wrangler dev sample.tsx
-```
+/* ================================================================== *
+ *  All HTTP methods                                                  *
+ * ================================================================== */
 
----
+app.post('/api/echo', async (ctx) => {
+  const body = await ctx.req.json().catch(() => null);
+  return ctx.json({ received: body }, 201);
+});
 
-## 7. Theming (Dark / Light)
+app.put('/api/items/:id', async (ctx) => {
+  const body = await ctx.req.json().catch(() => null);
+  return ctx.json({ updated: ctx.params.id, body });
+});
 
-The page reads `data-theme` on `<html>` and drives every color through CSS custom properties. There are two token sets:
+app.patch('/api/items/:id', (ctx) =>
+  ctx.json({ patched: ctx.params.id })
+);
+
+app.delete('/api/items/:id', (ctx) =>
+  ctx.json({ deleted: ctx.params.id }, 200)
+);
+
+app.options('/api/items', (ctx) => ctx.text('', 204));
+app.head('/api/items', (ctx) => ctx.text('', 200));
+
+/* ================================================================== *
+ *  Route options: cors, cache, compress, log, validate               *
+ * ================================================================== */
+
+app.get(
+  '/cors-open',
+  { cors: true, log: true },
+  (ctx) => ctx.json({ cors: 'wildcard' })
+);
+
+app.get(
+  '/cors-restricted',
+  {
+    cors: {
+      origin: ['https://app.example.com', 'https://admin.example.com'],
+      methods: 'GET, POST',
+      headers: 'Content-Type, X-CSRF-Token, X-DeviceId',
+    },
+  },
+  (ctx) => ctx.json({ cors: 'restricted' })
+);
+
+app.get(
+  '/cached',
+  { cache: { ttl: 60, staleWhileRevalidate: 30 }, log: true },
+  (ctx) => ctx.json({ generatedAt: Date.now() })
+);
+
+app.get(
+  '/big',
+  { compress: true },
+  (ctx) => ctx.html(`<pre>${'x'.repeat(5000)}</pre>`)
+);
+
+app.post(
+  '/admin',
+  {
+    validate: (ctx) => {
+      const token = ctx.req.headers.get('X-Admin-Token');
+      return token === 'let-me-in';
+    },
+  },
+  (ctx) => ctx.json({ ok: true })
+);
+
+const everythingOptions: RouteOptions = {
+  cors: { origin: '*' },
+  cache: { ttl: 120, staleWhileRevalidate: 60 },
+  compress: true,
+  log: true,
+  validate: async (ctx) => ctx.req.method === 'GET',
+};
 
-- `:root` → light
-- `:root[data-theme="dark"]` → dark
+app.get('/everything', everythingOptions, (ctx) =>
+  ctx.html(
+    <Layout title="Everything">
+      <h1>All options at once</h1>
+    </Layout>
+  )
+);
+
+/* ================================================================== *
+ *  JSX feature gallery                                               *
+ * ================================================================== */
+
+app.get('/jsx/gallery', (ctx) =>
+  ctx.html(
+    <Layout title="JSX Gallery">
+      <div
+        style={{
+          backgroundColor: 'tomato',
+          padding: 12,
+          opacity: 0.9,
+          lineHeight: 1.4, // unitless, stays as-is
+        }}
+      >
+        Styled box
+      </div>
+
+      <label className="lbl" htmlFor="name">Name</label>
+      <input id="name" type="text" required disabled={false} />
+
+      <input type="checkbox" checked readOnly />
+      <button disabled>Nope</button>
+
+      <img src="/logo.png" alt="logo" />
+      <br />
+      <hr />
+
+      <div dangerouslySetInnerHTML={{ __html: '<b>trusted</b>' }} />
+
+      <>
+        <p>Fragment child A</p>
+        <p>Fragment child B</p>
+      </>
+
+      {[<span key="a">A</span>, <span key="b">B</span>, <span key="c">C</span>]}
+
+      <p>{'<script>alert(1)</script>'}</p>
+
+      <a href="javascript:alert(1)">nope</a>
+      <a href="https://example.com">ok</a>
+
+      <p>Count: {42}</p>
+      <p>{null}{undefined}{false}{true}</p>
+    </Layout>
+  )
+);
+
+/* ================================================================== *
+ *  renderToString() standalone                                       *
+ * ================================================================== */
+
+app.get('/jsx/string', async (ctx) => {
+  const html = await renderToString(
+    <section>
+      <h1>Rendered manually</h1>
+      <p>Via renderToString()</p>
+    </section>
+  );
+  return ctx.html(html);
+});
 
-Initialization runs synchronously in `<head>` before the first paint, so there is no flash of the wrong theme:
+/* ================================================================== *
+ *  Scheduled handler                                                 *
+ * ================================================================== */
 
-```html
-<script>
-  (function () {
-    try {
-      var t = localStorage.getItem("theme");
-      if (t !== "dark" && t !== "light") {
-        t = window.matchMedia &&
-            window.matchMedia("(prefers-color-scheme: dark)").matches
-            ? "dark" : "light";
-      }
-      document.documentElement.setAttribute("data-theme", t);
-    } catch (e) {
-      document.documentElement.setAttribute("data-theme", "light");
-    }
-  })();
-</script>
+app.scheduled(async (event, env, ctx) => {
+  console.log('cron fired at', new Date(event.scheduledTime).toISOString());
+});
+
+/* ================================================================== *
+ *  Cloudflare Workers entry points                                   *
+ * ================================================================== */
+
+export default {
+  fetch: (req: Request, env: any, ctx: ExecutionContext) =>
+    app.fetch(req, env, ctx),
+  scheduled: (event: ScheduledEvent, env: any, ctx: ExecutionContext) =>
+    app.scheduledHandler?.(event, env, ctx),
+};
 ```
 
-The toggle button contains **both** the moon and the sun SVG. CSS shows only one:
+### Feature → route cheat-sheet
+
+| Feature | Route / location |
+| --- | --- |
+| `ctx.text` | `GET /health` |
+| `ctx.json` | `GET /api/time`, `POST /api/echo`, … |
+| `ctx.html` with JSX | `GET /` |
+| `ctx.page` | `GET /page` |
+| `ctx.html` with string | `GET /raw` |
+| Returning JSX directly | `GET /` |
+| `ctx.redirect` | `GET /login`, `GET /logout`, `GET /dashboard` |
+| `ctx.params` | `GET /users/:id`, `GET /posts/:year/:slug` |
+| `ctx.query` | `GET /search` |
+| `ctx.getCookie` / `setCookie` / `deleteCookie` | `/login`, `/logout`, `/dashboard` |
+| All HTTP verbs | `/api/echo` (POST), `/api/items/:id` (PUT/PATCH/DELETE), `/api/items` (OPTIONS/HEAD) |
+| `cors` | `/cors-open`, `/cors-restricted`, `/everything` |
+| `cache` | `/cached`, `/everything` |
+| `compress` | `/big`, `/everything` |
+| `log` | `/cors-open`, `/cached`, `/everything` |
+| `validate` | `POST /admin`, `/everything` |
+| `security.extraHeaders` | set once near the top |
+| `security.logSecurityEvents` | set once near the top |
+| `useCtx()` | `CurrentUser` component, `GET /me/:id` |
+| Fragments | `GET /about`, `GET /jsx/gallery` |
+| Function components | `Layout`, `UserCard`, `TodoList`, `CurrentUser` |
+| Style objects | `GET /jsx/gallery` |
+| Boolean attrs / void elements | `GET /jsx/gallery` |
+| `dangerouslySetInnerHTML` | `GET /jsx/gallery` |
+| `renderToString()` standalone | `GET /jsx/string` |
+| `scheduled()` | bottom of file |
+
+## Client (Declarative Partial Updates)
 
-```css
-:root[data-theme="light"] .icon-btn .icon-moon { display: inline-flex }
-:root[data-theme="dark"]  .icon-btn .icon-sun  { display: inline-flex }
+```html
+<script src="https://cdn.example.com/edge-client.min.js"></script>
 ```
 
-The click handler flips `data-theme`, writes to `localStorage`, and updates `aria-label`. When no preference is stored, the page follows the OS scheme.
+### Attributes
 
-All edge-client loader/error UI uses `currentColor`, so it inherits the active theme automatically.
+| Attribute | Description |
+| --- | --- |
+| `_get` / `_post` | Request URL and HTTP method. Only `GET` and `POST` are supported. |
+| `_go` | Navigate the current tab to the URL (`location.href = url`). |
+| `_open` | Open the URL in a new tab (`window.open(url, '_blank', 'noopener')`). |
+| `_id` | Opt in to sending the `X-DeviceId` header on this request. See [Device Identity](#device-identity). Only meaningful on `_get` / `_post`. |
+| `_in` | Replace the target's children with the response. |
+| `_out` | Replace the target element itself with the response. |
+| `_before` | Insert the response before the target. |
+| `_after` | Insert the response after the target. |
+| `_trigger` | `click` (default), `load`, or `visible`. |
+| `_form` | CSS selector for a `<form>`; its `FormData` becomes the POST body. |
+| `_json` | Comma-separated CSS selectors; their values are collected into a JSON POST body. |
+| `_toast` | CSS selector — on a non-2xx response, inject the response body there instead of showing the inline error UI. |
 
----
+**Targets.** Exactly one placement attribute (`_in`, `_out`, `_before`, `_after`) should be present, and its value is a CSS selector. If multiple are present, the client resolves them in the order `_in`, `_out`, `_before`, `_after`.
 
-## 8. Icons (Inline Lucide SVG)
+**`_json` field scope.** Each entry is a CSS selector resolved with `document.querySelector`. The JSON key is the element's `name`, then its `id`, then the selector string. Checkbox → boolean, checked radio → value, `<select multiple>` → array of values, otherwise the element's value.
 
-Every icon is an inline `<svg>` — no CDN, no `<img>`, no external requests.
+### Examples
 
-| Icon | Purpose |
-|------|---------|
-| `IconMoon` | theme (dark side) |
-| `IconSun` | theme (light side) |
-| `IconLanguages` | brand mark |
-| `IconRefresh` | refresh stats |
-| `IconZap` | device ping |
-| `IconExternal` | external link |
-| `IconHome` | go home |
-| `IconGlobe` | card header |
+```html
+<!-- replace the children of #posts with the response -->
+<button _get="/more-posts" _in="#posts">Load More</button>
 
-All icons use `stroke="currentColor"` and inherit their color from the surrounding element, so they follow the theme automatically.
+<!-- replace this element with the response -->
+<div _get="/user-profile" _out="#profile"></div>
 
----
+<!-- POST JSON built from #username and #password, replace #status -->
+<button _post="/login" _json="#username,#password" _in="#status">Login</button>
 
-## 9. Build
+<!-- POST a whole form -->
+<form id="signup">…</form>
+<button _post="/signup" _form="#signup" _in="#result">Sign up</button>
 
-```bash
-npm run build
-```
+<!-- fetch lazily when the element scrolls into view -->
+<div _get="/lazy" _in="#feed" _trigger="visible"></div>
 
-`build.mjs`:
+<!-- same-tab navigation -->
+<a href="/dashboard" _go>Dashboard</a>
 
-- **esbuild** — bundles and minifies `client.js` and `server.js` (target `es2022`, format `esm`). License banner injected via esbuild's `banner.js` option.
-- **terser** — second pass, toplevel mangle + 2 compress passes.
-- Copies `client.d.ts`, `server.d.ts`, `LICENSE` into `dist/`.
-- Gracefully falls back to an inline MIT stub if `LICENSE` is missing.
+<!-- new-tab navigation -->
+<a href="/docs" _open>Docs</a>
 
-**Output:**
+<!-- attach the X-DeviceId header to this POST -->
+<button _post="/like" _id _in="#card-3">Like</button>
 
+<!-- on error, drop the response body into a toast host -->
+<button _post="/submit" _form="#f" _toast="#toasts">Submit</button>
 ```
-dist/client.js    minified + /*! MIT */ banner
-dist/server.js    minified + /*! MIT */ banner
-dist/client.d.ts
-dist/server.d.ts
-dist/LICENSE
+
+### Triggers
+
+- **`click`** (default) — the handler calls `event.preventDefault()` and issues the request.
+- **`load`** — the request fires as soon as the element is initialized.
+- **`visible`** — an `IntersectionObserver` fires the request the first time the element enters the viewport, then disconnects.
+
+### How Content Is Inserted
+
+1. The request is sent with the browser defaults for credentials (same-origin).
+2. The `X-CSRF-Token` header is populated from `<meta name="_csrf">` (see [CSRF Protection](#csrf-protection)).
+3. When the triggering element carries `_id`, the `X-DeviceId` header is added (see [Device Identity](#device-identity)).
+4. For `_post`, the body is `FormData` from `_form`, JSON from `_json`, or empty. `_post` requires one of them; otherwise the request fails with a client-side error.
+5. The response text is parsed into a `<template>`.
+6. Any `<script>` elements inside the fragment are replaced by inert comment markers that hold their DOM position.
+7. The script-free fragment is inserted according to the placement mode (`_in`, `_out`, `_before`, `_after`).
+8. Each script is then re-created as a fresh `<script>` element at its marker and injected sequentially:
+   - Inline scripts execute synchronously.
+   - `async` external scripts are fire-and-forget.
+   - Non-async external scripts (classic and `type="module"`) are awaited via their `load` / `error` events, with a 30-second safety timeout so a stuck URL cannot wedge the queue.
+9. Newly inserted `[_get]` / `[_post]` / `[_go]` / `[_open]` elements are picked up by a `MutationObserver` on `document.documentElement`.
+
+> **Note:** No content-type check, HTML sanitization, or CSRF token is applied by the client — it trusts the server's response and inserts it as-is. Treat the partial-HTML endpoints you point `_get` / `_post` at as part of your trusted surface.
+
+### Loader & Error States
+
+- A spinner (Lucide `loader-circle` SVG) is inserted as soon as the request starts:
+  - `_in` — the target's existing children are cleared and the spinner is placed inside.
+  - `_out` / `_before` — the spinner is inserted immediately before the target.
+  - `_after` — the spinner is inserted immediately after the target.
+- The spinner is removed when the response (or error) lands.
+- A new request on the same element aborts the previous one via `AbortController`.
+- On failure — non-2xx, network error, or client-side validation error (e.g. `_post` without `_form` / `_json`) — the spinner is replaced in place by an error box containing a message and a **Retry** button that re-issues the request.
+- On a non-2xx response, if the triggering element has a `_toast` attribute whose selector resolves, the response body is injected there (using `_in` semantics, script-aware) and no inline error box is shown.
+- The stylesheet is injected once and defines `._edge-loader`, `._edge-error`, and a `_edge-spin` keyframe.
+
+## Device Identity
+
+Add `_id` to any `_get` / `_post` element to attach an `X-DeviceId` header to that request.
+
+The value is resolved by `deviceId()`, which:
+
+1. Calls `window.deviceId()` if it is defined and returns a non-null value, coercing the result to a string.
+2. Otherwise returns `new Date().toString()`.
+
+`window.deviceId` is designed as a hook so the host application can plug in its own fingerprint implementation (e.g. a client-side identifier, a cookie, or a third-party library). By default, the timestamp fallback is intentionally weak.
+
+```ts
+// Optional: install your own stable identifier.
+declare global {
+  interface Window {
+    deviceId?: () => string;
+  }
+}
+
+window.deviceId = () => {
+  let id = localStorage.getItem('device-id');
+  if (!id) {
+    id = crypto.randomUUID();
+    localStorage.setItem('device-id', id);
+  }
+  return id;
+};
 ```
 
----
+**Delivery.** The header is added only to `_get` / `_post` requests. It is not added to `_go` / `_open` navigation. Without `_id`, no device identifier is computed and no `X-DeviceId` header is sent.
 
-## 10. Deploy (Wrangler)
+## CSRF Protection
 
-`wrangler.toml`:
+The client automatically attaches the value of `<meta name="_csrf">` (if present) to every `_get` / `_post` request as the `X-CSRF-Token` header.
 
-```toml
-name = "edge-translations"
-main = "sample.tsx"
-compatibility_date = "2026-01-01"
-
-[[rules]]
-type = "Text"
-globs = ["dist/client.js"]
+```html
+<meta name="_csrf" content="…">
 ```
 
-In `sample.tsx`, import the built `client.js` as text and expose it via `env`:
-
-```tsx
-// @ts-ignore
-import clientJs from "./dist/client.js";
+On the server, validate that header inside a `validate` option:
 
-export default {
-  fetch: (request, env, ctx) => {
-    env.CLIENT_JS ??= clientJs;
-    return app.fetch(request, env, ctx);
-  },
-};
+```ts
+app.post('/submit', {
+  validate: (ctx) => {
+    const header = ctx.req.headers.get('X-CSRF-Token') || '';
+    const cookie = ctx.getCookie('csrf_token') || '';
+    return header.length > 0 && header === cookie;
+  }
+}, handler);
 ```
 
-Alternatively, serve `dist/client.js` as a static asset and drop the `/client.js` route from the app.
+When the meta tag is absent, the header is sent with an empty value.
 
-**Commands:**
+## Security Controls
 
-```bash
-npx wrangler dev sample.tsx              # local dev
-npx wrangler deploy sample.tsx --minify  # production
-```
+```ts
+const app = new Edge();
 
----
+app.defaults.cors.origin = ['https://app.example.com'];
 
-## 11. Security
+app.security.logSecurityEvents = true; // structured JSON events (default on)
+app.security.extraHeaders = {
+  'Strict-Transport-Security': 'max-age=63072000; includeSubDomains; preload',
+  'Cross-Origin-Opener-Policy': 'same-origin',
+  'Cross-Origin-Resource-Policy': 'same-origin',
+};
+```
 
-**CSRF**
-The client always sends `X-CSRF-Token` read from `<meta name="_csrf" content="...">`. Enable per-route verification with `{ valid: true }`. The server then requires cookie `_csrf == X-CSRF-Token`.
+### OWASP 2025 Coverage
+
+| Category | Mitigation |
+| --- | --- |
+| A01 Broken Access Control | Strict CORS allowlist, explicit placement modes, no implicit trust |
+| A02 Security Misconfiguration | Safe default headers, strict CORS allowlist, `Vary: Origin` |
+| A03 Supply Chain | Zero runtime dependencies |
+| A04 Crypto Failures | No home-grown crypto in the runtime; relies on platform primitives (`Headers`, `CompressionStream`, Web Crypto where the host uses it) |
+| A05 Injection / XSS | Prototype-safe objects, JSX attribute sanitization |
+| A06 Insecure Design | Fail-closed validation, explicit response modes |
+| A07 Auth Failures | Validation errors are surfaced, not swallowed |
+| A08 Data Integrity | Prototype-safe JSON, `Set-Cookie` stripped from cache |
+| A09 Logging | Structured JSON security events with 60s dedupe |
+| A10 Exceptional Conditions | Fail-closed middleware, no internal leakage |
+
+## Scheduled Tasks
+
+```ts
+app.scheduled(async (event, env, ctx) => {
+  console.log('Cron executed:', event.cron);
+});
 
-**Auth**
-Enable per-route verification with `{ auth: true }`. The server requires a cookie named `_auth`.
+export default {
+  fetch: (req, env, ctx) => app.fetch(req, env, ctx),
+  scheduled: (event, env, ctx) => app.scheduledHandler?.(event, env, ctx),
+};
+```
 
-**Device identity**
-Elements with `_id="1"` add an `X-DeviceId` header. The default `deviceId()` implementation returns `new Date().toString()`; override it globally:
+## Configuration
 
-```js
-window.deviceId = () => myStableFingerprint();
-```
+The `Edge` constructor takes no arguments. Behaviour is configured through public properties and route options:
 
-**CORS**
+| Property | Type | Default |
+| --- | --- | --- |
+| `app.defaults.cors` | `{ origin, methods }` | `origin: '*'`, `methods: 'GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD'` |
+| `app.security.logSecurityEvents` | `boolean` | `true` |
+| `app.security.extraHeaders` | `Record<string, string> \| null` | `null` |
+| `app.security.trustedProxies` | `string[] \| null` | `null` |
 
-```js
-app.cors = ["abc.com", "*.cde.com"];  // exact + wildcard subdomains
-app.cors = ["*"];                     // allow all (default)
+```ts
+app.defaults.cors = { origin: ['https://app.example.com'], methods: 'GET, POST' };
+app.security.extraHeaders = {
+  'Strict-Transport-Security': 'max-age=63072000; includeSubDomains',
+};
 ```
 
-CORS is emitted automatically, including `OPTIONS` preflight.
+## Performance
 
-**Cookies**
-Language cookie: `lang=xx; Max-Age=31536000; Path=/; SameSite=Lax`. `HttpOnly` is deliberately **not** set so client JS can read it if needed. Add `Secure` in production by prepending `__Host-` or via response header transformation if required.
+Zero runtime dependencies. On a local `wrangler dev` benchmark with `autocannon` (10 connections, 10s per route), throughput sits in the same tier as Hono, Hono (tiny), and a native worker:
 
-**Headers**
-Every response from `Edge` goes through `withHeaders()`, which merges `app.headers` and per-route CORS headers safely.
+| Framework | `/text` req/s | `/json` req/s |
+| --- | --- | --- |
+| **@lengkapp/edge** | 503 | 500 |
+| Hono | 506 | 495 |
+| Hono (tiny) | 505 | 498 |
+| Native Workers | 498 | 500 |
 
-**No dependencies**
-Nothing is pulled from npm at runtime. Only build-time tooling (esbuild, terser) is dev-only.
+The security hardening adds only cheap operations to the request path: prototype-safe objects, two regex checks per JSX attribute, and a throttled logger. No new async boundaries, no added dependencies, no hashing on the hot path.
 
----
+The JSX renderer is tuned for throughput: single-pass escaping (`charCodeAt` scan with a fast no-op path), direct string concatenation instead of intermediate arrays, cached camelCase → kebab-case conversions for style objects, and a `Set`-based URL-attribute lookup on the hot path. `ctx.html(<Card />)` skips the redundant string-identity check that a manual `renderToString(<Card />)` call would still hit.
 
-## 12. License
+The client is equally lean: it injects a single stylesheet and binds each element exactly once via an `el.__edgeInit` guard. An in-flight request on an element is aborted when a new one starts.
 
-LengkApp Edge License
+## Build
 
-Copyright (c) LengkApp — Yasir Haris
-Contact: yh@lengk.app / yasir.haris@gmail.com
+`build.mjs` bundles `client.js` and `server.js` with esbuild (`bundle: false`, `format: "esm"`, `target: "es2022"`, `minify: true`), then runs Terser with `module: true`, `compress.passes: 2`, and `mangle.toplevel: true` for a second pass. A `/*! … */` banner containing the LICENSE text is prepended to each file, and `client.d.ts`, `server.d.ts`, `README.md`, and `LICENSE` are copied into `dist/`.
 
-Permission is granted to any person obtaining a copy of this software
-and associated documentation files (the "Software") to use, copy, and
-distribute the Software free of charge, for any purpose, including
-commercial use, subject to the following conditions:
+## Security Posture Summary
 
-1. The Software may not be modified, adapted, or altered in any way
-   without prior written permission from the copyright holder.
+| Layer | Mechanism |
+| --- | --- |
+| HTML insertion (client) | Response text parsed into a `<template>`; placement driven by `_in` / `_out` / `_before` / `_after` |
+| Script execution (client) | `<script>` elements lifted out, replaced by comment markers, then re-created at their original position and run in document order |
+| Request hygiene (client) | `X-CSRF-Token` from `<meta name="_csrf">`; optional `X-DeviceId` (only when `_id` is present); abortable via `AbortController`; per-element in-flight cancellation |
+| Cookies | Browser defaults (same-origin); names validated on the server |
+| Server response headers | `nosniff`, `X-Frame-Options: DENY`, `Referrer-Policy`, `Permissions-Policy` |
+| Server middleware | Fail-closed validation; structured security logs; strict CORS allowlist |
+| Prototype pollution | `Object.create(null)` + forbidden-key filtering in params, cookies, JSX attributes |
+| Build | LICENSE banner; esbuild + Terser double-pass minification; per-file `client.d.ts` / `server.d.ts` / `README.md` / `LICENSE` copied to `dist/` |
 
-2. Redistribution of the Software, in whole or in part, must retain
-   this LICENSE file unmodified and include the copyright notice above.
+## License
 
-3. This permission notice does not grant any right to use the
-   LengkApp name, brand, or trademarks without separate written
-   permission.
+MIT — see [LICENSE](./LICENSE) for the full text.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHOR OR COPYRIGHT HOLDER BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+© LengkApp — Yasir Haris