cbrowser 20.2.2 → 21.0.0

package/dist/mcp-tools/widget-kit.js

@@ -196,7 +196,8 @@ const CSS = `
   .act:focus-visible{outline:2px solid #fff;outline-offset:2px}
   .hero.bare .act{background:var(--brand);color:#fff;border-color:transparent}
   .facts{display:flex;flex-wrap:wrap;gap:.34rem;margin:.7rem 0 0}
-  .fact{display:inline-flex;align-items:baseline;gap:.34rem;padding:.24rem .52rem;
+  .fact b.rk,.fact .nw{white-space:nowrap}
+  .fact{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .34rem;padding:.24rem .52rem;
     border:1px solid rgba(255,255,255,.32);border-radius:6px;background:rgba(255,255,255,.10)}
   .fact b{font:650 .82rem/1 var(--mono);font-variant-numeric:tabular-nums;color:#fff}
   .fact span{font-size:.74rem;color:#fff}
@@ -313,6 +314,8 @@ const CSS = `
   .mgrrow:hover{background:color-mix(in oklch,var(--accent) 12%,transparent)}
   .mgrrow.on{background:color-mix(in oklch,var(--accent) 22%,transparent);
     box-shadow:inset 3px 0 0 var(--accent)}
+  /* --sub on the selected row's accent tint measured 4.03:1. */
+  .mgrrow.on .cap{color:var(--ink)}
   .mgrrow:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
   .mgrname{font-size:.85rem;font-weight:600}
   .modetabs{display:flex;gap:.3rem;flex-wrap:wrap;margin:.4rem 0 .5rem}
@@ -341,7 +344,7 @@ const CSS = `
   .editbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.75rem;
     padding-top:.75rem;border-top:1px solid var(--line)}
   .btn{font:inherit;font-size:.8rem;padding:.35rem .7rem;border-radius:.375rem;
-    border:1px solid var(--line);background:var(--accent);color:#fff;cursor:pointer}
+    border:1px solid var(--line);background:var(--accent);color:var(--on-accent);cursor:pointer}
   .btn:disabled{opacity:.45;cursor:default}
   .btn.ghost{background:none;color:var(--sub)}
   .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@@ -396,10 +399,12 @@ const CSS = `
   .chain button.seg:hover .track,.chain button.seg:focus-visible .track{outline:2px solid var(--brand);outline-offset:2px}
   .chain button.seg:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
   .chain button.seg[aria-expanded="true"] .lbl{text-decoration:underline}
-  .chain .noov{flex:0 0 auto;font-size:.7rem;opacity:.55;margin-left:.35rem}
+  /* --sub, not opacity: at .55 the tag measured 4.4:1 on a light host. */
+  .chain .noov{flex:0 0 auto;font-size:.7rem;color:var(--sub);margin-left:.35rem}
   .ovpane{margin:.6rem 0 1rem;padding:.6rem;border:1px solid rgba(127,127,127,.28);border-radius:6px}
   .ovpane img{max-width:100%;height:auto;display:block;border-radius:4px}
