@classytic/labs 0.1.0 → 0.3.0

package/dist/domains/networking/ethernet-pinout/manifest.mjs

@@ -0,0 +1,66 @@
+import { defineLab } from "../../../lab-def/define-lab.mjs";
+import { z } from "zod";
+
+//#region src/domains/networking/ethernet-pinout/manifest.ts
+var manifest_default = defineLab({
+	id: "ethernet-pinout",
+	domain: "networking",
+	group: "Networking",
+	title: "Eight wires in one plug (T568A and T568B)",
+	description: "Crimp an RJ45 by placing the eight wires yourself, with wrong pins called out as you go. Brackets under the pins show the four twisted pairs, which turns a memorised colour chant into something reconstructable: blue holds the middle two pins so the socket still accepts a telephone plug, and that forces the green pair to straddle it at 3 and 6. Switch standards to see that only orange and green move, which is exactly what makes a crossover cable.",
+	schema: z.object({
+		standard: z.enum(["T568A", "T568B"]).default("T568B"),
+		title: z.string().optional(),
+		prompt: z.string().optional()
+	}),
+	taxonomy: {
+		grades: [
+			"9",
+			"10",
+			"11",
+			"12",
+			"undergraduate"
+		],
+		outcomes: [
+			"networking",
+			"physical-layer",
+			"cabling"
+		],
+		durationMinutes: 14,
+		interaction: "build",
+		authorability: "simple",
+		representation: "schematic",
+		prerequisites: [],
+		related: [
+			"switch-learning",
+			"network-media",
+			"packet-journey"
+		],
+		starter: true
+	},
+	experience: {
+		objectives: [
+			"Place the eight wires of a twisted-pair cable in the correct order",
+			"Explain why the blue pair occupies the middle two pins",
+			"Explain why the green pair is split across pins 3 and 6",
+			"Distinguish a straight-through cable from a crossover by its two ends"
+		],
+		phases: [
+			"predict",
+			"act",
+			"observe",
+			"explain",
+			"transfer"
+		],
+		responses: ["choice"],
+		accessibility: {
+			keyboard: true,
+			textAlternative: true,
+			reducedMotion: true
+		}
+	},
+	loadRuntime: () => import("./runtime.mjs")
+});
+
+//#endregion
+export { manifest_default as default };

package/dist/domains/networking/ethernet-pinout/runtime.mjs

