kreftjs 0.0.5-beta → 0.0.7-beta

package/README.md

@@ -75,7 +75,7 @@ Views are escaped, logins use HttpOnly cookies with CSRF protection, passwords u
 
 ## Migrating from Som.js
 
-Kreft is Som.js under a new name: the package is `kreftjs` (version 0.0.5-beta), the command is `kreft` (`kreftjs` works too), the global is `Kreftjs` and component files end in `.kreftjs`. The old names keep working, so an existing project runs without edits. New files and everything the tools write use the new names. Move over when it suits you. (`kreft` was an earlier spelling of the new name; it is accepted in the same places.)
+Kreft is Som.js under a new name: the package is `kreftjs` (version 0.0.7-beta), the command is `kreft` (`kreftjs` works too), the global is `Kreftjs` and component files end in `.kreftjs`. The old names keep working, so an existing project runs without edits. New files and everything the tools write use the new names. Move over when it suits you. (`kreft` was an earlier spelling of the new name; it is accepted in the same places.)
 
 | Som.js | Kreft | Still works? |
 |---|---|---|

package/bin/build.js

@@ -8,6 +8,7 @@
  *   kreft build --prerender      also save every page as ready HTML (needs: npm i -D jsdom)
  *   kreft build --prerender --urls urls.js   ... and the addresses in that file (pages that come from your data)
  *   kreft build --include docs   also copy another folder into the output
+ *   kreft build --no-htaccess    do not write dist/.htaccess (the Apache / Hostinger page-address rules)
  *
  * What it does:
  *   1. Compiles every .kreftjs file ahead of time into app.js (no .kreftjs files are downloaded in production).
@@ -30,14 +31,15 @@ const deps = require('./deps.js');
 // component files: .kreftjs, or .kreft / .som in an older project
 const isComp = (f) => /\.(?:kreftjs|kreft|som)$/i.test(f);
 const SERVER_DIRS = new Set();
