create-pmos 0.511.0 → 0.513.0

package/workspace/public/pm/cozy-rec-present.css

@@ -14,18 +14,18 @@
 .rxp-pop { position: fixed; z-index: 1100; left: var(--rxp-x, 16px); bottom: var(--rxp-b, 96px); width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 140px); overflow: auto;
   padding: 8px; border-radius: 18px; background: var(--cz-card); color: var(--cz-ink); box-shadow: var(--cz-lift); font-family: var(--cz-sans); }
 .rxp-pick { display: flex; flex-direction: column; }
-.rxp-ph { margin: 6px 10px 4px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
+.rxp-ph { margin: 6px 10px 4px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); line-height: var(--lh-label); }
 .rxp-row { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
 .rxp-row:focus-visible { background: var(--cz-well); }
 @media (hover: hover) { .rxp-row:hover { background: var(--cz-well); } }
 .rxp-fi { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--cz-well); color: var(--cz-ink2); flex: none; }
-.rxp-w { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-3); font-weight: 700; }
-.rxp-w span { font-size: var(--fs-2); font-weight: 500; color: var(--cz-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rxp-w { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
+.rxp-w span { font-size: var(--fs-meta); font-weight: var(--fw-regular); color: var(--cz-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-meta); }
 .rxp-pick hr { border: 0; border-top: 1px solid var(--cz-hair); margin: 6px 10px; }
 .rxp-in { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; }
-.rxp-in input { flex: 1; min-width: 0; min-height: 32px; border: 0; background: transparent; font: inherit; font-size: var(--fs-3); color: var(--cz-ink); outline: none; }
+.rxp-in input { flex: 1; min-width: 0; min-height: 32px; border: 0; background: transparent; font: inherit; font-size: var(--fs-body); color: var(--cz-ink); outline: none; line-height: var(--lh-body); }
 .rxp-in input::placeholder { color: var(--cz-ink3); }
-.rxp-none, .rxp-err { margin: 2px 10px 6px 54px; font-size: var(--fs-2); color: var(--cz-ink3); }
+.rxp-none, .rxp-err { margin: 2px 10px 6px 54px; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .rxp-err { color: var(--cz-red); }
 .rxp-pop .rxp-ib { color: var(--cz-ink2); background: var(--cz-well); }
 
@@ -38,7 +38,7 @@
 .rxp-main.rxp-one { grid-template-columns: minmax(0, 1fr); }
 .rxp-they { position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 56px 24px 24px; border-radius: 16px; background: var(--cz-c-17191c); overflow: hidden; }
 .rxp-pill { position: absolute; left: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px;
-  background: var(--cz-c-2546b8); color: var(--cz-c-ffffff); font-size: var(--fs-2); font-weight: 800; }
+  background: var(--cz-c-2546b8); color: var(--cz-c-ffffff); font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
 .rxp-audb { position: absolute; right: 12px; top: 10px; z-index: 1; }
 .rxp-ib { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; border: 0; padding: 0; cursor: pointer; background: var(--cz-c-2a2d33); color: var(--cz-c-ffffff); }
 .rxp-ib:disabled { opacity: .35; cursor: default; }
@@ -49,17 +49,17 @@
 .rxp-img { max-width: 100%; max-height: 100%; display: block; }
 .rxp-pdf { width: 100%; height: 100%; border: 0; border-radius: 6px; background: var(--cz-c-ffffff); pointer-events: none; }
 .rxp-video { width: 100%; height: 100%; object-fit: contain; display: block; }
-.rxp-msg { max-width: 520px; display: flex; align-items: center; gap: 14px; font-size: var(--fs-3); line-height: 1.5; color: var(--cz-c-d9dce1); }
+.rxp-msg { max-width: 520px; display: flex; align-items: center; gap: 14px; font-size: var(--fs-body); line-height: 1.5; color: var(--cz-c-d9dce1); }
 .rxp-col { min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
-.rxp-card { padding: 14px 14px 16px; border-radius: 14px; background: var(--cz-c-2a2d33); font-size: var(--fs-3); line-height: 1.5; }
-.rxp-card h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-c-9aa1ab); }
+.rxp-card { padding: 14px 14px 16px; border-radius: 14px; background: var(--cz-c-2a2d33); font-size: var(--fs-body); line-height: 1.5; }
+.rxp-card h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-c-9aa1ab); line-height: var(--lh-label); }
 .rxp-card ul { margin: 0; padding-left: 18px; }
 .rxp-card li + li { margin-top: 8px; }
 .rxp-nx { height: 160px; display: grid; place-items: center; border-radius: 10px; overflow: hidden; }
 .rxp-nav { display: flex; align-items: center; gap: 10px; min-height: 44px; }
-.rxp-count { min-width: 56px; text-align: center; font-size: var(--fs-3); font-weight: 800; font-variant-numeric: tabular-nums; }
+.rxp-count { min-width: 56px; text-align: center; font-size: var(--fs-row); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; line-height: var(--lh-row); }
 .rxp-sp { flex: 1; }
-.rxp-on { font-size: var(--fs-3); font-weight: 700; color: var(--cz-c-9aa1ab); font-variant-numeric: tabular-nums; }
+.rxp-on { font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-c-9aa1ab); font-variant-numeric: tabular-nums; line-height: var(--lh-row); }
 .rxp-shots { display: flex; gap: 8px; }
 .rxp-shots img { width: 56px; height: 32px; object-fit: cover; border-radius: 6px; background: var(--cz-c-33363c); }
 

