chore(svelte-examples): pull out of lib package (#3363)

* chore(svelte-examples): pull out of lib package

* chore(svelte-examples): cleanup

* chore(examples): add readme files

examples/svelte/src/routes/usesvelteflow/Sidebar.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { useSvelteFlow } from '@xyflow/svelte';
+
+	const {
+		zoomIn,
+		zoomOut,
+		setZoom,
+		fitView,
+		setCenter,
+		setViewport,
+		getViewport,
+		viewport,
+		nodes
+	} = useSvelteFlow();
+</script>
+
+<aside>
+	<div class="label">Functions:</div>
+	<button on:click={() => zoomIn()}>zoom in</button>
+	<button on:click={() => zoomOut({ duration: 1000 })}>zoom out transition</button>
+	<button on:click={() => setZoom(2)}>set zoom</button>
+	<button on:click={() => fitView()}>fitView</button>
+	<button on:click={() => setCenter(0, 0)}>setCenter 0, 0</button>
+	<button on:click={() => setViewport({ x: 100, y: 100, zoom: 2 })}>setViewport</button>
+	<button on:click={() => console.log(getViewport())}>getViewport</button>
+
+	<div class="label">Nodes:</div>
+	{#each $nodes as node (node.id)}
+		<div>id: {node.id} | x: {node.position.x.toFixed(1)} y: {node.position.y.toFixed(1)}</div>
+	{/each}
+
+	<div class="label">Viewport:</div>
+	<div>
+		x: {$viewport.x.toFixed(1)} y: {$viewport.y.toFixed(1)} zoom: {$viewport.zoom.toFixed(1)}
+	</div>
+</aside>
+
+<style>
+	.label {
+		font-weight: 700;
+		margin: 0.5rem 0 0.25rem 0;
+	}
+
+	aside {
+		width: 20vw;
+		background: #f4f4f4;
+		padding: 0.4rem 0.8rem;
+		font-size: 12px;
+	}
+
+	button {
+		display: block;
+		margin-bottom: 0.5rem;
+		font-size: 12px;
+	}
+</style>