structured-context-map-views 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,6 +1,70 @@
-import { a as resolveRegions, i as resolveParameterValues, n as mapViewsForSchema, o as selectionFilter, r as parseMapViewDefinition, s as MAP_VIEW_SCHEMAS, t as MapViewDefinitionError } from "./definition-KuPoA1mO.js";
-import { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { a as resolveRegions, c as MAP_VIEW_SCHEMAS, i as resolveParameterValues, n as mapViewsForSchema, o as selectionFilter, r as parseMapViewDefinition, s as viewValidationLevel, t as MapViewDefinitionError } from "./definition-Cft28YUA.js";
+import { createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/core/annotations.ts
+/**
+* Attach validation results to the nodes of `graph`, by node id. Results that can't be attached are
+* returned in `unattached` for the host to surface: global-scope rules (no node), and nodes that
+* aren't in the graph, which includes every node that failed its schema.
+*/
+function annotationsFrom(input, graph) {
+	const annotations = /* @__PURE__ */ new Map();
+	const unattached = [];
+	const add = (nodeId, annotation, location) => {
+		if (nodeId !== void 0 && graph.nodes.has(nodeId)) annotations.set(nodeId, [...annotations.get(nodeId) ?? [], annotation]);
+		else unattached.push({
+			...annotation,
+			nodeId,
+			...location && { location }
+		});
+	};
+	for (const { nodeId, source, issues } of input.nodeErrors ?? []) for (const issue of issues) add(nodeId, {
+		severity: "error",
+		source: "schema",
+		message: issue.message
+	}, source);
+	for (const { nodeId, description } of input.hierarchyViolations ?? []) add(nodeId, {
+		severity: "error",
+		source: "hierarchy",
+		message: description
+	});
+	for (const { nodeId, description, severity, ruleId } of input.ruleViolations ?? []) add(nodeId, {
+		severity,
+		source: "rule",
+		message: description,
+		ruleId
+	});
+	return {
+		annotations,
+		unattached
+	};
+}
+var RANK = {
+	error: 0,
+	warning: 1,
+	info: 2
+};
+/** The most serious severity among annotations, or undefined if there are none. */
+function worstSeverity(annotations) {
+	return annotations.reduce((worst, { severity }) => worst === void 0 || RANK[severity] < RANK[worst] ? severity : worst, void 0);
+}
+/**
+* The annotations a map view shows: those at `level` or more serious, from `sources`. `off` shows none.
+* Nodes left with no annotations are dropped from the index.
+*/
+function filterAnnotations(index, level, sources) {
+	if (level === "off") return /* @__PURE__ */ new Map();
+	const filtered = /* @__PURE__ */ new Map();
+	for (const [id, annotations] of index) {
+		const kept = annotations.filter((a) => RANK[a.severity] <= RANK[level] && sources.includes(a.source));
+		if (kept.length > 0) filtered.set(id, kept);
+	}
+	return filtered;
+}
+/** The annotations a map view shows, already narrowed by its validation settings. Read by node cards. */
+var AnnotationsContext = createContext(/* @__PURE__ */ new Map());
+var useAnnotations = () => useContext(AnnotationsContext);
+//#endregion
 //#region src/core/graph.ts
 var NONE = [];
 /**
@@ -163,165 +227,6 @@ function hasValue(node, { field, value }) {
 	return valuesOf(node, field).includes(value);
 }
 //#endregion
-//#region src/core/tree.ts
-/**
-* Lay a space out as a tree over its hierarchy.
-*
-* Roots are root-type nodes with no hierarchy parent. Traversal is depth-first in space order,
-* so a node's primary occurrence is under the parent reached first. Under its other parents a
-* node is either repeated without its subtree (`repeat`), or left out and linked by a cross-edge
-* (`cross-edge`). Either way traversal stops there, which also keeps cycles from recursing.
-*/
-function buildTree(graph, regionId, dag = "repeat") {
-	const { hierarchy } = graph;
-	const levelTypes = new Set(hierarchy?.levels.map((level) => level.type));
-	const rootType = hierarchy?.levels[0]?.type;
-	const primary = /* @__PURE__ */ new Map();
-	const pendingCross = [];
-	const hierarchyParents = (title) => parentEdges(graph, title).filter((edge) => isHierarchyEdge(edge, hierarchy));
-	const visit = (node, path) => {
-		const nodePath = [...path, node.id];
-		const key = occurrenceKey(regionId, nodePath);
-		primary.set(node.id, key);
-		const childTitles = new Set(childEdges(graph, node.id).filter((edge) => isHierarchyEdge(edge, hierarchy)).map((edge) => edge.child));
-		const children = [];
-		for (const title of childTitles) {
-			const child = graph.nodes.get(title);
-			const repeatOf = primary.get(title);
-			if (repeatOf === void 0) children.push(visit(child, nodePath));
-			else if (dag === "repeat") children.push({
-				key: occurrenceKey(regionId, [...nodePath, title]),
-				node: child,
-				children: [],
-				repeatOf
-			});
-			else pendingCross.push({
-				from: key,
-				child: title
-			});
-		}
-		return {
-			key,
-			node,
-			children
-		};
-	};
-	const levelNodes = [...graph.nodes.values()].filter((node) => levelTypes.has(node.resolvedType));
-	const unparented = levelNodes.filter((node) => hierarchyParents(node.id).length === 0);
-	const roots = unparented.filter((node) => node.resolvedType === rootType).map((node) => visit(node, []));
-	const orphans = unparented.filter((node) => node.resolvedType !== rootType).map((node) => visit(node, []));
-	for (const node of levelNodes) if (!primary.has(node.id)) orphans.push(visit(node, []));
-	return {
-		roots,
-		orphans,
-		primary,
-		crossLinks: pendingCross.map(({ from, child }) => ({
-			from,
-			to: primary.get(child),
-			kind: "cross"
-		}))
-	};
-}
-/** Parent → child pairs of occurrence keys: one per rendered parent-child link, then cross-links. */
-function treeLinks(tree) {
-	const links = [];
-	const walk = (occurrence) => {
-		for (const child of occurrence.children) {
-			links.push({
-				from: occurrence.key,
-				to: child.key,
-				kind: "tree"
-			});
-			walk(child);
-		}
-	};
-	for (const root of [...tree.roots, ...tree.orphans]) walk(root);
-	return [...links, ...tree.crossLinks];
-}
-//#endregion
-//#region src/core/xy.ts
-/**
-* Position nodes by two numeric fields. Every node of a plotted type appears once: on the plot
-* when both its values are numbers inside the axes' domains, otherwise in `unplaced` with the
-* reason. Positions are normalised; layouts decide the plot's size.
-*/
-function buildXYPlot(graph, regionId, layout) {
-	const { x, y } = layout;
-	const nodes = [...graph.nodes.values()];
-	const types = new Set(layout.types.length > 0 ? layout.types : nodes.filter((n) => isNumber(n.schemaData[x.field]) || isNumber(n.schemaData[y.field])).map((n) => n.resolvedType));
-	const plotted = nodes.filter((n) => types.has(n.resolvedType));
-	const domains = {
-		x: domainOf(x, plotted),
-		y: domainOf(y, plotted)
-	};
-	const points = [];
-	const unplaced = [];
-	for (const node of plotted) {
-		const key = occurrenceKey(regionId, [node.id]);
-		const px = position(node, x, domains.x);
-		const py = position(node, y, domains.y);
-		if (typeof px === "number" && typeof py === "number") points.push({
-			key,
-			node,
-			x: px,
-			y: py
-		});
-		else unplaced.push({
-			key,
-			node,
-			reasons: [px, py].filter((r) => typeof r === "string")
-		});
-	}
-	const keys = new Map(points.map((p) => [p.node.id, p.key]));
-	const fields = new Set(layout.edgeFields);
-	const links = edgesWithin(graph).filter((e) => keys.has(e.parent) && keys.has(e.child) && (fields.size === 0 || fields.has(e.field))).map((e) => ({
-		from: keys.get(e.parent),
-		to: keys.get(e.child),
-		field: e.field,
-		hierarchy: isHierarchyEdge(e, graph.hierarchy),
-		lane: 0
-	}));
-	assignLanes(links);
-	return {
-		points,
-		unplaced,
-		links,
-		domains
-	};
-}
-function isNumber(value) {
-	return typeof value === "number" && Number.isFinite(value);
-}
-/** The axis's fixed domain, or the range of plotted values (widened when they're all equal). */
-function domainOf(axis, nodes) {
-	if (Array.isArray(axis.domain)) return [axis.domain[0], axis.domain[1]];
-	const values = nodes.map((n) => n.schemaData[axis.field]).filter(isNumber);
-	if (values.length === 0) return [0, 1];
-	const min = Math.min(...values);
-	const max = Math.max(...values);
-	return min === max ? [min - 1, max + 1] : [min, max];
-}
-/** The node's normalised position on the axis, or why it has none. */
-function position(node, axis, [min, max]) {
-	const value = node.schemaData[axis.field];
-	if (value === void 0 || value === null) return `no ${axis.field}`;
-	if (!isNumber(value)) return `${axis.field} is not a number`;
-	if (value < min || value > max) return `${axis.field} ${value} is outside ${min}–${max}`;
-	const t = (value - min) / (max - min);
-	return axis.direction === "descending" ? 1 - t : t;
-}
-/** Spread links joining the same pair of nodes (in either direction) into lanes around 0. */
-function assignLanes(links) {
-	const byPair = /* @__PURE__ */ new Map();
-	for (const link of links) {
-		const pair = [link.from, link.to].sort().join("\n");
-		byPair.set(pair, [...byPair.get(pair) ?? [], link]);
-	}
-	for (const group of byPair.values()) group.forEach((link, i) => {
-		link.lane = i - (group.length - 1) / 2;
-	});
-}
-//#endregion
 //#region src/layouts/NodeCard.tsx
 /**
 * A clickable node, drawn as a card (title plus selected fields) or a compact shape with a
@@ -330,7 +235,8 @@ function assignLanes(links) {
 */
 function NodeCard({ node, repeat, nodes, onSelect }) {
 	const select = () => onSelect?.(node);
-	const label = `${node.resolvedType}: ${node.title}${repeat ? " (shown in full elsewhere)" : ""}`;
+	const annotations = useAnnotations().get(node.id);
+	const label = `${node.resolvedType}: ${node.title}${repeat ? " (shown in full elsewhere)" : ""}${annotationsLabel(annotations)}`;
 	const onKeyDown = (e) => {
 		if (e.key === "Enter" || e.key === " ") {
 			e.preventDefault();
@@ -338,18 +244,18 @@ function NodeCard({ node, repeat, nodes, onSelect }) {
 		}
 	};
 	const border = repeat ? "mv:border-dashed mv:border-muted/60 mv:opacity-75" : "mv:border-edge";
-	if (nodes.style === "shape") return /* @__PURE__ */ jsx("div", {
+	if (nodes.style === "shape") return /* @__PURE__ */ jsxs("div", {
 		role: "button",
 		tabIndex: 0,
 		title: label,
 		onClick: select,
 		onKeyDown,
 		"aria-label": label,
-		className: `mv:flex mv:size-6 mv:cursor-pointer mv:items-center mv:justify-center mv:rounded-full mv:border-2 mv:bg-card mv:text-[0.65rem] mv:font-semibold mv:uppercase mv:text-muted mv:hover:border-accent mv:focus-visible:outline-2 mv:focus-visible:outline-accent ${border}`,
-		children: /* @__PURE__ */ jsx("span", {
+		className: `mv:relative mv:flex mv:size-6 mv:cursor-pointer mv:items-center mv:justify-center mv:rounded-full mv:border-2 mv:bg-card mv:text-[0.65rem] mv:font-semibold mv:uppercase mv:text-muted mv:hover:border-accent mv:focus-visible:outline-2 mv:focus-visible:outline-accent ${border}`,
+		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			children: node.resolvedType.charAt(0)
-		})
+		}), /* @__PURE__ */ jsx(AnnotationBadge, { annotations })]
 	});
 	const fields = nodes.fields.map((field) => [field, formatValue(node.schemaData[field])]).filter(([, value]) => value !== void 0);
 	return /* @__PURE__ */ jsxs("div", {
@@ -358,7 +264,7 @@ function NodeCard({ node, repeat, nodes, onSelect }) {
 		title: label,
 		onClick: select,
 		onKeyDown,
-		className: `mv:w-44 mv:cursor-pointer mv:rounded-md mv:border mv:bg-card mv:px-2.5 mv:py-1.5 mv:text-left mv:shadow-sm mv:hover:border-accent mv:focus-visible:outline-2 mv:focus-visible:outline-accent ${border}`,
+		className: `mv:relative mv:w-44 mv:cursor-pointer mv:rounded-md mv:border mv:bg-card mv:px-2.5 mv:py-1.5 mv:text-left mv:shadow-sm mv:hover:border-accent mv:focus-visible:outline-2 mv:focus-visible:outline-accent ${border}`,
 		children: [
 			/* @__PURE__ */ jsxs("span", {
 				className: "mv:block mv:text-[0.65rem] mv:uppercase mv:tracking-wide mv:text-muted",
@@ -380,10 +286,31 @@ function NodeCard({ node, repeat, nodes, onSelect }) {
 						children: value
 					})]
 				}, field))
-			})
+			}),
+			/* @__PURE__ */ jsx(AnnotationBadge, { annotations })
 		]
 	});
 }