package/workspace/public/pm/cozy-rec-tab.css

@@ -13,17 +13,17 @@ body.rt-page { height: 100vh; overflow: hidden; }
 .rt-hd { display: flex; align-items: center; gap: 10px; min-height: 40px; }
 .rt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cz-dot-q); flex: none; }
 .rt[data-mode="screen"] .rt-dot, .rt[data-mode="room"] .rt-dot { background: var(--cz-dot-red); animation: rt-breathe 2.4s ease-in-out infinite; }
-.rt-clock { font-size: var(--fs-4); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cz-ink3); }
+.rt-clock { font-size: var(--fs-row); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; color: var(--cz-ink3); line-height: var(--lh-row); }
 .rt[data-mode="screen"] .rt-clock, .rt[data-mode="room"] .rt-clock { color: var(--cz-dot-red); }
 .rt.late .rt-clock, .rt-past { color: var(--cz-dot-risk); }
-.rt-title { margin: 0; font-size: var(--fs-4); font-weight: 800; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.rt-past { font-size: var(--fs-3); font-weight: 700; }
+.rt-title { margin: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-row); }
+.rt-past { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
 .rt-ad { display: inline-flex; align-items: center; flex: none; }   /* Adler with headphones (AdH5) */
 .rt-ad[hidden] { display: none; }
 @keyframes rt-breathe { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
 @media (prefers-reduced-motion: reduce) { .rt-dot { animation: none !important; } }
 
-.rt-alert { margin: 6px 0 0; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--cz-riskbg); color: var(--cz-risk); font-weight: 700; font-size: var(--fs-3); }
+.rt-alert { margin: 6px 0 0; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--cz-riskbg); color: var(--cz-risk); font-weight: var(--fw-strong); font-size: var(--fs-row); line-height: var(--lh-row); }
 .rt-alert span { flex: 1; }
 
 .rt-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 10px; position: relative; }
@@ -32,10 +32,10 @@ body.rt-page { height: 100vh; overflow: hidden; }
 .rt-scr { flex: 1; min-height: 0; border-radius: 12px; background: var(--cz-c-17191c); display: flex; align-items: center; justify-content: center; overflow: hidden; }
 .rt-scr video { max-width: 100%; max-height: 100%; display: block; }
 .rt-scr.off { flex-direction: column; gap: 12px; background: var(--cz-c-2a2d33); }