@@ -0,0 +1,254 @@
+'use client';
+
+import { Chip } from "../../../kit/controls.mjs";
+import { LiveRegion } from "../../../kit/frame.mjs";
+import { AuthoredActivityRuntime } from "../../../kit/authored-activity-runtime.mjs";
+import { PINOUTS, WIRE_INK, WIRE_LABEL, cableKind, checkPinout } from "../../../networking/media.mjs";
+import { PlugScene } from "../../../networking/PlugScene.mjs";
+import { useCallback, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/domains/networking/ethernet-pinout/runtime.tsx
+/**
+* EthernetPinoutLab — crimp the plug yourself, then find out why the order is what it is.
+*
+* The T568B sequence is the single most memorised and least understood thing in networking. This
+* lab refuses to present it as a list. The learner places the eight wires, and the pair brackets
+* underneath show the constraint that generates the order: blue must hold the middle two pins so an
+* RJ45 socket still accepts a telephone plug, which forces the green pair to straddle it. Once that
+* is seen, the order can be rebuilt from four pair names instead of eight positions.
+*/
+const PINOUT_ACTIVITY = {
+	pattern: "construction",
+	title: "Crimp a plug, then explain the order",
+	objectives: [
+		"Place the eight wires of a twisted-pair cable in the correct order",
+		"Explain why the blue pair occupies the middle two pins",
+		"Explain why the green pair is split across pins 3 and 6",
+		"Distinguish a straight-through cable from a crossover by its two ends"
+	],
+	success: [
+		{
+			id: "pair-prediction",
+			source: "answer",
+			key: "which-pair",
+			pendingLabel: "Predict which two pins belong to the same pair."
+		},
+		{
+			id: "wired",
+			source: "metric",
+			key: "correct",
+			pendingLabel: "Place all eight wires correctly."
+		},
+		{
+			id: "crossover",
+			source: "answer",
+			key: "ends",
+			pendingLabel: "Say what a cable with different standards at each end is called."
+		}
+	],
+	questions: [{
+		id: "which-pair",
+		prompt: "In a finished T568B plug, pins 1 and 2 are one twisted pair. Which pins form the pair that carries the other direction?",
+		choices: [
+			{
+				value: "34",
+				label: "Pins 3 and 4",
+				feedback: "Pin 4 belongs to the blue pair."
+			},
+			{
+				value: "36",
+				label: "Pins 3 and 6"
+			},
+			{
+				value: "78",
+				label: "Pins 7 and 8",
+				feedback: "That is the brown pair, which older Ethernet did not use."
+			}
+		],
+		answer: "36",
+		explain: "Pins 3 and 6 are the green pair, and they are not next to each other. Something is sitting between them, which is the thing worth explaining."
+	}, {
+		id: "ends",
+		prompt: "A cable is wired to T568A at one end and T568B at the other. What is it?",
+		choices: [
+			{
+				value: "straight",
+				label: "A straight-through cable"
+			},
+			{
+				value: "cross",
+				label: "A crossover cable"
+			},
+			{
+				value: "broken",
+				label: "A broken cable that will not work"
+			}
+		],
+		answer: "cross",
+		explain: "Swapping the orange and green pairs between the ends puts one device’s transmit pair onto the other’s receive pair. Modern ports detect and correct this themselves, which is why crossover cables have all but vanished."
+	}],
+	steps: [
+		{
+			id: "predict",
+			phase: "predict",
+			title: "Which pins are partners?",
+			lead: "Twisted pairs have to stay together to cancel interference. Predict where the second pair sits.",
+			success: "pair-prediction"
+		},
+		{
+			id: "act",
+			phase: "act",
+			title: "Crimp the plug",
+			lead: "Pick a wire, then click the pin it belongs in. Get all eight right.",
+			controls: true,
+			success: "wired"
+		},
+		{
+			id: "observe",
+			phase: "observe",
+			title: "Look at the brackets",
+			lead: "Three pairs sit on neighbouring pins. One does not. Find it and see what is in its way.",
+			controls: true
+		},
+		{
+			id: "explain",
+			phase: "explain",
+			title: "Why blue owns the middle",
+			lead: "An RJ45 socket had to keep accepting an older telephone plug, which uses the middle two positions.",
+			controls: true
+		},
+		{
+			id: "transfer",
+			phase: "transfer",
+			title: "Two ends, two standards",
+			lead: "Switch the standard and compare. Only the orange and green pairs move.",
+			controls: true,
+			success: "crossover"
+		}
+	]
+};
+function EthernetPinoutLab({ standard = "T568B", title, prompt } = {}) {
+	const [target, setTarget] = useState(standard);
+	const [pins, setPins] = useState(() => Array(8).fill(void 0));
+	const [selected, setSelected] = useState();
+	const check = useMemo(() => checkPinout(pins, target), [pins, target]);
+	const used = useMemo(() => new Set(pins.filter(Boolean)), [pins]);
+	const place = useCallback((pin, context) => {
+		setPins((current) => {
+			const next = [...current];
+			if (next[pin - 1]) next[pin - 1] = void 0;
+			else if (selected) {
+				const previous = next.indexOf(selected);
+				if (previous >= 0) next[previous] = void 0;
+				next[pin - 1] = selected;
+			}
+			if (checkPinout(next, target).correct) context.complete("wired", "correct");
+			return next;
+		});
+		setSelected(void 0);
+	}, [selected, target]);
+	const fillCorrectly = useCallback(() => setPins([...PINOUTS[target]]), [target]);
+	const clear = useCallback(() => {
+		setPins(Array(8).fill(void 0));
+		setSelected(void 0);
+	}, []);
+	const headline = check.correct ? `All eight in the right places. This end is wired to ${target}.` : check.wrong.length ? `Pin${check.wrong.length > 1 ? "s" : ""} ${check.wrong.join(", ")} ${check.wrong.length > 1 ? "are" : "is"} not what ${target} expects.` : `${check.placed} of 8 placed.`;
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		activity: PINOUT_ACTIVITY,
+		activityId: "ethernet-pinout",
+		eyebrow: "Physical layer",
+		title: title ?? "Eight wires in one plug",
+		description: prompt ?? "The colour order looks arbitrary and is not. One compatibility decision made in the telephone era fixes almost all of it.",
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("strong", { children: target }) }),
+			/* @__PURE__ */ jsxs("span", { children: [check.placed, " / 8 placed"] }),
+			check.correct ? /* @__PURE__ */ jsx("span", {
+				"data-delivered": true,
+				children: "correct"
+			}) : check.wrong.length > 0 && /* @__PURE__ */ jsxs("span", { children: [check.wrong.length, " wrong"] })
+		] }),
+		inspector: (context) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "network-inspector-heading",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Pick a wire, then a pin" }), /* @__PURE__ */ jsx("strong", { children: "Four twisted pairs" })] }), /* @__PURE__ */ jsxs("span", { children: [used.size, " / 8 used"] })]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "lab-activity-fields",
+				children: PINOUTS[target].map((wire) => /* @__PURE__ */ jsxs(Chip, {
+					selected: selected === wire,
+					disabled: used.has(wire),
+					onClick: () => setSelected(wire),
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						style: {
+							display: "inline-block",
+							width: 10,
+							height: 10,
+							borderRadius: 2,
+							marginRight: 6,
+							background: WIRE_INK[wire],
+							outline: "1px solid rgba(0,0,0,.25)"
+						}
+					}), WIRE_LABEL[wire]]
+				}, wire))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "lab-activity-fields",
+				children: [
+					/* @__PURE__ */ jsx(Chip, {
+						selected: target === "T568B",
+						onClick: () => {
+							setTarget("T568B");
+							clear();
+						},
+						children: "T568B"
+					}),
+					/* @__PURE__ */ jsx(Chip, {
+						selected: target === "T568A",
+						onClick: () => {
+							setTarget("T568A");
+							clear();
+						},
+						children: "T568A"
+					}),
+					/* @__PURE__ */ jsx(Chip, {
+						selected: false,
+						onClick: clear,
+						disabled: !check.placed,
+						children: "Clear"
+					}),
+					/* @__PURE__ */ jsx(Chip, {
+						selected: false,
+						onClick: fillCorrectly,
+						children: "Show me"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "lab-note",
+				children: [
+					"A cable with the same standard at both ends is a ",
+					cableKind(target, target),
+					" cable. Wire the far end to the other standard and it becomes a ",
+					cableKind("T568A", "T568B"),
+					"."
+				]
+			}),
+			/* @__PURE__ */ jsx(LiveRegion, { children: headline })
+		] }),
+		observation: headline,
+		children: (context) => /* @__PURE__ */ jsx(PlugScene, {
+			pins,
+			standard: target,
+			wrong: check.wrong,
+			showPairs: context.sequence.current.id !== "act",
+			onPinClick: (pin) => place(pin, context),
+			selected,
+			label: `RJ45 plug wired to ${target}. ${check.placed} of 8 wires placed.`
+		})
+	});
+}
+
+//#endregion
+export { EthernetPinoutLab, EthernetPinoutLab as default };

