diff --git a/.eslintrc.js b/.eslintrc.js
index 2a1d0bc..a881f38 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -11,7 +11,8 @@ module.exports = {
         "@vue/eslint-config-prettier"
     ],
     parserOptions: {
-        ecmaVersion: 2020
+        ecmaVersion: 2020,
+        project: "tsconfig.json"
     },
     ignorePatterns: ["src/lib"],
     rules: {
@@ -19,7 +20,14 @@ module.exports = {
         "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
         "vue/script-setup-uses-vars": "warn",
         "vue/no-mutating-props": "off",
-        "vue/multi-word-component-names": "off"
+        "vue/multi-word-component-names": "off",
+        "@typescript-eslint/strict-boolean-expressions": [
+            "error",
+            {
+                allowNullableObject: true,
+                allowNullableBoolean: true
+            }
+        ]
     },
     globals: {
         defineProps: "readonly",
diff --git a/.forgejo/workflows/deploy.yaml b/.forgejo/workflows/deploy.yaml
new file mode 100644
index 0000000..bc7210a
--- /dev/null
+++ b/.forgejo/workflows/deploy.yaml
@@ -0,0 +1,31 @@
+name: Build and Deploy
+on:
+  push:
+    branches:
+      - 'main'
+  workflow_dispatch:
+jobs:
+  build-and-deploy:
+    if: github.repository != 'profectus-engine/Profectus' # Don't build placeholder mod on main repo
+    runs-on: docker
+    steps:
+      - name: Setup RSync
+        run: |
+          apt-get update
+          apt-get install -y rsync
+
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2
+        with:
+          submodules: recursive
+
+      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
+        run: |
+          npm ci
+          npm run build
+
+      - name: Deploy 🚀
+        uses: https://github.com/JamesIves/github-pages-deploy-action@v4.2.5
+        with:
+          branch: pages # The branch the action should deploy to.
+          folder: dist # The folder the action should deploy.
diff --git a/.forgejo/workflows/test.yaml b/.forgejo/workflows/test.yaml
new file mode 100644
index 0000000..33df8d8
--- /dev/null
+++ b/.forgejo/workflows/test.yaml
@@ -0,0 +1,21 @@
+name: Run Tests
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+jobs:
+  test:
+    runs-on: docker
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: recursive
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm test
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index f4210ed..8293b9e 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - 'main'
+  workflow_dispatch:
 jobs:
   build-and-deploy:
     if: github.repository != 'profectus-engine/Profectus' # Don't build placeholder mod on main repo
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index c6b970d..c41d085 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,11 +1,11 @@
-name: Build and Deploy
+name: Run Tests
 on:
   push:
     branches: [ main ]
   pull_request:
     branches: [ main ]
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
 
     steps:
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 77377bd..d46602a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,12 @@
 {
-    "vitest.commandLine": "npx vitest"
-}
\ No newline at end of file
+    "vitest.commandLine": "npx vitest",
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    },
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "git.ignoreLimitWarning": true,
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "typescript.tsdk": "node_modules/typescript/lib"
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b982041..78e51ce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,115 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.6.1] - 2023-05-17
+### Added
+- Error boundaries around each layer, and errors now display on the page when in development
+- Utility for creating requirement based on whether a conversion has met a requirement
+### Changed 
+- **BREAKING** Formulas/requirements refactor
+    - spendResources renamed to cumulativeCost
+    - summedPurchases renamed to directSum
+    - calculateMaxAffordable now takes optional 'maxBulkAmount' parameter
+    - cost requirements now pass cumulativeCost, maxBulkAmount, and directSum to calculateMaxAffordable
+    - Non-integrable and non-invertible formulas will now work in more situations
+    - Repeatable.maximize is removed
+    - Challenge.maximize is removed
+- Formulas have better typing information now
+- Integrate functions now log errors if the variable input is not integrable
+- Cyclical proxies now throw errors
+- createFormulaPreview is now a JSX function
+- Tree nodes are not automatically capitalized anymore
+- upgrade.canPurchase now returns false if the upgrade is already bought
+- TPS display is simplified and more performant now
+### Fixed
+- Actions could not be constructed
+- Progress bar on actions was misaligned
+- Many different issues the Board features (and many changes/improvements)
+- Calculating max affordable could sometimes infinite loop
+- Non-integrable formulas could cause errors in cost requirements
+- estimateTime would not show "never" when production is 0
+- isInvertible and isIntegrable now properly handle nested formulas
+- Repeatables' amount display would show the literal text "joinJSX"
+- Repeatables would not buy max properly
+- Reset buttons were showing wrong "currentAt" vs "nextAt"
+- Step-wise formulas not updating their value correctly
+- Bonus amount decorator now checks for `amount` property in the post construct callback
+### Documentation
+- Various typos fixed and a few sections made more thorough
+
+## [0.6.0] - 2023-04-20
+### Added
+- **BREAKING** New requirements system
+    - Replaces many features' existing requirements with new generic form
+- **BREAKING** Formulas, which can be used to calculate buy max for you
+    - Requirements can use them so repeatables and challenges can be "buy max" without any extra effort
+    - Conversions now use formulas instead of the old scaling functions system, allowing for arbitrary functions that are much easier to follow
+    - Modifiers have a new getFormula property
+- Feature decorators, which simplify the process of adding extra values to features
+- Action feature, which is a clickable with a cooldown
+- ETA util (calculates time until a specific amount of a resource, based on its current gain rate)
+- createCollapsibleAchievements util
+- deleteLowerSaves util
+- Minimized layers can now display a component
+- submitOnBlur property to Text fields
+- showPopups property to achievements
+- Mouse/touch events to more onClick listeners
+- Example hotkey to starting layer
+- Schema for projInfo.json
+### Changes
+- **BREAKING** Buyables renamed to Repeatables
+    - Renamed purchaseLimit to limit
+    - Renamed buyMax to maximize
+    - Added initialAmount property
+- **BREAKING** Persistent refs no longer have redundancies in save object
+    - Requires referencing persistent refs either through a proxy or by wrapping in `noPersist()`
+- **BREAKING** Visibility properties can now take booleans
+    - Removed showIf util
+- **BREAKING** Lazy proxies and options functions now pass the base object in as `this` as well as the first parameter.
+- Tweaked settings display
+- setupPassiveGeneration will no longer lower the resource
+- displayResource now floors resource amounts
+- Tweaked modifier displays, incl showing negative modifiers in red
+- Hotkeys now appear on key graphic
+- Mofifier sections now accept computable strings for title and subtitle
+- Every VueFeature's `[Component]` property is now typed as GenericComponent
+- Make errors throw objects instead of strings
+- Updated b_e
+### Fixed
+- NaN detection stopped working
+    - Now specifically only checks persistent refs
+- trackTotal would increase the total when loading the save
+- PWAs wouldn't show updates
+- Board feature no longer working at all
+- Some discord links didn't open in new tab
+- Adjacent grid cells wouldn't merge
+- When fixing old saves, the modVersion would not be updated
+- Default layer would display `Dev Speed: 0x` when paused
+- Fixed hotkeys not working with shift + numbers
+- Fixed console errors about deleted persistent refs not being included in the layer object
+- Modifiers wouldn't display small numbers
+- Conversions' addSoftcap wouldn't affect currentAt or nextAt
+- MainDisplay not respecting style and classes props
+- Tabs could sometimes not update correctly
+- offlineTime not capping properly
+- Tooltips being user-selectable
+- Pinnable tooltips causing stack overflow
+- Workflows not working with submodules
+- Various minor typing issues
+### Removed
+- **BREAKING** Removed milestones (achievements now have small and large displays)
+### Documented
+- every single feature
+- formulas
+- requirements
+### Tests
+- conversions
+- formulas
+- modifiers
+- requirements
+
+Contributors: thepaperpilot, escapee, adsaf, ducdat
+
 ## [0.5.2] - 2022-08-22
 ### Added
 - onLoad event
diff --git a/README.md b/README.md
index e535eb2..5f8c741 100644
--- a/README.md
+++ b/README.md
@@ -26,11 +26,6 @@ npm run build
 npm run preview
 ```
 
-### Lints and fixes files
-```
-npm run lint
-```
-
 ### Runs the tests using vite-jest
 ```
 npm run test
diff --git a/package.json b/package.json
index 6bb5fc4..7b14824 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,5 @@
 {
   "name": "profectus",
-  "version": "0.5.2",
   "private": true,
   "scripts": {
     "start": "vite",
@@ -51,9 +50,9 @@
     "eslint": "^8.6.0",
     "jsdom": "^20.0.0",
     "prettier": "^2.5.1",
-    "typescript": "^4.7.4",
+    "typescript": "^5.0.2",
     "unplugin-json-dts": "^1.2.0",
-    "vitest": "^0.17.1",
+    "vitest": "^0.29.3",
     "vue-tsc": "^0.38.1"
   },
   "engines": {
diff --git a/src/App.vue b/src/App.vue
index 05fa7fd..6a365ef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,25 @@
 <template>
-    <div id="modal-root" :style="theme" />
-    <div class="app" :style="theme" :class="{ useHeader }">
-        <Nav v-if="useHeader" />
-        <Game />
-        <TPS v-if="unref(showTPS)" />
-        <GameOverScreen />
-        <NaNScreen />
-        <component :is="gameComponent" />
-    </div>
+    <div v-if="appErrors.length > 0" class="error-container" :style="theme"><Error :errors="appErrors" /></div>
+    <template v-else>
+        <div id="modal-root" :style="theme" />
+        <div class="app" :style="theme" :class="{ useHeader }">
+            <Nav v-if="useHeader" />
+            <Game />
+            <TPS v-if="unref(showTPS)" />
+            <GameOverScreen />
+            <NaNScreen />
+            <component :is="gameComponent" />
+        </div>
+    </template>
 </template>
 
 <script setup lang="tsx">
+import "@fontsource/roboto-mono";
+import Error from "components/Error.vue";
 import { jsx } from "features/feature";
+import state from "game/state";
 import { coerceComponent, render } from "util/vue";
+import { CSSProperties, watch } from "vue";
 import { computed, toRef, unref } from "vue";
 import Game from "./components/Game.vue";
 import GameOverScreen from "./components/GameOverScreen.vue";
@@ -23,15 +30,14 @@ import projInfo from "./data/projInfo.json";
 import themes from "./data/themes";
 import settings, { gameComponents } from "./game/settings";
 import "./main.css";
-import "@fontsource/roboto-mono";
-import type { CSSProperties } from "vue";
 
 const useHeader = projInfo.useHeader;
 const theme = computed(() => themes[settings.theme].variables as CSSProperties);
 const showTPS = toRef(settings, "showTPS");
+const appErrors = toRef(state, "errors");
 
 const gameComponent = computed(() => {
-    return coerceComponent(jsx(() => <>{gameComponents.map(render)}</>));
+    return coerceComponent(jsx(() => (<>{gameComponents.map(render)}</>)));
 });
 </script>
 
@@ -49,5 +55,17 @@ const gameComponent = computed(() => {
     position: absolute;
     min-height: 100%;
     height: 100%;
+    color: var(--foreground);
+}
+
+.error-container {
+    background: var(--background);
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+}
+
+.error-container > .error {
+    position: static;
 }
 </style>
diff --git a/src/components/Error.vue b/src/components/Error.vue
new file mode 100644
index 0000000..16c9b6b
--- /dev/null
+++ b/src/components/Error.vue
@@ -0,0 +1,135 @@
+<template>
+    <div class="error">
+        <h1 class="error-title">{{ firstError.name }}: {{ firstError.message }}</h1>
+        <div class="error-details" style="margin-top: -10px">
+            <div v-if="firstError.cause">
+                <div v-for="row in causes[0]" :key="row">{{ row }}</div>
+            </div>
+            <div v-if="firstError.stack" :style="firstError.cause ? 'margin-top: 10px' : ''">
+                <div v-for="row in stacks[0]" :key="row">{{ row }}</div>
+            </div>
+        </div>
+        <div class="instructions">
+            Check the console for more details, and consider sharing it with the developers on
+            <a :href="projInfo.discordLink || 'https://discord.gg/yJ4fjnjU54'" class="discord-link"
+                >discord</a
+            >!
+            <FeedbackButton @click="exportSave" class="button" style="display: inline-flex"
+                ><span class="material-icons" style="font-size: 16px">content_paste</span
+                ><span style="margin-left: 8px; font-size: medium">Copy Save</span></FeedbackButton
+            ><br />
+            <div v-if="errors.length > 1" style="margin-top: 20px"><h3>Other errors</h3></div>
+            <div v-for="(error, i) in errors.slice(1)" :key="i" style="margin-top: 20px">
+                <details class="error-details">
+                    <summary>{{ error.name }}: {{ error.message }}</summary>
+                    <div v-if="error.cause" style="margin-top: 10px">
+                        <div v-for="row in causes[i + 1]" :key="row">{{ row }}</div>
+                    </div>
+                    <div v-if="error.stack" style="margin-top: 10px">
+                        <div v-for="row in stacks[i + 1]" :key="row">{{ row }}</div>
+                    </div>
+                </details>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import projInfo from "data/projInfo.json";
+import player, { stringifySave } from "game/player";
+import LZString from "lz-string";
+import { computed, onMounted } from "vue";
+import FeedbackButton from "./fields/FeedbackButton.vue";
+
+const props = defineProps<{
+    errors: Error[];
+}>();
+
+const firstError = computed(() => props.errors[0]);
+const stacks = computed(() =>
+    props.errors.map(error => (error.stack == null ? [] : error.stack.split("\n")))
+);
+const causes = computed(() =>
+    props.errors.map(error =>
+        error.cause == null
+            ? []
+            : (typeof error.cause === "string" ? error.cause : JSON.stringify(error.cause)).split(
+                  "\n"
+              )
+    )
+);
+
+function exportSave() {
+    let saveToExport = stringifySave(player);
+    switch (projInfo.exportEncoding) {
+        default:
+            console.warn(`Unknown save encoding: ${projInfo.exportEncoding}. Defaulting to lz`);
+        case "lz":
+            saveToExport = LZString.compressToUTF16(saveToExport);
+            break;
+        case "base64":
+            saveToExport = btoa(unescape(encodeURIComponent(saveToExport)));
+            break;
+        case "plain":
+            break;
+    }
+    console.log(saveToExport);
+
+    // Put on clipboard. Using the clipboard API asks for permissions and stuff
+    const el = document.createElement("textarea");
+    el.value = saveToExport;
+    document.body.appendChild(el);
+    el.select();
+    el.setSelectionRange(0, 99999);
+    document.execCommand("copy");
+    document.body.removeChild(el);
+}
+
+onMounted(() => {
+    player.autosave = false;
+    player.devSpeed = 0;
+});
+</script>
+
+<style scoped>
+.error {
+    border: solid 10px var(--danger);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    text-align: left;
+    min-height: calc(100% - 20px);
+    text-align: left;
+    color: var(--foreground);
+}
+
+.error-title {
+    background: var(--danger);
+    color: var(--feature-foreground);
+    display: block;
+    margin: -10px 0 10px 0;
+    position: sticky;
+    top: 0;
+}
+
+.error-details {
+    white-space: nowrap;
+    overflow: auto;
+    padding: 10px;
+    background-color: var(--raised-background);
+}
+
+.instructions {
+    padding: 10px;
+}
+
+.discord-link {
+    display: inline;
+}
+
+summary {
+    cursor: pointer;
+    user-select: none;
+}
+</style>
diff --git a/src/components/Game.vue b/src/components/Game.vue
index 6f9bb66..1975696 100644
--- a/src/components/Game.vue
+++ b/src/components/Game.vue
@@ -4,7 +4,6 @@
             v-for="(tab, index) in tabs"
             :key="index"
             class="tab"
-            :ref="`tab-${index}`"
             :style="unref(layers[tab]?.style)"
             :class="unref(layers[tab]?.classes)"
         >
@@ -14,7 +13,7 @@
                     v-if="layerKeys.includes(tab)"
                     v-bind="gatherLayerProps(layers[tab]!)"
                     :index="index"
-                    :tab="() => (($refs[`tab-${index}`] as HTMLElement[] | undefined)?.[0])"
+                    @set-minimized="(value: boolean) => (layers[tab]!.minimized.value = value)"
                 />
                 <component :is="tab" :index="index" v-else />
             </div>
@@ -36,8 +35,8 @@ const layerKeys = computed(() => Object.keys(layers));
 const useHeader = projInfo.useHeader;
 
 function gatherLayerProps(layer: GenericLayer) {
-    const { display, minimized, minWidth, name, color, minimizable, nodes } = layer;
-    return { display, minimized, minWidth, name, color, minimizable, nodes };
+    const { display, minimized, name, color, minimizable, nodes, minimizedDisplay } = layer;
+    return { display, minimized, name, color, minimizable, nodes, minimizedDisplay };
 }
 </script>
 
diff --git a/src/components/Hotkey.vue b/src/components/Hotkey.vue
new file mode 100644
index 0000000..7e9c876
--- /dev/null
+++ b/src/components/Hotkey.vue
@@ -0,0 +1,70 @@
+<!-- Make eslint not whine about putting spaces before the +'s -->
+<!-- eslint-disable prettier/prettier -->
+<template>
+    <template v-if="isCtrl"
+        ><div class="key">Ctrl</div
+        >+</template
+    ><template v-if="isShift"
+        ><div class="key">Shift</div
+        >+</template
+    >
+    <div class="key">{{ key }}</div>
+</template>
+
+<script setup lang="ts">
+import { GenericHotkey } from "features/hotkey";
+import { watchEffect } from "vue";
+
+const props = defineProps<{
+    hotkey: GenericHotkey;
+}>();
+
+let key = "";
+let isCtrl = false;
+let isShift = false;
+let isAlpha = false;
+watchEffect(() => {
+    key = props.hotkey.key;
+
+    isCtrl = key.startsWith("ctrl+");
+    if (isCtrl) {
+        key = key.slice(5);
+    }
+
+    isShift = key.startsWith("shift+");
+    if (isShift) {
+        key = key.slice(6);
+    }
+
+    isAlpha = key.length == 1 && key.toLowerCase() != key.toUpperCase();
+    if (isAlpha) {
+        key = key.toUpperCase();
+    }
+});
+</script>
+
+<style scoped>
+.key {
+    display: inline-block;
+    height: 1.4em;
+    min-width: 1em;
+    margin-block: 0.1em;
+    padding-inline: 0.2em;
+    vertical-align: 0.1em;
+
+    background: var(--foreground);
+    color: var(--feature-foreground);
+    border: 1px solid #0007;
+    border-radius: 0.3em;
+    box-shadow: 0 0.1em #0007, 0 0.1em var(--foreground);
+
+    font-size: smaller;
+    text-align: center;
+    user-select: none;
+    transition: transform 0s, box-shadow 0s;
+}
+.key:active {
+    transform: translateY(0.1em);
+    box-shadow: none;
+}
+</style>
diff --git a/src/components/Info.vue b/src/components/Info.vue
index 69a3545..15395bf 100644
--- a/src/components/Info.vue
+++ b/src/components/Info.vue
@@ -21,19 +21,32 @@
                 <div class="link" @click="openChangelog">Changelog</div>
                 <br />
                 <div>
-                    <a :href="discordLink" v-if="discordLink" class="info-modal-discord-link">
+                    <a
+                        :href="discordLink"
+                        v-if="discordLink"
+                        class="info-modal-discord-link"
+                        target="_blank"
+                    >
                         <span class="material-icons info-modal-discord">discord</span>
                         {{ discordName }}
                     </a>
                 </div>
                 <div>
-                    <a href="https://discord.gg/WzejVAx" class="info-modal-discord-link">
+                    <a
+                        href="https://discord.gg/yJ4fjnjU54"
+                        class="info-modal-discord-link"
+                        target="_blank"
+                    >
                         <span class="material-icons info-modal-discord">discord</span>
-                        The Paper Pilot Community
+                        Profectus & Friends
                     </a>
                 </div>
                 <div>
-                    <a href="https://discord.gg/F3xveHV" class="info-modal-discord-link">
+                    <a
+                        href="https://discord.gg/F3xveHV"
+                        class="info-modal-discord-link"
+                        target="_blank"
+                    >
                         <span class="material-icons info-modal-discord">discord</span>
                         The Modding Tree
                     </a>
@@ -67,7 +80,7 @@ const isOpen = ref(false);
 const timePlayed = computed(() => formatTime(player.timePlayed));
 
 const infoComponent = computed(() => {
-    return coerceComponent(jsx(() => <>{infoComponents.map(render)}</>));
+    return coerceComponent(jsx(() => (<>{infoComponents.map(render)}</>)));
 });
 
 defineExpose({
diff --git a/src/components/Layer.vue b/src/components/Layer.vue
index a64a255..1857535 100644
--- a/src/components/Layer.vue
+++ b/src/components/Layer.vue
@@ -1,15 +1,23 @@
 <template>
-    <div class="layer-container" :style="{ '--layer-color': unref(color) }">
-        <button v-if="showGoBack" class="goBack" @click="goBack">←</button>
-        <button class="layer-tab minimized" v-if="minimized.value" @click="minimized.value = false">
-            <div>{{ unref(name) }}</div>
+    <ErrorVue v-if="errors.length > 0" :errors="errors" />
+    <div class="layer-container" :style="{ '--layer-color': unref(color) }" v-bind="$attrs" v-else>
+        <button v-if="showGoBack" class="goBack" @click="goBack">❌</button>
+
+        <button
+            class="layer-tab minimized"
+            v-if="unref(minimized)"
+            @click="$emit('setMinimized', false)"
+        >
+            <component v-if="minimizedComponent" :is="minimizedComponent" />
+            <div v-else>{{ unref(name) }}</div>
         </button>
         <div class="layer-tab" :class="{ showGoBack }" v-else>
             <Context @update-nodes="updateNodes">
                 <component :is="component" />
             </Context>
         </div>
-        <button v-if="unref(minimizable)" class="minimize" @click="minimized.value = true">
+
+        <button v-if="unref(minimizable)" class="minimize" @click="$emit('setMinimized', true)">
             ▼
         </button>
     </div>
@@ -19,34 +27,26 @@
 import projInfo from "data/projInfo.json";
 import type { CoercableComponent } from "features/feature";
 import type { FeatureNode } from "game/layers";
-import type { Persistent } from "game/persistence";
 import player from "game/player";
-import { computeComponent, processedPropType, wrapRef } from "util/vue";
-import type { PropType, Ref } from "vue";
-import { computed, defineComponent, nextTick, toRefs, unref, watch } from "vue";
+import { computeComponent, computeOptionalComponent, processedPropType, unwrapRef } from "util/vue";
+import { PropType, Ref, computed, defineComponent, onErrorCaptured, ref, toRefs, unref } from "vue";
 import Context from "./Context.vue";
+import ErrorVue from "./Error.vue";
 
 export default defineComponent({
-    components: { Context },
+    components: { Context, ErrorVue },
     props: {
         index: {
             type: Number,
             required: true
         },
-        tab: {
-            type: Function as PropType<() => HTMLElement | undefined>,
-            required: true
-        },
         display: {
             type: processedPropType<CoercableComponent>(Object, String, Function),
             required: true
         },
+        minimizedDisplay: processedPropType<CoercableComponent>(Object, String, Function),
         minimized: {
-            type: Object as PropType<Persistent<boolean>>,
-            required: true
-        },
-        minWidth: {
-            type: processedPropType<number | string>(Number, String),
+            type: Object as PropType<Ref<boolean>>,
             required: true
         },
         name: {
@@ -60,56 +60,41 @@ export default defineComponent({
             required: true
         }
     },
+    emits: ["setMinimized"],
     setup(props) {
-        const { display, index, minimized, minWidth, tab } = toRefs(props);
+        const { display, index, minimized, minimizedDisplay } = toRefs(props);
 
         const component = computeComponent(display);
+        const minimizedComponent = computeOptionalComponent(minimizedDisplay);
         const showGoBack = computed(
-            () => projInfo.allowGoBack && index.value > 0 && !minimized.value
+            () => projInfo.allowGoBack && index.value > 0 && !unwrapRef(minimized)
         );
 
         function goBack() {
             player.tabs.splice(unref(props.index), Infinity);
         }
 
-        nextTick(() => updateTab(minimized.value, unref(minWidth.value)));
-        watch([minimized, wrapRef(minWidth)], ([minimized, minWidth]) =>
-            updateTab(minimized, minWidth)
-        );
-
         function updateNodes(nodes: Record<string, FeatureNode | undefined>) {
             props.nodes.value = nodes;
         }
 
-        function updateTab(minimized: boolean, minWidth: number | string) {
-            const width =
-                typeof minWidth === "number" || Number.isNaN(parseInt(minWidth))
-                    ? minWidth + "px"
-                    : minWidth;
-            const tabValue = tab.value();
-            if (tabValue != undefined) {
-                if (minimized) {
-                    tabValue.style.flexGrow = "0";
-                    tabValue.style.flexShrink = "0";
-                    tabValue.style.width = "60px";
-                    tabValue.style.minWidth = tabValue.style.flexBasis = "";
-                    tabValue.style.margin = "0";
-                } else {
-                    tabValue.style.flexGrow = "";
-                    tabValue.style.flexShrink = "";
-                    tabValue.style.width = "";
-                    tabValue.style.minWidth = tabValue.style.flexBasis = width;
-                    tabValue.style.margin = "";
-                }
-            }
-        }
+        const errors = ref<Error[]>([]);
+        onErrorCaptured((err, instance, info) => {
+            console.warn(`Error caught in "${props.name}" layer`, err, instance, info);
+            errors.value.push(
+                err instanceof Error ? (err as Error) : new Error(JSON.stringify(err))
+            );
+            return false;
+        });
 
         return {
             component,
+            minimizedComponent,
             showGoBack,
             updateNodes,
             unref,
-            goBack
+            goBack,
+            errors
         };
     }
 });
@@ -155,9 +140,10 @@ export default defineComponent({
     background-color: transparent;
 }
 
-.layer-tab.minimized div {
+.layer-tab.minimized > * {
     margin: 0;
     writing-mode: vertical-rl;
+    text-align: left;
     padding-left: 10px;
     width: 50px;
 }
@@ -201,8 +187,8 @@ export default defineComponent({
 
 .goBack {
     position: sticky;
-    top: 6px;
-    left: 20px;
+    top: 10px;
+    left: 10px;
     line-height: 30px;
     margin-top: -50px;
     margin-left: -35px;
@@ -211,7 +197,7 @@ export default defineComponent({
     box-shadow: var(--background) 0 2px 3px 5px;
     border-radius: 50%;
     color: var(--foreground);
-    font-size: 40px;
+    font-size: 30px;
     cursor: pointer;
     z-index: 7;
 }
@@ -221,3 +207,10 @@ export default defineComponent({
     text-shadow: 0 0 7px var(--foreground);
 }
 </style>
+
+<style>
+.layer-tab.minimized > * > .desc {
+    color: var(--accent1);
+    font-size: 30px;
+}
+</style>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 7a3ee19..9fd5f06 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
 import type { FeatureNode } from "game/layers";
-import { computed, ref, toRefs } from "vue";
+import { computed, ref, toRefs, unref } from "vue";
 import Context from "./Context.vue";
 
 const _props = defineProps<{
@@ -51,7 +51,7 @@ const emit = defineEmits<{
     (e: "update:modelValue", value: boolean): void;
 }>();
 
-const isOpen = computed(() => props.modelValue || isAnimating.value);
+const isOpen = computed(() => unref(props.modelValue) || isAnimating.value);
 function close() {
     emit("update:modelValue", false);
 }
diff --git a/src/components/NaNScreen.vue b/src/components/NaNScreen.vue
index 04e6027..f9c7b6f 100644
--- a/src/components/NaNScreen.vue
+++ b/src/components/NaNScreen.vue
@@ -14,9 +14,12 @@
             </div>
             <br />
             <div>
-                <a :href="discordLink" class="nan-modal-discord-link">
+                <a
+                    :href="discordLink || 'https://discord.gg/yJ4fjnjU54'"
+                    class="nan-modal-discord-link"
+                >
                     <span class="material-icons nan-modal-discord">discord</span>
-                    {{ discordName }}
+                    {{ discordName || "Profectus & Friends" }}
                 </a>
             </div>
             <br />
@@ -50,49 +53,51 @@ import state from "game/state";
 import type { DecimalSource } from "util/bignum";
 import Decimal, { format } from "util/bignum";
 import type { ComponentPublicInstance } from "vue";
-import { computed, ref, toRef } from "vue";
+import { computed, ref, toRef, watch } from "vue";
 import Toggle from "./fields/Toggle.vue";
 import SavesManager from "./SavesManager.vue";
 
 const { discordName, discordLink } = projInfo;
-const autosave = toRef(player, "autosave");
+const autosave = ref(true);
+const isPaused = ref(true);
 const hasNaN = toRef(state, "hasNaN");
 const savesManager = ref<ComponentPublicInstance<typeof SavesManager> | null>(null);
 
-const path = computed(() => state.NaNPath?.join("."));
-const property = computed(() => state.NaNPath?.slice(-1)[0]);
-const previous = computed<DecimalSource | null>(() => {
-    if (state.NaNReceiver && property.value) {
-        return state.NaNReceiver[property.value] as DecimalSource;
-    }
-    return null;
-});
-const isPaused = computed({
-    get() {
-        return player.devSpeed === 0;
-    },
-    set(value: boolean) {
-        player.devSpeed = value ? null : 0;
+watch(hasNaN, hasNaN => {
+    if (hasNaN) {
+        autosave.value = player.autosave;
+        isPaused.value = player.devSpeed === 0;
+    } else {
+        player.autosave = autosave.value;
+        player.devSpeed = isPaused.value ? 0 : null;
     }
 });
 
+const path = computed(() => state.NaNPath?.join("."));
+const previous = computed<DecimalSource | null>(() => {
+    if (state.NaNPersistent != null) {
+        return state.NaNPersistent.value;
+    }
+    return null;
+});
+
 function setZero() {
-    if (state.NaNReceiver && property.value) {
-        state.NaNReceiver[property.value] = new Decimal(0);
+    if (state.NaNPersistent != null) {
+        state.NaNPersistent.value = new Decimal(0);
         state.hasNaN = false;
     }
 }
 
 function setOne() {
-    if (state.NaNReceiver && property.value) {
-        state.NaNReceiver[property.value] = new Decimal(1);
+    if (state.NaNPersistent) {
+        state.NaNPersistent.value = new Decimal(1);
         state.hasNaN = false;
     }
 }
 
 function ignore() {
-    if (state.NaNReceiver && property.value) {
-        state.NaNReceiver[property.value] = new Decimal(NaN);
+    if (state.NaNPersistent) {
+        state.NaNPersistent.value = new Decimal(NaN);
         state.hasNaN = false;
     }
 }
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index 48d1798..ca5a1bb 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -15,9 +15,7 @@
                     <a :href="discordLink" target="_blank">{{ discordName }}</a>
                 </li>
                 <li>
-                    <a href="https://discord.gg/WzejVAx" target="_blank"
-                        >The Paper Pilot Community</a
-                    >
+                    <a href="https://discord.gg/yJ4fjnjU54" target="_blank">Profectus & Friends</a>
                 </li>
                 <li>
                     <a href="https://discord.gg/F3xveHV" target="_blank">The Modding Tree</a>
@@ -47,7 +45,7 @@
             </Tooltip>
         </div>
         <div @click="options?.open()">
-            <Tooltip display="Options" :direction="Direction.Down" xoffset="-66px">
+            <Tooltip display="Settings" :direction="Direction.Down" xoffset="-66px">
                 <span class="material-icons">settings</span>
             </Tooltip>
         </div>
@@ -69,7 +67,7 @@
             </Tooltip>
         </div>
         <div @click="options?.open()">
-            <Tooltip display="Options" :direction="Direction.Right">
+            <Tooltip display="Settings" :direction="Direction.Right">
                 <span class="material-icons">settings</span>
             </Tooltip>
         </div>
@@ -92,9 +90,7 @@
                     <a :href="discordLink" target="_blank">{{ discordName }}</a>
                 </li>
                 <li>
-                    <a href="https://discord.gg/WzejVAx" target="_blank"
-                        >The Paper Pilot Community</a
-                    >
+                    <a href="https://discord.gg/yJ4fjnjU54" target="_blank">Profectus & Friends</a>
                 </li>
                 <li>
                     <a href="https://discord.gg/F3xveHV" target="_blank">The Modding Tree</a>
diff --git a/src/components/Notif.vue b/src/components/Notif.vue
index 485ca4d..583117a 100644
--- a/src/components/Notif.vue
+++ b/src/components/Notif.vue
@@ -11,6 +11,7 @@
     left: 5px;
     z-index: 10;
     pointer-events: none;
+    user-select: none;
     color: var(--accent3);
     font-size: x-large;
     animation: 1s linear infinite bounce;
diff --git a/src/components/Options.vue b/src/components/Options.vue
index 3e7ed4b..93b57fa 100644
--- a/src/components/Options.vue
+++ b/src/components/Options.vue
@@ -2,18 +2,27 @@
     <Modal v-model="isOpen">
         <template v-slot:header>
             <div class="header">
-                <h2>Options</h2>
+                <h2>Settings</h2>
+                <div class="option-tabs">
+                    <button :class="{selected: isTab('behaviour')}" @click="setTab('behaviour')">Behaviour</button>
+                    <button :class="{selected: isTab('appearance')}" @click="setTab('appearance')">Appearance</button>
+                </div>
             </div>
         </template>
         <template v-slot:body>
-            <Select title="Theme" :options="themes" v-model="theme" />
-            <component :is="settingFieldsComponent" />
-            <Toggle title="Show TPS" v-model="showTPS" />
-            <hr />
-            <Toggle title="Unthrottled" v-model="unthrottled" />
-            <Toggle :title="offlineProdTitle" v-model="offlineProd" />
-            <Toggle :title="autosaveTitle" v-model="autosave" />
-            <Toggle v-if="projInfo.enablePausing" :title="isPausedTitle" v-model="isPaused" />
+            <div v-if="isTab('behaviour')">
+                <Toggle :title="unthrottledTitle" v-model="unthrottled" />
+                <Toggle v-if="projInfo.enablePausing" :title="isPausedTitle" v-model="isPaused" />
+                <Toggle :title="offlineProdTitle" v-model="offlineProd" />
+                <Toggle :title="autosaveTitle" v-model="autosave" />
+                <FeedbackButton v-if="!autosave" class="button save-button" @click="save()">Manually save</FeedbackButton>
+            </div>
+            <div v-if="isTab('appearance')">
+                <Select :title="themeTitle" :options="themes" v-model="theme" />
+                <component :is="settingFieldsComponent" />
+                <Toggle :title="showTPSTitle" v-model="showTPS" />
+                <Toggle :title="alignModifierUnitsTitle" v-model="alignUnits" />
+            </div>
         </template>
     </Modal>
 </template>
@@ -21,20 +30,34 @@
 <script setup lang="tsx">
 import Modal from "components/Modal.vue";
 import projInfo from "data/projInfo.json";
+import { save } from "util/save";
 import rawThemes from "data/themes";
 import { jsx } from "features/feature";
 import Tooltip from "features/tooltips/Tooltip.vue";
 import player from "game/player";
 import settings, { settingFields } from "game/settings";
-import { camelToTitle } from "util/common";
+import { camelToTitle, Direction } from "util/common";
 import { coerceComponent, render } from "util/vue";
 import { computed, ref, toRefs } from "vue";
 import Select from "./fields/Select.vue";
 import Toggle from "./fields/Toggle.vue";
+import FeedbackButton from "./fields/FeedbackButton.vue";
 
 const isOpen = ref(false);
+const currentTab = ref("behaviour");
+
+function isTab(tab: string): boolean {
+    return tab == currentTab.value;
+}
+
+function setTab(tab: string) {
+    currentTab.value = tab;
+}
 
 defineExpose({
+    isTab,
+    setTab,
+    save,
     open() {
         isOpen.value = true;
     }
@@ -46,10 +69,10 @@ const themes = Object.keys(rawThemes).map(theme => ({
 }));
 
 const settingFieldsComponent = computed(() => {
-    return coerceComponent(jsx(() => <>{settingFields.map(render)}</>));
+    return coerceComponent(jsx(() => (<>{settingFields.map(render)}</>)));
 });
 
-const { showTPS, theme, unthrottled } = toRefs(settings);
+const { showTPS, theme, unthrottled, alignUnits } = toRefs(settings);
 const { autosave, offlineProd } = toRefs(player);
 const isPaused = computed({
     get() {
@@ -60,30 +83,85 @@ const isPaused = computed({
     }
 });
 
+const unthrottledTitle = jsx(() => (
+    <span class="option-title">
+        Unthrottled
+        <desc>Allow the game to run as fast as possible. Not battery friendly.</desc>
+    </span>
+));
 const offlineProdTitle = jsx(() => (
-    <span>
-        Offline Production<Tooltip display="Save-specific">*</Tooltip>
+    <span class="option-title">
+        Offline Production<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
+        <desc>Simulate production that occurs while the game is closed.</desc>
     </span>
 ));
 const autosaveTitle = jsx(() => (
-    <span>
-        Autosave<Tooltip display="Save-specific">*</Tooltip>
+    <span class="option-title">
+        Autosave<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
+        <desc>Automatically save the game every second or when the game is closed.</desc>
     </span>
 ));
 const isPausedTitle = jsx(() => (
-    <span>
-        Pause game<Tooltip display="Save-specific">*</Tooltip>
+    <span class="option-title">
+        Pause game<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
+        <desc>Stop everything from moving.</desc>
+    </span>
+));
+const themeTitle = jsx(() => (
+    <span class="option-title">
+        Theme
+        <desc>How the game looks.</desc>
+    </span>
+));
+const showTPSTitle = jsx(() => (
+    <span class="option-title">
+        Show TPS
+        <desc>Show TPS meter at the bottom-left corner of the page.</desc>
+    </span>
+));
+const alignModifierUnitsTitle = jsx(() => (
+    <span class="option-title">
+        Align modifier units
+        <desc>Align numbers to the beginning of the unit in modifier view.</desc>
     </span>
 ));
 </script>
 
-<style scoped>
-.header {
+<style>
+.option-tabs {
+    border-bottom: 2px solid var(--outline);
+    margin-top: 10px;
     margin-bottom: -10px;
 }
 
-*:deep() .tooltip-container {
+.option-tabs button {
+    background-color: transparent;
+    color: var(--foreground);
+    margin-bottom: -2px;
+    font-size: 14px;
+    cursor: pointer;
+    padding: 5px 20px;
+    border: none;
+    border-bottom: 2px solid var(--foreground);
+}
+
+.option-tabs button:not(.selected) {
+    border-bottom-color: transparent;
+}
+
+.option-title .tooltip-container {
     display: inline;
     margin-left: 5px;
 }
+.option-title desc {
+    display: block;
+    opacity: 0.6;
+    font-size: small;
+    width: 300px;
+    margin-left: 0;
+}
+
+.save-button {
+    text-align: right;
+}
 </style>
diff --git a/src/components/Save.vue b/src/components/Save.vue
index c151666..77d2988 100644
--- a/src/components/Save.vue
+++ b/src/components/Save.vue
@@ -33,7 +33,7 @@
             <DangerButton
                 :disabled="isActive"
                 @click="emit('delete')"
-                @confirmingChanged="value => (isConfirming = value)"
+                @confirmingChanged="(value: boolean) => (isConfirming = value)"
             >
                 <Tooltip display="Delete" :direction="Direction.Left" class="info">
                     <span class="material-icons" style="margin: -2px">delete</span>
@@ -104,11 +104,11 @@ const isEditing = ref(false);
 const isConfirming = ref(false);
 const newName = ref("");
 
-watch(isEditing, () => (newName.value = save.value.name || ""));
+watch(isEditing, () => (newName.value = save.value.name ?? ""));
 
-const isActive = computed(() => save.value && save.value.id === player.id);
+const isActive = computed(() => save.value != null && save.value.id === player.id);
 const currentTime = computed(() =>
-    isActive.value ? player.time : (save.value && save.value.time) || 0
+    isActive.value ? player.time : (save.value != null && save.value.time) ?? 0
 );
 
 function changeName() {
diff --git a/src/components/SavesManager.vue b/src/components/SavesManager.vue
index bdf14c8..fe9b95e 100644
--- a/src/components/SavesManager.vue
+++ b/src/components/SavesManager.vue
@@ -15,7 +15,7 @@
                         :save="saves[element]"
                         @open="openSave(element)"
                         @export="exportSave(element)"
-                        @editName="name => editSave(element, name)"
+                        @editName="(name: string) => editSave(element, name)"
                         @duplicate="duplicateSave(element)"
                         @delete="deleteSave(element)"
                     />
@@ -40,7 +40,7 @@
                             v-if="Object.keys(bank).length > 0"
                             :options="bank"
                             :modelValue="selectedPreset"
-                            @update:modelValue="preset => newFromPreset(preset as string)"
+                            @update:modelValue="(preset: unknown) => newFromPreset(preset as string)"
                             closeOnSelect
                             placeholder="Select preset"
                             class="presets"
@@ -62,11 +62,10 @@
 import Modal from "components/Modal.vue";
 import projInfo from "data/projInfo.json";
 import { isHosting, room } from "data/socket";
-import type { PlayerData } from "game/player";
+import type { Player } from "game/player";
 import player, { stringifySave } from "game/player";
 import settings from "game/settings";
 import LZString from "lz-string";
-import { ProxyState } from "util/proxies";
 import { getUniqueID, loadSave, newSave, save } from "util/save";
 import type { ComponentPublicInstance } from "vue";
 import { computed, nextTick, ref, shallowReactive, watch } from "vue";
@@ -75,7 +74,7 @@ import Select from "./fields/Select.vue";
 import Text from "./fields/Text.vue";
 import Save from "./Save.vue";
 
-export type LoadablePlayerData = Omit<Partial<PlayerData>, "id"> & { id: string; error?: unknown };
+export type LoadablePlayerData = Omit<Partial<Player>, "id"> & { id: string; error?: unknown };
 
 const isOpen = ref(false);
 const modal = ref<ComponentPublicInstance<typeof Modal> | null>(null);
@@ -198,7 +197,7 @@ const saves = computed(() =>
 function exportSave(id: string) {
     let saveToExport;
     if (player.id === id) {
-        saveToExport = stringifySave(player[ProxyState]);
+        saveToExport = stringifySave(player);
     } else {
         saveToExport = JSON.stringify(saves.value[id]);
     }
@@ -231,7 +230,7 @@ function duplicateSave(id: string) {
     }
 
     const playerData = { ...saves.value[id], id: getUniqueID() };
-    save(playerData as PlayerData);
+    save(playerData as Player);
 
     settings.saves.push(playerData.id);
 }
@@ -275,7 +274,7 @@ function newFromPreset(preset: string) {
     }
     const playerData = JSON.parse(preset);
     playerData.id = getUniqueID();
-    save(playerData as PlayerData);
+    save(playerData as Player);
 
     settings.saves.push(playerData.id);
 
@@ -284,13 +283,13 @@ function newFromPreset(preset: string) {
 
 function editSave(id: string, newName: string) {
     const currSave = saves.value[id];
-    if (currSave) {
+    if (currSave != null) {
         currSave.name = newName;
         if (player.id === id) {
             player.name = newName;
             save();
         } else {
-            save(currSave as PlayerData);
+            save(currSave as Player);
             cachedSaves[id] = undefined;
         }
     }
diff --git a/src/components/TPS.vue b/src/components/TPS.vue
index a460a09..db73da6 100644
--- a/src/components/TPS.vue
+++ b/src/components/TPS.vue
@@ -1,17 +1,11 @@
 <template>
-    <div class="tpsDisplay" v-if="!tps.isNan()">
-        TPS: {{ formatWhole(tps) }}
-        <transition name="fade"
-            ><span v-if="showLow" class="low">{{ formatWhole(low) }}</span></transition
-        >
-    </div>
+    <div class="tpsDisplay" v-if="!tps.isNan()">TPS: {{ formatWhole(tps) }}</div>
 </template>
 
 <script setup lang="ts">
 import state from "game/state";
-import type { DecimalSource } from "util/bignum";
 import Decimal, { formatWhole } from "util/bignum";
-import { computed, ref, watchEffect } from "vue";
+import { computed } from "vue";
 
 const tps = computed(() =>
     Decimal.div(
@@ -19,20 +13,6 @@ const tps = computed(() =>
         state.lastTenTicks.reduce((acc, curr) => acc + curr, 0)
     )
 );
-
-const lastTenFPS = ref<number[]>([]);
-watchEffect(() => {
-    lastTenFPS.value.push(Math.round(tps.value.toNumber()));
-    if (lastTenFPS.value.length > 10) {
-        lastTenFPS.value = lastTenFPS.value.slice(1);
-    }
-});
-
-const low = computed(() =>
-    lastTenFPS.value.reduce<DecimalSource>((acc, curr) => Decimal.max(acc, curr), 0)
-);
-
-const showLow = computed(() => Decimal.sub(tps.value, low.value).gt(1));
 </script>
 
 <style scoped>
diff --git a/src/components/common/modifiers.css b/src/components/common/modifiers.css
index fe8071e..dc9e66d 100644
--- a/src/components/common/modifiers.css
+++ b/src/components/common/modifiers.css
@@ -1,5 +1,6 @@
 .modifier-container {
     display: flex;
+    padding: 1px 8px;
 }
 
 .modifier-container:nth-child(2n) {
@@ -7,8 +8,12 @@
 }
 
 .modifier-amount {
-    flex-basis: 100px;
     flex-shrink: 0;
+    text-align: right;
+}
+:not(:first-of-type, :last-of-type) > .modifier-amount::after {
+    content: var(--unit);
+    opacity: 0;
 }
 
 .modifier-description {
diff --git a/src/components/common/table.css b/src/components/common/table.css
index 56d4929..a48d191 100644
--- a/src/components/common/table.css
+++ b/src/components/common/table.css
@@ -56,6 +56,43 @@
     border-radius: var(--border-radius);
 }
 
+.row-grid.mergeAdjacent > .feature:not(.dontMerge),
+.row-grid.mergeAdjacent > .tooltip-container > .feature:not(.dontMerge) {
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-top: 0;
+    border-radius: 0;
+}
+
+.row-grid.mergeAdjacent > .feature:not(.dontMerge):last-child,
+.row-grid.mergeAdjacent > .tooltip-container:last-child > .feature:not(.dontMerge) {
+    border-radius: 0 0 0 0;
+}
+
+
+.row-grid.mergeAdjacent > .feature:not(.dontMerge):first-child,
+.row-grid.mergeAdjacent > .tooltip-container:first-child > .feature:not(.dontMerge) {
+    border-radius: 0 0 0 0;
+}
+
+.table-grid > .row-grid.mergeAdjacent:last-child > .feature:not(.dontMerge):first-child {
+    border-radius: 0 0 0 var(--border-radius);
+}
+
+.table-grid > .row-grid.mergeAdjacent:first-child > .feature:not(.dontMerge):last-child {
+    border-radius: 0 var(--border-radius) 0 0;
+}
+
+.table-grid > .row-grid.mergeAdjacent:first-child > .feature:not(.dontMerge):first-child {
+    border-radius: var(--border-radius) 0 0 0;
+}
+
+.table-grid > .row-grid.mergeAdjacent:last-child > .feature:not(.dontMerge):last-child {
+    border-radius: 0 0 var(--border-radius) 0;
+}
+
+
 /*
 TODO how to implement mergeAdjacent for grids?
 .row.mergeAdjacent + .row.mergeAdjacent > .feature:not(.dontMerge) {
diff --git a/src/components/fields/Select.vue b/src/components/fields/Select.vue
index f08c40f..72a31b2 100644
--- a/src/components/fields/Select.vue
+++ b/src/components/fields/Select.vue
@@ -87,6 +87,10 @@ function onUpdate(value: SelectOption) {
     background-color: var(--bought);
 }
 
+.vue-input input {
+    font-size: inherit;
+}
+
 .vue-input input::placeholder {
     color: var(--link);
 }
diff --git a/src/components/fields/Slider.vue b/src/components/fields/Slider.vue
index ea6e17f..1b1e9a8 100644
--- a/src/components/fields/Slider.vue
+++ b/src/components/fields/Slider.vue
@@ -26,7 +26,7 @@ const emit = defineEmits<{
 
 const value = computed({
     get() {
-        return String(unref(props.modelValue) || 0);
+        return String(unref(props.modelValue) ?? 0);
     },
     set(value: string) {
         emit("update:modelValue", Number(value));
diff --git a/src/components/fields/Text.vue b/src/components/fields/Text.vue
index 99d1e0c..397ccfd 100644
--- a/src/components/fields/Text.vue
+++ b/src/components/fields/Text.vue
@@ -55,7 +55,7 @@ onMounted(() => {
 
 const value = computed({
     get() {
-        return unref(props.modelValue) || "";
+        return unref(props.modelValue) ?? "";
     },
     set(value: string) {
         emit("update:modelValue", value);
diff --git a/src/components/fields/Toggle.vue b/src/components/fields/Toggle.vue
index 2dcfa6c..4017033 100644
--- a/src/components/fields/Toggle.vue
+++ b/src/components/fields/Toggle.vue
@@ -19,7 +19,7 @@ const emit = defineEmits<{
     (e: "update:modelValue", value: boolean): void;
 }>();
 
-const component = computed(() => coerceComponent(unref(props.title) || "<span></span>", "span"));
+const component = computed(() => coerceComponent(unref(props.title) ?? "<span></span>", "span"));
 
 const value = computed({
     get() {
@@ -43,14 +43,16 @@ input {
 
 span {
     width: 100%;
+    padding-right: 41px;
     position: relative;
 }
 
 /* track */
 input + span::before {
     content: "";
-    float: right;
-    margin: 5px 0 5px 10px;
+    position: absolute;
+    top: calc(50% - 7px);
+    right: 0px;
     border-radius: 7px;
     width: 36px;
     height: 14px;
@@ -64,7 +66,7 @@ input + span::before {
 input + span::after {
     content: "";
     position: absolute;
-    top: 2px;
+    top: calc(50% - 10px);
     right: 16px;
     border-radius: 50%;
     width: 20px;
diff --git a/src/components/layout/Collapsible.vue b/src/components/layout/Collapsible.vue
index f8700b4..b9ef1f3 100644
--- a/src/components/layout/Collapsible.vue
+++ b/src/components/layout/Collapsible.vue
@@ -38,6 +38,7 @@ const contentComponent = computeComponent(toRef(props, "content"));
     padding: var(--feature-margin);
     color: var(--foreground);
     cursor: pointer;
+    transition-duration: 0s;
 }
 
 .collapsible-toggle:last-child {
diff --git a/src/components/math/Fraction.vue b/src/components/math/Fraction.vue
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/src/components/math/Fraction.vue
@@ -0,0 +1 @@
+
diff --git a/src/components/math/Sqrt.vue b/src/components/math/Sqrt.vue
index dc8292e..461846f 100644
--- a/src/components/math/Sqrt.vue
+++ b/src/components/math/Sqrt.vue
@@ -1,6 +1,8 @@
 <template>
     <span style="white-space: nowrap">
-        <span style="font-size: larger; font-family: initial">&radic;</span
-        ><span style="text-decoration: overline"><slot /></span>
+        <span style="font-size: larger; font-family: initial">&radic;</span>
+        <div style="display: inline-block; border-top: 1px solid; padding-left: 0.2em">
+            <slot />
+        </div>
     </span>
 </template>
diff --git a/src/data/common.tsx b/src/data/common.tsx
index d3eda18..c1286a2 100644
--- a/src/data/common.tsx
+++ b/src/data/common.tsx
@@ -1,18 +1,23 @@
+import Collapsible from "components/layout/Collapsible.vue";
+import { GenericAchievement } from "features/achievements/achievement";
 import type { Clickable, ClickableOptions, GenericClickable } from "features/clickables/clickable";
 import { createClickable } from "features/clickables/clickable";
 import type { GenericConversion } from "features/conversion";
 import type { CoercableComponent, JSXFunction, OptionsFunc, Replace } from "features/feature";
 import { jsx, setDefault } from "features/feature";
-import { displayResource } from "features/resources/resource";
+import { Resource, displayResource } from "features/resources/resource";
 import type { GenericTree, GenericTreeNode, TreeNode, TreeNodeOptions } from "features/trees/tree";
 import { createTreeNode } from "features/trees/tree";
+import type { GenericFormula } from "game/formulas/types";
+import { BaseLayer } from "game/layers";
 import type { Modifier } from "game/modifiers";
 import type { Persistent } from "game/persistence";
 import { DefaultValue, persistent } from "game/persistence";
 import player from "game/player";
+import settings from "game/settings";
 import type { DecimalSource } from "util/bignum";
-import Decimal, { format } from "util/bignum";
-import type { WithRequired } from "util/common";
+import Decimal, { format, formatSmall, formatTime } from "util/bignum";
+import { WithRequired, camelToTitle } from "util/common";
 import type {
     Computable,
     GetComputableType,
@@ -20,9 +25,8 @@ import type {
     ProcessedComputable
 } from "util/computed";
 import { convertComputable, processComputable } from "util/computed";
-import { createLazyProxy } from "util/proxies";
-import { renderJSX } from "util/vue";
-import type { Ref } from "vue";
+import { getFirstFeature, renderColJSX, renderJSX } from "util/vue";
+import type { ComputedRef, Ref } from "vue";
 import { computed, unref } from "vue";
 import "./common.css";
 
@@ -72,7 +76,7 @@ export type ResetButton<T extends ResetButtonOptions> = Replace<
         display: GetComputableTypeWithDefault<T["display"], Ref<JSX.Element>>;
         canClick: GetComputableTypeWithDefault<T["canClick"], Ref<boolean>>;
         minimumGain: GetComputableTypeWithDefault<T["minimumGain"], 1>;
-        onClick: VoidFunction;
+        onClick: (event?: MouseEvent | TouchEvent) => void;
     }
 >;
 
@@ -95,8 +99,8 @@ export type GenericResetButton = Replace<
 export function createResetButton<T extends ClickableOptions & ResetButtonOptions>(
     optionsFunc: OptionsFunc<T>
 ): ResetButton<T> {
-    return createClickable(() => {
-        const resetButton = optionsFunc();
+    return createClickable(feature => {
+        const resetButton = optionsFunc.call(feature, feature);
 
         processComputable(resetButton as T, "showNextAt");
         setDefault(resetButton, "showNextAt", true);
@@ -124,16 +128,16 @@ export function createResetButton<T extends ClickableOptions & ResetButtonOption
                         )}
                     </b>{" "}
                     {resetButton.conversion.gainResource.displayName}
-                    {unref(resetButton.showNextAt) ? (
+                    {unref(resetButton.showNextAt) != null ? (
                         <div>
                             <br />
                             {unref(resetButton.conversion.buyMax) ? "Next:" : "Req:"}{" "}
                             {displayResource(
                                 resetButton.conversion.baseResource,
-                                unref(resetButton.conversion.buyMax) ||
-                                    Decimal.floor(unref(resetButton.conversion.actualGain)).neq(1)
-                                    ? unref(resetButton.conversion.nextAt)
-                                    : unref(resetButton.conversion.currentAt)
+                                !unref(resetButton.conversion.buyMax) &&
+                                    Decimal.gte(unref(resetButton.conversion.actualGain), 1)
+                                    ? unref(resetButton.conversion.currentAt)
+                                    : unref(resetButton.conversion.nextAt)
                             )}{" "}
                             {resetButton.conversion.baseResource.displayName}
                         </div>
@@ -152,8 +156,8 @@ export function createResetButton<T extends ClickableOptions & ResetButtonOption
         }
 
         const onClick = resetButton.onClick;
-        resetButton.onClick = function () {
-            if (!unref(resetButton.canClick)) {
+        resetButton.onClick = function (event?: MouseEvent | TouchEvent) {
+            if (unref(resetButton.canClick) === false) {
                 return;
             }
             resetButton.conversion.convert();
@@ -161,7 +165,7 @@ export function createResetButton<T extends ClickableOptions & ResetButtonOption
             if (resetButton.resetTime) {
                 resetButton.resetTime.value = resetButton.resetTime[DefaultValue];
             }
-            onClick?.();
+            onClick?.(event);
         };
 
         return resetButton;
@@ -174,11 +178,6 @@ export interface LayerTreeNodeOptions extends TreeNodeOptions {
     layerID: string;
     /** The color to display this tree node as */
     color: Computable<string>; // marking as required
-    /**
-     * The content to display in the tree node.
-     * Defaults to the layer's ID
-     */
-    display?: Computable<CoercableComponent>;
     /** Whether or not to append the layer to the tabs list.
      * If set to false, then the tree node will instead always remove all tabs to its right and then add the layer tab.
      * Defaults to true.
@@ -209,14 +208,12 @@ export type GenericLayerTreeNode = Replace<
 export function createLayerTreeNode<T extends LayerTreeNodeOptions>(
     optionsFunc: OptionsFunc<T>
 ): LayerTreeNode<T> {
-    return createTreeNode(() => {
-        const options = optionsFunc();
-        processComputable(options as T, "display");
-        setDefault(options, "display", options.layerID);
+    return createTreeNode(feature => {
+        const options = optionsFunc.call(feature, feature);
+        setDefault(options, "display", camelToTitle(options.layerID));
         processComputable(options as T, "append");
         return {
             ...options,
-            display: options.display,
             onClick: unref((options as unknown as GenericLayerTreeNode).append)
                 ? function () {
                       if (player.tabs.includes(options.layerID)) {
@@ -236,9 +233,9 @@ export function createLayerTreeNode<T extends LayerTreeNodeOptions>(
 /** An option object for a modifier display as a single section. **/
 export interface Section {
     /** The header for this modifier. **/
-    title: string;
+    title: Computable<string>;
     /** A subtitle for this modifier, e.g. to explain the context for the modifier. **/
-    subtitle?: string;
+    subtitle?: Computable<string>;
     /** The modifier to be displaying in this section. **/
     modifier: WithRequired<Modifier, "description">;
     /** The base value being modified. **/
@@ -249,6 +246,8 @@ export interface Section {
     baseText?: Computable<CoercableComponent>;
     /** Whether or not this section should be currently visible to the player. **/
     visible?: Computable<boolean>;
+    /** Determines if numbers larger or smaller than the base should be displayed as red. */
+    smallerIsBetter?: boolean;
 }
 
 /**
@@ -265,6 +264,8 @@ export function createCollapsibleModifierSections(
               base: ProcessedComputable<DecimalSource | undefined>[];
               baseText: ProcessedComputable<CoercableComponent | undefined>[];
               visible: ProcessedComputable<boolean | undefined>[];
+              title: ProcessedComputable<string | undefined>[];
+              subtitle: ProcessedComputable<string | undefined>[];
           }
         | Record<string, never> = {};
     let calculated = false;
@@ -274,12 +275,14 @@ export function createCollapsibleModifierSections(
             processed.base = sections.map(s => convertComputable(s.base));
             processed.baseText = sections.map(s => convertComputable(s.baseText));
             processed.visible = sections.map(s => convertComputable(s.visible));
+            processed.title = sections.map(s => convertComputable(s.title));
+            processed.subtitle = sections.map(s => convertComputable(s.subtitle));
             calculated = true;
         }
         return sections;
     }
 
-    const collapsed = persistent<Record<number, boolean>>({});
+    const collapsed = persistent<Record<number, boolean>>({}, false);
     const jsxFunc = jsx(() => {
         const sections = calculateSections();
 
@@ -296,39 +299,67 @@ export function createCollapsibleModifierSections(
                     >
                         ▼
                     </span>
-                    {s.title}
-                    {s.subtitle ? <span class="subtitle"> ({s.subtitle})</span> : null}
+                    {unref(processed.title[i])}
+                    {unref(processed.subtitle[i]) != null ? (
+                        <span class="subtitle"> ({unref(processed.subtitle[i])})</span>
+                    ) : null}
                 </h3>
             );
 
             const modifiers = unref(collapsed.value[i]) ? null : (
                 <>
                     <div class="modifier-container">
+                        <span class="modifier-description">
+                            {renderJSX(unref(processed.baseText[i]) ?? "Base")}
+                        </span>
                         <span class="modifier-amount">
                             {format(unref(processed.base[i]) ?? 1)}
                             {s.unit}
                         </span>
-                        <span class="modifier-description">
-                            {renderJSX(unref(processed.baseText[i]) ?? "Base")}
-                        </span>
                     </div>
-                    {renderJSX(unref(s.modifier.description))}
+                    {s.modifier.description == null
+                        ? null
+                        : renderJSX(unref(s.modifier.description))}
                 </>
             );
 
             const hasPreviousSection = !firstVisibleSection;
             firstVisibleSection = false;
 
+            const base = unref(processed.base[i]) ?? 1;
+            const total = s.modifier.apply(base);
+
             return (
                 <>
                     {hasPreviousSection ? <br /> : null}
-                    <div>
+                    <div
+                        style={{
+                            "--unit":
+                                settings.alignUnits && s.unit != null ? "'" + s.unit + "'" : ""
+                        }}
+                    >
                         {header}
                         <br />
                         {modifiers}
                         <hr />
-                        Total: {format(s.modifier.apply(unref(processed.base[i]) ?? 1))}
-                        {s.unit}
+                        <div class="modifier-container">
+                            <span class="modifier-description">Total</span>
+                            <span
+                                class="modifier-amount"
+                                style={
+                                    (
+                                        s.smallerIsBetter === true
+                                            ? Decimal.gt(total, base ?? 1)
+                                            : Decimal.lt(total, base ?? 1)
+                                    )
+                                        ? "color: var(--danger)"
+                                        : ""
+                                }
+                            >
+                                {formatSmall(total)}
+                                {s.unit}
+                            </span>
+                        </div>
                     </div>
                 </>
             );
@@ -346,3 +377,131 @@ export function createCollapsibleModifierSections(
 export function colorText(textToColor: string, color = "var(--accent2)"): JSX.Element {
     return <span style={{ color }}>{textToColor}</span>;
 }
+
+/**
+ * Creates a collapsible display of a list of achievements
+ * @param achievements A dictionary of the achievements to display, inserted in the order from easiest to hardest
+ */
+export function createCollapsibleAchievements(achievements: Record<string, GenericAchievement>) {
+    // Achievements are typically defined from easiest to hardest, and we want to show hardest first
+    const orderedAchievements = Object.values(achievements).reverse();
+    const collapseAchievements = persistent<boolean>(true, false);
+    const lockedAchievements = computed(() =>
+        orderedAchievements.filter(m => m.earned.value === false)
+    );
+    const { firstFeature, collapsedContent, hasCollapsedContent } = getFirstFeature(
+        orderedAchievements,
+        m => m.earned.value
+    );
+    const display = jsx(() => {
+        const achievementsToDisplay = [...lockedAchievements.value];
+        if (firstFeature.value) {
+            achievementsToDisplay.push(firstFeature.value);
+        }
+        return renderColJSX(
+            ...achievementsToDisplay,
+            jsx(() => (
+                <Collapsible
+                    collapsed={collapseAchievements}
+                    content={collapsedContent}
+                    display={
+                        collapseAchievements.value
+                            ? "Show other completed achievements"
+                            : "Hide other completed achievements"
+                    }
+                    v-show={unref(hasCollapsedContent)}
+                />
+            ))
+        );
+    });
+    return {
+        collapseAchievements: collapseAchievements,
+        display
+    };
+}
+
+/**
+ * Utility function for getting an ETA for when a target will be reached by a resource with a known (and assumed consistent) gain.
+ * @param resource The resource that will be increasing over time.
+ * @param rate The rate at which the resource is increasing.
+ * @param target The target amount of the resource to estimate the duration until.
+ */
+export function estimateTime(
+    resource: Resource,
+    rate: Computable<DecimalSource>,
+    target: Computable<DecimalSource>
+) {
+    const processedRate = convertComputable(rate);
+    const processedTarget = convertComputable(target);
+    return computed(() => {
+        const currRate = unref(processedRate);
+        const currTarget = unref(processedTarget);
+        if (Decimal.gte(resource.value, currTarget)) {
+            return "Now";
+        } else if (Decimal.lte(currRate, 0)) {
+            return "Never";
+        }
+        return formatTime(Decimal.sub(currTarget, resource.value).div(currRate));
+    });
+}
+
+/**
+ * Utility function for displaying the result of a formula such that it will, when told to, preview how the formula's result will change.
+ * Requires a formula with a single variable inside.
+ * @param formula The formula to display the result of.
+ * @param showPreview Whether or not to preview how the formula's result will change.
+ * @param previewAmount The amount to _add_ to the current formula's variable amount to preview the change in result.
+ */
+export function createFormulaPreview(
+    formula: GenericFormula,
+    showPreview: Computable<boolean>,
+    previewAmount: Computable<DecimalSource> = 1
+) {
+    const processedShowPreview = convertComputable(showPreview);
+    const processedPreviewAmount = convertComputable(previewAmount);
+    if (!formula.hasVariable()) {
+        console.error("Cannot create formula preview if the formula does not have a variable");
+    }
+    return jsx(() => {
+        if (unref(processedShowPreview)) {
+            const curr = formatSmall(formula.evaluate());
+            const preview = formatSmall(
+                formula.evaluate(
+                    Decimal.add(
+                        unref(formula.innermostVariable ?? 0),
+                        unref(processedPreviewAmount)
+                    )
+                )
+            );
+            return (
+                <>
+                    <b>
+                        <i>
+                            {curr} → {preview}
+                        </i>
+                    </b>
+                </>
+            );
+        }
+        return <>{formatSmall(formula.evaluate())}</>;
+    });
+}
+
+/**
+ * Utility function for getting a computed boolean for whether or not a given feature is currently rendered in the DOM.
+ * Note it will have a true value even if the feature is off screen.
+ * @param layer The layer the feature appears within
+ * @param id The ID of the feature
+ */
+export function isRendered(layer: BaseLayer, id: string): ComputedRef<boolean>;
+/**
+ * Utility function for getting a computed boolean for whether or not a given feature is currently rendered in the DOM.
+ * Note it will have a true value even if the feature is off screen.
+ * @param layer The layer the feature appears within
+ * @param feature The feature that may be rendered
+ */
+export function isRendered(layer: BaseLayer, feature: { id: string }): ComputedRef<boolean>;
+export function isRendered(layer: BaseLayer, idOrFeature: string | { id: string }) {
+    const id = typeof idOrFeature === "string" ? idOrFeature : idOrFeature.id;
+    return computed(() => id in layer.nodes.value);
+}
diff --git a/src/data/layers/prestige.tsx b/src/data/layers/prestige.tsx
new file mode 100644
index 0000000..6e3cb69
--- /dev/null
+++ b/src/data/layers/prestige.tsx
@@ -0,0 +1,73 @@
+/**
+ * @module
+ * @hidden
+ */
+import { main } from "data/projEntry";
+import { createCumulativeConversion } from "features/conversion";
+import { jsx } from "features/feature";
+import { createHotkey } from "features/hotkey";
+import { createReset } from "features/reset";
+import MainDisplay from "features/resources/MainDisplay.vue";
+import { createResource } from "features/resources/resource";
+import { addTooltip } from "features/tooltips/tooltip";
+import { createResourceTooltip } from "features/trees/tree";
+import { BaseLayer, createLayer } from "game/layers";
+import type { DecimalSource } from "util/bignum";
+import { render } from "util/vue";
+import { createLayerTreeNode, createResetButton } from "../common";
+
+const id = "p";
+const layer = createLayer(id, function (this: BaseLayer) {
+    const name = "Prestige";
+    const color = "#4BDC13";
+    const points = createResource<DecimalSource>(0, "prestige points");
+
+    const conversion = createCumulativeConversion(() => ({
+        formula: x => x.div(10).sqrt(),
+        baseResource: main.points,
+        gainResource: points
+    }));
+
+    const reset = createReset(() => ({
+        thingsToReset: (): Record<string, unknown>[] => [layer]
+    }));
+
+    const treeNode = createLayerTreeNode(() => ({
+        layerID: id,
+        color,
+        reset
+    }));
+    const tooltip = addTooltip(treeNode, {
+        display: createResourceTooltip(points),
+        pinnable: true
+    });
+
+    const resetButton = createResetButton(() => ({
+        conversion,
+        tree: main.tree,
+        treeNode
+    }));
+
+    const hotkey = createHotkey(() => ({
+        description: "Reset for prestige points",
+        key: "p",
+        onPress: resetButton.onClick
+    }));
+
+    return {
+        name,
+        color,
+        points,
+        tooltip,
+        display: jsx(() => (
+            <>
+                <MainDisplay resource={points} color={color} />
+                {render(resetButton)}
+            </>
+        )),
+        treeNode,
+        hotkey
+    };
+});
+
+export default layer;
diff --git a/src/data/projEntry.tsx b/src/data/projEntry.tsx
index b2e5305..7d75a4c 100644
--- a/src/data/projEntry.tsx
+++ b/src/data/projEntry.tsx
@@ -1,7 +1,7 @@
 import { jsx } from "features/feature";
 import type { BaseLayer, GenericLayer } from "game/layers";
 import { createLayer } from "game/layers";
-import type { PlayerData } from "game/player";
+import type { Player } from "game/player";
 import { computed } from "vue";
 import Chat from "./Chat.vue";
 import HexGrid from "./HexGrid.vue";
@@ -62,7 +62,7 @@ export const hasWon = computed(() => {
 /* eslint-disable @typescript-eslint/no-unused-vars */
 export function fixOldSave(
     oldVersion: string | undefined,
-    player: Partial<PlayerData>
+    player: Partial<Player>
     // eslint-disable-next-line @typescript-eslint/no-empty-function
 ): void {}
 /* eslint-enable @typescript-eslint/no-unused-vars */
diff --git a/src/data/projInfo-schema.json b/src/data/projInfo-schema.json
new file mode 100644
index 0000000..0cea13c
--- /dev/null
+++ b/src/data/projInfo-schema.json
@@ -0,0 +1,93 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema",
+    "type": "object",
+    "properties": {
+        "title": {
+            "type": "string",
+            "description": "The name of the project, which will appear in the info tab and the header, if enabled. The page title will also be set to this value."
+        },
+        "description": {
+            "type": "string",
+            "description": "A description of the project, which will be used when the project is installed as a Progressive Web Application."
+        },
+        "id": {
+            "type": "string",
+            "description": "This is a unique ID used when saving player data. Changing this will effectively erase all save data for all players. This ID MUST be unique to your project, and should not be left as the default value. Otherwise, your project may use the save data from another project and cause issues for both projects.",
+            "minLength": 1
+        },
+        "author": {
+            "type": "string",
+            "description": "The author of the project, which will appear in the info tab."
+        },
+        "discordName": {
+            "type": "string",
+            "description": "The text to display for the discord server to point users to. This will appear when hovering over the discord icon, inside the info tab, the game over screen, as well as the NaN detected screen."
+        },
+        "discordLink": {
+            "type": "string",
+            "description": "The link for the discord server to point users to."
+        },
+        "versionNumber": {
+            "type": "string",
+            "description": "The current version of the project loaded. If the player data was last saved in a different version of the project, fixOldSave will be run, so you can perform any save migrations necessary. This will also appear in the nav, the info tab, and the game over screen.",
+            "markdownDescription": "The current version of the project loaded. If the player data was last saved in a different version of the project, [fixOldSave](https://moddingtree.com/guide/creating-your-project/project-entry.html#fixoldsave) will be run, so you can perform any save migrations necessary. This will also appear in the nav, the info tab, and the game over screen."
+        },
+        "versionTitle": {
+            "type": "string",
+            "description": "The display name for the current version of the project loaded. This will also appear in the nav, the info tab, and the game over screen unless set to an empty string."
+        },
+        "allowGoBack": {
+            "type": "boolean",
+            "description": "Whether or not to allow tabs (besides the first) to display a \"back\" button to close them (and any other tabs to the right of them)."
+        },
+        "defaultShowSmall": {
+            "type": "boolean",
+            "description": "Whether or not to allow resources to display small values (<.001). If false they'll just display as 0. Individual resources can also be configured to override this value."
+        },
+        "defaultDecimalsShown": {
+            "type": "number",
+            "description": "Default precision to display numbers at when passed into format. Individual format calls can override this value, and resources can be configured with a custom precision as well.",
+            "markdownDescription": "Default precision to display numbers at when passed into format. Individual format calls can override this value, and resources can be configured with a custom precision as well."
+        },
+        "useHeader": {
+            "type": "boolean",
+            "description": "Whether or not to display the nav as a header at the top of the screen. If disabled, the nav will appear on the left side of the screen laid over the first tab."
+        },
+        "banner": {
+            "type": ["boolean", "null"],
+            "description": "A path to an image file to display as the logo of the app. If null, the title will be shown instead. This will appear in the nav when useHeader is true.",
+            "markdownDescription": "A path to an image file to display as the logo of the app. If null, the title will be shown instead. This will appear in the nav when `useHeader` is true."
+        },
+        "logo": {
+            "type": "string",
+            "description": "A path to an image file to display as the logo of the app within the info tab. If left blank no logo will be shown."
+        },
+        "initialTabs": {
+            "type": "array",
+            "items": {
+                "type": "string"
+            },
+            "minItems": 1,
+            "uniqueItems": true,
+            "description": "The list of initial tabs to display on new saves. This value must have at least one element. Each element should be the ID of the layer to display in that tab."
+        },
+        "maxTickLength": {
+            "type": "number",
+            "description": "The longest duration a single tick can be, in seconds. When calculating things like offline time, a single tick will be forced to be this amount or lower. This will make calculating offline time spread out across many ticks as necessary. The default value is 1 hour."
+        },
+        "offlineLimit": {
+            "type": "number",
+            "description": "The max amount of time that can be stored as offline time, in hours."
+        },
+        "enablePausing": {
+            "type": "boolean",
+            "description": "Whether or not to allow the player to pause the game. Turning this off disables the toggle from the options menu as well as the NaN screen. Developers can still manually pause by just setting player.devSpeed to 0 in console (or 1 to resume).",
+            "markdownDescription": "Whether or not to allow the player to pause the game. Turning this off disables the toggle from the options menu as well as the NaN screen. Developers can still manually pause by just running `player.devSpeed = 0` in console (or `= 1` to resume)."
+        },
+        "exportEncoding": {
+            "type": "string",
+            "enum": ["base64", "lz", "plain"],
+            "description": "The encoding to use when exporting to the clipboard. Plain-text is fast to generate but is easiest for the player to manipulate and cheat with. Base 64 is slightly slower and the string will be longer but will offer a small barrier to people trying to cheat. LZ-String is the slowest method, but produces the smallest strings and still offers a small barrier to those trying to cheat. Some sharing platforms like pastebin may automatically delete base64 encoded text, and some sites might not support all the characters used in lz-string exports."
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/data/projInfo.json b/src/data/projInfo.json
index 410d06a..959bd25 100644
--- a/src/data/projInfo.json
+++ b/src/data/projInfo.json
@@ -1,4 +1,6 @@
 {
+	"$schema": "./projInfo-schema.json",
+
 	"title": "Chromatic Latice",
 	"description": "A multiplayer game about light and hexagons",
 	"id": "chromatic",
diff --git a/src/features/achievements/Achievement.vue b/src/features/achievements/Achievement.vue
index 5b3c7a0..5bc1103 100644
--- a/src/features/achievements/Achievement.vue
+++ b/src/features/achievements/Achievement.vue
@@ -1,9 +1,9 @@
 <template>
     <div
-        v-if="unref(visibility) !== Visibility.None"
+        v-if="isVisible(visibility)"
         :style="[
             {
-                visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined,
+                visibility: isHidden(visibility) ? 'hidden' : undefined,
                 backgroundImage: (earned && image && `url(${image})`) || ''
             },
             unref(style) ?? []
@@ -12,41 +12,44 @@
             feature: true,
             achievement: true,
             locked: !unref(earned),
-            bought: unref(earned),
+            done: unref(earned),
+            small: unref(small),
             ...unref(classes)
         }"
     >
-        <component v-if="component" :is="component" />
+        <component v-if="comp" :is="comp" />
         <MarkNode :mark="unref(mark)" />
         <Node :id="id" />
     </div>
 </template>
 
-<script lang="ts">
+<script lang="tsx">
 import "components/common/features.css";
 import MarkNode from "components/MarkNode.vue";
 import Node from "components/Node.vue";
-import type { CoercableComponent } from "features/feature";
-import { Visibility } from "features/feature";
-import { computeOptionalComponent, processedPropType } from "util/vue";
-import type { StyleValue } from "vue";
-import { defineComponent, toRefs, unref } from "vue";
+import { isHidden, isVisible, jsx, Visibility } from "features/feature";
+import { displayRequirements, Requirements } from "game/requirements";
+import { coerceComponent, isCoercableComponent, processedPropType, unwrapRef } from "util/vue";
+import { Component, defineComponent, shallowRef, StyleValue, toRefs, unref, UnwrapRef, watchEffect } from "vue";
+import { GenericAchievement } from "./achievement";
 
 export default defineComponent({
     props: {
         visibility: {
-            type: processedPropType<Visibility>(Number),
+            type: processedPropType<Visibility | boolean>(Number, Boolean),
             required: true
         },
-        display: processedPropType<CoercableComponent>(Object, String, Function),
+        display: processedPropType<UnwrapRef<GenericAchievement["display"]>>(Object, String, Function),
         earned: {
             type: processedPropType<boolean>(Boolean),
             required: true
         },
+        requirements: processedPropType<Requirements>(Object, Array),
         image: processedPropType<string>(String),
         style: processedPropType<StyleValue>(String, Object, Array),
         classes: processedPropType<Record<string, boolean>>(Object),
         mark: processedPropType<boolean | string>(Boolean, String),
+        small: processedPropType<boolean>(Boolean),
         id: {
             type: String,
             required: true
@@ -57,12 +60,50 @@ export default defineComponent({
         MarkNode
     },
     setup(props) {
-        const { display } = toRefs(props);
+        const { display, requirements, earned } = toRefs(props);
+
+        const comp = shallowRef<Component | string>("");
+
+        watchEffect(() => {
+            const currDisplay = unwrapRef(display);
+            if (currDisplay == null) {
+                comp.value = "";
+                return;
+            }
+            if (isCoercableComponent(currDisplay)) {
+                comp.value = coerceComponent(currDisplay);
+                return;
+            }
+            const Requirement = coerceComponent(currDisplay.requirement ? currDisplay.requirement : jsx(() => displayRequirements(unwrapRef(requirements) ?? [])), "h3");
+            const EffectDisplay = coerceComponent(currDisplay.effectDisplay || "", "b");
+            const OptionsDisplay = unwrapRef(earned) ?
+                coerceComponent(currDisplay.optionsDisplay || "", "span") :
+                "";
+            comp.value = coerceComponent(
+                jsx(() => (
+                    <span>
+                        <Requirement />
+                        {currDisplay.effectDisplay != null ? (
+                            <div>
+                                <EffectDisplay />
+                            </div>
+                        ) : null}
+                        {currDisplay.optionsDisplay != null ? (
+                            <div class="equal-spaced">
+                                <OptionsDisplay />
+                            </div>
+                        ) : null}
+                    </span>
+                ))
+            );
+        });
 
         return {
-            component: computeOptionalComponent(display),
+            comp,
             unref,
-            Visibility
+            Visibility,
+            isVisible,
+            isHidden
         };
     }
 });
@@ -76,4 +117,32 @@ export default defineComponent({
     color: white;
     text-shadow: 0 0 2px #000000;
 }
+
+.achievement:not(.small) {
+    height: unset;
+    width: calc(100% - 10px);
+    min-width: 120px;
+    padding-left: 5px;
+    padding-right: 5px;
+    background-color: var(--locked);
+    border-width: 4px;
+    border-radius: 5px;
+    color: rgba(0, 0, 0, 0.5);
+    font-size: unset;
+    text-shadow: unset;
+}
+
+.achievement.done {
+    background-color: var(--bought);
+    cursor: default;
+}
+
+.achievement :deep(.equal-spaced) {
+    display: flex;
+    justify-content: center;
+}
+
+.achievement :deep(.equal-spaced > *) {
+    margin: auto;
+}
 </style>
diff --git a/src/features/achievements/achievement.tsx b/src/features/achievements/achievement.tsx
index 8bebb55..9bf454f 100644
--- a/src/features/achievements/achievement.tsx
+++ b/src/features/achievements/achievement.tsx
@@ -1,20 +1,35 @@
+import { computed } from "@vue/reactivity";
+import { isArray } from "@vue/shared";
+import Select from "components/fields/Select.vue";
 import AchievementComponent from "features/achievements/Achievement.vue";
+import { GenericDecorator } from "features/decorators/common";
 import {
     CoercableComponent,
     Component,
     GatherProps,
-    getUniqueID,
+    GenericComponent,
     OptionsFunc,
     Replace,
-    setDefault,
     StyleValue,
-    Visibility
+    Visibility,
+    getUniqueID,
+    jsx,
+    setDefault
 } from "features/feature";
+import { globalBus } from "game/events";
 import "game/notifications";
 import type { Persistent } from "game/persistence";
 import { persistent } from "game/persistence";
 import player from "game/player";
-import settings from "game/settings";
+import {
+    Requirements,
+    createBooleanRequirement,
+    createVisibilityRequirement,
+    displayRequirements,
+    requirementsMet
+} from "game/requirements";
+import settings, { registerSettingField } from "game/settings";
+import { camelToTitle } from "util/common";
 import type {
     Computable,
     GetComputableType,
@@ -23,34 +38,79 @@ import type {
 } from "util/computed";
 import { processComputable } from "util/computed";
 import { createLazyProxy } from "util/proxies";
-import { coerceComponent } from "util/vue";
+import { coerceComponent, isCoercableComponent } from "util/vue";
 import { unref, watchEffect } from "vue";
 import { useToast } from "vue-toastification";
 
 const toast = useToast();
 
+/** A symbol used to identify {@link Achievement} features. */
 export const AchievementType = Symbol("Achievement");
 
+/** Modes for only displaying some achievements. */
+export enum AchievementDisplay {
+    All = "all",
+    //Last = "last",
+    Configurable = "configurable",
+    Incomplete = "incomplete",
+    None = "none"
+}
+
+/**
+ * An object that configures an {@link Achievement}.
+ */
 export interface AchievementOptions {
-    visibility?: Computable<Visibility>;
-    shouldEarn?: () => boolean;
-    display?: Computable<CoercableComponent>;
+    /** Whether this achievement should be visible. */
+    visibility?: Computable<Visibility | boolean>;
+    /** The requirement(s) to earn this achievement. Can be left null if using {@link BaseAchievement.complete}. */
+    requirements?: Requirements;
+    /** The display to use for this achievement. */
+    display?: Computable<
+        | CoercableComponent
+        | {
+              /** Description of the requirement(s) for this achievement. If unspecified then the requirements will be displayed automatically based on {@link requirements}. */
+              requirement?: CoercableComponent;
+              /** Description of what will change (if anything) for achieving this. */
+              effectDisplay?: CoercableComponent;
+              /** Any additional things to display on this achievement, such as a toggle for it's effect. */
+              optionsDisplay?: CoercableComponent;
+          }
+    >;
+    /** Shows a marker on the corner of the feature. */
     mark?: Computable<boolean | string>;
+    /** Toggles a smaller design for the feature. */
+    small?: Computable<boolean>;
+    /** An image to display as the background for this achievement. */
     image?: Computable<string>;
+    /** CSS to apply to this feature. */
     style?: Computable<StyleValue>;
+    /** Dictionary of CSS classes to apply to this feature. */
     classes?: Computable<Record<string, boolean>>;
+    /** Whether or not to display a notification popup when this achievement is earned. */
+    showPopups?: Computable<boolean>;
+    /** A function that is called when the achievement is completed. */
     onComplete?: VoidFunction;
 }
 
+/**
+ * The properties that are added onto a processed {@link AchievementOptions} to create an {@link Achievement}.
+ */
 export interface BaseAchievement {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
     id: string;
+    /** Whether or not this achievement has been earned. */
     earned: Persistent<boolean>;
+    /** A function to complete this achievement. */
     complete: VoidFunction;
+    /** A symbol that helps identify features of the same type. */
     type: typeof AchievementType;
-    [Component]: typeof AchievementComponent;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
 
+/** An object that represents a feature with requirements that is passively earned upon meeting certain requirements. */
 export type Achievement<T extends AchievementOptions> = Replace<
     T & BaseAchievement,
     {
@@ -60,68 +120,169 @@ export type Achievement<T extends AchievementOptions> = Replace<
         image: GetComputableType<T["image"]>;
         style: GetComputableType<T["style"]>;
         classes: GetComputableType<T["classes"]>;
+        showPopups: GetComputableTypeWithDefault<T["showPopups"], true>;
     }
 >;
 
+/** A type that matches any valid {@link Achievement} object. */
 export type GenericAchievement = Replace<
     Achievement<AchievementOptions>,
     {
-        visibility: ProcessedComputable<Visibility>;
+        visibility: ProcessedComputable<Visibility | boolean>;
+        showPopups: ProcessedComputable<boolean>;
     }
 >;
 
+/**
+ * Lazily creates an achievement with the given options.
+ * @param optionsFunc Achievement options.
+ */
 export function createAchievement<T extends AchievementOptions>(
-    optionsFunc?: OptionsFunc<T, BaseAchievement, GenericAchievement>
+    optionsFunc?: OptionsFunc<T, BaseAchievement, GenericAchievement>,
+    ...decorators: GenericDecorator[]
 ): Achievement<T> {
-    const earned = persistent<boolean>(false);
-    return createLazyProxy(() => {
-        const achievement = optionsFunc?.() ?? ({} as ReturnType<NonNullable<typeof optionsFunc>>);
+    const earned = persistent<boolean>(false, false);
+    const decoratedData = decorators.reduce(
+        (current, next) => Object.assign(current, next.getPersistentData?.()),
+        {}
+    );
+    return createLazyProxy(feature => {
+        const achievement =
+            optionsFunc?.call(feature, feature) ??
+            ({} as ReturnType<NonNullable<typeof optionsFunc>>);
         achievement.id = getUniqueID("achievement-");
         achievement.type = AchievementType;
-        achievement[Component] = AchievementComponent;
+        achievement[Component] = AchievementComponent as GenericComponent;
+
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(achievement);
+        }
 
         achievement.earned = earned;
         achievement.complete = function () {
+            if (earned.value) {
+                return;
+            }
             earned.value = true;
+            const genericAchievement = achievement as GenericAchievement;
+            genericAchievement.onComplete?.();
+            if (
+                genericAchievement.display != null &&
+                unref(genericAchievement.showPopups) === true
+            ) {
+                const display = unref(genericAchievement.display);
+                let Display;
+                if (isCoercableComponent(display)) {
+                    Display = coerceComponent(display);
+                } else if (display.requirement != null) {
+                    Display = coerceComponent(display.requirement);
+                } else {
+                    Display = displayRequirements(genericAchievement.requirements ?? []);
+                }
+                toast.info(
+                    <div>
+                        <h3>Achievement earned!</h3>
+                        <div>
+                            {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+                            {/* @ts-ignore */}
+                            <Display />
+                        </div>
+                    </div>
+                );
+            }
         };
 
+        Object.assign(achievement, decoratedData);
+
         processComputable(achievement as T, "visibility");
         setDefault(achievement, "visibility", Visibility.Visible);
+        const visibility = achievement.visibility as ProcessedComputable<Visibility | boolean>;
+        achievement.visibility = computed(() => {
+            const display = unref((achievement as GenericAchievement).display);
+            switch (settings.msDisplay) {
+                default:
+                case AchievementDisplay.All:
+                    return unref(visibility);
+                case AchievementDisplay.Configurable:
+                    if (
+                        unref(achievement.earned) &&
+                        !(
+                            display != null &&
+                            typeof display == "object" &&
+                            "optionsDisplay" in (display as Record<string, unknown>)
+                        )
+                    ) {
+                        return Visibility.None;
+                    }
+                    return unref(visibility);
+                case AchievementDisplay.Incomplete:
+                    if (unref(achievement.earned)) {
+                        return Visibility.None;
+                    }
+                    return unref(visibility);
+                case AchievementDisplay.None:
+                    return Visibility.None;
+            }
+        });
+
         processComputable(achievement as T, "display");
         processComputable(achievement as T, "mark");
+        processComputable(achievement as T, "small");
         processComputable(achievement as T, "image");
         processComputable(achievement as T, "style");
         processComputable(achievement as T, "classes");
+        processComputable(achievement as T, "showPopups");
+        setDefault(achievement, "showPopups", true);
 
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(achievement);
+        }
+
+        const decoratedProps = decorators.reduce(
+            (current, next) => Object.assign(current, next.getGatheredProps?.(achievement)),
+            {}
+        );
         achievement[GatherProps] = function (this: GenericAchievement) {
-            const { visibility, display, earned, image, style, classes, mark, id } = this;
-            return { visibility, display, earned, image, style: unref(style), classes, mark, id };
+            const {
+                visibility,
+                display,
+                requirements,
+                earned,
+                image,
+                style,
+                classes,
+                mark,
+                small,
+                id
+            } = this;
+            return {
+                visibility,
+                display,
+                requirements,
+                earned,
+                image,
+                style: unref(style),
+                classes,
+                mark,
+                small,
+                id,
+                ...decoratedProps
+            };
         };
 
-        if (achievement.shouldEarn) {
+        if (achievement.requirements) {
             const genericAchievement = achievement as GenericAchievement;
+            const requirements = [
+                createVisibilityRequirement(genericAchievement),
+                createBooleanRequirement(() => !genericAchievement.earned.value),
+                ...(isArray(achievement.requirements)
+                    ? achievement.requirements
+                    : [achievement.requirements])
+            ];
             watchEffect(() => {
                 if (settings.active !== player.id) return;
-                if (
-                    !genericAchievement.earned.value &&
-                    unref(genericAchievement.visibility) === Visibility.Visible &&
-                    genericAchievement.shouldEarn?.()
-                ) {
-                    genericAchievement.earned.value = true;
-                    genericAchievement.onComplete?.();
-                    if (genericAchievement.display) {
-                        const Display = coerceComponent(unref(genericAchievement.display));
-                        toast.info(
-                            <div>
-                                <h3>Achievement earned!</h3>
-                                <div>
-                                    {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-                                    {/* @ts-ignore */}
-                                    <Display />
-                                </div>
-                            </div>
-                        );
-                    }
+                if (requirementsMet(requirements)) {
+                    genericAchievement.complete();
                 }
             });
         }
@@ -129,3 +290,34 @@ export function createAchievement<T extends AchievementOptions>(
         return achievement as unknown as Achievement<T>;
     });
 }
+
+declare module "game/settings" {
+    interface Settings {
+        msDisplay: AchievementDisplay;
+    }
+}
+
+globalBus.on("loadSettings", settings => {
+    setDefault(settings, "msDisplay", AchievementDisplay.All);
+});
+
+const msDisplayOptions = Object.values(AchievementDisplay).map(option => ({
+    label: camelToTitle(option),
+    value: option
+}));
+
+registerSettingField(
+    jsx(() => (
+        <Select
+            title={jsx(() => (
+                <span class="option-title">
+                    Show achievements
+                    <desc>Select which achievements to display based on criterias.</desc>
+                </span>
+            ))}
+            options={msDisplayOptions}
+            onUpdate:modelValue={value => (settings.msDisplay = value as AchievementDisplay)}
+            modelValue={settings.msDisplay}
+        />
+    ))
+);
diff --git a/src/features/action.tsx b/src/features/action.tsx
new file mode 100644
index 0000000..1fbb8d3
--- /dev/null
+++ b/src/features/action.tsx
@@ -0,0 +1,293 @@
+import { isArray } from "@vue/shared";
+import ClickableComponent from "features/clickables/Clickable.vue";
+import {
+    Component,
+    findFeatures,
+    GatherProps,
+    GenericComponent,
+    getUniqueID,
+    jsx,
+    JSXFunction,
+    OptionsFunc,
+    Replace,
+    setDefault,
+    StyleValue,
+    Visibility
+} from "features/feature";
+import { globalBus } from "game/events";
+import { persistent } from "game/persistence";
+import Decimal, { DecimalSource } from "lib/break_eternity";
+import { Unsubscribe } from "nanoevents";
+import { Direction } from "util/common";
+import type {
+    Computable,
+    GetComputableType,
+    GetComputableTypeWithDefault,
+    ProcessedComputable
+} from "util/computed";
+import { processComputable } from "util/computed";
+import { createLazyProxy } from "util/proxies";
+import { coerceComponent, isCoercableComponent, render } from "util/vue";
+import { computed, Ref, ref, unref } from "vue";
+import { BarOptions, createBar, GenericBar } from "./bars/bar";
+import { ClickableOptions } from "./clickables/clickable";
+import { Decorator, GenericDecorator } from "./decorators/common";
+
+/** A symbol used to identify {@link Action} features. */
+export const ActionType = Symbol("Action");
+
+/**
+ * An object that configures an {@link Action}.
+ */
+export interface ActionOptions extends Omit<ClickableOptions, "onClick" | "onHold"> {
+    /** The cooldown during which the action cannot be performed again, in seconds. */
+    duration: Computable<DecimalSource>;
+    /** Whether or not the action should perform automatically when the cooldown is finished. */
+    autoStart?: Computable<boolean>;
+    /** A function that is called when the action is clicked. */
+    onClick: (amount: DecimalSource) => void;
+    /** A pass-through to the {@link Bar} used to display the cooldown progress for the action. */
+    barOptions?: Partial<BarOptions>;
+}
+
+/**
+ * The properties that are added onto a processed {@link ActionOptions} to create an {@link Action}.
+ */
+export interface BaseAction {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
+    id: string;
+    /** A symbol that helps identify features of the same type. */
+    type: typeof ActionType;
+    /** Whether or not the player is holding down the action. Actions will be considered clicked as soon as the cooldown completes when being held down. */
+    isHolding: Ref<boolean>;
+    /** The current amount of progress through the cooldown. */
+    progress: Ref<DecimalSource>;
+    /** The bar used to display the current cooldown progress. */
+    progressBar: GenericBar;
+    /** Update the cooldown the specified number of seconds */
+    update: (diff: number) => void;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
+    [GatherProps]: () => Record<string, unknown>;
+}
+
+/** An object that represents a feature that can be clicked upon, and then has a cooldown before it can be clicked again. */
+export type Action<T extends ActionOptions> = Replace<
+    T & BaseAction,
+    {
+        duration: GetComputableType<T["duration"]>;
+        autoStart: GetComputableTypeWithDefault<T["autoStart"], false>;
+        visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
+        canClick: GetComputableTypeWithDefault<T["canClick"], true>;
+        classes: GetComputableType<T["classes"]>;
+        style: GetComputableType<T["style"]>;
+        mark: GetComputableType<T["mark"]>;
+        display: JSXFunction;
+        onClick: VoidFunction;
+    }
+>;
+
+/** A type that matches any valid {@link Action} object. */
+export type GenericAction = Replace<
+    Action<ActionOptions>,
+    {
+        autoStart: ProcessedComputable<boolean>;
+        visibility: ProcessedComputable<Visibility | boolean>;
+        canClick: ProcessedComputable<boolean>;
+    }
+>;
+
+/**
+ * Lazily creates an action with the given options.
+ * @param optionsFunc Action options.
+ */
+export function createAction<T extends ActionOptions>(
+    optionsFunc?: OptionsFunc<T, BaseAction, GenericAction>,
+    ...decorators: GenericDecorator[]
+): Action<T> {
+    const progress = persistent<DecimalSource>(0);
+    const decoratedData = decorators.reduce(
+        (current, next) => Object.assign(current, next.getPersistentData?.()),
+        {}
+    );
+    return createLazyProxy(feature => {
+        const action =
+            optionsFunc?.call(feature, feature) ??
+            ({} as ReturnType<NonNullable<typeof optionsFunc>>);
+        action.id = getUniqueID("action-");
+        action.type = ActionType;
+        action[Component] = ClickableComponent as GenericComponent;
+
+        // Required because of display changing types
+        const genericAction = action as unknown as GenericAction;
+
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(action);
+        }
+
+        action.isHolding = ref(false);
+        action.progress = progress;
+        Object.assign(action, decoratedData);
+
+        processComputable(action as T, "visibility");
+        setDefault(action, "visibility", Visibility.Visible);
+        processComputable(action as T, "duration");
+        processComputable(action as T, "autoStart");
+        setDefault(action, "autoStart", false);
+        processComputable(action as T, "canClick");
+        setDefault(action, "canClick", true);
+        processComputable(action as T, "classes");
+        processComputable(action as T, "style");
+        processComputable(action as T, "mark");
+        processComputable(action as T, "display");
+
+        const style = action.style as ProcessedComputable<StyleValue | undefined>;
+        action.style = computed(() => {
+            const currStyle: StyleValue[] = [
+                {
+                    cursor: Decimal.gte(
+                        progress.value,
+                        unref(action.duration as ProcessedComputable<DecimalSource>)
+                    )
+                        ? "pointer"
+                        : "progress",
+                    display: "flex",
+                    flexDirection: "column"
+                }
+            ];
+            const originalStyle = unref(style);
+            if (isArray(originalStyle)) {
+                currStyle.push(...originalStyle);
+            } else if (originalStyle != null) {
+                currStyle.push(originalStyle);
+            }
+            return currStyle as StyleValue;
+        });
+
+        action.progressBar = createBar(() => ({
+            direction: Direction.Right,
+            width: 100,
+            height: 10,
+            borderStyle: "border-color: black",
+            baseStyle: "margin-top: -1px",
+            progress: () => Decimal.div(progress.value, unref(genericAction.duration)),
+            ...action.barOptions
+        }));
+
+        const canClick = action.canClick as ProcessedComputable<boolean>;
+        action.canClick = computed(
+            () =>
+                unref(canClick) &&
+                Decimal.gte(
+                    progress.value,
+                    unref(action.duration as ProcessedComputable<DecimalSource>)
+                )
+        );
+
+        const display = action.display as GetComputableType<ClickableOptions["display"]>;
+        action.display = jsx(() => {
+            const currDisplay = unref(display);
+            let Comp: GenericComponent | undefined;
+            if (isCoercableComponent(currDisplay)) {
+                Comp = coerceComponent(currDisplay);
+            } else if (currDisplay != null) {
+                const Title = coerceComponent(currDisplay.title ?? "", "h3");
+                const Description = coerceComponent(currDisplay.description, "div");
+                Comp = coerceComponent(
+                    jsx(() => (
+                        <span>
+                            {currDisplay.title != null ? (
+                                <div>
+                                    <Title />
+                                </div>
+                            ) : null}
+                            <Description />
+                        </span>
+                    ))
+                );
+            }
+            return (
+                <>
+                    <div style="flex-grow: 1" />
+                    {Comp == null ? null : <Comp />}
+                    <div style="flex-grow: 1" />
+                    {render(genericAction.progressBar)}
+                </>
+            );
+        });
+
+        const onClick = action.onClick.bind(action);
+        action.onClick = function () {
+            if (unref(action.canClick) === false) {
+                return;
+            }
+            const amount = Decimal.div(progress.value, unref(genericAction.duration));
+            onClick?.(amount);
+            progress.value = 0;
+        };
+
+        action.update = function (diff) {
+            const duration = unref(genericAction.duration);
+            if (Decimal.gte(progress.value, duration)) {
+                progress.value = duration;
+            } else {
+                progress.value = Decimal.add(progress.value, diff);
+                if (genericAction.isHolding.value || unref(genericAction.autoStart)) {
+                    genericAction.onClick();
+                }
+            }
+        };
+
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(action);
+        }
+
+        const decoratedProps = decorators.reduce(
+            (current, next) => Object.assign(current, next.getGatheredProps?.(action)),
+            {}
+        );
+        action[GatherProps] = function (this: GenericAction) {
+            const {
+                display,
+                visibility,
+                style,
+                classes,
+                onClick,
+                isHolding,
+                canClick,
+                small,
+                mark,
+                id
+            } = this;
+            return {
+                display,
+                visibility,
+                style: unref(style),
+                classes,
+                onClick,
+                isHolding,
+                canClick,
+                small,
+                mark,
+                id,
+                ...decoratedProps
+            };
+        };
+
+        return action as unknown as Action<T>;
+    });
+}
+
+const listeners: Record<string, Unsubscribe | undefined> = {};
+globalBus.on("addLayer", layer => {
+    const actions: GenericAction[] = findFeatures(layer, ActionType) as GenericAction[];
+    listeners[layer.id] = layer.on("postUpdate", diff => {
+        actions.forEach(action => action.update(diff));
+    });
+});
+globalBus.on("removeLayer", layer => {
+    // unsubscribe from postUpdate
+    listeners[layer.id]?.();
+    listeners[layer.id] = undefined;
+});
diff --git a/src/features/bars/Bar.vue b/src/features/bars/Bar.vue
index df140c0..4d7bb16 100644
--- a/src/features/bars/Bar.vue
+++ b/src/features/bars/Bar.vue
@@ -1,11 +1,11 @@
 <template>
     <div
-        v-if="unref(visibility) !== Visibility.None"
+        v-if="isVisible(visibility)"
         :style="[
             {
                 width: unref(width) + 'px',
                 height: unref(height) + 'px',
-                visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
+                visibility: isHidden(visibility) ? 'hidden' : undefined
             },
             unref(style) ?? {}
         ]"
@@ -44,7 +44,7 @@
 <script lang="ts">
 import MarkNode from "components/MarkNode.vue";
 import Node from "components/Node.vue";
-import { CoercableComponent, Visibility } from "features/feature";
+import { CoercableComponent, isHidden, isVisible, Visibility } from "features/feature";
 import type { DecimalSource } from "util/bignum";
 import Decimal from "util/bignum";
 import { Direction } from "util/common";
@@ -72,7 +72,7 @@ export default defineComponent({
         },
         display: processedPropType<CoercableComponent>(Object, String, Function),
         visibility: {
-            type: processedPropType<Visibility>(Number),
+            type: processedPropType<Visibility | boolean>(Number, Boolean),
             required: true
         },
         style: processedPropType<StyleValue>(Object, String, Array),
@@ -120,7 +120,7 @@ export default defineComponent({
                     barStyle.clipPath = `inset(0% ${normalizedProgress.value}% 0% 0%)`;
                     break;
                 case Direction.Left:
-                    barStyle.clipPath = `inset(0% 0% 0% ${normalizedProgress.value} + '%)`;
+                    barStyle.clipPath = `inset(0% 0% 0% ${normalizedProgress.value}%)`;
                     break;
                 case Direction.Default:
                     barStyle.clipPath = "inset(0% 50% 0% 0%)";
@@ -136,7 +136,9 @@ export default defineComponent({
             barStyle,
             component,
             unref,
-            Visibility
+            Visibility,
+            isVisible,
+            isHidden
         };
     }
 });
@@ -177,5 +179,6 @@ export default defineComponent({
     margin-left: -0.5px;
     transition-duration: 0.2s;
     z-index: 2;
+    transition-duration: 0.05s;
 }
 </style>
diff --git a/src/features/bars/bar.ts b/src/features/bars/bar.ts
index 4d15f18..8179001 100644
--- a/src/features/bars/bar.ts
+++ b/src/features/bars/bar.ts
@@ -1,6 +1,13 @@
 import BarComponent from "features/bars/Bar.vue";
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
-import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
+import { GenericDecorator } from "features/decorators/common";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
+import { Component, GatherProps, Visibility, getUniqueID, setDefault } from "features/feature";
 import type { DecimalSource } from "util/bignum";
 import { Direction } from "util/common";
 import type {
@@ -13,31 +20,56 @@ import { processComputable } from "util/computed";
 import { createLazyProxy } from "util/proxies";
 import { unref } from "vue";
 
+/** A symbol used to identify {@link Bar} features. */
 export const BarType = Symbol("Bar");
 
+/**
+ * An object that configures a {@link Bar}.
+ */
 export interface BarOptions {
-    visibility?: Computable<Visibility>;
+    /** Whether this bar should be visible. */
+    visibility?: Computable<Visibility | boolean>;
+    /** The width of the bar. */
     width: Computable<number>;
+    /** The height of the bar. */
     height: Computable<number>;
+    /** The direction in which the bar progresses. */
     direction: Computable<Direction>;
+    /** CSS to apply to this feature. */
     style?: Computable<StyleValue>;
+    /** Dictionary of CSS classes to apply to this feature. */
     classes?: Computable<Record<string, boolean>>;
+    /** CSS to apply to the bar's border. */
     borderStyle?: Computable<StyleValue>;
+    /** CSS to apply to the bar's base. */
     baseStyle?: Computable<StyleValue>;
+    /** CSS to apply to the bar's text. */
     textStyle?: Computable<StyleValue>;
+    /** CSS to apply to the bar's fill. */
     fillStyle?: Computable<StyleValue>;
+    /** The progress value of the bar, from 0 to 1. */
     progress: Computable<DecimalSource>;
+    /** The display to use for this bar. */
     display?: Computable<CoercableComponent>;
+    /** Shows a marker on the corner of the feature. */
     mark?: Computable<boolean | string>;
 }
 
+/**
+ * The properties that are added onto a processed {@link BarOptions} to create a {@link Bar}.
+ */
 export interface BaseBar {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
     id: string;
+    /** A symbol that helps identify features of the same type. */
     type: typeof BarType;
-    [Component]: typeof BarComponent;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
 
+/** An object that represents a feature that displays some sort of progress or completion or resource with a cap. */
 export type Bar<T extends BarOptions> = Replace<
     T & BaseBar,
     {
@@ -57,21 +89,37 @@ export type Bar<T extends BarOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link Bar} object. */
 export type GenericBar = Replace<
     Bar<BarOptions>,
     {
-        visibility: ProcessedComputable<Visibility>;
+        visibility: ProcessedComputable<Visibility | boolean>;
     }
 >;
 
+/**
+ * Lazily creates a bar with the given options.
+ * @param optionsFunc Bar options.
+ */
 export function createBar<T extends BarOptions>(
-    optionsFunc: OptionsFunc<T, BaseBar, GenericBar>
+    optionsFunc: OptionsFunc<T, BaseBar, GenericBar>,
+    ...decorators: GenericDecorator[]
 ): Bar<T> {
-    return createLazyProxy(() => {
-        const bar = optionsFunc();
+    const decoratedData = decorators.reduce(
+        (current, next) => Object.assign(current, next.getPersistentData?.()),
+        {}
+    );
+    return createLazyProxy(feature => {
+        const bar = optionsFunc.call(feature, feature);
         bar.id = getUniqueID("bar-");
         bar.type = BarType;
-        bar[Component] = BarComponent;
+        bar[Component] = BarComponent as GenericComponent;
+
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(bar);
+        }
+
+        Object.assign(bar, decoratedData);
 
         processComputable(bar as T, "visibility");
         setDefault(bar, "visibility", Visibility.Visible);
@@ -88,6 +136,14 @@ export function createBar<T extends BarOptions>(
         processComputable(bar as T, "display");
         processComputable(bar as T, "mark");
 
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(bar);
+        }
+
+        const decoratedProps = decorators.reduce(
+            (current, next) => Object.assign(current, next.getGatheredProps?.(bar)),
+            {}
+        );
         bar[GatherProps] = function (this: GenericBar) {
             const {
                 progress,
@@ -119,7 +175,8 @@ export function createBar<T extends BarOptions>(
                 baseStyle,
                 fillStyle,
                 mark,
-                id
+                id,
+                ...decoratedProps
             };
         };
 
diff --git a/src/features/boards/Board.vue b/src/features/boards/Board.vue
index 7d683f9..bb4e619 100644
--- a/src/features/boards/Board.vue
+++ b/src/features/boards/Board.vue
@@ -1,7 +1,6 @@
 <template>
     <panZoom
-        v-if="visibility !== Visibility.None"
-        v-show="visibility === Visibility.Visible"
+        v-if="isVisible(visibility)"
         :style="[
             {
                 width,
@@ -18,16 +17,28 @@
         @touchmove="drag"
         @mousedown="(e: MouseEvent) => mouseDown(e)"
         @touchstart="(e: TouchEvent) => mouseDown(e)"
-        @mouseup="() => endDragging(dragging)"
-        @touchend.passive="() => endDragging(dragging)"
-        @mouseleave="() => endDragging(dragging)"
+        @mouseup="() => endDragging(unref(draggingNode))"
+        @touchend.passive="() => endDragging(unref(draggingNode))"
+        @mouseleave="() => endDragging(unref(draggingNode), true)"
         @zoom="zoom"
     >
         <svg class="stage" width="100%" height="100%">
             <g class="g1">
                 <transition-group name="link" appear>
-                    <g v-for="(link, i) in unref(links) || []" :key="i">
-                        <BoardLinkVue :link="link" />
+                    <g
+                        v-for="link in unref(links) || []"
+                        :key="`${link.startNode.id}-${link.endNode.id}`"
+                    >
+                        <BoardLinkVue
+                            :link="link"
+                            :dragging="unref(draggingNode)"
+                            :dragged="
+                                link.startNode === unref(draggingNode) ||
+                                link.endNode === unref(draggingNode)
+                                    ? dragged
+                                    : undefined
+                            "
+                        />
                     </g>
                 </transition-group>
                 <transition-group name="grow" :duration="500" appear>
@@ -35,14 +46,17 @@
                         <BoardNodeVue
                             :node="node"
                             :nodeType="types[node.type]"
-                            :dragging="draggingNode"
-                            :dragged="dragged"
-                            :hasDragged="hasDragged"
-                            :receivingNode="receivingNode?.id === node.id"
-                            :selectedNode="unref(selectedNode)"
-                            :selectedAction="unref(selectedAction)"
+                            :dragging="unref(draggingNode)"
+                            :dragged="unref(draggingNode) === node ? dragged : undefined"
+                            :hasDragged="unref(draggingNode) == null ? false : hasDragged"
+                            :receivingNode="unref(receivingNode) === node"
+                            :isSelected="unref(selectedNode) === node"
+                            :selectedAction="
+                                unref(selectedNode) === node ? unref(selectedAction) : null
+                            "
                             @mouseDown="mouseDown"
                             @endDragging="endDragging"
+                            @clickAction="(actionId: string) => clickAction(node, actionId)"
                         />
                     </g>
                 </transition-group>
@@ -68,9 +82,9 @@ import type {
 } from "features/boards/board";
 import { getNodeProperty } from "features/boards/board";
 import type { StyleValue } from "features/feature";
-import { Visibility } from "features/feature";
+import { Visibility, isVisible } from "features/feature";
 import type { ProcessedComputable } from "util/computed";
-import { computed, ref, Ref, toRefs, unref } from "vue";
+import { Ref, computed, ref, toRefs, unref, watchEffect } from "vue";
 import BoardLinkVue from "./BoardLink.vue";
 import BoardNodeVue from "./BoardNode.vue";
 
@@ -78,7 +92,7 @@ const _props = defineProps<{
     nodes: Ref<BoardNode[]>;
     types: Record<string, GenericNodeType>;
     state: Ref<BoardData>;
-    visibility: ProcessedComputable<Visibility>;
+    visibility: ProcessedComputable<Visibility | boolean>;
     width?: ProcessedComputable<string>;
     height?: ProcessedComputable<string>;
     style?: ProcessedComputable<StyleValue>;
@@ -86,33 +100,36 @@ const _props = defineProps<{
     links: Ref<BoardNodeLink[] | null>;
     selectedAction: Ref<GenericBoardNodeAction | null>;
     selectedNode: Ref<BoardNode | null>;
+    draggingNode: Ref<BoardNode | null>;
+    receivingNode: Ref<BoardNode | null>;
     mousePosition: Ref<{ x: number; y: number } | null>;
+    setReceivingNode: (node: BoardNode | null) => void;
+    setDraggingNode: (node: BoardNode | null) => void;
 }>();
 const props = toRefs(_props);
 
 const lastMousePosition = ref({ x: 0, y: 0 });
 const dragged = ref({ x: 0, y: 0 });
-const dragging = ref<number | null>(null);
 const hasDragged = ref(false);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const stage = ref<any>(null);
 const currentZoom = ref<number>(1);
 
-const draggingNode = computed(() =>
-    dragging.value == null ? undefined : props.nodes.value.find(node => node.id === dragging.value)
-);
-
 const sortedNodes = computed(() => {
     const nodes = props.nodes.value.slice();
-    if (draggingNode.value) {
-        const node = nodes.splice(nodes.indexOf(draggingNode.value), 1)[0];
+    if (props.selectedNode.value) {
+        const node = nodes.splice(nodes.indexOf(props.selectedNode.value), 1)[0];
+        nodes.push(node);
+    }
+    if (props.draggingNode.value) {
+        const node = nodes.splice(nodes.indexOf(props.draggingNode.value), 1)[0];
         nodes.push(node);
     }
     return nodes;
 });
 
-const receivingNode = computed(() => {
-    const node = draggingNode.value;
+watchEffect(() => {
+    const node = props.draggingNode.value;
     if (node == null) {
         return null;
     }
@@ -122,26 +139,30 @@ const receivingNode = computed(() => {
         y: node.position.y + dragged.value.y
     };
     let smallestDistance = Number.MAX_VALUE;
-    return props.nodes.value.reduce((smallest: BoardNode | null, curr: BoardNode) => {
-        if (curr.id === node.id) {
-            return smallest;
-        }
-        const nodeType = props.types.value[curr.type];
-        const canAccept = getNodeProperty(nodeType.canAccept, curr);
-        if (!canAccept) {
-            return smallest;
-        }
 
-        const distanceSquared =
-            Math.pow(position.x - curr.position.x, 2) + Math.pow(position.y - curr.position.y, 2);
-        let size = getNodeProperty(nodeType.size, curr);
-        if (distanceSquared > smallestDistance || distanceSquared > size * size) {
-            return smallest;
-        }
+    props.setReceivingNode.value(
+        props.nodes.value.reduce((smallest: BoardNode | null, curr: BoardNode) => {
+            if (curr.id === node.id) {
+                return smallest;
+            }
+            const nodeType = props.types.value[curr.type];
+            const canAccept = getNodeProperty(nodeType.canAccept, curr, node);
+            if (!canAccept) {
+                return smallest;
+            }
 
-        smallestDistance = distanceSquared;
-        return curr;
-    }, null);
+            const distanceSquared =
+                Math.pow(position.x - curr.position.x, 2) +
+                Math.pow(position.y - curr.position.y, 2);
+            let size = getNodeProperty(nodeType.size, curr);
+            if (distanceSquared > smallestDistance || distanceSquared > size * size) {
+                return smallest;
+            }
+
+            smallestDistance = distanceSquared;
+            return curr;
+        }, null)
+    );
 });
 
 const cursors = computed(() => Object.entries(cursorPositions.value).filter(([id]) => id in nicknames.value));
@@ -149,10 +170,11 @@ const cursors = computed(() => Object.entries(cursorPositions.value).filter(([id
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function onInit(panzoomInstance: any) {
     panzoomInstance.setTransformOrigin(null);
+    panzoomInstance.moveTo(stage.value.$el.clientWidth / 2, stage.value.$el.clientHeight / 2);
 }
 
-function mouseDown(e: MouseEvent | TouchEvent, nodeID: number | null = null, draggable = false) {
-    if (dragging.value == null) {
+function mouseDown(e: MouseEvent | TouchEvent, node: BoardNode | null = null, draggable = false) {
+    if (props.draggingNode.value == null) {
         e.preventDefault();
         e.stopPropagation();
 
@@ -176,10 +198,10 @@ function mouseDown(e: MouseEvent | TouchEvent, nodeID: number | null = null, dra
         hasDragged.value = false;
 
         if (draggable) {
-            dragging.value = nodeID;
+            props.setDraggingNode.value(node);
         }
     }
-    if (nodeID != null) {
+    if (node != null) {
         props.state.value.selectedNode = null;
         props.state.value.selectedAction = null;
     }
@@ -194,7 +216,7 @@ function drag(e: MouseEvent | TouchEvent) {
             clientX = e.touches[0].clientX;
             clientY = e.touches[0].clientY;
         } else {
-            endDragging(dragging.value);
+            endDragging(props.draggingNode.value);
             props.mousePosition.value = null;
             return;
         }
@@ -204,8 +226,8 @@ function drag(e: MouseEvent | TouchEvent) {
     }
 
     props.mousePosition.value = {
-        x: (clientX - x - 10),
-        y: (clientY - y - 50)
+        x: (clientX - x) / scale,
+        y: (clientY - y) / scale
     };
 
     dragged.value = {
@@ -221,35 +243,45 @@ function drag(e: MouseEvent | TouchEvent) {
         hasDragged.value = true;
     }
 
-    if (dragging.value) {
+    if (props.draggingNode.value != null) {
         e.preventDefault();
         e.stopPropagation();
     }
 }
 
-function endDragging(nodeID: number | null) {
-    if (dragging.value != null && dragging.value === nodeID && draggingNode.value != null) {
-        draggingNode.value.position.x += Math.round(dragged.value.x / 25) * 25;
-        draggingNode.value.position.y += Math.round(dragged.value.y / 25) * 25;
+function endDragging(node: BoardNode | null, mouseLeave = false) {
+    if (props.draggingNode.value != null && props.draggingNode.value === node) {
+        if (props.receivingNode.value == null) {
+            props.draggingNode.value.position.x += Math.round(dragged.value.x / 25) * 25;
+            props.draggingNode.value.position.y += Math.round(dragged.value.y / 25) * 25;
+        }
 
         const nodes = props.nodes.value;
-        nodes.splice(nodes.indexOf(draggingNode.value), 1);
-        nodes.push(draggingNode.value);
+        nodes.push(nodes.splice(nodes.indexOf(props.draggingNode.value), 1)[0]);
 
-        if (receivingNode.value) {
-            props.types.value[receivingNode.value.type].onDrop?.(
-                receivingNode.value,
-                draggingNode.value
+        if (props.receivingNode.value) {
+            props.types.value[props.receivingNode.value.type].onDrop?.(
+                props.receivingNode.value,
+                props.draggingNode.value
             );
         }
 
-        dragging.value = null;
-    } else if (!hasDragged.value) {
+        props.setDraggingNode.value(null);
+    } else if (!hasDragged.value && !mouseLeave) {
         props.state.value.selectedNode = null;
         props.state.value.selectedAction = null;
     }
 }
 
+function clickAction(node: BoardNode, actionId: string) {
+    if (props.state.value.selectedAction === actionId) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        unref(props.selectedAction)!.onClick(unref(props.selectedNode)!);
+    } else {
+        props.state.value = { ...props.state.value, selectedAction: actionId };
+    }
+}
+
 function zoom() {
     const { x, y, scale } = stage.value.panZoomInstance.getTransform();
     const { x: clientX, y: clientY } = lastMousePosition.value;
diff --git a/src/features/boards/BoardLink.vue b/src/features/boards/BoardLink.vue
index cb61914..5dacc66 100644
--- a/src/features/boards/BoardLink.vue
+++ b/src/features/boards/BoardLink.vue
@@ -1,7 +1,7 @@
 <template>
     <line
         class="link"
-        v-bind="link"
+        v-bind="linkProps"
         :class="{ pulsing: link.pulsing }"
         :x1="startPosition.x"
         :y1="startPosition.y"
@@ -11,34 +11,55 @@
 </template>
 
 <script setup lang="ts">
-import type { BoardNodeLink } from "features/boards/board";
+import type { BoardNode, BoardNodeLink } from "features/boards/board";
+import { kebabifyObject } from "util/vue";
 import { computed, toRefs, unref } from "vue";
 
 const _props = defineProps<{
     link: BoardNodeLink;
+    dragging: BoardNode | null;
+    dragged?: {
+        x: number;
+        y: number;
+    };
 }>();
 const props = toRefs(_props);
 
 const startPosition = computed(() => {
-    const position = props.link.value.startNode.position;
+    const position = { ...props.link.value.startNode.position };
     if (props.link.value.offsetStart) {
         position.x += unref(props.link.value.offsetStart).x;
         position.y += unref(props.link.value.offsetStart).y;
     }
+    if (props.dragging?.value === props.link.value.startNode) {
+        position.x += props.dragged?.value?.x ?? 0;
+        position.y += props.dragged?.value?.y ?? 0;
+    }
     return position;
 });
 
 const endPosition = computed(() => {
-    const position = props.link.value.endNode.position;
+    const position = { ...props.link.value.endNode.position };
     if (props.link.value.offsetEnd) {
         position.x += unref(props.link.value.offsetEnd).x;
         position.y += unref(props.link.value.offsetEnd).y;
     }
+    if (props.dragging?.value === props.link.value.endNode) {
+        position.x += props.dragged?.value?.x ?? 0;
+        position.y += props.dragged?.value?.y ?? 0;
+    }
     return position;
 });
+
+const linkProps = computed(() => kebabifyObject(_props.link as unknown as Record<string, unknown>));
 </script>
 
 <style scoped>
+.link {
+    transition-duration: 0s;
+    pointer-events: none;
+}
+
 .link.pulsing {
     animation: pulsing 2s ease-in infinite;
 }
diff --git a/src/features/boards/BoardNode.vue b/src/features/boards/BoardNode.vue
index e46fb32..6a32f37 100644
--- a/src/features/boards/BoardNode.vue
+++ b/src/features/boards/BoardNode.vue
@@ -1,50 +1,22 @@
 <template>
+    <!-- Ugly casting to prevent TS compiler error about style because vue doesn't think it supports arrays when it does -->
     <g
         class="boardnode"
-        :class="node.type"
-        :style="{ opacity: dragging?.id === node.id && hasDragged ? 0.5 : 1 }"
-        :transform="`translate(${position.x},${position.y})`"
+        :class="{ [node.type]: true, isSelected, isDraggable, ...classes }"
+        :style="[{ opacity: dragging?.id === node.id && hasDragged ? 0.5 : 1 }, style ?? []] as unknown as (string | CSSProperties)"
+        :transform="`translate(${position.x},${position.y})${isSelected ? ' scale(1.2)' : ''}`"
     >
-        <transition name="actions" appear>
-            <g v-if="isSelected && actions">
-                <!-- TODO move to separate file -->
-                <g
-                    v-for="(action, index) in actions"
-                    :key="action.id"
-                    class="action"
-                    :class="{ selected: selectedAction?.id === action.id }"
-                    :transform="`translate(
-                            ${
-                                (-size - 30) *
-                                Math.sin(((actions.length - 1) / 2 - index) * actionDistance)
-                            },
-                            ${
-                                (size + 30) *
-                                Math.cos(((actions.length - 1) / 2 - index) * actionDistance)
-                            }
-                        )`"
-                    @mousedown="e => performAction(e, action)"
-                    @touchstart="e => performAction(e, action)"
-                    @mouseup="e => actionMouseUp(e, action)"
-                    @touchend.stop="e => actionMouseUp(e, action)"
-                >
-                    <circle
-                        :fill="getNodeProperty(action.fillColor, node)"
-                        r="20"
-                        :stroke-width="selectedAction?.id === action.id ? 4 : 0"
-                        :stroke="outlineColor"
-                    />
-                    <text :fill="titleColor" class="material-icons">{{
-                        getNodeProperty(action.icon, node)
-                    }}</text>
-                </g>
-            </g>
-        </transition>
+        <BoardNodeAction
+            :actions="actions ?? []"
+            :is-selected="isSelected"
+            :node="node"
+            :node-type="nodeType"
+            :selected-action="selectedAction"
+            @click-action="(actionId: string) => emit('clickAction', actionId)"
+        />
 
         <g
             class="node-container"
-            @mouseenter="isHovering = true"
-            @mouseleave="isHovering = false"
             @mousedown="mouseDown"
             @touchstart.passive="mouseDown"
             @mouseup="mouseUp"
@@ -69,7 +41,7 @@
                 />
 
                 <circle
-                    class="progressFill"
+                    class="progress progressFill"
                     v-if="progressDisplay === ProgressDisplay.Fill"
                     :r="Math.max(size * progress - 2, 0)"
                     :fill="progressColor"
@@ -77,7 +49,7 @@
                 <circle
                     v-else
                     :r="size + 4.5"
-                    class="progressRing"
+                    class="progress progressRing"
                     fill="transparent"
                     :stroke-dasharray="(size + 4.5) * 2 * Math.PI"
                     :stroke-width="5"
@@ -113,7 +85,7 @@
 
                 <rect
                     v-if="progressDisplay === ProgressDisplay.Fill"
-                    class="progressFill"
+                    class="progress progressFill"
                     :width="Math.max(size * sqrtTwo * progress - 2, 0)"
                     :height="Math.max(size * sqrtTwo * progress - 2, 0)"
                     :transform="`translate(${-Math.max(size * sqrtTwo * progress - 2, 0) / 2}, ${
@@ -123,7 +95,7 @@
                 />
                 <rect
                     v-else
-                    class="progressDiamond"
+                    class="progress progressDiamond"
                     :width="size * sqrtTwo + 9"
                     :height="size * sqrtTwo + 9"
                     :transform="`translate(${-(size * sqrtTwo + 9) / 2}, ${
@@ -145,7 +117,7 @@
         <transition name="fade" appear>
             <g v-if="label">
                 <text
-                    :fill="label.color || titleColor"
+                    :fill="label.color ?? titleColor"
                     class="node-title"
                     :class="{ pulsing: label.pulsing }"
                     :y="-size - 20"
@@ -157,10 +129,11 @@
         <transition name="fade" appear>
             <text
                 v-if="isSelected && selectedAction"
-                :fill="titleColor"
+                :fill="confirmationLabel.color ?? titleColor"
                 class="node-title"
+                :class="{ pulsing: confirmationLabel.pulsing }"
                 :y="size + 75"
-                >Tap again to confirm</text
+                >{{ confirmationLabel.text }}</text
             >
         </transition>
     </g>
@@ -169,34 +142,34 @@
 <script setup lang="ts">
 import themes from "data/themes";
 import type { BoardNode, GenericBoardNodeAction, GenericNodeType } from "features/boards/board";
-import { ProgressDisplay, getNodeProperty, Shape } from "features/boards/board";
-import { Visibility } from "features/feature";
+import { ProgressDisplay, Shape, getNodeProperty } from "features/boards/board";
+import { isVisible } from "features/feature";
 import settings from "game/settings";
-import { computed, ref, toRefs, unref, watch } from "vue";
+import { CSSProperties, computed, toRefs, unref, watch } from "vue";
+import BoardNodeAction from "./BoardNodeAction.vue";
 
 const sqrtTwo = Math.sqrt(2);
 
 const _props = defineProps<{
     node: BoardNode;
     nodeType: GenericNodeType;
-    dragging?: BoardNode;
+    dragging: BoardNode | null;
     dragged?: {
         x: number;
         y: number;
     };
     hasDragged?: boolean;
     receivingNode?: boolean;
-    selectedNode?: BoardNode | null;
-    selectedAction?: GenericBoardNodeAction | null;
+    isSelected: boolean;
+    selectedAction: GenericBoardNodeAction | null;
 }>();
 const props = toRefs(_props);
 const emit = defineEmits<{
-    (e: "mouseDown", event: MouseEvent | TouchEvent, node: number, isDraggable: boolean): void;
-    (e: "endDragging", node: number): void;
+    (e: "mouseDown", event: MouseEvent | TouchEvent, node: BoardNode, isDraggable: boolean): void;
+    (e: "endDragging", node: BoardNode): void;
+    (e: "clickAction", actionId: string): void;
 }>();
 
-const isHovering = ref(false);
-const isSelected = computed(() => unref(props.selectedNode) === unref(props.node));
 const isDraggable = computed(() =>
     getNodeProperty(props.nodeType.value.draggable, unref(props.node))
 );
@@ -204,47 +177,66 @@ const isDraggable = computed(() =>
 watch(isDraggable, value => {
     const node = unref(props.node);
     if (unref(props.dragging) === node && !value) {
-        emit("endDragging", node.id);
+        emit("endDragging", node);
     }
 });
 
 const actions = computed(() => {
     const node = unref(props.node);
-    return getNodeProperty(props.nodeType.value.actions, node)?.filter(
-        action => getNodeProperty(action.visibility, node) !== Visibility.None
+    return getNodeProperty(props.nodeType.value.actions, node)?.filter(action =>
+        isVisible(getNodeProperty(action.visibility, node))
     );
 });
 
 const position = computed(() => {
     const node = unref(props.node);
-    const dragged = unref(props.dragged);
 
-    return getNodeProperty(props.nodeType.value.draggable, node) &&
+    if (
+        getNodeProperty(props.nodeType.value.draggable, node) &&
         unref(props.dragging)?.id === node.id &&
-        dragged
-        ? {
-              x: node.position.x + Math.round(dragged.x / 25) * 25,
-              y: node.position.y + Math.round(dragged.y / 25) * 25
-          }
-        : node.position;
+        unref(props.dragged) != null
+    ) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const { x, y } = unref(props.dragged)!;
+        return {
+            x: node.position.x + Math.round(x / 25) * 25,
+            y: node.position.y + Math.round(y / 25) * 25
+        };
+    }
+    return node.position;
 });
 
 const shape = computed(() => getNodeProperty(props.nodeType.value.shape, unref(props.node)));
 const title = computed(() => getNodeProperty(props.nodeType.value.title, unref(props.node)));
-const label = computed(() => getNodeProperty(props.nodeType.value.label, unref(props.node)));
+const label = computed(
+    () =>
+        (props.isSelected.value
+            ? unref(props.selectedAction) &&
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              getNodeProperty(unref(props.selectedAction)!.tooltip, unref(props.node))
+            : null) ?? getNodeProperty(props.nodeType.value.label, unref(props.node))
+);
+const confirmationLabel = computed(() =>
+    getNodeProperty(
+        unref(props.selectedAction)?.confirmationLabel ?? {
+            text: "Tap again to confirm"
+        },
+        unref(props.node)
+    )
+);
 const size = computed(() => getNodeProperty(props.nodeType.value.size, unref(props.node)));
 const progress = computed(
-    () => getNodeProperty(props.nodeType.value.progress, unref(props.node)) || 0
+    () => getNodeProperty(props.nodeType.value.progress, unref(props.node)) ?? 0
 );
 const backgroundColor = computed(() => themes[settings.theme].variables["--background"]);
 const outlineColor = computed(
     () =>
-        getNodeProperty(props.nodeType.value.outlineColor, unref(props.node)) ||
+        getNodeProperty(props.nodeType.value.outlineColor, unref(props.node)) ??
         themes[settings.theme].variables["--outline"]
 );
 const fillColor = computed(
     () =>
-        getNodeProperty(props.nodeType.value.fillColor, unref(props.node)) ||
+        getNodeProperty(props.nodeType.value.fillColor, unref(props.node)) ??
         themes[settings.theme].variables["--raised-background"]
 );
 const progressColor = computed(() =>
@@ -252,7 +244,7 @@ const progressColor = computed(() =>
 );
 const titleColor = computed(
     () =>
-        getNodeProperty(props.nodeType.value.titleColor, unref(props.node)) ||
+        getNodeProperty(props.nodeType.value.titleColor, unref(props.node)) ??
         themes[settings.theme].variables["--foreground"]
 );
 const progressDisplay = computed(() =>
@@ -260,36 +252,21 @@ const progressDisplay = computed(() =>
 );
 const canAccept = computed(
     () =>
-        unref(props.dragging) != null &&
+        props.dragging.value != null &&
         unref(props.hasDragged) &&
-        getNodeProperty(props.nodeType.value.canAccept, unref(props.node))
-);
-const actionDistance = computed(() =>
-    getNodeProperty(props.nodeType.value.actionDistance, unref(props.node))
+        getNodeProperty(props.nodeType.value.canAccept, unref(props.node), props.dragging.value)
 );
+const style = computed(() => getNodeProperty(props.nodeType.value.style, unref(props.node)));
+const classes = computed(() => getNodeProperty(props.nodeType.value.classes, unref(props.node)));
 
 function mouseDown(e: MouseEvent | TouchEvent) {
-    emit("mouseDown", e, props.node.value.id, isDraggable.value);
+    emit("mouseDown", e, props.node.value, isDraggable.value);
 }
 
-function mouseUp() {
+function mouseUp(e: MouseEvent | TouchEvent) {
     if (!props.hasDragged?.value) {
+        emit("endDragging", props.node.value);
         props.nodeType.value.onClick?.(props.node.value);
-    }
-}
-
-function performAction(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {
-    // If the onClick function made this action selected,
-    // don't propagate the event (which will deselect everything)
-    if (action.onClick(unref(props.node)) || unref(props.selectedAction)?.id === action.id) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-}
-
-function actionMouseUp(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {
-    if (unref(props.selectedAction)?.id === action.id) {
-        e.preventDefault();
         e.stopPropagation();
     }
 }
@@ -301,33 +278,35 @@ function actionMouseUp(e: MouseEvent | TouchEvent, action: GenericBoardNodeActio
     transition-duration: 0s;
 }
 
+.boardnode:hover .body {
+    fill: var(--highlighted);
+}
+
+.boardnode.isSelected .body {
+    fill: var(--accent1) !important;
+}
+
+.boardnode:not(.isDraggable) .body {
+    fill: var(--locked);
+}
+
 .node-title {
     text-anchor: middle;
     dominant-baseline: middle;
     font-family: monospace;
     font-size: 200%;
     pointer-events: none;
+    filter: drop-shadow(3px 3px 2px var(--tooltip-background));
+}
+
+.progress {
+    transition-duration: 0.05s;
 }
 
 .progressRing {
     transform: rotate(-90deg);
 }
 
-.action:not(.boardnode):hover circle,
-.action:not(.boardnode).selected circle {
-    r: 25;
-}
-
-.action:not(.boardnode):hover text,
-.action:not(.boardnode).selected text {
-    font-size: 187.5%; /* 150% * 1.25 */
-}
-
-.action:not(.boardnode) text {
-    text-anchor: middle;
-    dominant-baseline: central;
-}
-
 .fade-enter-from,
 .fade-leave-to {
     opacity: 0;
@@ -353,11 +332,6 @@ function actionMouseUp(e: MouseEvent | TouchEvent, action: GenericBoardNodeActio
 </style>
 
 <style>
-.actions-enter-from .action,
-.actions-leave-to .action {
-    transform: translate(0, 0);
-}
-
 .grow-enter-from .node-container,
 .grow-leave-to .node-container {
     transform: scale(0);
diff --git a/src/features/boards/BoardNodeAction.vue b/src/features/boards/BoardNodeAction.vue
new file mode 100644
index 0000000..c65727a
--- /dev/null
+++ b/src/features/boards/BoardNodeAction.vue
@@ -0,0 +1,109 @@
+<template>
+    <transition name="actions" appear>
+        <g v-if="isSelected && actions">
+            <g
+                v-for="(action, index) in actions"
+                :key="action.id"
+                class="action"
+                :class="{ selected: selectedAction?.id === action.id }"
+                :transform="`translate(
+                        ${
+                            (-size - 30) *
+                            Math.sin(((actions.length - 1) / 2 - index) * actionDistance)
+                        },
+                        ${
+                            (size + 30) *
+                            Math.cos(((actions.length - 1) / 2 - index) * actionDistance)
+                        }
+                    )`"
+                @mousedown="e => performAction(e, action)"
+                @touchstart="e => performAction(e, action)"
+                @mouseup="e => actionMouseUp(e, action)"
+                @touchend.stop="e => actionMouseUp(e, action)"
+            >
+                <circle
+                    :fill="getNodeProperty(action.fillColor, node)"
+                    r="20"
+                    :stroke-width="selectedAction?.id === action.id ? 4 : 0"
+                    :stroke="outlineColor"
+                />
+                <text :fill="titleColor" class="material-icons">{{
+                    getNodeProperty(action.icon, node)
+                }}</text>
+            </g>
+        </g>
+    </transition>
+</template>
+
+<script setup lang="ts">
+import themes from "data/themes";
+import type { BoardNode, GenericBoardNodeAction, GenericNodeType } from "features/boards/board";
+import { getNodeProperty } from "features/boards/board";
+import settings from "game/settings";
+import { computed, toRefs, unref } from "vue";
+
+const _props = defineProps<{
+    node: BoardNode;
+    nodeType: GenericNodeType;
+    actions?: GenericBoardNodeAction[];
+    isSelected: boolean;
+    selectedAction: GenericBoardNodeAction | null;
+}>();
+const props = toRefs(_props);
+
+const emit = defineEmits<{
+    (e: "clickAction", actionId: string): void;
+}>();
+
+const size = computed(() => getNodeProperty(props.nodeType.value.size, unref(props.node)));
+const outlineColor = computed(
+    () =>
+        getNodeProperty(props.nodeType.value.outlineColor, unref(props.node)) ??
+        themes[settings.theme].variables["--outline"]
+);
+const titleColor = computed(
+    () =>
+        getNodeProperty(props.nodeType.value.titleColor, unref(props.node)) ??
+        themes[settings.theme].variables["--foreground"]
+);
+const actionDistance = computed(() =>
+    getNodeProperty(props.nodeType.value.actionDistance, unref(props.node))
+);
+
+function performAction(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {
+    emit("clickAction", action.id);
+    e.preventDefault();
+    e.stopPropagation();
+}
+
+function actionMouseUp(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {
+    if (unref(props.selectedAction)?.id === action.id) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+}
+</script>
+
+<style scoped>
+.action:not(.boardnode):hover circle,
+.action:not(.boardnode).selected circle {
+    r: 25;
+}
+
+.action:not(.boardnode):hover text,
+.action:not(.boardnode).selected text {
+    font-size: 187.5%; /* 150% * 1.25 */
+}
+
+.action:not(.boardnode) text {
+    text-anchor: middle;
+    dominant-baseline: central;
+}
+</style>
+
+<style>
+.actions-enter-from .action,
+.actions-leave-to .action {
+    transform: translate(0, 0);
+}
+</style>
diff --git a/src/features/boards/board.ts b/src/features/boards/board.ts
index 4763993..8a9026f 100644
--- a/src/features/boards/board.ts
+++ b/src/features/boards/board.ts
@@ -1,5 +1,5 @@
 import BoardComponent from "features/boards/Board.vue";
-import type { OptionsFunc, Replace, StyleValue } from "features/feature";
+import type { GenericComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
 import {
     Component,
     findFeatures,
@@ -9,10 +9,10 @@ import {
     Visibility
 } from "features/feature";
 import { globalBus } from "game/events";
-import type { Persistent, State } from "game/persistence";
+import { DefaultValue, deletePersistent, Persistent, State } from "game/persistence";
 import { persistent } from "game/persistence";
 import type { Unsubscribe } from "nanoevents";
-import { isFunction } from "util/common";
+import { Direction, isFunction } from "util/common";
 import type {
     Computable,
     GetComputableType,
@@ -21,26 +21,35 @@ import type {
 } from "util/computed";
 import { processComputable } from "util/computed";
 import { createLazyProxy } from "util/proxies";
-import { computed, ref, Ref, unref } from "vue";
+import { computed, isRef, ref, Ref, unref } from "vue";
 import panZoom from "vue-panzoom";
 import type { Link } from "../links/links";
 
 globalBus.on("setupVue", app => panZoom.install(app));
 
+/** A symbol used to identify {@link Board} features. */
 export const BoardType = Symbol("Board");
 
-export type NodeComputable<T> = Computable<T> | ((node: BoardNode) => T);
+/**
+ * A type representing a computable value for a node on the board. Used for node types to return different values based on the given node and the state of the board.
+ */
+export type NodeComputable<T, S extends unknown[] = []> =
+    | Computable<T>
+    | ((node: BoardNode, ...args: S) => T);
 
+/** Ways to display progress of an action with a duration. */
 export enum ProgressDisplay {
     Outline = "Outline",
     Fill = "Fill"
 }
 
+/** Node shapes. */
 export enum Shape {
     Circle = "Circle",
     Diamond = "Triangle"
 }
 
+/** An object representing a node on the board. */
 export interface BoardNode {
     id: number;
     position: {
@@ -52,54 +61,90 @@ export interface BoardNode {
     pinned?: boolean;
 }
 
+/** An object representing a link between two nodes on the board. */
 export interface BoardNodeLink extends Omit<Link, "startNode" | "endNode"> {
     startNode: BoardNode;
     endNode: BoardNode;
+    stroke: string;
+    strokeWidth: number;
     pulsing?: boolean;
 }
 
+/** An object representing a label for a node. */
 export interface NodeLabel {
     text: string;
     color?: string;
     pulsing?: boolean;
 }
 
+/** The persistent data for a board. */
 export type BoardData = {
     nodes: BoardNode[];
     selectedNode: number | null;
     selectedAction: string | null;
 };
 
+/**
+ * An object that configures a {@link NodeType}.
+ */
 export interface NodeTypeOptions {
+    /** The title to display for the node. */
     title: NodeComputable<string>;
+    /** An optional label for the node. */
     label?: NodeComputable<NodeLabel | null>;
+    /** The size of the node - diameter for circles, width and height for squares. */
     size: NodeComputable<number>;
+    /** CSS to apply to this node. */
+    style?: NodeComputable<StyleValue>;
+    /** Dictionary of CSS classes to apply to this node. */
+    classes?: NodeComputable<Record<string, boolean>>;
+    /** Whether the node is draggable or not. */
     draggable?: NodeComputable<boolean>;
+    /** The shape of the node. */
     shape: NodeComputable<Shape>;
-    canAccept?: boolean | Ref<boolean> | ((node: BoardNode, otherNode: BoardNode) => boolean);
+    /** Whether the node can accept another node being dropped upon it. */
+    canAccept?: NodeComputable<boolean, [BoardNode]>;
+    /** The progress value of the node, from 0 to 1. */
     progress?: NodeComputable<number>;
+    /** How the progress should be displayed on the node. */
     progressDisplay?: NodeComputable<ProgressDisplay>;
+    /** The color of the progress indicator. */
     progressColor?: NodeComputable<string>;
+    /** The fill color of the node. */
     fillColor?: NodeComputable<string>;
+    /** The outline color of the node. */
     outlineColor?: NodeComputable<string>;
+    /** The color of the title text. */
     titleColor?: NodeComputable<string>;
+    /** The list of action options for the node. */
     actions?: BoardNodeActionOptions[];
+    /** The arc between each action, in radians. */
     actionDistance?: NodeComputable<number>;
+    /** A function that is called when the node is clicked. */
     onClick?: (node: BoardNode) => void;
+    /** A function that is called when a node is dropped onto this node. */
     onDrop?: (node: BoardNode, otherNode: BoardNode) => void;
+    /** A function that is called for each node of this type every tick. */
     update?: (node: BoardNode, diff: number) => void;
 }
 
+/**
+ * The properties that are added onto a processed {@link NodeTypeOptions} to create a {@link NodeType}.
+ */
 export interface BaseNodeType {
+    /** The nodes currently on the board of this type. */
     nodes: Ref<BoardNode[]>;
 }
 
+/** An object that represents a type of node that can appear on a board. It will handle getting properties and callbacks for every node of that type. */
 export type NodeType<T extends NodeTypeOptions> = Replace<
     T & BaseNodeType,
     {
         title: GetComputableType<T["title"]>;
         label: GetComputableType<T["label"]>;
         size: GetComputableTypeWithDefault<T["size"], 50>;
+        style: GetComputableType<T["style"]>;
+        classes: GetComputableType<T["classes"]>;
         draggable: GetComputableTypeWithDefault<T["draggable"], false>;
         shape: GetComputableTypeWithDefault<T["shape"], Shape.Circle>;
         canAccept: GetComputableTypeWithDefault<T["canAccept"], false>;
@@ -114,33 +159,50 @@ export type NodeType<T extends NodeTypeOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link NodeType} object. */
 export type GenericNodeType = Replace<
     NodeType<NodeTypeOptions>,
     {
         size: NodeComputable<number>;
         draggable: NodeComputable<boolean>;
         shape: NodeComputable<Shape>;
-        canAccept: NodeComputable<boolean>;
+        canAccept: NodeComputable<boolean, [BoardNode]>;
         progressDisplay: NodeComputable<ProgressDisplay>;
         progressColor: NodeComputable<string>;
         actionDistance: NodeComputable<number>;
     }
 >;
 
+/**
+ * An object that configures a {@link BoardNodeAction}.
+ */
 export interface BoardNodeActionOptions {
+    /** A unique identifier for the action. */
     id: string;
-    visibility?: NodeComputable<Visibility>;
+    /** Whether this action should be visible. */
+    visibility?: NodeComputable<Visibility | boolean>;
+    /** The icon to display for the action. */
     icon: NodeComputable<string>;
+    /** The fill color of the action. */
     fillColor?: NodeComputable<string>;
-    tooltip: NodeComputable<string>;
+    /** The tooltip text to display for the action. */
+    tooltip: NodeComputable<NodeLabel>;
+    /** The confirmation label that appears under the action. */
+    confirmationLabel?: NodeComputable<NodeLabel>;
+    /** An array of board node links associated with the action. They appear when the action is focused. */
     links?: NodeComputable<BoardNodeLink[]>;
-    onClick: (node: BoardNode) => boolean | undefined;
+    /** A function that is called when the action is clicked. */
+    onClick: (node: BoardNode) => void;
 }
 
+/**
+ * The properties that are added onto a processed {@link BoardNodeActionOptions} to create an {@link BoardNodeAction}.
+ */
 export interface BaseBoardNodeAction {
     links?: Ref<BoardNodeLink[]>;
 }
 
+/** An object that represents an action that can be taken upon a node. */
 export type BoardNodeAction<T extends BoardNodeActionOptions> = Replace<
     T & BaseBoardNodeAction,
     {
@@ -148,40 +210,73 @@ export type BoardNodeAction<T extends BoardNodeActionOptions> = Replace<
         icon: GetComputableType<T["icon"]>;
         fillColor: GetComputableType<T["fillColor"]>;
         tooltip: GetComputableType<T["tooltip"]>;
+        confirmationLabel: GetComputableTypeWithDefault<T["confirmationLabel"], NodeLabel>;
         links: GetComputableType<T["links"]>;
     }
 >;
 
+/** A type that matches any valid {@link BoardNodeAction} object. */
 export type GenericBoardNodeAction = Replace<
     BoardNodeAction<BoardNodeActionOptions>,
     {
-        visibility: NodeComputable<Visibility>;
+        visibility: NodeComputable<Visibility | boolean>;
+        confirmationLabel: NodeComputable<NodeLabel>;
     }
 >;
 
+/**
+ * An object that configures a {@link Board}.
+ */
 export interface BoardOptions {
-    visibility?: Computable<Visibility>;
+    /** Whether this board should be visible. */
+    visibility?: Computable<Visibility | boolean>;
+    /** The height of the board. Defaults to 100% */
     height?: Computable<string>;
+    /** The width of the board. Defaults to 100% */
     width?: Computable<string>;
+    /** Dictionary of CSS classes to apply to this feature. */
     classes?: Computable<Record<string, boolean>>;
+    /** CSS to apply to this feature. */
     style?: Computable<StyleValue>;
+    /** A function that returns an array of initial board nodes, without IDs. */
     startNodes: () => Omit<BoardNode, "id">[];
+    /** A dictionary of node types that can appear on the board. */
     types: Record<string, NodeTypeOptions>;
+    /** The persistent state of the board. */
+    state?: Computable<BoardData>;
+    /** An array of board node links to display. */
+    links?: Computable<BoardNodeLink[] | null>;
 }
 
+/**
+ * The properties that are added onto a processed {@link BoardOptions} to create a {@link Board}.
+ */
 export interface BaseBoard {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
     id: string;
-    state: Persistent<BoardData>;
-    links: Ref<BoardNodeLink[] | null>;
+    /** All the nodes currently on the board. */
     nodes: Ref<BoardNode[]>;
+    /** The currently selected node, if any. */
     selectedNode: Ref<BoardNode | null>;
+    /** The currently selected action, if any. */
     selectedAction: Ref<GenericBoardNodeAction | null>;
+    /** The currently being dragged node, if any. */
+    draggingNode: Ref<BoardNode | null>;
+    /** If dragging a node, the node it's currently being hovered over, if any. */
+    receivingNode: Ref<BoardNode | null>;
+    /** The current mouse position, if over the board. */
     mousePosition: Ref<{ x: number; y: number } | null>;
+    /** Places a node in the nearest empty space in the given direction with the specified space around it. */
+    placeInAvailableSpace: (node: BoardNode, radius?: number, direction?: Direction) => void;
+    /** A symbol that helps identify features of the same type. */
     type: typeof BoardType;
-    [Component]: typeof BoardComponent;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
 
+/** An object that represents a feature that is a zoomable, pannable board with various nodes upon it. */
 export type Board<T extends BoardOptions> = Replace<
     T & BaseBoard,
     {
@@ -191,74 +286,133 @@ export type Board<T extends BoardOptions> = Replace<
         width: GetComputableType<T["width"]>;
         classes: GetComputableType<T["classes"]>;
         style: GetComputableType<T["style"]>;
+        state: GetComputableTypeWithDefault<T["state"], Persistent<BoardData>>;
+        links: GetComputableTypeWithDefault<T["links"], Ref<BoardNodeLink[] | null>>;
     }
 >;
 
+/** A type that matches any valid {@link Board} object. */
 export type GenericBoard = Replace<
     Board<BoardOptions>,
     {
-        visibility: ProcessedComputable<Visibility>;
+        visibility: ProcessedComputable<Visibility | boolean>;
+        state: ProcessedComputable<BoardData>;
+        links: ProcessedComputable<BoardNodeLink[] | null>;
     }
 >;
 
+/**
+ * Lazily creates a board with the given options.
+ * @param optionsFunc Board options.
+ */
 export function createBoard<T extends BoardOptions>(
     optionsFunc: OptionsFunc<T, BaseBoard, GenericBoard>
 ): Board<T> {
-    return createLazyProxy(() => {
-        const board = optionsFunc();
-        board.id = getUniqueID("board-");
-        board.type = BoardType;
-        board[Component] = BoardComponent;
-
-        board.state = persistent<BoardData>({
-            nodes: board.startNodes().map((n, i) => {
-                (n as BoardNode).id = i;
-                return n as BoardNode;
-            }),
+    const state = persistent<BoardData>(
+        {
+            nodes: [],
             selectedNode: null,
             selectedAction: null
+        },
+        false
+    );
+
+    return createLazyProxy(feature => {
+        const board = optionsFunc.call(feature, feature);
+        board.id = getUniqueID("board-");
+        board.type = BoardType;
+        board[Component] = BoardComponent as GenericComponent;
+
+        if (board.state) {
+            deletePersistent(state);
+            processComputable(board as T, "state");
+        } else {
+            state[DefaultValue] = {
+                nodes: board.startNodes().map((n, i) => {
+                    (n as BoardNode).id = i;
+                    return n as BoardNode;
+                }),
+                selectedNode: null,
+                selectedAction: null
+            };
+            board.state = state;
+        }
+
+        board.nodes = computed(() => unref(processedBoard.state).nodes);
+        board.selectedNode = computed({
+            get() {
+                return (
+                    processedBoard.nodes.value.find(
+                        node => node.id === unref(processedBoard.state).selectedNode
+                    ) || null
+                );
+            },
+            set(node) {
+                if (isRef(processedBoard.state)) {
+                    processedBoard.state.value = {
+                        ...processedBoard.state.value,
+                        selectedNode: node?.id ?? null
+                    };
+                } else {
+                    processedBoard.state.selectedNode = node?.id ?? null;
+                }
+            }
         });
-        board.nodes = computed(() => processedBoard.state.value.nodes);
-        board.selectedNode = computed(
-            () =>
-                processedBoard.nodes.value.find(
-                    node => node.id === processedBoard.state.value.selectedNode
-                ) || null
-        );
-        board.selectedAction = computed(() => {
-            const selectedNode = processedBoard.selectedNode.value;
-            if (selectedNode == null) {
-                return null;
+        board.selectedAction = computed({
+            get() {
+                const selectedNode = processedBoard.selectedNode.value;
+                if (selectedNode == null) {
+                    return null;
+                }
+                const type = processedBoard.types[selectedNode.type];
+                if (type.actions == null) {
+                    return null;
+                }
+                return (
+                    type.actions.find(
+                        action => action.id === unref(processedBoard.state).selectedAction
+                    ) || null
+                );
+            },
+            set(action) {
+                if (isRef(processedBoard.state)) {
+                    processedBoard.state.value = {
+                        ...processedBoard.state.value,
+                        selectedAction: action?.id ?? null
+                    };
+                } else {
+                    processedBoard.state.selectedAction = action?.id ?? null;
+                }
             }
-            const type = processedBoard.types[selectedNode.type];
-            if (type.actions == null) {
-                return null;
-            }
-            return (
-                type.actions.find(
-                    action => action.id === processedBoard.state.value.selectedAction
-                ) || null
-            );
         });
         board.mousePosition = ref(null);
-        board.links = computed(() => {
-            if (processedBoard.selectedAction.value == null) {
-                return null;
-            }
-            if (processedBoard.selectedAction.value.links && processedBoard.selectedNode.value) {
-                return getNodeProperty(
-                    processedBoard.selectedAction.value.links,
+        if (board.links) {
+            processComputable(board as T, "links");
+        } else {
+            board.links = computed(() => {
+                if (processedBoard.selectedAction.value == null) {
+                    return null;
+                }
+                if (
+                    processedBoard.selectedAction.value.links &&
                     processedBoard.selectedNode.value
-                );
-            }
-            return null;
-        });
+                ) {
+                    return getNodeProperty(
+                        processedBoard.selectedAction.value.links,
+                        processedBoard.selectedNode.value
+                    );
+                }
+                return null;
+            });
+        }
+        board.draggingNode = ref(null);
+        board.receivingNode = ref(null);
         processComputable(board as T, "visibility");
         setDefault(board, "visibility", Visibility.Visible);
         processComputable(board as T, "width");
         setDefault(board, "width", "100%");
         processComputable(board as T, "height");
-        setDefault(board, "height", "400px");
+        setDefault(board, "height", "100%");
         processComputable(board as T, "classes");
         processComputable(board as T, "style");
 
@@ -269,6 +423,8 @@ export function createBoard<T extends BoardOptions>(
             processComputable(nodeType as NodeTypeOptions, "label");
             processComputable(nodeType as NodeTypeOptions, "size");
             setDefault(nodeType, "size", 50);
+            processComputable(nodeType as NodeTypeOptions, "style");
+            processComputable(nodeType as NodeTypeOptions, "classes");
             processComputable(nodeType as NodeTypeOptions, "draggable");
             setDefault(nodeType, "draggable", false);
             processComputable(nodeType as NodeTypeOptions, "shape");
@@ -286,10 +442,10 @@ export function createBoard<T extends BoardOptions>(
             processComputable(nodeType as NodeTypeOptions, "actionDistance");
             setDefault(nodeType, "actionDistance", Math.PI / 6);
             nodeType.nodes = computed(() =>
-                processedBoard.state.value.nodes.filter(node => node.type === type)
+                unref(processedBoard.state).nodes.filter(node => node.type === type)
             );
             setDefault(nodeType, "onClick", function (node: BoardNode) {
-                processedBoard.state.value.selectedNode = node.id;
+                unref(processedBoard.state).selectedNode = node.id;
             });
 
             if (nodeType.actions) {
@@ -299,11 +455,92 @@ export function createBoard<T extends BoardOptions>(
                     processComputable(action, "icon");
                     processComputable(action, "fillColor");
                     processComputable(action, "tooltip");
+                    processComputable(action, "confirmationLabel");
+                    setDefault(action, "confirmationLabel", { text: "Tap again to confirm" });
                     processComputable(action, "links");
                 }
             }
         }
 
+        function setDraggingNode(node: BoardNode | null) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            board.draggingNode!.value = node;
+        }
+        function setReceivingNode(node: BoardNode | null) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            board.receivingNode!.value = node;
+        }
+
+        board.placeInAvailableSpace = function (
+            node: BoardNode,
+            radius = 100,
+            direction = Direction.Right
+        ) {
+            const nodes = processedBoard.nodes.value
+                .slice()
+                .filter(n => {
+                    // Exclude self
+                    if (n === node) {
+                        return false;
+                    }
+
+                    // Exclude nodes that aren't within the corridor we'll be moving within
+                    if (
+                        (direction === Direction.Down || direction === Direction.Up) &&
+                        Math.abs(n.position.x - node.position.x) > radius
+                    ) {
+                        return false;
+                    }
+                    if (
+                        (direction === Direction.Left || direction === Direction.Right) &&
+                        Math.abs(n.position.y - node.position.y) > radius
+                    ) {
+                        return false;
+                    }
+
+                    // Exclude nodes in the wrong direction
+                    return !(
+                        (direction === Direction.Right &&
+                            n.position.x < node.position.x - radius) ||
+                        (direction === Direction.Left && n.position.x > node.position.x + radius) ||
+                        (direction === Direction.Up && n.position.y > node.position.y + radius) ||
+                        (direction === Direction.Down && n.position.y < node.position.y - radius)
+                    );
+                })
+                .sort(
+                    direction === Direction.Right
+                        ? (a, b) => a.position.x - b.position.x
+                        : direction === Direction.Left
+                        ? (a, b) => b.position.x - a.position.x
+                        : direction === Direction.Up
+                        ? (a, b) => b.position.y - a.position.y
+                        : (a, b) => a.position.y - b.position.y
+                );
+            for (let i = 0; i < nodes.length; i++) {
+                const nodeToCheck = nodes[i];
+                const distance =
+                    direction === Direction.Right || direction === Direction.Left
+                        ? Math.abs(node.position.x - nodeToCheck.position.x)
+                        : Math.abs(node.position.y - nodeToCheck.position.y);
+
+                // If we're too close to this node, move further
+                if (distance < radius) {
+                    if (direction === Direction.Right) {
+                        node.position.x = nodeToCheck.position.x + radius;
+                    } else if (direction === Direction.Left) {
+                        node.position.x = nodeToCheck.position.x - radius;
+                    } else if (direction === Direction.Up) {
+                        node.position.y = nodeToCheck.position.y - radius;
+                    } else if (direction === Direction.Down) {
+                        node.position.y = nodeToCheck.position.y + radius;
+                    }
+                } else if (i > 0 && distance > radius) {
+                    // If we're further from this node than the radius, then the nodes are past us and we can early exit
+                    break;
+                }
+            }
+        };
+
         board[GatherProps] = function (this: GenericBoard) {
             const {
                 nodes,
@@ -317,7 +554,9 @@ export function createBoard<T extends BoardOptions>(
                 links,
                 selectedAction,
                 selectedNode,
-                mousePosition
+                mousePosition,
+                draggingNode,
+                receivingNode
             } = this;
             return {
                 nodes,
@@ -331,7 +570,11 @@ export function createBoard<T extends BoardOptions>(
                 links,
                 selectedAction,
                 selectedNode,
-                mousePosition
+                mousePosition,
+                draggingNode,
+                receivingNode,
+                setDraggingNode,
+                setReceivingNode
             };
         };
 
@@ -341,10 +584,25 @@ export function createBoard<T extends BoardOptions>(
     });
 }
 
-export function getNodeProperty<T>(property: NodeComputable<T>, node: BoardNode): T {
-    return isFunction<T, [BoardNode], Computable<T>>(property) ? property(node) : unref(property);
+/**
+ * Gets the value of a property for a specified node.
+ * @param property The property to find the value of
+ * @param node The node to get the property of
+ */
+export function getNodeProperty<T, S extends unknown[]>(
+    property: NodeComputable<T, S>,
+    node: BoardNode,
+    ...args: S
+): T {
+    return isFunction<T, [BoardNode, ...S], Computable<T>>(property)
+        ? property(node, ...args)
+        : unref(property);
 }
 
+/**
+ * Utility to get an ID for a node that is guaranteed unique.
+ * @param board The board feature to generate an ID for
+ */
 export function getUniqueNodeID(board: GenericBoard): number {
     let id = 0;
     board.nodes.value.forEach(node => {
diff --git a/src/features/buyable.tsx b/src/features/buyable.tsx
deleted file mode 100644
index c2f9972..0000000
--- a/src/features/buyable.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-import ClickableComponent from "features/clickables/Clickable.vue";
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
-import { Component, GatherProps, getUniqueID, jsx, setDefault, Visibility } from "features/feature";
-import type { Resource } from "features/resources/resource";
-import type { Persistent } from "game/persistence";
-import { persistent } from "game/persistence";
-import type { DecimalSource } from "util/bignum";
-import Decimal, { format, formatWhole } from "util/bignum";
-import type {
-    Computable,
-    GetComputableType,
-    GetComputableTypeWithDefault,
-    ProcessedComputable
-} from "util/computed";
-import { processComputable } from "util/computed";
-import { createLazyProxy } from "util/proxies";
-import { coerceComponent, isCoercableComponent } from "util/vue";
-import type { Ref } from "vue";
-import { computed, unref } from "vue";
-
-export const BuyableType = Symbol("Buyable");
-
-export type BuyableDisplay =
-    | CoercableComponent
-    | {
-          title?: CoercableComponent;
-          description?: CoercableComponent;
-          effectDisplay?: CoercableComponent;
-          showAmount?: boolean;
-      };
-
-export interface BuyableOptions {
-    visibility?: Computable<Visibility>;
-    cost?: Computable<DecimalSource>;
-    resource?: Resource;
-    canPurchase?: Computable<boolean>;
-    purchaseLimit?: Computable<DecimalSource>;
-    classes?: Computable<Record<string, boolean>>;
-    style?: Computable<StyleValue>;
-    mark?: Computable<boolean | string>;
-    small?: Computable<boolean>;
-    display?: Computable<BuyableDisplay>;
-    onPurchase?: (cost: DecimalSource | undefined) => void;
-}
-
-export interface BaseBuyable {
-    id: string;
-    amount: Persistent<DecimalSource>;
-    maxed: Ref<boolean>;
-    canAfford: Ref<boolean>;
-    canClick: ProcessedComputable<boolean>;
-    onClick: VoidFunction;
-    purchase: VoidFunction;
-    type: typeof BuyableType;
-    [Component]: typeof ClickableComponent;
-    [GatherProps]: () => Record<string, unknown>;
-}
-
-export type Buyable<T extends BuyableOptions> = Replace<
-    T & BaseBuyable,
-    {
-        visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
-        cost: GetComputableType<T["cost"]>;
-        resource: GetComputableType<T["resource"]>;
-        canPurchase: GetComputableTypeWithDefault<T["canPurchase"], Ref<boolean>>;
-        purchaseLimit: GetComputableTypeWithDefault<T["purchaseLimit"], Decimal>;
-        classes: GetComputableType<T["classes"]>;
-        style: GetComputableType<T["style"]>;
-        mark: GetComputableType<T["mark"]>;
-        small: GetComputableType<T["small"]>;
-        display: Ref<CoercableComponent>;
-    }
->;
-
-export type GenericBuyable = Replace<
-    Buyable<BuyableOptions>,
-    {
-        visibility: ProcessedComputable<Visibility>;
-        canPurchase: ProcessedComputable<boolean>;
-        purchaseLimit: ProcessedComputable<DecimalSource>;
-    }
->;
-
-export function createBuyable<T extends BuyableOptions>(
-    optionsFunc: OptionsFunc<T, BaseBuyable, GenericBuyable>
-): Buyable<T> {
-    const amount = persistent<DecimalSource>(0);
-    return createLazyProxy(() => {
-        const buyable = optionsFunc();
-
-        if (buyable.canPurchase == null && (buyable.resource == null || buyable.cost == null)) {
-            console.warn(
-                "Cannot create buyable without a canPurchase property or a resource and cost property",
-                buyable
-            );
-            throw "Cannot create buyable without a canPurchase property or a resource and cost property";
-        }
-
-        buyable.id = getUniqueID("buyable-");
-        buyable.type = BuyableType;
-        buyable[Component] = ClickableComponent;
-
-        buyable.amount = amount;
-        buyable.canAfford = computed(() => {
-            const genericBuyable = buyable as GenericBuyable;
-            const cost = unref(genericBuyable.cost);
-            return (
-                genericBuyable.resource != null &&
-                cost != null &&
-                Decimal.gte(genericBuyable.resource.value, cost)
-            );
-        });
-        if (buyable.canPurchase == null) {
-            buyable.canPurchase = computed(
-                () =>
-                    unref((buyable as GenericBuyable).visibility) === Visibility.Visible &&
-                    unref((buyable as GenericBuyable).canAfford) &&
-                    Decimal.lt(
-                        (buyable as GenericBuyable).amount.value,
-                        unref((buyable as GenericBuyable).purchaseLimit)
-                    )
-            );
-        }
-        buyable.maxed = computed(() =>
-            Decimal.gte(
-                (buyable as GenericBuyable).amount.value,
-                unref((buyable as GenericBuyable).purchaseLimit)
-            )
-        );
-        processComputable(buyable as T, "classes");
-        const classes = buyable.classes as ProcessedComputable<Record<string, boolean>> | undefined;
-        buyable.classes = computed(() => {
-            const currClasses = unref(classes) || {};
-            if ((buyable as GenericBuyable).maxed.value) {
-                currClasses.bought = true;
-            }
-            return currClasses;
-        });
-        processComputable(buyable as T, "canPurchase");
-        buyable.canClick = buyable.canPurchase as ProcessedComputable<boolean>;
-        buyable.onClick = buyable.purchase =
-            buyable.onClick ??
-            buyable.purchase ??
-            function (this: GenericBuyable) {
-                const genericBuyable = buyable as GenericBuyable;
-                if (!unref(genericBuyable.canPurchase)) {
-                    return;
-                }
-                const cost = unref(genericBuyable.cost);
-                if (genericBuyable.cost != null && genericBuyable.resource != null) {
-                    genericBuyable.resource.value = Decimal.sub(
-                        genericBuyable.resource.value,
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        cost!
-                    );
-                    genericBuyable.amount.value = Decimal.add(genericBuyable.amount.value, 1);
-                }
-                genericBuyable.onPurchase?.(cost);
-            };
-        processComputable(buyable as T, "display");
-        const display = buyable.display;
-        buyable.display = jsx(() => {
-            // TODO once processComputable types correctly, remove this "as X"
-            const currDisplay = unref(display) as BuyableDisplay;
-            if (isCoercableComponent(currDisplay)) {
-                const CurrDisplay = coerceComponent(currDisplay);
-                return <CurrDisplay />;
-            }
-            if (currDisplay != null && buyable.cost != null && buyable.resource != null) {
-                const genericBuyable = buyable as GenericBuyable;
-                const Title = coerceComponent(currDisplay.title || "", "h3");
-                const Description = coerceComponent(currDisplay.description || "");
-                const EffectDisplay = coerceComponent(currDisplay.effectDisplay || "");
-
-                return (
-                    <span>
-                        {currDisplay.title ? (
-                            <div>
-                                <Title />
-                            </div>
-                        ) : null}
-                        {currDisplay.description ? <Description /> : null}
-                        {currDisplay.showAmount === false ? null : (
-                            <div>
-                                <br />
-                                {unref(genericBuyable.purchaseLimit) === Decimal.dInf ? (
-                                    <>Amount: {formatWhole(genericBuyable.amount.value)}</>
-                                ) : (
-                                    <>
-                                        Amount: {formatWhole(genericBuyable.amount.value)} /{" "}
-                                        {formatWhole(unref(genericBuyable.purchaseLimit))}
-                                    </>
-                                )}
-                            </div>
-                        )}
-                        {currDisplay.effectDisplay ? (
-                            <div>
-                                <br />
-                                Currently: <EffectDisplay />
-                            </div>
-                        ) : null}
-                        {genericBuyable.cost && !genericBuyable.maxed.value ? (
-                            <div>
-                                <br />
-                                Cost: {format(unref(genericBuyable.cost) || 0)}{" "}
-                                {buyable.resource.displayName}
-                            </div>
-                        ) : null}
-                    </span>
-                );
-            }
-            return "";
-        });
-
-        processComputable(buyable as T, "visibility");
-        setDefault(buyable, "visibility", Visibility.Visible);
-        processComputable(buyable as T, "cost");
-        processComputable(buyable as T, "resource");
-        processComputable(buyable as T, "purchaseLimit");
-        setDefault(buyable, "purchaseLimit", Decimal.dInf);
-        processComputable(buyable as T, "style");
-        processComputable(buyable as T, "mark");
-        processComputable(buyable as T, "small");
-
-        buyable[GatherProps] = function (this: GenericBuyable) {
-            const { display, visibility, style, classes, onClick, canClick, small, mark, id } =
-                this;
-            return {
-                display,
-                visibility,
-                style: unref(style),
-                classes,
-                onClick,
-                canClick,
-                small,
-                mark,
-                id
-            };
-        };
-
-        return buyable as unknown as Buyable<T>;
-    });
-}
diff --git a/src/features/challenges/Challenge.vue b/src/features/challenges/Challenge.vue
index e387c18..194173c 100644
--- a/src/features/challenges/Challenge.vue
+++ b/src/features/challenges/Challenge.vue
@@ -1,9 +1,9 @@
 <template>
     <div
-        v-if="unref(visibility) !== Visibility.None"
+        v-if="isVisible(visibility)"
         :style="[
             {
-                visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
+                visibility: isHidden(visibility) ? 'hidden' : undefined
             },
             notifyStyle,
             unref(style) ?? {}
@@ -36,8 +36,9 @@ import MarkNode from "components/MarkNode.vue";
 import Node from "components/Node.vue";
 import type { GenericChallenge } from "features/challenges/challenge";
 import type { StyleValue } from "features/feature";
-import { jsx, Visibility } from "features/feature";
+import { isHidden, isVisible, jsx, Visibility } from "features/feature";
 import { getHighNotifyStyle, getNotifyStyle } from "game/notifications";
+import { displayRequirements, Requirements } from "game/requirements";
 import { coerceComponent, isCoercableComponent, processedPropType, unwrapRef } from "util/vue";
 import type { Component, PropType, UnwrapRef } from "vue";
 import { computed, defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
@@ -61,8 +62,9 @@ export default defineComponent({
             Object,
             Function
         ),
+        requirements: processedPropType<Requirements>(Object, Array),
         visibility: {
-            type: processedPropType<Visibility>(Number),
+            type: processedPropType<Visibility | boolean>(Number, Boolean),
             required: true
         },
         style: processedPropType<StyleValue>(String, Object, Array),
@@ -90,7 +92,7 @@ export default defineComponent({
         Node
     },
     setup(props) {
-        const { active, maxed, canComplete, display } = toRefs(props);
+        const { active, maxed, canComplete, display, requirements } = toRefs(props);
 
         const buttonText = computed(() => {
             if (active.value) {
@@ -128,31 +130,29 @@ export default defineComponent({
             }
             const Title = coerceComponent(currDisplay.title || "", "h3");
             const Description = coerceComponent(currDisplay.description, "div");
-            const Goal = coerceComponent(currDisplay.goal || "");
+            const Goal = coerceComponent(currDisplay.goal != null ? currDisplay.goal : jsx(() => displayRequirements(unwrapRef(requirements) ?? [])), "h3");
             const Reward = coerceComponent(currDisplay.reward || "");
             const EffectDisplay = coerceComponent(currDisplay.effectDisplay || "");
             comp.value = coerceComponent(
                 jsx(() => (
                     <span>
-                        {currDisplay.title ? (
+                        {currDisplay.title != null ? (
                             <div>
                                 <Title />
                             </div>
                         ) : null}
                         <Description />
-                        {currDisplay.goal ? (
-                            <div>
-                                <br />
-                                Goal: <Goal />
-                            </div>
-                        ) : null}
-                        {currDisplay.reward ? (
+                        <div>
+                            <br />
+                            Goal: <Goal />
+                        </div>
+                        {currDisplay.reward != null ? (
                             <div>
                                 <br />
                                 Reward: <Reward />
                             </div>
                         ) : null}
-                        {currDisplay.effectDisplay ? (
+                        {currDisplay.effectDisplay != null ? (
                             <div>
                                 Currently: <EffectDisplay />
                             </div>
@@ -167,6 +167,8 @@ export default defineComponent({
             notifyStyle,
             comp,
             Visibility,
+            isVisible,
+            isHidden,
             unref
         };
     }
diff --git a/src/features/challenges/challenge.tsx b/src/features/challenges/challenge.tsx
index 469d34a..bba005b 100644
--- a/src/features/challenges/challenge.tsx
+++ b/src/features/challenges/challenge.tsx
@@ -1,13 +1,28 @@
 import { isArray } from "@vue/shared";
 import Toggle from "components/fields/Toggle.vue";
 import ChallengeComponent from "features/challenges/Challenge.vue";
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
-import { Component, GatherProps, getUniqueID, jsx, setDefault, Visibility } from "features/feature";
+import { GenericDecorator } from "features/decorators/common";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
+import {
+    Component,
+    GatherProps,
+    Visibility,
+    getUniqueID,
+    isVisible,
+    jsx,
+    setDefault
+} from "features/feature";
 import type { GenericReset } from "features/reset";
-import type { Resource } from "features/resources/resource";
 import { globalBus } from "game/events";
 import type { Persistent } from "game/persistence";
 import { persistent } from "game/persistence";
+import { Requirements, maxRequirementsMet } from "game/requirements";
 import settings, { registerSettingField } from "game/settings";
 import type { DecimalSource } from "util/bignum";
 import Decimal from "util/bignum";
@@ -22,98 +37,139 @@ import { createLazyProxy } from "util/proxies";
 import type { Ref, WatchStopHandle } from "vue";
 import { computed, unref, watch } from "vue";
 
-export const ChallengeType = Symbol("ChallengeType");
+/** A symbol used to identify {@link Challenge} features. */
+export const ChallengeType = Symbol("Challenge");
 
+/**
+ * An object that configures a {@link Challenge}.
+ */
 export interface ChallengeOptions {
-    visibility?: Computable<Visibility>;
+    /** Whether this challenge should be visible. */
+    visibility?: Computable<Visibility | boolean>;
+    /** Whether this challenge can be started. */
     canStart?: Computable<boolean>;
+    /** The reset function for this challenge. */
     reset?: GenericReset;
-    canComplete?: Computable<boolean | DecimalSource>;
+    /** The requirement(s) to complete this challenge. */
+    requirements: Requirements;
+    /** The maximum number of times the challenge can be completed. */
     completionLimit?: Computable<DecimalSource>;
+    /** Shows a marker on the corner of the feature. */
     mark?: Computable<boolean | string>;
-    resource?: Resource;
-    goal?: Computable<DecimalSource>;
+    /** Dictionary of CSS classes to apply to this feature. */
     classes?: Computable<Record<string, boolean>>;
+    /** CSS to apply to this feature. */
     style?: Computable<StyleValue>;
+    /** The display to use for this challenge. */
     display?: Computable<
         | CoercableComponent
         | {
+              /** A header to appear at the top of the display. */
               title?: CoercableComponent;
+              /** The main text that appears in the display. */
               description: CoercableComponent;
+              /** A description of the current goal for this challenge. If unspecified then the requirements will be displayed automatically based on {@link requirements}.  */
               goal?: CoercableComponent;
+              /** A description of what will change upon completing this challenge. */
               reward?: CoercableComponent;
+              /** A description of the current effect of this challenge. */
               effectDisplay?: CoercableComponent;
           }
     >;
+    /** A function that is called when the challenge is completed. */
     onComplete?: VoidFunction;
+    /** A function that is called when the challenge is exited. */
     onExit?: VoidFunction;
+    /** A function that is called when the challenge is entered. */
     onEnter?: VoidFunction;
 }
 
+/**
+ * The properties that are added onto a processed {@link ChallengeOptions} to create a {@link Challenge}.
+ */
 export interface BaseChallenge {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
     id: string;
+    /** The current amount of times this challenge can be completed. */
+    canComplete: Ref<DecimalSource>;
+    /** The current number of times this challenge has been completed. */
     completions: Persistent<DecimalSource>;
+    /** Whether or not this challenge has been completed. */
     completed: Ref<boolean>;
+    /** Whether or not this challenge's completion count is at its limit. */
     maxed: Ref<boolean>;
+    /** Whether or not this challenge is currently active. */
     active: Persistent<boolean>;
+    /** A function to enter or leave the challenge. */
     toggle: VoidFunction;
+    /**
+     * A function to complete this challenge.
+     * @param remainInChallenge - Optional parameter to specify if the challenge should remain active after completion.
+     */
     complete: (remainInChallenge?: boolean) => void;
+    /** A symbol that helps identify features of the same type. */
     type: typeof ChallengeType;
-    [Component]: typeof ChallengeComponent;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
 
+/** An object that represents a feature that can be entered and exited, and have one or more completions with scaling requirements. */
 export type Challenge<T extends ChallengeOptions> = Replace<
     T & BaseChallenge,
     {
         visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
         canStart: GetComputableTypeWithDefault<T["canStart"], true>;
-        canComplete: GetComputableTypeWithDefault<T["canComplete"], Ref<boolean>>;
+        requirements: GetComputableType<T["requirements"]>;
         completionLimit: GetComputableTypeWithDefault<T["completionLimit"], 1>;
         mark: GetComputableTypeWithDefault<T["mark"], Ref<boolean>>;
-        goal: GetComputableType<T["goal"]>;
         classes: GetComputableType<T["classes"]>;
         style: GetComputableType<T["style"]>;
         display: GetComputableType<T["display"]>;
     }
 >;
 
+/** A type that matches any valid {@link Challenge} object. */
 export type GenericChallenge = Replace<
     Challenge<ChallengeOptions>,
     {
-        visibility: ProcessedComputable<Visibility>;
+        visibility: ProcessedComputable<Visibility | boolean>;
         canStart: ProcessedComputable<boolean>;
-        canComplete: ProcessedComputable<boolean | DecimalSource>;
         completionLimit: ProcessedComputable<DecimalSource>;
         mark: ProcessedComputable<boolean>;
     }
 >;
 
+/**
+ * Lazily creates a challenge with the given options.
+ * @param optionsFunc Challenge options.
+ */
 export function createChallenge<T extends ChallengeOptions>(
-    optionsFunc: OptionsFunc<T, BaseChallenge, GenericChallenge>
+    optionsFunc: OptionsFunc<T, BaseChallenge, GenericChallenge>,
+    ...decorators: GenericDecorator[]
 ): Challenge<T> {
     const completions = persistent(0);
-    const active = persistent(false);
-    return createLazyProxy(() => {
-        const challenge = optionsFunc();
-
-        if (
-            challenge.canComplete == null &&
-            (challenge.resource == null || challenge.goal == null)
-        ) {
-            console.warn(
-                "Cannot create challenge without a canComplete property or a resource and goal property",
-                challenge
-            );
-            throw "Cannot create challenge without a canComplete property or a resource and goal property";
-        }
+    const active = persistent(false, false);
+    const decoratedData = decorators.reduce(
+        (current, next) => Object.assign(current, next.getPersistentData?.()),
+        {}
+    );
+    return createLazyProxy(feature => {
+        const challenge = optionsFunc.call(feature, feature);
 
         challenge.id = getUniqueID("challenge-");
         challenge.type = ChallengeType;
-        challenge[Component] = ChallengeComponent;
+        challenge[Component] = ChallengeComponent as GenericComponent;
+
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(challenge);
+        }
 
         challenge.completions = completions;
         challenge.active = active;
+        Object.assign(challenge, decoratedData);
+
         challenge.completed = computed(() =>
             Decimal.gt((challenge as GenericChallenge).completions.value, 0)
         );
@@ -126,11 +182,11 @@ export function createChallenge<T extends ChallengeOptions>(
         challenge.toggle = function () {
             const genericChallenge = challenge as GenericChallenge;
             if (genericChallenge.active.value) {
-                if (unref(genericChallenge.canComplete) && !genericChallenge.maxed.value) {
-                    let completions: boolean | DecimalSource = unref(genericChallenge.canComplete);
-                    if (typeof completions === "boolean") {
-                        completions = 1;
-                    }
+                if (
+                    Decimal.gt(unref(genericChallenge.canComplete), 0) &&
+                    !genericChallenge.maxed.value
+                ) {
+                    const completions = unref(genericChallenge.canComplete);
                     genericChallenge.completions.value = Decimal.min(
                         Decimal.add(genericChallenge.completions.value, completions),
                         unref(genericChallenge.completionLimit)
@@ -142,7 +198,7 @@ export function createChallenge<T extends ChallengeOptions>(
                 genericChallenge.reset?.reset();
             } else if (
                 unref(genericChallenge.canStart) &&
-                unref(genericChallenge.visibility) === Visibility.Visible &&
+                isVisible(genericChallenge.visibility) &&
                 !genericChallenge.maxed.value
             ) {
                 genericChallenge.reset?.reset();
@@ -150,18 +206,17 @@ export function createChallenge<T extends ChallengeOptions>(
                 genericChallenge.onEnter?.();
             }
         };
+        challenge.canComplete = computed(() =>
+            maxRequirementsMet((challenge as GenericChallenge).requirements)
+        );
         challenge.complete = function (remainInChallenge?: boolean) {
             const genericChallenge = challenge as GenericChallenge;
-            let completions: boolean | DecimalSource = unref(genericChallenge.canComplete);
+            const completions = unref(genericChallenge.canComplete);
             if (
                 genericChallenge.active.value &&
-                completions !== false &&
-                (completions === true || Decimal.neq(0, completions)) &&
+                Decimal.gt(completions, 0) &&
                 !genericChallenge.maxed.value
             ) {
-                if (typeof completions === "boolean") {
-                    completions = 1;
-                }
                 genericChallenge.completions.value = Decimal.min(
                     Decimal.add(genericChallenge.completions.value, completions),
                     unref(genericChallenge.completionLimit)
@@ -176,26 +231,13 @@ export function createChallenge<T extends ChallengeOptions>(
         };
         processComputable(challenge as T, "visibility");
         setDefault(challenge, "visibility", Visibility.Visible);
-        const visibility = challenge.visibility as ProcessedComputable<Visibility>;
+        const visibility = challenge.visibility as ProcessedComputable<Visibility | boolean>;
         challenge.visibility = computed(() => {
             if (settings.hideChallenges === true && unref(challenge.maxed)) {
                 return Visibility.None;
             }
             return unref(visibility);
         });
-        if (challenge.canComplete == null) {
-            challenge.canComplete = computed(() => {
-                const genericChallenge = challenge as GenericChallenge;
-                if (
-                    !genericChallenge.active.value ||
-                    genericChallenge.resource == null ||
-                    genericChallenge.goal == null
-                ) {
-                    return false;
-                }
-                return Decimal.gte(genericChallenge.resource.value, unref(genericChallenge.goal));
-            });
-        }
         if (challenge.mark == null) {
             challenge.mark = computed(
                 () =>
@@ -206,11 +248,9 @@ export function createChallenge<T extends ChallengeOptions>(
 
         processComputable(challenge as T, "canStart");
         setDefault(challenge, "canStart", true);
-        processComputable(challenge as T, "canComplete");
         processComputable(challenge as T, "completionLimit");
         setDefault(challenge, "completionLimit", 1);
         processComputable(challenge as T, "mark");
-        processComputable(challenge as T, "goal");
         processComputable(challenge as T, "classes");
         processComputable(challenge as T, "style");
         processComputable(challenge as T, "display");
@@ -223,6 +263,14 @@ export function createChallenge<T extends ChallengeOptions>(
             });
         }
 
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(challenge);
+        }
+
+        const decoratedProps = decorators.reduce(
+            (current, next) => Object.assign(current, next.getGatheredProps?.(challenge)),
+            {}
+        );
         challenge[GatherProps] = function (this: GenericChallenge) {
             const {
                 active,
@@ -236,7 +284,8 @@ export function createChallenge<T extends ChallengeOptions>(
                 canStart,
                 mark,
                 id,
-                toggle
+                toggle,
+                requirements
             } = this;
             return {
                 active,
@@ -250,7 +299,9 @@ export function createChallenge<T extends ChallengeOptions>(
                 canStart,
                 mark,
                 id,
-                toggle
+                toggle,
+                requirements,
+                ...decoratedProps
             };
         };
 
@@ -258,32 +309,49 @@ export function createChallenge<T extends ChallengeOptions>(
     });
 }
 
+/**
+ * This will automatically complete a challenge when it's requirements are met.
+ * @param challenge The challenge to auto-complete
+ * @param autoActive Whether or not auto-completing should currently occur
+ * @param exitOnComplete Whether or not to exit the challenge after auto-completion
+ */
 export function setupAutoComplete(
     challenge: GenericChallenge,
     autoActive: Computable<boolean> = true,
     exitOnComplete = true
 ): WatchStopHandle {
     const isActive = typeof autoActive === "function" ? computed(autoActive) : autoActive;
-    return watch([challenge.canComplete, isActive], ([canComplete, isActive]) => {
-        if (canComplete && isActive) {
-            challenge.complete(!exitOnComplete);
+    return watch(
+        [challenge.canComplete as Ref<DecimalSource>, isActive as Ref<boolean>],
+        ([canComplete, isActive]) => {
+            if (Decimal.gt(canComplete, 0) && isActive) {
+                challenge.complete(!exitOnComplete);
+            }
         }
-    });
+    );
 }
 
+/**
+ * Utility for taking an array of challenges where only one may be active at a time, and giving a ref to the one currently active (or null if none are active)
+ * @param challenges The list of challenges that are mutually exclusive
+ */
 export function createActiveChallenge(
     challenges: GenericChallenge[]
-): Ref<GenericChallenge | undefined> {
-    return computed(() => challenges.find(challenge => challenge.active.value));
+): Ref<GenericChallenge | null> {
+    return computed(() => challenges.find(challenge => challenge.active.value) ?? null);
 }
 
+/**
+ * Utility for reporting if any challenge in a list is currently active. Intended for preventing entering a challenge if another is already active.
+ * @param challenges List of challenges that are mutually exclusive
+ */
 export function isAnyChallengeActive(
-    challenges: GenericChallenge[] | Ref<GenericChallenge | undefined>
+    challenges: GenericChallenge[] | Ref<GenericChallenge | null>
 ): Ref<boolean> {
     if (isArray(challenges)) {
         challenges = createActiveChallenge(challenges);
     }
-    return computed(() => (challenges as Ref<GenericChallenge | undefined>).value != null);
+    return computed(() => (challenges as Ref<GenericChallenge | null>).value != null);
 }
 
 declare module "game/settings" {
@@ -299,7 +367,12 @@ globalBus.on("loadSettings", settings => {
 registerSettingField(
     jsx(() => (
         <Toggle
-            title="Hide Maxed Challenges"
+            title={jsx(() => (
+                <span class="option-title">
+                    Hide maxed challenges
+                    <desc>Hide challenges that have been fully completed.</desc>
+                </span>
+            ))}
             onUpdate:modelValue={value => (settings.hideChallenges = value)}
             modelValue={settings.hideChallenges}
         />
diff --git a/src/features/clickables/Clickable.vue b/src/features/clickables/Clickable.vue
index 970b2f0..ac001a2 100644
--- a/src/features/clickables/Clickable.vue
+++ b/src/features/clickables/Clickable.vue
@@ -1,8 +1,8 @@
 <template>
     <button
-        v-if="unref(visibility) !== Visibility.None"
+        v-if="isVisible(visibility)"
         :style="[
-            { visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined },
+            { visibility: isHidden(visibility) ? 'hidden' : undefined },
             unref(style) ?? []
         ]"
         @click="onClick"
@@ -33,7 +33,7 @@ import MarkNode from "components/MarkNode.vue";
 import Node from "components/Node.vue";
 import type { GenericClickable } from "features/clickables/clickable";
 import type { StyleValue } from "features/feature";
-import { jsx, Visibility } from "features/feature";
+import { isHidden, isVisible, jsx, Visibility } from "features/feature";
 import {
     coerceComponent,
     isCoercableComponent,
@@ -55,7 +55,7 @@ export default defineComponent({
             required: true
         },
         visibility: {
-            type: processedPropType<Visibility>(Number),
+            type: processedPropType<Visibility | boolean>(Number, Boolean),
             required: true
         },
         style: processedPropType<StyleValue>(Object, String, Array),
@@ -92,12 +92,12 @@ export default defineComponent({
                 comp.value = coerceComponent(currDisplay);
                 return;
             }
-            const Title = coerceComponent(currDisplay.title || "", "h3");
+            const Title = coerceComponent(currDisplay.title ?? "", "h3");
             const Description = coerceComponent(currDisplay.description, "div");
             comp.value = coerceComponent(
                 jsx(() => (
                     <span>
-                        {currDisplay.title ? (
+                        {currDisplay.title != null ? (
                             <div>
                                 <Title />
                             </div>
@@ -115,6 +115,8 @@ export default defineComponent({
             stop,
             comp,
             Visibility,
+            isVisible,
+            isHidden,
             unref
         };
     }
diff --git a/src/features/clickables/clickable.ts b/src/features/clickables/clickable.ts
index b3eb7f3..cfd578e 100644
--- a/src/features/clickables/clickable.ts
+++ b/src/features/clickables/clickable.ts
@@ -1,6 +1,13 @@
 import ClickableComponent from "features/clickables/Clickable.vue";
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
-import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
+import { GenericDecorator } from "features/decorators/common";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
+import { Component, GatherProps, Visibility, getUniqueID, setDefault } from "features/feature";
 import type { BaseLayer } from "game/layers";
 import type { Unsubscribe } from "nanoevents";
 import type {
@@ -13,33 +20,56 @@ import { processComputable } from "util/computed";
 import { createLazyProxy } from "util/proxies";
 import { computed, unref } from "vue";
 
+/** A symbol used to identify {@link Clickable} features. */
 export const ClickableType = Symbol("Clickable");
 
+/**
+ * An object that configures a {@link Clickable}.
+ */
 export interface ClickableOptions {
-    visibility?: Computable<Visibility>;
+    /** Whether this clickable should be visible. */
+    visibility?: Computable<Visibility | boolean>;
+    /** Whether or not the clickable may be clicked. */
     canClick?: Computable<boolean>;
+    /** Dictionary of CSS classes to apply to this feature. */
     classes?: Computable<Record<string, boolean>>;
+    /** CSS to apply to this feature. */
     style?: Computable<StyleValue>;
+    /** Shows a marker on the corner of the feature. */
     mark?: Computable<boolean | string>;
+    /** The display to use for this clickable. */
     display?: Computable<
         | CoercableComponent
         | {
+              /** A header to appear at the top of the display. */
               title?: CoercableComponent;
+              /** The main text that appears in the display. */
               description: CoercableComponent;
           }
     >;
+    /** Toggles a smaller design for the feature. */
     small?: boolean;
+    /** A function that is called when the clickable is clicked. */
     onClick?: (e?: MouseEvent | TouchEvent) => void;
+    /** A function that is called when the clickable is held down. */
     onHold?: VoidFunction;
 }
 
+/**
+ * The properties that are added onto a processed {@link ClickableOptions} to create an {@link Clickable}.
+ */
 export interface BaseClickable {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
     id: string;
+    /** A symbol that helps identify features of the same type. */
     type: typeof ClickableType;
-    [Component]: typeof ClickableComponent;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
 
+/** An object that represents a feature that can be clicked or held down. */
 export type Clickable<T extends ClickableOptions> = Replace<
     T & BaseClickable,
     {
@@ -52,22 +82,40 @@ export type Clickable<T extends ClickableOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link Clickable} object. */
 export type GenericClickable = Replace<
     Clickable<ClickableOptions>,
     {
-        visibility: ProcessedComputable<Visibility>;
+        visibility: ProcessedComputable<Visibility | boolean>;
         canClick: ProcessedComputable<boolean>;
     }
 >;
 
+/**
+ * Lazily creates a clickable with the given options.
+ * @param optionsFunc Clickable options.
+ */
 export function createClickable<T extends ClickableOptions>(
-    optionsFunc?: OptionsFunc<T, BaseClickable, GenericClickable>
+    optionsFunc?: OptionsFunc<T, BaseClickable, GenericClickable>,
+    ...decorators: GenericDecorator[]
 ): Clickable<T> {
-    return createLazyProxy(() => {
-        const clickable = optionsFunc?.() ?? ({} as ReturnType<NonNullable<typeof optionsFunc>>);
+    const decoratedData = decorators.reduce(
+        (current, next) => Object.assign(current, next.getPersistentData?.()),
+        {}
+    );
+    return createLazyProxy(feature => {
+        const clickable =
+            optionsFunc?.call(feature, feature) ??
+            ({} as ReturnType<NonNullable<typeof optionsFunc>>);
         clickable.id = getUniqueID("clickable-");
         clickable.type = ClickableType;
-        clickable[Component] = ClickableComponent;
+        clickable[Component] = ClickableComponent as GenericComponent;
+
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(clickable);
+        }
+
+        Object.assign(clickable, decoratedData);
 
         processComputable(clickable as T, "visibility");
         setDefault(clickable, "visibility", Visibility.Visible);
@@ -81,7 +129,7 @@ export function createClickable<T extends ClickableOptions>(
         if (clickable.onClick) {
             const onClick = clickable.onClick.bind(clickable);
             clickable.onClick = function (e) {
-                if (unref(clickable.canClick)) {
+                if (unref(clickable.canClick) !== false) {
                     onClick(e);
                 }
             };
@@ -89,12 +137,20 @@ export function createClickable<T extends ClickableOptions>(
         if (clickable.onHold) {
             const onHold = clickable.onHold.bind(clickable);
             clickable.onHold = function () {
-                if (unref(clickable.canClick)) {
+                if (unref(clickable.canClick) !== false) {
                     onHold();
                 }
             };
         }
 
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(clickable);
+        }
+
+        const decoratedProps = decorators.reduce(
+            (current, next) => Object.assign(current, next.getGatheredProps?.(clickable)),
+            {}
+        );
         clickable[GatherProps] = function (this: GenericClickable) {
             const {
                 display,
@@ -118,7 +174,8 @@ export function createClickable<T extends ClickableOptions>(
                 canClick,
                 small,
                 mark,
-                id
+                id,
+                ...decoratedProps
             };
         };
 
@@ -126,12 +183,19 @@ export function createClickable<T extends ClickableOptions>(
     });
 }
 
+/**
+ * Utility to auto click a clickable whenever it can be.
+ * @param layer The layer the clickable is apart of
+ * @param clickable The clicker to click automatically
+ * @param autoActive Whether or not the clickable should currently be auto-clicking
+ */
 export function setupAutoClick(
     layer: BaseLayer,
     clickable: GenericClickable,
     autoActive: Computable<boolean> = true
 ): Unsubscribe {
-    const isActive = typeof autoActive === "function" ? computed(autoActive) : autoActive;
+    const isActive: ProcessedComputable<boolean> =
+        typeof autoActive === "function" ? computed(autoActive) : autoActive;
     return layer.on("update", () => {
         if (unref(isActive) && unref(clickable.canClick)) {
             clickable.onClick?.();
diff --git a/src/features/conversion.ts b/src/features/conversion.ts
index d2a47d0..78ad7cd 100644
--- a/src/features/conversion.ts
+++ b/src/features/conversion.ts
@@ -1,23 +1,26 @@
-import type { OptionsFunc, Replace } from "features/feature";
+import type { CoercableComponent, OptionsFunc, Replace } from "features/feature";
 import { setDefault } from "features/feature";
 import type { Resource } from "features/resources/resource";
+import Formula from "game/formulas/formulas";
+import { InvertibleFormula, InvertibleIntegralFormula } from "game/formulas/types";
 import type { BaseLayer } from "game/layers";
-import type { Modifier } from "game/modifiers";
 import type { DecimalSource } from "util/bignum";
 import Decimal from "util/bignum";
-import type { WithRequired } from "util/common";
 import type { Computable, GetComputableTypeWithDefault, ProcessedComputable } from "util/computed";
 import { convertComputable, processComputable } from "util/computed";
 import { createLazyProxy } from "util/proxies";
 import type { Ref } from "vue";
 import { computed, unref } from "vue";
+import { GenericDecorator } from "./decorators/common";
+import { createBooleanRequirement } from "game/requirements";
 
 /** An object that configures a {@link Conversion}. */
 export interface ConversionOptions {
     /**
-     * The scaling function that is used to determine the rate of conversion from one {@link features/resources/resource.Resource} to the other.
+     * The formula used to determine how much {@link gainResource} should be earned by this converting.
+     * The passed value will be a Formula representing the {@link baseResource} variable.
      */
-    scaling: ScalingFunction;
+    formula: (variable: InvertibleIntegralFormula) => InvertibleFormula;
     /**
      * How much of the output resource the conversion can currently convert for.
      * Typically this will be set for you in a conversion constructor.
@@ -53,10 +56,6 @@ export interface ConversionOptions {
      * Defaults to true.
      */
     buyMax?: Computable<boolean>;
-    /**
-     * Whether or not to round up the cost to generate a given amount of the output resource.
-     */
-    roundUpCost?: Computable<boolean>;
     /**
      * The function that performs the actual conversion from {@link baseResource} to {@link gainResource}.
      * Typically this will be set for you in a conversion constructor.
@@ -73,20 +72,6 @@ export interface ConversionOptions {
      * This will not be called whenever using currentGain without calling convert (e.g. passive generation)
      */
     onConvert?: (amountGained: DecimalSource) => void;
-    /**
-     * An additional modifier that will be applied to the gain amounts.
-     * Must be reversible in order to correctly calculate {@link nextAt}.
-     * @see {@link game/modifiers.createSequentialModifier} if you want to apply multiple modifiers.
-     */
-    gainModifier?: WithRequired<Modifier, "revert">;
-    /**
-     * A modifier that will be applied to the cost amounts.
-     * That is to say, this modifier will be applied to the amount of baseResource before going into the scaling function.
-     * A cost modifier of x0.5 would give gain amounts equal to the player having half the baseResource they actually have.
-     * Must be reversible in order to correctly calculate {@link nextAt}.
-     * @see {@link game/modifiers.createSequentialModifier} if you want to apply multiple modifiers.
-     */
-    costModifier?: WithRequired<Modifier, "revert">;
 }
 
 /**
@@ -103,13 +88,13 @@ export interface BaseConversion {
 export type Conversion<T extends ConversionOptions> = Replace<
     T & BaseConversion,
     {
+        formula: InvertibleFormula;
         currentGain: GetComputableTypeWithDefault<T["currentGain"], Ref<DecimalSource>>;
         actualGain: GetComputableTypeWithDefault<T["actualGain"], Ref<DecimalSource>>;
         currentAt: GetComputableTypeWithDefault<T["currentAt"], Ref<DecimalSource>>;
         nextAt: GetComputableTypeWithDefault<T["nextAt"], Ref<DecimalSource>>;
         buyMax: GetComputableTypeWithDefault<T["buyMax"], true>;
         spend: undefined extends T["spend"] ? (amountGained: DecimalSource) => void : T["spend"];
-        roundUpCost: GetComputableTypeWithDefault<T["roundUpCost"], true>;
     }
 >;
 
@@ -123,7 +108,6 @@ export type GenericConversion = Replace<
         nextAt: ProcessedComputable<DecimalSource>;
         buyMax: ProcessedComputable<boolean>;
         spend: (amountGained: DecimalSource) => void;
-        roundUpCost: ProcessedComputable<boolean>;
     }
 >;
 
@@ -135,21 +119,27 @@ export type GenericConversion = Replace<
  * @see {@link createIndependentConversion}.
  */
 export function createConversion<T extends ConversionOptions>(
-    optionsFunc: OptionsFunc<T, BaseConversion, GenericConversion>
+    optionsFunc: OptionsFunc<T, BaseConversion, GenericConversion>,
+    ...decorators: GenericDecorator[]
 ): Conversion<T> {
-    return createLazyProxy(() => {
-        const conversion = optionsFunc();
+    return createLazyProxy(feature => {
+        const conversion = optionsFunc.call(feature, feature);
 
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(conversion);
+        }
+
+        (conversion as GenericConversion).formula = conversion.formula(
+            Formula.variable(conversion.baseResource)
+        );
         if (conversion.currentGain == null) {
             conversion.currentGain = computed(() => {
-                let gain = conversion.gainModifier
-                    ? conversion.gainModifier.apply(
-                          conversion.scaling.currentGain(conversion as GenericConversion)
-                      )
-                    : conversion.scaling.currentGain(conversion as GenericConversion);
-                gain = Decimal.floor(gain).max(0);
-
-                if (!unref(conversion.buyMax)) {
+                let gain = Decimal.floor(
+                    (conversion as GenericConversion).formula.evaluate(
+                        conversion.baseResource.value
+                    )
+                ).max(0);
+                if (unref(conversion.buyMax) === false) {
                     gain = gain.min(1);
                 }
                 return gain;
@@ -160,16 +150,16 @@ export function createConversion<T extends ConversionOptions>(
         }
         if (conversion.currentAt == null) {
             conversion.currentAt = computed(() => {
-                let current = conversion.scaling.currentAt(conversion as GenericConversion);
-                if (conversion.roundUpCost) current = Decimal.ceil(current);
-                return current;
+                return (conversion as GenericConversion).formula.invert(
+                    Decimal.floor(unref((conversion as GenericConversion).currentGain))
+                );
             });
         }
         if (conversion.nextAt == null) {
             conversion.nextAt = computed(() => {
-                let next = conversion.scaling.nextAt(conversion as GenericConversion);
-                if (conversion.roundUpCost) next = Decimal.ceil(next);
-                return next;
+                return (conversion as GenericConversion).formula.invert(
+                    Decimal.floor(unref((conversion as GenericConversion).currentGain)).add(1)
+                );
             });
         }
 
@@ -197,177 +187,15 @@ export function createConversion<T extends ConversionOptions>(
         processComputable(conversion as T, "nextAt");
         processComputable(conversion as T, "buyMax");
         setDefault(conversion, "buyMax", true);
-        processComputable(conversion as T, "roundUpCost");
-        setDefault(conversion, "roundUpCost", true);
+
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(conversion);
+        }
 
         return conversion as unknown as Conversion<T>;
     });
 }
 
-/**
- * A collection of functions that allow a conversion to scale the amount of resources gained based on the input resource.
- * This typically shouldn't be created directly. Instead use one of the scaling function constructors.
- * @see {@link createLinearScaling}.
- * @see {@link createPolynomialScaling}.
- */
-export interface ScalingFunction {
-    /**
-     * Calculates the amount of the output resource a conversion should be able to currently produce.
-     * This should be based off of `conversion.baseResource.value`.
-     * The conversion is responsible for applying the gainModifier, so this function should be un-modified.
-     * It does not need to be clamped or rounded.
-     */
-    currentGain: (conversion: GenericConversion) => DecimalSource;
-    /**
-     * Calculates the amount of the input resource that is required for the current value of `conversion.currentGain`.
-     * Note that `conversion.currentGain` has been modified by `conversion.gainModifier`, so you will need to revert that as appropriate.
-     * The conversion is responsible for rounding up the amount as appropriate.
-     * The returned value should not be below 0.
-     */
-    currentAt: (conversion: GenericConversion) => DecimalSource;
-    /**
-     * Calculates the amount of the input resource that would be required for the current value of `conversion.currentGain` to increase.
-     * Note that `conversion.currentGain` has been modified by `conversion.gainModifier`, so you will need to revert that as appropriate.
-     * The conversion is responsible for rounding up the amount as appropriate.
-     * The returned value should not be below 0.
-     */
-    nextAt: (conversion: GenericConversion) => DecimalSource;
-}
-
-/**
- * Creates a scaling function based off the formula `(baseResource - base) * coefficient`.
- * If the baseResource value is less than base then the currentGain will be 0.
- * @param base The base variable in the scaling formula.
- * @param coefficient The coefficient variable in the scaling formula.
- * @example
- * A scaling function created via `createLinearScaling(10, 0.5)` would produce the following values:
- * | Base Resource | Current Gain |
- * | ------------- | ------------ |
- * | 10            | 1            |
- * | 12            | 2            |
- * | 20            | 6            |
- */
-export function createLinearScaling(
-    base: Computable<DecimalSource>,
-    coefficient: Computable<DecimalSource>
-): ScalingFunction {
-    const processedBase = convertComputable(base);
-    const processedCoefficient = convertComputable(coefficient);
-    return {
-        currentGain(conversion) {
-            let baseAmount: DecimalSource = unref(conversion.baseResource.value);
-            if (conversion.costModifier) {
-                baseAmount = conversion.costModifier.apply(baseAmount);
-            }
-            if (Decimal.lt(baseAmount, unref(processedBase))) {
-                return 0;
-            }
-
-            return Decimal.sub(baseAmount, unref(processedBase))
-                .sub(1)
-                .times(unref(processedCoefficient))
-                .add(1);
-        },
-        currentAt(conversion) {
-            let current: DecimalSource = unref(conversion.currentGain);
-            if (conversion.gainModifier) {
-                current = conversion.gainModifier.revert(current);
-            }
-            current = Decimal.max(0, current)
-                .sub(1)
-                .div(unref(processedCoefficient))
-                .add(unref(processedBase));
-            if (conversion.costModifier) {
-                current = conversion.costModifier.revert(current);
-            }
-            return current;
-        },
-        nextAt(conversion) {
-            let next: DecimalSource = Decimal.add(unref(conversion.currentGain), 1).floor();
-            if (conversion.gainModifier) {
-                next = conversion.gainModifier.revert(next);
-            }
-            next = Decimal.max(0, next)
-                .sub(1)
-                .div(unref(processedCoefficient))
-                .add(unref(processedBase))
-                .max(unref(processedBase));
-            if (conversion.costModifier) {
-                next = conversion.costModifier.revert(next);
-            }
-            return next;
-        }
-    };
-}
-
-/**
- * Creates a scaling function based off the formula `(baseResource / base) ^ exponent`.
- * If the baseResource value is less than base then the currentGain will be 0.
- * @param base The base variable in the scaling formula.
- * @param exponent The exponent variable in the scaling formula.
- * @example
- * A scaling function created via `createPolynomialScaling(10, 0.5)` would produce the following values:
- * | Base Resource | Current Gain |
- * | ------------- | ------------ |
- * | 10            | 1            |
- * | 40            | 2            |
- * | 250           | 5            |
- */
-export function createPolynomialScaling(
-    base: Computable<DecimalSource>,
-    exponent: Computable<DecimalSource>
-): ScalingFunction {
-    const processedBase = convertComputable(base);
-    const processedExponent = convertComputable(exponent);
-    return {
-        currentGain(conversion) {
-            let baseAmount: DecimalSource = unref(conversion.baseResource.value);
-            if (conversion.costModifier) {
-                baseAmount = conversion.costModifier.apply(baseAmount);
-            }
-            if (Decimal.lt(baseAmount, unref(processedBase))) {
-                return 0;
-            }
-
-            const gain = Decimal.div(baseAmount, unref(processedBase)).pow(
-                unref(processedExponent)
-            );
-
-            if (gain.isNan()) {
-                return new Decimal(0);
-            }
-            return gain;
-        },
-        currentAt(conversion) {
-            let current: DecimalSource = unref(conversion.currentGain);
-            if (conversion.gainModifier) {
-                current = conversion.gainModifier.revert(current);
-            }
-            current = Decimal.max(0, current)
-                .root(unref(processedExponent))
-                .times(unref(processedBase));
-            if (conversion.costModifier) {
-                current = conversion.costModifier.revert(current);
-            }
-            return current;
-        },
-        nextAt(conversion) {
-            let next: DecimalSource = Decimal.add(unref(conversion.currentGain), 1).floor();
-            if (conversion.gainModifier) {
-                next = conversion.gainModifier.revert(next);
-            }
-            next = Decimal.max(0, next)
-                .root(unref(processedExponent))
-                .times(unref(processedBase))
-                .max(unref(processedBase));
-            if (conversion.costModifier) {
-                next = conversion.costModifier.revert(next);
-            }
-            return next;
-        }
-    };
-}
-
 /**
  * Creates a conversion that simply adds to the gainResource amount upon converting.
  * This is similar to the behavior of "normal" layers in The Modding Tree.
@@ -388,21 +216,19 @@ export function createCumulativeConversion<S extends ConversionOptions>(
 export function createIndependentConversion<S extends ConversionOptions>(
     optionsFunc: OptionsFunc<S, BaseConversion, GenericConversion>
 ): Conversion<S> {
-    return createConversion(() => {
-        const conversion: S = optionsFunc();
+    return createConversion(feature => {
+        const conversion: S = optionsFunc.call(feature, feature);
 
         setDefault(conversion, "buyMax", false);
 
         if (conversion.currentGain == null) {
             conversion.currentGain = computed(() => {
-                let gain = conversion.gainModifier
-                    ? conversion.gainModifier.apply(
-                          conversion.scaling.currentGain(conversion as GenericConversion)
-                      )
-                    : conversion.scaling.currentGain(conversion as GenericConversion);
-                gain = Decimal.floor(gain).max(conversion.gainResource.value);
-
-                if (!unref(conversion.buyMax)) {
+                let gain = Decimal.floor(
+                    (conversion as unknown as GenericConversion).formula.evaluate(
+                        conversion.baseResource.value
+                    )
+                ).max(conversion.gainResource.value);
+                if (unref(conversion.buyMax) === false) {
                     gain = gain.min(Decimal.add(conversion.gainResource.value, 1));
                 }
                 return gain;
@@ -411,24 +237,26 @@ export function createIndependentConversion<S extends ConversionOptions>(
         if (conversion.actualGain == null) {
             conversion.actualGain = computed(() => {
                 let gain = Decimal.sub(
-                    Decimal.floor(conversion.scaling.currentGain(conversion as GenericConversion)),
+                    (conversion as unknown as GenericConversion).formula.evaluate(
+                        conversion.baseResource.value
+                    ),
                     conversion.gainResource.value
-                ).max(0);
+                )
+                    .floor()
+                    .max(0);
 
-                if (!unref(conversion.buyMax)) {
+                if (unref(conversion.buyMax) === false) {
                     gain = gain.min(1);
                 }
                 return gain;
             });
         }
         setDefault(conversion, "convert", function () {
-            const amountGained = unref((conversion as GenericConversion).actualGain);
-            conversion.gainResource.value = conversion.gainModifier
-                ? conversion.gainModifier.apply(
-                      unref((conversion as GenericConversion).currentGain)
-                  )
-                : unref((conversion as GenericConversion).currentGain);
-            (conversion as GenericConversion).spend(amountGained);
+            const amountGained = unref((conversion as unknown as GenericConversion).actualGain);
+            conversion.gainResource.value = unref(
+                (conversion as unknown as GenericConversion).currentGain
+            );
+            (conversion as unknown as GenericConversion).spend(amountGained);
             conversion.onConvert?.(amountGained);
         });
 
@@ -443,13 +271,13 @@ export function createIndependentConversion<S extends ConversionOptions>(
  * @param layer The layer this passive generation will be associated with. Typically `this` when calling this function from inside a layer's options function.
  * @param conversion The conversion that will determine how much generation there is.
  * @param rate A multiplier to multiply against the conversion's currentGain.
- * @param cap A value that should not be passed via passive generation. If null, no cap is applied.
+ * @param cap A value that should not be passed via passive generation.
  */
 export function setupPassiveGeneration(
     layer: BaseLayer,
     conversion: GenericConversion,
     rate: Computable<DecimalSource> = 1,
-    cap: Computable<DecimalSource | null> = null
+    cap: Computable<DecimalSource> = Decimal.dInf
 ): void {
     const processedRate = convertComputable(rate);
     const processedCap = convertComputable(cap);
@@ -459,71 +287,26 @@ export function setupPassiveGeneration(
             conversion.gainResource.value = Decimal.add(
                 conversion.gainResource.value,
                 Decimal.times(currRate, diff).times(Decimal.ceil(unref(conversion.actualGain)))
-            ).min(unref(processedCap) ?? Decimal.dInf);
+            )
+                .min(unref(processedCap))
+                .max(conversion.gainResource.value);
         }
     });
 }
 
 /**
- * Given a value, this function finds the amount above a certain value and raises it to a power.
- * If the power is <1, this will effectively make the value scale slower after the cap.
- * @param value The raw value.
- * @param cap The value after which the softcap should be applied.
- * @param power The power to raise value above the cap to.
- * @example
- * A softcap added via `addSoftcap(scaling, 100, 0.5)` would produce the following values:
- * | Raw Value | Softcapped Value |
- * | --------- | ---------------- |
- * | 1         | 1                |
- * | 100       | 100              |
- * | 125       | 105              |
- * | 200       | 110              |
+ * Creates requirement that is met when the conversion hits a specified gain amount
+ * @param conversion The conversion to check the gain amount of
+ * @param minGainAmount The minimum gain amount that must be met for the requirement to be met
  */
-export function softcap(
-    value: DecimalSource,
-    cap: DecimalSource,
-    power: DecimalSource = 0.5
-): DecimalSource {
-    if (Decimal.lte(value, cap)) {
-        return value;
-    } else {
-        return Decimal.pow(value, power).times(Decimal.pow(cap, Decimal.sub(1, power)));
-    }
-}
-
-/**
- * Creates a scaling function based off an existing scaling function, with a softcap applied to it.
- * The softcap will take any value above a certain value and raise it to a power.
- * If the power is <1, this will effectively make the value scale slower after the cap.
- * @param scaling The raw scaling function.
- * @param cap The value after which the softcap should be applied.
- * @param power The power to raise value about the cap to.
- * @see {@link softcap}.
- */
-export function addSoftcap(
-    scaling: ScalingFunction,
-    cap: ProcessedComputable<DecimalSource>,
-    power: ProcessedComputable<DecimalSource> = 0.5
-): ScalingFunction {
-    return {
-        ...scaling,
-        currentGain: conversion =>
-            softcap(scaling.currentGain(conversion), unref(cap), unref(power))
-    };
-}
-
-/**
- * Creates a scaling function off an existing function, with a hardcap applied to it.
- * The harcap will ensure that the currentGain will stop at a given cap.
- * @param scaling The raw scaling function.
- * @param cap The maximum value the scaling function can output.
- */
-export function addHardcap(
-    scaling: ScalingFunction,
-    cap: ProcessedComputable<DecimalSource>
-): ScalingFunction {
-    return {
-        ...scaling,
-        currentGain: conversion => Decimal.min(scaling.currentGain(conversion), unref(cap))
-    };
+export function createCanConvertRequirement(
+    conversion: GenericConversion,
+    minGainAmount: Computable<DecimalSource> = 1,
+    display?: CoercableComponent
+) {
+    const computedMinGainAmount = convertComputable(minGainAmount);
+    return createBooleanRequirement(
+        () => Decimal.gte(unref(conversion.actualGain), unref(computedMinGainAmount)),
+        display
+    );
 }
diff --git a/src/features/decorators/bonusDecorator.ts b/src/features/decorators/bonusDecorator.ts
new file mode 100644
index 0000000..7ee453d
--- /dev/null
+++ b/src/features/decorators/bonusDecorator.ts
@@ -0,0 +1,117 @@
+import { Replace } from "features/feature";
+import Decimal, { DecimalSource } from "util/bignum";
+import {
+    Computable,
+    GetComputableType,
+    ProcessedComputable,
+    processComputable
+} from "util/computed";
+import { Ref, computed, unref } from "vue";
+import { Decorator } from "./common";
+
+export interface BonusAmountFeatureOptions {
+    bonusAmount: Computable<DecimalSource>;
+    totalAmount?: Computable<DecimalSource>;
+}
+export interface BonusCompletionsFeatureOptions {
+    bonusCompletions: Computable<DecimalSource>;
+    totalCompletions?: Computable<DecimalSource>;
+}
+
+export interface BaseBonusAmountFeature {
+    amount: Ref<DecimalSource>;
+    bonusAmount: ProcessedComputable<DecimalSource>;
+    totalAmount?: Ref<DecimalSource>;
+}
+export interface BaseBonusCompletionsFeature {
+    completions: Ref<DecimalSource>;
+    bonusCompletions: ProcessedComputable<DecimalSource>;
+    totalCompletions?: Ref<DecimalSource>;
+}
+
+export type BonusAmountFeature<T extends BonusAmountFeatureOptions> = Replace<
+    T,
+    { bonusAmount: GetComputableType<T["bonusAmount"]> }
+>;
+export type BonusCompletionsFeature<T extends BonusCompletionsFeatureOptions> = Replace<
+    T,
+    { bonusAmount: GetComputableType<T["bonusCompletions"]> }
+>;
+
+export type GenericBonusAmountFeature = Replace<
+    BonusAmountFeature<BonusAmountFeatureOptions>,
+    {
+        bonusAmount: ProcessedComputable<DecimalSource>;
+        totalAmount: ProcessedComputable<DecimalSource>;
+    }
+>;
+export type GenericBonusCompletionsFeature = Replace<
+    BonusCompletionsFeature<BonusCompletionsFeatureOptions>,
+    {
+        bonusCompletions: ProcessedComputable<DecimalSource>;
+        totalCompletions: ProcessedComputable<DecimalSource>;
+    }
+>;
+
+/**
+ * Allows the addition of "bonus levels" to the decorated feature, with an accompanying "total amount".
+ * To function properly, the `createFeature()` function must have its generic type extended by {@linkcode BonusAmountFeatureOptions}.
+ * Additionally, the base feature must have an `amount` property.
+ * To allow access to the decorated values outside the `createFeature()` function, the output type must be extended by {@linkcode GenericBonusAmountFeature}.
+ * @example ```ts
+ * createRepeatable<RepeatableOptions & BonusAmountFeatureOptions>(() => ({
+ *   bonusAmount: noPersist(otherRepeatable.amount),
+ *   ...
+ * }), bonusAmountDecorator) as GenericRepeatable & GenericBonusAmountFeature
+ */
+export const bonusAmountDecorator: Decorator<
+    BonusAmountFeatureOptions,
+    BaseBonusAmountFeature,
+    GenericBonusAmountFeature
+> = {
+    postConstruct(feature) {
+        if (feature.amount === undefined) {
+            console.error(
+                `Decorated feature ${feature.id} does not contain the required 'amount' property"`
+            );
+        }
+        processComputable(feature, "bonusAmount");
+        if (feature.totalAmount === undefined) {
+            feature.totalAmount = computed(() =>
+                Decimal.add(
+                    unref(feature.amount ?? 0),
+                    unref(feature.bonusAmount as ProcessedComputable<DecimalSource>)
+                )
+            );
+        }
+    }
+};
+
+/**
+ * Allows the addition of "bonus levels" to the decorated feature, with an accompanying "total amount".
+ * To function properly, the `createFeature()` function must have its generic type extended by {@linkcode BonusCompletionFeatureOptions}.
+ * To allow access to the decorated values outside the `createFeature()` function, the output type must be extended by {@linkcode GenericBonusCompletionFeature}.
+ * @example ```ts
+ * createChallenge<ChallengeOptions & BonusCompletionFeatureOptions>(() => ({
+ *   bonusCompletions: noPersist(otherChallenge.completions),
+ *   ...
+ * }), bonusCompletionDecorator) as GenericChallenge & GenericBonusCompletionFeature
+ * ```
+ */
+export const bonusCompletionsDecorator: Decorator<
+    BonusCompletionsFeatureOptions,
+    BaseBonusCompletionsFeature,
+    GenericBonusCompletionsFeature
+> = {
+    postConstruct(feature) {
+        processComputable(feature, "bonusCompletions");
+        if (feature.totalCompletions === undefined) {
+            feature.totalCompletions = computed(() =>
+                Decimal.add(
+                    unref(feature.completions ?? 0),
+                    unref(feature.bonusCompletions as ProcessedComputable<DecimalSource>)
+                )
+            );
+        }
+    }
+};
diff --git a/src/features/decorators/common.ts b/src/features/decorators/common.ts
new file mode 100644
index 0000000..07783bb
--- /dev/null
+++ b/src/features/decorators/common.ts
@@ -0,0 +1,59 @@
+import { Replace, OptionsObject } from "../feature";
+import {
+    Computable,
+    GetComputableType,
+    processComputable,
+    ProcessedComputable
+} from "util/computed";
+import { Persistent, State } from "game/persistence";
+
+export type Decorator<
+    FeatureOptions,
+    BaseFeature = object,
+    GenericFeature = BaseFeature,
+    S extends State = State
+> = {
+    getPersistentData?(): Record<string, Persistent<S>>;
+    preConstruct?(
+        feature: OptionsObject<FeatureOptions, BaseFeature & { id: string }, GenericFeature>
+    ): void;
+    postConstruct?(
+        feature: OptionsObject<FeatureOptions, BaseFeature & { id: string }, GenericFeature>
+    ): void;
+    getGatheredProps?(
+        feature: OptionsObject<FeatureOptions, BaseFeature & { id: string }, GenericFeature>
+    ): Partial<OptionsObject<FeatureOptions, BaseFeature & { id: string }, GenericFeature>>;
+};
+
+export type GenericDecorator = Decorator<unknown>;
+
+export interface EffectFeatureOptions<T = unknown> {
+    effect: Computable<T>;
+}
+
+export type EffectFeature<T extends EffectFeatureOptions> = Replace<
+    T,
+    { effect: GetComputableType<T["effect"]> }
+>;
+
+export type GenericEffectFeature<T = unknown> = Replace<
+    EffectFeature<EffectFeatureOptions>,
+    { effect: ProcessedComputable<T> }
+>;
+
+/**
+ * Allows the usage of an `effect` field in the decorated feature.
+ * To function properly, the `createFeature()` function must have its generic type extended by {@linkcode EffectFeatureOptions}.
+ * To allow access to the decorated values outside the `createFeature()` function, the output type must be extended by {@linkcode GenericEffectFeature}.
+ * @example ```ts
+ * createRepeatable<RepeatableOptions & EffectFeatureOptions>(() => ({
+ *   effect() { return Decimal.pow(2, this.amount); },
+ *   ...
+ * }), effectDecorator) as GenericUpgrade & GenericEffectFeature;
+ * ```
+ */
+export const effectDecorator: Decorator<EffectFeatureOptions, unknown, GenericEffectFeature> = {
+    postConstruct(feature) {
+        processComputable(feature, "effect");
+    }
+};
diff --git a/src/features/feature.ts b/src/features/feature.ts
index ae14e29..429629a 100644
--- a/src/features/feature.ts
+++ b/src/features/feature.ts
@@ -1,7 +1,7 @@
 import Decimal from "util/bignum";
-import { DoNotCache } from "util/computed";
+import { DoNotCache, ProcessedComputable } from "util/computed";
 import type { CSSProperties, DefineComponent } from "vue";
-import { isRef } from "vue";
+import { isRef, unref } from "vue";
 
 /**
  * A symbol to use as a key for a vue component a feature can be rendered with
@@ -42,9 +42,9 @@ export type Replace<T, S> = S & Omit<T, keyof S>;
  * with "this" bound to what the type will eventually be processed into.
  * Intended for making lazily evaluated objects.
  */
-export type OptionsFunc<T, R = Record<string, unknown>, S = R> = () => T &
-    Partial<R> &
-    ThisType<T & S>;
+export type OptionsFunc<T, R = unknown, S = R> = (obj: R) => OptionsObject<T, R, S>;
+
+export type OptionsObject<T, R = unknown, S = R> = T & Partial<R> & ThisType<T & S>;
 
 let id = 0;
 /**
@@ -67,6 +67,16 @@ export enum Visibility {
     None
 }
 
+export function isVisible(visibility: ProcessedComputable<Visibility | boolean>) {
+    const currVisibility = unref(visibility);
+    return currVisibility !== Visibility.None && currVisibility !== false;
+}
+
+export function isHidden(visibility: ProcessedComputable<Visibility | boolean>) {
+    const currVisibility = unref(visibility);
+    return currVisibility === Visibility.Hidden;
+}
+
 /**
  * Takes a function and marks it as JSX so it won't get auto-wrapped into a ComputedRef.
  * The function may also return empty string as empty JSX tags cause issues.
@@ -76,11 +86,6 @@ export function jsx(func: () => JSX.Element | ""): JSXFunction {
     return func as JSXFunction;
 }
 
-/** Utility function to convert a boolean value into a Visbility value */
-export function showIf(condition: boolean, otherwise = Visibility.None): Visibility {
-    return condition ? Visibility.Visible : otherwise;
-}
-
 /** Utility function to set a property on an object if and only if it doesn't already exist */
 export function setDefault<T, K extends keyof T>(
     object: T,
@@ -102,7 +107,7 @@ export function findFeatures(obj: Record<string, unknown>, ...types: symbol[]):
     const handleObject = (obj: Record<string, unknown>) => {
         Object.keys(obj).forEach(key => {
             const value = obj[key];
-            if (value && typeof value === "object") {
+            if (value != null && typeof value === "object") {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if (types.includes((value as Record<string, any>).type)) {
                     objects.push(value);
@@ -127,7 +132,7 @@ export function excludeFeatures(obj: Record<string, unknown>, ...types: symbol[]
     const handleObject = (obj: Record<string, unknown>) => {
         Object.keys(obj).forEach(key => {
             const value = obj[key];
-            if (value && typeof value === "object") {
+            if (value != null && typeof value === "object") {
                 if (
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     typeof (value as Record<string, any>).type == "symbol" &&
diff --git a/src/features/grids/Grid.vue b/src/features/grids/Grid.vue
index 729d5a5..2950604 100644
--- a/src/features/grids/Grid.vue
+++ b/src/features/grids/Grid.vue
@@ -1,12 +1,12 @@
 <template>
     <div
-        v-if="unref(visibility) !== Visibility.None"
+        v-if="isVisible(visibility)"
         :style="{
-            visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
+            visibility: isHidden(visibility) ? 'hidden' : undefined
         }"
-        class="table"
+        class="table-grid"
     >
-        <div v-for="row in unref(rows)" class="row" :class="{ mergeAdjacent }" :key="row">
+        <div v-for="row in unref(rows)" class="row-grid" :class="{ mergeAdjacent }" :key="row">
             <GridCell
                 v-for="col in unref(cols)"
                 :key="col"
@@ -19,7 +19,7 @@
 <script lang="ts">
 import "components/common/table.css";
 import themes from "data/themes";
-import { Visibility } from "features/feature";
+import { isHidden, isVisible, Visibility } from "features/feature";
 import type { GridCell } from "features/grids/grid";
 import settings from "game/settings";
 import { processedPropType } from "util/vue";
@@ -29,7 +29,7 @@ import GridCellVue from "./GridCell.vue";
 export default defineComponent({
     props: {
         visibility: {
-            type: processedPropType<Visibility>(Number),
+            type: processedPropType<Visibility | boolean>(Number, Boolean),
             required: true
         },
         rows: {
@@ -54,7 +54,7 @@ export default defineComponent({
             return { visibility, onClick, onHold, display, title, style, canClick, id };
         }
 
-        return { unref, gatherCellProps, Visibility, mergeAdjacent };
+        return { unref, gatherCellProps, Visibility, mergeAdjacent, isVisible, isHidden };
     }
 });
 </script>
diff --git a/src/features/grids/GridCell.vue b/src/features/grids/GridCell.vue
index c9bdbe6..876b7c3 100644
--- a/src/features/grids/GridCell.vue
+++ b/src/features/grids/GridCell.vue
@@ -1,10 +1,10 @@
 <template>
     <button
-        v-if="unref(visibility) !== Visibility.None"
+        v-if="isVisible(visibility)"
         :class="{ feature: true, tile: true, can: unref(canClick), locked: !unref(canClick) }"
         :style="[
             {
-                visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
+                visibility: isHidden(visibility) ? 'hidden' : undefined
             },
             unref(style) ?? {}
         ]"
@@ -26,7 +26,7 @@
 import "components/common/features.css";
 import Node from "components/Node.vue";
 import type { CoercableComponent, StyleValue } from "features/feature";
-import { Visibility } from "features/feature";
+import { isHidden, isVisible, Visibility } from "features/feature";
 import {
     computeComponent,
     computeOptionalComponent,
@@ -39,7 +39,7 @@ import { defineComponent, toRefs, unref } from "vue";
 export default defineComponent({
     props: {
         visibility: {
-            type: processedPropType<Visibility>(Number),
+            type: processedPropType<Visibility | boolean>(Number, Boolean),
             required: true
         },
         onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>,
@@ -76,7 +76,9 @@ export default defineComponent({
             titleComponent,
             component,
             Visibility,
-            unref
+            unref,
+            isVisible,
+            isHidden
         };
     }
 });
diff --git a/src/features/grids/grid.ts b/src/features/grids/grid.ts
index 05890a7..454bbfc 100644
--- a/src/features/grids/grid.ts
+++ b/src/features/grids/grid.ts
@@ -1,4 +1,10 @@
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
 import GridComponent from "features/grids/Grid.vue";
 import type { Persistent, State } from "game/persistence";
@@ -15,14 +21,22 @@ import { createLazyProxy } from "util/proxies";
 import type { Ref } from "vue";
 import { computed, unref } from "vue";
 
+/** A symbol used to identify {@link Grid} features. */
 export const GridType = Symbol("Grid");
 
+/** A type representing a computable value for a cell in the grid. */
 export type CellComputable<T> = Computable<T> | ((id: string | number, state: State) => T);
 
+/** Create proxy to more easily get the properties of cells on a grid. */
 function createGridProxy(grid: GenericGrid): Record<string | number, GridCell> {
     return new Proxy({}, getGridHandler(grid)) as Record<string | number, GridCell>;
 }
 
+/**
+ * Returns traps for a proxy that will give cell proxies when accessing any numerical key.
+ * @param grid The grid to get the cells from.
+ * @see {@link createGridProxy}
+ */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getGridHandler(grid: GenericGrid): ProxyHandler<Record<string | number, GridCell>> {
     const keys = computed(() => {
@@ -80,6 +94,12 @@ function getGridHandler(grid: GenericGrid): ProxyHandler<Record<string | number,
     };
 }
 
+/**
+ * Returns traps for a proxy that will get the properties for the specified cell
+ * @param id The grid cell ID to get properties from.
+ * @see {@link getGridHandler}
+ * @see {@link createGridProxy}
+ */
 function getCellHandler(id: string): ProxyHandler<GenericGrid> {
     const keys = [
         "id",
@@ -169,47 +189,90 @@ function getCellHandler(id: string): ProxyHandler<GenericGrid> {
     };
 }
 
+/**
+ * Represents a cell within a grid. These properties will typically be accessed via a cell proxy that calls functions on the grid to get the properties for a specific cell.
+ * @see {@link createGridProxy}
+ */
 export interface GridCell {
+    /** A unique identifier for the grid cell. */
     id: string;
-    visibility: Visibility;
+    /** Whether this cell should be visible. */
+    visibility: Visibility | boolean;
+    /** Whether this cell can be clicked. */
     canClick: boolean;
+    /** The initial persistent state of this cell. */
     startState: State;
+    /** The persistent state of this cell. */
     state: State;
+    /** CSS to apply to this feature. */
     style?: StyleValue;
+    /** Dictionary of CSS classes to apply to this feature. */
     classes?: Record<string, boolean>;
+    /** A header to appear at the top of the display. */
     title?: CoercableComponent;
+    /** The main text that appears in the display. */
     display: CoercableComponent;
+    /** A function that is called when the cell is clicked. */
     onClick?: (e?: MouseEvent | TouchEvent) => void;
+    /** A function that is called when the cell is held down. */
     onHold?: VoidFunction;
 }
 
+/**
+ * An object that configures a {@link Grid}.
+ */
 export interface GridOptions {
-    visibility?: Computable<Visibility>;
+    /** Whether this grid should be visible. */
+    visibility?: Computable<Visibility | boolean>;
+    /** The number of rows in the grid. */
     rows: Computable<number>;
+    /** The number of columns in the grid. */
     cols: Computable<number>;
-    getVisibility?: CellComputable<Visibility>;
+    /** A computable to determine the visibility of a cell. */
+    getVisibility?: CellComputable<Visibility | boolean>;
+    /** A computable to determine if a cell can be clicked. */
     getCanClick?: CellComputable<boolean>;
+    /** A computable to get the initial persistent state of a cell. */
     getStartState: Computable<State> | ((id: string | number) => State);
+    /** A computable to get the CSS styles for a cell. */
     getStyle?: CellComputable<StyleValue>;
+    /** A computable to get the CSS classes for a cell. */
     getClasses?: CellComputable<Record<string, boolean>>;
+    /** A computable to get the title component for a cell. */
     getTitle?: CellComputable<CoercableComponent>;
+    /** A computable to get the display component for a cell. */
     getDisplay: CellComputable<CoercableComponent>;
+    /** A function that is called when a cell is clicked. */
     onClick?: (id: string | number, state: State, e?: MouseEvent | TouchEvent) => void;
+    /** A function that is called when a cell is held down. */
     onHold?: (id: string | number, state: State) => void;
 }
 
+/**
+ * The properties that are added onto a processed {@link BoardOptions} to create a {@link Board}.
+ */
 export interface BaseGrid {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
     id: string;
+    /** Get the auto-generated ID for identifying a specific cell of this grid that appears in the DOM. Will not persist between refreshes or updates. */
     getID: (id: string | number, state: State) => string;
+    /** Get the persistent state of the given cell. */
     getState: (id: string | number) => State;
+    /** Set the persistent state of the given cell. */
     setState: (id: string | number, state: State) => void;
+    /** A dictionary of cells within this grid. */
     cells: Record<string | number, GridCell>;
+    /** The persistent state of this grid, which is a dictionary of cell states. */
     cellState: Persistent<Record<string | number, State>>;
+    /** A symbol that helps identify features of the same type. */
     type: typeof GridType;
-    [Component]: typeof GridComponent;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
 
+/** An object that represents a feature that is a grid of cells that all behave according to the same rules. */
 export type Grid<T extends GridOptions> = Replace<
     T & BaseGrid,
     {
@@ -226,23 +289,28 @@ export type Grid<T extends GridOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link Grid} object. */
 export type GenericGrid = Replace<
     Grid<GridOptions>,
     {
-        visibility: ProcessedComputable<Visibility>;
-        getVisibility: ProcessedComputable<Visibility>;
+        visibility: ProcessedComputable<Visibility | boolean>;
+        getVisibility: ProcessedComputable<Visibility | boolean>;
         getCanClick: ProcessedComputable<boolean>;
     }
 >;
 
+/**
+ * Lazily creates a grid with the given options.
+ * @param optionsFunc Grid options.
+ */
 export function createGrid<T extends GridOptions>(
     optionsFunc: OptionsFunc<T, BaseGrid, GenericGrid>
 ): Grid<T> {
-    const cellState = persistent<Record<string | number, State>>({});
-    return createLazyProxy(() => {
-        const grid = optionsFunc();
+    const cellState = persistent<Record<string | number, State>>({}, false);
+    return createLazyProxy(feature => {
+        const grid = optionsFunc.call(feature, feature);
         grid.id = getUniqueID("grid-");
-        grid[Component] = GridComponent;
+        grid[Component] = GridComponent as GenericComponent;
 
         grid.cellState = cellState;
 
@@ -277,9 +345,9 @@ export function createGrid<T extends GridOptions>(
 
         if (grid.onClick) {
             const onClick = grid.onClick.bind(grid);
-            grid.onClick = function (id, state) {
+            grid.onClick = function (id, state, e) {
                 if (unref((grid as GenericGrid).cells[id].canClick)) {
-                    onClick(id, state);
+                    onClick(id, state, e);
                 }
             };
         }
diff --git a/src/features/hotkey.tsx b/src/features/hotkey.tsx
index bfb958f..51fafbb 100644
--- a/src/features/hotkey.tsx
+++ b/src/features/hotkey.tsx
@@ -13,21 +13,36 @@ import type {
 import { processComputable } from "util/computed";
 import { createLazyProxy } from "util/proxies";
 import { shallowReactive, unref } from "vue";
+import Hotkey from "components/Hotkey.vue";
 
+/** A dictionary of all hotkeys. */
 export const hotkeys: Record<string, GenericHotkey | undefined> = shallowReactive({});
+/** A symbol used to identify {@link Hotkey} features. */
 export const HotkeyType = Symbol("Hotkey");
 
+/**
+ * An object that configures a {@link Hotkey}.
+ */
 export interface HotkeyOptions {
+    /** Whether or not this hotkey is currently enabled. */
     enabled?: Computable<boolean>;
+    /** The key tied to this hotkey */
     key: string;
+    /** The description of this hotkey, to display in the settings. */
     description: Computable<string>;
+    /** What to do upon pressing the key. */
     onPress: VoidFunction;
 }
 
+/**
+ * The properties that are added onto a processed {@link HotkeyOptions} to create an {@link Hotkey}.
+ */
 export interface BaseHotkey {
+    /** A symbol that helps identify features of the same type. */
     type: typeof HotkeyType;
 }
 
+/** An object that represents a hotkey shortcut that performs an action upon a key sequence being pressed. */
 export type Hotkey<T extends HotkeyOptions> = Replace<
     T & BaseHotkey,
     {
@@ -36,6 +51,7 @@ export type Hotkey<T extends HotkeyOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link Hotkey} object. */
 export type GenericHotkey = Replace<
     Hotkey<HotkeyOptions>,
     {
@@ -43,11 +59,17 @@ export type GenericHotkey = Replace<
     }
 >;
 
+const uppercaseNumbers = [")", "!", "@", "#", "$", "%", "^", "&", "*", "("];
+
+/**
+ * Lazily creates a hotkey with the given options.
+ * @param optionsFunc Hotkey options.
+ */
 export function createHotkey<T extends HotkeyOptions>(
     optionsFunc: OptionsFunc<T, BaseHotkey, GenericHotkey>
 ): Hotkey<T> {
-    return createLazyProxy(() => {
-        const hotkey = optionsFunc();
+    return createLazyProxy(feature => {
+        const hotkey = optionsFunc.call(feature, feature);
         hotkey.type = HotkeyType;
 
         processComputable(hotkey as T, "enabled");
@@ -78,7 +100,9 @@ document.onkeydown = function (e) {
         return;
     }
     let key = e.key;
-    if (e.shiftKey) {
+    if (uppercaseNumbers.includes(key)) {
+        key = "shift+" + uppercaseNumbers.indexOf(key);
+    } else if (e.shiftKey) {
         key = "shift+" + key;
     }
     if (e.ctrlKey) {
@@ -101,11 +125,13 @@ registerInfoComponent(
             <div>
                 <br />
                 <h4>Hotkeys</h4>
-                {keys.map(hotkey => (
-                    <div>
-                        {hotkey?.key}: {hotkey?.description}
-                    </div>
-                ))}
+                <div style="column-count: 2">
+                    {keys.map(hotkey => (
+                        <div>
+                            <Hotkey hotkey={hotkey as GenericHotkey} /> {hotkey?.description}
+                        </div>
+                    ))}
+                </div>
             </div>
         );
     })
diff --git a/src/features/infoboxes/Infobox.vue b/src/features/infoboxes/Infobox.vue
index 2271c1b..302d985 100644
--- a/src/features/infoboxes/Infobox.vue
+++ b/src/features/infoboxes/Infobox.vue
@@ -1,11 +1,11 @@
 <template>
     <div
         class="infobox"
-        v-if="unref(visibility) !== Visibility.None"
+        v-if="isVisible(visibility)"
         :style="[
             {
                 borderColor: unref(color),
-                visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
+                visibility: isHidden(visibility) ? 'hidden' : undefined
             },
             unref(style) ?? {}
         ]"
@@ -33,7 +33,7 @@ import CollapseTransition from "@ivanv/vue-collapse-transition/src/CollapseTrans
 import Node from "components/Node.vue";
 import themes from "data/themes";
 import type { CoercableComponent } from "features/feature";
-import { Visibility } from "features/feature";
+import { isHidden, isVisible, Visibility } from "features/feature";
 import settings from "game/settings";
 import { computeComponent, processedPropType } from "util/vue";
 import type { PropType, Ref, StyleValue } from "vue";
@@ -42,7 +42,7 @@ import { computed, defineComponent, toRefs, unref } from "vue";
 export default defineComponent({
     props: {
         visibility: {
-            type: processedPropType<Visibility>(Number),
+            type: processedPropType<Visibility | boolean>(Number, Boolean),
             required: true
         },
         display: {
@@ -83,7 +83,9 @@ export default defineComponent({
             bodyComponent,
             stacked,
             unref,
-            Visibility
+            Visibility,
+            isVisible,
+            isHidden
         };
     }
 });
diff --git a/src/features/infoboxes/infobox.ts b/src/features/infoboxes/infobox.ts
index f30e31c..551d86c 100644
--- a/src/features/infoboxes/infobox.ts
+++ b/src/features/infoboxes/infobox.ts
@@ -1,4 +1,10 @@
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
 import InfoboxComponent from "features/infoboxes/Infobox.vue";
 import type { Persistent } from "game/persistence";
@@ -13,27 +19,48 @@ import { processComputable } from "util/computed";
 import { createLazyProxy } from "util/proxies";
 import { unref } from "vue";
 
+/** A symbol used to identify {@link Infobox} features. */
 export const InfoboxType = Symbol("Infobox");
 
+/**
+ * An object that configures an {@link Infobox}.
+ */
 export interface InfoboxOptions {
-    visibility?: Computable<Visibility>;
+    /** Whether this clickable should be visible. */
+    visibility?: Computable<Visibility | boolean>;
+    /** The background color of the Infobox. */
     color?: Computable<string>;
+    /** CSS to apply to this feature. */
     style?: Computable<StyleValue>;
+    /** CSS to apply to the title of the infobox. */
     titleStyle?: Computable<StyleValue>;
+    /** CSS to apply to the body of the infobox. */
     bodyStyle?: Computable<StyleValue>;
+    /** Dictionary of CSS classes to apply to this feature. */
     classes?: Computable<Record<string, boolean>>;
+    /** A header to appear at the top of the display. */
     title: Computable<CoercableComponent>;
+    /** The main text that appears in the display. */
     display: Computable<CoercableComponent>;
 }
 
+/**
+ * The properties that are added onto a processed {@link InfoboxOptions} to create an {@link Infobox}.
+ */
 export interface BaseInfobox {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
     id: string;
+    /** Whether or not this infobox is collapsed. */
     collapsed: Persistent<boolean>;
+    /** A symbol that helps identify features of the same type. */
     type: typeof InfoboxType;
-    [Component]: typeof InfoboxComponent;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
 
+/** An object that represents a feature that displays information in a collapsible way.  */
 export type Infobox<T extends InfoboxOptions> = Replace<
     T & BaseInfobox,
     {
@@ -48,22 +75,27 @@ export type Infobox<T extends InfoboxOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link Infobox} object. */
 export type GenericInfobox = Replace<
     Infobox<InfoboxOptions>,
     {
-        visibility: ProcessedComputable<Visibility>;
+        visibility: ProcessedComputable<Visibility | boolean>;
     }
 >;
 
+/**
+ * Lazily creates an infobox with the given options.
+ * @param optionsFunc Infobox options.
+ */
 export function createInfobox<T extends InfoboxOptions>(
     optionsFunc: OptionsFunc<T, BaseInfobox, GenericInfobox>
 ): Infobox<T> {
-    const collapsed = persistent<boolean>(false);
-    return createLazyProxy(() => {
-        const infobox = optionsFunc();
+    const collapsed = persistent<boolean>(false, false);
+    return createLazyProxy(feature => {
+        const infobox = optionsFunc.call(feature, feature);
         infobox.id = getUniqueID("infobox-");
         infobox.type = InfoboxType;
-        infobox[Component] = InfoboxComponent;
+        infobox[Component] = InfoboxComponent as GenericComponent;
 
         infobox.collapsed = collapsed;
 
diff --git a/src/features/links/Link.vue b/src/features/links/Link.vue
index f7b9580..815f511 100644
--- a/src/features/links/Link.vue
+++ b/src/features/links/Link.vue
@@ -2,7 +2,7 @@
     <line
         stroke-width="15px"
         stroke="white"
-        v-bind="link"
+        v-bind="linkProps"
         :x1="startPosition.x"
         :y1="startPosition.y"
         :x2="endPosition.x"
@@ -13,6 +13,7 @@
 <script setup lang="ts">
 import type { Link } from "features/links/links";
 import type { FeatureNode } from "game/layers";
+import { kebabifyObject } from "util/vue";
 import { computed, toRefs } from "vue";
 
 const _props = defineProps<{
@@ -54,4 +55,6 @@ const endPosition = computed(() => {
     }
     return position;
 });
+
+const linkProps = computed(() => kebabifyObject(_props.link as unknown as Record<string, unknown>));
 </script>
diff --git a/src/features/links/links.ts b/src/features/links/links.ts
index 5ab8779..c5603c5 100644
--- a/src/features/links/links.ts
+++ b/src/features/links/links.ts
@@ -1,4 +1,4 @@
-import type { OptionsFunc, Replace } from "features/feature";
+import type { GenericComponent, OptionsFunc, Replace } from "features/feature";
 import { GatherProps, Component } from "features/feature";
 import type { Position } from "game/layers";
 import type { Computable, GetComputableType, ProcessedComputable } from "util/computed";
@@ -7,8 +7,10 @@ import { createLazyProxy } from "util/proxies";
 import type { SVGAttributes } from "vue";
 import LinksComponent from "./Links.vue";
 
+/** A symbol used to identify {@link Links} features. */
 export const LinksType = Symbol("Links");
 
+/** Represents a link between two nodes. It will be displayed as an SVG line, and can take any appropriate properties for an SVG line element. */
 export interface Link extends SVGAttributes {
     startNode: { id: string };
     endNode: { id: string };
@@ -16,16 +18,25 @@ export interface Link extends SVGAttributes {
     offsetEnd?: Position;
 }
 
+/** An object that configures a {@link Links}. */
 export interface LinksOptions {
+    /** The list of links to display. */
     links: Computable<Link[]>;
 }
 
+/**
+ * The properties that are added onto a processed {@link LinksOptions} to create an {@link Links}.
+ */
 export interface BaseLinks {
+    /** A symbol that helps identify features of the same type. */
     type: typeof LinksType;
-    [Component]: typeof LinksComponent;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
 
+/** An object that represents a list of links between nodes, which are the elements in the DOM for any renderable feature. */
 export type Links<T extends LinksOptions> = Replace<
     T & BaseLinks,
     {
@@ -33,6 +44,7 @@ export type Links<T extends LinksOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link Links} object. */
 export type GenericLinks = Replace<
     Links<LinksOptions>,
     {
@@ -40,13 +52,17 @@ export type GenericLinks = Replace<
     }
 >;
 
+/**
+ * Lazily creates links with the given options.
+ * @param optionsFunc Links options.
+ */
 export function createLinks<T extends LinksOptions>(
     optionsFunc: OptionsFunc<T, BaseLinks, GenericLinks>
 ): Links<T> {
-    return createLazyProxy(() => {
-        const links = optionsFunc();
+    return createLazyProxy(feature => {
+        const links = optionsFunc.call(feature, feature);
         links.type = LinksType;
-        links[Component] = LinksComponent;
+        links[Component] = LinksComponent as GenericComponent;
 
         processComputable(links as T, "links");
 
diff --git a/src/features/milestones/Milestone.vue b/src/features/milestones/Milestone.vue
deleted file mode 100644
index 92a90d6..0000000
--- a/src/features/milestones/Milestone.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-    <div
-        v-if="unref(visibility) !== Visibility.None"
-        :style="[
-            {
-                visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
-            },
-            unref(style) ?? {}
-        ]"
-        :class="{ feature: true, milestone: true, done: unref(earned), ...unref(classes) }"
-    >
-        <component :is="unref(comp)" />
-        <Node :id="id" />
-    </div>
-</template>
-
-<script lang="tsx">
-import "components/common/features.css";
-import Node from "components/Node.vue";
-import type { StyleValue } from "features/feature";
-import { jsx, Visibility } from "features/feature";
-import type { GenericMilestone } from "features/milestones/milestone";
-import { coerceComponent, isCoercableComponent, processedPropType, unwrapRef } from "util/vue";
-import type { Component, UnwrapRef } from "vue";
-import { defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
-
-export default defineComponent({
-    props: {
-        visibility: {
-            type: processedPropType<Visibility>(Number),
-            required: true
-        },
-        display: {
-            type: processedPropType<UnwrapRef<GenericMilestone["display"]>>(
-                String,
-                Object,
-                Function
-            ),
-            required: true
-        },
-        style: processedPropType<StyleValue>(String, Object, Array),
-        classes: processedPropType<Record<string, boolean>>(Object),
-        earned: {
-            type: processedPropType<boolean>(Boolean),
-            required: true
-        },
-        id: {
-            type: String,
-            required: true
-        }
-    },
-    components: {
-        Node
-    },
-    setup(props) {
-        const { display } = toRefs(props);
-
-        const comp = shallowRef<Component | string>("");
-
-        watchEffect(() => {
-            const currDisplay = unwrapRef(display);
-            if (currDisplay == null) {
-                comp.value = "";
-                return;
-            }
-            if (isCoercableComponent(currDisplay)) {
-                comp.value = coerceComponent(currDisplay);
-                return;
-            }
-            const Requirement = coerceComponent(currDisplay.requirement, "h3");
-            const EffectDisplay = coerceComponent(currDisplay.effectDisplay || "", "b");
-            const OptionsDisplay = coerceComponent(currDisplay.optionsDisplay || "", "span");
-            comp.value = coerceComponent(
-                jsx(() => (
-                    <span>
-                        <Requirement />
-                        {currDisplay.effectDisplay ? (
-                            <div>
-                                <EffectDisplay />
-                            </div>
-                        ) : null}
-                        {currDisplay.optionsDisplay ? (
-                            <div class="equal-spaced">
-                                <OptionsDisplay />
-                            </div>
-                        ) : null}
-                    </span>
-                ))
-            );
-        });
-
-        return {
-            comp,
-            unref,
-            Visibility
-        };
-    }
-});
-</script>
-
-<style scoped>
-.milestone {
-    width: calc(100% - 10px);
-    min-width: 120px;
-    padding-left: 5px;
-    padding-right: 5px;
-    background-color: var(--locked);
-    border-width: 4px;
-    border-radius: 5px;
-    color: rgba(0, 0, 0, 0.5);
-}
-
-.milestone.done {
-    background-color: var(--bought);
-    cursor: default;
-}
-
-.milestone :deep(.equal-spaced) {
-    display: flex;
-    justify-content: center;
-}
-
-.milestone :deep(.equal-spaced > *) {
-    margin: auto;
-}
-</style>
diff --git a/src/features/milestones/milestone.tsx b/src/features/milestones/milestone.tsx
deleted file mode 100644
index 00badb4..0000000
--- a/src/features/milestones/milestone.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import Select from "components/fields/Select.vue";
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
-import { Component, GatherProps, getUniqueID, jsx, setDefault, Visibility } from "features/feature";
-import MilestoneComponent from "features/milestones/Milestone.vue";
-import { globalBus } from "game/events";
-import "game/notifications";
-import type { Persistent } from "game/persistence";
-import { persistent } from "game/persistence";
-import player from "game/player";
-import settings, { registerSettingField } from "game/settings";
-import { camelToTitle } from "util/common";
-import type {
-    Computable,
-    GetComputableType,
-    GetComputableTypeWithDefault,
-    ProcessedComputable
-} from "util/computed";
-import { processComputable } from "util/computed";
-import { createLazyProxy } from "util/proxies";
-import { coerceComponent, isCoercableComponent } from "util/vue";
-import { computed, unref, watchEffect } from "vue";
-import { useToast } from "vue-toastification";
-
-const toast = useToast();
-
-export const MilestoneType = Symbol("Milestone");
-
-export enum MilestoneDisplay {
-    All = "all",
-    //Last = "last",
-    Configurable = "configurable",
-    Incomplete = "incomplete",
-    None = "none"
-}
-
-export interface MilestoneOptions {
-    visibility?: Computable<Visibility>;
-    shouldEarn?: () => boolean;
-    style?: Computable<StyleValue>;
-    classes?: Computable<Record<string, boolean>>;
-    display?: Computable<
-        | CoercableComponent
-        | {
-              requirement: CoercableComponent;
-              effectDisplay?: CoercableComponent;
-              optionsDisplay?: CoercableComponent;
-          }
-    >;
-    onComplete?: VoidFunction;
-}
-
-export interface BaseMilestone {
-    id: string;
-    earned: Persistent<boolean>;
-    complete: VoidFunction;
-    type: typeof MilestoneType;
-    [Component]: typeof MilestoneComponent;
-    [GatherProps]: () => Record<string, unknown>;
-}
-
-export type Milestone<T extends MilestoneOptions> = Replace<
-    T & BaseMilestone,
-    {
-        visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
-        style: GetComputableType<T["style"]>;
-        classes: GetComputableType<T["classes"]>;
-        display: GetComputableType<T["display"]>;
-    }
->;
-
-export type GenericMilestone = Replace<
-    Milestone<MilestoneOptions>,
-    {
-        visibility: ProcessedComputable<Visibility>;
-    }
->;
-
-export function createMilestone<T extends MilestoneOptions>(
-    optionsFunc?: OptionsFunc<T, BaseMilestone, GenericMilestone>
-): Milestone<T> {
-    const earned = persistent<boolean>(false);
-    return createLazyProxy(() => {
-        const milestone = optionsFunc?.() ?? ({} as ReturnType<NonNullable<typeof optionsFunc>>);
-        milestone.id = getUniqueID("milestone-");
-        milestone.type = MilestoneType;
-        milestone[Component] = MilestoneComponent;
-
-        milestone.earned = earned;
-        milestone.complete = function () {
-            earned.value = true;
-        };
-
-        processComputable(milestone as T, "visibility");
-        setDefault(milestone, "visibility", Visibility.Visible);
-        const visibility = milestone.visibility as ProcessedComputable<Visibility>;
-        milestone.visibility = computed(() => {
-            const display = unref((milestone as GenericMilestone).display);
-            switch (settings.msDisplay) {
-                default:
-                case MilestoneDisplay.All:
-                    return unref(visibility);
-                case MilestoneDisplay.Configurable:
-                    if (
-                        unref(milestone.earned) &&
-                        !(
-                            display != null &&
-                            typeof display == "object" &&
-                            "optionsDisplay" in (display as Record<string, unknown>)
-                        )
-                    ) {
-                        return Visibility.None;
-                    }
-                    return unref(visibility);
-                case MilestoneDisplay.Incomplete:
-                    if (unref(milestone.earned)) {
-                        return Visibility.None;
-                    }
-                    return unref(visibility);
-                case MilestoneDisplay.None:
-                    return Visibility.None;
-            }
-        });
-
-        processComputable(milestone as T, "style");
-        processComputable(milestone as T, "classes");
-        processComputable(milestone as T, "display");
-
-        milestone[GatherProps] = function (this: GenericMilestone) {
-            const { visibility, display, style, classes, earned, id } = this;
-            return { visibility, display, style: unref(style), classes, earned, id };
-        };
-
-        if (milestone.shouldEarn) {
-            const genericMilestone = milestone as GenericMilestone;
-            watchEffect(() => {
-                if (settings.active !== player.id) return;
-                if (
-                    !genericMilestone.earned.value &&
-                    unref(genericMilestone.visibility) === Visibility.Visible &&
-                    genericMilestone.shouldEarn?.()
-                ) {
-                    genericMilestone.earned.value = true;
-                    genericMilestone.onComplete?.();
-                    if (genericMilestone.display) {
-                        const display = unref(genericMilestone.display);
-                        const Display = coerceComponent(
-                            isCoercableComponent(display) ? display : display.requirement
-                        );
-                        toast(
-                            <>
-                                <h3>Milestone earned!</h3>
-                                <div>
-                                    {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-                                    {/* @ts-ignore */}
-                                    <Display />
-                                </div>
-                            </>
-                        );
-                    }
-                }
-            });
-        }
-
-        return milestone as unknown as Milestone<T>;
-    });
-}
-
-declare module "game/settings" {
-    interface Settings {
-        msDisplay: MilestoneDisplay;
-    }
-}
-
-globalBus.on("loadSettings", settings => {
-    setDefault(settings, "msDisplay", MilestoneDisplay.All);
-});
-
-const msDisplayOptions = Object.values(MilestoneDisplay).map(option => ({
-    label: camelToTitle(option),
-    value: option
-}));
-
-registerSettingField(
-    jsx(() => (
-        <Select
-            title="Show Milestones"
-            options={msDisplayOptions}
-            onUpdate:modelValue={value => (settings.msDisplay = value as MilestoneDisplay)}
-            modelValue={settings.msDisplay}
-        />
-    ))
-);
diff --git a/src/features/particles/Particles.vue b/src/features/particles/Particles.vue
index 1f7de78..6fee1e9 100644
--- a/src/features/particles/Particles.vue
+++ b/src/features/particles/Particles.vue
@@ -14,7 +14,7 @@ import { globalBus } from "game/events";
 import "lib/pixi";
 import { processedPropType } from "util/vue";
 import type { PropType } from "vue";
-import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, unref } from "vue";
+import { defineComponent, nextTick, onBeforeUnmount, onMounted, shallowRef, unref } from "vue";
 
 // TODO get typing support on the Particles component
 export default defineComponent({
diff --git a/src/features/particles/particles.tsx b/src/features/particles/particles.tsx
index 0b5b23f..d2797d5 100644
--- a/src/features/particles/particles.tsx
+++ b/src/features/particles/particles.tsx
@@ -8,24 +8,49 @@ import type { Computable, GetComputableType } from "util/computed";
 import { createLazyProxy } from "util/proxies";
 import { Ref, shallowRef, unref } from "vue";
 
+/** A symbol used to identify {@link Particles} features. */
 export const ParticlesType = Symbol("Particles");
 
+/**
+ * An object that configures {@link Particles}.
+ */
 export interface ParticlesOptions {
+    /** Dictionary of CSS classes to apply to this feature. */
     classes?: Computable<Record<string, boolean>>;
+    /** CSS to apply to this feature. */
     style?: Computable<StyleValue>;
+    /** A function that is called when the particles canvas is resized. */
     onContainerResized?: (boundingRect: DOMRect) => void;
+    /** A function that is called whenever the particles element is reloaded during development. For restarting particle effects. */
     onHotReload?: VoidFunction;
 }
 
+/**
+ * The properties that are added onto a processed {@link ParticlesOptions} to create an {@link Particles}.
+ */
 export interface BaseParticles {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
     id: string;
+    /** The Pixi.JS Application powering this particles canvas. */
     app: Ref<null | Application>;
+    /**
+     * A function to asynchronously add an emitter to the canvas.
+     * The returned emitter can then be positioned as appropriate and started.
+     * @see {@link Particles}
+     */
     addEmitter: (config: EmitterConfigV3) => Promise<Emitter>;
+    /** A symbol that helps identify features of the same type. */
     type: typeof ParticlesType;
+    /** The Vue component used to render this feature. */
     [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
 
+/**
+ * An object that represents a feature that display particle effects on the screen.
+ * The config should typically be gotten by designing the effect using the [online particle effect editor](https://pixijs.io/pixi-particles-editor/) and passing it into the {@link upgradeConfig} from @pixi/particle-emitter.
+ */
 export type Particles<T extends ParticlesOptions> = Replace<
     T & BaseParticles,
     {
@@ -34,16 +59,23 @@ export type Particles<T extends ParticlesOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link Particles} object. */
 export type GenericParticles = Particles<ParticlesOptions>;
 
+/**
+ * Lazily creates particles with the given options.
+ * @param optionsFunc Particles options.
+ */
 export function createParticles<T extends ParticlesOptions>(
     optionsFunc?: OptionsFunc<T, BaseParticles, GenericParticles>
 ): Particles<T> {
-    return createLazyProxy(() => {
-        const particles = optionsFunc?.() ?? ({} as ReturnType<NonNullable<typeof optionsFunc>>);
+    return createLazyProxy(feature => {
+        const particles =
+            optionsFunc?.call(feature, feature) ??
+            ({} as ReturnType<NonNullable<typeof optionsFunc>>);
         particles.id = getUniqueID("particles-");
         particles.type = ParticlesType;
-        particles[Component] = ParticlesComponent;
+        particles[Component] = ParticlesComponent as GenericComponent;
 
         particles.app = shallowRef(null);
         particles.addEmitter = (config: EmitterConfigV3): Promise<Emitter> => {
diff --git a/src/features/repeatable.tsx b/src/features/repeatable.tsx
new file mode 100644
index 0000000..e82f8eb
--- /dev/null
+++ b/src/features/repeatable.tsx
@@ -0,0 +1,299 @@
+import { isArray } from "@vue/shared";
+import ClickableComponent from "features/clickables/Clickable.vue";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
+import { Component, GatherProps, Visibility, getUniqueID, jsx, setDefault } from "features/feature";
+import { DefaultValue, Persistent, persistent } from "game/persistence";
+import {
+    Requirements,
+    createVisibilityRequirement,
+    displayRequirements,
+    maxRequirementsMet,
+    payRequirements,
+    requirementsMet
+} from "game/requirements";
+import type { DecimalSource } from "util/bignum";
+import Decimal, { formatWhole } from "util/bignum";
+import type {
+    Computable,
+    GetComputableType,
+    GetComputableTypeWithDefault,
+    ProcessedComputable
+} from "util/computed";
+import { processComputable } from "util/computed";
+import { createLazyProxy } from "util/proxies";
+import { coerceComponent, isCoercableComponent } from "util/vue";
+import type { Ref } from "vue";
+import { computed, unref } from "vue";
+import { GenericDecorator } from "./decorators/common";
+
+/** A symbol used to identify {@link Repeatable} features. */
+export const RepeatableType = Symbol("Repeatable");
+
+/** A type that can be used to customize the {@link Repeatable} display. */
+export type RepeatableDisplay =
+    | CoercableComponent
+    | {
+          /** A header to appear at the top of the display. */
+          title?: CoercableComponent;
+          /** The main text that appears in the display. */
+          description?: CoercableComponent;
+          /** A description of the current effect of this repeatable, based off its amount. */
+          effectDisplay?: CoercableComponent;
+          /** Whether or not to show the current amount of this repeatable at the bottom of the display. */
+          showAmount?: boolean;
+      };
+
+/** An object that configures a {@link Repeatable}. */
+export interface RepeatableOptions {
+    /** Whether this repeatable should be visible. */
+    visibility?: Computable<Visibility | boolean>;
+    /** The requirement(s) to increase this repeatable. */
+    requirements: Requirements;
+    /** The maximum amount obtainable for this repeatable. */
+    limit?: Computable<DecimalSource>;
+    /** The initial amount this repeatable has on a new save / after reset. */
+    initialAmount?: DecimalSource;
+    /** Dictionary of CSS classes to apply to this feature. */
+    classes?: Computable<Record<string, boolean>>;
+    /** CSS to apply to this feature. */
+    style?: Computable<StyleValue>;
+    /** Shows a marker on the corner of the feature. */
+    mark?: Computable<boolean | string>;
+    /** Toggles a smaller design for the feature. */
+    small?: Computable<boolean>;
+    /** The display to use for this repeatable. */
+    display?: Computable<RepeatableDisplay>;
+}
+
+/**
+ * The properties that are added onto a processed {@link RepeatableOptions} to create a {@link Repeatable}.
+ */
+export interface BaseRepeatable {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
+    id: string;
+    /** The current amount this repeatable has. */
+    amount: Persistent<DecimalSource>;
+    /** Whether or not this repeatable's amount is at it's limit. */
+    maxed: Ref<boolean>;
+    /** Whether or not this repeatable can be clicked. */
+    canClick: ProcessedComputable<boolean>;
+    /**
+     * How much amount can be increased by, or 1 if unclickable.
+     **/
+    amountToIncrease: Ref<DecimalSource>;
+    /** A function that gets called when this repeatable is clicked. */
+    onClick: (event?: MouseEvent | TouchEvent) => void;
+    /** A symbol that helps identify features of the same type. */
+    type: typeof RepeatableType;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
+    [GatherProps]: () => Record<string, unknown>;
+}
+
+/** An object that represents a feature with multiple "levels" with scaling requirements. */
+export type Repeatable<T extends RepeatableOptions> = Replace<
+    T & BaseRepeatable,
+    {
+        visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
+        requirements: GetComputableType<T["requirements"]>;
+        limit: GetComputableTypeWithDefault<T["limit"], Decimal>;
+        classes: GetComputableType<T["classes"]>;
+        style: GetComputableType<T["style"]>;
+        mark: GetComputableType<T["mark"]>;
+        small: GetComputableType<T["small"]>;
+        display: Ref<CoercableComponent>;
+    }
+>;
+
+/** A type that matches any valid {@link Repeatable} object. */
+export type GenericRepeatable = Replace<
+    Repeatable<RepeatableOptions>,
+    {
+        visibility: ProcessedComputable<Visibility | boolean>;
+        limit: ProcessedComputable<DecimalSource>;
+    }
+>;
+
+/**
+ * Lazily creates a repeatable with the given options.
+ * @param optionsFunc Repeatable options.
+ */
+export function createRepeatable<T extends RepeatableOptions>(
+    optionsFunc: OptionsFunc<T, BaseRepeatable, GenericRepeatable>,
+    ...decorators: GenericDecorator[]
+): Repeatable<T> {
+    const amount = persistent<DecimalSource>(0);
+    const decoratedData = decorators.reduce(
+        (current, next) => Object.assign(current, next.getPersistentData?.()),
+        {}
+    );
+    return createLazyProxy<Repeatable<T>, Repeatable<T>>(feature => {
+        const repeatable = optionsFunc.call(feature, feature);
+
+        repeatable.id = getUniqueID("repeatable-");
+        repeatable.type = RepeatableType;
+        repeatable[Component] = ClickableComponent as GenericComponent;
+
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(repeatable);
+        }
+
+        repeatable.amount = amount;
+        repeatable.amount[DefaultValue] = repeatable.initialAmount ?? 0;
+
+        Object.assign(repeatable, decoratedData);
+
+        const limitRequirement = {
+            requirementMet: computed(() =>
+                Decimal.sub(
+                    unref((repeatable as GenericRepeatable).limit),
+                    (repeatable as GenericRepeatable).amount.value
+                )
+            ),
+            requiresPay: false,
+            visibility: Visibility.None,
+            canMaximize: true
+        } as const;
+        const visibilityRequirement = createVisibilityRequirement(repeatable as GenericRepeatable);
+        if (isArray(repeatable.requirements)) {
+            repeatable.requirements.unshift(visibilityRequirement);
+            repeatable.requirements.push(limitRequirement);
+        } else {
+            repeatable.requirements = [
+                visibilityRequirement,
+                repeatable.requirements,
+                limitRequirement
+            ];
+        }
+
+        repeatable.maxed = computed(() =>
+            Decimal.gte(
+                (repeatable as GenericRepeatable).amount.value,
+                unref((repeatable as GenericRepeatable).limit)
+            )
+        );
+        processComputable(repeatable as T, "classes");
+        const classes = repeatable.classes as
+            | ProcessedComputable<Record<string, boolean>>
+            | undefined;
+        repeatable.classes = computed(() => {
+            const currClasses = unref(classes) || {};
+            if ((repeatable as GenericRepeatable).maxed.value) {
+                currClasses.bought = true;
+            }
+            return currClasses;
+        });
+        repeatable.amountToIncrease = computed(() =>
+            Decimal.clampMin(maxRequirementsMet(repeatable.requirements), 1)
+        );
+        repeatable.canClick = computed(() => requirementsMet(repeatable.requirements));
+        const onClick = repeatable.onClick;
+        repeatable.onClick = function (this: GenericRepeatable, event?: MouseEvent | TouchEvent) {
+            const genericRepeatable = repeatable as GenericRepeatable;
+            if (!unref(genericRepeatable.canClick)) {
+                return;
+            }
+            const amountToIncrease = unref(repeatable.amountToIncrease) ?? 1;
+            payRequirements(repeatable.requirements, amountToIncrease);
+            genericRepeatable.amount.value = Decimal.add(
+                genericRepeatable.amount.value,
+                amountToIncrease
+            );
+            onClick?.(event);
+        };
+        processComputable(repeatable as T, "display");
+        const display = repeatable.display;
+        repeatable.display = jsx(() => {
+            // TODO once processComputable types correctly, remove this "as X"
+            const currDisplay = unref(display) as RepeatableDisplay;
+            if (isCoercableComponent(currDisplay)) {
+                const CurrDisplay = coerceComponent(currDisplay);
+                return <CurrDisplay />;
+            }
+            if (currDisplay != null) {
+                const genericRepeatable = repeatable as GenericRepeatable;
+                const Title = coerceComponent(currDisplay.title ?? "", "h3");
+                const Description = coerceComponent(currDisplay.description ?? "");
+                const EffectDisplay = coerceComponent(currDisplay.effectDisplay ?? "");
+
+                return (
+                    <span>
+                        {currDisplay.title == null ? null : (
+                            <div>
+                                <Title />
+                            </div>
+                        )}
+                        {currDisplay.description == null ? null : <Description />}
+                        {currDisplay.showAmount === false ? null : (
+                            <div>
+                                <br />
+                                <>Amount: {formatWhole(genericRepeatable.amount.value)}</>
+                                {Decimal.isFinite(unref(genericRepeatable.limit)) ? (
+                                    <> / {formatWhole(unref(genericRepeatable.limit))}</>
+                                ) : undefined}
+                            </div>
+                        )}
+                        {currDisplay.effectDisplay == null ? null : (
+                            <div>
+                                <br />
+                                Currently: <EffectDisplay />
+                            </div>
+                        )}
+                        {genericRepeatable.maxed.value ? null : (
+                            <div>
+                                <br />
+                                {displayRequirements(
+                                    genericRepeatable.requirements,
+                                    unref(repeatable.amountToIncrease)
+                                )}
+                            </div>
+                        )}
+                    </span>
+                );
+            }
+            return "";
+        });
+
+        processComputable(repeatable as T, "visibility");
+        setDefault(repeatable, "visibility", Visibility.Visible);
+        processComputable(repeatable as T, "limit");
+        setDefault(repeatable, "limit", Decimal.dInf);
+        processComputable(repeatable as T, "style");
+        processComputable(repeatable as T, "mark");
+        processComputable(repeatable as T, "small");
+
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(repeatable);
+        }
+
+        const decoratedProps = decorators.reduce(
+            (current, next) => Object.assign(current, next.getGatheredProps?.(repeatable)),
+            {}
+        );
+        repeatable[GatherProps] = function (this: GenericRepeatable) {
+            const { display, visibility, style, classes, onClick, canClick, small, mark, id } =
+                this;
+            return {
+                display,
+                visibility,
+                style: unref(style),
+                classes,
+                onClick,
+                canClick,
+                small,
+                mark,
+                id,
+                ...decoratedProps
+            };
+        };
+
+        return repeatable as unknown as Repeatable<T>;
+    });
+}
diff --git a/src/features/reset.ts b/src/features/reset.ts
index eaa3631..2b31e64 100644
--- a/src/features/reset.ts
+++ b/src/features/reset.ts
@@ -1,9 +1,10 @@
 import type { OptionsFunc, Replace } from "features/feature";
 import { getUniqueID } from "features/feature";
 import { globalBus } from "game/events";
+import Formula from "game/formulas/formulas";
 import type { BaseLayer } from "game/layers";
-import type { Persistent } from "game/persistence";
-import { DefaultValue, persistent, PersistentState } from "game/persistence";
+import { NonPersistent, Persistent, SkipPersistence } from "game/persistence";
+import { DefaultValue, persistent } from "game/persistence";
 import type { Unsubscribe } from "nanoevents";
 import Decimal from "util/bignum";
 import type { Computable, GetComputableType } from "util/computed";
@@ -11,19 +12,32 @@ import { processComputable } from "util/computed";
 import { createLazyProxy } from "util/proxies";
 import { isRef, unref } from "vue";
 
+/** A symbol used to identify {@link Reset} features. */
 export const ResetType = Symbol("Reset");
 
+/**
+ * An object that configures a {@link Clickable}.
+ */
 export interface ResetOptions {
-    thingsToReset: Computable<Record<string, unknown>[]>;
+    /** List of things to reset. Can include objects which will be recursed over for persistent values. */
+    thingsToReset: Computable<unknown[]>;
+    /** A function that is called when the reset is performed. */
     onReset?: VoidFunction;
 }
 
+/**
+ * The properties that are added onto a processed {@link ResetOptions} to create an {@link Reset}.
+ */
 export interface BaseReset {
+    /** An auto-generated ID for identifying which reset is being performed. Will not persist between refreshes or updates. */
     id: string;
+    /** Trigger the reset. */
     reset: VoidFunction;
+    /** A symbol that helps identify features of the same type. */
     type: typeof ResetType;
 }
 
+/** An object that represents a reset mechanic, which resets progress back to its initial state. */
 export type Reset<T extends ResetOptions> = Replace<
     T & BaseReset,
     {
@@ -31,23 +45,35 @@ export type Reset<T extends ResetOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link Reset} object. */
 export type GenericReset = Reset<ResetOptions>;
 
+/**
+ * Lazily creates a reset with the given options.
+ * @param optionsFunc Reset options.
+ */
 export function createReset<T extends ResetOptions>(
     optionsFunc: OptionsFunc<T, BaseReset, GenericReset>
 ): Reset<T> {
-    return createLazyProxy(() => {
-        const reset = optionsFunc();
+    return createLazyProxy(feature => {
+        const reset = optionsFunc.call(feature, feature);
         reset.id = getUniqueID("reset-");
         reset.type = ResetType;
 
         reset.reset = function () {
             const handleObject = (obj: unknown) => {
-                if (obj && typeof obj === "object") {
-                    if (PersistentState in obj) {
-                        (obj as Persistent)[PersistentState].value = (obj as Persistent)[
-                            DefaultValue
-                        ];
+                if (
+                    obj != null &&
+                    typeof obj === "object" &&
+                    !(obj instanceof Decimal) &&
+                    !(obj instanceof Formula)
+                ) {
+                    if (SkipPersistence in obj && obj[SkipPersistence] === true) {
+                        return;
+                    }
+                    if (DefaultValue in obj) {
+                        const persistent = obj as NonPersistent;
+                        persistent.value = persistent[DefaultValue];
                     } else if (!(obj instanceof Decimal) && !isRef(obj)) {
                         Object.values(obj).forEach(obj =>
                             handleObject(obj as Record<string, unknown>)
@@ -67,6 +93,11 @@ export function createReset<T extends ResetOptions>(
 }
 
 const listeners: Record<string, Unsubscribe | undefined> = {};
+/**
+ * Track the time since the specified reset last occured.
+ * @param layer The layer the reset is attached to
+ * @param reset The reset mechanic to track the time since
+ */
 export function trackResetTime(layer: BaseLayer, reset: GenericReset): Persistent<Decimal> {
     const resetTime = persistent<Decimal>(new Decimal(0));
     globalBus.on("addLayer", layerBeingAdded => {
diff --git a/src/features/resources/MainDisplay.vue b/src/features/resources/MainDisplay.vue
index 2367cae..660c298 100644
--- a/src/features/resources/MainDisplay.vue
+++ b/src/features/resources/MainDisplay.vue
@@ -2,7 +2,8 @@
     <Sticky>
         <div
             class="main-display-container"
-            :style="{ height: `${(effectRef?.$el.clientHeight ?? 0) + 50}px` }"
+            :class="classes ?? {}"
+            :style="[{ height: `${(effectRef?.$el.clientHeight ?? 0) + 50}px` }, style ?? {}]"
         >
             <div class="main-display">
                 <span v-if="showPrefix">You have </span>
diff --git a/src/features/resources/resource.ts b/src/features/resources/resource.ts
index 019a3d7..0247a67 100644
--- a/src/features/resources/resource.ts
+++ b/src/features/resources/resource.ts
@@ -1,36 +1,72 @@
 import { globalBus } from "game/events";
-import type { State } from "game/persistence";
-import { persistent } from "game/persistence";
+import type { Persistent, State } from "game/persistence";
+import { NonPersistent, persistent } from "game/persistence";
 import type { DecimalSource } from "util/bignum";
 import Decimal, { format, formatWhole } from "util/bignum";
 import type { ProcessedComputable } from "util/computed";
+import { loadingSave } from "util/save";
 import type { ComputedRef, Ref } from "vue";
 import { computed, isRef, ref, unref, watch } from "vue";
 
+/** An object that represents a named and quantifiable resource in the game. */
 export interface Resource<T = DecimalSource> extends Ref<T> {
+    /** The name of this resource. */
     displayName: string;
+    /** When displaying the value of this resource, how many significant digits to display. */
     precision: number;
+    /** Whether or not to display very small values using scientific notation, or rounding to 0. */
     small?: boolean;
 }
 
+/**
+ * Creates a resource.
+ * @param defaultValue The initial value of the resource
+ * @param displayName The human readable name of this resource
+ * @param precision The number of significant digits to display by default
+ * @param small Whether or not to display very small values or round to 0, by default
+ */
+export function createResource<T extends State>(
+    defaultValue: T,
+    displayName?: string,
+    precision?: number,
+    small?: boolean | undefined
+): Resource<T> & Persistent<T> & { [NonPersistent]: Resource<T> };
+export function createResource<T extends State>(
+    defaultValue: Ref<T>,
+    displayName?: string,
+    precision?: number,
+    small?: boolean | undefined
+): Resource<T>;
 export function createResource<T extends State>(
     defaultValue: T | Ref<T>,
     displayName = "points",
     precision = 0,
-    small = undefined
-): Resource<T> {
+    small: boolean | undefined = undefined
+) {
     const resource: Partial<Resource<T>> = isRef(defaultValue)
         ? defaultValue
         : persistent(defaultValue);
     resource.displayName = displayName;
     resource.precision = precision;
     resource.small = small;
+    if (!isRef(defaultValue)) {
+        const nonPersistentResource = (resource as Persistent<T>)[
+            NonPersistent
+        ] as unknown as Resource<T>;
+        nonPersistentResource.displayName = displayName;
+        nonPersistentResource.precision = precision;
+        nonPersistentResource.small = small;
+    }
     return resource as Resource<T>;
 }
 
+/** Returns a reference to the highest amount of the resource ever owned, which is updated automatically. */
 export function trackBest(resource: Resource): Ref<DecimalSource> {
     const best = persistent(resource.value);
     watch(resource, amount => {
+        if (loadingSave.value) {
+            return;
+        }
         if (Decimal.gt(amount, best.value)) {
             best.value = amount;
         }
@@ -38,9 +74,13 @@ export function trackBest(resource: Resource): Ref<DecimalSource> {
     return best;
 }
 
+/** Returns a reference to the total amount of the resource gained, updated automatically. "Refunds" count as gain. */
 export function trackTotal(resource: Resource): Ref<DecimalSource> {
     const total = persistent(resource.value);
     watch(resource, (amount, prevAmount) => {
+        if (loadingSave.value) {
+            return;
+        }
         if (Decimal.gt(amount, prevAmount)) {
             total.value = Decimal.add(total.value, Decimal.sub(amount, prevAmount));
         }
@@ -50,6 +90,7 @@ export function trackTotal(resource: Resource): Ref<DecimalSource> {
 
 const tetra8 = new Decimal("10^^8");
 const e100 = new Decimal("1e100");
+/** Returns a reference to the amount of resource being gained in terms of orders of magnitude per second, calcualted over the last tick. Useful for situations where the gain rate is increasing very rapidly. */
 export function trackOOMPS(
     resource: Resource,
     pointGain?: ComputedRef<DecimalSource>
@@ -108,14 +149,16 @@ export function trackOOMPS(
     return oompsString;
 }
 
+/** Utility for displaying a resource with the correct precision. */
 export function displayResource(resource: Resource, overrideAmount?: DecimalSource): string {
     const amount = overrideAmount ?? resource.value;
     if (Decimal.eq(resource.precision, 0)) {
-        return formatWhole(amount);
+        return formatWhole(resource.small ? amount : Decimal.floor(amount));
     }
     return format(amount, resource.precision, resource.small);
 }
 
+/** Utility for unwrapping a resource that may or may not be inside a ref. */
 export function unwrapResource(resource: ProcessedComputable<Resource>): Resource {
     if ("displayName" in resource) {
         return resource;
diff --git a/src/features/tabs/TabButton.vue b/src/features/tabs/TabButton.vue
index c9347d1..2b4991f 100644
--- a/src/features/tabs/TabButton.vue
+++ b/src/features/tabs/TabButton.vue
@@ -1,11 +1,11 @@
 <template>
     <button
-        v-if="unref(visibility) !== Visibility.None"
+        v-if="isVisible(visibility)"
         @click="selectTab"
         class="tabButton"
         :style="[
             {
-                visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
+                visibility: isHidden(visibility) ? 'hidden' : undefined
             },
             glowColorStyle,
             unref(style) ?? {}
@@ -21,7 +21,7 @@
 
 <script lang="ts">
 import type { CoercableComponent, StyleValue } from "features/feature";
-import { Visibility } from "features/feature";
+import { isHidden, isVisible, Visibility } from "features/feature";
 import { getNotifyStyle } from "game/notifications";
 import { computeComponent, processedPropType, unwrapRef } from "util/vue";
 import { computed, defineComponent, toRefs, unref } from "vue";
@@ -29,7 +29,7 @@ import { computed, defineComponent, toRefs, unref } from "vue";
 export default defineComponent({
     props: {
         visibility: {
-            type: processedPropType<Visibility>(Number),
+            type: processedPropType<Visibility | boolean>(Number, Boolean),
             required: true
         },
         display: {
@@ -50,7 +50,7 @@ export default defineComponent({
 
         const glowColorStyle = computed(() => {
             const color = unwrapRef(glowColor);
-            if (!color) {
+            if (color == null || color === "") {
                 return {};
             }
             if (unref(floating)) {
@@ -68,7 +68,9 @@ export default defineComponent({
             component,
             glowColorStyle,
             unref,
-            Visibility
+            Visibility,
+            isVisible,
+            isHidden
         };
     }
 });
diff --git a/src/features/tabs/TabFamily.vue b/src/features/tabs/TabFamily.vue
index 1ae9007..436f81a 100644
--- a/src/features/tabs/TabFamily.vue
+++ b/src/features/tabs/TabFamily.vue
@@ -1,11 +1,11 @@
 <template>
     <div
-        v-if="unref(visibility) !== Visibility.None"
+        v-if="isVisible(visibility)"
         class="tab-family-container"
         :class="{ ...unref(classes), ...tabClasses }"
         :style="[
             {
-                visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
+                visibility: isHidden(visibility) ? 'hidden' : undefined
             },
             unref(style) ?? [],
             tabStyle ?? []
@@ -37,7 +37,7 @@
 import Sticky from "components/layout/Sticky.vue";
 import themes from "data/themes";
 import type { CoercableComponent, StyleValue } from "features/feature";
-import { Visibility } from "features/feature";
+import { isHidden, isVisible, Visibility } from "features/feature";
 import type { GenericTab } from "features/tabs/tab";
 import TabButton from "features/tabs/TabButton.vue";
 import type { GenericTabButton } from "features/tabs/tabFamily";
@@ -49,7 +49,7 @@ import { computed, defineComponent, shallowRef, toRefs, unref, watchEffect } fro
 export default defineComponent({
     props: {
         visibility: {
-            type: processedPropType<Visibility>(Number),
+            type: processedPropType<Visibility | boolean>(Number, Boolean),
             required: true
         },
         activeTab: {
@@ -123,7 +123,9 @@ export default defineComponent({
             Visibility,
             component,
             gatherButtonProps,
-            unref
+            unref,
+            isVisible,
+            isHidden
         };
     }
 });
@@ -220,8 +222,8 @@ export default defineComponent({
 }
 
 .showGoBack
-    > .tab-family-container
-    > .tab-buttons-container:not(.floating):first-child
+    > .tab-family-container:first-child
+    > .tab-buttons-container:not(.floating)
     .tab-buttons {
     padding-left: 70px;
 }
diff --git a/src/features/tabs/tab.ts b/src/features/tabs/tab.ts
index 3f205fc..111f954 100644
--- a/src/features/tabs/tab.ts
+++ b/src/features/tabs/tab.ts
@@ -1,24 +1,48 @@
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import { Component, GatherProps, getUniqueID } from "features/feature";
 import TabComponent from "features/tabs/Tab.vue";
 import type { Computable, GetComputableType } from "util/computed";
 import { createLazyProxy } from "util/proxies";
 
+/** A symbol used to identify {@link Tab} features. */
 export const TabType = Symbol("Tab");
 
+/**
+ * An object that configures a {@link Tab}.
+ */
 export interface TabOptions {
+    /** Dictionary of CSS classes to apply to this feature. */
     classes?: Computable<Record<string, boolean>>;
+    /** CSS to apply to this feature. */
     style?: Computable<StyleValue>;
+    /** The display to use for this tab. */
     display: Computable<CoercableComponent>;
 }
 
+/**
+ * The properties that are added onto a processed {@link TabOptions} to create an {@link Tab}.
+ */
 export interface BaseTab {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
     id: string;
+    /** A symbol that helps identify features of the same type. */
     type: typeof TabType;
-    [Component]: typeof TabComponent;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
 
+/**
+ * An object representing a tab of content in a tabbed interface.
+ * @see {@link TabFamily}
+ */
 export type Tab<T extends TabOptions> = Replace<
     T & BaseTab,
     {
@@ -28,16 +52,21 @@ export type Tab<T extends TabOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link Tab} object. */
 export type GenericTab = Tab<TabOptions>;
 
+/**
+ * Lazily creates a tab with the given options.
+ * @param optionsFunc Tab options.
+ */
 export function createTab<T extends TabOptions>(
     optionsFunc: OptionsFunc<T, BaseTab, GenericTab>
 ): Tab<T> {
-    return createLazyProxy(() => {
-        const tab = optionsFunc();
+    return createLazyProxy(feature => {
+        const tab = optionsFunc.call(feature, feature);
         tab.id = getUniqueID("tab-");
         tab.type = TabType;
-        tab[Component] = TabComponent;
+        tab[Component] = TabComponent as GenericComponent;
 
         tab[GatherProps] = function (this: GenericTab) {
             const { display } = this;
diff --git a/src/features/tabs/tabFamily.ts b/src/features/tabs/tabFamily.ts
index 3298e0a..aa7fafc 100644
--- a/src/features/tabs/tabFamily.ts
+++ b/src/features/tabs/tabFamily.ts
@@ -1,5 +1,18 @@
-import type { CoercableComponent, GenericComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
-import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
+import {
+    Component,
+    GatherProps,
+    getUniqueID,
+    isVisible,
+    setDefault,
+    Visibility
+} from "features/feature";
 import TabButtonComponent from "features/tabs/TabButton.vue";
 import TabFamilyComponent from "features/tabs/TabFamily.vue";
 import type { Persistent } from "game/persistence";
@@ -16,23 +29,43 @@ import type { Ref } from "vue";
 import { computed, unref } from "vue";
 import type { GenericTab } from "./tab";
 
+/** A symbol used to identify {@link TabButton} features. */
 export const TabButtonType = Symbol("TabButton");
+/** A symbol used to identify {@link TabFamily} features. */
 export const TabFamilyType = Symbol("TabFamily");
 
+/**
+ * An object that configures a {@link TabButton}.
+ */
 export interface TabButtonOptions {
-    visibility?: Computable<Visibility>;
+    /** Whether this tab button should be visible. */
+    visibility?: Computable<Visibility | boolean>;
+    /** The tab to display when this button is clicked. */
     tab: Computable<GenericTab | CoercableComponent>;
+    /** The label on this button. */
     display: Computable<CoercableComponent>;
+    /** Dictionary of CSS classes to apply to this feature. */
     classes?: Computable<Record<string, boolean>>;
+    /** CSS to apply to this feature. */
     style?: Computable<StyleValue>;
+    /** The color of the glow effect to display when this button is active. */
     glowColor?: Computable<string>;
 }
 
+/**
+ * The properties that are added onto a processed {@link TabButtonOptions} to create an {@link TabButton}.
+ */
 export interface BaseTabButton {
+    /** A symbol that helps identify features of the same type. */
     type: typeof TabButtonType;
-    [Component]: typeof TabButtonComponent;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
 }
 
+/**
+ * An object that represents a button that can be clicked to change tabs in a tabbed interface.
+ * @see {@link TabFamily}
+ */
 export type TabButton<T extends TabButtonOptions> = Replace<
     T & BaseTabButton,
     {
@@ -45,31 +78,54 @@ export type TabButton<T extends TabButtonOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link TabButton} object. */
 export type GenericTabButton = Replace<
     TabButton<TabButtonOptions>,
     {
-        visibility: ProcessedComputable<Visibility>;
+        visibility: ProcessedComputable<Visibility | boolean>;
     }
 >;
 
+/**
+ * An object that configures a {@link TabFamily}.
+ */
 export interface TabFamilyOptions {
-    visibility?: Computable<Visibility>;
+    /** Whether this tab button should be visible. */
+    visibility?: Computable<Visibility | boolean>;
+    /** Dictionary of CSS classes to apply to this feature. */
     classes?: Computable<Record<string, boolean>>;
+    /** CSS to apply to this feature. */
     style?: Computable<StyleValue>;
+    /** A dictionary of CSS classes to apply to the list of buttons for changing tabs. */
     buttonContainerClasses?: Computable<Record<string, boolean>>;
+    /** CSS to apply to the list of buttons for changing tabs. */
     buttonContainerStyle?: Computable<StyleValue>;
 }
 
+/**
+ * The properties that are added onto a processed {@link TabFamilyOptions} to create an {@link TabFamily}.
+ */
 export interface BaseTabFamily {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
     id: string;
+    /** All the tabs within this family. */
     tabs: Record<string, TabButtonOptions>;
+    /** The currently active tab, if any. */
     activeTab: Ref<GenericTab | CoercableComponent | null>;
+    /** The name of the tab that is currently active. */
     selected: Persistent<string>;
+    /** A symbol that helps identify features of the same type. */
     type: typeof TabFamilyType;
+    /** The Vue component used to render this feature. */
     [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
 
+/**
+ * An object that represents a tabbed interface.
+ * @see {@link TabFamily}
+ */
 export type TabFamily<T extends TabFamilyOptions> = Replace<
     T & BaseTabFamily,
     {
@@ -78,25 +134,31 @@ export type TabFamily<T extends TabFamilyOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link TabFamily} object. */
 export type GenericTabFamily = Replace<
     TabFamily<TabFamilyOptions>,
     {
-        visibility: ProcessedComputable<Visibility>;
+        visibility: ProcessedComputable<Visibility | boolean>;
     }
 >;
 
+/**
+ * Lazily creates a tab family with the given options.
+ * @param optionsFunc Tab family options.
+ */
 export function createTabFamily<T extends TabFamilyOptions>(
     tabs: Record<string, () => TabButtonOptions>,
     optionsFunc?: OptionsFunc<T, BaseTabFamily, GenericTabFamily>
 ): TabFamily<T> {
     if (Object.keys(tabs).length === 0) {
-        console.warn("Cannot create tab family with 0 tabs");
-        throw "Cannot create tab family with 0 tabs";
+        console.error("Cannot create tab family with 0 tabs");
     }
 
-    const selected = persistent(Object.keys(tabs)[0]);
-    return createLazyProxy(() => {
-        const tabFamily = optionsFunc?.() ?? ({} as ReturnType<NonNullable<typeof optionsFunc>>);
+    const selected = persistent(Object.keys(tabs)[0], false);
+    return createLazyProxy(feature => {
+        const tabFamily =
+            optionsFunc?.call(feature, feature) ??
+            ({} as ReturnType<NonNullable<typeof optionsFunc>>);
 
         tabFamily.id = getUniqueID("tabFamily-");
         tabFamily.type = TabFamilyType;
@@ -106,7 +168,7 @@ export function createTabFamily<T extends TabFamilyOptions>(
             (parsedTabs, tab) => {
                 const tabButton: TabButtonOptions & Partial<BaseTabButton> = tabs[tab]();
                 tabButton.type = TabButtonType;
-                tabButton[Component] = TabButtonComponent;
+                tabButton[Component] = TabButtonComponent as GenericComponent;
 
                 processComputable(tabButton as TabButtonOptions, "visibility");
                 setDefault(tabButton, "visibility", Visibility.Visible);
@@ -123,15 +185,10 @@ export function createTabFamily<T extends TabFamilyOptions>(
         tabFamily.selected = selected;
         tabFamily.activeTab = computed(() => {
             const tabs = unref(processedTabFamily.tabs);
-            if (
-                selected.value in tabs &&
-                unref(tabs[selected.value].visibility) === Visibility.Visible
-            ) {
+            if (selected.value in tabs && isVisible(tabs[selected.value].visibility)) {
                 return unref(tabs[selected.value].tab);
             }
-            const firstTab = Object.values(tabs).find(
-                tab => unref(tab.visibility) === Visibility.Visible
-            );
+            const firstTab = Object.values(tabs).find(tab => isVisible(tab.visibility));
             if (firstTab) {
                 return unref(firstTab.tab);
             }
diff --git a/src/features/tooltips/tooltip.ts b/src/features/tooltips/tooltip.ts
index dcc618f..54d782c 100644
--- a/src/features/tooltips/tooltip.ts
+++ b/src/features/tooltips/tooltip.ts
@@ -1,6 +1,6 @@
-import type { CoercableComponent, Replace, StyleValue } from "features/feature";
+import type { CoercableComponent, GenericComponent, Replace, StyleValue } from "features/feature";
 import { Component, GatherProps, setDefault } from "features/feature";
-import { persistent } from "game/persistence";
+import { deletePersistent, Persistent, persistent } from "game/persistence";
 import { Direction } from "util/common";
 import type {
     Computable,
@@ -21,24 +21,38 @@ declare module "@vue/runtime-dom" {
     }
 }
 
+/**
+ * An object that configures a {@link Tooltip}.
+ */
 export interface TooltipOptions {
+    /** Whether or not this tooltip can be pinned, meaning it'll stay visible even when not hovered. */
     pinnable?: boolean;
+    /** The text to display inside the tooltip. */
     display: Computable<CoercableComponent>;
+    /** Dictionary of CSS classes to apply to this feature. */
     classes?: Computable<Record<string, boolean>>;
+    /** CSS to apply to this feature. */
     style?: Computable<StyleValue>;
+    /** The direction in which to display the tooltip */
     direction?: Computable<Direction>;
+    /** The x offset of the tooltip, in px. */
     xoffset?: Computable<string>;
+    /** The y offset of the tooltip, in px. */
     yoffset?: Computable<string>;
 }
 
+/**
+ * The properties that are added onto a processed {@link TooltipOptions} to create an {@link Tooltip}.
+ */
 export interface BaseTooltip {
     pinned?: Ref<boolean>;
 }
 
+/** An object that represents a tooltip that appears when hovering over an element. */
 export type Tooltip<T extends TooltipOptions> = Replace<
     T & BaseTooltip,
     {
-        pinnable: T["pinnable"] extends undefined ? false : T["pinnable"];
+        pinnable: undefined extends T["pinnable"] ? false : T["pinnable"];
         pinned: T["pinnable"] extends true ? Ref<boolean> : undefined;
         display: GetComputableType<T["display"]>;
         classes: GetComputableType<T["classes"]>;
@@ -49,6 +63,7 @@ export type Tooltip<T extends TooltipOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link Tooltip} object. */
 export type GenericTooltip = Replace<
     Tooltip<TooltipOptions>,
     {
@@ -58,6 +73,11 @@ export type GenericTooltip = Replace<
     }
 >;
 
+/**
+ * Creates a tooltip on the given element with the given options.
+ * @param element The renderable feature to display the tooltip on.
+ * @param options Tooltip options.
+ */
 export function addTooltip<T extends TooltipOptions>(
     element: VueFeature,
     options: T & ThisType<Tooltip<T>> & Partial<BaseTooltip>
@@ -71,20 +91,12 @@ export function addTooltip<T extends TooltipOptions>(
     processComputable(options as T, "yoffset");
 
     if (options.pinnable) {
-        if ("pinned" in element) {
-            console.error(
-                "Cannot add pinnable tooltip to element that already has a property called 'pinned'"
-            );
-            options.pinnable = false;
-        } else {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (element as any).pinned = options.pinned = persistent<boolean>(false);
-        }
+        options.pinned = persistent<boolean>(false, false);
     }
 
     nextTick(() => {
         const elementComponent = element[Component];
-        element[Component] = TooltipComponent;
+        element[Component] = TooltipComponent as GenericComponent;
         const elementGatherProps = element[GatherProps].bind(element);
         element[GatherProps] = function gatherTooltipProps(this: GenericTooltip) {
             const { display, classes, style, direction, xoffset, yoffset, pinned } = this;
diff --git a/src/features/trees/TreeNode.vue b/src/features/trees/TreeNode.vue
index 6c6cb09..b6ce3d3 100644
--- a/src/features/trees/TreeNode.vue
+++ b/src/features/trees/TreeNode.vue
@@ -1,7 +1,7 @@
 <template>
     <div
-        v-if="unref(visibility) !== Visibility.None"
-        :style="{ visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined }"
+        v-if="isVisible(visibility)"
+        :style="{ visibility: isHidden(visibility) ? 'hidden' : undefined }"
         :class="{
             treeNode: true,
             can: unref(canClick),
@@ -37,7 +37,7 @@
 import MarkNode from "components/MarkNode.vue";
 import Node from "components/Node.vue";
 import type { CoercableComponent, StyleValue } from "features/feature";
-import { Visibility } from "features/feature";
+import { isHidden, isVisible, Visibility } from "features/feature";
 import {
     computeOptionalComponent,
     isCoercableComponent,
@@ -51,7 +51,7 @@ export default defineComponent({
     props: {
         display: processedPropType<CoercableComponent>(Object, String, Function),
         visibility: {
-            type: processedPropType<Visibility>(Number),
+            type: processedPropType<Visibility | boolean>(Number, Boolean),
             required: true
         },
         style: processedPropType<StyleValue>(String, Object, Array),
@@ -87,7 +87,9 @@ export default defineComponent({
             comp,
             unref,
             Visibility,
-            isCoercableComponent
+            isCoercableComponent,
+            isVisible,
+            isHidden
         };
     }
 });
@@ -111,7 +113,6 @@ export default defineComponent({
     color: rgba(0, 0, 0, 0.5);
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
     box-shadow: -4px -4px 4px rgba(0, 0, 0, 0.25) inset, 0px 0px 20px var(--background);
-    text-transform: capitalize;
     display: flex;
 }
 
diff --git a/src/features/trees/tree.ts b/src/features/trees/tree.ts
index 3fbf935..da77f60 100644
--- a/src/features/trees/tree.ts
+++ b/src/features/trees/tree.ts
@@ -1,4 +1,11 @@
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import { Decorator, GenericDecorator } from "features/decorators/common";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
 import type { Link } from "features/links/links";
 import type { GenericReset } from "features/reset";
@@ -19,30 +26,54 @@ import { createLazyProxy } from "util/proxies";
 import type { Ref } from "vue";
 import { computed, ref, shallowRef, unref } from "vue";
 
+/** A symbol used to identify {@link TreeNode} features. */
 export const TreeNodeType = Symbol("TreeNode");
+/** A symbol used to identify {@link Tree} features. */
 export const TreeType = Symbol("Tree");
 
+/**
+ * An object that configures a {@link TreeNode}.
+ */
 export interface TreeNodeOptions {
-    visibility?: Computable<Visibility>;
+    /** Whether this tree node should be visible. */
+    visibility?: Computable<Visibility | boolean>;
+    /** Whether or not this tree node can be clicked. */
     canClick?: Computable<boolean>;
+    /** The background color for this node. */
     color?: Computable<string>;
+    /** The label to display on this tree node. */
     display?: Computable<CoercableComponent>;
+    /** The color of the glow effect shown to notify the user there's something to do with this node. */
     glowColor?: Computable<string>;
+    /** Dictionary of CSS classes to apply to this feature. */
     classes?: Computable<Record<string, boolean>>;
+    /** CSS to apply to this feature. */
     style?: Computable<StyleValue>;
+    /** Shows a marker on the corner of the feature. */
     mark?: Computable<boolean | string>;
+    /** A reset object attached to this node, used for propagating resets through the tree. */
     reset?: GenericReset;
+    /** A function that is called when the tree node is clicked. */
     onClick?: (e?: MouseEvent | TouchEvent) => void;
+    /** A function that is called when the tree node is held down. */
     onHold?: VoidFunction;
 }
 
+/**
+ * The properties that are added onto a processed {@link TreeNodeOptions} to create an {@link TreeNode}.
+ */
 export interface BaseTreeNode {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
     id: string;
+    /** A symbol that helps identify features of the same type. */
     type: typeof TreeNodeType;
-    [Component]: typeof TreeNodeComponent;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
 
+/** An object that represents a node on a tree. */
 export type TreeNode<T extends TreeNodeOptions> = Replace<
     T & BaseTreeNode,
     {
@@ -57,22 +88,40 @@ export type TreeNode<T extends TreeNodeOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link TreeNode} object. */
 export type GenericTreeNode = Replace<
     TreeNode<TreeNodeOptions>,
     {
-        visibility: ProcessedComputable<Visibility>;
+        visibility: ProcessedComputable<Visibility | boolean>;
         canClick: ProcessedComputable<boolean>;
     }
 >;
 
+/**
+ * Lazily creates a tree node with the given options.
+ * @param optionsFunc Tree Node options.
+ */
 export function createTreeNode<T extends TreeNodeOptions>(
-    optionsFunc?: OptionsFunc<T, BaseTreeNode, GenericTreeNode>
+    optionsFunc?: OptionsFunc<T, BaseTreeNode, GenericTreeNode>,
+    ...decorators: GenericDecorator[]
 ): TreeNode<T> {
-    return createLazyProxy(() => {
-        const treeNode = optionsFunc?.() ?? ({} as ReturnType<NonNullable<typeof optionsFunc>>);
+    const decoratedData = decorators.reduce(
+        (current, next) => Object.assign(current, next.getPersistentData?.()),
+        {}
+    );
+    return createLazyProxy(feature => {
+        const treeNode =
+            optionsFunc?.call(feature, feature) ??
+            ({} as ReturnType<NonNullable<typeof optionsFunc>>);
         treeNode.id = getUniqueID("treeNode-");
         treeNode.type = TreeNodeType;
-        treeNode[Component] = TreeNodeComponent;
+        treeNode[Component] = TreeNodeComponent as GenericComponent;
+
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(treeNode);
+        }
+
+        Object.assign(decoratedData);
 
         processComputable(treeNode as T, "visibility");
         setDefault(treeNode, "visibility", Visibility.Visible);
@@ -85,23 +134,31 @@ export function createTreeNode<T extends TreeNodeOptions>(
         processComputable(treeNode as T, "style");
         processComputable(treeNode as T, "mark");
 
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(treeNode);
+        }
+
         if (treeNode.onClick) {
             const onClick = treeNode.onClick.bind(treeNode);
-            treeNode.onClick = function () {
-                if (unref(treeNode.canClick)) {
-                    onClick();
+            treeNode.onClick = function (e) {
+                if (unref(treeNode.canClick) !== false) {
+                    onClick(e);
                 }
             };
         }
         if (treeNode.onHold) {
             const onHold = treeNode.onHold.bind(treeNode);
             treeNode.onHold = function () {
-                if (unref(treeNode.canClick)) {
+                if (unref(treeNode.canClick) !== false) {
                     onHold();
                 }
             };
         }
 
+        const decoratedProps = decorators.reduce(
+            (current, next) => Object.assign(current, next.getGatheredProps?.(treeNode)),
+            {}
+        );
         treeNode[GatherProps] = function (this: GenericTreeNode) {
             const {
                 display,
@@ -127,7 +184,8 @@ export function createTreeNode<T extends TreeNodeOptions>(
                 glowColor,
                 canClick,
                 mark,
-                id
+                id,
+                ...decoratedProps
             };
         };
 
@@ -135,32 +193,52 @@ export function createTreeNode<T extends TreeNodeOptions>(
     });
 }
 
+/** Represents a branch between two nodes in a tree. */
 export interface TreeBranch extends Omit<Link, "startNode" | "endNode"> {
     startNode: GenericTreeNode;
     endNode: GenericTreeNode;
 }
 
+/**
+ * An object that configures a {@link Tree}.
+ */
 export interface TreeOptions {
-    visibility?: Computable<Visibility>;
+    /** Whether this clickable should be visible. */
+    visibility?: Computable<Visibility | boolean>;
+    /** The nodes within the tree, in a 2D array. */
     nodes: Computable<GenericTreeNode[][]>;
+    /** Nodes to show on the left side of the tree. */
     leftSideNodes?: Computable<GenericTreeNode[]>;
+    /** Nodes to show on the right side of the tree. */
     rightSideNodes?: Computable<GenericTreeNode[]>;
+    /** The branches between nodes within this tree. */
     branches?: Computable<TreeBranch[]>;
+    /** How to propagate resets through the tree. */
     resetPropagation?: ResetPropagation;
+    /** A function that is called when a node within the tree is reset. */
     onReset?: (node: GenericTreeNode) => void;
 }
 
 export interface BaseTree {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
     id: string;
+    /** The link objects for each of the branches of the tree.  */
     links: Ref<Link[]>;
+    /** Cause a reset on this node and propagate it through the tree according to {@link resetPropagation}. */
     reset: (node: GenericTreeNode) => void;
+    /** A flag that is true while the reset is still propagating through the tree. */
     isResetting: Ref<boolean>;
+    /** A reference to the node that caused the currently propagating reset. */
     resettingNode: Ref<GenericTreeNode | null>;
+    /** A symbol that helps identify features of the same type. */
     type: typeof TreeType;
-    [Component]: typeof TreeComponent;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
 
+/** An object that represents a feature that is a tree of nodes with branches between them. Contains support for reset mechanics that can propagate through the tree. */
 export type Tree<T extends TreeOptions> = Replace<
     T & BaseTree,
     {
@@ -172,21 +250,26 @@ export type Tree<T extends TreeOptions> = Replace<
     }
 >;
 
+/** A type that matches any valid {@link Tree} object. */
 export type GenericTree = Replace<
     Tree<TreeOptions>,
     {
-        visibility: ProcessedComputable<Visibility>;
+        visibility: ProcessedComputable<Visibility | boolean>;
     }
 >;
 
+/**
+ * Lazily creates a tree with the given options.
+ * @param optionsFunc Tree options.
+ */
 export function createTree<T extends TreeOptions>(
     optionsFunc: OptionsFunc<T, BaseTree, GenericTree>
 ): Tree<T> {
-    return createLazyProxy(() => {
-        const tree = optionsFunc();
+    return createLazyProxy(feature => {
+        const tree = optionsFunc.call(feature, feature);
         tree.id = getUniqueID("tree-");
         tree.type = TreeType;
-        tree[Component] = TreeComponent;
+        tree[Component] = TreeComponent as GenericComponent;
 
         tree.isResetting = ref(false);
         tree.resettingNode = shallowRef(null);
@@ -221,10 +304,12 @@ export function createTree<T extends TreeOptions>(
     });
 }
 
+/** A function that is used to propagate resets through a tree. */
 export type ResetPropagation = {
     (tree: GenericTree, resettingNode: GenericTreeNode): void;
 };
 
+/** Propagate resets down the tree by resetting every node in a lower row. */
 export const defaultResetPropagation = function (
     tree: GenericTree,
     resettingNode: GenericTreeNode
@@ -236,6 +321,7 @@ export const defaultResetPropagation = function (
     }
 };
 
+/** Propagate resets down the tree by resetting every node in a lower row. */
 export const invertedResetPropagation = function (
     tree: GenericTree,
     resettingNode: GenericTreeNode
@@ -247,6 +333,7 @@ export const invertedResetPropagation = function (
     }
 };
 
+/** Propagate resets down the branches of the tree. */
 export const branchedResetPropagation = function (
     tree: GenericTree,
     resettingNode: GenericTreeNode
@@ -282,6 +369,10 @@ export const branchedResetPropagation = function (
     }
 };
 
+/**
+ * Utility for creating a tooltip for a tree node that displays a resource-based unlock requirement, and after unlock shows the amount of another resource.
+ * It sounds oddly specific, but comes up a lot.
+ */
 export function createResourceTooltip(
     resource: Resource,
     requiredResource: Resource | null = null,
diff --git a/src/features/upgrades/Upgrade.vue b/src/features/upgrades/Upgrade.vue
index f06ab41..d1fb6c3 100644
--- a/src/features/upgrades/Upgrade.vue
+++ b/src/features/upgrades/Upgrade.vue
@@ -1,9 +1,9 @@
 <template>
     <button
-        v-if="unref(visibility) !== Visibility.None"
+        v-if="isVisible(visibility)"
         :style="[
             {
-                visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
+                visibility: isHidden(visibility) ? 'hidden' : undefined
             },
             unref(style) ?? {}
         ]"
@@ -29,11 +29,9 @@ import "components/common/features.css";
 import MarkNode from "components/MarkNode.vue";
 import Node from "components/Node.vue";
 import type { StyleValue } from "features/feature";
-import { jsx, Visibility } from "features/feature";
-import type { Resource } from "features/resources/resource";
-import { displayResource } from "features/resources/resource";
+import { isHidden, isVisible, jsx, Visibility } from "features/feature";
 import type { GenericUpgrade } from "features/upgrades/upgrade";
-import type { DecimalSource } from "util/bignum";
+import { displayRequirements, Requirements } from "game/requirements";
 import { coerceComponent, isCoercableComponent, processedPropType, unwrapRef } from "util/vue";
 import type { Component, PropType, UnwrapRef } from "vue";
 import { defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
@@ -45,13 +43,15 @@ export default defineComponent({
             required: true
         },
         visibility: {
-            type: processedPropType<Visibility>(Number),
+            type: processedPropType<Visibility | boolean>(Number, Boolean),
             required: true
         },
         style: processedPropType<StyleValue>(String, Object, Array),
         classes: processedPropType<Record<string, boolean>>(Object),
-        resource: Object as PropType<Resource>,
-        cost: processedPropType<DecimalSource>(String, Object, Number),
+        requirements: {
+            type: Object as PropType<Requirements>,
+            required: true
+        },
         canPurchase: {
             type: processedPropType<boolean>(Boolean),
             required: true
@@ -75,7 +75,7 @@ export default defineComponent({
         MarkNode
     },
     setup(props) {
-        const { display, cost } = toRefs(props);
+        const { display, requirements, bought } = toRefs(props);
 
         const component = shallowRef<Component | string>("");
 
@@ -89,32 +89,24 @@ export default defineComponent({
                 component.value = coerceComponent(currDisplay);
                 return;
             }
-            const currCost = unwrapRef(cost);
             const Title = coerceComponent(currDisplay.title || "", "h3");
             const Description = coerceComponent(currDisplay.description, "div");
             const EffectDisplay = coerceComponent(currDisplay.effectDisplay || "");
             component.value = coerceComponent(
                 jsx(() => (
                     <span>
-                        {currDisplay.title ? (
+                        {currDisplay.title != null ? (
                             <div>
                                 <Title />
                             </div>
                         ) : null}
                         <Description />
-                        {currDisplay.effectDisplay ? (
+                        {currDisplay.effectDisplay != null ? (
                             <div>
                                 Currently: <EffectDisplay />
                             </div>
                         ) : null}
-                        {props.resource != null ? (
-                            <>
-                                <br />
-                                Cost: {props.resource &&
-                                    displayResource(props.resource, currCost)}{" "}
-                                {props.resource?.displayName}
-                            </>
-                        ) : null}
+                        {bought.value ? null : <><br />{displayRequirements(requirements.value)}</>}
                     </span>
                 ))
             );
@@ -123,7 +115,9 @@ export default defineComponent({
         return {
             component,
             unref,
-            Visibility
+            Visibility,
+            isVisible,
+            isHidden
         };
     }
 });
diff --git a/src/features/upgrades/upgrade.ts b/src/features/upgrades/upgrade.ts
index 1039632..9ff9b28 100644
--- a/src/features/upgrades/upgrade.ts
+++ b/src/features/upgrades/upgrade.ts
@@ -1,19 +1,30 @@
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import { isArray } from "@vue/shared";
+import { GenericDecorator } from "features/decorators/common";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import {
     Component,
-    findFeatures,
     GatherProps,
+    Visibility,
+    findFeatures,
     getUniqueID,
-    setDefault,
-    Visibility
+    setDefault
 } from "features/feature";
-import type { Resource } from "features/resources/resource";
 import UpgradeComponent from "features/upgrades/Upgrade.vue";
 import type { GenericLayer } from "game/layers";
 import type { Persistent } from "game/persistence";
 import { persistent } from "game/persistence";
-import type { DecimalSource } from "util/bignum";
-import Decimal from "util/bignum";
+import {
+    Requirements,
+    createVisibilityRequirement,
+    payRequirements,
+    requirementsMet
+} from "game/requirements";
 import { isFunction } from "util/common";
 import type {
     Computable,
@@ -26,37 +37,60 @@ import { createLazyProxy } from "util/proxies";
 import type { Ref } from "vue";
 import { computed, unref } from "vue";
 
+/** A symbol used to identify {@link Upgrade} features. */
 export const UpgradeType = Symbol("Upgrade");
 
+/**
+ * An object that configures a {@link Upgrade}.
+ */
 export interface UpgradeOptions {
-    visibility?: Computable<Visibility>;
+    /** Whether this clickable should be visible. */
+    visibility?: Computable<Visibility | boolean>;
+    /** Dictionary of CSS classes to apply to this feature. */
     classes?: Computable<Record<string, boolean>>;
+    /** CSS to apply to this feature. */
     style?: Computable<StyleValue>;
+    /** Shows a marker on the corner of the feature. */
+    mark?: Computable<boolean | string>;
+    /** The display to use for this clickable. */
     display?: Computable<
         | CoercableComponent
         | {
+              /** A header to appear at the top of the display. */
               title?: CoercableComponent;
+              /** The main text that appears in the display. */
               description: CoercableComponent;
+              /** A description of the current effect of the achievement. Useful when the effect changes dynamically. */
               effectDisplay?: CoercableComponent;
           }
     >;
-    mark?: Computable<boolean | string>;
-    cost?: Computable<DecimalSource>;
-    resource?: Resource;
-    canAfford?: Computable<boolean>;
+    /** The requirements to purchase this upgrade. */
+    requirements: Requirements;
+    /** A function that is called when the upgrade is purchased. */
     onPurchase?: VoidFunction;
 }
 
+/**
+ * The properties that are added onto a processed {@link UpgradeOptions} to create an {@link Upgrade}.
+ */
 export interface BaseUpgrade {
+    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
     id: string;
+    /** Whether or not this upgrade has been purchased. */
     bought: Persistent<boolean>;
+    /** Whether or not the upgrade can currently be purchased. */
     canPurchase: Ref<boolean>;
+    /** Purchase the upgrade */
     purchase: VoidFunction;
+    /** A symbol that helps identify features of the same type. */
     type: typeof UpgradeType;
-    [Component]: typeof UpgradeComponent;
+    /** The Vue component used to render this feature. */
+    [Component]: GenericComponent;
+    /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
 
+/** An object that represents a feature that can be purchased a single time. */
 export type Upgrade<T extends UpgradeOptions> = Replace<
     T & BaseUpgrade,
     {
@@ -64,88 +98,87 @@ export type Upgrade<T extends UpgradeOptions> = Replace<
         classes: GetComputableType<T["classes"]>;
         style: GetComputableType<T["style"]>;
         display: GetComputableType<T["display"]>;
+        requirements: GetComputableType<T["requirements"]>;
         mark: GetComputableType<T["mark"]>;
-        cost: GetComputableType<T["cost"]>;
-        canAfford: GetComputableTypeWithDefault<T["canAfford"], Ref<boolean>>;
     }
 >;
 
+/** A type that matches any valid {@link Upgrade} object. */
 export type GenericUpgrade = Replace<
     Upgrade<UpgradeOptions>,
     {
-        visibility: ProcessedComputable<Visibility>;
-        canPurchase: ProcessedComputable<boolean>;
+        visibility: ProcessedComputable<Visibility | boolean>;
     }
 >;
 
+/**
+ * Lazily creates an upgrade with the given options.
+ * @param optionsFunc Upgrade options.
+ */
 export function createUpgrade<T extends UpgradeOptions>(
-    optionsFunc: OptionsFunc<T, BaseUpgrade, GenericUpgrade>
+    optionsFunc: OptionsFunc<T, BaseUpgrade, GenericUpgrade>,
+    ...decorators: GenericDecorator[]
 ): Upgrade<T> {
-    const bought = persistent<boolean>(false);
-    return createLazyProxy(() => {
-        const upgrade = optionsFunc();
+    const bought = persistent<boolean>(false, false);
+    const decoratedData = decorators.reduce(
+        (current, next) => Object.assign(current, next.getPersistentData?.()),
+        {}
+    );
+    return createLazyProxy(feature => {
+        const upgrade = optionsFunc.call(feature, feature);
         upgrade.id = getUniqueID("upgrade-");
         upgrade.type = UpgradeType;
-        upgrade[Component] = UpgradeComponent;
+        upgrade[Component] = UpgradeComponent as GenericComponent;
 
-        if (upgrade.canAfford == null && (upgrade.resource == null || upgrade.cost == null)) {
-            console.warn(
-                "Error: can't create upgrade without a canAfford property or a resource and cost property",
-                upgrade
-            );
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(upgrade);
         }
 
         upgrade.bought = bought;
-        if (upgrade.canAfford == null) {
-            upgrade.canAfford = computed(() => {
-                const genericUpgrade = upgrade as GenericUpgrade;
-                return (
-                    genericUpgrade.resource != null &&
-                    genericUpgrade.cost != null &&
-                    Decimal.gte(genericUpgrade.resource.value, unref(genericUpgrade.cost))
-                );
-            });
-        } else {
-            processComputable(upgrade as T, "canAfford");
-        }
+        Object.assign(upgrade, decoratedData);
+
         upgrade.canPurchase = computed(
-            () =>
-                unref((upgrade as GenericUpgrade).visibility) === Visibility.Visible &&
-                unref((upgrade as GenericUpgrade).canAfford) &&
-                !unref(upgrade.bought)
+            () => !bought.value && requirementsMet(upgrade.requirements)
         );
         upgrade.purchase = function () {
             const genericUpgrade = upgrade as GenericUpgrade;
             if (!unref(genericUpgrade.canPurchase)) {
                 return;
             }
-            if (genericUpgrade.resource != null && genericUpgrade.cost != null) {
-                genericUpgrade.resource.value = Decimal.sub(
-                    genericUpgrade.resource.value,
-                    unref(genericUpgrade.cost)
-                );
-            }
+            payRequirements(upgrade.requirements);
             bought.value = true;
             genericUpgrade.onPurchase?.();
         };
 
+        const visibilityRequirement = createVisibilityRequirement(upgrade as GenericUpgrade);
+        if (isArray(upgrade.requirements)) {
+            upgrade.requirements.unshift(visibilityRequirement);
+        } else {
+            upgrade.requirements = [visibilityRequirement, upgrade.requirements];
+        }
+
         processComputable(upgrade as T, "visibility");
         setDefault(upgrade, "visibility", Visibility.Visible);
         processComputable(upgrade as T, "classes");
         processComputable(upgrade as T, "style");
         processComputable(upgrade as T, "display");
         processComputable(upgrade as T, "mark");
-        processComputable(upgrade as T, "cost");
-        processComputable(upgrade as T, "resource");
 
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(upgrade);
+        }
+
+        const decoratedProps = decorators.reduce(
+            (current, next) => Object.assign(current, next.getGatheredProps?.(upgrade)),
+            {}
+        );
         upgrade[GatherProps] = function (this: GenericUpgrade) {
             const {
                 display,
                 visibility,
                 style,
                 classes,
-                resource,
-                cost,
+                requirements,
                 canPurchase,
                 bought,
                 mark,
@@ -157,13 +190,13 @@ export function createUpgrade<T extends UpgradeOptions>(
                 visibility,
                 style: unref(style),
                 classes,
-                resource,
-                cost,
+                requirements,
                 canPurchase,
                 bought,
                 mark,
                 id,
-                purchase
+                purchase,
+                ...decoratedProps
             };
         };
 
@@ -171,13 +204,22 @@ export function createUpgrade<T extends UpgradeOptions>(
     });
 }
 
+/**
+ * Utility to auto purchase a list of upgrades whenever they're affordable.
+ * @param layer The layer the upgrades are apart of
+ * @param autoActive Whether or not the upgrades should currently be auto-purchasing
+ * @param upgrades The specific upgrades to upgrade. If unspecified, uses all upgrades on the layer.
+ */
 export function setupAutoPurchase(
     layer: GenericLayer,
     autoActive: Computable<boolean>,
     upgrades: GenericUpgrade[] = []
 ): void {
-    upgrades = upgrades || findFeatures(layer, UpgradeType);
-    const isAutoActive = isFunction(autoActive) ? computed(autoActive) : autoActive;
+    upgrades =
+        upgrades.length === 0 ? (findFeatures(layer, UpgradeType) as GenericUpgrade[]) : upgrades;
+    const isAutoActive: ProcessedComputable<boolean> = isFunction(autoActive)
+        ? computed(autoActive)
+        : autoActive;
     layer.on("update", () => {
         if (unref(isAutoActive)) {
             upgrades.forEach(upgrade => upgrade.purchase());
diff --git a/src/game/events.ts b/src/game/events.ts
index 4543e15..a167042 100644
--- a/src/game/events.ts
+++ b/src/game/events.ts
@@ -1,12 +1,6 @@
-import projInfo from "data/projInfo.json";
-import player from "game/player";
 import type { Settings } from "game/settings";
-import settings from "game/settings";
-import state from "game/state";
 import { createNanoEvents } from "nanoevents";
-import Decimal from "util/bignum";
-import type { App, Ref } from "vue";
-import { watch } from "vue";
+import type { App } from "vue";
 import type { GenericLayer } from "./layers";
 
 /** All types of events able to be sent or emitted from the global event bus. */
@@ -60,102 +54,8 @@ export interface GlobalEvents {
 /** A global event bus for hooking into {@link GlobalEvents}. */
 export const globalBus = createNanoEvents<GlobalEvents>();
 
-let intervalID: NodeJS.Timer | null = null;
-
-// Not imported immediately due to dependency cycles
-// This gets set during startGameLoop(), and will only be used in the update function
-let hasWon: null | Ref<boolean> = null;
-
-function update() {
-    const now = Date.now();
-    let diff = (now - player.time) / 1e3;
-    player.time = now;
-    const trueDiff = diff;
-
-    state.lastTenTicks.push(trueDiff);
-    if (state.lastTenTicks.length > 10) {
-        state.lastTenTicks = state.lastTenTicks.slice(1);
-    }
-
-    // Stop here if the game is paused on the win screen
-    if (hasWon?.value && !player.keepGoing) {
-        return;
-    }
-    // Stop here if the player had a NaN value
-    if (state.hasNaN) {
-        return;
-    }
-
-    diff = Math.max(diff, 0);
-
-    if (player.devSpeed === 0) {
-        return;
-    }
-
-    // Add offline time if any
-    if (player.offlineTime != undefined) {
-        if (Decimal.gt(player.offlineTime, projInfo.offlineLimit * 3600)) {
-            player.offlineTime = projInfo.offlineLimit * 3600;
-        }
-        if (Decimal.gt(player.offlineTime, 0) && player.devSpeed !== 0) {
-            const offlineDiff = Math.max(player.offlineTime / 10, diff);
-            player.offlineTime = player.offlineTime - offlineDiff;
-            diff += offlineDiff;
-        } else if (player.devSpeed === 0) {
-            player.offlineTime += diff;
-        }
-        if (!player.offlineProd || Decimal.lt(player.offlineTime, 0)) {
-            player.offlineTime = null;
-        }
-    }
-
-    // Cap at max tick length
-    diff = Math.min(diff, projInfo.maxTickLength);
-
-    // Apply dev speed
-    if (player.devSpeed != undefined) {
-        diff *= player.devSpeed;
-    }
-
-    if (!Number.isFinite(diff)) {
-        diff = 1e308;
-    }
-
-    // Update
-    if (Decimal.eq(diff, 0)) {
-        return;
-    }
-
-    player.timePlayed += diff;
-    if (!Number.isFinite(player.timePlayed)) {
-        player.timePlayed = 1e308;
-    }
-    globalBus.emit("update", diff, trueDiff);
-
-    if (settings.unthrottled) {
-        requestAnimationFrame(update);
-        if (intervalID != null) {
-            clearInterval(intervalID);
-            intervalID = null;
-        }
-    } else if (intervalID == null) {
-        intervalID = setInterval(update, 50);
-    }
+if ("fonts" in document) {
+    // This line breaks tests
+    // JSDom doesn't add document.fonts, and Object.defineProperty doesn't seem to work on document
+    document.fonts.onloadingdone = () => globalBus.emit("fontsLoaded");
 }
-
-/** Starts the game loop for the project, which updates the game in ticks. */
-export async function startGameLoop() {
-    hasWon = (await import("data/projEntry")).hasWon;
-    watch(hasWon, hasWon => {
-        if (hasWon) {
-            globalBus.emit("gameWon");
-        }
-    });
-    if (settings.unthrottled) {
-        requestAnimationFrame(update);
-    } else {
-        intervalID = setInterval(update, 50);
-    }
-}
-
-document.fonts.onloadingdone = () => globalBus.emit("fontsLoaded");
diff --git a/src/game/formulas/formulas.ts b/src/game/formulas/formulas.ts
new file mode 100644
index 0000000..7f88d0c
--- /dev/null
+++ b/src/game/formulas/formulas.ts
@@ -0,0 +1,1582 @@
+import { Resource } from "features/resources/resource";
+import { NonPersistent } from "game/persistence";
+import Decimal, { DecimalSource, format } from "util/bignum";
+import { Computable, ProcessedComputable, convertComputable } from "util/computed";
+import { Ref, computed, ref, unref } from "vue";
+import * as ops from "./operations";
+import type {
+    EvaluateFunction,
+    FormulaOptions,
+    FormulaSource,
+    GeneralFormulaOptions,
+    GenericFormula,
+    GuardedFormulasToDecimals,
+    IntegrableFormula,
+    IntegrateFunction,
+    InternalFormulaProperties,
+    InvertFunction,
+    InvertibleFormula,
+    InvertibleIntegralFormula,
+    SubstitutionFunction,
+    SubstitutionStack
+} from "./types";
+
+export function hasVariable(value: FormulaSource): value is InvertibleFormula {
+    return value instanceof InternalFormula && value.hasVariable();
+}
+
+export function unrefFormulaSource(value: FormulaSource, variable?: DecimalSource) {
+    return value instanceof InternalFormula
+        ? value.evaluate(variable)
+        : (unref(value) as DecimalSource);
+}
+
+function integrateVariable(this: GenericFormula) {
+    return Formula.pow(this, 2).div(2);
+}
+
+function integrateVariableInner(this: GenericFormula) {
+    return this;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export interface InternalFormula<T extends [FormulaSource] | FormulaSource[]> {
+    invert?(value: DecimalSource): DecimalSource;
+    evaluateIntegral?(variable?: DecimalSource): DecimalSource;
+    getIntegralFormula?(stack?: SubstitutionStack): GenericFormula;
+    calculateConstantOfIntegration?(): Decimal;
+    invertIntegral?(value: DecimalSource): DecimalSource;
+}
+
+export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[]> {
+    readonly inputs: T;
+
+    protected readonly internalEvaluate: EvaluateFunction<T> | undefined;
+    protected readonly internalInvert: InvertFunction<T> | undefined;
+    protected readonly internalIntegrate: IntegrateFunction<T> | undefined;
+    protected readonly internalIntegrateInner: IntegrateFunction<T> | undefined;
+    protected readonly applySubstitution: SubstitutionFunction<T> | undefined;
+    protected readonly internalVariables: number;
+
+    public readonly innermostVariable: ProcessedComputable<DecimalSource> | undefined;
+
+    constructor(options: FormulaOptions<T>) {
+        let readonlyProperties;
+        if ("inputs" in options) {
+            options.inputs = options.inputs.map(input =>
+                typeof input === "object" && NonPersistent in input ? input[NonPersistent] : input
+            ) as T | [FormulaSource];
+        }
+        if ("variable" in options) {
+            if (typeof options.variable === "object" && NonPersistent in options.variable) {
+                options.variable = options.variable[NonPersistent] as Ref<DecimalSource>;
+            }
+            readonlyProperties = this.setupVariable(options);
+        } else if (!("evaluate" in options)) {
+            readonlyProperties = this.setupConstant(options);
+        } else {
+            readonlyProperties = this.setupFormula(options);
+        }
+        this.inputs = readonlyProperties.inputs;
+        this.internalVariables = readonlyProperties.internalVariables;
+        this.innermostVariable = readonlyProperties.innermostVariable;
+        this.internalEvaluate = readonlyProperties.internalEvaluate;
+        this.internalInvert = readonlyProperties.internalInvert;
+        this.internalIntegrate = readonlyProperties.internalIntegrate;
+        this.internalIntegrateInner = readonlyProperties.internalIntegrateInner;
+        this.applySubstitution = readonlyProperties.applySubstitution;
+    }
+
+    private setupVariable({
+        variable
+    }: {
+        variable: ProcessedComputable<DecimalSource>;
+    }): InternalFormulaProperties<T> {
+        return {
+            inputs: [variable] as T,
+            internalVariables: 1,
+            innermostVariable: variable,
+            internalIntegrate: integrateVariable,
+            internalIntegrateInner: integrateVariableInner,
+            applySubstitution: ops.passthrough as unknown as SubstitutionFunction<T>
+        };
+    }
+
+    private setupConstant({ inputs }: { inputs: [FormulaSource] }): InternalFormulaProperties<T> {
+        if (inputs.length !== 1) {
+            console.error("Evaluate function is required if inputs is not length 1");
+        }
+        return {
+            inputs: inputs as T,
+            internalVariables: 0
+        };
+    }
+
+    private setupFormula(options: GeneralFormulaOptions<T>): InternalFormulaProperties<T> {
+        const { inputs, evaluate, invert, integrate, integrateInner, applySubstitution } = options;
+        const numVariables = inputs.reduce<number>(
+            (acc, input) => acc + (input instanceof InternalFormula ? input.internalVariables : 0),
+            0
+        );
+        const variable = inputs.find(
+            input => input instanceof InternalFormula && input.hasVariable()
+        ) as GenericFormula | undefined;
+
+        const innermostVariable = numVariables === 1 ? variable?.innermostVariable : undefined;
+
+        const invertible = variable?.isInvertible() ?? false;
+        const integrable = variable?.isIntegrable() ?? false;
+
+        return {
+            inputs,
+            internalEvaluate: evaluate,
+            internalInvert: invertible ? invert : undefined,
+            internalIntegrate: integrable ? integrate : undefined,
+            internalIntegrateInner: integrateInner,
+            applySubstitution,
+            innermostVariable,
+            internalVariables: numVariables
+        };
+    }
+
+    /** Type predicate that this formula can be inverted. */
+    isInvertible(): this is InvertibleFormula {
+        return this.hasVariable() && (this.internalInvert != null || this.internalEvaluate == null);
+    }
+
+    /** Type predicate that this formula can be integrated. */
+    isIntegrable(): this is IntegrableFormula {
+        return this.hasVariable() && this.internalIntegrate != null;
+    }
+
+    /** Type predicate that this formula has an integral function that can be inverted. */
+    isIntegralInvertible(): this is InvertibleIntegralFormula {
+        if (!this.isIntegrable()) {
+            return false;
+        }
+        return this.getIntegralFormula().isInvertible();
+    }
+
+    /** Whether or not this formula has a singular variable inside it, which can be accessed via {@link innermostVariable}. */
+    hasVariable(): boolean {
+        return this.internalVariables === 1;
+    }
+
+    /**
+     * Evaluate the current result of the formula
+     * @param variable Optionally override the value of the variable while evaluating. Ignored if there is not variable
+     */
+    evaluate(variable?: DecimalSource): DecimalSource {
+        return (
+            this.internalEvaluate?.call(
+                this,
+                ...(this.inputs.map(input =>
+                    unrefFormulaSource(input, variable)
+                ) as GuardedFormulasToDecimals<T>)
+            ) ??
+            (this.hasVariable() ? variable : null) ??
+            unrefFormulaSource(this.inputs[0])
+        );
+    }
+
+    /**
+     * Compares if two formulas are equivalent to each other. Note that function contexts can lead to false negatives.
+     * @param other The formula to compare to this one.
+     */
+    equals(other: GenericFormula): boolean {
+        return (
+            this.inputs.length === other.inputs.length &&
+            this.inputs.every((input, i) =>
+                input instanceof InternalFormula && other.inputs[i] instanceof InternalFormula
+                    ? input.equals(other.inputs[i] as GenericFormula)
+                    : !(input instanceof InternalFormula) &&
+                      !(other.inputs[i] instanceof InternalFormula) &&
+                      Decimal.eq(unref(input), unref(other.inputs[i] as DecimalSource))
+            ) &&
+            this.internalEvaluate === other.internalEvaluate &&
+            this.internalInvert === other.internalInvert &&
+            this.internalIntegrate === other.internalIntegrate &&
+            this.internalVariables === other.internalVariables
+        );
+    }
+
+    /**
+     * Creates a formula that evaluates to a constant value.
+     * @param value The constant value for this formula.
+     */
+    public static constant(value: ProcessedComputable<DecimalSource>): InvertibleIntegralFormula {
+        return new Formula({ inputs: [value] });
+    }
+
+    /**
+     * Creates a formula that is marked as the variable for an outer formula. Typically used for inverting and integrating.
+     * @param value The variable for this formula.
+     */
+    public static variable(value: ProcessedComputable<DecimalSource>): InvertibleIntegralFormula {
+        return new Formula({ variable: value });
+    }
+
+    // TODO add integration support to step-wise functions
+    /**
+     * Creates a step-wise formula. After {@link start} the formula will have an additional modifier.
+     * This function assumes the incoming {@link value} will be continuous and monotonically increasing.
+     * @param value The value before applying the step
+     * @param start The value at which to start applying the step
+     * @param formulaModifier How this step should modify the formula. The incoming value will be the unmodified formula value _minus the start value_. So for example if an incoming formula evaluates to 200 and has a step that starts at 150, the formulaModifier would be given 50 as the parameter
+     */
+    public static step(
+        value: FormulaSource,
+        start: Computable<DecimalSource>,
+        formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula
+    ) {
+        const formula = formulaModifier(Formula.variable(0));
+        const processedStart = convertComputable(start);
+        function evalStep(lhs: DecimalSource) {
+            if (Decimal.lt(lhs, unref(processedStart))) {
+                return lhs;
+            }
+            return Decimal.add(
+                formula.evaluate(Decimal.sub(lhs, unref(processedStart))),
+                unref(processedStart)
+            );
+        }
+        function invertStep(value: DecimalSource, lhs: FormulaSource) {
+            if (hasVariable(lhs) && formula.isInvertible()) {
+                if (Decimal.gt(value, unref(processedStart))) {
+                    value = Decimal.add(
+                        formula.invert(Decimal.sub(value, unref(processedStart))),
+                        unref(processedStart)
+                    );
+                }
+                return lhs.invert(value);
+            }
+            console.error("Could not invert due to no input being a variable");
+            return 0;
+        }
+        return new Formula({
+            inputs: [value],
+            evaluate: evalStep,
+            invert: formula.isInvertible() && formula.hasVariable() ? invertStep : undefined
+        });
+    }
+
+    /**
+     * Applies a modifier to a formula under a given condition.
+     * @param value The incoming formula value
+     * @param condition Whether or not to apply the modifier
+     * @param formulaModifier The modifier to apply to the incoming formula if the condition is true
+     * @param elseFormulaModifier An optional modifier to apply to the incoming formula if the condition is false
+     */
+    public static if(
+        value: FormulaSource,
+        condition: Computable<boolean>,
+        formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula,
+        elseFormulaModifier?: (value: InvertibleIntegralFormula) => GenericFormula
+    ) {
+        const lhsRef = ref<DecimalSource>(0);
+        const variable = Formula.variable(lhsRef);
+        const formula = formulaModifier(variable);
+        const elseFormula = elseFormulaModifier?.(variable);
+        const processedCondition = convertComputable(condition);
+        function evalStep(lhs: DecimalSource) {
+            if (unref(processedCondition)) {
+                lhsRef.value = lhs;
+                return formula.evaluate();
+            } else if (elseFormula) {
+                lhsRef.value = lhs;
+                return elseFormula.evaluate();
+            } else {
+                return lhs;
+            }
+        }
+        function invertStep(value: DecimalSource, lhs: FormulaSource) {
+            if (
+                !hasVariable(lhs) ||
+                !formula.isInvertible() ||
+                (elseFormula != null && !elseFormula.isInvertible())
+            ) {
+                console.error("Could not invert due to no input being a variable");
+                return 0;
+            }
+            if (unref(processedCondition)) {
+                return lhs.invert(formula.invert(value));
+            } else if (elseFormula) {
+                return lhs.invert(elseFormula.invert(value));
+            } else {
+                return lhs.invert(value);
+            }
+        }
+        return new Formula({
+            inputs: [value],
+            evaluate: evalStep,
+            invert: formula.isInvertible() && formula.hasVariable() ? invertStep : undefined
+        });
+    }
+    public static conditional(
+        value: FormulaSource,
+        condition: Computable<boolean>,
+        formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula,
+        elseFormulaModifier?: (value: InvertibleIntegralFormula) => GenericFormula
+    ) {
+        return Formula.if(value, condition, formulaModifier, elseFormulaModifier);
+    }
+
+    public static abs(value: FormulaSource) {
+        return new Formula({ inputs: [value], evaluate: Decimal.abs });
+    }
+
+    public static neg<T extends GenericFormula>(value: T): T;
+    public static neg(value: FormulaSource): GenericFormula;
+    public static neg(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.neg,
+            invert: ops.invertNeg,
+            applySubstitution: ops.applySubstitutionNeg,
+            integrate: ops.integrateNeg
+        });
+    }
+    public static negate = InternalFormula.neg;
+    public static negated = InternalFormula.neg;
+
+    public static sign(value: FormulaSource) {
+        return new Formula({ inputs: [value], evaluate: Decimal.sign });
+    }
+    public static sgn = InternalFormula.sign;
+
+    public static round(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.round,
+            invert: ops.invertPassthrough
+        });
+    }
+
+    public static floor(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.floor,
+            invert: ops.invertPassthrough
+        });
+    }
+
+    public static ceil(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.ceil,
+            invert: ops.invertPassthrough
+        });
+    }
+
+    public static trunc(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.trunc,
+            invert: ops.invertPassthrough
+        });
+    }
+
+    public static add<T extends GenericFormula>(value: T, other: FormulaSource): T;
+    public static add<T extends GenericFormula>(value: FormulaSource, other: T): T;
+    public static add(
+        value: FormulaSource,
+        other: FormulaSource
+    ): InternalFormula<[FormulaSource, FormulaSource]>;
+    public static add(value: FormulaSource, other: FormulaSource) {
+        return new Formula({
+            inputs: [value, other],
+            evaluate: Decimal.add,
+            invert: ops.invertAdd,
+            integrate: ops.integrateAdd,
+            integrateInner: ops.integrateInnerAdd,
+            applySubstitution: ops.passthrough
+        });
+    }
+    public static plus = InternalFormula.add;
+
+    public static sub<T extends GenericFormula>(value: T, other: FormulaSource): T;
+    public static sub<T extends GenericFormula>(value: FormulaSource, other: T): T;
+    public static sub(
+        value: FormulaSource,
+        other: FormulaSource
+    ): Formula<[FormulaSource, FormulaSource]>;
+    public static sub(value: FormulaSource, other: FormulaSource) {
+        return new Formula({
+            inputs: [value, other],
+            evaluate: Decimal.sub,
+            invert: ops.invertSub,
+            integrate: ops.integrateSub,
+            integrateInner: ops.integrateInnerSub,
+            applySubstitution: ops.passthrough
+        });
+    }
+    public static subtract = InternalFormula.sub;
+    public static minus = InternalFormula.sub;
+
+    public static mul<T extends GenericFormula>(value: T, other: FormulaSource): T;
+    public static mul<T extends GenericFormula>(value: FormulaSource, other: T): T;
+    public static mul(
+        value: FormulaSource,
+        other: FormulaSource
+    ): Formula<[FormulaSource, FormulaSource]>;
+    public static mul(value: FormulaSource, other: FormulaSource) {
+        return new Formula({
+            inputs: [value, other],
+            evaluate: Decimal.mul,
+            invert: ops.invertMul,
+            integrate: ops.integrateMul,
+            applySubstitution: ops.applySubstitutionMul
+        });
+    }
+    public static multiply = InternalFormula.mul;
+    public static times = InternalFormula.mul;
+
+    public static div<T extends GenericFormula>(value: T, other: FormulaSource): T;
+    public static div<T extends GenericFormula>(value: FormulaSource, other: T): T;
+    public static div(
+        value: FormulaSource,
+        other: FormulaSource
+    ): Formula<[FormulaSource, FormulaSource]>;
+    public static div(value: FormulaSource, other: FormulaSource) {
+        return new Formula({
+            inputs: [value, other],
+            evaluate: Decimal.div,
+            invert: ops.invertDiv,
+            integrate: ops.integrateDiv,
+            applySubstitution: ops.applySubstitutionDiv
+        });
+    }
+    public static divide = InternalFormula.div;
+    public static divideBy = InternalFormula.div;
+    public static dividedBy = InternalFormula.div;
+
+    public static recip<T extends GenericFormula>(value: T): T;
+    public static recip(value: FormulaSource): Formula<[FormulaSource]>;
+    public static recip(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.recip,
+            invert: ops.invertRecip,
+            integrate: ops.integrateRecip
+        });
+    }
+    public static reciprocal = InternalFormula.recip;
+    public static reciprocate = InternalFormula.recip;
+
+    // TODO these functions should ostensibly be integrable, and the integrals should be invertible
+    public static max = ops.createPassthroughBinaryFormula(Decimal.max);
+    public static min = ops.createPassthroughBinaryFormula(Decimal.min);
+    public static minabs = ops.createPassthroughBinaryFormula(Decimal.minabs);
+    public static maxabs = ops.createPassthroughBinaryFormula(Decimal.maxabs);
+    public static clampMin = ops.createPassthroughBinaryFormula(Decimal.clampMin);
+    public static clampMax = ops.createPassthroughBinaryFormula(Decimal.clampMax);
+
+    public static clamp(value: FormulaSource, min: FormulaSource, max: FormulaSource) {
+        return new Formula({
+            inputs: [value, min, max],
+            evaluate: Decimal.clamp,
+            invert: ops.invertPassthrough
+        });
+    }
+
+    public static pLog10(value: FormulaSource) {
+        return new Formula({ inputs: [value], evaluate: Decimal.pLog10 });
+    }
+
+    public static absLog10(value: FormulaSource) {
+        return new Formula({ inputs: [value], evaluate: Decimal.absLog10 });
+    }
+
+    public static log10<T extends GenericFormula>(value: T): T;
+    public static log10(value: FormulaSource): Formula<[FormulaSource]>;
+    public static log10(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.log10,
+            invert: ops.invertLog10,
+            integrate: ops.integrateLog10
+        });
+    }
+
+    public static log<T extends GenericFormula>(value: T, base: FormulaSource): T;
+    public static log<T extends GenericFormula>(value: FormulaSource, base: T): T;
+    public static log(
+        value: FormulaSource,
+        base: FormulaSource
+    ): Formula<[FormulaSource, FormulaSource]>;
+    public static log(value: FormulaSource, base: FormulaSource) {
+        return new Formula({
+            inputs: [value, base],
+            evaluate: Decimal.log,
+            invert: ops.invertLog,
+            integrate: ops.integrateLog
+        });
+    }
+    public static logarithm = InternalFormula.log;
+
+    public static log2<T extends GenericFormula>(value: T): T;
+    public static log2(value: FormulaSource): Formula<[FormulaSource]>;
+    public static log2(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.log2,
+            invert: ops.invertLog2,
+            integrate: ops.integrateLog2
+        });
+    }
+
+    public static ln<T extends GenericFormula>(value: T): T;
+    public static ln(value: FormulaSource): Formula<[FormulaSource]>;
+    public static ln(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.ln,
+            invert: ops.invertLn,
+            integrate: ops.integrateLn
+        });
+    }
+
+    public static pow<T extends GenericFormula>(value: T, other: FormulaSource): T;
+    public static pow<T extends GenericFormula>(value: FormulaSource, other: T): T;
+    public static pow(
+        value: FormulaSource,
+        other: FormulaSource
+    ): Formula<[FormulaSource, FormulaSource]>;
+    public static pow(value: FormulaSource, other: FormulaSource) {
+        return new Formula({
+            inputs: [value, other],
+            evaluate: Decimal.pow,
+            invert: ops.invertPow,
+            integrate: ops.integratePow
+        });
+    }
+
+    public static pow10<T extends GenericFormula>(value: T): T;
+    public static pow10(value: FormulaSource): GenericFormula;
+    public static pow10(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.pow10,
+            invert: ops.invertPow10,
+            integrate: ops.integratePow10
+        });
+    }
+
+    public static pow_base<T extends GenericFormula>(value: T, other: FormulaSource): T;
+    public static pow_base<T extends GenericFormula>(value: FormulaSource, other: T): T;
+    public static pow_base(
+        value: FormulaSource,
+        other: FormulaSource
+    ): Formula<[FormulaSource, FormulaSource]>;
+    public static pow_base(value: FormulaSource, other: FormulaSource) {
+        return new Formula({
+            inputs: [value, other],
+            evaluate: Decimal.pow_base,
+            invert: ops.invertPowBase,
+            integrate: ops.integratePowBase
+        });
+    }
+
+    public static root<T extends GenericFormula>(value: T, other: FormulaSource): T;
+    public static root<T extends GenericFormula>(value: FormulaSource, other: T): T;
+    public static root(
+        value: FormulaSource,
+        other: FormulaSource
+    ): Formula<[FormulaSource, FormulaSource]>;
+    public static root(value: FormulaSource, other: FormulaSource) {
+        return new Formula({
+            inputs: [value, other],
+            evaluate: Decimal.root,
+            invert: ops.invertRoot,
+            integrate: ops.integrateRoot
+        });
+    }
+
+    public static factorial(value: FormulaSource) {
+        return new Formula({ inputs: [value], evaluate: Decimal.factorial });
+    }
+
+    public static gamma(value: FormulaSource) {
+        return new Formula({ inputs: [value], evaluate: Decimal.gamma });
+    }
+
+    public static lngamma(value: FormulaSource) {
+        return new Formula({ inputs: [value], evaluate: Decimal.lngamma });
+    }
+
+    public static exp<T extends GenericFormula>(value: T): T;
+    public static exp(value: FormulaSource): Formula<[FormulaSource]>;
+    public static exp(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.exp,
+            invert: ops.invertExp,
+            integrate: ops.integrateExp
+        });
+    }
+
+    public static sqr<T extends GenericFormula>(value: T): T;
+    public static sqr(value: FormulaSource): Formula<[FormulaSource, FormulaSource]>;
+    public static sqr(value: FormulaSource) {
+        return Formula.pow(value, 2);
+    }
+
+    public static sqrt<T extends GenericFormula>(value: T): T;
+    public static sqrt(value: FormulaSource): Formula<[FormulaSource, FormulaSource]>;
+    public static sqrt(value: FormulaSource) {
+        return Formula.root(value, 2);
+    }
+
+    public static cube<T extends GenericFormula>(value: T): T;
+    public static cube(value: FormulaSource): Formula<[FormulaSource, FormulaSource]>;
+    public static cube(value: FormulaSource) {
+        return Formula.pow(value, 3);
+    }
+
+    public static cbrt<T extends GenericFormula>(value: T): T;
+    public static cbrt(value: FormulaSource): Formula<[FormulaSource, FormulaSource]>;
+    public static cbrt(value: FormulaSource) {
+        return Formula.root(value, 3);
+    }
+
+    public static tetrate<T extends GenericFormula>(
+        value: T,
+        height?: FormulaSource,
+        payload?: FormulaSource
+    ): InvertibleFormula;
+    public static tetrate(
+        value: FormulaSource,
+        height?: FormulaSource,
+        payload?: FormulaSource
+    ): Formula<[FormulaSource, FormulaSource, FormulaSource]>;
+    public static tetrate(
+        value: FormulaSource,
+        height: FormulaSource = 2,
+        payload: FormulaSource = Decimal.fromComponents_noNormalize(1, 0, 1)
+    ) {
+        return new Formula({
+            inputs: [value, height, payload],
+            evaluate: ops.tetrate,
+            invert: ops.invertTetrate
+        });
+    }
+
+    public static iteratedexp<T extends GenericFormula>(
+        value: T,
+        height?: FormulaSource,
+        payload?: FormulaSource
+    ): InvertibleFormula;
+    public static iteratedexp(
+        value: FormulaSource,
+        height?: FormulaSource,
+        payload?: FormulaSource
+    ): Formula<[FormulaSource, FormulaSource, FormulaSource]>;
+    public static iteratedexp(
+        value: FormulaSource,
+        height: FormulaSource = 2,
+        payload: FormulaSource = Decimal.fromComponents_noNormalize(1, 0, 1)
+    ) {
+        return new Formula({
+            inputs: [value, height, payload],
+            evaluate: ops.iteratedexp,
+            invert: ops.invertIteratedExp
+        });
+    }
+
+    public static iteratedlog(
+        value: FormulaSource,
+        base: FormulaSource = 10,
+        times: FormulaSource = 1
+    ) {
+        return new Formula({ inputs: [value, base, times], evaluate: ops.iteratedLog });
+    }
+
+    public static slog<T extends GenericFormula>(value: T, base?: FormulaSource): InvertibleFormula;
+    public static slog(
+        value: FormulaSource,
+        base?: FormulaSource
+    ): Formula<[FormulaSource, FormulaSource]>;
+    public static slog(value: FormulaSource, base: FormulaSource = 10) {
+        return new Formula({ inputs: [value, base], evaluate: ops.slog, invert: ops.invertSlog });
+    }
+
+    public static layeradd10(value: FormulaSource, diff: FormulaSource) {
+        return new Formula({ inputs: [value, diff], evaluate: Decimal.layeradd10 });
+    }
+
+    public static layeradd<T extends GenericFormula>(
+        value: T,
+        diff: FormulaSource,
+        base?: FormulaSource
+    ): InvertibleFormula;
+    public static layeradd(
+        value: FormulaSource,
+        diff: FormulaSource,
+        base?: FormulaSource
+    ): Formula<[FormulaSource, FormulaSource, FormulaSource]>;
+    public static layeradd(value: FormulaSource, diff: FormulaSource, base: FormulaSource = 10) {
+        return new Formula({
+            inputs: [value, diff, base],
+            evaluate: ops.layeradd,
+            invert: ops.invertLayeradd
+        });
+    }
+
+    public static lambertw<T extends GenericFormula>(value: T): InvertibleFormula;
+    public static lambertw(value: FormulaSource): Formula<[FormulaSource]>;
+    public static lambertw(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.lambertw,
+            invert: ops.invertLambertw
+        });
+    }
+
+    public static ssqrt<T extends GenericFormula>(value: T): InvertibleFormula;
+    public static ssqrt(value: FormulaSource): Formula<[FormulaSource]>;
+    public static ssqrt(value: FormulaSource) {
+        return new Formula({ inputs: [value], evaluate: Decimal.ssqrt, invert: ops.invertSsqrt });
+    }
+
+    public static pentate(
+        value: FormulaSource,
+        height: FormulaSource = 2,
+        payload: FormulaSource = Decimal.fromComponents_noNormalize(1, 0, 1)
+    ) {
+        return new Formula({ inputs: [value, height, payload], evaluate: ops.pentate });
+    }
+
+    public static sin<T extends GenericFormula>(value: T): T;
+    public static sin(value: FormulaSource): Formula<[FormulaSource]>;
+    public static sin(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.sin,
+            invert: ops.invertAsin,
+            integrate: ops.integrateSin
+        });
+    }
+
+    public static cos<T extends GenericFormula>(value: T): T;
+    public static cos(value: FormulaSource): Formula<[FormulaSource]>;
+    public static cos(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.cos,
+            invert: ops.invertAcos,
+            integrate: ops.integrateCos
+        });
+    }
+
+    public static tan<T extends GenericFormula>(value: T): T;
+    public static tan(value: FormulaSource): Formula<[FormulaSource]>;
+    public static tan(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.tan,
+            invert: ops.invertAtan,
+            integrate: ops.integrateTan
+        });
+    }
+
+    public static asin<T extends GenericFormula>(value: T): T;
+    public static asin(value: FormulaSource): Formula<[FormulaSource]>;
+    public static asin(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.asin,
+            invert: ops.invertSin,
+            integrate: ops.integrateAsin
+        });
+    }
+
+    public static acos<T extends GenericFormula>(value: T): T;
+    public static acos(value: FormulaSource): Formula<[FormulaSource]>;
+    public static acos(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.acos,
+            invert: ops.invertCos,
+            integrate: ops.integrateAcos
+        });
+    }
+
+    public static atan<T extends GenericFormula>(value: T): T;
+    public static atan(value: FormulaSource): Formula<[FormulaSource]>;
+    public static atan(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.atan,
+            invert: ops.invertTan,
+            integrate: ops.integrateAtan
+        });
+    }
+
+    public static sinh<T extends GenericFormula>(value: T): T;
+    public static sinh(value: FormulaSource): Formula<[FormulaSource]>;
+    public static sinh(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.sinh,
+            invert: ops.invertAsinh,
+            integrate: ops.integrateSinh
+        });
+    }
+
+    public static cosh<T extends GenericFormula>(value: T): T;
+    public static cosh(value: FormulaSource): Formula<[FormulaSource]>;
+    public static cosh(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.cosh,
+            invert: ops.invertAcosh,
+            integrate: ops.integrateCosh
+        });
+    }
+
+    public static tanh<T extends GenericFormula>(value: T): T;
+    public static tanh(value: FormulaSource): Formula<[FormulaSource]>;
+    public static tanh(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.tanh,
+            invert: ops.invertAtanh,
+            integrate: ops.integrateTanh
+        });
+    }
+
+    public static asinh<T extends GenericFormula>(value: T): T;
+    public static asinh(value: FormulaSource): Formula<[FormulaSource]>;
+    public static asinh(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.asinh,
+            invert: ops.invertSinh,
+            integrate: ops.integrateAsinh
+        });
+    }
+
+    public static acosh<T extends GenericFormula>(value: T): T;
+    public static acosh(value: FormulaSource): Formula<[FormulaSource]>;
+    public static acosh(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.acosh,
+            invert: ops.invertCosh,
+            integrate: ops.integrateAcosh
+        });
+    }
+
+    public static atanh<T extends GenericFormula>(value: T): T;
+    public static atanh(value: FormulaSource): Formula<[FormulaSource]>;
+    public static atanh(value: FormulaSource) {
+        return new Formula({
+            inputs: [value],
+            evaluate: Decimal.atanh,
+            invert: ops.invertTanh,
+            integrate: ops.integrateAtanh
+        });
+    }
+
+    public step(
+        start: Computable<DecimalSource>,
+        formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula
+    ) {
+        return Formula.step(this, start, formulaModifier);
+    }
+
+    public if(
+        condition: Computable<boolean>,
+        formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula
+    ) {
+        return Formula.if(this, condition, formulaModifier);
+    }
+    public conditional(
+        condition: Computable<boolean>,
+        formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula
+    ) {
+        return Formula.if(this, condition, formulaModifier);
+    }
+
+    public abs() {
+        return Formula.abs(this);
+    }
+
+    public neg<T extends GenericFormula>(this: T): T;
+    public neg(this: GenericFormula): GenericFormula;
+    public neg(this: GenericFormula) {
+        return Formula.neg(this);
+    }
+    public negate = this.neg;
+    public negated = this.neg;
+
+    public sign() {
+        return Formula.sign(this);
+    }
+    public sgn = this.sign;
+
+    public round() {
+        return Formula.round(this);
+    }
+
+    public floor() {
+        return Formula.floor(this);
+    }
+
+    public ceil() {
+        return Formula.ceil(this);
+    }
+
+    public trunc() {
+        return Formula.trunc(this);
+    }
+
+    public add<T extends GenericFormula>(this: T, value: FormulaSource): T;
+    public add<T extends GenericFormula>(this: GenericFormula, value: T): T;
+    public add(this: GenericFormula, value: FormulaSource): GenericFormula;
+    public add(this: GenericFormula, value: FormulaSource) {
+        return Formula.add(this, value);
+    }
+    public plus = this.add;
+
+    public sub<T extends GenericFormula>(this: T, value: FormulaSource): T;
+    public sub<T extends GenericFormula>(this: GenericFormula, value: T): T;
+    public sub(this: GenericFormula, value: FormulaSource): GenericFormula;
+    public sub(value: FormulaSource) {
+        return Formula.sub(this, value);
+    }
+    public subtract = this.sub;
+    public minus = this.sub;
+
+    public mul<T extends GenericFormula>(this: T, value: FormulaSource): T;
+    public mul<T extends GenericFormula>(this: GenericFormula, value: T): T;
+    public mul(this: GenericFormula, value: FormulaSource): GenericFormula;
+    public mul(value: FormulaSource) {
+        return Formula.mul(this, value);
+    }
+    public multiply = this.mul;
+    public times = this.mul;
+
+    public div<T extends GenericFormula>(this: T, value: FormulaSource): T;
+    public div<T extends GenericFormula>(this: GenericFormula, value: T): T;
+    public div(this: GenericFormula, value: FormulaSource): GenericFormula;
+    public div(value: FormulaSource) {
+        return Formula.div(this, value);
+    }
+    public divide = this.div;
+    public divideBy = this.div;
+    public dividedBy = this.div;
+
+    public recip<T extends GenericFormula>(this: T): T;
+    public recip(this: FormulaSource): GenericFormula;
+    public recip() {
+        return Formula.recip(this);
+    }
+    public reciprocal = this.recip;
+    public reciprocate = this.recip;
+
+    public max(value: FormulaSource) {
+        return Formula.max(this, value);
+    }
+
+    public min(value: FormulaSource) {
+        return Formula.min(this, value);
+    }
+
+    public maxabs(value: FormulaSource) {
+        return Formula.maxabs(this, value);
+    }
+
+    public minabs(value: FormulaSource) {
+        return Formula.minabs(this, value);
+    }
+
+    public clamp(min: FormulaSource, max: FormulaSource) {
+        return Formula.clamp(this, min, max);
+    }
+
+    public clampMin(value: FormulaSource) {
+        return Formula.clampMin(this, value);
+    }
+
+    public clampMax(value: FormulaSource) {
+        return Formula.clampMax(this, value);
+    }
+
+    public pLog10() {
+        return Formula.pLog10(this);
+    }
+
+    public absLog10() {
+        return Formula.absLog10(this);
+    }
+
+    public log10<T extends GenericFormula>(this: T): T;
+    public log10(this: FormulaSource): GenericFormula;
+    public log10() {
+        return Formula.log10(this);
+    }
+
+    public log<T extends GenericFormula>(this: T, value: FormulaSource): T;
+    public log<T extends GenericFormula>(this: FormulaSource, value: T): T;
+    public log(this: FormulaSource, value: FormulaSource): GenericFormula;
+    public log(value: FormulaSource) {
+        return Formula.log(this, value);
+    }
+    public logarithm = this.log;
+
+    public log2<T extends GenericFormula>(this: T): T;
+    public log2(this: FormulaSource): GenericFormula;
+    public log2() {
+        return Formula.log2(this);
+    }
+
+    public ln<T extends GenericFormula>(this: T): T;
+    public ln(this: FormulaSource): GenericFormula;
+    public ln() {
+        return Formula.ln(this);
+    }
+
+    public pow<T extends GenericFormula>(this: T, value: FormulaSource): T;
+    public pow<T extends GenericFormula>(this: FormulaSource, value: T): T;
+    public pow(this: FormulaSource, value: FormulaSource): GenericFormula;
+    public pow(value: FormulaSource) {
+        return Formula.pow(this, value);
+    }
+
+    public pow10<T extends GenericFormula>(this: T): T;
+    public pow10(this: FormulaSource): GenericFormula;
+    public pow10() {
+        return Formula.pow10(this);
+    }
+
+    public pow_base<T extends GenericFormula>(this: T, value: FormulaSource): T;
+    public pow_base<T extends GenericFormula>(this: FormulaSource, value: T): T;
+    public pow_base(this: FormulaSource, value: FormulaSource): GenericFormula;
+    public pow_base(value: FormulaSource) {
+        return Formula.pow_base(this, value);
+    }
+
+    public root<T extends GenericFormula>(this: T, value: FormulaSource): T;
+    public root<T extends GenericFormula>(this: FormulaSource, value: T): T;
+    public root(this: FormulaSource, value: FormulaSource): GenericFormula;
+    public root(value: FormulaSource) {
+        return Formula.root(this, value);
+    }
+
+    public factorial() {
+        return Formula.factorial(this);
+    }
+
+    public gamma() {
+        return Formula.gamma(this);
+    }
+    public lngamma() {
+        return Formula.lngamma(this);
+    }
+
+    public exp<T extends GenericFormula>(this: T): T;
+    public exp(this: FormulaSource): GenericFormula;
+    public exp(this: FormulaSource) {
+        return Formula.exp(this);
+    }
+
+    public sqr<T extends GenericFormula>(this: T): T;
+    public sqr(this: FormulaSource): GenericFormula;
+    public sqr() {
+        return Formula.pow(this, 2);
+    }
+
+    public sqrt<T extends GenericFormula>(this: T): T;
+    public sqrt(this: FormulaSource): GenericFormula;
+    public sqrt() {
+        return Formula.root(this, 2);
+    }
+    public cube<T extends GenericFormula>(this: T): T;
+    public cube(this: FormulaSource): GenericFormula;
+    public cube() {
+        return Formula.pow(this, 3);
+    }
+
+    public cbrt<T extends GenericFormula>(this: T): T;
+    public cbrt(this: FormulaSource): GenericFormula;
+    public cbrt() {
+        return Formula.root(this, 3);
+    }
+
+    public tetrate<T extends GenericFormula>(
+        this: T,
+        height?: FormulaSource,
+        payload?: FormulaSource
+    ): InvertibleFormula;
+    public tetrate(
+        this: FormulaSource,
+        height?: FormulaSource,
+        payload?: FormulaSource
+    ): GenericFormula;
+    public tetrate(
+        this: FormulaSource,
+        height: FormulaSource = 2,
+        payload: FormulaSource = Decimal.fromComponents_noNormalize(1, 0, 1)
+    ) {
+        return Formula.tetrate(this, height, payload);
+    }
+
+    public iteratedexp<T extends GenericFormula>(
+        this: T,
+        height?: FormulaSource,
+        payload?: FormulaSource
+    ): InvertibleFormula;
+    public iteratedexp(
+        this: FormulaSource,
+        height?: FormulaSource,
+        payload?: FormulaSource
+    ): GenericFormula;
+    public iteratedexp(
+        this: FormulaSource,
+        height: FormulaSource = 2,
+        payload: FormulaSource = Decimal.fromComponents_noNormalize(1, 0, 1)
+    ) {
+        return Formula.iteratedexp(this, height, payload);
+    }
+
+    public iteratedlog(base: FormulaSource = 10, times: FormulaSource = 1) {
+        return Formula.iteratedlog(this, base, times);
+    }
+
+    public slog<T extends GenericFormula>(this: T, base?: FormulaSource): InvertibleFormula;
+    public slog(this: FormulaSource, base?: FormulaSource): GenericFormula;
+    public slog(this: FormulaSource, base: FormulaSource = 10) {
+        return Formula.slog(this, base);
+    }
+
+    public layeradd10(diff: FormulaSource) {
+        return Formula.layeradd10(this, diff);
+    }
+
+    public layeradd<T extends InvertibleFormula>(
+        this: T,
+        diff: FormulaSource,
+        base?: FormulaSource
+    ): InvertibleFormula;
+    public layeradd(this: FormulaSource, diff: FormulaSource, base?: FormulaSource): GenericFormula;
+    public layeradd(this: FormulaSource, diff: FormulaSource, base: FormulaSource) {
+        return Formula.layeradd(this, diff, base);
+    }
+
+    public lambertw<T extends InvertibleFormula>(this: T): InvertibleFormula;
+    public lambertw(this: FormulaSource): GenericFormula;
+    public lambertw(this: FormulaSource) {
+        return Formula.lambertw(this);
+    }
+
+    public ssqrt<T extends InvertibleFormula>(this: T): InvertibleFormula;
+    public ssqrt(this: FormulaSource): GenericFormula;
+    public ssqrt(this: FormulaSource) {
+        return Formula.ssqrt(this);
+    }
+
+    public pentate(
+        height: FormulaSource = 2,
+        payload: FormulaSource = Decimal.fromComponents_noNormalize(1, 0, 1)
+    ) {
+        return Formula.pentate(this, height, payload);
+    }
+
+    public sin<T extends GenericFormula>(this: T): T;
+    public sin(this: FormulaSource): GenericFormula;
+    public sin(this: FormulaSource) {
+        return Formula.sin(this);
+    }
+
+    public cos<T extends GenericFormula>(this: T): T;
+    public cos(this: FormulaSource): GenericFormula;
+    public cos(this: FormulaSource) {
+        return Formula.cos(this);
+    }
+
+    public tan<T extends GenericFormula>(this: T): T;
+    public tan(this: FormulaSource): GenericFormula;
+    public tan(this: FormulaSource) {
+        return Formula.tan(this);
+    }
+
+    public asin<T extends GenericFormula>(this: T): T;
+    public asin(this: FormulaSource): GenericFormula;
+    public asin(this: FormulaSource) {
+        return Formula.asin(this);
+    }
+
+    public acos<T extends GenericFormula>(this: T): T;
+    public acos(this: FormulaSource): GenericFormula;
+    public acos(this: FormulaSource) {
+        return Formula.acos(this);
+    }
+
+    public atan<T extends GenericFormula>(this: T): T;
+    public atan(this: FormulaSource): GenericFormula;
+    public atan(this: FormulaSource) {
+        return Formula.atan(this);
+    }
+
+    public sinh<T extends GenericFormula>(this: T): T;
+    public sinh(this: FormulaSource): GenericFormula;
+    public sinh(this: FormulaSource) {
+        return Formula.sinh(this);
+    }
+
+    public cosh<T extends GenericFormula>(this: T): T;
+    public cosh(this: FormulaSource): GenericFormula;
+    public cosh(this: FormulaSource) {
+        return Formula.cosh(this);
+    }
+
+    public tanh<T extends GenericFormula>(this: T): T;
+    public tanh(this: FormulaSource): GenericFormula;
+    public tanh(this: FormulaSource) {
+        return Formula.tanh(this);
+    }
+
+    public asinh<T extends GenericFormula>(this: T): T;
+    public asinh(this: FormulaSource): GenericFormula;
+    public asinh(this: FormulaSource) {
+        return Formula.asinh(this);
+    }
+
+    public acosh<T extends GenericFormula>(this: T): T;
+    public acosh(this: FormulaSource): GenericFormula;
+    public acosh(this: FormulaSource) {
+        return Formula.acosh(this);
+    }
+
+    public atanh<T extends GenericFormula>(this: T): T;
+    public atanh(this: FormulaSource): GenericFormula;
+    public atanh(this: FormulaSource) {
+        return Formula.atanh(this);
+    }
+}
+
+/**
+ * A class that can be used for cost/goal functions. It can be evaluated similar to a cost function, but also provides extra features for supported formulas. For example, a lot of math functions can be inverted.
+ * Typically, the use of these extra features is to support cost/goal functions that have multiple levels purchased/completed at once efficiently.
+ * @see {@link calculateMaxAffordable}
+ * @see {@link /game/requirements.createCostRequirement}
+ */
+export default class Formula<
+    T extends [FormulaSource] | FormulaSource[]
+> extends InternalFormula<T> {
+    private integralFormula: GenericFormula | undefined;
+
+    /**
+     * Takes a potential result of the formula, and calculates what value the variable inside the formula would have to be for that result to occur. Only works if there's a single variable and if the formula is invertible.
+     * @param value The result of the formula
+     * @see {@link isInvertible}
+     */
+    invert(value: DecimalSource): DecimalSource {
+        if (this.internalInvert && this.hasVariable()) {
+            return this.internalInvert.call(this, value, ...this.inputs);
+        } else if (this.inputs.length === 1 && this.hasVariable()) {
+            return value;
+        }
+        console.error("Cannot invert non-invertible formula");
+        return 0;
+    }
+
+    /**
+     * Evaluate the result of the indefinite integral (sans the constant of integration). Only works if there's a single variable and the formula is integrable. The formula can only have one "complex" operation (anything besides +,-,*,/).
+     * @param variable Optionally override the value of the variable while evaluating
+     * @see {@link isIntegrable}
+     */
+    evaluateIntegral(variable?: DecimalSource): DecimalSource {
+        if (!this.isIntegrable()) {
+            console.error("Cannot evaluate integral of formula without integral");
+            return 0;
+        }
+        return this.getIntegralFormula().evaluate(variable);
+    }
+
+    /**
+     * Given the potential result of the formula's integral (and the constant of integration), calculate what value the variable inside the formula would have to be for that result to occur. Only works if there's a single variable and if the formula's integral is invertible.
+     * @param value The result of the integral.
+     * @see {@link isIntegralInvertible}
+     */
+    invertIntegral(value: DecimalSource): DecimalSource {
+        if (!this.isIntegrable() || !this.getIntegralFormula().isInvertible()) {
+            console.error("Cannot invert integral of formula without invertible integral");
+            return 0;
+        }
+        return (this.getIntegralFormula() as InvertibleFormula).invert(value);
+    }
+
+    /** Calculates C for the implementation of the integral formula for this formula. */
+    calculateConstantOfIntegration() {
+        // Calculate C based on the knowledge that at x=1, the integral should be the average between f(0) and f(1)
+        const integral = this.getIntegralFormula().evaluate(1);
+        const actualCost = Decimal.add(this.evaluate(0), this.evaluate(1)).div(2);
+        return Decimal.sub(actualCost, integral);
+    }
+
+    /**
+     * Get a formula that will evaluate to the integral of this formula. May also be invertible.
+     * @param stack For nested formulas, a stack of operations that occur outside the complex operation.
+     */
+    getIntegralFormula(stack?: SubstitutionStack): GenericFormula {
+        if (this.integralFormula != null && stack == null) {
+            return this.integralFormula;
+        }
+        if (stack == null) {
+            // "Outer" part of the formula
+            if (this.applySubstitution == null) {
+                // We're the complex operation of this formula
+                stack = [];
+                if (this.internalIntegrate == null) {
+                    console.error("Cannot integrate formula with non-integrable operation");
+                    return Formula.constant(0);
+                }
+                let value = this.internalIntegrate.call(this, stack, ...this.inputs);
+                stack.forEach(func => (value = func(value)));
+                this.integralFormula = value;
+            } else {
+                // Continue digging into the formula
+                if (this.internalIntegrate) {
+                    this.integralFormula = this.internalIntegrate.call(
+                        this,
+                        undefined,
+                        ...this.inputs
+                    );
+                } else if (
+                    this.inputs.length === 1 &&
+                    this.internalEvaluate == null &&
+                    this.hasVariable()
+                ) {
+                    this.integralFormula = this;
+                } else {
+                    console.error("Cannot integrate formula without variable");
+                    return Formula.constant(0);
+                }
+            }
+            return this.integralFormula;
+        } else {
+            // "Inner" part of the formula
+            if (this.applySubstitution == null) {
+                console.error("Cannot have two complex operations in an integrable formula");
+                return Formula.constant(0);
+            }
+            stack.push((variable: GenericFormula) =>
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                this.applySubstitution!.call(this, variable, ...this.inputs)
+            );
+            if (this.internalIntegrateInner) {
+                return this.internalIntegrateInner.call(this, stack, ...this.inputs);
+            } else if (this.internalIntegrate) {
+                return this.internalIntegrate.call(this, stack, ...this.inputs);
+            } else if (
+                this.inputs.length === 1 &&
+                this.internalEvaluate == null &&
+                this.hasVariable()
+            ) {
+                return this;
+            } else {
+                console.error("Cannot integrate formula without variable");
+                return Formula.constant(0);
+            }
+        }
+    }
+}
+
+/**
+ * Utility for recursively searching through a formula for the cause of non-invertibility.
+ * @param formula The formula to search for a non-invertible formula within
+ */
+export function findNonInvertible(formula: GenericFormula): GenericFormula | null {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    if (formula.internalInvert == null && formula.internalEvaluate != null) {
+        return formula;
+    }
+    for (const input of formula.inputs) {
+        if (hasVariable(input)) {
+            return findNonInvertible(input);
+        }
+    }
+    return null;
+}
+
+/**
+ * Stringifies a formula so it's more easy to read in the console
+ * @param formula The formula to print
+ */
+export function printFormula(formula: FormulaSource): string {
+    if (formula instanceof InternalFormula) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        return formula.internalEvaluate == null
+            ? formula.hasVariable()
+                ? "x"
+                : formula.inputs[0] ?? 0
+            : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              formula.internalEvaluate.name +
+                  "(" +
+                  formula.inputs.map(printFormula).join(", ") +
+                  ")";
+    }
+    return format(unref(formula));
+}
+
+/**
+ * Utility for calculating the maximum amount of purchases possible with a given formula and resource. If {@link cumulativeCost} is changed to false, the calculation will be much faster with higher numbers.
+ * @param formula The formula to use for calculating buy max from
+ * @param resource The resource used when purchasing (is only read from)
+ * @param cumulativeCost Whether or not to count spent resources on each purchase or not. If true, costs will be approximated for performance, skewing towards fewer purchases
+ * @param directSum How many of the most expensive purchases should be manually summed for better accuracy. If unspecified uses 10 when spending resources and 0 when not
+ * @param maxBulkAmount Cap on how many can be purchased at once. If equal to 1 or lte to {@link directSum} then the formula does not need to be invertible. Defaults to Infinity.
+ */
+export function calculateMaxAffordable(
+    formula: GenericFormula,
+    resource: Resource,
+    cumulativeCost: Computable<boolean> = true,
+    directSum?: Computable<number>,
+    maxBulkAmount: Computable<DecimalSource> = Decimal.dInf
+) {
+    const computedCumulativeCost = convertComputable(cumulativeCost);
+    const computedDirectSum = convertComputable(directSum);
+    const computedmaxBulkAmount = convertComputable(maxBulkAmount);
+    return computed(() => {
+        const maxBulkAmount = unref(computedmaxBulkAmount);
+        if (Decimal.eq(maxBulkAmount, 1)) {
+            return Decimal.gte(resource.value, formula.evaluate()) ? Decimal.dOne : Decimal.dZero;
+        }
+
+        const cumulativeCost = unref(computedCumulativeCost);
+        const directSum = unref(computedDirectSum) ?? (cumulativeCost ? 10 : 0);
+        let affordable: DecimalSource = 0;
+        if (Decimal.gt(maxBulkAmount, directSum)) {
+            if (!formula.isInvertible()) {
+                console.error(
+                    "Cannot calculate max affordable of non-invertible formula with more maxBulkAmount than directSum"
+                );
+                return 0;
+            }
+            if (cumulativeCost) {
+                if (!formula.isIntegralInvertible()) {
+                    console.error(
+                        "Cannot calculate max affordable of formula with non-invertible integral"
+                    );
+                    return 0;
+                }
+                affordable = Decimal.floor(
+                    formula.invertIntegral(Decimal.add(resource.value, formula.evaluateIntegral()))
+                ).sub(unref(formula.innermostVariable) ?? 0);
+            } else {
+                affordable = Decimal.floor(formula.invert(resource.value));
+            }
+        }
+        affordable = Decimal.clampMax(affordable, maxBulkAmount);
+        if (directSum > 0) {
+            const preSumAffordable = affordable;
+            affordable = Decimal.sub(affordable, directSum).clampMin(0);
+            let summedCost;
+            if (cumulativeCost) {
+                summedCost = calculateCost(formula as InvertibleFormula, affordable, true, 0);
+            } else {
+                summedCost = formula.evaluate(
+                    Decimal.add(unref(formula.innermostVariable) ?? 0, affordable)
+                );
+            }
+            while (
+                Decimal.lt(affordable, maxBulkAmount) &&
+                Decimal.lt(affordable, Number.MAX_SAFE_INTEGER) &&
+                Decimal.add(preSumAffordable, 1).gte(affordable)
+            ) {
+                const nextCost = formula.evaluate(
+                    affordable.add(unref(formula.innermostVariable) ?? 0)
+                );
+                if (Decimal.add(summedCost, nextCost).lte(resource.value)) {
+                    affordable = affordable.add(1);
+                    summedCost = Decimal.add(summedCost, nextCost);
+                } else {
+                    break;
+                }
+            }
+        }
+        return affordable;
+    });
+}
+
+/**
+ * Utility for calculating the cost of a formula for a given amount of purchases. If {@link cumulativeCost} is changed to false, the calculation will be much faster with higher numbers.
+ * @param formula The formula to use for calculating buy max from
+ * @param amountToBuy The amount of purchases to calculate the cost for
+ * @param cumulativeCost Whether or not to count spent resources on each purchase or not. If true, costs will be approximated for performance, skewing towards higher cost
+ * @param directSum How many purchases to manually sum for improved accuracy. If not specified, defaults to 10 when cost is cumulative and 0 when not
+ */
+export function calculateCost(
+    formula: InvertibleFormula,
+    amountToBuy: DecimalSource,
+    cumulativeCost?: true,
+    directSum?: number
+): DecimalSource;
+export function calculateCost(
+    formula: InvertibleIntegralFormula,
+    amountToBuy: DecimalSource,
+    cumulativeCost: boolean,
+    directSum?: number
+): DecimalSource;
+export function calculateCost(
+    formula: InvertibleFormula,
+    amountToBuy: DecimalSource,
+    cumulativeCost = true,
+    directSum?: number
+) {
+    // Single purchase
+    if (Decimal.eq(amountToBuy, 1)) {
+        return formula.evaluate();
+    }
+
+    const origValue = unref(formula.innermostVariable) ?? 0;
+    let newValue = Decimal.add(amountToBuy, origValue);
+    const targetValue = newValue;
+    directSum ??= cumulativeCost ? 10 : 0;
+    newValue = newValue.sub(directSum).clampMin(origValue);
+    let cost: DecimalSource = 0;
+
+    // Indirect sum
+    if (Decimal.gt(amountToBuy, directSum)) {
+        if (!formula.isInvertible()) {
+            console.error("Cannot calculate cost with indirect sum of non-invertible formula");
+            return 0;
+        }
+        if (cumulativeCost) {
+            if (!formula.isIntegrable()) {
+                console.error(
+                    "Cannot calculate cost with cumulative cost of non-integrable formula"
+                );
+                return 0;
+            }
+            cost = Decimal.sub(formula.evaluateIntegral(newValue), formula.evaluateIntegral());
+            if (targetValue.gt(1e308)) {
+                // Too large of a number for directSum to make a difference,
+                // just get the cost and multiply by summed purchases
+                return Decimal.add(
+                    cost,
+                    Decimal.sub(targetValue, newValue).times(formula.evaluate(newValue))
+                );
+            }
+        } else {
+            cost = formula.evaluate(newValue);
+            newValue = newValue.add(1);
+            if (targetValue.gt(1e308)) {
+                // Too large of a number for directSum to make a difference,
+                // just get the cost and multiply by summed purchases
+                return Decimal.sub(targetValue, newValue).add(1).times(cost);
+            }
+        }
+    }
+
+    // Direct sum
+    for (let i = newValue.toNumber(); i < targetValue.toNumber(); i++) {
+        cost = Decimal.add(cost, formula.evaluate(i));
+    }
+    return cost;
+}
diff --git a/src/game/formulas/operations.ts b/src/game/formulas/operations.ts
new file mode 100644
index 0000000..586319e
--- /dev/null
+++ b/src/game/formulas/operations.ts
@@ -0,0 +1,936 @@
+import Decimal, { DecimalSource } from "util/bignum";
+import Formula, { hasVariable, unrefFormulaSource } from "./formulas";
+import {
+    FormulaSource,
+    GenericFormula,
+    InvertFunction,
+    InvertibleFormula,
+    SubstitutionStack
+} from "./types";
+
+const ln10 = Decimal.ln(10);
+
+export function passthrough<T extends GenericFormula | DecimalSource>(value: T): T {
+    return value;
+}
+
+export function invertPassthrough(value: DecimalSource, ...inputs: FormulaSource[]) {
+    const variable = inputs.find(input => hasVariable(input)) as InvertibleFormula | undefined;
+    if (variable == null) {
+        console.error("Could not invert due to no input being a variable");
+        return 0;
+    }
+    return variable.invert(value);
+}
+
+export function invertNeg(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.neg(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateNeg(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        return Formula.neg(lhs.getIntegralFormula(stack));
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function applySubstitutionNeg(value: GenericFormula) {
+    return Formula.neg(value);
+}
+
+export function invertAdd(value: DecimalSource, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.sub(value, unrefFormulaSource(rhs)));
+    } else if (hasVariable(rhs)) {
+        return rhs.invert(Decimal.sub(value, unrefFormulaSource(lhs)));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateAdd(stack: SubstitutionStack, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.times(rhs, lhs.innermostVariable ?? 0).add(x);
+    } else if (hasVariable(rhs)) {
+        if (!rhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = rhs.getIntegralFormula(stack);
+        return Formula.times(lhs, rhs.innermostVariable ?? 0).add(x);
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function integrateInnerAdd(
+    stack: SubstitutionStack,
+    lhs: FormulaSource,
+    rhs: FormulaSource
+) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.add(x, rhs);
+    } else if (hasVariable(rhs)) {
+        if (!rhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = rhs.getIntegralFormula(stack);
+        return Formula.add(x, lhs);
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertSub(value: DecimalSource, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.add(value, unrefFormulaSource(rhs)));
+    } else if (hasVariable(rhs)) {
+        return rhs.invert(Decimal.sub(unrefFormulaSource(lhs), value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateSub(stack: SubstitutionStack, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.sub(x, Formula.times(rhs, lhs.innermostVariable ?? 0));
+    } else if (hasVariable(rhs)) {
+        if (!rhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = rhs.getIntegralFormula(stack);
+        return Formula.times(lhs, rhs.innermostVariable ?? 0).sub(x);
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function integrateInnerSub(
+    stack: SubstitutionStack,
+    lhs: FormulaSource,
+    rhs: FormulaSource
+) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.sub(x, rhs);
+    } else if (hasVariable(rhs)) {
+        if (!rhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = rhs.getIntegralFormula(stack);
+        return Formula.sub(x, lhs);
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertMul(value: DecimalSource, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.div(value, unrefFormulaSource(rhs)));
+    } else if (hasVariable(rhs)) {
+        return rhs.invert(Decimal.div(value, unrefFormulaSource(lhs)));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateMul(stack: SubstitutionStack, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.times(x, rhs);
+    } else if (hasVariable(rhs)) {
+        if (!rhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = rhs.getIntegralFormula(stack);
+        return Formula.times(x, lhs);
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function applySubstitutionMul(
+    value: GenericFormula,
+    lhs: FormulaSource,
+    rhs: FormulaSource
+) {
+    if (hasVariable(lhs)) {
+        return Formula.div(value, rhs);
+    } else if (hasVariable(rhs)) {
+        return Formula.div(value, lhs);
+    }
+    console.error("Could not apply substitution due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertDiv(value: DecimalSource, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.mul(value, unrefFormulaSource(rhs)));
+    } else if (hasVariable(rhs)) {
+        return rhs.invert(Decimal.div(unrefFormulaSource(lhs), value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateDiv(stack: SubstitutionStack, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.div(x, rhs);
+    } else if (hasVariable(rhs)) {
+        if (!rhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = rhs.getIntegralFormula(stack);
+        return Formula.div(lhs, x);
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function applySubstitutionDiv(
+    value: GenericFormula,
+    lhs: FormulaSource,
+    rhs: FormulaSource
+) {
+    if (hasVariable(lhs)) {
+        return Formula.mul(value, rhs);
+    } else if (hasVariable(rhs)) {
+        return Formula.mul(value, lhs);
+    }
+    console.error("Could not apply substitution due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertRecip(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.recip(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateRecip(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.ln(x);
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertLog10(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.pow10(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+function internalIntegrateLog10(lhs: DecimalSource) {
+    return Decimal.ln(lhs).sub(1).times(lhs).div(ln10);
+}
+
+function internalInvertIntegralLog10(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        const numerator = ln10.times(value);
+        return lhs.invert(numerator.div(numerator.div(Math.E).lambertw()));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateLog10(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        return new Formula({
+            inputs: [lhs.getIntegralFormula(stack)],
+            evaluate: internalIntegrateLog10,
+            invert: internalInvertIntegralLog10
+        });
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertLog(value: DecimalSource, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.pow(unrefFormulaSource(rhs), value));
+    } else if (hasVariable(rhs)) {
+        return rhs.invert(Decimal.root(unrefFormulaSource(lhs), value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+function internalIntegrateLog(lhs: DecimalSource, rhs: DecimalSource) {
+    return Decimal.ln(lhs).sub(1).times(lhs).div(Decimal.ln(rhs));
+}
+
+function internalInvertIntegralLog(value: DecimalSource, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        const numerator = Decimal.ln(unrefFormulaSource(rhs)).times(value);
+        return lhs.invert(numerator.div(numerator.div(Math.E).lambertw()));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateLog(stack: SubstitutionStack, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        return new Formula({
+            inputs: [lhs.getIntegralFormula(stack), rhs],
+            evaluate: internalIntegrateLog,
+            invert: internalInvertIntegralLog
+        });
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertLog2(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.pow(2, value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+function internalIntegrateLog2(lhs: DecimalSource) {
+    return Decimal.ln(lhs).sub(1).times(lhs).div(Decimal.ln(2));
+}
+
+function internalInvertIntegralLog2(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        const numerator = Decimal.ln(2).times(value);
+        return lhs.invert(numerator.div(numerator.div(Math.E).lambertw()));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateLog2(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        return new Formula({
+            inputs: [lhs.getIntegralFormula(stack)],
+            evaluate: internalIntegrateLog2,
+            invert: internalInvertIntegralLog2
+        });
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertLn(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.exp(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+function internalIntegrateLn(lhs: DecimalSource) {
+    return Decimal.ln(lhs).sub(1).times(lhs);
+}
+
+function internalInvertIntegralLn(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.div(value, Decimal.div(value, Math.E).lambertw()));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateLn(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        return new Formula({
+            inputs: [lhs.getIntegralFormula(stack)],
+            evaluate: internalIntegrateLn,
+            invert: internalInvertIntegralLn
+        });
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertPow(value: DecimalSource, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.root(value, unrefFormulaSource(rhs)));
+    } else if (hasVariable(rhs)) {
+        return rhs.invert(Decimal.ln(value).div(Decimal.ln(unrefFormulaSource(lhs))));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integratePow(stack: SubstitutionStack, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        const pow = Formula.add(rhs, 1);
+        return Formula.pow(x, pow).div(pow);
+    } else if (hasVariable(rhs)) {
+        if (!rhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = rhs.getIntegralFormula(stack);
+        return Formula.pow(lhs, x).div(Formula.ln(lhs));
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertPow10(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.root(value, 10));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integratePow10(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.pow10(x).div(Formula.ln(10));
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertPowBase(value: DecimalSource, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.ln(value).div(Decimal.ln(unrefFormulaSource(rhs))));
+    } else if (hasVariable(rhs)) {
+        return rhs.invert(Decimal.root(unrefFormulaSource(lhs), value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integratePowBase(stack: SubstitutionStack, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.pow(rhs, x).div(Formula.ln(rhs));
+    } else if (hasVariable(rhs)) {
+        if (!rhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = rhs.getIntegralFormula(stack);
+        const denominator = Formula.add(lhs, 1);
+        return Formula.pow(x, denominator).div(denominator);
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertRoot(value: DecimalSource, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.root(value, Decimal.recip(unrefFormulaSource(rhs))));
+    } else if (hasVariable(rhs)) {
+        return rhs.invert(Decimal.ln(unrefFormulaSource(lhs)).div(Decimal.ln(value)));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateRoot(stack: SubstitutionStack, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.pow(x, Formula.recip(rhs).add(1)).times(rhs).div(Formula.add(rhs, 1));
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertExp(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.ln(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateExp(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.exp(x);
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function tetrate(
+    value: DecimalSource,
+    height: DecimalSource = 2,
+    payload: DecimalSource = Decimal.fromComponents_noNormalize(1, 0, 1)
+) {
+    const heightNumber = Decimal.minabs(height, 1e308).toNumber();
+    return Decimal.tetrate(value, heightNumber, payload);
+}
+
+export function invertTetrate(
+    value: DecimalSource,
+    base: FormulaSource,
+    height: FormulaSource,
+    payload: FormulaSource
+) {
+    if (hasVariable(base)) {
+        return base.invert(Decimal.ssqrt(value));
+    }
+    // Other params can't be inverted ATM
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function iteratedexp(
+    value: DecimalSource,
+    height: DecimalSource = 2,
+    payload: DecimalSource = Decimal.fromComponents_noNormalize(1, 0, 1)
+) {
+    const heightNumber = Decimal.minabs(height, 1e308).toNumber();
+    return Decimal.iteratedexp(value, heightNumber, new Decimal(payload));
+}
+
+export function invertIteratedExp(
+    value: DecimalSource,
+    lhs: FormulaSource,
+    height: FormulaSource,
+    payload: FormulaSource
+) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(
+            Decimal.iteratedlog(
+                value,
+                Math.E,
+                Decimal.minabs(1e308, unrefFormulaSource(height)).toNumber()
+            )
+        );
+    }
+    // Other params can't be inverted ATM
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function iteratedLog(
+    value: DecimalSource,
+    lhs: DecimalSource = 10,
+    times: DecimalSource = 2
+) {
+    const timesNumber = Decimal.minabs(times, 1e308).toNumber();
+    return Decimal.iteratedlog(value, lhs, timesNumber);
+}
+
+export function slog(value: DecimalSource, lhs: DecimalSource = 10) {
+    const baseNumber = Decimal.minabs(lhs, 1e308).toNumber();
+    return Decimal.slog(value, baseNumber);
+}
+
+export function invertSlog(value: DecimalSource, lhs: FormulaSource, rhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(
+            Decimal.tetrate(value, Decimal.minabs(1e308, unrefFormulaSource(rhs)).toNumber())
+        );
+    }
+    // Other params can't be inverted ATM
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function layeradd(value: DecimalSource, diff: DecimalSource, base: DecimalSource) {
+    const diffNumber = Decimal.minabs(diff, 1e308).toNumber();
+    return Decimal.layeradd(value, diffNumber, base);
+}
+
+export function invertLayeradd(
+    value: DecimalSource,
+    lhs: FormulaSource,
+    diff: FormulaSource,
+    base: FormulaSource
+) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(
+            Decimal.layeradd(
+                value,
+                Decimal.minabs(1e308, unrefFormulaSource(diff)).negate().toNumber()
+            )
+        );
+    }
+    // Other params can't be inverted ATM
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function invertLambertw(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.pow(Math.E, value).times(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function invertSsqrt(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.tetrate(value, 2));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function pentate(value: DecimalSource, height: DecimalSource, payload: DecimalSource) {
+    const heightNumber = Decimal.minabs(height, 1e308).toNumber();
+    return Decimal.pentate(value, heightNumber, payload);
+}
+
+export function invertSin(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.asin(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateSin(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.cos(x).neg();
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertCos(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.acos(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateCos(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.sin(x);
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertTan(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.atan(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateTan(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.cos(x).ln().neg();
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertAsin(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.sin(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateAsin(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.asin(x)
+            .times(x)
+            .add(Formula.sqrt(Formula.sub(1, Formula.pow(x, 2))));
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertAcos(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.cos(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateAcos(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.acos(x)
+            .times(x)
+            .sub(Formula.sqrt(Formula.sub(1, Formula.pow(x, 2))));
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertAtan(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.tan(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateAtan(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.atan(x)
+            .times(x)
+            .sub(Formula.ln(Formula.pow(x, 2).add(1)).div(2));
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertSinh(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.asinh(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateSinh(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.cosh(x);
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertCosh(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.acosh(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateCosh(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.sinh(x);
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertTanh(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.atanh(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateTanh(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.cosh(x).ln();
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertAsinh(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.sinh(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateAsinh(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.asinh(x).times(x).sub(Formula.pow(x, 2).add(1).sqrt());
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertAcosh(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.cosh(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateAcosh(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.acosh(x)
+            .times(x)
+            .sub(Formula.add(x, 1).sqrt().times(Formula.sub(x, 1).sqrt()));
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function invertAtanh(value: DecimalSource, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        return lhs.invert(Decimal.tanh(value));
+    }
+    console.error("Could not invert due to no input being a variable");
+    return 0;
+}
+
+export function integrateAtanh(stack: SubstitutionStack, lhs: FormulaSource) {
+    if (hasVariable(lhs)) {
+        if (!lhs.isIntegrable()) {
+            console.error("Could not integrate due to variable not being integrable");
+            return Formula.constant(0);
+        }
+        const x = lhs.getIntegralFormula(stack);
+        return Formula.atanh(x)
+            .times(x)
+            .add(Formula.sub(1, Formula.pow(x, 2)).ln().div(2));
+    }
+    console.error("Could not integrate due to no input being a variable");
+    return Formula.constant(0);
+}
+
+export function createPassthroughBinaryFormula(
+    operation: (a: DecimalSource, b: DecimalSource) => DecimalSource
+) {
+    return (value: FormulaSource, other: FormulaSource) =>
+        new Formula({
+            inputs: [value, other],
+            evaluate: operation,
+            invert: passthrough as InvertFunction<[FormulaSource, FormulaSource]>
+        });
+}
diff --git a/src/game/formulas/types.d.ts b/src/game/formulas/types.d.ts
new file mode 100644
index 0000000..88efd92
--- /dev/null
+++ b/src/game/formulas/types.d.ts
@@ -0,0 +1,76 @@
+import { InternalFormula } from "game/formulas/formulas";
+import { DecimalSource } from "util/bignum";
+import { ProcessedComputable } from "util/computed";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type GenericFormula = InternalFormula<any>;
+type FormulaSource = ProcessedComputable<DecimalSource> | GenericFormula;
+type InvertibleFormula = GenericFormula & {
+    invert: NonNullable<GenericFormula["invert"]>;
+};
+type IntegrableFormula = InvertibleFormula & {
+    evaluateIntegral: NonNullable<GenericFormula["evaluateIntegral"]>;
+    getIntegralFormula: NonNullable<GenericFormula["getIntegralFormula"]>;
+    calculateConstantOfIntegration: NonNullable<GenericFormula["calculateConstantOfIntegration"]>;
+};
+type InvertibleIntegralFormula = IntegrableFormula & {
+    invertIntegral: NonNullable<GenericFormula["invertIntegral"]>;
+};
+
+type EvaluateFunction<T> = (
+    this: InternalFormula<T>,
+    ...inputs: GuardedFormulasToDecimals<T>
+) => DecimalSource;
+type InvertFunction<T> = (
+    this: InternalFormula<T>,
+    value: DecimalSource,
+    ...inputs: T
+) => DecimalSource;
+type IntegrateFunction<T> = (
+    this: InternalFormula<T>,
+    stack: SubstitutionStack | undefined,
+    ...inputs: T
+) => GenericFormula;
+type SubstitutionFunction<T> = (
+    this: InternalFormula<T>,
+    variable: GenericFormula,
+    ...inputs: T
+) => GenericFormula;
+
+type VariableFormulaOptions = { variable: ProcessedComputable<DecimalSource> };
+type ConstantFormulaOptions = {
+    inputs: [FormulaSource];
+};
+type GeneralFormulaOptions<T extends [FormulaSource] | FormulaSource[]> = {
+    inputs: T;
+    evaluate: EvaluateFunction<T>;
+    invert?: InvertFunction<T>;
+    integrate?: IntegrateFunction<T>;
+    integrateInner?: IntegrateFunction<T>;
+    applySubstitution?: SubstitutionFunction<T>;
+};
+type FormulaOptions<T extends [FormulaSource] | FormulaSource[]> =
+    | VariableFormulaOptions
+    | ConstantFormulaOptions
+    | GeneralFormulaOptions<T>;
+
+type InternalFormulaProperties<T extends [FormulaSource] | FormulaSource[]> = {
+    inputs: T;
+    internalVariables: number;
+    internalEvaluate?: EvaluateFunction<T>;
+    internalInvert?: InvertFunction<T>;
+    internalIntegrate?: IntegrateFunction<T>;
+    internalIntegrateInner?: IntegrateFunction<T>;
+    applySubstitution?: SubstitutionFunction<T>;
+    innermostVariable?: ProcessedComputable<DecimalSource>;
+};
+
+type SubstitutionStack = ((value: GenericFormula) => GenericFormula)[] | undefined;
+
+// It's really hard to type mapped tuples, but these classes seem to manage
+type FormulasToDecimals<T extends FormulaSource[]> = {
+    [K in keyof T]: DecimalSource;
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type TupleGuard<T extends any[]> = T extends any[] ? FormulasToDecimals<T> : never;
+type GuardedFormulasToDecimals<T extends FormulaSource[]> = TupleGuard<T>;
diff --git a/src/game/gameLoop.ts b/src/game/gameLoop.ts
new file mode 100644
index 0000000..b001dd6
--- /dev/null
+++ b/src/game/gameLoop.ts
@@ -0,0 +1,109 @@
+import projInfo from "data/projInfo.json";
+import { globalBus } from "game/events";
+import settings from "game/settings";
+import Decimal from "util/bignum";
+import { loadingSave } from "util/save";
+import type { Ref } from "vue";
+import { watch } from "vue";
+import player from "./player";
+import state from "./state";
+
+let intervalID: NodeJS.Timer | null = null;
+
+// Not imported immediately due to dependency cycles
+// This gets set during startGameLoop(), and will only be used in the update function
+let hasWon: null | Ref<boolean> = null;
+
+function update() {
+    const now = Date.now();
+    let diff = (now - player.time) / 1e3;
+    player.time = now;
+    const trueDiff = diff;
+
+    state.lastTenTicks.push(trueDiff);
+    if (state.lastTenTicks.length > 10) {
+        state.lastTenTicks = state.lastTenTicks.slice(1);
+    }
+
+    // Stop here if the game is paused on the win screen
+    if (hasWon?.value && !player.keepGoing) {
+        return;
+    }
+    // Stop here if the player had a NaN value
+    if (state.hasNaN) {
+        return;
+    }
+
+    diff = Math.max(diff, 0);
+
+    if (player.devSpeed === 0) {
+        return;
+    }
+
+    loadingSave.value = false;
+
+    // Add offline time if any
+    if (player.offlineTime != undefined) {
+        if (Decimal.gt(player.offlineTime, projInfo.offlineLimit * 3600)) {
+            player.offlineTime = projInfo.offlineLimit * 3600;
+        }
+        if (Decimal.gt(player.offlineTime, 0) && player.devSpeed !== 0) {
+            const offlineDiff = Math.max(player.offlineTime / 10, diff);
+            player.offlineTime = player.offlineTime - offlineDiff;
+            diff += offlineDiff;
+        } else if (player.devSpeed === 0) {
+            player.offlineTime += diff;
+        }
+        if (!player.offlineProd || Decimal.lt(player.offlineTime, 0)) {
+            player.offlineTime = null;
+        }
+    }
+
+    // Cap at max tick length
+    diff = Math.min(diff, projInfo.maxTickLength);
+
+    // Apply dev speed
+    if (player.devSpeed != undefined) {
+        diff *= player.devSpeed;
+    }
+
+    if (!Number.isFinite(diff)) {
+        diff = 1e308;
+    }
+
+    // Update
+    if (Decimal.eq(diff, 0)) {
+        return;
+    }
+
+    player.timePlayed += diff;
+    if (!Number.isFinite(player.timePlayed)) {
+        player.timePlayed = 1e308;
+    }
+    globalBus.emit("update", diff, trueDiff);
+
+    if (settings.unthrottled) {
+        requestAnimationFrame(update);
+        if (intervalID != null) {
+            clearInterval(intervalID);
+            intervalID = null;
+        }
+    } else if (intervalID == null) {
+        intervalID = setInterval(update, 50);
+    }
+}
+
+/** Starts the game loop for the project, which updates the game in ticks. */
+export async function startGameLoop() {
+    hasWon = (await import("data/projEntry")).hasWon;
+    watch(hasWon, hasWon => {
+        if (hasWon) {
+            globalBus.emit("gameWon");
+        }
+    });
+    if (settings.unthrottled) {
+        requestAnimationFrame(update);
+    } else {
+        intervalID = setInterval(update, 50);
+    }
+}
diff --git a/src/game/layers.tsx b/src/game/layers.tsx
index 404d72c..bbb6079 100644
--- a/src/game/layers.tsx
+++ b/src/game/layers.tsx
@@ -21,7 +21,7 @@ import type {
 } from "util/computed";
 import { processComputable } from "util/computed";
 import { createLazyProxy } from "util/proxies";
-import type { InjectionKey, Ref } from "vue";
+import { computed, InjectionKey, Ref } from "vue";
 import { ref, shallowReactive, unref } from "vue";
 
 /** A feature's node in the DOM that has its size tracked. */
@@ -109,7 +109,7 @@ export interface LayerOptions {
     color?: Computable<string>;
     /**
      * The layout of this layer's features.
-     * When the layer is open in {@link game/player.PlayerData.tabs}, this is the content that is display.
+     * When the layer is open in {@link game/player.PlayerData.tabs}, this is the content that is displayed.
      */
     display: Computable<CoercableComponent>;
     /** An object of classes that should be applied to the display. */
@@ -126,6 +126,11 @@ export interface LayerOptions {
      * Defaults to true.
      */
     minimizable?: Computable<boolean>;
+    /**
+     * The layout of this layer's features.
+     * When the layer is open in {@link game/player.PlayerData.tabs}, but the tab is {@link Layer.minimized} this is the content that is displayed.
+     */
+    minimizedDisplay?: Computable<CoercableComponent>;
     /**
      * Whether or not to force the go back button to be hidden.
      * If true, go back will be hidden regardless of {@link data/projInfo.allowGoBack}.
@@ -170,6 +175,7 @@ export type Layer<T extends LayerOptions> = Replace<
         name: GetComputableTypeWithDefault<T["name"], string>;
         minWidth: GetComputableTypeWithDefault<T["minWidth"], 600>;
         minimizable: GetComputableTypeWithDefault<T["minimizable"], true>;
+        minimizedDisplay: GetComputableType<T["minimizedDisplay"]>;
         forceHideGoBack: GetComputableType<T["forceHideGoBack"]>;
     }
 >;
@@ -213,24 +219,57 @@ export function createLayer<T extends LayerOptions>(
 
         addingLayers.push(id);
         persistentRefs[id] = new Set();
-        layer.minimized = persistent(false);
-        Object.assign(layer, optionsFunc.call(layer as BaseLayer));
+        layer.minimized = persistent(false, false);
+        Object.assign(layer, optionsFunc.call(layer, layer as BaseLayer));
         if (
             addingLayers[addingLayers.length - 1] == null ||
             addingLayers[addingLayers.length - 1] !== id
         ) {
-            throw `Adding layers stack in invalid state. This should not happen\nStack: ${addingLayers}\nTrying to pop ${layer.id}`;
+            throw new Error(
+                `Adding layers stack in invalid state. This should not happen\nStack: ${addingLayers}\nTrying to pop ${layer.id}`
+            );
         }
         addingLayers.pop();
 
         processComputable(layer as T, "color");
         processComputable(layer as T, "display");
+        processComputable(layer as T, "classes");
+        processComputable(layer as T, "style");
         processComputable(layer as T, "name");
         setDefault(layer, "name", layer.id);
         processComputable(layer as T, "minWidth");
         setDefault(layer, "minWidth", 600);
         processComputable(layer as T, "minimizable");
         setDefault(layer, "minimizable", true);
+        processComputable(layer as T, "minimizedDisplay");
+
+        const style = layer.style as ProcessedComputable<StyleValue> | undefined;
+        layer.style = computed(() => {
+            let width = unref(layer.minWidth as ProcessedComputable<number | string>);
+            if (typeof width === "number" || !Number.isNaN(parseInt(width))) {
+                width = width + "px";
+            }
+            return [
+                unref(style) ?? "",
+                layer.minimized?.value
+                    ? {
+                          flexGrow: "0",
+                          flexShrink: "0",
+                          width: "60px",
+                          minWidth: "",
+                          flexBasis: "",
+                          margin: "0"
+                      }
+                    : {
+                          flexGrow: "",
+                          flexShrink: "",
+                          width: "",
+                          minWidth: width,
+                          flexBasis: width,
+                          margin: ""
+                      }
+            ];
+        }) as Ref<StyleValue>;
 
         return layer as unknown as Layer<T>;
     });
diff --git a/src/game/modifiers.tsx b/src/game/modifiers.tsx
index e6e5f66..b65e7fc 100644
--- a/src/game/modifiers.tsx
+++ b/src/game/modifiers.tsx
@@ -1,27 +1,31 @@
 import "components/common/modifiers.css";
-import type { CoercableComponent } from "features/feature";
+import type { CoercableComponent, OptionsFunc } from "features/feature";
 import { jsx } from "features/feature";
+import settings from "game/settings";
 import type { DecimalSource } from "util/bignum";
-import Decimal, { format } from "util/bignum";
+import Decimal, { formatSmall } from "util/bignum";
 import type { WithRequired } from "util/common";
 import type { Computable, ProcessedComputable } from "util/computed";
 import { convertComputable } from "util/computed";
 import { createLazyProxy } from "util/proxies";
 import { renderJSX } from "util/vue";
 import { computed, unref } from "vue";
+import Formula from "./formulas/formulas";
+import { FormulaSource, GenericFormula } from "./formulas/types";
 
 /**
  * An object that can be used to apply or unapply some modification to a number.
  * Being reversible requires the operation being invertible, but some features may rely on that.
  * Descriptions can be optionally included for displaying them to the player.
- * The built-in modifier creators are designed to display the modifiers using.
- * {@link createModifierSection}.
+ * The built-in modifier creators are designed to display the modifiers using {@link createModifierSection}.
  */
 export interface Modifier {
     /** Applies some operation on the input and returns the result. */
     apply: (gain: DecimalSource) => DecimalSource;
     /** Reverses the operation applied by the apply property. Required by some features. */
-    revert?: (gain: DecimalSource) => DecimalSource;
+    invert?: (gain: DecimalSource) => DecimalSource;
+    /** Get a formula for this modifier. Required by some features. */
+    getFormula?: (gain: FormulaSource) => GenericFormula;
     /**
      * Whether or not this modifier should be considered enabled.
      * Typically for use with modifiers passed into {@link createSequentialModifier}.
@@ -37,22 +41,24 @@ export interface Modifier {
 /**
  * Utility type used to narrow down a modifier type that will have a description and/or enabled property based on optional parameters, T and S (respectively).
  */
-export type ModifierFromOptionalParams<T, S> = T extends undefined
-    ? S extends undefined
-        ? Omit<WithRequired<Modifier, "revert">, "description" | "enabled">
-        : Omit<WithRequired<Modifier, "revert" | "enabled">, "description">
-    : S extends undefined
-    ? Omit<WithRequired<Modifier, "revert" | "description">, "enabled">
-    : WithRequired<Modifier, "revert" | "enabled" | "description">;
+export type ModifierFromOptionalParams<T, S> = undefined extends T
+    ? undefined extends S
+        ? Omit<WithRequired<Modifier, "invert" | "getFormula">, "description" | "enabled">
+        : Omit<WithRequired<Modifier, "invert" | "enabled" | "getFormula">, "description">
+    : undefined extends S
+    ? Omit<WithRequired<Modifier, "invert" | "description" | "getFormula">, "enabled">
+    : WithRequired<Modifier, "invert" | "enabled" | "description" | "getFormula">;
 
 /** An object that configures an additive modifier via {@link createAdditiveModifier}. */
 export interface AdditiveModifierOptions {
     /** The amount to add to the input value. */
     addend: Computable<DecimalSource>;
     /** Description of what this modifier is doing. */
-    description?: Computable<CoercableComponent> | undefined;
+    description?: Computable<CoercableComponent>;
     /** A computable that will be processed and passed directly into the returned modifier. */
-    enabled?: Computable<boolean> | undefined;
+    enabled?: Computable<boolean>;
+    /** Determines if numbers larger or smaller than 0 should be displayed as red. */
+    smallerIsBetter?: boolean;
 }
 
 /**
@@ -60,33 +66,48 @@ export interface AdditiveModifierOptions {
  * @param optionsFunc Additive modifier options.
  */
 export function createAdditiveModifier<T extends AdditiveModifierOptions>(
-    optionsFunc: () => T
+    optionsFunc: OptionsFunc<T>
 ): ModifierFromOptionalParams<T["description"], T["enabled"]> {
-    return createLazyProxy(() => {
-        const { addend, description, enabled } = optionsFunc();
+    return createLazyProxy(feature => {
+        const { addend, description, enabled, smallerIsBetter } = optionsFunc.call(
+            feature,
+            feature
+        );
 
         const processedAddend = convertComputable(addend);
         const processedDescription = convertComputable(description);
         const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
         return {
             apply: (gain: DecimalSource) => Decimal.add(gain, unref(processedAddend)),
-            revert: (gain: DecimalSource) => Decimal.sub(gain, unref(processedAddend)),
+            invert: (gain: DecimalSource) => Decimal.sub(gain, unref(processedAddend)),
+            getFormula: (gain: FormulaSource) => Formula.add(gain, processedAddend),
             enabled: processedEnabled,
             description:
                 description == null
                     ? undefined
                     : jsx(() => (
                           <div class="modifier-container">
-                              <span class="modifier-amount">
-                                  {Decimal.gte(unref(processedAddend), 0) ? "+" : ""}
-                                  {format(unref(processedAddend))}
-                              </span>
-                              {unref(processedDescription) ? (
+                              {unref(processedDescription) != null ? (
                                   <span class="modifier-description">
                                       {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
                                       {renderJSX(unref(processedDescription)!)}
                                   </span>
                               ) : null}
+                              <span
+                                  class="modifier-amount"
+                                  style={
+                                      (
+                                          smallerIsBetter === true
+                                              ? Decimal.gt(unref(processedAddend), 0)
+                                              : Decimal.lt(unref(processedAddend), 0)
+                                      )
+                                          ? "color: var(--danger)"
+                                          : ""
+                                  }
+                              >
+                                  {Decimal.gte(unref(processedAddend), 0) ? "+" : ""}
+                                  {formatSmall(unref(processedAddend))}
+                              </span>
                           </div>
                       ))
         };
@@ -101,6 +122,8 @@ export interface MultiplicativeModifierOptions {
     description?: Computable<CoercableComponent> | undefined;
     /** A computable that will be processed and passed directly into the returned modifier. */
     enabled?: Computable<boolean> | undefined;
+    /** Determines if numbers larger or smaller than 1 should be displayed as red. */
+    smallerIsBetter?: boolean;
 }
 
 /**
@@ -108,32 +131,47 @@ export interface MultiplicativeModifierOptions {
  * @param optionsFunc Multiplicative modifier options.
  */
 export function createMultiplicativeModifier<T extends MultiplicativeModifierOptions>(
-    optionsFunc: () => T
+    optionsFunc: OptionsFunc<T>
 ): ModifierFromOptionalParams<T["description"], T["enabled"]> {
-    return createLazyProxy(() => {
-        const { multiplier, description, enabled } = optionsFunc();
+    return createLazyProxy(feature => {
+        const { multiplier, description, enabled, smallerIsBetter } = optionsFunc.call(
+            feature,
+            feature
+        );
 
         const processedMultiplier = convertComputable(multiplier);
         const processedDescription = convertComputable(description);
         const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
         return {
             apply: (gain: DecimalSource) => Decimal.times(gain, unref(processedMultiplier)),
-            revert: (gain: DecimalSource) => Decimal.div(gain, unref(processedMultiplier)),
+            invert: (gain: DecimalSource) => Decimal.div(gain, unref(processedMultiplier)),
+            getFormula: (gain: FormulaSource) => Formula.times(gain, processedMultiplier),
             enabled: processedEnabled,
             description:
                 description == null
                     ? undefined
                     : jsx(() => (
                           <div class="modifier-container">
-                              <span class="modifier-amount">
-                                  x{format(unref(processedMultiplier))}
-                              </span>
-                              {unref(processedDescription) ? (
+                              {unref(processedDescription) != null ? (
                                   <span class="modifier-description">
                                       {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
                                       {renderJSX(unref(processedDescription)!)}
                                   </span>
                               ) : null}
+                              <span
+                                  class="modifier-amount"
+                                  style={
+                                      (
+                                          smallerIsBetter === true
+                                              ? Decimal.gt(unref(processedMultiplier), 1)
+                                              : Decimal.lt(unref(processedMultiplier), 1)
+                                      )
+                                          ? "color: var(--danger)"
+                                          : ""
+                                  }
+                              >
+                                  ×{formatSmall(unref(processedMultiplier))}
+                              </span>
                           </div>
                       ))
         };
@@ -150,6 +188,8 @@ export interface ExponentialModifierOptions {
     enabled?: Computable<boolean> | undefined;
     /** Add 1 before calculating, then remove it afterwards. This prevents low numbers from becoming lower. */
     supportLowNumbers?: boolean;
+    /** Determines if numbers larger or smaller than 1 should be displayed as red. */
+    smallerIsBetter?: boolean;
 }
 
 /**
@@ -157,10 +197,11 @@ export interface ExponentialModifierOptions {
  * @param optionsFunc Exponential modifier options.
  */
 export function createExponentialModifier<T extends ExponentialModifierOptions>(
-    optionsFunc: () => T
+    optionsFunc: OptionsFunc<T>
 ): ModifierFromOptionalParams<T["description"], T["enabled"]> {
-    return createLazyProxy(() => {
-        const { exponent, description, enabled, supportLowNumbers } = optionsFunc();
+    return createLazyProxy(feature => {
+        const { exponent, description, enabled, supportLowNumbers, smallerIsBetter } =
+            optionsFunc.call(feature, feature);
 
         const processedExponent = convertComputable(exponent);
         const processedDescription = convertComputable(description);
@@ -177,7 +218,7 @@ export function createExponentialModifier<T extends ExponentialModifierOptions>(
                 }
                 return result;
             },
-            revert: (gain: DecimalSource) => {
+            invert: (gain: DecimalSource) => {
                 let result = gain;
                 if (supportLowNumbers) {
                     result = Decimal.add(result, 1);
@@ -188,22 +229,37 @@ export function createExponentialModifier<T extends ExponentialModifierOptions>(
                 }
                 return result;
             },
+            getFormula: (gain: FormulaSource) =>
+                supportLowNumbers
+                    ? Formula.add(gain, 1).pow(processedExponent).sub(1)
+                    : Formula.pow(gain, processedExponent),
             enabled: processedEnabled,
             description:
                 description == null
                     ? undefined
                     : jsx(() => (
                           <div class="modifier-container">
-                              <span class="modifier-amount">
-                                  ^{format(unref(processedExponent))}
-                              </span>
-                              {unref(processedDescription) ? (
+                              {unref(processedDescription) != null ? (
                                   <span class="modifier-description">
                                       {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
                                       {renderJSX(unref(processedDescription)!)}
                                       {supportLowNumbers ? " (+1 effective)" : null}
                                   </span>
                               ) : null}
+                              <span
+                                  class="modifier-amount"
+                                  style={
+                                      (
+                                          smallerIsBetter === true
+                                              ? Decimal.gt(unref(processedExponent), 1)
+                                              : Decimal.lt(unref(processedExponent), 1)
+                                      )
+                                          ? "color: var(--danger)"
+                                          : ""
+                                  }
+                              >
+                                  ^{formatSmall(unref(processedExponent))}
+                              </span>
                           </div>
                       ))
         };
@@ -219,9 +275,9 @@ export function createExponentialModifier<T extends ExponentialModifierOptions>(
  */
 export function createSequentialModifier<
     T extends Modifier[],
-    S = T extends WithRequired<Modifier, "revert">[]
-        ? WithRequired<Modifier, "description" | "revert">
-        : Omit<WithRequired<Modifier, "description">, "revert">
+    S = T extends WithRequired<Modifier, "invert">[]
+        ? WithRequired<Modifier, "description" | "invert">
+        : Omit<WithRequired<Modifier, "description">, "invert">
 >(modifiersFunc: () => T): S {
     return createLazyProxy(() => {
         const modifiers = modifiersFunc();
@@ -231,64 +287,106 @@ export function createSequentialModifier<
                 modifiers
                     .filter(m => unref(m.enabled) !== false)
                     .reduce((gain, modifier) => modifier.apply(gain), gain),
-            revert: modifiers.every(m => m.revert != null)
+            invert: modifiers.every(m => m.invert != null)
                 ? (gain: DecimalSource) =>
                       modifiers
                           .filter(m => unref(m.enabled) !== false)
                           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                          .reduceRight((gain, modifier) => modifier.revert!(gain), gain)
+                          .reduceRight((gain, modifier) => modifier.invert!(gain), gain)
                 : undefined,
-            enabled: computed(() => modifiers.filter(m => unref(m.enabled) !== false).length > 0),
-            description: jsx(() => (
-                <>
-                    {(
-                        modifiers
-                            .filter(m => unref(m.enabled) !== false)
-                            .map(m => unref(m.description))
-                            .filter(d => d) as CoercableComponent[]
-                    ).map(renderJSX)}
-                </>
-            ))
+            getFormula: modifiers.every(m => m.getFormula != null)
+                ? (gain: FormulaSource) =>
+                      modifiers
+                          .filter(m => unref(m.enabled) !== false)
+                          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                          .reduce((acc, curr) => curr.getFormula!(acc), gain)
+                : undefined,
+            enabled: modifiers.some(m => m.enabled != null)
+                ? computed(() => modifiers.filter(m => unref(m.enabled) !== false).length > 0)
+                : undefined,
+            description: modifiers.some(m => m.description != null)
+                ? jsx(() => (
+                      <>
+                          {(
+                              modifiers
+                                  .filter(m => unref(m.enabled) !== false)
+                                  .map(m => unref(m.description))
+                                  .filter(d => d) as CoercableComponent[]
+                          ).map(renderJSX)}
+                      </>
+                  ))
+                : undefined
         };
     }) as unknown as S;
 }
 
+/** An object that configures a modifier section via {@link createModifierSection}. */
+export interface ModifierSectionOptions {
+    /** The header for the section. */
+    title: string;
+    /** Smaller text that appears in the header after the title. */
+    subtitle?: string;
+    /** The modifier to render. */
+    modifier: WithRequired<Modifier, "description">;
+    /** The base value that'll be passed into the modifier. Defaults to 1. */
+    base?: DecimalSource;
+    /** The unit of the value being modified, if any. */
+    unit?: string;
+    /** The label to use for the base value. Defaults to "Base". */
+    baseText?: CoercableComponent;
+    /** Determines if numbers larger or smaller than the base should be displayed as red. */
+    smallerIsBetter?: boolean;
+}
+
 /**
  * Create a JSX element that displays a modifier.
  * Intended to be used with the output from {@link createSequentialModifier}.
- * @param title The header for the section.
- * @param subtitle Smaller text that appears in the header after the title.
- * @param modifier The modifier to render.
- * @param base The base value that'll be passed into the modifier.
- * @param unit The unit of the value being modified, if any.
- * @param baseText The label to use for the base value.
+ * @param options Modifier section options.
  */
-export function createModifierSection(
-    title: string,
-    subtitle: string,
-    modifier: WithRequired<Modifier, "description">,
-    base: DecimalSource = 1,
-    unit = "",
-    baseText: CoercableComponent = "Base"
-) {
+export function createModifierSection({
+    title,
+    subtitle,
+    modifier,
+    base,
+    unit,
+    baseText,
+    smallerIsBetter
+}: ModifierSectionOptions) {
+    const total = modifier.apply(base ?? 1);
     return (
-        <div>
+        <div style={{ "--unit": settings.alignUnits && unit != null ? "'" + unit + "'" : "" }}>
             <h3>
                 {title}
-                {subtitle ? <span class="subtitle"> ({subtitle})</span> : null}
+                {subtitle == null ? null : <span class="subtitle"> ({subtitle})</span>}
             </h3>
             <br />
             <div class="modifier-container">
+                <span class="modifier-description">{renderJSX(baseText ?? "Base")}</span>
                 <span class="modifier-amount">
-                    {format(base)}
+                    {formatSmall(base ?? 1)}
                     {unit}
                 </span>
-                <span class="modifier-description">{renderJSX(baseText)}</span>
             </div>
             {renderJSX(unref(modifier.description))}
             <hr />
-            Total: {format(modifier.apply(base))}
-            {unit}
+            <div class="modifier-container">
+                <span class="modifier-description">Total</span>
+                <span
+                    class="modifier-amount"
+                    style={
+                        (
+                            smallerIsBetter === true
+                                ? Decimal.gt(total, base ?? 1)
+                                : Decimal.lt(total, base ?? 1)
+                        )
+                            ? "color: var(--danger)"
+                            : ""
+                    }
+                >
+                    {formatSmall(total)}
+                    {unit}
+                </span>
+            </div>
         </div>
     );
 }
diff --git a/src/game/persistence.ts b/src/game/persistence.ts
index b871fbf..e760411 100644
--- a/src/game/persistence.ts
+++ b/src/game/persistence.ts
@@ -5,8 +5,11 @@ import { addingLayers, persistentRefs } from "game/layers";
 import type { DecimalSource } from "util/bignum";
 import Decimal from "util/bignum";
 import { ProxyState } from "util/proxies";
-import type { Ref } from "vue";
-import { isReactive, isRef, ref } from "vue";
+import type { Ref, WritableComputedRef } from "vue";
+import { computed, isReactive, isRef, ref } from "vue";
+import player from "./player";
+import state from "./state";
+import Formula from "./formulas/formulas";
 
 /**
  * A symbol used in {@link Persistent} objects.
@@ -28,6 +31,26 @@ export const StackTrace = Symbol("StackTrace");
  * @see {@link Persistent[Deleted]}
  */
 export const Deleted = Symbol("Deleted");
+/**
+ * A symbol used in {@link Persistent} objects.
+ * @see {@link Persistent[NonPersistent]}
+ */
+export const NonPersistent = Symbol("NonPersistent");
+/**
+ * A symbol used in {@link Persistent} objects.
+ * @see {@link Persistent[SaveDataPath]}
+ */
+export const SaveDataPath = Symbol("SaveDataPath");
+/**
+ * A symbol used in {@link Persistent} objects.
+ * @see {@link Persistent[CheckNaN]}
+ */
+export const CheckNaN = Symbol("CheckNaN");
+
+/**
+ * A symbol used to flag objects that should not be checked for persistent values.
+ */
+export const SkipPersistence = Symbol("SkipPersistence");
 
 /**
  * This is a union of things that should be safely stringifiable without needing special processes or knowing what to load them in as.
@@ -46,6 +69,7 @@ export type State =
  * A {@link Ref} that has been augmented with properties to allow it to be saved and loaded within the player save data object.
  */
 export type Persistent<T extends State = State> = Ref<T> & {
+    value: T;
     /** A flag that this is a persistent property. Typically a circular reference. */
     [PersistentState]: Ref<T>;
     /** The value the ref should be set to in a fresh save, or when updating an old save to the current version. */
@@ -57,32 +81,98 @@ export type Persistent<T extends State = State> = Ref<T> & {
      * @see {@link deletePersistent} for marking a persistent ref as deleted.
      */
     [Deleted]: boolean;
+    /**
+     * A non-persistent ref that just reads and writes ot the persistent ref. Used for passing to other features without duplicating the persistent ref in the constructed save data object.
+     */
+    [NonPersistent]: NonPersistent<T>;
+    /**
+     * The path this persistent appears in within the save data object. Predominantly used to ensure it's only placed in there one time.
+     */
+    [SaveDataPath]: string[] | undefined;
+    /**
+     * Whether or not to NaN-check this ref. Should only be true on values expected to always be DecimalSources.
+     */
+    [CheckNaN]: boolean;
 };
 
+export type NonPersistent<T extends State = State> = WritableComputedRef<T> & { [DefaultValue]: T };
+
 function getStackTrace() {
     return (
         new Error().stack
             ?.split("\n")
             .slice(3, 5)
             .map(line => line.trim())
-            .join("\n") || ""
+            .join("\n") ?? ""
     );
 }
 
+function checkNaNAndWrite<T extends State>(persistent: Persistent<T>, value: T) {
+    // Decimal is smart enough to return false on things that aren't supposed to be numbers
+    if (Decimal.isNaN(value as DecimalSource)) {
+        if (!state.hasNaN) {
+            player.autosave = false;
+            state.hasNaN = true;
+            state.NaNPath = persistent[SaveDataPath];
+            state.NaNPersistent = persistent as Persistent<DecimalSource>;
+        }
+        console.error(`Attempted to save NaN value to ${persistent[SaveDataPath]?.join(".")}`);
+    }
+    persistent[PersistentState].value = value;
+}
+
 /**
  * Create a persistent ref, which can be saved and loaded.
  * All (non-deleted) persistent refs must be included somewhere within the layer object returned by that layer's options func.
  * @param defaultValue The value the persistent ref should start at on fresh saves or when reset.
+ * @param checkNaN Whether or not to check this ref for being NaN on set. Only use on refs that should always be DecimalSources.
  */
-export function persistent<T extends State>(defaultValue: T | Ref<T>): Persistent<T> {
-    const persistent = (
-        isRef(defaultValue) ? defaultValue : (ref<T>(defaultValue) as unknown)
-    ) as Persistent<T>;
+export function persistent<T extends State>(
+    defaultValue: T | Ref<T>,
+    checkNaN = true
+): Persistent<T> {
+    const persistentState: Ref<T> = isRef(defaultValue)
+        ? defaultValue
+        : (ref<T>(defaultValue) as Ref<T>);
 
-    persistent[PersistentState] = persistent;
-    persistent[DefaultValue] = isRef(defaultValue) ? defaultValue.value : defaultValue;
-    persistent[StackTrace] = getStackTrace();
-    persistent[Deleted] = false;
+    if (isRef(defaultValue)) {
+        defaultValue = defaultValue.value;
+    }
+
+    const nonPersistent = computed({
+        get() {
+            return persistentState.value;
+        },
+        set(value) {
+            if (checkNaN) {
+                checkNaNAndWrite(persistent, value);
+            } else {
+                persistent[PersistentState].value = value;
+            }
+        }
+    }) as NonPersistent<T>;
+    nonPersistent[DefaultValue] = defaultValue;
+
+    // We're trying to mock a vue ref, which means the type expects a private [RefSymbol] property that we can't access, but the actual implementation of isRef just checks for `__v_isRef`
+    const persistent = {
+        get value() {
+            return persistentState.value as T;
+        },
+        set value(value: T) {
+            if (checkNaN) {
+                checkNaNAndWrite(persistent, value);
+            } else {
+                persistent[PersistentState].value = value;
+            }
+        },
+        __v_isRef: true,
+        [PersistentState]: persistentState,
+        [DefaultValue]: defaultValue,
+        [StackTrace]: getStackTrace(),
+        [Deleted]: false,
+        [NonPersistent]: nonPersistent,
+        [SaveDataPath]: undefined
+    } as unknown as Persistent<T>;
 
     if (addingLayers.length === 0) {
         console.warn(
@@ -94,7 +184,55 @@ export function persistent<T extends State>(defaultValue: T | Ref<T>): Persisten
         persistentRefs[addingLayers[addingLayers.length - 1]].add(persistent);
     }
 
-    return persistent as Persistent<T>;
+    return persistent;
+}
+
+/**
+ * Type guard for whether an arbitrary value is a persistent ref
+ * @param value The value that may or may not be a persistent ref
+ */
+export function isPersistent(value: unknown): value is Persistent {
+    return value != null && typeof value === "object" && PersistentState in value;
+}
+
+/**
+ * Unwraps the non-persistent ref inside of persistent refs, to be passed to other features without duplicating values in the save data object.
+ * @param persistent The persistent ref to unwrap, or an object to ignore all persistent refs within
+ */
+export function noPersist<T extends Persistent<S>, S extends State>(
+    persistent: T
+): T[typeof NonPersistent];
+export function noPersist<T extends object>(persistent: T): T;
+export function noPersist<T extends Persistent<S>, S extends State>(persistent: T | object) {
+    // Check for proxy state so if it's a lazy proxy we don't evaluate it's function
+    // Lazy proxies are not persistent refs themselves, so we know we want to wrap them
+    return !(ProxyState in persistent) && NonPersistent in persistent
+        ? persistent[NonPersistent]
+        : new Proxy(persistent, {
+              get(target, p) {
+                  if (p === PersistentState) {
+                      return undefined;
+                  }
+                  if (p === SkipPersistence) {
+                      return true;
+                  }
+                  return target[p as keyof typeof target];
+              },
+              set(target, key, value) {
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (target as Record<PropertyKey, any>)[key] = value;
+                  return true;
+              },
+              has(target, key) {
+                  if (key === PersistentState) {
+                      return false;
+                  }
+                  if (key == SkipPersistence) {
+                      return true;
+                  }
+                  return Reflect.has(target, key);
+              }
+          });
 }
 
 /**
@@ -117,24 +255,43 @@ globalBus.on("addLayer", (layer: GenericLayer, saveData: Record<string, unknown>
     const handleObject = (obj: Record<string, unknown>, path: string[] = []): boolean => {
         let foundPersistent = false;
         Object.keys(obj).forEach(key => {
-            const value = obj[key];
-            if (value && typeof value === "object") {
-                if (PersistentState in value) {
+            let value = obj[key];
+            if (value != null && typeof value === "object") {
+                if ((value as Record<PropertyKey, unknown>)[SkipPersistence] === true) {
+                    return;
+                }
+                if (ProxyState in value) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    value = (value as any)[ProxyState] as object;
+                }
+                if (isPersistent(value)) {
                     foundPersistent = true;
-                    if ((value as Persistent)[Deleted]) {
+                    if (value[Deleted]) {
                         console.warn(
                             "Deleted persistent ref present in returned object. Ignoring...",
                             value,
-                            "\nCreated at:\n" + (value as Persistent)[StackTrace]
+                            "\nCreated at:\n" + value[StackTrace]
                         );
                         return;
                     }
-                    persistentRefs[layer.id].delete(
-                        ProxyState in value
-                            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                              ((value as any)[ProxyState] as Persistent)
-                            : (value as Persistent)
-                    );
+                    persistentRefs[layer.id].delete(value);
+
+                    // Handle SaveDataPath
+                    const newPath = [layer.id, ...path, key];
+                    if (
+                        value[SaveDataPath] != undefined &&
+                        JSON.stringify(newPath) !== JSON.stringify(value[SaveDataPath])
+                    ) {
+                        console.error(
+                            `Persistent ref is being saved to \`${newPath.join(
+                                "."
+                            )}\` when it's already present at \`${value[SaveDataPath].join(
+                                "."
+                            )}\`.`,
+                            "This can cause unexpected behavior when loading saves between updates."
+                        );
+                    }
+                    value[SaveDataPath] = newPath;
 
                     // Construct save path if it doesn't exist
                     const persistentState = path.reduce<Record<string, unknown>>((acc, curr) => {
@@ -147,25 +304,24 @@ globalBus.on("addLayer", (layer: GenericLayer, saveData: Record<string, unknown>
                     // Cache currently saved value
                     const savedValue = persistentState[key];
                     // Add ref to save data
-                    persistentState[key] = (value as Persistent)[PersistentState];
+                    persistentState[key] = value[PersistentState];
                     // Load previously saved value
                     if (isReactive(persistentState)) {
                         if (savedValue != null) {
                             persistentState[key] = savedValue;
                         } else {
-                            persistentState[key] = (value as Persistent)[DefaultValue];
+                            persistentState[key] = value[DefaultValue];
                         }
                     } else {
                         if (savedValue != null) {
                             (persistentState[key] as Ref<unknown>).value = savedValue;
                         } else {
-                            (persistentState[key] as Ref<unknown>).value = (value as Persistent)[
-                                DefaultValue
-                            ];
+                            (persistentState[key] as Ref<unknown>).value = value[DefaultValue];
                         }
                     }
                 } else if (
                     !(value instanceof Decimal) &&
+                    !(value instanceof Formula) &&
                     !isRef(value) &&
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     !features.includes(value as { type: typeof Symbol })
@@ -200,12 +356,16 @@ globalBus.on("addLayer", (layer: GenericLayer, saveData: Record<string, unknown>
         });
         return foundPersistent;
     };
-    handleObject(layer);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    handleObject((layer as any)[ProxyState]);
     persistentRefs[layer.id].forEach(persistent => {
+        if (persistent[Deleted]) {
+            return;
+        }
         console.error(
-            `Created persistent ref in ${layer.id} without registering it to the layer! Make sure to include everything persistent in the returned object`,
-            persistent,
-            "\nCreated at:\n" + persistent[StackTrace]
+            `Created persistent ref in ${layer.id} without registering it to the layer!`,
+            "Make sure to include everything persistent in the returned object.\n\nCreated at:\n" +
+                persistent[StackTrace]
         );
     });
     persistentRefs[layer.id].clear();
diff --git a/src/game/player.ts b/src/game/player.ts
index 6271629..5d1142e 100644
--- a/src/game/player.ts
+++ b/src/game/player.ts
@@ -1,13 +1,8 @@
-import { isPlainObject } from "is-plain-object";
-import Decimal from "util/bignum";
-import type { ProxiedWithState } from "util/proxies";
-import { ProxyPath, ProxyState } from "util/proxies";
-import { reactive, unref } from "vue";
 import type { Ref } from "vue";
-import transientState from "./state";
+import { reactive, unref } from "vue";
 
 /** The player save data object. */
-export interface PlayerData {
+export interface Player {
     /** The ID of this save. */
     id: string;
     /** A multiplier for time passing. Set to 0 when the game is paused. */
@@ -36,9 +31,6 @@ export interface PlayerData {
     layers: Record<string, LayerData<unknown>>;
 }
 
-/** The proxied player that is used to track NaN values. */
-export type Player = ProxiedWithState<PlayerData>;
-
 /** A layer's save data. Automatically unwraps refs. */
 export type LayerData<T> = {
     [P in keyof T]?: T[P] extends (infer U)[]
@@ -52,7 +44,7 @@ export type LayerData<T> = {
         : T[P];
 };
 
-const state = reactive<PlayerData>({
+const player = reactive<Player>({
     id: "",
     devSpeed: null,
     name: "",
@@ -68,90 +60,16 @@ const state = reactive<PlayerData>({
     layers: {}
 });
 
+export default window.player = player;
+
 /** Convert a player save data object into a JSON string. Unwraps refs. */
-export function stringifySave(player: PlayerData): string {
+export function stringifySave(player: Player): string {
     return JSON.stringify(player, (key, value) => unref(value));
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const playerHandler: ProxyHandler<Record<PropertyKey, any>> = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    get(target: Record<PropertyKey, any>, key: PropertyKey): any {
-        if (key === ProxyState || key === ProxyPath) {
-            return target[key];
-        }
-
-        const value = target[ProxyState][key];
-        if (key !== "value" && (isPlainObject(value) || Array.isArray(value))) {
-            if (value !== target[key]?.[ProxyState]) {
-                const path = [...target[ProxyPath], key];
-                target[key] = new Proxy({ [ProxyState]: value, [ProxyPath]: path }, playerHandler);
-            }
-            return target[key];
-        }
-
-        return value;
-    },
-    set(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        target: Record<PropertyKey, any>,
-        property: PropertyKey,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        value: any,
-        receiver: ProxyConstructor
-    ): boolean {
-        if (
-            !transientState.hasNaN &&
-            ((typeof value === "number" && isNaN(value)) ||
-                (value instanceof Decimal &&
-                    (isNaN(value.sign) || isNaN(value.layer) || isNaN(value.mag))))
-        ) {
-            const currentValue = target[ProxyState][property];
-            if (
-                !(
-                    (typeof currentValue === "number" && isNaN(currentValue)) ||
-                    (currentValue instanceof Decimal &&
-                        (isNaN(currentValue.sign) ||
-                            isNaN(currentValue.layer) ||
-                            isNaN(currentValue.mag)))
-                )
-            ) {
-                state.autosave = false;
-                transientState.hasNaN = true;
-                transientState.NaNPath = [...target[ProxyPath], property];
-                transientState.NaNReceiver = receiver as unknown as Record<string, unknown>;
-                console.error(
-                    `Attempted to set NaN value`,
-                    [...target[ProxyPath], property],
-                    target[ProxyState]
-                );
-                throw "Attempted to set NaN value. See above for details";
-            }
-        }
-        target[ProxyState][property] = value;
-        return true;
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ownKeys(target: Record<PropertyKey, any>) {
-        return Reflect.ownKeys(target[ProxyState]);
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    has(target: Record<PropertyKey, any>, key: string) {
-        return Reflect.has(target[ProxyState], key);
-    },
-    getOwnPropertyDescriptor(target, key) {
-        return Object.getOwnPropertyDescriptor(target[ProxyState], key);
-    }
-};
-
 declare global {
     /** Augment the window object so the player can be accessed from the console. */
     interface Window {
         player: Player;
     }
 }
-/** The player save data object. */
-export default window.player = new Proxy(
-    { [ProxyState]: state, [ProxyPath]: ["player"] },
-    playerHandler
-) as Player;
diff --git a/src/game/requirements.tsx b/src/game/requirements.tsx
new file mode 100644
index 0000000..ea82a64
--- /dev/null
+++ b/src/game/requirements.tsx
@@ -0,0 +1,370 @@
+import { isArray } from "@vue/shared";
+import {
+    CoercableComponent,
+    isVisible,
+    jsx,
+    OptionsFunc,
+    Replace,
+    setDefault,
+    Visibility
+} from "features/feature";
+import { displayResource, Resource } from "features/resources/resource";
+import Decimal, { DecimalSource } from "lib/break_eternity";
+import {
+    Computable,
+    convertComputable,
+    processComputable,
+    ProcessedComputable
+} from "util/computed";
+import { createLazyProxy } from "util/proxies";
+import { joinJSX, renderJSX } from "util/vue";
+import { computed, unref } from "vue";
+import Formula, { calculateCost, calculateMaxAffordable } from "./formulas/formulas";
+import type { GenericFormula } from "./formulas/types";
+import { DefaultValue, Persistent } from "./persistence";
+
+/**
+ * An object that can be used to describe a requirement to perform some purchase or other action.
+ * @see {@link createCostRequirement}
+ */
+export interface Requirement {
+    /**
+     * The display for this specific requirement. This is used for displays multiple requirements condensed. Required if {@link visibility} can be {@link Visibility.Visible}.
+     */
+    partialDisplay?: (amount?: DecimalSource) => JSX.Element;
+    /**
+     * The display for this specific requirement. Required if {@link visibility} can be {@link Visibility.Visible}.
+     */
+    display?: (amount?: DecimalSource) => JSX.Element;
+    /**
+     * Whether or not this requirement should be displayed in Vue Features. {@link displayRequirements} will respect this property.
+     */
+    visibility: ProcessedComputable<Visibility.Visible | Visibility.None | boolean>;
+    /**
+     * Whether or not this requirement has been met.
+     */
+    requirementMet: ProcessedComputable<DecimalSource | boolean>;
+    /**
+     * Whether or not this requirement will need to affect the game state when whatever is using this requirement gets triggered.
+     */
+    requiresPay: ProcessedComputable<boolean>;
+    /**
+     * Whether or not this requirement can have multiple levels of requirements that can be met at once. Requirement is assumed to not have multiple levels if this property not present.
+     */
+    canMaximize?: ProcessedComputable<boolean>;
+    /**
+     * Perform any effects to the game state that should happen when the requirement gets triggered.
+     * @param amount The amount of levels of requirements to pay for.
+     */
+    pay?: (amount?: DecimalSource) => void;
+}
+
+/**
+ * Utility type for accepting 1 or more {@link Requirement}s.
+ */
+export type Requirements = Requirement | Requirement[];
+
+/** An object that configures a {@link Requirement} based on a resource cost. */
+export interface CostRequirementOptions {
+    /**
+     * The resource that will be checked for meeting the {@link cost}.
+     */
+    resource: Resource;
+    /**
+     * The amount of {@link resource} that must be met for this requirement. You can pass a formula, in which case maximizing will work out of the box (assuming its invertible and, for more accurate calculations, its integral is invertible). If you don't pass a formula then you can still support maximizing by passing a custom {@link pay} function.
+     */
+    cost: Computable<DecimalSource> | GenericFormula;
+    /**
+     * Pass-through to {@link Requirement.visibility}.
+     */
+    visibility?: Computable<Visibility.Visible | Visibility.None | boolean>;
+    /**
+     * Pass-through to {@link Requirement.requiresPay}. If not set to false, the default {@link pay} function will remove {@link cost} from {@link resource}.
+     */
+    requiresPay?: Computable<boolean>;
+    /**
+     * When calculating multiple levels to be handled at once, whether it should consider resources used for each level as spent. Setting this to false causes calculations to be faster with larger numbers and supports more math functions.
+     * @see {Formula}
+     */
+    cumulativeCost?: Computable<boolean>;
+    /**
+     * Upper limit on levels that can be performed at once. Defaults to 1.
+     */
+    maxBulkAmount?: Computable<DecimalSource>;
+    /**
+     * When calculating requirement for multiple levels, how many should be directly summed for increase accuracy. High numbers can cause lag. Defaults to 10 if cumulative cost, 0 otherwise.
+     */
+    directSum?: Computable<number>;
+    /**
+     * Pass-through to {@link Requirement.pay}. May be required for maximizing support.
+     * @see {@link cost} for restrictions on maximizing support.
+     */
+    pay?: (amount?: DecimalSource) => void;
+}
+
+export type CostRequirement = Replace<
+    Requirement & CostRequirementOptions,
+    {
+        cost: ProcessedComputable<DecimalSource> | GenericFormula;
+        visibility: ProcessedComputable<Visibility.Visible | Visibility.None | boolean>;
+        requiresPay: ProcessedComputable<boolean>;
+        cumulativeCost: ProcessedComputable<boolean>;
+        canMaximize: ProcessedComputable<boolean>;
+    }
+>;
+
+/**
+ * Lazily creates a requirement with the given options, that is based on meeting an amount of a resource.
+ * @param optionsFunc Cost requirement options.
+ */
+export function createCostRequirement<T extends CostRequirementOptions>(
+    optionsFunc: OptionsFunc<T>
+): CostRequirement {
+    return createLazyProxy(feature => {
+        const req = optionsFunc.call(feature, feature) as T & Partial<Requirement>;
+
+        req.partialDisplay = amount => (
+            <span
+                style={
+                    unref(req.requirementMet as ProcessedComputable<boolean>)
+                        ? ""
+                        : "color: var(--danger)"
+                }
+            >
+                {displayResource(
+                    req.resource,
+                    req.cost instanceof Formula
+                        ? calculateCost(
+                              req.cost,
+                              amount ?? 1,
+                              unref(req.cumulativeCost) as boolean,
+                              unref(req.directSum) as number
+                          )
+                        : unref(req.cost as ProcessedComputable<DecimalSource>)
+                )}{" "}
+                {req.resource.displayName}
+            </span>
+        );
+        req.display = amount => (
+            <div>
+                {unref(req.requiresPay as ProcessedComputable<boolean>) ? "Costs: " : "Requires: "}
+                {displayResource(
+                    req.resource,
+                    req.cost instanceof Formula
+                        ? calculateCost(
+                              req.cost,
+                              amount ?? 1,
+                              unref(req.cumulativeCost) as boolean,
+                              unref(req.directSum) as number
+                          )
+                        : unref(req.cost as ProcessedComputable<DecimalSource>)
+                )}{" "}
+                {req.resource.displayName}
+            </div>
+        );
+
+        processComputable(req as T, "visibility");
+        setDefault(req, "visibility", Visibility.Visible);
+        processComputable(req as T, "cost");
+        processComputable(req as T, "requiresPay");
+        setDefault(req, "requiresPay", true);
+        processComputable(req as T, "cumulativeCost");
+        setDefault(req, "cumulativeCost", true);
+        processComputable(req as T, "maxBulkAmount");
+        setDefault(req, "maxBulkAmount", 1);
+        processComputable(req as T, "directSum");
+        setDefault(req, "pay", function (amount?: DecimalSource) {
+            const cost =
+                req.cost instanceof Formula
+                    ? calculateCost(
+                          req.cost,
+                          amount ?? 1,
+                          unref(req.cumulativeCost) as boolean,
+                          unref(req.directSum) as number
+                      )
+                    : unref(req.cost as ProcessedComputable<DecimalSource>);
+            req.resource.value = Decimal.sub(req.resource.value, cost).max(0);
+        });
+
+        req.canMaximize = computed(() => {
+            if (!(req.cost instanceof Formula)) {
+                return false;
+            }
+            const maxBulkAmount = unref(req.maxBulkAmount as ProcessedComputable<DecimalSource>);
+            if (Decimal.lte(maxBulkAmount, 1)) {
+                return false;
+            }
+            const cumulativeCost = unref(req.cumulativeCost as ProcessedComputable<boolean>);
+            const directSum =
+                unref(req.directSum as ProcessedComputable<number>) ?? (cumulativeCost ? 10 : 0);
+            if (Decimal.lte(maxBulkAmount, directSum)) {
+                return true;
+            }
+            if (!req.cost.isInvertible()) {
+                return false;
+            }
+            if (cumulativeCost === true && !req.cost.isIntegrable()) {
+                return false;
+            }
+            return true;
+        });
+
+        if (req.cost instanceof Formula) {
+            req.requirementMet = calculateMaxAffordable(
+                req.cost,
+                req.resource,
+                req.cumulativeCost ?? true,
+                req.directSum,
+                req.maxBulkAmount
+            );
+        } else {
+            req.requirementMet = computed(() =>
+                Decimal.gte(
+                    req.resource.value,
+                    unref(req.cost as ProcessedComputable<DecimalSource>)
+                ) ? 1 : 0
+            );
+        }
+
+        return req as CostRequirement;
+    });
+}
+
+/**
+ * Utility function for creating a requirement that a specified vue feature is visible
+ * @param feature The feature to check the visibility of
+ */
+export function createVisibilityRequirement(feature: {
+    visibility: ProcessedComputable<Visibility | boolean>;
+}): Requirement {
+    return createLazyProxy(() => ({
+        requirementMet: computed(() => isVisible(feature.visibility)),
+        visibility: Visibility.None,
+        requiresPay: false
+    }));
+}
+
+/**
+ * Creates a requirement based on a true/false value
+ * @param requirement The boolean requirement to use
+ * @param display How to display this requirement to the user
+ */
+export function createBooleanRequirement(
+    requirement: Computable<boolean>,
+    display?: CoercableComponent
+): Requirement {
+    return createLazyProxy(() => ({
+        requirementMet: convertComputable(requirement),
+        partialDisplay: display == null ? undefined : jsx(() => renderJSX(display)),
+        display: display == null ? undefined : jsx(() => <>Req: {renderJSX(display)}</>),
+        visibility: display == null ? Visibility.None : Visibility.Visible,
+        requiresPay: false
+    }));
+}
+
+/**
+ * Utility for checking if 1+ requirements are all met
+ * @param requirements The 1+ requirements to check
+ */
+export function requirementsMet(requirements: Requirements): boolean {
+    if (isArray(requirements)) {
+        return requirements.every(requirementsMet);
+    }
+    const reqsMet = unref(requirements.requirementMet);
+    return typeof reqsMet === "boolean" ? reqsMet : Decimal.gt(reqsMet, 0);
+}
+
+/**
+ * Calculates the maximum number of levels that could be acquired with the current requirement states. True/false requirements will be counted as Infinity or 0.
+ * @param requirements The 1+ requirements to check
+ */
+export function maxRequirementsMet(requirements: Requirements): DecimalSource {
+    if (isArray(requirements)) {
+        return requirements.map(maxRequirementsMet).reduce(Decimal.min);
+    }
+    const reqsMet = unref(requirements.requirementMet);
+    if (typeof reqsMet === "boolean") {
+        return reqsMet ? Decimal.dInf : 0;
+    } else if (Decimal.gt(reqsMet, 1) && unref(requirements.canMaximize) !== true) {
+        return 1;
+    }
+    return reqsMet;
+}
+
+/**
+ * Utility function for display 1+ requirements compactly.
+ * @param requirements The 1+ requirements to display
+ * @param amount The amount of levels earned to be displayed
+ */
+export function displayRequirements(requirements: Requirements, amount: DecimalSource = 1) {
+    if (isArray(requirements)) {
+        requirements = requirements.filter(r => isVisible(r.visibility));
+        if (requirements.length === 1) {
+            requirements = requirements[0];
+        }
+    }
+    if (isArray(requirements)) {
+        requirements = requirements.filter(r => "partialDisplay" in r);
+        const withCosts = requirements.filter(r => unref(r.requiresPay));
+        const withoutCosts = requirements.filter(r => !unref(r.requiresPay));
+        return (
+            <>
+                {withCosts.length > 0 ? (
+                    <div>
+                        Costs:{" "}
+                        {joinJSX(
+                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                            withCosts.map(r => r.partialDisplay!(amount)),
+                            <>, </>
+                        )}
+                    </div>
+                ) : null}
+                {withoutCosts.length > 0 ? (
+                    <div>
+                        Requires:{" "}
+                        {joinJSX(
+                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                            withoutCosts.map(r => r.partialDisplay!(amount)),
+                            <>, </>
+                        )}
+                    </div>
+                ) : null}
+            </>
+        );
+    }
+    return requirements.display?.() ?? <></>;
+}
+
+/**
+ * Utility function for paying the costs for 1+ requirements
+ * @param requirements The 1+ requirements to pay
+ * @param amount How many levels to pay for
+ */
+export function payRequirements(requirements: Requirements, amount: DecimalSource = 1) {
+    if (isArray(requirements)) {
+        requirements.filter(r => unref(r.requiresPay)).forEach(r => r.pay?.(amount));
+    } else if (unref(requirements.requiresPay)) {
+        requirements.pay?.(amount);
+    }
+}
+
+export function payByDivision(this: CostRequirement, amount?: DecimalSource) {
+    const cost =
+        this.cost instanceof Formula
+            ? calculateCost(
+                  this.cost,
+                  amount ?? 1,
+                  unref(this.cumulativeCost as ProcessedComputable<boolean> | undefined) ?? true
+              )
+            : unref(this.cost as ProcessedComputable<DecimalSource>);
+    this.resource.value = Decimal.div(this.resource.value, cost);
+}
+
+export function payByReset(overrideDefaultValue?: DecimalSource) {
+    return function (this: CostRequirement) {
+        this.resource.value =
+            overrideDefaultValue ??
+            (this.resource as Resource & Persistent<DecimalSource>)[DefaultValue] ??
+            0;
+    };
+}
diff --git a/src/game/settings.ts b/src/game/settings.ts
index cad4438..0748d68 100644
--- a/src/game/settings.ts
+++ b/src/game/settings.ts
@@ -18,6 +18,8 @@ export interface Settings {
     theme: Themes;
     /** Whether or not to cap the project at 20 ticks per second. */
     unthrottled: boolean;
+    /** Whether to align modifiers to the unit. */
+    alignUnits: boolean;
 }
 
 const state = reactive<Partial<Settings>>({
@@ -25,7 +27,8 @@ const state = reactive<Partial<Settings>>({
     saves: [],
     showTPS: true,
     theme: Themes.Nordic,
-    unthrottled: false
+    unthrottled: false,
+    alignUnits: false
 });
 
 watch(
@@ -57,7 +60,8 @@ export const hardResetSettings = (window.hardResetSettings = () => {
         active: "",
         saves: [],
         showTPS: true,
-        theme: Themes.Nordic
+        theme: Themes.Nordic,
+        alignUnits: false
     };
     globalBus.emit("loadSettings", settings);
     Object.assign(state, settings);
diff --git a/src/game/state.ts b/src/game/state.ts
index bda0b6a..9e672c3 100644
--- a/src/game/state.ts
+++ b/src/game/state.ts
@@ -1,4 +1,6 @@
-import { shallowReactive } from "vue";
+import type { DecimalSource } from "util/bignum";
+import { reactive, shallowReactive } from "vue";
+import type { Persistent } from "./persistence";
 
 /** An object of global data that is not persistent. */
 export interface Transient {
@@ -8,8 +10,10 @@ export interface Transient {
     hasNaN: boolean;
     /** The location within the player save data object of the NaN value. */
     NaNPath?: string[];
-    /** The parent object of the NaN value. */
-    NaNReceiver?: Record<string, unknown>;
+    /** The ref that was being set to NaN. */
+    NaNPersistent?: Persistent<DecimalSource>;
+    /** List of errors that have occurred, to show the user. */
+    errors: Error[];
 }
 
 declare global {
@@ -22,5 +26,6 @@ declare global {
 export default window.state = shallowReactive<Transient>({
     lastTenTicks: [],
     hasNaN: false,
-    NaNPath: []
+    NaNPath: [],
+    errors: reactive([])
 });
diff --git a/src/lib/break_eternity.ts b/src/lib/break_eternity.ts
index e3f61db..ec0203b 100644
--- a/src/lib/break_eternity.ts
+++ b/src/lib/break_eternity.ts
@@ -1,4 +1,7 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
+/* eslint-disable @typescript-eslint/no-loss-of-precision */
+import { LRUCache } from "../lib/lru-cache";
+
 export type CompareResult = -1 | 0 | 1;
 
 const MAX_SIGNIFICANT_DIGITS = 17; //Maximum number of digits of precision to assume in Number
@@ -15,10 +18,12 @@ const NUMBER_EXP_MIN = -324; //The smallest exponent that can appear in a Number
 
 const MAX_ES_IN_A_ROW = 5; //For default toString behaviour, when to swap from eee... to (e^n) syntax.
 
+const DEFAULT_FROM_STRING_CACHE_SIZE = (1 << 10) - 1; // The default size of the LRU cache used to cache Decimal.fromString.
+
 const IGNORE_COMMAS = true;
 const COMMAS_ARE_DECIMAL_POINTS = false;
 
-const powerOf10 = (function() {
+const powerOf10 = (function () {
     // We need this lookup table because Math.pow(10, exponent)
     // when exponent's absolute value is large is slightly inaccurate.
     // You can fix it with the power of math... or just make a lookup table.
@@ -30,7 +35,7 @@ const powerOf10 = (function() {
     }
 
     const indexOf0InPowersOf10 = 323;
-    return function(power: number) {
+    return function (power: number) {
         return powersOf10[power + indexOf0InPowersOf10];
     };
 })();
@@ -40,160 +45,80 @@ const powerOf10 = (function() {
 const critical_headers = [2, Math.E, 3, 4, 5, 6, 7, 8, 9, 10];
 const critical_tetr_values = [
     [
-        // Base 2
-        1,
-        1.0891168053867777,
-        1.1789745164521264,
-        1.2701428397304229,
-        1.3632066654400328,
-        1.4587804913784246,
-        1.557523817412741,
-        1.660158301473385,
-        1.767487542936873,
-        1.8804205225512542,
-        2
+        // Base 2 (using http://myweb.astate.edu/wpaulsen/tetcalc/tetcalc.html )
+        1, 1.0891180521811202527, 1.1789767925673958433, 1.2701455431742086633,
+        1.3632090180450091941, 1.4587818160364217007, 1.5575237916251418333, 1.6601571006859253673,
+        1.7674858188369780435, 1.8804192098842727359, 2
     ],
     [
-        // Base E
+        // Base E (using http://myweb.astate.edu/wpaulsen/tetcalc/tetcalc.html )
         1, //0.0
-        1.1121114330934, //0.1
-        1.23103892493161, //0.2
-        1.35838369631113, //0.3
-        1.49605193039935, //0.4
-        1.64635423375119, //0.5
-        1.81213853570186, //0.6
-        1.99697132461829, //0.7
-        2.20538955455724, //0.8
-        2.44325744833852, //0.9
+        1.1121114330934078681, //0.1
+        1.2310389249316089299, //0.2
+        1.3583836963111376089, //0.3
+        1.4960519303993531879, //0.4
+        1.646354233751194581, //0.5
+        1.8121385357018724464, //0.6
+        1.9969713246183068478, //0.7
+        2.205389554552754433, //0.8
+        2.4432574483385252544, //0.9
         Math.E //1.0
     ],
     [
         // Base 3
-        1,
-        1.1187738849693603,
-        1.2464963939368214,
-        1.38527004705667,
-        1.5376664685821402,
-        1.7068895236551784,
-        1.897001227148399,
-        2.1132403089001035,
-        2.362480153784171,
-        2.6539010333870774,
-        3
+        1, 1.1187738849693603, 1.2464963939368214, 1.38527004705667, 1.5376664685821402,
+        1.7068895236551784, 1.897001227148399, 2.1132403089001035, 2.362480153784171,
+        2.6539010333870774, 3
     ],
     [
         // Base 4
-        1,
-        1.1367350847096405,
-        1.2889510672956703,
-        1.4606478703324786,
-        1.6570295196661111,
-        1.8850062585672889,
-        2.1539465047453485,
-        2.476829779693097,
-        2.872061932789197,
-        3.3664204535587183,
-        4
+        1, 1.1367350847096405, 1.2889510672956703, 1.4606478703324786, 1.6570295196661111,
+        1.8850062585672889, 2.1539465047453485, 2.476829779693097, 2.872061932789197,
+        3.3664204535587183, 4
     ],
     [
         // Base 5
-        1,
-        1.1494592900767588,
-        1.319708228183931,
-        1.5166291280087583,
-        1.748171114438024,
-        2.0253263297298045,
-        2.3636668498288547,
-        2.7858359149579424,
-        3.3257226212448145,
-        4.035730287722532,
-        5
+        1, 1.1494592900767588, 1.319708228183931, 1.5166291280087583, 1.748171114438024,
+        2.0253263297298045, 2.3636668498288547, 2.7858359149579424, 3.3257226212448145,
+        4.035730287722532, 5
     ],
     [
         // Base 6
-        1,
-        1.159225940787673,
-        1.343712473580932,
-        1.5611293155111927,
-        1.8221199554561318,
-        2.14183924486326,
-        2.542468319282638,
-        3.0574682501653316,
-        3.7390572020926873,
-        4.6719550537360774,
-        6
+        1, 1.159225940787673, 1.343712473580932, 1.5611293155111927, 1.8221199554561318,
+        2.14183924486326, 2.542468319282638, 3.0574682501653316, 3.7390572020926873,
+        4.6719550537360774, 6
     ],
     [
         // Base 7
-        1,
-        1.1670905356972596,
-        1.3632807444991446,
-        1.5979222279405536,
-        1.8842640123816674,
-        2.2416069644878687,
-        2.69893426559423,
-        3.3012632110403577,
-        4.121250340630164,
-        5.281493033448316,
-        7
+        1, 1.1670905356972596, 1.3632807444991446, 1.5979222279405536, 1.8842640123816674,
+        2.2416069644878687, 2.69893426559423, 3.3012632110403577, 4.121250340630164,
+        5.281493033448316, 7
     ],
     [
         // Base 8
-        1,
-        1.1736630594087796,
-        1.379783782386201,
-        1.6292821855668218,
-        1.9378971836180754,
-        2.3289975651071977,
-        2.8384347394720835,
-        3.5232708454565906,
-        4.478242031114584,
-        5.868592169644505,
-        8
+        1, 1.1736630594087796, 1.379783782386201, 1.6292821855668218, 1.9378971836180754,
+        2.3289975651071977, 2.8384347394720835, 3.5232708454565906, 4.478242031114584,
+        5.868592169644505, 8
     ],
     [
         // Base 9
-        1,
-        1.1793017514670474,
-        1.394054150657457,
-        1.65664127441059,
-        1.985170999970283,
-        2.4069682290577457,
-        2.9647310119960752,
-        3.7278665320924946,
-        4.814462547283592,
-        6.436522247411611,
-        9
+        1, 1.1793017514670474, 1.394054150657457, 1.65664127441059, 1.985170999970283,
+        2.4069682290577457, 2.9647310119960752, 3.7278665320924946, 4.814462547283592,
+        6.436522247411611, 9
     ],
     [
-        // Base 10
-        1,
-        1.18422737399915,
-        1.4066113788546144,
-        1.680911177655277,
-        2.027492094355525,
-        2.4775152854601967,
-        3.080455730250329,
-        3.918234505962507,
-        5.1332705696484595,
-        6.9878696918072905,
-        10
+        // Base 10 (using http://myweb.astate.edu/wpaulsen/tetcalc/tetcalc.html )
+        1, 1.1840100246247336579, 1.4061375836156954169, 1.6802272208863963918,
+        2.026757028388618927, 2.477005606344964758, 3.0805252717554819987, 3.9191964192627283911,
+        5.135152840833186423, 6.9899611795347148455, 10
     ]
 ];
 const critical_slog_values = [
     [
         // Base 2
-        -1,
-        -0.9194161097107025,
-        -0.8335625019330468,
-        -0.7425599821143978,
-        -0.6466611521029437,
-        -0.5462617907227869,
-        -0.4419033816638769,
-        -0.3342645487554494,
-        -0.224140440909962,
-        -0.11241087890006762,
-        0
+        -1, -0.9194161097107025, -0.8335625019330468, -0.7425599821143978, -0.6466611521029437,
+        -0.5462617907227869, -0.4419033816638769, -0.3342645487554494, -0.224140440909962,
+        -0.11241087890006762, 0
     ],
     [
         // Base E
@@ -211,135 +136,73 @@ const critical_slog_values = [
     ],
     [
         // Base 3
-        -1,
-        -0.9021579584316141,
-        -0.8005762598234203,
-        -0.6964780623319391,
-        -0.5911906810998454,
-        -0.486050182576545,
-        -0.3823089430815083,
-        -0.28106046722897615,
-        -0.1831906535795894,
-        -0.08935809204418144,
-        0
+        -1, -0.9021579584316141, -0.8005762598234203, -0.6964780623319391, -0.5911906810998454,
+        -0.486050182576545, -0.3823089430815083, -0.28106046722897615, -0.1831906535795894,
+        -0.08935809204418144, 0
     ],
     [
         // Base 4
-        -1,
-        -0.8917227442365535,
-        -0.781258746326964,
-        -0.6705130326902455,
-        -0.5612813129406509,
-        -0.4551067709033134,
-        -0.35319256652135966,
-        -0.2563741554088552,
-        -0.1651412821106526,
-        -0.0796919581982668,
-        0
+        -1, -0.8917227442365535, -0.781258746326964, -0.6705130326902455, -0.5612813129406509,
+        -0.4551067709033134, -0.35319256652135966, -0.2563741554088552, -0.1651412821106526,
+        -0.0796919581982668, 0
     ],
     [
         // Base 5
-        -1,
-        -0.8843387974366064,
-        -0.7678744063886243,
-        -0.6529563724510552,
-        -0.5415870994657841,
-        -0.4352842206588936,
-        -0.33504449124791424,
-        -0.24138853420685147,
-        -0.15445285440944467,
-        -0.07409659641336663,
-        0
+        -1, -0.8843387974366064, -0.7678744063886243, -0.6529563724510552, -0.5415870994657841,
+        -0.4352842206588936, -0.33504449124791424, -0.24138853420685147, -0.15445285440944467,
+        -0.07409659641336663, 0
     ],
     [
         // Base 6
-        -1,
-        -0.8786709358426346,
-        -0.7577735191184886,
-        -0.6399546189952064,
-        -0.527284921869926,
-        -0.4211627631006314,
-        -0.3223479611761232,
-        -0.23107655627789858,
-        -0.1472057700818259,
-        -0.07035171210706326,
-        0
+        -1, -0.8786709358426346, -0.7577735191184886, -0.6399546189952064, -0.527284921869926,
+        -0.4211627631006314, -0.3223479611761232, -0.23107655627789858, -0.1472057700818259,
+        -0.07035171210706326, 0
     ],
     [
         // Base 7
-        -1,
-        -0.8740862815291583,
-        -0.7497032990976209,
-        -0.6297119746181752,
-        -0.5161838335958787,
-        -0.41036238255751956,
-        -0.31277212146489963,
-        -0.2233976621705518,
-        -0.1418697367979619,
-        -0.06762117662323441,
-        0
+        -1, -0.8740862815291583, -0.7497032990976209, -0.6297119746181752, -0.5161838335958787,
+        -0.41036238255751956, -0.31277212146489963, -0.2233976621705518, -0.1418697367979619,
+        -0.06762117662323441, 0
     ],
     [
         // Base 8
-        -1,
-        -0.8702632331800649,
-        -0.7430366914122081,
-        -0.6213373075161548,
-        -0.5072025698095242,
-        -0.40171437727184167,
-        -0.30517930701410456,
-        -0.21736343968190863,
-        -0.137710238299109,
-        -0.06550774483471955,
-        0
+        -1, -0.8702632331800649, -0.7430366914122081, -0.6213373075161548, -0.5072025698095242,
+        -0.40171437727184167, -0.30517930701410456, -0.21736343968190863, -0.137710238299109,
+        -0.06550774483471955, 0
     ],
     [
         // Base 9
-        -1,
-        -0.8670016295947213,
-        -0.7373984232432306,
-        -0.6143173985094293,
-        -0.49973884395492807,
-        -0.394584953527678,
-        -0.2989649949848695,
-        -0.21245647317021688,
-        -0.13434688362382652,
-        -0.0638072667348083,
-        0
+        -1, -0.8670016295947213, -0.7373984232432306, -0.6143173985094293, -0.49973884395492807,
+        -0.394584953527678, -0.2989649949848695, -0.21245647317021688, -0.13434688362382652,
+        -0.0638072667348083, 0
     ],
     [
         // Base 10
-        -1,
-        -0.8641642839543857,
-        -0.732534623168535,
-        -0.6083127477059322,
-        -0.4934049257184696,
-        -0.3885773075899922,
-        -0.29376029055315767,
-        -0.2083678561173622,
-        -0.13155653399373268,
-        -0.062401588652553186,
-        0
+        -1, -0.8641642839543857, -0.732534623168535, -0.6083127477059322, -0.4934049257184696,
+        -0.3885773075899922, -0.29376029055315767, -0.2083678561173622, -0.13155653399373268,
+        -0.062401588652553186, 0
     ]
 ];
 
-const D = function D(value: DecimalSource): Decimal {
+let D = function D(value: DecimalSource): Readonly<Decimal> {
     return Decimal.fromValue_noAlloc(value);
 };
 
-const FC = function(sign: number, layer: number, mag: number) {
+let FC = function (sign: number, layer: number, mag: number) {
     return Decimal.fromComponents(sign, layer, mag);
 };
 
-const FC_NN = function FC_NN(sign: number, layer: number, mag: number) {
+let FC_NN = function FC_NN(sign: number, layer: number, mag: number) {
     return Decimal.fromComponents_noNormalize(sign, layer, mag);
 };
 
-const ME = function ME(mantissa: number, exponent: number) {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+let ME = function ME(mantissa: number, exponent: number) {
     return Decimal.fromMantissaExponent(mantissa, exponent);
 };
 
-const ME_NN = function ME_NN(mantissa: number, exponent: number) {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+let ME_NN = function ME_NN(mantissa: number, exponent: number) {
     return Decimal.fromMantissaExponent_noNormalize(mantissa, exponent);
 };
 
@@ -351,12 +214,12 @@ const decimalPlaces = function decimalPlaces(value: number, places: number): num
     return parseFloat(rounded.toFixed(Math.max(len - numDigits, 0)));
 };
 
-const f_maglog10 = function(n: number) {
+const f_maglog10 = function (n: number) {
     return Math.sign(n) * Math.log10(Math.abs(n));
 };
 
 //from HyperCalc source code
-const f_gamma = function(n: number) {
+const f_gamma = function (n: number) {
     if (!isFinite(n)) {
         return n;
     }
@@ -403,7 +266,7 @@ const _EXPN1 = 0.36787944117144232159553; // exp(-1)
 const OMEGA = 0.56714329040978387299997; // W(1, 0)
 //from https://math.stackexchange.com/a/465183
 // The evaluation can become inaccurate very close to the branch point
-const f_lambertw = function(z: number, tol = 1e-10): number {
+const f_lambertw = function (z: number, tol = 1e-10): number {
     let w;
     let wn;
 
@@ -442,38 +305,28 @@ const f_lambertw = function(z: number, tol = 1e-10): number {
 // fail to converge, or can end up on the wrong branch.
 function d_lambertw(z: Decimal, tol = 1e-10): Decimal {
     let w;
-    let ew, wew, wewz, wn;
+    let ew, wewz, wn;
 
     if (!Number.isFinite(z.mag)) {
         return z;
     }
-    if (z === Decimal.dZero) {
+    if (z.eq(Decimal.dZero)) {
         return z;
     }
-    if (z === Decimal.dOne) {
+    if (z.eq(Decimal.dOne)) {
         //Split out this case because the asymptotic series blows up
-        return D(OMEGA);
+        return Decimal.fromNumber(OMEGA);
     }
 
-    const absz = Decimal.abs(z);
     //Get an initial guess for Halley's method
     w = Decimal.ln(z);
 
     //Halley's method; see 5.9 in [1]
 
     for (let i = 0; i < 100; ++i) {
-        ew = Decimal.exp(-w);
+        ew = w.neg().exp();
         wewz = w.sub(z.mul(ew));
-        wn = w.sub(
-            wewz.div(
-                w.add(1).sub(
-                    w
-                        .add(2)
-                        .mul(wewz)
-                        .div(Decimal.mul(2, w).add(2))
-                )
-            )
-        );
+        wn = w.sub(wewz.div(w.add(1).sub(w.add(2).mul(wewz).div(Decimal.mul(2, w).add(2)))));
         if (Decimal.abs(wn.sub(w)).lt(Decimal.abs(wn).mul(tol))) {
             return wn;
         } else {
@@ -491,32 +344,30 @@ export type DecimalSource = Decimal | number | string;
  * The Decimal's value is simply mantissa * 10^exponent.
  */
 export default class Decimal {
-    public static readonly dZero = FC_NN(0, 0, 0);
-    public static readonly dOne = FC_NN(1, 0, 1);
-    public static readonly dNegOne = FC_NN(-1, 0, 1);
-    public static readonly dTwo = FC_NN(1, 0, 2);
-    public static readonly dTen = FC_NN(1, 0, 10);
-    public static readonly dNaN = FC_NN(Number.NaN, Number.NaN, Number.NaN);
-    public static readonly dInf = FC_NN(1, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY);
-    public static readonly dNegInf = FC_NN(-1, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY);
-    public static readonly dNumberMax = FC(1, 0, Number.MAX_VALUE);
-    public static readonly dNumberMin = FC(1, 0, Number.MIN_VALUE);
+    public static dZero: Decimal;
+    public static dOne: Decimal;
+    public static dNegOne: Decimal;
+    public static dTwo: Decimal;
+    public static dTen: Decimal;
+    public static dNaN: Decimal;
+    public static dInf: Decimal;
+    public static dNegInf: Decimal;
+    public static dNumberMax: Decimal;
+    public static dNumberMin: Decimal;
 
-    public sign: number = Number.NaN;
-    public mag: number = Number.NaN;
-    public layer: number = Number.NaN;
+    private static fromStringCache = new LRUCache<string, Decimal>(DEFAULT_FROM_STRING_CACHE_SIZE);
+
+    public sign = 0;
+    public mag = 0;
+    public layer = 0;
 
     constructor(value?: DecimalSource) {
-        if (value instanceof Decimal || (value != null && typeof value === "object" && "sign" in value && "mag" in value && "layer" in value)) {
+        if (value instanceof Decimal) {
             this.fromDecimal(value);
         } else if (typeof value === "number") {
             this.fromNumber(value);
         } else if (typeof value === "string") {
             this.fromString(value);
-        } else {
-            this.sign = 0;
-            this.layer = 0;
-            this.mag = 0;
         }
     }
 
@@ -549,8 +400,8 @@ export default class Decimal {
             //don't even pretend mantissa is meaningful
             this.sign = Math.sign(value);
             if (this.sign === 0) {
-                this.layer === 0;
-                this.exponent === 0;
+                this.layer = 0;
+                this.exponent = 0;
             }
         }
     }
@@ -633,8 +484,32 @@ export default class Decimal {
         return new Decimal().fromValue(value);
     }
 
-    public static fromValue_noAlloc(value: DecimalSource): Decimal {
-        return value instanceof Decimal ? value : new Decimal(value);
+    /**
+     * Converts a DecimalSource to a Decimal, without constructing a new Decimal
+     * if the provided value is already a Decimal.
+     *
+     * As the return value could be the provided value itself, this function
+     * returns a read-only Decimal to prevent accidental mutations of the value.
+     * Use `new Decimal(value)` to explicitly create a writeable copy if mutation
+     * is required.
+     */
+    public static fromValue_noAlloc(value: DecimalSource): Readonly<Decimal> {
+        if (value instanceof Decimal) {
+            return value;
+        } else if (typeof value === "string") {
+            const cached = Decimal.fromStringCache.get(value);
+            if (cached !== undefined) {
+                return cached;
+            }
+            return Decimal.fromString(value);
+        } else if (typeof value === "number") {
+            return Decimal.fromNumber(value);
+        } else {
+            // This should never happen... but some users like Prestige Tree Rewritten
+            // pass undefined values in as DecimalSources, so we should handle this
+            // case to not break them.
+            return Decimal.dZero;
+        }
     }
 
     public static abs(value: DecimalSource): Decimal {
@@ -830,7 +705,7 @@ export default class Decimal {
     public static eq_tolerance(
         value: DecimalSource,
         other: DecimalSource,
-        tolerance: number
+        tolerance?: number
     ): boolean {
         return D(value).eq_tolerance(other, tolerance);
     }
@@ -838,7 +713,7 @@ export default class Decimal {
     public static equals_tolerance(
         value: DecimalSource,
         other: DecimalSource,
-        tolerance: number
+        tolerance?: number
     ): boolean {
         return D(value).eq_tolerance(other, tolerance);
     }
@@ -927,6 +802,10 @@ export default class Decimal {
         return D(value).pow10();
     }
 
+    public static pow_base(value: DecimalSource, other: DecimalSource): Decimal {
+        return D(value).pow_base(other);
+    }
+
     public static root(value: DecimalSource, other: DecimalSource): Decimal {
         return D(value).root(other);
     }
@@ -983,7 +862,7 @@ export default class Decimal {
         return D(value).layeradd10(diff);
     }
 
-    public static layeradd(value: DecimalSource, diff: number, base = 10): Decimal {
+    public static layeradd(value: DecimalSource, diff: number, base: DecimalSource = 10): Decimal {
         return D(value).layeradd(diff, base);
     }
 
@@ -1007,6 +886,54 @@ export default class Decimal {
         return D(value).pentate(height, payload);
     }
 
+    public static sin(value: DecimalSource): Decimal {
+        return D(value).sin();
+    }
+
+    public static cos(value: DecimalSource): Decimal {
+        return D(value).cos();
+    }
+
+    public static tan(value: DecimalSource): Decimal {
+        return D(value).tan();
+    }
+
+    public static asin(value: DecimalSource): Decimal {
+        return D(value).asin();
+    }
+
+    public static acos(value: DecimalSource): Decimal {
+        return D(value).acos();
+    }
+
+    public static atan(value: DecimalSource): Decimal {
+        return D(value).atan();
+    }
+
+    public static sinh(value: DecimalSource): Decimal {
+        return D(value).sinh();
+    }
+
+    public static cosh(value: DecimalSource): Decimal {
+        return D(value).cosh();
+    }
+
+    public static tanh(value: DecimalSource): Decimal {
+        return D(value).tanh();
+    }
+
+    public static asinh(value: DecimalSource): Decimal {
+        return D(value).asinh();
+    }
+
+    public static acosh(value: DecimalSource): Decimal {
+        return D(value).acosh();
+    }
+
+    public static atanh(value: DecimalSource): Decimal {
+        return D(value).atanh();
+    }
+
     /**
      * If you're willing to spend 'resourcesAvailable' and want to buy something
      * with exponentially increasing cost each purchase (start at priceStart,
@@ -1192,19 +1119,19 @@ export default class Decimal {
 
     public normalize(): this {
         /*
-    PSEUDOCODE:
-    Whenever we are partially 0 (sign is 0 or mag and layer is 0), make it fully 0.
-    Whenever we are at or hit layer 0, extract sign from negative mag.
-    If layer === 0 and mag < FIRST_NEG_LAYER (1/9e15), shift to 'first negative layer' (add layer, log10 mag).
-    While abs(mag) > EXP_LIMIT (9e15), layer += 1, mag = maglog10(mag).
-    While abs(mag) < LAYER_DOWN (15.954) and layer > 0, layer -= 1, mag = pow(10, mag).
-
-    When we're done, all of the following should be true OR one of the numbers is not IsFinite OR layer is not IsInteger (error state):
-    Any 0 is totally zero (0, 0, 0).
-    Anything layer 0 has mag 0 OR mag > 1/9e15 and < 9e15.
-    Anything layer 1 or higher has abs(mag) >= 15.954 and < 9e15.
-    We will assume in calculations that all Decimals are either erroneous or satisfy these criteria. (Otherwise: Garbage in, garbage out.)
-    */
+                                                                                                            PSEUDOCODE:
+                                                                                                            Whenever we are partially 0 (sign is 0 or mag and layer is 0), make it fully 0.
+                                                                                                            Whenever we are at or hit layer 0, extract sign from negative mag.
+                                                                                                            If layer === 0 and mag < FIRST_NEG_LAYER (1/9e15), shift to 'first negative layer' (add layer, log10 mag).
+                                                                                                            While abs(mag) > EXP_LIMIT (9e15), layer += 1, mag = maglog10(mag).
+                                                                                                            While abs(mag) < LAYER_DOWN (15.954) and layer > 0, layer -= 1, mag = pow(10, mag).
+                                                                                                            
+                                                                                                            When we're done, all of the following should be true OR one of the numbers is not IsFinite OR layer is not IsInteger (error state):
+                                                                                                            Any 0 is totally zero (0, 0, 0).
+                                                                                                            Anything layer 0 has mag 0 OR mag > 1/9e15 and < 9e15.
+                                                                                                            Anything layer 1 or higher has abs(mag) >= 15.954 and < 9e15.
+                                                                                                            We will assume in calculations that all Decimals are either erroneous or satisfy these criteria. (Otherwise: Garbage in, garbage out.)
+                                                                                                            */
         if (this.sign === 0 || (this.mag === 0 && this.layer === 0)) {
             this.sign = 0;
             this.mag = 0;
@@ -1306,6 +1233,11 @@ export default class Decimal {
     }
 
     public fromString(value: string): Decimal {
+        const originalValue = value;
+        const cached = Decimal.fromStringCache.get(originalValue);
+        if (cached !== undefined) {
+            return this.fromDecimal(cached);
+        }
         if (IGNORE_COMMAS) {
             value = value.replace(",", "");
         } else if (COMMAS_ARE_DECIMAL_POINTS) {
@@ -1330,6 +1262,9 @@ export default class Decimal {
                 this.sign = result.sign;
                 this.layer = result.layer;
                 this.mag = result.mag;
+                if (Decimal.fromStringCache.maxSize >= 1) {
+                    Decimal.fromStringCache.set(originalValue, Decimal.fromDecimal(this));
+                }
                 return this;
             }
         }
@@ -1352,6 +1287,9 @@ export default class Decimal {
                 this.sign = result.sign;
                 this.layer = result.layer;
                 this.mag = result.mag;
+                if (Decimal.fromStringCache.maxSize >= 1) {
+                    Decimal.fromStringCache.set(originalValue, Decimal.fromDecimal(this));
+                }
                 return this;
             }
         }
@@ -1366,6 +1304,9 @@ export default class Decimal {
                 this.sign = result.sign;
                 this.layer = result.layer;
                 this.mag = result.mag;
+                if (Decimal.fromStringCache.maxSize >= 1) {
+                    Decimal.fromStringCache.set(originalValue, Decimal.fromDecimal(this));
+                }
                 return this;
             }
         }
@@ -1391,6 +1332,9 @@ export default class Decimal {
                 this.sign = result.sign;
                 this.layer = result.layer;
                 this.mag = result.mag;
+                if (Decimal.fromStringCache.maxSize >= 1) {
+                    Decimal.fromStringCache.set(originalValue, Decimal.fromDecimal(this));
+                }
                 return this;
             }
         }
@@ -1411,6 +1355,9 @@ export default class Decimal {
                 this.sign = result.sign;
                 this.layer = result.layer;
                 this.mag = result.mag;
+                if (Decimal.fromStringCache.maxSize >= 1) {
+                    Decimal.fromStringCache.set(originalValue, Decimal.fromDecimal(this));
+                }
                 return this;
             }
         }
@@ -1422,13 +1369,21 @@ export default class Decimal {
         if (ecount === 0) {
             const numberAttempt = parseFloat(value);
             if (isFinite(numberAttempt)) {
-                return this.fromNumber(numberAttempt);
+                this.fromNumber(numberAttempt);
+                if (Decimal.fromStringCache.size >= 1) {
+                    Decimal.fromStringCache.set(originalValue, Decimal.fromDecimal(this));
+                }
+                return this;
             }
         } else if (ecount === 1) {
             //Very small numbers ("2e-3000" and so on) may look like valid floats but round to 0.
             const numberAttempt = parseFloat(value);
             if (isFinite(numberAttempt) && numberAttempt !== 0) {
-                return this.fromNumber(numberAttempt);
+                this.fromNumber(numberAttempt);
+                if (Decimal.fromStringCache.maxSize >= 1) {
+                    Decimal.fromStringCache.set(originalValue, Decimal.fromDecimal(this));
+                }
+                return this;
             }
         }
 
@@ -1450,6 +1405,9 @@ export default class Decimal {
                     this.layer = parseFloat(layerstring);
                     this.mag = parseFloat(newparts[1].substr(i + 1));
                     this.normalize();
+                    if (Decimal.fromStringCache.maxSize >= 1) {
+                        Decimal.fromStringCache.set(originalValue, Decimal.fromDecimal(this));
+                    }
                     return this;
                 }
             }
@@ -1459,6 +1417,9 @@ export default class Decimal {
             this.sign = 0;
             this.layer = 0;
             this.mag = 0;
+            if (Decimal.fromStringCache.maxSize >= 1) {
+                Decimal.fromStringCache.set(originalValue, Decimal.fromDecimal(this));
+            }
             return this;
         }
         const mantissa = parseFloat(parts[0]);
@@ -1466,6 +1427,9 @@ export default class Decimal {
             this.sign = 0;
             this.layer = 0;
             this.mag = 0;
+            if (Decimal.fromStringCache.maxSize >= 1) {
+                Decimal.fromStringCache.set(originalValue, Decimal.fromDecimal(this));
+            }
             return this;
         }
         let exponent = parseFloat(parts[parts.length - 1]);
@@ -1500,6 +1464,9 @@ export default class Decimal {
                 this.sign = result.sign;
                 this.layer = result.layer;
                 this.mag = result.mag;
+                if (Decimal.fromStringCache.maxSize >= 1) {
+                    Decimal.fromStringCache.set(originalValue, Decimal.fromDecimal(this));
+                }
                 return this;
             } else {
                 //at eee and above, mantissa is too small to be recognizable!
@@ -1508,11 +1475,14 @@ export default class Decimal {
         }
 
         this.normalize();
+        if (Decimal.fromStringCache.maxSize >= 1) {
+            Decimal.fromStringCache.set(originalValue, Decimal.fromDecimal(this));
+        }
         return this;
     }
 
     public fromValue(value: DecimalSource): Decimal {
-        if (value instanceof Decimal || (value != null && typeof value === "object" && "sign" in value && "mag" in value && "layer" in value)) {
+        if (value instanceof Decimal) {
             return this.fromDecimal(value);
         }
 
@@ -1770,7 +1740,7 @@ export default class Decimal {
         }
 
         if (a.layer === 0 && b.layer === 0) {
-            return D(a.sign * a.mag + b.sign * b.mag);
+            return Decimal.fromNumber(a.sign * a.mag + b.sign * b.mag);
         }
 
         const layera = a.layer * Math.sign(a.mag);
@@ -1869,7 +1839,7 @@ export default class Decimal {
         }
 
         if (a.layer === 0 && b.layer === 0) {
-            return D(a.sign * b.sign * a.mag * b.mag);
+            return Decimal.fromNumber(a.sign * b.sign * a.mag * b.mag);
         }
 
         //Special case: If one of the numbers is layer 3 or higher or one of the numbers is 2+ layers bigger than the other, just take the bigger number.
@@ -2071,7 +2041,7 @@ export default class Decimal {
      * For example, if you put in 1e-9, then any number closer to the
      * larger number than (larger number)*1e-9 will be considered equal.
      */
-    public eq_tolerance(value: DecimalSource, tolerance: number): boolean {
+    public eq_tolerance(value: DecimalSource, tolerance?: number): boolean {
         const decimal = D(value); // https://stackoverflow.com/a/33024979
         if (tolerance == null) {
             tolerance = 1e-7;
@@ -2225,10 +2195,7 @@ export default class Decimal {
             return a;
         }
 
-        const result = a
-            .absLog10()
-            .mul(b)
-            .pow10();
+        const result = a.absLog10().mul(b).pow10();
 
         if (this.sign === -1) {
             if (Math.abs(b.toNumber() % 2) % 2 === 1) {
@@ -2255,7 +2222,7 @@ export default class Decimal {
             return Decimal.dNaN;
         }
 
-        let a = this;
+        let a: Decimal = this;
 
         //handle layer 0 case - if no precision is lost just use Math.pow, else promote one layer
         if (a.layer === 0) {
@@ -2266,7 +2233,7 @@ export default class Decimal {
                 if (a.sign === 0) {
                     return Decimal.dOne;
                 } else {
-                    a = FC_NN(a.sign, a.layer + 1, Math.log10(a.mag)) as this;
+                    a = FC_NN(a.sign, a.layer + 1, Math.log10(a.mag));
                 }
             }
         }
@@ -2309,7 +2276,7 @@ export default class Decimal {
             return this.recip();
         } else if (this.layer === 0) {
             if (this.lt(FC_NN(1, 0, 24))) {
-                return D(f_gamma(this.sign * this.mag));
+                return Decimal.fromNumber(f_gamma(this.sign * this.mag));
             }
 
             const t = this.mag - 1;
@@ -2360,7 +2327,7 @@ export default class Decimal {
             return Decimal.dOne;
         }
         if (this.layer === 0 && this.mag <= 709.7) {
-            return D(Math.exp(this.sign * this.mag));
+            return Decimal.fromNumber(Math.exp(this.sign * this.mag));
         } else if (this.layer === 0) {
             return FC(1, 1, this.sign * Math.log10(Math.E) * this.mag);
         } else if (this.layer === 1) {
@@ -2376,7 +2343,7 @@ export default class Decimal {
 
     public sqrt(): Decimal {
         if (this.layer === 0) {
-            return D(Math.sqrt(this.sign * this.mag));
+            return Decimal.fromNumber(Math.sqrt(this.sign * this.mag));
         } else if (this.layer === 1) {
             return FC(1, 2, Math.log10(this.mag) - 0.3010299956639812);
         } else {
@@ -2422,14 +2389,15 @@ export default class Decimal {
             if (this_num <= 1.44466786100976613366 && this_num >= 0.06598803584531253708) {
                 //hotfix for the very edge of the number range not being handled properly
                 if (this_num > 1.444667861009099) {
-                    return new Decimal(Math.E);
+                    return Decimal.fromNumber(Math.E);
                 }
                 //Formula for infinite height power tower.
                 const negln = Decimal.ln(this).neg();
                 return negln.lambertw().div(negln);
             } else if (this_num > 1.44466786100976613366) {
                 //explodes to infinity
-                return new Decimal(Number.POSITIVE_INFINITY);
+                // TODO: replace this with Decimal.dInf
+                return Decimal.fromNumber(Number.POSITIVE_INFINITY);
             } else {
                 //0.06598803584531253708 > this_num >= 0: never converges
                 //this_num < 0: quickly becomes a complex number
@@ -2444,7 +2412,7 @@ export default class Decimal {
             if (result > 1) {
                 result = 2 - result;
             }
-            return new Decimal(result);
+            return Decimal.fromNumber(result);
         }
 
         if (height < 0) {
@@ -2481,14 +2449,13 @@ export default class Decimal {
                 if (this.gt(10)) {
                     payload = this.pow(fracheight);
                 } else {
-                    payload = D(Decimal.tetrate_critical(this.toNumber(), fracheight));
+                    payload = Decimal.fromNumber(
+                        Decimal.tetrate_critical(this.toNumber(), fracheight)
+                    );
                     //TODO: until the critical section grid can handle numbers below 2, scale them to the base
                     //TODO: maybe once the critical section grid has very large bases, this math can be appropriate for them too? I'll think about it
                     if (this.lt(2)) {
-                        payload = payload
-                            .sub(1)
-                            .mul(this.minus(1))
-                            .plus(1);
+                        payload = payload.sub(1).mul(this.minus(1)).plus(1);
                     }
                 }
             } else {
@@ -2531,7 +2498,7 @@ export default class Decimal {
         }
 
         base = D(base);
-        let result = D(this);
+        let result = Decimal.fromDecimal(this);
         const fulltimes = times;
         times = Math.trunc(times);
         const fraction = fulltimes - times;
@@ -2567,7 +2534,36 @@ export default class Decimal {
 
     //Super-logarithm, one of tetration's inverses, tells you what size power tower you'd have to tetrate base to to get number. By definition, will never be higher than 1.8e308 in break_eternity.js, since a power tower 1.8e308 numbers tall is the largest representable number.
     // https://en.wikipedia.org/wiki/Super-logarithm
-    public slog(base: DecimalSource = 10): Decimal {
+    // NEW: Accept a number of iterations, and use binary search to, after making an initial guess, hone in on the true value, assuming tetration as the ground truth.
+    public slog(base: DecimalSource = 10, iterations = 100): Decimal {
+        let step_size = 0.001;
+        let has_changed_directions_once = false;
+        let previously_rose = false;
+        let result = this.slog_internal(base).toNumber();
+        for (let i = 1; i < iterations; ++i) {
+            const new_decimal = new Decimal(base).tetrate(result);
+            const currently_rose = new_decimal.gt(this);
+            if (i > 1) {
+                if (previously_rose != currently_rose) {
+                    has_changed_directions_once = true;
+                }
+            }
+            previously_rose = currently_rose;
+            if (has_changed_directions_once) {
+                step_size /= 2;
+            } else {
+                step_size *= 2;
+            }
+            step_size = Math.abs(step_size) * (currently_rose ? -1 : 1);
+            result += step_size;
+            if (step_size === 0) {
+                break;
+            }
+        }
+        return Decimal.fromNumber(result);
+    }
+
+    public slog_internal(base: DecimalSource = 10): Decimal {
         base = D(base);
 
         //special cases:
@@ -2598,7 +2594,7 @@ export default class Decimal {
         }
 
         let result = 0;
-        let copy = D(this);
+        let copy = Decimal.fromDecimal(this);
         if (copy.layer - base.layer > 3) {
             const layerloss = copy.layer - base.layer - 3;
             result += layerloss;
@@ -2610,13 +2606,15 @@ export default class Decimal {
                 copy = Decimal.pow(base, copy);
                 result -= 1;
             } else if (copy.lte(Decimal.dOne)) {
-                return D(result + Decimal.slog_critical(base.toNumber(), copy.toNumber()));
+                return Decimal.fromNumber(
+                    result + Decimal.slog_critical(base.toNumber(), copy.toNumber())
+                );
             } else {
                 result += 1;
                 copy = Decimal.log(copy, base);
             }
         }
-        return D(result);
+        return Decimal.fromNumber(result);
     }
 
     //background info and tables of values for critical functions taken here: https://github.com/Patashu/break_eternity.js/issues/22
@@ -2653,6 +2651,7 @@ export default class Decimal {
         //basically, if we're between bases, we interpolate each bases' relevant values together
         //then we interpolate based on what the fractional height is.
         //accuracy could be improved by doing a non-linear interpolation (maybe), by adding more bases and heights (definitely) but this is AFAIK the best you can get without running some pari.gp or mathematica program to calculate exact values
+        //however, do note http://myweb.astate.edu/wpaulsen/tetcalc/tetcalc.html can do it for arbitrary heights but not for arbitrary bases (2, e, 10 present)
         for (let i = 0; i < critical_headers.length; ++i) {
             if (critical_headers[i] == base) {
                 // exact match
@@ -2673,15 +2672,25 @@ export default class Decimal {
             }
         }
         const frac = height - Math.floor(height);
-        const result = lower * (1 - frac) + upper * frac;
-        return result;
+        //improvement - you get more accuracy (especially around 0.9-1.0) by doing log, then frac, then powing the result
+        //(we could pre-log the lookup table, but then fractional bases would get Weird)
+        //also, use old linear for slog (values 0 or less in critical section). maybe something else is better but haven't thought about what yet
+        if (lower <= 0 || upper <= 0) {
+            return lower * (1 - frac) + upper * frac;
+        } else {
+            return Math.pow(
+                base,
+                (Math.log(lower) / Math.log(base)) * (1 - frac) +
+                    (Math.log(upper) / Math.log(base)) * frac
+            );
+        }
     }
 
     //Function for adding/removing layers from a Decimal, even fractional layers (e.g. its slog10 representation).
     //Moved this over to use the same critical section as tetrate/slog.
     public layeradd10(diff: DecimalSource): Decimal {
         diff = Decimal.fromValue_noAlloc(diff).toNumber();
-        const result = D(this);
+        const result = Decimal.fromDecimal(this);
         if (diff >= 1) {
             //bug fix: if result is very smol (mag < 0, layer > 0) turn it into 0 first
             if (result.mag < 0 && result.layer > 0) {
@@ -2767,9 +2776,9 @@ export default class Decimal {
         if (this.lt(-0.3678794411710499)) {
             throw Error("lambertw is unimplemented for results less than -1, sorry!");
         } else if (this.mag < 0) {
-            return D(f_lambertw(this.toNumber()));
+            return Decimal.fromNumber(f_lambertw(this.toNumber()));
         } else if (this.layer === 0) {
-            return D(f_lambertw(this.sign * this.mag));
+            return Decimal.fromNumber(f_lambertw(this.sign * this.mag));
         } else if (this.layer === 1) {
             return d_lambertw(this);
         } else if (this.layer === 2) {
@@ -2779,7 +2788,7 @@ export default class Decimal {
             return FC_NN(this.sign, this.layer - 1, this.mag);
         }
 
-        throw "Unhandled behavior in lambertw()";
+        throw new Error("Unhandled behavior in lambertw()");
     }
 
     //The super square-root function - what number, tetrated to height 2, equals this?
@@ -2792,182 +2801,6 @@ export default class Decimal {
         const lnx = this.ln();
         return lnx.div(lnx.lambertw());
     }
-    /*
-
-Unit tests for tetrate/iteratedexp/iteratedlog/layeradd10/layeradd/slog:
-(note: these won't be exactly precise with the new slog implementation, but that's okay)
-
-for (var i = 0; i < 1000; ++i)
-{
-  var first = Math.random()*100;
-  var both = Math.random()*100;
-  var expected = first+both+1;
-  var result = new Decimal(10).layeradd10(first).layeradd10(both).slog();
-  if (Number.isFinite(result.mag) && !Decimal.eq_tolerance(expected, result))
-  {
-      console.log(first + ", " + both);
-  }
-}
-
-for (var i = 0; i < 1000; ++i)
-{
-  var first = Math.random()*100;
-  var both = Math.random()*100;
-  first += both;
-  var expected = first-both+1;
-  var result = new Decimal(10).layeradd10(first).layeradd10(-both).slog();
-  if (Number.isFinite(result.mag) && !Decimal.eq_tolerance(expected, result))
-  {
-      console.log(first + ", " + both);
-  }
-}
-
-for (var i = 0; i < 1000; ++i)
-{
-  var first = Math.random()*100;
-  var both = Math.random()*100;
-  var base = Math.random()*8+2;
-  var expected = first+both+1;
-  var result = new Decimal(base).layeradd(first, base).layeradd(both, base).slog(base);
-  if (Number.isFinite(result.mag) && !Decimal.eq_tolerance(expected, result))
-  {
-      console.log(first + ", " + both);
-  }
-}
-
-for (var i = 0; i < 1000; ++i)
-{
-  var first = Math.random()*100;
-  var both = Math.random()*100;
-  var base = Math.random()*8+2;
-  first += both;
-  var expected = first-both+1;
-  var result = new Decimal(base).layeradd(first, base).layeradd(-both, base).slog(base);
-  if (Number.isFinite(result.mag) && !Decimal.eq_tolerance(expected, result))
-  {
-      console.log(first + ", " + both);
-  }
-}
-
-for (var i = 0; i < 1000; ++i)
-{
-var first = Math.round((Math.random()*30))/10;
-var both = Math.round((Math.random()*30))/10;
-var tetrateonly = Decimal.tetrate(10, first);
-var tetrateandlog = Decimal.tetrate(10, first+both).iteratedlog(10, both);
-if (!Decimal.eq_tolerance(tetrateonly, tetrateandlog))
-{
-  console.log(first + ", " + both);
-}
-}
-
-for (var i = 0; i < 1000; ++i)
-{
-var first = Math.round((Math.random()*30))/10;
-var both = Math.round((Math.random()*30))/10;
-var base = Math.random()*8+2;
-var tetrateonly = Decimal.tetrate(base, first);
-var tetrateandlog = Decimal.tetrate(base, first+both).iteratedlog(base, both);
-if (!Decimal.eq_tolerance(tetrateonly, tetrateandlog))
-{
-  console.log(first + ", " + both);
-}
-}
-
-for (var i = 0; i < 1000; ++i)
-{
-var first = Math.round((Math.random()*30))/10;
-var both = Math.round((Math.random()*30))/10;
-var base = Math.random()*8+2;
-var tetrateonly = Decimal.tetrate(base, first, base);
-var tetrateandlog = Decimal.tetrate(base, first+both, base).iteratedlog(base, both);
-if (!Decimal.eq_tolerance(tetrateonly, tetrateandlog))
-{
-  console.log(first + ", " + both);
-}
-}
-
-for (var i = 0; i < 1000; ++i)
-{
-  var xex = new Decimal(-0.3678794411710499+Math.random()*100);
-  var x = Decimal.lambertw(xex);
-  if (!Decimal.eq_tolerance(xex, x.mul(Decimal.exp(x))))
-  {
-      console.log(xex);
-  }
-}
-
-for (var i = 0; i < 1000; ++i)
-{
-  var xex = new Decimal(-0.3678794411710499+Math.exp(Math.random()*100));
-  var x = Decimal.lambertw(xex);
-  if (!Decimal.eq_tolerance(xex, x.mul(Decimal.exp(x))))
-  {
-      console.log(xex);
-  }
-}
-
-for (var i = 0; i < 1000; ++i)
-{
-  var a = Decimal.randomDecimalForTesting(Math.random() > 0.5 ? 0 : 1);
-  var b = Decimal.randomDecimalForTesting(Math.random() > 0.5 ? 0 : 1);
-  if (Math.random() > 0.5) { a = a.recip(); }
-  if (Math.random() > 0.5) { b = b.recip(); }
-  var c = a.add(b).toNumber();
-  if (Number.isFinite(c) && !Decimal.eq_tolerance(c, a.toNumber()+b.toNumber()))
-  {
-      console.log(a + ", " + b);
-  }
-}
-
-for (var i = 0; i < 100; ++i)
-{
-  var a = Decimal.randomDecimalForTesting(Math.round(Math.random()*4));
-  var b = Decimal.randomDecimalForTesting(Math.round(Math.random()*4));
-  if (Math.random() > 0.5) { a = a.recip(); }
-  if (Math.random() > 0.5) { b = b.recip(); }
-  var c = a.mul(b).toNumber();
-  if (Number.isFinite(c) && Number.isFinite(a.toNumber()) && Number.isFinite(b.toNumber()) && a.toNumber() != 0 && b.toNumber() != 0 && c != 0 && !Decimal.eq_tolerance(c, a.toNumber()*b.toNumber()))
-  {
-      console.log("Test 1: " + a + ", " + b);
-  }
-  else if (!Decimal.mul(a.recip(), b.recip()).eq_tolerance(Decimal.mul(a, b).recip()))
-  {
-      console.log("Test 3: " + a + ", " + b);
-  }
-}
-
-for (var i = 0; i < 10; ++i)
-{
-  var a = Decimal.randomDecimalForTesting(Math.round(Math.random()*4));
-  var b = Decimal.randomDecimalForTesting(Math.round(Math.random()*4));
-  if (Math.random() > 0.5 && a.sign !== 0) { a = a.recip(); }
-  if (Math.random() > 0.5 && b.sign !== 0) { b = b.recip(); }
-  var c = a.pow(b);
-  var d = a.root(b.recip());
-  var e = a.pow(b.recip());
-  var f = a.root(b);
-
-  if (!c.eq_tolerance(d) && a.sign !== 0 && b.sign !== 0)
-  {
-    console.log("Test 1: " + a + ", " + b);
-  }
-  if (!e.eq_tolerance(f) && a.sign !== 0 && b.sign !== 0)
-  {
-    console.log("Test 2: " + a + ", " + b);
-  }
-}
-
-for (var i = 0; i < 10; ++i)
-{
-  var a = Math.round(Math.random()*18-9);
-  var b = Math.round(Math.random()*100-50);
-  var c = Math.round(Math.random()*18-9);
-  var d = Math.round(Math.random()*100-50);
-  console.log("Decimal.pow(Decimal.fromMantissaExponent(" + a + ", " + b + "), Decimal.fromMantissaExponent(" + c + ", " + d + ")).toString()");
-}
-
-*/
 
     //Pentation/pentate: The result of tetrating 'height' times in a row. An absurdly strong operator - Decimal.pentate(2, 4.28) and Decimal.pentate(10, 2.37) are already too huge for break_eternity.js!
     // https://en.wikipedia.org/wiki/Pentation
@@ -2981,7 +2814,7 @@ for (var i = 0; i < 10; ++i)
         if (fracheight !== 0) {
             if (payload.eq(Decimal.dOne)) {
                 ++height;
-                payload = new Decimal(fracheight);
+                payload = Decimal.fromNumber(fracheight);
             } else {
                 if (this.eq(10)) {
                     payload = payload.layeradd10(fracheight);
@@ -3012,7 +2845,7 @@ for (var i = 0; i < 10; ++i)
             return this;
         }
         if (this.layer === 0) {
-            return D(Math.sin(this.sign * this.mag));
+            return Decimal.fromNumber(Math.sin(this.sign * this.mag));
         }
         return FC_NN(0, 0, 0);
     }
@@ -3022,7 +2855,7 @@ for (var i = 0; i < 10; ++i)
             return Decimal.dOne;
         }
         if (this.layer === 0) {
-            return D(Math.cos(this.sign * this.mag));
+            return Decimal.fromNumber(Math.cos(this.sign * this.mag));
         }
         return FC_NN(0, 0, 0);
     }
@@ -3032,7 +2865,7 @@ for (var i = 0; i < 10; ++i)
             return this;
         }
         if (this.layer === 0) {
-            return D(Math.tan(this.sign * this.mag));
+            return Decimal.fromNumber(Math.tan(this.sign * this.mag));
         }
         return FC_NN(0, 0, 0);
     }
@@ -3042,17 +2875,17 @@ for (var i = 0; i < 10; ++i)
             return this;
         }
         if (this.layer === 0) {
-            return D(Math.asin(this.sign * this.mag));
+            return Decimal.fromNumber(Math.asin(this.sign * this.mag));
         }
         return FC_NN(Number.NaN, Number.NaN, Number.NaN);
     }
 
     public acos(): Decimal {
         if (this.mag < 0) {
-            return D(Math.acos(this.toNumber()));
+            return Decimal.fromNumber(Math.acos(this.toNumber()));
         }
         if (this.layer === 0) {
-            return D(Math.acos(this.sign * this.mag));
+            return Decimal.fromNumber(Math.acos(this.sign * this.mag));
         }
         return FC_NN(Number.NaN, Number.NaN, Number.NaN);
     }
@@ -3062,21 +2895,17 @@ for (var i = 0; i < 10; ++i)
             return this;
         }
         if (this.layer === 0) {
-            return D(Math.atan(this.sign * this.mag));
+            return Decimal.fromNumber(Math.atan(this.sign * this.mag));
         }
-        return D(Math.atan(this.sign * 1.8e308));
+        return Decimal.fromNumber(Math.atan(this.sign * 1.8e308));
     }
 
     public sinh(): Decimal {
-        return this.exp()
-            .sub(this.negate().exp())
-            .div(2);
+        return this.exp().sub(this.negate().exp()).div(2);
     }
 
     public cosh(): Decimal {
-        return this.exp()
-            .add(this.negate().exp())
-            .div(2);
+        return this.exp().add(this.negate().exp()).div(2);
     }
 
     public tanh(): Decimal {
@@ -3084,23 +2913,11 @@ for (var i = 0; i < 10; ++i)
     }
 
     public asinh(): Decimal {
-        return Decimal.ln(
-            this.add(
-                this.sqr()
-                    .add(1)
-                    .sqrt()
-            )
-        );
+        return Decimal.ln(this.add(this.sqr().add(1).sqrt()));
     }
 
     public acosh(): Decimal {
-        return Decimal.ln(
-            this.add(
-                this.sqr()
-                    .sub(1)
-                    .sqrt()
-            )
-        );
+        return Decimal.ln(this.add(this.sqr().sub(1).sqrt()));
     }
 
     public atanh(): Decimal {
@@ -3108,7 +2925,7 @@ for (var i = 0; i < 10; ++i)
             return FC_NN(Number.NaN, Number.NaN, Number.NaN);
         }
 
-        return Decimal.ln(this.add(1).div(D(1).sub(this))).div(2);
+        return Decimal.ln(this.add(1).div(Decimal.fromNumber(1).sub(this))).div(2);
     }
 
     /**
@@ -3148,4 +2965,27 @@ for (var i = 0; i < 10; ++i)
     // return Decimal;
 }
 
+// Assign these after the Decimal is assigned because vitest had issues otherwise
+// If we can figure out why, we can make these readonly properties instead
+Decimal.dZero = FC_NN(0, 0, 0);
+Decimal.dOne = FC_NN(1, 0, 1);
+Decimal.dNegOne = FC_NN(-1, 0, 1);
+Decimal.dTwo = FC_NN(1, 0, 2);
+Decimal.dTen = FC_NN(1, 0, 10);
+Decimal.dNaN = FC_NN(Number.NaN, Number.NaN, Number.NaN);
+Decimal.dInf = FC_NN(1, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY);
+Decimal.dNegInf = FC_NN(-1, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY);
+Decimal.dNumberMax = FC(1, 0, Number.MAX_VALUE);
+Decimal.dNumberMin = FC(1, 0, Number.MIN_VALUE);
+
 // return Decimal;
+
+// Optimise Decimal aliases.
+// We can't do this optimisation before Decimal is assigned.
+D = Decimal.fromValue_noAlloc;
+FC = Decimal.fromComponents;
+FC_NN = Decimal.fromComponents_noNormalize;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+ME = Decimal.fromMantissaExponent;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+ME_NN = Decimal.fromMantissaExponent_noNormalize;
diff --git a/src/lib/lru-cache.ts b/src/lib/lru-cache.ts
new file mode 100644
index 0000000..35363ef
--- /dev/null
+++ b/src/lib/lru-cache.ts
@@ -0,0 +1,139 @@
+/**
+* A LRU cache intended for caching pure functions.
+*/
+export class LRUCache<K, V> {
+    private map = new Map<K, ListNode<K, V>>();
+    // Invariant: Exactly one of the below is true before and after calling a
+    // LRUCache method:
+    // - first and last are both undefined, and map.size() is 0.
+    // - first and last are the same object, and map.size() is 1.
+    // - first and last are different objects, and map.size() is greater than 1.
+    private first: ListNode<K, V> | undefined = undefined;
+    private last: ListNode<K, V> | undefined = undefined;
+    maxSize: number;
+    
+    /**
+    * @param maxSize The maximum size for this cache. We recommend setting this
+    * to be one less than a power of 2, as most hashtables - including V8's
+    * Object hashtable (https://crsrc.org/c/v8/src/objects/ordered-hash-table.cc)
+    * - uses powers of two for hashtable sizes. It can't exactly be a power of
+    * two, as a .set() call could temporarily set the size of the map to be
+    * maxSize + 1.
+    */
+    constructor(maxSize: number) {
+        this.maxSize = maxSize;
+    }
+    
+    get size(): number {
+        return this.map.size;
+    }
+    
+    /**
+    * Gets the specified key from the cache, or undefined if it is not in the
+    * cache.
+    * @param key The key to get.
+    * @returns The cached value, or undefined if key is not in the cache.
+    */
+    get(key: K): V | undefined {
+        const node = this.map.get(key);
+        if (node === undefined) {
+            return undefined;
+        }
+        // It is guaranteed that there is at least one item in the cache.
+        // Therefore, first and last are guaranteed to be a ListNode...
+        // but if there is only one item, they might be the same.
+        
+        // Update the order of the list to make this node the first node in the
+        // list.
+        // This isn't needed if this node is already the first node in the list.
+        if (node !== this.first) {
+            // As this node is DIFFERENT from the first node, it is guaranteed that
+            // there are at least two items in the cache.
+            // However, this node could possibly be the last item.
+            if (node === this.last) {
+                // This node IS the last node.
+                this.last = node.prev;
+                // From the invariants, there must be at least two items in the cache,
+                // so node - which is the original "last node" - must have a defined
+                // previous node. Therefore, this.last - set above - must be defined
+                // here.
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                this.last!.next = undefined;
+            } else {
+                // This node is somewhere in the middle of the list, so there must be at
+                // least THREE items in the list, and this node's prev and next must be
+                // defined here.
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                node.prev!.next = node.next;
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                node.next!.prev = node.prev;
+            }
+            node.next = this.first;
+            // From the invariants, there must be at least two items in the cache, so
+            // this.first must be a valid ListNode.
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this.first!.prev = node;
+            this.first = node;
+        }
+        return node.value;
+    }
+    
+    /**
+    * Sets an entry in the cache.
+    *
+    * @param key The key of the entry.
+    * @param value The value of the entry.
+    * @throws Error, if the map already contains the key.
+    */
+    set(key: K, value: V): void {
+        // Ensure that this.maxSize >= 1.
+        if (this.maxSize < 1) {
+            return;
+        }
+        if (this.map.has(key)) {
+            throw new Error("Cannot update existing keys in the cache");
+        }
+        const node = new ListNode(key, value);
+        // Move node to the front of the list.
+        if (this.first === undefined) {
+            // If the first is undefined, the last is undefined too.
+            // Therefore, this cache has no items in it.
+            this.first = node;
+            this.last = node;
+        } else {
+            // This cache has at least one item in it.
+            node.next = this.first;
+            this.first.prev = node;
+            this.first = node;
+        }
+        this.map.set(key, node);
+        
+        while (this.map.size > this.maxSize) {
+            // We are guaranteed that this.maxSize >= 1,
+            // so this.map.size is guaranteed to be >= 2,
+            // so this.first and this.last must be different valid ListNodes,
+            // and this.last.prev must also be a valid ListNode (possibly this.first).
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const last = this.last!;
+            this.map.delete(last.key);
+            this.last = last.prev;
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this.last!.next = undefined;
+        }
+    }
+}
+
+/**
+* A node in a doubly linked list.
+*/
+class ListNode<K, V> {
+    key: K;
+    value: V;
+    next: ListNode<K, V> | undefined = undefined;
+    prev: ListNode<K, V> | undefined = undefined;
+    
+    constructor(key: K, value: V) {
+        this.key = key;
+        this.value = value;
+    }
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 5b00382..e416fa5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,7 @@ import "@fontsource/material-icons";
 import App from "App.vue";
 import projInfo from "data/projInfo.json";
 import "game/notifications";
+import state from "game/state";
 import { load } from "util/save";
 import { useRegisterSW } from "virtual:pwa-register/vue";
 import type { App as VueApp } from "vue";
@@ -23,10 +24,33 @@ declare global {
     }
 }
 
+const error = console.error;
+console.error = function (...args) {
+    if (import.meta.env.DEV) {
+        state.errors.push(new Error(args[0], { cause: args[1] }));
+    }
+    error(...args);
+};
+
+window.onerror = function (event, source, lineno, colno, err) {
+    state.errors.push(err instanceof Error ? err : new Error(JSON.stringify(err)));
+    error(err);
+    return true;
+};
+window.onunhandledrejection = function (event) {
+    state.errors.push(
+        event.reason instanceof Error ? event.reason : new Error(JSON.stringify(event.reason))
+    );
+    error(event.reason);
+};
+
 document.title = projInfo.title;
 window.projInfo = projInfo;
-if ((projInfo.id as string) === "") {
-    throw "Project ID is empty! Please select a unique ID for this project in /src/data/projInfo.json";
+if (projInfo.id === "") {
+    console.error(
+        "Project ID is empty!",
+        "Please select a unique ID for this project in /src/data/projInfo.json"
+    );
 }
 
 requestAnimationFrame(async () => {
@@ -36,10 +60,14 @@ requestAnimationFrame(async () => {
         "padding: 4px;"
     );
     await load();
-    const { globalBus, startGameLoop } = await import("./game/events");
+    const { globalBus } = await import("./game/events");
+    const { startGameLoop } = await import("./game/gameLoop");
 
     // Create Vue
     const vue = (window.vue = createApp(App));
+    vue.config.errorHandler = function (err, instance, info) {
+        console.error(err, info, instance);
+    };
     globalBus.emit("setupVue", vue);
     vue.mount("#app");
 
@@ -48,7 +76,7 @@ requestAnimationFrame(async () => {
         const toast = useToast();
         const { updateServiceWorker } = useRegisterSW({
             onNeedRefresh() {
-                toast.info("New content available, click or reload to update.", {
+                toast.info("New content available, click here to update.", {
                     timeout: false,
                     closeOnClick: false,
                     draggable: false,
@@ -69,7 +97,8 @@ requestAnimationFrame(async () => {
             onRegisterError: console.warn,
             onRegistered(r) {
                 if (r) {
-                    setInterval(r.update, 60 * 60 * 1000);
+                    // https://stackoverflow.com/questions/65500916/typeerror-failed-to-execute-update-on-serviceworkerregistration-illegal-in
+                    setInterval(() => r.update(), 60 * 60 * 1000);
                 }
             }
         });
diff --git a/src/util/bignum.ts b/src/util/bignum.ts
index 33d180e..d8e3252 100644
--- a/src/util/bignum.ts
+++ b/src/util/bignum.ts
@@ -18,7 +18,7 @@ export const {
 export type DecimalSource = RawDecimalSource;
 
 declare global {
-    /** Augment the window object so the big num functions can be access from the console. */
+    /** Augment the window object so the big num functions can be accessed from the console. */
     interface Window {
         Decimal: typeof Decimal;
         exponentialFormat: (num: DecimalSource, precision: number, mantissa: boolean) => string;
diff --git a/src/util/common.ts b/src/util/common.ts
index d7560dd..dbbe233 100644
--- a/src/util/common.ts
+++ b/src/util/common.ts
@@ -12,6 +12,11 @@ export function camelToTitle(camel: string): string {
     return title;
 }
 
+export function camelToKebab(camel: string) {
+    // Split off first character so function works on upper camel (pascal) case
+    return (camel[0] + camel.slice(1).replace(/[A-Z]/g, c => `-${c}`)).toLowerCase();
+}
+
 export function isFunction<T, S extends ReadonlyArray<unknown>, R>(
     functionOrValue: ((...args: S) => T) | R
 ): functionOrValue is (...args: S) => T {
diff --git a/src/util/computed.ts b/src/util/computed.ts
index 59db8ab..8a9ad62 100644
--- a/src/util/computed.ts
+++ b/src/util/computed.ts
@@ -1,6 +1,7 @@
+import type { JSXFunction } from "features/feature";
+import { isFunction } from "util/common";
 import type { Ref } from "vue";
 import { computed } from "vue";
-import { isFunction } from "util/common";
 
 export const DoNotCache = Symbol("DoNotCache");
 
@@ -32,21 +33,22 @@ export function processComputable<T, S extends keyof ComputableKeysOf<T>>(
     key: S
 ): asserts obj is T & { [K in S]: ProcessedComputable<UnwrapComputableType<T[S]>> } {
     const computable = obj[key];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if (isFunction(computable) && computable.length === 0 && !(computable as any)[DoNotCache]) {
+    if (
+        isFunction(computable) &&
+        computable.length === 0 &&
+        !(computable as unknown as JSXFunction)[DoNotCache]
+    ) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         obj[key] = computed(computable.bind(obj));
     } else if (isFunction(computable)) {
-        obj[key] = computable.bind(obj) as T[S];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (obj[key] as any)[DoNotCache] = true;
+        obj[key] = computable.bind(obj) as unknown as T[S];
+        (obj[key] as unknown as JSXFunction)[DoNotCache] = true;
     }
 }
 
 export function convertComputable<T>(obj: Computable<T>): ProcessedComputable<T> {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if (isFunction(obj) && !(obj as any)[DoNotCache]) {
+    if (isFunction(obj) && !(obj as unknown as JSXFunction)[DoNotCache]) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         obj = computed(obj);
diff --git a/src/util/proxies.ts b/src/util/proxies.ts
index a41b8d1..ed5d4ac 100644
--- a/src/util/proxies.ts
+++ b/src/util/proxies.ts
@@ -1,10 +1,11 @@
+import type { Persistent } from "game/persistence";
+import { NonPersistent } from "game/persistence";
 import Decimal from "util/bignum";
 
 export const ProxyState = Symbol("ProxyState");
 export const ProxyPath = Symbol("ProxyPath");
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type ProxiedWithState<T> = NonNullable<T> extends Record<PropertyKey, any>
+export type ProxiedWithState<T> = NonNullable<T> extends Record<PropertyKey, unknown>
     ? NonNullable<T> extends Decimal
         ? T
         : {
@@ -15,17 +16,34 @@ export type ProxiedWithState<T> = NonNullable<T> extends Record<PropertyKey, any
           }
     : T;
 
+export type Proxied<T> = NonNullable<T> extends Record<PropertyKey, unknown>
+    ? NonNullable<T> extends Persistent<infer S>
+        ? NonPersistent<S>
+        : NonNullable<T> extends Decimal
+        ? T
+        : {
+              [K in keyof T]: Proxied<T[K]>;
+          } & {
+              [ProxyState]: T;
+          }
+    : T;
+
 // Takes a function that returns an object and pretends to be that object
 // Note that the object is lazily calculated
 export function createLazyProxy<T extends object, S extends T>(
-    objectFunc: (baseObject: S) => T & S,
+    objectFunc: (this: S, baseObject: S) => T & S,
     baseObject: S = {} as S
 ): T {
     const obj: S & Partial<T> = baseObject;
     let calculated = false;
+    let calculating = false;
     function calculateObj(): T {
         if (!calculated) {
-            Object.assign(obj, objectFunc(obj));
+            if (calculating) {
+                console.error("Cyclical dependency detected. Cannot evaluate lazy proxy.");
+            }
+            calculating = true;
+            Object.assign(obj, objectFunc.call(obj, obj));
             calculated = true;
         }
         return obj as S & T;
@@ -37,7 +55,11 @@ export function createLazyProxy<T extends object, S extends T>(
                 return calculateObj();
             }
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            return (calculateObj() as any)[key];
+            const val = (calculateObj() as any)[key];
+            if (val != null && typeof val === "object" && NonPersistent in val) {
+                return val[NonPersistent];
+            }
+            return val;
         },
         set(target, key, value) {
             // TODO give warning about this? It should only be done with caution
@@ -56,7 +78,7 @@ export function createLazyProxy<T extends object, S extends T>(
         },
         getOwnPropertyDescriptor(target, key) {
             if (!calculated) {
-                Object.assign(obj, objectFunc(obj));
+                Object.assign(obj, objectFunc.call(obj, obj));
                 calculated = true;
             }
             return Object.getOwnPropertyDescriptor(target, key);
diff --git a/src/util/save.ts b/src/util/save.ts
index b26013e..071bdcd 100644
--- a/src/util/save.ts
+++ b/src/util/save.ts
@@ -1,13 +1,13 @@
 import projInfo from "data/projInfo.json";
 import { isHosting, room } from "data/socket";
 import { globalBus } from "game/events";
-import type { Player, PlayerData } from "game/player";
+import type { Player } from "game/player";
 import player, { stringifySave } from "game/player";
 import settings, { loadSettings } from "game/settings";
 import LZString from "lz-string";
-import { ProxyState } from "util/proxies";
+import { ref } from "vue";
 
-export function setupInitialStore(player: Partial<PlayerData> = {}): Player {
+export function setupInitialStore(player: Partial<Player> = {}): Player {
     return Object.assign(
         {
             id: `${projInfo.id}-0`,
@@ -27,11 +27,9 @@ export function setupInitialStore(player: Partial<PlayerData> = {}): Player {
     ) as Player;
 }
 
-export function save(playerData?: PlayerData): string {
-    const stringifiedSave = LZString.compressToUTF16(
-        stringifySave(playerData ?? player[ProxyState])
-    );
-    localStorage.setItem((playerData ?? player[ProxyState]).id, stringifiedSave);
+export function save(playerData?: Player): string {
+    const stringifiedSave = LZString.compressToUTF16(stringifySave(playerData ?? player));
+    localStorage.setItem((playerData ?? player).id, stringifiedSave);
     return stringifiedSave;
 }
 
@@ -70,7 +68,7 @@ export async function load(): Promise<void> {
     }
 }
 
-export function newSave(): PlayerData {
+export function newSave(): Player {
     const id = getUniqueID();
     const player = setupInitialStore({ id });
     save(player);
@@ -85,12 +83,15 @@ export function getUniqueID(): string {
         i = 0;
     do {
         id = `${projInfo.id}-${i++}`;
-    } while (localStorage.getItem(id));
+    } while (localStorage.getItem(id) != null);
     return id;
 }
 
-export async function loadSave(playerObj: Partial<PlayerData>): Promise<void> {
+export const loadingSave = ref(false);
+
+export async function loadSave(playerObj: Partial<Player>): Promise<void> {
     console.info("Loading save", playerObj);
+    loadingSave.value = true;
     const { layers, removeLayer, addLayer } = await import("game/layers");
     const { fixOldSave, getInitialLayers } = await import("data/projEntry");
 
@@ -103,13 +104,22 @@ export async function loadSave(playerObj: Partial<PlayerData>): Promise<void> {
     getInitialLayers(playerObj).forEach(layer => addLayer(layer, playerObj));
 
     playerObj = setupInitialStore(playerObj);
-    if (playerObj.offlineProd && playerObj.time) {
+    if (
+        playerObj.offlineProd &&
+        playerObj.time != null &&
+        playerObj.time &&
+        playerObj.devSpeed !== 0
+    ) {
         if (playerObj.offlineTime == undefined) playerObj.offlineTime = 0;
-        playerObj.offlineTime += (Date.now() - playerObj.time) / 1000;
+        playerObj.offlineTime += Math.min(
+            playerObj.offlineTime + (Date.now() - playerObj.time) / 1000,
+            projInfo.offlineLimit * 3600
+        );
     }
     playerObj.time = Date.now();
     if (playerObj.modVersion !== projInfo.versionNumber) {
         fixOldSave(playerObj.modVersion, playerObj);
+        playerObj.modVersion = projInfo.versionNumber;
     }
 
     Object.assign(player, playerObj);
@@ -131,14 +141,22 @@ window.onbeforeunload = () => {
 
 declare global {
     /**
-     * Augment the window object so the save function, and the hard reset function can be access from the console.
+     * Augment the window object so the save, hard reset, and deleteLowerSaves functions can be accessed from the console.
      */
     interface Window {
         save: VoidFunction;
         hardReset: VoidFunction;
+        deleteLowerSaves: VoidFunction;
     }
 }
 window.save = save;
 export const hardReset = (window.hardReset = async () => {
     await loadSave(newSave());
 });
+export const deleteLowerSaves = (window.deleteLowerSaves = () => {
+    const index = Object.values(settings.saves).indexOf(player.id) + 1;
+    Object.values(settings.saves)
+        .slice(index)
+        .forEach(id => localStorage.removeItem(id));
+    settings.saves = settings.saves.slice(0, index);
+});
diff --git a/src/util/vue.tsx b/src/util/vue.tsx
index 8b8bf09..3ba5f06 100644
--- a/src/util/vue.tsx
+++ b/src/util/vue.tsx
@@ -1,7 +1,13 @@
 import Col from "components/layout/Column.vue";
 import Row from "components/layout/Row.vue";
 import type { CoercableComponent, GenericComponent, JSXFunction } from "features/feature";
-import { Component as ComponentKey, GatherProps, jsx, Visibility } from "features/feature";
+import {
+    Component as ComponentKey,
+    GatherProps,
+    isVisible,
+    jsx,
+    Visibility
+} from "features/feature";
 import type { ProcessedComputable } from "util/computed";
 import { DoNotCache } from "util/computed";
 import type { Component, ComputedRef, DefineComponent, PropType, Ref, ShallowRef } from "vue";
@@ -15,6 +21,7 @@ import {
     unref,
     watchEffect
 } from "vue";
+import { camelToKebab } from "./common";
 
 export function coerceComponent(
     component: CoercableComponent,
@@ -147,7 +154,7 @@ export function setupHoldToClick(
 }
 
 export function getFirstFeature<
-    T extends VueFeature & { visibility: ProcessedComputable<Visibility> }
+    T extends VueFeature & { visibility: ProcessedComputable<Visibility | boolean> }
 >(
     features: T[],
     filter: (feature: T) => boolean
@@ -157,9 +164,7 @@ export function getFirstFeature<
     hasCollapsedContent: Ref<boolean>;
 } {
     const filteredFeatures = computed(() =>
-        features.filter(
-            feature => unref(feature.visibility) === Visibility.Visible && filter(feature)
-        )
+        features.filter(feature => isVisible(feature.visibility) && filter(feature))
     );
     return {
         firstFeature: computed(() => filteredFeatures.value[0]),
@@ -185,7 +190,10 @@ export function computeOptionalComponent(
     const comp = shallowRef<Component | "" | null>(null);
     watchEffect(() => {
         const currComponent = unwrapRef(component);
-        comp.value = currComponent == null ? null : coerceComponent(currComponent, defaultWrapper);
+        comp.value =
+            currComponent == "" || currComponent == null
+                ? null
+                : coerceComponent(currComponent, defaultWrapper);
     });
     return comp;
 }
@@ -234,3 +242,10 @@ export function trackHover(element: VueFeature): Ref<boolean> {
 
     return isHovered;
 }
+
+export function kebabifyObject(object: Record<string, unknown>) {
+    return Object.keys(object).reduce((acc, curr) => {
+        acc[camelToKebab(curr)] = object[curr];
+        return acc;
+    }, {} as Record<string, unknown>);
+}
diff --git a/tests/features/conversions.test.ts b/tests/features/conversions.test.ts
new file mode 100644
index 0000000..58e2e99
--- /dev/null
+++ b/tests/features/conversions.test.ts
@@ -0,0 +1,518 @@
+import {
+    createCumulativeConversion,
+    createIndependentConversion,
+    GenericConversion,
+    setupPassiveGeneration
+} from "features/conversion";
+import { createResource, Resource } from "features/resources/resource";
+import { InvertibleIntegralFormula } from "game/formulas/types";
+import { createLayer, GenericLayer } from "game/layers";
+import Decimal from "util/bignum";
+import { afterEach, beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
+import { ref, unref } from "vue";
+import "../utils";
+
+describe("Creating conversion", () => {
+    let baseResource: Resource;
+    let gainResource: Resource;
+    let formula: (x: InvertibleIntegralFormula) => InvertibleIntegralFormula;
+    beforeEach(() => {
+        baseResource = createResource(ref(40));
+        gainResource = createResource(ref(1));
+        formula = x => x.div(10).sqrt();
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    describe("Cumulative conversion", () => {
+        describe("Calculates currentGain correctly", () => {
+            let conversion: GenericConversion;
+            beforeEach(() => {
+                conversion = createCumulativeConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula
+                }));
+            });
+            test("Exactly enough", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10);
+                expect(unref(conversion.currentGain)).compare_tolerance(100);
+            });
+            test("Just under", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).sub(1);
+                expect(unref(conversion.currentGain)).compare_tolerance(99);
+            });
+            test("Just over", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).add(1);
+                expect(unref(conversion.currentGain)).compare_tolerance(100);
+            });
+            test("Zero", () => {
+                baseResource.value = Decimal.dZero;
+                expect(unref(conversion.currentGain)).compare_tolerance(0);
+            });
+        });
+        describe("Calculates actualGain correctly", () => {
+            let conversion: GenericConversion;
+            beforeEach(() => {
+                conversion = createCumulativeConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula
+                }));
+            });
+            test("Exactly enough", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10);
+                expect(unref(conversion.actualGain)).compare_tolerance(100);
+            });
+            test("Just under", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).sub(1);
+                expect(unref(conversion.actualGain)).compare_tolerance(99);
+            });
+            test("Just over", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).add(1);
+                expect(unref(conversion.actualGain)).compare_tolerance(100);
+            });
+            test("Zero", () => {
+                baseResource.value = Decimal.dZero;
+                expect(unref(conversion.actualGain)).compare_tolerance(0);
+            });
+        });
+        describe("Calculates currentAt correctly", () => {
+            let conversion: GenericConversion;
+            beforeEach(() => {
+                conversion = createCumulativeConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula
+                }));
+            });
+            test("Exactly enough", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10);
+                expect(unref(conversion.currentAt)).compare_tolerance(
+                    Decimal.pow(100, 2).times(10)
+                );
+            });
+            test("Just under", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).sub(1);
+                expect(unref(conversion.currentAt)).compare_tolerance(Decimal.pow(99, 2).times(10));
+            });
+            test("Just over", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).add(1);
+                expect(unref(conversion.currentAt)).compare_tolerance(
+                    Decimal.pow(100, 2).times(10)
+                );
+            });
+            test("Zero", () => {
+                baseResource.value = Decimal.dZero;
+                expect(unref(conversion.currentAt)).compare_tolerance(0);
+            });
+        });
+        describe("Calculates nextAt correctly", () => {
+            let conversion: GenericConversion;
+            beforeEach(() => {
+                conversion = createCumulativeConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula
+                }));
+            });
+            test("Exactly enough", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10);
+                expect(unref(conversion.nextAt)).compare_tolerance(Decimal.pow(101, 2).times(10));
+            });
+            test("Just under", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).sub(1);
+                expect(unref(conversion.nextAt)).compare_tolerance(Decimal.pow(100, 2).times(10));
+            });
+            test("Just over", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).add(1);
+                expect(unref(conversion.nextAt)).compare_tolerance(Decimal.pow(101, 2).times(10));
+            });
+            test("Zero", () => {
+                baseResource.value = Decimal.dZero;
+                expect(unref(conversion.nextAt)).compare_tolerance(Decimal.dTen);
+            });
+        });
+        test("Converts correctly", () => {
+            const conversion = createCumulativeConversion(() => ({
+                baseResource,
+                gainResource,
+                formula
+            }));
+            conversion.convert();
+            expect(baseResource.value).compare_tolerance(0);
+            expect(gainResource.value).compare_tolerance(3);
+        });
+        describe("Obeys buy max", () => {
+            test("buyMax = false", () => {
+                const conversion = createCumulativeConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula,
+                    buyMax: false
+                }));
+                expect(unref(conversion.actualGain)).compare_tolerance(1);
+            });
+            test("buyMax = true", () => {
+                const conversion = createCumulativeConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula,
+                    buyMax: true
+                }));
+                expect(unref(conversion.actualGain)).compare_tolerance(2);
+            });
+        });
+        test("Spends correctly", () => {
+            const conversion = createCumulativeConversion(() => ({
+                baseResource,
+                gainResource,
+                formula
+            }));
+            conversion.convert();
+            expect(baseResource.value).compare_tolerance(0);
+        });
+        test("Calls onConvert", () => {
+            const onConvert = vi.fn();
+            const conversion = createCumulativeConversion(() => ({
+                baseResource,
+                gainResource,
+                formula,
+                onConvert
+            }));
+            conversion.convert();
+            expect(onConvert).toHaveBeenCalled();
+        });
+    });
+
+    describe("Independent conversion", () => {
+        describe("Calculates currentGain correctly", () => {
+            let conversion: GenericConversion;
+            beforeEach(() => {
+                conversion = createIndependentConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula,
+                    buyMax: true
+                }));
+            });
+            test("Exactly enough", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10);
+                expect(unref(conversion.currentGain)).compare_tolerance(100);
+            });
+            test("Just under", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).sub(1);
+                expect(unref(conversion.currentGain)).compare_tolerance(99);
+            });
+            test("Just over", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).add(1);
+                expect(unref(conversion.currentGain)).compare_tolerance(100);
+            });
+            test("Zero", () => {
+                baseResource.value = Decimal.dZero;
+                expect(unref(conversion.currentGain)).compare_tolerance(1);
+            });
+        });
+        describe("Calculates actualGain correctly", () => {
+            let conversion: GenericConversion;
+            beforeEach(() => {
+                conversion = createIndependentConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula,
+                    buyMax: true
+                }));
+            });
+            test("Exactly enough", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10);
+                expect(unref(conversion.actualGain)).compare_tolerance(99);
+            });
+            test("Just under", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).sub(1);
+                expect(unref(conversion.actualGain)).compare_tolerance(98);
+            });
+            test("Just over", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).add(1);
+                expect(unref(conversion.actualGain)).compare_tolerance(99);
+            });
+            test("Zero", () => {
+                baseResource.value = Decimal.dZero;
+                expect(unref(conversion.actualGain)).compare_tolerance(0);
+            });
+        });
+        describe("Calculates currentAt correctly", () => {
+            let conversion: GenericConversion;
+            beforeEach(() => {
+                conversion = createIndependentConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula,
+                    buyMax: true
+                }));
+            });
+            test("Exactly enough", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10);
+                expect(unref(conversion.currentAt)).compare_tolerance(
+                    Decimal.pow(100, 2).times(10)
+                );
+            });
+            test("Just under", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).sub(1);
+                expect(unref(conversion.currentAt)).compare_tolerance(Decimal.pow(99, 2).times(10));
+            });
+            test("Just over", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).add(1);
+                expect(unref(conversion.currentAt)).compare_tolerance(
+                    Decimal.pow(100, 2).times(10)
+                );
+            });
+            test("Zero", () => {
+                baseResource.value = Decimal.dZero;
+                expect(unref(conversion.currentAt)).compare_tolerance(Decimal.pow(1, 2).times(10));
+            });
+        });
+        describe("Calculates nextAt correctly", () => {
+            let conversion: GenericConversion;
+            beforeEach(() => {
+                conversion = createIndependentConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula,
+                    buyMax: true
+                }));
+            });
+            test("Exactly enough", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10);
+                expect(unref(conversion.nextAt)).compare_tolerance(Decimal.pow(101, 2).times(10));
+            });
+            test("Just under", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).sub(1);
+                expect(unref(conversion.nextAt)).compare_tolerance(Decimal.pow(100, 2).times(10));
+            });
+            test("Just over", () => {
+                baseResource.value = Decimal.pow(100, 2).times(10).add(1);
+                expect(unref(conversion.nextAt)).compare_tolerance(Decimal.pow(101, 2).times(10));
+            });
+            test("Zero", () => {
+                baseResource.value = Decimal.dZero;
+                expect(unref(conversion.nextAt)).compare_tolerance(Decimal.pow(2, 2).times(10));
+            });
+        });
+        test("Converts correctly", () => {
+            const conversion = createIndependentConversion(() => ({
+                baseResource,
+                gainResource,
+                formula
+            }));
+            conversion.convert();
+            expect(baseResource.value).compare_tolerance(0);
+            expect(gainResource.value).compare_tolerance(2);
+        });
+        describe("Obeys buy max", () => {
+            test("buyMax = false", () => {
+                const conversion = createIndependentConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula,
+                    buyMax: false
+                }));
+                baseResource.value = 90;
+                expect(unref(conversion.actualGain)).compare_tolerance(1);
+            });
+            test("buyMax = true", () => {
+                const conversion = createIndependentConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula,
+                    buyMax: true
+                }));
+                baseResource.value = 90;
+                expect(unref(conversion.actualGain)).compare_tolerance(2);
+            });
+        });
+        test("Spends correctly", () => {
+            const conversion = createIndependentConversion(() => ({
+                baseResource,
+                gainResource,
+                formula
+            }));
+            conversion.convert();
+            expect(baseResource.value).compare_tolerance(0);
+        });
+        test("Calls onConvert", () => {
+            const onConvert = vi.fn();
+            const conversion = createIndependentConversion(() => ({
+                baseResource,
+                gainResource,
+                formula,
+                onConvert
+            }));
+            conversion.convert();
+            expect(onConvert).toHaveBeenCalled();
+        });
+    });
+    describe("Custom conversion", () => {
+        describe("Custom cumulative", () => {
+            let conversion: GenericConversion;
+            const convert = vi.fn();
+            const spend = vi.fn();
+            const onConvert = vi.fn();
+            beforeAll(() => {
+                conversion = createCumulativeConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula,
+                    currentGain() {
+                        return 10;
+                    },
+                    actualGain() {
+                        return 5;
+                    },
+                    currentAt() {
+                        return 100;
+                    },
+                    nextAt() {
+                        return 1000;
+                    },
+                    convert,
+                    spend,
+                    onConvert
+                }));
+            });
+            afterEach(() => {
+                vi.resetAllMocks();
+            });
+            test("Calculates currentGain correctly", () => {
+                expect(unref(conversion.currentGain)).compare_tolerance(10);
+            });
+            test("Calculates actualGain correctly", () => {
+                expect(unref(conversion.actualGain)).compare_tolerance(5);
+            });
+            test("Calculates currentAt correctly", () => {
+                expect(unref(conversion.currentAt)).compare_tolerance(100);
+            });
+            test("Calculates nextAt correctly", () => {
+                expect(unref(conversion.nextAt)).compare_tolerance(1000);
+            });
+            test("Calls convert", () => {
+                conversion.convert();
+                expect(convert).toHaveBeenCalled();
+            });
+            test("Calls spend and onConvert", () => {
+                conversion = createCumulativeConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula,
+                    spend,
+                    onConvert
+                }));
+                conversion.convert();
+                expect(spend).toHaveBeenCalled();
+                expect(spend).toHaveBeenCalledWith(expect.compare_tolerance(2));
+                expect(onConvert).toHaveBeenCalled();
+                expect(onConvert).toHaveBeenCalledWith(expect.compare_tolerance(2));
+            });
+        });
+        describe("Custom independent", () => {
+            let conversion: GenericConversion;
+            const convert = vi.fn();
+            const spend = vi.fn();
+            const onConvert = vi.fn();
+            beforeAll(() => {
+                conversion = createIndependentConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula,
+                    currentGain() {
+                        return 10;
+                    },
+                    actualGain() {
+                        return 5;
+                    },
+                    currentAt() {
+                        return 100;
+                    },
+                    nextAt() {
+                        return 1000;
+                    },
+                    convert,
+                    spend,
+                    onConvert
+                }));
+            });
+            afterEach(() => {
+                vi.resetAllMocks();
+            });
+            test("Calculates currentGain correctly", () => {
+                expect(unref(conversion.currentGain)).compare_tolerance(10);
+            });
+            test("Calculates actualGain correctly", () => {
+                expect(unref(conversion.actualGain)).compare_tolerance(5);
+            });
+            test("Calculates currentAt correctly", () => {
+                expect(unref(conversion.currentAt)).compare_tolerance(100);
+            });
+            test("Calculates nextAt correctly", () => {
+                expect(unref(conversion.nextAt)).compare_tolerance(1000);
+            });
+            test("Calls convert", () => {
+                conversion.convert();
+                expect(convert).toHaveBeenCalled();
+            });
+            test("Calls spend and onConvert", () => {
+                conversion = createIndependentConversion(() => ({
+                    baseResource,
+                    gainResource,
+                    formula,
+                    spend,
+                    onConvert
+                }));
+                conversion.convert();
+                expect(spend).toHaveBeenCalled();
+                expect(spend).toHaveBeenCalledWith(expect.compare_tolerance(1));
+                expect(onConvert).toHaveBeenCalled();
+                expect(onConvert).toHaveBeenCalledWith(expect.compare_tolerance(1));
+            });
+        });
+    });
+});
+
+describe("Passive generation", () => {
+    let baseResource: Resource;
+    let gainResource: Resource;
+    let formula: (x: InvertibleIntegralFormula) => InvertibleIntegralFormula;
+    let conversion: GenericConversion;
+    let layer: GenericLayer;
+    beforeEach(() => {
+        baseResource = createResource(ref(10));
+        gainResource = createResource(ref(1));
+        formula = x => x.div(10).sqrt();
+        conversion = createCumulativeConversion(() => ({
+            baseResource,
+            gainResource,
+            formula
+        }));
+        layer = createLayer("dummy", () => ({ display: "" }));
+    });
+    test("Rate is 0", () => {
+        setupPassiveGeneration(layer, conversion, 0);
+        layer.emit("preUpdate", 1);
+        expect(gainResource.value).compare_tolerance(1);
+    });
+    test("Rate is 1", () => {
+        setupPassiveGeneration(layer, conversion);
+        layer.emit("preUpdate", 1);
+        expect(gainResource.value).compare_tolerance(2);
+    });
+    test("Rate is 100", () => {
+        setupPassiveGeneration(layer, conversion, () => 100);
+        layer.emit("preUpdate", 1);
+        expect(gainResource.value).compare_tolerance(101);
+    });
+    test("Obeys cap", () => {
+        setupPassiveGeneration(layer, conversion, 100, () => 100);
+        layer.emit("preUpdate", 1);
+        expect(gainResource.value).compare_tolerance(100);
+    });
+});
diff --git a/tests/game/__snapshots__/modifiers.test.ts.snap b/tests/game/__snapshots__/modifiers.test.ts.snap
new file mode 100644
index 0000000..9822ce8
--- /dev/null
+++ b/tests/game/__snapshots__/modifiers.test.ts.snap
@@ -0,0 +1,14057 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Additive Modifiers > applies description correctly > with description 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "+",
+        "0.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Additive Modifiers > applies smallerIsBetter correctly > with smallerIsBetter true > negative value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "",
+        "-5.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Additive Modifiers > applies smallerIsBetter correctly > with smallerIsBetter true > positive value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "+",
+        "5.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "color: var(--danger)",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Additive Modifiers > applies smallerIsBetter correctly > with smallerIsBetter true > zero value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "+",
+        "0.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Additive Modifiers > applies smallerIsBetter correctly > without smallerIsBetter false > negative value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "",
+        "-5.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "color: var(--danger)",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Additive Modifiers > applies smallerIsBetter correctly > without smallerIsBetter false > positive value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "+",
+        "5.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Additive Modifiers > applies smallerIsBetter correctly > without smallerIsBetter false > zero value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "+",
+        "0.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Create modifier sections > No optional values 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "Test",
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "h3",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "br",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Base",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "1.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Test Desc",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "+",
+            "5.00",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "hr",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": "Total",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "6.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "style": {
+      "--unit": "",
+    },
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Create modifier sections > With base 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "Test",
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "h3",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "br",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Base",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "10.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Test Desc",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "+",
+            "5.00",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "hr",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": "Total",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "15.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "style": {
+      "--unit": "",
+    },
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Create modifier sections > With base 2`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "Test",
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "h3",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "br",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Based on",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "1.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Test Desc",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "+",
+            "5.00",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "hr",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": "Total",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "6.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "style": {
+      "--unit": "",
+    },
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Create modifier sections > With baseText 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "Test",
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "h3",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "br",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Based on",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "1.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Test Desc",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "+",
+            "5.00",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "hr",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": "Total",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "6.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "style": {
+      "--unit": "",
+    },
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Create modifier sections > With everything 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "Test",
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": " (",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+            "Subtitle",
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": ")",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "subtitle",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "h3",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "br",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Based on",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "10.00",
+            "/s",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Test Desc",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "+",
+            "5.00",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "hr",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": "Total",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "15.00",
+            "/s",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "color: var(--danger)",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "style": {
+      "--unit": "",
+    },
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Create modifier sections > With smallerIsBetter > smallerIsBetter = false 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "Test",
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "h3",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "br",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Base",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "1.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Test Desc",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "",
+            "-5.00",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "color: var(--danger)",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "hr",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": "Total",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "-4.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "color: var(--danger)",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "style": {
+      "--unit": "",
+    },
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Create modifier sections > With smallerIsBetter > smallerIsBetter = false 2`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "Test",
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "h3",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "br",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Base",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "1.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Test Desc",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "+",
+            "0.00",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "hr",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": "Total",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "1.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "style": {
+      "--unit": "",
+    },
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Create modifier sections > With smallerIsBetter > smallerIsBetter = false 3`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "Test",
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "h3",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "br",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Base",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "1.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Test Desc",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "+",
+            "5.00",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "hr",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": "Total",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "6.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "style": {
+      "--unit": "",
+    },
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Create modifier sections > With smallerIsBetter > smallerIsBetter = true 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "Test",
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "h3",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "br",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Base",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "1.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Test Desc",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "",
+            "-5.00",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "color: var(--danger)",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "hr",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": "Total",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "-4.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "style": {
+      "--unit": "",
+    },
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Create modifier sections > With smallerIsBetter > smallerIsBetter = true 2`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "Test",
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "h3",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "br",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Base",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "1.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Test Desc",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "+",
+            "0.00",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "hr",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": "Total",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "1.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "style": {
+      "--unit": "",
+    },
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Create modifier sections > With smallerIsBetter > smallerIsBetter = true 3`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "Test",
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "h3",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "br",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Base",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "1.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Test Desc",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "+",
+            "5.00",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "hr",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": "Total",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "6.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "color: var(--danger)",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "style": {
+      "--unit": "",
+    },
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Create modifier sections > With subtitle 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "Test",
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": " (",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+            "Subtitle",
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": ")",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "subtitle",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "h3",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "br",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Base",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "1.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Test Desc",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "+",
+            "5.00",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "hr",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": "Total",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "6.00",
+            undefined,
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "style": {
+      "--unit": "",
+    },
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Create modifier sections > With unit 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        "Test",
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "h3",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "br",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Base",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "1.00",
+            "/s",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": [
+                "Test Desc",
+              ],
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 16,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Fragment),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "+",
+            "5.00",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": null,
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": null,
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 1,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "hr",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            {
+              "__v_isVNode": true,
+              "__v_skip": true,
+              "anchor": null,
+              "appContext": null,
+              "children": "Total",
+              "component": null,
+              "ctx": null,
+              "dirs": null,
+              "dynamicChildren": null,
+              "dynamicProps": null,
+              "el": null,
+              "key": null,
+              "patchFlag": 0,
+              "props": null,
+              "ref": null,
+              "scopeId": null,
+              "shapeFlag": 8,
+              "slotScopeIds": null,
+              "ssContent": null,
+              "ssFallback": null,
+              "staticCount": 0,
+              "suspense": null,
+              "target": null,
+              "targetAnchor": null,
+              "transition": null,
+              "type": Symbol(Text),
+            },
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-description",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "6.00",
+            "/s",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": {
+            "class": "modifier-amount",
+            "style": "",
+          },
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 17,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": "span",
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-container",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "div",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "style": {
+      "--unit": "",
+    },
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Exponential Modifiers > applies description correctly > with description 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": "^",
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 8,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Text),
+        },
+        "0.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "color: var(--danger)",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Exponential Modifiers > applies smallerIsBetter correctly > with smallerIsBetter true > negative value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": "^",
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 8,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Text),
+        },
+        "-5.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Exponential Modifiers > applies smallerIsBetter correctly > with smallerIsBetter true > positive value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": "^",
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 8,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Text),
+        },
+        "5.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "color: var(--danger)",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Exponential Modifiers > applies smallerIsBetter correctly > with smallerIsBetter true > zero value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": "^",
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 8,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Text),
+        },
+        "0.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Exponential Modifiers > applies smallerIsBetter correctly > without smallerIsBetter false > negative value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": "^",
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 8,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Text),
+        },
+        "-5.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "color: var(--danger)",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Exponential Modifiers > applies smallerIsBetter correctly > without smallerIsBetter false > positive value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": "^",
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 8,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Text),
+        },
+        "5.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Exponential Modifiers > applies smallerIsBetter correctly > without smallerIsBetter false > zero value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+        null,
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": "^",
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 8,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Text),
+        },
+        "0.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "color: var(--danger)",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Multiplicative Modifiers > applies description correctly > with description 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": "×",
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 8,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Text),
+        },
+        "0.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "color: var(--danger)",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Multiplicative Modifiers > applies smallerIsBetter correctly > with smallerIsBetter true > negative value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": "×",
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 8,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Text),
+        },
+        "-5.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Multiplicative Modifiers > applies smallerIsBetter correctly > with smallerIsBetter true > positive value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": "×",
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 8,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Text),
+        },
+        "5.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "color: var(--danger)",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Multiplicative Modifiers > applies smallerIsBetter correctly > with smallerIsBetter true > zero value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": "×",
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 8,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Text),
+        },
+        "0.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Multiplicative Modifiers > applies smallerIsBetter correctly > without smallerIsBetter false > negative value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": "×",
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 8,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Text),
+        },
+        "-5.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "color: var(--danger)",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Multiplicative Modifiers > applies smallerIsBetter correctly > without smallerIsBetter false > positive value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": "×",
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 8,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Text),
+        },
+        "5.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Multiplicative Modifiers > applies smallerIsBetter correctly > without smallerIsBetter false > zero value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": [
+            "test",
+          ],
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 16,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Fragment),
+        },
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-description",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+    {
+      "__v_isVNode": true,
+      "__v_skip": true,
+      "anchor": null,
+      "appContext": null,
+      "children": [
+        {
+          "__v_isVNode": true,
+          "__v_skip": true,
+          "anchor": null,
+          "appContext": null,
+          "children": "×",
+          "component": null,
+          "ctx": null,
+          "dirs": null,
+          "dynamicChildren": null,
+          "dynamicProps": null,
+          "el": null,
+          "key": null,
+          "patchFlag": 0,
+          "props": null,
+          "ref": null,
+          "scopeId": null,
+          "shapeFlag": 8,
+          "slotScopeIds": null,
+          "ssContent": null,
+          "ssFallback": null,
+          "staticCount": 0,
+          "suspense": null,
+          "target": null,
+          "targetAnchor": null,
+          "transition": null,
+          "type": Symbol(Text),
+        },
+        "0.00",
+      ],
+      "component": null,
+      "ctx": null,
+      "dirs": null,
+      "dynamicChildren": null,
+      "dynamicProps": null,
+      "el": null,
+      "key": null,
+      "patchFlag": 0,
+      "props": {
+        "class": "modifier-amount",
+        "style": "color: var(--danger)",
+      },
+      "ref": null,
+      "scopeId": null,
+      "shapeFlag": 17,
+      "slotScopeIds": null,
+      "ssContent": null,
+      "ssFallback": null,
+      "staticCount": 0,
+      "suspense": null,
+      "target": null,
+      "targetAnchor": null,
+      "transition": null,
+      "type": "span",
+    },
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": {
+    "class": "modifier-container",
+  },
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 17,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": "div",
+}
+`;
+
+exports[`Sequential Modifiers > applies description correctly > with both 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    [
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "×",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "0.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "color: var(--danger)",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+    ],
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": null,
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 16,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": Symbol(Fragment),
+}
+`;
+
+exports[`Sequential Modifiers > applies description correctly > with description 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    [
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              "+",
+              "0.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "×",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "0.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "color: var(--danger)",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+              null,
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "^",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "0.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "color: var(--danger)",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+    ],
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": null,
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 16,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": Symbol(Fragment),
+}
+`;
+
+exports[`Sequential Modifiers > applies smallerIsBetter correctly > with both > negative value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    [
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              "",
+              "-5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              "",
+              "-5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "color: var(--danger)",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+    ],
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": null,
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 16,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": Symbol(Fragment),
+}
+`;
+
+exports[`Sequential Modifiers > applies smallerIsBetter correctly > with both > positive value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    [
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              "+",
+              "5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "color: var(--danger)",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              "+",
+              "5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+    ],
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": null,
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 16,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": Symbol(Fragment),
+}
+`;
+
+exports[`Sequential Modifiers > applies smallerIsBetter correctly > with both > zero value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    [
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              "+",
+              "0.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              "+",
+              "0.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+    ],
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": null,
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 16,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": Symbol(Fragment),
+}
+`;
+
+exports[`Sequential Modifiers > applies smallerIsBetter correctly > with smallerIsBetter true > negative value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    [
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              "",
+              "-5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "×",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "-5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+              null,
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "^",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "-5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+    ],
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": null,
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 16,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": Symbol(Fragment),
+}
+`;
+
+exports[`Sequential Modifiers > applies smallerIsBetter correctly > with smallerIsBetter true > positive value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    [
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              "+",
+              "5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "color: var(--danger)",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "×",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "color: var(--danger)",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+              null,
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "^",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "color: var(--danger)",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+    ],
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": null,
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 16,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": Symbol(Fragment),
+}
+`;
+
+exports[`Sequential Modifiers > applies smallerIsBetter correctly > with smallerIsBetter true > zero value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    [
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              "+",
+              "0.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "×",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "0.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+              null,
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "^",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "0.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+    ],
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": null,
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 16,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": Symbol(Fragment),
+}
+`;
+
+exports[`Sequential Modifiers > applies smallerIsBetter correctly > without smallerIsBetter false > negative value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    [
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              "",
+              "-5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "color: var(--danger)",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "×",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "-5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "color: var(--danger)",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+              null,
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "^",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "-5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "color: var(--danger)",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+    ],
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": null,
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 16,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": Symbol(Fragment),
+}
+`;
+
+exports[`Sequential Modifiers > applies smallerIsBetter correctly > without smallerIsBetter false > positive value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    [
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              "+",
+              "5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "×",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+              null,
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "^",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "5.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+    ],
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": null,
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 16,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": Symbol(Fragment),
+}
+`;
+
+exports[`Sequential Modifiers > applies smallerIsBetter correctly > without smallerIsBetter false > zero value 1`] = `
+{
+  "__v_isVNode": true,
+  "__v_skip": true,
+  "anchor": null,
+  "appContext": null,
+  "children": [
+    [
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              "+",
+              "0.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "×",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "0.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "color: var(--danger)",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+      {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": [
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  "test",
+                ],
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 16,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Fragment),
+              },
+              null,
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-description",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+          {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "^",
+                "component": null,
+                "ctx": null,
+                "dirs": null,
+                "dynamicChildren": null,
+                "dynamicProps": null,
+                "el": null,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(Text),
+              },
+              "0.00",
+            ],
+            "component": null,
+            "ctx": null,
+            "dirs": null,
+            "dynamicChildren": null,
+            "dynamicProps": null,
+            "el": null,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "modifier-amount",
+              "style": "color: var(--danger)",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "span",
+          },
+        ],
+        "component": null,
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": null,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "class": "modifier-container",
+        },
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 17,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": "div",
+      },
+    ],
+  ],
+  "component": null,
+  "ctx": null,
+  "dirs": null,
+  "dynamicChildren": null,
+  "dynamicProps": null,
+  "el": null,
+  "key": null,
+  "patchFlag": 0,
+  "props": null,
+  "ref": null,
+  "scopeId": null,
+  "shapeFlag": 16,
+  "slotScopeIds": null,
+  "ssContent": null,
+  "ssFallback": null,
+  "staticCount": 0,
+  "suspense": null,
+  "target": null,
+  "targetAnchor": null,
+  "transition": null,
+  "type": Symbol(Fragment),
+}
+`;
diff --git a/tests/game/formulas.test.ts b/tests/game/formulas.test.ts
new file mode 100644
index 0000000..98bb82d
--- /dev/null
+++ b/tests/game/formulas.test.ts
@@ -0,0 +1,1277 @@
+import { createResource, Resource } from "features/resources/resource";
+import Formula, {
+    calculateCost,
+    calculateMaxAffordable,
+    unrefFormulaSource
+} from "game/formulas/formulas";
+import type { GenericFormula, IntegrableFormula, InvertibleFormula } from "game/formulas/types";
+import Decimal, { DecimalSource } from "util/bignum";
+import { beforeAll, describe, expect, test } from "vitest";
+import { ref } from "vue";
+import "../utils";
+import { InvertibleIntegralFormula } from "game/formulas/types";
+
+type FormulaFunctions = keyof GenericFormula & keyof typeof Formula & keyof typeof Decimal;
+
+const testValues = [-2, "0", new Decimal(10.5)] as const;
+
+const invertibleZeroParamFunctionNames = [
+    "round",
+    "floor",
+    "ceil",
+    "trunc",
+    "neg",
+    "recip",
+    "log10",
+    "log2",
+    "ln",
+    "pow10",
+    "exp",
+    "sqr",
+    "sqrt",
+    "cube",
+    "cbrt",
+    "lambertw",
+    "ssqrt",
+    "sin",
+    "cos",
+    "tan",
+    "asin",
+    "acos",
+    "atan",
+    "sinh",
+    "cosh",
+    "tanh",
+    "asinh",
+    "acosh",
+    "atanh",
+    "slog",
+    "tetrate",
+    "iteratedexp"
+] as const;
+const nonInvertibleZeroParamFunctionNames = [
+    "abs",
+    "sign",
+    "pLog10",
+    "absLog10",
+    "factorial",
+    "gamma",
+    "lngamma"
+] as const;
+const integrableZeroParamFunctionNames = [
+    "neg",
+    "recip",
+    "log10",
+    "log2",
+    "ln",
+    "pow10",
+    "exp",
+    "sqr",
+    "sqrt",
+    "cube",
+    "cbrt",
+    "sin",
+    "cos",
+    "tan",
+    "asin",
+    "acos",
+    "atan",
+    "sinh",
+    "cosh",
+    "tanh",
+    "asinh",
+    "acosh",
+    "atanh"
+] as const;
+const nonIntegrableZeroParamFunctionNames = [
+    ...nonInvertibleZeroParamFunctionNames,
+    "round",
+    "floor",
+    "ceil",
+    "trunc",
+    "lambertw",
+    "ssqrt"
+] as const;
+const invertibleIntegralZeroPramFunctionNames = [
+    "recip",
+    "log10",
+    "log2",
+    "ln",
+    "pow10",
+    "sqr",
+    "sqrt",
+    "cube",
+    "cbrt",
+    "neg",
+    "exp",
+    "sin",
+    "cos",
+    "tan",
+    "sinh",
+    "cosh",
+    "tanh"
+] as const;
+const nonInvertibleIntegralZeroPramFunctionNames = [
+    ...nonIntegrableZeroParamFunctionNames,
+    "asin",
+    "acos",
+    "atan",
+    "asinh",
+    "acosh",
+    "atanh"
+] as const;
+
+const invertibleOneParamFunctionNames = [
+    "add",
+    "sub",
+    "mul",
+    "div",
+    "log",
+    "pow",
+    "root",
+    "layeradd"
+] as const;
+const nonInvertibleOneParamFunctionNames = ["layeradd10"] as const;
+const integrableOneParamFunctionNames = ["add", "sub", "mul", "div", "log", "pow", "root"] as const;
+const nonIntegrableOneParamFunctionNames = [...nonInvertibleOneParamFunctionNames, "slog"] as const;
+const invertibleIntegralOneParamFunctionNames = integrableOneParamFunctionNames;
+const nonInvertibleIntegralOneParamFunctionNames = nonIntegrableOneParamFunctionNames;
+
+const nonInvertibleTwoParamFunctionNames = ["iteratedlog", "pentate"] as const;
+const nonIntegrableTwoParamFunctionNames = nonInvertibleTwoParamFunctionNames;
+const nonInvertibleIntegralTwoParamFunctionNames = nonIntegrableTwoParamFunctionNames;
+
+describe("Formula Equality Checking", () => {
+    describe("Equality Checks", () => {
+        test("Equals", () => expect(Formula.add(1, 1).equals(Formula.add(1, 1))).toBe(true));
+        test("Not Equals due to inputs", () =>
+            expect(Formula.add(1, 1).equals(Formula.add(1, 0))).toBe(false));
+        test("Not Equals due to functions", () =>
+            expect(Formula.add(1, 1).equals(Formula.sub(1, 1))).toBe(false));
+        test("Not Equals due to hasVariable", () =>
+            expect(Formula.constant(1).equals(Formula.variable(1))).toBe(false));
+    });
+
+    describe("Formula aliases", () => {
+        function testAliases<T extends FormulaFunctions>(
+            aliases: T[],
+            args: Parameters<typeof Formula[T]>
+        ) {
+            describe(aliases[0], () => {
+                let formula: GenericFormula;
+                beforeAll(() => {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    formula = Formula[aliases[0]](...args);
+                });
+
+                aliases.slice(1).forEach(alias => {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    test(alias, () => expect(Formula[alias](...args).equals(formula)).toBe(true));
+                });
+            });
+        }
+        testAliases(["neg", "negate", "negated"], [1]);
+        testAliases(["recip", "reciprocal", "reciprocate"], [1]);
+        testAliases(["sign", "sgn"], [1]);
+        testAliases(["add", "plus"], [1, 1]);
+        testAliases(["sub", "subtract", "minus"], [1, 1]);
+        testAliases(["mul", "multiply", "times"], [1, 1]);
+        testAliases(["div", "divide"], [1, 1]);
+        testAliases(["log", "logarithm"], [1, 1]);
+    });
+
+    describe("Instance vs Static methods", () => {
+        let formula: GenericFormula;
+        beforeAll(() => {
+            formula = Formula.constant(10);
+        });
+        [...invertibleZeroParamFunctionNames, ...nonInvertibleZeroParamFunctionNames].forEach(
+            name => {
+                test(name, () => {
+                    const instanceFormula = formula[name]();
+                    const staticFormula = Formula[name](formula);
+                    expect(instanceFormula.equals(staticFormula)).toBe(true);
+                });
+            }
+        );
+
+        [...invertibleOneParamFunctionNames, ...nonInvertibleOneParamFunctionNames].forEach(
+            name => {
+                test(name, () => {
+                    const instanceFormula = formula[name](10);
+                    const staticFormula = Formula[name](formula, 10);
+                    expect(instanceFormula.equals(staticFormula)).toBe(true);
+                });
+            }
+        );
+    });
+});
+
+describe("Creating Formulas", () => {
+    describe("Constants", () => {
+        function testConstant(
+            desc: string,
+            formulaFunc: () => InvertibleFormula,
+            expectedValue: DecimalSource = 10
+        ) {
+            describe(desc, () => {
+                let formula: GenericFormula;
+                beforeAll(() => {
+                    formula = formulaFunc();
+                });
+                test("Is not invertible", () => expect(formula.isInvertible()).toBe(false));
+                test("Is not integrable", () => expect(formula.isIntegrable()).toBe(false));
+                test("Integral is not invertible", () =>
+                    expect(formula.isIntegralInvertible()).toBe(false));
+                test("Is not marked as having a variable", () =>
+                    expect(formula.hasVariable()).toBe(false));
+                test("Evaluates correctly", () =>
+                    expect(formula.evaluate()).compare_tolerance(expectedValue));
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                /* @ts-ignore */
+                test("Invert errors", () => expect(() => formula.invert(25)).toLogError());
+                test("Integrate errors", () =>
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    /* @ts-ignore */
+                    expect(() => formula.evaluateIntegral()).toLogError());
+                test("Invert integral errors", () =>
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    /* @ts-ignore */
+                    expect(() => formula.invertIntegral(25)).toLogError());
+            });
+        }
+        testConstant("number", () => Formula.constant(10));
+        testConstant("string", () => Formula.constant("10"));
+        testConstant("decimal", () => Formula.constant(new Decimal("1e400")), "1e400");
+        testConstant("ref", () => Formula.constant(ref(10)));
+    });
+
+    function checkFormula<T extends FormulaFunctions>(
+        functionName: T,
+        args: Readonly<Parameters<typeof Formula[T]>>
+    ) {
+        let formula: GenericFormula;
+        beforeAll(() => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            formula = Formula[functionName](...args);
+        });
+        // None of these formulas have variables, so they should all behave the same
+        test("Is not marked as having a variable", () => expect(formula.hasVariable()).toBe(false));
+        test("Is not invertible", () => expect(formula.isInvertible()).toBe(false));
+        test(`Formula errors if trying to invert`, () =>
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            /* @ts-ignore */
+            expect(() => formula.invert(10)).toLogError());
+        test("Is not integrable", () => expect(formula.isIntegrable()).toBe(false));
+        test("Has a non-invertible integral", () =>
+            expect(formula.isIntegralInvertible()).toBe(false));
+    }
+
+    // Utility function that will test all the different
+    // It's a lot of tests, but I'd rather be exhaustive
+    function testFormulaCall<T extends FormulaFunctions>(
+        functionName: T,
+        args: Readonly<Parameters<typeof Formula[T]>>
+    ) {
+        if ((functionName === "slog" || functionName === "layeradd") && args[0] === -1) {
+            // These cases in particular take a long time, so skip them
+            // We still have plenty of coverage
+            return;
+        }
+        let testName = functionName + "(";
+        for (let i = 0; i < args.length; i++) {
+            if (i !== 0) {
+                testName += ", ";
+            }
+            testName += args[i];
+        }
+        testName += ") evaluates correctly";
+        test(testName, () => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            const formula = Formula[functionName](...args);
+
+            try {
+                const expectedEvaluation = Decimal[functionName](
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    ...args.map(i => unrefFormulaSource(i))
+                );
+                if (expectedEvaluation != null) {
+                    expect(formula.evaluate()).compare_tolerance(expectedEvaluation);
+                }
+            } catch {
+                // If this is an invalid Decimal operation, then ignore this test case
+            }
+        });
+    }
+
+    describe("0-param", () => {
+        [...invertibleZeroParamFunctionNames, ...nonInvertibleZeroParamFunctionNames].forEach(
+            names =>
+                describe(names, () => {
+                    checkFormula(names, [0] as const);
+                    testValues.forEach(i => testFormulaCall(names, [i] as const));
+                })
+        );
+    });
+    describe("1-param", () => {
+        (
+            [
+                ...invertibleOneParamFunctionNames,
+                ...nonInvertibleOneParamFunctionNames,
+                "max",
+                "min",
+                "maxabs",
+                "minabs",
+                "clampMin",
+                "clampMax"
+            ] as const
+        ).forEach(names =>
+            describe(names, () => {
+                checkFormula(names, [0, 0] as const);
+                testValues.forEach(i =>
+                    testValues.forEach(j => testFormulaCall(names, [i, j] as const))
+                );
+            })
+        );
+    });
+    describe("2-param", () => {
+        ([...nonInvertibleTwoParamFunctionNames, "clamp"] as const).forEach(names =>
+            describe(names, () => {
+                checkFormula(names, [0, 0, 0] as const);
+                testValues.forEach(i =>
+                    testValues.forEach(j =>
+                        testValues.forEach(k => testFormulaCall(names, [i, j, k] as const))
+                    )
+                );
+            })
+        );
+    });
+});
+
+describe("Variables", () => {
+    let variable: GenericFormula;
+    let constant: GenericFormula;
+    beforeAll(() => {
+        variable = Formula.variable(10);
+        constant = Formula.constant(10);
+    });
+
+    test("Created variable is marked as a variable", () =>
+        expect(variable.hasVariable()).toBe(true));
+    test("evaluate() returns variable's value", () =>
+        expect(variable.evaluate()).compare_tolerance(10));
+    test("evaluate(variable) overrides variable value", () =>
+        expect(variable.add(10).evaluate(20)).compare_tolerance(30));
+
+    test("Nested variable is marked as having a variable", () =>
+        expect(variable.add(10).div(3).pow(2).hasVariable()).toBe(true));
+    test("Nested non-variable is marked as not having a variable", () =>
+        expect(constant.add(10).div(3).pow(2).hasVariable()).toBe(false));
+});
+
+describe("Inverting", () => {
+    let variable: IntegrableFormula;
+    let constant: GenericFormula;
+    beforeAll(() => {
+        variable = Formula.variable(10);
+        constant = Formula.constant(10);
+    });
+
+    test("variable.invert() is pass-through", () =>
+        expect(variable.invert(100)).compare_tolerance(100));
+
+    describe("Invertible Formulas correctly calculate when they contain a variable", () => {
+        function checkFormula(formula: GenericFormula, expectedBool = true) {
+            expect(formula.isInvertible()).toBe(expectedBool);
+            expect(formula.hasVariable()).toBe(expectedBool);
+        }
+        invertibleZeroParamFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var) is marked as invertible and having a variable`, () =>
+                    checkFormula(Formula[name](variable)));
+            });
+        });
+        invertibleOneParamFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var, const) is marked as invertible and having a variable`, () =>
+                    checkFormula(Formula[name](variable, constant)));
+                test(`${name}(const, var) is marked as invertible and having a variable`, () =>
+                    checkFormula(Formula[name](constant, variable)));
+                test(`${name}(var, var) is marked as not invertible and not having a variable`, () =>
+                    checkFormula(Formula[name](variable, variable), false));
+            });
+        });
+    });
+
+    describe("Non-invertible formulas marked as such", () => {
+        function checkFormula(formula: GenericFormula) {
+            expect(formula.isInvertible()).toBe(false);
+            expect(formula.isIntegrable()).toBe(false);
+            expect(formula.isIntegralInvertible()).toBe(false);
+        }
+        nonInvertibleZeroParamFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var) is marked as not invertible`, () =>
+                    checkFormula(Formula[name](variable)));
+            });
+        });
+        nonInvertibleOneParamFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var, const) is marked as not invertible`, () =>
+                    checkFormula(Formula[name](variable, constant)));
+                test(`${name}(const, var) is marked as not invertible`, () =>
+                    checkFormula(Formula[name](constant, variable)));
+                test(`${name}(var, var) is marked as not invertible`, () =>
+                    checkFormula(Formula[name](variable, variable)));
+            });
+        });
+        nonInvertibleTwoParamFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var, const, const) is marked as not invertible`, () =>
+                    checkFormula(Formula[name](variable, constant, constant)));
+                test(`${name}(const, var, const) is marked as not invertible`, () =>
+                    checkFormula(Formula[name](constant, variable, constant)));
+                test(`${name}(const, const, var) is marked as not invertible`, () =>
+                    checkFormula(Formula[name](constant, constant, variable)));
+                test(`${name}(var, var, const) is marked as not invertible`, () =>
+                    checkFormula(Formula[name](variable, variable, constant)));
+                test(`${name}(var, const, var) is marked as not invertible`, () =>
+                    checkFormula(Formula[name](variable, constant, variable)));
+                test(`${name}(const, var, var) is marked as not invertible`, () =>
+                    checkFormula(Formula[name](constant, variable, variable)));
+                test(`${name}(var, var, var) is marked as not invertible`, () =>
+                    checkFormula(Formula[name](variable, variable, variable)));
+            });
+        });
+    });
+
+    describe("Inverting calculates the value of the variable", () => {
+        let variable: IntegrableFormula;
+        let constant: IntegrableFormula;
+        beforeAll(() => {
+            variable = Formula.variable(2);
+            constant = Formula.constant(3);
+        });
+        invertibleOneParamFunctionNames.forEach(name =>
+            describe(name, () => {
+                test(`${name}(var, const).invert()`, () => {
+                    const formula = Formula[name](variable, constant);
+                    const result = formula.evaluate();
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    expect(formula.invert!(result)).compare_tolerance(2);
+                });
+                if (name !== "layeradd") {
+                    test(`${name}(const, var).invert()`, () => {
+                        const formula = Formula[name](constant, variable);
+                        const result = formula.evaluate();
+                        expect(formula.invert(result)).compare_tolerance(2);
+                    });
+                }
+            })
+        );
+    });
+
+    describe("Inverting pass-throughs", () => {
+        test("max", () => expect(Formula.max(variable, constant).invert(10)).compare_tolerance(10));
+        test("min", () => expect(Formula.min(variable, constant).invert(10)).compare_tolerance(10));
+        test("minabs", () =>
+            expect(Formula.minabs(variable, constant).invert(10)).compare_tolerance(10));
+        test("maxabs", () =>
+            expect(Formula.maxabs(variable, constant).invert(10)).compare_tolerance(10));
+        test("clampMax", () =>
+            expect(Formula.clampMax(variable, constant).invert(10)).compare_tolerance(10));
+        test("clampMin", () =>
+            expect(Formula.clampMin(variable, constant).invert(10)).compare_tolerance(10));
+        test("clamp", () =>
+            expect(Formula.clamp(variable, constant, constant).invert(10)).compare_tolerance(10));
+    });
+
+    test("Inverting nested formulas", () => {
+        const formula = Formula.add(variable, constant).times(constant).floor();
+        expect(formula.invert(100)).compare_tolerance(0);
+    });
+
+    describe("Inverting with non-invertible sections", () => {
+        test("Non-invertible constant", () => {
+            const formula = Formula.add(variable, constant.sign());
+            expect(formula.isInvertible()).toBe(true);
+            expect(() => formula.invert(10)).not.toLogError();
+        });
+        test("Non-invertible variable", () => {
+            const formula = Formula.add(variable.sign(), constant);
+            expect(formula.isInvertible()).toBe(false);
+            expect(() => formula.invert(10)).toLogError();
+        });
+    });
+});
+
+describe("Integrating", () => {
+    let variable: IntegrableFormula;
+    let constant: IntegrableFormula;
+    beforeAll(() => {
+        variable = Formula.variable(ref(10));
+        constant = Formula.constant(10);
+    });
+
+    test("variable.evaluateIntegral() calculates correctly", () =>
+        expect(variable.evaluateIntegral()).compare_tolerance(Decimal.pow(10, 2).div(2)));
+    test("variable.evaluateIntegral(variable) overrides variable value", () =>
+        expect(variable.evaluateIntegral(20)).compare_tolerance(Decimal.pow(20, 2).div(2)));
+
+    describe("Integrable functions marked as such", () => {
+        function checkFormula(formula: IntegrableFormula) {
+            expect(formula.isIntegrable()).toBe(true);
+            expect(() => formula.evaluateIntegral()).to.not.throw();
+        }
+        integrableZeroParamFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var) is marked as integrable`, () =>
+                    checkFormula(Formula[name](variable)));
+            });
+        });
+        integrableOneParamFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var, const) is marked as integrable`, () =>
+                    checkFormula(Formula[name](variable, constant)));
+                if (name !== "log" && name !== "root") {
+                    test(`${name}(const, var) is marked as integrable`, () =>
+                        checkFormula(Formula[name](constant, variable)));
+                }
+                test(`${name}(var, var) is marked as not integrable`, () =>
+                    expect(Formula[name](variable, variable).isIntegrable()).toBe(false));
+            });
+        });
+    });
+
+    describe("Non-Integrable functions marked as such", () => {
+        function checkFormula(formula: GenericFormula) {
+            expect(formula.isIntegrable()).toBe(false);
+        }
+        nonIntegrableZeroParamFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var) is marked as not integrable`, () =>
+                    checkFormula(Formula[name](variable)));
+            });
+        });
+        nonIntegrableOneParamFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var, const) is marked as not integrable`, () =>
+                    checkFormula(Formula[name](variable, constant)));
+                test(`${name}(const, var) is marked as not integrable`, () =>
+                    checkFormula(Formula[name](constant, variable)));
+                test(`${name}(var, var) is marked as not integrable`, () =>
+                    checkFormula(Formula[name](variable, variable)));
+            });
+        });
+        nonIntegrableTwoParamFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var, const, const) is marked as not integrable`, () =>
+                    checkFormula(Formula[name](variable, constant, constant)));
+                test(`${name}(const, var, const) is marked as not integrable`, () =>
+                    checkFormula(Formula[name](constant, variable, constant)));
+                test(`${name}(const, const, var) is marked as not integrable`, () =>
+                    checkFormula(Formula[name](constant, constant, variable)));
+                test(`${name}(var, var, const) is marked as not integrable`, () =>
+                    checkFormula(Formula[name](variable, variable, constant)));
+                test(`${name}(var, const, var) is marked as not integrable`, () =>
+                    checkFormula(Formula[name](variable, constant, variable)));
+                test(`${name}(const, var, var) is marked as not integrable`, () =>
+                    checkFormula(Formula[name](constant, variable, variable)));
+                test(`${name}(var, var, var) is marked as not integrable`, () =>
+                    checkFormula(Formula[name](variable, variable, variable)));
+            });
+        });
+    });
+
+    // TODO I think these tests will require writing at least one known example for every function
+    describe.todo("Integrable formulas integrate correctly");
+
+    test("Integrating nested formulas", () => {
+        const formula = Formula.add(variable, constant).times(constant).pow(2).times(30).add(10);
+        const actualCost = new Array(10)
+            .fill(null)
+            .reduce((acc, _, i) => acc.add(formula.evaluate(i)), new Decimal(0));
+        // Check if the calculated cost is within 10% of the actual cost,
+        // because this is an approximation
+        expect(
+            Decimal.sub(
+                actualCost,
+                Decimal.add(formula.evaluateIntegral(), formula.calculateConstantOfIntegration())
+            )
+                .abs()
+                .div(actualCost)
+                .toNumber()
+        ).toBeLessThan(0.1);
+    });
+
+    test("Integrating nested formulas with overidden variable", () => {
+        const formula = Formula.add(variable, constant).times(constant).pow(2).times(30).add(10);
+        const actualCost = new Array(20)
+            .fill(null)
+            .reduce((acc, _, i) => acc.add(formula.evaluate(i)), new Decimal(0));
+        // Check if the calculated cost is within 10% of the actual cost,
+        // because this is an approximation
+        expect(
+            Decimal.sub(
+                actualCost,
+                Decimal.add(formula.evaluateIntegral(20), formula.calculateConstantOfIntegration())
+            )
+                .abs()
+                .div(actualCost)
+                .toNumber()
+        ).toBeLessThan(0.1);
+    });
+
+    test("Integrating nested complex formulas", () => {
+        const formula = Formula.pow(1.05, variable).times(100).pow(0.5);
+        expect(() => formula.evaluateIntegral()).toLogError();
+    });
+
+    describe("Integrating with non-integrable sections", () => {
+        test("Non-integrable constant", () => {
+            const formula = Formula.add(variable, constant.ceil());
+            expect(formula.isIntegrable()).toBe(true);
+            expect(() => formula.evaluateIntegral()).not.toLogError();
+        });
+        test("Non-integrable variable", () => {
+            const formula = Formula.add(variable.ceil(), constant);
+            expect(formula.isIntegrable()).toBe(false);
+            expect(() => formula.evaluateIntegral()).toLogError();
+        });
+    });
+});
+
+describe("Inverting integrals", () => {
+    let variable: InvertibleIntegralFormula;
+    let constant: InvertibleIntegralFormula;
+    beforeAll(() => {
+        variable = Formula.variable(10);
+        constant = Formula.constant(10);
+    });
+
+    test("variable.invertIntegral() calculates correctly", () =>
+        expect(variable.invertIntegral(20)).compare_tolerance(
+            Decimal.sqrt(20).times(Decimal.sqrt(2))
+        ));
+
+    describe("Invertible Integral functions marked as such", () => {
+        function checkFormula(formula: InvertibleIntegralFormula) {
+            expect(formula.isIntegralInvertible()).toBe(true);
+            expect(() => formula.invertIntegral(10)).not.toLogError();
+        }
+        invertibleIntegralZeroPramFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var) is marked as having an invertible integral`, () =>
+                    checkFormula(Formula[name](variable)));
+            });
+        });
+        invertibleIntegralOneParamFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var, const) is marked as having an invertible integral`, () =>
+                    checkFormula(Formula[name](variable, constant)));
+                if (name !== "log" && name !== "root") {
+                    test(`${name}(const, var) is marked as having an invertible integral`, () =>
+                        checkFormula(Formula[name](constant, variable)));
+                }
+                test(`${name}(var, var) is marked as not having an invertible integral`, () => {
+                    const formula = Formula[name](variable, variable);
+                    expect(formula.isIntegralInvertible()).toBe(false);
+                    expect(() => formula.invertIntegral(10)).toLogError();
+                });
+            });
+        });
+    });
+
+    describe("Non-Invertible integral functions marked as such", () => {
+        function checkFormula(formula: GenericFormula) {
+            expect(formula.isIntegralInvertible()).toBe(false);
+        }
+        nonInvertibleIntegralZeroPramFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var) is marked as not having an invertible integral`, () =>
+                    checkFormula(Formula[name](variable)));
+            });
+        });
+        nonInvertibleIntegralOneParamFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var, const) is marked as not having an invertible integral`, () =>
+                    checkFormula(Formula[name](variable, constant)));
+                test(`${name}(const, var) is marked as not having an invertible integral`, () =>
+                    checkFormula(Formula[name](constant, variable)));
+                test(`${name}(var, var) is marked as not having an invertible integral`, () =>
+                    checkFormula(Formula[name](variable, variable)));
+            });
+        });
+        nonInvertibleIntegralTwoParamFunctionNames.forEach(name => {
+            describe(name, () => {
+                test(`${name}(var, const, const) is marked as not having an invertible integral`, () =>
+                    checkFormula(Formula[name](variable, constant, constant)));
+                test(`${name}(const, var, const) is marked as not having an invertible integral`, () =>
+                    checkFormula(Formula[name](constant, variable, constant)));
+                test(`${name}(const, const, var) is marked as not having an invertible integral`, () =>
+                    checkFormula(Formula[name](constant, constant, variable)));
+                test(`${name}(var, var, const) is marked as not having an invertible integral`, () =>
+                    checkFormula(Formula[name](variable, variable, constant)));
+                test(`${name}(var, const, var) is marked as not having an invertible integral`, () =>
+                    checkFormula(Formula[name](variable, constant, variable)));
+                test(`${name}(const, var, var) is marked as not having an invertible integral`, () =>
+                    checkFormula(Formula[name](constant, variable, variable)));
+                test(`${name}(var, var, var) is marked as not having an invertible integral`, () =>
+                    checkFormula(Formula[name](variable, variable, variable)));
+            });
+        });
+    });
+
+    // TODO I think these tests will require writing at least one known example for every function
+    describe.todo("Invertible Integral formulas invert correctly");
+
+    test("Inverting integral of nested formulas", () => {
+        const formula = Formula.add(variable, constant).times(constant).pow(2).times(30);
+        expect(formula.invertIntegral(formula.evaluateIntegral())).compare_tolerance(10);
+    });
+
+    test("Inverting integral of nested complex formulas", () => {
+        const formula = Formula.pow(1.05, variable).times(100).pow(0.5);
+        expect(() => formula.invertIntegral(100)).toLogError();
+    });
+});
+
+describe("Step-wise", () => {
+    let variable: GenericFormula;
+    let constant: GenericFormula;
+    beforeAll(() => {
+        variable = Formula.variable(10);
+        constant = Formula.constant(10);
+    });
+
+    test("Formula without variable is marked as such", () => {
+        expect(Formula.step(constant, 10, value => Formula.sqrt(value)).isInvertible()).toBe(false);
+        expect(Formula.step(constant, 10, value => Formula.sqrt(value)).hasVariable()).toBe(false);
+    });
+
+    test("Formula with variable is marked as such", () => {
+        expect(Formula.step(variable, 10, value => Formula.sqrt(value)).isInvertible()).toBe(true);
+        expect(Formula.step(variable, 10, value => Formula.sqrt(value)).hasVariable()).toBe(true);
+    });
+
+    test("Non-invertible formula modifier marks formula as such", () => {
+        expect(Formula.step(constant, 10, value => Formula.abs(value)).isInvertible()).toBe(false);
+        expect(Formula.step(constant, 10, value => Formula.abs(value)).hasVariable()).toBe(false);
+    });
+
+    test("Formula never marked integrable", () => {
+        expect(Formula.step(constant, 10, value => Formula.add(value, 10)).isIntegrable()).toBe(
+            false
+        );
+        expect(() =>
+            Formula.step(constant, 10, value => Formula.add(value, 10)).evaluateIntegral()
+        ).toLogError();
+    });
+
+    test("Formula never marked as having an invertible integral", () => {
+        expect(
+            Formula.step(constant, 10, value => Formula.add(value, 10)).isIntegralInvertible()
+        ).toBe(false);
+        expect(() =>
+            Formula.step(constant, 10, value => Formula.add(value, 10)).invertIntegral(10)
+        ).toLogError();
+    });
+
+    test("Formula modifiers with variables mark formula as non-invertible", () => {
+        expect(
+            Formula.step(constant, 10, value => Formula.add(value, variable)).isInvertible()
+        ).toBe(false);
+        expect(
+            Formula.step(constant, 10, value => Formula.add(value, variable)).hasVariable()
+        ).toBe(false);
+    });
+
+    describe("Pass-through underneath start", () => {
+        test("Evaluates correctly", () =>
+            expect(
+                Formula.step(constant, 20, value => Formula.sqrt(value)).evaluate()
+            ).compare_tolerance(10));
+        test("Inverts correctly with variable in input", () =>
+            expect(
+                Formula.step(variable, 20, value => Formula.sqrt(value)).invert(10)
+            ).compare_tolerance(10));
+    });
+
+    describe("Pass-through at boundary", () => {
+        test("Evaluates correctly", () =>
+            expect(
+                Formula.step(constant, 10, value => Formula.sqrt(value)).evaluate()
+            ).compare_tolerance(10));
+        test("Inverts correctly with variable in input", () =>
+            expect(
+                Formula.step(variable, 10, value => Formula.sqrt(value)).invert(10)
+            ).compare_tolerance(10));
+    });
+
+    describe("Evaluates correctly beyond start", () => {
+        test("Evaluates correctly", () =>
+            expect(
+                Formula.step(variable, 8, value => Formula.add(value, 2)).evaluate()
+            ).compare_tolerance(12));
+        test("Inverts correctly", () =>
+            expect(
+                Formula.step(variable, 8, value => Formula.add(value, 2)).invert(12)
+            ).compare_tolerance(10));
+    });
+
+    describe("Evaluates correctly when nested", () => {
+        test("Evaluates correctly", () =>
+            expect(
+                Formula.add(variable, constant)
+                    .step(10, value => Formula.mul(value, 2))
+                    .sub(10)
+                    .evaluate()
+            ).compare_tolerance(20));
+        test("Inverts correctly", () =>
+            expect(
+                Formula.add(variable, constant)
+                    .step(10, value => Formula.mul(value, 2))
+                    .sub(10)
+                    .invert(30)
+            ).compare_tolerance(15));
+    });
+});
+
+describe("Conditionals", () => {
+    let variable: GenericFormula;
+    let constant: GenericFormula;
+    beforeAll(() => {
+        variable = Formula.variable(10);
+        constant = Formula.constant(10);
+    });
+
+    test("Formula without variable is marked as such", () => {
+        expect(Formula.if(constant, true, value => Formula.sqrt(value)).isInvertible()).toBe(false);
+        expect(Formula.if(constant, true, value => Formula.sqrt(value)).hasVariable()).toBe(false);
+    });
+
+    test("Formula with variable is marked as such", () => {
+        expect(Formula.if(variable, true, value => Formula.sqrt(value)).isInvertible()).toBe(true);
+        expect(Formula.if(variable, true, value => Formula.sqrt(value)).hasVariable()).toBe(true);
+    });
+
+    test("Non-invertible formula modifier marks formula as such", () => {
+        expect(Formula.if(constant, true, value => Formula.abs(value)).isInvertible()).toBe(false);
+        expect(Formula.if(constant, true, value => Formula.abs(value)).hasVariable()).toBe(false);
+    });
+
+    test("Formula never marked integrable", () => {
+        expect(Formula.if(constant, true, value => Formula.add(value, 10)).isIntegrable()).toBe(
+            false
+        );
+        expect(() =>
+            Formula.if(constant, true, value => Formula.add(value, 10)).evaluateIntegral()
+        ).toLogError();
+    });
+
+    test("Formula never marked as having an invertible integral", () => {
+        expect(
+            Formula.if(constant, true, value => Formula.add(value, 10)).isIntegralInvertible()
+        ).toBe(false);
+        expect(() =>
+            Formula.if(constant, true, value => Formula.add(value, 10)).invertIntegral(10)
+        ).toLogError();
+    });
+
+    test("Formula modifiers with variables mark formula as non-invertible", () => {
+        expect(
+            Formula.if(constant, true, value => Formula.add(value, variable)).isInvertible()
+        ).toBe(false);
+        expect(
+            Formula.if(constant, true, value => Formula.add(value, variable)).hasVariable()
+        ).toBe(false);
+    });
+
+    describe("Pass-through with condition false", () => {
+        test("Evaluates correctly", () =>
+            expect(
+                Formula.if(constant, false, value => Formula.sqrt(value)).evaluate()
+            ).compare_tolerance(10));
+        test("Inverts correctly with variable in input", () =>
+            expect(
+                Formula.if(variable, false, value => Formula.sqrt(value)).invert(10)
+            ).compare_tolerance(10));
+    });
+    describe("Evaluates correctly with condition false and else statement", () => {
+        test("Evaluates correctly", () =>
+            expect(
+                Formula.if(
+                    constant,
+                    false,
+                    value => Formula.sqrt(value),
+                    value => value.times(2)
+                ).evaluate()
+            ).compare_tolerance(20));
+        test("Inverts correctly with variable in input", () =>
+            expect(
+                Formula.if(
+                    variable,
+                    false,
+                    value => Formula.sqrt(value),
+                    value => value.times(2)
+                ).invert(20)
+            ).compare_tolerance(10));
+    });
+
+    describe("Evaluates correctly with condition true", () => {
+        test("Evaluates correctly", () =>
+            expect(
+                Formula.if(variable, true, value => Formula.add(value, 2)).evaluate()
+            ).compare_tolerance(12));
+        test("Inverts correctly", () =>
+            expect(
+                Formula.if(variable, true, value => Formula.add(value, 2)).invert(12)
+            ).compare_tolerance(10));
+    });
+
+    describe("Evaluates correctly when nested", () => {
+        test("Evaluates correctly", () =>
+            expect(
+                Formula.add(variable, constant)
+                    .if(true, value => Formula.add(value, 2))
+                    .div(2)
+                    .evaluate()
+            ).compare_tolerance(11));
+        test("Inverts correctly", () =>
+            expect(
+                Formula.add(variable, constant)
+                    .if(true, value => Formula.add(value, 2))
+                    .div(2)
+                    .invert(12)
+            ).compare_tolerance(12));
+    });
+});
+
+describe("Custom Formulas", () => {
+    let variable: InvertibleIntegralFormula;
+    beforeAll(() => {
+        variable = Formula.variable(1);
+    });
+
+    describe("Formula with evaluate", () => {
+        test("Zero input evaluates correctly", () =>
+            expect(new Formula({ inputs: [], evaluate: () => 10 }).evaluate()).compare_tolerance(
+                10
+            ));
+        test("One input evaluates correctly", () =>
+            expect(
+                new Formula({ inputs: [1], evaluate: value => value }).evaluate()
+            ).compare_tolerance(1));
+        test("Two inputs evaluates correctly", () =>
+            expect(
+                new Formula({ inputs: [1, 2], evaluate: (v1, v2) => v1 }).evaluate()
+            ).compare_tolerance(1));
+    });
+
+    describe("Formula with invert", () => {
+        test("Zero input does not invert", () =>
+            expect(() =>
+                new Formula({
+                    inputs: [],
+                    evaluate: () => 6,
+                    invert: value => value
+                }).invert(10)
+            ).toLogError());
+        test("One input inverts correctly", () =>
+            expect(
+                new Formula({
+                    inputs: [variable],
+                    evaluate: () => 10,
+                    invert: (value, v1) => v1.evaluate()
+                }).invert(10)
+            ).compare_tolerance(1));
+        test("Two inputs inverts correctly", () =>
+            expect(
+                new Formula({
+                    inputs: [variable, 2],
+                    evaluate: () => 10,
+                    invert: (value, v1, v2) => v2
+                }).invert(10)
+            ).compare_tolerance(2));
+    });
+
+    describe("Formula with integrate", () => {
+        test("Zero input cannot integrate", () =>
+            expect(() =>
+                new Formula({
+                    inputs: [],
+                    evaluate: () => 0,
+                    integrate: stack => variable
+                }).evaluateIntegral()
+            ).toLogError());
+        test("One input integrates correctly", () =>
+            expect(
+                new Formula({
+                    inputs: [variable],
+                    evaluate: v1 => Decimal.add(v1, 10),
+                    integrate: (stack, v1) => Formula.add(v1, 10)
+                }).evaluateIntegral()
+            ).compare_tolerance(11));
+        test("Two inputs integrates correctly", () =>
+            expect(
+                new Formula({
+                    inputs: [variable, 10],
+                    evaluate: (v1, v2) => Decimal.add(v1, v2),
+                    integrate: (stack, v1, v2) => Formula.add(v1, v2)
+                }).evaluateIntegral()
+            ).compare_tolerance(11));
+    });
+
+    describe("Formula with invertIntegral", () => {
+        test("Zero input does not invert integral", () =>
+            expect(() =>
+                new Formula({
+                    inputs: [],
+                    evaluate: () => 0,
+                    integrate: stack => variable
+                }).invertIntegral(20)
+            ).toLogError());
+        test("One input inverts integral correctly", () =>
+            expect(
+                new Formula({
+                    inputs: [variable],
+                    evaluate: v1 => Decimal.add(v1, 10),
+                    integrate: (stack, v1) => Formula.add(v1, 10)
+                }).invertIntegral(20)
+            ).compare_tolerance(10));
+        test("Two inputs inverts integral correctly", () =>
+            expect(
+                new Formula({
+                    inputs: [variable, 10],
+                    evaluate: (v1, v2) => Decimal.add(v1, v2),
+                    integrate: (stack, v1, v2) => Formula.add(v1, v2)
+                }).invertIntegral(20)
+            ).compare_tolerance(10));
+    });
+
+    describe("Formula as input", () => {
+        let customFormula: InvertibleIntegralFormula;
+        beforeAll(() => {
+            customFormula = new Formula({
+                inputs: [variable],
+                evaluate: v1 => v1,
+                invert: value => value,
+                integrate: (stack, v1) => v1.getIntegralFormula(stack)
+            });
+        });
+        test("Evaluate correctly", () =>
+            expect(customFormula.add(10).evaluate()).compare_tolerance(11));
+        test("Invert correctly", () =>
+            expect(customFormula.add(10).invert(20)).compare_tolerance(10));
+        test("Integrate correctly", () =>
+            expect(customFormula.add(10).evaluateIntegral(10)).compare_tolerance(20));
+    });
+});
+
+describe("Buy Max", () => {
+    let resource: Resource;
+    beforeAll(() => {
+        resource = createResource(ref(100000));
+    });
+    describe("Without cumulative cost", () => {
+        test("Errors on calculating max affordable of non-invertible formula", () => {
+            const purchases = ref(1);
+            const variable = Formula.variable(purchases);
+            const formula = Formula.abs(variable);
+            const maxAffordable = calculateMaxAffordable(formula, resource, false);
+            expect(() => maxAffordable.value).toLogError();
+        });
+        test("Errors on calculating cost of non-invertible formula", () => {
+            const purchases = ref(1);
+            const variable = Formula.variable(purchases);
+            const formula = Formula.abs(variable);
+            expect(() => calculateCost(formula, 5, false, 0)).toLogError();
+        });
+        test("Calculates max affordable and cost correctly", () => {
+            const variable = Formula.variable(0);
+            const formula = Formula.pow(1.05, variable).times(100);
+            const maxAffordable = calculateMaxAffordable(formula, resource, false);
+            expect(maxAffordable.value).compare_tolerance(141);
+            expect(calculateCost(formula, maxAffordable.value, false)).compare_tolerance(
+                Decimal.pow(1.05, 141).times(100)
+            );
+        });
+        test("Calculates max affordable and cost correctly with direct sum", () => {
+            const variable = Formula.variable(0);
+            const formula = Formula.pow(1.05, variable).times(100);
+            const maxAffordable = calculateMaxAffordable(formula, resource, false, 4);
+            expect(maxAffordable.value).compare_tolerance(141 - 4);
+
+            const actualCost = new Array(4)
+                .fill(null)
+                .reduce((acc, _, i) => acc.add(formula.evaluate(133 + i)), new Decimal(0));
+            const calculatedCost = calculateCost(formula, maxAffordable.value, false, 4);
+            expect(calculatedCost).compare_tolerance(actualCost);
+        });
+    });
+    describe("With cumulative cost", () => {
+        test("Errors on calculating max affordable of non-invertible formula", () => {
+            const purchases = ref(1);
+            const variable = Formula.variable(purchases);
+            const formula = Formula.abs(variable);
+            const maxAffordable = calculateMaxAffordable(formula, resource, true);
+            expect(() => maxAffordable.value).toLogError();
+        });
+        test("Errors on calculating cost of non-invertible formula", () => {
+            const purchases = ref(1);
+            const variable = Formula.variable(purchases);
+            const formula = Formula.abs(variable);
+            expect(() => calculateCost(formula, 5, true, 0)).toLogError();
+        });
+        test("Estimates max affordable and cost correctly with 0 purchases", () => {
+            const purchases = ref(0);
+            const variable = Formula.variable(purchases);
+            const formula = Formula.pow(1.05, variable).times(100);
+            const maxAffordable = calculateMaxAffordable(formula, resource, true, 0);
+            let actualAffordable = 0;
+            let summedCost = Decimal.dZero;
+            while (true) {
+                const nextCost = formula.evaluate(actualAffordable);
+                if (Decimal.add(summedCost, nextCost).lte(resource.value)) {
+                    actualAffordable++;
+                    summedCost = Decimal.add(summedCost, nextCost);
+                } else {
+                    break;
+                }
+            }
+            expect(maxAffordable.value).compare_tolerance(actualAffordable);
+
+            const actualCost = new Array(actualAffordable)
+                .fill(null)
+                .reduce((acc, _, i) => acc.add(formula.evaluate(i)), new Decimal(0));
+            const calculatedCost = calculateCost(formula, maxAffordable.value);
+            // Check if the calculated cost is within 10% of the actual cost,
+            // because this is an approximation
+            expect(
+                Decimal.sub(actualCost, calculatedCost).abs().div(actualCost).toNumber()
+            ).toBeLessThan(0.1);
+        });
+        test("Estimates max affordable and cost with 1 purchase", () => {
+            const purchases = ref(1);
+            const variable = Formula.variable(purchases);
+            const formula = Formula.pow(1.05, variable).times(100);
+            const maxAffordable = calculateMaxAffordable(formula, resource, true, 0);
+            let actualAffordable = 0;
+            let summedCost = Decimal.dZero;
+            while (true) {
+                const nextCost = formula.evaluate(Decimal.add(actualAffordable, 1));
+                if (Decimal.add(summedCost, nextCost).lte(resource.value)) {
+                    actualAffordable++;
+                    summedCost = Decimal.add(summedCost, nextCost);
+                } else {
+                    break;
+                }
+            }
+            expect(maxAffordable.value).compare_tolerance(actualAffordable);
+
+            const actualCost = new Array(actualAffordable)
+                .fill(null)
+                .reduce((acc, _, i) => acc.add(formula.evaluate(i + 1)), new Decimal(0));
+            const calculatedCost = calculateCost(formula, maxAffordable.value);
+            // Check if the calculated cost is within 10% of the actual cost,
+            // because this is an approximation
+            expect(
+                Decimal.sub(actualCost, calculatedCost).abs().div(actualCost).toNumber()
+            ).toBeLessThan(0.1);
+        });
+        test("Estimates max affordable and cost more accurately with direct sum", () => {
+            const purchases = ref(1);
+            const variable = Formula.variable(purchases);
+            const formula = Formula.pow(1.05, variable).times(100);
+            const maxAffordable = calculateMaxAffordable(formula, resource);
+            let actualAffordable = 0;
+            let summedCost = Decimal.dZero;
+            while (true) {
+                const nextCost = formula.evaluate(Decimal.add(actualAffordable, 1));
+                if (Decimal.add(summedCost, nextCost).lte(resource.value)) {
+                    actualAffordable++;
+                    summedCost = Decimal.add(summedCost, nextCost);
+                } else {
+                    break;
+                }
+            }
+            expect(maxAffordable.value).compare_tolerance(actualAffordable);
+
+            const actualCost = new Array(actualAffordable)
+                .fill(null)
+                .reduce((acc, _, i) => acc.add(formula.evaluate(i + 1)), new Decimal(0));
+            const calculatedCost = calculateCost(formula, maxAffordable.value);
+            // Since we're summing the last few purchases, this has a tighter deviation allowed
+            expect(
+                Decimal.sub(actualCost, calculatedCost).abs().div(actualCost).toNumber()
+            ).toBeLessThan(0.02);
+        });
+        test("Handles direct sum when making few purchases", () => {
+            const purchases = ref(90);
+            const variable = Formula.variable(purchases);
+            const formula = Formula.pow(1.05, variable).times(100);
+            const maxAffordable = calculateMaxAffordable(formula, resource);
+            let actualAffordable = 0;
+            let summedCost = Decimal.dZero;
+            while (true) {
+                const nextCost = formula.evaluate(Decimal.add(actualAffordable, purchases.value));
+                if (Decimal.add(summedCost, nextCost).lte(resource.value)) {
+                    actualAffordable++;
+                    summedCost = Decimal.add(summedCost, nextCost);
+                } else {
+                    break;
+                }
+            }
+            expect(maxAffordable.value).compare_tolerance(actualAffordable);
+
+            const actualCost = new Array(actualAffordable)
+                .fill(null)
+                .reduce(
+                    (acc, _, i) => acc.add(formula.evaluate(i + purchases.value)),
+                    new Decimal(0)
+                );
+            const calculatedCost = calculateCost(formula, maxAffordable.value);
+            // Since we're summing all the purchases this should be equivalent
+            expect(calculatedCost).compare_tolerance(actualCost);
+        });
+        test("Handles direct sum when making very few purchases", () => {
+            const purchases = ref(0);
+            const variable = Formula.variable(purchases);
+            const formula = variable.add(1);
+            const resource = createResource(ref(3));
+            const maxAffordable = calculateMaxAffordable(formula, resource, true);
+            expect(maxAffordable.value).compare_tolerance(2);
+
+            const actualCost = new Array(2)
+                .fill(null)
+                .reduce(
+                    (acc, _, i) => acc.add(formula.evaluate(i + purchases.value)),
+                    new Decimal(0)
+                );
+            const calculatedCost = calculateCost(formula, maxAffordable.value);
+            // Since we're summing all the purchases this should be equivalent
+            expect(calculatedCost).compare_tolerance(actualCost);
+        });
+        test("Handles direct sum when over e308 purchases", () => {
+            resource.value = "1ee308";
+            const purchases = ref(0);
+            const variable = Formula.variable(purchases);
+            const formula = variable;
+            const maxAffordable = calculateMaxAffordable(formula, resource);
+            const calculatedCost = calculateCost(formula, maxAffordable.value);
+            expect(Decimal.isNaN(calculatedCost)).toBe(false);
+            expect(Decimal.isFinite(calculatedCost)).toBe(true);
+            resource.value = 100000;
+        });
+        test("Handles direct sum of non-integrable formula", () => {
+            const purchases = ref(0);
+            const formula = Formula.variable(purchases).abs();
+            expect(() => calculateCost(formula, 10)).not.toLogError();
+        });
+    });
+});
diff --git a/tests/game/modifiers.test.ts b/tests/game/modifiers.test.ts
new file mode 100644
index 0000000..d5e186d
--- /dev/null
+++ b/tests/game/modifiers.test.ts
@@ -0,0 +1,411 @@
+import { CoercableComponent, JSXFunction } from "features/feature";
+import Formula, { printFormula } from "game/formulas/formulas";
+import {
+    createAdditiveModifier,
+    createExponentialModifier,
+    createModifierSection,
+    createMultiplicativeModifier,
+    createSequentialModifier,
+    Modifier
+} from "game/modifiers";
+import Decimal, { DecimalSource } from "util/bignum";
+import { WithRequired } from "util/common";
+import { Computable } from "util/computed";
+import { beforeAll, describe, expect, test } from "vitest";
+import { Ref, ref, unref } from "vue";
+import "../utils";
+
+export type ModifierConstructorOptions = {
+    [S in "addend" | "multiplier" | "exponent"]: Computable<DecimalSource>;
+} & {
+    description?: Computable<CoercableComponent>;
+    enabled?: Computable<boolean>;
+    smallerIsBetter?: boolean;
+};
+
+function testModifiers<
+    T extends "addend" | "multiplier" | "exponent",
+    S extends ModifierConstructorOptions
+>(
+    modifierConstructor: (optionsFunc: () => S) => WithRequired<Modifier, "invert" | "getFormula">,
+    property: T,
+    operation: (lhs: DecimalSource, rhs: DecimalSource) => DecimalSource
+) {
+    // Util because adding [property] messes up typing
+    function createModifier(
+        value: Computable<DecimalSource>,
+        options: Partial<ModifierConstructorOptions> = {}
+    ): WithRequired<Modifier, "invert" | "getFormula"> {
+        options[property] = value;
+        return modifierConstructor(() => options as S);
+    }
+
+    describe("operations", () => {
+        let modifier: WithRequired<Modifier, "invert" | "getFormula">;
+        beforeAll(() => {
+            modifier = createModifier(ref(5));
+        });
+
+        test("Applies correctly", () =>
+            expect(modifier.apply(10)).compare_tolerance(operation(10, 5)));
+        test("Inverts correctly", () =>
+            expect(modifier.invert(operation(10, 5))).compare_tolerance(10));
+        test("getFormula returns the right formula", () => {
+            const value = ref(10);
+            expect(printFormula(modifier.getFormula(Formula.variable(value)))).toBe(
+                `${operation.name}(x, 5.00)`
+            );
+        });
+    });
+
+    describe("applies description correctly", () => {
+        test("without description", () => expect(createModifier(0).description).toBeUndefined());
+        test("with description", () => {
+            const desc = createModifier(0, { description: "test" }).description;
+            expect(desc).not.toBeUndefined();
+            expect((desc as JSXFunction)()).toMatchSnapshot();
+        });
+    });
+
+    describe("applies enabled correctly", () => {
+        test("without enabled", () => expect(createModifier(0).enabled).toBeUndefined());
+        test("with enabled", () => {
+            const enabled = ref(false);
+            const modifier = createModifier(5, { enabled });
+            expect(modifier.enabled).toBe(enabled);
+        });
+    });
+
+    describe("applies smallerIsBetter correctly", () => {
+        describe("without smallerIsBetter false", () => {
+            test("negative value", () =>
+                expect(
+                    (
+                        createModifier(-5, { description: "test", smallerIsBetter: false })
+                            .description as JSXFunction
+                    )()
+                ).toMatchSnapshot());
+            test("zero value", () =>
+                expect(
+                    (
+                        createModifier(0, { description: "test", smallerIsBetter: false })
+                            .description as JSXFunction
+                    )()
+                ).toMatchSnapshot());
+            test("positive value", () =>
+                expect(
+                    (
+                        createModifier(5, { description: "test", smallerIsBetter: false })
+                            .description as JSXFunction
+                    )()
+                ).toMatchSnapshot());
+        });
+        describe("with smallerIsBetter true", () => {
+            test("negative value", () =>
+                expect(
+                    (
+                        createModifier(-5, { description: "test", smallerIsBetter: true })
+                            .description as JSXFunction
+                    )()
+                ).toMatchSnapshot());
+            test("zero value", () =>
+                expect(
+                    (
+                        createModifier(0, { description: "test", smallerIsBetter: true })
+                            .description as JSXFunction
+                    )()
+                ).toMatchSnapshot());
+            test("positive value", () =>
+                expect(
+                    (
+                        createModifier(5, { description: "test", smallerIsBetter: true })
+                            .description as JSXFunction
+                    )()
+                ).toMatchSnapshot());
+        });
+    });
+}
+
+describe("Additive Modifiers", () => testModifiers(createAdditiveModifier, "addend", Decimal.add));
+describe("Multiplicative Modifiers", () =>
+    testModifiers(createMultiplicativeModifier, "multiplier", Decimal.mul));
+describe("Exponential Modifiers", () =>
+    testModifiers(createExponentialModifier, "exponent", Decimal.pow));
+
+describe("Sequential Modifiers", () => {
+    function createModifier(
+        value: Computable<DecimalSource>,
+        options: Partial<ModifierConstructorOptions> = {}
+    ): WithRequired<Modifier, "invert" | "getFormula"> {
+        return createSequentialModifier(() => [
+            createAdditiveModifier(() => ({ ...options, addend: value })),
+            createMultiplicativeModifier(() => ({ ...options, multiplier: value })),
+            createExponentialModifier(() => ({ ...options, exponent: value }))
+        ]);
+    }
+
+    describe("operations", () => {
+        let modifier: WithRequired<Modifier, "invert" | "getFormula">;
+        beforeAll(() => {
+            modifier = createModifier(5);
+        });
+
+        test("Applies correctly", () =>
+            expect(modifier.apply(10)).compare_tolerance(Decimal.add(10, 5).times(5).pow(5)));
+        test("Inverts correctly", () =>
+            expect(modifier.invert(Decimal.add(10, 5).times(5).pow(5))).compare_tolerance(10));
+        test("getFormula returns the right formula", () => {
+            const value = ref(10);
+            expect(printFormula(modifier.getFormula(Formula.variable(value)))).toBe(
+                `pow(mul(add(x, 5.00), 5.00), 5.00)`
+            );
+        });
+    });
+
+    describe("applies description correctly", () => {
+        test("without description", () => expect(createModifier(0).description).toBeUndefined());
+        test("with description", () => {
+            const desc = createModifier(0, { description: "test" }).description;
+            expect(desc).not.toBeUndefined();
+            expect((desc as JSXFunction)()).toMatchSnapshot();
+        });
+        test("with both", () => {
+            const desc = createSequentialModifier(() => [
+                createAdditiveModifier(() => ({ addend: 0 })),
+                createMultiplicativeModifier(() => ({ multiplier: 0, description: "test" }))
+            ]).description;
+            expect(desc).not.toBeUndefined();
+            expect((desc as JSXFunction)()).toMatchSnapshot();
+        });
+    });
+
+    describe("applies enabled correctly", () => {
+        test("without enabled", () => expect(createModifier(0).enabled).toBeUndefined());
+        test("with enabled", () => {
+            const enabled = ref(false);
+            const modifier = createModifier(5, { enabled });
+            expect(modifier.enabled).not.toBeUndefined();
+            expect(unref(modifier.enabled)).toBe(false);
+            enabled.value = true;
+            expect(unref(modifier.enabled)).toBe(true);
+        });
+        test("with both", () => {
+            const enabled = ref(false);
+            const modifier = createSequentialModifier(() => [
+                createAdditiveModifier(() => ({ addend: 0 })),
+                createMultiplicativeModifier(() => ({ multiplier: 0, enabled }))
+            ]);
+            expect(modifier.enabled).not.toBeUndefined();
+            // So long as one is true or undefined, enable should be true
+            expect(unref(modifier.enabled)).toBe(true);
+        });
+    });
+
+    describe("applies smallerIsBetter correctly", () => {
+        describe("without smallerIsBetter false", () => {
+            test("negative value", () =>
+                expect(
+                    (
+                        createModifier(-5, { description: "test", smallerIsBetter: false })
+                            .description as JSXFunction
+                    )()
+                ).toMatchSnapshot());
+            test("zero value", () =>
+                expect(
+                    (
+                        createModifier(0, { description: "test", smallerIsBetter: false })
+                            .description as JSXFunction
+                    )()
+                ).toMatchSnapshot());
+            test("positive value", () =>
+                expect(
+                    (
+                        createModifier(5, { description: "test", smallerIsBetter: false })
+                            .description as JSXFunction
+                    )()
+                ).toMatchSnapshot());
+        });
+        describe("with smallerIsBetter true", () => {
+            test("negative value", () =>
+                expect(
+                    (
+                        createModifier(-5, { description: "test", smallerIsBetter: true })
+                            .description as JSXFunction
+                    )()
+                ).toMatchSnapshot());
+            test("zero value", () =>
+                expect(
+                    (
+                        createModifier(0, { description: "test", smallerIsBetter: true })
+                            .description as JSXFunction
+                    )()
+                ).toMatchSnapshot());
+            test("positive value", () =>
+                expect(
+                    (
+                        createModifier(5, { description: "test", smallerIsBetter: true })
+                            .description as JSXFunction
+                    )()
+                ).toMatchSnapshot());
+        });
+        describe("with both", () => {
+            let value: Ref<DecimalSource>;
+            let modifier: Modifier;
+            beforeAll(() => {
+                value = ref(0);
+                modifier = createSequentialModifier(() => [
+                    createAdditiveModifier(() => ({
+                        addend: value,
+                        description: "test",
+                        smallerIsBetter: true
+                    })),
+                    createAdditiveModifier(() => ({
+                        addend: value,
+                        description: "test",
+                        smallerIsBetter: false
+                    }))
+                ]);
+            });
+            test("negative value", () => {
+                value.value = -5;
+                expect((modifier.description as JSXFunction)()).toMatchSnapshot();
+            });
+            test("zero value", () => {
+                value.value = 0;
+                expect((modifier.description as JSXFunction)()).toMatchSnapshot();
+            });
+            test("positive value", () => {
+                value.value = 5;
+                expect((modifier.description as JSXFunction)()).toMatchSnapshot();
+            });
+        });
+    });
+});
+
+describe("Create modifier sections", () => {
+    test("No optional values", () =>
+        expect(
+            createModifierSection({
+                title: "Test",
+                modifier: createAdditiveModifier(() => ({ addend: 5, description: "Test Desc" }))
+            })
+        ).toMatchSnapshot());
+    test("With subtitle", () =>
+        expect(
+            createModifierSection({
+                title: "Test",
+                subtitle: "Subtitle",
+                modifier: createAdditiveModifier(() => ({ addend: 5, description: "Test Desc" }))
+            })
+        ).toMatchSnapshot());
+    test("With base", () =>
+        expect(
+            createModifierSection({
+                title: "Test",
+                modifier: createAdditiveModifier(() => ({ addend: 5, description: "Test Desc" })),
+                base: 10
+            })
+        ).toMatchSnapshot());
+    test("With unit", () =>
+        expect(
+            createModifierSection({
+                title: "Test",
+                modifier: createAdditiveModifier(() => ({ addend: 5, description: "Test Desc" })),
+                unit: "/s"
+            })
+        ).toMatchSnapshot());
+    test("With base", () =>
+        expect(
+            createModifierSection({
+                title: "Test",
+                modifier: createAdditiveModifier(() => ({ addend: 5, description: "Test Desc" })),
+                baseText: "Based on"
+            })
+        ).toMatchSnapshot());
+    test("With baseText", () =>
+        expect(
+            createModifierSection({
+                title: "Test",
+                modifier: createAdditiveModifier(() => ({ addend: 5, description: "Test Desc" })),
+                baseText: "Based on"
+            })
+        ).toMatchSnapshot());
+    describe("With smallerIsBetter", () => {
+        test("smallerIsBetter = false", () => {
+            expect(
+                createModifierSection({
+                    title: "Test",
+                    modifier: createAdditiveModifier(() => ({
+                        addend: -5,
+                        description: "Test Desc"
+                    })),
+                    smallerIsBetter: false
+                })
+            ).toMatchSnapshot();
+            expect(
+                createModifierSection({
+                    title: "Test",
+                    modifier: createAdditiveModifier(() => ({
+                        addend: 0,
+                        description: "Test Desc"
+                    })),
+                    smallerIsBetter: false
+                })
+            ).toMatchSnapshot();
+            expect(
+                createModifierSection({
+                    title: "Test",
+                    modifier: createAdditiveModifier(() => ({
+                        addend: 5,
+                        description: "Test Desc"
+                    })),
+                    smallerIsBetter: false
+                })
+            ).toMatchSnapshot();
+        });
+        test("smallerIsBetter = true", () => {
+            expect(
+                createModifierSection({
+                    title: "Test",
+                    modifier: createAdditiveModifier(() => ({
+                        addend: -5,
+                        description: "Test Desc"
+                    })),
+                    smallerIsBetter: true
+                })
+            ).toMatchSnapshot();
+            expect(
+                createModifierSection({
+                    title: "Test",
+                    modifier: createAdditiveModifier(() => ({
+                        addend: 0,
+                        description: "Test Desc"
+                    })),
+                    smallerIsBetter: true
+                })
+            ).toMatchSnapshot();
+            expect(
+                createModifierSection({
+                    title: "Test",
+                    modifier: createAdditiveModifier(() => ({
+                        addend: 5,
+                        description: "Test Desc"
+                    })),
+                    smallerIsBetter: true
+                })
+            ).toMatchSnapshot();
+        });
+    });
+    test("With everything", () =>
+        expect(
+            createModifierSection({
+                title: "Test",
+                subtitle: "Subtitle",
+                modifier: createAdditiveModifier(() => ({ addend: 5, description: "Test Desc" })),
+                base: 10,
+                unit: "/s",
+                baseText: "Based on",
+                smallerIsBetter: true
+            })
+        ).toMatchSnapshot());
+});
diff --git a/tests/game/requirements.test.ts b/tests/game/requirements.test.ts
new file mode 100644
index 0000000..8ee3c43
--- /dev/null
+++ b/tests/game/requirements.test.ts
@@ -0,0 +1,282 @@
+import { Visibility } from "features/feature";
+import { createResource, Resource } from "features/resources/resource";
+import Formula from "game/formulas/formulas";
+import {
+    CostRequirement,
+    createBooleanRequirement,
+    createCostRequirement,
+    createVisibilityRequirement,
+    maxRequirementsMet,
+    payRequirements,
+    Requirement,
+    requirementsMet
+} from "game/requirements";
+import Decimal from "util/bignum";
+import { beforeAll, describe, expect, test } from "vitest";
+import { isRef, ref, unref } from "vue";
+import "../utils";
+
+describe("Creating cost requirement", () => {
+    let resource: Resource;
+    beforeAll(() => {
+        resource = createResource(ref(10));
+    });
+
+    describe("Minimal requirement", () => {
+        let requirement: CostRequirement;
+        beforeAll(() => {
+            requirement = createCostRequirement(() => ({
+                resource,
+                cost: 10
+            }));
+        });
+
+        test("resource pass-through", () => expect(requirement.resource).toBe(resource));
+        test("cost pass-through", () => expect(requirement.cost).toBe(10));
+
+        test("partialDisplay exists", () =>
+            expect(typeof requirement.partialDisplay).toBe("function"));
+        test("display exists", () => expect(typeof requirement.display).toBe("function"));
+        test("pay exists", () => expect(typeof requirement.pay).toBe("function"));
+        test("requirementMet exists", () => {
+            expect(requirement.requirementMet).not.toBeNull();
+            expect(isRef(requirement.requirementMet)).toBe(true);
+        });
+        test("is visible", () => expect(requirement.visibility).toBe(Visibility.Visible));
+        test("requires pay", () => expect(requirement.requiresPay).toBe(true));
+        test("does not spend resources", () => expect(requirement.cumulativeCost).toBe(true));
+        test("cannot maximize", () => expect(unref(requirement.canMaximize)).toBe(false));
+    });
+
+    describe("Fully customized", () => {
+        let requirement: CostRequirement;
+        beforeAll(() => {
+            requirement = createCostRequirement(() => ({
+                resource,
+                cost: Formula.variable(resource).times(10),
+                visibility: Visibility.None,
+                requiresPay: false,
+                cumulativeCost: false,
+                maxBulkAmount: Decimal.dInf,
+                directSum: 5,
+                // eslint-disable-next-line @typescript-eslint/no-empty-function
+                pay() {}
+            }));
+        });
+
+        test("pay is empty function", () =>
+            requirement.pay != null &&
+            typeof requirement.pay === "function" &&
+            requirement.pay.length === 1);
+        test("is not visible", () => expect(requirement.visibility).toBe(Visibility.None));
+        test("does not require pay", () => expect(requirement.requiresPay).toBe(false));
+        test("spends resources", () => expect(requirement.cumulativeCost).toBe(false));
+        test("can maximize", () => expect(unref(requirement.canMaximize)).toBe(true));
+        test("maxBulkAmount is set", () =>
+            expect(unref(requirement.maxBulkAmount)).compare_tolerance(Decimal.dInf));
+        test("directSum is set", () => expect(unref(requirement.directSum)).toBe(5));
+    });
+
+    test("Requirement met when meeting the cost", () => {
+        const requirement = createCostRequirement(() => ({
+            resource,
+            cost: 10,
+            cumulativeCost: false
+        }));
+        expect(unref(requirement.requirementMet)).toBe(1);
+    });
+
+    test("Requirement not met when not meeting the cost", () => {
+        const requirement = createCostRequirement(() => ({
+            resource,
+            cost: 100,
+            cumulativeCost: false
+        }));
+        expect(unref(requirement.requirementMet)).toBe(0);
+    });
+
+    describe("canMaximize works correctly", () => {
+        test("Cost function cannot maximize", () =>
+            expect(
+                unref(
+                    createCostRequirement(() => ({
+                        resource,
+                        cost: () => 10,
+                        maxBulkAmount: Decimal.dInf
+                    })).canMaximize
+                )
+            ).toBe(false));
+        test("Integrable formula cannot maximize if maxBulkAmount is left at 1", () =>
+            expect(
+                unref(
+                    createCostRequirement(() => ({
+                        resource,
+                        cost: () => 10
+                    })).canMaximize
+                )
+            ).toBe(false));
+        test("Non-invertible formula cannot maximize when max bulk amount is above direct sum", () =>
+            expect(
+                unref(
+                    createCostRequirement(() => ({
+                        resource,
+                        cost: Formula.variable(resource).abs(),
+                        maxBulkAmount: Decimal.dInf
+                    })).canMaximize
+                )
+            ).toBe(false));
+        test("Non-invertible formula can maximize when max bulk amount is lte direct sum", () =>
+            expect(
+                unref(
+                    createCostRequirement(() => ({
+                        resource,
+                        cost: Formula.variable(resource).abs(),
+                        maxBulkAmount: 20,
+                        directSum: 20
+                    })).canMaximize
+                )
+            ).toBe(true));
+        test("Invertible formula can maximize if cumulativeCost is false", () =>
+            expect(
+                unref(
+                    createCostRequirement(() => ({
+                        resource,
+                        cost: Formula.variable(resource).lambertw(),
+                        cumulativeCost: false,
+                        maxBulkAmount: Decimal.dInf
+                    })).canMaximize
+                )
+            ).toBe(true));
+        test("Invertible formula cannot maximize if cumulativeCost is true", () =>
+            expect(
+                unref(
+                    createCostRequirement(() => ({
+                        resource,
+                        cost: Formula.variable(resource).lambertw(),
+                        cumulativeCost: true,
+                        maxBulkAmount: Decimal.dInf
+                    })).canMaximize
+                )
+            ).toBe(false));
+        test("Integrable formula can maximize if cumulativeCost is false", () =>
+            expect(
+                unref(
+                    createCostRequirement(() => ({
+                        resource,
+                        cost: Formula.variable(resource).pow(2),
+                        cumulativeCost: false,
+                        maxBulkAmount: Decimal.dInf
+                    })).canMaximize
+                )
+            ).toBe(true));
+        test("Integrable formula can maximize if cumulativeCost is true", () =>
+            expect(
+                unref(
+                    createCostRequirement(() => ({
+                        resource,
+                        cost: Formula.variable(resource).pow(2),
+                        cumulativeCost: true,
+                        maxBulkAmount: Decimal.dInf
+                    })).canMaximize
+                )
+            ).toBe(true));
+    });
+
+    test("Requirements met capped by maxBulkAmount", () =>
+        expect(
+            unref(
+                createCostRequirement(() => ({
+                    resource,
+                    cost: Formula.variable(resource).times(0.0001),
+                    maxBulkAmount: 10,
+                    cumulativeCost: false
+                })).requirementMet
+            )
+        ).compare_tolerance(10));
+});
+
+test("Creating visibility requirement", () => {
+    const visibility = ref<Visibility.None | Visibility.Visible | boolean>(Visibility.Visible);
+    const requirement = createVisibilityRequirement({ visibility });
+    expect(unref(requirement.requirementMet)).toBe(true);
+    visibility.value = true;
+    expect(unref(requirement.requirementMet)).toBe(true);
+    visibility.value = Visibility.None;
+    expect(unref(requirement.requirementMet)).toBe(false);
+    visibility.value = false;
+    expect(unref(requirement.requirementMet)).toBe(false);
+});
+
+test("Creating boolean requirement", () => {
+    const req = ref(true);
+    const requirement = createBooleanRequirement(req);
+    expect(unref(requirement.requirementMet)).toBe(true);
+    req.value = false;
+    expect(unref(requirement.requirementMet)).toBe(false);
+});
+
+describe("Checking all requirements met", () => {
+    let metRequirement: Requirement;
+    let unmetRequirement: Requirement;
+    beforeAll(() => {
+        metRequirement = createBooleanRequirement(true);
+        unmetRequirement = createBooleanRequirement(false);
+    });
+
+    test("Returns true if no requirements", () => {
+        expect(requirementsMet([])).toBe(true);
+    });
+
+    test("Returns true if all requirements met", () => {
+        expect(requirementsMet([metRequirement, metRequirement])).toBe(true);
+    });
+
+    test("Returns false if any requirements unmet", () => {
+        expect(requirementsMet([metRequirement, unmetRequirement])).toBe(false);
+    });
+});
+
+describe("Checking maximum levels of requirements met", () => {
+    test("Returns 0 if any requirement is not met", () => {
+        const requirements = [
+            createBooleanRequirement(false),
+            createBooleanRequirement(true),
+            createCostRequirement(() => ({
+                resource: createResource(ref(10)),
+                cost: Formula.variable(0),
+                cumulativeCost: false
+            }))
+        ];
+        expect(maxRequirementsMet(requirements)).compare_tolerance(0);
+    });
+
+    test("Returns correct number of requirements met", () => {
+        const requirements = [
+            createBooleanRequirement(true),
+            createCostRequirement(() => ({
+                resource: createResource(ref(10)),
+                cost: Formula.variable(0),
+                cumulativeCost: false,
+                maxBulkAmount: Decimal.dInf
+            }))
+        ];
+        expect(maxRequirementsMet(requirements)).compare_tolerance(10);
+    });
+});
+
+test("Paying requirements", () => {
+    const resource = createResource(ref(100));
+    const noPayment = createCostRequirement(() => ({
+        resource,
+        cost: 10,
+        requiresPay: false,
+        cumulativeCost: false
+    }));
+    const payment = createCostRequirement(() => ({
+        resource,
+        cost: 10,
+        cumulativeCost: false
+    }));
+    payRequirements([noPayment, payment]);
+    expect(resource.value).compare_tolerance(90);
+});
diff --git a/tests/utils.ts b/tests/utils.ts
new file mode 100644
index 0000000..4252eac
--- /dev/null
+++ b/tests/utils.ts
@@ -0,0 +1,61 @@
+import Decimal, { DecimalSource, format } from "util/bignum";
+import { Mock, expect, vi } from "vitest";
+
+interface CustomMatchers<R = unknown> {
+    compare_tolerance(expected: DecimalSource, tolerance?: number): R;
+    toLogError(): R;
+}
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace Vi {
+        // eslint-disable-next-line @typescript-eslint/no-empty-interface
+        interface Assertion extends CustomMatchers {}
+        // eslint-disable-next-line @typescript-eslint/no-empty-interface
+        interface AsymmetricMatchersContaining extends CustomMatchers {}
+    }
+}
+
+expect.extend({
+    compare_tolerance(received: DecimalSource, expected: DecimalSource, tolerance?: number) {
+        const { isNot } = this;
+        let pass = false;
+        if (!Decimal.isFinite(expected)) {
+            pass = !Decimal.isFinite(received);
+        } else if (Decimal.isNaN(expected)) {
+            pass = Decimal.isNaN(received);
+        } else {
+            pass = Decimal.eq_tolerance(received, expected, tolerance);
+        }
+        return {
+            // do not alter your "pass" based on isNot. Vitest does it for you
+            pass,
+            message: () =>
+                `Expected ${received} to${
+                    (isNot as boolean) ? " not" : ""
+                } be close to ${expected}`,
+            expected: format(expected),
+            actual: format(received)
+        };
+    },
+    toLogError(received: () => unknown) {
+        const { isNot } = this;
+        console.error = vi.fn();
+        received();
+        const calls = (
+            console.error as unknown as Mock<
+                Parameters<typeof console.error>,
+                ReturnType<typeof console.error>
+            >
+        ).mock.calls.length;
+        const pass = calls >= 1;
+        vi.restoreAllMocks();
+        return {
+            pass,
+            message: () =>
+                `Expected ${received} to ${(isNot as boolean) ? " not" : ""} log an error`,
+            expected: "1+",
+            actual: calls
+        };
+    }
+});
diff --git a/vite.config.ts b/vite.config.ts
index 31e2ac5..fb573f1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -34,6 +34,9 @@ export default defineConfig({
         tsconfigPaths(),
         VitePWA({
             includeAssets: ["Logo.svg", "favicon.ico", "robots.txt", "apple-touch-icon.png"],
+            workbox: {
+              globPatterns: ['**/*.{js,css,html,ico,png,svg}']
+            },
             manifest: {
                 name: projInfo.title,
                 short_name: projInfo.title,
@@ -59,8 +62,5 @@ export default defineConfig({
                 ]
             }
         })
-    ],
-    test: {
-        environment: "jsdom"
-    }
+    ]
 });
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..3ab791b
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,9 @@
+import { mergeConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(viteConfig, defineConfig({
+    test: {
+        environment: "jsdom"
+    }
+}))