-const SKIP = new Set(['node_modules', '.git', '.vscode', '.idea', 'package.json', 'package-lock.json', '.DS_Store']);
+const SKIP = new Set(['node_modules', 'dist', 'dist-electron', '.git', '.vscode', '.idea', 'package.json', 'package-lock.json', '.DS_Store']);
 
 module.exports = function build(args) {
-  let folder = null, out = null, base = null, prerender = null, urlsFile = null;
+  let folder = null, out = null, base = null, prerender = null, urlsFile = null, htaccess = true;
   const include = [];
   for (let i = 0; i < args.length; i++) {
     if (args[i] === '--out' || args[i] === '-o') out = args[++i];
     else if (args[i] === '--base') base = args[++i];
+    else if (args[i] === '--no-htaccess') htaccess = false;
     else if (args[i] === '--include') include.push(args[++i]); // another folder to copy in, like the docs
     else if (args[i] === '--prerender') prerender = args[i + 1] && !args[i + 1].startsWith('-') && args[i + 1].includes('/') ? args[++i].split(',') : [];
     else if (args[i] === '--urls') urlsFile = args[++i]; // a file with more addresses to prerender (pages from your data)
@@ -227,6 +229,7 @@ ${indent(components.join('\n\n'))}
       : html.replace(/<head>/i, `<head>\n  <base href="${b}">`);
   }
   write(dist, 'index.html', html);
+  if (htaccess) writeHtaccess(dist, html);
 
   const report = () => {
     const files = walk(dist, null).map((f) => [path.relative(dist, f), fs.statSync(f).size]);
@@ -249,6 +252,25 @@ ${indent(components.join('\n\n'))}
   report();
 };
 
+// Apache (Hostinger, cPanel …) answers /docs with a 404, because only index.html exists on disk. These rules send every address
+// that is not a real file or folder to index.html, so reloading a page works. An .htaccess you keep in public/ is left alone;
+// a relative base (./, as the desktop build uses) has no server and gets no file.
+function writeHtaccess(dist, html) {
+  const m = /<base\b[^>]*\bhref="([^"]*)"/i.exec(html);
+  const base = m ? m[1] : '/';
+  if (!base.startsWith('/') || fs.existsSync(path.join(dist, '.htaccess'))) return;
+  write(dist, '.htaccess', `# Written by kreft build: every address that is not a file or a folder opens index.html (turn off: kreft build --no-htaccess)
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase ${base}
+  RewriteRule ^index\\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . ${base}index.html [L]
+</IfModule>
+`);
+}
+
 // a frontend .ts file → the browser's JavaScript (types removed); its own './x.ts' imports become './x.js'
 function tsToJs(file, project) {
   const { transpileTs } = require('./backend/typescript.js');

package/bin/kreftjs.js

@@ -163,6 +163,7 @@ function help() {
         --base <path>       Change the <base href> (for example /)
         --prerender [paths] Also save every page as ready HTML (needs: npm i -D jsdom)
         --include <folder>  Also copy this folder into the output (for example docs)
+        --no-htaccess       Do not write dist/.htaccess (page-address rules for Apache and Hostinger)
     kreft add <packages...>     Install npm packages with strict security gatekeeper (alias: kreft install, kreft i)
         -D, --dev           Install as devDependency
         -y, --yes           Auto-confirm unverified community packages in CI/CD

package/bin/no-auth.js

@@ -75,6 +75,8 @@ Route.prefix('/tests').name('tests.').group(() => {
 `;
 
 const LAYOUT = (todos) => `<!-- The default layout: a slim bar and the page. Every route without .layout(…) uses it (see index.html). -->
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
+
 <view>
   <header>
     <kreft-link to="/" class="brand"><span class="mark" aria-hidden="true"></span>{env.PUBLIC_APP_NAME || 'My app'}</kreft-link>
@@ -83,7 +85,7 @@ const LAYOUT = (todos) => `<!-- The default layout: a slim bar and the page. Eve
       <kreft-link to="/todos" exact-class="here">Todos</kreft-link>` : ''}
       <kreft-link to="/error-monitor" exact-class="here">Error monitor</kreft-link>
       <kreft-link to="/tests" exact-class="here">Tests</kreft-link>
-      <kreft-link to="/docs" exact-class="here">Docs</kreft-link>
+      <a href={docs + '/docs'} target="_blank" rel="noopener">Docs</a>
       <button type="button" class="theme" @click="theme.toggle()" aria-label="Toggle theme" title="Toggle theme">
         <span k-if="theme.dark">☀</span><span k-else>🌙</span>
       </button>

package/docs/README.md

@@ -82,7 +82,7 @@ npx kreftjs dev
 ### Check that it works
 
 ```bash
-kreft --version     # for example 0.0.5-beta
+kreft --version     # for example 0.0.7-beta
 kreft about         # Kreft and Node.js versions, this project's settings and drivers
 kreft list          # every command your version has
 ```
@@ -1737,7 +1737,52 @@ What you get:
 - **A strict Content-Security-Policy works.** Every expression becomes a real function, so the built app never uses `eval` or `new Function`.
 - **Errors before you deploy.** A mistake in any `.kreftjs` file stops the build and names the file and line.
 
-Options: `kreft build ./site --out public` builds another folder, and `--base /` changes `<base href>`. Upload the output folder to any static host.
+Options: `kreft build ./site --out public` builds another folder, and `--base /` changes `<base href>`. `--no-htaccess` skips the `.htaccess` file described below.
+
+### Upload to a host
+
+**Static hosting: Hostinger, cPanel, any Apache host.** Upload what is *inside* `dist/` (not the `dist` folder itself) to the folder the website is served from, normally `public_html`. In Hostinger's hPanel: **Files → File Manager → public_html → Upload**, or use FTP. Do not use the "framework" or "Node.js app" importers for this: they look for a `package.json` and say *Unsupported framework or invalid project structure*, because `dist/` holds only finished files.
+
+`kreft build` also writes `dist/.htaccess`:
+
+```apache
+RewriteEngine On
+RewriteBase /
+RewriteRule ^index\.html$ - [L]
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule . /index.html [L]
+```
+
+Apache only knows the files on disk, so without these rules `/docs` or any other clean address gives a 404 when someone opens or reloads it. With them, every address that is not a real file or folder opens `index.html` and the router takes over. Upload the file too (it starts with a dot, so some file managers hide it; turn on "show hidden files"). If the site lives in a folder, build with `--base /folder/` and the rules follow it. An `.htaccess` you keep in `public/` is used as it is. A relative base (`--base ./`, used by the desktop build) gets no file.
+
+> [!NOTE]
+> This hosts the front end only. Login, the database and everything under `/api` need the Node.js server, which Apache does not run.
+
+**A Node.js plan or a VPS.** Upload the whole project (without `node_modules`), not `dist/`. Add Kreft to its dependencies with `npm i kreftjs`, build with `npm run build`, and start the server with `npm run serve` (it reads the `PORT` your host sets). The generated `start` script runs the development server, so do not use it in production.
+
+
+On a VPS, keep it running with PM2 and put nginx in front of it for your domain and HTTPS:
+
+```bash
+npm install && npm run build
+npm i -g pm2
+pm2 start "npm run serve" --name my-app && pm2 save
+```
+
+```nginx
+server {
+    server_name example.com;
+    location / {
+        proxy_pass http://127.0.0.1:8000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+Then `sudo certbot --nginx -d example.com` adds HTTPS. Set `APP_ENV=production` and a real `APP_KEY` in `.env` first, and read the [Production checklist](#production-checklist).
+
 
 ### Ready HTML for every page: `--prerender`
 
@@ -2222,6 +2267,7 @@ Set these in `.env` (never commit it). Variables that start with `PUBLIC_` are c
 | `LOGIN_MAX_FAILURES`, `LOGIN_WINDOW_SECONDS` | 10, 900 | Wrong passwords per account before a lockout. |
 | `TWO_FACTOR_MAX_FAILURES` | 8 | Wrong two-factor codes per account before a lockout. |
 | `PUBLIC_SESSION_TIMEOUT`, `PUBLIC_SESSION_WARNING` | 15, 2 | Minutes of page inactivity before sign-out, and the warning before it. |
+| `PUBLIC_DOCS_URL` | `http://kreftjs.com` | Where the "Documentation" links of a new app's pages go. Change it to `https://…` or to your own site. |
 
 ### Network and tools
 

package/kreftjs.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for Kreft 0.0.5-beta
+// Type definitions for Kreft 0.0.7-beta
 // Use from TypeScript or for editor hints in plain JavaScript (// @ts-check).
 
 export interface Signal<T> { value: T }

package/kreftjs.js

@@ -1,5 +1,5 @@
 /*!
- * Kreft v0.0.5-beta — reactive by nature
+ * Kreft v0.0.7-beta — reactive by nature
  * The .kreftjs component language (state · derive · action · when · watch · on),
  * { } views with k-if / k-each / k-model, components, slots, router, stores,
  * share / receive, event bus and a template engine.
@@ -5032,7 +5032,7 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.5-beta';
+  const VERSION = '0.0.7-beta';
   const Kreftjs = {
     version: VERSION,
     // PUBLIC_ values from .env (kreft dev and kreft build put them here); never secrets

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kreftjs",
-  "version": "0.0.5-beta",
+  "version": "0.0.7-beta",
   "description": "A tiny reactive framework with its own component language (.kreftjs files): router with nested routes, stores, saved data, animations, an API client, hot reload, DevTools and a template engine.",
   "license": "Elastic-2.0",
   "main": "kreftjs.js",

package/templates/app/README.md

@@ -28,7 +28,7 @@ Your project cleanly isolates client-side UI (`frontend/`) from server-side busi
 │   ├── pages/                 # Route views (Home, Dashboard, Users, Profile, auth/*)
 │   ├── components/            # Reusable widgets (Field.kreftjs, StatCard.kreftjs, profile/*)
 │   ├── errors/                # Custom HTTP error views (404.kreftjs, 500.kreftjs, ErrorMonitor.kreftjs)
-│   ├── docs/                  # Built-in documentation (accessible at /docs)
+│   ├── docs/                  # Built-in copy of the documentation (at /docs); the pages link to PUBLIC_DOCS_URL, http://kreftjs.com
 │   └── ui.css                 # Design system tokens & component styles
 │
 ├── backend/                   # Private server engine (never exposed or built into dist/)

package/templates/app/_env.example

@@ -11,6 +11,8 @@ APP_URL=http://localhost:8000
 # Only values that start with PUBLIC_ also reach the browser: {env.PUBLIC_APP_NAME} in any .kreftjs file.
 # Never put a password or a secret key in a PUBLIC_ value.
 PUBLIC_APP_NAME="${APP_NAME}"
+# Where the "Documentation" links of the pages go
+PUBLIC_DOCS_URL="http://kreftjs.com"
 
 # The database: sqlite:file.db, mysql://user:password@host:3306/name or postgres://user:password@host:5432/name
 DATABASE_URL=sqlite:backend/database/app.db

package/templates/app/frontend/errors/ErrorMonitor.kreftjs

@@ -82,6 +82,8 @@ action copyReport() {
   }
 }
 
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
+
 <view>
   <div class="kreft-inspector">
     <!-- Header Card -->
@@ -90,11 +92,11 @@ action copyReport() {
         <div class="badges">
           <span class="badge danger-badge">HTTP {status}</span>
           <span class="badge solid">{currentTitle}</span>
-          <span class="badge">Kreft {Kreftjs.version || '0.0.5-beta'}</span>
+          <span class="badge">Kreft {Kreftjs.version || '0.0.7-beta'}</span>
         </div>
         <div class="actions">
           <button class="sm" @click={copyReport}>{copied ? 'Copied Markdown' : 'Copy Report'}</button>
-          <kreft-link to="/docs" class="btn sm ghost">Docs</kreft-link>
+          <a href={docs + '/docs'} class="btn sm ghost" target="_blank" rel="noopener">Docs</a>
         </div>
       </div>
 
@@ -187,7 +189,7 @@ action copyReport() {
         <h3>Kreft Runtime</h3>
         <table>
           <tbody>
-            <tr><th>Engine</th><td><code>Kreft v{Kreftjs.version || '0.0.5-beta'}</code></td></tr>
+            <tr><th>Engine</th><td><code>Kreft v{Kreftjs.version || '0.0.7-beta'}</code></td></tr>
             <tr><th>Sanitizer</th><td><code>Active (cleanHtml / SafeHtml)</code></td></tr>
             <tr><th>Environment</th><td><code>development (APP_DEBUG=true)</code></td></tr>
           </tbody>

package/templates/app/frontend/kreftjs.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for Kreft 0.0.5-beta
+// Type definitions for Kreft 0.0.7-beta
 // Use from TypeScript or for editor hints in plain JavaScript (// @ts-check).
 
 export interface Signal<T> { value: T }

package/templates/app/frontend/kreftjs.js

@@ -1,5 +1,5 @@
 /*!
- * Kreft v0.0.5-beta — reactive by nature
+ * Kreft v0.0.7-beta — reactive by nature
  * The .kreftjs component language (state · derive · action · when · watch · on),
  * { } views with k-if / k-each / k-model, components, slots, router, stores,
  * share / receive, event bus and a template engine.
@@ -5032,7 +5032,7 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.5-beta';
+  const VERSION = '0.0.7-beta';
   const Kreftjs = {
     version: VERSION,
     // PUBLIC_ values from .env (kreft dev and kreft build put them here); never secrets

package/templates/app/frontend/layouts/app.kreftjs

@@ -11,6 +11,7 @@ state remainingMinutes = 5
 state inactivityTimer = null
 
 // SVG vector icon paths (24x24)
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
 state icons = {
   dashboard: 'M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z',
   users: 'M16 19v-1a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v1M9.5 10a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7M21 19v-1a4 4 0 0 0-3-3.87M15.5 3.13a3.5 3.5 0 0 1 0 6.75',
@@ -33,7 +34,7 @@ state navGroups = [
   { label: 'Platform', links: [
     { to: 'welcome', label: 'Showcase', icon: 'showcase' },
     { to: 'error-monitor', label: 'Error Monitor', icon: 'panel' },
-    { to: 'docs', label: 'Documentation', icon: 'docs' },
+    { docs: '/docs', label: 'Documentation', icon: 'docs' },
     { to: 'tests.index', label: 'Test Suite', icon: 'tests' },
   ] },
 ]
@@ -130,7 +131,12 @@ action extendSession() {
             <ul class="nav-list">
               {for link in group.links}
                 <li>
+                  <a k-if="link.docs" href={docs + link.docs} target="_blank" rel="noopener" title={collapsed ? link.label : null} class="nav-item">
+                    <svg viewBox="0 0 24 24" aria-hidden="true" class="nav-icon"><path d={icons[link.icon] || icons.panel}></path></svg>
+                    <span class="nav-label">{link.label}</span>
+                  </a>
                   <kreft-link
+                    k-else
                     to={link.to}
                     exact-class={link.exact ? 'active-link' : 'kreft-link-exact'}
                     active-class={link.exact ? 'kreft-link-active' : 'active-link'}

package/templates/app/frontend/pages/Dashboard.kreftjs

@@ -5,6 +5,8 @@
 load stats = api.get('/api/admin/stats')
 load board = api.get('/api/dashboard')
 
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
+
 <view>
   <div class="dashboard-page">
     <div class="dashboard-header">
@@ -110,7 +112,7 @@ load board = api.get('/api/dashboard')
         <div class="info-list">
           <div class="info-item">
             <span class="info-label">Framework Engine</span>
-            <span class="info-value">Kreft {Kreftjs.version || '0.0.5-beta'}</span>
+            <span class="info-value">Kreft {Kreftjs.version || '0.0.7-beta'}</span>
           </div>
           <div class="info-item">
             <span class="info-label">Active Database</span>
@@ -128,7 +130,7 @@ load board = api.get('/api/dashboard')
 
         <div class="quick-nav-group">
           <kreft-link to="/profile" class="btn secondary sm w-full">Edit Profile Settings</kreft-link>
-          <kreft-link to="/docs" class="btn ghost sm w-full">API Documentation</kreft-link>
+          <a href={docs + '/docs'} class="btn ghost sm w-full" target="_blank" rel="noopener">API Documentation</a>
           <kreft-link to="/welcome" class="btn ghost sm w-full">Landing Page Showcase</kreft-link>
         </div>
       </section>

package/templates/app/frontend/pages/Home.kreftjs

@@ -6,6 +6,7 @@ state count = 0
 state copied = false
 derive double = count * 2
 
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
 state words = [
   { word: 'state', says: 'a value that can change', to: '/docs#components-and-the-kreftjs-file' },
   { word: 'saved', says: 'a value kept after a reload', to: '/docs#saving-data-in-the-browser' },
@@ -49,7 +50,7 @@ action copy() {
     <header class="site-bar">
       <kreft-link to="/" class="site-brand"><span class="site-mark" aria-hidden="true"></span>{env.PUBLIC_APP_NAME || 'Kreft'}</kreft-link>
       <nav class="site-nav">
-        <kreft-link to="/docs">Documentation</kreft-link>
+        <a href={docs + '/docs'} target="_blank" rel="noopener">Documentation</a>
         <kreft-link k-if="$store.auth.user" to="/dashboard">Dashboard</kreft-link>
         <kreft-link k-if="!$store.auth.user" to="/login">Log in</kreft-link>
         <kreft-link k-if="!$store.auth.user" to="/register" class="site-cta">Sign up</kreft-link>
@@ -77,10 +78,10 @@ action copy() {
 
         <!-- CTA Buttons -->
         <div class="cta-actions">
-          <kreft-link to="/docs" class="pill-btn primary">Read the docs</kreft-link>
+          <a href={docs + '/docs'} class="pill-btn primary" target="_blank" rel="noopener">Read the docs</a>
           <kreft-link k-if="$store.auth.user" to="/dashboard" class="pill-btn ghost">Open dashboard</kreft-link>
           <kreft-link k-if="!$store.auth.user" to="/register" class="pill-btn ghost">Sign up</kreft-link>
-          <kreft-link to="/docs#your-first-app" class="pill-btn ghost">Quick start</kreft-link>
+          <a href={docs + '/docs#your-first-app'} class="pill-btn ghost" target="_blank" rel="noopener">Quick start</a>
         </div>
 
         <!-- Badges Row -->
@@ -177,7 +178,7 @@ action copy() {
       <h2>The whole language fits on one screen</h2>
       <dl>
         {for w in words key w.word}
-          <div><dt><kreft-link to={w.to}>{w.word}</kreft-link></dt><dd>{w.says}</dd></div>
+          <div><dt><a href={docs + w.to} target="_blank" rel="noopener">{w.word}</a></dt><dd>{w.says}</dd></div>
         {/for}
       </dl>
     </section>
@@ -186,7 +187,7 @@ action copy() {
       <h2>Also in the box</h2>
       <ul>
         {for p in parts key p.title}
-          <li><kreft-link to={p.to}><strong>{p.title}</strong><span>{p.text}</span></kreft-link></li>
+          <li><a href={docs + p.to} target="_blank" rel="noopener"><strong>{p.title}</strong><span>{p.text}</span></a></li>
         {/for}
       </ul>
     </section>
@@ -197,12 +198,12 @@ action copy() {
         <code>kreft new my-app --db sqlite</code>
         <button class="sm" @click={copy} aria-label="Copy the command">{copied ? 'Copied' : 'Copy'}</button>
       </div>
-      <p>Then <code>cd my-app</code> and <code>npm run dev</code>. Coming from Vue? The <kreft-link to="/docs">docs</kreft-link> have a table with the Kreft name for every Vue feature.</p>
+      <p>Then <code>cd my-app</code> and <code>npm run dev</code>. Coming from Vue? The <a href={docs + '/docs'} target="_blank" rel="noopener">docs</a> have a table with the Kreft name for every Vue feature.</p>
     </section>
 
     <footer class="site-foot">
       <span>Kreft {Kreftjs.version}</span>
-      <kreft-link to="/docs">Docs</kreft-link>
+      <a href={docs + '/docs'} target="_blank" rel="noopener">Docs</a>
       <kreft-link to="/error-monitor">Error monitor</kreft-link>
     </footer>
   </div>

package/templates/errors/ErrorMonitor.kreftjs

@@ -79,6 +79,8 @@ action copyReport() {
   }
 }
 
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
+
 <view>
   <div class="error-monitor-wrapper">
     <!-- Top Navigation Bar -->
@@ -99,10 +101,10 @@ action copyReport() {
       </div>
 
       <div class="nav-meta">
-        <kreft-link to="/docs" class="nav-link-docs">
+        <a href={docs + '/docs'} class="nav-link-docs" target="_blank" rel="noopener">
           <span class="tab-icon">📖</span>
           <span>DOCS</span>
-        </kreft-link>
+        </a>
         <button class="btn-copy-report" @click={copyReport}>
           {copiedToast ? '✓ Copied' : 'Copy Report'}
         </button>
@@ -116,7 +118,7 @@ action copyReport() {
         <div class="hero-badges">
           <span class="badge-exception">{currentTitle}</span>
           <span class="badge-env">Node.js {typeof process !== 'undefined' ? process.version : 'v22.0.0'}</span>
-          <span class="badge-env">Kreft v0.0.5-beta</span>
+          <span class="badge-env">Kreft v0.0.7-beta</span>
         </div>
         <h1 class="hero-error-message">{currentMessage}</h1>
       </div>