npm - tina4-nodejs - Versions diffs - 3.0.0-rc.2 - Mend

tina4-nodejs 3.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (119) hide show

package/BENCHMARK_REPORT.md +96 -0
package/CARBONAH.md +140 -0
package/CLAUDE.md +599 -0
package/COMPARISON.md +194 -0
package/README.md +595 -0
package/package.json +59 -0
package/packages/cli/src/bin.ts +110 -0
package/packages/cli/src/commands/init.ts +194 -0
package/packages/cli/src/commands/migrate.ts +96 -0
package/packages/cli/src/commands/migrateCreate.ts +59 -0
package/packages/cli/src/commands/routes.ts +61 -0
package/packages/cli/src/commands/serve.ts +58 -0
package/packages/cli/src/commands/test.ts +83 -0
package/packages/core/gallery/auth/meta.json +1 -0
package/packages/core/gallery/auth/src/routes/api/gallery/auth/login/post.ts +22 -0
package/packages/core/gallery/auth/src/routes/api/gallery/auth/verify/get.ts +16 -0
package/packages/core/gallery/auth/src/routes/gallery/auth/get.ts +97 -0
package/packages/core/gallery/database/meta.json +1 -0
package/packages/core/gallery/database/src/routes/api/gallery/db/notes/get.ts +13 -0
package/packages/core/gallery/database/src/routes/api/gallery/db/notes/post.ts +17 -0
package/packages/core/gallery/database/src/routes/api/gallery/db/tables/get.ts +23 -0
package/packages/core/gallery/error-overlay/meta.json +1 -0
package/packages/core/gallery/error-overlay/src/routes/api/gallery/crash/get.ts +17 -0
package/packages/core/gallery/orm/meta.json +1 -0
package/packages/core/gallery/orm/src/routes/api/gallery/products/get.ts +12 -0
package/packages/core/gallery/orm/src/routes/api/gallery/products/post.ts +7 -0
package/packages/core/gallery/queue/meta.json +1 -0
package/packages/core/gallery/queue/src/routes/api/gallery/queue/produce/post.ts +16 -0
package/packages/core/gallery/queue/src/routes/api/gallery/queue/status/get.ts +10 -0
package/packages/core/gallery/rest-api/meta.json +1 -0
package/packages/core/gallery/rest-api/src/routes/api/gallery/hello/get.ts +6 -0
package/packages/core/gallery/rest-api/src/routes/api/gallery/hello/post.ts +7 -0
package/packages/core/gallery/templates/meta.json +1 -0
package/packages/core/gallery/templates/src/routes/gallery/page/get.ts +15 -0
package/packages/core/gallery/templates/src/templates/gallery_page.twig +257 -0
package/packages/core/public/css/tina4.css +2463 -0
package/packages/core/public/css/tina4.min.css +1 -0
package/packages/core/public/favicon.ico +0 -0
package/packages/core/public/images/logo.svg +5 -0
package/packages/core/public/images/tina4-logo-icon.webp +0 -0
package/packages/core/public/js/frond.min.js +420 -0
package/packages/core/public/js/tina4-dev-admin.min.js +327 -0
package/packages/core/public/js/tina4.min.js +93 -0
package/packages/core/public/swagger/index.html +90 -0
package/packages/core/public/swagger/oauth2-redirect.html +63 -0
package/packages/core/src/ai.ts +359 -0
package/packages/core/src/api.ts +248 -0
package/packages/core/src/auth.ts +287 -0
package/packages/core/src/cache.ts +121 -0
package/packages/core/src/constants.ts +48 -0
package/packages/core/src/container.ts +90 -0
package/packages/core/src/devAdmin.ts +2024 -0
package/packages/core/src/devMailbox.ts +316 -0
package/packages/core/src/dotenv.ts +172 -0
package/packages/core/src/errorOverlay.test.ts +122 -0
package/packages/core/src/errorOverlay.ts +278 -0
package/packages/core/src/events.ts +112 -0
package/packages/core/src/fakeData.ts +309 -0
package/packages/core/src/graphql.ts +812 -0
package/packages/core/src/health.ts +31 -0
package/packages/core/src/htmlElement.ts +172 -0
package/packages/core/src/i18n.ts +136 -0
package/packages/core/src/index.ts +88 -0
package/packages/core/src/logger.ts +226 -0
package/packages/core/src/messenger.ts +822 -0
package/packages/core/src/middleware.ts +138 -0
package/packages/core/src/queue.ts +481 -0
package/packages/core/src/queueBackends/kafkaBackend.ts +348 -0
package/packages/core/src/queueBackends/rabbitmqBackend.ts +479 -0
package/packages/core/src/rateLimiter.ts +107 -0
package/packages/core/src/request.ts +189 -0
package/packages/core/src/response.ts +146 -0
package/packages/core/src/routeDiscovery.ts +87 -0
package/packages/core/src/router.ts +398 -0
package/packages/core/src/scss.ts +366 -0
package/packages/core/src/server.ts +610 -0
package/packages/core/src/service.ts +380 -0
package/packages/core/src/session.ts +480 -0
package/packages/core/src/sessionHandlers/mongoHandler.ts +286 -0
package/packages/core/src/sessionHandlers/valkeyHandler.ts +184 -0
package/packages/core/src/static.ts +58 -0
package/packages/core/src/testing.ts +233 -0
package/packages/core/src/types.ts +98 -0
package/packages/core/src/watcher.ts +37 -0
package/packages/core/src/websocket.ts +408 -0
package/packages/core/src/wsdl.ts +546 -0
package/packages/core/templates/errors/302.twig +14 -0
package/packages/core/templates/errors/401.twig +9 -0
package/packages/core/templates/errors/403.twig +29 -0
package/packages/core/templates/errors/404.twig +29 -0
package/packages/core/templates/errors/500.twig +38 -0
package/packages/core/templates/errors/502.twig +9 -0
package/packages/core/templates/errors/503.twig +12 -0
package/packages/core/templates/errors/base.twig +37 -0
package/packages/frond/src/engine.ts +1475 -0
package/packages/frond/src/index.ts +2 -0
package/packages/orm/src/adapters/firebird.ts +455 -0
package/packages/orm/src/adapters/mssql.ts +440 -0
package/packages/orm/src/adapters/mysql.ts +355 -0
package/packages/orm/src/adapters/postgres.ts +362 -0
package/packages/orm/src/adapters/sqlite.ts +270 -0
package/packages/orm/src/autoCrud.ts +231 -0
package/packages/orm/src/baseModel.ts +536 -0
package/packages/orm/src/database.ts +321 -0
package/packages/orm/src/fakeData.ts +118 -0
package/packages/orm/src/index.ts +49 -0
package/packages/orm/src/migration.ts +392 -0
package/packages/orm/src/model.ts +56 -0
package/packages/orm/src/query.ts +113 -0
package/packages/orm/src/seeder.ts +120 -0
package/packages/orm/src/sqlTranslation.ts +272 -0
package/packages/orm/src/types.ts +110 -0
package/packages/orm/src/validation.ts +93 -0
package/packages/swagger/src/generator.ts +189 -0
package/packages/swagger/src/index.ts +2 -0
package/packages/swagger/src/ui.ts +48 -0
package/skills/tina4-developer.skill +0 -0
package/skills/tina4-js.skill +0 -0
package/skills/tina4-maintainer.skill +0 -0