-.rt-scr.off p { margin: 0; font-size: var(--fs-4); font-weight: 800; color: var(--cz-c-9ea4ad); }
+.rt-scr.off p { margin: 0; font-size: var(--fs-row); font-weight: var(--fw-strong); color: var(--cz-c-9ea4ad); line-height: var(--lh-row); }
 .rt-wait { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
-.rt-wait h2 { margin: 0; font-size: var(--fs-5); font-weight: 800; }
-.rt-wait p { margin: 0 0 8px; font-size: var(--fs-3); color: var(--cz-ink3); max-width: 420px; }
+.rt-wait h2 { margin: 0; font-size: var(--fs-panel); font-weight: var(--fw-strong); line-height: var(--lh-panel); }
+.rt-wait p { margin: 0 0 8px; font-size: var(--fs-body); color: var(--cz-ink3); max-width: 420px; line-height: var(--lh-body); }
 
 /* the meeting so far: one mark per highlight, a card with the moment on hover or focus */
 .rt-line { position: relative; height: 28px; margin: 12px 4px 0; }
@@ -46,12 +46,12 @@ body.rt-page { height: 100vh; overflow: hidden; }
 .rt-star { width: 28px; height: 28px; border: 0; padding: 0; border-radius: 50%; background: transparent; color: var(--cz-dot-risk); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
 .rt-star svg { fill: currentColor; stroke: none; }
 .rt-star:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; }
-.rt-hv { display: none; position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); width: 240px; padding: 10px; border-radius: 14px; background: var(--cz-card); color: var(--cz-ink); box-shadow: var(--cz-sheet); font-size: var(--fs-3); z-index: 3; flex-direction: column; gap: 4px; }
-.rt-hv b { font-size: var(--fs-2); color: var(--cz-ink3); }
+.rt-hv { display: none; position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); width: 240px; padding: 10px; border-radius: 14px; background: var(--cz-card); color: var(--cz-ink); box-shadow: var(--cz-sheet); font-size: var(--fs-body); z-index: 3; flex-direction: column; gap: 4px; line-height: var(--lh-body); }
+.rt-hv b { font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
 .rt-hv img { width: 100%; border-radius: 8px; margin-top: 4px; display: block; }
 .rt-mk:hover .rt-hv, .rt-mk:focus-within .rt-hv { display: flex; }
 
-.rt-msg { margin: 8px 0 0; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); text-align: center; }
+.rt-msg { margin: 8px 0 0; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink3); text-align: center; line-height: var(--lh-label); }
 .rt[data-mode="screen"] .rt-msg { color: var(--cz-c-9ea4ad); }
 
 /* the bar: icon only; Stop is the one red press */
@@ -74,10 +74,10 @@ body.rt-page { height: 100vh; overflow: hidden; }
 /* Stop asks first; the next meeting asks once */
 .rt-ask { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--cz-c-17191c) 35%, transparent); z-index: 5; }
 .rt-askc { width: min(420px, calc(100vw - 32px)); box-sizing: border-box; padding: 20px; border-radius: 20px; background: var(--cz-card); color: var(--cz-ink); box-shadow: var(--cz-sheet); }
-.rt-askc b { font-size: var(--fs-4); }
-.rt-askc p { margin: 8px 0 0; font-size: var(--fs-3); color: var(--cz-ink2); }
+.rt-askc b { font-size: var(--fs-body); line-height: var(--lh-body); }
+.rt-askc p { margin: 8px 0 0; font-size: var(--fs-body); color: var(--cz-ink2); line-height: var(--lh-body); }
 .rt-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
-.rt-t { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: 700 var(--fs-3) var(--cz-sans); cursor: pointer; }
+.rt-t { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink); font: var(--fw-strong) var(--fs-row)/var(--lh-row) var(--cz-sans); cursor: pointer; }
 .rt-t.red { background: var(--cz-dot-red); color: var(--cz-onsolid); border-color: transparent; }
 .rt-t.blue { background: var(--cz-solid); color: var(--cz-onsolid); border-color: transparent; }
 

package/workspace/public/pm/cozy-settings.js

