pgkiln 0.89.0 → 0.90.0

package/docs/guide/03-builder.md

@@ -504,7 +504,9 @@ other sites.
 (sprint 86) An address under `/builder` that leads nowhere (a deleted application or page, a typo, an
 application of a workspace you are not a member of) shows a **Page not found** page in the builder's
 theme with a link to the App Builder home; a server error shows **Something went wrong** (the error
-is in the server log, not on the page). Scripts get the plain answers they always got.
+is in the server log, not on the page). Scripts get the plain answers they always got. (UX-10) Signed in, the
+page stays inside the builder (rail, header search, status bar), with a search field filled with the words of the
+address and your recent applications. `/builder/apps/new` and `/builder/apps/create` lead to Create application.
 
 ### Choosing the builder language
 
@@ -727,19 +729,22 @@ you like. `meta.reporting_app_count(workspace_id)` counts a workspace's reportin
 
 ### Creating an application
 
-**Create** (a tile, or `/builder/create`) is one page, like APEX's Create Application wizard. Links at the top
-start from a file, pasted data, a blueprint or the App Gallery instead. Then:
+**Create** (the App Builder's primary button, or `/builder/create`) is one page, like APEX's Create Application
+wizard. Links at the top start from a file, pasted data, a blueprint or the App Gallery instead. (UX-7) The name
+comes first, then the data and its pages, features, appearance and sign-in; **Create application** and Cancel stay
+in a footer at the bottom of the window, next to a one-line summary (*12 pages on hr · App users (login page) ·
+English*) that follows your choices. The sections:
 
 | Section | Field | Meaning |
 |---|---|---|
-| Data | Pages on the tables of | The parsing schema: an existing schema, or a new, empty one named after the alias. (sprint 87) Choosing a schema lists its tables under Pages at once, with the name and alias proposed for it (unless you already typed them); without JavaScript, *Show its tables* does it |
 | Application | Name | Display name, shown in the header. Proposed from the schema and selected when you click it, so typing replaces it |
-| | Description, Icon | Shown on the home page's hero and the About page |
-| Appearance | Theme style, Navigation, Accent colour | Iris, Lavender or Standard; a side or top menu; an own accent colour |
-| Pages | a page type per table | *Interactive report with form*, *Faceted search*, *Cards*, *Calendar* (a table with a date column), *Master detail* (a table another table refers to), *Interactive grid*, *Report* or *No page*. Tables with a single-column primary key get a modal form with their report, faceted search, cards and calendar; views and tables without such a key can't have a form or a grid. Proposed: a report with form, an interactive grid for a table of more than 100,000 rows, a report for a view. (sprint 87) A table with [row level security](08-security.md) shows *RLS · n* (its number of policies), or *RLS, no policies* in red: the application's role would see no rows. *Dashboard*: a chart per table |
+| | Alias | Lowercase URL name: `inventory` gives `/a/inventory`. (sprint 87) It follows the name as you type it (*Café Orders* → `cafe-orders`) until you change it yourself |
+| | Icon, Description | Shown on the home page's hero and the About page |
+| Data and pages | Pages on the tables of | The parsing schema: an existing schema, or a new, empty one named after the alias. (sprint 87) Choosing a schema lists its tables at once, with the name and alias proposed for it (unless you already typed them); without JavaScript, *Show its tables* does it (it reloads the page, so choose the schema before typing) |
+| | a page type per table | *Interactive report with form*, *Faceted search*, *Cards*, *Calendar* (a table with a date column), *Master detail* (a table another table refers to), *Interactive grid*, *Report* or *No page*. Tables with a single-column primary key get a modal form with their report, faceted search, cards and calendar; views and tables without such a key can't have a form or a grid. Proposed: a report with form, an interactive grid for a table of more than 100,000 rows, a report for a view. (sprint 87) A table with [row level security](08-security.md) shows *RLS · n* (its number of policies), or *RLS, no policies* in red: the application's role would see no rows. *Dashboard*: a chart per table |
 | Features | | *About page* (in a Help menu), *Access control* (authorization schemes `CONTRIBUTOR` and `READER` next to `ADMIN`, for the roles admin, contributor and reader), *Activity reporting* (page 9010 for administrators: page views per day and the latest activity, from `meta.app_activity`), *Feedback*, *Theme style selection* (users may choose light or dark), *Install as an app* (PWA) and *Push notifications* (needs `PGKILN_SECRET_KEY`) |
-| Settings | Alias | Lowercase URL name: `inventory` gives `/a/inventory`. (sprint 87) It follows the name as you type it (*Café Orders* → `cafe-orders`) until you change it yourself |
-| | Authentication | *App users* (a login page and a user list), *HTTP header* (a trusted reverse proxy names the user, see [chapter 8](08-security.md#http-header-authentication-reverse-proxy)), *Database accounts* (PostgreSQL login roles and their passwords, see [chapter 8](08-security.md#database-accounts-postgresql-roles)), *Custom* (your own PL/pgSQL function, see [chapter 8](08-security.md#custom-authentication-a-plpgsql-function)) or *None* (a public app) |
+| Appearance | Theme style, Navigation, Accent colour | Iris, Lavender or Standard; a side or top menu; an own accent colour |
+| Sign-in | Authentication | *App users* (a login page and a user list), *HTTP header* (a trusted reverse proxy names the user, see [chapter 8](08-security.md#http-header-authentication-reverse-proxy)), *Database accounts* (PostgreSQL login roles and their passwords, see [chapter 8](08-security.md#database-accounts-postgresql-roles)), *Custom* (your own PL/pgSQL function, see [chapter 8](08-security.md#custom-authentication-a-plpgsql-function)) or *None* (a public app) |
 | | First user / Password | The first user; they get the `admin` role. An existing account is reused (its password isn't changed). (sprint 87) Hidden while Authentication is *None* |
 | | Language | The application's primary language |
 | Advanced | Start from | Shown when there are **boilerplate** applications (Settings → Application type): their pages, shared components and settings are copied into the new application, which keeps its own name, alias, role and authentication ([application types](#application-types-and-subscriptions)) |
@@ -953,7 +958,11 @@ they are **not** run until you choose to.
 (sprint 74) Above the pages: a **search** by page name or number (the rows filter while you type),
 **Report** and **Icons** views, and **Create page** (the page wizards below). **Tasks** on the right: run the
 application, create pages (also with AI), (sprint 137) **Add feature page** and **Create page as copy**, Shared
-Components, page groups, export, backups, supporting objects, lock or delete the application.
+Components, page groups, export, backups, supporting objects and lock the application. (UX-9) The report shows a
+page's mode in the property editor's words (*Normal*, *Modal dialog*), and Group stays empty for a page without one.
+(UX-6) Deleting the application is not a task: it is the **Danger zone** at the bottom of Settings → Definition,
+where you type the application's alias to confirm (the server checks it too). Its pages, shared components,
+working copies and backups go with it, so export it first if you may need it again.
 
 The **default-password** warning shows on the App Builder home (and Developers) only; dismiss it with × until the
 next sign-in. The avatar keeps a red dot until the password is changed.
@@ -1092,6 +1101,9 @@ leaving the page with one asks first. On a window under 800 pixels high the gall
 its tabs (*Regions*, *Items*, *Buttons*): choose one to open it, choose the open one to fold it again; the
 designer remembers which you prefer.
 
+(UX-6) **Delete page** is in the toolbar's page menu (the wrench), away from Save: type the page number to
+confirm. Its regions, items, buttons, dynamic actions and processes go with it, as do its lock and comments.
+
 - **Left: the component tree**, with four tabs:
   - **Rendering**: the page, *Pre-Rendering* (branches, computations and processes that run
     before the page is shown), the regions by
@@ -1602,7 +1614,8 @@ on import), downloads it again and removes it. See
 ## Users (the user directory)
 
 **Builder → Users** lists every account with the applications (and roles) it can use. Create
-accounts here (a password is optional for single sign-on-only accounts). Open an account to edit
+accounts here (a password is optional for single sign-on-only accounts): (UX-8) **Create account** in the header
+opens a side panel, so the list keeps the page's width. Open an account to edit
 its name and e-mail, set or remove its password, deactivate or delete it, and grant, change or
 revoke access per application. Password changes, deactivation and access changes end the
 affected sessions. See [chapter 8](08-security.md#the-user-directory).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgkiln",
-  "version": "0.89.0",
+  "version": "0.90.0",
   "description": "Open source low-code, SQL-driven application builder for PostgreSQL, inspired by Oracle APEX",
   "keywords": [
     "postgresql",

package/public/builder.css

@@ -1725,3 +1725,37 @@ a.cp-type:hover, a.cp-type:focus-visible { border-color: var(--accent); }
 .wh-attention h2 { margin: 0 0 4px; font-size: 14px; }
 .wh-attention ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
 .wh-attention .icon { width: 15px; height: 15px; vertical-align: -2px; }
+/* (UX-6) deleting an application or a page: apart from everyday actions, the name typed to confirm */
+.danger-box { margin-top: 24px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); border-radius: 8px; background: var(--danger-soft); }
+.danger-box h2 { margin: 0 0 4px; font-size: 15px; color: var(--danger); }
+.danger-box p { margin: 0 0 8px; }
+.danger-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
+.danger-form .field { margin: 0; flex: 1 1 14rem; max-width: 22rem; }
+.menu-section .danger-form { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
+/* (UX-7) Create application: Create always in reach, with a one-line summary */
+.aw-footer { position: sticky; bottom: 29px; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
+  margin-top: 16px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
+.aw-footer .buttons { margin: 0; }
+.aw-summary { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.aw-schema-row { align-items: end; }
+.aw-schema-row .buttons { margin: 0 0 1rem; }
+/* (UX-10) Page not found inside the builder */
+.nf-page h1 { margin-top: 8px; }
+.nf-search { margin: 12px 0 16px; max-width: 32rem; }
+.nf-page h2 { font-size: 14px; margin: 12px 0 4px; }
+/* (UX-8) builder reports at laptop width, one rule for all (opt in with .rep-fit): low-value columns (.col-low, under 1150 px of table width) give
+   way first, long text wraps (.col-wrap), and the Actions column (.col-actions) stays on screen at the right */
+.table-wrap.rep-fit { container-type: inline-size; }
+@container (max-width: 1150px) { .rep-fit .report .col-low { display: none; } }
+.ide .report td.col-wrap { white-space: normal; min-width: 12rem; overflow-wrap: anywhere; }
+.ide .report .col-actions { position: sticky; right: 0; background: var(--surface); box-shadow: inset 1px 0 0 var(--border); }
+.ide .report th.col-actions { background: var(--surface-2); }
+/* (UX-8) a side drawer opened from the page header (details.drawer): Create account on Users */
+.drawer { display: inline-block; }
+.drawer > summary { list-style: none; cursor: pointer; }
+.drawer > summary::-webkit-details-marker { display: none; }
+.drawer-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(26rem, 100vw); overflow-y: auto; padding: 16px 18px 24px;
+  background: var(--surface); color: var(--text); border-left: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); text-align: left; }
+.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
+.drawer-head h2 { margin: 0; font-size: 16px; }
+.drawer-panel .buttons { justify-content: flex-end; }

package/public/builder.js

@@ -1272,7 +1272,30 @@ document.querySelectorAll('input[data-filter-tree]').forEach((el) => {
     sync();
   });
 
-  const picker = document.querySelector('form.create-schema select[name="schema"]');
+  // (UX-7) the footer's summary follows the page types, the sign-in and the language
+  const awForm = document.querySelector('form.aw-form');
+  const summary = document.getElementById('aw-summary');
+  const sum = () => {
+    const tpl = document.getElementById('aw-summary-pages');
+    if (!awForm || !summary || !tpl) return;
+    let parts;
+    if (tpl.dataset.schema) {
+      let n = 1;
+      awForm.querySelectorAll('#aw-pages select').forEach((sel) => (n += Number(sel.selectedOptions[0]?.dataset.pages ?? 0)));
+      const chart = awForm.querySelector('#aw-pages input[name="chart"]');
+      if (chart?.checked && n > 1) n += 1;
+      parts = [n === 1 ? tpl.dataset.one : tpl.dataset.many.replace('{n}', String(n))];
+    } else parts = [tpl.dataset.new];
+    for (const name of ['authentication', 'language']) {
+      const sel = awForm.elements.namedItem(name);
+      const text = sel?.selectedOptions?.[0]?.textContent?.replace(/\s*\([a-z-]+\)$/i, '');
+      if (text) parts.push(text);
+    }
+    summary.textContent = parts.join(' · ');
+  };
+  awForm?.addEventListener('change', sum);
+
+  const picker = document.querySelector('select[name="schema"][form="aw-schema-get"]');
   const pages = document.getElementById('aw-pages');
   const hidden = document.getElementById('aw-schema-fields');
   if (!picker || !pages || !hidden) return;
@@ -1297,12 +1320,13 @@ document.querySelectorAll('input[data-filter-tree]').forEach((el) => {
       if (alias && !alias.hasAttribute('data-edited')) alias.value = doc.getElementById('f_alias')?.value ?? alias.value;
       history.replaceState(null, '', url);
       document.getElementById('aw-pages')?.removeAttribute('aria-busy');
+      sum();
     } catch {
       picker.form.submit();
     }
   });
   // the button is for pages without JavaScript
-  picker.form.querySelector('button')?.setAttribute('hidden', '');
+  document.querySelector('button[form="aw-schema-get"]')?.setAttribute('hidden', '');
 })();
 
 // (sprint 101, DA-12) SQL Workshop › Scheduling: the schedule builder's five fields and the common schedules fill the
@@ -1401,3 +1425,12 @@ document.querySelectorAll('input[data-filter-tree]').forEach((el) => {
 })();
 
 // (sprint 127) Passkeys: the [data-passkey] buttons are handled by app.js (sprint 131), which every builder page loads too.
+
+// (UX-8) a side drawer (details.drawer): Close, Escape and a click outside close it; the first field gets the focus
+document.querySelectorAll('details.drawer').forEach((d) => {
+  const close = () => { d.open = false; d.querySelector('summary')?.focus(); };
+  d.querySelector('[data-drawer-close]')?.addEventListener('click', close);
+  d.addEventListener('toggle', () => { if (d.open) d.querySelector('.drawer-panel input:not([type=hidden]), .drawer-panel select, .drawer-panel textarea')?.focus(); });
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && d.open) close(); });
+  document.addEventListener('click', (e) => { if (d.open && !d.contains(e.target)) d.open = false; });
+});

package/src/builder/appwizard.ts

@@ -233,6 +233,9 @@ export async function appWizardRoutes(app: FastifyInstance) {
     return createPage(s, reply, schema, null);
   });
 
+  // (UX-7) the addresses a developer guesses
+  for (const path of ['apps/new', 'apps/create']) app.get(`${BASE}/${path}`, (_req: Req, reply) => reply.redirect(`${BASE}/create`, 302));
+
   // the earlier address of "From existing tables"
   app.get(`${BASE}/create/tables`, async (req: Req, reply) => {
     const s = await developer(req, reply);
@@ -325,6 +328,11 @@ const rlsBadge = (r: Relation) =>
     ? 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>`;
 
+/** A select that belongs to another form (the form attribute), with its label and help. */
+const selectFor = (form: string, name: string, label: string, value: string, options: [string, string][], help?: string) =>
+  html`<div class="field"><label class="label" for="f_${name}">${label}</label>
+    <select id="f_${name}" name="${name}" form="${form}">${options.map(([v, l]) => html`<option value="${v}"${value === v ? raw(' selected') : ''}>${l}</option>`)}</select>${help ? html`<small class="help">${help}</small>` : ''}</div>`;
+
 async function createPage(s: Session, reply: FastifyReply, schema: string, b: Body | null, message: Raw | '' = '') {
   const schemas = await appSchemas();
   const known = schemas.includes(schema);
@@ -336,6 +344,19 @@ async function createPage(s: Session, reply: FastifyReply, schema: string, b: Bo
   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 ? tx('aw.not_analyzed') : tx('aw.about_rows', { n: Number(r.rows).toLocaleString('en') }));
+  // (UX-7) how many pages each page type makes for a relation: a report and a form, or one page
+  const pagesOf = (r: Relation, k: string) => (!k ? 0 : (k === 'report_form' || (r.kind === 'table' && !!r.pk && ['facets', 'cards', 'calendar'].includes(k)) ? 2 : 1));
+  const plannedPages = 1 + relations.reduce((n, r, i) => n + pagesOf(r, kindOf(r, i)), 0)
+    + (relations.some((r, i) => kindOf(r, i)) && (b ? b.chart === 'true' : true) ? 1 : 0);
+  const authValue = v('authentication', 'app_users');
+  const langValue = v('language', 'en');
+  const summary = [
+    known ? tx(plannedPages === 1 ? 'aw.sum_on_1' : 'aw.sum_on', { n: plannedPages, schema }) : tx('aw.sum_new'),
+    authValue === 'none' ? tx('aw.none_public') : tx('aw.app_users_login_page'),
+    LANGUAGE_NAMES[langValue as keyof typeof LANGUAGE_NAMES] ?? langValue,
+  ].join(' · ');
+  // (UX-7) name first, then the data and its pages, features, appearance and sign-in; Create in a sticky footer.
+  // The schema picker belongs to a GET form of its own (form="aw-schema-get"), placed inside the create form.
   const main = html`<div class="ab-narrow create-app">
     <h1>${tx('aw.create_an_application')}</h1>
     <nav class="create-sources" aria-label="${tx('aw.other_ways_to_start')}">${SOURCES.map(
@@ -343,45 +364,46 @@ async function createPage(s: Session, reply: FastifyReply, schema: string, b: Bo
     )}</nav>
     ${message}
     ${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)}
+    <form method="get" action="${BASE}/create" class="create-schema" id="aw-schema-get"></form>
+    <form method="post" action="${BASE}/apps" class="aw-form" 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(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', tx('aw.description'), v('description', ''), { placeholder: tx('aw.one_line_for_the_home') })}
+          <input id="f_name" name="name" value="${v('name', suggested)}" required data-select-once autofocus></div>
+        <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">${tx('aw.lowercase_e_g_inventory_a')}</small></div>
         ${iconPicker('f_icon', 'icon', tx('aw.icon'), v('icon', DEFAULT_APP_ICON))}
+        ${input('description', tx('aw.description'), v('description', ''), { placeholder: tx('aw.one_line_for_the_home') })}
       </div>`)}
-      ${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(tx('aw.pages'), html`<ul class="aw-pages">
+      ${region(tx('aw.data_and_pages'), html`<div class="form-grid aw-schema-row">${selectFor('aw-schema-get', '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 class="buttons"><button class="btn" form="aw-schema-get">${icon('search')} ${tx('aw.show_its_tables')}</button></div></div>
+        <div id="aw-pages"><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') : ''}>${tx.dyn(`aw.k.${k || 'none'}`, PAGE_KINDS[k])}</option>`)}</select>
+                <select id="f_k_${i}" name="k_${i}">${kindsFor(r).map((k) => html`<option value="${k}" data-pages="${pagesOf(r, 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', tx('aw.dashboard_a_chart_per_table'), b ? b.chart === 'true' : true) : ''}`, '', 'aw-pages')}
+      ${known ? check('chart', tx('aw.dashboard_a_chart_per_table'), b ? b.chart === 'true' : true) : ''}
+      <template id="aw-summary-pages" data-schema="${known ? schema : ''}" data-one="${tx('aw.sum_on_1', { n: 1, schema: known ? schema : '' })}" data-many="${tx('aw.sum_on', { n: '{n}', schema: known ? schema : '' })}" data-new="${tx('aw.sum_new')}"></template></div>`)}
       ${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">${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')]])}
+      ${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(tx('aw.sign_in'), html`<div class="form-grid">
+        ${select('authentication', tx('aw.authentication'), authValue, [['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})`]))}
+        ${select('language', tx('aw.language'), langValue, 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>${tx('aw.advanced')}</h2></summary><div class="region-body"><div class="form-grid">
@@ -389,7 +411,8 @@ async function createPage(s: Session, reply: FastifyReply, schema: string, b: Bo
               tx('aw.bp_help'))}
           </div></div></details>`
         : ''}
-      <div class="buttons"><a class="btn" href="${BASE}">${tx('aw.cancel')}</a><button class="btn btn-hot">${tx('aw.create_application')}</button></div>
+      <div class="aw-footer"><p class="aw-summary muted" id="aw-summary" aria-live="polite">${summary}</p>
+        <div class="buttons"><a class="btn" href="${BASE}">${tx('aw.cancel')}</a><button class="btn btn-hot">${tx('aw.create_application')}</button></div></div>
     </form>
   </div>`;
   return send(reply, s, shell(s, tx('aw.create_application'), [[tx('aw.app_builder'), BASE], [tx('aw.create')]], main));

package/src/builder/datasets.ts

@@ -133,27 +133,28 @@ export async function datasetRoutes(app: FastifyInstance) {
     const main = html`<div class="title-row"><h1>${tx('dts.data_reporter')}</h1>
         <div class="buttons"><a class="btn btn-hot" href="${root}/datasets/new">${icon('plus')} ${tx('dts.new_dataset')}</a><a class="btn" href="${root}/import">${icon('upload')} ${tx('dts.import')}</a>${sets.length ? html`<a class="btn" href="${root}/export">${icon('download')} ${tx('dts.export_all')}</a>` : ''}</div></div>
       <p class="muted u-mt0">${tx('dts.intro', { workspace: s.workspace?.name ?? tx('dts.this_workspace') })}</p>
-      ${region(tx('dts.datasets'), html`<div class="table-wrap"><table class="report report-reflow">
-        <thead><tr><th scope="col">${tx('dts.dataset')}</th><th scope="col">${tx('dts.schema')}</th><th scope="col">${tx('dts.tables_and_views')}</th><th scope="col" class="num">${tx('dts.columns')}</th><th scope="col">${tx('dts.updated_utc')}</th><th scope="col">${tx('dts.actions')}</th></tr></thead>
+      ${region(tx('dts.datasets'), html`<div class="table-wrap rep-fit"><table class="report report-reflow">
+        <thead><tr><th scope="col">${tx('dts.dataset')}</th><th scope="col" class="col-low">${tx('dts.schema')}</th><th scope="col">${tx('dts.tables_and_views')}</th><th scope="col" class="num">${tx('dts.columns')}</th><th scope="col" class="col-low">${tx('dts.updated_utc')}</th><th scope="col" class="col-actions">${tx('dts.actions')}</th></tr></thead>
         <tbody>${sets.length ? sets.map((d) => html`<tr>
-          <td data-label="${tx('dts.dataset')}"><a href="${root}/datasets/${d.id}">${d.label}</a> <code>${d.name}</code>${d.description ? html`<br><span class="muted small">${d.description.slice(0, 160)}</span>` : ''}</td>
-          <td data-label="${tx('dts.schema')}"><code>${d.schema_name}</code></td>
-          <td data-label="${tx('dts.tables_and_views')}">${d.tables.map((t) => t.table).join(', ')}</td>
+          <td class="col-wrap" data-label="${tx('dts.dataset')}"><a href="${root}/datasets/${d.id}">${d.label}</a> <code>${d.name}</code>${d.description ? html`<br><span class="muted small">${d.description.slice(0, 160)}</span>` : ''}</td>
+          <td class="col-low" data-label="${tx('dts.schema')}"><code>${d.schema_name}</code></td>
+          <td class="col-wrap" data-label="${tx('dts.tables_and_views')}">${d.tables.map((t) => t.table).join(', ')}</td>
           <td class="num" data-label="${tx('dts.columns')}">${d.columns.length}</td>
-          <td data-label="${tx('dts.updated_utc')}">${when(d.updated_at)}${d.updated_by ? html` <span class="muted">${d.updated_by}</span>` : ''}</td>
-          <td data-label=""><a class="btn" href="${root}/apps/new?dataset=${encodeURIComponent(d.name)}">${icon('plus')} ${tx('dts.create_reporting_application')}</a></td>
+          <td class="col-low" data-label="${tx('dts.updated_utc')}">${when(d.updated_at)}${d.updated_by ? html` <span class="muted">${d.updated_by}</span>` : ''}</td>
+          <td class="col-actions" data-label=""><a class="btn" href="${root}/apps/new?dataset=${encodeURIComponent(d.name)}">${icon('plus')} ${tx('dts.create_reporting_application')}</a></td>
         </tr>`) : html`<tr><td colspan="6" class="empty">${tx('dts.no_datasets_yet_create_one')}</td></tr>`}</tbody></table></div>`)}
-      ${region(tx('dts.reporting_applications'), html`<div class="table-wrap"><table class="report report-reflow">
-        <thead><tr><th scope="col">${tx('dts.application')}</th><th scope="col">${tx('dts.datasets')}</th><th scope="col" class="num">${tx('dts.users')}</th><th scope="col" class="num">${tx('dts.published_reports')}</th><th scope="col">${tx('dts.actions')}</th></tr></thead>
+      ${region(tx('dts.reporting_applications'), html`<div class="table-wrap rep-fit"><table class="report report-reflow">
+        <thead><tr><th scope="col">${tx('dts.application')}</th><th scope="col">${tx('dts.datasets')}</th><th scope="col" class="num">${tx('dts.users')}</th><th scope="col" class="num">${tx('dts.published_reports')}</th><th scope="col" class="col-actions">${tx('dts.actions')}</th></tr></thead>
         <tbody>${apps.length ? apps.map((a) => html`<tr>
           <td data-label="${tx('dts.application')}"><a href="${BASE}/apps/${a.id}">${a.name}</a> <code>${a.alias}</code></td>
           <td data-label="${tx('dts.datasets')}">${a.datasets.join(', ')}</td>
           <td class="num" data-label="${tx('dts.users')}">${a.users}</td>
           <td class="num" data-label="${tx('dts.published_reports')}">${a.reports}</td>
-          <td data-label=""><a class="btn" href="/a/${a.alias}/">${icon('play')} ${tx('dts.run')}</a> <a class="btn" href="${BASE}/apps/${a.id}/shared">${icon('users')} ${tx('dts.users_and_roles')}</a></td>
+          <td class="col-actions" data-label=""><a class="btn" href="/a/${a.alias}/">${icon('play')} ${tx('dts.run')}</a> <a class="btn" href="${BASE}/apps/${a.id}/shared">${icon('users')} ${tx('dts.users_and_roles')}</a></td>
         </tr>`) : html`<tr><td colspan="5" class="empty">${tx('dts.no_reporting_applications_yet_choose')}</td></tr>`}</tbody></table></div>
         <p class="muted small">${tx.rich('dts.roles_help', { viewer: html`<b>viewer</b>`, editor: html`<b>editor</b>`, administrator: html`<b>administrator</b>` })}</p>`)}`;
-    return page(s, reply, tx('dts.data_reporter'), [], main);
+    // (UX-8) the lists take the page's width
+    return send(reply, s, shell(s, tx('dts.data_reporter'), crumbs([]), html`<div class="dataset-page">${main}</div>`, 'reporter'));
   });
 
   // ---------------------------------------------------------------- a new dataset: schema, then tables and views

package/src/builder/designer.ts

@@ -419,9 +419,7 @@ export async function designerRoutes(app: FastifyInstance) {
           </div></fieldset>
           <div class="buttons"><button class="btn btn-hot">${tx('pd.save_page')}</button></div>
         </form>`, true)])}
-        ${await usedInPanel(p.app_id, 'page', p)}
-        <form method="post" action="${BASE}/pages/${p.id}/delete" class="danger-zone">${csrf(s)}
-          <button class="btn btn-sm btn-danger" data-confirm="${tx('pd.delete_page_confirm', { n: p.page_no })}">${tx('pd.delete_page')}</button></form>`;
+        ${await usedInPanel(p.app_id, 'page', p)}`;
     }
     // (sprint 59) the help pane: the guide section of the selected component's type
     const guide = (() => {
@@ -465,7 +463,11 @@ export async function designerRoutes(app: FastifyInstance) {
           <a href="${BASE}/apps/${p.app_id}/shared">${bicon('shapes')} ${tx('pd.tab.shared')}</a>
           <a href="${BASE}/apps/${p.app_id}">${bicon('pages')} ${tx('pd.menu.all_pages')}</a>
           <a href="${BASE}/apps/${p.app_id}/export">${icon('download')} ${tx('pd.menu.export')}</a>
-        </div></div></details>`;
+        </div>
+        <!-- (UX-6) away from Save: deleting the page takes its number typed -->
+        <div class="menu-section"><form method="post" action="${BASE}/pages/${p.id}/delete" class="danger-form">${csrf(s)}
+          <label class="field"><span class="label">${tx('pd.delete_type', { n: p.page_no })}</span><input name="confirm" inputmode="numeric" autocomplete="off" required pattern="${p.page_no}"></label>
+          <button class="btn btn-sm btn-danger">${icon('trash')} ${tx('pd.delete_page')}</button></form></div></div></details>`;
     const toolbar = html`
       <div class="tb-group pd-pagenav" role="group" aria-label="${tx('pd.copy.page')}">
         ${prev ? html`<a class="tb-btn" href="${designerUrl(p.app_id, prev.page_no)}" title="${tx('pd.prev_title', { n: prev.page_no, name: prev.name })}">${bicon('left')}<span class="sr-only">${tx('pd.prev')}</span></a>` : html`<span class="tb-btn" aria-disabled="true">${bicon('left')}</span>`}
@@ -537,6 +539,13 @@ export async function designerRoutes(app: FastifyInstance) {
   app.post(`${BASE}/pages/:pid/delete`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
+    // (UX-6) only with the page number typed
+    const target = await owner.one<{ page_no: number }>('select page_no from meta.page where id = $1', [Number(req.params.pid) || 0]);
+    if (!target) return reply.code(404).send('Not found');
+    if (String(req.body?.confirm ?? '').trim() !== String(target.page_no)) {
+      flash(s, tr(s)('pd.delete_mismatch', { n: target.page_no }), 'error');
+      return back(reply, s, `${BASE}/pages/${req.params.pid}`);
+    }
     const p = await owner.one('delete from meta.page where id = $1 returning app_id, page_no', [req.params.pid]);
     if (p) for (const t of ['builder_lock', 'dev_comment']) await owner.query(`delete from meta.${t} where app_id = $1 and page_no = $2`, [p.app_id, p.page_no]);
     flash(s, tr(s)('pd.page_deleted'));

package/src/builder/errors.ts

@@ -1,8 +1,12 @@
 import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify';
 import { html } from '../html.ts';
 import { documentShell } from '../layout.ts';
-import { BASE, THEME_COOKIE, validTheme } from './ui.ts';
-import { cookieLanguage, translatorFor } from './i18n.ts';
+import { BASE, shell, THEME_COOKIE, validTheme } from './ui.ts';
+import { cookieLanguage, setRequestTranslator, tr, translatorFor } from './i18n.ts';
+import { getSession } from '../session.ts';
+import { loadLanguage } from './language.ts';
+import { loadWorkspaces } from './workspaces.ts';
+import { recentApps } from './home.ts';
 
 // (sprint 86) The builder's error pages: a browser that opens an address under /builder that
 // doesn't exist (or an application or page that doesn't, or not for this developer), or that
@@ -33,8 +37,42 @@ export function builderErrorPage(req: FastifyRequest, status: number) {
   );
 }
 
-const sendPage = (req: FastifyRequest, reply: FastifyReply, status: number) =>
-  reply.code(status).type('text/html; charset=utf-8').header('cache-control', 'no-store').send(builderErrorPage(req, status));
+/** "/builder/apps/new?x" → "apps new": the words of an address, for the search field of the page */
+export const searchFromPath = (url: string) =>
+  url.split(/[?#]/)[0].slice(BASE.length).split('/').map((w) => { try { return decodeURIComponent(w); } catch { return w; } })
+    .filter((w) => w && !/^\d+$/.test(w)).join(' ').replace(/[^\p{L}\p{N} _.-]+/gu, ' ').replace(/\s+/g, ' ').trim().slice(0, 80);
+
+/**
+ * (UX-10) "Page not found" for a signed-in developer: inside the builder's frame (rail, header search, status bar),
+ * with a search field filled from the address and the recent applications. The session is only read: nothing is
+ * saved, so a waiting message stays for the next page. Null: not signed in (the standalone page then).
+ */
+export async function framedNotFound(req: FastifyRequest, reply: FastifyReply) {
+  const s = await getSession(req, reply, null, BASE, { touch: false }).catch(() => null);
+  if (!s?.username) return null;
+  if (s.state.__BLANG === undefined) await loadLanguage(s);
+  const tx = tr(s);
+  setRequestTranslator(tx);
+  await loadWorkspaces(s);
+  s.path = req.url;
+  const title = tx('error.not_found_title');
+  const recent = await recentApps(s).catch(() => []);
+  const main = html`<div class="ab-narrow nf-page">
+    <h1>${title}</h1>
+    <p>${tx('error.not_found_text')}</p>
+    <p class="muted">${tx('error.label_not_found')}: <code>${req.url.split('?')[0].slice(0, 200)}</code></p>
+    <form method="get" action="${BASE}/palette" class="search nf-search" role="search">
+      <label class="sr-only" for="nf-q">${tx('bar.search_label')}</label>
+      <input id="nf-q" type="search" name="q" value="${searchFromPath(req.url)}" autofocus><button class="btn">${tx('common.search')}</button></form>
+    ${recent.length ? html`<h2>${tx('ab.recent')}</h2><ul class="ab-links">${recent.map((a) => html`<li><a href="${BASE}/apps/${a.id}">${a.name}</a></li>`)}</ul>` : ''}
+    <p><a class="btn btn-hot" href="${BASE}">${tx('error.home')}</a></p>
+  </div>`;
+  return shell(s, title, [[title]], main);
+}
+
+const sendPage = async (req: FastifyRequest, reply: FastifyReply, status: number) =>
+  reply.code(status).type('text/html; charset=utf-8').header('cache-control', 'no-store')
+    .send((status === 404 && (await framedNotFound(req, reply))) || builderErrorPage(req, status));
 
 /**
  * The hooks (registered on the root instance): unknown builder addresses, the builder's own
@@ -50,7 +88,7 @@ export function builderErrorPages(app: FastifyInstance) {
     if (reply.statusCode !== 404 || !isBuilder(req.url) || !wantsHtml(req)) return payload;
     if (!/^text\/plain\b/.test(String(reply.getHeader('content-type') ?? ''))) return payload;
     reply.type('text/html; charset=utf-8');
-    return builderErrorPage(req, 404);
+    return (await framedNotFound(req, reply)) || builderErrorPage(req, 404);
   });
 }
 
@@ -58,6 +96,6 @@ export function builderErrorPages(app: FastifyInstance) {
 export function builderServerError(req: FastifyRequest, reply: FastifyReply, err: Error & { statusCode?: number }) {
   if (!isBuilder(req.url) || !wantsHtml(req) || (err.statusCode !== undefined && err.statusCode < 500)) return false;
   req.log.error(err);
-  sendPage(req, reply, 500);
+  reply.code(500).type('text/html; charset=utf-8').header('cache-control', 'no-store').send(builderErrorPage(req, 500));
   return true;
 }

package/src/builder/home.ts

@@ -72,7 +72,7 @@ const TASKS: [BuilderKey, string][] = [
   ['admin.developers', `${BASE}/developers`],
 ];
 
-async function recentApps(s: Session) {
+export async function recentApps(s: Session) {
   const ids = recentIds(s);
   const ws = currentWorkspace(s);
   if (ids.length) {
@@ -142,20 +142,20 @@ export async function homeRoutes(app: FastifyInstance) {
               <a class="tb-btn" href="${BASE}/apps/${a.id}" title="${tx('ab.edit', { name: a.name })}">${icon('edit')}<span class="sr-only">${tx('ab.edit', { name: a.name })}</span></a>
               <a class="tb-btn" href="/a/${a.alias}" target="_blank" rel="noopener" title="${tx('ab.run', { name: a.name })}">${icon('play')}<span class="sr-only">${tx('ab.run', { name: a.name })}</span></a>
             </div></article>`)}</div>`
-        : html`<div class="table-wrap ab-table"><table class="report ab-apps">
+        : html`<div class="table-wrap ab-table rep-fit"><table class="report ab-apps">
             <caption class="sr-only">${tx('ab.col.apps')}</caption>
-            <thead><tr>${th('id', tx('ab.col.app'), 'num')}${th('name', tx('ab.col.name'))}${th('alias', tx('ab.col.alias'))}${th('pages', tx('ab.col.pages'), 'num')}<th scope="col" class="num">${tx('ab.col.views')}</th><th scope="col">${tx('ab.col.signin')}</th>${th('updated', tx('ab.col.updated'))}<th scope="col">${tx('ab.col.updated_by')}</th><th scope="col" class="num">${tx('ab.col.copies')}</th><th scope="col" class="ab-actions-col">${tx('ab.col.actions')}</th></tr></thead>
+            <thead><tr>${th('id', tx('ab.col.app'), 'num')}${th('name', tx('ab.col.name'))}${th('alias', tx('ab.col.alias'))}${th('pages', tx('ab.col.pages'), 'num')}<th scope="col" class="num col-low">${tx('ab.col.views')}</th><th scope="col">${tx('ab.col.signin')}</th>${th('updated', tx('ab.col.updated'))}<th scope="col" class="col-low">${tx('ab.col.updated_by')}</th><th scope="col" class="num col-low">${tx('ab.col.copies')}</th><th scope="col" class="ab-actions-col col-actions">${tx('ab.col.actions')}</th></tr></thead>
             <tbody>${rows.map((a) => html`<tr data-filter-row>
               <td class="num">${a.id}</td>
               <td class="ab-name"><a href="${BASE}/apps/${a.id}">${appIcon(a)}<span>${a.name}</span></a>${a.locked_by ? html`<span class="ab-lock" role="img" aria-label="${lockedText(tx, a.locked_by)}" title="${lockedText(tx, a.locked_by)}">${icon('lock')}</span>` : ''}</td>
               <td>${a.alias}${a.group_name ? html` <span class="tag">${a.group_name}</span>` : ''}</td>
               <td class="num">${a.pages}</td>
-              <td class="num">${a.views}</td>
+              <td class="num col-low">${a.views}</td>
               <td>${tx(a.authentication === 'none' ? 'ab.auth.none' : a.authentication === 'header' ? 'ab.auth.header' : a.authentication === 'database' ? 'ab.auth.database' : a.authentication === 'custom' ? 'ab.auth.custom' : 'ab.auth.app_users')}</td>
               <td title="${a.updated_at ? new Date(a.updated_at).toISOString().slice(0, 16).replace('T', ' ') : ''}">${ago(a.updated_at, Date.now(), tx)}</td>
-              <td class="ab-by">${a.updated_by ?? ''}</td>
-              <td class="num">${a.copies ? html`<a href="${BASE}/apps/${a.id}/working-copies" aria-label="${tx('ab.copies_of', { copies: copiesText(tx, a.copies), name: a.name })}">${a.copies}</a>` : '0'}</td>
-              <td class="ab-actions">
+              <td class="ab-by col-low">${a.updated_by ?? ''}</td>
+              <td class="num col-low">${a.copies ? html`<a href="${BASE}/apps/${a.id}/working-copies" aria-label="${tx('ab.copies_of', { copies: copiesText(tx, a.copies), name: a.name })}">${a.copies}</a>` : '0'}</td>
+              <td class="ab-actions col-actions">
                 <a class="tb-btn" href="${BASE}/apps/${a.id}" title="${tx('ab.edit', { name: a.name })}">${icon('edit')}<span class="sr-only">${tx('ab.edit', { name: a.name })}</span></a>
                 <a class="tb-btn" href="/a/${a.alias}" target="_blank" rel="noopener" title="${tx('ab.run', { name: a.name })}">${icon('play')}<span class="sr-only">${tx('ab.run', { name: a.name })}</span></a>
               </td></tr>`)}</tbody></table></div>`;

package/src/builder/i18n/de.ts

@@ -408,7 +408,6 @@ export const de: BuilderMessages = {
   'pd.not_found': 'Komponente nicht gefunden.',
   'pd.save_page': 'Seite speichern',
   'pd.delete_page': 'Seite löschen',
-  'pd.delete_page_confirm': 'Seite {n} und alle ihre Komponenten löschen?',
   'pd.filter_label': 'Eigenschaften filtern',
   'pd.filter': 'Filtern',
   'pd.help_hint': 'Wählen Sie eine Eigenschaft, um hier ihre Hilfe zu sehen.',
@@ -1427,7 +1426,6 @@ export const de: BuilderMessages = {
   'st.ts_format': 'Datums- und Zeitformat',
   'st.ts_format_ph': 'z. B. DD-MM-YYYY HH24:MI',
   'st.save_settings': 'Einstellungen speichern',
-  'st.delete_confirm': 'Anwendung {app} mit allen Seiten löschen?',
   'st.delete': 'Anwendung löschen',
   'st.error_fn': 'Funktion zur Fehlerbehandlung',
   'st.error_fn_ph': 'z. B. sales.error_message',
@@ -1475,7 +1473,7 @@ export const de: BuilderMessages = {
   'us.status': 'Status',
   'us.none': 'keine',
   'us.password': 'Passwort',
-  'us.no_password': 'kein Passwort',
+  'us.no_password': 'Kein Passwort',
   'us.active': 'aktiv',
   'us.inactive': 'inaktiv',
   'us.last': 'zuletzt {at}',
@@ -1845,8 +1843,8 @@ export const de: BuilderMessages = {
   'mfa.locked_out': 'Telefon, Schlüssel und Codes verloren? Bitten Sie einen Administrator, Ihre Zwei-Faktor-Anmeldung zurückzusetzen.',
   'mfa.wrong': 'Dieser Code ist falsch oder wurde schon verwendet.',
   'mfa.column': 'Zwei-Faktor',
-  'mfa.on': 'an',
-  'mfa.off': 'aus',
+  'mfa.on': 'An',
+  'mfa.off': 'Aus',
   'mfa.reset': 'Zurücksetzen',
   'mfa.reason': 'Grund',
   'mfa.reset_help': 'Entfernt die Apps und Wiederherstellungscodes von {user} und meldet die Person ab. Protokolliert; die Administratoren erhalten eine E-Mail.',
@@ -7538,4 +7536,19 @@ export const de: BuilderMessages = {
   'wu.sec.instance': 'Instanz',
   // ------------------------------------------------------------ Workspace home: needs attention (UX-13)
   'wh.attention': 'Erfordert Aufmerksamkeit',
+  // ------------------------------------------------------------ Delete with a typed confirmation (UX-6)
+  'st.danger_zone': 'Gefahrenzone',
+  'st.delete_text': 'Beim Löschen von {app} werden seine Seiten, gemeinsamen Komponenten, Arbeitskopien und auch seine Sicherungen entfernt; das lässt sich nicht rückgängig machen. Exportieren Sie die Anwendung vorher, wenn Sie sie noch brauchen könnten.',
+  'st.delete_type': 'Geben Sie zur Bestätigung den Alias {alias} ein',
+  'st.delete_mismatch': 'Geben Sie den Alias der Anwendung, {alias}, ein, um sie zu löschen.',
+  'pd.delete_type': 'Geben Sie zur Bestätigung die Seitennummer {n} ein',
+  'pd.delete_mismatch': 'Geben Sie die Seitennummer {n} ein, um die Seite zu löschen.',
+  // ------------------------------------------------------------ Create application: name first, a sticky footer (UX-7)
+  'aw.data_and_pages': 'Daten und Seiten',
+  'aw.sign_in': 'Anmeldung',
+  'aw.sum_on': '{n} Seiten auf {schema}',
+  'aw.sum_on_1': '{n} Seite auf {schema}',
+  'aw.sum_new': 'Eine neue Anwendung mit eigenem Schema',
+  // ------------------------------------------------------------ A side drawer's Close (UX-8)
+  'common.close': 'Schließen',
 };