diff --git a/build.gradle.kts b/build.gradle.kts
index 3f95b39c9c..39fd4d29ec 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -168,7 +168,7 @@ kotlin {
                 implementation(project.dependencies.enforcedPlatform(kotlinw("wrappers-bom:${Versions.kotlinWrappers}")))
                 implementation(kotlinw("react"))
                 implementation(kotlinw("react-dom"))
-                implementation(kotlinw("styled"))
+                implementation(kotlinw("styled-next"))
                 implementation(kotlinw("mui-material"))
                 implementation(kotlinw("mui-icons-material"))
                 implementation(kotlinw("emotion"))
diff --git a/buildSrc/src/main/kotlin/Versions.kt b/buildSrc/src/main/kotlin/Versions.kt
index 7839a63b18..7ad299826f 100644
--- a/buildSrc/src/main/kotlin/Versions.kt
+++ b/buildSrc/src/main/kotlin/Versions.kt
@@ -17,7 +17,7 @@ object Versions {
 
     // JS:
     const val kotlinxHtml = "0.9.1"
-    const val kotlinWrappers = "1.0.0-pre.696"
+    const val kotlinWrappers = "1.0.0-pre.804"
 
     // Test:
     const val junit = "5.8.1"
diff --git a/kotlin-js-store/yarn.lock b/kotlin-js-store/yarn.lock
index 49d8500b00..945388ced4 100644
--- a/kotlin-js-store/yarn.lock
+++ b/kotlin-js-store/yarn.lock
@@ -9,66 +9,6 @@
   dependencies:
     "@babel/highlight" "^7.16.7"
 
-"@babel/code-frame@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.0.tgz#0dfc80309beec8411e65e706461c408b0bb9b431"
-  integrity sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==
-  dependencies:
-    "@babel/highlight" "^7.16.0"
-
-"@babel/generator@^7.16.5":
-  version "7.16.5"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.16.5.tgz#26e1192eb8f78e0a3acaf3eede3c6fc96d22bedf"
-  integrity sha512-kIvCdjZqcdKqoDbVVdt5R99icaRtrtYhYK/xux5qiWCBmfdvEYMFZ68QCrpE5cbFM1JsuArUNs1ZkuKtTtUcZA==
-  dependencies:
-    "@babel/types" "^7.16.0"
-    jsesc "^2.5.1"
-    source-map "^0.5.0"
-
-"@babel/helper-annotate-as-pure@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz#9a1f0ebcda53d9a2d00108c4ceace6a5d5f1f08d"
-  integrity sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==
-  dependencies:
-    "@babel/types" "^7.16.0"
-
-"@babel/helper-environment-visitor@^7.16.5":
-  version "7.16.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.5.tgz#f6a7f38b3c6d8b07c88faea083c46c09ef5451b8"
-  integrity sha512-ODQyc5AnxmZWm/R2W7fzhamOk1ey8gSguo5SGvF0zcB3uUzRpTRmM/jmLSm9bDMyPlvbyJ+PwPEK0BWIoZ9wjg==
-  dependencies:
-    "@babel/types" "^7.16.0"
-
-"@babel/helper-function-name@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz#b7dd0797d00bbfee4f07e9c4ea5b0e30c8bb1481"
-  integrity sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.16.0"
-    "@babel/template" "^7.16.0"
-    "@babel/types" "^7.16.0"
-
-"@babel/helper-get-function-arity@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz#0088c7486b29a9cb5d948b1a1de46db66e089cfa"
-  integrity sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==
-  dependencies:
-    "@babel/types" "^7.16.0"
-
-"@babel/helper-hoist-variables@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz#4c9023c2f1def7e28ff46fc1dbcd36a39beaa81a"
-  integrity sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==
-  dependencies:
-    "@babel/types" "^7.16.0"
-
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3"
-  integrity sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==
-  dependencies:
-    "@babel/types" "^7.16.0"
-
 "@babel/helper-module-imports@^7.16.7":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
@@ -76,23 +16,11 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-split-export-declaration@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz#29672f43663e936df370aaeb22beddb3baec7438"
-  integrity sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==
-  dependencies:
-    "@babel/types" "^7.16.0"
-
 "@babel/helper-string-parser@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
   integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
 
-"@babel/helper-validator-identifier@^7.15.7":
-  version "7.15.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
-  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
-
 "@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
@@ -103,15 +31,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
   integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
 
-"@babel/highlight@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.0.tgz#6ceb32b2ca4b8f5f361fb7fd821e3fddf4a1725a"
-  integrity sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.15.7"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
 "@babel/highlight@^7.16.7":
   version "7.16.10"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
@@ -121,11 +40,6 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.16.0", "@babel/parser@^7.16.5":
-  version "7.16.6"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.6.tgz#8f194828193e8fa79166f34a4b4e52f3e769a314"
-  integrity sha512-Gr86ujcNuPDnNOY8mi383Hvi8IYrJVJYuf3XcuBM/Dgd+bINn/7tHqsj+tKkoreMbmGsFLsltI/JJd8fOFWGDQ==
-
 "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.16.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.5.tgz#7f3e34bf8bdbbadf03fbb7b1ea0d929569c9487a"
@@ -147,38 +61,12 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/template@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
-  integrity sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==
+"@babel/runtime@^7.24.6":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.8.tgz#5d958c3827b13cc6d05e038c07fb2e5e3420d82e"
+  integrity sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==
   dependencies:
-    "@babel/code-frame" "^7.16.0"
-    "@babel/parser" "^7.16.0"
-    "@babel/types" "^7.16.0"
-
-"@babel/traverse@^7.4.5":
-  version "7.16.5"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.5.tgz#d7d400a8229c714a59b87624fc67b0f1fbd4b2b3"
-  integrity sha512-FOCODAzqUMROikDYLYxl4nmwiLlu85rNqBML/A5hKRVXG2LV8d0iMqgPzdYTcIpjZEBB7D6UDU9vxRZiriASdQ==
-  dependencies:
-    "@babel/code-frame" "^7.16.0"
-    "@babel/generator" "^7.16.5"
-    "@babel/helper-environment-visitor" "^7.16.5"
-    "@babel/helper-function-name" "^7.16.0"
-    "@babel/helper-hoist-variables" "^7.16.0"
-    "@babel/helper-split-export-declaration" "^7.16.0"
-    "@babel/parser" "^7.16.5"
-    "@babel/types" "^7.16.0"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
-"@babel/types@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
-  integrity sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.15.7"
-    to-fast-properties "^2.0.0"
+    regenerator-runtime "^0.14.0"
 
 "@babel/types@^7.18.6":
   version "7.18.10"
@@ -199,16 +87,16 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@emotion/babel-plugin@^11.11.0":
-  version "11.11.0"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
-  integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==
+"@emotion/babel-plugin@^11.12.0":
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz#7b43debb250c313101b3f885eba634f1d723fcc2"
+  integrity sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==
   dependencies:
     "@babel/helper-module-imports" "^7.16.7"
     "@babel/runtime" "^7.18.3"
-    "@emotion/hash" "^0.9.1"
-    "@emotion/memoize" "^0.8.1"
-    "@emotion/serialize" "^1.1.2"
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/serialize" "^1.2.0"
     babel-plugin-macros "^3.1.0"
     convert-source-map "^1.5.0"
     escape-string-regexp "^4.0.0"
@@ -227,69 +115,73 @@
     "@emotion/weak-memoize" "^0.3.1"
     stylis "4.2.0"
 
-"@emotion/css@^11.11.2":
-  version "11.11.2"
-  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.11.2.tgz#e5fa081d0c6e335352e1bc2b05953b61832dca5a"
-  integrity sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==
+"@emotion/cache@^11.13.0", "@emotion/cache@^11.13.1":
+  version "11.13.1"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.13.1.tgz#fecfc54d51810beebf05bf2a161271a1a91895d7"
+  integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
   dependencies:
-    "@emotion/babel-plugin" "^11.11.0"
-    "@emotion/cache" "^11.11.0"
-    "@emotion/serialize" "^1.1.2"
-    "@emotion/sheet" "^1.2.2"
-    "@emotion/utils" "^1.2.1"
-
-"@emotion/hash@^0.9.1":
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
-  integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/sheet" "^1.4.0"
+    "@emotion/utils" "^1.4.0"
+    "@emotion/weak-memoize" "^0.4.0"
+    stylis "4.2.0"
 
-"@emotion/is-prop-valid@^1.1.0":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95"
-  integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==
+"@emotion/css@^11.13.0":
+  version "11.13.0"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.13.0.tgz#3b44f008ce782dafa7cecff75b263af174d0c702"
+  integrity sha512-BUk99ylT+YHl+W/HN7nv1RCTkDYmKKqa1qbvM/qLSQEg61gipuBF5Hptk/2/ERmX2DCv0ccuFGhz9i0KSZOqPg==
   dependencies:
-    "@emotion/memoize" "^0.7.4"
+    "@emotion/babel-plugin" "^11.12.0"
+    "@emotion/cache" "^11.13.0"
+    "@emotion/serialize" "^1.3.0"
+    "@emotion/sheet" "^1.4.0"
+    "@emotion/utils" "^1.4.0"
 
-"@emotion/is-prop-valid@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
-  integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
-  dependencies:
-    "@emotion/memoize" "^0.8.1"
+"@emotion/hash@^0.9.2":
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
+  integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
 
-"@emotion/memoize@^0.7.4":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
-  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+"@emotion/is-prop-valid@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.0.tgz#bd84ba972195e8a2d42462387581560ef780e4e2"
+  integrity sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
 
 "@emotion/memoize@^0.8.1":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
-"@emotion/react@^11.11.1":
-  version "11.11.1"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157"
-  integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==
+"@emotion/memoize@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
+  integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
+
+"@emotion/react@^11.13.3":
+  version "11.13.3"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.13.3.tgz#a69d0de2a23f5b48e0acf210416638010e4bd2e4"
+  integrity sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==
   dependencies:
     "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.11.0"
-    "@emotion/cache" "^11.11.0"
-    "@emotion/serialize" "^1.1.2"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
-    "@emotion/utils" "^1.2.1"
-    "@emotion/weak-memoize" "^0.3.1"
+    "@emotion/babel-plugin" "^11.12.0"
+    "@emotion/cache" "^11.13.0"
+    "@emotion/serialize" "^1.3.1"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.1.0"
+    "@emotion/utils" "^1.4.0"
+    "@emotion/weak-memoize" "^0.4.0"
     hoist-non-react-statics "^3.3.1"
 
-"@emotion/serialize@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.2.tgz#017a6e4c9b8a803bd576ff3d52a0ea6fa5a62b51"
-  integrity sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==
+"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.0", "@emotion/serialize@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.1.tgz#490b660178f43d2de8e92b278b51079d726c05c3"
+  integrity sha512-dEPNKzBPU+vFPGa+z3axPRn8XVDetYORmDC0wAiej+TNcOZE70ZMJa0X7JdeoM6q/nWTMZeLpN/fTnD9o8MQBA==
   dependencies:
-    "@emotion/hash" "^0.9.1"
-    "@emotion/memoize" "^0.8.1"
-    "@emotion/unitless" "^0.8.1"
-    "@emotion/utils" "^1.2.1"
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/unitless" "^0.10.0"
+    "@emotion/utils" "^1.4.0"
     csstype "^3.0.2"
 
 "@emotion/sheet@^1.2.2":
@@ -297,48 +189,53 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
   integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
 
-"@emotion/styled@^11.11.0":
-  version "11.11.0"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.11.0.tgz#26b75e1b5a1b7a629d7c0a8b708fbf5a9cdce346"
-  integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==
+"@emotion/sheet@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
+  integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
+
+"@emotion/styled@^11.13.0":
+  version "11.13.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.13.0.tgz#633fd700db701472c7a5dbef54d6f9834e9fb190"
+  integrity sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==
   dependencies:
     "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.11.0"
-    "@emotion/is-prop-valid" "^1.2.1"
-    "@emotion/serialize" "^1.1.2"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
-    "@emotion/utils" "^1.2.1"
-
-"@emotion/stylis@^0.8.4":
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
-  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
-
-"@emotion/unitless@^0.7.4":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
-
-"@emotion/unitless@^0.8.1":
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
-  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
-
-"@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
-  integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
+    "@emotion/babel-plugin" "^11.12.0"
+    "@emotion/is-prop-valid" "^1.3.0"
+    "@emotion/serialize" "^1.3.0"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.1.0"
+    "@emotion/utils" "^1.4.0"
+
+"@emotion/unitless@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
+  integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz#1a818a0b2c481efba0cf34e5ab1e0cb2dcb9dfaf"
+  integrity sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==
 
 "@emotion/utils@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4"
   integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==
 
+"@emotion/utils@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.0.tgz#262f1d02aaedb2ec91c83a0955dd47822ad5fbdd"
+  integrity sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==
+
 "@emotion/weak-memoize@^0.3.1":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
   integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
+"@emotion/weak-memoize@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
+  integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
+
 "@floating-ui/core@^1.0.0":
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
@@ -434,107 +331,106 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
-"@mui/base@5.0.0-beta.34":
-  version "5.0.0-beta.34"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.34.tgz#44b0f203250a6e3b2d810f37c9720d114182abd0"
-  integrity sha512-e2mbTGTtReD/y5RFwnhkl1Tgl3XwgJhY040IlfkTVaU9f5LWrVhEnpRsYXu3B1CtLrwiWs4cu7aMHV9yRd4jpw==
+"@mui/base@^5.0.0-beta.52":
+  version "5.0.0-dev.20240529-082515-213b5e33ab"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-dev.20240529-082515-213b5e33ab.tgz#e9a916677dab38ffc92c3171f7d96bf300790531"
+  integrity sha512-3ic6fc6BHstgM+MGqJEVx3zt9g5THxVXm3VVFUfdeplPqAWWgW2QoKfZDLT10s+pi+MAkpgEBP0kgRidf81Rsw==
   dependencies:
-    "@babel/runtime" "^7.23.9"
+    "@babel/runtime" "^7.24.6"
     "@floating-ui/react-dom" "^2.0.8"
-    "@mui/types" "^7.2.13"
-    "@mui/utils" "^5.15.7"
+    "@mui/types" "^7.2.14-dev.20240529-082515-213b5e33ab"
+    "@mui/utils" "^6.0.0-dev.20240529-082515-213b5e33ab"
     "@popperjs/core" "^2.11.8"
-    clsx "^2.1.0"
+    clsx "^2.1.1"
     prop-types "^15.8.1"
 
-"@mui/base@^5.0.0-beta.34":
-  version "5.0.0-beta.36"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.36.tgz#29ca2de9d387f6d3943b6f18a84415c43e5f206c"
-  integrity sha512-6A8fYiXgjqTO6pgj31Hc8wm1M3rFYCxDRh09dBVk0L0W4cb2lnurRJa3cAyic6hHY+we1S58OdGYRbKmOsDpGQ==
-  dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@floating-ui/react-dom" "^2.0.8"
-    "@mui/types" "^7.2.13"
-    "@mui/utils" "^5.15.9"
-    "@popperjs/core" "^2.11.8"
-    clsx "^2.1.0"
-    prop-types "^15.8.1"
-
-"@mui/core-downloads-tracker@^5.15.7":
-  version "5.15.9"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.9.tgz#c29138c70cc0fb49cd909c29beef3fb0647e5af7"
-  integrity sha512-CSDpVevGaxsvMkiYBZ8ztki1z/eT0mM2MqUT21eCRiMz3DU4zQw5rXG5ML/yTuJF9Z2Wv9SliIeaRAuSR/9Nig==
+"@mui/core-downloads-tracker@^5.16.7":
+  version "5.16.7"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz#182a325a520f7ebd75de051fceabfc0314cfd004"
+  integrity sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==
 
-"@mui/icons-material@5.15.7":
-  version "5.15.7"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.7.tgz#6b1cc370894f505b756fa1aa1cbd25b5890d54d5"
-  integrity sha512-EDAc8TVJGIA/imAvR3u4nANl2W5h3QeHieu2gK7Ypez/nIA55p08tHjf8UrMXEpxCAvfZO6piY9S9uaxETdicA==
+"@mui/icons-material@5.16.7":
+  version "5.16.7"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.16.7.tgz#e27f901af792065efc9f3d75d74a66af7529a10a"
+  integrity sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==
   dependencies:
     "@babel/runtime" "^7.23.9"
 
-"@mui/material@5.15.7":
-  version "5.15.7"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.7.tgz#8496d8a2b9f0409a0f82b93f819a48f6f82bc12f"
-  integrity sha512-l6+AiKZH3iOJmZCnlpel8ghYQe9Lq0BEuKP8fGj3g5xz4arO9GydqYAtLPMvuHKtArj8lJGNuT2yHYxmejincA==
+"@mui/material@5.16.7":
+  version "5.16.7"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.16.7.tgz#6e814e2eefdaf065a769cecf549c3569e107a50b"
+  integrity sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==
   dependencies:
     "@babel/runtime" "^7.23.9"
-    "@mui/base" "5.0.0-beta.34"
-    "@mui/core-downloads-tracker" "^5.15.7"
-    "@mui/system" "^5.15.7"
-    "@mui/types" "^7.2.13"
-    "@mui/utils" "^5.15.7"
+    "@mui/core-downloads-tracker" "^5.16.7"
+    "@mui/system" "^5.16.7"
+    "@mui/types" "^7.2.15"
+    "@mui/utils" "^5.16.6"
+    "@popperjs/core" "^2.11.8"
     "@types/react-transition-group" "^4.4.10"
     clsx "^2.1.0"
-    csstype "^3.1.2"
+    csstype "^3.1.3"
     prop-types "^15.8.1"
-    react-is "^18.2.0"
+    react-is "^18.3.1"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^5.15.9":
-  version "5.15.9"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.9.tgz#3ea3514ed2f6bf68541dbe9206665a82cd89cb01"
-  integrity sha512-/aMJlDOxOTAXyp4F2rIukW1O0anodAMCkv1DfBh/z9vaKHY3bd5fFf42wmP+0GRmwMinC5aWPpNfHXOED1fEtg==
+"@mui/private-theming@^5.16.6":
+  version "5.16.6"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.16.6.tgz#547671e7ae3f86b68d1289a0b90af04dfcc1c8c9"
+  integrity sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==
   dependencies:
     "@babel/runtime" "^7.23.9"
-    "@mui/utils" "^5.15.9"
+    "@mui/utils" "^5.16.6"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^5.15.9":
-  version "5.15.9"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.9.tgz#444605039ec3fe456bdd5d5cb94330183be62b91"
-  integrity sha512-NRKtYkL5PZDH7dEmaLEIiipd3mxNnQSO+Yo8rFNBNptY8wzQnQ+VjayTq39qH7Sast5cwHKYFusUrQyD+SS4Og==
+"@mui/styled-engine@^5.16.6":
+  version "5.16.6"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.16.6.tgz#60110c106dd482dfdb7e2aa94fd6490a0a3f8852"
+  integrity sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==
   dependencies:
     "@babel/runtime" "^7.23.9"
     "@emotion/cache" "^11.11.0"
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/system@^5.15.7":
-  version "5.15.9"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.9.tgz#8a34ac0ab133af2550cc7ab980a35174142fd265"
-  integrity sha512-SxkaaZ8jsnIJ77bBXttfG//LUf6nTfOcaOuIgItqfHv60ZCQy/Hu7moaob35kBb+guxVJnoSZ+7vQJrA/E7pKg==
+"@mui/system@^5.16.7":
+  version "5.16.7"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.16.7.tgz#4583ca5bf3b38942e02c15a1e622ba869ac51393"
+  integrity sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==
   dependencies:
     "@babel/runtime" "^7.23.9"
-    "@mui/private-theming" "^5.15.9"
-    "@mui/styled-engine" "^5.15.9"
-    "@mui/types" "^7.2.13"
-    "@mui/utils" "^5.15.9"
+    "@mui/private-theming" "^5.16.6"
+    "@mui/styled-engine" "^5.16.6"
+    "@mui/types" "^7.2.15"
+    "@mui/utils" "^5.16.6"
     clsx "^2.1.0"
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/types@^7.2.13":
-  version "7.2.13"
-  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.13.tgz#d1584912942f9dc042441ecc2d1452be39c666b8"
-  integrity sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==
+"@mui/types@^7.2.14-dev.20240529-082515-213b5e33ab", "@mui/types@^7.2.15":
+  version "7.2.15"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.15.tgz#dadd232fe9a70be0d526630675dff3b110f30b53"
+  integrity sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==
 
-"@mui/utils@^5.15.7", "@mui/utils@^5.15.9":
-  version "5.15.9"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.9.tgz#2bdf925e274d87cbe90c14eb52d0835318205e86"
-  integrity sha512-yDYfr61bCYUz1QtwvpqYy/3687Z8/nS4zv7lv/ih/6ZFGMl1iolEvxRmR84v2lOYxlds+kq1IVYbXxDKh8Z9sg==
+"@mui/utils@^5.16.6":
+  version "5.16.6"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.16.6.tgz#905875bbc58d3dcc24531c3314a6807aba22a711"
+  integrity sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==
   dependencies:
     "@babel/runtime" "^7.23.9"
-    "@types/prop-types" "^15.7.11"
+    "@mui/types" "^7.2.15"
+    "@types/prop-types" "^15.7.12"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-is "^18.3.1"
+
+"@mui/utils@^6.0.0-dev.20240529-082515-213b5e33ab":
+  version "6.0.0-dev.20240529-082515-213b5e33ab"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-6.0.0-dev.20240529-082515-213b5e33ab.tgz#085d02079d9f12baa25f620d314ec2aed4b43ab7"
+  integrity sha512-jyNcB0drDhYcoq5MHNTiEc63GfVE1GZK+CVUd8tlLzk5q631RPYJ5jONSOszLiUOXBmI8Uu1SBJUwrG3j2YG2A==
+  dependencies:
+    "@babel/runtime" "^7.24.6"
+    "@types/prop-types" "^15.7.12"
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
@@ -722,10 +618,10 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/prop-types@^15.7.11":
-  version "15.7.11"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
-  integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
+"@types/prop-types@^15.7.12":
+  version "15.7.12"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
+  integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
 
 "@types/qs@*":
   version "6.9.7"
@@ -1098,21 +994,6 @@ babel-plugin-macros@^3.1.0:
     cosmiconfig "^7.0.0"
     resolve "^1.19.0"
 
-"babel-plugin-styled-components@>= 1.12.0":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.2.tgz#0fac11402dc9db73698b55847ab1dc73f5197c54"
-  integrity sha512-7eG5NE8rChnNTDxa6LQfynwgHTVOYYaHJbUYSlOhk8QBXIQiMBKq4gyfHBBKPrxUcVBXVJL61ihduCpCQbuNbw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.0"
-    "@babel/helper-module-imports" "^7.16.0"
-    babel-plugin-syntax-jsx "^6.18.0"
-    lodash "^4.17.11"
-
-babel-plugin-syntax-jsx@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -1250,11 +1131,6 @@ camelcase@^6.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-camelize@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
-  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
-
 camera-controls@^1.35.0:
   version "1.35.0"
   resolved "https://registry.yarnpkg.com/camera-controls/-/camera-controls-1.35.0.tgz#9a17e9c7eaf89f1fb7354a9fbd2e897bb0c304b5"
@@ -1355,6 +1231,11 @@ clsx@^2.1.0:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
   integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -1501,11 +1382,6 @@ cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-css-color-keywords@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
-  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
-
 css-in-js-utils@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz#640ae6a33646d401fc720c54fc61c42cd76ae2bb"
@@ -1513,25 +1389,11 @@ css-in-js-utils@^3.1.0:
   dependencies:
     hyphenate-style-name "^1.0.3"
 
-css-to-react-native@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
-  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
-  dependencies:
-    camelize "^1.0.0"
-    css-color-keywords "^1.0.0"
-    postcss-value-parser "^4.0.2"
-
 csstype@^3.0.2:
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
   integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
 
-csstype@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
-  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
-
 csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -2142,11 +2004,6 @@ fast-json-stable-stringify@^2.0.0:
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
-fast-loops@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.3.tgz#ce96adb86d07e7bf9b4822ab9c6fac9964981f75"
-  integrity sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==
-
 fastest-levenshtein@^1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"
@@ -2340,11 +2197,6 @@ glob@^8.1.0:
     minimatch "^5.0.1"
     once "^1.3.0"
 
-globals@^11.1.0:
-  version "11.12.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
-  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
-
 graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.6:
   version "4.2.8"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
@@ -2399,7 +2251,7 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -2546,13 +2398,12 @@ inherits@2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
-inline-style-prefixer@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-7.0.0.tgz#991d550735d42069f528ac1bcdacd378d1305442"
-  integrity sha512-I7GEdScunP1dQ6IM2mQWh6v0mOYdYmH3Bp31UecKdrcUgcURTcctSe1IECdUznSHKSmsHtjrT3CwCPI1pyxfUQ==
+inline-style-prefixer@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz#9310f3cfa2c6f3901d1480f373981c02691781e8"
+  integrity sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==
   dependencies:
     css-in-js-utils "^3.1.0"
-    fast-loops "^1.1.3"
 
 "internmap@1 - 2":
   version "2.0.3"
@@ -2707,11 +2558,6 @@ js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
-jsesc@^2.5.1:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
-  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
-
 json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
@@ -2848,7 +2694,7 @@ lodash.isequal@4.5.0, lodash.isequal@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
 
-lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.21:
+lodash@^4.17.15, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -3265,11 +3111,6 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-postcss-value-parser@^4.0.2:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
-  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
-
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -3414,13 +3255,13 @@ react-dnd@^16.0.1:
     fast-deep-equal "^3.1.3"
     hoist-non-react-statics "^3.3.2"
 
-react-dom@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+react-dom@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.23.0"
+    scheduler "^0.23.2"
 
 react-draggable@^4.0.3, react-draggable@^4.4.4:
   version "4.4.4"
@@ -3456,6 +3297,11 @@ react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-is@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-mosaic-component@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-mosaic-component/-/react-mosaic-component-6.1.0.tgz#67383085680e8604d0fcb6d61387be19665da308"
@@ -3490,10 +3336,10 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+react@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -3637,10 +3483,10 @@ safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -3758,11 +3604,6 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallowequal@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -3853,7 +3694,7 @@ source-map-support@~0.5.20:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map@^0.5.0, source-map@^0.5.7:
+source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -3950,28 +3791,12 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-styled-components@^5.3.11:
-  version "5.3.11"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8"
-  integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^1.1.0"
-    "@emotion/stylis" "^0.8.4"
-    "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1.12.0"
-    css-to-react-native "^3.0.0"
-    hoist-non-react-statics "^3.0.0"
-    shallowequal "^1.1.0"
-    supports-color "^5.5.0"
-
 stylis@4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-supports-color@^5.3.0, supports-color@^5.5.0:
+supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
diff --git a/src/jsMain/kotlin/baaahs/app/ui/AllStyles.kt b/src/jsMain/kotlin/baaahs/app/ui/AllStyles.kt
index 45ffc3134f..526fcd15db 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/AllStyles.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/AllStyles.kt
@@ -16,25 +16,26 @@ import baaahs.mapper.MapperStyles
 import baaahs.ui.components.UiComponentStyles
 import baaahs.ui.diagnostics.DiagnosticsStyles
 import mui.material.styles.Theme
+import styled.StyleSheet
 import styled.injectGlobal
 
 class AllStyles(val theme: Theme) {
-    val appUi by lazy { ThemeStyles(theme) }
-    val controls by lazy { baaahs.app.ui.controls.ThemeStyles(theme) }
-    val gadgetsSlider by lazy { ThemedStyles(theme) }
-    val editableManager by lazy { ThemedEditableStyles(theme) }
-    val layout by lazy { LayoutStyles(theme) }
-    val layoutEditor by lazy { LayoutEditorStyles(theme) }
-    val controllerEditor by lazy { ControllerEditorStyles(theme) }
-    val modelEditor by lazy { ModelEditorStyles(theme) }
-    val mapper by lazy { MapperStyles(theme) }
-    val shaderEditor by lazy { ShaderEditorStyles(theme) }
-    val shaderLibrary by lazy { ShaderLibraryStyles(theme) }
-    val shaderHelp by lazy { ShaderHelpStyles(theme) }
-    val uiComponents by lazy { UiComponentStyles(theme) }
-    val fileUploadStyles by lazy { FileUploadStyles(theme) }
-    val diagnosticsStyles by lazy { DiagnosticsStyles(theme) }
-    val patchModStyles by lazy { PatchModStyles(theme) }
+    val appUi by lazy { inject(ThemeStyles(theme)) }
+    val controls by lazy { inject(baaahs.app.ui.controls.ThemeStyles(theme)) }
+    val gadgetsSlider by lazy { inject(ThemedStyles(theme)) }
+    val editableManager by lazy { inject(ThemedEditableStyles(theme)) }
+    val layout by lazy { inject(LayoutStyles(theme)) }
+    val layoutEditor by lazy { inject(LayoutEditorStyles(theme)) }
+    val controllerEditor by lazy { inject(ControllerEditorStyles(theme)) }
+    val modelEditor by lazy { inject(ModelEditorStyles(theme)) }
+    val mapper by lazy { inject(MapperStyles(theme)) }
+    val shaderEditor by lazy { inject(ShaderEditorStyles(theme)) }
+    val shaderLibrary by lazy { inject(ShaderLibraryStyles(theme)) }
+    val shaderHelp by lazy { inject(ShaderHelpStyles(theme)) }
+    val uiComponents by lazy { inject(UiComponentStyles(theme)) }
+    val fileUploadStyles by lazy { inject(FileUploadStyles(theme)) }
+    val diagnosticsStyles by lazy { inject(DiagnosticsStyles(theme)) }
+    val patchModStyles by lazy { inject(PatchModStyles(theme)) }
 
     fun injectGlobals() {
         injectGlobal(Styles.global)
@@ -42,5 +43,8 @@ class AllStyles(val theme: Theme) {
         injectGlobal(baaahs.app.ui.controls.Styles.global)
         injectGlobal(ColorWheelStyles.global)
         injectGlobal(layout.global)
+//        baaahs.app.ui.controls.Styles.inject()
     }
+
+    private fun <T: StyleSheet> inject(styleSheet: T) = styleSheet.also { it.inject() }
 }
\ No newline at end of file
diff --git a/src/jsMain/kotlin/baaahs/app/ui/AppDrawerView.kt b/src/jsMain/kotlin/baaahs/app/ui/AppDrawerView.kt
index a4f7a8b306..80bef97999 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/AppDrawerView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/AppDrawerView.kt
@@ -3,7 +3,6 @@ package baaahs.app.ui
 import baaahs.app.ui.document.documentMenu
 import baaahs.client.document.DocumentManager
 import baaahs.ui.*
-import js.objects.jso
 import materialui.icon
 import mui.material.*
 import mui.material.styles.Theme
@@ -18,8 +17,8 @@ private val AppDrawerView = xComponent<AppDrawerProps>("AppDrawer", isPure = tru
     val theme = useTheme<Theme>()
     val themeStyles = appContext.allStyles.appUi
 
-    val handleAppModeChange by handler(props.onAppModeChange) { _: SyntheticEvent<*, *>, value: String ->
-        props.onAppModeChange(AppMode.valueOf(value))
+    val handleAppModeChange by handler(props.onAppModeChange) { _: SyntheticEvent<*, *>, value: Any ->
+        props.onAppModeChange(AppMode.valueOf(value.toString()))
     }
 
     val editMode = observe(props.documentManager.editMode)
@@ -41,8 +40,8 @@ private val AppDrawerView = xComponent<AppDrawerProps>("AppDrawer", isPure = tru
 
 
     Drawer {
-        attrs.classes = jso {
-            root = -themeStyles.appDrawer
+        attrs.className = -themeStyles.appDrawer
+        attrs.classes = muiClasses {
             paperAnchorLeft = -themeStyles.appDrawerPaper
         }
         attrs.variant = DrawerVariant.persistent
@@ -57,7 +56,7 @@ private val AppDrawerView = xComponent<AppDrawerProps>("AppDrawer", isPure = tru
 
                 for (aMode in AppMode.values()) {
                     Tab {
-                        attrs.classes = jso { root = -themeStyles.appModeTab }
+                        attrs.className = -themeStyles.appModeTab
                         attrs.value = aMode.name
                         attrs.label = ReactNode(aMode.name)
                     }
diff --git a/src/jsMain/kotlin/baaahs/app/ui/AppIndex.kt b/src/jsMain/kotlin/baaahs/app/ui/AppIndex.kt
index 985aff56db..1fd41aafef 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/AppIndex.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/AppIndex.kt
@@ -205,7 +205,7 @@ val AppIndex = xComponent<AppIndexProps>("AppIndex") { props ->
                     CssBaseline {}
 
                     Paper {
-                        attrs.classes = jso { this.root = -themeStyles.appRoot and appDrawerStateStyle and editModeStyle }
+                        attrs.className = -themeStyles.appRoot and appDrawerStateStyle and editModeStyle
 
                         appDrawer {
                             attrs.open = renderAppDrawerOpen
@@ -233,7 +233,7 @@ val AppIndex = xComponent<AppIndexProps>("AppIndex") { props ->
 
                                 if (appState is AppState.FullScreenMessage) {
                                     Paper {
-                                        attrs.classes = jso { root = -themeStyles.fullScreenMessagePaper }
+                                        attrs.className = -themeStyles.fullScreenMessagePaper
                                         if (appState.isInProgress)
                                             mui.material.CircularProgress {}
                                         icon(mui.icons.material.NotificationImportant)
diff --git a/src/jsMain/kotlin/baaahs/app/ui/AppToolbarTabView.kt b/src/jsMain/kotlin/baaahs/app/ui/AppToolbarTabView.kt
index a053308955..744ffb4262 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/AppToolbarTabView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/AppToolbarTabView.kt
@@ -5,7 +5,6 @@ import baaahs.client.document.DocumentManager
 import baaahs.client.document.OpenDocument
 import baaahs.show.live.OpenPatchHolder
 import baaahs.ui.*
-import js.objects.jso
 import kotlinx.html.unsafe
 import materialui.icon
 import mui.icons.material.Article
@@ -21,7 +20,7 @@ private val AppToolbarTabView = xComponent<AppToolbarTabProps>("AppToolbarTab")
     val themeStyles = appContext.allStyles.appUi
 
     typographyH6 {
-        attrs.classes = jso { this.root = -themeStyles.title }
+        attrs.className = -themeStyles.title
         div(+themeStyles.titleHeader) { +"${props.value.name}:" }
 
         val document = props.document
diff --git a/src/jsMain/kotlin/baaahs/app/ui/AppToolbarView.kt b/src/jsMain/kotlin/baaahs/app/ui/AppToolbarView.kt
index 72e5998986..80070de071 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/AppToolbarView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/AppToolbarView.kt
@@ -20,7 +20,6 @@ import mui.icons.material.Menu
 import mui.material.*
 import mui.material.Link
 import mui.material.Tab
-import org.w3c.dom.events.Event
 import react.*
 import react.dom.div
 import react.dom.h4
@@ -73,13 +72,13 @@ private val AppToolbarView = xComponent<AppToolbarProps>("AppToolbar") { props -
 
     var showProblemsDialogIsOpen by state { false }
     val toggleProblems = callback { showProblemsDialogIsOpen = !showProblemsDialogIsOpen }
-    val closeProblems = callback { _: Event, _: String -> showProblemsDialogIsOpen = false }
+    val closeProblems = callback { _: Any, _: String -> showProblemsDialogIsOpen = false }
 
     val editMode = observe(props.documentManager.editMode)
     val handleEditModeChange by handler(editMode) { editMode.toggle() }
 
     AppBar {
-        attrs.classes = jso { this.root = -themeStyles.appToolbar }
+        attrs.className = -themeStyles.appToolbar
         attrs.component = ReactHTML.div
         attrs.position = AppBarPosition.relative
 
@@ -92,13 +91,14 @@ private val AppToolbarView = xComponent<AppToolbarProps>("AppToolbar") { props -
             }
 
             Tabs {
-                attrs.classes = jso { this.root = -themeStyles.appToolbarTabs }
+                attrs.className = -themeStyles.appToolbarTabs
+                attrs.classes = muiClasses { indicator = -themeStyles.appToolbarTabIndicator }
                 attrs.value = props.appMode
                 attrs.onChange = handleAppModeTabClick
 
-                val tabClasses = jso<TabClasses> {
-                    this.root = -themeStyles.appToolbarTab
-                    this.selected = -themeStyles.appToolbarTabSelected
+                val tabClasses = muiClasses<TabClasses> {
+                    root = -themeStyles.appToolbarTab
+                    selected = -themeStyles.appToolbarTabSelected
                 }
                 Tab {
                     attrs.classes = tabClasses
@@ -196,9 +196,9 @@ private val AppToolbarView = xComponent<AppToolbarProps>("AppToolbar") { props -
                 }
 
                 ToggleButton {
-                    attrs.classes = jso {
-                        this.root = -themeStyles.editModeButton
-                        this.selected = -themeStyles.editModeButtonSelected
+                    attrs.className = -themeStyles.editModeButton
+                    attrs.classes = muiClasses {
+                        selected = -themeStyles.editModeButtonSelected
                     }
 //                        attrs.variant = ButtonVariant.contained
                     attrs.color = ToggleButtonColor.error
@@ -215,16 +215,16 @@ private val AppToolbarView = xComponent<AppToolbarProps>("AppToolbar") { props -
                 }
 
                 ButtonGroup {
-                    attrs.classes = jso { this.root = -themeStyles.appToolbarButtonGroup }
+                    attrs.className = -themeStyles.appToolbarButtonGroup
 
                     if (showProblemsSeverity != null) {
                         Tooltip {
                             attrs.title = "Show Problems".asTextNode()
 
                             IconButton {
-                                attrs.classes = jso { this.root = -themeStyles.appToolbarProblemsIcon }
+                                attrs.className = -themeStyles.appToolbarProblemsIcon
                                 Link {
-                                    attrs.classes = jso { this.root = ClassName(showProblemsSeverity.cssClass) }
+                                    attrs.className = ClassName(showProblemsSeverity.cssClass)
                                     attrs.onClick = toggleProblems.withMouseEvent()
                                     icon(showProblemsSeverity.icon)
                                 }
@@ -261,7 +261,7 @@ private val AppToolbarView = xComponent<AppToolbarProps>("AppToolbar") { props -
 
                 DialogTitle { +"Show Problems" }
                 DialogContent {
-                    attrs.classes = jso { root = -themeStyles.showProblemsDialogContent }
+                    attrs.className = -themeStyles.showProblemsDialogContent
                     showManager.showProblems.sortedByDescending { it.severity }.forEach { problem ->
                         val iconClass = "${themeStyles.showProblem.name} ${problem.severity.cssClass}"
                         div(iconClass) { icon(problem.severity.icon) }
diff --git a/src/jsMain/kotlin/baaahs/app/ui/ControlsPaletteView.kt b/src/jsMain/kotlin/baaahs/app/ui/ControlsPaletteView.kt
index 171222d4a6..480b092c3d 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/ControlsPaletteView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/ControlsPaletteView.kt
@@ -16,7 +16,6 @@ import external.react_draggable.Draggable
 import external.react_resizable.Resizable
 import external.react_resizable.ResizeCallbackData
 import external.react_resizable.buildResizeHandle
-import js.objects.jso
 import materialui.icon
 import mui.material.Paper
 import org.w3c.dom.events.MouseEvent
@@ -65,7 +64,7 @@ private val ControlsPaletteView = xComponent<ControlsPaletteProps>("ControlsPale
                 }
 
                 Paper {
-                    attrs.classes = jso { root = -Styles.unplacedControlsPaper }
+                    attrs.className = -Styles.unplacedControlsPaper
                     attrs.elevation = 3
 
                     header { +"Unplaced Controls" }
diff --git a/src/jsMain/kotlin/baaahs/app/ui/NotifierView.kt b/src/jsMain/kotlin/baaahs/app/ui/NotifierView.kt
index d2840f809c..6d9f53f7b2 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/NotifierView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/NotifierView.kt
@@ -1,11 +1,7 @@
 package baaahs.app.ui
 
 import baaahs.client.Notifier
-import baaahs.ui.markdown
-import baaahs.ui.unaryMinus
-import baaahs.ui.unaryPlus
-import baaahs.ui.xComponent
-import js.objects.jso
+import baaahs.ui.*
 import mui.material.Alert
 import mui.material.AlertColor
 import mui.material.AlertTitle
@@ -24,13 +20,13 @@ private val NotifierView = xComponent<NotifierProps>("Notifier") { props ->
     notifier.serverNotices.let { serverNotices ->
         if (serverNotices.isNotEmpty()) {
             Backdrop {
-                attrs.classes = jso { this.root = -Styles.serverNoticeBackdrop }
+                attrs.className = -Styles.serverNoticeBackdrop
                 attrs { open = true }
 
                 div {
                     serverNotices.forEach { serverNotice ->
                         Alert {
-                            attrs.classes = jso { this.message = -Styles.serverNoticeAlertMessage }
+                            attrs.classes = muiClasses { message = -Styles.serverNoticeAlertMessage }
 
                             attrs.severity = AlertColor.error.unsafeCast<Union>()
                             attrs.onClose = { notifier.confirmServerNotice(serverNotice.id) }
diff --git a/src/jsMain/kotlin/baaahs/app/ui/ShaderCardView.kt b/src/jsMain/kotlin/baaahs/app/ui/ShaderCardView.kt
index ed53d75f99..714aa038cb 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/ShaderCardView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/ShaderCardView.kt
@@ -7,7 +7,6 @@ import baaahs.gl.preview.GadgetAdjuster
 import baaahs.show.mutable.MutablePatch
 import baaahs.ui.unaryMinus
 import baaahs.ui.xComponent
-import js.objects.jso
 import kotlinx.css.LinearDimension
 import materialui.icon
 import mui.material.*
@@ -40,7 +39,7 @@ private val ShaderCardView = xComponent<ShaderCardProps>("ShaderCard") { props -
 
     Card {
         key = mutablePatch.id
-        attrs.classes = jso { this.root = -styles.shaderCard }
+        attrs.className = -styles.shaderCard
         attrs.sx {
             maxWidth = important("initial".unsafeCast<MaxWidth>())
         }
@@ -65,9 +64,9 @@ private val ShaderCardView = xComponent<ShaderCardProps>("ShaderCard") { props -
             }
 
             CardActions {
-                attrs.classes = jso { this.root = -styles.shaderCardActions }
+                attrs.className = -styles.shaderCardActions
                 Typography {
-                    attrs.classes = jso { this.root = -styles.shaderCardContent }
+                    attrs.className = -styles.shaderCardContent
                     attrs.variant = TypographyVariant.body2
                     attrs.sx {
                         display = Display.block
diff --git a/src/jsMain/kotlin/baaahs/app/ui/ShaderDiagnosticsView.kt b/src/jsMain/kotlin/baaahs/app/ui/ShaderDiagnosticsView.kt
index 2012586d57..42a1265210 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/ShaderDiagnosticsView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/ShaderDiagnosticsView.kt
@@ -1,10 +1,10 @@
 package baaahs.app.ui
 
 import baaahs.gl.preview.ShaderBuilder
+import baaahs.ui.muiClasses
 import baaahs.ui.unaryMinus
 import baaahs.ui.unaryPlus
 import baaahs.ui.xComponent
-import js.objects.jso
 import mui.material.Divider
 import mui.material.Popover
 import react.Props
@@ -15,6 +15,7 @@ import react.dom.div
 import react.dom.header
 import react.dom.pre
 import web.dom.Element
+import web.events.Event
 
 private val ShaderDiagnostics = xComponent<ShaderDiagnosticsProps>("ShaderDiagnostics") { props ->
 
@@ -22,12 +23,12 @@ private val ShaderDiagnostics = xComponent<ShaderDiagnosticsProps>("ShaderDiagno
     val linkedPatch = props.builder.linkedProgram
 
     Popover {
-        attrs.classes = jso { this.paper = -ShaderPreviewStyles.errorPopup }
+        attrs.classes = muiClasses { paper = -ShaderPreviewStyles.errorPopup }
         attrs.open = props.anchor != null
         props.anchor?.let { anchor -> attrs.anchorEl = anchor }
         attrs.onClose = { event, _ ->
             props.onClose()
-            event.stopPropagation()
+            (event as Event).stopPropagation()
         }
 
         header { +"Errors:" }
diff --git a/src/jsMain/kotlin/baaahs/app/ui/ShowLayoutView.kt b/src/jsMain/kotlin/baaahs/app/ui/ShowLayoutView.kt
index cf978b490f..aaf375bca7 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/ShowLayoutView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/ShowLayoutView.kt
@@ -93,7 +93,7 @@ private val ShowLayoutView = xComponent<ShowLayoutProps>("ShowLayout") { props -
 
     if (tabs.size > 1) {
         Tabs {
-            attrs.classes = jso { this.root = -styles.showTabs }
+            attrs.className = -styles.showTabs
             attrs.value = layout.currentTabIndex
             attrs.onChange = handleChangeTab
             tabs.forEachIndexed { index, tab ->
diff --git a/src/jsMain/kotlin/baaahs/app/ui/Styles.kt b/src/jsMain/kotlin/baaahs/app/ui/Styles.kt
index bf5280c988..612d60a1f5 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/Styles.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/Styles.kt
@@ -135,6 +135,10 @@ class ThemeStyles(val theme: Theme) : StyleSheet("app-ui-theme", isStatic = true
         important(::color, Color.inherit)
     }
 
+    val appToolbarTabIndicator by css {
+        display = Display.none
+    }
+
     val appToolbarActions by css {
         display = Display.flex
     }
@@ -147,6 +151,7 @@ class ThemeStyles(val theme: Theme) : StyleSheet("app-ui-theme", isStatic = true
     val title by css {
         display = Display.flex
         userSelect = UserSelect.none
+        color = theme.palette.text.primary.asColor().important
     }
 
     val unsaved by css {
@@ -168,6 +173,7 @@ class ThemeStyles(val theme: Theme) : StyleSheet("app-ui-theme", isStatic = true
         bottom = 4.px
         fontSize = .6.em
         opacity = .6
+        textWrap = TextWrap.nowrap
 
         child("svg") {
             fontSize = 1.em
@@ -186,8 +192,8 @@ class ThemeStyles(val theme: Theme) : StyleSheet("app-ui-theme", isStatic = true
         padding = Padding(5.px, 1.em)
         marginLeft = 1.em
         marginRight = 1.em
-        color = theme.palette.primary.contrastText.asColor()
-        important(::backgroundColor, theme.palette.primary.main.asColor())
+        color = theme.palette.primary.contrastText.asColor().important
+        backgroundColor = theme.palette.primary.main.asColor().important
         borderColor = theme.palette.primary.contrastText.asColor()
 
         svg {
diff --git a/src/jsMain/kotlin/baaahs/app/ui/controllers/SacnControllerEditorView.kt b/src/jsMain/kotlin/baaahs/app/ui/controllers/SacnControllerEditorView.kt
index fdd5981ef0..0d06b15125 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/controllers/SacnControllerEditorView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/controllers/SacnControllerEditorView.kt
@@ -7,7 +7,6 @@ import baaahs.scene.MutableSacnControllerConfig
 import baaahs.ui.unaryMinus
 import baaahs.ui.value
 import baaahs.ui.xComponent
-import js.objects.jso
 import mui.material.Container
 import mui.material.TextField
 import mui.system.sx
@@ -38,7 +37,7 @@ private val SacnControllerEditorView = xComponent<SacnControllerEditorProps>("Sa
     }
 
     Container {
-        attrs.classes = jso { root = -styles.propertiesEditSection }
+        attrs.className = -styles.propertiesEditSection
         attrs.sx {
             display = web.cssom.Display.flex
             flexDirection = web.cssom.FlexDirection.column
diff --git a/src/jsMain/kotlin/baaahs/app/ui/controls/ButtonControlView.kt b/src/jsMain/kotlin/baaahs/app/ui/controls/ButtonControlView.kt
index f9c9ef912a..a97da56e54 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/controls/ButtonControlView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/controls/ButtonControlView.kt
@@ -9,7 +9,6 @@ import baaahs.control.OpenButtonControl
 import baaahs.show.live.ControlProps
 import baaahs.ui.*
 import baaahs.util.useResizeListener
-import js.objects.jso
 import mui.material.ToggleButton
 import react.Props
 import react.RBuilder
@@ -18,6 +17,7 @@ import react.dom.div
 import react.dom.events.PointerEvent
 import react.useContext
 import web.events.EventType
+import web.events.addEventListener
 import web.html.HTMLButtonElement
 import web.html.HTMLDivElement
 import web.uievents.MouseButton
@@ -77,7 +77,7 @@ private val ButtonControlView = xComponent<ButtonProps>("ButtonControl") { props
         val buttonEl = buttonRef.current
         if (buttonControl.expandsOnLongPress && buttonEl != null) {
             buttonEl.setAttribute("data-long-press-delay", "750")
-            buttonEl.addEventListener(EventType("long-press"), callback = { e ->
+            buttonEl.addEventListener(EventType("long-press"), { e ->
                 val originalEvent = e.asDynamic().detail.originalEvent as web.uievents.PointerEvent
                 val isPrimaryButton = originalEvent.button == MouseButton.MAIN && !originalEvent.ctrlKey
                 if (isPrimaryButton && appContext.showManager.editMode.isOff) {
@@ -104,8 +104,8 @@ private val ButtonControlView = xComponent<ButtonProps>("ButtonControl") { props
             ref = buttonRef
 
             if (showPreview) {
-                attrs.classes = jso {
-                    root = -Styles.buttonLabelWhenPreview
+                attrs.className = -Styles.buttonLabelWhenPreview
+                attrs.classes = muiClasses {
                     selected = -Styles.buttonSelectedWhenPreview
                 }
             }
diff --git a/src/jsMain/kotlin/baaahs/app/ui/controls/ControlWrapperView.kt b/src/jsMain/kotlin/baaahs/app/ui/controls/ControlWrapperView.kt
index 177e2d409a..aafa1ed57c 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/controls/ControlWrapperView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/controls/ControlWrapperView.kt
@@ -4,7 +4,6 @@ import baaahs.app.ui.appContext
 import baaahs.show.live.ControlProps
 import baaahs.show.live.OpenControl
 import baaahs.ui.*
-import js.objects.jso
 import materialui.icon
 import mui.material.Card
 import react.Props
@@ -26,7 +25,7 @@ private val ControlWrapper = xComponent<ControlWrapperProps>("Control") { props
     }
 
     Card {
-        attrs.classes = jso { root = props.className?.className ?: -Styles.controlBox }
+        attrs.className = props.className?.className ?: -Styles.controlBox
         props.control.getView(props.controlProps)
             .render(this)
 
diff --git a/src/jsMain/kotlin/baaahs/app/ui/controls/GridButtonGroupControlView.kt b/src/jsMain/kotlin/baaahs/app/ui/controls/GridButtonGroupControlView.kt
index a7358ca914..ecfedf3ed2 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/controls/GridButtonGroupControlView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/controls/GridButtonGroupControlView.kt
@@ -18,7 +18,6 @@ import baaahs.ui.gridlayout.LayoutItem
 import baaahs.ui.gridlayout.gridLayout
 import baaahs.util.useResizeListener
 import external.react_resizable.buildResizeHandle
-import js.objects.jso
 import mui.material.Card
 import mui.material.Menu
 import react.Props
@@ -119,11 +118,9 @@ private val GridButtonGroupControlView = xComponent<GridButtonGroupProps>("GridB
     }
 
     Card {
-        attrs.classes = jso {
-            root = -layoutStyles.buttonGroupCard and
-                    (+if (editMode.isOn) layoutStyles.editModeOn else layoutStyles.editModeOff) // and
+        attrs.className = -layoutStyles.buttonGroupCard and
+                (+if (editMode.isOn) layoutStyles.editModeOn else layoutStyles.editModeOff) // and
 //                    +if (gridLayoutContext.dragging) layoutStyles.dragging else layoutStyles.notDragging
-        }
 
         if (buttonGroupControl.title.isNotBlank() && buttonGroupControl.showTitle) {
             header(+layoutStyles.buttonGroupHeader) {
diff --git a/src/jsMain/kotlin/baaahs/app/ui/controls/Styles.kt b/src/jsMain/kotlin/baaahs/app/ui/controls/Styles.kt
index 5f6d5cba57..93a5c6ce77 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/controls/Styles.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/controls/Styles.kt
@@ -200,7 +200,7 @@ object Styles : StyleSheet("app-ui-controls", isStatic = true) {
     }
 
     val buttonLabelWhenPreview by css {
-        important(::color, Color.white)
+        color = Color.white.important
         put("textShadow", "-1px 0px 2px black, 0px -1px 2px black, 1px 0px 2px black, 0px 1px 2px black")
         border = Border(5.px, BorderStyle.dotted, Color.transparent)
         fontWeight = "calc((1 - var(--dimmer-level)) * 600 + 100)".unsafeCast<FontWeight>()
@@ -208,10 +208,10 @@ object Styles : StyleSheet("app-ui-controls", isStatic = true) {
     }
 
     val buttonSelectedWhenPreview by css {
-        important(::color, Color.white)
+        color = Color.white.important
         put("textShadow", "-1px 0px 2px black, 0px -1px 2px black, 1px 0px 2px black, 0px 1px 2px black")
-        border = Border(5.px, BorderStyle.dotted, Color.orange)
-        important(::backgroundColor, Color.transparent)
+        border = Border(5.px, BorderStyle.dotted, Color.orange).important
+        backgroundColor = Color.transparent.important
     }
 
     val inputLabel by css {
diff --git a/src/jsMain/kotlin/baaahs/app/ui/controls/TransitionControlView.kt b/src/jsMain/kotlin/baaahs/app/ui/controls/TransitionControlView.kt
index 424e59e60c..f0b650de2c 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/controls/TransitionControlView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/controls/TransitionControlView.kt
@@ -8,10 +8,8 @@ import baaahs.show.live.ControlProps
 import baaahs.ui.and
 import baaahs.ui.unaryMinus
 import baaahs.ui.xComponent
-import js.objects.jso
 import kotlinx.css.StyledElement
 import mui.material.Button
-import mui.material.ButtonColor
 import mui.material.Card
 import mui.material.ToggleButton
 import mui.system.sx
@@ -65,21 +63,20 @@ private val TransitionControlView = xComponent<TransitionProps>("TransitionContr
     }
 
     Card {
-        attrs.classes = jso { this.root = -styles.transitionCard }
+        attrs.className = -styles.transitionCard
         ref = rootEl
 
 //        header { +"Transitions! \uD83D\uDE1E" }
 
         Button {
-            attrs.classes = jso {
+            attrs.className =
                 if (holdEngaged) {
-                    this.root = -styles.transitionHoldButton
+                    -styles.transitionHoldButton
                 } else {
-                    this.root = -styles.transitionHoldButton and styles.transitionHoldEngaged
+                    -styles.transitionHoldButton and styles.transitionHoldEngaged
                 }
-            }
             attrs.sx { gridArea = GridAreas.hold }
-            attrs.color = ButtonColor.secondary
+//            attrs.color = ButtonColor.secondary
             attrs.onClick = handleHoldButtonClick
             +"Hold"
         }
@@ -103,22 +100,22 @@ private val TransitionControlView = xComponent<TransitionProps>("TransitionContr
             inlineStyles { gridArea = "speed" }
             +"Speed: "
             ToggleButton {
-                attrs.classes = jso { this.root = -styles.speedButton }
+                attrs.className = -styles.speedButton
                 attrs.selected = speed == ".25s"; +"¼s"
                 attrs.value = ".25s"
             }
             ToggleButton {
-                attrs.classes = jso { this.root = -styles.speedButton }
+                attrs.className = -styles.speedButton
                 attrs.selected = speed == ".5s"; +"½s"
                 attrs.value = ".5s"
             }
             ToggleButton {
-                attrs.classes = jso { this.root = -styles.speedButton }
+                attrs.className = -styles.speedButton
                 attrs.selected = speed == "1s"; +"1s"
                 attrs.value = "1s"
             }
             ToggleButton {
-                attrs.classes = jso { this.root = -styles.speedButton }
+                attrs.className = -styles.speedButton
                 attrs.selected = speed == "2s"; +"2s"
                 attrs.value = "2s"
             }
diff --git a/src/jsMain/kotlin/baaahs/app/ui/controls/VisualizerControlView.kt b/src/jsMain/kotlin/baaahs/app/ui/controls/VisualizerControlView.kt
index b3230c7321..3456192f8d 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/controls/VisualizerControlView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/controls/VisualizerControlView.kt
@@ -68,7 +68,7 @@ private val VisualizerControlView = xComponent<VisualizerControlProps>("Visualiz
 
     Card {
         ref = rootEl
-        attrs.classes = jso { this.root = -Styles.visualizerCard }
+        attrs.className = -Styles.visualizerCard
 
         div(+Styles.visualizerMenuAffordance) {
             attrs.onClick = showMenu
diff --git a/src/jsMain/kotlin/baaahs/app/ui/dialog/DialogPanelsView.kt b/src/jsMain/kotlin/baaahs/app/ui/dialog/DialogPanelsView.kt
index 0affcd68cb..2eb96b0af0 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/dialog/DialogPanelsView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/dialog/DialogPanelsView.kt
@@ -4,7 +4,6 @@ import baaahs.app.ui.PatchHolderEditorHelpText
 import baaahs.app.ui.controls.problemBadge
 import baaahs.ui.*
 import external.ErrorBoundary
-import js.objects.jso
 import materialui.icon
 import mui.material.*
 import react.Props
@@ -19,13 +18,13 @@ private val DialogPanelsView = xComponent<DialogPanelsProps>("DialogPanels") { p
 
     fun RBuilder.recursingList(dialogPanels: List<DialogPanel>) {
         List {
-            attrs.classes = jso { this.root = -DialogStyles.tabsList }
+            attrs.className = -DialogStyles.tabsList
             var previousListSubhead: String? = null
             dialogPanels.forEach { dialogPanel ->
                 dialogPanel.listSubhead?.let { subhead ->
                     if (previousListSubhead != subhead) {
                         ListSubheader {
-                            attrs.classes = jso { this.root = -DialogStyles.tabsSubheader }
+                            attrs.className = -DialogStyles.tabsSubheader
                             +subhead
                         }
                         previousListSubhead = subhead
@@ -41,7 +40,7 @@ private val DialogPanelsView = xComponent<DialogPanelsProps>("DialogPanels") { p
 
                     dialogPanel.icon?.let {
                         ListItemIcon {
-                            attrs.classes = jso { this.root = -DialogStyles.tabsListItemIcon }
+                            attrs.className = -DialogStyles.tabsListItemIcon
                             icon(it)
                         }
                     }
diff --git a/src/jsMain/kotlin/baaahs/app/ui/editor/BetterSelectView.kt b/src/jsMain/kotlin/baaahs/app/ui/editor/BetterSelectView.kt
index a7a6b17ea9..2846e4d440 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/editor/BetterSelectView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/editor/BetterSelectView.kt
@@ -3,7 +3,6 @@ package baaahs.app.ui.editor
 import baaahs.ui.asTextNode
 import baaahs.ui.unaryMinus
 import baaahs.ui.xComponent
-import js.objects.jso
 import mui.material.*
 import react.Props
 import react.RBuilder
@@ -36,7 +35,7 @@ private val BetterSelectView = xComponent<BetterSelectProps<Any?>>("BetterSelect
 
         props.label?.let { label ->
             InputLabel {
-                attrs.classes = jso { this.root = -ControlsStyles.inputLabel }
+                attrs.className = -ControlsStyles.inputLabel
                 attrs.margin = InputLabelMargin.dense
                 attrs.component = ReactHTML.legend
                 +label
diff --git a/src/jsMain/kotlin/baaahs/app/ui/editor/EditableManagerUiView.kt b/src/jsMain/kotlin/baaahs/app/ui/editor/EditableManagerUiView.kt
index 102f8c8290..6b0facb98f 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/editor/EditableManagerUiView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/editor/EditableManagerUiView.kt
@@ -5,7 +5,6 @@ import baaahs.app.ui.dialog.DialogStyles
 import baaahs.app.ui.dialog.dialogPanels
 import baaahs.ui.*
 import external.ErrorBoundary
-import js.objects.jso
 import mui.base.Portal
 import mui.icons.material.Redo
 import mui.icons.material.Undo
@@ -15,7 +14,6 @@ import react.*
 import react.dom.div
 import react.dom.form
 import react.dom.onSubmit
-import web.events.Event
 
 private val EditableManagerUi = xComponent<EditableManagerUiProps>("EditableManagerUi") { props ->
     val appContext = useContext(appContext)
@@ -35,7 +33,7 @@ private val EditableManagerUi = xComponent<EditableManagerUiProps>("EditableMana
             props.editableManager.applyChanges()
         }
     }
-    val handleDrawerClose = callback(props.editableManager) { _: Event, reason: String ->
+    val handleDrawerClose = callback(props.editableManager) { _: Any, reason: String ->
         if (props.editableManager.isModified()) {
             showModifiedWarning = true
         } else {
@@ -57,7 +55,7 @@ private val EditableManagerUi = xComponent<EditableManagerUiProps>("EditableMana
             attrs.onSubmit = handleFormSubmit
 
             Drawer {
-                attrs.classes = jso { this.paper = -styles.drawer }
+                attrs.classes = muiClasses { paper = -styles.drawer }
                 attrs.anchor = DrawerAnchor.bottom
                 attrs.variant = DrawerVariant.temporary
                 attrs.elevation
@@ -69,7 +67,7 @@ private val EditableManagerUi = xComponent<EditableManagerUiProps>("EditableMana
 
                     div(+DialogStyles.dialogTitleButtons) {
                         Button {
-                            attrs.classes = jso { this.root = -Styles.buttons }
+                            attrs.className = -Styles.buttons
                             attrs.startIcon = +Undo
                             attrs.disabled = !props.editableManager.canUndo()
                             attrs.onClick = handleUndo
@@ -78,7 +76,7 @@ private val EditableManagerUi = xComponent<EditableManagerUiProps>("EditableMana
                         }
 
                         Button {
-                            attrs.classes = jso { this.root = -Styles.buttons }
+                            attrs.className = -Styles.buttons
                             attrs.startIcon = +Redo
                             attrs.disabled = !props.editableManager.canRedo()
                             attrs.onClick = handleRedo
@@ -89,7 +87,7 @@ private val EditableManagerUi = xComponent<EditableManagerUiProps>("EditableMana
                 }
 
                 DialogContent {
-                    attrs.classes = jso { this.root = -styles.dialogContent }
+                    attrs.className = -styles.dialogContent
                     if (editorPanels.size == 1) {
                         ErrorBoundary {
                             attrs.FallbackComponent = ErrorDisplay
@@ -113,7 +111,7 @@ private val EditableManagerUi = xComponent<EditableManagerUiProps>("EditableMana
                 DialogActions {
                     if (editorPanels.size == 1) {
                         FormControlLabel {
-                            attrs.classes = jso { this.root = -styles.expandSwitchLabel }
+                            attrs.className = -styles.expandSwitchLabel
 
                             attrs.control = buildElement {
                                 Switch {
diff --git a/src/jsMain/kotlin/baaahs/app/ui/editor/EditorPanels.kt b/src/jsMain/kotlin/baaahs/app/ui/editor/EditorPanels.kt
index 1cb0817f34..58f868a3af 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/editor/EditorPanels.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/editor/EditorPanels.kt
@@ -182,7 +182,7 @@ actual fun getEditorPanelViews(): EditorPanelViews = object : EditorPanelViews {
 
                 if (canMatchParent) {
                     FormControlLabel {
-//                    attrs.classes = jso { this.root = -styles.expandSwitchLabel }
+//                    attrs.className = -styles.expandSwitchLabel
 
                         attrs.control = buildElement {
                             Switch {
diff --git a/src/jsMain/kotlin/baaahs/app/ui/editor/LinkSourceEditorView.kt b/src/jsMain/kotlin/baaahs/app/ui/editor/LinkSourceEditorView.kt
index 4a66a66983..8d36dfe463 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/editor/LinkSourceEditorView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/editor/LinkSourceEditorView.kt
@@ -3,10 +3,10 @@ package baaahs.app.ui.editor
 import baaahs.app.ui.appContext
 import baaahs.gl.shader.InputPort
 import baaahs.show.mutable.EditingShader
+import baaahs.ui.muiClasses
 import baaahs.ui.unaryMinus
 import baaahs.ui.withSelectEvent
 import baaahs.ui.xComponent
-import js.objects.jso
 import materialui.icon
 import mui.material.*
 import react.*
@@ -91,7 +91,7 @@ private val LinkSourceEditor = xComponent<LinkSourceEditorProps>("LinkSourceEdit
                 Divider {}
 
                 ListItem {
-                    attrs.classes = jso { this.root = -styles.showAdvancedMenuItem }
+                    attrs.classes = muiClasses { root = -styles.showAdvancedMenuItem }
 
                     Checkbox {
                         ref = showAdvancedCheckbox
diff --git a/src/jsMain/kotlin/baaahs/app/ui/editor/PatchEditorView.kt b/src/jsMain/kotlin/baaahs/app/ui/editor/PatchEditorView.kt
index c963e4d00a..0a1de008c1 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/editor/PatchEditorView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/editor/PatchEditorView.kt
@@ -11,10 +11,7 @@ import baaahs.gl.withCache
 import baaahs.show.mutable.EditingShader
 import baaahs.show.mutable.MutablePatch
 import baaahs.show.mutable.MutableShow
-import baaahs.ui.addObserver
-import baaahs.ui.unaryMinus
-import baaahs.ui.unaryPlus
-import baaahs.ui.xComponent
+import baaahs.ui.*
 import js.objects.jso
 import materialui.icon
 import mui.material.*
@@ -124,14 +121,14 @@ private val PatchEditorView = xComponent<PatchEditorProps>("PatchEditor") { prop
 
             div(+shaderEditorStyles.propsTabsAndPanels) {
                 Tabs {
-                    attrs.classes = jso { this.flexContainer = -shaderEditorStyles.tabsContainer }
+                    attrs.classes = muiClasses { flexContainer = -shaderEditorStyles.tabsContainer }
                     attrs.value = selectedTab
                     attrs.onChange = handleChangeTab.asDynamic()
                     attrs.orientation = Orientation.horizontal
                     attrs.variant = TabsVariant.scrollable
                     PageTabs.values().forEach { tab ->
                         Tab {
-                            attrs.classes = jso { this.root = -shaderEditorStyles.tab }
+                            attrs.className = -shaderEditorStyles.tab
                             attrs.label = buildElement { +tab.name }
                             attrs.value = tab.asDynamic()
                             attrs.sx { minWidth = Auto.auto }
diff --git a/src/jsMain/kotlin/baaahs/app/ui/editor/PatchesOverviewView.kt b/src/jsMain/kotlin/baaahs/app/ui/editor/PatchesOverviewView.kt
index f1293e3c56..8c734b82ef 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/editor/PatchesOverviewView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/editor/PatchesOverviewView.kt
@@ -12,7 +12,6 @@ import baaahs.show.mutable.MutablePatchHolder
 import baaahs.show.mutable.MutableShader
 import baaahs.ui.*
 import baaahs.util.CacheBuilder
-import js.objects.jso
 import materialui.icon
 import mui.icons.material.AddCircleOutline
 import mui.icons.material.CloudDownload
@@ -122,7 +121,7 @@ private val PatchesOverview = xComponent<PatchesOverviewProps>("PatchesOverview"
                 }
             } else {
                 Card {
-                    attrs.classes = jso { this.root = -styles.shaderCard }
+                    attrs.className = -styles.shaderCard
                     key = "new patch"
                     ref = newPatchCardRef
 
diff --git a/src/jsMain/kotlin/baaahs/app/ui/editor/ShaderLibraryDialogView.kt b/src/jsMain/kotlin/baaahs/app/ui/editor/ShaderLibraryDialogView.kt
index 2493f5a448..e8211e722a 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/editor/ShaderLibraryDialogView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/editor/ShaderLibraryDialogView.kt
@@ -40,7 +40,7 @@ private val ShaderLibraryDialogView = xComponent<ShaderLibraryDialogProps>("Shad
     val handleShowDevWarning by handler { _: Shader? -> devWarningIsOpen = true }
     val onSelect = props.onSelect ?: handleShowDevWarning
 
-    val handleClose = callback(onSelect) { _: Event, _: String -> onSelect(null) }
+    val handleClose = callback(onSelect) { _: Any, _: String -> onSelect(null) }
 
     val previewSizeRange = 1 .. 5
     var previewSize by state { 3 }
@@ -117,7 +117,7 @@ private val ShaderLibraryDialogView = xComponent<ShaderLibraryDialogProps>("Shad
             DialogTitle { +"Shader Library" }
 
             DialogContent {
-                attrs.classes = jso { this.root = -styles.dialogContent }
+                attrs.className = -styles.dialogContent
 
                 Box {
                     FormControl {
diff --git a/src/jsMain/kotlin/baaahs/app/ui/editor/help/FeedDescriptionView.kt b/src/jsMain/kotlin/baaahs/app/ui/editor/help/FeedDescriptionView.kt
index 66f1c52cef..3c2559e518 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/editor/help/FeedDescriptionView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/editor/help/FeedDescriptionView.kt
@@ -8,7 +8,7 @@ import baaahs.show.FeedBuilder
 import baaahs.ui.unaryMinus
 import baaahs.ui.unaryPlus
 import baaahs.ui.xComponent
-import js.objects.jso
+import baaahs.util.globalLaunch
 import mui.material.Button
 import react.Props
 import react.RBuilder
@@ -59,7 +59,7 @@ private val FeedDeclarationView = xComponent<FeedDeclarationsProps>("FeedDeclara
     }
 
     Button {
-        attrs.classes = jso { this.root = -styles.copyButton }
+        attrs.className = -styles.copyButton
         attrs.onClick = { event ->
             val target = event.currentTarget as HTMLElement?
             val pre = target
@@ -67,8 +67,10 @@ private val FeedDeclarationView = xComponent<FeedDeclarationsProps>("FeedDeclara
                 ?.getElementsByTagName("pre")
                 ?.get(0) as HTMLElement?
             pre?.innerText?.let {
-                navigator.clipboard.writeText(it)
-                target?.innerText = "Copied!"
+                globalLaunch {
+                    navigator.clipboard.writeText(it)
+                    target?.innerText = "Copied!"
+                }
             }
         }
         +"Copy…"
diff --git a/src/jsMain/kotlin/baaahs/app/ui/editor/layout/LayoutEditorDialogView.kt b/src/jsMain/kotlin/baaahs/app/ui/editor/layout/LayoutEditorDialogView.kt
index e841dcf119..38144a6521 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/editor/layout/LayoutEditorDialogView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/editor/layout/LayoutEditorDialogView.kt
@@ -17,7 +17,6 @@ import materialui.icon
 import mui.material.*
 import mui.system.Breakpoint
 import mui.system.sx
-import org.w3c.dom.events.Event
 import react.Props
 import react.RBuilder
 import react.RHandler
@@ -99,11 +98,11 @@ private val LayoutEditorDialogView = xComponent<LayoutEditorDialogProps>("Layout
     }
 
     val handleShowCodeButton by mouseEventHandler { showCode = !showCode }
-    val handleDialogClose = callback(props.onClose) { _: Event, _: String -> props.onClose() }
+    val handleDialogClose = callback(props.onClose) { _: Any, _: String -> props.onClose() }
     val handleCloseButton by mouseEventHandler(props.onClose) { props.onClose() }
 
     Dialog {
-        attrs.classes = jso {
+        attrs.classes = muiClasses {
             paper = ClassName(+styles.dialog and DraggablePaperHandleClassName)
         }
         attrs.open = props.open
@@ -133,7 +132,7 @@ private val LayoutEditorDialogView = xComponent<LayoutEditorDialogProps>("Layout
             div(+styles.outerContainer) {
                 List {
                     ListSubheader {
-                        attrs.classes = jso { this.root = -styles.listSubheader }
+                        attrs.className = -styles.listSubheader
                         +"Formats:"
                     }
                     mutableLayouts.formats.forEach { (id, layout) ->
diff --git a/src/jsMain/kotlin/baaahs/app/ui/editor/layout/LayoutEditorView.kt b/src/jsMain/kotlin/baaahs/app/ui/editor/layout/LayoutEditorView.kt
index 6d0a2d2309..e3d06d1be0 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/editor/layout/LayoutEditorView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/editor/layout/LayoutEditorView.kt
@@ -6,7 +6,6 @@ import baaahs.show.mutable.MutableGridTab
 import baaahs.show.mutable.MutableLegacyTab
 import baaahs.show.mutable.MutableShow
 import baaahs.ui.*
-import js.objects.jso
 import materialui.icon
 import mui.icons.material.Delete
 import mui.material.Tab
@@ -91,7 +90,7 @@ private val LayoutEditorView = xComponent<LayoutEditorProps>("LayoutEditor") { p
                         +tab.title
 
                         child(Delete) {
-                            attrs.classes = jso { root = -styles.deleteTabIcon }
+                            attrs.className = -styles.deleteTabIcon
                             attrs.onClick = handleTabDeleteClick[index].withMouseEvent()
                         }
                     }
diff --git a/src/jsMain/kotlin/baaahs/app/ui/editor/layout/LegacyLayoutWarningView.kt b/src/jsMain/kotlin/baaahs/app/ui/editor/layout/LegacyLayoutWarningView.kt
index 852b353079..fb3448c557 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/editor/layout/LegacyLayoutWarningView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/editor/layout/LegacyLayoutWarningView.kt
@@ -4,7 +4,6 @@ import baaahs.app.ui.Styles
 import baaahs.ui.typographyH6
 import baaahs.ui.unaryMinus
 import baaahs.ui.xComponent
-import js.objects.jso
 import materialui.icon
 import mui.icons.material.NotificationImportant
 import mui.material.Box
@@ -15,7 +14,7 @@ import react.RHandler
 
 private val LegacyLayoutWarningView = xComponent<LegacyLayoutEditorProps>("LegacyLayoutEditor") { props ->
     Paper {
-        attrs.classes = jso { root = -Styles.warningPaper }
+        attrs.className = -Styles.warningPaper
 
         Box {
             icon(NotificationImportant)
diff --git a/src/jsMain/kotlin/baaahs/app/ui/model/EntityListItemView.kt b/src/jsMain/kotlin/baaahs/app/ui/model/EntityListItemView.kt
index a0eafa6cd2..ab4f37db0f 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/model/EntityListItemView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/model/EntityListItemView.kt
@@ -5,7 +5,6 @@ import baaahs.scene.MutableEntity
 import baaahs.scene.MutableEntityGroup
 import baaahs.ui.unaryMinus
 import baaahs.ui.xComponent
-import js.objects.jso
 import mui.material.List
 import mui.material.ListItemButton
 import mui.material.ListItemText
@@ -31,7 +30,7 @@ private val EntityListItemView: ComponentType<EntityListItemProps> = xComponent(
 
     if (mutableEntity is MutableEntityGroup) {
         List {
-            attrs.classes = jso { this.root = -styles.entityList }
+            attrs.className = -styles.entityList
             mutableEntity.children.forEach { child ->
                 entityListItem {
                     attrs.mutableEntity = child
diff --git a/src/jsMain/kotlin/baaahs/app/ui/model/GridEditorView.kt b/src/jsMain/kotlin/baaahs/app/ui/model/GridEditorView.kt
index e4bf6bc94f..a90a722edb 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/model/GridEditorView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/model/GridEditorView.kt
@@ -6,7 +6,6 @@ import baaahs.model.GridData
 import baaahs.scene.EditingEntity
 import baaahs.scene.MutableGridData
 import baaahs.ui.*
-import js.objects.jso
 import mui.material.*
 import react.*
 import react.dom.br
@@ -31,7 +30,7 @@ private val GridEditorView = xComponent<GridEditorProps>("GridEditor") { props -
 
     header { +"Grid" }
     Container {
-        attrs.classes = jso { this.root = -styles.transformEditSection }
+        attrs.className = -styles.transformEditSection
         with(styles) {
             betterSelect<GridData.Direction> {
                 attrs.label = "Direction"
diff --git a/src/jsMain/kotlin/baaahs/app/ui/model/LightBarEditorView.kt b/src/jsMain/kotlin/baaahs/app/ui/model/LightBarEditorView.kt
index 83b097adc2..94a8ad6ef3 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/model/LightBarEditorView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/model/LightBarEditorView.kt
@@ -7,7 +7,6 @@ import baaahs.scene.MutableLightBarData
 import baaahs.ui.asTextNode
 import baaahs.ui.unaryMinus
 import baaahs.ui.xComponent
-import js.objects.jso
 import mui.material.Container
 import react.*
 import react.dom.header
@@ -40,7 +39,7 @@ private val LightBarEditorView = xComponent<LightBarEditorProps>("LightBarEditor
     header { +"Light Bar" }
 
     Container {
-        attrs.classes = jso { this.root = -styles.transformEditSection }
+        attrs.className = -styles.transformEditSection
         header { +"Start:" }
 
         vectorEditor {
@@ -51,7 +50,7 @@ private val LightBarEditorView = xComponent<LightBarEditorProps>("LightBarEditor
     }
 
     Container {
-        attrs.classes = jso { this.root = -styles.transformEditSection }
+        attrs.className = -styles.transformEditSection
         header { +"End:" }
 
         vectorEditor {
@@ -62,7 +61,7 @@ private val LightBarEditorView = xComponent<LightBarEditorProps>("LightBarEditor
     }
 
     Container {
-        attrs.classes = jso { this.root = -styles.transformEditSection }
+        attrs.className = -styles.transformEditSection
         header { +"Length:" }
 
         with(styles) {
diff --git a/src/jsMain/kotlin/baaahs/app/ui/model/LightRingEditorView.kt b/src/jsMain/kotlin/baaahs/app/ui/model/LightRingEditorView.kt
index 04934e259b..2455bab73b 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/model/LightRingEditorView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/model/LightRingEditorView.kt
@@ -5,7 +5,6 @@ import baaahs.model.LightRing
 import baaahs.scene.EditingEntity
 import baaahs.scene.MutableLightRingData
 import baaahs.ui.*
-import js.objects.jso
 import mui.material.*
 import react.*
 import react.dom.header
@@ -36,7 +35,7 @@ private val LightRingEditorView = xComponent<LightRingEditorProps>("LightRingEdi
     header { +"Light Ring" }
 
     Container {
-        attrs.classes = jso { this.root = -styles.transformEditSection }
+        attrs.className = -styles.transformEditSection
         header { +"Radius:" }
 
         with(styles) {
@@ -50,7 +49,7 @@ private val LightRingEditorView = xComponent<LightRingEditorProps>("LightRingEdi
     }
 
     Container {
-        attrs.classes = jso { this.root = -styles.transformEditSection }
+        attrs.className = -styles.transformEditSection
         header { +"First Pixel:" }
 
         with(styles) {
@@ -64,7 +63,7 @@ private val LightRingEditorView = xComponent<LightRingEditorProps>("LightRingEdi
     }
 
     Container {
-        attrs.classes = jso { this.root = -styles.transformEditSection }
+        attrs.className = -styles.transformEditSection
         header { +"Pixel Direction:" }
 
         FormControlLabel {
diff --git a/src/jsMain/kotlin/baaahs/app/ui/model/ModelEditorToolbarView.kt b/src/jsMain/kotlin/baaahs/app/ui/model/ModelEditorToolbarView.kt
index dc9848298e..60931ac61f 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/model/ModelEditorToolbarView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/model/ModelEditorToolbarView.kt
@@ -78,7 +78,7 @@ private val ModelEditorToolbarView = xComponent<ModelEditorToolbarProps>("ModelE
         attrs.handle = ".handle"
 
         Paper {
-            attrs.classes = jso { this.root = -styles.visualizerToolbar }
+            attrs.className = -styles.visualizerToolbar
             attrs.elevation = 5
 
             header("handle") { +"Tools" }
@@ -138,7 +138,7 @@ private val ModelEditorToolbarView = xComponent<ModelEditorToolbarProps>("ModelE
                     attrs.inputProps = jso {}
                     buildElement {
                         Input {
-                            attrs.classes = jso {
+                            attrs.classes = muiClasses {
                                 input = -styles.gridSizeInput
                                 underline = -styles.partialUnderline
                             }
diff --git a/src/jsMain/kotlin/baaahs/app/ui/model/ModelEditorView.kt b/src/jsMain/kotlin/baaahs/app/ui/model/ModelEditorView.kt
index af9bd7377d..bb4c1587da 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/model/ModelEditorView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/model/ModelEditorView.kt
@@ -10,7 +10,6 @@ import baaahs.sim.SimulationEnv
 import baaahs.ui.*
 import baaahs.util.useResizeListener
 import baaahs.visualizer.*
-import js.objects.jso
 import kotlinx.css.Padding
 import kotlinx.css.em
 import kotlinx.css.padding
@@ -107,13 +106,13 @@ private val ModelEditorView = xComponent<ModelEditorProps>("ModelEditor") { prop
     }
 
     Paper {
-        attrs.classes = jso { this.root = -styles.editorPanes }
+        attrs.className = -styles.editorPanes
         div(+styles.navigatorPane) {
             header { +"Navigator" }
 
             div(+styles.navigatorPaneContent) {
                 List {
-                    attrs.classes = jso { this.root = -styles.entityList }
+                    attrs.className = -styles.entityList
                     mutableModel.entities.forEach { mutableEntity ->
                         entityListItem {
                             attrs.mutableEntity = mutableEntity
diff --git a/src/jsMain/kotlin/baaahs/app/ui/model/MovingHeadEditorView.kt b/src/jsMain/kotlin/baaahs/app/ui/model/MovingHeadEditorView.kt
index 95269b19e6..04337205bc 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/model/MovingHeadEditorView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/model/MovingHeadEditorView.kt
@@ -7,7 +7,6 @@ import baaahs.scene.EditingEntity
 import baaahs.scene.MutableMovingHeadData
 import baaahs.ui.unaryMinus
 import baaahs.ui.xComponent
-import js.objects.jso
 import mui.material.Container
 import react.*
 import react.dom.header
@@ -27,7 +26,7 @@ private val MovingHeadEditorView = xComponent<MovingHeadEditorProps>("MovingHead
     header { +"Moving Head" }
 
     Container {
-        attrs.classes = jso { this.root = -styles.transformEditSection }
+        attrs.className = -styles.transformEditSection
         betterSelect<MovingHeadAdapter> {
             attrs.label = "Adapter"
             attrs.values = MovingHeadAdapter.all
diff --git a/src/jsMain/kotlin/baaahs/app/ui/model/NumberTextFieldView.kt b/src/jsMain/kotlin/baaahs/app/ui/model/NumberTextFieldView.kt
index b234aed66d..6c6ceb471b 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/model/NumberTextFieldView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/model/NumberTextFieldView.kt
@@ -38,7 +38,7 @@ private val NumberTextFieldView = xComponent<NumberTextFieldProps<Number?>>("Num
         attrs.variant = "standard"
         attrs.placeholder = props.placeholder
         attrs.InputProps = jso {
-            classes = jso { this.underline = -style.partialUnderline }
+            classes = jso { this.asDynamic().underline = -style.partialUnderline }
             size = Size.small
             margin = InputBaseMargin.dense
             props.adornment?.let { adornment ->
@@ -51,7 +51,7 @@ private val NumberTextFieldView = xComponent<NumberTextFieldProps<Number?>>("Num
             }
         }
         attrs.InputLabelProps = jso {
-            this.classes = jso { this.root = -Styles.inputLabel }
+            this.classes = jso { this.asDynamic().root = -Styles.inputLabel }
             this.shrink = true
         }
         attrs.onChange = cachedOnChange
diff --git a/src/jsMain/kotlin/baaahs/app/ui/model/ObjGroupEditorView.kt b/src/jsMain/kotlin/baaahs/app/ui/model/ObjGroupEditorView.kt
index 570bacf6ff..21474fbb0c 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/model/ObjGroupEditorView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/model/ObjGroupEditorView.kt
@@ -8,7 +8,6 @@ import baaahs.model.StrandCountEntityMetadataProvider
 import baaahs.scene.EditingEntity
 import baaahs.scene.MutableImportedEntityGroup
 import baaahs.ui.*
-import js.objects.jso
 import kotlinx.serialization.builtins.MapSerializer
 import kotlinx.serialization.builtins.serializer
 import kotlinx.serialization.json.Json
@@ -86,7 +85,7 @@ private val ObjGroupEditorView = xComponent<ObjGroupEditorProps>("ObjGroupEditor
     header { +"OBJ Import" }
 
     Container {
-        attrs.classes = jso { this.root = -styles.propertiesEditSection }
+        attrs.className = -styles.propertiesEditSection
         FormControlLabel {
             attrs.control = buildElement {
                 Switch {
@@ -115,7 +114,7 @@ private val ObjGroupEditorView = xComponent<ObjGroupEditorProps>("ObjGroupEditor
             }
         } else {
             TextField {
-                attrs.classes = jso { this.root = -styles.jsonEditorTextField }
+                attrs.className = -styles.jsonEditorTextField
                 attrs.fullWidth = true
                 attrs.multiline = true
                 attrs.rows = 6
@@ -168,7 +167,7 @@ private val ObjGroupEditorView = xComponent<ObjGroupEditorProps>("ObjGroupEditor
             }
             is StrandCountEntityMetadataProvider -> {
                 TextField {
-                    attrs.classes = jso { this.root = -styles.jsonEditorTextField }
+                    attrs.className = -styles.jsonEditorTextField
                     attrs.fullWidth = true
                     attrs.multiline = true
                     attrs.rows = 6
diff --git a/src/jsMain/kotlin/baaahs/app/ui/model/TitleAndDescriptionEditorView.kt b/src/jsMain/kotlin/baaahs/app/ui/model/TitleAndDescriptionEditorView.kt
index fe8bd57387..dbdadced37 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/model/TitleAndDescriptionEditorView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/model/TitleAndDescriptionEditorView.kt
@@ -5,7 +5,6 @@ import baaahs.scene.EditingEntity
 import baaahs.ui.unaryMinus
 import baaahs.ui.value
 import baaahs.ui.xComponent
-import js.objects.jso
 import mui.material.Container
 import mui.material.TextField
 import mui.system.sx
@@ -32,7 +31,7 @@ private val TitleAndDescriptionEditorView =
         }
 
         Container {
-            attrs.classes = jso { this.root = -styles.propertiesEditSection }
+            attrs.className = -styles.propertiesEditSection
             attrs.sx {
                 display = web.cssom.Display.flex
                 flexDirection = FlexDirection.column
diff --git a/src/jsMain/kotlin/baaahs/app/ui/model/TransformationEditorView.kt b/src/jsMain/kotlin/baaahs/app/ui/model/TransformationEditorView.kt
index 62b5c048be..9badfd67d6 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/model/TransformationEditorView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/model/TransformationEditorView.kt
@@ -8,7 +8,6 @@ import baaahs.scene.EditingEntity
 import baaahs.ui.unaryMinus
 import baaahs.ui.xComponent
 import baaahs.visualizer.toVector3
-import js.objects.jso
 import kotlinx.html.unsafe
 import mui.material.Container
 import react.*
@@ -45,7 +44,7 @@ private val TransformationEditorView = xComponent<TransformationEditorProps>("Tr
 
     header { +"Transformation" }
     Container {
-        attrs.classes = jso { this.root = -styles.transformEditSection }
+        attrs.className = -styles.transformEditSection
         header { +"Position:" }
 
         vectorEditor {
@@ -56,7 +55,7 @@ private val TransformationEditorView = xComponent<TransformationEditorProps>("Tr
     }
 
     Container {
-        attrs.classes = jso { this.root = -styles.transformEditSection }
+        attrs.className = -styles.transformEditSection
         header { +"Rotation:" }
 
         rotationEditor {
@@ -66,7 +65,7 @@ private val TransformationEditorView = xComponent<TransformationEditorProps>("Tr
     }
 
     Container {
-        attrs.classes = jso { this.root = -styles.transformEditSection }
+        attrs.className = -styles.transformEditSection
         header { +"Scale:" }
 
         vectorEditor {
diff --git a/src/jsMain/kotlin/baaahs/app/ui/patchmod/PatchModView.kt b/src/jsMain/kotlin/baaahs/app/ui/patchmod/PatchModView.kt
index ff83b69363..224544847f 100644
--- a/src/jsMain/kotlin/baaahs/app/ui/patchmod/PatchModView.kt
+++ b/src/jsMain/kotlin/baaahs/app/ui/patchmod/PatchModView.kt
@@ -6,7 +6,6 @@ import baaahs.app.ui.shaderPreview
 import baaahs.show.live.ControlProps
 import baaahs.show.live.OpenPatchHolder
 import baaahs.ui.*
-import js.objects.jso
 import mui.material.*
 import react.*
 import react.dom.div
@@ -82,7 +81,7 @@ private val PatchModView = xComponent<PatchModProps>("PatchMod") { props ->
                 appContext.showManager.openShow?.allControls?.forEach { control ->
                     if (incomingFeeds.intersect(control.controlledFeeds()).isNotEmpty()) {
                         Card {
-                            attrs.classes = jso { root = -Styles.controlBox }
+                            attrs.className = -Styles.controlBox
                             control.getView(ControlProps(null, null, null))
                                 .render(this)
                         }
diff --git a/src/jsMain/kotlin/baaahs/browser/RealMediaDevices.kt b/src/jsMain/kotlin/baaahs/browser/RealMediaDevices.kt
index 45c512a6db..7bb4339e20 100644
--- a/src/jsMain/kotlin/baaahs/browser/RealMediaDevices.kt
+++ b/src/jsMain/kotlin/baaahs/browser/RealMediaDevices.kt
@@ -14,6 +14,7 @@ import kotlinx.coroutines.delay
 import org.w3c.dom.ImageBitmap
 import org.w3c.dom.events.EventTarget
 import org.w3c.dom.mediacapture.*
+import web.events.EventHandler
 import web.html.HTMLVideoElement
 import kotlin.js.Promise
 
@@ -55,21 +56,23 @@ class RealMediaDevices : MediaDevices, CoroutineScope by MainScope() {
 //                    imageCapture = ImageCapture(videoTrack)
                     videoEl.srcObject = stream
                     videoEl.controls = true
-                    videoEl.play()
 
-                    videoEl.oncanplay = {
+                    videoEl.oncanplay = EventHandler {
                         println("oncanplay")
                         globalLaunch { capture() }
                     }
 
-                    videoEl.onended = {
+                    videoEl.onended = EventHandler {
                         println("onended")
                     }
 
-                    videoEl.onloadeddata = {
+                    videoEl.onloadeddata = EventHandler {
                         println("onloadeddata")
                     }
 
+                    globalLaunch {
+                        videoEl.play()
+                    }
                 }.catch { t -> println("caught ${t}") }
             }
 
diff --git a/src/jsMain/kotlin/baaahs/client/WebClient.kt b/src/jsMain/kotlin/baaahs/client/WebClient.kt
index 6af4a2c563..34f2909a17 100644
--- a/src/jsMain/kotlin/baaahs/client/WebClient.kt
+++ b/src/jsMain/kotlin/baaahs/client/WebClient.kt
@@ -105,7 +105,7 @@ class WebClient(
         }
     }
 
-    private fun toggleFullScreen() {
+    private suspend fun toggleFullScreen() {
         if (inFullScreenMode) {
             document.exitFullscreen()
             inFullScreenMode = false
@@ -168,6 +168,8 @@ class WebClient(
 
         suspend fun listDmxUniverses() = listDmxUniverses.listDmxUniverses()
 
-        fun toggleFullScreen() = this@WebClient.toggleFullScreen()
+        fun toggleFullScreen() = globalLaunch {
+            this@WebClient.toggleFullScreen()
+        }
     }
 }
\ No newline at end of file
diff --git a/src/jsMain/kotlin/baaahs/imaging/JsImaging.kt b/src/jsMain/kotlin/baaahs/imaging/JsImaging.kt
index c9c038a733..443c43206a 100644
--- a/src/jsMain/kotlin/baaahs/imaging/JsImaging.kt
+++ b/src/jsMain/kotlin/baaahs/imaging/JsImaging.kt
@@ -13,12 +13,12 @@ import js.typedarrays.Uint8ClampedArray
 import kotlinx.coroutines.await
 import org.khronos.webgl.get
 import web.canvas.CanvasRenderingContext2D
-import web.canvas.ImageBitmap
-import web.canvas.ImageData
 import web.gl.WebGLRenderingContext
 import web.html.HTMLCanvasElement
 import web.html.HTMLImageElement
 import web.html.HTMLVideoElement
+import web.images.ImageBitmap
+import web.images.ImageData
 
 actual fun imageFromDataUrl(dataUrl: String): Image {
     return if (dataUrl.looksLikeGif()) {
diff --git a/src/jsMain/kotlin/baaahs/mapper/ControllerConfigEditorView.kt b/src/jsMain/kotlin/baaahs/mapper/ControllerConfigEditorView.kt
index cabded4fe4..ead9c9d9f1 100644
--- a/src/jsMain/kotlin/baaahs/mapper/ControllerConfigEditorView.kt
+++ b/src/jsMain/kotlin/baaahs/mapper/ControllerConfigEditorView.kt
@@ -11,7 +11,6 @@ import baaahs.ui.render
 import baaahs.ui.typographyH5
 import baaahs.ui.unaryMinus
 import baaahs.ui.xComponent
-import js.objects.jso
 import materialui.icon
 import mui.material.Button
 import mui.material.ButtonColor
@@ -60,7 +59,7 @@ private val ControllerConfigEditorView = xComponent<ControllerConfigEditorProps>
     }
 
     Card {
-        attrs.classes = jso { this.root = -styles.defaultConfigs }
+        attrs.className = -styles.defaultConfigs
         attrs.elevation = 4
 
         header {
@@ -98,7 +97,7 @@ private val ControllerConfigEditorView = xComponent<ControllerConfigEditorProps>
     }
 
     Button {
-        attrs.classes = jso { this.root = -styles.button }
+        attrs.className = -styles.button
         attrs.color = ButtonColor.secondary
         attrs.onClick = handleNewFixtureMappingClick
 
diff --git a/src/jsMain/kotlin/baaahs/mapper/ControllerConfigurerView.kt b/src/jsMain/kotlin/baaahs/mapper/ControllerConfigurerView.kt
index 15a0e2c9c4..51647e7a88 100644
--- a/src/jsMain/kotlin/baaahs/mapper/ControllerConfigurerView.kt
+++ b/src/jsMain/kotlin/baaahs/mapper/ControllerConfigurerView.kt
@@ -48,14 +48,14 @@ private val ControllerConfigurerView = xComponent<DeviceConfigurerProps>("Contro
     }
 
     Paper {
-        attrs.classes = jso { this.root = -styles.editorPanes }
+        attrs.className = -styles.editorPanes
 
         div(+styles.navigatorPane) {
             header { +"Controllers" }
 
             div(+styles.navigatorPaneActions) {
                 Button {
-                    attrs.classes = jso { this.root = -styles.button }
+                    attrs.className = -styles.button
                     attrs.color = ButtonColor.secondary
                     attrs.onClick = handleNewControllerClick
 
@@ -84,7 +84,7 @@ private val ControllerConfigurerView = xComponent<DeviceConfigurerProps>("Contro
 
             div(+styles.navigatorPaneContent) {
                 Table {
-                    attrs.classes = jso { this.root = -styles.controllersTable }
+                    attrs.className = -styles.controllersTable
                     attrs.stickyHeader = true
 
                     TableHead {
diff --git a/src/jsMain/kotlin/baaahs/mapper/FixtureConfigPickerView.kt b/src/jsMain/kotlin/baaahs/mapper/FixtureConfigPickerView.kt
index 038281ce5b..ef0bba9fa6 100644
--- a/src/jsMain/kotlin/baaahs/mapper/FixtureConfigPickerView.kt
+++ b/src/jsMain/kotlin/baaahs/mapper/FixtureConfigPickerView.kt
@@ -9,7 +9,6 @@ import baaahs.ui.asTextNode
 import baaahs.ui.render
 import baaahs.ui.unaryMinus
 import baaahs.ui.xComponent
-import js.objects.jso
 import mui.material.Card
 import react.Props
 import react.RBuilder
@@ -30,7 +29,7 @@ private val FixtureConfigPickerView = xComponent<FixtureConfigPickerProps>("Fixt
     val fixtureConfig = props.mutableFixtureOptions
 
     Card {
-        attrs.classes = jso { this.root = -styles.configCardOuter }
+        attrs.className = -styles.configCardOuter
         attrs.elevation = 4
 
         betterSelect<FixtureType?> {
@@ -43,7 +42,7 @@ private val FixtureConfigPickerView = xComponent<FixtureConfigPickerProps>("Fixt
 
         if (fixtureConfig != null) {
             Card {
-                attrs.classes = jso { this.root = -styles.configCardInner }
+                attrs.className = -styles.configCardInner
                 fixtureConfig.getEditorView(props.editingController)
                     .render(this)
             }
diff --git a/src/jsMain/kotlin/baaahs/mapper/FixtureConfigurerView.kt b/src/jsMain/kotlin/baaahs/mapper/FixtureConfigurerView.kt
index 156f63faf1..8bb7e7e6f2 100644
--- a/src/jsMain/kotlin/baaahs/mapper/FixtureConfigurerView.kt
+++ b/src/jsMain/kotlin/baaahs/mapper/FixtureConfigurerView.kt
@@ -5,7 +5,6 @@ import baaahs.scene.MutableScene
 import baaahs.ui.typographyH4
 import baaahs.ui.unaryMinus
 import baaahs.ui.xComponent
-import js.objects.jso
 import mui.material.*
 import react.Props
 import react.RBuilder
@@ -20,11 +19,11 @@ private val FixtureConfigurerView = xComponent<FixtureConfigurerProps>("FixtureC
     val styles = appContext.allStyles.controllerEditor
 
     Paper {
-        attrs.classes = jso { this.root = -styles.editorPanes }
+        attrs.className = -styles.editorPanes
         typographyH4 { +"Fixtures" }
 
         Table {
-            attrs.classes = jso { this.root = -styles.controllersTable }
+            attrs.className = -styles.controllersTable
             attrs.stickyHeader = true
 
             TableHead {
diff --git a/src/jsMain/kotlin/baaahs/mapper/FixtureMappingEditorView.kt b/src/jsMain/kotlin/baaahs/mapper/FixtureMappingEditorView.kt
index dde1658351..39f831f08b 100644
--- a/src/jsMain/kotlin/baaahs/mapper/FixtureMappingEditorView.kt
+++ b/src/jsMain/kotlin/baaahs/mapper/FixtureMappingEditorView.kt
@@ -12,7 +12,6 @@ import baaahs.scene.MutableScene
 import baaahs.ui.asTextNode
 import baaahs.ui.unaryMinus
 import baaahs.ui.xComponent
-import js.objects.jso
 import mui.icons.material.ExpandMore
 import mui.material.*
 import react.*
@@ -42,7 +41,7 @@ private val FixtureMappingEditorView = xComponent<FixtureMappingEditorProps>("Fi
     val toggleExpanded by mouseEventHandler { expanded = !expanded }
 
     Accordion {
-        attrs.classes = jso { this.root = -styles.expansionPanelRoot }
+        attrs.className = -styles.expansionPanelRoot
         attrs.expanded = expanded
 
         AccordionSummary {
@@ -93,7 +92,7 @@ private val FixtureMappingEditorView = xComponent<FixtureMappingEditorProps>("Fi
         }
 
         AccordionDetails {
-            attrs.classes = jso { this.root = -styles.expansionPanelDetails }
+            attrs.className = -styles.expansionPanelDetails
             fixtureConfigPicker {
                 attrs.editingController = props.editingController
                 attrs.mutableFixtureOptions = props.mutableFixtureMapping.fixtureOptions
diff --git a/src/jsMain/kotlin/baaahs/mapper/JsMapper.kt b/src/jsMain/kotlin/baaahs/mapper/JsMapper.kt
index 5de2f07c6a..480ce9c8c7 100644
--- a/src/jsMain/kotlin/baaahs/mapper/JsMapper.kt
+++ b/src/jsMain/kotlin/baaahs/mapper/JsMapper.kt
@@ -35,12 +35,14 @@ import three_ext.*
 import web.animations.requestAnimationFrame
 import web.canvas.CanvasImageSource
 import web.canvas.CanvasRenderingContext2D
-import web.canvas.ImageBitmap
 import web.cssom.Cursor
 import web.events.Event
+import web.events.addEventListener
+import web.events.removeEventListener
 import web.html.HTMLCanvasElement
 import web.html.HTMLElement
 import web.html.HTMLImageElement
+import web.images.ImageBitmap
 import web.prompts.prompt
 import web.uievents.KeyboardEvent
 import web.uievents.MouseEvent
diff --git a/src/jsMain/kotlin/baaahs/mapper/TransportConfigPickerView.kt b/src/jsMain/kotlin/baaahs/mapper/TransportConfigPickerView.kt
index 6903a123ee..399f588efd 100644
--- a/src/jsMain/kotlin/baaahs/mapper/TransportConfigPickerView.kt
+++ b/src/jsMain/kotlin/baaahs/mapper/TransportConfigPickerView.kt
@@ -10,7 +10,6 @@ import baaahs.ui.asTextNode
 import baaahs.ui.render
 import baaahs.ui.unaryMinus
 import baaahs.ui.xComponent
-import js.objects.jso
 import mui.material.Card
 import react.Props
 import react.RBuilder
@@ -31,7 +30,7 @@ private val TransportConfigPickerView = xComponent<TransportConfigPickerProps>("
     val transportConfig = props.mutableTransportConfig
 
     Card {
-        attrs.classes = jso { this.root = -styles.configCardOuter }
+        attrs.className = -styles.configCardOuter
         attrs.elevation = 4
 
         betterSelect<TransportType?> {
@@ -44,7 +43,7 @@ private val TransportConfigPickerView = xComponent<TransportConfigPickerProps>("
 
         if (transportConfig != null) {
             Card {
-                attrs.classes = jso { this.root = -styles.configCardInner }
+                attrs.className = -styles.configCardInner
                 transportConfig.getEditorView(props.editingController)
                     .render(this)
             }
diff --git a/src/jsMain/kotlin/baaahs/plugin/beatlink/BeatLinkControlView.kt b/src/jsMain/kotlin/baaahs/plugin/beatlink/BeatLinkControlView.kt
index 080065b973..db4671da34 100644
--- a/src/jsMain/kotlin/baaahs/plugin/beatlink/BeatLinkControlView.kt
+++ b/src/jsMain/kotlin/baaahs/plugin/beatlink/BeatLinkControlView.kt
@@ -12,7 +12,6 @@ import baaahs.show.Shader
 import baaahs.show.live.ControlProps
 import baaahs.ui.*
 import baaahs.util.*
-import js.objects.jso
 import kotlinx.css.*
 import kotlinx.css.properties.s
 import mui.material.Card
@@ -144,7 +143,7 @@ private val beatLinkControl = xComponent<BeatLinkControlProps>("BeatLinkControl"
     val playerStateHeightUnits = allPlayers.values.sumOf { it.heightUnits() }
 
     Card {
-        attrs.classes = jso { this.root = -Styles.card }
+        attrs.className = -Styles.card
         div(+Styles.card) {
             ref = containerRef
 
diff --git a/src/jsMain/kotlin/baaahs/plugin/sound_analysis/SoundAnalysisControlView.kt b/src/jsMain/kotlin/baaahs/plugin/sound_analysis/SoundAnalysisControlView.kt
index 98185fa29e..09d77471f2 100644
--- a/src/jsMain/kotlin/baaahs/plugin/sound_analysis/SoundAnalysisControlView.kt
+++ b/src/jsMain/kotlin/baaahs/plugin/sound_analysis/SoundAnalysisControlView.kt
@@ -14,7 +14,6 @@ import baaahs.ui.important
 import baaahs.ui.unaryMinus
 import baaahs.ui.unaryPlus
 import baaahs.ui.xComponent
-import js.objects.jso
 import kotlinx.css.*
 import mui.material.Card
 import react.Props
@@ -50,7 +49,7 @@ private val SoundAnalysisControl = xComponent<SoundAnalysisControlProps>("SoundA
     soundAnalysisVisualizerShader.onAvailable { shader = it }
 
     Card {
-        attrs.classes = jso { this.root = -Styles.card }
+        attrs.className = -Styles.card
         div(+Styles.card) {
             shaderPreview {
                 attrs.shader = shader
diff --git a/src/jsMain/kotlin/baaahs/plugin/webcam/DefaultVideoProvider.kt b/src/jsMain/kotlin/baaahs/plugin/webcam/DefaultVideoProvider.kt
index 8c36a81748..f6d12c0bf4 100644
--- a/src/jsMain/kotlin/baaahs/plugin/webcam/DefaultVideoProvider.kt
+++ b/src/jsMain/kotlin/baaahs/plugin/webcam/DefaultVideoProvider.kt
@@ -2,10 +2,11 @@ package baaahs.plugin.webcam
 
 import baaahs.document
 import baaahs.util.Logger
+import baaahs.util.globalLaunch
 import com.danielgergely.kgl.TextureResource
 import js.objects.jso
-import js.promise.catch
 import org.khronos.webgl.TexImageSource
+import web.events.EventHandler
 import web.html.HTMLVideoElement
 import web.media.streams.ConstrainULongRange
 import web.navigator.navigator
@@ -23,14 +24,14 @@ object BrowserWebCamVideoProvider : VideoProvider {
         setAttribute("style", "display:none")
         autoplay = true
         playsInline = true
-        onplay = { isPlaying = true }
+        onplay = EventHandler { isPlaying = true }
     }.also {
         document.body.appendChild(it)
     }
 
     private val logger = Logger<BrowserWebCamVideoProvider>()
 
-    private fun startCamera() {
+    private suspend fun startCamera() {
         logger.info { "Initializing." }
         if (!window.isSecureContext) {
             // The browser considers our session to be not secure; see
@@ -39,20 +40,21 @@ object BrowserWebCamVideoProvider : VideoProvider {
             return
         }
 
-        navigator.mediaDevices.getUserMedia(jso {
-            video = jso {
-                width = jso<ConstrainULongRange> { min = 320; ideal = 640; max = 1920 }
-                height = jso<ConstrainULongRange> { min = 200; ideal = 480; max = 1080 }
-            }
-        }).then { stream ->
+        try {
+            val mediaStream = navigator.mediaDevices.getUserMedia(jso {
+                video = jso {
+                    width = jso<ConstrainULongRange> { min = 320; ideal = 640; max = 1920 }
+                    height = jso<ConstrainULongRange> { min = 200; ideal = 480; max = 1080 }
+                }
+            })
             logger.warn { "From getUserMedia" }
-            console.warn("From getUserMedia: ", stream)
+            console.warn("From getUserMedia: ", mediaStream)
             // apply the stream to the video element used in the texture
-            videoElement.srcObject = stream
+            videoElement.srcObject = mediaStream
             videoElement.play()
-        }.catch { error ->
-            logger.error { "From getUserMedia" }
-            console.error("Unable to access the camera/webcam.", error)
+        } catch(e: Exception) {
+            logger.error(e) { "From getUserMedia" }
+            console.error("Unable to access the camera/webcam.", e)
         }
     }
 
@@ -67,7 +69,9 @@ object BrowserWebCamVideoProvider : VideoProvider {
     private fun ensureOpen() {
         if (!isOpen) {
             isOpen = true
-            startCamera()
+            globalLaunch {
+                startCamera()
+            }
         }
     }
 
diff --git a/src/jsMain/kotlin/baaahs/ui/ErrorDisplay.kt b/src/jsMain/kotlin/baaahs/ui/ErrorDisplay.kt
index 5f0514f549..ff0e4c50ad 100644
--- a/src/jsMain/kotlin/baaahs/ui/ErrorDisplay.kt
+++ b/src/jsMain/kotlin/baaahs/ui/ErrorDisplay.kt
@@ -74,7 +74,7 @@ val ErrorDisplay = fc<ErrorDisplayProps> { props ->
         }
 
         Paper {
-            attrs.classes = jso { this.root = -Styles.guruMeditationErrorStackTrace }
+            attrs.className = -Styles.guruMeditationErrorStackTrace
             attrs.elevation = 5
 
             h3 {
diff --git a/src/jsMain/kotlin/baaahs/ui/FileDialogView.kt b/src/jsMain/kotlin/baaahs/ui/FileDialogView.kt
index 8a3a8dd5bd..30e47c7fd2 100644
--- a/src/jsMain/kotlin/baaahs/ui/FileDialogView.kt
+++ b/src/jsMain/kotlin/baaahs/ui/FileDialogView.kt
@@ -6,13 +6,11 @@ import baaahs.doc.FileDisplay
 import baaahs.io.Fs
 import baaahs.ui.Styles.fileDialogFileList
 import baaahs.util.globalLaunch
-import js.objects.jso
 import materialui.icon
 import mui.icons.material.Folder
 import mui.icons.material.InsertDriveFile
 import mui.material.*
 import mui.system.Breakpoint
-import org.w3c.dom.events.Event
 import react.*
 import react.dom.events.FormEvent
 import react.dom.onChange
@@ -80,7 +78,7 @@ private val FileDialogView = xComponent<Props>("FileDialog") { props ->
         }; Unit
     }
 
-    val handleClose = callback(fileDialog) { _: Event, _: String ->
+    val handleClose = callback(fileDialog) { _: Any, _: String ->
         globalLaunch { fileDialog.onCancel() }
         Unit
     }
@@ -136,7 +134,7 @@ private val FileDialogView = xComponent<Props>("FileDialog") { props ->
             }
 
             List {
-                attrs.classes = jso { root = -fileDialogFileList }
+                attrs.className = -fileDialogFileList
                 val parent = currentDir!!.parent
                 if (parent != null) {
                     ListItemButton {
diff --git a/src/jsMain/kotlin/baaahs/ui/Help.kt b/src/jsMain/kotlin/baaahs/ui/Help.kt
index c9aec4a535..eaabff4b62 100644
--- a/src/jsMain/kotlin/baaahs/ui/Help.kt
+++ b/src/jsMain/kotlin/baaahs/ui/Help.kt
@@ -3,7 +3,6 @@ package baaahs.ui
 import kotlinx.css.LinearDimension
 import materialui.icon
 import mui.material.*
-import org.w3c.dom.events.Event
 import react.*
 import web.html.HTMLElement
 import kotlin.properties.ReadWriteProperty
@@ -13,7 +12,7 @@ val Help = xComponent<HelpProps>("Help", isPure = true) { props ->
     var open by state { false }
 
     val toggleHelp = callback { open = !open }
-    val closeHelp = callback { _: Event, _: String -> open = false }
+    val closeHelp = callback { _: Any, _: String -> open = false }
 
     Tooltip {
         attrs.title = "Help".asTextNode()
diff --git a/src/jsMain/kotlin/baaahs/ui/KeyboardShortcutHandler.kt b/src/jsMain/kotlin/baaahs/ui/KeyboardShortcutHandler.kt
index f79e34a718..810d4b1668 100644
--- a/src/jsMain/kotlin/baaahs/ui/KeyboardShortcutHandler.kt
+++ b/src/jsMain/kotlin/baaahs/ui/KeyboardShortcutHandler.kt
@@ -2,6 +2,8 @@ package baaahs.ui
 
 import web.events.Event
 import web.events.EventTarget
+import web.events.addEventListener
+import web.events.removeEventListener
 import web.html.HTMLElement
 import web.html.HTMLInputElement
 import web.html.HTMLTextAreaElement
diff --git a/src/jsMain/kotlin/baaahs/ui/PromptDialog.kt b/src/jsMain/kotlin/baaahs/ui/PromptDialog.kt
index 13eb139134..3ba27ac4bc 100644
--- a/src/jsMain/kotlin/baaahs/ui/PromptDialog.kt
+++ b/src/jsMain/kotlin/baaahs/ui/PromptDialog.kt
@@ -23,10 +23,10 @@ val PromptDialog = xComponent<PromptDialogProps>("PromptDialog") { props ->
         isInvalidMessage = prompt.isValid(newValue)
     }
 
-    val handleDialogClose by handler(props.onClose, prompt.onCancel) { event: Event, _: String ->
+    val handleDialogClose by handler(props.onClose, prompt.onCancel) { event: Any, _: String ->
         props.onClose()
         prompt.onCancel()
-        event.stopPropagation()
+        (event as Event).stopPropagation()
     }
     val handleCancelClick by mouseEventHandler(props.onClose, prompt.onCancel) { event ->
         props.onClose()
diff --git a/src/jsMain/kotlin/baaahs/ui/ScrollUtil.kt b/src/jsMain/kotlin/baaahs/ui/ScrollUtil.kt
new file mode 100644
index 0000000000..23047c34c8
--- /dev/null
+++ b/src/jsMain/kotlin/baaahs/ui/ScrollUtil.kt
@@ -0,0 +1,21 @@
+package baaahs.ui
+
+import baaahs.document
+import js.objects.jso
+import kotlinx.css.BorderStyle
+import web.events.Event
+import web.events.addEventListener
+import web.events.removeEventListener
+import web.uievents.TouchEvent
+
+val preventDefault: (Event) -> Unit = { event -> event.preventDefault() }
+val disableScroll = {
+    document.body.addEventListener(TouchEvent.TOUCH_MOVE, preventDefault, jso { passive = false })
+}
+val enableScroll = {
+    document.body.removeEventListener(TouchEvent.TOUCH_MOVE, preventDefault)
+}
+
+val groove = "groove".unsafeCast<BorderStyle>()
+val inset = "inset".unsafeCast<BorderStyle>()
+val outset = "outset".unsafeCast<BorderStyle>()
\ No newline at end of file
diff --git a/src/jsMain/kotlin/baaahs/ui/XBuilder.kt b/src/jsMain/kotlin/baaahs/ui/XBuilder.kt
index 6806701562..ed5542fc9b 100644
--- a/src/jsMain/kotlin/baaahs/ui/XBuilder.kt
+++ b/src/jsMain/kotlin/baaahs/ui/XBuilder.kt
@@ -68,8 +68,8 @@ class XBuilder(val logger: Logger) : react.RBuilderImpl() {
     private var stateHasChanged = false
 
     init {
-        react.useEffectOnce {
-            cleanup {
+        react.useEffectOnceWithCleanup {
+            onCleanup {
                 context.changeDetectors.forEach { it.runCleanups() }
             }
         }
@@ -152,10 +152,10 @@ class XBuilder(val logger: Logger) : react.RBuilderImpl() {
     }
 
     fun onMount(vararg watch: Any?, callback: ChangeDetector.() -> Unit) {
-        react.useEffect(*watch) {
+        react.useEffectWithCleanup(*watch) {
             val sideEffect = ChangeDetector(watch, logger)
             sideEffect.callback()
-            cleanup { sideEffect.runCleanups() }
+            onCleanup { sideEffect.runCleanups() }
         }
     }
 
@@ -209,8 +209,9 @@ class XBuilder(val logger: Logger) : react.RBuilderImpl() {
     fun switchEventHandler(vararg watch: Any?, block: (event: ChangeEvent<*>, checked: Boolean) -> Unit): ReadOnlyProperty<Any?, (event: ChangeEvent<*>, checked: Boolean) -> Unit> =
         handler(*watch, block = block)
 
-    fun <T> syntheticEventHandler(vararg watch: Any?, block: (event: SyntheticEvent<*, *>, value: T) -> Unit): ReadOnlyProperty<Any?, (event: SyntheticEvent<*, *>, value: T) -> Unit> =
-        handler(*watch, block = block)
+    @Suppress("UNCHECKED_CAST")
+    fun <T> syntheticEventHandler(vararg watch: Any?, block: (event: SyntheticEvent<*, *>, value: T) -> Unit): ReadOnlyProperty<Any?, (event: SyntheticEvent<*, *>, value: Any) -> Unit> =
+        handler(*watch, block = block as (SyntheticEvent<*, *>, Any) -> Unit)
 
     fun <T> newEventHandler(vararg watch: Any?, block: EventHandler<T>): ReadOnlyProperty<Any?, EventHandler<T>> =
         handler(*watch, block = block)
diff --git a/src/jsMain/kotlin/baaahs/ui/components/PaletteView.kt b/src/jsMain/kotlin/baaahs/ui/components/PaletteView.kt
index dffd3c61d6..a54bbc17f2 100644
--- a/src/jsMain/kotlin/baaahs/ui/components/PaletteView.kt
+++ b/src/jsMain/kotlin/baaahs/ui/components/PaletteView.kt
@@ -9,7 +9,6 @@ import external.react_draggable.Draggable
 import external.react_resizable.Resizable
 import external.react_resizable.ResizeCallbackData
 import external.react_resizable.buildResizeHandle
-import js.objects.jso
 import kotlinx.css.height
 import kotlinx.css.px
 import kotlinx.css.width
@@ -87,7 +86,7 @@ private val PaletteView = xComponent<PaletteProps>("Palette") { props ->
                     }
 
                     Paper {
-                        attrs.classes = jso { root = -styles.paper }
+                        attrs.className = -styles.paper
                         attrs.elevation = 3
 
                         props.title?.let {
diff --git a/src/jsMain/kotlin/baaahs/ui/diagnostics/PatchDiagnosticsPaletteView.kt b/src/jsMain/kotlin/baaahs/ui/diagnostics/PatchDiagnosticsPaletteView.kt
index c5d3adb3ab..733c3c8a62 100644
--- a/src/jsMain/kotlin/baaahs/ui/diagnostics/PatchDiagnosticsPaletteView.kt
+++ b/src/jsMain/kotlin/baaahs/ui/diagnostics/PatchDiagnosticsPaletteView.kt
@@ -54,7 +54,7 @@ val PatchDiagnosticsView = xComponent<PatchDiagnosticsProps>("PatchDiagnostics")
                 attrs.value = selectedDiagnostic
                 attrs.variant = TabsVariant.scrollable
                 attrs.onChange = { _, value ->
-                    selectedDiagnostic = value
+                    selectedDiagnostic = value.toString()
                 }
 
                 Tab { attrs.value = "DAG"; attrs.label = "DAG".asTextNode() }
diff --git a/src/jsMain/kotlin/baaahs/ui/slider/SliderView.kt b/src/jsMain/kotlin/baaahs/ui/slider/SliderView.kt
index 08737ecfe4..21029c13bb 100644
--- a/src/jsMain/kotlin/baaahs/ui/slider/SliderView.kt
+++ b/src/jsMain/kotlin/baaahs/ui/slider/SliderView.kt
@@ -10,7 +10,8 @@ import react.dom.div
 import react.dom.events.KeyboardEvent
 import react.dom.events.PointerEvent
 import web.dom.Element
-import web.events.EventHandler
+import web.events.addEventListener
+import web.events.removeEventListener
 import web.html.HTMLElement
 import web.uievents.MouseButton
 import kotlin.math.abs
@@ -62,20 +63,27 @@ private val Slider = xComponent<BetterSliderProps>("Slider") { props ->
         pixelToValue.domain = getSliderDomain(slider.current, vertical)
     }
 
-    val getEventValue by handler(domain, pixelToValue, vertical, pointerDownOffset) { e: PointerEvent<*> ->
+    val getEventValueReact by handler(domain, pixelToValue, vertical, pointerDownOffset) { e: PointerEvent<*> ->
         domain.clamp(
             pixelToValue.getValue(if (vertical) e.clientY else e.pageX) +
                     (pointerDownOffset.current ?: 0.0)
         )
     }
 
-    val handlePointerMove by handler(getEventValue) { e: PointerEvent<*> ->
+    val getEventValue by handler(domain, pixelToValue, vertical, pointerDownOffset) { e: web.uievents.PointerEvent ->
+        domain.clamp(
+            pixelToValue.getValue(if (vertical) e.clientY.toDouble() else e.pageX) +
+                    (pointerDownOffset.current ?: 0.0)
+        )
+    }
+
+    val handlePointerMove by handler(getEventValue) { e: web.uievents.PointerEvent ->
         val updateValue = getEventValue(e)
         activeHandle?.changeTo(updateValue, false)
         Unit
     }
 
-    val handlePointerUp by handler(getEventValue, handlePointerMove, slider) { e: PointerEvent<*> ->
+    val handlePointerUp by handler(getEventValue, handlePointerMove, slider) { e: web.uievents.PointerEvent ->
         val updateValue = getEventValue(e)
         activeHandle?.let {
             it.changeTo(updateValue, true)
@@ -87,7 +95,7 @@ private val Slider = xComponent<BetterSliderProps>("Slider") { props ->
         sliderEl.releasePointerCapture(e.pointerId)
         sliderEl.removeEventListener(
             web.uievents.PointerEvent.POINTER_MOVE,
-            handlePointerMove.unsafeCast<EventHandler<web.uievents.PointerEvent>>()
+            handlePointerMove
         )
     }
 
@@ -120,8 +128,8 @@ private val Slider = xComponent<BetterSliderProps>("Slider") { props ->
         handle.changeTo(newVal, false)
     }
 
-    val handleRailAndTrackClicks by handler(getEventValue) { e: PointerEvent<*> ->
-        val updateValue = getEventValue(e)
+    val handleRailAndTrackClicks by handler(getEventValueReact) { e: PointerEvent<*> ->
+        val updateValue = getEventValueReact(e)
 
         // find the closest handle key
         var updateHandle: Handle? = null
@@ -142,7 +150,7 @@ private val Slider = xComponent<BetterSliderProps>("Slider") { props ->
 
     val handlePointerDown by handler<EmitPointer>(
         handlesById, handlePointerMove, handlePointerUp, handleRailAndTrackClicks, props.onSlideStart,
-        pointerDownOffset, slider, getEventValue
+        pointerDownOffset, slider, getEventValueReact
     ) { e: PointerEvent<*>, _: Location, handleId: String? ->
         if (e.button != MouseButton.MAIN) return@handler
 
@@ -152,11 +160,11 @@ private val Slider = xComponent<BetterSliderProps>("Slider") { props ->
         sliderEl.setPointerCapture(e.pointerId)
         sliderEl.addEventListener(
             web.uievents.PointerEvent.POINTER_MOVE,
-            handlePointerMove.unsafeCast<EventHandler<web.uievents.PointerEvent>>()
+            handlePointerMove
         )
         sliderEl.addEventListener(
             web.uievents.PointerEvent.POINTER_UP,
-            handlePointerUp.unsafeCast<EventHandler<web.uievents.PointerEvent>>(),
+            handlePointerUp,
             jso { once = true })
 
         if (handleId != null) {
@@ -164,7 +172,7 @@ private val Slider = xComponent<BetterSliderProps>("Slider") { props ->
                 ?: error("Cannot find handle with id $handleId.")
 
             pointerDownOffset.current = null
-            pointerDownOffset.current = handle.value - getEventValue(e)
+            pointerDownOffset.current = handle.value - getEventValueReact(e)
             activeHandle = handle
             println("active handle.id = ${handle.id}")
             props.onSlideStart?.invoke(handle)
diff --git a/src/jsMain/kotlin/baaahs/ui/util.kt b/src/jsMain/kotlin/baaahs/ui/util.kt
index aaf63e1b70..70f76b26f9 100644
--- a/src/jsMain/kotlin/baaahs/ui/util.kt
+++ b/src/jsMain/kotlin/baaahs/ui/util.kt
@@ -2,7 +2,7 @@ package baaahs.ui
 
 import baaahs.document
 import baaahs.get2DContext
-import js.objects.jso
+import js.objects.Object
 import kotlinext.js.getOwnPropertyNames
 import kotlinx.css.*
 import kotlinx.css.properties.Time
@@ -19,7 +19,9 @@ import react.*
 import react.dom.RDOMBuilder
 import react.dom.events.*
 import react.dom.setProp
+import styled.GlobalStyles
 import styled.StyleSheet
+import web.animations.requestAnimationFrame
 import web.cssom.ClassName
 import web.cssom.Length
 import web.dom.Element
@@ -29,7 +31,6 @@ import web.events.EventTarget
 import web.html.HTMLCanvasElement
 import web.html.HTMLElement
 import web.html.HTMLInputElement
-import web.uievents.TouchEvent
 import kotlin.reflect.KProperty
 import kotlin.reflect.KProperty0
 
@@ -86,8 +87,19 @@ val EventTarget?.value: String
 val EventTarget?.checked: Boolean
         get() = (this as HTMLInputElement).checked
 
+var alreadyScheduled = false
 val RuleSet.name: String
-    get() = CssBuilder().apply { +this@name }.classes.joinToString(" ")
+    get() = CssBuilder().apply {
+        +this@name
+    }.classes.joinToString(" ").also {
+        if (!alreadyScheduled) {
+            alreadyScheduled = true
+            requestAnimationFrame { _ ->
+                alreadyScheduled = false
+                GlobalStyles.injectScheduled()
+            }
+        }
+    }
 
 val RuleSet.selector: String
     get() = ".$name"
@@ -153,6 +165,9 @@ fun <T> StyledElement.important(property: KProperty<T>, value: T) {
     put(property.name, "$value !important")
 }
 
+val <T : CssValue> T.important: T
+    get() = (object : CssValue("${this.value} !important") {}) as T
+
 inline fun RBuilder.typographyH1(crossinline block: RElementBuilder<TypographyProps>.() -> Unit) =
     Typography {
         attrs.variant = TypographyVariant.h1
@@ -230,15 +245,7 @@ fun renderWrapper(block: RBuilder.() -> Unit): View {
 }
 
 fun buildElements(handler: Render): ReactNode =
-    react.buildElements(RBuilder(), handler)
-
-val preventDefault: (Event) -> Unit = { event -> event.preventDefault() }
-val disableScroll = {
-    document.body.addEventListener(TouchEvent.TOUCH_MOVE, preventDefault, jso { passive = false })
-}
-val enableScroll = {
-    document.body.removeEventListener(TouchEvent.TOUCH_MOVE, preventDefault)
-}
+    react.buildElements(RBuilder(), handler)!!
 
 object Events {
     object Button {
@@ -300,10 +307,6 @@ fun Element.isParentOf(other: Element): Boolean {
     return false
 }
 
-val groove = "groove".unsafeCast<BorderStyle>()
-val inset = "inset".unsafeCast<BorderStyle>()
-val outset = "outset".unsafeCast<BorderStyle>()
-
 fun StyledElement.transition(
     property: String = "all",
     duration: Time = 0.s,
@@ -331,12 +334,11 @@ fun RElementBuilder<*>.copyFrom(fromProps: Props?) {
     copyFrom(fromProps.unsafeCast<CopyableProps>())
 }
 
-private val jsObj = js("Object")
 fun RElementBuilder<*>.copyFrom(fromProps: CopyableProps?) {
     if (fromProps == null) return
 
     val from = fromProps.asDynamic()
-    val keys = jsObj.keys(fromProps).unsafeCast<Array<String>>()
+    val keys = Object.keys(fromProps).unsafeCast<Array<String>>()
     keys.forEach { key -> attrs.asDynamic()[key] = from[key] }
 }
 
@@ -344,6 +346,15 @@ fun RDOMBuilder<*>.copyFrom(fromProps: CopyableProps?) {
     if (fromProps == null) return
 
     val from = fromProps.asDynamic()
-    val keys = jsObj.keys(fromProps).unsafeCast<Array<String>>()
+    val keys = Object.keys(fromProps).unsafeCast<Array<String>>()
     keys.forEach { key -> setProp(key, from[key]) }
 }
+
+fun <T> muiClasses(block: dynamic.() -> Unit): T {
+    val obj = js("{}")
+    block.invoke(obj)
+    Object.keys(obj).forEach { key ->
+        obj["Mui-$key"] = obj[key]
+    }
+    return obj.unsafeCast<T>()
+}
\ No newline at end of file
diff --git a/src/jsMain/kotlin/baaahs/util/UseInterval.kt b/src/jsMain/kotlin/baaahs/util/UseInterval.kt
index 6547a2ae4e..eb48323dfb 100644
--- a/src/jsMain/kotlin/baaahs/util/UseInterval.kt
+++ b/src/jsMain/kotlin/baaahs/util/UseInterval.kt
@@ -2,6 +2,7 @@ package baaahs.util
 
 import react.RBuilder
 import react.useEffect
+import react.useEffectWithCleanup
 import react.useRef
 import web.timers.clearInterval
 import web.timers.setInterval
@@ -15,11 +16,11 @@ fun RBuilder.useInterval(delay: Duration, callback: () -> Unit) {
         savedCallback.current = callback
     }
 
-    useEffect(delay) {
+    useEffectWithCleanup(delay) {
         val id = setInterval(delay) {
             savedCallback.current!!()
         }
 
-        cleanup { clearInterval(id) }
+        onCleanup { clearInterval(id) }
     }
 }
\ No newline at end of file
diff --git a/src/jsMain/kotlin/baaahs/util/UseResizeListener.kt b/src/jsMain/kotlin/baaahs/util/UseResizeListener.kt
index 551575997d..3e17325a08 100644
--- a/src/jsMain/kotlin/baaahs/util/UseResizeListener.kt
+++ b/src/jsMain/kotlin/baaahs/util/UseResizeListener.kt
@@ -8,17 +8,18 @@ import web.timers.clearTimeout
 import web.timers.setTimeout
 import kotlin.time.Duration.Companion.milliseconds
 
-@Suppress("unused")
+@Suppress("UnusedReceiverParameter")
 fun RBuilder.useResizeListener(elementRef: RefObject<out Element>, onResized: (width: Int, height: Int) -> Unit) {
     val onResizedThrottled = useCallback(elementRef, callback = throttle(onResized, 40))
 
     val previousSize = useRef<Pair<Int, Int>>(null)
 
     // Fire the callback anytime the ref is resized
-    useEffect {
-        val element = elementRef.current ?: return@useEffect
+    useEffectWithCleanup {
+        val element = elementRef.current ?: return@useEffectWithCleanup
 
         val ro = ResizeObserver { _, _ ->
+            console.log("resized", element, element.clientWidth, element.clientHeight)
             val size = element.clientWidth to element.clientHeight
             if (previousSize.current != size) {
                 previousSize.current = size
@@ -27,16 +28,16 @@ fun RBuilder.useResizeListener(elementRef: RefObject<out Element>, onResized: (w
         }
         ro.observe(element)
 
-        cleanup { ro.unobserve(element) }
+        onCleanup { ro.unobserve(element) }
     }
 
     // Fire once when the component first mounts
-    useEffect(elementRef, onResizedThrottled) {
+    useEffectWithCleanup(elementRef, onResizedThrottled) {
         val intervalId = setTimeout(500.milliseconds) {
             val element = elementRef.current ?: return@setTimeout
             onResizedThrottled(element.clientWidth, element.clientHeight)
         }
 
-        cleanup { clearTimeout(intervalId) }
+        onCleanup { clearTimeout(intervalId) }
     }
 }
\ No newline at end of file
diff --git a/src/jsMain/kotlin/baaahs/visualizer/Visualizer.kt b/src/jsMain/kotlin/baaahs/visualizer/Visualizer.kt
index c415581a8d..d58972492e 100644
--- a/src/jsMain/kotlin/baaahs/visualizer/Visualizer.kt
+++ b/src/jsMain/kotlin/baaahs/visualizer/Visualizer.kt
@@ -15,6 +15,8 @@ import three_ext.OrbitControls
 import three_ext.clear
 import three_ext.set
 import web.events.Event
+import web.events.addEventListener
+import web.events.removeEventListener
 import web.html.HTMLCanvasElement
 import web.html.HTMLElement
 import web.html.HTMLSpanElement
@@ -23,7 +25,6 @@ import web.timers.clearTimeout
 import web.timers.setTimeout
 import web.uievents.MouseEvent
 import web.uievents.PointerEvent
-import web.window.RESIZE
 import kotlin.math.*
 import kotlin.reflect.KClass
 
@@ -196,7 +197,6 @@ open class BaseVisualizer(
     }
 
     init {
-        @Suppress("LeakingThis")
         activeExtensions.values.forEach { it.attach() }
     }
 
diff --git a/src/jsMain/kotlin/external/react_resizable/types.kt b/src/jsMain/kotlin/external/react_resizable/types.kt
index 930736cce0..9283f2d26a 100644
--- a/src/jsMain/kotlin/external/react_resizable/types.kt
+++ b/src/jsMain/kotlin/external/react_resizable/types.kt
@@ -1,6 +1,5 @@
 package external.react_resizable
 
-import js.objects.jso
 import mui.material.SvgIcon
 import react.ReactElement
 import react.Ref
@@ -21,10 +20,8 @@ val ResizeHandleAxes = arrayOf(
 fun buildResizeHandle(axis: ResizeHandleAxis, ref: Ref<HTMLElement>) = buildElement {
     SvgIcon {
         attrs.viewBox = "0 0 20 20"
-        attrs.classes = jso {
-            this.root = ClassName("app-ui-layout-resize-handle " +
-                    "app-ui-layout-resize-handle-$axis react-resizable-handle")
-        }
+        attrs.className = ClassName("app-ui-layout-resize-handle " +
+                "app-ui-layout-resize-handle-$axis react-resizable-handle")
 
         when (axis.length) {
             1 -> { // edge (south)
diff --git a/webpack.config.d/output.js b/webpack.config.d/output.js
index a40f8a3a85..e12b294476 100644
--- a/webpack.config.d/output.js
+++ b/webpack.config.d/output.js
@@ -1,14 +1,5 @@
-const path = require('path');
-
 config = config || {};
 
-// cwd is build/js/packages/sparklemotion
-config.resolve.modules.push(path.resolve(__dirname, "../../node_modules"));
-
-config.resolve.alias = {
-    js: path.resolve(__dirname, "../../../../src/jsMain/js/"),
-};
-
 config.watchOptions = {
     ignored: ['**/*.kt']
 };
\ No newline at end of file