@myxo-victor/chexjs 6.0.0

package/ChexJs/Chex.php

@@ -0,0 +1,354 @@
+<?php
+declare(strict_types=1);
+
+/**
+ * Chex 6.0.0 Secure Database Engine
+ *
+ * Configure your database credentials in CONFIG below.
+ * This endpoint is used by Chex.db.connect(...).
+ */
+
+header('Content-Type: application/json; charset=utf-8');
+
+// ----------------------------
+// CONFIG: EDIT THESE VALUES
+// ----------------------------
+$CONFIG = [
+    // Add your database host, database name, username, and password here.
+    'db_host' => '127.0.0.1',
+    'db_port' => 3306,
+    'db_name' => 'test', #Change this to your own database name
+    'db_user' => 'root', #This too
+    'db_pass' => '', #This too
+    'db_charset' => 'utf8mb4',
+
+    // Create a long random secret key and use same key in Chex.db.connect({ apiKey: '...' }).
+    // Leave empty to disable API key enforcement (NOT recommended for production).
+    'api_key' => 'CHANGE_THIS_TO_A_LONG_RANDOM_SECRET',
+
+    // Allowed frontend origins. Keep minimal in production.
+    'allowed_origins' => [
+        'http://localhost', #This too, this one is for localhost
+        'http://127.0.0.1' #and this
+    ],
+
+    // Whitelist allowed tables to prevent access to unexpected DB tables.
+    'allowed_tables' => [
+        'users' #Add your database tables here
+    ],
+
+    // Set true in development to include exception details.
+    'debug' => true,
+];
+
+function respond(int $status, array $payload): void {
+    http_response_code($status);
+    echo json_encode($payload, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
+    exit;
+}
+
+function sanitize_identifier(string $value): string {
+    if (!preg_match('/^[A-Za-z_][A-Za-z0-9_]*$/', $value)) {
+        throw new InvalidArgumentException('Invalid identifier.');
+    }
+    return $value;
+}
+
+function sanitize_identifier_list($value): array {
+    if (!is_array($value) || count($value) === 0) {
+        throw new InvalidArgumentException('Invalid column list.');
+    }
+    $out = [];
+    foreach ($value as $column) {
+        if (!is_string($column)) {
+            throw new InvalidArgumentException('Invalid column in list.');
+        }
+        $out[] = sanitize_identifier($column);
+    }
+    return array_values(array_unique($out));
+}
+
+function ensure_allowed_table(string $table, array $allowedTables): string {
+    $safeTable = sanitize_identifier($table);
+    if (!in_array($safeTable, $allowedTables, true)) {
+        throw new InvalidArgumentException('Table is not allowed.');
+    }
+    return $safeTable;
+}
+
+function require_json_payload(): array {
+    $raw = file_get_contents('php://input');
+    $data = json_decode((string)$raw, true);
+    if (!is_array($data)) {
+        throw new InvalidArgumentException('Invalid JSON payload.');
+    }
+    return $data;
+}
+
+function build_where_clause(array $where, array &$params): string {
+    if (count($where) === 0) return '';
+    $parts = [];
+    $i = 0;
+    foreach ($where as $column => $value) {
+        if (!is_string($column)) {
+            throw new InvalidArgumentException('Invalid where column.');
+        }
+        $safeColumn = sanitize_identifier($column);
+        $param = ':w' . $i++;
+        $parts[] = "`{$safeColumn}` = {$param}";
+        $params[$param] = $value;
+    }
+    return ' WHERE ' . implode(' AND ', $parts);
+}
+
+try {
+    if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+        http_response_code(204);
+        exit;
+    }
+
+    if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+        respond(405, ['ok' => false, 'error' => 'Method not allowed. Use POST.']);
+    }
+
+    $origin = $_SERVER['HTTP_ORIGIN'] ?? '';
+    if ($origin !== '' && in_array($origin, $CONFIG['allowed_origins'], true)) {
+        header('Access-Control-Allow-Origin: ' . $origin);
+        header('Vary: Origin');
+        header('Access-Control-Allow-Methods: POST, OPTIONS');
+        header('Access-Control-Allow-Headers: Content-Type, X-Chex-Key');
+    } elseif ($origin !== '') {
+        respond(403, ['ok' => false, 'error' => 'Origin not allowed.']);
+    }
+
+    $apiKey = trim((string)$CONFIG['api_key']);
+    if ($apiKey !== '') {
+        $requestKey = (string)($_SERVER['HTTP_X_CHEX_KEY'] ?? '');
+        if ($requestKey === '' || !hash_equals($apiKey, $requestKey)) {
+            respond(401, ['ok' => false, 'error' => 'Unauthorized request key.']);
+        }
+    }
+
+    $payload = require_json_payload();
+    $op = isset($payload['op']) ? (string)$payload['op'] : '';
+    $table = isset($payload['table']) ? (string)$payload['table'] : '';
+    $safeTable = ensure_allowed_table($table, $CONFIG['allowed_tables']);
+
+    $dsn = sprintf(
+        'mysql:host=%s;port=%d;dbname=%s;charset=%s',
+        $CONFIG['db_host'],
+        (int)$CONFIG['db_port'],
+        $CONFIG['db_name'],
+        $CONFIG['db_charset']
+    );
+    $pdo = new PDO($dsn, $CONFIG['db_user'], $CONFIG['db_pass'], [
+        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
+        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+        PDO::ATTR_EMULATE_PREPARES => false,
+    ]);
+
+    switch ($op) {
+        case 'read': {
+            $select = isset($payload['select']) ? sanitize_identifier_list($payload['select']) : ['*'];
+            $selectSql = $select === ['*'] ? '*' : implode(', ', array_map(fn($c) => "`{$c}`", $select));
+
+            $params = [];
+            $where = is_array($payload['where'] ?? null) ? $payload['where'] : [];
+            $whereSql = build_where_clause($where, $params);
+
+            $orderBySql = '';
+            if (isset($payload['orderBy']) && is_string($payload['orderBy']) && $payload['orderBy'] !== '') {
+                $direction = 'ASC';
+                $orderBy = trim($payload['orderBy']);
+                if (strpos($orderBy, '-') === 0) {
+                    $direction = 'DESC';
+                    $orderBy = substr($orderBy, 1);
+                }
+                $safeOrder = sanitize_identifier($orderBy);
+                $orderBySql = " ORDER BY `{$safeOrder}` {$direction}";
+            }
+
+            $limitSql = '';
+            if (isset($payload['limit'])) {
+                $limit = (int)$payload['limit'];
+                if ($limit < 1 || $limit > 500) {
+                    throw new InvalidArgumentException('limit must be between 1 and 500.');
+                }
+                $limitSql = " LIMIT {$limit}";
+            }
+
+            $offsetSql = '';
+            if (isset($payload['offset'])) {
+                $offset = (int)$payload['offset'];
+                if ($offset < 0) {
+                    throw new InvalidArgumentException('offset must be >= 0.');
+                }
+                $offsetSql = " OFFSET {$offset}";
+            }
+
+            $sql = "SELECT {$selectSql} FROM `{$safeTable}`{$whereSql}{$orderBySql}{$limitSql}{$offsetSql}";
+            $stmt = $pdo->prepare($sql);
+            $stmt->execute($params);
+            $rows = $stmt->fetchAll();
+            respond(200, ['ok' => true, 'data' => $rows, 'count' => count($rows)]);
+        }
+
+        case 'create': {
+            $data = $payload['data'] ?? null;
+            if (!is_array($data) || count($data) === 0) {
+                throw new InvalidArgumentException('create requires non-empty data object.');
+            }
+
+            $columns = [];
+            $placeholders = [];
+            $params = [];
+            $i = 0;
+            foreach ($data as $column => $value) {
+                if (!is_string($column)) {
+                    throw new InvalidArgumentException('Invalid create column.');
+                }
+                $safeColumn = sanitize_identifier($column);
+                $param = ':c' . $i++;
+                $columns[] = "`{$safeColumn}`";
+                $placeholders[] = $param;
+                $params[$param] = $value;
+            }
+
+            $sql = "INSERT INTO `{$safeTable}` (" . implode(', ', $columns) . ") VALUES (" . implode(', ', $placeholders) . ")";
+            $stmt = $pdo->prepare($sql);
+            $stmt->execute($params);
+            respond(201, ['ok' => true, 'data' => ['id' => $pdo->lastInsertId()]]);
+        }
+
+		case 'register': {
+            $data = $payload['data'] ?? null;
+            if (!is_array($data) || count($data) === 0) {
+                throw new InvalidArgumentException('register requires non-empty data object.');
+            }
+
+            // Hash the password before storing it
+			if (isset($data['password'])) {
+				$data['password_hash'] = password_hash($data['password'], PASSWORD_DEFAULT);
+				unset($data['password']);
+			}
+
+            $columns = [];
+            $placeholders = [];
+            $params = [];
+            $i = 0;
+            foreach ($data as $column => $value) {
+                if (!is_string($column)) {
+                    throw new InvalidArgumentException('Invalid register column.');
+                }
+                $safeColumn = sanitize_identifier($column);
+                $param = ':c' . $i++;
+                $columns[] = "`{$safeColumn}`";
+                $placeholders[] = $param;
+                $params[$param] = $value;
+            }
+            $sql = "INSERT INTO `{$safeTable}` (" . implode(', ', $columns) . ") VALUES (" . implode(', ', $placeholders) . ")";
+            $stmt = $pdo->prepare($sql);
+            $stmt->execute($params);
+            respond(201, ['ok' => true, 'data' => ['id' => $pdo->lastInsertId()]]);
+        }
+        case 'update': {
+            $where = $payload['where'] ?? null;
+            $data = $payload['data'] ?? null;
+            if (!is_array($where) || count($where) === 0) {
+                throw new InvalidArgumentException('update requires a non-empty where object.');
+            }
+            if (!is_array($data) || count($data) === 0) {
+                throw new InvalidArgumentException('update requires a non-empty data object.');
+            }
+
+            $sets = [];
+            $params = [];
+            $i = 0;
+            foreach ($data as $column => $value) {
+                if (!is_string($column)) {
+                    throw new InvalidArgumentException('Invalid update column.');
+                }
+                $safeColumn = sanitize_identifier($column);
+                $param = ':u' . $i++;
+                $sets[] = "`{$safeColumn}` = {$param}";
+                $params[$param] = $value;
+            }
+
+            $whereSql = build_where_clause($where, $params);
+            $sql = "UPDATE `{$safeTable}` SET " . implode(', ', $sets) . $whereSql;
+            $stmt = $pdo->prepare($sql);
+            $stmt->execute($params);
+            respond(200, ['ok' => true, 'data' => ['affectedRows' => $stmt->rowCount()]]);
+        }
+
+        case 'delete': {
+            $where = $payload['where'] ?? null;
+            if (!is_array($where) || count($where) === 0) {
+                throw new InvalidArgumentException('delete requires a non-empty where object.');
+            }
+
+            $params = [];
+            $whereSql = build_where_clause($where, $params);
+            $sql = "DELETE FROM `{$safeTable}`{$whereSql}";
+            $stmt = $pdo->prepare($sql);
+            $stmt->execute($params);
+            respond(200, ['ok' => true, 'data' => ['affectedRows' => $stmt->rowCount()]]);
+        }
+
+        case 'exists': {
+            $where = $payload['where'] ?? null;
+            if (!is_array($where) || count($where) === 0) {
+                throw new InvalidArgumentException('exists requires a non-empty where object.');
+            }
+
+            $params = [];
+            $whereSql = build_where_clause($where, $params);
+            $sql = "SELECT 1 FROM `{$safeTable}`{$whereSql} LIMIT 1";
+            $stmt = $pdo->prepare($sql);
+            $stmt->execute($params);
+            $exists = (bool)$stmt->fetchColumn();
+            respond(200, ['ok' => true, 'data' => ['exists' => $exists]]);
+        }
+
+        case 'login': {
+            $credentials = $payload['credentials'] ?? null;
+            $loginConfig = $payload['login'] ?? null;
+            if (!is_array($credentials) || !is_array($loginConfig)) {
+                throw new InvalidArgumentException('login requires credentials and login config.');
+            }
+
+            $userField = sanitize_identifier((string)($loginConfig['userField'] ?? 'email'));
+            $passField = sanitize_identifier((string)($loginConfig['passField'] ?? 'password_hash'));
+            $userValue = (string)($credentials[$userField] ?? '');
+            $password = (string)($credentials['password'] ?? '');
+
+            if ($userValue === '' || $password === '') {
+                respond(400, ['ok' => false, 'error' => 'Missing login credentials.']);
+            }
+
+            $select = isset($payload['select']) ? sanitize_identifier_list($payload['select']) : ['id', $userField];
+            if (!in_array($passField, $select, true)) {
+                $select[] = $passField;
+            }
+            $selectSql = implode(', ', array_map(fn($c) => "`{$c}`", $select));
+
+            $sql = "SELECT {$selectSql} FROM `{$safeTable}` WHERE `{$userField}` = :u LIMIT 1";
+            $stmt = $pdo->prepare($sql);
+            $stmt->execute([':u' => $userValue]);
+            $row = $stmt->fetch();
+
+            if (!$row || !isset($row[$passField]) || !password_verify($password, (string)$row[$passField])) {
+                respond(401, ['ok' => false, 'error' => 'Invalid credentials.']);
+            }
+
+            unset($row[$passField]);
+            respond(200, ['ok' => true, 'data' => $row]);
+        }
+
+        default:
+            respond(400, ['ok' => false, 'error' => 'Unsupported operation.']);
+    }
+} catch (Throwable $e) {
+    $message = $CONFIG['debug'] ? $e->getMessage() : 'Request failed.';
+    respond(500, ['ok' => false, 'error' => $message]);
+}

