isorite 0.9.1 → 0.11.0

package/dist/main.js

@@ -18,7 +18,7 @@ import { Hono } from "hono";
 import { streamSSE } from "hono/streaming";
 import { z } from "zod";
 import { OpenCode } from "@opencode/client";
-import { appendFile, mkdir, readFile, readdir, rename, rm, writeFile } from "node:fs/promises";
+import { appendFile, mkdir, readFile, readdir, rename, rm, stat, writeFile } from "node:fs/promises";
 import { createInterface } from "node:readline/promises";
 import { createServer } from "node:net";
 import { isSea } from "node:sea";
@@ -43,6 +43,342 @@ var __exportAll = (all, no_symbols) => {
 	return target;
 };
 //#endregion
+//#region packages/kit/src/assemble.ts
+function meta(html, name) {
+	for (const m of html.matchAll(/<meta\b[^>]*>/gi)) {
+		const tag = m[0];
+		if ((tag.match(/\bname\s*=\s*["']([^"']*)["']/i)?.[1])?.toLowerCase() === name) return unescape(tag.match(/\bcontent\s*=\s*"([^"]*)"|\bcontent\s*=\s*'([^']*)'/i)?.slice(1).find((x) => x !== void 0) ?? "");
+	}
+	return null;
+}
+function manifestOf(html) {
+	return {
+		title: unescape(html.match(/<title[^>]*>([\s\S]*?)<\/title>/i)?.[1]?.trim() ?? ""),
+		description: meta(html, "description") ?? "",
+		author: meta(html, "author") ?? "",
+		date: meta(html, "date") ?? "",
+		kit: meta(html, "isorite:kit"),
+		uses: (meta(html, "isorite:uses") ?? "").split(/[\s,]+/).filter(Boolean)
+	};
+}
+/** The artifact with its manifest as given (write_artifact, plan-m23 §3.5): its title, description, author, date, kit
+*  and uses set in its head, put in where missing, so they're always right whatever the file said. A file with no
+*  head or no document around it is given one. */
+function withManifest(html, m) {
+	const esc = (s) => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+	let doc = html.trim();
+	if (!/<html\b/i.test(doc)) doc = /<head\b/i.test(doc) ? `<!doctype html>\n<html lang="en">\n${doc}\n</html>` : `<!doctype html>\n<html lang="en">\n<head>\n</head>\n<body>\n${doc.replace(/<\/?body\b[^>]*>/gi, "")}\n</body>\n</html>`;
+	if (!/<head\b/i.test(doc)) doc = doc.replace(/<html\b[^>]*>/i, (h) => `${h}\n<head>\n</head>`);
+	if (!/^<!doctype/i.test(doc)) doc = `<!doctype html>\n${doc}`;
+	const metas = [
+		["description", m.description],
+		["author", m.author],
+		["date", m.date],
+		["isorite:kit", m.kit ?? void 0],
+		["isorite:uses", m.uses?.join(" ")]
+	];
+	for (const [name, value] of metas) {
+		if (value === void 0) continue;
+		const tag = `<meta name="${name}" content="${esc(value)}">`, re = new RegExp(`<meta\\b[^>]*\\bname\\s*=\\s*["']${name.replace(":", "\\:")}["'][^>]*>`, "i");
+		doc = re.test(doc) ? doc.replace(re, () => tag) : doc.replace(/<head\b[^>]*>/i, (h) => `${h}\n${tag}`);
+	}
+	if (m.title !== void 0) {
+		const t = `<title>${esc(m.title)}</title>`;
+		doc = /<title\b[^>]*>[\s\S]*?<\/title>/i.test(doc) ? doc.replace(/<title\b[^>]*>[\s\S]*?<\/title>/i, () => t) : doc.replace(/<head\b[^>]*>/i, (h) => `${h}\n${t}`);
+	}
+	if (!/<meta\b[^>]*charset/i.test(doc)) doc = doc.replace(/<head\b[^>]*>/i, (h) => `${h}\n<meta charset="utf-8">`);
+	return doc.endsWith("\n") ? doc : doc + "\n";
+}
+/** The kit's parts an artifact uses beyond the core: Plot with a chart, three.js with 3D. */
+function partsUsed(html) {
+	const parts = [];
+	if (/<iso-chart[\s>]|\bPlot\.\w/.test(html)) parts.push("chart");
+	if (/<iso-model[\s>]|<iso-chart3d[\s>]|\bTHREE\.\w/.test(html)) parts.push("model");
+	const text = html.replace(/<script\b[\s\S]*?<\/script>/gi, "").replace(/<style\b[\s\S]*?<\/style>/gi, "");
+	if (/<iso-math[\s>]|\biso\.math\(|\$\$[\s\S]+?\$\$|\\\(|\$(?=\S)[^$\n]+?(?<=\S)\$(?!\d)/.test(text) || /\biso\.math\(/.test(html)) parts.push("math");
+	return parts;
+}
+/** The artifact as one document: the CSP, the kit's themes, components and the parts it uses, inlined at the top of
+*  its head (any kit <link> or <script src> it wrote is taken out), with its data too for a standalone export. */
+function assemble(html, kit, opts = {}) {
+	const look = opts.look ?? "isorite", ground = opts.ground ?? "lapis";
+	const body = html.replace(/<link\b[^>]*\bhref\s*=\s*["'](?:\.\/)?kit\/[^"']*["'][^>]*>\s*/gi, "").replace(/<script\b[^>]*\bsrc\s*=\s*["'](?:\.\/)?kit\/[^"']*["'][^>]*>\s*<\/script>\s*/gi, "");
+	const data = Object.entries(opts.data ?? {}).map(([p, v]) => typeof v === "string" ? `<script type="text/plain" data-path="${attr(p)}">${safe(v)}<\/script>` : `<script type="application/octet-stream" data-encoding="base64" data-path="${attr(p)}">${base64(v)}<\/script>`);
+	const parts = partsUsed(body).map((p) => `${p === "math" ? `<style>\n${safe(kit["math.css"])}\n</style>\n` : ""}<script>\n${safe(kit[`${p}.js`])}\n<\/script>`);
+	const head = [
+		CSP,
+		`<style data-look="isorite">\n${safe(kit["isorite.css"])}\n</style>`,
+		`<style data-look="plain">\n${safe(kit["plain.css"])}\n</style>`,
+		`<style>\n${safe(kit["kit.css"])}\n</style>`,
+		...data,
+		`<script>\n${safe(kit["kit.js"])}\n<\/script>`,
+		...parts
+	].join("\n");
+	return (/<head\b[^>]*>/i.test(body) ? body.replace(/<head\b[^>]*>/i, (h) => `${h}\n${head}\n`) : `<!doctype html><html><head><meta charset="utf-8">\n${head}\n</head><body>${body}</body></html>`).replace(/<html\b([^>]*)>/i, (_, a) => `<html${a.replace(/\s+data-(?:look|ground)\s*=\s*("[^"]*"|'[^']*'|\S+)/gi, "")} data-look="${look}" data-ground="${ground}">`);
+}
+function base64(bytes) {
+	let s = "";
+	for (let i = 0; i < bytes.length; i += 32768) s += String.fromCharCode(...bytes.subarray(i, i + 32768));
+	return btoa(s);
+}
+var KIT_FILES, unescape, CSP, safe, attr;
+var init_assemble = __esmMin((() => {
+	KIT_FILES = [
+		"kit.js",
+		"chart.js",
+		"model.js",
+		"math.js",
+		"math.css",
+		"isorite.css",
+		"plain.css",
+		"kit.css"
+	];
+	unescape = (s) => s.replace(/&quot;/g, "\"").replace(/&#39;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+	CSP = `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; media-src data: blob:; connect-src 'none'">`;
+	safe = (t) => t.replace(/<\/(script|style)/gi, "<\\/$1");
+	attr = (s) => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}));
+//#endregion
+//#region packages/kit/src/rules.ts
+/** The files an artifact reads, from its markup and script: data="…", an iso-model's src, iso.data/text/bytes("…"). */
+function readsOf(html) {
+	const own = html.replace(/<!--[\s\S]*?-->/g, ""), reads = /* @__PURE__ */ new Set();
+	for (const r of own.matchAll(/iso\.(?:data|text|bytes)\(\s*["'`]([^"'`$]+)["'`]/g)) reads.add(r[1]);
+	for (const t of own.matchAll(TAG)) {
+		const a = attrsOf(t[2]);
+		(a.data ?? "").split(/[\s,]+/).filter(Boolean).forEach((f) => reads.add(f));
+		if (t[1].toLowerCase() === "iso-model" && a.src) reads.add(a.src);
+	}
+	return [...reads];
+}
+function checkArtifact(html, ctx = {}) {
+	const out = [], m = manifestOf(html);
+	const err = (rule, message) => out.push({
+		rule,
+		level: "error",
+		message
+	});
+	const warn = (rule, message) => out.push({
+		rule,
+		level: "warning",
+		message
+	});
+	const own = html.replace(/<!--[\s\S]*?-->/g, "");
+	if (m.kit === null) err(1, "no <meta name=\"isorite:kit\" content=\"1\">: without it isorite gives it no kit");
+	if (!m.title) err(1, "no <title>");
+	if (!m.description) err(1, "no <meta name=\"description\" content=\"…\">: one sentence on what it shows");
+	const reads = /* @__PURE__ */ new Set();
+	for (const r of own.matchAll(/iso\.(?:data|text|bytes)\(\s*["'`]([^"'`$]+)["'`]/g)) reads.add(r[1]);
+	const files = (a) => (a.data ?? "").split(/[\s,]+/).filter(Boolean);
+	for (const t of own.matchAll(TAG)) {
+		const a = attrsOf(t[2]);
+		files(a).forEach((f) => reads.add(f));
+		if (t[1].toLowerCase() === "iso-model" && a.src) reads.add(a.src);
+	}
+	for (const r of reads) if (!m.uses.includes(r)) err(2, `it reads ${r}, which isn't in <meta name="isorite:uses">`);
+	if (ctx.files) {
+		for (const u of m.uses) if (!ctx.files.includes(u)) err(2, `${u} is in isorite:uses but there's no such file beside it${ctx.files.length ? ` (there are: ${ctx.files.join(", ")})` : ""}`);
+	}
+	if (ctx.uses && [...ctx.uses].sort().join() !== [...m.uses].sort().join()) err(2, `isorite:uses (${m.uses.join(" ") || "none"}) and the uses given (${ctx.uses.join(" ") || "none"}) differ`);
+	if (ctx.columns) for (const t of own.matchAll(TAG)) {
+		const a = attrsOf(t[2]), fs = files(a), known = fs.map((f) => ctx.columns[f]);
+		if (!fs.length || known.some((k) => !k)) continue;
+		const have = [...new Set(known.flat()), ...fs.length > 1 ? ["file"] : []];
+		for (const k of COLUMN_ATTRS) for (const c of (a[k] ?? "").split(/[\s,]+/).filter(Boolean)) {
+			const name = c.replace(/^abs\((.+)\)$/, "$1");
+			if (k === "at" && t[1].toLowerCase() !== "iso-chart3d" && !have.includes(name)) continue;
+			if (!have.includes(name)) err(3, `<${t[1]} data="${a.data}" ${k}="${a[k]}">: ${a.data} has no column "${name}" (it has ${have.join(", ")})`);
+		}
+	}
+	const code = own.replace(/<meta\b[^>]*>/gi, "").replace(/\btone\s*=\s*"[^"]*"/g, "");
+	const colour = code.match(/#[0-9a-fA-F]{3,8}\b(?![-\w])|\b(?:rgba?|hsla?|oklch|oklab|lab|lch)\(\s*[\d.]/i) ?? code.match(/\b(?:fill|stroke|fillStyle|strokeStyle|color|background(?:-color)?|shadowColor|border(?:-color)?)\s*[:=]\s*["'`]?(?:white|black|red|blue|green|gray|grey|orange|yellow|purple|pink|navy|teal|silver)\b/i);
+	if (colour) err(4, `a colour of its own (${colour[0].trim().slice(0, 40)}): use the theme's, var(--lattice) in CSS or iso.tokens().lattice in script`);
+	const font = code.match(/font-family\s*:\s*[^;"}]*|\bfont\s*[:=]\s*["'`]?[^;"'`}]*(?<![.\w-])(?:sans-serif|serif|monospace|Arial|Helvetica|system-ui|Georgia|Times|Courier|Inter|Roboto)\b/i);
+	if (font && !/var\(--font|\$\{/.test(font[0])) err(4, `a font of its own (${font[0].slice(0, 50)}): use var(--font-ui), var(--font-text) or iso.tokens().ui`);
+	if (/border-radius\s*:/i.test(code)) err(4, "border-radius: the theme decides corners");
+	const urls = code.replace(/http:\/\/www\.w3\.org\/[\w/.-]+/g, "").match(/\bhttps?:\/\/[^\s"'`)<]+/);
+	if (urls) err(5, `a web address (${urls[0].slice(0, 60)}): an artifact reaches nothing outside the file`);
+	if (/<script\b[^>]*\bsrc\s*=/i.test(code.replace(/<script\b[^>]*\bsrc\s*=\s*["'](?:\.\/)?kit\/[^"']*["'][^>]*>/gi, ""))) err(5, "a <script src>: everything is in the file, and the kit is given");
+	if (/<link\b[^>]*\bhref\s*=\s*["'](?!(?:\.\/)?kit\/)/i.test(code)) err(5, "a <link href>: everything is in the file, and the kit is given");
+	if (/\b(?:fetch|XMLHttpRequest|WebSocket|EventSource|importScripts)\s*\(|\bimport\s*\(/.test(code)) err(5, "fetch, XMLHttpRequest or import(): read files with iso.data(path)");
+	if (html.length > 2e5) err(6, `${Math.round(html.length / 1024)} kB, over 200 kB: keep data in a data file, not in the page`);
+	const directive = own.replace(/<script[\s\S]*?<\/script>/gi, "").replace(/<style[\s\S]*?<\/style>/gi, "").replace(/<[^>]*>/g, " ").match(/\b(?:drag(?:ging)? to|click (?:here|to|on)|tap to|scroll to|hover (?:to|over)|use the slider|press (?:the|play)|try (?:dragging|moving|clicking))\b[^.]*/i);
+	if (directive) warn(7, `text that explains how to use it ("${directive[0].trim().slice(0, 60)}"): say what a thing is, not what to do with it`);
+	return out;
+}
+var COLUMN_ATTRS, TAG, attrsOf;
+var init_rules = __esmMin((() => {
+	init_assemble();
+	COLUMN_ATTRS = [
+		"x",
+		"y",
+		"z",
+		"by",
+		"column",
+		"columns",
+		"at"
+	];
+	TAG = /<(iso-[\w-]+)\b([^>]*)>/gi;
+	attrsOf = (s) => Object.fromEntries([...s.matchAll(/([\w-]+)\s*=\s*"([^"]*)"/g)].map((m) => [m[1].toLowerCase(), m[2]]));
+}));
+//#endregion
+//#region packages/kit/src/data.ts
+/** One line of delimited text into fields; quotes may hold the delimiter, newlines and doubled quotes. */
+function* records(text, sep) {
+	let field = "", row = [], quoted = false;
+	for (let i = 0; i < text.length; i++) {
+		const c = text[i];
+		if (quoted) {
+			if (c === "\"") {
+				if (text[i + 1] === "\"") {
+					field += "\"";
+					i++;
+				} else quoted = false;
+			} else field += c;
+		} else if (c === "\"" && field === "") quoted = true;
+		else if (c === sep) {
+			row.push(field);
+			field = "";
+		} else if (c === "\n" || c === "\r") {
+			if (c === "\r" && text[i + 1] === "\n") i++;
+			row.push(field);
+			field = "";
+			if (row.length > 1 || row[0] !== "") yield row;
+			row = [];
+		} else field += c;
+	}
+	row.push(field);
+	if (row.length > 1 || row[0] !== "") yield row;
+}
+function parseDelimited(text, sep = ",") {
+	const it = records(text.replace(/^/, ""), sep), head = it.next();
+	if (head.done) return [];
+	const cols = head.value.map((c) => c.trim());
+	const out = [];
+	for (const r of it) out.push(Object.fromEntries(cols.map((c, i) => [c, value(r[i] ?? "")])));
+	return out;
+}
+function parseData(path, text) {
+	const ext = path.toLowerCase().split(".").pop();
+	if (ext === "json") {
+		const j = JSON.parse(text);
+		if (Array.isArray(j)) return j;
+		const inner = j && typeof j === "object" ? Object.values(j).find(Array.isArray) : null;
+		if (inner) return inner;
+		throw new Error(`${path}: not an array of rows`);
+	}
+	if (ext === "jsonl" || ext === "ndjson") return text.split(/\r?\n/).filter((l) => l.trim()).map((l) => JSON.parse(l));
+	if (ext === "tsv") return parseDelimited(text, "	");
+	if (ext === "csv") return parseDelimited(text, ",");
+	throw new Error(`${path}: the kit reads CSV, TSV, JSON and JSON lines`);
+}
+/** Every column any row has, in the order they first appear. */
+function columnsOf(rows) {
+	const seen = /* @__PURE__ */ new Set();
+	for (const r of rows.slice(0, 1e3)) for (const k of Object.keys(r)) seen.add(k);
+	return [...seen];
+}
+/** What read_data tells Iso: enough to build on a file without reading it. */
+function shapeOf(path, rows, head = 5) {
+	return {
+		path,
+		rows: rows.length,
+		head: rows.slice(0, head),
+		columns: columnsOf(rows).map((name) => {
+			const vs = rows.map((r) => r[name]), present = vs.filter((v) => v !== null && v !== void 0 && v !== ""), empty = vs.length - present.length;
+			if (!present.length) return {
+				name,
+				type: "empty",
+				empty
+			};
+			if (present.every((v) => typeof v === "number")) {
+				let min = Infinity, max = -Infinity, sum = 0;
+				for (const v of present) {
+					if (v < min) min = v;
+					if (v > max) max = v;
+					sum += v;
+				}
+				return {
+					name,
+					type: "number",
+					min,
+					max,
+					mean: sum / present.length,
+					empty
+				};
+			}
+			if (present.every((v) => typeof v === "boolean")) return {
+				name,
+				type: "boolean",
+				empty
+			};
+			const distinct = [...new Set(present.map(String))];
+			return {
+				name,
+				type: "text",
+				distinct: distinct.length,
+				values: distinct.slice(0, 12),
+				empty
+			};
+		})
+	};
+}
+/** The shape as text, the way Iso reads it. */
+function describeShape(s) {
+	const g = (x) => Number.isInteger(x) ? String(x) : String(+x.toPrecision(4));
+	const lines = [`${s.path}: ${s.rows} rows, ${s.columns.length} columns`];
+	for (const c of s.columns) {
+		const empty = c.empty ? `, ${c.empty} empty` : "";
+		if (c.type === "number") lines.push(`- ${c.name}: number, ${g(c.min)} to ${g(c.max)} (mean ${g(c.mean)})${empty}`);
+		else if (c.type === "text") lines.push(`- ${c.name}: text, ${c.distinct} distinct: ${c.values.join(", ")}${c.distinct > c.values.length ? ", …" : ""}${empty}`);
+		else lines.push(`- ${c.name}: ${c.type}${empty}`);
+	}
+	const cols = s.columns.map((c) => c.name);
+	lines.push("First rows:", cols.join(","), ...s.head.map((r) => cols.map((c) => r[c] ?? "").join(",")));
+	return lines.join("\n");
+}
+var NUMBER, value;
+var init_data = __esmMin((() => {
+	NUMBER = /^[-+]?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?$/;
+	value = (s) => s === "" ? null : NUMBER.test(s.trim()) ? +s : s;
+}));
+//#endregion
+//#region packages/kit/src/context.gen.ts
+var REFERENCE, RECIPES;
+var init_context_gen = __esmMin((() => {
+	REFERENCE = "# The kit (isorite kit 1)\n\nAn artifact is one HTML file: markup, perhaps a script, and a manifest in its `<head>`. isorite gives it the kit:\nthe look (every colour, font and corner), the elements below, and `window.iso`. Write what it shows and does, never\nhow it looks: no colour, font family or border-radius of your own.\n\n## The file\n\n```html\n<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Title</title>\n<meta name=\"description\" content=\"One sentence: what it shows, and what can be done with it.\">\n<meta name=\"isorite:kit\" content=\"1\">\n<meta name=\"isorite:uses\" content=\"runs.csv other.csv\">\n<style>/* layout only, if needed */</style>\n</head>\n<body>\n<iso-page>\n  <header><h1>Title</h1><p>The question it answers, in a sentence or two.</p></header>\n  <iso-grid>\n    <iso-panel class=\"wide\"><h2>Name <span>a short reading</span></h2> … </iso-panel>\n    <iso-panel><h2>…</h2> … </iso-panel>\n  </iso-grid>\n</iso-page>\n</body>\n</html>\n```\n\n`write_artifact` fills in the title, description and manifest from its arguments, so they are always right.\n\n## Layout\n\n- `<iso-grid>`: panels in two columns (`style=\"--cols: 3\"` for three); `<iso-panel class=\"wide\">` spans the row.\n- `<iso-panel>`: its first child is `<h2>`; a `<span>` in the `h2` is a soft aside. A `<p>` in a panel is a\n  caption: what the panel shows, in a sentence.\n- `<iso-row>`: controls side by side. `<iso-stats>`: big numbers side by side.\n\n## Data, with no script\n\nEvery element with `data=\"file.csv\"` reads it itself. Several files are one table:\n`data=\"euler.csv leapfrog.csv\"` adds a column `file` (`euler`, `leapfrog`) to compare them with `by=\"file\"`.\n`where=\"integrator=leapfrog\"` keeps some rows; `where=\"t<=$t\"` compares with a control's value. `abs(col)` is a\ncolumn's size.\n\n- `<iso-chart data=\"f.csv\" x=\"t\" y=\"energy\" by=\"body\">`: a chart.\n  - `type`: `line` (default), `dot`, `bar`, `area`, `step`.\n  - `y` may name several columns: `y=\"kinetic potential total\"`, each its own line.\n  - `by`: a column whose values are the series.\n  - `x-scale`, `y-scale`: `linear` or `log`, or `$name` to follow a control (`y-scale=\"$scale\"`).\n  - `x-label`, `y-label`: the axis with its unit (`\"time (s)\"`). `height` in pixels (260).\n  - `at=\"t\"`: follows the control `t`. A rule where x is its value; or, when the data has a column `t` and x is\n    another column (a path in x and y over time), a dot on each series at the row whose `t` is nearest it.\n- `<iso-table data=\"f.csv\" columns=\"a b c\" limit=\"50\">`: the rows.\n- `<iso-stat data=\"f.csv\" column=\"err\" of=\"max\" label=\"worst error\" tone=\"gold\">`: one number. `of`: `min`, `max`,\n  `mean`, `sum`, `count`, `first`, `last`. Tones: `gold`, `blue`, `green`, `rose`. Without `data`, set it from a\n  script: `el.value = 0.0023`.\n- `<iso-chart3d data=\"f.csv\" x=\"x\" y=\"y\" z=\"z\" by=\"body\" at=\"t\">`: points or paths in 3D, turned by dragging.\n- `<iso-model src=\"part.glb\">`: a 3D model (glTF, GLB, STL, OBJ), turned by dragging. List it in isorite:uses.\n\n## Text and maths\n\n- A `<p>` in a panel is its caption. Maths is written as in a note: `$E = \\tfrac12 m v^2$` inline, `$$…$$` on a\n  line of its own; the kit sets it. `<iso-math>\\frac{a}{b}</iso-math>` is a formula alone.\n- Never name the theme's colours in text (\"the lattice line\"): a chart's legend says which series is which.\n\n## Controls\n\nEach writes its value to `iso.state[name]`; elements that name it (`at=\"t\"`, `$t`) follow it.\n\n- `<iso-slider name=\"dt\" label=\"time step\" min=\"0.001\" max=\"0.05\" step=\"0.001\" value=\"0.01\" digits=\"3\">`\n- `<iso-select name=\"scale\" label=\"scale\" options=\"linear log\">`: one of several.\n- `<iso-toggle name=\"softened\" label=\"softened\" value=\"true\">`: on or off.\n- `<iso-play name=\"t\" min=\"0\" max=\"12\" speed=\"1.5\">`: plays `iso.state.t` from min to max, and pauses.\n- `<iso-note href=\"physics/softening\">softening</iso-note>`: opens a note in isorite.\n\n## Script, when markup isn't enough\n\nFor a simulation or anything computed. Put it at the end of the body.\n\n- `const rows = await iso.data(\"f.csv\")`: the rows as objects, numbers as numbers.\n- `iso.state.name`, `iso.watch((name) => …)`: the shared state; `watch` runs after any change.\n- `iso.loop((dt, t) => …)`: runs every frame (dt in seconds), paused when hidden. Returns a stop function.\n- `<iso-canvas height=\"320\" id=\"sim\">` and `document.getElementById(\"sim\").draw = (ctx, w, h, t) => { … }`: draw on\n  a canvas sized to its panel; call `.redraw()` after a change. `t` is the theme: `t.text`, `t.soft`, `t.faint`,\n  `t.line`, `t.lattice` (blue), `t.growth` (gold), `t.malachite` (green), `t.rose`, `t.series[i]`, `t.ui` (the font).\n- A chart of what the script computes: `chart.rows = [{ t: 0, energy: -1.3 }, …]` on an `<iso-chart>` with no\n  `data`.\n- `iso.format(x)`: a number to read (3 figures, 2.3×10⁻³). `iso.tokens()`: the theme, as `t` above.\n- In CSS: `var(--text)`, `var(--text-soft)`, `var(--text-faint)`, `var(--line)`, `var(--lattice)`, `var(--growth)`,\n  `var(--malachite)`, `var(--rose)`, `var(--font-ui)`, `var(--font-text)`.\n\n## Rules (write_artifact checks them, and refuses a file that breaks one)\n\n1. Every file read (`data=\"…\"`, `src=\"…\"`, `iso.data(\"…\")`) is in `uses`, and exists: call `read_data` first.\n2. Every column named is in its file, spelt as `read_data` gives it.\n3. No colour, font family or border-radius of its own: no `#hex`, `rgb(…)`, `white`, `Arial`. Use the tokens.\n4. No network: no `http…` address, no `<script src>`, no `fetch`. The kit is given; everything else is in the file.\n5. Under 200 kB: data stays in data files.\n6. No text that tells how to use it (\"drag to rotate\", \"click here\"): a label says what a thing is.\n\n## What good is\n\nEvery panel answers a question about the data, with a caption saying what to see. Numbers are read out. Axes say\nwhat they measure, with units. Controls change what is drawn at once. Nothing is decoration.\n";
+	RECIPES = {
+		"dashboard": {
+			"about": "a dashboard of one data file: numbers, charts and a table, in markup only",
+			"html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>The pendulum's period</title>\n<meta name=\"description\" content=\"Forty timed swings at eight lengths: how the period grows with length, how close it comes to 2π√(L/g), and how much the trials scatter.\">\n<meta name=\"isorite:kit\" content=\"1\">\n<meta name=\"isorite:uses\" content=\"pendulum.csv\">\n</head>\n<body>\n<!-- Recipe 1: a dashboard of one data file, in markup only. Change: the file, the numbers, the charts' columns, the\n     captions. Every column named here must be one read_data gave. -->\n<iso-page>\n  <header>\n    <h1>The pendulum's period</h1>\n    <p>Does a longer pendulum swing slower, and by as much as theory says?</p>\n  </header>\n  <iso-grid>\n    <iso-panel class=\"wide\">\n      <h2>In numbers <span>40 swings</span></h2>\n      <iso-stats>\n        <iso-stat data=\"pendulum.csv\" column=\"period_s\" of=\"min\" label=\"shortest period (s)\" tone=\"blue\"></iso-stat>\n        <iso-stat data=\"pendulum.csv\" column=\"period_s\" of=\"max\" label=\"longest period (s)\" tone=\"gold\"></iso-stat>\n        <iso-stat data=\"pendulum.csv\" column=\"temp_c\" of=\"mean\" label=\"mean temperature (°C)\"></iso-stat>\n        <iso-stat data=\"pendulum.csv\" column=\"trial\" of=\"count\" label=\"swings timed\"></iso-stat>\n      </iso-stats>\n    </iso-panel>\n    <iso-panel>\n      <h2>Period against length</h2>\n      <iso-chart data=\"pendulum.csv\" type=\"dot\" x=\"length_m\" y=\"period_s\" x-label=\"length (m)\" y-label=\"period (s)\"></iso-chart>\n      <p>The period rises with length, more slowly as the pendulum gets longer: a square root.</p>\n    </iso-panel>\n    <iso-panel>\n      <h2>On log axes <span>slope ½ is √L</span></h2>\n      <iso-chart data=\"pendulum.csv\" type=\"dot\" x=\"length_m\" y=\"period_s\" x-scale=\"log\" y-scale=\"log\" x-label=\"length (m)\" y-label=\"period (s)\"></iso-chart>\n      <p>A straight line here is a power law; its slope, near one half, is the exponent.</p>\n    </iso-panel>\n    <iso-panel class=\"wide\">\n      <h2>Each trial <span>the scatter is the stopwatch</span></h2>\n      <iso-chart data=\"pendulum.csv\" type=\"line\" x=\"length_m\" y=\"period_s\" by=\"trial\" height=\"200\" x-label=\"length (m)\" y-label=\"period (s)\"></iso-chart>\n    </iso-panel>\n    <iso-panel class=\"wide\">\n      <h2>The measurements</h2>\n      <iso-table data=\"pendulum.csv\" columns=\"length_m trial period_s temp_c\" limit=\"40\"></iso-table>\n    </iso-panel>\n  </iso-grid>\n</iso-page>\n</body>\n</html>\n"
+		},
+		"compare": {
+			"about": "two data files with the same columns, compared: together on one chart, and side by side",
+			"html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>A lid against an open mug</title>\n<meta name=\"description\" content=\"Two mugs of the same coffee cooling for an hour, one with a lid: their temperature together, the gap between them, and where each stands at a chosen minute.\">\n<meta name=\"isorite:kit\" content=\"1\">\n<meta name=\"isorite:uses\" content=\"mug-open.csv mug-lid.csv\">\n</head>\n<body>\n<!-- Recipe 2: comparing two data files with the same columns. data=\"a.csv b.csv\" reads both as one table with a\n     column `file` (\"mug-open\", \"mug-lid\"), so by=\"file\" draws one series each and where=\"file=…\" picks one.\n     Change: the files, the columns, the captions. -->\n<iso-page>\n  <header>\n    <h1>A lid against an open mug</h1>\n    <p>How much longer does a lid keep coffee hot?</p>\n  </header>\n  <iso-grid>\n    <iso-panel class=\"wide\">\n      <h2>At one minute</h2>\n      <iso-row>\n        <iso-slider name=\"t\" label=\"minute\" min=\"0\" max=\"60\" step=\"2\" value=\"20\" digits=\"0\"></iso-slider>\n        <iso-select name=\"scale\" label=\"temperature scale\" options=\"linear log\"></iso-select>\n      </iso-row>\n      <iso-stats>\n        <iso-stat data=\"mug-open.csv\" column=\"temp_c\" of=\"last\" where=\"t_min<=$t\" label=\"open (°C)\" tone=\"blue\"></iso-stat>\n        <iso-stat data=\"mug-lid.csv\" column=\"temp_c\" of=\"last\" where=\"t_min<=$t\" label=\"with a lid (°C)\" tone=\"gold\"></iso-stat>\n        <iso-stat data=\"mug-open.csv\" column=\"temp_c\" of=\"last\" label=\"open after the hour (°C)\"></iso-stat>\n        <iso-stat data=\"mug-lid.csv\" column=\"temp_c\" of=\"last\" label=\"lid after the hour (°C)\"></iso-stat>\n      </iso-stats>\n    </iso-panel>\n    <iso-panel class=\"wide\">\n      <h2>Both, cooling</h2>\n      <iso-chart data=\"mug-open.csv mug-lid.csv\" x=\"t_min\" y=\"temp_c\" by=\"file\" at=\"t\" y-scale=\"$scale\" x-label=\"time (min)\" y-label=\"temperature (°C)\" height=\"300\"></iso-chart>\n      <p>Both fall fast at first and slower as they near the room's 21 °C; the lid halves the early loss.</p>\n    </iso-panel>\n    <iso-panel>\n      <h2>Open</h2>\n      <iso-table data=\"mug-open.csv\" limit=\"12\"></iso-table>\n    </iso-panel>\n    <iso-panel>\n      <h2>With a lid</h2>\n      <iso-table data=\"mug-lid.csv\" limit=\"12\"></iso-table>\n    </iso-panel>\n  </iso-grid>\n</iso-page>\n</body>\n</html>\n"
+		},
+		"simulation": {
+			"about": "a simulation with parameters, play and reset, drawn on a canvas, with a live chart (a script)",
+			"html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>A damped spring</title>\n<meta name=\"description\" content=\"A mass on a spring, integrated live: change the stiffness and the damping and see the motion, the energy draining away, and the period against theory's.\">\n<meta name=\"isorite:kit\" content=\"1\">\n<meta name=\"isorite:uses\" content=\"\">\n<style>\n  /* Layout only. */\n  .readout { margin-top: 12px; }\n</style>\n</head>\n<body>\n<!-- Recipe 3: a simulation with parameters and play. The parts to change are marked CHANGE: the state (what the\n     model is), step() (how it moves), draw() (what's on the canvas), and what's measured. The rest stays. -->\n<iso-page>\n  <header>\n    <h1>A damped spring</h1>\n    <p>How do stiffness and damping shape an oscillation?</p>\n  </header>\n  <iso-grid>\n    <iso-panel class=\"wide\">\n      <h2>The model</h2>\n      <iso-row>\n        <iso-slider name=\"k\" label=\"stiffness k (N/m)\" min=\"1\" max=\"40\" step=\"0.5\" value=\"10\" digits=\"1\"></iso-slider>\n        <iso-slider name=\"c\" label=\"damping c (kg/s)\" min=\"0\" max=\"2\" step=\"0.05\" value=\"0.3\" digits=\"2\"></iso-slider>\n      </iso-row>\n      <iso-row>\n        <iso-toggle name=\"playing\" label=\"play\" value=\"true\"></iso-toggle>\n        <button type=\"button\" class=\"iso-button\" id=\"reset\">reset</button>\n      </iso-row>\n      <iso-stats class=\"readout\">\n        <iso-stat id=\"time\" label=\"time (s)\"></iso-stat>\n        <iso-stat id=\"energy\" label=\"energy left\" tone=\"gold\"></iso-stat>\n        <iso-stat id=\"period\" label=\"period, theory (s)\" tone=\"blue\"></iso-stat>\n      </iso-stats>\n    </iso-panel>\n    <iso-panel>\n      <h2>The mass</h2>\n      <iso-canvas id=\"scene\" height=\"300\"></iso-canvas>\n    </iso-panel>\n    <iso-panel>\n      <h2>Energy <span>a share of the start</span></h2>\n      <iso-chart id=\"chart\" x=\"t\" y=\"energy\" x-label=\"time (s)\" y-label=\"energy left\" height=\"300\"></iso-chart>\n      <p>With no damping the energy stays; damping drains it, faster the larger c is.</p>\n    </iso-panel>\n  </iso-grid>\n</iso-page>\n<script>\n  // CHANGE: the model's state and its start.\n  const m = 1;\n  let s, history;\n  function reset() { s = { t: 0, x: 1, v: 0 }; history = []; }\n  reset();\n  const energy = () => 0.5 * m * s.v * s.v + 0.5 * iso.state.k * s.x * s.x;\n  let e0 = energy();\n\n  // CHANGE: one step of the model (here semi-implicit Euler, small steps).\n  function step(dt) {\n    const a = (-iso.state.k * s.x - iso.state.c * s.v) / m;\n    s.v += a * dt;\n    s.x += s.v * dt;\n    s.t += dt;\n  }\n\n  // CHANGE: what's drawn. t is the theme: t.line, t.text, t.soft, t.faint, t.lattice, t.growth, t.ui.\n  const scene = document.getElementById(\"scene\");\n  scene.draw = (ctx, w, h, t) => {\n    const cx = w / 2, y0 = 24, rest = h * 0.5, y = rest + s.x * h * 0.3;\n    ctx.strokeStyle = t.line; ctx.lineWidth = 1;\n    ctx.beginPath(); ctx.moveTo(cx - 60, y0); ctx.lineTo(cx + 60, y0); ctx.stroke();\n    ctx.setLineDash([3, 4]); ctx.beginPath(); ctx.moveTo(cx - 80, rest); ctx.lineTo(cx + 80, rest); ctx.stroke(); ctx.setLineDash([]);\n    // The spring, as a zigzag from the ceiling to the mass.\n    ctx.strokeStyle = t.soft; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(cx, y0);\n    for (let i = 1; i < 16; i++) ctx.lineTo(cx + (i % 2 ? 12 : -12), y0 + (y - 20 - y0) * i / 16);\n    ctx.lineTo(cx, y - 20); ctx.stroke();\n    ctx.fillStyle = t.lattice; ctx.fillRect(cx - 20, y - 20, 40, 40);\n    ctx.fillStyle = t.faint; ctx.font = `11px ${t.ui}`; ctx.fillText(\"rest\", cx + 84, rest + 4);\n  };\n\n  // Measured, and shown: the readouts and the chart, a few times a second.\n  const chart = document.getElementById(\"chart\");\n  let since = 0;\n  function show() {\n    document.getElementById(\"time\").value = s.t.toFixed(1);\n    document.getElementById(\"energy\").value = iso.format(energy() / e0);\n    document.getElementById(\"period\").value = iso.format(2 * Math.PI * Math.sqrt(m / iso.state.k));\n    chart.rows = history;\n  }\n\n  iso.loop((dt) => {\n    if (!iso.state.playing) return;\n    for (let i = 0; i < 20; i++) step(dt / 20);\n    scene.redraw();\n    since += dt;\n    if (since > 0.1) { since = 0; history.push({ t: +s.t.toFixed(2), energy: energy() / e0 }); if (history.length > 600) history.shift(); show(); }\n  });\n  iso.watch((name) => { if (name === \"k\") { e0 = energy(); } show(); scene.redraw(); });\n  document.getElementById(\"reset\").addEventListener(\"click\", () => { reset(); e0 = energy(); show(); scene.redraw(); });\n  show();\n<\/script>\n</body>\n</html>\n"
+		},
+		"explorable": {
+			"about": "an explorable explanation: inputs, numbers derived from them, and linked views (a script)",
+			"html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Why a fast wheel turns backwards</title>\n<meta name=\"description\" content=\"Sample a sine too slowly and a slower one appears: choose the signal's frequency and the sampling rate, and see the samples, the wave they seem to come from, and where every frequency lands.\">\n<meta name=\"isorite:kit\" content=\"1\">\n<meta name=\"isorite:uses\" content=\"\">\n</head>\n<body>\n<!-- Recipe 4: an explorable explanation. An input, numbers derived from it, and linked views that all follow the same\n     state; captions say what to see. CHANGE: the inputs (sliders), derive() (the numbers), the drawing, and the\n     chart's rows. Keep: every view redrawn from iso.state in one place, update(). -->\n<iso-page>\n  <header>\n    <h1>Why a fast wheel turns backwards</h1>\n    <p>Sampled too slowly, a signal is indistinguishable from a slower one. Which one, and when?</p>\n  </header>\n  <iso-grid>\n    <iso-panel class=\"wide\">\n      <h2>The signal and the sampling</h2>\n      <iso-row>\n        <iso-slider name=\"f\" label=\"signal (Hz)\" min=\"0.2\" max=\"12\" step=\"0.1\" value=\"7\" digits=\"1\"></iso-slider>\n        <iso-slider name=\"fs\" label=\"samples per second\" min=\"2\" max=\"24\" step=\"1\" value=\"8\" digits=\"0\"></iso-slider>\n      </iso-row>\n      <iso-stats>\n        <iso-stat id=\"nyquist\" label=\"Nyquist limit (Hz)\" tone=\"blue\"></iso-stat>\n        <iso-stat id=\"apparent\" label=\"what the samples show (Hz)\" tone=\"gold\"></iso-stat>\n        <iso-stat id=\"verdict\" label=\"faithful?\"></iso-stat>\n      </iso-stats>\n    </iso-panel>\n    <iso-panel class=\"wide\">\n      <h2>One second <span>the signal, its samples, and the slower wave through them</span></h2>\n      <iso-canvas id=\"wave\" height=\"260\"></iso-canvas>\n      <p>Gold dots are the samples. Above the Nyquist limit the blue wave, slower, passes through every one of them as\n        well as the true signal does: from the samples alone, the two can't be told apart.</p>\n    </iso-panel>\n    <iso-panel class=\"wide\">\n      <h2>Where every frequency lands</h2>\n      <iso-chart id=\"fold\" x=\"signal\" y=\"apparent\" at=\"f\" x-label=\"signal (Hz)\" y-label=\"frequency the samples show (Hz)\" height=\"220\"></iso-chart>\n      <p>The frequency seen climbs with the signal's up to half the sampling rate, then folds back down:\n        $f_\\text{seen} = |f - f_s \\operatorname{round}(f / f_s)|$. See <iso-note href=\"signals/sampling\">sampling</iso-note>.</p>\n    </iso-panel>\n  </iso-grid>\n</iso-page>\n<script>\n  // CHANGE: the numbers derived from the inputs.\n  function derive(f, fs) {\n    const nyquist = fs / 2;\n    const folded = Math.abs(f - fs * Math.round(f / fs));\n    return { nyquist, apparent: folded, faithful: f < nyquist };\n  }\n\n  // CHANGE: the drawing. t is the theme (t.line, t.soft, t.faint, t.lattice, t.growth, t.ui).\n  const wave = document.getElementById(\"wave\");\n  wave.draw = (ctx, w, h, t) => {\n    const { f, fs } = iso.state, d = derive(f, fs), mid = h / 2, amp = h * 0.38;\n    const X = (s) => 40 + s * (w - 60), Y = (v) => mid - v * amp;\n    ctx.strokeStyle = t.line; ctx.lineWidth = 1;\n    ctx.beginPath(); ctx.moveTo(X(0), mid); ctx.lineTo(X(1), mid); ctx.stroke();\n    const curve = (freq, colour, width) => {\n      ctx.strokeStyle = colour; ctx.lineWidth = width; ctx.beginPath();\n      for (let i = 0; i <= 600; i++) { const s = i / 600, v = Math.sin(2 * Math.PI * freq * s); i ? ctx.lineTo(X(s), Y(v)) : ctx.moveTo(X(s), Y(v)); }\n      ctx.stroke();\n    };\n    curve(f, t.soft, 1);\n    // The slower wave through the same samples: the signal less the nearest whole number of sampling rates.\n    if (!d.faithful) curve(f - fs * Math.round(f / fs), t.lattice, 2);\n    ctx.fillStyle = t.growth;\n    for (let k = 0; k <= fs; k++) { const s = k / fs; ctx.beginPath(); ctx.arc(X(s), Y(Math.sin(2 * Math.PI * f * s)), 4, 0, 2 * Math.PI); ctx.fill(); }\n    ctx.fillStyle = t.faint; ctx.font = `11px ${t.ui}`; ctx.fillText(\"0 s\", X(0) - 8, h - 6); ctx.fillText(\"1 s\", X(1) - 8, h - 6);\n  };\n\n  // One place redraws every view from the state.\n  const fold = document.getElementById(\"fold\");\n  function update() {\n    const { f, fs } = iso.state, d = derive(f, fs);\n    document.getElementById(\"nyquist\").value = iso.format(d.nyquist);\n    document.getElementById(\"apparent\").value = iso.format(d.apparent);\n    document.getElementById(\"verdict\").value = d.faithful ? \"yes\" : \"no: aliased\";\n    // CHANGE: the chart's rows, computed from the state.\n    const rows = [];\n    for (let s = 0; s <= 12; s += 0.05) rows.push({ signal: +s.toFixed(2), apparent: derive(s, fs).apparent });\n    fold.rows = rows;\n    wave.redraw();\n  }\n  iso.watch(update);\n  update();\n<\/script>\n</body>\n</html>\n"
+		},
+		"viewer": {
+			"about": "a 3D model's viewer (glTF, GLB, STL, OBJ), with what it is beside it",
+			"html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>The corner bracket</title>\n<meta name=\"description\" content=\"The printed corner bracket in 3D, with its dimensions and the notes on how it was designed and tested.\">\n<meta name=\"isorite:kit\" content=\"1\">\n<meta name=\"isorite:uses\" content=\"bracket.stl\">\n</head>\n<body>\n<!-- Recipe 5: a 3D model's viewer, with what it is beside it. iso-model shows glTF, GLB, STL and OBJ; list the file\n     in isorite:uses. CHANGE: the model's file, the numbers, the notes it links to. -->\n<iso-page>\n  <header>\n    <h1>The corner bracket</h1>\n    <p>The part as printed: an L of two plates, 6 cm by 5 cm.</p>\n  </header>\n  <iso-grid style=\"--cols: 3\">\n    <iso-panel class=\"wide\">\n      <h2>The part <span>bracket.stl</span></h2>\n      <iso-model src=\"bracket.stl\" height=\"380\"></iso-model>\n    </iso-panel>\n    <iso-panel>\n      <h2>Size</h2>\n      <iso-stats>\n        <iso-stat label=\"long arm (mm)\" value=\"60\" tone=\"blue\"></iso-stat>\n        <iso-stat label=\"short arm (mm)\" value=\"50\"></iso-stat>\n        <iso-stat label=\"thickness (mm)\" value=\"10\"></iso-stat>\n      </iso-stats>\n    </iso-panel>\n    <iso-panel>\n      <h2>Printed</h2>\n      <iso-stats>\n        <iso-stat label=\"infill\" value=\"40%\"></iso-stat>\n        <iso-stat label=\"mass (g)\" value=\"31\" tone=\"gold\"></iso-stat>\n      </iso-stats>\n    </iso-panel>\n    <iso-panel>\n      <h2>Notes</h2>\n      <p><iso-note href=\"design/bracket-loads\">The loads it takes</iso-note>, and\n        <iso-note href=\"design/print-settings\">how it was printed</iso-note>.</p>\n    </iso-panel>\n  </iso-grid>\n</iso-page>\n</body>\n</html>\n"
+		}
+	};
+}));
+//#endregion
+//#region packages/kit/src/index.ts
+var init_src$2 = __esmMin((() => {
+	init_assemble();
+	init_rules();
+	init_data();
+	init_context_gen();
+}));
+//#endregion
 //#region packages/core/src/text.ts
 /** Compare by code point, as Python sorts strings. */
 function cmp(a, b) {
@@ -142,7 +478,7 @@ function normpath(p) {
 	}
 	return "/".repeat(initial) + out.join("/") || ".";
 }
-/** SHA-256 as hex, synchronous and dependency-free, so the core runs anywhere. */
+/** SHA-256 as hex, synchronous and dependency-free, so the core runs anywhere: of text (as UTF-8), or of bytes. */
 function sha256(message) {
 	const K = new Uint32Array([
 		1116352408,
@@ -210,7 +546,7 @@ function sha256(message) {
 		3204031479,
 		3329325298
 	]);
-	const data = new TextEncoder().encode(message);
+	const data = typeof message === "string" ? new TextEncoder().encode(message) : message;
 	const len = data.length;
 	const padded = new Uint8Array(len + 9 + 63 >> 6 << 6);
 	padded.set(data);
@@ -377,7 +713,7 @@ function linkTexts(body) {
 	return out;
 }
 /** Every link and image in a body, in order: where it points, its title, and whether it is an image
-*  (`![…](…)`, which for an artifact or a picture means "shown here", an embed). */
+*  (`![…](…)`, which for an artifact or a picture means "shown here", an embed), with an image's alt text. */
 function citeRefs(body) {
 	const { tokens } = parse$1(body);
 	const out = [];
@@ -391,7 +727,8 @@ function citeRefs(body) {
 		else if (c.type === "image") out.push({
 			href: c.attrGet("src") ?? "",
 			title: c.attrGet("title"),
-			embed: true
+			embed: true,
+			alt: c.content
 		});
 	}
 	return out;
@@ -446,6 +783,94 @@ var init_markdown = __esmMin((() => {
 	SPACES = /[\s_]+/gu;
 }));
 //#endregion
+//#region packages/core/src/picture.ts
+/** Width and height in pixels, or null. */
+function pictureSize(bytes, type) {
+	const v = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength), n = bytes.length;
+	const at = (i, s) => [...s].every((c, k) => bytes[i + k] === c.charCodeAt(0));
+	const ok = (w, h) => w > 0 && h > 0 ? {
+		width: w,
+		height: h
+	} : null;
+	try {
+		if (type === "image/png" && n >= 24 && at(12, "IHDR")) return ok(v.getUint32(16), v.getUint32(20));
+		if (type === "image/gif" && n >= 10 && at(0, "GIF")) return ok(v.getUint16(6, true), v.getUint16(8, true));
+		if (type === "image/jpeg") {
+			for (let i = 2; i + 9 < n;) {
+				if (bytes[i] !== 255) return null;
+				const m = bytes[i + 1];
+				if (m >= 192 && m <= 207 && m !== 196 && m !== 200 && m !== 204) return ok(v.getUint16(i + 7), v.getUint16(i + 5));
+				i += 2 + v.getUint16(i + 2);
+			}
+			return null;
+		}
+		if (type === "image/webp" && n >= 30 && at(0, "RIFF") && at(8, "WEBP")) {
+			if (at(12, "VP8 ")) return ok(v.getUint16(26, true) & 16383, v.getUint16(28, true) & 16383);
+			if (at(12, "VP8L")) {
+				const b = v.getUint32(21, true);
+				return ok((b & 16383) + 1, (b >> 14 & 16383) + 1);
+			}
+			if (at(12, "VP8X")) return ok(1 + (bytes[24] | bytes[25] << 8 | bytes[26] << 16), 1 + (bytes[27] | bytes[28] << 8 | bytes[29] << 16));
+			return null;
+		}
+		if (type === "image/svg+xml") {
+			const head = new TextDecoder().decode(bytes.subarray(0, 4096)), tag = /<svg\b[^>]*>/i.exec(head)?.[0] ?? "";
+			const attr = (name) => new RegExp(`\\s${name}\\s*=\\s*["']\\s*([\\d.]+)\\s*(px)?\\s*["']`, "i").exec(tag);
+			const w = attr("width"), h = attr("height");
+			if (w && h) return ok(Math.round(Number(w[1])), Math.round(Number(h[1])));
+			const box = /\sviewBox\s*=\s*["']\s*[-\d.]+[\s,]+[-\d.]+[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(tag);
+			return box ? ok(Math.round(Number(box[1])), Math.round(Number(box[2]))) : null;
+		}
+	} catch {}
+	return null;
+}
+var TYPES$1, pictureType, OTHER, fileType;
+var init_picture = __esmMin((() => {
+	TYPES$1 = {
+		png: "image/png",
+		jpg: "image/jpeg",
+		jpeg: "image/jpeg",
+		gif: "image/gif",
+		svg: "image/svg+xml",
+		webp: "image/webp",
+		avif: "image/avif"
+	};
+	pictureType = (path) => {
+		const dot = path.lastIndexOf(".");
+		return dot < 0 || path.lastIndexOf("/") > dot ? null : TYPES$1[path.slice(dot + 1).toLowerCase()] ?? null;
+	};
+	OTHER = {
+		html: "text/html",
+		htm: "text/html",
+		csv: "text/csv",
+		tsv: "text/tab-separated-values",
+		json: "application/json",
+		jsonl: "application/jsonl",
+		ndjson: "application/x-ndjson",
+		txt: "text/plain",
+		tex: "text/plain",
+		pdf: "application/pdf",
+		glb: "model/gltf-binary",
+		gltf: "model/gltf+json",
+		stl: "model/stl",
+		obj: "model/obj",
+		zip: "application/zip",
+		parquet: "application/vnd.apache.parquet",
+		arrow: "application/vnd.apache.arrow.file",
+		npy: "application/octet-stream",
+		xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+		docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+		epub: "application/epub+zip",
+		odt: "application/vnd.oasis.opendocument.text"
+	};
+	fileType = (path) => {
+		const dot = path.lastIndexOf(".");
+		if (dot < 0 || path.lastIndexOf("/") > dot) return null;
+		const ext = path.slice(dot + 1).toLowerCase();
+		return ext === "md" ? null : pictureType(path) ?? OTHER[ext] ?? "application/octet-stream";
+	};
+}));
+//#endregion
 //#region packages/core/src/kinds.ts
 function kindOf(type) {
 	const t = type.trim().toLowerCase();
@@ -518,11 +943,25 @@ function outwardLinks(body) {
 		}
 		seen.add(href);
 	}
+	for (const { href, embed, alt } of citeRefs(body)) {
+		if (!embed || seen.has(href)) continue;
+		const c = codeTarget(href);
+		if (!c || !pictureType(c.path)) continue;
+		out.push({
+			kind: "code",
+			href,
+			text: alt || c.path.split("/").at(-1),
+			path: c.path,
+			picture: true
+		});
+		seen.add(href);
+	}
 	return out;
 }
 var ABOUT, DONE, EMBED;
 var init_kinds = __esmMin((() => {
 	init_markdown();
+	init_picture();
 	init_text();
 	ABOUT = {
 		question: "about",
@@ -540,16 +979,24 @@ var init_kinds = __esmMin((() => {
 function comparePaths(a, b) {
 	return cmpTuple(a.split("/"), b.split("/"));
 }
-var AGENTS_FILE, ARTIFACT, IMAGE, citeKind, isEntry, Concept, Directory, SCHEME, LOG_DATE, Bundle, oneLine, escape;
+var AGENTS_FILE, KINDS$2, citeKind, isEntry, Concept, Directory, SCHEME, LOG_DATE, Bundle, oneLine, escape;
 var init_bundle = __esmMin((() => {
 	init_frontmatter();
 	init_markdown();
 	init_kinds();
 	init_text();
 	AGENTS_FILE = "AGENTS.md";
-	ARTIFACT = /\.html?$/i;
-	IMAGE = /\.(png|jpe?g|gif|svg|webp|avif)$/i;
-	citeKind = (path) => ARTIFACT.test(path) ? "artifact" : IMAGE.test(path) ? "image" : null;
+	KINDS$2 = [
+		["artifact", /\.html?$/i],
+		["image", /\.(png|jpe?g|gif|svg|webp|avif)$/i],
+		["data", /\.(csv|tsv|json|jsonl|ndjson|parquet|arrow|feather|npy|npz|xlsx|xls|h5|hdf5|nc)$/i],
+		["document", /\.(pdf|docx?|odt|rtf|epub|pptx?|odp|txt|tex)$/i]
+	];
+	citeKind = (path) => {
+		const name = basename$1(path);
+		if (/\.md$/i.test(name) || !/\.[^.]+$/.test(name.replace(/^\./, ""))) return null;
+		return KINDS$2.find(([, re]) => re.test(name))?.[0] ?? "misc";
+	};
 	isEntry = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
 	Concept = class {
 		id;
@@ -725,7 +1172,7 @@ var init_bundle = __esmMin((() => {
 				concept.links = links;
 				concept.outward = outwardLinks(concept.body);
 				for (const link of links) if (link.broken) this.issue(concept.path, "warning", "broken-link", `broken link to ${link.target}`);
-				for (const { href, title, embed } of citeRefs(concept.body)) {
+				for (const { href, title, embed, alt } of citeRefs(concept.body)) {
 					const path = this.filePath(concept, href), kind = path === null ? null : citeKind(path);
 					if (path === null || kind === null) continue;
 					const t = strip((title ?? "").toLowerCase());
@@ -735,10 +1182,11 @@ var init_bundle = __esmMin((() => {
 						embed,
 						broken: !this.files.has(path),
 						rel: rating(title),
-						align: t === "left" ? "left" : t === "center" || t === "centre" ? "center" : null
+						align: t === "left" ? "left" : t === "center" || t === "centre" ? "center" : null,
+						...embed && alt ? { alt } : {}
 					};
 					concept.cites.push(cite);
-					if (cite.broken) this.issue(concept.path, "warning", "broken-link", `broken link to ${path}`);
+					if (cite.broken) this.issue(concept.path, "warning", "broken-link", kind === "image" ? `picture not in the notes: ${path}` : `broken link to ${path}`);
 				}
 			}
 			const byName = /* @__PURE__ */ new Map();
@@ -1809,13 +2257,60 @@ function mapModel(base) {
 			s
 		]);
 	}
+	const holdsFiles = /* @__PURE__ */ new Set();
+	const parentOf = (p) => p.includes("/") ? p.slice(0, p.lastIndexOf("/")) : "";
+	for (const f of base.files) holdsFiles.add(parentOf(f));
+	const pictureFolder = (d) => {
+		const dd = base.directories.get(d);
+		const here = [...base.files].filter((f) => parentOf(f) === d);
+		return !!d && (!dd || !dd.concepts.length && !dd.children.length) && here.length > 0 && here.every((f) => citeKind(f) === "image");
+	};
+	const refOf = (f) => citeKind(f) === "image" && pictureFolder(parentOf(f)) ? parentOf(f) + "/" : f;
+	const fileEdges = /* @__PURE__ */ new Map();
+	for (const c of base.concepts.values()) for (const x of c.cites) {
+		if (x.broken || !base.files.has(x.target)) continue;
+		const ref = refOf(x.target);
+		if (!fileEdges.has(c.id)) fileEdges.set(c.id, /* @__PURE__ */ new Set());
+		fileEdges.get(c.id).add(ref);
+	}
+	const rankOf = /* @__PURE__ */ new Map();
+	for (const [from, refs] of fileEdges) for (const ref of refs) {
+		edges.push([
+			from,
+			ref,
+			STRENGTH.uses
+		]);
+		rankOf.set(ref, Math.max(rankOf.get(ref) ?? 0, order.get(from)?.depth ?? 0));
+	}
+	const filesIn = /* @__PURE__ */ new Map();
+	for (const f of [...base.files].sort()) {
+		const of = citeKind(f), ref = of ? refOf(f) : null;
+		if (!of || !ref) continue;
+		const at = ref.endsWith("/") ? parentOf(ref.slice(0, -1)) : parentOf(f);
+		const list = filesIn.get(at) ?? [];
+		if (!list.some((n) => n.ref === ref)) list.push({
+			kind: "concept",
+			id: "f:" + ref,
+			ref,
+			weight: 1,
+			rank: rankOf.get(ref) ?? 0,
+			of
+		});
+		filesIn.set(at, list);
+	}
 	const dir = (id) => {
 		const d = base.directories.get(id);
-		return {
+		if (id && pictureFolder(id)) return null;
+		const children = [
+			...[...d.children].sort().map(dir).filter((c) => c !== null),
+			...[...d.concepts].sort().map(note),
+			...filesIn.get(id) ?? []
+		];
+		return id && !children.length && (holdsFiles.has(id) || d.children.length) ? null : {
 			kind: "dir",
 			id: "d:" + id,
 			ref: id,
-			children: [...[...d.children].sort().map(dir), ...[...d.concepts].sort().map(note)]
+			children
 		};
 	};
 	return {
@@ -1824,12 +2319,14 @@ function mapModel(base) {
 	};
 }
 var init_map = __esmMin((() => {
+	init_bundle();
 	init_graph();
 }));
 //#endregion
 //#region packages/core/src/index.ts
 var init_src$1 = __esmMin((() => {
 	init_bundle();
+	init_picture();
 	init_frontmatter();
 	init_source();
 	init_markdown();
@@ -1847,6 +2344,7 @@ var init_src$1 = __esmMin((() => {
 }));
 //#endregion
 //#region packages/core/src/node.ts
+init_src$2();
 init_src$1();
 init_bundle();
 init_text();
@@ -1884,8 +2382,9 @@ function loadBundle(root) {
 }
 //#endregion
 //#region packages/engine/src/api.ts
-var EngineError, Conflict;
+var MAX_FILE_BYTES, EngineError, Conflict;
 var init_api = __esmMin((() => {
+	MAX_FILE_BYTES = 2e7;
 	EngineError = class extends Error {
 		status;
 		constructor(message, status = 400) {
@@ -2032,7 +2531,8 @@ async function completeOnce(http, p, key, call, heard) {
 		...call.tools?.length ? {
 			tools: call.tools,
 			tool_choice: call.toolChoice ?? "auto"
-		} : {}
+		} : {},
+		...call.effort && p.name === OPENROUTER.name ? { reasoning: { effort: call.effort } } : {}
 	});
 	let res;
 	try {
@@ -2290,13 +2790,14 @@ async function rounds(o) {
 	let firstIn = 0;
 	for (let round = 0, calls = 1;; round++, calls++) {
 		let first = true;
-		const ask = (maxTokens) => complete(o.http, o.provider, o.key, {
+		const ask = (maxTokens, effort) => complete(o.http, o.provider, o.key, {
 			model,
 			messages,
 			maxTokens,
 			tools: most ? o.lookup.defs() : [],
 			toolChoice: round < most ? "auto" : "none",
 			signal: o.signal,
+			...effort ? { effort } : {},
 			onText: (piece) => {
 				o.onText(piece, first && round > 0);
 				first = false;
@@ -2313,10 +2814,14 @@ async function rounds(o) {
 		add(r);
 		if (round === 0) firstIn = r.usage.tokensIn;
 		if (empty(r)) {
-			r = await ask(o.maxTokens * 3);
+			r = await ask(o.maxTokens * 3, "low");
 			add(r);
 			if (empty(r)) throw new ModelError(`${model} used its whole output budget (${Math.max(o.maxTokens * 3, o.provider.maxTokens ?? 0)} tokens) thinking, and wrote nothing. Try a lower tier, or raise max_tokens under [provider] in config.toml.`, 502, { kind: "cut" });
 		}
+		if (!r.text.trim() && !r.calls.length && !r.cut) {
+			r = await ask(o.maxTokens);
+			add(r);
+		}
 		if (!r.calls.length || round >= most) return {
 			text: r.text,
 			usage,
@@ -2699,6 +3204,9 @@ something at one place in the note they have open.`;
   is drawn as the diagram. Draw one where a picture of how things stand to
   each other helps, or when asked; not by habit. Maths in a label goes
   between $$ and $$.
+- A picture is shown as ![what it shows](its/path.png). You can't see it: what
+  you know of it is the words in the brackets. Keep a picture's line as it is
+  when you rewrite around it, and never make up a picture's path.
 - Ordinary Markdown otherwise. No HTML.`;
 	FORMAT_RULES = FORMAT;
 	LOOKUP = (rounds, meaning) => `# Looking things up
@@ -2807,7 +3315,7 @@ var init_lookup = __esmMin((() => {
 			...str$1,
 			description: "The note's id or path: basics/entropy or /basics/entropy.md."
 		} }, ["id"]),
-		fn$1("read_note", "Read one section of a note, by its heading, or the whole note when no section is named. Prefer a section.", {
+		fn$1("read_note", "Read one section of a note, by its heading, or the whole note when no section is named. Prefer a section. A picture in it is ![what it shows](path): you have its words, not the picture.", {
 			id: str$1,
 			section: {
 				...str$1,
@@ -3229,11 +3737,12 @@ function turnMessages(a) {
 		PRACTICE,
 		LEARNING,
 		MODE_RULES[a.mode],
+		...a.mode === "write" ? [ARTIFACTS] : [],
 		ASKING(a.mode === "write"),
 		...checking ? [CHECKING] : [],
 		...understood.length ? [UNDERSTANDING] : [],
 		FORMAT_RULES,
-		LOOKING(ROUNDS[a.tier], a.meaning, a.lookup)
+		LOOKING(a.mode === "write" ? Math.max(ROUNDS[a.tier], 6) : ROUNDS[a.tier], a.meaning, a.lookup)
 	].join("\n\n");
 	const briefed = a.briefings?.length ? `# Earlier in this conversation, summed up\n\n${a.briefings.join("\n\n---\n\n")}` : "";
 	const talk = a.earlier.map((t) => turnExchange(t).text).join("\n\n---\n\n");
@@ -3312,7 +3821,7 @@ function turnMessages(a) {
 		]
 	};
 }
-var MODES, ITEMS, CONVERSATIONS_DIR, conversationPath, WHO, ISORITE, PRACTICE, LEARNING, ASK, WRITE, UNDERSTANDING, ASKING, CHECKING, MODE_RULES, LOOKING, COMPACT$1, str, fn, POINT_TO_NOTE, EDIT_NOTE$1, WRITE_NOTE$1, MOVE_NOTE, DELETE_NOTE, WRITE_UNDERSTANDING, ASK_QUESTION, OFFER_TEXT, MODE_TOOLS;
+var MODES, ITEMS, CONVERSATIONS_DIR, conversationPath, WHO, ISORITE, PRACTICE, LEARNING, ASK, WRITE, UNDERSTANDING, ARTIFACTS, ASKING, CHECKING, MODE_RULES, LOOKING, COMPACT$1, str, fn, POINT_TO_NOTE, EDIT_NOTE$1, WRITE_NOTE$1, MOVE_NOTE, DELETE_NOTE, WRITE_UNDERSTANDING, ASK_QUESTION, READ_DATA, ARTIFACT_RECIPE, WRITE_ARTIFACT, READ_ARTIFACT, OFFER_TEXT, MODE_TOOLS;
 var init_turn = __esmMin((() => {
 	init_iso();
 	init_loop();
@@ -3350,6 +3859,11 @@ what you change is shown to them there as you do it.`;
   problem note is practice that \`uses\` notes. Theirs alone to mark:
   \`resolved\` or \`solved\`, with the day. \`[[!name]]\` alone on a line
   embeds one in a note.
+- A problem of several steps is several problem notes, each linked to the one
+  before it as "requires", in a folder of their own when they belong
+  together. A problem has no steps inside it.
+- Files beside the notes that are not notes (data, documents, pictures,
+  artifacts) are linked as any note is: [runs](/simulation/runs.csv).
 - Every change you make is marked as yours, in the note's history, and they
   can undo it.
 
@@ -3435,6 +3949,22 @@ far, from its Understanding note.
   linked: what they wrote in a note, a question of theirs open or resolved,
   a problem solved or not. Say nothing the evidence does not show.
 - Never invent a note, a link or a quotation.`;
+	ARTIFACTS = `# Artifacts
+
+An artifact is an HTML page beside their notes that isorite shows working: a
+dashboard of their data, a comparison, a simulation, an explorable
+explanation, a 3D model's viewer. Make one when they ask for something to see
+or try; not for what an answer or a note says as well.
+
+1. artifact_recipe with the recipe nearest what they asked: dashboard,
+   compare, simulation, explorable or viewer. It gives a complete working
+   artifact and the kit's reference. Start from the recipe and change what it
+   marks; keep the rest.
+2. read_data for every data file it will read. Use the columns as given.
+3. write_artifact with the whole file. It is checked and run. If it reports a
+   problem, fix that and write the whole file again.
+4. Say in a sentence what it shows, linked: [what it shows](/folder/name.html).
+   Link it from the note it belongs to if they want it there.`;
 	ASKING = (write) => `# Asking back, and their own answers
 
 - Where a question to them would do more than an answer (what is unclear in
@@ -3582,6 +4112,50 @@ was not said.`;
 		"text",
 		"about"
 	]);
+	READ_DATA = fn("read_data", "A data file's shape: its columns with their types and ranges, the row count and the first rows. Read it before writing anything that uses the file, so the column names are real.", { path: {
+		...str,
+		description: "The file's path in the base: folder/name.csv."
+	} }, ["path"]);
+	ARTIFACT_RECIPE = fn("artifact_recipe", "A recipe for an artifact: a complete working one to start from, the kit's reference, and the rules write_artifact checks. dashboard: numbers, charts and a table of one data file. compare: two data files side by side. simulation: a model with parameters and play. explorable: inputs, derived numbers and linked views. viewer: a 3D model.", { name: {
+		type: "string",
+		enum: [
+			"dashboard",
+			"compare",
+			"simulation",
+			"explorable",
+			"viewer"
+		]
+	} }, ["name"]);
+	WRITE_ARTIFACT = fn("write_artifact", "Write an artifact: a whole HTML file on the kit. The title, description and uses given here are written into it. It is checked, and run where it can be; the result says what to fix. Nothing is written while a rule is broken.", {
+		path: {
+			...str,
+			description: "Where: folder/name.html, beside the notes it belongs to."
+		},
+		title: str,
+		description: {
+			...str,
+			description: "One sentence: what it shows, and what can be done with it."
+		},
+		uses: {
+			type: "array",
+			items: str,
+			description: "The data or model files it reads, relative to it (runs.csv). Those its markup and script name are added."
+		},
+		html: {
+			...str,
+			description: "The whole file."
+		}
+	}, [
+		"path",
+		"title",
+		"description",
+		"uses",
+		"html"
+	]);
+	READ_ARTIFACT = fn("read_artifact", "An artifact's whole file, to change it and write it again.", { path: {
+		...str,
+		description: "folder/name.html"
+	} }, ["path"]);
 	OFFER_TEXT = fn("offer_text", "Offer them their own answers, lightly joined, to insert at the end of a note as their writing. Only their words.", {
 		id: {
 			...str,
@@ -3596,7 +4170,8 @@ was not said.`;
 		ask: [
 			POINT_TO_NOTE,
 			ASK_QUESTION,
-			OFFER_TEXT
+			OFFER_TEXT,
+			READ_DATA
 		],
 		write: [
 			EDIT_NOTE$1,
@@ -3605,7 +4180,11 @@ was not said.`;
 			DELETE_NOTE,
 			POINT_TO_NOTE,
 			ASK_QUESTION,
-			OFFER_TEXT
+			OFFER_TEXT,
+			READ_DATA,
+			ARTIFACT_RECIPE,
+			WRITE_ARTIFACT,
+			READ_ARTIFACT
 		]
 	};
 }));
@@ -3810,6 +4389,11 @@ function checkNoteId(id) {
 	if (!id || id.length > 400 || parts.some((p) => !p || BAD_PART.test(p))) throw new EngineError(`not a note's id: ${JSON.stringify(id)}`);
 	return id;
 }
+/** A file's path in the base as Iso gives one: no leading slash, no "..", nothing hidden. */
+function filePathOf(raw) {
+	const p = String(raw ?? "").trim().replace(/^\/+/, "");
+	return p && !p.split("/").some((x) => !x || x === "." || x === ".." || x.startsWith(".")) ? p : null;
+}
 async function walk(files, root) {
 	const out = [];
 	const at = (path) => root && path ? `${root}/${path}` : root || path;
@@ -3847,7 +4431,7 @@ function keepDone(before, next) {
 		return next;
 	}
 }
-var SIGN_IN_MS, fromBase, REPLY_TOKENS, NOTE_TOKENS, DRAFT_PREFIX, DRAFT_DIR, isDraftId, bare, inBase, BAD_PART, TURN_ID, escapeRe, MAX_SENT, BRIEF, NOTE_ARG, MARKED, EDIT_NOTE, WRITE_NOTE, Engine;
+var SIGN_IN_MS, fromBase, REPLY_TOKENS, NOTE_TOKENS, ARTIFACT_TOKENS, DRAFT_PREFIX, DRAFT_DIR, isDraftId, bare, inBase, BAD_PART, TURN_ID, escapeRe, MAX_SENT, BRIEF, NOTE_ARG, MARKED, EDIT_NOTE, WRITE_NOTE, Engine;
 var init_engine = __esmMin((() => {
 	init_src$1();
 	init_api();
@@ -3863,6 +4447,7 @@ var init_engine = __esmMin((() => {
 	fromBase = (base, text) => `(From the base ${base}: name its notes ${base}:<id>, or give base "${base}".)\n${text}`;
 	REPLY_TOKENS = 2500;
 	NOTE_TOKENS = 6e3;
+	ARTIFACT_TOKENS = 32e3;
 	DRAFT_PREFIX = "@draft/";
 	DRAFT_DIR = "drafts";
 	isDraftId = (id) => id.startsWith(DRAFT_PREFIX);
@@ -4030,23 +4615,91 @@ var init_engine = __esmMin((() => {
 			const notes = {}, broken = await this.brokenCode();
 			for (const c of this.bundle.concepts.values()) {
 				const bad = broken.get(c.id) ?? [];
-				const links = c.outward.map((o) => ({
+				const links = c.outward.filter((o) => !(o.kind === "code" && o.picture)).map((o) => ({
 					kind: o.kind,
 					href: o.href,
 					text: o.text,
 					...bad.includes(o.href) ? { broken: true } : {}
 				}));
+				const pictures = [], shown = /* @__PURE__ */ new Set();
+				for (const p of c.cites) {
+					if (p.kind !== "image" || !p.embed || shown.has(p.target)) continue;
+					shown.add(p.target);
+					pictures.push({
+						href: p.target,
+						path: p.target,
+						from: "notes",
+						text: p.alt || p.target.split("/").at(-1),
+						...p.broken ? { broken: true } : {}
+					});
+				}
+				for (const o of c.outward) {
+					if (o.kind !== "code" || !o.picture) continue;
+					pictures.push({
+						href: o.href,
+						path: o.path,
+						from: "code",
+						text: o.text,
+						...bad.includes(o.href) ? { broken: true } : {}
+					});
+				}
 				notes[c.id] = {
 					title: c.title,
 					tokens: estimate(c.body.trim()),
 					...c.kind !== "note" ? { kind: c.kind } : {},
 					...c.done ? { done: c.done } : {},
-					...links.length ? { links } : {}
+					...links.length ? { links } : {},
+					...pictures.length ? { pictures } : {}
 				};
 			}
+			const model = mapModel(this.bundle), files = {};
+			const items = [];
+			const walk = (d) => {
+				for (const c of d.children) if (c.kind === "dir") walk(c);
+				else if (c.id.startsWith("f:")) items.push(c.ref);
+			};
+			walk(model.root);
+			const all = new Set(items);
+			for (const ref of items) {
+				if (ref.endsWith("/")) {
+					const count = [...this.bundle.files].filter((f) => f.startsWith(ref) && !f.slice(ref.length).includes("/")).length;
+					files[ref] = {
+						title: `${ref.slice(0, -1).split("/").at(-1)} · ${count} ${count === 1 ? "picture" : "pictures"}`,
+						kind: "image",
+						count
+					};
+					continue;
+				}
+				const kind = citeKind(ref), name = ref.split("/").at(-1);
+				if (kind !== "artifact") {
+					files[ref] = {
+						title: name,
+						kind
+					};
+					continue;
+				}
+				const html = await this.opts.notes.read(ref).catch(() => null), m = html ? manifestOf(html) : null;
+				files[ref] = {
+					title: m?.title || name,
+					kind
+				};
+				const dir = ref.split("/").slice(0, -1);
+				for (const u of m?.uses ?? []) {
+					const parts = [...dir];
+					for (const p of u.split("/")) if (p === "..") parts.pop();
+					else if (p && p !== ".") parts.push(p);
+					const to = parts.join("/");
+					if (all.has(to) && !model.edges.some(([a, b]) => a === ref && b === to)) model.edges.push([
+						ref,
+						to,
+						STRENGTH.uses
+					]);
+				}
+			}
 			return {
-				model: mapModel(this.bundle),
-				notes
+				model,
+				notes,
+				...items.length ? { files } : {}
 			};
 		}
 		/** The base's settings, from `.isorite/settings.toml`. */
@@ -4400,7 +5053,7 @@ var init_engine = __esmMin((() => {
 		}
 		async deleteNote(id, base, who = "you") {
 			if (!inBase(id)) throw new EngineError("only a note of the base is deleted here");
-			const notes = this.opts.notes, path = `${checkNoteId(id)}.md`;
+			const { files: notes, path } = this.where(id);
 			await this.one(async () => {
 				const now = await notes.read(path);
 				if (now === null) throw new Conflict(`${id} is gone`, null);
@@ -4438,8 +5091,113 @@ var init_engine = __esmMin((() => {
 			this.queue = run.catch(() => void 0);
 			return run;
 		}
+		/** A file in the notes that isn't a note (M23: any kind; M22 gave pictures only), or a picture in the base's
+		*  repository. Within its folder, and (in the notes) never in a hidden folder such as `.isorite/`. */
+		async file(path, from = "notes") {
+			const type = from === "code" ? pictureType(path) : fileType(path);
+			if (!type) return null;
+			let files, at;
+			if (from === "code") {
+				const target = codeTarget(`code:${path}`), where = (await this.settingsOfBase()).repository;
+				files = target && where ? this.opts.repository?.(where) ?? null : null;
+				at = target?.path ?? "";
+			} else {
+				at = path.replace(/^\/+/, "");
+				files = at.split("/").some((p) => !p || p === "." || p === ".." || p.startsWith(".")) ? null : this.opts.notes;
+			}
+			const bytes = files ? await files.readBytes(at) : null;
+			if (!bytes) return null;
+			if (bytes.length > 2e7) throw new EngineError(`${path} is larger than isorite gives (${MAX_FILE_BYTES / 1e6} MB)`, 413);
+			return {
+				bytes,
+				type,
+				version: sha256(bytes).slice(0, 16)
+			};
+		}
+		/** What was read of each picture, kept while its size and time are the same. */
+		pictureCache = /* @__PURE__ */ new Map();
+		/** Every picture in the notes (M22), found afresh: one put in the folder by hand since the base was opened is
+		*  among them, and from then on in the bundle too, so a link to it isn't broken. A hidden folder is never looked in. */
+		async pictures() {
+			const found = [];
+			const visit = async (dir) => {
+				for (const f of await this.opts.notes.list(dir)) {
+					if (f.name.startsWith(".")) continue;
+					const path = dir ? `${dir}/${f.name}` : f.name;
+					if (f.dir) await visit(path);
+					else if (pictureType(f.name)) found.push({
+						path,
+						...f.size === void 0 ? {} : { size: f.size },
+						...f.mtime === void 0 ? {} : { mtime: f.mtime }
+					});
+				}
+			};
+			await visit("");
+			const out = [], seen = /* @__PURE__ */ new Set();
+			for (const f of found) {
+				seen.add(f.path);
+				const kept = this.pictureCache.get(f.path);
+				if (kept && f.size !== void 0 && kept.size === f.size && kept.mtime === f.mtime) {
+					out.push(kept.info);
+					continue;
+				}
+				const bytes = f.size !== void 0 && f.size > 2e7 ? null : await this.opts.notes.readBytes(f.path);
+				if (!bytes) continue;
+				const px = pictureSize(bytes, pictureType(f.path));
+				const info = {
+					path: f.path,
+					bytes: bytes.length,
+					width: px?.width ?? null,
+					height: px?.height ?? null,
+					sha256: sha256(bytes)
+				};
+				this.pictureCache.set(f.path, {
+					...f.size === void 0 ? {} : { size: f.size },
+					...f.mtime === void 0 ? {} : { mtime: f.mtime },
+					info
+				});
+				out.push(info);
+			}
+			for (const path of this.pictureCache.keys()) if (!seen.has(path)) this.pictureCache.delete(path);
+			let changed = false;
+			for (const path of seen) if (!this.files.has(path)) {
+				this.files.set(path, { path });
+				changed = true;
+			}
+			for (const path of [...this.files.keys()]) if (pictureType(path) && !seen.has(path)) {
+				this.files.delete(path);
+				changed = true;
+			}
+			if (changed) this.built = this.index = null;
+			return out.sort((a, b) => a.path < b.path ? -1 : a.path > b.path ? 1 : 0);
+		}
+		/** Put a picture in the notes (M22). The path must be a picture's, out of any hidden folder, and free: a file
+		*  that's there is never replaced. Not journaled: a picture has no history, and stays when its link goes. */
+		savePicture(path, bytes) {
+			return this.one(async () => {
+				const type = pictureType(path), parts = path.split("/");
+				if (!type || parts.some((p) => !p || p === "." || p === ".." || p.startsWith(".")) || /[\\\x00-\x1f]/.test(path)) throw new EngineError(`not a picture's path: ${path}`, 400);
+				if (bytes.length > 2e7) throw new EngineError(`the picture is larger than isorite takes (${MAX_FILE_BYTES / 1e6} MB)`, 413);
+				if (await this.opts.notes.readBytes(path) !== null) throw new Conflict(`${path} is there already`, null);
+				await this.opts.notes.writeBytes(path, bytes);
+				this.files.set(path, { path });
+				this.built = this.index = null;
+				const px = pictureSize(bytes, type);
+				return {
+					path,
+					bytes: bytes.length,
+					width: px?.width ?? null,
+					height: px?.height ?? null,
+					sha256: sha256(bytes)
+				};
+			});
+		}
 		/** Where a note's file is: drafts and Understanding notes are among isorite's own files. */
 		where(id) {
+			if (inBase(id) && citeKind(id) === "artifact") return {
+				files: this.opts.notes,
+				path: checkNoteId(id)
+			};
 			if (!inBase(id)) return {
 				files: this.opts.own,
 				path: `${isDraftId(id) ? DRAFT_DIR : UNDERSTANDING_DIR}/${checkNoteId(bare(id))}.md`
@@ -5802,9 +6560,9 @@ var init_engine = __esmMin((() => {
 						tier: req.tier,
 						messages,
 						lookup: tools,
-						maxTokens: REPLY_TOKENS * 2,
 						signal: abort.signal,
-						most: ROUNDS[req.tier],
+						maxTokens: mode === "write" ? ARTIFACT_TOKENS : REPLY_TOKENS * 2,
+						most: mode === "write" ? Math.max(ROUNDS[req.tier], 6) : ROUNDS[req.tier],
 						onText: (delta, again) => this.publish({
 							type: "iso-text",
 							request: turn,
@@ -6115,8 +6873,101 @@ var init_engine = __esmMin((() => {
 				});
 				return `Your reading of ${title(id)} is written.`;
 			}
+			if (name === "read_data") {
+				const path = filePathOf(args.path);
+				if (!path) return `${String(args.path ?? "")} is not a file's path in their base.`;
+				const got = await this.file(path).catch(() => null);
+				if (!got) return `There is no file ${path}.${this.nearFiles(path)}`;
+				try {
+					return describeShape(shapeOf(path, parseData(path, new TextDecoder().decode(got.bytes))));
+				} catch (e) {
+					return `${path} could not be read as data: ${e.message}`;
+				}
+			}
+			if (name === "artifact_recipe") {
+				const r = RECIPES[String(args.name ?? "")];
+				if (!r) return `There's no recipe ${String(args.name ?? "")}: there are ${Object.keys(RECIPES).join(", ")}.`;
+				return `${REFERENCE}\n\n# The recipe: ${String(args.name)}\n\n${r.about}. A complete working artifact; change what it marks, keep the rest.\n\n\`\`\`html\n${r.html}\`\`\``;
+			}
+			if (name === "read_artifact") {
+				const path = filePathOf(args.path);
+				if (!path || citeKind(path) !== "artifact") return `${String(args.path ?? "")} is not an artifact's path (folder/name.html).`;
+				const got = await this.opts.notes.read(path);
+				return got === null ? `There is no artifact ${path}.` : got;
+			}
+			if (name === "write_artifact") return this.writeArtifact(args, t);
 			return `${name} cannot be used yet.`;
 		}
+		/** Files in the same folder as a path, to say which there are when one isn't. */
+		nearFiles(path) {
+			const dir = path.split("/").slice(0, -1).join("/"), there = [...this.files.keys()].filter((f) => !f.endsWith(".md") && f.split("/").slice(0, -1).join("/") === dir);
+			return there.length ? ` In ${dir || "the top folder"} there are: ${there.map((f) => f.split("/").at(-1)).join(", ")}.` : "";
+		}
+		/** write_artifact (M23, plan-m23 §3.5, §3.7): the manifest written as given, the rules checked before anything is
+		*  written, then written and journalled as a note is, and run where it can be, with all it reports said back. */
+		async writeArtifact(args, t) {
+			const path = filePathOf(args.path);
+			if (!path || citeKind(path) !== "artifact" || !inBase(path)) return `${String(args.path ?? "")} is not an artifact's path: give folder/name.html.`;
+			const raw = String(args.html ?? "");
+			if (!raw.trim()) return "Give the whole file, in html.";
+			const given = (Array.isArray(args.uses) ? args.uses : typeof args.uses === "string" ? args.uses.split(/[\s,]+/) : []).map((u) => String(u));
+			const uses = [...new Set([
+				...given,
+				...manifestOf(raw).uses,
+				...readsOf(raw)
+			].map((u) => u.trim().replace(/^\.\//, "")).filter(Boolean))];
+			const title = String(args.title ?? "").trim() || manifestOf(raw).title || path.split("/").at(-1).replace(/\.html?$/, "").replace(/-/g, " ");
+			const html = withManifest(raw, {
+				title,
+				description: String(args.description ?? "").trim() || manifestOf(raw).description,
+				author: "Iso",
+				date: new Date(this.opts.clock.now()).toISOString().slice(0, 10),
+				kit: "1",
+				uses
+			});
+			const dir = path.split("/").slice(0, -1);
+			const at = (rel) => {
+				const parts = [...dir];
+				for (const p of rel.split("/")) if (p === "..") parts.pop();
+				else if (p && p !== ".") parts.push(p);
+				return parts.join("/");
+			};
+			const files = [], columns = {};
+			for (const u of uses) {
+				const got = await this.file(at(u)).catch(() => null);
+				if (!got) continue;
+				files.push(u);
+				if (citeKind(u) === "data") try {
+					columns[u] = columnsOf(parseData(u, new TextDecoder().decode(got.bytes)));
+				} catch {}
+			}
+			const broken = checkArtifact(html, {
+				files,
+				columns
+			}), errors = broken.filter((b) => b.level === "error");
+			const list = (bs) => bs.map((b) => `- ${b.message}`).join("\n");
+			if (errors.length) return `Not written: ${errors.length === 1 ? "a rule is" : "rules are"} broken.\n${list(errors)}\nFix ${errors.length === 1 ? "it" : "them"} and call write_artifact again with the whole file.`;
+			const was = await this.opts.notes.read(path);
+			const saved = await this.one(() => this.put(path, html, was === null ? null : hashText(was), "edit", { asked: t.asked }, t.who));
+			if (saved.entry) await t.item({
+				kind: "change",
+				note: path,
+				entry: saved.entry,
+				why: was === null ? "create" : "edit",
+				title,
+				added: html.split("\n").length,
+				removed: was?.split("\n").length ?? 0
+			});
+			const warnings = broken.filter((b) => b.level === "warning");
+			const run = await this.opts.renderArtifact?.(path, html).catch(() => null) ?? null;
+			const problems = [
+				...run && !run.rendered ? ["it didn't start: the kit never said it was ready"] : [],
+				...(run?.errors ?? []).map((e) => `it reported: ${e}`),
+				...run && run.rendered && run.drawn === 0 ? ["it drew nothing: no chart, canvas or 3D view has anything in it"] : [],
+				...warnings.map((w) => w.message)
+			];
+			return `${was === null ? "Written" : "Written anew"}: ${path}. ${run ? "It was run, with every control touched" : "It couldn't be run here (no browser), so only its rules were checked"}${problems.length ? `, and:\n${problems.map((p) => `- ${p}`).join("\n")}\nFix these and call write_artifact again with the whole file.` : run ? ", with no error." : "."}`;
+		}
 		/** A note's Understanding note (M10): Iso's reading and your scratchpad. */
 		async understanding(note) {
 			if (!inBase(checkNoteId(note))) throw new EngineError("only a note of the base has an Understanding note");
@@ -6491,6 +7342,8 @@ var init_ports = __esmMin((() => {
 	systemClock = { now: () => Date.now() };
 	MemoryFiles = class {
 		files = /* @__PURE__ */ new Map();
+		/** Files held as bytes (pictures), apart from text. */
+		bytes = /* @__PURE__ */ new Map();
 		constructor(files = {}) {
 			for (const [path, text] of Object.entries(files)) this.files.set(path, text);
 		}
@@ -6503,22 +7356,42 @@ var init_ports = __esmMin((() => {
 		async append(path, text) {
 			this.files.set(path, (this.files.get(path) ?? "") + text);
 		}
+		async readBytes(path) {
+			const b = this.bytes.get(path), t = this.files.get(path);
+			return b ?? (t === void 0 ? null : new TextEncoder().encode(t));
+		}
+		async writeBytes(path, bytes) {
+			this.files.delete(path);
+			this.bytes.set(path, bytes);
+		}
 		async remove(path) {
 			this.files.delete(path);
+			this.bytes.delete(path);
 		}
 		async list(dir) {
 			const prefix = dir ? dir + "/" : "";
 			const found = /* @__PURE__ */ new Map();
-			for (const path of this.files.keys()) {
+			for (const path of [...this.files.keys(), ...this.bytes.keys()]) {
 				if (!path.startsWith(prefix)) continue;
 				const rest = path.slice(prefix.length), cut = rest.indexOf("/");
-				if (cut < 0) found.set(rest, false);
-				else found.set(rest.slice(0, cut), true);
+				if (cut >= 0) {
+					found.set(rest.slice(0, cut), {
+						name: rest.slice(0, cut),
+						dir: true
+					});
+					continue;
+				}
+				const b = this.bytes.get(path);
+				found.set(rest, b ? {
+					name: rest,
+					dir: false,
+					size: b.length
+				} : {
+					name: rest,
+					dir: false
+				});
 			}
-			return [...found].map(([name, isDir]) => ({
-				name,
-				dir: isDir
-			}));
+			return [...found.values()];
 		}
 	};
 	MemorySecrets = class {
@@ -7978,6 +8851,7 @@ var Terminal = class {
 };
 //#endregion
 //#region packages/server/src/http.ts
+init_src$1();
 init_src();
 const LOOPBACK = /* @__PURE__ */ new Set([
 	"localhost",
@@ -7999,6 +8873,8 @@ const TYPES = {
 	".map": "application/json",
 	".txt": "text/plain; charset=utf-8"
 };
+/** What a picture may do when opened on its own: be drawn, and nothing else (no script, no fetch, no form). */
+const PICTURE_CSP = "sandbox; default-src 'none'; img-src data:; style-src 'unsafe-inline'";
 const Edit = z.object({
 	base: z.string().max(64),
 	text: z.string()
@@ -8221,6 +9097,42 @@ function createApp({ api, token, loopback, web, allowHosts = [], notes, terminal
 	app.get("/api/map", (c) => answer(c, () => api.map()));
 	app.get("/api/timeline", (c) => answer(c, () => api.timeline()));
 	app.get("/api/search", (c) => answer(c, () => api.search(c.req.query("q") ?? "")));
+	app.get("/api/pictures", (c) => answer(c, () => api.pictures()));
+	app.post("/api/file", async (c) => {
+		let origin = "";
+		try {
+			origin = new URL(c.req.header("origin") ?? "").host;
+		} catch {}
+		if (!c.req.header("origin") || origin !== c.req.header("host")) return refuse(c, 403, "cross-origin request refused");
+		if (c.req.header("x-isorite-token") !== token) return refuse(c, 403, "bad token");
+		const path = c.req.query("path") ?? "", type = pictureType(path);
+		if (!type || (c.req.header("content-type") ?? "").split(";")[0].trim().toLowerCase() !== type) return refuse(c, 415, "a picture, of the type its name says");
+		if (Number(c.req.header("content-length") ?? 0) > 2e7) return refuse(c, 413, "picture too large");
+		const bytes = new Uint8Array(await c.req.arrayBuffer());
+		if (bytes.length > 2e7) return refuse(c, 413, "picture too large");
+		return answer(c, () => api.savePicture(path, bytes));
+	});
+	app.get("/api/file", async (c) => {
+		const code = c.req.query("code"), path = code ?? c.req.query("path") ?? "";
+		let found;
+		try {
+			found = await api.file(path, code === void 0 ? "notes" : "code");
+		} catch (e) {
+			if (e instanceof EngineError) return refuse(c, e.status, e.message);
+			throw e;
+		}
+		if (!found) return refuse(c, 404, `no file at ${path}`);
+		const etag = `"${found.version}"`;
+		const headers = {
+			"Content-Type": found.type,
+			"Cache-Control": "no-cache",
+			ETag: etag,
+			"X-Content-Type-Options": "nosniff",
+			"Content-Security-Policy": PICTURE_CSP
+		};
+		if (c.req.header("if-none-match") === etag) return c.body(null, 304, headers);
+		return c.body(found.bytes, 200, headers);
+	});
 	app.put("/api/note", async (c) => {
 		const refused = writeRefused(c);
 		if (refused) return refused;
@@ -8555,12 +9467,26 @@ var NodeFiles = class {
 			throw e;
 		}
 	}
-	/** Written beside the file and renamed over it, so a reader never sees half a note. */
+	async readBytes(path) {
+		try {
+			return new Uint8Array(await readFile(this.at(path)));
+		} catch (e) {
+			if (gone(e)) return null;
+			throw e;
+		}
+	}
 	async write(path, text) {
+		await this.replace(path, text);
+	}
+	async writeBytes(path, bytes) {
+		await this.replace(path, bytes);
+	}
+	/** Written beside the file and renamed over it, so a reader never sees half a note. */
+	async replace(path, data) {
 		const full = this.at(path), beside = `${full}.${process.pid}.${this.n++}.tmp`;
 		await mkdir(dirname(full), { recursive: true });
 		try {
-			await writeFile(beside, text, "utf8");
+			await writeFile(beside, data, typeof data === "string" ? "utf8" : void 0);
 			await rename(beside, full);
 		} catch (e) {
 			await rm(beside, { force: true });
@@ -8574,10 +9500,27 @@ var NodeFiles = class {
 	}
 	async list(dir) {
 		try {
-			return (await readdir(this.at(dir), { withFileTypes: true })).filter((e) => e.isDirectory() || e.isFile()).map((e) => ({
-				name: e.name,
-				dir: e.isDirectory()
-			})).sort((a, b) => a.name < b.name ? -1 : 1);
+			const at = this.at(dir), entries = await readdir(at, { withFileTypes: true });
+			return (await Promise.all(entries.filter((e) => e.isDirectory() || e.isFile()).map(async (e) => {
+				if (e.isDirectory()) return {
+					name: e.name,
+					dir: true
+				};
+				if (e.name.endsWith(".md")) return {
+					name: e.name,
+					dir: false
+				};
+				const s = await stat(resolve(at, e.name)).catch(() => null);
+				return s ? {
+					name: e.name,
+					dir: false,
+					size: s.size,
+					mtime: s.mtimeMs
+				} : {
+					name: e.name,
+					dir: false
+				};
+			}))).sort((a, b) => a.name < b.name ? -1 : 1);
 		} catch (e) {
 			if (gone(e)) return [];
 			throw e;
@@ -8836,7 +9779,7 @@ var Setup = class {
 };
 //#endregion
 //#region packages/server/src/version.ts
-const VERSION = "0.9.1";
+const VERSION = "0.11.0";
 //#endregion
 //#region packages/server/src/git.ts
 /** The top of the repository `folder` is in, or null: the nearest folder holding `.git`, a directory or, in a
@@ -8890,9 +9833,155 @@ function openStudyBase(path) {
 	};
 }
 //#endregion
+//#region packages/server/src/render.ts
+/** A Chromium on this machine: ISORITE_BROWSER, Playwright's own, or a browser installed in the usual places. */
+function findBrowser(env = process.env) {
+	if (env.ISORITE_BROWSER && existsSync(env.ISORITE_BROWSER)) return env.ISORITE_BROWSER;
+	const cache = env.PLAYWRIGHT_BROWSERS_PATH ?? (process.platform === "darwin" ? join(homedir(), "Library", "Caches", "ms-playwright") : process.platform === "win32" ? join(env.LOCALAPPDATA ?? "", "ms-playwright") : join(homedir(), ".cache", "ms-playwright"));
+	const found = [];
+	try {
+		for (const d of readdirSync(cache).filter((d) => /^chromium(_headless_shell)?-\d+$/.test(d)).sort().reverse()) for (const p of [
+			"chrome-linux/headless_shell",
+			"chrome-headless-shell-linux64/chrome-headless-shell",
+			"chrome-linux/chrome",
+			"chrome-linux64/chrome",
+			"chrome-mac/headless_shell",
+			"chrome-headless-shell-mac-arm64/chrome-headless-shell",
+			"chrome-mac/Chromium.app/Contents/MacOS/Chromium",
+			"chrome-win/headless_shell.exe",
+			"chrome-headless-shell-win64/chrome-headless-shell.exe",
+			"chrome-win/chrome.exe"
+		]) found.push(join(cache, d, p));
+	} catch {}
+	found.push("/usr/bin/chromium", "/usr/bin/chromium-browser", "/usr/bin/google-chrome", "/usr/bin/google-chrome-stable", "/snap/bin/chromium", "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome", "/Applications/Chromium.app/Contents/MacOS/Chromium", join(env["PROGRAMFILES"] ?? "C:\\Program Files", "Google", "Chrome", "Application", "chrome.exe"), join(env["PROGRAMFILES(X86)"] ?? "C:\\Program Files (x86)", "Microsoft", "Edge", "Application", "msedge.exe"));
+	return found.find((p) => existsSync(p)) ?? null;
+}
+/** The host: a sandboxed frame given the document, and the bridge, answering files through window.isoRead. */
+const HOST = `(doc, ground) => {
+  const f = document.getElementById("f");
+  window.said = []; window.ready = false;
+  const tell = (m, t = []) => f.contentWindow.postMessage({ isorite: 0, ...m }, "*", t);
+  addEventListener("message", async (e) => {
+    const m = e.data;
+    if (e.source !== f.contentWindow || !m || m.isorite !== 0) return;
+    if (m.type === "ready") { window.ready = true; tell({ type: "ground", ground }); tell({ type: "look", look: "isorite" }); }
+    else if (m.type === "file" || m.type === "bytes") {
+      const got = await window.isoRead(m.path);
+      if (got.error) tell({ type: "reply", id: m.id, error: got.error });
+      else if (m.type === "bytes") { const buf = got.b64 !== undefined ? Uint8Array.from(atob(got.b64), (c) => c.charCodeAt(0)).buffer : new TextEncoder().encode(got.text).buffer; tell({ type: "reply", id: m.id, bytes: buf }, [buf]); }
+      else tell({ type: "reply", id: m.id, text: got.text ?? atob(got.b64) });
+    }
+    else if (m.type === "height") f.style.height = Math.min(8000, Math.ceil(m.height) + 4) + "px";
+    else if (m.type === "error") window.said.push(String(m.message));
+  });
+  f.srcdoc = doc;
+}`;
+/** What it drew: SVG marks, a table's cells, and 100 for each canvas with anything on it (a WebGL one, if it has a size). */
+const DRAWN = `(() => {
+  let n = document.querySelectorAll("svg path, svg line, svg circle, svg rect, svg polyline, svg polygon, svg text, iso-table td").length;
+  for (const c of document.querySelectorAll("canvas")) {
+    try {
+      const g = c.getContext("2d");
+      if (g) { const d = g.getImageData(0, 0, c.width, c.height).data; if (d.some((v, i) => v !== d[i % 4])) n += 100; }
+      else n += 100;
+    } catch { n += 100; }
+  }
+  return n;
+})()`;
+/** Every control touched: sliders to three quarters, choices to their second, buttons pressed, a drag on a canvas. */
+const TOUCH = `(async () => {
+  for (const r of document.querySelectorAll("input[type=range]")) { r.value = String(+r.min + (+r.max - +r.min) * 0.75); r.dispatchEvent(new Event("input", { bubbles: true })); r.dispatchEvent(new Event("change", { bubbles: true })); }
+  for (const s of document.querySelectorAll("select")) if (s.options.length > 1) { s.selectedIndex = 1; s.dispatchEvent(new Event("change", { bubbles: true })); }
+  for (const b of document.querySelectorAll("button, input[type=checkbox]")) if (!b.closest("iso-note")) b.click();
+  await new Promise((r) => setTimeout(r, 400));
+  const c = document.querySelector("canvas");
+  if (c) {
+    const r = c.getBoundingClientRect(), at = (t, x) => c.dispatchEvent(new PointerEvent(t, { clientX: r.left + x, clientY: r.top + r.height / 2, bubbles: true, pointerId: 1 }));
+    at("pointerdown", r.width / 2); at("pointermove", r.width / 2 + 60); at("pointerup", r.width / 2 + 60);
+    c.dispatchEvent(new MouseEvent("click", { clientX: r.left + r.width / 3, clientY: r.top + r.height / 3, bubbles: true }));
+  }
+})()`;
+let launched = null;
+async function browser(path) {
+	launched ??= (async () => {
+		const { chromium } = await import("playwright-core");
+		return chromium.launch({
+			executablePath: path,
+			args: [
+				"--use-gl=angle",
+				"--use-angle=swiftshader",
+				"--enable-unsafe-swiftshader"
+			]
+		});
+	})().catch((e) => {
+		launched = null;
+		throw e;
+	});
+	return launched;
+}
+/** Render an assembled artifact (packages/kit's assemble) unseen, answer its bridge from `read` for the files in
+*  `uses`, touch its controls, and say what happened. */
+async function renderArtifact(doc, uses, read, opts) {
+	const b = await browser(opts.executable), width = opts.width ?? 1100;
+	const page = await b.newPage({ viewport: {
+		width,
+		height: 900
+	} });
+	const errors = [];
+	page.on("console", (m) => {
+		if (m.type?.() === "error") errors.push(m.text());
+	});
+	page.on("pageerror", (e) => errors.push(e.message ?? String(e)));
+	const work = (async () => {
+		await page.exposeFunction("isoRead", async (rel) => {
+			if (!uses.includes(rel)) return { error: `${rel} is not in the artifact's manifest (isorite:uses)` };
+			const got = await read(rel);
+			if (got === null) return { error: `${rel}: no such file beside the artifact` };
+			return typeof got === "string" ? { text: got } : { b64: Buffer.from(got).toString("base64") };
+		});
+		await page.setContent(`<!doctype html><html><body style="margin:0;background:${opts.ground === "quartz" ? "#F2F0EA" : "#07101C"}"><iframe id="f" sandbox="allow-scripts" style="display:block;width:${width}px;height:900px;border:0"></iframe></body></html>`);
+		await page.evaluate(`(${HOST})(${JSON.stringify(doc)}, ${JSON.stringify(opts.ground ?? "lapis")})`);
+		await page.waitForTimeout(2e3);
+		const ready = await page.evaluate("window.ready");
+		const frame = page.frames().find((fr) => fr !== page.mainFrame());
+		const height = await page.evaluate("document.getElementById(\"f\").offsetHeight");
+		const drawn = frame ? await frame.evaluate(DRAWN) : 0;
+		let screenshot;
+		if (opts.screenshot) {
+			await page.setViewportSize({
+				width,
+				height: Math.max(400, Math.min(height, 4e3))
+			});
+			screenshot = await page.screenshot({ fullPage: true });
+		}
+		if (frame) await frame.evaluate(TOUCH);
+		await page.waitForTimeout(600);
+		const said = await page.evaluate("window.said");
+		return {
+			rendered: ready,
+			errors: [.../* @__PURE__ */ new Set([...said, ...errors])].slice(0, 12),
+			drawn,
+			height,
+			...screenshot ? { screenshot } : {}
+		};
+	})();
+	const timeout = new Promise((resolve) => setTimeout(() => resolve({
+		rendered: false,
+		errors: ["it didn't finish starting within the time allowed: a loop that never ends?"],
+		drawn: 0,
+		height: 0
+	}), opts.timeout ?? 2e4));
+	try {
+		return await Promise.race([work, timeout]);
+	} finally {
+		await page.close().catch(() => void 0);
+	}
+}
+//#endregion
 //#region packages/server/src/serve.ts
 init_src$1();
 init_src();
+init_src$2();
 /** The built app: in a checkout, where npm run build puts it; installed from npm, in the package's web/. */
 const WEB_DIR = [join(dirname(fileURLToPath(import.meta.url)), "..", "web"), join(dirname(fileURLToPath(import.meta.url)), "..", "..", "..", "app", "build")].find((dir) => existsSync(join(dir, "index.html"))) ?? join(dirname(fileURLToPath(import.meta.url)), "..", "..", "..", "app", "build");
 const moveIt = (study) => `${study} is a study base, which this isorite no longer reads (format 1). Move it into its notes with: isorite migrate ${study}`;
@@ -8950,9 +10039,28 @@ async function openEngine({ notes }, device = deviceId(), config = configPath(),
 				name: `vectors-${createHash("sha256").update(notes).digest("hex").slice(0, 16)}.json`
 			}
 		} : {},
-		...extras.elsewhere ? { elsewhere: extras.elsewhere } : {}
+		...extras.elsewhere ? { elsewhere: extras.elsewhere } : {},
+		renderArtifact: (path, html) => runArtifact(notes, path, html)
 	});
 }
+/** Run an artifact unseen: null when there's no browser, or no built kit, to run it with. */
+async function runArtifact(notes, path, html) {
+	const executable = findBrowser(), kitDir = join(WEB_DIR, "kit");
+	if (!executable || !existsSync(join(kitDir, "kit.js"))) return null;
+	const kit = Object.fromEntries(KIT_FILES.map((f) => [f, readFileSync(join(kitDir, f), "utf8")]));
+	const dir = dirname(resolve(notes, path)), uses = manifestOf(html).uses;
+	const read = async (rel) => {
+		const at = resolve(dir, rel);
+		if (!at.startsWith(resolve(notes) + sep) || !existsSync(at)) return null;
+		return /\.(csv|tsv|json|jsonl|ndjson|txt|gltf|obj)$/i.test(at) ? readFileSync(at, "utf8") : new Uint8Array(readFileSync(at));
+	};
+	const got = await renderArtifact(assemble(html, kit), uses, read, { executable });
+	return {
+		rendered: got.rendered,
+		errors: got.errors,
+		drawn: got.drawn
+	};
+}
 /** The guide's finder, as a provider: no key, no sign-in, and a name that says what it is. */
 const { auth: _auth, ...openrouter } = OPENROUTER;
 const FINDER = {
@@ -9683,6 +10791,8 @@ async function doctor(folder, o = {}) {
 		say("browser pages", asking.length ? "fail" : "ok", asking.length ? `${asking.join(" and ")} asked for a password (401, Basic): that is not isorite's server; stop it, or give isorite another port (--port <n>)` : `isorite's pages at ${url}/ ask for no password. ${hint}`);
 	}
 	if (env.SSH_CONNECTION) say("browser", "ok", `over SSH: on your own machine, ssh -L ${port}:localhost:${port} <this host>, then http://localhost:${port}/`);
+	const chrome = findBrowser(env);
+	say("artifacts", chrome ? "ok" : "warn", chrome ? `run unseen when Iso writes one, in ${chrome}` : "no Chromium found to run them unseen, so only their rules are checked when Iso writes one; ISORITE_BROWSER names one (Chrome, Chromium, Edge)");
 	let model = null;
 	if (env.ISORITE_EMBED === "off") say("search by meaning", "skip", "switched off (ISORITE_EMBED=off)");
 	else {
@@ -11079,6 +12189,19 @@ const finderHttp = (pace = 0) => scriptedHttp(finderAnswer, pace);
 //#region packages/guide/src/node.ts
 /** In a checkout, the package's notes/; in the npm package, where this is bundled into dist/, the guide/ beside it. */
 const GUIDE_DIR = [join(import.meta.dirname, "..", "guide"), join(import.meta.dirname, "..", "notes")].find((d) => existsSync(join(d, "start-here.md"))) ?? join(import.meta.dirname, "..", "notes");
+/** The guide's files that aren't notes, by path, as bytes: its pictures (M22), and its artifacts and their data (M23). */
+function loadGuidePictures(dir = GUIDE_DIR) {
+	const out = {};
+	const visit = (at) => {
+		for (const name of readdirSync(at)) {
+			const path = join(at, name);
+			if (statSync(path).isDirectory()) visit(path);
+			else if (/\.(png|jpe?g|gif|svg|webp|avif|html|csv|tsv|json|jsonl|stl|glb|gltf|obj|pdf)$/i.test(name)) out[relative(dir, path).split(sep).join("/")] = new Uint8Array(readFileSync(path));
+		}
+	};
+	visit(dir);
+	return out;
+}
 /** The guide's files as they stand in the package: its notes and its AGENTS.md, by path. */
 function loadGuide(dir = GUIDE_DIR) {
 	const out = {};
@@ -11106,7 +12229,7 @@ function writeGuide(folder) {
 		fresh: false
 	};
 	if (existsSync(at) && readdirSync(at).some((f) => f !== ".isorite")) throw new StudyError(`${at} has files in it that are not the guide: name another folder, isorite guide <folder>`);
-	for (const [path, text] of Object.entries(loadGuide())) {
+	for (const [path, text] of [...Object.entries(loadGuide()), ...Object.entries(loadGuidePictures())]) {
 		mkdirSync(dirname(join(at, path)), { recursive: true });
 		writeFileSync(join(at, path), text);
 	}
@@ -11155,8 +12278,21 @@ async function writeExample(folder, now = Date.now()) {
 		mkdirSync(dirname(at), { recursive: true });
 		writeFileSync(at, text);
 	}
+	copyPictures(NOTES_DIR, notes);
 	return { notes };
 }
+/** The pictures among a folder's notes (M22), copied as they are: they have no history. */
+function copyPictures(from, to, dir = from) {
+	for (const name of readdirSync(dir)) {
+		const path = join(dir, name);
+		if (statSync(path).isDirectory()) copyPictures(from, to, path);
+		else if (citeKind(name) === "image") {
+			const at = join(to, relative(from, path));
+			mkdirSync(dirname(at), { recursive: true });
+			copyFileSync(path, at);
+		}
+	}
+}
 const GEOMETRY_DIR = join(import.meta.dirname, "..", "geometry");
 /** The geometry example's notes, and the code beside them, as they stand today, by path. */
 function loadGeometry(dir = GEOMETRY_DIR) {
@@ -11282,12 +12418,14 @@ function bases(args, { config = configPath(), out = console.log } = {}) {
 }
 //#endregion
 //#region packages/server/src/main.ts
+init_src$2();
 init_src$1();
 init_model();
 const USAGE = `isorite: an agentic harness for understanding
 
   isorite new <folder>                   start a knowledge base: the folder, empty, with isorite's .isorite/
-  isorite check <notes>                  check a folder of notes: frontmatter, links, cycles
+  isorite check <notes> [--unused]       check a folder of notes: frontmatter, links, cycles; --unused lists
+                                         the pictures no note shows
   isorite serve <notes> [--port <n>] [--allow-host <name>]
                                          open it in the browser, on this machine only
   isorite migrate <study base> [--merge] move a study base (format 1) into its notes' .isorite/; exercises
@@ -11324,7 +12462,7 @@ const USAGE = `isorite: an agentic harness for understanding
                                          the browser; run again, as you left it. Iso is your model, or with
                                          none set up, the guide's finder (also: isorite --tutorial)
 `;
-function check(notes, out = console.log) {
+function check(notes, out = console.log, unused = false) {
 	const root = resolve(notes);
 	if (!existsSync(root) || !statSync(root).isDirectory()) {
 		out(`no folder at ${root}`);
@@ -11333,14 +12471,41 @@ function check(notes, out = console.log) {
 	const bundle = loadBundle(root), issues = bundle.lint(), cycles = bundle.requiresCycles();
 	for (const i of issues) out(`${i.level.padEnd(7)} ${i.path}: ${i.message}`);
 	for (const c of cycles) out(`warning requires cycle: ${c.join(" -> ")}`);
-	const errors = issues.filter((i) => i.level === "error").length;
-	out(`${bundle.concepts.size} notes in ${bundle.directories.size} folders; ${errors} errors, ${issues.length - errors} warnings, ${cycles.length} requires cycles`);
+	let artifactErrors = 0, artifactWarnings = 0;
+	for (const f of [...bundle.files].filter((x) => citeKind(x) === "artifact").sort()) {
+		const html = readFileSync(join(root, f), "utf8");
+		if (manifestOf(html).kit === null) continue;
+		const dir = dirname(join(root, f)), files = manifestOf(html).uses.filter((u) => existsSync(join(dir, u)));
+		const columns = Object.fromEntries(files.filter((u) => citeKind(u) === "data").flatMap((u) => {
+			try {
+				return [[u, columnsOf(parseData(u, readFileSync(join(dir, u), "utf8")))]];
+			} catch {
+				return [];
+			}
+		}));
+		for (const b of checkArtifact(html, {
+			files,
+			columns
+		})) {
+			out(`${b.level.padEnd(7)} ${f}: ${b.message}`);
+			if (b.level === "error") artifactErrors++;
+			else artifactWarnings++;
+		}
+	}
+	const errors = issues.filter((i) => i.level === "error").length + artifactErrors;
+	out(`${bundle.concepts.size} notes in ${bundle.directories.size} folders; ${errors} errors, ${issues.length - issues.filter((i) => i.level === "error").length + artifactWarnings} warnings, ${cycles.length} requires cycles`);
+	if (unused) {
+		const cited = new Set([...bundle.concepts.values()].flatMap((c) => c.cites.map((x) => x.target)));
+		const idle = [...bundle.files].filter((f) => citeKind(f) === "image" && !cited.has(f)).sort();
+		for (const f of idle) out(`unused  ${f}`);
+		out(idle.length ? `${idle.length} ${idle.length === 1 ? "picture" : "pictures"} no note shows` : "every picture is shown by a note");
+	}
 	return errors ? 1 : 0;
 }
 function main(argv) {
 	const [command, ...rest] = argv;
 	try {
-		if (command === "check" && rest[0]) return check(rest[0]);
+		if (command === "check" && rest.find((r) => !r.startsWith("--"))) return check(rest.find((r) => !r.startsWith("--")), console.log, rest.includes("--unused"));
 		if (command === "new" && rest[0]) {
 			const made = newBase(rest[0]);
 			console.log(`${made}: a knowledge base, empty. Open it in the browser, or beside your code in the terminal:\n  isorite serve ${made}\n  cd <your code> && isorite term ${made}`);