pgkiln 0.41.0 → 0.43.0

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.
@@ -3645,3 +3725,186 @@ function areaFilter(map, f) {
   }, true);
   document.addEventListener('keydown', (e) => { if (on && e.key === 'Escape') set(false); });
 })();
+
+// (sprint 76) the page's texts for the report menus below (render.ts CLIENT_TEXTS)
+const reportTexts = (() => {
+  try {
+    return JSON.parse(document.getElementById('pgkiln-meta')?.textContent || '{}').texts || {};
+  } catch {
+    return {};
+  }
+})();
+
+// (sprint 76) The interactive report's Actions menu: an entry opens its form in a dialog (APEX: the
+// Actions dialogs); the form fields stay the same elements, moved into the dialog and back on close.
+(() => {
+  const close = (details) => { if (details) details.open = false; };
+  document.addEventListener('toggle', (e) => {
+    const item = e.target;
+    if (!(item instanceof HTMLDetailsElement) || !item.matches('.ir-item[data-ir-dialog]') || !item.open) return;
+    const body = item.querySelector(':scope > .ir-body');
+    const menu = item.closest('details.actions-menu');
+    if (!body || typeof HTMLDialogElement !== 'function') return;
+    item.open = false;
+    menu?.querySelectorAll('details.ir-sub[open]').forEach(close);
+    close(menu);
+    const dialog = document.createElement('dialog');
+    dialog.className = 'ir-dialog';
+    const title = document.createElement('h2');
+    title.textContent = item.querySelector('summary span')?.textContent ?? '';
+    const x = document.createElement('button');
+    x.type = 'button';
+    x.className = 'icon-button ir-dialog-close';
+    x.setAttribute('aria-label', reportTexts['common.dismiss'] || 'Close');
+    x.textContent = '×';
+    x.addEventListener('click', () => dialog.close());
+    const head = document.createElement('div');
+    head.className = 'ir-dialog-head';
+    head.append(title, x);
+    dialog.append(head, body);
+    document.body.append(dialog);
+    dialog.addEventListener('close', () => {
+      item.append(body);
+      dialog.remove();
+      menu?.querySelector('summary')?.focus();
+    });
+    dialog.showModal();
+    body.querySelector('select, input, a, button')?.focus();
+  }, true);
+  // one submenu open at a time
+  document.addEventListener('toggle', (e) => {
+    const sub = e.target;
+    if (!(sub instanceof HTMLDetailsElement) || !sub.matches('.ir-sub') || !sub.open) return;
+    sub.parentElement?.parentElement?.querySelectorAll(':scope > li > details.ir-sub[open]').forEach((d) => { if (d !== sub) d.open = false; });
+  }, true);
+})();
+
+// (sprint 76) A report column heading opens a menu: sort ascending or descending, hide, control break, and
+// the column's values (with counts, a search box) to filter by; the sort arrow still sorts at once.
+(() => {
+  let open = null;
+  const shut = () => { open?.remove(); open = null; };
+  document.addEventListener('click', (e) => {
+    const a = e.target.closest?.('th[data-col] > a');
+    if (!a) {
+      if (open && !open.contains(e.target)) shut();
+      return;
+    }
+    const th = a.parentElement;
+    // the sort indicator keeps sorting
+    if (e.target.closest('.sort-ind') && th.getAttribute('aria-sort') !== 'none') return;
+    e.preventDefault();
+    shut();
+    const menu = document.createElement('div');
+    menu.className = 'th-menu menu-panel';
+    menu.setAttribute('role', 'dialog');
+    menu.setAttribute('aria-label', th.dataset.label);
+    const t = (k, d) => reportTexts[k] || d;
+    const link = (href, text) => { const l = document.createElement('a'); l.href = href; l.textContent = text; return l; };
+    const actions = document.createElement('div');
+    actions.className = 'th-menu-actions';
+    actions.append(link(th.dataset.asc, `▲ ${t('report.sort_asc', 'Sort ascending')}`), link(th.dataset.desc, `▼ ${t('report.sort_desc', 'Sort descending')}`),
+      link(th.dataset.hide, t('report.hide', 'Hide column')), link(th.dataset.break, t('report.break', 'Control break')));
+    const search = document.createElement('input');
+    search.type = 'search';
+    search.placeholder = t('report.filter_values', 'Filter the values');
+    search.setAttribute('aria-label', search.placeholder);
+    const list = document.createElement('ul');
+    list.className = 'th-menu-values';
+    menu.append(actions, search, list);
+    document.body.append(menu);
+    const box = th.getBoundingClientRect();
+    menu.style.setProperty('position', 'absolute');
+    menu.style.setProperty('top', `${window.scrollY + box.bottom + 4}px`);
+    menu.style.setProperty('left', `${Math.max(8, Math.min(window.scrollX + box.left, window.scrollX + document.documentElement.clientWidth - 288))}px`);
+    open = menu;
+    const here = new URL(location.href);
+    const url = new URL(th.dataset.values, location.href);
+    here.searchParams.forEach((v, k) => url.searchParams.append(k, v));
+    url.searchParams.set('col', th.dataset.col);
+    fetch(url, { headers: { accept: 'application/json' }, credentials: 'same-origin' })
+      .then((r) => (r.ok ? r.json() : { values: [] }))
+      .then(({ values }) => {
+        if (!values?.length) {
+          const li = document.createElement('li');
+          li.className = 'muted';
+          li.textContent = t('report.no_values', 'No values');
+          list.append(li);
+          return;
+        }
+        for (const { value, count } of values) {
+          if (value === null) continue;
+          const target = new URL(location.href);
+          for (const k of [...target.searchParams.keys()]) if (/^r\d+_(p|k)$/.test(k)) target.searchParams.delete(k);
+          target.searchParams.append(th.dataset.filter, `${th.dataset.col}|eq|${value}`);
+          const li = document.createElement('li');
+          const l = link(target.toString(), value);
+          const n = document.createElement('span');
+          n.className = 'muted';
+          n.textContent = String(count);
+          l.append(n);
+          li.append(l);
+          list.append(li);
+        }
+      })
+      .catch(() => {});
+    search.addEventListener('input', () => {
+      const q = search.value.trim().toLowerCase();
+      list.querySelectorAll('li').forEach((li) => { li.hidden = !!q && !li.textContent.toLowerCase().includes(q); });
+    });
+    actions.querySelector('a')?.focus();
+    menu.addEventListener('keydown', (k) => { if (k.key === 'Escape') { shut(); a.focus(); } });
+  });
+  window.addEventListener('resize', shut);
+})();
+
+// (sprint 76) the report pager's rows per page: sent on change
+document.addEventListener('change', (e) => {
+  if (e.target.matches?.('select[data-go]')) e.target.form?.submit();
+});
+
+// (sprint 76) A date item in the application's date format: the calendar button opens the browser's date
+// picker on a hidden date field; the chosen date is written into the text field in the mask.
+(() => {
+  const pad = (n) => String(n).padStart(2, '0');
+  const TOKEN = /"[^"]*"|YYYY|YY|MONTH|MON|MM|DD/gi;
+  const format = (iso, mask, months) => {
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+    if (!m) return '';
+    const [y, mo, d] = m.slice(1).map(Number);
+    return mask.replace(TOKEN, (tok) => {
+      if (tok.startsWith('"')) return tok.slice(1, -1);
+      const up = tok.toUpperCase();
+      const cased = (s) => (tok === up ? s.toUpperCase() : tok[1] && tok[1] !== up[1] ? s[0].toUpperCase() + s.slice(1) : s);
+      if (up === 'YYYY') return String(y);
+      if (up === 'YY') return pad(y % 100);
+      if (up === 'MM') return pad(mo);
+      if (up === 'DD') return pad(d);
+      if (up === 'MONTH') return cased(months.long[mo - 1]);
+      if (up === 'MON') return cased(months.short[mo - 1]);
+      return tok;
+    });
+  };
+  document.addEventListener('click', (e) => {
+    const btn = e.target.closest?.('[data-date-pick]');
+    if (!btn) return;
+    const native = document.querySelector(`input[data-date-for="${CSS.escape(btn.dataset.datePick)}"]`);
+    if (!native) return;
+    try {
+      native.showPicker();
+    } catch {
+      native.focus();
+    }
+  });
+  document.addEventListener('change', (e) => {
+    const native = e.target;
+    if (!native.matches?.('input[data-date-for]')) return;
+    const text = document.getElementById(native.dataset.dateFor);
+    if (!text) return;
+    let months = { long: [], short: [] };
+    try { months = JSON.parse(text.dataset.months || '{}'); } catch {}
+    text.value = format(native.value, text.dataset.dateMask || 'YYYY-MM-DD', months);
+    text.dispatchEvent(new Event('change', { bubbles: true }));
+    text.focus();
+  });
+})();

