pgkiln 0.42.0 → 0.44.0

package/public/app.js

@@ -3642,7 +3642,7 @@ function areaFilter(map, f) {
   const bar = document.querySelector('.devbar');
   if (!bar) return;
   const KEY = 'pgkiln.devbar';
-  let prefs = { dock: 'bottom', autohide: true };
+  let prefs = { dock: 'bottom', autohide: true, compact: false };
   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 {} };
@@ -3650,6 +3650,10 @@ function areaFilter(map, f) {
   settings?.closest('li')?.removeAttribute('hidden');
   const apply = () => {
     bar.dataset.dock = prefs.dock;
+    // (sprint 79) "Icons only": the tools without their texts
+    bar.toggleAttribute('data-compact', !!prefs.compact);
+    const compact = bar.querySelector('input[name="devbar-compact"]');
+    if (compact) compact.checked = !!prefs.compact;
     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;
@@ -3658,6 +3662,7 @@ function areaFilter(map, f) {
   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 if (e.target.name === 'devbar-compact') prefs.compact = e.target.checked;
     else return;
     save();
     apply();
@@ -3725,3 +3730,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; } }