@classytic/labs 0.6.0 → 0.7.0

package/dist/diagrams/geometry/GeometryDiagram.mjs

@@ -0,0 +1,208 @@
+'use client';
+
+import { Stack } from "../../kit/layout.mjs";
+import { AngleArc, DimensionMark, EqualTicks, RightAngleMark } from "../../kit/diagram/annotations.mjs";
+import { arcPoints, centroid, geometryLayout } from "./core.mjs";
+import { useCoords } from "@classytic/stage/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Stage } from "@classytic/stage/view";
+import { Label, Polyline } from "@classytic/stage/primitives";
+import { renderElements } from "@classytic/stage/scene";
+
+//#region src/diagrams/geometry/GeometryDiagram.tsx
+const TONE = {
+	shade: {
+		fill: "var(--stage-accent)",
+		opacity: .24
+	},
+	accent: {
+		fill: "var(--stage-accent-2)",
+		opacity: .22
+	},
+	muted: {
+		fill: "var(--stage-muted)",
+		opacity: .14
+	}
+};
+/** A filled outline with holes: the even-odd rule leaves every inner ring unfilled. */
+function FilledRings({ rings, tone }) {
+	const c = useCoords();
+	const d = rings.map((ring) => ring.map((p, i) => {
+		const [x, y] = c.toPx(p.x, p.y);
+		return `${i ? "L" : "M"} ${Math.round(x * 100) / 100} ${Math.round(y * 100) / 100}`;
+	}).join(" ") + " Z").join(" ");
+	const { fill, opacity } = TONE[tone];
+	return /* @__PURE__ */ jsx("path", {
+		d,
+		fill,
+		fillOpacity: opacity,
+		fillRule: "evenodd",
+		stroke: "none"
+	});
+}
+/** Where a region's name sits: in the band between the outer shape and its first hole, else the middle. */
+function regionLabelAt(outer, holes) {
+	const mid = centroid(outer);
+	if (!holes.length) return mid;
+	const top = Math.max(...outer.map((p) => p.y));
+	const holeTop = Math.max(...holes[0].map((p) => p.y));
+	return {
+		x: mid.x,
+		y: (top + holeTop) / 2
+	};
+}
+const vec$1 = (from, to) => ({
+	x: to.x - from.x,
+	y: to.y - from.y
+});
+function Mark({ mark, layout }) {
+	const { point, outline } = layout;
+	switch (mark.type) {
+		case "region": {
+			const outer = outline(mark.shape);
+			if (!outer) return null;
+			const holes = (mark.minus ?? []).map(outline).filter((r) => !!r);
+			const at = regionLabelAt(outer, holes);
+			return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(FilledRings, {
+				rings: [outer, ...holes],
+				tone: mark.tone ?? "shade"
+			}), mark.label && /* @__PURE__ */ jsx(Label, {
+				x: at.x,
+				y: at.y,
+				text: mark.label,
+				size: 13
+			})] });
+		}
+		case "sector": {
+			const c = point(mark.center);
+			if (!c) return null;
+			const arc = arcPoints(c, mark.radius, mark.from, mark.to);
+			let sweep = mark.to - mark.from;
+			while (sweep <= 0) sweep += 360;
+			const a = (mark.from + sweep / 2) * Math.PI / 180;
+			return /* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx(FilledRings, {
+					rings: [[c, ...arc]],
+					tone: mark.tone ?? "shade"
+				}),
+				/* @__PURE__ */ jsx(Polyline, {
+					points: [
+						c,
+						...arc,
+						c
+					],
+					color: "var(--stage-fg)",
+					weight: 1.5
+				}),
+				mark.label && /* @__PURE__ */ jsx(Label, {
+					x: c.x + .74 * mark.radius * Math.cos(a),
+					y: c.y + .74 * mark.radius * Math.sin(a),
+					text: mark.label,
+					size: 13
+				})
+			] });
+		}
+		case "arc": {
+			const c = point(mark.center);
+			if (!c) return null;
+			const arc = arcPoints(c, mark.radius, mark.from, mark.to);
+			let sweep = mark.to - mark.from;
+			while (sweep <= 0) sweep += 360;
+			const a = (mark.from + sweep / 2) * Math.PI / 180;
+			return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(Polyline, {
+				points: arc,
+				color: "var(--stage-accent)",
+				weight: 2.5
+			}), mark.label && /* @__PURE__ */ jsx(Label, {
+				x: c.x + 1.18 * mark.radius * Math.cos(a),
+				y: c.y + 1.18 * mark.radius * Math.sin(a),
+				text: mark.label,
+				size: 13
+			})] });
+		}
+		case "angle": {
+			const [o, p, q] = [
+				point(mark.at),
+				point(mark.from),
+				point(mark.to)
+			];
+			return o && p && q ? /* @__PURE__ */ jsx(AngleArc, {
+				at: o,
+				from: vec$1(o, p),
+				to: vec$1(o, q),
+				label: mark.label
+			}) : null;
+		}
+		case "rightAngle": {
+			const [o, p, q] = [
+				point(mark.at),
+				point(mark.from),
+				point(mark.to)
+			];
+			return o && p && q ? /* @__PURE__ */ jsx(RightAngleMark, {
+				at: o,
+				u: vec$1(o, p),
+				v: vec$1(o, q)
+			}) : null;
+		}
+		case "ticks": {
+			const [p, q] = [point(mark.from), point(mark.to)];
+			return p && q ? /* @__PURE__ */ jsx(EqualTicks, {
+				from: p,
+				to: q,
+				count: mark.count ?? 1
+			}) : null;
+		}
+		case "dimension": {
+			const [p, q] = [point(mark.from), point(mark.to)];
+			return p && q ? /* @__PURE__ */ jsx(DimensionMark, {
+				from: p,
+				to: q,
+				label: mark.label,
+				side: mark.side ?? "right"
+			}) : null;
+		}
+		case "label": {
+			const p = point(mark.at);
+			return p ? /* @__PURE__ */ jsx(Label, {
+				x: p.x,
+				y: p.y,
+				text: mark.text,
+				size: 13
+			}) : null;
+		}
+		default: return null;
+	}
+}
+/**
+* The exam figure beside a question or a worked example, composed from a construction and teaching marks
+* (see `spec.ts`). Static: points do not drag here; the same construction runs live in the Geometry board.
+*/
+function GeometryDiagram({ scene }) {
+	const layout = geometryLayout(scene);
+	const marks = scene.marks ?? [];
+	const fills = marks.filter((m) => m.type === "region" || m.type === "sector");
+	const rest = marks.filter((m) => m.type !== "region" && m.type !== "sector");
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: 8,
+		children: [/* @__PURE__ */ jsxs(Stage, {
+			view: layout.view,
+			height: scene.height ?? 260,
+			ariaLabel: scene.alt,
+			children: [
+				fills.map((mark, i) => /* @__PURE__ */ jsx(Mark, {
+					mark,
+					layout
+				}, `f${i}`)),
+				renderElements(layout.doc, layout.resolved, { draggablePoints: false }),
+				rest.map((mark, i) => /* @__PURE__ */ jsx(Mark, {
+					mark,
+					layout
+				}, `m${i}`))
+			]
+		}), scene.caption && /* @__PURE__ */ jsx("p", { children: scene.caption })]
+	});
+}
+
+//#endregion
+export { GeometryDiagram };