package/packages/core/gallery/auth/src/routes/api/gallery/auth/verify/get.ts ADDED Viewed

@@ -0,0 +1,16 @@
+/** Gallery: Auth — verify a JWT token. */
+import type { Tina4Request, Tina4Response } from "@tina4/core";
+export default async function (req: Tina4Request, res: Tina4Response) {
+  const url = new URL(req.url ?? "/", "http://localhost");
+  const token = url.searchParams.get("token") ?? "";
+  // In a real app: import { Auth } from "@tina4/core";
+  // const auth = new Auth();
+  // const isValid = auth.validateToken(token);
+  // For the gallery demo, just check the token has 3 parts
+  const parts = token.split(".");
+  const valid = parts.length === 3 && parts.every((p) => p.length > 0);
+  return res.json({ valid });
+}

package/packages/core/gallery/auth/src/routes/gallery/auth/get.ts ADDED Viewed

@@ -0,0 +1,97 @@
+/** Gallery: Auth — JWT login with a visual demo page. */
+import type { Tina4Request, Tina4Response } from "@tina4/core";
+export default async function (_req: Tina4Request, res: Tina4Response) {
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Auth Demo</title><link rel="stylesheet" href="/css/tina4.min.css">
+</head>
+<body class="bg-dark text-light">
+<div class="container mt-5" style="max-width:600px;">
+    <h2 class="mb-4">JWT Authentication Demo</h2>
+    <div class="card mb-4">
+        <div class="card-header bg-primary text-white">Login</div>
+        <div class="card-body">
+            <div class="form-group mb-3">
+                <label class="form-label">Username</label>
+                <input type="text" id="username" class="form-control" placeholder="admin" value="admin">
+            </div>
+            <div class="form-group mb-3">
+                <label class="form-label">Password</label>
+                <input type="password" id="password" class="form-control" placeholder="secret" value="secret">
+            </div>
+            <button class="btn btn-primary" onclick="doLogin()">Login</button>
+        </div>
+    </div>
+    <div id="result" style="display:none;">
+        <div class="card mb-3">
+            <div class="card-header bg-success text-white">Token Received</div>
+            <div class="card-body">
+                <pre id="token" style="word-break:break-all;white-space:pre-wrap;color:#4ade80;background:#1e293b;padding:1rem;border-radius:0.5rem;"></pre>
+            </div>
+        </div>
+        <div class="card mb-3">
+            <div class="card-header">Token Payload (decoded)</div>
+            <div class="card-body">
+                <pre id="payload" style="color:#38bdf8;background:#1e293b;padding:1rem;border-radius:0.5rem;"></pre>
+            </div>
+        </div>
+        <button class="btn btn-outline-info" onclick="verifyToken()">Verify Token</button>
+        <span id="verify-result" class="ms-2"></span>
+    </div>
+    <div class="card bg-dark mt-4" style="border:1px solid #334155;">
+        <div class="card-body">
+            <h6 style="color:#e2e8f0;">How it works</h6>
+            <pre style="background:#0f172a;color:#4ade80;padding:1rem;border-radius:0.5rem;font-size:0.8rem;"><code>import { Auth } from "@tina4/core";
+const auth = new Auth();
+const token = auth.createToken({ username: "admin" });
+const payload = auth.getPayload(token);
+const isValid = auth.validateToken(token);</code></pre>
+        </div>
+    </div>
+</div>
+<script>
+var currentToken = '';
+function doLogin() {
+    fetch('/api/gallery/auth/login', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({
+            username: document.getElementById('username').value,
+            password: document.getElementById('password').value
+        })
+    }).then(r => r.json()).then(d => {
+        if (d.token) {
+            currentToken = d.token;
+            document.getElementById('token').textContent = d.token;
+            try {
+                var parts = d.token.split('.');
+                var payload = JSON.parse(atob(parts[1]));
+                document.getElementById('payload').textContent = JSON.stringify(payload, null, 2);
+            } catch(e) {
+                document.getElementById('payload').textContent = 'Could not decode';
+            }
+            document.getElementById('result').style.display = 'block';
+            document.getElementById('verify-result').textContent = '';
+        } else {
+            alert(d.error || 'Login failed');
+        }
+    });
+}
+function verifyToken() {
+    fetch('/api/gallery/auth/verify?token=' + encodeURIComponent(currentToken))
+    .then(r => r.json()).then(d => {
+        var el = document.getElementById('verify-result');
+        if (d.valid) {
+            el.innerHTML = '<span class="badge bg-success">Valid</span>';
+        } else {
+            el.innerHTML = '<span class="badge bg-danger">Invalid</span>';
+        }
+    });
+}
+</script>
+</body></html>`;
+  return res.html(html);
+}

package/packages/core/gallery/database/meta.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"name": "Database", "description": "Raw SQL queries with the Database class", "try_url": "/api/gallery/db/tables"}

package/packages/core/gallery/database/src/routes/api/gallery/db/notes/get.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/** Gallery: Database — list notes from the gallery database. */
+import type { Tina4Request, Tina4Response } from "@tina4/core";
+export default async function (_req: Tina4Request, res: Tina4Response) {
+  try {
+    const orm = await import("@tina4/orm");
+    const db = orm.initDatabase({ type: "sqlite", path: "./data/gallery.db" });
+    const result = await db.fetch("SELECT * FROM gallery_notes ORDER BY id DESC", undefined, 50);
+    return res.json(result.records ?? []);
+  } catch (e: unknown) {
+    return res.json({ error: String(e) }, 500);
+  }
+}

package/packages/core/gallery/database/src/routes/api/gallery/db/notes/post.ts ADDED Viewed

@@ -0,0 +1,17 @@
+/** Gallery: Database — create a note in the gallery database. */
+import type { Tina4Request, Tina4Response } from "@tina4/core";
+export default async function (req: Tina4Request, res: Tina4Response) {
+  try {
+    const body = (req.body as Record<string, unknown>) ?? {};
+    const orm = await import("@tina4/orm");
+    const db = orm.initDatabase({ type: "sqlite", path: "./data/gallery.db" });
+    await db.insert("gallery_notes", {
+      title: (body.title as string) ?? "Untitled",
+      body: (body.body as string) ?? "",
+    });
+    return res.json({ created: true }, 201);
+  } catch (e: unknown) {
+    return res.json({ error: String(e) }, 500);
+  }
+}

package/packages/core/gallery/database/src/routes/api/gallery/db/tables/get.ts ADDED Viewed

@@ -0,0 +1,23 @@
+/** Gallery: Database — list tables in the gallery database. */
+import type { Tina4Request, Tina4Response } from "@tina4/core";
+export default async function (_req: Tina4Request, res: Tina4Response) {
+  try {
+    const orm = await import("@tina4/orm");
+    const db = orm.initDatabase({ type: "sqlite", path: "./data/gallery.db" });
+    await db.execute(`
+      CREATE TABLE IF NOT EXISTS gallery_notes (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        title TEXT NOT NULL,
+        body TEXT,
+        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+      )
+    `);
+    const tables = await db.getTables();
+    return res.json({ tables, engine: "sqlite" });
+  } catch (e: unknown) {
+    return res.json({ error: String(e) }, 500);
+  }
+}

package/packages/core/gallery/error-overlay/meta.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"name": "Error Overlay", "description": "See the rich debug error page with stack trace and source code", "try_url": "/api/gallery/crash"}

package/packages/core/gallery/error-overlay/src/routes/api/gallery/crash/get.ts ADDED Viewed

@@ -0,0 +1,17 @@
+/** Gallery: Error Overlay — deliberately crash to demo the debug overlay.
+ *
+ * In debug mode (TINA4_DEBUG=true), you will see:
+ * - Exception type and message
+ * - Stack trace with syntax-highlighted source code
+ * - The exact line that caused the error (highlighted)
+ * - Request details (method, path, headers)
+ * - Environment info (framework version, Node.js version)
+ */
+import type { Tina4Request, Tina4Response } from "@tina4/core";
+export default async function (_req: Tina4Request, _res: Tina4Response) {
+  // Simulate a realistic error — accessing a missing property
+  const user: Record<string, string> = { name: "Alice", email: "alice@example.com" };
+  const role = (user as any).role.toUpperCase(); // TypeError — this line will be highlighted in the overlay
+  return _res.json({ role });
+}

package/packages/core/gallery/orm/meta.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"name": "ORM", "description": "Product model with CRUD endpoints", "try_url": "/api/gallery/products"}

package/packages/core/gallery/orm/src/routes/api/gallery/products/get.ts ADDED Viewed

@@ -0,0 +1,12 @@
+/** Gallery: ORM — list products (demo data). */
+import type { Tina4Request, Tina4Response } from "@tina4/core";
+export default async function (_req: Tina4Request, res: Tina4Response) {
+  return res.json({
+    products: [
+      { id: 1, name: "Widget", price: 9.99 },
+      { id: 2, name: "Gadget", price: 24.99 },
+    ],
+    note: "Connect a database and deploy the ORM model for live data",
+  });
+}

package/packages/core/gallery/orm/src/routes/api/gallery/products/post.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/** Gallery: ORM — create a product (demo). */
+import type { Tina4Request, Tina4Response } from "@tina4/core";
+export default async function (req: Tina4Request, res: Tina4Response) {
+  const data = (req.body as Record<string, unknown>) ?? {};
+  return res.json({ created: data, id: 3 }, 201);
+}

package/packages/core/gallery/queue/meta.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"name": "Queue", "description": "Background job producer and consumer", "try_url": "/api/gallery/queue/produce"}

package/packages/core/gallery/queue/src/routes/api/gallery/queue/produce/post.ts ADDED Viewed

@@ -0,0 +1,16 @@
+/** Gallery: Queue — produce a background job. */
+import type { Tina4Request, Tina4Response } from "@tina4/core";
+export default async function (req: Tina4Request, res: Tina4Response) {
+  const body = (req.body as Record<string, unknown>) ?? {};
+  const task = (body.task as string) ?? "default-task";
+  const data = body.data ?? {};
+  // In a real app you would use:
+  //   import { Queue, Producer } from "@tina4/core";
+  //   const queue = new Queue(db, "gallery-tasks");
+  //   const producer = new Producer(queue);
+  //   producer.produce({ task, data });
+  return res.json({ queued: true, task }, 201);
+}

package/packages/core/gallery/queue/src/routes/api/gallery/queue/status/get.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/** Gallery: Queue — check queue status. */
+import type { Tina4Request, Tina4Response } from "@tina4/core";
+export default async function (_req: Tina4Request, res: Tina4Response) {
+  return res.json({
+    topic: "gallery-tasks",
+    size: 0,
+    note: "Connect a queue backend for live data",
+  });
+}

package/packages/core/gallery/rest-api/meta.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"name": "REST API", "description": "A simple JSON API with GET and POST endpoints", "try_url": "/api/gallery/hello"}

package/packages/core/gallery/rest-api/src/routes/api/gallery/hello/get.ts ADDED Viewed

@@ -0,0 +1,6 @@
+/** Gallery: REST API — simple JSON GET endpoint. */
+import type { Tina4Request, Tina4Response } from "@tina4/core";
+export default async function (req: Tina4Request, res: Tina4Response) {
+  return res.json({ message: "Hello from Tina4!", method: "GET" });
+}

package/packages/core/gallery/rest-api/src/routes/api/gallery/hello/post.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/** Gallery: REST API — simple JSON POST endpoint. */
+import type { Tina4Request, Tina4Response } from "@tina4/core";
+export default async function (req: Tina4Request, res: Tina4Response) {
+  const data = (req.body as Record<string, unknown>) ?? {};
+  return res.json({ echo: data, method: "POST" }, 201);
+}

package/packages/core/gallery/templates/meta.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"name": "Templates", "description": "Twig template with dynamic data", "try_url": "/gallery/page"}

package/packages/core/gallery/templates/src/routes/gallery/page/get.ts ADDED Viewed

@@ -0,0 +1,15 @@
+/** Gallery: Templates — render an HTML page with dynamic data via template export. */
+import type { Tina4Request, Tina4Response } from "@tina4/core";
+export const template = "gallery_page.twig";
+export default async function (_req: Tina4Request, _res: Tina4Response) {
+  return {
+    title: "Gallery Demo Page",
+    items: [
+      { name: "Tina4 Node.js", description: "Zero-dep web framework", badge: "v3.0.0" },
+      { name: "Twig Engine", description: "Built-in template rendering", badge: "included" },
+      { name: "Auto-Reload", description: "Templates refresh on save", badge: "dev mode" },
+    ],
+  };
+}

package/packages/core/gallery/templates/src/templates/gallery_page.twig ADDED Viewed

@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ title }}</title>
+    <link rel="stylesheet" href="/css/tina4.min.css">
+    <style>
+        .component-section { margin-bottom: 2.5rem; }
+        .component-section h3 { border-bottom: 2px solid var(--bs-primary, #0d6efd); padding-bottom: 0.5rem; margin-bottom: 1rem; }
+        .code-preview { background: #1e293b; color: #4ade80; padding: 1rem; border-radius: 0.5rem; font-family: monospace; font-size: 0.85rem; overflow-x: auto; margin-top: 0.75rem; }
+    </style>
+</head>
+<body>
+<!-- Navbar -->
+<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
+    <div class="container">
+        <a class="navbar-brand" href="/">Tina4 CSS Showcase</a>
+        <div class="navbar-nav ms-auto">
+            <a class="nav-link active" href="#">Components</a>
+            <a class="nav-link" href="/__dev">Dashboard</a>
+            <a class="nav-link" href="/swagger">API Docs</a>
+        </div>
+    </div>
+</nav>
+<div class="container mt-4">
+    <div class="alert alert-info alert-dismissible mb-4">
+        <strong>tina4css</strong> — Zero-dependency CSS framework (~24KB). Bootstrap-compatible class names, dark mode ready. No CDN needed — ships with every Tina4 project.
+        <button type="button" class="btn-close" onclick="this.parentElement.remove()"></button>
+    </div>
+    <!-- Buttons -->
+    <div class="component-section">
+        <h3>Buttons</h3>
+        <div class="d-flex flex-wrap gap-2 mb-3">
+            <button class="btn btn-primary">Primary</button>
+            <button class="btn btn-secondary">Secondary</button>
+            <button class="btn btn-success">Success</button>
+            <button class="btn btn-danger">Danger</button>
+            <button class="btn btn-warning">Warning</button>
+            <button class="btn btn-info">Info</button>
+            <button class="btn btn-dark">Dark</button>
+            <button class="btn btn-light">Light</button>
+        </div>
+        <div class="d-flex flex-wrap gap-2 mb-3">
+            <button class="btn btn-outline-primary">Outline</button>
+            <button class="btn btn-outline-success">Outline</button>
+            <button class="btn btn-outline-danger">Outline</button>
+            <button class="btn btn-outline-warning">Outline</button>
+        </div>
+        <div class="d-flex flex-wrap gap-2">
+            <button class="btn btn-primary btn-lg">Large</button>
+            <button class="btn btn-primary">Default</button>
+            <button class="btn btn-primary btn-sm">Small</button>
+        </div>
+    </div>
+    <!-- Alerts -->
+    <div class="component-section">
+        <h3>Alerts</h3>
+        <div class="alert alert-success">Success — Record saved successfully!</div>
+        <div class="alert alert-danger">Error — Something went wrong.</div>
+        <div class="alert alert-warning">Warning — Please check your input.</div>
+        <div class="alert alert-info">Info — New version available.</div>
+    </div>
+    <!-- Cards -->
+    <div class="component-section">
+        <h3>Cards</h3>
+        <div class="row">
+            {% for item in items %}
+            <div class="col-md-4 mb-3">
+                <div class="card h-100">
+                    <div class="card-header bg-primary text-white">{{ item.name }}</div>
+                    <div class="card-body">
+                        <p class="card-text">{{ item.description }}</p>
+                        <span class="badge bg-success">{{ item.badge }}</span>
+                    </div>
+                    <div class="card-footer text-muted">
+                        <small>Built with tina4css</small>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+    <!-- Badges -->
+    <div class="component-section">
+        <h3>Badges</h3>
+        <span class="badge bg-primary me-1">Primary</span>
+        <span class="badge bg-secondary me-1">Secondary</span>
+        <span class="badge bg-success me-1">Success</span>
+        <span class="badge bg-danger me-1">Danger</span>
+        <span class="badge bg-warning me-1">Warning</span>
+        <span class="badge bg-info me-1">Info</span>
+        <span class="badge bg-dark me-1">Dark</span>
+    </div>
+    <!-- Forms -->
+    <div class="component-section">
+        <h3>Forms</h3>
+        <div class="card">
+            <div class="card-body">
+                <form>
+                    <div class="row mb-3">
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="form-label">Full Name</label>
+                                <input type="text" class="form-control" placeholder="Andre van Zuydam">
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="form-label">Email</label>
+                                <input type="email" class="form-control" placeholder="you@example.com">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row mb-3">
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="form-label">Framework</label>
+                                <select class="form-select">
+                                    <option>Python</option>
+                                    <option>PHP</option>
+                                    <option>Ruby</option>
+                                    <option selected>Node.js</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="form-label">Database</label>
+                                <select class="form-select">
+                                    <option>SQLite</option>
+                                    <option>PostgreSQL</option>
+                                    <option>MySQL</option>
+                                    <option>Firebird</option>
+                                    <option>MSSQL</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group mb-3">
+                        <label class="form-label">Message</label>
+                        <textarea class="form-control" rows="3" placeholder="Tell us about your project..."></textarea>
+                    </div>
+                    <div class="form-check mb-3">
+                        <input class="form-check-input" type="checkbox" checked>
+                        <label class="form-check-label">I agree to the terms</label>
+                    </div>
+                    <button type="button" class="btn btn-primary">Submit</button>
+                    <button type="button" class="btn btn-outline-secondary ms-2">Cancel</button>
+                </form>
+            </div>
+        </div>
+    </div>
+    <!-- Table -->
+    <div class="component-section">
+        <h3>Tables</h3>
+        <div class="table-responsive">
+            <table class="table table-striped table-hover">
+                <thead>
+                    <tr>
+                        <th>#</th>
+                        <th>Framework</th>
+                        <th>Port</th>
+                        <th>Language</th>
+                        <th>Status</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr><td>1</td><td>tina4-python</td><td>7145</td><td>Python 3.12+</td><td><span class="badge bg-success">Stable</span></td></tr>
+                    <tr><td>2</td><td>tina4-php</td><td>7146</td><td>PHP 8.2+</td><td><span class="badge bg-success">Stable</span></td></tr>
+                    <tr><td>3</td><td>tina4-ruby</td><td>7147</td><td>Ruby 3.1+</td><td><span class="badge bg-success">Stable</span></td></tr>
+                    <tr><td>4</td><td>tina4-nodejs</td><td>7148</td><td>Node 20+</td><td><span class="badge bg-success">Stable</span></td></tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <!-- Breadcrumbs -->
+    <div class="component-section">
+        <h3>Breadcrumbs</h3>
+        <nav>
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="/">Home</a></li>
+                <li class="breadcrumb-item"><a href="#">Gallery</a></li>
+                <li class="breadcrumb-item active">Components</li>
+            </ol>
+        </nav>
+    </div>
+    <!-- Input Groups -->
+    <div class="component-section">
+        <h3>Input Groups</h3>
+        <div class="input-group mb-3">
+            <span class="input-group-text">@</span>
+            <input type="text" class="form-control" placeholder="Username">
+        </div>
+        <div class="input-group mb-3">
+            <input type="text" class="form-control" placeholder="Search routes...">
+            <button class="btn btn-primary">Search</button>
+        </div>
+        <div class="input-group">
+            <span class="input-group-text">https://</span>
+            <input type="text" class="form-control" placeholder="tina4.com">
+            <span class="input-group-text">/api</span>
+        </div>
+    </div>
+    <!-- Progress -->
+    <div class="component-section">
+        <h3>Progress Bars</h3>
+        <div class="progress mb-2"><div class="progress-bar bg-primary" style="width: 25%">25%</div></div>
+        <div class="progress mb-2"><div class="progress-bar bg-success" style="width: 50%">50%</div></div>
+        <div class="progress mb-2"><div class="progress-bar bg-warning" style="width: 75%">75%</div></div>
+        <div class="progress"><div class="progress-bar bg-danger" style="width: 100%">100%</div></div>
+    </div>
+    <!-- List Group -->
+    <div class="component-section">
+        <h3>List Group</h3>
+        <div class="list-group">
+            <a href="#" class="list-group-item list-group-item-action active">Routes — 12 registered</a>
+            <a href="#" class="list-group-item list-group-item-action">Queue — 3 pending jobs</a>
+            <a href="#" class="list-group-item list-group-item-action">Database — SQLite connected</a>
+            <a href="#" class="list-group-item list-group-item-action disabled">Cache — Not configured</a>
+        </div>
+    </div>
+    <!-- How this page was built -->
+    <div class="card mt-4 mb-5" style="background:#0f172a;border:1px solid #334155;">
+        <div class="card-body">
+            <h5 style="color:#e2e8f0;">How this page was built</h5>
+            <pre style="background:#1e293b;border:1px solid #334155;border-radius:0.5rem;padding:1.25rem;margin-top:0.75rem;overflow-x:auto;font-family:'SF Mono',SFMono-Regular,Consolas,monospace;font-size:0.9rem;line-height:1.7;"><code><span style="color:#64748b">// src/routes/gallery/page/get.ts</span>
+<span style="color:#c084fc">export const</span> <span style="color:#fbbf24">template</span> = <span style="color:#4ade80">"gallery_page.twig"</span>;
+<span style="color:#c084fc">export default</span> <span style="color:#38bdf8">async function</span>(<span style="color:#38bdf8">_req</span>, <span style="color:#38bdf8">_res</span>) {
+    <span style="color:#c084fc">return</span> { <span style="color:#4ade80">"title"</span>: <span style="color:#4ade80">"tina4css Component Showcase"</span>, <span style="color:#4ade80">"items"</span>: [...] };
+}</code></pre>
+            <p style="color:#94a3b8;margin-top:0.75rem;margin-bottom:0;">
+                Rendered via <code style="color:#c084fc;">template</code> export. Styled with <strong style="color:#e2e8f0;">tina4css</strong> — zero external CDN.
+                All components above use only <code style="color:#4ade80;">&lt;link href="/css/tina4.min.css"&gt;</code>.
+            </p>
+        </div>
+    </div>
+</div>
+</body>
+</html>