@agentwhy/cli 0.0.0-dev

package/dist/report/render/ui/add-file-popup.js

@@ -0,0 +1,122 @@
+import { escapeHtml as e } from '../html-report-components.js';
+import { inLanguages, labelAttributes, LANGS, translator } from '../report-copy.js';
+import { closeButton, pill } from './button.js';
+import { CLOSES, popup } from './popup.js';
+/**
+ * "Add a private file" (`for-people-who-build-with-ai.md` F35, F36; guidelines §9.2): two large cards, *Choose a file* and
+ * *Choose a folder*, then "Or type the name". Settings opens it, and the onboarding's step 2
+ * (`.ai/specs/2026-09-24-onboarding.md` W12), which is why it is in the kit.
+ *
+ * A picked file gives its name and nothing else: the page never reads its contents - no `FileReader`, no upload;
+ * `files[0].name` and, for a folder, the first segment of `webkitRelativePath` are all the script touches. The name
+ * becomes the pattern a deny rule will hold - a file anywhere by that name, or a folder's contents - and is handed to
+ * the page as an `add-file` event on the window, `{ name, kind, pattern }`. What happens then is the page's: Settings
+ * asks to confirm, the onboarding adds a row. A name that cannot be written exactly is refused here, in words (R46).
+ *
+ * Its words are Settings' (`set.add.*`): one popup, one set of words, whichever page opens it.
+ */
+export function addFilePopup(id) {
+    const title = id + '-title';
+    const placeholder = (lang) => e(translator(lang)('set.add.placeholder'));
+    const pick = (kind, glyph) => '<button type="button" class="af-pick" data-af-pick="' + kind + '">' +
+        '<span class="af-pick-mark" aria-hidden="true">' + glyph + '</span>' +
+        '<span class="af-pick-name">' + inLanguages((t) => t('set.add.' + kind)) + '</span>' +
+        '<span class="af-pick-eg">' + inLanguages((t) => t('set.add.' + kind + '.eg')) + '</span></button>';
+    return popup({
+        id,
+        size: 'pick',
+        labelledBy: title,
+        body: '<div class="af" data-af>' +
+            '<div class="af-head"><h3 class="af-title" id="' + title + '">' + inLanguages((t) => t('set.add.title')) + '</h3>' +
+            closeButton(labelAttributes((t) => t('app.close')) + CLOSES, 'sm') + '</div>' +
+            '<p class="af-lead">' + inLanguages((t) => t('set.add.lead')) + '</p>' +
+            '<div class="af-picks js-only">' + pick('file', '▤') + pick('folder', '▦') + '</div>' +
+            '<input type="file" class="af-file" data-af-file="file" hidden tabindex="-1" aria-hidden="true">' +
+            '<input type="file" class="af-file" data-af-file="folder" webkitdirectory directory hidden tabindex="-1" aria-hidden="true">' +
+            '<div class="af-type-label">' + inLanguages((t) => t('set.add.type')) + '</div>' +
+            '<form class="af-type" data-af-type>' +
+            '<input class="af-type-input" name="name" autocomplete="off" placeholder="' + placeholder('en') + '"' +
+            LANGS.map((lang) => ' data-placeholder-' + lang + '="' + placeholder(lang) + '"').join('') +
+            labelAttributes((t) => e(t('set.add.type'))) + '>' +
+            pill({ label: inLanguages((t) => t('set.add.go')), tone: 'light', size: 'task', attributes: ' data-af-type-go', button: true }) +
+            '</form>' +
+            '<p class="af-cannot" data-af-cannot hidden>' + inLanguages((t) => t('set.add.cannot')) + '</p></div>',
+    });
+}
+export const ADD_FILE_POPUP_STYLE = String.raw `
+.af{padding:28px}
+.af-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px}
+.af-title{margin:0;font-size:22px;line-height:1.25;font-weight:650}
+.af-lead{margin:0 0 20px;font-size:15px;line-height:1.55;color:var(--text-2)}
+.af-picks{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
+.js .af-picks{display:grid}
+.af-pick{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--white-12);color:inherit;font:inherit;cursor:pointer;text-align:center}
+.af-pick:hover{border-color:var(--coral)}
+.af-pick-mark{width:44px;height:44px;border-radius:12px;background:var(--coral-12);color:var(--coral-text);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}
+.af-pick-name{font-size:15.5px;font-weight:600}
+.af-pick-eg{font-size:13px;color:var(--text-2)}
+.af-type-label{font-size:13px;color:var(--text-3);margin-bottom:8px}
+.af-type{display:flex;gap:10px}
+.af-type-input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--white-12);border-radius:999px;padding:10px 16px;color:var(--text);font:inherit;font-size:14px;outline:none}
+.af-type-input:focus-visible{border-color:var(--coral-50)}
+.af-type .pill{padding:10px 20px}
+.af-cannot{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--coral-text)}
+@media (max-width:640px){.js .af-picks{grid-template-columns:1fr}}
+`;
+/**
+ * A name becomes the pattern (F36): a file anywhere by that name, or a folder's contents. A picked name holding a
+ * wildcard would protect other files than the one picked, and a bracket cannot be written in a deny rule at all (R46),
+ * so such a name is refused here, in words, rather than escaped by a guess. A typed name with a slash or a wildcard is
+ * taken as the pattern it already is.
+ */
+export const ADD_FILE_POPUP_SCRIPT = String.raw `
+(() => {
+  document.querySelectorAll('[data-af]').forEach((root) => {
+    const window_ = root.closest('dialog');
+    const cannot = root.querySelector('[data-af-cannot]');
+    if (!window_) return;
+    const hand = (name, kind) => {
+      if (/[()]/.test(name) || (kind !== 'pattern' && /[*?[\]{}]/.test(name))) {
+        if (cannot) cannot.hidden = false;
+        return;
+      }
+      if (cannot) cannot.hidden = true;
+      const pattern = kind === 'file' ? '**/' + name : kind === 'folder' ? '**/' + name + '/**' : name;
+      window_.dispatchEvent(new CustomEvent('add-file', { detail: { name, kind, pattern } }));
+    };
+
+    root.addEventListener('click', (event) => {
+      const pick = event.target.closest('[data-af-pick]');
+      if (pick) {
+        const input = root.querySelector('[data-af-file="' + pick.dataset.afPick + '"]');
+        if (input) input.click();
+        return;
+      }
+      if (event.target.closest('[data-af-type-go]')) {
+        const form = event.target.closest('form');
+        if (form) form.requestSubmit();
+      }
+    });
+
+    root.querySelectorAll('[data-af-file]').forEach((input) => input.addEventListener('change', () => {
+      const first = input.files && input.files[0];
+      if (!first) return;
+      const name = input.dataset.afFile === 'folder' ? (first.webkitRelativePath || '').split('/')[0] : first.name;
+      input.value = '';
+      if (name) hand(name, input.dataset.afFile);
+    }));
+
+    const typed = root.querySelector('[data-af-type]');
+    if (typed) typed.addEventListener('submit', (event) => {
+      event.preventDefault();
+      const field = typed.querySelector('input');
+      const text = field.value.trim();
+      if (text === '') return;
+      field.value = '';
+      const folder = /^[^/*?[\]]+\/$/.test(text);
+      const plain = /^[^/*?[\]]+$/.test(text);
+      hand(folder ? text.slice(0, -1) : text, folder ? 'folder' : plain ? 'file' : 'pattern');
+    });
+  });
+})();
+`;