+var BADGE = {
+	error: "mv:bg-error",
+	warning: "mv:bg-warning",
+	info: "mv:bg-info"
+};
+/** A count of the node's validation results in the corner, coloured by the most serious. Decorative: the count is in the card's label. */
+function AnnotationBadge({ annotations }) {
+	const worst = annotations && worstSeverity(annotations);
+	if (!annotations || !worst) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: `mv:absolute mv:-top-1.5 mv:-right-1.5 mv:flex mv:h-4 mv:min-w-4 mv:items-center mv:justify-center mv:rounded-full mv:px-1 mv:text-[0.6rem] mv:font-semibold mv:text-white ${BADGE[worst]}`,
+		children: annotations.length
+	});
+}
+function annotationsLabel(annotations) {
+	const worst = annotations && worstSeverity(annotations);
+	if (!annotations || !worst) return "";
+	return ` (${annotations.length} validation ${annotations.length === 1 ? "result" : "results"}, most serious: ${worst})`;
+}
 function formatValue(value) {
 	if (value === void 0 || value === null || value === "") return void 0;
 	if (Array.isArray(value)) return value.map(String).join(", ");
@@ -513,6 +440,82 @@ function displayValue(value) {
 	return value.replace(/^\[\[([^\]|]+)(\|[^\]]*)?\]\]$/, "$1");
 }
 //#endregion