@@ -3,6 +3,8 @@
  *               (this device), Product (which products Home reads: the Products card), Your day (when the end-of-day card shows:
  *               time.workEnd, POST /api/settings), Your impact (impact.on, POST /api/settings; canvas GmP1Switch, batch 16 item 7: the one switch
  *               for Adler's leaf, the impact log and the weekly check; the page hears `pmos:impact`), Agents write to Jira (fixed: only after Commit)
+ *   Claude      the Claude profile, the API key, and Sharpen prompts: suggestions after a reply, Sharpen as I type, the style and Your own rules
+ *               (GET/POST /api/next-prompt/prefs; batch 26 item 2)
  *   Claude’s checks  Grill by itself (Full, Only at stage exits, Off) and the monthly credit for checks with what this month used (grill.mode,
  *               grill.cap, POST /api/settings; GET /api/grill; canvas GrillEntry). At the cap Claude pauses and says so once here.
  *   Jev and Laya  the TypeSafe key, Laya on this computer and the per-repository switches (pm/cozy-jl.js; canvas JlA1Empty–JlA4Phone)
@@ -262,7 +264,35 @@ function claudeSec() {
   const keyRight = `<span class="ev-dr-pl"><label class="ev-vh" for="evKey">Anthropic API key</label><input id="evKey" class="ev-inp" type="password" autocomplete="off" spellcheck="false" placeholder="${k.present ? 'Replace the key' : 'sk-ant-\u2026'}" data-ev-key><button type="button" class="ev-btn sm pri" data-ev-keysave>Save</button>${k.source === 'settings' ? '<button type="button" class="ev-btn sm" data-ev-keyclear>Remove</button>' : ''}</span>`;
   return '<h4>Claude login and profile</h4><div data-claude-setup></div>'
     + trow('API key', keySub, keyRight)
-    + (k.present && C.off ? trow('Runs on the API', 'Off: PMOS_GRILL_API is off in the environment.', '<span class="ev-pill">Off</span>') : '');
+    + (k.present && C.off ? trow('Runs on the API', 'Off: PMOS_GRILL_API is off in the environment.', '<span class="ev-pill">Off</span>') : '')
+    + sharpenRows(k.present);
+}
+/* Settings › Claude › Sharpen prompts (batch 26 item 2; pm/next-prompt-ui.js, lib/routes-next-prompt.js): the suggestions after a reply, Sharpen as I
+ * type ('auto' is on when Claude runs on the API key, where a sharpen takes about 2 s), the style, and the PM's own rules for Your own.
+ * The same style and switch are in the chat's Sharper card menu; a save here tells the chat (the event pmos:prompt-prefs). */
+const NPK = { 'prompt.next': ['nextSet', 'next'], 'prompt.sharpen': ['sharpenSet', 'sharpen'], 'prompt.style': ['style', 'style'], 'prompt.rules': ['rulesText', 'rules'] };   // row key → [GET field, POST key]
+const setVal = (k, d) => { const v = T.np ? T.np[NPK[k][0]] : undefined; return v !== undefined && v !== null ? v : d; };
+function sharpenRows(api) {
+  const next = setVal('prompt.next', true) !== false, sh = setVal('prompt.sharpen', 'auto'), style = setVal('prompt.style', 'engineer'), rules = String(setVal('prompt.rules', '') || '');
+  const on = sh === 'on' || (sh === 'auto' && api);
+  const shSub = sh === 'auto' ? (api ? 'On, because Claude runs on your API key: the sharper version shows in about 2 seconds.' : 'Off for now: without an API key each one takes 10 seconds or more. Turn it on to use it anyway.')
+    : on ? 'When you pause on a rough prompt, a sharper version shows above the box.' : 'Off. No spinner and no Sharper card.';
+  const styleSub = style === 'polish' ? 'Clearer and shorter, your meaning kept.' : style === 'own' ? (rules.trim() ? 'Your rules below.' : 'Write your rules below first.') : 'Builds the best prompt for the job.';
+  return '<h4>Sharpen prompts</h4>'
+    + trow('Suggest the next prompt', 'After a reply, up to two prompts above the box. A tap puts one in the box. Nothing sends.', sw(next, 'data-ev-np="prompt.next"', 'Suggest the next prompt'))
+    + trow('Sharpen as I type', shSub, sw(on, 'data-ev-np="prompt.sharpen"', 'Sharpen as I type'))
+    + trow('Sharpen as', styleSub, seg('Sharpen as', 'prompt.style', style, [['polish', 'Polish'], ['engineer', 'Prompt engineer'], ['own', 'Your own']]))
+    + `<div class="ev-trow"><div class="ev-tx"><label for="evRules"><b>Your own rules</b></label><p class="ev-small ev-mut">For Your own. For example: short, always name the initiative, ask for sources.</p>`
+    + `<textarea id="evRules" class="ev-inp ev-rules" rows="3" maxlength="1000" spellcheck="true">${esc(rules)}</textarea></div><button type="button" class="ev-btn sm pri" data-ev-rulesave>Save</button></div>`;
+}
+async function savePrompt(key, value, said) {
+  const r = await pmPost('/api/next-prompt/prefs', { key: NPK[key][1], value });
+  if (r && r.ok) {
+    T.np = { ...(T.np || {}), [NPK[key][0]]: value };
+    document.dispatchEvent(new CustomEvent('pmos:prompt-prefs', { detail: { key, value } }));
+  }
+  T.msg = r && r.ok ? said : (r && r.error) || 'Not saved.';
+  draw();
 }
 /* Settings > Claude's checks (GrillEntry): Claude grills by itself, so this is the only control: when, and how much it may spend a month */
 const CAPS = [5, 10, 20, 50];
@@ -343,6 +373,10 @@ async function press(e) {
     T.msg = r && r.ok ? (key === 'grill.mode' ? (value === 'off' ? 'Saved. Claude no longer grills by itself.' : value === 'exits' ? 'Saved. Claude grills only before a stage ends.' : 'Saved. Claude grills by itself when it matters.') : 'Saved. Claude’s checks spend at most ' + usd(value) + ' a month.') : (r && r.error) || 'Not saved.';
     draw(); return;
   }
+  if (t.dataset.evSeg === 'prompt.style') { await savePrompt('prompt.style', t.dataset.v, 'Saved. Sharper prompts follow this style.'); return; }
+  if (t.dataset.evNp === 'prompt.next') { const on = setVal('prompt.next', true) === false; await savePrompt('prompt.next', on, on ? 'Saved. Claude suggests the next prompt after a reply.' : 'Saved. No suggestions after a reply.'); return; }
+  if (t.dataset.evNp === 'prompt.sharpen') { const api = !!(T.cl && T.cl.key && T.cl.key.present), sh = setVal('prompt.sharpen', 'auto'), was = sh === 'on' || (sh === 'auto' && api); await savePrompt('prompt.sharpen', was ? 'off' : 'on', was ? 'Saved. Sharpen as I type is off.' : 'Saved. Sharpen as I type is on.'); return; }
+  if ('evRulesave' in t.dataset) { const ta = T.el.querySelector('#evRules'); await savePrompt('prompt.rules', ta ? ta.value.slice(0, 1000) : '', 'Saved. Your own rules are used when Sharpen as is Your own.'); return; }
   if (t.dataset.evSeg && t.dataset.evSeg.startsWith('adler.')) { const r = await AD.savePref(pmPost, t.dataset.evSeg, t.dataset.v); T.msg = r && r.ok ? 'Saved.' : (r && r.error) || 'Not saved.'; draw(); return; }
   if (t.dataset.evDress) {
     const a = t.dataset.evDress;
@@ -459,6 +493,7 @@ async function readAgain(id) {
 async function load() {
   readFresh();
   pmGet('/api/grill').then((g) => { T.gr = g && g.ok ? g : { ok: false, error: (g && g.error) || '' }; draw(); }).catch(() => { T.gr = { ok: false }; draw(); });
+  pmGet('/api/next-prompt/prefs').then((n) => { T.np = n && n.ok ? n : null; draw(); }).catch(() => { T.np = null; });
   pmGet('/api/profiles').then(async (pr) => { const k = await pmGet('/api/anthropic'); T.cl = { profiles: pr && Array.isArray(pr.profiles) ? pr.profiles : [], prefs: (pr && pr.prefs) || {}, perr: pr && pr.ok === false ? (pr.error || 'the server did not answer') : '', key: k && k.ok ? k.key : { present: false, source: null }, off: !!(k && k.off) }; draw(); }).catch(() => { T.cl = { profiles: [], prefs: {}, perr: 'the server did not answer', key: { present: false, source: null } }; draw(); });
   const [w, p, s, b] = await Promise.all([pmGet('/api/workspaces'), pmGet('/api/proactive/settings'), pmGet('/api/settings'), pmGet('/api/briefing-premium')]);
   T.ws = w && Array.isArray(w.workspaces) ? w.workspaces : [];
@@ -477,7 +512,7 @@ async function load() {
 export function openSettings(section) {
   const el = mount();
   if (section === 'dress') { T.sec = 'adler'; T.dress = true; } else if (section && BODY[section]) { T.sec = section; T.dress = false; }
-  if (el.hidden) { const ae = document.activeElement; T.back = ae && ae !== document.body ? ae : null; T.ws = null; T.src = null; T.msg = ''; T.phase = ''; T.auto = false; T.wkOpen = new Set(); T.wkMore = new Set(); T.arc = false; T.fresh = null; T.note = {}; T.dset = {}; T.cl = null; T.gr = null; JL.reset(); }
+  if (el.hidden) { const ae = document.activeElement; T.back = ae && ae !== document.body ? ae : null; T.ws = null; T.src = null; T.msg = ''; T.phase = ''; T.auto = false; T.wkOpen = new Set(); T.wkMore = new Set(); T.arc = false; T.fresh = null; T.note = {}; T.dset = {}; T.cl = null; T.gr = null; T.np = null; JL.reset(); }
   el.hidden = false; document.getElementById('evStScrim').hidden = false; el.setAttribute('data-esc-layer', '');
   draw();
   const f = el.querySelector('[aria-current="page"]'); if (f) f.focus();

package/workspace/public/pm/cozy-steps.css

@@ -15,8 +15,8 @@ button.cz-st:focus-visible, .cz-sact:focus-visible, .cz-more:focus-visible, .cz-
 .cz-nd.done { background: var(--cz-bluebg); color: var(--cz-blueink); }
 .cz-nd.you { border: 2px solid var(--cz-blue); }
 .cz-nd.you::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--cz-blue); animation: cz-st-info 6s ease-out infinite; }
-.cz-nd.risk { border: 2px solid var(--cz-risk); color: var(--cz-risk); font-size: var(--fs-2); }
-.cz-nd.risk b { font-weight: 900; }
+.cz-nd.risk { border: 2px solid var(--cz-risk); color: var(--cz-risk); font-size: var(--fs-meta); line-height: var(--lh-meta); }
+.cz-nd.risk b { font-weight: var(--fw-strong); }
 .cz-nd.risk::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--cz-risk); animation: cz-st-warn 3.2s ease-out infinite; }
 .cz-nd.tl { border: 1.6px dashed var(--cz-sl-line); }
 .cz-nd.go { background: var(--cz-solid); color: var(--cz-onsolid); }
@@ -31,26 +31,26 @@ button.cz-st:focus-visible, .cz-sact:focus-visible, .cz-more:focus-visible, .cz-
 @media (prefers-reduced-motion: reduce) { .cz-spin svg, .cz-nd.you::after, .cz-nd.risk::after { animation: none; } .cz-nd.you::after, .cz-nd.risk::after { opacity: 0; } }
 
 /* the words */
-.cz-st .tx { flex: 1; min-width: 0; font-size: var(--fs-3); line-height: 1.35; padding-top: 1px; }
-.cz-st .tx small { display: block; font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; margin-top: 2px; }
+.cz-st .tx { flex: 1; min-width: 0; font-size: var(--fs-body); line-height: 1.35; padding-top: 1px; }
+.cz-st .tx small { display: block; font-size: var(--fs-label); color: var(--cz-ink3); font-weight: var(--fw-strong); margin-top: 2px; line-height: var(--lh-label); }
 .cz-st .tx small.warn { color: var(--cz-risk); }
-.cz-st .tx code { display: block; margin-top: 3px; font-family: var(--cz-mono); font-size: var(--fs-1); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cz-st .tx code { display: block; margin-top: 3px; font-family: var(--cz-mono); font-size: var(--fs-meta); color: var(--cz-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-meta); }
 .cz-st.dn .tx { color: var(--cz-ink3); }
-.cz-st.now .tx .lb { font-weight: 800; }
-.cz-st.rk .tx .lb { font-weight: 800; }
+.cz-st.now .tx .lb { font-weight: var(--fw-strong); }
+.cz-st.rk .tx .lb { font-weight: var(--fw-strong); }
 .cz-st.wt .tx { color: var(--cz-ink2); }
 .cz-st.sk .tx .lb { text-decoration: line-through; color: var(--cz-ink3); }
-.cz-fold { align-items: center; min-height: 40px; padding-bottom: 6px; color: var(--cz-ink3); font-size: var(--fs-2); font-weight: 600; }
-.cz-fold .tx { font-size: var(--fs-2); color: var(--cz-ink3); padding-top: 0; }
+.cz-fold { align-items: center; min-height: 40px; padding-bottom: 6px; color: var(--cz-ink3); font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: var(--lh-label); }
+.cz-fold .tx { font-size: var(--fs-meta); color: var(--cz-ink3); padding-top: 0; line-height: var(--lh-meta); }
 .cz-fold[aria-expanded="false"] .tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .cz-cv { display: inline-flex; color: var(--cz-ink3); margin-top: 3px; flex: none; }
 .cz-fold .cz-cv { margin-top: 0; }
-.cz-more { display: flex; align-items: center; min-height: 36px; width: 100%; padding: 0 0 6px 34px; font: inherit; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); background: transparent; border: 0; cursor: pointer; text-align: left; }
+.cz-more { display: flex; align-items: center; min-height: 36px; width: 100%; padding: 0 0 6px 34px; font: inherit; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-ink2); background: transparent; border: 0; cursor: pointer; text-align: left; line-height: var(--lh-label); }
 .cz-sli:has(> .cz-more)::before { display: none; }
 
 /* the go button (the one primary), the owner, the trailing act */
 .cz-gob { flex: none; width: 32px; height: 32px; margin-top: -4px; border-radius: 50%; background: var(--cz-solid); color: var(--cz-onsolid); display: inline-flex; align-items: center; justify-content: center; }
-.cz-own { flex: none; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-1); font-weight: 800; background: var(--cz-riskbg); color: var(--cz-risk); }
+.cz-own { flex: none; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-badge); font-weight: var(--fw-strong); background: var(--cz-riskbg); color: var(--cz-risk); line-height: var(--lh-badge); }
 .cz-own.c { background: var(--cz-solid); color: var(--cz-onsolid); }
 .cz-own.cw { background: var(--cz-well); color: var(--cz-ink2); }
 .cz-own.j { background: var(--cz-well); color: var(--cz-ink2); border-radius: 6px; }
