fixed z-index ordering issues

examples/svelte/package.json

@@ -13,19 +13,19 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^6.0.0",
-		"@sveltejs/kit": "^2.20.5",
-		"@typescript-eslint/eslint-plugin": "^8.29.1",
-		"@typescript-eslint/parser": "^8.29.1",
+		"@sveltejs/kit": "^2.20.7",
+		"@typescript-eslint/eslint-plugin": "^8.30.1",
+		"@typescript-eslint/parser": "^8.30.1",
 		"eslint": "^9.24.0",
 		"eslint-config-prettier": "^10.1.2",
 		"eslint-plugin-svelte": "^3.5.1",
 		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.3.3",
-		"svelte": "^5.26.2",
+		"svelte": "^5.27.0",
 		"svelte-check": "^4.1.6",
 		"tslib": "^2.8.1",
 		"typescript": "^5.8.3",
-		"vite": "^6.2.6"
+		"vite": "^6.3.0"
 	},
 	"type": "module",
 	"dependencies": {

examples/svelte/src/routes/examples/overview/Flow.svelte

@@ -155,22 +155,7 @@
 	});
 </script>
 
-<SvelteFlow
-	bind:nodes
-	bind:edges
-	{nodeTypes}
-	{edgeTypes}
-	fitView
-	fitViewOptions={{
-		padding: 0.1,
-		nodes: [{ id: '1' }, { id: '2' }, { id: '3' }]
-	}}
-	minZoom={0}
-	maxZoom={Infinity}
-	selectionMode={SelectionMode.Full}
-	initialViewport={{ x: 100, y: 100, zoom: 2 }}
-	snapGrid={[25, 25]}
-	oninit={() => console.log('on init')}
+<!-- oninit={() => console.log('on init')}
 	onnodeclick={(event) => console.log('on node click', event)}
 	onnodepointerenter={(event) => console.log('on node enter', event)}
 	onnodepointerleave={(event) => console.log('on node leave', event)}
@@ -207,7 +192,23 @@
 		console.log('on before delete', nodes, edges);
 		const deleteElements = confirm('Are you sure you want to delete the selected elements?');
 		return deleteElements;
+	}} -->
+
+<SvelteFlow
+	bind:nodes
+	bind:edges
+	{nodeTypes}
+	{edgeTypes}
+	fitView
+	fitViewOptions={{
+		padding: 0.1,
+		nodes: [{ id: '1' }, { id: '2' }, { id: '3' }]
 	}}
+	minZoom={0}
+	maxZoom={Infinity}
+	selectionMode={SelectionMode.Full}
+	initialViewport={{ x: 100, y: 100, zoom: 2 }}
+	snapGrid={[25, 25]}
 	autoPanOnConnect
 	autoPanOnNodeDrag
 	connectionMode={ConnectionMode.Strict}
@@ -222,7 +223,7 @@
 		>
 	</Controls>
 	<Background variant={BackgroundVariant.Dots} />
-	<MiniMap bgColor={'red'} />
+	<MiniMap />
 	<Panel position="top-right">
 		<button onclick={moveNode}>update node pos</button>
 		<button onclick={changeEdgeType}>update edge type</button>
@@ -239,11 +240,11 @@
 	}
 
 	:root {
-		--background-color: #ffffdd;
+		/* --background-color: #ffffdd; */
 		--background-pattern-color: #5050ff;
 
-		--minimap-background-color: #f5f6f7;
-		--minimap-mask-color: rgb(255, 255, 240, 0.6);
+		--xy-minimap-background-color: red;
+		--xy-minimap-mask-color: rgb(255, 255, 240, 0.6);
 
 		--controls-button-background-color: #ddd;
 		--controls-button-background-color-hover: #ccc;