pgkiln 0.47.0 → 0.48.0

package/public/data-modeler.css

@@ -0,0 +1,56 @@
+/* pgkiln builder: the SQL Workshop's Data Modeler (sprint 98, src/builder/data-modeler.ts, public/data-modeler.js).
+   The diagram is an SVG with presentation attributes (light colours: an exported file); here the builder's theme
+   overrides them. The canvas scrolls inside the page, so a wide diagram never widens the page. */
+.dm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
+.dm-name { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
+.dm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
+.dm-toolbar form { display: contents; }
+.dm-toolbar .btn[disabled] { opacity: 0.5; }
+.dm-status { min-width: 0; }
+.dm-stage { position: relative; }
+.dm-canvas { overflow: auto; max-width: 100%; height: 65vh; min-height: 18rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
+.dm-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.dm-svg { display: block; }
+.dm-svg .dm-bg { fill: var(--bg); }
+.dm-svg .dm-frame { fill: var(--surface); stroke: var(--border); }
+.dm-svg .dm-view .dm-frame { fill: var(--surface-2); }
+.dm-svg .dm-head { fill: var(--accent-soft); stroke: var(--border); }
+.dm-svg .dm-title { fill: var(--text); }
+.dm-svg .dm-col { fill: var(--text); }
+.dm-svg .dm-type, .dm-svg .dm-kind, .dm-svg .dm-more { fill: var(--muted); }
+.dm-svg .dm-key { fill: var(--gold, #b45309); }
+.dm-svg .dm-line, .dm-svg .dm-end { stroke: var(--muted); }
+.dm-svg .dm-opt { fill: var(--bg); stroke: var(--muted); }
+.dm-svg .dm-fk:hover .dm-line, .dm-svg .dm-fk:hover .dm-end { stroke: var(--accent); stroke-width: 2.5; }
+.dm-svg .dm-link:hover .dm-title, .dm-svg .dm-link:focus .dm-title { fill: var(--accent); text-decoration: underline; }
+.dm-live .dm-box { cursor: grab; touch-action: none; }
+.dm-live .dm-box.dm-dragging { cursor: grabbing; }
+.dm-svg .dm-box:focus { outline: none; }
+.dm-svg .dm-box:focus-visible .dm-frame { stroke: var(--accent); stroke-width: 2.5; }
+.dm-svg .dm-dragging .dm-frame { stroke: var(--accent); }
+.dm-svg text { user-select: none; }
+.dm-minimap { position: absolute; right: 12px; bottom: 12px; width: 200px; height: 140px; border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); cursor: pointer; touch-action: none; }
+.dm-minimap-bg { fill: var(--surface); }
+.dm-minimap-view { fill: var(--accent); fill-opacity: 0.15; stroke: var(--accent); stroke-width: 4; vector-effect: non-scaling-stroke; }
+.dm-legend { margin: 6px 0 12px; }
+.dm-search-row { display: flex; gap: 6px; flex-wrap: wrap; }
+.dm-search-row input { flex: 1 1 12rem; min-width: 0; }
+.dm-settings { margin-bottom: 16px; }
+.dm-settings > summary { cursor: pointer; margin-bottom: 8px; }
+.dm-settings form { margin-bottom: 8px; }
+.dm-dict-actions { margin-bottom: 12px; }
+.dm-dict-toc { columns: 3 14rem; }
+.dm-dict-table { margin-top: 1.5rem; }
+.dm-dict-table h2 { border-bottom: 1px solid var(--border); padding-bottom: 4px; overflow-wrap: anywhere; }
+@media (max-width: 640px) {
+  .dm-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  .dm-canvas { height: 55vh; }
+  .dm-minimap { width: 130px; height: 90px; }
+}
+@media print {
+  .sw-tabs, .dm-toolbar, .dm-legend, #dm-objects, #dm-add, .dm-settings, .dm-minimap, .dm-dict-actions, .ide-alerts { display: none !important; }
+  .dm-canvas { height: auto; overflow: visible; border: 0; }
+  .dm-svg { max-width: 100%; height: auto; }
+  .dm-dict-table { break-inside: avoid-page; }
+}

package/public/data-modeler.js

@@ -0,0 +1,367 @@
+// pgkiln builder: the SQL Workshop's Data Modeler (sprint 98, src/builder/data-modeler.ts, src/datamodel.ts).
+//
+// Progressive enhancement of the server-rendered SVG diagram (the boxes at their saved positions):
+//   - drag a box (mouse or touch), or focus it and use the arrow keys (Shift: bigger steps); the foreign key
+//     lines follow (fkPath: the same geometry as src/datamodel.ts)
+//   - Save (Ctrl+S) posts the positions; Undo (Ctrl+Z) and Redo (Ctrl+Y, Ctrl+Shift+Z); unsaved changes are
+//     shown and leaving asks first
+//   - Zoom in / out, Fit, Auto layout (the server's automatic positions, data-ax/ay; undoable), a mini-map
+//   - Export SVG and PNG of the diagram as it is on the screen, Print
+// Strict CSP: no inline styles; geometry goes into SVG attributes, sizes through the CSSOM.
+(() => {
+  'use strict';
+  // the data dictionary's Print button
+  for (const b of document.querySelectorAll('.dm-dict-actions [data-dm=print]')) {
+    b.hidden = false;
+    b.addEventListener('click', () => window.print());
+  }
+  const stage = document.querySelector('[data-dm-stage]');
+  const svg = document.getElementById('dm-svg');
+  if (!stage || !svg) return;
+  const canvas = stage.querySelector('.dm-canvas');
+  const toolbar = document.querySelector('.dm-toolbar');
+  const saveForm = toolbar.querySelector('.dm-save-form');
+  const status = toolbar.querySelector('.dm-status');
+  const btn = (name) => toolbar.querySelector(`[data-dm="${name}"]`);
+  for (const b of toolbar.querySelectorAll('[data-dm][hidden]')) b.hidden = false;
+  const NS = 'http://www.w3.org/2000/svg';
+
+  const boxes = new Map([...svg.querySelectorAll('.dm-box')].map((g) => [g.dataset.name, {
+    g, x: Number(g.dataset.x), y: Number(g.dataset.y), w: Number(g.dataset.w), h: Number(g.dataset.h),
+    ax: g.dataset.ax === undefined ? null : Number(g.dataset.ax), ay: g.dataset.ay === undefined ? null : Number(g.dataset.ay),
+  }]));
+  const fks = [...svg.querySelectorAll('.dm-fk')];
+  let W = Number(svg.getAttribute('width'));
+  let H = Number(svg.getAttribute('height'));
+  let zoom = 1;
+
+  // ------------------------------------------------------------ geometry (as fkPath in src/datamodel.ts)
+  function fkPath(a, ay, b, by) {
+    const y1 = a.y + ay;
+    const y2 = b.y + by;
+    let x1, x2, d1, d2, path;
+    if (a.x + a.w + 40 <= b.x) {
+      [x1, x2, d1, d2] = [a.x + a.w, b.x, 1, -1];
+      const mx = Math.round((x1 + x2) / 2);
+      path = `M ${x1} ${y1} H ${mx} V ${y2} H ${x2}`;
+    } else if (b.x + b.w + 40 <= a.x) {
+      [x1, x2, d1, d2] = [a.x, b.x + b.w, -1, 1];
+      const mx = Math.round((x1 + x2) / 2);
+      path = `M ${x1} ${y1} H ${mx} V ${y2} H ${x2}`;
+    } else {
+      [x1, x2, d1, d2] = [a.x + a.w, b.x + b.w, 1, 1];
+      const lx = Math.max(x1, x2) + (a === b ? 18 : 30);
+      const yy = a === b && y1 === y2 ? y2 + 10 : y2;
+      path = `M ${x1} ${y1} H ${lx} V ${yy} H ${x2}`;
+    }
+    const foot = `M ${x1 + d1 * 14} ${y1} L ${x1} ${y1 - 7} M ${x1 + d1 * 14} ${y1} L ${x1} ${y1 + 7} M ${x1 + d1 * 14} ${y1 - 7} V ${y1 + 7}`;
+    const bar = `M ${x2 + d2 * 10} ${y2 - 7} V ${y2 + 7}`;
+    return { path, ends: `${foot} ${bar}`, circle: { cx: x2 + d2 * 20, cy: y2 } };
+  }
+
+  function draw() {
+    for (const b of boxes.values()) b.g.setAttribute('transform', `translate(${b.x} ${b.y})`);
+    for (const l of fks) {
+      const a = boxes.get(l.dataset.from);
+      const b = boxes.get(l.dataset.to);
+      if (!a || !b) continue;
+      const p = fkPath(a, Number(l.dataset.fy), b, Number(l.dataset.ty));
+      l.querySelector('.dm-line').setAttribute('d', p.path);
+      l.querySelector('.dm-end').setAttribute('d', p.ends);
+      const c = l.querySelector('.dm-opt');
+      if (c) {
+        c.setAttribute('cx', String(p.circle.cx));
+        c.setAttribute('cy', String(p.circle.cy));
+      }
+    }
+    const all = [...boxes.values()];
+    W = Math.max(400, ...all.map((b) => b.x + b.w + 60));
+    H = Math.max(240, ...all.map((b) => b.y + b.h + 40));
+    svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
+    sizeSvg();
+  }
+  function sizeSvg() {
+    svg.setAttribute('width', String(Math.round(W * zoom)));
+    svg.setAttribute('height', String(Math.round(H * zoom)));
+    updateMinimap();
+  }
+
+  // ------------------------------------------------------------ undo, redo, unsaved changes
+  const snapshot = () => [...boxes].map(([name, b]) => [name, b.x, b.y]);
+  const restore = (snap) => {
+    for (const [name, x, y] of snap) {
+      const b = boxes.get(name);
+      if (b) [b.x, b.y] = [x, y];
+    }
+    draw();
+  };
+  const undo = [];
+  const redo = [];
+  let saved = JSON.stringify(snapshot());
+  const dirty = () => JSON.stringify(snapshot()) !== saved;
+  function changed() {
+    btn('undo').disabled = !undo.length;
+    btn('redo').disabled = !redo.length;
+    const d = dirty();
+    btn('save').classList.toggle('btn-hot', d);
+    status.textContent = d ? 'Unsaved changes' : '';
+  }
+  function remember(before) {
+    undo.push(before);
+    if (undo.length > 200) undo.shift();
+    redo.length = 0;
+    changed();
+  }
+  btn('undo').addEventListener('click', () => {
+    if (!undo.length) return;
+    redo.push(snapshot());
+    restore(undo.pop());
+    changed();
+  });
+  btn('redo').addEventListener('click', () => {
+    if (!redo.length) return;
+    undo.push(snapshot());
+    restore(redo.pop());
+    changed();
+  });
+  window.addEventListener('beforeunload', (e) => {
+    if (!dirty()) return;
+    e.preventDefault();
+    e.returnValue = '';
+  });
+
+  async function save() {
+    const body = new URLSearchParams({
+      __csrf: saveForm.querySelector('input[name=__csrf]').value,
+      format: 'json',
+      positions: JSON.stringify([...boxes].map(([name, b]) => ({ name, x: Math.round(b.x), y: Math.round(b.y) }))),
+    });
+    status.textContent = 'Saving…';
+    try {
+      const res = await fetch(saveForm.action, { method: 'POST', body, credentials: 'same-origin', headers: { accept: 'application/json' } });
+      if (!res.ok) throw new Error(String(res.status));
+      saved = JSON.stringify(snapshot());
+      changed();
+      status.textContent = 'Saved';
+    } catch (e) {
+      status.textContent = `Not saved (${e.message}): try again`;
+    }
+  }
+  btn('save').addEventListener('click', save);
+  saveForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    save();
+  });
+
+  // ------------------------------------------------------------ moving boxes
+  const moveBox = (b, x, y) => {
+    b.x = Math.max(0, Math.min(20000, Math.round(x)));
+    b.y = Math.max(0, Math.min(20000, Math.round(y)));
+    draw();
+  };
+  let dragged = false;
+  for (const b of boxes.values()) {
+    b.g.addEventListener('pointerdown', (e) => {
+      if (e.button !== 0) return;
+      const start = { x: e.clientX, y: e.clientY, bx: b.x, by: b.y };
+      const before = snapshot();
+      let moved = false;
+      const move = (ev) => {
+        const dx = (ev.clientX - start.x) / zoom;
+        const dy = (ev.clientY - start.y) / zoom;
+        if (!moved && Math.abs(dx) + Math.abs(dy) < 4) return;
+        if (!moved) {
+          moved = true;
+          // captured only once it moves: a plain click still reaches the box's name (its link)
+          b.g.setPointerCapture(ev.pointerId);
+          b.g.classList.add('dm-dragging');
+          // on top of the others
+          b.g.parentNode.append(b.g);
+        }
+        moveBox(b, start.bx + dx, start.by + dy);
+      };
+      const up = () => {
+        b.g.removeEventListener('pointermove', move);
+        b.g.removeEventListener('pointerup', up);
+        b.g.removeEventListener('pointercancel', up);
+        b.g.classList.remove('dm-dragging');
+        if (moved) {
+          dragged = true;
+          setTimeout(() => (dragged = false), 0);
+          remember(before);
+        }
+      };
+      b.g.addEventListener('pointermove', move);
+      b.g.addEventListener('pointerup', up);
+      b.g.addEventListener('pointercancel', up);
+    });
+    b.g.addEventListener('dragstart', (e) => e.preventDefault());
+    // a drag that ends over the box's name doesn't open the table
+    b.g.addEventListener('click', (e) => {
+      if (dragged) e.preventDefault();
+    }, true);
+    b.g.addEventListener('keydown', (e) => {
+      if (e.target !== b.g) return;
+      const step = e.shiftKey ? 50 : 10;
+      const d = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] }[e.key];
+      if (!d) return;
+      e.preventDefault();
+      const before = snapshot();
+      moveBox(b, b.x + d[0], b.y + d[1]);
+      remember(before);
+    });
+  }
+
+  // ------------------------------------------------------------ auto layout
+  const auto = btn('auto');
+  auto.closest('form').addEventListener('submit', (e) => {
+    e.preventDefault();
+    const before = snapshot();
+    for (const b of boxes.values()) if (b.ax !== null) [b.x, b.y] = [b.ax, b.ay];
+    draw();
+    remember(before);
+  });
+
+  // ------------------------------------------------------------ zoom
+  const setZoom = (z) => {
+    zoom = Math.max(0.2, Math.min(3, Math.round(z * 100) / 100));
+    sizeSvg();
+    status.textContent = `${Math.round(zoom * 100)}%${dirty() ? ' · unsaved changes' : ''}`;
+  };
+  btn('zoom-in').addEventListener('click', () => setZoom(zoom * 1.25));
+  btn('zoom-out').addEventListener('click', () => setZoom(zoom / 1.25));
+  btn('fit').addEventListener('click', () => setZoom(Math.min(2, (canvas.clientWidth - 4) / W, (canvas.clientHeight - 4) / H)));
+  canvas.addEventListener('wheel', (e) => {
+    if (!e.ctrlKey) return;
+    e.preventDefault();
+    setZoom(zoom * (e.deltaY < 0 ? 1.1 : 1 / 1.1));
+  }, { passive: false });
+
+  // ------------------------------------------------------------ mini-map
+  const content = svg.querySelector('.dm-content');
+  content.id = 'dm-content';
+  let mini = null;
+  let view = null;
+  function updateMinimap() {
+    if (!mini) return;
+    mini.setAttribute('viewBox', `0 0 ${W} ${H}`);
+    view.setAttribute('x', String(canvas.scrollLeft / zoom));
+    view.setAttribute('y', String(canvas.scrollTop / zoom));
+    view.setAttribute('width', String(Math.min(W, canvas.clientWidth / zoom)));
+    view.setAttribute('height', String(Math.min(H, canvas.clientHeight / zoom)));
+  }
+  const mm = btn('minimap');
+  mm.setAttribute('aria-pressed', 'false');
+  mm.addEventListener('click', () => {
+    if (mini) {
+      mini.remove();
+      mini = null;
+      mm.setAttribute('aria-pressed', 'false');
+      return;
+    }
+    mini = document.createElementNS(NS, 'svg');
+    mini.setAttribute('class', 'dm-minimap');
+    mini.setAttribute('aria-hidden', 'true');
+    mini.setAttribute('preserveAspectRatio', 'xMinYMin meet');
+    const bg = document.createElementNS(NS, 'rect');
+    bg.setAttribute('class', 'dm-minimap-bg');
+    bg.setAttribute('width', '100%');
+    bg.setAttribute('height', '100%');
+    const use = document.createElementNS(NS, 'use');
+    use.setAttribute('href', '#dm-content');
+    view = document.createElementNS(NS, 'rect');
+    view.setAttribute('class', 'dm-minimap-view');
+    mini.append(bg, use, view);
+    stage.append(mini);
+    mm.setAttribute('aria-pressed', 'true');
+    // click or drag in the mini-map: that part of the diagram in the middle
+    const go = (e) => {
+      const r = mini.getBoundingClientRect();
+      const scale = Math.min(r.width / W, r.height / H);
+      const x = (e.clientX - r.left) / scale;
+      const y = (e.clientY - r.top) / scale;
+      canvas.scrollLeft = x * zoom - canvas.clientWidth / 2;
+      canvas.scrollTop = y * zoom - canvas.clientHeight / 2;
+    };
+    mini.addEventListener('pointerdown', (e) => {
+      mini.setPointerCapture(e.pointerId);
+      go(e);
+      const move = (ev) => go(ev);
+      mini.addEventListener('pointermove', move);
+      mini.addEventListener('pointerup', () => mini.removeEventListener('pointermove', move), { once: true });
+    });
+    updateMinimap();
+  });
+  canvas.addEventListener('scroll', updateMinimap);
+  window.addEventListener('resize', updateMinimap);
+
+  // ------------------------------------------------------------ export and print
+  const fileName = (stage.dataset.name || 'diagram').replace(/[^A-Za-z0-9_.-]+/g, '_').slice(0, 80);
+  /** The diagram as a standalone SVG document (its presentation attributes carry the colours). */
+  function svgText() {
+    const copy = svg.cloneNode(true);
+    copy.removeAttribute('id');
+    copy.setAttribute('width', String(W));
+    copy.setAttribute('height', String(H));
+    copy.querySelector('.dm-content').removeAttribute('id');
+    for (const a of [...copy.querySelectorAll('a')]) a.replaceWith(...a.childNodes);
+    for (const g of copy.querySelectorAll('[tabindex]')) g.removeAttribute('tabindex');
+    return `<?xml version="1.0" encoding="UTF-8"?>\n${new XMLSerializer().serializeToString(copy)}\n`;
+  }
+  const download = (blob, name) => {
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = name;
+    document.body.append(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+  };
+  btn('svg').addEventListener('click', (e) => {
+    e.preventDefault();
+    download(new Blob([svgText()], { type: 'image/svg+xml' }), `${fileName}.svg`);
+  });
+  btn('png').addEventListener('click', () => {
+    const img = new Image();
+    img.onload = () => {
+      const scale = 2;
+      const c = document.createElement('canvas');
+      c.width = Math.round(W * scale);
+      c.height = Math.round(H * scale);
+      const ctx = c.getContext('2d');
+      ctx.scale(scale, scale);
+      ctx.drawImage(img, 0, 0, W, H);
+      c.toBlob((blob) => blob && download(blob, `${fileName}.png`), 'image/png');
+    };
+    img.onerror = () => (status.textContent = 'The PNG could not be made: export SVG instead');
+    img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText())}`;
+  });
+  btn('print').addEventListener('click', () => {
+    const z = zoom;
+    setZoom(1);
+    window.print();
+    setZoom(z);
+  });
+
+  document.addEventListener('keydown', (e) => {
+    const key = e.key.toLowerCase();
+    const mod = e.ctrlKey || e.metaKey;
+    if (!mod) return;
+    if (key === 's') {
+      e.preventDefault();
+      save();
+    } else if (/^(input|textarea|select)$/i.test(document.activeElement?.tagName || '')) {
+      return;
+    } else if (key === 'z' && !e.shiftKey) {
+      e.preventDefault();
+      btn('undo').click();
+    } else if (key === 'y' || (key === 'z' && e.shiftKey)) {
+      e.preventDefault();
+      btn('redo').click();
+    }
+  });
+
+  canvas.classList.add('dm-live');
+  changed();
+  status.textContent = '';
+})();

package/public/palette.js

@@ -0,0 +1,133 @@
+// pgkiln builder: the search (Ctrl+K) and the SQL Workshop Launchpad (sprint 96, src/builder/launchpad.ts).
+//
+//  - Ctrl+K (⌘K) on any builder page, or focusing the header's search field, opens a search dialog: tools,
+//    applications, pages and database objects by name (GET /builder/palette?format=json), arrow keys and Enter
+//    to open one. Without JavaScript the header's field posts to the results page.
+//  - SQL Workshop pages are remembered as "Recently visited" in this browser and listed on the home page.
+//  - The home page's tool groups (Development, Administration, Monitoring) become tabs.
+// Results are built as text nodes, never parsed as HTML.
+(() => {
+  'use strict';
+  const store = {
+    get(k) { try { return JSON.parse(localStorage.getItem(`pgkiln.${k}`) || 'null'); } catch { return null; } },
+    set(k, v) { try { localStorage.setItem(`pgkiln.${k}`, JSON.stringify(v)); } catch { /* private mode */ } },
+  };
+
+  // ------------------------------------------------------------ recently visited SQL Workshop pages
+  const path = location.pathname;
+  if (/^\/builder\/sql\/./.test(path) && !/\/(panel|navigator|action)$/.test(path)) {
+    const title = document.title.replace(/ · Builder$/, '');
+    const href = path + location.search;
+    const list = (store.get('sw.recent') || []).filter((r) => r && r.href !== href);
+    list.unshift({ href, title });
+    store.set('sw.recent', list.slice(0, 8));
+  }
+  const recent = document.querySelector('[data-lp-recent]');
+  if (recent) {
+    const list = store.get('sw.recent') || [];
+    for (const r of list) {
+      if (typeof r?.href !== 'string' || !r.href.startsWith('/builder/')) continue;
+      const li = document.createElement('li');
+      const a = document.createElement('a');
+      a.href = r.href;
+      a.textContent = String(r.title || r.href);
+      li.append(a);
+      recent.append(li);
+    }
+    recent.hidden = !recent.children.length;
+  }
+
+  // ------------------------------------------------------------ the Launchpad's tabs
+  const tabs = document.querySelector('.lp-tabs');
+  if (tabs) {
+    tabs.hidden = false;
+    const show = (g) => {
+      for (const b of tabs.querySelectorAll('[data-lp-tab]')) b.setAttribute('aria-selected', String(b.dataset.lpTab === g));
+      for (const sct of document.querySelectorAll('[data-lp-group]')) sct.hidden = sct.dataset.lpGroup !== g;
+      store.set('lp.tab', g);
+    };
+    show(store.get('lp.tab') || 'development');
+    tabs.addEventListener('click', (e) => { const b = e.target.closest('[data-lp-tab]'); if (b) show(b.dataset.lpTab); });
+  }
+
+  // ------------------------------------------------------------ the search dialog
+  let dlg = null, input, listbox, status, items = [], active = -1, timer = 0, seq = 0;
+  const build = () => {
+    dlg = document.createElement('dialog');
+    dlg.className = 'palette';
+    dlg.setAttribute('aria-label', 'Search the builder');
+    input = Object.assign(document.createElement('input'), { type: 'search', placeholder: 'Tables, views, functions, applications, pages, tools…', autocomplete: 'off', id: 'palette-q' });
+    input.setAttribute('role', 'combobox');
+    input.setAttribute('aria-expanded', 'true');
+    input.setAttribute('aria-controls', 'palette-list');
+    input.setAttribute('aria-label', 'Search');
+    listbox = Object.assign(document.createElement('ul'), { id: 'palette-list', className: 'palette-list' });
+    listbox.setAttribute('role', 'listbox');
+    status = Object.assign(document.createElement('p'), { className: 'palette-status muted small' });
+    status.setAttribute('aria-live', 'polite');
+    dlg.append(input, listbox, status);
+    document.body.append(dlg);
+    input.addEventListener('input', () => { clearTimeout(timer); timer = setTimeout(query, 150); });
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        if (items.length) select((active + (e.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length);
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        const r = items[active] || items[0];
+        if (r) location.href = r.href;
+        else if (input.value.trim()) location.href = `/builder/palette?q=${encodeURIComponent(input.value.trim())}`;
+      }
+    });
+    listbox.addEventListener('click', (e) => { const li = e.target.closest('[role=option]'); if (li) location.href = items[Number(li.dataset.i)].href; });
+    dlg.addEventListener('click', (e) => { if (e.target === dlg) dlg.close(); });
+  };
+  const select = (i) => {
+    active = i;
+    for (const li of listbox.children) li.setAttribute('aria-selected', String(Number(li.dataset.i) === i));
+    const li = listbox.children[i];
+    if (li) { input.setAttribute('aria-activedescendant', li.id); li.scrollIntoView({ block: 'nearest' }); }
+  };
+  const query = async () => {
+    const q = input.value.trim();
+    const mine = ++seq;
+    if (!q) { listbox.replaceChildren(); items = []; status.textContent = 'Type to search.'; return; }
+    try {
+      const res = await fetch(`/builder/palette?format=json&q=${encodeURIComponent(q)}`, { credentials: 'same-origin' });
+      if (!res.ok) throw new Error(String(res.status));
+      const data = await res.json();
+      if (mine !== seq) return; // a later query is on its way
+      items = data.results || [];
+      listbox.replaceChildren(...items.map((r, i) => {
+        const li = document.createElement('li');
+        li.setAttribute('role', 'option');
+        li.id = `palette-${i}`;
+        li.dataset.i = String(i);
+        const label = Object.assign(document.createElement('strong'), { textContent: r.label });
+        const detail = Object.assign(document.createElement('small'), { className: 'muted', textContent: ` ${r.kind}${r.detail ? ` · ${r.detail}` : ''}` });
+        li.append(label, detail);
+        return li;
+      }));
+      status.textContent = items.length ? `${items.length} found.` : 'Nothing found.';
+      select(items.length ? 0 : -1);
+    } catch {
+      status.textContent = 'The search failed.';
+    }
+  };
+  const open = (text = '') => {
+    if (!dlg) build();
+    if (!dlg.open) dlg.showModal();
+    input.value = text;
+    input.focus();
+    query();
+  };
+  document.addEventListener('keydown', (e) => {
+    if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === 'k') {
+      e.preventDefault();
+      open();
+    }
+  });
+  const field = document.querySelector('form[data-palette] input[name=q]');
+  field?.addEventListener('focus', () => { const v = field.value; field.blur(); open(v); });
+  window.pgkilnPalette = { open };
+})();

package/public/worksheet.css

@@ -242,3 +242,52 @@ details.menu.obj-menu > summary::before, details.menu.obj-menu > summary::after
 .te-generated { font-size: 12px; }
 .te-ddl { max-height: 60vh; overflow: auto; }
 .te-buttons { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0; border-top: 1px solid var(--border); }
+
+/* (sprint 96) the header's search, the search dialog, the SQL Workshop Launchpad, pins */
+.ide-search { margin-left: auto; min-width: 0; }
+.ide-search input { width: 13rem; max-width: 100%; font-size: 12.5px; padding: 3px 8px; }
+@media (max-width: 700px) { .ide-search input { width: 7rem; } }
+.palette { width: min(40rem, calc(100vw - 32px)); margin-top: 12vh; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
+.palette::backdrop { background: rgb(0 0 0 / 35%); }
+.palette input { width: 100%; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 12px 14px; font-size: 15px; }
+.palette-list { list-style: none; margin: 0; padding: 4px 0; max-height: 50vh; overflow: auto; }
+.palette-list li { padding: 6px 14px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.palette-list li[aria-selected=true] { background: var(--sel-bg); color: var(--sel-text); }
+.palette-list li[aria-selected=true] .muted { color: inherit; opacity: 0.85; }
+.palette-status { margin: 0; padding: 6px 14px; border-top: 1px solid var(--border); }
+.pal-results { list-style: none; padding: 0; }
+.pal-results a { display: flex; gap: 8px; align-items: center; padding: 6px 0; text-decoration: none; }
+.lp-pins { margin-bottom: 16px; }
+.lp-pins h2, .lp-group h2 { font-size: 14px; margin: 0 0 8px; }
+.lp-chips { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
+.lp-chips li { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); padding-left: 10px; }
+.lp-chips a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); padding: 4px 0; font-size: 13px; }
+.lp-recent li { padding-right: 10px; border-style: dashed; }
+.lp-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
+.lp-tabs [role=tab] { border: 0; background: none; color: var(--muted); padding: 7px 12px; font: inherit; cursor: pointer; }
+.lp-tabs [role=tab][aria-selected=true] { color: var(--text); box-shadow: inset 0 -2px 0 var(--hot); }
+.js .lp-group > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+.lp-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
+.lp-tool { display: flex; align-items: flex-start; gap: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 8px; }
+.lp-tool > a { flex: 1; display: flex; gap: 8px; text-decoration: none; color: var(--text); min-width: 0; }
+.lp-tool > a span { display: flex; flex-direction: column; min-width: 0; }
+.lp-tool small { font-size: 12px; }
+.pin-form { display: inline; margin: 0; }
+.pin-btn { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 3px; }
+.pin-btn:hover { color: var(--text); background: var(--surface-3); }
+.pin-btn.is-pinned { color: var(--hot); }
+.pin-btn .icon { width: 14px; height: 14px; }
+.ob-pin { float: right; }
+
+/* (sprint 97) charts: the worksheet's Chart tab, the Charts page and its dashboard */
+.ch-controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin-bottom: 8px; font-size: 13px; }
+.ch-controls > label { display: flex; flex-direction: column; gap: 2px; }
+.ch-controls fieldset { display: flex; flex-wrap: wrap; gap: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 8px; margin: 0; }
+.ch-controls legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
+.ch-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
+.ch-actions input { flex: 0 1 16rem; width: auto; min-width: 0; }
+.ch-view { min-width: 0; max-width: 60rem; }
+.ch-dashboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-bottom: 16px; }
+.ch-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; min-width: 0; }
+.ch-card h2 { font-size: 14px; margin: 0 0 6px; }
+.ch-edit { max-width: 48rem; margin-top: 16px; }

package/public/worksheet.js

@@ -64,6 +64,7 @@
     const k = e.key.toLowerCase();
     if (k === 's' && !e.shiftKey) { save(); return true; }
     if (e.key === 'F7') { format(); return true; }
+    if (e.key === 'F11' && button('chart')) { run('chart'); return true; }
     if (!inEditor && !e.target.closest?.('.ws-findbar')) return false;
     if (k === 'b' && inEditor) { convertCase(); return true; }
     if (k === 'f' || k === 'h' || k === 'g') { openFind(k); return true; }
@@ -339,6 +340,9 @@
   form.querySelector('.ws-nav-switch').addEventListener('click', (e) => { const b = e.target.closest('[data-ws-navtab]'); if (b) navTab(b.dataset.wsNavtab); });
   navTab(location.hash === '#ws-files' ? 'files' : 'objects');
 
+  // ------------------------------------------------------------ (sprint 97) a chart's settings draw it again
+  form.querySelector('.ch-controls')?.addEventListener('change', () => run('chart'));
+
   // ------------------------------------------------------------ (sprint 93) bind and substitution values
   const binds = form.querySelector('[data-ws-binds]');
   if (binds) {

package/src/app.ts

@@ -37,6 +37,7 @@ import { reportSettingsRoutes } from './builder/report-settings.ts';
 import { layoutRoutes } from './builder/layouts.ts';
 import { dataLoadRoutes } from './builder/dataload.ts';
 import { builderRoutes } from './builder/routes.ts';
+import { dbUserRoutes } from './builder/db-users.ts';
 import { usersRoutes } from './builder/users.ts';
 import { codeEditorRoutes } from './builder/code-editor.ts';
 import { sampleDataRoutes } from './builder/sampledata.ts';
@@ -59,6 +60,7 @@ import { staticFileRoutes } from './runtime/static-files.ts';
 import { staticFileBuilderRoutes } from './builder/static-files.ts';
 import { pluginRoutes } from './builder/plugins.ts';
 import { restRoutes } from './runtime/rest.ts';
+import { autoRestRoutes } from './runtime/autorest.ts';
 import { oauthRoutes } from './oauth.ts';
 import { MAX_UPLOAD_MB } from './runtime/files.ts';
 import { runtimeRoutes } from './runtime/routes.ts';
@@ -183,6 +185,7 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(pushRoutes);
   await app.register(staticFileRoutes);
   await app.register(restRoutes);
+  await app.register(autoRestRoutes); // (sprint 100) AutoREST: /a/:alias/autorest/
   await app.register(builderRoutes);
   await app.register(galleryRoutes);
   await app.register(appGroupRoutes);
@@ -199,6 +202,7 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(pluginRoutes);
   await app.register(sqlRoutes);
   await app.register(usersRoutes);
+  await app.register(dbUserRoutes);
   await app.register(dataLoadRoutes);
   await app.register(layoutRoutes);
   await app.register(automationRoutes);