add multiple containers

README.md

@@ -5,14 +5,14 @@ A lightweight drag and drop library for Svelte 5 applications. Built with TypeSc
 ## Installation
 
 ```bash
-npm install @thisux/sveltednd
+npm i @thisux/sveltednd@0.0.13
 ```
 
 ## Quick Start
 
-```typescript
+````typescript
+<script lang="ts">
 import { draggable, droppable, type DragDropState } from '@thisux/sveltednd';
-import '@thisux/sveltednd/styles.css'; // optional
 
 // Create a list of items
 let items = $state(['Item 1', 'Item 2', 'Item 3']);
@@ -26,7 +26,7 @@ function handleDrop(state: DragDropState<{ id: string }>) {
 	items = items.filter((item) => item !== draggedItem);
 	items = [...items, draggedItem];
 }
-```
+</script>
 
 ```svelte
 <!-- Make a droppable container -->
@@ -38,7 +38,7 @@ function handleDrop(state: DragDropState<{ id: string }>) {
 		</div>
 	{/each}
 </div>
-```
+````
 
 ## Core Concepts
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@thisux/sveltednd",
-	"version": "0.0.12",
+	"version": "0.0.13",
 	"private": false,
 	"description": "A lightweight, flexible drag and drop library for Svelte 5 applications.",
 	"author": "sanju <[email protected]>",
@@ -73,5 +73,8 @@
 		"typescript-eslint": "^8.0.0",
 		"vite": "^5.0.11",
 		"vitest": "^2.0.4"
+	},
+	"dependencies": {
+		"@thisux/sveltednd": "^0.0.12"
 	}
 }

src/routes/+layout.svelte

@@ -9,7 +9,8 @@
 		{ path: '/simple-list', title: 'Simple List' },
 		{ path: '/horizontal-scroll', title: 'Horizontal Scroll' },
 		{ path: '/grid-sort', title: 'Grid Sort' },
-		{ path: '/nested', title: 'Nested Containers' }
+		{ path: '/nested', title: 'Nested Containers' },
+		{ path: '/multiple', title: 'Multiple' }
 	];
 
 	const cn = (...classes: string[]) => classes.filter(Boolean).join(' ');