diff --git a/AGENTS.md b/AGENTS.md
index 275c2ab4..34f2f96c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -230,7 +230,6 @@ How most packages work, so the bullets below don't repeat it:
   - `vp dlx skills add onmax/comark-ui` lists them beside comark-ui and installs the ones picked.
   - Each installs alone, so it carries the syntax of the blocks it uses in `references/blocks.md` and links nothing outside its folder. Its `references/example.md` is a finished document.
   - Each has a page in `docs/pages/skills/` that leads with that example rendered.
-- `skills/data-explorer` writes `report.json` instead of Comark: a shared template in `assets/` draws it as an interactive page, and `assets/page.html` is the one page: `scripts/build.mjs` checks `report.json`, fills the page's slots, inlines Vega when comark-ui is installed, and screenshots every tab, and an agent without Node fills the slots by hand. The page loads anything missing from jsDelivr, so `app.js` and `style.css` must keep working from `comark-ui/dist/skills/data-explorer/assets/` on npm. Its page links a live example on Drop instead of rendering one.
 
 ### Docs site
 
diff --git a/docs/pages/skills/data-explorer.md b/docs/pages/skills/data-explorer.md
deleted file mode 100644
index ad0d1b32..00000000
--- a/docs/pages/skills/data-explorer.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Data explorer
-description: Your agent explores a dataset and turns what it finds into an interactive page of findings, graphs, matrices and tables, from one report.json.
-icon: layout-dashboard
-keywords: data, data science, dashboard, analytics, report.json, filters, charts, tables, heatmap, vega-lite
-tagline: "Hand your agent a dataset and get back what's in it: the findings, and the graphs and tables behind them, on a page you click through, filter and share."
----
-
-::skill{name="data-explorer"}
-::
-
-[Open the example](https://drop.vitehub.dev/d/qmjw7dwepwfa/who-builds-nuxt-dashboard): an agent built it with this skill from the public [Nuxters](https://github.com/nuxt/nuxters) data, in one run.
-
-## What it does
-
-The agent starts from the data, not the page. It writes down the questions you want answered, profiles every field, and computes every number in a prep script, so a rerun on new data rebuilds the page. Then it writes `report.json`: the data rows, the filters, and the blocks on each tab. A shared template draws it, so the agent writes no HTML, CSS or page script. Every page gets the same parts:
-
-- a **top bar** with the tabs and a light and dark theme
-- a **strip of numbers** that stays on every tab, and the **rows behind them** at the bottom
-- **flat sections** of charts, segmented bar lists, heatmap matrices and tables, two to a row
-- a **filter sidebar** with search, the period, and one list per entity, where every name keeps one color across the page and a click filters every block
-
-The build rejects text past its limits and names the fix, so the page stays numbers first. It then screenshots every tab in light and dark, and the first on a phone, and the agent reads each one before it hands the page back.
-
-The result is one HTML file. It opens from disk or any static host, and you can publish it to [Drop](https://drop.vitehub.dev/?utm_source=comark-ui&utm_medium=skills) to share it privately, with a new version on each rebuild and comments on the numbers.
-
-## When to use it
-
-Ask with the data in hand, such as "What does this export say about who contributes to our repos?" or "Make this CSV explorable by country and month." To be sure, say "Use the data-explorer skill."
-
-- You explore data and filter it yourself: this skill.
-- You choose between options or approve a plan: [Report](/skills/report).
-- Findings about something that already exists: [Review document](/skills/review-document).
-
-## What your agent needs
-
-Node with `playwright` installed, for the build that checks the page against its limits and screenshots it. With `comark-ui` installed too, the page carries Vega and opens offline. Without Node, as in a chat app, the agent fills the skill's page template itself, and the page loads whatever it couldn't fill, such as Vega, from jsDelivr when it opens.
-
-## It's working if
-
-- The first tab opens with two or three numbers that answer what you asked, each with one sentence.
-- Every tab mixes block types: a table, a matrix or a bar list next to its charts.
-- A name has the same color in the sidebar, the tables and the charts, and clicking it filters the page.
-- Definitions and caveats sit on the Method tab, not under every chart.
-- The agent hands back the screenshots it read and what the data couldn't answer.
diff --git a/docs/pages/skills/index.md b/docs/pages/skills/index.md
index 828cec9e..f36ae24c 100644
--- a/docs/pages/skills/index.md
+++ b/docs/pages/skills/index.md
@@ -14,7 +14,7 @@ tagline: Each skill teaches your agent one kind of document, what goes in it and
 - A visible change needs proof on a pull request: [Before/after evidence](/skills/before-after-evidence).
 - A review is done, and someone has to decide what to do: [Review document](/skills/review-document).
 - Someone has to choose between options or approve a plan, from your research: [Report](/skills/report).
-- Someone hands over data and wants to see what's in it, with graphs and filters: [Data explorer](/skills/data-explorer).
+- Someone hands over data and wants a dashboard with graphs and filters: Drop's [data-explorer skill](https://drop.vitehub.dev/.well-known/skills/data-explorer/SKILL.md?utm_source=comark-ui&utm_medium=skills), since it writes an HTML page rather than Comark.
 - Someone asked how a system, a flow, or a change works: [Visual explanation](/skills/visual-explanation).
 - Someone needs to learn one concept and prove it: [Teach lesson](/skills/teach-lesson).
 - Your agent needs a block's syntax, not a whole document: the [comark-ui skill](/guide/agents).
diff --git a/docs/pages/skills/report.md b/docs/pages/skills/report.md
index 9b028ea0..08008506 100644
--- a/docs/pages/skills/report.md
+++ b/docs/pages/skills/report.md
@@ -29,7 +29,7 @@ Choose by what you have:
 - Options to compare, or a plan to approve: this skill.
 - Findings about code, a design, or a system that already exists: [Review document](/skills/review-document).
 - A question about how something works: [Visual explanation](/skills/visual-explanation).
-- Data you explore and filter yourself: [Data explorer](/skills/data-explorer).
+- Data you explore and filter yourself: Drop's [data-explorer skill](https://drop.vitehub.dev/.well-known/skills/data-explorer/SKILL.md?utm_source=comark-ui&utm_medium=skills).
 
 ## It's working if
 
diff --git a/skills/comark-ui/SKILL.md b/skills/comark-ui/SKILL.md
index 3339e654..87a224b7 100644
--- a/skills/comark-ui/SKILL.md
+++ b/skills/comark-ui/SKILL.md
@@ -53,7 +53,7 @@ Problems land in `meta.issues` after `parseMarkdown`, one sentence each, and a h
 
 ## Shape the document
 
-This skill teaches the blocks. Five sibling skills teach a whole document, what goes in it and in what order: `before-after-evidence`, `review-document`, `report`, `visual-explanation`, and `teach-lesson`. A sixth, `data-explorer`, builds an interactive data page from a `report.json` instead of Comark. When the user asks for one of those and it isn't installed, suggest `vp dlx skills add onmax/comark-ui` and picking it from the list.
+This skill teaches the blocks. Five sibling skills teach a whole document, what goes in it and in what order: `before-after-evidence`, `review-document`, `report`, `visual-explanation`, and `teach-lesson`. When the user asks for one of those and it isn't installed, suggest `vp dlx skills add onmax/comark-ui` and picking it from the list.
 
 ## Pick the blocks
 
diff --git a/skills/data-explorer/SKILL.md b/skills/data-explorer/SKILL.md
deleted file mode 100644
index 63776557..00000000
--- a/skills/data-explorer/SKILL.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-name: data-explorer
-description: Turns a dataset into an interactive explorer page, a dashboard of findings, graphs, matrices and tables behind tabs and filters. Use when someone hands over data, such as a CSV, a JSON export or an API, and wants to see what's in it, or asks for a dashboard of it.
-license: MIT
----
-
-# Data explorer
-
-A data explorer is one `report.json`: the data rows, the filters, and the blocks on each tab. This skill's template draws it as an _instrument_, the way an analytics tool looks: a top bar with the tabs, a strip of numbers that stays on every tab, flat sections of charts and tables, the rows behind the numbers at the bottom, and a filter sidebar on the right where every name keeps one color across the page. You decide **what to show**; the template owns **how it looks**. You write no HTML, CSS or page script.
-
-Words are the scarcest thing on the page. A reader scans numbers, colors and bars; prose goes in `method`. The build rejects text past its limit.
-
-When the reader has to choose between options or approve a plan, write a `report` instead: a page with the answer first.
-
-The block reference is [references/blocks.md](references/blocks.md); read it before step 3.
-
-## Steps
-
-1. **Questions.** From the request, write the 3 to 6 questions the reader wants answered. Each becomes a tab. Name each one's _shape_: change over time, share of a whole, ranking, two numbers per item, spread, two categories crossed, or a lookup of one item.
-   Done when every question has a shape and none overlaps another.
-
-2. **Profile.** Write a short script that prints, for each source file, its row count, every field with its type, range and share of nulls, and a few sample rows. Read the source's README for what each field means and how it was counted.
-   Done when you can name the fields and the join keys each question needs, and the caveats the README states.
-
-3. **Entities and filters.** Pick the one or two _entities_ the reader thinks in (customers, repositories, countries, types of work) and the period or mode they switch between. Each entity becomes a `list` filter: it gets a color that every block reuses, a row in the sidebar with its count, and a click target in every table and bar list. The period becomes a `tabs` filter. Give every dataset that should follow a filter that filter's column.
-   Done when each entity and period is a filter and you know which datasets carry its column.
-
-4. **Prep.** Write `prep.py` (or `prep.mjs`) next to the report. It reads the raw files and writes `report.json` with aggregated rows: one dataset per block shape, plus one dataset of evidence rows (the people, tickets or items behind the numbers). Every number on the page is computed here, so a rerun on new data rebuilds the report. Fold any long tail into one `Other` row.
-   Done when the script runs from scratch and prints the headline numbers you'll quote.
-
-5. **Blocks.** Put 4 to 6 numbers in `top` (a `stats` block) and the evidence rows in `bottom` (a `table` with `"style": "rows"`); both stay on every tab. On each tab, pick 2 to 6 blocks by the question's shape, using the table in [references/blocks.md](references/blocks.md), and mix them: a tab of only line charts reads as a chart dump, a tab with a table, a matrix and a bar list reads as an instrument. Open the first tab with a `facts` block: 2 or 3 numbers that answer the request, each with one sentence.
-   Done when every block answers its tab's question and no two blocks show the same numbers.
-
-6. **Words, last.** Write a short product-like `title` and a `subtitle` (the source and the date range), a `title` per block that names what is measured, and a `note` only where a block would mislead without it or says how to use it ("Click a row to filter"). Definitions, caveats and how you counted go in `method`.
-   Done when no block has a sentence the numbers already show.
-
-7. **Build and look.** Build the page as [Build it](#build-it) says, and fix every error the build prints; each one says how. Then look at it like a reader, in **every** screenshot (light, dark and phone), or without Node in your host's preview if it has one: labels collide or are cut, a block is empty or flat, colors disagree between blocks, a tab without a table or matrix, a fact the blocks don't support. Change the blocks or the prep, not the template.
-   Done when the build exits 0 and you have opened every screenshot of the last build, or, without Node, when `report.json` keeps every limit and you have looked at the page.
-
-8. **Hand back** the path to `report.html`, the screenshot folder if you built with `--shots`, and three lines: what the report answers, the most surprising finding, and anything the data couldn't answer. The page is one file that opens from disk or any static host. When the reader wants to share it, publish it to [Drop](https://drop.vitehub.dev/?utm_source=comark-ui&utm_medium=skills): the link is private, a rebuild on new data becomes a new version at the same URL, and readers can comment on the numbers.
-
-## Build it
-
-The page is [assets/page.html](assets/page.html) with `report.json`, the template's [assets/style.css](assets/style.css) and [assets/app.js](assets/app.js) in its slots. Fill it the first way your environment allows:
-
-1. **With Node**, run the build. It checks `report.json` against every limit and names the fix, fills the page, and screenshots every tab. Copy this skill's `scripts/` and `assets/` folders next to the report, keeping them side by side, then:
-
-   ```sh
-   node scripts/build.mjs report.json report.html --shots shots
-   ```
-
-   `--shots` needs `playwright` installed where you run it; without the flag, the build needs nothing installed. The build finds both from the folder you run it in, so install them in a scratch folder with its own `package.json` (`pnpm add --ignore-workspace comark-ui playwright`) and run the build from there, with paths to `scripts/build.mjs` and the report. With `comark-ui` there too, the page carries Vega inline and opens offline. On Linux, when Playwright has no browser of its own version, the build uses the newest Chromium in `~/.cache/ms-playwright`.
-
-2. **Without Node**, such as in a chat app's sandbox, fill [assets/page.html](assets/page.html) yourself, with any language: `report.json` goes inside `<script id="report-data">` with every `<` written as `\u003c`, `style.css` inside `<style id="rp-style">`, and `app.js` inside `<script id="rp-app">`. Set the `<title>`. When you can't read a file of this skill, leave its slot empty: the page then loads it from the latest comark-ui on jsDelivr, and loads Vega the same way, so it needs a network connection when it opens. Nothing checks the limits on this path, so compare `report.json` with the limits in [references/blocks.md](references/blocks.md) before you hand it back.
-
-## When the blocks don't fit
-
-Try another block, a different aggregation in the prep script, or two smaller blocks first. If the question still needs a chart the blocks can't draw, use one `vega` block with a Vega-Lite spec (see [references/blocks.md](references/blocks.md)). The build counts these, so keep them rare and say why in your hand-back.
diff --git a/skills/data-explorer/agents/openai.yaml b/skills/data-explorer/agents/openai.yaml
deleted file mode 100644
index c9bf3f17..00000000
--- a/skills/data-explorer/agents/openai.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-interface:
-  display_name: "Data explorer"
-  short_description: "Findings, graphs and filters for a dataset, from one report.json"
diff --git a/skills/data-explorer/assets/app.js b/skills/data-explorer/assets/app.js
deleted file mode 100644
index 007e8621..00000000
--- a/skills/data-explorer/assets/app.js
+++ /dev/null
@@ -1,1862 +0,0 @@
-const { parse, View } = vega;
-const { compile } = vegaLite;
-
-const PALETTE = [
-  "#4d97de",
-  "#e0894a",
-  "#3ca694",
-  "#d0505e",
-  "#a37ecd",
-  "#c9a227",
-  "#c673a3",
-  "#69a45c",
-  "#8c6d4f",
-  "#5c6bc0",
-  "#90994e",
-  "#8693a5",
-];
-const TONES = {
-  good: "#3f9d5a",
-  fair: "#a9c25a",
-  warn: "#e0894a",
-  bad: "#cf3f4e",
-  muted: "#a3a3a3",
-  accent: "#4d97de",
-};
-const report = JSON.parse(document.getElementById("report-data").textContent);
-const data = report.data ?? {};
-const views = [...report.views];
-if (report.method || report.intro) views.push({ id: "method", label: "Method", method: true });
-const filters = (report.filters ?? []).map((f) => ({ ...f, type: f.type ?? null }));
-
-const state = { view: views[0].id, filters: {}, scale: {}, q: "" };
-const charts = [];
-
-// ---------- helpers
-
-const h = (tag, attrs = {}, ...children) => {
-  const el = document.createElement(tag);
-  for (const [k, v] of Object.entries(attrs)) {
-    if (v == null || v === false) continue;
-    if (k === "class") el.className = v;
-    else if (k === "style" && typeof v === "object") Object.assign(el.style, v);
-    else if (k.startsWith("on")) el.addEventListener(k.slice(2), v);
-    else if (k === "html") el.innerHTML = v;
-    else el.setAttribute(k, v === true ? "" : v);
-  }
-  for (const c of children.flat())
-    if (c != null && c !== false) el.append(c instanceof Node ? c : String(c));
-  return el;
-};
-
-const escape = (s) =>
-  String(s).replace(
-    /[&<>"]/g,
-    (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c],
-  );
-const inline = (s = "") =>
-  escape(s)
-    .replace(/`([^`]+)`/g, "<code>$1</code>")
-    .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
-    .replace(
-      /\[([^\]]+)\]\((https?:[^)\s]+)\)/g,
-      '<a href="$2" target="_blank" rel="noopener">$1</a>',
-    );
-const markdown = (s = "") =>
-  s
-    .trim()
-    .split(/\n{2,}/)
-    .map((block) =>
-      /^\s*[-*] /.test(block)
-        ? `<ul>${block
-            .split(/\n(?=\s*[-*] )/)
-            .map((li) => `<li>${inline(li.replace(/^\s*[-*] /, ""))}</li>`)
-            .join("")}</ul>`
-        : /^#{1,3} /.test(block)
-          ? `<h3>${inline(block.replace(/^#{1,3} /, ""))}</h3>`
-          : `<p>${inline(block)}</p>`,
-    )
-    .join("");
-
-const NUMBER = {
-  number: (v) =>
-    new Intl.NumberFormat("en", {
-      maximumFractionDigits: Math.abs(v) < 10 ? 2 : Math.abs(v) < 100 ? 1 : 0,
-    }).format(v),
-  integer: (v) => new Intl.NumberFormat("en", { maximumFractionDigits: 0 }).format(v),
-  compact: (v) =>
-    new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }).format(v),
-  percent: (v) =>
-    new Intl.NumberFormat("en", {
-      style: "percent",
-      maximumFractionDigits: Math.abs(v) < 0.1 && v !== 0 ? 1 : 0,
-    }).format(v),
-  money: (v) =>
-    new Intl.NumberFormat("en", {
-      style: "currency",
-      currency: "USD",
-      maximumFractionDigits: Math.abs(v) < 100 ? 2 : 0,
-    }).format(v),
-};
-const D3 = { number: ",.2~f", integer: ",.0f", compact: ".3~s", percent: ".0%", money: "$,.0f" };
-const fmt = (v, kind = "number") => {
-  if (v == null || v === "") return "–";
-  if (typeof v !== "number") return String(v);
-  return (NUMBER[kind] ?? NUMBER.number)(v);
-};
-// A number split into its figure and a short unit, so tiles print "53" big and "%" small.
-const splitUnit = (text) => {
-  const m = String(text).match(/^([^\d-]*)([-\d.,]+)(.*)$/);
-  return m ? [m[1], m[2], m[3]] : ["", String(text), ""];
-};
-const DATE = /^\d{4}-\d{2}(-\d{2})?([T ][\d:.]+Z?)?$/;
-const dateLabel = (s) => {
-  const [y, m, d] = String(s).split(/[-T]/);
-  const date = new Date(Date.UTC(+y, (+m || 1) - 1, +d || 1));
-  const thisYear = String(new Date().getUTCFullYear()) === y;
-  return date.toLocaleDateString("en", {
-    year: d && thisYear ? undefined : "numeric",
-    month: "short",
-    ...(d ? { day: "numeric" } : {}),
-    timeZone: "UTC",
-  });
-};
-const flag = (cc) =>
-  /^[A-Z]{2}$/.test(cc)
-    ? String.fromCodePoint(...[...cc].map((c) => 0x1f1a5 + c.charCodeAt(0)))
-    : "";
-const regions = new Intl.DisplayNames(["en"], { type: "region" });
-const country = (cc) => {
-  try {
-    return regions.of(cc);
-  } catch {
-    return cc;
-  }
-};
-const tone = (name, i) =>
-  TONES[name] ??
-  (typeof name === "number"
-    ? PALETTE[name % PALETTE.length]
-    : name?.startsWith?.("#")
-      ? name
-      : PALETTE[i % PALETTE.length]);
-
-// ---------- filters, colors and data
-
-const valuesOf = (field) => {
-  const seen = new Map();
-  for (const rows of Object.values(data))
-    for (const row of rows)
-      if (field in row && row[field] != null && row[field] !== "")
-        seen.set(row[field], (seen.get(row[field]) ?? 0) + 1);
-  return [...seen.keys()];
-};
-const options = (f) =>
-  f.options
-    ? f.options.map((o) => (typeof o === "object" ? o : { value: o, label: String(o) }))
-    : valuesOf(f.field).map((v) => ({ value: v, label: String(v) }));
-const kindOf = (f) => f.type ?? (f.options && f.options.length <= 5 ? "tabs" : "list");
-
-// Every value of a list filter keeps one color in every block, so a customer reads the same everywhere.
-const COLORS = {};
-for (const f of filters) {
-  if (kindOf(f) !== "list" || f.colors === false) continue;
-  const counts = countsFor(f, true);
-  const order = options(f)
-    .map((o) => o.value)
-    .sort((a, b) => (counts.get(b) ?? 0) - (counts.get(a) ?? 0));
-  const given = typeof f.colors === "object" ? f.colors : {};
-  COLORS[f.field] = new Map(
-    order.map((v, i) => [
-      v,
-      given[v] != null ? tone(given[v], i) : i < PALETTE.length ? PALETTE[i] : TONES.muted,
-    ]),
-  );
-}
-const colorOf = (field, value) => COLORS[field]?.get(value);
-
-function countsFor(f, ignoreFilters = false) {
-  const name = f.count ?? Object.keys(data).find((n) => data[n].some((r) => f.field in r));
-  const rows = ignoreFilters ? (data[name] ?? []) : rowsOf(name, f.field);
-  const counts = new Map();
-  for (const r of rows)
-    counts.set(
-      r[f.field],
-      (counts.get(r[f.field]) ?? 0) + (f.countField ? (r[f.countField] ?? 0) : 1),
-    );
-  return counts;
-}
-
-function rowsOf(name, skip) {
-  let rows = data[name] ?? [];
-  for (const f of filters) {
-    if (f.field === skip) continue;
-    const value = state.filters[f.field];
-    if (kindOf(f) === "toggle") {
-      if (!value) rows = rows.filter((row) => !row[f.field]);
-      continue;
-    }
-    if (value == null || value === "*") continue;
-    rows = rows.filter((row) => !(f.field in row) || row[f.field] === value);
-  }
-  return rows;
-}
-const searched = (rows, fields) => {
-  if (!state.q) return rows;
-  const q = state.q.toLowerCase();
-  return rows.filter((r) =>
-    fields.some((f) =>
-      String(r[f] ?? "")
-        .toLowerCase()
-        .includes(q),
-    ),
-  );
-};
-
-const AGG = {
-  sum: (xs) => xs.reduce((a, b) => a + b, 0),
-  count: (xs) => xs.length,
-  mean: (xs) => (xs.length ? xs.reduce((a, b) => a + b, 0) / xs.length : null),
-  max: (xs) => (xs.length ? Math.max(...xs) : null),
-  min: (xs) => (xs.length ? Math.min(...xs) : null),
-  first: (xs) => xs[0],
-  last: (xs) => xs.at(-1),
-};
-const resolve = (value) => {
-  if (value == null || typeof value !== "object") return value;
-  let rows = rowsOf(value.data);
-  if (value.where)
-    rows = rows.filter((row) => Object.entries(value.where).every(([k, v]) => row[k] === v));
-  if (value.agg === "count" && value.field == null) return rows.length;
-  const xs = rows.map((row) => row[value.field]).filter((v) => v != null);
-  return (AGG[value.agg ?? "sum"] ?? AGG.sum)(xs);
-};
-
-const setFilter = (field, value) => {
-  state.filters[field] = state.filters[field] === value ? null : value;
-  writeHash();
-  void render();
-};
-const clickable = (field) => filters.some((f) => f.field === field && kindOf(f) === "list");
-
-// ---------- theme
-
-const theme = () => document.documentElement.dataset.theme;
-const vars = () => {
-  const css = getComputedStyle(document.documentElement);
-  const v = (n) => css.getPropertyValue(n).trim();
-  return {
-    fg: v("--rp-fg"),
-    muted: v("--rp-muted"),
-    border: v("--rp-border"),
-    grid: v("--rp-grid"),
-    bg: v("--rp-bg"),
-    soft: v("--rp-soft"),
-  };
-};
-
-const config = (c) => ({
-  background: null,
-  font: getComputedStyle(document.body).fontFamily,
-  padding: { left: 0, right: 4, top: 6, bottom: 0 },
-  view: { stroke: null },
-  axis: {
-    labelColor: c.muted,
-    titleColor: c.muted,
-    labelFontSize: 11,
-    titleFontSize: 11,
-    titleFontWeight: 400,
-    domainColor: c.border,
-    tickColor: c.border,
-    gridColor: c.grid,
-    labelPadding: 6,
-    titlePadding: 10,
-  },
-  axisX: { grid: false, tickSize: 4, labelOverlap: "greedy" },
-  axisY: { domain: false, ticks: false, tickCount: 5, labelOverlap: true },
-  axisBand: { tickBand: "extent" },
-  legend: {
-    labelColor: c.muted,
-    titleColor: c.muted,
-    labelFontSize: 11,
-    orient: "top",
-    direction: "horizontal",
-    symbolType: "square",
-    symbolSize: 70,
-    title: null,
-    offset: 10,
-    padding: 0,
-  },
-  range: { category: PALETTE },
-  text: { color: c.fg, fontSize: 11 },
-  bar: { cornerRadiusEnd: 2, discreteBandSize: { band: 0.72 } },
-  line: { strokeWidth: 2, strokeCap: "round", strokeJoin: "round" },
-  point: { filled: true },
-  title: { color: c.fg },
-});
-
-// ---------- charts
-
-const field = (s) => String(s).replace(/[.[\]\\]/g, (m) => `\\${m}`);
-const isDate = (rows, f) =>
-  rows.some((r) => r[f] != null) &&
-  rows.every((r) => r[f] == null || (typeof r[f] === "string" && DATE.test(r[f])));
-const isNumber = (rows, f) => rows.every((r) => r[f] == null || typeof r[f] === "number");
-
-const niceMax = (max) => {
-  if (max <= 0) return 1;
-  const p = 10 ** Math.floor(Math.log10(max));
-  for (const m of [1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10]) if (m * p >= max) return m * p;
-  return max;
-};
-
-const longRows = (block, rows) => {
-  if (!Array.isArray(block.y)) return { rows, y: block.y, series: block.series };
-  const labels = block.names ?? {};
-  return {
-    rows: rows.flatMap((r) =>
-      block.y.map((k) => ({ ...r, __series: labels[k] ?? k, __value: r[k] })),
-    ),
-    y: "__value",
-    series: "__series",
-  };
-};
-
-// A series takes, in order: its tone from `tones`, the color its value keeps across the report, or the next palette color.
-const seriesColor = (block, seriesField, keys) => {
-  const c = vars();
-  return keys.map((k, i) => {
-    if (block.emphasis === k) return c.fg;
-    if (block.highlight != null && k !== block.highlight) return c.muted;
-    if (block.tones?.[i]) return tone(block.tones[i], i);
-    const sourceField = seriesField === "__series" ? null : seriesField;
-    return (sourceField && colorOf(sourceField, k)) ?? PALETTE[i % PALETTE.length];
-  });
-};
-
-const xEncoding = (block, rows, x, kind, width) => {
-  const title = block.xTitle ?? null;
-  if (kind === "temporal")
-    return {
-      field: field(x),
-      type: "temporal",
-      title,
-      scale: { type: "utc" },
-      axis: {
-        labelExpr: `utcFormat(datum.value, ${JSON.stringify(block.xFormat ?? (rows.some((r) => String(r[x]).length > 7) ? "%b %d" : "%b %Y"))})`,
-        tickCount: 6,
-      },
-    };
-  if (kind === "quantitative") {
-    const years = rows.every(
-      (r) => r[x] == null || (Number.isInteger(r[x]) && r[x] > 1900 && r[x] < 2200),
-    );
-    return {
-      field: field(x),
-      type: "quantitative",
-      title,
-      scale: {
-        zero: false,
-        nice: false,
-        ...(state.scale[block.__id] === "log" || block.logX ? { type: "log" } : {}),
-      },
-      axis: years ? { format: "d", tickMinStep: 1 } : { format: D3.compact },
-    };
-  }
-  const cats = [...new Set(rows.map((r) => r[x]))];
-  const longest = Math.max(...cats.map((c) => String(c).length));
-  const angle = longest * 6 > width / Math.max(cats.length, 1) - 8 ? -35 : 0;
-  return {
-    field: field(x),
-    type: "ordinal",
-    title,
-    sort: null,
-    axis: { labelLimit: 140, labelAngle: angle, labelAlign: angle ? "right" : "center" },
-  };
-};
-
-function lineSpec(block, input, width) {
-  const { rows, y, series } = longRows(block, input);
-  const x = block.x;
-  const kind =
-    block.xType ?? (isDate(rows, x) ? "temporal" : isNumber(rows, x) ? "quantitative" : "ordinal");
-  const height = block.height ?? 240;
-  const format = D3[block.format] ?? D3.number;
-  const log = state.scale[block.__id] === "log" || block.logY;
-  const area = block.chart === "area";
-  const stacked = area && series && block.stack !== false;
-  const percent = Boolean(stacked) && block.stack === "percent";
-  const values = rows.map((r) => r[y]).filter((v) => v != null);
-  const keys = series ? [...new Set(rows.map((r) => r[series]))] : [];
-  // Stacks put positives above zero and negatives below it, so each side sums apart.
-  const sums = (sign) => {
-    const by = new Map();
-    for (const r of rows) if (sign * (r[y] ?? 0) > 0) by.set(r[x], (by.get(r[x]) ?? 0) + r[y]);
-    return [...by.values()];
-  };
-  const top = Math.max(0, ...(stacked ? sums(1) : values));
-  const bottom = Math.min(0, ...(stacked ? sums(-1) : values));
-  const yMax = percent ? 1 : (block.yMax ?? niceMax(top));
-  const yMin = percent || bottom === 0 ? 0 : -niceMax(-bottom);
-  const range = series ? seriesColor(block, series, keys) : [];
-  const color = series
-    ? {
-        field: field(series),
-        type: "nominal",
-        scale: { domain: keys, range },
-        legend: stacked ? {} : null,
-      }
-    : { value: block.emphasis ? vars().fg : PALETTE[0] };
-  const X = xEncoding(block, rows, x, kind, width);
-  const Y = {
-    field: field(y),
-    type: "quantitative",
-    title: block.yTitle ?? null,
-    stack: stacked ? (percent ? "normalize" : "zero") : null,
-    scale: log ? { type: "log" } : { domain: [yMin, yMax], nice: false },
-    axis: {
-      format:
-        percent || block.format === "percent"
-          ? ".0%"
-          : (D3[block.format] ?? (top >= 10000 ? D3.compact : D3.number)),
-    },
-  };
-  const strokeWidth =
-    series && block.emphasis
-      ? {
-          condition: {
-            test: `datum[${JSON.stringify(series)}] === ${JSON.stringify(block.emphasis)}`,
-            value: 2.6,
-          },
-          value: 1.5,
-        }
-      : { value: 2 };
-  const layers = [
-    {
-      mark: area
-        ? {
-            type: "area",
-            line: { strokeWidth: 1.5 },
-            opacity: stacked ? 0.85 : 0.18,
-            interpolate: "monotone",
-          }
-        : {
-            type: "line",
-            interpolate: block.curve === false ? "linear" : "monotone",
-            point: block.points ? { size: 22 } : false,
-          },
-      encoding: {
-        x: X,
-        y: Y,
-        color,
-        ...(series ? { detail: { field: field(series) } } : {}),
-        ...(area ? {} : { strokeWidth }),
-      },
-    },
-  ];
-  if (series && !stacked && !log) {
-    const last = new Map();
-    for (const r of rows) if (r[y] != null) last.set(r[series], r);
-    const ends = [...last.values()]
-      .map((r) => ({
-        name: r[series],
-        x: r[x],
-        y: r[y],
-        py: height - ((r[y] - yMin) / (yMax - yMin)) * height,
-      }))
-      .sort((a, b) => a.py - b.py);
-    for (let i = 1; i < ends.length; i++)
-      if (ends[i].py - ends[i - 1].py < 12) ends[i].py = ends[i - 1].py + 12;
-    const overflow = ends.length ? ends.at(-1).py - height : 0;
-    if (overflow > 0) for (const e of ends) e.py -= overflow;
-    layers.push({
-      data: {
-        values: ends.map((e) => ({
-          [x]: e.x,
-          __ly: yMin + ((height - e.py) / height) * (yMax - yMin),
-          [series]: e.name,
-          __label: block.endValues ? `${e.name} ${fmt(e.y, block.format ?? "number")}` : e.name,
-        })),
-      },
-      mark: { type: "text", align: "left", baseline: "middle", dx: 7, fontWeight: 500 },
-      encoding: {
-        x: X,
-        y: { field: "__ly", type: "quantitative", scale: Y.scale },
-        text: { field: "__label" },
-        color,
-      },
-    });
-  }
-  const tooltip = series
-    ? [
-        {
-          field: field(x),
-          type: X.type,
-          title: block.xTitle ?? x,
-          ...(kind === "temporal" ? { timeUnit: "utcyearmonthdate", format: "%b %d, %Y" } : {}),
-        },
-        ...keys.map((k, i) => ({
-          field: percent ? `__share${i}` : field(k),
-          type: "quantitative",
-          title: k,
-          format: percent || block.format === "percent" ? ".1%" : format,
-        })),
-      ]
-    : [
-        {
-          field: field(x),
-          type: X.type,
-          title: block.xTitle ?? x,
-          ...(kind === "temporal" ? { timeUnit: "utcyearmonthdate", format: "%b %d, %Y" } : {}),
-        },
-        { field: field(y), type: "quantitative", title: block.yTitle ?? y, format },
-      ];
-  layers.push({
-    ...(series
-      ? {
-          transform: [
-            { pivot: series, value: y, groupby: [x] },
-            ...(percent
-              ? [
-                  {
-                    calculate: keys.map((k) => `(datum[${JSON.stringify(k)}] || 0)`).join(" + "),
-                    as: "__total",
-                  },
-                  ...keys.map((k, i) => ({
-                    calculate: `datum.__total ? (datum[${JSON.stringify(k)}] || 0) / datum.__total : 0`,
-                    as: `__share${i}`,
-                  })),
-                ]
-              : []),
-          ],
-        }
-      : {}),
-    mark: { type: "rule", color: vars().muted, strokeWidth: 1 },
-    encoding: {
-      x: X,
-      opacity: { condition: { param: "hover", empty: false, value: 0.6 }, value: 0 },
-      tooltip,
-    },
-    params: [
-      {
-        name: "hover",
-        select: {
-          type: "point",
-          fields: [x],
-          nearest: true,
-          on: "pointerover",
-          clear: "pointerout",
-        },
-      },
-    ],
-  });
-  if (!stacked)
-    layers.push({
-      mark: { type: "point", size: 36, filled: true },
-      encoding: {
-        x: X,
-        y: Y,
-        color,
-        opacity: { condition: { param: "hover", empty: false, value: 1 }, value: 0 },
-      },
-    });
-  return { data: { values: rows }, width, height, layer: layers };
-}
-
-function barSpec(block, input, width) {
-  const { rows: all, y, series } = longRows(block, input);
-  const x = block.x;
-  const horizontal = block.horizontal ?? false;
-  const stacked = block.chart === "stacked" || (series && block.chart !== "grouped");
-  const percent = Boolean(stacked) && block.stack === "percent";
-  const format = D3[block.format] ?? D3.number;
-  let rows = all;
-  const totals = new Map();
-  for (const r of rows) totals.set(r[x], (totals.get(r[x]) ?? 0) + (r[y] ?? 0));
-  if (block.limit) {
-    const keep = new Set(
-      [...totals.entries()]
-        .sort((a, b) => b[1] - a[1])
-        .slice(0, block.limit)
-        .map(([k]) => k),
-    );
-    rows = rows.filter((r) => keep.has(r[x]));
-  }
-  const keys = series ? [...new Set(rows.map((r) => r[series]))] : [];
-  const cats = [...new Set(rows.map((r) => r[x]))];
-  const kind = block.xType ?? (isDate(rows, x) && !horizontal ? "temporal-ordinal" : "nominal");
-  const sortByValue = block.sort === "value" || (horizontal && block.sort !== "data");
-  const order = sortByValue
-    ? [...cats].sort((a, b) => (totals.get(b) ?? 0) - (totals.get(a) ?? 0))
-    : null;
-  const longest = Math.max(...cats.map((c) => String(c).length));
-  const angle = !horizontal && longest * 6 > width / Math.max(cats.length, 1) - 6 ? -35 : 0;
-  const category = {
-    field: field(x),
-    type: "ordinal",
-    title: block.xTitle ?? null,
-    sort: order,
-    axis: {
-      labelLimit: horizontal ? 160 : 110,
-      labelAngle: angle,
-      labelAlign: angle ? "right" : "center",
-      ...(kind === "temporal-ordinal"
-        ? { labelExpr: "datum.value == null ? '' : utcFormat(toDate(datum.value), '%b %y')" }
-        : {}),
-      ...(horizontal ? { ticks: false, domain: false } : {}),
-    },
-  };
-  const side = (sign) => {
-    if (!stacked) return rows.map((r) => r[y] ?? 0);
-    const by = new Map();
-    for (const r of rows) if (sign * (r[y] ?? 0) > 0) by.set(r[x], (by.get(r[x]) ?? 0) + r[y]);
-    return [...by.values()];
-  };
-  const top = Math.max(0, ...side(1));
-  const bottom = Math.min(0, ...side(-1));
-  const labels = block.labels !== false && cats.length <= (horizontal ? 40 : 18);
-  const value = {
-    field: field(y),
-    type: "quantitative",
-    title: block.yTitle ?? null,
-    stack: stacked ? (percent ? "normalize" : "zero") : null,
-    scale: percent
-      ? { domain: [0, 1] }
-      : {
-          domain: [
-            bottom < 0 ? -niceMax(-bottom * 1.06) : 0,
-            niceMax(top * (labels && horizontal ? 1.12 : 1.06)),
-          ],
-          nice: false,
-        },
-    axis: horizontal
-      ? null
-      : { format: percent ? ".0%" : (D3[block.format] ?? (top >= 10000 ? D3.compact : D3.number)) },
-  };
-  const c = vars();
-  const color = series
-    ? {
-        field: field(series),
-        type: "nominal",
-        scale: { domain: keys, range: seriesColor(block, series, keys) },
-        legend: {},
-      }
-    : COLORS[x]
-      ? {
-          field: field(x),
-          type: "nominal",
-          scale: { domain: cats, range: cats.map((k) => colorOf(x, k) ?? c.muted) },
-          legend: null,
-        }
-      : block.highlight != null
-        ? {
-            condition: {
-              test: `datum[${JSON.stringify(x)}] === ${JSON.stringify(block.highlight)}`,
-              value: PALETTE[0],
-            },
-            value: c.grid,
-          }
-        : { value: block.tones?.[0] ? tone(block.tones[0], 0) : PALETTE[0] };
-  const tooltip = [
-    { field: field(x), type: "ordinal", title: block.xTitle ?? x },
-    ...(series
-      ? [
-          {
-            field: field(series),
-            type: "nominal",
-            title: series === "__series" ? "Series" : series,
-          },
-        ]
-      : []),
-    {
-      field: field(y),
-      type: "quantitative",
-      title: block.yTitle ?? (y === "__value" ? "Value" : y),
-      format,
-    },
-  ];
-  const enc = horizontal ? { y: category, x: value } : { x: category, y: value };
-  if (series && block.chart === "grouped")
-    enc[horizontal ? "yOffset" : "xOffset"] = { field: field(series), sort: keys };
-  const layers = [
-    {
-      mark: {
-        type: "bar",
-        ...(stacked && series ? { cornerRadiusEnd: 0, stroke: c.bg, strokeWidth: 1 } : {}),
-      },
-      encoding: { ...enc, color, tooltip },
-    },
-  ];
-  if (labels && !percent) {
-    const text = {
-      type: "text",
-      fontSize: 10.5,
-      color: c.muted,
-      ...(horizontal
-        ? { align: "left", dx: 4, baseline: "middle" }
-        : { baseline: "bottom", dy: -3 }),
-    };
-    const shown = {
-      field: "__total",
-      type: "quantitative",
-      format: D3[block.format] ?? (top >= 10000 ? D3.compact : D3.number),
-    };
-    if (stacked && series)
-      layers.push({
-        transform: [{ aggregate: [{ op: "sum", field: y, as: "__total" }], groupby: [x] }],
-        mark: text,
-        encoding: {
-          ...(horizontal
-            ? { y: category, x: { ...value, field: "__total", stack: null } }
-            : { x: category, y: { ...value, field: "__total", stack: null } }),
-          text: shown,
-        },
-      });
-    else if (!series)
-      layers.push({
-        transform: [{ calculate: `datum[${JSON.stringify(y)}]`, as: "__total" }],
-        mark: text,
-        encoding: { ...enc, text: shown },
-      });
-  }
-  const step = horizontal
-    ? series && block.chart === "grouped"
-      ? 10 * keys.length + 8
-      : 22
-    : null;
-  return {
-    data: { values: rows },
-    width,
-    height: horizontal ? { step } : (block.height ?? 240),
-    layer: layers,
-  };
-}
-
-function scatterSpec(block, rows, width) {
-  const logX = state.scale[block.__id] === "log" || block.logX;
-  const logY = block.logY;
-  const format = D3[block.format] ?? D3.number;
-  const keys = block.series ? [...new Set(rows.map((r) => r[block.series]))] : [];
-  const color = block.series
-    ? {
-        field: field(block.series),
-        type: "nominal",
-        scale: { domain: keys, range: seriesColor(block, block.series, keys) },
-        legend: {},
-      }
-    : { value: PALETTE[0] };
-  // A log scale can't place 0, so a field with zeros gets symlog, which keeps them on the axis.
-  const pos = (f, log, title) => {
-    const zeros = log && rows.some((r) => r[f] != null && r[f] <= 0);
-    const max = Math.max(...rows.map((r) => r[f] ?? 0));
-    const decades = [0, ...Array.from({ length: 12 }, (_, i) => 10 ** i).filter((v) => v <= max)];
-    return {
-      field: field(f),
-      type: "quantitative",
-      title: title ?? f,
-      scale: { zero: false, ...(log ? { type: zeros ? "symlog" : "log" } : { nice: true }) },
-      axis: { format: D3.compact, ...(zeros ? { values: decades } : {}) },
-    };
-  };
-  const enc = { x: pos(block.x, logX, block.xTitle), y: pos(block.y, logY, block.yTitle), color };
-  const tooltip = [
-    ...(block.label ? [{ field: field(block.label), type: "nominal", title: block.label }] : []),
-    ...(block.series ? [{ field: field(block.series), type: "nominal" }] : []),
-    { field: field(block.x), type: "quantitative", title: block.xTitle ?? block.x, format },
-    { field: field(block.y), type: "quantitative", title: block.yTitle ?? block.y, format },
-    ...(block.size ? [{ field: field(block.size), type: "quantitative", format }] : []),
-  ];
-  const layers = [
-    {
-      mark: {
-        type: "circle",
-        opacity: 0.75,
-        stroke: vars().bg,
-        strokeWidth: 0.5,
-        ...(scatterClick(block) ? { cursor: "pointer" } : {}),
-      },
-      encoding: {
-        ...enc,
-        size: block.size
-          ? {
-              field: field(block.size),
-              type: "quantitative",
-              legend: null,
-              scale: { range: [16, 600] },
-            }
-          : { value: 36 },
-        tooltip,
-      },
-    },
-  ];
-  // Labels go in pixels once the chart has drawn, so placeLabels can move them apart.
-  if (block.label)
-    for (const side of ["left", "right"])
-      layers.push({
-        data: { name: `labels_${side}` },
-        mark: { type: "text", align: side, baseline: "middle", fontSize: 10.5 },
-        encoding: {
-          x: { field: "px", type: "quantitative", scale: null, axis: null },
-          y: { field: "py", type: "quantitative", scale: null, axis: null },
-          text: { field: "text" },
-          color: { value: vars().muted },
-        },
-      });
-  return {
-    data: { values: rows },
-    datasets: { labels_left: [], labels_right: [] },
-    width,
-    height: block.height ?? 300,
-    layer: layers,
-  };
-}
-
-// What a click on a point does: filter by the label or series when it's a list filter, else search for the label,
-// which narrows every table to that row.
-function scatterClick(block) {
-  const target = [block.label, block.series].find((f) => f && clickable(f));
-  if (target) return (d) => setFilter(target, d[target]);
-  if (!block.label || !report.search) return null;
-  return (d) => {
-    const q = String(d[block.label]);
-    state.q = state.q === q ? "" : q;
-    writeHash();
-    void render();
-  };
-}
-
-// Names the top points, largest first, each just past its circle at the first spot 12 px up or down that clears the
-// names already placed. A name that would run past the right edge goes on the point's left.
-async function placeLabels(view, block, rows) {
-  const xs = view.scale("x");
-  const ys = view.scale("y");
-  const sizes = block.size ? view.scale("size") : null;
-  const width = view.width();
-  const height = view.height();
-  const key = block.size ?? block.y;
-  const n = block.labelTop ?? (rows.length <= 12 ? rows.length : 6);
-  const top = rows
-    .filter((r) => r[block.x] != null && r[block.y] != null)
-    .toSorted((a, b) => (b[key] ?? 0) - (a[key] ?? 0))
-    .slice(0, n);
-  const placed = [];
-  for (const r of top) {
-    const text = String(r[block.label]);
-    const w = text.length * 6 + 2;
-    const px = xs(r[block.x]);
-    const py = ys(r[block.y]);
-    if (!Number.isFinite(px) || !Number.isFinite(py)) continue;
-    const gap = Math.sqrt((sizes ? sizes(r[block.size]) : 36) / Math.PI) + 4;
-    const side = px + gap + w > width ? "right" : "left";
-    const x0 = side === "right" ? px - gap - w : px + gap;
-    const free = (y) =>
-      y >= 6 &&
-      y <= height - 6 &&
-      placed.every((p) => x0 >= p.x0 + p.w || p.x0 >= x0 + w || Math.abs(y - p.py) >= 12);
-    const y = [0, -12, 12, -24, 24, -36, 36].map((d) => py + d).find(free);
-    if (y == null) continue;
-    placed.push({ x0, w, side, px: side === "right" ? px - gap : px + gap, py: y, text });
-  }
-  const of = (side) =>
-    placed.filter((p) => p.side === side).map(({ px, py, text }) => ({ px, py, text }));
-  await view.data("labels_left", of("left")).data("labels_right", of("right")).runAsync();
-}
-
-function histogramSpec(block, rows, width) {
-  const log = state.scale[block.__id] === "log" || block.logX;
-  const source = log
-    ? rows.filter((r) => r[block.x] > 0).map((r) => ({ ...r, __log: Math.log10(r[block.x]) }))
-    : rows;
-  const f = log ? "__log" : block.x;
-  return {
-    data: { values: source },
-    width,
-    height: block.height ?? 200,
-    mark: { type: "bar", color: PALETTE[0], cornerRadiusEnd: 1, binSpacing: 1 },
-    encoding: {
-      x: {
-        bin: { maxbins: block.bins ?? 30 },
-        field: f,
-        type: "quantitative",
-        title: block.xTitle ?? block.x,
-        axis: log ? { labelExpr: "format(pow(10, datum.value), '.2~s')" } : { format: D3.compact },
-      },
-      y: { aggregate: "count", type: "quantitative", title: null, axis: { format: D3.compact } },
-      tooltip: [{ aggregate: "count", type: "quantitative", title: "Count" }],
-    },
-  };
-}
-
-const SPECS = {
-  line: lineSpec,
-  area: lineSpec,
-  bar: barSpec,
-  stacked: barSpec,
-  grouped: barSpec,
-  scatter: scatterSpec,
-  histogram: histogramSpec,
-};
-
-function vegaSpec(block, width) {
-  const spec = structuredClone(block.spec);
-  const named = spec.data?.name;
-  if (named) spec.data = { values: rowsOf(named) };
-  return { ...spec, width: spec.width ?? width, height: spec.height ?? block.height ?? 240 };
-}
-
-const tooltip = document.createElement("div");
-tooltip.className = "rp-tip";
-tooltip.hidden = true;
-document.body.append(tooltip);
-function showTip(event, title, rows) {
-  tooltip.innerHTML = `<b>${escape(title)}</b>${rows.map(([k, v]) => `<div><span>${escape(k)}</span><span>${escape(v)}</span></div>`).join("")}`;
-  tooltip.hidden = false;
-  const box = tooltip.getBoundingClientRect();
-  tooltip.style.left = `${Math.min(event.clientX + 14, innerWidth - box.width - 8)}px`;
-  tooltip.style.top = `${Math.min(event.clientY + 14, innerHeight - box.height - 8)}px`;
-}
-const hideTip = () => (tooltip.hidden = true);
-function tip(handler, event, item, value) {
-  if (value == null || value === "" || !event) return hideTip();
-  const rows = typeof value === "object" ? Object.entries(value) : [["", value]];
-  const [[, v0], ...rest] = rows;
-  showTip(event, v0, rest);
-}
-
-async function drawChart(entry) {
-  const { block, el } = entry;
-  const width = Math.max(240, Math.floor(el.clientWidth));
-  try {
-    const rows = block.type === "vega" ? null : rowsOf(block.data);
-    if (rows && !rows.length) {
-      el.replaceChildren(h("p", { class: "rp-empty" }, "No rows for this filter."));
-      el.dataset.state = "ok";
-      return;
-    }
-    const lite =
-      block.type === "vega" ? vegaSpec(block, width) : SPECS[block.chart](block, rows, width);
-    lite.$schema = "https://vega.github.io/schema/vega-lite/v6.json";
-    lite.autosize = { type: "fit-x", contains: "padding" };
-    lite.config = { ...config(vars()), ...lite.config };
-    const compiled = compile(lite).spec;
-    entry.view?.finalize();
-    const host = h("div", { class: "rp-chart-svg" });
-    el.replaceChildren(host);
-    entry.view = new View(parse(compiled), {
-      renderer: "svg",
-      container: host,
-      hover: true,
-      tooltip: tip,
-    });
-    await entry.view.runAsync();
-    if (block.chart === "scatter") {
-      if (block.label) await placeLabels(entry.view, block, rows);
-      const click = scatterClick(block);
-      if (click)
-        entry.view.addEventListener("click", (_, item) => {
-          if (item?.mark?.marktype === "symbol" && item.datum) click(item.datum);
-        });
-    }
-    el.dataset.state = "ok";
-  } catch (error) {
-    el.dataset.state = "error";
-    el.dataset.error = String(error.message ?? error);
-    el.replaceChildren(
-      h("p", { class: "rp-empty" }, `This chart failed to draw: ${error.message ?? error}`),
-    );
-  }
-}
-
-// ---------- blocks
-
-const dot = (color) => (color ? h("i", { class: "rp-dot", style: { background: color } }) : null);
-const entity = (fieldName, value) =>
-  h("span", { class: "rp-entity" }, dot(colorOf(fieldName, value)), value ?? "–");
-
-function statsBlock(block) {
-  return h(
-    "div",
-    { class: "rp-stats" },
-    block.items.map((item) => {
-      const value = resolve(item.value);
-      const delta = resolve(item.delta);
-      const [pre, num, unit] = splitUnit(fmt(value, item.format ?? "number"));
-      const deltaText =
-        delta == null
-          ? null
-          : `${delta > 0 ? "+" : ""}${fmt(delta, item.deltaFormat ?? "percent")}`;
-      const good = item.good === "down" ? delta < 0 : delta > 0;
-      return h(
-        "div",
-        { class: "rp-stat" },
-        h(
-          "div",
-          { class: "rp-stat-value" },
-          pre && h("small", {}, pre),
-          num,
-          unit && h("small", {}, unit),
-          item.unit && h("small", {}, ` ${item.unit}`),
-        ),
-        h("div", { class: "rp-stat-label" }, item.label),
-        (deltaText || item.hint) &&
-          h(
-            "div",
-            { class: "rp-stat-foot" },
-            deltaText &&
-              h(
-                "span",
-                { class: `rp-delta ${delta === 0 ? "" : good ? "is-up" : "is-down"}` },
-                deltaText,
-              ),
-            item.hint && h("span", {}, item.hint),
-          ),
-      );
-    }),
-  );
-}
-
-function factsBlock(block) {
-  return h(
-    "div",
-    { class: "rp-facts" },
-    block.items.map((item) => {
-      const [pre, num, unit] = splitUnit(
-        typeof item.value === "string"
-          ? item.value
-          : fmt(resolve(item.value), item.format ?? "number"),
-      );
-      return h(
-        "div",
-        { class: "rp-fact" },
-        h("div", { class: "rp-fact-value" }, pre, num, unit && h("small", {}, unit)),
-        h("p", { html: inline(item.text) }),
-      );
-    }),
-  );
-}
-
-function legend(names, colors) {
-  return h(
-    "div",
-    { class: "rp-legend" },
-    names.map((n, i) => h("span", {}, h("i", { style: { background: colors[i] } }), n)),
-  );
-}
-
-// Rows of horizontal bars drawn in HTML: a label, the bar (one value or segments), and a short note after it.
-function barsBlock(block) {
-  let rows = rowsOf(block.data);
-  const segments = block.segments ?? [block.value];
-  const names = segments.map((s) => block.names?.[s] ?? s);
-  const colors = segments.map((s, i) =>
-    block.tones?.[i]
-      ? tone(block.tones[i], i)
-      : segments.length === 1
-        ? null
-        : PALETTE[i % PALETTE.length],
-  );
-  const total = (r) => segments.reduce((a, s) => a + (r[s] ?? 0), 0);
-  if (block.sort !== "data") rows = [...rows].sort((a, b) => total(b) - total(a));
-  if (block.limit) rows = rows.slice(0, block.limit);
-  const max = block.percent ? 1 : Math.max(...rows.map(total), 0) || 1;
-  const labelColor = (r) => colorOf(block.label, r[block.label]);
-  const list = h(
-    "div",
-    { class: "rp-bars" },
-    rows.map((r) => {
-      const single =
-        segments.length === 1
-          ? (labelColor(r) ?? (block.tones?.[0] ? tone(block.tones[0], 0) : PALETTE[0]))
-          : null;
-      const sum = total(r);
-      const scale = block.percent && sum ? 1 / sum : 1;
-      const end = block.end
-        ? typeof r[block.end] === "number"
-          ? fmt(r[block.end], block.format)
-          : r[block.end]
-        : fmt(sum, block.format);
-      const go = clickable(block.label) ? () => setFilter(block.label, r[block.label]) : null;
-      return h(
-        "div",
-        {
-          class: `rp-bars-row${go ? " is-click" : ""}${state.filters[block.label] === r[block.label] ? " is-on" : ""}`,
-          onclick: go,
-          onmousemove: (e) =>
-            showTip(
-              e,
-              r[block.label],
-              segments.map((s, i) => [names[i], fmt(r[s], block.format)]),
-            ),
-          onmouseleave: hideTip,
-        },
-        h("span", { class: "rp-bars-label" }, dot(labelColor(r)), h("span", {}, r[block.label])),
-        h(
-          "span",
-          { class: "rp-bars-track" },
-          h(
-            "span",
-            {
-              class: "rp-bars-fill",
-              style: { width: `calc((100% - 92px) * ${(sum * scale) / max})` },
-            },
-            segments.map((s, i) =>
-              h("span", {
-                style: {
-                  width: `${sum ? ((r[s] ?? 0) / sum) * 100 : 0}%`,
-                  background: single ?? colors[i],
-                },
-              }),
-            ),
-          ),
-          h("span", { class: "rp-bars-end" }, end),
-        ),
-      );
-    }),
-  );
-  return h("div", {}, segments.length > 1 ? legend(names, colors) : null, list);
-}
-
-// A matrix in HTML: rows and columns keep the data's order, cells tint by their share of the largest value.
-function matrixBlock(block) {
-  const rows = rowsOf(block.data);
-  const xs = block.columns ?? [...new Set(rows.map((r) => r[block.x]))];
-  const ys = [...new Set(rows.map((r) => r[block.y]))];
-  const cell = new Map(rows.map((r) => [`${r[block.y]}\u0000${r[block.x]}`, r[block.value]]));
-  const values = [...cell.values()].filter((v) => typeof v === "number");
-  const max = Math.max(...values, 0) || 1;
-  const rowMax = new Map(
-    ys.map((y) => [y, Math.max(...xs.map((x) => cell.get(`${y}\u0000${x}`) ?? 0), 0) || 1]),
-  );
-  const tint = (x, i) =>
-    block.tint === "columns"
-      ? (colorOf(block.x, x) ?? PALETTE[i % PALETTE.length])
-      : block.tint === "rows"
-        ? null
-        : block.tones?.[0]
-          ? tone(block.tones[0], 0)
-          : PALETTE[0];
-  const longest = Math.max(...xs.map((x) => String(x).length));
-  const rotate = longest > 14 || (xs.length > 8 && longest > 5);
-  return h(
-    "div",
-    { class: "rp-scroll" },
-    h(
-      "table",
-      { class: `rp-matrix${rotate ? " is-rotated" : ""}` },
-      h(
-        "thead",
-        {},
-        h(
-          "tr",
-          {},
-          h("th", {}),
-          xs.map((x) => h("th", {}, h("span", {}, x))),
-        ),
-      ),
-      h(
-        "tbody",
-        {},
-        ys.map((y) =>
-          h(
-            "tr",
-            {},
-            h(
-              "th",
-              {
-                class: clickable(block.y) ? "is-click" : null,
-                onclick: clickable(block.y) ? () => setFilter(block.y, y) : null,
-              },
-              entity(block.y, y),
-            ),
-            xs.map((x, i) => {
-              const v = cell.get(`${y}\u0000${x}`);
-              const base = block.tint === "rows" ? (colorOf(block.y, y) ?? PALETTE[0]) : tint(x, i);
-              const t =
-                typeof v === "number" && v > 0
-                  ? v / (block.scale === "row" ? rowMax.get(y) : max)
-                  : 0;
-              return h(
-                "td",
-                {
-                  style: t
-                    ? {
-                        background: `color-mix(in oklab, ${base} ${Math.round(12 + t * 58)}%, var(--rp-bg))`,
-                        color: t > 0.82 ? "#fff" : null,
-                      }
-                    : null,
-                  onmousemove: v != null ? (e) => showTip(e, y, [[x, fmt(v, block.format)]]) : null,
-                  onmouseleave: hideTip,
-                },
-                typeof v === "number" && v !== 0 ? fmt(v, block.format) : "",
-              );
-            }),
-          ),
-        ),
-      ),
-    ),
-  );
-}
-
-function stackCell(row, col) {
-  const parts = col.fields.map((f, i) => ({
-    name: col.names?.[f] ?? f,
-    v: row[f] ?? 0,
-    color: col.tones?.[i]
-      ? tone(col.tones[i], i)
-      : (colorOf(col.colorBy, f) ?? PALETTE[i % PALETTE.length]),
-  }));
-  const sum = parts.reduce((a, p) => a + p.v, 0);
-  return h(
-    "td",
-    {
-      class: "rp-stack-cell",
-      onmousemove: (e) =>
-        showTip(
-          e,
-          col.label ?? "Mix",
-          parts.filter((p) => p.v).map((p) => [p.name, fmt(p.v, col.number)]),
-        ),
-      onmouseleave: hideTip,
-    },
-    h(
-      "span",
-      { class: "rp-stack" },
-      sum
-        ? parts.map((p) =>
-            h("span", { style: { width: `${(p.v / sum) * 100}%`, background: p.color } }),
-          )
-        : null,
-    ),
-  );
-}
-
-function cell(row, col, max, min) {
-  const v = row[col.field];
-  const kind = col.format ?? (typeof v === "number" ? "number" : "text");
-  if (kind === "stack") return stackCell(row, col);
-  if (kind === "entity") return h("td", {}, entity(col.field, v));
-  if (kind === "user") {
-    const name = String(v ?? "");
-    return h(
-      "td",
-      { class: "rp-user" },
-      h(
-        "a",
-        { href: `https://github.com/${name}`, target: "_blank", rel: "noopener" },
-        h("img", { src: `https://github.com/${name}.png?size=40`, alt: "", width: 18, height: 18 }),
-        name,
-      ),
-    );
-  }
-  if (kind === "country") return h("td", {}, v ? `${flag(v)} ${country(v)}` : "–");
-  if (kind === "link")
-    return h(
-      "td",
-      {},
-      v
-        ? h(
-            "a",
-            { href: v, target: "_blank", rel: "noopener" },
-            String(v).replace(/^https?:\/\/(www\.)?/, ""),
-          )
-        : "–",
-    );
-  if (kind === "date") return h("td", { class: "rp-num rp-muted" }, v ? dateLabel(v) : "–");
-  if (kind === "chips") {
-    const items = Array.isArray(v) ? v : [];
-    return h(
-      "td",
-      {},
-      items.length
-        ? h(
-            "span",
-            { class: "rp-chips" },
-            items.map((c) =>
-              h(
-                "span",
-                { class: "rp-chip" },
-                Array.isArray(c) ? [c[0], h("b", {}, ` ${c[1]}`)] : c,
-              ),
-            ),
-          )
-        : h("span", { class: "rp-muted" }, "none"),
-    );
-  }
-  if (kind === "text")
-    return h(
-      "td",
-      { class: col.truncate ? "rp-trunc" : null, title: col.truncate ? v : null },
-      v ?? "–",
-    );
-  if (kind === "bar") {
-    const w = max > 0 && typeof v === "number" ? Math.max(0, (v / max) * 100) : 0;
-    return h(
-      "td",
-      { class: "rp-num rp-barcell" },
-      h("span", { class: "rp-inbar" }, h("span", { style: { width: `${w}%` } })),
-      h("span", {}, fmt(v, col.number ?? "number")),
-    );
-  }
-  if (kind === "heat") {
-    const t = typeof v === "number" && max > min ? (v - min) / (max - min) : 0;
-    return h(
-      "td",
-      { class: "rp-num rp-heat", style: { "--t": t.toFixed(3) } },
-      fmt(v, col.number ?? "number"),
-    );
-  }
-  if (kind === "delta")
-    return h(
-      "td",
-      { class: `rp-num rp-delta ${v > 0 ? "is-up" : v < 0 ? "is-down" : ""}` },
-      v == null ? "–" : `${v > 0 ? "+" : ""}${fmt(v, col.number ?? "percent")}`,
-    );
-  return h(
-    "td",
-    { class: "rp-num" },
-    fmt(v, kind),
-    col.suffix ? h("span", { class: "rp-muted" }, ` ${row[col.suffix] ?? ""}`) : null,
-  );
-}
-
-const local = new Map();
-function tableBlock(block) {
-  const wrap = h("div", { class: `rp-table${block.style === "rows" ? " is-rows" : ""}` });
-  const own = local.get(block.__id) ?? {
-    sort: block.sort ?? null,
-    desc: true,
-    query: "",
-    shown: block.limit ?? 12,
-  };
-  local.set(block.__id, own);
-  const draw = () => {
-    let rows = rowsOf(block.data);
-    const textFields = block.columns
-      .filter((c) => !["stack", "bar", "heat"].includes(c.format))
-      .map((c) => c.field);
-    rows = searched(rows, textFields);
-    if (own.query) {
-      const q = own.query.toLowerCase();
-      rows = rows.filter((r) =>
-        textFields.some((f) =>
-          String(r[f] ?? "")
-            .toLowerCase()
-            .includes(q),
-        ),
-      );
-    }
-    if (own.sort)
-      rows = [...rows].sort((a, b) =>
-        a[own.sort] == null
-          ? b[own.sort] == null
-            ? 0
-            : 1
-          : b[own.sort] == null
-            ? -1
-            : (a[own.sort] > b[own.sort] ? 1 : a[own.sort] < b[own.sort] ? -1 : 0) *
-              (own.desc ? -1 : 1),
-      );
-    const stats = Object.fromEntries(
-      block.columns
-        .map((c) => [c.field, rows.map((r) => r[c.field]).filter((v) => typeof v === "number")])
-        .map(([k, xs]) => [k, [Math.max(...xs), Math.min(...xs)]]),
-    );
-    const shown = rows.slice(0, own.shown);
-    const clickField = block.columns.find((c) => clickable(c.field))?.field;
-    const rank = block.rank ?? block.style !== "rows";
-    const table = h(
-      "table",
-      {},
-      block.header === false || block.style === "rows"
-        ? null
-        : h(
-            "thead",
-            {},
-            h(
-              "tr",
-              {},
-              rank && h("th", { class: "rp-rank" }, "#"),
-              block.columns.map((c) =>
-                h(
-                  "th",
-                  {
-                    class:
-                      ["user", "text", "country", "link", "entity", "chips", "stack"].includes(
-                        c.format ?? "text",
-                      ) && c.format !== undefined
-                        ? ""
-                        : "rp-num",
-                    "aria-sort":
-                      own.sort === c.field ? (own.desc ? "descending" : "ascending") : null,
-                  },
-                  c.format === "stack" || c.format === "chips"
-                    ? (c.label ?? c.field)
-                    : h(
-                        "button",
-                        {
-                          onclick: () => (
-                            (own.desc = own.sort === c.field ? !own.desc : true),
-                            (own.sort = c.field),
-                            draw()
-                          ),
-                        },
-                        c.label ?? c.field,
-                        own.sort === c.field ? (own.desc ? " ↓" : " ↑") : "",
-                      ),
-                ),
-              ),
-            ),
-          ),
-      h(
-        "tbody",
-        {},
-        shown.map((row, i) =>
-          h(
-            "tr",
-            {
-              class: clickField
-                ? `is-click${state.filters[clickField] === row[clickField] ? " is-on" : ""}`
-                : null,
-              onclick: clickField
-                ? (e) => {
-                    const own = e.target.closest("td")?.dataset.field;
-                    const f = own && clickable(own) ? own : clickField;
-                    setFilter(f, row[f]);
-                  }
-                : null,
-            },
-            rank && h("td", { class: "rp-rank" }, i + 1),
-            block.columns.map((c) => {
-              const td = cell(row, c, ...(stats[c.field] ?? []));
-              td.dataset.field = c.field;
-              return td;
-            }),
-          ),
-        ),
-      ),
-    );
-    const step = block.more ?? block.limit ?? 12;
-    const more =
-      rows.length > own.shown &&
-      h(
-        "button",
-        { class: "rp-more", onclick: () => ((own.shown += step), draw()) },
-        `Show ${Math.min(step, rows.length - own.shown)} more of ${rows.length - own.shown}`,
-      );
-    wrap.replaceChildren(
-      ...(block.search
-        ? [
-            h("input", {
-              class: "rp-search",
-              type: "search",
-              placeholder: `Search ${rows.length} rows`,
-              value: own.query,
-              oninput: (e) => {
-                const caret = e.target.selectionStart;
-                own.query = e.target.value;
-                draw();
-                const input = wrap.querySelector("input");
-                input.focus();
-                input.setSelectionRange(caret, caret);
-              },
-            }),
-          ]
-        : []),
-      h("div", { class: "rp-scroll" }, table),
-      more || "",
-    );
-    return rows.length;
-  };
-  wrap.count = draw();
-  return wrap;
-}
-
-function blockEl(block, id) {
-  block.__id = id;
-  const half =
-    block.half ??
-    (block.type === "bars" ||
-      (block.type === "chart" &&
-        !["heatmap"].includes(block.chart) &&
-        block.wide !== true &&
-        !block.horizontal) ||
-      block.type === "vega");
-  const wide = block.wide ?? !half;
-  const section = h("section", {
-    class: `rp-block${wide ? " is-wide" : ""} is-${block.type}`,
-    id: block.id ?? null,
-  });
-  const toggles =
-    (block.logToggle &&
-      h(
-        "div",
-        { class: "rp-seg is-small" },
-        ["linear", "log"].map((s) =>
-          h(
-            "button",
-            {
-              "aria-pressed": String((state.scale[block.__id] ?? "linear") === s),
-              onclick: () => ((state.scale[block.__id] = s), render()),
-            },
-            s === "log" ? "Log" : "Linear",
-          ),
-        ),
-      )) ||
-    null;
-  let body;
-  if (block.type === "stats") body = statsBlock(block);
-  else if (block.type === "facts") body = factsBlock(block);
-  else if (block.type === "bars") body = barsBlock(block);
-  else if (block.type === "matrix" || block.chart === "heatmap") body = matrixBlock(block);
-  else if (block.type === "table") body = tableBlock(block);
-  else {
-    body = h("div", { class: "rp-chart", role: "img", "aria-label": block.title ?? "Chart" });
-    charts.push({ block, el: body });
-  }
-  const count = block.type === "table" && block.style === "rows" ? body.count : null;
-  if (block.title || toggles)
-    section.append(
-      h(
-        "header",
-        { class: "rp-block-head" },
-        h(
-          "div",
-          {},
-          block.title &&
-            h(
-              "h3",
-              {},
-              block.title,
-              count != null ? h("span", { class: "rp-muted" }, ` ${count} matching`) : null,
-            ),
-          block.note && h("p", { html: inline(block.note) }),
-        ),
-        toggles,
-      ),
-    );
-  section.append(body);
-  return section;
-}
-
-// ---------- page
-
-const root = document.getElementById("report");
-
-function readHash() {
-  resetFilters();
-  const [view, query] = location.hash.slice(1).split("?");
-  if (views.some((v) => v.id === view)) state.view = view;
-  for (const [k, v] of new URLSearchParams(query ?? "")) {
-    if (k === "q") state.q = v;
-    const f = filters.find((f) => f.field === k);
-    if (f)
-      state.filters[k] =
-        kindOf(f) === "toggle"
-          ? v === "1"
-          : (options(f).find((o) => String(o.value) === v)?.value ?? state.filters[k]);
-  }
-}
-function writeHash() {
-  const params = new URLSearchParams();
-  for (const f of filters) {
-    const v = state.filters[f.field];
-    const initial =
-      kindOf(f) === "tabs"
-        ? (f.default ?? options(f)[0]?.value)
-        : kindOf(f) === "toggle"
-          ? Boolean(f.default)
-          : null;
-    if (v !== initial && v != null)
-      params.set(f.field, kindOf(f) === "toggle" ? (v ? "1" : "0") : String(v));
-  }
-  if (state.q) params.set("q", state.q);
-  const q = params.toString();
-  history.replaceState(null, "", `#${state.view}${q ? `?${q}` : ""}`);
-}
-
-function resetFilters() {
-  state.q = "";
-  for (const f of filters)
-    state.filters[f.field] =
-      kindOf(f) === "tabs"
-        ? (f.default ?? options(f)[0]?.value)
-        : kindOf(f) === "toggle"
-          ? Boolean(f.default)
-          : (f.default ?? null);
-}
-readHash();
-
-const toggle = (f) =>
-  h(
-    "label",
-    { class: "rp-check" },
-    h("input", {
-      type: "checkbox",
-      checked: state.filters[f.field] || null,
-      onchange: (e) => ((state.filters[f.field] = e.target.checked), writeHash(), render()),
-    }),
-    f.label,
-  );
-
-function sidebar() {
-  const side = filters.filter((f) => kindOf(f) !== "toggle");
-  const toggles = filters.filter((f) => kindOf(f) === "toggle");
-  if (!side.length && !toggles.length && !report.search) return null;
-  return h(
-    "aside",
-    { class: "rp-side" },
-    h("div", { class: "rp-side-title" }, "Filters"),
-    toggles.length > 0 && h("div", { class: "rp-side-toggles" }, toggles.map(toggle)),
-    report.search &&
-      h(
-        "label",
-        { class: "rp-side-search" },
-        h("span", { html: SEARCH }),
-        h("input", {
-          type: "search",
-          placeholder: report.search === true ? "Search" : report.search,
-          value: state.q,
-          oninput: (e) => ((state.q = e.target.value), writeHash(), renderSoon()),
-        }),
-      ),
-    side.map((f) => {
-      const opts = options(f);
-      if (kindOf(f) === "tabs" && opts.length > 5)
-        return h(
-          "label",
-          { class: "rp-side-select" },
-          h("span", {}, f.label ?? f.field),
-          h(
-            "select",
-            {
-              onchange: (e) => (
-                (state.filters[f.field] = opts[e.target.selectedIndex].value),
-                writeHash(),
-                render()
-              ),
-            },
-            opts.map((o) => h("option", { selected: state.filters[f.field] === o.value }, o.label)),
-          ),
-        );
-      if (kindOf(f) === "tabs")
-        return h(
-          "div",
-          { class: "rp-side-tabs", role: "group", "aria-label": f.label ?? f.field },
-          opts.map((o) =>
-            h(
-              "button",
-              {
-                "aria-pressed": String(state.filters[f.field] === o.value),
-                onclick: () => ((state.filters[f.field] = o.value), writeHash(), render()),
-              },
-              o.label,
-            ),
-          ),
-        );
-      const counts = countsFor(f);
-      const sorted = [...opts].sort(
-        (a, b) => (counts.get(b.value) ?? 0) - (counts.get(a.value) ?? 0),
-      );
-      return h(
-        "div",
-        { class: "rp-side-group" },
-        h(
-          "div",
-          { class: "rp-side-head" },
-          h("span", {}, f.label ?? f.field),
-          state.filters[f.field] != null &&
-            h("button", { onclick: () => setFilter(f.field, state.filters[f.field]) }, "Clear"),
-        ),
-        h(
-          "ul",
-          {},
-          sorted.map((o) => {
-            const n = counts.get(o.value) ?? 0;
-            const on = state.filters[f.field] === o.value;
-            return h(
-              "li",
-              {},
-              h(
-                "button",
-                {
-                  class: `${on ? "is-on" : ""}${n ? "" : " is-zero"}`,
-                  "aria-pressed": String(on),
-                  onclick: () => setFilter(f.field, o.value),
-                },
-                h("i", {
-                  class: "rp-dot",
-                  style: {
-                    background: n
-                      ? (colorOf(f.field, o.value) ?? "var(--rp-muted)")
-                      : "transparent",
-                    borderColor: colorOf(f.field, o.value) ?? "var(--rp-muted)",
-                  },
-                }),
-                h("span", {}, o.label),
-                h("span", { class: "rp-count" }, fmt(n, "integer")),
-              ),
-            );
-          }),
-        ),
-      );
-    }),
-  );
-}
-
-let soon;
-const renderSoon = () => {
-  clearTimeout(soon);
-  soon = setTimeout(() => {
-    const focus = document.activeElement?.type === "search";
-    void render();
-    if (focus) {
-      const input = root.querySelector(".rp-side-search input");
-      input?.focus();
-      input?.setSelectionRange(input.value.length, input.value.length);
-    }
-  }, 160);
-};
-
-function render() {
-  const scrollY = window.scrollY;
-  charts.length = 0;
-  const view = views.find((v) => v.id === state.view);
-  document.title = `${view.label} · ${report.title}`;
-  const go = (id) => (e) => (
-    e.preventDefault(),
-    (state.view = id),
-    writeHash(),
-    render(),
-    window.scrollTo({ top: 0 })
-  );
-  const toggles = filters.filter((f) => kindOf(f) === "toggle");
-  const top = h(
-    "header",
-    { class: "rp-top" },
-    h(
-      "a",
-      { class: "rp-brand", href: `#${views[0].id}`, onclick: go(views[0].id) },
-      h("b", {}, report.title),
-      report.subtitle && h("span", {}, report.subtitle),
-    ),
-    h(
-      "nav",
-      { class: "rp-tabs", "aria-label": "Views" },
-      views.map((v) =>
-        h(
-          "a",
-          {
-            href: `#${v.id}`,
-            "aria-current": v.id === state.view ? "page" : null,
-            onclick: go(v.id),
-          },
-          v.label,
-        ),
-      ),
-    ),
-    h(
-      "div",
-      { class: "rp-top-right" },
-      toggles.map(toggle),
-      h(
-        "div",
-        { class: "rp-seg is-theme", role: "group", "aria-label": "Theme" },
-        h("button", {
-          "aria-pressed": String(theme() === "light"),
-          "aria-label": "Light",
-          html: SUN,
-          onclick: () => setTheme("light"),
-        }),
-        h("button", {
-          "aria-pressed": String(theme() === "dark"),
-          "aria-label": "Dark",
-          html: MOON,
-          onclick: () => setTheme("dark"),
-        }),
-      ),
-    ),
-  );
-  const blocks = view.method
-    ? [
-        h("article", {
-          class: "rp-method",
-          html: markdown([report.intro, report.method].filter(Boolean).join("\n\n")),
-        }),
-      ]
-    : [
-        ...(report.top ?? []).map((b, i) => blockEl(b, `top-${i}`)),
-        view.summary ? h("p", { class: "rp-summary", html: inline(view.summary) }) : null,
-        ...(view.blocks ?? []).map((b, i) => blockEl(b, `${view.id}-${i}`)),
-        ...(report.bottom ?? []).map((b, i) => blockEl(b, `bottom-${i}`)),
-      ];
-  const foot = h(
-    "footer",
-    { class: "rp-foot" },
-    report.source
-      ? h(
-          "span",
-          {},
-          "Data: ",
-          h(
-            "a",
-            { href: report.source.url, target: "_blank", rel: "noopener" },
-            report.source.label,
-          ),
-        )
-      : null,
-    report.updated ? h("span", {}, ` · updated ${report.updated}`) : null,
-  );
-  const side = view.method ? null : sidebar();
-  root.replaceChildren(
-    top,
-    h(
-      "div",
-      { class: `rp-layout${side ? "" : " is-full"}` },
-      h("main", { class: "rp-main" }, h("div", { class: "rp-grid" }, blocks), foot),
-      side,
-    ),
-  );
-  window.scrollTo({ top: scrollY });
-  return Promise.all(charts.map(drawChart)).then(() => {
-    document.body.dataset.ready = state.view;
-  });
-}
-
-const SEARCH =
-  '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>';
-const SUN =
-  '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>';
-const MOON =
-  '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>';
-function setTheme(next) {
-  document.documentElement.dataset.theme = next;
-  try {
-    localStorage.setItem("rp-theme", next);
-  } catch {}
-  void render();
-}
-
-let stored = null;
-try {
-  stored = localStorage.getItem("rp-theme");
-} catch {}
-document.documentElement.dataset.theme =
-  new URLSearchParams(location.search).get("theme") ??
-  stored ??
-  (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
-window.addEventListener("hashchange", () => (readHash(), render()));
-let lastWidth = 0;
-new ResizeObserver(() => {
-  const w = root.clientWidth;
-  if (Math.abs(w - lastWidth) < 8) return;
-  lastWidth = w;
-  clearTimeout(window.__rpResize);
-  window.__rpResize = setTimeout(() => Promise.all(charts.map(drawChart)), 120);
-}).observe(root);
-void render();
-window.__report = {
-  render,
-  state,
-  views: views.map((v) => v.id),
-  go: (id) => ((state.view = id), (document.body.dataset.ready = ""), render()),
-};
diff --git a/skills/data-explorer/assets/page.html b/skills/data-explorer/assets/page.html
deleted file mode 100644
index 970cfe5b..00000000
--- a/skills/data-explorer/assets/page.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Data explorer</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap"
-    />
-    <style id="rp-style">
-      /* Paste assets/style.css here. Left empty, the page loads it from jsDelivr. */
-    </style>
-  </head>
-  <body>
-    <div id="report"></div>
-    <!-- Paste report.json between these tags, escaped as SKILL.md says. -->
-    <script id="report-data" type="application/json"></script>
-    <!-- Paste assets/app.js between these tags. Left empty, the page loads it from jsDelivr. -->
-    <script id="rp-app" type="text/plain"></script>
-    <!-- vega -->
-    <script>
-      // Runs whatever the page holds and fetches only what's missing: Vega and Vega-Lite, then the skill's style and
-      // script from the latest comark-ui on npm.
-      (async () => {
-        const cdn = "https://cdn.jsdelivr.net/npm/";
-        const skill = `${cdn}comark-ui/dist/skills/data-explorer/assets/`;
-        const load = (src) =>
-          new Promise((done, fail) => {
-            const script = Object.assign(document.createElement("script"), { src, onload: done });
-            script.onerror = () => fail(new Error(`couldn't load ${src}`));
-            document.head.append(script);
-          });
-        if (!/\.rp-/.test(document.getElementById("rp-style").textContent))
-          document.head.append(
-            Object.assign(document.createElement("link"), {
-              rel: "stylesheet",
-              href: `${skill}style.css`,
-            }),
-          );
-        if (!window.vega) await load(`${cdn}vega@6/build/vega.min.js`);
-        if (!window.vegaLite) await load(`${cdn}vega-lite@6/build/vega-lite.min.js`);
-        const app = document.getElementById("rp-app").textContent;
-        if (/\bfunction render\b/.test(app))
-          document.body.append(
-            Object.assign(document.createElement("script"), {
-              textContent: `(() => {\n${app}\n})();`,
-            }),
-          );
-        else await load(`${skill}app.js`);
-      })().catch((error) => {
-        document.getElementById("report").textContent =
-          `This page couldn't load: ${error.message}. Open it online, or rebuild it with the data-explorer skill's build script.`;
-      });
-    </script>
-  </body>
-</html>
diff --git a/skills/data-explorer/assets/style.css b/skills/data-explorer/assets/style.css
deleted file mode 100644
index 0433a43e..00000000
--- a/skills/data-explorer/assets/style.css
+++ /dev/null
@@ -1,884 +0,0 @@
-:root {
-  --rp-bg: #ffffff;
-  --rp-fg: #0b0b0d;
-  --rp-text: #2a2a30;
-  --rp-muted: #6e6e78;
-  --rp-border: #ebebef;
-  --rp-grid: #f0f0f3;
-  --rp-soft: #f4f4f6;
-  --rp-hover: #f7f7f9;
-  --rp-accent: #4d97de;
-  --rp-up: #2f8f57;
-  --rp-down: #cf3f4e;
-  --rp-side: 280px;
-  --rp-topbar: 52px;
-  color-scheme: light;
-}
-:root[data-theme="dark"] {
-  --rp-bg: #0b0b0c;
-  --rp-fg: #ececef;
-  --rp-text: #d4d4da;
-  --rp-muted: #8b8b94;
-  --rp-border: #222226;
-  --rp-grid: #19191c;
-  --rp-soft: #161619;
-  --rp-hover: #131316;
-  --rp-up: #4fbf85;
-  --rp-down: #ec7280;
-  color-scheme: dark;
-}
-* {
-  box-sizing: border-box;
-}
-html {
-  background: var(--rp-bg);
-}
-body {
-  margin: 0;
-  color: var(--rp-text);
-  background: var(--rp-bg);
-  font:
-    13.5px/1.5 "DM Sans",
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  font-variant-numeric: tabular-nums;
-}
-a {
-  color: inherit;
-  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
-  text-underline-offset: 3px;
-}
-code {
-  font:
-    0.88em ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    monospace;
-  background: var(--rp-soft);
-  padding: 0.1em 0.35em;
-  border-radius: 4px;
-}
-button {
-  font: inherit;
-  color: inherit;
-}
-.rp-muted {
-  color: var(--rp-muted);
-  font-weight: 400;
-}
-.rp-dot {
-  display: inline-block;
-  flex: none;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  border: 1px solid transparent;
-}
-
-/* top bar */
-.rp-top {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  align-items: stretch;
-  gap: 24px;
-  height: var(--rp-topbar);
-  padding: 0 20px;
-  background: color-mix(in srgb, var(--rp-bg) 92%, transparent);
-  backdrop-filter: blur(8px);
-  border-bottom: 1px solid var(--rp-border);
-}
-.rp-brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding-right: 24px;
-  border-right: 1px solid var(--rp-border);
-  text-decoration: none;
-  white-space: nowrap;
-}
-.rp-brand b {
-  color: var(--rp-fg);
-  font-size: 15px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-.rp-brand span {
-  color: var(--rp-muted);
-  font-size: 12.5px;
-}
-.rp-tabs {
-  display: flex;
-  gap: 2px;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-.rp-tabs a {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 10px;
-  color: var(--rp-muted);
-  text-decoration: none;
-  white-space: nowrap;
-}
-.rp-tabs a:hover {
-  color: var(--rp-fg);
-}
-.rp-tabs a[aria-current] {
-  color: var(--rp-fg);
-}
-.rp-tabs a[aria-current]::after {
-  content: "";
-  position: absolute;
-  left: 10px;
-  right: 10px;
-  bottom: -1px;
-  height: 2px;
-  background: var(--rp-accent);
-}
-.rp-top-right {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  margin-left: auto;
-  color: var(--rp-muted);
-  font-size: 12.5px;
-}
-.rp-check {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  white-space: nowrap;
-  cursor: pointer;
-}
-.rp-side-toggles {
-  display: none;
-  flex-wrap: wrap;
-  gap: 6px 14px;
-  margin-bottom: 14px;
-}
-.rp-check input {
-  margin: 0;
-  accent-color: var(--rp-fg);
-}
-.rp-seg {
-  display: inline-flex;
-  padding: 2px;
-  border-radius: 8px;
-  background: var(--rp-soft);
-}
-.rp-seg button {
-  display: grid;
-  place-items: center;
-  border: 0;
-  background: none;
-  min-width: 26px;
-  height: 24px;
-  padding: 0 8px;
-  border-radius: 6px;
-  cursor: pointer;
-  color: var(--rp-muted);
-  font-size: 12px;
-}
-.rp-seg.is-theme button {
-  padding: 0;
-}
-.rp-seg button:hover {
-  color: var(--rp-fg);
-}
-.rp-seg button[aria-pressed="true"] {
-  background: var(--rp-bg);
-  color: var(--rp-fg);
-  box-shadow:
-    0 1px 2px rgb(0 0 0 / 0.08),
-    0 0 0 1px rgb(0 0 0 / 0.04);
-}
-
-/* layout */
-.rp-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) var(--rp-side);
-}
-.rp-layout.is-full {
-  grid-template-columns: minmax(0, 1fr);
-}
-.rp-main {
-  min-width: 0;
-  padding: 16px 28px 0;
-  border-right: 1px solid var(--rp-border);
-}
-.rp-layout.is-full .rp-main {
-  border-right: 0;
-  max-width: 1100px;
-}
-.rp-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  column-gap: 40px;
-}
-.rp-block {
-  min-width: 0;
-  padding: 20px 0 22px;
-  border-top: 1px solid var(--rp-border);
-}
-.rp-block.is-wide,
-.rp-summary,
-.rp-method {
-  grid-column: 1 / -1;
-}
-.rp-block.is-stats,
-.rp-block.is-facts {
-  border-top: 0;
-  padding: 8px 0 12px;
-}
-.rp-block.is-stats + .rp-block.is-facts {
-  padding-top: 0;
-}
-.rp-block-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-.rp-block-head h3 {
-  margin: 0;
-  color: var(--rp-fg);
-  font-size: 14px;
-  font-weight: 600;
-  letter-spacing: -0.005em;
-}
-.rp-block-head p {
-  margin: 2px 0 0;
-  color: var(--rp-muted);
-  font-size: 12.5px;
-  max-width: 80ch;
-  text-wrap: pretty;
-}
-.rp-summary {
-  margin: 4px 0 16px;
-  color: var(--rp-fg);
-  font-size: 15px;
-  line-height: 1.45;
-  font-weight: 500;
-  max-width: 80ch;
-  text-wrap: pretty;
-}
-.rp-chart {
-  min-height: 100px;
-}
-.rp-chart-svg svg {
-  display: block;
-  max-width: 100%;
-  overflow: visible;
-}
-.rp-empty {
-  color: var(--rp-muted);
-  font-size: 13px;
-  margin: 16px 0;
-}
-
-/* sidebar */
-.rp-side {
-  position: sticky;
-  top: var(--rp-topbar);
-  align-self: start;
-  max-height: calc(100dvh - var(--rp-topbar));
-  overflow-y: auto;
-  padding: 16px 20px 32px;
-  scrollbar-width: thin;
-}
-.rp-side-title {
-  color: var(--rp-fg);
-  font-size: 15px;
-  font-weight: 600;
-  margin-bottom: 12px;
-}
-.rp-side-search {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 2px 8px;
-  border-bottom: 1px solid var(--rp-border);
-  color: var(--rp-muted);
-}
-.rp-side-search input {
-  flex: 1;
-  min-width: 0;
-  border: 0;
-  outline: 0;
-  background: none;
-  font: inherit;
-  color: var(--rp-fg);
-}
-.rp-side-search:focus-within {
-  border-color: var(--rp-fg);
-}
-.rp-side-tabs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 14px;
-  margin: 12px 0 4px;
-}
-.rp-side-tabs button {
-  border: 0;
-  background: none;
-  padding: 2px 0;
-  cursor: pointer;
-  color: var(--rp-muted);
-  border-bottom: 1px solid transparent;
-}
-.rp-side-tabs button:hover {
-  color: var(--rp-fg);
-}
-.rp-side-tabs button[aria-pressed="true"] {
-  color: var(--rp-fg);
-  border-bottom-color: var(--rp-fg);
-}
-.rp-side-group {
-  margin-top: 20px;
-}
-.rp-side-select {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  margin: 12px 0 4px;
-  color: var(--rp-fg);
-  font-weight: 600;
-}
-.rp-side-select select {
-  font: inherit;
-  font-weight: 400;
-  color: var(--rp-fg);
-  background: var(--rp-soft);
-  border: 0;
-  border-radius: 6px;
-  padding: 4px 8px;
-}
-.rp-side-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 4px;
-  color: var(--rp-fg);
-  font-weight: 600;
-}
-.rp-side-head button {
-  border: 0;
-  background: none;
-  color: var(--rp-muted);
-  font-size: 12px;
-  font-weight: 400;
-  cursor: pointer;
-  padding: 0;
-}
-.rp-side-group ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.rp-side-group li button {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  width: 100%;
-  border: 0;
-  background: none;
-  padding: 3px 6px;
-  margin: 0 -6px;
-  width: calc(100% + 12px);
-  border-radius: 5px;
-  text-align: left;
-  cursor: pointer;
-  color: var(--rp-text);
-}
-.rp-side-group li button:hover {
-  background: var(--rp-hover);
-}
-.rp-side-group li button.is-on {
-  background: var(--rp-soft);
-  color: var(--rp-fg);
-  font-weight: 500;
-}
-.rp-side-group li button.is-zero {
-  color: var(--rp-muted);
-}
-.rp-side-group li button span:nth-child(2) {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.rp-count {
-  color: var(--rp-muted);
-  font-size: 12px;
-}
-
-/* stats and facts */
-.rp-stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  border: 1px solid var(--rp-border);
-  border-radius: 8px;
-}
-.rp-stat {
-  padding: 12px 16px;
-  border-left: 1px solid var(--rp-border);
-}
-.rp-stat:first-child {
-  border-left: 0;
-}
-.rp-stat-value {
-  color: var(--rp-fg);
-  font-size: 22px;
-  line-height: 1.15;
-  font-weight: 500;
-  letter-spacing: -0.02em;
-}
-.rp-stat-value small,
-.rp-fact-value small {
-  font-size: 0.6em;
-  font-weight: 400;
-  color: var(--rp-muted);
-  letter-spacing: 0;
-  margin-left: 1px;
-}
-.rp-stat-label {
-  margin-top: 2px;
-  font-size: 12.5px;
-}
-.rp-stat-foot {
-  display: flex;
-  gap: 6px;
-  color: var(--rp-muted);
-  font-size: 12px;
-}
-.rp-delta.is-up {
-  color: var(--rp-up);
-}
-.rp-delta.is-down {
-  color: var(--rp-down);
-}
-.rp-facts {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 10px;
-}
-.rp-fact {
-  padding: 14px 16px;
-  border-radius: 8px;
-  background: var(--rp-soft);
-}
-.rp-fact-value {
-  color: var(--rp-fg);
-  font-size: 22px;
-  line-height: 1.2;
-  font-weight: 500;
-  letter-spacing: -0.02em;
-}
-.rp-fact p {
-  margin: 4px 0 0;
-  font-size: 12.5px;
-  text-wrap: pretty;
-}
-
-/* legend and html bars */
-.rp-legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 14px;
-  margin: -4px 0 10px;
-  font-size: 12px;
-  color: var(--rp-muted);
-}
-.rp-legend span {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-.rp-legend i {
-  width: 9px;
-  height: 9px;
-  border-radius: 2px;
-}
-.rp-bars {
-  display: grid;
-  gap: 1px;
-}
-.rp-bars-row {
-  display: grid;
-  grid-template-columns: minmax(90px, 32%) minmax(0, 1fr);
-  align-items: center;
-  gap: 10px;
-  min-height: 21px;
-  font-size: 12.5px;
-  border-radius: 4px;
-}
-.rp-bars-row.is-click {
-  cursor: pointer;
-}
-.rp-bars-row.is-click:hover,
-.rp-bars-row.is-on {
-  background: var(--rp-hover);
-}
-.rp-bars-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-.rp-bars-label span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.rp-bars-track {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-.rp-bars-fill {
-  display: flex;
-  height: 12px;
-  min-width: 2px;
-}
-.rp-bars-fill span {
-  flex: none;
-  min-width: 0;
-}
-.rp-stack span {
-  flex: none;
-}
-.rp-bars-fill span:first-child {
-  border-radius: 2px 0 0 2px;
-}
-.rp-bars-fill span:last-child {
-  border-radius: 0 2px 2px 0;
-}
-.rp-bars-end {
-  flex: none;
-  color: var(--rp-muted);
-  font-size: 11.5px;
-  white-space: nowrap;
-}
-
-/* matrix */
-.rp-matrix {
-  border-collapse: separate;
-  border-spacing: 2px;
-  font-size: 11.5px;
-}
-.rp-matrix thead th {
-  height: 34px;
-  max-width: 96px;
-  vertical-align: bottom;
-  font-weight: 400;
-  color: var(--rp-muted);
-  line-height: 1.25;
-  padding: 0 4px 4px;
-}
-.rp-matrix.is-rotated thead th {
-  white-space: nowrap;
-  padding: 0 0 4px;
-}
-.rp-matrix.is-rotated thead th {
-  height: 96px;
-}
-.rp-matrix.is-rotated thead th span {
-  display: inline-block;
-  transform: translate(14px, -6px) rotate(-40deg);
-  transform-origin: left bottom;
-  width: 24px;
-}
-.rp-matrix tbody th {
-  text-align: left;
-  font-weight: 400;
-  padding: 0 12px 0 0;
-  white-space: nowrap;
-  max-width: 180px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.rp-matrix tbody th.is-click {
-  cursor: pointer;
-}
-.rp-matrix td {
-  min-width: 46px;
-  height: 22px;
-  padding: 0 6px;
-  text-align: center;
-  background: var(--rp-soft);
-  border-radius: 2px;
-  color: var(--rp-text);
-}
-.rp-entity {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  max-width: 100%;
-  white-space: nowrap;
-}
-
-/* tables */
-.rp-scroll {
-  overflow-x: auto;
-}
-.rp-table table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12.5px;
-}
-.rp-table th {
-  text-align: left;
-  font-weight: 400;
-  color: var(--rp-muted);
-  font-size: 12px;
-  padding: 0 10px 6px;
-  border-bottom: 1px solid var(--rp-border);
-  white-space: nowrap;
-}
-.rp-table th button {
-  border: 0;
-  background: none;
-  padding: 0;
-  cursor: pointer;
-  color: inherit;
-}
-.rp-table th button:hover {
-  color: var(--rp-fg);
-}
-.rp-table td {
-  padding: 5px 10px;
-  border-bottom: 1px solid var(--rp-border);
-  white-space: nowrap;
-}
-.rp-table.is-rows td {
-  padding: 5px 10px;
-}
-.rp-table tr:last-child td {
-  border-bottom: 0;
-}
-.rp-table tbody tr:hover td {
-  background: var(--rp-hover);
-}
-.rp-table tr.is-click {
-  cursor: pointer;
-}
-.rp-table tr.is-on td {
-  background: var(--rp-soft);
-}
-.rp-table th:first-child,
-.rp-table td:first-child {
-  padding-left: 0;
-}
-.rp-table th:last-child,
-.rp-table td:last-child {
-  padding-right: 0;
-}
-.rp-num {
-  text-align: right !important;
-}
-.rp-rank {
-  width: 1%;
-  color: var(--rp-muted);
-}
-.rp-trunc {
-  max-width: 0;
-  width: 50%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.rp-user a {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  text-decoration: none;
-}
-.rp-user img {
-  border-radius: 50%;
-  background: var(--rp-soft);
-}
-.rp-barcell {
-  min-width: 140px;
-}
-.rp-barcell {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-}
-.rp-inbar {
-  flex: 1;
-  display: flex;
-  justify-content: flex-start;
-  height: 8px;
-}
-.rp-inbar span {
-  height: 100%;
-  border-radius: 2px;
-  background: var(--rp-accent);
-  opacity: 0.85;
-}
-.rp-stack-cell {
-  width: 1%;
-}
-.rp-stack {
-  display: flex;
-  width: 64px;
-  height: 9px;
-  border-radius: 2px;
-  overflow: hidden;
-}
-.rp-chips {
-  display: inline-flex;
-  gap: 4px;
-}
-.rp-chip {
-  padding: 1px 7px;
-  border: 1px solid var(--rp-border);
-  border-radius: 999px;
-  font-size: 11.5px;
-}
-.rp-chip b {
-  font-weight: 400;
-  color: var(--rp-muted);
-}
-.rp-heat {
-  background: color-mix(in srgb, var(--rp-accent) calc(var(--t) * 55%), transparent);
-}
-.rp-search {
-  display: block;
-  width: 100%;
-  margin: 0 0 8px;
-  font: inherit;
-  color: var(--rp-fg);
-  background: none;
-  border: 0;
-  border-bottom: 1px solid var(--rp-border);
-  padding: 4px 0;
-  outline: 0;
-}
-.rp-more {
-  display: block;
-  margin: 6px 0 0;
-  border: 0;
-  background: none;
-  padding: 4px 0;
-  color: var(--rp-muted);
-  font-size: 12.5px;
-  cursor: pointer;
-}
-.rp-more:hover {
-  color: var(--rp-fg);
-}
-
-.rp-method {
-  max-width: 68ch;
-  padding: 16px 0 32px;
-  font-size: 14px;
-}
-.rp-method h3 {
-  color: var(--rp-fg);
-  font-size: 15px;
-  margin: 24px 0 6px;
-}
-.rp-foot {
-  padding: 16px 0 28px;
-  color: var(--rp-muted);
-  font-size: 12px;
-  border-top: 1px solid var(--rp-border);
-}
-.rp-tip {
-  position: fixed;
-  z-index: 50;
-  pointer-events: none;
-  min-width: 140px;
-  max-width: 300px;
-  padding: 7px 10px;
-  border-radius: 7px;
-  background: var(--rp-bg);
-  border: 1px solid var(--rp-border);
-  box-shadow:
-    0 1px 2px rgb(0 0 0 / 0.06),
-    0 8px 24px rgb(0 0 0 / 0.1);
-  font-size: 12px;
-}
-.rp-tip b {
-  display: block;
-  margin-bottom: 3px;
-  color: var(--rp-fg);
-  font-weight: 600;
-}
-.rp-tip div {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  color: var(--rp-muted);
-}
-.rp-tip div span:last-child {
-  color: var(--rp-fg);
-}
-
-@media (max-width: 1000px) {
-  .rp-layout {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .rp-main {
-    border-right: 0;
-  }
-  .rp-side {
-    position: static;
-    max-height: none;
-    order: -1;
-    border-bottom: 1px solid var(--rp-border);
-  }
-  .rp-side-group ul {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2px 12px;
-  }
-  .rp-side-group li button {
-    width: auto;
-    margin: 0;
-  }
-  .rp-brand span,
-  .rp-top .rp-check {
-    display: none;
-  }
-  .rp-side-toggles {
-    display: flex;
-  }
-}
-@media (max-width: 760px) {
-  .rp-grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .rp-top {
-    gap: 12px;
-    padding: 0 12px;
-  }
-  .rp-brand {
-    padding-right: 12px;
-  }
-  .rp-main {
-    padding: 12px 16px 0;
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .rp-seg button,
-  .rp-side-group li button,
-  .rp-tabs a {
-    transition:
-      color 120ms,
-      background-color 120ms;
-  }
-}
diff --git a/skills/data-explorer/references/blocks.md b/skills/data-explorer/references/blocks.md
deleted file mode 100644
index a497b11d..00000000
--- a/skills/data-explorer/references/blocks.md
+++ /dev/null
@@ -1,121 +0,0 @@
-# report.json reference
-
-```json
-{
-  "title": "shoplens",
-  "subtitle": "Till exports · Jan 2024 to Jun 2026",
-  "intro": "What sells, where, and whether customers come back. Data from the till exports.",
-  "source": { "label": "Till exports", "url": "https://example.com/exports" },
-  "updated": "2026-07-01",
-  "search": "Search titles",
-  "filters": [
-    { "field": "period", "type": "tabs", "options": ["12 months", "30 days", "All time"] },
-    { "field": "store", "label": "Stores", "count": "sales" },
-    { "field": "genre", "label": "Genres", "count": "sales" },
-    { "field": "gift", "type": "toggle", "label": "Include gift cards" }
-  ],
-  "data": {
-    "totals": [{ "period": "12 months", "store": "North", "revenue": 41800, "orders": 2210 }],
-    "byStore": [{ "period": "12 months", "store": "North", "fiction": 1840, "nonfiction": 960, "end": "2,800 · 66% fiction" }],
-    "sales": [{ "period": "12 months", "date": "2026-06-28", "store": "North", "genre": "Fiction", "title": "The Long Way", "copies": 3, "gift": false }]
-  },
-  "top": [{ "type": "stats", "items": [{ "label": "revenue", "value": { "data": "totals", "field": "revenue" }, "format": "money", "hint": "in this period" }] }],
-  "views": [
-    {
-      "id": "overview",
-      "label": "Overview",
-      "blocks": [
-        { "type": "facts", "items": [{ "value": "66%", "text": "of copies sold are fiction, up from 58% last year." }] },
-        { "type": "bars", "title": "Copies by store", "data": "byStore", "label": "store", "segments": ["fiction", "nonfiction"], "names": { "fiction": "Fiction", "nonfiction": "Non-fiction" }, "end": "end" }
-      ]
-    }
-  ],
-  "bottom": [{ "type": "table", "style": "rows", "title": "Sales", "data": "sales", "columns": [{ "field": "date", "format": "date" }, { "field": "store", "format": "entity" }, { "field": "genre", "format": "entity" }, { "field": "title", "truncate": true }, { "field": "copies" }], "sort": "date", "limit": 20, "more": 50 }],
-  "method": "Markdown: paragraphs, `- ` lists, **bold**, `code`, [links](https://…)."
-}
-```
-
-## Limits
-
-| Text | Limit |
-| --- | --- |
-| `title` | 40 characters |
-| `subtitle` | 60 characters |
-| `intro` | 280 characters, two sentences (shown on the Method tab) |
-| tab `label` | 22 characters |
-| tab `summary` (optional) | 140 characters, one sentence |
-| block `title` | 60 characters |
-| block `note` | 120 characters, one sentence |
-| fact `text` | 110 characters, one sentence |
-| `method` | 1,600 characters |
-| stat `label` | 28 characters |
-| stat `hint` | 32 characters |
-| tabs 7, blocks per tab 8, series per chart 12, table columns 9, `top` 2 blocks, `bottom` 1 block |
-| `stats` 6 items, `facts` 4 items |
-| `bars` 30 rows and bar charts 40 bars, unless `limit` keeps fewer; matrix 24 columns, or swap `x` and `y` |
-| data 3 MB in all |
-
-A view `id` is kebab-case, and `method` is taken by the Method tab. A key the reference doesn't list is an error. Notes, fact `text`, tab `summary`, `intro` and `method` take `**bold**`, `` `code` `` and links; titles and labels print as written.
-
-## Which block for which question
-
-| Question shape | Block |
-| --- | --- |
-| Headline numbers | `stats` in `top` |
-| The answer to the request | `facts`, first tab |
-| A number over time | `chart` `line`; `bar` for one series with 15 periods or fewer |
-| Share of a whole over time | `chart` `stacked` with `"stack": "percent"`, or `area` |
-| Ranking of names, or a whole split per name | `bars` (one `value`, or `segments` that add up) |
-| Many numbers per name | `table` with `entity`, `bar`, `stack`, `chips` and `percent` columns |
-| Two categories crossed (customer × type, cohort × year) | `matrix` |
-| Two numbers per item | `chart` `scatter`, `logX`/`logY` when values span 100× or more |
-| Spread of one number | `chart` `histogram`, `logToggle` when it's skewed |
-| The rows behind the numbers | `table` with `"style": "rows"` in `bottom` |
-
-## Layout
-
-Blocks sit in two columns. Charts and `bars` take half a row, so put related ones next to each other; tables, matrices, `stats` and `facts` take the full row. `"wide": true` or `"half": true` overrides that. Sections have no boxes: a hairline separates them.
-
-## Colors
-
-Every value of a `list` filter gets one color, used by the sidebar, `entity` columns, `bars` labels, matrix rows or columns, and chart series on that field. So name a chart's `series`, a bar list's `label` or a matrix's `x`/`y` after the filter's field when they show that entity. For anything else, `tones` sets colors in order: `good`, `fair`, `warn`, `bad`, `muted`, `accent`, a palette index, or a `#hex`. Use the semantic tones for scales that run from good to bad (answered → only the team knows).
-
-## Blocks
-
-Every block takes `title` and `note` (a `note` needs a `title`), and every block but `stats` and `facts` takes `wide` and `half`.
-
-**stats** (in `top`): `items` of `{ label, value, format, unit, delta, deltaFormat, good, hint }`. `value` and `delta` are a number, or `{ "data", "field", "agg", "where" }` computed on the filtered rows; `agg` is `sum` (default), `count` (counts the rows when there's no `field`), `mean`, `min`, `max`, `first`, `last`. A trailing unit (`%`, `K`, `h`) prints small. `format: "percent"` takes a 0–1 value. `delta` prints signed, green when up unless `"good": "down"`, as a percent of a 0–1 change unless `deltaFormat` says otherwise (`number`, `integer`, `compact`, `money`).
-
-**facts**: 2 to 4 `items` of `{ value, text }`. `value` is a short string ("53%", "10 of 19", "1.4 h") or a number with `format`; `text` is one sentence that says what it means.
-
-**bars**: horizontal bars in HTML, one row per `label`. Either `value` (one number) or `segments` (fields that add up to the bar, with `names` and `tones`, and a legend). `end` is a field printed after the bar, like `"55 · 47% today"`, built in the prep script; without it the total prints. `percent: true` makes every bar full width. Sorted by total unless `"sort": "data"`; `limit` keeps the top N. Rows click to filter when `label` is a list filter's field.
-
-**matrix**: `x`, `y`, `value`. Cells tint by their share of the largest value (`"scale": "row"` compares within a row). `tint`: `single` (default), `columns` (each column in its entity color), `rows`. Long column names rotate. Rows and columns keep the data's order, or list `columns`.
-
-**chart**: `chart` is one of:
-
-- `line`, `area`: `x` (a year, an ISO date, or a category), `y`, optional `series`; or wide rows with `"y": ["fix", "feat"]` and `names`. Lines are named at their end; `endValues: true` adds the last value. `emphasis` draws one series (a total, "All") in the text color and thicker. `points: true` marks every value. `area` stacks with a series; `"stack": "percent"` on an `area` makes shares.
-- `bar`, `stacked`, `grouped`: `x` the category, `y` the value, optional `series`. `horizontal: true` sorts by value; `limit` keeps the top N; `"stack": "percent"` turns stacked bars (`stacked`, or `bar` with a `series`) into shares.
-- `scatter`: `x`, `y`, optional `size`, `series`, `label` (names the top `labelTop` points, moved apart so they don't overlap). `logX`/`logY` keep points at 0 on the axis. A click on a point filters by its `label` or `series` when that field is a list filter's, and otherwise, when the report has `search`, searches for its `label`, which narrows every table to that row.
-- `histogram`: `x` only; `bins` (default 30). With `logToggle` on log, values at or below 0 are left out.
-
-Options for any chart: `format` (`number`, `integer`, `compact`, `percent` for 0–1 values, `money` in US dollars), `height` (default 240), `highlight` (one series in color, the rest gray), `tones`, `logToggle`, `xTitle`, `yTitle`.
-
-**table**: `data`, `columns` of `{ field, label, format, number }`, `sort` (a field, descending), `limit` (rows shown, default 12), `more` (rows each "Show more" adds), `search: true`, `rank: false`. `"style": "rows"` is the dense evidence list: no header, no rank, its title shows the matching count, and the sidebar search filters it. Column `format`:
-
-- `entity`: a colored dot and the name, for a list filter's field. Rows click to filter.
-- `bar`: inline bar and number; `heat`: tinted cell; `delta`: signed and colored, a 0–1 change printed as a percent; `number`/`integer`/`compact`/`percent`/`money`.
-- `stack`: a small bar split by `fields` (with `names`, `tones`), for a mix per row. Give it any `field` name as its key.
-- `chips`: an array of strings or `[label, count]` pairs, as pills, like the two things a customer most needs.
-- `text` (`truncate: true` cuts it to the cell), `date`, `user` (GitHub avatar), `country` (flag from an ISO code), `link`. `suffix` prints another field after a number, small.
-
-**vega** (escape hatch): `{ "type": "vega", "title", "spec": { …Vega-Lite…, "data": { "name": "<dataset>" } } }`.
-
-## Filters
-
-- `tabs`: periods or modes in the sidebar, one always on; more than 5 options become a dropdown, so list every year if the reader needs them. Give every dataset that should follow it the field, with one set of rows per option.
-- `list` (default for more than 5 options): the entity list in the sidebar, each name with its color and a count of rows in `count` (a dataset name; `countField` sums a field instead). Click to filter every dataset with that field; click again to clear. `colors` maps a value to a tone (`{ "Bug": "bad" }`) when its meaning has a color.
-- `toggle`: a checkbox in the top bar. Rows whose field is true are hidden until it's checked, like "Include thanks and scheduling".
-- `search` (report level, the placeholder text): filters every `table`.
-
-Datasets without a filter's field ignore it.
diff --git a/skills/data-explorer/scripts/build.mjs b/skills/data-explorer/scripts/build.mjs
deleted file mode 100644
index 5c52f996..00000000
--- a/skills/data-explorer/scripts/build.mjs
+++ /dev/null
@@ -1,181 +0,0 @@
-// node build.mjs report.json report.html [--shots dir]
-// Checks report.json, then writes one self-contained HTML page. With --shots, it opens the page and saves a
-// screenshot of every view in light and dark, plus the first view on a phone, and fails on any chart that broke.
-// It needs nothing installed. Where comark-ui is, it inlines Vega so the page works offline; --shots needs playwright.
-import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
-import { createRequire } from "node:module";
-import { homedir } from "node:os";
-import { dirname, join, resolve } from "node:path";
-import { fileURLToPath, pathToFileURL } from "node:url";
-import { check } from "./check.mjs";
-
-const here = dirname(fileURLToPath(import.meta.url));
-const assets = join(here, "../assets");
-const [input, output, ...rest] = process.argv.slice(2);
-if (!input || !output) {
-  console.error("Usage: node build.mjs report.json report.html [--shots dir]");
-  process.exit(2);
-}
-const shots = rest[0] === "--shots" ? resolve(rest[1] ?? "shots") : null;
-
-let report;
-try {
-  report = JSON.parse(readFileSync(input, "utf8"));
-} catch (error) {
-  console.error(`${input} isn't valid JSON: ${error.message}`);
-  process.exit(1);
-}
-const result = check(report);
-for (const w of result.warnings) console.log(`warning  ${w}`);
-for (const e of result.errors) console.log(`error    ${e}`);
-if (result.errors.length) {
-  console.log(`\n${result.errors.length} errors. Fix them and build again.`);
-  process.exit(1);
-}
-
-// pnpm keeps vega inside comark-charts, so look in the current folder first, then follow comark-ui to it. Without
-// either, the page loads Vega from jsDelivr when it opens.
-const local = createRequire(join(process.cwd(), "noop.js"));
-function packageDir(name) {
-  const tries = [local];
-  try {
-    const ui = createRequire(local.resolve("comark-ui/package.json"));
-    tries.push(createRequire(ui.resolve("comark-charts/package.json")));
-  } catch {}
-  for (const require of tries) {
-    try {
-      for (let dir = dirname(require.resolve(name)); dir !== dirname(dir); dir = dirname(dir)) {
-        const manifest = join(dir, "package.json");
-        if (existsSync(manifest) && JSON.parse(readFileSync(manifest, "utf8")).name === name)
-          return dir;
-      }
-    } catch {}
-  }
-  return null;
-}
-const script = (code) => `<script>${code.replace(/<\/script/gi, "<\\/script")}</script>`;
-const vegaDirs = [packageDir("vega"), packageDir("vega-lite")];
-const vega = vegaDirs.every(Boolean)
-  ? [
-      script(readFileSync(join(vegaDirs[0], "build/vega.min.js"), "utf8")),
-      script(readFileSync(join(vegaDirs[1], "build/vega-lite.min.js"), "utf8")),
-    ].join("\n")
-  : null;
-if (!vega)
-  console.log(
-    "note     Vega isn't installed here, so the page loads it from jsDelivr when it opens. Run the build where comark-ui is installed for a page that works offline.",
-  );
-
-// The same page an agent without Node fills by hand: put each part in its slot.
-const esc = (s) =>
-  String(s).replace(
-    /[&<>"]/g,
-    (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c],
-  );
-// Each slot is an element of the page whose contents are replaced, keeping its tags.
-const fill = (id, text) => [new RegExp(`(<(\\w+) id="${id}"[^>]*>)[\\s\\S]*?(</\\2>)`), text];
-const slots = [
-  [/(<(title)>)[\s\S]*?(<\/title>)/, esc(report.title)],
-  fill("rp-style", `\n${readFileSync(join(assets, "style.css"), "utf8")}`),
-  fill("report-data", JSON.stringify(report).replace(/</g, "\\u003c")),
-  fill(
-    "rp-app",
-    `\n${readFileSync(join(assets, "app.js"), "utf8").replace(/<\/script/gi, "<\\/script")}`,
-  ),
-  ["<!-- vega -->", vega ?? ""],
-];
-let html = readFileSync(join(assets, "page.html"), "utf8");
-for (const [slot, text] of slots) {
-  if (!html.match(slot)) throw new Error(`assets/page.html lost its ${slot} slot.`);
-  html = html.replace(slot, (...m) => (typeof slot === "string" ? text : `${m[1]}${text}${m[3]}`));
-}
-mkdirSync(dirname(resolve(output)), { recursive: true });
-writeFileSync(output, html);
-console.log(
-  `Wrote ${output} (${(html.length / 1024).toFixed(0)} kB, ${result.rows} rows, ${report.views.length} views${result.escapes ? `, ${result.escapes} raw Vega-Lite blocks` : ""}).`,
-);
-
-if (shots) {
-  mkdirSync(shots, { recursive: true });
-  let path;
-  try {
-    path = local.resolve("playwright");
-  } catch {
-    console.log(
-      "error    --shots needs playwright: run the build where it's installed (pnpm add playwright).",
-    );
-    process.exit(1);
-  }
-  const playwright = await import(pathToFileURL(path).href);
-  const { chromium } = playwright.chromium ? playwright : playwright.default;
-  // Playwright's own browser may be missing; fall back to the newest one in its cache.
-  const cache = join(homedir(), ".cache/ms-playwright");
-  const fallback = existsSync(cache)
-    ? readdirSync(cache)
-        .filter((d) => /^chromium-\d+$/.test(d))
-        .sort((a, b) => Number(b.slice(9)) - Number(a.slice(9)))
-        .map((d) => join(cache, d, "chrome-linux64/chrome"))
-        .find((path) => existsSync(path))
-    : undefined;
-  let browser;
-  try {
-    browser = await chromium.launch();
-  } catch {
-    browser = await chromium.launch({ executablePath: fallback });
-  }
-  const problems = [];
-  const url = pathToFileURL(resolve(output)).href;
-  for (const theme of ["light", "dark"]) {
-    const page = await browser.newPage({
-      viewport: { width: 1440, height: 900 },
-      deviceScaleFactor: 1,
-    });
-    page.on("pageerror", (e) => problems.push(`page error: ${e.message}`));
-    page.on(
-      "console",
-      (m) =>
-        m.type() === "error" &&
-        !/Failed to load resource/.test(m.text()) &&
-        problems.push(`console: ${m.text()}`),
-    );
-    await page.goto(`${url}?theme=${theme}`);
-    await page.evaluate(() => document.fonts.ready);
-    const ids = await page.evaluate(() => window.__report?.views ?? []);
-    for (const id of ids) {
-      await page.evaluate((v) => window.__report.go(v), id);
-      await page
-        .waitForFunction((v) => document.body.dataset.ready === v, id, { timeout: 20000 })
-        .catch(() => problems.push(`view ${id}: charts didn't finish drawing in 20 s`));
-      await page.waitForTimeout(150);
-      if (theme === "light") {
-        const broken = await page.$$eval(".rp-chart[data-state=error]", (els) =>
-          els.map((el) => `${el.getAttribute("aria-label")}: ${el.dataset.error}`),
-        );
-        for (const b of broken) problems.push(`view ${id}: chart "${b}"`);
-        const clipped = await page.$$eval(".rp-block", (cards) =>
-          cards
-            .filter((c) => c.scrollWidth > c.clientWidth + 2 && !c.querySelector(".rp-scroll"))
-            .map((c) => c.querySelector("h3")?.textContent ?? "a block"),
-        );
-        for (const c of clipped) problems.push(`view ${id}: "${c}" is wider than its card`);
-      }
-      await page.screenshot({ path: join(shots, `${id}-${theme}.png`), fullPage: true });
-    }
-    await page.close();
-  }
-  const phone = await browser.newPage({
-    viewport: { width: 390, height: 844 },
-    deviceScaleFactor: 2,
-  });
-  await phone.goto(`${url}?theme=light`);
-  await phone
-    .waitForFunction(() => document.body.dataset.ready, null, { timeout: 20000 })
-    .catch(() => {});
-  await phone.screenshot({ path: join(shots, "phone.png"), fullPage: true });
-  await browser.close();
-  for (const p of new Set(problems)) console.log(`error    ${p}`);
-  console.log(
-    `Screenshots in ${shots}: one per view and theme, plus phone.png. Open every one before you call the report done.`,
-  );
-  if (problems.length) process.exit(1);
-}
diff --git a/skills/data-explorer/scripts/check.mjs b/skills/data-explorer/scripts/check.mjs
deleted file mode 100644
index 0c4068e6..00000000
--- a/skills/data-explorer/scripts/check.mjs
+++ /dev/null
@@ -1,477 +0,0 @@
-// Checks a report.json before it's built. Every issue names where it is and how to fix it.
-
-const LIMITS = {
-  title: 40,
-  subtitle: 60,
-  intro: 280,
-  label: 22,
-  summary: 140,
-  blockTitle: 60,
-  note: 120,
-  method: 1600,
-  statLabel: 28,
-  hint: 32,
-  fact: 110,
-};
-const KEYS = {
-  report: [
-    "title",
-    "subtitle",
-    "intro",
-    "source",
-    "updated",
-    "filters",
-    "search",
-    "top",
-    "views",
-    "bottom",
-    "method",
-    "data",
-  ],
-  filter: ["field", "label", "type", "default", "options", "count", "countField", "colors"],
-  view: ["id", "label", "summary", "blocks"],
-  stats: ["type", "items", "id", "title", "note"],
-  stat: ["label", "value", "format", "unit", "delta", "deltaFormat", "good", "hint"],
-  facts: ["type", "items", "id", "title", "note"],
-  fact: ["value", "format", "text"],
-  chart: [
-    "type",
-    "chart",
-    "title",
-    "note",
-    "data",
-    "x",
-    "y",
-    "series",
-    "names",
-    "labels",
-    "value",
-    "size",
-    "label",
-    "labelTop",
-    "format",
-    "height",
-    "wide",
-    "half",
-    "horizontal",
-    "stack",
-    "limit",
-    "sort",
-    "highlight",
-    "emphasis",
-    "tones",
-    "endValues",
-    "points",
-    "yMax",
-    "logX",
-    "logY",
-    "logToggle",
-    "xTitle",
-    "yTitle",
-    "xType",
-    "xFormat",
-    "bins",
-    "curve",
-    "tint",
-    "scale",
-    "columns",
-    "id",
-  ],
-  bars: [
-    "type",
-    "title",
-    "note",
-    "data",
-    "label",
-    "value",
-    "segments",
-    "names",
-    "tones",
-    "end",
-    "format",
-    "percent",
-    "sort",
-    "limit",
-    "wide",
-    "half",
-    "id",
-  ],
-  matrix: [
-    "type",
-    "title",
-    "note",
-    "data",
-    "x",
-    "y",
-    "value",
-    "columns",
-    "tint",
-    "tones",
-    "scale",
-    "format",
-    "wide",
-    "half",
-    "id",
-  ],
-  table: [
-    "type",
-    "title",
-    "note",
-    "data",
-    "columns",
-    "style",
-    "header",
-    "sort",
-    "limit",
-    "more",
-    "search",
-    "rank",
-    "wide",
-    "half",
-    "id",
-  ],
-  column: [
-    "field",
-    "label",
-    "format",
-    "number",
-    "fields",
-    "names",
-    "tones",
-    "colorBy",
-    "truncate",
-    "suffix",
-  ],
-  vega: ["type", "title", "note", "spec", "height", "wide", "half", "id"],
-};
-const TYPES = ["stats", "facts", "chart", "bars", "matrix", "table", "vega"];
-const CHARTS = ["line", "area", "bar", "stacked", "grouped", "scatter", "heatmap", "histogram"];
-const FORMATS = ["number", "integer", "compact", "percent", "money"];
-const COLUMN_FORMATS = [
-  "text",
-  "entity",
-  "user",
-  "country",
-  "link",
-  "date",
-  "bar",
-  "heat",
-  "stack",
-  "chips",
-  "delta",
-  ...FORMATS,
-];
-const TONE_NAMES = ["good", "fair", "warn", "bad", "muted", "accent"];
-const MAX_SERIES = 12;
-
-const sentences = (s) => (String(s).match(/[.!?](\s|$)/g) ?? []).length;
-
-export function check(report) {
-  const errors = [];
-  const warnings = [];
-  const err = (where, msg) => errors.push(`${where}: ${msg}`);
-  const warn = (where, msg) => warnings.push(`${where}: ${msg}`);
-  const keys = (obj, kind, where) => {
-    for (const k of Object.keys(obj ?? {}))
-      if (!KEYS[kind].includes(k))
-        err(
-          where,
-          `\`${k}\` isn't a ${kind} option. The options are ${KEYS[kind].map((x) => `\`${x}\``).join(", ")}.`,
-        );
-  };
-  const text = (value, limit, where, what, one) => {
-    if (value == null) return;
-    if (typeof value !== "string") return err(where, `${what} must be text.`);
-    if (value.length > limit)
-      err(
-        where,
-        `${what} is ${value.length} characters; the limit is ${limit}. Keep the one thing the reader needs and move the rest to \`method\`.`,
-      );
-    if (one && sentences(value) > 1)
-      err(
-        where,
-        `${what} has ${sentences(value)} sentences; write one. Put the rest in \`method\` or let a block show it.`,
-      );
-  };
-  const tones = (list, where) => {
-    for (const t of list ?? [])
-      if (typeof t === "string" && !t.startsWith("#") && !TONE_NAMES.includes(t))
-        err(
-          where,
-          `tone \`${t}\` isn't one of ${TONE_NAMES.join(", ")}, a palette index, or a #hex color.`,
-        );
-  };
-
-  keys(report, "report", "report");
-  if (!report.title)
-    err(
-      "report",
-      "add a `title`: the product-like name in the top bar, like `shoplens` or `Who builds Nuxt`.",
-    );
-  text(report.title, LIMITS.title, "report", "`title`");
-  text(report.subtitle, LIMITS.subtitle, "report", "`subtitle`");
-  text(report.intro, LIMITS.intro, "report", "`intro`");
-  if (report.intro && sentences(report.intro) > 2)
-    err(
-      "report",
-      "`intro` has more than two sentences; say what the report answers and where the data comes from, nothing else.",
-    );
-  text(report.method, LIMITS.method, "report", "`method`");
-  if (report.source && (!report.source.label || !report.source.url))
-    err("report.source", "give both `label` and `url`.");
-
-  const data = report.data ?? {};
-  if (!Object.keys(data).length)
-    err("report", "add `data`: one array of rows per dataset, keyed by name.");
-  let total = 0;
-  for (const [name, rows] of Object.entries(data)) {
-    if (
-      !Array.isArray(rows) ||
-      rows.some((r) => typeof r !== "object" || r === null || Array.isArray(r))
-    )
-      err(`data.${name}`, "must be an array of row objects.");
-    else total += rows.length;
-  }
-  const size = JSON.stringify(data).length;
-  if (size > 3_000_000)
-    err(
-      "data",
-      `is ${(size / 1e6).toFixed(1)} MB; aggregate it in the prep script so the page stays under 3 MB.`,
-    );
-  else if (total > 20000)
-    warn(
-      "data",
-      `${total} rows in all; aggregate in the prep script unless a table needs every row.`,
-    );
-  const fieldsOf = (name) => {
-    const set = new Set();
-    for (const r of data[name] ?? []) for (const k of Object.keys(r)) set.add(k);
-    return set;
-  };
-  const needData = (name, where) => {
-    if (!name) return err(where, "add `data`: the name of a dataset.") ?? false;
-    if (!(name in data))
-      return (
-        err(
-          where,
-          `there's no dataset \`${name}\`. The datasets are ${Object.keys(data)
-            .map((x) => `\`${x}\``)
-            .join(", ")}.`,
-        ) ?? false
-      );
-    return true;
-  };
-  const needField = (name, f, where, what) => {
-    if (f == null) return;
-    const fields = fieldsOf(name);
-    for (const one of Array.isArray(f) ? f : [f])
-      if (!fields.has(one))
-        err(
-          where,
-          `${what} \`${one}\` isn't a field of \`${name}\`. Its fields are ${[...fields].map((x) => `\`${x}\``).join(", ")}.`,
-        );
-  };
-
-  const listFields = new Set();
-  for (const [i, f] of (report.filters ?? []).entries()) {
-    const where = `filters[${i}]`;
-    keys(f, "filter", where);
-    if (f.type && !["tabs", "list", "toggle"].includes(f.type))
-      err(
-        where,
-        "`type` must be `tabs` (a few periods or modes), `list` (names with a color and a count) or `toggle` (a checkbox in the top bar).",
-      );
-    if (!f.field) err(where, "add the `field` it filters on.");
-    else if (!Object.values(data).some((rows) => rows.some?.((r) => f.field in r)))
-      err(where, `no dataset has a \`${f.field}\` field, so this filter would do nothing.`);
-    if (f.count) needData(f.count, where);
-    if ((f.type ?? (f.options && f.options.length <= 5 ? "tabs" : "list")) === "list")
-      listFields.add(f.field);
-  }
-
-  let escapes = 0;
-  const checkBlock = (b, at) => {
-    const kind = b.type;
-    if (!TYPES.includes(kind))
-      return err(at, `\`type\` must be one of ${TYPES.map((t) => `\`${t}\``).join(", ")}.`);
-    keys(b, kind, at);
-    text(b.title, LIMITS.blockTitle, at, "`title`");
-    text(b.note, LIMITS.note, at, "`note`", true);
-    if (b.note && !b.title)
-      err(at, "a `note` shows under the block's `title`; add a `title` or drop the `note`.");
-    if (kind === "stats" || kind === "facts") {
-      const max = kind === "stats" ? 6 : 4;
-      if (!b.items?.length) err(at, "add `items`.");
-      if (b.items?.length > max)
-        err(at, `has ${b.items.length} items; keep the ${max} or fewer that matter.`);
-      for (const [si, s] of (b.items ?? []).entries()) {
-        const w = `${at} > items[${si}]`;
-        keys(s, kind === "stats" ? "stat" : "fact", w);
-        if (kind === "stats") {
-          text(s.label, LIMITS.statLabel, w, "`label`");
-          text(s.hint, LIMITS.hint, w, "`hint`");
-        } else {
-          if (!s.text) err(w, "add `text`: one sentence that says what the number means.");
-          text(s.text, LIMITS.fact, w, "`text`", true);
-        }
-        for (const slot of ["value", "delta"]) {
-          const v = s[slot];
-          if (v && typeof v === "object" && needData(v.data, `${w}.${slot}`)) {
-            if (v.field == null && v.agg !== "count")
-              err(`${w}.${slot}`, 'add `field`, or `"agg": "count"` to count the rows.');
-            needField(v.data, v.field, `${w}.${slot}`, "`field`");
-          }
-        }
-        if (s.format && !FORMATS.includes(s.format))
-          err(w, `\`format\` must be one of ${FORMATS.join(", ")}.`);
-      }
-      return;
-    }
-    if (kind === "vega") {
-      escapes++;
-      if (!b.spec || typeof b.spec !== "object")
-        err(at, 'add `spec`: a Vega-Lite spec whose `data` is `{ "name": "<dataset>" }`.');
-      else if (b.spec.data?.name) needData(b.spec.data.name, at);
-      warn(at, "is a raw Vega-Lite block. Use another block when one fits.");
-      return;
-    }
-    if (!b.title && kind !== "table") err(at, "add a `title` that says what is measured.");
-    if (!needData(b.data, at)) return;
-    const rows = data[b.data] ?? [];
-    tones(b.tones, at);
-    if (b.format && !FORMATS.includes(b.format))
-      err(at, `\`format\` must be one of ${FORMATS.join(", ")}.`);
-    if (kind === "bars") {
-      if (!b.label) err(at, "add `label`: the field that names each row.");
-      if (!b.value && !b.segments)
-        err(at, "add `value` (one number per row) or `segments` (fields that add up to the bar).");
-      needField(b.data, b.label, at, "`label`");
-      needField(b.data, b.value, at, "`value`");
-      needField(b.data, b.segments, at, "`segments`");
-      needField(b.data, b.end, at, "`end`");
-      if (rows.length > 30 && !b.limit)
-        err(at, `has ${rows.length} rows; set \`limit\` (at most 30) or use a table.`);
-    }
-    if (kind === "matrix" || (kind === "chart" && b.chart === "heatmap")) {
-      needField(b.data, b.x, at, "`x`");
-      needField(b.data, b.y, at, "`y`");
-      needField(b.data, b.value, at, "`value`");
-      if (b.tint && !["columns", "rows", "single"].includes(b.tint))
-        err(
-          at,
-          "`tint` must be `columns` (each column in its value's color), `rows`, or `single`.",
-        );
-      const cols = new Set(rows.map((r) => r[b.x])).size;
-      if (cols > 24) err(at, `has ${cols} columns; keep at most 24, or swap \`x\` and \`y\`.`);
-      if (kind === "matrix") return;
-    }
-    if (kind === "chart") {
-      if (!CHARTS.includes(b.chart))
-        return err(at, `\`chart\` must be one of ${CHARTS.join(", ")}.`);
-      if (b.chart === "heatmap") return;
-      needField(b.data, b.x, at, "`x`");
-      if (b.chart !== "histogram") needField(b.data, b.y, at, "`y`");
-      needField(b.data, b.series, at, "`series`");
-      needField(b.data, b.size, at, "`size`");
-      needField(b.data, b.label, at, "`label`");
-      if (!b.x) err(at, "add `x`.");
-      if (!b.y && b.chart !== "histogram") err(at, "add `y`.");
-      const series = Array.isArray(b.y)
-        ? b.y.length
-        : b.series
-          ? new Set(rows.map((r) => r[b.series])).size
-          : 1;
-      if (series > MAX_SERIES)
-        err(
-          at,
-          `has ${series} series; show at most ${MAX_SERIES}. Keep the largest and sum the rest into one "Other" series in the prep script, or use a matrix.`,
-        );
-      if (["bar", "stacked", "grouped"].includes(b.chart) && !b.limit) {
-        const cats = new Set(rows.map((r) => r[b.x])).size;
-        if (cats > 40)
-          err(at, `has ${cats} bars; set \`limit\` to the top 10–25, or use a line or histogram.`);
-      }
-      if (b.stack != null && ["line", "scatter", "histogram"].includes(b.chart))
-        err(at, "`stack` applies to area and bar charts; draw shares as an `area` chart.");
-      if (b.horizontal && !["bar", "stacked", "grouped"].includes(b.chart))
-        err(
-          at,
-          "`horizontal` only applies to bar, stacked and grouped charts; a `bars` block is often better.",
-        );
-    }
-    if (kind === "table") {
-      if (!b.columns?.length)
-        err(at, "add `columns`: `{ field, label, format }` for each column to show, at most 9.");
-      if (b.columns?.length > 9) err(at, `has ${b.columns.length} columns; keep at most 9.`);
-      if (b.style && b.style !== "rows")
-        err(
-          at,
-          '`style` can only be `"rows"`: a dense list with no header, for the evidence behind the numbers.',
-        );
-      for (const [ci, c] of (b.columns ?? []).entries()) {
-        const w = `${at} > columns[${ci}]`;
-        keys(c, "column", w);
-        if (c.format === "stack") {
-          if (!c.fields?.length)
-            err(
-              w,
-              "a `stack` column needs `fields`: the numeric fields that make up the little bar.",
-            );
-          needField(b.data, c.fields, w, "`fields`");
-          tones(c.tones, w);
-        } else needField(b.data, c.field, w, "`field`");
-        if (c.format && !COLUMN_FORMATS.includes(c.format))
-          err(w, `\`format\` must be one of ${COLUMN_FORMATS.join(", ")}.`);
-        if (c.format === "entity" && !listFields.has(c.field))
-          warn(
-            w,
-            `\`entity\` shows a colored dot only for a field with a list filter; \`${c.field}\` has none.`,
-          );
-        if (c.suffix) needField(b.data, c.suffix, w, "`suffix`");
-      }
-    }
-  };
-
-  for (const [i, b] of (report.top ?? []).entries()) checkBlock(b, `top[${i}]`);
-  for (const [i, b] of (report.bottom ?? []).entries()) checkBlock(b, `bottom[${i}]`);
-  if ((report.top ?? []).length > 2)
-    err("report", "`top` holds at most 2 blocks (the numbers that stay on every tab).");
-  if ((report.bottom ?? []).length > 1)
-    err(
-      "report",
-      "`bottom` holds at most 1 block (the list of evidence rows that stays on every tab).",
-    );
-
-  const views = report.views ?? [];
-  if (!views.length)
-    err("report", "add `views`: the tabs of the report, each with `id`, `label` and `blocks`.");
-  if (views.length > 7)
-    err("report", `has ${views.length} views; keep at most 7 tabs and merge the rest.`);
-  const ids = new Set();
-  for (const [vi, view] of views.entries()) {
-    const where = `views[${vi}] "${view.label ?? view.id}"`;
-    keys(view, "view", where);
-    if (!view.id || !/^[a-z0-9-]+$/.test(view.id))
-      err(where, "give it an `id` in kebab-case, like `growth`.");
-    if (ids.has(view.id)) err(where, `the id \`${view.id}\` is used twice.`);
-    if (view.id === "method" && (report.method || report.intro))
-      err(
-        where,
-        "the id `method` belongs to the Method tab that `method` and `intro` add; rename this view.",
-      );
-    ids.add(view.id);
-    if (!view.label) err(where, "add a `label` for its tab.");
-    text(view.label, LIMITS.label, where, "`label`");
-    text(view.summary, LIMITS.summary, where, "`summary`", true);
-    const blocks = view.blocks ?? [];
-    if (!blocks.length) err(where, "add `blocks`.");
-    if (blocks.length > 8)
-      err(
-        where,
-        `has ${blocks.length} blocks; keep at most 8 per view, or split it into two views.`,
-      );
-    for (const [bi, b] of blocks.entries())
-      checkBlock(b, `${where} > blocks[${bi}]${b.title ? ` "${b.title}"` : ""}`);
-  }
-  return { errors, warnings, escapes, rows: total, size };
-}
diff --git a/skills/report/SKILL.md b/skills/report/SKILL.md
index 4def3e14..9431c4c5 100644
--- a/skills/report/SKILL.md
+++ b/skills/report/SKILL.md
@@ -8,7 +8,7 @@ license: MIT
 
 The reader scans a report before reading it. They want the answer, the decisions they have to make, and the numbers behind both, and they check the rest only when they doubt something. So the page has a fixed shape: the answer on top, one picture per section, short table cells, and detail folded underneath.
 