package/dist/report/render/ui/app-sidebar.js

@@ -0,0 +1,78 @@
+import { escapeHtml as e } from '../html-report-components.js';
+import { BRAND_MARK } from './brand-mark.js';
+import { opens } from './popup.js';
+import { DEFAULT_LANG, inLanguages, LANG_NAMES, LANGS, labelAttributes } from '../report-copy.js';
+/**
+ * The column every page of the new design carries (design file *agentwhy Sessions v2*): the mark and wordmark, the
+ * project, the pages, and the one standing fact about where the work happens. The mark is the knot the reports
+ * already carry (`BRAND_MARK`), kept at the maintainer's request over the design file's wordmark alone.
+ */
+export function appSidebar(spec) {
+    const link = spec.project !== undefined && spec.projectsWindow !== undefined;
+    return '<aside class="sb">' +
+        '<a class="sb-brand" href="' + spec.home + '" aria-label="agentwhy">' + BRAND_MARK + '<span class="sb-word">agent<span class="sb-why">why</span></span></a>' +
+        // One line for the name, as every other row of the column is one line: a long folder name ends in an ellipsis and
+        // is whole on hover, rather than breaking at a hyphen over two lines of heavier type than the items under it. The
+        // place under it is cut the same way, and the tooltip holds it whole, since it says which folder this is.
+        (spec.showProject === false ? '' :
+            (link ? '<a class="sb-project sb-project-link"' + opens(spec.projectsWindow) : '<div class="sb-project"') +
+                (spec.project === undefined ? '' : ' title="' + e(spec.place ?? spec.project) + '"') + '>' +
+                '<span class="sb-project-mark" aria-hidden="true">' + (spec.project === undefined ? '↗' : e(initial(spec.project))) + '</span>' +
+                '<span class="sb-project-text"><span class="sb-project-label">' +
+                inLanguages((t) => t(spec.project === undefined ? 'app.shared' : 'app.project')) + '</span>' +
+                (spec.project === undefined ? '' : '<span class="sb-project-name">' + e(spec.project) + '</span>') +
+                (spec.project === undefined || spec.place === undefined ? '' : '<span class="sb-project-place">' + e(spec.place) + '</span>') +
+                '</span>' + (link ? '<span class="sb-project-go" aria-hidden="true">›</span></a>' : '</div>')) +
+        '<nav class="sb-nav"' + labelAttributes((t) => t('app.nav')) + '>' + spec.items.map(item).join('') + '</nav>' +
+        '<div class="sb-foot">' +
+        '<select class="sb-lang js-only" id="lang"' + labelAttributes((t) => t('app.lang')) + '>' +
+        LANGS.map((lang) => '<option value="' + lang + '"' + (lang === DEFAULT_LANG ? ' selected' : '') + '>' + LANG_NAMES[lang] + '</option>').join('') +
+        '</select>' +
+        '<div class="sb-local"><span class="sb-dot" aria-hidden="true"></span><span>' + inLanguages((t) => t('app.local')) + '</span></div>' +
+        '</div></aside>';
+}
+/** The first letter or digit of a folder's name, for its mark: `test-project` is T, `_scratch` is S. */
+export function initial(name) {
+    return (/[\p{L}\p{N}]/u.exec(name)?.[0] ?? '·').toUpperCase();
+}
+function item(nav) {
+    const count = nav.count === undefined || nav.count === 0 ? '' :
+        '<span class="sb-count' + (nav.countTone === 'coral' ? ' sb-count-coral' : '') + '">' + nav.count + '</span>';
+    return '<a class="sb-item' + (nav.active === true ? ' sb-active' : '') + '" href="' + nav.href + '"' +
+        (nav.active === true ? ' aria-current="page"' : '') + '><span>' + inLanguages((t) => t(nav.name)) + '</span>' + count + '</a>';
+}
+export const APP_SIDEBAR_STYLE = String.raw `
+.sb{flex:none;width:232px;display:flex;flex-direction:column;border-right:1px solid var(--white-07);padding:22px 14px;position:sticky;top:0;height:100vh;z-index:1}
+.sb-brand{display:flex;align-items:center;gap:9px;padding:0 10px 22px;color:var(--coral)}
+.sb-brand:hover{color:var(--coral)}
+.sb-brand .brand-mark{width:24px;height:24px;flex:none}
+.sb-word{font-size:21px;font-weight:650;letter-spacing:-0.02em;color:var(--text)}
+.sb-why{color:var(--coral)}
+.sb-project{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--white-09);margin-bottom:22px}
+.sb-project-link{color:inherit;transition:background .15s,border-color .15s}
+.sb-project-link:hover{color:inherit;background:var(--raised);border-color:var(--white-16)}
+.sb-project-go{margin-left:auto;flex:none;align-self:center;color:var(--text-3);font-size:18px;line-height:1}
+.sb-project-link:hover .sb-project-go{color:var(--text)}
+.sb-project-mark{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--white-06);border:1px solid var(--white-10);color:var(--text);font-size:13px;font-weight:650}
+.sb-project-text{min-width:0;display:flex;flex-direction:column;gap:1px}
+.sb-project-label{font-size:12px;font-weight:600;color:var(--text-3)}
+.sb-project-name{font-size:14px;font-weight:600;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sb-project-place{font-family:var(--mono);font-size:12.5px;line-height:1.4;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sb-nav{display:flex;flex-direction:column;gap:4px}
+.sb-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid transparent;color:var(--text-2);font-size:15px;font-weight:500}
+.sb-item:hover{color:var(--text);background:var(--white-02)}
+.sb-active{background:var(--coral-08);border-color:var(--coral-30);color:var(--text)}
+.sb-active:hover{background:var(--coral-08)}
+.sb-count{font-size:12.5px;font-weight:600;border-radius:999px;padding:2px 8px;color:var(--text-2);background:var(--white-06)}
+.sb-count-coral{color:var(--on-coral);background:var(--coral)}
+.sb-foot{margin-top:auto;display:flex;flex-direction:column;gap:14px}
+.sb-lang{align-self:flex-start;margin:0 10px;background:var(--card);color:var(--text-2);border:1px solid var(--white-10);border-radius:8px;padding:5px 8px;font:inherit;font-size:13px}
+.sb-local{padding:16px 10px 0;border-top:1px solid var(--white-07);display:flex;gap:10px;font-size:13px;line-height:1.5;color:var(--text-2)}
+.sb-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--mint);margin-top:6px}
+@media (max-width:860px){
+.sb{position:static;width:auto;height:auto;border-right:0;border-bottom:1px solid var(--white-07);padding:16px}
+.sb-brand{padding:0 4px 14px}.sb-project{margin-bottom:12px}
+.sb-nav{flex-direction:row;overflow-x:auto;gap:6px}.sb-item{white-space:nowrap}
+.sb-foot{flex-direction:row;align-items:center;justify-content:space-between;margin-top:12px}.sb-local{border-top:0;padding:0}.sb-lang{margin:0}
+}
+`;

