@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/structure/MareyChart.js

@@ -0,0 +1,270 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MareyTimetable } from "./MareyTimetable.js";
+import { StructureText } from "./StructureText.js";
+import { MareyAxis, MareySpacing } from "./structureEnums.js";
+import { extent, line, max, scaleLinear, scaleUtc, symbol, symbolCircle, symbolSquare, utcFormat } from "d3";
+// src/charts/structure/MareyChart.ts
+var MINUTE = 6e4;
+var CLOCK = utcFormat("%H:%M");
+var DAY_CLOCK = utcFormat("%b %-d %H:%M");
+var MEET = symbol(symbolCircle, 64)();
+var PASS = symbol(symbolSquare, 56)();
+/** Marey's train graph: stations against time, one slanted line per trip, so slope reads as speed and crossings as meets. */
+var MareyChart = class MareyChart extends Chart2D {
+	static meta = {
+		id: "marey-train-graph",
+		name: "Marey train graph",
+		family: ChartFamily.Temporal,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots a timetable as stations against time with one slanted line per trip, so slope shows speed and flats show dwell.",
+		tags: [
+			"timetable",
+			"railway",
+			"transit",
+			"ibry"
+		],
+		sample: (seed) => MareyChart.line(seed),
+		variants: {
+			axis: [MareyAxis.TimeAcross, MareyAxis.TimeDown],
+			spacing: [MareySpacing.Distance, MareySpacing.Even],
+			stops: [true, false],
+			encounters: [false, true],
+			tripLabels: [false, true]
+		}
+	};
+	/** A morning on an eight-station line: locals call everywhere, every third train runs express, trains are numbered even one way and odd the other. */
+	static line(seed) {
+		const legs = SampleData.categories(seed, 12, 1).slice(4);
+		const wobble = SampleData.timeSeries(seed, 8, 2);
+		let reach = 0;
+		const stations = legs.map((row, i) => {
+			if (i) reach += Math.round(6 + +row.value * .2);
+			return {
+				station: String(row.category),
+				distance: reach
+			};
+		});
+		const base = Date.UTC(2026, 0, 5, 5, 30);
+		const rows = [];
+		for (let direction = 0; direction < 2; direction++) for (let i = 0; i < 8; i++) {
+			const express = i % 3 === 1;
+			const route = direction ? [...stations].reverse() : stations;
+			let clock = base + (i * 40 + direction * 18 + +wobble[direction * 8 + i].value % 6) * MINUTE;
+			route.forEach((stop, s) => {
+				if (s) clock += Math.abs(stop.distance - route[s - 1].distance) * (express ? .5 : .8) * MINUTE;
+				const terminal = s === 0 || s === route.length - 1;
+				if (express && !terminal && s % 3) return;
+				const leaves = clock + (terminal ? 0 : express ? 1 : 2) * MINUTE;
+				rows.push({
+					trip: String(100 + i * 2 + direction),
+					station: stop.station,
+					time: new Date(clock),
+					depart: new Date(leaves),
+					distance: stop.distance,
+					service: express ? "Express" : "Local"
+				});
+				clock = leaves;
+			});
+		}
+		return rows;
+	}
+	defaults() {
+		return {
+			trip: "trip",
+			station: "station",
+			time: "time",
+			depart: "depart",
+			distance: "distance",
+			service: "service",
+			axis: MareyAxis.TimeAcross,
+			spacing: MareySpacing.Distance,
+			stops: true,
+			encounters: false,
+			tripLabels: false
+		};
+	}
+	get fields() {
+		const { trip, station, time, depart, distance, service } = this.options;
+		return {
+			trip,
+			station,
+			time,
+			depart,
+			distance,
+			service
+		};
+	}
+	longestStation() {
+		const rows = Array.isArray(this.options.data) ? this.options.data : [];
+		return max(rows, (row) => String(row[this.options.station] ?? "").length) ?? 0;
+	}
+	plotMargin() {
+		const label = Math.min(96, this.longestStation() * 6.2 + 8);
+		return this.options.axis === MareyAxis.TimeDown ? {
+			top: Math.min(64, label * .72 + 12),
+			right: 22,
+			bottom: 8,
+			left: 42
+		} : {
+			top: 22,
+			right: 12,
+			bottom: 8,
+			left: label
+		};
+	}
+	draw(ctx) {
+		const { axis, spacing, stops, encounters, tripLabels } = this.options;
+		const rows = Array.isArray(this.options.data) ? this.options.data : [];
+		const table = new MareyTimetable(rows, this.fields, spacing);
+		const across = axis === MareyAxis.TimeAcross;
+		const timeLength = across ? ctx.plot.width : ctx.plot.height;
+		const placeLength = across ? ctx.plot.height : ctx.plot.width;
+		const times = table.trips.flatMap((trip) => MareyTimetable.vertices(trip).map((point) => point.time));
+		const [start, end] = extent(times);
+		const [nearest, farthest] = extent(table.stations, (station) => station.position);
+		const time = scaleUtc([new Date(start ?? 0), new Date(end === start ? (end ?? 0) + 36e5 : end ?? 1)], [6, timeLength - 6]);
+		const place = scaleLinear([nearest ?? 0, farthest === nearest ? (farthest ?? 0) + 1 : farthest ?? 1], [6, placeLength - 6]);
+		const pointX = (t, p) => across ? time(t) : place(p);
+		const pointY = (t, p) => across ? place(p) : time(t);
+		this.drawFrame(ctx, table.stations, time, place, across, table.trips.length > 0);
+		const path = line((d) => pointX(d.time, d.position), (d) => pointY(d.time, d.position));
+		const lines = ctx.marks("trips", "path", table.trips, (d) => d.id).attr("fill", "none").attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke", (d) => ctx.palette.color(d.service));
+		ctx.set(lines, { d: (d) => path(MareyTimetable.vertices(d)) });
+		ctx.drawOn(lines);
+		ctx.hover(lines, (d) => this.tripTip(d, ctx));
+		const dots = stops ? table.trips.flatMap((trip) => trip.stops.map((stop, i) => ({
+			key: `${trip.id}|${i}`,
+			trip,
+			stop
+		}))) : [];
+		const circles = ctx.marks("stops", "circle", dots, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.trip.service)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(circles, {
+			cx: (d) => pointX(d.stop.arrive, d.stop.station.position),
+			cy: (d) => pointY(d.stop.arrive, d.stop.station.position),
+			r: 4
+		}, { r: 0 });
+		ctx.hover(circles, (d) => ({
+			title: `${d.trip.id} at ${d.stop.station.name}`,
+			rows: [
+				["Arrives", CLOCK(new Date(d.stop.arrive))],
+				["Departs", CLOCK(new Date(d.stop.depart))],
+				["Dwell", `${Math.round((d.stop.depart - d.stop.arrive) / MINUTE)} min`]
+			]
+		}));
+		const pairs = encounters ? table.encounters() : [];
+		const marks = ctx.marks("encounters", "path", pairs, (d) => d.key).attr("fill", ctx.theme.surface).attr("stroke", ctx.theme.ink).attr("stroke-width", 2);
+		ctx.set(marks, {
+			d: (d) => d.opposing ? MEET : PASS,
+			transform: (d) => `translate(${pointX(d.time, d.position)},${pointY(d.time, d.position)}) rotate(${d.opposing ? 0 : 45})`
+		});
+		ctx.hover(marks, (d) => ({
+			title: d.opposing ? "Meet" : "Overtake",
+			rows: [["Trains", `${d.first} / ${d.second}`], ["Time", CLOCK(new Date(d.time))]]
+		}));
+		const tags = ctx.text(ctx.marks("trip-labels", "text", tripLabels ? this.tripTags(table.trips, pointX, pointY, ctx) : [], (d) => d.key), 10, "ink").attr("pointer-events", "none").attr("stroke", ctx.theme.surface).attr("stroke-width", 3).attr("paint-order", "stroke").text((d) => d.text);
+		ctx.set(tags, { transform: (d) => `translate(${d.x},${d.y}) rotate(${d.angle})` });
+	}
+	drawFrame(ctx, stations, time, place, across, filled) {
+		const { width, height } = ctx.plot;
+		const timeLength = across ? width : height;
+		const ticks = filled ? time.ticks(Math.max(2, Math.floor(timeLength / (across ? 64 : 34)))) : [];
+		const [from, to] = time.domain();
+		const clock = +to - +from > 1296e5 ? DAY_CLOCK : CLOCK;
+		const hours = ctx.marks("time-grid", "line", ticks, (d) => +d).attr("stroke", ctx.theme.grid).attr("stroke-width", 1);
+		ctx.set(hours, across ? {
+			x1: (d) => time(d),
+			x2: (d) => time(d),
+			y1: 0,
+			y2: height
+		} : {
+			x1: 0,
+			x2: width,
+			y1: (d) => time(d),
+			y2: (d) => time(d)
+		});
+		const rails = ctx.marks("station-grid", "line", stations, (d) => d.name).attr("stroke", ctx.theme.axis).attr("stroke-width", 1);
+		ctx.set(rails, across ? {
+			x1: 0,
+			x2: width,
+			y1: (d) => place(d.position),
+			y2: (d) => place(d.position)
+		} : {
+			x1: (d) => place(d.position),
+			x2: (d) => place(d.position),
+			y1: 0,
+			y2: height
+		});
+		const final = stations.length ? place(stations.at(-1).position) : 0;
+		let last = -Infinity;
+		const spaced = stations.filter((station, i) => {
+			const at = place(station.position);
+			if (at - last < 12 || i < stations.length - 1 && final - at < 12) return false;
+			last = at;
+			return true;
+		});
+		const margin = this.plotMargin();
+		const names = ctx.text(ctx.marks("station-labels", "text", spaced, (d) => d.name), 11, "secondary").attr("text-anchor", across ? "end" : "start").text((d) => StructureText.fit(d.name, across ? margin.left - 8 : (margin.top - 8) / .72));
+		ctx.set(names, { transform: (d) => across ? `translate(-6,${place(d.position) + 4})` : `translate(${place(d.position) - 3},-6) rotate(-45)` });
+		const labels = ctx.text(ctx.marks("time-labels", "text", ticks, (d) => +d), 11, "secondary").attr("text-anchor", across ? "middle" : "end").text((d) => clock(d));
+		ctx.set(labels, across ? {
+			x: (d) => Math.max(14, Math.min(width - 14, time(d))),
+			y: -7
+		} : {
+			x: -6,
+			y: (d) => time(d) + 4
+		});
+	}
+	tripTags(trips, x, y, ctx) {
+		const placed = [];
+		return trips.flatMap((trip) => {
+			const points = MareyTimetable.vertices(trip);
+			const first = points[0], next = points.find((point) => point.position !== first.position);
+			if (!next) return [];
+			const x0 = x(first.time, first.position), y0 = y(first.time, first.position), x1 = x(next.time, next.position), y1 = y(next.time, next.position);
+			const length = Math.hypot(x1 - x0, y1 - y0) || 1;
+			const flip = x1 < x0;
+			const ux = (x1 - x0) / length * (flip ? -1 : 1), uy = (y1 - y0) / length * (flip ? -1 : 1);
+			const span = StructureText.width(trip.id, 10) + 12;
+			const along = flip ? -span : 12;
+			const startX = x0 + ux * along + uy * 4, startY = y0 + uy * along - ux * 4;
+			const endX = startX + ux * span, endY = startY + uy * span;
+			if (!([startX, endX].every((v) => v >= 0 && v <= ctx.plot.width) && [
+				startY - 8,
+				endY - 8,
+				startY,
+				endY
+			].every((v) => v >= 0 && v <= ctx.plot.height)) || placed.some((at) => Math.hypot(at.x - startX, at.y - startY) < 22)) return [];
+			placed.push({
+				x: startX,
+				y: startY
+			});
+			return [{
+				key: trip.id,
+				text: trip.id,
+				x: startX,
+				y: startY,
+				angle: Math.atan2(uy, ux) * 180 / Math.PI
+			}];
+		});
+	}
+	tripTip(trip, ctx) {
+		const first = trip.stops[0], last = trip.stops.at(-1);
+		const minutes = (last.arrive - first.depart) / MINUTE;
+		const speed = first.station.distance !== null && last.station.distance !== null && minutes > 0 ? `${Math.round(Math.abs(last.station.distance - first.station.distance) / (minutes / 60))} km/h` : null;
+		return {
+			title: `${trip.id}: ${first.station.name} to ${last.station.name}`,
+			color: ctx.palette.color(trip.service),
+			rows: [
+				["Service", trip.service],
+				["Departs", CLOCK(new Date(first.depart))],
+				["Arrives", CLOCK(new Date(last.arrive))],
+				["Calls", trip.stops.length],
+				...speed ? [["Average", speed]] : []
+			]
+		};
+	}
+};
+export { MareyChart };

