create-pmos 0.124.0 → 0.126.0

package/workspace/public/pm/c3-case.js

@@ -0,0 +1,185 @@
+/* pm/c3-case.js — the console3 case file, as a primitive (console3.html: caseHtml line 2275, the case builders dcase 2271 and
+ * CARDC/NEEDC 2213 on, confirmCase 2297, the claim labels C3.LAB at line 4524).
+ *
+ *   normalizeCase(model)            -> the canonical case (pure; accepts the mockup's field names and the descriptive ones)
+ *   slideFor(caseModel, pickedId)   -> { enabled, reason, label } for the slide under the case (pure)
+ *   renderCase(model, opts)         -> the `.case` element; opts: { picked, onPick(id, option), onConfirm({ option, hash, case }),
+ *                                      outbox: boolean, onGo(go) }
+ *
+ * What the mockup's case file holds, top to bottom, and what this draws:
+ *   quote      `blockquote.qd`  the exact text a draft would send (optional, `quote` / `pre`)
+ *   situation  `p.sit`          one or two sentences: what is going on and why it needs a decision
+ *   move       `.c3ag`          "Suggested move: ..." (optional, `move`)
+ *   evidence   `ul.chgl`        one `li` per fact: icon, the claim, and a tag (the source, or a fact/estimate/assumption/reported
+ *                               label; tone ok / warn / bad colours the icon)
+ *   options    `.opts`          buttons `.opt`, the recommended one first with `.rec`, its confidence ("Recommended · 82%") and a
+ *                               `.conf` bar; each carries its effects (`.fx`: icon + text, tone). One is pressed (aria-pressed,
+ *                               role=radio): the recommended one until the person picks another.
+ *   confirm    `.c3hold`        R3: where the main pointer is fine, the slide below is replaced by a compact button: press and hold 600 ms
+ *                               (a ring fills) for an act that cannot be undone, one click for one that can, Enter then Confirm from
+ *                               the keyboard (c3-swipe.js mountHold, holdMode). `opts.fine` forces the choice; the default asks matchMedia.
+ *   slide      `.slt`           the slide-to-confirm (slide-confirm.js mountSlide). "Slide to choose this instead" and the grey
+ *                               `.alt` look when the pick is not the recommended one. It is bound to the picked option: its
+ *                               confirm hands back `hash` = `<case id>|<option id>`, the content the person saw.
+ *   footer     `.cft`           "Unsure: ...", "If you wait: ...", "Why shown: ...", and a link chip to the record
+ * Gate: an option or case marked `outward` (it sends something to a person) cannot be confirmed here unless `opts.outbox` is true
+ * (an outbox is connected). The slide is then drawn disabled (`.slt.off`) with the reason under it; nothing is sent.
+ * Built with el(); every string from data goes in as a text node.
+ */
+import { el } from './dom.js';
+import { c3ic } from './pm-work-view.js';
+import { mountSlide, disposeSlide } from './slide-confirm.js';
+import { mountHold, holdMode, finePointer } from './c3-swipe.js';
+
+/** The claim labels of the mockup (C3.LAB): [icon, tag, tone]. */
+export const LABELS = {
+  fact: ['check', 'fact', 'ok'], est: ['clock', 'estimate', 'warn'], ass: ['alert', 'assumption', 'warn'],
+  rep: ['user', 'reported', ''], unl: ['alert', 'unlabelled', 'bad'],
+};
+const TONES = new Set(['', 'ok', 'warn', 'bad']);
+const tone = (t) => (TONES.has(t) ? t : '');
+const str = (v) => (v === null || v === undefined ? '' : String(v));
+
+function pct(v) {
+  const n = Number(v);
+  if (!Number.isFinite(n) || n <= 0) return 0;
+  return Math.max(0, Math.min(100, Math.round(n > 0 && n <= 1 && !Number.isInteger(n) ? n * 100 : n)));
+}
+
+function evidenceOf(item) {
+  if (Array.isArray(item)) {                       // the mockup's [icon, text, tag, tone]
+    const [icon, text, tag, tn] = item;
+    return { icon: icon || 'info', text: str(text), tag: str(tag), tone: tone(tn), label: '' };
+  }
+  const o = item || {};
+  const L = o.label && LABELS[o.label];
+  const parts = [L ? L[1] : str(o.label), str(o.source || o.tag)].filter(Boolean);
+  return { icon: o.icon || (L ? L[0] : 'info'), text: str(o.text || o.claim), tag: parts.join(' · '), tone: tone(o.tone !== undefined ? o.tone : (L ? L[2] : '')), label: str(o.label) };
+}
+
+function effectOf(fx) {
+  if (Array.isArray(fx)) return { icon: fx[0] || 'info', text: str(fx[1]), tone: tone(fx[2]) };
+  const o = fx || {};
+  return { icon: o.icon || 'info', text: str(o.text), tone: tone(o.tone) };
+}
+
+function optionOf(o, i) {
+  const x = o || {};
+  return { id: str(x.id !== undefined ? x.id : 'o' + i), label: str(x.l !== undefined ? x.l : x.label), rec: !!(x.rec || x.recommended),
+    effects: (x.fx || x.effects || []).map(effectOf), outward: !!x.outward, irreversible: !!x.irreversible, confidence: x.conf !== undefined || x.confidence !== undefined ? pct(x.conf !== undefined ? x.conf : x.confidence) : null };
+}
+
+/** The canonical case. Exactly one option is the recommended one: the first marked, else the first (the mockup's recId). */
+export function normalizeCase(model) {
+  const m = model || {};
+  const opts = (m.opts || m.options || []).map(optionOf);
+  const rec = opts.find((o) => o.rec) || opts[0] || null;
+  opts.forEach((o) => { o.rec = o === rec; });
+  const sorted = rec ? [rec, ...opts.filter((o) => o !== rec)] : [];       // the recommended one leads, as caseHtml sorts
+  const go = m.go ? (Array.isArray(m.go) ? { action: m.go[0], key: m.go[1], label: str(m.go[2]) } : { action: m.go.action || '', key: m.go.key || '', label: str(m.go.label), href: m.go.href }) : null;
+  const mv = m.move || m.suggestedMove;
+  return {
+    id: str(m.id || m.key || ''),
+    tc: str(m.tc || m.tone || 'var(--acc)'),
+    quote: str(m.quote || m.pre),
+    situation: str(m.sit !== undefined ? m.sit : (m.situation !== undefined ? m.situation : '')),
+    move: mv ? str(typeof mv === 'object' ? mv.label : mv) : '',
+    evidence: (m.chg || m.evidence || []).map(evidenceOf),
+    options: sorted,
+    recId: rec ? rec.id : '',
+    confidence: pct(m.conf !== undefined ? m.conf : m.confidence !== undefined ? m.confidence : (rec && rec.confidence !== null ? rec.confidence : 0)),
+    unsure: str(m.unsure),
+    ifYouWait: str(m.ign !== undefined ? m.ign : m.ifYouWait),
+    why: str(m.why !== undefined ? m.why : m.whyShown),
+    cta: str(m.cta || 'Slide to confirm'),
+    go,
+    outward: !!m.outward,
+    outboxReason: str(m.outboxReason),
+  };
+}
+
+/** The slide under the case for the picked option. Disabled when the action goes outside and no outbox is connected. */
+export function slideFor(c, pickedId, { outbox = false } = {}) {
+  const opt = c.options.find((o) => o.id === pickedId) || c.options.find((o) => o.id === c.recId) || null;
+  if (!opt) return { enabled: false, reason: '', label: '', option: null, none: true };
+  const isRec = opt.id === c.recId;
+  const out = opt.outward || c.outward;
+  const label = isRec ? c.cta : 'Slide to choose this instead';
+  if (out && !outbox) return { enabled: false, option: opt, label, reason: c.outboxReason || 'This sends something outside. No outbox is connected, so it stays a draft.' };
+  return { enabled: true, option: opt, label, reason: '' };
+}
+
+const fxList = (a) => el('div', { class: 'fx' }, ...a.map((f) => el('span', { class: f.tone }, c3ic(f.icon, 'sm'), f.text)));
+
+export function renderCase(model, opts = {}) {
+  const c = normalizeCase(model);
+  const outbox = !!opts.outbox;
+  let picked = c.options.some((o) => o.id === opts.picked) ? opts.picked : c.recId;
+  const root = el('div', { class: 'case', 'data-case': c.id || null, style: '--tc:' + c.tc });
+  const optsHost = c.options.length ? el('div', { class: 'opts', role: 'radiogroup', 'aria-label': 'Options' }) : null;
+  const slideHost = c.options.length ? el('div', { class: 'c3slide' }) : null;
+
+  const drawOptions = () => {
+    optsHost.replaceChildren(...c.options.map((o) => {
+      const on = o.id === picked;
+      return el('button', { type: 'button', class: 'opt' + (o.rec ? ' rec' : ''), role: 'radio', 'aria-checked': String(on), 'aria-pressed': String(on), 'data-opt': o.id,
+        onclick: () => pick(o.id) },
+      el('span', { class: 'pk' }, c3ic('check', 'sm')),
+      el('span', { class: 'rk', title: 'Confidence from the sources listed above' }, o.rec ? [c3ic('spark', 'sm'), 'Recommended · ' + c.confidence + '%'] : null),
+      el('b', null, o.label),
+      fxList(o.effects),
+      o.rec ? el('div', { class: 'conf' }, el('i', { style: 'width:' + c.confidence + '%' })) : null);
+    }));
+  };
+  let disposeHold = null;
+  const drawSlide = () => {
+    disposeSlide(slideHost);
+    if (disposeHold) { disposeHold(); disposeHold = null; }
+    slideHost.replaceChildren();
+    const s = slideFor(c, picked, { outbox });
+    if (s.none) return;
+    const fine = opts.fine !== undefined ? !!opts.fine : finePointer();
+    if (s.enabled && fine) {
+      const trk = el('div', { class: 'c3confirm', 'data-case-slt': c.id || null });
+      slideHost.append(trk);
+      disposeHold = mountHold(trk, { label: s.option.label || s.label, mode: holdMode(s.option, c), hash: c.id + '|' + s.option.id, alt: s.option.id !== c.recId,
+        onConfirm: (hash) => { if (opts.onConfirm) opts.onConfirm({ option: s.option, hash, case: c }); } });
+    } else if (s.enabled) {
+      mountSlide(slideHost, { label: s.label, hash: c.id + '|' + s.option.id, onConfirm: (hash) => { if (opts.onConfirm) opts.onConfirm({ option: s.option, hash, case: c }); } });
+      const trk = slideHost.querySelector('.slt');
+      if (trk && s.option.id !== c.recId) trk.classList.add('alt');
+      if (trk && trk.dataset) trk.dataset.caseSlt = c.id;
+    } else {
+      slideHost.append(
+        el('div', { class: 'slt off', 'aria-disabled': 'true', 'data-case-slt': c.id || null, style: '--tc:var(--muted-foreground)' },
+          el('span', { class: 'lb' }, s.label + ' ›››'),
+          el('button', { type: 'button', class: 'th', disabled: true, 'aria-label': 'Confirm: ' + s.option.label + '. Not available: ' + s.reason }, c3ic('lock'))),
+        el('div', { class: 'slt-why', role: 'note' }, c3ic('lock', 'sm'), s.reason));
+    }
+  };
+  function pick(id) {
+    if (!c.options.some((o) => o.id === id)) return;
+    picked = id;
+    drawOptions(); drawSlide();
+    if (opts.onPick) opts.onPick(id, c.options.find((o) => o.id === id));
+  }
+
+  if (c.quote) root.append(el('blockquote', { class: 'qd' }, c.quote));
+  root.append(el('p', { class: 'sit' }, c.situation));
+  if (c.move) root.append(el('div', { class: 'c3ag' }, el('div', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, c3ic('spark', 'sm'), ' Suggested move: ' + c.move)));
+  if (c.evidence.length) {
+    root.append(el('ul', { class: 'chgl', role: 'list' }, ...c.evidence.map((r) => el('li', { class: r.tone }, c3ic(r.icon, 'sm'), el('span', null, r.text), r.tag ? el('span', { class: 'tag' }, r.tag) : null))));
+  }
+  if (optsHost) { drawOptions(); drawSlide(); root.append(optsHost, slideHost); }
+  const goBtn = c.go ? el('button', { type: 'button', class: 'chip2 lk', onclick: () => { if (opts.onGo) opts.onGo(c.go); } }, c3ic('next', 'sm'), c.go.label) : null;
+  if (c.unsure || c.ifYouWait || c.why || goBtn) {
+    root.append(el('div', { class: 'cft' },
+      c.unsure ? el('span', null, c3ic('info', 'sm'), 'Unsure: ' + c.unsure) : null,
+      c.ifYouWait ? el('span', null, c3ic('alert', 'sm'), 'If you wait: ' + c.ifYouWait) : null,
+      c.why ? el('span', null, c3ic('eye', 'sm'), 'Why shown: ' + c.why) : null,
+      goBtn));
+  }
+  /* a handle for the caller: read or set the pick, and tear the slide down when the case leaves the page */
+  root.c3case = { get picked() { return picked; }, pick, model: c, dispose() { if (slideHost) disposeSlide(slideHost); if (disposeHold) { disposeHold(); disposeHold = null; } } };
+  return root;
+}

