pgkiln 0.42.0 → 0.43.0

package/public/app.js

@@ -3725,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;
 }
 
@@ -900,3 +902,113 @@ details.prop-group-more[open] > summary { margin-bottom: 8px; }
 .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; } }

package/public/builder.js

@@ -209,6 +209,132 @@
     });
   }
 
+  // ---------------------------------------------------------------- the rendering tree's context menu (sprint 77)
+  // Right-click (or Shift+F10 / the menu key) on a region, item or button: create in or below it, duplicate,
+  // copy to another page, expand or collapse everything below, delete. Every entry is a link or a form post
+  // the server also answers without JavaScript.
+  function setupTreeMenu(tree) {
+    const pid = tree.dataset.pageId;
+    const base = `/builder/pages/${pid}`;
+    const token = document.querySelector('input[name="__csrf"]')?.value ?? '';
+    let menu = null;
+    let opener = null;
+    const close = (refocus = true) => {
+      menu?.remove();
+      menu = null;
+      if (refocus) opener?.focus();
+    };
+    const submit = (action, fields, confirmText) => {
+      if (confirmText && !window.confirm(confirmText)) return;
+      const f = document.createElement('form');
+      f.method = 'post';
+      f.action = action;
+      for (const [k, v] of Object.entries({ __csrf: token, ...fields })) {
+        const i = document.createElement('input');
+        i.type = 'hidden';
+        i.name = k;
+        i.value = v;
+        f.appendChild(i);
+      }
+      document.body.appendChild(f);
+      f.submit();
+    };
+    const setAll = (node, open) => {
+      const li = node.closest('li');
+      for (const sub of [li, ...li.querySelectorAll('li')]) {
+        const n = sub.querySelector(':scope > .pd-node.has-kids');
+        if (!n) continue;
+        sub.toggleAttribute('data-collapsed', !open);
+        n.setAttribute('aria-expanded', String(open));
+      }
+    };
+    const entries = (node) => {
+      const kind = node.dataset.kind;
+      const id = node.dataset.id;
+      const label = node.querySelector('.pd-label')?.textContent ?? '';
+      const go = (q) => () => window.location.assign(`${base}?${q}`);
+      const copyDialog = () => {
+        const d = document.getElementById('pd-copy-dialog');
+        if (!d) return;
+        d.querySelector('input[name="kind"]').value = kind;
+        d.querySelector('input[name="id"]').value = id;
+        d.querySelector('[data-copy-what]').textContent = `${kind[0].toUpperCase()}${kind.slice(1)}: ${label}`;
+        d.showModal();
+      };
+      const list = [];
+      if (kind === 'region') {
+        list.push(['Create page item', go(`new=item&region=${id}`)], ['Create button', go(`new=button&region=${id}`)],
+          ['Create dynamic action', go('new=dynamic_action')],
+          ['Create region below', () => submit(`${base}/layout/create`, { kind: 'region', type: 'static', position: node.dataset.position ?? '', before: node.dataset.next ?? '' })], null);
+      }
+      list.push(['Duplicate', () => submit(`${base}/layout/duplicate`, { kind, id })], ['Copy to other page…', copyDialog]);
+      if (kind !== 'region') list.push(['Create dynamic action', go('new=dynamic_action')]);
+      if (node.classList.contains('has-kids')) list.push(null, ['Expand all below', () => setAll(node, true)], ['Collapse all below', () => setAll(node, false)]);
+      list.push(null, ['Delete', () => submit(`${base}/c/${kind}/${id}/delete`, {}, `Delete ${kind} ${label}?`), 'danger']);
+      return list;
+    };
+    const open = (node, x, y) => {
+      close(false);
+      opener = node;
+      menu = document.createElement('div');
+      menu.className = 'pd-menu';
+      menu.setAttribute('role', 'menu');
+      menu.setAttribute('aria-label', `Actions: ${node.querySelector('.pd-label')?.textContent ?? ''}`);
+      for (const e of entries(node)) {
+        if (!e) {
+          const sep = document.createElement('div');
+          sep.setAttribute('role', 'separator');
+          menu.appendChild(sep);
+          continue;
+        }
+        const b = document.createElement('button');
+        b.type = 'button';
+        b.setAttribute('role', 'menuitem');
+        b.tabIndex = -1;
+        b.textContent = e[0];
+        if (e[2]) b.classList.add(`is-${e[2]}`);
+        b.addEventListener('click', () => {
+          close(e[0] !== 'Copy to other page…');
+          e[1]();
+        });
+        menu.appendChild(b);
+      }
+      document.body.appendChild(menu);
+      const r = menu.getBoundingClientRect();
+      menu.style.left = `${Math.max(4, Math.min(x, window.innerWidth - r.width - 4))}px`;
+      menu.style.top = `${Math.max(4, Math.min(y, window.innerHeight - r.height - 4))}px`;
+      menu.querySelector('[role=menuitem]')?.focus();
+      menu.addEventListener('keydown', (e) => {
+        const items = [...menu.querySelectorAll('[role=menuitem]')];
+        const i = items.indexOf(document.activeElement);
+        if (e.key === 'ArrowDown') items[(i + 1) % items.length].focus();
+        else if (e.key === 'ArrowUp') items[(i - 1 + items.length) % items.length].focus();
+        else if (e.key === 'Home') items[0].focus();
+        else if (e.key === 'End') items[items.length - 1].focus();
+        else if (e.key === 'Escape' || e.key === 'Tab') close();
+        else return;
+        e.preventDefault();
+      });
+    };
+    tree.addEventListener('contextmenu', (e) => {
+      const node = e.target.closest('.pd-node[data-kind][data-id]');
+      if (!node || !['region', 'item', 'button'].includes(node.dataset.kind)) return;
+      e.preventDefault();
+      const r = node.getBoundingClientRect();
+      // the keyboard's menu key has no pointer position
+      open(node, e.clientX || r.left + 24, e.clientY || r.bottom);
+    });
+    document.addEventListener('pointerdown', (e) => {
+      if (menu && !menu.contains(e.target)) close(false);
+    });
+    window.addEventListener('blur', () => close(false));
+    const dialog = document.getElementById('pd-copy-dialog');
+    dialog?.querySelector('[data-dialog-close]')?.addEventListener('click', () => {
+      dialog.close();
+      opener?.focus();
+    });
+  }
+
   // ---------------------------------------------------------------- property editor
   function setupProperties() {
     const pe = document.querySelector('.pe');
@@ -269,6 +395,102 @@
         }
       });
     }