package/dist/report/render/ui/ask-panel.js

@@ -0,0 +1,80 @@
+import { textButton } from './button.js';
+/**
+ * The questions and their answers. Its trigger (`askTrigger`) may sit elsewhere - a window's foot - and names it by id.
+ * `open` has no trigger at all: the questions are always there (`askCard`).
+ */
+export function askPanel(questions, id, open = false) {
+    return '<div class="ak-box' + (open ? ' ak-open' : '') + '" id="' + id + '" data-ask>' +
+        '<div class="ak-answer" data-ask-answer hidden></div>' +
+        '<div class="ak-questions js-only">' + questions.map((each, at) => '<button type="button" class="ak-q" data-ask-q="' + at + '">' + each.question + '</button>').join('') + '</div>' +
+        '<dl class="ak-all">' + questions.map((each, at) => '<dt>' + each.question + '</dt><dd data-ask-a="' + at + '">' + each.answer + '</dd>').join('') + '</dl>' +
+        '</div>';
+}
+/** "✦ I'm stuck": opens and closes the panel it names. With no script the panel is always open, so it has nothing to do. */
+export function askTrigger(label, id) {
+    return textButton(label, ' aria-expanded="false" aria-controls="' + id + '" data-ask-toggle', 'ak-trigger js-only');
+}
+/**
+ * "✦ Not sure what to pick? Ask me." (spec §7.1): the same questions and written answers, always open, in a coral card
+ * under a view's content (Settings, one card per tab).
+ */
+export function askCard(title, questions, id) {
+    return '<section class="ak-card"><div class="ak-card-head"><span class="ak-card-mark" aria-hidden="true">✦</span>' +
+        '<span class="ak-card-title">' + title + '</span></div>' + askPanel(questions, id, true) + '</section>';
+}
+/**
+ * A written answer laid out to be read at a glance: the short answer first, in bold, then one point per line. The lines
+ * of `text` are split on a newline; a single line stays as it is.
+ */
+export function writtenAnswer(text) {
+    const [lead = '', ...points] = text.split('\n');
+    if (points.length === 0)
+        return lead;
+    return '<strong class="ak-lead">' + lead + '</strong>' + points.map((point) => '<span class="ak-point">' + point + '</span>').join('');
+}
+export const ASK_PANEL_STYLE = String.raw `
+.ak-trigger{color:var(--coral-text)}.ak-trigger:hover{color:var(--coral-link-hover)}
+.ak-box{margin-top:22px;padding:16px;border-radius:14px;background:var(--panel);border:1px solid var(--white-08)}
+.js .ak-box:not(.ak-open){display:none}
+.js .ak-all{display:none}
+.ak-answer{font-size:15px;line-height:1.55;color:var(--text);margin-bottom:14px}
+.ak-questions{display:flex;gap:8px;flex-wrap:wrap}
+.js .ak-questions.js-only{display:flex}
+.ak-q{background:transparent;border:1px solid var(--white-12);color:var(--text-soft);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
+.ak-q:hover,.ak-q[aria-pressed="true"]{border-color:var(--coral-60)}
+.ak-all{margin:0}.ak-all dt{font-size:14px;font-weight:600;margin-top:12px}.ak-all dt:first-child{margin-top:0}
+.ak-all dd{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--text-2)}
+.ak-lead{display:block;font-weight:650;color:var(--text)}
+.ak-point{display:block;position:relative;padding-left:16px;margin-top:6px}
+.ak-point:before{content:"";position:absolute;left:3px;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--coral-text)}
+.ak-card{border-radius:14px;background:var(--coral-06);border:1px solid var(--coral-30);padding:16px 20px;margin:24px 0}
+.ak-card-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
+.ak-card-mark{flex:none;width:32px;height:32px;border-radius:50%;background:var(--coral-14);color:var(--coral-text);display:flex;align-items:center;justify-content:center;font-size:14px}
+.ak-card-title{font-size:15.5px;font-weight:600}
+.ak-card .ak-box{margin:0;padding:0;background:none;border:0}
+.ak-card .ak-answer{background:var(--panel);border:1px solid var(--white-08);border-radius:12px;padding:14px 16px;margin-bottom:12px}
+.ak-card .ak-q{border-color:var(--white-14);padding:7px 13px;font-size:13.5px}
+`;
+/** Opens and closes the box, and shows the chosen question's answer, copied from the page's own answers. */
+export const ASK_PANEL_SCRIPT = String.raw `
+document.addEventListener('click', (event) => {
+  const toggle = event.target.closest('[data-ask-toggle]');
+  if (toggle) {
+    const panel = document.getElementById(toggle.getAttribute('aria-controls'));
+    if (!panel) return;
+    const open = !panel.classList.contains('ak-open');
+    panel.classList.toggle('ak-open', open);
+    toggle.setAttribute('aria-expanded', String(open));
+    return;
+  }
+  const question = event.target.closest('[data-ask-q]');
+  if (!question) return;
+  const panel = question.closest('[data-ask]');
+  const at = question.getAttribute('data-ask-q');
+  const answer = panel.querySelector('[data-ask-a="' + at + '"]');
+  const slot = panel.querySelector('[data-ask-answer]');
+  panel.querySelectorAll('[data-ask-q]').forEach((each) => each.setAttribute('aria-pressed', String(each === question)));
+  slot.innerHTML = answer ? answer.innerHTML : '';
+  slot.hidden = !answer;
+});
+`;

