@classytic/labs 0.1.0

package/dist/blocks/index.mjs

@@ -0,0 +1,120 @@
+import { coerceArray } from "./authoring.mjs";
+import { LabConfig } from "./lab-config.mjs";
+import { AtwoodBlock, BulletWallsBlock, CarnotBlock, CircularMotionBlock, CollisionTrackBlock, DopplerBlock, EfficiencyBlock, EnergySkateBlock, EntropyBlock, GasProcessBlock, GravitationBlock, GravityDropBlock, HeatTransferBlock, HeatingCurveBlock, ImpulseBlock, KeplerBlock, LeverBlock, LeverPuzzle, LorentzBlock, MagnetismBlock, OpticsBlock, OrbitLabBlock, ProjectileLabBlock, RainRelativeBlock, RampForcesBlock, RippleTankBlock, RiverBoatBlock, SimpleHarmonicBlock, StoppingDistanceBlock, StringReflectionBlock, TemperatureScalesBlock, TerminalVelocityBlock, ThermalExpansionBlock, VectorBoardBlock, VectorTypesBlock, WaterDensityBlock, WaveBlock, physicsBlocks, physicsComponents } from "./physics.mjs";
+import { AreaModelBlock, BalanceAlgebraBlock, DerivationBlock, DerivativeExplorerBlock, GradientDescentBlock, GraphBlock, GrowingPatternBlock, IntegralExplorerBlock, InteractiveProblemBlock, LimitExplorerBlock, LinearSystemBlock, LinearSystemView, MysteryBucketBlock, NumberLineBlock, TriangleTrigBlock, TrigExplorerBlock, VertexParabolaBlock, mathBlocks, mathComponents } from "./math.mjs";
+import { BatteryBlock, BohrAtomBlock, DilutionBlock, ElectrochemBlock, GasBoxBlock, KineticsBlock, LeChatelierBlock, PeriodicTrendsBlock, ReactionLabBlock, ReactionProfileBlock, SolutionBoxBlock, StoichiometryBlock, TitrationBlock, chemBlocks, chemComponents } from "./chem.mjs";
+import { CapacitorLeakBlock, CircuitBlock, CircuitBuilderBlock, CircuitLabBlock, CircuitPuzzle, circuitsBlocks, circuitsComponents } from "./circuits.mjs";
+import { GeometryBoardBlock, IntersectingCirclesBlock, geometryBlocks, geometryComponents } from "./geometry.mjs";
+import { BaseOdometerBlock, BitGrouperBlock, PlaceValueDialBlock, ictBlocks, ictComponents } from "./ict.mjs";
+import { AgreementBlock, ArticleLensBlock, PrepositionBlock, SentenceBuilderBlock, TransformBlock, WordMatchBlock, languageBlocks, languageComponents } from "./language.mjs";
+import { EquationBalanceBlock, JournalPosterBlock, StatementSorterBlock, accountingBlocks, accountingComponents } from "./accounting.mjs";
+import { DemandShiftVsMoveBlock, ElasticityRevenueBlock, MarketEquilibriumBlock, economicsBlocks, economicsComponents } from "./economics.mjs";
+import { CentralDogmaBlock, EnzymeRateBlock, GeneticCrossBlock, PhotosynthesisFactorsBlock, PunnettCrossBlock, RespirationBlock, SequenceBlock, SexLinkedCrossBlock, biologyBlocks, biologyComponents } from "./biology.mjs";
+import { CycleBlock, geographyBlocks, geographyComponents } from "./geography.mjs";
+import { ClassifierThresholdBlock, KMeansBlock, RegressionBlock, mlBlocks, mlComponents } from "./ml.mjs";
+import { ArrangementsBlock, BayesBlock, BinomialBlock, BooleanCircuitBlock, CountingSlotsBlock, CountingTreeBlock, ExpectedValueBlock, HypergeometricBlock, KarnaughBlock, LawOfLargeNumbersBlock, MonteCarloBlock, MontyHallBlock, OutcomeBuilderBlock, PascalBlock, SampleSpaceBlock, SelectionBlock, TruthTableBlock, VennBlock, discreteBlocks, discreteComponents } from "./discrete.mjs";
+import { CenterSpreadBlock, GaltonBlock, HistogramBlock, NormalBlock, SamplingBlock, SeriesBlock, ZTableBlock, statisticsBlocks, statisticsComponents } from "./statistics.mjs";
+import { PredictBlock, PredictWidget, lessonBlocks, lessonComponents } from "./lesson.mjs";
+import { LabGallery } from "./lab-gallery.mjs";
+
+//#region src/blocks/index.tsx
+/** Every lab block — pass to `<CmsBlockEditor blocks={labsBlocks}>` (slash menu). */
+const labsBlocks = [
+	...lessonBlocks,
+	...languageBlocks,
+	...physicsBlocks,
+	...mathBlocks,
+	...chemBlocks,
+	...circuitsBlocks,
+	...geometryBlocks,
+	...ictBlocks,
+	...accountingBlocks,
+	...economicsBlocks,
+	...biologyBlocks,
+	...geographyBlocks,
+	...mlBlocks,
+	...discreteBlocks,
+	...statisticsBlocks
+];
+/** MDX render map — merge into the host's `blockComponents` (tag → component).
+*  Tags match each block's `tag` so editor + player render the same component.
+*  Tags are unique across domains, so spread order is irrelevant. */
+const labsComponents = {
+	...lessonComponents,
+	...languageComponents,
+	...physicsComponents,
+	...mathComponents,
+	...chemComponents,
+	...circuitsComponents,
+	...geometryComponents,
+	...ictComponents,
+	...accountingComponents,
+	...economicsComponents,
+	...biologyComponents,
+	...geographyComponents,
+	...mlComponents,
+	...discreteComponents,
+	...statisticsComponents
+};
+/** Every lab tagged with its subject group, for `<LabGallery blocks={labGalleryItems}>`. */
+const labGalleryItems = [
+	...mathBlocks.map((b) => ({
+		...b,
+		group: "Math"
+	})),
+	...physicsBlocks.map((b) => ({
+		...b,
+		group: "Physics"
+	})),
+	...chemBlocks.map((b) => ({
+		...b,
+		group: "Chemistry"
+	})),
+	...biologyBlocks.map((b) => ({
+		...b,
+		group: "Biology"
+	})),
+	...circuitsBlocks.map((b) => ({
+		...b,
+		group: "Circuits"
+	})),
+	...geometryBlocks.map((b) => ({
+		...b,
+		group: "Geometry"
+	})),
+	...discreteBlocks.map((b) => ({
+		...b,
+		group: "Discrete"
+	})),
+	...statisticsBlocks.map((b) => ({
+		...b,
+		group: "Statistics"
+	})),
+	...ictBlocks.map((b) => ({
+		...b,
+		group: "ICT"
+	})),
+	...languageBlocks.map((b) => ({
+		...b,
+		group: "Language"
+	})),
+	...accountingBlocks.map((b) => ({
+		...b,
+		group: "Accounting"
+	})),
+	...economicsBlocks.map((b) => ({
+		...b,
+		group: "Economics"
+	})),
+	...geographyBlocks.map((b) => ({
+		...b,
+		group: "Geography"
+	})),
+	...mlBlocks.map((b) => ({
+		...b,
+		group: "Machine learning"
+	}))
+];
+
+//#endregion
+export { AgreementBlock, AreaModelBlock, ArrangementsBlock, ArticleLensBlock, AtwoodBlock, BalanceAlgebraBlock, BaseOdometerBlock, BatteryBlock, BayesBlock, BinomialBlock, BitGrouperBlock, BohrAtomBlock, BooleanCircuitBlock, BulletWallsBlock, CapacitorLeakBlock, CarnotBlock, CenterSpreadBlock, CentralDogmaBlock, CircuitBlock, CircuitBuilderBlock, CircuitLabBlock, CircuitPuzzle, CircularMotionBlock, ClassifierThresholdBlock, CollisionTrackBlock, CountingSlotsBlock, CountingTreeBlock, CycleBlock, DemandShiftVsMoveBlock, DerivationBlock, DerivativeExplorerBlock, DilutionBlock, DopplerBlock, EfficiencyBlock, ElasticityRevenueBlock, ElectrochemBlock, EnergySkateBlock, EntropyBlock, EnzymeRateBlock, EquationBalanceBlock, ExpectedValueBlock, GaltonBlock, GasBoxBlock, GasProcessBlock, GeneticCrossBlock, GeometryBoardBlock, GradientDescentBlock, GraphBlock, GravitationBlock, GravityDropBlock, GrowingPatternBlock, HeatTransferBlock, HeatingCurveBlock, HistogramBlock, HypergeometricBlock, ImpulseBlock, IntegralExplorerBlock, InteractiveProblemBlock, IntersectingCirclesBlock, JournalPosterBlock, KMeansBlock, KarnaughBlock, KeplerBlock, KineticsBlock, LabConfig, LabGallery, LawOfLargeNumbersBlock, LeChatelierBlock, LeverBlock, LeverPuzzle, LimitExplorerBlock, LinearSystemBlock, LinearSystemView, LorentzBlock, MagnetismBlock, MarketEquilibriumBlock, MonteCarloBlock, MontyHallBlock, MysteryBucketBlock, NormalBlock, NumberLineBlock, OpticsBlock, OrbitLabBlock, OutcomeBuilderBlock, PascalBlock, PeriodicTrendsBlock, PhotosynthesisFactorsBlock, PlaceValueDialBlock, PredictBlock, PredictWidget, PrepositionBlock, ProjectileLabBlock, PunnettCrossBlock, RainRelativeBlock, RampForcesBlock, ReactionLabBlock, ReactionProfileBlock, RegressionBlock, RespirationBlock, RippleTankBlock, RiverBoatBlock, SampleSpaceBlock, SamplingBlock, SelectionBlock, SentenceBuilderBlock, SequenceBlock, SeriesBlock, SexLinkedCrossBlock, SimpleHarmonicBlock, SolutionBoxBlock, StatementSorterBlock, StoichiometryBlock, StoppingDistanceBlock, StringReflectionBlock, TemperatureScalesBlock, TerminalVelocityBlock, ThermalExpansionBlock, TitrationBlock, TransformBlock, TriangleTrigBlock, TrigExplorerBlock, TruthTableBlock, VectorBoardBlock, VectorTypesBlock, VennBlock, VertexParabolaBlock, WaterDensityBlock, WaveBlock, WordMatchBlock, ZTableBlock, accountingBlocks, accountingComponents, biologyBlocks, biologyComponents, chemBlocks, chemComponents, circuitsBlocks, circuitsComponents, coerceArray, discreteBlocks, discreteComponents, economicsBlocks, economicsComponents, geographyBlocks, geographyComponents, geometryBlocks, geometryComponents, ictBlocks, ictComponents, labGalleryItems, labsBlocks, labsComponents, languageBlocks, languageComponents, lessonBlocks, lessonComponents, mathBlocks, mathComponents, mlBlocks, mlComponents, physicsBlocks, physicsComponents, statisticsBlocks, statisticsComponents };