+//#region src/core/tree.ts
+/**
+* Lay a space out as a tree over its hierarchy.
+*
+* Roots are root-type nodes with no hierarchy parent. Traversal is depth-first in space order,
+* so a node's primary occurrence is under the parent reached first. Under its other parents a
+* node is either repeated without its subtree (`repeat`), or left out and linked by a cross-edge
+* (`cross-edge`). Either way traversal stops there, which also keeps cycles from recursing.
+*/
+function buildTree(graph, regionId, dag = "repeat") {
+	const { hierarchy } = graph;
+	const levelTypes = new Set(hierarchy?.levels.map((level) => level.type));
+	const rootType = hierarchy?.levels[0]?.type;
+	const primary = /* @__PURE__ */ new Map();
+	const pendingCross = [];
+	const hierarchyParents = (title) => parentEdges(graph, title).filter((edge) => isHierarchyEdge(edge, hierarchy));
+	const visit = (node, path) => {
+		const nodePath = [...path, node.id];
+		const key = occurrenceKey(regionId, nodePath);
+		primary.set(node.id, key);
+		const childTitles = new Set(childEdges(graph, node.id).filter((edge) => isHierarchyEdge(edge, hierarchy)).map((edge) => edge.child));
+		const children = [];
+		for (const title of childTitles) {
+			const child = graph.nodes.get(title);
+			const repeatOf = primary.get(title);
+			if (repeatOf === void 0) children.push(visit(child, nodePath));
+			else if (dag === "repeat") children.push({
+				key: occurrenceKey(regionId, [...nodePath, title]),
+				node: child,
+				children: [],
+				repeatOf
+			});
+			else pendingCross.push({
+				from: key,
+				child: title
+			});
+		}
+		return {
+			key,
+			node,
+			children
+		};
+	};
+	const levelNodes = [...graph.nodes.values()].filter((node) => levelTypes.has(node.resolvedType));
+	const unparented = levelNodes.filter((node) => hierarchyParents(node.id).length === 0);
+	const roots = unparented.filter((node) => node.resolvedType === rootType).map((node) => visit(node, []));
+	const orphans = unparented.filter((node) => node.resolvedType !== rootType).map((node) => visit(node, []));
+	for (const node of levelNodes) if (!primary.has(node.id)) orphans.push(visit(node, []));
+	return {
+		roots,
+		orphans,
+		primary,
+		crossLinks: pendingCross.map(({ from, child }) => ({
+			from,
+			to: primary.get(child),
+			kind: "cross"
+		}))
+	};
+}
+/** Parent → child pairs of occurrence keys: one per rendered parent-child link, then cross-links. */
+function treeLinks(tree) {
+	const links = [];
+	const walk = (occurrence) => {
+		for (const child of occurrence.children) {
+			links.push({
+				from: occurrence.key,
+				to: child.key,
+				kind: "tree"
+			});
+			walk(child);
+		}
+	};
+	for (const root of [...tree.roots, ...tree.orphans]) walk(root);
+	return [...links, ...tree.crossLinks];
+}
+//#endregion
 //#region src/layouts/EdgeOverlay.tsx
 /**
 * SVG layer drawing connectors between rendered occurrences.
@@ -655,6 +658,89 @@ function Branches({ orientation, nested = false, children }) {
 	});
 }
 //#endregion
+//#region src/core/xy.ts
+/**
+* Position nodes by two numeric fields. Every node of a plotted type appears once: on the plot
+* when both its values are numbers inside the axes' domains, otherwise in `unplaced` with the
+* reason. Positions are normalised; layouts decide the plot's size.
+*/
+function buildXYPlot(graph, regionId, layout) {
+	const { x, y } = layout;
+	const nodes = [...graph.nodes.values()];
+	const types = new Set(layout.types.length > 0 ? layout.types : nodes.filter((n) => isNumber(n.schemaData[x.field]) || isNumber(n.schemaData[y.field])).map((n) => n.resolvedType));
+	const plotted = nodes.filter((n) => types.has(n.resolvedType));
+	const domains = {
+		x: domainOf(x, plotted),
+		y: domainOf(y, plotted)
+	};
+	const points = [];
+	const unplaced = [];
+	for (const node of plotted) {
+		const key = occurrenceKey(regionId, [node.id]);
+		const px = position(node, x, domains.x);
+		const py = position(node, y, domains.y);
+		if (typeof px === "number" && typeof py === "number") points.push({
+			key,
+			node,
+			x: px,
+			y: py
+		});
+		else unplaced.push({
+			key,
+			node,
+			reasons: [px, py].filter((r) => typeof r === "string")
+		});
+	}
+	const keys = new Map(points.map((p) => [p.node.id, p.key]));
+	const fields = new Set(layout.edgeFields);
+	const links = edgesWithin(graph).filter((e) => keys.has(e.parent) && keys.has(e.child) && (fields.size === 0 || fields.has(e.field))).map((e) => ({
+		from: keys.get(e.parent),
+		to: keys.get(e.child),
+		field: e.field,
+		hierarchy: isHierarchyEdge(e, graph.hierarchy),
+		lane: 0
+	}));
+	assignLanes(links);
+	return {
+		points,
+		unplaced,
+		links,
+		domains
+	};
+}
+function isNumber(value) {
+	return typeof value === "number" && Number.isFinite(value);
+}
+/** The axis's fixed domain, or the range of plotted values (widened when they're all equal). */
+function domainOf(axis, nodes) {
+	if (Array.isArray(axis.domain)) return [axis.domain[0], axis.domain[1]];
+	const values = nodes.map((n) => n.schemaData[axis.field]).filter(isNumber);
+	if (values.length === 0) return [0, 1];
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	return min === max ? [min - 1, max + 1] : [min, max];
+}
+/** The node's normalised position on the axis, or why it has none. */
+function position(node, axis, [min, max]) {
+	const value = node.schemaData[axis.field];
+	if (value === void 0 || value === null) return `no ${axis.field}`;
+	if (!isNumber(value)) return `${axis.field} is not a number`;
+	if (value < min || value > max) return `${axis.field} ${value} is outside ${min}–${max}`;
+	const t = (value - min) / (max - min);
+	return axis.direction === "descending" ? 1 - t : t;
+}
+/** Spread links joining the same pair of nodes (in either direction) into lanes around 0. */
+function assignLanes(links) {
+	const byPair = /* @__PURE__ */ new Map();
+	for (const link of links) {
+		const pair = [link.from, link.to].sort().join("\n");
+		byPair.set(pair, [...byPair.get(pair) ?? [], link]);
+	}
+	for (const group of byPair.values()) group.forEach((link, i) => {
+		link.lane = i - (group.length - 1) / 2;
+	});
+}
+//#endregion
 //#region src/layouts/XYLayout.tsx
 /**
 * Nodes positioned by two numeric fields, with straight connectors between them. Positions are
@@ -782,16 +868,27 @@ function format(value) {
 }
 //#endregion
 //#region src/layouts/MapView.tsx
+var EMPTY = /* @__PURE__ */ new Map();
 /** Renders a map view definition against a space. Sizes to its container and scrolls within it. */