package/ChexJs/Chex_notify.php

@@ -0,0 +1,68 @@
+<?php
+/**
+ * @author Myxo victor
+ * Chex v6.0.0 Notification Handler
+ * Receives device subscription data from Chex and stores it for server-side push notifications.
+ */
+
+header("Access-Control-Allow-Origin: *");
+header("Access-Control-Allow-Methods: POST, OPTIONS");
+header("Access-Control-Allow-Headers: Content-Type");
+header("Content-Type: application/json");
+
+if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+    http_response_code(200);
+    exit;
+}
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $input = file_get_contents('php://input');
+    $data = json_decode($input, true);
+
+    if (isset($data['deviceId']) && !empty($data['deviceId'])) {
+        $deviceId  = htmlspecialchars($data['deviceId']);
+        $type      = isset($data['type']) ? htmlspecialchars($data['type']) : 'unknown';
+        $timestamp = date("Y-m-d H:i:s");
+        $ipAddress = $_SERVER['REMOTE_ADDR'];
+        $userAgent = $_SERVER['HTTP_USER_AGENT'];
+
+        $logEntry = "------------------------------------------------" . PHP_EOL;
+        $logEntry .= "Date: $timestamp" . PHP_EOL;
+        $logEntry .= "Device ID: $deviceId" . PHP_EOL;
+        $logEntry .= "Type: $type" . PHP_EOL;
+        $logEntry .= "IP: $ipAddress" . PHP_EOL;
+        $logEntry .= "User Agent: $userAgent" . PHP_EOL;
+
+        $filePath = 'notification_handler.txt';
+
+        if (file_put_contents($filePath, $logEntry, FILE_APPEND | LOCK_EX)) {
+            echo json_encode([
+                "status" => "success",
+                "code" => 200,
+                "message" => "Device successfully registered to the Chex 6.0 ecosystem."
+            ]);
+        } else {
+            http_response_code(500);
+            echo json_encode([
+                "status" => "error",
+                "code" => 500,
+                "message" => "Failed to write to notification_handler.txt. Check folder permissions."
+            ]);
+        }
+    } else {
+        http_response_code(400);
+        echo json_encode([
+            "status" => "error",
+            "code" => 400,
+            "message" => "Invalid payload. 'deviceId' is required."
+        ]);
+    }
+} else {
+    http_response_code(405);
+    echo json_encode([
+        "status" => "error",
+        "code" => 405,
+        "message" => "Method Not Allowed. Use POST via Chex 6.0 notification APIs."
+    ]);
+}
+?>

