tgui-core 1.7.4 → 1.7.6

package/dist/common/collections.d.ts

@@ -1,10 +1,10 @@
 type Zip<T extends unknown[][]> = {
-    [I in keyof T]: T[I] extends (infer U)[] ? U : never;
+    [K in keyof T]: T[K] extends (infer U)[] ? U : never;
 }[];
 /**
  * Creates an array of grouped elements, the first of which contains
  * the first elements of the given arrays, the second of which contains
  * the second elements of the given arrays, and so on.
  */
-export declare function zip<T extends unknown[][]>(...arrays: T): Zip<T>;
+export declare function zip<T extends unknown[][]>(...arr: T): Zip<T>;
 export {};

package/dist/common/collections.js

@@ -1,15 +1,6 @@
-function s(...n) {
-  if (n.length === 0)
-    return [];
-  const o = n.length, r = n[0].length, u = [];
-  for (let t = 0; t < r; t++) {
-    const l = [];
-    for (let e = 0; e < o; e++)
-      l.push(n[e][t]);
-    u.push(l);
-  }
-  return u;
+function m(...a) {
+  return Array(Math.max(...a.map((p) => p.length))).fill(void 0).map((p, t) => a.map((i) => i[t]));
 }
 export {
-  s as zip
+  m as zip
 };

package/dist/common/keys.d.ts

@@ -21,11 +21,14 @@
  *
  */
 export declare enum KEY {
+    A = "a",
     Alt = "Alt",
     Backspace = "Backspace",
     Control = "Control",
+    D = "d",
     Delete = "Delete",
     Down = "ArrowDown",
+    E = "e",
     End = "End",
     Enter = "Enter",
     Esc = "Esc",
@@ -33,13 +36,17 @@ export declare enum KEY {
     Home = "Home",
     Insert = "Insert",
     Left = "ArrowLeft",
+    N = "n",
     PageDown = "PageDown",
     PageUp = "PageUp",
     Right = "ArrowRight",
+    S = "s",
     Shift = "Shift",
     Space = " ",
     Tab = "Tab",
-    Up = "ArrowUp"
+    Up = "ArrowUp",
+    W = "w",
+    Z = "z"
 }
 /**
  * ### isEscape
@@ -53,3 +60,57 @@ export declare enum KEY {
  * @returns true if key is Escape or Esc, false otherwise
  */
 export declare function isEscape(key: string): boolean;
+/**
+ * ### isAlphabetic
+ *
+ * Checks if the user has hit any alphabetic key (a - z)
+ *
+ * @param key - the key to check, typically from event.key
+ * @returns true if key is in the range of a-z
+ */
+export declare function isAlphabetic(key: string): boolean;
+/**
+ * ### isNumeric
+ *
+ * Checks if the user has hit any numeric key (0 - 9)
+ *
+ * @param key - the key to check, typically from event.key
+ * @returns true if key is in the range of 0 - 9
+ */
+export declare function isNumeric(key: string): boolean;
+/**
+ * ### isCardinal
+ *
+ * Checks if the user has hit any cardinal key (n s w e)
+ *
+ * @param key - the key to check, typically from event.key
+ * @returns true if key matches any cardinal n s w e
+ */
+export declare function isCardinal(key: string): boolean;
+/**
+ * ### isArrow
+ *
+ * Checks if the user has hit any arrow key
+ *
+ * @param key - the key to check, typically from event.key
+ * @returns true if key matches any arrow keys
+ */
+export declare function isArrow(key: string): boolean;
+/**
+ * ### isWasd
+ *
+ * Checks if the user has hit any w a s d key
+ *
+ * @param key - the key to check, typically from event.key
+ * @returns true if key matches any w a s d
+ */
+export declare function isWasd(key: string): boolean;
+/**
+ * ### isMovement
+ *
+ * Checks if the user has hit any movement key (w a s d and arrow keys)
+ *
+ * @param key - the key to check, typically from event.key
+ * @returns true if key matches any movement key w a s d and arrow keys
+ */
+export declare function isMovement(key: string): boolean;

package/dist/common/keys.js

@@ -1,8 +1,32 @@
-var r = /* @__PURE__ */ ((e) => (e.Alt = "Alt", e.Backspace = "Backspace", e.Control = "Control", e.Delete = "Delete", e.Down = "ArrowDown", e.End = "End", e.Enter = "Enter", e.Esc = "Esc", e.Escape = "Escape", e.Home = "Home", e.Insert = "Insert", e.Left = "ArrowLeft", e.PageDown = "PageDown", e.PageUp = "PageUp", e.Right = "ArrowRight", e.Shift = "Shift", e.Space = " ", e.Tab = "Tab", e.Up = "ArrowUp", e))(r || {});
-function t(e) {
-  return e === "Esc" || e === "Escape";
+var n = /* @__PURE__ */ ((r) => (r.A = "a", r.Alt = "Alt", r.Backspace = "Backspace", r.Control = "Control", r.D = "d", r.Delete = "Delete", r.Down = "ArrowDown", r.E = "e", r.End = "End", r.Enter = "Enter", r.Esc = "Esc", r.Escape = "Escape", r.Home = "Home", r.Insert = "Insert", r.Left = "ArrowLeft", r.N = "n", r.PageDown = "PageDown", r.PageUp = "PageUp", r.Right = "ArrowRight", r.S = "s", r.Shift = "Shift", r.Space = " ", r.Tab = "Tab", r.Up = "ArrowUp", r.W = "w", r.Z = "z", r))(n || {});
+function e(r) {
+  return r === "Esc" || r === "Escape";
+}
+function a(r) {
+  return r >= "a" && r <= "z";
+}
+function i(r) {
+  return r >= "0" && r <= "9";
+}
+function s(r) {
+  return r === "n" || r === "s" || r === "w" || r === "e";
+}
+function t(r) {
+  return r === "ArrowUp" || r === "ArrowDown" || r === "ArrowLeft" || r === "ArrowRight";
+}
+function o(r) {
+  return r === "w" || r === "a" || r === "s" || r === "d";
+}
+function c(r) {
+  return o(r) || t(r);
 }
 export {
-  r as KEY,
-  t as isEscape
+  n as KEY,
+  a as isAlphabetic,
+  t as isArrow,
+  s as isCardinal,
+  e as isEscape,
+  c as isMovement,
+  i as isNumeric,
+  o as isWasd
 };

package/dist/common/string.js

@@ -1,4 +1,4 @@
-function p(e, t = (r) => JSON.stringify(r)) {
+function l(e, t = (r) => JSON.stringify(r)) {
   const r = e.toLowerCase().trim();
   return (n) => {
     if (!r)
@@ -8,16 +8,16 @@ function p(e, t = (r) => JSON.stringify(r)) {
   };
 }
 const a = ["a", "e", "i", "o", "u"];
-function l(e, t, r) {
+function f(e, t, r) {
   return t === 1 ? e : r ? e + r : e.endsWith("s") || e.endsWith("x") || e.endsWith("z") || e.endsWith("ch") || e.endsWith("sh") ? `${e}es` : e.endsWith("y") && !a.includes(e.charAt(e.length - 2)) ? `${e.slice(0, -1)}ies` : `${e}s`;
 }
 function c(e) {
   return e.charAt(0).toUpperCase() + e.slice(1).toLowerCase();
 }
-function f(e) {
+function h(e) {
   return e.replace(/(^\w{1})|(\s+\w{1})/g, (t) => t.toUpperCase());
 }
-function h(e) {
+function g(e) {
   return e.replace(/^\w/, (t) => t.toUpperCase());
 }
 const i = ["Id", "Tv"], u = [
@@ -43,7 +43,7 @@ const i = ["Id", "Tv"], u = [
   "To",
   "With"
 ];
-function g(e) {
+function d(e) {
   if (!e) return e;
   let t = e.replace(/([^\W_]+[^\s-]*) */g, (r) => c(r));
   for (const r of u) {
@@ -56,20 +56,19 @@ function g(e) {
   }
   return t;
 }
-const s = {
+const s = /&(nbsp|amp|quot|lt|gt|apos|trade|copy);/g, p = {
   amp: "&",
   apos: "'",
   gt: ">",
   lt: "<",
   nbsp: " ",
-  quot: '"'
+  quot: '"',
+  trade: "™",
+  cops: "©"
 };
-function d(e) {
+function m(e) {
   return e && e.replace(/<br>/gi, `
-`).replace(/<\/?[a-z0-9-_]+[^>]*>/gi, "").replace(
-    /&(nbsp|amp|quot|lt|gt|apos);/g,
-    (t, r) => s[r]
-  ).replace(/&#?([0-9]+);/gi, (t, r) => {
+`).replace(/<\/?[a-z0-9-_]+[^>]*>/gi, "").replace(s, (t, r) => p[r]).replace(/&#?([0-9]+);/gi, (t, r) => {
     const n = Number.parseInt(r, 10);
     return String.fromCharCode(n);
   }).replace(/&#x?([0-9a-f]+);/gi, (t, r) => {
@@ -80,10 +79,10 @@ function d(e) {
 export {
   a as VOWELS,
   c as capitalize,
-  f as capitalizeAll,
-  h as capitalizeFirst,
-  p as createSearch,
-  d as decodeHtmlEntities,
-  l as pluralize,
-  g as toTitleCase
+  h as capitalizeAll,
+  g as capitalizeFirst,
+  l as createSearch,
+  m as decodeHtmlEntities,
+  f as pluralize,
+  d as toTitleCase
 };

package/dist/common/vector.d.ts

@@ -0,0 +1,18 @@
+/** Represents a vector as an array of numbers */
+export type Vector = number[];
+/** Adds multiple vectors together element-wise */
+export declare function vecAdd(...vecs: Vector[]): Vector;
+/** Subtracts multiple vectors element-wise */
+export declare function vecSubtract(...vecs: Vector[]): Vector;
+/** Multiplies multiple vectors element-wise */
+export declare function vecMultiply(...vecs: Vector[]): Vector;
+/** Divides multiple vectors element-wise */
+export declare function vecDivide(...vecs: Vector[]): Vector;
+/** Multiplies a vector by a scalar number */
+export declare function vecScale(vec: Vector, n: number): Vector;
+/** Negates all elements of a vector */
+export declare function vecInverse(vec: Vector): Vector;
+/** Calculates the Euclidean length of a vector */
+export declare function vecLength(vec: Vector): number;
+/** Returns a normalized (unit length) version of the vector */
+export declare function vecNormalize(vec: Vector): Vector;

package/dist/common/vector.js

@@ -0,0 +1,48 @@
+import { zip as r } from "./collections.js";
+function u(n, e) {
+  return n + e;
+}
+function c(n, e) {
+  return n - e;
+}
+function i(n, e) {
+  return n * e;
+}
+function o(n, e) {
+  return n / e;
+}
+function m(...n) {
+  return r(...n).map((e) => e.reduce(u));
+}
+function p(...n) {
+  return r(...n).map((e) => e.reduce(c));
+}
+function f(...n) {
+  return r(...n).map((e) => e.reduce(i));
+}
+function v(...n) {
+  return r(...n).map((e) => e.reduce(o));
+}
+function l(n, e) {
+  return n.map((t) => t * e);
+}
+function s(n) {
+  return n.map((e) => -e);
+}
+function a(n) {
+  return Math.sqrt(f(n, n).reduce(u));
+}
+function h(n) {
+  const e = a(n);
+  return n.map((t) => t / e);
+}
+export {
+  m as vecAdd,
+  v as vecDivide,
+  s as vecInverse,
+  a as vecLength,
+  f as vecMultiply,
+  h as vecNormalize,
+  l as vecScale,
+  p as vecSubtract
+};

package/dist/components/Button.js

@@ -16,9 +16,9 @@ function N(o) {
     compact: h,
     content: B,
     disabled: t,
-    ellipsis: c,
+    ellipsis: i,
     fluid: e,
-    icon: i,
+    icon: c,
     iconColor: a,
     iconPosition: C,
     iconRotation: I,
@@ -26,10 +26,10 @@ function N(o) {
     iconSpin: P,
     onClick: f,
     selected: x,
-    tooltip: g,
+    tooltip: b,
     tooltipPosition: w,
     verticalAlignContent: y,
-    ...b
+    ...g
   } = o, n = B || u;
   let k = /* @__PURE__ */ r(
     "div",
@@ -47,7 +47,7 @@ function N(o) {
         y && `Button--verticalAlignContent--${y}`,
         l && typeof l == "string" ? `Button--color--${l}` : "Button--color--default",
         d,
-        j(b)
+        j(g)
       ]),
       tabIndex: t ? void 0 : 0,
       onClick: (p) => {
@@ -62,44 +62,44 @@ function N(o) {
           E(p.key) && p.preventDefault();
         }
       },
-      ...q(b),
-      children: /* @__PURE__ */ _("div", { className: "Button__content", children: [
-        i && C !== "right" && /* @__PURE__ */ r(
-          S,
-          {
-            mr: n && 0.5,
-            name: i,
-            color: a,
-            rotation: I,
-            size: R,
-            spin: P
-          }
-        ),
-        c ? /* @__PURE__ */ r(
-          "span",
-          {
-            className: F([
-              "Button--ellipsis",
-              i && "Button__textMargin"
-            ]),
-            children: n
-          }
-        ) : n,
-        i && C === "right" && /* @__PURE__ */ r(
-          S,
-          {
-            ml: n && 0.5,
-            name: i,
-            color: a,
-            rotation: I,
-            size: R,
-            spin: P
-          }
-        )
-      ] })
+      ...q(g),
+      children: /* @__PURE__ */ _(
+        "div",
+        {
+          className: F([
+            "Button__content",
+            i && "Button__content--ellipsis"
+          ]),
+          children: [
+            c && C !== "right" && /* @__PURE__ */ r(
+              S,
+              {
+                mr: n && 0.5,
+                name: c,
+                color: a,
+                rotation: I,
+                size: R,
+                spin: P
+              }
+            ),
+            i ? /* @__PURE__ */ r("span", { className: "Button--ellipsis", children: n }) : n,
+            c && C === "right" && /* @__PURE__ */ r(
+              S,
+              {
+                ml: n && 0.5,
+                name: c,
+                color: a,
+                rotation: I,
+                size: R,
+                spin: P
+              }
+            )
+          ]
+        }
+      )
     }
   );
-  return g && (k = /* @__PURE__ */ r(v, { content: g, position: w, children: k })), k;
+  return b && (k = /* @__PURE__ */ r(v, { content: b, position: w, children: k })), k;
 }
 function T(o) {
   const { checked: s, ...u } = o;
@@ -123,14 +123,14 @@ function L(o) {
     ellipsis: h = !0,
     icon: B,
     onClick: t,
-    ...c
-  } = o, [e, i] = A(!1);
+    ...i
+  } = o, [e, c] = A(!1);
   function a(C) {
     if (!e) {
-      i(!0);
+      c(!0);
       return;
     }
-    t == null || t(C), i(!1);
+    t == null || t(C), c(!1);
   }
   return /* @__PURE__ */ r(
     N,
@@ -138,12 +138,12 @@ function L(o) {
       icon: e ? l : B,
       color: e ? m : u,
       onClick: a,
-      ...c,
+      ...i,
       children: e ? d : s
     }
   );
 }
-function M(o) {
+function Y(o) {
   const {
     children: s,
     color: u = "default",
@@ -153,22 +153,22 @@ function M(o) {
     disabled: h,
     fluid: B,
     icon: t,
-    iconRotation: c,
+    iconRotation: i,
     iconSpin: e,
-    maxLength: i,
+    maxLength: c,
     onCommit: a = () => null,
     placeholder: C,
     tooltip: I,
     tooltipPosition: R,
     ...P
-  } = o, [f, x] = A(!1), g = V(), w = m || s;
+  } = o, [f, x] = A(!1), b = V(), w = m || s;
   function y(n) {
-    const k = g.current;
+    const k = b.current;
     if (!k) return;
     k.value !== "" ? a(n, k.value) : l && a(n, l);
   }
   $(() => {
-    const n = g.current;
+    const n = b.current;
     if (n && f) {
       n.value = d || "";
       try {
@@ -177,7 +177,7 @@ function M(o) {
       }
     }
   }, [f, d]);
-  let b = /* @__PURE__ */ _(
+  let g = /* @__PURE__ */ _(
     O,
     {
       className: F([
@@ -189,13 +189,13 @@ function M(o) {
       ...P,
       onClick: () => x(!0),
       children: [
-        t && /* @__PURE__ */ r(S, { name: t, rotation: c, spin: e }),
+        t && /* @__PURE__ */ r(S, { name: t, rotation: i, spin: e }),
         /* @__PURE__ */ r("div", { children: w }),
         /* @__PURE__ */ r(
           "input",
           {
             disabled: !!h,
-            ref: g,
+            ref: b,
             className: "NumberInput__input",
             style: {
               display: f ? "" : "none",
@@ -216,23 +216,23 @@ function M(o) {
       ]
     }
   );
-  return I && (b = /* @__PURE__ */ r(v, { content: I, position: R, children: b })), b;
+  return I && (g = /* @__PURE__ */ r(v, { content: I, position: R, children: g })), g;
 }
-function Y(o) {
+function G(o) {
   const { accept: s, multiple: u, onSelectFiles: m, ...d } = o, l = z(null);
   async function h(t) {
-    const c = Array.from(t).map((e) => {
-      const i = new FileReader();
+    const i = Array.from(t).map((e) => {
+      const c = new FileReader();
       return new Promise((a) => {
-        i.onload = () => a(i.result), i.readAsText(e);
+        c.onload = () => a(c.result), c.readAsText(e);
       });
     });
-    return await Promise.all(c);
+    return await Promise.all(i);
   }
   async function B(t) {
-    const c = t.target.files;
-    if (c != null && c.length) {
-      const e = await h(c);
+    const i = t.target.files;
+    if (i != null && i.length) {
+      const e = await h(i);
       m(u ? e : e[0]);
     }
   }
@@ -255,7 +255,7 @@ function Y(o) {
   ] });
 }
 ((o) => {
-  o.Checkbox = T, o.Confirm = L, o.Input = M, o.File = Y;
+  o.Checkbox = T, o.Confirm = L, o.Input = Y, o.File = G;
 })(N || (N = {}));
 export {
   N as Button

package/dist/components/Flex.d.ts

@@ -20,7 +20,7 @@ export type FlexProps = Partial<{
      */
     direction: string;
     /** Makes flexbox container inline, with similar behavior to an `inline` property on a `Box`. */
-    inline: boolean;
+    inlineFlex: boolean;
     /**
      * This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are
      * inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow

package/dist/components/Flex.js

@@ -1,70 +1,72 @@
 import { jsx as l } from "react/jsx-runtime";
-import { classes as r } from "../common/react.js";
+import { classes as o } from "../common/react.js";
 import { computeBoxClassName as m, computeBoxProps as a, unit as f } from "../common/ui.js";
-function p(e) {
-  return r([
+function d(e) {
+  return o([
     "Flex",
-    e.inline && "Flex--inline",
+    e.inlineFlex && "Flex--inline",
     m(e)
   ]);
 }
-function d(e) {
-  const { direction: s, wrap: t, align: i, justify: n, ...o } = e;
+function p(e) {
+  const { direction: i, wrap: t, align: r, justify: s, ...n } = e;
   return a({
     style: {
-      ...o.style,
-      flexDirection: s,
+      ...n.style,
+      flexDirection: i,
       flexWrap: t === !0 ? "wrap" : t,
-      alignItems: i,
-      justifyContent: n
+      alignItems: r,
+      justifyContent: s
     },
-    ...o
+    ...n
   });
 }
 function F(e) {
-  const { className: s, ...t } = e;
+  const { className: i, ...t } = e;
   return /* @__PURE__ */ l(
     "div",
     {
-      className: r([s, p(t)]),
-      ...d(t)
+      className: o([i, d(t)]),
+      ...p(t)
     }
   );
 }
-const N = (e) => r(["Flex__item", m(e)]);
+const N = (e) => o(["Flex__item", m(e)]);
 function v(e) {
-  const { style: s, grow: t, order: i, shrink: n, basis: o, align: c, ...u } = e, x = o ?? // IE11: Set basis to specified width if it's known, which fixes certain
+  const { style: i, grow: t, order: r, shrink: s, basis: n, align: c, ...u } = e, x = n ?? // IE11: Set basis to specified width if it's known, which fixes certain
   // bugs when rendering tables inside the flex.
   e.width ?? // If grow is used, basis should be set to 0 to be consistent with
   // flex css shorthand `flex: 1`.
   (t !== void 0 ? 0 : void 0);
   return a({
     style: {
-      ...s,
+      ...i,
+      minWidth: t !== void 0 && 0,
+      minHeight: t !== void 0 && 0,
       flexGrow: t !== void 0 && Number(t),
-      flexShrink: n !== void 0 && Number(n),
+      flexShrink: s !== void 0 && Number(s),
       flexBasis: f(x),
-      order: i,
+      order: r,
       alignSelf: c
     },
     ...u
   });
 }
-function y(e) {
-  const { className: s, ...t } = e;
+function g(e) {
+  const { className: i, ...t } = e;
   return /* @__PURE__ */ l(
     "div",
     {
-      className: r([s, N(e)]),
+      className: o([i, N(e)]),
       ...v(t)
     }
   );
 }
-F.Item = y;
+F.Item = g;
 export {
   F as Flex,
-  p as computeFlexClassName,
+  d as computeFlexClassName,
   N as computeFlexItemClassName,
   v as computeFlexItemProps,
-  d as computeFlexProps
+  p as computeFlexProps
 };

package/dist/components/InfinitePlane.d.ts

@@ -0,0 +1,35 @@
+import { Component, PropsWithChildren } from 'react';
+import { BoxProps } from './Box';
+export type InfinitePlaneProps = PropsWithChildren<{
+    onZoomChange?: (newZoomValue: number) => void;
+    onBackgroundMoved?: (newX: number, newY: number) => void;
+    initialLeft?: number;
+    initialTop?: number;
+    backgroundImage?: string;
+    imageWidth: number;
+} & BoxProps>;
+type InfinitePlaneState = {
+    mouseDown: boolean;
+    left: number;
+    top: number;
+    lastLeft: number;
+    lastTop: number;
+    zoom: number;
+};
+export type MouseEventExtension = {
+    screenZoomX: number;
+    screenZoomY: number;
+};
+export declare class InfinitePlane extends Component<InfinitePlaneProps, InfinitePlaneState> {
+    constructor(props: InfinitePlaneProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    doOffsetMouse: (event: MouseEvent & MouseEventExtension) => void;
+    handleMouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseUp: () => void;
+    handleZoomIncrease: (_event: any) => void;
+    handleZoomDecrease: (_event: any) => void;
+    handleMouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/InfinitePlane.js

@@ -1,20 +1,63 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import { Component as v } from "react";
-import { computeBoxProps as Z } from "../common/ui.js";
-import { Button as c } from "./Button.js";
-import { ProgressBar as g } from "./ProgressBar.js";
-import { Stack as d } from "./Stack.js";
-const p = 0.5, f = 1.5, M = 0.1;
-class k extends v {
-  constructor(e) {
-    super(e), this.state = {
+var x = Object.defineProperty;
+var O = (a, s, o) => s in a ? x(a, s, { enumerable: !0, configurable: !0, writable: !0, value: o }) : a[s] = o;
+var i = (a, s, o) => O(a, typeof s != "symbol" ? s + "" : s, o);
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { Component as Z } from "react";
+import { computeBoxProps as D } from "../common/ui.js";
+import { Button as w } from "./Button.js";
+import { ProgressBar as E } from "./ProgressBar.js";
+import { Stack as h } from "./Stack.js";
+const M = 0.5, v = 1.5, g = 0.1;
+class b extends Z {
+  constructor(o) {
+    super(o);
+    // This is really, REALLY cursed and basically overrides a built-in browser event via propagation rules
+    i(this, "doOffsetMouse", (o) => {
+      const { zoom: e } = this.state;
+      o.screenZoomX = o.screenX * e ** -1, o.screenZoomY = o.screenY * e ** -1;
+    });
+    i(this, "handleMouseDown", (o) => {
+      this.setState((e) => ({
+        mouseDown: !0,
+        lastLeft: o.clientX - e.left,
+        lastTop: o.clientY - e.top
+      }));
+    });
+    i(this, "onMouseUp", () => {
+      this.setState({
+        mouseDown: !1
+      });
+    });
+    i(this, "handleZoomIncrease", (o) => {
+      const { onZoomChange: e } = this.props, { zoom: n } = this.state, t = Math.min(n + g, v);
+      this.setState({
+        zoom: t
+      }), e && e(t);
+    });
+    i(this, "handleZoomDecrease", (o) => {
+      const { onZoomChange: e } = this.props, { zoom: n } = this.state, t = Math.max(n - g, M);
+      this.setState({
+        zoom: t
+      }), e && e(t);
+    });
+    i(this, "handleMouseMove", (o) => {
+      const { onBackgroundMoved: e, initialLeft: n = 0, initialTop: t = 0 } = this.props;
+      if (this.state.mouseDown) {
+        let l, m;
+        this.setState((d) => (l = o.clientX - d.lastLeft, m = o.clientY - d.lastTop, e && e(l + n, m + t), {
+          left: l,
+          top: m
+        }));
+      }
+    });
+    this.state = {
       mouseDown: !1,
       left: 0,
       top: 0,
       lastLeft: 0,
       lastTop: 0,
       zoom: 1
-    }, this.handleMouseDown = this.handleMouseDown.bind(this), this.handleMouseMove = this.handleMouseMove.bind(this), this.handleZoomIncrease = this.handleZoomIncrease.bind(this), this.handleZoomDecrease = this.handleZoomDecrease.bind(this), this.onMouseUp = this.onMouseUp.bind(this), this.doOffsetMouse = this.doOffsetMouse.bind(this);
+    };
   }
   componentDidMount() {
     window.addEventListener("mouseup", this.onMouseUp), window.addEventListener("mousedown", this.doOffsetMouse), window.addEventListener("mousemove", this.doOffsetMouse), window.addEventListener("mouseup", this.doOffsetMouse);
@@ -22,67 +65,28 @@ class k extends v {
   componentWillUnmount() {
     window.removeEventListener("mouseup", this.onMouseUp), window.removeEventListener("mousedown", this.doOffsetMouse), window.removeEventListener("mousemove", this.doOffsetMouse), window.removeEventListener("mouseup", this.doOffsetMouse);
   }
-  doOffsetMouse(e) {
-    const { zoom: o } = this.state;
-    e.screenZoomX = e.screenX * o ** -1, e.screenZoomY = e.screenY * o ** -1;
-  }
-  handleMouseDown(e) {
-    this.setState((o) => ({
-      mouseDown: !0,
-      lastLeft: e.clientX - o.left,
-      lastTop: e.clientY - o.top
-    }));
-  }
-  onMouseUp() {
-    this.setState({
-      mouseDown: !1
-    });
-  }
-  handleZoomIncrease(e) {
-    const { onZoomChange: o } = this.props, { zoom: s } = this.state, t = Math.min(s + M, f);
-    this.setState({
-      zoom: t
-    }), o && o(t);
-  }
-  handleZoomDecrease(e) {
-    const { onZoomChange: o } = this.props, { zoom: s } = this.state, t = Math.max(s - M, p);
-    this.setState({
-      zoom: t
-    }), o && o(t);
-  }
-  handleMouseMove(e) {
-    const { onBackgroundMoved: o, initialLeft: s = 0, initialTop: t = 0 } = this.props;
-    if (this.state.mouseDown) {
-      let a, i;
-      this.setState((h) => (a = e.clientX - h.lastLeft, i = e.clientY - h.lastTop, {
-        left: a,
-        top: i
-      })), o && o(a + s, i + t);
-    }
-  }
   render() {
     const {
-      children: e,
-      backgroundImage: o,
-      imageWidth: s,
+      children: o,
+      backgroundImage: e,
+      imageWidth: n,
       initialLeft: t = 0,
-      initialTop: a = 0,
-      ...i
-    } = this.props, { left: h, top: w, zoom: r } = this.state, m = t + h, u = a + w;
-    return /* @__PURE__ */ l(
+      initialTop: l = 0,
+      ...m
+    } = this.props, { left: d, top: L, zoom: u } = this.state, p = t + d, f = l + L;
+    return /* @__PURE__ */ c(
       "div",
       {
-        ref: this.ref,
-        ...Z({
-          ...i,
+        ...D({
+          ...m,
           style: {
-            ...i.style,
+            ...m.style,
             overflow: "hidden",
             position: "relative"
           }
         }),
         children: [
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ r(
             "div",
             {
               onMouseDown: this.handleMouseDown,
@@ -91,43 +95,43 @@ class k extends v {
                 position: "fixed",
                 height: "100%",
                 width: "100%",
-                backgroundImage: `url("${o}")`,
-                backgroundPosition: `${m}px ${u}px`,
+                backgroundImage: `url("${e}")`,
+                backgroundPosition: `${p}px ${f}px`,
                 backgroundRepeat: "repeat",
-                backgroundSize: `${r * s}px`
+                backgroundSize: `${u * n}px`
               }
             }
           ),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ r(
             "div",
             {
               onMouseDown: this.handleMouseDown,
               onMouseMove: this.handleMouseMove,
               style: {
                 position: "fixed",
-                transform: `translate(${m}px, ${u}px) scale(${r})`,
+                transform: `translate(${p}px, ${f}px) scale(${u})`,
                 transformOrigin: "top left",
                 height: "100%",
                 width: "100%"
               },
-              children: e
+              children: o
             }
           ),
-          /* @__PURE__ */ l(d, { position: "absolute", width: "100%", children: [
-            /* @__PURE__ */ n(d.Item, { children: /* @__PURE__ */ n(c, { icon: "minus", onClick: this.handleZoomDecrease }) }),
-            /* @__PURE__ */ n(d.Item, { grow: 1, children: /* @__PURE__ */ l(
-              g,
+          /* @__PURE__ */ c(h, { position: "absolute", width: "100%", children: [
+            /* @__PURE__ */ r(h.Item, { children: /* @__PURE__ */ r(w, { icon: "minus", onClick: this.handleZoomDecrease }) }),
+            /* @__PURE__ */ r(h.Item, { grow: 1, children: /* @__PURE__ */ c(
+              E,
               {
-                minValue: p,
-                value: r,
-                maxValue: f,
+                minValue: M,
+                value: u,
+                maxValue: v,
                 children: [
-                  r,
+                  u,
                   "x"
                 ]
               }
             ) }),
-            /* @__PURE__ */ n(d.Item, { children: /* @__PURE__ */ n(c, { icon: "plus", onClick: this.handleZoomIncrease }) })
+            /* @__PURE__ */ r(h.Item, { children: /* @__PURE__ */ r(w, { icon: "plus", onClick: this.handleZoomIncrease }) })
           ] })
         ]
       }
@@ -135,5 +139,5 @@ class k extends v {
   }
 }
 export {
-  k as InfinitePlane
+  b as InfinitePlane
 };

package/dist/components/Modal.d.ts

@@ -1,4 +1,11 @@
+import { KeyboardEvent } from 'react';
 import { BoxProps } from './Box';
+export type ModalProps = BoxProps & Partial<{
+    /** Fires once the enter key is pressed */
+    onEnter: (e: KeyboardEvent<HTMLInputElement>) => void;
+    /** Fires once the escape key is pressed */
+    onEscape: (e: KeyboardEvent<HTMLInputElement>) => void;
+}>;
 /**
  * ## Modal
  * A modal window. Uses a [Dimmer](https://github.com/tgstation/tgui-core/tree/main/lib/components/Dimmer.tsx)
@@ -6,4 +13,4 @@ import { BoxProps } from './Box';
  *
  * Must be a direct child of a layout component (e.g. `Window`).
  */
-export declare function Modal(props: BoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal(props: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Modal.js

@@ -1,18 +1,22 @@
-import { jsx as r } from "react/jsx-runtime";
-import { classes as t } from "../common/react.js";
-import { computeBoxClassName as a, computeBoxProps as c } from "../common/ui.js";
-import { Dimmer as i } from "./Dimmer.js";
-function f(m) {
-  const { className: s, children: e, ...o } = m;
-  return /* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(
+import { jsx as i } from "react/jsx-runtime";
+import { KEY as n, isEscape as f } from "../common/keys.js";
+import { classes as l } from "../common/react.js";
+import { computeBoxClassName as p, computeBoxProps as d } from "../common/ui.js";
+import { Dimmer as u } from "./Dimmer.js";
+function N(s) {
+  const { className: t, children: a, onEnter: r, onEscape: m, ...e } = s;
+  function c(o) {
+    o.key === n.Enter && (r == null || r(o)), f(o.key) && (m == null || m(o));
+  }
+  return /* @__PURE__ */ i(u, { onKeyDown: c, children: /* @__PURE__ */ i(
     "div",
     {
-      className: t(["Modal", s, a(o)]),
-      ...c(o),
-      children: e
+      className: l(["Modal", t, p(e)]),
+      ...d(e),
+      children: a
     }
   ) });
 }
 export {
-  f as Modal
+  N as Modal
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "1.7.4",
+  "version": "1.7.6",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist", "styles"],
@@ -31,7 +31,8 @@
     "lint": "biome check lib",
     "lint:fix": "prettier . --write && biome check . --fix",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "node --experimental-strip-types --experimental-test-coverage --test ./tests/*.test.ts"
   },
   "author": "jlsnow301",
   "license": "MIT",
@@ -47,8 +48,8 @@
     "@storybook/blocks": "^8.4.7",
     "@storybook/react": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",
-    "@storybook/theming": "^8.4.7",
     "@storybook/test": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

package/styles/components/Button.scss

@@ -91,6 +91,7 @@ $bg-map: colors.$bg-map !default;
   display: block;
   text-overflow: ellipsis;
   overflow: hidden;
+  margin-right: -0.33em;
 }
 
 .Button--fluid {
@@ -164,8 +165,9 @@ $bg-map: colors.$bg-map !default;
 .Button__content {
   display: block;
   align-self: stretch;
-}
 
-.Button__textMargin {
-  margin-left: 0.4rem;
+  &--ellipsis {
+    display: flex; // Inline flex will broke ellipsis, don't change it.
+    align-items: center;
+  }
 }

package/styles/components/Dimmer.scss

@@ -14,5 +14,6 @@ $background-dimness: 0.75 !default;
   right: 0;
   // Dim everything around it
   background-color: rgba(0, 0, 0, $background-dimness);
-  z-index: 1;
+  // Should be enough to cover everything except tooltips
+  z-index: 100;
 }

package/styles/components/Tooltip.scss

@@ -6,7 +6,6 @@ $background-color: hsl(0, 0%, 0%) !default;
 $border-radius: base.$border-radius !default;
 
 .Tooltip {
-  z-index: 2;
   padding: 0.5em 0.75em;
   pointer-events: none;
   text-align: left;
@@ -16,4 +15,6 @@ $border-radius: base.$border-radius !default;
   box-shadow: 0.1em 0.1em 1.25em -0.1em rgba(0, 0, 0, 0.5);
   border-radius: $border-radius;
   max-width: base.em(250px);
+  // Must be over everything
+  z-index: 999;
 }