package/public/builder.css

@@ -44,6 +44,7 @@
     --bg: #1d1c1b; --surface: #2a2927; --surface-2: #31302d; --surface-3: #3b3936; --text: #e9e6e1; --muted: #aaa59d;
     --border: #44423e; --accent: #62b2ea; --accent-text: #0b1824; --accent-soft: #233a4c; --gold: #e3b75e;
     --canvas: #211f1e; --block: #33322f; --block-head: #3d3b38; --code-bg: #242321; --warn: #e0a740;
+    --pd-c-region: #7fb4ea; --pd-c-item: #7ccf8c; --pd-c-button: #f0a35e; --pd-c-da: #c49cf0; --pd-c-process: #ee8fbf;
     color-scheme: dark;
   }
 }
@@ -51,6 +52,7 @@
   --bg: #1d1c1b; --surface: #2a2927; --surface-2: #31302d; --surface-3: #3b3936; --text: #e9e6e1; --muted: #aaa59d;
   --border: #44423e; --accent: #62b2ea; --accent-text: #0b1824; --accent-soft: #233a4c; --gold: #e3b75e;
   --canvas: #211f1e; --block: #33322f; --block-head: #3d3b38; --code-bg: #242321; --warn: #e0a740;
+  --pd-c-region: #7fb4ea; --pd-c-item: #7ccf8c; --pd-c-button: #f0a35e; --pd-c-da: #c49cf0; --pd-c-process: #ee8fbf;
   color-scheme: dark;
 }
 
