@classytic/labs 0.4.0 → 0.5.0

package/dist/deep-learning/visuals/feature-map-diagram.mjs

@@ -39,16 +39,32 @@ function ModeGlyph({ mode, x, selected }) {
 		strokeWidth: STROKE.hair
 	}) : null] });
 }
+/**
+* An image (with its zero-padding ring drawn dashed), the current filter window, and the feature
+* map filling in window by window. The three preset mode buttons are drawn only when `mode` and
+* `onModeChange` are given; the lab itself sets stride and padding from its control dock.
+*/
 function FeatureMapDiagram({ image, trace, mode, step, onModeChange }) {
 	const current = trace.cells[Math.min(step, trace.cells.length - 1)];
-	const inputCell = 22, outputCell = Math.min(22, 104 / Math.max(trace.rows, trace.columns));
+	const k = trace.size ?? 3, pad = trace.padding;
+	const paddedRows = image.length + pad * 2, paddedColumns = (image[0]?.length ?? 0) + pad * 2;
+	const inputCell = Math.min(22, 150 / Math.max(paddedRows, paddedColumns)), outputCell = Math.min(22, 120 / Math.max(trace.rows, trace.columns));
+	const showModes = Boolean(mode && onModeChange);
+	const top = showModes ? 82 : 40;
+	const inputLeft = 14, outputLeft = 210;
+	const gridBottom = top + Math.max(paddedRows * inputCell, trace.rows * outputCell);
+	const height = gridBottom + 52;
+	const maxAbs = Math.max(1e-9, ...trace.cells.map((cell) => Math.abs(cell.value)));
+	const px = (column) => inputLeft + (column + pad) * inputCell;
+	const py = (row) => top + (row + pad) * inputCell;
+	const fmt = (value) => String(Number(value.toFixed(2)));
 	return /* @__PURE__ */ jsxs(Figure, {
-		viewBox: [360, 242],
+		viewBox: [360, height],
 		domain: "math",
-		interactive: true,
-		label: `${MODE_LABEL[mode]} creates a ${trace.rows} by ${trace.columns} feature map`,
+		interactive: showModes,
+		label: `Stride ${trace.stride} and padding ${trace.padding} create a ${trace.rows} by ${trace.columns} feature map. Window ${step + 1} outputs ${fmt(current.value)}.`,
 		children: [
-			MODES.map((id, index) => {
+			showModes ? MODES.map((id, index) => {
 				const x = 35 + index * 109, selected = id === mode;
 				return /* @__PURE__ */ jsx(FigureAction, {
 					label: `Choose ${MODE_LABEL[id]}`,
@@ -66,51 +82,56 @@ function FeatureMapDiagram({ image, trace, mode, step, onModeChange }) {
 						children: MODE_LABEL[id]
 					})] })
 				}, id);
-			}),
+			}) : null,
 			/* @__PURE__ */ jsx(FigText, {
-				x: 78,
-				y: 72,
+				x: inputLeft + paddedColumns * inputCell / 2,
+				y: top - 10,
 				anchor: "middle",
 				size: "label",
 				children: "image"
 			}),
 			/* @__PURE__ */ jsx(FigText, {
-				x: 276,
-				y: 72,
+				x: outputLeft + trace.columns * outputCell / 2,
+				y: top - 10,
 				anchor: "middle",
 				size: "label",
 				children: "feature map"
 			}),