package/dist/diagrams/geometry/core.mjs

@@ -0,0 +1,112 @@
+import { geoSceneToDoc } from "../../geometry/board/construction.mjs";
+import { isCircleVal, isVec2, resolve } from "@classytic/stage/scene";
+
+//#region src/diagrams/geometry/core.ts
+const DEG = Math.PI / 180;
+/** Placeholder window for the first resolve; derived points never depend on the view. */
+const PROVISIONAL = {
+	xMin: -10,
+	xMax: 10,
+	yMin: -10,
+	yMax: 10
+};
+/** Points along an arc, `from` → `to` degrees anticlockwise, both ends included. */
+function arcPoints(center, r, from, to, steps) {
+	let sweep = to - from;
+	while (sweep <= 0) sweep += 360;
+	const n = steps ?? Math.max(8, Math.ceil(sweep / 5));
+	return Array.from({ length: n + 1 }, (_, i) => {
+		const a = (from + sweep * i / n) * DEG;
+		return {
+			x: center.x + r * Math.cos(a),
+			y: center.y + r * Math.sin(a)
+		};
+	});
+}
+function geometryLayout(scene) {
+	const provisional = geoSceneToDoc(scene.scene, scene.view ?? PROVISIONAL);
+	const resolved = resolve(provisional);
+	const point = (id) => {
+		const v = resolved.values.get(id);
+		return isVec2(v) ? v : undefined;
+	};
+	const sectors = new Map();
+	for (const mark of scene.marks ?? []) if (mark.type === "sector" && mark.id) sectors.set(mark.id, mark);
+	const outline = (id) => {
+		const sector = sectors.get(id);
+		if (sector) {
+			const c = point(sector.center);
+			return c ? [c, ...arcPoints(c, sector.radius, sector.from, sector.to)] : undefined;
+		}
+		const v = resolved.values.get(id);
+		if (isCircleVal(v)) return arcPoints(v.center, v.r, 0, 360, 72).slice(0, -1);
+		if (Array.isArray(v) && v.every(isVec2)) return v;
+		return undefined;
+	};
+	const view = scene.view ?? fitView(resolved, scene, point);
+	return {
+		doc: {
+			...provisional,
+			view
+		},
+		resolved,
+		view,
+		point,
+		outline
+	};
+}
+/**
+* The smallest window holding every point, circle, sector and arc, with a margin for labels and
+* dimension lines (a fixed share of the larger span, so a small figure still has room to write on).
+*/
+function fitView(resolved, scene, point) {
+	const xs = [];
+	const ys = [];
+	const add = (p) => {
+		xs.push(p.x);
+		ys.push(p.y);
+	};
+	for (const v of resolved.values.values()) {
+		if (isVec2(v)) add(v);
+		else if (isCircleVal(v)) {
+			add({
+				x: v.center.x - v.r,
+				y: v.center.y - v.r
+			});
+			add({
+				x: v.center.x + v.r,
+				y: v.center.y + v.r
+			});
+		}
+	}
+	for (const mark of scene.marks ?? []) {
+		if (mark.type !== "sector" && mark.type !== "arc") continue;
+		const c = point(mark.center);
+		if (c) arcPoints(c, mark.radius, mark.from, mark.to).forEach(add);
+	}
+	if (!xs.length) return PROVISIONAL;
+	const [x0, x1, y0, y1] = [
+		Math.min(...xs),
+		Math.max(...xs),
+		Math.min(...ys),
+		Math.max(...ys)
+	];
+	const pad = Math.max(x1 - x0, y1 - y0, 1) * .18;
+	return {
+		xMin: x0 - pad,
+		xMax: x1 + pad,
+		yMin: y0 - pad,
+		yMax: y1 + pad
+	};
+}
+/** The centroid of an outline, where a region's label sits. */
+function centroid(points) {
+	const n = points.length || 1;
+	return {
+		x: points.reduce((s, p) => s + p.x, 0) / n,
+		y: points.reduce((s, p) => s + p.y, 0) / n
+	};
+}
+
+//#endregion
+export { arcPoints, centroid, fitView, geometryLayout };

