create-raiko 1.0.1 → 1.0.3

package/index.mjs

@@ -4,7 +4,7 @@ import { existsSync, mkdirSync, readdirSync, writeFileSync } from 'node:fs'
 import { dirname, join, resolve, basename } from 'node:path'
 import { spawnSync } from 'node:child_process'
 import { randomBytes } from 'node:crypto'
-import { select, multiselect, text, confirm, spin, col } from './prompt.mjs'
+import { select, multiselect, text, confirm, spin, col, BACK } from './prompt.mjs'
 import { generate, FRONTENDS, CSS, ICONS, run } from './templates.mjs'
 
 const argv = process.argv.slice(2)
@@ -31,53 +31,106 @@ const ROLE_PRESETS = {
   viewer: { users: [], posts: ['list', 'read'] },
 }
 
-console.log(`
-  ${col.y('  /\\_/\\   ')}  ${col.b('raiko')}${col.d('.js')}
-  ${col.y(' ( o.o )  ')}  ${col.d('backend and frontend in one file tree')}
-  ${col.y('  > ^ <   ')}  ${col.d('every runtime. strikes first.')}
-`)
+// compact banner on narrow terminals so nothing wraps
+console.log(
+  (process.stdout.columns || 80) >= 56
+    ? `\n  ${col.y('  /\\_/\\   ')}  ${col.b('raiko')}${col.d('.js')}\n  ${col.y(' ( o.o )  ')}  ${col.d('backend and frontend in one file tree')}\n  ${col.y('  > ^ <   ')}  ${col.d('every runtime. strikes first.')}\n`
+    : `\n  ${col.y('( o.o )')} ${col.b('raiko')}${col.d('.js')}\n`,
+)
 
 const positional = argv.find((a, i) => !a.startsWith('-') && !(argv[i - 1] ?? '').startsWith('--'))
-const name = positional ?? (yes ? 'raiko-app' : await text('Project name', 'raiko-app'))
+const interactive = !yes && !!(process.stdin.isTTY && process.stdout.isTTY)
+
 // npm package name rules: the name also lands in generated code, so nothing else is allowed