package/dist/blocks/lab-block.d.mts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { z } from "zod";
+import { defineBlock } from "@classytic/cms-ui/contract";
+
+//#region src/blocks/lab-block.d.ts
+/**
+ * A `defineBlock` result PLUS the MDX `tag` and raw `lab` render fn, so a domain's
+ * tag→component render map can be DERIVED from its blocks (see {@link buildComponents})
+ * instead of being hand-maintained in parallel.
+ */
+type LabBlock = ReturnType<typeof defineBlock> & {
+  readonly tag: string;
+  readonly lab: (a: any) => ReactNode;
+};
+//#endregion
+export { LabBlock };

package/dist/blocks/lab-block.mjs

@@ -0,0 +1,74 @@
+'use client';
+
+import { LabConfig } from "./lab-config.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { z } from "zod";
+import { defineBlock } from "@classytic/cms-ui/contract";
+
+//#region src/blocks/lab-block.tsx
+/**
+* labBlock — wrap a plain lab component into a CMS block "on call", with ZERO
+* per-lab boilerplate. The host passes the lab component + its zod prop-schema; this
+* returns a `defineBlock` spec whose Component:
+*   • in render mode  → spreads the block attributes straight into the lab, and
+*   • in editing mode → shows the generic, zod-driven `LabConfig` panel above it
+*     (one field per prop, derived from the schema — no hand-written ConfigPanel).
+* The MDX tag is auto-derived (PascalCase of the key) by `defineBlock`.
+*
+* This is the ONE shared factory for every domain (`./physics`, `./chem`, …) — a
+* domain file just declares `labBlock({ key, label, description, schema, Component })`
+* per lab instead of re-implementing the defineBlock + attribute-spread + editor
+* wiring each time. `commonLabProps` are the title/prompt/objectives/hints/controlId
+* fields every lab accepts; spread them into a lab's schema with `...commonLabProps`.
+*/
+/** The authoring props every lab accepts. Spread into a lab schema: `{ ...commonLabProps }`. */
+const commonLabProps = {
+	title: z.string().optional(),
+	prompt: z.string().optional(),
+	objectives: z.array(z.string()).optional(),
+	hints: z.array(z.string()).optional(),
+	controlId: z.string().optional()
+};
+/** PascalCase MDX tag from a kebab key — mirrors `defineBlock`'s default, for building a components map. */
+const pascalTag = (key) => key.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+function labBlock({ key, label, description, schema, Component, tag, omit }) {
+	const block = defineBlock({
+		key,
+		void: true,
+		...tag ? { tag } : {},
+		label,
+		description,
+		category: "interactive",
+		schema,
+		Component: ({ attributes, mode, updateAttributes }) => {
+			const widget = Component(attributes);
+			if (mode !== "editing" || !updateAttributes) return widget;
+			return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(LabConfig, {
+				schema,
+				value: attributes,
+				onChange: updateAttributes,
+				omit
+			}), widget] });
+		}
+	});
+	return Object.assign(block, {
+		tag: tag ?? pascalTag(key),
+		lab: Component
+	});
+}
+/**
+* Derive the tag→component MDX render map from a domain's blocks — ONE source of truth.
+* Only `labBlock`-created blocks carry `.lab`; bespoke `defineBlock` blocks (custom editor
+* UI) are merged into the map by hand alongside this.
+*/
+function buildComponents(blocks) {
+	const map = {};
+	for (const b of blocks) {
+		const lb = b;
+		if (typeof lb.tag === "string" && typeof lb.lab === "function") map[lb.tag] = lb.lab;
+	}
+	return map;
+}
+
+//#endregion
+export { buildComponents, commonLabProps, labBlock };