package/dist/charts/structure/MareyTimetable.js

@@ -0,0 +1,116 @@
+import { TimeRows } from "../timeline/TimeRows.js";
+import { MareySpacing } from "./structureEnums.js";
+import { ascending } from "d3";
+// src/charts/structure/MareyTimetable.ts
+var CLOCK = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/;
+/** Timetables state clock times, and GTFS counts past 24:00 for trips that run after midnight. Those land on a single UTC day. */
+var moment = (cell) => {
+	const clock = typeof cell === "string" ? CLOCK.exec(cell.trim()) : null;
+	return clock ? new Date(Date.UTC(1970, 0, 1, +clock[1], +clock[2], +(clock[3] ?? 0))) : TimeRows.date(cell);
+};
+/** Parses stop rows into stations and trips. Stations follow route order, by distance when every station has one. */
+var MareyTimetable = class MareyTimetable {
+	stations;
+	trips;
+	constructor(rows, fields, spacing) {
+		const usable = rows.flatMap((row) => {
+			const trip = row[fields.trip], station = row[fields.station], arrive = moment(row[fields.time]) ?? moment(row[fields.depart]);
+			return trip === null || trip === void 0 || station === null || station === void 0 || station === "" || !arrive ? [] : [{
+				row,
+				trip: String(trip),
+				station: String(station),
+				arrive: +arrive
+			}];
+		});
+		const known = /* @__PURE__ */ new Map();
+		for (const { station, row } of usable) if (known.get(station) == null) known.set(station, TimeRows.number(row[fields.distance]));
+		const groups = /* @__PURE__ */ new Map();
+		for (const stop of usable) groups.set(stop.trip, [...groups.get(stop.trip) ?? [], stop]);
+		const measured = [...known.values()].every((value) => value !== null) && new Set(known.values()).size > 1;
+		const names = measured ? [...known.keys()].sort((a, b) => known.get(a) - known.get(b)) : MareyTimetable.#routeOrder(groups);
+		this.stations = names.map((name, index) => ({
+			name,
+			position: measured && spacing === MareySpacing.Distance ? known.get(name) : index,
+			distance: known.get(name) ?? null
+		}));
+		const lookup = new Map(this.stations.map((station) => [station.name, station]));
+		this.trips = [...groups].map(([id, stops]) => {
+			const seen = /* @__PURE__ */ new Set();
+			const ordered = stops.filter((stop) => {
+				const key = `${stop.station}|${stop.arrive}`;
+				return !seen.has(key) && seen.add(key);
+			}).sort((a, b) => a.arrive - b.arrive).map((stop) => ({
+				station: lookup.get(stop.station),
+				arrive: stop.arrive,
+				depart: Math.max(stop.arrive, +(moment(stop.row[fields.depart]) ?? stop.arrive))
+			}));
+			const service = stops[0].row[fields.service];
+			return {
+				id,
+				service: service === null || service === void 0 || service === "" ? "Train" : String(service),
+				stops: ordered,
+				down: ordered.at(-1).station.position >= ordered[0].station.position
+			};
+		}).sort((a, b) => ascending(a.stops[0].arrive, b.stops[0].arrive));
+	}
+	/** Longest trip first sets the order; stations only shorter trips serve are slotted in after their predecessor. */
+	static #routeOrder(groups) {
+		const trips = [...groups.values()].map((stops) => [...stops].sort((a, b) => a.arrive - b.arrive).map((stop) => stop.station)).sort((a, b) => b.length - a.length);
+		const order = [...new Set(trips[0] ?? [])];
+		for (const trip of trips.slice(1)) {
+			const direct = trip.filter((name) => order.includes(name));
+			const walk = direct.length > 1 && order.indexOf(direct[0]) > order.indexOf(direct.at(-1)) ? [...trip].reverse() : trip;
+			walk.forEach((name, i) => {
+				if (order.includes(name)) return;
+				const before = walk[i - 1];
+				order.splice(before === void 0 ? order.length : order.indexOf(before) + 1, 0, name);
+			});
+		}
+		return order;
+	}
+	static vertices(trip) {
+		return trip.stops.flatMap((stop) => stop.depart > stop.arrive ? [{
+			time: stop.arrive,
+			position: stop.station.position
+		}, {
+			time: stop.depart,
+			position: stop.station.position
+		}] : [{
+			time: stop.arrive,
+			position: stop.station.position
+		}]);
+	}
+	/** Every point where two trips occupy the same place at once: meets when they run opposite ways, overtakes otherwise. */
+	encounters() {
+		const found = /* @__PURE__ */ new Map();
+		const paths = this.trips.map((trip) => ({
+			trip,
+			points: MareyTimetable.vertices(trip)
+		}));
+		paths.forEach(({ trip: a, points: pa }, i) => {
+			for (const { trip: b, points: pb } of paths.slice(i + 1)) {
+				if (pa.at(-1).time < pb[0].time || pb.at(-1).time < pa[0].time) continue;
+				for (let s = 1; s < pa.length; s++) for (let u = 1; u < pb.length; u++) {
+					const a0 = pa[s - 1], a1 = pa[s], b0 = pb[u - 1], b1 = pb[u];
+					const from = Math.max(a0.time, b0.time), to = Math.min(a1.time, b1.time);
+					if (from >= to) continue;
+					const at = (p, q, t) => p.position + (q.position - p.position) * (t - p.time) / (q.time - p.time);
+					const gapFrom = at(a0, a1, from) - at(b0, b1, from), gapTo = at(a0, a1, to) - at(b0, b1, to);
+					if (gapFrom * gapTo > 0 || gapFrom === gapTo) continue;
+					const time = from + (to - from) * gapFrom / (gapFrom - gapTo), position = at(a0, a1, time);
+					const key = `${a.id}|${b.id}|${Math.round(time / 6e4)}`;
+					found.set(key, {
+						key,
+						first: a.id,
+						second: b.id,
+						time,
+						position,
+						opposing: a.down !== b.down
+					});
+				}
+			}
+		});
+		return [...found.values()];
+	}
+};
+export { MareyTimetable };

