remove fluid-dnd drag and drop

package.json

@@ -60,6 +60,7 @@
   "dependencies": {
     "@tanstack/svelte-query": "^5.87.1",
     "bits-ui": "^2.9.6",
+    "fluid-dnd": "^2.6.2",
     "modern-normalize": "^3.0.1",
     "zod": "^4.1.5"
   }

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       bits-ui:
         specifier: ^2.9.6
         version: 2.9.6(@internationalized/date@3.9.0)(svelte@5.38.7)
+      fluid-dnd:
+        specifier: ^2.6.2
+        version: 2.6.2
       modern-normalize:
         specifier: ^3.0.1
         version: 3.0.1
@@ -1338,6 +1341,9 @@ packages:
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
+  fluid-dnd@2.6.2:
+    resolution: {integrity: sha512-NB11wa6QmKkelLi/PrV95nfXM0oA3lrynQD91VrLbhk2BEfH7PLTUMjqlSkavu+fqPlPVCL8HFhYsfv9GVqd7Q==}
+
   fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -3332,6 +3338,8 @@ snapshots:
 
   flatted@3.3.3: {}
 
+  fluid-dnd@2.6.2: {}
+
   fsevents@2.3.2:
     optional: true
 

src/lib/components/grids/CharacterGrid.svelte

@@ -2,6 +2,8 @@
 
 <script lang="ts">
 	import type { GridCharacter } from '$lib/types/api/party'
+	import { getContext } from 'svelte'
+	import type { PartyContext } from '$lib/services/party.service'
 
 	interface Props {
 		characters?: GridCharacter[]
@@ -9,22 +11,26 @@
 		partyElement?: number | null | undefined
 	}
 
-  let {
+	let { characters = [], mainWeaponElement = undefined, partyElement = undefined }: Props = $props()
-    characters = [],
-    mainWeaponElement = undefined,
-    partyElement = undefined
-  }: Props = $props()
 
 	import CharacterUnit from '$lib/components/units/CharacterUnit.svelte'
 
-  let grid = $derived(Array.from({ length: 5 }, (_, i) => characters.find((c) => c.position === i)))
+	const ctx = getContext<PartyContext>('party')
 </script>
 
 <div class="wrapper">