package/dist/diagrams/geometry/schema.mjs

@@ -0,0 +1,135 @@
+import { geoElementIds, geoElementRefs, geoElementSchema } from "../../geometry/board/schema.mjs";
+import { z } from "zod";
+
+//#region src/diagrams/geometry/schema.ts
+const id = z.string().trim().min(1);
+const label = z.string().trim().min(1).max(40);
+const tone = z.enum([
+	"shade",
+	"accent",
+	"muted"
+]).optional();
+const angle = z.number().finite();
+const markSchema = z.discriminatedUnion("type", [
+	z.object({
+		type: z.literal("sector"),
+		id: id.optional(),
+		center: id,
+		radius: z.number().positive(),
+		from: angle,
+		to: angle,
+		tone,
+		label: label.optional()
+	}),
+	z.object({
+		type: z.literal("arc"),
+		center: id,
+		radius: z.number().positive(),
+		from: angle,
+		to: angle,
+		label: label.optional()
+	}),
+	z.object({
+		type: z.literal("region"),
+		shape: id,
+		minus: z.array(id).max(6).optional(),
+		tone,
+		label: label.optional()
+	}),
+	z.object({
+		type: z.literal("angle"),
+		at: id,
+		from: id,
+		to: id,
+		label: label.optional()
+	}),
+	z.object({
+		type: z.literal("rightAngle"),
+		at: id,
+		from: id,
+		to: id
+	}),
+	z.object({
+		type: z.literal("ticks"),
+		from: id,
+		to: id,
+		count: z.number().int().min(1).max(3).optional()
+	}),
+	z.object({
+		type: z.literal("dimension"),
+		from: id,
+		to: id,
+		label,
+		side: z.enum(["left", "right"]).optional()
+	}),
+	z.object({
+		type: z.literal("label"),
+		at: id,
+		text: label
+	})
+]);
+/** The point ids a mark names (a region names shapes, checked separately). */
+function markPoints(mark) {
+	switch (mark.type) {
+		case "sector":
+		case "arc": return [mark.center];
+		case "angle":
+		case "rightAngle": return [
+			mark.at,
+			mark.from,
+			mark.to
+		];
+		case "ticks":
+		case "dimension": return [mark.from, mark.to];
+		case "label": return [mark.at];
+		default: return [];
+	}
+}
+/** The figure's fields, shared by the `geometry` diagram kind and the standalone GeometryFigure block. */
+const geometryFigureFields = {
+	scene: z.array(geoElementSchema).min(1).max(40),
+	marks: z.array(markSchema).max(24).optional(),
+	view: z.object({
+		xMin: z.number(),
+		xMax: z.number(),
+		yMin: z.number(),
+		yMax: z.number()
+	}).refine((v) => v.xMax > v.xMin && v.yMax > v.yMin, "view maximums must exceed minimums on both axes").optional(),
+	height: z.number().min(140).max(520).optional(),
+	caption: z.string().trim().max(300).optional(),
+	alt: z.string().trim().min(1).max(500)
+};
+/** Every reference names something that exists, so a typo is an authoring error, not a silent gap. */
+function checkGeometryRefs(s, ctx) {
+	const ids = geoElementIds(s.scene);
+	s.scene.forEach((el, i) => {
+		for (const ref of geoElementRefs(el)) if (!ids.has(ref)) ctx.addIssue({
+			code: "custom",
+			path: ["scene", i],
+			message: `unknown point or shape "${ref}"`
+		});
+	});
+	const shapes = new Set(s.scene.flatMap((el) => el.type === "polygon" || el.type === "circle" ? [el.id] : []));
+	for (const mark of s.marks ?? []) if (mark.type === "sector" && mark.id) shapes.add(mark.id);
+	(s.marks ?? []).forEach((mark, i) => {
+		for (const ref of markPoints(mark)) if (!ids.has(ref)) ctx.addIssue({
+			code: "custom",
+			path: ["marks", i],
+			message: `unknown point "${ref}"`
+		});
+		if (mark.type === "region") {
+			for (const ref of [mark.shape, ...mark.minus ?? []]) if (!shapes.has(ref)) ctx.addIssue({
+				code: "custom",
+				path: ["marks", i],
+				message: `region shape "${ref}" must be a polygon or circle of the scene, or a sector mark with that id`
+			});
+		}
+	});
+}
+const geometrySceneSchema = z.object({
+	kind: z.literal("geometry"),
+	...geometryFigureFields
+}).superRefine(checkGeometryRefs);
+
+//#endregion
+export { checkGeometryRefs, geometryFigureFields, geometrySceneSchema };