package/dist/domains/networking/layer-encapsulation/manifest.mjs

@@ -0,0 +1,66 @@
+import { defineLab } from "../../../lab-def/define-lab.mjs";
+import { z } from "zod";
+
+//#region src/domains/networking/layer-encapsulation/manifest.ts
+var manifest_default = defineLab({
+	id: "layer-encapsulation",
+	domain: "networking",
+	group: "Networking",
+	title: "What a message turns into (headers and hops)",
+	description: "One message followed down the stack and across three wires. The frame is drawn to scale, so shrinking the message to a single keystroke makes it disappear next to its own addressing. Below it the journey shows the MAC pair rewritten on every wire while the IP pair, written once under a bracket spanning the whole path, arrives exactly as it was sent. Each device is filled with the colour of the deepest header it opens, so a switch is Ethernet-coloured and a router is IP-coloured.",
+	schema: z.object({
+		payloadBytes: z.number().int().min(1).max(1400).default(100),
+		title: z.string().optional(),
+		prompt: z.string().optional()
+	}),
+	taxonomy: {
+		grades: [
+			"11",
+			"12",
+			"undergraduate"
+		],
+		outcomes: [
+			"networking",
+			"encapsulation",
+			"osi-model",
+			"addressing"
+		],
+		durationMinutes: 16,
+		interaction: "explorer",
+		authorability: "simple",
+		representation: "table",
+		prerequisites: [],
+		related: [
+			"packet-journey",
+			"switch-learning",
+			"subnet-builder",
+			"vlan-designer"
+		],
+		starter: true
+	},
+	experience: {
+		objectives: [
+			"Say what each layer adds and what it leaves alone",
+			"Name the addresses in the frame on any given wire",
+			"Explain why the MAC pair changes at every routed hop and the IP pair does not",
+			"Work out what a set of headers costs, and when that cost matters"
+		],
+		phases: [
+			"predict",
+			"act",
+			"observe",
+			"explain",
+			"transfer"
+		],
+		responses: ["choice"],
+		accessibility: {
+			keyboard: true,
+			textAlternative: true,
+			reducedMotion: true
+		}
+	},
+	loadRuntime: () => import("./runtime.mjs")
+});
+
+//#endregion
+export { manifest_default as default };

