fix err

src/lib/components/Piclets/AddToRosterDialog.svelte

@@ -55,7 +55,7 @@
               onclick={() => handleAddToRoster(piclet)}
               disabled={isAdding}
             >
-              <PicletCard instance={piclet} size={100} />
+              <PicletCard piclet={piclet} size={100} />
             </button>
           {/each}
         </div>

src/lib/components/Piclets/DraggablePicletCard.svelte

@@ -52,7 +52,7 @@
   role="button"
   tabindex="0"
 >
-  <PicletCard {instance} {size} {onClick} />
+  <PicletCard piclet={instance} {size} {onClick} />
 </div>
 
 <style>

src/lib/components/Piclets/PicletCard.svelte

@@ -4,25 +4,25 @@
   import { picletInstanceToBattleDefinition } from '$lib/utils/battleConversion';
   
   interface Props {
-    instance: PicletInstance;
+    piclet: PicletInstance;
     size?: number;
     onClick?: () => void;
   }
   
-  let { instance, size = 100, onClick }: Props = $props();
+  let { piclet, size = 100, onClick }: Props = $props();
   
-  const hpPercentage = $derived(instance.currentHp / instance.maxHp);
+  const hpPercentage = $derived(piclet.currentHp / piclet.maxHp);
   const hpColor = $derived(
     hpPercentage > 0.5 ? '#34c759' : 
     hpPercentage > 0.25 ? '#ffcc00' : 
     '#ff3b30'
   );
   
-  const typeColor = $derived(TYPE_DATA[instance.primaryType].color);
+  const typeColor = $derived(TYPE_DATA[piclet.primaryType].color);
   const softTypeColor = $derived(`${typeColor}20`); // Add 20% opacity for soft background
   
   // Get battle definition for enhanced ability info
-  const battleDefinition = $derived(picletInstanceToBattleDefinition(instance));
+  const battleDefinition = $derived(picletInstanceToBattleDefinition(piclet));
   const ability = $derived(battleDefinition.specialAbility);
 </script>
 
@@ -34,20 +34,20 @@
 >
   <div class="image-container">
     <img 
-      src={instance.imageData || instance.imageUrl} 
-      alt={instance.nickname || 'Piclet'}
+      src={piclet.imageData || piclet.imageUrl} 
+      alt={piclet.nickname || 'Piclet'}
       class="piclet-image"
       style="width: {size * 0.8}px; height: {size * 0.8}px;"
     />
     <div class="level-badge">
-      Lv.{instance.level}
+      Lv.{piclet.level}
     </div>
   </div>
   
   <div class="details-section">
-    <p class="nickname">{instance.nickname || 'Unknown'}</p>
+    <p class="nickname">{piclet.nickname || 'Unknown'}</p>
     <div class="hp-section">
-      <span class="hp-text">HP: {instance.currentHp}/{instance.maxHp}</span>
+      <span class="hp-text">HP: {piclet.currentHp}/{piclet.maxHp}</span>
       <div class="hp-bar">
         <div 
           class="hp-fill"