package/dist/report/render/ui/avatar.js

@@ -0,0 +1,19 @@
+import { escapeHtml as e } from '../html-report-components.js';
+/** Initials come from the page's own naming (`AI`, `H` and an ordinal), never from transcript text; escaped anyway. */
+export function avatar(initials, tone, size = 42) {
+    return '<span class="av av-' + tone + ' av-' + size + '" aria-hidden="true">' + e(initials) + '</span>';
+}
+/** Several readers of one file, overlapping (Advanced, "Read by"). */
+export function avatarGroup(avatars) {
+    return '<span class="avg">' + avatars.map((each) => avatar(each.initials, each.tone, 30)).join('') + '</span>';
+}
+export const AVATAR_STYLE = String.raw `
+.av{flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
+.av-42{width:42px;height:42px;font-size:14px}.av-40{width:40px;height:40px;font-size:12.5px}.av-30{width:30px;height:30px;font-size:11px}
+.av-coral{background:var(--coral-16);color:var(--coral-text)}
+.av-alert{background:var(--coral);color:var(--on-coral)}
+.av-mint{background:var(--mint-14);color:var(--mint)}
+.av-grey{background:var(--raised-2);color:var(--text-2)}
+.av-40{border:1px solid var(--white-10)}.av-40.av-alert{border-color:var(--coral)}
+.avg{display:flex}.avg .av{margin-right:-6px;border:2px solid var(--card)}
+`;

package/dist/report/render/ui/backdrop.js

