tgui-core 1.7.3 → 1.7.5

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/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

@@ -4,7 +4,7 @@ import { computeBoxClassName as m, computeBoxProps as a, unit as f } from "../co
 function p(e) {
   return r([
     "Flex",
-    e.inline && "Flex--inline",
+    e.inlineFlex && "Flex--inline",
     m(e)
   ]);
 }

package/dist/components/Image.js

@@ -1,37 +1,38 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import { useRef as p } from "react";
-import { computeBoxProps as f } from "../common/ui.js";
-const l = 5;
-function E(m) {
+import { computeBoxProps as u } from "../common/ui.js";
+const g = 5;
+function C(o) {
   const {
     fixBlur: r = !0,
-    fixErrors: n = !1,
+    fixErrors: m = !1,
     objectFit: s = "fill",
-    src: o,
-    ...i
-  } = m, t = p(0), e = f(i);
+    src: A,
+    ...n
+  } = o, t = p(0), e = u(n);
   return e.style = {
     ...e.style,
     "-ms-interpolation-mode": r ? "nearest-neighbor" : "auto",
     imageRendering: r ? "pixelated" : "auto",
     objectFit: s
-  }, /* @__PURE__ */ a(
+  }, /* @__PURE__ */ c(
     "img",
     {
-      onError: (c) => {
-        if (n && t.current < l) {
-          const u = c.currentTarget;
+      onError: (i) => {
+        if (m && t.current < g) {
+          const a = i.currentTarget;
           setTimeout(() => {
-            u.src = `${o}?attempt=${t.current}`, t.current++;
+            a.src = `${A}?attempt=${t.current}`, t.current++;
           }, 1e3);
         }
       },
-      src: o,
+      src: A || /** Use transparent base64 pixel if there is no src. So we don't get broken image icon when using assets */
+      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
       ...e,
       alt: "dm icon"
     }
   );
 }
 export {
-  E as Image
+  C as Image
 };

package/dist/components/ImageButton.d.ts

@@ -6,6 +6,12 @@ import { Direction } from './DmIcon';
 type Props = Partial<{
     /** Asset cache. Example: `asset={['assetname32x32', thing.key]}` */
     asset: string[];
+    /**
+     * Asset size. Used for asset scaling. Example: `assetSize={32}`
+     * With that, you can use `imageSize` to set asset image size in px.
+     * By default, it's 32px. So if you have 32x32 you don't need to touch it.
+     */
+    assetSize: number;
     /** Classic way to put images. Example: `base64={thing.image}` */
     base64: string;
     /**

package/dist/components/ImageButton.js

@@ -1,148 +1,161 @@
 import { jsxs as I, jsx as t } from "react/jsx-runtime";
-import { classes as l } from "../common/react.js";
-import { computeBoxProps as S } from "../common/ui.js";
-import { DmIcon as z } from "./DmIcon.js";
-import { Icon as A } from "./Icon.js";
-import { Image as D } from "./Image.js";
-import { Stack as $ } from "./Stack.js";
-import { Tooltip as E } from "./Tooltip.js";
+import { classes as c } from "../common/react.js";
+import { computeBoxProps as A } from "../common/ui.js";
+import { DmIcon as D } from "./DmIcon.js";
+import { Icon as E } from "./Icon.js";
+import { Image as y } from "./Image.js";
+import { Stack as N } from "./Stack.js";
+import { Tooltip as F } from "./Tooltip.js";
 function W(d) {
   const {
-    asset: u,
-    base64: c,
-    buttons: i,
-    buttonsAlt: p,
-    children: a,
-    className: N,
-    color: o,
-    disabled: r,
-    dmFallback: k,
+    asset: m,
+    assetSize: u = 32,
+    base64: a,
+    buttons: p,
+    buttonsAlt: g,
+    children: s,
+    className: k,
+    color: e,
+    disabled: i,
+    dmFallback: v,
     dmIcon: b,
     dmIconState: x,
-    fluid: e,
+    fluid: o,
     imageSize: n = 64,
-    imageSrc: g,
-    onClick: m,
+    imageSrc: B,
+    onClick: r,
     onRightClick: f,
-    selected: C,
-    title: B,
+    selected: $,
+    title: C,
     tooltip: _,
-    tooltipPosition: w,
-    ...v
+    tooltipPosition: S,
+    ...z
   } = d;
   let h = /* @__PURE__ */ I(
     "div",
     {
-      className: l([
+      className: c([
         "container",
-        e && (!!i || !!p) && "hasButtons",
-        !m && !f && "noAction",
-        C && "ImageButton--selected",
-        r && "ImageButton--disabled",
-        o && typeof o == "string" ? `ImageButton--color__${o}` : "ImageButton--color__default"
+        o && (!!p || !!g) && "hasButtons",
+        !r && !f && "noAction",
+        $ && "ImageButton--selected",
+        i && "ImageButton--disabled",
+        e && typeof e == "string" ? `ImageButton--color__${e}` : "ImageButton--color__default"
       ]),
-      tabIndex: r ? void 0 : 0,
-      onClick: (s) => {
-        !r && m && m(s);
+      tabIndex: i ? void 0 : 0,
+      onClick: (l) => {
+        !i && r && r(l);
       },
-      onKeyDown: (s) => {
-        s.key === "Enter" && !r && m && m(s);
+      onKeyDown: (l) => {
+        l.key === "Enter" && !i && r && r(l);
       },
-      onContextMenu: (s) => {
-        s.preventDefault(), !r && f && f(s);
+      onContextMenu: (l) => {
+        l.preventDefault(), !i && f && f(l);
       },
-      style: { width: e ? "auto" : `calc(${n}px + 0.5em + 2px)` },
+      style: { width: o ? "auto" : `calc(${n}px + 0.5em + 2px)` },
       children: [
-        /* @__PURE__ */ t("div", { className: "image", children: c || u || g ? /* @__PURE__ */ t(
-          D,
+        /* @__PURE__ */ t("div", { className: "image", children: a || B ? /* @__PURE__ */ t(
+          y,
           {
-            className: l(!c && !g && u || []),
-            src: c ? `data:image/png;base64,${c}` : g,
+            src: a ? `data:image/png;base64,${a}` : B,
             height: `${n}px`,
             width: `${n}px`
           }
         ) : b && x ? /* @__PURE__ */ t(
-          z,
+          D,
           {
             icon: b,
             icon_state: x,
-            fallback: k || /* @__PURE__ */ t(y, { icon: "spinner", spin: !0, size: n }),
+            fallback: v || /* @__PURE__ */ t(w, { icon: "spinner", spin: !0, size: n }),
             height: `${n}px`,
             width: `${n}px`
           }
-        ) : /* @__PURE__ */ t(y, { icon: "question" }) }),
-        e ? /* @__PURE__ */ I("div", { className: "info", children: [
-          B && /* @__PURE__ */ t("span", { className: l(["title", a && "divider"]), children: B }),
-          a && /* @__PURE__ */ t("span", { className: "contentFluid", children: a })
-        ] }) : a && /* @__PURE__ */ t(
+        ) : m ? /* @__PURE__ */ t(
+          y,
+          {
+            className: c(m || []),
+            height: `${n}px`,
+            width: `${n}px`,
+            style: {
+              transform: `scale(${n / u})`,
+              transformOrigin: "top left"
+            }
+          }
+        ) : /* @__PURE__ */ t(w, { icon: "question", size: n }) }),
+        o ? /* @__PURE__ */ I("div", { className: "info", children: [
+          C && /* @__PURE__ */ t("span", { className: c(["title", s && "divider"]), children: C }),
+          s && /* @__PURE__ */ t("span", { className: "contentFluid", children: s })
+        ] }) : s && /* @__PURE__ */ t(
           "span",
           {
-            className: l([
+            className: c([
               "content",
-              C && "ImageButton--contentSelected",
-              r && "ImageButton--contentDisabled",
-              o && typeof o == "string" ? `ImageButton--contentColor__${o}` : "ImageButton--contentColor__default"
+              $ && "ImageButton--contentSelected",
+              i && "ImageButton--contentDisabled",
+              e && typeof e == "string" ? `ImageButton--contentColor__${e}` : "ImageButton--contentColor__default"
             ]),
-            children: a
+            children: s
           }
         )
       ]
     }
   );
-  return _ && (h = /* @__PURE__ */ t(E, { content: _, position: w, children: h })), /* @__PURE__ */ I(
+  return _ && (h = /* @__PURE__ */ t(F, { content: _, position: S, children: h })), /* @__PURE__ */ I(
     "div",
     {
-      className: l([
+      className: c([
         "ImageButton",
-        e && "ImageButton--fluid",
-        N
+        o && "ImageButton--fluid",
+        k
       ]),
-      ...S(v),
+      ...A(z),
       children: [
         h,
-        i && /* @__PURE__ */ t(
+        p && /* @__PURE__ */ t(
           "div",
           {
-            className: l([
+            className: c([
               "buttonsContainer",
-              !a && "buttonsEmpty",
-              e && o && typeof o == "string" ? `ImageButton--buttonsContainerColor__${o}` : e && "ImageButton--buttonsContainerColor__default"
+              !s && "buttonsEmpty",
+              o && i && "ImageButton--disabled",
+              o && e && typeof e == "string" ? `ImageButton--buttonsContainerColor__${e}` : o && "ImageButton--buttonsContainerColor__default"
             ]),
             style: {
               width: "auto"
             },
-            children: i
+            children: p
           }
         ),
-        p && /* @__PURE__ */ t(
+        g && /* @__PURE__ */ t(
           "div",
           {
-            className: l([
+            className: c([
               "buttonsContainer",
               "buttonsAltContainer",
-              !a && "buttonsEmpty",
-              e && o && typeof o == "string" ? `ImageButton--buttonsContainerColor__${o}` : e && "ImageButton--buttonsContainerColor__default"
+              !s && "buttonsEmpty",
+              o && i && "ImageButton--disabled",
+              o && e && typeof e == "string" ? `ImageButton--buttonsContainerColor__${e}` : o && "ImageButton--buttonsContainerColor__default"
             ]),
             style: {
-              width: `calc(${n}px + ${e ? 0 : 0.5}em)`,
-              maxWidth: e ? "auto" : `calc(${n}px +  0.5em)`
+              width: `calc(${n}px + ${o ? 0 : 0.5}em)`,
+              maxWidth: o ? "auto" : `calc(${n}px +  0.5em)`
             },
-            children: p
+            children: g
           }
         )
       ]
     }
   );
 }
-function y(d) {
-  const { icon: u, spin: c = !1, size: i = 64 } = d;
-  return /* @__PURE__ */ t($, { height: `${i}px`, width: `${i}px`, children: /* @__PURE__ */ t($.Item, { grow: !0, textAlign: "center", align: "center", children: /* @__PURE__ */ t(
-    A,
+function w(d) {
+  const { icon: m, spin: u = !1, size: a = 64 } = d;
+  return /* @__PURE__ */ t(N, { height: `${a}px`, width: `${a}px`, children: /* @__PURE__ */ t(N.Item, { grow: !0, textAlign: "center", align: "center", children: /* @__PURE__ */ t(
+    E,
     {
-      spin: c,
-      name: u,
+      spin: u,
+      name: m,
       color: "gray",
-      style: { fontSize: `calc(${i}px * 0.75)` }
+      style: { fontSize: `calc(${a}px * 0.75)` }
     }
   ) }) });
 }

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.3",
+  "version": "1.7.5",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist", "styles"],

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/ImageButton.scss

@@ -36,7 +36,7 @@ $bg-map: colors.$bg-map !default;
 
   @if $hoverable {
     &:hover {
-      background-color: rgba(lighten($color, 50%), $opacity);
+      background-color: rgba(lighten($color, 66%), $opacity);
     }
   }
 }
@@ -159,6 +159,12 @@ $bg-map: colors.$bg-map !default;
       pointer-events: none;
       top: 1px;
       bottom: inherit !important;
+      /** Text outline. Sort of. */
+      text-shadow:
+        0px 0px 4px base.$color-bg,
+        0px 0px 4px base.$color-bg,
+        0px 0px 4px base.$color-bg,
+        0px 0px 4px base.$color-bg;
     }
 
     &.buttonsEmpty {
@@ -249,6 +255,7 @@ $bg-map: colors.$bg-map !default;
       overflow: hidden;
       pointer-events: auto;
       top: inherit;
+      text-shadow: none;
 
       & > * {
         border-top: 1px solid rgba(255, 255, 255, 0.075);

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;
 }