-  .ovpane .cap{font-size:.8rem;opacity:.8;margin:.45rem 0 0}
+  /* No opacity on the legend: at .8 it measured 3.59:1 on a light host. */
+  .ovpane .cap{font-size:.8rem;margin:.45rem 0 0}
   @media (max-width:520px){
     /* The fixed 9.5rem label column took a third of a 393px viewport and left
        the bars as stubs — the one thing the block exists to show. Labels move
@@ -415,11 +420,16 @@ const CSS = `
   .ampnote{font-size:.8rem;opacity:.75;margin:.45rem 0 0}
   .scale{margin:1.5rem 0 .8rem}
   .bands{display:flex;gap:3px;position:relative}
+  /* Inactive bands are dimmed through their fill's alpha, not opacity:
+     opacity .42 dimmed the label with the fill, to 1.7-2.1:1. The active
+     band's fill is the same in both themes, so its label is not --ink (light
+     on an orange fill in dark) but whichever of near-black or near-white
+     reads on that fill, chosen in levelsBlock. */
   .band{flex:1;height:30px;border-radius:5px;display:grid;place-items:center;
     font:.62rem/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;
-    color:color-mix(in srgb, var(--ink) 78%, transparent);opacity:.42;
+    color:var(--ink);
     border:2px solid transparent;overflow:hidden;white-space:nowrap;padding:0 .2rem}
-  .band.on{opacity:1;border-color:var(--ink);font-weight:650}
+  .band.on{border-color:var(--ink);font-weight:650}
   .marker{position:absolute;top:-17px;transform:translateX(-50%);font:600 .64rem/1 var(--mono);
     color:var(--ink);white-space:nowrap;pointer-events:none}
   /* Stops at the band's top edge rather than crossing it. */
@@ -467,6 +477,89 @@ const CSS = `
   .offlist li{padding:.18rem 0;color:var(--sub)}
   .shot{max-width:100%;height:auto;display:block;border-radius:6px;border:1px solid var(--line)}
   .cap{font-size:.77rem;color:var(--sub);margin:.35rem 0 0}
+  /* Provenance: what an answer's numbers rest on. Status is named in text on
+     every row and chip; the colour of a swatch repeats it and never carries
+     it alone (WCAG 1.4.1). Chip text is the status hue mixed into --ink, the
+     same construction the severity chips use, so it follows the theme. */
+  .prov{font-size:.8rem;line-height:1.45;color:var(--sub);margin:.15rem 0 0}
+  .prov b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
+  .pint{margin:0 0 .6rem;font-size:.85rem}
+  .pint b{font-variant-numeric:tabular-nums}
+  .pstack{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--raise);margin:.2rem 0 .5rem}
+  .pstack i{display:block;height:100%}
+  .pcounts{list-style:none;padding:0;margin:0 0 .6rem}
+  .pcounts li{display:grid;grid-template-columns:auto 2.4rem 1fr;gap:.15rem .6rem;align-items:baseline;
+    padding:.32rem 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
+  .pcounts li:last-child{border-bottom:0}
+  .pnum{font:.82rem/1 var(--mono);text-align:right;font-variant-numeric:tabular-nums}
+  .pmean{font-size:.8rem;color:var(--sub)}
+  @media (max-width:30rem){
+    .pcounts li{grid-template-columns:auto 1fr}
+    .pcounts .pnum{text-align:left}
+    .pcounts .pmean{grid-column:1/-1}
+  }
+  .pchip{display:inline-flex;align-items:center;gap:.3rem;font:650 .64rem/1.2 var(--mono);letter-spacing:.05em;
+    text-transform:uppercase;padding:.16rem .38rem;border-radius:3px;white-space:nowrap;
+    background:var(--raise);color:var(--ink)}
+  .pchip .sw{width:8px;height:8px}
+  .pchip.hypothesis{background:color-mix(in srgb,var(--warn) 20%,transparent);color:color-mix(in srgb,var(--warn) 62%,var(--ink))}
+  .pchip.fitted{background:color-mix(in srgb,var(--ok) 20%,transparent);color:color-mix(in srgb,var(--ok) 55%,var(--ink))}
+  .pchip.published{background:color-mix(in srgb,var(--brand) 18%,transparent);color:color-mix(in srgb,var(--brand) 70%,var(--ink))}
+  .pchip.definition,.pchip.mixed{background:var(--raise);color:var(--ink)}
+  .pchip.custom{background:color-mix(in srgb,var(--brand-2) 20%,transparent);color:color-mix(in srgb,var(--brand-2) 55%,var(--ink))}
+  .psw-fitted{background:var(--ok)} .psw-published{background:var(--brand)}
+  .psw-definition{background:color-mix(in srgb,var(--ink) 35%,transparent)} .psw-hypothesis{background:var(--warn)}
+  .pscope{font-size:.79rem;color:var(--sub);margin:.4rem 0 0}
+  details.pids{margin:.6rem 0 0}
+  details.pids>summary{cursor:pointer;font-size:.8rem;color:var(--ink);padding:.25rem 0}
+  details.pids>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
+  .pgrp{font:600 .72rem/1.3 var(--mono);color:var(--sub);margin:.55rem 0 .2rem}
+  .pidl{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.2rem .35rem}
+  .pidl li{font:.7rem/1.35 var(--mono);color:var(--ink);background:var(--raise);border-radius:3px;
+    padding:.08rem .3rem;overflow-wrap:anywhere;max-width:100%}
+  /* Trait rows that carry a status: one fixed slot after the value on every
+     row, so the tracks stay aligned whether or not a row is marked. */
+  .pstatus{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .5rem;margin:0 0 .55rem;font-size:.79rem;color:var(--sub)}
+  .pstatus .pchip{flex:0 0 auto}
+  .pstatus span.ptext{flex:1 1 14rem;min-width:0}
+  .pslot{flex:0 0 4.4rem;display:flex;justify-content:flex-start}
+  .ptag{font:650 .6rem/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:.14rem .3rem;
+    border-radius:3px;border:1px solid var(--line);background:none;color:var(--ink);white-space:nowrap}
+  button.ptag{cursor:help;text-decoration:underline dotted currentColor;text-underline-offset:2px}
+  button.ptag:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+  @media (max-width:30rem){ .pslot{flex-basis:4.1rem} }
+  /* Rank among the real pages: the sentence, then a 0-100% scale with the
+     interval shaded and the point marked. The words carry the numbers; the
+     scale is the picture of them (role=img, labelled with the same words). */
+  .rank{margin:.2rem 0 .3rem}
+  .rankh{font-size:1rem;font-weight:600;margin:0 0 .55rem;color:var(--ink)}
+  .rscale{position:relative;height:14px;border-radius:7px;background:var(--raise);
+    box-shadow:inset 0 0 0 1px var(--line);margin:0 0 .25rem}
+  .rband{position:absolute;top:0;bottom:0;border-radius:7px;background:color-mix(in srgb,var(--brand) 38%,transparent)}
+  .rpoint{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--ink)}
+  .rticks{display:flex;justify-content:space-between;font:.68rem/1.2 var(--mono);color:var(--sub);margin:0 0 .45rem}
+  .rint{font-size:.8rem;line-height:1.45;color:var(--sub);margin:0}
+  /* Seconds against a budget. One ruler for every bar and the budget mark;
+     the largest is named in text, never by colour alone (WCAG 1.4.1). */
+  .lcap{font-size:.8rem;line-height:1.45;color:var(--sub);margin:0 0 .5rem}
+  .lawlist{list-style:none;padding:0;margin:0}
+  .law{padding:.45rem 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
+  .law:last-child{border-bottom:0}
+  .lhead{display:flex;align-items:baseline;gap:.45rem}
+  .lname{font-size:.86rem;font-weight:600;color:var(--ink)}
+  .ltag{font:650 .6rem/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:.12rem .3rem;
+    border-radius:3px;border:1px solid var(--ink);color:var(--ink)}
+  .ldetail{display:block;font-size:.76rem;line-height:1.4;color:var(--sub);margin:.1rem 0 .3rem}
+  .lrow{display:flex;align-items:center;gap:.6rem}
+  .ltrack{flex:1;min-width:0;position:relative;height:12px;border-radius:6px;background:var(--raise)}
+  .lfill{display:block;height:100%;border-radius:6px;background:var(--brand)}
+  .lbudget{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink)}
+  .lsec{flex:0 0 3.8rem;text-align:right;font:600 .8rem/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
+  .ldemand{flex:0 0 5.8rem;font:.74rem/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--sub)}
+  .lalt{font-size:.76rem;color:var(--sub);margin:.3rem 0 0}
+  .lkey{font-size:.74rem;color:var(--sub);margin:.45rem 0 0}
+  .lnote{font-size:.8rem;line-height:1.45;color:var(--sub);margin:.4rem 0 0}
+  @media (max-width:30rem){ .lsec{flex-basis:3.4rem} .ldemand{flex-basis:5.2rem;font-size:.7rem} }
   .foot{padding:0 18px 14px;font-size:.77rem;color:var(--sub)}
   .msg{padding:16px 18px;font-size:.85rem;color:var(--sub)}
   @media (max-width:420px){
@@ -713,8 +806,9 @@ const RUNTIME = String.raw `
    * write to two stores, and a slider dragged across its range would produce a
    * dozen persona versions of which only the last was meant.
    */
-  function editorBlock(rows, b, data) {
+  function editorBlock(rows, b, data, prov) {
     var wrap = el("div", "traits");
+    if (prov) wrap.appendChild(traitStatusLine(prov));
     var personaName = at(data, b.personaField || "persona") || at(data, "persona_name");
     var edited = {};
     var controls = [];
@@ -742,7 +836,9 @@ const RUNTIME = String.raw `
           ? Object.keys(edited).length + " unsaved change(s)" : "";
         save.disabled = !Object.keys(edited).length;
       });
-      line.appendChild(label); line.appendChild(input); line.appendChild(out); line.appendChild(orig);
+      line.appendChild(label); line.appendChild(input); line.appendChild(out);
+      if (prov) line.appendChild(traitTag(prov, name));
+      line.appendChild(orig);
       wrap.appendChild(line);
       controls.push({ name: name, input: input, out: out, base: v });
     });
@@ -839,6 +935,8 @@ const RUNTIME = String.raw `
         row.appendChild(el("span", "mgrname", String(p.name || "(unnamed)")));
         var meta = [];
         if (p.builtin) meta.push("built-in");
+        // Where the values come from, on the row that picks the persona.
+        if (p.provenance && p.provenance.label) meta.push(String(p.provenance.label));
         if (p.valuesRoute) meta.push(String(p.valuesRoute));
         if (meta.length) row.appendChild(el("span", "cap", meta.join(" · ")));
         row.addEventListener("click", function () {
@@ -859,6 +957,8 @@ const RUNTIME = String.raw `
       var traits = p.traits || {};
       var names = Object.keys(traits);
       var box = el("div", "traits");
+      var prov = p.provenance && p.provenance.status ? p.provenance : null;
+      if (prov) box.appendChild(traitStatusLine(prov));
       names.forEach(function (k) {
         var v = Number(traits[k]);
         if (!isFinite(v)) return;
@@ -879,6 +979,7 @@ const RUNTIME = String.raw `
             ? Object.keys(edited).length + " unsaved change(s) on " + p.name : "";
         });
         line.appendChild(input); line.appendChild(out);
+        if (prov) line.appendChild(traitTag(prov, k));
         box.appendChild(line);
       });
       pane.appendChild(box);
@@ -1100,8 +1201,9 @@ const RUNTIME = String.raw `
     return wrap;
   }
 
-  function traitsBlock(rows, b) {
+  function traitsBlock(rows, b, prov) {
     var wrap = el("div", "traits");
+    if (prov) wrap.appendChild(traitStatusLine(prov));
     rows.forEach(function (r) {
       var name = r.name, v = Number(r.value);
       if (!isFinite(v)) return;
@@ -1135,6 +1237,7 @@ const RUNTIME = String.raw `
       track.appendChild(fill);
       line.appendChild(track);
       line.appendChild(el("span", "tval", v.toFixed(2)));
+      if (prov) line.appendChild(traitTag(prov, String(name)));
       wrap.appendChild(line);
     });
     return wrap;
