@classytic/labs 0.1.0 → 0.3.0

package/dist/kit/vessel.mjs

@@ -0,0 +1,210 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/vessel.tsx
+const METAL = "var(--stage-metal, #8a8a8a)";
+const GLASS = "color-mix(in oklab, var(--stage-fg) 26%, transparent)";
+const FG = "var(--stage-fg, #222)";
+const MUTED = "var(--stage-muted, #777)";
+const TONE_COLOR = {
+	idle: "var(--stage-accent)",
+	ok: "var(--stage-good)",
+	no: "var(--stage-warn)"
+};
+/** The pure <g> vessel, glass + liquid + objects + optional reading line. */
+function VesselGlyph({ x, y, w, h, fillFrac, color = "var(--stage-accent)", objects = 0, objectColor = "var(--stage-object, #e85aa6)", guessFrac, guessTone = "idle" }) {
+	const lipH = 6;
+	const wall = 3;
+	const innerTop = y + lipH;
+	const innerBot = y + h - 3;
+	const innerH = innerBot - innerTop;
+	const lx = x + wall;
+	const rx = x + w - wall;
+	const innerW = rx - lx;
+	const liq = Math.max(0, Math.min(1, fillFrac));
+	const liquidTop = innerBot - liq * innerH;
+	const cubes = [];
+	if (objects > 0) {
+		const r = Math.max(5, Math.min(11, innerW / 5.5));
+		const perRow = Math.max(1, Math.floor((innerW - 4) / (r * 2)));
+		for (let i = 0; i < objects; i++) {
+			const row = Math.floor(i / perRow);
+			const col = i % perRow;
+			const rowW = Math.min(perRow, objects - row * perRow) * r * 2;
+			const cxp = (lx + rx) / 2 - rowW / 2 + r + col * r * 2 + row % 2 * (r * .5);
+			const cyp = innerBot - r - row * r * 1.7;
+			cubes.push(/* @__PURE__ */ jsxs("g", {
+				style: { animation: `vessel-drop 0.45s cubic-bezier(0.3,1.3,0.6,1) ${i * .08}s backwards` },
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: cxp,
+					cy: cyp,
+					r,
+					fill: objectColor,
+					opacity: .92
+				}), /* @__PURE__ */ jsx("circle", {
+					cx: cxp - r * .32,
+					cy: cyp - r * .32,
+					r: r * .3,
+					fill: "var(--stage-sheen, #fff)",
+					opacity: .55
+				})]
+			}, `o${i}`));
+		}
+	}
+	const gColor = TONE_COLOR[guessTone];
+	const guessY = guessFrac != null ? innerBot - Math.max(0, Math.min(1, guessFrac)) * innerH : null;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: lx,
+			y: liquidTop,
+			width: innerW,
+			height: Math.max(0, innerBot - liquidTop),
+			fill: color,
+			fillOpacity: .5,
+			style: { transition: "y 0.5s ease-out, height 0.5s ease-out" }
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: lx,
+			y: liquidTop,
+			width: Math.max(3, innerW * .24),
+			height: Math.max(0, innerBot - liquidTop),
+			fill: "var(--stage-sheen, #fff)",
+			opacity: .2,
+			style: { transition: "y 0.5s ease-out, height 0.5s ease-out" }
+		}),
+		liq > .02 && /* @__PURE__ */ jsx("ellipse", {
+			cx: (lx + rx) / 2,
+			cy: liquidTop,
+			rx: innerW / 2,
+			ry: 3.5,
+			fill: color,
+			fillOpacity: .85,
+			style: { transition: "cy 0.5s ease-out" }
+		}),
+		cubes,
+		/* @__PURE__ */ jsx("path", {
+			d: `M ${x} ${y} L ${lx} ${innerBot} L ${rx} ${innerBot} L ${x + w} ${y}`,
+			fill: "none",
+			stroke: GLASS,
+			strokeWidth: wall,
+			strokeLinejoin: "round",
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: lx + 2.5,
+			y1: innerTop + 5,
+			x2: lx + 2.5,
+			y2: innerBot - 5,
+			stroke: "var(--stage-sheen, #fff)",
+			strokeWidth: 2,
+			opacity: .28,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: x - 3,
+			y1: y,
+			x2: x + w + 3,
+			y2: y,
+			stroke: METAL,
+			strokeWidth: 3,
+			strokeLinecap: "round"
+		}),
+		guessY != null && /* @__PURE__ */ jsxs("g", {
+			style: { transition: "transform 0.12s ease-out" },
+			children: [/* @__PURE__ */ jsx("line", {
+				x1: x - 6,
+				y1: guessY,
+				x2: x + w + 6,
+				y2: guessY,
+				stroke: gColor,
+				strokeWidth: 2.5,
+				strokeDasharray: "6 4"
+			}), /* @__PURE__ */ jsx("circle", {
+				cx: x + w + 6,
+				cy: guessY,
+				r: 3.5,
+				fill: gColor
+			})]
+		})
+	] });
+}
+/** Self-contained vessel (its own <svg>), drops in beside a graph as the concrete twin. */
+function Vessel({ width = 150, height = 300, fillFrac, guessFrac, guessTone = "idle", objects = 0, liquidColor = "var(--stage-accent)", objectColor = "var(--stage-object, #e85aa6)", label, scaleMax, scaleStep, unit }) {
+	const padL = scaleMax != null ? 4 : 8;
+	const padR = scaleMax != null ? 34 : 8;
+	const padTop = unit && scaleMax != null ? 22 : 10;
+	const padBot = label ? 26 : 10;
+	const vx = padL;
+	const vw = width - padL - padR;
+	const vy = padTop;
+	const vh = height - padTop - padBot;
+	const innerTop = vy + 6;
+	const innerBot = vy + vh - 3;
+	const innerH = innerBot - innerTop;
+	const ticks = [];
+	if (scaleMax != null) {
+		const step = scaleStep ?? scaleMax / 4;
+		for (let v = 0; v <= scaleMax + 1e-6; v += step) {
+			const ty = innerBot - v / scaleMax * innerH;
+			ticks.push(/* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+				x1: vx + vw,
+				y1: ty,
+				x2: vx + vw + 5,
+				y2: ty,
+				stroke: MUTED,
+				strokeWidth: 1.5
+			}), /* @__PURE__ */ jsx("text", {
+				x: vx + vw + 8,
+				y: ty,
+				fontSize: 10,
+				fill: MUTED,
+				dominantBaseline: "middle",
+				children: v
+			})] }, `t${v}`));
+		}
+	}
+	return /* @__PURE__ */ jsxs("svg", {
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		role: "img",
+		"aria-label": label ? `${label}: liquid at ${(fillFrac * 100).toFixed(0)}% of full` : "vessel",
+		children: [
+			ticks,
+			/* @__PURE__ */ jsx(VesselGlyph, {
+				x: vx,
+				y: vy,
+				w: vw,
+				h: vh,
+				fillFrac,
+				color: liquidColor,
+				objects,
+				objectColor,
+				guessFrac,
+				guessTone
+			}),
+			unit && scaleMax != null && /* @__PURE__ */ jsx("text", {
+				x: vx + vw + 5,
+				y: 7,
+				fontSize: 9,
+				fontWeight: 600,
+				fill: MUTED,
+				dominantBaseline: "hanging",
+				children: unit
+			}),
+			label && /* @__PURE__ */ jsx("text", {
+				x: width / 2,
+				y: height - 8,
+				fontSize: 12,
+				fontWeight: 700,
+				fill: FG,
+				textAnchor: "middle",
+				children: label
+			})
+		]
+	});
+}
+
+//#endregion
+export { Vessel, VesselGlyph };

