@mark1russell7/site-pages 0.2.0 → 0.2.1

package/build/explorer/index.js

@@ -0,0 +1,1342 @@
+import { h } from "../chrome.js";
+import { heldOutError, parseResponseRecord, quantile, sliceResponse, surfaceResponse } from "@mark1russell7/rigor-statistics";
+// src/explorer/model.ts
+/**
+* The pure core of the response explorer: the state, the rules of the controls and the data of a view. This module
+* reads a record of the format `response-records/1` only with `@mark1russell7/rigor-statistics`. It has no DOM and no
+* clock of its own, so a test gives it each input.
+*
+* The rules of the controls follow the rules of a conditional dimension. The functions `axisChoices`, `facetChoices`
+* and `holdControls` offer only combinations that `sliceResponse` and `surfaceResponse` accept. The function `settle`
+* gives the nearest good state for any wanted state.
+*/
+/** The largest number of values on a continuous axis. It is the default of `ResponseViewOptions.steps`. */
+const MAX_STEPS = 33;
+/** The smallest number of values on a continuous axis. A smaller grid shows too little of the response. */
+const MIN_STEPS = 5;
+/**
+* The largest number of point reads of one view. The field `nearest` of each place reads each point, so the cost of a
+* view is its number of places times the number of points. This number is a first bound, not a measured time.
+* `SURFACE_BUDGET_MS` corrects the grid when a surface takes too long on the device.
+*/
+const READ_BUDGET = 4e5;
+/** The time of one surface in milliseconds. A longer surface gives a smaller grid for the next surface. */
+const SURFACE_BUDGET_MS = 50;
+/** The largest number of panels of one view. */
+const MAX_PANELS = 8;
+/** The distance from a measurement, from 0 to 1, at which a band has its weakest color. */
+const FADE_END = .5;
+/**
+* This function reads a record from JSON text or from parsed data. It does not throw: bad data gives faults with
+* their paths.
+*/
+function openRecord(value) {
+	if (typeof value !== "string") return parseResponseRecord(value);
+	try {
+		return parseResponseRecord(JSON.parse(value));
+	} catch (error) {
+		return {
+			ok: false,
+			faults: [{
+				path: "",
+				message: `this text is not JSON: ${String(error)}.`
+			}]
+		};
+	}
+}
+const numberText = new Intl.NumberFormat("en-US", { maximumSignificantDigits: 3 });
+/** This function gives the text of a value: a number with three significant digits, or the text of a level. */
+function formatValue(value) {
+	if (value === null) return "none";
+	return typeof value === "number" ? numberText.format(value) : value;
+}
+/** This function gives the dimension with an id that the state or the record names. */
+function dimensionOf(record, id) {
+	const dimension = record.dimensions.find((d) => d.id === id);
+	if (dimension === void 0) throw new RangeError(`The record has no dimension "${id}".`);
+	return dimension;
+}
+/** This function gives the measured values of a dimension, with no `null`. */
+function measuredValues(record, id) {
+	return record.points.flatMap((p) => {
+		const value = p.values[id];
+		return value === null || value === void 0 ? [] : [value];
+	});
+}
+const stopCache = /* @__PURE__ */ new WeakMap();
+/** This function gives the distinct measured values of a continuous dimension, in order. */
+function distinctNumbers(record, id) {
+	const numbers = measuredValues(record, id).filter((v) => typeof v === "number");
+	return [...new Set(numbers)].sort((a, b) => a - b);
+}
+/**
+* This function gives the values that a visitor can hold: each level, or the measured values of a continuous dimension.
+* With more than `MAX_STOPS` measured values, it gives that number of quantiles of them.
+*/
+function stopsOf(record, dimension) {
+	if (dimension.kind !== "continuous") return dimension.levels;
+	let stops = stopCache.get(record);
+	if (stops === void 0) stopCache.set(record, stops = /* @__PURE__ */ new Map());
+	const known = stops.get(dimension.id);
+	if (known !== void 0) return known;
+	const distinct = distinctNumbers(record, dimension.id);
+	const thin = () => [...new Set(Array.from({ length: 33 }, (_, i) => quantile(distinct, i / 32, "nearest-rank")))];
+	const found = distinct.length === 0 ? [dimension.range[0]] : distinct.length > 33 ? thin() : distinct;
+	stops.set(dimension.id, found);
+	return found;
+}
+/** This function gives the place of a number on a continuous dimension, from 0 to 1. */
+function shareOf(dimension, value) {
+	const scale = (v) => dimension.log === true ? Math.log10(v) : v;
+	const [low, high] = dimension.range;
+	return (scale(value) - scale(low)) / (scale(high) - scale(low));
+}
+/**
+* This function gives the option `tolerance` of a view. A dimension with all its measured values as stops needs none.
+* A thinned dimension needs half of its largest gap, so each measured point matches a stop.
+*/
+function toleranceOf(record) {
+	let tolerance = 0;
+	for (const dimension of record.dimensions) {
+		if (dimension.kind !== "continuous") continue;
+		const stops = stopsOf(record, dimension);
+		if (stops.length === distinctNumbers(record, dimension.id).length) continue;
+		for (let i = 1; i < stops.length; i++) {
+			const gap = shareOf(dimension, stops[i]) - shareOf(dimension, stops[i - 1]);
+			tolerance = Math.max(tolerance, gap / 2);
+		}
+	}
+	return tolerance;
+}
+/** This function gives the usual value of a dimension: the measured median, or the most common level in `among`. */
+function usualValue(record, dimension, among) {
+	const values = measuredValues(record, dimension.id);
+	if (dimension.kind === "continuous") {
+		const numbers = values.filter((v) => typeof v === "number");
+		return numbers.length === 0 ? dimension.range[0] : quantile(numbers, .5, "nearest-rank");
+	}
+	const levels = among ?? dimension.levels;
+	const count = (level) => values.filter((v) => v === level).length;
+	return levels.reduce((best, level) => count(level) > count(best) ? level : best, levels[0]);
+}
+/** This function gives the stop of a dimension that is nearest to a value, or `undefined` for a value of no use. */
+function nearestStop(record, dimension, value) {
+	const stops = stopsOf(record, dimension);
+	if (value === void 0) return void 0;
+	if (dimension.kind !== "continuous") return stops.includes(value) ? value : void 0;
+	if (typeof value !== "number") return void 0;
+	const far = (stop) => Math.abs(shareOf(dimension, stop) - shareOf(dimension, value));
+	return stops.reduce((best, stop) => far(stop) < far(best) ? stop : best);
+}
+/** This function gives the levels that the parent of each varied conditional dimension needs. */
+function neededLevels(record, varied) {
+	const needed = /* @__PURE__ */ new Map();
+	for (const id of varied) {
+		const when = dimensionOf(record, id).when;
+		if (when === void 0) continue;
+		const earlier = needed.get(when.dimension);
+		needed.set(when.dimension, earlier === void 0 ? when.levels : earlier.filter((level) => when.levels.includes(level)));
+	}
+	return needed;
+}
+/** This function gives the condition of a dimension as a phrase of a sentence. */
+function whenText(record, dimension) {
+	const when = dimension.when;
+	if (when === void 0) return "";
+	return `only when ${dimensionOf(record, when.dimension).label} is ${when.levels.map(formatValue).join(" or ")}`;
+}
+const variedOf = (state) => state.y === null ? [state.x] : [state.x, state.y];
+/** This function gives the values of a dimension in panels, inside the needs of the varied dimensions. */
+function panelLevels(record, state, id) {
+	const stops = stopsOf(record, dimensionOf(record, id));
+	const needed = neededLevels(record, variedOf(state)).get(id);
+	return needed === void 0 ? stops : stops.filter((value) => needed.includes(value));
+}
+/** This function gives the reason that a dimension cannot be in panels. A good dimension gives an empty string. */
+function facetBlock(record, state, dimension) {
+	if (variedOf(state).includes(dimension.id)) return "It is on an axis";
+	const when = dimension.when;
+	if (when !== void 0 && !variedOf(state).includes(when.dimension) && !when.levels.includes(state.hold[when.dimension])) return `It applies ${whenText(record, dimension)}`;
+	const count = panelLevels(record, state, dimension.id).length;
+	if (count > 8) return `It has ${count} values, and a view has 8 panels or fewer`;
+	if (count < 2) return "It has one value here";
+	return "";
+}
+/** This function gives the reason that a dimension cannot go on an axis. A good dimension gives an empty string. */
+function axisBlock(record, state, slot, dimension) {
+	const otherId = slot === "x" ? state.y : state.x;
+	if (dimension.id === otherId) return "It is on the other axis";
+	const other = otherId === null ? void 0 : dimensionOf(record, otherId);
+	if (other?.when?.dimension === dimension.id) return `${other.label} needs it held`;
+	const when = dimension.when;
+	if (when === void 0) return "";
+	const parent = dimensionOf(record, when.dimension);
+	if (parent.id === otherId) return `It needs ${parent.label} held`;
+	const shared = other?.when?.dimension === parent.id ? when.levels.filter((level) => other.when?.levels.includes(level) === true) : when.levels;
+	return (parent.id === state.facet ? stopsOf(record, parent) : [state.hold[parent.id]]).some((level) => shared.includes(level)) ? "" : `It applies ${whenText(record, dimension)}`;
+}
+/** This function gives the first dimension with no condition, and a continuous dimension before another kind. */
+function firstAxis(record) {
+	const plain = record.dimensions.filter((d) => d.when === void 0);
+	return (plain.find((d) => d.kind === "continuous") ?? plain[0] ?? record.dimensions[0]).id;
+}
+/**
+* This function gives the nearest good state for a wanted state. Each unknown or missing field takes its usual value.
+* A parent moves to a level that a varied conditional dimension needs. A combination that a view refuses loses its
+* second axis or its panels.
+*/
+function settle(record, wanted = {}) {
+	const known = (id) => id !== null && id !== void 0 && record.dimensions.some((d) => d.id === id);
+	const measure = record.measures.some((m) => m.id === wanted.measure) ? wanted.measure : record.measures[0]?.id ?? "";
+	const x = known(wanted.x) ? wanted.x : firstAxis(record);
+	const parentOf = (id) => dimensionOf(record, id).when?.dimension;
+	let y = known(wanted.y) && wanted.y !== x ? wanted.y : null;
+	if (y !== null && (parentOf(y) === x || parentOf(x) === y || [...neededLevels(record, [x, y]).values()].some((levels) => levels.length === 0))) y = null;
+	const hold = {};
+	for (const dimension of record.dimensions) hold[dimension.id] = nearestStop(record, dimension, wanted.hold?.[dimension.id]) ?? usualValue(record, dimension);
+	const facetId = known(wanted.facet) ? wanted.facet : null;
+	const facet = facetId !== null && facetBlock(record, {
+		x,
+		y,
+		hold
+	}, dimensionOf(record, facetId)) === "" ? facetId : null;
+	for (const [parent, levels] of neededLevels(record, variedOf({
+		x,
+		y
+	}))) {
+		if (parent === facet || levels.includes(hold[parent])) continue;
+		hold[parent] = usualValue(record, dimensionOf(record, parent), levels);
+	}
+	return {
+		measure,
+		x,
+		y,
+		facet: facet !== null && facetBlock(record, {
+			x,
+			y,
+			hold
+		}, dimensionOf(record, facet)) === "" ? facet : null,
+		hold
+	};
+}
+/** This function gives each dimension as a choice for an axis. A disabled choice tells its reason. */
+function axisChoices(record, state, slot) {
+	return record.dimensions.map((d) => {
+		const reason = axisBlock(record, state, slot, d);
+		return {
+			id: d.id,
+			label: d.label,
+			disabled: reason !== "",
+			reason
+		};
+	});
+}
+/** This function gives each dimension as a choice for panels. A disabled choice tells its reason. */
+function facetChoices(record, state) {
+	return record.dimensions.map((d) => {
+		const reason = facetBlock(record, state, d);
+		return {
+			id: d.id,
+			label: d.label,
+			disabled: reason !== "",
+			reason
+		};
+	});
+}
+/** This function gives the control of each held dimension. A dimension on an axis or in panels has no control. */
+function holdControls(record, state) {
+	const needed = neededLevels(record, variedOf(state));
+	return record.dimensions.filter((d) => !variedOf(state).includes(d.id) && d.id !== state.facet).map((d) => {
+		const parent = d.when?.dimension;
+		const applies = parent === void 0 || parent === state.facet || variedOf(state).includes(parent) || d.when?.levels.includes(state.hold[parent]) === true;
+		const levels = needed.get(d.id);
+		const options = stopsOf(record, d).map((value) => {
+			const locked = levels !== void 0 && !levels.includes(value);
+			const reason = !applies ? `It applies ${whenText(record, d)}` : locked ? "A varied dimension has no value at this level" : "";
+			return {
+				value,
+				text: formatValue(value),
+				disabled: reason !== "",
+				reason
+			};
+		});
+		const note = d.when === void 0 ? "" : `Applies ${whenText(record, d)}`;
+		return {
+			id: d.id,
+			label: d.label,
+			kind: d.kind === "continuous" ? "stops" : "levels",
+			applies,
+			note,
+			options,
+			value: state.hold[d.id]
+		};
+	});
+}
+/** This function gives the state with a new measure. */
+function setMeasure(record, state, measure) {
+	return settle(record, {
+		...state,
+		measure
+	});
+}
+/** This function gives the state with a new axis. It does not take a disabled choice. The value `null` removes the y axis. */
+function setAxis(record, state, slot, id) {
+	if (id === null) return slot === "y" ? settle(record, {
+		...state,
+		y: null
+	}) : state;
+	if (axisBlock(record, state, slot, dimensionOf(record, id)) !== "") return state;
+	return settle(record, {
+		...state,
+		[slot]: id,
+		facet: state.facet === id ? null : state.facet
+	});
+}
+/** This function gives the state with new panels. It does not take a disabled choice. The value `null` gives one panel. */
+function setFacet(record, state, id) {
+	if (id !== null && facetBlock(record, state, dimensionOf(record, id)) !== "") return state;
+	return settle(record, {
+		...state,
+		facet: id
+	});
+}
+/** This function gives the state with a new held value. It does not take a disabled value. */
+function setHold(record, state, id, value) {
+	const option = holdControls(record, state).find((c) => c.id === id)?.options.find((o) => o.value === value);
+	if (option === void 0 || option.disabled) return state;
+	return settle(record, {
+		...state,
+		hold: {
+			...state.hold,
+			[id]: value
+		}
+	});
+}
+/**
+* This function gives the number of steps of a view, from the number of points, before the call. The field `nearest`
+* reads each point at each place, so the number of places comes from `READ_BUDGET`.
+*
+* @param points - The number of points of the record.
+* @param panels - The number of panels of the view.
+* @param continuous - The number of continuous axes of the view.
+* @param levels - The number of levels of a level axis of a surface, or 1.
+* @param cap - The largest result.
+*/
+function planSteps(points, panels, continuous, levels, cap = 33) {
+	const places = READ_BUDGET / (Math.max(1, points) * Math.max(1, panels));
+	const room = continuous === 2 ? Math.sqrt(places) : places / Math.max(1, levels);
+	return Math.max(5, Math.min(cap, 33, Math.floor(room)));
+}
+/** This function gives the cap of the next view: a smaller grid when this surface took more than the budget. */
+function nextStepsCap(steps, elapsedMs, budgetMs) {
+	if (elapsedMs <= budgetMs) return Number.POSITIVE_INFINITY;
+	return Math.max(5, Math.min(steps - 1, Math.floor(steps * Math.sqrt(budgetMs / elapsedMs))));
+}
+/** This function gives the axis of a dimension. */
+function axisOf(dimension) {
+	const { id, label, unit } = dimension;
+	const name = unit === "" ? label : `${label} (${unit})`;
+	if (dimension.kind === "continuous") return {
+		id,
+		label: name,
+		kind: "number",
+		log: dimension.log === true,
+		range: dimension.range,
+		levels: []
+	};
+	return {
+		id,
+		label: name,
+		kind: "levels",
+		log: false,
+		range: [0, 1],
+		levels: dimension.levels
+	};
+}
+/** This function gives the place of a value on an axis, from 0 to 1. A value outside a number axis goes past the ends. */
+function placeOn(axis, value) {
+	if (axis.kind === "levels") return (axis.levels.indexOf(value) + .5) / axis.levels.length;
+	const scale = (v) => axis.log ? Math.log10(v) : v;
+	const [low, high] = axis.range;
+	return (scale(value) - scale(low)) / (scale(high) - scale(low));
+}
+/** This function gives true for a point that matches the held values, with the rules of `sliceResponse`. */
+function pointMatches(record, point, measure, varied, hold, tolerance) {
+	if (typeof point.measures[measure] !== "number") return false;
+	return record.dimensions.every((d) => {
+		const value = point.values[d.id] ?? null;
+		if (varied.includes(d.id)) return value !== null;
+		const parent = d.when === void 0 ? null : point.values[d.when.dimension] ?? null;
+		const wanted = d.when === void 0 || parent !== null && d.when.levels.includes(parent) ? hold[d.id] : null;
+		if (typeof value !== "number" || typeof wanted !== "number" || d.kind !== "continuous") return value === wanted;
+		return Math.abs(shareOf(d, value) - shareOf(d, wanted)) <= tolerance;
+	});
+}
+/** This function gives the error of a measure in plain words. */
+function errorSentence(measure, model, error) {
+	const unit = measure.unit === "" ? "" : ` ${measure.unit}`;
+	const amount = (value) => model.scale === "log" ? `a factor of ${formatValue(10 ** value)}` : `${formatValue(value)}${unit}`;
+	const seen = `On ${error.n} points that each fit did not see, over ${error.folds} folds, the model misses by ${amount(error.mae)} on average.`;
+	const base = `A plain mean misses by ${amount(error.baselineMae)}.`;
+	if (error.skill === null) return `${seen} ${base}`;
+	return error.skill > 0 ? `${seen} ${base} The model removes ${Math.round(error.skill * 100)}% of that miss.` : `${seen} ${base} The model is no better than the mean.`;
+}
+/** This function gives the name of a panel. */
+const panelTitle = (facet, level) => facet === void 0 || level === null ? "" : `${facet.label}: ${formatValue(level)}`;
+/** This function gives the panels of a measure with no model: the measured points that match the held values. */
+function pointPanels(record, state, levels, facet, tolerance) {
+	const varied = variedOf(state);
+	return levels.map((level) => {
+		const hold = level === null || facet === void 0 ? state.hold : {
+			...state.hold,
+			[facet.id]: level
+		};
+		const points = record.points.flatMap((p) => {
+			if (!pointMatches(record, p, state.measure, varied, hold, tolerance)) return [];
+			return [{
+				id: p.id,
+				at: varied.map((id) => p.values[id]),
+				value: p.measures[state.measure]
+			}];
+		});
+		return {
+			kind: "points",
+			title: panelTitle(facet, level),
+			level,
+			points
+		};
+	});
+}
+/** This function gives the held values of a request: each dimension that does not vary. */
+function requestHold(state, facet, level) {
+	const varied = variedOf(state);
+	const hold = Object.fromEntries(Object.entries(state.hold).filter(([id]) => !varied.includes(id)));
+	return facet === void 0 || level === null ? hold : {
+		...hold,
+		[facet.id]: level
+	};
+}
+/** This function gives the text of the size of a grid. */
+function gridSentence(x, y, cells, elapsedMs, budgetMs) {
+	if (cells) return `The grid has ${x.length} by ${y.length} measured levels.`;
+	const size = `The grid has ${x.length} by ${y.length} places.`;
+	return elapsedMs > budgetMs ? `${size} This surface took ${Math.round(elapsedMs)} ms, so the next grid is smaller.` : size;
+}
+/** This function gives the steps of a view from its axes and the plan of `planSteps`. */
+function stepsOfView(record, state, panels, cap) {
+	const axes = variedOf(state).map((id) => dimensionOf(record, id));
+	const fixed = axes.filter((d) => d.kind !== "continuous");
+	const levels = fixed.reduce((count, d) => count * d.levels.length, 1);
+	return planSteps(record.points.length, panels, axes.length - fixed.length, levels, cap);
+}
+/**
+* This function gives the data of a view. It does not throw. A request that the record refuses gives the text in
+* `problem`, and no panels. A measure with no model gives only the measured points, and a table model gives cells.
+*/
+function viewOf(record, state, options = {}) {
+	const { budgetMs = 50, stepsCap = 33, now = () => 0 } = options;
+	const measure = record.measures.find((m) => m.id === state.measure) ?? record.measures[0];
+	const model = record.models.find((m) => m.measure === measure.id);
+	const x = axisOf(dimensionOf(record, state.x));
+	const y = state.y === null ? null : axisOf(dimensionOf(record, state.y));
+	const facet = state.facet === null ? void 0 : dimensionOf(record, state.facet);
+	const levels = facet === void 0 ? [null] : panelLevels(record, state, facet.id);
+	const steps = stepsOfView(record, state, levels.length, stepsCap);
+	const tolerance = toleranceOf(record);
+	const base = {
+		measure,
+		x,
+		y,
+		log: model?.scale === "log",
+		steps,
+		elapsedMs: 0,
+		nextCap: stepsCap,
+		gridText: "",
+		problem: ""
+	};
+	if (model === void 0) {
+		const modelText = "This measure has no valid model in the record, so the view shows only the measured points.";
+		return {
+			...base,
+			panels: pointPanels(record, state, levels, facet, tolerance),
+			error: null,
+			errorText: "",
+			modelText
+		};
+	}
+	const modelText = model.kind === "table" ? "The model is the mean of each measured cell, so the view shows cells and no smooth surface." : "The model is a smooth fit over all the dimensions.";
+	try {
+		const start = now();
+		const panels = levels.map((level) => {
+			const hold = requestHold(state, facet, level);
+			const title = panelTitle(facet, level);
+			if (state.y === null) return {
+				kind: "curve",
+				title,
+				level,
+				slice: sliceResponse(record, measure.id, {
+					vary: state.x,
+					hold,
+					steps,
+					tolerance
+				})
+			};
+			const surface = surfaceResponse(record, measure.id, {
+				vary: [state.x, state.y],
+				hold,
+				steps,
+				tolerance
+			});
+			return {
+				kind: "surface",
+				title,
+				level,
+				cells: model.kind === "table" || x.kind === "levels" && y?.kind === "levels",
+				surface
+			};
+		});
+		const elapsedMs = Math.max(0, now() - start);
+		const first = panels[0];
+		const surface = first?.kind === "surface" ? first : void 0;
+		const late = surface !== void 0 && !surface.cells ? nextStepsCap(steps, elapsedMs, budgetMs) : Number.POSITIVE_INFINITY;
+		const gridText = surface === void 0 ? "" : gridSentence(surface.surface.x, surface.surface.y, surface.cells, elapsedMs, budgetMs);
+		const error = heldOutError(record, measure.id);
+		return {
+			...base,
+			panels,
+			error,
+			errorText: errorSentence(measure, model, error),
+			modelText,
+			gridText,
+			elapsedMs,
+			nextCap: Math.min(stepsCap, late)
+		};
+	} catch (error) {
+		return {
+			...base,
+			panels: [],
+			error: null,
+			errorText: "",
+			modelText,
+			problem: error instanceof Error ? error.message : String(error)
+		};
+	}
+}
+/** This function gives the strength of the band at a distance from a measurement: 1 at a measurement, 0.15 far away. */
+function fadeOf(nearest) {
+	return 1 - .85 * Math.min(1, nearest / FADE_END);
+}
+/** This function gives the share of the neutral veil of a surface cell at a distance from a measurement. */
+function veilOf(nearest) {
+	return .8 * Math.min(1, nearest / FADE_END);
+}
+/** This function gives a round step for a range and a tick count: 1, 2 or 5 times a power of 10. */
+function roundStep(span, count) {
+	const raw = span / Math.max(1, count);
+	const power = 10 ** Math.floor(Math.log10(raw));
+	const share = raw / power;
+	return (share <= 1 ? 1 : share <= 2 ? 2 : share <= 5 ? 5 : 10) * power;
+}
+/** This function gives round numbers in a range, for approximately `count` ticks. */
+function roundNumbers(low, high, count) {
+	if (!(high > low)) return [low];
+	const step = roundStep(high - low, count);
+	const out = [];
+	for (let i = Math.ceil(low / step - 1e-9); i * step <= high + step * 1e-9; i++) out.push(Number((i * step).toPrecision(12)));
+	return out;
+}
+/** This function gives the values 1, 2 and 5 times each power of 10 in a range, for approximately `count` ticks. */
+function logNumbers(low, high, count) {
+	const out = [];
+	for (let power = Math.floor(Math.log10(low)); power <= Math.ceil(Math.log10(high)); power++) for (const factor of [
+		1,
+		2,
+		5
+	]) {
+		const value = Number((factor * 10 ** power).toPrecision(12));
+		if (value >= low * (1 - 1e-9) && value <= high * (1 + 1e-9)) out.push(value);
+	}
+	const powers = out.filter((value) => Number.isInteger(Math.log10(value)));
+	return out.length > count && powers.length >= 2 ? powers : out;
+}
+/** This function gives the ticks of a number range. A log range with too few round values gives linear round values. */
+function numberTicks(low, high, log, count) {
+	const scale = (v) => log ? Math.log10(v) : v;
+	const logged = log ? logNumbers(low, high, count) : [];
+	return (logged.length >= 3 ? logged : roundNumbers(low, high, count)).map((value) => ({
+		place: high > low ? (scale(value) - scale(low)) / (scale(high) - scale(low)) : .5,
+		text: formatValue(value)
+	}));
+}
+/** This function gives the ticks of an axis. */
+function axisTicks(axis, count) {
+	if (axis.kind === "number") return numberTicks(axis.range[0], axis.range[1], axis.log, count);
+	return axis.levels.map((level) => ({
+		place: placeOn(axis, level),
+		text: formatValue(level)
+	}));
+}
+/** This function gives the values of one panel that the value axis must show. */
+function panelValues(panel, varied) {
+	if (panel.kind === "points") return varied === 1 ? panel.points.map((p) => p.value) : [];
+	if (panel.kind === "curve") return [...panel.slice.curve.flatMap((c) => [c.low, c.high]), ...panel.slice.points.map((p) => p.value)];
+	return [];
+}
+/**
+* This function gives the two ends of the value axis of a curve view. All the panels of a view share them, so two
+* panels compare by eye. A range of one value grows, so the axis keeps a length.
+*/
+function valueRange(view) {
+	const values = view.panels.flatMap((panel) => panelValues(panel, view.y === null ? 1 : 2)).filter((v) => Number.isFinite(v) && (!view.log || v > 0));
+	if (values.length === 0) return view.log ? [1, 10] : [0, 1];
+	const low = Math.min(...values);
+	const high = Math.max(...values);
+	if (view.log) {
+		const margin = high > low ? (high / low) ** .05 : 2;
+		return [low / margin, high * margin];
+	}
+	const margin = high > low ? (high - low) * .05 : Math.max(Math.abs(low) * .1, 1);
+	return [low - margin, high + margin];
+}
+/** This function gives each fitted value of a surface view, with the values of a view of plain points. */
+function heatValues(view) {
+	return view.panels.flatMap((panel) => {
+		if (panel.kind === "surface") return panel.surface.cells.flatMap((row) => row.map((cell) => cell.value));
+		return panel.kind === "points" ? panel.points.map((p) => p.value) : [];
+	});
+}
+/** This function gives the two ends of the color scale of a surface view. All the panels share them. */
+function heatRange(view) {
+	const values = heatValues(view).filter((v) => Number.isFinite(v) && (!view.log || v > 0));
+	if (values.length === 0) return [0, 1];
+	return [Math.min(...values), Math.max(...values)];
+}
+/** This function gives the step of the color scale of a value, from 0 to `HEAT_STEPS - 1`. */
+function heatStep(value, range, log) {
+	const [low, high] = range;
+	if (!(high > low)) return Math.floor(9 / 2);
+	const share = log ? (Math.log10(value) - Math.log10(low)) / (Math.log10(high) - Math.log10(low)) : (value - low) / (high - low);
+	return Math.max(0, Math.min(8, Math.floor(share * 9)));
+}
+/** This function gives the edges of the cells around places on an axis, from 0 to 1. There is one more edge than places. */
+function cellEdges(places) {
+	return [
+		0,
+		...places.slice(1).map((place, i) => (place + places[i]) / 2),
+		1
+	];
+}
+/** This function gives the path of a line through pixels. */
+function linePath(pixels) {
+	return pixels.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`).join("");
+}
+/** This function gives the closed path of a band between its upper and its lower pixels. */
+function bandPath(upper, lower) {
+	return `${linePath([...upper, ...[...lower].reverse()])}Z`;
+}
+/** This function gives the distance from a measurement in plain words. */
+function nearText(nearest) {
+	return nearest === 0 ? "A point was measured here." : `The nearest measured point is ${Math.round(nearest * 100)}% of an axis away.`;
+}
+/** This function gives the text of one place of a band. */
+function bandText(band) {
+	return `fitted ${formatValue(band.value)}, band ${formatValue(band.low)} to ${formatValue(band.high)}. ${nearText(band.nearest)}`;
+}
+/** This function gives the text of one place of a curve. */
+function curveText(axis, place) {
+	return `${axis.label} ${formatValue(place.at)}: ${bandText(place)}`;
+}
+/** This function gives the text of one place of a surface. */
+function cellText(x, y, atX, atY, band) {
+	return `${x.label} ${formatValue(atX)}, ${y.label} ${formatValue(atY)}: ${bandText(band)}`;
+}
+/** This function gives the numbers of a panel: each place of a curve, or the measured points of a surface. */
+function numberTable(view, panel) {
+	const axes = view.y === null ? [view.x.label] : [view.x.label, view.y.label];
+	if (panel.kind === "curve") {
+		const rows = panel.slice.curve.map((c) => [
+			formatValue(c.at),
+			formatValue(c.value),
+			formatValue(c.low),
+			formatValue(c.high),
+			`${Math.round(c.nearest * 100)}%`
+		]);
+		return {
+			columns: [
+				view.x.label,
+				"Fitted",
+				"Low",
+				"High",
+				"Distance"
+			],
+			rows
+		};
+	}
+	const points = panel.kind === "points" ? panel.points : panel.surface.points;
+	return {
+		columns: [...axes, "Measured"],
+		rows: points.map((p) => [...p.at.map(formatValue), formatValue(p.value)])
+	};
+}
+// src/explorer/view.ts
+/**
+* The DOM view of the response explorer. This module draws SVG with no framework. The core in `model.ts` gives each
+* rule and each number, and this module connects the core to the page.
+*/
+const SVG = "http://www.w3.org/2000/svg";
+/** The most faults that the view lists. */
+const MAX_FAULTS = 20;
+/** The width of a chart with no layout, for example in a test. */
+const FALLBACK_WIDTH = 640;
+const MARGIN = {
+	top: 10,
+	right: 14,
+	bottom: 42,
+	left: 50
+};
+/** The height of a line of text of an axis, in pixels. */
+const CHAR_WIDTH = 6.4;
+let mounts = 0;
+/** This function makes an SVG element with attributes and children. */
+function s(tag, attrs, ...children) {
+	const el = document.createElementNS(SVG, tag);
+	for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, String(value));
+	el.append(...children);
+	return el;
+}
+/** This function gives the plot of a chart. Long level names need room for their turned text. */
+function plotOf(width, height, view) {
+	const turned = turnedLevels(view.x, width - MARGIN.left - MARGIN.right);
+	const longest = Math.max(0, ...view.x.levels.map((level) => formatValue(level).length));
+	const bottom = height - MARGIN.bottom - (turned ? Math.min(60, longest * CHAR_WIDTH * .7) : 0);
+	return {
+		width,
+		height,
+		left: view.y?.kind === "levels" ? Math.min(110, Math.max(MARGIN.left, 12 + Math.max(...view.y.levels.map((level) => formatValue(level).length)) * CHAR_WIDTH)) : MARGIN.left,
+		top: MARGIN.top,
+		right: width - MARGIN.right,
+		bottom
+	};
+}
+/** This function gives true when the levels of an axis do not fit side by side. */
+function turnedLevels(axis, room) {
+	if (axis.kind !== "levels") return false;
+	return (Math.max(0, ...axis.levels.map((level) => formatValue(level).length)) + 1) * CHAR_WIDTH > room / Math.max(1, axis.levels.length);
+}
+/** This function gives the ticks of an axis that fit in a length. */
+function fittedTicks(axis, length) {
+	return axisTicks(axis, Math.max(2, Math.floor(length / 70)));
+}
+/** This function draws the horizontal axis. */
+function xAxis(plot, axis) {
+	const length = plot.right - plot.left;
+	const turned = turnedLevels(axis, length);
+	const ticks = fittedTicks(axis, length).map((tick) => {
+		const x = plot.left + tick.place * length;
+		const label = turned ? s("text", {
+			class: "rx-tick",
+			x,
+			y: plot.bottom + 14,
+			"text-anchor": "end",
+			transform: `rotate(-35 ${x} ${plot.bottom + 14})`
+		}, tick.text) : s("text", {
+			class: "rx-tick",
+			x,
+			y: plot.bottom + 15,
+			"text-anchor": x + tick.text.length * CHAR_WIDTH / 2 > plot.width ? "end" : "middle"
+		}, tick.text);
+		return s("g", {}, s("line", {
+			class: "rx-axis",
+			x1: x,
+			x2: x,
+			y1: plot.bottom,
+			y2: plot.bottom + 4
+		}), label);
+	});
+	const name = s("text", {
+		class: "rx-axis-name",
+		x: (plot.left + plot.right) / 2,
+		y: plot.height - 6,
+		"text-anchor": "middle"
+	}, axis.log ? `${axis.label}, log scale` : axis.label);
+	return s("g", {}, s("line", {
+		class: "rx-axis",
+		x1: plot.left,
+		x2: plot.right,
+		y1: plot.bottom,
+		y2: plot.bottom
+	}), ...ticks, name);
+}
+/** This function draws the value axis with its grid lines. */
+function valueAxis(plot, ticks) {
+	const length = plot.bottom - plot.top;
+	return s("g", {}, ...ticks.map((tick) => {
+		const y = plot.bottom - tick.place * length;
+		return s("g", {}, s("line", {
+			class: "rx-grid",
+			x1: plot.left,
+			x2: plot.right,
+			y1: y,
+			y2: y
+		}), s("text", {
+			class: "rx-tick",
+			x: plot.left - 6,
+			y: y + 4,
+			"text-anchor": "end"
+		}, tick.text));
+	}));
+}
+/** This function draws the vertical axis of a surface. */
+function surfaceAxis(plot, axis) {
+	const length = plot.bottom - plot.top;
+	return s("g", {}, ...axisTicks(axis, Math.max(2, Math.floor(length / 45))).map((tick) => {
+		const y = plot.bottom - tick.place * length;
+		return s("text", {
+			class: "rx-tick",
+			x: plot.left - 6,
+			y: y + 4,
+			"text-anchor": "end"
+		}, tick.text);
+	}));
+}
+/** This function gives the place of a value on the value axis, from 0 to 1. */
+function valuePlace(scale, value) {
+	const [low, high] = scale.range;
+	if (scale.log) return (Math.log10(Math.max(value, low)) - Math.log10(low)) / (Math.log10(high) - Math.log10(low));
+	return (value - low) / (high - low);
+}
+/** This function gives a small steady offset for a dot from its id, so the dots of one level do not all overlap. */
+function jitter(id, room) {
+	let hash = 7;
+	for (const char of id) hash = (hash * 31 + (char.codePointAt(0) ?? 0)) % 1009;
+	return (hash / 1008 - .5) * room;
+}
+/** This function connects the pointer and the arrow keys of a chart to its cursor. */
+function connect(svg, cursor, tell) {
+	let column = -1;
+	let row = 0;
+	const move = (nextColumn, nextRow) => {
+		column = Math.max(0, Math.min(cursor.columns - 1, nextColumn));
+		row = Math.max(0, Math.min(cursor.rows - 1, nextRow));
+		tell(cursor.show(column, row));
+	};
+	svg.addEventListener("pointermove", (event) => {
+		const box = svg.getBoundingClientRect();
+		const [c, r] = cursor.at(event.clientX - box.left, event.clientY - box.top);
+		move(c, r);
+	});
+	svg.addEventListener("keydown", (event) => {
+		const step = {
+			ArrowLeft: [-1, 0],
+			ArrowRight: [1, 0],
+			ArrowUp: [0, -1],
+			ArrowDown: [0, 1]
+		}[event.key];
+		if (step === void 0) return;
+		event.preventDefault();
+		move(column < 0 ? 0 : column + step[0], row + step[1]);
+	});
+}
+/** This function makes the frame of a chart with its text for a screen reader. */
+function chartFrame(plot, label) {
+	return s("svg", {
+		class: "rx-svg",
+		width: plot.width,
+		height: plot.height,
+		viewBox: `0 0 ${plot.width} ${plot.height}`,
+		role: "img",
+		"aria-label": label,
+		tabindex: 0
+	});
+}
+/** This function draws a band with one strength for each place along the axis. */
+function fadedBand(plot, panel, scale, axis, id) {
+	const length = plot.right - plot.left;
+	const height = plot.bottom - plot.top;
+	const curve = panel.slice.curve;
+	const px = (at) => plot.left + placeOn(axis, at) * length;
+	const py = (value) => plot.bottom - valuePlace(scale, value) * height;
+	const stops = curve.map((place) => s("stop", {
+		class: "rx-band-stop",
+		offset: placeOn(axis, place.at),
+		"stop-opacity": fadeOf(place.nearest).toFixed(3)
+	}));
+	const gradient = s("linearGradient", {
+		id,
+		gradientUnits: "userSpaceOnUse",
+		x1: plot.left,
+		x2: plot.right,
+		y1: 0,
+		y2: 0
+	}, ...stops);
+	const upper = curve.map((place) => [px(place.at), py(place.high)]);
+	const lower = curve.map((place) => [px(place.at), py(place.low)]);
+	return [s("defs", {}, gradient), s("path", {
+		class: "rx-band",
+		d: bandPath(upper, lower),
+		fill: `url(#${id})`
+	})];
+}
+/** This function draws a band and a mark at each level of a level axis. */
+function levelMarks(plot, panel, scale, axis) {
+	const length = plot.right - plot.left;
+	const height = plot.bottom - plot.top;
+	const room = Math.min(44, length / Math.max(1, axis.levels.length) * .5);
+	return panel.slice.curve.flatMap((place) => {
+		const x = plot.left + placeOn(axis, place.at) * length;
+		const top = plot.bottom - valuePlace(scale, place.high) * height;
+		const bottom = plot.bottom - valuePlace(scale, place.low) * height;
+		const y = plot.bottom - valuePlace(scale, place.value) * height;
+		return [s("rect", {
+			class: "rx-whisker",
+			x: x - room / 2,
+			y: top,
+			width: room,
+			height: Math.max(1, bottom - top),
+			rx: 4,
+			"fill-opacity": (.3 * fadeOf(place.nearest)).toFixed(3)
+		}), s("line", {
+			class: "rx-line",
+			x1: x - room / 2,
+			x2: x + room / 2,
+			y1: y,
+			y2: y
+		})];
+	});
+}
+/** This function draws a chart with a fitted curve, its band and the measured points. */
+function curveChart(view, panel, width, id, tell) {
+	const plot = plotOf(width, 270, view);
+	const scale = {
+		range: valueRange(view),
+		log: view.log
+	};
+	const length = plot.right - plot.left;
+	const height = plot.bottom - plot.top;
+	const curve = panel.slice.curve;
+	const px = (at) => plot.left + placeOn(view.x, at) * length;
+	const py = (value) => plot.bottom - valuePlace(scale, value) * height;
+	const smooth = view.x.kind === "number";
+	const marks = smooth ? [...fadedBand(plot, panel, scale, view.x, id), s("path", {
+		class: "rx-line",
+		d: linePath(curve.map((place) => [px(place.at), py(place.value)]))
+	})] : levelMarks(plot, panel, scale, view.x);
+	const room = smooth ? 0 : Math.min(30, length / Math.max(1, view.x.levels.length) * .35);
+	const dots = panel.slice.points.map((point) => s("circle", {
+		class: "rx-dot",
+		cx: px(point.at) + jitter(point.id, room),
+		cy: py(point.value),
+		r: 3.5
+	}));
+	const ticks = numberTicks(scale.range[0], scale.range[1], scale.log, Math.max(2, Math.floor(height / 50)));
+	const rule = s("line", {
+		class: "rx-cursor",
+		x1: 0,
+		x2: 0,
+		y1: plot.top,
+		y2: plot.bottom,
+		visibility: "hidden"
+	});
+	const ring = s("circle", {
+		class: "rx-ring",
+		cx: 0,
+		cy: 0,
+		r: 5,
+		visibility: "hidden"
+	});
+	const svg = chartFrame(plot, `${panel.title} ${view.measure.label} over ${view.x.label}.`.trim());
+	svg.append(valueAxis(plot, ticks), ...marks, ...dots, xAxis(plot, view.x), rule, ring);
+	connect(svg, {
+		columns: curve.length,
+		rows: 1,
+		at: (x) => {
+			const distance = (place) => Math.abs(px(place.at) - x);
+			const nearest = curve.reduce((best, place) => distance(place) < distance(best) ? place : best);
+			return [curve.indexOf(nearest), 0];
+		},
+		show: (column) => {
+			const place = curve[column];
+			for (const [name, value] of [["x1", px(place.at)], ["x2", px(place.at)]]) rule.setAttribute(name, String(value));
+			ring.setAttribute("cx", String(px(place.at)));
+			ring.setAttribute("cy", String(py(place.value)));
+			rule.setAttribute("visibility", "visible");
+			ring.setAttribute("visibility", "visible");
+			return curveText(view.x, place);
+		}
+	}, tell);
+	return svg;
+}
+/** This function draws a chart of a surface, or the separate cells of a table. */
+function surfaceChart(view, panel, width, tell) {
+	const axisY = view.y;
+	const plot = plotOf(width, Math.min(380, Math.max(280, width * .72)), view);
+	const { x, y, cells } = panel.surface;
+	const length = plot.right - plot.left;
+	const height = plot.bottom - plot.top;
+	const xEdges = cellEdges(x.map((value) => placeOn(view.x, value)));
+	const yEdges = cellEdges(y.map((value) => placeOn(axisY, value)));
+	const range = heatRange(view);
+	const gap = panel.cells ? 2 : 0;
+	const cellMarks = cells.flatMap((row, j) => row.flatMap((band, i) => {
+		const left = plot.left + xEdges[i] * length;
+		const right = plot.left + xEdges[i + 1] * length;
+		const lower = plot.bottom - yEdges[j] * height;
+		const upper = plot.bottom - yEdges[j + 1] * height;
+		const box = {
+			x: left + gap / 2,
+			y: upper + gap / 2,
+			width: Math.max(.5, right - left - gap + (gap === 0 ? .6 : 0)),
+			height: Math.max(.5, lower - upper - gap + (gap === 0 ? .6 : 0))
+		};
+		const step = heatStep(band.value, range, view.log);
+		const parts = [s("rect", {
+			...box,
+			class: `rx-h${step}`
+		})];
+		const veil = veilOf(band.nearest);
+		if (veil > .02) parts.push(s("rect", {
+			...box,
+			class: "rx-veil",
+			"fill-opacity": veil.toFixed(3)
+		}));
+		if (panel.cells && box.width > 34 && box.height > 18) parts.push(s("text", {
+			class: `rx-cell-text ${step > 9 / 2 ? "rx-on-dark" : "rx-on-light"}`,
+			x: box.x + box.width / 2,
+			y: box.y + box.height / 2 + 4,
+			"text-anchor": "middle"
+		}, formatValue(band.value)));
+		return parts;
+	}));
+	const dots = panel.surface.points.map((point) => s("circle", {
+		class: "rx-dot rx-dot-heat",
+		cx: plot.left + placeOn(view.x, point.at[0]) * length + jitter(point.id, 6),
+		cy: plot.bottom - placeOn(axisY, point.at[1]) * height + jitter(`${point.id}y`, 6),
+		r: 2.5
+	}));
+	const outline = s("rect", {
+		class: "rx-cell-cursor",
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0,
+		visibility: "hidden"
+	});
+	const svg = chartFrame(plot, `${panel.title} ${view.measure.label} over ${view.x.label} and ${axisY.label}.`.trim());
+	svg.append(...cellMarks, ...dots, surfaceAxis(plot, axisY), xAxis(plot, view.x), outline);
+	const find = (edges, share) => {
+		const index = edges.findIndex((edge) => edge > share);
+		return Math.max(0, (index < 0 ? edges.length : index) - 1);
+	};
+	connect(svg, {
+		columns: x.length,
+		rows: y.length,
+		at: (px, py) => [find(xEdges, (px - plot.left) / length), y.length - 1 - find(yEdges, (plot.bottom - py) / height)],
+		show: (column, row) => {
+			const j = y.length - 1 - row;
+			outline.setAttribute("x", String(plot.left + xEdges[column] * length));
+			outline.setAttribute("width", String((xEdges[column + 1] - xEdges[column]) * length));
+			outline.setAttribute("y", String(plot.bottom - yEdges[j + 1] * height));
+			outline.setAttribute("height", String((yEdges[j + 1] - yEdges[j]) * height));
+			outline.setAttribute("visibility", "visible");
+			return cellText(view.x, axisY, x[column], y[j], cells[j]?.[column]);
+		}
+	}, tell);
+	return svg;
+}
+/** This function draws the measured points of a measure with no model. */
+function pointsChart(view, panel, width) {
+	const plot = plotOf(width, 270, view);
+	const length = plot.right - plot.left;
+	const height = plot.bottom - plot.top;
+	const svg = chartFrame(plot, `${panel.title} ${view.measure.label}: ${panel.points.length} measured points.`.trim());
+	if (view.y === null) {
+		const scale = {
+			range: valueRange(view),
+			log: view.log
+		};
+		const room = view.x.kind === "levels" ? Math.min(30, length / Math.max(1, view.x.levels.length) * .35) : 0;
+		const dots = panel.points.map((point) => s("circle", {
+			class: "rx-dot",
+			cx: plot.left + placeOn(view.x, point.at[0]) * length + jitter(point.id, room),
+			cy: plot.bottom - valuePlace(scale, point.value) * height,
+			r: 3.5
+		}));
+		const ticks = numberTicks(scale.range[0], scale.range[1], scale.log, Math.max(2, Math.floor(height / 50)));
+		svg.append(valueAxis(plot, ticks), ...dots, xAxis(plot, view.x));
+		return svg;
+	}
+	const axisY = view.y;
+	const range = heatRange(view);
+	const dots = panel.points.map((point) => s("circle", {
+		class: `rx-h${heatStep(point.value, range, view.log)} rx-ring-dot`,
+		cx: plot.left + placeOn(view.x, point.at[0]) * length + jitter(point.id, 8),
+		cy: plot.bottom - placeOn(axisY, point.at[1]) * height + jitter(`${point.id}y`, 8),
+		r: 5
+	}));
+	svg.append(...dots, surfaceAxis(plot, axisY), xAxis(plot, view.x));
+	return svg;
+}
+/** This function gives the number of measured points of a panel. */
+function pointCount(panel) {
+	if (panel.kind === "curve") return panel.slice.points.length;
+	return panel.kind === "surface" ? panel.surface.points.length : panel.points.length;
+}
+/** This function gives the sentence about the measured points of a panel. */
+function pointsText(panel) {
+	const count = pointCount(panel);
+	if (count === 0) return "No measured point has these held values.";
+	return count === 1 ? "1 measured point has these held values." : `${count} measured points have these held values.`;
+}
+/** This function draws one panel. */
+function panelChart(view, panel, width, id, tell) {
+	if (panel.kind === "curve") return curveChart(view, panel, width, id, tell);
+	return panel.kind === "surface" ? surfaceChart(view, panel, width, tell) : pointsChart(view, panel, width);
+}
+/** This function makes the legend of a view. */
+function legendOf(view) {
+	const item = (mark, text) => h("span", { class: "rx-key" }, mark, text);
+	const mark = (name) => h("i", {
+		class: `rx-mark ${name}`,
+		"aria-hidden": "true"
+	});
+	const parts = [];
+	const panel = view.panels[0];
+	const surface = view.y !== null && panel?.kind !== "curve";
+	if (panel?.kind === "curve") parts.push(item(mark("rx-mark-line"), "fitted value"), item(mark("rx-mark-band"), "band: one held-out error each side. It fades away from the data."));
+	if (surface) {
+		const [low, high] = heatRange(view);
+		const ramp = h("i", {
+			class: "rx-ramp",
+			"aria-hidden": "true"
+		}, ...Array.from({ length: 9 }, (_, i) => h("b", { class: `rx-s${i}` })));
+		parts.push(h("span", { class: "rx-key" }, formatValue(low), ramp, formatValue(high)));
+		if (panel?.kind === "surface") parts.push(item(mark("rx-mark-veil"), "gray veil: far from the data"));
+	}
+	if (panel !== void 0) parts.push(item(mark("rx-mark-dot"), "measured point"));
+	return h("p", { class: "rx-legend" }, ...parts);
+}
+/** This function makes a table of numbers. */
+function tableOf(view, panel) {
+	const { columns, rows } = numberTable(view, panel);
+	const head = h("tr", {}, ...columns.map((column) => h("th", { scope: "col" }, column)));
+	const body = rows.map((row) => h("tr", {}, ...row.map((cell) => h("td", {}, cell))));
+	return h("table", { class: "rx-table" }, ...panel.title === "" ? [] : [h("caption", {}, panel.title)], h("thead", {}, head), h("tbody", {}, ...body));
+}
+/** This function makes a select of dimensions. The first option is the value `none`, if the control has one. */
+function dimensionSelect(label, key, choices, value, none, change) {
+	const options = choices.map((choice) => {
+		const text = choice.disabled ? `${choice.label}: ${choice.reason}` : choice.label;
+		return h("option", {
+			value: choice.id,
+			disabled: choice.disabled,
+			selected: choice.id === value
+		}, text);
+	});
+	const select = h("select", { "data-key": key }, ...none === null ? [] : [h("option", {
+		value: "",
+		selected: value === null
+	}, none)], ...options);
+	select.addEventListener("change", () => change(select.value === "" ? null : select.value));
+	return h("label", { class: "rx-field" }, h("span", {}, label), select);
+}
+/** This function makes a group of level buttons. They are radio inputs, so the keyboard works with no script. */
+function levelGroup(label, key, name, options, note) {
+	const chips = options.map((option, i) => {
+		const input = h("input", {
+			class: "rx-radio",
+			type: "radio",
+			name,
+			checked: option.checked,
+			disabled: option.disabled,
+			"data-key": `${key}:${i}`
+		});
+		input.addEventListener("change", option.choose);
+		return h("label", {
+			class: "rx-chip",
+			title: option.reason === "" ? void 0 : option.reason
+		}, input, h("span", {}, option.text));
+	});
+	const legend = h("legend", { class: "rx-name" }, label);
+	return h("fieldset", { class: "rx-hold" }, legend, h("div", { class: "rx-chips" }, ...chips), note === "" ? null : h("p", { class: "rx-note" }, note));
+}
+/** This function makes a slider over the values of a held dimension. */
+function stopSlider(control, key, change) {
+	const values = control.options.map((option) => option.value);
+	const index = Math.max(0, values.indexOf(control.value));
+	const output = h("output", { class: "rx-value" }, formatValue(control.value));
+	const input = h("input", {
+		class: "rx-slider",
+		type: "range",
+		min: 0,
+		max: values.length - 1,
+		step: 1,
+		value: index,
+		disabled: !control.applies,
+		"data-key": key,
+		"aria-label": control.label,
+		"aria-valuetext": formatValue(control.value)
+	});
+	input.addEventListener("input", () => {
+		const value = values[Number(input.value)];
+		output.textContent = formatValue(value);
+		input.setAttribute("aria-valuetext", formatValue(value));
+		change(value);
+	});
+	const head = h("div", { class: "rx-slider-head" }, h("span", { class: "rx-name" }, control.label), output);
+	return h("div", { class: "rx-hold" }, head, input, control.note === "" ? null : h("p", { class: "rx-note" }, control.note));
+}
+/** This function shows each fault of a bad record, with its path. */
+function faultView(faults) {
+	const items = faults.slice(0, MAX_FAULTS).map((fault) => h("li", {}, h("code", {}, fault.path === "" ? "(the record)" : fault.path), ` ${fault.message}`));
+	const more = faults.length > MAX_FAULTS ? h("p", {}, `The list shows ${MAX_FAULTS} of ${faults.length} faults.`) : null;
+	const title = faults.length === 1 ? "This record has 1 fault." : `This record has ${faults.length} faults.`;
+	return h("div", {
+		class: "rx-faults",
+		role: "alert"
+	}, h("p", { class: "rx-faults-title" }, title), h("ul", {}, ...items), more);
+}
+/**
+* This function shows a record of the format `response-records/1` in a host element. It reads the record only with
+* `parseResponseRecord`. A bad record shows its faults with their paths, and the function does not throw.
+*
+* @param host - The element of the explorer. The function replaces its children.
+* @param recordJson - The record as JSON text, or as parsed data.
+* @param options - The first state, the time of a surface and the clock.
+*/
+function mountExplorer(host, recordJson, options = {}) {
+	const parsed = openRecord(recordJson);
+	if (!parsed.ok) {
+		host.replaceChildren(h("div", { class: "response-explorer" }, faultView(parsed.faults)));
+		return {
+			state: () => null,
+			destroy: () => host.replaceChildren()
+		};
+	}
+	return mountRecord(host, parsed.record, options);
+}
+/** This function connects a good record to the DOM. */
+function mountRecord(host, record, options) {
+	const { budgetMs = 50, now = () => performance.now() } = options;
+	const mount = ++mounts;
+	let state = settle(record, options.initial);
+	let cap = 33;
+	let frame = 0;
+	let drawnWidth = 0;
+	let view;
+	const controls = h("div", { class: "rx-controls" });
+	const panels = h("div", { class: "rx-panels" });
+	const error = h("p", { class: "rx-error" });
+	const model = h("p", { class: "rx-note" });
+	const legend = h("div", { class: "rx-legend-box" });
+	const readout = h("p", {
+		class: "rx-readout",
+		"aria-live": "polite"
+	});
+	const numbers = h("div", { class: "rx-numbers-body" });
+	const details = h("details", { class: "rx-numbers" }, h("summary", {}, "Show the numbers"), numbers);
+	const chart = h("div", { class: "rx-chart" }, error, panels, legend, readout, model, details);
+	const root = h("div", { class: "response-explorer" }, controls, chart);
+	const tell = (text) => {
+		readout.textContent = text;
+	};
+	/** This function fills the table when the visitor opens it, so a closed table costs no time. */
+	const drawNumbers = () => {
+		numbers.replaceChildren(...details.open && view !== void 0 ? view.panels.map((panel) => h("div", { class: "rx-table-box scroll-cue" }, tableOf(view, panel))) : []);
+	};
+	/** This function draws the charts of the last view at the width of the host. */
+	const drawCharts = () => {
+		const current = view;
+		if (current === void 0) return;
+		const single = current.panels.length === 1;
+		const available = panels.clientWidth > 0 ? panels.clientWidth : FALLBACK_WIDTH;
+		const columns = single ? 1 : Math.min(current.panels.length, Math.max(1, Math.floor((available + 12) / 272)));
+		const width = Math.floor((available - (columns - 1) * 12) / columns);
+		drawnWidth = available;
+		panels.replaceChildren(...current.panels.map((panel, i) => {
+			const title = panel.title === "" ? null : h("figcaption", { class: "rx-panel-title" }, panel.title);
+			const chartBox = panelChart(current, panel, width, `rx-band-${mount}-${i}`, tell);
+			return h("figure", { class: "rx-panel" }, title, chartBox, h("p", { class: "rx-note" }, pointsText(panel)));
+		}));
+	};
+	/** This function asks the core for a view, and it draws the view. */
+	const drawView = () => {
+		const next = viewOf(record, state, {
+			stepsCap: cap,
+			budgetMs,
+			now
+		});
+		view = next;
+		cap = next.nextCap;
+		if (next.problem !== "") error.textContent = `The record refused this view: ${next.problem}`;
+		else {
+			const head = next.error === null ? null : h("strong", {}, "Held-out error. ");
+			error.replaceChildren(...head === null ? [] : [head], next.errorText);
+		}
+		model.textContent = [next.modelText, next.gridText].filter((text) => text !== "").join(" ");
+		legend.replaceChildren(legendOf(next));
+		tell("Move over a chart, or focus it and use the arrow keys.");
+		drawCharts();
+		drawNumbers();
+	};
+	/** This function draws at the next frame. A slider gives many events in one frame. */
+	const later = () => {
+		if (frame !== 0) return;
+		frame = requestAnimationFrame(() => {
+			frame = 0;
+			drawView();
+		});
+	};
+	/** This function makes the controls of the state again, and it keeps the focus on the same control. */
+	const drawControls = () => {
+		const focused = document.activeElement instanceof HTMLElement ? document.activeElement.dataset["key"] : void 0;
+		const update = (next) => {
+			state = next;
+			drawControls();
+			drawView();
+		};
+		const measures = levelGroup("Measure", "measure", `rx-measure-${mount}`, record.measures.map((m) => ({
+			text: m.label,
+			checked: m.id === state.measure,
+			disabled: false,
+			reason: "",
+			choose: () => update(setMeasure(record, state, m.id))
+		})), "");
+		const axes = h("div", { class: "rx-axes" }, dimensionSelect("Across", "x", axisChoices(record, state, "x"), state.x, null, (id) => update(setAxis(record, state, "x", id))), dimensionSelect("Up", "y", axisChoices(record, state, "y"), state.y, "None (a curve)", (id) => update(setAxis(record, state, "y", id))), dimensionSelect("Panels", "facet", facetChoices(record, state), state.facet, "One panel", (id) => update(setFacet(record, state, id))));
+		const holds = holdControls(record, state).map((control) => {
+			if (control.kind === "stops") return stopSlider(control, `hold:${control.id}`, (value) => {
+				state = setHold(record, state, control.id, value);
+				later();
+			});
+			const levels = control.options.map((option) => ({
+				text: option.text,
+				checked: option.value === control.value,
+				disabled: option.disabled,
+				reason: option.reason,
+				choose: () => update(setHold(record, state, control.id, option.value))
+			}));
+			return levelGroup(control.label, `hold:${control.id}`, `rx-${mount}-${control.id}`, levels, control.note);
+		});
+		const held = holds.length === 0 ? [] : [h("p", { class: "rx-section" }, "Held values"), ...holds];
+		controls.replaceChildren(measures, axes, ...held);
+		if (focused !== void 0) [...controls.querySelectorAll("[data-key]")].find((el) => el.dataset["key"] === focused)?.focus();
+	};
+	details.addEventListener("toggle", drawNumbers);
+	host.replaceChildren(root);
+	drawControls();
+	drawView();
+	const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(() => {
+		if (panels.clientWidth > 0 && Math.abs(panels.clientWidth - drawnWidth) > 1) drawCharts();
+	});
+	observer?.observe(panels);
+	return {
+		state: () => state,
+		destroy: () => {
+			observer?.disconnect();
+			if (frame !== 0) cancelAnimationFrame(frame);
+			host.replaceChildren();
+		}
+	};
+}
+export { MAX_PANELS, MAX_STEPS, MIN_STEPS, READ_BUDGET, SURFACE_BUDGET_MS, axisChoices, facetChoices, holdControls, mountExplorer, nextStepsCap, numberTable, openRecord, planSteps, setAxis, setFacet, setHold, setMeasure, settle, viewOf };
+
+//# sourceMappingURL=index.js.map