+    // (sprint 77, APEX: Show Common / Show All, Go to Group) next to the filter
+    if (row && groups.length) {
+      const bar = document.createElement('div');
+      bar.className = 'pe-view';
+      if (pe.querySelector('[data-more]')) {
+        const seg = document.createElement('div');
+        seg.className = 'segmented pe-common';
+        seg.setAttribute('role', 'group');
+        seg.setAttribute('aria-label', 'Properties shown');
+        const showCommon = (on, remember) => {
+          pe.classList.toggle('pe-show-common', on);
+          for (const b of seg.querySelectorAll('button')) b.setAttribute('aria-pressed', String((b.value === 'common') === on));
+          for (const fs of groups) fs.classList.toggle('pe-group-more', on && !fs.querySelector('.field:not([data-more] .field), .options-field:not([data-more] .options-field)'));
+          if (remember) store.set('pe.common', on ? '1' : null);
+        };
+        for (const [v, label] of [['common', 'Common'], ['all', 'All']]) {
+          const b = document.createElement('button');
+          b.type = 'button';
+          b.value = v;
+          b.textContent = label;
+          b.addEventListener('click', () => showCommon(v === 'common', true));
+          seg.appendChild(b);
+        }
+        bar.appendChild(seg);
+        showCommon(store.get('pe.common') === '1', false);
+      }
+      const named = groups.filter((fs) => fs.querySelector(':scope > legend'));
+      if (named.length > 1) {
+        const sel = document.createElement('select');
+        sel.className = 'pe-goto';
+        sel.setAttribute('aria-label', 'Go to group');
+        sel.innerHTML = '<option value="">Go to group</option>';
+        named.forEach((fs, i) => {
+          const o = document.createElement('option');
+          o.value = String(i);
+          o.textContent = fs.querySelector(':scope > legend').textContent.trim();
+          sel.appendChild(o);
+        });
+        sel.addEventListener('change', () => {
+          const fs = named[Number(sel.value)];
+          sel.value = '';
+          if (!fs) return;
+          // a group on another tab (a region's Attributes): open that tab first (tabify names its tab <panel id>-tab)
+          const panel = fs.closest('[data-tab]');
+          if (panel?.hidden) document.getElementById(`${panel.id}-tab`)?.click();
+          const t = fs.querySelector('.pe-toggle');
+          if (t?.getAttribute('aria-expanded') === 'false') t.click();
+          fs.scrollIntoView({ block: 'start', behavior: 'smooth' });
+          t?.focus({ preventScroll: true });
+        });
+        bar.appendChild(sel);
+      }
+      if (bar.children.length) row.after(bar);
+    }
+    // (sprint 77, APEX: the Template Options dialog) the checkboxes in a dialog, opened from a button that counts them.
+    // The dialog is the body's (not inside the form or the property editor's wrappers, which Common hides); the
+    // checkboxes belong to their form through the form attribute, so they are saved with it.
+    let optionDialogs = 0;
+    for (const fs of pe.querySelectorAll('fieldset.options-field')) {
+      const form = fs.closest('form');
+      if (!form) continue;
+      if (!form.id) form.id = `pe-form-${++optionDialogs}`;
+      const boxes = [...fs.querySelectorAll('input[type=checkbox]')];
+      for (const x of boxes) x.setAttribute('form', form.id);
+      const legend = fs.querySelector('legend')?.textContent.trim() ?? 'Options';
+      const holder = document.createElement('div');
+      holder.className = 'field pe-options-open';
+      const b = document.createElement('button');
+      b.type = 'button';
+      b.className = 'btn btn-sm';
+      const count = () => {
+        const n = boxes.filter((x) => x.checked).length;
+        b.textContent = `${legend}${n ? ` (${n})` : ''}…`;
+      };
+      const d = document.createElement('dialog');
+      d.className = 'pd-dialog';
+      d.setAttribute('aria-label', legend);
+      fs.replaceWith(holder);
+      holder.appendChild(b);
+      d.appendChild(fs);
+      const ok = document.createElement('div');
+      ok.className = 'pd-dialog-buttons';
+      ok.innerHTML = '<button type="button" class="btn btn-primary">OK</button>';
+      d.appendChild(ok);
+      document.body.appendChild(d);
+      // the count follows every change (Escape closes the dialog without OK); a change is an unsaved change
+      for (const x of boxes)
+        x.addEventListener('change', () => {
+          count();
+          document.querySelector(`.tb-save[form="${form.id}"]`)?.classList.add('is-dirty');
+        });
+      ok.querySelector('button').addEventListener('click', () => d.close());
+      d.addEventListener('close', () => b.focus());
+      b.addEventListener('click', () => d.showModal());
+      count();
+    }
     if (head) {
       const h = () => pe.style.setProperty('--pe-head-h', `${head.offsetHeight}px`);
       h();
@@ -360,9 +582,12 @@
       e.dataTransfer.effectAllowed = drag.isNew ? 'copy' : 'move';
       e.dataTransfer.setData('text/plain', drag.isNew ? `new ${drag.kind} ${drag.type}` : `${drag.kind} ${drag.id}`);
       (drag.kind === 'region' && !drag.isNew ? src.closest('.pd-region') : src).classList.add('is-dragging');
+      // (sprint 77) empty display positions and button positions show while something can drop there
+      canvas.classList.add(`pd-dragging-${drag.kind}`);
     });
     document.addEventListener('dragend', () => {
       for (const el of document.querySelectorAll('.is-dragging')) el.classList.remove('is-dragging');
+      canvas.classList.remove('pd-dragging-region', 'pd-dragging-item', 'pd-dragging-button');
       clear();
       drag = null;
     });
