Add sass and have better output for building.

2024-01-26 23:53:13 -05:00
parent e07c470fb3
commit 5769311aea
14 changed files with 1693 additions and 730 deletions
@@ -428,7 +428,9 @@ disable=raw-checker-failed,
        suppressed-message,
        useless-suppression,
        deprecated-pragma,
-        use-symbolic-message-instead
+        use-symbolic-message-instead,
+        C0103, # invalid-name :: constant case
+        W0603 # global-statements

 # Enable the message, report, category or checker with the given id(s). You can
 # either give multiple identifier separated by comma (,) or put this option
@@ -4,11 +4,14 @@ import subprocess
 import os
 from shutil import rmtree, copytree, ignore_patterns
 from glob import glob
-import json
+import time
 import re

+from py.log import COLORS
 from py.config import RGTHREE_CONFIG

+start = time.time()
+
 THIS_DIR = os.path.dirname(os.path.abspath(__file__))
 DIR_SRC_WEB = os.path.abspath(f'{THIS_DIR}/src_web/')
 DIR_WEB = os.path.abspath(f'{THIS_DIR}/web/')
@@ -16,15 +19,52 @@ DIR_WEB_COMFYUI = os.path.abspath(f'{DIR_WEB}/comfyui/')

 rmtree(DIR_WEB)

-copytree(DIR_SRC_WEB, DIR_WEB, ignore=ignore_patterns("typings*", "*.ts"))

-subprocess.run(["./node_modules/typescript/bin/tsc"])
+def log_step(msg=None, status=None):
+  """ Logs a step keeping track of timing and initial msg. """
+  global step_msg  # pylint: disable=W0601
+  global step_start  # pylint: disable=W0601
+  if msg:
+    step_msg = f'▻ [Starting] {msg}...'
+    step_start = time.time()
+    print(step_msg, end="\r")
+  elif status:
+    step_time = round(time.time() - step_start, 3)
+    if status == 'Error':
+      status_msg=f'{COLORS["RED"]}⤫ {status}{COLORS["RESET"]}'
+    else:
+      status_msg=f'{COLORS["BRIGHT_GREEN"]}🗸 {status}{COLORS["RESET"]}'
+    print(
+      f'{step_msg.ljust(50, ".")} {COLORS["BRIGHT_GREEN"]}🗸 {status}{COLORS["RESET"]} ({step_time}s)'
+    )
+
+
+log_step(msg='Copying web directory')
+copytree(DIR_SRC_WEB, DIR_WEB, ignore=ignore_patterns("typings*", "*.ts", "*.scss"))
+log_step(status="Done")
+
+log_step(msg='TypeScript')
+checked = subprocess.run(["./node_modules/typescript/bin/tsc"], check=True)
+log_step(status="Done")
+
+scsss = glob(os.path.join(DIR_SRC_WEB, "**", "*.scss"), recursive=True)
+log_step(msg=f'SASS for {len(scsss)} files')
+scsss = [i.replace(THIS_DIR, '.') for i in scsss]
+cmds = ["node", "./node_modules/sass/sass"]
+for scss in scsss:
+  out = scss.replace('src_web', 'web').replace('.scss', '.css')
+  cmds.append(f'{scss}:{out}')
+cmds.append('--no-source-map')
+checked = subprocess.run(cmds, check=True)
+log_step(status="Done")

 # Handle the common directories. Because ComfyUI loads under /extensions/rgthree-comfy we can't
 # easily share sources outside of the `DIR_WEB_COMFYUI` _and_ allow typescript to resolve them in
 # src view, so we set the path in the tsconfig to map an import of "rgthree/common" to the
 # "src_web/common" directory, but then need to rewrite the comfyui JS files to load from
 # "../../rgthree/common" (which we map correctly in rgthree_server.py).
+log_step(msg='Cleaning Imports')
+print('▻ [Starting] Cleaning Imports...', end="\r")
 web_subfolders = [f.name for f in os.scandir(DIR_WEB) if f.is_dir()]
 for subfolder in web_subfolders:
  js_files = glob(os.path.join(DIR_WEB, subfolder, '*.js'), recursive=True)
