fixes and allows tgui to work

code/modules/client/preferences/README.md

@@ -419,7 +419,7 @@ In the `.ts` file you created earlier, you must now give the information of your
 
 ```ts
 import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { multiline } from "tgui-core/string";
 
 const Changeling: Antagonist = {
   key: "changeling", // This must be the same as your filename

tgui/docs/writing-tests.md

@@ -12,7 +12,7 @@ test('something', () => {
 
 Refer to [README](../README.md) to learn how to run tests.
 
-There is an example test in `packages/common/react.spec.ts`.
+There is an example test in `packages/tgui-core/react.spec.ts`.
 
 You can read more about Jest here: https://jestjs.io/docs/en/getting-started
 

tgui/packages/tgui/interfaces/AmmoWorkbench.jsx

@@ -1,5 +1,5 @@
 // THIS IS A SKYRAT UI FILE
-import { toTitleCase } from 'common/string';
+import { toTitleCase } from 'tgui-core/string';
 import { useState } from 'react';
 
 import { useBackend, useSharedState } from '../backend';

tgui/packages/tgui/interfaces/AntagInfoAssaultops.tsx

@@ -1,8 +1,5 @@
 // THIS IS A SKYRAT UI FILE
-import { BooleanLike } from 'common/react';
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -12,7 +9,10 @@ import {
   Section,
   Stack,
   Tabs,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 import { Rules } from './AntagInfoRules';
 

tgui/packages/tgui/interfaces/AntagInfoBloodsucker.tsx

@@ -1,9 +1,9 @@
-import { BooleanLike } from 'common/react';
 import { useState } from 'react';
+import { Box, Button, Image, Section, Stack, Tabs } from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
 
 import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
-import { Box, Button, Image, Section, Stack, Tabs } from 'tgui-core/components';
 import { Window } from '../layouts';
 import { Objective } from './common/Objectives';
 import { PowerDetails } from './PowerInfo';

tgui/packages/tgui/interfaces/AntagInfoClock.tsx

@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
+import { Icon, Section, Stack } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Icon, Section, Stack } from '../components';
 import { Window } from '../layouts';
 import { Rules } from './AntagInfoRules';
 

tgui/packages/tgui/interfaces/AntagInfoGhoul.tsx

@@ -1,5 +1,6 @@
+import { Section, Stack } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Section, Stack } from '../components';
 import { Window } from '../layouts';
 import { GhoulProps } from './AntagInfoBloodsucker';
 import { ObjectivePrintout } from './common/Objectives';

tgui/packages/tgui/interfaces/AntagInfoOpfor.tsx

@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
+import { Button, Section, Stack } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Button, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 export const AntagInfoOpfor = (props) => {

tgui/packages/tgui/interfaces/AntagInfoRules.tsx

@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
+import { Stack } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Stack } from '../components';
 import { Objective } from './common/Objectives';
 
 type Info = {

tgui/packages/tgui/interfaces/ArmamentStation.jsx

@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend, useLocalState } from '../backend';
 import {
   Box,
   Button,
@@ -8,7 +7,9 @@ import {
   NoticeBox,
   Section,
   Stack,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
 
 export const ArmamentStation = (props) => {

tgui/packages/tgui/interfaces/BluespaceArtillerySkyrat.tsx

@@ -1,7 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { BooleanLike } from 'common/react';
-
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -9,8 +6,11 @@ import {
   NoticeBox,
   Section,
   Slider,
-} from '../components';
-import { formatPower } from '../format';
+} from 'tgui-core/components';
+import { formatPower } from 'tgui-core/format';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 type Data = {

tgui/packages/tgui/interfaces/BorerChem.jsx

@@ -1,8 +1,14 @@
 // THIS IS A SKYRAT UI FILE
-import { toFixed } from 'common/math';
+import {
+  Box,
+  Button,
+  LabeledList,
+  ProgressBar,
+  Section,
+} from 'tgui-core/components';
+import { toFixed } from 'tgui-core/math';
 
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
 import { Window } from '../layouts';
 
 export const BorerChem = (props) => {

tgui/packages/tgui/interfaces/BorerEvolution.tsx

@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
+import { BlockQuote, Button, Section, Stack } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { BlockQuote, Button, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 const borerColor = {

tgui/packages/tgui/interfaces/CargoImportConsole.jsx

@@ -1,8 +1,15 @@
 // THIS IS A SKYRAT UI FILE
 import { useState } from 'react';
+import {
+  Box,
+  Button,
+  Divider,
+  Image,
+  Section,
+  Stack,
+} from 'tgui-core/components';
 
 import { useBackend } from '../backend';
-import { Box, Button, Divider, Image, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 export const CargoImportConsole = (props) => {

tgui/packages/tgui/interfaces/CharacterPreview.tsx

@@ -1,4 +1,4 @@
-import { ByondUi } from '../components';
+import { ByondUi } from 'tgui-core/components';
 
 export const CharacterPreview = (props: { height: string; id: string }) => {
   return (

tgui/packages/tgui/interfaces/ChemPress.jsx

@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -7,7 +6,9 @@ import {
   LabeledList,
   NumberInput,
   Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const ChemPress = (props) => {

tgui/packages/tgui/interfaces/ClockworkResearch.tsx

@@ -1,7 +1,15 @@
 // THIS IS A SKYRAT UI FILE
-import { BooleanLike, classes } from '../../common/react';
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Section,
+  Stack,
+} from 'tgui-core/components';
+import { BooleanLike, classes } from 'tgui-core/react';
+
 import { useBackend } from '../backend';
-import { Box, Button, Divider, Flex, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 type Data = {

tgui/packages/tgui/interfaces/ClockworkSlab.jsx

@@ -1,7 +1,5 @@
 // THIS IS A SKYRAT UI FILE
 import { Fragment } from 'react';
-
-import { useBackend, useLocalState } from '../backend';
 import {
   Box,
   Button,
@@ -12,8 +10,9 @@ import {
   Section,
   Stack,
   Table,
-} from '../components';
-import { TableRow } from '../components/Table';
+} from 'tgui-core/components';
+
+import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
 
 const brassColor = '#DFC69C';
@@ -221,7 +220,7 @@ const ClockworkSpellList = (props) => {
       {scriptures.map((script) =>
         script.type === selectedTab ? (
           <Fragment key={script}>
-            <TableRow>
+            <Table.Row>
               <Table.Cell bold>{script.name}</Table.Cell>
               <Table.Cell collapsing textAlign="right">
                 <Button
@@ -245,8 +244,8 @@ const ClockworkSpellList = (props) => {
                   }
                 />
               </Table.Cell>
-            </TableRow>
-            <TableRow>
+            </Table.Row>
+            <Table.Row>
               <Table.Cell>{script.desc}</Table.Cell>
               <Table.Cell collapsing textAlign="right">
                 <Button
@@ -260,7 +259,7 @@ const ClockworkSpellList = (props) => {
                   }
                 />
               </Table.Cell>
-            </TableRow>
+            </Table.Row>
             <Table.Cell>
               <Divider />
             </Table.Cell>

tgui/packages/tgui/interfaces/ColorPickerModal.tsx

@@ -14,26 +14,26 @@ import {
   rgbaToHsva,
   validHex,
 } from 'common/colorpicker';
-import { clamp } from 'common/math';
-import { classes } from 'common/react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Interaction, Interactive } from 'tgui/components/Interactive';
-
-import { useBackend } from '../backend';
 import {
+  Autofocus,
   Box,
   Button,
   Flex,
   NumberInput,
-  Pointer,
   Section,
   Stack,
   Tooltip,
-} from '../components';
-import { Autofocus } from '../components/Autofocus';
+} from 'tgui-core/components';
+import { clamp } from 'tgui-core/math';
+import { classes } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 import { InputButtons } from './common/InputButtons';
+import { Interaction, Interactive } from './common/Interactive';
 import { Loader } from './common/Loader';
+import { Pointer } from './common/Pointer';
 
 interface ColorPickerData {
   autofocus: boolean;

tgui/packages/tgui/interfaces/CommandReportConsole.jsx

@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend } from '../backend';
 import {
   Button,
   Input,
@@ -7,7 +6,9 @@ import {
   Section,
   Stack,
   TextArea,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const CommandReportConsole = (props) => {

tgui/packages/tgui/interfaces/CrewConsoleBubbers.tsx

@@ -1,9 +1,9 @@
-import { BooleanLike } from 'common/react';
-import { createSearch } from 'common/string';
 import { useState } from 'react';
+import { Box, Button, Icon, Input, Section, Table } from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+import { createSearch } from 'tgui-core/string';
 
 import { useBackend } from '../backend';
-import { Box, Button, Icon, Input, Section, Table } from '../components';
 import { COLORS } from '../constants';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/CrewConsoleSkyrat.jsx

@@ -1,8 +1,8 @@
 // THIS IS A SKYRAT UI FILE
 import { sortBy } from 'common/collections';
+import { Box, Button, Icon, Section, Table } from 'tgui-core/components';
 
 import { useBackend } from '../backend';
-import { Box, Button, Icon, Section, Table } from '../components';
 import { COLORS } from '../constants';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/CrewConsoleSkyratBlueshield.jsx

@@ -1,8 +1,8 @@
 // THIS IS A SKYRAT UI FILE
 import { sortBy } from 'common/collections';
+import { Box, Button, Icon, Section, Table } from 'tgui-core/components';
 
 import { useBackend } from '../backend';
-import { Box, Button, Icon, Section, Table } from '../components';
 import { COLORS } from '../constants';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/CryopodConsole.jsx

@@ -1,6 +1,13 @@
 // THIS IS A SKYRAT UI FILE
+import {
+  Button,
+  LabeledList,
+  NoticeBox,
+  Section,
+  Stack,
+} from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Button, LabeledList, NoticeBox, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 export const CryopodConsole = (props) => {

tgui/packages/tgui/interfaces/DelamProcedure.tsx

@@ -1,5 +1,6 @@
 // THIS IS A SKYRAT UI FILE
-import { BlockQuote, Box, NoticeBox, Section } from '../components';
+import { BlockQuote, Box, NoticeBox, Section } from 'tgui-core/components';
+
 import { Window } from '../layouts';
 
 export const DelamProcedure = () => {

tgui/packages/tgui/interfaces/EventPanel.jsx

@@ -1,8 +1,14 @@
 // THIS IS A SKYRAT UI FILE
-import { toFixed } from 'common/math';
+import {
+  Button,
+  LabeledList,
+  NoticeBox,
+  Section,
+  Stack,
+} from 'tgui-core/components';
+import { toFixed } from 'tgui-core/math';
 
 import { useBackend } from '../backend';
-import { Button, LabeledList, NoticeBox, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 export const EventPanel = (props) => {

tgui/packages/tgui/interfaces/ExaminePanel.jsx

@@ -1,9 +1,9 @@
 // THIS IS A SKYRAT UI FILE
 import { useState } from 'react';
+import { ByondUi, Section, Stack, Tabs } from 'tgui-core/components';
 
 import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
-import { ByondUi, Section, Stack, Tabs } from '../components';
 import { Window } from '../layouts';
 
 const formatURLs = (text) => {

tgui/packages/tgui/interfaces/FishingBubbers.tsx

@@ -1,18 +1,18 @@
-import { KEY_CTRL } from 'common/keycodes';
-import { clamp } from 'common/math';
+import { Component } from 'react';
+import { useDispatch } from 'tgui/backend';
+import { Icon, KeyListener } from 'tgui-core/components';
+import { globalEvents, KeyEvent } from 'tgui-core/events';
+import { KEY_CTRL } from 'tgui-core/keycodes';
+import { clamp } from 'tgui-core/math';
 import {
   randomInteger,
   randomNumber,
   randomPick,
   randomProb,
-} from 'common/random';
-import { Component } from 'react';
-import { useDispatch } from 'tgui/backend';
+} from 'tgui-core/random';
 
 import { resolveAsset } from '../assets';
 import { backendSuspendStart, useBackend } from '../backend';
-import { Icon, KeyListener } from '../components';
-import { globalEvents, KeyEvent } from '../events';
 import { Window } from '../layouts';
 
 type Bait = {

tgui/packages/tgui/interfaces/FoodPreferences.tsx

@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
 import {
   Box,
+  Button,
   Dimmer,
   Divider,
   Icon,
@@ -11,7 +12,6 @@ import {
 } from 'tgui-core/components';
 
 import { useBackend } from '../backend';
-import { Button } from '../components/Button';
 import { Window } from '../layouts';
 
 type Data = {

tgui/packages/tgui/interfaces/GlassBlowing.tsx

@@ -1,8 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { toFixed } from 'common/math';
-import { BooleanLike } from 'common/react';
-
-import { useBackend } from '../backend';
 import {
   AnimatedNumber,
   Box,
@@ -12,7 +8,11 @@ import {
   Section,
   Stack,
   Table,
-} from '../components';
+} from 'tgui-core/components';
+import { toFixed } from 'tgui-core/math';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 type GlassData = {

tgui/packages/tgui/interfaces/InteractionMenu.tsx

@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -8,7 +7,9 @@ import {
   NoticeBox,
   Section,
   Stack,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 class Interaction {

tgui/packages/tgui/interfaces/KindredBook.tsx

@@ -1,5 +1,6 @@
+import { Collapsible, Section, Table } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Collapsible, Section, Table } from '../components';
 import { Window } from '../layouts';
 
 type Data = {

tgui/packages/tgui/interfaces/MaturityPrompt.tsx

@@ -1,6 +1,4 @@
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -8,7 +6,9 @@ import {
   NumberInput,
   Section,
   Stack,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 import { Loader } from './common/Loader';
 

tgui/packages/tgui/interfaces/MicrofusionGunControl.jsx

@@ -1,7 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { toFixed } from 'common/math';
-
-import { useBackend } from '../backend';
 import {
   Button,
   LabeledList,
@@ -9,7 +6,10 @@ import {
   ProgressBar,
   Section,
   Stack,
-} from '../components';
+} from 'tgui-core/components';
+import { toFixed } from 'tgui-core/math';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const MicrofusionGunControl = (props) => {

tgui/packages/tgui/interfaces/MilkingMachine.jsx

@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
+import { Box, Button, Section, Stack } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Box, Button, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 let palette;

tgui/packages/tgui/interfaces/Minesweeper.jsx

@@ -1,6 +1,7 @@
+import { Box, Button, Knob, Section } from 'tgui-core/components';
+
 import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
-import { Box, Button, Knob, Section } from '../components';
 import { Window } from '../layouts';
 
 export const Minesweeper = (props, context) => {

tgui/packages/tgui/interfaces/NifPanel.jsx

@@ -1,7 +1,5 @@
 // THIS IS A SKYRAT UI FILE
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   BlockQuote,
   Box,
@@ -15,8 +13,9 @@ import {
   ProgressBar,
   Section,
   Table,
-} from '../components';
-import { TableCell, TableRow } from '../components/Table';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const NifPanel = (props) => {
@@ -83,8 +82,8 @@ export const NifPanel = (props) => {
                         }
                       >
                         <Table>
-                          <TableRow>
-                            <TableCell>
+                          <Table.Row>
+                            <Table.Cell>
                               <Button
                                 icon="bolt"
                                 color="yellow"
@@ -95,8 +94,8 @@ export const NifPanel = (props) => {
                                 : ' ' +
                                   (nifsoft.activation_cost / max_power) * 100 +
                                   '% per activation'}
-                            </TableCell>
-                            <TableCell>
+                            </Table.Cell>
+                            <Table.Cell>
                               <Button
                                 icon="battery-half"
                                 color="orange"
@@ -108,8 +107,8 @@ export const NifPanel = (props) => {
                                 : ' ' +
                                   (nifsoft.active_cost / max_power) * 100 +
                                   '% consumed while active'}
-                            </TableCell>
-                            <TableCell>
+                            </Table.Cell>
+                            <Table.Cell>
                               <Button
                                 icon="exclamation"
                                 color={nifsoft.active ? 'green' : 'red'}
@@ -119,8 +118,8 @@ export const NifPanel = (props) => {
                               {nifsoft.active
                                 ? ' The NIFSoft is active!'
                                 : ' The NIFSoft is inactive!'}
-                            </TableCell>
-                          </TableRow>
+                            </Table.Cell>
+                          </Table.Row>
                         </Table>
                         <br />
                         <BlockQuote preserveWhitespace>

tgui/packages/tgui/interfaces/NifSoulPoem.jsx

@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend } from '../backend';
 import {
   BlockQuote,
   Box,
@@ -9,7 +8,9 @@ import {
   Input,
   LabeledList,
   Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const NifSoulPoem = (props) => {

tgui/packages/tgui/interfaces/NtosNifsoftCatalog.jsx

@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend, useSharedState } from '../backend';
 import {
   BlockQuote,
   Box,
@@ -10,7 +9,9 @@ import {
   LabeledList,
   Section,
   Tabs,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend, useSharedState } from '../backend';
 import { NtosWindow } from '../layouts';
 
 export const NtosNifsoftCatalog = (props) => {

tgui/packages/tgui/interfaces/OpposingForcePanel.jsx

@@ -1,8 +1,5 @@
 // THIS IS A SKYRAT UI FILE
-import { round } from 'common/math';
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -16,7 +13,10 @@ import {
   Stack,
   Tabs,
   TextArea,
-} from '../components';
+} from 'tgui-core/components';
+import { round } from 'tgui-core/math';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const OpposingForcePanel = (props) => {

tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/bubber/character_voice.tsx

@@ -1,4 +1,5 @@
-import { Button, Stack } from '../../../../../../components';
+import { Button, Stack } from 'tgui-core/components';
+
 import {
   CheckboxInput,
   Feature,

tgui/packages/tgui/interfaces/RBMK2.tsx

@@ -1,13 +1,13 @@
-import { BooleanLike } from 'common/react';
-
-import { useBackend } from '../backend';
 import {
   Button,
   LabeledList,
   NoticeBox,
   ProgressBar,
   Section,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 type ReactorInfo = {

tgui/packages/tgui/interfaces/RecordManifest.jsx

@@ -1,8 +1,8 @@
 // THIS IS A SKYRAT UI FILE
-import { classes } from 'common/react';
+import { Button, Icon, Section, Table, Tooltip } from 'tgui-core/components';
+import { classes } from 'tgui-core/react';
 
 import { useBackend } from '../backend';
-import { Button, Icon, Section, Table, Tooltip } from '../components';
 import { Window } from '../layouts';
 
 const commandJobs = [

tgui/packages/tgui/interfaces/ServerControlPanel.jsx

@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
+import { Button, LabeledList, NoticeBox, Section } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Button, LabeledList, NoticeBox, Section } from '../components';
 import { Window } from '../layouts';
 
 export const MicrofusionGunControl = (props) => {

tgui/packages/tgui/interfaces/Signalvib.jsx

@@ -1,8 +1,13 @@
 // THIS IS A SKYRAT UI FILE
-import { toFixed } from 'common/math';
+import {
+  Button,
+  LabeledList,
+  NumberInput,
+  Section,
+} from 'tgui-core/components';
+import { toFixed } from 'tgui-core/math';
 
 import { useBackend } from '../backend';
-import { Button, LabeledList, NumberInput, Section } from '../components';
 import { Window } from '../layouts';
 
 export const Signalvib = (props) => {

tgui/packages/tgui/interfaces/SiliconJobManager.jsx

@@ -1,5 +1,6 @@
+import { Button, NoticeBox, Section, Table } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Box, Button, Dimmer, NoticeBox, Section, Table } from '../components';
 import { NtosWindow } from '../layouts';
 
 export const SiliconJobManager = (props) => {

tgui/packages/tgui/interfaces/Soulcatcher.jsx

@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend } from '../backend';
 import {
   BlockQuote,
   Box,
@@ -10,7 +9,9 @@ import {
   LabeledList,
   ProgressBar,
   Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const Soulcatcher = (props) => {

tgui/packages/tgui/interfaces/SoulcatcherUser.jsx

@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend } from '../backend';
 import {
   BlockQuote,
   Box,
@@ -9,7 +8,9 @@ import {
   Flex,
   LabeledList,
   Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const SoulcatcherUser = (props) => {

tgui/packages/tgui/interfaces/StoryManager.tsx

@@ -1,12 +1,13 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend, useLocalState } from '../backend';
 import {
   Button,
   Collapsible,
   LabeledList,
   Section,
   TextArea,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
 
 type StoryManagerData = {

tgui/packages/tgui/interfaces/SyndContractor.jsx

@@ -1,11 +1,8 @@
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
   Flex,
-  Grid,
   Icon,
   LabeledList,
   Modal,
@@ -14,9 +11,11 @@ import {
   Stack,
   Table,
   Tabs,
-} from '../components';
-import { FakeTerminal } from '../components/FakeTerminal';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { NtosWindow } from '../layouts';
+import { FakeTerminal } from './common/FakeTerminal';
 
 const CONTRACT_STATUS_INACTIVE = 1;
 const CONTRACT_STATUS_ACTIVE = 2;
@@ -287,15 +286,13 @@ const ContractsTab = (props) => {
                 </>
               }
             >
-              <Grid>
-                <Grid.Column>{contract.message}</Grid.Column>
-                <Grid.Column size={0.5}>
-                  <Box bold mb={1}>
-                    Dropoff Location:
-                  </Box>
-                  <Box>{contract.dropoff}</Box>
-                </Grid.Column>
-              </Grid>
+              <NoticeBox>
+                <box>{contract.message}</box>
+                <Box bold mb={1}>
+                  Dropoff Location:
+                </Box>
+                <Box>{contract.dropoff}</Box>
+              </NoticeBox>
             </Section>
           );
         })}

tgui/packages/tgui/interfaces/TimeClock.jsx

@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
+import { Box, Button, LabeledList, Section } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 
 export const TimeClock = (props) => {

tgui/packages/tgui/interfaces/VorePanel/AppearanceDisplay.tsx

@@ -1,7 +1,7 @@
-import { BooleanLike } from 'common/react';
 import { useEffect, useRef, useState } from 'react';
 import { Color } from 'tgui-core/color';
 import { Box, Icon, Image } from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
 
 /**
  * Waits until two XMLHttpRequests have loaded at iconSrc before calling cb().

tgui/packages/tgui/interfaces/VorePanel/BellyUI.tsx

@@ -1,4 +1,3 @@
-import { toFixed } from 'common/math';
 import React, { useEffect, useState } from 'react';
 import { useBackend, useSharedState } from 'tgui/backend';
 import {
@@ -15,8 +14,9 @@ import {
   Stack,
   TextArea,
 } from 'tgui-core/components';
-
 import { FitText } from 'tgui-core/components';
+import { toFixed } from 'tgui-core/math';
+
 import { AppearanceDisplay, BellyFullscreenIcon } from './AppearanceDisplay';
 import * as types from './types';
 

tgui/packages/tgui/interfaces/ZubbersCharacterDirectory.jsx

@@ -1,6 +1,4 @@
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   Button,
   Icon,
@@ -9,7 +7,9 @@ import {
   Section,
   Table,
   Tooltip,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 const erpTagColor = {

tgui/packages/tgui/interfaces/common/Interactive.tsx

@@ -0,0 +1,136 @@
+/**
+ * MIT License
+ * https://github.com/omgovich/react-colorful/
+ *
+ * Copyright (c) 2020 Vlad Shilov <omgovich@ya.ru>
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ * THIS IS A BUBBER FILE
+ */
+
+import React, { Component, createRef, ReactNode, RefObject } from 'react';
+import { clamp } from 'tgui-core/math';
+
+export interface Interaction {
+  left: number;
+  top: number;
+}
+
+// Finds the proper window object to fix iframe embedding issues
+const getParentWindow = (node?: HTMLDivElement | null): Window => {
+  return (node && node.ownerDocument.defaultView) || window;
+};
+
+// Returns a relative position of the pointer inside the node's bounding box
+const getRelativePosition = (
+  node: HTMLDivElement,
+  event: MouseEvent,
+): Interaction => {
+  const rect = node.getBoundingClientRect();
+  const parentWindow = getParentWindow(node);
+
+  const offsetX = event.pageX - (rect.left + parentWindow.pageXOffset);
+  const offsetY = event.pageY - (rect.top + parentWindow.pageYOffset);
+
+  return {
+    left: clamp(offsetX / rect.width, 0, 1),
+    top: clamp(offsetY / rect.height, 0, 1),
+  };
+};
+
+export interface InteractiveProps {
+  onMove: (interaction: Interaction) => void;
+  onKey: (offset: Interaction) => void;
+  children: ReactNode; // Change from ReactNode[] to ReactNode
+  style?: React.CSSProperties;
+}
+
+export class Interactive extends Component<InteractiveProps> {
+  containerRef: RefObject<HTMLDivElement>;
+
+  constructor(props: InteractiveProps) {
+    super(props);
+    this.containerRef = createRef();
+  }
+
+  handleMoveStart = (event: React.MouseEvent<HTMLDivElement>) => {
+    const el = this.containerRef?.current;
+    if (!el) return;
+
+    // Prevent text selection
+    event.preventDefault();
+    el.focus();
+    this.props.onMove(getRelativePosition(el, event.nativeEvent));
+    this.toggleDocumentEvents(true);
+  };
+
+  handleMove = (event: MouseEvent) => {
+    event.preventDefault();
+
+    const isDown = event.buttons > 0;
+
+    if (isDown && this.containerRef?.current) {
+      this.props.onMove(getRelativePosition(this.containerRef.current, event));
+    } else {
+      this.toggleDocumentEvents(false);
+    }
+  };
+
+  handleMoveEnd = () => {
+    this.toggleDocumentEvents(false);
+  };
+
+  handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const keyCode = event.which || event.keyCode;
+
+    if (keyCode < 37 || keyCode > 40) return;
+    event.preventDefault();
+    this.props.onKey({
+      left: keyCode === 39 ? 0.05 : keyCode === 37 ? -0.05 : 0,
+      top: keyCode === 40 ? 0.05 : keyCode === 38 ? -0.05 : 0,
+    });
+  };
+
+  toggleDocumentEvents(state?: boolean) {
+    const el = this.containerRef?.current;
+    const parentWindow = getParentWindow(el);
+
+    const toggleEvent = state
+      ? parentWindow.addEventListener
+      : parentWindow.removeEventListener;
+    toggleEvent('mousemove', this.handleMove);
+    toggleEvent('mouseup', this.handleMoveEnd);
+  }
+
+  componentDidMount() {
+    this.toggleDocumentEvents(true);
+  }
+
+  componentWillUnmount() {
+    this.toggleDocumentEvents(false);
+  }
+
+  render() {
+    const { style, children, ...rest } = this.props;
+    return (
+      <div
+        {...rest}
+        style={style}
+        ref={this.containerRef}
+        onMouseDown={this.handleMoveStart}
+        className="react-colorful__interactive"
+        onKeyDown={this.handleKeyDown}
+        tabIndex={0}
+        role="slider"
+      >
+        {children}
+      </div>
+    );
+  }
+}

tgui/packages/tgui/interfaces/common/Pointer.tsx

@@ -12,8 +12,8 @@
  * SOFTWARE.
  */
 
-import { classes } from 'common/react';
 import React from 'react';
+import { classes } from 'tgui-core/react';
 
 interface PointerProps {
   className?: string;

tgui/packages/tgui/styles/themes/clockwork.scss

@@ -21,7 +21,7 @@
 
   // Components
   @include meta.load-css(
-    'pkg:tgui-styles/components/Button',
+    '~tgui-core/styles/components/Button',
     $with: (
       'color-default': colors.$primary,
       'color-disabled': hsl(46, 26%, 32%),
@@ -30,21 +30,21 @@
       'color-danger': hsl(60, 100%, 50%)
     )
   );
-  @include meta.load-css('pkg:tgui-styles/components/Input');
+  @include meta.load-css('~tgui-core/styles/components/Input');
   @include meta.load-css(
-    'pkg:tgui-styles/components/Tooltip',
+    '~tgui-core/styles/components/Tooltip',
     $with: ('background-color': #2d1400)
   );
   @include meta.load-css(
-    'pkg:tgui-styles/components/Section',
+    '~tgui-core/styles/components/Section',
     $with: ('separator-color': #d6ca85)
   );
   @include meta.load-css(
-    'pkg:tgui-styles/components/Divider',
+    '~tgui-core/styles/components/Divider',
     $with: ('color': #d6ca85)
   );
   @include meta.load-css(
-    'pkg:tgui-styles/components/ProgressBar',
+    '~tgui-core/styles/components/ProgressBar',
     $with: ('background-color': rgba(0, 0, 0, 0.5))
   );