create-pmos 0.125.0 → 0.127.0

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(); } };
+}

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

@@ -12,6 +12,7 @@
  * The workspace id is ?ws= (default: the first of GET /api/workspaces). The views read some routes without a ws, so a GET to /api/
  * that names none gets the page's ws added (see withWs). No dialog is used. Presses are the views' own. */
 import { el } from './dom.js';
+import { row } from './primitives.js';
 import { pmGet } from './http.js';
 import { ensureC3Css, c3ic, c3Phone, mountPmWork } from './pm-work-view.js';
 import { mountBriefing, showCard, flipBack } from './briefing-deck.js';
@@ -22,7 +23,8 @@ import { mountReleases } from './releases-view.js';
 import { mountReportFamilies } from './report-families-view.js';
 import { mountOutbox } from './outbox-panel.js';
 import { createDock } from './c3-dock.js';
-import { belowLine, reviewSection, handledRow, trustCard, footLine, needRow, rowApi, BX, toast, setNeedsTitle, hooks as briefHooks } from './c3-brief.js';
+import { belowLine, reviewSection, handledRow, trustCard, footLine, needRow, rowApi, BX, toast, setNeedsTitle, caseFile, hooks as briefHooks } from './c3-brief.js';
+import { makeXp, attachExpand } from './c3-expand.js';
 import { stopCard } from './c3-misc-panels.js';
 import { openSheet } from './c3-sheet.js';
 import { planNode, setPlanScope, dueCard, crossLinks, newInitLine, portfolioCard, readQuarter, mockPulse } from './c3-plan.js';
@@ -33,6 +35,7 @@ import { ic } from './c3-terminal-icons.js';
 import { mount as mountTickets, badge as ticketsBadge } from './c3-tickets.js';
 import { mount as mountDocs, badge as docsBadge } from './c3-docs.js';
 import { mount as mountSignals, badge as signalsBadge } from './c3-signals.js';
+import { mountDaypart } from './c3-daypart.js';
 import { mountTicker } from './shell-ticker.js';
 import { mountBell, openBellList } from './shell-bell.js';
 import { onBriefing, loadBriefing } from './shell-ticker.js';
@@ -143,7 +146,7 @@ const WHYS = [
   [10, 'Gestures', 'Drag a row right to finish it, left for later. The two glyphs at the edge show both; the bright one is what the agent suggests. At rest the page has almost no buttons. Keys: e, n, a, r, j, k.'],
   [11, 'Depth', 'Elevation means priority. Raised layers are things to act on. Flat layers are things to know. Glass floats above the page because it stays while you scroll.'],
   [12, 'Two columns', 'The left column is what you do. The right column is what you need to know. On a phone they merge, with the lens right after the cards.'],
-  [13, 'Part of the day', 'The page reads differently as the day goes: Plan, Unblock, Close, Reflect. It follows the clock, and the icons let you preview another part. The same signals are re-ranked, not replaced.'],
+  [13, 'Part of the day', 'The page reads differently as the day goes: Plan, Unblock, Close, Reflect. It follows the clock. A new part takes over only when you pause. The same signals are re-ranked, not replaced.'],
   [14, 'Phone: one screen', 'No scrolling on the phone. A running line and the bell carry what just arrived. The four tiles open popups for the lists, so the page itself stays still. Audio is optional: the speaker reads the top three cards aloud for when your hands are busy.'],
 ];
 const WHY_REGIONS = { 1: '[data-c3pg="deck-host"]', 13: '.stance', 3: '[data-c3pg="needs"]', 5: '[data-c3pg="review-host"] > *', 6: '[data-c3pg="handled-host"] > *', 7: '[data-c3pg="cal-host"]', 8: '[data-c3pg="pulse"]', 9: '[data-c3pg="trust-host"] > *' };