-For findings about something that already exists, such as a code review or an audit, use `review-document`. For how something works, use `visual-explanation`. For data the reader explores with filters, use `data-explorer`. This skill shapes a report you already have the material for; gathering the material is the research itself.
+For findings about something that already exists, such as a code review or an audit, use `review-document`. For how something works, use `visual-explanation`. For a dashboard the reader explores with filters, use Drop's `data-explorer` skill. This skill shapes a report you already have the material for; gathering the material is the research itself.
 
 ## 1. Write the answer and the decisions
 
diff --git a/test/data-explorer.test.ts b/test/data-explorer.test.ts
deleted file mode 100644
index e2c99533..00000000
--- a/test/data-explorer.test.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-// The data-explorer skill's build fills assets/page.html, the same page an agent without Node fills by hand. This runs
-// it on the example in references/blocks.md, as an agent would, and reads the page it writes.
-import { execFileSync } from "node:child_process";
-import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
-import { tmpdir } from "node:os";
-import { join } from "node:path";
-import { fileURLToPath } from "node:url";
-import { afterAll, describe, expect, it } from "vite-plus/test";
-
-const skill = fileURLToPath(new URL("../skills/data-explorer/", import.meta.url));
-const reference = readFileSync(join(skill, "references/blocks.md"), "utf8");
-const example = JSON.parse(/```json\n([\s\S]*?)\n```/.exec(reference)![1]!);
-const dir = mkdtempSync(join(tmpdir(), "data-explorer-"));
-afterAll(() => rmSync(dir, { recursive: true, force: true }));
-
-function build(report: unknown) {
-  const input = join(dir, "report.json");
-  const output = join(dir, "report.html");
-  writeFileSync(input, JSON.stringify(report));
-  try {
-    const log = execFileSync("node", [join(skill, "scripts/build.mjs"), input, output], {
-      cwd: dir,
-      encoding: "utf8",
-    });
-    return { ok: true, log, html: readFileSync(output, "utf8") };
-  } catch (error) {
-    return { ok: false, log: String((error as { stdout: string }).stdout), html: "" };
-  }
-}
-
-describe("the data-explorer build", () => {
-  it("fills every slot of the page with the example", () => {
-    const { ok, html } = build(example);
-    expect(ok).toBe(true);
-    expect(html).toContain(`<title>${example.title}</title>`);
-    const data = /<script id="report-data" type="application\/json">([\s\S]*?)<\/script>/.exec(
-      html,
-    )![1]!;
-    expect(JSON.parse(data)).toEqual(example);
-    expect(html).toMatch(/<style id="rp-style">\s*[\s\S]*\.rp-top/);
-    expect(html).toMatch(/<script id="rp-app" type="text\/plain">\s*[\s\S]*function render\b/);
-    // Nothing but the slots changes: text between the tags would show above the page.
-    expect(html.replace(/<(script|style|title)\b[\s\S]*?<\/\1>/g, "")).not.toMatch(
-      />\s*[^<\s][^<]*</,
-    );
-  });
-
-  it("names the field and the fix when the text runs long", () => {
-    const { ok, log } = build({
-      ...example,
-      title: "A title much longer than the forty characters a top bar holds",
-    });
-    expect(ok).toBe(false);
-    expect(log).toMatch(/error\s+.*title/);
-  });
-});