@classytic/labs 0.4.0 → 0.5.0

package/dist/deep-learning/visuals/anomaly-diagram.mjs

@@ -4,7 +4,7 @@ import { Figure, HUE, STROKE, tint } from "../../kit/figure/figure.mjs";
 import { FigText } from "../../kit/figure/text.mjs";
 import { FigureAction } from "../../kit/figure/action.mjs";
 import { PixelGrid } from "./autoencoder-diagram.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/deep-learning/visuals/anomaly-diagram.tsx
 const CELL = 21;
@@ -20,7 +20,40 @@ function ResidualGrid({ x, y, values }) {
 		strokeWidth: value > .05 ? STROKE.line : STROKE.hair
 	}, index)) });
 }
-function MemoryGlyph({ trace }) {
+function MiniFeature({ x, y, pattern }) {
+	return /* @__PURE__ */ jsx("g", { children: pattern.map((cell, index) => /* @__PURE__ */ jsx("rect", {
+		x: x - 10 + index % 4 * 5,
+		y: y - 10 + Math.floor(index / 4) * 5,
+		width: 4.5,
+		height: 4.5,
+		fill: cell > .05 ? tint(HUE.ink, 20 + cell * 70) : "none"
+	}, index)) });
+}
+function MemoryGlyph({ trace, patterns }) {
+	if (patterns) return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("path", {
+			d: "M 180 44 C 205 52 205 80 180 88 C 155 80 155 52 180 44 Z",
+			fill: tint(HUE[2], 22 + trace.latent[0] * 34),
+			stroke: HUE[2],
+			strokeWidth: STROKE.line
+		}),
+		/* @__PURE__ */ jsx(MiniFeature, {
+			x: 180,
+			y: 66,
+			pattern: patterns[0]
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M 180 100 C 205 108 205 136 180 144 C 155 136 155 108 180 100 Z",
+			fill: tint(HUE[2], 22 + trace.latent[1] * 34),
+			stroke: HUE[2],
+			strokeWidth: STROKE.line
+		}),
+		/* @__PURE__ */ jsx(MiniFeature, {
+			x: 180,
+			y: 122,
+			pattern: patterns[1]
+		})
+	] });
 	return /* @__PURE__ */ jsxs("g", { children: [
 		/* @__PURE__ */ jsx("path", {
 			d: "M 180 44 C 205 52 205 80 180 88 C 155 80 155 52 180 44 Z",
@@ -48,7 +81,7 @@ function MemoryGlyph({ trace }) {
 		})
 	] });
 }
