create-pmos 0.133.0 → 0.135.0

package/workspace/public/pm/c3-ini-timeline.js

@@ -0,0 +1,278 @@
+/* pm/c3-ini-timeline.js — the HTML timeline of the Initiatives page (mockup v5, 34-initiatives.js "Timeline: compact rows, mono 11px
+ * labels, thin bars, zoom, expand, drag, pan"). Used by the Portfolio (board > initiative > epic), a board's Timeline tab (initiative >
+ * epic > item) and an initiative's Timeline tab (epic > item).
+ *
+ *   timeline({ key, rows, from, to, today, markers, defOpen, head, onMove, onLocked }) -> div.ini-tl
+ *     rows     [{ uid, label, key?, src? ('pmos'|'jira'), start, end ('YYYY-MM-DD'), progress (0..1), tone ('', ok, warn, bad, pm, muted),
+ *               cls ('grp'|'ini'|'ep'|'it'), drag? (a PMOS task id: the bar can be dragged), lock? (a Jira key: dates come from Jira),
+ *               open? () => void, tip? { t, p, st, o, src, jira, hint }, kids? [rows] }]
+ *     markers  [{ id, at, label, kind: 'release'|'milestone', open? }] drawn on their own row
+ *     defOpen  the uids open on the first draw; later draws keep what the PM opened and closed (state is kept per `key`)
+ *     onMove(taskId, days, uid)   a PMOS bar was dragged (or moved with the arrow keys) by whole days
+ *     onLocked(key)               a Jira bar was pressed and dragged, or moved with an arrow key
+ *   tlInit(node)    after the node is in the page: scroll so today sits near the left, end the grow-in
+ *   tlStill(key)    the next draw of that key keeps its scroll and does not animate (after a reschedule)
+ *
+ * Layout: rows are 24px (a board group 28px), the label column is 240px (132px under 760px), labels are 11px mono. The day width is
+ * --in-pd px (Week 22, Month 6, Quarter 2); a bar sits at --in-d0..--in-d1 days. Zoom eases the day width over 380 ms around the centre
+ * of the view. A row with children has a chevron that opens it (grid rows 0fr to 1fr) and its bars grow in. A press on the empty chart
+ * pans it (mouse). Pointer handlers are on the document (R28-15); every control is a button. Reduced motion turns the motion off.
+ */
+import { el } from './dom.js';
+import { btn, icon, geo, day, parseDay } from './c3-ini-ui.js';
+
+const DAY = 864e5;
+export const ZOOMS = [['week', 'Week', 22], ['month', 'Month', 6], ['quarter', 'Quarter', 2]];
+const ZPD = Object.fromEntries(ZOOMS.map(([k, , p]) => [k, p]));
+const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const TLS = new Map();      // key -> { zoom, open:Set, scroll, still }
+const INST = new WeakMap(); // .ini-tl node -> instance
+const reduced = () => { try { return matchMedia('(prefers-reduced-motion: reduce)').matches; } catch { return false; } };
+const dOf = (from, d) => Math.round((d - from) / DAY);
+const monthStart = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+export const tlRange = (today, back = 75, fwd = 230) => { const t = parseDay(today) || new Date(); return { from: monthStart(new Date(+t - back * DAY)), to: monthStart(new Date(+t + fwd * DAY)) }; };
+const stOf = (key, def) => { if (!TLS.has(key)) TLS.set(key, { zoom: 'month', open: new Set(def || []), scroll: null, still: false }); return TLS.get(key); };
+export const tlStill = (key) => { const s = TLS.get(key); if (s) s.still = true; };
+
+function ticks(from, days, zoom) {
+  const maj = []; const min = []; const end = new Date(+from + days * DAY);
+  for (let d = monthStart(from); d < end; d = new Date(d.getFullYear(), d.getMonth() + 1, 1)) {
+    const x = dOf(from, d); if (x < 0) continue;
+    if (zoom === 'quarter') { if (d.getMonth() % 3 === 0) maj.push([x, 'Q' + (d.getMonth() / 3 + 1) + ' ' + d.getFullYear()]); min.push([x, MON[d.getMonth()]]); }
+    else maj.push([x, MON[d.getMonth()] + ' ' + d.getFullYear()]);
+  }
+  if (zoom !== 'quarter') {
+    const m = new Date(from); m.setDate(m.getDate() + ((8 - m.getDay()) % 7));
+    for (let d = m; d < end; d = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 7)) min.push([dOf(from, d), zoom === 'week' ? 'Mon ' + d.getDate() : String(d.getDate())]);
+  }
+  return { maj, min };
+}
+const axis = (from, days, zoom) => { const { maj, min } = ticks(from, days, zoom); return [...maj.map(([x, l]) => geo(el('span', { class: 'ini-tlt mj' }, l), { '--in-d0': x })), ...min.map(([x, l]) => geo(el('span', { class: 'ini-tlt' }, l), { '--in-d0': x }))]; };
+const grid = (from, days, zoom) => { const { maj, min } = ticks(from, days, zoom); const seen = new Set(maj.map((m) => m[0])); return [...maj.map(([x]) => geo(el('i', { class: 'mj' }), { '--in-d0': x })), ...min.filter(([x]) => !seen.has(x)).map(([x]) => geo(el('i'), { '--in-d0': x }))]; };
+const anyRow = (rows, f) => rows.some((r) => r && (f(r) || anyRow(r.kids || [], f)));
+
+export function timeline({ key, rows, from, to, today, markers = [], defOpen, head = 'Initiative', onMove, onLocked }) {
+  const st = stOf(key, defOpen);
+  const days = dOf(from, to);
+  const T = parseDay(today) || new Date();
+  const anim = !st.still && !reduced();
+  const byUid = new Map();
+  let n = 0;
+  function rowNode(r, depth) {
+    byUid.set(r.uid, r);
+    const kids = (r.kids || []).filter(Boolean); const has = kids.length > 0; const open = has && st.open.has(r.uid);
+    const s = parseDay(r.start); const e = parseDay(r.end);
+    let bar = null;
+    if (s && e && !(e < from || s > to)) {
+      const d0 = Math.max(0, (s - from) / DAY); const d1 = Math.min(days, Math.max((e - from) / DAY, d0 + 0.8)); const p = Math.round((r.progress || 0) * 100);
+      const aria = (r.key ? r.key + ' ' : '') + r.label + ', ' + day(r.start) + ' to ' + day(r.end) + ', ' + p + '% done' + (r.drag ? '. Drag or use the arrow keys to move it' : r.lock ? '. Dates come from Jira' : '');
+      bar = geo(el('span', { class: 'ini-tlb ' + (r.cls || 'it') + ' ini-t-' + (r.tone || 'acc') + (r.drag ? ' pm' : '') + (r.lock ? ' jl' : ''), tabindex: '0', role: 'button', 'data-tlb': r.uid,
+        ...(r.drag ? { 'data-tldrag': r.drag } : {}), ...(r.lock ? { 'data-tllock': r.lock } : {}), 'data-s': r.start, 'data-e': r.end, 'aria-label': aria },
+      geo(el('i'), { '--in-w': p + '%' }), r.lock ? el('span', { class: 'lk' }, icon('lock', 'sm')) : null), { '--in-d0': d0.toFixed(2), '--in-d1': d1.toFixed(2), '--in-i': Math.min(n++, 40) });
+    }
+    const label = [r.key ? el('span', { class: 'ini-tlkey' }, r.key) : null,
+      r.src === 'pmos' ? el('span', { class: 'ini-tlsrc' }, 'PMOS') : r.src === 'jira' ? el('span', { class: 'ini-tlsrc j', title: 'From Jira' }, icon('jira', 'sm')) : null,
+      el('span', { class: 'ini-tlname' }, r.label)];
+    const lab = has
+      ? [btn({ class: 'ini-tlc', 'data-tltog': r.uid, 'aria-expanded': String(open), 'aria-label': (open ? 'Collapse ' : 'Expand ') + r.label, onclick: () => toggle(r.uid) }, icon('next', 'sm')),
+        btn({ class: 'ini-tlx', title: r.label, 'data-tltog': r.uid, onclick: () => toggle(r.uid) }, ...label),
+        r.open ? btn({ class: 'ini-tlo', 'aria-label': 'Open ' + r.label, title: 'Open', 'data-tlopen': r.uid, onclick: () => r.open() }, icon('next', 'sm')) : null]
+      : [el('span', { class: 'ini-tlc0' }), r.open ? btn({ class: 'ini-tlx', title: r.label, 'data-tlopen': r.uid, onclick: () => r.open() }, ...label) : el('span', { class: 'ini-tlx', title: r.label }, ...label)];
+    const out = [el('div', { class: 'ini-tlr ' + (r.cls || 'it'), 'data-tlrow': r.uid }, geo(el('div', { class: 'ini-tll' }, ...lab), { '--in-dep': depth }), el('div', { class: 'ini-tltr' }, bar))];
+    if (has) out.push(el('div', { class: 'ini-tlk' + (open ? ' open' : ''), 'data-tlkids': r.uid }, el('div', null, ...kids.flatMap((k) => rowNode(k, depth + 1)))));
+    return out;
+  }
+  const body = rows.flatMap((r) => rowNode(r, 0));
+  const mk = markers.filter((m) => { const d = parseDay(m.at); return d && d >= from && d <= to; });
+  const mrow = mk.length ? el('div', { class: 'ini-tlr mrk' }, geo(el('div', { class: 'ini-tll' }, el('span', { class: 'ini-tlc0' }), el('span', { class: 'ini-tlx' }, el('span', { class: 'ini-tlname dim' }, 'Releases, milestones'))), { '--in-dep': 0 }),
+    el('div', { class: 'ini-tltr' }, ...mk.map((m) => geo(btn({ class: 'ini-tlm ' + m.kind, 'data-tlm': m.id, 'aria-label': m.label + ', ' + day(m.at), title: m.label + ' · ' + day(m.at) + ' (lives on the Calendar)', onclick: () => (m.open ? m.open() : null) }), { '--in-d0': ((parseDay(m.at) - from) / DAY).toFixed(2) })))) : null;
+  const dT = (T - from) / DAY;
+  const zoomSeg = el('div', { class: 'seg ini-seg', role: 'group', 'aria-label': 'Zoom' }, ...ZOOMS.map(([k, l]) => btn({ 'aria-pressed': String(st.zoom === k), 'data-tlzoom': k, onclick: () => zoom(k) }, l)));
+  const ax = el('div', { class: 'ini-tltr ini-tlax' }, ...axis(from, days, st.zoom));
+  const gr = el('div', { class: 'ini-tlgrid', 'aria-hidden': 'true' }, ...grid(from, days, st.zoom));
+  const sc = el('div', { class: 'ini-tlsc', 'data-tlsc': '' }, el('div', { class: 'ini-tlin' },
+    gr,
+    dT >= 0 && dT <= days ? geo(el('div', { class: 'ini-tlnow', 'aria-hidden': 'true' }, el('b', null, 'Today')), { '--in-d0': dT.toFixed(2) }) : null,
+    el('div', { class: 'ini-tlr ini-tlhd' }, el('div', { class: 'ini-tll' }, el('span', { class: 'ini-tlname dim' }, head)), ax),
+    ...(body.length ? body : [el('div', { class: 'ini-tlr' }, el('div', { class: 'ini-tll' }, el('span', { class: 'ini-tlname dim' }, 'Nothing matches the filters.')), el('div', { class: 'ini-tltr' }))]),
+    mrow));
+  const tip = el('div', { class: 'ini-tip', role: 'tooltip', 'aria-hidden': 'true' });
+  const key2 = (cls) => el('i', { class: 'ini-tlkeyi ' + cls, 'aria-hidden': 'true' });
+  const legend = el('div', { class: 'pgl ini-pgl' }, el('span', { class: 'ini-fg' }, key2('now'), 'today'), el('span', null, key2('bar'), 'progress'),
+    anyRow(rows, (r) => r.lock) ? el('span', null, icon('lock', 'sm'), 'Jira: dates come from Jira') : null,
+    anyRow(rows, (r) => r.drag) ? el('span', null, key2('pm'), 'PMOS task: drag to reschedule') : null,
+    mk.length ? [el('span', null, key2('rel'), 'release'), el('span', null, key2('ms'), 'milestone')] : null,
+    el('span', null, 'drag the empty chart to pan'));
+  const node = geo(el('div', { class: 'ini-tl' + (anim ? ' anim' : ''), 'data-tl': key, 'data-ini': 'timeline' },
+    el('div', { class: 'ini-tlbar' }, zoomSeg, el('span', { class: 'chips2' },
+      btn({ class: 'pill', 'data-tltoday': '', onclick: () => goToday(true) }, icon('cal', 'sm'), 'Today'),
+      btn({ class: 'pill', 'data-tlall': '1', onclick: () => all(true) }, 'Expand all'),
+      btn({ class: 'pill', 'data-tlall': '0', onclick: () => all(false) }, 'Collapse all'))),
+    sc, tip, legend), { '--in-pd': ZPD[st.zoom], '--in-days': days });
+
+  const lw = () => { const l = node.querySelector('.ini-tll'); return l ? l.offsetWidth : 240; };
+  const pdNow = () => parseFloat(node.style.getPropertyValue('--in-pd')) || ZPD[st.zoom];
+  function goToday(smooth) {
+    const left = Math.max(0, dT * pdNow() - (sc.clientWidth - lw()) * 0.28);
+    if (smooth && !reduced() && sc.scrollTo) sc.scrollTo({ left, behavior: 'smooth' }); else sc.scrollLeft = left;
+  }
+  function zoom(z) {
+    if (st.zoom === z) return;
+    const p0 = ZPD[st.zoom]; const p1 = ZPD[z]; const view = sc.clientWidth - lw();
+    const center = (sc.scrollLeft + view / 2) / p0;
+    st.zoom = z;
+    zoomSeg.querySelectorAll('[data-tlzoom]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.tlzoom === z)));
+    node.classList.add('zooming');
+    const finish = () => {
+      geo(node, { '--in-pd': p1 }); sc.scrollLeft = center * p1 - view / 2; st.scroll = sc.scrollLeft;
+      ax.replaceChildren(...axis(from, days, z)); gr.replaceChildren(...grid(from, days, z));
+      node.classList.remove('zooming');
+    };
+    if (reduced()) { finish(); return; }
+    const t0 = performance.now(); const dur = 380;
+    const step = (now) => {
+      const k = Math.min(1, (now - t0) / dur); const e = 1 - Math.pow(1 - k, 3); const p = p0 + (p1 - p0) * e;
+      geo(node, { '--in-pd': p.toFixed(3) }); sc.scrollLeft = center * p - view / 2;
+      if (k < 1) requestAnimationFrame(step); else finish();
+    };
+    requestAnimationFrame(step);
+  }
+  function toggle(uid, force) {
+    const kids = node.querySelector('[data-tlkids="' + CSS.escape(uid) + '"]'); if (!kids) return;
+    const open = force != null ? force : !st.open.has(uid);
+    if (open) st.open.add(uid); else st.open.delete(uid);
+    kids.classList.toggle('open', open);
+    node.querySelectorAll('.ini-tlc[data-tltog="' + CSS.escape(uid) + '"]').forEach((b) => { b.setAttribute('aria-expanded', String(open)); b.setAttribute('aria-label', (open ? 'Collapse ' : 'Expand ') + ((byUid.get(uid) || {}).label || '')); });
+    if (open && !reduced()) {
+      kids.querySelectorAll(':scope > div > .ini-tlr .ini-tlb').forEach((b, k) => geo(b, { '--in-j': k }));
+      kids.classList.remove('grow'); void kids.offsetWidth; kids.classList.add('grow');
+      clearTimeout(kids._g); kids._g = setTimeout(() => kids.classList.remove('grow'), 900);
+    }
+  }
+  function all(open) { node.querySelectorAll('[data-tlkids]').forEach((k) => toggle(k.dataset.tlkids, open)); }
+  sc.addEventListener('scroll', () => { st.scroll = sc.scrollLeft; }, { passive: true });
+  INST.set(node, { key, st, byUid, tip, sc, from, onMove, onLocked, goToday, pd: pdNow });
+  return node;
+}
+
+/** After the node is in the page: the first scroll (today near the left, or where the PM left it), and the end of the grow-in. */
+export function tlInit(root) {
+  if (!root) return;
+  const nodes = root.classList && root.classList.contains('ini-tl') ? [root] : [...root.querySelectorAll('.ini-tl')];
+  for (const node of nodes) {
+    const I = INST.get(node); if (!I) continue;
+    if (I.st.still && I.st.scroll != null) I.sc.scrollLeft = I.st.scroll; else I.goToday(false);
+    I.st.still = false;
+    if (node.classList.contains('anim')) setTimeout(() => node.classList.remove('anim'), 1600);
+  }
+}
+
+/* ── the tooltip ── */
+function tipShow(bar, ev, nd, extra) {
+  const node = bar.closest('.ini-tl'); const I = node && INST.get(node); if (!I) return;
+  const r = I.byUid.get(bar.dataset.tlb) || {}; const t = r.tip || {};
+  const s = new Date(+parseDay(bar.dataset.s) + (nd || 0) * DAY); const e = new Date(+parseDay(bar.dataset.e) + (nd || 0) * DAY);
+  const iso = (d) => d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
+  const len = Math.max(1, Math.round((e - s) / DAY));
+  I.tip.replaceChildren(el('b', null, t.t || r.label || ''),
+    el('div', null, icon('cal', 'sm'), day(iso(s)) + ' to ' + day(iso(e)) + ' · ' + len + ' days', nd ? el('span', { class: 'ini-tlmv' }, (nd > 0 ? '+' : '') + nd + 'd') : null),
+    el('div', null, icon('up', 'sm'), (t.p || '0%') + ' done' + (t.st ? ' · ' + t.st : '')),
+    t.o ? el('div', null, icon('user', 'sm'), t.o) : null,
+    el('div', null, t.jira ? icon('lock', 'sm') : icon('init', 'sm'), t.src || ''),
+    el('div', { class: 'dim' }, extra || t.hint || ''));
+  const box = node.getBoundingClientRect(); const br = bar.getBoundingClientRect();
+  I.tip.classList.add('on'); I.tip.setAttribute('aria-hidden', 'false');
+  const w = I.tip.offsetWidth; const hh = I.tip.offsetHeight; const x = ev && ev.clientX ? ev.clientX : br.left + Math.min(br.width, 40);
+  let top = br.bottom - box.top + 8; if (br.bottom + hh + 12 > window.innerHeight && br.top - hh - 8 > box.top) top = br.top - box.top - hh - 8;
+  geo(I.tip, { '--in-x': Math.max(4, Math.min(box.width - w - 4, x - box.left + 10)) + 'px', '--in-y': top + 'px' });
+  node.querySelectorAll('.ini-tlr.hl').forEach((x2) => x2.classList.remove('hl')); const row = bar.closest('.ini-tlr'); if (row) row.classList.add('hl');
+}
+function tipHide(node) {
+  const I = node && INST.get(node); if (!I) return;
+  I.tip.classList.remove('on'); I.tip.setAttribute('aria-hidden', 'true');
+  node.querySelectorAll('.ini-tlr.hl').forEach((x) => x.classList.remove('hl'));
+}
+function openRow(bar) { const I = INST.get(bar.closest('.ini-tl')); const r = I && I.byUid.get(bar.dataset.tlb); if (r && r.open) r.open(); }
+
+/* ── document-level pointer and key handlers: drag a PMOS bar, nudge a Jira bar (locked), pan the chart ── */
+let TLD = null;
+function install() {
+  if (typeof document === 'undefined' || document.__iniTl) return;
+  document.__iniTl = true;
+  document.addEventListener('pointerdown', (e) => {
+    if (e.button !== 0) return;
+    const node = e.target.closest && e.target.closest('.ini-tl'); const I = node && INST.get(node); if (!I) return;
+    const bar = e.target.closest('.ini-tlb');
+    if (bar) {
+      TLD = { mode: 'bar', bar, node, I, x0: e.clientX, moved: false, nd: 0, pd: I.pd(), d0: parseFloat(bar.style.getPropertyValue('--in-d0')), d1: parseFloat(bar.style.getPropertyValue('--in-d1')) };
+      if (bar.dataset.tldrag) { try { bar.setPointerCapture(e.pointerId); } catch { /* not capturable */ } e.preventDefault(); }
+      return;
+    }
+    if (!e.target.closest('.ini-tltr') || e.target.closest('button') || e.pointerType !== 'mouse') return;
+    TLD = { mode: 'pan', node, I, x0: e.clientX, s0: I.sc.scrollLeft, moved: false };
+  });
+  document.addEventListener('pointermove', (e) => {
+    if (!TLD || TLD.mode === 'cancel') return;
+    const dx = e.clientX - TLD.x0;
+    if (!TLD.moved && Math.abs(dx) < 4) return;
+    TLD.moved = true;
+    if (TLD.mode === 'pan' || (!TLD.bar.dataset.tldrag && !TLD.bar.dataset.tllock)) {
+      if (TLD.mode === 'bar') { TLD.mode = 'pan'; TLD.s0 = TLD.I.sc.scrollLeft; }
+      TLD.I.sc.scrollLeft = TLD.s0 - dx; TLD.node.classList.add('panning'); tipHide(TLD.node); return;
+    }
+    const b = TLD.bar;
+    if (b.dataset.tldrag) {
+      const nd = Math.round(dx / TLD.pd); if (nd === TLD.nd && b.classList.contains('drag')) return;
+      TLD.nd = nd; b.classList.add('drag'); TLD.node.classList.add('dragging');
+      geo(b, { '--in-d0': (TLD.d0 + nd).toFixed(2), '--in-d1': (TLD.d1 + nd).toFixed(2) });
+      tipShow(b, e, nd, nd ? 'Release to reschedule. Esc cancels.' : 'Drag left or right');
+    } else if (!TLD.warned) {
+      TLD.warned = true; b.classList.remove('nope'); void b.offsetWidth; b.classList.add('nope');
+      tipShow(b, e, 0, 'Dates come from Jira. Change them in Jira.');
+    }
+  });
+  document.addEventListener('pointerup', () => {
+    if (!TLD) return;
+    const D = TLD; TLD = null;
+    D.node.classList.remove('panning', 'dragging');
+    if (D.mode === 'pan' || D.mode === 'cancel') return;
+    const b = D.bar; b.classList.remove('drag');
+    if (!D.moved) { tipHide(D.node); openRow(b); return; }
+    if (b.dataset.tldrag) { if (D.nd && D.I.onMove) { tlStill(D.I.key); D.I.onMove(b.dataset.tldrag, D.nd, b.dataset.tlb); } else tipHide(D.node); return; }
+    if (b.dataset.tllock) { setTimeout(() => b.classList.remove('nope'), 500); if (D.I.onLocked) D.I.onLocked(b.dataset.tllock); }
+  });
+  document.addEventListener('pointercancel', () => {
+    if (TLD && TLD.bar && TLD.mode === 'bar') { geo(TLD.bar, { '--in-d0': TLD.d0, '--in-d1': TLD.d1 }); TLD.bar.classList.remove('drag'); }
+    if (TLD) TLD.node.classList.remove('panning', 'dragging');
+    TLD = null;
+  });
+  document.addEventListener('keydown', (e) => {
+    const t = e.target;
+    if (t && t.classList && t.classList.contains('ini-tlb')) {
+      const I = INST.get(t.closest('.ini-tl')); if (!I) return;
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openRow(t); return; }
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.preventDefault();
+        if (t.dataset.tldrag && I.onMove) { tlStill(I.key); I.onMove(t.dataset.tldrag, e.key === 'ArrowRight' ? 1 : -1, t.dataset.tlb); return; }
+        if (t.dataset.tllock && I.onLocked) I.onLocked(t.dataset.tllock);
+      }
+      return;
+    }
+    if (e.key === 'Escape' && TLD && TLD.mode === 'bar' && TLD.bar.dataset.tldrag) {
+      geo(TLD.bar, { '--in-d0': TLD.d0.toFixed(2), '--in-d1': TLD.d1.toFixed(2) }); TLD.bar.classList.remove('drag'); tipHide(TLD.node);
+      TLD = { mode: 'cancel', node: TLD.node, moved: true };
+    }
+  });
+  const hover = (e) => { if (TLD) return; const b = e.target.closest && e.target.closest('.ini-tlb'); if (b) tipShow(b, e); };
+  document.addEventListener('mouseover', hover);
+  document.addEventListener('mousemove', hover);
+  document.addEventListener('mouseout', (e) => {
+    if (TLD) return;
+    const b = e.target.closest && e.target.closest('.ini-tlb'); if (!b) return;
+    if (e.relatedTarget && b.contains(e.relatedTarget)) return;
+    tipHide(b.closest('.ini-tl'));
+  });
+  document.addEventListener('focusin', (e) => { const b = e.target.closest && e.target.closest('.ini-tlb'); if (b) tipShow(b, null); });
+  document.addEventListener('focusout', (e) => { const b = e.target.closest && e.target.closest('.ini-tlb'); if (b) tipHide(b.closest('.ini-tl')); });
+}
+install();

