pgkiln 0.41.0 → 0.42.0

package/public/app.css

@@ -76,12 +76,100 @@
   color-scheme: dark;
 }
 
+/* ---------- base style "Iris" (theme.base = 'iris'; the default for new
+   applications, like APEX 26's Iris theme style): (sprint 72) a light body,
+   a dark warm-grey header and menu with a thin accent strip, square-ish
+   regions with a rule under their header, 4 px corners, a dark primary button
+   and a large page title on the body. Selectors are html[data-style="iris"]:
+   they beat the Standard values above, and the application's own colours
+   (src/runtime/styles.ts, html:root, later in the page) beat them in turn.
+   Contrast: text ≥ 15:1, muted ≥ 5.8:1, accent ≥ 5.5:1, menu text ≥ 10:1. */
+html[data-style="iris"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --surface-2: #f7f6f5;
+  --surface-3: #efedeb;
+  --text: #1f1c1a;
+  --muted: #645e59;
+  --border: #e2dfdc;
+  --accent: #2b62c4;
+  --accent-text: #ffffff;
+  --accent-soft: #e9f0fb;
+  --header: #3a3632;
+  --header-text: #f7f5f3;
+  --nav-bg: #2f2b28;
+  --nav-text: #ece8e4;
+  --nav-muted: #b9b2ab;
+  --nav-hover: #403b37;
+  --nav-active: #4a443f;
+  --nav-current: #ffffff;
+  --hot: #2f2b28;
+  --hot-text: #ffffff;
+  --radius: 4px;
+  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
+  --shadow: none;
+}
+@media (prefers-color-scheme: dark) {
+  html[data-style="iris"]:not([data-theme="light"]) {
+    --bg: #1a1817;
+    --surface: #232120;
+    --surface-2: #2a2826;
+    --surface-3: #33302d;
+    --text: #ece9e6;
+    --muted: #aaa49e;
+    --border: #3a3633;
+    --accent: #84aef2;
+    --accent-text: #10131a;
+    --accent-soft: #23324a;
+    --header: #121110;
+    --header-text: #ece9e6;
+    --nav-bg: #1d1b1a;
+    --nav-text: #e2ded9;
+    --nav-muted: #a39c95;
+    --nav-hover: #2c2927;
+    --nav-active: #36322f;
+    --nav-current: #ffffff;
+    --hot: #ece9e6;
+    --hot-text: #1a1817;
+  }
+}
+html[data-style="iris"][data-theme="dark"] {
+  --bg: #1a1817;
+  --surface: #232120;
+  --surface-2: #2a2826;
+  --surface-3: #33302d;
+  --text: #ece9e6;
+  --muted: #aaa49e;
+  --border: #3a3633;
+  --accent: #84aef2;
+  --accent-text: #10131a;
+  --accent-soft: #23324a;
+  --header: #121110;
+  --header-text: #ece9e6;
+  --nav-bg: #1d1b1a;
+  --nav-text: #e2ded9;
+  --nav-muted: #a39c95;
+  --nav-hover: #2c2927;
+  --nav-active: #36322f;
+  --nav-current: #ffffff;
+  --hot: #ece9e6;
+  --hot-text: #1a1817;
+}
+html[data-style="iris"] .t-header { box-shadow: inset 0 3px 0 var(--accent); }
+html[data-style="iris"] .t-nav { border-right-color: transparent; }
+html[data-style="iris"] .t-titlebar { background: transparent; border-bottom: 0; padding: 1.25rem 1.5rem 0.25rem; }
+html[data-style="iris"] .t-titlebar h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
+html[data-style="iris"] .region-header h2 { font-size: 1.05rem; }
+html[data-style="iris"] .btn-hot { background: var(--hot); border-color: var(--hot); color: var(--hot-text); }
+html[data-style="iris"] .btn-hot:hover { background: color-mix(in srgb, var(--hot) 82%, var(--bg)); }
+html[data-style="iris"] .btn-hot .btn-badge { background: var(--hot-text); color: var(--hot); }
+
 /* ---------- base style "Iris" (theme.base = 'iris'; the default for new
    applications, like APEX 26.1's Iris theme style). Selectors are
-   html[data-style="iris"]: they beat the Standard values above, and the
+   html[data-style="lavender"]: they beat the Standard values above, and the
    application's own colours (src/runtime/styles.ts, html:root, later in the
    page) beat them in turn. Contrast: text ≥ 15:1, muted ≥ 5.8:1, accent ≥ 6.5:1. */