-function AnomalyDiagram({ input, trace, onTogglePixel, onUsePattern }) {
+function AnomalyDiagram({ input, trace, onTogglePixel, onUsePattern, patterns }) {
 	const verdict = trace.anomalous ? "unexplained pattern" : "fits learned memory";
 	return /* @__PURE__ */ jsxs(Figure, {
 		viewBox: [360, 235],
@@ -56,7 +89,7 @@ function AnomalyDiagram({ input, trace, onTogglePixel, onUsePattern }) {
 		interactive: true,
 		label: `${verdict}. Residual anomaly score ${trace.anomalyScore.toFixed(2)}.`,
 		children: [
-			/* @__PURE__ */ jsx(FigureAction, {
+			onUsePattern ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FigureAction, {
 				label: "Try a familiar pattern",
 				selected: !trace.anomalous,
 				onActivate: () => onUsePattern("familiar"),
@@ -73,8 +106,7 @@ function AnomalyDiagram({ input, trace, onTogglePixel, onUsePattern }) {
 					tone: !trace.anomalous ? "hue-1" : "soft",
 					children: "familiar"
 				})] })
-			}),
-			/* @__PURE__ */ jsx(FigureAction, {
+			}), /* @__PURE__ */ jsx(FigureAction, {
 				label: "Try a strange pattern",
 				selected: trace.anomalous,
 				onActivate: () => onUsePattern("strange"),
@@ -91,7 +123,7 @@ function AnomalyDiagram({ input, trace, onTogglePixel, onUsePattern }) {
 					tone: trace.anomalous ? "hot" : "soft",
 					children: "strange"
 				})] })
-			}),
+			})] }) : null,
 			/* @__PURE__ */ jsx(FigText, {
 				x: 61,
 				y: 48,
@@ -117,7 +149,7 @@ function AnomalyDiagram({ input, trace, onTogglePixel, onUsePattern }) {
 				x: 22,
 				y: 62,
 				values: input,
-				editable: true,
+				editable: Boolean(onTogglePixel),
 				onToggle: onTogglePixel
 			}),
 			/* @__PURE__ */ jsx("path", {
@@ -126,7 +158,10 @@ function AnomalyDiagram({ input, trace, onTogglePixel, onUsePattern }) {
 				stroke: HUE.soft,
 				strokeWidth: STROKE.line
 			}),
-			/* @__PURE__ */ jsx(MemoryGlyph, { trace }),
+			/* @__PURE__ */ jsx(MemoryGlyph, {
+				trace,
+				patterns
+			}),
 			/* @__PURE__ */ jsx("path", {
 				d: "M 209 79 C 226 85 232 88 249 88 M 209 126 C 226 125 232 122 249 122",
 				fill: "none",

package/dist/deep-learning/visuals/attention-roles.mjs

@@ -0,0 +1,21 @@
+import { HUE } from "../../kit/figure/figure.mjs";
+
+//#region src/deep-learning/visuals/attention-roles.ts
+/**
+* One colour per attention role, shared by every attention figure (routing, causal mask, Q/K/V,
+* scaled dot-product, multi-head, encoder-decoder, transformer block). A learner who met the query
+* as amber in one lab recognises it instantly in the next, so a role never borrows a token's index
+* colour, and none of these use HUE[2]/HUE[3], which change with the figure's `domain`.
+*
+* query amber · key violet · value green · residual stream accent blue. Red stays reserved for a
+* failure (a leak, a lost clue). Every value is a theme token, so all four invert with dark mode.
+*/
+const ROLE = {
+	query: HUE.warn,
+	key: "var(--stage-cat-4)",
+	value: HUE.good,
+	residual: HUE[1]
+};
+
+//#endregion
+export { ROLE };

package/dist/deep-learning/visuals/attention-routing-diagram.mjs

@@ -3,26 +3,22 @@
 import { Figure, HUE, STROKE, tint } from "../../kit/figure/figure.mjs";
 import { FigText } from "../../kit/figure/text.mjs";
 import { FigureAction } from "../../kit/figure/action.mjs";
+import { ROLE } from "./attention-roles.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/deep-learning/visuals/attention-routing-diagram.tsx
-const COLORS = [
-	HUE.danger,
-	HUE[1],
-	HUE.warn,
-	HUE[2],
-	HUE.good
-];
-const X = [
-	42,
-	111,
-	180,
-	249,
-	318
-];
+const LEFT = 22;
+const SPAN = 316;
+/** Centre x of token slot `index` of `count`, spread across the figure. */
+const tokenX = (index, count) => LEFT + (index + .5) * SPAN / count;
 function AttentionRoutingDiagram({ trace, onQuery }) {
+	const n = trace.routes.length;
+	const slot = SPAN / n;
+	const chip = Math.min(58, slot - 6);
 	const strongest = [...trace.routes].sort((a, b) => b.weight - a.weight).slice(0, 2);
-	let budgetX = 22;
+	const queryX = tokenX(trace.queryIndex, n);
+	const queryColor = ROLE.query;
+	let budgetX = LEFT;
 	return /* @__PURE__ */ jsxs(Figure, {
 		viewBox: [360, 230],
 		domain: "math",
@@ -38,21 +34,22 @@ function AttentionRoutingDiagram({ trace, onQuery }) {
 			}),
 			trace.routes.map((route, index) => {
 				const selected = index === trace.queryIndex;
+				const x = tokenX(index, n);
 				return /* @__PURE__ */ jsx(FigureAction, {
 					label: `Use ${route.token.label} as the query`,
 					selected,
 					onActivate: () => onQuery(index),
 					children: /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
-						x: X[index] - 29,
+						x: x - chip / 2,
 						y: 28,
-						width: 58,
+						width: chip,
 						height: 27,
 						rx: 13.5,
-						fill: selected ? tint(COLORS[index], 34) : HUE.paper,
-						stroke: selected ? COLORS[index] : HUE.soft,
+						fill: selected ? tint(ROLE.query, 34) : HUE.paper,
+						stroke: selected ? ROLE.query : HUE.soft,
 						strokeWidth: selected ? STROKE.edge : STROKE.hair
 					}), /* @__PURE__ */ jsx(FigText, {
-						x: X[index],
+						x,
 						y: 42,
 						anchor: "middle",
 						baseline: "middle",
@@ -60,26 +57,26 @@ function AttentionRoutingDiagram({ trace, onQuery }) {
 						halo: false,
 						children: route.token.label
 					})] })
-				}, `query-${route.token.label}`);
+				}, `query-${index}`);
 			}),
 			/* @__PURE__ */ jsx("path", {
-				d: `M ${X[trace.queryIndex]} 60 C ${X[trace.queryIndex]} 72, 180 68, 180 82`,
+				d: `M ${queryX} 60 C ${queryX} 72, 180 68, 180 82`,
 				fill: "none",
-				stroke: COLORS[trace.queryIndex],
+				stroke: queryColor,
 				strokeWidth: STROKE.line
 			}),
 			/* @__PURE__ */ jsx("path", {
 				d: "M 180 75 L 188 87 L 172 87 Z",
-				fill: COLORS[trace.queryIndex]
+				fill: queryColor
 			}),
 			/* @__PURE__ */ jsx("rect", {
-				x: 142,
+				x: 132,
 				y: 85,
-				width: 76,
+				width: 96,
 				height: 30,
 				rx: 15,
-				fill: tint(COLORS[trace.queryIndex], 28),
-				stroke: COLORS[trace.queryIndex],
+				fill: tint(queryColor, 28),
+				stroke: queryColor,
 				strokeWidth: STROKE.edge
 			}),
 			/* @__PURE__ */ jsxs(FigText, {
@@ -92,31 +89,31 @@ function AttentionRoutingDiagram({ trace, onQuery }) {
 				children: [trace.query.label, " asks"]
 			}),
 			trace.routes.map((route, index) => /* @__PURE__ */ jsx("path", {
-				d: `M 180 116 C 180 132, ${X[index]} 125, ${X[index]} 145`,
+				d: `M 180 116 C 180 132, ${tokenX(index, n)} 125, ${tokenX(index, n)} 145`,
 				fill: "none",
-				stroke: COLORS[index],
+				stroke: ROLE.key,
 				strokeWidth: .8 + route.weight * 8,
 				opacity: .25 + route.weight * .75,
 				strokeLinecap: "round"
-			}, `route-${route.token.label}`)),
+			}, `route-${index}`)),
 			trace.routes.map((route, index) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
-				x: X[index] - 27,
+				x: tokenX(index, n) - (chip - 4) / 2,
 				y: 145,
-				width: 54,
+				width: chip - 4,
 				height: 28,
 				rx: 9,
-				fill: tint(COLORS[index], 10 + route.weight * 48),
-				stroke: COLORS[index],
+				fill: tint(ROLE.key, 8 + route.weight * 48),
+				stroke: route.weight > .2 ? ROLE.key : HUE.soft,
 				strokeWidth: route.weight > .2 ? STROKE.edge : STROKE.hair
 			}), /* @__PURE__ */ jsxs(FigText, {
-				x: X[index],
+				x: tokenX(index, n),
 				y: 159,
 				anchor: "middle",
 				baseline: "middle",
 				size: "note",
 				halo: false,
 				children: [Math.round(route.weight * 100), "%"]
-			})] }, `source-${route.token.label}`)),
+			})] }, `source-${index}`)),
 			/* @__PURE__ */ jsx(FigText, {
 				x: 22,
 				y: 194,
@@ -132,17 +129,19 @@ function AttentionRoutingDiagram({ trace, onQuery }) {
 				children: strongest.map((route) => route.token.label).join(" + ")
 			}),
 			trace.routes.map((route, index) => {
-				const width = route.weight * 316, start = budgetX;
+				const width = route.weight * SPAN, start = budgetX;
 				budgetX += width;
 				return /* @__PURE__ */ jsx("rect", {
 					x: start,
 					y: 203,
 					width,
 					height: 11,
-					rx: index === 0 || index === trace.routes.length - 1 ? 5.5 : 0,
-					fill: COLORS[index],
-					opacity: .45 + route.weight * .55
-				}, `budget-${route.token.label}`);
+					rx: index === 0 || index === n - 1 ? 5.5 : 0,
+					fill: ROLE.key,
+					opacity: .35 + route.weight * .65,
+					stroke: HUE.paper,
+					strokeWidth: STROKE.hair
+				}, `budget-${index}`);
 			}),
 			/* @__PURE__ */ jsx(FigText, {
 				x: 338,
@@ -157,4 +156,4 @@ function AttentionRoutingDiagram({ trace, onQuery }) {
 }
 
 //#endregion
-export { AttentionRoutingDiagram };
+export { AttentionRoutingDiagram, tokenX };

package/dist/deep-learning/visuals/autoencoder-diagram.d.mts

@@ -1,12 +1,15 @@
 import { AutoencoderTrace } from "../core/dense-layer.mjs";
 import { ReactNode } from "react";
 //#region src/deep-learning/visuals/autoencoder-diagram.d.ts
-declare function AutoencoderDiagram({ input, trace, edited, onTogglePixel, onCycleLatent }: {
+declare function AutoencoderDiagram({ input, trace, edited, onTogglePixel, onCycleLatent, patterns, names }: {
   readonly input: readonly number[];
   readonly trace: AutoencoderTrace;
   readonly edited: boolean;
-  readonly onTogglePixel: (index: number) => void;
-  readonly onCycleLatent: (index: 0 | 1) => void;
+  readonly onTogglePixel?: (index: number) => void;
+  readonly onCycleLatent?: (index: 0 | 1) => void;
+  /** Custom feature patterns to draw in the two lenses. */
+  readonly patterns?: readonly [readonly number[], readonly number[]];
+  readonly names?: readonly [string, string];
 }): ReactNode;
 //#endregion
 export { AutoencoderDiagram };

package/dist/deep-learning/visuals/autoencoder-diagram.mjs

@@ -28,7 +28,7 @@ function PixelGrid({ x, y, values, editable, onToggle }) {
 		}, index) : /* @__PURE__ */ jsx("g", { children: square }, index);
 	}) });
 }
