@classytic/labs 0.4.0 → 0.5.0

package/dist/ml/worlds/index.mjs

@@ -0,0 +1,22 @@
+import { BAKERY_DATASETS } from "./bakery/sets.mjs";
+import { BAKERY_RECORDS } from "./bakery/records.mjs";
+
+//#region src/ml/worlds/index.ts
+/** Every ML dataset, by id. */
+const ML_DATASETS = [...BAKERY_DATASETS, ...BAKERY_RECORDS];
+const BY_ID = new Map(ML_DATASETS.map((d) => [d.id, d]));
+function findMlDataset(id) {
+	return BY_ID.get(id);
+}
+/** Resolve a dataset of one kind, or undefined when the id is unknown or names another kind. */
+function resolveMlDataset(id, kind) {
+	if (!id) return void 0;
+	const found = BY_ID.get(id);
+	return found?.kind === kind ? found : void 0;
+}
+function mlDatasetIds(kind) {
+	return ML_DATASETS.filter((d) => !kind || d.kind === kind).map((d) => d.id);
+}
+
+//#endregion
+export { ML_DATASETS, findMlDataset, mlDatasetIds, resolveMlDataset };

package/dist/ml/worlds/synthetic.d.mts

@@ -0,0 +1,10 @@
+import { ClassPoint, data } from "@classytic/stage/ml";
+//#region src/ml/worlds/synthetic.d.ts
+/** One labelled example in the plane; `name` is an optional caption a story dataset carries. */
+type LabelledPoint = ClassPoint & {
+  readonly name?: string;
+};
+type KnnDatasetId = 'blobs' | 'xor' | 'circles';
+type BoundaryDatasetId = 'separable' | 'overlap' | 'xor';
+//#endregion
+export { BoundaryDatasetId, KnnDatasetId, LabelledPoint };

package/dist/ml/worlds/synthetic.mjs

@@ -0,0 +1,83 @@
+import { data } from "@classytic/stage/ml";
+
+//#region src/ml/worlds/synthetic.ts
+/**
+* The named synthetic two-class datasets the k-NN and linear-boundary labs load by id.
+*
+* Curated data, so it stays in labs (ML-ENGINE-PLAN 5): which blobs a lesson shows is how it
+* teaches. The seeded generator (`data.makeSynthetic`) and the point type are stage's; its draw
+* order is part of its contract, so a seed produces the numbers it always did and a lesson that
+* pinned a seed still shows the same picture.
+*
+* Pure: no React, no DOM. Deterministic for a given seed.
+*/
+const blob = (cx, cy, label, n, sd) => ({
+	cx,
+	cy,
+	label,
+	n,
+	sd
+});
+/** The k-NN lab's sets: tighter blobs (sd 0.8) spread further apart. */
+const KNN_DATASETS = {
+	blobs: {
+		kind: "blobs",
+		blobs: [blob(-2, -1.5, 0, 16, .8), blob(2, 1.5, 1, 16, .8)]
+	},
+	xor: {
+		kind: "blobs",
+		blobs: [
+			blob(-2.2, 2.2, 0, 9, .8),
+			blob(2.2, -2.2, 0, 9, .8),
+			blob(2.2, 2.2, 1, 9, .8),
+			blob(-2.2, -2.2, 1, 9, .8)
+		]
+	},
+	circles: {
+		kind: "ring",
+		ring: {
+			coreN: 16,
+			coreSd: .7,
+			ringN: 22,
+			radius: 3.4,
+			radiusSd: .3
+		}
+	}
+};
+/** The linear-boundary lab's sets: unit-spread blobs. */
+const BOUNDARY_DATASETS = {
+	separable: {
+		kind: "blobs",
+		blobs: [blob(-2, -1.5, 0, 14, 1), blob(2, 1.5, 1, 14, 1)]
+	},
+	overlap: {
+		kind: "blobs",
+		blobs: [blob(-1.1, -.6, 0, 16, 1), blob(1.1, .6, 1, 16, 1)]
+	},
+	xor: {
+		kind: "blobs",
+		blobs: [
+			blob(-2, 2, 0, 8, 1),
+			blob(2, -2, 0, 8, 1),
+			blob(2, 2, 1, 8, 1),
+			blob(-2, -2, 1, 8, 1)
+		]
+	}
+};
+const KNN_DATASET_IDS = Object.keys(KNN_DATASETS);
+const BOUNDARY_DATASET_IDS = Object.keys(BOUNDARY_DATASETS);
+function isKnnDatasetId(id) {
+	return !!id && Object.prototype.hasOwnProperty.call(KNN_DATASETS, id);
+}
+function isBoundaryDatasetId(id) {
+	return !!id && Object.prototype.hasOwnProperty.call(BOUNDARY_DATASETS, id);
+}
+function makeKnnData(id, seed) {
+	return data.makeSynthetic(KNN_DATASETS[id], seed);
+}
+function makeBoundaryData(id, seed) {
+	return data.makeSynthetic(BOUNDARY_DATASETS[id], seed);
+}
+
+//#endregion
+export { BOUNDARY_DATASETS, BOUNDARY_DATASET_IDS, KNN_DATASETS, KNN_DATASET_IDS, isBoundaryDatasetId, isKnnDatasetId, makeBoundaryData, makeKnnData };

