diff --git a/.storybook/main.js b/.storybook/main.js
new file mode 100644
index 0000000..144e24b
--- /dev/null
+++ b/.storybook/main.js
@@ -0,0 +1,34 @@
+const path = require("path");
+const preprocess = require("svelte-preprocess");
+
+module.exports = {
+  staticDirs: ["../static", "../pictures"],
+  stories: [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.svelte",
+    "../src/**/stories.svelte",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-svelte-csf",
+  ],
+  framework: "@storybook/svelte",
+  svelteOptions: {
+    preprocess: preprocess(),
+  },
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve?.alias,
+          $app: path.resolve("./fake/app"),
+          "\\$lib": path.resolve(__dirname, "../src/lib/"),
+          $lib: path.resolve(__dirname, "../src/lib/"),
+        },
+      },
+    };
+  },
+};
diff --git a/.storybook/package.json b/.storybook/package.json
new file mode 100644
index 0000000..5bbefff
--- /dev/null
+++ b/.storybook/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
new file mode 100644
index 0000000..fe480ff
--- /dev/null
+++ b/.storybook/preview.js
@@ -0,0 +1,11 @@
+import "$lib/style/index.js";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
diff --git a/.vitebook/App.svelte b/.vitebook/App.svelte
index 55e6f11..ae1b2b7 100644
--- a/.vitebook/App.svelte
+++ b/.vitebook/App.svelte
@@ -1,5 +1,6 @@
+<svelte:component this={component} />
+
 <script>
+  import "$lib/style/index.js";
   export let component;
 </script>
