pgkiln 0.84.0 → 0.86.0

package/src/builder/appwizard.ts

@@ -7,7 +7,7 @@ import { LoadError } from '../dataload.ts';
 import type { Session } from '../session.ts';
 import { aliasFor, check, ITEM, type Created } from './appfromfile.ts';
 import { addDashboard, parseBook } from './appsheets.ts';
-import { finishGeneratedApp, checkNewApp, createApp, createAppError, featuresFrom, FEATURES, reservedSchema, startFromBoilerplate, DEFAULT_APP_ICON, type CheckedApp, type Features } from './newapp.ts';
+import { finishGeneratedApp, checkNewApp, createApp, createAppError, featuresFrom, featureText, FEATURES, reservedSchema, startFromBoilerplate, DEFAULT_APP_ICON, type CheckedApp, type Features } from './newapp.ts';
 import { currentWorkspace } from './workspaces.ts';
 import { back, BASE, csrf, developer, flash, input, region, select, send, shell, type Body, type Req } from './ui.ts';
 import { iconPicker } from './forms.ts';
@@ -16,6 +16,7 @@ import { BASE_STYLES } from '../runtime/styles.ts';
 import { LANGUAGE_NAMES } from '../i18n.ts';
 import { secretKeyConfigured } from '../secrets.ts';
 import { appPublicKey } from '../push.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // Two more ways into the create application wizard:
 // - From pasted data (APEX: Create App from a File → Copy and Paste): CSV or