-			image.flatMap((row, rowIndex) => row.map((value, columnIndex) => /* @__PURE__ */ jsx("rect", {
-				x: 23 + columnIndex * inputCell,
-				y: 82 + rowIndex * inputCell,
-				width: 20,
-				height: 20,
-				rx: 3,
-				fill: tint(HUE[1], 12 + value * 48),
-				stroke: HUE[1],
-				strokeWidth: STROKE.hair
-			}, `i${rowIndex}${columnIndex}`))),
+			Array.from({ length: paddedRows }, (_, pr) => Array.from({ length: paddedColumns }, (_, pc) => {
+				const row = pr - pad, column = pc - pad;
+				const value = image[row]?.[column];
+				const padded = value === void 0;
+				return /* @__PURE__ */ jsx("rect", {
+					x: inputLeft + pc * inputCell,
+					y: top + pr * inputCell,
+					width: inputCell - 2,
+					height: inputCell - 2,
+					rx: 3,
+					fill: padded ? HUE.paper : tint(HUE[1], 12 + Math.min(1, Math.max(0, value)) * 48),
+					stroke: padded ? HUE.soft : HUE[1],
+					strokeDasharray: padded ? "2 2" : void 0,
+					strokeWidth: STROKE.hair
+				}, `i${pr}-${pc}`);
+			})),
 			/* @__PURE__ */ jsx("rect", {
 				className: "lab-figure-activate",
-				x: 23 + Math.max(0, current.sourceColumn) * inputCell - (current.sourceColumn < 0 ? inputCell : 0),
-				y: 82 + Math.max(0, current.sourceRow) * inputCell - (current.sourceRow < 0 ? inputCell : 0),
-				width: 64,
-				height: 64,
+				x: px(current.sourceColumn) - 1,
+				y: py(current.sourceRow) - 1,
+				width: inputCell * k,
+				height: inputCell * k,
 				rx: 5,
 				fill: "none",
 				stroke: HUE.warn,
-				strokeWidth: STROKE.edge,
-				strokeDasharray: trace.padding ? "5 3" : void 0
+				strokeWidth: STROKE.edge
 			}),
 			/* @__PURE__ */ jsx(Arrow, {
-				x1: 151,
-				y1: 137,
-				x2: 197,
-				y2: 137,
+				x1: 172,
+				y1: top + 40,
+				x2: 200,
+				y2: top + 40,
 				color: HUE.soft,
 				weight: "line",
-				head: 8
+				head: 7
 			}),
 			trace.cells.map((cell, index) => {
 				const reached = index <= step;
@@ -118,20 +139,20 @@ function FeatureMapDiagram({ image, trace, mode, step, onModeChange }) {
 					opacity: reached ? 1 : .28,
 					className: index === step ? "lab-figure-activate" : void 0,
 					children: /* @__PURE__ */ jsx("rect", {
-						x: 221 + cell.column * outputCell,
-						y: 82 + cell.row * outputCell,
+						x: outputLeft + cell.column * outputCell,
+						y: top + cell.row * outputCell,
 						width: outputCell - 2,
 						height: outputCell - 2,
 						rx: 3,
-						fill: reached ? tint(cell.value >= 0 ? HUE.good : HUE.danger, 18 + Math.min(44, Math.abs(cell.value) * 5)) : HUE.paper,
-						stroke: reached ? cell.value >= 0 ? HUE.good : HUE.danger : HUE.soft,
-						strokeWidth: STROKE.hair
+						fill: reached ? tint(cell.value >= 0 ? HUE.good : HUE.danger, 14 + Math.abs(cell.value) / maxAbs * 48) : HUE.paper,
+						stroke: index === step ? HUE.warn : reached ? cell.value >= 0 ? HUE.good : HUE.danger : HUE.soft,
+						strokeWidth: index === step ? STROKE.line : STROKE.hair
 					})
 				}, `${cell.row}-${cell.column}`);
 			}),
 			/* @__PURE__ */ jsxs(FigText, {
 				x: 180,
-				y: 218,
+				y: gridBottom + 24,
 				anchor: "middle",
 				size: "label",
 				children: [
@@ -140,12 +161,12 @@ function FeatureMapDiagram({ image, trace, mode, step, onModeChange }) {
 					" / ",
 					trace.cells.length,
 					" → ",
-					current.value.toFixed(1)
+					fmt(current.value)
 				]
 			}),
 			/* @__PURE__ */ jsxs(FigText, {
 				x: 180,
-				y: 239,
+				y: gridBottom + 45,
 				anchor: "middle",
 				size: "note",
 				tone: "hue-1",

package/dist/deep-learning/visuals/feed-forward-workshop-diagram.d.mts

@@ -1,7 +1,7 @@
-import { FeedForwardTrace } from "../core/feed-forward-network.mjs";
+import { FeedForwardStageIndex, FeedForwardTrace } from "../core/feed-forward-network.mjs";
 import { ReactNode } from "react";
 //#region src/deep-learning/visuals/feed-forward-workshop-diagram.d.ts
-type FeedForwardStage = 0 | 1 | 2 | 3;
+type FeedForwardStage = FeedForwardStageIndex;
 declare function FeedForwardWorkshopDiagram({ trace, stage, onStageChange }: {
   readonly trace: FeedForwardTrace;
   readonly stage: FeedForwardStage;

package/dist/deep-learning/visuals/feed-forward-workshop-diagram.mjs

@@ -3,6 +3,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 { feedForwardStageValues } from "../core/feed-forward-network.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/deep-learning/visuals/feed-forward-workshop-diagram.tsx
@@ -14,8 +15,10 @@ const LABELS = [
 ];
 const fmt = (x) => x.toFixed(2);
 function FeedForwardWorkshopDiagram({ trace, stage, onStageChange }) {
-	const values = stage === 0 ? trace.input : stage === 1 ? trace.expanded : stage === 2 ? trace.activated : trace.output;
-	const xs = values.map((_, i) => values.length === 2 ? 120 + i * 120 : 60 + i * 80);
+	const values = feedForwardStageValues(trace, stage);
+	const pitch = 312 / values.length;
+	const xs = values.map((_, i) => 24 + pitch * (i + .5));
+	const cellW = Math.min(54, pitch - 8);
 	return /* @__PURE__ */ jsxs(Figure, {
 		viewBox: [360, 238],
 		domain: "computing",
@@ -69,9 +72,9 @@ function FeedForwardWorkshopDiagram({ trace, stage, onStageChange }) {
 			}),
 			values.map((value, i) => /* @__PURE__ */ jsxs("g", { children: [
 				/* @__PURE__ */ jsx("rect", {
-					x: xs[i] - 27,
+					x: xs[i] - cellW / 2,
 					y: 106,
-					width: 54,
+					width: cellW,
 					height: 44,
 					rx: 8,
 					fill: stage === 2 ? tint(HUE[2], 28) : tint(HUE[1], 24),
@@ -85,7 +88,7 @@ function FeedForwardWorkshopDiagram({ trace, stage, onStageChange }) {
 					baseline: "middle",
 					size: "note",
 					halo: false,
-					children: ["h", i + 1]
+					children: [stage === 0 ? "x" : stage === 3 ? "y" : "h", i + 1]
 				}),
 				/* @__PURE__ */ jsx(FigText, {
 					x: xs[i],
@@ -94,6 +97,7 @@ function FeedForwardWorkshopDiagram({ trace, stage, onStageChange }) {
 					baseline: "middle",
 					size: "label",
 					halo: false,
+					fit: cellW - 4,
 					children: fmt(value)
 				})
 			] }, i)),

package/dist/deep-learning/visuals/latent-space-diagram.d.mts

@@ -1,9 +1,17 @@
 import { LatentDecodeTrace } from "../core/dense-layer.mjs";
 import { ReactNode } from "react";
 //#region src/deep-learning/visuals/latent-space-diagram.d.ts
-declare function LatentSpaceDiagram({ trace, onChoose }: {
+/**
+ * A levels × levels map of latent coordinates, each tile a button that decodes its coordinate.
+ * With `preview` the tiles show the decoded 4 × 4 image; otherwise the two diagonal strokes.
+ */
+declare function LatentSpaceDiagram({ trace, onChoose, levels, axisLabels, preview }: {
   readonly trace: LatentDecodeTrace;
-  readonly onChoose: (latent: readonly [number, number]) => void;
+  readonly onChoose?: (latent: readonly [number, number]) => void;
+  readonly levels?: readonly number[];
+  readonly axisLabels?: readonly [string, string];
+  /** Decode a coordinate for its tile preview (used for custom features). */
+  readonly preview?: (latent: readonly [number, number]) => readonly number[];
 }): ReactNode;
 //#endregion
 export { LatentSpaceDiagram };

package/dist/deep-learning/visuals/latent-space-diagram.mjs

@@ -7,7 +7,7 @@ import { PixelGrid } from "./autoencoder-diagram.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/deep-learning/visuals/latent-space-diagram.tsx
-const LEVELS = [
+const DEFAULT_LEVELS = [
 	0,
 	.5,
 	1
@@ -27,13 +27,30 @@ function MiniPattern({ x, y, falling, rising }) {
 		strokeLinecap: "round"
 	})] });
 }
-function LatentSpaceDiagram({ trace, onChoose }) {
-	const [falling, rising] = trace.latent;
+/** A tiny 4 × 4 preview of a decoded image. */
+function MiniGrid({ x, y, values, size }) {
+	const cell = size / 4;
+	return /* @__PURE__ */ jsx("g", { children: values.map((value, index) => /* @__PURE__ */ jsx("rect", {
+		x: x - size / 2 + index % 4 * cell,
+		y: y - size / 2 + Math.floor(index / 4) * cell,
+		width: cell - .5,
+		height: cell - .5,
+		fill: value > .05 ? tint(HUE[1], 18 + value * 62) : "none"
+	}, index)) });
+}
+/**
+* A levels × levels map of latent coordinates, each tile a button that decodes its coordinate.
+* With `preview` the tiles show the decoded 4 × 4 image; otherwise the two diagonal strokes.
+*/
+function LatentSpaceDiagram({ trace, onChoose, levels = DEFAULT_LEVELS, axisLabels = ["falling stroke", "rising stroke"], preview }) {
+	const [first, second] = trace.latent;
+	const span = 117 / levels.length;
+	const tile = Math.min(30, span - 6);
 	return /* @__PURE__ */ jsxs(Figure, {
 		viewBox: [360, 226],
 		domain: "math",
-		interactive: true,
-		label: `Latent coordinate ${falling.toFixed(1)}, ${rising.toFixed(1)} decodes into a mixed diagonal image.`,
+		interactive: Boolean(onChoose),
+		label: `Latent coordinate ${first.toFixed(2)}, ${second.toFixed(2)} decodes into the generated image.`,
 		children: [
 			/* @__PURE__ */ jsx(FigText, {
 				x: 97,
@@ -50,51 +67,59 @@ function LatentSpaceDiagram({ trace, onChoose }) {
 				children: "generated image"
 			}),
 			/* @__PURE__ */ jsx("path", {
-				d: "M 42 155 H 151 M 42 155 V 46",
+				d: "M 38 159 H 159 M 38 159 V 38",
 				fill: "none",
 				stroke: HUE.soft,
 				strokeWidth: STROKE.line,
 				strokeLinecap: "round"
 			}),
 			/* @__PURE__ */ jsx(FigText, {
-				x: 97,
+				x: 98,
 				y: 178,
 				anchor: "middle",
 				size: "note",
 				tone: "hue-1",
-				children: "falling stroke →"
+				fit: 120,
+				children: `${axisLabels[0]} →`
 			}),
 			/* @__PURE__ */ jsx(FigText, {
 				x: 20,
-				y: 101,
+				y: 99,
 				anchor: "middle",
 				size: "note",
 				tone: "hue-2",
 				rotate: -90,
-				children: "rising stroke →"
+				fit: 120,
+				children: `${axisLabels[1]} →`
 			}),
-			LEVELS.flatMap((rise, row) => LEVELS.map((fall, column) => {
-				const x = 61 + column * 39, y = 136 - row * 39, selected = fall === falling && rise === rising;
-				return /* @__PURE__ */ jsx(FigureAction, {
-					label: `Generate with falling stroke ${fall} and rising stroke ${rise}`,
+			levels.flatMap((b, row) => levels.map((a, column) => {
+				const x = 40 + span * (column + .5), y = 157 - span * (row + .5), selected = Math.abs(a - first) < 1e-9 && Math.abs(b - second) < 1e-9;
+				const body = /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+					x: x - tile / 2,
+					y: y - tile / 2,
+					width: tile,
+					height: tile,
+					rx: Math.min(7, tile / 4),
+					fill: selected ? tint(HUE.good, 24) : HUE.paper,
+					stroke: selected ? HUE.good : HUE.soft,
+					strokeWidth: selected ? STROKE.edge : STROKE.hair
+				}), preview ? /* @__PURE__ */ jsx(MiniGrid, {
+					x,
+					y,
+					values: preview([a, b]),
+					size: tile * .7
+				}) : /* @__PURE__ */ jsx(MiniPattern, {
+					x,
+					y,
+					falling: a,
+					rising: b
+				})] });
+				return onChoose ? /* @__PURE__ */ jsx(FigureAction, {
+					label: `Generate with ${axisLabels[0]} ${a} and ${axisLabels[1]} ${b}`,
 					selected,
-					onActivate: () => onChoose([fall, rise]),
-					children: /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
-						x: x - 15,
-						y: y - 15,
-						width: 30,
-						height: 30,
-						rx: 7,
-						fill: selected ? tint(HUE.good, 24) : HUE.paper,
-						stroke: selected ? HUE.good : HUE.soft,
-						strokeWidth: selected ? STROKE.edge : STROKE.hair
-					}), /* @__PURE__ */ jsx(MiniPattern, {
-						x,
-						y,
-						falling: fall,
-						rising: rise
-					})] })
-				}, `${fall}-${rise}`);
+					onActivate: () => onChoose([a, b]),
+					children: body
+				}, `${a}-${b}`) : /* @__PURE__ */ jsx("g", { children: body }, `${a}-${b}`);
 			})),
 			/* @__PURE__ */ jsx("path", {
 				d: "M 171 101 C 193 101 202 101 218 101",

package/dist/deep-learning/visuals/layer-normalization-diagram.d.mts

@@ -1,7 +1,7 @@
-import { LayerNormalizationTrace } from "../core/layer-normalization.mjs";
+import { LayerNormStageIndex, LayerNormalizationTrace } from "../core/layer-normalization.mjs";
 import { ReactNode } from "react";
 //#region src/deep-learning/visuals/layer-normalization-diagram.d.ts
-type LayerNormStage = 0 | 1 | 2 | 3;
+type LayerNormStage = LayerNormStageIndex;
 declare function LayerNormalizationDiagram({ trace, stage, onStageChange }: {
   readonly trace: LayerNormalizationTrace;
   readonly stage: LayerNormStage;

package/dist/deep-learning/visuals/layer-normalization-diagram.mjs

@@ -3,6 +3,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 { layerNormStageValues } from "../core/layer-normalization.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/deep-learning/visuals/layer-normalization-diagram.tsx
@@ -12,27 +13,19 @@ const STAGES = [
 	"Scale",
 	"Learn"
 ];
-const X = [
-	62,
-	140,
-	218,
-	296
-];
-const COLORS = [
-	HUE[1],
-	HUE[2],
-	HUE[3],
-	HUE.warn
-];
-const fmt = (value) => value.toFixed(2);
+/** Feature columns share the axis from 30 to 318 evenly, however many features the token has. */
+const columnX = (index, count) => 30 + 288 * (index + .5) / count;
+/** Two decimals with a true minus sign, and never "-0.00". */
+const fmt = (value) => (Math.abs(value) < .005 ? 0 : value).toFixed(2).replace("-", "−");
 function LayerNormalizationDiagram({ trace, stage, onStageChange }) {
-	const values = stage === 0 ? trace.input : stage === 1 ? trace.centered : stage === 2 ? trace.normalized : trace.output;
+	const values = layerNormStageValues(trace, stage);
 	const span = Math.max(1, ...values.map(Math.abs));
+	const pitch = 288 / values.length;
 	return /* @__PURE__ */ jsxs(Figure, {
 		viewBox: [360, 245],
 		domain: "computing",
 		interactive: true,
-		label: `Layer normalization ${STAGES[stage]} stage for one token with four features. Values ${values.map(fmt).join(", ")}.`,
+		label: `Layer normalization ${STAGES[stage]} stage for one token with ${values.length} features. Values ${values.map(fmt).join(", ")}.`,
 		children: [
 			/* @__PURE__ */ jsx(FigText, {
 				x: 16,
@@ -71,37 +64,39 @@ function LayerNormalizationDiagram({ trace, stage, onStageChange }) {
 				}, label);
 			}),
 			/* @__PURE__ */ jsx("path", {
-				d: "M 30 143 H 330",
+				d: "M 30 143 H 318",
 				stroke: HUE.ink,
 				strokeWidth: STROKE.line
 			}),
 			/* @__PURE__ */ jsx(FigText, {
-				x: 330,
-				y: 136,
-				anchor: "end",
+				x: 322,
+				y: 143,
+				baseline: "middle",
 				size: "note",
 				tone: "soft",
 				children: "zero"
 			}),
 			values.map((value, index) => {
-				const x = X[index];
+				const x = columnX(index, values.length);
 				const y = 143 - value / span * 54;
+				const color = HUE[1];
+				const below = value >= 0;
 				return /* @__PURE__ */ jsxs("g", { children: [
 					/* @__PURE__ */ jsx("path", {
 						d: `M ${x} 143 V ${y}`,
-						stroke: COLORS[index],
+						stroke: color,
 						strokeWidth: STROKE.bold,
 						strokeLinecap: "round"
 					}),
 					/* @__PURE__ */ jsx("circle", {
 						cx: x,
 						cy: y,
-						r: 8,
-						fill: COLORS[index]
+						r: Math.min(8, pitch / 4),
+						fill: color
 					}),
 					/* @__PURE__ */ jsxs(FigText, {
 						x,
-						y: 171,
+						y: below ? 171 : 112,
 						anchor: "middle",
 						size: "note",
 						tone: "soft",
@@ -109,9 +104,10 @@ function LayerNormalizationDiagram({ trace, stage, onStageChange }) {
 					}),
 					/* @__PURE__ */ jsx(FigText, {
 						x,
-						y: 190,
+						y: below ? 190 : 130,
 						anchor: "middle",
 						size: "label",
+						fit: pitch - 3,
 						children: fmt(value)
 					})
 				] }, index);

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

@@ -58,7 +58,7 @@ function LearningLoopDiagram({ trace, stage }) {
 				head: 6
 			}, index) : null),
 			/* @__PURE__ */ jsx("path", {
-				d: "M 324 94 C 324 132 292 164 278 164",
+				d: "M 348 78 C 366 112 330 164 277 164",
 				fill: "none",
 				stroke: stage > 4 ? HUE.danger : HUE.soft,
 				strokeWidth: STROKE.line
@@ -73,14 +73,14 @@ function LearningLoopDiagram({ trace, stage }) {
 				head: 7
 			}),
 			/* @__PURE__ */ jsx("path", {
-				d: "M 158 164 C 70 164 54 130 78 105 L 98 94",
+				d: "M 157 164 C 64 164 40 110 86 76",
 				fill: "none",
 				stroke: stage >= 6 ? HUE.good : HUE.soft,
 				strokeWidth: STROKE.line,
 				strokeDasharray: "5 5"
 			}),
 			/* @__PURE__ */ jsx("path", {
-				d: "M 90 94 L 99 94 L 96 103",
+				d: "M 76.5 77.5 L 87 75 L 83 85",
 				fill: "none",
 				stroke: stage >= 6 ? HUE.good : HUE.soft,
 				strokeWidth: STROKE.line,
@@ -98,7 +98,7 @@ function LearningLoopDiagram({ trace, stage }) {
 							stroke: color,
 							strokeWidth: STROKE.line
 						}) : index === 2 ? /* @__PURE__ */ jsx("path", {
-							d: `M ${x - 22} ${y - 23} H ${x + 22} V ${y + 23} H ${x - 22} Z M ${x - 13} ${y + 8} H ${x - 3} L ${x + 12} ${y - 10}`,
+							d: `M ${x - 22} ${y - 23} H ${x + 22} V ${y + 23} H ${x - 22} Z M ${x - 11} ${y - 8} H ${x - 2} L ${x + 11} ${y - 17}`,
 							fill: reached ? tint(color, 22) : HUE.paper,
 							stroke: color,
 							strokeWidth: STROKE.line,

package/dist/deep-learning/visuals/memory-relay-diagram.d.mts

@@ -1,10 +1,11 @@
 import { MemoryRelayTrace, MemoryStrategy } from "../core/memory-relay.mjs";
 import { ReactNode } from "react";
 //#region src/deep-learning/visuals/memory-relay-diagram.d.ts
-declare function MemoryRelayDiagram({ trace, onStrategy, onStep }: {
+declare function MemoryRelayDiagram({ trace, onStrategy, onStep, strategies }: {
   readonly trace: MemoryRelayTrace;
-  readonly onStrategy: (strategy: MemoryStrategy) => void;
-  readonly onStep: () => void;
+  readonly onStrategy?: (strategy: MemoryStrategy) => void;
+  readonly onStep?: () => void;
+  readonly strategies?: readonly MemoryStrategy[];
 }): ReactNode;
 //#endregion
 export { MemoryRelayDiagram };