tgui-core 1.2.0 → 1.3.0

package/README.md

@@ -20,7 +20,7 @@ yarn add tgui-core
 Now, you can use them like normal TGUI components.
 
 ```tsx
-import { Button } from 'tgui-core/components';
+import { Button } from "tgui-core/components";
 
 <Button>Click</Button>;
 ```
@@ -28,8 +28,8 @@ import { Button } from 'tgui-core/components';
 You can even use it in tandem with your own in house TGUI components,
 
 ```tsx
-import { Button } from 'tgui-core/components';
-import { Box } from '../components';
+import { Button } from "tgui-core/components";
+import { Box } from "../components";
 ```
 
 ## License

package/dist/common/color.js

@@ -1,24 +1,25 @@
-var b = Object.defineProperty;
-var l = (i, t, s) => t in i ? b(i, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : i[t] = s;
-var e = (i, t, s) => l(i, typeof t != "symbol" ? t + "" : t, s);
+var g = Object.defineProperty;
+var u = (e, t, r) => t in e ? g(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var i = (e, t, r) => u(e, typeof t != "symbol" ? t + "" : t, r);
 class n {
-  constructor(t = 0, s = 0, r = 0, a = 1) {
-    e(this, "r");
-    e(this, "g");
-    e(this, "b");
-    e(this, "a");
-    this.r = t, this.g = s, this.b = r, this.a = a;
+  constructor(t = 0, r = 0, s = 0, a = 1) {
+    i(this, "r");
+    i(this, "g");
+    i(this, "b");
+    i(this, "a");
+    this.r = t, this.g = r, this.b = s, this.a = a;
   }
   toString() {
     let t = this.a;
-    return typeof t == "string" && (t = parseFloat(this.a)), isNaN(t) && (t = 1), `rgba(${this.r | 0}, ${this.g | 0}, ${this.b | 0}, ${t})`;
+    return typeof t == "string" && (t = Number.parseFloat(this.a)), Number.isNaN(t) && (t = 1), `rgba(${this.r | 0}, ${this.g | 0}, ${this.b | 0}, ${t})`;
   }
   /**  Darkens a color by a given percent. Returns a color, which can have toString called to get it's rgba() css value. */
   darken(t) {
-    return t /= 100, new n(
-      this.r - this.r * t,
-      this.g - this.g * t,
-      this.b - this.b * t,
+    const r = t / 100;
+    return new n(
+      this.r - this.r * r,
+      this.g - this.g * r,
+      this.b - this.b * r,
       this.a
     );
   }
@@ -31,37 +32,37 @@ class n {
    */
   static fromHex(t) {
     return new n(
-      parseInt(t.slice(1, 3), 16),
-      parseInt(t.slice(3, 5), 16),
-      parseInt(t.slice(5, 7), 16)
+      Number.parseInt(t.slice(1, 3), 16),
+      Number.parseInt(t.slice(3, 5), 16),
+      Number.parseInt(t.slice(5, 7), 16)
     );
   }
   /**
    * Linear interpolation of two colors.
    */
-  static lerp(t, s, r) {
+  static lerp(t, r, s) {
     return new n(
-      (s.r - t.r) * r + t.r,
-      (s.g - t.g) * r + t.g,
-      (s.b - t.b) * r + t.b,
-      (s.a - t.a) * r + t.a
+      (r.r - t.r) * s + t.r,
+      (r.g - t.g) * s + t.g,
+      (r.b - t.b) * s + t.b,
+      (r.a - t.a) * s + t.a
     );
   }
   /**
    * Loops up the color in the provided list of colors
    * with linear interpolation.
    */
-  static lookup(t, s) {
-    const r = s.length;
-    if (r < 2)
+  static lookup(t, r) {
+    const s = r.length;
+    if (s < 2)
       throw new Error("Needs at least two colors!");
-    const a = t * (r - 1);
+    const a = t * (s - 1);
     if (t < 1e-4)
-      return s[0];
+      return r[0];
     if (t >= 1 - 1e-4)
-      return s[r - 1];
-    const g = a % 1, h = a | 0;
-    return this.lerp(s[h], s[h + 1], g);
+      return r[s - 1];
+    const b = a % 1, h = a | 0;
+    return n.lerp(r[h], r[h + 1], b);
   }
 }
 export {

package/dist/common/events.js

@@ -58,10 +58,10 @@ function a() {
 }
 let w = null, c = null;
 const h = [];
-function A(t) {
+function $(t) {
   h.push(t);
 }
-function B(t) {
+function A(t) {
   const e = h.indexOf(t);
   e >= 0 && h.splice(e, 1);
 }
@@ -121,7 +121,7 @@ class p {
     return this.type === "keyup";
   }
   toString() {
-    return this._str ? this._str : (this._str = "", this.ctrl && (this._str += "Ctrl+"), this.alt && (this._str += "Alt+"), this.shift && (this._str += "Shift+"), this.code >= 48 && this.code <= 90 ? this._str += String.fromCharCode(this.code) : this.code >= K && this.code <= S ? this._str += "F" + (this.code - 111) : this._str += "[" + this.code + "]", this._str);
+    return this._str ? this._str : (this._str = "", this.ctrl && (this._str += "Ctrl+"), this.alt && (this._str += "Alt+"), this.shift && (this._str += "Shift+"), this.code >= 48 && this.code <= 90 ? this._str += String.fromCharCode(this.code) : this.code >= K && this.code <= S ? this._str += `F${this.code - 111}` : this._str += `[${this.code}]`, this._str);
   }
 }
 document.addEventListener("keydown", (t) => {
@@ -139,9 +139,9 @@ document.addEventListener("keyup", (t) => {
 export {
   C as EventEmitter,
   p as KeyEvent,
-  A as addScrollableNode,
+  $ as addScrollableNode,
   E as canStealFocus,
   o as globalEvents,
-  B as removeScrollableNode,
+  A as removeScrollableNode,
   W as setupGlobalEvents
 };

package/dist/common/format.js

@@ -38,21 +38,21 @@ const d = [
   "F",
   "N",
   "H"
-], l = d.indexOf(" ");
-function u(t, n = -l, s = "") {
-  if (!isFinite(t))
+], u = d.indexOf(" ");
+function m(t, n = -u, s = "") {
+  if (!Number.isFinite(t))
     return t.toString();
-  const o = Math.floor(Math.log10(Math.abs(t))), r = Math.max(n * 3, o), e = Math.floor(r / 3), i = d[Math.min(e + l, d.length - 1)];
-  let a = (t / Math.pow(1e3, e)).toFixed(2);
-  return a.endsWith(".00") ? a = a.slice(0, -3) : a.endsWith(".0") && (a = a.slice(0, -2)), `${a} ${i.trim()}${s}`.trim();
-}
-function S(t, n = 0) {
-  return u(t, n, "W");
+  const o = Math.floor(Math.log10(Math.abs(t))), a = Math.max(n * 3, o), e = Math.floor(a / 3), i = d[Math.min(e + u, d.length - 1)];
+  let r = (t / 1e3 ** e).toFixed(2);
+  return r.endsWith(".00") ? r = r.slice(0, -3) : r.endsWith(".0") && (r = r.slice(0, -2)), `${r} ${i.trim()}${s}`.trim();
 }
-function $(t, n = 0) {
-  return u(t, n, "J");
+function M(t, n = 0) {
+  return m(t, n, "W");
 }
 function b(t, n = 0) {
+  return m(t, n, "J");
+}
+function $(t, n = 0) {
   if (!Number.isFinite(t))
     return String(t);
   const s = Number(t.toFixed(n)), o = s < 0, e = Math.abs(s).toString().split(".");
@@ -63,9 +63,9 @@ function b(t, n = 0) {
 function g(t) {
   const n = 20 * Math.log10(t), s = n >= 0 ? "+" : "-";
   let o = Math.abs(n);
-  return o === 1 / 0 ? o = "Inf" : o = o.toFixed(2), `${s}${o} dB`;
+  return o === Number.POSITIVE_INFINITY ? o = "Inf" : o = o.toFixed(2), `${s}${o} dB`;
 }
-const M = [
+const S = [
   "",
   "· 10³",
   // kilo
@@ -91,27 +91,27 @@ const M = [
   "· 10³⁶",
   "· 10³⁹"
 ];
-function p(t, n = 0, s = "") {
-  if (!isFinite(t))
+function N(t, n = 0, s = "") {
+  if (!Number.isFinite(t))
     return "NaN";
-  const o = Math.floor(Math.log10(t)), r = Math.max(n * 3, o), e = Math.floor(r / 3), i = M[e], c = t / Math.pow(1e3, e), a = Math.max(0, 2 - r % 3);
-  return `${c.toFixed(a)} ${i} ${s}`.trim();
+  const o = Math.floor(Math.log10(t)), a = Math.max(n * 3, o), e = Math.floor(a / 3), i = S[e], c = t / 1e3 ** e, r = Math.max(0, 2 - a % 3);
+  return `${c.toFixed(r)} ${i} ${s}`.trim();
 }
 function F(t, n = "default") {
-  const s = Math.floor(t / 10), o = Math.floor(s / 3600), r = Math.floor(s % 3600 / 60), e = s % 60;
+  const s = Math.floor(t / 10), o = Math.floor(s / 3600), a = Math.floor(s % 3600 / 60), e = s % 60;
   if (n === "short") {
-    const f = o > 0 ? `${o}h` : "", m = r > 0 ? `${r}m` : "", h = e > 0 ? `${e}s` : "";
-    return `${f}${m}${h}`;
+    const f = o > 0 ? `${o}h` : "", l = a > 0 ? `${a}m` : "", h = e > 0 ? `${e}s` : "";
+    return `${f}${l}${h}`;
   }
-  const i = String(o).padStart(2, "0"), c = String(r).padStart(2, "0"), a = String(e).padStart(2, "0");
-  return `${i}:${c}:${a}`;
+  const i = String(o).padStart(2, "0"), c = String(a).padStart(2, "0"), r = String(e).padStart(2, "0");
+  return `${i}:${c}:${r}`;
 }
 export {
   g as formatDb,
-  $ as formatEnergy,
-  b as formatMoney,
-  S as formatPower,
-  p as formatSiBaseTenUnit,
-  u as formatSiUnit,
+  b as formatEnergy,
+  $ as formatMoney,
+  M as formatPower,
+  N as formatSiBaseTenUnit,
+  m as formatSiUnit,
   F as formatTime
 };

package/dist/common/hotkeys.d.ts

@@ -1,5 +1,4 @@
 import { KeyEvent } from './events';
-
 /**
  * Acquires a lock on the hotkey, which prevents it from being
  * passed through to BYOND.

package/dist/common/hotkeys.js

@@ -30,9 +30,9 @@ function w(t) {
   if (t >= 48 && t <= 57 || t >= 65 && t <= 90)
     return String.fromCharCode(t);
   if (t >= 96 && t <= 105)
-    return "Numpad" + (t - 96);
+    return `Numpad${t - 96}`;
   if (t >= 112 && t <= 123)
-    return "F" + (t - 111);
+    return `F${t - 111}`;
   if (t === 188) return ",";
   if (t === 189) return "-";
   if (t === 190) return ".";

package/dist/common/math.d.ts

@@ -37,3 +37,7 @@ export declare function keyOfMatchingRange(value: number, ranges: Record<string,
  * Get number of digits following the decimal point in a number
  */
 export declare function numberOfDecimalDigits(value: number): number;
+/**
+ * Ensures the number is valid and not infinite/NaN.
+ */
+export declare function isSafeNumber(value: number): boolean;

package/dist/common/math.js

@@ -1,41 +1,45 @@
-function e(t, n, r) {
-  return t < n ? n : t > r ? r : t;
+function e(n, t, r) {
+  return n < t ? t : n > r ? r : n;
 }
-function c(t) {
-  return t < 0 ? 0 : t > 1 ? 1 : t;
+function u(n) {
+  return n < 0 ? 0 : n > 1 ? 1 : n;
 }
-function f(t, n = 0, r = 100) {
-  return (t - n) / (r - n);
+function f(n, t = 0, r = 100) {
+  return (n - t) / (r - t);
 }
-function u(t, n) {
-  const r = t >= 0 ? 1 : -1;
-  return parseFloat(
-    (Math.round(t * Math.pow(10, n) + r * 1e-4) / Math.pow(10, n)).toFixed(n)
+function c(n, t) {
+  const r = n >= 0 ? 1 : -1;
+  return Number.parseFloat(
+    (Math.round(n * 10 ** t + r * 1e-4) / 10 ** t).toFixed(t)
   );
 }
-function s(t, n = 0) {
-  return Number(t).toFixed(Math.max(n, 0));
+function s(n, t = 0) {
+  return Number(n).toFixed(Math.max(t, 0));
 }
-function i(t, n) {
-  return n && t >= n[0] && t <= n[1];
+function o(n, t) {
+  return t && n >= t[0] && n <= t[1];
 }
-function a(t, n) {
-  for (const r of Object.keys(n)) {
-    const o = n[r];
-    if (i(t, o))
+function m(n, t) {
+  for (const r of Object.keys(t)) {
+    const i = t[r];
+    if (o(n, i))
       return r;
   }
 }
-function h(t) {
-  return Math.floor(t) !== t && t.toString().split(".")[1].length || 0;
+function b(n) {
+  return Math.floor(n) !== n && n.toString().split(".")[1].length || 0;
+}
+function N(n) {
+  return typeof n == "number" && Number.isFinite(n) && !Number.isNaN(n);
 }
 export {
   e as clamp,
-  c as clamp01,
-  i as inRange,
-  a as keyOfMatchingRange,
-  h as numberOfDecimalDigits,
-  u as round,
+  u as clamp01,
+  o as inRange,
+  N as isSafeNumber,
+  m as keyOfMatchingRange,
+  b as numberOfDecimalDigits,
+  c as round,
   f as scale,
   s as toFixed
 };

package/dist/common/random.js

@@ -1,20 +1,21 @@
-import { clamp as r } from "./math.js";
-function o(t, n) {
-  return Math.random() * (n - t) + t;
+import { clamp as a } from "./math.js";
+function e(n, o) {
+  return Math.random() * (o - n) + n;
 }
-function m(t, n) {
-  return t = Math.ceil(t), n = Math.floor(n), Math.floor(Math.random() * (n - t) + t);
+function c(n, o) {
+  const r = Math.ceil(n), t = Math.floor(o);
+  return Math.floor(Math.random() * (t - r) + r);
 }
-function h(t) {
-  return t[Math.floor(Math.random() * t.length)];
+function h(n) {
+  return n[Math.floor(Math.random() * n.length)];
 }
-function c(t) {
-  const n = r(t, 0, 100) / 100;
-  return Math.random() <= n;
+function u(n) {
+  const o = a(n, 0, 100) / 100;
+  return Math.random() <= o;
 }
 export {
-  m as randomInteger,
-  o as randomNumber,
+  c as randomInteger,
+  e as randomNumber,
   h as randomPick,
-  c as randomProb
+  u as randomProb
 };

package/dist/common/react.js

@@ -2,7 +2,7 @@ function f(r) {
   let n = "";
   for (let t = 0; t < r.length; t++) {
     const e = r[t];
-    typeof e == "string" && (n += e + " ");
+    typeof e == "string" && (n += `${e} `);
   }
   return n;
 }

package/dist/common/string.js

@@ -9,7 +9,7 @@ function p(e, t = (r) => JSON.stringify(r)) {
 }
 const a = ["a", "e", "i", "o", "u"];
 function l(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";
+  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();
@@ -20,7 +20,7 @@ function f(e) {
 function h(e) {
   return e.replace(/^\w/, (t) => t.toUpperCase());
 }
-const i = ["Id", "Tv"], s = [
+const i = ["Id", "Tv"], u = [
   "A",
   "An",
   "And",
@@ -46,17 +46,17 @@ const i = ["Id", "Tv"], s = [
 function g(e) {
   if (!e) return e;
   let t = e.replace(/([^\W_]+[^\s-]*) */g, (r) => c(r));
-  for (const r of s) {
-    const n = new RegExp("\\s" + r + "\\s", "g");
+  for (const r of u) {
+    const n = new RegExp(`\\s${r}\\s`, "g");
     t = t.replace(n, (o) => o.toLowerCase());
   }
   for (const r of i) {
-    const n = new RegExp("\\b" + r + "\\b", "g");
+    const n = new RegExp(`\\b${r}\\b`, "g");
     t = t.replace(n, (o) => o.toLowerCase());
   }
   return t;
 }
-const u = {
+const s = {
   amp: "&",
   apos: "'",
   gt: ">",
@@ -68,12 +68,12 @@ function d(e) {
   return e && e.replace(/<br>/gi, `
 `).replace(/<\/?[a-z0-9-_]+[^>]*>/gi, "").replace(
     /&(nbsp|amp|quot|lt|gt|apos);/g,
-    (t, r) => u[r]
+    (t, r) => s[r]
   ).replace(/&#?([0-9]+);/gi, (t, r) => {
-    const n = parseInt(r, 10);
+    const n = Number.parseInt(r, 10);
     return String.fromCharCode(n);
   }).replace(/&#x?([0-9a-f]+);/gi, (t, r) => {
-    const n = parseInt(r, 16);
+    const n = Number.parseInt(r, 16);
     return String.fromCharCode(n);
   });
 }

package/dist/common/type-utils.d.ts

@@ -6,4 +6,4 @@
  * logger.log(getShallowTypes(data));
  * ```
  */
-export declare function getShallowTypes(data: Record<string, any>): Record<string, any>;
+export declare function getShallowTypes(data: Record<string, unknown>): Record<string, unknown>;

package/dist/components/AnimatedNumber.d.ts

@@ -1,6 +1,10 @@
 import { Component } from 'react';
-
 type Props = {
+    /**
+     * The target value to approach.
+     */
+    value: number;
+} & Partial<{
     /**
      * If provided, a function that formats the inner string. By default,
      * attempts to match the numeric precision of `value`.
@@ -12,11 +16,7 @@ type Props = {
      * animating.
      */
     initial?: number;
-    /**
-     * The target value to approach.
-     */
-    value: number;
-};
+}>;
 /**
  * An animated number label. Shows a number, formatted with an optionally
  * provided function, and animates it towards its target value.

package/dist/components/AnimatedNumber.js

@@ -1,14 +1,11 @@
 var f = Object.defineProperty;
-var p = (i, r, t) => r in i ? f(i, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[r] = t;
-var s = (i, r, t) => p(i, typeof r != "symbol" ? r + "" : r, t);
-import { jsx as m } from "react/jsx-runtime";
-import { Component as v, createRef as g } from "react";
-import { toFixed as d, clamp as T } from "../common/math.js";
-function o(i) {
-  return typeof i == "number" && Number.isFinite(i) && !Number.isNaN(i);
-}
-const V = 1e3 / 60, a = 0.8333, l = 1e-3;
-class S extends v {
+var p = (r, i, t) => i in r ? f(r, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[i] = t;
+var s = (r, i, t) => p(r, typeof i != "symbol" ? i + "" : i, t);
+import { jsx as v } from "react/jsx-runtime";
+import { Component as m, createRef as g } from "react";
+import { isSafeNumber as o, toFixed as d, clamp as T } from "../common/math.js";
+const V = 1e3 / 60, u = 0.8333, l = 1e-3;
+class b extends m {
   constructor(t) {
     super(t);
     /**
@@ -53,24 +50,24 @@ class S extends v {
    */
   tick() {
     const { currentValue: t } = this, { value: e } = this.props;
-    o(e) ? this.currentValue = t * a + e * (1 - a) : this.stopTicking(), Math.abs(e - this.currentValue) < Math.max(l, l * e) && (this.currentValue = e, this.stopTicking()), this.ref.current && (this.ref.current.textContent = this.getText());
+    o(e) ? this.currentValue = t * u + e * (1 - u) : this.stopTicking(), Math.abs(e - this.currentValue) < Math.max(l, l * e) && (this.currentValue = e, this.stopTicking()), this.ref.current && (this.ref.current.textContent = this.getText());
   }
   /**
    * Gets the inner text of the span.
    */
   getText() {
-    const { props: t, currentValue: e } = this, { format: n, value: u } = t;
-    if (!o(u))
-      return String(u);
+    const { props: t, currentValue: e } = this, { format: n, value: a } = t;
+    if (!o(a))
+      return String(a);
     if (n)
       return n(this.currentValue);
-    const c = String(u).split(".")[1], h = c ? c.length : 0;
+    const c = String(a).split(".")[1], h = c ? c.length : 0;
     return d(e, T(h, 0, 8));
   }
   render() {
-    return /* @__PURE__ */ m("span", { ref: this.ref, children: this.getText() });
+    return /* @__PURE__ */ v("span", { ref: this.ref, children: this.getText() });
   }
 }
 export {
-  S as AnimatedNumber
+  b as AnimatedNumber
 };

package/dist/components/Autofocus.d.ts

@@ -1,4 +1,3 @@
 import { PropsWithChildren } from 'react';
-
 /** Used to force the window to steal focus on load. Children optional */
 export declare function Autofocus(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/components/Blink.d.ts

@@ -1,5 +1,4 @@
 import { Component, PropsWithChildren } from 'react';
-
 type Props = Partial<{
     /**
      * The interval between blinks, in milliseconds.

package/dist/components/BlockQuote.d.ts

@@ -1,3 +1,2 @@
 import { BoxProps } from './Box';
-
 export declare function BlockQuote(props: BoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/BlockQuote.js

@@ -1,12 +1,9 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import { classes as e } from "../common/react.js";
-import { Box as r } from "./Box.js";
-import '../assets/BlockQuote.css';const l = "_blockQuote_14fvy_13", m = {
-  blockQuote: l
-};
+import { Box as m } from "./Box.js";
 function f(o) {
-  const { className: t, ...s } = o;
-  return /* @__PURE__ */ c(r, { className: e([m.blockQuote, t]), ...s });
+  const { className: r, ...s } = o;
+  return /* @__PURE__ */ t(m, { className: e(["BlockQuote", r]), ...s });
 }
 export {
   f as BlockQuote

package/dist/components/Box.d.ts

@@ -1,6 +1,5 @@
 import { CSSProperties, KeyboardEventHandler, MouseEventHandler, ReactNode, UIEventHandler } from 'react';
 import { BooleanLike } from '../common/react';
-
 type BooleanProps = Partial<Record<keyof typeof booleanStyleMap, boolean>>;
 type StringProps = Partial<Record<keyof typeof stringStyleMap, string | BooleanLike>>;
 export type EventHandlers = Partial<{

package/dist/components/Box.js

@@ -3,9 +3,9 @@ import { CSS_COLORS as b } from "../common/constants.js";
 import { classes as u } from "../common/react.js";
 function p(o) {
   if (typeof o == "string")
-    return o.endsWith("px") ? parseFloat(o) / 12 + "rem" : o;
+    return o.endsWith("px") ? `${Number.parseFloat(o) / 12}rem` : o;
   if (typeof o == "number")
-    return o + "rem";
+    return `${o}rem`;
 }
 function r(o) {
   if (typeof o == "string")
@@ -109,8 +109,8 @@ function S(o) {
 function d(o) {
   const t = o.textColor || o.color, i = o.backgroundColor;
   return u([
-    a(t) && "color-" + t,
-    a(i) && "color-bg-" + i
+    a(t) && `color-${t}`,
+    a(i) && `color-bg-${i}`
   ]);
 }
 function W(o) {

package/dist/components/Button.d.ts

@@ -2,7 +2,6 @@ import { Placement } from '@popperjs/core';
 import { ReactNode } from 'react';
 import { BooleanLike } from '../common/react';
 import { BoxProps } from './Box';
-
 /**
  * Getting ellipses to work requires that you use:
  * 1. A string rather than a node