@@ -1157,6 +1260,319 @@ const RUNTIME = String.raw `
     return [];
   }
 
+  // One sentence from an object: the template for the value of its by key
+  // ("*" the fallback), with {key} filled from the object. A perceptual
+  // profile is {resolution, name}, and "default (default)" says nothing that
+  // "none: the generic default" does not say better.
+  function fillTemplate(obj, by, templates) {
+    if (!obj || typeof obj !== "object" || !templates) return null;
+    var key = by ? String(obj[by]) : "*";
+    var t = Object.prototype.hasOwnProperty.call(templates, key) ? templates[key] : templates["*"];
+    if (typeof t !== "string") return null;
+    return t.replace(/\{(\w+)\}/g, function (_m, k) {
+      return obj[k] === undefined || obj[k] === null ? "" : String(obj[k]);
+    });
+  }
+
+  // A percentile among the real reference pages, in the verdict's words.
+  // The numbers come from the payload's figures when it has them: the whole
+  // percents the verdict sentence states (cognitive_effort's rankFigures).
+  // The decimals beside them are rounded to three places, and recomputed
+  // from those a rank can differ by a point (0.8098 is stated 80; its 0.81
+  // reads 81). Without figures, rounded exactly as ctcRank (ctc-bands.ts)
+  // rounds: N and the interval's low end down, its high end up; at either end
+  // the rank says what it is and no interval is stated. The decimals still
+  // place the point and the band on the scale.
+  // tests/effort-view-laws.test.ts checks these numbers against ctcRank's.
+  function isPct(x) { return typeof x === "number" && isFinite(x) && x >= 0 && x <= 1; }
+  function pctDown(x) { return Math.floor(x * 100 + 1e-9); }
+  function pctUp(x) { return Math.ceil(x * 100 - 1e-9); }
+  function rankWords(t, iv, figures) {
+    if (!isPct(t)) return null;
+    var whole = function (x) { return typeof x === "number" && isFinite(x) && x >= 0 && x <= 100; };
+    var have = figures && typeof figures === "object" && (figures.end === "cheapest" || figures.end === "costliest" || whole(figures.percent));
+    var end = have ? (figures.end === "cheapest" || figures.end === "costliest" ? figures.end : null)
+      : t === 0 ? "cheapest" : t === 1 ? "costliest" : null;
+    var n = have ? figures.percent : pctDown(t);
+    var nText = n === 0 ? "under 1" : String(n);
+    var head = end === "cheapest" ? "At or below the cheapest real page we measured"
+      : end === "costliest" ? "At least as costly as the costliest real page we measured"
+      : "Costlier than " + nText + "% of the real pages we measured";
+    var chip = end === "cheapest" ? "at or below the cheapest" : end === "costliest" ? "as costly as the costliest" : "costlier than " + nText + "%";
+    var interval = null;
+    if (!end) {
+      if (have) {
+        var fi = figures.interval;
+        interval = Array.isArray(fi) && fi.length === 2 && whole(fi[0]) && whole(fi[1]) ? [fi[0], fi[1]] : null;
+      } else if (Array.isArray(iv) && iv.length === 2 && isPct(iv[0]) && isPct(iv[1])) {
+        interval = [pctDown(iv[0]), pctUp(iv[1])];
+      }
+    }
+    var drawn = interval && Array.isArray(iv) && iv.length === 2 && isPct(iv[0]) && isPct(iv[1]) ? iv : null;
+    return { t: t, iv: drawn, head: head, chip: chip, interval: interval };
+  }
+  function pctStyle(x) { return (Math.max(0, Math.min(1, x)) * 100).toFixed(4) + "%"; }
+
+  function rankBlock(data, b) {
+    var w = rankWords(at(data, b.field), b.intervalField ? at(data, b.intervalField) : null,
+      b.figuresField ? at(data, b.figuresField) : null);
+    if (!w) return null;
+    var level = b.level || 95;
+    var wrap = el("div", "rank");
+    wrap.appendChild(el("p", "rankh", w.head));
+    var scale = el("div", "rscale");
+    scale.setAttribute("role", "img");
+    scale.setAttribute("aria-label", w.head + (w.interval
+      ? "; " + level + "% interval " + w.interval[0] + "% to " + w.interval[1] + "%" : ""));
+    if (w.interval && w.iv) {
+      var band = el("span", "rband");
+      band.style.left = pctStyle(w.iv[0]);
+      band.style.width = pctStyle(w.iv[1] - w.iv[0]);
+      scale.appendChild(band);
+    }
+    var point = el("span", "rpoint");
+    point.style.left = pctStyle(w.t);
+    scale.appendChild(point);
+    wrap.appendChild(scale);
+    var ticks = el("div", "rticks");
+    ticks.setAttribute("aria-hidden", "true");
+    ["0%", "50%", "100%"].forEach(function (x) { ticks.appendChild(el("span", null, x)); });
+    wrap.appendChild(ticks);
+    if (w.interval) {
+      wrap.appendChild(el("p", "rint", level + "% interval: " + w.interval[0] + "% to " + w.interval[1]
+        + "% of the real pages. That is how firmly the reference pages fix this rank, not whether the cost is right."));
+    }
+    return wrap;
+  }
+
+  // Seconds against one budget: every bar and the budget mark on one ruler,
+  // the largest named in text.
+  function timesBlock(data, b) {
+    var o = at(data, b.field);
+    if (!o || typeof o !== "object") return null;
+    var budget = Number(o[b.budgetKey]);
+    var rows = (b.rows || []).map(function (r) {
+      var x = o[r.key];
+      return x && typeof x === "object" && isFinite(Number(x.seconds)) ? { r: r, x: x, sec: Number(x.seconds) } : null;
+    }).filter(function (e) { return e; });
+    if (!rows.length || !(budget > 0)) return null;
+    var max = Math.max.apply(null, rows.map(function (e) { return e.sec; }).concat([budget]));
+    var top = rows.reduce(function (a, e) { return e.sec > a.sec ? e : a; }, rows[0]);
+    var wrap = el("div", "laws");
+    var bud = num(budget);
+    wrap.appendChild(el("p", "lcap", "Seconds of work this page asks of a typical first-time visitor, by law, against a "
+      + bud + " s time budget. Each is a demand d = T / (T + " + bud + " s): a law that takes the whole budget makes a demand of 0.5."));
+    var ul = el("ul", "lawlist");
+    rows.forEach(function (e) {
+      var li = el("li", "law");
+      var head = el("div", "lhead");
+      head.appendChild(el("span", "lname", e.r.label));
+      if (e === top) head.appendChild(el("span", "ltag", "largest"));
+      li.appendChild(head);
+      li.appendChild(el("span", "ldetail", rowDetail(e.r, e.x)));
+      var row = el("div", "lrow");
+      var track = el("div", "ltrack");
+      track.setAttribute("aria-hidden", "true");
+      var fill = el("i", "lfill");
+      fill.style.width = pctStyle(e.sec / max);
+      var mark = el("span", "lbudget");
+      mark.style.left = pctStyle(budget / max);
+      track.appendChild(fill);
+      track.appendChild(mark);
+      row.appendChild(track);
+      row.appendChild(el("span", "lsec", e.sec.toFixed(1) + " s"));
+      row.appendChild(el("span", "ldemand", "demand " + Number(e.x.demand).toFixed(2)));
+      li.appendChild(row);
+      var alt = e.r.alt;
+      if (alt && isFinite(Number(e.x[alt.secondsKey]))) {
+        li.appendChild(el("p", "lalt", alt.label + " (" + alt.fractionLabel + " " + num(Number(e.x[alt.fractionKey])) + "): "
+          + Number(e.x[alt.secondsKey]).toFixed(1) + " s, demand " + Number(e.x[alt.demandKey]).toFixed(2)));
+      }
+      ul.appendChild(li);
+    });
+    wrap.appendChild(ul);
+    wrap.appendChild(el("p", "lkey", "The mark across each bar is the " + bud + " s budget."));
+    if (b.caption && typeof b.caption.text === "string") {
+      var hv = b.caption.field ? at(data, b.caption.field) : undefined;
+      var here = hv === undefined || hv === null || hv === "" ? "" : String(b.caption.here || "").split("{value}").join(String(hv));
+      wrap.appendChild(el("p", "lnote", b.caption.text.split("{here}").join(here)));
+    }
+    return wrap;
+  }
+
+  // A row's detail: its template when every {key} in it is a number on the
+  // row's entry, else the plain detail, so a missing field never prints as a
+  // placeholder or falls back to a copied number.
+  function rowDetail(r, x) {
+    var t = r.detailTemplate;
+    if (typeof t !== "string") return r.detail;
+    var keys = (t.match(/\{(\w+)\}/g) || []).map(function (m) { return m.slice(1, -1); });
+    if (!keys.every(function (k) { return x && typeof x[k] === "number" && isFinite(x[k]); })) return r.detail;
+    return t.replace(/\{(\w+)\}/g, function (_m, k) { return num(x[k]); });
+  }
+
+  // What an answer's numbers rest on (model-provenance.ts). The statuses in
+  // reading order, from what data or the literature backs to what is set by
+  // hand, each with what the registry means by it. Through 21.0 the views
+  // drew these answers' numbers bare, and the summary fell into the rest dump
+  // with its hypothesis ids printed as one joined string.
+  var PROV_ORDER = ["fitted", "published", "definition", "hypothesis"];
+  var PROV_MEANING = {
+    fitted: "estimated from named data, with a held-out score",
+    published: "taken from a cited law or measurement in the literature",
+    definition: "a choice of units, scale or encoding; no empirical claim",
+    hypothesis: "set by hand; nothing in data or the literature backs the value yet",
+  };
+  var PROV_PHRASE = {
+    fitted: "fitted to data", published: "published",
+    definition: "definitions", hypothesis: "set by hand (hypotheses)",
+  };
+  function isProvenance(p) {
+    return !!(p && typeof p === "object" && p.counts && typeof p.counts === "object");
+  }
+  function provTotal(p) {
+    return PROV_ORDER.reduce(function (s, k) { return s + (Number(p.counts[k]) || 0); }, 0);
+  }
+
+  // One sentence of counts, every status named even at zero: "0 fitted to
+  // data" is the finding for a score, not an omission.
+  function provenanceLine(p, subject, seeAlso, qualifier) {
+    var line = el("p", "prov");
+    var total = provTotal(p);
+    line.appendChild(document.createTextNode("This " + (subject || "answer") + " reads "));
+    line.appendChild(el("b", null, String(total)));
+    line.appendChild(document.createTextNode(" registered constant" + (total === 1 ? "" : "s")
+      + (qualifier ? " " + qualifier : "") + ": "));
+    PROV_ORDER.forEach(function (k, i) {
+      if (i) line.appendChild(document.createTextNode(i === PROV_ORDER.length - 1 ? ", and " : ", "));
+      line.appendChild(el("b", null, String(Number(p.counts[k]) || 0)));
+      line.appendChild(document.createTextNode(" " + PROV_PHRASE[k]));
+    });
+    line.appendChild(document.createTextNode("." + (seeAlso ? ' What each means is under "' + seeAlso + '".' : "")));
+    return line;
+  }
+
+  function provenanceFull(p, b, data) {
+    var wrap = el("div");
+    // The interval comes first when the payload has one: it bounds the
+    // number itself, where the counts below say what the number is made of.
+    var iv = b.intervalField ? at(data, b.intervalField) : null;
+    if (Array.isArray(iv) && iv.length === 2 && isFinite(iv[0]) && isFinite(iv[1])) {
+      var pi = el("p", "pint");
+      pi.appendChild(el("b", null, (b.intervalLabel || "95% interval") + ": "));
+      pi.appendChild(document.createTextNode(b.intervalFormat === "percent"
+        ? pctDown(Number(iv[0])) + "% to " + pctUp(Number(iv[1])) + "%"
+        : num(Number(iv[0])) + " to " + num(Number(iv[1]))));
+      wrap.appendChild(pi);
+    }
+    wrap.appendChild(provenanceLine(p, b.subject, null));
+    var total = provTotal(p);
+    if (total > 0) {
+      // A picture of the shares. Hidden from assistive tech: the list under
+      // it says the same thing in text.
+      var stack = el("div", "pstack");
+      stack.setAttribute("aria-hidden", "true");
+      PROV_ORDER.forEach(function (k) {
+        var n = Number(p.counts[k]) || 0;
+        if (!n) return;
+        var seg = el("i", "psw-" + k);
+        seg.style.width = (n / total * 100) + "%";
+        stack.appendChild(seg);
+      });
+      wrap.appendChild(stack);
+    }
+    var ul = el("ul", "pcounts");
+    PROV_ORDER.forEach(function (k) {
+      var li = el("li");
+      var chip = el("span", "pchip " + k);
+      chip.appendChild(el("span", "sw psw-" + k));
+      chip.appendChild(document.createTextNode(k));
+      li.appendChild(chip);
+      li.appendChild(el("span", "pnum", String(Number(p.counts[k]) || 0)));
+      li.appendChild(el("span", "pmean", PROV_MEANING[k]));
+      ul.appendChild(li);
+    });
+    wrap.appendChild(ul);
+    if (p.scope) wrap.appendChild(el("p", "pscope", String(p.scope)));
+    if (p.note) wrap.appendChild(el("p", "pscope", String(p.note)));
+    var ids = Array.isArray(p.hypotheses) ? p.hypotheses : [];
+    if (ids.length) {
+      // Grouped by area (the id's first segment), behind a disclosure: a
+      // hundred ids are the evidence, not the summary.
+      var d = el("details", "pids");
+      d.appendChild(el("summary", null, "The " + ids.length + " hand-set constant" + (ids.length === 1 ? "" : "s")
+        + " it read, by area"));
+      var groups = {}, order = [];
+      ids.forEach(function (id) {
+        var g = String(id).split(".")[0];
+        if (!groups[g]) { groups[g] = []; order.push(g); }
+        groups[g].push(String(id));
+      });
+      order.forEach(function (g) {
+        d.appendChild(el("p", "pgrp", g + " (" + groups[g].length + ")"));
+        var l = el("ul", "pidl");
+        groups[g].forEach(function (id) { l.appendChild(el("li", null, id)); });
+        d.appendChild(l);
+      });
+      wrap.appendChild(d);
+    }
+    return wrap;
+  }
+
+  // Where a group of trait values comes from (trait-provenance.ts): a status
+  // line over the meters, and on a row, a tag where that value differs from
+  // the line: the model's default, a citation, or another registry status.
+  function traitProv(data, b) {
+    if (!b.provenanceField) return null;
+    used[b.provenanceField.split(".")[0]] = true;
+    var p = at(data, b.provenanceField);
+    return p && typeof p === "object" && p.status ? p : null;
+  }
+  function traitStatusLine(p) {
+    var box = el("div", "pstatus");
+    box.appendChild(el("span", "pchip " + String(p.status), String(p.label || p.status)));
+    box.appendChild(el("span", "ptext", String(p.note || "")));
+    var marks = [];
+    if (p.anchored && Object.keys(p.anchored).length) marks.push("anchored: the value is the percentile a published population mean implies on a normed instrument, still a hypothesis (select the tag for the source)");
+    if (p.cited && Object.keys(p.cited).length) marks.push("cited: a finding is cited for the direction of this value, not for its number (select the tag for the source)");
+    if (Array.isArray(p.unset) && p.unset.length) marks.push("default: the persona does not set this trait, so the model's default is shown");
+    if (p.statuses && Object.keys(p.statuses).length) marks.push("a status name: that value's registry status differs from the line above");
+    if (marks.length) box.appendChild(el("span", "ptext", "Marked on a row: " + marks.join("; ") + "."));
+    return box;
+  }
+  function traitTag(p, name) {
+    var slot = el("span", "pslot");
+    if (!p) return slot;
+    var cited = p.cited && p.cited[name];
+    var anch = p.anchored && p.anchored[name];
+    var st = p.statuses && p.statuses[name];
+    if (Array.isArray(p.unset) && p.unset.indexOf(name) >= 0) {
+      slot.appendChild(el("span", "ptag", "default"));
+    } else if (anch || cited) {
+      var word = anch ? "anchored" : "cited";
+      var btn = el("button", "ptag", word);
+      btn.type = "button";
+      btn.setAttribute("aria-describedby", "kit-tip");
+      btn.setAttribute("aria-label", word + ": source for " + titleize(name));
+      var iv = anch && Array.isArray(anch.interval) ? anch.interval : null;
+      var info = anch
+        ? { label: "Norm-anchored" + (st ? " (" + st + ")" : " (hypothesis)"),
+            description: String(anch.cite) + ". " + String(anch.reported) + "."
+              + (iv ? " Value interval " + iv[0] + " to " + iv[1] + "." : "")
+              + " Mapping the instrument onto this trait is cbrowser's choice, so the value stays a hypothesis." }
+        : { label: "Cited for direction" + (st ? " (" + st + ")" : ""),
+            description: String(cited.cite) + ", for " + String(cited["for"]) + ". That supports the direction of this persona's difference from typical users, not the number." };
+      btn.addEventListener("mouseenter", function () { showTip(btn, info); });
+      btn.addEventListener("focus", function () { showTip(btn, info); });
+      btn.addEventListener("mouseleave", hideTip);
+      btn.addEventListener("blur", hideTip);
+      slot.appendChild(btn);
+    } else if (st) {
+      slot.appendChild(el("span", "ptag", String(st)));
+    }
+    return slot;
+  }
+
   async function chainBlock(data, b) {
     var layers = at(data, b.field);
     if (!isObjArray(layers) || !layers.length) return null;
@@ -1243,6 +1659,11 @@ const RUNTIME = String.raw `
         node.alt = label + " overlay for this page: " + (ov.legend || "");
         pane.appendChild(node);
         if (ov.legend) pane.appendChild(el("p", "cap", String(ov.legend)));