-function MapView({ definition, graph, values, onNodeSelect }) {
+function MapView({ definition, graph, values, annotations, onNodeSelect }) {
 	const instanceId = useId();
 	const region = useMemo(() => resolveRegions(definition, values), [definition, values])[0];
-	return /* @__PURE__ */ jsx("div", {
-		className: "mv:h-full mv:w-full mv:overflow-auto mv:bg-surface mv:text-ink",
-		children: layoutFor(region, {
-			graph,
-			instanceId,
-			onNodeSelect
+	const props = {
+		graph,
+		instanceId,
+		onNodeSelect
+	};
+	const { validation, validationSources } = region.nodes;
+	const visibleAnnotations = useMemo(() => annotations ? filterAnnotations(annotations, validation, validationSources) : EMPTY, [
+		annotations,
+		validation,
+		validationSources
+	]);
+	return /* @__PURE__ */ jsx(AnnotationsContext.Provider, {
+		value: visibleAnnotations,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "mv:h-full mv:w-full mv:overflow-auto mv:bg-surface mv:text-ink",
+			children: layoutFor(region, props)
 		})
 	});
 }
@@ -822,68 +919,127 @@ function layoutFor(region, props) {
 	}
 }
 //#endregion
+//#region src/layouts/ParameterInputs.tsx
+var same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+/** A checkbox for a boolean parameter, labelled with the parameter's title. */
+function ToggleParameterInput({ parameter, value, onChange }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		id,
+		type: "checkbox",
+		checked: value === true,
+		onChange: (e) => onChange(e.target.checked)
+	}), /* @__PURE__ */ jsx("label", {
+		htmlFor: id,
+		children: parameter.title
+	})] });
+}
+/** A dropdown for a parameter with one of several options. */
+function SelectParameterInput({ parameter, value, onChange }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("label", {
+		htmlFor: id,
+		className: "mv:text-muted",
+		children: parameter.title
+	}), /* @__PURE__ */ jsx("select", {
+		id,
+		value: JSON.stringify(value),
+		onChange: (e) => onChange(JSON.parse(e.target.value)),
+		children: parameter.control.options.map((option) => /* @__PURE__ */ jsx("option", {
+			value: JSON.stringify(option),
+			children: String(option)
+		}, JSON.stringify(option)))
+	})] });
+}
+/** A checkbox group for a parameter taking any subset of its options. */
+function MultiSelectParameterInput({ parameter, value, onChange }) {
+	const { options } = parameter.control;
+	const selected = Array.isArray(value) ? value : [];
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: "mv:m-0 mv:flex mv:flex-wrap mv:items-center mv:gap-2 mv:border-0 mv:p-0",
+		children: [/* @__PURE__ */ jsx("legend", {
+			className: "mv:float-left mv:mr-1.5 mv:p-0 mv:text-muted",
+			children: parameter.title
+		}), options.map((option) => {
+			const checked = selected.some((v) => same(v, option));
+			return /* @__PURE__ */ jsxs("label", {
+				className: "mv:flex mv:items-center mv:gap-1",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked,
+					onChange: () => onChange(options.filter((o) => o === option ? !checked : selected.some((v) => same(v, o))))
+				}), String(option)]
+			}, JSON.stringify(option));
+		})]
+	});
+}
+/** The input matching a parameter's control kind. */
+function ParameterInput({ parameter, value, onChange }) {
+	const { control } = parameter;
+	switch (control.kind) {
+		case "toggle": return /* @__PURE__ */ jsx(ToggleParameterInput, {
+			parameter: {
+				...parameter,
+				control
+			},
+			value,
+			onChange
+		});
+		case "select": return /* @__PURE__ */ jsx(SelectParameterInput, {
+			parameter: {
+				...parameter,
+				control
+			},
+			value,
+			onChange
+		});
+		case "multiselect": return /* @__PURE__ */ jsx(MultiSelectParameterInput, {
+			parameter: {
+				...parameter,
+				control
+			},
+			value,
+			onChange
+		});
+	}
+}
+//#endregion
+//#region src/layouts/useParameterControls.ts
+/**
+* The state behind a map view's parameter controls, with no markup, for hosts that lay the controls
+* out themselves. Pair each entry with `ParameterInput`, or with one of the typed inputs.
+*/
+function useParameterControls(definition, values, onChange) {
+	const resolved = useMemo(() => resolveParameterValues(definition, values), [definition, values]);
+	return definition.parameters.map((parameter) => ({
+		parameter,
+		value: resolved[parameter.name],
+		setValue: (value) => onChange(parameter.name, value)
+	}));
+}
+//#endregion
 //#region src/layouts/ParameterControls.tsx
 /**
-* Controls generated from a map view's declared parameters. Hosts own the values (session
-* state) and decide where the controls go.
+* Default layout for a map view's parameter controls: a wrapping row. Hosts wanting their own layout
+* use `useParameterControls` with `ParameterInput` (or the typed inputs) instead.
 */
 function ParameterControls({ definition, values, onChange }) {
-	const id = useId();
-	const resolved = useMemo(() => resolveParameterValues(definition, values), [definition, values]);
-	const { parameters } = definition;
-	if (parameters.length === 0) return null;
+	const controls = useParameterControls(definition, values, onChange);
+	if (controls.length === 0) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: "mv:flex mv:flex-wrap mv:items-center mv:gap-x-4 mv:gap-y-2 mv:text-sm",
-		children: parameters.map((param) => {
-			const value = resolved[param.name];
-			const controlId = `${id}-${param.name}`;
-			const { control } = param;
-			return /* @__PURE__ */ jsx("div", {
-				className: "mv:flex mv:items-center mv:gap-1.5",
-				title: param.description,
-				children: control.kind === "toggle" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
-					id: controlId,
-					type: "checkbox",
-					checked: value === true,
-					onChange: (e) => onChange(param.name, e.target.checked)
-				}), /* @__PURE__ */ jsx("label", {
-					htmlFor: controlId,
-					children: param.title
-				})] }) : control.kind === "select" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("label", {
-					htmlFor: controlId,
-					className: "mv:text-muted",
-					children: param.title
-				}), /* @__PURE__ */ jsx("select", {
-					id: controlId,
-					value: JSON.stringify(value),
-					onChange: (e) => onChange(param.name, JSON.parse(e.target.value)),
-					children: control.options.map((option) => /* @__PURE__ */ jsx("option", {
-						value: JSON.stringify(option),
-						children: String(option)
-					}, JSON.stringify(option)))
-				})] }) : /* @__PURE__ */ jsxs("fieldset", {
-					className: "mv:m-0 mv:flex mv:flex-wrap mv:items-center mv:gap-2 mv:border-0 mv:p-0",
-					children: [/* @__PURE__ */ jsx("legend", {
-						className: "mv:float-left mv:mr-1.5 mv:p-0 mv:text-muted",
-						children: param.title
-					}), control.options.map((option) => {
-						const selected = Array.isArray(value) ? value : [];
-						const checked = selected.some((v) => JSON.stringify(v) === JSON.stringify(option));
-						return /* @__PURE__ */ jsxs("label", {
-							className: "mv:flex mv:items-center mv:gap-1",
-							children: [/* @__PURE__ */ jsx("input", {
-								type: "checkbox",
-								checked,
-								onChange: () => onChange(param.name, control.options.filter((o) => o === option ? !checked : selected.some((v) => JSON.stringify(v) === JSON.stringify(o))))
-							}), String(option)]
-						}, JSON.stringify(option));
-					})]
-				})
-			}, param.name);
-		})
+		children: controls.map(({ parameter, value, setValue }) => /* @__PURE__ */ jsx("div", {
+			className: "mv:flex mv:items-center mv:gap-1.5",
+			title: parameter.description,
+			children: /* @__PURE__ */ jsx(ParameterInput, {
+				parameter,
+				value,
+				onChange: setValue
+			})
+		}, parameter.name))
 	});
 }
 //#endregion
-export { MAP_VIEW_SCHEMAS, MapView, MapViewDefinitionError, ParameterControls, mapViewsForSchema, parseMapViewDefinition, resolveParameterValues, selectionFilter };
+export { MAP_VIEW_SCHEMAS, MapView, MapViewDefinitionError, MultiSelectParameterInput, ParameterControls, ParameterInput, SelectParameterInput, ToggleParameterInput, annotationsFrom, mapViewsForSchema, parseMapViewDefinition, resolveParameterValues, selectionFilter, useParameterControls, viewValidationLevel, worstSeverity };
 
 //# sourceMappingURL=index.js.map