@likec4/diagram 1.55.1 → 1.57.0

package/dist/overlays/relationships-browser/actor.js

@@ -1,472 +1,374 @@
-import { nonNullable, invariant, delay } from '@likec4/core/utils';
-import { applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
-import { getViewportForBounds } from '@xyflow/system';
-import { hasAtLeast, omit, isNullish } from 'remeda';
-import { assign, enqueueActions, cancel, raise, setup, assertEvent, fromPromise } from 'xstate';
-import { MinZoom, ZIndexes } from '../../base/const.js';
-import { updateEdges } from '../../base/updateEdges.js';
-import { updateNodes } from '../../base/updateNodes.js';
-import { typedSystem } from '../../likec4diagram/state/utils.js';
-import { getNodeCenter } from '../../utils/xyflow.js';
-import { ViewPadding } from './const.js';
-import { viewToNodesEdge } from './useViewToNodesEdges.js';
-import { Base } from '../../base/Base.js';
-
-const findRootSubject = (nodes) => nodes.find(
-  (n) => n.data.column === "subjects" && isNullish(n.parentId)
-);
-const layouter = fromPromise(async ({ input, self, signal }) => {
-  const {
-    subjectId,
-    navigateFromNode,
-    xyflow,
-    xystore,
-    update
-  } = input;
-  let {
-    nodes: currentNodes,
-    width,
-    height
-  } = xystore.getState();
-  const next = viewToNodesEdge(update);
-  const updateXYData = () => {
-    const { nodes, edges } = xystore.getState();
-    return {
-      xynodes: updateNodes(nodes, next.xynodes),
-      xyedges: updateEdges(edges, next.xyedges)
-    };
-  };
-  const parent = nonNullable(self._parent);
-  let zoom = xyflow.getZoom();
-  const maxZoom = Math.max(zoom, 1);
-  const nextviewport = getViewportForBounds(update.bounds, width, height, MinZoom, maxZoom, ViewPadding);
-  const nextSubjectNode = next.xynodes.find(
-    (n) => n.type !== "empty" && n.data.column === "subjects" && n.data.fqn === subjectId
-  ) ?? findRootSubject(next.xynodes);
-  const currentSubjectNode = findRootSubject(currentNodes);
-  const existingNode = navigateFromNode ? currentNodes.find((n) => n.id === navigateFromNode) : currentNodes.find((n) => n.type !== "empty" && n.data.column !== "subjects" && n.data.fqn === subjectId);
-  if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn) {
-    await xyflow.setViewport(nextviewport);
-    return updateXYData();
-  }
-  const nextSubjectCenter = {
-    x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
-    y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
-  };
-  const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id);
-  const currentSubjectCenter = getNodeCenter(currentSubjectInternalNode);
-  const nested = /* @__PURE__ */ new Set();
-  currentNodes.forEach((n) => {
-    if (n.id === existingNode.id) {
-      return;
-    }
-    if (n.data.column === "subjects") {
-      nested.add(n.id);
-      return;
-    }
-    if (n.parentId && (n.parentId === existingNode.id || nested.has(n.parentId))) {
-      nested.add(n.id);
-    }
-  });
-  currentNodes = updateNodes(
-    currentNodes,
-    currentNodes.flatMap((n) => {
-      if (nested.has(n.id)) {
-        return [];
-      }
-      if (n.id !== existingNode.id) {
-        return {
-          ...n,
-          data: {
-            ...n.data,
-            dimmed: n.data.column === "subjects" ? "immediate" : true
-          }
-        };
-      }
-      return {
-        ...omit(n, ["parentId"]),
-        position: {
-          x: currentSubjectCenter.x - n.initialWidth / 2,
-          y: currentSubjectCenter.y - n.initialHeight / 2
-        },
-        zIndex: ZIndexes.Max,
-        hidden: false,
-        data: {
-          ...n.data,
-          dimmed: false
-        }
-      };
-    })
-  );
-  parent.send({
-    type: "update.xydata",
-    xynodes: currentNodes,
-    xyedges: []
-  });
-  await delay(120);
-  next.xynodes = next.xynodes.map(Base.setDimmed(false));
-  if (signal.aborted) {
-    return updateXYData();
-  }
-  const duration = 300;
-  xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration, interpolate: "smooth" });
-  await delay(duration);
-  await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
-  return updateXYData();
+import "../../_virtual/_rolldown/runtime.js";
+import { getNodeCenter } from "../../utils/xyflow.js";
+import { Base } from "../../base/Base.js";
+import { MinZoom, ZIndexes } from "../../base/const.js";
+import { updateEdges } from "../../base/updateEdges.js";
+import { updateNodes } from "../../base/updateNodes.js";
+import { typedSystem } from "../../likec4diagram/state/utils.js";
+import { ViewPadding } from "./const.js";
+import { viewToNodesEdge } from "./useViewToNodesEdges.js";
+import { applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
+import { hasAtLeast, isNullish, omit } from "remeda";
+import { delay, invariant, nonNullable } from "@likec4/core/utils";
+import { getViewportForBounds as getViewportForBounds$1 } from "@xyflow/system";
+import { assertEvent, assign, cancel, enqueueActions, fromPromise, raise, setup } from "xstate";
+//#region src/overlays/relationships-browser/actor.ts
+/**
+* Root node in 'subjects' column
+*/
+var findRootSubject = (nodes) => nodes.find((n) => n.data.column === "subjects" && isNullish(n.parentId));
+var machine = setup({
+	types: {
+		context: {},
+		tags: "",
+		children: {},
+		input: {},
+		events: {}
+	},
+	actors: { layouter: fromPromise(async ({ input, self, signal }) => {
+		const { subjectId, navigateFromNode, xyflow, xystore, update } = input;
+		let { nodes: currentNodes, width, height } = xystore.getState();
+		const next = viewToNodesEdge(update);
+		const updateXYData = () => {
+			const { nodes, edges } = xystore.getState();
+			return {
+				xynodes: updateNodes(nodes, next.xynodes),
+				xyedges: updateEdges(edges, next.xyedges)
+			};
+		};
+		const parent = nonNullable(self._parent);
+		let zoom = xyflow.getZoom();
+		const maxZoom = Math.max(zoom, 1);
+		const nextviewport = getViewportForBounds$1(update.bounds, width, height, MinZoom, maxZoom, ViewPadding);
+		const nextSubjectNode = next.xynodes.find((n) => n.type !== "empty" && n.data.column === "subjects" && n.data.fqn === subjectId) ?? findRootSubject(next.xynodes);
+		const currentSubjectNode = findRootSubject(currentNodes);
+		const existingNode = navigateFromNode ? currentNodes.find((n) => n.id === navigateFromNode) : currentNodes.find((n) => n.type !== "empty" && n.data.column !== "subjects" && n.data.fqn === subjectId);
+		if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn) {
+			await xyflow.setViewport(nextviewport);
+			return updateXYData();
+		}
+		const nextSubjectCenter = {
+			x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
+			y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
+		};
+		const currentSubjectCenter = getNodeCenter(xyflow.getInternalNode(currentSubjectNode.id));
+		const nested = /* @__PURE__ */ new Set();
+		currentNodes.forEach((n) => {
+			if (n.id === existingNode.id) return;
+			if (n.data.column === "subjects") {
+				nested.add(n.id);
+				return;
+			}
+			if (n.parentId && (n.parentId === existingNode.id || nested.has(n.parentId))) nested.add(n.id);
+		});
+		currentNodes = updateNodes(currentNodes, currentNodes.flatMap((n) => {
+			if (nested.has(n.id)) return [];
+			if (n.id !== existingNode.id) return {
+				...n,
+				data: {
+					...n.data,
+					dimmed: n.data.column === "subjects" ? "immediate" : true
+				}
+			};
+			return {
+				...omit(n, ["parentId"]),
+				position: {
+					x: currentSubjectCenter.x - n.initialWidth / 2,
+					y: currentSubjectCenter.y - n.initialHeight / 2
+				},
+				zIndex: ZIndexes.Max,
+				hidden: false,
+				data: {
+					...n.data,
+					dimmed: false
+				}
+			};
+		}));
+		parent.send({
+			type: "update.xydata",
+			xynodes: currentNodes,
+			xyedges: []
+		});
+		await delay(120);
+		next.xynodes = next.xynodes.map(Base.setDimmed(false));
+		if (signal.aborted) return updateXYData();
+		const duration = 300;
+		xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, {
+			zoom,
+			duration,
+			interpolate: "smooth"
+		});
+		await delay(duration);
+		await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
+		return updateXYData();
+	}) },
+	guards: {
+		hasViewId: ({ context }) => context.viewId !== null,
+		isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null,
+		anotherSubject: ({ context, event }) => {
+			if (event.type === "update.view") return context.layouted?.subject !== event.layouted.subject;
+			return false;
+		}
+	}
 });
