Merge branch 'beer'

2023-04-13 18:05:04 -04:00 · 2023-04-13 18:05:04 -04:00 · ce991a54dc
commit ce991a54dc
parent b9fbcf8c30 fe08ada13f
47 changed files with 342 additions and 49815 deletions
--- a/.gitignore
+++ b/.gitignore
@ -15,3 +15,5 @@ node_modules/
 dist/yarn-error.log
 .task/
 .histoire/dist
+dist
+src/lib/components/__image_snapshots__/__diff_output__/
--- a/.histoire/dist/__sandbox.html
+++ b/.histoire/dist/__sandbox.html
@ -5,12 +5,12 @@
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="">
-  <link rel="stylesheet" href="/assets/style-622cf620.css">
+  <link rel="stylesheet" href="/assets/style-7abbff26.css">
    
    
 </head>
 <body>
  <div id="app"></div>
-    <script type="module" src="/assets/bundle-sandbox-c5cd2a61.js"></script>
+    <script type="module" src="/assets/bundle-sandbox-5de41e5f.js"></script>
 </body>
 </html>
--- a/.histoire/dist/assets/BaseEmpty.vue-045cbb89.js
+++ b/.histoire/dist/assets/BaseEmpty.vue-045cbb89.js
@ -1,13 +0,0 @@
-import { _ as _export_sfc } from "./MobileOverlay.vue2-a3503848.js";
-import { o as openBlock, e as createElementBlock, aY as renderSlot } from "./vendor-3ab3e533.js";
-const _sfc_main = {};
-const _hoisted_1 = { class: "histoire-base-empty htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400 htw-text-lg" };
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    renderSlot(_ctx.$slots, "default", {}, void 0, true)
-  ]);
-}
-const BaseEmpty = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c5ecfead"]]);
-export {
-  BaseEmpty as B
-};
--- a/.histoire/dist/assets/GenericMountStory.vue2-2bb5633d.js
+++ b/.histoire/dist/assets/GenericMountStory.vue2-2bb5633d.js
--- a/.histoire/dist/assets/HomeView.vue-2db017c5.js
+++ b/.histoire/dist/assets/HomeView.vue-2db017c5.js
@ -1,25 +0,0 @@
-import { d as defineComponent, c as computed, e as createElementBlock, g as createBaseVNode, a as unref, o as openBlock, v as histoireConfig, x as customLogos } from "./vendor-3ab3e533.js";
-const HistoireLogo = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iNTEyIgogICBoZWlnaHQ9IjUxMiIKICAgdmlld0JveD0iMCAwIDUxMiA1MTIiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzUiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPGcKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxyZWN0CiAgICAgICBzdHlsZT0ib3BhY2l0eTowLjU7ZmlsbDojMzRkMzk5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDoxLjAwMzc1IgogICAgICAgaWQ9InJlY3QxMzcyIgogICAgICAgd2lkdGg9IjMxNC4zMDkyMyIKICAgICAgIGhlaWdodD0iNDA2LjYwOTAxIgogICAgICAgeD0iLTI2LjU2NTA2MyIKICAgICAgIHk9IjEzNC43NTA3OSIKICAgICAgIHRyYW5zZm9ybT0icm90YXRlKC0yMy44MjEyNjIpIgogICAgICAgcnk9IjgiIC8+CiAgICA8cmVjdAogICAgICAgc3R5bGU9ImZpbGw6IzM0ZDM5OTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MS4wMDM3NSIKICAgICAgIGlkPSJyZWN0ODUwIgogICAgICAgd2lkdGg9IjMxNC4zMDkyMyIKICAgICAgIGhlaWdodD0iNDA2LjYwOTAxIgogICAgICAgeD0iNzcuNTcxODM4IgogICAgICAgeT0iNzIuODA4NzA4IgogICAgICAgcnk9IjgiCiAgICAgICB0cmFuc2Zvcm09InJvdGF0ZSgtNC41NzQ0NTM0KSIgLz4KICA8L2c+CiAgPGcKICAgICBpZD0ibGF5ZXIzIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDE2NTctMyIKICAgICAgIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOiNiNGZhZTI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNiNGZhZTI7c3Ryb2tlLXdpZHRoOjguMzQ5MjM7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICAgIGQ9Ik0gMzU5LjM4OTQ3LDM1NS45NTEzNCAzMjAuNzI5MzUsMTc2LjUyOTQyIDIzOC4zNDYxMywyMzguOTQxMTggWiBNIDI3My42NDEyNCwyNzMuMDY2MDggMTUyLjU5Nzg4LDE1Ni4wNTU5MSAxOTEuMjU4MDQsMzM1LjQ3Nzg2IFoiIC8+CiAgPC9nPgogIDxnCiAgICAgaWQ9ImxheWVyMiIKICAgICBzdHlsZT0iZGlzcGxheTpub25lIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDE2NTciCiAgICAgICBzdHlsZT0iZmlsbDojYjRmYWUyO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojYjRmYWUyO3N0cm9rZS13aWR0aDo4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICBkPSJtIDI5NiwxMDMuOTgyNDIgLTEzNS41MzEyNSwxNzcuOTY2OCBoIDg4LjcwMTE3IHogTSAyNjIuODMwMDgsMjMwLjA1MDc4IDIxNiw0MDguMDE3NTggMzUxLjUzMTI1LDIzMC4wNTA3OCBaIgogICAgICAgdHJhbnNmb3JtPSJyb3RhdGUoLTQuMTU2NTUzLDI1NiwyNTYuMDA2OTEpIiAvPgogIDwvZz4KPC9zdmc+Cg==";
-const _hoisted_1 = { class: "histoire-home-view htw-flex htw-items-center htw-justify-center htw-h-full" };
-const _hoisted_2 = ["src"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "HomeView",
-  setup(__props) {
-    const logoUrl = computed(() => {
-      var _a, _b;
-      return ((_b = (_a = histoireConfig.theme) == null ? void 0 : _a.logo) == null ? void 0 : _b.square) ? customLogos.square : HistoireLogo;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createBaseVNode("img", {
-          src: unref(logoUrl),
-          alt: "Logo",
-          class: "htw-w-64 htw-h-64 htw-opacity-25"
-        }, null, 8, _hoisted_2)
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};
--- a/.histoire/dist/assets/MobileOverlay.vue2-a3503848.js
+++ b/.histoire/dist/assets/MobileOverlay.vue2-a3503848.js
@ -1,307 +0,0 @@
-import { d as defineComponent, l as resolveComponent, o as openBlock, q as createBlock, w as withCtx, g as createBaseVNode, n as normalizeClass, m as withKeys, aY as renderSlot, aQ as mergeProps, k as watch, bg as scrollIntoView, N as onMounted, r as ref, c as computed, a_ as onUnmounted, e as createElementBlock, aX as withModifiers, L as normalizeStyle, a as unref, bh as useMediaQuery, t as toDisplayString, f as createVNode, I as Icon, h as createCommentVNode, T as Transition } from "./vendor-3ab3e533.js";
-const _sfc_main$2 = defineComponent({
-  inheritAttrs: false,
-  props: {
-    isActive: {
-      type: Boolean,
-      default: void 0
-    }
-  },
-  emits: {
-    navigate: () => true
-  },
-  setup(props, { emit }) {
-    function handleNavigate(event, navigate) {
-      emit("navigate");
-      navigate(event);
-    }
-    return {
-      handleNavigate
-    };
-  }
-});
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const _hoisted_1$2 = ["href", "onClick", "onKeyup"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_RouterLink = resolveComponent("RouterLink");
-  return openBlock(), createBlock(_component_RouterLink, mergeProps({ class: "histoire-base-list-item-link" }, _ctx.$attrs, { custom: "" }), {
-    default: withCtx(({ isActive: linkIsActive, href, navigate }) => [
-      createBaseVNode("a", {
-        href,
-        class: normalizeClass(["htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100", [
-          _ctx.$attrs.class,
-          (_ctx.isActive != null ? _ctx.isActive : linkIsActive) ? "active htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black" : "hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900"
-        ]]),
-        onClick: ($event) => _ctx.handleNavigate($event, navigate),
-        onKeyup: [
-          withKeys(($event) => _ctx.handleNavigate($event, navigate), ["enter"]),
-          withKeys(($event) => _ctx.handleNavigate($event, navigate), ["space"])
-        ]
-      }, [
-        renderSlot(_ctx.$slots, "default", {
-          active: _ctx.isActive != null ? _ctx.isActive : linkIsActive
-        })
-      ], 42, _hoisted_1$2)
-    ]),
-    _: 3
-  }, 16);
-}
-const BaseListItemLink = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
-function useScrollOnActive(active, el) {
-  watch(active, (value) => {
-    if (value) {
-      autoScroll();
-    }
-  });
-  function autoScroll() {
-    if (el.value) {
-      scrollIntoView(el.value, {
-        scrollMode: "if-needed",
-        block: "center",
-        inline: "nearest",
-        behavior: "smooth"
-      });
-    }
-  }
-  onMounted(() => {
-    if (active.value) {
-      autoScroll();
-    }
-  });
-  return {
-    autoScroll
-  };
-}
-const _hoisted_1$1 = ["onMousedown"];
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "BaseSplitPane",
-  props: {
-    orientation: {
-      type: String,
-      default: "landscape",
-      validator: (value) => ["landscape", "portrait"].includes(value)
-    },
-    defaultSplit: {
-      type: Number,
-      default: 50
-    },
-    split: {
-      type: Number,
-      default: void 0
-    },
-    min: {
-      type: Number,
-      default: 20
-    },
-    max: {
-      type: Number,
-      default: 80
-    },
-    draggerOffset: {
-      type: String,
-      default: "center",
-      validator: (value) => ["before", "center", "after"].includes(value)
-    },
-    saveId: {
-      type: String,
-      default: null
-    },
-    fixed: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    "update:split": (value) => true
-  },
-  setup(__props, { emit }) {
-    const props = __props;
-    const SAVE_PREFIX = "__histoire";
-    const currentSplit = ref(props.defaultSplit);
-    watch(() => props.split, (value) => {
-      if (value !== void 0) {
-        currentSplit.value = value;
-      }
-    }, {
-      immediate: true
-    });
-    if (props.saveId) {
-      const storageKey = `${SAVE_PREFIX}-split-pane-${props.saveId}`;
-      const savedValue = localStorage.getItem(storageKey);
-      if (savedValue != null) {
-        let parsedValue;
-        try {
-          parsedValue = JSON.parse(savedValue);
-        } catch (e) {
-          console.error(e);
-        }
-        if (typeof parsedValue === "number") {
-          currentSplit.value = parsedValue;
-        }
-      }
-      watch(currentSplit, (value) => {
-        localStorage.setItem(storageKey, JSON.stringify(value));
-      });
-      watch(currentSplit, (value) => {
-        if (value !== props.split) {
-          emit("update:split", value);
-        }
-      }, {
-        immediate: true
-      });
-    }
-    const boundSplit = computed(() => {
-      if (currentSplit.value < props.min) {
-        return props.min;
-      } else if (currentSplit.value > props.max) {
-        return props.max;
-      } else {
-        return currentSplit.value;
-      }
-    });
-    const leftStyle = computed(() => ({
-      [props.orientation === "landscape" ? "width" : "height"]: props.fixed ? `${boundSplit.value}px` : `${boundSplit.value}%`
-    }));
-    const rightStyle = computed(() => ({
-      [props.orientation === "landscape" ? "width" : "height"]: props.fixed ? null : `${100 - boundSplit.value}%`
-    }));
-    const dragging = ref(false);
-    let startPosition = 0;
-    let startSplit = 0;
-    const el = ref(null);
-    function dragStart(e) {
-      dragging.value = true;
-      startPosition = props.orientation === "landscape" ? e.pageX : e.pageY;
-      startSplit = boundSplit.value;
-      window.addEventListener("mousemove", dragMove);
-      window.addEventListener("mouseup", dragEnd);
-    }
-    function dragMove(e) {
-      if (dragging.value) {
-        let position;
-        let totalSize;
-        if (props.orientation === "landscape") {
-          position = e.pageX;
-          totalSize = el.value.offsetWidth;
-        } else {
-          position = e.pageY;
-          totalSize = el.value.offsetHeight;
-        }
-        const dPosition = position - startPosition;
-        if (props.fixed) {
-          currentSplit.value = startSplit + dPosition;
-        } else {
-          currentSplit.value = startSplit + ~~(dPosition / totalSize * 200) / 2;
-        }
-      }
-    }
-    function dragEnd() {
-      dragging.value = false;
-      removeDragListeners();
-    }
-    function removeDragListeners() {
-      window.removeEventListener("mousemove", dragMove);
-      window.removeEventListener("mouseup", dragEnd);
-    }
-    onUnmounted(() => {
-      removeDragListeners();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "el",
-        ref: el,
-        class: normalizeClass(["histoire-base-split-pane htw-flex htw-h-full htw-isolate htw-overflow-auto", {
-          "htw-flex-col": __props.orientation === "portrait",
-          "htw-cursor-ew-resize": dragging.value && __props.orientation === "landscape",
-          "htw-cursor-ns-resize": dragging.value && __props.orientation === "portrait",
-          [__props.orientation]: true
-        }])
-      }, [
-        createBaseVNode("div", {
-          class: normalizeClass(["htw-relative htw-top-0 htw-left-0 htw-z-20", {
-            "htw-pointer-events-none": dragging.value,
-            "htw-border-r htw-border-gray-300/30 dark:htw-border-gray-800": __props.orientation === "landscape",
-            "htw-flex-none": __props.fixed
-          }]),
-          style: normalizeStyle(unref(leftStyle))
-        }, [
-          renderSlot(_ctx.$slots, "first", {}, void 0, true),
-          createBaseVNode("div", {
-            class: normalizeClass(["dragger htw-absolute htw-z-100 hover:htw-bg-primary-500/50 htw-transition-colors htw-duration-150 htw-delay-150", {
-              "htw-top-0 htw-bottom-0 htw-cursor-ew-resize": __props.orientation === "landscape",
-              "htw-left-0 htw-right-0 htw-cursor-ns-resize": __props.orientation === "portrait",
-              [`dragger-offset-${__props.draggerOffset}`]: true,
-              "htw-bg-primary-500/25": dragging.value
-            }]),
-            onMousedown: withModifiers(dragStart, ["prevent"])
-          }, null, 42, _hoisted_1$1)
-        ], 6),
-        createBaseVNode("div", {
-          class: normalizeClass(["htw-relative htw-bottom-0 htw-right-0", {
-            "htw-pointer-events-none": dragging.value,
-            "htw-border-t htw-border-gray-300/30 dark:htw-border-gray-800": __props.orientation === "portrait",
-            "htw-flex-1": __props.fixed
-          }]),
-          style: normalizeStyle(unref(rightStyle))
-        }, [
-          renderSlot(_ctx.$slots, "last", {}, void 0, true)
-        ], 6)
-      ], 2);
-    };
-  }
-});
-const BaseSplitPane = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-ed925107"]]);
-const isMobile = useMediaQuery("(max-width: 640px)");
-const _hoisted_1 = {
-  key: 0,
-  class: "histoire-mobile-overlay htw-absolute htw-z-10 htw-bg-white dark:htw-bg-gray-700 htw-w-screen htw-h-screen htw-inset-0 htw-overflow-hidden htw-flex htw-flex-col"
-};
-const _hoisted_2 = { class: "htw-p-4 htw-h-16 htw-flex htw-border-b htw-border-gray-100 dark:htw-border-gray-800 htw-items-center htw-place-content-between" };
-const _hoisted_3 = { class: "htw-text-gray-500" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "MobileOverlay",
-  props: {
-    title: null,
-    opened: { type: Boolean }
-  },
-  emits: ["close"],
-  setup(__props, { emit: emits }) {
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(Transition, { name: "__histoire-fade-bottom" }, {
-        default: withCtx(() => [
-          __props.opened ? (openBlock(), createElementBlock("div", _hoisted_1, [
-            createBaseVNode("div", _hoisted_2, [
-              createBaseVNode("span", _hoisted_3, toDisplayString(__props.title), 1),
-              createBaseVNode("a", {
-                class: "htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer",
-                onClick: _cache[0] || (_cache[0] = ($event) => emits("close"))
-              }, [
-                createVNode(unref(Icon), {
-                  icon: "carbon:close",
-                  class: "htw-w-8 htw-h-8 htw-shrink-0"
-                })
-              ])
-            ]),
-            renderSlot(_ctx.$slots, "default")
-          ])) : createCommentVNode("", true)
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-export {
-  BaseListItemLink as B,
-  _export_sfc as _,
-  _sfc_main as a,
-  BaseSplitPane as b,
-  isMobile as i,
-  useScrollOnActive as u
-};
--- a/.histoire/dist/assets/SearchPane.vue-c31f94e5.js
+++ b/.histoire/dist/assets/SearchPane.vue-c31f94e5.js
@ -1,545 +0,0 @@
-import { d as defineComponent, o as openBlock, e as createElementBlock, aY as renderSlot, n as normalizeClass, m as withKeys, c as computed, a as unref, q as createBlock, I as Icon, f as createVNode, g as createBaseVNode, D as createTextVNode, t as toDisplayString, F as Fragment, p as renderList, h as createCommentVNode, u as useCssVars, r as ref, aS as toRefs, aU as useRouter, w as withCtx, aO as markRaw, k as watch, bi as useFocus, bj as refDebounced, B as withDirectives, aZ as vModelText, aX as withModifiers, _ as __vitePreload, bk as flexsearch_bundleExports } from "./vendor-3ab3e533.js";
-import { u as useStoryStore } from "./story-804dabc9.js";
-import { B as BaseEmpty } from "./BaseEmpty.vue-045cbb89.js";
-import { o as onKeyboardShortcut, u as useCommandStore } from "./bundle-main-f9305308.js";
-import { _ as _export_sfc, u as useScrollOnActive, B as BaseListItemLink } from "./MobileOverlay.vue2-a3503848.js";
-import "./GenericMountStory.vue2-2bb5633d.js";
-function pipeline(a, b, c, d) {
-  if (a && (b && (a = replace(a, b)), this.matcher && (a = replace(a, this.matcher)), this.stemmer && 1 < a.length && (a = replace(a, this.stemmer)), d && 1 < a.length && (a = collapse(a)), c || "" === c)) {
-    const b2 = a.split(c);
-    return this.filter ? filter$1(b2, this.filter) : b2;
-  }
-  return a;
-}
-const regex_whitespace = /[\p{Z}\p{S}\p{P}\p{C}]+/u;
-const regex_normalize = /[\u0300-\u036f]/g;
-function normalize(a) {
-  return a.normalize && (a = a.normalize("NFD").replace(regex_normalize, "")), a;
-}
-function replace(a, b) {
-  for (let c = 0, d = b.length; c < d && (a = a.replace(b[c], b[c + 1]), !!a); c += 2)
-    ;
-  return a;
-}
-function regex(a) {
-  return new RegExp(a, "g");
-}
-function collapse(a) {
-  let b = "", c = "";
-  for (let d, e = 0, f = a.length; e < f; e++)
-    (d = a[e]) !== c && (b += c = d);
-  return b;
-}
-function filter$1(a, b) {
-  const c = a.length, d = [];
-  for (let e = 0, f = 0; e < c; e++) {
-    const c2 = a[e];
-    c2 && !b[c2] && (d[f++] = c2);
-  }
-  return d;
-}
-const regex_a = regex("[àáâãäå]"), regex_e = regex("[èéêë]"), regex_i = regex("[ìíîï]"), regex_o = regex("[òóôõöő]"), regex_u = regex("[ùúûüű]"), regex_y = regex("[ýŷÿ]"), regex_n = regex("ñ"), regex_c = regex("[çc]"), regex_s = regex("ß"), regex_and = regex(" & "), pairs$1 = [regex_a, "a", regex_e, "e", regex_i, "i", regex_o, "o", regex_u, "u", regex_y, "y", regex_n, "n", regex_c, "k", regex_s, "s", regex_and, " and "];
-function encode$2(a) {
-  return a = "" + a, pipeline.call(this, normalize(a).toLowerCase(), !a.normalize && pairs$1, regex_whitespace, false);
-}
-const regex_strip = /[^a-z0-9]+/, soundex = { b: "p", v: "f", w: "f", z: "s", x: "s", ß: "s", d: "t", n: "m", c: "k", g: "k", j: "k", q: "k", i: "e", y: "e", u: "o" };
-function encode$1(a) {
-  a = encode$2.call(this, a).join(" ");
-  const b = [];
-  if (a) {
-    const c = a.split(regex_strip), d = c.length;
-    for (let e, f = 0, g = 0; f < d; f++)
-      if ((a = c[f]) && (!this.filter || !this.filter[a])) {
-        e = a[0];
-        let c2 = soundex[e] || e, d2 = c2;
-        for (let b2 = 1; b2 < a.length; b2++) {
-          e = a[b2];
-          const f2 = soundex[e] || e;
-          f2 && f2 !== d2 && (c2 += f2, d2 = f2);
-        }
-        b[g++] = c2;
-      }
-  }
-  return b;
-}
-const charset = { encode, rtl: false, tokenize: "" };
-const regex_ae = regex("ae"), regex_oe = regex("oe"), regex_sh = regex("sh"), regex_th = regex("th"), regex_ph = regex("ph"), regex_pf = regex("pf"), pairs = [regex_ae, "a", regex_oe, "o", regex_sh, "s", regex_th, "t", regex_ph, "f", regex_pf, "f", regex("(?![aeo])h(?![aeo])"), "", regex("(?!^[aeo])h(?!^[aeo])"), ""];
-function encode(a, b) {
-  return a && (a = encode$1.call(this, a).join(" "), 2 < a.length && (a = replace(a, pairs)), !b && (1 < a.length && (a = collapse(a)), a && (a = a.split(" ")))), a;
-}
-const filter = ["a", "about", "above", "after", "again", "against", "all", "also", "am", "an", "and", "any", "are", "aren't", "as", "at", "be", "because", "been", "before", "being", "below", "both", "but", "by", "can", "cannot", "can't", "come", "could", "couldn't", "did", "didn't", "do", "does", "doesn't", "doing", "dont", "down", "during", "each", "even", "few", "first", "for", "from", "further", "get", "go", "had", "hadn't", "has", "hasn't", "have", "haven't", "having", "he", "hed", "her", "here", "here's", "hers", "herself", "hes", "him", "himself", "his", "how", "how's", "i", "id", "if", "ill", "im", "in", "into", "is", "isn't", "it", "it's", "itself", "i've", "just", "know", "let's", "like", "make", "me", "more", "most", "mustn't", "my", "myself", "new", "no", "nor", "not", "now", "of", "off", "on", "once", "only", "or", "other", "ought", "our", "our's", "ourselves", "out", "over", "own", "same", "say", "see", "shan't", "she", "she'd", "shell", "shes", "should", "shouldn't", "so", "some", "such", "than", "that", "that's", "the", "their", "theirs", "them", "themselves", "then", "there", "there's", "these", "they", "they'd", "they'll", "they're", "they've", "this", "those", "through", "time", "to", "too", "until", "up", "us", "very", "want", "was", "wasn't", "way", "we", "wed", "well", "were", "weren't", "we've", "what", "what's", "when", "when's", "where", "where's", "which", "while", "who", "whom", "who's", "why", "why's", "will", "with", "won't", "would", "wouldn't", "you", "you'd", "you'll", "your", "you're", "your's", "yourself", "yourselves", "you've"];
-const stemmer = { ational: "ate", iveness: "ive", fulness: "ful", ousness: "ous", ization: "ize", tional: "tion", biliti: "ble", icate: "ic", ative: "", alize: "al", iciti: "ic", entli: "ent", ousli: "ous", alism: "al", ation: "ate", aliti: "al", iviti: "ive", ement: "", enci: "ence", anci: "ance", izer: "ize", alli: "al", ator: "ate", logi: "log", ical: "ic", ance: "", ence: "", ness: "", able: "", ible: "", ment: "", eli: "e", bli: "ble", ful: "", ant: "", ent: "", ism: "", ate: "", iti: "", ous: "", ive: "", ize: "", al: "", ou: "", er: "", ic: "" };
-const matcher = {};
-const language = { filter, stemmer, matcher };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "BaseListItem",
-  props: {
-    isActive: { type: Boolean }
-  },
-  emits: ["navigate"],
-  setup(__props, { emit }) {
-    function handleNavigate() {
-      emit("navigate");
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("a", {
-        class: normalizeClass(["istoire-base-list-ite htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100", [
-          _ctx.$attrs.class,
-          __props.isActive ? "active htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black" : "hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900"
-        ]]),
-        onClick: _cache[0] || (_cache[0] = ($event) => handleNavigate()),
-        onKeyup: [
-          _cache[1] || (_cache[1] = withKeys(($event) => handleNavigate(), ["enter"])),
-          _cache[2] || (_cache[2] = withKeys(($event) => handleNavigate(), ["space"]))
-        ]
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 34);
-    };
-  }
-});
-const _hoisted_1$3 = ["src", "alt"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "BaseIcon",
-  props: {
-    icon: null
-  },
-  setup(__props) {
-    const props = __props;
-    const isUrl = computed(() => props.icon.startsWith("http") || props.icon.startsWith("data:image") || props.icon.startsWith(".") || props.icon.startsWith("/"));
-    return (_ctx, _cache) => {
-      return unref(isUrl) ? (openBlock(), createElementBlock("img", {
-        key: 0,
-        src: __props.icon,
-        alt: __props.icon,
-        class: "histoire-base-icon"
-      }, null, 8, _hoisted_1$3)) : (openBlock(), createBlock(unref(Icon), {
-        key: 1,
-        icon: __props.icon,
-        class: "histoire-base-icon"
-      }, null, 8, ["icon"]));
-    };
-  }
-});
-const BaseIcon = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-74182813"]]);
-const _hoisted_1$2 = { class: "htw-flex-1" };
-const _hoisted_2 = { class: "htw-flex" };
-const _hoisted_3 = { class: "htw-ml-auto htw-opacity-40" };
-const _hoisted_4 = {
-  key: 0,
-  class: "htw-flex htw-items-center htw-gap-0.5 htw-opacity-60"
-};
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "SearchItemContent",
-  props: {
-    result: null,
-    selected: { type: Boolean }
-  },
-  setup(__props) {
-    const defaultIcons = {
-      story: "carbon:cube",
-      variant: "carbon:cube"
-    };
-    const kindLabels = {
-      story: "Story",
-      variant: "Variant",
-      command: "Command"
-    };
-    return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(BaseIcon, {
-          icon: __props.result.icon ?? defaultIcons[__props.result.kind],
-          class: normalizeClass(["htw-w-4 htw-h-4", [
-            !__props.selected ? [
-              __props.result.iconColor ? "bind-icon-color" : {
-                "htw-text-primary-500": __props.result.kind === "story",
-                "htw-text-gray-500": __props.result.kind === "variant"
-              }
-            ] : [],
-            {
-              "colorize-black": __props.selected
-            }
-          ]])
-        }, null, 8, ["icon", "class"]),
-        createBaseVNode("div", _hoisted_1$2, [
-          createBaseVNode("div", _hoisted_2, [
-            createTextVNode(toDisplayString(__props.result.title) + " ", 1),
-            createBaseVNode("span", _hoisted_3, toDisplayString(kindLabels[__props.result.kind]), 1)
-          ]),
-          ((_a = __props.result.path) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", _hoisted_4, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.result.path, (p, index) => {
-              return openBlock(), createElementBlock("div", {
-                key: index,
-                class: "htw-flex htw-items-center htw-gap-0.5"
-              }, [
-                index > 0 ? (openBlock(), createBlock(unref(Icon), {
-                  key: 0,
-                  icon: "carbon:chevron-right",
-                  class: "htw-w-4 htw-h-4 htw-mt-0.5 htw-opacity-50"
-                })) : createCommentVNode("", true),
-                createBaseVNode("span", null, toDisplayString(p), 1)
-              ]);
-            }), 128))
-          ])) : createCommentVNode("", true)
-        ])
-      ], 64);
-    };
-  }
-});
-const _hoisted_1$1 = ["data-selected"];
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "SearchItem",
-  props: {
-    result: {
-      type: Object,
-      required: true
-    },
-    selected: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: {
-    close: () => true
-  },
-  setup(__props, { emit }) {
-    const props = __props;
-    useCssVars((_ctx) => ({
-      "a8c1277e": __props.result.iconColor
-    }));
-    const el = ref();
-    const { selected } = toRefs(props);
-    useScrollOnActive(selected, el);
-    const router = useRouter();
-    onKeyboardShortcut(["enter"], () => {
-      if (!props.selected)
-        return;
-      action();
-    });
-    function action(fromClick = false) {
-      if ("route" in props.result && !fromClick) {
-        router.push(props.result.route);
-      }
-      if ("onActivate" in props.result) {
-        props.result.onActivate();
-      }
-      emit("close");
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "el",
-        ref: el,
-        class: "histoire-search-item",
-        "data-test-id": "search-item",
-        "data-selected": unref(selected) ? "" : void 0
-      }, [
-        "route" in __props.result ? (openBlock(), createBlock(BaseListItemLink, {
-          key: 0,
-          to: __props.result.route,
-          "is-active": unref(selected),
-          class: "htw-px-6 htw-py-4 htw-gap-4",
-          onNavigate: _cache[0] || (_cache[0] = ($event) => action(true))
-        }, {
-          default: withCtx(() => [
-            createVNode(_sfc_main$2, {
-              result: __props.result,
-              selected: unref(selected)
-            }, null, 8, ["result", "selected"])
-          ]),
-          _: 1
-        }, 8, ["to", "is-active"])) : createCommentVNode("", true),
-        "onActivate" in __props.result ? (openBlock(), createBlock(_sfc_main$4, {
-          key: 1,
-          "is-active": unref(selected),
-          class: "htw-px-6 htw-py-4 htw-gap-4",
-          onNavigate: _cache[1] || (_cache[1] = ($event) => action(true))
-        }, {
-          default: withCtx(() => [
-            createVNode(_sfc_main$2, {
-              result: __props.result,
-              selected: unref(selected)
-            }, null, 8, ["result", "selected"])
-          ]),
-          _: 1
-        }, 8, ["is-active"])) : createCommentVNode("", true)
-      ], 8, _hoisted_1$1);
-    };
-  }
-});
-const SearchItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-6c8e9661"]]);
-let searchData$1 = { "index": { "reg": '{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1}', "text.cfg": '{"doc":0,"opt":1}', "text.map": '[{"s":[0,1],"se":[0,1],"sep":[0,1],"k":[2,3],"ko":[2,3],"kos":[2,3],"kost":[2,3],"p":[4,5],"pr":[4,5],"pro":[4,5],"prop":[4,5],"propo":[4,5],"propol":[4,5],"propols":[4,5],"propolse":[4,5],"propolseo":[4,5],"propolseom":[4,5],"e":[6,7],"em":[6,7],"emk":[6,7],"emke":[6,7],"emkem":[6,7],"emkeme":[6,7],"f":[8,9],"ft":[8,9],"ftl":[8,9]},{"e":[0,1],"et":[0,1],"ete":[0,1],"etem":[0,1],"m":[2,3],"ma":[2,3],"mas":[2,3],"t":[5,7,9],"te":[5,7,9],"tef":[5,7,9],"tefa":[5,7,9],"tefao":[5,7,9],"tefaol":[5,7,9],"tefaolt":[5,7,9]},{"t":[1,3],"te":[1,3],"tef":[1,3],"tefa":[1,3],"tefao":[1,3],"tefaol":[1,3],"tefaolt":[1,3]},{},{},{},{},{},{}]', "text.ctx": "[{}]" }, "idMap": { "0": { "id": "src-lib-components-shipitem-story-svelte", "kind": "story" }, "1": { "id": "src-lib-components-shipitem-story-svelte:_default", "kind": "variant" }, "2": { "id": "src-lib-components-costmass-index-story-svelte", "kind": "story" }, "3": { "id": "src-lib-components-costmass-index-story-svelte:_default", "kind": "variant" }, "4": { "id": "src-lib-components-shipedit-propulsion-story-svelte", "kind": "story" }, "5": { "id": "src-lib-components-shipedit-propulsion-story-svelte:_default", "kind": "variant" }, "6": { "id": "src-lib-components-shipedit-propulsion-engine-story-svelte", "kind": "story" }, "7": { "id": "src-lib-components-shipedit-propulsion-engine-story-svelte:_default", "kind": "variant" }, "8": { "id": "src-lib-components-shipedit-propulsion-ftl-story-svelte", "kind": "story" }, "9": { "id": "src-lib-components-shipedit-propulsion-ftl-story-svelte:_default", "kind": "variant" } } };
-const searchData = markRaw(searchData$1);
-function useSelection(list) {
-  const selectedIndex = ref(0);
-  watch(list, () => {
-    selectedIndex.value = 0;
-  });
-  function selectNext() {
-    selectedIndex.value++;
-    if (selectedIndex.value > list.value.length - 1) {
-      selectedIndex.value = 0;
-    }
-  }
-  function selectPrevious() {
-    selectedIndex.value--;
-    if (selectedIndex.value < 0) {
-      selectedIndex.value = list.value.length - 1;
-    }
-  }
-  return {
-    selectedIndex: computed(() => selectedIndex.value),
-    selectNext,
-    selectPrevious
-  };
-}
-const _hoisted_1 = {
-  key: 1,
-  class: "htw-max-h-[400px] htw-overflow-y-auto htw-rounded-b-lg"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "SearchPane",
-  props: {
-    shown: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: {
-    close: () => true
-  },
-  setup(__props, { emit }) {
-    const props = __props;
-    const DocSearchData = () => __vitePreload(() => import("./search-docs-data-9f078283.js"), true ? ["assets/search-docs-data-9f078283.js","assets/vendor-3ab3e533.js"] : void 0);
-    function close() {
-      emit("close");
-    }
-    const input = ref();
-    const { focused } = useFocus(input, {
-      initialValue: true
-    });
-    watch(() => props.shown, (value) => {
-      if (value) {
-        requestAnimationFrame(() => {
-          focused.value = true;
-          input.value.select();
-        });
-      }
-    });
-    const searchInputText = ref("");
-    const rateLimitedSearch = refDebounced(searchInputText, 50);
-    const storyStore = useStoryStore();
-    let titleSearchIndex;
-    let titleIdMap;
-    function createIndex() {
-      return new flexsearch_bundleExports.Document({
-        preset: "match",
-        document: {
-          id: "id",
-          index: [
-            "text"
-          ]
-        },
-        worker: true,
-        charset,
-        language,
-        tokenize: "forward"
-      });
-    }
-    async function loadSearchIndex(data) {
-      titleSearchIndex = createIndex();
-      for (const key of Object.keys(data.index)) {
-        await titleSearchIndex.import(key, data.index[key]);
-      }
-      titleIdMap = data.idMap;
-    }
-    loadSearchIndex(searchData);
-    let docSearchIndex;
-    let docIdMap;
-    async function loadDocSearchIndex() {
-      async function load(data) {
-        docSearchIndex = createIndex();
-        for (const key of Object.keys(data.index)) {
-          await docSearchIndex.import(key, data.index[key]);
-        }
-        docIdMap = data.idMap;
-        if (rateLimitedSearch.value) {
-          searchOnDocField(rateLimitedSearch.value);
-        }
-      }
-      const searchDataModule = await DocSearchData();
-      load(searchDataModule.searchData);
-      searchDataModule.onUpdate((searchData2) => {
-        load(searchData2);
-      });
-    }
-    loadDocSearchIndex();
-    const titleResults = ref([]);
-    watch(rateLimitedSearch, async (value) => {
-      const list = [];
-      const raw = await titleSearchIndex.search(value);
-      let rank = 0;
-      for (const field of raw) {
-        for (const id of field.result) {
-          const idMapData = titleIdMap[id];
-          if (!idMapData)
-            continue;
-          switch (idMapData.kind) {
-            case "story": {
-              list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank));
-              rank++;
-              break;
-            }
-            case "variant": {
-              const [storyId] = idMapData.id.split(":");
-              const story = storyStore.getStoryById(storyId);
-              const variant = storyStore.getVariantById(idMapData.id);
-              list.push(variantResultFactory(story, variant, rank));
-              rank++;
-              break;
-            }
-          }
-        }
-      }
-      titleResults.value = list;
-    });
-    const docsResults = ref([]);
-    async function searchOnDocField(query) {
-      if (docSearchIndex) {
-        const list = [];
-        const raw = await docSearchIndex.search(query);
-        let rank = 0;
-        for (const field of raw) {
-          for (const id of field.result) {
-            const idMapData = docIdMap[id];
-            if (!idMapData)
-              continue;
-            switch (idMapData.kind) {
-              case "story": {
-                list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank, "docs"));
-                rank++;
-                break;
-              }
-            }
-          }
-        }
-        docsResults.value = list;
-      }
-    }
-    watch(rateLimitedSearch, searchOnDocField);
-    function storyResultFactory(story, rank, type = "title") {
-      return {
-        kind: "story",
-        rank,
-        id: `story:${story.id}`,
-        title: story.title,
-        route: {
-          name: "story",
-          params: {
-            storyId: story.id
-          },
-          query: {
-            ...type === "docs" ? { tab: "docs" } : {}
-          }
-        },
-        path: story.file.path.slice(0, -1),
-        icon: story.icon,
-        iconColor: story.iconColor
-      };
-    }
-    function variantResultFactory(story, variant, rank, type = "title") {
-      return {
-        kind: "variant",
-        rank,
-        id: `variant:${story.id}:${variant.id}`,
-        title: variant.title,
-        route: {
-          name: "story",
-          params: {
-            storyId: story.id
-          },
-          query: {
-            variantId: variant.id,
-            ...type === "docs" ? { tab: "docs" } : {}
-          }
-        },
-        path: [...story.file.path ?? [], story.title],
-        icon: variant.icon,
-        iconColor: variant.iconColor
-      };
-    }
-    const commandResults = computed(() => {
-      return [];
-    });
-    useCommandStore();
-    const results = computed(() => {
-      const list = [
-        ...commandResults.value,
-        ...titleResults.value
-      ];
-      const seen = {};
-      for (const r of titleResults.value) {
-        seen[r.id] = true;
-      }
-      for (const r of docsResults.value) {
-        if (!seen[r.id]) {
-          list.push(r);
-        }
-      }
-      return list;
-    });
-    const {
-      selectedIndex,
-      selectNext,
-      selectPrevious
-    } = useSelection(results);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createBaseVNode("div", {
-          class: "histoire-search-pane htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500",
-          onClick: _cache[4] || (_cache[4] = ($event) => focused.value = true)
-        }, [
-          createVNode(unref(Icon), {
-            icon: "carbon:search",
-            class: "flex-none htw-w-4 htw-h-4"
-          }),
-          withDirectives(createBaseVNode("input", {
-            ref_key: "input",
-            ref: input,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchInputText.value = $event),
-            placeholder: "Search for stories, variants...",
-            class: "htw-bg-transparent htw-w-full htw-flex-1 htw-pl-0 htw-pr-6 htw-py-4 htw-outline-none",
-            onKeydown: [
-              _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => unref(selectNext)(), ["prevent"]), ["down"])),
-              _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => unref(selectPrevious)(), ["prevent"]), ["up"])),
-              _cache[3] || (_cache[3] = withKeys(($event) => close(), ["escape"]))
-            ]
-          }, null, 544), [
-            [vModelText, searchInputText.value]
-          ])
-        ]),
-        unref(rateLimitedSearch) && !unref(results).length ? (openBlock(), createBlock(BaseEmpty, {
-          key: 0,
-          class: "no-animation"
-        }, {
-          default: withCtx(() => [
-            createTextVNode(" No results ")
-          ]),
-          _: 1
-        })) : unref(results).length ? (openBlock(), createElementBlock("div", _hoisted_1, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(results), (result, index) => {
-            return openBlock(), createBlock(SearchItem, {
-              key: result.id,
-              result,
-              selected: index === unref(selectedIndex),
-              onClose: _cache[5] || (_cache[5] = ($event) => close())
-            }, null, 8, ["result", "selected"]);
-          }), 128))
-        ])) : createCommentVNode("", true)
-      ], 64);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};
--- a/.histoire/dist/assets/StoryView.vue-e7ab65e8.js
+++ b/.histoire/dist/assets/StoryView.vue-e7ab65e8.js
--- a/.histoire/dist/assets/resolvedvirtual_story-source_src-lib-components-shipedit-propulsion-engine-story-svelte-42e8b729.js
+++ b/.histoire/dist/assets/resolvedvirtual_story-source_src-lib-components-shipedit-propulsion-engine-story-svelte-42e8b729.js
@ -1,4 +0,0 @@
-const __resolved__virtual_storySource_srcLibComponentsShipeditPropulsionEngineStorySvelte = '<Hst.Story title="ShipEdit/Propulsion/Engine">\n  <Engine {api} />\n</Hst.Story>\n\n<script>\n  export let Hst;\n  import { logEvent } from "histoire/client";\n\n  const api = {\n    dispatch: {\n      setEngine: (engine) => logEvent("setEngine", { engine }),\n    },\n  };\n\n  import Engine from "./Engine.svelte";\n  import "$lib/components/GlobalStyle.svelte";\n<\/script>\n';
-export {
-  __resolved__virtual_storySource_srcLibComponentsShipeditPropulsionEngineStorySvelte as default
-};
--- a/.histoire/dist/assets/resolvedvirtual_story-source_src-lib-components-shipedit-propulsion-ftl-story-svelte-df90933e.js
+++ b/.histoire/dist/assets/resolvedvirtual_story-source_src-lib-components-shipedit-propulsion-ftl-story-svelte-df90933e.js
@ -1,4 +0,0 @@
-const __resolved__virtual_storySource_srcLibComponentsShipeditPropulsionFtlStorySvelte = '<Hst.Story title="ShipEdit/Propulsion/Ftl">\n  <Ftl {api} />\n</Hst.Story>\n\n<script>\n  export let Hst;\n  import { logEvent } from "histoire/client";\n\n  const api = {\n    dispatch: {\n      setFtl: (ftl) => logEvent("setFtl", { ftl }),\n    },\n  };\n\n  import Ftl from "./Ftl.svelte";\n  import "$lib/components/GlobalStyle.svelte";\n<\/script>\n';
-export {
-  __resolved__virtual_storySource_srcLibComponentsShipeditPropulsionFtlStorySvelte as default
-};
--- a/.histoire/dist/assets/bundle-main-f9305308.js
+++ b/.histoire/dist/assets/bundle-main-f9305308.js
--- a/.histoire/dist/assets/bundle-sandbox-c5cd2a61.js
+++ b/.histoire/dist/assets/bundle-sandbox-c5cd2a61.js
@ -1,82 +0,0 @@
-import { R as parseQuery, r as ref, O as createApp, P as createPinia, k as watch, c as computed, S as STATE_SYNC, U as PREVIEW_SETTINGS_SYNC, N as onMounted, V as h, W as SANDBOX_READY, X as applyState, v as histoireConfig, s as isDark } from "./vendor-3ab3e533.js";
-import { m as mapFile, f as files, _ as _sfc_main } from "./GenericMountStory.vue2-2bb5633d.js";
-import { a as applyPreviewSettings, _ as _sfc_main$1, t as toRawDeep } from "./state-4b1a79d2.js";
-const sandbox = "";
-const query = parseQuery(window.location.search);
-const file = ref(mapFile(files.find((f) => f.id === query.storyId)));
-const app = createApp({
-  name: "SandboxApp",
-  setup() {
-    const story = computed(() => file.value.story);
-    const variant = computed(() => {
-      var _a;
-      return (_a = story.value) == null ? void 0 : _a.variants.find((v) => v.id === query.variantId);
-    });
-    let synced = false;
-    let mounted = false;
-    window.addEventListener("message", (event) => {
-      var _a, _b;
-      if (((_a = event.data) == null ? void 0 : _a.type) === STATE_SYNC) {
-        if (!mounted)
-          return;
-        synced = true;
-        applyState(variant.value.state, event.data.state);
-      } else if (((_b = event.data) == null ? void 0 : _b.type) === PREVIEW_SETTINGS_SYNC) {
-        applyPreviewSettings(event.data.settings);
-      }
-    });
-    watch(() => variant.value.state, (value) => {
-      var _a;
-      if (synced && mounted) {
-        synced = false;
-        return;
-      }
-      (_a = window.parent) == null ? void 0 : _a.postMessage({
-        type: STATE_SYNC,
-        state: toRawDeep(value, true)
-      });
-    }, {
-      deep: true
-    });
-    onMounted(() => {
-      mounted = true;
-    });
-    return {
-      story,
-      variant
-    };
-  },
-  render() {
-    return [
-      h("div", { class: "htw-sandbox-hidden" }, [
-        h(_sfc_main, {
-          key: file.value.story.id,
-          story: file.value.story
-        })
-      ]),
-      this.story && this.variant ? h(_sfc_main$1, {
-        story: this.story,
-        variant: this.variant,
-        onReady: () => {
-          var _a;
-          (_a = window.parent) == null ? void 0 : _a.postMessage({
-            type: SANDBOX_READY
-          });
-        }
-      }) : null
-    ];
-  }
-});
-app.use(createPinia());
-app.mount("#app");
-watch(isDark, (value) => {
-  if (value) {
-    document.documentElement.classList.add(histoireConfig.sandboxDarkClass);
-    document.documentElement.classList.add(histoireConfig.theme.darkClass);
-  } else {
-    document.documentElement.classList.remove(histoireConfig.sandboxDarkClass);
-    document.documentElement.classList.remove(histoireConfig.theme.darkClass);
-  }
-}, {
-  immediate: true
-});
--- a/.histoire/dist/assets/events-ae5cec59.js
+++ b/.histoire/dist/assets/events-ae5cec59.js
@ -1,31 +0,0 @@
-import { i as defineStore, K as reactive, r as ref, k as watch } from "./vendor-3ab3e533.js";
-import { u as useStoryStore } from "./story-804dabc9.js";
-import "./GenericMountStory.vue2-2bb5633d.js";
-const useEventsStore = defineStore("events", () => {
-  const storyStore = useStoryStore();
-  const events = reactive([]);
-  const unseen = ref(0);
-  function addEvent(event) {
-    events.push(event);
-    unseen.value++;
-  }
-  function reset() {
-    events.length = 0;
-    unseen.value = 0;
-  }
-  watch(() => {
-    var _a;
-    return (_a = storyStore.currentVariant) == null ? void 0 : _a.id;
-  }, () => {
-    reset();
-  });
-  return {
-    addEvent,
-    reset,
-    events,
-    unseen
-  };
-});
-export {
-  useEventsStore
-};
--- a/.histoire/dist/assets/search-docs-data-9f078283.js
+++ b/.histoire/dist/assets/search-docs-data-9f078283.js
@ -1,9 +0,0 @@
-import { aO as markRaw } from "./vendor-3ab3e533.js";
-let searchData$1 = { "index": { "reg": "{}", "text.cfg": '{"doc":0,"opt":1}', "text.map": "[{},{},{},{},{},{},{},{},{}]", "text.ctx": "[{}]" }, "idMap": {} };
-const searchData = markRaw(searchData$1);
-function onUpdate(cb) {
-}
-export {
-  onUpdate,
-  searchData
-};
--- a/.histoire/dist/assets/state-4b1a79d2.js
+++ b/.histoire/dist/assets/state-4b1a79d2.js
@ -1,92 +0,0 @@
-import { c as clientSupportPlugins } from "./GenericMountStory.vue2-2bb5633d.js";
-import { d as defineComponent, r as ref, aP as watchEffect, aO as markRaw, o as openBlock, q as createBlock, aQ as mergeProps, aR as resolveDynamicComponent, h as createCommentVNode, K as reactive, v as histoireConfig, z as isRef, a as unref } from "./vendor-3ab3e533.js";
-const __default__ = {
-  inheritAttrs: false
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  __name: "GenericRenderStory",
-  props: {
-    story: null
-  },
-  setup(__props) {
-    const props = __props;
-    const mountComponent = ref(null);
-    watchEffect(async () => {
-      var _a;
-      const clientPlugin = clientSupportPlugins[(_a = props.story.file) == null ? void 0 : _a.supportPluginId];
-      if (clientPlugin) {
-        try {
-          const pluginModule = await clientPlugin();
-          mountComponent.value = markRaw(pluginModule.RenderStory);
-        } catch (e) {
-          console.error(e);
-          throw e;
-        }
-      }
-    });
-    return (_ctx, _cache) => {
-      return mountComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(mountComponent.value), mergeProps({
-        key: 0,
-        class: "histoire-generic-render-story __histoire-render-story",
-        story: __props.story
-      }, _ctx.$attrs), null, 16, ["story"])) : createCommentVNode("", true);
-    };
-  }
-});
-const receivedSettings = reactive({});
-function applyPreviewSettings(settings) {
-  Object.assign(receivedSettings, settings);
-  document.documentElement.setAttribute("dir", settings.textDirection);
-  const contrastColor = getContrastColor(settings);
-  document.documentElement.style.setProperty("--histoire-contrast-color", contrastColor);
-  if (histoireConfig.autoApplyContrastColor) {
-    document.documentElement.style.color = contrastColor;
-  }
-}
-function getContrastColor(setting) {
-  var _a;
-  return ((_a = histoireConfig.backgroundPresets.find((preset) => preset.color === setting.backgroundColor)) == null ? void 0 : _a.contrastColor) ?? "unset";
-}
-const isObject = (val) => val !== null && typeof val === "object";
-function toRawDeep(val, clean = false, seen = /* @__PURE__ */ new WeakMap()) {
-  const unwrappedValue = isRef(val) ? unref(val) : val;
-  if (typeof unwrappedValue === "symbol") {
-    return unwrappedValue.toString();
-  }
-  if (!isObject(unwrappedValue)) {
-    return unwrappedValue;
-  }
-  if (seen.has(unwrappedValue)) {
-    return seen.get(unwrappedValue);
-  }
-  if (Array.isArray(unwrappedValue)) {
-    const result = [];
-    seen.set(unwrappedValue, result);
-    let list = unwrappedValue.map((value) => toRawDeep(value, clean, seen));
-    if (clean) {
-      list = list.filter((value) => typeof value !== "function");
-    }
-    result.push(...list);
-    return result;
-  } else {
-    const result = {};
-    seen.set(unwrappedValue, result);
-    toRawObject(unwrappedValue, result, clean, seen);
-    return result;
-  }
-}
-const toRawObject = (obj, target, clean = false, seen = /* @__PURE__ */ new WeakMap()) => {
-  Object.keys(obj).forEach((key) => {
-    if (clean && typeof obj[key] === "function") {
-      return;
-    }
-    target[key] = toRawDeep(obj[key], clean, seen);
-  });
-};
-export {
-  _sfc_main as _,
-  applyPreviewSettings as a,
-  getContrastColor as g,
-  toRawDeep as t
-};
--- a/.histoire/dist/assets/story-804dabc9.js
+++ b/.histoire/dist/assets/story-804dabc9.js
@ -1,44 +0,0 @@
-import { i as defineStore, r as ref, c as computed } from "./vendor-3ab3e533.js";
-import { r as router } from "./GenericMountStory.vue2-2bb5633d.js";
-const useStoryStore = defineStore("story", () => {
-  const stories = ref([]);
-  function setStories(value) {
-    stories.value = value;
-  }
-  const currentStory = computed(() => stories.value.find((s) => s.id === router.currentRoute.value.params.storyId));
-  const currentVariant = computed(() => {
-    var _a;
-    return (_a = currentStory.value) == null ? void 0 : _a.variants.find((v) => v.id === router.currentRoute.value.query.variantId);
-  });
-  const maps = computed(() => {
-    const storyMap = /* @__PURE__ */ new Map();
-    const variantMap = /* @__PURE__ */ new Map();
-    for (const story of stories.value) {
-      storyMap.set(story.id, story);
-      for (const variant of story.variants) {
-        variantMap.set(`${story.id}:${variant.id}`, variant);
-      }
-    }
-    return {
-      stories: storyMap,
-      variants: variantMap
-    };
-  });
-  function getStoryById(id) {
-    return maps.value.stories.get(id);
-  }
-  function getVariantById(idWithStoryId) {
-    return maps.value.variants.get(idWithStoryId);
-  }
-  return {
-    stories,
-    setStories,
-    currentStory,
-    currentVariant,
-    getStoryById,
-    getVariantById
-  };
-});
-export {
-  useStoryStore as u
-};
--- a/.histoire/dist/assets/style-622cf620.css
+++ b/.histoire/dist/assets/style-622cf620.css
--- a/.histoire/dist/assets/vendor-3ab3e533.js
+++ b/.histoire/dist/assets/vendor-3ab3e533.js
--- a/.histoire/dist/global.css
+++ b/.histoire/dist/global.css
@ -1,89 +0,0 @@
-:root {
-
-    --oxford-blue: hsla(226, 60%, 10%, 1);
-    --royal-blue-dark: hsla(218, 100%, 16%, 1);
-    --indigo-dye: hsla(209, 95%, 24%, 1);
-    --cg-blue: hsla(193, 80%, 35%, 1);
-    --white: hsla(20, 60%, 99%, 1);
-
-    --main-width: 60em;
-}
-
-small {font-size: var(--font-scale-9); }
-
-h1 {
-    margin: 0px;
-    padding: 0px;
-    font-size: var(--font-scale-14);
-}
-
-h2 {
-    font-size: var(--font-scale-12);
-}
-
-
-html, body {
-	position: relative;
-	width: 100%;
-	height: 100%;
-}
-
-body {
-    background-color: var(--white);
-	color: #333;
-	margin: 0;
-	padding: 8px;
-	box-sizing: border-box;
-	font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-
-a {
-	color: rgb(0,100,200);
-	text-decoration: none;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-a:visited {
-	color: rgb(0,80,160);
-}
-
-label {
-	display: block;
-}
-
-input, button, select, textarea {
-	font-family: inherit;
-	font-size: inherit;
-	padding: 0.4em;
-	margin: 0 0 0.5em 0;
-	box-sizing: border-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
-}
-
-input:disabled {
-	color: #ccc;
-}
-
-input[type="range"] {
-	height: 0;
-}
-
-/*  ---- inputs --- */
-
-input, select {
-    border: 0px;
-    border-bottom: 1px solid var(--indigo-dye);
-}
-
-input:focus, select:focus {
-    border: 1px solid var(--indigo-dye);;
-}
-
-input.short {
-    width:5em;
-}
-
--- a/.histoire/dist/histoire.json
+++ b/.histoire/dist/histoire.json
@ -1,5 +1,30 @@
 {
  "stories": [
+    {
+      "id": "src-lib-components-shipedit-story-svelte",
+      "title": "ShipEdit",
+      "group": null,
+      "layout": {
+        "type": "single",
+        "iframe": true
+      },
+      "icon": null,
+      "iconColor": null,
+      "docsOnly": false,
+      "variants": [
+        {
+          "id": "_default",
+          "title": "default"
+        }
+      ],
+      "relativePath": "src/lib/components/ShipEdit.story.svelte",
+      "supportPluginId": "svelte3",
+      "treePath": [
+        "ShipEdit"
+      ],
+      "virtual": false,
+      "markdownFile": null
+    },
    {
      "id": "src-lib-components-shipitem-story-svelte",
      "title": "ShipItem",
@ -50,6 +75,58 @@
      "virtual": false,
      "markdownFile": null
    },
+    {
+      "id": "src-lib-components-shipedit-carrier-story-svelte",
+      "title": "Carrier",
+      "group": null,
+      "layout": {
+        "type": "single",
+        "iframe": true
+      },
+      "icon": null,
+      "iconColor": null,
+      "docsOnly": false,
+      "variants": [
+        {
+          "id": "_default",
+          "title": "default"
+        }
+      ],
+      "relativePath": "src/lib/components/ShipEdit/Carrier.story.svelte",
+      "supportPluginId": "svelte3",
+      "treePath": [
+        "ShipEdit",
+        "Carrier"
+      ],
+      "virtual": false,
+      "markdownFile": null
+    },
+    {
+      "id": "src-lib-components-shipedit-identification-story-svelte",
+      "title": "Identification",
+      "group": null,
+      "layout": {
+        "type": "single",
+        "iframe": true
+      },
+      "icon": null,
+      "iconColor": null,
+      "docsOnly": false,
+      "variants": [
+        {
+          "id": "_default",
+          "title": "default"
+        }
+      ],
+      "relativePath": "src/lib/components/ShipEdit/Identification.story.svelte",
+      "supportPluginId": "svelte3",
+      "treePath": [
+        "ShipEdit",
+        "Identification"
+      ],
+      "virtual": false,
+      "markdownFile": null
+    },
    {
      "id": "src-lib-components-shipedit-propulsion-story-svelte",
      "title": "Propulsion",
@ -75,6 +152,31 @@
      "virtual": false,
      "markdownFile": null
    },
+    {
+      "id": "src-lib-components-shipedit-weaponry-story-svelte",
+      "title": "Weaponry",
+      "group": null,
+      "layout": {
+        "type": "single",
+        "iframe": true
+      },
+      "icon": null,
+      "iconColor": null,
+      "docsOnly": false,
+      "variants": [
+        {
+          "id": "_default",
+          "title": "default"
+        }
+      ],
+      "relativePath": "src/lib/components/ShipEdit/Weaponry.story.svelte",
+      "supportPluginId": "svelte3",
+      "treePath": [
+        "Weaponry"
+      ],
+      "virtual": false,
+      "markdownFile": null
+    },
    {
      "id": "src-lib-components-shipedit-propulsion-engine-story-svelte",
      "title": "Engine",
@ -128,6 +230,31 @@
      ],
      "virtual": false,
      "markdownFile": null
+    },
+    {
+      "id": "src-lib-components-shipedit-weaponry-weapon-arcs-story-svelte",
+      "title": "Arcs",
+      "group": null,
+      "layout": {
+        "type": "single",
+        "iframe": true
+      },
+      "icon": null,
+      "iconColor": null,
+      "docsOnly": false,
+      "variants": [
+        {
+          "id": "_default",
+          "title": "default"
+        }
+      ],
+      "relativePath": "src/lib/components/ShipEdit/Weaponry/Weapon/Arcs.story.svelte",
+      "supportPluginId": "svelte3",
+      "treePath": [
+        "Arcs"
+      ],
+      "virtual": false,
+      "markdownFile": null
    }
  ],
  "markdownFiles": []
--- a/.histoire/dist/index.html
+++ b/.histoire/dist/index.html
@ -5,12 +5,12 @@
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="">
-  <link rel="stylesheet" href="/assets/style-622cf620.css">
+  <link rel="stylesheet" href="/assets/style-7abbff26.css">
    
-    <link rel="preload" href="/assets/vendor-3ab3e533.js" as="script" crossOrigin="anonymous">
+    <link rel="preload" href="/assets/vendor-5d606883.js" as="script" crossOrigin="anonymous">
 </head>
 <body>
  <div id="app"></div>
-    <script type="module" src="/assets/bundle-main-f9305308.js"></script>
+    <script type="module" src="/assets/bundle-main-2dc03f26.js"></script>
 </body>
 </html>
--- a/.histoire/screenshots/src-lib-components-costmass-index-story-svelte-_default-1280x800.png
+++ b/.histoire/screenshots/src-lib-components-costmass-index-story-svelte-_default-1280x800.png
--- a/.histoire/screenshots/src-lib-components-shipedit-carrier-story-svelte-_default-1280x800.png
+++ b/.histoire/screenshots/src-lib-components-shipedit-carrier-story-svelte-_default-1280x800.png
--- a/.histoire/screenshots/src-lib-components-shipedit-identification-story-svelte-_default-1280x800.png
+++ b/.histoire/screenshots/src-lib-components-shipedit-identification-story-svelte-_default-1280x800.png
--- a/.histoire/screenshots/src-lib-components-shipedit-propulsion-engine-story-svelte-_default-1280x800.png
+++ b/.histoire/screenshots/src-lib-components-shipedit-propulsion-engine-story-svelte-_default-1280x800.png
--- a/.histoire/screenshots/src-lib-components-shipedit-propulsion-ftl-story-svelte-_default-1280x800.png
+++ b/.histoire/screenshots/src-lib-components-shipedit-propulsion-ftl-story-svelte-_default-1280x800.png
--- a/.histoire/screenshots/src-lib-components-shipedit-propulsion-story-svelte-_default-1280x800.png
+++ b/.histoire/screenshots/src-lib-components-shipedit-propulsion-story-svelte-_default-1280x800.png
--- a/.histoire/screenshots/src-lib-components-shipedit-story-svelte-_default-1280x800.png
+++ b/.histoire/screenshots/src-lib-components-shipedit-story-svelte-_default-1280x800.png
--- a/.histoire/screenshots/src-lib-components-shipedit-weaponry-story-svelte-_default-1280x800.png
+++ b/.histoire/screenshots/src-lib-components-shipedit-weaponry-story-svelte-_default-1280x800.png
--- a/.histoire/screenshots/src-lib-components-shipedit-weaponry-weapon-arcs-story-svelte-_default-1280x800.png
+++ b/.histoire/screenshots/src-lib-components-shipedit-weaponry-weapon-arcs-story-svelte-_default-1280x800.png
--- a/.histoire/screenshots/src-lib-components-shipitem-story-svelte-_default-1280x800.png
+++ b/.histoire/screenshots/src-lib-components-shipitem-story-svelte-_default-1280x800.png
--- a/package.json
+++ b/package.json
@ -38,6 +38,7 @@
    "@reduxjs/toolkit": "^1.9.3",
    "@sveltejs/adapter-node": "^1.0.0-next.0",
    "@yanick/updeep-remeda": "^2.1.1",
+    "beercss": "^3.1.0",
    "chota": "^0.8.0",
    "effector": "^22.5.2",
    "histoire": "^0.15.9",
--- a/src/histoire.setup.js
+++ b/src/histoire.setup.js
@ -1,3 +1,2 @@
 //import "./lib/style/index.js";
-import "@picocss/pico";
-import "../static/global.css";
+import "./lib/style/index.js";
--- a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-1-snap.png
+++ b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-1-snap.png
--- a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-10-snap.png
+++ b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-10-snap.png
--- a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-2-snap.png
+++ b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-2-snap.png
--- a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-3-snap.png
+++ b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-3-snap.png
--- a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-4-snap.png
+++ b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-4-snap.png
--- a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-5-snap.png
+++ b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-5-snap.png
--- a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-6-snap.png
+++ b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-6-snap.png
--- a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-7-snap.png
+++ b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-7-snap.png
--- a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-8-snap.png
+++ b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-8-snap.png
--- a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-9-snap.png
+++ b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-9-snap.png
--- a/src/lib/style/index.css
+++ b/src/lib/style/index.css
@ -1,17 +1,115 @@
-:root {
-  --main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+@import "/fonts/faktos.css";
+@import "/fonts/dosis/dosis.css";

-    --font-scale-9: 0.75rem;
-    --font-scale-10: 1em;
-    --font-scale-11: 1.333rem;
-    --font-scale-12: 1.777rem;
-    --font-scale-13: 2.369rem;
-    --font-scale-14: 3.157rem;
-    --font-scale-15: 4.209rem;
+  @font-face {
+    font-family: "Faktos";
+    font-style: normal;
+    src: url(/fonts/Faktos.ttf) format("truetype");
+  }
+  @font-face {
+    font-family: "Dosis";
+    src: url(/fonts/dosis/Dosis-VariableFont_wght.ttf) format("truetype");
+  }
+
+:root {
+  --font: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    --font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
+
+  --font-scale-9: 0.75rem;
+  --font-scale-10: 1rem;
+  --font-scale-11: 1.25rem;
+  --font-scale-12: 1.5rem;
+  --font-scale-13: 1.75rem;
+  --font-scale-14: 2.3125rem;
+  --font-scale-15: 3.0625rem;
+
+    --oxford-blue: hsla(226, 60%, 10%, 1);
+    --royal-blue-dark: hsla(218, 100%, 16%, 1);
+    --indigo-dye: hsla(209, 95%, 24%, 1);
+    --cg-blue: hsla(193, 80%, 35%, 1);
+    --white: hsla(20, 60%, 99%, 1);
+
+    --main-width: 60em;
 }

 input.short {
-    width: 5em !important;
+  width: 5em !important;
 }

+
+  body {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: var(--white);
+    color: #333;
+    margin: 0;
+    padding: 8px;
+    box-sizing: border-box;
+  }
+
+  a {
+    color: rgb(0, 100, 200);
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  a:visited {
+    color: rgb(0, 80, 160);
+  }
+
+  label {
+    display: block;
+  }
+
+  input,
+  button,
+  select,
+  textarea {
+    font-family: inherit;
+    font-size: inherit;
+    padding: 0.4em;
+    margin: 0 0 0.5em 0;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+  }
+
+  input:disabled {
+    color: #ccc;
+  }
+
+  input[type="range"] {
+    height: 0;
+  }
+
+  /* input, */
+  /* select { */
+  /*   border: 0px; */
+  /*   border-bottom: 1px solid var(--indigo-dye); */
+  /* } */
+
+  input:focus,
+  select:focus {
+    border: 1px solid var(--indigo-dye);
+  }
+
+  input:not([type="checkbox"]):not([type="radio"]) {
+    border: 0px;
+    border-bottom: 1px solid var(--indigo-dye);
+    border-radius: 0px;
+    height: calc(
+      1rem * var(--line-height) + var(--form-element-spacing-vertical) * 1
+    );
+    padding: 0 0.5rem;
+    text-align: center;
+  }
+
+h1 { font-size: var(--font-scale-15); }
+h2 { font-size: var(--font-scale-14); }
+h3 { font-size: var(--font-scale-13); }
+h4 { font-size: var(--font-scale-12); }
--- a/src/lib/style/index.js
+++ b/src/lib/style/index.js
@ -1,5 +1,10 @@
-import "../../../static/fonts/faktos.css";
-import "../../../static/fonts/dosis/dosis.css";
-import "../../../static/global.css";
-import "@picocss/pico/css/pico.css";
+import "beercss/dist/cdn/beer.min.css";
+import "beercss/dist/cdn/material-symbols-outlined.woff2";
+import "beercss/dist/cdn/roboto-flex-cyrillic-ext.woff2";
+import "beercss/dist/cdn/roboto-flex-cyrillic.woff2";
+import "beercss/dist/cdn/roboto-flex-greek.woff2";
+import "beercss/dist/cdn/roboto-flex-latin-ext.woff2";
+import "beercss/dist/cdn/roboto-flex-latin.woff2";
+import "beercss/dist/cdn/roboto-flex-vietnamese.woff2";
+
 import "./index.css";
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@ -0,0 +1,88 @@
+<header>
+  <nav>
+    <h1>
+      <a>The Docks</a>
+    </h1>
+    <h3 class="max">a Full Thrust ship builder</h3>
+    <a>About</a>
+    <span>&nbsp;</span>
+  </nav>
+</header>
+<main class="responsive">
+  <nav class="m l left">
+    <a>
+      <i>Question_Mark</i>
+      <span>About</span>
+    </a>
+    <!-- TODO
+    <a>
+      <i>Quiz</i>
+      <span>See also</span>
+    </a>
+    <a>
+      <i>Format_List_Bulleted</i>
+      <span>Changelog</span>
+    </a>
+    -->
+  </nav>
+  <h2>Welcome to the docks!</h2>
+
+  <!-- TODO
+  <p class="version">
+    <span>version {import.meta.env.PACKAGE_VERSION}</span>
+    <a>changelog</a>
+  </p>
+  -->
+
+  <p>
+    The Docks is a ship builder for the game
+    <a href="https://shop.groundzerogames.co.uk/rules.html" class="helper"
+      >Full Thrust</a
+    >, with construction rules following the
+    <a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
+      Cross Dimensions rules
+    </a>
+    as closely as possible.
+  </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.
+  </p>
+
+  <p>
+    Written by
+    <!-- TODO change link -->
+    <a href="https://techblog.babyl.ca">Yanick Champoux</a>
+    . Code available on
+    <!-- TODO read the url from package.json -->
+    <a href="https://github.com/aotds/aotds-shipyard">Github</a>.
+  </p>
+</main>
+
+<script>
+  import "$lib/style/index.js";
+</script>
+
+<style>
+  header nav {
+    align-items: baseline;
+    font-family: "Faktos";
+  }
+  main nav {
+    margin-top: 70px;
+  }
+  h3 {
+    font-size: var(--font-scale-12);
+    font-weight: normal;
+  }
+  h2 {
+    margin-bottom: 1.5rem;
+  }
+  p {
+    font-size: var(--font-scale-11);
+    margin-bottom: 1.5rem;
+    margin-left: 1rem;
+  }
+</style>
--- a/static/global.css
+++ b/static/global.css
@ -1,123 +0,0 @@
-  @font-face {
-    font-family: "Faktos";
-    font-style: normal;
-    src: url(/fonts/Faktos.ttf) format("truetype");
-  }
-  @font-face {
-    font-family: "Dosis";
-    src: url(/fonts/dosis/Dosis-VariableFont_wght.ttf) format("truetype");
-  }
-
-  :root {
-    --main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-    --font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-
-    --font-scale-9: 0.75rem;
-    --font-scale-10: 1em;
-    --font-scale-11: 1.333rem;
-    --font-scale-12: 1.777rem;
-    --font-scale-13: 2.369rem;
-    --font-scale-14: 3.157rem;
-    --font-scale-15: 4.209rem;
-
-    --oxford-blue: hsla(226, 60%, 10%, 1);
-    --royal-blue-dark: hsla(218, 100%, 16%, 1);
-    --indigo-dye: hsla(209, 95%, 24%, 1);
-    --cg-blue: hsla(193, 80%, 35%, 1);
-    --white: hsla(20, 60%, 99%, 1);
-
-    --main-width: 60em;
-  }
-
-  input.short {
-    width: 5em !important;
-  }
-
-  small {
-    font-size: var(--font-scale-9);
-  }
-
-  h1 {
-    margin: 0px;
-    padding: 0px;
-    font-size: var(--font-scale-14);
-  }
-
-  h2 {
-    font-size: var(--font-scale-12);
-  }
-
-  body {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background-color: var(--white);
-    color: #333;
-    margin: 0;
-    padding: 8px;
-    box-sizing: border-box;
-    font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  }
-
-  a {
-    color: rgb(0, 100, 200);
-    text-decoration: none;
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
-
-  a:visited {
-    color: rgb(0, 80, 160);
-  }
-
-  label {
-    display: block;
-  }
-
-  input,
-  button,
-  select,
-  textarea {
-    font-family: inherit;
-    font-size: inherit;
-    padding: 0.4em;
-    margin: 0 0 0.5em 0;
-    box-sizing: border-box;
-    border: 1px solid #ccc;
-    border-radius: 2px;
-  }
-
-  input:disabled {
-    color: #ccc;
-  }
-
-  input[type="range"] {
-    height: 0;
-  }
-
-  /* input, */
-  /* select { */
-  /*   border: 0px; */
-  /*   border-bottom: 1px solid var(--indigo-dye); */
-  /* } */
-
-  input:focus,
-  select:focus {
-    border: 1px solid var(--indigo-dye);
-  }
-
-  input:not([type="checkbox"]):not([type="radio"]) {
-    border: 0px;
-    border-bottom: 1px solid var(--indigo-dye);
-    border-radius: 0px;
-    height: calc(
-      1rem * var(--line-height) + var(--form-element-spacing-vertical) * 1
-    );
-    padding: 0 0.5rem;
-    text-align: center;
-  }