@weft-js/create 0.1.1 → 0.1.2

package/src/index.mjs

@@ -1,16 +1,26 @@
-// create-weft: write a new app's files (research 26 §6, research 28 §6). `--ui`: `warp` adds @weft-js/warp and `warp()` in
-// weft.config.ts, `headless` adds @weft-js/warp-core's spec CSS under the app's own markup, `tailwind` adds Tailwind and its Vite plugin,
-// `none` adds nothing. `--db`, `--layer`
-// and `--auth` add a database, a todo app and a sign-in flow (stack.mjs); `--runtime` is what `weft build` targets.
-// AGENTS.md needs the installed weft, so bin/create-weft.mjs runs `weft agents-md` right after the install. Everything
-// else (.weft/, the slot modules) is generated by `weft` itself on the first `weft dev` or `weft check`, so a scaffold
-// never goes stale against the CLI.
+// `--template` lays a real app over all that (templates.mjs). A short AGENTS.md is written here; the full one needs the
+// installed weft, so bin/create-weft.mjs runs `weft agents-md` right after the install. Everything else (.weft/, the slot
+// modules) is generated by `weft` itself on the first `weft dev` or `weft check`, so a scaffold never goes stale against
+// the CLI.
 
 import { randomBytes } from 'node:crypto'
 import { existsSync, mkdirSync, readdirSync, writeFileSync } from 'node:fs'
 import { basename, dirname, join } from 'node:path'
 import { customAuth } from './data.mjs'
-import { classes, context, loginPage, stackDeps, stackFiles, TAILWIND_CSS, TAILWIND_VITE, tailwindPackages, todosPage, VERSION } from './stack.mjs'
+import {
+  classes,
+  context,
+  loginPage,
+  sharedAuthTables,
+  stackDeps,
+  stackFiles,
+  TAILWIND_CSS,
+  TAILWIND_VITE,
+  tailwindPackages,
+  todosPage,
+  VERSION,
+} from './stack.mjs'
+import { agentsFile, loadTemplate, withTemplate } from './templates.mjs'
 
 /** What `--ui` takes. */
 export const UI = ['warp', 'headless', 'tailwind', 'none']
@@ -22,52 +32,81 @@ export const LAYERS = ['drizzle', 'prisma', 'native']
 export const RUNTIMES = ['node', 'bun', 'deno']
 /** What `--config` takes. */
 export const CONFIGS = ['ts', 'json', 'yaml']
+export { TEMPLATES, withTemplate } from './templates.mjs'
 
