structure edit done

src/lib/components/ShipEdit/Structure.svelte

@@ -1,5 +1,7 @@
 <Section label="structure">
   <Hull {...hull} />
+  <Screens {...screens} />
+  <Armor {...armor} />
   <Cargo {...cargo} />
   <Streamlining {...streamlining} />
 </Section>
@@ -9,8 +11,12 @@
   import Streamlining from "./Structure/Streamlining.svelte";
   import Cargo from "./Structure/Cargo.svelte";
   import Hull from "./Structure/Hull.svelte";
+  import Screens from "./Structure/Screens.svelte";
+  import Armor from "./Structure/Armor.svelte";
 
   export let streamlining = {};
   export let cargo = {};
   export let hull = {};
+  export let screens = {};
+  export let armor = {};
 </script>

src/lib/components/ShipEdit/Structure/Armor.svelte

@@ -15,9 +15,9 @@
 </ShipItem>
 
 <script>
-import { getContext } from 'svelte';
+  import { getContext } from "svelte";
-  import ShipItem from "$lib/components/ShipItem/index.svelte";
+  import ShipItem from "$lib/components/ShipItem.svelte";
-  import Field from "$lib/components/Field/index.svelte";
+  import Field from "$lib/components/Field.svelte";
   import Layer from "./Armor/Layer.svelte";
 
   export let layers = [];
@@ -25,9 +25,9 @@ import { getContext } from 'svelte';
 
   let nbr_layers = layers.length;
 
-const { dispatch } = getContext('ship');
+  const api = getContext("api");
 
-$: dispatch.setArmorLayers(nbr_layers);
+  $: api.dispatch.setNbrArmorLayers(nbr_layers);
 </script>
 
 <style>

src/lib/components/ShipEdit/Structure/Armor/Layer.svelte

@@ -5,14 +5,14 @@
 <script>
   import { getContext } from "svelte";
 
-  import Field from "$lib/components/Field/index.svelte";
+  import Field from "$lib/components/Field.svelte";
 
   export let layer = 1;
   export let rating = 0;
 
-  const ship = getContext("ship");
+  export let api = getContext("api");
 
-  $: ship.dispatch.setArmorRating({ layer, rating });
+  $: api?.dispatch?.setArmorRating?.(layer, rating);
 </script>
 
 <style>

src/lib/components/ShipEdit/Structure/Screens.svelte

@@ -1,11 +1,11 @@
 <ShipItem {...reqs}>
   <div>
     <Field label="screens">
-      <input class='short' type="number" bind:value={standard} min="0" />
+      <input class="short" type="number" bind:value={standard} min="0" />
     </Field>
 
     <Field label="advanced screens">
-      <input class='short' type="number" bind:value={advanced} min="0" />
+      <input class="short" type="number" bind:value={advanced} min="0" />
     </Field>
   </div>
 </ShipItem>
@@ -13,17 +13,17 @@
 <script>
   import { getContext } from "svelte";
 
-  import Section from "$lib/components/Section/index.svelte";
+  import Section from "$lib/components/Section.svelte";
-  import Field from "$lib/components/Field/index.svelte";
+  import Field from "$lib/components/Field.svelte";
-  import ShipItem from "$lib/components/ShipItem/index.svelte";
+  import ShipItem from "$lib/components/ShipItem.svelte";
 
   export let reqs = {};
   export let standard = 0;
   export let advanced = 0;
 
-  const ship = getContext('ship');
+  const api = getContext("api");
 
-  $: ship.dispatch.setScreens({ standard, advanced });
+  $: api.dispatch?.setScreens?.({ standard, advanced });
 </script>
 
 <style>