@@ -0,0 +1,29 @@
+/**
+ * The page's background: the warm glow of the design files at the top, and the still field of points the index has
+ * always had behind it, kept at the maintainer's request (2026-09-23) over the guidelines' "no dots". It says
+ * nothing and takes no pointer; it is written into the page, so a page with no script is the page that was designed.
+ *
+ * `bd-mint` on it turns a mint glow on over the warm one: the onboarding's Done, whose one message is that all is well
+ * (`.ai/specs/2026-09-24-onboarding.md` W2, W17). A page's script sets it; without one the glow stays warm.
+ */
+export function backdrop() {
+    return '<div class="bd" aria-hidden="true">' + stars(65) + '</div>';
+}
+/**
+ * The field of points itself, `count` of them spread over the box that holds them: the page's, and a wide window's,
+ * which carries the page's sky with it (`popup.ts`; the maintainer, 2026-09-25). Always the same points, so a page
+ * written twice is the same page.
+ */
+export function stars(count) {
+    return Array.from({ length: count }, (_unused, at) => '<i class="bd-star' + (at % 17 === 0 ? ' bd-cross' : '') + '" style="left:' + ((at * 47.37 + 8) % 100).toFixed(2) +
+        '%;top:' + ((at * 29.83 + 3) % 100).toFixed(2) + '%;opacity:' + (0.12 + (at % 5) * 0.055).toFixed(3) + '"></i>').join('');
+}
+export const BACKDROP_STYLE = String.raw `
+.bd{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;background:radial-gradient(1200px 520px at 60% -120px,var(--glow) 0%,var(--glow-mid) 55%,var(--bg) 100%)}
+.bd:after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .8s ease;background:radial-gradient(1100px 560px at 50% -140px,var(--glow-mint) 0%,transparent 70%),radial-gradient(900px 600px at 50% 38%,var(--mint-16),transparent 65%)}
+.bd-mint:after{opacity:1}
+.bd-star{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--star);box-shadow:0 0 6px var(--star-glow);opacity:.3}
+.bd-cross{width:3px;height:3px;opacity:.5}
+.bd-cross:after,.bd-cross:before{content:"";position:absolute;background:var(--star-cross)}
+.bd-cross:after{height:7px;width:1px;left:1px;top:-2px}.bd-cross:before{width:7px;height:1px;left:-2px;top:1px}
+`;

package/dist/report/render/ui/brand-mark.js

@@ -0,0 +1,4 @@
+/** The knot every page carries beside the wordmark, drawn in the current colour. */
+export const BRAND_MARK = '<svg class="brand-mark" viewBox="-3 -2 46 44" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" aria-hidden="true">' +
+    '<path d="m17 25-3 3a7.07 7.07 0 0 1-10-10l8-8a7.07 7.07 0 0 1 10 0"/>' +
+    '<path d="m23 15 3-3a7.07 7.07 0 0 1 10 10l-8 8a7.07 7.07 0 0 1-10 0"/></svg>';

package/dist/report/render/ui/button.js

@@ -0,0 +1,67 @@
+export function pill(spec) {
+    const cls = 'pill pill-' + spec.tone + ' pill-' + (spec.size ?? 'md');
+    const attributes = spec.attributes ?? '';
+    if (spec.button === true)
+        return '<button type="button" class="' + cls + '"' + attributes + '>' + spec.label + '</button>';
+    return spec.href === undefined
+        ? '<span class="' + cls + '"' + attributes + '>' + spec.label + '</span>'
+        : '<a class="' + cls + '" href="' + spec.href + '"' + attributes + '>' + spec.label + '</a>';
+}
+/** Coral words that act: "Back to this week", "✦ I'm stuck". A link, so it works with no script. Attributes arrive escaped. */
+export function textLink(label, href, attributes = '') {
+    return '<a class="text-link" href="' + href + '"' + attributes + '>' + label + '</a>';
+}
+/** Coral words that act where there is nowhere to go: a script's control. */
+export function textButton(label, attributes = '', className = '') {
+    return '<button type="button" class="text-link text-button' + (className === '' ? '' : ' ' + className) + '"' + attributes + '>' + label + '</button>';
+}
+/** The round × of a window. Its name is given in every language through `attributes` (`labelAttributes`). */
+export function closeButton(attributes, size = 'md') {
+    return '<button type="button" class="close close-' + size + '"' + attributes + '>×</button>';
+}
+/** A bin: a simple glyph (guidelines §9.3), drawn the same wherever something is taken out. */
+export const TRASH_SVG = '<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+    '<path d="M4 7h16M9 7V4.5h6V7M6 7l1 13h10l1-13"/></svg>';
+/**
+ * A row's round bin: takes out what the row holds. Its name is given in every language through `attributes`
+ * (`labelAttributes`). Given `href`, it is a link to the window that confirms it, so it works without a script too.
+ */
+export function trashButton(attributes, href) {
+    return href === undefined
+        ? '<button type="button" class="close close-md trash"' + attributes + '>' + TRASH_SVG + '</button>'
+        : '<a class="close close-md trash" href="' + href + '"' + attributes + '>' + TRASH_SVG + '</a>';
+}
+export const BUTTON_STYLE = String.raw `
+.pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:999px;font:inherit;font-weight:600;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
+.pill-sm{font-size:13px;font-weight:650;padding:6px 12px;border-radius:8px}
+.pill-md{font-size:14px;padding:8px 16px}
+.pill-task{font-size:14px;padding:10px 18px}
+.pill-lg{flex:none;font-size:15px;padding:11px 20px}
+.pill-primary{background:var(--coral);color:var(--on-coral);border-color:var(--coral)}
+a.pill-primary:hover,button.pill-primary:hover{background:var(--coral-hover);border-color:var(--coral-hover);color:var(--on-coral)}
+.pill-mint{background:var(--mint);color:var(--on-mint);border-color:var(--mint)}
+a.pill-mint:hover,button.pill-mint:hover{background:var(--mint-hover);border-color:var(--mint-hover);color:var(--on-mint)}
+.pill-light{background:var(--text);color:var(--bg);border-color:var(--text)}
+a.pill-light:hover,button.pill-light:hover{background:var(--white);border-color:var(--white);color:var(--bg);transform:translateY(-1px)}
+.pill-outline{background:transparent;color:var(--text-soft);border-color:var(--white-14)}
+a.pill-outline:hover,button.pill-outline:hover{background:var(--white-05);color:var(--text)}
+.pill-outline-coral{background:transparent;color:var(--coral-text);border-color:var(--coral-50)}
+a.pill-outline-coral:hover,button.pill-outline-coral:hover{background:var(--coral-08);border-color:var(--coral);color:var(--coral-text)}
+.pill-secondary{background:transparent;color:var(--text);border-color:var(--white-14);font-weight:500}
+.pill-secondary.pill-md{padding:9px 16px}
+a.pill-secondary:hover,button.pill-secondary:hover{background:var(--white-05);color:var(--white)}
+.pill-quiet{background:transparent;color:var(--text-4);border-color:var(--white-08);cursor:default}
+.text-link{color:var(--coral-text);font-size:14px;font-weight:600;padding:4px}
+.text-link:hover{color:var(--coral-link-hover)}
+.text-button{background:transparent;border:none;font:inherit;font-size:14px;font-weight:500;cursor:pointer;padding:6px 0}
+.close{flex:none;border-radius:50%;background:transparent;border:1px solid var(--white-12);color:var(--text-2);line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font:inherit}
+.close:hover{color:var(--text);border-color:var(--white-25)}
+.close-md{width:36px;height:36px;font-size:18px}.close-sm{width:34px;height:34px;font-size:18px}
+.trash svg{width:17px;height:17px}
+.trash:hover{color:var(--coral-text);border-color:var(--coral-50);background:var(--coral-08)}
+.pill-busy{pointer-events:none}
+.pill-busy>svg{display:none}
+.pill-busy::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:pillSpin .8s linear infinite}
+@keyframes pillSpin{to{transform:rotate(360deg)}}
+@media (prefers-reduced-motion:reduce){.pill-busy::before{animation:none;border-right-color:currentColor;opacity:.5}}
+`;