package/dist/blocks/lab-config.d.mts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { z } from "zod";
+
+//#region src/blocks/lab-config.d.ts
+interface LabConfigProps {
+  schema: z.ZodType;
+  value: Record<string, unknown>;
+  /** Patch callback — same shape as a block's `updateAttributes`. */
+  onChange: (patch: Record<string, unknown>) => void;
+  /** Props to skip (e.g. ones a bespoke panel already handles). */
+  omit?: string[];
+  /** Internal: nested objects render without re-wrapping in a ConfigPanel. */
+  flat?: boolean;
+}
+declare function LabConfig({
+  schema,
+  value,
+  onChange,
+  omit,
+  flat
+}: LabConfigProps): ReactNode;
+//#endregion
+export { LabConfig, LabConfigProps };

package/dist/blocks/lab-config.mjs

@@ -0,0 +1,200 @@
+'use client';
+
+import { ChipToggle, ConfigPanel, ConfigRow, JsonArea, NumField, RowsEditor, TagsField, TextField } from "./authoring.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { z } from "zod";
+
+//#region src/blocks/lab-config.tsx
+/**
+* LabConfig — the schema→form primitive. Give it a lab's Zod prop schema (already
+* the source of truth) + the current attributes + an `updateAttributes`-shaped
+* patch callback, and it introspects the schema and renders a friendly form — NO
+* raw JSON for the common cases:
+*   string→TextField · number→NumField · boolean→toggle · enum→chips
+*   array<object>→RowsEditor (columns auto-derived from the element shape)
+*   array<string>→tag input · nested object→a nested sub-form (recursion)
+* Only genuinely un-introspectable shapes (unions, records, arrays of arrays)
+* fall back to a raw-JSON box — an explicit last resort, not the default.
+*
+* So a block can drop its whole hand-built panel and do
+*   <LabConfig schema={SCHEMA} value={attributes} onChange={updateAttributes} />
+* and new props appear automatically. Bespoke panels stay only where a tailored
+* UX (e.g. a transaction builder, the lab picker) genuinely beats the auto-form.
+*/
+/** Peel optional / default / nullable wrappers to the underlying type. */
+function baseOf(schema) {
+	let s = schema;
+	for (let i = 0; i < 8; i++) {
+		if (s instanceof z.ZodOptional || s instanceof z.ZodNullable) {
+			s = s.unwrap();
+			continue;
+		}
+		if (s instanceof z.ZodDefault) {
+			s = s.def.innerType ?? s;
+			continue;
+		}
+		break;
+	}
+	return s;
+}
+/** The element schema of a ZodArray, across zod versions. */
+function elementOf(arr) {
+	const a = arr;
+	return a.element ?? a.def?.element ?? a.def?.type ?? null;
+}
+const GROW_KEYS = new Set([
+	"name",
+	"label",
+	"prompt",
+	"text",
+	"title",
+	"description"
+]);
+/** Map a ZodObject's fields to RowsEditor columns — null if any field is too complex to flatten. */
+function columnsFor(obj) {
+	const cols = [];
+	for (const [k, f] of Object.entries(obj.shape)) {
+		const b = baseOf(f);
+		const grow = GROW_KEYS.has(k);
+		if (b instanceof z.ZodString) cols.push({
+			key: k,
+			label: k,
+			grow
+		});
+		else if (b instanceof z.ZodNumber) cols.push({
+			key: k,
+			label: k,
+			type: "number"
+		});
+		else if (b instanceof z.ZodBoolean) cols.push({
+			key: k,
+			label: k,
+			type: "bool"
+		});
+		else if (b instanceof z.ZodEnum) cols.push({
+			key: k,
+			label: k,
+			type: "select",
+			options: b.options ?? []
+		});
+		else return null;
+	}
+	return cols.length ? cols : null;
+}
+/** A blank record matching a ZodObject (for RowsEditor's "+ row"). */
+function blankFor(obj) {
+	const r = {};
+	for (const [k, f] of Object.entries(obj.shape)) {
+		const b = baseOf(f);
+		r[k] = b instanceof z.ZodNumber ? 0 : b instanceof z.ZodBoolean ? false : b instanceof z.ZodEnum ? b.options?.[0] ?? "" : "";
+	}
+	return r;
+}
+function LabConfig({ schema, value, onChange, omit = [], flat = false }) {
+	if (!(schema instanceof z.ZodObject)) return /* @__PURE__ */ jsx(JsonArea, {
+		value,
+		onChange: (v) => onChange(v)
+	});
+	const shape = schema.shape;
+	const set = (k, v) => onChange({ [k]: v });
+	const rows = Object.entries(shape).filter(([k]) => !omit.includes(k)).map(([key, field]) => {
+		const base = baseOf(field);
+		const cur = value?.[key];
+		if (base instanceof z.ZodString) return /* @__PURE__ */ jsx(ConfigRow, {
+			label: key,
+			children: /* @__PURE__ */ jsx(TextField, {
+				value: cur ?? "",
+				onChange: (v) => set(key, v),
+				className: "flex-1"
+			})
+		}, key);
+		if (base instanceof z.ZodNumber) return /* @__PURE__ */ jsx(ConfigRow, {
+			label: key,
+			children: /* @__PURE__ */ jsx(NumField, {
+				value: cur ?? 0,
+				onChange: (v) => set(key, v)
+			})
+		}, key);
+		if (base instanceof z.ZodBoolean) return /* @__PURE__ */ jsx(ConfigRow, {
+			label: key,
+			children: /* @__PURE__ */ jsx(ChipToggle, {
+				active: !!cur,
+				onClick: () => set(key, !cur),
+				children: key
+			})
+		}, key);
+		if (base instanceof z.ZodEnum) return /* @__PURE__ */ jsx(ConfigRow, {
+			label: key,
+			children: /* @__PURE__ */ jsx("span", {
+				style: {
+					display: "inline-flex",
+					gap: 6,
+					flexWrap: "wrap"
+				},
+				children: (base.options ?? []).map((o) => /* @__PURE__ */ jsx(ChipToggle, {
+					active: cur === o,
+					onClick: () => set(key, o),
+					children: o
+				}, o))
+			})
+		}, key);
+		if (base instanceof z.ZodArray) {
+			const el = elementOf(base);
+			const elBase = el ? baseOf(el) : null;
+			if (elBase instanceof z.ZodObject) {
+				const cols = columnsFor(elBase);
+				if (cols) return /* @__PURE__ */ jsx(ConfigRow, {
+					label: key,
+					children: /* @__PURE__ */ jsx(RowsEditor, {
+						rows: Array.isArray(cur) ? cur : [],
+						columns: cols,
+						addLabel: key.replace(/s$/, "") || "row",
+						newRow: () => blankFor(elBase),
+						onChange: (v) => set(key, v)
+					})
+				}, key);
+			}
+			if (elBase instanceof z.ZodString) return /* @__PURE__ */ jsx(ConfigRow, {
+				label: key,
+				children: /* @__PURE__ */ jsx(TagsField, {
+					value: Array.isArray(cur) ? cur : [],
+					onChange: (v) => set(key, v),
+					placeholder: key
+				})
+			}, key);
+			return /* @__PURE__ */ jsx(ConfigRow, {
+				label: `${key} (advanced)`,
+				children: /* @__PURE__ */ jsx(JsonArea, {
+					value: cur ?? [],
+					onChange: (v) => set(key, v)
+				})
+			}, key);
+		}
+		if (base instanceof z.ZodObject) return /* @__PURE__ */ jsx(ConfigRow, {
+			label: key,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "w-full rounded-md border border-border/60 bg-background/40 p-1.5",
+				children: /* @__PURE__ */ jsx(LabConfig, {
+					schema: base,
+					value: cur ?? {},
+					onChange: (patch) => set(key, {
+						...cur ?? {},
+						...patch
+					}),
+					flat: true
+				})
+			})
+		}, key);
+		return /* @__PURE__ */ jsx(ConfigRow, {
+			label: `${key} (advanced)`,
+			children: /* @__PURE__ */ jsx(JsonArea, {
+				value: cur ?? null,
+				onChange: (v) => set(key, v)
+			})
+		}, key);
+	});
+	return flat ? /* @__PURE__ */ jsx(Fragment, { children: rows }) : /* @__PURE__ */ jsx(ConfigPanel, { children: rows });
+}
+
+//#endregion
+export { LabConfig };