@@ -64,9 +64,9 @@ button.cz-st:focus-visible, .cz-sact:focus-visible, .cz-more:focus-visible, .cz-
 .cz-jb + small { margin-top: 4px !important; }
 
 /* the last node: the next stage, then the button when every step is done */
-.cz-st.mv .tx .nm { display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--cz-ink); }
-.cz-st.mv .tx small { font-weight: 600; }
+.cz-st.mv .tx .nm { display: flex; align-items: center; gap: 6px; font-weight: var(--fw-strong); color: var(--cz-ink); }
+.cz-st.mv .tx small { font-weight: var(--fw-strong); }
 .cz-auto { display: inline-flex; color: var(--cz-blue); }
 .cz-st.mvr { align-items: center; padding-bottom: 4px; }
-.cz-mvb { flex: 1; min-height: 44px; border-radius: 14px; background: var(--cz-solid); color: var(--cz-onsolid); font: inherit; font-weight: 800; font-size: var(--fs-3); display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; padding: 0 16px; }
+.cz-mvb { flex: 1; min-height: 44px; border-radius: 14px; background: var(--cz-solid); color: var(--cz-onsolid); font: inherit; font-weight: var(--fw-strong); font-size: var(--fs-row); display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; padding: 0 16px; line-height: var(--lh-row); }
 .cz-mvb span { display: inline-flex; align-items: center; gap: 4px; }