package/ChexJs/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Aximon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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
+AUTHORS OR COPYRIGHT HOLDERS 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.
+

package/ChexJs/README.md

@@ -0,0 +1,121 @@
+# Chex 6.0.0
+
+Chex is a lightweight JavaScript UI engine for fast, reactive, component-driven interfaces. It runs directly in the browser with no compiler or build step.
+
+## Quick start
+
+Include the engine, then write components with the tag helpers you need:
+
+```html
+<script src="./Chex.js"></script>
+<script src="./components/main.js"></script>
+```
+
+```js
+const { div, h1, button } = Chex;
+const app = document.getElementById('app');
+const count = Chex.signal(0);
+
+const Counter = () => div({ class: 'counter' }, [
+  h1(`Count: ${count.value}`),
+  button({ onClick: () => (count.value += 1) }, 'Increment')
+]);
+
+Chex.render(app, Counter);
+```
+
+## Fast element API
+
+Chex tag helpers accept props when you have them, and accept children directly when you do not:
+
+```js
+const { div, h1, button } = Chex;
+
+// With props
+div({ class: 'hero' }, [
+  h1({}, 'Title'),
+  button({ onClick: save }, 'Save')
+]);
+
+// No empty props object required
+div([
+  h1('Title'),
+  button('Save')
+]);
+```
+
+You can also use `Chex.div(...)`, `Chex.h1(...)`, and any standard HTML tag directly.
+
+## Core features
+
+- Fast VNode rendering and DOM patching with `Chex.render(...)`
+- Concise tag helpers and custom-tag support
+- Signals and effects: `Chex.signal(...)`, `Chex.effect(...)`
+- Hash or history routing with `Chex.createRouter(...)`
+- Fetch and cached query helpers through `Chex.api`
+- Secure PHP database client through `Chex.db`
+- Notifications, service-worker registration, and animation helpers
+- Reusable UI components: Button, Input, AppBar, SideBar, BottomNav, and Card
+
+## Backend database engine
+
+`Chex.php` is the optional secure PHP/PDO endpoint used by `Chex.db.connect(...)`.
+
+```js
+const server = Chex.db.connect({
+  endpoint: '/Chex.php',
+  apiKey: 'YOUR_SECURE_API_KEY',
+  table: 'users'
+});
+
+await server.create({ email: 'demo@example.com' });
+const users = await server.read({ select: ['id', 'email'], limit: 10 });
+```
+
+Open `Chex.php` to set database credentials, allowed origins, allowed tables, and the API key. The client sends the key in the `X-Chex-Key` header.
+
+`Chex_notify.php` receives browser notification registrations. Pair it with `Chex.notification.ask('/Chex_notify.php')` when notifications are enabled.
+
+## Included libraries
+
+All libraries are standalone and dependency-free. Load them after `Chex.js` when needed.
+
+| File | Global | Purpose |
+| --- | --- | --- |
+| `scrollEcho.js` | `ScrollEcho` | Scroll-triggered text and element reveals. |
+| `racket.js` | `racket` | Responsive multi-panel image carousel. |
+| `orbit.js` | `orbit` | Swipe-friendly banner and slider helper. |
+| `rinx.js` | `rinx` | Horizontal and vertical scroll-card layouts. |
+| `smooth.js` | `smooth` | Continuous ticker and infinite carousel. |
+| `modal.js` | `modal` | Self-styling, zero-dependency accessible modal engine. |
+| `skeleton.js` | `skeleton` | DOM-to-skeleton shimmer loader that reduces layout shift. |
+
+Example:
+
+```html
+<script src="./Chex.js"></script>
+<script src="./libs/modal.js"></script>
+<script src="./libs/skeleton.js"></script>
+```
+
+## Project structure
+
+```text
+ChexJs/
+  Chex.js              Core engine
+  Chex.php             Optional PHP/PDO backend
+  Chex_notify.php      Notification registration endpoint
+  components/          Page components and views
+  libs/                Standalone visual and UI helpers
+  index.html           Welcome page launcher
+  index.css            Welcome page styles
+  sw.js                Service worker
+```
+
+## Documentation
+
+Open `docs/index.html` through a local web server for the full API, component, backend, library, and example guides.
+
+## License
+
+MIT License. Copyright (c) 2026 Aximon. Created by Myxo Victor.