package/dist/blocks/lab-gallery.d.mts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+
+//#region src/blocks/lab-gallery.d.ts
+/** The minimum a gallery card needs — structurally satisfied by a cms-ui BlockSpec. */
+interface LabPickItem {
+  key: string;
+  /** MDX tag / Plate node type the host inserts on pick. */
+  tag?: string;
+  label: string;
+  description?: string;
+  /** Subject grouping for the gallery (e.g. 'Math', 'Physics'). */
+  group?: string;
+  /** Renders the lab; called with `mode:'preview'` for the thumbnail. */
+  Component: (props: {
+    attributes: Record<string, unknown>;
+    mode: string;
+  }) => ReactNode;
+  /** Example attributes to preview with (defaults to {} → the lab's own defaults). */
+  defaults?: Record<string, unknown>;
+}
+interface LabGalleryProps {
+  blocks: LabPickItem[];
+  onPick?: (item: LabPickItem) => void;
+}
+declare function LabGallery({
+  blocks,
+  onPick
+}: LabGalleryProps): ReactNode;
+//#endregion
+export { LabGallery, LabGalleryProps, LabPickItem };

package/dist/blocks/lab-gallery.mjs

@@ -0,0 +1,208 @@
+'use client';
+
+import { Component, createElement, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/blocks/lab-gallery.tsx
+/**
+* LabGallery — the visual lab PICKER primitive. Instead of a 80-item slash menu,
+* a host shows ONE "Insert lab" affordance that opens this gallery in a sheet: a
+* searchable, domain-grouped grid where each card is a LIVE mini-preview of the lab
+* (the block spec rendered in `preview` mode with default props), mounted lazily as
+* it scrolls into view. Picking a card calls `onPick(item)` — the host then inserts
+* that lab's concrete block. Editor-agnostic: it only needs the block metadata +
+* each spec's render `Component`.
+*/
+/** Isolate a single preview so one lab that throws can't take down the gallery. */
+var PreviewBoundary = class extends Component {
+	state = { failed: false };
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	render() {
+		if (this.state.failed) return /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "grid",
+				placeItems: "center",
+				height: "100%",
+				color: "var(--stage-muted)",
+				fontSize: 12
+			},
+			children: "preview unavailable"
+		});
+		return this.props.children;
+	}
+};
+function LivePreview({ item }) {
+	const ref = useRef(null);
+	const [show, setShow] = useState(false);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el || show) return;
+		if (typeof IntersectionObserver === "undefined") {
+			setShow(true);
+			return;
+		}
+		const io = new IntersectionObserver((es) => {
+			if (es.some((e) => e.isIntersecting)) {
+				setShow(true);
+				io.disconnect();
+			}
+		}, { rootMargin: "250px" });
+		io.observe(el);
+		return () => io.disconnect();
+	}, [show]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"aria-hidden": true,
+		style: {
+			pointerEvents: "none",
+			height: 150,
+			overflow: "hidden",
+			borderRadius: 10,
+			background: "var(--stage-bg)",
+			border: "1px solid var(--stage-grid)"
+		},
+		children: show ? /* @__PURE__ */ jsx(PreviewBoundary, { children: createElement(item.Component, {
+			attributes: item.defaults ?? {},
+			mode: "preview"
+		}) }) : /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "grid",
+				placeItems: "center",
+				height: "100%",
+				color: "var(--stage-muted)",
+				fontSize: 12
+			},
+			children: "preview…"
+		})
+	});
+}
+function LabGallery({ blocks, onPick }) {
+	const [q, setQ] = useState("");
+	const [group, setGroup] = useState(null);
+	const groups = useMemo(() => [...new Set(blocks.map((b) => b.group ?? "Other"))].sort(), [blocks]);
+	const ql = q.trim().toLowerCase();
+	const items = blocks.filter((b) => (!group || (b.group ?? "Other") === group) && (!ql || `${b.label} ${b.description ?? ""} ${b.group ?? ""}`.toLowerCase().includes(ql)));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lab-gallery",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 12,
+			minHeight: 200
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					flexWrap: "wrap",
+					gap: 8,
+					alignItems: "center"
+				},
+				children: /* @__PURE__ */ jsx("input", {
+					className: "lab-input",
+					value: q,
+					placeholder: "Search labs…",
+					"aria-label": "search labs",
+					onChange: (e) => setQ(e.currentTarget.value),
+					style: { flex: "1 1 200px" }
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexWrap: "wrap",
+					gap: 6
+				},
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "lab-choice",
+					"data-picked": group === null || void 0,
+					onClick: () => setGroup(null),
+					children: "All"
+				}), groups.map((g) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "lab-choice",
+					"data-picked": group === g || void 0,
+					onClick: () => setGroup((c) => c === g ? null : g),
+					children: g
+				}, g))]
+			}),
+			items.length === 0 ? /* @__PURE__ */ jsxs("p", {
+				style: {
+					color: "var(--stage-muted)",
+					fontSize: 13,
+					padding: "24px 0",
+					textAlign: "center"
+				},
+				children: [
+					"No labs match “",
+					q,
+					"”."
+				]
+			}) : /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
+					gap: 12
+				},
+				children: items.map((b) => /* @__PURE__ */ jsxs("div", {
+					role: "button",
+					tabIndex: 0,
+					onClick: () => onPick?.(b),
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							onPick?.(b);
+						}
+					},
+					className: "lab-gallery-card",
+					"aria-label": `Insert ${b.label}`,
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: 6,
+						textAlign: "left",
+						padding: 10,
+						borderRadius: 12,
+						border: "1px solid var(--border, color-mix(in oklab, currentColor 16%, transparent))",
+						background: "var(--card, transparent)",
+						cursor: "pointer"
+					},
+					children: [
+						/* @__PURE__ */ jsx(LivePreview, { item: b }),
+						/* @__PURE__ */ jsx("span", {
+							style: {
+								fontWeight: 700,
+								fontSize: 13.5
+							},
+							children: b.label
+						}),
+						b.description && /* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: 12,
+								color: "var(--stage-muted, color-mix(in oklab, currentColor 55%, transparent))",
+								lineHeight: 1.35
+							},
+							children: b.description
+						}),
+						b.group && /* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: 10,
+								fontWeight: 700,
+								letterSpacing: ".04em",
+								textTransform: "uppercase",
+								color: "var(--stage-muted)"
+							},
+							children: b.group
+						})
+					]
+				}, b.key))
+			})
+		]
+	});
+}
+
+//#endregion
+export { LabGallery };