package/dist/diagrams/geometry/spec.d.mts

@@ -0,0 +1,90 @@
+import { GeoElement } from "../../geometry/board/construction.mjs";
+import { ViewBox } from "@classytic/stage/core";
+//#region src/diagrams/geometry/spec.d.ts
+/** How a filled part reads: `shade` is the part the question is about, `accent` a second part, `muted` context. */
+export type GeometryTone = 'shade' | 'accent' | 'muted';
+/**
+ * A sector or an arc of a circle, centred on a point of the construction. Angles are in degrees,
+ * anticlockwise from the positive x direction, `from` → `to`. A sector has an id so a region can use it.
+ */
+export interface SectorMark {
+  type: 'sector';
+  id?: string;
+  center: string;
+  radius: number;
+  from: number;
+  to: number;
+  tone?: GeometryTone;
+  label?: string;
+}
+export interface ArcMark {
+  type: 'arc';
+  center: string;
+  radius: number;
+  from: number;
+  to: number;
+  label?: string;
+}
+/**
+ * A filled region: one shape (a polygon or circle of the construction, or a sector mark) minus any
+ * others inside it. "The path is the big rectangle minus the field" is `{ shape: 'outer', minus: ['field'] }`.
+ */
+export interface RegionMark {
+  type: 'region';
+  shape: string;
+  minus?: string[];
+  tone?: GeometryTone;
+  label?: string;
+}
+/** The angle at `at` between the rays to `from` and `to` (point ids), with an optional label ("θ", "60°"). */
+export interface AngleMark {
+  type: 'angle';
+  at: string;
+  from: string;
+  to: string;
+  label?: string;
+}
+/** A right-angle square at `at` between the rays to `from` and `to`. */
+export interface RightAngleMarkSpec {
+  type: 'rightAngle';
+  at: string;
+  from: string;
+  to: string;
+}
+/** Equal-length ticks across the segment between two points; equal sides share a count. */
+export interface TicksMark {
+  type: 'ticks';
+  from: string;
+  to: string;
+  count?: number;
+}
+/** A measured length, drawn beside the side between two points with its label ("2 m", "x + 4"). */
+export interface DimensionMarkSpec {
+  type: 'dimension';
+  from: string;
+  to: string;
+  label: string;
+  /** Which side of from → to (on screen) the dimension line sits on. Default `right`. */
+  side?: 'left' | 'right';
+}
+/** A text label at a point (a region's name, "পুকুর", "x m"). */
+export interface LabelMark {
+  type: 'label';
+  at: string;
+  text: string;
+}
+export type GeometryMark = SectorMark | ArcMark | RegionMark | AngleMark | RightAngleMarkSpec | TicksMark | DimensionMarkSpec | LabelMark;
+export interface GeometryScene {
+  kind: 'geometry';
+  /** The construction, in the Geometry board's element format. */
+  scene: GeoElement[];
+  /** Teaching marks over the construction, drawn in order after it. */
+  marks?: GeometryMark[];
+  /** Visible window in construction units; omit to fit the figure with a margin. */
+  view?: ViewBox;
+  /** Figure height in pixels (default 260). */
+  height?: number;
+  caption?: string;
+  alt: string;
+}
+//#endregion

