From de2c9d7834ee856655972eaf9eb239bb998d68d1 Mon Sep 17 00:00:00 2001
From: vm-silicons <vm-silicons>
Date: Sat, 20 Dec 2025 11:26:00 -0800
Subject: [PATCH] update

---
 .../packages/tgui/components/LegacyModule.tsx |  59 --------
 tgui/packages/tgui/interfaces/AirAlarm.tsx    |  14 +-
 tgui/packages/tgui/interfaces/AlertModal.tsx  |   8 +-
 .../tgui/interfaces/AtmosControlConsole.tsx   |   2 +-
 .../tgui/interfaces/BluespaceSender.tsx       |   2 +-
 .../tgui/interfaces/BluespaceVendor.tsx       |   2 +-
 tgui/packages/tgui/interfaces/Canister.tsx    |   2 +-
 .../tgui/interfaces/CentcomPodLauncher.tsx    |   6 +-
 tgui/packages/tgui/interfaces/Changelog.tsx   |   6 +-
 .../tgui/interfaces/ChemDispenser.tsx         |   2 +-
 tgui/packages/tgui/interfaces/ChemHeater.tsx  |   4 +-
 .../tgui/interfaces/ChemRecipeDebug.tsx       | 130 +++++++++---------
 .../packages/tgui/interfaces/ChemSplitter.tsx |   2 +-
 .../tgui/interfaces/ChemSynthesizer.tsx       |   2 +-
 .../packages/tgui/interfaces/Crystallizer.tsx |   2 +-
 .../tgui/interfaces/ExosuitControlConsole.tsx |   2 +-
 tgui/packages/tgui/interfaces/Filteriffic.tsx |   3 +-
 tgui/packages/tgui/interfaces/Gps.tsx         |   2 +-
 tgui/packages/tgui/interfaces/Hypertorus.tsx  |   2 +-
 .../IntegratedCircuit/Connections.tsx         |   5 +-
 .../IntegratedCircuit/ObjectComponent.tsx     |  12 +-
 .../interfaces/IntegratedCircuit/Port.tsx     |   8 +-
 .../interfaces/IntegratedCircuit/index.tsx    |  18 +--
 tgui/packages/tgui/interfaces/ListInput.tsx   |   2 +-
 tgui/packages/tgui/interfaces/MassSpec.tsx    |   2 +-
 tgui/packages/tgui/interfaces/NtosAtmos.tsx   |   2 +-
 .../tgui/interfaces/NtosNetDownloader.tsx     |  60 ++++----
 .../tgui/interfaces/NtosRbmkStats.tsx         |   2 +-
 tgui/packages/tgui/interfaces/PaperSheet.tsx  |  71 +++++-----
 .../packages/tgui/interfaces/PowerMonitor.tsx |   4 +-
 tgui/packages/tgui/interfaces/Radio.tsx       |  28 ++--
 tgui/packages/tgui/interfaces/RbmkStats.tsx   |   2 +-
 tgui/packages/tgui/interfaces/Secrets.tsx     |  10 +-
 tgui/packages/tgui/interfaces/Signaler.tsx    |   2 +-
 .../packages/tgui/interfaces/SkillStation.tsx |  22 +--
 .../tgui/interfaces/SupermatterMonitor.tsx    |   2 +-
 tgui/packages/tgui/interfaces/Tank.tsx        |   2 +-
 .../tgui/interfaces/TelecommsInteraction.tsx  |   2 +-
 tgui/packages/tgui/interfaces/Thermometer.tsx |   4 +-
 .../tgui/interfaces/VaultController.tsx       |   2 +-
 40 files changed, 228 insertions(+), 286 deletions(-)
 delete mode 100644 tgui/packages/tgui/components/LegacyModule.tsx