package/ChexJs/api/read.txt

@@ -0,0 +1,4 @@
+Chex 6.0 API folder
+
+Put backend API entry files for your application in this folder.
+Examples: PHP, Java, Python, Ruby, Node.js, Rust, Go.

package/ChexJs/app/api/api.txt

@@ -0,0 +1,4 @@
+Chex 6.0 API folder
+
+Put backend API entry files for your application in this folder.
+Examples: PHP, Java, Python, Ruby, Node.js, Rust, Go.

package/ChexJs/app/components/main.js

@@ -0,0 +1,4 @@
+/*
+* Chex 6.0 app/ starter component entry
+* Build your page components here and render to #app.
+*/

package/ChexJs/app/index.css

@@ -0,0 +1,12 @@
+/* Chex 6.0 app/ starter stylesheet */
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background: #f8fafc;
+    color: #0f172a;
+}

package/ChexJs/app/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chex App</title>
+
+    <link rel="stylesheet" href="index.css">
+    <script src="../Chex.js"></script>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
+    <link rel="icon" href="../icon/logo.png" type="image/png">
+    <meta name="theme-color" content="#0f766e">
+
+    <style>
+        h1, h2, h3, h4, h5, h6, p, span, li, a, button {
+            font-family: "IBM Plex Sans", sans-serif;
+        }
+    </style>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="./components/main.js"></script>
+    <script src="./logic/app.js"></script>
+</body>
+</html>