@@ -768,7 +770,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 +786,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 +879,136 @@ 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; } }
+
+/* (sprint 74) the default-password warning: dismissible; a dot on the avatar */
+.alert-dismissible { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
+.alert-dismissible form { margin: 0; }
+.rail-avatar.has-dot { position: relative; }
+.rail-avatar.has-dot::after { content: ""; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger, #c23028); box-shadow: 0 0 0 2px var(--rail-bg, #1b2330); }
+.weak-note { color: var(--danger, #c23028) !important; }
+
+/* (sprint 74) Shared Components: groups of component types with counts; a list per type */
+.sc-head, .sc-list-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
+.sc-list-head h1 { margin: 0; }
+.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; align-items: start; }
+.sc-group .region-header h2 { display: flex; align-items: center; gap: 0.5rem; }
+.sc-links { list-style: none; margin: 0; padding: 0.4rem 0; }
+.sc-links li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 1rem; }
+.sc-links a { overflow-wrap: anywhere; min-width: 0; }
+.sc-count { font-size: 0.78rem; font-weight: 600; color: var(--muted); background: var(--surface-3); border-radius: 99px; padding: 0.05rem 0.5rem; }
+
+/* (sprint 74) application Settings in tabs */
+.settings-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--border); margin: 0 0 1rem; }
+.settings-tabs a { padding: 0.5rem 0.85rem; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
+.settings-tabs a:hover { color: var(--text); }
+.settings-tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
+.settings-body { display: grid; gap: 1rem; max-width: 64rem; }
+.settings-form { display: grid; gap: 1rem; }
+
+/* (sprint 74) the application home: search, view and Create page above the pages; Tasks on the right */
+.app-home { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1rem; align-items: start; }
+@media (max-width: 1100px) { .app-home { grid-template-columns: 1fr; } }
+.app-home-main { display: grid; gap: 1rem; min-width: 0; }
+.pages-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
+.pages-bar .search { flex: 1 1 16rem; margin: 0; }
+.pages-bar .search input { flex: 1; min-width: 0; }
+.view-toggle a { display: inline-flex; align-items: center; gap: 0.3rem; }
+.page-icons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.6rem; }
+.page-icon { display: grid; gap: 0.15rem; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
+.page-icon:hover, .page-icon:focus-visible { border-color: var(--accent); }
+.page-icon-no { font-size: 1.3rem; font-weight: 700; color: var(--accent); }
+.app-tasks .sc-links a { display: inline-flex; align-items: center; gap: 0.45rem; }
+
+/* (sprint 75) SQL Workshop: main tools as tabs and a More menu (no horizontal scrolling); the Object Browser */
+.sw-tabs { overflow: visible; flex-wrap: wrap; }
+.sw-more { position: relative; }
+.sw-more > summary { list-style: none; cursor: pointer; }
+.sw-more > summary::-webkit-details-marker { display: none; }
+.sw-more .menu-panel a[aria-current] { font-weight: 600; }
+.ob-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
+.ob-schema { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.ob-schema .label { margin: 0; }
+.ob-create > summary { list-style: none; }
+.ob-create > summary::-webkit-details-marker { display: none; }
+.ob-filter { padding: 0.5rem; }
+.ob-filter input { width: 100%; }
+.ob-folder > summary { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.6rem; cursor: pointer; font-weight: 600; list-style: none; }
+.ob-folder > summary::-webkit-details-marker { display: none; }
+.ob-folder > summary .kind { margin-left: auto; }
+.ob-folder .tree { padding-left: 0.75rem; }
+.ob-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; }
+.ob-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; overflow-wrap: anywhere; }
+.ob-actions { display: grid; gap: 0.6rem; margin-top: 1rem; }
+.ob-action { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.ob-action input:not([type=checkbox]) { width: 10rem; }
+
+/* (sprint 77) the page template's display positions and a region's button positions on the layout */
+.pd-zone { display: grid; gap: 0.3em; margin-bottom: 10px; }
+.pd-zone-label { color: var(--muted); font-size: 0.74em; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
+.pd-zone-label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
+.pd-zone.is-empty .pd-grid-end { padding: 0.3em; }
+.pd-columns { display: grid; gap: 10px; align-items: start; }
+.pd-columns > .pd-zone { margin-bottom: 0; min-width: 0; }
+.pd-columns:has(> .pd-zone-left) { grid-template-columns: minmax(9rem, 1fr) 3fr; }
+.pd-columns:has(> .pd-zone-right) { grid-template-columns: 3fr minmax(9rem, 1fr); }
+.pd-columns:has(> .pd-zone-left):has(> .pd-zone-right) { grid-template-columns: minmax(9rem, 1fr) 3fr minmax(9rem, 1fr); }
+.pd-columns + .pd-zone { margin-top: 10px; }
+.pd-zone-left .pd-grid > .pd-region, .pd-zone-right .pd-grid > .pd-region { grid-column: 1 / -1; }
+.pd-slots { display: flex; flex-wrap: wrap; gap: 0.3em; }
+.pd-slots-bottom > [data-slot="next"] { margin-left: auto; }
+.pd-slot-spare { display: none; min-height: 1.6em; }
+.pd-dragging-button .pd-slot-spare { display: flex; }
+.pd-canvas:not(.pd-dragging-button) .pd-slots:not(:has(> .pd-slot:not(.pd-slot-spare))) { display: none; }
+@media (max-width: 640px) { .pd-canvas .pd-columns:has(> .pd-zone) { grid-template-columns: minmax(0, 1fr); } }
+
+/* (sprint 77) the rendering tree's context menu, the Copy to other page dialog, component colours */
+.pd-menu { position: fixed; z-index: 60; min-width: 13rem; padding: 4px; background: var(--surface, #fff); color: var(--text); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 6px 20px rgb(0 0 0 / 0.18); font-size: 13px; }
+.pd-menu [role=menuitem] { display: block; width: 100%; padding: 0.35rem 0.6rem; border: 0; border-radius: 3px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.pd-menu [role=menuitem]:is(:hover, :focus-visible) { background: var(--sel-bg); color: var(--sel-text); outline: none; }
+.pd-menu [role=menuitem].is-danger { color: var(--danger); }
+.pd-menu [role=separator] { height: 1px; margin: 4px 2px; background: var(--border); }
+.pd-dialog { width: min(28rem, calc(100vw - 32px)); padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface, #fff); color: var(--text); }
+.pd-dialog::backdrop { background: rgb(0 0 0 / 0.35); }
+.pd-dialog h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
+.pd-dialog-buttons { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
+.pd-node[data-kind="region"] .icon { color: var(--pd-c-region, #2f6fb3); }
+.pd-node[data-kind="item"] .icon { color: var(--pd-c-item, #2e8540); }
+.pd-node[data-kind="button"] .icon { color: var(--pd-c-button, #b4570f); }
+.pd-node[data-kind="dynamic_action"] .icon { color: var(--pd-c-da, #8a4fbf); }
+.pd-node[data-kind="process"] .icon, .pd-node[data-kind="computation"] .icon { color: var(--pd-c-process, #a23b72); }
+
+/* (sprint 77) the property editor: Common / All, Go to group, the Template Options button; the page number */
+.pe-more { display: contents; }
+.pe-show-common [data-more] { display: none; }
+.pe-show-common fieldset.pe-group-more { display: none; }
+.pe-view { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 8px 6px; }
+.pe-view .segmented { margin-top: 0; }
+.pe-view .segmented button { font-size: 12px; padding: 2px 8px; min-height: 0; }
+.pe-goto { font-size: 12px; max-width: 12rem; }
+.pe-options-open .btn { justify-self: start; }
+.pd-goto-no input { width: 5.5em; font-variant-numeric: tabular-nums; }
+/* on narrower screens the previous / next arrows and the page list do it */
+@media (max-width: 1279px) { .pd-goto-no { display: none; } }