kreftjs 0.0.22-beta → 0.0.23-beta.1

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 --pwa            also write manifest.webmanifest + sw.js (installable, works offline)
  *   kreft build --no-htaccess    do not write dist/.htaccess (the Apache / Hostinger page-address rules)
  *
  * What it does:
@@ -34,11 +35,12 @@ const SERVER_DIRS = new Set();
 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, htaccess = true, minify = true;
+  let pwa = false, folder = null, out = null, base = null, prerender = null, urlsFile = null, htaccess = true, minify = 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] === '--pwa') pwa = true; // manifest + service worker: installable and works offline
     else if (args[i] === '--no-htaccess') htaccess = false;
     else if (args[i] === '--no-minify') minify = false; // keep kreftjs.js readable (for debugging)
     else if (args[i] === '--include') include.push(args[++i]); // another folder to copy in, like the docs
@@ -241,6 +243,7 @@ ${indent(components.join('\n\n'))}
   }
   write(dist, 'index.html', html);
   addCacheBusters(dist);
+  if (pwa) require('./pwa.js').apply(dist, root, { project });
   if (htaccess) writeHtaccess(dist, html);
 
   const report = () => {

package/bin/home-variants.js

@@ -0,0 +1,278 @@
+/*
+ * Home pages made for apps, not for the web:
+ *
+ *   kreft new my-app --mobile      the home page is a phone screen: top bar, cards, big touch targets, bottom tab bar
+ *   kreft new my-app --electron    the home page is a desktop workspace: sidebar, toolbar, cards, shortcuts
+ *   kreft make:home --mobile | --desktop     (re)write them in an existing project (replaces pages/Home.kreft)
+ *
+ * Both together: pages/Home.kreft shows the desktop one inside the Electron window and the phone one everywhere else.
+ * Add ?platform=mobile or ?platform=desktop to the address to preview either in a normal browser.
+ *
+ * The generated files are plain .kreft files in the project: change them freely.
+ */
+const fs = require('fs');
+const path = require('path');
+
+// what the project has: no-auth projects have no dashboard, users or profile pages
+function features(front) {
+  const has = (f) => fs.existsSync(path.join(front, f));
+  return { dashboard: has('pages/Dashboard.kreft'), users: has('pages/Users.kreft'), profile: has('pages/Profile.kreft'), docs: has('docs/Docs.kreft'), auth: has('pages/auth') };
+}
+
+const js = (v) => JSON.stringify(v).replace(/</g, '\\u003c');
+
+function mobileSource(f) {
+  const tiles = [
+    f.dashboard && { icon: '▦', label: 'Dashboard', to: '/dashboard' },
+    f.users && { icon: '☺', label: 'Users', to: '/users' },
+    f.profile && { icon: '⚙', label: 'Profile', to: '/profile' },
+    f.docs && { icon: '☰', label: 'Docs', to: '/docs' },
+    { icon: '!', label: 'Errors', to: '/error-monitor' },
+  ].filter(Boolean);
+  const tabs = [{ icon: '⌂', label: 'Home', to: '/' }, ...tiles.filter((t) => t.to !== '/error-monitor').slice(0, 3)];
+  return `<!-- The home page of the phone app: a top bar, cards and a bottom tab bar, all sized for a thumb.
+     @tap, @swipeleft and @longpress are Kreft's touch events. Add ?platform=mobile in a browser to preview it. -->
+
+state app = Kreftjs.env.PUBLIC_APP_NAME || 'My app'
+state tiles = ${js(tiles)}
+state tabs = ${js(tabs)}
+state taps = 0
+state note = 'Tap the card. Swipe left to reset. Hold to double.'
+
+action hit() { taps++; note = 'Tapped ' + taps + (taps === 1 ? ' time' : ' times') }
+action reset() { taps = 0; note = 'Reset by swipe' }
+action boost() { taps = taps * 2; note = 'Doubled by long press' }
+
+<view>
+  <div class="phone">
+    <header class="bar">
+      <img src="logo-mark.svg" alt="" width="28" height="28">
+      <h1>{app}</h1>
+    </header>
+
+    <main>
+      <section class="hello">
+        <p class="small">Welcome back</p>
+        <h2>What do you want to do?</h2>
+      </section>
+
+      <section class="grid" aria-label="Shortcuts">
+        <kreft-link k-for="t in tiles" to={t.to} class="tile">
+          <span class="ico" aria-hidden="true">{t.icon}</span>
+          <span class="lbl">{t.label}</span>
+        </kreft-link>
+      </section>
+
+      <section class="card try" @tap={hit} @swipeleft={reset} @longpress={boost}>
+        <p class="small">Touch events</p>
+        <p class="count">{taps}</p>
+        <p class="note">{note}</p>
+      </section>
+
+      <section class="card">
+        <p class="small">This app</p>
+        <p>One Kreft codebase: the website, the phone app and the desktop app.</p>
+      </section>
+    </main>
+
+    <nav class="tabs" aria-label="Main">
+      <kreft-link k-for="t in tabs" to={t.to} class="tab" active-class="on" exact-active-class="on">
+        <span class="ico" aria-hidden="true">{t.icon}</span>
+        <span class="lbl">{t.label}</span>
+      </kreft-link>
+    </nav>
+  </div>
+</view>
+
+<style scoped>
+.phone { min-height: 100vh; display: flex; flex-direction: column; background: var(--accent); }
+.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--background); border-bottom: 1px solid var(--border); }
+.bar h1 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
+main { flex: 1; padding: 16px 16px 96px; display: flex; flex-direction: column; gap: 16px; }
+.small { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
+.hello h2 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -0.03em; }
+.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
+.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 104px; padding: 16px; background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; color: var(--foreground); text-decoration: none; }
+.tile:active { background: var(--accent-strong); }
+.tile .ico { font-size: 26px; line-height: 1; }
+.tile .lbl { font-weight: 600; font-size: 16px; }
+.card { padding: 18px; background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; }
+.card p:last-child { margin-bottom: 0; }
+.try { user-select: none; -webkit-user-select: none; text-align: center; }
+.try:active { background: var(--accent-strong); }
+.count { margin: 4px 0; font-size: 56px; font-weight: 700; letter-spacing: -0.04em; }
+.note { margin: 0; color: var(--muted); font-size: 14px; }
+.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--background); border-top: 1px solid var(--border); }
+.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; min-height: 48px; color: var(--muted); text-decoration: none; font-size: 12px; border-radius: 12px; }
+.tab .ico { font-size: 22px; line-height: 1.1; }
+.tab.on { color: var(--foreground); font-weight: 700; }
+@media (min-width: 700px) { .phone { max-width: 520px; margin: 0 auto; border-inline: 1px solid var(--border); } .tabs { max-width: 520px; margin: 0 auto; } }
+</style>
+`;
+}
+
+function desktopSource(f) {
+  const nav = [
+    { label: 'Home', to: '/' },
+    f.dashboard && { label: 'Dashboard', to: '/dashboard' },
+    f.users && { label: 'Users', to: '/users' },
+    f.profile && { label: 'Profile', to: '/profile' },
+    f.docs && { label: 'Docs', to: '/docs' },
+    { label: 'Error monitor', to: '/error-monitor' },
+  ].filter(Boolean);
+  return `<!-- The home page of the desktop app: a sidebar, a toolbar and a workspace, like a real desktop program.
+     Inside the Electron window window.kreftDesktop gives the app name, version and system.
+     Add ?platform=desktop in a browser to preview it. -->
+
+state app = Kreftjs.env.PUBLIC_APP_NAME || 'My app'
+state nav = ${js(nav)}
+state query = ''
+state info = { name: app, version: '', platform: 'browser' }
+state shortcuts = [
+  { keys: 'F12', does: 'Open or close the developer tools' },
+  { keys: 'Ctrl / ⌘ + R', does: 'Reload the window' },
+  { keys: 'Ctrl / ⌘ + +  /  −', does: 'Zoom in and out' },
+  { keys: 'F11', does: 'Full screen' },
+]
+derive shown = nav.filter((n) => n.label.toLowerCase().includes(query.trim().toLowerCase()))
+
+on ready {
+  if (window.kreftDesktop && window.kreftDesktop.getInfo) {
+    window.kreftDesktop.getInfo().then((i) => { info = { name: i.name, version: i.version, platform: i.platform + ' ' + i.arch } }).catch(() => {})
+  }
+}
+
+<view>
+  <div class="shell">
+    <aside class="side">
+      <div class="brand"><img src="logo-mark.svg" alt="" width="22" height="22"><span>{app}</span></div>
+      <nav aria-label="Main">
+        <kreft-link k-for="n in nav" to={n.to} class="item" active-class="on" exact-active-class="on">{n.label}</kreft-link>
+      </nav>
+      <p class="foot">{info.name} {info.version}<br>{info.platform}</p>
+    </aside>
+
+    <section class="work">
+      <header class="toolbar">
+        <h1>Home</h1>
+        <input type="search" placeholder="Search pages…" k-model="query" aria-label="Search pages">
+      </header>
+
+      <div class="content">
+        <div class="cards">
+          <article class="card"><p class="small">Application</p><p class="big">{info.name}</p></article>
+          <article class="card"><p class="small">Version</p><p class="big">{info.version || 'dev'}</p></article>
+          <article class="card"><p class="small">System</p><p class="big">{info.platform}</p></article>
+        </div>
+
+        <h2>Open</h2>
+        <div class="list">
+          <kreft-link k-for="n in shown" to={n.to} class="row"><span>{n.label}</span><span class="arrow">→</span></kreft-link>
+          <p k-if="shown.length === 0" class="empty">No page matches “{query}”.</p>
+        </div>
+
+        <h2>Shortcuts</h2>
+        <table class="keys">
+          <tr k-for="s in shortcuts"><td><kbd>{s.keys}</kbd></td><td>{s.does}</td></tr>
+        </table>
+      </div>
+    </section>
+  </div>
+</view>
+
+<style scoped>
+.shell { display: grid; grid-template-columns: 232px 1fr; height: 100vh; background: var(--background); color: var(--foreground); }
+.side { display: flex; flex-direction: column; gap: 8px; padding: 16px 12px; background: var(--accent); border-right: 1px solid var(--border); overflow: auto; }
+.brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 12px; font-weight: 700; letter-spacing: -0.02em; }
+.item { display: block; padding: 8px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 14px; }
+.item:hover { background: var(--accent-strong); color: var(--foreground); }
+.item.on { background: var(--accent-strong); color: var(--foreground); font-weight: 600; }
+.foot { margin: auto 0 0; padding: 8px; font-size: 12px; color: var(--muted); }
+.work { display: flex; flex-direction: column; min-width: 0; }
+.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--border); }
+.toolbar h1 { margin: 0; font-size: 18px; }
+.toolbar input { width: 260px; max-width: 50%; }
+.content { padding: 24px; overflow: auto; }
+.content h2 { margin: 28px 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
+.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
+.card { padding: 16px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); }
+.small { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
+.big { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
+.list { border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; }
+.row { display: flex; justify-content: space-between; padding: 12px 16px; color: var(--foreground); text-decoration: none; border-bottom: 1px solid var(--border-subtle); }
+.row:last-child { border-bottom: 0; }
+.row:hover { background: var(--accent); }
+.arrow { color: var(--muted); }
+.empty { margin: 0; padding: 12px 16px; color: var(--muted); }
+.keys { border-collapse: collapse; }
+.keys td { padding: 6px 24px 6px 0; font-size: 14px; }
+kbd { padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--accent); font-size: 12px; }
+@media (max-width: 720px) { .shell { grid-template-columns: 1fr; height: auto; } .side { border-right: 0; border-bottom: 1px solid var(--border); } }
+</style>
+`;
+}
+
+// pages/Home.kreft: the platform switch when both exist, otherwise the one that exists
+function homeSource(mobile, desktop) {
+  if (mobile && desktop) {
+    return `<!-- The home page: the desktop workspace inside the Electron window, the phone screen everywhere else.
+     Preview in a browser with ?platform=desktop or ?platform=mobile. -->
+state desktop = (function () {
+  const asked = new URLSearchParams(location.search).get('platform')
+  if (asked) return asked === 'desktop'
+  return Boolean(window.kreftDesktop || window.__KREFT_ELECTRON__)
+})()
+
+<view>
+  <home-desktop k-if="desktop"></home-desktop>
+  <home-mobile k-else></home-mobile>
+</view>
+`;
+  }
+  return `<!-- The home page of the ${mobile ? 'phone' : 'desktop'} app. Its design is in components/${mobile ? 'HomeMobile' : 'HomeDesktop'}.kreft -->
+<view>
+  <home-${mobile ? 'mobile' : 'desktop'}></home-${mobile ? 'mobile' : 'desktop'}>
+</view>
+`;
+}
+
+// index.html lists every component: .component('Field', 'components/Field.kreft')
+function register(front, names) {
+  const file = path.join(front, 'index.html');
+  if (!fs.existsSync(file)) return;
+  let html = fs.readFileSync(file, 'utf8');
+  const add = names.filter((n) => !html.includes(`.component('${n}'`));
+  if (!add.length) return;
+  const lines = add.map((n) => `.component('${n}', 'components/${n}.kreft')`);
+  const m = html.match(/^([ \t]*)\.component\(/m) || html.match(/^([ \t]*)\.use\(router\)/m);
+  if (!m) { console.warn('  Could not find where components are listed in index.html. Add: ' + lines.join(' ')); return; }
+  const indent = m[1];
+  html = html.replace(m[0], lines.map((l) => indent + l + '\n').join('') + m[0]);
+  fs.writeFileSync(file, html);
+}
+
+// existing: what a project that already had one of them keeps when the other is added
+function apply(target, { mobile = false, desktop = false } = {}) {
+  const lay = require('./layout.js').layout(target);
+  const front = lay.frontend;
+  const f = features(front);
+  fs.mkdirSync(path.join(front, 'components'), { recursive: true });
+  fs.mkdirSync(path.join(front, 'pages'), { recursive: true });
+  const has = (n) => fs.existsSync(path.join(front, 'components', n));
+  const wantMobile = mobile || has('HomeMobile.kreft');
+  const wantDesktop = desktop || has('HomeDesktop.kreft');
+  if (mobile) fs.writeFileSync(path.join(front, 'components', 'HomeMobile.kreft'), mobileSource(f));
+  if (desktop) fs.writeFileSync(path.join(front, 'components', 'HomeDesktop.kreft'), desktopSource(f));
+  fs.writeFileSync(path.join(front, 'pages', 'Home.kreft'), homeSource(wantMobile, wantDesktop));
+  register(front, [wantMobile && 'HomeMobile', wantDesktop && 'HomeDesktop'].filter(Boolean));
+  return { mobile: wantMobile, desktop: wantDesktop };
+}
+
+function make(args = []) {
+  const mobile = args.includes('--mobile'), desktop = args.includes('--desktop') || args.includes('--electron');
+  if (!mobile && !desktop) { console.error('  Use kreft make:home --mobile or --desktop (or both).'); process.exit(1); }
+  const r = apply(process.cwd(), { mobile, desktop });
+  console.log(`  Wrote the ${[r.mobile && 'phone', r.desktop && 'desktop'].filter(Boolean).join(' and ')} home page (pages/Home.kreft and components/).`);
+}
+
+module.exports = { apply, make, mobileSource, desktopSource, homeSource, features };

package/bin/kreftjs.js

@@ -48,6 +48,13 @@ const commands = {
   'electron:init': (a) => require('./electron.js').init(a),
   'electron:help': () => require('./electron.js').help(),
   'make:electron': (a) => require('./electron.js').init(a),
+  'make:home': (a) => require('./home-variants.js').make(a),
+  'mobile:init': (a) => require('./mobile.js').init(a[0]),
+  'mobile:build': (a) => require('./mobile.js').build(a),
+  'mobile:open': (a) => require('./mobile.js').open(a),
+  'mobile:dev': (a) => require('./mobile.js').dev(a),
+  'mobile:help': () => require('./mobile.js').help(),
+  'make:mobile': (a) => require('./mobile.js').init(a[0]),
   vite: (a) => require('./vite.js').dev(a),
   'vite:dev': (a) => require('./vite.js').dev(a),
   'vite:build': (a) => require('./vite.js').build(a),
@@ -91,6 +98,7 @@ function help() {
         --ts                …use TypeScript across frontend (.kreft, .ts) and backend (.ts)
         --js                …use JavaScript (default when non-interactive)
         --electron          …with Electron desktop app support (main.js, preload.js, packaging)
+        --mobile            …with iOS / Android support (Capacitor)
         --vite              …with Vite.js bundling & instant HMR (vite.config.js, npm run vite)
     kreft dev [folder]      Start the dev server (default: this folder)
         --port <number>     Port to use (default: 8000, or the next free one)
@@ -121,6 +129,8 @@ function help() {
     kreft electron          Open the app in a desktop window only: no browser, no URL (alias: kreft electron:dev)
     kreft electron:build    Build and make installers (--mac, --win, --linux; or npm run electron:build:all)
     kreft electron:init     Add Electron support to an existing project (alias: kreft make:electron)
+    kreft make:home         Write an app-style home page: --mobile (phone screen) or --desktop (sidebar workspace)
+    kreft mobile:build      Build for iOS / Android with Capacitor (--android, --ios, --api-url; see kreft mobile:help)
     kreft electron:help     Everything about desktop apps: menu, icon, installers, errors
 
   The backend (kreft list shows every command, yours too):
@@ -196,11 +206,12 @@ function unknown() {
 
 /* ------------------------------------------------------------------ kreft new */
 async function createProject(args) {
-  let name = null, dbKind = null, ui = null, ts = false, langChosen = false, electron = false, vite = false, redis = false, auth = true, authChosen = false;
+  let name = null, dbKind = null, ui = null, ts = false, langChosen = false, electron = false, mobile = false, vite = false, redis = false, auth = true, authChosen = false;
   for (let i = 0; i < args.length; i++) {
     if (args[i] === '--ts' || args[i] === '--typescript') { ts = true; langChosen = true; }
     else if (args[i] === '--js' || args[i] === '--javascript') { ts = false; langChosen = true; }
     else if (args[i] === '--electron' || args[i] === '--desktop') electron = true;
+    else if (args[i] === '--mobile') mobile = true;
     else if (args[i] === '--vite') vite = true;
     else if (args[i] === '--auth') { auth = true; authChosen = true; }
     else if (args[i] === '--no-auth') { auth = false; authChosen = true; }
@@ -295,6 +306,8 @@ async function createProject(args) {
   }
   fs.writeFileSync(path.join(target, 'package.json'), JSON.stringify(projectPkg, null, 2) + '\n');
   if (electron) require('./electron.js').init(target);
+  if (mobile) require('./mobile.js').init(target);
+  if (mobile || electron) require('./home-variants.js').apply(target, { mobile, desktop: electron }); // a home page made for the app, not the web
   if (vite) require('./vite.js').init(target, { ts });
 
   console.log(`

package/bin/mobile.js

@@ -0,0 +1,176 @@
+/*
+ * Mobile apps (iOS and Android) for Kreft, with Capacitor.
+ *
+ *   kreft mobile:init            add Capacitor to this project (capacitor.config.json, package.json entries)
+ *   kreft mobile:build [--android|--ios] [--api-url https://…]
+ *                                build the site (relative base, PWA files), then `cap add` (first time) and `cap sync`
+ *   kreft mobile:open [--android|--ios]    open Android Studio or Xcode
+ *   kreft mobile:dev [--android|--ios]     run on a device or emulator with the dev server (live reload)
+ *   kreft mobile:help
+ *
+ * The backend does not run inside the phone: --api-url sets the server the app talks to (written to .env
+ * as PUBLIC_API_URL before the build). In the app: Kreftjs.api.setup({ base: Kreftjs.env.PUBLIC_API_URL, token: … }).
+ */
+const fs = require('fs');
+const path = require('path');
+const { start: spawn } = require('./win-spawn.js');
+
+const CAP = '^7.0.0';
+
+function projectRoot(start = process.cwd()) {
+  const lay = require('./layout.js').layout(start);
+  return lay.split ? lay.project : start;
+}
+
+function readPkg(root) {
+  try { return JSON.parse(fs.readFileSync(path.join(root, 'package.json'), 'utf8')); } catch (_) { return null; }
+}
+
+// an app id like com.example.myapp, from the package name
+function appId(name) {
+  const slug = String(name || 'app').replace(/^@[^/]+\//, '').toLowerCase().replace(/[^a-z0-9]+/g, '');
+  return 'com.example.' + (/^[a-z]/.test(slug) ? slug : 'app' + slug);
+}
+
+function configFor(root) {
+  const pkg = readPkg(root) || {};
+  const name = pkg.productName || pkg.name || path.basename(root);
+  return {
+    appId: appId(pkg.name || name),
+    appName: String(name),
+    webDir: 'dist',
+    server: { androidScheme: 'https' },
+    android: { adjustMarginsForEdgeToEdge: 'force' }, // Android 15+ draws apps under the status bar: keep the page below it
+  };
+}
+
+function init(target) {
+  const root = typeof target === 'string' ? target : projectRoot();
+  const cfgFile = path.join(root, 'capacitor.config.json');
+  if (!fs.existsSync(cfgFile)) {
+    fs.writeFileSync(cfgFile, JSON.stringify(configFor(root), null, 2) + '\n');
+    console.log('  Wrote capacitor.config.json');
+  }
+  const pkgFile = path.join(root, 'package.json');
+  const pkg = readPkg(root);
+  if (pkg) {
+    pkg.dependencies = { ...pkg.dependencies };
+    pkg.devDependencies = { ...pkg.devDependencies };
+    pkg.scripts = { ...pkg.scripts };
+    let changed = false;
+    const need = (obj, k, v) => { if (!obj[k]) { obj[k] = v; changed = true; } };
+    need(pkg.dependencies, '@capacitor/core', CAP);
+    need(pkg.dependencies, '@capacitor/android', CAP);
+    need(pkg.dependencies, '@capacitor/ios', CAP);
+    need(pkg.devDependencies, '@capacitor/cli', CAP);
+    need(pkg.scripts, 'mobile:build', 'kreft mobile:build');
+    need(pkg.scripts, 'mobile:android', 'kreft mobile:build --android');
+    need(pkg.scripts, 'mobile:ios', 'kreft mobile:build --ios');
+    if (changed) { fs.writeFileSync(pkgFile, JSON.stringify(pkg, null, 2) + '\n'); console.log('  Added Capacitor to package.json. Run:  npm install'); }
+  }
+  const ignore = path.join(root, '.gitignore');
+  if (fs.existsSync(ignore)) {
+    const txt = fs.readFileSync(ignore, 'utf8');
+    const add = ['android/app/build', 'ios/App/Pods', 'ios/App/build'].filter((l) => !txt.includes(l));
+    if (add.length) fs.appendFileSync(ignore, (txt.endsWith('\n') ? '' : '\n') + add.join('\n') + '\n');
+  }
+  console.log('\n  Mobile support is ready. Next:\n    npm install\n    kreft mobile:build --android --api-url https://your-server.example\n');
+}
+
+function platforms(args) {
+  const p = ['android', 'ios'].filter((x) => args.includes('--' + x));
+  return p;
+}
+
+function setApiUrl(root, url) {
+  if (!/^https?:\/\/[^\s]+$/i.test(url)) { console.error('  --api-url must be a full address, like https://api.example.com'); process.exit(1); }
+  const file = path.join(root, '.env');
+  let txt = fs.existsSync(file) ? fs.readFileSync(file, 'utf8') : '';
+  const line = 'PUBLIC_API_URL=' + url;
+  txt = /^PUBLIC_API_URL=.*$/m.test(txt) ? txt.replace(/^PUBLIC_API_URL=.*$/m, line) : txt + (txt && !txt.endsWith('\n') ? '\n' : '') + line + '\n';
+  fs.writeFileSync(file, txt);
+  console.log('  PUBLIC_API_URL=' + url + ' (in .env)');
+}
+
+function run(cmd, args, cwd) {
+  return new Promise((resolve) => {
+    const p = spawn(cmd, args, { cwd, stdio: 'inherit' });
+    p.on('error', (e) => { console.error('  Could not run ' + cmd + ': ' + e.message); resolve(1); });
+    p.on('exit', (c) => resolve(c || 0));
+  });
+}
+
+function capBin(root) {
+  const bin = path.join(root, 'node_modules', '.bin', process.platform === 'win32' ? 'cap.cmd' : 'cap');
+  return fs.existsSync(bin) ? bin : null;
+}
+
+async function build(args = []) {
+  const root = projectRoot();
+  if (!fs.existsSync(path.join(root, 'capacitor.config.json'))) { console.log('  Capacitor is not set up yet. Initializing…'); init(root); }
+  const i = args.indexOf('--api-url');
+  if (i >= 0) setApiUrl(root, args[i + 1] || '');
+  const plats = platforms(args);
+
+  console.log('\n  Step 1: Building the site (relative base, PWA files)…');
+  const kreftCli = path.join(__dirname, 'kreftjs.js');
+  const code = await run(process.execPath, [kreftCli, 'build', '--base', './', '--pwa', '--no-htaccess'], root);
+  if (code) { console.error('  Build failed with code ' + code); process.exit(code); }
+
+  const cap = capBin(root);
+  if (!cap) { console.error('\n  Capacitor is not installed. Run:  npm install\n'); process.exit(1); }
+  for (const p of plats.length ? plats : ['android', 'ios']) {
+    if (!plats.length && !fs.existsSync(path.join(root, p))) continue; // no flag: sync only the platforms that exist
+    if (!fs.existsSync(path.join(root, p))) {
+      console.log(`\n  Adding ${p}…`);
+      const c = await run(cap, ['add', p], root);
+      if (c) process.exit(c);
+    }
+  }
+  console.log('\n  Step 2: Copying the build into the native projects…');
+  const c = await run(cap, ['sync', ...plats], root);
+  if (c) process.exit(c);
+  console.log('\n  Done. Open the native project:  kreft mobile:open --android   (or --ios)\n');
+}
+
+async function open(args = []) {
+  const root = projectRoot();
+  const cap = capBin(root);
+  if (!cap) { console.error('\n  Capacitor is not installed. Run:  npm install\n'); process.exit(1); }
+  process.exit(await run(cap, ['open', platforms(args)[0] || 'android'], root));
+}
+
+async function dev(args = []) {
+  const root = projectRoot();
+  const cap = capBin(root);
+  if (!cap) { console.error('\n  Capacitor is not installed. Run:  npm install\n'); process.exit(1); }
+  const plat = platforms(args)[0] || 'android';
+  const port = process.env.PORT || '8000';
+  const ip = Object.values(require('os').networkInterfaces()).flat().find((n) => n && n.family === 'IPv4' && !n.internal);
+  const url = `http://${ip ? ip.address : 'localhost'}:${port}`;
+  console.log(`  Dev server: ${url}  (the phone must be on the same network)`);
+  const server = spawn(process.execPath, [path.join(__dirname, 'kreftjs.js'), 'dev'], { cwd: root, stdio: 'inherit', env: { ...process.env, PORT: port, HOST: '0.0.0.0' } });
+  const stop = () => { try { server.kill('SIGTERM'); } catch (_) {} process.exit(0); };
+  process.on('SIGINT', stop); process.on('SIGTERM', stop);
+  const c = await run(cap, ['run', plat, '--live-reload', '--host', ip ? ip.address : 'localhost', '--port', port], root);
+  try { server.kill('SIGTERM'); } catch (_) {}
+  process.exit(c);
+}
+
+function help() {
+  console.log(`
+  Mobile apps (iOS and Android) with Capacitor
+
+    kreft new my-app --mobile          a new project with mobile support
+    kreft mobile:init                  add Capacitor to this project
+    kreft mobile:build --android       build the site and sync it into android/   (--ios for iOS; no flag: both that exist)
+    kreft mobile:build --api-url https://api.example.com
+                                       the address of your server (the backend does not run inside the phone)
+    kreft mobile:open --android        open Android Studio (--ios: Xcode)
+    kreft mobile:dev --android         run on a device or emulator with live reload
+
+  Also: kreft build --pwa makes a normal website installable and usable offline (manifest.webmanifest + sw.js).
+`);
+}
+
+module.exports = { init, build, open, dev, help, appId, configFor };

package/bin/pwa.js

@@ -0,0 +1,76 @@
+/*
+ * PWA output for `kreft build --pwa` (also used by the mobile commands):
+ *   manifest.webmanifest  name, colours, icon, start_url
+ *   sw.js                 offline shell: pages and files are cached after the first visit; /api/ is never cached
+ *   pwa-register.js       registers sw.js (a file, not inline code, so it works under a strict CSP)
+ * and the matching <link>, <meta> and <script> tags in index.html.
+ */
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+
+const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+
+function listFiles(dir, base = dir, out = []) {
+  for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+    const p = path.join(dir, e.name);
+    if (e.isDirectory()) listFiles(p, base, out);
+    else out.push(path.relative(base, p).split(path.sep).join('/'));
+  }
+  return out;
+}
+
+function apply(dist, root, opts = {}) {
+  const read = (f) => { try { return JSON.parse(fs.readFileSync(f, 'utf8')); } catch (_) { return {}; } };
+  const pkg = read(path.join(opts.project || root, 'package.json'));
+  const name = opts.name || pkg.productName || pkg.name || path.basename(path.resolve(root));
+  const themeColor = opts.themeColor || '#ffffff';
+  const scope = './';
+
+  const icon = [path.join(root, 'icon.png'), path.join(opts.project || root, 'build', 'icon.png')].find((f) => fs.existsSync(f));
+  const icons = [];
+  if (icon) { fs.copyFileSync(icon, path.join(dist, 'icon.png')); icons.push({ src: 'icon.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' }); }
+
+  const manifest = { name, short_name: String(name).slice(0, 12), start_url: scope, scope, display: 'standalone', background_color: themeColor, theme_color: themeColor, icons };
+  fs.writeFileSync(path.join(dist, 'manifest.webmanifest'), JSON.stringify(manifest, null, 2) + '\n');
+
+  const skip = new Set(['sw.js', '.htaccess']);
+  const files = listFiles(dist).filter((f) => !skip.has(f) && !f.endsWith('.map'));
+  const version = crypto.createHash('sha1').update(files.map((f) => f + fs.statSync(path.join(dist, f)).size).join('|')).digest('hex').slice(0, 10);
+  fs.writeFileSync(path.join(dist, 'sw.js'), `// Written by kreft build --pwa. A new build has a new version, so the old cache is dropped.
+const CACHE = 'kreft-${version}';
+const SHELL = ${JSON.stringify(['./', ...files.filter((f) => f !== 'index.html')])};
+self.addEventListener('install', (e) => {
+  e.waitUntil(caches.open(CACHE).then((c) => c.addAll(SHELL)).then(() => self.skipWaiting()));
+});
+self.addEventListener('activate', (e) => {
+  e.waitUntil(caches.keys().then((ks) => Promise.all(ks.filter((k) => k !== CACHE).map((k) => caches.delete(k)))).then(() => self.clients.claim()));
+});
+self.addEventListener('fetch', (e) => {
+  const req = e.request, url = new URL(req.url);
+  if (req.method !== 'GET' || url.origin !== location.origin || url.pathname.includes('/api/')) return; // data always goes to the network
+  if (req.mode === 'navigate') { // page addresses: network first, the cached index.html when offline
+    e.respondWith(fetch(req).catch(() => caches.match('./').then((r) => r || caches.match('index.html'))));
+    return;
+  }
+  e.respondWith(caches.match(req, { ignoreSearch: true }).then((hit) => hit || fetch(req).then((res) => {
+    if (res.ok) { const copy = res.clone(); caches.open(CACHE).then((c) => c.put(req, copy)); }
+    return res;
+  })));
+});
+`);
+  fs.writeFileSync(path.join(dist, 'pwa-register.js'),
+    `if ('serviceWorker' in navigator && location.protocol !== 'file:' && !location.protocol.startsWith('capacitor')) {\n  window.addEventListener('load', () => navigator.serviceWorker.register('sw.js').catch(() => {}));\n}\n`);
+
+  const file = path.join(dist, 'index.html');
+  let html = fs.readFileSync(file, 'utf8');
+  const tags = `  <link rel="manifest" href="manifest.webmanifest">\n  <meta name="theme-color" content="${esc(themeColor)}">\n  <meta name="mobile-web-app-capable" content="yes">\n  <meta name="apple-mobile-web-app-capable" content="yes">\n  <meta name="apple-mobile-web-app-title" content="${esc(manifest.short_name)}">\n${icons.length ? '  <link rel="apple-touch-icon" href="icon.png">\n' : ''}`;
+  if (!html.includes('manifest.webmanifest')) html = html.replace(/<\/head>/i, () => tags + '</head>');
+  if (!html.includes('pwa-register.js')) html = html.replace(/<\/body>/i, () => '  <script src="pwa-register.js"></script>\n</body>');
+  // phones: draw under the notch; the app pads itself with env(safe-area-inset-*)
+  html = html.replace(/(<meta[^>]*name=["']viewport["'][^>]*content=["'])([^"']*)(["'])/i, (m, a, c, z) => /viewport-fit/.test(c) ? m : a + c + ', viewport-fit=cover' + z);
+  fs.writeFileSync(file, html);
+  return { name, files: files.length + 3 };
+}
+
+module.exports = { apply };

package/docs/README.md

@@ -2221,6 +2221,61 @@ Do not turn these off to make something work. Add a bridge function instead.
 | 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 | Nothing to do: the hidden server picks the next free port. |
 
+## Mobile apps (iOS and Android)
+
+Kreft apps run on phones in two ways. Both start from the same `.kreft` code.
+
+**1. An installable website (PWA).** `kreft build --pwa` also writes `manifest.webmanifest`, a service worker `sw.js` and `pwa-register.js`. Visitors can add the site to their home screen, and pages they have seen open without a connection. Requests to `/api/` are never cached. Put a 512x512 `icon.png` next to `index.html` for the home screen icon.
+
+**2. A real app with Capacitor.** The built site runs inside a native WebView and goes to the App Store or Google Play.
+
+```bash
+kreft new my-app --mobile        # or: kreft mobile:init in an existing app
+npm install
+kreft mobile:build --android --api-url https://api.example.com
+kreft mobile:open --android      # Android Studio (--ios: Xcode, needs a Mac)
+```
+
+| Command | What it does |
+|---|---|
+| `kreft mobile:init` | Adds `capacitor.config.json`, the Capacitor packages and the `mobile:*` scripts |
+| `kreft mobile:build [--android] [--ios]` | Builds the site with a relative base and PWA files, adds the platform the first time, then runs `cap sync`. Without a flag it syncs the platforms that exist |
+| `kreft mobile:open` | Opens the native project |
+| `kreft mobile:dev` | Runs on a device or emulator with live reload from your dev server (same Wi-Fi) |
+
+**Building the Android app needs Java 21** (Capacitor 7). Android Studio includes it; on a command line set `JAVA_HOME` to it, for example on a Mac `export JAVA_HOME="/Applications/Android Studio.app/Contents/jbr/Contents/Home"`. Running from Android Studio ( `kreft mobile:open --android` ) needs no extra setup. The iOS Simulator needs a full Xcode install, not only the command line tools.
+
+**The backend does not run inside the phone.** Run it on a server and give the app its address with `--api-url` (written to `.env` as `PUBLIC_API_URL`), then in your code:
+
+```js
+Kreftjs.api.setup({ base: Kreftjs.env.PUBLIC_API_URL, token: () => Kreftjs.storage.get('token') })
+```
+
+Use API tokens for sign-in in the app, not cookie sessions.
+
+### Home pages made for apps
+
+A website's welcome page is not what an app should open on. `kreft new my-app --mobile` writes a **phone home screen** (top bar, shortcut cards, a bottom tab bar, a card that shows the touch events), and `kreft new my-app --electron` writes a **desktop workspace** (sidebar, toolbar with search, info cards, shortcuts). With both flags, `pages/Home.kreft` shows the desktop one inside the Electron window and the phone one everywhere else.
+
+```bash
+kreft make:home --mobile      # in an existing project: phone home screen (replaces pages/Home.kreft)
+kreft make:home --desktop     # desktop workspace
+```
+
+They are normal files (`components/HomeMobile.kreft`, `components/HomeDesktop.kreft`), so change them freely. Preview either in a browser with `?platform=mobile` or `?platform=desktop`. Links to the dashboard, users and profile appear only when the project has them (not with `--no-auth`).
+
+### Touch events
+
+```html
+<div @tap={open}>Open</div>
+<li @swipeleft={remove($event)} @longpress={select}>Row</li>
+<section @swipe={go($event)}>…</section>   <!-- $event.direction: left | right | up | down -->
+```
+
+`@tap` (moves less than 10px, under 500ms), `@longpress` (held still for 500ms), `@swipe` and `@swipeleft`, `@swiperight`, `@swipeup`, `@swipedown` (40px or more in under 800ms). They use pointer events, so they work with a finger, a pen and a mouse. `.once`, `.prevent` and `.stop` work. A horizontal swipe keeps vertical scrolling working.
+
+The starter `ui.css` already pads the page for the notch (`env(safe-area-inset-*)`), removes the tap delay and makes buttons and fields at least 44px high on touch screens. New projects have `viewport-fit=cover` set by `kreft build --pwa`.
+
 ## Packages
 
 `kreft add` is a safer `npm install`:

package/kreftjs.js

@@ -1,5 +1,5 @@
 /*!
- * Kreft v0.0.22-beta — reactive by nature
+ * Kreft v0.0.23-beta.1 — 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.
@@ -1630,9 +1630,56 @@
       if (mods.includes('stop')) e.stopPropagation();
       invokeHandler(scope, expr, [e]);
     };
+    if (gestureTypes.has(type)) return bindGesture(el, type, mods, scope, expr);
     el.addEventListener(type, handler, options);
   }
 
+  /* ---------- touch gestures: @tap, @longpress, @swipe, @swipeleft/right/up/down ----------
+   * Built on pointer events, so they work with a finger, a pen and a mouse. The handler gets
+   * { type, target, currentTarget, direction, dx, dy, duration, originalEvent, preventDefault(), stopPropagation() }.
+   * A swipe needs 40px of travel (more along one axis than the other) in under 800ms; a tap moves less than 10px and
+   * ends before 500ms; a longpress is held 500ms without moving. Modifiers: .prevent .stop .once. */
+  const gestureTypes = new Set(['tap', 'longpress', 'swipe', 'swipeleft', 'swiperight', 'swipeup', 'swipedown']);
+  function bindGesture(el, type, mods, scope, expr) {
+    let start = null, timer = null, done = false;
+    const fire = (extra, orig) => {
+      if (done) return;
+      if (mods.includes('once')) done = true;
+      if (mods.includes('prevent')) orig.preventDefault();
+      if (mods.includes('stop')) orig.stopPropagation();
+      invokeHandler(scope, expr, [Object.assign({
+        type, target: orig.target, currentTarget: el, originalEvent: orig,
+        preventDefault: () => orig.preventDefault(), stopPropagation: () => orig.stopPropagation(),
+      }, extra)]);
+    };
+    const clear = () => { if (timer) clearTimeout(timer); timer = null; };
+    // let a vertical scroll keep working, while a horizontal swipe is ours
+    if (type.startsWith('swipe') && el.style) el.style.touchAction = el.style.touchAction || (type === 'swipeup' || type === 'swipedown' ? 'pan-x' : 'pan-y');
+    el.addEventListener('pointerdown', (e) => {
+      if (e.pointerType === 'mouse' && e.button !== 0) return;
+      start = { x: e.clientX, y: e.clientY, t: Date.now(), moved: false };
+      clear();
+      if (type === 'longpress') timer = setTimeout(() => { if (start && !start.moved) { const s = start; start = null; fire({ dx: 0, dy: 0, duration: Date.now() - s.t }, e); } }, 500);
+    });
+    el.addEventListener('pointermove', (e) => {
+      if (!start) return;
+      if (Math.abs(e.clientX - start.x) > 10 || Math.abs(e.clientY - start.y) > 10) { start.moved = true; if (type === 'longpress') clear(); }
+    });
+    el.addEventListener('pointercancel', () => { start = null; clear(); });
+    el.addEventListener('pointerup', (e) => {
+      clear();
+      if (!start) return;
+      const s = start; start = null;
+      const dx = e.clientX - s.x, dy = e.clientY - s.y, duration = Date.now() - s.t;
+      if (type === 'tap') { if (!s.moved && duration < 500) fire({ dx, dy, duration }, e); return; }
+      if (type === 'longpress') return;
+      const horizontal = Math.abs(dx) >= Math.abs(dy);
+      if (duration > 800 || Math.max(Math.abs(dx), Math.abs(dy)) < 40) return;
+      const direction = horizontal ? (dx > 0 ? 'right' : 'left') : (dy > 0 ? 'down' : 'up');
+      if (type === 'swipe' || type === 'swipe' + direction) fire({ direction, dx, dy, duration }, e);
+    });
+  }
+
   /* ---------- k-model on native elements ---------- */
   const toNumber = (v) => { const n = parseFloat(v); return isNaN(n) ? v : n; };
   const valueOf = (el) => ('_value' in el ? el._value : el.value);
@@ -5601,7 +5648,7 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.22-beta';
+  const VERSION = '0.0.23-beta.1';
   const Kreftjs = {
     version: VERSION,
     // PUBLIC_ values from .env (kreft dev and kreft build put them here); never secrets
@@ -5669,7 +5716,7 @@
 
   // the text-only helpers the build tool reuses, so built code matches the browser exactly
   Object.defineProperty(Kreftjs, '__internal', {
-    value: { expandBlocks, prepareTemplate, splitKreft, splitInterp, exactBrace, stripBrace, interpToExpr, quoteBraceAttrs, expandSelfClosing, scopeCss, hashString, propType, typeCheck, caseCond, simplePathRE, fnExpRE, forAliasRE, makeKreftDef, compileFn, evaluate, stripTypeScript, stripTsParams },
+    value: { expandBlocks, prepareTemplate, splitKreft, splitInterp, exactBrace, stripBrace, interpToExpr, quoteBraceAttrs, expandSelfClosing, scopeCss, hashString, propType, typeCheck, caseCond, simplePathRE, fnExpRE, forAliasRE, makeKreftDef, compileFn, evaluate, stripTypeScript, stripTsParams, bindEvent },
   });
 
   if (typeof module !== 'undefined' && module.exports) module.exports = Kreftjs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kreftjs",
-  "version": "0.0.22-beta",
+  "version": "0.0.23-beta.1",
   "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/kreftjs-com --base / --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/menu.test.js test/electron-all.test.js test/build-minify.test.js test/stream.test.js test/syntax.test.js test/memory.test.js test/shield.test.js test/mcp-client.test.js test/dbapi-secrets.test.js test/auth-csrf.test.js test/not-a-project.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 test/electron-all.test.js test/build-minify.test.js test/stream.test.js test/syntax.test.js test/memory.test.js test/shield.test.js test/mcp-client.test.js test/dbapi-secrets.test.js test/auth-csrf.test.js test/not-a-project.test.js test/mobile.test.js test/gestures.test.js test/home-variants.test.js",
     "electron": "kreftjs electron",
     "electron:dev": "kreftjs electron:dev",
     "electron:build": "kreftjs electron:build"

package/templates/app/frontend/kreftjs.js

@@ -1,5 +1,5 @@
 /*!
- * Kreft v0.0.22-beta — reactive by nature
+ * Kreft v0.0.23-beta.1 — 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.
@@ -1630,9 +1630,56 @@
       if (mods.includes('stop')) e.stopPropagation();
       invokeHandler(scope, expr, [e]);
     };
+    if (gestureTypes.has(type)) return bindGesture(el, type, mods, scope, expr);
     el.addEventListener(type, handler, options);
   }
 
+  /* ---------- touch gestures: @tap, @longpress, @swipe, @swipeleft/right/up/down ----------
+   * Built on pointer events, so they work with a finger, a pen and a mouse. The handler gets
+   * { type, target, currentTarget, direction, dx, dy, duration, originalEvent, preventDefault(), stopPropagation() }.
+   * A swipe needs 40px of travel (more along one axis than the other) in under 800ms; a tap moves less than 10px and
+   * ends before 500ms; a longpress is held 500ms without moving. Modifiers: .prevent .stop .once. */
+  const gestureTypes = new Set(['tap', 'longpress', 'swipe', 'swipeleft', 'swiperight', 'swipeup', 'swipedown']);
+  function bindGesture(el, type, mods, scope, expr) {
+    let start = null, timer = null, done = false;
+    const fire = (extra, orig) => {
+      if (done) return;
+      if (mods.includes('once')) done = true;
+      if (mods.includes('prevent')) orig.preventDefault();
+      if (mods.includes('stop')) orig.stopPropagation();
+      invokeHandler(scope, expr, [Object.assign({
+        type, target: orig.target, currentTarget: el, originalEvent: orig,
+        preventDefault: () => orig.preventDefault(), stopPropagation: () => orig.stopPropagation(),
+      }, extra)]);
+    };
+    const clear = () => { if (timer) clearTimeout(timer); timer = null; };
+    // let a vertical scroll keep working, while a horizontal swipe is ours
+    if (type.startsWith('swipe') && el.style) el.style.touchAction = el.style.touchAction || (type === 'swipeup' || type === 'swipedown' ? 'pan-x' : 'pan-y');
+    el.addEventListener('pointerdown', (e) => {
+      if (e.pointerType === 'mouse' && e.button !== 0) return;
+      start = { x: e.clientX, y: e.clientY, t: Date.now(), moved: false };
+      clear();
+      if (type === 'longpress') timer = setTimeout(() => { if (start && !start.moved) { const s = start; start = null; fire({ dx: 0, dy: 0, duration: Date.now() - s.t }, e); } }, 500);
+    });
+    el.addEventListener('pointermove', (e) => {
+      if (!start) return;
+      if (Math.abs(e.clientX - start.x) > 10 || Math.abs(e.clientY - start.y) > 10) { start.moved = true; if (type === 'longpress') clear(); }
+    });
+    el.addEventListener('pointercancel', () => { start = null; clear(); });
+    el.addEventListener('pointerup', (e) => {
+      clear();
+      if (!start) return;
+      const s = start; start = null;
+      const dx = e.clientX - s.x, dy = e.clientY - s.y, duration = Date.now() - s.t;
+      if (type === 'tap') { if (!s.moved && duration < 500) fire({ dx, dy, duration }, e); return; }
+      if (type === 'longpress') return;
+      const horizontal = Math.abs(dx) >= Math.abs(dy);
+      if (duration > 800 || Math.max(Math.abs(dx), Math.abs(dy)) < 40) return;
+      const direction = horizontal ? (dx > 0 ? 'right' : 'left') : (dy > 0 ? 'down' : 'up');
+      if (type === 'swipe' || type === 'swipe' + direction) fire({ direction, dx, dy, duration }, e);
+    });
+  }
+
   /* ---------- k-model on native elements ---------- */
   const toNumber = (v) => { const n = parseFloat(v); return isNaN(n) ? v : n; };
   const valueOf = (el) => ('_value' in el ? el._value : el.value);
@@ -5601,7 +5648,7 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.22-beta';
+  const VERSION = '0.0.23-beta.1';
   const Kreftjs = {
     version: VERSION,
     // PUBLIC_ values from .env (kreft dev and kreft build put them here); never secrets
@@ -5669,7 +5716,7 @@
 
   // the text-only helpers the build tool reuses, so built code matches the browser exactly
   Object.defineProperty(Kreftjs, '__internal', {
-    value: { expandBlocks, prepareTemplate, splitKreft, splitInterp, exactBrace, stripBrace, interpToExpr, quoteBraceAttrs, expandSelfClosing, scopeCss, hashString, propType, typeCheck, caseCond, simplePathRE, fnExpRE, forAliasRE, makeKreftDef, compileFn, evaluate, stripTypeScript, stripTsParams },
+    value: { expandBlocks, prepareTemplate, splitKreft, splitInterp, exactBrace, stripBrace, interpToExpr, quoteBraceAttrs, expandSelfClosing, scopeCss, hashString, propType, typeCheck, caseCond, simplePathRE, fnExpRE, forAliasRE, makeKreftDef, compileFn, evaluate, stripTypeScript, stripTsParams, bindEvent },
   });
 
   if (typeof module !== 'undefined' && module.exports) module.exports = Kreftjs;

package/templates/app/frontend/ui.css

@@ -515,3 +515,18 @@ tbody tr:hover {
     animation: none !important;
   }
 }
+
+/* ---- phones and tablets (also inside the Capacitor iOS / Android apps) ---- */
+body {
+  padding-top: env(safe-area-inset-top);
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
+}
+button, a, [role="button"], input, select, textarea { touch-action: manipulation; } /* no 300ms click delay, no double-tap zoom */
+@media (pointer: coarse) {
+  button, .btn, input, select, textarea { min-height: 44px; }   /* a finger needs about 44px */
+  input, select, textarea { font-size: 16px; }                   /* iOS zooms into smaller fields */
+}