@classytic/labs 0.3.0 → 0.4.0

package/dist/kit/figure/text.mjs

@@ -1,17 +1,58 @@
 'use client';
 
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/figure/text.tsx
-function FigText({ x, y, size = "label", tone = "ink", anchor = "start", baseline = "auto", rotate, halo = true, className, children }) {
+/**
+* Roughly how wide one character is at each size, in figure units.
+*
+* Estimates, because the sizes are CSS tokens and nothing can be measured while the markup is being
+* built. They only have to be close enough to choose a line break.
+*/
+const CHAR_WIDTH = {
+	eyebrow: 6.2,
+	note: 5.6,
+	label: 6.6,
+	measure: 8.2,
+	title: 9.6
+};
+/**
+* A sentence, wrapped across as many lines as it needs.
+*
+* SVG does not wrap text, so a scene with something to say has three options: cut it short, let it
+* run off the side, or squeeze it. The third is what {@link FigTextProps.fit} was reached for, and
+* it is wrong for a sentence: fit is for a label that slightly overflows its container, and asking
+* it to hold a paragraph on one line compresses the glyphs until the words are unreadable while the
+* text technically remains on screen.
+*
+* So anything longer than a label goes through here instead, and the width that would have
+* compressed it decides where it breaks.
+*
+* The wrapping itself is {@link wrapText}, which already existed for exactly this reason. This adds
+* only the laying out of the lines it returns.
+*/
+function FigParagraph({ x, y, width, size = "note", lineHeight, children, ...rest }) {
+	const step = lineHeight ?? CHAR_WIDTH[size] * 3;
+	return /* @__PURE__ */ jsx(Fragment, { children: wrapText(children, width, CHAR_WIDTH[size]).map((line, index) => /* @__PURE__ */ jsx(FigText, {
+		x,
+		y: y + index * step,
+		size,
+		...rest,
+		children: line
+	}, index)) });
+}
+function FigText({ x, y, size = "label", tone = "ink", anchor = "start", baseline = "auto", rotate, halo = true, fit, caps, className, children }) {
 	return /* @__PURE__ */ jsx("text", {
 		className: ["fig-text", className].filter(Boolean).join(" "),
+		"data-caps": caps === false ? "false" : void 0,
 		"data-size": size === "label" ? void 0 : size,
 		"data-tone": tone === "ink" ? void 0 : tone,
 		"data-halo": halo ? void 0 : "false",
 		x,
 		y,
 		textAnchor: anchor,
+		textLength: fit,
+		lengthAdjust: fit === void 0 ? void 0 : "spacingAndGlyphs",
 		dominantBaseline: baseline === "auto" ? void 0 : baseline,
 		transform: rotate ? `rotate(${rotate} ${x} ${y})` : void 0,
 		children
@@ -39,6 +80,27 @@ function FigTag({ x, y, children, color = "var(--fig-hue-1)", anchor = "start",
 		children
 	})] });
 }
+/**
+* Wrap a sentence to a width in user units, because SVG `<text>` does not wrap.
+*
+* Neither visual checker can catch the failure this prevents: `overflow-check` measures HTML at
+* 360 px and `collision-check` looks for overlapping boxes, so a caption running off the right
+* edge of a figure is invisible to both. A 118-character cause line lost its last two words and
+* only a rendered PNG showed it.
+*
+* `perChar` is measured per size, not guessed: 5.6 units for `note`, 6.6 for `label`.
+*/
+function wrapText(text, width, perChar = 5.6) {
+	const budget = Math.max(8, Math.floor(width / perChar));
+	const lines = [];
+	let line = "";
+	for (const word of text.split(/\s+/)) if (line && `${line} ${word}`.length > budget) {
+		lines.push(line);
+		line = word;
+	} else line = line ? `${line} ${word}` : word;
+	if (line) lines.push(line);
+	return lines;
+}
 
 //#endregion
-export { FigTag, FigText };
+export { FigParagraph, FigTag, FigText, wrapText };

