structured-context-map-views 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,889 @@
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/core/graph.ts
+var NONE = [];
+/**
+* Edges to a node's parents, in the order the node declares them. A graph narrowed by a filter keeps
+* edges to parents outside it; those are left out.
+*/
+function parentEdges(graph, id) {
+	return (graph.parentEdges.get(id) ?? NONE).filter((edge) => graph.nodes.has(edge.parent));
+}
+/** Edges to a node's children, in graph order of the children. */
+function childEdges(graph, id) {
+	return graph.childEdges.get(id) ?? NONE;
+}
+/** Every edge whose parent and child are both in the graph. */
+function edgesWithin(graph) {
+	return [...graph.nodes.keys()].flatMap((id) => parentEdges(graph, id));
+}
+/** Whether an edge belongs to the given hierarchy (as opposed to a relationship or another hierarchy). */
+function isHierarchyEdge(edge, hierarchy) {
+	return hierarchy !== void 0 && edge.kind === "hierarchy" && edge.hierarchy === hierarchy.name;
+}
+//#endregion
+//#region src/core/occurrence.ts
+/**
+* Path-based key for one occurrence of a node: region, then the steps from the outermost
+* container down to the node. Unique within a map view even when a node appears several times.
+* Hosts can render several map views at once, so layouts scope keys to the map view instance.
+*/
+function occurrenceKey(regionId, path) {
+	return JSON.stringify([regionId, ...path]);
+}
+//#endregion
+//#region src/core/landscape.ts
+/**
+* Lay a space out as nested containers following the layout's grouping levels.
+*
+* Adjacent node levels are joined by any edge between their types, in either direction, or only
+* edges from `edge.field`. A `via` chain joins them through the skipped types. A field level
+* splits the next node level by that field's values. A node reached from several containers
+* appears in each, in full: the levels are finite, so repeating contents can't recurse.
+*/
+function buildLandscape(graph, regionId, layout) {
+	const levels = layout.group;
+	const order = new Map([...graph.nodes.keys()].map((title, i) => [title, i]));
+	const first = /* @__PURE__ */ new Map();
+	const occurrenceFor = (candidate, levelIdx, path) => {
+		const { node } = candidate;
+		const nodePath = [...path, node.id];
+		const key = occurrenceKey(regionId, nodePath);
+		const repeatOf = first.get(node.id);
+		if (repeatOf === void 0) first.set(node.id, key);
+		return {
+			key,
+			level: levelIdx,
+			item: {
+				kind: "node",
+				node
+			},
+			via: candidate.via,
+			...repeatOf !== void 0 && { repeatOf },
+			children: place(levelIdx + 1, node, [], nodePath)
+		};
+	};
+	/** Occurrences for level `levelIdx` inside `anchor`, the nearest enclosing node. */
+	const place = (levelIdx, anchor, filters, path) => {
+		const level = levels[levelIdx];
+		if (level === void 0) return [];
+		if (isTypeLevel(level)) return candidates(level, anchor, filters).map((c) => occurrenceFor(c, levelIdx, path));
+		const nodeLevel = levels.slice(levelIdx).find(isTypeLevel);
+		return distinctValues(candidates(nodeLevel, anchor, filters).map((c) => c.node), level.field).map((value) => {
+			const valuePath = [...path, [level.field, value]];
+			return {
+				key: occurrenceKey(regionId, valuePath),
+				level: levelIdx,
+				item: {
+					kind: "value",
+					field: level.field,
+					value
+				},
+				via: [],
+				children: place(levelIdx + 1, anchor, [...filters, {
+					field: level.field,
+					value
+				}], valuePath)
+			};
+		});
+	};
+	/** Nodes of a type level joined to `anchor` (all of the type at the top) and matching the filters. */
+	const candidates = (level, anchor, filters) => {
+		return (anchor === void 0 ? ofType(level.type).map((node) => ({
+			node,
+			via: []
+		})) : walkChain(anchor, level.via ?? [], level.type, level.edge?.field)).filter(({ node }) => filters.every((f) => hasValue(node, f)));
+	};
+	const ofType = (type) => [...graph.nodes.values()].filter((node) => node.resolvedType === type);
+	/** Neighbours of a node with the given type, across edges in either direction, in space order. */
+	const neighbours = (title, type, field) => {
+		return [.../* @__PURE__ */ new Set([...childEdges(graph, title).filter((e) => field === void 0 || e.field === field).map((e) => e.child), ...parentEdges(graph, title).filter((e) => field === void 0 || e.field === field).map((e) => e.parent)])].map((t) => graph.nodes.get(t)).filter((node) => node.resolvedType === type).sort((a, b) => order.get(a.id) - order.get(b.id));
+	};
+	/**
+	* Follow edges from `anchor` through each `via` type to `target`, keeping the skipped nodes on
+	* the way to each target node. Several chains to one target merge into one candidate.
+	*/
+	const walkChain = (anchor, via, target, field) => {
+		let frontier = [{
+			node: anchor,
+			trail: []
+		}];
+		for (const type of via) frontier = frontier.flatMap(({ node, trail }) => neighbours(node.id, type, void 0).map((next) => ({
+			node: next,
+			trail: [...trail, next]
+		})));
+		const byTitle = /* @__PURE__ */ new Map();
+		for (const { node, trail } of frontier) for (const next of neighbours(node.id, target, field)) {
+			const candidate = byTitle.get(next.id) ?? {
+				node: next,
+				via: via.map((type) => ({
+					type,
+					nodes: []
+				}))
+			};
+			trail.forEach((skipped, i) => {
+				const step = candidate.via[i];
+				if (!step.nodes.includes(skipped)) step.nodes.push(skipped);
+			});
+			byTitle.set(next.id, candidate);
+		}
+		return [...byTitle.values()].sort((a, b) => order.get(a.node.id) - order.get(b.node.id));
+	};
+	const groups = place(0, void 0, [], []);
+	const ungrouped = [];
+	levels.forEach((level, levelIdx) => {
+		if (levelIdx === 0 || !isTypeLevel(level)) return;
+		for (const node of ofType(level.type)) if (!first.has(node.id)) ungrouped.push(occurrenceFor({
+			node,
+			via: []
+		}, levelIdx, [null]));
+	});
+	return {
+		groups,
+		ungrouped
+	};
+}
+function isTypeLevel(level) {
+	return "type" in level;
+}
+/** A field's values as group labels: strings, an entry per array item, `null` when empty. */
+function valuesOf(node, field) {
+	const raw = node.schemaData[field];
+	const list = (Array.isArray(raw) ? raw : [raw]).filter((v) => v !== void 0 && v !== null && v !== "");
+	return list.length === 0 ? [null] : list.map((v) => typeof v === "object" ? JSON.stringify(v) : String(v));
+}
+/** Distinct values in first-seen order, with the empty group last. */
+function distinctValues(nodes, field) {
+	const values = new Set(nodes.flatMap((node) => valuesOf(node, field)));
+	const present = [...values].filter((v) => v !== null);
+	return values.has(null) ? [...present, null] : present;
+}
+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
+* tooltip. Deliberately a `div` with button semantics rather than a `<button>`: hosts style
+* native form controls globally (Obsidian fixes button height and disables wrapping).
+*/
+function NodeCard({ node, repeat, nodes, onSelect }) {
+	const select = () => onSelect?.(node);
+	const label = `${node.resolvedType}: ${node.title}${repeat ? " (shown in full elsewhere)" : ""}`;
+	const onKeyDown = (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			select();
+		}
+	};
+	const border = repeat ? "mv:border-dashed mv:border-muted/60 mv:opacity-75" : "mv:border-edge";
+	if (nodes.style === "shape") return /* @__PURE__ */ jsx("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", {
+			"aria-hidden": "true",
+			children: node.resolvedType.charAt(0)
+		})
+	});
+	const fields = nodes.fields.map((field) => [field, formatValue(node.schemaData[field])]).filter(([, value]) => value !== void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "button",
+		tabIndex: 0,
+		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}`,
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "mv:block mv:text-[0.65rem] mv:uppercase mv:tracking-wide mv:text-muted",
+				children: [node.resolvedType, repeat && " · repeat"]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "mv:block mv:text-sm mv:leading-snug",
+				children: node.title
+			}),
+			fields.length > 0 && /* @__PURE__ */ jsx("dl", {
+				className: "mv:m-0 mv:mt-1 mv:text-xs mv:text-muted",
+				children: fields.map(([field, value]) => /* @__PURE__ */ jsxs("div", {
+					className: "mv:flex mv:gap-1",
+					children: [/* @__PURE__ */ jsxs("dt", {
+						className: "mv:shrink-0",
+						children: [field, ":"]
+					}), /* @__PURE__ */ jsx("dd", {
+						className: "mv:m-0 mv:truncate mv:text-ink",
+						children: value
+					})]
+				}, field))
+			})
+		]
+	});
+}
+function formatValue(value) {
+	if (value === void 0 || value === null || value === "") return void 0;
+	if (Array.isArray(value)) return value.map(String).join(", ");
+	if (typeof value === "object") return JSON.stringify(value);
+	return String(value);
+}
+//#endregion
+//#region src/layouts/LandscapeLayout.tsx
+/**
+* Nested containers following the layout's grouping levels; the last level is drawn as nodes.
+* Flexbox does the nesting and wrapping. Containment shows the grouping edges, so no connectors
+* are drawn. PROTOTYPE: `edges.show` has no effect here; other edges aren't drawn yet.
+*/
+function LandscapeLayout({ graph, region, instanceId, onNodeSelect }) {
+	const { layout } = region;
+	const landscape = useMemo(() => buildLandscape(graph, region.id, layout), [
+		graph,
+		region.id,
+		layout
+	]);
+	const last = layout.group.length - 1;
+	const breadcrumb = (occurrence) => {
+		const level = layout.group[occurrence.level];
+		if (!level || !("type" in level) || level.intermediate !== "breadcrumb") return null;
+		const steps = occurrence.via.filter((step) => step.nodes.length > 0);
+		if (steps.length === 0) return null;
+		return /* @__PURE__ */ jsxs("span", {
+			className: "mv:block mv:max-w-44 mv:text-[0.65rem] mv:leading-tight mv:text-muted",
+			children: ["via ", steps.map((step) => step.nodes.map((n) => n.title).join(", ")).join(" › ")]
+		});
+	};
+	const render = (occurrence, direction) => {
+		const repeat = occurrence.repeatOf !== void 0;
+		const marker = { "data-occurrence": `${instanceId}${occurrence.key}` };
+		if (occurrence.item.kind === "node" && occurrence.level === last) return /* @__PURE__ */ jsxs("li", {
+			...marker,
+			className: "mv:flex mv:flex-col mv:gap-0.5",
+			children: [/* @__PURE__ */ jsx(NodeCard, {
+				node: occurrence.item.node,
+				repeat,
+				nodes: region.nodes,
+				onSelect: onNodeSelect
+			}), breadcrumb(occurrence)]
+		}, occurrence.key);
+		const inner = direction === "horizontal" ? "vertical" : "horizontal";
+		const holdsNodes = occurrence.level + 1 === last;
+		return /* @__PURE__ */ jsxs("li", {
+			...marker,
+			className: `mv:flex mv:flex-col mv:gap-2 mv:rounded-lg mv:border mv:bg-surface mv:p-2 ${repeat ? "mv:border-dashed mv:border-muted/60" : "mv:border-edge"}`,
+			children: [occurrence.item.kind === "node" ? /* @__PURE__ */ jsx(ContainerHeading, {
+				node: occurrence.item.node,
+				repeat,
+				onSelect: onNodeSelect,
+				children: breadcrumb(occurrence)
+			}) : /* @__PURE__ */ jsxs("span", {
+				className: "mv:text-xs mv:font-semibold mv:text-muted",
+				children: [
+					occurrence.item.field,
+					": ",
+					occurrence.item.value === null ? "(none)" : displayValue(occurrence.item.value)
+				]
+			}), /* @__PURE__ */ jsx(Items, {
+				direction: holdsNodes ? "wrap" : inner,
+				children: occurrence.children.map((child) => render(child, inner))
+			})]
+		}, occurrence.key);
+	};
+	const top = layout.orientation;
+	return /* @__PURE__ */ jsx("div", {
+		className: "mv:w-max mv:min-w-full mv:p-4",
+		children: /* @__PURE__ */ jsxs(Items, {
+			direction: last === 0 ? "wrap" : top,
+			children: [landscape.groups.map((group) => render(group, top)), landscape.ungrouped.length > 0 && /* @__PURE__ */ jsxs("li", {
+				className: "mv:flex mv:flex-col mv:gap-2 mv:rounded-lg mv:border mv:border-dashed mv:border-edge mv:p-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "mv:text-xs mv:font-semibold mv:text-muted",
+					children: "Ungrouped"
+				}), /* @__PURE__ */ jsx(Items, {
+					direction: "wrap",
+					children: landscape.ungrouped.map((o) => render(o, top))
+				})]
+			})]
+		})
+	});
+}
+function Items({ direction, children }) {
+	const layout = {
+		horizontal: "mv:flex-row mv:items-start mv:gap-3",
+		vertical: "mv:flex-col mv:items-stretch mv:gap-2",
+		wrap: "mv:max-w-[36rem] mv:flex-row mv:flex-wrap mv:items-start mv:gap-2"
+	}[direction];
+	return /* @__PURE__ */ jsx("ul", {
+		className: `mv:m-0 mv:flex mv:list-none mv:p-0 ${layout}`,
+		children
+	});
+}
+/** A container's node: type and title, selectable like a card. */
+function ContainerHeading({ node, repeat, onSelect, children }) {
+	const select = () => onSelect?.(node);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "button",
+		tabIndex: 0,
+		title: `${node.resolvedType}: ${node.title}${repeat ? " (also shown elsewhere)" : ""}`,
+		onClick: select,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				select();
+			}
+		},
+		className: "mv:cursor-pointer mv:rounded mv:px-1 mv:hover:text-accent mv:focus-visible:outline-2 mv:focus-visible:outline-accent",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "mv:block mv:text-[0.65rem] mv:uppercase mv:tracking-wide mv:text-muted",
+				children: [node.resolvedType, repeat && " · repeat"]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "mv:block mv:text-sm mv:font-semibold mv:leading-snug",
+				children: node.title
+			}),
+			children
+		]
+	});
+}
+/** Field values that are wikilinks show as the linked title. */
+function displayValue(value) {
+	return value.replace(/^\[\[([^\]|]+)(\|[^\]]*)?\]\]$/, "$1");
+}
+//#endregion
+//#region src/layouts/EdgeOverlay.tsx
+/**
+* SVG layer drawing connectors between rendered occurrences.
+*
+* Measures occurrence elements after layout and redraws when the container or any occurrence
+* resizes, so it follows embedded panes that resize independently of the window, and reflows
+* such as late font loads. The SVG fills the container instead of being sized from it, so it
+* never holds the container open after the layout shrinks.
+*/
+function EdgeOverlay({ links, elements, container, routing }) {
+	const [paths, setPaths] = useState([]);
+	useLayoutEffect(() => {
+		if (!container) return;
+		const measure = () => {
+			const origin = container.getBoundingClientRect();
+			const paths = [];
+			for (const { from, to, kind, id, lane = 0 } of links) {
+				const a = elements.get(from)?.getBoundingClientRect();
+				const b = elements.get(to)?.getBoundingClientRect();
+				if (!a || !b) continue;
+				paths.push({
+					key: `${from}→${to}${id ?? ""}`,
+					d: routing === "straight" ? line(a, b, origin, lane) : connector(a, b, origin, routing),
+					cross: kind === "cross"
+				});
+			}
+			setPaths(paths);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(container);
+		for (const element of elements.values()) observer.observe(element);
+		return () => observer.disconnect();
+	}, [
+		links,
+		elements,
+		container,
+		routing
+	]);
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		className: "mv:pointer-events-none mv:absolute mv:inset-0 mv:h-full mv:w-full mv:overflow-visible",
+		children: paths.map(({ key, d, cross }) => /* @__PURE__ */ jsx("path", {
+			d,
+			className: `mv:fill-none ${cross ? "mv:stroke-accent/60" : "mv:stroke-muted/50"}`,
+			strokeWidth: 1.5,
+			strokeDasharray: cross ? "4 3" : void 0
+		}, key))
+	});
+}
+/** Cubic curve from the parent's trailing edge to the child's leading edge. */
+function connector(a, b, origin, orientation) {
+	if (orientation === "vertical") {
+		const x1 = a.left + a.width / 2 - origin.left;
+		const y1 = a.bottom - origin.top;
+		const x2 = b.left + b.width / 2 - origin.left;
+		const y2 = b.top - origin.top;
+		const my = (y1 + y2) / 2;
+		return `M${x1},${y1} C${x1},${my} ${x2},${my} ${x2},${y2}`;
+	}
+	const x1 = a.right - origin.left;
+	const y1 = a.top + a.height / 2 - origin.top;
+	const x2 = b.left - origin.left;
+	const y2 = b.top + b.height / 2 - origin.top;
+	const mx = (x1 + x2) / 2;
+	return `M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}`;
+}
+/** Pixels between parallel straight links. */
+var LANE_GAP = 6;
+/**
+* Straight line between centres, shifted sideways by its lane; the layout draws nodes over the
+* overlay to hide the ends. The shift is relative to a fixed orientation of the pair, so links in
+* opposite directions between the same nodes still separate.
+*/
+function line(a, b, origin, lane) {
+	const x1 = a.left + a.width / 2 - origin.left;
+	const y1 = a.top + a.height / 2 - origin.top;
+	const x2 = b.left + b.width / 2 - origin.left;
+	const y2 = b.top + b.height / 2 - origin.top;
+	const flip = x1 < x2 || x1 === x2 && y1 < y2 ? 1 : -1;
+	const length = Math.hypot(x2 - x1, y2 - y1) || 1;
+	const dx = -(y2 - y1) / length * lane * LANE_GAP * flip;
+	const dy = (x2 - x1) / length * lane * LANE_GAP * flip;
+	return `M${x1 + dx},${y1 + dy} L${x2 + dx},${y2 + dy}`;
+}
+//#endregion
+//#region src/layouts/TreeLayout.tsx
+/**
+* Tree over the schema's hierarchy. Flexbox does the branching; the SVG overlay draws connectors.
+*/
+function TreeLayout({ graph, region, instanceId, onNodeSelect }) {
+	const { orientation, dag } = region.layout;
+	const tree = useMemo(() => buildTree(graph, region.id, dag), [
+		graph,
+		region.id,
+		dag
+	]);
+	const links = useMemo(() => region.edges.show ? treeLinks(tree) : [], [tree, region.edges.show]);
+	const [container, setContainer] = useState(null);
+	const elements = useRef(/* @__PURE__ */ new Map()).current;
+	const register = useCallback((key) => (el) => {
+		if (el) elements.set(key, el);
+		else elements.delete(key);
+	}, [elements]);
+	const branch = (occurrence) => /* @__PURE__ */ jsxs("li", {
+		className: `mv:flex mv:items-center ${orientation === "vertical" ? "mv:flex-col" : "mv:flex-row"}`,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: register(occurrence.key),
+			"data-occurrence": `${instanceId}${occurrence.key}`,
+			children: /* @__PURE__ */ jsx(NodeCard, {
+				node: occurrence.node,
+				repeat: occurrence.repeatOf !== void 0,
+				nodes: region.nodes,
+				onSelect: onNodeSelect
+			})
+		}), occurrence.children.length > 0 && /* @__PURE__ */ jsx(Branches, {
+			orientation,
+			nested: true,
+			children: occurrence.children.map(branch)
+		})]
+	}, occurrence.key);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setContainer,
+		className: "mv:relative mv:w-max mv:min-w-full mv:p-4",
+		children: [/* @__PURE__ */ jsx(Branches, {
+			orientation,
+			children: [...tree.roots, ...tree.orphans].map(branch)
+		}), /* @__PURE__ */ jsx(EdgeOverlay, {
+			links,
+			elements,
+			container,
+			routing: orientation
+		})]
+	});
+}
+function Branches({ orientation, nested = false, children }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: `mv:m-0 mv:flex mv:list-none mv:p-0 ${orientation === "vertical" ? `mv:flex-row mv:items-start mv:justify-center mv:gap-3 ${nested ? "mv:pt-10" : ""}` : `mv:flex-col mv:items-start mv:justify-center mv:gap-2 ${nested ? "mv:pl-14" : ""}`}`,
+		children
+	});
+}
+//#endregion
+//#region src/layouts/XYLayout.tsx
+/**
+* Nodes positioned by two numeric fields, with straight connectors between them. Positions are
+* percentages of the plot area, which fills the container (scrolling below a minimum size). Nodes that can't be
+* placed are listed under the plot with the reason.
+* PROTOTYPE: labels may overlap where nodes sit close together; no collision handling.
+*/
+function XYLayout({ graph, region, instanceId, onNodeSelect }) {
+	const { layout } = region;
+	const plot = useMemo(() => buildXYPlot(graph, region.id, layout), [
+		graph,
+		region.id,
+		layout
+	]);
+	const links = useMemo(() => region.edges.show ? plot.links.map(({ from, to, field, hierarchy, lane }) => ({
+		from,
+		to,
+		id: field,
+		lane,
+		kind: hierarchy ? "tree" : "cross"
+	})) : [], [plot, region.edges.show]);
+	const shape = region.nodes.style === "shape";
+	const [container, setContainer] = useState(null);
+	const elements = useRef(/* @__PURE__ */ new Map()).current;
+	const register = useCallback((key) => (el) => {
+		if (el) elements.set(key, el);
+		else elements.delete(key);
+	}, [elements]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mv:box-border mv:flex mv:h-full mv:min-h-[28rem] mv:min-w-[36rem] mv:flex-col mv:gap-4 mv:p-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mv:grid mv:min-h-0 mv:flex-1 mv:grid-cols-[auto_1fr] mv:grid-rows-[1fr_auto] mv:gap-1",
+			children: [
+				/* @__PURE__ */ jsx(AxisTitle, {
+					axis: layout.y,
+					domain: plot.domains.y,
+					vertical: true
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					ref: setContainer,
+					className: "mv:relative mv:border-b mv:border-l mv:border-edge",
+					children: [/* @__PURE__ */ jsx(EdgeOverlay, {
+						links,
+						elements,
+						container,
+						routing: "straight"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "mv:absolute mv:inset-8",
+						children: plot.points.map((point) => /* @__PURE__ */ jsxs("div", {
+							"data-occurrence": `${instanceId}${point.key}`,
+							className: `mv:absolute mv:flex mv:items-center mv:gap-1 ${shape ? "mv:-translate-x-3 mv:translate-y-3" : "mv:-translate-x-1/2 mv:translate-y-1/2"}`,
+							style: {
+								left: `${point.x * 100}%`,
+								bottom: `${point.y * 100}%`
+							},
+							children: [/* @__PURE__ */ jsx("div", {
+								ref: register(point.key),
+								children: /* @__PURE__ */ jsx(NodeCard, {
+									node: point.node,
+									repeat: false,
+									nodes: region.nodes,
+									onSelect: onNodeSelect
+								})
+							}), shape && /* @__PURE__ */ jsx("span", {
+								className: "mv:whitespace-nowrap mv:rounded mv:bg-surface/80 mv:px-0.5 mv:text-xs",
+								children: point.node.title
+							})]
+						}, point.key))
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {}),
+				/* @__PURE__ */ jsx(AxisTitle, {
+					axis: layout.x,
+					domain: plot.domains.x
+				})
+			]
+		}), plot.unplaced.length > 0 && /* @__PURE__ */ jsxs("section", {
+			className: "mv:flex mv:flex-col mv:gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "mv:text-xs mv:font-semibold mv:text-muted",
+				children: "Not plotted"
+			}), /* @__PURE__ */ jsx("ul", {
+				className: "mv:m-0 mv:flex mv:list-none mv:flex-wrap mv:gap-3 mv:p-0",
+				children: plot.unplaced.map(({ key, node, reasons }) => /* @__PURE__ */ jsxs("li", {
+					"data-occurrence": `${instanceId}${key}`,
+					className: "mv:flex mv:items-center mv:gap-1",
+					children: [/* @__PURE__ */ jsx(NodeCard, {
+						node,
+						repeat: false,
+						nodes: region.nodes,
+						onSelect: onNodeSelect
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "mv:text-xs",
+						children: [shape && `${node.title} `, /* @__PURE__ */ jsxs("span", {
+							className: "mv:text-muted",
+							children: [
+								"(",
+								reasons.join("; "),
+								")"
+							]
+						})]
+					})]
+				}, key))
+			})]
+		})]
+	});
+}
+/** Axis title with the values at each end, in drawing order. */
+function AxisTitle({ axis, domain: [min, max], vertical = false }) {
+	const [start, end] = axis.direction === "descending" ? [max, min] : [min, max];
+	return /* @__PURE__ */ jsxs("div", {
+		className: `mv:flex mv:items-center mv:justify-between mv:gap-2 mv:text-xs mv:text-muted ${vertical ? "mv:flex-col-reverse mv:py-8" : "mv:px-8"}`,
+		children: [
+			/* @__PURE__ */ jsx("span", { children: format(start) }),
+			/* @__PURE__ */ jsx("span", {
+				className: `mv:font-semibold ${vertical ? "mv:[writing-mode:vertical-rl] mv:rotate-180" : ""}`,
+				children: axis.label ?? axis.field
+			}),
+			/* @__PURE__ */ jsx("span", { children: format(end) })
+		]
+	});
+}
+function format(value) {
+	return Number.isInteger(value) ? String(value) : value.toPrecision(3).replace(/\.?0+$/, "");
+}
+//#endregion
+//#region src/layouts/MapView.tsx
+/** Renders a map view definition against a space. Sizes to its container and scrolls within it. */
+function MapView({ definition, graph, values, 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
+		})
+	});
+}
+function layoutFor(region, props) {
+	const { layout } = region;
+	switch (layout.type) {
+		case "tree": return /* @__PURE__ */ jsx(TreeLayout, {
+			...props,
+			region: {
+				...region,
+				layout
+			}
+		});
+		case "landscape": return /* @__PURE__ */ jsx(LandscapeLayout, {
+			...props,
+			region: {
+				...region,
+				layout
+			}
+		});
+		case "xy": return /* @__PURE__ */ jsx(XYLayout, {
+			...props,
+			region: {
+				...region,
+				layout
+			}
+		});
+	}
+}
+//#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.
+*/
+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;
+	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);
+		})
+	});
+}
+//#endregion
+export { MAP_VIEW_SCHEMAS, MapView, MapViewDefinitionError, ParameterControls, mapViewsForSchema, parseMapViewDefinition, resolveParameterValues, selectionFilter };
+
+//# sourceMappingURL=index.js.map