-function LatentLens({ x, y, value, direction, changed, onChange }) {
+function LatentLens({ x, y, value, direction, changed, onChange, pattern, name }) {
 	const path = `M ${x} ${y - 24} C ${x + 29} ${y - 16}, ${x + 29} ${y + 16}, ${x} ${y + 24} C ${x - 29} ${y + 16}, ${x - 29} ${y - 16}, ${x} ${y - 24} Z`;
 	const slash = direction === "falling" ? `M ${x - 8} ${y - 8} L ${x + 8} ${y + 8}` : `M ${x - 8} ${y + 8} L ${x + 8} ${y - 8}`;
 	const lens = /* @__PURE__ */ jsxs("g", {
@@ -40,7 +40,13 @@ function LatentLens({ x, y, value, direction, changed, onChange }) {
 				stroke: changed ? HUE.warn : HUE[2],
 				strokeWidth: STROKE.line
 			}),
-			/* @__PURE__ */ jsx("path", {
+			pattern ? pattern.map((cell, index) => /* @__PURE__ */ jsx("rect", {
+				x: x - 10 + index % 4 * 5,
+				y: y - 10 + Math.floor(index / 4) * 5,
+				width: 4.5,
+				height: 4.5,
+				fill: cell > .05 ? tint(HUE.ink, 20 + cell * 70) : "none"
+			}, index)) : /* @__PURE__ */ jsx("path", {
 				d: slash,
 				fill: "none",
 				stroke: HUE.ink,
@@ -58,12 +64,12 @@ function LatentLens({ x, y, value, direction, changed, onChange }) {
 		]
 	});
 	return onChange ? /* @__PURE__ */ jsx(FigureAction, {
-		label: `Set ${direction} stroke strength, currently ${value.toFixed(2)}`,
+		label: `Set ${name ?? `${direction} stroke`} strength, currently ${value.toFixed(2)}`,
 		onActivate: onChange,
 		children: lens
 	}) : lens;
 }
-function AutoencoderDiagram({ input, trace, edited, onTogglePixel, onCycleLatent }) {
+function AutoencoderDiagram({ input, trace, edited, onTogglePixel, onCycleLatent, patterns, names }) {
 	const quality = trace.loss < .01 ? "perfect match" : trace.loss < .08 ? "close match" : "details lost";
 	return /* @__PURE__ */ jsxs(Figure, {
 		viewBox: [360, 228],
@@ -96,7 +102,7 @@ function AutoencoderDiagram({ input, trace, edited, onTogglePixel, onCycleLatent
 				x: 22,
 				y: 42,
 				values: input,
-				editable: true,
+				editable: Boolean(onTogglePixel),
 				onToggle: onTogglePixel
 			}),
 			/* @__PURE__ */ jsx("path", {
@@ -111,7 +117,9 @@ function AutoencoderDiagram({ input, trace, edited, onTogglePixel, onCycleLatent
 				value: trace.latent[0],
 				direction: "falling",
 				changed: edited && trace.latent[0] !== trace.encoded[0],
-				onChange: () => onCycleLatent(0)
+				onChange: onCycleLatent ? () => onCycleLatent(0) : void 0,
+				pattern: patterns?.[0],
+				name: names?.[0]
 			}),
 			/* @__PURE__ */ jsx(LatentLens, {
 				x: 180,
@@ -119,7 +127,9 @@ function AutoencoderDiagram({ input, trace, edited, onTogglePixel, onCycleLatent
 				value: trace.latent[1],
 				direction: "rising",
 				changed: edited && trace.latent[1] !== trace.encoded[1],
-				onChange: () => onCycleLatent(1)
+				onChange: onCycleLatent ? () => onCycleLatent(1) : void 0,
+				pattern: patterns?.[1],
+				name: names?.[1]
 			}),
 			/* @__PURE__ */ jsx("path", {
 				d: "M 209 86 C 225 79 231 65 249 65 M 209 125 C 225 115 231 101 249 101",

package/dist/deep-learning/visuals/backprop-graph-diagram.d.mts

@@ -0,0 +1,23 @@
+import { BackpropTrace, GraphLayout, GraphNodeSpec } from "../core/backprop-graph.mjs";
+import { ReactNode } from "react";
+//#region src/deep-learning/visuals/backprop-graph-diagram.d.ts
+interface BackpropGraphDiagramProps {
+  readonly nodes: readonly GraphNodeSpec[];
+  readonly layout: GraphLayout;
+  readonly trace: BackpropTrace;
+  /** Forward pass done: values and slopes are visible. */
+  readonly forward: boolean;
+  /** Nodes whose gradient has been revealed. */
+  readonly revealed: ReadonlySet<string>;
+  /** Nodes whose gradient stays "?" (the one a goal asks the learner to type). */
+  readonly hidden?: ReadonlySet<string>;
+  /** The node the next backward step reveals. */
+  readonly next?: string;
+  readonly selected?: string;
+  /** The node revealed by the latest step (animates in). */
+  readonly latest?: string;
+  readonly onActivate?: (id: string) => void;
+}
+declare function BackpropGraphDiagram({ nodes, layout, trace, forward, revealed, hidden, next, selected, latest, onActivate }: BackpropGraphDiagramProps): ReactNode;
+//#endregion
+export { BackpropGraphDiagram, BackpropGraphDiagramProps };

package/dist/deep-learning/visuals/backprop-graph-diagram.mjs

@@ -0,0 +1,156 @@
+'use client';
+
+import { Figure, HUE, STROKE, tint } from "../../kit/figure/figure.mjs";
+import { FigText } from "../../kit/figure/text.mjs";
+import { FigureAction } from "../../kit/figure/action.mjs";
+import { OP_SYMBOL } from "../core/backprop-graph.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/deep-learning/visuals/backprop-graph-diagram.tsx
+const W = 92;
+const H = 56;
+const COL = 132;
+const ROW = 74;
+const minus = (s) => s.replace("-", "−");
+/** Two decimals, or three significant figures for small values, with a true minus sign. */
+function fmtGrad(value) {
+	if (!Number.isFinite(value)) return "n/a";
+	if (Math.abs(value) < 5e-4) return "0";
+	const a = Math.abs(value);
+	return minus(a >= 10 ? value.toFixed(1) : a >= .1 ? value.toFixed(2) : value.toPrecision(2));
+}
+function backpropDiagramSize(layout) {
+	return [124 + (layout.columns - 1) * COL, 88 + (layout.rows - 1) * ROW];
+}
+function BackpropGraphDiagram({ nodes, layout, trace, forward, revealed, hidden, next, selected, latest, onActivate }) {
+	const [width, height] = backpropDiagramSize(layout);
+	const cx = (id) => 62 + layout.at[id].col * COL;
+	const cy = (id) => 44 + layout.at[id].row * ROW;
+	const label = (n) => n.label ?? n.id;
+	const gradText = (id) => hidden?.has(id) ? "?" : revealed.has(id) ? fmtGrad(trace.grads[id]) : "";
+	const edges = nodes.flatMap((n) => (n.inputs ?? []).map((from, slot) => {
+		const k = n.inputs.length;
+		const dup = n.inputs.slice(0, slot).filter((id) => id === from).length;
+		const x1 = cx(from) + W / 2;
+		const y1 = cy(from);
+		const x2 = cx(n.id) - W / 2;
+		const y2 = cy(n.id) + (slot - (k - 1) / 2) * 10;
+		const mx = (x1 + x2) / 2;
+		const edge = trace.edges.find((e) => e.to === n.id && e.slot === slot);
+		const collected = revealed.has(from);
+		const collecting = next === from;
+		return {
+			key: `${n.id}-${slot}`,
+			from,
+			to: n.id,
+			x1,
+			y1,
+			x2,
+			y2,
+			mx,
+			dup,
+			local: edge?.local,
+			collected,
+			collecting
+		};
+	}));
+	const ariaParts = nodes.map((n) => {
+		const value = forward ? ` value ${fmtGrad(trace.values[n.id])}` : "";
+		const g = gradText(n.id);
+		return `${label(n)}${value}${g ? `, gradient ${g}` : ""}`;
+	});
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [width, height],
+		domain: "math",
+		interactive: !!onActivate,
+		label: `Computation graph. ${ariaParts.join("; ")}.`,
+		children: [
+			edges.map((e) => /* @__PURE__ */ jsx("path", {
+				d: `M ${e.x1} ${e.y1} C ${e.mx} ${e.y1}, ${e.mx} ${e.y2}, ${e.x2} ${e.y2}`,
+				fill: "none",
+				stroke: e.collected || e.collecting ? HUE.hot : HUE.soft,
+				strokeWidth: e.collected ? STROKE.edge : STROKE.line,
+				strokeDasharray: e.collecting ? "5 4" : void 0,
+				opacity: forward || e.collected ? 1 : .55
+			}, e.key)),
+			forward ? edges.map((e) => e.local == null ? null : /* @__PURE__ */ jsx(FigText, {
+				x: e.mx,
+				y: (e.y1 + e.y2) / 2 - 4 + e.dup * 14,
+				anchor: "middle",
+				baseline: "middle",
+				size: "note",
+				tone: e.collected || e.collecting ? "hot" : "soft",
+				children: fmtGrad(e.local)
+			}, `${e.key}-slope`)) : null,
+			nodes.map((n) => {
+				const x = cx(n.id);
+				const y = cy(n.id);
+				const isNext = next === n.id;
+				const stroke = n.id === trace.output ? HUE.danger : n.op === "param" ? HUE[2] : n.op === "input" ? HUE.soft : HUE.ink;
+				const fill = n.op === "param" ? tint(HUE[2], 16) : n.op === "input" ? tint(HUE.soft, 8) : HUE.paper;
+				const g = gradText(n.id);
+				const body = /* @__PURE__ */ jsxs("g", {
+					className: isNext ? "lab-figure-activate" : void 0,
+					children: [
+						/* @__PURE__ */ jsx("rect", {
+							x: x - W / 2,
+							y: y - H / 2,
+							width: W,
+							height: H,
+							rx: n.op === "param" || n.op === "input" ? 12 : 8,
+							fill,
+							stroke: isNext ? HUE.hot : stroke,
+							strokeWidth: isNext || selected === n.id ? STROKE.edge : STROKE.line,
+							strokeDasharray: n.op === "input" ? "4 3" : void 0
+						}),
+						/* @__PURE__ */ jsx(FigText, {
+							x,
+							y: y - 15,
+							anchor: "middle",
+							baseline: "middle",
+							size: "note",
+							tone: "soft",
+							halo: false,
+							fit: 82,
+							children: `${label(n)} · ${OP_SYMBOL[n.op]}`
+						}),
+						/* @__PURE__ */ jsx("g", {
+							className: forward ? "lab-figure-arrive" : void 0,
+							style: forward ? { animationDelay: `${layout.at[n.id].col * 90}ms` } : void 0,
+							children: /* @__PURE__ */ jsx(FigText, {
+								x,
+								y: y + 2,
+								anchor: "middle",
+								baseline: "middle",
+								size: "label",
+								tone: forward ? "hue-1" : "soft",
+								halo: false,
+								children: forward || n.op === "input" || n.op === "param" ? fmtGrad(trace.values[n.id]) : "?"
+							})
+						}),
+						g ? /* @__PURE__ */ jsx(FigText, {
+							x,
+							y: y + 19,
+							anchor: "middle",
+							baseline: "middle",
+							size: "note",
+							tone: "hot",
+							halo: false,
+							className: latest === n.id ? "lab-figure-arrive" : void 0,
+							children: `grad ${g}`
+						}) : null
+					]
+				});
+				return onActivate ? /* @__PURE__ */ jsx(FigureAction, {
+					label: `${label(n)}${forward ? `, value ${fmtGrad(trace.values[n.id])}` : ""}${g ? `, gradient ${g}` : ""}${isNext ? ". Next to collect its gradient" : ""}`,
+					selected: selected === n.id,
+					onActivate: () => onActivate(n.id),
+					children: body
+				}, n.id) : /* @__PURE__ */ jsx("g", { children: body }, n.id);
+			})
+		]
+	});
+}
+
+//#endregion
+export { BackpropGraphDiagram, backpropDiagramSize, fmtGrad };

package/dist/deep-learning/visuals/causal-mask-diagram.d.mts

@@ -1,10 +1,13 @@
 import { CausalMaskTrace } from "../core/causal-mask.mjs";
 import { ReactNode } from "react";
 //#region src/deep-learning/visuals/causal-mask-diagram.d.ts
-declare function CausalMaskDiagram({ trace, onQuery, onToggleMask }: {
+declare function CausalMaskDiagram({ trace, onQuery, onToggleMask, onToggleCell }: {
   readonly trace: CausalMaskTrace;
   readonly onQuery: (index: number) => void;
+  /** Close (or reopen) every future connection of the current writing position. */
   readonly onToggleMask: () => void;
+  /** Block or unblock one connection of the current writing position. */
+  readonly onToggleCell?: (index: number) => void;
 }): ReactNode;
 //#endregion
 export { CausalMaskDiagram };