@@ -110,7 +111,7 @@ export interface Plan {
 /** Create the application on existing tables and views (each with its page type) and the features, in one transaction. */
 export async function buildAppFromTables(checked: CheckedApp, plans: Plan[], chart: boolean, features: Partial<Features> = {}): Promise<Created> {
   plans = plans.filter((p) => p.kind);
-  if (plans.length > MAX_TABLES) throw new LoadError(`Choose at most ${MAX_TABLES} tables and views.`);
+  if (plans.length > MAX_TABLES) throw new LoadError(tx('aw.at_most_tables', { n: MAX_TABLES }));
   for (const p of plans) if (!kindsFor(p.rel).includes(p.kind)) throw new LoadError(`${p.rel.relname} can't have the page type ${PAGE_KINDS[p.kind] ?? p.kind}.`);
   return owner.tx(async (c) => {
     const app = await createApp(c, checked).catch((e) => {
@@ -157,9 +158,9 @@ export async function buildAppFromTables(checked: CheckedApp, plans: Plan[], cha
       const skipped: string[] = [];
       const dash = await addDashboard(c, checked.alias, tables, next, skipped);
       if (dash) pages.push(dash);
-      else notes.push('No dashboard: no table has a foreign key, or a text, yes/no or date column whose statistics show a few values that repeat (ANALYZE the tables first).');
+      else notes.push(tx('aw.no_dashboard'));
       if (skipped.length)
-        notes.push(`Not on the dashboard: ${skipped.map((t) => t.replace(/^.*\./, '').replace(/"/g, '')).join(', ')} (row level security: the application's role may see none of the rows).`);
+        notes.push(tx('aw.not_on_dashboard', { tables: skipped.map((t) => t.replace(/^.*\./, '').replace(/"/g, '')).join(', ') }));
     }
     await finishGeneratedApp(c, app.id, { description: checked.description, features, notes });
     return { app: { id: app.id, alias: checked.alias, existingAccount: app.existingAccount }, pages, notes };
@@ -168,28 +169,27 @@ export async function buildAppFromTables(checked: CheckedApp, plans: Plan[], cha
 
 export async function appWizardRoutes(app: FastifyInstance) {
   const page = (s: Session, reply: FastifyReply, title: string, crumb: string, main: Raw) =>
-    send(reply, s, shell(s, title, [['App Builder', BASE], ['Create', `${BASE}/create`], [crumb]], html`<div class="ab-narrow">${main}</div>`));
+    send(reply, s, shell(s, title, [[tx('aw.app_builder'), BASE], [tx('aw.create'), `${BASE}/create`], [crumb]], html`<div class="ab-narrow">${main}</div>`));
 
   // ---------------------------------------------------------------- pasted data
   const pasteForm = (s: Session, b: Body = {}, error?: string) =>
-    html`<h1>Create an application from pasted data</h1>
-      <p class="muted">Paste rows copied from a spreadsheet, or CSV or TSV text: the delimiter (tab, comma, semicolon or |) is detected. Next you check the proposed table and its columns, as for a file.
-        <a href="${BASE}/create/file">Upload a file</a> instead.</p>
-      ${region('Data', html`${error ? html`<div class="alert alert-error" role="alert">${error}</div>` : ''}
+    html`<h1>${tx('aw.create_an_application_from_pasted')}</h1>
+      <p class="muted">${tx.rich('aw.paste_intro', { link: html`<a href="${BASE}/create/file">${tx('aw.upload_a_file')}</a>` })}</p>
+      ${region(tx('aw.data'), html`${error ? html`<div class="alert alert-error" role="alert">${error}</div>` : ''}
         <form method="post" action="${BASE}/create/paste">${csrf(s)}
           <div class="form-grid">
-            ${input('title', 'Name', b.title ?? 'Pasted data', { help: 'Names the application and the table (you can change both in the next step).' })}
-            <div class="field" data-wide><label class="label" for="f_data">Data</label>
+            ${input('title', tx('aw.name'), b.title ?? tx('aw.pasted_data'), { help: tx('aw.names_the_application_and_the') })}
+            <div class="field" data-wide><label class="label" for="f_data">${tx('aw.data')}</label>
               <textarea id="f_data" name="data" class="code" rows="12" required spellcheck="false" placeholder="name,city,joined&#10;Ann,Utrecht,2026-01-05">${b.data ?? ''}</textarea></div>
-            <div class="field"><label class="check"><input type="checkbox" name="headers" value="true"${b.headers === undefined || b.headers === 'true' ? raw(' checked') : ''}> First row contains column names</label></div>
+            <div class="field"><label class="check"><input type="checkbox" name="headers" value="true"${b.headers === undefined || b.headers === 'true' ? raw(' checked') : ''}> ${tx('aw.first_row_contains_column_names')}</label></div>
           </div>
-          <div class="buttons"><a class="btn" href="${BASE}/create">Cancel</a><button class="btn btn-hot">${icon('upload')} Next</button></div>
+          <div class="buttons"><a class="btn" href="${BASE}/create">${tx('aw.cancel')}</a><button class="btn btn-hot">${icon('upload')} ${tx('aw.next')}</button></div>
         </form>`)}`;
 
   app.get(`${BASE}/create/paste`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
-    return page(s, reply, 'Create application from pasted data', 'Pasted data', pasteForm(s));
+    return page(s, reply, tx('aw.paste_title'), tx('aw.pasted_data'), pasteForm(s));
   });
 
   app.post(`${BASE}/create/paste`, async (req: Req, reply) => {
@@ -198,19 +198,19 @@ export async function appWizardRoutes(app: FastifyInstance) {
     const b = req.body ?? {};
     const fail = (message: string) => {
       reply.code(422);
-      return page(s, reply, 'Create application from pasted data', 'Pasted data', pasteForm(s, { ...b, headers: b.headers === 'true' ? 'true' : 'false' }, message));
+      return page(s, reply, tx('aw.paste_title'), tx('aw.pasted_data'), pasteForm(s, { ...b, headers: b.headers === 'true' ? 'true' : 'false' }, message));
     };
     const text = typeof b.data === 'string' ? b.data : '';
-    if (!text.trim()) return fail('Paste the data.');
+    if (!text.trim()) return fail(tx('aw.paste_the_data'));
     const data = Buffer.from(text, 'utf8');
-    if (data.length > MAX_PASTE) return fail(`At most ${MAX_PASTE / 1024 / 1024} MB of text can be pasted; upload a file instead.`);
+    if (data.length > MAX_PASTE) return fail(tx('aw.paste_max', { mb: MAX_PASTE / 1024 / 1024 }));
     const filename = pastedName(String(b.title ?? ''));
     const headers = b.headers === 'true';
     try {
       // read as delimited text whatever it looks like
       const sheets = await parseBook(filename, data, { headers });
-      if (sheets[0].format !== 'csv') throw new LoadError('Paste delimited text (CSV or TSV); upload JSON, XML or Excel files with From a file.');
-      if (!sheets[0].rows.length) throw new LoadError('The data has column names but no rows.');
+      if (sheets[0].format !== 'csv') throw new LoadError(tx('aw.paste_delimited_text_csv_or'));
+      if (!sheets[0].rows.length) throw new LoadError(tx('aw.the_data_has_column_names'));
     } catch (e) {
       if (e instanceof LoadError) return fail(e.message);
       throw e;
@@ -253,13 +253,13 @@ export async function appWizardRoutes(app: FastifyInstance) {
     let built: Created;
     let pushKey = false;
     try {
-      if (schema && (reservedSchema(schema) || !(await appSchemas()).includes(schema))) throw new LoadError('Choose one of the schemas in the list.');
+      if (schema && (reservedSchema(schema) || !(await appSchemas()).includes(schema))) throw new LoadError(tx('aw.choose_one_of_the_schemas'));
       const checked = await checkNewApp({ ...b, schema }, currentWorkspace(s)).catch((e) => {
         throw new LoadError((e as Error).message);
       });
       const features = featuresFrom(b, b.features === '1');
       const boilerplate = /^\d{1,9}$/.test(b.boilerplate ?? '') ? Number(b.boilerplate) : null;
-      if (boilerplate && !(await boilerplates(s)).some((x) => x.id === boilerplate)) throw new LoadError('Choose a boilerplate application (an application of type Boilerplate).');
+      if (boilerplate && !(await boilerplates(s)).some((x) => x.id === boilerplate)) throw new LoadError(tx('aw.choose_a_boilerplate_application_an'));
       // the tables of the form: only names of this schema's tables and views count (looked up again, never used as SQL)
       const relations = schema ? await schemaRelations(schema) : [];
       const plans: Plan[] = [];
@@ -272,8 +272,8 @@ export async function appWizardRoutes(app: FastifyInstance) {
         if (kind) plans.push({ rel, kind });
       }
       const askedTables = fromTables || b.tables === '1' || Object.keys(b).some((k) => /^t_\d+$/.test(k));
-      if (askedTables && !plans.length) throw new LoadError('Choose at least one table or view.');
-      if (plans.length && boilerplate) throw new LoadError('A boilerplate application brings its own pages: choose no tables, or no boilerplate.');
+      if (askedTables && !plans.length) throw new LoadError(tx('aw.choose_at_least_one_table'));
+      if (plans.length && boilerplate) throw new LoadError(tx('aw.a_boilerplate_application_brings_its'));
       if (plans.length) built = await buildAppFromTables(checked, plans, b.chart === 'true', features);
       else {
         built = await owner.tx(async (c) => {
@@ -294,9 +294,9 @@ export async function appWizardRoutes(app: FastifyInstance) {
     // the push key of the new application, after the commit
     if (pushKey && secretKeyConfigured()) await appPublicKey(built.app.id).catch(() => undefined);
     // (sprint 73, APEX: straight to the new application's home) the result as a message on its page
-    const pages = built.pages.length ? ` with ${built.pages.length} page(s) besides Home` : '';
-    const account = built.app.existingAccount ? ` The existing account ${String(b.admin_user ?? '').trim()} got the admin role (its password was not changed).` : '';
-    flash(s, `Application ${built.app.alias} created${pages}.${account}${built.notes.length ? ` ${built.notes.join(' ')}` : ''}`);
+    const created = built.pages.length ? tx('aw.created_pages', { alias: built.app.alias, n: built.pages.length }) : tx('aw.created', { alias: built.app.alias });
+    const account = built.app.existingAccount ? ` ${tx('aw.existing_account', { user: String(b.admin_user ?? '').trim() })}` : '';
+    flash(s, `${created}${account}${built.notes.length ? ` ${built.notes.join(' ')}` : ''}`);
     return back(reply, s, `${BASE}/apps/${built.app.id}`);
   };
   app.post(`${BASE}/apps`, (req: Req, reply) => create(req, reply));
@@ -322,8 +322,8 @@ const SOURCES: [string, string, string, string][] = [
 const rlsBadge = (r: Relation) =>
   !r.rls ? ''
   : r.policies > 0
-    ? html` <span class="tag aw-rls" title="Row level security is on (${r.policies} ${r.policies === 1 ? 'policy' : 'policies'}): each user sees only the rows the policies allow">${icon('shield')} RLS · ${r.policies}</span>`
-    : html` <span class="tag tag-error aw-rls" title="Row level security is on without policies: the application's role sees no rows (unless it owns the table or bypasses row level security)">${icon('shield')} RLS, no policies</span>`;
+    ? html` <span class="tag aw-rls" title="${r.policies === 1 ? tx('aw.rls_on_1') : tx('aw.rls_on', { n: r.policies })}">${icon('shield')} RLS · ${r.policies}</span>`
+    : html` <span class="tag tag-error aw-rls" title="${tx('aw.row_level_security_is_on')}">${icon('shield')} ${tx('aw.rls_no_policies')}</span>`;
 
 async function createPage(s: Session, reply: FastifyReply, schema: string, b: Body | null, message: Raw | '' = '') {
   const schemas = await appSchemas();
@@ -335,62 +335,62 @@ async function createPage(s: Session, reply: FastifyReply, schema: string, b: Bo
   // (sprint 73) the name proposed from the schema is selected on first focus, so typing replaces it (app.js data-select-once)
   const suggested = known ? schema.replace(/_/g, ' ').replace(/^./, (x) => x.toUpperCase()) : '';
   const kindOf = (r: Relation, i: number) => (b ? (b[`t_${i}`] === r.relname ? (b[`k_${i}`] === undefined ? defaultKind(r) : String(b[`k_${i}`])) : '') : defaultKind(r));
-  const rows = (r: Relation) => (r.rows === null ? 'not analyzed' : `about ${Number(r.rows).toLocaleString('en')} row(s)`);
+  const rows = (r: Relation) => (r.rows === null ? tx('aw.not_analyzed') : tx('aw.about_rows', { n: Number(r.rows).toLocaleString('en') }));
   const main = html`<div class="ab-narrow create-app">
-    <h1>Create an application</h1>
-    <nav class="create-sources" aria-label="Other ways to start">${SOURCES.map(
-      ([path, ic, label, help]) => html`<a class="create-source" href="${BASE}/${path}">${icon(ic)}<span><b>${label}</b><small class="muted">${help}</small></span></a>`,
+    <h1>${tx('aw.create_an_application')}</h1>
+    <nav class="create-sources" aria-label="${tx('aw.other_ways_to_start')}">${SOURCES.map(
+      ([path, ic, label, help]) => html`<a class="create-source" href="${BASE}/${path}">${icon(ic)}<span><b>${tx.dyn(`aw.src.${path.replace(/^create\//, '')}`, label)}</b><small class="muted">${tx.dyn(`aw.srch.${path.replace(/^create\//, '')}`, help)}</small></span></a>`,
     )}</nav>
     ${message}
-    ${schema && !known && !message ? html`<div class="alert alert-error" role="alert">Choose one of the schemas in the list.</div>` : ''}
-    ${region('Data', html`<form method="get" action="${BASE}/create" class="create-schema">
-      <div class="form-grid">${select('schema', 'Pages on the tables of', schema, [['', '- a new, empty schema (Home only) -'], ...schemas.map((x): [string, string] => [x, x])],
-        'The application\'s parsing schema. Choose a schema to get a page per table and view; a new schema is named after the alias.')}</div>
-      <div class="buttons"><button class="btn">${icon('search')} Show its tables</button></div></form>`)}
+    ${schema && !known && !message ? html`<div class="alert alert-error" role="alert">${tx('aw.choose_one_of_the_schemas')}</div>` : ''}
+    ${region(tx('aw.data'), html`<form method="get" action="${BASE}/create" class="create-schema">
+      <div class="form-grid">${select('schema', tx('aw.pages_on_the_tables_of'), schema, [['', tx('aw.a_new_empty_schema_home')], ...schemas.map((x): [string, string] => [x, x])],
+        tx('aw.schema_help'))}</div>
+      <div class="buttons"><button class="btn">${icon('search')} ${tx('aw.show_its_tables')}</button></div></form>`)}
     <form method="post" action="${BASE}/apps" data-progress="Creating the application and its pages…">${csrf(s)}
       <input type="hidden" name="features" value="1">
       <div id="aw-schema-fields"><input type="hidden" name="schema" value="${known ? schema : ''}">${known ? html`<input type="hidden" name="tables" value="1">` : ''}</div>
-      ${region('Application', html`<div class="form-grid">
-        <div class="field"><label class="label" for="f_name">Name</label>
+      ${region(tx('aw.application'), html`<div class="form-grid">
+        <div class="field"><label class="label" for="f_name">${tx('aw.name')}</label>
           <input id="f_name" name="name" value="${v('name', suggested)}" required data-select-once></div>
-        ${input('description', 'Description', v('description', ''), { placeholder: 'One line for the home and About pages' })}
-        ${iconPicker('f_icon', 'icon', 'Icon', v('icon', DEFAULT_APP_ICON))}
+        ${input('description', tx('aw.description'), v('description', ''), { placeholder: tx('aw.one_line_for_the_home') })}
+        ${iconPicker('f_icon', 'icon', tx('aw.icon'), v('icon', DEFAULT_APP_ICON))}
       </div>`)}
-      ${region('Appearance', html`<div class="form-grid">
-        ${select('base', 'Theme style', v('base', 'iris'), [['iris', 'Iris (light body, dark header and menu)'], ['lavender', 'Lavender (rounded, indigo)'], ['standard', 'Standard (blue, navy header)']])}
-        ${select('nav', 'Navigation', v('nav', 'side'), [['side', 'Side menu'], ['top', 'Top menu']])}
-        ${input('accent', 'Accent colour', v('accent', BASE_STYLES.iris.accent), { type: 'color', help: 'Of the theme style; the default stores nothing.' })}
+      ${region(tx('aw.appearance'), html`<div class="form-grid">
+        ${select('base', tx('aw.theme_style'), v('base', 'iris'), [['iris', tx('aw.iris_light_body_dark_header')], ['lavender', tx('aw.lavender_rounded_indigo')], ['standard', tx('aw.standard_blue_navy_header')]])}
+        ${select('nav', tx('aw.navigation'), v('nav', 'side'), [['side', tx('aw.side_menu')], ['top', tx('aw.top_menu')]])}
+        ${input('accent', tx('aw.accent_colour'), v('accent', BASE_STYLES.iris.accent), { type: 'color', help: tx('aw.of_the_theme_style_the') })}
       </div>`)}
-      ${region('Pages', html`<ul class="aw-pages">
-        <li><span class="aw-page-kind">${icon('home')} Home</span><span class="muted">a hero with the name and icon, and a card per page</span></li>
+      ${region(tx('aw.pages'), html`<ul class="aw-pages">
+        <li><span class="aw-page-kind">${icon('home')} ${tx('aw.home')}</span><span class="muted">${tx('aw.a_hero_with_the_name')}</span></li>
         ${known
           ? relations.length
             ? relations.map((r, i) => html`<li><input type="hidden" name="t_${i}" value="${r.relname}">
                 <label class="aw-page-kind" for="f_k_${i}">${icon(r.kind === 'view' ? 'eye' : 'table')} ${r.label}</label>
-                <select id="f_k_${i}" name="k_${i}">${kindsFor(r).map((k) => html`<option value="${k}"${k === kindOf(r, i) ? raw(' selected') : ''}>${PAGE_KINDS[k]}</option>`)}</select>
-                <small class="muted"><code>${r.relname}</code> · ${r.kind === 'view' ? 'view' : rows(r)}${r.kind === 'table' && !r.pk ? ', no single-column key: no form' : ''}${Number(r.rows ?? 0) > LARGE_TABLE ? ': a paged grid' : ''}</small>${rlsBadge(r)}</li>`)
-            : html`<li class="muted">${schema} has no tables or views.</li>`
-          : html`<li class="muted">Choose a schema under Data for a page per table, or add pages with the page wizards later.</li>`}
+                <select id="f_k_${i}" name="k_${i}">${kindsFor(r).map((k) => html`<option value="${k}"${k === kindOf(r, i) ? raw(' selected') : ''}>${tx.dyn(`aw.k.${k || 'none'}`, PAGE_KINDS[k])}</option>`)}</select>
+                <small class="muted"><code>${r.relname}</code> · ${r.kind === 'view' ? tx('aw.view') : rows(r)}${r.kind === 'table' && !r.pk ? tx('aw.no_key') : ''}${Number(r.rows ?? 0) > LARGE_TABLE ? tx('aw.paged_grid') : ''}</small>${rlsBadge(r)}</li>`)
+            : html`<li class="muted">${tx('aw.no_relations', { schema })}</li>`
+          : html`<li class="muted">${tx('aw.choose_a_schema_under_data')}</li>`}
       </ul>
-      ${known ? check('chart', 'Dashboard: a chart per table with the number of rows per parent row (a foreign key) or per value of a column whose values repeat', b ? b.chart === 'true' : true) : ''}`, '', 'aw-pages')}
-      ${region('Features', html`<div class="aw-features">${FEATURES.map(([k, label, help]) => check(`f_${k}`, label, features[k], help))}</div>`)}
-      ${region('Settings', html`<div class="form-grid">
-        <div class="field"><label class="label" for="f_alias">Alias (URL)</label>
+      ${known ? check('chart', tx('aw.dashboard_a_chart_per_table'), b ? b.chart === 'true' : true) : ''}`, '', 'aw-pages')}
+      ${region(tx('aw.features'), html`<div class="aw-features">${FEATURES.map(([k, label, help]) => { const [l, h] = featureText(k, label, help); return check(`f_${k}`, l, features[k], h); })}</div>`)}
+      ${region(tx('aw.settings'), html`<div class="form-grid">
+        <div class="field"><label class="label" for="f_alias">${tx('aw.alias_url')}</label>
           <input id="f_alias" name="alias" value="${v('alias', known ? await aliasFor(schema) : '')}" required pattern="[a-z][a-z0-9_\-]*" maxlength="50" data-derive-from="f_name"${b && b.alias ? raw(' data-edited') : ''}>
-          <small class="help">lowercase, e.g. inventory → /a/inventory; follows the name until you change it</small></div>
-        ${select('authentication', 'Authentication', v('authentication', 'app_users'), [['app_users', 'App users (login page)'], ['none', 'None (public)']])}
-        ${input('admin_user', 'First user', v('admin_user', ''), { placeholder: 'e.g. your name', help: 'Gets the admin role. An existing account in Users is reused.' })}
-        ${input('admin_password', 'Password', '', { type: 'password', auto: 'new-password', help: 'For a new account; at least 8 characters.' })}
-        ${select('language', 'Language', v('language', 'en'), Object.entries(LANGUAGE_NAMES).map(([code, name]): [string, string] => [code, `${name} (${code})`]))}
+          <small class="help">${tx('aw.lowercase_e_g_inventory_a')}</small></div>
+        ${select('authentication', tx('aw.authentication'), v('authentication', 'app_users'), [['app_users', tx('aw.app_users_login_page')], ['none', tx('aw.none_public')]])}
+        ${input('admin_user', tx('aw.first_user'), v('admin_user', ''), { placeholder: tx('aw.e_g_your_name'), help: tx('aw.gets_the_admin_role_an') })}
+        ${input('admin_password', tx('aw.password'), '', { type: 'password', auto: 'new-password', help: tx('aw.for_a_new_account_at') })}
+        ${select('language', tx('aw.language'), v('language', 'en'), Object.entries(LANGUAGE_NAMES).map(([code, name]): [string, string] => [code, `${name} (${code})`]))}
       </div>`)}
       ${!known && bp.length
-        ? html`<details class="region region-standard aw-advanced"><summary class="region-header"><h2>Advanced</h2></summary><div class="region-body"><div class="form-grid">
-            ${select('boilerplate', 'Start from', v('boilerplate', ''), [['', '- a blank application -'], ...bp.map((x): [string, string] => [String(x.id), `${x.name} (boilerplate)`])],
-              'A boilerplate application\'s pages, shared components and settings are copied; the new application keeps its own name, alias, role and authentication.')}
+        ? html`<details class="region region-standard aw-advanced"><summary class="region-header"><h2>${tx('aw.advanced')}</h2></summary><div class="region-body"><div class="form-grid">
+            ${select('boilerplate', tx('aw.start_from'), v('boilerplate', ''), [['', tx('aw.a_blank_application')], ...bp.map((x): [string, string] => [String(x.id), tx('aw.bp_option', { name: x.name })])],
+              tx('aw.bp_help'))}
           </div></div></details>`
         : ''}
-      <div class="buttons"><a class="btn" href="${BASE}">Cancel</a><button class="btn btn-hot">Create application</button></div>
+      <div class="buttons"><a class="btn" href="${BASE}">${tx('aw.cancel')}</a><button class="btn btn-hot">${tx('aw.create_application')}</button></div>
     </form>
   </div>`;
-  return send(reply, s, shell(s, 'Create application', [['App Builder', BASE], ['Create']], main));
+  return send(reply, s, shell(s, tx('aw.create_application'), [[tx('aw.app_builder'), BASE], [tx('aw.create')]], main));
 }

package/src/builder/arrange.ts

@@ -3,6 +3,7 @@ import { owner } from '../db.ts';
 import { saveState, type Session } from '../session.ts';
 import { COMPONENTS } from './components.ts';
 import { BASE, developer, flash, type Req } from './ui.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // Page designer layout: moving regions, items and buttons (drag and drop on
 // the Layout tab, or the Move up / Move down / column span buttons), creating
@@ -142,7 +143,7 @@ async function targetRegion(c: Q, pid: number, value: string): Promise<number |
   if (value === '') return null;
   const id = int(value);
   if (id === null || !(await c.query('select 1 from meta.region where id = $1 and page_id = $2', [id, pid])).rowCount)
-    throw new LayoutError(400, 'That region is not on this page.');
+    throw new LayoutError(400, tx('arr.that_region_is_not_on'));
   return id;
 }
 
@@ -165,8 +166,8 @@ export async function moveComponent(c: Q, pid: number, kind: LayoutKind, id: num
   if (kind === 'region' && o.position !== undefined && !o.dir) place = o.position || 'body';
   if (kind === 'button' && o.slot !== undefined && !o.dir) place = o.slot || 'region';
   if (kind === 'button' && region === null) place = '';
-  if (kind === 'region' && !POSITIONS().includes(place)) throw new LayoutError(400, 'Unknown position.');
-  if (kind === 'button' && place && !SLOTS().includes(place)) throw new LayoutError(400, 'Unknown button position.');
+  if (kind === 'region' && !POSITIONS().includes(place)) throw new LayoutError(400, tx('arr.unknown_position'));
+  if (kind === 'button' && place && !SLOTS().includes(place)) throw new LayoutError(400, tx('arr.unknown_button_position'));
   const scope = kind === 'region' ? " and coalesce(position, 'body') = $2"
     : kind === 'button' ? " and region_id is not distinct from $2 and (region_id is null or coalesce(slot, 'region') = $3)"
     : ' and region_id is not distinct from $2';
@@ -178,13 +179,13 @@ export async function moveComponent(c: Q, pid: number, kind: LayoutKind, id: num
     const now = list.indexOf(id);
     at = Math.max(0, Math.min(others.length, now + (o.dir === 'up' ? -1 : 1)));
   } else if (o.dir) {
-    throw new LayoutError(400, 'Unknown direction.');
+    throw new LayoutError(400, tx('arr.unknown_direction'));
   } else if (!o.before) {
     at = others.length;
   } else {
     const before = int(o.before);
     at = before === null ? -1 : others.indexOf(before);
-    if (at < 0) throw new LayoutError(400, 'The place to move to is not in that region.');
+    if (at < 0) throw new LayoutError(400, tx('arr.the_place_to_move_to'));
   }
   others.splice(at, 0, id);
   const stored = place === 'body' || place === 'region' || place === '' ? null : place;
@@ -198,9 +199,9 @@ export async function moveComponent(c: Q, pid: number, kind: LayoutKind, id: num
 /** Sets a region's column span (1–12), or widens / narrows it by one column. */
 export async function spanRegion(c: Q, pid: number, id: number, o: { columns?: string; delta?: string }) {
   const row = (await c.query('select columns from meta.region where id = $1 and page_id = $2', [id, pid])).rows[0];
-  if (!row) throw new LayoutError(404, 'Region not found on this page.');
+  if (!row) throw new LayoutError(404, tx('arr.region_not_found_on_this'));
   const n = o.delta === '1' ? row.columns + 1 : o.delta === '-1' ? row.columns - 1 : int(o.columns);
-  if (n === null || n < 1 || n > 12) throw new LayoutError(400, 'The column span is 1 to 12.');
+  if (n === null || n < 1 || n > 12) throw new LayoutError(400, tx('arr.the_column_span_is_1'));
   await c.query('update meta.region set columns = $3 where id = $1 and page_id = $2', [id, pid, n]);
   return n;
 }
@@ -208,10 +209,10 @@ export async function spanRegion(c: Q, pid: number, id: number, o: { columns?: s
 /** A new component from the gallery, with a working default; placed like moveComponent. Returns its id. */
 export async function createComponent(c: Q, pid: number, kind: LayoutKind, type: string, o: { region?: string; before?: string; position?: string; slot?: string }) {
   const page = (await c.query('select page_no from meta.page where id = $1', [pid])).rows[0];
-  if (!page) throw new LayoutError(404, 'Page not found.');
+  if (!page) throw new LayoutError(404, tx('arr.page_not_found'));
   let id: number;
   if (kind === 'region') {
-    if (!REGION_TYPES().includes(type)) throw new LayoutError(400, 'Unknown region type.');
+    if (!REGION_TYPES().includes(type)) throw new LayoutError(400, tx('arr.unknown_region_type'));
     id = (await c.query(`insert into meta.region (page_id, seq, title, type, source) values ($1, 999999, $2, $3, $4) returning id`,
       [pid, `New ${REGION_LABELS[type]?.[0].toLowerCase() ?? type}`, type, NEW_REGION_SOURCE[type] ?? null])).rows[0].id;
     // (140) a breadcrumb goes in the breadcrumb bar, without a frame of its own (unless it is dropped elsewhere)
@@ -222,14 +223,14 @@ export async function createComponent(c: Q, pid: number, kind: LayoutKind, type:
   } else {
     const region = await targetRegion(c, pid, o.region ?? '');
     if (kind === 'item') {
-      if (!ITEM_TYPES().includes(type)) throw new LayoutError(400, 'Unknown item type.');
+      if (!ITEM_TYPES().includes(type)) throw new LayoutError(400, tx('arr.unknown_item_type'));
       const taken = new Set((await c.query('select name from meta.item where page_id = $1', [pid])).rows.map((r) => r.name));
       const base = `P${page.page_no}_NEW`;
       let name = base;
       for (let i = 2; taken.has(name); i++) name = `${base}_${i}`;
       id = (await c.query(`insert into meta.item (page_id, region_id, seq, name, label, type) values ($1, $2, 999999, $3, 'New item', $4) returning id`, [pid, region, name, type])).rows[0].id;
     } else {
-      if (!BUTTON_ACTIONS().includes(type)) throw new LayoutError(400, 'Unknown button action.');
+      if (!BUTTON_ACTIONS().includes(type)) throw new LayoutError(400, tx('arr.unknown_button_action'));
       const taken = new Set((await c.query('select name from meta.button where page_id = $1', [pid])).rows.map((r) => r.name));
       let name = 'NEW_BUTTON';
       for (let i = 2; taken.has(name); i++) name = `NEW_BUTTON_${i}`;
@@ -268,7 +269,7 @@ export async function duplicateComponent(c: Q, pid: number, kind: LayoutKind, id
   const row = (await c.query(`select * from ${table} where id = $1 and page_id = $2`, [id, pid])).rows[0];
   if (!row) throw new LayoutError(404, `${COMPONENTS[kind].label} not found on this page.`);
   const pages = (await c.query('select t.page_no from meta.page t join meta.page f on f.app_id = t.app_id where t.id = $1 and f.id = $2', [toPid, pid])).rows;
-  if (!pages.length) throw new LayoutError(400, 'That page is not in this application.');
+  if (!pages.length) throw new LayoutError(400, tx('arr.that_page_is_not_in'));
   const same = toPid === pid;
   const rename = (name: string) => (same ? name : name.replace(/^P\d+_/, `P${pages[0].page_no}_`));
   const copyChild = async (k: 'item' | 'button', x: any, regionId: number | null) =>
@@ -336,24 +337,24 @@ export async function arrangeRoutes(app: FastifyInstance) {
   route('move', async (s, pid, b) => {
     const kind = b.kind;
     const id = int(b.id);
-    if (!isKind(kind) || id === null) throw new LayoutError(400, 'Unknown component.');
+    if (!isKind(kind) || id === null) throw new LayoutError(400, tx('arr.unknown_component'));
     await recorded(s, pid, `Move ${await describe(kind, id)}`, (c) => moveComponent(c, pid, kind, id, { dir: b.dir, region: b.region, before: b.before, position: b.position, slot: b.slot }));
     return { sel: `${kind}-${id}`, message: `${COMPONENTS[kind].label} moved.` };
   });
 
   route('span', async (s, pid, b) => {
     const id = int(b.id);
-    if (id === null) throw new LayoutError(400, 'Unknown region.');
+    if (id === null) throw new LayoutError(400, tx('arr.unknown_region'));
     let n = 0;
     await recorded(s, pid, `Resize ${await describe('region', id)}`, async (c) => {
       n = await spanRegion(c, pid, id, { columns: b.columns, delta: b.delta });
     });
-    return { sel: `region-${id}`, message: `Region spans ${n} of 12 columns.` };
+    return { sel: `region-${id}`, message: tx('arr.spans', { n }) };
   });
 
   route('create', async (s, pid, b) => {
     const kind = b.kind;
-    if (!isKind(kind)) throw new LayoutError(400, 'Unknown component type.');
+    if (!isKind(kind)) throw new LayoutError(400, tx('arr.unknown_component_type'));
     const id = await owner.tx((c) => createComponent(c, pid, kind, b.type ?? '', { region: b.region, before: b.before, position: b.position, slot: b.slot }));
     keep(s, { pid, undo: [], redo: [] }); // earlier layout steps no longer line up with the new component
     return { sel: `${kind}-${id}`, message: `${COMPONENTS[kind].label} created; set its properties on the right.` };
@@ -365,7 +366,7 @@ export async function arrangeRoutes(app: FastifyInstance) {
   route('comment', async (_s, pid, b) => {
     const kind = b.kind ?? '';
     const id = int(b.id);
-    if (!COMMENTABLE.has(kind) || id === null) throw new LayoutError(400, 'Unknown component.');
+    if (!COMMENTABLE.has(kind) || id === null) throw new LayoutError(400, tx('arr.unknown_component'));
     const on = b.on !== 'false';
     const done = await owner.tx(async (c) => {
       if (on)
@@ -375,14 +376,14 @@ export async function arrangeRoutes(app: FastifyInstance) {
            on conflict (app_id, name) do nothing`, [pid]);
       return (await c.query(`update ${COMPONENTS[kind].table} set build_option = $3 where id = $1 and page_id = $2 and ${on ? 'true' : `build_option = 'COMMENTED_OUT'`}`, [id, pid, on ? 'COMMENTED_OUT' : null])).rowCount;
     });
-    if (!done) throw new LayoutError(404, 'Unknown component.');
+    if (!done) throw new LayoutError(404, tx('arr.unknown_component'));
     return { sel: `${kind}-${id}`, message: `${COMPONENTS[kind].label} ${on ? 'commented out: it stays in the page designer and is left out of the page (build option COMMENTED_OUT)' : 'back on the page'}.` };
   });
 
   route('duplicate', async (s, pid, b) => {
     const kind = b.kind;
     const id = int(b.id);
-    if (!isKind(kind) || id === null) throw new LayoutError(400, 'Unknown component.');
+    if (!isKind(kind) || id === null) throw new LayoutError(400, tx('arr.unknown_component'));
     const copy = await owner.tx((c) => duplicateComponent(c, pid, kind, id));
     keep(s, { pid, undo: [], redo: [] });
     return { sel: `${kind}-${copy}`, message: `${COMPONENTS[kind].label} duplicated.` };
@@ -398,7 +399,7 @@ export async function arrangeRoutes(app: FastifyInstance) {
     const id = int(b.id);
     try {
       if (pid === null || !(await owner.one('select 1 as ok from meta.page where id = $1', [pid]))) throw new LayoutError(404, 'Page not found');
-      if (!isKind(kind) || id === null || to === null) throw new LayoutError(400, 'Unknown component or page.');
+      if (!isKind(kind) || id === null || to === null) throw new LayoutError(400, tx('arr.unknown_component_or_page'));
       const copy = await owner.tx((c) => duplicateComponent(c, pid, kind, id, to));
       if (to === pid) keep(s, { pid, undo: [], redo: [] });
       flash(s, `${COMPONENTS[kind].label} copied.`);
@@ -415,10 +416,10 @@ export async function arrangeRoutes(app: FastifyInstance) {
     route(op, async (s, pid) => {
       const h = history(s, pid);
       const step = (op === 'undo' ? h.undo : h.redo).pop();
-      if (!step) return { sel: '', message: `Nothing to ${op}.` };
+      if (!step) return { sel: '', message: op === 'undo' ? tx('arr.nothing_undo') : tx('arr.nothing_redo') };
       await owner.tx((c) => restore(c, pid, op === 'undo' ? step.before : step.after));
       (op === 'undo' ? h.redo : h.undo).push(step);
       keep(s, h);
-      return { sel: '', message: `${op === 'undo' ? 'Undone' : 'Redone'}: ${step.label}.` };
+      return { sel: '', message: `${op === 'undo' ? tx('arr.undone') : tx('arr.redone')}: ${step.label}.` };
     });
 }