@@ -259,7 +262,8 @@ function needsList() {
     last = b;
     const inc = !!S.incident;
     const needs = b && Array.isArray(b.needs) && b.needs.length ? b.needs.filter((n) => !BX.gone[n.key] && (!inc || n.hard)) : null;
-    const key = needs ? needs.map((n) => n.key + n.headline) : ((b && b.cards) || []).map((c) => (c.key || '') + c.headline);
+    const own = !needs && b && Array.isArray(b.own_needs) ? b.own_needs.filter((n) => n && !BX.gone[n.key]) : [];   // the PM's own overdue and due-today items: overdue first, above the engine's cards
+    const key = needs ? needs.map((n) => n.key + n.headline) : own.map((n) => n.key + n.headline).concat(((b && b.cards) || []).map((c) => (c.key || '') + c.headline));
     if (needs && S.pinNeed) { const at = needs.findIndex((n) => n.key === S.pinNeed); if (at > 0) needs.unshift(...needs.splice(at, 1)); }   // a need the banner or the bell named rides to the top of the list: shown, not folded
     const g = JSON.stringify([key, inc, !!(b && b.kept_out), S.pinNeed || '']);
     if (g === sig) return; sig = g;
@@ -274,12 +278,15 @@ function needsList() {
     }
     const cards = ((b && b.cards) || []).map(cardView);
     quick.remove();
-    list.replaceChildren(...(cards.length ? cards.map((v, i) => {
+    const ownRows = (inc ? own.filter((n) => n.overdue) : own).map((n, i) => needRow(n, i, ctx));
+    const cardRows = cards.map((v, i) => {
       const T = TAG_STYLE[v.tag] || TAG_STYLE['Just in'];
-      return needRow({ key: v.key || String(i), headline: v.headline, kind: v.tag, icon: T.icon, color: T.color, time: v.deadline && v.deadline.text ? v.deadline.text : null, src: v.tag, view: v }, i, ctx);
-    }) : [el('li', { class: 'fold' }, c3ic('check', 'sm'), 'Nothing needs you.')]));
+      return needRow({ key: v.key || String(i), headline: v.headline, kind: v.tag, icon: T.icon, color: T.color, time: v.deadline && v.deadline.text ? v.deadline.text : null, src: v.tag, view: v }, i + ownRows.length, ctx);
+    });
+    const all = ownRows.concat(cardRows);
+    list.replaceChildren(...(all.length ? all : [el('li', { class: 'fold' }, c3ic('check', 'sm'), 'Nothing needs you.')]));
     extra.replaceChildren();
-    count.textContent = String(cards.length);
+    count.textContent = String(all.length);
   };
   S.refreshNeeds = () => { sig = ''; if (last) fill(last); };
   S.needsFill = fill;