package/dist/report/render/ui/callout.js

@@ -0,0 +1,20 @@
+export function callout(spec) {
+    return '<div class="co co-' + spec.tone + '"' + (spec.attributes ?? '') + '>' +
+        '<span class="co-mark" aria-hidden="true">' + (spec.tone === 'coral' ? '!' : 'i') + '</span>' +
+        '<span class="co-body">' + spec.body + '</span>' +
+        (spec.action === undefined ? '' : '<span class="co-action">' + spec.action + '</span>') +
+        '</div>';
+}
+export const CALLOUT_STYLE = String.raw `
+.co{display:flex;gap:16px}
+.co-coral{align-items:center;flex-wrap:wrap;padding:16px 20px;border-radius:14px;background:var(--coral-06);border:1px solid var(--coral-35);margin-bottom:14px}
+.co-grey{align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;background:var(--panel);border:1px solid var(--white-08)}
+.co-mark{flex:none;border-radius:50%;font-weight:700;display:flex;align-items:center;justify-content:center}
+.co-coral .co-mark{width:28px;height:28px;background:var(--coral);color:var(--on-coral);font-size:14px}
+.co-grey .co-mark{width:22px;height:22px;background:var(--white-08);color:var(--text-soft);font-size:12px}
+.co-body{flex:1;min-width:0}
+.co-coral .co-body{min-width:220px;font-size:15px;line-height:1.5}
+.co-coral .co-body strong{font-weight:650}
+.co-grey .co-body{font-size:14.5px;line-height:1.55;color:var(--text-soft)}
+.co-action{flex:none}
+`;

package/dist/report/render/ui/chat-example.js

@@ -0,0 +1,17 @@
+export function chatExample(spec) {
+    return '<div class="ce">' +
+        '<span class="ce-who ce-who-' + spec.tone + '" aria-hidden="true">' + spec.ai + '</span>' +
+        '<span class="ce-say ce-say-' + spec.tone + '">' + spec.answer + '</span>' +
+        '</div>';
+}
+export const CHAT_EXAMPLE_STYLE = String.raw `
+.ce{display:flex;gap:8px;align-items:flex-start;margin-top:10px}
+.ce-say{font-size:13.5px;line-height:1.45;color:var(--text);padding:7px 12px;border-radius:4px 12px 12px 12px;border:1px solid transparent}
+.ce-say-coral{background:var(--coral-08);border-color:var(--coral-35)}
+.ce-say-mint{background:var(--mint-07);border-color:var(--mint-30)}
+.ce-say-grey{background:var(--white-04);border-color:var(--white-10)}
+.ce-who{flex:none;width:22px;height:22px;margin-top:3px;border-radius:50%;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
+.ce-who-coral{background:var(--coral-16);color:var(--coral-text)}
+.ce-who-mint{background:var(--mint-16);color:var(--mint)}
+.ce-who-grey{background:var(--white-08);color:var(--text-2)}
+`;

package/dist/report/render/ui/checklist.js