package/workspace/public/pm/c3-daypart.js

@@ -0,0 +1,176 @@
+/* pm/c3-daypart.js — the time of day for console3: the day part from the clock, the sun and moon on a daylight arc, and the gate that
+ * lets a new day part re-rank the Briefing only when the page is idle. No network and no geolocation prompt: the place is the browser's
+ * time zone (longitude, 15 degrees an hour) and one default latitude. The pure functions take the clock and the zone as arguments, so
+ * workspace/c3-daypart.test.js checks them without a browser. The DOM part (mountDaypart, applyDayPart) only runs in a page. */
+
+export const DAYPARTS = ['morning', 'midday', 'afternoon', 'evening', 'night'];
+/* Default latitude, degrees north, used when the page has no better idea. Mid-latitude, so day length is neither extreme. */
+export const DEFAULT_LATITUDE = 45;
+export const RECHECK_MS = 5 * 60 * 1000;
+export const IDLE_MS = 60 * 1000;
+
+/** The day part of a clock hour: morning 5 to 11, midday 11 to 14, afternoon 14 to 17, evening 17 to 21, night 21 to 5. */
+export function dayPartOf(date) {
+  const d = date instanceof Date ? date : new Date(date);
+  const h = d.getHours();
+  return h >= 5 && h < 11 ? 'morning' : h >= 11 && h < 14 ? 'midday' : h >= 14 && h < 17 ? 'afternoon' : h >= 17 && h < 21 ? 'evening' : 'night';
+}
+
+/** East longitude in degrees from a Date.getTimezoneOffset() value (minutes, positive west of UTC). Rough: a zone is 15 degrees wide. */
+export function longitudeFromOffset(offsetMinutes) {
+  const o = Number(offsetMinutes);
+  return isFinite(o) ? Math.max(-180, Math.min(180, -o / 4)) : 0;
+}
+
+const RAD = Math.PI / 180;
+const DAY_MS = 86400000;
+
+/** Local calendar day [y, m, d] of an instant in a zone given as getTimezoneOffset minutes. */
+function localYmd(ms, offsetMinutes) {
+  const d = new Date(ms - offsetMinutes * 60000);
+  return [d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()];
+}
+
+/** Sunrise and sunset (ms since epoch) of the local day that holds `ms`. `polar` is 'day' or 'night' when the sun never sets or rises. */
+export function sunTimes(ms, lat, lon, offsetMinutes) {
+  const [y, m, d] = localYmd(ms, offsetMinutes);
+  const jdNoon = Date.UTC(y, m, d, 12) / DAY_MS + 2440587.5;   // the sunrise equation (NOAA): n counts days from J2000
+  const n = Math.round(jdNoon - 2451545.0 + 0.0008);
+  const jStar = n - lon / 360;
+  const M = (357.5291 + 0.98560028 * jStar) % 360;
+  const C = 1.9148 * Math.sin(M * RAD) + 0.02 * Math.sin(2 * M * RAD) + 0.0003 * Math.sin(3 * M * RAD);
+  const lam = (M + C + 180 + 102.9372) % 360;
+  const jTransit = 2451545.0 + jStar + 0.0053 * Math.sin(M * RAD) - 0.0069 * Math.sin(2 * lam * RAD);
+  const sinDec = Math.sin(lam * RAD) * Math.sin(23.4397 * RAD);
+  const cosDec = Math.cos(Math.asin(sinDec));
+  const cosW = (Math.sin(-0.833 * RAD) - Math.sin(lat * RAD) * sinDec) / (Math.cos(lat * RAD) * cosDec);
+  const toMs = (jd) => Math.round((jd - 2440587.5) * DAY_MS);
+  if (cosW > 1) return { sunrise: null, sunset: null, polar: 'night', transit: toMs(jTransit) };
+  if (cosW < -1) return { sunrise: null, sunset: null, polar: 'day', transit: toMs(jTransit) };
+  const w = Math.acos(cosW) / RAD;
+  return { sunrise: toMs(jTransit - w / 360), sunset: toMs(jTransit + w / 360), polar: null, transit: toMs(jTransit) };
+}
+
+/** Where the sun or moon is now. body 'sun' while the sun is up, else 'moon'; t runs 0 to 1 along the arc of that body (sun: rise to set;
+ * moon: sunset to the next sunrise). In polar day or night t follows the clock around the transit. */
+export function arcState(ms, lat, lon, offsetMinutes) {
+  const today = sunTimes(ms, lat, lon, offsetMinutes);
+  const out = { sunrise: today.sunrise, sunset: today.sunset, polar: today.polar, body: 'sun', t: 0.5, up: true };
+  if (today.polar) {
+    out.up = today.polar === 'day'; out.body = out.up ? 'sun' : 'moon';
+    out.t = Math.max(0, Math.min(1, ((ms - today.transit) / DAY_MS) + 0.5));
+    return out;
+  }
+  if (ms >= today.sunrise && ms <= today.sunset) {
+    out.t = (ms - today.sunrise) / (today.sunset - today.sunrise);
+    return out;
+  }
+  out.body = 'moon'; out.up = false;
+  if (ms < today.sunrise) {
+    const prev = sunTimes(ms - DAY_MS, lat, lon, offsetMinutes);
+    const from = prev.sunset == null ? today.sunrise - 12 * 3600000 : prev.sunset;
+    out.t = Math.max(0, Math.min(1, (ms - from) / (today.sunrise - from)));
+  } else {
+    const next = sunTimes(ms + DAY_MS, lat, lon, offsetMinutes);
+    const to = next.sunrise == null ? today.sunset + 12 * 3600000 : next.sunrise;
+    out.t = Math.max(0, Math.min(1, (ms - today.sunset) / (to - today.sunset)));
+  }
+  return out;
+}
+
+/** Point on a half-ellipse arc from (pad, h - pad) over the top to (w - pad, h - pad). t 0 to 1. */
+export function arcPoint(t, w, h, pad) {
+  const p = pad == null ? 4 : pad;
+  const a = Math.PI * (1 - Math.max(0, Math.min(1, t)));
+  const rx = (w - 2 * p) / 2;
+  return { x: +(w / 2 + rx * Math.cos(a)).toFixed(2), y: +(h - p - (h - 2 * p) * Math.sin(a)).toFixed(2) };
+}
+
+/** "06:42" in the zone given as getTimezoneOffset minutes. */
+export function hhmm(ms, offsetMinutes) {
+  if (ms == null) return '--:--';
+  const d = new Date(ms - offsetMinutes * 60000);
+  return String(d.getUTCHours()).padStart(2, '0') + ':' + String(d.getUTCMinutes()).padStart(2, '0');
+}
+
+/** The words for the strip, short sentences. */
+export function stripLabel(st, offsetMinutes) {
+  if (st.polar === 'day') return 'The sun stays up all day.';
+  if (st.polar === 'night') return 'The sun stays down all day.';
+  return 'Sunrise ' + hhmm(st.sunrise, offsetMinutes) + '. Sunset ' + hhmm(st.sunset, offsetMinutes) + '.';
+}
+
+/* ── the idle gate: a new day part re-ranks the Briefing only when nobody is reading ── */
+
+/** Pure core. `part(ms)` gives the part for that time. `busy()` says a card is open. Call tick(ms) on a timer and touch(ms) on any
+ * pointer or key activity. `apply(part)` runs once per change, only when idle for idleMs and not busy. A part that arrives while
+ * busy waits (pending) and a later tick applies it. */
+export function createIdleGate({ current, part, busy, apply, idleMs = IDLE_MS }) {
+  let shown = current; let pending = null; let last = -Infinity;
+  return {
+    touch(ms) { last = ms; },
+    tick(ms) {
+      const p = part(ms);
+      pending = p !== shown ? p : null;
+      if (pending && !(busy && busy()) && ms - last >= idleMs) { shown = pending; pending = null; apply(shown); return true; }
+      return false;
+    },
+    get shown() { return shown; },
+    get pending() { return pending; },
+  };
+}
+
+/** Browser wiring of the gate: listens for activity on the document, checks every 5 minutes. Returns { dispose }. */
+export function watchIdle(gate) {
+  const touch = () => gate.touch(Date.now());
+  const evs = ['pointerdown', 'pointermove', 'keydown', 'wheel', 'touchstart'];
+  evs.forEach((e) => document.addEventListener(e, touch, { passive: true, capture: true }));
+  gate.touch(Date.now());
+  const timer = setInterval(() => gate.tick(Date.now()), RECHECK_MS);
+  return { dispose() { clearInterval(timer); evs.forEach((e) => document.removeEventListener(e, touch, { capture: true })); } };
+}
+
+/* ── DOM (browser only) ── */
+
+/** Set data-daypart on an element. */
+export function applyDayPart(elm, date) {
+  const p = dayPartOf(date || new Date());
+  if (elm && elm.getAttribute('data-daypart') !== p) elm.setAttribute('data-daypart', p);
+  return p;
+}
+
+const SVGNS = 'http://www.w3.org/2000/svg';
+const sv = (tag, attrs) => { const e = document.createElementNS(SVGNS, tag); for (const k in attrs) e.setAttribute(k, attrs[k]); return e; };
+
+/** The daylight strip: a small arc with the sun or moon and the sunrise and sunset times. About 22px tall. Appended to `host`.
+ * It sets data-daypart on `root` now and every 5 minutes. Returns { dispose }. */
+export function mountDaypart(root, host, opts) {
+  const o = opts || {};
+  const lat = o.lat == null ? DEFAULT_LATITUDE : o.lat;
+  const W = 56; const H = 18;
+  const arc = sv('path', { class: 'dl-arc', d: 'M4 14 A24 12 0 0 1 52 14', fill: 'none' });
+  const base = sv('line', { class: 'dl-base', x1: 2, y1: 14.5, x2: 54, y2: 14.5 });
+  const body = sv('circle', { class: 'dl-body', r: 3, cx: 4, cy: 14 });
+  const svg = sv('svg', { class: 'dl-svg', viewBox: '0 0 ' + W + ' ' + H, width: W, height: H, 'aria-hidden': 'true', focusable: 'false' });
+  svg.append(base, arc, body);
+  const txt = document.createElement('span'); txt.className = 'dl-txt';
+  const strip = document.createElement('div');
+  strip.className = 'c3pg-daylight'; strip.setAttribute('data-c3pg', 'daylight'); strip.setAttribute('role', 'img');
+  strip.append(svg, txt);
+  host.append(strip);
+  const draw = () => {
+    const now = new Date(); const off = now.getTimezoneOffset();
+    applyDayPart(root, now);
+    const st = arcState(now.getTime(), lat, longitudeFromOffset(off), off);
+    const pt = arcPoint(st.t, W, H - 2, 4);
+    body.setAttribute('cx', pt.x); body.setAttribute('cy', pt.y);
+    strip.setAttribute('data-body', st.body);
+    const label = stripLabel(st, off);
+    txt.textContent = label;
+    strip.setAttribute('aria-label', (st.up ? 'Day. ' : 'Night. ') + label);
+    strip.title = (st.up ? 'The sun is up. ' : 'The moon is up. ') + label + ' Worked out on this device from the date and the time zone.';
+  };
+  draw();
+  const timer = setInterval(draw, RECHECK_MS);
+  return { dispose() { clearInterval(timer); strip.remove(); } };
+}