package/dist/ml/worlds/types.d.mts

@@ -0,0 +1,84 @@
+//#region src/ml/worlds/types.d.ts
+/**
+ * Named datasets for ML labs, drawn from one bakery and the delivery app it sells through. A course
+ * can reuse the same small datasets across chapters, so the sales fitted in one lesson are the ones
+ * split into train and test in the next. Every set is small enough to check by hand. Pure data: a
+ * lab resolves a `dataset` prop by id, and inline props always override it.
+ */
+interface AxisInfo {
+  label: string;
+  unit?: string;
+  /** Inclusive plotting range. */
+  range: [number, number];
+}
+interface DatasetBase {
+  id: string;
+  title: string;
+  /** One sentence of story context, shown by labs that have room for it. */
+  note?: string;
+}
+interface XYPoint {
+  x: number;
+  y: number;
+  /** Optional name shown on focus, e.g. a day or a customer. */
+  name?: string;
+  /** Which side of a train/test split the point sits on, when the dataset carries one. */
+  split?: 'train' | 'test';
+}
+interface ClassPoint extends XYPoint {
+  /** Index into `classLabels`. */
+  label: 0 | 1;
+}
+interface ScoreGroup {
+  name: string;
+  positives: number[];
+  negatives: number[];
+}
+interface EmbeddingItem {
+  label: string;
+  x: number;
+  y: number;
+  group?: string;
+}
+interface RecordTable {
+  columns: {
+    key: string;
+    label: string;
+  }[];
+  rows: Record<string, string | number | null>[];
+}
+type MlDataset = (DatasetBase & {
+  kind: 'points';
+  x: AxisInfo;
+  y: AxisInfo;
+  points: XYPoint[];
+}) | (DatasetBase & {
+  kind: 'classes';
+  x: AxisInfo;
+  y: AxisInfo;
+  classLabels: [string, string];
+  points: ClassPoint[];
+}) | (DatasetBase & {
+  kind: 'scores';
+  positiveLabel: string;
+  negativeLabel: string;
+  range: [number, number];
+  positives: number[];
+  negatives: number[];
+  /** The same scores split by a group, for fairness lessons. Union equals positives/negatives. */
+  groups?: ScoreGroup[];
+}) | (DatasetBase & {
+  kind: 'embeddings';
+  items: EmbeddingItem[];
+  analogy?: [string, string, string];
+}) | (DatasetBase & {
+  kind: 'corpus';
+  corpus: string[][];
+  start?: string[];
+}) | (DatasetBase & {
+  kind: 'records';
+  table: RecordTable;
+});
+type MlDatasetKind = MlDataset['kind'];
+//#endregion
+export { AxisInfo, ClassPoint, EmbeddingItem, MlDataset, MlDatasetKind, RecordTable, ScoreGroup, XYPoint };

package/dist/networking/AirtimeScene.mjs

@@ -3,6 +3,7 @@
 import { useEarned } from "../kit/activity.mjs";
 import { Figure, HUE, STROKE, alpha, tint } from "../kit/figure/figure.mjs";
 import { FigText } from "../kit/figure/text.mjs";
+import { EndpointLabel } from "../kit/networking/primitives.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { signalWord } from "@classytic/stage/networking/models";
 
