@giamme/forge 0.8.0 → 0.9.0

package/ui/forge_ui/static/search.js

@@ -107,7 +107,8 @@ window.ForgeSearch = (() => {
     dlg.addEventListener('click', e => { if (e.target === dlg) close(); });       // the backdrop
     document.addEventListener('keydown', e => {
       if ((e.key === 'k' || e.key === 'K') && (e.ctrlKey || e.metaKey) && !e.altKey) { e.preventDefault(); if (dlg.open) close(); else open(); }
-      else if (e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && !dlg.open && !typing(e.target)) { e.preventDefault(); open(); }
+      // a view that handles / itself (a conversation's search) keeps it
+      else if (e.key === '/' && !e.defaultPrevented && !e.ctrlKey && !e.metaKey && !e.altKey && !dlg.open && !typing(e.target)) { e.preventDefault(); open(); }
     });
     for (const b of document.querySelectorAll('[data-jump]')) {
       b.addEventListener('click', open);

package/ui/forge_ui/static/shell.js

@@ -0,0 +1,137 @@
+/* forge-ui shell: Immersive (modules float over a full-bleed stage) or Workbench (modules docked, resized by
+   splitters), which modules are open, and their sizes. Loaded at the top of <body> without defer, so the page's first
+   paint already has the user's layout; the controls are wired once the document is parsed.
+   State on <body>: data-shell="immersive|workbench", data-runs / data-insp / data-tasks="open|closed", and the sizes as
+   --runs-w, --insp-w, --tasks-h. Keys 1, 2, 3 toggle the runs, inspector and tasks modules (digits need no Shift on US
+   or Italian keyboards). On a first visit the inspector and the tasks start folded, so a run opens on its plate; choosing
+   something opens the inspector (app.js), and once a module is opened or folded that choice is kept.
+   Remembered in localStorage under forge-ui-shell.
+   window.ForgeShell = { state, toggle(panel, open?), setShell(name), head(panel, title, count?), splitter(panel), onChange(fn) } */
+window.ForgeShell = (() => {
+  'use strict';
+  const KEY = 'forge-ui-shell', body = document.body;
+  const PANELS = { runs: { label: 'Runs', key: '1', icon: 'panel-left' }, insp: { label: 'Inspector', key: '2', icon: 'panel-right' }, tasks: { label: 'Tasks', key: '3', icon: 'panel-bottom' } };
+  const SIZE = { runs: ['--runs-w', 220, 560, 300], insp: ['--insp-w', 300, 760, 380], tasks: ['--tasks-h', 120, 900, 208] };
+  const read = () => { try { const v = JSON.parse(localStorage.getItem(KEY)); return v && typeof v === 'object' ? v : {}; } catch (_) { return {}; } };
+  const saved = read();
+  const narrow = window.matchMedia && window.matchMedia('(max-width: 760px)').matches;
+  const state = {
+    shell: saved.shell === 'workbench' ? 'workbench' : 'immersive',
+    runs: typeof saved.runs === 'boolean' ? saved.runs : !narrow, insp: saved.insp === true, tasks: saved.tasks === true,
+    size: { runs: num(saved.size && saved.size.runs, 'runs'), insp: num(saved.size && saved.size.insp, 'insp'), tasks: num(saved.size && saved.size.tasks, 'tasks') },
+  };
+  function num(v, panel) { const [, lo, hi, d] = SIZE[panel]; return typeof v === 'number' && Number.isFinite(v) ? Math.max(lo, Math.min(hi, Math.round(v))) : d; }
+  const listeners = new Set();
+  const icon = name => window.ForgeIcons ? window.ForgeIcons.icon(name) : document.createTextNode('');
+  function save() { try { localStorage.setItem(KEY, JSON.stringify(state)); } catch (_) { /* private mode: not remembered */ } }
+  function apply() {
+    body.dataset.shell = state.shell;
+    for (const p of Object.keys(PANELS)) body.dataset[p] = state[p] ? 'open' : 'closed';
+    for (const [p, [prop]] of Object.entries(SIZE)) body.style.setProperty(prop, state.size[p] + 'px');
+    for (const b of document.querySelectorAll('[data-panel-toggle]')) {
+      const p = b.dataset.panelToggle; b.setAttribute('aria-pressed', String(!!state[p]));
+      b.title = `${state[p] ? 'Hide' : 'Show'} the ${PANELS[p].label.toLowerCase()} (${PANELS[p].key})`;
+    }
+    for (const b of document.querySelectorAll('[data-shell-pick]')) b.setAttribute('aria-pressed', String(b.dataset.shellPick === state.shell));
+    for (const b of document.querySelectorAll('[data-theme-pick]')) b.setAttribute('aria-pressed', String(window.ForgeTheme && b.dataset.themePick === window.ForgeTheme.get()));
+    for (const s of document.querySelectorAll('.splitter[data-panel]')) s.setAttribute('aria-valuenow', String(state.size[s.dataset.panel]));
+  }
+  function changed() { apply(); save(); for (const f of listeners) try { f(state); } catch (_) { /* a listener's own problem */ } }
+  function toggle(panel, open) { if (!PANELS[panel]) return; state[panel] = open === undefined ? !state[panel] : !!open; changed(); }
+  function setShell(name) { state.shell = name === 'workbench' ? 'workbench' : 'immersive'; changed(); }
+  apply();
+
+  function el(tag, cls, text) { const n = document.createElement(tag); if (cls) n.className = cls; if (text !== undefined) n.textContent = text; return n; }
+  function bank(label, cls) { const g = el('div', 'seg ' + cls); g.setAttribute('role', 'group'); g.setAttribute('aria-label', label); return g; }
+  // a module's head: its plate, an optional count, room for tools, and the key that folds it away
+  function head(panel, title, count) {
+    const h = el('div', 'module-head');
+    const plate = el('h2', 'module-title', title); h.append(plate);
+    if (count !== undefined) h.append(el('span', 'module-count', count));
+    const tools = el('span', 'module-tools');
+    tools.append(foldButton(panel));
+    h.append(tools);
+    return h;
+  }
+  function foldButton(panel) {
+    const b = el('button', 'icon-btn fold-btn'); b.type = 'button'; b.dataset.fold = panel;
+    const sync = () => { b.replaceChildren(icon(state[panel] ? (panel === 'tasks' ? 'chevron-down' : 'close') : panel === 'tasks' ? 'chevron-up' : PANELS[panel].icon));
+      b.setAttribute('aria-label', `${state[panel] ? 'Fold away' : 'Open'} the ${PANELS[panel].label.toLowerCase()} (${PANELS[panel].key})`); b.title = b.getAttribute('aria-label'); };
+    sync(); listeners.add(() => { if (b.isConnected) sync(); });
+    b.addEventListener('click', () => toggle(panel));
+    return b;
+  }
+  // a splitter on a module's inner edge: drag it, or focus it and use the arrow keys
+  function splitter(panel) {
+    const [prop, lo, hi] = SIZE[panel], rows = panel === 'tasks';
+    const s = el('div', 'splitter ' + (rows ? 'h' : 'v'));
+    s.dataset.panel = panel; s.tabIndex = 0;
+    s.setAttribute('role', 'separator'); s.setAttribute('aria-orientation', rows ? 'horizontal' : 'vertical');
+    s.setAttribute('aria-label', `Resize the ${PANELS[panel].label.toLowerCase()}`);
+    s.setAttribute('aria-valuemin', String(lo)); s.setAttribute('aria-valuemax', String(hi)); s.setAttribute('aria-valuenow', String(state.size[panel]));
+    const set = v => { state.size[panel] = num(v, panel); body.style.setProperty(prop, state.size[panel] + 'px'); s.setAttribute('aria-valuenow', String(state.size[panel])); };
+    let start = null;
+    s.addEventListener('pointerdown', e => {
+      if (e.button !== 0) return;
+      e.preventDefault(); s.setPointerCapture(e.pointerId); s.classList.add('dragging'); body.classList.add('resizing'); body.classList.toggle('rows', rows);
+      start = { x: e.clientX, y: e.clientY, v: state.size[panel] };
+    });
+    s.addEventListener('pointermove', e => {
+      if (!start) return;
+      const d = rows ? start.y - e.clientY : panel === 'insp' ? start.x - e.clientX : e.clientX - start.x;
+      set(start.v + d);
+    });
+    const end = () => { if (!start) return; start = null; s.classList.remove('dragging'); body.classList.remove('resizing', 'rows'); changed(); };
+    s.addEventListener('pointerup', end); s.addEventListener('pointercancel', end);
+    s.addEventListener('keydown', e => {
+      const grow = rows ? 'ArrowUp' : panel === 'insp' ? 'ArrowLeft' : 'ArrowRight', shrink = rows ? 'ArrowDown' : panel === 'insp' ? 'ArrowRight' : 'ArrowLeft';
+      const step = e.shiftKey ? 64 : 16;
+      if (e.key === grow) set(state.size[panel] + step); else if (e.key === shrink) set(state.size[panel] - step);
+      else if (e.key === 'Home') set(lo); else if (e.key === 'End') set(hi); else return;
+      e.preventDefault(); changed();
+    });
+    return s;
+  }
+
+  function wire() {
+    const tools = document.querySelector('.desk-tools');
+    if (tools) {
+      const panels = bank('Modules', 'panel-bank');
+      for (const [p, d] of Object.entries(PANELS)) {
+        const b = el('button'); b.type = 'button'; b.dataset.panelToggle = p; b.dataset.key = d.key;
+        b.append(icon(d.icon), el('span', 'panel-label', d.label)); panels.append(b);   // the label, or on a narrow desk the panel's picture
+        b.addEventListener('click', () => toggle(p));
+      }
+      const shells = bank('Layout', 'icons shell-switch');
+      for (const [name, label] of [['immersive', 'Immersive: modules float over the stage'], ['workbench', 'Workbench: modules docked beside the stage']]) {
+        const b = el('button'); b.type = 'button'; b.dataset.shellPick = name; b.setAttribute('aria-label', label); b.title = label;
+        b.append(icon(name)); b.addEventListener('click', () => setShell(name)); shells.append(b);
+      }
+      const themes = bank('Theme', 'icons theme-switch');
+      for (const [name, label] of [['system', 'Theme: follow the system'], ['light', 'Theme: light'], ['dark', 'Theme: dark']]) {
+        const b = el('button'); b.type = 'button'; b.dataset.themePick = name; b.setAttribute('aria-label', label); b.title = label;
+        b.append(icon(name === 'light' ? 'sun' : name === 'dark' ? 'moon' : 'system'));
+        b.addEventListener('click', () => { if (window.ForgeTheme) window.ForgeTheme.set(name); apply(); }); themes.append(b);
+      }
+      tools.prepend(panels, shells, themes);
+    }
+    const bell = document.getElementById('bell'); if (bell && !bell.querySelector('.icon')) bell.prepend(icon('bell'));
+    const search = document.querySelector('.top-search-label'); if (search && !search.querySelector('.icon')) search.prepend(icon('search'));
+    const side = document.querySelector('.sidebar');
+    if (side) {
+      const t = side.querySelector('.module-tools'); if (t) t.append(foldButton('runs'));
+      side.append(splitter('runs'));
+    }
+    document.addEventListener('keydown', e => {
+      if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey || e.repeat) return;
+      const t = e.target, typing = t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName));
+      if (typing || document.querySelector('dialog[open]')) return;
+      const p = Object.keys(PANELS).find(k => PANELS[k].key === e.key);
+      if (p) { e.preventDefault(); toggle(p); }
+    });
+    apply();
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', wire, { once: true }); else wire();
+
+  return { state, toggle, setShell, head, splitter, onChange: f => listeners.add(f) };
+})();

package/ui/forge_ui/static/stagectl.js

@@ -0,0 +1,150 @@
+/* forge-ui stage controls: the bank of keys over the 3D stage and the keyboard behind it. Fit (F), zoom (+ −),
+   projection (V: perspective, true isometric, top-down), reset (0), full screen, the legend of what the stage
+   draws now (L), the route (I) and the sheet of every key (?). scene3d.js says what each key does and what the
+   legend holds (ctl); this module only draws the bank, the legend and the sheet, with createElement and
+   textContent like the rest of the page. The keys work wherever focus is, while the stage is on screen and
+   nothing is being typed. */
+export const PROJECTIONS = [['persp', 'Perspective', 'persp'], ['iso', 'Isometric', 'iso'], ['top', 'Top-down', 'top']];
+// the sheet: [group, [[keys, what]]]
+const SHEET = [
+  ['Modules', [['1', 'Runs'], ['2', 'Inspector'], ['3', 'Tasks']]],
+  ['Stage', [['F', 'Fit what is shown'], ['+ −', 'Zoom in, out'], ['V', 'Perspective, isometric, top-down'], ['0', 'Reset the view'],
+    ['L', 'Legend'], ['I', 'Route: keep a chosen task’s route lit'], ['Shift F', 'Full screen'], ['?', 'These keys']]],
+  ['With the stage focused', [['← →', 'Previous, next task (on the map: run)'], ['↑ ↓', 'On the map: previous, next repository'], ['Enter', 'On the map: open the run'],
+    ['E', 'Plan or execution'], ['Esc', 'Clear the selection, then back to the map']]],
+  ['In a diff', [['n p', 'Next, previous finding'], ['j k', 'Next, previous file']]],
+  ['In a conversation', [['/', 'Search what it said and ran'], ['E', 'Next error']]],
+];
+
+const el = (tag, cls, text) => { const n = document.createElement(tag); if (cls) n.className = cls; if (text != null) n.textContent = text; return n; };
+const icon = name => window.ForgeIcons ? window.ForgeIcons.icon(name) : el('span');
+const typing = t => t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName));
+
+// ctl: { view() → 'run'|'atlas'|'cloud'|null, fit(), reset(), zoom(k), projection, setProjection(name),
+//        legend() → [{title, note?, rows: [{sw, label}]}], toggleRoute() }
+export function createControls(host, ctl) {
+  const bank = el('div', 'stage-ctl'); bank.setAttribute('role', 'toolbar'); bank.setAttribute('aria-label', 'Stage view'); bank.setAttribute('aria-orientation', 'vertical');
+  const key = (name, label, keys, fn, ico = name) => {
+    const b = el('button', 'icon-btn'); b.type = 'button'; b.dataset.ctl = name;
+    b.setAttribute('aria-label', label); b.title = `${label} (${keys})`; b.setAttribute('aria-keyshortcuts', keys);
+    b.append(icon(ico)); b.addEventListener('click', fn); return b;
+  };
+  // momentary keys (fit, zoom, reset) have no lamp; a latching one lights while it is in (the projection bank, legend, full screen)
+  const latch = b => { b.classList.add('latch'); b.setAttribute('aria-pressed', 'false'); return b; };
+  const projs = el('div', 'stage-ctl-group'); projs.setAttribute('role', 'group'); projs.setAttribute('aria-label', 'Projection (V)');
+  for (const [name, label, ico] of PROJECTIONS) projs.append(latch(key('proj-' + name, label, 'V', () => { ctl.setProjection(name); sync(); }, ico)));
+  const full = latch(key('fullscreen', 'Full screen', 'Shift+F', () => fullscreen(), 'fullscreen'));
+  const leg = latch(key('legend', 'Legend', 'L', () => legend(), 'legend'));
+  leg.setAttribute('aria-expanded', 'false');
+  bank.append(
+    key('fit', 'Fit what is shown', 'F', () => ctl.fit()),
+    key('zoom-in', 'Zoom in', '+', () => ctl.zoom(1.35)),
+    key('zoom-out', 'Zoom out', '-', () => ctl.zoom(1 / 1.35)),
+    key('reset', 'Reset the view', '0', () => { ctl.reset(); sync(); }),
+    el('span', 'stage-ctl-rule'), projs, el('span', 'stage-ctl-rule'),
+    leg, full,
+    key('keys', 'Keys', '?', () => sheet(), 'keyboard'),
+  );
+  if (!document.fullscreenEnabled) full.hidden = true;
+  host.append(bank);
+
+  // the legend: what the stage draws now, rebuilt each time it opens and when the view changes under it
+  const panel = el('section', 'stage-legend'); panel.id = 'stage-legend'; panel.hidden = true; panel.setAttribute('aria-label', 'Legend');
+  leg.setAttribute('aria-controls', panel.id);
+  host.append(panel);
+  function fillLegend() {
+    const head = el('div', 'stage-legend-head'); head.append(el('h3', 'plate', 'Legend'));
+    const x = el('button', 'icon-btn'); x.type = 'button'; x.setAttribute('aria-label', 'Close the legend'); x.append(icon('close')); x.addEventListener('click', () => legend(false));
+    head.append(x);
+    const body = [head];
+    for (const sec of ctl.legend()) {
+      const s = el('div', 'lg-sec'); s.append(el('h4', 'plate lg-title', sec.title));
+      for (const r of sec.rows) { const row = el('div', 'lg-row'); row.append(swatch(r.sw), el('span', 'lg-label', r.label)); s.append(row); }
+      if (sec.note) s.append(el('p', 'lg-note', sec.note));
+      body.push(s);
+    }
+    panel.replaceChildren(...body);
+  }
+  function swatch(sw = {}) {
+    const s = el('span', 'lg-sw');
+    if (sw.lamp) { s.classList.add('lg-lamp'); s.append(el('i', 'lamp ' + sw.lamp)); }
+    else if (sw.route) { s.classList.add('lg-lamp'); s.append(el('i', 'lamp lamp-route')); }
+    else if (sw.sev) { s.classList.add('lg-sev', 'sev-' + sw.sev); if (sw.pale) s.classList.add('pale'); }
+    else if (sw.cable) s.classList.add('lg-cable', 'cable-' + sw.cable);
+    else if (sw.bead) s.classList.add('lg-bead');
+    else if (sw.ring) s.classList.add('lg-ring');
+    else if (sw.color) { s.classList.add('lg-color'); s.style.setProperty('--sw', sw.color); }
+    else if (sw.scale) { s.classList.add('lg-scale'); s.append(el('span', 'lg-min', sw.scale[0]), el('span', 'lg-bar'), el('span', 'lg-max', sw.scale[1])); }
+    else if (sw.height) { s.classList.add('lg-height'); s.append(el('i'), el('i'), el('i')); }
+    return s;
+  }
+  function legend(open = panel.hidden) {
+    if (open) fillLegend();
+    panel.hidden = !open; leg.setAttribute('aria-expanded', String(open)); leg.setAttribute('aria-pressed', String(open));
+  }
+
+  // the projection in use is the bank's lit key
+  function sync() {
+    for (const b of projs.children) b.setAttribute('aria-pressed', String(b.dataset.ctl === 'proj-' + ctl.projection));
+    full.setAttribute('aria-pressed', String(document.fullscreenElement === host));
+    const v = ctl.view(); bank.hidden = v !== 'run' && v !== 'atlas';
+    if (bank.hidden && !panel.hidden) legend(false);
+    else if (!panel.hidden) fillLegend();
+  }
+  function cycle() {
+    const i = PROJECTIONS.findIndex(x => x[0] === ctl.projection);
+    ctl.setProjection(PROJECTIONS[(i + 1) % PROJECTIONS.length][0]); sync();
+  }
+  function fullscreen() {
+    if (document.fullscreenElement === host) document.exitFullscreen();
+    else if (host.requestFullscreen) host.requestFullscreen().catch(() => {});
+  }
+  const onFull = () => sync();                             // the engine refits a framing the user has not moved
+  document.addEventListener('fullscreenchange', onFull);
+
+  // the sheet of every key, a dialog made the first time it opens
+  let dlg = null;
+  function sheet() {
+    if (!dlg) {
+      dlg = el('dialog', 'keys-sheet'); dlg.setAttribute('aria-label', 'Keys');
+      const head = el('div', 'keys-head'); head.append(el('span', 'plate', 'Keys'));
+      const x = el('button', 'icon-btn'); x.type = 'button'; x.setAttribute('aria-label', 'Close'); x.append(icon('close')); x.addEventListener('click', () => dlg.close());
+      head.append(x); dlg.append(head);
+      const grid = el('div', 'keys-grid');
+      for (const [title, rows] of SHEET) {
+        const g = el('section', 'keys-group'); g.append(el('h4', 'plate lg-title', title));
+        const dl = el('dl');
+        for (const [k, what] of rows) { const dt = el('dt'); for (const part of k.split(' ')) dt.append(el('kbd', null, part)); dl.append(dt, el('dd', null, what)); }
+        g.append(dl); grid.append(g);
+      }
+      dlg.append(grid);
+      dlg.addEventListener('click', e => { if (e.target === dlg) dlg.close(); });   // a click on the backdrop
+      document.body.append(dlg);                            // a modal dialog is drawn over a full-screen stage too
+    }
+    if (!dlg.open) dlg.showModal();
+  }
+
+  // the keys: anywhere on the page while the stage is on screen and nothing is being typed
+  const shown = () => host.isConnected && !host.hidden && host.getClientRects().length > 0 && !bank.hidden;
+  function onKey(e) {
+    if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey || typing(e.target)) return;
+    if (document.querySelector('dialog[open]') && !(dlg && dlg.open)) return;
+    if (!shown()) return;
+    const k = e.key;
+    if (dlg && dlg.open) return;
+    if (k === '?') { e.preventDefault(); sheet(); return; }
+    if (e.repeat && !['+', '=', '-', '_'].includes(k)) return;
+    if (k === 'F' && e.shiftKey) { e.preventDefault(); fullscreen(); return; }
+    const act = { f: () => ctl.fit(), '+': () => ctl.zoom(1.35), '=': () => ctl.zoom(1.35), '-': () => ctl.zoom(1 / 1.35), _: () => ctl.zoom(1 / 1.35),
+      v: () => cycle(), 0: () => { ctl.reset(); sync(); }, l: () => legend(), i: () => { ctl.toggleRoute(); if (!panel.hidden) fillLegend(); } }[k.length === 1 ? k.toLowerCase() : k];
+    if (!act) return;
+    e.preventDefault(); act();
+  }
+  document.addEventListener('keydown', onKey);
+  sync();
+  return {
+    sync, bank, legend: panel,
+    get legendOpen() { return !panel.hidden; },
+    dispose() { document.removeEventListener('keydown', onKey); document.removeEventListener('fullscreenchange', onFull); bank.remove(); panel.remove(); if (dlg) dlg.remove(); },
+  };
+}