weird problem with spreads?

src/lib/components/App.svelte

@@ -10,12 +10,13 @@
     <JsonOutput />
 </div>
 <div class:hide={activeTab !== 'print'}>
-    <PrintOutput />
+    <PrintOutput ship={$state}/>
 </div>
 
 </main>
 
 <script>
+import { getContext } from 'svelte';
     import { Modal, Card, Nav } from "svelte-chota";
 
     import Ribbon from "./Ribbon.svelte";
@@ -27,6 +28,8 @@
 
     let activeTab = 'editor';
     $: console.log(activeTab);
+
+    const {state} = getContext('ship');
 </script>
 
 <style>

src/lib/components/Output/Print/Identification/index.svelte

@@ -3,11 +3,15 @@
 </h1>
 
 <div class="details">
-    <h2>{shipClass}-class, {shipType}</h2>
+    <h2>
+        {#if shipClass}
+        {shipClass}-class,
+{/if}
+        {shipType}</h2>
     <div class="reqs">
-        <Cost cost={reqs.cost} />
+        <Cost cost={cost} />
         &nbsp;
-        <Mass mass={reqs.mass} />
+        <Mass mass={mass} />
     </div>
 </div>
 
@@ -17,7 +21,8 @@
 
     export let shipClass;
     export let shipType;
-    export let reqs = {};
+    export let cost = 0;
+    export let mass = 0;
 </script>
 
 <style>

src/lib/components/Output/Print/index.svelte

@@ -1,7 +1,9 @@
 <div class="print-output">
     <Identification
-        {...ship.identification}
-        reqs={ship.reqs}
+        shipClass={ship.identification.shipClass}
+        shipType={ship.identification.shipType}
+        cost={ship.reqs?.cost}
+        mass={ship.reqs?.mass}
     />
 
     <div class="section-2">