diff --git a/tgui/packages/tgui/components/LegacyModule.tsx b/tgui/packages/tgui/components/LegacyModule.tsx
deleted file mode 100644
index 492adfd3f6..0000000000
--- a/tgui/packages/tgui/components/LegacyModule.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-
-/**
- * /datum/tgui_module stuff
- * Citadel in house
- * Suffer.
- *
- * Basically, how this works, is we inject the module's
- * id, ref, data, and act into context, fetched with useModule().
- *
- * id: The tgui's module id from props; obviously must be unique
- * module: The tgui module's interface name
- * ref: The tgui_module's datum ref
- * data: The module's data passed into data.modules
- * act: A pre-built act function that automatically routes to the right datum procs.
- *
- * You should use the provided act instead of the one from useBackend().
- * useBackend() still works fine to grab the overall non-module context.
- *
- * @file
- * @license MIT
- */
-
-import React, { Component, createContext } from "react";
-
-import { useBackend } from "../backend";
-import { getComponentForRoute } from "../routes";
-import { SectionProps } from ".";
-
-export const LegacyModuleContext = createContext<{
-  isModule: boolean;
-  moduleId: string | null;
-  moduleSection: SectionProps | null;
-}>({
-  isModule: false,
-  moduleId: null,
-  moduleSection: null,
-});
-
-export interface ModuleProps {
-  id: string;
-  section?: SectionProps;
-}
-
-// eslint-disable-next-line react/prefer-stateless-function
-export class LegacyModule<T extends ModuleProps, S = {}> extends Component<T, S> {
-  render() {
-    const moduleData = useBackend().nestedData[this.props.id as string];
-    const RoutedComponent = getComponentForRoute(moduleData["$tgui"]);
-    return (
-      <LegacyModuleContext value={{
-        isModule: true,
-        moduleId: this.props.id,
-        moduleSection: this.props.section || null,
-      }}>
-        <RoutedComponent />
-      </LegacyModuleContext>
-    );
-  }
-}
diff --git a/tgui/packages/tgui/interfaces/AirAlarm.tsx b/tgui/packages/tgui/interfaces/AirAlarm.tsx
index 2f25cf48ef..c3cdb086ea 100644
--- a/tgui/packages/tgui/interfaces/AirAlarm.tsx
+++ b/tgui/packages/tgui/interfaces/AirAlarm.tsx
@@ -1,4 +1,4 @@
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { Fragment } from 'react';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, LabeledList, Section } from 'tgui-core/components';
@@ -73,12 +73,12 @@ const AirAlarmStatus = (props) => {
             </LabeledList.Item>
           </>
         ) || (
-          <LabeledList.Item
-            label="Warning"
-            color="bad">
-            Cannot obtain air sample for analysis.
-          </LabeledList.Item>
-        )}
+            <LabeledList.Item
+              label="Warning"
+              color="bad">
+              Cannot obtain air sample for analysis.
+            </LabeledList.Item>
+          )}
         {!!data.emagged && (
           <LabeledList.Item
             label="Warning"
diff --git a/tgui/packages/tgui/interfaces/AlertModal.tsx b/tgui/packages/tgui/interfaces/AlertModal.tsx
index 404b16206a..4a4a9ba2cc 100644
--- a/tgui/packages/tgui/interfaces/AlertModal.tsx
+++ b/tgui/packages/tgui/interfaces/AlertModal.tsx
@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { clamp01 } from 'common/math';
+import { clamp01 } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { Component, createRef } from 'react';
 import { Box, Flex, Section } from 'tgui-core/components';
@@ -26,7 +26,7 @@ export class AlertModal extends Component {
   }
 
   componentDidMount() {
-    const { data } = useBackend(this.context);
+    const { data } = useBackend<any>();
     const { buttons, autofocus } = data;
     const { current } = this.state;
     const button = this.buttonRefs[current].current;
@@ -42,7 +42,7 @@ export class AlertModal extends Component {
   }
 
   setCurrent(current, isArrowKey) {
-    const { data } = useBackend(this.context);
+    const { data } = useBackend<any>();
     const { buttons } = data;
 
     // Mimic alert() behavior for tabs and arrow keys
@@ -62,7 +62,7 @@ export class AlertModal extends Component {
   }
 
   render() {
-    const { act, data } = useBackend(this.context);
+    const { act, data } = useBackend<any>();
     const { title, message, buttons, timeout } = data;
     const { current } = this.state;
     const focusCurrentButton = () => this.setCurrent(current, false);
diff --git a/tgui/packages/tgui/interfaces/AtmosControlConsole.tsx b/tgui/packages/tgui/interfaces/AtmosControlConsole.tsx
index 2bf50028f4..33b9dbf074 100644
--- a/tgui/packages/tgui/interfaces/AtmosControlConsole.tsx
+++ b/tgui/packages/tgui/interfaces/AtmosControlConsole.tsx
@@ -1,5 +1,5 @@
 import { map } from 'common/collections';
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { Button, LabeledList, NumberInput, Section } from 'tgui-core/components';
 import { Window } from '../layouts';
diff --git a/tgui/packages/tgui/interfaces/BluespaceSender.tsx b/tgui/packages/tgui/interfaces/BluespaceSender.tsx
index 420ba99ce1..032523998c 100644
--- a/tgui/packages/tgui/interfaces/BluespaceSender.tsx
+++ b/tgui/packages/tgui/interfaces/BluespaceSender.tsx
@@ -1,6 +1,6 @@
 import { filter, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { Button, Divider, LabeledList, NumberInput, ProgressBar, Section, Stack, Box, AnimatedNumber } from 'tgui-core/components';
 import { getGasColor, getGasLabel } from '../constants';
diff --git a/tgui/packages/tgui/interfaces/BluespaceVendor.tsx b/tgui/packages/tgui/interfaces/BluespaceVendor.tsx
index 6c22ec2584..fc17d8bfbf 100644
--- a/tgui/packages/tgui/interfaces/BluespaceVendor.tsx
+++ b/tgui/packages/tgui/interfaces/BluespaceVendor.tsx
@@ -1,6 +1,6 @@
 import { filter, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { multiline } from 'tgui-core/string';
 import { useBackend } from '../backend';
 import { Button, Divider, LabeledList, NumberInput, ProgressBar, Section, Stack, Box } from 'tgui-core/components';
diff --git a/tgui/packages/tgui/interfaces/Canister.tsx b/tgui/packages/tgui/interfaces/Canister.tsx
index 1d90cf83f7..13c4a4c58a 100644
--- a/tgui/packages/tgui/interfaces/Canister.tsx
+++ b/tgui/packages/tgui/interfaces/Canister.tsx
@@ -1,4 +1,4 @@
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { Box, Button, Flex, Icon, Knob, LabeledControls, LabeledList, RoundGauge, Section, Tooltip } from 'tgui-core/components';
 import { formatSiUnit } from 'tgui-core/format';
diff --git a/tgui/packages/tgui/interfaces/CentcomPodLauncher.tsx b/tgui/packages/tgui/interfaces/CentcomPodLauncher.tsx
index 6a2282190b..f566cfc853 100644
--- a/tgui/packages/tgui/interfaces/CentcomPodLauncher.tsx
+++ b/tgui/packages/tgui/interfaces/CentcomPodLauncher.tsx
@@ -1,4 +1,4 @@
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { classes } from 'common/react';
 import { storage } from 'common/storage';
 import { multiline } from 'tgui-core/string';
@@ -757,7 +757,7 @@ class PresetsPage extends Component {
   }
 
   async loadDataFromPreset(id, context) {
-    const { act } = useBackend(this.context);
+    const { act } = useBackend<any>();
     act("loadDataFromPreset", {
       payload: await storage.get("podlauncher_preset_" + id),
     });
@@ -795,7 +795,7 @@ class PresetsPage extends Component {
   }
   render() {
     const { presets } = this.state;
-    const { act, data } = useBackend(this.context);
+    const { act, data } = useBackend<any>();
     const [
       presetIndex,
       setSelectedPreset,
diff --git a/tgui/packages/tgui/interfaces/Changelog.tsx b/tgui/packages/tgui/interfaces/Changelog.tsx
index 26006eab39..453580a011 100644
--- a/tgui/packages/tgui/interfaces/Changelog.tsx
+++ b/tgui/packages/tgui/interfaces/Changelog.tsx
@@ -63,7 +63,7 @@ export class Changelog extends Component {
   }
 
   getData = (date, attemptNumber = 1) => {
-    const { act } = useBackend(this.context);
+    const { act } = useBackend<any>();
     const self = this;
     const maxAttempts = 6;
 
@@ -94,7 +94,7 @@ export class Changelog extends Component {
   }
 
   componentDidMount() {
-    const { data: { dates = [] } } = useBackend(this.context);
+    const { data: { dates = [] } } = useBackend<any>();
 
     if (dates) {
       dates.forEach(
@@ -107,7 +107,7 @@ export class Changelog extends Component {
 
   render() {
     const { data, selectedDate, selectedIndex } = this.state;
-    const { data: { dates } } = useBackend(this.context);
+    const { data: { dates } } = useBackend<any>();
     const { dateChoices } = this;
 
     const dateDropdown = dateChoices.length > 0 && (
diff --git a/tgui/packages/tgui/interfaces/ChemDispenser.tsx b/tgui/packages/tgui/interfaces/ChemDispenser.tsx
index e46bceb80f..8cc677830c 100644
--- a/tgui/packages/tgui/interfaces/ChemDispenser.tsx
+++ b/tgui/packages/tgui/interfaces/ChemDispenser.tsx
@@ -1,4 +1,4 @@
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { toTitleCase } from 'tgui-core/string';
 import { Fragment } from 'react';
 import { useBackend, useLocalState } from '../backend';
diff --git a/tgui/packages/tgui/interfaces/ChemHeater.tsx b/tgui/packages/tgui/interfaces/ChemHeater.tsx
index 1ed02d26b4..860833e16b 100644
--- a/tgui/packages/tgui/interfaces/ChemHeater.tsx
+++ b/tgui/packages/tgui/interfaces/ChemHeater.tsx
@@ -1,4 +1,4 @@
-import { round, toFixed } from 'common/math';
+import { round, toFixed } from 'tgui-core/math';
 import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import { AnimatedNumber, Box, Button, LabeledList, NumberInput, Section } from 'tgui-core/components';
@@ -20,7 +20,7 @@ export const ChemHeater = (props) => {
     <Window
       width={300}
       height={320}
-      >
+    >
       <Window.Content scrollable>
         <Section
           title="Thermostat"
diff --git a/tgui/packages/tgui/interfaces/ChemRecipeDebug.tsx b/tgui/packages/tgui/interfaces/ChemRecipeDebug.tsx
index c445ca556f..ba4511c59f 100644
--- a/tgui/packages/tgui/interfaces/ChemRecipeDebug.tsx
+++ b/tgui/packages/tgui/interfaces/ChemRecipeDebug.tsx
@@ -1,4 +1,4 @@
-import { round } from 'common/math';
+import { round } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { AnimatedNumber, Box, Button, Flex, LabeledList, NumberInput, ProgressBar, RoundGauge, Section, Table } from 'tgui-core/components';
 import { Window } from '../layouts';
@@ -60,14 +60,14 @@ export const ChemRecipeDebug = (props) => {
               {processAll && (
                 <Box>All</Box>
               ) || (
-                <Box>
-                  {queuedReactions.length && (
-                    queuedReactions.map(entry => (
-                      entry.name+", "
-                    ))
-                  )}
-                </Box>
-              )}
+                  <Box>
+                    {queuedReactions.length && (
+                      queuedReactions.map(entry => (
+                        entry.name + ", "
+                      ))
+                    )}
+                  </Box>
+                )}
             </LabeledList.Item>
             <LabeledList.Item label="Temp">
               {currentTemp}K
@@ -231,61 +231,61 @@ export const ChemRecipeDebug = (props) => {
               No active reactions.
             </Box>
           ) || (
-            <Table>
-              <Table.Row>
-                <Table.Cell bold color="label">
-                  Reaction
-                </Table.Cell>
-                <Table.Cell bold color="label">
-                  {"Reaction quality"}
-                </Table.Cell>
-                <Table.Cell bold color="label">
-                  Target
-                </Table.Cell>
-              </Table.Row>
-              {activeReactions && activeReactions.map(reaction => (
-                <Table.Row key="reactions">
-                  <Table.Cell width={'60px'} color={reaction.danger && "red"}>
-                    {reaction.name}
+              <Table>
+                <Table.Row>
+                  <Table.Cell bold color="label">
+                    Reaction
                   </Table.Cell>
-                  <Table.Cell width={'100px'} pr={'10px'}>
-                    <AnimatedNumber value={reaction.quality}>
-                      {(_, value) => (
-                        <RoundGauge
-                          size={1.30}
-                          value={value}
-                          minValue={0}
-                          maxValue={1}
-                          alertAfter={reaction.purityAlert}
-                          content={"test"}
-                          format={value => null}
-                          ml={5}
-                          ranges={{
-                            "red": [0, reaction.minPure],
-                            "orange": [reaction.minPure, reaction.inverse],
-                            "yellow": [reaction.inverse, 0.8],
-                            "green": [0.8, 1],
-                          }} />
-                      )}
-                    </AnimatedNumber>
+                  <Table.Cell bold color="label">
+                    {"Reaction quality"}
                   </Table.Cell>
-                  <Table.Cell width={'70px'}>
-                    <ProgressBar
-                      value={reaction.reactedVol}
-                      minValue={0}
-                      maxValue={reaction.targetVol}
-                      textAlign={'center'}
-                      icon={reaction.overheat && "thermometer-full"}
-                      width={7}
-                      color={reaction.overheat ? "red" : "label"}>
-                      {reaction.targetVol}u
-                    </ProgressBar>
+                  <Table.Cell bold color="label">
+                    Target
                   </Table.Cell>
                 </Table.Row>
-              ))}
-              <Table.Row />
-            </Table>
-          )}
+                {activeReactions && activeReactions.map(reaction => (
+                  <Table.Row key="reactions">
+                    <Table.Cell width={'60px'} color={reaction.danger && "red"}>
+                      {reaction.name}
+                    </Table.Cell>
+                    <Table.Cell width={'100px'} pr={'10px'}>
+                      <AnimatedNumber value={reaction.quality}>
+                        {(_, value) => (
+                          <RoundGauge
+                            size={1.30}
+                            value={value}
+                            minValue={0}
+                            maxValue={1}
+                            alertAfter={reaction.purityAlert}
+                            content={"test"}
+                            format={value => null}
+                            ml={5}
+                            ranges={{
+                              "red": [0, reaction.minPure],
+                              "orange": [reaction.minPure, reaction.inverse],
+                              "yellow": [reaction.inverse, 0.8],
+                              "green": [0.8, 1],
+                            }} />
+                        )}
+                      </AnimatedNumber>
+                    </Table.Cell>
+                    <Table.Cell width={'70px'}>
+                      <ProgressBar
+                        value={reaction.reactedVol}
+                        minValue={0}
+                        maxValue={reaction.targetVol}
+                        textAlign={'center'}
+                        icon={reaction.overheat && "thermometer-full"}
+                        width={7}
+                        color={reaction.overheat ? "red" : "label"}>
+                        {reaction.targetVol}u
+                      </ProgressBar>
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+                <Table.Row />
+              </Table>
+            )}
         </Section>
         <Section
           title="Chamber"
@@ -294,15 +294,15 @@ export const ChemRecipeDebug = (props) => {
               {isActive ? "Reacting" : "Waiting"}
             </Box>
           )} >
-          {chamberContents.length &&(
+          {chamberContents.length && (
             <BeakerContents
               beakerLoaded
               beakerContents={chamberContents} />
           ) || (
-            <Box>
-              Nothing
-            </Box>
-          )}
+              <Box>
+                Nothing
+              </Box>
+            )}
         </Section>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/ChemSplitter.tsx b/tgui/packages/tgui/interfaces/ChemSplitter.tsx
index 798cf09705..125a1313c4 100644
--- a/tgui/packages/tgui/interfaces/ChemSplitter.tsx
+++ b/tgui/packages/tgui/interfaces/ChemSplitter.tsx
@@ -1,4 +1,4 @@
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { LabeledList, NumberInput, Section } from 'tgui-core/components';
 import { Window } from '../layouts';
diff --git a/tgui/packages/tgui/interfaces/ChemSynthesizer.tsx b/tgui/packages/tgui/interfaces/ChemSynthesizer.tsx
index 3f2da4dfc2..8d9cfddea6 100644
--- a/tgui/packages/tgui/interfaces/ChemSynthesizer.tsx
+++ b/tgui/packages/tgui/interfaces/ChemSynthesizer.tsx
@@ -1,4 +1,4 @@
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { Box, Button, Section } from 'tgui-core/components';
 import { Window } from '../layouts';
diff --git a/tgui/packages/tgui/interfaces/Crystallizer.tsx b/tgui/packages/tgui/interfaces/Crystallizer.tsx
index 7d87f6c5a6..a0bbbb7591 100644
--- a/tgui/packages/tgui/interfaces/Crystallizer.tsx
+++ b/tgui/packages/tgui/interfaces/Crystallizer.tsx
@@ -1,7 +1,7 @@
 import { useBackend } from '../backend';
 import { AnimatedNumber, Button, Flex, Input, LabeledList, ProgressBar, Section, Table, NumberInput, Box } from 'tgui-core/components';
 import { getGasColor, getGasLabel } from '../constants';
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { Window } from '../layouts';
 
 const logScale = value => Math.log2(16 + Math.max(0, value)) - 4;
diff --git a/tgui/packages/tgui/interfaces/ExosuitControlConsole.tsx b/tgui/packages/tgui/interfaces/ExosuitControlConsole.tsx
index 9ee9369823..75e0f101ee 100644
--- a/tgui/packages/tgui/interfaces/ExosuitControlConsole.tsx
+++ b/tgui/packages/tgui/interfaces/ExosuitControlConsole.tsx
@@ -1,4 +1,4 @@
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { AnimatedNumber, Box, Button, LabeledList, NoticeBox, Section } from 'tgui-core/components';
 import { Window } from '../layouts';
diff --git a/tgui/packages/tgui/interfaces/Filteriffic.tsx b/tgui/packages/tgui/interfaces/Filteriffic.tsx
index 626281177d..7bc3d46259 100644
--- a/tgui/packages/tgui/interfaces/Filteriffic.tsx
+++ b/tgui/packages/tgui/interfaces/Filteriffic.tsx
@@ -1,6 +1,5 @@
 import { map } from 'common/collections';
-import { toFixed } from 'common/math';
-import { numberOfDecimalDigits } from '../../common/math';
+import { numberOfDecimalDigits, toFixed, } from 'tgui-core/math';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Collapsible, ColorBox, Dropdown, Input, LabeledList, NoticeBox, NumberInput, Section } from 'tgui-core/components';
 import { Window } from '../layouts';
diff --git a/tgui/packages/tgui/interfaces/Gps.tsx b/tgui/packages/tgui/interfaces/Gps.tsx
index 7e1e840519..c092753ac5 100644
--- a/tgui/packages/tgui/interfaces/Gps.tsx
+++ b/tgui/packages/tgui/interfaces/Gps.tsx
@@ -1,6 +1,6 @@
 import { map, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
-import { clamp } from 'common/math';
+import { clamp } from 'tgui-core/math';
 import { vecLength, vecSubtract } from 'common/vector';
 import { useBackend } from '../backend';
 import { Box, Button, Icon, LabeledList, Section, Table } from 'tgui-core/components';
diff --git a/tgui/packages/tgui/interfaces/Hypertorus.tsx b/tgui/packages/tgui/interfaces/Hypertorus.tsx
index 049bb14fbb..97a7c55138 100644
--- a/tgui/packages/tgui/interfaces/Hypertorus.tsx
+++ b/tgui/packages/tgui/interfaces/Hypertorus.tsx
@@ -1,6 +1,6 @@
 import { filter, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { Button, LabeledList, NumberInput, ProgressBar, Section, Stack, Box } from 'tgui-core/components';
 import { getGasColor, getGasLabel } from '../constants';
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/Connections.tsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/Connections.tsx
index 249c563f3e..7da65691a1 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/Connections.tsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/Connections.tsx
@@ -1,13 +1,13 @@
+import { classes } from 'tgui-core/react';
 import { CSS_COLORS } from '../../constants';
 import { SVG_CURVE_INTENSITY } from './constants';
-import { classes } from '../../../common/react';
 
 export const Connections = (props) => {
   const { connections } = props;
 
   const isColorClass = (str) => {
     if (typeof str === 'string') {
-      return CSS_COLORS.includes(str);
+      return CSS_COLORS.includes(str as any);
     }
   };
 
@@ -17,7 +17,6 @@ export const Connections = (props) => {
       height="100%"
       style={{
         'position': 'absolute',
-        'pointer-events': 'none',
         'z-index': -1,
       }}>
       {connections.map((val, index) => {
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.tsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.tsx
index d196b6176e..8308f1c63c 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.tsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.tsx
@@ -4,14 +4,14 @@ import {
   Stack, Button, Dropdown,
 } from 'tgui-core/components';
 import { Component } from 'react';
-import { shallowDiffers } from '../../../common/react';
 import { ABSOLUTE_Y_OFFSET } from './constants';
 import { Port } from "./Port";
+import { shallowDiffers } from 'tgui-core/react';
 
 
-export class ObjectComponent extends Component {
-  constructor() {
-    super();
+export class ObjectComponent extends Component<any, any> {
+  constructor(props) {
+    super(props);
     this.state = {
       isDragging: false,
       dragPos: null,
@@ -38,7 +38,7 @@ export class ObjectComponent extends Component {
   }
 
   handleStopDrag(e) {
-    const { act } = useBackend(this.context);
+    const { act } = useBackend<any>();
     const { dragPos } = this.state;
     const { index } = this.props;
     if (dragPos) {
@@ -104,7 +104,7 @@ export class ObjectComponent extends Component {
       onPortMouseUp,
       ...rest
     } = this.props;
-    const { act } = useBackend(this.context);
+    const { act } = useBackend<any>();
     const { startPos, dragPos } = this.state;
 
     let [x_pos, y_pos] = [x, y];
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.tsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.tsx
index f988fe5d1d..d9a09200d5 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.tsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.tsx
@@ -6,9 +6,11 @@ import { Component, createRef } from 'react';
 import { DisplayName } from "./DisplayName";
 
 
-export class Port extends Component {
-  constructor() {
-    super();
+export class Port extends Component<any, any> {
+  iconRef: any;
+
+  constructor(props) {
+    super(props);
     this.iconRef = createRef();
     this.componentDidUpdate = this.componentDidUpdate.bind(this);
     this.componentDidMount = this.componentDidMount.bind(this);
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/index.tsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/index.tsx
index 48293d514c..ea87ed6374 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/index.tsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/index.tsx
@@ -16,9 +16,9 @@ import { Connections } from './Connections';
 import { ObjectComponent } from './ObjectComponent';
 import { VariableMenu } from './VariableMenu';
 
-export class IntegratedCircuit extends Component {
-  constructor() {
-    super();
+export class IntegratedCircuit extends Component<any, any> {
+  constructor(props) {
+    super(props);
     this.state = {
       locations: {},
       selectedPort: null,
@@ -106,7 +106,7 @@ export class IntegratedCircuit extends Component {
   // mouse up called whilst over a port. This means we can check if selectedPort
   // exists and do perform some actions if it does.
   handlePortUp(portIndex, componentId, port, isOutput, event) {
-    const { act } = useBackend(this.context);
+    const { act } = useBackend<any>();
     const {
       selectedPort,
     } = this.state;
@@ -136,7 +136,7 @@ export class IntegratedCircuit extends Component {
   }
 
   handlePortDrag(event) {
-    const { data } = useBackend(this.context);
+    const { data } = useBackend<any>();
     const { screen_x, screen_y } = data;
     this.setState((state) => ({
       mouseX: event.clientX - (state.backgroundX || screen_x),
@@ -154,7 +154,7 @@ export class IntegratedCircuit extends Component {
   }
 
   handlePortRightClick(portIndex, componentId, port, isOutput, event) {
-    const { act } = useBackend(this.context);
+    const { act } = useBackend<any>();
 
     event.preventDefault();
     act('remove_connection', {
@@ -193,7 +193,7 @@ export class IntegratedCircuit extends Component {
   }
 
   handleMouseDown(event) {
-    const { act, data } = useBackend(this.context);
+    const { act, data } = useBackend<any>();
     const { examined_name } = data;
     if (examined_name) {
       act('remove_examined_component');
@@ -201,7 +201,7 @@ export class IntegratedCircuit extends Component {
   }
 
   handleMouseUp(event) {
-    const { act } = useBackend(this.context);
+    const { act } = useBackend<any>();
     const { backgroundX, backgroundY } = this.state;
     if (backgroundX && backgroundY) {
       act("move_screen", {
@@ -212,7 +212,7 @@ export class IntegratedCircuit extends Component {
   }
 
   render() {
-    const { act, data } = useBackend(this.context);
+    const { act, data } = useBackend<any>();
     const {
       components,
       display_name,
diff --git a/tgui/packages/tgui/interfaces/ListInput.tsx b/tgui/packages/tgui/interfaces/ListInput.tsx
index f95f62bc9c..1cefe123f3 100644
--- a/tgui/packages/tgui/interfaces/ListInput.tsx
+++ b/tgui/packages/tgui/interfaces/ListInput.tsx
@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { clamp01 } from 'common/math';
+import { clamp01 } from 'tgui-core/math';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Section, Input, Stack } from 'tgui-core/components';
 import { KEY_DOWN, KEY_UP, KEY_ENTER, KEY_SPACE } from 'common/keycodes';
diff --git a/tgui/packages/tgui/interfaces/MassSpec.tsx b/tgui/packages/tgui/interfaces/MassSpec.tsx
index 9d7897bb07..aa6ddb44c5 100644
--- a/tgui/packages/tgui/interfaces/MassSpec.tsx
+++ b/tgui/packages/tgui/interfaces/MassSpec.tsx
@@ -1,4 +1,4 @@
-import { round } from 'common/math';
+import { round } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { Box, Button, Dimmer, Icon, Section, Slider, Table } from 'tgui-core/components';
 import { Window } from '../layouts';
diff --git a/tgui/packages/tgui/interfaces/NtosAtmos.tsx b/tgui/packages/tgui/interfaces/NtosAtmos.tsx
index f066944df6..579c49d956 100644
--- a/tgui/packages/tgui/interfaces/NtosAtmos.tsx
+++ b/tgui/packages/tgui/interfaces/NtosAtmos.tsx
@@ -1,6 +1,6 @@
 import { filter, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { LabeledList, ProgressBar, Section } from 'tgui-core/components';
 import { getGasColor, getGasLabel } from '../constants';
diff --git a/tgui/packages/tgui/interfaces/NtosNetDownloader.tsx b/tgui/packages/tgui/interfaces/NtosNetDownloader.tsx
index de68e228c2..a5a0de0ddc 100644
--- a/tgui/packages/tgui/interfaces/NtosNetDownloader.tsx
+++ b/tgui/packages/tgui/interfaces/NtosNetDownloader.tsx
@@ -1,4 +1,4 @@
-import { scale, toFixed } from 'common/math';
+import { scale, toFixed } from 'tgui-core/math';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Stack, Icon, LabeledList, NoticeBox, ProgressBar, Section, Tabs } from 'tgui-core/components';
 import { flow } from 'common/fp';
@@ -147,35 +147,35 @@ const Program = (props) => {
               maxValue={program.size}
               value={downloadcompletion} />
           ) || (
-            (!program.installed
-              && program.compatible
-              && program.access
-              && program.size < disk_free) && (
-              <Button
-                bold
-                icon="download"
-                content="Download"
-                disabled={downloading}
-                tooltipPosition="left"
-                tooltip={!!downloading && ('Awaiting download completion...')}
-                onClick={() => act('PRG_downloadfile', {
-                  filename: program.filename,
-                })} />
-            ) || (
-              <Button
-                bold
-                icon={program.installed ? 'check' : 'times'}
-                color={
-                  program.installed ? 'good'
-                    : !program.compatible ? 'bad' : 'grey'
-                }
-                content={
-                  program.installed ? 'Installed'
-                    : !program.compatible ? 'Incompatible'
-                      : !program.access ? 'No Access' : 'No Space'
-                } />
-            )
-          )}
+              (!program.installed
+                && program.compatible
+                && program.access
+                && program.size < disk_free) && (
+                <Button
+                  bold
+                  icon="download"
+                  content="Download"
+                  disabled={downloading}
+                  tooltipPosition="left"
+                  tooltip={!!downloading && ('Awaiting download completion...')}
+                  onClick={() => act('PRG_downloadfile', {
+                    filename: program.filename,
+                  })} />
+              ) || (
+                <Button
+                  bold
+                  icon={program.installed ? 'check' : 'times'}
+                  color={
+                    program.installed ? 'good'
+                      : !program.compatible ? 'bad' : 'grey'
+                  }
+                  content={
+                    program.installed ? 'Installed'
+                      : !program.compatible ? 'Incompatible'
+                        : !program.access ? 'No Access' : 'No Space'
+                  } />
+              )
+            )}
         </Stack.Item>
       </Stack>
       <Box mt={1} italic color="label">
diff --git a/tgui/packages/tgui/interfaces/NtosRbmkStats.tsx b/tgui/packages/tgui/interfaces/NtosRbmkStats.tsx
index 16a72db986..c36f9ae6e5 100644
--- a/tgui/packages/tgui/interfaces/NtosRbmkStats.tsx
+++ b/tgui/packages/tgui/interfaces/NtosRbmkStats.tsx
@@ -1,6 +1,6 @@
 import { map, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { pureComponentHooks } from 'common/react';
 import { Component, Fragment } from 'react';
 import { Box, Button, Chart, ColorBox, Flex, Icon, LabeledList, ProgressBar, Section, Table } from 'tgui-core/components';
diff --git a/tgui/packages/tgui/interfaces/PaperSheet.tsx b/tgui/packages/tgui/interfaces/PaperSheet.tsx
index 5e35c03b07..2d906af8c9 100644
--- a/tgui/packages/tgui/interfaces/PaperSheet.tsx
+++ b/tgui/packages/tgui/interfaces/PaperSheet.tsx
@@ -15,7 +15,7 @@ import { marked } from 'marked';
 import { useBackend } from '../backend';
 import { Box, Flex, Tabs, TextArea } from 'tgui-core/components';
 import { Window } from '../layouts';
-import { clamp } from 'common/math';
+import { clamp } from 'tgui-core/math';
 import { sanitizeText } from '../sanitize';
 import katex from 'katex';
 
@@ -49,7 +49,7 @@ const textWidth = (text, font, fontsize) => {
   return width;
 };
 
-const setFontinText = (text, font, color, bold=false) => {
+const setFontinText = (text, font, color, bold = false) => {
   return "<span style=\""
     + "color:" + color + ";"
     + "font-family:'" + font + "';"
@@ -72,17 +72,17 @@ const sign_regex = /%s(?:ign)?(?=\\s|$)?/igm;
 const createInputField = (length, width, font,
   fontsize, color, id) => {
   return "[<input "
-      + "type=\"text\" "
-      + "style=\""
-      + "font:'" + fontsize + "x " + font + "';"
-      + "color:" + color + ";"
-      + "min-width:" + width + ";"
-      + "max-width:" + width + ";"
-      + "\" "
-      + "id=\"" + id + "\" "
-      + "maxlength=" + length +" "
-      + "size=" + length + " "
-      + "/>]";
+    + "type=\"text\" "
+    + "style=\""
+    + "font:'" + fontsize + "x " + font + "';"
+    + "color:" + color + ";"
+    + "min-width:" + width + ";"
+    + "max-width:" + width + ";"
+    + "\" "
+    + "id=\"" + id + "\" "
+    + "maxlength=" + length + " "
+    + "size=" + length + " "
+    + "/>]";
 };
 
 const createFields = (txt, font, fontsize, color, counter) => {
@@ -141,7 +141,7 @@ const run_marked_default = value => {
 ** It returns any values that were saved and a corrected
 ** html code or null if nothing was updated
 */
-const checkAllFields = (txt, font, color, user_name, bold=false) => {
+const checkAllFields = (txt, font, color, user_name, bold = false) => {
   let matches;
   let values = {};
   let replace = [];
@@ -199,8 +199,8 @@ const checkAllFields = (txt, font, color, user_name, bold=false) => {
 const pauseEvent = e => {
   if (e.stopPropagation) { e.stopPropagation(); }
   if (e.preventDefault) { e.preventDefault(); }
-  e.cancelBubble=true;
-  e.returnValue=false;
+  e.cancelBubble = true;
+  e.returnValue = false;
   return false;
 };
 
@@ -288,7 +288,7 @@ class PaperSheetStamper extends Component {
     };
     this.handleMouseClick = e => {
       if (e.pageY <= 30) { return; }
-      const { act, data } = useBackend(this.context);
+      const { act, data } = useBackend<any>();
       const stamp_obj = {
         x: this.state.x, y: this.state.y, r: this.state.rotate,
         stamp_class: this.props.stamp_class,
@@ -305,14 +305,13 @@ class PaperSheetStamper extends Component {
       rotating = true;
     }
 
-    if (document.getElementById("stamp"))
-    {
+    if (document.getElementById("stamp")) {
       const stamp = document.getElementById("stamp");
       const stampHeight = stamp.clientHeight;
       const stampWidth = stamp.clientWidth;
 
       const currentHeight = rotating ? this.state.y : e.pageY
-      - windowRef.scrollTop - stampHeight;
+        - windowRef.scrollTop - stampHeight;
       const currentWidth = rotating ? this.state.x : e.pageX - (stampWidth / 2);
 
       const widthMin = 0;
@@ -440,7 +439,7 @@ class PaperSheetEdit extends Component {
   }
 
   createPreviewFromData(value, do_fields = false) {
-    const { data } = useBackend(this.context);
+    const { data } = useBackend<any>();
     return createPreview(value,
       this.state.old_text,
       do_fields,
@@ -477,16 +476,18 @@ class PaperSheetEdit extends Component {
   }
   // the final update send to byond, final upkeep
   finalUpdate(new_text) {
-    const { act } = useBackend(this.context);
+    const { act } = useBackend<any>();
     const final_processing = this.createPreviewFromData(new_text, true);
     act('save', final_processing);
-    this.setState(() => { return {
-      textarea_text: "",
-      previewSelected: "save",
-      combined_text: final_processing.text,
-      old_text: final_processing.text,
-      counter: final_processing.field_counter,
-    }; });
+    this.setState(() => {
+      return {
+        textarea_text: "",
+        previewSelected: "save",
+        combined_text: final_processing.text,
+        old_text: final_processing.text,
+        counter: final_processing.field_counter,
+      };
+    });
     // byond should switch us to readonly mode from here
   }
 
@@ -576,12 +577,12 @@ class PaperSheetEdit extends Component {
               backgroundColor={backgroundColor}
               onInput={this.onInputHandler.bind(this)} />
           ) || (
-            <PaperSheetView
-              value={this.state.combined_text}
-              stamps={stamps}
-              fontFamily={fontFamily}
-              textColor={textColor} />
-          )}
+              <PaperSheetView
+                value={this.state.combined_text}
+                stamps={stamps}
+                fontFamily={fontFamily}
+                textColor={textColor} />
+            )}
         </Flex.Item>
       </Flex>
     );
diff --git a/tgui/packages/tgui/interfaces/PowerMonitor.tsx b/tgui/packages/tgui/interfaces/PowerMonitor.tsx
index 4127e04545..b81ff692e6 100644
--- a/tgui/packages/tgui/interfaces/PowerMonitor.tsx
+++ b/tgui/packages/tgui/interfaces/PowerMonitor.tsx
@@ -1,6 +1,6 @@
 import { map, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { pureComponentHooks } from 'common/react';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Chart, ColorBox, Flex, Icon, LabeledList, ProgressBar, Section, Table } from 'tgui-core/components';
@@ -40,7 +40,7 @@ export const PowerMonitorContent = (props) => {
     PEAK_DRAW,
     ...history.supply,
     ...history.demand);
-    // Process area data
+  // Process area data
   const areas = flow([
     map((area, i) => ({
       ...area,
diff --git a/tgui/packages/tgui/interfaces/Radio.tsx b/tgui/packages/tgui/interfaces/Radio.tsx
index d3baeef456..e7372b894d 100644
--- a/tgui/packages/tgui/interfaces/Radio.tsx
+++ b/tgui/packages/tgui/interfaces/Radio.tsx
@@ -1,5 +1,5 @@
 import { map } from 'common/collections';
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, NumberInput, Section } from 'tgui-core/components';
 import { RADIO_CHANNELS } from '../constants';
@@ -48,19 +48,19 @@ export const Radio = (props) => {
                   {toFixed(frequency / 10, 1) + ' kHz'}
                 </Box>
               ) || (
-                <NumberInput
-                  animate
-                  unit="kHz"
-                  step={0.2}
-                  stepPixelSize={10}
-                  minValue={minFrequency / 10}
-                  maxValue={maxFrequency / 10}
-                  value={frequency / 10}
-                  format={value => toFixed(value, 1)}
-                  onChange={(value) => act('frequency', {
-                    adjust: (value - frequency / 10),
-                  })} />
-              )}
+                  <NumberInput
+                    animate
+                    unit="kHz"
+                    step={0.2}
+                    stepPixelSize={10}
+                    minValue={minFrequency / 10}
+                    maxValue={maxFrequency / 10}
+                    value={frequency / 10}
+                    format={value => toFixed(value, 1)}
+                    onChange={(value) => act('frequency', {
+                      adjust: (value - frequency / 10),
+                    })} />
+                )}
               {tunedChannel && (
                 <Box inline color={tunedChannel.color} ml={2}>
                   [{tunedChannel.name}]
diff --git a/tgui/packages/tgui/interfaces/RbmkStats.tsx b/tgui/packages/tgui/interfaces/RbmkStats.tsx
index 055f36c2a1..c5f6e1cf49 100644
--- a/tgui/packages/tgui/interfaces/RbmkStats.tsx
+++ b/tgui/packages/tgui/interfaces/RbmkStats.tsx
@@ -1,6 +1,6 @@
 import { map, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { pureComponentHooks } from 'common/react';
 import { Component, Fragment } from 'react';
 import { Box, Button, Chart, ColorBox, Flex, Icon, LabeledList, ProgressBar, Section, Table } from 'tgui-core/components';
diff --git a/tgui/packages/tgui/interfaces/Secrets.tsx b/tgui/packages/tgui/interfaces/Secrets.tsx
index 6fbb070bd8..c6f92cecde 100644
--- a/tgui/packages/tgui/interfaces/Secrets.tsx
+++ b/tgui/packages/tgui/interfaces/Secrets.tsx
@@ -1,4 +1,4 @@
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend, useLocalState } from '../backend';
 import { Button, Flex, LabeledControls, NoticeBox, RoundGauge, Section, Stack } from 'tgui-core/components';
 import { Window } from '../layouts';
@@ -551,7 +551,7 @@ export const Secrets = (props) => {
     tabIndex,
     setTabIndex,
   ] = useLocalState('tab-index', 2);
-  const TabComponent = TAB2NAME[tabIndex-1].component();
+  const TabComponent = TAB2NAME[tabIndex - 1].component();
   return (
     <Window
       title="Secrets Panel"
@@ -632,7 +632,7 @@ export const Secrets = (props) => {
                       label="Chances of admin complaint">
                       <RoundGauge
                         size={2}
-                        value={TAB2NAME[tabIndex-1].gauge}
+                        value={TAB2NAME[tabIndex - 1].gauge}
                         minValue={0}
                         maxValue={100}
                         alertAfter={100 * 0.70}
@@ -659,8 +659,8 @@ export const Secrets = (props) => {
           <Flex.Item grow={1}>
             <Section
               fill={false}
-              title={TAB2NAME[tabIndex-1].title
-                + " Or: " + TAB2NAME[tabIndex-1].blurb}>
+              title={TAB2NAME[tabIndex - 1].title
+                + " Or: " + TAB2NAME[tabIndex - 1].blurb}>
               <TabComponent />
             </Section>
           </Flex.Item>
diff --git a/tgui/packages/tgui/interfaces/Signaler.tsx b/tgui/packages/tgui/interfaces/Signaler.tsx
index f09185800b..fb58f280d8 100644
--- a/tgui/packages/tgui/interfaces/Signaler.tsx
+++ b/tgui/packages/tgui/interfaces/Signaler.tsx
@@ -1,4 +1,4 @@
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { Button, NumberInput, Section } from 'tgui-core/components';
 import { Window } from '../layouts';
diff --git a/tgui/packages/tgui/interfaces/SkillStation.tsx b/tgui/packages/tgui/interfaces/SkillStation.tsx
index 173f913532..2db30bd082 100644
--- a/tgui/packages/tgui/interfaces/SkillStation.tsx
+++ b/tgui/packages/tgui/interfaces/SkillStation.tsx
@@ -1,4 +1,4 @@
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { Box, Button, Flex, Icon, LabeledList, NoticeBox, Section, Stack, Table } from 'tgui-core/components';
 import { Window } from '../layouts';
@@ -184,10 +184,10 @@ export const ImplantedSkillchips = (props) => {
                 bold
                 color={(!!skill.active && "good"
                 ) || (
-                  (skill.complexity + complexity_used > complexity_max) && "bad"
-                ) || (
-                  "grey"
-                )}
+                    (skill.complexity + complexity_used > complexity_max) && "bad"
+                  ) || (
+                    "grey"
+                  )}
                 textAlign="center">
                 {skill.complexity}
               </Table.Cell>
@@ -225,9 +225,9 @@ export const ImplantedSkillchips = (props) => {
                   tooltip={(!!skill.active_error
                     && !skill.active
                     && skill.active_error) || (
-                    skill.active && "Deactivate") || (
-                    "Activate"
-                  )}
+                      skill.active && "Deactivate") || (
+                      "Activate"
+                    )}
                   tooltipPosition="left"
                   disabled={
                     skill.cooldown
@@ -246,9 +246,9 @@ export const ImplantedSkillchips = (props) => {
 export const TimeFormat = (props) => {
   const { value } = props;
 
-  const seconds = toFixed(Math.floor((value/10) % 60)).padStart(2, "0");
-  const minutes = toFixed(Math.floor((value/(10*60)) % 60)).padStart(2, "0");
-  const hours = toFixed(Math.floor((value/(10*60*60)) % 24)).padStart(2, "0");
+  const seconds = toFixed(Math.floor((value / 10) % 60)).padStart(2, "0");
+  const minutes = toFixed(Math.floor((value / (10 * 60)) % 60)).padStart(2, "0");
+  const hours = toFixed(Math.floor((value / (10 * 60 * 60)) % 24)).padStart(2, "0");
   const formattedValue = `${hours}:${minutes}:${seconds}`;
   return formattedValue;
 };
diff --git a/tgui/packages/tgui/interfaces/SupermatterMonitor.tsx b/tgui/packages/tgui/interfaces/SupermatterMonitor.tsx
index eea140e937..c326d2bdfd 100644
--- a/tgui/packages/tgui/interfaces/SupermatterMonitor.tsx
+++ b/tgui/packages/tgui/interfaces/SupermatterMonitor.tsx
@@ -1,6 +1,6 @@
 import { sortBy } from 'common/collections';
 import { flow } from 'common/fp';
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { Button, LabeledList, ProgressBar, Section, Stack, Table } from 'tgui-core/components';
 import { getGasColor, getGasLabel } from '../constants';
diff --git a/tgui/packages/tgui/interfaces/Tank.tsx b/tgui/packages/tgui/interfaces/Tank.tsx
index 426b8601b0..7ebfa43e6b 100644
--- a/tgui/packages/tgui/interfaces/Tank.tsx
+++ b/tgui/packages/tgui/interfaces/Tank.tsx
@@ -1,4 +1,4 @@
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { Button, LabeledControls, NumberInput, RoundGauge, Section } from 'tgui-core/components';
 import { formatSiUnit } from 'tgui-core/format';
diff --git a/tgui/packages/tgui/interfaces/TelecommsInteraction.tsx b/tgui/packages/tgui/interfaces/TelecommsInteraction.tsx
index 581df907ef..fe70882361 100644
--- a/tgui/packages/tgui/interfaces/TelecommsInteraction.tsx
+++ b/tgui/packages/tgui/interfaces/TelecommsInteraction.tsx
@@ -5,7 +5,7 @@
  */
 import { Window } from '../layouts';
 import { useBackend } from '../backend';
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { RADIO_CHANNELS } from '../constants';
 import { Button, LabeledList, NumberInput, NoticeBox, Section, Input } from 'tgui-core/components';
 
diff --git a/tgui/packages/tgui/interfaces/Thermometer.tsx b/tgui/packages/tgui/interfaces/Thermometer.tsx
index 43dec9e527..3f494bfe2b 100644
--- a/tgui/packages/tgui/interfaces/Thermometer.tsx
+++ b/tgui/packages/tgui/interfaces/Thermometer.tsx
@@ -17,7 +17,7 @@ export class Thermometer extends Component {
   }
 
   render() {
-    const { act, data } = useBackend(this.context);
+    const { act, data } = useBackend<any>();
     return (
       <Window
         width={70}
@@ -67,7 +67,7 @@ const ThermometerIcon = props => {
             'right': 0,
             'transition': 'height 2s ease-out',
             // Temp in %
-            'height': `${((temperature / maxTemperature)*100)}%`,
+            'height': `${((temperature / maxTemperature) * 100)}%`,
             'background-color': '#bd2020',
             'border-radius': '8px',
             'border-bottom': 'none',
diff --git a/tgui/packages/tgui/interfaces/VaultController.tsx b/tgui/packages/tgui/interfaces/VaultController.tsx
index 7194393961..b590ef711a 100644
--- a/tgui/packages/tgui/interfaces/VaultController.tsx
+++ b/tgui/packages/tgui/interfaces/VaultController.tsx
@@ -1,4 +1,4 @@
-import { toFixed } from 'common/math';
+import { toFixed } from 'tgui-core/math';
 import { useBackend } from '../backend';
 import { Button, LabeledList, ProgressBar, Section } from 'tgui-core/components';
 import { Window } from '../layouts';