package/dist/lab-def/attrs.d.mts

@@ -0,0 +1,31 @@
+//#region src/lab-def/attrs.d.ts
+/**
+ * Tolerant parsing for authored block attributes.
+ *
+ * A lab's structured props (a vocab deck, a question list, a rows table) travel as MDX JSX
+ * attributes. MDX itself accepts any JavaScript expression, so a perfectly ordinary lesson can
+ * carry:
+ *
+ *     <WordMatch deck={{termLang:"en-US",items:[{term:"water",translation:"পানি"}]}} />
+ *
+ * That is valid MDX and renders correctly through the MDX compiler, but the editor's
+ * MDX↔Slate round-trip reads expression attributes with `JSON.parse`, which rejects unquoted
+ * keys. The value then arrives at the lab as a raw string and the lab throws ("Language deck
+ * must be valid JSON") — a dead block for content that was never actually wrong.
+ *
+ * A second shape shows up when a structured prop was a STRING at save time: it is written as a
+ * QUOTED attribute, so the JSON's own double quotes come back HTML-entity-escaped (`&#x22;`).
+ *
+ * `parseAuthoredValue` accepts strict JSON, entity-escaped JSON, and plain JS object-literal
+ * syntax, and returns the input untouched when it is none of those — so a genuine string prop
+ * is never mangled and genuinely broken data still surfaces as an error the author can see.
+ */
+/**
+ * Parse an authored attribute that is meant to be structured. Returns the parsed value, or the
+ * original input when it is not structured text or cannot be recovered.
+ */
+declare function parseAuthoredValue(raw: unknown): unknown;
+/** Apply `parseAuthoredValue` to every attribute of a block node. */
+declare function parseAuthoredAttrs(raw: Record<string, unknown>): Record<string, unknown>;
+//#endregion
+export { parseAuthoredAttrs, parseAuthoredValue };