@@ -411,8 +636,10 @@
       clear();
       const before = t.before ? t.before.dataset.id : '';
       const region = d.kind === 'region' ? '' : t.zone.dataset.region;
-      if (d.isNew) post('create', { kind: d.kind, type: d.type, region, before });
-      else if (before !== d.id) post('move', { kind: d.kind, id: d.id, region, before });
+      // a region's display position, a button's position in its region
+      const place = d.kind === 'region' ? { position: t.zone.dataset.position ?? '' } : d.kind === 'button' ? { slot: t.zone.dataset.slot ?? '' } : {};
+      if (d.isNew) post('create', { kind: d.kind, type: d.type, region, before, ...place });
+      else if (before !== d.id || t.zone !== canvas.querySelector(`[data-kind="${d.kind}"][data-id="${d.id}"]`)?.closest('.pd-grid, .pd-slot')) post('move', { kind: d.kind, id: d.id, region, before, ...place });
     });
 
     // ------------------------------------------------ resizing a region (drag its right edge)
@@ -476,7 +703,7 @@
   // ---------------------------------------------------------------- small things
   // a select that navigates (the toolbar's page switcher)
   document.addEventListener('change', (e) => {
-    if (e.target.matches?.('select[data-autosubmit]')) e.target.form?.submit();
+    if (e.target.matches?.('select[data-autosubmit], input[type=checkbox][data-autosubmit]')) e.target.form?.submit();
   });
 
   // a search box that filters a list as you type (the App Builder's applications);
