pgkiln 0.88.0 → 0.90.0

package/public/worksheet.js

@@ -104,11 +104,15 @@
     out.dataset.active = key;
   };
   show(out.dataset.active || 'result');
+  // (UX-1) before a run the output is only its tab strip; choosing a tab opens it
   out.querySelector('[role=tablist]').addEventListener('click', (e) => {
     const t = e.target.closest('[role=tab]');
-    if (t) show(t.dataset.wsTab);
+    if (!t) return;
+    delete out.dataset.empty;
+    show(t.dataset.wsTab);
   });
   out.querySelector('[role=tablist]').addEventListener('keydown', (e) => {
+    delete out.dataset.empty;
     const k = tabs.findIndex((t) => t.getAttribute('aria-selected') === 'true');
     const next = { ArrowRight: k + 1, ArrowLeft: k - 1, Home: 0, End: tabs.length - 1 }[e.key];
     if (next === undefined) return;
@@ -552,6 +556,16 @@
     (k === 'h' ? fr : k === 'g' ? bar.querySelector('[data-ws-goto]') : fq).focus();
   };
   form.querySelector('[data-ws-find]').addEventListener('click', () => openFind('f'));
+  // (UX-1) Suggest and Check in the toolbar: the code editor's own buttons (its bar below the editor stays hidden
+  // until it has a message, such as Check's result)
+  const ceButton = (cls) => form.querySelector(`.ws-editor .${cls}`);
+  for (const [attr, cls] of [['data-ws-suggest', 'ce-suggest'], ['data-ws-check', 'ce-check']]) {
+    const btn = form.querySelector(`[${attr}]`);
+    btn?.addEventListener('click', () => ceButton(cls)?.click());
+    const sync = () => { if (btn) btn.hidden = !ceButton(cls) || ceButton(cls).hidden; };
+    sync();
+    window.addEventListener('load', sync);
+  }
   form.querySelector('[data-ws-format]').addEventListener('click', format);
   form.querySelector('[data-ws-case]').addEventListener('click', convertCase);
   bar.addEventListener('keydown', (e) => {

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

@@ -123,7 +123,7 @@ export async function designerRoutes(app: FastifyInstance) {
     // (sprint 90) a commented-out component: struck through in the tree, Uncomment in its menu
     const commented = (r: any) => (r.build_option === 'COMMENTED_OUT' ? raw(' data-commented') : '');
     const leaf = (k: string, r: any, ic: Raw | '', label: string, note = '') =>
-      html`<li><a class="pd-node" href="${url(`c=${k}-${r.id}`)}"${cur(`${k}-${r.id}`)} data-kind="${k}" data-id="${r.id}"${commented(r)}>${ic}<span class="pd-label">${label}</span>${badges(r)}${note ? html`<span class="pd-note">${note}</span>` : ''}</a></li>`;
+      html`<li><a class="pd-node" href="${url(`c=${k}-${r.id}`)}"${cur(`${k}-${r.id}`)} data-kind="${k}" data-id="${r.id}" title="${note ? `${label} (${note})` : label}"${commented(r)}>${ic}<span class="pd-label">${label}</span>${badges(r)}${note ? html`<span class="pd-note">${note}</span>` : ''}</a></li>`;
     const folder = (label: string, children: Raw[] | Raw, open = true) =>
       html`<li${open ? '' : raw(' data-collapsed')}><span class="pd-node pd-folder"><span class="pd-label">${label}</span></span><ul>${children}</ul></li>`;
     const none = (text: string) => html`<li class="pd-empty">${text}</li>`;
@@ -136,7 +136,7 @@ export async function designerRoutes(app: FastifyInstance) {
       const bySlot = ['region', ...TOP_SLOTS, ...BOTTOM_SLOTS].map((sl) => [sl, buttons.filter((b) => (b.slot ?? 'region') === sl)] as const).filter(([, list]) => list.length);
       const kids = [...(items.length ? [folder(tx('pd.tree.items'), items.map(itemLeaf))] : []),
         ...bySlot.map(([sl, list]) => folder(sl === 'region' ? tx('pd.tree.buttons') : tx('pd.tree.buttons_at', { slot: slotLabel(sl) }), list.map(buttonLeaf)))];
-      return html`<li><a class="pd-node" href="${url(`c=region-${r.id}`)}"${cur(`region-${r.id}`)} data-kind="region" data-id="${r.id}" data-position="${r.position ?? ''}" data-next="${next?.id ?? ''}"${commented(r)}>${bicon(regionIcon(r.type))}<span class="pd-label">${regionTitle(r)}</span>${badges(r)}<span class="pd-note">${r.type}</span></a>${kids.length ? html`<ul>${kids}</ul>` : ''}</li>`;
+      return html`<li><a class="pd-node" href="${url(`c=region-${r.id}`)}"${cur(`region-${r.id}`)} data-kind="region" data-id="${r.id}" data-position="${r.position ?? ''}" data-next="${next?.id ?? ''}" title="${regionTitle(r)} (${r.type})"${commented(r)}>${bicon(regionIcon(r.type))}<span class="pd-label">${regionTitle(r)}</span>${badges(r)}<span class="pd-note">${r.type}</span></a>${kids.length ? html`<ul>${kids}</ul>` : ''}</li>`;
     };
     // (sprint 77, APEX: the rendering tree by display position) the page template's positions, and others in use
     const treeSide = p.page_template === 'left_side_column' ? 'left' : p.page_template === 'right_side_column' ? 'right' : null;
@@ -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/gallery.ts

@@ -9,7 +9,7 @@ import { migrate } from '../migrate.ts';
 import { clientIp, logActivity } from '../session.ts';
 import { openBlueprint } from './blueprints.ts';
 import { isAdmin } from './locks.ts';
-import { back, BASE, csrf, developer, flash, send, shell, type Req } from './ui.ts';
+import { back, BASE, csrf, developer, flash, pageHeader, send, shell, type Req } from './ui.ts';
 import { currentWorkspace, inWorkspaceSql, placeApp } from './workspaces.ts';
 import { workspacesChanged } from '../workspace-db.ts';
 import { scopedTx as tx, type BuilderKey } from './i18n.ts';
@@ -104,7 +104,7 @@ export async function galleryRoutes(app: FastifyInstance) {
     const tabs = html`<nav class="gal-tabs segmented" aria-label="${tx('gal.kinds')}">${TABS.map(([t, l]) =>
       html`<a href="${BASE}/gallery?tab=${t}${q ? `&q=${encodeURIComponent(q)}` : ''}"${tab === t ? raw(' aria-current="page"') : ''}>${tx(l)} <span class="gal-count">${counts[t]}</span></a>`)}</nav>`;
     const blueprintCard = (kind: 'starters' | 'utilities') => (x: Starter) => card(x.icon, x.title, 'pgkiln', x.description,
-      html`<form method="post" action="${BASE}/gallery/${kind}/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm">${tx('gal.install')}</button></form>`);
+      html`<form method="post" action="${BASE}/gallery/${kind}/${x.key}">${csrf(s)}<button class="btn btn-sm">${tx('gal.install')}</button></form>`);
     const cards =
       tab === 'samples'
         ? samples.filter(matches).map((x) => {
@@ -115,13 +115,13 @@ export async function galleryRoutes(app: FastifyInstance) {
                     ? html`<a class="btn btn-sm" href="${BASE}/apps/${it.id}">${tx('gal.edit')}</a>`
                     : html`<span class="muted small">${tx('gal.other_workspace')}</span>`}`
                 : admin
-                  ? html`<form method="post" action="${BASE}/gallery/samples/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm" data-confirm="${tx('gal.confirm_install', { title: x.title })}">${tx('gal.install')}</button></form>`
+                  ? html`<form method="post" action="${BASE}/gallery/samples/${x.key}">${csrf(s)}<button class="btn btn-sm" data-confirm="${tx('gal.confirm_install', { title: x.title })}">${tx('gal.install')}</button></form>`
                   : html`<span class="muted small">${tx('gal.admin_installs')}</span>`);
           })
         : tab === 'starters' || tab === 'utilities'
           ? (tab === 'starters' ? starters : utilities).filter(matches).map(blueprintCard(tab))
           : custom.filter(matches).map((x) => card('copy', x.name, tx('gal.this_workspace'), x.description ?? tx('gal.boilerplate_desc'),
-              html`<a class="btn btn-hot btn-sm" href="${BASE}/create?boilerplate=${x.id}">${tx('gal.create_from')}</a><a class="btn btn-sm" href="${BASE}/apps/${x.id}">${tx('gal.edit')}</a>`));
+              html`<a class="btn btn-sm" href="${BASE}/create?boilerplate=${x.id}">${tx('gal.create_from')}</a><a class="btn btn-sm" href="${BASE}/apps/${x.id}">${tx('gal.edit')}</a>`));
     const empty = q && counts[tab]
       ? html`<p class="muted">${tx.rich('gal.no_match', { q: html`<strong>${q}</strong>` })} <a href="${BASE}/gallery?tab=${tab}">${tx('gal.show_all')}</a></p>`
       : tab === 'custom'
@@ -129,13 +129,13 @@ export async function galleryRoutes(app: FastifyInstance) {
         : html`<p class="muted">${tx('gal.empty')}</p>`;
     const intro = tx(({ samples: 'gal.intro.samples', starters: 'gal.intro.starters', utilities: 'gal.intro.utilities', custom: 'gal.intro.custom' } as const)[tab]);
     const main = html`<div class="gal">
+      ${pageHeader(tx('rail.gallery'))}
       <div class="gal-bar">
         <form class="ab-search gal-search" role="search" method="get" action="${BASE}/gallery"><label class="sr-only" for="gal-q">${tx('gal.search')}</label>${icon('search')}
           <input type="hidden" name="tab" value="${tab}">
           <input id="gal-q" name="q" type="search" placeholder="${tx('gal.search')}" autocomplete="off" value="${q}" data-filter-list=".gal [data-filter-row]"></form>
         ${tabs}
       </div>
-      <h1 class="sr-only">${tx('rail.gallery')}</h1>
       <p class="muted">${intro}</p>
       ${cards.length ? html`<div class="gal-grid">${cards}</div>` : empty}
     </div>`;