package/dist/diagrams/graph/GraphDiagram.mjs

@@ -1,10 +1,12 @@
 'use client';
 
+import { textWidth } from "../../kit/figure/text-metrics.mjs";
 import { FigText } from "../../kit/figure/text.mjs";
 import { Figure, HUE, STROKE, alpha } from "../../kit/figure/figure.mjs";
 import { Legend } from "../../kit/figure/legend.mjs";
-import { GraphBarMark } from "../../kit/scene/graph.mjs";
+import { useNarrow } from "../../kit/figure/narrow.mjs";
 import "../../kit/figure/index.mjs";
+import { GraphBarMark } from "../../kit/scene/graph.mjs";
 import { rich, richHtml } from "../rich.mjs";
 import { sampleSeries, ticks, windowOf } from "./core.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -25,7 +27,9 @@ const onScreen = (scope, tone) => scope ? {
 } : { tone };
 const fmtTick = (v) => Math.abs(v) < 1e-9 ? "0" : String(Number(v.toPrecision(4)));
 function GraphDiagram({ scene }) {
-	const [w, h] = scene.size ?? [360, 220];
+	const [authoredWidth, h] = scene.size ?? [360, 220];
+	const { ref, width } = useNarrow();
+	const w = width > 0 ? Math.min(authoredWidth, width) : authoredWidth;
 	const scope = scene.style === "scope";
 	const win = windowOf(scene);
 	const box = scope ? {
@@ -34,10 +38,10 @@ function GraphDiagram({ scene }) {
 		t: 10,
 		b: h - (scene.scope?.timebase || scene.scope?.volts ? 34 : 12)
 	} : {
-		l: 42,
+		l: Math.max(30, ...ticks(win.y0, win.y1, scene.y?.step ?? (win.y1 - win.y0) / 4).map((v) => textWidth(fmtTick(v), { role: "note" }) + 10)),
 		r: w - 16,
-		t: 14,
-		b: h - (scene.x?.label ? 40 : 26)
+		t: scene.y?.label ? 40 : 14,
+		b: h - (scene.x?.label ? 44 : 26)
 	};
 	const px = (x) => box.l + (x - win.x0) / (win.x1 - win.x0) * (box.r - box.l);
 	const py = (y) => box.b - (y - win.y0) / (win.y1 - win.y0) * (box.b - box.t);
@@ -71,21 +75,49 @@ function GraphDiagram({ scene }) {
 	} else {
 		const xs = ticks(win.x0, win.x1, scene.x?.step ?? (win.x1 - win.x0) / 5);
 		const ys = ticks(win.y0, win.y1, scene.y?.step ?? (win.y1 - win.y0) / 4);
-		(scene.categories ? [] : xs).forEach((v) => grid.push(/* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
-			x1: px(v),
-			y1: box.t,
-			x2: px(v),
-			y2: box.b,
-			stroke: alpha(HUE.ink, 8),
-			strokeWidth: STROKE.hair
-		}), /* @__PURE__ */ jsx(FigText, {
-			x: px(v),
-			y: box.b + 14,
-			size: "note",
-			tone: "soft",
-			anchor: "middle",
-			children: fmtTick(v)
-		})] }, `tx${v}`)));
+		const tickWidth = (v) => textWidth(fmtTick(v), { role: "note" });
+		const pitch = xs.length > 1 ? Math.abs(px(xs[1]) - px(xs[0])) : box.r - box.l;
+		const requiredStride = Math.max(1, Math.ceil((Math.max(0, ...xs.map(tickWidth)) + 8) / pitch));
+		const familiar = (step) => {
+			const leading = step / 10 ** Math.floor(Math.log10(step));
+			return [
+				1,
+				2,
+				5
+			].some((v) => Math.abs(leading - v) < 1e-8);
+		};
+		let stride = requiredStride;
+		if (requiredStride > 1 && xs.length > 1) {
+			const step = Math.abs(xs[1] - xs[0]);
+			for (let candidate = requiredStride; candidate < xs.length; candidate += 1) {
+				if (familiar(candidate * step)) {
+					stride = candidate;
+					break;
+				}
+			}
+		}
+		const labelled = new Set(xs.map((_, i) => i).filter((i) => i % stride === 0));
+		const last = xs.length - 1;
+		const previous = Math.max(-1, ...labelled);
+		if (last >= 0 && !labelled.has(last) && (previous < 0 || px(xs[last]) - px(xs[previous]) >= (tickWidth(xs[last]) + tickWidth(xs[previous])) / 2 + 8)) labelled.add(last);
+		(scene.categories ? [] : xs).forEach((v, i) => grid.push(/* @__PURE__ */ jsxs("g", {
+			"data-axis": "x",
+			children: [/* @__PURE__ */ jsx("line", {
+				x1: px(v),
+				y1: box.t,
+				x2: px(v),
+				y2: box.b,
+				stroke: alpha(HUE.ink, 8),
+				strokeWidth: STROKE.hair
+			}), labelled.has(i) ? /* @__PURE__ */ jsx(FigText, {
+				x: px(v),
+				y: box.b + 14,
+				size: "note",
+				tone: "soft",
+				anchor: "middle",
+				children: fmtTick(v)
+			}) : null]
+		}, `tx${v}`)));
 		ys.forEach((v) => grid.push(/* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
 			x1: box.l,
 			y1: py(v),
@@ -113,7 +145,7 @@ function GraphDiagram({ scene }) {
 			stroke: m.type === "hole" ? ink : undefined,
 			strokeWidth: STROKE.line
 		}), /* @__PURE__ */ jsx(FigText, {
-			x: px(m.x) + 7,
+			x: Math.min(px(m.x) + 7, w - textWidth(m.label ?? "", { role: "label" }) - 8),
 			y: py(m.y) - 7,
 			size: "label",
 			...onScreen(scope, "ink"),
@@ -143,7 +175,7 @@ function GraphDiagram({ scene }) {
 					fill: color
 				}),
 				/* @__PURE__ */ jsx(FigText, {
-					x: (a + b) / 2,
+					x: Math.max(textWidth(m.label, { role: "label" }) / 2 + 8, Math.min((a + b) / 2, w - textWidth(m.label, { role: "label" }) / 2 - 8)),
 					y: y - 9,
 					size: "label",
 					anchor: "middle",
@@ -175,11 +207,13 @@ function GraphDiagram({ scene }) {
 	const legendHeight = barKeys.length ? barKeys.length * 20 + 8 : 0;
 	const settings = [scene.scope?.volts, scene.scope?.timebase].filter(Boolean).join("   ·   ");
 	return /* @__PURE__ */ jsxs("figure", {
+		ref,
 		className: "lab-diagram",
 		"data-diagram": "graph",
 		children: [/* @__PURE__ */ jsxs(Figure, {
 			viewBox: [w, h + legendHeight],
 			domain: "physics",
+			composition: "content",
 			label: scene.alt ?? (scope ? `Oscilloscope trace. ${settings}` : "Graph."),
 			children: [
 				scope ? /* @__PURE__ */ jsx("rect", {
@@ -224,8 +258,8 @@ function GraphDiagram({ scene }) {
 						children: rich(scene.x.label)
 					}) : null,
 					scene.y?.label ? /* @__PURE__ */ jsx(FigText, {
-						x: box.l + 4,
-						y: box.t + 2,
+						x: box.l,
+						y: 14,
 						size: "label",
 						baseline: "hanging",
 						children: rich(scene.y.label)