@@ -0,0 +1,50 @@
+import { pill } from './button.js';
+export function checklist(checks, tick) {
+    return '<ul class="ck" data-checklist>' + checks.map((check) => '<li class="ck-row"><div class="ck-text"><div class="ck-name">' + check.name + '</div><div class="ck-what">' + check.what + '</div></div>' +
+        (check.link === undefined ? '' : pill({
+            label: '<span>' + check.link.label + '</span><span aria-hidden="true">↗</span>',
+            tone: 'secondary',
+            href: check.link.href,
+            attributes: ' target="_blank" rel="noopener noreferrer"',
+        })) +
+        '<button type="button" class="ck-tick js-only" aria-pressed="false" data-check><span class="ck-mark">' + tick.mark + '</span>' +
+        '<span class="ck-done">✓ ' + tick.done + '</span></button></li>').join('') + '</ul>';
+}
+export const CHECKLIST_STYLE = String.raw `
+.ck{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
+.ck-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;padding:14px 16px;border-radius:14px;background:var(--raised);border:1px solid var(--white-07);transition:border-color .15s,box-shadow .15s}
+.ck-tick{flex:none;border-radius:999px;border:1px solid var(--white-18);background:transparent;color:var(--text);font:inherit;font-size:14px;font-weight:600;padding:8px 16px;cursor:pointer;white-space:nowrap}
+.ck-tick .ck-done{display:none}
+.ck-row.ck-on{border-color:var(--mint-35)}
+.ck-on .ck-tick{border-color:var(--mint-35);background:var(--mint-12);color:var(--mint)}
+.ck-on .ck-tick .ck-mark{display:none}.ck-on .ck-tick .ck-done{display:inline}
+.ck-row.ck-nudge{border-color:var(--coral-60);box-shadow:0 0 0 3px var(--coral-14)}
+.ck-text{flex:1 1 220px;min-width:0}
+.ck-name{font-size:16px;font-weight:600}
+.ck-on .ck-name{color:var(--text-2)}
+.ck-what{font-size:13.5px;color:var(--text-3);margin-top:2px}
+.ck-row .pill{flex:none;font-weight:500}
+.js .ck-row{cursor:pointer}.js .ck-row:hover{border-color:var(--white-18)}.js .ck-row:hover .ck-tick{background:var(--white-05)}
+.js .ck-row.ck-on:hover{border-color:var(--mint-50)}.js .ck-row.ck-on:hover .ck-tick{background:var(--mint-16)}
+`;
+/**
+ * A tick turns its row done and back, and so does a click anywhere on the row but its link: a person clicks the card,
+ * not the circle. The list says how many are ticked, so the wizard's button can say "I did all of
+ * them" only when it is true (F52).
+ */
+export const CHECKLIST_SCRIPT = String.raw `
+document.addEventListener('click', (event) => {
+  const row = event.target.closest('[data-checklist] .ck-row');
+  if (!row || event.target.closest('a')) return;
+  const tick = row.querySelector('[data-check]');
+  const on = !row.classList.contains('ck-on');
+  row.classList.toggle('ck-on', on);
+  row.classList.remove('ck-nudge');
+  tick.setAttribute('aria-pressed', String(on));
+  const list = tick.closest('[data-checklist]');
+  const all = list.querySelectorAll('.ck-row').length;
+  const ticked = list.querySelectorAll('.ck-row.ck-on').length;
+  list.dataset.ticked = String(ticked);
+  list.dispatchEvent(new CustomEvent('checklist', { bubbles: true, detail: { ticked, all } }));
+});
+`;

package/dist/report/render/ui/confirm-dialog.js

@@ -0,0 +1,34 @@
+import { pill } from './button.js';
+import { CLOSES, popup } from './popup.js';
+export function confirmDialog(spec) {
+    const title = spec.id + '-title';
+    return popup({
+        id: spec.id,
+        size: 'confirm',
+        labelledBy: title,
+        body: '<div class="cf">' +
+            (spec.glyph === '' ? '' : '<div class="cf-mark" aria-hidden="true">' + (spec.glyph ?? '⊘') + '</div>') +
+            '<h3 class="cf-title" id="' + title + '">' + spec.title + '</h3>' +
+            (spec.subject === '' ? '' : '<div class="cf-subject">' + spec.subject + '</div>') +
+            '<p class="cf-sentence">' + spec.sentence + '</p>' +
+            (spec.detail === undefined ? '' : '<div class="cf-detail">' + spec.detail + '</div>') +
+            (spec.option === '' ? '' : '<div class="cf-option">' + spec.option + '</div>') +
+            (spec.note ?? '') +
+            '<div class="cf-actions">' +
+            pill({ label: spec.cancel, tone: 'outline', size: 'lg', button: true, attributes: CLOSES }) +
+            pill({ label: spec.confirm, tone: spec.tone ?? 'mint', size: 'lg', button: true, attributes: spec.confirmAttributes }) +
+            '</div></div>',
+    });
+}
+export const CONFIRM_DIALOG_STYLE = String.raw `
+.cf{padding:28px}
+.cf-mark{width:48px;height:48px;border-radius:50%;background:var(--mint-14);color:var(--mint);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px}
+.cf-title{margin:0 0 8px;font-size:22px;line-height:1.25;font-weight:650}
+.cf-subject{margin-bottom:16px}
+.cf-sentence{margin:0 0 24px;font-size:15px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
+.cf-option{margin:-12px 0 24px;font-size:14px;color:var(--text-2)}
+.cf-detail{margin:-12px 0 24px;font-size:15px;line-height:1.5;color:var(--text-soft)}
+.cf-detail ul{margin:0;padding-left:20px;display:grid;gap:8px}
+.cf-actions{display:flex;justify-content:flex-end;gap:10px}
+.cf-actions .pill-outline{font-weight:400}
+`;

package/dist/report/render/ui/data-table.js

