unspaghettit 0.2.0 → 0.3.0

package/build/server/chunks/BehaviorGraph-m5kYj5HH.js

@@ -0,0 +1,757 @@
+import { W as onDestroy, t as escape_html, g as attr, h as attr_class, r as ensure_array_like, i as attr_style, q as derived } from './index-server-7H0jzj0M.js';
+import { w as flattenLeafConditions, E as isParamLeft } from './TagPalette-CtMNYCmu.js';
+
+//#region src/features/behavior-model/domain/services/BehaviorGraphModel.ts
+var ALL_BEHAVIOR_GRAPH_EDGE_KINDS = [
+	"contains",
+	"reads",
+	"writes",
+	"emits",
+	"transitions",
+	"asserts",
+	"uses",
+	"handles"
+];
+var ALL_BEHAVIOR_GRAPH_NODE_TYPES = [
+	"feature",
+	"surface",
+	"action",
+	"state",
+	"event",
+	"parameter",
+	"rule",
+	"effect",
+	"invariant",
+	"scenario",
+	"persona",
+	"resource",
+	"entity",
+	"valueSet"
+];
+var effectLabel = (effect) => {
+	switch (effect.type) {
+		case "set_state": return `set ${effect.path}`;
+		case "show_message": return effect.tone ? `${effect.tone} message` : "message";
+		case "emit_event": return `emit ${effect.event}`;
+		case "block_action": return "block";
+		case "allow_action": return "allow";
+		case "transition_surface": return "transition";
+	}
+};
+var leafStatePaths = (condition) => {
+	const paths = /* @__PURE__ */ new Set();
+	for (const leaf of flattenLeafConditions(condition)) if (!isParamLeft(leaf.left)) paths.add(String(leaf.left));
+	return [...paths];
+};
+var buildBehaviorGraph = (sourceFeatures, sourceProject) => {
+	const nodes = /* @__PURE__ */ new Map();
+	const edges = /* @__PURE__ */ new Map();
+	const addNode = (node) => {
+		if (!nodes.has(node.id)) nodes.set(node.id, node);
+	};
+	const addEdge = (edge) => {
+		if (!nodes.has(edge.from) || !nodes.has(edge.to)) return;
+		const id = `${edge.from}->${edge.to}:${edge.kind}:${edge.label ?? ""}`;
+		if (!edges.has(id)) edges.set(id, {
+			...edge,
+			id
+		});
+	};
+	const ensureState = (feature, path, detail) => {
+		addNode({
+			id: `feature:${feature.id}:state:${path}`,
+			type: "state",
+			label: path,
+			detail,
+			layer: 3
+		});
+	};
+	const surfaceIdFor = (feature, id) => `feature:${feature.id}:surface:${id}`;
+	const actionIdFor = (feature, id) => `feature:${feature.id}:action:${id}`;
+	const stateIdFor = (feature, path) => `feature:${feature.id}:state:${path}`;
+	const valueSetIdFor = (feature, id) => `feature:${feature.id}:valueSet:${id}`;
+	const addEffectLinks = (feature, ownerId, effect, relation) => {
+		const effectId = `feature:${feature.id}:effect:${effect.id}`;
+		addNode({
+			id: effectId,
+			type: "effect",
+			label: effectLabel(effect),
+			detail: effect.description ?? effect.type,
+			layer: 5
+		});
+		addEdge({
+			from: ownerId,
+			to: effectId,
+			kind: relation
+		});
+		if (effect.type === "set_state") {
+			ensureState(feature, String(effect.path));
+			addEdge({
+				from: effectId,
+				to: stateIdFor(feature, effect.path),
+				kind: "writes"
+			});
+		} else if (effect.type === "emit_event") {
+			const eventId = `event:${effect.event}`;
+			addNode({
+				id: eventId,
+				type: "event",
+				label: String(effect.event),
+				layer: 3
+			});
+			addEdge({
+				from: effectId,
+				to: eventId,
+				kind: "emits"
+			});
+		} else if (effect.type === "transition_surface") addEdge({
+			from: effectId,
+			to: surfaceIdFor(feature, effect.target),
+			kind: "transitions"
+		});
+	};
+	const projectId = sourceProject ? `project:${sourceProject.id}` : null;
+	if (sourceProject && projectId) addNode({
+		id: projectId,
+		type: "feature",
+		label: sourceProject.name,
+		detail: sourceProject.description ?? "Project",
+		layer: 0
+	});
+	for (const feature of sourceFeatures) {
+		const featureId = `feature:${feature.id}`;
+		addNode({
+			id: featureId,
+			type: "feature",
+			label: feature.name,
+			detail: feature.description,
+			layer: sourceProject ? 1 : 0,
+			href: `/features/${feature.id}`
+		});
+		if (projectId) addEdge({
+			from: projectId,
+			to: featureId,
+			kind: "contains"
+		});
+		for (const persona of feature.personas) {
+			const id = `feature:${feature.id}:persona:${persona.id}`;
+			addNode({
+				id,
+				type: "persona",
+				label: persona.name,
+				detail: persona.description,
+				layer: sourceProject ? 2 : 1
+			});
+			addEdge({
+				from: featureId,
+				to: id,
+				kind: "contains"
+			});
+		}
+		for (const resource of feature.resources) {
+			const id = `resource:${resource.id}`;
+			addNode({
+				id,
+				type: "resource",
+				label: resource.name,
+				detail: resource.description ?? resource.kind,
+				layer: sourceProject ? 2 : 1
+			});
+			addEdge({
+				from: featureId,
+				to: id,
+				kind: "contains"
+			});
+		}
+		for (const entity of feature.entities) {
+			const id = `entity:${entity.id}`;
+			addNode({
+				id,
+				type: "entity",
+				label: entity.namespace,
+				detail: entity.description,
+				layer: sourceProject ? 2 : 1
+			});
+			addEdge({
+				from: featureId,
+				to: id,
+				kind: "contains"
+			});
+			if (entity.resourceId) addEdge({
+				from: id,
+				to: `resource:${entity.resourceId}`,
+				kind: "uses"
+			});
+		}
+		for (const valueSet of feature.valueSets ?? []) {
+			const id = valueSetIdFor(feature, valueSet.id);
+			addNode({
+				id,
+				type: "valueSet",
+				label: valueSet.name,
+				detail: `${valueSet.values.length} values`,
+				layer: sourceProject ? 2 : 1
+			});
+			addEdge({
+				from: featureId,
+				to: id,
+				kind: "contains"
+			});
+		}
+		for (const event of feature.events ?? []) {
+			const id = `event:${event.name}`;
+			addNode({
+				id,
+				type: "event",
+				label: String(event.name),
+				detail: event.description,
+				layer: 3
+			});
+			addEdge({
+				from: featureId,
+				to: id,
+				kind: "contains"
+			});
+		}
+		for (const invariant of feature.featureInvariants ?? []) {
+			const id = `feature:${feature.id}:invariant:${invariant.id}`;
+			addNode({
+				id,
+				type: "invariant",
+				label: invariant.name,
+				detail: invariant.description ?? invariant.message,
+				layer: 6
+			});
+			addEdge({
+				from: featureId,
+				to: id,
+				kind: "contains"
+			});
+			for (const path of leafStatePaths(invariant.condition)) {
+				ensureState(feature, path);
+				addEdge({
+					from: id,
+					to: stateIdFor(feature, path),
+					kind: "reads"
+				});
+			}
+		}
+		for (const surface of feature.surfaces) {
+			const surfaceId = surfaceIdFor(feature, surface.id);
+			addNode({
+				id: surfaceId,
+				type: "surface",
+				label: surface.name,
+				detail: surface.description ?? surface.type,
+				layer: sourceProject ? 2 : 1,
+				href: `/features/${feature.id}?surface=${surface.id}`
+			});
+			addEdge({
+				from: featureId,
+				to: surfaceId,
+				kind: "contains"
+			});
+			if (surface.parentSurfaceId) addEdge({
+				from: surfaceIdFor(feature, surface.parentSurfaceId),
+				to: surfaceId,
+				kind: "contains"
+			});
+			for (const def of surface.stateDefinitions) {
+				ensureState(feature, String(def.path), def.description ?? def.type);
+				addEdge({
+					from: surfaceId,
+					to: stateIdFor(feature, def.path),
+					kind: "contains"
+				});
+				if (def.valueSetId) addEdge({
+					from: stateIdFor(feature, def.path),
+					to: valueSetIdFor(feature, def.valueSetId),
+					kind: "uses"
+				});
+			}
+			for (const transition of surface.transitions) {
+				const id = `feature:${feature.id}:transition:${transition.id}`;
+				addNode({
+					id,
+					type: "effect",
+					label: transition.label ?? "transition",
+					detail: transition.description,
+					layer: 6
+				});
+				addEdge({
+					from: surfaceId,
+					to: id,
+					kind: "contains"
+				});
+				addEdge({
+					from: id,
+					to: surfaceIdFor(feature, transition.target),
+					kind: "transitions"
+				});
+			}
+			for (const rule of surface.rules) {
+				const id = `feature:${feature.id}:rule:${rule.id}`;
+				addNode({
+					id,
+					type: "rule",
+					label: rule.category,
+					detail: rule.description,
+					layer: 6
+				});
+				addEdge({
+					from: surfaceId,
+					to: id,
+					kind: "contains"
+				});
+				for (const path of leafStatePaths(rule.condition)) {
+					ensureState(feature, path);
+					addEdge({
+						from: id,
+						to: stateIdFor(feature, path),
+						kind: "reads"
+					});
+				}
+				addEffectLinks(feature, id, rule.effect, "writes");
+			}
+			for (const invariant of surface.invariants) {
+				const id = `feature:${feature.id}:invariant:${invariant.id}`;
+				addNode({
+					id,
+					type: "invariant",
+					label: invariant.name,
+					detail: invariant.description ?? invariant.message,
+					layer: 6
+				});
+				addEdge({
+					from: surfaceId,
+					to: id,
+					kind: "contains"
+				});
+				for (const path of leafStatePaths(invariant.condition)) {
+					ensureState(feature, path);
+					addEdge({
+						from: id,
+						to: stateIdFor(feature, path),
+						kind: "reads"
+					});
+				}
+			}
+			for (const action of surface.actions) {
+				const actionId = actionIdFor(feature, action.id);
+				addNode({
+					id: actionId,
+					type: "action",
+					label: action.name,
+					detail: action.intent,
+					layer: sourceProject ? 3 : 2,
+					href: `/features/${feature.id}?surface=${surface.id}&panel=actions`
+				});
+				addEdge({
+					from: surfaceId,
+					to: actionId,
+					kind: "contains"
+				});
+				if (action.triggeredByEvent) {
+					const eventId = `event:${action.triggeredByEvent}`;
+					addNode({
+						id: eventId,
+						type: "event",
+						label: String(action.triggeredByEvent),
+						layer: 3
+					});
+					addEdge({
+						from: eventId,
+						to: actionId,
+						kind: "handles"
+					});
+				}
+				for (const path of action.requiredStates) {
+					ensureState(feature, String(path));
+					addEdge({
+						from: stateIdFor(feature, path),
+						to: actionId,
+						kind: "reads"
+					});
+				}
+				for (const parameter of action.parameters) {
+					const id = `feature:${feature.id}:parameter:${parameter.id}`;
+					addNode({
+						id,
+						type: "parameter",
+						label: parameter.name,
+						detail: parameter.description ?? parameter.type,
+						layer: sourceProject ? 5 : 4
+					});
+					addEdge({
+						from: actionId,
+						to: id,
+						kind: "contains"
+					});
+					if (parameter.bindToStatePath) {
+						ensureState(feature, String(parameter.bindToStatePath));
+						addEdge({
+							from: id,
+							to: stateIdFor(feature, parameter.bindToStatePath),
+							kind: "writes"
+						});
+					}
+					if (parameter.resourceId) addEdge({
+						from: id,
+						to: `resource:${parameter.resourceId}`,
+						kind: "uses"
+					});
+					if (parameter.valueSetId) addEdge({
+						from: id,
+						to: valueSetIdFor(feature, parameter.valueSetId),
+						kind: "uses"
+					});
+				}
+				for (const rule of action.rules) {
+					const id = `feature:${feature.id}:rule:${rule.id}`;
+					addNode({
+						id,
+						type: "rule",
+						label: rule.category,
+						detail: rule.description,
+						layer: 6
+					});
+					addEdge({
+						from: actionId,
+						to: id,
+						kind: "contains"
+					});
+					for (const path of leafStatePaths(rule.condition)) {
+						ensureState(feature, path);
+						addEdge({
+							from: id,
+							to: stateIdFor(feature, path),
+							kind: "reads"
+						});
+					}
+					addEffectLinks(feature, id, rule.effect, "writes");
+				}
+				for (const invariant of action.invariants) {
+					const id = `feature:${feature.id}:invariant:${invariant.id}`;
+					addNode({
+						id,
+						type: "invariant",
+						label: invariant.name,
+						detail: invariant.description ?? invariant.message,
+						layer: 6
+					});
+					addEdge({
+						from: actionId,
+						to: id,
+						kind: "contains"
+					});
+					for (const path of leafStatePaths(invariant.condition)) {
+						ensureState(feature, path);
+						addEdge({
+							from: id,
+							to: stateIdFor(feature, path),
+							kind: "reads"
+						});
+					}
+				}
+				for (const effect of action.effects) addEffectLinks(feature, actionId, effect, "contains");
+				for (const effect of action.onBlockedEffects ?? []) addEffectLinks(feature, actionId, effect, "contains");
+				for (const event of action.emittedEvents) {
+					const eventId = `event:${event}`;
+					addNode({
+						id: eventId,
+						type: "event",
+						label: String(event),
+						layer: 3
+					});
+					addEdge({
+						from: actionId,
+						to: eventId,
+						kind: "emits"
+					});
+				}
+				for (const transition of action.transitions) {
+					const id = `feature:${feature.id}:transition:${transition.id}`;
+					addNode({
+						id,
+						type: "effect",
+						label: transition.label ?? "transition",
+						detail: transition.description,
+						layer: 6
+					});
+					addEdge({
+						from: actionId,
+						to: id,
+						kind: "contains"
+					});
+					addEdge({
+						from: id,
+						to: surfaceIdFor(feature, transition.target),
+						kind: "transitions"
+					});
+				}
+				for (const scenario of action.scenarios ?? []) {
+					const id = `feature:${feature.id}:scenario:${scenario.id}`;
+					addNode({
+						id,
+						type: "scenario",
+						label: scenario.name,
+						detail: scenario.description ?? scenario.expectedStatus,
+						layer: 6
+					});
+					addEdge({
+						from: actionId,
+						to: id,
+						kind: "asserts"
+					});
+					if (scenario.personaId) addEdge({
+						from: id,
+						to: `feature:${feature.id}:persona:${scenario.personaId}`,
+						kind: "uses"
+					});
+					for (const override of scenario.stateOverrides) {
+						ensureState(feature, String(override.path));
+						addEdge({
+							from: id,
+							to: stateIdFor(feature, override.path),
+							kind: "writes"
+						});
+					}
+					for (const assertion of scenario.expectedAssertions ?? []) {
+						ensureState(feature, String(assertion.path));
+						addEdge({
+							from: id,
+							to: stateIdFor(feature, assertion.path),
+							kind: "asserts"
+						});
+					}
+					if (scenario.expectedTransition) addEdge({
+						from: id,
+						to: surfaceIdFor(feature, scenario.expectedTransition),
+						kind: "transitions"
+					});
+				}
+			}
+		}
+	}
+	return {
+		nodes: [...nodes.values()],
+		edges: [...edges.values()]
+	};
+};
+var deriveBehaviorGraphView = (graph) => {
+	const degree = /* @__PURE__ */ new Map();
+	for (const node of graph.nodes) degree.set(node.id, 0);
+	for (const edge of graph.edges) {
+		degree.set(edge.from, (degree.get(edge.from) ?? 0) + 1);
+		degree.set(edge.to, (degree.get(edge.to) ?? 0) + 1);
+	}
+	const nodes = graph.nodes.map((node) => ({
+		...node,
+		degree: degree.get(node.id) ?? 0
+	}));
+	return {
+		nodes,
+		edges: graph.edges,
+		nodeById: new Map(nodes.map((node) => [node.id, node]))
+	};
+};
+//#endregion
+//#region src/features/behavior-model/presentation/view-models/BehaviorGraphTheme.ts
+var behaviorGraphNodeTheme = {
+	feature: {
+		label: "Feature",
+		fill: "#0f172a",
+		stroke: "#020617"
+	},
+	surface: {
+		label: "Surface",
+		fill: "#0e7490",
+		stroke: "#155e75"
+	},
+	action: {
+		label: "Action",
+		fill: "#2563eb",
+		stroke: "#1d4ed8"
+	},
+	state: {
+		label: "State",
+		fill: "#7c3aed",
+		stroke: "#6d28d9"
+	},
+	event: {
+		label: "Event",
+		fill: "#db2777",
+		stroke: "#be185d"
+	},
+	parameter: {
+		label: "Parameter",
+		fill: "#0891b2",
+		stroke: "#0e7490"
+	},
+	rule: {
+		label: "Rule",
+		fill: "#ea580c",
+		stroke: "#c2410c"
+	},
+	effect: {
+		label: "Effect",
+		fill: "#16a34a",
+		stroke: "#15803d"
+	},
+	invariant: {
+		label: "Invariant",
+		fill: "#ca8a04",
+		stroke: "#a16207"
+	},
+	scenario: {
+		label: "Scenario",
+		fill: "#475569",
+		stroke: "#334155"
+	},
+	persona: {
+		label: "Persona",
+		fill: "#0f766e",
+		stroke: "#115e59"
+	},
+	resource: {
+		label: "Resource",
+		fill: "#4f46e5",
+		stroke: "#4338ca"
+	},
+	entity: {
+		label: "Entity",
+		fill: "#9333ea",
+		stroke: "#7e22ce"
+	},
+	valueSet: {
+		label: "Value set",
+		fill: "#64748b",
+		stroke: "#475569"
+	}
+};
+var behaviorGraphEdgeTheme = {
+	contains: {
+		label: "Contains",
+		color: "#94a3b8"
+	},
+	reads: {
+		label: "Reads",
+		color: "#7c3aed"
+	},
+	writes: {
+		label: "Writes",
+		color: "#16a34a"
+	},
+	emits: {
+		label: "Emits",
+		color: "#db2777"
+	},
+	transitions: {
+		label: "Transitions",
+		color: "#0891b2"
+	},
+	asserts: {
+		label: "Asserts",
+		color: "#ca8a04"
+	},
+	uses: {
+		label: "Uses",
+		color: "#475569"
+	},
+	handles: {
+		label: "Handles",
+		color: "#2563eb"
+	}
+};
+//#endregion
+//#region src/features/behavior-model/presentation/components/BehaviorGraph.svelte
+function BehaviorGraph($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let { feature, features, project } = $$props;
+		let search = "";
+		let stabilizationProgress = 0;
+		let renderer = null;
+		let enabledKinds = {
+			contains: true,
+			reads: true,
+			writes: true,
+			emits: true,
+			transitions: true,
+			asserts: true,
+			uses: true,
+			handles: true
+		};
+		const sourceFeatures = derived(() => features ?? (feature ? [feature] : []));
+		const graphTitle = derived(() => project?.name ?? feature?.name ?? "Behavior graph");
+		const graphSubtitle = derived(() => project ? `The whole project behavior map across ${sourceFeatures().length} feature${sourceFeatures().length === 1 ? "" : "s"} from the shared Unspa hub.` : "A connected map of the executable behavior model from the shared Unspa hub.");
+		const backHref = derived(() => project ? `/projects/${project.id}` : feature ? `/features/${feature.id}` : "/projects");
+		const backLabel = derived(() => project ? "Back to project" : "Back to editor");
+		const rawGraph = derived(() => buildBehaviorGraph(sourceFeatures(), project));
+		const graph = derived(() => deriveBehaviorGraphView(rawGraph()));
+		const selectedNode = derived(() => null);
+		const selectedEdge = derived(() => null);
+		const selectedEdgeFrom = derived(() => selectedEdge() ? graph().nodeById.get(selectedEdge().from) ?? null : null);
+		const selectedEdgeTo = derived(() => selectedEdge() ? graph().nodeById.get(selectedEdge().to) ?? null : null);
+		const centralNodes = derived(() => [...graph().nodes].sort((a, b) => b.degree - a.degree).slice(0, 6));
+		const countsByType = derived(() => {
+			const counts = /* @__PURE__ */ new Map();
+			for (const node of graph().nodes) counts.set(node.type, (counts.get(node.type) ?? 0) + 1);
+			return counts;
+		});
+		onDestroy(() => {
+			renderer?.destroy();
+			renderer = null;
+		});
+		$$renderer.push(`<section class="space-y-4"><div class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm shadow-slate-950/5"><div class="border-b border-slate-200 bg-slate-950 px-4 py-4 text-white"><div class="flex flex-wrap items-start justify-between gap-4"><div class="min-w-0"><p class="text-xs font-semibold uppercase tracking-wide text-cyan-200">Behavior Graph</p> <h2 class="mt-1 truncate text-2xl font-semibold">${escape_html(graphTitle())}</h2> <p class="mt-1 max-w-3xl text-sm leading-6 text-slate-300">${escape_html(graphSubtitle())}</p></div> <a${attr("href", backHref())} class="rounded-md border border-white/20 px-3 py-2 text-sm font-medium text-white hover:bg-white/10">${escape_html(backLabel())}</a></div></div> <div class="grid gap-0 lg:grid-cols-[minmax(0,1fr)_320px]"><div class="min-w-0 border-b border-slate-200 lg:border-b-0 lg:border-r"><div class="flex flex-wrap items-center gap-3 border-b border-slate-200 bg-slate-50 px-4 py-3"><input type="search"${attr("value", search)} placeholder="Search nodes" class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-brand-700 sm:w-64"/> <button type="button" class="rounded-md border border-slate-300 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-white">Re-layout</button> <button type="button" class="rounded-md border border-slate-300 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-white">Fit</button> <div class="flex rounded-md border border-slate-300 bg-white p-1"><button type="button" class="rounded px-2.5 py-1 text-sm font-semibold text-slate-700 hover:bg-slate-50" aria-label="Zoom out">-</button> <button type="button" class="rounded px-2.5 py-1 text-sm font-semibold text-slate-700 hover:bg-slate-50" aria-label="Zoom in">+</button></div> <button type="button" class="rounded-md border border-slate-300 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-white">Reset</button> <button type="button"${attr_class(`rounded-md border border-slate-300 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-white`)}>Labels</button> <div class="flex flex-wrap gap-1"><!--[-->`);
+		const each_array = ensure_array_like(ALL_BEHAVIOR_GRAPH_EDGE_KINDS);
+		for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+			let kind = each_array[$$index];
+			$$renderer.push(`<button type="button"${attr_class(`rounded-full border px-2.5 py-1 text-xs font-medium ${enabledKinds[kind] ? "border-slate-300 bg-white text-slate-800" : "border-slate-200 bg-slate-100 text-slate-400"}`)}>${escape_html(behaviorGraphEdgeTheme[kind].label)}</button>`);
+		}
+		$$renderer.push(`<!--]--></div></div> <div class="graph-canvas relative svelte-1wx4hks"><div class="h-[76vh] min-h-[720px] w-full"${attr("aria-label", `Interactive behavior graph for ${graphTitle()}`)}></div> <div class="pointer-events-none absolute bottom-3 left-3 rounded-md border border-slate-200 bg-white/88 px-3 py-2 text-xs text-slate-600 shadow-sm backdrop-blur">ForceAtlas2 settles the graph, then physics stops for smooth panning. Wheel, pinch, or +/- to zoom.</div> `);
+		$$renderer.push("<!--[0-->");
+		$$renderer.push(`<div class="pointer-events-none absolute left-1/2 top-3 w-64 -translate-x-1/2 rounded-md border border-slate-200 bg-white/90 p-3 text-xs text-slate-600 shadow-sm backdrop-blur"><div class="flex justify-between font-medium text-slate-800"><span>Stabilizing layout</span> <span>${escape_html(stabilizationProgress)}%</span></div> <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-200"><div class="h-full rounded-full bg-brand-500 transition-all"${attr_style(`width:${stabilizationProgress}%`)}></div></div></div>`);
+		$$renderer.push(`<!--]--></div></div> <aside class="space-y-4 p-4"><div><h3 class="text-sm font-semibold text-slate-950">Graph Summary</h3> <div class="mt-3 grid grid-cols-2 gap-2 text-sm"><div class="rounded-md bg-slate-100 p-3"><div class="text-2xl font-semibold text-slate-950">${escape_html(graph().nodes.length)}</div> <div class="text-xs text-slate-500">nodes</div></div> <div class="rounded-md bg-slate-100 p-3"><div class="text-2xl font-semibold text-slate-950">${escape_html(graph().edges.length)}</div> <div class="text-xs text-slate-500">edges</div></div></div></div> <div><h3 class="text-sm font-semibold text-slate-950">Node Types</h3> <div class="mt-2 flex flex-wrap gap-1.5"><!--[-->`);
+		const each_array_1 = ensure_array_like(ALL_BEHAVIOR_GRAPH_NODE_TYPES);
+		for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
+			let type = each_array_1[$$index_1];
+			if (countsByType().get(type)) {
+				$$renderer.push("<!--[0-->");
+				$$renderer.push(`<span class="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-1 text-xs text-slate-700"><span class="h-2 w-2 rounded-full"${attr_style(`background:${behaviorGraphNodeTheme[type].fill}`)}></span> ${escape_html(behaviorGraphNodeTheme[type].label)} ${escape_html(countsByType().get(type))}</span>`);
+			} else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]-->`);
+		}
+		$$renderer.push(`<!--]--></div></div> <div><h3 class="text-sm font-semibold text-slate-950">Central Nodes</h3> <div class="mt-2 space-y-2"><!--[-->`);
+		const each_array_2 = ensure_array_like(centralNodes());
+		for (let $$index_2 = 0, $$length = each_array_2.length; $$index_2 < $$length; $$index_2++) {
+			let node = each_array_2[$$index_2];
+			$$renderer.push(`<button type="button" class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-left hover:border-brand-300 hover:bg-brand-50"><span class="block truncate text-sm font-medium text-slate-900">${escape_html(node.label)}</span> <span class="text-xs text-slate-500">${escape_html(behaviorGraphNodeTheme[node.type].label)} / ${escape_html(node.degree)} links</span></button>`);
+		}
+		$$renderer.push(`<!--]--></div></div> <div class="rounded-md border border-slate-200 bg-slate-50 p-3">`);
+		if (selectedNode()) {
+			$$renderer.push("<!--[0-->");
+			$$renderer.push(`<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">${escape_html(behaviorGraphNodeTheme[selectedNode().type].label)}</p> <h3 class="mt-1 text-base font-semibold text-slate-950">${escape_html(selectedNode().label)}</h3> `);
+			if (selectedNode().detail) {
+				$$renderer.push("<!--[0-->");
+				$$renderer.push(`<p class="mt-2 text-sm leading-6 text-slate-600">${escape_html(selectedNode().detail)}</p>`);
+			} else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--> <p class="mt-2 text-xs text-slate-500">${escape_html(selectedNode().degree)} graph links</p> `);
+			if (selectedNode().href) {
+				$$renderer.push("<!--[0-->");
+				$$renderer.push(`<a class="mt-3 inline-flex text-sm font-medium text-brand-700 hover:underline"${attr("href", selectedNode().href)}>Open in editor</a>`);
+			} else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]-->`);
+		} else if (selectedEdge()) {
+			$$renderer.push("<!--[1-->");
+			$$renderer.push(`<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">${escape_html(behaviorGraphEdgeTheme[selectedEdge().kind].label)}</p> <h3 class="mt-1 text-base font-semibold text-slate-950">${escape_html(selectedEdge().label ?? "Behavior link")}</h3> <p class="mt-2 text-sm leading-6 text-slate-600">${escape_html(selectedEdgeFrom()?.label ?? selectedEdge().from)} -> ${escape_html(selectedEdgeTo()?.label ?? selectedEdge().to)}</p> <p class="mt-2 text-xs text-slate-500">Click another node or edge to move the highlighted neighborhood.</p>`);
+		} else {
+			$$renderer.push("<!--[-1-->");
+			$$renderer.push(`<h3 class="text-sm font-semibold text-slate-950">Explore the Map</h3> <p class="mt-2 text-sm leading-6 text-slate-600">Click a node or edge to highlight its linked behavior. Hover highlighting is disabled so
+              the canvas stays lighter on slower laptops.</p>`);
+		}
+		$$renderer.push(`<!--]--></div></aside></div></div></section>`);
+	});
+}
+
+export { BehaviorGraph as B };
+//# sourceMappingURL=BehaviorGraph-m5kYj5HH.js.map