-const machine = setup({
-  types: {
-    context: {},
-    tags: "",
-    children: {},
-    input: {},
-    events: {}
-    // emitted: {} as EmittedEvents,
-  },
-  actors: {
-    layouter
-  },
-  guards: {
-    hasViewId: ({ context }) => context.viewId !== null,
-    isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null,
-    anotherSubject: ({ context, event }) => {
-      if (event.type === "update.view") {
-        const subject = context.layouted?.subject;
-        return subject !== event.layouted.subject;
-      }
-      return false;
-    }
-  }
+var xyflowInit = () => machine.assign(({ event }) => {
+	assertEvent(event, "xyflow.init");
+	return {
+		xyflow: event.instance,
+		xystore: event.store
+	};
 });
-const xyflowInit = () => machine.assign(({ event }) => {
-  assertEvent(event, "xyflow.init");
-  return {
-    xyflow: event.instance,
-    xystore: event.store
-  };
+var updateView = () => machine.assign(({ event }) => {
+	assertEvent(event, "update.view");
+	return {
+		layouted: event.layouted,
+		...viewToNodesEdge(event.layouted)
+	};
 });
-const updateView = () => machine.assign(({ event }) => {
-  assertEvent(event, "update.view");
-  return {
-    layouted: event.layouted,
-    ...viewToNodesEdge(event.layouted)
-  };
+var xyflowUpdateNodeInternals = () => machine.createAction(({ context }) => {
+	invariant(context.xystore, "xystore is not initialized");
+	const { domNode, updateNodeInternals } = context.xystore.getState();
+	const nodeIds = new Set(context.xyedges.flatMap((e) => [e.source, e.target]));
+	if (nodeIds.size === 0 || !domNode) return;
+	const updates = /* @__PURE__ */ new Map();
+	const domNodes = domNode.querySelectorAll(".react-flow__node");
+	for (const nodeElement of domNodes) {
+		const nodeId = nodeElement.getAttribute("data-id");
+		if (nodeId && nodeIds.has(nodeId)) updates.set(nodeId, {
+			id: nodeId,
+			nodeElement,
+			force: true
+		});
+	}
+	updateNodeInternals(updates, { triggerFitView: false });
 });
-const xyflowUpdateNodeInternals = () => machine.createAction(({ context }) => {
-  invariant(context.xystore, "xystore is not initialized");
-  const { domNode, updateNodeInternals } = context.xystore.getState();
-  const nodeIds = new Set(context.xyedges.flatMap((e) => [e.source, e.target]));
-  if (nodeIds.size === 0 || !domNode) {
-    return;
-  }
-  const updates = /* @__PURE__ */ new Map();
-  const domNodes = domNode.querySelectorAll(".react-flow__node");
-  for (const nodeElement of domNodes) {
-    const nodeId = nodeElement.getAttribute("data-id");
-    if (nodeId && nodeIds.has(nodeId)) {
-      updates.set(nodeId, { id: nodeId, nodeElement, force: true });
-    }
-  }
-  updateNodeInternals(updates, { triggerFitView: false });
+var xyflowFitDiagram = (params) => machine.createAction(({ context, event }) => {
+	params ??= event.type === "fitDiagram" ? event : {};
+	let { duration, bounds } = params ?? {};
+	duration ??= 450;
+	const { xyflow, xystore } = context;
+	invariant(xyflow, "xyflow is not initialized");
+	invariant(xystore, "xystore is not initialized");
+	bounds ??= context.layouted?.bounds;
+	const maxZoom = Math.max(xyflow.getZoom(), 1);
+	if (bounds) {
+		const { width, height } = xystore.getState();
+		const viewport = getViewportForBounds$1(bounds, width, height, MinZoom, maxZoom, ViewPadding);
+		xyflow.setViewport(viewport, duration > 0 ? {
+			duration,
+			interpolate: "smooth"
+		} : void 0).catch(console.error);
+	} else xyflow.fitView({
+		minZoom: MinZoom,
+		maxZoom,
+		padding: ViewPadding,
+		...duration > 0 && {
+			duration,
+			interpolate: "smooth"
+		}
+	}).catch(console.error);
 });
-const xyflowFitDiagram = (params) => machine.createAction(({ context, event }) => {
-  params ??= event.type === "fitDiagram" ? event : {};
-  let { duration, bounds } = params ?? {};
-  duration ??= 450;
-  const { xyflow, xystore } = context;
-  invariant(xyflow, "xyflow is not initialized");
-  invariant(xystore, "xystore is not initialized");
-  bounds ??= context.layouted?.bounds;
-  const maxZoom = Math.max(xyflow.getZoom(), 1);
-  if (bounds) {
-    const { width, height } = xystore.getState();
-    const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding);
-    xyflow.setViewport(viewport, duration > 0 ? { duration, interpolate: "smooth" } : void 0).catch(
-      console.error
-    );
-  } else {
-    xyflow.fitView({
-      minZoom: MinZoom,
-      maxZoom,
-      padding: ViewPadding,
-      ...duration > 0 && { duration, interpolate: "smooth" }
-    }).catch(console.error);
-  }
+var xyflowApplyNodeChanges = () => machine.assign(({ context, event }) => {
+	assertEvent(event, "xyflow.applyNodeChanges");
+	return { xynodes: applyNodeChanges(event.changes, context.xynodes) };
 });
-const xyflowApplyNodeChanges = () => machine.assign(({ context, event }) => {
-  assertEvent(event, "xyflow.applyNodeChanges");
-  return {
-    xynodes: applyNodeChanges(event.changes, context.xynodes)
-  };
+var xyflowApplyEdgeChanges = () => machine.assign(({ context, event }) => {
+	assertEvent(event, "xyflow.applyEdgeChanges");
+	return { xyedges: applyEdgeChanges(event.changes, context.xyedges) };
 });
-const xyflowApplyEdgeChanges = () => machine.assign(({ context, event }) => {
-  assertEvent(event, "xyflow.applyEdgeChanges");
-  return {
-    xyedges: applyEdgeChanges(event.changes, context.xyedges)
-  };
+var openRelationshipSource = () => machine.enqueueActions(({ system, event }) => {
+	if (event.type !== "xyflow.edgeClick") return;
+	const diagramActor = typedSystem(system).diagramActorRef;
+	const relations = event.edge.data.relations;
+	if (hasAtLeast(relations, 1)) diagramActor.send({
+		type: "open.source",
+		relation: relations[0]
+	});
 });
-const openRelationshipSource = () => machine.enqueueActions(({ system, event }) => {
-  if (event.type !== "xyflow.edgeClick") {
-    return;
-  }
-  const diagramActor = typedSystem(system).diagramActorRef;
-  const relations = event.edge.data.relations;
-  if (hasAtLeast(relations, 1)) {
-    diagramActor.send({ type: "open.source", relation: relations[0] });
-  }
+var dispose = () => machine.assign({
+	xyflow: null,
+	layouted: null,
+	xystore: null,
+	xyedges: [],
+	xynodes: []
 });
-const dispose = () => machine.assign({
-  xyflow: null,
-  layouted: null,
-  xystore: null,
-  xyedges: [],
-  xynodes: []
+var relationshipsBrowserLogic = machine.createMachine({
+	id: "relationships-browser",
+	context: ({ input }) => ({
+		subject: input.subject,
+		viewId: input.viewId,
+		scope: input.viewId ? input.scope : "global",
+		closeable: input.closeable ?? true,
+		enableSelectSubject: input.enableSelectSubject ?? true,
+		enableChangeScope: input.enableChangeScope ?? true,
+		xyflow: null,
+		xystore: null,
+		layouted: null,
+		navigateFromNode: null,
+		xynodes: [],
+		xyedges: []
+	}),
+	initial: "initializing",
+	on: {
+		"xyflow.applyNodeChanges": { actions: xyflowApplyNodeChanges() },
+		"xyflow.applyEdgeChanges": { actions: xyflowApplyEdgeChanges() }
+	},
+	states: {
+		initializing: { on: {
+			"xyflow.init": {
+				actions: xyflowInit(),
+				target: "isReady"
+			},
+			"update.view": {
+				actions: updateView(),
+				target: "isReady"
+			},
+			"stop": "closed",
+			"close": "closed"
+		} },
+		"isReady": { always: [{
+			guard: "isReady",
+			actions: [xyflowFitDiagram({ duration: 0 }), raise({ type: "xyflow.updateNodeInternals" }, { delay: 150 })],
+			target: "active"
+		}, { target: "initializing" }] },
+		"active": {
+			initial: "idle",
+			tags: ["active"],
+			on: {
+				"xyflow.nodeClick": { actions: enqueueActions(({ event, enqueue }) => {
+					if ("fqn" in event.node.data) {
+						const fqn = event.node.data.fqn;
+						enqueue.raise({
+							type: "navigate.to",
+							subject: fqn,
+							fromNode: event.node.id
+						});
+					}
+				}) },
+				"xyflow.edgeClick": [{
+					guard: "hasViewId",
+					actions: enqueueActions(({ event, context, system, enqueue }) => {
+						if (event.edge.selected || event.edge.data.relations.length > 1) enqueue.sendTo(typedSystem(system).overlaysActorRef, {
+							type: "open.relationshipDetails",
+							viewId: context.viewId,
+							source: event.edge.data.sourceFqn,
+							target: event.edge.data.targetFqn
+						});
+						else enqueue(openRelationshipSource());
+					})
+				}, { actions: openRelationshipSource() }],
+				"navigate.to": { actions: [assign({
+					subject: ({ event }) => event.subject,
+					viewId: ({ event, context }) => event.viewId ?? context.viewId ?? null,
+					navigateFromNode: ({ event }) => event.fromNode ?? null
+				})] },
+				"xyflow.paneDblClick": { actions: xyflowFitDiagram() },
+				"update.view": {
+					actions: updateView(),
+					target: ".layouting"
+				},
+				"change.scope": { actions: assign({ scope: ({ event }) => event.scope }) },
+				"xyflow.updateNodeInternals": { actions: xyflowUpdateNodeInternals() },
+				"fitDiagram": { actions: xyflowFitDiagram() },
+				"xyflow.resized": { actions: [cancel("fitDiagram"), raise({ type: "fitDiagram" }, {
+					id: "fitDiagram",
+					delay: 300
+				})] },
+				"xyflow.init": { actions: xyflowInit() },
+				"xyflow.unmount": { target: "initializing" },
+				"close": "closed"
+			},
+			states: {
+				"idle": { on: {
+					"xyflow.edgeMouseEnter": { actions: [
+						assign({ xyedges: ({ context, event }) => {
+							const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed !== false || edge.selected);
+							return context.xyedges.map((edge) => {
+								if (edge.id === event.edge.id) return Base.setData(edge, {
+									hovered: true,
+									dimmed: false
+								});
+								return hasDimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
+							});
+						} }),
+						cancel("undim.edges"),
+						cancel("dim.nonhovered.edges"),
+						raise({ type: "dim.nonhovered.edges" }, {
+							id: "dim.nonhovered.edges",
+							delay: 200
+						})
+					] },
+					"xyflow.edgeMouseLeave": { actions: [
+						assign({ xyedges: ({ context, event }) => {
+							return context.xyedges.map((edge) => {
+								if (edge.id === event.edge.id) return Base.setHovered(edge, false);
+								return edge;
+							});
+						} }),
+						cancel("dim.nonhovered.edges"),
+						raise({ type: "undim.edges" }, {
+							id: "undim.edges",
+							delay: 400
+						})
+					] },
+					"dim.nonhovered.edges": { actions: assign({ xyedges: ({ context }) => context.xyedges.map((edge) => edge.data.hovered ? edge : Base.setDimmed(edge, edge.data.dimmed === "immediate" ? "immediate" : true)) }) },
+					"undim.edges": { actions: assign({ xyedges: ({ context }) => {
+						return context.xyedges.map(Base.setDimmed(false));
+					} }) },
+					"xyflow.selectionChange": { actions: enqueueActions(({ event, context, enqueue }) => {
+						if (event.edges.length === 0 && context.xyedges.some((e) => e.data.dimmed) && !context.xyedges.some((e) => e.data.hovered)) enqueue.raise({ type: "undim.edges" });
+					}) }
+				} },
+				"layouting": {
+					invoke: {
+						id: "layouter",
+						src: "layouter",
+						input: ({ context }) => {
+							return {
+								subjectId: context.subject,
+								navigateFromNode: context.navigateFromNode,
+								xyflow: nonNullable(context.xyflow),
+								xystore: nonNullable(context.xystore),
+								update: nonNullable(context.layouted)
+							};
+						},
+						onDone: {
+							target: "idle",
+							actions: enqueueActions(({ enqueue, event }) => {
+								enqueue.assign({
+									xynodes: event.output.xynodes,
+									xyedges: event.output.xyedges,
+									navigateFromNode: null
+								});
+								enqueue.raise({
+									type: "fitDiagram",
+									duration: 200
+								}, {
+									id: "fitDiagram",
+									delay: 50
+								});
+								for (let i = 1; i < 8; i++) enqueue.raise({ type: "xyflow.updateNodeInternals" }, { delay: 120 + i * 75 });
+							})
+						}
+					},
+					on: {
+						"update.xydata": { actions: assign({
+							xynodes: ({ event }) => event.xynodes,
+							xyedges: ({ event }) => event.xyedges
+						}) },
+						"xyflow.applyEdgeChanges": {},
+						"xyflow.applyNodeChanges": {}
+					}
+				}
+			}
+		},
+		closed: {
+			id: "closed",
+			type: "final",
+			entry: dispose()
+		}
+	},
+	exit: dispose()
 });
-const _relationshipsBrowserLogic = machine.createMachine({
-  id: "relationships-browser",
-  context: ({ input }) => ({
-    subject: input.subject,
-    viewId: input.viewId,
-    scope: input.viewId ? input.scope : "global",
-    closeable: input.closeable ?? true,
-    enableSelectSubject: input.enableSelectSubject ?? true,
-    enableChangeScope: input.enableChangeScope ?? true,
-    xyflow: null,
-    xystore: null,
-    layouted: null,
-    navigateFromNode: null,
-    xynodes: [],
-    xyedges: []
-  }),
-  initial: "initializing",
-  on: {
-    "xyflow.applyNodeChanges": {
-      actions: xyflowApplyNodeChanges()
-    },
-    "xyflow.applyEdgeChanges": {
-      actions: xyflowApplyEdgeChanges()
-    }
-  },
-  states: {
-    initializing: {
-      on: {
-        "xyflow.init": {
-          actions: xyflowInit(),
-          target: "isReady"
-        },
-        "update.view": {
-          actions: updateView(),
-          target: "isReady"
-        },
-        "stop": "closed",
-        "close": "closed"
-      }
-    },
-    "isReady": {
-      always: [{
-        guard: "isReady",
-        actions: [
-          xyflowFitDiagram({ duration: 0 }),
-          raise({ type: "xyflow.updateNodeInternals" }, { delay: 150 })
-        ],
-        target: "active"
-      }, {
-        target: "initializing"
-      }]
-    },
-    "active": {
-      initial: "idle",
-      tags: ["active"],
-      on: {
-        "xyflow.nodeClick": {
-          actions: enqueueActions(({ event, enqueue }) => {
-            if ("fqn" in event.node.data) {
-              const fqn = event.node.data.fqn;
-              enqueue.raise({
-                type: "navigate.to",
-                subject: fqn,
-                fromNode: event.node.id
-              });
-            }
-          })
-        },
-        "xyflow.edgeClick": [
-          {
-            guard: "hasViewId",
-            actions: enqueueActions(({ event, context, system, enqueue }) => {
-              if (event.edge.selected || event.edge.data.relations.length > 1) {
-                enqueue.sendTo(typedSystem(system).overlaysActorRef, {
-                  type: "open.relationshipDetails",
-                  viewId: context.viewId,
-                  source: event.edge.data.sourceFqn,
-                  target: event.edge.data.targetFqn
-                });
-              } else {
-                enqueue(openRelationshipSource());
-              }
-            })
-          },
-          {
-            actions: openRelationshipSource()
-          }
-        ],
-        "navigate.to": {
-          actions: [
-            assign({
-              subject: ({ event }) => event.subject,
-              viewId: ({ event, context }) => event.viewId ?? context.viewId ?? null,
-              navigateFromNode: ({ event }) => event.fromNode ?? null
-            })
-          ]
-        },
-        "xyflow.paneDblClick": {
-          actions: xyflowFitDiagram()
-        },
-        "update.view": {
-          actions: updateView(),
-          target: ".layouting"
-        },
-        "change.scope": {
-          actions: assign({
-            scope: ({ event }) => event.scope
-          })
-        },
-        "xyflow.updateNodeInternals": {
-          actions: xyflowUpdateNodeInternals()
-        },
-        "fitDiagram": {
-          actions: xyflowFitDiagram()
-        },
-        "xyflow.resized": {
-          actions: [
-            cancel("fitDiagram"),
-            raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 300 })
-          ]
-        },
-        "xyflow.init": {
-          actions: xyflowInit()
-        },
-        "xyflow.unmount": {
-          target: "initializing"
-        },
-        "close": "closed"
-      },
-      states: {
-        "idle": {
-          on: {
-            "xyflow.edgeMouseEnter": {
-              actions: [
-                assign({
-                  xyedges: ({ context, event }) => {
-                    const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed !== false || edge.selected);
-                    return context.xyedges.map((edge) => {
-                      if (edge.id === event.edge.id) {
-                        return Base.setData(edge, {
-                          hovered: true,
-                          dimmed: false
-                        });
-                      }
-                      return hasDimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
-                    });
-                  }
-                }),
-                cancel("undim.edges"),
-                cancel("dim.nonhovered.edges"),
-                raise({ type: "dim.nonhovered.edges" }, { id: "dim.nonhovered.edges", delay: 200 })
-              ]
-            },
-            "xyflow.edgeMouseLeave": {
-              actions: [
-                assign({
-                  xyedges: ({ context, event }) => {
-                    return context.xyedges.map((edge) => {
-                      if (edge.id === event.edge.id) {
-                        return Base.setHovered(edge, false);
-                      }
-                      return edge;
-                    });
-                  }
-                }),
-                cancel("dim.nonhovered.edges"),
-                raise({ type: "undim.edges" }, { id: "undim.edges", delay: 400 })
-              ]
-            },
-            "dim.nonhovered.edges": {
-              actions: assign({
-                xyedges: ({ context }) => context.xyedges.map(
-                  (edge) => edge.data.hovered ? edge : Base.setDimmed(edge, edge.data.dimmed === "immediate" ? "immediate" : true)
-                )
-              })
-            },
-            "undim.edges": {
-              actions: assign({
-                xyedges: ({ context }) => {
-                  return context.xyedges.map(Base.setDimmed(false));
-                }
-              })
-            },
-            "xyflow.selectionChange": {
-              actions: enqueueActions(({ event, context, enqueue }) => {
-                if (event.edges.length === 0 && context.xyedges.some((e) => e.data.dimmed) && !context.xyedges.some((e) => e.data.hovered)) {
-                  enqueue.raise({ type: "undim.edges" });
-                }
-              })
-            }
-          }
-        },
-        "layouting": {
-          invoke: {
-            id: "layouter",
-            src: "layouter",
-            input: ({ context }) => {
-              return {
-                subjectId: context.subject,
-                navigateFromNode: context.navigateFromNode,
-                xyflow: nonNullable(context.xyflow),
-                xystore: nonNullable(context.xystore),
-                update: nonNullable(context.layouted)
-              };
-            },
-            onDone: {
-              target: "idle",
-              actions: enqueueActions(({ enqueue, event }) => {
-                enqueue.assign({
-                  xynodes: event.output.xynodes,
-                  xyedges: event.output.xyedges,
-                  navigateFromNode: null
-                });
-                enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 50 });
-                for (let i = 1; i < 8; i++) {
-                  enqueue.raise({ type: "xyflow.updateNodeInternals" }, { delay: 120 + i * 75 });
-                }
-              })
-            }
-          },
-          on: {
-            "update.xydata": {
-              actions: assign({
-                xynodes: ({ event }) => event.xynodes,
-                xyedges: ({ event }) => event.xyedges
-              })
-            },
-            "xyflow.applyEdgeChanges": {
-              // actions: log('layouting: ignore xyflow.applyEdgeChanges'),
-            },
-            "xyflow.applyNodeChanges": {
-              // actions: log('layouting: ignore xyflow.applyNodeChanges'),
-            }
-          }
-        }
-      }
-    },
-    closed: {
-      id: "closed",
-      type: "final",
-      entry: dispose()
-    }
-  },
-  exit: dispose()
-});
-const relationshipsBrowserLogic = _relationshipsBrowserLogic;
-
-export { layouter, relationshipsBrowserLogic };
+//#endregion
+export { relationshipsBrowserLogic };