Build aarch64 windows and linux builds for releases

2024-08-28 16:36:29 -07:00
477 changed files with 6447 additions and 33119 deletions
--- a/.dir-locals.el
+++ b/.dir-locals.el
@@ -1,2 +0,0 @@
-((nil . ((eglot-luau-rojo-project-path . "plugin.project.json")
-         (eglot-luau-rojo-sourcemap-enabled . 't))))
--- a/.github/workflows/changelog.yml
+++ b/.github/workflows/changelog.yml
@@ -11,12 +11,12 @@ jobs:
    name: Check Actions
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
-
+    - uses: actions/checkout@v3
+    
    - name: Changelog check
      uses: Zomzog/changelog-checker@v1.3.0
      with:
-        fileName: CHANGELOG.md
+        fileName: CHANGELOG.md 
        noChangelogLabel: skip changelog
        checkNotification: Simple
      env:
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -16,7 +16,7 @@ jobs:

    strategy:
      matrix:
-        os: [ubuntu-22.04, windows-latest, macos-latest, windows-11-arm, ubuntu-22.04-arm]
+        os: [ubuntu-latest, windows-latest, macos-latest]

    steps:
    - uses: actions/checkout@v4
@@ -26,14 +26,13 @@ jobs:
    - name: Install Rust
      uses: dtolnay/rust-toolchain@stable

-    - name: Restore Rust Cache
-      uses: actions/cache/restore@v4
+    - name: Rust cache
+      uses: Swatinem/rust-cache@v2
+
+    - name: Setup Aftman
+      uses: ok-nick/setup-aftman@v0.3.0
      with:
-        path: |
-          ~/.cargo/registry
-          ~/.cargo/git
-          target
-        key: ${{ matrix.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+        version: 'v0.2.7'

    - name: Build
      run: cargo build --locked --verbose
@@ -41,15 +40,6 @@ jobs:
    - name: Test
      run: cargo test --locked --verbose

-    - name: Save Rust Cache
-      uses: actions/cache/save@v4
-      with:
-        path: |
-          ~/.cargo/registry
-          ~/.cargo/git
-          target
-        key: ${{ matrix.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
  msrv:
    name: Check MSRV
    runs-on: ubuntu-latest
@@ -60,29 +50,19 @@ jobs:
        submodules: true

    - name: Install Rust
-      uses: dtolnay/rust-toolchain@1.88.0
+      uses: dtolnay/rust-toolchain@1.70.0

-    - name: Restore Rust Cache
-      uses: actions/cache/restore@v4
+    - name: Rust cache
+      uses: Swatinem/rust-cache@v2
+
+    - name: Setup Aftman
+      uses: ok-nick/setup-aftman@v0.3.0
      with:
-        path: |
-          ~/.cargo/registry
-          ~/.cargo/git
-          target
-        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+        version: 'v0.2.7'

    - name: Build
      run: cargo build --locked --verbose

-    - name: Save Rust Cache
-      uses: actions/cache/save@v4
-      with:
-        path: |
-          ~/.cargo/registry
-          ~/.cargo/git
-          target
-        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
  lint:
    name: Rustfmt, Clippy, Stylua, & Selene
    runs-on: ubuntu-latest
@@ -97,19 +77,13 @@ jobs:
      with:
        components: rustfmt, clippy

-    - name: Restore Rust Cache
-      uses: actions/cache/restore@v4
-      with:
-        path: |
-          ~/.cargo/registry
-          ~/.cargo/git
-          target
-        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+    - name: Rust cache
+      uses: Swatinem/rust-cache@v2

-    - name: Setup Rokit
-      uses: CompeyDev/setup-rokit@v0.1.2
+    - name: Setup Aftman
+      uses: ok-nick/setup-aftman@v0.3.0
      with:
-        version: 'v1.1.0'
+        version: 'v0.2.7'

    - name: Stylua
      run: stylua --check plugin/src
@@ -123,11 +97,3 @@ jobs:
    - name: Clippy
      run: cargo clippy

-    - name: Save Rust Cache
-      uses: actions/cache/save@v4
-      with:
-        path: |
-          ~/.cargo/registry
-          ~/.cargo/git
-          target
-        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -25,13 +25,15 @@ jobs:
        with:
          submodules: true

-      - name: Setup Rokit
-        uses: CompeyDev/setup-rokit@v0.1.2
+      - name: Setup Aftman
+        uses: ok-nick/setup-aftman@v0.1.0
        with:
-          version: 'v1.1.0'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          trust-check: false
+          version: 'v0.2.6'

      - name: Build Plugin
-        run: rojo build plugin.project.json --output Rojo.rbxm
+        run: rojo build plugin --output Rojo.rbxm

      - name: Upload Plugin to Release
        env:
@@ -53,12 +55,12 @@ jobs:
        # https://doc.rust-lang.org/rustc/platform-support.html
        include:
          - host: linux
-            os: ubuntu-22.04
+            os: ubuntu-20.04
            target: x86_64-unknown-linux-gnu
            label: linux-x86_64

          - host: linux
-            os: ubuntu-22.04-arm
+            os: ubuntu-20.04
            target: aarch64-unknown-linux-gnu
            label: linux-aarch64

@@ -68,7 +70,7 @@ jobs:
            label: windows-x86_64

          - host: windows
-            os: windows-11-arm
+            os: windows-latest
            target: aarch64-pc-windows-msvc
            label: windows-aarch64

@@ -96,26 +98,19 @@ jobs:
        with:
          targets: ${{ matrix.target }}

-      - name: Restore Rust Cache
-        uses: actions/cache/restore@v4
+      - name: Setup Aftman
+        uses: ok-nick/setup-aftman@v0.1.0
        with:
-          path: |
-            ~/.cargo/registry
-            ~/.cargo/git
-            target
-          key: ${{ matrix.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          trust-check: false
+          version: 'v0.2.6'

      - name: Build Release
        run: cargo build --release --locked --verbose --target ${{ matrix.target }}
-
-      - name: Save Rust Cache
-        uses: actions/cache/save@v4
-        with:
-          path: |
-            ~/.cargo/registry
-            ~/.cargo/git
-            target
-          key: ${{ matrix.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+        env:
+          # Build into a known directory so we can find our build artifact more
+          # easily.
+          CARGO_TARGET_DIR: output

      - name: Generate Artifact Name
        shell: bash
@@ -132,11 +127,11 @@ jobs:
          mkdir staging

          if [ "${{ matrix.host }}" = "windows" ]; then
-            cp "target/${{ matrix.target }}/release/$BIN.exe" staging/
+            cp "output/${{ matrix.target }}/release/$BIN.exe" staging/
            cd staging
            7z a ../$ARTIFACT_NAME *
          else
-            cp "target/${{ matrix.target }}/release/$BIN" staging/
+            cp "output/${{ matrix.target }}/release/$BIN" staging/
            cd staging
            zip ../$ARTIFACT_NAME *
          fi
--- a/.gitignore
+++ b/.gitignore
@@ -10,8 +10,8 @@
 /*.rbxl
 /*.rbxlx

-# Sourcemap for the Rojo plugin (for better intellisense)
-/sourcemap.json
+# Test places for the Roblox Studio Plugin
+/plugin/*.rbxlx

 # Roblox Studio holds 'lock' files on places
 *.rbxl.lock
@@ -19,10 +19,3 @@

 # Snapshot files from the 'insta' Rust crate
 **/*.snap.new
-
-# Macos file system junk
-._*
-.DS_STORE
-
-# JetBrains IDEs
-/.idea/
--- a/.gitmodules
+++ b/.gitmodules
@@ -16,6 +16,3 @@
 [submodule "plugin/Packages/Highlighter"]
 	path = plugin/Packages/Highlighter
 	url = https://github.com/boatbomber/highlighter.git
-[submodule "plugin/Packages/msgpack-luau"]
-	path = plugin/Packages/msgpack-luau
-	url = https://github.com/cipharius/msgpack-luau/
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "JohnnyMorganz.luau-lsp",
-    "JohnnyMorganz.stylua",
-    "Kampfkarren.selene-vscode",
-    "rust-lang.rust-analyzer"
-  ]
-}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +0,0 @@
-{
-  "luau-lsp.sourcemap.rojoProjectFile": "plugin.project.json",
-  "luau-lsp.sourcemap.autogenerate": true
-}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -14,31 +14,13 @@ Code contributions are welcome for features and bugs that have been reported in
 You'll want these tools to work on Rojo:

 * Latest stable Rust compiler
-  * Rustfmt and Clippy are used for code formatting and linting.
 * Latest stable [Rojo](https://github.com/rojo-rbx/rojo)
-* [Rokit](https://github.com/rojo-rbx/rokit)
-* [Luau Language Server](https://github.com/JohnnyMorganz/luau-lsp) (Only needed if working on the Studio plugin.)
-
-When working on the Studio plugin, we recommend using this command to automatically rebuild the plugin when you save a change:
-
-*(Make sure you've enabled the Studio setting to reload plugins on file change!)*
-
-```bash
-bash scripts/watch-build-plugin.sh
-```
-
-You can also run the plugin's unit tests with the following:
-
-*(Make sure you have `run-in-roblox` installed first!)*
-
-```bash
-bash scripts/unit-test-plugin.sh
-```
+* [Foreman](https://github.com/Roblox/foreman)

 ## Documentation
 Documentation impacts way more people than the individual lines of code we write.

-If you find any problems in the documentation, including typos, bad grammar, misleading phrasing, or missing content, feel free to file issues and pull requests to fix them.
+If you find any problems in documentation, including typos, bad grammar, misleading phrasing, or missing content, feel free to file issues and pull requests to fix them.

 ## Bug Reports and Feature Requests
 Most of the tools around Rojo try to be clear when an issue is a bug. Even if they aren't, sometimes things don't work quite right.
--- a/Cargo.lock
+++ b/Cargo.lock
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,12 +1,8 @@
 [package]
 name = "rojo"
-version = "7.7.0-rc.1"
-rust-version = "1.88"
-authors = [
-    "Lucien Greathouse <me@lpghatguy.com>",
-    "Micah Reid <git@dekkonot.com>",
-    "Ken Loeffler <kenloef@gmail.com>",
-]
+version = "7.4.0"
+rust-version = "1.70.0"
+authors = ["Lucien Greathouse <me@lpghatguy.com>"]
 description = "Enables professional-grade development tools for Roblox developers"
 license = "MPL-2.0"
 homepage = "https://rojo.space"
@@ -46,22 +42,20 @@ name = "build"
 harness = false

 [dependencies]
-memofs = { version = "0.3.1", path = "crates/memofs" }
+memofs = { version = "0.3.0", path = "crates/memofs" }

 # These dependencies can be uncommented when working on rbx-dom simultaneously
-# rbx_binary = { path = "../rbx-dom/rbx_binary", features = [
-#     "unstable_text_format",
-# ] }
+# rbx_binary = { path = "../rbx-dom/rbx_binary" }
 # rbx_dom_weak = { path = "../rbx-dom/rbx_dom_weak" }
 # rbx_reflection = { path = "../rbx-dom/rbx_reflection" }
 # rbx_reflection_database = { path = "../rbx-dom/rbx_reflection_database" }
 # rbx_xml = { path = "../rbx-dom/rbx_xml" }

-rbx_binary = { version = "2.0.1", features = ["unstable_text_format"] }
-rbx_dom_weak = "4.1.0"
-rbx_reflection = "6.1.0"
-rbx_reflection_database = "2.0.2"
-rbx_xml = "2.0.1"
+rbx_binary = "0.7.7"
+rbx_dom_weak = "2.9.0"
+rbx_reflection = "4.7.0"
+rbx_reflection_database = "0.2.12"
+rbx_xml = "0.13.5"

 anyhow = "1.0.80"
 backtrace = "0.3.69"
@@ -74,9 +68,9 @@ futures = "0.3.30"
 globset = "0.4.14"
 humantime = "2.1.0"
 hyper = { version = "0.14.28", features = ["server", "tcp", "http1"] }
-hyper-tungstenite = "0.11.0"
 jod-thread = "0.1.2"
 log = "0.4.21"
+maplit = "1.0.2"
 num_cpus = "1.16.0"
 opener = "0.5.2"
 rayon = "1.9.0"
@@ -88,25 +82,14 @@ reqwest = { version = "0.11.24", default-features = false, features = [
 ritz = "0.1.0"
 roblox_install = "1.0.0"
 serde = { version = "1.0.197", features = ["derive", "rc"] }
-serde_json = "1.0.145"
-jsonc-parser = { version = "0.27.0", features = ["serde"] }
-strum = { version = "0.27", features = ["derive"] }
+serde_json = "1.0.114"
 toml = "0.5.11"
 termcolor = "1.4.1"
 thiserror = "1.0.57"
-tokio = { version = "1.36.0", features = ["rt", "rt-multi-thread", "macros"] }
+tokio = { version = "1.36.0", features = ["rt", "rt-multi-thread"] }
 uuid = { version = "1.7.0", features = ["v4", "serde"] }
 clap = { version = "3.2.25", features = ["derive"] }
 profiling = "1.0.15"
-yaml-rust2 = "0.10.3"
-data-encoding = "2.8.0"
-pathdiff = "0.2.3"
-
-blake3 = "1.5.0"
-float-cmp = "0.9.0"
-indexmap = { version = "2.10.0", features = ["serde"] }
-rmp-serde = "1.3.0"
-serde_bytes = "0.11.19"

 [target.'cfg(windows)'.dependencies]
 winreg = "0.10.1"
@@ -125,7 +108,7 @@ semver = "1.0.22"
 rojo-insta-ext = { path = "crates/rojo-insta-ext" }

 criterion = "0.3.6"
-insta = { version = "1.36.1", features = ["redactions", "yaml", "json"] }
+insta = { version = "1.36.1", features = ["redactions", "yaml"] }
 paste = "1.0.14"
 pretty_assertions = "1.4.0"
 serde_yaml = "0.8.26"
--- a/README.md
+++ b/README.md
@@ -40,7 +40,7 @@ Check out our [contribution guide](CONTRIBUTING.md) for detailed instructions fo

 Pull requests are welcome!

-Rojo supports Rust 1.88 and newer. The minimum supported version of Rust is based on the latest versions of the dependencies that Rojo has.
+Rojo supports Rust 1.70.0 and newer. The minimum supported version of Rust is based on the latest versions of the dependencies that Rojo has.

 ## License
 Rojo is available under the terms of the Mozilla Public License, Version 2.0. See [LICENSE.txt](LICENSE.txt) for details.
--- a/aftman.toml
+++ b/aftman.toml
@@ -0,0 +1,5 @@
+[tools]
+rojo = "rojo-rbx/rojo@7.3.0"
+selene = "Kampfkarren/selene@0.26.1"
+stylua = "JohnnyMorganz/stylua@0.18.2"
+run-in-roblox = "rojo-rbx/run-in-roblox@0.3.0"
--- a/assets/project-templates/model/README.md
+++ b/assets/project-templates/model/README.md
--- a/assets/project-templates/model/default.project.json
+++ b/assets/project-templates/model/default.project.json
--- a/assets/project-templates/model/gitignore.txt
+++ b/assets/project-templates/model/gitignore.txt
@@ -1,5 +1,3 @@
 # Roblox Studio lock files
 /*.rbxlx.lock
-/*.rbxl.lock
-
-sourcemap.json
+/*.rbxl.lock
--- a/assets/project-templates/model/src/init.luau
+++ b/assets/project-templates/model/src/init.luau
@@ -2,4 +2,4 @@ return {
 	hello = function()
 		print("Hello world, from {project_name}!")
 	end,
-}
+}
--- a/assets/project-templates/place/README.md
+++ b/assets/project-templates/place/README.md
--- a/assets/project-templates/place/default.project.json
+++ b/assets/project-templates/place/default.project.json
--- a/assets/project-templates/place/gitignore.txt
+++ b/assets/project-templates/place/gitignore.txt
@@ -3,6 +3,4 @@

 # Roblox Studio lock files
 /*.rbxlx.lock
-/*.rbxl.lock
-
-sourcemap.json
+/*.rbxl.lock
--- a/assets/project-templates/plugin/README.md
+++ b/assets/project-templates/plugin/README.md
--- a/assets/project-templates/plugin/default.project.json
+++ b/assets/project-templates/plugin/default.project.json
--- a/assets/project-templates/plugin/gitignore.txt
+++ b/assets/project-templates/plugin/gitignore.txt
@@ -1,5 +1,3 @@
 # Plugin model files
 /{project_name}.rbxmx
 /{project_name}.rbxm
-
-sourcemap.json
--- a/assets/index.css
+++ b/assets/index.css
@@ -17,10 +17,6 @@ html {
  line-height: 1.4;
 }

-body {
-  background-color: #e7e7e7
-}
-
 img {
  max-width:100%;
  max-height:100%;
--- a/assets/project-templates/place/src/client/init.client.luau
+++ b/assets/project-templates/place/src/client/init.client.luau
@@ -1 +0,0 @@
-print("Hello world, from client!")
--- a/assets/project-templates/place/src/server/init.server.luau
+++ b/assets/project-templates/place/src/server/init.server.luau
@@ -1 +0,0 @@
-print("Hello world, from server!")
--- a/assets/project-templates/place/src/shared/Hello.luau
+++ b/assets/project-templates/place/src/shared/Hello.luau
@@ -1,3 +0,0 @@
-return function()
-	print("Hello, world!")
-end
--- a/assets/project-templates/plugin/src/init.server.luau
+++ b/assets/project-templates/plugin/src/init.server.luau
@@ -1 +0,0 @@
-print("Hello world, from plugin!")
--- a/build.rs
+++ b/build.rs
@@ -20,21 +20,12 @@ fn snapshot_from_fs_path(path: &Path) -> io::Result<VfsSnapshot> {

            let file_name = entry.file_name().to_str().unwrap().to_owned();

-            if file_name.starts_with(".git") {
-                continue;
-            }
-
            // We can skip any TestEZ test files since they aren't necessary for
            // the plugin to run.
            if file_name.ends_with(".spec.lua") || file_name.ends_with(".spec.luau") {
                continue;
            }

-            // Ignore images in msgpack-luau because they aren't UTF-8 encoded.
-            if file_name.ends_with(".png") {
-                continue;
-            }
-
            let child_snapshot = snapshot_from_fs_path(&entry.path())?;
            children.push((file_name, child_snapshot));
        }
@@ -50,39 +41,33 @@ fn snapshot_from_fs_path(path: &Path) -> io::Result<VfsSnapshot> {
 fn main() -> Result<(), anyhow::Error> {
    let out_dir = env::var_os("OUT_DIR").unwrap();

-    let root_dir = PathBuf::from(env::var_os("CARGO_MANIFEST_DIR").unwrap());
-    let plugin_dir = root_dir.join("plugin");
-    let templates_dir = root_dir.join("assets").join("project-templates");
+    let root_dir = env::var_os("CARGO_MANIFEST_DIR").unwrap();
+    let plugin_root = PathBuf::from(root_dir).join("plugin");

    let our_version = Version::parse(env::var_os("CARGO_PKG_VERSION").unwrap().to_str().unwrap())?;
    let plugin_version =
-        Version::parse(fs::read_to_string(plugin_dir.join("Version.txt"))?.trim())?;
+        Version::parse(fs::read_to_string(plugin_root.join("Version.txt"))?.trim())?;

    assert_eq!(
        our_version, plugin_version,
        "plugin version does not match Cargo version"
    );

-    let template_snapshot = snapshot_from_fs_path(&templates_dir)?;
-
-    let plugin_snapshot = VfsSnapshot::dir(hashmap! {
-        "default.project.json" => snapshot_from_fs_path(&root_dir.join("plugin.project.json"))?,
-        "plugin" => VfsSnapshot::dir(hashmap! {
-            "fmt" => snapshot_from_fs_path(&plugin_dir.join("fmt"))?,
-            "http" => snapshot_from_fs_path(&plugin_dir.join("http"))?,
-            "log" => snapshot_from_fs_path(&plugin_dir.join("log"))?,
-            "rbx_dom_lua" => snapshot_from_fs_path(&plugin_dir.join("rbx_dom_lua"))?,
-            "src" => snapshot_from_fs_path(&plugin_dir.join("src"))?,
-            "Packages" => snapshot_from_fs_path(&plugin_dir.join("Packages"))?,
-            "Version.txt" => snapshot_from_fs_path(&plugin_dir.join("Version.txt"))?,
-        }),
+    let snapshot = VfsSnapshot::dir(hashmap! {
+        "default.project.json" => snapshot_from_fs_path(&plugin_root.join("default.project.json"))?,
+        "fmt" => snapshot_from_fs_path(&plugin_root.join("fmt"))?,
+        "http" => snapshot_from_fs_path(&plugin_root.join("http"))?,
+        "log" => snapshot_from_fs_path(&plugin_root.join("log"))?,
+        "rbx_dom_lua" => snapshot_from_fs_path(&plugin_root.join("rbx_dom_lua"))?,
+        "src" => snapshot_from_fs_path(&plugin_root.join("src"))?,
+        "Packages" => snapshot_from_fs_path(&plugin_root.join("Packages"))?,
+        "Version.txt" => snapshot_from_fs_path(&plugin_root.join("Version.txt"))?,
    });

-    let template_file = File::create(Path::new(&out_dir).join("templates.bincode"))?;
-    let plugin_file = File::create(Path::new(&out_dir).join("plugin.bincode"))?;
+    let out_path = Path::new(&out_dir).join("plugin.bincode");
+    let out_file = File::create(out_path)?;

-    bincode::serialize_into(plugin_file, &plugin_snapshot)?;
-    bincode::serialize_into(template_file, &template_snapshot)?;
+    bincode::serialize_into(out_file, &snapshot)?;

    println!("cargo:rerun-if-changed=build/windows/rojo-manifest.rc");
    println!("cargo:rerun-if-changed=build/windows/rojo.manifest");
--- a/crates/memofs/CHANGELOG.md
+++ b/crates/memofs/CHANGELOG.md
@@ -1,14 +1,6 @@
 # memofs Changelog

 ## Unreleased Changes
-* Added `Vfs::canonicalize`. [#1201]
-
-## 0.3.1 (2025-11-27)
-* Added `Vfs::exists`. [#1169]
-* Added `create_dir` and `create_dir_all` to allow creating directories. [#937]
-
-[#1169]: https://github.com/rojo-rbx/rojo/pull/1169
-[#937]: https://github.com/rojo-rbx/rojo/pull/937

 ## 0.3.0 (2024-03-15)
 * Changed `StdBackend` file watching component to use minimal recursive watches. [#830]
--- a/crates/memofs/Cargo.toml
+++ b/crates/memofs/Cargo.toml
@@ -1,12 +1,8 @@
 [package]
 name = "memofs"
 description = "Virtual filesystem with configurable backends."
-version = "0.3.1"
-authors = [
-    "Lucien Greathouse <me@lpghatguy.com>",
-    "Micah Reid <git@dekkonot.com>",
-    "Ken Loeffler <kenloef@gmail.com>",
-]
+version = "0.3.0"
+authors = ["Lucien Greathouse <me@lpghatguy.com>"]
 edition = "2018"
 readme = "README.md"
 license = "MIT"
@@ -19,6 +15,3 @@ crossbeam-channel = "0.5.12"
 fs-err = "2.11.0"
 notify = "4.0.17"
 serde = { version = "1.0.197", features = ["derive"] }
-
-[dev-dependencies]
-tempfile = "3.10.1"
--- a/crates/memofs/src/in_memory_fs.rs
+++ b/crates/memofs/src/in_memory_fs.rs
@@ -157,11 +157,6 @@ impl VfsBackend for InMemoryFs {
        )
    }

-    fn exists(&mut self, path: &Path) -> io::Result<bool> {
-        let inner = self.inner.lock().unwrap();
-        Ok(inner.entries.contains_key(path))
-    }
-
    fn read_dir(&mut self, path: &Path) -> io::Result<ReadDir> {
        let inner = self.inner.lock().unwrap();

@@ -181,21 +176,6 @@ impl VfsBackend for InMemoryFs {
        }
    }

-    fn create_dir(&mut self, path: &Path) -> io::Result<()> {
-        let mut inner = self.inner.lock().unwrap();
-        inner.load_snapshot(path.to_path_buf(), VfsSnapshot::empty_dir())
-    }
-
-    fn create_dir_all(&mut self, path: &Path) -> io::Result<()> {
-        let mut inner = self.inner.lock().unwrap();
-        let mut path_buf = path.to_path_buf();
-        while let Some(parent) = path_buf.parent() {
-            inner.load_snapshot(parent.to_path_buf(), VfsSnapshot::empty_dir())?;
-            path_buf.pop();
-        }
-        inner.load_snapshot(path.to_path_buf(), VfsSnapshot::empty_dir())
-    }
-
    fn remove_file(&mut self, path: &Path) -> io::Result<()> {
        let mut inner = self.inner.lock().unwrap();

@@ -232,33 +212,6 @@ impl VfsBackend for InMemoryFs {
        }
    }

-    // TODO: We rely on Rojo to prepend cwd to any relative path before storing paths
-    // in MemoFS. The current implementation will error if no prepended absolute path
-    // is found. It really only normalizes paths within the provided path's context.
-    // Example: "/Users/username/project/../other/file.txt" ->
-    // "/Users/username/other/file.txt"
-    // Erroneous example: "/Users/../../other/file.txt" -> "/other/file.txt"
-    // This is not very robust. We should implement proper path normalization here or otherwise
-    // warn if we are missing context and can not fully canonicalize the path correctly.
-    fn canonicalize(&mut self, path: &Path) -> io::Result<PathBuf> {
-        let mut normalized = PathBuf::new();
-        for component in path.components() {
-            match component {
-                std::path::Component::ParentDir => {
-                    normalized.pop();
-                }
-                std::path::Component::CurDir => {}
-                _ => normalized.push(component),
-            }
-        }
-
-        let inner = self.inner.lock().unwrap();
-        match inner.entries.get(&normalized) {
-            Some(_) => Ok(normalized),
-            None => not_found(&normalized),
-        }
-    }
-
    fn event_receiver(&self) -> crossbeam_channel::Receiver<VfsEvent> {
        let inner = self.inner.lock().unwrap();

@@ -275,17 +228,23 @@ impl VfsBackend for InMemoryFs {
 }

 fn must_be_file<T>(path: &Path) -> io::Result<T> {
-    Err(io::Error::other(format!(
-        "path {} was a directory, but must be a file",
-        path.display()
-    )))
+    Err(io::Error::new(
+        io::ErrorKind::Other,
+        format!(
+            "path {} was a directory, but must be a file",
+            path.display()
+        ),
+    ))
 }

 fn must_be_dir<T>(path: &Path) -> io::Result<T> {
-    Err(io::Error::other(format!(
-        "path {} was a file, but must be a directory",
-        path.display()
-    )))
+    Err(io::Error::new(
+        io::ErrorKind::Other,
+        format!(
+            "path {} was a file, but must be a directory",
+            path.display()
+        ),
+    ))
 }

 fn not_found<T>(path: &Path) -> io::Result<T> {
--- a/crates/memofs/src/lib.rs
+++ b/crates/memofs/src/lib.rs
@@ -70,14 +70,10 @@ impl<T> IoResultExt<T> for io::Result<T> {
 pub trait VfsBackend: sealed::Sealed + Send + 'static {
    fn read(&mut self, path: &Path) -> io::Result<Vec<u8>>;
    fn write(&mut self, path: &Path, data: &[u8]) -> io::Result<()>;
-    fn exists(&mut self, path: &Path) -> io::Result<bool>;
    fn read_dir(&mut self, path: &Path) -> io::Result<ReadDir>;
-    fn create_dir(&mut self, path: &Path) -> io::Result<()>;
-    fn create_dir_all(&mut self, path: &Path) -> io::Result<()>;
    fn metadata(&mut self, path: &Path) -> io::Result<Metadata>;
    fn remove_file(&mut self, path: &Path) -> io::Result<()>;
    fn remove_dir_all(&mut self, path: &Path) -> io::Result<()>;
-    fn canonicalize(&mut self, path: &Path) -> io::Result<PathBuf>;

    fn event_receiver(&self) -> crossbeam_channel::Receiver<VfsEvent>;
    fn watch(&mut self, path: &Path) -> io::Result<()>;
@@ -177,11 +173,6 @@ impl VfsInner {
        Ok(Arc::new(contents_str.into()))
    }

-    fn exists<P: AsRef<Path>>(&mut self, path: P) -> io::Result<bool> {
-        let path = path.as_ref();
-        self.backend.exists(path)
-    }
-
    fn write<P: AsRef<Path>, C: AsRef<[u8]>>(&mut self, path: P, contents: C) -> io::Result<()> {
        let path = path.as_ref();
        let contents = contents.as_ref();
@@ -199,16 +190,6 @@ impl VfsInner {
        Ok(dir)
    }

-    fn create_dir<P: AsRef<Path>>(&mut self, path: P) -> io::Result<()> {
-        let path = path.as_ref();
-        self.backend.create_dir(path)
-    }
-
-    fn create_dir_all<P: AsRef<Path>>(&mut self, path: P) -> io::Result<()> {
-        let path = path.as_ref();
-        self.backend.create_dir_all(path)
-    }
-
    fn remove_file<P: AsRef<Path>>(&mut self, path: P) -> io::Result<()> {
        let path = path.as_ref();
        let _ = self.backend.unwatch(path);
@@ -226,11 +207,6 @@ impl VfsInner {
        self.backend.metadata(path)
    }

-    fn canonicalize<P: AsRef<Path>>(&mut self, path: P) -> io::Result<PathBuf> {
-        let path = path.as_ref();
-        self.backend.canonicalize(path)
-    }
-
    fn event_receiver(&self) -> crossbeam_channel::Receiver<VfsEvent> {
        self.backend.event_receiver()
    }
@@ -350,42 +326,6 @@ impl Vfs {
        self.inner.lock().unwrap().read_dir(path)
    }

-    /// Return whether the given path exists.
-    ///
-    /// Roughly equivalent to [`std::fs::exists`][std::fs::exists].
-    ///
-    /// [std::fs::exists]: https://doc.rust-lang.org/stable/std/fs/fn.exists.html
-    #[inline]
-    pub fn exists<P: AsRef<Path>>(&self, path: P) -> io::Result<bool> {
-        let path = path.as_ref();
-        self.inner.lock().unwrap().exists(path)
-    }
-
-    /// Creates a directory at the provided location.
-    ///
-    /// Roughly equivalent to [`std::fs::create_dir`][std::fs::create_dir].
-    /// Similiar to that function, this function will fail if the parent of the
-    /// path does not exist.
-    ///
-    /// [std::fs::create_dir]: https://doc.rust-lang.org/stable/std/fs/fn.create_dir.html
-    #[inline]
-    pub fn create_dir<P: AsRef<Path>>(&self, path: P) -> io::Result<()> {
-        let path = path.as_ref();
-        self.inner.lock().unwrap().create_dir(path)
-    }
-
-    /// Creates a directory at the provided location, recursively creating
-    /// all parent components if they are missing.
-    ///
-    /// Roughly equivalent to [`std::fs::create_dir_all`][std::fs::create_dir_all].
-    ///
-    /// [std::fs::create_dir_all]: https://doc.rust-lang.org/stable/std/fs/fn.create_dir_all.html
-    #[inline]
-    pub fn create_dir_all<P: AsRef<Path>>(&self, path: P) -> io::Result<()> {
-        let path = path.as_ref();
-        self.inner.lock().unwrap().create_dir_all(path)
-    }
-
    /// Remove a file.
    ///
    /// Roughly equivalent to [`std::fs::remove_file`][std::fs::remove_file].
@@ -419,19 +359,6 @@ impl Vfs {
        self.inner.lock().unwrap().metadata(path)
    }

-    /// Normalize a path via the underlying backend.
-    ///
-    /// Roughly equivalent to [`std::fs::canonicalize`][std::fs::canonicalize]. Relative paths are
-    /// resolved against the backend's current working directory (if applicable) and errors are
-    /// surfaced directly from the backend.
-    ///
-    /// [std::fs::canonicalize]: https://doc.rust-lang.org/stable/std/fs/fn.canonicalize.html
-    #[inline]
-    pub fn canonicalize<P: AsRef<Path>>(&self, path: P) -> io::Result<PathBuf> {
-        let path = path.as_ref();
-        self.inner.lock().unwrap().canonicalize(path)
-    }
-
    /// Retrieve a handle to the event receiver for this `Vfs`.
    #[inline]
    pub fn event_receiver(&self) -> crossbeam_channel::Receiver<VfsEvent> {
@@ -501,31 +428,6 @@ impl VfsLock<'_> {
        self.inner.read_dir(path)
    }

-    /// Creates a directory at the provided location.
-    ///
-    /// Roughly equivalent to [`std::fs::create_dir`][std::fs::create_dir].
-    /// Similiar to that function, this function will fail if the parent of the
-    /// path does not exist.
-    ///
-    /// [std::fs::create_dir]: https://doc.rust-lang.org/stable/std/fs/fn.create_dir.html
-    #[inline]
-    pub fn create_dir<P: AsRef<Path>>(&mut self, path: P) -> io::Result<()> {
-        let path = path.as_ref();
-        self.inner.create_dir(path)
-    }
-
-    /// Creates a directory at the provided location, recursively creating
-    /// all parent components if they are missing.
-    ///
-    /// Roughly equivalent to [`std::fs::create_dir_all`][std::fs::create_dir_all].
-    ///
-    /// [std::fs::create_dir_all]: https://doc.rust-lang.org/stable/std/fs/fn.create_dir_all.html
-    #[inline]
-    pub fn create_dir_all<P: AsRef<Path>>(&mut self, path: P) -> io::Result<()> {
-        let path = path.as_ref();
-        self.inner.create_dir_all(path)
-    }
-
    /// Remove a file.
    ///
    /// Roughly equivalent to [`std::fs::remove_file`][std::fs::remove_file].
@@ -559,13 +461,6 @@ impl VfsLock<'_> {
        self.inner.metadata(path)
    }

-    /// Normalize a path via the underlying backend.
-    #[inline]
-    pub fn normalize<P: AsRef<Path>>(&mut self, path: P) -> io::Result<PathBuf> {
-        let path = path.as_ref();
-        self.inner.canonicalize(path)
-    }
-
    /// Retrieve a handle to the event receiver for this `Vfs`.
    #[inline]
    pub fn event_receiver(&self) -> crossbeam_channel::Receiver<VfsEvent> {
@@ -581,9 +476,7 @@ impl VfsLock<'_> {

 #[cfg(test)]
 mod test {
-    use crate::{InMemoryFs, StdBackend, Vfs, VfsSnapshot};
-    use std::io;
-    use std::path::PathBuf;
+    use crate::{InMemoryFs, Vfs, VfsSnapshot};

    /// https://github.com/rojo-rbx/rojo/issues/899
    #[test]
@@ -599,62 +492,4 @@ mod test {
            "bar\nfoo\n\n"
        );
    }
-
-    /// https://github.com/rojo-rbx/rojo/issues/1200
-    #[test]
-    fn canonicalize_in_memory_success() {
-        let mut imfs = InMemoryFs::new();
-        let contents = "Lorem ipsum dolor sit amet.".to_string();
-
-        imfs.load_snapshot("/test/file.txt", VfsSnapshot::file(contents.to_string()))
-            .unwrap();
-
-        let vfs = Vfs::new(imfs);
-
-        assert_eq!(
-            vfs.canonicalize("/test/nested/../file.txt").unwrap(),
-            PathBuf::from("/test/file.txt")
-        );
-        assert_eq!(
-            vfs.read_to_string(vfs.canonicalize("/test/nested/../file.txt").unwrap())
-                .unwrap()
-                .to_string(),
-            contents.to_string()
-        );
-    }
-
-    #[test]
-    fn canonicalize_in_memory_missing_errors() {
-        let imfs = InMemoryFs::new();
-        let vfs = Vfs::new(imfs);
-
-        let err = vfs.canonicalize("test").unwrap_err();
-        assert_eq!(err.kind(), io::ErrorKind::NotFound);
-    }
-
-    #[test]
-    fn canonicalize_std_backend_success() {
-        let contents = "Lorem ipsum dolor sit amet.".to_string();
-        let dir = tempfile::tempdir().unwrap();
-        let file_path = dir.path().join("file.txt");
-        fs_err::write(&file_path, contents.to_string()).unwrap();
-
-        let vfs = Vfs::new(StdBackend::new());
-        let canonicalized = vfs.canonicalize(&file_path).unwrap();
-        assert_eq!(canonicalized, file_path.canonicalize().unwrap());
-        assert_eq!(
-            vfs.read_to_string(&canonicalized).unwrap().to_string(),
-            contents.to_string()
-        );
-    }
-
-    #[test]
-    fn canonicalize_std_backend_missing_errors() {
-        let dir = tempfile::tempdir().unwrap();
-        let file_path = dir.path().join("test");
-
-        let vfs = Vfs::new(StdBackend::new());
-        let err = vfs.canonicalize(&file_path).unwrap_err();
-        assert_eq!(err.kind(), io::ErrorKind::NotFound);
-    }
 }
--- a/crates/memofs/src/noop_backend.rs
+++ b/crates/memofs/src/noop_backend.rs
@@ -1,5 +1,5 @@
 use std::io;
-use std::path::{Path, PathBuf};
+use std::path::Path;

 use crate::{Metadata, ReadDir, VfsBackend, VfsEvent};

@@ -15,43 +15,45 @@ impl NoopBackend {

 impl VfsBackend for NoopBackend {
    fn read(&mut self, _path: &Path) -> io::Result<Vec<u8>> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
    }

    fn write(&mut self, _path: &Path, _data: &[u8]) -> io::Result<()> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
-    }
-
-    fn exists(&mut self, _path: &Path) -> io::Result<bool> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
    }

    fn read_dir(&mut self, _path: &Path) -> io::Result<ReadDir> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
-    }
-
-    fn create_dir(&mut self, _path: &Path) -> io::Result<()> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
-    }
-
-    fn create_dir_all(&mut self, _path: &Path) -> io::Result<()> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
    }

    fn remove_file(&mut self, _path: &Path) -> io::Result<()> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
    }

    fn remove_dir_all(&mut self, _path: &Path) -> io::Result<()> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
    }

    fn metadata(&mut self, _path: &Path) -> io::Result<Metadata> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
-    }
-
-    fn canonicalize(&mut self, _path: &Path) -> io::Result<PathBuf> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
    }

    fn event_receiver(&self) -> crossbeam_channel::Receiver<VfsEvent> {
@@ -59,11 +61,17 @@ impl VfsBackend for NoopBackend {
    }

    fn watch(&mut self, _path: &Path) -> io::Result<()> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
    }

    fn unwatch(&mut self, _path: &Path) -> io::Result<()> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
    }
 }

--- a/crates/memofs/src/std_backend.rs
+++ b/crates/memofs/src/std_backend.rs
@@ -63,10 +63,6 @@ impl VfsBackend for StdBackend {
        fs_err::write(path, data)
    }

-    fn exists(&mut self, path: &Path) -> io::Result<bool> {
-        std::fs::exists(path)
-    }
-
    fn read_dir(&mut self, path: &Path) -> io::Result<ReadDir> {
        let entries: Result<Vec<_>, _> = fs_err::read_dir(path)?.collect();
        let mut entries = entries?;
@@ -82,14 +78,6 @@ impl VfsBackend for StdBackend {
        })
    }

-    fn create_dir(&mut self, path: &Path) -> io::Result<()> {
-        fs_err::create_dir(path)
-    }
-
-    fn create_dir_all(&mut self, path: &Path) -> io::Result<()> {
-        fs_err::create_dir_all(path)
-    }
-
    fn remove_file(&mut self, path: &Path) -> io::Result<()> {
        fs_err::remove_file(path)
    }
@@ -106,10 +94,6 @@ impl VfsBackend for StdBackend {
        })
    }

-    fn canonicalize(&mut self, path: &Path) -> io::Result<PathBuf> {
-        fs_err::canonicalize(path)
-    }
-
    fn event_receiver(&self) -> crossbeam_channel::Receiver<VfsEvent> {
        self.watcher_receiver.clone()
    }
@@ -125,13 +109,15 @@ impl VfsBackend for StdBackend {
            self.watches.insert(path.to_path_buf());
            self.watcher
                .watch(path, RecursiveMode::Recursive)
-                .map_err(io::Error::other)
+                .map_err(|inner| io::Error::new(io::ErrorKind::Other, inner))
        }
    }

    fn unwatch(&mut self, path: &Path) -> io::Result<()> {
        self.watches.remove(path);
-        self.watcher.unwatch(path).map_err(io::Error::other)
+        self.watcher
+            .unwatch(path)
+            .map_err(|inner| io::Error::new(io::ErrorKind::Other, inner))
    }
 }

--- a/crates/rojo-insta-ext/src/redaction_map.rs
+++ b/crates/rojo-insta-ext/src/redaction_map.rs
@@ -5,13 +5,19 @@ use serde::Serialize;
 /// Enables redacting any value that serializes as a string.
 ///
 /// Used for transforming Rojo instance IDs into something deterministic.
-#[derive(Default)]
 pub struct RedactionMap {
    ids: HashMap<String, usize>,
    last_id: usize,
 }

 impl RedactionMap {
+    pub fn new() -> Self {
+        Self {
+            ids: HashMap::new(),
+            last_id: 0,
+        }
+    }
+
    pub fn get_redacted_value(&self, id: impl ToString) -> Option<String> {
        let id = id.to_string();

@@ -22,12 +28,6 @@ impl RedactionMap {
        }
    }

-    /// Returns the numeric ID that was assigned to the provided value,
-    /// if one exists.
-    pub fn get_id_for_value(&self, value: impl ToString) -> Option<usize> {
-        self.ids.get(&value.to_string()).cloned()
-    }
-
    pub fn intern(&mut self, id: impl ToString) {
        let last_id = &mut self.last_id;

--- a/plugin/Packages/Highlighter
+++ b/plugin/Packages/Highlighter
--- a/plugin/Packages/msgpack-luau
+++ b/plugin/Packages/msgpack-luau
--- a/plugin/Packages/t
+++ b/plugin/Packages/t
--- a/plugin/Version.txt
+++ b/plugin/Version.txt
@@ -1 +1 @@
-7.7.0-rc.1
+7.4.0
--- a/plugin/default.project.json
+++ b/plugin/default.project.json
@@ -3,25 +3,25 @@
  "tree": {
    "$className": "Folder",
    "Plugin": {
-      "$path": "plugin/src"
+      "$path": "src"
    },
    "Packages": {
-      "$path": "plugin/Packages",
+      "$path": "Packages",
      "Log": {
-        "$path": "plugin/log"
+        "$path": "log"
      },
      "Http": {
-        "$path": "plugin/http"
+        "$path": "http"
      },
      "Fmt": {
-        "$path": "plugin/fmt"
+        "$path": "fmt"
      },
      "RbxDom": {
-        "$path": "plugin/rbx_dom_lua"
+        "$path": "rbx_dom_lua"
      }
    },
    "Version": {
-      "$path": "plugin/Version.txt"
+      "$path": "Version.txt"
    }
  }
-}
+}
--- a/plugin/fmt/init.lua
+++ b/plugin/fmt/init.lua
@@ -25,7 +25,7 @@
 local function defaultTableDebug(buffer, input)
 	buffer:writeRaw("{")

-	for key, value in input do
+	for key, value in pairs(input) do
 		buffer:write("[{:?}] = {:?}", key, value)

 		if next(input, key) ~= nil then
@@ -50,7 +50,7 @@ local function defaultTableDebugExtended(buffer, input)
 	buffer:writeLineRaw("{")
 	buffer:indent()

-	for key, value in input do
+	for key, value in pairs(input) do
 		buffer:writeLine("[{:?}] = {:#?},", key, value)
 	end

@@ -70,7 +70,7 @@ local function debugImpl(buffer, value, extendedForm)
 	elseif valueType == "table" then
 		local valueMeta = getmetatable(value)

-		if valueMeta ~= nil and valueMeta.__fmtDebug ~= nil then
+		if valueMeta ~= nil and  valueMeta.__fmtDebug ~= nil then
 			-- This type implement's the metamethod we made up to line up with
 			-- Rust's 'Debug' trait.

@@ -242,4 +242,4 @@ return {
 	debugOutputBuffer = debugOutputBuffer,
 	fmt = fmt,
 	debugify = debugify,
-}
+}
--- a/plugin/http/Response.lua
+++ b/plugin/http/Response.lua
@@ -1,7 +1,5 @@
 local HttpService = game:GetService("HttpService")

-local msgpack = require(script.Parent.Parent.msgpack)
-
 local stringTemplate = [[
 Http.Response {
 	code: %d
@@ -33,8 +31,4 @@ function Response:json()
 	return HttpService:JSONDecode(self.body)
 end

-function Response:msgpack()
-	return msgpack.decode(self.body)
-end
-
-return Response
+return Response
--- a/plugin/http/init.lua
+++ b/plugin/http/init.lua
@@ -1,8 +1,7 @@
 local HttpService = game:GetService("HttpService")

-local Log = require(script.Parent.Log)
-local msgpack = require(script.Parent.msgpack)
 local Promise = require(script.Parent.Promise)
+local Log = require(script.Parent.Log)

 local HttpError = require(script.Error)
 local HttpResponse = require(script.Response)
@@ -69,12 +68,4 @@ function Http.jsonDecode(source)
 	return HttpService:JSONDecode(source)
 end

-function Http.msgpackEncode(object)
-	return msgpack.encode(object)
-end
-
-function Http.msgpackDecode(source)
-	return msgpack.decode(source)
-end
-
 return Http
--- a/plugin/http/init.spec.lua
+++ b/plugin/http/init.spec.lua
@@ -2,4 +2,4 @@ return function()
 	it("should load", function()
 		require(script.Parent)
 	end)
-end
+end
--- a/plugin/log/init.lua
+++ b/plugin/log/init.lua
@@ -57,4 +57,4 @@ function Log.error(template, ...)
 	error(Fmt.fmt(template, ...))
 end

-return Log
+return Log
--- a/plugin/log/init.spec.lua
+++ b/plugin/log/init.spec.lua
@@ -2,4 +2,4 @@ return function()
 	it("should load", function()
 		require(script.Parent)
 	end)
-end
+end
--- a/plugin/rbx_dom_lua/EncodedValue.lua
+++ b/plugin/rbx_dom_lua/EncodedValue.lua
@@ -188,38 +188,6 @@ types = {
 	},

 	Content = {
-		fromPod = function(pod): Content
-			if type(pod) == "string" then
-				if pod == "None" then
-					return Content.none
-				else
-					error(`unexpected Content value '{pod}'`)
-				end
-			else
-				local ty, value = next(pod)
-				if ty == "Uri" then
-					return Content.fromUri(value)
-				elseif ty == "Object" then
-					error("Object deserializing is not currently implemented")
-				else
-					error(`Unknown Content type '{ty}' (could not deserialize)`)
-				end
-			end
-		end,
-		toPod = function(roblox: Content)
-			if roblox.SourceType == Enum.ContentSourceType.None then
-				return "None"
-			elseif roblox.SourceType == Enum.ContentSourceType.Uri then
-				return { Uri = roblox.Uri }
-			elseif roblox.SourceType == Enum.ContentSourceType.Object then
-				error("Object serializing is not currently implemented")
-			else
-				error(`Unknown Content type '{roblox.SourceType} (could not serialize)`)
-			end
-		end,
-	},
-
-	ContentId = {
 		fromPod = identity,
 		toPod = identity,
 	},
@@ -237,19 +205,6 @@ types = {
 		end,
 	},

-	EnumItem = {
-		fromPod = function(pod)
-			return Enum[pod.type]:FromValue(pod.value)
-		end,
-
-		toPod = function(roblox)
-			return {
-				type = tostring(roblox.EnumType),
-				value = roblox.Value,
-			}
-		end,
-	},
-
 	Faces = {
 		fromPod = function(pod)
 			local faces = {}
@@ -345,12 +300,7 @@ types = {
 			local keypoints = {}

 			for index, keypoint in ipairs(pod.keypoints) do
-				-- TODO: Add a test for NaN or Infinity values and envelopes
-				-- Right now it isn't possible because it'd fail the roundtrip.
-				-- It's more important that it works right now, though.
-				local value = keypoint.value or 0
-				local envelope = keypoint.envelope or 0
-				keypoints[index] = NumberSequenceKeypoint.new(keypoint.time, value, envelope)
+				keypoints[index] = NumberSequenceKeypoint.new(keypoint.time, keypoint.value, keypoint.envelope)
 			end

 			return NumberSequence.new(keypoints)
@@ -378,26 +328,13 @@ types = {
 			if pod == "Default" then
 				return nil
 			else
-				-- Passing `nil` instead of not passing anything gives
-				-- different results, so we have to branch here.
-				if pod.acousticAbsorption then
-					return (PhysicalProperties.new :: any)(
-						pod.density,
-						pod.friction,
-						pod.elasticity,
-						pod.frictionWeight,
-						pod.elasticityWeight,
-						pod.acousticAbsorption
-					)
-				else
-					return PhysicalProperties.new(
-						pod.density,
-						pod.friction,
-						pod.elasticity,
-						pod.frictionWeight,
-						pod.elasticityWeight
-					)
-				end
+				return PhysicalProperties.new(
+					pod.density,
+					pod.friction,
+					pod.elasticity,
+					pod.frictionWeight,
+					pod.elasticityWeight
+				)
 			end
 		end,

@@ -411,7 +348,6 @@ types = {
 					elasticity = roblox.Elasticity,
 					frictionWeight = roblox.FrictionWeight,
 					elasticityWeight = roblox.ElasticityWeight,
-					acousticAbsorption = roblox.AcousticAbsorption,
 				}
 			end
 		end,
--- a/plugin/rbx_dom_lua/Error.lua
+++ b/plugin/rbx_dom_lua/Error.lua
@@ -5,7 +5,6 @@ Error.Kind = {
 	UnknownProperty = "UnknownProperty",
 	PropertyNotReadable = "PropertyNotReadable",
 	PropertyNotWritable = "PropertyNotWritable",
-	CannotParseBinaryString = "CannotParseBinaryString",
 	Roblox = "Roblox",
 }

--- a/plugin/rbx_dom_lua/allValues.json
+++ b/plugin/rbx_dom_lua/allValues.json
@@ -15,12 +15,6 @@
            0.0
          ]
        },
-        "TestEnumItem": {
-          "EnumItem": {
-            "type": "Material",
-            "value": 256
-          }
-        },
        "TestNumber": {
          "Float64": 1337.0
        },
@@ -176,23 +170,9 @@
    },
    "ty": "ColorSequence"
  },
-  "ContentId": {
+  "Content": {
    "value": {
-      "ContentId": "rbxassetid://12345"
-    },
-    "ty": "ContentId"
-  },
-  "Content_None": {
-    "value": {
-      "Content": "None"
-    },
-    "ty": "Content"
-  },
-  "Content_Uri": {
-    "value": {
-      "Content": {
-        "Uri": "rbxasset://abc/123.rojo"
-      }
+      "Content": "rbxassetid://12345"
    },
    "ty": "Content"
  },
@@ -202,15 +182,6 @@
    },
    "ty": "Enum"
  },
-  "EnumItem": {
-    "value": {
-      "EnumItem": {
-        "type": "Material",
-        "value": 256
-      }
-    },
-    "ty": "EnumItem"
-  },
  "Faces": {
    "value": {
      "Faces": [
@@ -441,8 +412,7 @@
        "friction": 1.0,
        "elasticity": 0.0,
        "frictionWeight": 50.0,
-        "elasticityWeight": 25.0,
-        "acousticAbsorption": 0.15625
+        "elasticityWeight": 25.0
      }
    },
    "ty": "PhysicalProperties"
--- a/plugin/rbx_dom_lua/base64.lua
+++ b/plugin/rbx_dom_lua/base64.lua
@@ -1,10 +1,139 @@
-local EncodingService = game:GetService("EncodingService")
+-- Thanks to Tiffany352 for this base64 implementation!
+
+local floor = math.floor
+local char = string.char
+
+local function encodeBase64(str)
+	local out = {}
+	local nOut = 0
+	local alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
+	local strLen = #str
+
+	-- 3 octets become 4 hextets
+	for i = 1, strLen - 2, 3 do
+		local b1, b2, b3 = str:byte(i, i + 3)
+		local word = b3 + b2 * 256 + b1 * 256 * 256
+
+		local h4 = word % 64 + 1
+		word = floor(word / 64)
+		local h3 = word % 64 + 1
+		word = floor(word / 64)
+		local h2 = word % 64 + 1
+		word = floor(word / 64)
+		local h1 = word % 64 + 1
+
+		out[nOut + 1] = alphabet:sub(h1, h1)
+		out[nOut + 2] = alphabet:sub(h2, h2)
+		out[nOut + 3] = alphabet:sub(h3, h3)
+		out[nOut + 4] = alphabet:sub(h4, h4)
+		nOut = nOut + 4
+	end
+
+	local remainder = strLen % 3
+
+	if remainder == 2 then
+		-- 16 input bits -> 3 hextets (2 full, 1 partial)
+		local b1, b2 = str:byte(-2, -1)
+		-- partial is 4 bits long, leaving 2 bits of zero padding ->
+		-- offset = 4
+		local word = b2 * 4 + b1 * 4 * 256
+
+		local h3 = word % 64 + 1
+		word = floor(word / 64)
+		local h2 = word % 64 + 1
+		word = floor(word / 64)
+		local h1 = word % 64 + 1
+
+		out[nOut + 1] = alphabet:sub(h1, h1)
+		out[nOut + 2] = alphabet:sub(h2, h2)
+		out[nOut + 3] = alphabet:sub(h3, h3)
+		out[nOut + 4] = "="
+	elseif remainder == 1 then
+		-- 8 input bits -> 2 hextets (2 full, 1 partial)
+		local b1 = str:byte(-1, -1)
+		-- partial is 2 bits long, leaving 4 bits of zero padding ->
+		-- offset = 16
+		local word = b1 * 16
+
+		local h2 = word % 64 + 1
+		word = floor(word / 64)
+		local h1 = word % 64 + 1
+
+		out[nOut + 1] = alphabet:sub(h1, h1)
+		out[nOut + 2] = alphabet:sub(h2, h2)
+		out[nOut + 3] = "="
+		out[nOut + 4] = "="
+	end
+	-- if the remainder is 0, then no work is needed
+
+	return table.concat(out, "")
+end
+
+local function decodeBase64(str)
+	local out = {}
+	local nOut = 0
+	local alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
+	local strLen = #str
+	local acc = 0
+	local nAcc = 0
+
+	local alphabetLut = {}
+	for i = 1, #alphabet do
+		alphabetLut[alphabet:sub(i, i)] = i - 1
+	end
+
+	-- 4 hextets become 3 octets
+	for i = 1, strLen do
+		local ch = str:sub(i, i)
+		local byte = alphabetLut[ch]
+		if byte then
+			acc = acc * 64 + byte
+			nAcc = nAcc + 1
+		end
+
+		if nAcc == 4 then
+			local b3 = acc % 256
+			acc = floor(acc / 256)
+			local b2 = acc % 256
+			acc = floor(acc / 256)
+			local b1 = acc % 256
+
+			out[nOut + 1] = char(b1)
+			out[nOut + 2] = char(b2)
+			out[nOut + 3] = char(b3)
+			nOut = nOut + 3
+			nAcc = 0
+			acc = 0
+		end
+	end
+
+	if nAcc == 3 then
+		-- 3 hextets -> 16 bit output
+		acc = acc * 64
+		acc = floor(acc / 256)
+		local b2 = acc % 256
+		acc = floor(acc / 256)
+		local b1 = acc % 256
+
+		out[nOut + 1] = char(b1)
+		out[nOut + 2] = char(b2)
+	elseif nAcc == 2 then
+		-- 2 hextets -> 8 bit output
+		acc = acc * 64
+		acc = floor(acc / 256)
+		acc = acc * 64
+		acc = floor(acc / 256)
+		local b1 = acc % 256
+
+		out[nOut + 1] = char(b1)
+	elseif nAcc == 1 then
+		error("Base64 has invalid length")
+	end
+
+	return table.concat(out, "")
+end

 return {
-	decode = function(input: string)
-		return buffer.tostring(EncodingService:Base64Decode(buffer.fromstring(input)))
-	end,
-	encode = function(input: string)
-		return buffer.tostring(EncodingService:Base64Encode(buffer.fromstring(input)))
-	end,
+	decode = decodeBase64,
+	encode = encodeBase64,
 }
--- a/plugin/rbx_dom_lua/customProperties.lua
+++ b/plugin/rbx_dom_lua/customProperties.lua
@@ -1,8 +1,6 @@
 local CollectionService = game:GetService("CollectionService")
 local ScriptEditorService = game:GetService("ScriptEditorService")

-local Error = require(script.Parent.Error)
-
 --- A list of `Enum.Material` values that are used for Terrain.MaterialColors
 local TERRAIN_MATERIAL_COLORS = {
 	Enum.Material.Grass,
@@ -53,10 +51,6 @@ return {
 				return true, instance:GetAttributes()
 			end,
 			write = function(instance, _, value)
-				if typeof(value) ~= "table" then
-					return false, Error.new(Error.Kind.CannotParseBinaryString)
-				end
-
 				local existing = instance:GetAttributes()
 				local didAllWritesSucceed = true

@@ -166,14 +160,9 @@ return {
 				return true, colors
 			end,
 			write = function(instance: Terrain, _, value: { [Enum.Material]: Color3 })
-				if typeof(value) ~= "table" then
-					return false, Error.new(Error.Kind.CannotParseBinaryString)
-				end
-
 				for material, color in value do
 					instance:SetMaterialColor(material, color)
 				end
-
 				return true
 			end,
 		},
@@ -208,30 +197,4 @@ return {
 			end,
 		},
 	},
-	StyleRule = {
-		PropertiesSerialize = {
-			read = function(instance: StyleRule)
-				return true, instance:GetProperties()
-			end,
-			write = function(instance: StyleRule, _, value: { [any]: any })
-				if typeof(value) ~= "table" then
-					return false, Error.new(Error.Kind.CannotParseBinaryString)
-				end
-
-				local existing = instance:GetProperties()
-
-				for itemName, itemValue in pairs(value) do
-					instance:SetProperty(itemName, itemValue)
-				end
-
-				for existingItemName in pairs(existing) do
-					if value[existingItemName] == nil then
-						instance:SetProperty(existingItemName, nil)
-					end
-				end
-
-				return true
-			end,
-		},
-	},
 }
--- a/plugin/rbx_dom_lua/database.json
+++ b/plugin/rbx_dom_lua/database.json
--- a/plugin/run-tests.server.lua
+++ b/plugin/run-tests.server.lua
@@ -1,6 +1,6 @@
 local ReplicatedStorage = game:GetService("ReplicatedStorage")

-local TestEZ = require(ReplicatedStorage.Packages:WaitForChild("TestEZ", 10))
+local TestEZ = require(ReplicatedStorage.Packages.TestEZ)

 local Rojo = ReplicatedStorage.Rojo

--- a/plugin/src/ApiContext.lua
+++ b/plugin/src/ApiContext.lua
@@ -1,5 +1,4 @@
 local Packages = script.Parent.Parent.Packages
-local HttpService = game:GetService("HttpService")
 local Http = require(Packages.Http)
 local Log = require(Packages.Log)
 local Promise = require(Packages.Promise)
@@ -10,9 +9,7 @@ local Version = require(script.Parent.Version)

 local validateApiInfo = Types.ifEnabled(Types.ApiInfoResponse)
 local validateApiRead = Types.ifEnabled(Types.ApiReadResponse)
-local validateApiSocketPacket = Types.ifEnabled(Types.ApiSocketPacket)
-local validateApiSerialize = Types.ifEnabled(Types.ApiSerializeResponse)
-local validateApiRefPatch = Types.ifEnabled(Types.ApiRefPatchResponse)
+local validateApiSubscribe = Types.ifEnabled(Types.ApiSubscribeResponse)

 local function rejectFailedRequests(response)
 	if response.code >= 400 then
@@ -48,7 +45,14 @@ end

 local function rejectWrongPlaceId(infoResponseBody)
 	if infoResponseBody.expectedPlaceIds ~= nil then
-		local foundId = table.find(infoResponseBody.expectedPlaceIds, game.PlaceId)
+		local foundId = false
+
+		for _, id in ipairs(infoResponseBody.expectedPlaceIds) do
+			if id == game.PlaceId then
+				foundId = true
+				break
+			end
+		end

 		if not foundId then
 			local idList = {}
@@ -58,30 +62,10 @@ local function rejectWrongPlaceId(infoResponseBody)

 			local message = (
 				"Found a Rojo server, but its project is set to only be used with a specific list of places."
-				.. "\nYour place ID is %u, but needs to be one of these:"
+				.. "\nYour place ID is %s, but needs to be one of these:"
 				.. "\n%s"
 				.. "\n\nTo change this list, edit 'servePlaceIds' in your .project.json file."
-			):format(game.PlaceId, table.concat(idList, "\n"))
-
-			return Promise.reject(message)
-		end
-	end
-
-	if infoResponseBody.unexpectedPlaceIds ~= nil then
-		local foundId = table.find(infoResponseBody.unexpectedPlaceIds, game.PlaceId)
-
-		if foundId then
-			local idList = {}
-			for _, id in ipairs(infoResponseBody.unexpectedPlaceIds) do
-				table.insert(idList, "- " .. tostring(id))
-			end
-
-			local message = (
-				"Found a Rojo server, but its project is set to not be used with a specific list of places."
-				.. "\nYour place ID is %u, but needs to not be one of these:"
-				.. "\n%s"
-				.. "\n\nTo change this list, edit 'blockedPlaceIds' in your .project.json file."
-			):format(game.PlaceId, table.concat(idList, "\n"))
+			):format(tostring(game.PlaceId), table.concat(idList, "\n"))

 			return Promise.reject(message)
 		end
@@ -100,7 +84,6 @@ function ApiContext.new(baseUrl)
 		__baseUrl = baseUrl,
 		__sessionId = nil,
 		__messageCursor = -1,
-		__wsClient = nil,
 		__connected = true,
 		__activeRequests = {},
 	}
@@ -128,12 +111,6 @@ function ApiContext:disconnect()
 		request:cancel()
 	end
 	self.__activeRequests = {}
-
-	if self.__wsClient then
-		Log.trace("Closing WebSocket client")
-		self.__wsClient:Close()
-	end
-	self.__wsClient = nil
 end

 function ApiContext:setMessageCursor(index)
@@ -145,7 +122,7 @@ function ApiContext:connect()

 	return Http.get(url)
 		:andThen(rejectFailedRequests)
-		:andThen(Http.Response.msgpack)
+		:andThen(Http.Response.json)
 		:andThen(rejectWrongProtocolVersion)
 		:andThen(function(body)
 			assert(validateApiInfo(body))
@@ -163,7 +140,7 @@ end
 function ApiContext:read(ids)
 	local url = ("%s/api/read/%s"):format(self.__baseUrl, table.concat(ids, ","))

-	return Http.get(url):andThen(rejectFailedRequests):andThen(Http.Response.msgpack):andThen(function(body)
+	return Http.get(url):andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(body)
 		if body.sessionId ~= self.__sessionId then
 			return Promise.reject("Server changed ID")
 		end
@@ -191,9 +168,9 @@ function ApiContext:write(patch)
 		table.insert(updated, fixedUpdate)
 	end

-	-- Only add the 'added' field if the table is non-empty, or else the msgpack
-	-- encode implementation will turn the table into an array instead of a map,
-	-- causing API validation to fail.
+	-- Only add the 'added' field if the table is non-empty, or else Roblox's
+	-- JSON implementation will turn the table into an array instead of an
+	-- object, causing API validation to fail.
 	local added
 	if next(patch.added) ~= nil then
 		added = patch.added
@@ -206,84 +183,54 @@ function ApiContext:write(patch)
 		added = added,
 	}

-	body = Http.msgpackEncode(body)
+	body = Http.jsonEncode(body)

-	return Http.post(url, body)
-		:andThen(rejectFailedRequests)
-		:andThen(Http.Response.msgpack)
-		:andThen(function(responseBody)
-			Log.info("Write response: {:?}", responseBody)
+	return Http.post(url, body):andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(responseBody)
+		Log.info("Write response: {:?}", responseBody)

-			return responseBody
-		end)
+		return responseBody
+	end)
 end

-function ApiContext:connectWebSocket(packetHandlers)
-	local url = ("%s/api/socket/%s"):format(self.__baseUrl, self.__messageCursor)
-	-- Convert HTTP/HTTPS URL to WS/WSS
-	url = url:gsub("^http://", "ws://"):gsub("^https://", "wss://")
+function ApiContext:retrieveMessages()
+	local url = ("%s/api/subscribe/%s"):format(self.__baseUrl, self.__messageCursor)

-	return Promise.new(function(resolve, reject)
-		local success, wsClient =
-			pcall(HttpService.CreateWebStreamClient, HttpService, Enum.WebStreamClientType.WebSocket, {
-				Url = url,
-			})
-		if not success then
-			reject("Failed to create WebSocket client: " .. tostring(wsClient))
-			return
+	local function sendRequest()
+		local request = Http.get(url):catch(function(err)
+			if err.type == Http.Error.Kind.Timeout and self.__connected then
+				return sendRequest()
+			end
+
+			return Promise.reject(err)
+		end)
+
+		Log.trace("Tracking request {}", request)
+		self.__activeRequests[request] = true
+
+		return request:finally(function(...)
+			Log.trace("Cleaning up request {}", request)
+			self.__activeRequests[request] = nil
+			return ...
+		end)
+	end
+
+	return sendRequest():andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(body)
+		if body.sessionId ~= self.__sessionId then
+			return Promise.reject("Server changed ID")
 		end
-		self.__wsClient = wsClient

-		local closed, errored, received
+		assert(validateApiSubscribe(body))

-		received = self.__wsClient.MessageReceived:Connect(function(msg)
-			local data = Http.msgpackDecode(msg)
-			if data.sessionId ~= self.__sessionId then
-				Log.warn("Received message with wrong session ID; ignoring")
-				return
-			end
+		self:setMessageCursor(body.messageCursor)

-			assert(validateApiSocketPacket(data))
-
-			Log.trace("Received websocket packet: {:#?}", data)
-
-			local handler = packetHandlers[data.packetType]
-			if handler then
-				local ok, err = pcall(handler, data.body)
-				if not ok then
-					Log.error("Error in WebSocket packet handler for type '%s': %s", data.packetType, err)
-				end
-			else
-				Log.warn("No handler for WebSocket packet type '%s'", data.packetType)
-			end
-		end)
-
-		closed = self.__wsClient.Closed:Connect(function()
-			closed:Disconnect()
-			errored:Disconnect()
-			received:Disconnect()
-
-			if self.__connected then
-				reject("WebSocket connection closed unexpectedly")
-			else
-				resolve()
-			end
-		end)
-
-		errored = self.__wsClient.Error:Connect(function(code, msg)
-			closed:Disconnect()
-			errored:Disconnect()
-			received:Disconnect()
-
-			reject("WebSocket error: " .. code .. " - " .. msg)
-		end)
+		return body.messages
 	end)
 end

 function ApiContext:open(id)
 	local url = ("%s/api/open/%s"):format(self.__baseUrl, id)

-	return Http.post(url, ""):andThen(rejectFailedRequests):andThen(Http.Response.msgpack):andThen(function(body)
+	return Http.post(url, ""):andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(body)
 		if body.sessionId ~= self.__sessionId then
 			return Promise.reject("Server changed ID")
 		end
@@ -292,40 +239,4 @@ function ApiContext:open(id)
 	end)
 end

-function ApiContext:serialize(ids: { string })
-	local url = ("%s/api/serialize"):format(self.__baseUrl)
-	local request_body = Http.msgpackEncode({ sessionId = self.__sessionId, ids = ids })
-
-	return Http.post(url, request_body)
-		:andThen(rejectFailedRequests)
-		:andThen(Http.Response.msgpack)
-		:andThen(function(response_body)
-			if response_body.sessionId ~= self.__sessionId then
-				return Promise.reject("Server changed ID")
-			end
-
-			assert(validateApiSerialize(response_body))
-
-			return response_body
-		end)
-end
-
-function ApiContext:refPatch(ids: { string })
-	local url = ("%s/api/ref-patch"):format(self.__baseUrl)
-	local request_body = Http.msgpackEncode({ sessionId = self.__sessionId, ids = ids })
-
-	return Http.post(url, request_body)
-		:andThen(rejectFailedRequests)
-		:andThen(Http.Response.msgpack)
-		:andThen(function(response_body)
-			if response_body.sessionId ~= self.__sessionId then
-				return Promise.reject("Server changed ID")
-			end
-
-			assert(validateApiRefPatch(response_body))
-
-			return response_body
-		end)
-end
-
 return ApiContext
--- a/plugin/src/App/Components/Checkbox.lua
+++ b/plugin/src/App/Components/Checkbox.lua
@@ -32,7 +32,7 @@ end

 function Checkbox:render()
 	return Theme.with(function(theme)
-		local checkboxTheme = theme.Checkbox
+		theme = theme.Checkbox

 		local activeTransparency = Roact.joinBindings({
 			self.binding:map(function(value)
@@ -57,21 +57,20 @@ function Checkbox:render()
 			end,
 		}, {
 			StateTip = e(Tooltip.Trigger, {
-				text = (if self.props.locked
-					then (self.props.lockedTooltip or "(Cannot be changed right now)") .. "\n"
-					else "") .. (if self.props.active then "Enabled" else "Disabled"),
+				text = (if self.props.locked then "[LOCKED] " else "")
+					.. (if self.props.active then "Enabled" else "Disabled"),
 			}),

 			Active = e(SlicedImage, {
 				slice = Assets.Slices.RoundedBackground,
-				color = checkboxTheme.Active.BackgroundColor,
+				color = theme.Active.BackgroundColor,
 				transparency = activeTransparency,
 				size = UDim2.new(1, 0, 1, 0),
 				zIndex = 2,
 			}, {
 				Icon = e("ImageLabel", {
 					Image = if self.props.locked then Assets.Images.Checkbox.Locked else Assets.Images.Checkbox.Active,
-					ImageColor3 = checkboxTheme.Active.IconColor,
+					ImageColor3 = theme.Active.IconColor,
 					ImageTransparency = activeTransparency,

 					Size = UDim2.new(0, 16, 0, 16),
@@ -84,7 +83,7 @@ function Checkbox:render()

 			Inactive = e(SlicedImage, {
 				slice = Assets.Slices.RoundedBorder,
-				color = checkboxTheme.Inactive.BorderColor,
+				color = theme.Inactive.BorderColor,
 				transparency = self.props.transparency,
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
@@ -92,7 +91,7 @@ function Checkbox:render()
 					Image = if self.props.locked
 						then Assets.Images.Checkbox.Locked
 						else Assets.Images.Checkbox.Inactive,
-					ImageColor3 = checkboxTheme.Inactive.IconColor,
+					ImageColor3 = theme.Inactive.IconColor,
 					ImageTransparency = self.props.transparency,

 					Size = UDim2.new(0, 16, 0, 16),
--- a/plugin/src/App/Components/ClassIcon.lua
+++ b/plugin/src/App/Components/ClassIcon.lua
@@ -1,11 +1,6 @@
 local StudioService = game:GetService("StudioService")
 local AssetService = game:GetService("AssetService")

-type CachedImageInfo = {
-	pixels: buffer,
-	size: Vector2,
-}
-
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -16,71 +11,44 @@ local e = Roact.createElement

 local EditableImage = require(Plugin.App.Components.EditableImage)

-local imageCache: { [string]: CachedImageInfo } = {}
-
-local function cloneBuffer(b: buffer): buffer
-	local newBuffer = buffer.create(buffer.len(b))
-	buffer.copy(newBuffer, 0, b)
-	return newBuffer
-end
-
-local function getImageSizeAndPixels(image: string): (Vector2, buffer)
-	local cachedImage = imageCache[image]
-
-	if not cachedImage then
-		local editableImage = AssetService:CreateEditableImageAsync(Content.fromUri(image))
-		local size = editableImage.Size
-		local pixels = editableImage:ReadPixelsBuffer(Vector2.zero, size)
+local imageCache = {}
+local function getImageSizeAndPixels(image)
+	if not imageCache[image] then
+		local editableImage = AssetService:CreateEditableImageAsync(image)
 		imageCache[image] = {
-			pixels = pixels,
-			size = size,
+			Size = editableImage.Size,
+			Pixels = editableImage:ReadPixels(Vector2.zero, editableImage.Size),
 		}
-
-		return size, cloneBuffer(pixels)
 	end

-	return cachedImage.size, cloneBuffer(cachedImage.pixels)
+	return imageCache[image].Size, table.clone(imageCache[image].Pixels)
 end

 local function getRecoloredClassIcon(className, color)
 	local iconProps = StudioService:GetClassIcon(className)

 	if iconProps and color then
-		--stylua: ignore
-		local success, editableImageSize, editableImagePixels = pcall(function(_iconProps: { [any]: any }, _color: Color3): (Vector2, buffer)
-			local size, pixels = getImageSizeAndPixels(_iconProps.Image)
-			local pixelsLen = buffer.len(pixels)
+		local success, editableImageSize, editableImagePixels = pcall(function()
+			local size, pixels = getImageSizeAndPixels(iconProps.Image)

 			local minVal, maxVal = math.huge, -math.huge
-
-			for i = 0, pixelsLen, 4 do
-				if buffer.readu8(pixels, i + 3) == 0 then
+			for i = 1, #pixels, 4 do
+				if pixels[i + 3] == 0 then
 					continue
 				end
-				local pixelVal = math.max(
-					buffer.readu8(pixels, i),
-					buffer.readu8(pixels, i + 1),
-					buffer.readu8(pixels, i + 2)
-				)
+				local pixelVal = math.max(pixels[i], pixels[i + 1], pixels[i + 2])

 				minVal = math.min(minVal, pixelVal)
 				maxVal = math.max(maxVal, pixelVal)
 			end

-			local hue, sat, val = _color:ToHSV()
-
-			for i = 0, pixelsLen, 4 do
-				if buffer.readu8(pixels, i + 3) == 0 then
+			local hue, sat, val = color:ToHSV()
+			for i = 1, #pixels, 4 do
+				if pixels[i + 3] == 0 then
 					continue
 				end
-				local gIndex = i + 1
-				local bIndex = i + 2

-				local pixelVal = math.max(
-					buffer.readu8(pixels, i),
-					buffer.readu8(pixels, gIndex),
-					buffer.readu8(pixels, bIndex)
-				)
+				local pixelVal = math.max(pixels[i], pixels[i + 1], pixels[i + 2])
 				local newVal = val
 				if minVal < maxVal then
 					-- Remap minVal - maxVal to val*0.9 - val
@@ -88,12 +56,10 @@ local function getRecoloredClassIcon(className, color)
 				end

 				local newPixelColor = Color3.fromHSV(hue, sat, newVal)
-				buffer.writeu8(pixels, i, newPixelColor.R)
-				buffer.writeu8(pixels, gIndex, newPixelColor.G)
-				buffer.writeu8(pixels, bIndex, newPixelColor.B)
+				pixels[i], pixels[i + 1], pixels[i + 2] = newPixelColor.R, newPixelColor.G, newPixelColor.B
 			end
 			return size, pixels
-		end, iconProps, color)
+		end)
 		if success then
 			iconProps.EditableImagePixels = editableImagePixels
 			iconProps.EditableImageSize = editableImageSize
--- a/plugin/src/App/Components/CodeLabel.lua
+++ b/plugin/src/App/Components/CodeLabel.lua
@@ -0,0 +1,61 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Highlighter = require(Packages.Highlighter)
+Highlighter.matchStudioSettings()
+
+local e = Roact.createElement
+
+local CodeLabel = Roact.PureComponent:extend("CodeLabel")
+
+function CodeLabel:init()
+	self.labelRef = Roact.createRef()
+	self.highlightsRef = Roact.createRef()
+end
+
+function CodeLabel:didMount()
+	Highlighter.highlight({
+		textObject = self.labelRef:getValue(),
+	})
+	self:updateHighlights()
+end
+
+function CodeLabel:didUpdate()
+	self:updateHighlights()
+end
+
+function CodeLabel:updateHighlights()
+	local highlights = self.highlightsRef:getValue()
+	if not highlights then
+		return
+	end
+
+	for _, lineLabel in highlights:GetChildren() do
+		local lineNum = tonumber(string.match(lineLabel.Name, "%d+") or "0")
+		lineLabel.BackgroundColor3 = self.props.lineBackground
+		lineLabel.BorderSizePixel = 0
+		lineLabel.BackgroundTransparency = if self.props.markedLines[lineNum] then 0.25 else 1
+	end
+end
+
+function CodeLabel:render()
+	return e("TextLabel", {
+		Size = self.props.size,
+		Position = self.props.position,
+		Text = self.props.text,
+		BackgroundTransparency = 1,
+		Font = Enum.Font.RobotoMono,
+		TextSize = 16,
+		TextXAlignment = Enum.TextXAlignment.Left,
+		TextYAlignment = Enum.TextYAlignment.Top,
+		TextColor3 = Color3.fromRGB(255, 255, 255),
+		[Roact.Ref] = self.labelRef,
+	}, {
+		SyntaxHighlights = e("Folder", {
+			[Roact.Ref] = self.highlightsRef,
+		}),
+	})
+end
+
+return CodeLabel
--- a/plugin/src/App/Components/Dropdown.lua
+++ b/plugin/src/App/Components/Dropdown.lua
@@ -1,3 +1,5 @@
+local TextService = game:GetService("TextService")
+
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -8,11 +10,9 @@ local Flipper = require(Packages.Flipper)
 local Assets = require(Plugin.Assets)
 local Theme = require(Plugin.App.Theme)
 local bindingUtil = require(Plugin.App.bindingUtil)
-local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)

 local SlicedImage = require(script.Parent.SlicedImage)
 local ScrollingFrame = require(script.Parent.ScrollingFrame)
-local Tooltip = require(script.Parent.Tooltip)

 local e = Roact.createElement

@@ -44,29 +44,29 @@ end

 function Dropdown:render()
 	return Theme.with(function(theme)
-		local dropdownTheme = theme.Dropdown
+		theme = theme.Dropdown

 		local optionButtons = {}
 		local width = -1
 		for i, option in self.props.options do
 			local text = tostring(option or "")
-			local textBounds = getTextBoundsAsync(text, theme.Font.Main, theme.TextSize.Body, math.huge)
-			if textBounds.X > width then
-				width = textBounds.X
+			local textSize = TextService:GetTextSize(text, 15, Enum.Font.GothamMedium, Vector2.new(math.huge, 20))
+			if textSize.X > width then
+				width = textSize.X
 			end

 			optionButtons[text] = e("TextButton", {
 				Text = text,
 				LayoutOrder = i,
 				Size = UDim2.new(1, 0, 0, 24),
-				BackgroundColor3 = dropdownTheme.BackgroundColor,
+				BackgroundColor3 = theme.BackgroundColor,
 				TextTransparency = self.props.transparency,
 				BackgroundTransparency = self.props.transparency,
 				BorderSizePixel = 0,
-				TextColor3 = dropdownTheme.TextColor,
+				TextColor3 = theme.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
-				TextSize = theme.TextSize.Body,
-				FontFace = theme.Font.Main,
+				TextSize = 15,
+				Font = Enum.Font.GothamMedium,

 				[Roact.Event.Activated] = function()
 					if self.props.locked then
@@ -103,13 +103,13 @@ function Dropdown:render()
 		}, {
 			Border = e(SlicedImage, {
 				slice = Assets.Slices.RoundedBorder,
-				color = dropdownTheme.BorderColor,
+				color = theme.BorderColor,
 				transparency = self.props.transparency,
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
 				DropArrow = e("ImageLabel", {
 					Image = if self.props.locked then Assets.Images.Dropdown.Locked else Assets.Images.Dropdown.Arrow,
-					ImageColor3 = dropdownTheme.IconColor,
+					ImageColor3 = theme.IconColor,
 					ImageTransparency = self.props.transparency,

 					Size = UDim2.new(0, 18, 0, 18),
@@ -120,21 +120,15 @@ function Dropdown:render()
 					end),

 					BackgroundTransparency = 1,
-				}, {
-					StateTip = if self.props.locked
-						then e(Tooltip.Trigger, {
-							text = self.props.lockedTooltip or "(Cannot be changed right now)",
-						})
-						else nil,
 				}),
 				Active = e("TextLabel", {
 					Size = UDim2.new(1, -30, 1, 0),
 					Position = UDim2.new(0, 6, 0, 0),
 					BackgroundTransparency = 1,
 					Text = self.props.active,
-					FontFace = theme.Font.Main,
-					TextSize = theme.TextSize.Body,
-					TextColor3 = dropdownTheme.TextColor,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 15,
+					TextColor3 = theme.TextColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = self.props.transparency,
 				}),
@@ -142,7 +136,7 @@ function Dropdown:render()
 			Options = if self.state.open
 				then e(SlicedImage, {
 					slice = Assets.Slices.RoundedBackground,
-					color = dropdownTheme.BackgroundColor,
+					color = theme.BackgroundColor,
 					position = UDim2.new(1, 0, 1, 3),
 					size = self.openBinding:map(function(a)
 						return UDim2.new(1, 0, a * math.min(3, #self.props.options), 0)
@@ -151,7 +145,7 @@ function Dropdown:render()
 				}, {
 					Border = e(SlicedImage, {
 						slice = Assets.Slices.RoundedBorder,
-						color = dropdownTheme.BorderColor,
+						color = theme.BorderColor,
 						transparency = self.props.transparency,
 						size = UDim2.new(1, 0, 1, 0),
 					}),
--- a/plugin/src/App/Components/EditableImage.lua
+++ b/plugin/src/App/Components/EditableImage.lua
@@ -12,8 +12,7 @@ function EditableImage:init()
 end

 function EditableImage:writePixels()
-	local image = self.ref.current :: EditableImage
-
+	local image = self.ref.current
 	if not image then
 		return
 	end
@@ -21,7 +20,7 @@ function EditableImage:writePixels()
 		return
 	end

-	image:WritePixelsBuffer(Vector2.zero, self.props.size, self.props.pixels)
+	image:WritePixels(Vector2.zero, self.props.size, self.props.pixels)
 end

 function EditableImage:render()
--- a/plugin/src/App/Components/Header.lua
+++ b/plugin/src/App/Components/Header.lua
@@ -9,70 +9,8 @@ local Assets = require(Plugin.Assets)
 local Config = require(Plugin.Config)
 local Version = require(Plugin.Version)

-local Tooltip = require(Plugin.App.Components.Tooltip)
-local SlicedImage = require(script.Parent.SlicedImage)
-
 local e = Roact.createElement

-local function VersionIndicator(props)
-	local updateMessage = Version.getUpdateMessage()
-
-	return Theme.with(function(theme)
-		return e("Frame", {
-			LayoutOrder = props.layoutOrder,
-			Size = UDim2.new(0, 0, 0, 25),
-			BackgroundTransparency = 1,
-			AutomaticSize = Enum.AutomaticSize.X,
-		}, {
-			Border = if updateMessage
-				then e(SlicedImage, {
-					slice = Assets.Slices.RoundedBorder,
-					color = theme.Button.Bordered.Enabled.BorderColor,
-					transparency = props.transparency,
-					size = UDim2.fromScale(1, 1),
-					zIndex = 0,
-				}, {
-					Indicator = e("ImageLabel", {
-						Size = UDim2.new(0, 10, 0, 10),
-						ScaleType = Enum.ScaleType.Fit,
-						Image = Assets.Images.Circles[16],
-						ImageColor3 = theme.Header.LogoColor,
-						ImageTransparency = props.transparency,
-						BackgroundTransparency = 1,
-						Position = UDim2.new(1, 0, 0, 0),
-						AnchorPoint = Vector2.new(0.5, 0.5),
-					}),
-				})
-				else nil,
-
-			Tip = if updateMessage
-				then e(Tooltip.Trigger, {
-					text = updateMessage,
-					delay = 0.1,
-				})
-				else nil,
-
-			VersionText = e("TextLabel", {
-				Text = Version.display(Config.version),
-				FontFace = theme.Font.Thin,
-				TextSize = theme.TextSize.Body,
-				TextColor3 = theme.Header.VersionColor,
-				TextXAlignment = Enum.TextXAlignment.Left,
-				TextTransparency = props.transparency,
-				BackgroundTransparency = 1,
-
-				Size = UDim2.new(0, 0, 1, 0),
-				AutomaticSize = Enum.AutomaticSize.X,
-			}, {
-				Padding = e("UIPadding", {
-					PaddingLeft = UDim.new(0, 6),
-					PaddingRight = UDim.new(0, 6),
-				}),
-			}),
-		})
-	end)
-end
-
 local function Header(props)
 	return Theme.with(function(theme)
 		return e("Frame", {
@@ -91,9 +29,18 @@ local function Header(props)
 				BackgroundTransparency = 1,
 			}),

-			VersionIndicator = e(VersionIndicator, {
-				transparency = props.transparency,
-				layoutOrder = 2,
+			Version = e("TextLabel", {
+				Text = Version.display(Config.version),
+				Font = Enum.Font.Gotham,
+				TextSize = 14,
+				TextColor3 = theme.Header.VersionColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+
+				Size = UDim2.new(1, 0, 0, 14),
+
+				LayoutOrder = 2,
+				BackgroundTransparency = 1,
 			}),

 			Layout = e("UIListLayout", {
--- a/plugin/src/App/Components/Notifications/FullscreenNotification.lua
+++ b/plugin/src/App/Components/Notifications/FullscreenNotification.lua
@@ -1,157 +0,0 @@
-local StudioService = game:GetService("StudioService")
-
-local Rojo = script:FindFirstAncestor("Rojo")
-local Plugin = Rojo.Plugin
-local Packages = Rojo.Packages
-
-local Roact = require(Packages.Roact)
-local Log = require(Packages.Log)
-
-local Theme = require(Plugin.App.Theme)
-local Assets = require(Plugin.Assets)
-
-local TextButton = require(Plugin.App.Components.TextButton)
-
-local e = Roact.createElement
-
-local FullscreenNotification = Roact.Component:extend("FullscreeFullscreenNotificationnNotification")
-
-function FullscreenNotification:init()
-	self.transparency, self.setTransparency = Roact.createBinding(0)
-	self.lifetime = self.props.timeout
-	self.dismissed = false
-end
-
-function FullscreenNotification:dismiss()
-	if self.dismissed then
-		return
-	end
-	self.dismissed = true
-
-	if self.props.onClose then
-		self.props.onClose()
-	end
-end
-
-function FullscreenNotification:didMount()
-	self.props.soundPlayer:play(Assets.Sounds.Notification)
-
-	self.timeout = task.spawn(function()
-		local clock = os.clock()
-		local seen = false
-		while task.wait(1 / 10) do
-			local now = os.clock()
-			local dt = now - clock
-			clock = now
-
-			if not seen then
-				seen = StudioService.ActiveScript == nil
-			end
-
-			if not seen then
-				-- Don't run down timer before being viewed
-				continue
-			end
-
-			self.lifetime -= dt
-			if self.lifetime <= 0 then
-				self:dismiss()
-				break
-			end
-		end
-
-		self.timeout = nil
-	end)
-end
-
-function FullscreenNotification:willUnmount()
-	if self.timeout and coroutine.status(self.timeout) == "suspended" then
-		task.cancel(self.timeout)
-	end
-end
-
-function FullscreenNotification:render()
-	return Theme.with(function(theme)
-		local actionButtons = {}
-		if self.props.actions then
-			for key, action in self.props.actions do
-				actionButtons[key] = e(TextButton, {
-					text = action.text,
-					style = action.style,
-					onClick = function()
-						self:dismiss()
-						if action.onClick then
-							local success, err = pcall(action.onClick, self)
-							if not success then
-								Log.warn("Error in notification action: " .. tostring(err))
-							end
-						end
-					end,
-					layoutOrder = -action.layoutOrder,
-					transparency = self.transparency,
-				})
-			end
-		end
-
-		return e("Frame", {
-			BackgroundColor3 = theme.BackgroundColor,
-			Size = UDim2.fromScale(1, 1),
-			ZIndex = self.props.layoutOrder,
-		}, {
-			Padding = e("UIPadding", {
-				PaddingLeft = UDim.new(0, 17),
-				PaddingRight = UDim.new(0, 15),
-				PaddingTop = UDim.new(0, 10),
-				PaddingBottom = UDim.new(0, 10),
-			}),
-			Layout = e("UIListLayout", {
-				SortOrder = Enum.SortOrder.LayoutOrder,
-				FillDirection = Enum.FillDirection.Vertical,
-				HorizontalAlignment = Enum.HorizontalAlignment.Center,
-				VerticalAlignment = Enum.VerticalAlignment.Center,
-				Padding = UDim.new(0, 10),
-			}),
-			Logo = e("ImageLabel", {
-				ImageTransparency = self.transparency,
-				Image = Assets.Images.Logo,
-				ImageColor3 = theme.Header.LogoColor,
-				BackgroundTransparency = 1,
-				Size = UDim2.fromOffset(60, 27),
-				LayoutOrder = 1,
-			}),
-			Info = e("TextLabel", {
-				Text = self.props.text,
-				FontFace = theme.Font.Main,
-				TextSize = theme.TextSize.Body,
-				TextColor3 = theme.Notification.InfoColor,
-				TextTransparency = self.transparency,
-				TextXAlignment = Enum.TextXAlignment.Center,
-				TextYAlignment = Enum.TextYAlignment.Center,
-				TextWrapped = true,
-				BackgroundTransparency = 1,
-
-				AutomaticSize = Enum.AutomaticSize.Y,
-				Size = UDim2.fromScale(0.4, 0),
-				LayoutOrder = 2,
-			}),
-			Actions = if self.props.actions
-				then e("Frame", {
-					Size = UDim2.new(1, -40, 0, 37),
-					BackgroundTransparency = 1,
-					LayoutOrder = 3,
-				}, {
-					Layout = e("UIListLayout", {
-						FillDirection = Enum.FillDirection.Horizontal,
-						HorizontalAlignment = Enum.HorizontalAlignment.Center,
-						VerticalAlignment = Enum.VerticalAlignment.Center,
-						SortOrder = Enum.SortOrder.LayoutOrder,
-						Padding = UDim.new(0, 5),
-					}),
-					Buttons = Roact.createFragment(actionButtons),
-				})
-				else nil,
-		})
-	end)
-end
-
-return FullscreenNotification
--- a/plugin/src/App/Components/Notifications/init.lua
+++ b/plugin/src/App/Components/Notifications/init.lua
@@ -1,66 +0,0 @@
-local Rojo = script:FindFirstAncestor("Rojo")
-
-local Packages = Rojo.Packages
-local Roact = require(Packages.Roact)
-
-local e = Roact.createElement
-
-local Notification = require(script.Notification)
-local FullscreenNotification = require(script.FullscreenNotification)
-
-local Notifications = Roact.Component:extend("Notifications")
-
-function Notifications:render()
-	local popupNotifs = {}
-	local fullscreenNotifs = {}
-
-	for id, notif in self.props.notifications do
-		local targetTable = if notif.isFullscreen then fullscreenNotifs else popupNotifs
-		local targetComponent = if notif.isFullscreen then FullscreenNotification else Notification
-		targetTable["NotifID_" .. id] = e(targetComponent, {
-			soundPlayer = self.props.soundPlayer,
-			text = notif.text,
-			timeout = notif.timeout,
-			actions = notif.actions,
-			layoutOrder = id,
-			onClose = function()
-				if notif.onClose then
-					notif.onClose()
-				end
-				self.props.onClose(id)
-			end,
-		})
-	end
-
-	return e("Frame", {
-		Size = UDim2.fromScale(1, 1),
-		BackgroundTransparency = 1,
-	}, {
-		Fullscreen = e("Frame", {
-			Size = UDim2.fromScale(1, 1),
-			BackgroundTransparency = 1,
-		}, {
-			notifs = Roact.createFragment(fullscreenNotifs),
-		}),
-		Popups = e("Frame", {
-			Size = UDim2.fromScale(1, 1),
-			BackgroundTransparency = 1,
-		}, {
-			Layout = e("UIListLayout", {
-				SortOrder = Enum.SortOrder.LayoutOrder,
-				HorizontalAlignment = Enum.HorizontalAlignment.Right,
-				VerticalAlignment = Enum.VerticalAlignment.Bottom,
-				Padding = UDim.new(0, 5),
-			}),
-			Padding = e("UIPadding", {
-				PaddingTop = UDim.new(0, 5),
-				PaddingBottom = UDim.new(0, 5),
-				PaddingLeft = UDim.new(0, 5),
-				PaddingRight = UDim.new(0, 5),
-			}),
-			notifs = Roact.createFragment(popupNotifs),
-		}),
-	})
-end
-
-return Notifications
--- a/plugin/src/App/Components/PatchVisualizer/ChangeList.lua
+++ b/plugin/src/App/Components/PatchVisualizer/ChangeList.lua
@@ -39,8 +39,8 @@ local function ViewDiffButton(props)
 				Label = e("TextLabel", {
 					Text = "View Diff",
 					BackgroundTransparency = 1,
-					FontFace = theme.Font.Main,
-					TextSize = theme.TextSize.Body,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 14,
 					TextColor3 = theme.Settings.Setting.DescriptionColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = props.transparency,
@@ -170,8 +170,8 @@ function ChangeList:render()
 			ColumnA = e("TextLabel", {
 				Text = tostring(headerRow[1]),
 				BackgroundTransparency = 1,
-				FontFace = theme.Font.Bold,
-				TextSize = theme.TextSize.Body,
+				Font = Enum.Font.GothamBold,
+				TextSize = 14,
 				TextColor3 = theme.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
@@ -182,8 +182,8 @@ function ChangeList:render()
 			ColumnB = e("TextLabel", {
 				Text = tostring(headerRow[2]),
 				BackgroundTransparency = 1,
-				FontFace = theme.Font.Bold,
-				TextSize = theme.TextSize.Body,
+				Font = Enum.Font.GothamBold,
+				TextSize = 14,
 				TextColor3 = theme.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
@@ -194,8 +194,8 @@ function ChangeList:render()
 			ColumnC = e("TextLabel", {
 				Text = tostring(headerRow[3]),
 				BackgroundTransparency = 1,
-				FontFace = theme.Font.Bold,
-				TextSize = theme.TextSize.Body,
+				Font = Enum.Font.GothamBold,
+				TextSize = 14,
 				TextColor3 = theme.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
@@ -230,8 +230,8 @@ function ChangeList:render()
 				ColumnA = e("TextLabel", {
 					Text = (if isWarning then "⚠ " else "") .. tostring(values[1]),
 					BackgroundTransparency = 1,
-					FontFace = theme.Font.Main,
-					TextSize = theme.TextSize.Body,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 14,
 					TextColor3 = if isWarning then theme.Diff.Warning else theme.TextColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = props.transparency,
--- a/plugin/src/App/Components/PatchVisualizer/DisplayValue.lua
+++ b/plugin/src/App/Components/PatchVisualizer/DisplayValue.lua
@@ -32,8 +32,8 @@ local function DisplayValue(props)
 				Label = e("TextLabel", {
 					Text = string.format("%d, %d, %d", props.value.R * 255, props.value.G * 255, props.value.B * 255),
 					BackgroundTransparency = 1,
-					FontFace = theme.Font.Main,
-					TextSize = theme.TextSize.Body,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 14,
 					TextColor3 = props.textColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = props.transparency,
@@ -90,8 +90,8 @@ local function DisplayValue(props)
 			return e("TextLabel", {
 				Text = textRepresentation,
 				BackgroundTransparency = 1,
-				FontFace = theme.Font.Main,
-				TextSize = theme.TextSize.Body,
+				Font = Enum.Font.GothamMedium,
+				TextSize = 14,
 				TextColor3 = props.textColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
@@ -112,8 +112,8 @@ local function DisplayValue(props)
 		return e("TextLabel", {
 			Text = textRepresentation,
 			BackgroundTransparency = 1,
-			FontFace = theme.Font.Main,
-			TextSize = theme.TextSize.Body,
+			Font = Enum.Font.GothamMedium,
+			TextSize = 14,
 			TextColor3 = props.textColor,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			TextTransparency = props.transparency,
--- a/plugin/src/App/Components/PatchVisualizer/DomLabel.lua
+++ b/plugin/src/App/Components/PatchVisualizer/DomLabel.lua
@@ -95,7 +95,7 @@ function DomLabel:render()
 	return Theme.with(function(theme)
 		local color = if props.isWarning
 			then theme.Diff.Warning
-			elseif props.patchType then theme.Diff.Background[props.patchType]
+			elseif props.patchType then theme.Diff[props.patchType]
 			else theme.TextColor

 		local indent = (depth - 1) * 12 + 15
@@ -225,8 +225,8 @@ function DomLabel:render()
 				Text = (if props.isWarning then "⚠ " else "") .. props.name,
 				RichText = true,
 				BackgroundTransparency = 1,
-				FontFace = if props.patchType then theme.Font.Bold else theme.Font.Main,
-				TextSize = theme.TextSize.Body,
+				Font = if props.patchType then Enum.Font.GothamBold else Enum.Font.GothamMedium,
+				TextSize = 14,
 				TextColor3 = color,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
@@ -251,11 +251,11 @@ function DomLabel:render()
 					then e("TextLabel", {
 						Text = props.changeInfo.edits .. if props.changeInfo.failed then "," else "",
 						BackgroundTransparency = 1,
-						FontFace = theme.Font.Thin,
-						TextSize = theme.TextSize.Body,
+						Font = Enum.Font.Gotham,
+						TextSize = 14,
 						TextColor3 = theme.SubTextColor,
 						TextTransparency = props.transparency,
-						Size = UDim2.new(0, 0, 0, theme.TextSize.Body),
+						Size = UDim2.new(0, 0, 0, 16),
 						AutomaticSize = Enum.AutomaticSize.X,
 						LayoutOrder = 2,
 					})
@@ -264,11 +264,11 @@ function DomLabel:render()
 					then e("TextLabel", {
 						Text = props.changeInfo.failed,
 						BackgroundTransparency = 1,
-						FontFace = theme.Font.Thin,
-						TextSize = theme.TextSize.Body,
+						Font = Enum.Font.Gotham,
+						TextSize = 14,
 						TextColor3 = theme.Diff.Warning,
 						TextTransparency = props.transparency,
-						Size = UDim2.new(0, 0, 0, theme.TextSize.Body),
+						Size = UDim2.new(0, 0, 0, 16),
 						AutomaticSize = Enum.AutomaticSize.X,
 						LayoutOrder = 6,
 					})
--- a/plugin/src/App/Components/PatchVisualizer/init.lua
+++ b/plugin/src/App/Components/PatchVisualizer/init.lua
@@ -124,8 +124,8 @@ function PatchVisualizer:render()
 			CleanMerge = e("TextLabel", {
 				Visible = #scrollElements == 0,
 				Text = "No changes to sync, project is up to date.",
-				FontFace = theme.Font.Main,
-				TextSize = theme.TextSize.Medium,
+				Font = Enum.Font.GothamMedium,
+				TextSize = 15,
 				TextColor3 = theme.TextColor,
 				TextWrapped = true,
 				Size = UDim2.new(1, 0, 1, 0),
--- a/plugin/src/App/Components/StringDiffVisualizer/StringDiff.lua
+++ b/plugin/src/App/Components/StringDiffVisualizer/StringDiff.lua
@@ -1,4 +1,3 @@
--!strict
 --[[
    Based on DiffMatchPatch by Neil Fraser.
    https://github.com/google/diff-match-patch
@@ -68,187 +67,8 @@ function StringDiff.findDiffs(text1: string, text2: string): Diffs
 	end

 	-- Cleanup the diff
-	diffs = StringDiff._cleanupSemantic(diffs)
 	diffs = StringDiff._reorderAndMerge(diffs)

-	-- Remove any empty diffs
-	local cursor = 1
-	while cursor and diffs[cursor] do
-		if diffs[cursor].value == "" then
-			table.remove(diffs, cursor)
-		else
-			cursor += 1
-		end
-	end
-
-	return diffs
-end
-
-function StringDiff._computeDiff(text1: string, text2: string): Diffs
-	-- Assumes that the prefix and suffix have already been trimmed off
-	-- and shortcut returns have been made so these texts must be different
-
-	local text1Length, text2Length = #text1, #text2
-
-	if text1Length == 0 then
-		-- It's simply inserting all of text2 into text1
-		return { { actionType = StringDiff.ActionTypes.Insert, value = text2 } }
-	end
-
-	if text2Length == 0 then
-		-- It's simply deleting all of text1
-		return { { actionType = StringDiff.ActionTypes.Delete, value = text1 } }
-	end
-
-	local longText = if text1Length > text2Length then text1 else text2
-	local shortText = if text1Length > text2Length then text2 else text1
-	local shortTextLength = #shortText
-
-	-- Shortcut if the shorter string exists entirely inside the longer one
-	local indexOf = if shortTextLength == 0 then nil else string.find(longText, shortText, 1, true)
-	if indexOf ~= nil then
-		local diffs = {
-			{ actionType = StringDiff.ActionTypes.Insert, value = string.sub(longText, 1, indexOf - 1) },
-			{ actionType = StringDiff.ActionTypes.Equal, value = shortText },
-			{ actionType = StringDiff.ActionTypes.Insert, value = string.sub(longText, indexOf + shortTextLength) },
-		}
-		-- Swap insertions for deletions if diff is reversed
-		if text1Length > text2Length then
-			diffs[1].actionType, diffs[3].actionType = StringDiff.ActionTypes.Delete, StringDiff.ActionTypes.Delete
-		end
-		return diffs
-	end
-
-	if shortTextLength == 1 then
-		-- Single character string
-		-- After the previous shortcut, the character can't be an equality
-		return {
-			{ actionType = StringDiff.ActionTypes.Delete, value = text1 },
-			{ actionType = StringDiff.ActionTypes.Insert, value = text2 },
-		}
-	end
-
-	return StringDiff._bisect(text1, text2)
-end
-
-function StringDiff._cleanupSemantic(diffs: Diffs): Diffs
-	-- Reduce the number of edits by eliminating semantically trivial equalities.
-	local changes = false
-	local equalities = {} -- Stack of indices where equalities are found.
-	local equalitiesLength = 0 -- Keeping our own length var is faster.
-	local lastEquality: string? = nil
-	-- Always equal to diffs[equalities[equalitiesLength]].value
-	local pointer = 1 -- Index of current position.
-	-- Number of characters that changed prior to the equality.
-	local length_insertions1 = 0
-	local length_deletions1 = 0
-	-- Number of characters that changed after the equality.
-	local length_insertions2 = 0
-	local length_deletions2 = 0
-
-	while diffs[pointer] do
-		if diffs[pointer].actionType == StringDiff.ActionTypes.Equal then -- Equality found.
-			equalitiesLength = equalitiesLength + 1
-			equalities[equalitiesLength] = pointer
-			length_insertions1 = length_insertions2
-			length_deletions1 = length_deletions2
-			length_insertions2 = 0
-			length_deletions2 = 0
-			lastEquality = diffs[pointer].value
-		else -- An insertion or deletion.
-			if diffs[pointer].actionType == StringDiff.ActionTypes.Insert then
-				length_insertions2 = length_insertions2 + #diffs[pointer].value
-			else
-				length_deletions2 = length_deletions2 + #diffs[pointer].value
-			end
-			-- Eliminate an equality that is smaller or equal to the edits on both
-			-- sides of it.
-			if
-				lastEquality
-				and (#lastEquality <= math.max(length_insertions1, length_deletions1))
-				and (#lastEquality <= math.max(length_insertions2, length_deletions2))
-			then
-				-- Duplicate record.
-				table.insert(
-					diffs,
-					equalities[equalitiesLength],
-					{ actionType = StringDiff.ActionTypes.Delete, value = lastEquality }
-				)
-				-- Change second copy to insert.
-				diffs[equalities[equalitiesLength] + 1].actionType = StringDiff.ActionTypes.Insert
-				-- Throw away the equality we just deleted.
-				equalitiesLength = equalitiesLength - 1
-				-- Throw away the previous equality (it needs to be reevaluated).
-				equalitiesLength = equalitiesLength - 1
-				pointer = (equalitiesLength > 0) and equalities[equalitiesLength] or 0
-				length_insertions1, length_deletions1 = 0, 0 -- Reset the counters.
-				length_insertions2, length_deletions2 = 0, 0
-				lastEquality = nil
-				changes = true
-			end
-		end
-		pointer = pointer + 1
-	end
-
-	-- Normalize the diff.
-	if changes then
-		StringDiff._reorderAndMerge(diffs)
-	end
-	StringDiff._cleanupSemanticLossless(diffs)
-
-	-- Find any overlaps between deletions and insertions.
-	-- e.g: <del>abcxxx</del><ins>xxxdef</ins>
-	--   -> <del>abc</del>xxx<ins>def</ins>
-	-- e.g: <del>xxxabc</del><ins>defxxx</ins>
-	--   -> <ins>def</ins>xxx<del>abc</del>
-	-- Only extract an overlap if it is as big as the edit ahead or behind it.
-	pointer = 2
-	while diffs[pointer] do
-		if
-			diffs[pointer - 1].actionType == StringDiff.ActionTypes.Delete
-			and diffs[pointer].actionType == StringDiff.ActionTypes.Insert
-		then
-			local deletion = diffs[pointer - 1].value
-			local insertion = diffs[pointer].value
-			local overlap_length1 = StringDiff._commonOverlap(deletion, insertion)
-			local overlap_length2 = StringDiff._commonOverlap(insertion, deletion)
-			if overlap_length1 >= overlap_length2 then
-				if overlap_length1 >= #deletion / 2 or overlap_length1 >= #insertion / 2 then
-					-- Overlap found.  Insert an equality and trim the surrounding edits.
-					table.insert(
-						diffs,
-						pointer,
-						{ actionType = StringDiff.ActionTypes.Equal, value = string.sub(insertion, 1, overlap_length1) }
-					)
-					diffs[pointer - 1].value = string.sub(deletion, 1, #deletion - overlap_length1)
-					diffs[pointer + 1].value = string.sub(insertion, overlap_length1 + 1)
-					pointer = pointer + 1
-				end
-			else
-				if overlap_length2 >= #deletion / 2 or overlap_length2 >= #insertion / 2 then
-					-- Reverse overlap found.
-					-- Insert an equality and swap and trim the surrounding edits.
-					table.insert(
-						diffs,
-						pointer,
-						{ actionType = StringDiff.ActionTypes.Equal, value = string.sub(deletion, 1, overlap_length2) }
-					)
-					diffs[pointer - 1] = {
-						actionType = StringDiff.ActionTypes.Insert,
-						value = string.sub(insertion, 1, #insertion - overlap_length2),
-					}
-					diffs[pointer + 1] = {
-						actionType = StringDiff.ActionTypes.Delete,
-						value = string.sub(deletion, overlap_length2 + 1),
-					}
-					pointer = pointer + 1
-				end
-			end
-			pointer = pointer + 1
-		end
-		pointer = pointer + 1
-	end
-
 	return diffs
 end

@@ -304,164 +124,51 @@ function StringDiff._sharedSuffix(text1: string, text2: string): number
 	return pointerMid
 end

-function StringDiff._commonOverlap(text1: string, text2: string): number
-	-- Determine if the suffix of one string is the prefix of another.
+function StringDiff._computeDiff(text1: string, text2: string): Diffs
+	-- Assumes that the prefix and suffix have already been trimmed off
+	-- and shortcut returns have been made so these texts must be different

-	-- Cache the text lengths to prevent multiple calls.
-	local text1_length = #text1
-	local text2_length = #text2
-	-- Eliminate the null case.
-	if text1_length == 0 or text2_length == 0 then
-		return 0
-	end
-	-- Truncate the longer string.
-	if text1_length > text2_length then
-		text1 = string.sub(text1, text1_length - text2_length + 1)
-	elseif text1_length < text2_length then
-		text2 = string.sub(text2, 1, text1_length)
-	end
-	local text_length = math.min(text1_length, text2_length)
-	-- Quick check for the worst case.
-	if text1 == text2 then
-		return text_length
+	local text1Length, text2Length = #text1, #text2
+
+	if text1Length == 0 then
+		-- It's simply inserting all of text2 into text1
+		return { { actionType = StringDiff.ActionTypes.Insert, value = text2 } }
 	end

-	-- Start by looking for a single character match
-	-- and increase length until no match is found.
-	-- Performance analysis: https://neil.fraser.name/news/2010/11/04/
-	local best = 0
-	local length = 1
-	while true do
-		local pattern = string.sub(text1, text_length - length + 1)
-		local found = string.find(text2, pattern, 1, true)
-		if found == nil then
-			return best
+	if text2Length == 0 then
+		-- It's simply deleting all of text1
+		return { { actionType = StringDiff.ActionTypes.Delete, value = text1 } }
+	end
+
+	local longText = if text1Length > text2Length then text1 else text2
+	local shortText = if text1Length > text2Length then text2 else text1
+	local shortTextLength = #shortText
+
+	-- Shortcut if the shorter string exists entirely inside the longer one
+	local indexOf = if shortTextLength == 0 then nil else string.find(longText, shortText, 1, true)
+	if indexOf ~= nil then
+		local diffs = {
+			{ actionType = StringDiff.ActionTypes.Insert, value = string.sub(longText, 1, indexOf - 1) },
+			{ actionType = StringDiff.ActionTypes.Equal, value = shortText },
+			{ actionType = StringDiff.ActionTypes.Insert, value = string.sub(longText, indexOf + shortTextLength) },
+		}
+		-- Swap insertions for deletions if diff is reversed
+		if text1Length > text2Length then
+			diffs[1].actionType, diffs[3].actionType = StringDiff.ActionTypes.Delete, StringDiff.ActionTypes.Delete
 		end
-		length = length + found - 1
-		if found == 1 or string.sub(text1, text_length - length + 1) == string.sub(text2, 1, length) then
-			best = length
-			length = length + 1
-		end
-	end
-end
-
-function StringDiff._cleanupSemanticScore(one: string, two: string): number
-	-- Given two strings, compute a score representing whether the internal
-	-- boundary falls on logical boundaries.
-	-- Scores range from 6 (best) to 0 (worst).
-
-	if (#one == 0) or (#two == 0) then
-		-- Edges are the best.
-		return 6
+		return diffs
 	end

-	-- Each port of this function behaves slightly differently due to
-	-- subtle differences in each language's definition of things like
-	-- 'whitespace'.  Since this function's purpose is largely cosmetic,
-	-- the choice has been made to use each language's native features
-	-- rather than force total conformity.
-	local char1 = string.sub(one, -1)
-	local char2 = string.sub(two, 1, 1)
-	local nonAlphaNumeric1 = string.match(char1, "%W")
-	local nonAlphaNumeric2 = string.match(char2, "%W")
-	local whitespace1 = nonAlphaNumeric1 and string.match(char1, "%s")
-	local whitespace2 = nonAlphaNumeric2 and string.match(char2, "%s")
-	local lineBreak1 = whitespace1 and string.match(char1, "%c")
-	local lineBreak2 = whitespace2 and string.match(char2, "%c")
-	local blankLine1 = lineBreak1 and string.match(one, "\n\r?\n$")
-	local blankLine2 = lineBreak2 and string.match(two, "^\r?\n\r?\n")
-
-	if blankLine1 or blankLine2 then
-		-- Five points for blank lines.
-		return 5
-	elseif lineBreak1 or lineBreak2 then
-		-- Four points for line breaks
-		-- DEVIATION: Prefer to start on a line break instead of end on it
-		return if lineBreak1 then 4 else 4.5
-	elseif nonAlphaNumeric1 and not whitespace1 and whitespace2 then
-		-- Three points for end of sentences.
-		return 3
-	elseif whitespace1 or whitespace2 then
-		-- Two points for whitespace.
-		return 2
-	elseif nonAlphaNumeric1 or nonAlphaNumeric2 then
-		-- One point for non-alphanumeric.
-		return 1
+	if shortTextLength == 1 then
+		-- Single character string
+		-- After the previous shortcut, the character can't be an equality
+		return {
+			{ actionType = StringDiff.ActionTypes.Delete, value = text1 },
+			{ actionType = StringDiff.ActionTypes.Insert, value = text2 },
+		}
 	end
-	return 0
-end

-function StringDiff._cleanupSemanticLossless(diffs: Diffs)
-	-- Look for single edits surrounded on both sides by equalities
-	-- which can be shifted sideways to align the edit to a word boundary.
-	-- e.g: The c<ins>at c</ins>ame. -> The <ins>cat </ins>came.
-
-	local pointer = 2
-	-- Intentionally ignore the first and last element (don't need checking).
-	while diffs[pointer + 1] do
-		local prevDiff, nextDiff = diffs[pointer - 1], diffs[pointer + 1]
-		if
-			(prevDiff.actionType == StringDiff.ActionTypes.Equal)
-			and (nextDiff.actionType == StringDiff.ActionTypes.Equal)
-		then
-			-- This is a single edit surrounded by equalities.
-			local diff = diffs[pointer]
-
-			local equality1 = prevDiff.value
-			local edit = diff.value
-			local equality2 = nextDiff.value
-
-			-- First, shift the edit as far left as possible.
-			local commonOffset = StringDiff._sharedSuffix(equality1, edit)
-			if commonOffset > 0 then
-				local commonString = string.sub(edit, -commonOffset)
-				equality1 = string.sub(equality1, 1, -commonOffset - 1)
-				edit = commonString .. string.sub(edit, 1, -commonOffset - 1)
-				equality2 = commonString .. equality2
-			end
-
-			-- Second, step character by character right, looking for the best fit.
-			local bestEquality1 = equality1
-			local bestEdit = edit
-			local bestEquality2 = equality2
-			local bestScore = StringDiff._cleanupSemanticScore(equality1, edit)
-				+ StringDiff._cleanupSemanticScore(edit, equality2)
-
-			while string.byte(edit, 1) == string.byte(equality2, 1) do
-				equality1 = equality1 .. string.sub(edit, 1, 1)
-				edit = string.sub(edit, 2) .. string.sub(equality2, 1, 1)
-				equality2 = string.sub(equality2, 2)
-				local score = StringDiff._cleanupSemanticScore(equality1, edit)
-					+ StringDiff._cleanupSemanticScore(edit, equality2)
-				-- The > (rather than >=) encourages leading rather than trailing whitespace on edits.
-				-- I just think it looks better for indentation changes to start the line,
-				-- since then indenting several lines all have aligned diffs at the start
-				if score > bestScore then
-					bestScore = score
-					bestEquality1 = equality1
-					bestEdit = edit
-					bestEquality2 = equality2
-				end
-			end
-			if prevDiff.value ~= bestEquality1 then
-				-- We have an improvement, save it back to the diff.
-				if #bestEquality1 > 0 then
-					diffs[pointer - 1].value = bestEquality1
-				else
-					table.remove(diffs, pointer - 1)
-					pointer = pointer - 1
-				end
-				diffs[pointer].value = bestEdit
-				if #bestEquality2 > 0 then
-					diffs[pointer + 1].value = bestEquality2
-				else
-					table.remove(diffs, pointer + 1)
-					pointer = pointer - 1
-				end
-			end
-		end
-		pointer = pointer + 1
-	end
+	return StringDiff._bisect(text1, text2)
 end

 function StringDiff._bisect(text1: string, text2: string): Diffs
--- a/plugin/src/App/Components/StringDiffVisualizer/init.lua
+++ b/plugin/src/App/Components/StringDiffVisualizer/init.lua
@@ -1,3 +1,5 @@
+local TextService = game:GetService("TextService")
+
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -5,15 +7,14 @@ local Packages = Rojo.Packages
 local Roact = require(Packages.Roact)
 local Log = require(Packages.Log)
 local Highlighter = require(Packages.Highlighter)
-Highlighter.matchStudioSettings()
 local StringDiff = require(script:FindFirstChild("StringDiff"))

 local Timer = require(Plugin.Timer)
 local Theme = require(Plugin.App.Theme)
-local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)

+local CodeLabel = require(Plugin.App.Components.CodeLabel)
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
-local VirtualScroller = require(Plugin.App.Components.VirtualScroller)
+local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)

 local e = Roact.createElement

@@ -21,29 +22,27 @@ local StringDiffVisualizer = Roact.Component:extend("StringDiffVisualizer")

 function StringDiffVisualizer:init()
 	self.scriptBackground, self.setScriptBackground = Roact.createBinding(Color3.fromRGB(0, 0, 0))
-	self.updateEvent = Instance.new("BindableEvent")
-	self.lineHeight, self.setLineHeight = Roact.createBinding(15)
-	self.canvasPosition, self.setCanvasPosition = Roact.createBinding(Vector2.zero)
-	self.windowWidth, self.setWindowWidth = Roact.createBinding(math.huge)
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))

 	-- Ensure that the script background is up to date with the current theme
 	self.themeChangedConnection = settings().Studio.ThemeChanged:Connect(function()
-		-- Delay to allow Highlighter to process the theme change first
-		task.delay(1 / 20, function()
+		task.defer(function()
+			-- Defer to allow Highlighter to process the theme change first
 			self:updateScriptBackground()
-			self:updateDiffs()
-			-- Rerender the virtual list elements
-			self.updateEvent:Fire()
 		end)
 	end)

+	self:calculateContentSize()
 	self:updateScriptBackground()
-	self:updateDiffs()
+
+	self:setState({
+		add = {},
+		remove = {},
+	})
 end

 function StringDiffVisualizer:willUnmount()
 	self.themeChangedConnection:Disconnect()
-	self.updateEvent:Destroy()
 end

 function StringDiffVisualizer:updateScriptBackground()
@@ -54,189 +53,96 @@ function StringDiffVisualizer:updateScriptBackground()
 end

 function StringDiffVisualizer:didUpdate(previousProps)
-	if
-		previousProps.currentString ~= self.props.currentString
-		or previousProps.incomingString ~= self.props.incomingString
-	then
-		self:updateDiffs()
+	if previousProps.oldString ~= self.props.oldString or previousProps.newString ~= self.props.newString then
+		self:calculateContentSize()
+		local add, remove = self:calculateDiffLines()
+		self:setState({
+			add = add,
+			remove = remove,
+		})
 	end
 end

-function StringDiffVisualizer:updateDiffs()
-	Timer.start("StringDiffVisualizer:updateDiffs")
-	local currentString, incomingString = self.props.currentString, self.props.incomingString
+function StringDiffVisualizer:calculateContentSize()
+	local oldString, newString = self.props.oldString, self.props.newString
+
+	local oldStringBounds = TextService:GetTextSize(oldString, 16, Enum.Font.RobotoMono, Vector2.new(99999, 99999))
+	local newStringBounds = TextService:GetTextSize(newString, 16, Enum.Font.RobotoMono, Vector2.new(99999, 99999))
+
+	self.setContentSize(
+		Vector2.new(math.max(oldStringBounds.X, newStringBounds.X), math.max(oldStringBounds.Y, newStringBounds.Y))
+	)
+end
+
+function StringDiffVisualizer:calculateDiffLines()
+	Timer.start("StringDiffVisualizer:calculateDiffLines")
+	local oldString, newString = self.props.oldString, self.props.newString

 	-- Diff the two texts
 	local startClock = os.clock()
-	local diffs =
-		StringDiff.findDiffs((string.gsub(currentString, "\t", "    ")), (string.gsub(incomingString, "\t", "    ")))
+	local diffs = StringDiff.findDiffs(oldString, newString)
 	local stopClock = os.clock()

 	Log.trace(
 		"Diffing {} byte and {} byte strings took {} microseconds and found {} diff sections",
-		#currentString,
-		#incomingString,
+		#oldString,
+		#newString,
 		math.round((stopClock - startClock) * 1000 * 1000),
 		#diffs
 	)

-	-- Build the rich text lines
-	local currentRichTextLines = Highlighter.buildRichTextLines({
-		src = currentString,
-	})
-	local incomingRichTextLines = Highlighter.buildRichTextLines({
-		src = incomingString,
-	})
+	-- Determine which lines to highlight
+	local add, remove = {}, {}

-	local maxLines = math.max(#currentRichTextLines, #incomingRichTextLines)
-
-	-- Find the diff locations
-	local currentDiffs, incomingDiffs = {}, {}
-	local firstDiffLineNum = 0
-
-	local currentLineNum, incomingLineNum = 1, 1
-	local currentIdx, incomingIdx = 1, 1
+	local oldLineNum, newLineNum = 1, 1
 	for _, diff in diffs do
 		local actionType, text = diff.actionType, diff.value
-		local lineCount = select(2, string.gsub(text, "\n", "\n"))
-		local lines = string.split(text, "\n")
+		local lines = select(2, string.gsub(text, "\n", "\n"))

 		if actionType == StringDiff.ActionTypes.Equal then
-			if lineCount > 0 then
-				-- Jump cursor ahead to last line
-				currentLineNum += lineCount
-				incomingLineNum += lineCount
-				currentIdx = #lines[#lines]
-				incomingIdx = #lines[#lines]
+			oldLineNum += lines
+			newLineNum += lines
+		elseif actionType == StringDiff.ActionTypes.Insert then
+			if lines > 0 then
+				local textLines = string.split(text, "\n")
+				for i, textLine in textLines do
+					if string.match(textLine, "%S") then
+						add[newLineNum + i - 1] = true
+					end
+				end
 			else
-				-- Move along this line
-				currentIdx += #text
-				incomingIdx += #text
-			end
-
-			continue
-		end
-
-		if actionType == StringDiff.ActionTypes.Insert then
-			if firstDiffLineNum == 0 then
-				firstDiffLineNum = incomingLineNum
-			end
-
-			for i, lineText in lines do
-				if i > 1 then
-					-- Move to next line
-					incomingLineNum += 1
-					incomingIdx = 0
+				if string.match(text, "%S") then
+					add[newLineNum] = true
 				end
-				if not incomingDiffs[incomingLineNum] then
-					incomingDiffs[incomingLineNum] = {}
-				end
-				-- Mark these characters on this line
-				table.insert(incomingDiffs[incomingLineNum], {
-					start = incomingIdx,
-					stop = incomingIdx + #lineText,
-				})
-				incomingIdx += #lineText
 			end
+			newLineNum += lines
 		elseif actionType == StringDiff.ActionTypes.Delete then
-			if firstDiffLineNum == 0 then
-				firstDiffLineNum = currentLineNum
-			end
-
-			for i, lineText in lines do
-				if i > 1 then
-					-- Move to next line
-					currentLineNum += 1
-					currentIdx = 0
+			if lines > 0 then
+				local textLines = string.split(text, "\n")
+				for i, textLine in textLines do
+					if string.match(textLine, "%S") then
+						remove[oldLineNum + i - 1] = true
+					end
 				end
-				if not currentDiffs[currentLineNum] then
-					currentDiffs[currentLineNum] = {}
+			else
+				if string.match(text, "%S") then
+					remove[oldLineNum] = true
 				end
-				-- Mark these characters on this line
-				table.insert(currentDiffs[currentLineNum], {
-					start = currentIdx,
-					stop = currentIdx + #lineText,
-				})
-				currentIdx += #lineText
 			end
+			oldLineNum += lines
 		else
 			Log.warn("Unknown diff action: {} {}", actionType, text)
 		end
 	end

 	Timer.stop()
-
-	self:setState({
-		maxLines = maxLines,
-		currentRichTextLines = currentRichTextLines,
-		incomingRichTextLines = incomingRichTextLines,
-		currentDiffs = currentDiffs,
-		incomingDiffs = incomingDiffs,
-	})
-
-	-- Scroll to the first diff line
-	task.defer(self.setCanvasPosition, Vector2.new(0, math.max(0, (firstDiffLineNum - 4) * 16)))
+	return add, remove
 end

 function StringDiffVisualizer:render()
-	local currentDiffs, incomingDiffs = self.state.currentDiffs, self.state.incomingDiffs
-	local currentRichTextLines, incomingRichTextLines =
-		self.state.currentRichTextLines, self.state.incomingRichTextLines
-	local maxLines = self.state.maxLines
+	local oldString, newString = self.props.oldString, self.props.newString

 	return Theme.with(function(theme)
-		self.setLineHeight(theme.TextSize.Code)
-
-		-- Calculate the width of the canvas
-		-- (One line at a time to avoid the char limit of getTextBoundsAsync)
-		local canvasWidth = 0
-		for i = 1, maxLines do
-			local currentLine = currentRichTextLines[i]
-			if currentLine and string.find(currentLine, "%S") then
-				local bounds = getTextBoundsAsync(currentLine, theme.Font.Code, theme.TextSize.Code, math.huge, true)
-				if bounds.X > canvasWidth then
-					canvasWidth = bounds.X
-				end
-			end
-			local incomingLine = incomingRichTextLines[i]
-			if incomingLine and string.find(incomingLine, "%S") then
-				local bounds = getTextBoundsAsync(incomingLine, theme.Font.Code, theme.TextSize.Code, math.huge, true)
-				if bounds.X > canvasWidth then
-					canvasWidth = bounds.X
-				end
-			end
-		end
-
-		local lineNumberWidth =
-			getTextBoundsAsync(tostring(maxLines), theme.Font.Code, theme.TextSize.Body, math.huge, true).X
-
-		canvasWidth += lineNumberWidth + 12
-
-		local removalScrollMarkers = {}
-		local insertionScrollMarkers = {}
-		for lineNum in currentDiffs do
-			table.insert(
-				removalScrollMarkers,
-				e("Frame", {
-					Size = UDim2.fromScale(0.5, 1 / maxLines),
-					Position = UDim2.fromScale(0, (lineNum - 1) / maxLines),
-					BorderSizePixel = 0,
-					BackgroundColor3 = theme.Diff.Background.Remove,
-				})
-			)
-		end
-		for lineNum in incomingDiffs do
-			table.insert(
-				insertionScrollMarkers,
-				e("Frame", {
-					Size = UDim2.fromScale(0.5, 1 / maxLines),
-					Position = UDim2.fromScale(0.5, (lineNum - 1) / maxLines),
-					BorderSizePixel = 0,
-					BackgroundColor3 = theme.Diff.Background.Add,
-				})
-			)
-		end
-
 		return e(BorderedContainer, {
 			size = self.props.size,
 			position = self.props.position,
@@ -254,196 +160,43 @@ function StringDiffVisualizer:render()
 					CornerRadius = UDim.new(0, 5),
 				}),
 			}),
-			Main = e("Frame", {
-				Size = UDim2.new(1, -10, 1, -2),
-				Position = UDim2.new(0, 2, 0, 2),
-				BackgroundTransparency = 1,
-				[Roact.Change.AbsoluteSize] = function(rbx)
-					self.setWindowWidth(rbx.AbsoluteSize.X * 0.5 - 10)
-				end,
+			Separator = e("Frame", {
+				Size = UDim2.new(0, 2, 1, 0),
+				Position = UDim2.new(0.5, 0, 0, 0),
+				AnchorPoint = Vector2.new(0.5, 0),
+				BorderSizePixel = 0,
+				BackgroundColor3 = theme.BorderedContainer.BorderColor,
+				BackgroundTransparency = 0.5,
+			}),
+			Old = e(ScrollingFrame, {
+				position = UDim2.new(0, 2, 0, 2),
+				size = UDim2.new(0.5, -7, 1, -4),
+				scrollingDirection = Enum.ScrollingDirection.XY,
+				transparency = self.props.transparency,
+				contentSize = self.contentSize,
 			}, {
-				Separator = e("Frame", {
-					Size = UDim2.new(0, 2, 1, 0),
-					Position = UDim2.new(0.5, 0, 0, 0),
-					AnchorPoint = Vector2.new(0.5, 0),
-					BorderSizePixel = 0,
-					BackgroundColor3 = theme.BorderedContainer.BorderColor,
-					BackgroundTransparency = 0.5,
-				}),
-				Current = e(VirtualScroller, {
+				Source = e(CodeLabel, {
+					size = UDim2.new(1, 0, 1, 0),
 					position = UDim2.new(0, 0, 0, 0),
-					size = UDim2.new(0.5, -1, 1, 0),
-					transparency = self.props.transparency,
-					count = maxLines,
-					updateEvent = self.updateEvent.Event,
-					canvasWidth = canvasWidth,
-					canvasPosition = self.canvasPosition,
-					onCanvasPositionChanged = self.setCanvasPosition,
-					render = function(i)
-						local lineDiffs = currentDiffs[i]
-						local diffFrames = table.create(if lineDiffs then #lineDiffs else 0)
-
-						-- Show diff markers over the specific changed characters
-						if lineDiffs then
-							local charWidth = math.round(theme.TextSize.Code * 0.5)
-							for diffIdx, diff in lineDiffs do
-								local start, stop = diff.start, diff.stop
-								diffFrames[diffIdx] = e("Frame", {
-									Size = if #lineDiffs == 1
-											and start == 0
-											and stop == 0
-										then UDim2.fromScale(1, 1)
-										else UDim2.new(
-											0,
-											math.max(charWidth * (stop - start), charWidth * 0.4),
-											1,
-											0
-										),
-									Position = UDim2.fromOffset(charWidth * start, 0),
-									BackgroundColor3 = theme.Diff.Background.Remove,
-									BackgroundTransparency = 0.85,
-									BorderSizePixel = 0,
-									ZIndex = -1,
-								})
-							end
-						end
-
-						return Roact.createFragment({
-							LineNumber = e("TextLabel", {
-								Size = UDim2.new(0, lineNumberWidth + 8, 1, 0),
-								Text = i,
-								BackgroundColor3 = Color3.new(0, 0, 0),
-								BackgroundTransparency = 0.9,
-								BorderSizePixel = 0,
-								FontFace = theme.Font.Code,
-								TextSize = theme.TextSize.Body,
-								TextColor3 = if lineDiffs then theme.Diff.Background.Remove else theme.SubTextColor,
-								TextXAlignment = Enum.TextXAlignment.Right,
-							}, {
-								Padding = e("UIPadding", { PaddingRight = UDim.new(0, 6) }),
-							}),
-							Content = e("Frame", {
-								Size = UDim2.new(1, -(lineNumberWidth + 10), 1, 0),
-								Position = UDim2.fromScale(1, 0),
-								AnchorPoint = Vector2.new(1, 0),
-								BackgroundColor3 = theme.Diff.Background.Remove,
-								BackgroundTransparency = if lineDiffs then 0.95 else 1,
-								BorderSizePixel = 0,
-							}, {
-								CodeLabel = e("TextLabel", {
-									Size = UDim2.fromScale(1, 1),
-									Position = UDim2.fromScale(0, 0),
-									Text = currentRichTextLines[i] or "",
-									RichText = true,
-									BackgroundTransparency = 1,
-									BorderSizePixel = 0,
-									FontFace = theme.Font.Code,
-									TextSize = theme.TextSize.Code,
-									TextXAlignment = Enum.TextXAlignment.Left,
-									TextYAlignment = Enum.TextYAlignment.Top,
-									TextColor3 = Color3.fromRGB(255, 255, 255),
-								}),
-								DiffFrames = Roact.createFragment(diffFrames),
-							}),
-						})
-					end,
-					getHeightBinding = function()
-						return self.lineHeight
-					end,
-				}),
-				Incoming = e(VirtualScroller, {
-					position = UDim2.new(0.5, 1, 0, 0),
-					size = UDim2.new(0.5, -1, 1, 0),
-					transparency = self.props.transparency,
-					count = maxLines,
-					updateEvent = self.updateEvent.Event,
-					canvasWidth = canvasWidth,
-					canvasPosition = self.canvasPosition,
-					onCanvasPositionChanged = self.setCanvasPosition,
-					render = function(i)
-						local lineDiffs = incomingDiffs[i]
-						local diffFrames = table.create(if lineDiffs then #lineDiffs else 0)
-
-						-- Show diff markers over the specific changed characters
-						if lineDiffs then
-							local charWidth = math.round(theme.TextSize.Code * 0.5)
-							for diffIdx, diff in lineDiffs do
-								local start, stop = diff.start, diff.stop
-								diffFrames[diffIdx] = e("Frame", {
-									Size = if #lineDiffs == 1
-											and start == 0
-											and stop == 0
-										then UDim2.fromScale(1, 1)
-										else UDim2.new(
-											0,
-											math.max(charWidth * (stop - start), charWidth * 0.4),
-											1,
-											0
-										),
-									Position = UDim2.fromOffset(charWidth * start, 0),
-									BackgroundColor3 = theme.Diff.Background.Add,
-									BackgroundTransparency = 0.85,
-									BorderSizePixel = 0,
-									ZIndex = -1,
-								})
-							end
-						end
-
-						return Roact.createFragment({
-							LineNumber = e("TextLabel", {
-								Size = UDim2.new(0, lineNumberWidth + 8, 1, 0),
-								Text = i,
-								BackgroundColor3 = Color3.new(0, 0, 0),
-								BackgroundTransparency = 0.9,
-								BorderSizePixel = 0,
-								FontFace = theme.Font.Code,
-								TextSize = theme.TextSize.Body,
-								TextColor3 = if lineDiffs then theme.Diff.Background.Add else theme.SubTextColor,
-								TextXAlignment = Enum.TextXAlignment.Right,
-							}, {
-								Padding = e("UIPadding", { PaddingRight = UDim.new(0, 6) }),
-							}),
-							Content = e("Frame", {
-								Size = UDim2.new(1, -(lineNumberWidth + 10), 1, 0),
-								Position = UDim2.fromScale(1, 0),
-								AnchorPoint = Vector2.new(1, 0),
-								BackgroundColor3 = theme.Diff.Background.Add,
-								BackgroundTransparency = if lineDiffs then 0.95 else 1,
-								BorderSizePixel = 0,
-							}, {
-								CodeLabel = e("TextLabel", {
-									Size = UDim2.fromScale(1, 1),
-									Position = UDim2.fromScale(0, 0),
-									Text = incomingRichTextLines[i] or "",
-									RichText = true,
-									BackgroundColor3 = theme.Diff.Background.Add,
-									BackgroundTransparency = 1,
-									BorderSizePixel = 0,
-									FontFace = theme.Font.Code,
-									TextSize = theme.TextSize.Code,
-									TextXAlignment = Enum.TextXAlignment.Left,
-									TextYAlignment = Enum.TextYAlignment.Top,
-									TextColor3 = Color3.fromRGB(255, 255, 255),
-								}),
-								DiffFrames = Roact.createFragment(diffFrames),
-							}),
-						})
-					end,
-					getHeightBinding = function()
-						return self.lineHeight
-					end,
+					text = oldString,
+					lineBackground = theme.Diff.Remove,
+					markedLines = self.state.remove,
 				}),
 			}),
-			ScrollMarkers = e("Frame", {
-				Size = self.windowWidth:map(function(windowWidth)
-					return UDim2.new(0, 8, 1, -4 - (if canvasWidth > windowWidth then 10 else 0))
-				end),
-				Position = UDim2.new(1, -2, 0, 2),
-				AnchorPoint = Vector2.new(1, 0),
-				BackgroundTransparency = 1,
+			New = e(ScrollingFrame, {
+				position = UDim2.new(0.5, 5, 0, 2),
+				size = UDim2.new(0.5, -7, 1, -4),
+				scrollingDirection = Enum.ScrollingDirection.XY,
+				transparency = self.props.transparency,
+				contentSize = self.contentSize,
 			}, {
-				insertions = Roact.createFragment(insertionScrollMarkers),
-				removals = Roact.createFragment(removalScrollMarkers),
+				Source = e(CodeLabel, {
+					size = UDim2.new(1, 0, 1, 0),
+					position = UDim2.new(0, 0, 0, 0),
+					text = newString,
+					lineBackground = theme.Diff.Add,
+					markedLines = self.state.add,
+				}),
 			}),
 		})
 	end)
--- a/plugin/src/App/Components/TableDiffVisualizer/Array.lua
+++ b/plugin/src/App/Components/TableDiffVisualizer/Array.lua
@@ -93,7 +93,7 @@ function Array:render()
 				e("Frame", {
 					Size = UDim2.new(1, 0, 0, 25),
 					BackgroundTransparency = if patchType == "Remain" then 1 else self.props.transparency,
-					BackgroundColor3 = theme.Diff.Background[patchType],
+					BackgroundColor3 = if patchType == "Remain" then theme.Diff.Row else theme.Diff[patchType],
 					BorderSizePixel = 0,
 					LayoutOrder = i,
 				}, {
@@ -152,8 +152,8 @@ function Array:render()
 					BackgroundTransparency = 1,
 					Text = "Old",
 					TextXAlignment = Enum.TextXAlignment.Left,
-					FontFace = theme.Font.Bold,
-					TextSize = theme.TextSize.Body,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
 					TextColor3 = theme.Settings.Setting.DescriptionColor,
 					TextTruncate = Enum.TextTruncate.AtEnd,
 				}),
@@ -163,8 +163,8 @@ function Array:render()
 					BackgroundTransparency = 1,
 					Text = "New",
 					TextXAlignment = Enum.TextXAlignment.Left,
-					FontFace = theme.Font.Bold,
-					TextSize = theme.TextSize.Body,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
 					TextColor3 = theme.Settings.Setting.DescriptionColor,
 					TextTruncate = Enum.TextTruncate.AtEnd,
 				}),
--- a/plugin/src/App/Components/TableDiffVisualizer/Dictionary.lua
+++ b/plugin/src/App/Components/TableDiffVisualizer/Dictionary.lua
@@ -91,7 +91,9 @@ function Dictionary:render()
 					LayoutOrder = order,
 					BorderSizePixel = 0,
 					BackgroundTransparency = if line.patchType == "Remain" then 1 else self.props.transparency,
-					BackgroundColor3 = theme.Diff.Background[line.patchType],
+					BackgroundColor3 = if line.patchType == "Remain"
+						then theme.Diff.Row
+						else theme.Diff[line.patchType],
 				}, {
 					DiffIcon = if line.patchType ~= "Remain"
 						then e("ImageLabel", {
@@ -110,9 +112,9 @@ function Dictionary:render()
 						BackgroundTransparency = 1,
 						Text = key,
 						TextXAlignment = Enum.TextXAlignment.Left,
-						FontFace = theme.Font.Main,
-						TextSize = theme.TextSize.Body,
-						TextColor3 = theme.Diff.Text[line.patchType],
+						Font = Enum.Font.GothamMedium,
+						TextSize = 14,
+						TextColor3 = theme.Settings.Setting.DescriptionColor,
 						TextTruncate = Enum.TextTruncate.AtEnd,
 					}),
 					OldValue = e("Frame", {
@@ -123,7 +125,7 @@ function Dictionary:render()
 						e(DisplayValue, {
 							value = oldValue,
 							transparency = self.props.transparency,
-							textColor = theme.Diff.Text[line.patchType],
+							textColor = theme.Settings.Setting.DescriptionColor,
 						}),
 					}),
 					NewValue = e("Frame", {
@@ -134,7 +136,7 @@ function Dictionary:render()
 						e(DisplayValue, {
 							value = newValue,
 							transparency = self.props.transparency,
-							textColor = theme.Diff.Text[line.patchType],
+							textColor = theme.Settings.Setting.DescriptionColor,
 						}),
 					}),
 				})
@@ -155,8 +157,8 @@ function Dictionary:render()
 					BackgroundTransparency = 1,
 					Text = "Key",
 					TextXAlignment = Enum.TextXAlignment.Left,
-					FontFace = theme.Font.Bold,
-					TextSize = theme.TextSize.Body,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
 					TextColor3 = theme.Settings.Setting.DescriptionColor,
 					TextTruncate = Enum.TextTruncate.AtEnd,
 				}),
@@ -166,8 +168,8 @@ function Dictionary:render()
 					BackgroundTransparency = 1,
 					Text = "Old",
 					TextXAlignment = Enum.TextXAlignment.Left,
-					FontFace = theme.Font.Bold,
-					TextSize = theme.TextSize.Body,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
 					TextColor3 = theme.Settings.Setting.DescriptionColor,
 					TextTruncate = Enum.TextTruncate.AtEnd,
 				}),
@@ -177,8 +179,8 @@ function Dictionary:render()
 					BackgroundTransparency = 1,
 					Text = "New",
 					TextXAlignment = Enum.TextXAlignment.Left,
-					FontFace = theme.Font.Bold,
-					TextSize = theme.TextSize.Body,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
 					TextColor3 = theme.Settings.Setting.DescriptionColor,
 					TextTruncate = Enum.TextTruncate.AtEnd,
 				}),
--- a/plugin/src/App/Components/Tag.lua
+++ b/plugin/src/App/Components/Tag.lua
@@ -4,7 +4,6 @@ local Packages = Rojo.Packages

 local Roact = require(Packages.Roact)

-local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)

 local SlicedImage = require(Plugin.App.Components.SlicedImage)
@@ -12,48 +11,46 @@ local SlicedImage = require(Plugin.App.Components.SlicedImage)
 local e = Roact.createElement

 return function(props)
-	return Theme.with(function(theme)
-		return e(SlicedImage, {
-			slice = Assets.Slices.RoundedBackground,
-			color = props.color,
-			transparency = props.transparency:map(function(transparency)
-				return 0.9 + (0.1 * transparency)
-			end),
-			layoutOrder = props.layoutOrder,
-			position = props.position,
-			anchorPoint = props.anchorPoint,
-			size = UDim2.new(0, 0, 0, theme.TextSize.Medium),
-			automaticSize = Enum.AutomaticSize.X,
-		}, {
-			Padding = e("UIPadding", {
-				PaddingLeft = UDim.new(0, 4),
-				PaddingRight = UDim.new(0, 4),
-				PaddingTop = UDim.new(0, 2),
-				PaddingBottom = UDim.new(0, 2),
-			}),
-			Icon = if props.icon
-				then e("ImageLabel", {
-					Size = UDim2.new(0, 12, 0, 12),
-					Position = UDim2.new(0, 0, 0.5, 0),
-					AnchorPoint = Vector2.new(0, 0.5),
-					Image = props.icon,
-					BackgroundTransparency = 1,
-					ImageColor3 = props.color,
-					ImageTransparency = props.transparency,
-				})
-				else nil,
-			Text = e("TextLabel", {
-				Text = props.text,
-				FontFace = theme.Font.Main,
-				TextSize = theme.TextSize.Small,
-				TextColor3 = props.color,
-				TextXAlignment = Enum.TextXAlignment.Center,
-				TextTransparency = props.transparency,
-				Size = UDim2.new(0, 0, 1, 0),
-				Position = UDim2.new(0, if props.icon then 15 else 0, 0, 0),
-				AutomaticSize = Enum.AutomaticSize.X,
+	return e(SlicedImage, {
+		slice = Assets.Slices.RoundedBackground,
+		color = props.color,
+		transparency = props.transparency:map(function(transparency)
+			return 0.9 + (0.1 * transparency)
+		end),
+		layoutOrder = props.layoutOrder,
+		position = props.position,
+		anchorPoint = props.anchorPoint,
+		size = UDim2.new(0, 0, 0, 16),
+		automaticSize = Enum.AutomaticSize.X,
+	}, {
+		Padding = e("UIPadding", {
+			PaddingLeft = UDim.new(0, 4),
+			PaddingRight = UDim.new(0, 4),
+			PaddingTop = UDim.new(0, 2),
+			PaddingBottom = UDim.new(0, 2),
+		}),
+		Icon = if props.icon
+			then e("ImageLabel", {
+				Size = UDim2.new(0, 12, 0, 12),
+				Position = UDim2.new(0, 0, 0.5, 0),
+				AnchorPoint = Vector2.new(0, 0.5),
+				Image = props.icon,
 				BackgroundTransparency = 1,
-			}),
-		})
-	end)
+				ImageColor3 = props.color,
+				ImageTransparency = props.transparency,
+			})
+			else nil,
+		Text = e("TextLabel", {
+			Text = props.text,
+			Font = Enum.Font.GothamMedium,
+			TextSize = 12,
+			TextColor3 = props.color,
+			TextXAlignment = Enum.TextXAlignment.Center,
+			TextTransparency = props.transparency,
+			Size = UDim2.new(0, 0, 1, 0),
+			Position = UDim2.new(0, if props.icon then 15 else 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.X,
+			BackgroundTransparency = 1,
+		}),
+	})
 end
--- a/plugin/src/App/Components/TextButton.lua
+++ b/plugin/src/App/Components/TextButton.lua
@@ -1,3 +1,5 @@
+local TextService = game:GetService("TextService")
+
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -8,7 +10,6 @@ local Flipper = require(Packages.Flipper)
 local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
 local bindingUtil = require(Plugin.App.bindingUtil)
-local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)

 local SlicedImage = require(script.Parent.SlicedImage)
 local TouchRipple = require(script.Parent.TouchRipple)
@@ -40,17 +41,18 @@ end

 function TextButton:render()
 	return Theme.with(function(theme)
-		local textBounds = getTextBoundsAsync(self.props.text, theme.Font.Main, theme.TextSize.Large, math.huge)
+		local textSize =
+			TextService:GetTextSize(self.props.text, 18, Enum.Font.GothamMedium, Vector2.new(math.huge, math.huge))

 		local style = self.props.style

-		local buttonTheme = theme.Button[style]
+		theme = theme.Button[style]

 		local bindingHover = bindingUtil.deriveProperty(self.binding, "hover")
 		local bindingEnabled = bindingUtil.deriveProperty(self.binding, "enabled")

 		return e("ImageButton", {
-			Size = UDim2.new(0, (theme.TextSize.Body * 2) + textBounds.X, 0, 34),
+			Size = UDim2.new(0, 15 + textSize.X + 15, 0, 34),
 			Position = self.props.position,
 			AnchorPoint = self.props.anchorPoint,

@@ -72,22 +74,18 @@ function TextButton:render()
 			end,
 		}, {
 			TouchRipple = e(TouchRipple, {
-				color = buttonTheme.ActionFillColor,
+				color = theme.ActionFillColor,
 				transparency = self.props.transparency:map(function(value)
-					return bindingUtil.blendAlpha({ buttonTheme.ActionFillTransparency, value })
+					return bindingUtil.blendAlpha({ theme.ActionFillTransparency, value })
 				end),
 				zIndex = 2,
 			}),

 			Text = e("TextLabel", {
 				Text = self.props.text,
-				FontFace = theme.Font.Main,
-				TextSize = theme.TextSize.Large,
-				TextColor3 = bindingUtil.mapLerp(
-					bindingEnabled,
-					buttonTheme.Enabled.TextColor,
-					buttonTheme.Disabled.TextColor
-				),
+				Font = Enum.Font.GothamMedium,
+				TextSize = 18,
+				TextColor3 = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.TextColor, theme.Disabled.TextColor),
 				TextTransparency = self.props.transparency,

 				Size = UDim2.new(1, 0, 1, 0),
@@ -97,11 +95,7 @@ function TextButton:render()

 			Border = style == "Bordered" and e(SlicedImage, {
 				slice = Assets.Slices.RoundedBorder,
-				color = bindingUtil.mapLerp(
-					bindingEnabled,
-					buttonTheme.Enabled.BorderColor,
-					buttonTheme.Disabled.BorderColor
-				),
+				color = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.BorderColor, theme.Disabled.BorderColor),
 				transparency = self.props.transparency,

 				size = UDim2.new(1, 0, 1, 0),
@@ -111,18 +105,14 @@ function TextButton:render()

 			HoverOverlay = e(SlicedImage, {
 				slice = Assets.Slices.RoundedBackground,
-				color = buttonTheme.ActionFillColor,
+				color = theme.ActionFillColor,
 				transparency = Roact.joinBindings({
 					hover = bindingHover:map(function(value)
 						return 1 - value
 					end),
 					transparency = self.props.transparency,
 				}):map(function(values)
-					return bindingUtil.blendAlpha({
-						buttonTheme.ActionFillTransparency,
-						values.hover,
-						values.transparency,
-					})
+					return bindingUtil.blendAlpha({ theme.ActionFillTransparency, values.hover, values.transparency })
 				end),

 				size = UDim2.new(1, 0, 1, 0),
@@ -134,8 +124,8 @@ function TextButton:render()
 				slice = Assets.Slices.RoundedBackground,
 				color = bindingUtil.mapLerp(
 					bindingEnabled,
-					buttonTheme.Enabled.BackgroundColor,
-					buttonTheme.Disabled.BackgroundColor
+					theme.Enabled.BackgroundColor,
+					theme.Disabled.BackgroundColor
 				),
 				transparency = self.props.transparency,

--- a/plugin/src/App/Components/TextInput.lua
+++ b/plugin/src/App/Components/TextInput.lua
@@ -38,18 +38,14 @@ end

 function TextInput:render()
 	return Theme.with(function(theme)
-		local textInputTheme = theme.TextInput
+		theme = theme.TextInput

 		local bindingHover = bindingUtil.deriveProperty(self.binding, "hover")
 		local bindingEnabled = bindingUtil.deriveProperty(self.binding, "enabled")

 		return e(SlicedImage, {
 			slice = Assets.Slices.RoundedBorder,
-			color = bindingUtil.mapLerp(
-				bindingEnabled,
-				textInputTheme.Enabled.BorderColor,
-				textInputTheme.Disabled.BorderColor
-			),
+			color = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.BorderColor, theme.Disabled.BorderColor),
 			transparency = self.props.transparency,

 			size = self.props.size or UDim2.new(1, 0, 1, 0),
@@ -59,18 +55,14 @@ function TextInput:render()
 		}, {
 			HoverOverlay = e(SlicedImage, {
 				slice = Assets.Slices.RoundedBackground,
-				color = textInputTheme.ActionFillColor,
+				color = theme.ActionFillColor,
 				transparency = Roact.joinBindings({
 					hover = bindingHover:map(function(value)
 						return 1 - value
 					end),
 					transparency = self.props.transparency,
 				}):map(function(values)
-					return bindingUtil.blendAlpha({
-						textInputTheme.ActionFillTransparency,
-						values.hover,
-						values.transparency,
-					})
+					return bindingUtil.blendAlpha({ theme.ActionFillTransparency, values.hover, values.transparency })
 				end),
 				size = UDim2.new(1, 0, 1, 0),
 				zIndex = -1,
@@ -80,18 +72,14 @@ function TextInput:render()
 				Size = UDim2.fromScale(1, 1),
 				Text = self.props.text,
 				PlaceholderText = self.props.placeholder,
-				FontFace = theme.Font.Main,
-				TextColor3 = bindingUtil.mapLerp(
-					bindingEnabled,
-					textInputTheme.Disabled.TextColor,
-					textInputTheme.Enabled.TextColor
-				),
+				Font = Enum.Font.GothamMedium,
+				TextColor3 = bindingUtil.mapLerp(bindingEnabled, theme.Disabled.TextColor, theme.Enabled.TextColor),
 				PlaceholderColor3 = bindingUtil.mapLerp(
 					bindingEnabled,
-					textInputTheme.Disabled.PlaceholderColor,
-					textInputTheme.Enabled.PlaceholderColor
+					theme.Disabled.PlaceholderColor,
+					theme.Enabled.PlaceholderColor
 				),
-				TextSize = theme.TextSize.Large,
+				TextSize = 18,
 				TextEditable = self.props.enabled,
 				ClearTextOnFocus = self.props.clearTextOnFocus,

--- a/plugin/src/App/Components/Tooltip.lua
+++ b/plugin/src/App/Components/Tooltip.lua
@@ -1,3 +1,4 @@
+local TextService = game:GetService("TextService")
 local HttpService = game:GetService("HttpService")

 local Rojo = script:FindFirstAncestor("Rojo")
@@ -7,8 +8,6 @@ local Packages = Rojo.Packages
 local Roact = require(Packages.Roact)
 local Theme = require(Plugin.App.Theme)

-local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
-
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)

 local e = Roact.createElement
@@ -22,48 +21,50 @@ local Y_OVERLAP = 10 -- Let the triangle tail piece overlap the target a bit to
 local TooltipContext = Roact.createContext({})

 local function Popup(props)
+	local textSize = TextService:GetTextSize(
+		props.Text,
+		16,
+		Enum.Font.GothamMedium,
+		Vector2.new(math.min(props.parentSize.X, 160), math.huge)
+	) + TEXT_PADDING + (Vector2.one * 2)
+
+	local trigger = props.Trigger:getValue()
+
+	local spaceBelow = props.parentSize.Y
+		- (trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y - Y_OVERLAP + TAIL_SIZE)
+	local spaceAbove = trigger.AbsolutePosition.Y + Y_OVERLAP - TAIL_SIZE
+
+	-- If there's not enough space below, and there's more space above, then show the tooltip above the trigger
+	local displayAbove = spaceBelow < textSize.Y and spaceAbove > spaceBelow
+
+	local X = math.clamp(props.Position.X - X_OFFSET, 0, props.parentSize.X - textSize.X)
+	local Y = 0
+
+	if displayAbove then
+		Y = math.max(trigger.AbsolutePosition.Y - TAIL_SIZE - textSize.Y + Y_OVERLAP, 0)
+	else
+		Y = math.min(
+			trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y + TAIL_SIZE - Y_OVERLAP,
+			props.parentSize.Y - textSize.Y
+		)
+	end
+
 	return Theme.with(function(theme)
-		local textXSpace = math.min(props.parentSize.X, 250) - TEXT_PADDING.X
-		local textBounds = getTextBoundsAsync(props.Text, theme.Font.Main, theme.TextSize.Medium, textXSpace)
-		local contentSize = textBounds + TEXT_PADDING + (Vector2.one * 2)
-
-		local trigger = props.Trigger:getValue()
-
-		local spaceBelow = props.parentSize.Y
-			- (trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y - Y_OVERLAP + TAIL_SIZE)
-		local spaceAbove = trigger.AbsolutePosition.Y + Y_OVERLAP - TAIL_SIZE
-
-		-- If there's not enough space below, and there's more space above, then show the tooltip above the trigger
-		local displayAbove = spaceBelow < contentSize.Y and spaceAbove > spaceBelow
-
-		local X = math.clamp(props.Position.X - X_OFFSET, 0, math.max(props.parentSize.X - contentSize.X, 1))
-		local Y = 0
-
-		if displayAbove then
-			Y = math.max(trigger.AbsolutePosition.Y - TAIL_SIZE - contentSize.Y + Y_OVERLAP, 0)
-		else
-			Y = math.min(
-				trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y + TAIL_SIZE - Y_OVERLAP,
-				props.parentSize.Y - contentSize.Y
-			)
-		end
-
 		return e(BorderedContainer, {
 			position = UDim2.fromOffset(X, Y),
-			size = UDim2.fromOffset(contentSize.X, contentSize.Y),
+			size = UDim2.fromOffset(textSize.X, textSize.Y),
 			transparency = props.transparency,
 		}, {
 			Label = e("TextLabel", {
 				BackgroundTransparency = 1,
 				Position = UDim2.fromScale(0.5, 0.5),
+				Size = UDim2.new(1, -TEXT_PADDING.X, 1, -TEXT_PADDING.Y),
 				AnchorPoint = Vector2.new(0.5, 0.5),
-				Size = UDim2.fromOffset(textBounds.X, textBounds.Y),
 				Text = props.Text,
-				TextSize = theme.TextSize.Medium,
-				FontFace = theme.Font.Main,
+				TextSize = 16,
+				Font = Enum.Font.GothamMedium,
 				TextWrapped = true,
 				TextXAlignment = Enum.TextXAlignment.Left,
-				TextYAlignment = Enum.TextYAlignment.Center,
 				TextColor3 = theme.Button.Bordered.Enabled.TextColor,
 				TextTransparency = props.transparency,
 			}),
@@ -71,8 +72,8 @@ local function Popup(props)
 			Tail = e("ImageLabel", {
 				ZIndex = 100,
 				Position = if displayAbove
-					then UDim2.new(0, math.clamp(props.Position.X - X, 6, contentSize.X - 6), 1, -1)
-					else UDim2.new(0, math.clamp(props.Position.X - X, 6, contentSize.X - 6), 0, -TAIL_SIZE + 1),
+					then UDim2.new(0, math.clamp(props.Position.X - X, 6, textSize.X - 6), 1, -1)
+					else UDim2.new(0, math.clamp(props.Position.X - X, 6, textSize.X - 6), 0, -TAIL_SIZE + 1),
 				Size = UDim2.fromOffset(TAIL_SIZE, TAIL_SIZE),
 				AnchorPoint = Vector2.new(0.5, 0),
 				Rotation = if displayAbove then 180 else 0,
@@ -216,7 +217,7 @@ function Trigger:managePopup()
 			return
 		end

-		self.showDelayThread = task.delay(self.props.delay or DELAY, function()
+		self.showDelayThread = task.delay(DELAY, function()
 			self.props.context.addTip(self.id, {
 				Text = self.props.text,
 				Position = self:getMousePos(),
--- a/plugin/src/App/Components/VirtualScroller.lua
+++ b/plugin/src/App/Components/VirtualScroller.lua
@@ -15,10 +15,8 @@ local VirtualScroller = Roact.Component:extend("VirtualScroller")
 function VirtualScroller:init()
 	self.scrollFrameRef = Roact.createRef()
 	self:setState({
-		WindowSize = Vector2.zero,
-		CanvasPosition = if self.props.canvasPosition
-			then self.props.canvasPosition:getValue() or Vector2.zero
-			else Vector2.zero,
+		WindowSize = Vector2.new(),
+		CanvasPosition = Vector2.new(),
 	})

 	self.totalCanvas, self.setTotalCanvas = Roact.createBinding(0)
@@ -43,10 +41,6 @@ function VirtualScroller:didMount()

 	local canvasPositionSignal = rbx:GetPropertyChangedSignal("CanvasPosition")
 	self.canvasPositionChanged = canvasPositionSignal:Connect(function()
-		if self.props.onCanvasPositionChanged then
-			pcall(self.props.onCanvasPositionChanged, rbx.CanvasPosition)
-		end
-
 		if math.abs(rbx.CanvasPosition.Y - self.state.CanvasPosition.Y) > 5 then
 			self:setState({ CanvasPosition = rbx.CanvasPosition })
 			self:refresh()
@@ -140,9 +134,8 @@ function VirtualScroller:render()
 			BackgroundColor3 = props.backgroundColor3 or theme.BorderedContainer.BackgroundColor,
 			BorderColor3 = props.borderColor3 or theme.BorderedContainer.BorderColor,
 			CanvasSize = self.totalCanvas:map(function(s)
-				return UDim2.fromOffset(props.canvasWidth or 0, s)
+				return UDim2.fromOffset(0, s)
 			end),
-			CanvasPosition = self.props.canvasPosition,
 			ScrollBarThickness = 9,
 			ScrollBarImageColor3 = theme.ScrollBarColor,
 			ScrollBarImageTransparency = props.transparency:map(function(value)
@@ -153,7 +146,7 @@ function VirtualScroller:render()
 			BottomImage = Assets.Images.ScrollBar.Bottom,

 			ElasticBehavior = Enum.ElasticBehavior.Always,
-			ScrollingDirection = Enum.ScrollingDirection.XY,
+			ScrollingDirection = Enum.ScrollingDirection.Y,
 			VerticalScrollBarInset = Enum.ScrollBarInset.ScrollBar,
 			[Roact.Ref] = self.scrollFrameRef,
 		}, {
--- a/plugin/src/App/Components/Notifications/Notification.lua
+++ b/plugin/src/App/Components/Notifications/Notification.lua
@@ -1,3 +1,4 @@
+local TextService = game:GetService("TextService")
 local StudioService = game:GetService("StudioService")

 local Rojo = script:FindFirstAncestor("Rojo")
@@ -8,14 +9,16 @@ local Roact = require(Packages.Roact)
 local Flipper = require(Packages.Flipper)
 local Log = require(Packages.Log)

+local bindingUtil = require(script.Parent.bindingUtil)
+
 local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
-local bindingUtil = require(Plugin.App.bindingUtil)
-local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)

 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local TextButton = require(Plugin.App.Components.TextButton)

+local baseClock = DateTime.now().UnixTimestampMillis
+
 local e = Roact.createElement

 local Notification = Roact.Component:extend("Notification")
@@ -25,7 +28,6 @@ function Notification:init()
 	self.binding = bindingUtil.fromMotor(self.motor)

 	self.lifetime = self.props.timeout
-	self.dismissed = false

 	self.motor:onStep(function(value)
 		if value <= 0 and self.props.onClose then
@@ -35,11 +37,6 @@ function Notification:init()
 end

 function Notification:dismiss()
-	if self.dismissed then
-		return
-	end
-	self.dismissed = true
-
 	self.motor:setGoal(Flipper.Spring.new(0, {
 		frequency = 5,
 		dampingRatio = 1,
@@ -81,9 +78,7 @@ function Notification:didMount()
 end

 function Notification:willUnmount()
-	if self.timeout and coroutine.status(self.timeout) == "suspended" then
-		task.cancel(self.timeout)
-	end
+	task.cancel(self.timeout)
 end

 function Notification:render()
@@ -91,49 +86,51 @@ function Notification:render()
 		return 1 - value
 	end)

-	return Theme.with(function(theme)
-		local actionButtons = {}
-		local buttonsX = 0
-		if self.props.actions then
-			local count = 0
-			for key, action in self.props.actions do
-				actionButtons[key] = e(TextButton, {
-					text = action.text,
-					style = action.style,
-					onClick = function()
-						self:dismiss()
-						if action.onClick then
-							local success, err = pcall(action.onClick, self)
-							if not success then
-								Log.warn("Error in notification action: " .. tostring(err))
-							end
-						end
-					end,
-					layoutOrder = -action.layoutOrder,
-					transparency = transparency,
-				})
+	local textBounds = TextService:GetTextSize(self.props.text, 15, Enum.Font.GothamMedium, Vector2.new(350, 700))

-				buttonsX += getTextBoundsAsync(action.text, theme.Font.Main, theme.TextSize.Large, math.huge).X + (theme.TextSize.Body * 2)
+	local actionButtons = {}
+	local buttonsX = 0
+	if self.props.actions then
+		local count = 0
+		for key, action in self.props.actions do
+			actionButtons[key] = e(TextButton, {
+				text = action.text,
+				style = action.style,
+				onClick = function()
+					local success, err = pcall(action.onClick, self)
+					if not success then
+						Log.warn("Error in notification action: " .. tostring(err))
+					end
+				end,
+				layoutOrder = -action.layoutOrder,
+				transparency = transparency,
+			})

-				count += 1
-			end
+			buttonsX += TextService:GetTextSize(
+				action.text,
+				18,
+				Enum.Font.GothamMedium,
+				Vector2.new(math.huge, math.huge)
+			).X + 30

-			buttonsX += (count - 1) * 5
+			count += 1
 		end

-		local paddingY, logoSize = 20, 32
-		local actionsY = if self.props.actions then 37 else 0
-		local textXSpace = math.max(250, buttonsX) + 35
-		local textBounds = getTextBoundsAsync(self.props.text, theme.Font.Main, theme.TextSize.Body, textXSpace)
-		local contentX = math.max(textBounds.X, buttonsX)
+		buttonsX += (count - 1) * 5
+	end

-		local size = self.binding:map(function(value)
-			return UDim2.fromOffset(
-				(35 + 40 + contentX) * value,
-				5 + actionsY + paddingY + math.max(logoSize, textBounds.Y)
-			)
-		end)
+	local paddingY, logoSize = 20, 32
+	local actionsY = if self.props.actions then 35 else 0
+	local contentX = math.max(textBounds.X, buttonsX)

+	local size = self.binding:map(function(value)
+		return UDim2.fromOffset(
+			(35 + 40 + contentX) * value,
+			5 + actionsY + paddingY + math.max(logoSize, textBounds.Y)
+		)
+	end)
+
+	return Theme.with(function(theme)
 		return e("TextButton", {
 			BackgroundTransparency = 1,
 			Size = size,
@@ -147,31 +144,31 @@ function Notification:render()
 		}, {
 			e(BorderedContainer, {
 				transparency = transparency,
-				size = UDim2.fromScale(1, 1),
+				size = UDim2.new(1, 0, 1, 0),
 			}, {
 				Contents = e("Frame", {
-					Size = UDim2.fromScale(1, 1),
+					Size = UDim2.new(0, 35 + contentX, 1, -paddingY),
+					Position = UDim2.new(0, 0, 0, paddingY / 2),
 					BackgroundTransparency = 1,
 				}, {
 					Logo = e("ImageLabel", {
 						ImageTransparency = transparency,
 						Image = Assets.Images.PluginButton,
 						BackgroundTransparency = 1,
-						Size = UDim2.fromOffset(logoSize, logoSize),
+						Size = UDim2.new(0, logoSize, 0, logoSize),
 						Position = UDim2.new(0, 0, 0, 0),
 						AnchorPoint = Vector2.new(0, 0),
 					}),
 					Info = e("TextLabel", {
 						Text = self.props.text,
-						FontFace = theme.Font.Main,
-						TextSize = theme.TextSize.Body,
+						Font = Enum.Font.GothamMedium,
+						TextSize = 15,
 						TextColor3 = theme.Notification.InfoColor,
 						TextTransparency = transparency,
 						TextXAlignment = Enum.TextXAlignment.Left,
-						TextYAlignment = Enum.TextYAlignment.Center,
 						TextWrapped = true,

-						Size = UDim2.new(0, textBounds.X, 1, -actionsY),
+						Size = UDim2.new(0, textBounds.X, 0, textBounds.Y),
 						Position = UDim2.fromOffset(35, 0),

 						LayoutOrder = 1,
@@ -179,8 +176,8 @@ function Notification:render()
 					}),
 					Actions = if self.props.actions
 						then e("Frame", {
-							Size = UDim2.new(1, -40, 0, actionsY),
-							Position = UDim2.fromScale(1, 1),
+							Size = UDim2.new(1, -40, 0, 35),
+							Position = UDim2.new(1, 0, 1, 0),
 							AnchorPoint = Vector2.new(1, 1),
 							BackgroundTransparency = 1,
 						}, {
@@ -199,12 +196,32 @@ function Notification:render()
 				Padding = e("UIPadding", {
 					PaddingLeft = UDim.new(0, 17),
 					PaddingRight = UDim.new(0, 15),
-					PaddingTop = UDim.new(0, paddingY / 2),
-					PaddingBottom = UDim.new(0, paddingY / 2),
 				}),
 			}),
 		})
 	end)
 end

-return Notification
+local Notifications = Roact.Component:extend("Notifications")
+
+function Notifications:render()
+	local notifs = {}
+
+	for id, notif in self.props.notifications do
+		notifs["NotifID_" .. id] = e(Notification, {
+			soundPlayer = self.props.soundPlayer,
+			text = notif.text,
+			timestamp = notif.timestamp,
+			timeout = notif.timeout,
+			actions = notif.actions,
+			layoutOrder = (notif.timestamp - baseClock),
+			onClose = function()
+				self.props.onClose(id)
+			end,
+		})
+	end
+
+	return Roact.createFragment(notifs)
+end
+
+return Notifications
--- a/plugin/src/App/StatusPages/Confirming.lua
+++ b/plugin/src/App/StatusPages/Confirming.lua
@@ -4,6 +4,8 @@ local Packages = Rojo.Packages

 local Roact = require(Packages.Roact)

+local Timer = require(Plugin.Timer)
+local PatchTree = require(Plugin.PatchTree)
 local Settings = require(Plugin.Settings)
 local Theme = require(Plugin.App.Theme)
 local TextButton = require(Plugin.App.Components.TextButton)
@@ -22,13 +24,36 @@ function ConfirmingPage:init()
 	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))

 	self:setState({
+		patchTree = nil,
 		showingStringDiff = false,
-		currentString = "",
-		incomingString = "",
+		oldString = "",
+		newString = "",
 		showingTableDiff = false,
 		oldTable = {},
 		newTable = {},
 	})
+
+	if self.props.confirmData and self.props.confirmData.patch and self.props.confirmData.instanceMap then
+		self:buildPatchTree()
+	end
+end
+
+function ConfirmingPage:didUpdate(prevProps)
+	if prevProps.confirmData ~= self.props.confirmData then
+		self:buildPatchTree()
+	end
+end
+
+function ConfirmingPage:buildPatchTree()
+	Timer.start("ConfirmingPage:buildPatchTree")
+	self:setState({
+		patchTree = PatchTree.build(
+			self.props.confirmData.patch,
+			self.props.confirmData.instanceMap,
+			{ "Property", "Current", "Incoming" }
+		),
+	})
+	Timer.stop()
 end

 function ConfirmingPage:render()
@@ -39,13 +64,13 @@ function ConfirmingPage:render()
 					"Sync changes for project '%s':",
 					self.props.confirmData.serverInfo.projectName or "UNKNOWN"
 				),
-				FontFace = theme.Font.Thin,
+				Font = Enum.Font.Gotham,
 				LineHeight = 1.2,
-				TextSize = theme.TextSize.Body,
+				TextSize = 14,
 				TextColor3 = theme.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = self.props.transparency,
-				Size = UDim2.new(1, 0, 0, theme.TextSize.Large + 2),
+				Size = UDim2.new(1, 0, 0, 20),
 				BackgroundTransparency = 1,
 			}),

@@ -54,13 +79,13 @@ function ConfirmingPage:render()
 				transparency = self.props.transparency,
 				layoutOrder = 3,

-				patchTree = self.props.patchTree,
+				patchTree = self.state.patchTree,

-				showStringDiff = function(currentString: string, incomingString: string)
+				showStringDiff = function(oldString: string, newString: string)
 					self:setState({
 						showingStringDiff = true,
-						currentString = currentString,
-						incomingString = incomingString,
+						oldString = oldString,
+						newString = newString,
 					})
 				end,
 				showTableDiff = function(oldTable: { [any]: any? }, newTable: { [any]: any? })
@@ -167,8 +192,8 @@ function ConfirmingPage:render()
 							anchorPoint = Vector2.new(0, 0),
 							transparency = self.props.transparency,

-							currentString = self.state.currentString,
-							incomingString = self.state.incomingString,
+							oldString = self.state.oldString,
+							newString = self.state.newString,
 						}),
 					}),
 				}),
--- a/plugin/src/App/StatusPages/Connected.lua
+++ b/plugin/src/App/StatusPages/Connected.lua
@@ -61,12 +61,12 @@ function ChangesViewer:render()

 				Title = e("TextLabel", {
 					Text = "Sync",
-					FontFace = theme.Font.Main,
-					TextSize = theme.TextSize.Large,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 17,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextColor3 = theme.TextColor,
 					TextTransparency = self.props.transparency,
-					Size = UDim2.new(1, -40, 0, theme.TextSize.Large + 2),
+					Size = UDim2.new(1, -40, 0, 20),
 					Position = UDim2.new(0, 40, 0, 0),
 					BackgroundTransparency = 1,
 				}),
@@ -74,13 +74,13 @@ function ChangesViewer:render()
 				Subtitle = e("TextLabel", {
 					Text = DateTime.fromUnixTimestamp(self.props.patchData.timestamp):FormatLocalTime("LTS", "en-us"),
 					TextXAlignment = Enum.TextXAlignment.Left,
-					FontFace = theme.Font.Thin,
-					TextSize = theme.TextSize.Medium,
+					Font = Enum.Font.Gotham,
+					TextSize = 15,
 					TextColor3 = theme.SubTextColor,
 					TextTruncate = Enum.TextTruncate.AtEnd,
 					TextTransparency = self.props.transparency,
-					Size = UDim2.new(1, -40, 0, theme.TextSize.Medium),
-					Position = UDim2.new(0, 40, 0, theme.TextSize.Large + 2),
+					Size = UDim2.new(1, -40, 0, 16),
+					Position = UDim2.new(0, 40, 0, 20),
 					BackgroundTransparency = 1,
 				}),

@@ -131,8 +131,8 @@ function ChangesViewer:render()
 						}),
 						AppliedText = e("TextLabel", {
 							Text = applied,
-							FontFace = theme.Font.Thin,
-							TextSize = theme.TextSize.Body,
+							Font = Enum.Font.Gotham,
+							TextSize = 15,
 							TextColor3 = theme.TextColor,
 							TextTransparency = self.props.transparency,
 							Size = UDim2.new(0, 0, 1, 0),
@@ -156,8 +156,8 @@ function ChangesViewer:render()
 								}),
 								UnappliedText = e("TextLabel", {
 									Text = unapplied,
-									FontFace = theme.Font.Thin,
-									TextSize = theme.TextSize.Body,
+									Font = Enum.Font.Gotham,
+									TextSize = 15,
 									TextColor3 = theme.Diff.Warning,
 									TextTransparency = self.props.transparency,
 									Size = UDim2.new(0, 0, 1, 0),
@@ -217,13 +217,13 @@ local function ConnectionDetails(props)
 			}, {
 				ProjectName = e("TextLabel", {
 					Text = props.projectName,
-					FontFace = theme.Font.Bold,
-					TextSize = theme.TextSize.Large,
+					Font = Enum.Font.GothamBold,
+					TextSize = 20,
 					TextColor3 = theme.ConnectionDetails.ProjectNameColor,
 					TextTransparency = props.transparency,
 					TextXAlignment = Enum.TextXAlignment.Left,

-					Size = UDim2.new(1, 0, 0, theme.TextSize.Large),
+					Size = UDim2.new(1, 0, 0, 20),

 					LayoutOrder = 1,
 					BackgroundTransparency = 1,
@@ -231,13 +231,13 @@ local function ConnectionDetails(props)

 				Address = e("TextLabel", {
 					Text = props.address,
-					FontFace = theme.Font.Code,
-					TextSize = theme.TextSize.Medium,
+					Font = Enum.Font.Code,
+					TextSize = 15,
 					TextColor3 = theme.ConnectionDetails.AddressColor,
 					TextTransparency = props.transparency,
 					TextXAlignment = Enum.TextXAlignment.Left,

-					Size = UDim2.new(1, 0, 0, theme.TextSize.Medium),
+					Size = UDim2.new(1, 0, 0, 15),

 					LayoutOrder = 2,
 					BackgroundTransparency = 1,
@@ -307,8 +307,8 @@ function ConnectedPage:init()
 		renderChanges = false,
 		hoveringChangeInfo = false,
 		showingStringDiff = false,
-		currentString = "",
-		incomingString = "",
+		oldString = "",
+		newString = "",
 	})

 	self.changeInfoText, self.setChangeInfoText = Roact.createBinding("")
@@ -410,8 +410,8 @@ function ConnectedPage:render()
 						Text = e("TextLabel", {
 							BackgroundTransparency = 1,
 							Text = self.changeInfoText,
-							FontFace = theme.Font.Thin,
-							TextSize = theme.TextSize.Body,
+							Font = Enum.Font.Gotham,
+							TextSize = 15,
 							TextColor3 = if syncWarning then theme.Diff.Warning else theme.Header.VersionColor,
 							TextTransparency = self.props.transparency,
 							TextXAlignment = Enum.TextXAlignment.Right,
@@ -511,11 +511,11 @@ function ConnectedPage:render()
 							patchData = self.props.patchData,
 							patchTree = self.props.patchTree,
 							serveSession = self.props.serveSession,
-							showStringDiff = function(currentString: string, incomingString: string)
+							showStringDiff = function(oldString: string, newString: string)
 								self:setState({
 									showingStringDiff = true,
-									currentString = currentString,
-									incomingString = incomingString,
+									oldString = oldString,
+									newString = newString,
 								})
 							end,
 							showTableDiff = function(oldTable: { [any]: any? }, newTable: { [any]: any? })
@@ -566,8 +566,8 @@ function ConnectedPage:render()
 							anchorPoint = Vector2.new(0, 0),
 							transparency = self.props.transparency,

-							currentString = self.state.currentString,
-							incomingString = self.state.incomingString,
+							oldString = self.state.oldString,
+							newString = self.state.newString,
 						}),
 					}),
 				}),
--- a/plugin/src/App/StatusPages/Connecting.lua
+++ b/plugin/src/App/StatusPages/Connecting.lua
@@ -4,8 +4,6 @@ local Packages = Rojo.Packages

 local Roact = require(Packages.Roact)

-local Theme = require(Plugin.App.Theme)
-
 local Spinner = require(Plugin.App.Components.Spinner)

 local e = Roact.createElement
@@ -13,35 +11,11 @@ local e = Roact.createElement
 local ConnectingPage = Roact.Component:extend("ConnectingPage")

 function ConnectingPage:render()
-	return Theme.with(function(theme)
-		return e("Frame", {
-			Size = UDim2.new(1, 0, 1, 0),
-			BackgroundTransparency = 1,
-		}, {
-			Spinner = e(Spinner, {
-				position = UDim2.new(0.5, 0, 0.5, 0),
-				anchorPoint = Vector2.new(0.5, 0.5),
-				transparency = self.props.transparency,
-			}),
-			Text = if type(self.props.text) == "string" and #self.props.text > 0
-				then e("TextLabel", {
-					Text = self.props.text,
-					Position = UDim2.new(0.5, 0, 0.5, 30),
-					Size = UDim2.new(1, -40, 0.5, -40),
-					AnchorPoint = Vector2.new(0.5, 0),
-					TextXAlignment = Enum.TextXAlignment.Center,
-					TextYAlignment = Enum.TextYAlignment.Top,
-					RichText = true,
-					FontFace = theme.Font.Thin,
-					TextSize = theme.TextSize.Medium,
-					TextColor3 = theme.SubTextColor,
-					TextTruncate = Enum.TextTruncate.AtEnd,
-					TextTransparency = self.props.transparency,
-					BackgroundTransparency = 1,
-				})
-				else nil,
-		})
-	end)
+	return e(Spinner, {
+		position = UDim2.new(0.5, 0, 0.5, 0),
+		anchorPoint = Vector2.new(0.5, 0.5),
+		transparency = self.props.transparency,
+	})
 end

 return ConnectingPage
--- a/plugin/src/App/StatusPages/Error.lua
+++ b/plugin/src/App/StatusPages/Error.lua
@@ -1,3 +1,5 @@
+local TextService = game:GetService("TextService")
+
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -5,10 +7,8 @@ local Packages = Rojo.Packages
 local Roact = require(Packages.Roact)

 local Theme = require(Plugin.App.Theme)
-local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)

 local TextButton = require(Plugin.App.Components.TextButton)
-local Header = require(Plugin.App.Components.Header)
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
 local Tooltip = require(Plugin.App.Components.Tooltip)
@@ -24,44 +24,43 @@ function Error:init()
 end

 function Error:render()
-	return Theme.with(function(theme)
-		return e(BorderedContainer, {
-			size = Roact.joinBindings({
-				containerSize = self.props.containerSize,
-				contentSize = self.contentSize,
-			}):map(function(values)
-				local maximumSize = values.containerSize
-				maximumSize -= Vector2.new(14, 14) * 2 -- Page padding
-				maximumSize -= Vector2.new(0, 34 + 10) -- Buttons and spacing
+	return e(BorderedContainer, {
+		size = Roact.joinBindings({
+			containerSize = self.props.containerSize,
+			contentSize = self.contentSize,
+		}):map(function(values)
+			local maximumSize = values.containerSize
+			maximumSize -= Vector2.new(14, 14) * 2 -- Page padding
+			maximumSize -= Vector2.new(0, 34 + 10) -- Buttons and spacing

-				local outerSize = values.contentSize + ERROR_PADDING * 2
+			local outerSize = values.contentSize + ERROR_PADDING * 2

-				return UDim2.new(1, 0, 0, math.min(outerSize.Y, maximumSize.Y))
+			return UDim2.new(1, 0, 0, math.min(outerSize.Y, maximumSize.Y))
+		end),
+		transparency = self.props.transparency,
+	}, {
+		ScrollingFrame = e(ScrollingFrame, {
+			size = UDim2.new(1, 0, 1, 0),
+			contentSize = self.contentSize:map(function(value)
+				return value + ERROR_PADDING * 2
 			end),
 			transparency = self.props.transparency,
-			layoutOrder = self.props.layoutOrder,
+
+			[Roact.Change.AbsoluteSize] = function(object)
+				local containerSize = object.AbsoluteSize - ERROR_PADDING * 2
+
+				local textBounds = TextService:GetTextSize(
+					self.props.errorMessage,
+					16,
+					Enum.Font.Code,
+					Vector2.new(containerSize.X, math.huge)
+				)
+
+				self.setContentSize(Vector2.new(containerSize.X, textBounds.Y))
+			end,
 		}, {
-			ScrollingFrame = e(ScrollingFrame, {
-				size = UDim2.new(1, 0, 1, 0),
-				contentSize = self.contentSize:map(function(value)
-					return value + ERROR_PADDING * 2
-				end),
-				transparency = self.props.transparency,
-
-				[Roact.Change.AbsoluteSize] = function(object)
-					local containerSize = object.AbsoluteSize - ERROR_PADDING * 2
-
-					local textBounds = getTextBoundsAsync(
-						self.props.errorMessage,
-						theme.Font.Code,
-						theme.TextSize.Code,
-						containerSize.X
-					)
-
-					self.setContentSize(Vector2.new(containerSize.X, textBounds.Y))
-				end,
-			}, {
-				ErrorMessage = e("TextBox", {
+			ErrorMessage = Theme.with(function(theme)
+				return e("TextBox", {
 					[Roact.Event.InputBegan] = function(rbx, input)
 						if input.UserInputType ~= Enum.UserInputType.MouseButton1 then
 							return
@@ -72,8 +71,8 @@ function Error:render()

 					Text = self.props.errorMessage,
 					TextEditable = false,
-					FontFace = theme.Font.Code,
-					TextSize = theme.TextSize.Code,
+					Font = Enum.Font.Code,
+					TextSize = 16,
 					TextColor3 = theme.ErrorColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextYAlignment = Enum.TextYAlignment.Top,
@@ -82,17 +81,17 @@ function Error:render()
 					ClearTextOnFocus = false,
 					BackgroundTransparency = 1,
 					Size = UDim2.new(1, 0, 1, 0),
-				}),
+				})
+			end),

-				Padding = e("UIPadding", {
-					PaddingLeft = UDim.new(0, ERROR_PADDING.X),
-					PaddingRight = UDim.new(0, ERROR_PADDING.X),
-					PaddingTop = UDim.new(0, ERROR_PADDING.Y),
-					PaddingBottom = UDim.new(0, ERROR_PADDING.Y),
-				}),
+			Padding = e("UIPadding", {
+				PaddingLeft = UDim.new(0, ERROR_PADDING.X),
+				PaddingRight = UDim.new(0, ERROR_PADDING.X),
+				PaddingTop = UDim.new(0, ERROR_PADDING.Y),
+				PaddingBottom = UDim.new(0, ERROR_PADDING.Y),
 			}),
-		})
-	end)
+		}),
+	})
 end

 local ErrorPage = Roact.Component:extend("ErrorPage")
@@ -110,21 +109,16 @@ function ErrorPage:render()
 			self.setContainerSize(object.AbsoluteSize)
 		end,
 	}, {
-		Header = e(Header, {
-			transparency = self.props.transparency,
-			layoutOrder = 1,
-		}),
-
 		Error = e(Error, {
 			errorMessage = self.state.errorMessage,
 			containerSize = self.containerSize,
 			transparency = self.props.transparency,
-			layoutOrder = 2,
+			layoutOrder = 1,
 		}),

 		Buttons = e("Frame", {
 			Size = UDim2.new(1, 0, 0, 35),
-			LayoutOrder = 3,
+			LayoutOrder = 2,
 			BackgroundTransparency = 1,
 		}, {
 			Close = e(TextButton, {
--- a/plugin/src/App/StatusPages/NotConnected.lua
+++ b/plugin/src/App/StatusPages/NotConnected.lua
@@ -27,8 +27,8 @@ local function AddressEntry(props)
 		}, {
 			Host = e("TextBox", {
 				Text = props.host or "",
-				FontFace = theme.Font.Code,
-				TextSize = theme.TextSize.Large,
+				Font = Enum.Font.Code,
+				TextSize = 18,
 				TextColor3 = theme.AddressEntry.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
@@ -51,8 +51,8 @@ local function AddressEntry(props)

 			Port = e("TextBox", {
 				Text = props.port or "",
-				FontFace = theme.Font.Code,
-				TextSize = theme.TextSize.Large,
+				Font = Enum.Font.Code,
+				TextSize = 18,
 				TextColor3 = theme.AddressEntry.TextColor,
 				TextTransparency = props.transparency,
 				PlaceholderText = Config.defaultPort,
--- a/plugin/src/App/StatusPages/Settings/Setting.lua
+++ b/plugin/src/App/StatusPages/Settings/Setting.lua
@@ -1,3 +1,5 @@
+local TextService = game:GetService("TextService")
+
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -7,7 +9,6 @@ local Roact = require(Packages.Roact)
 local Settings = require(Plugin.Settings)
 local Assets = require(Plugin.Assets)
 local Theme = require(Plugin.App.Theme)
-local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)

 local Checkbox = require(Plugin.App.Components.Checkbox)
 local Dropdown = require(Plugin.App.Components.Dropdown)
@@ -30,16 +31,10 @@ local TAG_TYPES = {
 	},
 }

-local function getTextBoundsWithLineHeight(
-	text: string,
-	font: Font,
-	textSize: number,
-	width: number,
-	lineHeight: number
-)
-	local textBounds = getTextBoundsAsync(text, font, textSize, width)
+local function getTextBounds(text, textSize, font, lineHeight, bounds)
+	local textBounds = TextService:GetTextSize(text, textSize, font, bounds)

-	local lineCount = math.ceil(textBounds.Y / textSize)
+	local lineCount = textBounds.Y / textSize
 	local lineHeightAbsolute = textSize * lineHeight

 	return Vector2.new(textBounds.X, lineHeightAbsolute * lineCount - (lineHeightAbsolute - textSize))
@@ -114,7 +109,6 @@ function Setting:render()
 					then self.props.input
 					elseif self.props.options ~= nil then e(Dropdown, {
 						locked = self.props.locked,
-						lockedTooltip = self.props.lockedTooltip,
 						options = self.props.options,
 						active = self.state.setting,
 						transparency = self.props.transparency,
@@ -124,7 +118,6 @@ function Setting:render()
 					})
 					else e(Checkbox, {
 						locked = self.props.locked,
-						lockedTooltip = self.props.lockedTooltip,
 						active = self.state.setting,
 						transparency = self.props.transparency,
 						onClick = function()
@@ -152,7 +145,7 @@ function Setting:render()
 				BackgroundTransparency = 1,
 			}, {
 				Heading = e("Frame", {
-					Size = UDim2.new(1, 0, 0, theme.TextSize.Medium),
+					Size = UDim2.new(1, 0, 0, 16),
 					BackgroundTransparency = 1,
 				}, {
 					Layout = e("UIListLayout", {
@@ -172,8 +165,8 @@ function Setting:render()
 						else nil,
 					Name = e("TextLabel", {
 						Text = self.props.name,
-						FontFace = theme.Font.Bold,
-						TextSize = theme.TextSize.Medium,
+						Font = Enum.Font.GothamBold,
+						TextSize = 16,
 						TextColor3 = if self.props.tag and TAG_TYPES[self.props.tag]
 							then getThemeColorFromPath(theme, TAG_TYPES[self.props.tag].color)
 							else settingsTheme.Setting.NameColor,
@@ -181,7 +174,7 @@ function Setting:render()
 						TextTransparency = self.props.transparency,
 						RichText = true,

-						Size = UDim2.new(1, 0, 0, theme.TextSize.Medium),
+						Size = UDim2.new(1, 0, 0, 16),

 						LayoutOrder = 2,
 						BackgroundTransparency = 1,
@@ -190,9 +183,9 @@ function Setting:render()

 				Description = e("TextLabel", {
 					Text = self.props.description,
-					FontFace = theme.Font.Main,
+					Font = Enum.Font.Gotham,
 					LineHeight = 1.2,
-					TextSize = theme.TextSize.Body,
+					TextSize = 14,
 					TextColor3 = settingsTheme.Setting.DescriptionColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = self.props.transparency,
@@ -204,12 +197,12 @@ function Setting:render()
 						inputSize = self.inputSize,
 					}):map(function(values)
 						local offset = values.inputSize.X + 5
-						local textBounds = getTextBoundsWithLineHeight(
+						local textBounds = getTextBounds(
 							self.props.description,
-							theme.Font.Main,
-							theme.TextSize.Body,
-							values.containerSize.X - offset,
-							1.2
+							14,
+							Enum.Font.Gotham,
+							1.2,
+							Vector2.new(values.containerSize.X - offset, math.huge)
 						)
 						return UDim2.new(1, -offset, 0, textBounds.Y)
 					end),
--- a/plugin/src/App/StatusPages/Settings/init.lua
+++ b/plugin/src/App/StatusPages/Settings/init.lua
@@ -27,11 +27,10 @@ end

 local invertedLevels = invertTbl(Log.Level)
 local confirmationBehaviors = { "Initial", "Always", "Large Changes", "Unlisted PlaceId", "Never" }
-local syncReminderModes = { "None", "Notify", "Fullscreen" }

 local function Navbar(props)
 	return Theme.with(function(theme)
-		local navbarTheme = theme.Settings.Navbar
+		theme = theme.Settings.Navbar

 		return e("Frame", {
 			Size = UDim2.new(1, 0, 0, 46),
@@ -41,7 +40,7 @@ local function Navbar(props)
 			Back = e(IconButton, {
 				icon = Assets.Images.Icons.Back,
 				iconSize = 24,
-				color = navbarTheme.BackButtonColor,
+				color = theme.BackButtonColor,
 				transparency = props.transparency,

 				position = UDim2.new(0, 0, 0.5, 0),
@@ -56,9 +55,9 @@ local function Navbar(props)

 			Text = e("TextLabel", {
 				Text = "Settings",
-				FontFace = theme.Font.Thin,
-				TextSize = theme.TextSize.Large,
-				TextColor3 = navbarTheme.TextColor,
+				Font = Enum.Font.Gotham,
+				TextSize = 18,
+				TextColor3 = theme.TextColor,
 				TextTransparency = props.transparency,

 				Size = UDim2.new(1, 0, 1, 0),
@@ -82,211 +81,185 @@ function SettingsPage:render()
 		return layoutOrder
 	end

-	return Roact.createFragment({
-		Navbar = e(Navbar, {
-			onBack = self.props.onBack,
-			transparency = self.props.transparency,
-			layoutOrder = layoutIncrement(),
-		}),
-		Content = e(ScrollingFrame, {
-			size = UDim2.new(1, 0, 1, -47),
-			position = UDim2.new(0, 0, 0, 47),
-			contentSize = self.contentSize,
-			transparency = self.props.transparency,
-		}, {
-			AutoReconnect = e(Setting, {
-				id = "autoReconnect",
-				name = "Auto Reconnect",
-				description = "Reconnect to server on place open if the served project matches the last sync to the place",
+	return Theme.with(function(theme)
+		theme = theme.Settings
+
+		return Roact.createFragment({
+			Navbar = e(Navbar, {
+				onBack = self.props.onBack,
 				transparency = self.props.transparency,
 				layoutOrder = layoutIncrement(),
 			}),
-
-			ShowNotifications = e(Setting, {
-				id = "showNotifications",
-				name = "Show Notifications",
-				description = "Popup notifications in viewport",
+			Content = e(ScrollingFrame, {
+				size = UDim2.new(1, 0, 1, -47),
+				position = UDim2.new(0, 0, 0, 47),
+				contentSize = self.contentSize,
 				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
-
-			SyncReminderMode = e(Setting, {
-				id = "syncReminderMode",
-				name = "Sync Reminder",
-				description = "What type of reminders you receive for syncing your project",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-				visible = Settings:getBinding("showNotifications"),
-
-				options = syncReminderModes,
-			}),
-
-			SyncReminderPolling = e(Setting, {
-				id = "syncReminderPolling",
-				name = "Sync Reminder Polling",
-				description = "Look for available sync servers periodically",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-				visible = Settings:getBindings("syncReminderMode", "showNotifications"):map(function(values)
-					return values.syncReminderMode ~= "None" and values.showNotifications
-				end),
-			}),
-
-			ConfirmationBehavior = e(Setting, {
-				id = "confirmationBehavior",
-				name = "Confirmation Behavior",
-				description = "When to prompt for confirmation before syncing",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-
-				options = confirmationBehaviors,
-			}),
-
-			LargeChangesConfirmationThreshold = e(Setting, {
-				id = "largeChangesConfirmationThreshold",
-				name = "Confirmation Threshold",
-				description = "How many modified instances to be considered a large change",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-				visible = Settings:getBinding("confirmationBehavior"):map(function(value)
-					return value == "Large Changes"
-				end),
-				input = e(TextInput, {
-					size = UDim2.new(0, 40, 0, 28),
-					text = Settings:getBinding("largeChangesConfirmationThreshold"):map(function(value)
-						return tostring(value)
-					end),
+			}, {
+				ShowNotifications = e(Setting, {
+					id = "showNotifications",
+					name = "Show Notifications",
+					description = "Popup notifications in viewport",
 					transparency = self.props.transparency,
-					enabled = true,
-					onEntered = function(text)
-						local number = tonumber(string.match(text, "%d+"))
-						if number then
-							Settings:set("largeChangesConfirmationThreshold", math.clamp(number, 1, 999))
-						else
-							-- Force text back to last valid value
-							Settings:set(
-								"largeChangesConfirmationThreshold",
-								Settings:get("largeChangesConfirmationThreshold")
-							)
-						end
+					layoutOrder = layoutIncrement(),
+				}),
+
+				SyncReminder = e(Setting, {
+					id = "syncReminder",
+					name = "Sync Reminder",
+					description = "Notify to sync when opening a place that has previously been synced",
+					transparency = self.props.transparency,
+					visible = Settings:getBinding("showNotifications"),
+					layoutOrder = layoutIncrement(),
+				}),
+
+				ConfirmationBehavior = e(Setting, {
+					id = "confirmationBehavior",
+					name = "Confirmation Behavior",
+					description = "When to prompt for confirmation before syncing",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+
+					options = confirmationBehaviors,
+				}),
+
+				LargeChangesConfirmationThreshold = e(Setting, {
+					id = "largeChangesConfirmationThreshold",
+					name = "Confirmation Threshold",
+					description = "How many modified instances to be considered a large change",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+					visible = Settings:getBinding("confirmationBehavior"):map(function(value)
+						return value == "Large Changes"
+					end),
+					input = e(TextInput, {
+						size = UDim2.new(0, 40, 0, 28),
+						text = Settings:getBinding("largeChangesConfirmationThreshold"):map(function(value)
+							return tostring(value)
+						end),
+						transparency = self.props.transparency,
+						enabled = true,
+						onEntered = function(text)
+							local number = tonumber(string.match(text, "%d+"))
+							if number then
+								Settings:set("largeChangesConfirmationThreshold", math.clamp(number, 1, 999))
+							else
+								-- Force text back to last valid value
+								Settings:set(
+									"largeChangesConfirmationThreshold",
+									Settings:get("largeChangesConfirmationThreshold")
+								)
+							end
+						end,
+					}),
+				}),
+
+				PlaySounds = e(Setting, {
+					id = "playSounds",
+					name = "Play Sounds",
+					description = "Toggle sound effects",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				CheckForUpdates = e(Setting, {
+					id = "checkForUpdates",
+					name = "Check For Updates",
+					description = "Notify about newer compatible Rojo releases",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				CheckForPreleases = e(Setting, {
+					id = "checkForPrereleases",
+					name = "Include Prerelease Updates",
+					description = "Include prereleases when checking for updates",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+					visible = if string.find(debug.traceback(), "\n[^\n]-user_.-$") == nil
+						then false -- Must be a local install to allow prerelease checks
+						else Settings:getBinding("checkForUpdates"),
+				}),
+
+				AutoConnectPlaytestServer = e(Setting, {
+					id = "autoConnectPlaytestServer",
+					name = "Auto Connect Playtest Server",
+					description = "Automatically connect game server to Rojo when playtesting while connected in Edit",
+					tag = "unstable",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				OpenScriptsExternally = e(Setting, {
+					id = "openScriptsExternally",
+					name = "Open Scripts Externally",
+					description = "Attempt to open scripts in an external editor",
+					tag = "unstable",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				TwoWaySync = e(Setting, {
+					id = "twoWaySync",
+					name = "Two-Way Sync",
+					description = "Editing files in Studio will sync them into the filesystem",
+					locked = self.props.syncActive,
+					tag = "unstable",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				LogLevel = e(Setting, {
+					id = "logLevel",
+					name = "Log Level",
+					description = "Plugin output verbosity level",
+					tag = "debug",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+
+					options = invertedLevels,
+					showReset = Settings:getBinding("logLevel"):map(function(value)
+						return value ~= "Info"
+					end),
+					onReset = function()
+						Settings:set("logLevel", "Info")
 					end,
 				}),
+
+				TypecheckingEnabled = e(Setting, {
+					id = "typecheckingEnabled",
+					name = "Typechecking",
+					description = "Toggle typechecking on the API surface",
+					tag = "debug",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				TimingLogsEnabled = e(Setting, {
+					id = "timingLogsEnabled",
+					name = "Timing Logs",
+					description = "Toggle logging timing of internal actions for benchmarking Rojo performance",
+					tag = "debug",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				Layout = e("UIListLayout", {
+					FillDirection = Enum.FillDirection.Vertical,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+
+					[Roact.Change.AbsoluteContentSize] = function(object)
+						self.setContentSize(object.AbsoluteContentSize)
+					end,
+				}),
+
+				Padding = e("UIPadding", {
+					PaddingLeft = UDim.new(0, 20),
+					PaddingRight = UDim.new(0, 20),
+				}),
 			}),
-
-			PlaySounds = e(Setting, {
-				id = "playSounds",
-				name = "Play Sounds",
-				description = "Toggle sound effects",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
-
-			EnableSyncFallback = e(Setting, {
-				id = "enableSyncFallback",
-				name = "Enable Sync Fallback",
-				description = "Whether Instances that fail to sync are remade as a fallback. If this is enabled, Instances may be destroyed and remade when syncing.",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
-
-			CheckForUpdates = e(Setting, {
-				id = "checkForUpdates",
-				name = "Check For Updates",
-				description = "Notify about newer compatible Rojo releases",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
-
-			CheckForPreleases = e(Setting, {
-				id = "checkForPrereleases",
-				name = "Include Prerelease Updates",
-				description = "Include prereleases when checking for updates",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-				visible = if string.find(debug.traceback(), "\n[^\n]-user_.-$") == nil
-					then false -- Must be a local install to allow prerelease checks
-					else Settings:getBinding("checkForUpdates"),
-			}),
-
-			AutoConnectPlaytestServer = e(Setting, {
-				id = "autoConnectPlaytestServer",
-				name = "Auto Connect Playtest Server",
-				description = "Automatically connect game server to Rojo when playtesting while connected in Edit",
-				tag = "unstable",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
-
-			OpenScriptsExternally = e(Setting, {
-				id = "openScriptsExternally",
-				name = "Open Scripts Externally",
-				description = "Attempt to open scripts in an external editor",
-				tag = "unstable",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
-
-			TwoWaySync = e(Setting, {
-				id = "twoWaySync",
-				name = "Two-Way Sync",
-				description = "Editing files in Studio will sync them into the filesystem",
-				locked = self.props.syncActive,
-				lockedTooltip = "(Cannot change while currently syncing. Disconnect first.)",
-				tag = "unstable",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
-
-			LogLevel = e(Setting, {
-				id = "logLevel",
-				name = "Log Level",
-				description = "Plugin output verbosity level",
-				tag = "debug",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-
-				options = invertedLevels,
-				showReset = Settings:getBinding("logLevel"):map(function(value)
-					return value ~= "Info"
-				end),
-				onReset = function()
-					Settings:set("logLevel", "Info")
-				end,
-			}),
-
-			TypecheckingEnabled = e(Setting, {
-				id = "typecheckingEnabled",
-				name = "Typechecking",
-				description = "Toggle typechecking on the API surface",
-				tag = "debug",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
-
-			TimingLogsEnabled = e(Setting, {
-				id = "timingLogsEnabled",
-				name = "Timing Logs",
-				description = "Toggle logging timing of internal actions for benchmarking Rojo performance",
-				tag = "debug",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
-
-			Layout = e("UIListLayout", {
-				FillDirection = Enum.FillDirection.Vertical,
-				SortOrder = Enum.SortOrder.LayoutOrder,
-
-				[Roact.Change.AbsoluteContentSize] = function(object)
-					self.setContentSize(object.AbsoluteContentSize)
-				end,
-			}),
-
-			Padding = e("UIPadding", {
-				PaddingLeft = UDim.new(0, 20),
-				PaddingRight = UDim.new(0, 20),
-			}),
-		}),
-	})
+		})
+	end)
 end

 return SettingsPage
--- a/plugin/src/App/Theme.lua
+++ b/plugin/src/App/Theme.lua
@@ -1,6 +1,7 @@
 --[[
-	Theming system provided through Roact's context.
-	Uses Studio colors when possible.
+	Theming system taking advantage of Roact's new context API.
+	Doesn't use colors provided by Studio and instead just branches on theme
+	name. This isn't exactly best practice.
 ]]

 -- Studio does not exist outside Roblox Studio, so we'll lazily initialize it
@@ -14,8 +15,6 @@ local function getStudio()
 	return _Studio
 end

-local ContentProvider = game:GetService("ContentProvider")
-
 local Rojo = script:FindFirstAncestor("Rojo")
 local Packages = Rojo.Packages

@@ -36,27 +35,6 @@ function StudioProvider:updateTheme()
 	local isDark = studioTheme.Name == "Dark"

 	local theme = strict(studioTheme.Name .. "Theme", {
-		Font = {
-			Main = Font.new("rbxasset://fonts/families/Montserrat.json", Enum.FontWeight.Medium, Enum.FontStyle.Normal),
-			Bold = Font.new("rbxasset://fonts/families/Montserrat.json", Enum.FontWeight.Bold, Enum.FontStyle.Normal),
-			Thin = Font.new(
-				"rbxasset://fonts/families/Montserrat.json",
-				Enum.FontWeight.Regular,
-				Enum.FontStyle.Normal
-			),
-			Code = Font.new(
-				"rbxasset://fonts/families/Inconsolata.json",
-				Enum.FontWeight.Regular,
-				Enum.FontStyle.Normal
-			),
-		},
-		TextSize = {
-			Body = 15,
-			Small = 13,
-			Medium = 16,
-			Large = 18,
-			Code = 16,
-		},
 		BrandColor = BRAND_COLOR,
 		BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainBackground),
 		TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText),
@@ -165,29 +143,12 @@ function StudioProvider:updateTheme()
 			BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.InputFieldBackground),
 		},
 		Diff = {
-			-- Very bright different colors in case some places were not updated to use
-			-- the new background diff colors.
-			Add = Color3.fromRGB(255, 0, 255),
-			Remove = Color3.fromRGB(255, 0, 255),
-			Edit = Color3.fromRGB(255, 0, 255),
-
+			-- Studio doesn't have good colors since their diffs use backgrounds, not text
+			Add = if isDark then Color3.fromRGB(143, 227, 154) else Color3.fromRGB(41, 164, 45),
+			Remove = if isDark then Color3.fromRGB(242, 125, 125) else Color3.fromRGB(150, 29, 29),
+			Edit = if isDark then Color3.fromRGB(120, 154, 248) else Color3.fromRGB(0, 70, 160),
 			Row = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
 			Warning = studioTheme:GetColor(Enum.StudioStyleGuideColor.WarningText),
-
-			Background = {
-				-- Studio doesn't have good colors since their diffs use backgrounds, not text
-				Add = if isDark then Color3.fromRGB(143, 227, 154) else Color3.fromRGB(41, 164, 45),
-				Remove = if isDark then Color3.fromRGB(242, 125, 125) else Color3.fromRGB(150, 29, 29),
-				Edit = if isDark then Color3.fromRGB(120, 154, 248) else Color3.fromRGB(0, 70, 160),
-				Remain = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-			},
-
-			Text = {
-				Add = if isDark then Color3.new(0, 0, 0) else Color3.new(1, 1, 1),
-				Remove = if isDark then Color3.new(0, 0, 0) else Color3.new(1, 1, 1),
-				Edit = if isDark then Color3.new(0, 0, 0) else Color3.new(1, 1, 1),
-				Remain = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText),
-			},
 		},
 		ConnectionDetails = {
 			ProjectNameColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
@@ -229,13 +190,6 @@ end

 function StudioProvider:init()
 	self:updateTheme()
-
-	-- Preload the Fonts so that getTextBoundsAsync won't yield
-	local fontAssetIds = {}
-	for _, font in self.state.theme.Font do
-		table.insert(fontAssetIds, font.Family)
-	end
-	pcall(ContentProvider.PreloadAsync, ContentProvider, fontAssetIds)
 end

 function StudioProvider:render()
--- a/plugin/src/App/bindingUtil.lua
+++ b/plugin/src/App/bindingUtil.lua
@@ -44,7 +44,7 @@ end
 local function blendAlpha(alphaValues)
 	local alpha = 0

-	for _, value in alphaValues do
+	for _, value in pairs(alphaValues) do
 		alpha = alpha + (1 - alpha) * value
 	end

--- a/plugin/src/App/getTextBoundsAsync.lua
+++ b/plugin/src/App/getTextBoundsAsync.lua
@@ -1,41 +0,0 @@
-local TextService = game:GetService("TextService")
-
-local Rojo = script:FindFirstAncestor("Rojo")
-local Packages = Rojo.Packages
-
-local Log = require(Packages.Log)
-
-local params = Instance.new("GetTextBoundsParams")
-
-local function getTextBoundsAsync(
-	text: string,
-	font: Font,
-	textSize: number,
-	width: number,
-	richText: boolean?
-): Vector2
-	if type(text) ~= "string" then
-		Log.warn(`Invalid text. Expected string, received {type(text)} instead`)
-		return Vector2.zero
-	end
-	if #text >= 200_000 then
-		Log.warn(`Invalid text. Exceeds the 199,999 character limit`)
-		return Vector2.zero
-	end
-
-	params.Text = text
-	params.Font = font
-	params.Size = textSize
-	params.Width = width
-	params.RichText = not not richText
-
-	local success, bounds = pcall(TextService.GetTextBoundsAsync, TextService, params)
-	if not success then
-		Log.warn(`Failed to get text bounds: {bounds}`)
-		return Vector2.zero
-	end
-
-	return bounds
-end
-
-return getTextBoundsAsync
--- a/plugin/src/App/init.lua
+++ b/plugin/src/App/init.lua
@@ -9,7 +9,6 @@ local Packages = Rojo.Packages

 local Roact = require(Packages.Roact)
 local Log = require(Packages.Log)
-local Promise = require(Packages.Promise)

 local Assets = require(Plugin.Assets)
 local Version = require(Plugin.Version)
@@ -28,7 +27,7 @@ local timeUtil = require(Plugin.timeUtil)
 local Theme = require(script.Theme)

 local Page = require(script.Page)
-local Notifications = require(script.Components.Notifications)
+local Notifications = require(script.Notifications)
 local Tooltip = require(script.Components.Tooltip)
 local StudioPluginAction = require(script.Components.Studio.StudioPluginAction)
 local StudioToolbar = require(script.Components.Studio.StudioToolbar)
@@ -53,9 +52,9 @@ local App = Roact.Component:extend("App")
 function App:init()
 	preloadAssets()

-	local priorSyncInfo = self:getPriorSyncInfo()
-	self.host, self.setHost = Roact.createBinding(priorSyncInfo.host or "")
-	self.port, self.setPort = Roact.createBinding(priorSyncInfo.port or "")
+	local priorHost, priorPort = self:getPriorEndpoint()
+	self.host, self.setHost = Roact.createBinding(priorHost or "")
+	self.port, self.setPort = Roact.createBinding(priorPort or "")

 	self.confirmationBindable = Instance.new("BindableEvent")
 	self.confirmationEvent = self.confirmationBindable.Event
@@ -79,18 +78,17 @@ function App:init()
 				action
 			)
 		)
-		local dismissNotif = self:addNotification({
-			text = string.format("You've undone '%s'.\nIf this was not intended, please restore.", action),
-			timeout = 10,
-			onClose = function()
-				cleanup()
-			end,
-			actions = {
+		local dismissNotif = self:addNotification(
+			string.format("You've undone '%s'.\nIf this was not intended, please restore.", action),
+			10,
+			{
 				Restore = {
 					text = "Restore",
 					style = "Solid",
 					layoutOrder = 1,
-					onClick = function()
+					onClick = function(notification)
+						cleanup()
+						notification:dismiss()
 						ChangeHistoryService:Redo()
 					end,
 				},
@@ -98,9 +96,13 @@ function App:init()
 					text = "Dismiss",
 					style = "Bordered",
 					layoutOrder = 2,
+					onClick = function(notification)
+						cleanup()
+						notification:dismiss()
+					end,
 				},
-			},
-		})
+			}
+		)

 		undoConnection = ChangeHistoryService.OnUndo:Once(function()
 			-- Our notif is now out of date- redoing will not restore the patch
@@ -140,20 +142,32 @@ function App:init()
 	if RunService:IsEdit() then
 		self:checkForUpdates()

-		self:startSyncReminderPolling()
-		self.disconnectSyncReminderPollingChanged = Settings:onChanged("syncReminderPolling", function(enabled)
-			if enabled then
-				self:startSyncReminderPolling()
-			else
-				self:stopSyncReminderPolling()
-			end
-		end)
-
-		self:tryAutoReconnect():andThen(function(didReconnect)
-			if not didReconnect then
-				self:checkSyncReminder()
-			end
-		end)
+		if
+			Settings:get("syncReminder")
+			and self.serveSession == nil
+			and self:getLastSyncTimestamp()
+			and (self:isSyncLockAvailable())
+		then
+			self:addNotification("You've previously synced this place. Would you like to reconnect?", 300, {
+				Connect = {
+					text = "Connect",
+					style = "Solid",
+					layoutOrder = 1,
+					onClick = function(notification)
+						notification:dismiss()
+						self:startSession()
+					end,
+				},
+				Dismiss = {
+					text = "Dismiss",
+					style = "Bordered",
+					layoutOrder = 2,
+					onClick = function(notification)
+						notification:dismiss()
+					end,
+				},
+			})
+		end
 	end

 	if self:isAutoConnectPlaytestServerAvailable() then
@@ -174,30 +188,21 @@ function App:init()
 end

 function App:willUnmount()
-	self:endSession()
-
 	self.waypointConnection:Disconnect()
 	self.confirmationBindable:Destroy()

 	self.disconnectUpdatesCheckChanged()
 	self.disconnectPrereleasesCheckChanged()
-	if self.disconnectSyncReminderPollingChanged then
-		self.disconnectSyncReminderPollingChanged()
-	end
-
-	self:stopSyncReminderPolling()

 	self.autoConnectPlaytestServerListener()
 	self:clearRunningConnectionInfo()
 end

-function App:addNotification(notif: {
+function App:addNotification(
 	text: string,
-	isFullscreen: boolean?,
 	timeout: number?,
-	actions: { [string]: { text: string, style: string, layoutOrder: number, onClick: (any) -> ()? } }?,
-	onClose: (any) -> ()?,
-})
+	actions: { [string]: { text: string, style: string, layoutOrder: number, onClick: (any) -> () } }?
+)
 	if not Settings:get("showNotifications") then
 		return
 	end
@@ -205,17 +210,17 @@ function App:addNotification(notif: {
 	self.notifId += 1
 	local id = self.notifId

-	self:setState(function(prevState)
-		local notifications = table.clone(prevState.notifications)
-		notifications[id] = Dictionary.merge({
-			timeout = notif.timeout or 5,
-			isFullscreen = notif.isFullscreen or false,
-		}, notif)
+	local notifications = table.clone(self.state.notifications)
+	notifications[id] = {
+		text = text,
+		timestamp = DateTime.now().UnixTimestampMillis,
+		timeout = timeout or 3,
+		actions = actions,
+	}

-		return {
-			notifications = notifications,
-		}
-	end)
+	self:setState({
+		notifications = notifications,
+	})

 	return function()
 		self:closeNotification(id)
@@ -227,60 +232,96 @@ function App:closeNotification(id: number)
 		return
 	end

-	self:setState(function(prevState)
-		local notifications = table.clone(prevState.notifications)
-		notifications[id] = nil
+	local notifications = table.clone(self.state.notifications)
+	notifications[id] = nil

-		return {
-			notifications = notifications,
-		}
-	end)
+	self:setState({
+		notifications = notifications,
+	})
 end

 function App:checkForUpdates()
-	local updateMessage = Version.getUpdateMessage()
-
-	if updateMessage then
-		self:addNotification({
-			text = updateMessage,
-			timeout = 500,
-			actions = {
-				Dismiss = {
-					text = "Dismiss",
-					style = "Bordered",
-					layoutOrder = 2,
-				},
-			},
-		})
+	if not Settings:get("checkForUpdates") then
+		return
 	end
+
+	local isLocalInstall = string.find(debug.traceback(), "\n[^\n]-user_.-$") ~= nil
+	local latestCompatibleVersion = Version.retrieveLatestCompatible({
+		version = Config.version,
+		includePrereleases = isLocalInstall and Settings:get("checkForPrereleases"),
+	})
+	if not latestCompatibleVersion then
+		return
+	end
+
+	self:addNotification(
+		string.format(
+			"A newer compatible version of Rojo, %s, was published %s! Go to the Rojo releases page to learn more.",
+			Version.display(latestCompatibleVersion.version),
+			timeUtil.elapsedToText(DateTime.now().UnixTimestamp - latestCompatibleVersion.publishedUnixTimestamp)
+		),
+		500,
+		{
+			Dismiss = {
+				text = "Dismiss",
+				style = "Bordered",
+				layoutOrder = 2,
+				onClick = function(notification)
+					notification:dismiss()
+				end,
+			},
+		}
+	)
 end

-function App:getPriorSyncInfo(): { host: string?, port: string?, projectName: string?, timestamp: number? }
-	local priorSyncInfos = Settings:get("priorEndpoints")
-	if not priorSyncInfos then
-		return {}
+function App:getPriorEndpoint()
+	local priorEndpoints = Settings:get("priorEndpoints")
+	if not priorEndpoints then
+		return
 	end

 	local id = tostring(game.PlaceId)
 	if ignorePlaceIds[id] then
-		return {}
+		return
 	end

-	return priorSyncInfos[id] or {}
+	local place = priorEndpoints[id]
+	if not place then
+		return
+	end
+
+	return place.host, place.port
 end

-function App:setPriorSyncInfo(host: string, port: string, projectName: string)
-	local priorSyncInfos = Settings:get("priorEndpoints")
-	if not priorSyncInfos then
-		priorSyncInfos = {}
+function App:getLastSyncTimestamp()
+	local priorEndpoints = Settings:get("priorEndpoints")
+	if not priorEndpoints then
+		return
 	end

-	local now = os.time()
+	local id = tostring(game.PlaceId)
+	if ignorePlaceIds[id] then
+		return
+	end
+
+	local place = priorEndpoints[id]
+	if not place then
+		return
+	end
+
+	return place.timestamp
+end
+
+function App:setPriorEndpoint(host: string, port: string)
+	local priorEndpoints = Settings:get("priorEndpoints")
+	if not priorEndpoints then
+		priorEndpoints = {}
+	end

 	-- Clear any stale saves to avoid disc bloat
-	for placeId, syncInfo in priorSyncInfos do
-		if now - (syncInfo.timestamp or now) > 12_960_000 then
-			priorSyncInfos[placeId] = nil
+	for placeId, endpoint in priorEndpoints do
+		if os.time() - endpoint.timestamp > 12_960_000 then
+			priorEndpoints[placeId] = nil
 			Log.trace("Cleared stale saved endpoint for {}", placeId)
 		end
 	end
@@ -290,28 +331,14 @@ function App:setPriorSyncInfo(host: string, port: string, projectName: string)
 		return
 	end

-	priorSyncInfos[id] = {
+	priorEndpoints[id] = {
 		host = if host ~= Config.defaultHost then host else nil,
 		port = if port ~= Config.defaultPort then port else nil,
-		projectName = projectName,
-		timestamp = now,
+		timestamp = os.time(),
 	}
 	Log.trace("Saved last used endpoint for {}", game.PlaceId)

-	Settings:set("priorEndpoints", priorSyncInfos)
-end
-
-function App:forgetPriorSyncInfo()
-	local priorSyncInfos = Settings:get("priorEndpoints")
-	if not priorSyncInfos then
-		priorSyncInfos = {}
-	end
-
-	local id = tostring(game.PlaceId)
-	priorSyncInfos[id] = nil
-	Log.trace("Erased last used endpoint for {}", game.PlaceId)
-
-	Settings:set("priorEndpoints", priorSyncInfos)
+	Settings:set("priorEndpoints", priorEndpoints)
 end

 function App:getHostAndPort()
@@ -386,179 +413,8 @@ function App:releaseSyncLock()
 	Log.trace("Could not relase sync lock because it is owned by {}", lock.Value)
 end

-function App:findActiveServer()
-	local host, port = self:getHostAndPort()
-	local baseUrl = if string.find(host, "^https?://")
-		then string.format("%s:%s", host, port)
-		else string.format("http://%s:%s", host, port)
-
-	Log.trace("Checking for active sync server at {}", baseUrl)
-
-	local apiContext = ApiContext.new(baseUrl)
-	return apiContext:connect():andThen(function(serverInfo)
-		apiContext:disconnect()
-		return serverInfo, host, port
-	end)
-end
-
-function App:tryAutoReconnect()
-	if not Settings:get("autoReconnect") then
-		return Promise.resolve(false)
-	end
-
-	local priorSyncInfo = self:getPriorSyncInfo()
-	if not priorSyncInfo.projectName then
-		Log.trace("No prior sync info found, skipping auto-reconnect")
-		return Promise.resolve(false)
-	end
-
-	return self:findActiveServer()
-		:andThen(function(serverInfo)
-			-- change
-			if serverInfo.projectName == priorSyncInfo.projectName then
-				Log.trace("Auto-reconnect found matching server, reconnecting...")
-				self:addNotification({
-					text = `Auto-reconnect discovered project '{serverInfo.projectName}'...`,
-				})
-				self:startSession()
-				return true
-			end
-			Log.trace("Auto-reconnect found different server, not reconnecting")
-			return false
-		end)
-		:catch(function()
-			Log.trace("Auto-reconnect did not find a server, not reconnecting")
-			return false
-		end)
-end
-
-function App:checkSyncReminder()
-	local syncReminderMode = Settings:get("syncReminderMode")
-	if syncReminderMode == "None" then
-		return
-	end
-
-	if self.serveSession ~= nil or not self:isSyncLockAvailable() then
-		-- Already syncing or cannot sync, no reason to remind
-		return
-	end
-
-	local priorSyncInfo = self:getPriorSyncInfo()
-
-	self:findActiveServer()
-		:andThen(function(serverInfo, host, port)
-			self:sendSyncReminder(
-				`Project '{serverInfo.projectName}' is serving at {host}:{port}.\nWould you like to connect?`,
-				{ "Connect", "Dismiss" }
-			)
-		end)
-		:catch(function()
-			if priorSyncInfo.timestamp and priorSyncInfo.projectName then
-				-- We didn't find an active server,
-				-- but this place has a prior sync
-				-- so we should remind the user to serve
-
-				local timeSinceSync = timeUtil.elapsedToText(os.time() - priorSyncInfo.timestamp)
-				self:sendSyncReminder(
-					`You synced project '{priorSyncInfo.projectName}' to this place {timeSinceSync}.\nDid you mean to run 'rojo serve' and then connect?`,
-					{ "Connect", "Forget", "Dismiss" }
-				)
-			end
-		end)
-end
-
-function App:startSyncReminderPolling()
-	if
-		self.syncReminderPollingThread ~= nil
-		or Settings:get("syncReminderMode") == "None"
-		or not Settings:get("syncReminderPolling")
-	then
-		return
-	end
-
-	Log.trace("Starting sync reminder polling thread")
-	self.syncReminderPollingThread = task.spawn(function()
-		while task.wait(30) do
-			if self.syncReminderPollingThread == nil then
-				-- The polling thread was stopped, so exit
-				return
-			end
-			if self.dismissSyncReminder then
-				-- There is already a sync reminder being shown
-				task.wait(5)
-				continue
-			end
-			self:checkSyncReminder()
-		end
-	end)
-end
-
-function App:stopSyncReminderPolling()
-	if self.syncReminderPollingThread then
-		Log.trace("Stopping sync reminder polling thread")
-		task.cancel(self.syncReminderPollingThread)
-		self.syncReminderPollingThread = nil
-	end
-end
-
-function App:sendSyncReminder(message: string, shownActions: { string })
-	local syncReminderMode = Settings:get("syncReminderMode")
-	if syncReminderMode == "None" then
-		return
-	end
-
-	local connectIndex = table.find(shownActions, "Connect")
-	local forgetIndex = table.find(shownActions, "Forget")
-	local dismissIndex = table.find(shownActions, "Dismiss")
-
-	self.dismissSyncReminder = self:addNotification({
-		text = message,
-		timeout = 120,
-		isFullscreen = Settings:get("syncReminderMode") == "Fullscreen",
-		onClose = function()
-			self.dismissSyncReminder = nil
-		end,
-		actions = {
-			Connect = if connectIndex
-				then {
-					text = "Connect",
-					style = "Solid",
-					layoutOrder = connectIndex,
-					onClick = function()
-						self:startSession()
-					end,
-				}
-				else nil,
-			Forget = if forgetIndex
-				then {
-					text = "Forget",
-					style = "Bordered",
-					layoutOrder = forgetIndex,
-					onClick = function()
-						-- The user doesn't want to be reminded again about this sync
-						self:forgetPriorSyncInfo()
-					end,
-				}
-				else nil,
-			Dismiss = if dismissIndex
-				then {
-					text = "Dismiss",
-					style = "Bordered",
-					layoutOrder = dismissIndex,
-					onClick = function()
-						-- If the user dismisses the reminder,
-						-- then we don't need to remind them again
-						self:stopSyncReminderPolling()
-					end,
-				}
-				else nil,
-		},
-	})
-end
-
 function App:isAutoConnectPlaytestServerAvailable()
-	return RunService:IsRunning()
-		and RunService:IsStudio()
+	return RunService:IsRunMode()
 		and RunService:IsServer()
 		and Settings:get("autoConnectPlaytestServer")
 		and workspace:GetAttribute("__Rojo_ConnectionUrl")
@@ -606,10 +462,7 @@ function App:startSession()
 		local msg = string.format("Could not sync because user '%s' is already syncing", tostring(priorOwner))

 		Log.warn(msg)
-		self:addNotification({
-			text = msg,
-			timeout = 10,
-		})
+		self:addNotification(msg, 10)
 		self:setState({
 			appStatus = AppStatus.Error,
 			errorMessage = msg,
@@ -631,62 +484,64 @@ function App:startSession()
 		twoWaySync = Settings:get("twoWaySync"),
 	})

-	serveSession:setUpdateLoadingTextCallback(function(text: string)
-		self:setState({
-			connectingText = text,
-		})
-	end)
-
-	self.cleanupPrecommit = serveSession:hookPrecommit(function(patch, instanceMap)
+	self.cleanupPrecommit = serveSession.__reconciler:hookPrecommit(function(patch, instanceMap)
 		-- Build new tree for patch
 		self:setState({
 			patchTree = PatchTree.build(patch, instanceMap, { "Property", "Old", "New" }),
 		})
 	end)
-	self.cleanupPostcommit = serveSession:hookPostcommit(function(patch, instanceMap, unappliedPatch)
-		local now = DateTime.now().UnixTimestamp
+	self.cleanupPostcommit = serveSession.__reconciler:hookPostcommit(function(patch, instanceMap, unappliedPatch)
+		-- Update tree with unapplied metadata
 		self:setState(function(prevState)
-			local oldPatchData = prevState.patchData
-			local newPatchData = {
-				patch = patch,
-				unapplied = unappliedPatch,
-				timestamp = now,
-			}
-
-			if PatchSet.isEmpty(patch) then
-				-- Keep existing patch info, but use new timestamp
-				newPatchData.patch = oldPatchData.patch
-				newPatchData.unapplied = oldPatchData.unapplied
-			elseif now - oldPatchData.timestamp < 2 then
-				-- Patches that apply in the same second are combined for human clarity
-				newPatchData.patch = PatchSet.assign(PatchSet.newEmpty(), oldPatchData.patch, patch)
-				newPatchData.unapplied = PatchSet.assign(PatchSet.newEmpty(), oldPatchData.unapplied, unappliedPatch)
-			end
-
 			return {
 				patchTree = PatchTree.updateMetadata(prevState.patchTree, patch, instanceMap, unappliedPatch),
-				patchData = newPatchData,
 			}
 		end)
 	end)

+	serveSession:hookPostcommit(function(patch, _instanceMap, unapplied)
+		local now = DateTime.now().UnixTimestamp
+		local old = self.state.patchData
+
+		if PatchSet.isEmpty(patch) then
+			-- Ignore empty patch, but update timestamp
+			self:setState({
+				patchData = {
+					patch = old.patch,
+					unapplied = old.unapplied,
+					timestamp = now,
+				},
+			})
+			return
+		end
+
+		if now - old.timestamp < 2 then
+			-- Patches that apply in the same second are
+			-- considered to be part of the same change for human clarity
+			patch = PatchSet.assign(PatchSet.newEmpty(), old.patch, patch)
+			unapplied = PatchSet.assign(PatchSet.newEmpty(), old.unapplied, unapplied)
+		end
+
+		self:setState({
+			patchData = {
+				patch = patch,
+				unapplied = unapplied,
+				timestamp = now,
+			},
+		})
+	end)
+
 	serveSession:onStatusChanged(function(status, details)
 		if status == ServeSession.Status.Connecting then
-			if self.dismissSyncReminder then
-				self.dismissSyncReminder()
-				self.dismissSyncReminder = nil
-			end
+			self:setPriorEndpoint(host, port)

 			self:setState({
 				appStatus = AppStatus.Connecting,
 				toolbarIcon = Assets.Images.PluginButton,
 			})
-			self:addNotification({
-				text = "Connecting to session...",
-			})
+			self:addNotification("Connecting to session...")
 		elseif status == ServeSession.Status.Connected then
 			self.knownProjects[details] = true
-			self:setPriorSyncInfo(host, port, details)
 			self:setRunningConnectionInfo(baseUrl)

 			local address = ("%s:%s"):format(host, port)
@@ -696,9 +551,7 @@ function App:startSession()
 				address = address,
 				toolbarIcon = Assets.Images.PluginButtonConnected,
 			})
-			self:addNotification({
-				text = string.format("Connected to session '%s' at %s.", details, address),
-			})
+			self:addNotification(string.format("Connected to session '%s' at %s.", details, address), 5)
 		elseif status == ServeSession.Status.Disconnected then
 			self.serveSession = nil
 			self:releaseSyncLock()
@@ -721,19 +574,13 @@ function App:startSession()
 					errorMessage = tostring(details),
 					toolbarIcon = Assets.Images.PluginButtonWarning,
 				})
-				self:addNotification({
-					text = tostring(details),
-					timeout = 10,
-				})
+				self:addNotification(tostring(details), 10)
 			else
 				self:setState({
 					appStatus = AppStatus.NotConnected,
 					toolbarIcon = Assets.Images.PluginButton,
 				})
-				self:addNotification({
-					text = "Disconnected from session.",
-					timeout = 10,
-				})
+				self:addNotification("Disconnected from session.")
 			end
 		end
 	end)
@@ -801,25 +648,23 @@ function App:startSession()
 			end
 		end

-		self:setState({
-			connectingText = "Computing diff view...",
-		})
 		self:setState({
 			appStatus = AppStatus.Confirming,
-			patchTree = PatchTree.build(patch, instanceMap, { "Property", "Current", "Incoming" }),
 			confirmData = {
+				instanceMap = instanceMap,
+				patch = patch,
 				serverInfo = serverInfo,
 			},
 			toolbarIcon = Assets.Images.PluginButton,
 		})

-		self:addNotification({
-			text = string.format(
+		self:addNotification(
+			string.format(
 				"Please accept%sor abort the initializing sync session.",
 				Settings:get("twoWaySync") and ", reject, " or " "
 			),
-			timeout = 7,
-		})
+			7
+		)

 		return self.confirmationEvent:Wait()
 	end)
@@ -918,7 +763,6 @@ function App:render()

 					ConfirmingPage = createPageElement(AppStatus.Confirming, {
 						confirmData = self.state.confirmData,
-						patchTree = self.state.patchTree,
 						createPopup = not self.state.guiEnabled,

 						onAbort = function()
@@ -932,9 +776,7 @@ function App:render()
 						end,
 					}),

-					Connecting = createPageElement(AppStatus.Connecting, {
-						text = self.state.connectingText,
-					}),
+					Connecting = createPageElement(AppStatus.Connecting),

 					Connected = createPageElement(AppStatus.Connected, {
 						projectName = self.state.projectName,
@@ -983,7 +825,19 @@ function App:render()
 					ResetOnSpawn = false,
 					DisplayOrder = 100,
 				}, {
-					Notifications = e(Notifications, {
+					layout = e("UIListLayout", {
+						SortOrder = Enum.SortOrder.LayoutOrder,
+						HorizontalAlignment = Enum.HorizontalAlignment.Right,
+						VerticalAlignment = Enum.VerticalAlignment.Bottom,
+						Padding = UDim.new(0, 5),
+					}),
+					padding = e("UIPadding", {
+						PaddingTop = UDim.new(0, 5),
+						PaddingBottom = UDim.new(0, 5),
+						PaddingLeft = UDim.new(0, 5),
+						PaddingRight = UDim.new(0, 5),
+					}),
+					notifs = e(Notifications, {
 						soundPlayer = self.props.soundPlayer,
 						notifications = self.state.notifications,
 						onClose = function(id)
--- a/plugin/src/Assets.lua
+++ b/plugin/src/Assets.lua
@@ -74,7 +74,7 @@ local Assets = {
 local function guardForTypos(name, map)
 	strict(name, map)

-	for key, child in map do
+	for key, child in pairs(map) do
 		if type(child) == "table" then
 			guardForTypos(("%s.%s"):format(name, key), child)
 		end
--- a/plugin/src/ChangeBatcher/createPatchSet.lua
+++ b/plugin/src/ChangeBatcher/createPatchSet.lua
@@ -15,7 +15,7 @@ local encodePatchUpdate = require(script.Parent.encodePatchUpdate)
 return function(instanceMap, propertyChanges)
 	local patch = PatchSet.newEmpty()

-	for instance, properties in propertyChanges do
+	for instance, properties in pairs(propertyChanges) do
 		local instanceId = instanceMap.fromInstances[instance]

 		if instanceId == nil then
--- a/plugin/src/ChangeBatcher/encodePatchUpdate.lua
+++ b/plugin/src/ChangeBatcher/encodePatchUpdate.lua
@@ -10,7 +10,7 @@ return function(instance, instanceId, properties)
 		changedProperties = {},
 	}

-	for propertyName in properties do
+	for propertyName in pairs(properties) do
 		if propertyName == "Name" then
 			update.changedName = instance.Name
 		else
--- a/plugin/src/Config.lua
+++ b/plugin/src/Config.lua
@@ -21,7 +21,7 @@ return strict("Config", {
 	codename = "Epiphany",
 	version = realVersion,
 	expectedServerVersionString = ("%d.%d or newer"):format(realVersion[1], realVersion[2]),
-	protocolVersion = 5,
+	protocolVersion = 4,
 	defaultHost = "localhost",
 	defaultPort = "34872",
 })
--- a/plugin/src/Dictionary.lua
+++ b/plugin/src/Dictionary.lua
@@ -14,7 +14,7 @@ local function merge(...)
 		local source = select(i, ...)

 		if source ~= nil then
-			for key, value in source do
+			for key, value in pairs(source) do
 				if value == None then
 					output[key] = nil
 				else
--- a/plugin/src/InstanceMap.lua
+++ b/plugin/src/InstanceMap.lua
@@ -63,7 +63,7 @@ function InstanceMap:__fmtDebug(output)
 	-- Collect all of the entries in the InstanceMap and sort them by their
 	-- label, which helps make our output deterministic.
 	local entries = {}
-	for id, instance in self.fromIds do
+	for id, instance in pairs(self.fromIds) do
 		local label = string.format("%s (%s)", instance:GetFullName(), instance.ClassName)

 		table.insert(entries, { id, label })
@@ -73,7 +73,7 @@ function InstanceMap:__fmtDebug(output)
 		return a[2] < b[2]
 	end)

-	for _, entry in entries do
+	for _, entry in ipairs(entries) do
 		output:writeLine("{}: {}", entry[1], entry[2])
 	end

@@ -227,7 +227,7 @@ function InstanceMap:__disconnectSignals(instance)
 		-- around the extra table. ValueBase objects force us to use multiple
 		-- signals to emulate the Instance.Changed event, however.
 		if typeof(signals) == "table" then
-			for _, signal in signals do
+			for _, signal in ipairs(signals) do
 				signal:Disconnect()
 			end
 		else
--- a/plugin/src/PatchSet.lua
+++ b/plugin/src/PatchSet.lua
@@ -282,22 +282,6 @@ function PatchSet.assign(target, ...)
 	return target
 end

-function PatchSet.addedIdList(patchSet): { string }
-	local idList = table.create(#patchSet.added)
-	for id in patchSet.added do
-		table.insert(idList, id)
-	end
-	return table.freeze(idList)
-end
-
-function PatchSet.updatedIdList(patchSet): { string }
-	local idList = table.create(#patchSet.updated)
-	for _, item in patchSet.updated do
-		table.insert(idList, item.id)
-	end
-	return table.freeze(idList)
-end
-
 --[[
 	Create a list of human-readable statements summarizing the contents of this
 	patch, intended to be displayed to users.
--- a/plugin/src/PatchTree.lua
+++ b/plugin/src/PatchTree.lua
@@ -16,14 +16,6 @@ local Types = require(Plugin.Types)
 local decodeValue = require(Plugin.Reconciler.decodeValue)
 local getProperty = require(Plugin.Reconciler.getProperty)

-local function yieldIfNeeded(clock)
-	if os.clock() - clock > 1 / 20 then
-		task.wait()
-		return os.clock()
-	end
-	return clock
-end
-
 local function alphabeticalNext(t, state)
 	-- Equivalent of the next function, but returns the keys in the alphabetic
 	-- order of node names. We use a temporary ordered key table that is stored in the
@@ -140,6 +132,7 @@ end
 -- props must contain id, and cannot contain children or parentId
 -- other than those three, it can hold anything
 function Tree:addNode(parent, props)
+	Timer.start("Tree:addNode")
 	assert(props.id, "props must contain id")

 	parent = parent or "ROOT"
@@ -150,6 +143,7 @@ function Tree:addNode(parent, props)
 		for k, v in props do
 			node[k] = v
 		end
+		Timer.stop()
 		return node
 	end

@@ -160,25 +154,25 @@ function Tree:addNode(parent, props)
 	local parentNode = self:getNode(parent)
 	if not parentNode then
 		Log.warn("Failed to create node since parent doesnt exist: {}, {}", parent, props)
+		Timer.stop()
 		return
 	end

 	parentNode.children[node.id] = node
 	self.idToNode[node.id] = node

+	Timer.stop()
 	return node
 end

 -- Given a list of ancestor ids in descending order, builds the nodes for them
 -- using the patch and instanceMap info
 function Tree:buildAncestryNodes(previousId: string?, ancestryIds: { string }, patch, instanceMap)
-	local clock = os.clock()
+	Timer.start("Tree:buildAncestryNodes")
 	-- Build nodes for ancestry by going up the tree
 	previousId = previousId or "ROOT"

 	for _, ancestorId in ancestryIds do
-		clock = yieldIfNeeded(clock)
-
 		local value = instanceMap.fromIds[ancestorId] or patch.added[ancestorId]
 		if not value then
 			Log.warn("Failed to find ancestor object for " .. ancestorId)
@@ -192,6 +186,8 @@ function Tree:buildAncestryNodes(previousId: string?, ancestryIds: { string }, p
 		})
 		previousId = ancestorId
 	end
+
+	Timer.stop()
 end

 local PatchTree = {}
@@ -200,16 +196,12 @@ local PatchTree = {}
 -- uses changeListHeaders in node.changeList
 function PatchTree.build(patch, instanceMap, changeListHeaders)
 	Timer.start("PatchTree.build")
-	local clock = os.clock()
-
 	local tree = Tree.new()

 	local knownAncestors = {}

 	Timer.start("patch.updated")
 	for _, change in patch.updated do
-		clock = yieldIfNeeded(clock)
-
 		local instance = instanceMap.fromIds[change.id]
 		if not instance then
 			continue
@@ -289,8 +281,6 @@ function PatchTree.build(patch, instanceMap, changeListHeaders)

 	Timer.start("patch.removed")
 	for _, idOrInstance in patch.removed do
-		clock = yieldIfNeeded(clock)
-
 		local instance = if Types.RbxId(idOrInstance) then instanceMap.fromIds[idOrInstance] else idOrInstance
 		if not instance then
 			-- If we're viewing a past patch, the instance is already removed
@@ -335,8 +325,6 @@ function PatchTree.build(patch, instanceMap, changeListHeaders)

 	Timer.start("patch.added")
 	for id, change in patch.added do
-		clock = yieldIfNeeded(clock)
-
 		-- Gather ancestors from existing DOM or future additions
 		local ancestryIds = {}
 		local parentId = change.Parent
--- a/plugin/src/Reconciler/applyPatch.lua
+++ b/plugin/src/Reconciler/applyPatch.lua
@@ -5,6 +5,8 @@
 	Patches can come from the server or be generated by the client.
 ]]

+local ChangeHistoryService = game:GetService("ChangeHistoryService")
+
 local Packages = script.Parent.Parent.Parent.Packages
 local Log = require(Packages.Log)

@@ -14,18 +16,19 @@ local invariant = require(script.Parent.Parent.invariant)

 local decodeValue = require(script.Parent.decodeValue)
 local reify = require(script.Parent.reify)
-local reifyInstance, applyDeferredRefs = reify.reifyInstance, reify.applyDeferredRefs
 local setProperty = require(script.Parent.setProperty)

 local function applyPatch(instanceMap, patch)
+	local patchTimestamp = DateTime.now():FormatLocalTime("LTS", "en-us")
+	local historyRecording = ChangeHistoryService:TryBeginRecording("Rojo: Patch " .. patchTimestamp)
+	if not historyRecording then
+		-- There can only be one recording at a time
+		Log.debug("Failed to begin history recording for " .. patchTimestamp .. ". Another recording is in progress.")
+	end
+
 	-- Tracks any portions of the patch that could not be applied to the DOM.
 	local unappliedPatch = PatchSet.newEmpty()

-	-- Contains a list of all of the ref properties that we'll need to assign.
-	-- It is imperative that refs are assigned after all instances are created
-	-- to ensure that referents can be mapped to instances correctly.
-	local deferredRefs = {}
-
 	for _, removedIdOrInstance in ipairs(patch.removed) do
 		local removeInstanceSuccess = pcall(function()
 			if Types.RbxId(removedIdOrInstance) then
@@ -64,6 +67,9 @@ local function applyPatch(instanceMap, patch)
 		if parentInstance == nil then
 			-- This would be peculiar. If you create an instance with no
 			-- parent, were you supposed to create it at all?
+			if historyRecording then
+				ChangeHistoryService:FinishRecording(historyRecording, Enum.FinishRecordingOperation.Commit)
+			end
 			invariant(
 				"Cannot add an instance from a patch that has no parent.\nInstance {} with parent {}.\nState: {:#?}",
 				id,
@@ -72,7 +78,7 @@ local function applyPatch(instanceMap, patch)
 			)
 		end

-		local failedToReify = reifyInstance(deferredRefs, instanceMap, patch.added, id, parentInstance)
+		local failedToReify = reify(instanceMap, patch.added, id, parentInstance)

 		if not PatchSet.isEmpty(failedToReify) then
 			Log.debug("Failed to reify as part of applying a patch: {:#?}", failedToReify)
@@ -137,7 +143,7 @@ local function applyPatch(instanceMap, patch)
 				[update.id] = mockVirtualInstance,
 			}

-			local failedToReify = reifyInstance(deferredRefs, instanceMap, mockAdded, update.id, instance.Parent)
+			local failedToReify = reify(instanceMap, mockAdded, update.id, instance.Parent)

 			local newInstance = instanceMap.fromIds[update.id]

@@ -200,18 +206,6 @@ local function applyPatch(instanceMap, patch)

 		if update.changedProperties ~= nil then
 			for propertyName, propertyValue in pairs(update.changedProperties) do
-				-- Because refs may refer to instances that we haven't constructed yet,
-				-- we defer applying any ref properties until all instances are created.
-				if next(propertyValue) == "Ref" then
-					table.insert(deferredRefs, {
-						id = update.id,
-						instance = instance,
-						propertyName = propertyName,
-						virtualValue = propertyValue,
-					})
-					continue
-				end
-
 				local decodeSuccess, decodedValue = decodeValue(propertyValue, instanceMap)
 				if not decodeSuccess then
 					unappliedUpdate.changedProperties[propertyName] = propertyValue
@@ -232,7 +226,9 @@ local function applyPatch(instanceMap, patch)
 		end
 	end

-	applyDeferredRefs(instanceMap, deferredRefs, unappliedPatch)
+	if historyRecording then
+		ChangeHistoryService:FinishRecording(historyRecording, Enum.FinishRecordingOperation.Commit)
+	end

 	return unappliedPatch
 end
--- a/plugin/src/Reconciler/diff.lua
+++ b/plugin/src/Reconciler/diff.lua
@@ -25,26 +25,18 @@ local function trueEquals(a, b): boolean
 		return true
 	end

-	-- Treat nil and { Ref = "000...0" } as equal
-	if
-		(a == nil and type(b) == "table" and b.Ref == "00000000000000000000000000000000")
-		or (b == nil and type(a) == "table" and a.Ref == "00000000000000000000000000000000")
-	then
-		return true
-	end
-
 	local typeA, typeB = typeof(a), typeof(b)

 	-- For tables, try recursive deep equality
 	if typeA == "table" and typeB == "table" then
 		local checkedKeys = {}
-		for key, value in a do
+		for key, value in pairs(a) do
 			checkedKeys[key] = true
 			if not trueEquals(value, b[key]) then
 				return false
 			end
 		end
-		for key, value in b do
+		for key, value in pairs(b) do
 			if checkedKeys[key] then
 				continue
 			end
@@ -54,10 +46,6 @@ local function trueEquals(a, b): boolean
 		end
 		return true

-	-- For NaN, check if both values are not equal to themselves
-	elseif a ~= a and b ~= b then
-		return true
-
 	-- For numbers, compare with epsilon of 0.0001 to avoid floating point inequality
 	elseif typeA == "number" and typeB == "number" then
 		return fuzzyEq(a, b, 0.0001)
@@ -163,24 +151,7 @@ local function diff(instanceMap, virtualInstances, rootId)

 			if getProperySuccess then
 				local existingValue = existingValueOrErr
-				local decodeSuccess, decodedValue
-
-				-- If `virtualValue` is a ref then instead of decoding it to an instance,
-				-- we change `existingValue` to be a ref. This is because `virtualValue`
-				-- may point to an Instance which doesn't exist yet and therefore
-				-- decoding it may throw an error.
-				if next(virtualValue) == "Ref" then
-					decodeSuccess, decodedValue = true, virtualValue
-
-					if existingValue and typeof(existingValue) == "Instance" then
-						local existingValueRef = instanceMap.fromInstances[existingValue]
-						if existingValueRef then
-							existingValue = { Ref = existingValueRef }
-						end
-					end
-				else
-					decodeSuccess, decodedValue = decodeValue(virtualValue, instanceMap)
-				end
+				local decodeSuccess, decodedValue = decodeValue(virtualValue, instanceMap)

 				if decodeSuccess then
 					if not trueEquals(existingValue, decodedValue) then
--- a/plugin/src/Reconciler/diff.spec.lua
+++ b/plugin/src/Reconciler/diff.spec.lua
@@ -14,7 +14,7 @@ return function()
 	local function size(dict)
 		local len = 0

-		for _ in dict do
+		for _ in pairs(dict) do
 			len = len + 1
 		end

--- a/Show More
+++ b/Show More