@@ -776,6 +1003,7 @@
     setupThemePreview();
     setupTabs();
     for (const tree of document.querySelectorAll('.pd-tree')) setupTree(tree);
+    for (const tree of document.querySelectorAll('.pd-tree[data-tree-menu]')) setupTreeMenu(tree);
     setupProperties();
     setupCanvas();
   }
@@ -890,3 +1118,52 @@ document.addEventListener('submit', (e) => {
   // back from the browser's cache (the back button): no overlay
   window.addEventListener('pageshow', (ev) => { if (ev.persisted) overlay.remove(); }, { once: true });
 });
+
+// (sprint 74) a search box that filters a list's rows while typing (data-filter-rows="tbody id"); the form still works without it
+document.querySelectorAll('input[data-filter-rows]').forEach((el) => {
+  const body = document.getElementById(el.dataset.filterRows);
+  if (!body) return;
+  el.addEventListener('input', () => {
+    const q = el.value.trim().toLowerCase();
+    body.querySelectorAll(':scope > tr, :scope > li').forEach((tr) => { tr.hidden = !!q && !tr.textContent.toLowerCase().includes(q); });
+  });
+});
+
+// (sprint 74) Settings tabs without a reload; the form remembers the tab for the redirect after Save.
+// The authentication type shows only its own fields.
+(() => {
+  const links = [...document.querySelectorAll('[data-tab-link]')];
+  if (!links.length) return;
+  const show = (tab) => {
+    document.querySelectorAll('.settings-panel').forEach((p) => { p.hidden = p.dataset.tab !== tab; });
+    links.forEach((l) => (l.dataset.tabLink === tab ? l.setAttribute('aria-current', 'page') : l.removeAttribute('aria-current')));
+    document.querySelectorAll('[data-settings-tab]').forEach((i) => { i.value = tab; });
+    const save = document.querySelector('.settings-save');
+    if (save) save.hidden = tab === 'errors' || tab === 'pwa';
+    history.replaceState(null, '', `?tab=${tab}`);
+  };
+  links.forEach((l) => l.addEventListener('click', (e) => { e.preventDefault(); show(l.dataset.tabLink); }));
+  const auth = document.querySelector('.settings-form select[name="authentication"]');
+  auth?.addEventListener('change', () => {
+    document.querySelectorAll('.auth-part').forEach((p) => { p.hidden = p.dataset.auth !== auth.value; });
+  });
+})();
+
+// (sprint 75) the Object Browser's filter: objects whose name holds the text; folders without any are hidden
+document.querySelectorAll('input[data-filter-tree]').forEach((el) => {
+  const tree = document.getElementById(el.dataset.filterTree);
+  if (!tree) return;
+  el.addEventListener('input', () => {
+    const q = el.value.trim().toLowerCase();
+    tree.querySelectorAll('details.ob-folder').forEach((folder) => {
+      let n = 0;
+      folder.querySelectorAll('li').forEach((li) => {
+        const hit = !q || li.textContent.toLowerCase().includes(q);
+        li.hidden = !hit;
+        if (hit) n++;
+      });
+      folder.hidden = !!q && n === 0;
+      if (q && n) folder.open = true;
+    });
+  });
+});