+const json = (v) => JSON.stringify(v, null, 2) + '\n'
+const title = (name) => name.replace(/[-_]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
 
-const json = v => JSON.stringify(v, null, 2) + '\n'
-const title = name => name.replace(/[-_]+/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
-
-/** `weft.config.ts`, `.json` or `.yaml`: one schema, so the same app in each (research 34 §2). */
-const LAYER_PLUGIN = { prisma: { pkg: '@weft-js/db/plugin-prisma', name: 'prisma' }, native: { pkg: '@weft-js/db/plugin-native', name: 'native' } }
+/** `weft.config.ts`, `.json` or `.yaml`: one schema, so the same app in each. */
+const LAYER_PLUGIN = {
+  prisma: { pkg: '@weft-js/db/plugin-prisma', name: 'prisma' },
+  native: { pkg: '@weft-js/db/plugin-native', name: 'native' },
+}
 
-const appPlugins = ({ ui, layer }) => [...(ui === 'warp' ? [{ pkg: '@weft-js/warp', name: 'warp' }] : []), ...(LAYER_PLUGIN[layer] ? [LAYER_PLUGIN[layer]] : [])]
+const appPlugins = ({ ui, layer }) => [
+  ...(ui === 'warp' ? [{ pkg: '@weft-js/warp', name: 'warp' }] : []),
+  ...(LAYER_PLUGIN[layer] ? [LAYER_PLUGIN[layer]] : []),
+]
 
 /** What each plugin a scaffold picks declares. `weft check` fails a scaffold where these fall behind the plugin. */
 const GRANTS = {
-  '@weft-js/warp': ['fs.read:node_modules/@weft-js/warp-core/**', 'fs.write:$TMPDIR/warp-seed-*', 'spawn:node'],
+  '@weft-js/warp': [
+    'fs.read:node_modules/@weft-js/warp-core/**',
+    'fs.write:$TMPDIR/warp-seed-*',
+    'spawn:node',
+  ],
   '@weft-js/db/plugin-prisma': ['fs.read:prisma/**', 'fs.write:prisma/migrations/**', 'spawn:node'],
   '@weft-js/db/plugin-native': ['fs.read:migrations/**', 'fs.write:migrations/**'],
 }
 
 /** Choosing a plugin here is approving it. There's no install yet, so `weft plugins approve --all` pins the code later. */
 function pluginLock(options) {
-  const plugins = Object.fromEntries(appPlugins(options).map(p => [p.pkg, { version: null, integrity: null, permissions: GRANTS[p.pkg], provides: [], undeclared: [] }]))
-  return Object.keys(plugins).length ? { '.weft/plugins.lock.json': json({ version: 1, plugins }) } : {}
+  const plugins = Object.fromEntries(
+    appPlugins(options).map((p) => [
+      p.pkg,
+      { version: null, integrity: null, permissions: GRANTS[p.pkg], provides: [], undeclared: [] },
+    ]),
+  )
+  return Object.keys(plugins).length
+    ? { '.weft/plugins.lock.json': json({ version: 1, plugins }) }
+    : {}
 }
 
-function configFile(format, { ui, label, runtime, layer }) {
+function configFile(format, { ui, label, runtime, layer, warp }) {
   const plugins = appPlugins({ ui, layer })
+  const entry = (p) => (p.pkg === '@weft-js/warp' && warp ? [p.pkg, warp] : p.pkg)
   const site = { name: label, title: `%s · ${label}`, description: 'Made with weft.' }
   if (format === 'json') {
-    const config = { $schema: './.weft/config.schema.json', site, ...(plugins.length && { plugins: plugins.map(p => p.pkg) }), ...(runtime !== 'node' && { runtime }) }
+    const config = {
+      $schema: './.weft/config.schema.json',
+      site,
+      ...(plugins.length && { plugins: plugins.map(entry) }),
+      ...(runtime !== 'node' && { runtime }),
+    }
     return { 'weft.config.json': json(config) }
   }
   if (format === 'yaml') {
     return {
       'weft.config.yaml':
         `# yaml-language-server: $schema=./.weft/config.schema.json\nsite:\n` +
-        Object.entries(site).map(([k, v]) => `  ${k}: ${JSON.stringify(v)}\n`).join('') +
-        (plugins.length ? `plugins:\n${plugins.map(p => `  - "${p.pkg}"\n`).join('')}` : '') +
+        Object.entries(site)
+          .map(([k, v]) => `  ${k}: ${JSON.stringify(v)}\n`)
+          .join('') +
+        (plugins.length
+          ? `plugins:\n${plugins.map((p) => `  - ${JSON.stringify(entry(p))}\n`).join('')}`
+          : '') +
         (runtime !== 'node' ? `runtime: ${runtime}\n` : ''),
     }
   }
   return {
     'weft.config.ts':
       `import { defineConfig } from '@weft-js/core/config'\n` +
-      plugins.map(p => `import { ${p.name} } from '${p.pkg}/plugin'\n`).join('') +
+      plugins.map((p) => `import { ${p.name} } from '${p.pkg}/plugin'\n`).join('') +
       `\nexport default defineConfig({\n` +
       `  site: { name: ${JSON.stringify(label)}, title: ${JSON.stringify(site.title)}, description: 'Made with weft.' },\n` +
-      (plugins.length ? `  plugins: [${plugins.map(p => `${p.name}()`).join(', ')}],\n` : '') +
+      (plugins.length
+        ? `  plugins: [${plugins.map((p) => `${p.name}(${p.pkg === '@weft-js/warp' && warp ? JSON.stringify(warp) : ''})`).join(', ')}],\n`
+        : '') +
       (runtime !== 'node' ? `  runtime: '${runtime}',\n` : '') +
       `})\n`,
   }
@@ -75,36 +114,136 @@ function configFile(format, { ui, label, runtime, layer }) {
 
 /**
  * The files for an app, as `{ path: text }`.
- * @param {{ ui?: string, name?: string, version?: string, db?: string, layer?: string, auth?: boolean | 'custom', runtime?: string, config?: string, secret?: string }} [options]
+ * @param {{ ui?: string, name?: string, version?: string, db?: string, layer?: string, auth?: boolean | 'custom', runtime?: string, config?: string, secret?: string, template?: string, pm?: string }} [options]
  */
-export function template({ ui = 'warp', name = 'weft-app', version = VERSION, db = 'none', layer = 'drizzle', auth = false, runtime = 'node', config = 'ts', secret = randomBytes(32).toString('base64') } = {}) {
+export function template(options = {}) {
+  const {
+    ui = 'warp',
+    name = 'weft-app',
+    version = VERSION,
+    db = 'none',
+    layer = 'drizzle',
+    auth = false,
+    runtime = 'node',
+    config = 'ts',
+    secret = randomBytes(32).toString('base64'),
+    template: chosen,
+  } = withTemplate(options)
   if (!UI.includes(ui)) throw new Error(`--ui must be one of ${UI.join(', ')} (got "${ui}")`)
   if (!DB.includes(db)) throw new Error(`--db must be one of ${DB.join(', ')} (got "${db}")`)
-  if (!RUNTIMES.includes(runtime)) throw new Error(`--runtime must be one of ${RUNTIMES.join(', ')} (got "${runtime}")`)
-  if (!CONFIGS.includes(config)) throw new Error(`--config must be one of ${CONFIGS.join(', ')} (got "${config}")`)
-  if (!LAYERS.includes(layer)) throw new Error(`--layer must be one of ${LAYERS.join(', ')} (got "${layer}")`)
-  if (auth && db === 'none') throw new Error('--auth keeps users in a database: add --db sqlite, postgres or mysql')
+  if (!RUNTIMES.includes(runtime))
+    throw new Error(`--runtime must be one of ${RUNTIMES.join(', ')} (got "${runtime}")`)
+  if (!CONFIGS.includes(config))
+    throw new Error(`--config must be one of ${CONFIGS.join(', ')} (got "${config}")`)
+  if (!LAYERS.includes(layer))
+    throw new Error(`--layer must be one of ${LAYERS.join(', ')} (got "${layer}")`)
+  if (auth && db === 'none')
+    throw new Error('--auth keeps users in a database: add --db sqlite, postgres or mysql')
+  const overlay = chosen && loadTemplate(chosen)
   const label = title(name)
   const stack = stackDeps({ db, auth: auth === true, layer, version })
   const deps = { '@weft-js/core': version, '@weft-js/start': version }
   if (ui === 'warp') deps['@weft-js/warp'] = version
   if (ui === 'headless') deps['@weft-js/warp-core'] = version
   if (ui === 'tailwind') Object.assign(stack.dev, tailwindPackages)
+  for (const [dep, wanted] of Object.entries(overlay?.dependencies ?? {}))
+    deps[dep] = dep.startsWith('@weft-js/') ? version : wanted
 
-  const files = {
+  const files = baseFiles({
+    name,
+    version,
+    db,
+    layer,
+    ui,
+    config,
+    label,
+    runtime,
+    overlay,
+    stack,
+    deps,
+    auth,
+  })
+  Object.assign(files, pluginLock({ ui, layer }))
+  if (options.pm === 'pnpm')
+    files['pnpm-workspace.yaml'] = pnpmSettings(db !== 'none' && layer === 'prisma')
+  if (ui !== 'warp') files['src/app.css'] = css(ui)
+  if (ui === 'tailwind') files['vite.config.ts'] = TAILWIND_VITE
+  if (db !== 'none') {
+    Object.assign(files, stackFiles({ db, auth: auth === true, name, secret, layer }))
+    if (!overlay) files['src/routes/todos/index.tsx'] = todosPage(ui)
+    if (auth === true) files['src/routes/login.tsx'] = loginPage(ui)
+    if (auth === 'custom')
+      Object.assign(files, {
+        'src/auth.server.ts': customAuth,
+        'src/context.server.ts': context(true),
+      })
+  }
+  if (overlay) {
+    for (const path of Object.keys(files))
+      if (/^src\/(routes\/(about\.tsx|todos\/)|server\/todos\.ts)/.test(path)) delete files[path]
+    if (auth) files['src/db/auth.ts'] = sharedAuthTables()
+    Object.assign(files, overlay.files)
+  }
+  return files
+}
+
+// pnpm 11 and later stop an install at a dependency's build script that nobody has allowed or refused. None is needed:
+// esbuild ships its binary as an optional package, and the app's own postinstall runs `prisma generate`.
+const pnpmSettings = (prisma) =>
+  `allowBuilds:\n  esbuild: false\n${prisma ? "  '@prisma/engines': false\n  prisma: false\n" : ''}`
+
+function baseFiles({
+  name,
+  version,
+  db,
+  layer,
+  ui,
+  config,
+  label,
+  runtime,
+  overlay,
+  stack,
+  deps,
+  auth,
+}) {
+  return {
     'package.json': json({
       name,
       private: true,
       type: 'module',
-      scripts: { dev: 'weft dev', build: 'weft build', check: 'weft check', typecheck: 'weft tsc', start: 'weft start', ...(db !== 'none' && { 'db:generate': 'weft db generate' }), ...(db !== 'none' && layer === 'prisma' && { postinstall: 'prisma generate' }) },
+      scripts: {
+        dev: 'weft dev',
+        build: 'weft build',
+        check: 'weft check',
+        typecheck: 'weft tsc',
+        start: 'weft start',
+        ...(db !== 'none' && { 'db:generate': 'weft db generate' }),
+        ...(db !== 'none' && layer === 'prisma' && { postinstall: 'prisma generate' }),
+      },
       dependencies: { ...deps, ...stack.deps },
       devDependencies: { '@weft-js/cli': version, typescript: '7.0.2', ...stack.dev },
     }),
-    ...configFile(config, { ui, label, runtime, layer: db === 'none' ? 'drizzle' : layer }),
+    ...configFile(config, {
+      ui,
+      label,
+      runtime,
+      layer: db === 'none' ? 'drizzle' : layer,
+      warp: overlay?.warp,
+    }),
     'tsconfig.json': json({
       compilerOptions: {
-        target: 'es2022', module: 'esnext', moduleResolution: 'bundler', strict: true, noEmit: true, skipLibCheck: true,
-        jsx: 'preserve', jsxImportSource: '@weft-js/core', lib: ['es2023', 'dom', 'dom.iterable'], paths: { '#/*': ['./src/*'] }, types: db === 'none' ? ['@weft-js/core/client'] : ['@weft-js/core/client', 'node'], plugins: [{ name: '@weft-js/cli/ts-plugin' }],
+        target: 'es2022',
+        module: 'esnext',
+        moduleResolution: 'bundler',
+        strict: true,
+        noEmit: true,
+        skipLibCheck: true,
+        jsx: 'preserve',
+        jsxImportSource: '@weft-js/core',
+        lib: ['es2023', 'dom', 'dom.iterable'],
+        paths: { '#/*': ['./src/*'] },
+        types: db === 'none' ? ['@weft-js/core/client'] : ['@weft-js/core/client', 'node'],
+        plugins: [{ name: '@weft-js/cli/ts-plugin' }],
       },
       include: ['src', ...(config === 'ts' ? ['weft.config.ts'] : []), '.weft/*.d.ts'],
     }),
@@ -113,23 +252,20 @@ export function template({ ui = 'warp', name = 'weft-app', version = VERSION, db
     '.gitignore': `node_modules/\n.weft/*\n!.weft/plugins.lock.json\n.output/\ndist/\n${db === 'none' ? '' : '.env\n.data/\n'}${layer === 'prisma' ? 'src/generated/\n' : ''}`,
     'src/routes/_layout.tsx': layout(ui, { db, auth }),
     'src/routes/index.tsx': home(ui, label),
+    'AGENTS.md': agentsFile({ ui, db, layer, shipped: overlay?.pages, auth }),
     'src/routes/about.tsx': `export const meta = { title: 'About', description: 'What this app is.' }\n\nexport default function About() {\n  return <h1>About</h1>\n}\n`,
   }
-  Object.assign(files, pluginLock({ ui, layer }))
-  if (ui !== 'warp') files['src/app.css'] = css(ui)
-  if (ui === 'tailwind') files['vite.config.ts'] = TAILWIND_VITE
-  if (db !== 'none') {
-    Object.assign(files, stackFiles({ db, auth: auth === true, name, secret, layer }), { 'src/routes/todos/index.tsx': todosPage(ui) })
-    if (auth === true) files['src/routes/login.tsx'] = loginPage(ui)
-    if (auth === 'custom') Object.assign(files, { 'src/auth.server.ts': customAuth, 'src/context.server.ts': context(true) })
-  }
-  return files
 }
 
 /** Write the app into `dir` (which must be missing or empty). */
 export function scaffold(dir, options = {}) {
   if (existsSync(dir) && readdirSync(dir).length) throw new Error(`${dir} is not empty`)
-  const files = template({ name: basename(dir).toLowerCase().replace(/[^a-z0-9-_.]/g, '-'), ...options })
+  const files = template({
+    name: basename(dir)
+      .toLowerCase()
+      .replace(/[^a-z0-9-_.]/g, '-'),
+    ...options,
+  })
   for (const [rel, text] of Object.entries(files)) {
     mkdirSync(dirname(join(dir, rel)), { recursive: true })
     writeFileSync(join(dir, rel), text)
@@ -139,13 +275,23 @@ export function scaffold(dir, options = {}) {
 
 function layout(ui, options) {
   const text = shell(ui, options)
-  return ui === 'tailwind' ? text.replace('<nav>', '<nav class="flex gap-4 p-4">').replace('<main>', '<main class="p-4">') : text
+  return ui === 'tailwind'
+    ? text.replace('<nav>', '<nav class="flex gap-4 p-4">').replace('<main>', '<main class="p-4">')
+    : text
 }
 
 function shell(ui, { db, auth: which }) {
   const auth = which === true
-  const imports = ui === 'warp' ? '' : (ui === 'headless' ? `import '@weft-js/warp-core/styles/warp.css'\n` : '') + `import '../app.css'\n`
+  const imports =
+    ui === 'warp'
+      ? ''
+      : (ui === 'headless' ? `import '@weft-js/warp-core/styles/warp.css'\n` : '') +
+        `import '../app.css'\n`
   const links = db === 'none' ? '' : `\n        <Link href="/todos">Todos</Link>`
+  const signOut =
+    ui === 'warp'
+      ? '<Button emphasis="ghost" size="sm" onClick={() => signOut()}>Sign out</Button>'
+      : '<button type="button" onClick={() => signOut()}>Sign out</button>'
   if (!auth) {
     return `${imports}import { Link, type RouteProps } from '@weft-js/start'
 
@@ -162,7 +308,7 @@ export default function Root(props: RouteProps) {
 }
 `
   }
-  return `${imports}import { Link, type LoadArgs, type RouteProps } from '@weft-js/start'
+  return `${imports}${ui === 'warp' ? "import { Button } from '@weft-js/warp'\n" : ''}import { Link, type LoadArgs, type RouteProps } from '@weft-js/start'
 import { me, signOut } from '#/server/session'
 
 export const load = ({ ctx }: LoadArgs) => me.fetch()
@@ -173,7 +319,7 @@ export default function Root(props: RouteProps<typeof load>) {
       <nav>
         <Link href="/">Home</Link>
         <Link href="/about">About</Link>${links}
-        {props.data ? <button type="button" onClick={() => signOut()}>Sign out</button> : <Link href="/login">Sign in</Link>}
+        {props.data ? ${signOut} : <Link href="/login">Sign in</Link>}
       </nav>
       <main>{props.children}</main>
     </>
@@ -227,9 +373,22 @@ const named = (ui, part) => (classes(ui, part) ? ` class="${classes(ui, part)}"`
 function css(ui) {
   if (ui === 'tailwind') return TAILWIND_CSS
   // headless rides warp's tokens (warp-core's warp.css, the fluid title size included); none brings its own.
-  const v = ui === 'headless'
-    ? { bg: 'var(--warp-color-page)', fg: 'var(--warp-color-text)', accent: 'var(--warp-color-accent-solid)', radius: 'var(--warp-radius-surface)', title: 'var(--warp-text-title-size)' }
-    : { bg: 'Canvas', fg: 'CanvasText', accent: 'LinkText', radius: '8px', title: 'clamp(1.5rem, 1.2rem + 2cqi, 2.5rem)' }
+  const v =
+    ui === 'headless'
+      ? {
+          bg: 'var(--warp-color-page)',
+          fg: 'var(--warp-color-text)',
+          accent: 'var(--warp-color-accent-solid)',
+          radius: 'var(--warp-radius-surface)',
+          title: 'var(--warp-text-title-size)',
+        }
+      : {
+          bg: 'Canvas',
+          fg: 'CanvasText',
+          accent: 'LinkText',
+          radius: '8px',
+          title: 'clamp(1.5rem, 1.2rem + 2cqi, 2.5rem)',
+        }
   return `:root { color-scheme: light dark; }
 body { margin: 0; font-family: system-ui, sans-serif; background: ${v.bg}; color: ${v.fg}; }
 nav { display: flex; gap: 1rem; padding: 1rem; }

package/src/stack/pages.mjs

@@ -0,0 +1,151 @@
+// Tailwind: the same files `weft add tailwind` writes (packages/cli/src/tailwind.mjs, held equal by a test).
+/** What `--ui tailwind` adds, pinned. */
+export const tailwindPackages = { tailwindcss: '4.3.3', '@tailwindcss/vite': '4.3.3' }
+/** `vite.config.ts` for `--ui tailwind`. */
+export const TAILWIND_VITE = `import tailwindcss from '@tailwindcss/vite'
+
+export default { plugins: [tailwindcss()] }
+`
+/** The stylesheet for `--ui tailwind`. */
+export const TAILWIND_CSS = `@import "tailwindcss";
+`
+const tw = {
+  card: 'mx-auto max-w-2xl space-y-4 rounded-lg border border-current/15 p-6',
+  title: 'text-2xl font-semibold',
+  button: 'rounded-md border border-current/30 px-3 py-1.5 hover:bg-current/5',
+  input: 'rounded-md border border-current/30 px-3 py-1.5',
+}
+/** The class of a scaffold element: Tailwind's utilities, or the plain CSS in src/app.css. */
+export const classes = (ui, part) => (ui === 'tailwind' ? tw[part] : part === 'card' ? 'card' : '')
+const attr = (ui, part) => (ui === 'tailwind' ? ` class="${tw[part]}"` : '')
+
+/** The page's controls in each UI kit: warp's components, or plain elements with the same roles and names. */
+export const controls = (ui) =>
+  ui === 'warp'
+    ? {
+        imports: `import { Alert, Button, Card, Checkbox, Input } from '@weft-js/warp'\n`,
+        card: (title, body) => `<Card title=${JSON.stringify(title)}>${body}</Card>`,
+        input: (label, box, type = 'text') =>
+          `<Input label=${JSON.stringify(label)} type="${type}" value={${box}.value} onInput={e => (${box}.value = e.currentTarget.value)} />`,
+        submit: (label, pending) => `<Button type="submit" loading={${pending}}>${label}</Button>`,
+        button: (label, onClick, extra = '') =>
+          `<Button emphasis="ghost" ${extra}onClick={${onClick}}>${label}</Button>`,
+        error: (box) => `{${box}.value && <Alert tone="critical" live>{${box}.value}</Alert>}`,
+        row: `<Checkbox checked={t.done} onChange={() => toggleTodo({ id: t.id })}>{t.title}</Checkbox>
+          <Button emphasis="ghost" tone="neutral" size="sm" icon="x" aria-label={\`Delete \${t.title}\`} onClick={() => deleteTodo({ id: t.id })} />`,
+      }
+    : {
+        imports: '',
+        card: (title, body) =>
+          `<section class="${classes(ui, 'card')}"><h1${attr(ui, 'title')}>${title}</h1>${body}</section>`,
+        input: (label, box, type = 'text') =>
+          `<label>${label} <input${attr(ui, 'input')} type="${type}" value={${box}.value} onInput={e => (${box}.value = e.currentTarget.value)} /></label>`,
+        submit: (label, pending) =>
+          `<button${attr(ui, 'button')} type="submit" disabled={${pending}}>${label}</button>`,
+        button: (label, onClick, extra = '') =>
+          `<button${attr(ui, 'button')} type="button" ${extra}onClick={${onClick}}>${label}</button>`,
+        error: (box) => `{${box}.value && <p role="alert">{${box}.value}</p>}`,
+        row: `<label>
+            <input type="checkbox" checked={t.done} onChange={() => toggleTodo({ id: t.id })} /> {t.title}
+          </label>
+          <button type="button" aria-label={\`Delete \${t.title}\`} onClick={() => deleteTodo({ id: t.id })}>×</button>`,
+      }
+
+/** `/todos`: the list on the server functions, written for this `--ui`. */
+export function todosPage(ui) {
+  const c = controls(ui)
+  return `import type { Meta } from '@weft-js/start'
+import { Boundary, state } from '@weft-js/core'
+${c.imports}import { addTodo, deleteTodo, listTodos, toggleTodo } from '#/server/todos'
+
+export const meta: Meta = { title: 'Todos', description: 'Your todo list: add, tick off and delete.' }
+
+// The query is made in here, inside the Boundary, so the Boundary sees it: it shows \`pending\` until the list arrives.
+function TodoList() {
+  const todos = listTodos()
+  return (
+    <ul class="todos">
+      {(todos.value ?? []).map(t => (
+        <li key={t.id} class={t.done ? 'done' : 'open'}>
+          ${c.row}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default function Todos() {
+  const title = state('')
+  const problem = state('')
+  const add = async (e: SubmitEvent) => {
+    e.preventDefault()
+    const text = title.value.trim()
+    if (!text) return
+    title.value = ''
+    problem.value = ''
+    await addTodo({ title: text }).catch((err: Error) => (problem.value = err.message))
+  }
+  return (
+    ${c.card(
+      'Todos',
+      `
+      <form onSubmit={add}>
+        ${c.input('New todo', 'title')}
+        ${c.submit('Add', 'addTodo.pending.value')}
+      </form>
+      ${c.error('problem')}
+      <Boundary pending={<p>Loading…</p>}>
+        <TodoList />
+      </Boundary>
+    `,
+    )}
+  )
+}
+`
+}
+
+/** `/login`: sign in and sign up, written for this `--ui`. */
+export function loginPage(ui) {
+  const c = controls(ui)
+  return `import { redirect, type LoadArgs, type Meta } from '@weft-js/start'
+import { state } from '@weft-js/core'
+${c.imports}import { signIn, signUp } from '#/server/session'
+
+export const load = ({ ctx }: LoadArgs) => {
+  if (ctx.user) redirect('/todos')
+}
+
+export const meta: Meta = { title: 'Sign in', description: 'Sign in, or make an account.' }
+
+export default function Login() {
+  const creating = state(false)
+  const name = state('')
+  const email = state('')
+  const password = state('')
+  const problem = state('')
+  const submit = async (e: SubmitEvent) => {
+    e.preventDefault()
+    problem.value = ''
+    const done = creating.value
+      ? signUp({ name: name.value, email: email.value, password: password.value })
+      : signIn({ email: email.value, password: password.value })
+    await done.catch((err: Error) => (problem.value = err.message))
+  }
+  return (
+    ${c.card(
+      'Sign in',
+      `
+      <form onSubmit={submit}>
+        {creating.value && ${c.input('Name', 'name')}}
+        ${c.input('Email', 'email', 'email')}
+        ${c.input('Password', 'password', 'password')}
+        ${c.submit(`{creating.value ? 'Create account' : 'Sign in'}`, 'signIn.pending.value || signUp.pending.value')}
+      </form>
+      ${c.error('problem')}
+      ${c.button(`{creating.value ? 'I have an account' : 'Create an account'}`, '() => (creating.value = !creating.value)')}
+    `,
+    )}
+  )
+}
+`
+}