package/dist/lab-def/attrs.mjs

@@ -0,0 +1,65 @@
+//#region src/lab-def/attrs.ts
+/**
+* Tolerant parsing for authored block attributes.
+*
+* A lab's structured props (a vocab deck, a question list, a rows table) travel as MDX JSX
+* attributes. MDX itself accepts any JavaScript expression, so a perfectly ordinary lesson can
+* carry:
+*
+*     <WordMatch deck={{termLang:"en-US",items:[{term:"water",translation:"পানি"}]}} />
+*
+* That is valid MDX and renders correctly through the MDX compiler, but the editor's
+* MDX↔Slate round-trip reads expression attributes with `JSON.parse`, which rejects unquoted
+* keys. The value then arrives at the lab as a raw string and the lab throws ("Language deck
+* must be valid JSON") — a dead block for content that was never actually wrong.
+*
+* A second shape shows up when a structured prop was a STRING at save time: it is written as a
+* QUOTED attribute, so the JSON's own double quotes come back HTML-entity-escaped (`&#x22;`).
+*
+* `parseAuthoredValue` accepts strict JSON, entity-escaped JSON, and plain JS object-literal
+* syntax, and returns the input untouched when it is none of those — so a genuine string prop
+* is never mangled and genuinely broken data still surfaces as an error the author can see.
+*/
+/** Undo the entity escaping a quoted MDX attribute applies to the text inside it. */
+function decodeEntities(source) {
+	return source.replace(/&#x([0-9a-fA-F]+);/g, (_, hex) => String.fromCodePoint(Number.parseInt(hex, 16))).replace(/&#(\d+);/g, (_, dec) => String.fromCodePoint(Number(dec))).replace(/&quot;/g, "\"").replace(/&apos;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+}
+/**
+* Quote bare object keys so a JS object literal becomes JSON. Only keys immediately after `{`
+* or `,` are touched, and the result is validated by the caller's `JSON.parse`, so a false
+* positive inside a string value fails closed rather than corrupting the value.
+*/
+function quoteBareKeys(source) {
+	return source.replace(/([{,]\s*)([A-Za-z_$][\w$]*)\s*:/g, "$1\"$2\":");
+}
+const STRUCTURED = /^\s*(?:[[{]|&#x5[BD];|&lt;)/;
+/**
+* Parse an authored attribute that is meant to be structured. Returns the parsed value, or the
+* original input when it is not structured text or cannot be recovered.
+*/
+function parseAuthoredValue(raw) {
+	if (typeof raw !== "string") return raw;
+	if (!STRUCTURED.test(raw)) return raw;
+	const attempts = [
+		(s) => s,
+		decodeEntities,
+		quoteBareKeys,
+		(s) => quoteBareKeys(decodeEntities(s))
+	];
+	for (const attempt of attempts) try {
+		return JSON.parse(attempt(raw.trim()));
+	} catch {}
+	return raw;
+}
+/** Apply `parseAuthoredValue` to every attribute of a block node. */
+function parseAuthoredAttrs(raw) {
+	const out = {};
+	for (const [key, value] of Object.entries(raw)) {
+		const parsed = parseAuthoredValue(value);
+		if (parsed !== value) out[key] = parsed;
+	}
+	return out;
+}
+
+//#endregion
+export { parseAuthoredAttrs, parseAuthoredValue };

package/dist/lab-def/define-lab.d.mts

@@ -0,0 +1,107 @@
+import { LabDomain } from "../blocks/catalog.mjs";
+import { ReactNode } from "react";
+import { z } from "zod";
+
+//#region src/lab-def/define-lab.d.ts
+/** Discovery / decision metadata the gallery can facet + filter on (finding #7). */
+interface LabTaxonomy {
+  /** School grades / year levels this suits (e.g. ['9', '10']). */
+  grades?: string[];
+  /** Curriculum outcomes / topics (e.g. ['kinematics', 'projectile-motion']). */
+  outcomes?: string[];
+  /** Rough time-on-task in minutes. */
+  durationMinutes?: number;
+  /** The dominant interaction shape. */
+  interaction?: 'guided' | 'explorer' | 'predict' | 'build';
+  /** How much authoring effort a good setup takes. */
+  authorability?: 'simple' | 'moderate' | 'advanced';
+  /** Feature as a starter / recommended lab. */
+  starter?: boolean;
+  /** The REPRESENTATIONAL level a concept is shown at — the same idea (e.g. a NAND) recurs across
+   *  levels, so this places a lab on the abstraction ladder (number → boolean → gate → schematic →
+   *  device → carrier) for coherent learning pathways. */
+  representation?: LabRepresentation;
+  /** Lab ids a learner should meet BEFORE this one (a pathway backbone). */
+  prerequisites?: string[];
+  /** Lab ids showing the same idea at an adjacent level / a sibling concept. */
+  related?: string[];
+}
+/** The abstraction ladder a concept can be shown at (from most abstract to most physical). */
+type LabRepresentation = 'number' | 'boolean' | 'gate' | 'schematic' | 'device' | 'carrier' | 'graph' | 'table';
+/**
+ * Portable teaching contract for a lab. This is deliberately metadata, not UI:
+ * hosts can build their own lesson editor while the runtime stays independent.
+ */
+interface LabLearningExperience {
+  /** Observable learner outcomes, written as actions rather than topic labels. */
+  objectives: string[];
+  /** Phases the authored experience supports. Showcase labs should cover all five. */
+  phases: Array<'predict' | 'act' | 'observe' | 'explain' | 'transfer'>;
+  /** Response shapes a host author may use around the interactive model. */
+  responses: Array<'choice' | 'numeric' | 'text' | 'ordering' | 'reflection'>;
+  /** Non-visual and non-pointer routes supported by the runtime. */
+  accessibility: {
+    keyboard: boolean;
+    textAlternative: boolean;
+    reducedMotion: boolean;
+  };
+}
+/**
+ * The render component a lab's runtime chunk default-exports: attributes in, UI out. The
+ * attrs are typed loosely on purpose — an engine-backed runtime often has REFINED props
+ * (e.g. a discriminated union) that are a subtype of `z.infer<schema>`, which strict
+ * function-param checking would reject. The schema stays the source of truth for the
+ * authoring form + validation; the runtime just receives the validated attributes.
+ */
+type LabRuntimeComponent = (attrs: any) => ReactNode;
+/**
+ * A CUSTOM authoring component (a visual editor richer than the schema-driven form) —
+ * receives the current attributes + a patch callback, same contract as a block's editing UI.
+ */
+type LabAuthoringComponent = (props: {
+  value: Record<string, unknown>;
+  onChange: (patch: Record<string, unknown>) => void;
+}) => ReactNode;
+interface LabManifest<S extends z.ZodObject = z.ZodObject> {
+  /** kebab-case id (also the block key + MDX tag source). */
+  id: string;
+  domain: LabDomain;
+  /** Display group in the gallery (e.g. 'Physics'). */
+  group: string;
+  title: string;
+  description: string;
+  /** MDX tag / Plate node type; defaults to PascalCase(id). */
+  tag?: string;
+  /** The lab's prop schema — the SINGLE source of truth (authoring form + validation). */
+  schema: S;
+  taxonomy: LabTaxonomy;
+  /** Optional, host-neutral declaration of the learning experience this runtime supports. */
+  experience?: LabLearningExperience;
+  /**
+   * Lazily load the render component (its own code-split chunk). MUST be a literal
+   * dynamic import — `() => import('./runtime.js')` — so the bundler can split it and
+   * the manifest module never statically pulls the component.
+   */
+  loadRuntime: () => Promise<{
+    default: LabRuntimeComponent;
+  }>;
+  /**
+   * Optional CUSTOM authoring UI (its own lazy chunk) for a visual editor the schema-driven
+   * form can't express (e.g. a construction builder). When absent, editing shows the
+   * auto-generated LabConfig form from `schema`.
+   */
+  loadAuthoring?: () => Promise<{
+    default: LabAuthoringComponent;
+  }>;
+  /** Props to hide from the auto-generated authoring panel (bespoke UX handles them). */
+  omit?: string[];
+}
+/**
+ * Identity factory: validates the shape at the type level and returns the manifest
+ * unchanged. Pure on purpose — see the module doc. Compose manifests in registry.ts.
+ */
+declare function defineLab<S extends z.ZodObject>(manifest: LabManifest<S>): LabManifest<S>;
+/** PascalCase MDX tag from a kebab id (mirrors defineBlock's default). */
+declare function labTag(id: string): string;
+//#endregion
+export { LabAuthoringComponent, LabLearningExperience, LabManifest, LabRepresentation, LabRuntimeComponent, LabTaxonomy, defineLab, labTag };

package/dist/lab-def/define-lab.mjs

@@ -0,0 +1,15 @@
+//#region src/lab-def/define-lab.ts
+/**
+* Identity factory: validates the shape at the type level and returns the manifest
+* unchanged. Pure on purpose — see the module doc. Compose manifests in registry.ts.
+*/
+function defineLab(manifest) {
+	return manifest;
+}
+/** PascalCase MDX tag from a kebab id (mirrors defineBlock's default). */
+function labTag(id) {
+	return id.split("-").map((s) => s ? s[0].toUpperCase() + s.slice(1) : "").join("");
+}
+
+//#endregion
+export { defineLab, labTag };

package/dist/lab-def/lab-authoring.mjs

@@ -0,0 +1,39 @@
+'use client';
+
+import { createElement, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/lab-def/lab-authoring.tsx
+/**
+* LabAuthoring — lazily render a lab's CUSTOM authoring UI (its own chunk, loaded only in the
+* editor). Same lazy shape as LabRuntime; used by manifestToBlock when a manifest declares
+* `loadAuthoring` instead of falling back to the schema-driven LabConfig.
+*/
+function LabAuthoring({ loader, value, onChange }) {
+	const [Comp, setComp] = useState(null);
+	useEffect(() => {
+		let alive = true;
+		loader().then((mod) => {
+			if (alive) setComp(() => mod.default);
+		}, () => {});
+		return () => {
+			alive = false;
+		};
+	}, [loader]);
+	if (!Comp) return /* @__PURE__ */ jsx("div", {
+		"aria-busy": "true",
+		style: {
+			padding: 8,
+			fontSize: 12,
+			color: "var(--stage-muted)"
+		},
+		children: "loading editor…"
+	});
+	return createElement(Comp, {
+		value,
+		onChange
+	});
+}
+
+//#endregion
+export { LabAuthoring };

package/dist/lab-def/lab-runtime.mjs

@@ -0,0 +1,134 @@
+'use client';
+
+import { LabEmbedProvider } from "../kit/embed.mjs";
+import { Component, createElement, useCallback, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@/components/ui/button";
+
+//#region src/lab-def/lab-runtime.tsx
+/**
+* LabRuntime — render a lab from its manifest's PER-LAB lazy loader. Mirrors the
+* loading / ready / error+retry states of the domain-level LazyLab (blocks/lazy-resolve),
+* but the boundary here is one chunk PER LAB (`manifest.loadRuntime`), not per domain —
+* opening one lab downloads only that lab, not its whole subject.
+*/
+/**
+* Catches a lab that throws while RENDERING (bad authored data, not a failed import).
+*
+* Without it the throw escapes to the host's per-block boundary, which replaces the whole
+* block — including its config panel — so an author faced with "couldn't render" had no way
+* to reach the field that was wrong. Keeping the failure inside the preview leaves the panel
+* usable, and editing any value resets the boundary so the fix shows immediately.
+*/
+var LabRenderBoundary = class extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			message: null,
+			key: props.resetKey
+		};
+	}
+	static getDerivedStateFromError(error) {
+		return { message: error.message || "This lab could not render." };
+	}
+	static getDerivedStateFromProps(props, state) {
+		return props.resetKey === state.key ? null : {
+			message: null,
+			key: props.resetKey
+		};
+	}
+	render() {
+		if (this.state.message === null) return this.props.children;
+		return /* @__PURE__ */ jsxs("div", {
+			role: "alert",
+			style: {
+				display: "grid",
+				gap: 4,
+				padding: "10px 12px",
+				borderRadius: 8,
+				background: "color-mix(in oklab, var(--destructive, #b91c1c) 8%, transparent)",
+				color: "var(--destructive, #b91c1c)",
+				fontSize: 12,
+				lineHeight: 1.5
+			},
+			children: [
+				/* @__PURE__ */ jsx("strong", { children: "This lab can’t preview with its current settings." }),
+				/* @__PURE__ */ jsx("span", { children: this.state.message }),
+				/* @__PURE__ */ jsx("span", {
+					style: { opacity: .8 },
+					children: "Fix it in the panel above; the preview returns on change."
+				})
+			]
+		});
+	}
+};
+function LabRuntime({ loader, attributes }) {
+	const [state, setState] = useState({
+		status: "loading",
+		Comp: null
+	});
+	const [attempt, setAttempt] = useState(0);
+	useEffect(() => {
+		let alive = true;
+		setState({
+			status: "loading",
+			Comp: null
+		});
+		loader().then((mod) => {
+			if (alive) setState({
+				status: "ready",
+				Comp: mod.default
+			});
+		}, () => {
+			if (alive) setState({
+				status: "error",
+				Comp: null
+			});
+		});
+		return () => {
+			alive = false;
+		};
+	}, [loader, attempt]);
+	const retry = useCallback(() => setAttempt((n) => n + 1), []);
+	if (state.status === "error") return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		style: {
+			display: "grid",
+			placeItems: "center",
+			gap: 8,
+			minHeight: 80,
+			padding: 12,
+			color: "var(--destructive, #b91c1c)",
+			fontSize: 12,
+			textAlign: "center"
+		},
+		children: [/* @__PURE__ */ jsx("span", { children: "This lab failed to load." }), /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			size: "sm",
+			variant: "outline",
+			onClick: retry,
+			children: "Retry"
+		})]
+	});
+	if (state.status === "loading" || !state.Comp) return /* @__PURE__ */ jsx("div", {
+		"aria-busy": "true",
+		style: {
+			display: "grid",
+			placeItems: "center",
+			minHeight: 80,
+			color: "var(--stage-muted)",
+			fontSize: 12
+		},
+		children: "loading lab…"
+	});
+	/**
+	* Every lab rendered from an MDX tag arrives here, and only here, so this is where a
+	* lab learns that the surrounding lesson has already introduced it. Importing a lab
+	* component directly (gallery, stage-preview, authoring) bypasses this and keeps the
+	* full self-introducing heading, which is correct: there, nothing else names it.
+	*/
+	return createElement(LabEmbedProvider, null, createElement(state.Comp, attributes));
+}
+
+//#endregion
+export { LabRenderBoundary, LabRuntime };

package/dist/lab-def/to-block.mjs

@@ -0,0 +1,55 @@
+'use client';
+
+import { LabConfig } from "../blocks/lab-config.mjs";
+import { parseAuthoredAttrs } from "./attrs.mjs";
+import { LabRenderBoundary, LabRuntime } from "./lab-runtime.mjs";
+import { LabAuthoring } from "./lab-authoring.mjs";
+import { labTag } from "./define-lab.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { defineBlock } from "@classytic/cms-ui/contract";
+
+//#region src/lab-def/to-block.tsx
+function manifestToBlock(manifest) {
+	const loader = manifest.loadRuntime;
+	return defineBlock({
+		key: manifest.id,
+		void: true,
+		tag: manifest.tag ?? labTag(manifest.id),
+		label: manifest.title,
+		description: manifest.description,
+		category: "interactive",
+		slash: false,
+		schema: manifest.schema,
+		/**
+		* Repair structured attributes on read: MDX accepts any JS expression, but the editor's
+		* round-trip reads them with `JSON.parse`, so an ordinary object literal (`{items:[…]}`,
+		* unquoted keys) arrives as a raw string and the lab throws. See `parseAuthoredValue`.
+		*/
+		fromAttrs: parseAuthoredAttrs,
+		Component: ({ attributes, mode, updateAttributes, children }) => {
+			const resetKey = mode === "editing" ? JSON.stringify(attributes) : void 0;
+			const runtime = /* @__PURE__ */ jsx(LabRenderBoundary, {
+				...resetKey === void 0 ? {} : { resetKey },
+				children: /* @__PURE__ */ jsx(LabRuntime, {
+					loader,
+					attributes
+				})
+			});
+			if (mode !== "editing" || !updateAttributes) return /* @__PURE__ */ jsxs(Fragment, { children: [runtime, children] });
+			const onChange = updateAttributes;
+			return /* @__PURE__ */ jsxs("div", { children: [manifest.loadAuthoring ? /* @__PURE__ */ jsx(LabAuthoring, {
+				loader: manifest.loadAuthoring,
+				value: attributes,
+				onChange
+			}) : /* @__PURE__ */ jsx(LabConfig, {
+				schema: manifest.schema,
+				value: attributes,
+				onChange,
+				...manifest.omit ? { omit: manifest.omit } : {}
+			}), runtime] });
+		}
+	});
+}
+
+//#endregion
+export { manifestToBlock };

package/dist/language/activity.d.mts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+
+//#region src/language/activity.d.ts
+interface LanguageActivityProps {
+  title: ReactNode;
+  prompt?: ReactNode;
+  objectives?: string[];
+  progress?: ReactNode;
+  children: ReactNode;
+  aside?: ReactNode;
+  controls?: ReactNode;
+  footer?: ReactNode;
+  canvasLabel?: string;
+}
+/** One compact anatomy for vocabulary, listening, grammar, and reading activities. */
+declare function LanguageActivity({
+  title,
+  prompt,
+  objectives,
+  progress,
+  children,
+  aside,
+  controls,
+  footer,
+  canvasLabel
+}: LanguageActivityProps): ReactNode;
+//#endregion
+export { LanguageActivity, LanguageActivityProps };