-html[data-style="iris"] {
+html[data-style="lavender"] {
   --bg: #f6f6fb;
   --surface: #ffffff;
   --surface-2: #f8f8fc;
@@ -101,7 +189,7 @@ html[data-style="iris"] {
   --shadow: 0 1px 2px rgb(30 27 75 / 5%), 0 2px 8px rgb(30 27 75 / 6%);
 }
 @media (prefers-color-scheme: dark) {
-  html[data-style="iris"]:not([data-theme="light"]) {
+  html[data-style="lavender"]:not([data-theme="light"]) {
     --bg: #121120;
     --surface: #1a1930;
     --surface-2: #201f38;
@@ -119,7 +207,7 @@ html[data-style="iris"] {
     --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 8px rgb(0 0 0 / 25%);
   }
 }
-html[data-style="iris"][data-theme="dark"] {
+html[data-style="lavender"][data-theme="dark"] {
   --bg: #121120;
   --surface: #1a1930;
   --surface-2: #201f38;
@@ -136,13 +224,13 @@ html[data-style="iris"][data-theme="dark"] {
   --nav-active: #2a2752;
   --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 8px rgb(0 0 0 / 25%);
 }
-/* Iris: rounded navigation pills instead of an edge bar, quieter region headers, pill-shaped primary buttons */
-html[data-style="iris"] .t-nav a[aria-current="page"] { box-shadow: none; border-radius: calc(var(--radius) * 0.75); }
-html[data-style="iris"] .t-nav a, html[data-style="iris"] .t-nav summary { border-radius: calc(var(--radius) * 0.75); }
-html[data-style="iris"] .region-header { border-bottom-color: transparent; }
-html[data-style="iris"] .region-header h2 { letter-spacing: -0.01em; }
-html[data-style="iris"] .btn-hot { border-radius: 999px; }
-html[data-style="iris"] :focus-visible { outline-color: var(--accent); }
+/* Lavender: rounded navigation pills instead of an edge bar, quieter region headers, pill-shaped primary buttons */
+html[data-style="lavender"] .t-nav a[aria-current="page"] { box-shadow: none; border-radius: calc(var(--radius) * 0.75); }
+html[data-style="lavender"] .t-nav a, html[data-style="lavender"] .t-nav summary { border-radius: calc(var(--radius) * 0.75); }
+html[data-style="lavender"] .region-header { border-bottom-color: transparent; }
+html[data-style="lavender"] .region-header h2 { letter-spacing: -0.01em; }
+html[data-style="lavender"] .btn-hot { border-radius: 999px; }
+html[data-style="lavender"] :focus-visible { outline-color: var(--accent); }
 
 * { box-sizing: border-box; }
 html { -webkit-text-size-adjust: 100%; }
@@ -225,17 +313,18 @@ details.menu > summary::-webkit-details-marker { display: none; }
 .t-nav ul ul { padding: 0 0 0 1.4rem; }
 .t-nav a, .t-nav summary {
   display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.65rem; border-radius: 6px;
-  color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; font-size: 0.93rem;
+  color: var(--nav-text, var(--text)); text-decoration: none; cursor: pointer; white-space: nowrap; font-size: 0.93rem;
 }
 .t-nav summary { list-style: none; }
 .t-nav summary::-webkit-details-marker { display: none; }
-.t-nav summary::after { content: "›"; margin-left: auto; color: var(--muted); transition: transform 0.15s; }
+.t-nav summary::after { content: "›"; margin-left: auto; color: var(--nav-muted, var(--muted)); transition: transform 0.15s; }
 .t-nav details[open] > summary::after { transform: rotate(90deg); }
-.t-nav a:hover, .t-nav summary:hover { background: var(--surface-3); }
-.t-nav a[aria-current="page"] { background: var(--nav-active); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
-.t-nav .in-trail { color: var(--accent); }
-.t-nav .icon { color: var(--muted); }
-.t-nav a[aria-current="page"] .icon, .t-nav .in-trail .icon { color: var(--accent); }
+.t-nav a:hover, .t-nav summary:hover { background: var(--nav-hover, var(--surface-3)); }
+/* (sprint 72) --nav-* let a style have a dark menu (Iris); without them the menu takes the page's colours */
+.t-nav a[aria-current="page"] { background: var(--nav-active); color: var(--nav-current, var(--accent)); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
+.t-nav .in-trail { color: var(--nav-current, var(--accent)); }
+.t-nav .icon { color: var(--nav-muted, var(--muted)); }
+.t-nav a[aria-current="page"] .icon, .t-nav .in-trail .icon { color: var(--nav-current, var(--accent)); }
 
 /* ---------- main ---------- */
 .t-main { min-width: 0; }
@@ -259,6 +348,9 @@ details.menu > summary::-webkit-details-marker { display: none; }
 .region-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 1.5rem; padding: 2rem 1.75rem; border-radius: var(--radius);
   background: var(--accent-soft); color: var(--text); }
 .region-hero-icon .icon { width: 3rem; height: 3rem; color: var(--accent); }
+/* (097) the generated home page: the icon on a tile in the accent colour */
+.region-hero-icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: calc(var(--radius) + 4px); background: var(--accent); }
+.region-hero-icon .icon { width: 2.4rem; height: 2.4rem; color: var(--accent-text, #fff); }
 .region-hero-text h2 { font-size: 1.75rem; margin: 0 0 0.35rem; }
 .region-hero-buttons, .region-title-buttons, .region-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
 @media (max-width: 640px) { .region-hero { grid-template-columns: 1fr; padding: 1.25rem 1rem; } }
@@ -401,7 +493,11 @@ details.btn-menu[open] > summary .btn-caret { transform: rotate(-90deg); }
 table.report { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
 .report th, .report td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
 .report tbody tr:last-child td { border-bottom: 0; }
-.report th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: var(--surface-2); font-weight: 650; }
+.report th { font-size: 0.85rem; color: var(--muted); background: var(--surface-2); font-weight: 650; }
+/* (097) the edit link of a row: a pencil in a narrow first column */
+.report th.row-edit, .report td.row-edit { width: 2.25rem; text-align: center; padding-left: 0.4rem; padding-right: 0.4rem; }
+.report td.row-edit a { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 6px; color: var(--accent); }
+.report td.row-edit a:hover, .report td.row-edit a:focus-visible { background: var(--accent-soft); }
 .report th a { color: inherit; text-decoration: none; display: inline-flex; gap: 0.3rem; }
 .report th a:hover { color: var(--accent); }
 .sort-ind { font-size: 0.7em; }
@@ -446,7 +542,19 @@ table.report { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
 .swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
 
 /* horizontal bars */
-.chart-bar { display: flex; flex-direction: column; gap: 0.45rem; }
+.chart-bar { display: flex; flex-direction: column; gap: 0; }
+.chart-bar > .bar-row { padding: 0.22rem 0; }
+/* (097) gridlines behind the bars and a value axis under them */
+.bar-stack { position: relative; }
+.bar-grid { position: absolute; inset: -0.22rem 0; pointer-events: none; }
+.bar-gridline { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--chart-grid); }
+.bar-gridline.baseline { border-left-color: var(--chart-axis); }
+.bar-stack > .bar-track { position: relative; }
+.bar-axis { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; gap: 0.75rem; font-size: 0.72rem; color: var(--muted); }
+.bar-axis > :last-child { min-width: 3rem; }
+.bar-ticks { position: relative; height: 1.1rem; }
+.bar-ticks > span { position: absolute; top: 0.15rem; transform: translateX(-50%); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.bar-ticks > span:first-child { transform: none; }
 .bar-row { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; gap: 0.75rem; align-items: center; font-size: 0.88rem; }
 .bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
 .bar-stack { display: flex; flex-direction: column; gap: 2px; }
@@ -822,7 +930,7 @@ pre.source { font-family: var(--mono); font-size: 0.82rem; background: var(--sur
   .card.metric { grid-template-columns: 1fr; row-gap: 0.25rem; }
   .metric-icon { grid-row: auto; width: 36px; height: 36px; }
   .metric-value { font-size: 1.35rem; }
-  .bar-row { grid-template-columns: minmax(60px, 35%) 1fr auto; gap: 0.5rem; }
+  .bar-row, .bar-axis { grid-template-columns: minmax(60px, 35%) 1fr auto; gap: 0.5rem; }
   .title-row .buttons { width: 100%; }
   .title-row .buttons .btn { flex: 1 1 auto; }
 
@@ -842,7 +950,9 @@ pre.source { font-family: var(--mono); font-size: 0.82rem; background: var(--sur
     display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr); gap: 0.75rem;
     border: 0; padding: 0.3rem 0.8rem; white-space: normal; max-width: none; text-align: left !important; overflow-wrap: anywhere;
   }
-  .report-reflow td::before { content: attr(data-label); font-size: 0.78rem; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
+  .report-reflow td::before { content: attr(data-label); font-size: 0.8rem; font-weight: 650; color: var(--muted); }
+  .report-reflow td.row-edit { width: auto; text-align: left; }
+  .report-reflow td.row-edit::before { content: none; }
   .report-reflow td.empty { display: block; }
   .report-reflow td.empty::before { content: none; }
   .report-reflow td.pre { white-space: pre-wrap; }
@@ -1689,19 +1799,51 @@ dialog.crop-dialog::backdrop { background: rgb(15 20 30 / 55%); }
 .crop-dialog .buttons { display: flex; justify-content: flex-end; gap: 0.5rem; }
 
 /* (079) Developer toolbar: shown to developers with a builder session in the same browser.
-   Fixed at the bottom left, collapsible (a <details>, so it works without JavaScript). */
-.devbar { position: fixed; left: 0.75rem; bottom: 0.75rem; z-index: 900; max-width: calc(100vw - 1.5rem);
-  background: #1b2330; color: #fff; border-radius: var(--radius); box-shadow: 0 4px 16px rgb(0 0 0 / 25%); font-size: 0.8125rem; }
-.devbar summary { cursor: pointer; padding: 0.4rem 0.75rem; font-weight: 600; list-style: none; }
-.devbar summary::-webkit-details-marker { display: none; }
-.devbar summary::before { content: '▸ '; }
-.devbar[open] summary::before { content: '▾ '; }
-.devbar ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; list-style: none; margin: 0; padding: 0 0.75rem 0.5rem; }
-.devbar a { color: #9cc8ff; }
-.devbar a:focus-visible, .devbar button:focus-visible, .devbar select:focus-visible { outline: 2px solid #9cc8ff; outline-offset: 2px; }
-.devbar-debug { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
+   (sprint 72) A compact bar of icons centred at the bottom (APEX's runtime developer toolbar);
+   app.js docks it at the top, left or right and shrinks it to a slim tab when it is not used.
+   The page keeps room for it, so it never covers the menu's last entry or a report's pager. */
+.devbar { --devbar-size: 2.75rem; position: fixed; z-index: 900; left: 50%; bottom: 0.5rem; transform: translateX(-50%);
+  background: #1b2330; color: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgb(0 0 0 / 25%); font-size: 0.8125rem;
+  transition: transform 0.2s ease, opacity 0.2s ease; }
+.devbar-tools { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0.25rem; }
+.devbar .devbar-tool { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 7px; color: #dbe7ff;
+  background: none; border: 0; cursor: pointer; list-style: none; padding: 0; }
+.devbar-tool::-webkit-details-marker { display: none; }
+.devbar .devbar-tool:hover, .devbar-menu[open] > .devbar-tool, .devbar-quick[aria-pressed="true"] { background: #2f3b4f; color: #fff; }
+.devbar-debug-menu.is-on > .devbar-tool { color: #ffd166; }
+.devbar a, .devbar-pop a { color: #9cc8ff; }
+.devbar a:focus-visible, .devbar button:focus-visible, .devbar select:focus-visible, .devbar summary:focus-visible, .devbar input:focus-visible { outline: 2px solid #9cc8ff; outline-offset: 2px; }
+.devbar-menu { position: relative; }
+.devbar-pop { position: absolute; bottom: calc(100% + 0.6rem); left: 50%; transform: translateX(-50%); min-width: 14rem; max-width: min(22rem, calc(100vw - 2rem));
+  background: #1b2330; border-radius: 8px; box-shadow: 0 4px 16px rgb(0 0 0 / 30%); padding: 0.6rem 0.75rem; display: grid; gap: 0.5rem; }
+.devbar-debug { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; }
+.devbar-debug label { flex-basis: 100%; }
 .devbar-debug select, .devbar-debug button { font: inherit; font-size: 0.8125rem; padding: 0.1rem 0.3rem; border-radius: 4px; border: 1px solid #5e6a7a; background: #2b3340; color: #fff; }
 .devbar-debug button { cursor: pointer; }
+.devbar-dock { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.75rem; }
+.devbar-dock legend { padding: 0; margin-bottom: 0.25rem; font-weight: 600; }
+.devbar-pop .devbar-facts { color: #fff; }
+/* docked at the top, or on the left or right edge (a column of icons) */
+.devbar[data-dock="top"] { bottom: auto; top: 0.5rem; }
+.devbar[data-dock="top"] .devbar-pop { bottom: auto; top: calc(100% + 0.6rem); }
+.devbar[data-dock="left"], .devbar[data-dock="right"] { left: 0.5rem; bottom: auto; top: 50%; transform: translateY(-50%); }
+.devbar[data-dock="right"] { left: auto; right: 0.5rem; }
+.devbar[data-dock="left"] .devbar-tools, .devbar[data-dock="right"] .devbar-tools { flex-direction: column; }
+.devbar[data-dock="left"] .devbar-pop { bottom: auto; top: 0; left: calc(100% + 0.6rem); transform: none; }
+.devbar[data-dock="right"] .devbar-pop { bottom: auto; top: 0; left: auto; right: calc(100% + 0.6rem); transform: none; }
+/* not used for a while: a slim tab at the edge; pointing at it or focusing it brings it back */
+.devbar.is-idle { opacity: 0.85; }
+.devbar.is-idle[data-dock="bottom"] { transform: translate(-50%, calc(100% - 6px)); }
+.devbar.is-idle[data-dock="top"] { transform: translate(-50%, calc(-100% + 6px)); }
+.devbar.is-idle[data-dock="left"] { transform: translate(calc(-100% + 6px), -50%); }
+.devbar.is-idle[data-dock="right"] { transform: translate(calc(100% - 6px), -50%); }
+.devbar.is-idle .devbar-tools { pointer-events: none; }
+@media (prefers-reduced-motion: reduce) { .devbar { transition: none; } }
+/* room for the bar: the menu and the page end above it */
+body:has(.devbar[data-dock="bottom"]) .t-main, body:has(.devbar[data-dock="bottom"]) .t-nav > ul { padding-bottom: 3.75rem; }
+body:has(.devbar[data-dock="top"]) .t-body { padding-top: 3.25rem; }
+body:has(.devbar[data-dock="left"]) .t-body { padding-left: 3.25rem; }
+body:has(.devbar[data-dock="right"]) .t-main { padding-right: 3.5rem; }
 .devbar-page .t-main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
 .devbar-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
 .devbar-facts dd { margin: 0; overflow-wrap: anywhere; }

package/public/app.js

@@ -828,6 +828,15 @@ const pgkilnUnsaved = (() => {
     });
     drawer.addEventListener('change', () => toggle.setAttribute('aria-expanded', String(navOpen())));
   }
+  // (097) a long menu shows the current page's entry: the menu scrolls, not the page
+  {
+    const nav = document.getElementById('t-nav');
+    const current = nav?.querySelector('a[aria-current="page"]');
+    if (nav && current && nav.scrollHeight > nav.clientHeight) {
+      const top = current.getBoundingClientRect().top - nav.getBoundingClientRect().top;
+      if (top < 0 || top + current.offsetHeight > nav.clientHeight) nav.scrollTop += top - nav.clientHeight / 3;
+    }
+  }
 
   // ------------------------------------------------------------ modal dialogs
   const POSITIONS = ['center', 'left', 'right', 'top', 'bottom'];
@@ -3606,6 +3615,77 @@ function areaFilter(map, f) {
   check();
 })();
 
+// (sprint 72) Install app (PWA): the header's button appears when the browser offers the installation.
+(() => {
+  const button = document.querySelector('[data-pwa-install]');
+  if (!button) return;
+  let offer = null;
+  window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    offer = e;
+    button.hidden = false;
+  });
+  button.addEventListener('click', async () => {
+    if (!offer) return;
+    offer.prompt();
+    await offer.userChoice.catch(() => null);
+    offer = null;
+    button.hidden = true;
+  });
+  window.addEventListener('appinstalled', () => { button.hidden = true; });
+})();
+
+// (sprint 72) The developer toolbar: docked where the developer chose (bottom, top, left, right;
+// kept in this browser), shrunk to a slim tab after a few seconds without use (unless turned off),
+// back when pointed at or focused. Its panels close when another opens or on Escape.
+(() => {
+  const bar = document.querySelector('.devbar');
+  if (!bar) return;
+  const KEY = 'pgkiln.devbar';
+  let prefs = { dock: 'bottom', autohide: true };
+  try { prefs = { ...prefs, ...JSON.parse(localStorage.getItem(KEY) || '{}') }; } catch {}
+  if (!['bottom', 'top', 'left', 'right'].includes(prefs.dock)) prefs.dock = 'bottom';
+  const save = () => { try { localStorage.setItem(KEY, JSON.stringify(prefs)); } catch {} };
+  const settings = bar.querySelector('.devbar-settings');
+  settings?.closest('li')?.removeAttribute('hidden');
+  const apply = () => {
+    bar.dataset.dock = prefs.dock;
+    bar.querySelectorAll('input[name="devbar-dock"]').forEach((r) => { r.checked = r.value === prefs.dock; });
+    const auto = bar.querySelector('input[name="devbar-autohide"]');
+    if (auto) auto.checked = !!prefs.autohide;
+  };
+  apply();
+  bar.addEventListener('change', (e) => {
+    if (e.target.name === 'devbar-dock') prefs.dock = e.target.value;
+    else if (e.target.name === 'devbar-autohide') prefs.autohide = e.target.checked;
+    else return;
+    save();
+    apply();
+  });
+  const menus = [...bar.querySelectorAll('details.devbar-menu')];
+  menus.forEach((m) => m.addEventListener('toggle', () => { if (m.open) menus.forEach((o) => { if (o !== m) o.open = false; }); }));
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && menus.some((m) => m.open)) {
+      const open = menus.find((m) => m.open);
+      open.open = false;
+      open.querySelector('summary')?.focus();
+    }
+  });
+  document.addEventListener('click', (e) => { if (!bar.contains(e.target)) menus.forEach((m) => { m.open = false; }); });
+  let timer = 0;
+  const busy = () => bar.matches(':hover') || bar.contains(document.activeElement) || menus.some((m) => m.open) || !!bar.querySelector('[aria-pressed="true"]');
+  const later = () => {
+    clearTimeout(timer);
+    if (prefs.autohide) timer = setTimeout(() => { if (!busy()) bar.classList.add('is-idle'); else later(); }, 3000);
+  };
+  const wake = () => { bar.classList.remove('is-idle'); later(); };
+  bar.addEventListener('pointerenter', wake);
+  bar.addEventListener('focusin', wake);
+  bar.addEventListener('pointerleave', later);
+  bar.addEventListener('change', wake);
+  later();
+})();
+
 // (sprint 59) Quick edit from the developer toolbar (APEX: Quick Edit): while it is on, pointing at a
 // region, item or button outlines it and a click opens it in the Page Designer (in the builder's tab);
 // Esc or the button again turns it off. The toolbar is only there for developers of the application.

package/public/builder.css

@@ -768,7 +768,12 @@ button.is-busy { opacity: 0.7; cursor: progress; }
   --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-size: 15px; --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 6%);
   color-scheme: light; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
   background: var(--bg); color: var(--text); font: var(--font-size)/1.5 var(--font); }
-.tr-preview-iris { --bg: #f6f6fb; --surface-2: #f8f8fc; --surface-3: #eeeef6; --text: #1d1b2e; --muted: #5f5d75; --border: #e3e2ef;
+.tr-preview-iris { --bg: #ffffff; --surface-2: #f7f6f5; --surface-3: #efedeb; --text: #1f1c1a; --muted: #645e59; --border: #e2dfdc;
+  --accent: #2b62c4; --accent-soft: #e9f0fb; --header: #3a3632; --header-text: #f7f5f3; --radius: 4px; --shadow: none;
+  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
+.tr-preview-iris .tr-preview-header { box-shadow: inset 0 3px 0 var(--accent); }
+.tr-preview-iris .btn-hot { background: #2f2b28; border-color: #2f2b28; color: #fff; }
+.tr-preview-lavender { --bg: #f6f6fb; --surface-2: #f8f8fc; --surface-3: #eeeef6; --text: #1d1b2e; --muted: #5f5d75; --border: #e3e2ef;
   --accent: #5146d8; --accent-soft: #eeedfd; --header: #1e1a4d; --header-text: #f1f0ff; --radius: 12px;
   --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --shadow: 0 1px 2px rgb(30 27 75 / 5%), 0 2px 8px rgb(30 27 75 / 6%); }
 .tr-preview-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; background: var(--header); color: var(--header-text); font-weight: 700; }
@@ -779,7 +784,7 @@ button.is-busy { opacity: 0.7; cursor: progress; }
 .tr-preview input { background: var(--surface); color: var(--text); border-color: var(--border); }
 .tr-preview .btn { background: var(--surface); color: var(--text); border-color: var(--border); border-radius: calc(var(--radius) * 0.75); font: inherit; }
 .tr-preview .btn-hot { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
-.tr-preview-iris .btn-hot { border-radius: 999px; }
+.tr-preview-lavender .btn-hot { border-radius: 999px; }
 
 /* icon picker (forms.ts iconPicker) */
 .icon-picker > summary { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 34px; padding: 0.3rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; list-style: none; background: var(--surface); }
@@ -872,3 +877,26 @@ details.prop-group-more[open] > summary { margin-bottom: 8px; }
 .gal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
 .gal-foot form { margin: 0; }
 .ab-group select { min-width: 140px; }
+
+/* (sprint 73) the Create Application wizard on one page */
+.create-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.5rem; margin: 0.75rem 0 1rem; }
+.create-source { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
+.create-source:hover, .create-source:focus-visible { border-color: var(--accent); }
+.create-source .icon { color: var(--accent); margin-top: 0.15rem; }
+.create-source span { display: grid; gap: 0.1rem; min-width: 0; overflow-wrap: anywhere; }
+.create-app .region + form, .create-app form .region { margin-top: 1rem; }
+.aw-pages { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.4rem; }
+.aw-pages li { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 16rem); gap: 0.15rem 0.75rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
+.aw-pages li > small, .aw-pages li > .muted:last-child { grid-column: 1 / -1; }
+.aw-page-kind { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
+@media (max-width: 560px) { .aw-pages li { grid-template-columns: 1fr; } }
+.aw-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 1rem; }
+.aw-advanced > summary { cursor: pointer; list-style: none; }
+.aw-advanced > summary::-webkit-details-marker { display: none; }
+.aw-advanced .region-body { padding: 1rem; }
+/* the overlay while a long form (Create application) is being processed */
+.progress-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgb(0 0 0 / 35%); }
+.progress-box { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: 0 8px 24px rgb(0 0 0 / 25%); }
+.progress-spinner { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: progress-spin 0.8s linear infinite; }
+@keyframes progress-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .progress-spinner { animation: none; } }

package/public/builder.js

@@ -859,3 +859,34 @@ document.addEventListener('click', async (e) => {
     show(e.target.closest?.('.pe [data-prop]'));
   });
 })();
+
+// (sprint 73) a proposed value is selected on the first focus, so typing replaces it (data-select-once)
+document.querySelectorAll('input[data-select-once]').forEach((el) => {
+  el.addEventListener('focus', () => {
+    el.select();
+    // the click that focused it would put the caret back: keep the selection
+    el.addEventListener('mouseup', (e) => e.preventDefault(), { once: true });
+  }, { once: true });
+});
+
+// (sprint 73) a form that takes a while (data-progress="Creating …"): an overlay with the message while the server works
+document.addEventListener('submit', (e) => {
+  const form = e.target.closest?.('form[data-progress]');
+  if (!form || e.defaultPrevented || !form.checkValidity()) return;
+  const overlay = document.createElement('div');
+  overlay.className = 'progress-overlay';
+  overlay.setAttribute('role', 'status');
+  overlay.setAttribute('aria-live', 'polite');
+  const box = document.createElement('div');
+  box.className = 'progress-box';
+  const spin = document.createElement('span');
+  spin.className = 'progress-spinner';
+  spin.setAttribute('aria-hidden', 'true');
+  const text = document.createElement('span');
+  text.textContent = form.dataset.progress;
+  box.append(spin, text);
+  overlay.append(box);
+  document.body.append(overlay);
+  // back from the browser's cache (the back button): no overlay
+  window.addEventListener('pageshow', (ev) => { if (ev.persisted) overlay.remove(); }, { once: true });
+});

package/src/builder/appfromfile.ts

@@ -21,7 +21,7 @@ import type { Session } from '../session.ts';
 import { MAX_MB, preview, resultHtml } from './dataload.ts';
 import { buildAppFromSheets, MAX_SHEETS, parseBook, sheetsForm, type BuiltBook, type NamedSheet } from './appsheets.ts';
 import { appWizardRoutes, PASTED } from './appwizard.ts';
-import { checkNewApp, createApp, createAppError, reservedSchema, type CheckedApp } from './newapp.ts';
+import { finishGeneratedApp, checkNewApp, createApp, createAppError, reservedSchema, type CheckedApp } from './newapp.ts';
 import { currentWorkspace } from './workspaces.ts';
 import { BASE, csrf, developer, input, region, select, send, shell, type Body, type Req } from './ui.ts';
 
@@ -149,9 +149,9 @@ export async function buildAppFromFile(checked: CheckedApp, sheet: Sheet, b: Bod
     const generate = async (kind: string, page: number, options: Record<string, unknown>) => {
       await c.query('select meta.generate_page($1, $2, $3::regclass, $4, $5::jsonb)', [checked.alias, kind, T, page, JSON.stringify(options)]);
     };
-    const label = (await c.query(`select meta.wizard_label($1) as l`, [tableName])).rows[0].l as string;
-    await generate('report_form', 2, { form_page: 3, label });
-    pages.push({ page: 2, label }, { page: 3, label: `${label} form` });
+    const { label, singular } = (await c.query('select meta.wizard_table_label($1::regclass) as label, meta.wizard_table_label($1::regclass, false) as singular', [T])).rows[0] as { label: string; singular: string };
+    await generate('report_form', 2, { form_page: 3 });
+    pages.push({ page: 2, label }, { page: 3, label: `${singular} form` });
     let next = 4;
     // the statistics tell which columns group the rows: a few values, repeated (not a name per row)
     const rows = result.inserted;
@@ -178,6 +178,7 @@ export async function buildAppFromFile(checked: CheckedApp, sheet: Sheet, b: Bod
         pages.push({ page: next++, label: `Faceted search (${facets.join(', ')})` });
       }
     }
+    await finishGeneratedApp(c, app.id, { description: checked.description });
     return { app: { id: app.id, alias: checked.alias, existingAccount: app.existingAccount }, table: T, result, pages, notes };
   });
 }

package/src/builder/appsheets.ts

@@ -19,7 +19,7 @@ import {
   type Sheet,
 } from '../dataload.ts';
 import { preview } from './dataload.ts';
-import { createApp, createAppError, type CheckedApp } from './newapp.ts';
+import { finishGeneratedApp, createApp, createAppError, type CheckedApp } from './newapp.ts';
 import { groupColumn } from './appfromfile.ts';
 import { region, type Body } from './ui.ts';
 
@@ -278,14 +278,21 @@ interface Catalog {
  * A dashboard page: a chart per table (at most six) with the number of rows per
  * parent row (the first foreign key), or per value of a text, yes/no or date
  * column whose values repeat (from the statistics). Null when no table has one.
+ * (097) Tables with row level security are left out (the application's role may
+ * see none of their rows: an empty chart); the charts are titled "Employees by
+ * Manager", and the Dashboard comes right after Home in the navigation menu.
  */
-export async function addDashboard(c: Client, alias: string, tables: string[], page: number): Promise<{ page: number; label: string } | null> {
+export async function addDashboard(c: Client, alias: string, tables: string[], page: number, skipped: string[] = []): Promise<{ page: number; label: string } | null> {
   const picks: { table: string; group: string }[] = [];
   for (const t of tables) {
     if (picks.length >= MAX_CHARTS) break;
+    const rel = (await c.query('select relrowsecurity as rls, greatest(reltuples, 0) as n from pg_class where oid = $1::regclass', [t])).rows[0];
+    if (rel.rls) {
+      skipped.push(t);
+      continue;
+    }
     const catalog = (await c.query<Catalog>('select column_name, kind, is_pk, distinct_values, fk_table::text from meta.wizard_catalog($1::regclass)', [t])).rows;
-    const rows = Number((await c.query('select greatest(reltuples, 0) as n from pg_class where oid = $1::regclass', [t])).rows[0].n);
-    const group = catalog.find((x) => x.fk_table && !x.is_pk)?.column_name ?? groupColumn(catalog, rows);
+    const group = catalog.find((x) => x.fk_table && !x.is_pk)?.column_name ?? groupColumn(catalog, Number(rel.n));
     if (group) picks.push({ table: t, group });
   }
   if (!picks.length) return null;
@@ -295,7 +302,7 @@ export async function addDashboard(c: Client, alias: string, tables: string[], p
       JSON.stringify({ label: 'Dashboard', icon: 'chart', nav, label_column: group, function: 'count', value_column: null }),
     ]);
   const title = async (table: string, group: string) =>
-    (await c.query(`select meta.wizard_label(relname) || ' per ' || lower(meta.wizard_label(regexp_replace($2, '_(id|no|code)$', ''))) as t from pg_class where oid = $1::regclass`, [table, group])).rows[0].t as string;
+    (await c.query(`select meta.wizard_table_label($1::regclass) || ' by ' || meta.wizard_column_label($1::regclass, $2) as t`, [table, group])).rows[0].t as string;
   const dash = (await generate(picks[0].table, picks[0].group, page, true)).rows[0].id;
   await c.query('update meta.region set title = $2 where page_id = $1', [dash, await title(picks[0].table, picks[0].group)]);
   for (const [n, p] of picks.slice(1).entries()) {
@@ -306,7 +313,13 @@ export async function addDashboard(c: Client, alias: string, tables: string[], p
     await c.query('delete from meta.page where id = $1', [tmp]);
   }
   if (picks.length > 1) await c.query('update meta.region set columns = 6 where page_id = $1', [dash]);
-  return { page, label: `Dashboard (${picks.map((p) => `${p.table.replace(/^.*\./, '')} per ${p.group}`).join(', ')})` };
+  // right after Home (the first top-level entry)
+  await c.query(
+    `update meta.nav_entry e set seq = coalesce((select min(seq) from meta.nav_entry h where h.app_id = e.app_id and h.parent_id is null and h.target_page = a.home_page), 0) + 1
+       from meta.app a where a.alias = $1 and e.app_id = a.id and e.parent_id is null and e.target_page = $2`,
+    [alias, page],
+  );
+  return { page, label: `Dashboard (${(await Promise.all(picks.map((p) => title(p.table, p.group)))).join(', ')})` };
 }
 
 /** Create the application, the tables, the rows, the foreign keys and the pages, in one transaction. */
@@ -371,9 +384,9 @@ export async function buildAppFromSheets(checked: CheckedApp, sheets: NamedSheet
     let next = 2;
     for (const p of plans) {
       const T = qualified.get(p.k)!;
-      const label = (await c.query('select meta.wizard_label($1) as l', [p.table])).rows[0].l as string;
-      await c.query('select meta.generate_page($1, $2, $3::regclass, $4, $5::jsonb)', [checked.alias, 'report_form', T, next, JSON.stringify({ form_page: next + 1, label })]);
-      pages.push({ page: next, label }, { page: next + 1, label: `${label} form` });
+      const { label, singular } = (await c.query('select meta.wizard_table_label($1::regclass) as label, meta.wizard_table_label($1::regclass, false) as singular', [T])).rows[0] as { label: string; singular: string };
+      await c.query('select meta.generate_page($1, $2, $3::regclass, $4, $5::jsonb)', [checked.alias, 'report_form', T, next, JSON.stringify({ form_page: next + 1 })]);
+      pages.push({ page: next, label }, { page: next + 1, label: `${singular} form` });
       next += 2;
     }
     if (b.chart === 'true') {
@@ -381,6 +394,7 @@ export async function buildAppFromSheets(checked: CheckedApp, sheets: NamedSheet
       if (dash) pages.push(dash);
       else notes.push('No dashboard: no table has a foreign key or a text, yes/no or date column with a few values that repeat, to count the rows by.');
     }
+    await finishGeneratedApp(c, app.id, { description: checked.description });
     return { app: { id: app.id, alias: checked.alias, existingAccount: app.existingAccount }, tables, foreignKeys, pages, notes };
   });
 }