kreftjs 0.0.22-beta → 0.0.23-beta.0

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/kreftjs.js

@@ -48,6 +48,12 @@ const commands = {
   'electron:init': (a) => require('./electron.js').init(a),
   'electron:help': () => require('./electron.js').help(),
   'make:electron': (a) => require('./electron.js').init(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 +97,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 +128,7 @@ 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 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 +204,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 +304,7 @@ 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 (vite) require('./vite.js').init(target, { ts });
 
   console.log(`

package/bin/mobile.js

@@ -0,0 +1,175 @@
+/*
+ * 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' },
+  };
+}
+
+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,48 @@ 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) |
+
+**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.
+
+### 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

@@ -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);
@@ -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.0",
   "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",
     "electron": "kreftjs electron",
     "electron:dev": "kreftjs electron:dev",
     "electron:build": "kreftjs electron:build"

package/templates/app/frontend/kreftjs.js

@@ -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);
@@ -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 */
+}