@@ -290,6 +297,33 @@ function needsList() {
 
 /* portfolio pulse: the Calendar's own gantt rows (GET /api/calendar-views, quarter) as one status bar and a row per initiative */
 const PST = { 'on time': ['ok', 'On time', 'var(--success)'], 'at risk': ['warn', 'At risk', 'var(--warning)'], delayed: ['bad', 'Delayed', 'var(--destructive)'], overdue: ['bad', 'Overdue', 'var(--destructive)'], 'no plan': ['', 'No plan', 'var(--muted-foreground)'] };
+const PST_CLS = { 'on time': 'pst-ok', 'at risk': 'pst-warn', delayed: 'pst-bad', overdue: 'pst-bad', 'no plan': 'pst-none' };
+
+/* A pulse row opens in place, like a Needs you row: the same c3-expand panel and the same case component. It never changes the tab. "Open initiative" inside the case is the only way out. */
+const PULSE_OPEN = new Set();
+function pulseCase(g) {
+  const f = (g.forecast && (g.forecast.end || g.forecast.start)) || null; const p = g.promised || null;
+  const ev = [];
+  if (p) ev.push(['clock', 'Promised ' + p, '', 'ok']);
+  if (f) ev.push(['clock', 'Forecast ' + f, '', g.slip_days > 0 ? 'warn' : 'ok']);
+  if (g.slip_days > 0) ev.push(['alert', 'Slips ' + g.slip_days + ' d past the promise.', '', 'warn']);
+  const why = (g.pulse && g.pulse.why) || (p ? 'Forecast ' + (f || 'not set') + ' vs promised ' + p + '.' : 'No promised date' + (f ? '; forecast ' + f : '') + '.');
+  return caseFile({ id: 'pulse:' + g.id, sit: why, chg: ev, go: ['goinit', g.id, 'Open initiative'] });
+}
+function inlineRows(list, rows, watch) {
+  const byId = new Map(rows.map((g) => [String(g.id), g]));
+  const enhance = () => list.querySelectorAll('[data-c3pg-prow]').forEach((btn) => {
+    if (btn.hasAttribute('data-expand')) return;
+    const g = byId.get(btn.getAttribute('data-c3pg-prow')); if (!g) return;
+    const id = String(g.id); const xp = makeXp(); let built = false;
+    (btn.closest('.prow') || btn).after(xp); btn.setAttribute('data-a', 'pulsexp'); btn.setAttribute('aria-label', 'Show details: ' + (g.title || g.id));
+    attachExpand(btn, xp, { key: 'pulse-' + id, initial: PULSE_OPEN.has(id), onToggle: (on) => {
+      if (on) { PULSE_OPEN.add(id); if (!built) { built = true; xp.firstChild.append(pulseCase(g)); } } else PULSE_OPEN.delete(id);
+    } });
+  });
+  enhance();
+  if (watch) new MutationObserver(enhance).observe(list, { childList: true });
+}
 
 function pulse() {
   const body = el('div', null, el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, 'Reading the initiatives.'));
@@ -299,7 +333,7 @@ function pulse() {
   const draw = (rows, err) => {
     if (err) { body.replaceChildren(el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)', role: 'status' }, 'The initiatives could not be read: ' + err)); return; }
     if (!rows.length) { body.replaceChildren(el('div', { class: 'fold' }, c3ic('moon', 'sm'), 'No initiative has a promised date yet, so there is nothing to compare with the forecast.')); return; }
-    if (rows.some((g) => g.pulse)) { body.replaceChildren(...mockPulse(rows, S.today, () => showTab('init', true))); return; }   // demo: the mockup's pulse (its own colours, reasons and mini timelines)
+    if (rows.some((g) => g.pulse)) { const parts = mockPulse(rows, S.today, null); body.replaceChildren(...parts); inlineRows(parts[1], rows, true); return; }   // demo: the mockup's pulse (its own colours, reasons and mini timelines)
     const noPlan = rows.filter((g) => g.status === 'no plan').length;
     rows = rows.filter((g) => g.status !== 'no plan');
     if (!rows.length) { body.replaceChildren(el('div', { class: 'fold' }, c3ic('moon', 'sm'), 'No initiative has a promised date yet, so there is nothing to compare with the forecast.'), noPlan ? el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, noPlan + ' initiatives have no plan date.') : null); return; }
@@ -311,12 +345,14 @@ function pulse() {
     const rowEl = (g) => {
       const k = PST[g.status] ? g.status : 'no plan'; const f = end(g.forecast); const p = g.promised || null;
       const why = p ? 'Forecast ' + (f || 'not set') + ' vs promised ' + p : 'No promised date' + (f ? '; forecast ' + f : '');
-      return el('button', { type: 'button', class: 'prow', 'data-c3pg-prow': g.id, 'data-a': 'goinit', 'aria-label': 'Open the initiatives: ' + (g.title || g.id), onclick: () => showTab('init', true) },
-        el('span', { class: 'dotc ' + PST[k][0] }),
-        el('span', { style: 'min-width:0' }, el('b', { style: 'font-size:var(--fs-3)' }, g.title || g.id), el('div', { class: 'dim', style: 'font-size:var(--fs-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis' }, why)),
-        el('span', { class: 'mono', style: 'font-size:var(--fs-2);color:' + PST[k][2] }, PST[k][1] + (g.slip_days > 0 ? ' +' + g.slip_days + ' d' : '')));
+      const label = 'Show details: ' + (g.title || g.id);
+      return row({ title: g.title || g.id, meta: [why], lead: [el('span', { class: 'dotc ' + PST[k][0] })],
+        trail: [el('span', { class: 'mono pst ' + PST_CLS[k] }, PST[k][1] + (g.slip_days > 0 ? ' +' + g.slip_days + ' d' : ''))],
+        onOpen: () => {}, openLabel: label, compact: true, attrs: { class: 'prow' },
+        openAttrs: { 'data-a': 'pulsexp', 'data-c3pg-prow': g.id, 'aria-label': label } });
     };
-    body.replaceChildren(bar, el('div', null, ...rows.slice(0, 8).map(rowEl)), rows.length > 8 ? el('div', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, '+' + (rows.length - 8) + ' more in the Calendar tab') : null, noPlan ? el('div', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, noPlan + ' more have no plan date.') : null);
+    const list = el('div', null, ...rows.slice(0, 8).map(rowEl)); inlineRows(list, rows, false);
+    body.replaceChildren(bar, list, rows.length > 8 ? el('div', { class: 'dim mono pnote' }, '+' + (rows.length - 8) + ' more in the Calendar tab') : null, noPlan ? el('div', { class: 'dim mono pnote' }, noPlan + ' more have no plan date.') : null);
   };
   readQuarter().then((j) => {
     if (!j || j.ok === false) draw([], (j && j.error) || 'unreadable'); else { S.today = j.today || ''; draw(j.gantt || []); }
@@ -617,6 +653,7 @@ async function boot() {
   const main = el('div', { class: 'c3main' }, header(), S.tickHost, tabBar(), S.pageView);
   S.grid = el('div', { class: 'c3grid' }, main, ...dock());
   root.replaceChildren(S.grid);
+  mountDaypart(root, root.querySelector('.c3top'));
 
   S.dock.setWorkspaces(S.workspaces, S.ws);
   mountBell(S.bellHost, { go: (_, t) => goTarget(t) });

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

@@ -15,7 +15,13 @@
  * threshold only. The row carries tabindex=0, data-swipe, and an aria-description naming both actions.
  *
  * Pure parts (Node-testable): swipeStep, swipeEnd, revealOf, keyAction, SWIPE.
+ *
+ * R3 (console3 quick fixes): the confirm control of a case file. On a fine pointer the long slide gives way to a compact button
+ * (mountHold): an act that cannot be undone needs a press and hold of 600 ms with a ring that fills; an act that can be undone is one
+ * click; from the keyboard, Enter opens a Confirm step for both. On touch the slide stays (slide-confirm.js).
+ * Pure parts: HOLD, holdMode, holdProgress, finePointer.
  */
+import { button } from './primitives.js';
 export const SWIPE = { threshold: 90, lock: 8, cancelY: 12, suppressMs: 80, tracking: 0.55 };
 
 /** One pointer-move. state: null | { x, y, on, dx }. Returns the next state (null = the gesture is cancelled: it is a scroll). */
@@ -136,3 +142,89 @@ export function attachSwipe(el, opts = {}) {
     el.removeAttribute('data-swipe'); el.removeAttribute('aria-description');
   };
 }
+
+/* ── R3: the compact confirm button for a fine pointer ──────────────────────────────────────────────────────────────────────── */
+export const HOLD = { ms: 600 };
+
+/** 'hold' for an act that cannot be undone (it sends something outside, or the option says so), 'click' for one the Undo toast reverses. */
+export function holdMode(option, caseModel) {
+  const o = option || {}; const c = caseModel || {};
+  return o.irreversible || o.outward || c.outward ? 'hold' : 'click';
+}
+
+/** How much of the ring is filled after `elapsed` ms of holding: 0 to 1. */
+export function holdProgress(elapsed, ms = HOLD.ms) {
+  const e = Number(elapsed);
+  if (!(e > 0)) return 0;
+  return Math.min(1, e / ms);
+}
+
+/** True where the main pointer is fine (a mouse or a trackpad): the compact button replaces the slide. */
+export function finePointer(mm) {
+  const f = mm || (typeof matchMedia === 'function' ? matchMedia : null);
+  try { return !!(f && f('(pointer: fine)').matches); } catch { return false; }
+}
+
+const SVGNS = 'http://www.w3.org/2000/svg';
+const node = (tag, attrs, ...kids) => {
+  const n = document.createElement(tag);
+  for (const k of Object.keys(attrs || {})) if (attrs[k] !== null && attrs[k] !== undefined) n.setAttribute(k, attrs[k]);
+  for (const c of kids) if (c) n.append(c);
+  return n;
+};
+function ringIcon(iconName) {
+  const svg = document.createElementNS(SVGNS, 'svg');
+  svg.setAttribute('class', 'hr'); svg.setAttribute('viewBox', '0 0 26 26'); svg.setAttribute('aria-hidden', 'true');
+  for (const cls of ['tk', 'fl']) {
+    const c = document.createElementNS(SVGNS, 'circle');
+    c.setAttribute('class', cls); c.setAttribute('cx', '13'); c.setAttribute('cy', '13'); c.setAttribute('r', '10');
+    svg.appendChild(c);
+  }
+  const g = document.createElementNS(SVGNS, 'svg');
+  g.setAttribute('class', 'ic'); g.setAttribute('x', '7'); g.setAttribute('y', '7'); g.setAttribute('width', '12'); g.setAttribute('height', '12');
+  const u = document.createElementNS(SVGNS, 'use'); u.setAttribute('href', '#c3i-' + iconName); g.appendChild(u);
+  svg.appendChild(g);
+  return svg;
+}
+
+/** Draw the compact confirm into host. opts: { label, mode: 'hold' | 'click', hash, alt, onConfirm(hash) }. Returns a dispose function.
+ *  onConfirm fires once. A pointer hold of HOLD.ms (mode hold) or a pointer click (mode click) confirms; Enter or Space opens a
+ *  Confirm step first, in both modes. Escape or Cancel closes the step. */
+export function mountHold(host, { label = 'Confirm', mode = 'click', hash = null, alt = false, onConfirm } = {}) {
+  host.replaceChildren();
+  const root = node('div', { class: 'c3hold', 'data-confirm-mode': mode });
+  const btn = button({ label, variant: 'outline', onClick: (e) => {
+    if (e.detail === 0) return;                  // a key made this click: the key path has its own step
+    if (mode === 'click') fire();
+  }, attrs: { class: 'hb' + (alt ? ' alt' : ''), 'data-hold': mode,
+    'aria-label': label + (mode === 'hold' ? '. Press and hold, or press Enter and confirm.' : '. Click, or press Enter and confirm.'),
+    onPointerDown: (e) => start(e), onPointerUp: () => stop(), onPointerLeave: () => stop(), onPointerCancel: () => stop() } });
+  btn.prepend(ringIcon(mode === 'hold' ? 'lock' : 'check'));
+  const hint = node('span', { class: 'hint', 'aria-live': 'polite' }, document.createTextNode(mode === 'hold' ? 'Hold to confirm.' : ''));
+  root.append(btn, hint);
+  host.appendChild(root);
+
+  let fired = false; let timer = null; let stepOpen = false;
+  const fire = () => { if (fired) return; fired = true; clearTimer(); root.classList.add('done'); btn.disabled = true; try { if (typeof onConfirm === 'function') onConfirm(hash); } catch { /* the caller reports its own errors */ } };
+  function clearTimer() { if (timer) { clearTimeout(timer); timer = null; } }
+  const stop = () => { clearTimer(); btn.classList.remove('holding'); };
+  const start = (e) => {
+    if (fired || stepOpen || (e.button !== undefined && e.button > 0)) return;
+    if (mode === 'hold') { btn.classList.add('holding'); timer = setTimeout(() => { btn.classList.remove('holding'); fire(); }, HOLD.ms); }
+  };
+  const openStep = () => {
+    if (fired || stepOpen) return;
+    stepOpen = true; stop();
+    const close = () => { stepOpen = false; q.remove(); btn.hidden = false; hint.hidden = false; btn.focus(); };
+    const yes = button({ label: 'Confirm', onClick: fire, attrs: { class: 'pill', 'data-confirm': 'yes' } });
+    const no = button({ label: 'Cancel', onClick: close, attrs: { class: 'pill', 'data-confirm': 'no' } });
+    const q = node('div', { class: 'cq', role: 'group', 'aria-label': 'Confirm ' + label }, document.createTextNode(label + '?'), yes, no);
+    btn.hidden = true; hint.hidden = true; root.appendChild(q);
+    q.addEventListener('keydown', (e) => { if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(); } });
+    yes.focus();
+  };
+  btn.addEventListener('contextmenu', (e) => { if (mode === 'hold') e.preventDefault(); });
+  btn.addEventListener('keydown', (e) => { if ((e.key === 'Enter' || e.key === ' ') && !e.repeat) { e.preventDefault(); openStep(); } });
+  btn.addEventListener('keyup', (e) => { if (e.key === ' ') e.preventDefault(); });
+  return function dispose() { stop(); fired = true; host.replaceChildren(); };
+}

package/workspace/public/pm/calendar-views.js

@@ -697,7 +697,7 @@ function stageNode(host, r) {
 const PULSEK = { red: 'bad', delayed: 'bad', overdue: 'bad', amber: 'warn', 'at risk': 'warn', green: 'ok', 'on time': 'ok', park: '', 'no plan': '' };
 let pulseOn = false;
 function pulseA11y(root) {
-  root.querySelectorAll('[data-c3pg-prow]').forEach((p) => { if (!p.hasAttribute('role')) { p.setAttribute('role', 'button'); p.tabIndex = 0; p.title = 'Open the initiative'; } });
+  root.querySelectorAll('[data-c3pg-prow]').forEach((p) => { if (!p.hasAttribute('role')) { p.setAttribute('role', 'button'); p.tabIndex = 0; p.title = 'Show details'; } });
   root.querySelectorAll('.pbs > span').forEach((s) => { if (!s.hasAttribute('role')) { s.setAttribute('role', 'button'); s.tabIndex = 0; s.setAttribute('aria-pressed', 'false'); } });
 }
 function pulseFilter(seg) {
@@ -705,19 +705,18 @@ function pulseFilter(seg) {
   const on = seg.getAttribute('aria-pressed') !== 'true';
   bar.querySelectorAll(':scope > span').forEach((s) => { s.setAttribute('aria-pressed', String(on && s === seg)); s.style.opacity = on && s !== seg ? '.28' : ''; });
   const box = bar.closest('[data-c3pg="pulse"]');
-  box.querySelectorAll('[data-c3pg-prow]').forEach((p) => { const d = p.querySelector('.dotc'); const k = d ? (d.classList.contains('bad') ? 'bad' : d.classList.contains('warn') ? 'warn' : d.classList.contains('ok') ? 'ok' : '') : ''; p.hidden = on && want !== undefined && k !== want; });
+  box.querySelectorAll('[data-c3pg-prow]').forEach((p) => { const d = p.querySelector('.dotc'); const k = d ? (d.classList.contains('bad') ? 'bad' : d.classList.contains('warn') ? 'warn' : d.classList.contains('ok') ? 'ok' : '') : ''; p.hidden = on && want !== undefined && k !== want; const x = p.nextElementSibling; if (x && x.classList.contains('xp')) x.hidden = p.hidden; });
 }
 function installPulse(host) {
   const parent = host.parentElement; if (parent) { pulseA11y(parent); new MutationObserver(() => pulseA11y(parent)).observe(parent, { childList: true, subtree: true }); }
   if (pulseOn) return; pulseOn = true;
   const act = (t) => {
-    const row = t.closest && t.closest('[data-c3pg-prow]'); const seg = t.closest && t.closest('[data-c3pg="pulse"] .pbs > span');
-    if (row) { const r = [...live].find((x) => x.ctx && x.ctx.ribbon && x.data) || [...live].find((x) => x.data) || null; openInit(r && r.host, r, row.getAttribute('data-c3pg-prow'), (row.querySelector('b') || {}).textContent); return true; }
+    const seg = t.closest && t.closest('[data-c3pg="pulse"] .pbs > span');
     if (seg) { pulseFilter(seg); return true; }
     return false;
   };
   document.addEventListener('click', (e) => { if (act(e.target)) e.preventDefault(); });
-  document.addEventListener('keydown', (e) => { if ((e.key === 'Enter' || e.key === ' ') && e.target.matches && e.target.matches('[data-c3pg-prow],[data-c3pg="pulse"] .pbs > span') && act(e.target)) e.preventDefault(); });
+  document.addEventListener('keydown', (e) => { if ((e.key === 'Enter' || e.key === ' ') && e.target.matches && e.target.matches('[data-c3pg="pulse"] .pbs > span') && act(e.target)) e.preventDefault(); });
 }
 
 /* ── the Week page: "Progress and timing" and the time grid (console3 mockup progSVG line 2716, progCard 2739, weekView2 2604, weekListPh 2620) ── */

package/workspace/public/pm/console3.css

@@ -256,6 +256,12 @@
 @media (hover:hover){
 .c3 .prow:hover{background:color-mix(in oklab,var(--muted) 70%,transparent)}
 }
+.c3 .pnote{font-size:var(--fs-2)}
+.c3 .pst{font:var(--fs-2) var(--mono)}
+.c3 .pst-ok{color:var(--foreground)}
+.c3 .pst-warn{color:var(--warning)}
+.c3 .pst-bad{color:var(--destructive)}
+.c3 .pst-none{color:var(--muted-foreground)}
 .c3 .cmpill{border:1px solid var(--border);border-radius:16px;padding:2px 10px;font:var(--fs-2) var(--mono);white-space:nowrap}
 .c3 .cmpill.win{border-color:var(--acc);background:var(--accw)}
 .c3 .swap{animation:c3-swap .38s cubic-bezier(.2,.7,.2,1)}
@@ -1478,3 +1484,64 @@
 .c3 .psess:active{transform:scale(.93)}
 @media (max-width:760px){.c3 .psess{min-height:44px}}
 .c3 .psess .c{font:var(--fs-1) var(--mono)}
+
+/* Time of day (console3 quick fixes R5). data-daypart is set on the page root from the clock: morning, midday, afternoon, evening or night.
+ * Each part sets two tokens, both very faint: --dp-tint (a wash over the page background, alpha 6% or less) and --dp-warm (the colour of the
+ * sun and moon in the daylight strip). Neither reads --brand-mark. The values are built from theme tokens, so they follow the light and dark theme. */
+.c3[data-daypart="morning"]{--dp-tint:color-mix(in oklab,var(--warning) 4%,transparent);--dp-warm:var(--warning)}
+.c3[data-daypart="midday"]{--dp-tint:color-mix(in oklab,var(--warning) 3%,transparent);--dp-warm:var(--warning)}
+.c3[data-daypart="afternoon"]{--dp-tint:color-mix(in oklab,var(--warning) 4%,transparent);--dp-warm:var(--warning)}
+.c3[data-daypart="evening"]{--dp-tint:color-mix(in oklab,var(--destructive) 4%,transparent);--dp-warm:var(--destructive)}
+.c3[data-daypart="night"]{--dp-tint:color-mix(in oklab,var(--muted-foreground) 6%,transparent);--dp-warm:var(--foreground)}
+.c3pg[data-daypart]{background-image:linear-gradient(var(--dp-tint),var(--dp-tint))}
+/* The daylight strip in the top bar: an arc, a sun or a moon on it, and the two times. 22px tall, well under the 32px limit. */
+.c3 .c3top .c3pg-daylight{order:1;display:inline-flex;align-items:center;gap:8px;height:22px;max-height:32px;overflow:hidden;font:var(--fs-1)/1 var(--mono);color:var(--muted-foreground);white-space:nowrap}
+.c3 .c3top .tools{order:2}
+.c3 .c3pg-daylight .dl-svg{width:56px;height:18px;flex:none;overflow:visible}
+.c3 .c3pg-daylight .dl-arc{stroke:var(--border);stroke-width:1.2;stroke-dasharray:2 2}
+.c3 .c3pg-daylight .dl-base{stroke:var(--border);stroke-width:1}
+.c3 .c3pg-daylight .dl-body{fill:var(--dp-warm,var(--muted-foreground));transition:cx .8s ease,cy .8s ease}
+.c3 .c3pg-daylight[data-body="moon"] .dl-body{fill:none;stroke:var(--dp-warm,var(--muted-foreground));stroke-width:1.6}
+/* Reduced motion: the strip keeps its position and times; only the glide stops. */
+@media (prefers-reduced-motion:reduce){.c3 .c3pg-daylight .dl-body{transition:none}}
+/* ── R1 and R2: every briefing card has one fixed height; the flip turns it in place ─────────────────────────────────────────────
+ * The card is a fixed box (--fc-h). The front (.ff) and the back (.fb) fill it as two faces. The front clips and clamps its text;
+ * the back scrolls inside. The flip turns each face on rotateY, so the box never changes size and nothing around it moves. */
+.c3 .deck{--fc-h:312px}
+@media (max-width:520px){.c3 .deck{--fc-h:372px}}
+.c3 .fc.flipcard{display:block;height:var(--fc-h);min-height:0;padding:0;overflow:hidden}
+.c3 .fc.flipcard .ff,.c3 .fc.flipcard .fb{position:absolute;inset:0;box-sizing:border-box;padding:var(--sp-4) 20px 14px;min-height:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear .175s}
+.c3 .fc.flipcard .ff{display:grid;overflow:hidden;transform:perspective(900px) rotateY(0deg)}
+.c3 .fc.flipcard .fb{display:grid;align-content:start;gap:12px;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;transform:perspective(900px) rotateY(180deg)}
+.c3 .fc.flipcard.back .ff{display:grid;visibility:hidden;transform:perspective(900px) rotateY(-180deg)}
+.c3 .fc.flipcard.back .fb{display:grid;visibility:visible;transform:perspective(900px) rotateY(0deg)}
+.c3 .fc.flipcard.back.on{transform:none;box-shadow:var(--sh2),var(--hi)}
+@media (hover:hover){
+.c3 .fc.flipcard.back.on:hover{transform:none;box-shadow:var(--sh2),var(--hi)}
+}
+.c3 .fc.flipcard .cf{min-height:0;overflow:hidden}
+.c3 .fc.flipcard .cf h2{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
+.c3 .fc.flipcard .cf .cfs{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.c3 .fc.flipcard .cf .cfx{max-height:calc(2 * 1.6em);overflow:hidden}
+.c3 .fc.flipcard .cf .cff{min-width:0}
+.c3 .fc.flipcard .cf .hero{max-height:176px;overflow:hidden}
+@media (prefers-reduced-motion:reduce){
+.c3 .fc.flipcard .ff,.c3 .fc.flipcard .fb{transition:none}
+}
+
+/* ── R3: with a fine pointer the slide gives way to a compact button ─────────────────────────────────────────────────────────────
+ * Press and hold for 600 ms fills the ring (an act that cannot be undone); one click does the act that can be undone; the keyboard
+ * path is Enter, then a Confirm button. On touch the slide stays, and it is at most 320 px wide. */
+.c3 .c3slide .slt,.c3 .c3slide .slt-hint{max-width:320px}
+.c3 .c3hold{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
+.c3 .c3hold .hb{--tc:var(--acc);position:relative;display:inline-flex;gap:8px;align-items:center;min-height:36px;padding:4px 14px 4px 6px;border-radius:6px;border:1px solid color-mix(in oklab,var(--tc) 40%,var(--border));background:color-mix(in oklab,var(--tc) 10%,var(--card));color:var(--foreground);font:500 var(--fs-2) var(--mono);cursor:pointer;user-select:none;touch-action:none}
+.c3 .c3hold .hb.alt{--tc:var(--muted-foreground)}
+.c3 .c3hold .hb:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+.c3 .c3hold .hb svg.hr{width:26px;height:26px;flex:none}
+.c3 .c3hold .hb svg.hr circle{fill:none;stroke-width:3}
+.c3 .c3hold .hb svg.hr .tk{stroke:var(--muted)}
+.c3 .c3hold .hb svg.hr .fl{stroke:var(--tc);stroke-linecap:round;stroke-dasharray:62.8;stroke-dashoffset:62.8;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .2s ease-out}
+.c3 .c3hold .hb.holding svg.hr .fl{stroke-dashoffset:0;transition:stroke-dashoffset 600ms linear}
+.c3 .c3hold .hb.off{opacity:.55;cursor:not-allowed}
+.c3 .c3hold .hint{font:var(--fs-1) var(--mono);color:var(--muted-foreground)}
+.c3 .c3hold .cq{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;font:var(--fs-2) var(--mono)}

package/workspace/public/pm/pm-work-view.js

@@ -15,7 +15,7 @@
  * would send something to a person is an outward option: its slide is drawn disabled ("no channel connected"); nothing is sent.
  * In demo mode (/c3.html?demo=1, window.__c3demo) the answers of the writes are laid over the fixtures in memory (`applyOv`); the
  * agent run of a row with a suggested move is a mock that only walks the steps and shows a labelled draft.
- * Drawn from the items: the flow card (counts) and the lens ring (done of total). The deck is ctx.plan, a node the page builds. The
+ * Drawn from the items: the lens ring (done of total). The deck is ctx.plan, a node the page builds. The
  * microphone is drawn disabled.
  *
  * The helpers c3ic, c3ring, ensureC3Css and c3Phone are shared with briefing-deck.js and calendar-views.js. */
@@ -110,7 +110,6 @@ export const COPY = Object.freeze({
   addJob: 'Add a job', addJobPlaceholder: 'when I plan a release, I want honest dates, so Dana can trust them',
   groupJob: 'Group by job to be done', groupTime: 'Group by time', loading: 'Reading…',
   micOff: 'Speak is off on this line: on-device dictation runs in Notes, in the main app. Type the item here.',
-  flow: 'Flow today', flowSub: 'capture, clarify, commit, do', flowNote: 'The counts are your own items: added today, given a date, a list or a job, in Today, done today.',
   jobsNote: 'The count is every item in the job, across all lists. Tap a job to edit or delete it.',
   legend: ['open', 'done', 'migrated', 'scheduled'], readError: 'Your items could not be read.', saveError: 'Nothing was saved.',
   removed: 'Removed.', undo: 'Undo', restored: 'Restored.', tooLate: 'Too late to undo.', drop: 'Drop it',
@@ -169,7 +168,6 @@ function applyOv(base, ov) {
     j.total = (j.total || 0) + ov.added.filter((a) => a.item.job === j.id).length;
   });
   d.jobs = jobs;
-  if (d.flow) d.flow = d.flow.map((r) => (r[0] === 'Done' ? [r[0], r[1] + ov.done.size, r[2]] : r[0] === 'Captured' ? [r[0], r[1] + ov.added.length, r[2]] : r));
   return d;
 }
 
@@ -839,28 +837,6 @@ function lensBar(inst) {
   return [seg, el('div', { class: 'chips2' }, grp)];
 }
 
-/* The mockup's flowCard() (line 3340): four bars, each a count of the PM's own items. Captured = added today, Clarified = has a date, a
- * list or a job, Committed = in Today, Done = done today. The server's `today` is a UTC date and the stamps are UTC, so they compare. */
-function flowCounts(d) {
-  const items = d.items || []; const t = d.today;
-  const open = items.filter((i) => !i.done);
-  return [
-    ['Captured', items.filter((i) => String(i.created_at || '').slice(0, 10) === t).length, 'var(--muted-foreground)'],
-    ['Clarified', open.filter((i) => i.due || i.job || i.list_override).length, 'var(--acc)'],
-    ['Committed', ((d.lists || {}).today || []).filter((i) => !i.done).length, 'var(--warning)'],
-    ['Done', items.filter((i) => i.done && String(i.done_at || '').slice(0, 10) === t).length, 'var(--success)'],
-  ];
-}
-function flowCard(d) {
-  const rows = d.flow ? d.flow.map((r) => [r[0], r[1], r[2]]) : flowCounts(d);   // d.flow is optional (demo): the mockup's own four counts
-  const mx = Math.max(1, ...rows.map((r) => r[1]));
-  return el('section', { class: 'card', 'data-pm-flow': '' },
-    el('h3', null, c3ic('inbox'), COPY.flow + ' ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, COPY.flowSub)),
-    el('div', { class: 'flow' }, rows.map((r, i) => el('div', { style: '--c:' + r[2], 'data-pm-flow-row': r[0].toLowerCase() },
-      el('span', null, r[0]), el('span', { class: 'b' }, el('i', { style: 'width:' + Math.max(4, r[1] / mx * 100) + '%;animation-delay:' + (i * 90) + 'ms' })), el('b', { class: 'mono' }, String(r[1]))))),
-    el('div', { class: 'dim', style: small }, d.flow_note || COPY.flowNote));
-}
-
 /* The ring at the right of the lens header: done of total, over the items in the lens (the lists keep done items; the rows hide them). */
 function lensRing(inst) {
   const all = lists(inst)[inst.lens] || [];
@@ -914,6 +890,6 @@ function draw(inst) {
       el('ul', { class: 'list', role: 'list' }, nz.map((n) => itemRow(inst, n, 'triage')))));
   }
   /* The mockup's vWork() body: .calbody > .lh + .brief.sbb > .bcols > .bcol.l (the list) and .bcol.r (the jobs card). */
-  inst.body.replaceChildren(lh, el('div', { class: 'brief sbb' }, el('div', { class: 'bcols' }, el('div', { class: 'bcol l' }, inst.ctx.plan || null, ...main), el('div', { class: 'bcol r' }, flowCard(d), jobsCard(inst)))));
+  inst.body.replaceChildren(lh, el('div', { class: 'brief sbb' }, el('div', { class: 'bcols' }, el('div', { class: 'bcol l' }, inst.ctx.plan || null, ...main), el('div', { class: 'bcol r' }, jobsCard(inst)))));
   if (keep) { const n = inst.root.querySelector(keep.sel); if (n && n.focus) { try { n.focus({ preventScroll: true }); } catch { /* not focusable */ } } }
 }