@@ -134,22 +135,12 @@ function AirtimeScene({ result, label }) {
 			shares.map((share, index) => {
 				const y = TABLE.y + 16 + index * TABLE.row;
 				return /* @__PURE__ */ jsxs("g", { children: [
-					/* @__PURE__ */ jsx("rect", {
+					/* @__PURE__ */ jsx(EndpointLabel, {
 						x: TABLE.x,
-						y: y - 9,
-						width: 10,
-						height: 10,
-						rx: 2,
-						fill: alpha(rateInk(share.rateMbps), 70),
-						stroke: alpha(HUE.ink, 30),
-						strokeWidth: STROKE.hair
-					}),
-					/* @__PURE__ */ jsx(FigText, {
-						x: TABLE.x + 18,
-						y,
-						size: "note",
-						tone: "ink",
-						children: share.client.label
+						y: y - 5,
+						label: share.client.label,
+						kind: /phone|tablet/i.test(share.client.label) ? "phone" : "laptop",
+						tone: share.rateMbps < 40 ? "warning" : "neutral"
 					}),
 					/* @__PURE__ */ jsx(FigText, {
 						x: TABLE.x + 250,

package/dist/networking/CellularScene.mjs

@@ -3,6 +3,7 @@
 import { useEarned } from "../kit/activity.mjs";
 import { Figure, HUE, STROKE, alpha, figUrl, tint, useFigureId } from "../kit/figure/figure.mjs";
 import { FigText } from "../kit/figure/text.mjs";
+import { TowerGlyph } from "../kit/networking/primitives.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { TASKS, blockedBy, cellRadiusKm, towersFor } from "@classytic/stage/networking/models";
 
@@ -123,11 +124,15 @@ function CellGridBody({ box, cells, r, towers, radiusKm, cityKm, px, reveal, vie
 				width: box.side,
 				height: box.side,
 				fill: figUrl(uid, "hex")
-			}), cells.map((cell, index) => /* @__PURE__ */ jsx("circle", {
-				cx: cell.cx,
-				cy: cell.cy,
-				r: 2.6,
-				fill: HUE[2]
+			}), cells.map((cell, index) => /* @__PURE__ */ jsx("g", {
+				transform: `translate(${cell.cx} ${cell.cy + 3}) scale(${Math.min(.24, r / 55)})`,
+				children: /* @__PURE__ */ jsx(TowerGlyph, {
+					x: 0,
+					groundY: 0,
+					height: 42,
+					tone: "secondary",
+					active: true
+				})
 			}, `t${index}`))]
 		}) : /* @__PURE__ */ jsx(FigText, {
 			x: box.x + box.side / 2,
@@ -240,33 +245,221 @@ const latY = (ms) => {
 	const t = (Math.log10(Math.max(LAT.min, ms)) - Math.log10(LAT.min)) / (Math.log10(LAT.max) - Math.log10(LAT.min));
 	return PLOT.y + Math.min(1, Math.max(0, t)) * PLOT.h;
 };
+const distToSegment = (px, py, [x1, y1, x2, y2]) => {
+	const dx = x2 - x1, dy = y2 - y1;
+	const len2 = dx * dx + dy * dy;
+	const u = len2 ? Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / len2)) : 0;
+	return Math.hypot(px - x1 - u * dx, py - y1 - u * dy);
+};
+/** Clearance between a label box and an axis-aligned segment (every edge in this figure is one). */
+const boxToSegment = (b, sg) => {
+	const [x1, y1, x2, y2] = sg;
+	const gx = Math.max(Math.min(x1, x2) - b.r, 0, b.l - Math.max(x1, x2));
+	const gy = Math.max(Math.min(y1, y2) - b.b, 0, b.t - Math.max(y1, y2));
+	if (gx === 0 && gy === 0) return 0;
+	return Math.min(Math.hypot(gx, gy), distToSegment(b.l, b.t, sg), distToSegment(b.r, b.t, sg), distToSegment(b.l, b.b, sg), distToSegment(b.r, b.b, sg));
+};
+const rectEdges = (x, y, w, h) => [
+	[
+		x,
+		y,
+		x + w,
+		y
+	],
+	[
+		x + w,
+		y,
+		x + w,
+		y + h
+	],
+	[
+		x,
+		y + h,
+		x + w,
+		y + h
+	],
+	[
+		x,
+		y,
+		x,
+		y + h
+	]
+];
+/** Note-size text: about 6 units a character, cap to descender about 12. */
+const noteBox = (x, baseline, text, anchor) => {
+	const w = text.length * 6.1;
+	const l = anchor === "start" ? x : anchor === "end" ? x - w : x - w / 2;
+	return {
+		l,
+		r: l + w,
+		t: baseline - 10,
+		b: baseline + 3
+	};
+};
+/** Line step for a name broken over two lines: boxes abut, so this is normal note leading. */
+const NOTE_LEADING = 12;
+/** The box of a name set as `lines`, the first baseline at `baseline`. */
+const linesBox = (x, baseline, lines, anchor) => {
+	const widest = lines.reduce((m, line) => line.length > m.length ? line : m, "");
+	const box = noteBox(x, baseline, widest, anchor);
+	return {
+		...box,
+		b: box.b + (lines.length - 1) * NOTE_LEADING
+	};
+};
+/** Split a name into two lines at the space nearest its middle, or null for a single word. */
+const twoLines = (text) => {
+	let cut = -1;
+	for (let i = 0; i < text.length; i++) if (text[i] === " " && (cut < 0 || Math.abs(i - text.length / 2) < Math.abs(cut - text.length / 2))) cut = i;
+	return cut < 0 ? null : [text.slice(0, cut), text.slice(cut + 1)];
+};
+const boxToPoint = (box, x, y) => Math.hypot(Math.max(box.l - x, 0, x - box.r), Math.max(box.t - y, 0, y - box.b));
+/** How much nearer a name must be to its own dot than to any other, so it cannot be read as naming
+*  the neighbour. */
+const OWN_DOT_MARGIN = 8;
+/** Clearance between two boxes (0 when they touch or overlap). */
+const boxGap = (a, b) => Math.hypot(Math.max(a.l - b.r, 0, b.l - a.r), Math.max(a.t - b.b, 0, b.t - a.b));
+/** Minimum clearance between a task name and the reach box's caption. */
+const CAPTION_CLEARANCE = 6;
 /**
-* Nudge a label off any neighbour it would sit on top of.
+* Where each task's name goes.
 *
-* Two tasks can legitimately need the same delay and almost the same rate, and their labels then
-* print over each other, which the collision gate rejects and a reader cannot decipher either.
-* Walking the list once and pushing each label clear of the ones already placed is enough here, and
-* keeps the dots where the data puts them: only the text moves.
+* The dots are data and never move; the names are placed around them. A fixed "right of the dot"
+* rule put names across the edge of the reach box, on top of a neighbouring dot, and under the box's
+* own caption, because tasks bunch near the box's corners by design (the interesting ones are the
+* ones just in or just out). So each name tries spots around its dot, its usual side first, and
+* takes the first one clear of the box edges, the plot frame, every dot and every name already
+* placed, AND nearer its own dot than any other. That last test is what the placer used to miss:
+* "Stream 4K video" found a clear spot above-left of its dot, which is directly over the "Stream HD
+* video" dot, so the figure could be read either way. When no one-line spot passes (4K sits between
+* the HD dot, the reach box's right edge and the plot floor), the name breaks over two lines,
+* which is narrow enough to sit over its own dot alone.
 */
-function placeLabels(tasks) {
-	const placed = [];
-	return tasks.map((task) => {
-		const x = rateX(task.needMbps);
-		let y = latY(task.needLatencyMs);
-		let dy = 0;
-		while (placed.some((seen) => Math.abs(seen.x - x) < 130 && Math.abs(seen.y - y) < 15)) {
-			dy += 17;
-			y += 17;
+function placeLabels(tasks, edges, fixed) {
+	const rank = (placed) => [placed.filter((p) => p.score < 0).length, Math.min(...placed.map((p) => p.score))];
+	const natural = tasks.map((_, i) => i);
+	let best = placeInOrder(tasks, natural, edges, fixed);
+	let bestRank = rank(best);
+	for (const first of natural.filter((i) => best[i].score < 0)) {
+		const placed = placeInOrder(tasks, [first, ...natural.filter((i) => i !== first)], edges, fixed);
+		const r = rank(placed);
+		if (r[0] < bestRank[0] || r[0] === bestRank[0] && r[1] > bestRank[1]) {
+			best = placed;
+			bestRank = r;
 		}
-		placed.push({
-			x,
-			y
+	}
+	return {
+		placed: best.map(({ score: _score, ...placed }) => placed),
+		rank: bestRank
+	};
+}
+/** One placement pass in the given order; results come back in task order with their scores. */
+function placeInOrder(tasks, order, edges, fixed) {
+	const taken = [...fixed];
+	const dots = tasks.map((task) => ({
+		x: rateX(task.needMbps),
+		y: latY(task.needLatencyMs)
+	}));
+	const out = [];
+	for (const index of order) {
+		const task = tasks[index];
+		const { x: cx, y: cy } = dots[index];
+		const flip = cx > PLOT.x + PLOT.w * .62;
+		const candidates = [...flip ? [[
+			-9,
+			4,
+			"end"
+		], [
+			9,
+			4,
+			"start"
+		]] : [[
+			9,
+			4,
+			"start"
+		], [
+			-9,
+			4,
+			"end"
+		]], ...[
+			-9,
+			18,
+			-22,
+			31
+		].flatMap((dy) => [
+			[
+				flip ? -5 : 5,
+				dy,
+				flip ? "end" : "start"
+			],
+			[
+				flip ? 5 : -5,
+				dy,
+				flip ? "start" : "end"
+			],
+			[
+				0,
+				dy < 0 ? dy - 1 : dy,
+				"middle"
+			]
+		])].map(([dx, dy, anchor]) => ({
+			dx,
+			dy,
+			anchor,
+			lines: [task.label]
+		}));
+		const split = twoLines(task.label);
+		if (split) for (const dy of [-21, 16]) for (const [dx, anchor] of [
+			[0, "middle"],
+			[flip ? 18 : -18, flip ? "end" : "start"],
+			[flip ? -18 : 18, flip ? "start" : "end"]
+		]) candidates.push({
+			dx,
+			dy,
+			anchor,
+			lines: [...split]
 		});
-		return {
+		let best = null;
+		for (const { dx, dy, anchor, lines } of candidates) {
+			const box = linesBox(cx + dx, cy + dy, lines, anchor);
+			if (box.l < 2 || box.r > 698 || box.t < 2 || box.b > 428) continue;
+			if (box.l < PLOT.x || box.r > PLOT.x + PLOT.w || box.t < PLOT.y || box.b > PLOT.y + PLOT.h) continue;
+			if (taken.some((o) => o.l < box.r && box.l < o.r && o.t < box.b && box.t < o.b)) continue;
+			const own = boxToPoint(box, cx, cy);
+			const nearestOther = Math.min(Infinity, ...dots.filter((_, i) => i !== index).map((d) => boxToPoint(box, d.x, d.y)));
+			const captionGap = Math.min(Infinity, ...fixed.map((f) => boxGap(box, f)));
+			const score = Math.min(Infinity, ...edges.map((sg) => boxToSegment(box, sg) - 1), ...dots.map((d) => boxToPoint(box, d.x, d.y) - 5), nearestOther - own - OWN_DOT_MARGIN, captionGap - CAPTION_CLEARANCE, captionGap - own);
+			if (!best || score > best.score) best = {
+				task,
+				x: cx + dx,
+				y: cy + dy,
+				anchor,
+				lines,
+				box,
+				score
+			};
+			if (score >= 2) break;
+		}
+		const chosen = best ?? {
 			task,
-			dy
+			x: cx + 9,
+			y: cy + 4,
+			anchor: "start",
+			lines: [task.label],
+			box: noteBox(cx + 9, cy + 4, task.label, "start"),
+			score: -Infinity
 		};
-	});
+		taken.push(chosen.box);
+		out[index] = {
+			task,
+			x: chosen.x,
+			y: chosen.y,
+			anchor: chosen.anchor,
+			lines: chosen.lines,
+			score: chosen.score
+		};
+	}
+	return out;
 }
 /**
 * Every task needs TWO things, so the figure has two axes.
@@ -280,6 +473,25 @@ function CapabilityScene({ generation, tasks = TASKS, label }) {
 	const earned = useEarned();
 	const boxRight = rateX(generation.typicalMbps);
 	const boxTop = latY(generation.latencyMs);
+	const caption = `${generation.label} reaches everything in here`;
+	const edges = [...rectEdges(PLOT.x, PLOT.y, PLOT.w, PLOT.h), ...earned ? rectEdges(PLOT.x, boxTop, Math.max(0, boxRight - PLOT.x), PLOT.y + PLOT.h - boxTop) : []];
+	const dotsAt = tasks.map((task) => ({
+		x: rateX(task.needMbps),
+		y: latY(task.needLatencyMs)
+	}));
+	const captionSeats = [boxTop - 8, boxTop + 17].map((y) => ({
+		y,
+		box: noteBox(PLOT.x + 10, y, caption, "start")
+	})).filter(({ y, box }, i) => i === 0 || y + 3 < PLOT.y + PLOT.h - 6 && box.r < boxRight - 4 && dotsAt.every((d) => boxToPoint(box, d.x, d.y) > 8));
+	let captionY = captionSeats[0].y;
+	let labels = placeLabels(tasks, edges, earned ? [captionSeats[0].box] : []);
+	if (earned && labels.rank[0] > 0) for (const seat of captionSeats.slice(1)) {
+		const tried = placeLabels(tasks, edges, [seat.box]);
+		if (tried.rank[0] < labels.rank[0] || tried.rank[0] === labels.rank[0] && tried.rank[1] > labels.rank[1]) {
+			labels = tried;
+			captionY = seat.y;
+		}
+	}
 	return /* @__PURE__ */ jsxs(Figure, {
 		viewBox: [700, 430],
 		domain: "physics",
@@ -346,18 +558,17 @@ function CapabilityScene({ generation, tasks = TASKS, label }) {
 				strokeWidth: STROKE.line
 			}), /* @__PURE__ */ jsx(FigText, {
 				x: PLOT.x + 10,
-				y: boxTop - 8,
+				y: captionY,
 				size: "note",
 				tone: "good",
-				children: `${generation.label} reaches everything in here`
+				children: caption
 			})] }) : null,
-			placeLabels(tasks).map(({ task, dy }) => {
+			labels.placed.map(({ task, x, y, anchor, lines }) => {
 				const cx = rateX(task.needMbps);
 				const cy = latY(task.needLatencyMs);
 				const blocker = blockedBy(generation, task);
 				const tone = !earned ? "soft" : blocker ? "hot" : "good";
 				const fill = !earned ? alpha(HUE.ink, 45) : blocker ? HUE.danger : HUE.good;
-				const flip = cx > PLOT.x + PLOT.w * .62;
 				return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
 					cx,
 					cy,
@@ -365,14 +576,14 @@ function CapabilityScene({ generation, tasks = TASKS, label }) {
 					fill,
 					stroke: alpha(HUE.paper, 70),
 					strokeWidth: STROKE.hair
-				}), /* @__PURE__ */ jsx(FigText, {
-					x: flip ? cx - 9 : cx + 9,
-					y: cy + 4 + dy,
+				}), lines.map((line, i) => /* @__PURE__ */ jsx(FigText, {
+					x,
+					y: y + i * NOTE_LEADING,
 					size: "note",
-					anchor: flip ? "end" : "start",
+					anchor,
 					tone,
-					children: task.label
-				})] }, task.id);
+					children: line
+				}, i))] }, task.id);
 			}),
 			/* @__PURE__ */ jsx(FigText, {
 				x: PLOT.x + PLOT.w / 2,
@@ -383,7 +594,7 @@ function CapabilityScene({ generation, tasks = TASKS, label }) {
 				children: "data rate the task needs"
 			}),
 			/* @__PURE__ */ jsx(FigText, {
-				x: 22,
+				x: 12,
 				y: PLOT.y + PLOT.h / 2,
 				size: "note",
 				anchor: "middle",

package/dist/networking/HandoverScene.mjs

@@ -18,6 +18,8 @@ const PLOT = {
 	w: 264,
 	h: 188
 };
+/** Width of the threshold key's words ("no usable call below", 20 note-size glyphs). */
+const KEY_TEXT_W = 118;
 const ROAD_Y = 66;
 const RIBBON = {
 	y: 346,
@@ -128,12 +130,22 @@ function HandoverScene({ masts, fromKm, toKm, result, marginDb, label }) {
 				strokeWidth: STROKE.hair,
 				strokeDasharray: "5 4"
 			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: PLOT.x + PLOT.w - KEY_TEXT_W - 30,
+				y1: PLOT.y - 14,
+				x2: PLOT.x + PLOT.w - KEY_TEXT_W - 8,
+				y2: PLOT.y - 14,
+				stroke: HUE.danger,
+				strokeWidth: STROKE.hair,
+				strokeDasharray: "5 4"
+			}),
 			/* @__PURE__ */ jsx(FigText, {
-				x: PLOT.x + 6,
-				y: Y(HANDSET_SENSITIVITY_DBM) + 14,
+				x: PLOT.x + PLOT.w,
+				y: PLOT.y - 10,
 				size: "note",
+				anchor: "end",
 				tone: "hot",
-				children: "no usable call below here"
+				children: "no usable call below"
 			}),
 			curves.map((path, index) => /* @__PURE__ */ jsx("path", {
 				d: path,