package/dist/kit/finance-viz/apportion-bar.d.mts

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-
 //#region src/kit/finance-viz/apportion-bar.d.ts
 interface ApportionSegment {
   label: string;
@@ -21,13 +20,6 @@ interface ApportionBarProps {
   height?: number;
 }
 /** One pool split into proportional zones; each zone's width = its share of the cost. */
-declare function ApportionBar({
-  total,
-  segments,
-  format,
-  weightLabel,
-  caption,
-  height
-}: ApportionBarProps): ReactNode;
+declare function ApportionBar({ total, segments, format, weightLabel, caption, height }: ApportionBarProps): ReactNode;
 //#endregion
 export { ApportionBar, ApportionBarProps, ApportionSegment };

package/dist/kit/finance-viz/apportion-bar.mjs

@@ -1,24 +1,40 @@
 'use client';
 
+import { Figure, HUE, STROKE, alpha } from "../figure/figure.mjs";
+import { FigText } from "../figure/text.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/finance-viz/apportion-bar.tsx
+/** Six categorical roles. Roles, not values, so the domain palette and the theme both reach them. */
 const PALETTE = [
-	"var(--stage-accent, #3b82f6)",
-	"var(--stage-good, #16a34a)",
-	"var(--stage-warn, #e0a020)",
-	"rgb(150,110,200)",
-	"var(--stage-danger, #e03131)",
-	"rgb(20,160,170)"
+	HUE[1],
+	HUE.good,
+	HUE.warn,
+	HUE[3],
+	HUE.danger,
+	HUE[2]
 ];
+/** Measured advance widths, in figure units, for the two sizes this bar prints at. */
+const CHAR_TITLE = 5.8;
+const CHAR_NOTE = 4.6;
+/**
+* A zone is only as wide as its share, and the smallest share is frequently a word like
+* "Finishing" over 30 units of bar. Text that does not fit is dropped rather than drawn over the
+* neighbouring zone and off the edge of the chart, which is what "620 sq ft" did in a 34-unit
+* Office zone. The share figure is the fact, so it is the last thing to go.
+*/
+const fits = (text, room, charWidth) => text.length * charWidth <= room;
 /** One pool split into proportional zones; each zone's width = its share of the cost. */
 function ApportionBar({ total, segments, format = (n) => `${Math.round(n)}`, weightLabel = "", caption, height = 210 }) {
-	const W = 720, H = height;
-	const GX0 = 24, GX1 = 696, GY0 = caption ? 40 : 20, GY1 = H - 20;
+	const W = 720;
+	const H = height;
+	const GX0 = 24;
+	const GY0 = caption ? 40 : 20;
+	const GY1 = H - 20;
 	const sum = segments.reduce((a, s) => a + Math.max(0, s.weight), 0) || 1;
 	let x = GX0;
 	const cols = segments.map((s, i) => {
-		const w = Math.max(0, s.weight) / sum * (GX1 - GX0);
+		const w = Math.max(0, s.weight) / sum * 672;
 		const seg = {
 			s,
 			i,
@@ -32,20 +48,23 @@ function ApportionBar({ total, segments, format = (n) => `${Math.round(n)}`, wei
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "finance-chart-frame",
-		children: /* @__PURE__ */ jsxs("svg", {
-			viewBox: `0 0 ${W} ${H}`,
-			width: "100%",
-			role: "img",
-			"aria-label": `Pool of ${format(total)} split across ${segments.length} parts by ${weightLabel || "weight"}`,
-			children: [caption && /* @__PURE__ */ jsx("text", {
+		children: /* @__PURE__ */ jsxs(Figure, {
+			viewBox: [W, H],
+			domain: "commerce",
+			label: `Pool of ${format(total)} split across ${segments.length} parts by ${weightLabel || "weight"}`,
+			children: [caption != null && /* @__PURE__ */ jsx(FigText, {
 				x: GX0,
 				y: 24,
-				fontSize: 12,
-				fontWeight: 700,
-				fill: "var(--stage-fg)",
+				size: "title",
 				children: caption
 			}), cols.map((c) => {
 				const narrow = c.w < 78;
+				const room = c.w - 10;
+				const weightText = `${Math.round(c.s.weight).toLocaleString("en-US")} ${weightLabel}`.trim();
+				const shareText = format(c.share);
+				const showLabel = fits(c.s.label, room, narrow ? CHAR_NOTE : CHAR_TITLE);
+				const showWeight = fits(weightText, room, CHAR_NOTE);
+				const showShare = fits(shareText, room, CHAR_TITLE);
 				return /* @__PURE__ */ jsxs("g", { children: [
 					/* @__PURE__ */ jsx("rect", {
 						x: c.x0,
@@ -53,41 +72,31 @@ function ApportionBar({ total, segments, format = (n) => `${Math.round(n)}`, wei
 						width: Math.max(0, c.w - 2),
 						height: GY1 - GY0,
 						rx: 6,
-						fill: c.color,
-						opacity: .2,
+						fill: alpha(c.color, 20),
 						stroke: c.color,
-						strokeWidth: 1.5
+						strokeWidth: STROKE.line
 					}),
-					/* @__PURE__ */ jsx("text", {
+					showLabel && /* @__PURE__ */ jsx(FigText, {
 						x: c.x0 + c.w / 2,
 						y: GY0 + 26,
-						textAnchor: "middle",
-						fontSize: narrow ? 10 : 12.5,
-						fontWeight: 700,
-						fill: "var(--stage-fg)",
+						anchor: "middle",
+						size: narrow ? "note" : "title",
 						children: c.s.label
 					}),
-					/* @__PURE__ */ jsxs("text", {
+					showWeight && /* @__PURE__ */ jsx(FigText, {
 						x: c.x0 + c.w / 2,
 						y: GY0 + 45,
-						textAnchor: "middle",
-						fontSize: 10,
-						fill: "var(--stage-muted)",
-						children: [
-							Math.round(c.s.weight).toLocaleString("en-US"),
-							" ",
-							weightLabel
-						]
+						anchor: "middle",
+						size: "note",
+						tone: "soft",
+						children: weightText
 					}),
-					/* @__PURE__ */ jsx("text", {
+					showShare && /* @__PURE__ */ jsx(FigText, {
 						x: c.x0 + c.w / 2,
 						y: GY1 - 12,
-						textAnchor: "middle",
-						fontSize: narrow ? 11 : 13.5,
-						fontWeight: 800,
-						fill: c.color,
-						style: { fontVariantNumeric: "tabular-nums" },
-						children: format(c.share)
+						anchor: "middle",
+						size: "measure",
+						children: shareText
 					})
 				] }, `${c.s.label}-${c.i}`);
 			})]

package/dist/kit/finance-viz/index.d.mts

@@ -1,4 +1,5 @@
 import { PlotChart, PlotChartProps, PlotGeom, PlotGuide, PlotLegendItem } from "./plot-chart.mjs";
 import { ApportionBar, ApportionBarProps, ApportionSegment } from "./apportion-bar.mjs";
 import { StockGuide, StockTimeline, StockTimelineProps } from "./stock-timeline.mjs";
-import { TradeoffCurve, TradeoffCurveProps } from "./tradeoff-curve.mjs";
+import { TradeoffCurve, TradeoffCurveProps } from "./tradeoff-curve.mjs";
+export { ApportionBar, type ApportionBarProps, type ApportionSegment, PlotChart, type PlotChartProps, type PlotGeom, type PlotGuide, type PlotLegendItem, type StockGuide, StockTimeline, type StockTimelineProps, TradeoffCurve, type TradeoffCurveProps };

package/dist/kit/finance-viz/plot-chart.d.mts

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-
 //#region src/kit/finance-viz/plot-chart.d.ts
 interface PlotGuide {
   value: number;
@@ -36,17 +35,6 @@ interface PlotChartProps {
   height?: number;
   children?: (g: PlotGeom) => ReactNode;
 }
-declare function PlotChart({
-  xMax,
-  yMax,
-  yTicks,
-  formatY,
-  xLabel,
-  guides,
-  legend,
-  ariaLabel,
-  height,
-  children
-}: PlotChartProps): ReactNode;
+declare function PlotChart({ xMax, yMax, yTicks, formatY, xLabel, guides, legend, ariaLabel, height, children }: PlotChartProps): ReactNode;
 //#endregion
 export { PlotChart, PlotChartProps, PlotGeom, PlotGuide, PlotLegendItem };

package/dist/kit/finance-viz/plot-chart.mjs

@@ -1,90 +1,53 @@
 'use client';
 
+import { Figure, HUE } from "../figure/figure.mjs";
+import { Guide, PlotFrame } from "../figure/plot.mjs";
+import { Legend } from "../figure/legend.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/finance-viz/plot-chart.tsx
-/** haloed label, a background stroke keeps text legible over gridlines and curves. */
-function Halo({ x, y, children, color = "var(--stage-muted)", size = 10, weight = 400, anchor = "start" }) {
-	return /* @__PURE__ */ jsx("text", {
-		x,
-		y,
-		fontSize: size,
-		fontWeight: weight,
-		textAnchor: anchor,
-		fill: color,
-		stroke: "var(--stage-bg)",
-		strokeWidth: 3.5,
-		style: { paintOrder: "stroke" },
-		children
-	});
-}
 function PlotChart({ xMax, yMax, yTicks, formatY = (n) => `${Math.round(n)}`, xLabel, guides = [], legend = [], ariaLabel, height = 340, children }) {
-	const W = 720, H = height;
-	const GX0 = 66, GX1 = 700;
+	const W = 720;
+	const H = height;
+	const GX0 = 66;
+	const GX1 = 700;
 	const GY0 = legend.length ? 44 : 24;
 	const GY1 = H - 34;
-	const X = (x) => GX0 + (xMax > 0 ? x / xMax : 0) * (GX1 - GX0);
+	const X = (x) => GX0 + (xMax > 0 ? x / xMax : 0) * 634;
 	const Y = (v) => GY1 - (yMax > 0 ? v / yMax : 0) * (GY1 - GY0);
 	const ticks = yTicks ?? [
 		0,
 		yMax / 2,
 		yMax
 	];
-	let lx = GX0;
-	const legendEls = legend.map((it) => {
-		const el = /* @__PURE__ */ jsxs("g", {
-			transform: `translate(${lx}, 20)`,
-			fontSize: 11,
-			children: [/* @__PURE__ */ jsx("line", {
-				x1: 0,
-				y1: 0,
-				x2: 20,
-				y2: 0,
-				stroke: it.color,
-				strokeWidth: it.dashed ? 2 : 3,
-				strokeDasharray: it.dashed ? "5 4" : void 0
-			}), /* @__PURE__ */ jsx("text", {
-				x: 26,
-				y: 4,
-				fill: "var(--stage-fg)",
-				children: it.label
-			})]
-		}, it.label);
-		lx += 26 + it.label.length * 6.6 + 22;
-		return el;
-	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "finance-chart-frame",
-		children: /* @__PURE__ */ jsxs("svg", {
-			viewBox: `0 0 ${W} ${H}`,
-			width: "100%",
-			role: "img",
-			"aria-label": ariaLabel ?? "chart",
-			children: [
-				legendEls,
-				ticks.map((t, i) => /* @__PURE__ */ jsx("line", {
-					x1: GX0,
-					y1: Y(t),
-					x2: GX1,
-					y2: Y(t),
-					stroke: "var(--stage-grid)",
-					strokeWidth: 1,
-					opacity: .45
-				}, `grid${i}`)),
-				ticks.map((t, i) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
-					x1: GX0 - 4,
-					y1: Y(t),
-					x2: GX0,
-					y2: Y(t),
-					stroke: "var(--stage-muted)",
-					strokeWidth: 1
-				}), /* @__PURE__ */ jsx(Halo, {
-					x: GX0 - 8,
-					y: Y(t) + 3,
-					anchor: "end",
-					children: formatY(t)
-				})] }, i)),
-				children?.({
+		children: /* @__PURE__ */ jsxs(Figure, {
+			viewBox: [W, H],
+			domain: "commerce",
+			label: ariaLabel ?? "chart",
+			children: [legend.length > 0 && /* @__PURE__ */ jsx(Legend, {
+				x: GX0,
+				y: 20,
+				maxWidth: 634,
+				entries: legend.map((it) => ({
+					label: it.label,
+					color: it.color,
+					mark: it.dashed ? "dashed" : "line"
+				}))
+			}), /* @__PURE__ */ jsxs(PlotFrame, {
+				x: GX0,
+				y: GY0,
+				w: 634,
+				h: GY1 - GY0,
+				arrows: false,
+				grid: ticks.map((t) => Y(t)),
+				yTicks: ticks.map((t) => ({
+					at: Y(t),
+					label: formatY(t)
+				})),
+				...xLabel ? { xLabel } : {},
+				children: [children?.({
 					X,
 					Y,
 					GX0,
@@ -93,53 +56,21 @@ function PlotChart({ xMax, yMax, yTicks, formatY = (n) => `${Math.round(n)}`, xL
 					GY1,
 					W,
 					H
-				}),
-				guides.map((g) => {
+				}), guides.map((g) => {
 					const right = g.side === "right";
-					const col = g.color ?? "var(--stage-grid)";
-					return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
-						x1: GX0,
+					return /* @__PURE__ */ jsx(Guide, {
+						x1: right ? GX0 : GX1,
 						y1: Y(g.value),
-						x2: GX1,
+						x2: right ? GX1 : GX0,
 						y2: Y(g.value),
-						stroke: col,
-						strokeWidth: 1,
-						strokeDasharray: "3 4"
-					}), /* @__PURE__ */ jsx(Halo, {
-						x: right ? GX1 - 4 : 72,
-						y: Y(g.value) - 4,
-						anchor: right ? "end" : "start",
-						color: g.color ?? "var(--stage-muted)",
-						size: 9.5,
-						weight: 600,
-						children: g.label
-					})] }, g.label);
-				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: GX0,
-					y1: GY0 - 6,
-					x2: GX0,
-					y2: GY1,
-					stroke: "var(--stage-fg)",
-					strokeWidth: 1.5
-				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: GX0,
-					y1: GY1,
-					x2: GX1,
-					y2: GY1,
-					stroke: "var(--stage-fg)",
-					strokeWidth: 1.5
-				}),
-				xLabel && /* @__PURE__ */ jsx("text", {
-					x: GX1,
-					y: GY1 + 18,
-					textAnchor: "end",
-					fontSize: 10,
-					fill: "var(--stage-muted)",
-					children: xLabel
-				})
-			]
+						color: g.color ?? HUE.soft,
+						label: g.label,
+						labelAnchor: right ? "end" : "start",
+						labelDx: right ? -4 : 6,
+						labelDy: -6
+					}, g.label);
+				})]
+			})]
 		})
 	});
 }

package/dist/kit/finance-viz/stock-timeline.d.mts

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-
 //#region src/kit/finance-viz/stock-timeline.d.ts
 interface StockGuide {
   level: number;
@@ -20,14 +19,6 @@ interface StockTimelineProps {
   height?: number;
 }
 /** A level-vs-time chart with guide lines, the reorder sawtooth and its kin. */
-declare function StockTimeline({
-  series,
-  guides,
-  xLabel,
-  caption,
-  dangerBelow,
-  accent,
-  height
-}: StockTimelineProps): ReactNode;
+declare function StockTimeline({ series, guides, xLabel, caption, dangerBelow, accent, height }: StockTimelineProps): ReactNode;
 //#endregion
 export { StockGuide, StockTimeline, StockTimelineProps };

package/dist/kit/finance-viz/stock-timeline.mjs

@@ -1,99 +1,75 @@
 'use client';
 
+import { Figure, HUE, alpha } from "../figure/figure.mjs";
+import { FigText } from "../figure/text.mjs";
+import { Area, Curve, Guide, PlotFrame } from "../figure/plot.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/finance-viz/stock-timeline.tsx
 /** A level-vs-time chart with guide lines, the reorder sawtooth and its kin. */
-function StockTimeline({ series, guides = [], xLabel, caption, dangerBelow, accent = "var(--stage-accent, #3b82f6)", height = 280 }) {
-	const W = 720, H = height;
-	const GX0 = 44, GX1 = 700, GY0 = caption ? 34 : 18, GY1 = H - 34;
+function StockTimeline({ series, guides = [], xLabel, caption, dangerBelow, accent = HUE[1], height = 280 }) {
+	const W = 720;
+	const H = height;
+	const GX0 = 44;
+	const GX1 = 700;
+	const GY0 = caption ? 34 : 18;
+	const GY1 = H - 34;
 	const n = Math.max(1, series.length - 1);
 	const maxY = Math.max(1, ...series, ...guides.map((g) => g.level)) * 1.08;
-	const X = (i) => GX0 + i / n * (GX1 - GX0);
+	const X = (i) => GX0 + i / n * 656;
 	const Y = (v) => GY1 - v / maxY * (GY1 - GY0);
-	const linePts = series.map((s, i) => `${X(i).toFixed(1)},${Y(s).toFixed(1)}`).join(" ");
-	const areaPts = `${GX0},${GY1} ${linePts} ${X(n)},${GY1}`;
+	const points = series.map((s, i) => [X(i), Y(s)]);
 	return /* @__PURE__ */ jsx("div", {
 		className: "finance-chart-frame",
-		children: /* @__PURE__ */ jsxs("svg", {
-			viewBox: `0 0 ${W} ${H}`,
-			width: "100%",
-			role: "img",
-			"aria-label": `Stock level over time${guides.length ? `; ${guides.map((g) => `${g.label} ${Math.round(g.level)}`).join(", ")}` : ""}`,
-			children: [
-				caption && /* @__PURE__ */ jsx("text", {
-					x: GX0,
-					y: 22,
-					fontSize: 11.5,
-					fill: "var(--stage-muted)",
-					children: caption
-				}),
-				dangerBelow != null && dangerBelow > 0 && /* @__PURE__ */ jsx("rect", {
-					x: GX0,
-					y: Y(dangerBelow),
-					width: GX1 - GX0,
-					height: GY1 - Y(dangerBelow),
-					fill: "var(--stage-danger, #e03131)",
-					opacity: .06
-				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: GX0,
-					y1: GY0,
-					x2: GX0,
-					y2: GY1,
-					stroke: "var(--stage-fg)",
-					strokeWidth: 1.5
-				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: GX0,
-					y1: GY1,
-					x2: GX1,
-					y2: GY1,
-					stroke: "var(--stage-fg)",
-					strokeWidth: 1.5
-				}),
-				guides.map((g) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
-					x1: GX0,
-					y1: Y(g.level),
-					x2: GX1,
-					y2: Y(g.level),
-					stroke: g.color,
-					strokeWidth: 1,
-					strokeDasharray: "4 4"
-				}), /* @__PURE__ */ jsxs("text", {
-					x: GX1 - 4,
-					y: Y(g.level) - 4,
-					textAnchor: "end",
-					fontSize: 9.5,
-					fontWeight: 600,
-					fill: g.color,
-					children: [
-						g.label,
-						" ",
-						Math.round(g.level)
-					]
-				})] }, g.label)),
-				/* @__PURE__ */ jsx("polygon", {
-					points: areaPts,
-					fill: accent,
-					opacity: .1
-				}),
-				/* @__PURE__ */ jsx("polyline", {
-					points: linePts,
-					fill: "none",
-					stroke: accent,
-					strokeWidth: 2.5,
-					strokeLinejoin: "round"
-				}),
-				xLabel && /* @__PURE__ */ jsx("text", {
-					x: GX1,
-					y: GY1 + 16,
-					textAnchor: "end",
-					fontSize: 10,
-					fill: "var(--stage-muted)",
-					children: xLabel
-				})
-			]
+		children: /* @__PURE__ */ jsxs(Figure, {
+			viewBox: [W, H],
+			domain: "commerce",
+			label: `Stock level over time${guides.length ? `; ${guides.map((g) => `${g.label} ${Math.round(g.level)}`).join(", ")}` : ""}`,
+			children: [caption != null && /* @__PURE__ */ jsx(FigText, {
+				x: GX0,
+				y: 22,
+				size: "note",
+				tone: "soft",
+				children: caption
+			}), /* @__PURE__ */ jsxs(PlotFrame, {
+				x: GX0,
+				y: GY0,
+				w: 656,
+				h: GY1 - GY0,
+				arrows: false,
+				...xLabel ? { xLabel } : {},
+				children: [
+					dangerBelow != null && dangerBelow > 0 && /* @__PURE__ */ jsx("rect", {
+						x: GX0,
+						y: Y(dangerBelow),
+						width: 656,
+						height: GY1 - Y(dangerBelow),
+						fill: alpha(HUE.danger, 6)
+					}),
+					/* @__PURE__ */ jsx(Area, {
+						points,
+						baseY: GY1,
+						color: accent,
+						opacity: 10
+					}),
+					/* @__PURE__ */ jsx(Curve, {
+						points,
+						color: accent,
+						weight: "edge"
+					}),
+					guides.map((g) => /* @__PURE__ */ jsx(Guide, {
+						x1: GX0,
+						y1: Y(g.level),
+						x2: GX1,
+						y2: Y(g.level),
+						color: g.color,
+						label: `${g.label} ${Math.round(g.level)}`,
+						labelAnchor: "end",
+						labelDx: -4,
+						labelDy: -6
+					}, g.label))
+				]
+			})]
 		})
 	});
 }