-  <ul class="characters" aria-label="Character Grid">
+	<ul
-    {#each grid as c, i}
+		class="characters"
-      <li aria-label={`Character slot ${i}`}>
+		aria-label="Character Grid"
-        <CharacterUnit item={c} position={i} {mainWeaponElement} {partyElement} />
+	>
+		{#each Array(5) as _, i}
+			{@const character = characters.find((c) => c.position === i)}
+			<li
+				aria-label={`Character slot ${i}`}
+				class:main-character={i === 0}
+				class:Empty={!character}
+			>
+				<CharacterUnit item={character} position={i} {mainWeaponElement} {partyElement} />
 			</li>
 		{/each}
 	</ul>
@@ -40,7 +46,9 @@
 		grid-template-columns: repeat(5, minmax(0, 1fr));
 		gap: $unit-3x;
 
-    & > li { list-style: none; }
+		& > li {
+			list-style: none;
+		}
 	}
 
 	.unit {
@@ -51,7 +59,13 @@
 		gap: $unit;
 	}
 
-  .image { width: 100%; height: auto; border: 1px solid $grey-75; border-radius: 8px; display: block; }
+	.image {
+		width: 100%;
+		height: auto;
+		border: 1px solid $grey-75;
+		border-radius: 8px;
+		display: block;
+	}
 
 	.name {
 		font-size: $font-small;

src/lib/components/grids/SummonGrid.svelte

@@ -2,6 +2,8 @@
 
 <script lang="ts">
 	import type { GridSummon } from '$lib/types/api/party'
+	import { getContext } from 'svelte'
+	import type { PartyContext } from '$lib/services/party.service'
 
 	interface Props {
 		summons?: GridSummon[]
@@ -12,9 +14,10 @@
 	import SummonUnit from '$lib/components/units/SummonUnit.svelte'
 	import ExtraSummons from '$lib/components/extra/ExtraSummonsGrid.svelte'
 
+	const ctx = getContext<PartyContext>('party')
+
 	let main = $derived(summons.find((s) => s.main || s.position === -1))
 	let friend = $derived(summons.find((s) => s.friend || s.position === 6))
-  let grid = $derived(Array.from({ length: 4 }, (_, i) => summons.find((s) => s.position === i)))
 </script>
 
 <div class="wrapper">
@@ -27,9 +30,13 @@
 		<section>
 			<div class="label">Summons</div>
 			<ul class="summons">
-        {#each grid as s, i}
+				{#each Array(4) as _, i}
-          <li aria-label={`Summon slot ${i}`}>
+					{@const summon = summons.find((s) => s.position === i)}
-            <SummonUnit item={s} position={i} />
+					<li
+						aria-label={`Summon slot ${i}`}
+						class:Empty={!summon}
+					>
+						<SummonUnit item={summon} position={i} />
 					</li>
 				{/each}
 			</ul>
@@ -40,7 +47,7 @@
 			<SummonUnit item={friend} position={6} />
 		</div>
 	</div>
-  <ExtraSummons summons={summons} offset={4} />
+	<ExtraSummons {summons} offset={4} />
 </div>
 
 <style lang="scss">
@@ -110,7 +117,13 @@
 		gap: $unit;
 	}
 
-  .image { width: 100%; height: auto; border: 1px solid $grey-75; border-radius: 8px; display: block; }
+	.image {
+		width: 100%;
+		height: auto;
+		border: 1px solid $grey-75;
+		border-radius: 8px;
+		display: block;
+	}
 
 	.name {
 		font-size: $font-small;

src/lib/components/grids/WeaponGrid.svelte

@@ -2,6 +2,8 @@
 
 <script lang="ts">
 	import type { GridWeapon } from '$lib/types/api/party'
+	import { getContext } from 'svelte'
+	import type { PartyContext } from '$lib/services/party.service'
 
 	interface Props {
 		weapons?: GridWeapon[]
@@ -21,8 +23,9 @@
 	import ExtraWeapons from '$lib/components/extra/ExtraWeaponsGrid.svelte'
 	import Guidebooks from '$lib/components/extra/GuidebooksGrid.svelte'
 
+	const ctx = getContext<PartyContext>('party')
+
 	let mainhand = $derived(weapons.find((w) => (w as any).mainhand || w.position === -1))
-  let grid = $derived(Array.from({ length: 9 }, (_, i) => weapons.find((w) => w.position === i)))
 </script>
 
 <div class="wrapper">
@@ -32,15 +35,20 @@
 		</div>
 
 		<ul class="weapons" aria-label="Weapon Grid">
-      {#each grid as w, i}
+			{#each Array(9) as _, i}
-        <li class:Empty={!w} aria-label={`Weapon slot ${i}`}>
+				{@const weapon = weapons.find((w) => w.position === i)}
-          <WeaponUnit item={w} {i} position={i} />
+				<li
+					aria-label={weapon ? `Weapon ${i}` : `Empty slot ${i}`}
+					data-index={i}
+					class={weapon ? '' : 'Empty'}
+				>
+					<WeaponUnit item={weapon} position={i} />
 				</li>
 			{/each}
 		</ul>
 	</div>
 	{#if raidExtra}
-    <ExtraWeapons weapons={weapons} offset={9} />
+		<ExtraWeapons {weapons} offset={9} />
 	{/if}
 	{#if showGuidebooks}
 		<Guidebooks {guidebooks} />
@@ -85,10 +93,7 @@
 					3,
 					minmax(0, 1fr)
 				); /* create 3 columns, each taking up 1 fraction */
-        grid-template-rows: repeat(
+				grid-template-rows: repeat(3, 1fr); /* create 3 rows, each taking up 1 fraction */
-          3,
-          1fr
-        ); /* create 3 rows, each taking up 1 fraction */
 				gap: $unit-3x;
 
 				@include breakpoint(tablet) {
@@ -114,7 +119,13 @@
 		gap: $unit;
 	}
 
-  .image { width: 100%; height: auto; border: 1px solid $grey-75; border-radius: 8px; display: block; }
+	.image {
+		width: 100%;
+		height: auto;
+		border: 1px solid $grey-75;
+		border-radius: 8px;
+		display: block;
+	}
 
 	.name {
 		font-size: $font-small;