-
-<svelte:component this={component} />
diff --git a/.vitebook/config.js b/.vitebook/config.js
index a84394a..7bc7675 100644
--- a/.vitebook/config.js
+++ b/.vitebook/config.js
@@ -1,30 +1,30 @@
-import { svelte } from '@sveltejs/vite-plugin-svelte';
-import { clientPlugin, defineConfig } from '@vitebook/client/node';
-import { defaultThemePlugin } from '@vitebook/theme-default/node';
-import preprocess from 'svelte-preprocess';
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { clientPlugin, defineConfig } from "@vitebook/client/node";
+import { defaultThemePlugin } from "@vitebook/theme-default/node";
+import preprocess from "svelte-preprocess";
 
 export default defineConfig({
-  include: ['src/**/*.story.svelte'],
+  include: ["src/**/*.story.svelte"],
   alias: {
-    $app: '/node_modules/@sveltejs/kit/assets/app',
-    $lib: '/src/lib',
+    $app: "/node_modules/@sveltejs/kit/assets/app",
+    $lib: "/src/lib",
   },
   plugins: [
-    clientPlugin({ appFile: 'App.svelte' }),
+    clientPlugin({ appFile: "App.svelte" }),
     defaultThemePlugin(),
     svelte({
       compilerOptions: {
-        hydratable: true
+        hydratable: true,
       },
-      extensions: ['.svelte'],
+      extensions: [".svelte"],
       // Consult https://github.com/sveltejs/svelte-preprocess for more information
       // about preprocessors.
       preprocess: preprocess(),
     }),
   ],
   site: {
-    title: '',
-    description: '',
+    title: "",
+    description: "",
     /** @type {(import('@vitebook/theme-default/node').DefaultThemeConfig} */
     theme: {},
   },
diff --git a/.vitebook/theme/index.js b/.vitebook/theme/index.js
index 170580c..3986997 100644
--- a/.vitebook/theme/index.js
+++ b/.vitebook/theme/index.js
@@ -1,3 +1,3 @@
-import Theme from '@vitebook/theme-default';
+import Theme from "@vitebook/theme-default";
 
 export default Theme;
diff --git a/package.json b/package.json
index 4517ab0..2a98b5d 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "preview": "svelte-kit preview",
     "lint": "prettier --check . && eslint --ignore-path .gitignore .",
     "format": "prettier --write .",
+    "storybook": "storybook-server",
     "vitebook:dev": "vitebook dev",
     "vitebook:build": "vitebook build",
     "vitebook:preview": "vitebook preview"
@@ -28,14 +29,21 @@
   },
   "type": "module",
   "dependencies": {
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-links": "6.4.19",
+    "@storybook/addon-svelte-csf": "^1.1.0",
+    "@storybook/svelte": "^6.4.19",
     "@sveltejs/adapter-node": "^1.0.0-next.0",
     "@yanick/updeep": "link:/home/yanick/work/javascript/updeep",
     "lodash": "^4.17.21",
     "redux": "^4.1.2",
     "reselect": "^4.1.5",
     "rollup-plugin-analyzer": "^4.0.0",
+    "svelte-knobby": "^0.3.4",
     "ts-action": "^11.0.0",
-    "updux": "link:/home/yanick/work/javascript/updux/"
+    "updux": "link:/home/yanick/work/javascript/updux/",
+    "webpack": "5"
   },
   "prettier": {
     "svelteSortOrder": "options-markup-scripts-styles",
diff --git a/src/components/Carrier/stories.js b/src/components/Carrier/stories.js
deleted file mode 100644
index db72155..0000000
--- a/src/components/Carrier/stories.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import Carrier from './index.svelte';
-
-export default {
-    title: 'Carrier',
-};
-
-export const basic = () => ({
-    Component: Carrier,
-    props: {
-        bays: 3,
-        squadrons: [
-            { id: 1, type: "standard", ftl: false, nbr_fighters: 6 },
-            { id: 2, type: "fast", ftl: false, nbr_fighters: 6 },
-            { id: 3, type: "none", ftl: false, nbr_fighters: 6 },
-        ],
-        ship_change: action('ship_change'),
-    },
-})
diff --git a/src/components/Cost.story.svelte b/src/components/Cost.story.svelte
deleted file mode 100644
index bdbd384..0000000
--- a/src/components/Cost.story.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<Cost cost={12}/>
-
-<script>
-import Cost from './Cost.svelte';
-</script>
diff --git a/src/components/CostMass.svelte b/src/components/CostMass.svelte
deleted file mode 100644
index 425263a..0000000
--- a/src/components/CostMass.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="mass">{ mass }</div>
-<div class="cost">{ cost }</div>
-
-<script>
-  export let mass;
-  export let cost;
-
-</script>
-
-<style>
-  .cost { grid-column: 3; }
-  .mass { grid-column: 2; }
-  img {
-    width: 0.75em;
-  }
-  .cost:after { content: '\00A4'; margin-left: 0.5em; }
-  .mass:after { content: url("/mass.svg"); width: 0.75em; display:
-  inline-block; margin-left: 0.5em; }
-
-
-</style>
diff --git a/src/components/Engine/index.svelte b/src/components/Engine/index.svelte
deleted file mode 100644
index eb02c32..0000000
--- a/src/components/Engine/index.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<ShipItem {cost} {mass}>
-
-<div>
-<Field label="thrust rating">
-    <input type="number" bind:value={ rating }
-        min="0" max="20" step="1" />
-</Field>
-
-<label><input type="checkbox" bind:checked={advanced} /> advanced</label>
-</div>
-
-</ShipItem>
-
-
-<script>
-    import { createEventDispatcher } from 'svelte';
-
-  import Field from '$lib/components/Field/index.svelte';
-  import ShipItem from '$lib/components/ShipItem/index.svelte';
-
-    export let cost;
-    export let mass;
-    export let advanced = false;
-    export let rating = 0;
-
-    const dispatch = createEventDispatcher();
-
-console.log(advanced);
-    $: dispatch( 'change_engine', { rating, advanced } );
-
-</script>
-
-<style>
-div {
-    display: flex;
-    align-items: end;
-}
-label { margin-left: 2em; }
-  input[type="number"] { width: 5em; }
-</style>
diff --git a/src/components/Field/index.svelte b/src/components/Field/index.svelte
deleted file mode 100644
index 0a36d19..0000000
--- a/src/components/Field/index.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<div>
-{#if label}
-<label>{label}</label>
-{/if}
-<slot>
-<input type="text" {placeholder} {value} on:change />
-</slot>
-</div>
-
-<script>
-    export let label = "";
-    export let value = "";
-    export let placeholder;
-</script>
-
-<style>
-  div > :global(*) {
-    margin-left: 1em;
-  }
-  div > label {
-    margin-left: 0em;
-  }
-label {
-    font-size: var(--font-scale-8);
-    font-weight: lighter;
-    font-family: Dosis;
-    color:  var(--indigo-dye);
-}
-</style>
diff --git a/src/components/Field/stories.js b/src/components/Field/stories.js
deleted file mode 100644
index 313c746..0000000
--- a/src/components/Field/stories.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Component from './index.svelte';
-import BasicStory from './BasicStory.svelte';
-
-import '../../../public/global.css';
-
-export default {
-    title: 'Field'
-};
-
-export const basic = () => ({
-    Component: BasicStory,
-});
diff --git a/src/components/Firecons.svelte b/src/components/Firecons.svelte
deleted file mode 100644
index 3c6ef71..0000000
--- a/src/components/Firecons.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<ShipItem {cost} {mass}>
-    <Field label="firecons">
-    <input type="number" class="short" bind:value={nbr} />
-    </Field>
-</ShipItem>
-
-<script>
-import { createEventDispatcher } from 'svelte';
-  import ShipItem from './ShipItem/index.svelte';
-  import Field from './Field/index.svelte';
-
-    export let nbr, cost, mass = (0,0,0);
-
-    const dispatch = createEventDispatcher();
-    $: dispatch( 'change_firecons', nbr);
-
-</script>
-
-<style>
-</style>
diff --git a/src/components/Ftl/index.svelte b/src/components/Ftl/index.svelte
deleted file mode 100644
index c84f6e2..0000000
--- a/src/components/Ftl/index.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-    import { createEventDispatcher } from 'svelte';
-
-    import ShipItem from '../ShipItem/index.svelte';
-    import Field from '../Field/index.svelte';
-
-    export let type = 'none';
-    export let cost = 0;
-    export let mass = 0;
-
-    const dispatch = createEventDispatcher();
-
-    const change = () => dispatch( 'change_ftl', type );
-
-    const types = [ 'none', 'standard', 'advanced' ];
-
-
-</script>
-
-<ShipItem {mass} {cost}>
-    <Field label="FTL drive">
-
-    {#each types as t (t)}
-        <label><input type="radio" bind:group={type} value={t} 
-            on:change={change} /> {t} </label>
-    {/each}
-    </Field>
-</ShipItem>
-
-<style>
-label {
-    display: inline;
-    margin-right: 1em;
-}
-</style>
diff --git a/src/components/Ftl/stories.js b/src/components/Ftl/stories.js
deleted file mode 100644
index 72af859..0000000
--- a/src/components/Ftl/stories.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-    title: 'FTL Drive'
-};
-
-import Component from '.';
-import shipStore from '../../stores/ship.js';
-
-export const basic = () => ({
-    Component,
-    props: {
-        ship: shipStore()
-    }
-});
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
deleted file mode 100644
index 657fc5c..0000000
--- a/src/components/Header.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<header>
-  <h1>The Docks</h1>
-  <h2>a <a
-        href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship builder</h2>
-  </header>
-
-  <style>
-
-    header {
-    display: flex;
-    align-items: baseline;
-      width: var(--main-width);
-      margin-left: auto;
-      margin-right: auto;
-    }
-  h1, h2 {
-    font-family: Faktos;
-    padding: 0px;
-    margin: 0px;
-  }
-
-  h2 {
-    text-align: right;
-    flex: 1;
-    padding-left: 2em;
-    font-size: var(--font-scale-12);
-  }
-  </style>
diff --git a/src/components/Hull/Armour/Layer/index.svelte b/src/components/Hull/Armour/Layer/index.svelte
deleted file mode 100644
index 1d30b50..0000000
--- a/src/components/Hull/Armour/Layer/index.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<Field label={ `layer ${layer}` }>
-    <input type="number" min="0" bind:value={rating} />
-</Field>
-
-
-<script>
-    import { getContext} from 'svelte';
-
-    import Field from '$lib/components/Field/index.svelte';
-
-    export let layer = 1;
-    export let rating = 0;
-
-    const ship = getContext('ship');
-
-    $: ship?.dispatch_action( 'set_armour_layer', {layer,rating} );
-
-</script>
-
-<style>
-  input {
-    width: 5em;
-  }
-  </style>
diff --git a/src/components/Hull/Armour/index.svelte b/src/components/Hull/Armour/index.svelte
deleted file mode 100644
index 11b9228..0000000
--- a/src/components/Hull/Armour/index.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<ShipItem {cost} {mass} >
-
-<div>
-
-<div class="nbr_layers">
-<Field label="armour layers">
-    <input type="number" min="0" bind:value={nbr_layers} />
-</Field>
-</div>
-
-<div class="layers">
-    {#each armour as layer ( layer.layer )}
-        <Layer {...layer} on:ship_change/>
-    {/each}
-</div>
-
-
-</div>
-
-</ShipItem>
-
-<script>
-  import { createEventDispatcher} from 'svelte';
-
-    import ShipItem from '$lib/components/ShipItem/index.svelte';
-    import Field from '$lib/components/Field/index.svelte';
-    import Layer from './Layer/index.svelte';
-    import dux from '$lib/dux/structure/armour';
-    import _ from 'lodash';
-
-    export let armour = [];
-    export let cost = 0;
-    export let mass = 0;
-
-    $: cost = _.sum( _.map( armour, 'cost' ) );
-    $: mass = _.sum( _.map( armour, 'mass' ) );
-
-    let nbr_layers = armour.length;
-
-    const dispatch = createEventDispatcher();
-
-    $: dispatch( 'ship_change', dux.actions.set_armour_nbr_layers(nbr_layers) );
-
-</script>
-
-<style>
-    .layers {
-        display: flex;
-
-    }
-
-    input {
-      width: 5em;
-    }
-
-</style>
diff --git a/src/components/Hull/Armour/stories.js b/src/components/Hull/Armour/stories.js
deleted file mode 100644
index e5f1a41..0000000
--- a/src/components/Hull/Armour/stories.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Armour from './index.svelte';
-
-export default {
-    title: "Armour",
-};
-
-export const basic = () => ({
-    Component: Armour,
-    props: {
-        armour: [
-            { layer: 1, rating: 12, cost: 1, mass: 2 },
-            { layer: 2, rating: 12, cost: 1, mass: 2 },
-        ]
-    },
-    on: {
-        ship_change: ({detail}) => console.log(detail)
-    }
-});
diff --git a/src/components/Hull/Screens/index.svelte b/src/components/Hull/Screens/index.svelte
deleted file mode 100644
index ef3c905..0000000
--- a/src/components/Hull/Screens/index.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<ShipItem { cost } { mass }>
-  <div>
-
-  <Field label="screens">
-    <input type="number" bind:value={standard} min="0" />
-  </Field>
-
-  <Field label="advanced screens">
-    <input type="number" bind:value={advanced} min="0" />
-  </Field>
-</div>
-
-</ShipItem>
-
-<script>
-    import { createEventDispatcher } from 'svelte';
-
-  import Section from '$lib/components/Section/index.svelte';
-  import Field from '$lib/components/Field/index.svelte';
-  import ShipItem from '../../ShipItem/index.svelte';
-
-    export let cost = 0;
-    export let mass = 0;
-    export let standard = 0;
-    export let advanced = 0;
-
-    let nbr_regular, nbr_advanced;
-
-    const dispatch = createEventDispatcher();
-
-    $: dispatch( 'set_screens', { standard, advanced } );
-</script>
-
-<style>
-  input {
-    width: 3em;
-  }
-  div {
-    display: flex;
-    gap: 2em;
-  }
-  </style>
diff --git a/src/components/Hull/Streamlining/index.svelte b/src/components/Hull/Streamlining/index.svelte
deleted file mode 100644
index 3dcb9e8..0000000
--- a/src/components/Hull/Streamlining/index.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<ShipItem {cost} {mass}>
-  <Field label="streamlining">
-  <div>
-    <label>
-    <input type="radio" bind:group={type} value="none" />
-    none</label>
-    <label>
-
-    <input type="radio" bind:group={type} value="partial" />
-    partial</label>
-    <label>
-    <input type="radio" bind:group={type} value="full" />
-    full</label>
-    </div>
-  </Field>
-</ShipItem>
-
-  <script>
-  import ShipItem from '$lib/components/ShipItem/index.svelte';
-  import Field from '$lib/components/Field/index.svelte';
-
-  import {getContext } from 'svelte';
-
-  export let type = 'none';
-  export let cost = 0;
-  export let mass = 0;
-  export let ship = getContext('ship');
-
-  $: ship?.dispatch_action( 'set_streamlining', type);
-
-  </script>
-
-  <style>
-  div { display: flex }
-  label {
-    margin-left: 1em;
-  }
-  </style>
diff --git a/src/components/Hull/index.svelte b/src/components/Hull/index.svelte
deleted file mode 100644
index 20d34d4..0000000
--- a/src/components/Hull/index.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<Section label="hull">
-
-<ShipItem {cost} {mass} >
-    <Field label="integrity">
-        <input
-            bind:value={rating}
-            type="number" {min} {max} />
-    </Field>
-</ShipItem>
-
-
-<Screens {...screens} on:set_screens />
-
-<Armour {armour} on:ship_change />
-
-<Cargo {...cargo} on:set_cargo />
-
-<Streamlining {...streamlining} />
-</Section>
-
-<script>
-    import { createEventDispatcher } from 'svelte';
-
-  import Section from '../Section/index.svelte';
-  import Field from '../Field/index.svelte';
-  import ShipItem from '../ShipItem/index.svelte';
-  import Screens from './Screens/index.svelte';
-  import Armour from './Armour/index.svelte';
-  import Cargo from './Cargo/index.svelte';
-  import Streamlining from './Streamlining/index.svelte';
-
-    export let cost, mass, ship_mass, rating, screens, armour = (
-        0, 0, 10, 1, [], []
-    );
-
-  export let cargo = {};
-  export let streamlining = {};
-
-    let min, max;
-  $: min = Math.ceil(ship_mass / 10);
-  $: max = ship_mass;
-
-const dispatch = createEventDispatcher();
-
-    $: dispatch( 'change_hull', { rating } );
-
-</script>
-
-<style>
-  input { width: 5em; }
-</style>
diff --git a/src/components/Output/Print/Hull/Integrity/stories.js b/src/components/Output/Print/Hull/Integrity/stories.js
deleted file mode 100644
index 3d1d9a9..0000000
--- a/src/components/Output/Print/Hull/Integrity/stories.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Component from '.';
-
-export default {
-    title: "printouts/hull/integrity"
-};
-
-export const basic = () => ({
-    Component,
-    props: {
-        ship_mass: 50,
-        rating: 14,
-        advanced: false,
-    }
-});
-
-export const advanced = () => ({
-    Component,
-    props: {
-        ship_mass: 50,
-        rating: 14,
-        advanced: true,
-    }
-});
diff --git a/src/components/Output/Print/MainSystems/stories.js b/src/components/Output/Print/MainSystems/stories.js
deleted file mode 100644
index 2b96e67..0000000
--- a/src/components/Output/Print/MainSystems/stories.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Component from '.';
-
-export default {
-    title: "printouts/main_systems"
-};
-
-export const basic = () => ({
-    Component,
-    props: {
-        ftl: 'standard',
-        engine: 4,
-    }
-})
diff --git a/src/components/Output/Print/Weapons/stories.js b/src/components/Output/Print/Weapons/stories.js
deleted file mode 100644
index c7778df..0000000
--- a/src/components/Output/Print/Weapons/stories.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Component from '.';
-
-export default {
-    title: "printouts/weapons"
-};
-
-export const basic = () => ({
-    Component,
-    props: {
-    "weapons": [
-      {
-        "weapon_type": "submunition",
-        "arcs": [
-          "F"
-        ],
-        "mass": 1,
-        "cost": 3,
-        "id": 1
-      },
-      {
-        "weapon_type": "beam",
-        "weapon_class": "2",
-        "arcs": [
-          "A",
-          "AS",
-          "FS"
-        ],
-        "mass": 2,
-        "cost": 6,
-        "id": 2
-      }, ]
-    }
-})
diff --git a/src/components/Output/Print/index.svelte b/src/components/Output/Print/index.svelte
deleted file mode 100644
index 8b47ed8..0000000
--- a/src/components/Output/Print/index.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<aside class="ship-sheet" transition:fade>
-  <Identification {...ship.general} />
-
-  <Weapons weapons={ship.weaponry.weapons} />
-
-  <div class="section-2">
-  <Hull structure={ship.structure}
-    ship_mass={ship.general.mass} />
-
-  <Systems
-    firecons={ship.weaponry.firecons.nbr}
-    screens={ship.structure.screens}
-  />
-</div>
-
-  <MainSystems
-    ftl={ship.ftl.type}
-    engine={ship.engine.rating}
-  />
-
-</aside>
-
-<script>
-  import _ from 'lodash';
-
-  import Identification from './Identification/index.svelte';
-  import MainSystems from './MainSystems/index.svelte';
-  import Hull from './Hull/index.svelte';
-  import Weapons from './Weapons/index.svelte';
-  import Systems from './Systems/index.svelte';
-
-  export let ship;
-
-    import { fly, fade } from 'svelte/transition';
-
-</script>
-
-<style>
-.ship-sheet {
-  width: 4.25in;
-  height: 5.5in;
-  border: 1px solid black;
-  padding: 1em;
-}
-
-.section-2 {
-  display: flex;
-  align-items: start;
-}
-
-
-
-</style>
diff --git a/src/components/Output/Print/sample.js b/src/components/Output/Print/sample.js
deleted file mode 100644
index 2ecdbf9..0000000
--- a/src/components/Output/Print/sample.js
+++ /dev/null
@@ -1,114 +0,0 @@
-export default {
-  "ftl": {
-    "mass": 0,
-    "cost": 0,
-    "type": "standard"
-  },
-  "engine": {
-    "mass": 40,
-    "cost": 80,
-    "rating": 6,
-    "advanced": false
-  },
-  "general": {
-    "ship_class": "Deviant",
-    "name": "",
-    "ship_type": "Battleship",
-    "mass": 132,
-    "used_mass": 131,
-    "cost": 415
-  },
-  "weaponry": {
-    "firecons": {
-      "nbr": 5,
-      "mass": 5,
-      "cost": 20
-    },
-    "weapons": [
-      {
-        "weapon_type": "submunition",
-        "arcs": [
-          "F"
-        ],
-        "mass": 1,
-        "cost": 3,
-        "id": 1
-      },
-      {
-        "weapon_type": "beam",
-        "weapon_class": "2",
-        "arcs": [
-          "A",
-          "AS",
-          "FS"
-        ],
-        "mass": 2,
-        "cost": 6,
-        "id": 2
-      },
-      {
-        "weapon_type": "pds",
-        "mass": 1,
-        "cost": 3,
-        "id": 3
-      }
-    ],
-    "adfc": {
-      "rating": 0,
-      "cost": 0,
-      "mass": 0
-    }
-  },
-  "structure": {
-    "mass": 0,
-    "cost": 0,
-    "hull": {
-      "rating": 22,
-      "advanced": false,
-      "cost": 44,
-      "mass": 22
-    },
-    "screens": {
-      "standard": 2,
-      "advanced": 1,
-      "cost": 105,
-      "mass": 35
-    },
-    "armour": [
-      {
-        "layer": 1,
-        "rating": 7,
-        "cost": 14,
-        "mass": 14
-      },
-      {
-        "layer": 2,
-        "rating": 2,
-        "cost": 8,
-        "mass": 4
-      },
-      {
-        "layer": 3,
-        "rating": 0,
-        "cost": 0,
-        "mass": 0
-      }
-    ]
-  },
-  "cargo": {
-    "space": 7,
-    "cost": 0,
-    "mass": 7
-  },
-  "streamlining": {
-    "type": "none",
-    "cost": 0,
-    "mass": 0
-  },
-  "carrier": {
-    "bays": 0,
-    "cost": 0,
-    "mass": 0,
-    "squadrons": []
-  }
-}
diff --git a/src/components/Output/Print/stories.js b/src/components/Output/Print/stories.js
deleted file mode 100644
index e494b3b..0000000
--- a/src/components/Output/Print/stories.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Print from './index.svelte';
-import sample from './sample';
-
-export default {
-    title: "printouts"
-};
-
-export const basic = () => ({
-    Component: Print,
-    props: {
-        ship: sample
-    }
-});
diff --git a/src/components/Propulsion/index.svelte b/src/components/Propulsion/index.svelte
deleted file mode 100644
index 20a2a08..0000000
--- a/src/components/Propulsion/index.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-
-<Section label="propulsion">
-
-    <Engine {...engine} on:change_engine />
-
-    <Ftl {...ftl} on:change_ftl />
-
-</Section>
-
-<script>
-    import Ftl from '../Ftl/index.svelte';
-    import Engine from '../Engine/index.svelte';
-    import Section from '../Section/index.svelte';
-
-    export let ftl = {};
-    export let engine = {};
-
-</script>
diff --git a/src/components/ShipSpecs/Identification.svelte b/src/components/ShipSpecs/Identification.svelte
deleted file mode 100644
index 0cc0bbc..0000000
--- a/src/components/ShipSpecs/Identification.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<div>
-    <Field label="ship class" value={general.ship_class}
-        on:change={change_class} />
-
-    <Field label="ship type">
-      <select value={ship_type} on:change={change_ship_type}>
-      {#each ship_types as type (type)}
-        <option>{type}</option>
-        {/each}
-      </select>
-    </Field>
-</div>
-
-<script>
-  import { getContext } from 'svelte';
-
-  import Field from '$lib/components/Field/index.svelte';
-  import { candidate_ship_types } from '../../dux/ship_types';
-
-  export let ship = getContext('ship');
-  let general;
-  $: general = $ship.general;
-
-  const change_class = (event) => ship.dispatch(
-    ship.actions.set_ship_class(event.target.value)
-  );
-
-  let ship_type;
-  $: ship_type = $ship.general.ship_type;
-
-    const change_ship_type = ({ target: {value}}) =>
-        ship.dispatch.set_ship_type(value);
-
-  let ship_types;
-  $: ship_types = candidate_ship_types($ship.general.mass,$ship.carrier.bays>0).map(
-    ({name}) => name
-  );
-
-</script>
-
-<style>
-  div {
-    display: flex;
-    align-items: end;
-    gap: 2em;
-  }
-</style>
diff --git a/src/components/Weapon/Arcs/index.svelte b/src/components/Weapon/Arcs/index.svelte
deleted file mode 100644
index 8600deb..0000000
--- a/src/components/Weapon/Arcs/index.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-
-<svg width="{size}px" height="{size}px">
-{#each all_arcs as arc (arc)}
-  <Arc {arc} radius={size/2}
-        active={selected.includes(arc)}
-        on:click={()=>click_arc(arc)}
-    />
-{/each}
-    <circle cx="50%" cy="50%" r={size /3} />
-    <slot />
-</svg>
-
-<script>
-  import Arc from '../../Weapons/Arc.svelte';
-  import { createEventDispatcher } from 'svelte';
-
-    const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
-
-    export let selected = [];
-  export let size = 60;
-
-  const dispatch = createEventDispatcher();
-
-  const click_arc = arc => dispatch('click_arc',arc);
-
-</script>
-
-<style>
-circle {
-    fill: white;
-}
-</style>
diff --git a/src/components/Weapon/Needle/index.svelte b/src/components/Weapon/Needle/index.svelte
deleted file mode 100644
index c0d658a..0000000
--- a/src/components/Weapon/Needle/index.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<label> needle weapon</label>
-<Arcs selected={arcs} on:click_arc={({detail}) => click_arc(detail)} />
-
-<script>
-  import {getContext } from 'svelte';
-  import Arcs from '../Arcs/index.svelte';
-    import dux from '$lib/dux';
-  import { createEventDispatcher } from 'svelte';
-
-    const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
-
-    export let arcs = ['F'];
-    export let ship_change = getContext('ship_change') || ( () => {} );
-
-    const click_arc = (arc) => {
-      if( arcs[0] === arc ) return;
-      arcs = [ arc ];
-    }
-
-    const dispatch = createEventDispatcher();
-    let cache;
-    $: cache = arcs.join(":");
-
-    $: dispatch( 'change', {
-      arcs: cache.split(":"),
-    })
-</script>
-
-<style>
-.arc {
-    display: flex;
-    flex-direction: column;
-    margin-right: 1em;
-}
-
-  </style>
-
diff --git a/src/components/Weapon/Submunition/index.svelte b/src/components/Weapon/Submunition/index.svelte
deleted file mode 100644
index e8ceb4b..0000000
--- a/src/components/Weapon/Submunition/index.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<label> submunition pack</label>
-<Arcs selected={arcs} on:click_arc={({detail}) => click_arc(detail)} />
-
-<script>
-  import {getContext } from 'svelte';
-  import Arcs from '../Arcs/index.svelte';
-    import dux from '$lib/dux';
-  import { createEventDispatcher } from 'svelte';
-
-    const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
-
-    export let arcs = ['F'];
-    export let ship_change = getContext('ship_change') || ( () => {} );
-
-    const click_arc = (arc) => {
-      if( arcs[0] === arc ) return;
-      arcs = [ arc ];
-    }
-
-    const dispatch = createEventDispatcher();
-    let cache;
-    $: cache = arcs.join(":");
-
-    $: dispatch( 'change', {
-      arcs: cache.split(":"),
-    })
-</script>
-
-<style>
-.arc {
-    display: flex;
-    flex-direction: column;
-    margin-right: 1em;
-}
-
-  </style>
-
diff --git a/src/components/Weapons/Add.svelte b/src/components/Weapons/Add.svelte
deleted file mode 100644
index 6bf67b6..0000000
--- a/src/components/Weapons/Add.svelte
+++ /dev/null
@@ -1,202 +0,0 @@
-<input class="add-weapon button small blue" type="button" value="add"
-    on:click={add} />
-
-<div class="weapon">
-
-<select bind:value={weapon_type}>
-    <option>beam</option>
-</select>
-
-<select bind:value={weapon_class}>
-<option>1</option>
-<option>2</option>
-<option>3</option>
-<option>4</option>
-</select>
-
-<select bind:value={nbr_arcs}>
-{#each arc_options[weapon_class] as opt (opt)}
-    <option>{opt}</option>
-{/each}
-</select>
-
-<svg width="60px" height="60px">
-{#each arcs as arc (arc)}
-    <Arc {arc} radius={30}
-        active={selected_arc[arc]}
-        on:click={()=>click_arc(arc)}
-    />
-{/each}
-    <circle cx="30" cy="30" r="15" />
-
-
-</svg>
-
-    <div>{weapon.cost}</div>
-    <div>{weapon.mass}</div>
-
-</div>
-
-<script>
-    let weapon_type = 'beam';
-    let weapon_class = 1;
-    let nbr_arcs = 6;
-    $: nbr_arcs = arc_options[weapon_class][0];
-
-    import Arc from './Arc.svelte';
-    import { weapon_cost_mass } from '../../dux/weapons/rules.js';
-
-    const arcs = [
-        'FS', 'F', 'FP', 'AP', 'A', 'AS'
-    ];
-
-    import _ from 'lodash';
-    import { createEventDispatcher } from 'svelte';
-
-    let arc_options = {
-        1: [ 6],
-        2: [ 3, 6 ],
-        3: [ 1, 2, 3, 4, 5, 6, 'broadside' ],
-        4: [ 1, 2, 3, 4, 5, 6, 'broadside' ]
-    };
-
-    let selected_arc = Object.fromEntries(
-        arcs.map( arc => [ arc, false ] )
-    );
-
-    const nbr_selected_arcs = () => Object.values(selected_arc).filter(
-        x => x ).length;
-
-    $: if ( nbr_selected_arcs() !== nbr_arcs ) {
-        if( nbr_arcs === 'broadside' ) {
-            const new_arcs = {};
-            arcs.forEach( arc => new_arcs[arc] = true );
-            new_arcs.A = false;
-            new_arcs.F = false;
-            selected_arc = new_arcs;
-        }
-        else{
-
-        let first_index = arcs.findIndex( arc => selected_arc[arc] );
-        if( first_index === -1 ) first_index = 0;
-
-        const new_arcs = {};
-        arcs.forEach( arc => new_arcs[arc] = false );
-
-        _.range(nbr_arcs).forEach( i => {
-            new_arcs[ arcs[first_index] ] = true;
-            first_index = ( first_index + 1 ) % arcs.length;
-        });
-
-        selected_arc = new_arcs;
-        }
-    }
-
-    const click_arc = (first_arc) => {
-        if( nbr_arcs === 'broadside' ) return;
-
-        let first_index = arcs.findIndex( arc => arc === first_arc );
-
-        const new_arcs = {};
-        arcs.forEach( arc => new_arcs[arc] = false );
-
-        _.range(nbr_arcs).forEach( i => {
-        console.log(first_index);
-        console.log(selected_arc);
-            new_arcs[ arcs[first_index] ] = true;
-            first_index = ( first_index + 1 ) % arcs.length;
-        });
-
-        selected_arc = new_arcs;
-
-    }
-
-    let weapon = {};
-    $: weapon= {
-        weapon_type,
-        weapon_class,
-        arcs,
-        ...weapon_cost_mass({ weapon_type, weapon_class, arcs: arcs.filter(
-        arc => selected_arc[arc]
-        ) })
-    };
-
-    const dispatch = createEventDispatcher();
-
-    const add = () => {
-        dispatch('add_weapon', weapon);
-    }
-
-</script>
-
-<style>
-
-.weapon {
-    display: flex;
-    align-items: center;
-}
-
-.weapon > * {
-    margin-right: 2em;
-}
-
-.arcs {
-    display: grid;
-    grid-template-rows: 1fr 1fr 1fr 1fr;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    align-items: center;
-    justify-items: center;
-    width: 6em;
-}
-
-
-.arc input {
-  margin: 0px;
-}
-
-
-.arc.F {
-  grid-column: 2 / span 2;
-  grid-row: 1;
-}
-
-.arc.FS {
-  grid-column: 1;
-  grid-row: 1 / span 2;
-}
-
-.arc.FP {
-  grid-column: 4;
-  grid-row: 1 / span 2;
-}
-
-.arc.AS {
-  grid-column: 1;
-  grid-row: 3 / span 2;
-}
-
-.arc.AP {
-  grid-column: 4;
-  grid-row: 3 / span 2;
-}
-
-.arc.A {
-  grid-column: 2 / span 2;
-  grid-row: 4;
-}
-
-.arc {
-    display: flex;
-    flex-direction: column;
-    margin-right: 1em;
-}
-
-.add-weapon {
-    display: block;
-}
-
-circle {
-    fill: white;
-}
-
-</style>
diff --git a/src/components/Weapons/Arc.svelte b/src/components/Weapons/Arc.svelte
deleted file mode 100644
index 792a068..0000000
--- a/src/components/Weapons/Arc.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-export let arc;
-export let radius;
-export let active = false;
-
-const rotation = {
-    F: 0,
-    FS: 300,
-    AS: 240,
-    A: 180,
-    AP: 120,
-    FP: 60,
-};
-
-let y, x_delta;
-$: y = Math.round( radius * ( 1 - Math.sin(60/180*Math.PI) ) );
-$: x_delta = Math.round( radius*Math.cos(60/180*Math.PI) );
-
-let path;
-$: path = `M ${radius},${radius} L ${radius-x_delta},${y} A ${radius},${radius} 0 0 1 ${radius+x_delta},${y} Z`;
-
-let transform;
-$: transform = `rotate(${rotation[arc]},${radius},${radius})`
-
-</script>
-
-    <g { transform }>
-        <path d={path} class:active on:click />
-    </g>
-
-<style>
-path {
-    fill: lightgrey;
-    stroke: white;
-    stroke-width: 2px;
-}
-
-path:hover {
-    fill: pink;
-}
-
-path.active:hover {
-    fill: pink;
-}
-
-path.active {
-    fill: #313131;
-}
-</style>
-
diff --git a/src/components/Weapons/stories.js b/src/components/Weapons/stories.js
deleted file mode 100644
index 4f49d42..0000000
--- a/src/components/Weapons/stories.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import AddWeapon from './Add.svelte';
-
-export default {
-    title: "add weapon",
-};
-
-export const beam = () => ({
-    Component: AddWeapon,
-});
-
diff --git a/src/global.d.ts b/src/global.d.ts
deleted file mode 100644
index 79d7d7f..0000000
--- a/src/global.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-/// <reference types="@sveltejs/kit" />
-/// <reference types="svelte" />
-/// <reference types="vite/client" />
diff --git a/src/components/App.svelte b/src/lib/components/App-original.svelte
similarity index 94%
rename from src/components/App.svelte
rename to src/lib/components/App-original.svelte
index 9de857f..0493fba 100644
--- a/src/components/App.svelte
+++ b/src/lib/components/App-original.svelte
@@ -1,10 +1,5 @@
-<Ribbon />
-<Header />
-
 <nav>
-  <button class="button is-danger" type="button" on:click={reset}
-    >reset</button
-  >
+  <button class="button is-danger" type="button" on:click={reset}>reset</button>
 
   <div class="spacer" />
 
@@ -18,9 +13,7 @@
       <button class="button" on:click={() => set_output("json")}>json</button>
     </p>
     <p class="control">
-      <button class="button" on:click={() => set_output("print")}
-        >print</button
-      >
+      <button class="button" on:click={() => set_output("print")}>print</button>
     </p>
   </div>
 </nav>
@@ -68,12 +61,7 @@
       <AddWeapon />
 
       {#each weapons as weapon (weapon.id)}
-        <Weapon
-          {weapon}
-          id={weapon.id}
-          cost={weapon.cost}
-          mass={weapon.mass}
-        />
+        <Weapon {weapon} id={weapon.id} cost={weapon.cost} mass={weapon.mass} />
       {/each}
     </Section>
 
@@ -89,7 +77,6 @@
 <script>
   import { setContext } from "svelte";
 
-  import Header from "./Header.svelte";
   import Ribbon from "./Ribbon.svelte";
   import shipStore from "../stores/ship";
   import OutputJson from "./Output/Json.svelte";
diff --git a/src/lib/components/App.svelte b/src/lib/components/App.svelte
new file mode 100644
index 0000000..7030373
--- /dev/null
+++ b/src/lib/components/App.svelte
@@ -0,0 +1,10 @@
+<Ribbon />
+<Header />
+
+<script>
+  import Ribbon from "./Ribbon.svelte";
+  import Header from "./Header.svelte";
+</script>
+
+<style>
+</style>
diff --git a/src/lib/components/Carrier/Carrier.story.svelte b/src/lib/components/Carrier/Carrier.story.svelte
new file mode 100644
index 0000000..446467c
--- /dev/null
+++ b/src/lib/components/Carrier/Carrier.story.svelte
@@ -0,0 +1,14 @@
+<Carrier />
+
+<script>
+  import Carrier from "./index.svelte";
+
+  const props = {
+    bays: 3,
+    squadrons: [
+      { id: 1, type: "standard", ftl: false, nbr_fighters: 6 },
+      { id: 2, type: "fast", ftl: false, nbr_fighters: 6 },
+      { id: 3, type: "none", ftl: false, nbr_fighters: 6 },
+    ],
+  };
+</script>
diff --git a/src/components/Carrier/Squadron/index.svelte b/src/lib/components/Carrier/Squadron/index.svelte
similarity index 57%
rename from src/components/Carrier/Squadron/index.svelte
rename to src/lib/components/Carrier/Squadron/index.svelte
index d4aebde..7eb17ac 100644
--- a/src/components/Carrier/Squadron/index.svelte
+++ b/src/lib/components/Carrier/Squadron/index.svelte
@@ -1,4 +1,4 @@
-<ShipItem {cost} {mass} >
+<ShipItem {cost} {mass}>
   <Field label={`squadron ${id}`}>
     <select bind:value={type}>
       {#each types as type (type)}
@@ -9,30 +9,29 @@
 </ShipItem>
 
 <script>
-  import {getContext } from 'svelte';
+  import { getContext } from "svelte";
 
   import Section from "$lib/components/Section/index.svelte";
   import Field from "$lib/components/Field/index.svelte";
   import ShipItem from "$lib/components/ShipItem/index.svelte";
-  import dux from '$lib/dux/carrier';
-  import squadron_types from '$lib/dux/carrier/squadron_types';
+  import dux from "$lib/dux/carrier";
+  import squadron_types from "$lib/dux/carrier/squadron_types";
 
-  const types = squadron_types.map( ({type}) => type );
+  const types = squadron_types.map(({ type }) => type);
 
   export let id = 1;
   export let type = "standard";
   export let ftl = false;
-  export let cost =0;
+  export let cost = 0;
   export let mass = 0;
 
-  export let ship = getContext('ship');
-
-  $: ship?.dispatch_action('set_squadron',{ id, type, });
+  export let ship = getContext("ship");
 
+  $: ship?.dispatch_action("set_squadron", { id, type });
 </script>
 
 <style>
-div {
-  background-color: red;
-}
+  div {
+    background-color: red;
+  }
 </style>
diff --git a/src/components/Carrier/index.svelte b/src/lib/components/Carrier/index.svelte
similarity index 58%
rename from src/components/Carrier/index.svelte
rename to src/lib/components/Carrier/index.svelte
index cbdf0cd..e7321c9 100644
--- a/src/components/Carrier/index.svelte
+++ b/src/lib/components/Carrier/index.svelte
@@ -1,3 +1,4 @@
+<!--
 <Section label="carrier">
   <ShipItem {cost} {mass}>
     <Field label="bays">
@@ -9,15 +10,18 @@
     <Squadron {...squad} />
   {/each}
 </Section>
+-->
+
+Hey!
 
 <script>
   import { getContext } from "svelte";
 
-  import Section from "../Section/index.svelte";
-  import Field from "../Field/index.svelte";
-  import ShipItem from "../ShipItem/index.svelte";
-  import Squadron from "./Squadron/index.svelte";
-  import dux from "../../dux/carrier";
+  /* import Section from "../Section/index.svelte"; */
+  /* import Field from "../Field/index.svelte"; */
+  /* import ShipItem from "../ShipItem/index.svelte"; */
+  //  import Squadron from "./Squadron/index.svelte";
+  //  import dux from "../../dux/carrier";
 
   export let bays = 0;
   export let squadrons = [];
@@ -26,6 +30,5 @@
 
   export let ship = getContext("ship");
 
-  $: ship?.dispatch_action('set_carrier_bays',bays);
-
+  $: ship?.dispatch_action("set_carrier_bays", bays);
 </script>
diff --git a/src/lib/components/Carrier/stories.js b/src/lib/components/Carrier/stories.js
new file mode 100644
index 0000000..e245b7b
--- /dev/null
+++ b/src/lib/components/Carrier/stories.js
@@ -0,0 +1,20 @@
+import { action } from "@storybook/addon-actions";
+
+import Carrier from "./index.svelte";
+
+export default {
+  title: "Carrier",
+};
+
+export const basic = () => ({
+  Component: Carrier,
+  props: {
+    bays: 3,
+    squadrons: [
+      { id: 1, type: "standard", ftl: false, nbr_fighters: 6 },
+      { id: 2, type: "fast", ftl: false, nbr_fighters: 6 },
+      { id: 3, type: "none", ftl: false, nbr_fighters: 6 },
+    ],
+    ship_change: action("ship_change"),
+  },
+});
diff --git a/src/lib/components/Cost.story.svelte b/src/lib/components/Cost.story.svelte
new file mode 100644
index 0000000..29d5557
--- /dev/null
+++ b/src/lib/components/Cost.story.svelte
@@ -0,0 +1,5 @@
+<Cost cost={12} />
+
+<script>
+  import Cost from "./Cost.svelte";
+</script>
diff --git a/src/components/Cost.svelte b/src/lib/components/Cost.svelte
similarity index 55%
rename from src/components/Cost.svelte
rename to src/lib/components/Cost.svelte
index dbdce51..cc3d237 100644
--- a/src/components/Cost.svelte
+++ b/src/lib/components/Cost.svelte
@@ -5,5 +5,8 @@
 </script>
 
 <style>
-  div:after { content: '\00A4'; margin-left: 0.5em; }
+  div:after {
+    content: "\00A4";
+    margin-left: 0.5em;
+  }
 </style>
diff --git a/src/lib/components/CostMass.svelte b/src/lib/components/CostMass.svelte
new file mode 100644
index 0000000..d463387
--- /dev/null
+++ b/src/lib/components/CostMass.svelte
@@ -0,0 +1,29 @@
+<div class="mass">{mass}</div>
+<div class="cost">{cost}</div>
+
+<script>
+  export let mass;
+  export let cost;
+</script>
+
+<style>
+  .cost {
+    grid-column: 3;
+  }
+  .mass {
+    grid-column: 2;
+  }
+  img {
+    width: 0.75em;
+  }
+  .cost:after {
+    content: "\00A4";
+    margin-left: 0.5em;
+  }
+  .mass:after {
+    content: url("/mass.svg");
+    width: 0.75em;
+    display: inline-block;
+    margin-left: 0.5em;
+  }
+</style>
diff --git a/src/lib/components/Engine/Engine.stories.svelte b/src/lib/components/Engine/Engine.stories.svelte
new file mode 100644
index 0000000..6000962
--- /dev/null
+++ b/src/lib/components/Engine/Engine.stories.svelte
@@ -0,0 +1,33 @@
+<Meta
+  title="Engine"
+  component={Engine}
+  argTypes={{
+    rating: { type: "number", defaultValue: 6 },
+    advanced: { type: "boolean", defaultValue: false },
+    reqs: { type: "object", defaultValue: { cost: 6, mass: 3 } },
+  }}
+/>
+
+<Story name="Primary" args={{}} />
+
+<Template let:args>
+  <div style="width: 50em">
+    <Engine {...args} />
+  </div>
+</Template>
+
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+  import { action } from "@storybook/addon-actions";
+
+  import { setContext } from "svelte";
+
+  import Engine from "./index.svelte";
+
+  setContext("ship", {
+    dispatch: (type, detail) => action(type)(detail),
+  });
+
+  let advanced = false;
+  let rating = 0;
+</script>
diff --git a/src/lib/components/Engine/index.svelte b/src/lib/components/Engine/index.svelte
new file mode 100644
index 0000000..c106aea
--- /dev/null
+++ b/src/lib/components/Engine/index.svelte
@@ -0,0 +1,39 @@
+<ShipItem {...reqs}>
+  <div>
+    <Field label="thrust rating">
+      <input type="number" bind:value={rating} min="0" max="20" step="1" />
+    </Field>
+
+    <label><input type="checkbox" bind:checked={advanced} /> advanced</label>
+  </div>
+</ShipItem>
+
+<script>
+  import { getContext } from "svelte";
+  import Field from "$lib/components/Field/index.svelte";
+  import ShipItem from "$lib/components/ShipItem/index.svelte";
+
+  export let reqs = {};
+  export let advanced = false;
+  export let rating = 0;
+
+  const ship = getContext("ship") || {
+    dispatch: (...args) => console.log(args),
+  };
+
+  $: ship.dispatch("setEngine", { rating, advanced });
+</script>
+
+<style>
+  div {
+    display: flex;
+    align-items: end;
+  }
+  label {
+    font-family: var(--main-font-family);
+    margin-left: 2em;
+  }
+  input[type="number"] {
+    width: 5em;
+  }
+</style>
diff --git a/src/components/Field/BasicStory.svelte b/src/lib/components/Field/BasicStory.svelte
similarity index 55%
rename from src/components/Field/BasicStory.svelte
rename to src/lib/components/Field/BasicStory.svelte
index e20b928..e1ee11e 100644
--- a/src/components/Field/BasicStory.svelte
+++ b/src/lib/components/Field/BasicStory.svelte
@@ -1,5 +1,5 @@
 <Field label="the label" />
 
 <script>
-import Field from './index.svelte';
+  import Field from "./index.svelte";
 </script>
diff --git a/src/lib/components/Field/index.svelte b/src/lib/components/Field/index.svelte
new file mode 100644
index 0000000..71657d3
--- /dev/null
+++ b/src/lib/components/Field/index.svelte
@@ -0,0 +1,32 @@
+<div>
+  {#if label}
+    <label>{label}</label>
+  {/if}
+  <slot>
+    <input type="text" {placeholder} {value} on:change />
+  </slot>
+</div>
+
+<script>
+  export let label = "";
+  export let value = "";
+  export let placeholder;
+</script>
+
+<style>
+  div {
+    font-family: var(--main-font-family);
+  }
+  div > :global(*) {
+    margin-left: 1em;
+  }
+  div > label {
+    margin-left: 0em;
+  }
+  label {
+    font-size: var(--font-scale-8);
+    font-weight: lighter;
+    font-family: Dosis;
+    color: var(--indigo-dye);
+  }
+</style>
diff --git a/src/lib/components/Field/stories.js b/src/lib/components/Field/stories.js
new file mode 100644
index 0000000..941369f
--- /dev/null
+++ b/src/lib/components/Field/stories.js
@@ -0,0 +1,12 @@
+import Component from "./index.svelte";
+import BasicStory from "./BasicStory.svelte";
+
+import "../../../public/global.css";
+
+export default {
+  title: "Field",
+};
+
+export const basic = () => ({
+  Component: BasicStory,
+});
diff --git a/src/lib/components/Firecons.svelte b/src/lib/components/Firecons.svelte
new file mode 100644
index 0000000..416659d
--- /dev/null
+++ b/src/lib/components/Firecons.svelte
@@ -0,0 +1,21 @@
+<ShipItem {cost} {mass}>
+  <Field label="firecons">
+    <input type="number" class="short" bind:value={nbr} />
+  </Field>
+</ShipItem>
+
+<script>
+  import { createEventDispatcher } from "svelte";
+  import ShipItem from "./ShipItem/index.svelte";
+  import Field from "./Field/index.svelte";
+
+  export let nbr,
+    cost,
+    mass = (0, 0, 0);
+
+  const dispatch = createEventDispatcher();
+  $: dispatch("change_firecons", nbr);
+</script>
+
+<style>
+</style>
diff --git a/src/lib/components/Ftl/index.svelte b/src/lib/components/Ftl/index.svelte
new file mode 100644
index 0000000..fb2c098
--- /dev/null
+++ b/src/lib/components/Ftl/index.svelte
@@ -0,0 +1,34 @@
+<ShipItem {mass} {cost}>
+  <Field label="FTL drive">
+    {#each types as t (t)}
+      <label
+        ><input type="radio" bind:group={type} value={t} on:change={change} />
+        {t}
+      </label>
+    {/each}
+  </Field>
+</ShipItem>
+
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  import ShipItem from "../ShipItem/index.svelte";
+  import Field from "../Field/index.svelte";
+
+  export let type = "none";
+  export let cost = 0;
+  export let mass = 0;
+
+  const dispatch = createEventDispatcher();
+
+  const change = () => dispatch("change_ftl", type);
+
+  const types = ["none", "standard", "advanced"];
+</script>
+
+<style>
+  label {
+    display: inline;
+    margin-right: 1em;
+  }
+</style>
diff --git a/src/lib/components/Ftl/stories.js b/src/lib/components/Ftl/stories.js
new file mode 100644
index 0000000..d49e876
--- /dev/null
+++ b/src/lib/components/Ftl/stories.js
@@ -0,0 +1,13 @@
+export default {
+  title: "FTL Drive",
+};
+
+import Component from ".";
+import shipStore from "../../stores/ship.js";
+
+export const basic = () => ({
+  Component,
+  props: {
+    ship: shipStore(),
+  },
+});
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
new file mode 100644
index 0000000..9dd62ff
--- /dev/null
+++ b/src/lib/components/Header.svelte
@@ -0,0 +1,30 @@
+<header>
+  <h1>The Docks</h1>
+  <h2>
+    a <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship
+    builder
+  </h2>
+</header>
+
+<style>
+  header {
+    display: flex;
+    align-items: baseline;
+    width: var(--main-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
+  h1,
+  h2 {
+    font-family: Faktos;
+    padding: 0px;
+    margin: 0px;
+  }
+
+  h2 {
+    text-align: right;
+    flex: 1;
+    padding-left: 2em;
+    font-size: var(--font-scale-12);
+  }
+</style>
diff --git a/src/lib/components/Hull/Armour/Layer/index.svelte b/src/lib/components/Hull/Armour/Layer/index.svelte
new file mode 100644
index 0000000..a3d54ce
--- /dev/null
+++ b/src/lib/components/Hull/Armour/Layer/index.svelte
@@ -0,0 +1,22 @@
+<Field label={`layer ${layer}`}>
+  <input type="number" min="0" bind:value={rating} />
+</Field>
+
+<script>
+  import { getContext } from "svelte";
+
+  import Field from "$lib/components/Field/index.svelte";
+
+  export let layer = 1;
+  export let rating = 0;
+
+  const ship = getContext("ship");
+
+  $: ship?.dispatch_action("set_armour_layer", { layer, rating });
+</script>
+
+<style>
+  input {
+    width: 5em;
+  }
+</style>
diff --git a/src/lib/components/Hull/Armour/index.svelte b/src/lib/components/Hull/Armour/index.svelte
new file mode 100644
index 0000000..70d83d8
--- /dev/null
+++ b/src/lib/components/Hull/Armour/index.svelte
@@ -0,0 +1,48 @@
+<ShipItem {cost} {mass}>
+  <div>
+    <div class="nbr_layers">
+      <Field label="armour layers">
+        <input type="number" min="0" bind:value={nbr_layers} />
+      </Field>
+    </div>
+
+    <div class="layers">
+      {#each armour as layer (layer.layer)}
+        <Layer {...layer} on:ship_change />
+      {/each}
+    </div>
+  </div>
+</ShipItem>
+
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  import ShipItem from "$lib/components/ShipItem/index.svelte";
+  import Field from "$lib/components/Field/index.svelte";
+  import Layer from "./Layer/index.svelte";
+  import dux from "$lib/dux/structure/armour";
+  import _ from "lodash";
+
+  export let armour = [];
+  export let cost = 0;
+  export let mass = 0;
+
+  $: cost = _.sum(_.map(armour, "cost"));
+  $: mass = _.sum(_.map(armour, "mass"));
+
+  let nbr_layers = armour.length;
+
+  const dispatch = createEventDispatcher();
+
+  $: dispatch("ship_change", dux.actions.set_armour_nbr_layers(nbr_layers));
+</script>
+
+<style>
+  .layers {
+    display: flex;
+  }
+
+  input {
+    width: 5em;
+  }
+</style>
diff --git a/src/lib/components/Hull/Armour/stories.js b/src/lib/components/Hull/Armour/stories.js
new file mode 100644
index 0000000..c016e17
--- /dev/null
+++ b/src/lib/components/Hull/Armour/stories.js
@@ -0,0 +1,18 @@
+import Armour from "./index.svelte";
+
+export default {
+  title: "Armour",
+};
+
+export const basic = () => ({
+  Component: Armour,
+  props: {
+    armour: [
+      { layer: 1, rating: 12, cost: 1, mass: 2 },
+      { layer: 2, rating: 12, cost: 1, mass: 2 },
+    ],
+  },
+  on: {
+    ship_change: ({ detail }) => console.log(detail),
+  },
+});
diff --git a/src/components/Hull/Cargo/index.svelte b/src/lib/components/Hull/Cargo/index.svelte
similarity index 99%
rename from src/components/Hull/Cargo/index.svelte
rename to src/lib/components/Hull/Cargo/index.svelte
index ffb786d..fd916be 100644
--- a/src/components/Hull/Cargo/index.svelte
+++ b/src/lib/components/Hull/Cargo/index.svelte
@@ -17,12 +17,10 @@
   export let mass = 0;
 
   $: ship?.dispatch_action("set_cargo", space);
-
 </script>
 
 <style>
   input {
     width: 5em;
   }
-
 </style>
diff --git a/src/lib/components/Hull/Screens/index.svelte b/src/lib/components/Hull/Screens/index.svelte
new file mode 100644
index 0000000..b19c7f0
--- /dev/null
+++ b/src/lib/components/Hull/Screens/index.svelte
@@ -0,0 +1,40 @@
+<ShipItem {cost} {mass}>
+  <div>
+    <Field label="screens">
+      <input type="number" bind:value={standard} min="0" />
+    </Field>
+
+    <Field label="advanced screens">
+      <input type="number" bind:value={advanced} min="0" />
+    </Field>
+  </div>
+</ShipItem>
+
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  import Section from "$lib/components/Section/index.svelte";
+  import Field from "$lib/components/Field/index.svelte";
+  import ShipItem from "../../ShipItem/index.svelte";
+
+  export let cost = 0;
+  export let mass = 0;
+  export let standard = 0;
+  export let advanced = 0;
+
+  let nbr_regular, nbr_advanced;
+
+  const dispatch = createEventDispatcher();
+
+  $: dispatch("set_screens", { standard, advanced });
+</script>
+
+<style>
+  input {
+    width: 3em;
+  }
+  div {
+    display: flex;
+    gap: 2em;
+  }
+</style>
diff --git a/src/lib/components/Hull/Streamlining/index.svelte b/src/lib/components/Hull/Streamlining/index.svelte
new file mode 100644
index 0000000..cccb2b1
--- /dev/null
+++ b/src/lib/components/Hull/Streamlining/index.svelte
@@ -0,0 +1,41 @@
+<ShipItem {cost} {mass}>
+  <Field label="streamlining">
+    <div>
+      <label>
+        <input type="radio" bind:group={type} value="none" />
+        none</label
+      >
+      <label>
+        <input type="radio" bind:group={type} value="partial" />
+        partial</label
+      >
+      <label>
+        <input type="radio" bind:group={type} value="full" />
+        full</label
+      >
+    </div>
+  </Field>
+</ShipItem>
+
+<script>
+  import ShipItem from "$lib/components/ShipItem/index.svelte";
+  import Field from "$lib/components/Field/index.svelte";
+
+  import { getContext } from "svelte";
+
+  export let type = "none";
+  export let cost = 0;
+  export let mass = 0;
+  export let ship = getContext("ship");
+
+  $: ship?.dispatch_action("set_streamlining", type);
+</script>
+
+<style>
+  div {
+    display: flex;
+  }
+  label {
+    margin-left: 1em;
+  }
+</style>
diff --git a/src/lib/components/Hull/index.svelte b/src/lib/components/Hull/index.svelte
new file mode 100644
index 0000000..c74b6e9
--- /dev/null
+++ b/src/lib/components/Hull/index.svelte
@@ -0,0 +1,51 @@
+<Section label="hull">
+  <ShipItem {cost} {mass}>
+    <Field label="integrity">
+      <input bind:value={rating} type="number" {min} {max} />
+    </Field>
+  </ShipItem>
+
+  <Screens {...screens} on:set_screens />
+
+  <Armour {armour} on:ship_change />
+
+  <Cargo {...cargo} on:set_cargo />
+
+  <Streamlining {...streamlining} />
+</Section>
+
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  import Section from "../Section/index.svelte";
+  import Field from "../Field/index.svelte";
+  import ShipItem from "../ShipItem/index.svelte";
+  import Screens from "./Screens/index.svelte";
+  import Armour from "./Armour/index.svelte";
+  import Cargo from "./Cargo/index.svelte";
+  import Streamlining from "./Streamlining/index.svelte";
+
+  export let cost,
+    mass,
+    ship_mass,
+    rating,
+    screens,
+    armour = (0, 0, 10, 1, [], []);
+
+  export let cargo = {};
+  export let streamlining = {};
+
+  let min, max;
+  $: min = Math.ceil(ship_mass / 10);
+  $: max = ship_mass;
+
+  const dispatch = createEventDispatcher();
+
+  $: dispatch("change_hull", { rating });
+</script>
+
+<style>
+  input {
+    width: 5em;
+  }
+</style>
diff --git a/src/components/Mass.svelte b/src/lib/components/Mass.svelte
similarity index 100%
rename from src/components/Mass.svelte
rename to src/lib/components/Mass.svelte
diff --git a/src/components/Notes.svelte b/src/lib/components/Notes.svelte
similarity index 93%
rename from src/components/Notes.svelte
rename to src/lib/components/Notes.svelte
index 5eb79ff..03d1dbb 100644
--- a/src/components/Notes.svelte
+++ b/src/lib/components/Notes.svelte
@@ -24,9 +24,9 @@
   </p>
 
   <p>
-    The app is mostly developed for Firefox. I also check as much as I can
-    that I don't mess things too badly on Chrome. For the other browsers...
-    caveat emptor.
+    The app is mostly developed for Firefox. I also check as much as I can that
+    I don't mess things too badly on Chrome. For the other browsers... caveat
+    emptor.
   </p>
 
   <p>
diff --git a/src/components/Output/Json.svelte b/src/lib/components/Output/Json.svelte
similarity index 61%
rename from src/components/Output/Json.svelte
rename to src/lib/components/Output/Json.svelte
index b7d86c1..6bae267 100644
--- a/src/components/Output/Json.svelte
+++ b/src/lib/components/Output/Json.svelte
@@ -5,13 +5,13 @@
 <script>
   export let ship = {};
   let json;
-  $: json = JSON.stringify(ship,null,2);
+  $: json = JSON.stringify(ship, null, 2);
 
-    import { fly, fade } from 'svelte/transition';
-    import {createEventDispatcher} from 'svelte';
+  import { fly, fade } from "svelte/transition";
+  import { createEventDispatcher } from "svelte";
 
-    const dispatch = createEventDispatcher();
-    const close = () => dispatch('close');
+  const dispatch = createEventDispatcher();
+  const close = () => dispatch("close");
 </script>
 
 <style>
@@ -20,13 +20,11 @@
     font-size: var(--font-scale-9);
     overflow: scroll;
     height: 90%;
-
   }
   div {
-  text-align: right;
+    text-align: right;
   }
   aside {
-
     padding: 1em;
     border: 3px solid var(--indigo-dye);
     border-radius: 1em;
diff --git a/src/components/Output/Json.svench b/src/lib/components/Output/Json.svench
similarity index 100%
rename from src/components/Output/Json.svench
rename to src/lib/components/Output/Json.svench
diff --git a/src/components/Output/Print/Hull/Armour/index.svelte b/src/lib/components/Output/Print/Hull/Armour/index.svelte
similarity index 52%
rename from src/components/Output/Print/Hull/Armour/index.svelte
rename to src/lib/components/Output/Print/Hull/Armour/index.svelte
index f0be2fa..c22251a 100644
--- a/src/components/Output/Print/Hull/Armour/index.svelte
+++ b/src/lib/components/Output/Print/Hull/Armour/index.svelte
@@ -1,17 +1,15 @@
 <div class="layers">
   {#each armour as layer (layer)}
     <div class="layer">
-      {#each _.range(layer.rating) as i (i) }
-        <div class="cell">
-        </div>
+      {#each _.range(layer.rating) as i (i)}
+        <div class="cell" />
       {/each}
     </div>
   {/each}
-
 </div>
 
 <script>
-  import _ from 'lodash';
+  import _ from "lodash";
 
   export let armour = [];
 
@@ -19,14 +17,14 @@
 </script>
 
 <style>
-.cell {
-  display: inline-block;
-  margin-right: 0.5em;
-  width: 1em;
-  height: 1em;
-  border: 1px solid black;
-  border-radius: 0.5em;
-}
+  .cell {
+    display: inline-block;
+    margin-right: 0.5em;
+    width: 1em;
+    height: 1em;
+    border: 1px solid black;
+    border-radius: 0.5em;
+  }
   .layers {
     display: flex;
     flex-direction: column-reverse;
diff --git a/src/components/Output/Print/Hull/Integrity/index.svelte b/src/lib/components/Output/Print/Hull/Integrity/index.svelte
similarity index 55%
rename from src/components/Output/Print/Hull/Integrity/index.svelte
rename to src/lib/components/Output/Print/Hull/Integrity/index.svelte
index 830952a..69ca166 100644
--- a/src/components/Output/Print/Hull/Integrity/index.svelte
+++ b/src/lib/components/Output/Print/Hull/Integrity/index.svelte
@@ -1,7 +1,7 @@
 <div>
-  {#each rows as row,i (i)}
+  {#each rows as row, i (i)}
     <div class="row">
-      {#each row as item,j (j)}
+      {#each row as item, j (j)}
         <div class="cell">
           {#if item}
             <img src="icons/crew-star.svg" alt="crew loss threshold" />
@@ -10,11 +10,10 @@
       {/each}
     </div>
   {/each}
-
 </div>
 
 <script>
-  import { ceil } from '$lib/dux/utils';
+  import { ceil } from "$lib/dux/utils";
 
   export let ship_mass = 0;
   export let rating = 0;
@@ -27,45 +26,40 @@
   $: cells = Array(rating).fill(false);
 
   let dcp;
-  $: dcp= ceil(ship_mass/20);
+  $: dcp = ceil(ship_mass / 20);
 
-  $: cells = divide(cells, dcp).map(
-    g => {
-      g[g.length-1] = true;
+  $: cells = divide(cells, dcp)
+    .map((g) => {
+      g[g.length - 1] = true;
       return g;
-    }
-  ).flat();
+    })
+    .flat();
 
   function divide(list, divider) {
-    if( divider <= 1 ) return [ list ];
+    if (divider <= 1) return [list];
 
     let div = list.length / divider;
     const mod = list.length % divider;
 
-    if(mod) div++;
+    if (mod) div++;
 
-    return [
-      list.slice(0,div),
-      ...divide( list.slice(div), divider-1 )
-    ]
+    return [list.slice(0, div), ...divide(list.slice(div), divider - 1)];
   }
 
   let rows = [];
-  $: rows = divide( cells, nbr_rows );
-
-
+  $: rows = divide(cells, nbr_rows);
 </script>
 
 <style>
   .row {
   }
-.cell {
-  display: inline-block;
-  margin-right: 0.5em;
-  width: 1em;
-  height: 1em;
-  border: 1px solid black;
-}
+  .cell {
+    display: inline-block;
+    margin-right: 0.5em;
+    width: 1em;
+    height: 1em;
+    border: 1px solid black;
+  }
   img {
     width: 1em;
   }
diff --git a/src/lib/components/Output/Print/Hull/Integrity/stories.js b/src/lib/components/Output/Print/Hull/Integrity/stories.js
new file mode 100644
index 0000000..bef2dab
--- /dev/null
+++ b/src/lib/components/Output/Print/Hull/Integrity/stories.js
@@ -0,0 +1,23 @@
+import Component from ".";
+
+export default {
+  title: "printouts/hull/integrity",
+};
+
+export const basic = () => ({
+  Component,
+  props: {
+    ship_mass: 50,
+    rating: 14,
+    advanced: false,
+  },
+});
+
+export const advanced = () => ({
+  Component,
+  props: {
+    ship_mass: 50,
+    rating: 14,
+    advanced: true,
+  },
+});
diff --git a/src/components/Output/Print/Hull/index.svelte b/src/lib/components/Output/Print/Hull/index.svelte
similarity index 70%
rename from src/components/Output/Print/Hull/index.svelte
rename to src/lib/components/Output/Print/Hull/index.svelte
index d0506ea..cffeaad 100644
--- a/src/components/Output/Print/Hull/index.svelte
+++ b/src/lib/components/Output/Print/Hull/index.svelte
@@ -8,8 +8,8 @@
 </div>
 
 <script>
-  import Integrity from './Integrity/index.svelte';
-  import Armour from './Armour/index.svelte';
+  import Integrity from "./Integrity/index.svelte";
+  import Armour from "./Armour/index.svelte";
 
   export let structure = {};
   export let ship_mass = 0;
diff --git a/src/components/Output/Print/Identification/index.svelte b/src/lib/components/Output/Print/Identification/index.svelte
similarity index 70%
rename from src/components/Output/Print/Identification/index.svelte
rename to src/lib/components/Output/Print/Identification/index.svelte
index ddb05b7..228394a 100644
--- a/src/components/Output/Print/Identification/index.svelte
+++ b/src/lib/components/Output/Print/Identification/index.svelte
@@ -1,4 +1,6 @@
-<h1>ship name: <div class="fill"></div> </h1>
+<h1>
+  ship name: <div class="fill" />
+</h1>
 
 <div class="details">
   <h2>{ship_class}-class, {ship_type}</h2>
@@ -10,12 +12,13 @@
 </div>
 
 <script>
-  import Cost from '../../../Cost.svelte';
-  import Mass from '$lib/components/Mass.svelte';
+  import Cost from "../../../Cost.svelte";
+  import Mass from "$lib/components/Mass.svelte";
 
-export let ship_class;
-export let ship_type;
-  export let cost, mass = ( 0, 0 );
+  export let ship_class;
+  export let ship_type;
+  export let cost,
+    mass = (0, 0);
 </script>
 
 <style>
diff --git a/src/components/Output/Print/MainSystems/index.svelte b/src/lib/components/Output/Print/MainSystems/index.svelte
similarity index 59%
rename from src/components/Output/Print/MainSystems/index.svelte
rename to src/lib/components/Output/Print/MainSystems/index.svelte
index c08e1bc..209cb39 100644
--- a/src/components/Output/Print/MainSystems/index.svelte
+++ b/src/lib/components/Output/Print/MainSystems/index.svelte
@@ -1,6 +1,5 @@
 <div class="main_systems">
-
-  {#if ftl !== "none" }
+  {#if ftl !== "none"}
     <img class="ftl" src="icons/ftl-drive.svg" alt="ftl drive" />
   {/if}
 
@@ -8,13 +7,16 @@
     <div class="thrust">{engine}</div>
   {/if}
 
-  <img class="internal" src="icons/internal-systems.svg" alt="internal systems"/>
-  </div>
+  <img
+    class="internal"
+    src="icons/internal-systems.svg"
+    alt="internal systems"
+  />
+</div>
 
 <script>
-  export let ftl = 'none';
+  export let ftl = "none";
   export let engine = 0;
-
 </script>
 
 <style>
@@ -27,14 +29,16 @@
     line-height: 2em;
     text-align: center;
   }
-.main_systems {
-  display: flex;
-  align-items: center;
-  gap: 1em;
-  justify-content: space-evenly;
-  margin-top: 1em;
-}
-  img.ftl { height: 2em; }
+  .main_systems {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    justify-content: space-evenly;
+    margin-top: 1em;
+  }
+  img.ftl {
+    height: 2em;
+  }
   img.internal {
     height: 2em;
   }
diff --git a/src/lib/components/Output/Print/MainSystems/stories.js b/src/lib/components/Output/Print/MainSystems/stories.js
new file mode 100644
index 0000000..91910bb
--- /dev/null
+++ b/src/lib/components/Output/Print/MainSystems/stories.js
@@ -0,0 +1,13 @@
+import Component from ".";
+
+export default {
+  title: "printouts/main_systems",
+};
+
+export const basic = () => ({
+  Component,
+  props: {
+    ftl: "standard",
+    engine: 4,
+  },
+});
diff --git a/src/components/Output/Print/Systems/Firecons/index.svelte b/src/lib/components/Output/Print/Systems/Firecons/index.svelte
similarity index 100%
rename from src/components/Output/Print/Systems/Firecons/index.svelte
rename to src/lib/components/Output/Print/Systems/Firecons/index.svelte
diff --git a/src/components/Output/Print/Systems/Screens/index.svelte b/src/lib/components/Output/Print/Systems/Screens/index.svelte
similarity index 76%
rename from src/components/Output/Print/Systems/Screens/index.svelte
rename to src/lib/components/Output/Print/Systems/Screens/index.svelte
index b9675b9..5272361 100644
--- a/src/components/Output/Print/Systems/Screens/index.svelte
+++ b/src/lib/components/Output/Print/Systems/Screens/index.svelte
@@ -1,15 +1,14 @@
 <div>
-  {#each _.range(standard) as i }
+  {#each _.range(standard) as i}
     <img src="icons/screen.svg" alt="screen" />
   {/each}
-  {#each _.range(advanced) as i }
+  {#each _.range(advanced) as i}
     <img src="icons/screen-advanced.svg" alt="advanced screen" />
   {/each}
-
 </div>
 
 <script>
-  import _ from 'lodash';
+  import _ from "lodash";
 
   export let standard = 0;
   export let advanced = 0;
diff --git a/src/components/Output/Print/Systems/index.svelte b/src/lib/components/Output/Print/Systems/index.svelte
similarity index 68%
rename from src/components/Output/Print/Systems/index.svelte
rename to src/lib/components/Output/Print/Systems/index.svelte
index f325e8c..5b3dbaa 100644
--- a/src/components/Output/Print/Systems/index.svelte
+++ b/src/lib/components/Output/Print/Systems/index.svelte
@@ -1,16 +1,15 @@
 <div>
-  <Firecons {firecons}/>
+  <Firecons {firecons} />
 
   <Screens {...screens} />
 </div>
 
 <script>
-  import Firecons from './Firecons/index.svelte';
-  import Screens from './Screens/index.svelte';
+  import Firecons from "./Firecons/index.svelte";
+  import Screens from "./Screens/index.svelte";
 
   export let firecons = 0;
   export let screens = {};
-
 </script>
 
 <style>
@@ -23,6 +22,5 @@
   }
   div > :global(*) {
     margin-bottom: 1em;
-
   }
-  </style>
+</style>
diff --git a/src/components/Output/Print/Weapons/Beam/index.svelte b/src/lib/components/Output/Print/Weapons/Beam/index.svelte
similarity index 78%
rename from src/components/Output/Print/Weapons/Beam/index.svelte
rename to src/lib/components/Output/Print/Weapons/Beam/index.svelte
index 1ffdc98..899a8bd 100644
--- a/src/components/Output/Print/Weapons/Beam/index.svelte
+++ b/src/lib/components/Output/Print/Weapons/Beam/index.svelte
@@ -1,13 +1,13 @@
 <div>
   <Arcs selected={arcs} size="40">
-    <text x="50%" y="50%" >
-    {weapon_class}
+    <text x="50%" y="50%">
+      {weapon_class}
     </text>
   </Arcs>
 </div>
 
 <script>
-  import Arcs from '$lib/components/Weapon/Arcs/index.svelte';
+  import Arcs from "$lib/components/Weapon/Arcs/index.svelte";
   export let weapon_class = 1;
   export let arcs = [];
 </script>
diff --git a/src/components/Output/Print/Weapons/index.svelte b/src/lib/components/Output/Print/Weapons/index.svelte
similarity index 58%
rename from src/components/Output/Print/Weapons/index.svelte
rename to src/lib/components/Output/Print/Weapons/index.svelte
index b8e1e85..edb7d6f 100644
--- a/src/components/Output/Print/Weapons/index.svelte
+++ b/src/lib/components/Output/Print/Weapons/index.svelte
@@ -1,21 +1,17 @@
 <div class="weapons">
-
   <div class="beams">
-  {#each beams as beam}
-    <Beam {...beam} />
-  {/each}
+    {#each beams as beam}
+      <Beam {...beam} />
+    {/each}
   </div>
-
-
 </div>
 
 <script>
-  import Beam from './Beam/index.svelte';
+  import Beam from "./Beam/index.svelte";
   export let weapons = [];
 
   let beams = [];
-  $: beams = weapons.filter( ({ weapon_type }) => weapon_type === 'beam' );
-
+  $: beams = weapons.filter(({ weapon_type }) => weapon_type === "beam");
 </script>
 
 <style>
diff --git a/src/lib/components/Output/Print/Weapons/stories.js b/src/lib/components/Output/Print/Weapons/stories.js
new file mode 100644
index 0000000..a790427
--- /dev/null
+++ b/src/lib/components/Output/Print/Weapons/stories.js
@@ -0,0 +1,28 @@
+import Component from ".";
+
+export default {
+  title: "printouts/weapons",
+};
+
+export const basic = () => ({
+  Component,
+  props: {
+    weapons: [
+      {
+        weapon_type: "submunition",
+        arcs: ["F"],
+        mass: 1,
+        cost: 3,
+        id: 1,
+      },
+      {
+        weapon_type: "beam",
+        weapon_class: "2",
+        arcs: ["A", "AS", "FS"],
+        mass: 2,
+        cost: 6,
+        id: 2,
+      },
+    ],
+  },
+});
diff --git a/src/lib/components/Output/Print/index.svelte b/src/lib/components/Output/Print/index.svelte
new file mode 100644
index 0000000..d8328f9
--- /dev/null
+++ b/src/lib/components/Output/Print/index.svelte
@@ -0,0 +1,44 @@
+<aside class="ship-sheet" transition:fade>
+  <Identification {...ship.general} />
+
+  <Weapons weapons={ship.weaponry.weapons} />
+
+  <div class="section-2">
+    <Hull structure={ship.structure} ship_mass={ship.general.mass} />
+
+    <Systems
+      firecons={ship.weaponry.firecons.nbr}
+      screens={ship.structure.screens}
+    />
+  </div>
+
+  <MainSystems ftl={ship.ftl.type} engine={ship.engine.rating} />
+</aside>
+
+<script>
+  import _ from "lodash";
+
+  import Identification from "./Identification/index.svelte";
+  import MainSystems from "./MainSystems/index.svelte";
+  import Hull from "./Hull/index.svelte";
+  import Weapons from "./Weapons/index.svelte";
+  import Systems from "./Systems/index.svelte";
+
+  export let ship;
+
+  import { fly, fade } from "svelte/transition";
+</script>
+
+<style>
+  .ship-sheet {
+    width: 4.25in;
+    height: 5.5in;
+    border: 1px solid black;
+    padding: 1em;
+  }
+
+  .section-2 {
+    display: flex;
+    align-items: start;
+  }
+</style>
diff --git a/src/lib/components/Output/Print/sample.js b/src/lib/components/Output/Print/sample.js
new file mode 100644
index 0000000..4c356b3
--- /dev/null
+++ b/src/lib/components/Output/Print/sample.js
@@ -0,0 +1,108 @@
+export default {
+  ftl: {
+    mass: 0,
+    cost: 0,
+    type: "standard",
+  },
+  engine: {
+    mass: 40,
+    cost: 80,
+    rating: 6,
+    advanced: false,
+  },
+  general: {
+    ship_class: "Deviant",
+    name: "",
+    ship_type: "Battleship",
+    mass: 132,
+    used_mass: 131,
+    cost: 415,
+  },
+  weaponry: {
+    firecons: {
+      nbr: 5,
+      mass: 5,
+      cost: 20,
+    },
+    weapons: [
+      {
+        weapon_type: "submunition",
+        arcs: ["F"],
+        mass: 1,
+        cost: 3,
+        id: 1,
+      },
+      {
+        weapon_type: "beam",
+        weapon_class: "2",
+        arcs: ["A", "AS", "FS"],
+        mass: 2,
+        cost: 6,
+        id: 2,
+      },
+      {
+        weapon_type: "pds",
+        mass: 1,
+        cost: 3,
+        id: 3,
+      },
+    ],
+    adfc: {
+      rating: 0,
+      cost: 0,
+      mass: 0,
+    },
+  },
+  structure: {
+    mass: 0,
+    cost: 0,
+    hull: {
+      rating: 22,
+      advanced: false,
+      cost: 44,
+      mass: 22,
+    },
+    screens: {
+      standard: 2,
+      advanced: 1,
+      cost: 105,
+      mass: 35,
+    },
+    armour: [
+      {
+        layer: 1,
+        rating: 7,
+        cost: 14,
+        mass: 14,
+      },
+      {
+        layer: 2,
+        rating: 2,
+        cost: 8,
+        mass: 4,
+      },
+      {
+        layer: 3,
+        rating: 0,
+        cost: 0,
+        mass: 0,
+      },
+    ],
+  },
+  cargo: {
+    space: 7,
+    cost: 0,
+    mass: 7,
+  },
+  streamlining: {
+    type: "none",
+    cost: 0,
+    mass: 0,
+  },
+  carrier: {
+    bays: 0,
+    cost: 0,
+    mass: 0,
+    squadrons: [],
+  },
+};
diff --git a/src/lib/components/Output/Print/stories.js b/src/lib/components/Output/Print/stories.js
new file mode 100644
index 0000000..858e5c1
--- /dev/null
+++ b/src/lib/components/Output/Print/stories.js
@@ -0,0 +1,13 @@
+import Print from "./index.svelte";
+import sample from "./sample";
+
+export default {
+  title: "printouts",
+};
+
+export const basic = () => ({
+  Component: Print,
+  props: {
+    ship: sample,
+  },
+});
diff --git a/src/lib/components/Propulsion/index.svelte b/src/lib/components/Propulsion/index.svelte
new file mode 100644
index 0000000..26276dc
--- /dev/null
+++ b/src/lib/components/Propulsion/index.svelte
@@ -0,0 +1,14 @@
+<Section label="propulsion">
+  <Engine {...engine} on:change_engine />
+
+  <Ftl {...ftl} on:change_ftl />
+</Section>
+
+<script>
+  import Ftl from "../Ftl/index.svelte";
+  import Engine from "../Engine/index.svelte";
+  import Section from "../Section/index.svelte";
+
+  export let ftl = {};
+  export let engine = {};
+</script>
diff --git a/src/components/Ribbon.svelte b/src/lib/components/Ribbon.svelte
similarity index 100%
rename from src/components/Ribbon.svelte
rename to src/lib/components/Ribbon.svelte
diff --git a/src/components/Section/index.svelte b/src/lib/components/Section/index.svelte
similarity index 99%
rename from src/components/Section/index.svelte
rename to src/lib/components/Section/index.svelte
index 19f58d5..caf4f94 100644
--- a/src/components/Section/index.svelte
+++ b/src/lib/components/Section/index.svelte
@@ -7,7 +7,6 @@
 
 <script>
   export let label;
-
 </script>
 
 <style>
@@ -24,5 +23,4 @@
     flex: 1;
     background: #333;
   }
-
 </style>
diff --git a/src/components/ShipItem/index.svelte b/src/lib/components/ShipItem/index.svelte
similarity index 77%
rename from src/components/ShipItem/index.svelte
rename to src/lib/components/ShipItem/index.svelte
index c1e9d59..7b5f447 100644
--- a/src/components/ShipItem/index.svelte
+++ b/src/lib/components/ShipItem/index.svelte
@@ -1,7 +1,11 @@
-<div><slot /></div>
+<div class="ship-item">
+  <div><slot /></div>
 
-<div class="mass" bind:this={mass_el}>{mass}</div>
-<div class="cost" bind:this={cost_el}>{cost}</div>
+  <div class="reqs">
+    <div class="mass" bind:this={mass_el}>{mass}</div>
+    <div class="cost" bind:this={cost_el}>{cost}</div>
+  </div>
+</div>
 
 <script>
   import { tick } from "svelte";
@@ -21,24 +25,19 @@
 
   $: update_el(mass_el, mass);
   $: update_el(cost_el, cost);
-
 </script>
 
 <style>
   div {
     margin-bottom: 1em;
   }
+
   .cost,
   .mass {
-    padding: 0px 2em;
+    width: 4em;
+    padding: 0px 0.5em;
     text-align: right;
   }
-  .cost {
-    grid-column: 3;
-  }
-  .mass {
-    grid-column: 2;
-  }
 
   .ship-item {
     display: flex;
@@ -87,4 +86,12 @@
     }
   }
 
+  .ship-item {
+    display: flex;
+  }
+  .reqs {
+    flex: 0;
+    width: 10em;
+    display: flex;
+  }
 </style>
diff --git a/src/lib/components/ShipSpecs/Identification.svelte b/src/lib/components/ShipSpecs/Identification.svelte
new file mode 100644
index 0000000..7180a1e
--- /dev/null
+++ b/src/lib/components/ShipSpecs/Identification.svelte
@@ -0,0 +1,49 @@
+<div>
+  <Field
+    label="ship class"
+    value={general.ship_class}
+    on:change={change_class}
+  />
+
+  <Field label="ship type">
+    <select value={ship_type} on:change={change_ship_type}>
+      {#each ship_types as type (type)}
+        <option>{type}</option>
+      {/each}
+    </select>
+  </Field>
+</div>
+
+<script>
+  import { getContext } from "svelte";
+
+  import Field from "$lib/components/Field/index.svelte";
+  import { candidate_ship_types } from "../../dux/ship_types";
+
+  export let ship = getContext("ship");
+  let general;
+  $: general = $ship.general;
+
+  const change_class = (event) =>
+    ship.dispatch(ship.actions.set_ship_class(event.target.value));
+
+  let ship_type;
+  $: ship_type = $ship.general.ship_type;
+
+  const change_ship_type = ({ target: { value } }) =>
+    ship.dispatch.set_ship_type(value);
+
+  let ship_types;
+  $: ship_types = candidate_ship_types(
+    $ship.general.mass,
+    $ship.carrier.bays > 0
+  ).map(({ name }) => name);
+</script>
+
+<style>
+  div {
+    display: flex;
+    align-items: end;
+    gap: 2em;
+  }
+</style>
diff --git a/src/components/ShipSpecs/ShipCost.svelte b/src/lib/components/ShipSpecs/ShipCost.svelte
similarity index 86%
rename from src/components/ShipSpecs/ShipCost.svelte
rename to src/lib/components/ShipSpecs/ShipCost.svelte
index f5337c2..13cd8de 100644
--- a/src/components/ShipSpecs/ShipCost.svelte
+++ b/src/lib/components/ShipSpecs/ShipCost.svelte
@@ -5,8 +5,9 @@
       on:change={change_tonnage}
       type="number"
       min="10"
-      max="300" />
-    <span class="mass_symbol"></span>
+      max="300"
+    />
+    <span class="mass_symbol" />
 
     <div class="note" class:warning={!within_budget}>
       {#if within_budget}
@@ -18,7 +19,8 @@
 
 <div class="cost">
   <Field label="cost">
-    <span class="cost">{$ship.general.cost}</span></Field>
+    <span class="cost">{$ship.general.cost}</span></Field
+  >
 </div>
 
 <script>
@@ -60,8 +62,10 @@
     font-size: smaller;
   }
 
-  .mass,div.cost {
-    padding: 0px 2em; justify-self: right;
+  .mass,
+  div.cost {
+    padding: 0px 2em;
+    justify-self: right;
   }
 
   .mass {
@@ -71,7 +75,7 @@
     grid-column: 3;
   }
   span.cost:after {
-    content: '\00A4';
+    content: "\00A4";
     margin-left: 0.5em;
   }
 </style>
diff --git a/src/components/ShipSpecs/index.svelte b/src/lib/components/ShipSpecs/index.svelte
similarity index 66%
rename from src/components/ShipSpecs/index.svelte
rename to src/lib/components/ShipSpecs/index.svelte
index 87d0d57..a564076 100644
--- a/src/components/ShipSpecs/index.svelte
+++ b/src/lib/components/ShipSpecs/index.svelte
@@ -1,16 +1,14 @@
-  <Identification />
-
-  <ShipCost />
+<Identification />
 
+<ShipCost />
 
 <script>
   import Identification from "./Identification.svelte";
   import ShipCost from "./ShipCost.svelte";
-
 </script>
 
 <style>
-div {
-  background-color: red;
-}
+  div {
+    background-color: red;
+  }
 </style>
diff --git a/src/lib/components/Weapon/Arcs/index.svelte b/src/lib/components/Weapon/Arcs/index.svelte
new file mode 100644
index 0000000..682bc8a
--- /dev/null
+++ b/src/lib/components/Weapon/Arcs/index.svelte
@@ -0,0 +1,32 @@
+<svg width="{size}px" height="{size}px">
+  {#each all_arcs as arc (arc)}
+    <Arc
+      {arc}
+      radius={size / 2}
+      active={selected.includes(arc)}
+      on:click={() => click_arc(arc)}
+    />
+  {/each}
+  <circle cx="50%" cy="50%" r={size / 3} />
+  <slot />
+</svg>
+
+<script>
+  import Arc from "../../Weapons/Arc.svelte";
+  import { createEventDispatcher } from "svelte";
+
+  const all_arcs = ["FS", "F", "FP", "AP", "A", "AS"];
+
+  export let selected = [];
+  export let size = 60;
+
+  const dispatch = createEventDispatcher();
+
+  const click_arc = (arc) => dispatch("click_arc", arc);
+</script>
+
+<style>
+  circle {
+    fill: white;
+  }
+</style>
diff --git a/src/components/Weapon/Beam/index.svelte b/src/lib/components/Weapon/Beam/index.svelte
similarity index 99%
rename from src/components/Weapon/Beam/index.svelte
rename to src/lib/components/Weapon/Beam/index.svelte
index 6269277..b0fc2c4 100644
--- a/src/components/Weapon/Beam/index.svelte
+++ b/src/lib/components/Weapon/Beam/index.svelte
@@ -93,7 +93,6 @@
     weapon_class,
     arcs: cache.split(":"),
   });
-
 </script>
 
 <style>
@@ -102,5 +101,4 @@
     flex-direction: column;
     margin-right: 1em;
   }
-
 </style>
diff --git a/src/lib/components/Weapon/Needle/index.svelte b/src/lib/components/Weapon/Needle/index.svelte
new file mode 100644
index 0000000..dff20ee
--- /dev/null
+++ b/src/lib/components/Weapon/Needle/index.svelte
@@ -0,0 +1,35 @@
+<label> needle weapon</label>
+<Arcs selected={arcs} on:click_arc={({ detail }) => click_arc(detail)} />
+
+<script>
+  import { getContext } from "svelte";
+  import Arcs from "../Arcs/index.svelte";
+  import dux from "$lib/dux";
+  import { createEventDispatcher } from "svelte";
+
+  const all_arcs = ["FS", "F", "FP", "AP", "A", "AS"];
+
+  export let arcs = ["F"];
+  export let ship_change = getContext("ship_change") || (() => {});
+
+  const click_arc = (arc) => {
+    if (arcs[0] === arc) return;
+    arcs = [arc];
+  };
+
+  const dispatch = createEventDispatcher();
+  let cache;
+  $: cache = arcs.join(":");
+
+  $: dispatch("change", {
+    arcs: cache.split(":"),
+  });
+</script>
+
+<style>
+  .arc {
+    display: flex;
+    flex-direction: column;
+    margin-right: 1em;
+  }
+</style>
diff --git a/src/components/Weapon/PointDefenceSystem/index.svelte b/src/lib/components/Weapon/PointDefenceSystem/index.svelte
similarity index 97%
rename from src/components/Weapon/PointDefenceSystem/index.svelte
rename to src/lib/components/Weapon/PointDefenceSystem/index.svelte
index 27f4aa9..6c9c9ef 100644
--- a/src/components/Weapon/PointDefenceSystem/index.svelte
+++ b/src/lib/components/Weapon/PointDefenceSystem/index.svelte
@@ -1,2 +1 @@
 <label>point defence system</label>
-
diff --git a/src/components/Weapon/Scattergun/index.svelte b/src/lib/components/Weapon/Scattergun/index.svelte
similarity index 96%
rename from src/components/Weapon/Scattergun/index.svelte
rename to src/lib/components/Weapon/Scattergun/index.svelte
index de8a6e0..8910b00 100644
--- a/src/components/Weapon/Scattergun/index.svelte
+++ b/src/lib/components/Weapon/Scattergun/index.svelte
@@ -1,2 +1 @@
 <label>scattergun</label>
-
diff --git a/src/lib/components/Weapon/Submunition/index.svelte b/src/lib/components/Weapon/Submunition/index.svelte
new file mode 100644
index 0000000..27174cb
--- /dev/null
+++ b/src/lib/components/Weapon/Submunition/index.svelte
@@ -0,0 +1,35 @@
+<label> submunition pack</label>
+<Arcs selected={arcs} on:click_arc={({ detail }) => click_arc(detail)} />
+
+<script>
+  import { getContext } from "svelte";
+  import Arcs from "../Arcs/index.svelte";
+  import dux from "$lib/dux";
+  import { createEventDispatcher } from "svelte";
+
+  const all_arcs = ["FS", "F", "FP", "AP", "A", "AS"];
+
+  export let arcs = ["F"];
+  export let ship_change = getContext("ship_change") || (() => {});
+
+  const click_arc = (arc) => {
+    if (arcs[0] === arc) return;
+    arcs = [arc];
+  };
+
+  const dispatch = createEventDispatcher();
+  let cache;
+  $: cache = arcs.join(":");
+
+  $: dispatch("change", {
+    arcs: cache.split(":"),
+  });
+</script>
+
+<style>
+  .arc {
+    display: flex;
+    flex-direction: column;
+    margin-right: 1em;
+  }
+</style>
diff --git a/src/components/Weapon/index.svelte b/src/lib/components/Weapon/index.svelte
similarity index 99%
rename from src/components/Weapon/index.svelte
rename to src/lib/components/Weapon/index.svelte
index df422ee..fea53a2 100644
--- a/src/components/Weapon/index.svelte
+++ b/src/lib/components/Weapon/index.svelte
@@ -56,7 +56,6 @@
       ...detail,
     });
   };
-
 </script>
 
 <style>
@@ -124,5 +123,4 @@
   .weapon_row > :global(*) {
     margin-right: 2em;
   }
-
 </style>
diff --git a/src/components/Weaponry/ADFC/index.svelte b/src/lib/components/Weaponry/ADFC/index.svelte
similarity index 89%
rename from src/components/Weaponry/ADFC/index.svelte
rename to src/lib/components/Weaponry/ADFC/index.svelte
index 4a4e641..d574045 100644
--- a/src/components/Weaponry/ADFC/index.svelte
+++ b/src/lib/components/Weaponry/ADFC/index.svelte
@@ -4,7 +4,6 @@
   </Field>
 </ShipItem>
 
-
 <script>
   import ShipItem from "../../ShipItem/index.svelte";
   import Field from "../../Field/index.svelte";
@@ -16,5 +15,5 @@
   export let mass = 0;
   export let ship = getContext("ship");
 
-  $: ship?.dispatch_action('set_adfc',rating);
+  $: ship?.dispatch_action("set_adfc", rating);
 </script>
diff --git a/src/components/Weaponry/AddWeapon/index.svelte b/src/lib/components/Weaponry/AddWeapon/index.svelte
similarity index 99%
rename from src/components/Weaponry/AddWeapon/index.svelte
rename to src/lib/components/Weaponry/AddWeapon/index.svelte
index f6e66ba..6cfe6c2 100644
--- a/src/components/Weaponry/AddWeapon/index.svelte
+++ b/src/lib/components/Weaponry/AddWeapon/index.svelte
@@ -23,5 +23,4 @@
   export let ship = getContext("ship");
 
   const add_weapon = () => ship?.dispatch_action("add_weapon", weapon_type);
-
 </script>
diff --git a/src/lib/components/Weapons/Add.svelte b/src/lib/components/Weapons/Add.svelte
new file mode 100644
index 0000000..8cf4bf1
--- /dev/null
+++ b/src/lib/components/Weapons/Add.svelte
@@ -0,0 +1,194 @@
+<input
+  class="add-weapon button small blue"
+  type="button"
+  value="add"
+  on:click={add}
+/>
+
+<div class="weapon">
+  <select bind:value={weapon_type}>
+    <option>beam</option>
+  </select>
+
+  <select bind:value={weapon_class}>
+    <option>1</option>
+    <option>2</option>
+    <option>3</option>
+    <option>4</option>
+  </select>
+
+  <select bind:value={nbr_arcs}>
+    {#each arc_options[weapon_class] as opt (opt)}
+      <option>{opt}</option>
+    {/each}
+  </select>
+
+  <svg width="60px" height="60px">
+    {#each arcs as arc (arc)}
+      <Arc
+        {arc}
+        radius={30}
+        active={selected_arc[arc]}
+        on:click={() => click_arc(arc)}
+      />
+    {/each}
+    <circle cx="30" cy="30" r="15" />
+  </svg>
+
+  <div>{weapon.cost}</div>
+  <div>{weapon.mass}</div>
+</div>
+
+<script>
+  let weapon_type = "beam";
+  let weapon_class = 1;
+  let nbr_arcs = 6;
+  $: nbr_arcs = arc_options[weapon_class][0];
+
+  import Arc from "./Arc.svelte";
+  import { weapon_cost_mass } from "../../dux/weapons/rules.js";
+
+  const arcs = ["FS", "F", "FP", "AP", "A", "AS"];
+
+  import _ from "lodash";
+  import { createEventDispatcher } from "svelte";
+
+  let arc_options = {
+    1: [6],
+    2: [3, 6],
+    3: [1, 2, 3, 4, 5, 6, "broadside"],
+    4: [1, 2, 3, 4, 5, 6, "broadside"],
+  };
+
+  let selected_arc = Object.fromEntries(arcs.map((arc) => [arc, false]));
+
+  const nbr_selected_arcs = () =>
+    Object.values(selected_arc).filter((x) => x).length;
+
+  $: if (nbr_selected_arcs() !== nbr_arcs) {
+    if (nbr_arcs === "broadside") {
+      const new_arcs = {};
+      arcs.forEach((arc) => (new_arcs[arc] = true));
+      new_arcs.A = false;
+      new_arcs.F = false;
+      selected_arc = new_arcs;
+    } else {
+      let first_index = arcs.findIndex((arc) => selected_arc[arc]);
+      if (first_index === -1) first_index = 0;
+
+      const new_arcs = {};
+      arcs.forEach((arc) => (new_arcs[arc] = false));
+
+      _.range(nbr_arcs).forEach((i) => {
+        new_arcs[arcs[first_index]] = true;
+        first_index = (first_index + 1) % arcs.length;
+      });
+
+      selected_arc = new_arcs;
+    }
+  }
+
+  const click_arc = (first_arc) => {
+    if (nbr_arcs === "broadside") return;
+
+    let first_index = arcs.findIndex((arc) => arc === first_arc);
+
+    const new_arcs = {};
+    arcs.forEach((arc) => (new_arcs[arc] = false));
+
+    _.range(nbr_arcs).forEach((i) => {
+      console.log(first_index);
+      console.log(selected_arc);
+      new_arcs[arcs[first_index]] = true;
+      first_index = (first_index + 1) % arcs.length;
+    });
+
+    selected_arc = new_arcs;
+  };
+
+  let weapon = {};
+  $: weapon = {
+    weapon_type,
+    weapon_class,
+    arcs,
+    ...weapon_cost_mass({
+      weapon_type,
+      weapon_class,
+      arcs: arcs.filter((arc) => selected_arc[arc]),
+    }),
+  };
+
+  const dispatch = createEventDispatcher();
+
+  const add = () => {
+    dispatch("add_weapon", weapon);
+  };
+</script>
+
+<style>
+  .weapon {
+    display: flex;
+    align-items: center;
+  }
+
+  .weapon > * {
+    margin-right: 2em;
+  }
+
+  .arcs {
+    display: grid;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    align-items: center;
+    justify-items: center;
+    width: 6em;
+  }
+
+  .arc input {
+    margin: 0px;
+  }
+
+  .arc.F {
+    grid-column: 2 / span 2;
+    grid-row: 1;
+  }
+
+  .arc.FS {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+  }
+
+  .arc.FP {
+    grid-column: 4;
+    grid-row: 1 / span 2;
+  }
+
+  .arc.AS {
+    grid-column: 1;
+    grid-row: 3 / span 2;
+  }
+
+  .arc.AP {
+    grid-column: 4;
+    grid-row: 3 / span 2;
+  }
+
+  .arc.A {
+    grid-column: 2 / span 2;
+    grid-row: 4;
+  }
+
+  .arc {
+    display: flex;
+    flex-direction: column;
+    margin-right: 1em;
+  }
+
+  .add-weapon {
+    display: block;
+  }
+
+  circle {
+    fill: white;
+  }
+</style>
diff --git a/src/lib/components/Weapons/Arc.svelte b/src/lib/components/Weapons/Arc.svelte
new file mode 100644
index 0000000..47a73a0
--- /dev/null
+++ b/src/lib/components/Weapons/Arc.svelte
@@ -0,0 +1,50 @@
+<g {transform}>
+  <path d={path} class:active on:click />
+</g>
+
+<script>
+  export let arc;
+  export let radius;
+  export let active = false;
+
+  const rotation = {
+    F: 0,
+    FS: 300,
+    AS: 240,
+    A: 180,
+    AP: 120,
+    FP: 60,
+  };
+
+  let y, x_delta;
+  $: y = Math.round(radius * (1 - Math.sin((60 / 180) * Math.PI)));
+  $: x_delta = Math.round(radius * Math.cos((60 / 180) * Math.PI));
+
+  let path;
+  $: path = `M ${radius},${radius} L ${
+    radius - x_delta
+  },${y} A ${radius},${radius} 0 0 1 ${radius + x_delta},${y} Z`;
+
+  let transform;
+  $: transform = `rotate(${rotation[arc]},${radius},${radius})`;
+</script>
+
+<style>
+  path {
+    fill: lightgrey;
+    stroke: white;
+    stroke-width: 2px;
+  }
+
+  path:hover {
+    fill: pink;
+  }
+
+  path.active:hover {
+    fill: pink;
+  }
+
+  path.active {
+    fill: #313131;
+  }
+</style>
diff --git a/src/lib/components/Weapons/stories.js b/src/lib/components/Weapons/stories.js
new file mode 100644
index 0000000..f3923fe
--- /dev/null
+++ b/src/lib/components/Weapons/stories.js
@@ -0,0 +1,9 @@
+import AddWeapon from "./Add.svelte";
+
+export default {
+  title: "add weapon",
+};
+
+export const beam = () => ({
+  Component: AddWeapon,
+});
diff --git a/src/lib/style/index.css b/src/lib/style/index.css
new file mode 100644
index 0000000..2717525
--- /dev/null
+++ b/src/lib/style/index.css
@@ -0,0 +1,4 @@
+:root {
+  --main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
diff --git a/src/lib/style/index.js b/src/lib/style/index.js
new file mode 100644
index 0000000..53d4749
--- /dev/null
+++ b/src/lib/style/index.js
@@ -0,0 +1,4 @@
+import "../../../static/fonts/faktos.css";
+import "../../../static/fonts/dosis/dosis.css";
+import "../../../static/global.css";
+import "./index.css";
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index c7121fd..c4ec81d 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,20 +1,9 @@
 <App />
 
-<svelte:head>
-  {#each stylesheets as href (href)}
-    <link rel="stylesheet" {href} />
-  {/each}
-</svelte:head>
-
 <script>
-  import { base } from "$app/paths";
-  import App from "../components/App.svelte";
-
-  const stylesheets = [
-    "/bulma/bulma.css",
-    "/fonts/faktos.css",
-    "/fonts/dosis/dosis.css",
-    "/global.css",
-  ].map((ss) => base + ss);
+  import "../../static/fonts/faktos.css";
+  import "../../static/fonts/dosis/dosis.css";
+  import "../../static/global.css";
 
+  import App from "$lib/components/App.svelte";
 </script>
diff --git a/public/bulma/bulma-rtl.css b/static/bulma/bulma-rtl.css
similarity index 100%
rename from public/bulma/bulma-rtl.css
rename to static/bulma/bulma-rtl.css
diff --git a/public/bulma/bulma-rtl.css.map b/static/bulma/bulma-rtl.css.map
similarity index 100%
rename from public/bulma/bulma-rtl.css.map
rename to static/bulma/bulma-rtl.css.map
diff --git a/public/bulma/bulma-rtl.min.css b/static/bulma/bulma-rtl.min.css
similarity index 100%
rename from public/bulma/bulma-rtl.min.css
rename to static/bulma/bulma-rtl.min.css
diff --git a/public/bulma/bulma.css b/static/bulma/bulma.css
similarity index 100%
rename from public/bulma/bulma.css
rename to static/bulma/bulma.css
diff --git a/public/bulma/bulma.css.map b/static/bulma/bulma.css.map
similarity index 100%
rename from public/bulma/bulma.css.map
rename to static/bulma/bulma.css.map
diff --git a/public/bulma/bulma.min.css b/static/bulma/bulma.min.css
similarity index 100%
rename from public/bulma/bulma.min.css
rename to static/bulma/bulma.min.css
diff --git a/public/css/buttons.css b/static/css/buttons.css
similarity index 100%
rename from public/css/buttons.css
rename to static/css/buttons.css
diff --git a/public/favicon.ico b/static/favicon.ico
similarity index 100%
rename from public/favicon.ico
rename to static/favicon.ico
diff --git a/public/favicon.png b/static/favicon.png
similarity index 100%
rename from public/favicon.png
rename to static/favicon.png
diff --git a/public/fonts/Faktos.ttf b/static/fonts/Faktos.ttf
similarity index 100%
rename from public/fonts/Faktos.ttf
rename to static/fonts/Faktos.ttf
diff --git a/public/fonts/FaktosContour.ttf b/static/fonts/FaktosContour.ttf
similarity index 100%
rename from public/fonts/FaktosContour.ttf
rename to static/fonts/FaktosContour.ttf
diff --git a/public/fonts/FaktosOutline.ttf b/static/fonts/FaktosOutline.ttf
similarity index 100%
rename from public/fonts/FaktosOutline.ttf
rename to static/fonts/FaktosOutline.ttf
diff --git a/public/fonts/FaktosShadow.ttf b/static/fonts/FaktosShadow.ttf
similarity index 100%
rename from public/fonts/FaktosShadow.ttf
rename to static/fonts/FaktosShadow.ttf
diff --git a/public/fonts/dosis/Dosis-VariableFont_wght.ttf b/static/fonts/dosis/Dosis-VariableFont_wght.ttf
similarity index 100%
rename from public/fonts/dosis/Dosis-VariableFont_wght.ttf
rename to static/fonts/dosis/Dosis-VariableFont_wght.ttf
diff --git a/public/fonts/dosis/OFL.txt b/static/fonts/dosis/OFL.txt
similarity index 100%
rename from public/fonts/dosis/OFL.txt
rename to static/fonts/dosis/OFL.txt
diff --git a/public/fonts/dosis/README.txt b/static/fonts/dosis/README.txt
similarity index 100%
rename from public/fonts/dosis/README.txt
rename to static/fonts/dosis/README.txt
diff --git a/public/fonts/dosis/dosis.css b/static/fonts/dosis/dosis.css
similarity index 100%
rename from public/fonts/dosis/dosis.css
rename to static/fonts/dosis/dosis.css
diff --git a/public/fonts/dosis/static/Dosis-Bold.ttf b/static/fonts/dosis/static/Dosis-Bold.ttf
similarity index 100%
rename from public/fonts/dosis/static/Dosis-Bold.ttf
rename to static/fonts/dosis/static/Dosis-Bold.ttf
diff --git a/public/fonts/dosis/static/Dosis-ExtraBold.ttf b/static/fonts/dosis/static/Dosis-ExtraBold.ttf
similarity index 100%
rename from public/fonts/dosis/static/Dosis-ExtraBold.ttf
rename to static/fonts/dosis/static/Dosis-ExtraBold.ttf
diff --git a/public/fonts/dosis/static/Dosis-ExtraLight.ttf b/static/fonts/dosis/static/Dosis-ExtraLight.ttf
similarity index 100%
rename from public/fonts/dosis/static/Dosis-ExtraLight.ttf
rename to static/fonts/dosis/static/Dosis-ExtraLight.ttf
diff --git a/public/fonts/dosis/static/Dosis-Light.ttf b/static/fonts/dosis/static/Dosis-Light.ttf
similarity index 100%
rename from public/fonts/dosis/static/Dosis-Light.ttf
rename to static/fonts/dosis/static/Dosis-Light.ttf
diff --git a/public/fonts/dosis/static/Dosis-Medium.ttf b/static/fonts/dosis/static/Dosis-Medium.ttf
similarity index 100%
rename from public/fonts/dosis/static/Dosis-Medium.ttf
rename to static/fonts/dosis/static/Dosis-Medium.ttf
diff --git a/public/fonts/dosis/static/Dosis-Regular.ttf b/static/fonts/dosis/static/Dosis-Regular.ttf
similarity index 100%
rename from public/fonts/dosis/static/Dosis-Regular.ttf
rename to static/fonts/dosis/static/Dosis-Regular.ttf
diff --git a/public/fonts/dosis/static/Dosis-SemiBold.ttf b/static/fonts/dosis/static/Dosis-SemiBold.ttf
similarity index 100%
rename from public/fonts/dosis/static/Dosis-SemiBold.ttf
rename to static/fonts/dosis/static/Dosis-SemiBold.ttf
diff --git a/public/fonts/fakto10.ttf b/static/fonts/fakto10.ttf
similarity index 100%
rename from public/fonts/fakto10.ttf
rename to static/fonts/fakto10.ttf
diff --git a/public/fonts/fakto9.ttf b/static/fonts/fakto9.ttf
similarity index 100%
rename from public/fonts/fakto9.ttf
rename to static/fonts/fakto9.ttf
diff --git a/public/fonts/faktos.css b/static/fonts/faktos.css
similarity index 100%
rename from public/fonts/faktos.css
rename to static/fonts/faktos.css
diff --git a/public/fonts/faktos.ttf b/static/fonts/faktos.ttf
similarity index 100%
rename from public/fonts/faktos.ttf
rename to static/fonts/faktos.ttf
diff --git a/public/global.css b/static/global.css
similarity index 100%
rename from public/global.css
rename to static/global.css
diff --git a/public/icons/crew-star.svg b/static/icons/crew-star.svg
similarity index 100%
rename from public/icons/crew-star.svg
rename to static/icons/crew-star.svg
diff --git a/public/icons/firecon.svg b/static/icons/firecon.svg
similarity index 100%
rename from public/icons/firecon.svg
rename to static/icons/firecon.svg
diff --git a/public/icons/ftl-drive.svg b/static/icons/ftl-drive.svg
similarity index 100%
rename from public/icons/ftl-drive.svg
rename to static/icons/ftl-drive.svg
diff --git a/public/icons/internal-systems.svg b/static/icons/internal-systems.svg
similarity index 100%
rename from public/icons/internal-systems.svg
rename to static/icons/internal-systems.svg
diff --git a/public/icons/screen-advanced.svg b/static/icons/screen-advanced.svg
similarity index 100%
rename from public/icons/screen-advanced.svg
rename to static/icons/screen-advanced.svg
diff --git a/public/icons/screen.svg b/static/icons/screen.svg
similarity index 100%
rename from public/icons/screen.svg
rename to static/icons/screen.svg
diff --git a/public/icons/standard-drive.svg b/static/icons/standard-drive.svg
similarity index 100%
rename from public/icons/standard-drive.svg
rename to static/icons/standard-drive.svg
diff --git a/public/mass.svg b/static/mass.svg
similarity index 100%
rename from public/mass.svg
rename to static/mass.svg
diff --git a/public/print.css b/static/print.css
similarity index 100%
rename from public/print.css
rename to static/print.css
diff --git a/public/ssd-icons/AADFC.svg b/static/ssd-icons/AADFC.svg
similarity index 100%
rename from public/ssd-icons/AADFC.svg
rename to static/ssd-icons/AADFC.svg
diff --git a/public/ssd-icons/ADS.svg b/static/ssd-icons/ADS.svg
similarity index 100%
rename from public/ssd-icons/ADS.svg
rename to static/ssd-icons/ADS.svg
diff --git a/public/ssd-icons/AMSuicide.svg b/static/ssd-icons/AMSuicide.svg
similarity index 100%
rename from public/ssd-icons/AMSuicide.svg
rename to static/ssd-icons/AMSuicide.svg
diff --git a/public/ssd-icons/AMT.svg b/static/ssd-icons/AMT.svg
similarity index 100%
rename from public/ssd-icons/AMT.svg
rename to static/ssd-icons/AMT.svg
diff --git a/public/ssd-icons/AdvFireCont2.svg b/static/ssd-icons/AdvFireCont2.svg
similarity index 100%
rename from public/ssd-icons/AdvFireCont2.svg
rename to static/ssd-icons/AdvFireCont2.svg
diff --git a/public/ssd-icons/Advanced FTL Drive.svg b/static/ssd-icons/Advanced FTL Drive.svg
similarity index 100%
rename from public/ssd-icons/Advanced FTL Drive.svg
rename to static/ssd-icons/Advanced FTL Drive.svg
diff --git a/public/ssd-icons/AlternativeIcon.svg b/static/ssd-icons/AlternativeIcon.svg
similarity index 100%
rename from public/ssd-icons/AlternativeIcon.svg
rename to static/ssd-icons/AlternativeIcon.svg
diff --git a/public/ssd-icons/AndvancedDrives (2).svg b/static/ssd-icons/AndvancedDrives (2).svg
similarity index 100%
rename from public/ssd-icons/AndvancedDrives (2).svg
rename to static/ssd-icons/AndvancedDrives (2).svg
diff --git a/public/ssd-icons/AndvancedDrives (3).svg b/static/ssd-icons/AndvancedDrives (3).svg
similarity index 100%
rename from public/ssd-icons/AndvancedDrives (3).svg
rename to static/ssd-icons/AndvancedDrives (3).svg
diff --git a/public/ssd-icons/AndvancedDrives (4).svg b/static/ssd-icons/AndvancedDrives (4).svg
similarity index 100%
rename from public/ssd-icons/AndvancedDrives (4).svg
rename to static/ssd-icons/AndvancedDrives (4).svg
diff --git a/public/ssd-icons/AndvancedDrives (5).svg b/static/ssd-icons/AndvancedDrives (5).svg
similarity index 100%
rename from public/ssd-icons/AndvancedDrives (5).svg
rename to static/ssd-icons/AndvancedDrives (5).svg
diff --git a/public/ssd-icons/AndvancedDrives (6).svg b/static/ssd-icons/AndvancedDrives (6).svg
similarity index 100%
rename from public/ssd-icons/AndvancedDrives (6).svg
rename to static/ssd-icons/AndvancedDrives (6).svg
diff --git a/public/ssd-icons/AndvancedDrives (7).svg b/static/ssd-icons/AndvancedDrives (7).svg
similarity index 100%
rename from public/ssd-icons/AndvancedDrives (7).svg
rename to static/ssd-icons/AndvancedDrives (7).svg
diff --git a/public/ssd-icons/AndvancedDrives (8).svg b/static/ssd-icons/AndvancedDrives (8).svg
similarity index 100%
rename from public/ssd-icons/AndvancedDrives (8).svg
rename to static/ssd-icons/AndvancedDrives (8).svg
diff --git a/public/ssd-icons/AndvancedDrives.svg b/static/ssd-icons/AndvancedDrives.svg
similarity index 100%
rename from public/ssd-icons/AndvancedDrives.svg
rename to static/ssd-icons/AndvancedDrives.svg
diff --git a/public/ssd-icons/AreaECM.svg b/static/ssd-icons/AreaECM.svg
similarity index 100%
rename from public/ssd-icons/AreaECM.svg
rename to static/ssd-icons/AreaECM.svg
diff --git a/public/ssd-icons/AreaScreens1.svg b/static/ssd-icons/AreaScreens1.svg
similarity index 100%
rename from public/ssd-icons/AreaScreens1.svg
rename to static/ssd-icons/AreaScreens1.svg
diff --git a/public/ssd-icons/AreaScreens2.svg b/static/ssd-icons/AreaScreens2.svg
similarity index 100%
rename from public/ssd-icons/AreaScreens2.svg
rename to static/ssd-icons/AreaScreens2.svg
diff --git a/public/ssd-icons/Beam1 (2).svg b/static/ssd-icons/Beam1 (2).svg
similarity index 100%
rename from public/ssd-icons/Beam1 (2).svg
rename to static/ssd-icons/Beam1 (2).svg
diff --git a/public/ssd-icons/Beam1.svg b/static/ssd-icons/Beam1.svg
similarity index 100%
rename from public/ssd-icons/Beam1.svg
rename to static/ssd-icons/Beam1.svg
diff --git a/public/ssd-icons/Beam2 (2).svg b/static/ssd-icons/Beam2 (2).svg
similarity index 100%
rename from public/ssd-icons/Beam2 (2).svg
rename to static/ssd-icons/Beam2 (2).svg
diff --git a/public/ssd-icons/Beam2.svg b/static/ssd-icons/Beam2.svg
similarity index 100%
rename from public/ssd-icons/Beam2.svg
rename to static/ssd-icons/Beam2.svg
diff --git a/public/ssd-icons/Beam3 (2).svg b/static/ssd-icons/Beam3 (2).svg
similarity index 100%
rename from public/ssd-icons/Beam3 (2).svg
rename to static/ssd-icons/Beam3 (2).svg
diff --git a/public/ssd-icons/Beam3.svg b/static/ssd-icons/Beam3.svg
similarity index 100%
rename from public/ssd-icons/Beam3.svg
rename to static/ssd-icons/Beam3.svg
diff --git a/public/ssd-icons/Beam4.svg b/static/ssd-icons/Beam4.svg
similarity index 100%
rename from public/ssd-icons/Beam4.svg
rename to static/ssd-icons/Beam4.svg
diff --git a/public/ssd-icons/Boarding Torps.svg b/static/ssd-icons/Boarding Torps.svg
similarity index 100%
rename from public/ssd-icons/Boarding Torps.svg
rename to static/ssd-icons/Boarding Torps.svg
diff --git a/public/ssd-icons/Capital Decoy.svg b/static/ssd-icons/Capital Decoy.svg
similarity index 100%
rename from public/ssd-icons/Capital Decoy.svg
rename to static/ssd-icons/Capital Decoy.svg
diff --git a/public/ssd-icons/Cargo Hold.svg b/static/ssd-icons/Cargo Hold.svg
similarity index 100%
rename from public/ssd-icons/Cargo Hold.svg
rename to static/ssd-icons/Cargo Hold.svg
diff --git a/public/ssd-icons/Cruiser Decoy.svg b/static/ssd-icons/Cruiser Decoy.svg
similarity index 100%
rename from public/ssd-icons/Cruiser Decoy.svg
rename to static/ssd-icons/Cruiser Decoy.svg
diff --git a/public/ssd-icons/DamageControl.svg b/static/ssd-icons/DamageControl.svg
similarity index 100%
rename from public/ssd-icons/DamageControl.svg
rename to static/ssd-icons/DamageControl.svg
diff --git a/public/ssd-icons/Defenses1.svg b/static/ssd-icons/Defenses1.svg
similarity index 100%
rename from public/ssd-icons/Defenses1.svg
rename to static/ssd-icons/Defenses1.svg
diff --git a/public/ssd-icons/Defenses2.svg b/static/ssd-icons/Defenses2.svg
similarity index 100%
rename from public/ssd-icons/Defenses2.svg
rename to static/ssd-icons/Defenses2.svg
diff --git a/public/ssd-icons/Defenses3.svg b/static/ssd-icons/Defenses3.svg
similarity index 100%
rename from public/ssd-icons/Defenses3.svg
rename to static/ssd-icons/Defenses3.svg
diff --git a/public/ssd-icons/Defenses4.svg b/static/ssd-icons/Defenses4.svg
similarity index 100%
rename from public/ssd-icons/Defenses4.svg
rename to static/ssd-icons/Defenses4.svg
diff --git a/public/ssd-icons/ECM.svg b/static/ssd-icons/ECM.svg
similarity index 100%
rename from public/ssd-icons/ECM.svg
rename to static/ssd-icons/ECM.svg
diff --git a/public/ssd-icons/EMP1.svg b/static/ssd-icons/EMP1.svg
similarity index 100%
rename from public/ssd-icons/EMP1.svg
rename to static/ssd-icons/EMP1.svg
diff --git a/public/ssd-icons/EMP2.svg b/static/ssd-icons/EMP2.svg
similarity index 100%
rename from public/ssd-icons/EMP2.svg
rename to static/ssd-icons/EMP2.svg
diff --git a/public/ssd-icons/EMP3.svg b/static/ssd-icons/EMP3.svg
similarity index 100%
rename from public/ssd-icons/EMP3.svg
rename to static/ssd-icons/EMP3.svg
diff --git a/public/ssd-icons/EMP4.svg b/static/ssd-icons/EMP4.svg
similarity index 100%
rename from public/ssd-icons/EMP4.svg
rename to static/ssd-icons/EMP4.svg
diff --git a/public/ssd-icons/Energy1.svg b/static/ssd-icons/Energy1.svg
similarity index 100%
rename from public/ssd-icons/Energy1.svg
rename to static/ssd-icons/Energy1.svg
diff --git a/public/ssd-icons/FTL Tug.svg b/static/ssd-icons/FTL Tug.svg
similarity index 100%
rename from public/ssd-icons/FTL Tug.svg
rename to static/ssd-icons/FTL Tug.svg
diff --git a/public/ssd-icons/FusionArray.svg b/static/ssd-icons/FusionArray.svg
similarity index 100%
rename from public/ssd-icons/FusionArray.svg
rename to static/ssd-icons/FusionArray.svg
diff --git a/public/ssd-icons/Gattling battery.svg b/static/ssd-icons/Gattling battery.svg
similarity index 100%
rename from public/ssd-icons/Gattling battery.svg
rename to static/ssd-icons/Gattling battery.svg
diff --git a/public/ssd-icons/GrapeShot.svg b/static/ssd-icons/GrapeShot.svg
similarity index 100%
rename from public/ssd-icons/GrapeShot.svg
rename to static/ssd-icons/GrapeShot.svg
diff --git a/public/ssd-icons/Gravity1.svg b/static/ssd-icons/Gravity1.svg
similarity index 100%
rename from public/ssd-icons/Gravity1.svg
rename to static/ssd-icons/Gravity1.svg
diff --git a/public/ssd-icons/Gravity2.svg b/static/ssd-icons/Gravity2.svg
similarity index 100%
rename from public/ssd-icons/Gravity2.svg
rename to static/ssd-icons/Gravity2.svg
diff --git a/public/ssd-icons/Gravity3.svg b/static/ssd-icons/Gravity3.svg
similarity index 100%
rename from public/ssd-icons/Gravity3.svg
rename to static/ssd-icons/Gravity3.svg
diff --git a/public/ssd-icons/Gravity4.svg b/static/ssd-icons/Gravity4.svg
similarity index 100%
rename from public/ssd-icons/Gravity4.svg
rename to static/ssd-icons/Gravity4.svg
diff --git a/public/ssd-icons/Hangar Rack 1.svg b/static/ssd-icons/Hangar Rack 1.svg
similarity index 100%
rename from public/ssd-icons/Hangar Rack 1.svg
rename to static/ssd-icons/Hangar Rack 1.svg
diff --git a/public/ssd-icons/Hangar Rack 2.svg b/static/ssd-icons/Hangar Rack 2.svg
similarity index 100%
rename from public/ssd-icons/Hangar Rack 2.svg
rename to static/ssd-icons/Hangar Rack 2.svg
diff --git a/public/ssd-icons/HeavyGraser1.svg b/static/ssd-icons/HeavyGraser1.svg
similarity index 100%
rename from public/ssd-icons/HeavyGraser1.svg
rename to static/ssd-icons/HeavyGraser1.svg
diff --git a/public/ssd-icons/HeavyGraser2.svg b/static/ssd-icons/HeavyGraser2.svg
similarity index 100%
rename from public/ssd-icons/HeavyGraser2.svg
rename to static/ssd-icons/HeavyGraser2.svg
diff --git a/public/ssd-icons/HeavyGraser3.svg b/static/ssd-icons/HeavyGraser3.svg
similarity index 100%
rename from public/ssd-icons/HeavyGraser3.svg
rename to static/ssd-icons/HeavyGraser3.svg
diff --git a/public/ssd-icons/HeavyGraser4.svg b/static/ssd-icons/HeavyGraser4.svg
similarity index 100%
rename from public/ssd-icons/HeavyGraser4.svg
rename to static/ssd-icons/HeavyGraser4.svg
diff --git a/public/ssd-icons/Holofield.svg b/static/ssd-icons/Holofield.svg
similarity index 100%
rename from public/ssd-icons/Holofield.svg
rename to static/ssd-icons/Holofield.svg
diff --git a/public/ssd-icons/Hull.svg b/static/ssd-icons/Hull.svg
similarity index 100%
rename from public/ssd-icons/Hull.svg
rename to static/ssd-icons/Hull.svg
diff --git a/public/ssd-icons/LRK1.svg b/static/ssd-icons/LRK1.svg
similarity index 100%
rename from public/ssd-icons/LRK1.svg
rename to static/ssd-icons/LRK1.svg
diff --git a/public/ssd-icons/LRK2.svg b/static/ssd-icons/LRK2.svg
similarity index 100%
rename from public/ssd-icons/LRK2.svg
rename to static/ssd-icons/LRK2.svg
diff --git a/public/ssd-icons/LRK3.svg b/static/ssd-icons/LRK3.svg
similarity index 100%
rename from public/ssd-icons/LRK3.svg
rename to static/ssd-icons/LRK3.svg
diff --git a/public/ssd-icons/LRK4.svg b/static/ssd-icons/LRK4.svg
similarity index 100%
rename from public/ssd-icons/LRK4.svg
rename to static/ssd-icons/LRK4.svg
diff --git a/public/ssd-icons/LRK5.svg b/static/ssd-icons/LRK5.svg
similarity index 100%
rename from public/ssd-icons/LRK5.svg
rename to static/ssd-icons/LRK5.svg
diff --git a/public/ssd-icons/Launch Tube Catapult 2.svg b/static/ssd-icons/Launch Tube Catapult 2.svg
similarity index 100%
rename from public/ssd-icons/Launch Tube Catapult 2.svg
rename to static/ssd-icons/Launch Tube Catapult 2.svg
diff --git a/public/ssd-icons/Launch Tube Catapult.svg b/static/ssd-icons/Launch Tube Catapult.svg
similarity index 100%
rename from public/ssd-icons/Launch Tube Catapult.svg
rename to static/ssd-icons/Launch Tube Catapult.svg
diff --git a/public/ssd-icons/Launch Tube.svg b/static/ssd-icons/Launch Tube.svg
similarity index 100%
rename from public/ssd-icons/Launch Tube.svg
rename to static/ssd-icons/Launch Tube.svg
diff --git a/public/ssd-icons/Marines1.svg b/static/ssd-icons/Marines1.svg
similarity index 100%
rename from public/ssd-icons/Marines1.svg
rename to static/ssd-icons/Marines1.svg
diff --git a/public/ssd-icons/Marines2.svg b/static/ssd-icons/Marines2.svg
similarity index 100%
rename from public/ssd-icons/Marines2.svg
rename to static/ssd-icons/Marines2.svg
diff --git a/public/ssd-icons/Marines3.svg b/static/ssd-icons/Marines3.svg
similarity index 100%
rename from public/ssd-icons/Marines3.svg
rename to static/ssd-icons/Marines3.svg
diff --git a/public/ssd-icons/MesonProjector.svg b/static/ssd-icons/MesonProjector.svg
similarity index 100%
rename from public/ssd-icons/MesonProjector.svg
rename to static/ssd-icons/MesonProjector.svg
diff --git a/public/ssd-icons/Mine Rack.svg b/static/ssd-icons/Mine Rack.svg
similarity index 100%
rename from public/ssd-icons/Mine Rack.svg
rename to static/ssd-icons/Mine Rack.svg
diff --git a/public/ssd-icons/Minesweep.svg b/static/ssd-icons/Minesweep.svg
similarity index 100%
rename from public/ssd-icons/Minesweep.svg
rename to static/ssd-icons/Minesweep.svg
diff --git a/public/ssd-icons/Needle1.svg b/static/ssd-icons/Needle1.svg
similarity index 100%
rename from public/ssd-icons/Needle1.svg
rename to static/ssd-icons/Needle1.svg
diff --git a/public/ssd-icons/Needle2.svg b/static/ssd-icons/Needle2.svg
similarity index 100%
rename from public/ssd-icons/Needle2.svg
rename to static/ssd-icons/Needle2.svg
diff --git a/public/ssd-icons/Needle3.svg b/static/ssd-icons/Needle3.svg
similarity index 100%
rename from public/ssd-icons/Needle3.svg
rename to static/ssd-icons/Needle3.svg
diff --git a/public/ssd-icons/Needle4.svg b/static/ssd-icons/Needle4.svg
similarity index 100%
rename from public/ssd-icons/Needle4.svg
rename to static/ssd-icons/Needle4.svg
diff --git a/public/ssd-icons/Nova Cannon.svg b/static/ssd-icons/Nova Cannon.svg
similarity index 100%
rename from public/ssd-icons/Nova Cannon.svg
rename to static/ssd-icons/Nova Cannon.svg
diff --git a/public/ssd-icons/Ortillery.svg b/static/ssd-icons/Ortillery.svg
similarity index 100%
rename from public/ssd-icons/Ortillery.svg
rename to static/ssd-icons/Ortillery.svg
diff --git a/public/ssd-icons/Passenger Berth.svg b/static/ssd-icons/Passenger Berth.svg
similarity index 100%
rename from public/ssd-icons/Passenger Berth.svg
rename to static/ssd-icons/Passenger Berth.svg
diff --git a/public/ssd-icons/Phasers1.svg b/static/ssd-icons/Phasers1.svg
similarity index 100%
rename from public/ssd-icons/Phasers1.svg
rename to static/ssd-icons/Phasers1.svg
diff --git a/public/ssd-icons/Phasers2.svg b/static/ssd-icons/Phasers2.svg
similarity index 100%
rename from public/ssd-icons/Phasers2.svg
rename to static/ssd-icons/Phasers2.svg
diff --git a/public/ssd-icons/Phasers3.svg b/static/ssd-icons/Phasers3.svg
similarity index 100%
rename from public/ssd-icons/Phasers3.svg
rename to static/ssd-icons/Phasers3.svg
diff --git a/public/ssd-icons/Phasers4.svg b/static/ssd-icons/Phasers4.svg
similarity index 100%
rename from public/ssd-icons/Phasers4.svg
rename to static/ssd-icons/Phasers4.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 1 v1.svg b/static/ssd-icons/Plasma Bolt Launcher 1 v1.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 1 v1.svg
rename to static/ssd-icons/Plasma Bolt Launcher 1 v1.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 1 v2.svg b/static/ssd-icons/Plasma Bolt Launcher 1 v2.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 1 v2.svg
rename to static/ssd-icons/Plasma Bolt Launcher 1 v2.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 1.svg b/static/ssd-icons/Plasma Bolt Launcher 1.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 1.svg
rename to static/ssd-icons/Plasma Bolt Launcher 1.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 2 v1.svg b/static/ssd-icons/Plasma Bolt Launcher 2 v1.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 2 v1.svg
rename to static/ssd-icons/Plasma Bolt Launcher 2 v1.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 2 v2.svg b/static/ssd-icons/Plasma Bolt Launcher 2 v2.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 2 v2.svg
rename to static/ssd-icons/Plasma Bolt Launcher 2 v2.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 2.svg b/static/ssd-icons/Plasma Bolt Launcher 2.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 2.svg
rename to static/ssd-icons/Plasma Bolt Launcher 2.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 3 v1.svg b/static/ssd-icons/Plasma Bolt Launcher 3 v1.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 3 v1.svg
rename to static/ssd-icons/Plasma Bolt Launcher 3 v1.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 3 v2.svg b/static/ssd-icons/Plasma Bolt Launcher 3 v2.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 3 v2.svg
rename to static/ssd-icons/Plasma Bolt Launcher 3 v2.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 3.svg b/static/ssd-icons/Plasma Bolt Launcher 3.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 3.svg
rename to static/ssd-icons/Plasma Bolt Launcher 3.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 4 v1.svg b/static/ssd-icons/Plasma Bolt Launcher 4 v1.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 4 v1.svg
rename to static/ssd-icons/Plasma Bolt Launcher 4 v1.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 4 v2.svg b/static/ssd-icons/Plasma Bolt Launcher 4 v2.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 4 v2.svg
rename to static/ssd-icons/Plasma Bolt Launcher 4 v2.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 4.svg b/static/ssd-icons/Plasma Bolt Launcher 4.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 4.svg
rename to static/ssd-icons/Plasma Bolt Launcher 4.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 5 v1.svg b/static/ssd-icons/Plasma Bolt Launcher 5 v1.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 5 v1.svg
rename to static/ssd-icons/Plasma Bolt Launcher 5 v1.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 5 v2.svg b/static/ssd-icons/Plasma Bolt Launcher 5 v2.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 5 v2.svg
rename to static/ssd-icons/Plasma Bolt Launcher 5 v2.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 5.svg b/static/ssd-icons/Plasma Bolt Launcher 5.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 5.svg
rename to static/ssd-icons/Plasma Bolt Launcher 5.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 6 v1.svg b/static/ssd-icons/Plasma Bolt Launcher 6 v1.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 6 v1.svg
rename to static/ssd-icons/Plasma Bolt Launcher 6 v1.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 6 v2.svg b/static/ssd-icons/Plasma Bolt Launcher 6 v2.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 6 v2.svg
rename to static/ssd-icons/Plasma Bolt Launcher 6 v2.svg
diff --git a/public/ssd-icons/Plasma Bolt Launcher 6.svg b/static/ssd-icons/Plasma Bolt Launcher 6.svg
similarity index 100%
rename from public/ssd-icons/Plasma Bolt Launcher 6.svg
rename to static/ssd-icons/Plasma Bolt Launcher 6.svg
diff --git a/public/ssd-icons/Plasma1.svg b/static/ssd-icons/Plasma1.svg
similarity index 100%
rename from public/ssd-icons/Plasma1.svg
rename to static/ssd-icons/Plasma1.svg
diff --git a/public/ssd-icons/Plasma2.svg b/static/ssd-icons/Plasma2.svg
similarity index 100%
rename from public/ssd-icons/Plasma2.svg
rename to static/ssd-icons/Plasma2.svg
diff --git a/public/ssd-icons/Plasma3.svg b/static/ssd-icons/Plasma3.svg
similarity index 100%
rename from public/ssd-icons/Plasma3.svg
rename to static/ssd-icons/Plasma3.svg
diff --git a/public/ssd-icons/PlasmaCannon1.svg b/static/ssd-icons/PlasmaCannon1.svg
similarity index 100%
rename from public/ssd-icons/PlasmaCannon1.svg
rename to static/ssd-icons/PlasmaCannon1.svg
diff --git a/public/ssd-icons/PlasmaCannon2.svg b/static/ssd-icons/PlasmaCannon2.svg
similarity index 100%
rename from public/ssd-icons/PlasmaCannon2.svg
rename to static/ssd-icons/PlasmaCannon2.svg
diff --git a/public/ssd-icons/PlasmaCannon3.svg b/static/ssd-icons/PlasmaCannon3.svg
similarity index 100%
rename from public/ssd-icons/PlasmaCannon3.svg
rename to static/ssd-icons/PlasmaCannon3.svg
diff --git a/public/ssd-icons/PlasmaCannon4.svg b/static/ssd-icons/PlasmaCannon4.svg
similarity index 100%
rename from public/ssd-icons/PlasmaCannon4.svg
rename to static/ssd-icons/PlasmaCannon4.svg
diff --git a/public/ssd-icons/Psp1.svg b/static/ssd-icons/Psp1.svg
similarity index 100%
rename from public/ssd-icons/Psp1.svg
rename to static/ssd-icons/Psp1.svg
diff --git a/public/ssd-icons/Psp2.svg b/static/ssd-icons/Psp2.svg
similarity index 100%
rename from public/ssd-icons/Psp2.svg
rename to static/ssd-icons/Psp2.svg
diff --git a/public/ssd-icons/Psp3.svg b/static/ssd-icons/Psp3.svg
similarity index 100%
rename from public/ssd-icons/Psp3.svg
rename to static/ssd-icons/Psp3.svg
diff --git a/public/ssd-icons/Pulser1.svg b/static/ssd-icons/Pulser1.svg
similarity index 100%
rename from public/ssd-icons/Pulser1.svg
rename to static/ssd-icons/Pulser1.svg
diff --git a/public/ssd-icons/Pulser2.svg b/static/ssd-icons/Pulser2.svg
similarity index 100%
rename from public/ssd-icons/Pulser2.svg
rename to static/ssd-icons/Pulser2.svg
diff --git a/public/ssd-icons/Pulser3.svg b/static/ssd-icons/Pulser3.svg
similarity index 100%
rename from public/ssd-icons/Pulser3.svg
rename to static/ssd-icons/Pulser3.svg
diff --git a/public/ssd-icons/Pulser4.svg b/static/ssd-icons/Pulser4.svg
similarity index 100%
rename from public/ssd-icons/Pulser4.svg
rename to static/ssd-icons/Pulser4.svg
diff --git a/public/ssd-icons/Pulser5.svg b/static/ssd-icons/Pulser5.svg
similarity index 100%
rename from public/ssd-icons/Pulser5.svg
rename to static/ssd-icons/Pulser5.svg
diff --git a/public/ssd-icons/Pulser6.svg b/static/ssd-icons/Pulser6.svg
similarity index 100%
rename from public/ssd-icons/Pulser6.svg
rename to static/ssd-icons/Pulser6.svg
diff --git a/public/ssd-icons/Pulser7.svg b/static/ssd-icons/Pulser7.svg
similarity index 100%
rename from public/ssd-icons/Pulser7.svg
rename to static/ssd-icons/Pulser7.svg
diff --git a/public/ssd-icons/Pulser8.svg b/static/ssd-icons/Pulser8.svg
similarity index 100%
rename from public/ssd-icons/Pulser8.svg
rename to static/ssd-icons/Pulser8.svg
diff --git a/public/ssd-icons/Reflex Field.svg b/static/ssd-icons/Reflex Field.svg
similarity index 100%
rename from public/ssd-icons/Reflex Field.svg
rename to static/ssd-icons/Reflex Field.svg
diff --git a/public/ssd-icons/Rocket Pod 2.svg b/static/ssd-icons/Rocket Pod 2.svg
similarity index 100%
rename from public/ssd-icons/Rocket Pod 2.svg
rename to static/ssd-icons/Rocket Pod 2.svg
diff --git a/public/ssd-icons/Rocket Pod.svg b/static/ssd-icons/Rocket Pod.svg
similarity index 100%
rename from public/ssd-icons/Rocket Pod.svg
rename to static/ssd-icons/Rocket Pod.svg
diff --git a/public/ssd-icons/SRK1(v1).svg b/static/ssd-icons/SRK1(v1).svg
similarity index 100%
rename from public/ssd-icons/SRK1(v1).svg
rename to static/ssd-icons/SRK1(v1).svg
diff --git a/public/ssd-icons/SRK1(v2).svg b/static/ssd-icons/SRK1(v2).svg
similarity index 100%
rename from public/ssd-icons/SRK1(v2).svg
rename to static/ssd-icons/SRK1(v2).svg
diff --git a/public/ssd-icons/SRK2(v1).svg b/static/ssd-icons/SRK2(v1).svg
similarity index 100%
rename from public/ssd-icons/SRK2(v1).svg
rename to static/ssd-icons/SRK2(v1).svg
diff --git a/public/ssd-icons/SRK2(v2).svg b/static/ssd-icons/SRK2(v2).svg
similarity index 100%
rename from public/ssd-icons/SRK2(v2).svg
rename to static/ssd-icons/SRK2(v2).svg
diff --git a/public/ssd-icons/SRK3(v1).svg b/static/ssd-icons/SRK3(v1).svg
similarity index 100%
rename from public/ssd-icons/SRK3(v1).svg
rename to static/ssd-icons/SRK3(v1).svg
diff --git a/public/ssd-icons/SRK3(v2).svg b/static/ssd-icons/SRK3(v2).svg
similarity index 100%
rename from public/ssd-icons/SRK3(v2).svg
rename to static/ssd-icons/SRK3(v2).svg
diff --git a/public/ssd-icons/SRK4(v1).svg b/static/ssd-icons/SRK4(v1).svg
similarity index 100%
rename from public/ssd-icons/SRK4(v1).svg
rename to static/ssd-icons/SRK4(v1).svg
diff --git a/public/ssd-icons/SRK4(v2).svg b/static/ssd-icons/SRK4(v2).svg
similarity index 100%
rename from public/ssd-icons/SRK4(v2).svg
rename to static/ssd-icons/SRK4(v2).svg
diff --git a/public/ssd-icons/SRK5(v1).svg b/static/ssd-icons/SRK5(v1).svg
similarity index 100%
rename from public/ssd-icons/SRK5(v1).svg
rename to static/ssd-icons/SRK5(v1).svg
diff --git a/public/ssd-icons/SRK5(v2).svg b/static/ssd-icons/SRK5(v2).svg
similarity index 100%
rename from public/ssd-icons/SRK5(v2).svg
rename to static/ssd-icons/SRK5(v2).svg
diff --git a/public/ssd-icons/Salvo Missiles Magazines (2).svg b/static/ssd-icons/Salvo Missiles Magazines (2).svg
similarity index 100%
rename from public/ssd-icons/Salvo Missiles Magazines (2).svg
rename to static/ssd-icons/Salvo Missiles Magazines (2).svg
diff --git a/public/ssd-icons/Salvo Missiles Magazines (3).svg b/static/ssd-icons/Salvo Missiles Magazines (3).svg
similarity index 100%
rename from public/ssd-icons/Salvo Missiles Magazines (3).svg
rename to static/ssd-icons/Salvo Missiles Magazines (3).svg
diff --git a/public/ssd-icons/Salvo Missiles Magazines (4).svg b/static/ssd-icons/Salvo Missiles Magazines (4).svg
similarity index 100%
rename from public/ssd-icons/Salvo Missiles Magazines (4).svg
rename to static/ssd-icons/Salvo Missiles Magazines (4).svg
diff --git a/public/ssd-icons/Salvo Missiles Magazines (5).svg b/static/ssd-icons/Salvo Missiles Magazines (5).svg
similarity index 100%
rename from public/ssd-icons/Salvo Missiles Magazines (5).svg
rename to static/ssd-icons/Salvo Missiles Magazines (5).svg
diff --git a/public/ssd-icons/Salvo Missiles Magazines (6).svg b/static/ssd-icons/Salvo Missiles Magazines (6).svg
similarity index 100%
rename from public/ssd-icons/Salvo Missiles Magazines (6).svg
rename to static/ssd-icons/Salvo Missiles Magazines (6).svg
diff --git a/public/ssd-icons/Salvo Missiles Magazines.svg b/static/ssd-icons/Salvo Missiles Magazines.svg
similarity index 100%
rename from public/ssd-icons/Salvo Missiles Magazines.svg
rename to static/ssd-icons/Salvo Missiles Magazines.svg
diff --git a/public/ssd-icons/Salvo Missiles.svg b/static/ssd-icons/Salvo Missiles.svg
similarity index 100%
rename from public/ssd-icons/Salvo Missiles.svg
rename to static/ssd-icons/Salvo Missiles.svg
diff --git a/public/ssd-icons/SensorsLVL1.svg b/static/ssd-icons/SensorsLVL1.svg
similarity index 100%
rename from public/ssd-icons/SensorsLVL1.svg
rename to static/ssd-icons/SensorsLVL1.svg
diff --git a/public/ssd-icons/SensorsLVL2.svg b/static/ssd-icons/SensorsLVL2.svg
similarity index 100%
rename from public/ssd-icons/SensorsLVL2.svg
rename to static/ssd-icons/SensorsLVL2.svg
diff --git a/public/ssd-icons/Shroud.svg b/static/ssd-icons/Shroud.svg
similarity index 100%
rename from public/ssd-icons/Shroud.svg
rename to static/ssd-icons/Shroud.svg
diff --git a/public/ssd-icons/StandardDrives (2).svg b/static/ssd-icons/StandardDrives (2).svg
similarity index 100%
rename from public/ssd-icons/StandardDrives (2).svg
rename to static/ssd-icons/StandardDrives (2).svg
diff --git a/public/ssd-icons/StandardDrives (3).svg b/static/ssd-icons/StandardDrives (3).svg
similarity index 100%
rename from public/ssd-icons/StandardDrives (3).svg
rename to static/ssd-icons/StandardDrives (3).svg
diff --git a/public/ssd-icons/StandardDrives (4).svg b/static/ssd-icons/StandardDrives (4).svg
similarity index 100%
rename from public/ssd-icons/StandardDrives (4).svg
rename to static/ssd-icons/StandardDrives (4).svg
diff --git a/public/ssd-icons/StandardDrives (5).svg b/static/ssd-icons/StandardDrives (5).svg
similarity index 100%
rename from public/ssd-icons/StandardDrives (5).svg
rename to static/ssd-icons/StandardDrives (5).svg
diff --git a/public/ssd-icons/StandardDrives (6).svg b/static/ssd-icons/StandardDrives (6).svg
similarity index 100%
rename from public/ssd-icons/StandardDrives (6).svg
rename to static/ssd-icons/StandardDrives (6).svg
diff --git a/public/ssd-icons/StandardDrives (7).svg b/static/ssd-icons/StandardDrives (7).svg
similarity index 100%
rename from public/ssd-icons/StandardDrives (7).svg
rename to static/ssd-icons/StandardDrives (7).svg
diff --git a/public/ssd-icons/StandardDrives (8).svg b/static/ssd-icons/StandardDrives (8).svg
similarity index 100%
rename from public/ssd-icons/StandardDrives (8).svg
rename to static/ssd-icons/StandardDrives (8).svg
diff --git a/public/ssd-icons/StandardDrives.svg b/static/ssd-icons/StandardDrives.svg
similarity index 100%
rename from public/ssd-icons/StandardDrives.svg
rename to static/ssd-icons/StandardDrives.svg
diff --git a/public/ssd-icons/StandardGraser1.svg b/static/ssd-icons/StandardGraser1.svg
similarity index 100%
rename from public/ssd-icons/StandardGraser1.svg
rename to static/ssd-icons/StandardGraser1.svg
diff --git a/public/ssd-icons/StandardGraser2.svg b/static/ssd-icons/StandardGraser2.svg
similarity index 100%
rename from public/ssd-icons/StandardGraser2.svg
rename to static/ssd-icons/StandardGraser2.svg
diff --git a/public/ssd-icons/StandardGraser3.svg b/static/ssd-icons/StandardGraser3.svg
similarity index 100%
rename from public/ssd-icons/StandardGraser3.svg
rename to static/ssd-icons/StandardGraser3.svg
diff --git a/public/ssd-icons/Stealth Hull.svg b/static/ssd-icons/Stealth Hull.svg
similarity index 100%
rename from public/ssd-icons/Stealth Hull.svg
rename to static/ssd-icons/Stealth Hull.svg
diff --git a/public/ssd-icons/StealthField.svg b/static/ssd-icons/StealthField.svg
similarity index 100%
rename from public/ssd-icons/StealthField.svg
rename to static/ssd-icons/StealthField.svg
diff --git a/public/ssd-icons/Transport Craft.svg b/static/ssd-icons/Transport Craft.svg
similarity index 100%
rename from public/ssd-icons/Transport Craft.svg
rename to static/ssd-icons/Transport Craft.svg
diff --git a/public/ssd-icons/Transporter1.svg b/static/ssd-icons/Transporter1.svg
similarity index 100%
rename from public/ssd-icons/Transporter1.svg
rename to static/ssd-icons/Transporter1.svg
diff --git a/public/ssd-icons/Transporter2.svg b/static/ssd-icons/Transporter2.svg
similarity index 100%
rename from public/ssd-icons/Transporter2.svg
rename to static/ssd-icons/Transporter2.svg
diff --git a/public/ssd-icons/Transporter3.svg b/static/ssd-icons/Transporter3.svg
similarity index 100%
rename from public/ssd-icons/Transporter3.svg
rename to static/ssd-icons/Transporter3.svg
diff --git a/public/ssd-icons/Transporter4.svg b/static/ssd-icons/Transporter4.svg
similarity index 100%
rename from public/ssd-icons/Transporter4.svg
rename to static/ssd-icons/Transporter4.svg
diff --git a/public/ssd-icons/Troop Berth.svg b/static/ssd-icons/Troop Berth.svg
similarity index 100%
rename from public/ssd-icons/Troop Berth.svg
rename to static/ssd-icons/Troop Berth.svg
diff --git a/public/ssd-icons/Turret1.svg b/static/ssd-icons/Turret1.svg
similarity index 100%
rename from public/ssd-icons/Turret1.svg
rename to static/ssd-icons/Turret1.svg
diff --git a/public/ssd-icons/Turret2.svg b/static/ssd-icons/Turret2.svg
similarity index 100%
rename from public/ssd-icons/Turret2.svg
rename to static/ssd-icons/Turret2.svg
diff --git a/public/ssd-icons/TwinParticleArray.svg b/static/ssd-icons/TwinParticleArray.svg
similarity index 100%
rename from public/ssd-icons/TwinParticleArray.svg
rename to static/ssd-icons/TwinParticleArray.svg
diff --git a/public/ssd-icons/Type I Cloak.svg b/static/ssd-icons/Type I Cloak.svg
similarity index 100%
rename from public/ssd-icons/Type I Cloak.svg
rename to static/ssd-icons/Type I Cloak.svg
diff --git a/public/ssd-icons/Type II Cloak.svg b/static/ssd-icons/Type II Cloak.svg
similarity index 100%
rename from public/ssd-icons/Type II Cloak.svg
rename to static/ssd-icons/Type II Cloak.svg
diff --git a/public/ssd-icons/Type III Cloak.svg b/static/ssd-icons/Type III Cloak.svg
similarity index 100%
rename from public/ssd-icons/Type III Cloak.svg
rename to static/ssd-icons/Type III Cloak.svg
diff --git a/public/ssd-icons/Wave Gun.svg b/static/ssd-icons/Wave Gun.svg
similarity index 100%
rename from public/ssd-icons/Wave Gun.svg
rename to static/ssd-icons/Wave Gun.svg
diff --git a/public/ssd-icons/armor.svg b/static/ssd-icons/armor.svg
similarity index 100%
rename from public/ssd-icons/armor.svg
rename to static/ssd-icons/armor.svg
diff --git a/public/ssd-icons/fighter 1.svg b/static/ssd-icons/fighter 1.svg
similarity index 100%
rename from public/ssd-icons/fighter 1.svg
rename to static/ssd-icons/fighter 1.svg
diff --git a/public/ssd-icons/fighter 2.svg b/static/ssd-icons/fighter 2.svg
similarity index 100%
rename from public/ssd-icons/fighter 2.svg
rename to static/ssd-icons/fighter 2.svg
diff --git a/public/ssd-icons/fighter 3.svg b/static/ssd-icons/fighter 3.svg
similarity index 100%
rename from public/ssd-icons/fighter 3.svg
rename to static/ssd-icons/fighter 3.svg
diff --git a/public/ssd-icons/fighter 4.svg b/static/ssd-icons/fighter 4.svg
similarity index 100%
rename from public/ssd-icons/fighter 4.svg
rename to static/ssd-icons/fighter 4.svg
diff --git a/public/ssd-icons/fighter 5.svg b/static/ssd-icons/fighter 5.svg
similarity index 100%
rename from public/ssd-icons/fighter 5.svg
rename to static/ssd-icons/fighter 5.svg
diff --git a/public/ssd-icons/fighter 6.svg b/static/ssd-icons/fighter 6.svg
similarity index 100%
rename from public/ssd-icons/fighter 6.svg
rename to static/ssd-icons/fighter 6.svg
diff --git a/public/ssd-icons/fighter 7.svg b/static/ssd-icons/fighter 7.svg
similarity index 100%
rename from public/ssd-icons/fighter 7.svg
rename to static/ssd-icons/fighter 7.svg
diff --git a/public/ssd-icons/fighter 8.svg b/static/ssd-icons/fighter 8.svg
similarity index 100%
rename from public/ssd-icons/fighter 8.svg
rename to static/ssd-icons/fighter 8.svg
diff --git a/public/ssd-icons/fighter 9.svg b/static/ssd-icons/fighter 9.svg
similarity index 100%
rename from public/ssd-icons/fighter 9.svg
rename to static/ssd-icons/fighter 9.svg
diff --git a/public/ssd-icons/fighter bays (1).svg b/static/ssd-icons/fighter bays (1).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (1).svg
rename to static/ssd-icons/fighter bays (1).svg
diff --git a/public/ssd-icons/fighter bays (10).svg b/static/ssd-icons/fighter bays (10).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (10).svg
rename to static/ssd-icons/fighter bays (10).svg
diff --git a/public/ssd-icons/fighter bays (11).svg b/static/ssd-icons/fighter bays (11).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (11).svg
rename to static/ssd-icons/fighter bays (11).svg
diff --git a/public/ssd-icons/fighter bays (12).svg b/static/ssd-icons/fighter bays (12).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (12).svg
rename to static/ssd-icons/fighter bays (12).svg
diff --git a/public/ssd-icons/fighter bays (13).svg b/static/ssd-icons/fighter bays (13).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (13).svg
rename to static/ssd-icons/fighter bays (13).svg
diff --git a/public/ssd-icons/fighter bays (14).svg b/static/ssd-icons/fighter bays (14).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (14).svg
rename to static/ssd-icons/fighter bays (14).svg
diff --git a/public/ssd-icons/fighter bays (15).svg b/static/ssd-icons/fighter bays (15).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (15).svg
rename to static/ssd-icons/fighter bays (15).svg
diff --git a/public/ssd-icons/fighter bays (16).svg b/static/ssd-icons/fighter bays (16).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (16).svg
rename to static/ssd-icons/fighter bays (16).svg
diff --git a/public/ssd-icons/fighter bays (2).svg b/static/ssd-icons/fighter bays (2).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (2).svg
rename to static/ssd-icons/fighter bays (2).svg
diff --git a/public/ssd-icons/fighter bays (3).svg b/static/ssd-icons/fighter bays (3).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (3).svg
rename to static/ssd-icons/fighter bays (3).svg
diff --git a/public/ssd-icons/fighter bays (4).svg b/static/ssd-icons/fighter bays (4).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (4).svg
rename to static/ssd-icons/fighter bays (4).svg
diff --git a/public/ssd-icons/fighter bays (5).svg b/static/ssd-icons/fighter bays (5).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (5).svg
rename to static/ssd-icons/fighter bays (5).svg
diff --git a/public/ssd-icons/fighter bays (6).svg b/static/ssd-icons/fighter bays (6).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (6).svg
rename to static/ssd-icons/fighter bays (6).svg
diff --git a/public/ssd-icons/fighter bays (7).svg b/static/ssd-icons/fighter bays (7).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (7).svg
rename to static/ssd-icons/fighter bays (7).svg
diff --git a/public/ssd-icons/fighter bays (8).svg b/static/ssd-icons/fighter bays (8).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (8).svg
rename to static/ssd-icons/fighter bays (8).svg
diff --git a/public/ssd-icons/fighter bays (9).svg b/static/ssd-icons/fighter bays (9).svg
similarity index 100%
rename from public/ssd-icons/fighter bays (9).svg
rename to static/ssd-icons/fighter bays (9).svg
diff --git a/public/ssd-icons/new1.svg b/static/ssd-icons/new1.svg
similarity index 100%
rename from public/ssd-icons/new1.svg
rename to static/ssd-icons/new1.svg
diff --git a/public/ssd-icons/new2.svg b/static/ssd-icons/new2.svg
similarity index 100%
rename from public/ssd-icons/new2.svg
rename to static/ssd-icons/new2.svg
diff --git a/public/ssd-icons/new3.svg b/static/ssd-icons/new3.svg
similarity index 100%
rename from public/ssd-icons/new3.svg
rename to static/ssd-icons/new3.svg
diff --git a/public/ssd-icons/new4.svg b/static/ssd-icons/new4.svg
similarity index 100%
rename from public/ssd-icons/new4.svg
rename to static/ssd-icons/new4.svg
diff --git a/public/ssd-icons/new5.svg b/static/ssd-icons/new5.svg
similarity index 100%
rename from public/ssd-icons/new5.svg
rename to static/ssd-icons/new5.svg
diff --git a/public/ssd-icons/new6.svg b/static/ssd-icons/new6.svg
similarity index 100%
rename from public/ssd-icons/new6.svg
rename to static/ssd-icons/new6.svg
diff --git a/public/ssd-icons/notes b/static/ssd-icons/notes
similarity index 100%
rename from public/ssd-icons/notes
rename to static/ssd-icons/notes
diff --git a/public/ssd-icons/numbers/0.svg b/static/ssd-icons/numbers/0.svg
similarity index 100%
rename from public/ssd-icons/numbers/0.svg
rename to static/ssd-icons/numbers/0.svg
diff --git a/public/ssd-icons/numbers/1.svg b/static/ssd-icons/numbers/1.svg
similarity index 100%
rename from public/ssd-icons/numbers/1.svg
rename to static/ssd-icons/numbers/1.svg
diff --git a/public/ssd-icons/numbers/2.svg b/static/ssd-icons/numbers/2.svg
similarity index 100%
rename from public/ssd-icons/numbers/2.svg
rename to static/ssd-icons/numbers/2.svg
diff --git a/public/ssd-icons/numbers/3.svg b/static/ssd-icons/numbers/3.svg
similarity index 100%
rename from public/ssd-icons/numbers/3.svg
rename to static/ssd-icons/numbers/3.svg
diff --git a/public/ssd-icons/numbers/4.svg b/static/ssd-icons/numbers/4.svg
similarity index 100%
rename from public/ssd-icons/numbers/4.svg
rename to static/ssd-icons/numbers/4.svg
diff --git a/public/ssd-icons/numbers/5.svg b/static/ssd-icons/numbers/5.svg
similarity index 100%
rename from public/ssd-icons/numbers/5.svg
rename to static/ssd-icons/numbers/5.svg
diff --git a/public/ssd-icons/numbers/6.svg b/static/ssd-icons/numbers/6.svg
similarity index 100%
rename from public/ssd-icons/numbers/6.svg
rename to static/ssd-icons/numbers/6.svg
diff --git a/public/ssd-icons/numbers/7.svg b/static/ssd-icons/numbers/7.svg
similarity index 100%
rename from public/ssd-icons/numbers/7.svg
rename to static/ssd-icons/numbers/7.svg
diff --git a/public/ssd-icons/numbers/8.svg b/static/ssd-icons/numbers/8.svg
similarity index 100%
rename from public/ssd-icons/numbers/8.svg
rename to static/ssd-icons/numbers/8.svg
diff --git a/public/ssd-icons/numbers/9.svg b/static/ssd-icons/numbers/9.svg
similarity index 100%
rename from public/ssd-icons/numbers/9.svg
rename to static/ssd-icons/numbers/9.svg
diff --git a/public/ssd-icons/old1.svg b/static/ssd-icons/old1.svg
similarity index 100%
rename from public/ssd-icons/old1.svg
rename to static/ssd-icons/old1.svg
diff --git a/public/ssd-icons/old2.svg b/static/ssd-icons/old2.svg
similarity index 100%
rename from public/ssd-icons/old2.svg
rename to static/ssd-icons/old2.svg
diff --git a/public/ssd-icons/old3.svg b/static/ssd-icons/old3.svg
similarity index 100%
rename from public/ssd-icons/old3.svg
rename to static/ssd-icons/old3.svg
diff --git a/public/ssd-icons/old4.svg b/static/ssd-icons/old4.svg
similarity index 100%
rename from public/ssd-icons/old4.svg
rename to static/ssd-icons/old4.svg
diff --git a/public/ssd-icons/old5.svg b/static/ssd-icons/old5.svg
similarity index 100%
rename from public/ssd-icons/old5.svg
rename to static/ssd-icons/old5.svg
diff --git a/public/ssd-icons/old6.svg b/static/ssd-icons/old6.svg
similarity index 100%
rename from public/ssd-icons/old6.svg
rename to static/ssd-icons/old6.svg
diff --git a/public/ssd-icons/unlabeled (1).svg b/static/ssd-icons/unlabeled (1).svg
similarity index 100%
rename from public/ssd-icons/unlabeled (1).svg
rename to static/ssd-icons/unlabeled (1).svg
diff --git a/public/ssd-icons/unlabeled (3).svg b/static/ssd-icons/unlabeled (3).svg
similarity index 100%
rename from public/ssd-icons/unlabeled (3).svg
rename to static/ssd-icons/unlabeled (3).svg
diff --git a/public/ssd-icons/unlabeled (4).svg b/static/ssd-icons/unlabeled (4).svg
similarity index 100%
rename from public/ssd-icons/unlabeled (4).svg
rename to static/ssd-icons/unlabeled (4).svg
diff --git a/public/standard-drive.svg b/static/standard-drive.svg
similarity index 100%
rename from public/standard-drive.svg
rename to static/standard-drive.svg
diff --git a/svelte.config.js b/svelte.config.js
index bc88df1..c3bd805 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,22 +1,18 @@
-import adapter from '@sveltejs/adapter-static';
-import analyze from 'rollup-plugin-analyzer';
+import adapter from "@sveltejs/adapter-static";
+import analyze from "rollup-plugin-analyzer";
 
 /** @type {import('@sveltejs/kit').Config} */
 export default {
-	kit: {
-		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte',
-        adapter: adapter(),
-        files: {
-            lib: './src',
-            assets: './public',
-        },
-        vite: {
-    build: {
+  kit: {
+    // hydrate the <div id="svelte"> element in src/app.html
+    adapter: adapter(),
+    vite: {
+      build: {
         rollupOptions: {
-            plugins: [ analyze() ],
-//            external: ['updux','@yanick/updeep']
-        }
-    }
-	}},
+          plugins: [analyze()],
+          //            external: ['updux','@yanick/updeep']
+        },
+      },
+    },
+  },
 };