package/ChexJs/app/logic/app.js

@@ -0,0 +1,4 @@
+/*
+* Chex 6.0 app/ starter logic file
+* Add API calls and interaction logic that your components use.
+*/

package/ChexJs/components/demo.js

@@ -0,0 +1,45 @@
+/* VenJS 5.0 — Demo showcase components.
+ * Loaded before components/main.js. Exposes a global DemoPage()
+ * that the router can render at the "/demo" route. */
+
+const demoCount = venjs.signal(0);
+const demoName = venjs.signal("Ada");
+
+const DemoCounter = () => venjs.div({ class: "page" }, [
+  venjs.h2({ class: "page-title" }, "Signals in action"),
+  venjs.p({ class: "page-copy" }, "Count: " + demoCount.value),
+  venjs.div({ class: "nav" }, [
+    venjs.button({ class: "nav-btn", onclick: () => (demoCount.value += 1) }, "+1"),
+    venjs.button({ class: "nav-btn", onclick: () => (demoCount.value -= 1) }, "-1")
+  ])
+]);
+
+const DemoBinding = () => venjs.div({ class: "page" }, [
+  venjs.h2({ class: "page-title" }, "Two-way input"),
+  venjs.input({
+    label: "Your name",
+    value: demoName.value,
+    oninput: (e) => (demoName.value = e.target.value)
+  }),
+  venjs.p({ class: "page-copy" }, "Hello, " + demoName.value + "!")
+]);
+
+const DemoCards = () => venjs.div({ class: "page" }, [
+  venjs.h2({ class: "page-title" }, "Component kit"),
+  venjs.card({}, [
+    venjs.h3({ style: { marginTop: "0" } }, "Built with VenJS"),
+    venjs.p({ class: "page-copy" }, "Button, Input and Card components composed together."),
+    venjs.div({ class: "nav" }, [
+      venjs.button({ class: "nav-btn active", onclick: () => {} }, "Primary"),
+      venjs.button({ variant: "outline", class: "nav-btn", onclick: () => {} }, "Outline")
+    ])
+  ])
+]);
+
+window.DemoPage = () => venjs.div({ class: "app" }, [
+  venjs.h1({ class: "hero-title" }, "VenJS Live Demo"),
+  venjs.p({ class: "hero-copy" }, "A few examples built with signals and components."),
+  DemoCounter(),
+  DemoBinding(),
+  DemoCards()
+]);