@@ -37,3 +77,6 @@ for subfolder in web_subfolders:
      filedata = re.sub(r'(from\s+["\'])rgthree/', '\\1../', filedata)
    with open(file, 'w', encoding="utf-8") as f:
      f.write(filedata)
+log_step(status="Done")
+
+print(f'Finished all in {round(time.time() - start, 3)}s')
@@ -6,9 +6,178 @@
    "": {
      "devDependencies": {
        "prettier": "3.0.3",
+        "sass": "^1.70.0",
        "typescript": "^5.2.2"
      }
    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
+      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
+      "dev": true
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
    "node_modules/prettier": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
@@ -24,6 +193,56 @@
        "url": "https://github.com/prettier/prettier?sponsor=1"
      }
    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.70.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.70.0.tgz",
+      "integrity": "sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
    "node_modules/typescript": {
      "version": "5.2.2",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
@@ -1,6 +1,10 @@
 {
  "devDependencies": {
    "prettier": "3.0.3",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "sass": "^1.70.0"
+  },
+  "scripts": {
+    "build": "./__build__.py"
  }
 }
@@ -1,6 +1,6 @@
 # https://stackoverflow.com/questions/4842424/list-of-ansi-color-escape-sequences
 # https://en.wikipedia.org/wiki/ANSI_escape_code#3-bit_and_4-bit
-COLORS_FG = {
+COLORS = {
  'BLACK': '\33[30m',
  'RED': '\33[31m',
  'GREEN': '\33[32m',
@@ -17,8 +17,7 @@ COLORS_FG = {
  'BRIGHT_MAGENTA': '\33[95m',
  'BRIGHT_CYAN': '\33[96m',
  'BRIGHT_WHITE': '\33[97m',
-}
-COLORS_STYLE = {
+  # Styles.
  'RESET': '\33[0m',
  'BOLD': '\33[1m',
  'NORMAL': '\33[22m',
@@ -27,45 +26,44 @@ COLORS_STYLE = {
  'BLINK': '\33[5m',
  'BLINK2': '\33[6m',
  'SELECTED': '\33[7m',
-}
-COLORS_BG = {
-  'BLACK': '\33[40m',
-  'RED': '\33[41m',
-  'GREEN': '\33[42m',
-  'YELLOW': '\33[43m',
-  'BLUE': '\33[44m',
-  'MAGENTA': '\33[45m',
-  'CYAN': '\33[46m',
-  'WHITE': '\33[47m',
-  'GREY': '\33[100m',
-  'BRIGHT_RED': '\33[101m',
-  'BRIGHT_GREEN': '\33[102m',
-  'BRIGHT_YELLOW': '\33[103m',
-  'BRIGHT_BLUE': '\33[104m',
-  'BRIGHT_MAGENTA': '\33[105m',
-  'BRIGHT_CYAN': '\33[106m',
-  'BRIGHT_WHITE': '\33[107m',
+  # Backgrounds
+  'BG_BLACK': '\33[40m',
+  'BG_RED': '\33[41m',
+  'BG_GREEN': '\33[42m',
+  'BG_YELLOW': '\33[43m',
+  'BG_BLUE': '\33[44m',
+  'BG_MAGENTA': '\33[45m',
+  'BG_CYAN': '\33[46m',
+  'BG_WHITE': '\33[47m',
+  'BG_GREY': '\33[100m',
+  'BG_BRIGHT_RED': '\33[101m',
+  'BG_BRIGHT_GREEN': '\33[102m',
+  'BG_BRIGHT_YELLOW': '\33[103m',
+  'BG_BRIGHT_BLUE': '\33[104m',
+  'BG_BRIGHT_MAGENTA': '\33[105m',
+  'BG_BRIGHT_CYAN': '\33[106m',
+  'BG_BRIGHT_WHITE': '\33[107m',
 }


 def log_node_success(node_name, message):
  """Logs a success message."""
-  _log_node(COLORS_FG["GREEN"], node_name, message)
+  _log_node(COLORS["GREEN"], node_name, message)


 def log_node_info(node_name, message):
  """Logs an info message."""
-  _log_node(COLORS_FG["CYAN"], node_name, message)
+  _log_node(COLORS["CYAN"], node_name, message)


 def log_node_warn(node_name, message):
  """Logs an warn message."""
-  _log_node(COLORS_FG["YELLOW"], node_name, message)
+  _log_node(COLORS["YELLOW"], node_name, message)


 def log_node(node_name, message):
  """Logs a message."""
-  _log_node(COLORS_FG["CYAN"], node_name, message)
+  _log_node(COLORS["CYAN"], node_name, message)


 def _log_node(color, node_name, message, prefix=''):
@@ -73,16 +71,15 @@ def _log_node(color, node_name, message, prefix=''):


 def _get_log_msg(color, node_name, message, prefix=''):
-  msg = f'{COLORS_STYLE["BOLD"]}{color}{prefix}[rgthree] {node_name.replace(" (rgthree)", "")}'
-  msg += f':{COLORS_STYLE["RESET"]} {message}'
+  msg = f'{COLORS["BOLD"]}{color}{prefix}[rgthree] {node_name.replace(" (rgthree)", "")}'
+  msg += f':{COLORS["RESET"]} {message}'
  return msg


 def log(message, color=None, msg_color=None, prefix=None):
-  color = COLORS_FG[color] if color is not None and color in COLORS_FG else COLORS_FG["BRIGHT_GREEN"]
-  msg_color = COLORS_STYLE["RESET"] if msg_color == 'RESET' else COLORS_FG[
-    msg_color] if msg_color is not None and msg_color in COLORS_FG else ''
+  color = COLORS[color] if color is not None and color in COLORS else COLORS["BRIGHT_GREEN"]
+  msg_color = COLORS[msg_color] if msg_color is not None and msg_color in COLORS else ''
  prefix = f'[{prefix}]' if prefix is not None else ''
  msg = f'{color}[rgthree]{prefix}'
-  msg += f'{msg_color} {message}{COLORS_STYLE["RESET"]}'
+  msg += f'{msg_color} {message}{COLORS["RESET"]}'
  print(msg)
@@ -218,101 +218,8 @@
  justify-content: center;
 }

-:not(#fakeid) .rgthree-button {
-  --padding-top: 7px;
-  --padding-bottom: 9px;
-  --padding-x: 16px;
-  position: relative;
-  cursor: pointer;
-  border: 0;
-  border-radius: 0.25rem;
-  background: rgba(0, 0, 0, 0.5);
-  color: white;
-  font-family: system-ui, sans-serif;
-  font-size: calc(16rem / 16);
-  line-height: 1;
-  white-space: nowrap;
-  text-decoration: none;
-  margin: 0.25rem;
-  cursor: pointer;
-  box-shadow: 0px 0px 2px rgb(0, 0, 0);
-  background: #212121;
-  transition: all 0.1s ease-in-out;
-  padding: var(--padding-top) var(--padding-x) var(--padding-bottom);
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-:not(#fakeid) .rgthree-button::before,
-:not(#fakeid) .rgthree-button::after {
-  content: "";
-  display: block;
-  position: absolute;
-  border-radius: 0.25rem;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  box-shadow:
-    inset 1px 1px 0px rgba(255, 255, 255, 0.12),
-    inset -1px -1px 0px rgba(0, 0, 0, 0.75);
-  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15));
-  mix-blend-mode: screen;
-}
-:not(#fakeid) .rgthree-button::after {
-  mix-blend-mode: multiply;
-}
-
-:not(#fakeid) .rgthree-button:hover {
-  background: #303030;
-}
-:not(#fakeid) .rgthree-button:active {
-  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
-  background: #121212;
-  padding: calc(var(--padding-top) + 1px) calc(var(--padding-x) - 1px)
-    calc(var(--padding-bottom) - 1px) calc(var(--padding-x) + 1px);
-}
-
-:not(#fakeid) .rgthree-button:active::before,
-:not(#fakeid) .rgthree-button:active::after {
-  box-shadow:
-    1px 1px 0px rgba(255, 255, 255, 0.15),
-    inset 1px 1px 0px rgba(0, 0, 0, 0.5),
-    inset 1px 3px 5px rgba(0, 0, 0, 0.33);
-}
-
-:not(#fakeid) .rgthree-button.-blue {
-  background: #346599 !important;
-}
-:not(#fakeid) .rgthree-button.-blue:hover {
-  background: #3b77b8 !important;
-}
-:not(#fakeid) .rgthree-button.-blue:active {
-  background: #1d5086 !important;
-}
-
-:not(#fakeid) .rgthree-button.-green {
-  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #14580b;
-}
-:not(#fakeid) .rgthree-button.-green:hover {
-  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #1a6d0f;
-}
-:not(#fakeid) .rgthree-button.-green:active {
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.06)), #0f3f09;
-}
-
-:not(#fakeid) .rgthree-button[disabled] {
-  box-shadow: none;
-  background: #666 !important;
-  color: #aaa;
-  pointer-events: none;
-}
-:not(#fakeid) .rgthree-button[disabled]::before,
-:not(#fakeid) .rgthree-button[disabled]::after {
-  display: none;
-}
+@import '../common/css/buttons.scss';
+@import '../common/css/dialog.scss';

 body.rgthree-dialog-open > *:not(.rgthree-dialog):not(.rgthree-top-messages-container) {
  filter: blur(5px);
@@ -0,0 +1,96 @@
+
+:not(#fakeid) .rgthree-button {
+  --padding-top: 7px;
+  --padding-bottom: 9px;
+  --padding-x: 16px;
+  position: relative;
+  cursor: pointer;
+  border: 0;
+  border-radius: 0.25rem;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  font-family: system-ui, sans-serif;
+  font-size: calc(16rem / 16);
+  line-height: 1;
+  white-space: nowrap;
+  text-decoration: none;
+  margin: 0.25rem;
+  box-shadow: 0px 0px 2px rgb(0, 0, 0);
+  background: #212121;
+  transition: all 0.1s ease-in-out;
+  padding: var(--padding-top) var(--padding-x) var(--padding-bottom);
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    border-radius: 0.25rem;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow:
+      inset 1px 1px 0px rgba(255, 255, 255, 0.12),
+      inset -1px -1px 0px rgba(0, 0, 0, 0.75);
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15));
+    mix-blend-mode: screen;
+  }
+
+  &::after {
+    mix-blend-mode: multiply;
+  }
+
+  &:hover {
+    background: #303030;
+  }
+  &:active {
+    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
+    background: #121212;
+    padding: calc(var(--padding-top) + 1px) calc(var(--padding-x) - 1px)
+      calc(var(--padding-bottom) - 1px) calc(var(--padding-x) + 1px);
+  }
+
+  &:active::before,
+  &:active::after {
+    box-shadow:
+      1px 1px 0px rgba(255, 255, 255, 0.15),
+      inset 1px 1px 0px rgba(0, 0, 0, 0.5),
+      inset 1px 3px 5px rgba(0, 0, 0, 0.33);
+  }
+
+  &.-blue {
+    background: #346599 !important;
+  }
+  &.-blue:hover {
+    background: #3b77b8 !important;
+  }
+  &.-blue:active {
+    background: #1d5086 !important;
+  }
+
+  &.-green {
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #14580b;
+  }
+  &.-green:hover {
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #1a6d0f;
+  }
+  &.-green:active {
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.06)), #0f3f09;
+  }
+
+  &[disabled] {
+    box-shadow: none;
+    background: #666 !important;
+    color: #aaa;
+    pointer-events: none;
+  }
+  &[disabled]::before,
+  &[disabled]::after {
+    display: none;
+  }
+}
@@ -0,0 +1,192 @@
+
+.rgthree-dialog {
+  outline: 0;
+  border: 0;
+  border-radius: 6px;
+  background: #414141;
+  color: #fff;
+  box-shadow:
+    inset 1px 1px 0px rgba(255, 255, 255, 0.05),
+    inset -1px -1px 0px rgba(0, 0, 0, 0.5),
+    2px 2px 20px rgb(0, 0, 0);
+  max-width: 800px;
+  box-sizing: border-box;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 1rem;
+  padding: 0;
+  max-height: calc(100% - 32px);
+}
+.rgthree-dialog-container {
+  padding: 16px;
+}
+
+.rgthree-dialog.-iconed::after {
+  content: "";
+  font-size: 276px;
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  opacity: 0.15;
+  display: block;
+  width: 237px;
+  overflow: hidden;
+  height: 186px;
+  line-height: 1;
+  pointer-events: none;
+  z-index: -1;
+}
+.rgthree-dialog.-iconed.-help::after {
+  content: "🛟";
+}
+.rgthree-dialog.-iconed.-settings::after {
+  content: "⚙️";
+}
+
+@media (max-width: 832px) {
+  .rgthree-dialog {
+    max-width: calc(100% - 32px);
+  }
+}
+
+.rgthree-dialog-container-title {
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+}
+.rgthree-dialog-container-title > svg:first-child {
+  width: 36px;
+  height: 36px;
+  margin-right: 16px;
+}
+.rgthree-dialog-container-title h2 {
+  font-size: calc(22rem / 16);
+  margin: 0;
+  font-weight: bold;
+}
+
+.rgthree-dialog-container-title h2 small {
+  font-size: calc(13rem / 16);
+  font-weight: normal;
+  opacity: 0.75;
+}
+
+.rgthree-dialog-container-content {
+  overflow: auto;
+  max-height: calc(100vh - 200px); /* Arbitrary height to copensate for margin, title, and footer.*/
+}
+.rgthree-dialog-container-content p {
+  font-size: calc(13rem / 16);
+  margin-top: 0;
+}
+
+.rgthree-dialog-container-content ul li p {
+  margin-bottom: 4px;
+}
+
+.rgthree-dialog-container-content ul li p + p {
+  margin-top: 0.5em;
+}
+
+.rgthree-dialog-container-content ul li ul {
+  margin-top: 0.5em;
+  margin-bottom: 1em;
+}
+
+.rgthree-dialog-container-content p code {
+  display: inline-block;
+  padding: 2px 4px;
+  margin: 0px 2px;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.rgthree-dialog-container-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+body.rgthree-dialog-open > *:not(.rgthree-dialog):not(.rgthree-top-messages-container) {
+  filter: blur(5px);
+}
+
+.rgthree-dialog.-settings {
+  width: 100%;
+}
+.rgthree-dialog.-settings fieldset {
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  padding: 0 12px 8px;
+  margin-bottom: 16px;
+}
+.rgthree-dialog.-settings fieldset > legend {
+  margin-left: 8px;
+  padding: 0 8px;
+  opacity: 0.5;
+}
+.rgthree-dialog.-settings .formrow {
+  display: flex;
+  flex-direction: column;
+}
+.rgthree-dialog.-settings .formrow + .formrow {
+  border-top: 1px solid rgba(255, 255, 255, 0.25);
+}
+.rgthree-dialog.-settings .fieldrow {
+  display: flex;
+  flex-direction: row;
+}
+.rgthree-dialog.-settings .fieldrow > label {
+  flex: 1 1 auto;
+  user-select: none;
+  padding: 8px 12px 12px;
+}
+.rgthree-dialog.-settings .fieldrow > label span {
+  font-weight: bold;
+}
+.rgthree-dialog.-settings .fieldrow > label small {
+  display: block;
+  margin-top: 4px;
+  font-size: calc(11rem / 16);
+  opacity: 0.75;
+  padding-left: 16px;
+}
+.rgthree-dialog.-settings .fieldrow ~ .fieldrow {
+  font-size: 0.9rem;
+  border-top: 1px dotted rgba(255, 255, 255, 0.25);
+}
+.rgthree-dialog.-settings .fieldrow ~ .fieldrow label {
+  padding-left: 28px;
+}
+.rgthree-dialog.-settings .fieldrow:not(.-checked) ~ .fieldrow {
+  display: none;
+}
+.rgthree-dialog.-settings .fieldrow:hover {
+  background: rgba(255,255,255,0.1);
+}
+.rgthree-dialog.-settings .fieldrow ~ .fieldrow span {
+  font-weight: normal;
+}
+
+.rgthree-dialog.-settings .fieldrow > .fieldrow-value {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  flex: 0 0 auto;
+  width: 50%;
+  max-width: 230px;
+}
+.rgthree-dialog.-settings .fieldrow.-type-boolean > .fieldrow-value {
+  max-width: 64px;
+}
+.rgthree-dialog.-settings .fieldrow.-type-number input {
+  width: 48px;
+  text-align: right;
+}
+
+.rgthree-dialog.-settings .fieldrow input[type="checkbox"] {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
@@ -0,0 +1,79 @@
+:not(#fakeid) .rgthree-button {
+  --padding-top: 7px;
+  --padding-bottom: 9px;
+  --padding-x: 16px;
+  position: relative;
+  cursor: pointer;
+  border: 0;
+  border-radius: 0.25rem;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  font-family: system-ui, sans-serif;
+  font-size: 1rem;
+  line-height: 1;
+  white-space: nowrap;
+  text-decoration: none;
+  margin: 0.25rem;
+  box-shadow: 0px 0px 2px rgb(0, 0, 0);
+  background: #212121;
+  transition: all 0.1s ease-in-out;
+  padding: var(--padding-top) var(--padding-x) var(--padding-bottom);
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+:not(#fakeid) .rgthree-button::before, :not(#fakeid) .rgthree-button::after {
+  content: "";
+  display: block;
+  position: absolute;
+  border-radius: 0.25rem;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.12), inset -1px -1px 0px rgba(0, 0, 0, 0.75);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15));
+  mix-blend-mode: screen;
+}
+:not(#fakeid) .rgthree-button::after {
+  mix-blend-mode: multiply;
+}
+:not(#fakeid) .rgthree-button:hover {
+  background: #303030;
+}
+:not(#fakeid) .rgthree-button:active {
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
+  background: #121212;
+  padding: calc(var(--padding-top) + 1px) calc(var(--padding-x) - 1px) calc(var(--padding-bottom) - 1px) calc(var(--padding-x) + 1px);
+}
+:not(#fakeid) .rgthree-button:active::before, :not(#fakeid) .rgthree-button:active::after {
+  box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15), inset 1px 1px 0px rgba(0, 0, 0, 0.5), inset 1px 3px 5px rgba(0, 0, 0, 0.33);
+}
+:not(#fakeid) .rgthree-button.-blue {
+  background: #346599 !important;
+}
+:not(#fakeid) .rgthree-button.-blue:hover {
+  background: #3b77b8 !important;
+}
+:not(#fakeid) .rgthree-button.-blue:active {
+  background: #1d5086 !important;
+}
+:not(#fakeid) .rgthree-button.-green {
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #14580b;
+}
+:not(#fakeid) .rgthree-button.-green:hover {
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #1a6d0f;
+}
+:not(#fakeid) .rgthree-button.-green:active {
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.06)), #0f3f09;
+}
+:not(#fakeid) .rgthree-button[disabled] {
+  box-shadow: none;
+  background: #666 !important;
+  color: #aaa;
+  pointer-events: none;
+}
+:not(#fakeid) .rgthree-button[disabled]::before, :not(#fakeid) .rgthree-button[disabled]::after {
+  display: none;
+}
@@ -0,0 +1,209 @@
+@charset "UTF-8";
+.rgthree-dialog {
+  outline: 0;
+  border: 0;
+  border-radius: 6px;
+  background: #414141;
+  color: #fff;
+  box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.05), inset -1px -1px 0px rgba(0, 0, 0, 0.5), 2px 2px 20px rgb(0, 0, 0);
+  max-width: 800px;
+  box-sizing: border-box;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 1rem;
+  padding: 0;
+  max-height: calc(100% - 32px);
+}
+
+.rgthree-dialog-container {
+  padding: 16px;
+}
+
+.rgthree-dialog.-iconed::after {
+  content: "";
+  font-size: 276px;
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  opacity: 0.15;
+  display: block;
+  width: 237px;
+  overflow: hidden;
+  height: 186px;
+  line-height: 1;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.rgthree-dialog.-iconed.-help::after {
+  content: "🛟";
+}
+
+.rgthree-dialog.-iconed.-settings::after {
+  content: "⚙️";
+}
+
+@media (max-width: 832px) {
+  .rgthree-dialog {
+    max-width: calc(100% - 32px);
+  }
+}
+.rgthree-dialog-container-title {
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+}
+
+.rgthree-dialog-container-title > svg:first-child {
+  width: 36px;
+  height: 36px;
+  margin-right: 16px;
+}
+
+.rgthree-dialog-container-title h2 {
+  font-size: 1.375rem;
+  margin: 0;
+  font-weight: bold;
+}
+
+.rgthree-dialog-container-title h2 small {
+  font-size: 0.8125rem;
+  font-weight: normal;
+  opacity: 0.75;
+}
+
+.rgthree-dialog-container-content {
+  overflow: auto;
+  max-height: calc(100vh - 200px); /* Arbitrary height to copensate for margin, title, and footer.*/
+}
+
+.rgthree-dialog-container-content p {
+  font-size: 0.8125rem;
+  margin-top: 0;
+}
+
+.rgthree-dialog-container-content ul li p {
+  margin-bottom: 4px;
+}
+
+.rgthree-dialog-container-content ul li p + p {
+  margin-top: 0.5em;
+}
+
+.rgthree-dialog-container-content ul li ul {
+  margin-top: 0.5em;
+  margin-bottom: 1em;
+}
+
+.rgthree-dialog-container-content p code {
+  display: inline-block;
+  padding: 2px 4px;
+  margin: 0px 2px;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.rgthree-dialog-container-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+body.rgthree-dialog-open > *:not(.rgthree-dialog):not(.rgthree-top-messages-container) {
+  filter: blur(5px);
+}
+
+.rgthree-dialog.-settings {
+  width: 100%;
+}
+
+.rgthree-dialog.-settings fieldset {
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  padding: 0 12px 8px;
+  margin-bottom: 16px;
+}
+
+.rgthree-dialog.-settings fieldset > legend {
+  margin-left: 8px;
+  padding: 0 8px;
+  opacity: 0.5;
+}
+
+.rgthree-dialog.-settings .formrow {
+  display: flex;
+  flex-direction: column;
+}
+
+.rgthree-dialog.-settings .formrow + .formrow {
+  border-top: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+.rgthree-dialog.-settings .fieldrow {
+  display: flex;
+  flex-direction: row;
+}
+
+.rgthree-dialog.-settings .fieldrow > label {
+  flex: 1 1 auto;
+  user-select: none;
+  padding: 8px 12px 12px;
+}
+
+.rgthree-dialog.-settings .fieldrow > label span {
+  font-weight: bold;
+}
+
+.rgthree-dialog.-settings .fieldrow > label small {
+  display: block;
+  margin-top: 4px;
+  font-size: 0.6875rem;
+  opacity: 0.75;
+  padding-left: 16px;
+}
+
+.rgthree-dialog.-settings .fieldrow ~ .fieldrow {
+  font-size: 0.9rem;
+  border-top: 1px dotted rgba(255, 255, 255, 0.25);
+}
+
+.rgthree-dialog.-settings .fieldrow ~ .fieldrow label {
+  padding-left: 28px;
+}
+
+.rgthree-dialog.-settings .fieldrow:not(.-checked) ~ .fieldrow {
+  display: none;
+}
+
+.rgthree-dialog.-settings .fieldrow:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.rgthree-dialog.-settings .fieldrow ~ .fieldrow span {
+  font-weight: normal;
+}
+
+.rgthree-dialog.-settings .fieldrow > .fieldrow-value {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  flex: 0 0 auto;
+  width: 50%;
+  max-width: 230px;
+}
+
+.rgthree-dialog.-settings .fieldrow.-type-boolean > .fieldrow-value {
+  max-width: 64px;
+}
+
+.rgthree-dialog.-settings .fieldrow.-type-number input {
+  width: 48px;
+  text-align: right;
+}
+
+.rgthree-dialog.-settings .fieldrow input[type=checkbox] {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
@@ -1,69 +1,66 @@
-
-html, body {
-
-}
-html {
-  font-size: 100%;
-  overflow-y: scroll;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  box-sizing: border-box;
-}
-*, *:before, *:after {
-  box-sizing: inherit
-}
-
-:root {
-  --header-height: 56px;
-  --progress-height: 12px;
-}
-
-button {
-  all: unset;
-}
-
-.-bevel {
-  position: relative;
-}
-.-bevel::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  border: 1px solid red;
-  border-color: rgba(255,255,255,0.15) rgba(255,255,255,0.15) rgba(0,0,0,0.5) rgba(0,0,0,0.5);
-  z-index: 5;
-  pointer-events: none;
-}
-
-
-body {
-  background: #202020;
-  font-family: Arial, sans-serif;
-  font-size: calc(16 * 0.0625rem);
-  font-weight: 400;
-  margin: 0;
-  padding-top: calc(var(--header-height) + var(--progress-height));
-  color: #ffffff;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: start;
-}
-
-.app-header {
-  height: var( --header-height);
-  padding: 0;
-  position: fixed;
-  z-index: 99;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background: #353535;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: start;
-}
+html {
+  font-size: 100%;
+  overflow-y: scroll;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+:root {
+  --header-height: 56px;
+  --progress-height: 12px;
+}
+
+button {
+  all: unset;
+}
+
+.-bevel {
+  position: relative;
+}
+
+.-bevel::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border: 1px solid red;
+  border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5);
+  z-index: 5;
+  pointer-events: none;
+}
+
+body {
+  background: #202020;
+  font-family: Arial, sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0;
+  padding-top: calc(var(--header-height) + var(--progress-height));
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: start;
+}
+
+.app-header {
+  height: var(--header-height);
+  padding: 0;
+  position: fixed;
+  z-index: 99;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: #353535;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+}
@@ -234,71 +234,71 @@ export class RgthreeProgressBar extends HTMLElement {
        }
        this.shadow = this.attachShadow({ mode: "open" });
        const sheet = new CSSStyleSheet();
-        sheet.replaceSync(`
-      :host {
-        position: relative;
-        overflow: hidden;
-        box-sizing: border-box;
-      }
-      :host * {
-        box-sizing: inherit;
-      }
-
-      :host > div.bar {
-        background: rgba(0, 128, 0);
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 0%;
-        height: 50%;
-        z-index: 1;
-        transition: width 50ms ease-in-out;
-      }
-      :host > div.bar + div.bar {
-        top: 50%;
-        height: 50%;
-        z-index: 2;
-      }
-      :host > div.bar.-error {
-        background: rgba(128, 0, 0);
-      }
-
-      :host > .overlay {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 5;
-        background: linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(0,0,0,0.25));
-        mix-blend-mode: overlay;
-      }
-
-      :host > span {
-        position: relative;
-        z-index: 4;
-        text-align: left;
-        font-size: inherit;
-        height: 100%;
-        font-family: sans-serif;
-        text-shadow: 1px 1px 0px #000;
-        display: flex;
-        flex-direction: row;
-        padding: 0 6px;
-        align-items: center;
-        justify-content: start;
-        color: #fff;
-        text-shadow: black 0px 0px 2px;
-      }
-
-      :host > div.bar[style*="width: 0%"]:first-child,
-      :host > div.bar[style*="width:0%"]:first-child {
-        height: 0%;
-      }
-      :host > div.bar[style*="width: 0%"]:first-child + div,
-      :host > div.bar[style*="width:0%"]:first-child + div {
-        bottom: 0%;
-      }
+        sheet.replaceSync(`
+      :host {
+        position: relative;
+        overflow: hidden;
+        box-sizing: border-box;
+      }
+      :host * {
+        box-sizing: inherit;
+      }
+
+      :host > div.bar {
+        background: rgba(0, 128, 0);
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 0%;
+        height: 50%;
+        z-index: 1;
+        transition: width 50ms ease-in-out;
+      }
+      :host > div.bar + div.bar {
+        top: 50%;
+        height: 50%;
+        z-index: 2;
+      }
+      :host > div.bar.-error {
+        background: rgba(128, 0, 0);
+      }
+
+      :host > .overlay {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 5;
+        background: linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(0,0,0,0.25));
+        mix-blend-mode: overlay;
+      }
+
+      :host > span {
+        position: relative;
+        z-index: 4;
+        text-align: left;
+        font-size: inherit;
+        height: 100%;
+        font-family: sans-serif;
+        text-shadow: 1px 1px 0px #000;
+        display: flex;
+        flex-direction: row;
+        padding: 0 6px;
+        align-items: center;
+        justify-content: start;
+        color: #fff;
+        text-shadow: black 0px 0px 2px;
+      }
+
+      :host > div.bar[style*="width: 0%"]:first-child,
+      :host > div.bar[style*="width:0%"]:first-child {
+        height: 0%;
+      }
+      :host > div.bar[style*="width: 0%"]:first-child + div,
+      :host > div.bar[style*="width:0%"]:first-child + div {
+        bottom: 0%;
+      }
    `);
        this.shadow.adoptedStyleSheets = [sheet];
        const overlayEl = document.createElement("div");