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/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { SvelteFlowProvider } from '@xyflow/svelte';
+
+	import Flow from './Flow.svelte';
+</script>
+
+<SvelteFlowProvider>
+	<Flow />
+</SvelteFlowProvider>

examples/svelte/src/routes/usesvelteflow/Flow.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap } from '@xyflow/svelte';
+
+	import Sidebar from './Sidebar.svelte';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	const nodes = writable([
+		{
+			id: '1',
+			type: 'input',
+			data: { label: 'Input Node' },
+			position: { x: 150, y: 5 }
+		},
+		{
+			id: '2',
+			type: 'default',
+			data: { label: 'Node' },
+			position: { x: 0, y: 150 }
+		},
+		{
+			id: '3',
+			type: 'output',
+			data: { label: 'Output Node' },
+			position: { x: 300, y: 150 }
+		}
+	]);
+
+	const edges = writable([
+		{
+			id: '1-2',
+			type: 'default',
+			source: '1',
+			target: '2',
+			label: 'Edge Text'
+		},
+		{
+			id: '1-3',
+			type: 'smoothstep',
+			source: '1',
+			target: '3'
+		}
+	]);
+</script>
+
+<main>
+	<SvelteFlow {nodes} {edges} fitView>
+		<Controls />
+		<Background variant={BackgroundVariant.Dots} />
+		<MiniMap />
+	</SvelteFlow>
+	<Sidebar />
+</main>
+
+<style>
+	main {
+		height: 100%;
+		display: flex;
+	}
+</style>

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>