package/dist/domains/networking/layer-encapsulation/runtime.mjs

@@ -0,0 +1,281 @@
+'use client';
+
+import { Chip, Slider } from "../../../kit/controls.mjs";
+import { Field, LiveRegion } from "../../../kit/frame.mjs";
+import { AuthoredActivityRuntime } from "../../../kit/authored-activity-runtime.mjs";
+import { DEFAULT_PATH, HEADERS, encapsulate, journey } from "../../../networking/encapsulation.mjs";
+import { EncapScene } from "../../../networking/EncapScene.mjs";
+import { useCallback, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/domains/networking/layer-encapsulation/runtime.tsx
+/**
+* LayerEncapsulationLab — what a message becomes, and what survives the trip.
+*
+* Students can recite the layers and still fail the only two questions that matter. This lab is
+* built around those two, and nothing else.
+*
+* The first is what a router changes. Almost everyone answers that the destination MAC address is
+* the server's, because both addresses are drawn on the same diagram and nothing ever says which
+* one is local. Here the MAC pair is written over every segment and changes three times, while the
+* IP pair is written once under a bracket spanning the whole path. The picture makes the claim; the
+* text only names it.
+*
+* The second is why anyone should care about header sizes. The frame is drawn to scale, so dragging
+* the payload down to one byte makes the message vanish next to its own addressing. That is a
+* keystroke in a remote shell, and it is why interactive traffic is measured in packets per second
+* rather than bytes.
+*/
+const SIZES = [
+	{
+		label: "One keystroke",
+		bytes: 1,
+		note: "a character typed into a remote shell"
+	},
+	{
+		label: "A short request",
+		bytes: 100,
+		note: "a small HTTP GET"
+	},
+	{
+		label: "A full packet",
+		bytes: 1400,
+		note: "a slice of a file download"
+	}
+];
+const ENCAP_ACTIVITY = {
+	pattern: "diagnosis",
+	title: "Follow one message down the stack and across the wires",
+	objectives: [
+		"Say what each layer adds and what it leaves alone",
+		"Name the addresses in the frame on any given wire",
+		"Explain why the MAC pair changes at every routed hop and the IP pair does not",
+		"Work out what a set of headers costs, and when that cost matters"
+	],
+	success: [
+		{
+			id: "predict-mac",
+			source: "answer",
+			key: "first-frame",
+			pendingLabel: "Predict the addresses on the first wire."
+		},
+		{
+			id: "walked-path",
+			source: "metric",
+			key: "segments",
+			pendingLabel: "Look at the frame on every wire in turn."
+		},
+		{
+			id: "saw-overhead",
+			source: "metric",
+			key: "payload",
+			pendingLabel: "Shrink the message and watch what happens to the frame."
+		},
+		{
+			id: "why-two",
+			source: "answer",
+			key: "why-both",
+			pendingLabel: "Say why a frame carries two kinds of address at once."
+		}
+	],
+	questions: [{
+		id: "first-frame",
+		prompt: "Your laptop sends to a server two routers away. In the very first frame that leaves your laptop, what is the destination MAC address?",
+		choices: [
+			{
+				value: "server",
+				label: "The server's, since that is where the message is going",
+				feedback: "That is the destination IP address. A MAC address cannot name a machine that far away."
+			},
+			{
+				value: "router",
+				label: "The first router's, because it is the next box on this wire"
+			},
+			{
+				value: "switch",
+				label: "The switch's, because the switch is what the cable is plugged into",
+				feedback: "A switch forwards frames without being addressed by them. It is invisible at layer 3."
+			}
+		],
+		answer: "router",
+		explain: "A MAC address only means anything on one wire. The frame is addressed to the next box that has to handle it, which is the first router, while the IP header keeps naming the server the entire way. Every routed hop throws the old frame away and builds a new one with the next pair of MAC addresses."
+	}, {
+		id: "why-both",
+		prompt: "Why does a frame carry a MAC pair and an IP pair rather than just one of them?",
+		choices: [
+			{
+				value: "redundancy",
+				label: "In case one of them is lost in transit",
+				feedback: "Neither is a backup for the other. They answer different questions."
+			},
+			{
+				value: "scopes",
+				label: "One names the next box on this wire, the other names the far end of the journey"
+			},
+			{
+				value: "speed",
+				label: "MAC addresses are faster to look up than IP addresses",
+				feedback: "Lookup cost is not why both exist. Try covering one address and asking what breaks."
+			}
+		],
+		answer: "scopes",
+		explain: "Cover the IP pair and no device past the first router knows where the message was headed. Cover the MAC pair and the frame cannot be handed to anything on the current wire. They are a local address and a global one, which is why one is rewritten at every hop and the other is not."
+	}],
+	steps: [
+		{
+			id: "predict",
+			phase: "predict",
+			title: "Who is the first frame addressed to?",
+			lead: "A message leaves your laptop for a server two routers away.",
+			success: "predict-mac"
+		},
+		{
+			id: "act",
+			phase: "act",
+			title: "Walk the wires",
+			lead: "Step along the path and read the addresses on each one.",
+			controls: true,
+			success: "walked-path"
+		},
+		{
+			id: "observe",
+			phase: "observe",
+			title: "One row changes, one row does not",
+			lead: "Three wires, three MAC pairs, one IP pair. The colours say how deep each device opens the frame.",
+			controls: true
+		},
+		{
+			id: "explain",
+			phase: "explain",
+			title: "What the wrapping costs",
+			lead: "The frame is drawn to scale. Change the size of the message and watch the addressing stay exactly the same size.",
+			controls: true,
+			success: "saw-overhead"
+		},
+		{
+			id: "transfer",
+			phase: "transfer",
+			title: "Two addresses, two jobs",
+			lead: "You have seen which one is rewritten. Now say why both are there.",
+			controls: true,
+			success: "why-two"
+		}
+	]
+};
+function LayerEncapsulationLab({ payloadBytes = 100, title, prompt } = {}) {
+	const [bytes, setBytes] = useState(payloadBytes);
+	const [segment, setSegment] = useState(0);
+	const [seen, setSeen] = useState([0]);
+	const path = DEFAULT_PATH;
+	const frames = useMemo(() => journey(path), [path]);
+	const frame = useMemo(() => encapsulate(bytes), [bytes]);
+	const wire = frames[segment];
+	const walk = useCallback((index, context) => {
+		setSegment(index);
+		setSeen((current) => {
+			const next = current.includes(index) ? current : [...current, index];
+			if (next.length === frames.length) context.complete("walked-path", "segments");
+			return next;
+		});
+	}, [frames.length]);
+	const resize = useCallback((value, context) => {
+		setBytes(value);
+		if (value <= 8) context.complete("saw-overhead", "payload");
+	}, []);
+	const headline = wire ? `${wire.note} The IP pair stays ${wire.ip.from} to ${wire.ip.to} on every wire.` : "Pick a wire to see the frame travelling on it.";
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		activity: ENCAP_ACTIVITY,
+		activityId: "layer-encapsulation",
+		eyebrow: "The stack",
+		title: title ?? "What a message turns into",
+		description: prompt ?? "Each layer wraps what it was given without editing it. Then the outermost wrapper is thrown away and rebuilt at every routed hop, and the one inside it is not.",
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("strong", { children: frame.onWireBytes }), " bytes on the wire"] }),
+			/* @__PURE__ */ jsxs("span", { children: [Math.round(frame.overheadShare * 100), "% addressing"] }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				"wire ",
+				segment + 1,
+				" of ",
+				frames.length
+			] })
+		] }),
+		inspector: (context) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "network-inspector-heading",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Frame on this wire" }), /* @__PURE__ */ jsxs("strong", { children: [
+					wire?.mac.from,
+					" → ",
+					wire?.mac.to
+				] })] }), /* @__PURE__ */ jsx("span", { children: "MAC" })]
+			}),
+			/* @__PURE__ */ jsxs("ul", {
+				className: "lab-metric-list",
+				children: [
+					/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", { children: "Packet inside it" }), /* @__PURE__ */ jsxs("strong", { children: [
+						wire?.ip.from,
+						" → ",
+						wire?.ip.to
+					] })] }),
+					/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", { children: "Message" }), /* @__PURE__ */ jsxs("strong", { children: [bytes, " bytes"] })] }),
+					/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", { children: "Addressing around it" }), /* @__PURE__ */ jsxs("strong", { children: [frame.overheadBytes, " bytes"] })] })
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "lab-activity-fields",
+				children: frames.map((item, index) => /* @__PURE__ */ jsxs(Chip, {
+					selected: segment === index,
+					onClick: () => walk(index, context),
+					children: [
+						item.segment.from.name,
+						" to ",
+						item.segment.to.name
+					]
+				}, index))
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "message size",
+				value: /* @__PURE__ */ jsxs("b", { children: [bytes, " bytes"] }),
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: bytes,
+					min: 1,
+					max: 1400,
+					step: 1,
+					onChange: (value) => resize(value, context),
+					ariaLabel: "message size in bytes"
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "lab-activity-fields",
+				children: SIZES.map((size) => /* @__PURE__ */ jsx(Chip, {
+					selected: bytes === size.bytes,
+					onClick: () => resize(size.bytes, context),
+					children: size.label
+				}, size.label))
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "lab-metric-list",
+				children: HEADERS.filter((header) => header.bytes > 0).map((header) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsxs("span", { children: [
+					header.protocol,
+					" · ",
+					header.addressing
+				] }), /* @__PURE__ */ jsxs("strong", { children: [header.bytes, " B"] })] }, header.protocol))
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "lab-note",
+				children: "Everything here is inside one organisation, so the IP pair really is untouched. A home router doing NAT is the one case that rewrites it, which is a later topic."
+			}),
+			/* @__PURE__ */ jsx(LiveRegion, { children: headline })
+		] }),
+		observation: headline,
+		children: /* @__PURE__ */ jsx(EncapScene, {
+			frame,
+			path,
+			frames,
+			activeSegment: segment,
+			label: `A ${bytes} byte message in a ${frame.onWireBytes} byte frame, on wire ${segment + 1} of ${frames.length}. ${headline}`
+		})
+	});
+}
+
+//#endregion
+export { LayerEncapsulationLab, LayerEncapsulationLab as default };