-if (!/^[a-z0-9][a-z0-9._-]{0,213}$/.test(basename(name))) {
-  console.error(`\n  ${col.r('error[RK0803]')}: "${basename(name).replace(/[^\x20-\x7e]/g, '?')}" is not a valid project name\n  = help: lowercase letters, digits, dot, dash and underscore, like my-app\n`)
-  process.exit(1)
-}
-const dir = resolve(name)
-if (existsSync(dir) && readdirSync(dir).length && !argv.includes('--force')) {
-  console.error(`\n  ${col.r('error[RK0801]')}: folder ${name} is not empty\n  = help: pick another name or pass --force\n`)
-  process.exit(1)
+const nameError = (n) => {
+  if (!/^[a-z0-9][a-z0-9._-]{0,213}$/.test(basename(n)))
+    return `${col.r('error[RK0803]')}: "${basename(n).replace(/[^\x20-\x7e]/g, '?')}" is not a valid project name\n  = help: lowercase letters, digits, dot, dash and underscore, like my-app`
+  const d = resolve(n)
+  if (existsSync(d) && readdirSync(d).length && !argv.includes('--force')) return `${col.r('error[RK0801]')}: folder ${n} is not empty\n  = help: pick another name or pass --force`
+  return null
 }
 
-const template = await ask('template', () => select('Template', [{ value: 'full', label: 'Full', hint: 'pages, API, chat over WebSocket, everything you pick below' }, { value: 'minimal', label: 'Minimal', hint: 'one page and one API route' }]), 'full')
-const frontend = await ask('frontend', () => select('Frontend', FRONTENDS), 'raiko')
-const css = await ask('css', () => select('CSS', CSS.filter((c) => !c.only || c.only.includes(frontend))), 'monsoon')
-if (css === 'stylex' && frontend !== 'react') {
-  console.error(`  ${col.r('error[RK0802]')}: StyleX needs the React frontend\n  = help: pick --frontend react, or another CSS option`)
-  process.exit(1)
-}
-const icons = await ask('icons', () => select('Icons', ICONS.filter((c) => !c.only || c.only.includes(frontend))), 'glyphfox')
-const motion = await ask('motion', () => confirm('Animations with Motion (formerly Framer Motion)?', false), false)
-const orm = await ask('orm', () => select('Database ORM', [{ value: 'kastor', label: 'Kastor', hint: 'TypeScript ORM, no codegen' }, { value: 'prisma', label: 'Prisma' }, { value: 'drizzle', label: 'Drizzle' }, { value: 'none', label: 'No database' }]), 'none')
-const db = orm === 'none' ? 'none' : await ask('db', () => select('Database', [{ value: 'sqlite', label: 'SQLite', hint: 'a file, no server needed' }, { value: 'postgres', label: 'PostgreSQL' }]), 'sqlite')
-const auth = list(await ask('auth', () => multiselect('Sign in methods', [{ value: 'credentials', label: 'Email and password' }, { value: 'github', label: 'GitHub' }, { value: 'google', label: 'Google' }, { value: 'discord', label: 'Discord' }, { value: 'gitlab', label: 'GitLab' }], ['credentials']), []))
-const twofa = auth.length ? await ask('twofa', () => confirm('Two factor auth with Google Authenticator (TOTP)?', true), false) : false
-const email = await ask('email', () => select('Email provider', [{ value: 'resend', label: 'Resend' }, { value: 'postmark', label: 'Postmark' }, { value: 'sendgrid', label: 'SendGrid' }, { value: 'smtp', label: 'SMTP', hint: 'any server, via nodemailer' }, { value: 'none', label: 'None for now', hint: 'emails print in the terminal' }]), 'none')
-const i18n = await ask('i18n', () => confirm('Translations (en, pt-BR, es, fr, de)?', false), false)
-const admin = orm === 'none' ? false : await ask('admin', () => confirm('Admin panel at /admin?', true), true)
-
-let roles = { admin: ROLE_PRESETS.admin }
-if (admin) {
-  const picked = list(await ask('roles', () => multiselect('Admin roles (admin always has full access)', [{ value: 'editor', label: 'editor', hint: 'manage posts, read users' }, { value: 'support', label: 'support', hint: 'read and fix users, cannot list or delete' }, { value: 'viewer', label: 'viewer', hint: 'read only' }], ['editor']), 'editor'))
-  for (const r of picked) if (ROLE_PRESETS[r]) roles[r] = ROLE_PRESETS[r]
+const NO_DB = 'none'
+const steps = [
+  { key: 'name', def: () => positional ?? 'raiko-app', given: () => positional, validate: nameError, ask: (a, back) => text('Project name', a.name ?? 'raiko-app', back) },
+  { key: 'template', def: () => 'full', ask: (a, back) => select('Template', [{ value: 'full', label: 'Full', hint: 'pages, API, chat, everything below' }, { value: 'minimal', label: 'Minimal', hint: 'one page and one API route' }], a.template ?? 'full', back) },
+  { key: 'frontend', def: () => 'raiko', ask: (a, back) => select('Frontend', FRONTENDS, a.frontend ?? 'raiko', back) },
+  {
+    key: 'css',
+    def: () => 'monsoon',
+    validate: (v, a) => (v === 'stylex' && a.frontend !== 'react' ? `${col.r('error[RK0802]')}: StyleX needs the React frontend\n  = help: pick React, or another CSS option` : null),
+    ask: (a, back) => {
+      const opts = CSS.filter((c) => !c.only || c.only.includes(a.frontend))
+      return select('CSS', opts, opts.some((o) => o.value === a.css) ? a.css : 'monsoon', back)
+    },
+  },
+  {
+    key: 'icons',
+    def: () => 'glyphfox',
+    ask: (a, back) => {
+      const opts = ICONS.filter((c) => !c.only || c.only.includes(a.frontend))
+      return select('Icons', opts, opts.some((o) => o.value === a.icons) ? a.icons : 'glyphfox', back)
+    },
+  },
+  { key: 'motion', def: () => false, ask: (a, back) => confirm('Animations with Motion (formerly Framer Motion)?', a.motion ?? false, back) },
+  { key: 'orm', def: () => NO_DB, ask: (a, back) => select('Database ORM', [{ value: 'kastor', label: 'Kastor', hint: 'TypeScript ORM, no codegen' }, { value: 'prisma', label: 'Prisma' }, { value: 'drizzle', label: 'Drizzle' }, { value: NO_DB, label: 'No database' }], a.orm ?? NO_DB, back) },
+  { key: 'db', when: (a) => a.orm !== NO_DB, skip: NO_DB, def: () => 'sqlite', ask: (a, back) => select('Database', [{ value: 'sqlite', label: 'SQLite', hint: 'a file, no server needed' }, { value: 'postgres', label: 'PostgreSQL' }], a.db && a.db !== NO_DB ? a.db : 'sqlite', back) },
+  { key: 'auth', list: true, def: () => [], ask: (a, back) => multiselect('Sign in methods', [{ value: 'credentials', label: 'Email and password' }, { value: 'github', label: 'GitHub' }, { value: 'google', label: 'Google' }, { value: 'discord', label: 'Discord' }, { value: 'gitlab', label: 'GitLab' }], a.auth ?? ['credentials'], back) },
+  { key: 'twofa', when: (a) => a.auth.length > 0, skip: false, def: () => false, ask: (a, back) => confirm('Two factor auth with Google Authenticator (TOTP)?', a.twofa ?? true, back) },
+  { key: 'email', def: () => 'none', ask: (a, back) => select('Email provider', [{ value: 'resend', label: 'Resend' }, { value: 'postmark', label: 'Postmark' }, { value: 'sendgrid', label: 'SendGrid' }, { value: 'smtp', label: 'SMTP', hint: 'any server, via nodemailer' }, { value: 'none', label: 'None for now', hint: 'emails print in the terminal' }], a.email ?? 'none', back) },
+  { key: 'i18n', def: () => false, ask: (a, back) => confirm('Translations (en, pt-BR, es, fr, de)?', a.i18n ?? false, back) },
+  { key: 'admin', when: (a) => a.orm !== NO_DB, skip: false, def: () => true, ask: (a, back) => confirm('Admin panel at /admin?', a.admin ?? true, back) },
+  { key: 'roles', list: true, when: (a) => a.admin, skip: [], def: () => ['editor'], ask: (a, back) => multiselect('Admin roles (admin always has full access)', [{ value: 'editor', label: 'editor', hint: 'manage posts, read users' }, { value: 'support', label: 'support', hint: 'fix users, cannot list or delete' }, { value: 'viewer', label: 'viewer', hint: 'read only' }], a.roles ?? ['editor'], back) },
+  { key: 'cookies', def: () => 'none', ask: (a, back) => select('Cookie consent banner (cookieowl)', [{ value: 'none', label: 'None' }, { value: 'lgpd', label: 'LGPD', hint: 'Brazil, Portuguese texts' }, { value: 'gdpr', label: 'GDPR', hint: 'Europe, visitor language' }], a.cookies ?? 'none', back) },
+  { key: 'pwa', def: () => false, ask: (a, back) => confirm('Installable app with offline support (installkite)?', a.pwa ?? false, back) },
+  { key: 'deploy', def: () => 'docker', ask: (a, back) => select('Deploy target', [{ value: 'vercel', label: 'Vercel' }, { value: 'cloudflare', label: 'Cloudflare Workers' }, { value: 'docker', label: 'Docker', hint: 'Fly, Railway, Render, any VPS' }, { value: 'node', label: 'Plain server', hint: 'bun or node on your machine' }], a.deploy ?? 'docker', back) },
+  { key: 'pm', def: () => detectedPm, ask: (a, back) => select('Package manager', [{ value: detectedPm, label: detectedPm, hint: 'detected' }, ...['bun', 'npm', 'pnpm', 'yarn'].filter((p) => p !== detectedPm).map((p) => ({ value: p, label: p }))], a.pm ?? detectedPm, back) },
+  { key: 'install', def: () => !argv.includes('--no-install'), ask: (a, back) => confirm('Install dependencies now?', a.install ?? true, back) },
+  { key: 'git', def: () => !argv.includes('--no-git'), ask: (a, back) => confirm('Initialize a git repository?', a.git ?? true, back) },
+]
+
+// Walk the steps. Esc, Backspace or the left arrow goes back to the last question that was asked;
+// steps answered by flags or skipped by an earlier answer are not revisited.
+const a = {}
+const history = []
+for (let i = 0; i < steps.length; ) {
+  const s = steps[i]
+  if (s.when && !s.when(a)) {
+    a[s.key] = s.skip
+    i++
+    continue
+  }
+  const fixed = s.given ? s.given() : flag(s.key)
+  if (fixed !== undefined || !interactive) {
+    const v = fixed !== undefined ? (s.list ? list(parse(fixed)) : parse(fixed)) : s.def(a)
+    const err = s.validate?.(v, a)
+    if (err) {
+      console.error(`\n  ${err}\n`)
+      process.exit(1)
+    }
+    a[s.key] = v
+    i++
+    continue
+  }
+  const v = await s.ask(a, history.length > 0)
+  if (v === BACK) {
+    i = history.pop()
+    continue
+  }
+  const err = s.validate?.(v, a)
+  if (err) {
+    console.log(`  ${err}`)
+    continue
+  }
+  a[s.key] = v
+  history.push(i)
+  i++
 }
-const cookies = await ask('cookies', () => select('Cookie consent banner (cookieowl)', [{ value: 'none', label: 'None' }, { value: 'lgpd', label: 'LGPD', hint: 'Brazil, Portuguese texts' }, { value: 'gdpr', label: 'GDPR', hint: 'Europe, visitor language' }]), 'none')
-const pwa = await ask('pwa', () => confirm('Installable app with offline support (installkite)?', false), false)
-const deploy = await ask('deploy', () => select('Deploy target', [{ value: 'vercel', label: 'Vercel' }, { value: 'cloudflare', label: 'Cloudflare Workers' }, { value: 'docker', label: 'Docker', hint: 'Fly, Railway, Render, any VPS' }, { value: 'node', label: 'Plain server', hint: 'bun or node on your machine' }]), 'docker')
-const pm = await ask('pm', () => select('Package manager', [{ value: detectedPm, label: detectedPm, hint: 'detected' }, ...['bun', 'npm', 'pnpm', 'yarn'].filter((p) => p !== detectedPm).map((p) => ({ value: p, label: p }))]), detectedPm)
-const install = await ask('install', () => confirm('Install dependencies now?', true), !argv.includes('--no-install'))
-const git = await ask('git', () => confirm('Initialize a git repository?', true), !argv.includes('--no-git'))
+
+const { name, template, frontend, css, icons, motion, orm, db, auth, twofa, email, i18n, admin, cookies, pwa, deploy, pm, install, git } = a
+const dir = resolve(name)
+const roles = { admin: ROLE_PRESETS.admin }
+for (const r of a.roles ?? []) if (ROLE_PRESETS[r]) roles[r] = ROLE_PRESETS[r]
 
 const o = { name: basename(dir), template, frontend, css, icons, motion, orm, db, auth, twofa, email, i18n, admin, roles, cookies, pwa, deploy, pm }
 if (flag('dry') !== undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-raiko",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Create a Raiko.js app: pick your frontend, CSS, database, auth, email, i18n and deploy target.",
   "type": "module",
   "bin": {
@@ -11,7 +11,9 @@
     "prompt.mjs",
     "templates.mjs",
     "templates-common.mjs",
-    "README.md"
+    "welcome.mjs",
+    "README.md",
+    "LICENSE"
   ],
   "engines": {
     "node": ">=20"

package/prompt.mjs

@@ -1,95 +1,176 @@
-// Tiny interactive prompts with arrow keys, no dependencies.
+// Interactive prompts with arrow keys, no dependencies.
+// Every prompt resolves to its value, or to BACK when the person presses Esc, Backspace or the left arrow.
 import readline from 'node:readline'
 
-const tty = process.stdin.isTTY && process.stdout.isTTY
-const esc = (n) => `\x1b[${n}m`
-export const col = { y: (s) => `${esc(33)}${s}${esc(0)}`, d: (s) => `${esc(2)}${s}${esc(0)}`, g: (s) => `${esc(32)}${s}${esc(0)}`, b: (s) => `${esc(1)}${s}${esc(0)}`, r: (s) => `${esc(31)}${s}${esc(0)}`, c: (s) => `${esc(36)}${s}${esc(0)}` }
+export const BACK = Symbol('back')
+const tty = !!(process.stdin.isTTY && process.stdout.isTTY)
+const esc = (n) => (s) => (tty ? `\x1b[${n}m${s}\x1b[0m` : s)
+export const col = { y: esc(33), d: esc(2), g: esc(32), b: esc(1), r: esc(31), c: esc(36) }
+
+const visible = (s) => s.replace(/\x1b\[[0-9;]*m/g, '')
+/** Cut a line to the terminal width so it never wraps: a wrapped line would break the redraw. */
+function fit(s) {
+  const width = Math.max(20, (process.stdout.columns || 80) - 1)
+  if (visible(s).length <= width) return s
+  let out = ''
+  let n = 0
+  for (const part of s.split(/(\x1b\[[0-9;]*m)/)) {
+    if (part.startsWith('\x1b[')) {
+      out += part
+      continue
+    }
+    for (const ch of part) {
+      if (n >= width - 1) return out + '\x1b[0m' + (tty ? '…' : '...')
+      out += ch
+      n++
+    }
+  }
+  return out
+}
+
+/** Draw a block of lines in place: move up over the previous block, clear it, write the new one. */
+function painter() {
+  let last = 0
+  return {
+    draw(lines) {
+      let out = ''
+      if (last) out += `\x1b[${last}A\r`
+      out += '\x1b[0J' + lines.map(fit).join('\n') + '\n'
+      process.stdout.write(out)
+      last = lines.length
+    },
+    clear() {
+      if (last) process.stdout.write(`\x1b[${last}A\r\x1b[0J`)
+      last = 0
+    },
+  }
+}
 
 function keys(onKey) {
   readline.emitKeypressEvents(process.stdin)
   process.stdin.setRawMode(true)
   process.stdin.resume()
-  const h = (_, k) => {
-    if (k?.ctrl && k.name === 'c') {
+  const h = (str, k = {}) => {
+    if (k.ctrl && k.name === 'c') {
       process.stdout.write('\x1b[?25h\n')
       process.exit(130)
     }
-    onKey(k ?? {})
+    onKey(k, str)
   }
   process.stdin.on('keypress', h)
+  process.stdout.write('\x1b[?25l')
   return () => {
     process.stdin.off('keypress', h)
     process.stdin.setRawMode(false)
     process.stdin.pause()
+    process.stdout.write('\x1b[?25h')
   }
 }
 
-/** Single choice. options: [{ value, label, hint }] */
-export function select(question, options, initial = 0) {
-  if (!tty) return Promise.resolve(options[initial].value)
+const isBack = (k) => k.name === 'escape' || k.name === 'left' || k.name === 'backspace'
+const legend = (multi, canBack) =>
+  col.d(`  ${multi ? 'space to mark, ' : ''}arrows to move, enter to ${multi ? 'confirm' : 'choose'}${canBack ? ', esc to go back' : ''}`)
+const done = (question, answer) => fit(`${col.g("+")} ${question} ${col.y(answer)}`)
+
+/** Single choice. options: [{ value, label, hint }]. `initial` is a value or an index. */
+export function select(question, options, initial = 0, canBack = true) {
+  let i = typeof initial === 'number' ? initial : Math.max(0, options.findIndex((o) => o.value === initial))
+  if (!tty) return Promise.resolve(options[i].value)
   return new Promise((resolve) => {
-    let i = initial
-    const draw = (first) => {
-      if (!first) process.stdout.write(`\x1b[${options.length}A`)
-      for (const [n, o] of options.entries())
-        process.stdout.write(`\x1b[2K  ${n === i ? col.y('>') : ' '} ${n === i ? col.b(o.label) : o.label}${o.hint ? '  ' + col.d(o.hint) : ''}\n`)
-    }
-    process.stdout.write(`\x1b[?25l${col.c('?')} ${col.b(question)} ${col.d('(arrows, enter)')}\n`)
-    draw(true)
-    const stop = keys((k) => {
-      if (k.name === 'up') i = (i - 1 + options.length) % options.length
-      else if (k.name === 'down' || k.name === 'tab') i = (i + 1) % options.length
-      else if (k.name === 'return') {
+    const p = painter()
+    const render = () =>
+      p.draw([
+        `${col.c('?')} ${col.b(question)}`,
+        ...options.map((o, n) => `  ${n === i ? col.y('>') : ' '} ${n === i ? col.b(o.label) : o.label}${o.hint ? '  ' + col.d(o.hint) : ''}`),
+        legend(false, canBack),
+      ])
+    render()
+    const stop = keys((k, str) => {
+      if (k.name === 'up' || k.name === 'k') i = (i - 1 + options.length) % options.length
+      else if (k.name === 'down' || k.name === 'j' || k.name === 'tab') i = (i + 1) % options.length
+      else if (str && /^[1-9]$/.test(str) && Number(str) <= options.length) i = Number(str) - 1
+      else if (k.name === 'return' || k.name === 'enter' || k.name === 'right') {
         stop()
-        process.stdout.write(`\x1b[${options.length + 1}A\x1b[0J${col.g('+')} ${question} ${col.y(options[i].label)}\n\x1b[?25h`)
+        p.clear()
+        process.stdout.write(done(question, options[i].label) + '\n')
         return resolve(options[i].value)
+      } else if (canBack && isBack(k)) {
+        stop()
+        p.clear()
+        return resolve(BACK)
       } else return
-      draw(false)
+      render()
     })
   })
 }
 
-/** Multiple choice with space. */
-export function multiselect(question, options, initial = []) {
-  if (!tty) return Promise.resolve(initial)
+/** Multiple choice: space marks, enter confirms. */
+export function multiselect(question, options, initial = [], canBack = true) {
+  const on = new Set(initial)
+  if (!tty) return Promise.resolve([...on])
   return new Promise((resolve) => {
     let i = 0
-    const on = new Set(initial)
-    const draw = (first) => {
-      if (!first) process.stdout.write(`\x1b[${options.length}A`)
-      for (const [n, o] of options.entries())
-        process.stdout.write(`\x1b[2K  ${n === i ? col.y('>') : ' '} ${on.has(o.value) ? col.g('[x]') : col.d('[ ]')} ${o.label}${o.hint ? '  ' + col.d(o.hint) : ''}\n`)
-    }
-    process.stdout.write(`\x1b[?25l${col.c('?')} ${col.b(question)} ${col.d('(space to toggle, enter)')}\n`)
-    draw(true)
-    const stop = keys((k) => {
-      if (k.name === 'up') i = (i - 1 + options.length) % options.length
-      else if (k.name === 'down') i = (i + 1) % options.length
-      else if (k.name === 'space') on.has(options[i].value) ? on.delete(options[i].value) : on.add(options[i].value)
-      else if (k.name === 'return') {
+    const p = painter()
+    const render = () =>
+      p.draw([
+        `${col.c('?')} ${col.b(question)}`,
+        ...options.map((o, n) => `  ${n === i ? col.y('>') : ' '} ${on.has(o.value) ? col.g('[x]') : col.d('[ ]')} ${n === i ? col.b(o.label) : o.label}${o.hint ? '  ' + col.d(o.hint) : ''}`),
+        legend(true, canBack),
+      ])
+    render()
+    const stop = keys((k, str) => {
+      const o = options[i]
+      if (k.name === 'up' || k.name === 'k') i = (i - 1 + options.length) % options.length
+      else if (k.name === 'down' || k.name === 'j' || k.name === 'tab') i = (i + 1) % options.length
+      else if (k.name === 'space' || str === 'x') on.has(o.value) ? on.delete(o.value) : on.add(o.value)
+      else if (str === 'a') options.every((x) => on.has(x.value)) ? on.clear() : options.forEach((x) => on.add(x.value))
+      else if (k.name === 'return' || k.name === 'enter') {
+        stop()
+        p.clear()
+        const picked = options.filter((x) => on.has(x.value))
+        process.stdout.write(done(question, picked.map((x) => x.label).join(', ') || 'none') + '\n')
+        return resolve(picked.map((x) => x.value))
+      } else if (canBack && (k.name === 'escape' || k.name === 'left' || k.name === 'backspace')) {
         stop()
-        const picked = options.filter((o) => on.has(o.value))
-        process.stdout.write(`\x1b[${options.length + 1}A\x1b[0J${col.g('+')} ${question} ${col.y(picked.map((o) => o.label).join(', ') || 'none')}\n\x1b[?25h`)
-        return resolve(picked.map((o) => o.value))
+        p.clear()
+        return resolve(BACK)
       } else return
-      draw(false)
+      render()
     })
   })
 }
 
-export function text(question, initial = '') {
+/** Text input with a default. Esc goes back; Backspace on an empty field also goes back. */
+export function text(question, initial = '', canBack = true) {
   if (!tty) return Promise.resolve(initial)
   return new Promise((resolve) => {
-    const rl = readline.createInterface({ input: process.stdin, output: process.stdout })
-    rl.question(`${col.c('?')} ${col.b(question)} ${col.d(`(${initial})`)} `, (a) => {
-      rl.close()
-      resolve(a.trim() || initial)
+    let value = ''
+    const p = painter()
+    const render = () => p.draw([`${col.c('?')} ${col.b(question)} ${value ? value : col.d(initial)}${tty ? '\x1b[7m \x1b[0m' : ''}`, col.d(`  type and press enter${canBack ? ', esc to go back' : ''}`)])
+    render()
+    const stop = keys((k, str) => {
+      if (k.name === 'return' || k.name === 'enter') {
+        stop()
+        p.clear()
+        const v = value.trim() || initial
+        process.stdout.write(done(question, v) + '\n')
+        return resolve(v)
+      }
+      if (canBack && (k.name === 'escape' || (k.name === 'backspace' && !value))) {
+        stop()
+        p.clear()
+        return resolve(BACK)
+      }
+      if (k.name === 'backspace') value = value.slice(0, -1)
+      else if (str && !k.ctrl && !k.meta && str.length === 1 && str >= ' ') value += str
+      else return
+      render()
     })
   })
 }
 
-export const confirm = (question, initial = true) =>
-  select(question, initial ? [{ value: true, label: 'Yes' }, { value: false, label: 'No' }] : [{ value: false, label: 'No' }, { value: true, label: 'Yes' }])
+export const confirm = (question, initial = true, canBack = true) =>
+  select(question, [{ value: true, label: 'Yes' }, { value: false, label: 'No' }], initial ? 0 : 1, canBack)
 
 /** Little animated mascot while something runs. */
 export async function spin(label, fn) {

package/templates-common.mjs

@@ -1,6 +1,6 @@
 // Files shared by every frontend: config, database, auth, email, i18n, deploy.
 export const V = {
-  raiko: '^1.0.1', typescript: '5.6.3', bunTypes: '1.1.13', nodeTypes: '22.9.0', tsx: '4.19.2', esbuild: '0.24.0', vite: '5.4.11', terser: '5.36.0',
+  raiko: '^1.0.3', typescript: '5.6.3', bunTypes: '1.1.13', nodeTypes: '22.9.0', tsx: '4.19.2', esbuild: '0.24.0', vite: '5.4.11', terser: '5.36.0',
   kastor: '0.2.0', prisma: '5.22.0', drizzle: '0.38.3', drizzleKit: '0.30.1', betterSqlite: '11.7.0', pg: '8.13.1', postgresJs: '3.4.5',
   glyphfox: '1.3.0', lucide: '0.469.0', heroicons: '2.2.0', motion: '11.15.0', nodemailer: '6.9.16',
 }

package/templates.mjs

@@ -1,4 +1,5 @@
 // Generates every file of a new project from the installer answers.
+import { welcomeFiles } from './welcome.mjs'
 import { V, LOCALES, isVite, run, exec, dbFiles, configFile, sharedFiles, serverPieces, authFiles, emailFiles, i18nFiles, adminFiles, deployFiles, envExample, gitignore } from './templates-common.mjs'
 
 const json = (v) => JSON.stringify(v, null, 2) + '\n'
@@ -623,6 +624,16 @@ export function generate(input) {
     ...adminFiles(o),
     ...deployFiles(o),
   }
+  // the starter page that teaches the first steps, the same design in every framework
+  Object.assign(files, welcomeFiles(o))
+  for (const main of ['web/src/main.tsx', 'web/src/main.ts']) {
+    if (files[main]) files[main] = files[main].replace(/^(import [^\n]*\n)(?!import)/m, "$1import './welcome.css'\n")
+  }
+  if (!isVite(o)) {
+    files['app/layout.tsx'] = files['app/layout.tsx'].replace('<meta name="viewport" content="width=device-width, initial-scale=1" />', '<meta name="viewport" content="width=device-width, initial-scale=1" />\n        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;600&display=swap" />\n        <link rel="stylesheet" href="/welcome.css" />')
+  } else {
+    files['web/index.html'] = files['web/index.html'].replace('<link rel="icon" href="/favicon.svg" />', '<link rel="icon" href="/favicon.svg" />\n    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;600&display=swap" />')
+  }
   if (!isVite(o)) {
     files['public/favicon.svg'] = FAVICON
     files['.raiko/manifest.ts'] = '// replaced by `raiko dev` and `raiko build`\nexport default {}\n'

package/welcome.mjs

@@ -0,0 +1,329 @@
+// The starter page every template opens on: same design, same steps, framework specific markup.
+import { isVite } from './templates-common.mjs'
+
+export const WELCOME_CSS = `/* Starter page. Delete this file and its import when you build your own UI. */
+.rk-welcome { --bg: #ffffff; --fg: #0a0a0a; --muted: #5c5c5c; --line: #e5e5e5; --soft: #f4f4f5; --accent: #c99400; --code: #f4f4f5;
+  min-height: 100vh; display: grid; grid-template-rows: 1fr auto; background: var(--bg); color: var(--fg);
+  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
+  background-image: radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%);
+  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
+@media (prefers-color-scheme: dark) { .rk-welcome { --bg: #000000; --fg: #ededed; --muted: #a1a1a1; --line: #262626; --soft: #111111; --accent: #ffd23f; --code: #1a1a1a } }
+.rk-welcome * { box-sizing: border-box }
+.rk-main { width: 100%; max-width: 560px; margin: 0 auto; padding: 96px 0 48px; display: flex; flex-direction: column; gap: 32px }
+.rk-logo { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em }
+.rk-logo svg { width: 34px; height: 34px }
+.rk-logo span { color: var(--muted); font-weight: 500 }
+.rk-steps { margin: 0; padding-left: 20px; list-style: decimal; font: 14px/1.9 "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted) }
+.rk-steps li { padding-left: 6px } .rk-steps li::marker { color: var(--muted) }
+.rk-steps code { font: inherit; color: var(--fg); background: var(--code); padding: 2px 6px; border-radius: 5px; font-weight: 600 }
+.rk-ctas { display: flex; gap: 12px; flex-wrap: wrap }
+.rk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; border: 1px solid var(--line); color: var(--fg); background: transparent; transition: background .15s, border-color .15s }
+.rk-btn:hover { background: var(--soft) } .rk-btn.solid { background: var(--fg); color: var(--bg); border-color: var(--fg) } .rk-btn.solid:hover { opacity: .88 }
+.rk-btn svg { width: 16px; height: 16px }
+.rk-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden }
+.rk-card { background: var(--bg); padding: 16px 18px; text-decoration: none; color: var(--fg); display: block; transition: background .15s }
+.rk-card:hover { background: var(--soft) } .rk-card b { display: block; font-size: 14px; font-weight: 600 } .rk-card small { color: var(--muted); font-size: 13px }
+.rk-status { display: flex; align-items: center; gap: 8px; font: 13px "Geist Mono", ui-monospace, monospace; color: var(--muted) }
+.rk-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af } .rk-dot.ok { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18) } .rk-dot.bad { background: #ef4444 }
+.rk-foot { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; padding: 28px 0 36px; font-size: 14px }
+.rk-foot a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px } .rk-foot a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px }
+.rk-welcome :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
+@media (max-width: 520px) { .rk-main { padding-top: 56px } .rk-cards { grid-template-columns: 1fr } .rk-ctas .rk-btn { flex: 1 1 100% } }
+`
+
+export const BOLT = '<svg viewBox="0 0 64 64" aria-hidden="true"><rect width="64" height="64" rx="14" fill="currentColor"/><path d="M36 10 18 36h12l-3 18 19-28H34l2-16z" fill="#ffd23f"/></svg>'
+const ARROW = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg>'
+
+/** Everything the page shows, built from the installer answers. */
+export function welcomeData(o) {
+  const file = { raiko: 'app/page.tsx', react: 'web/src/App.tsx', preact: 'web/src/App.tsx', solid: 'web/src/App.tsx', vue: 'web/src/App.vue', svelte: 'web/src/App.svelte', angular: 'web/src/app.component.ts' }[o.frontend]
+  const cards = [
+    { href: '/api/hello?name=Raiko', title: 'API route', desc: isVite(o) ? 'server/index.ts' : 'app/api/hello/route.ts' },
+    { href: '/docs', title: 'API docs', desc: 'OpenAPI, generated from your schemas' },
+  ]
+  if (o.template === 'full' && !isVite(o)) cards.push({ href: '/chat', title: 'Chat demo', desc: 'encrypted WebSocket, open two tabs' })
+  if (o.auth.length) cards.push({ href: isVite(o) ? '/auth/session' : '/login', title: 'Sign in', desc: o.twofa ? 'with Google Authenticator 2FA' : o.auth.join(', ') })
+  if (o.admin) cards.push({ href: '/admin', title: 'Admin', desc: 'roles in raiko.config.ts' })
+  if (o.email !== 'none' || o.auth.length) cards.push({ href: '/_raiko/mail', title: 'Email previews', desc: 'templates in emails/' })
+  if (cards.length % 2) cards.push({ href: '/health', title: 'Health check', desc: 'for your load balancer' })
+  return {
+    file,
+    cards,
+    deploy: 'https://kwy404.github.io/Raiko.js/docs/#deploy',
+    deployLabel: { vercel: 'Deploy to Vercel', cloudflare: 'Deploy to Cloudflare', docker: 'Deploy with Docker', node: 'Deploy now' }[o.deploy] ?? 'Deploy now',
+    deployCmd: o.deploy === 'node' ? 'build' : 'deploy',
+    docs: 'https://kwy404.github.io/Raiko.js/docs/',
+    foot: [
+      { href: 'https://kwy404.github.io/Raiko.js/docs/', label: 'Learn' },
+      { href: 'https://github.com/kwy404/Raiko.js/tree/main/examples', label: 'Examples' },
+      { href: 'https://kwy404.github.io/Raiko.js/', label: 'Go to raiko.js' },
+    ],
+    ARROW,
+  }
+}
+
+const esc = (t) => String(t).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+
+/** Icon element for the "deploy" button in the icon library the person picked. */
+function iconFor(o) {
+  const fw = o.frontend
+  if (o.icons === 'glyphfox' && ['react', 'preact', 'solid', 'vue', 'svelte'].includes(fw)) return { imp: `import { RocketIcon } from 'glyphfox/${fw}'`, tag: fw === 'vue' ? '<RocketIcon :size="16" />' : '<RocketIcon size={16} />' }
+  if (o.icons === 'lucide') {
+    const pkg = { react: 'lucide-react', preact: 'lucide-preact', solid: 'lucide-solid', vue: 'lucide-vue-next', svelte: 'lucide-svelte' }[fw]
+    if (pkg) return { imp: `import { Rocket } from '${pkg}'`, tag: fw === 'vue' ? '<Rocket :size="16" />' : '<Rocket size={16} />' }
+  }
+  if (o.icons === 'heroicons' && (fw === 'react' || fw === 'vue')) return { imp: `import { RocketLaunchIcon } from '@heroicons/${fw}/24/outline'`, tag: fw === 'vue' ? '<RocketLaunchIcon style="width:16px;height:16px" />' : '<RocketLaunchIcon width={16} height={16} />' }
+  return { imp: '', tag: '' }
+}
+
+/** The page in JSX (React, Preact, Solid). `cls` is className for React, class for the others. */
+function jsxPage(o, w, cls) {
+  const ic = iconFor(o)
+  const cards = w.cards.map((c) => `          <a ${cls}="rk-card" href="${c.href}"><b>${c.title}</b><small>${esc(c.desc)}</small></a>`).join('\n')
+  const foot = w.foot.map((f) => `        <a href="${f.href}">${f.label}</a>`).join('\n')
+  return { ic, body: `    <div ${cls}="rk-welcome">
+      <main ${cls}="rk-main">
+        <div ${cls}="rk-logo"><span ${cls}="rk-mark" dangerouslySetInnerHTML={{ __html: BOLT }} />raiko<span>.js</span></div>
+        <ol ${cls}="rk-steps">
+          <li>Get started by editing <code>${w.file}</code>.</li>
+          <li>Save and see your changes instantly.</li>
+        </ol>
+        <div ${cls}="rk-ctas">
+          <a ${cls}="rk-btn solid" href="${w.deploy}">${ic.tag ? ic.tag + ' ' : ''}${w.deployLabel}</a>
+          <a ${cls}="rk-btn" href="${w.docs}">Read the docs</a>
+        </div>
+        <div ${cls}="rk-cards">
+${cards}
+        </div>
+        <p ${cls}="rk-status"><span ${cls}={'rk-dot ' + STATUS_CLASS} />{STATUS_TEXT}</p>
+      </main>
+      <footer ${cls}="rk-foot">
+${foot}
+      </footer>
+    </div>` }
+}
+
+export function welcomeFiles(o) {
+  const w = welcomeData(o)
+  const f = {}
+  const fw = o.frontend
+  const boltConst = `const BOLT = ${JSON.stringify(BOLT.replace('fill="currentColor"', 'fill="#0a0a0a"'))}`
+  if (fw === 'raiko') {
+    const icon = o.icons === 'glyphfox' ? ["import { toSvg } from 'glyphfox'", "toSvg('rocket', { size: 16 })"] : o.icons === 'lucide' ? ["import { Rocket } from 'lucide-static'", 'Rocket'] : null
+    const cards = w.cards.map((c) => `          <a class="rk-card" href="${c.href}"><b>${c.title}</b><small>${esc(c.desc)}</small></a>`).join('\n')
+    f['public/welcome.css'] = WELCOME_CSS
+    f['app/page.tsx'] = `import { raw } from 'raiko.js'
+${icon ? icon[0] + '\n' : ''}
+${boltConst}
+
+/** The starter page. It is a server component: it runs on the server and ships no JavaScript. */
+export default async function Home() {
+  const renderedAt = new Date().toLocaleTimeString()
+  return (
+    <div class="rk-welcome" data-animate>
+      <main class="rk-main">
+        <div class="rk-logo">{raw(BOLT)}raiko<span>.js</span></div>
+        <ol class="rk-steps">
+          <li>Get started by editing <code>${w.file}</code>.</li>
+          <li>Save and see your changes instantly.</li>
+        </ol>
+        <div class="rk-ctas">
+          <a class="rk-btn solid" href="${w.deploy}">${icon ? `{raw(${icon[1]})} ` : ''}${w.deployLabel}</a>
+          <a class="rk-btn" href="${w.docs}">Read the docs</a>
+        </div>
+        <div class="rk-cards">
+${cards}
+        </div>
+        <p class="rk-status"><span class="rk-dot ok"></span>Server rendered at {renderedAt}</p>
+      </main>
+      <footer class="rk-foot">
+${w.foot.map((x) => `        <a href="${x.href}">${x.label}</a>`).join('\n')}
+      </footer>
+    </div>
+  )
+}
+`
+    return f
+  }
+  f['web/src/welcome.css'] = WELCOME_CSS
+  const status = `api.get('/api/hello', { query: { name: 'Raiko' } })`
+  if (fw === 'react' || fw === 'preact') {
+    const R = fw === 'react'
+    const { ic, body } = jsxPage(o, w, R ? 'className' : 'class')
+    const sx = o.css === 'stylex'
+    f['web/src/App.tsx'] = `import { useEffect, useState } from '${R ? 'react' : 'preact/hooks'}'
+${o.motion && R ? "import { motion } from 'motion/react'\n" : ''}${sx ? "import * as stylex from '@stylexjs/stylex'\n" : ''}${ic.imp ? ic.imp + '\n' : ''}import { api } from './api'
+
+${boltConst}
+${sx ? "const s = stylex.create({ num: { fontVariantNumeric: 'tabular-nums' } })\n" : ''}
+/** The starter page. Replace it with your app. */
+export default function App() {
+  const [api_, setApi] = useState<'wait' | 'ok' | 'bad'>('wait')
+  const [msg, setMsg] = useState('Checking the API...')
+  useEffect(() => {
+    ${status}.then((r) => {
+      setApi(r.data ? 'ok' : 'bad')
+      setMsg(r.data ? \`API says hello to \${r.data.hello}\` : 'The API did not answer: is the server running?')
+    })
+  }, [])
+  const STATUS_CLASS = api_ === 'wait' ? '' : api_
+  const STATUS_TEXT = ${sx ? '<span {...stylex.props(s.num)}>{msg}</span>' : 'msg'}
+  return (
+${o.motion && R ? body.replace('<main className="rk-main">', '<motion.main className="rk-main" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }}>').replace('      </main>', '      </motion.main>') : body}
+  )
+}
+`
+  }
+  if (fw === 'solid') {
+    const { ic, body } = jsxPage(o, w, 'class')
+    f['web/src/App.tsx'] = `import { createSignal, onMount } from 'solid-js'
+${ic.imp ? ic.imp + '\n' : ''}import { api } from './api'
+
+${boltConst}
+
+/** The starter page. Replace it with your app. */
+export default function App() {
+  const [state, setState] = createSignal<'wait' | 'ok' | 'bad'>('wait')
+  const [msg, setMsg] = createSignal('Checking the API...')
+  onMount(() =>
+    ${status}.then((r) => {
+      setState(r.data ? 'ok' : 'bad')
+      setMsg(r.data ? \`API says hello to \${r.data.hello}\` : 'The API did not answer: is the server running?')
+    }),
+  )
+  return (
+${body.replace("dangerouslySetInnerHTML={{ __html: BOLT }}", 'innerHTML={BOLT}').replace("{'rk-dot ' + STATUS_CLASS}", "{'rk-dot ' + (state() === 'wait' ? '' : state())}").replace('{STATUS_TEXT}', '{msg()}')}
+  )
+}
+`
+  }
+  const cardsT = (open, close) => w.cards.map((c) => `      ${open}<a class="rk-card" href="${c.href}"><b>${c.title}</b><small>${esc(c.desc)}</small></a>${close}`).join('\n')
+  const footT = w.foot.map((x) => `    <a href="${x.href}">${x.label}</a>`).join('\n')
+  if (fw === 'vue') {
+    const ic = iconFor(o)
+    f['web/src/App.vue'] = `<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+${ic.imp ? ic.imp + '\n' : ''}import { api } from './api'
+
+${boltConst}
+const state = ref<'wait' | 'ok' | 'bad'>('wait')
+const msg = ref('Checking the API...')
+onMounted(async () => {
+  const r = await ${status}
+  state.value = r.data ? 'ok' : 'bad'
+  msg.value = r.data ? \`API says hello to \${r.data.hello}\` : 'The API did not answer: is the server running?'
+})
+</script>
+
+<!-- The starter page. Replace it with your app. -->
+<template>
+  <div class="rk-welcome">
+    <main class="rk-main">
+      <div class="rk-logo"><span v-html="BOLT"></span>raiko<span>.js</span></div>
+      <ol class="rk-steps">
+        <li>Get started by editing <code>${w.file}</code>.</li>
+        <li>Save and see your changes instantly.</li>
+      </ol>
+      <div class="rk-ctas">
+        <a class="rk-btn solid" href="${w.deploy}">${ic.tag ? ic.tag + ' ' : ''}${w.deployLabel}</a>
+        <a class="rk-btn" href="${w.docs}">Read the docs</a>
+      </div>
+      <div class="rk-cards">
+${cardsT('', '')}
+      </div>
+      <p class="rk-status"><span :class="['rk-dot', state === 'wait' ? '' : state]"></span>{{ msg }}</p>
+    </main>
+    <footer class="rk-foot">
+${footT}
+    </footer>
+  </div>
+</template>
+`
+  }
+  if (fw === 'svelte') {
+    const ic = iconFor(o)
+    f['web/src/App.svelte'] = `<script lang="ts">
+${ic.imp ? '  ' + ic.imp + '\n' : ''}  import { api } from './api'
+
+  ${boltConst}
+  let state = $state<'wait' | 'ok' | 'bad'>('wait')
+  let msg = $state('Checking the API...')
+  ${status}.then((r) => {
+    state = r.data ? 'ok' : 'bad'
+    msg = r.data ? \`API says hello to \${r.data.hello}\` : 'The API did not answer: is the server running?'
+  })
+</script>
+
+<!-- The starter page. Replace it with your app. -->
+<div class="rk-welcome">
+  <main class="rk-main">
+    <div class="rk-logo">{@html BOLT}raiko<span>.js</span></div>
+    <ol class="rk-steps">
+      <li>Get started by editing <code>${w.file}</code>.</li>
+      <li>Save and see your changes instantly.</li>
+    </ol>
+    <div class="rk-ctas">
+      <a class="rk-btn solid" href="${w.deploy}">${ic.tag ? ic.tag + ' ' : ''}${w.deployLabel}</a>
+      <a class="rk-btn" href="${w.docs}">Read the docs</a>
+    </div>
+    <div class="rk-cards">
+${cardsT('', '')}
+    </div>
+    <p class="rk-status"><span class="rk-dot {state === 'wait' ? '' : state}"></span>{msg}</p>
+  </main>
+  <footer class="rk-foot">
+${footT}
+  </footer>
+</div>
+`
+  }
+  if (fw === 'angular') {
+    f['web/src/app.component.ts'] = `import { Component, signal } from '@angular/core'
+import { DomSanitizer } from '@angular/platform-browser'
+import { api } from './api'
+
+${boltConst}
+
+/** The starter page. Replace it with your app. */
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  template: \`
+    <div class="rk-welcome">
+      <main class="rk-main">
+        <div class="rk-logo"><span [innerHTML]="bolt"></span>raiko<span>.js</span></div>
+        <ol class="rk-steps">
+          <li>Get started by editing <code>${w.file}</code>.</li>
+          <li>Save and see your changes instantly.</li>
+        </ol>
+        <div class="rk-ctas">
+          <a class="rk-btn solid" href="${w.deploy}">${w.deployLabel}</a>
+          <a class="rk-btn" href="${w.docs}">Read the docs</a>
+        </div>
+        <div class="rk-cards">
+${w.cards.map((c) => `          <a class="rk-card" href="${c.href}"><b>${c.title}</b><small>${esc(c.desc)}</small></a>`).join('\n')}
+        </div>
+        <p class="rk-status"><span class="rk-dot" [class.ok]="state() === 'ok'" [class.bad]="state() === 'bad'"></span>{{ msg() }}</p>
+      </main>
+      <footer class="rk-foot">
+${w.foot.map((x) => `        <a href="${x.href}">${x.label}</a>`).join('\n')}
+      </footer>
+    </div>
+  \`,
+})
+export class AppComponent {
+  state = signal<'wait' | 'ok' | 'bad'>('wait')
+  msg = signal('Checking the API...')
+  bolt
+  constructor(sanitizer: DomSanitizer) {
+    this.bolt = sanitizer.bypassSecurityTrustHtml(BOLT)
+    ${status}.then((r) => {
+      this.state.set(r.data ? 'ok' : 'bad')
+      this.msg.set(r.data ? \`API says hello to \${r.data.hello}\` : 'The API did not answer: is the server running?')
+    })
+  }
+}
+`
+  }
+  return f
+}