package/workspace/public/pm/c3-ini-ui.js

@@ -0,0 +1,229 @@
+/* pm/c3-ini-ui.js — the console3 builders the Initiatives page draws with (mockup v5, src/pages/34-initiatives.js: nr, crumbs, lh,
+ * segTabs, cols, UI.sect, UI.kv, UI.empty, statusChip, healthSt, ownerChip, stageChip, stepsMini, progChip, hbr). Every tab module of
+ * the page (c3-initiatives.js and the c3-ib-*.js / c3-ii-tabs.js files) imports them from here, so the markup is the mockup's
+ * everywhere: `.calwrap > .calbar`, `.lh`, `.seg`, `.brief.sbb > .bcols > .bcol`, `.card.sect > .sh2`, `ul.list > li.nrow`, `.chips2`,
+ * `.chip2`, `.st`, `.tag`, `.pill`, `.chgl`, `.hbs > .hbr`, `.fold`.
+ *
+ * Rules the builders keep (the conformance gate, R28): every control is a <button> from primitives.js button() (btn() below adds the
+ * console3 class it is drawn as, and `ini-b`, the reset that takes the primitive's own height and nowrap off); a colour, a width or a
+ * position is a class or a `--in-…` custom property set with geo(), never an inline style; icons come from the console3 sprite
+ * (c3ic) or, for the three it lacks (gear, grip, the Jira mark), from svgIcon(). Nothing here reads or writes the server.
+ *
+ *   btn(attrs, ...kids)            a button; attrs.class is the console3 class (pill, chip2 lk, ib sm, tt, ...), attrs.onclick its press
+ *   pbtn(variant, label, icon, attrs)  a primitive button drawn as the primitive (primary, outline, ghost), small
+ *   sect({ ic, title, count, right, attrs }, ...body)   section.card.sect > div.sh2 > h2 (icon, title, bdg.g count) + right, then body
+ *   card({ ic, title, sub, attrs }, ...body)            section.card > h3 (icon, title, dim sub), then body
+ *   nrow({ ic, hot, tone, title, onOpen, openLabel, sub, chips, after, xp, right, attrs, key })   li.nrow (ki, nb > tt + sub + chips +
+ *                                  after + xp, acts); an `xp` (a node or an array) makes the row expand in place (c3-expand.js)
+ *   list(rows) · empty(text) · emptyLi(text) · crumbs(parts, right) · lh(ic, title, sub, right) · segTabs(items, cur, onPick, label)
+ *   cols(left, right) · hbs(rows) · hbr(label, value, frac, tone) · kv(pairs) · chgl(items) · chgli(ic, text, tag, tone)
+ *   chip(...kids) · tag(...kids) · st(tone, ic, text) · note(...kids) · lbl(text) · sw(cat) · stageChip(name, cat) · statusChip(s)
+ *   healthSt(h) · ownerChip(o) · stepsMini(workflow, stage, label) · progChip(p, tone) · miniBar(p, tone) · dateChip(a, b, late)
+ *   openMenu(anchor, { label, items: [{ label, kids, onPick, disabled, current, attrs } | { group }] })  a popover menu, closed by
+ *                                  Escape, a press outside or a pick; arrow keys move between its items
+ *   day(iso) '12 Oct' · dayLong(iso) 'Mon 12 Oct 2026' · ago(iso, today) · daysBetween(a, b) · plural(n, one, many) · trunc(s, n)
+ */
+import { el, frag } from './dom.js';
+import { button } from './primitives.js';
+import { c3ic } from './pm-work-view.js';
+import { makeXp, attachExpand } from './c3-expand.js';
+
+export const CATS = ['Discover', 'Plan', 'Do', 'Learn'];
+export const PORTFOLIO = 'Portfolio';
+
+/* ── icons the console3 sprite does not have: a 24-unit lucide path ── */
+const SVG = 'http://www.w3.org/2000/svg';
+export function svgIcon(paths, cls) {
+  const s = document.createElementNS(SVG, 'svg');
+  s.setAttribute('class', 'ic' + (cls ? ' ' + cls : '')); s.setAttribute('viewBox', '0 0 24 24'); s.setAttribute('aria-hidden', 'true');
+  for (const d of paths) { const p = document.createElementNS(SVG, 'path'); p.setAttribute('d', d); s.appendChild(p); }
+  return s;
+}
+export const GEAR = ['M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z', 'M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'];
+export const GRIP = ['M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01'];
+export const JIRA = ['M12 3l9 9-9 9-9-9z', 'M12 8l4 4-4 4-4-4z'];
+/** An icon by name: the sprite's, or one of the three drawn here. */
+export function icon(name, cls) {
+  if (name === 'settings') return svgIcon(GEAR, cls);
+  if (name === 'grip') return svgIcon(GRIP, cls);
+  if (name === 'jira') return svgIcon(JIRA, cls);
+  return c3ic(name, cls);
+}
+
+/* ── controls ── */
+/** A native button drawn as a console3 control. attrs: class (the console3 class), onclick, and any attribute. */
+export function btn(attrs, ...kids) {
+  const { onclick, class: cls, disabled, ...rest } = attrs || {};
+  const b = button({ variant: 'ghost', onClick: onclick, disabled: !!disabled, attrs: { ...rest, class: 'ini-b' + (cls ? ' ' + cls : '') } });
+  b.replaceChildren(frag(...kids.filter((k) => k != null && k !== false)));
+  return b;
+}
+/** The mockup's UI.btn: a primitive button, small, drawn as the primitive. */
+export function pbtn(variant, label, ic, attrs) {
+  const { onclick, disabled, ...rest } = attrs || {};
+  const b = button({ label, variant, size: 'sm', onClick: onclick, disabled: !!disabled, attrs: rest });
+  if (ic) b.prepend(icon(ic, 'sm'));
+  return b;
+}
+export const pill = (attrs, ...kids) => btn({ ...attrs, class: 'pill' + (attrs && attrs.class ? ' ' + attrs.class : '') }, ...kids);
+export const lk = (attrs, ...kids) => btn({ ...attrs, class: 'chip2 lk' + (attrs && attrs.class ? ' ' + attrs.class : '') }, ...kids);
+export const ib = (label, ic, attrs) => btn({ title: label, 'aria-label': label, ...(attrs || {}), class: 'ib sm' + (attrs && attrs.class ? ' ' + attrs.class : '') }, typeof ic === 'string' ? icon(ic, 'sm') : ic);
+/** Set run-time geometry (a `--in-…` or `--tl-…` custom property) on a node; the rules in c3-initiatives.css read them. */
+export function geo(node, vars) {
+  for (const k of Object.keys(vars)) node.style.setProperty(k, String(vars[k]));
+  return node;
+}
+
+/* ── text bits ── */
+export const plural = (n, one, many) => n + ' ' + (n === 1 ? one : many || one + 's');
+export const trunc = (s, n) => { s = String(s || ''); return s.length > n ? s.slice(0, n - 1) + '…' : s; };
+export const chip = (...kids) => el('span', { class: 'chip2' }, ...kids);
+export const chipA = (attrs, ...kids) => el('span', { class: 'chip2', ...(attrs || {}) }, ...kids);
+export const tag = (...kids) => el('span', { class: 'tag' }, ...kids);
+export const st = (tone, ic, text, attrs) => el('span', { class: 'st ' + tone, ...(attrs || {}) }, ic ? icon(ic, 'sm') : null, text);
+export const note = (...kids) => el('div', { class: 'dim ini-note' }, ...kids);
+export const noteA = (attrs, ...kids) => el('div', { class: 'dim ini-note', ...(attrs || {}) }, ...kids);
+export const lbl = (text) => el('div', { class: 'dim mono ini-lbl' }, text);
+export const mono = (text) => el('span', { class: 'dim mono ini-meta' }, text);
+export const sw = (cat) => el('i', { class: 'ini-sw ini-c', 'data-cat': cat || 'Plan', 'aria-hidden': 'true' });
+
+/* ── dates ── */
+const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const WD = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+/** '2026-10-14' (or an ISO time) -> a local Date at midnight, or null. */
+export function parseDay(iso) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(iso || ''));
+  return m ? new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3])) : null;
+}
+export const isoOf = (d) => d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
+export const day = (iso) => { const d = parseDay(iso); return d ? d.getDate() + ' ' + MON[d.getMonth()] : ''; };
+export const dayLong = (iso) => { const d = parseDay(iso); return d ? WD[d.getDay()] + ' ' + d.getDate() + ' ' + MON[d.getMonth()] + ' ' + d.getFullYear() : ''; };
+export const daysBetween = (a, b) => { const x = parseDay(a); const y = parseDay(b); return x && y ? Math.round((y - x) / 864e5) : null; };
+/** 'today', 'yesterday', '3 days ago', or the day for a future date. */
+export function ago(iso, today) {
+  const n = daysBetween(today, iso);
+  if (n == null) return '';
+  return n === 0 ? 'today' : n === -1 ? 'yesterday' : n < 0 ? -n + ' days ago' : day(iso);
+}
+export { MON };
+
+/* ── chips ── */
+export const statusChip = (s) => (s === 'at risk' ? st('warn', 'alert', 'At risk') : s === 'late' ? st('bad', 'clock', 'Late') : s === 'done' ? st('ok', 'check', 'Done') : chip('On track'));
+export const HEALTH = { ok: 'On track', warn: 'Needs attention', bad: 'Off track' };
+export const healthSt = (h) => (h === 'ok' ? st('ok', 'check', 'On track') : h === 'warn' ? st('warn', 'alert', 'Needs attention') : h === 'bad' ? st('bad', 'alert', 'Off track') : chip('No health yet'));
+export const ownerText = (o) => (o ? o : el('span', { class: 'dim' }, 'No owner'));
+export const ownerChip = (o) => chip(icon('user', 'sm'), ownerText(o));
+export const stageChip = (name, cat) => chip(sw(cat), name || 'No stage');
+export const toneOf = (status) => (status === 'late' ? 'bad' : status === 'at risk' ? 'warn' : status === 'done' ? 'ok' : '');
+/** A 44px progress bar inline with a chip. */
+export function miniBar(p, tone) {
+  const u = geo(el('u'), { '--in-w': Math.max(2, Math.round((Number(p) || 0) * 100)) + '%' });
+  return el('span', { class: 'ini-mini ini-t-' + (tone || 'ok'), 'aria-hidden': 'true' }, u);
+}
+export const progChip = (p, tone) => chip(miniBar(p, tone), Math.round((Number(p) || 0) * 100) + '%');
+/** One dot per stage of the initiative's own workflow: past, current, to come, and "Stage k/n". */
+export function stepsMini(workflow, stage, label) {
+  const wf = workflow || [];
+  const k = wf.findIndex((s) => s.name === stage);
+  return el('span', { class: 'chip2 ini-steps', title: (label ? label + ' workflow: ' : '') + wf.map((s) => s.name).join(' > ') },
+    ...wf.map((s, n) => el('i', { class: 'ini-dot ini-c' + (n < k ? ' d' : n === k ? ' c' : ''), 'data-cat': s.cat, 'aria-hidden': 'true' })),
+    el('span', null, (stage || 'No stage') + ' ', el('span', { class: 'dim' }, (k + 1) + '/' + wf.length)));
+}
+export function dateChip(a, b, late) {
+  return el('span', { class: 'chip2' + (late ? ' ini-late' : '') }, icon('cal', 'sm'), a && b ? day(a) + ' to ' + day(b) : day(a || b) || 'No dates yet');
+}
+
+/* ── frames ── */
+export const list = (rows, attrs) => el('ul', { class: 'list', ...(attrs || {}) }, ...rows);
+export const empty = (text, attrs) => el('div', { class: 'fold', ...(attrs || {}) }, icon('check', 'sm'), text);
+export const emptyLi = (text, attrs) => el('li', { class: 'fold', ...(attrs || {}) }, icon('check', 'sm'), text);
+export function sect(o, ...body) {
+  const { ic, title, count, right, attrs } = o || {};
+  return el('section', { ...(attrs || {}), class: 'card sect' + (attrs && attrs.class ? ' ' + attrs.class : '') },
+    el('div', { class: 'sh2' }, el('h2', null, ic ? icon(ic, 'sm') : null, title, count != null ? [' ', el('span', { class: 'bdg g' }, String(count))] : null), right || null),
+    ...body.filter((x) => x != null));
+}
+export function card(o, ...body) {
+  const { ic, title, sub, attrs } = o || {};
+  return el('section', { ...(attrs || {}), class: 'card' + (attrs && attrs.class ? ' ' + attrs.class : '') },
+    el('h3', null, ic ? icon(ic, 'sm') : null, title, sub ? [' ', el('span', { class: 'dim ini-sub' }, sub)] : null), ...body.filter((x) => x != null));
+}
+/**
+ * The console3 list row. o.title is text (or a node); o.onOpen makes it a button (`.tt`); o.xp a panel that opens in place.
+ * o.chips and o.right are arrays of nodes. o.attrs go on the li.
+ */
+export function nrow(o) {
+  const t = o.onOpen
+    ? btn({ class: 'tt', onclick: o.onOpen, ...(o.openLabel ? { 'aria-label': o.openLabel } : {}), ...(o.titleAttrs || {}) }, o.title)
+    : el('span', { class: 'tt', ...(o.titleAttrs || {}) }, o.title);
+  const xp = o.xp ? makeXp(o.xp) : null;
+  const li = el('li', { class: 'nrow' + (o.cls ? ' ' + o.cls : ''), ...(o.attrs || {}) },
+    el('span', { class: 'ki' + (o.hot ? ' hot' : '') + (o.tone ? ' ini-k-' + o.tone : '') }, icon(o.ic || 'doc')),
+    el('div', { class: 'nb' }, t, o.sub ? note(o.sub) : null, o.chips && o.chips.length ? el('div', { class: 'chips' }, ...o.chips.filter(Boolean)) : null, o.after || null, xp),
+    o.right && o.right.filter(Boolean).length ? el('div', { class: 'acts' }, ...o.right.filter(Boolean)) : el('span'));
+  if (xp) attachExpand(li, xp, { key: o.key });
+  return li;
+}
+export function crumbs(parts, right) {
+  const kids = [];
+  parts.forEach((p, k) => {
+    if (k) kids.push(icon('next', 'sm'));
+    kids.push(p.go ? lk({ onclick: p.go, ...(p.attrs || {}) }, p.ic ? icon(p.ic, 'sm') : null, p.t) : el('span', { class: 'chip2', 'aria-current': 'page', ...(p.attrs || {}) }, p.ic ? icon(p.ic, 'sm') : null, p.t));
+  });
+  return el('div', { class: 'calbar' }, el('nav', { class: 'chips2', 'aria-label': 'Breadcrumb', 'data-ini': 'crumbs' }, ...kids), right || null);
+}
+export function lh(ic, title, sub, right, attrs) {
+  return el('div', { class: 'lh', ...(attrs || {}) }, el('span', { class: 'ki' }, icon(ic)),
+    el('div', { class: 'ini-lhm' }, el('b', null, title), el('div', { class: 'dim' }, sub)), right ? el('div', { class: 'chips2' }, ...[].concat(right)) : null);
+}
+/** items: [[id, label, icon, extra node?, attrs?]]. The pressed one has aria-pressed=true. */
+export function segTabs(items, cur, onPick, label, attrs) {
+  return el('div', { class: 'calbar' }, el('div', { class: 'seg ini-seg', role: 'group', 'aria-label': label, ...(attrs || {}) },
+    ...items.map(([k, l, ic, extra, a]) => btn({ 'aria-pressed': String(k === cur), 'data-ini-tab': k, onclick: () => onPick(k), ...(a || {}) }, ic ? icon(ic, 'sm') : null, l, extra || null))));
+}
+export const cols = (left, right) => el('div', { class: 'brief sbb' }, el('div', { class: 'bcols' },
+  el('div', { class: 'bcol l' }, ...[].concat(left).filter(Boolean)), el('div', { class: 'bcol r' }, ...[].concat(right).filter(Boolean))));
+export const hbs = (rows) => el('div', { class: 'hbs' }, ...rows);
+/** tone: ok, warn, bad, acc, muted (the colour of the bar). */
+export function hbr(label, value, frac, tone, attrs) {
+  const u = geo(el('u'), { '--in-w': Math.max(2, Math.min(100, Math.round((Number(frac) || 0) * 100))) + '%' });
+  return el('div', { class: 'hbr ini-t-' + (tone || 'acc'), ...(attrs || {}) }, el('div', { class: 'l' }, el('span', null, label), el('i', null, String(value))), el('div', { class: 'tk' }, u));
+}
+export function kv(pairs, attrs) {
+  return el('dl', { class: 'ini-kv', ...(attrs || {}) }, ...pairs.filter(Boolean).flatMap(([k, v]) => [el('dt', null, k), el('dd', null, v)]));
+}
+export const chgl = (items, attrs) => el('ul', { class: 'chgl', ...(attrs || {}) }, ...items);
+export const chgli = (ic, text, tg, tone, attrs) => el('li', { class: tone || '', ...(attrs || {}) }, icon(ic, 'sm'), el('span', null, text), tg ? el('span', { class: 'tag' }, tg) : el('span'));
+
+/* ── the popover menu (Move to, More tools) ── */
+let menuOpen = null;
+export function closeMenu() {
+  if (!menuOpen) return;
+  const m = menuOpen; menuOpen = null;
+  document.removeEventListener('pointerdown', m.off, true); document.removeEventListener('keydown', m.key, true);
+  m.node.remove(); m.anchor.setAttribute('aria-expanded', 'false');
+}
+export function openMenu(anchor, { label, items }) {
+  if (menuOpen) { const was = menuOpen.anchor; closeMenu(); if (was === anchor) return; }
+  const node = el('div', { class: 'ini-menu', role: 'menu', 'aria-label': label, 'data-ini': 'menu' },
+    ...items.map((it) => (it.group != null ? el('div', { class: 'ini-mlbl' }, it.group)
+      : btn({ role: 'menuitem', class: 'ini-mi', disabled: !!it.disabled, ...(it.current ? { 'aria-current': 'true' } : {}), ...(it.attrs || {}), onclick: () => { closeMenu(); it.onPick(); } }, ...[].concat(it.kids || it.label)))));
+  const host = anchor.closest('.c3pop') || anchor.closest('.c3') || document.body;
+  host.appendChild(node);
+  const r = anchor.getBoundingClientRect();
+  const w = Math.min(300, window.innerWidth - 16);
+  geo(node, { '--in-x': Math.max(8, Math.min(window.innerWidth - w - 8, r.right - w)) + 'px', '--in-y': Math.min(window.innerHeight - 60, r.bottom + 6) + 'px' });
+  const itemsOf = () => [...node.querySelectorAll('[role="menuitem"]:not(:disabled)')];
+  const off = (e) => { if (!node.contains(e.target) && !anchor.contains(e.target)) closeMenu(); };
+  const key = (e) => {
+    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeMenu(); anchor.focus(); return; }
+    const l = itemsOf(); const at = l.indexOf(document.activeElement);
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); const n = l.length; if (n) l[((at < 0 ? -1 : at) + (e.key === 'ArrowDown' ? 1 : -1) + n) % n].focus(); }
+    if (e.key === 'Tab') closeMenu();
+  };
+  menuOpen = { node, anchor, off, key };
+  anchor.setAttribute('aria-expanded', 'true');
+  document.addEventListener('pointerdown', off, true); document.addEventListener('keydown', key, true);
+  const f = itemsOf()[0]; if (f) f.focus();
+  return node;
+}