create-pmos 0.124.0 → 0.126.0

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

@@ -0,0 +1,201 @@
+/* pm/c3-timeline.js — the drawing of the Initiatives Timeline of /c3.html, ported from the console3 mockup (console3.html, patch21, lines 4014 to 4042):
+ * scrubHtml (the track of checks and Replay), ganttTix (the Gantt), timeRight (What changed), driftSVG and creepSVG (forecast and scope at each check),
+ * fcMatrix (the forecast of every initiative at every check) and calSyncCard (the dates that reach the Calendar).
+ *
+ * INPUT is one payload of GET /api/c3-timeline (workspace/lib/routes-c3-timeline.js): `frames`, one whole plan per check. Every function here takes a
+ * frame (or the frames) and returns DOM; nothing is fetched and nothing is written. A replay is a loop over frames, so the Gantt is redrawn from the
+ * frame of each check: bars move, forecast and slip change, items appear as they were added. The mockup folds ticket histories in the browser (tixAt,
+ * planOf); here the server has already folded the events and planned them with plan.js, so the same drawing reads the result.
+ * DIFFERENCES FROM THE MOCKUP, kept honest: the mockup's tickets carry a typed "critical" flag and a progress number; here the critical path is derived
+ * (slack 0 in plan.js) and progress comes from the item's state. Origin (Jira, Local, Figma, Calendar, Plan) is in each row's tooltip and in What
+ * changed; the mockup draws no origin chip inside the Gantt either (its chips are in the Breakdown rows).
+ */
+import { el } from './dom.js';
+import { c3ic } from './pm-work-view.js';
+
+const NS = 'http://www.w3.org/2000/svg';
+const DAY = 86400000;
+export const dnum = (s) => Math.round(Date.parse(String(s).slice(0, 10) + 'T00:00:00Z') / DAY);
+const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+export const dlab = (n) => { const d = new Date(n * DAY); return d.getUTCDate() + ' ' + MON[d.getUTCMonth()]; };
+export const dlabS = (s) => dlab(dnum(s));
+export const short = (t, n) => { t = String(t == null ? '' : t); return t.length > n ? t.slice(0, n - 1) + '…' : t; };
+const STATUS = { done: ['Done', 'var(--success)'], 'on time': ['On time', 'var(--success)'], 'at risk': ['At risk', 'var(--warning)'], delayed: ['Delayed', 'var(--destructive)'], overdue: ['Overdue', 'var(--destructive)'] };
+const stat = (s) => STATUS[s] || STATUS['on time'];
+
+function svg(tag, attrs, ...kids) {
+  const n = document.createElementNS(NS, tag);
+  for (const k of Object.keys(attrs || {})) if (attrs[k] != null) n.setAttribute(k, attrs[k]);
+  for (const c of kids) if (c) n.appendChild(c);
+  return n;
+}
+const text = (x, y, s, attrs) => { const t = svg('text', { x, y, ...(attrs || {}) }); t.textContent = s; return t; };
+const title = (s) => { const t = svg('title', {}); t.textContent = s; return t; };
+
+/** Who changed it, as the mockup's orig(): You, Agent, or the teammate. */
+export function whoOf(by) {
+  const b = String(by || '');
+  if (/^(agent|claude-code)/i.test(b)) return { l: 'Agent', c: 'var(--opp, var(--accent))', i: 'spark' };
+  if (/^(pm:|human:wawan)/i.test(b) || b === 'Wawan' || b === 'You') return { l: 'You', c: 'var(--acc)', i: 'user' };
+  return { l: b.replace(/^(pm|human|agent):/, '') || 'Someone', c: 'var(--muted-foreground)', i: 'user' };
+}
+
+/** A key a person would say out loud: the Jira key or PM-n, else the title alone. */
+const rowName = (t) => (t.key ? t.key + ' ' + short(t.title, 17) : short(t.title || t.id, 22));
+
+/** The mockup's ganttTix. frame: one entry of `frames`; prev: the frame before it (the dashed "where it was before"); hl: ids touched at this check. */
+export function ganttSvg(frame, prev, hl, today) {
+  const items = frame.items.slice().sort((a, b) => dnum(a.start) - dnum(b.start) || (a.id < b.id ? -1 : 1));
+  const crit = new Set(frame.critical || []);
+  const ghost = new Map((prev ? prev.items : []).map((t) => [t.id, t.forecast]));
+  const idx = {}; items.forEach((t, i) => { idx[t.id] = i; });
+  const days = [];
+  for (const t of items) days.push(dnum(t.start), dnum(t.due), dnum(t.forecast.end));
+  const a = Math.min(...days) - 1; const b = Math.max(...days) + 2;
+  const W = 720; const LW = 176; const SW = 76; const CW = W - LW - SW; const N = b - a + 1; const dw = CW / N; const rh = 30; const top = 26; const H = top + items.length * rh + 10;
+  const X = (n) => LW + (n - a) * dw; const Xc = (n) => X(n) + dw / 2; const cy = (i) => top + i * rh + rh / 2;
+  const s = svg('svg', { class: 'pg', viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'Ticket timeline with dependencies and the critical path', 'data-tl-gantt': '', 'data-tl-check': frame.check });
+  for (let n = a; n <= b; n++) if (new Date(n * DAY).getUTCDay() === 1) { s.appendChild(svg('line', { x1: X(n), x2: X(n), y1: 18, y2: H - 4, stroke: 'var(--border)' })); s.appendChild(text(X(n) + 3, 14, dlab(n))); }
+  const td = dnum(today);
+  if (td >= a && td <= b) s.appendChild(svg('rect', { x: X(td), y: 20, width: dw, height: H - 24, fill: 'var(--accw)', rx: 6 }));
+  if (frame.promised) { const px = Xc(dnum(frame.promised)); s.appendChild(svg('line', { x1: px, x2: px, y1: 20, y2: H - 4, stroke: 'var(--success)', 'stroke-dasharray': '4 4', 'stroke-width': 2, 'data-tl-promised': frame.promised })); s.appendChild(text(px + 4, H - 8, 'promised', { fill: 'var(--success)' })); }
+  items.forEach((t, i) => (t.after || []).forEach((dk) => {
+    if (idx[dk] == null) return;
+    const pd = items[idx[dk]].forecast; const pt = t.forecast;
+    const x1 = X(dnum(pd.end) + 1); const y1 = cy(idx[dk]); const x2 = Math.max(X(dnum(pt.start)), x1 + 2); const y2 = cy(i); const xm = x1 + 6; const c = crit.has(t.id) && crit.has(dk);
+    s.appendChild(svg('path', { d: `M${x1} ${y1} H${xm} V${y2} H${x2 - 1}`, fill: 'none', stroke: c ? 'var(--destructive)' : 'var(--ring)', 'stroke-width': c ? 2 : 1.2, 'data-tl-dep': dk + '>' + t.id }));
+    s.appendChild(svg('path', { d: `M${x2} ${y2} l-5 -3 v6z`, fill: c ? 'var(--destructive)' : 'var(--ring)' }));
+  }));
+  items.forEach((t, i) => {
+    const p = t.forecast; const st = stat(p.status); const y = cy(i); const done = t.state === 'done'; const xs = X(dnum(t.start)); const xe = X(dnum(t.due) + 1); const g = ghost.get(t.id);
+    if (hl && hl.has(t.id)) s.appendChild(svg('rect', { x: 0, y: y - 13, width: W, height: 26, rx: 8, fill: 'var(--accw)', 'data-tl-hl': t.id }));
+    if (g && (g.end !== p.end || g.start !== p.start)) s.appendChild(svg('rect', { x: X(dnum(g.start)), y: y - 10, width: Math.max(4, X(dnum(g.end) + 1) - X(dnum(g.start))), height: 4, rx: 2, fill: 'none', stroke: 'var(--muted-foreground)', 'stroke-dasharray': '3 2', 'data-tl-ghost': t.id }));
+    const grp = svg('g', { opacity: done ? '.6' : '1', 'data-tl-row': t.id, 'data-tl-origin': t.origin || null, 'data-critical': crit.has(t.id) ? 'true' : null });
+    grp.appendChild(title(`${t.title || t.id} (${t.src || t.origin || 'plan'}${t.phase ? ', ' + t.phase : ''}${t.owner ? ', ' + t.owner : ''}), forecast ${p.start} to ${p.end}: ${st[0]}${p.slip_days > 0 ? ', ' + p.slip_days + ' days past the plan' : ''}`));
+    grp.appendChild(text(0, y + 4, (crit.has(t.id) ? '● ' : '') + rowName(t), { class: 't' + (crit.has(t.id) ? ' crit' : '') }));
+    if (t.ms) grp.appendChild(svg('path', { d: `M${Xc(dnum(t.due))} ${y - 9} l8 9 -8 9 -8 -9z`, fill: 'var(--card)', stroke: st[1], 'stroke-width': 2 }));
+    else {
+      grp.appendChild(svg('rect', { x: xs, y: y - 5, width: Math.max(4, xe - xs), height: 10, rx: 5, fill: st[1], 'fill-opacity': '.2' }));
+      const frac = done ? 1 : Math.max(0, Math.min(1, t.progress || 0));
+      if (frac > 0) grp.appendChild(svg('rect', { x: xs, y: y - 5, width: Math.max(done ? 4 : 0, (xe - xs) * frac), height: 10, rx: 5, fill: st[1] }));
+    }
+    if (!done && (p.end > t.due || p.start > t.start)) {
+      grp.appendChild(svg('rect', { x: X(dnum(p.start)), y: y + 6, width: Math.max(4, X(dnum(p.end) + 1) - X(dnum(p.start))), height: 4, rx: 2, fill: st[1], 'fill-opacity': '.7', 'data-tl-forecast': t.id }));
+      if (p.end > t.due) grp.appendChild(svg('circle', { cx: Xc(dnum(p.end)), cy: y, r: 5, fill: 'var(--destructive)', stroke: 'var(--card)', 'stroke-width': 2 }));
+    }
+    grp.appendChild(text(W - SW + 6, y + 4, done ? 'Done' : p.slip_days > 0 ? '+' + p.slip_days + ' d' : st[0], { style: 'fill:' + st[1], 'data-tl-status': t.id }));
+    s.appendChild(grp);
+  });
+  return s;
+}
+
+/** The mockup's scrubHtml: the header (As of …, Replay) and the track of checks. */
+export function scrub(frames, n, h) {
+  const last = frames.length - 1;
+  const f = frames[n];
+  const dateLab = dlabS(f.date);
+  const track = el('div', { class: 'sntrack', role: 'group', 'aria-label': 'Timeline history', style: `grid-template-columns:repeat(${frames.length},minmax(0,1fr));--n:${frames.length}`, 'data-n': frames.length },
+    frames.map((fr, i) => el('button', { type: 'button', class: 'sn', 'aria-pressed': String(i === n), 'data-past': String(i <= n), 'data-tl-snap': i, onClick: () => h.snap(i) },
+      el('i'), el('b', null, dlabS(fr.date)), el('span', null, fr.label))));
+  const play = el('button', { type: 'button', class: 'ib sm', title: 'Replay how the plan changed', 'aria-label': 'Replay how the plan changed', 'data-tl-replay': '', onClick: () => h.replay() }, c3ic('next', 'sm'));
+  return el('div', null, el('div', { class: 'snh' }, el('span', { class: 'dim', style: 'font-size:var(--fs-2)', 'data-tl-asof': '' }, n === last ? 'Today' : 'As of ' + dateLab), play), track);
+}
+
+/** The Timeline history card: header, the track, the Gantt, the legend. */
+export function historyCard(frames, n, h, today) {
+  const frame = frames[n]; const prev = n > 0 ? frames[n - 1] : null;
+  const hl = new Set((frame.events || []).map((e) => e.id));
+  return el('section', { class: 'card', 'data-tl-history': '' }, el('h3', null, c3ic('cal'), 'Timeline history ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, 'scrub or replay how the plan changed')),
+    scrub(frames, n, h), frame.items.length ? ganttSvg(frame, prev, hl, today) : el('div', { class: 'fold' }, c3ic('check', 'sm'), 'Nothing was in the plan at this check.'),
+    el('div', { class: 'pgl' }, el('span', null, '◆ milestone'), el('span', { style: 'color:var(--destructive)' }, '● critical path'), el('span', { style: 'color:var(--success)' }, '┆ promised'), el('span', null, 'thin bar = forecast'), el('span', null, 'dashed = where it was before')));
+}
+
+const wordsTx = (e) => (e.op === 'add' ? 'added' : e.op === 'remove' ? 'removed' : e.tx || 'edited');
+/** The mockup's timeRight, first card: what changed at this check, who, and why. */
+export function whatChangedCard(frames, n) {
+  const f = frames[n]; const p = n > 0 ? frames[n - 1] : null;
+  const head = n === 0 ? `Baseline: ${f.items.length} item${f.items.length === 1 ? '' : 's'}, ${f.points} points${f.promised ? ', promised ' + dlabS(f.promised) : ''}`
+    : `Since ${dlabS(p.date)}: ${f.points - p.points > 0 ? '+' + (f.points - p.points) + ' points' : f.points - p.points < 0 ? (f.points - p.points) + ' points' : 'no scope change'}${f.forecast_end && p.forecast_end && f.forecast_end !== p.forecast_end ? ', forecast ' + dlabS(p.forecast_end) + ' to ' + dlabS(f.forecast_end) : ', forecast unchanged'}`;
+  const ev = (f.events || []).slice(0, 12);
+  const more = (f.events || []).length - ev.length;
+  return el('section', { class: 'card', 'data-tl-changed': '' }, el('h3', null, c3ic('clock'), 'What changed ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, dlabS(f.date))),
+    el('div', { class: 'dim', style: 'font-size:var(--fs-2)', 'data-tl-head': '' }, head),
+    el('ul', { class: 'hx' }, ev.length ? ev.map((e) => { const o = whoOf(e.by);
+      return el('li', { 'data-tl-change': e.id }, el('span', { class: 'chip2', style: 'color:' + o.c }, c3ic(o.i, 'sm'), o.l),
+        el('span', null, (e.title || e.id) + ': ' + wordsTx(e), e.why ? el('small', null, e.why) : (e.origin ? el('small', null, 'No reason recorded · ' + e.origin) : null)), el('span', { class: 'w' }, e.key || '')); })
+      : [el('li', null, el('span'), el('span', null, 'No change at this check.'), el('span'))], more > 0 ? el('li', null, el('span'), el('span', { class: 'dim' }, '+' + more + ' more'), el('span')) : null));
+}
+
+/** The mockup's driftSVG: the forecast date at each check against the promise. */
+export function driftSvg(frames, n) {
+  const W = 560; const H = 160; const x0 = 58; const x1 = W - 20; const y0 = 16; const y1 = H - 30;
+  const F2 = frames.map((f) => (f.forecast_end ? { fe: dnum(f.forecast_end), e: f.promised ? dnum(f.promised) : null } : null));
+  const have = F2.filter(Boolean);
+  const first = have[0];
+  const pr = first ? (first.e != null ? first.e : first.fe) : 0;
+  const vals = have.map((x) => x.fe);
+  const mn = Math.min(pr, ...vals) - 2; const mx = Math.max(pr, ...vals) + 2; const span = Math.max(1, mx - mn);
+  const X = (i) => x0 + i * (x1 - x0) / Math.max(1, frames.length - 1); const Y = (v) => y1 - (v - mn) / span * (y1 - y0);
+  const s = svg('svg', { class: 'mat', viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'Forecast date at each check against the promise', 'data-tl-drift': '' });
+  [pr, Math.round((mn + mx) / 2), mx - 1].forEach((v) => { s.appendChild(svg('line', { x1: x0, x2: x1, y1: Y(v), y2: Y(v), stroke: 'var(--border)' })); s.appendChild(text(x0 - 5, Y(v) + 4, dlab(v), { 'text-anchor': 'end' })); });
+  if (first && first.e != null) s.appendChild(svg('line', { x1: x0, x2: x1, y1: Y(pr), y2: Y(pr), stroke: 'var(--success)', 'stroke-dasharray': '5 4', 'stroke-width': 2 }));
+  const pts = []; F2.forEach((x, i) => { if (x) pts.push(X(i).toFixed(1) + ',' + Y(x.fe).toFixed(1)); });
+  s.appendChild(svg('polyline', { points: pts.join(' '), fill: 'none', stroke: 'var(--destructive)', 'stroke-width': 2.5, 'stroke-linejoin': 'round' }));
+  F2.forEach((x, i) => { if (!x) return; s.appendChild(svg('circle', { cx: X(i), cy: Y(x.fe), r: i === n ? 6 : 4, fill: x.fe > pr ? 'var(--destructive)' : 'var(--success)', stroke: 'var(--card)', 'stroke-width': 2 })); s.appendChild(text(X(i), H - 12, dlabS(frames[i].date), { 'text-anchor': 'middle' })); });
+  if (first && first.e != null) s.appendChild(text(x1, Y(pr) - 6, 'promised ' + dlab(pr), { 'text-anchor': 'end', fill: 'var(--success)' }));
+  return s;
+}
+
+/** The mockup's creepSVG: scope in points at each check against the baseline. */
+export function creepSvg(frames, n) {
+  const W = 560; const H = 170; const x0 = 36; const x1 = W - 20; const y0 = 16; const y1 = H - 32;
+  const pp = frames.map((f) => f.points); const b0 = pp[0];
+  const mx = Math.max(...pp) + 6; const mn = Math.max(0, Math.min(...pp) - 6); const span = Math.max(1, mx - mn);
+  const X = (i) => x0 + i * (x1 - x0) / Math.max(1, frames.length - 1); const Y = (v) => y1 - (v - mn) / span * (y1 - y0);
+  const s = svg('svg', { class: 'mat', viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'Scope in points against the baseline of ' + b0 + ' points', 'data-tl-creep': '' });
+  const pts = []; pp.forEach((v, i) => { if (i) pts.push(X(i).toFixed(1) + ',' + Y(pp[i - 1]).toFixed(1)); pts.push(X(i).toFixed(1) + ',' + Y(v).toFixed(1)); });
+  const base = []; for (let i = pp.length - 1; i >= 0; i--) base.push(X(i).toFixed(1) + ',' + Y(b0).toFixed(1));
+  s.appendChild(svg('polygon', { points: pts.join(' ') + ' ' + base.join(' '), fill: 'var(--destructive)', 'fill-opacity': '.12' }));
+  s.appendChild(svg('line', { x1: x0, x2: x1, y1: Y(b0), y2: Y(b0), stroke: 'var(--ring)', 'stroke-dasharray': '5 4', 'stroke-width': 2 }));
+  s.appendChild(svg('polyline', { points: pts.join(' '), fill: 'none', stroke: 'var(--destructive)', 'stroke-width': 2.5, 'stroke-linejoin': 'round' }));
+  pp.forEach((v, i) => {
+    s.appendChild(svg('circle', { cx: X(i), cy: Y(v), r: i === n ? 6 : 4, fill: 'var(--destructive)', stroke: 'var(--card)', 'stroke-width': 2 }));
+    s.appendChild(text(X(i), H - 16, dlabS(frames[i].date), { 'text-anchor': 'middle' }));
+    if (i && v > pp[i - 1]) {
+      const add = (frames[i].events || []).find((e) => e.op === 'add');
+      s.appendChild(text(X(i), Y(v) - 10, '+' + (v - pp[i - 1]) + ' ' + short(add ? add.title : '', 16), { 'text-anchor': i === pp.length - 1 ? 'end' : 'middle' }));
+    }
+  });
+  s.appendChild(text(x1, Y(b0) + 14, 'baseline ' + b0 + ' points', { 'text-anchor': 'end' }));
+  return s;
+}
+
+/** The mockup's calSyncCard: milestones and late dates, the ones that reach the Calendar. */
+export function calSyncCard(frame) {
+  const list = frame.items.filter((t) => t.state !== 'done' && (t.ms || t.forecast.status !== 'on time')).sort((a, b) => (a.forecast.end < b.forecast.end ? -1 : a.forecast.end > b.forecast.end ? 1 : 0)).slice(0, 6);
+  return el('section', { class: 'card', 'data-tl-cal': '' }, el('h3', null, c3ic('cal'), 'On your Calendar ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, 'dates that reach it')),
+    el('ul', { class: 'chgl' }, list.length ? list.map((t) => { const bad = t.forecast.status === 'delayed' || t.forecast.status === 'overdue';
+      return el('li', { class: bad ? 'bad' : 'ok' }, c3ic(bad ? 'clock' : 'check', 'sm'), el('span', null, (t.title || t.id) + ' · ' + dlabS(t.forecast.end) + (bad ? ' (plan ' + dlabS(t.due) + ')' : ''))); })
+      : [el('li', null, c3ic('check', 'sm'), el('span', null, 'Nothing dated.'))]),
+    el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Milestones and late dates appear in Calendar week and month. Meetings carry their initiative back here.'));
+}
+
+/** The mockup's fcMatrix: the forecast of every initiative at every check; a cell replays that check. */
+export function matrixCard(data, titles, onCell) {
+  const checks = data.checks || [];
+  const head = el('tr', null, el('th'), checks.map((c) => el('th', { class: 'mono', style: 'font-size:var(--fs-1)' }, dlabS(c.date))));
+  const rows = (data.rows || []).map((r) => el('tr', null, el('th', { style: 'text-align:left' }, titles[r.id] || r.id), r.cells.map((c, n) => {
+    if (!c || !c.forecast_end) return el('td', null, '-');
+    const bad = c.promised && c.forecast_end > c.promised;
+    return el('td', null, el('button', { type: 'button', 'data-a': 'isnapgo', 'data-k': r.id + '|' + n, 'data-tl-cell': r.id + '|' + n, style: `color:${bad ? 'var(--destructive)' : 'var(--success)'};background:${bad ? 'color-mix(in oklab,var(--destructive) 10%,transparent)' : 'transparent'}`, onClick: () => onCell(r.id, n) }, dlabS(c.forecast_end)));
+  })));
+  return el('section', { class: 'card', 'data-tl-matrix': '' }, el('h3', null, c3ic('clock'), 'Forecast at each check ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, 'tap a cell to replay it')),
+    el('div', { style: 'overflow-x:auto' }, el('table', { class: 'fcm' }, el('tbody', null, head, rows))), el('div', { class: 'pgl' }, el('span', { style: 'color:var(--success)' }, 'on the promised date'), el('span', { style: 'color:var(--destructive)' }, 'after it')));
+}
+
+/** The Calendar card for the All scope: the commitments of c3-plan-panels.js (rows with a due date and a status) drawn as one frame, so the same card reads them. */
+const FSTAT = { ok: 'on time', risk: 'at risk', late: 'delayed', over: 'overdue', done: 'on time', park: 'on time' };
+export function calSyncFromCommits(rows) {
+  const items = (rows || []).filter((r) => r.st !== 'done' && r.st !== 'park').map((r) => ({ id: r.id, title: r.n, state: 'todo', ms: true, due: r.due, forecast: { end: r.fc || r.due, status: FSTAT[r.st] || 'on time' } }));
+  return calSyncCard({ items });
+}

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

@@ -0,0 +1,16 @@
+/* pm/c3-toast.js — the one toast every console3 view uses (console3.html toast(), line 1166): a dark pill at the bottom, 4.2 s, with an
+ * Undo button when the action can be taken back. One at a time. Two call shapes: toast('text', undoFn) like the mockup, or
+ * toast({ text, actionLabel, onAction, timeout, tone }) for a view that names its own button. The CSS is `.c3 .toast` in console3.css. */
+import { el } from './dom.js';
+import { ensureC3Css } from './pm-work-view.js';
+
+let host = null; let timer = null;
+export function toast(arg, undo) {
+  const o = arg && typeof arg === 'object' ? arg : { text: arg, onAction: undo };
+  ensureC3Css();
+  if (!host || !host.isConnected) { host = el('div', { class: 'c3 c3e c3pop', 'data-shell': 'toast' }); document.body.appendChild(host); }
+  const t = el('div', { class: 'toast' + (o.tone === 'error' ? ' err' : ''), role: 'status', 'aria-live': 'polite', 'data-c3-toast': '' }, el('span', null, o.text));
+  if (o.onAction) t.append(el('button', { type: 'button', 'data-c3-toast-action': '', onclick: () => { clearTimeout(timer); t.remove(); o.onAction(); } }, o.actionLabel || 'Undo'));
+  host.replaceChildren(t);
+  clearTimeout(timer); timer = setTimeout(() => t.remove(), o.timeout || 4200);
+}