package/dist/charts/structure/StructureText.js

@@ -0,0 +1,14 @@
+// src/charts/structure/StructureText.ts
+/** Width estimates for the structure charts, which fit text to boxes instead of measuring the DOM. */
+var StructureText = class {
+	static width(text, size = 11) {
+		return text.length * size * .56;
+	}
+	/** Cuts `text` to `room` pixels at font `size`, marking the cut with an ellipsis. */
+	static fit(text, room, size = 11) {
+		const chars = Math.floor(room / (size * .56));
+		if (text.length <= chars) return text;
+		return chars < 2 ? "" : `${text.slice(0, chars - 1)}…`;
+	}
+};
+export { StructureText };

package/dist/charts/structure/TournamentBracket.js

@@ -0,0 +1,255 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { StructureText } from "./StructureText.js";
+import { TournamentElimination, TournamentLayoutKind, TournamentStage, TournamentStyle } from "./structureEnums.js";
+import { TournamentDraw } from "./TournamentDraw.js";
+import { TournamentLayout } from "./TournamentLayout.js";
+// src/charts/structure/TournamentBracket.ts
+var FIELDS = {
+	team: "team",
+	seed: "seed",
+	stage: "stage",
+	round: "round",
+	score: "score"
+};
+/** Eliminates a seeded field round by round, single or double, for reading who met whom and by what score. */
+var TournamentBracket = class TournamentBracket extends Chart2D {
+	static meta = {
+		id: "tournament-bracket",
+		name: "Tournament bracket",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows a seeded single or double elimination draw with every score, from first round to champion.",
+		tags: [
+			"bracket",
+			"knockout",
+			"playoffs"
+		],
+		sample: (seed) => TournamentBracket.sampleResults(seed),
+		variants: {
+			elimination: [TournamentElimination.Single, TournamentElimination.Double],
+			layout: [TournamentLayoutKind.Ladder, TournamentLayoutKind.Mirrored],
+			style: [TournamentStyle.Card, TournamentStyle.Sheet],
+			scores: [true, false],
+			thirdPlace: [false, true],
+			reset: [true, false]
+		},
+		valid: (values) => values.elimination === TournamentElimination.Double ? values.layout === TournamentLayoutKind.Ladder && values.thirdPlace === false : values.reset === true
+	};
+	/** Eight regional sides. Ratings set the seeds and pull scores toward form, so upsets stay possible but rare. */
+	static sampleResults(seed) {
+		const rows = [...SampleData.categories(seed, 8, 8), ...SampleData.categories(seed + 1, 8, 2)];
+		const teams = [...new Set(rows.map((row) => String(row.category)))];
+		const rating = new Map(teams.map((team) => {
+			const own = rows.filter((row) => row.category === team);
+			return [team, own.reduce((sum, row) => sum + +row.value, 0) / own.length];
+		}));
+		const ranked = [...teams].sort((a, b) => rating.get(b) - rating.get(a));
+		const full = [
+			[TournamentStage.Winners, 1],
+			[TournamentStage.Winners, 2],
+			[TournamentStage.Winners, 3],
+			[TournamentStage.Losers, 1],
+			[TournamentStage.Losers, 2],
+			[TournamentStage.Losers, 3],
+			[TournamentStage.Losers, 4],
+			[TournamentStage.Final, 1],
+			[TournamentStage.Final, 2],
+			[TournamentStage.ThirdPlace, 1]
+		].flatMap(([stage, round], s) => {
+			const taken = /* @__PURE__ */ new Set();
+			return teams.map((team, t) => {
+				let score = Math.round(40 + +rows[s * teams.length + t].value * .25 + rating.get(team) * .5);
+				while (taken.has(score)) score++;
+				taken.add(score);
+				return {
+					team,
+					seed: ranked.indexOf(team) + 1,
+					stage,
+					round,
+					score
+				};
+			});
+		});
+		const played = new TournamentDraw(full, FIELDS, {
+			double: true,
+			reset: true,
+			thirdPlace: false
+		});
+		const third = new TournamentDraw(full, FIELDS, {
+			double: false,
+			reset: true,
+			thirdPlace: true
+		}).thirdPlace;
+		return [...played.games, third].filter((game) => !game.moot).flatMap((game) => game.sides.flatMap((side) => side.team === null ? [] : [{
+			team: side.team,
+			seed: side.seed,
+			stage: game.stage,
+			round: game.round,
+			score: side.score
+		}]));
+	}
+	defaults() {
+		return {
+			...FIELDS,
+			elimination: TournamentElimination.Single,
+			layout: TournamentLayoutKind.Ladder,
+			style: TournamentStyle.Card,
+			scores: true,
+			thirdPlace: false,
+			reset: true
+		};
+	}
+	plotMargin() {
+		return {
+			top: 6,
+			right: 12,
+			bottom: 8,
+			left: 12
+		};
+	}
+	legendItems() {
+		return [];
+	}
+	draw(ctx) {
+		const { team, seed, stage, round, score, elimination, layout, style, scores, thirdPlace, reset } = this.options;
+		const rows = Array.isArray(this.options.data) ? this.options.data : [];
+		const double = elimination === TournamentElimination.Double, sheet = style === TournamentStyle.Sheet;
+		const draw = new TournamentDraw(rows, {
+			team,
+			seed,
+			stage,
+			round,
+			score
+		}, {
+			double,
+			reset,
+			thirdPlace
+		});
+		const plan = TournamentLayout.plan(draw, ctx.plot, !double && layout === TournamentLayoutKind.Mirrored, sheet);
+		const { games, rowHeight } = plan;
+		const champion = draw.champion;
+		const accent = champion ? ctx.palette.color(champion) : ctx.theme.axis;
+		const font = Math.min(11, rowHeight * .72), legible = font >= 6;
+		const openDrops = games.some(({ game }) => game.sides.some((side, i) => side.team === null && game.drops[i] !== null));
+		const slots = games.flatMap((placed) => placed.game.sides.map((side, i) => {
+			const drop = placed.game.drops[i];
+			const won = placed.game.winner === i && !placed.game.empty;
+			return {
+				key: `${placed.game.stage}-${placed.game.round}-${placed.game.index}-${i}`,
+				placed,
+				side: i,
+				text: side.team ?? (placed.game.moot ? "Unplayed" : side.bye ? "Bye" : drop ? `Loser ${drop.number}` : "TBD"),
+				seed: side.seed === null ? "" : String(side.seed),
+				score: side.score === null ? "" : String(side.score),
+				won,
+				champion: won && side.team === champion,
+				pending: side.team === null
+			};
+		}));
+		const cell = scores ? Math.ceil(font * 2 + 4) : 0;
+		const seedRoom = Math.ceil(font * 1.4) + 3;
+		const rowY = (slot) => slot.placed.tops[slot.side];
+		const baseline = (slot) => rowY(slot) + rowHeight / 2 + font * .35 - (sheet ? 1 : 0);
+		const headings = ctx.text(ctx.marks("headings", "text", legible ? plan.headings : [], (d) => d.key), 10.5, "muted").attr("font-weight", 600).text((d) => d.text);
+		ctx.set(headings, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const links = ctx.marks("links", "path", plan.links, (d) => d.key).attr("fill", "none").attr("stroke-linejoin", "round").attr("stroke", (d) => d.champion ? accent : ctx.theme.axis).attr("stroke-width", (d) => d.champion ? 2 : 1.5);
+		links.filter((d) => d.champion).raise();
+		ctx.set(links, { d: (d) => d.d });
+		ctx.drawOn(links);
+		const backs = ctx.marks("rows", "rect", slots, (d) => d.key).attr("fill", sheet ? "transparent" : ctx.theme.grid).attr("rx", 3).attr("opacity", (d) => d.placed.game.moot ? .5 : null);
+		ctx.set(backs, {
+			x: (d) => d.placed.x,
+			y: rowY,
+			width: (d) => d.placed.width,
+			height: rowHeight
+		}, { width: 0 }, 6);
+		ctx.hover(backs, (d) => this.tooltip(d, draw));
+		const rules = ctx.marks("rules", "line", sheet ? slots : [], (d) => d.key).attr("stroke-width", (d) => d.champion ? 2 : 1.5).attr("stroke", (d) => d.champion ? accent : ctx.theme.axis);
+		ctx.set(rules, {
+			x1: (d) => d.placed.x,
+			x2: (d) => d.placed.x + d.placed.width,
+			y1: (d) => d.placed.entries[d.side],
+			y2: (d) => d.placed.entries[d.side]
+		});
+		const joiners = ctx.marks("joiners", "line", sheet ? games.filter(({ edge }) => edge !== null) : [], (d) => `${d.game.stage}-${d.game.round}-${d.game.index}`).attr("stroke-width", 1.5).attr("stroke", ctx.theme.axis);
+		ctx.set(joiners, {
+			x1: (d) => d.edge,
+			x2: (d) => d.edge,
+			y1: (d) => d.entries[0],
+			y2: (d) => d.entries[1]
+		});
+		const cells = ctx.marks("score-cells", "rect", scores && !sheet ? slots.filter((slot) => slot.won) : [], (d) => d.key).attr("rx", 3).attr("fill", (d) => d.champion ? accent : ctx.theme.axis);
+		ctx.set(cells, {
+			x: (d) => d.placed.x + d.placed.width - cell,
+			y: rowY,
+			width: cell,
+			height: rowHeight
+		});
+		const seeds = ctx.text(ctx.marks("seeds", "text", legible ? slots.filter((slot) => slot.seed) : [], (d) => d.key), font, "muted").attr("pointer-events", "none").text((d) => d.seed);
+		ctx.set(seeds, {
+			x: (d) => d.placed.x + 4,
+			y: baseline
+		});
+		const names = ctx.text(ctx.marks("names", "text", legible ? slots : [], (d) => d.key), font, "secondary").attr("pointer-events", "none").attr("font-weight", (d) => d.won ? 600 : 400).attr("fill", (d) => d.pending ? ctx.theme.inkMuted : d.won ? ctx.theme.ink : ctx.theme.inkSecondary).text((d) => StructureText.fit(d.text, d.placed.width - seedRoom - cell - 6, font));
+		ctx.set(names, {
+			x: (d) => d.placed.x + seedRoom + 2,
+			y: baseline
+		});
+		const values = ctx.text(ctx.marks("scores", "text", legible && scores ? slots.filter((slot) => slot.score) : [], (d) => d.key), font, "secondary").attr("pointer-events", "none").attr("text-anchor", "middle").attr("font-weight", (d) => d.won ? 600 : 400).attr("fill", (d) => d.won && !sheet ? ctx.palette.inkOn(d.champion ? accent : ctx.theme.axis) : ctx.theme.inkSecondary).text((d) => d.score);
+		ctx.set(values, {
+			x: (d) => d.placed.x + d.placed.width - (sheet ? font + 3 : cell / 2),
+			y: baseline
+		});
+		const numbers = ctx.text(ctx.marks("game-numbers", "text", legible && openDrops ? games.filter(({ x, game }) => x > 12 && game.number) : [], (d) => d.game.number), 8.5, "muted").attr("text-anchor", "end").text((d) => d.game.number);
+		ctx.set(numbers, {
+			x: (d) => d.x - 2,
+			y: (d) => d.tops[0] + 8
+		});
+		const last = this.lastGame(draw, games);
+		const crownSize = Math.max(font, 10);
+		const between = (d) => sheet && d.entries[1] - d.entries[0] >= rowHeight * 3;
+		const crownText = (d) => {
+			const full = `Champion: ${champion}`;
+			return StructureText.width(full, crownSize) <= d.width ? full : StructureText.fit(champion, d.width, crownSize);
+		};
+		const crown = ctx.text(ctx.marks("champion", "text", legible && champion && last ? [last] : [], () => "champion"), crownSize, "ink").attr("font-weight", 600).text(crownText);
+		ctx.set(crown, {
+			x: (d) => d.x + (sheet ? 2 : 0),
+			y: (d) => between(d) ? d.exit + 4 : d.tops[1] + rowHeight + 13
+		});
+	}
+	/** The game that crowns the champion: the reset if it was played, else the last final. */
+	lastGame(draw, games) {
+		const crowning = draw.finals.filter((game) => !game.moot).at(-1) ?? draw.winners.at(-1)?.at(-1);
+		return games.find(({ game }) => game === crowning);
+	}
+	tooltip(slot, draw) {
+		const { game } = slot.placed;
+		const rows = game.sides.filter((side) => side.team !== null).map((side) => [side.seed === null ? side.team : `(${side.seed}) ${side.team}`, side.score ?? "—"]);
+		return {
+			title: TournamentLayout.stageName(game, draw.winners.length, draw.losers.length),
+			rows
+		};
+	}
+	table() {
+		const { team, seed, stage, round, score } = this.options;
+		const columns = [
+			team,
+			seed,
+			stage,
+			round,
+			score
+		];
+		return {
+			columns,
+			rows: (this.options.data ?? []).map((row) => columns.map((column) => row[column]))
+		};
+	}
+};
+export { TournamentBracket };