kreftjs 0.0.15-beta → 0.0.16-beta

package/README.md

@@ -1,3 +1,5 @@
+<p align="center"><img src="assets/logo.png" alt="Kreft" width="320"></p>
+
 # Kreft
 
 **A small reactive framework with its own component language, and a full Node.js backend to go with it.**

package/bin/electron.js

@@ -3,7 +3,7 @@
  *
  * Commands:
  *   kreft electron:init     Add Electron files to an existing project (alias: kreft make:electron)
- *   kreft electron:dev      Run the app in an Electron desktop window with hot reload (alias: kreft electron)
+ *   kreft electron:dev      Run the app in an Electron desktop window only (hidden server, no browser, no URL)
  *   kreft electron:build    Build static bundle (kreft build) and package desktop installer (electron-builder)
  *
  * CLI flag:
@@ -19,10 +19,11 @@ function getProjectRoot(start = process.cwd()) {
 }
 
 const TEMPLATES = {
-  main: () => `const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron');
+  main: () => `const { app, BrowserWindow, Menu, ipcMain, dialog, shell } = require('electron');
 const path = require('path');
 const http = require('http');
 
+// Dev: the app's own server runs hidden on a private port of this computer, only this window uses it.
 const isDev = !app.isPackaged || process.env.NODE_ENV === 'development';
 const DEV_PORT = process.env.PORT || 8000;
 const DEV_URL = \`http://localhost:\${DEV_PORT}\`;
@@ -47,6 +48,25 @@ function getDevToolsConfig() {
   return { show: true, mode };
 }
 
+// Window menu (File, Edit, View…):
+//   ELECTRON_MENU=show   (default) menu bar visible
+//   ELECTRON_MENU=auto   hidden, press Alt to show it (Windows / Linux)
+//   ELECTRON_MENU=hide   no menu at all
+// Change it while running from the page:  window.kreftDesktop.setMenu('show' | 'auto' | 'hide')
+let menuMode = String(process.env.ELECTRON_MENU || 'show').toLowerCase();
+const defaultMenu = Menu.getApplicationMenu();
+function applyMenu(mode) {
+  menuMode = ['show', 'auto', 'hide'].includes(mode) ? mode : 'show';
+  Menu.setApplicationMenu(menuMode === 'hide' ? null : (Menu.getApplicationMenu() || defaultMenu));
+  if (mainWindow && process.platform !== 'darwin') {
+    mainWindow.setAutoHideMenuBar(menuMode === 'auto');
+    mainWindow.setMenuBarVisibility(menuMode === 'show');
+  }
+}
+
+// App icon: build/icon.png (512x512 or bigger). electron-builder makes .icns / .ico from it.
+const ICON = path.join(__dirname, '..', 'build', 'icon.png');
+
 let mainWindow = null;
 
 function waitForServer(url, timeout = 15000) {
@@ -76,6 +96,8 @@ async function createWindow() {
     frame: true,
     backgroundColor: '#ffffff',
     show: false,
+    icon: require('fs').existsSync(ICON) ? ICON : undefined,
+    autoHideMenuBar: menuMode === 'auto',
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       contextIsolation: true,
@@ -86,6 +108,7 @@ async function createWindow() {
   });
 
   mainWindow.once('ready-to-show', () => {
+    applyMenu(menuMode);
     mainWindow.show();
   });
 
@@ -122,12 +145,8 @@ async function createWindow() {
   const devTools = getDevToolsConfig();
 
   if (isDev) {
-    const ready = await waitForServer(DEV_URL);
-    if (ready) {
-      await mainWindow.loadURL(DEV_URL);
-    } else {
-      await mainWindow.loadURL(DEV_URL); // attempt anyway
-    }
+    await waitForServer(DEV_URL);
+    await mainWindow.loadURL(DEV_URL);
     if (devTools.show) {
       mainWindow.webContents.openDevTools({ mode: devTools.mode });
     }
@@ -174,6 +193,11 @@ ipcMain.handle('kreft:close', () => {
   if (mainWindow) mainWindow.close();
 });
 
+ipcMain.handle('kreft:menu', (_, mode) => {
+  if (mode !== undefined) applyMenu(String(mode));
+  return menuMode;
+});
+
 ipcMain.handle('kreft:devtools:open', (_, mode) => {
   if (mainWindow) mainWindow.webContents.openDevTools({ mode: mode || 'right' });
 });
@@ -232,6 +256,8 @@ const desktop = {
   minimize: () => ipcRenderer.invoke('kreft:minimize'),
   maximize: () => ipcRenderer.invoke('kreft:maximize'),
   close: () => ipcRenderer.invoke('kreft:close'),
+  getMenu: () => ipcRenderer.invoke('kreft:menu'),
+  setMenu: (mode) => ipcRenderer.invoke('kreft:menu', mode),
   openDevTools: (mode) => ipcRenderer.invoke('kreft:devtools:open', mode),
   closeDevTools: () => ipcRenderer.invoke('kreft:devtools:close'),
   toggleDevTools: () => ipcRenderer.invoke('kreft:devtools:toggle'),
@@ -287,6 +313,10 @@ function init(args = []) {
   pkg.scripts['electron'] = 'kreft electron';
   pkg.scripts['electron:dev'] = 'kreft electron:dev';
   pkg.scripts['electron:build'] = 'kreft electron:build';
+  pkg.scripts['electron:build:mac'] = 'kreft electron:build --mac';
+  pkg.scripts['electron:build:win'] = 'kreft electron:build --win';
+  pkg.scripts['electron:build:linux'] = 'kreft electron:build --linux';
+  pkg.scripts['electron:build:all'] = 'kreft electron:build --mac --win --linux';
 
   pkg.devDependencies = pkg.devDependencies || {};
   if (!pkg.devDependencies['electron']) pkg.devDependencies['electron'] = '^34.2.0';
@@ -295,13 +325,26 @@ function init(args = []) {
   pkg.build = pkg.build || {
     appId: `com.kreftjs.${(pkg.name || 'app').toLowerCase().replace(/[^a-z0-9]/g, '')}`,
     productName: pkg.name ? pkg.name.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()) : 'Kreft Desktop',
-    directories: { output: 'dist-electron' },
-    files: ['dist/**/*', 'electron/**/*', 'package.json'],
-    mac: { target: ['dmg', 'zip'], category: 'public.app-category.developer-tools' },
-    win: { target: ['nsis', 'portable'] },
-    linux: { target: ['AppImage', 'deb'] },
+    directories: { output: 'dist-electron', buildResources: 'build' },
+    files: ['dist/**/*', 'electron/**/*', 'build/icon.png', 'package.json'],
+    mac: { target: ['dmg', 'zip'], category: 'public.app-category.developer-tools', icon: 'build/icon.png' },
+    win: { target: ['nsis', 'portable'], icon: 'build/icon.png' },
+    nsis: { oneClick: false, allowToChangeInstallationDirectory: true },
+    linux: { target: ['AppImage', 'deb', 'rpm'], category: 'Utility', icon: 'build/icon.png' },
   };
 
+  // The app icon: replace build/icon.png with your own (square PNG, 512x512 or bigger)
+  const iconFile = path.join(root, 'build', 'icon.png');
+  let wroteIcon = false;
+  if (!fs.existsSync(iconFile)) {
+    const logo = path.join(__dirname, '..', 'assets', 'logo-mark.png');
+    if (fs.existsSync(logo)) {
+      fs.mkdirSync(path.dirname(iconFile), { recursive: true });
+      fs.copyFileSync(logo, iconFile);
+      wroteIcon = true;
+    }
+  }
+
   fs.writeFileSync(pkgFile, JSON.stringify(pkg, null, 2) + '\n');
 
   const droppedFonts = dropWebFonts(root);
@@ -309,7 +352,8 @@ function init(args = []) {
   console.log(`
   Electron configured for Kreft:
     CREATED  electron/main.js
-    CREATED  electron/preload.js
+    CREATED  electron/preload.js${wroteIcon ? `
+    CREATED  build/icon.png  (the app icon: replace it with your own, square PNG 512x512 or bigger)` : ''}
     UPDATED  package.json  (scripts: electron, electron:dev, electron:build)${droppedFonts ? `
     UPDATED  ${droppedFonts}  (removed the Google Fonts links: a desktop app should start without the network; the system fonts are used)` : ''}
 
@@ -398,12 +442,12 @@ function startDev(args, port) {
   if (!serverArgs.some((a) => a === '--port' || a === '-p')) serverArgs.push('--port', String(port));
 
   // 1. Start dev server child process
-  console.log(`  Starting Kreft dev server & Electron desktop window on port ${port}…`);
+  console.log('  Starting the Kreft desktop window…');
   const kreftCli = path.join(__dirname, 'kreftjs.js');
   const server = spawn(process.execPath, [kreftCli, 'dev', ...serverArgs], {
     cwd: root,
-    stdio: 'inherit',
-    env: { ...process.env, PORT: String(port), KREFT_ELECTRON: 'true' },
+    stdio: ['ignore', 'ignore', 'inherit'],
+    env: { ...process.env, PORT: String(port), KREFT_ELECTRON: 'true', BROWSER: 'none' },
   });
 
   // 2. Launch Electron after small pause
@@ -466,7 +510,7 @@ function build(args = []) {
   // 1. Build Kreft frontend for desktop with relative base
   console.log('\n  Step 1: Building Kreft static bundle with relative base (./)…');
   const kreftCli = path.join(__dirname, 'kreftjs.js');
-  const buildProc = spawn(process.execPath, [kreftCli, 'build', '--base', './', ...args], {
+  const buildProc = spawn(process.execPath, [kreftCli, 'build', '--base', './', ...args.filter((a) => !/^--(mac|win|linux|dir|x64|arm64|ia32|armv7l|universal|publish.*)$/.test(a))], {
     cwd: root,
     stdio: 'inherit',
   });

package/bin/no-auth.js

@@ -79,7 +79,7 @@ state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\\/+
 
 <view>
   <header>
-    <kreft-link to="/" class="brand"><span class="mark" aria-hidden="true"></span>{env.PUBLIC_APP_NAME || 'My app'}</kreft-link>
+    <kreft-link to="/" class="brand"><img class="mark" src="logo-mark.svg" alt="" width="22" height="22">{env.PUBLIC_APP_NAME || 'My app'}</kreft-link>
     <nav>
       <kreft-link to="/" exact-class="here">Home</kreft-link>${todos ? `
       <kreft-link to="/todos" exact-class="here">Todos</kreft-link>` : ''}
@@ -99,7 +99,7 @@ state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\\/+
 <style scoped>
 header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 var(--container-pad, 28px); background: var(--background); border-bottom: 1px solid var(--border); box-sizing: border-box; }
 .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: var(--foreground); text-decoration: none; }
-.mark { width: 16px; height: 16px; background: var(--primary); }
+.mark { width: 22px; height: 22px; }
 nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
 nav a { padding: 6px 10px; font-size: 14px; color: var(--muted); text-decoration: none; border-radius: var(--radius); }
 nav a:hover, nav a.here { color: var(--foreground); background: var(--accent); }

package/docs/README.md

@@ -82,7 +82,7 @@ npx kreftjs dev
 ### Check that it works
 
 ```bash
-kreft --version     # for example 0.0.15-beta
+kreft --version     # for example 0.0.16-beta
 kreft about         # Kreft and Node.js versions, this project's settings and drivers
 kreft list          # every command your version has
 ```
@@ -1891,7 +1891,7 @@ Kreft can package your app as a desktop application for Windows, macOS and Linux
 ```bash
 kreft new my-app --electron   # a new app with desktop support
 cd my-app && npm install
-kreft electron:dev            # dev server plus a desktop window, with hot reload
+kreft electron:dev            # a desktop window only (the server is hidden), with hot reload
 kreft electron:build          # an installer in dist-electron/
 ```
 
@@ -1906,8 +1906,8 @@ npm install                     # installs electron and electron-builder
 
 | Command | What it does |
 |---|---|
-| `kreft electron:init` | Writes `electron/main.js` and `electron/preload.js` and adds the scripts, the `electron` and `electron-builder` dev dependencies and a `build` block to `package.json`. Files that already exist are never overwritten. It also removes the Google Fonts links from `index.html`, so the app starts without a network. |
-| `kreft electron:dev` | Starts `kreft dev` and opens a window on it. Closing the window stops the server. Flags after the command go to the dev server. |
+| `kreft electron:init` | Writes `electron/main.js`, `electron/preload.js` and the app icon `build/icon.png`, and adds the scripts (including `electron:build:mac`, `:win`, `:linux` and `:all`), the `electron` and `electron-builder` dev dependencies and a `build` block to `package.json`. Files that already exist are never overwritten. It also removes the Google Fonts links from `index.html`, so the app starts without a network. |
+| `kreft electron:dev` | Opens the app in a desktop window only: no browser opens and no URL is printed. The dev server runs hidden on a private port of your computer that only the window uses (hot reload works). Closing the window stops the server. Flags after the command go to the dev server. |
 | `kreft electron:build` | Runs `kreft build --base ./`, then `electron-builder`. |
 
 `kreft electron` is the same as `kreft electron:dev`. If the `electron/` folder is missing, both commands create it first.
@@ -1994,17 +1994,49 @@ ELECTRON_DEVTOOLS=bottom kreft electron:dev
 
 In development, F12 or Ctrl+Shift+I toggles them.
 
+### The window menu
+
+Set the menu bar when you start the app:
+
+```bash
+ELECTRON_MENU=show kreft electron   # default: the menu bar is visible
+ELECTRON_MENU=auto kreft electron   # hidden, press Alt to show it (Windows and Linux)
+ELECTRON_MENU=hide kreft electron   # no menu at all
+```
+
+Or change it while the app runs, from a page:
+
+```js
+window.kreftDesktop.setMenu('hide')   // 'show' | 'auto' | 'hide'
+window.kreftDesktop.getMenu()         // the current mode
+```
+
+On macOS the menu lives in the top bar of the screen, so `show` and `auto` look the same. For your own menu (File, Edit…), call `Menu.buildFromTemplate([...])` and `Menu.setApplicationMenu(...)` in `electron/main.js`.
+
+### The app icon
+
+`kreft electron:init` copies the Kreft logo to `build/icon.png`. Replace it with your own square PNG, 512×512 or bigger. The window uses it, and electron-builder makes the `.icns` (macOS) and `.ico` (Windows) files from it. Set the app name with `build.productName` and `build.appId` in `package.json`, and add `description` and `author` there too (electron-builder warns without them).
+
 ### Packaging and installers
 
-`electron:build` writes to `dist-electron/`. The defaults in the `build` block of `package.json` are:
+```bash
+npm run electron:build:mac     # .dmg and .zip
+npm run electron:build:win     # NSIS installer and portable .exe
+npm run electron:build:linux   # AppImage, .deb and .rpm
+npm run electron:build:all     # all three
+```
+
+`electron:build` writes to `dist-electron/`. Flags go to electron-builder, for example `kreft electron:build --mac --arm64`. The defaults in the `build` block of `package.json` are:
 
 | System | Targets |
 |---|---|
-| Windows | `nsis` installer, `portable` |
+| Windows | `nsis` installer (choose the folder), `portable` |
 | macOS | `dmg`, `zip` |
-| Linux | `AppImage`, `deb` |
+| Linux | `AppImage`, `deb`, `rpm` |
+
+Edit `appId`, `productName` and the targets there. Build for each system on that system: a macOS installer needs a Mac (Windows installers from a Mac need Wine; `.rpm` needs `rpm` installed). Code signing and notarisation (macOS) or a signing certificate (Windows) are set up through electron-builder (electron.build/code-signing) and are needed before you give the app to other people; unsigned macOS apps show a Gatekeeper warning.
 
-Edit `appId`, `productName` and the targets there. Add an `icon` per system (see the electron-builder documentation). Build for each system on that system: a macOS installer needs a Mac. Code signing and notarisation (macOS) or a signing certificate (Windows) are set up through electron-builder and are needed before you give the app to other people.
+The packaged app loads the built `dist/index.html` and does not start a backend. A frontend-only app works as is; a full-stack app (login, database) does not work once installed.
 
 ### Security
 
@@ -2026,7 +2058,7 @@ Do not turn these off to make something work. Add a bridge function instead.
 | A white window in the packaged app | Run `electron:build` again; the build must use `--base ./`. Check that `dist/index.html` exists. |
 | API calls fail in the packaged app | The backend is not bundled. Set an absolute `base` for the API client (see above). |
 | The window opens before the server is ready | It waits up to 15 seconds. Check the terminal for a dev server error. |
-| Port 8000 is taken | Run with `PORT=3000 kreft electron:dev`. |
+| Port 8000 is taken | Nothing to do: the hidden server picks the next free port. |
 
 ## Packages
 

package/kreftjs.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for Kreft 0.0.15-beta
+// Type definitions for Kreft 0.0.16-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.15-beta — reactive by nature
+ * Kreft v0.0.16-beta — reactive by nature
  * The .kreft 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.
@@ -5036,7 +5036,7 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.15-beta';
+  const VERSION = '0.0.16-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.15-beta",
+  "version": "0.0.16-beta",
   "description": "A tiny reactive framework with its own component language (.kreft 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",
@@ -14,7 +14,7 @@
     "start": "node bin/kreftjs.js dev --api demo/db.json --db sqlite:demo/database/demo.db --migrations demo/database/migrations --server demo/server --backend demo --seed",
     "build": "node bin/kreftjs.js build demo --out dist/demo --include docs",
     "preview": "node bin/kreftjs.js dev dist --api demo/db.json --db sqlite:demo/database/demo.db --migrations demo/database/migrations --server demo/server --backend demo --seed",
-    "test": "node --test test/security.test.js test/prerender.test.js test/seo.test.js test/rebrand.test.js test/noauth.test.js test/winspawn.test.js test/htaccess.test.js test/cookie-secure.test.js test/password-rule.test.js test/headline.test.js",
+    "test": "node --test test/security.test.js test/prerender.test.js test/seo.test.js test/rebrand.test.js test/noauth.test.js test/winspawn.test.js test/htaccess.test.js test/cookie-secure.test.js test/password-rule.test.js test/headline.test.js test/menu.test.js",
     "electron": "kreftjs electron",
     "electron:dev": "kreftjs electron:dev",
     "electron:build": "kreftjs electron:build"
@@ -29,6 +29,7 @@
     "editors/",
     "templates/",
     "docs/",
+    "assets/logo.png",
     "README.md"
   ],
   "keywords": [

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

@@ -92,7 +92,7 @@ state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$
         <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.15-beta'}</span>
+          <span class="badge">Kreft {Kreftjs.version || '0.0.16-beta'}</span>
         </div>
         <div class="actions">
           <button class="sm" @click={copyReport}>{copied ? 'Copied Markdown' : 'Copy Report'}</button>
@@ -189,7 +189,7 @@ state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$
         <h3>Kreft Runtime</h3>
         <table>
           <tbody>
-            <tr><th>Engine</th><td><code>Kreft v{Kreftjs.version || '0.0.15-beta'}</code></td></tr>
+            <tr><th>Engine</th><td><code>Kreft v{Kreftjs.version || '0.0.16-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/index.html

@@ -6,6 +6,7 @@
   <!-- where the app lives: routes and .kreft paths start here -->
   <base href="/">
   <title>My Kreft app</title>
+  <link rel="icon" type="image/svg+xml" href="logo-mark.svg">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Geist:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&display=swap">

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

@@ -1,4 +1,4 @@
-// Type definitions for Kreft 0.0.15-beta
+// Type definitions for Kreft 0.0.16-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.15-beta — reactive by nature
+ * Kreft v0.0.16-beta — reactive by nature
  * The .kreft 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.
@@ -5036,7 +5036,7 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.15-beta';
+  const VERSION = '0.0.16-beta';
   const Kreftjs = {
     version: VERSION,
     // PUBLIC_ values from .env (kreft dev and kreft build put them here); never secrets

package/templates/app/frontend/layouts/docs.kreft

@@ -3,7 +3,7 @@
      assumes a bar this tall (60px) above it. -->
 <view>
   <header>
-    <kreft-link to="/" class="brand"><span class="mark" aria-hidden="true"></span>{env.PUBLIC_APP_NAME || 'My app'}</kreft-link>
+    <kreft-link to="/" class="brand"><img class="mark" src="logo-mark.svg" alt="" width="22" height="22">{env.PUBLIC_APP_NAME || 'My app'}</kreft-link>
     <span class="label">Documentation</span>
     <nav>
       <kreft-link to={$store.auth.user ? '/dashboard' : '/'} class="back">← {$store.auth.user ? 'Back to the app' : 'Home'}</kreft-link>
@@ -21,7 +21,7 @@
 <style scoped>
 header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 var(--container-pad, 28px); background: var(--background); border-bottom: 1px solid var(--border); box-sizing: border-box; }
 .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: var(--foreground); text-decoration: none; }
-.mark { width: 16px; height: 16px; background: var(--primary); }
+.mark { width: 22px; height: 22px; }
 .label { padding-inline-start: 14px; border-inline-start: 1px solid var(--border); font-size: 14px; color: var(--muted); }
 nav { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
 .back { padding: 6px 10px; font-size: 14px; color: var(--muted); text-decoration: none; border-radius: var(--radius); }

package/templates/app/frontend/layouts/guest.kreft

@@ -2,7 +2,7 @@
      The routes in index.html ask for it with layout: 'guest'. -->
 <view>
   <main>
-    <kreft-link to="/" class="brand"><span class="mark" aria-hidden="true"></span>{env.PUBLIC_APP_NAME || 'My app'}</kreft-link>
+    <kreft-link to="/" class="brand"><img class="mark" src="logo-mark.svg" alt="" width="22" height="22">{env.PUBLIC_APP_NAME || 'My app'}</kreft-link>
     <div class="box">
       <slot></slot>
     </div>
@@ -12,7 +12,7 @@
 <style scoped>
 main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 72px 16px 48px; background: var(--accent); }
 .brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: var(--foreground); text-decoration: none; }
-.mark { width: 16px; height: 16px; background: var(--primary); }
+.mark { width: 22px; height: 22px; }
 .box { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--border); padding: 32px; }
 @media (max-width: 480px) { main { padding-top: 40px; } .box { padding: 24px 20px; } }
 </style>

package/templates/app/frontend/logo-mark.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="640" height="640" role="img" aria-label="Kreft">
+  <defs>
+    <linearGradient id="kreft-o" gradientUnits="userSpaceOnUse" x1="510" y1="617" x2="1005" y2="192">
+      <stop offset="0" stop-color="#fb5f02"/>
+      <stop offset="1" stop-color="#ffac00"/>
+    </linearGradient>
+    <linearGradient id="kreft-s" gradientUnits="userSpaceOnUse" x1="700" y1="500" x2="830" y2="520">
+      <stop offset="0" stop-color="#c42b00"/>
+      <stop offset="1" stop-color="#c42b00" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <rect width="640" height="640" rx="140" fill="#fff"/>
+  <g transform="translate(320 320) scale(0.86) translate(-751.5 -403)">
+    <!-- the stem -->
+    <path d="M498 300 Q498 280 515 268 L620 190 Q632 186 636 198 L636 375 L525 480 Q510 495 508 512 L508 612 Q508 618 500 618 L498 606 Z" fill="#2b2b2b"/>
+    <!-- the lower arm -->
+    <path d="M790 410 L998 608 Q1002 614 994 617 L800 617 Q790 617 780 608 L685 515 Z" fill="url(#kreft-o)"/>
+    <path d="M685 515 L790 410 L860 478 L770 548 Z" fill="url(#kreft-s)"/>
+    <!-- the big diagonal band -->
+    <path d="M808 203 Q820 192 838 192 L996 192 Q1008 193 1003 204 L685 515 L592 607 Q584 617 570 617 L512 617 Q508 617 508 610 L508 512 Q510 495 525 480 Z" fill="url(#kreft-o)"/>
+  </g>
+</svg>

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

@@ -112,7 +112,7 @@ state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$
         <div class="info-list">
           <div class="info-item">
             <span class="info-label">Framework Engine</span>
-            <span class="info-value">Kreft {Kreftjs.version || '0.0.15-beta'}</span>
+            <span class="info-value">Kreft {Kreftjs.version || '0.0.16-beta'}</span>
           </div>
           <div class="info-item">
             <span class="info-label">Active Database</span>

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

@@ -64,7 +64,7 @@ action copy() {
 
     <!-- Top bar -->
     <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>
+      <kreft-link to="/" class="site-brand"><img class="site-mark" src="logo-mark.svg" alt="" width="22" height="22">{env.PUBLIC_APP_NAME || 'Kreft'}</kreft-link>
       <nav class="site-nav">
         <a href={docs + '/docs'} target="_blank" rel="noopener">Documentation</a>
         <kreft-link k-if="$store.auth.user" to="/dashboard">Dashboard</kreft-link>
@@ -242,7 +242,7 @@ action copy() {
 /* Top bar and footer (this page has no layout) */
 .site-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; height: 64px; }
 .site-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: var(--foreground); text-decoration: none; }
-.site-mark { width: 16px; height: 16px; background: var(--primary); }
+.site-mark { width: 22px; height: 22px; }
 .site-nav { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
 .site-nav a { padding: 6px 12px; font-size: 14px; color: var(--muted); text-decoration: none; border-radius: var(--radius); }
 .site-nav a:hover { color: var(--foreground); background: var(--accent); }

package/templates/errors/ErrorMonitor.kreft

@@ -118,7 +118,7 @@ state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$
         <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.15-beta</span>
+          <span class="badge-env">Kreft v0.0.16-beta</span>
         </div>
         <h1 class="hero-error-message">{currentMessage}</h1>
       </div>