+        // The map's own block: the attention model's constants, which the
+        // score's block leaves out because the map is context, not input.
+        if (isProvenance(ov.provenance)) {
+          pane.appendChild(provenanceLine(ov.provenance, "map", null, "of the attention model, counted apart from the score"));
+        }
       } catch (e) {
         pane.innerHTML = "";
         pane.appendChild(el("p", "cap", "Could not load the " + label + " overlay: " + (e && e.message ? e.message : e)));
@@ -1269,18 +1690,20 @@ const RUNTIME = String.raw `
     });
     wrap.appendChild(pane);
 
-    if (isFinite(additive) && isFinite(total) && additive > 0) {
+    if (isFinite(additive) && additive > 0) {
       var amp = el("div", "amp");
       // Computed BEFORE the bars that read it. var hoists, so declaring this
       // below its first use left the guard comparing undefined !== null, which
       // is true -- the guard passed and the bar was drawn with no value.
       //
-      // raw, not total: total is a sigmoid of raw, so plotting additive against
-      // it drew a 1.034 bar beside a 0.410 bar and told the 60%-less story in
-      // pixels while the caption underneath said +2%. Both bars are in
+      // The in-sequence total comes from totalField, which must be in
+      // layer-cost units like additive: cognitive_effort points it at raw. Its
+      // total was a logistic of raw and is now a percentile; plotting additive
+      // against it drew a 1.034 bar beside a 0.410 bar and told the 60%-less
+      // story in pixels while the caption underneath said +2%. Both bars are in
       // layer-cost units or the comparison is omitted.
-      var rawTotal = at(data, "cognitiveTransportCost.raw");
-      var ratio = typeof rawTotal === "number" ? rawTotal / additive : null;
+      var rawTotal = isFinite(total) ? total : null;
+      var ratio = rawTotal === null ? null : rawTotal / additive;
       var pct = ratio === null ? 0 : Math.round(Math.abs(1 - ratio) * 100);
       if (ratio !== null) {
         amp.appendChild(bar("sum of layers", additive, 205, false, null));
@@ -1297,11 +1720,12 @@ const RUNTIME = String.raw `
       // The mock payload used to build it had additive < total, which is the
       // one shape the tool has never actually produced. (2026-08-02)
       amp.appendChild(el("p", "ampnote",
-        // No raw total, no claim. Falling back to the sigmoid-squashed total
-        // here is what produced "about 60% less" on a chain that actually adds
-        // ~1%: total is a sigmoid and additive is not, so their ratio measures
-        // the squash, not the chain. A payload from before raw existed cannot
-        // answer this, and saying so beats answering it wrongly.
+        // No raw total, no claim. Falling back to the 0-1 total here is what
+        // produced "about 60% less" on a chain that actually adds ~1%: total
+        // was then a logistic of raw (now a percentile) and additive is a sum,
+        // so their ratio measures the mapping, not the chain. A payload from
+        // before raw existed cannot answer this, and saying so beats answering
+        // it wrongly.
         ratio === null
           ? "This result predates the raw cost being reported, so the chain's effect cannot be computed from it. The bars above are still exact; only the comparison below them is unavailable."
           : ratio > 1.0005
@@ -1331,10 +1755,15 @@ const RUNTIME = String.raw `
     levels.forEach(function (lv) {
       var band = el("div", "band", String(lv.label || ""));
       var v = Number(lv.value);
-      if (isFinite(v)) band.style.backgroundColor = "hsl(" + (v * 120) + ", 65%, 50%)";
       // Active band chosen by nearest level, since the queried value rarely
       // lands exactly on a band's own value.
-      if (label && String(lv.label) === String(label)) band.classList.add("on");
+      var on = !!label && String(lv.label) === String(label);
+      if (isFinite(v)) {
+        var fill = hslHex(v * 120, 0.65, 0.5);
+        if (on) { band.style.backgroundColor = fill; band.style.color = readableOn(fill); }
+        else band.style.backgroundColor = "hsla(" + (v * 120) + ", 65%, 50%, .42)";
+      }
+      if (on) band.classList.add("on");
       band.title = String(lv.label || "");
       bands.appendChild(band);
     });
@@ -1460,6 +1889,18 @@ const RUNTIME = String.raw `
     minor: "#2563eb", low: "#2563eb", info: "#64748b", notice: "#64748b",
   };
 
+  // hsl (degrees, 0-1, 0-1) as #rrggbb, so a fill drawn as hsl can be given
+  // a readable label by readableOn below.
+  function hslHex(h, s, l) {
+    var k = function (n) { return (n + h / 30) % 12; };
+    var a = s * Math.min(l, 1 - l);
+    var f = function (n) {
+      var c = l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+      return ("0" + Math.round(c * 255).toString(16)).slice(-2);
+    };
+    return "#" + f(0) + f(8) + f(4);
+  }
+
   // Whichever of near-white / near-black contrasts better with a fill, by WCAG
   // relative luminance rather than by eye.
   function readableOn(hex) {
@@ -1770,7 +2211,8 @@ const RUNTIME = String.raw `
     if (b.type === "traits") {
       used[b.field.split(".")[0]] = true;
       var rows = normaliseTraits(at(data, b.field), b);
-      return rows.length ? { node: traitsBlock(rows, b), count: rows.length } : null;
+      var tprov = traitProv(data, b);
+      return rows.length ? { node: traitsBlock(rows, b, tprov), count: rows.length } : null;
     }
     if (b.type === "manager") {
       used[b.field.split(".")[0]] = true;
@@ -1781,7 +2223,8 @@ const RUNTIME = String.raw `
       used[b.field.split(".")[0]] = true;
       if (b.personaField) used[b.personaField.split(".")[0]] = true;
       var erows = normaliseTraits(at(data, b.field), b);
-      return erows.length ? { node: editorBlock(erows, b, data), count: erows.length } : null;
+      var eprov = traitProv(data, b);
+      return erows.length ? { node: editorBlock(erows, b, data, eprov), count: erows.length } : null;
     }
     if (b.type === "chain") {
       [b.field, b.bottleneckField, b.additiveField, b.totalField, b.overlaysField].forEach(function (f) {
@@ -1810,8 +2253,30 @@ const RUNTIME = String.raw `
     if (b.type === "note") {
       used[b.field.split(".")[0]] = true;
       var t = at(data, b.field);
+      if (b.templates && t && typeof t === "object") {
+        var said = fillTemplate(t, b.by, b.templates);
+        return said ? { node: el("p", null, said), count: null } : null;
+      }
       return t ? { node: el("p", null, fmt(t)), count: null } : null;
     }
+    if (b.type === "rank") {
+      used[b.field.split(".")[0]] = true;
+      var rnode = rankBlock(data, b);
+      return rnode ? { node: rnode, count: null } : null;
+    }
+    if (b.type === "times") {
+      used[b.field.split(".")[0]] = true;
+      var tnode = timesBlock(data, b);
+      return tnode ? { node: tnode, count: null } : null;
+    }
+    if (b.type === "provenance") {
+      used[b.field.split(".")[0]] = true;
+      var pv = at(data, b.field);
+      if (!isProvenance(pv)) return null;
+      return b.variant === "full"
+        ? { node: provenanceFull(pv, b, data), count: provTotal(pv) }
+        : { node: provenanceLine(pv, b.subject, b.seeAlso), count: null };
+    }
     if (b.type === "rest") {
       var rest = [];
       Object.keys(data).forEach(function (k) {
@@ -1833,7 +2298,7 @@ const RUNTIME = String.raw `
       var b = blocks[i];
       if (b.type === "drawer") continue;
       var built = await buildBlock(data, b);
-      if (built) out.push(section(b.title || titleize(b.type), built.count, built.node, false));
+      if (built) out.push(section(b.title || titleize(b.type), built.count, built.node, !!b.open));
     }
     return out;
   }
@@ -1923,12 +2388,22 @@ const RUNTIME = String.raw `
       hero.facts.forEach(function (f) {
         var v = at(data, f.field);
         var value = null, attn = false;
-        if (f.countFlag && isObjArray(v)) {
+        var label = f.label, range = null;
+        if (f.format === "rank") {
+          var w = rankWords(v, f.intervalField ? at(data, f.intervalField) : null, f.figuresField ? at(data, f.figuresField) : null);
+          if (w) {
+            value = w.chip;
+            label = "of real pages" + (w.interval ? ", " + (f.level || 95) + "% interval " : "");
+            if (w.interval) range = w.interval[0] + "-" + w.interval[1] + "%";
+          }
+        } else if (f.countFlag && isObjArray(v)) {
           var ok = v.filter(function (x) { return x[f.countFlag]; }).length;
           value = ok + "/" + v.length;
           attn = !!f.attnWhenShort && ok < v.length;
         } else if (Array.isArray(v)) {
           value = String(v.length);
+        } else if (f.templates && v && typeof v === "object") {
+          value = fillTemplate(v, f.by, f.templates);
         } else if (v && typeof v === "object") {
           // A bag of named numbers is a countable collection too. Without this
           // a fact pointing at a traits object silently produced nothing, which
@@ -1940,8 +2415,12 @@ const RUNTIME = String.raw `
         if (value === null) return;
         used[f.field.split(".")[0]] = true;
         var chip = el("span", "fact" + (attn ? " attn" : ""));
-        chip.appendChild(el("b", null, value));
-        chip.appendChild(el("span", null, f.label));
+        // A rank is one phrase: its value never breaks, and its range is
+        // kept whole ("78-" / "84%" read as two numbers at 393 px).
+        chip.appendChild(el("b", f.format === "rank" ? "rk" : null, value));
+        var lab = el("span", null, label);
+        if (range) lab.appendChild(el("span", "nw", range));
+        chip.appendChild(lab);
         strip.appendChild(chip);
       });
       if (strip.childNodes.length) band.appendChild(strip);