@@ -0,0 +1,49 @@
+export function dataTable(table) {
+    const grid = ' style="grid-template-columns:' + table.columns + ';min-width:' + table.minWidth + 'px"';
+    return '<div class="dt" role="table"' + (table.attributes ?? '') + '>' +
+        '<div class="dt-head" role="row"' + grid + '>' + table.head.map((cell) => '<span role="columnheader">' + cell + '</span>').join('') + '</div>' +
+        table.rows.map((row) => 'group' in row ? group(row, table.minWidth) : 'note' in row ? note(row, table.minWidth) :
+            '<div class="dt-row' + (row.href === undefined ? '' : ' dt-linked') + '" role="row"' + grid + (row.attributes ?? '') + '>' +
+                (row.bar === true ? '<span class="dt-bar' + (row.barTone === undefined ? '' : ' dt-bar-' + row.barTone) + '" aria-hidden="true"></span>' : '') +
+                // The link sits in the first cell, since a row holds cells and nothing else; the cell is not positioned, so the
+                // link still stretches over the whole row.
+                row.cells.map((cell, at) => '<span class="dt-cell" role="cell">' + (at === 0 ? link(row) : '') + cell + '</span>').join('') +
+                '</div>').join('') +
+        (table.empty === undefined ? '' : '<div class="dt-empty" role="row" hidden><span role="cell">' + table.empty + '</span></div>') +
+        '</div>';
+}
+function group(row, minWidth) {
+    return '<div class="dt-group" role="row" style="min-width:' + minWidth + 'px"' + (row.attributes ?? '') + '><span class="dt-group-cell" role="cell">' +
+        '<span class="dt-group-dot dt-group-' + (row.tone ?? 'grey') + '" aria-hidden="true"></span>' + row.group +
+        (row.count === undefined ? '' : '<span class="dt-group-count">' + row.count + '</span>') + '</span></div>';
+}
+function note(row, minWidth) {
+    return '<div class="dt-note" role="row" style="min-width:' + minWidth + 'px"' + (row.attributes ?? '') + '><span class="dt-note-cell" role="cell">' + row.note + '</span></div>';
+}
+function link(row) {
+    return row.href === undefined ? '' :
+        '<a class="dt-link" href="' + row.href + '"' + (row.label === undefined ? '' : ' aria-label="' + row.label + '"') + (row.linkAttributes ?? '') + '></a>';
+}
+export const DATA_TABLE_STYLE = String.raw `
+.dt{border-radius:14px;background:var(--card);border:1px solid var(--white-09);overflow-x:auto;overflow-y:hidden}
+.dt-head,.dt-row{display:grid;column-gap:18px}
+.dt-head{padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--white-08);font-size:12.5px;font-weight:600;color:var(--text-3)}
+.dt-row{align-items:center;position:relative;padding:16px 20px;border-bottom:1px solid var(--white-06);color:var(--text)}
+.dt-row[hidden]{display:none}
+.dt-linked:hover{background:var(--white-02)}
+.dt-link{position:absolute;inset:0;z-index:1;border-radius:0}
+.dt-link:focus-visible{outline-offset:-2px}
+.dt-cell{min-width:0}
+.dt-bar{position:absolute;left:0;top:15%;height:70%;width:2px;border-radius:0 2px 2px 0;background:var(--coral)}
+.dt-bar-sand{background:var(--sand)}
+.dt-group{padding:10px 20px;background:var(--panel);border-bottom:1px solid var(--white-08);font-size:12.5px;font-weight:600;letter-spacing:0.02em;color:var(--text-2)}
+.dt-group[hidden]{display:none}
+.dt-group-cell{display:flex;align-items:center;gap:8px}
+.dt-group-dot{width:7px;height:7px;border-radius:50%;flex:none}
+.dt-group-coral{background:var(--coral)}.dt-group-amber{background:var(--amber)}.dt-group-mint{background:var(--mint)}.dt-group-sand{background:var(--sand)}.dt-group-blue{background:var(--blue)}.dt-group-grey{background:var(--white-25)}
+.dt-group-count{font-weight:500;color:var(--text-3)}
+.dt-note{padding:10px 20px;border-bottom:1px solid var(--white-06)}
+.dt-note[hidden]{display:none}
+.dt-note-cell{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--text-3)}
+.dt-empty{padding:28px;text-align:center;font-size:14px;color:var(--text-3)}
+`;

package/dist/report/render/ui/drawer.js

@@ -0,0 +1,25 @@
+import { closeButton } from './button.js';
+import { CLOSES } from './popup.js';
+export function drawer(spec) {
+    return '<dialog class="dr" id="' + spec.id + '" aria-labelledby="' + spec.labelledBy + '">' +
+        '<div class="dr-head"><span class="dr-dot dr-dot-' + spec.tone + '" aria-hidden="true"></span>' +
+        '<div class="dr-name"><div class="dr-title" id="' + spec.labelledBy + '">' + spec.title + '</div><div class="dr-sub">' + spec.sub + '</div></div>' +
+        closeButton(spec.closeLabel + CLOSES, 'sm') + '</div>' +
+        '<div class="dr-body">' + spec.body + '</div>' +
+        (spec.foot === undefined ? '' : '<div class="dr-foot">' + spec.foot + '</div>') +
+        '</dialog>';
+}
+export const DRAWER_STYLE = String.raw `
+dialog.dr{margin:0 0 0 auto;padding:0;height:100%;max-height:100%;width:480px;max-width:100%;border:0;border-left:1px solid var(--white-08);background:var(--popup);color:var(--text)}
+dialog.dr[open]{display:flex;flex-direction:column}
+dialog.dr::backdrop{background:var(--scrim)}
+html:not(.js) dialog.dr:target{display:flex;flex-direction:column;position:static;height:auto;margin:24px 0 24px auto}
+.dr-head{display:flex;align-items:center;gap:14px;padding:22px 24px;border-bottom:1px solid var(--white-07)}
+.dr-dot{flex:none;width:10px;height:10px;border-radius:50%}
+.dr-dot-coral{background:var(--coral)}.dr-dot-amber{background:var(--amber)}.dr-dot-blue{background:var(--blue)}.dr-dot-mint{background:var(--mint)}.dr-dot-grey{background:var(--text-4)}
+.dr-name{flex:1;min-width:0}
+.dr-title{font-size:19px;font-weight:650}
+.dr-sub{font-size:13px;color:var(--text-3);margin-top:2px}
+.dr-body{padding:24px;flex:1;overflow:auto;display:flex;flex-direction:column;gap:24px}
+.dr-foot{padding:18px 24px;border-top:1px solid var(--white-07)}
+`;