Build aarch64 windows and linux builds for releases

After 7.4.3 released, I forgot to update the changelog on master. This
fixes that.

.editorconfig

@@ -23,4 +23,7 @@ insert_final_newline = true
 insert_final_newline = true
 
 [*.lua]
+indent_style = tab
+
+[*.luau]
 indent_style = tab

.git-blame-ignore-revs

@@ -0,0 +1,2 @@
+# stylua formatting
+0f8e1625d572a5fe0f7b5c08653ff92cc837d346

.gitattributes

@@ -0,0 +1 @@
+*.lua linguist-language=Luau

.github/FUNDING.yml

@@ -1 +0,0 @@
-patreon: lpghatguy

.github/workflows/changelog.yml

@@ -0,0 +1,23 @@
+name: Changelog Check
+
+on:
+  pull_request:
+    types: [assigned, opened, synchronize, reopened, labeled, unlabeled]
+    branches:
+      - master
+
+jobs:
+  build:
+    name: Check Actions
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    
+    - name: Changelog check
+      uses: Zomzog/changelog-checker@v1.3.0
+      with:
+        fileName: CHANGELOG.md 
+        noChangelogLabel: skip changelog
+        checkNotification: Simple
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci.yml

@@ -12,32 +12,27 @@ on:
 jobs:
   build:
     name: Build and Test
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
 
     strategy:
       matrix:
-        rust_version: [stable, 1.58.1]
+        os: [ubuntu-latest, windows-latest, macos-latest]
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
+      with:
+        submodules: true
 
     - name: Install Rust
-      uses: actions-rs/toolchain@v1
-      with:
-        toolchain: ${{ matrix.rust_version }}
-        override: true
-        profile: minimal
+      uses: dtolnay/rust-toolchain@stable
 
-    - name: Setup Foreman
-      uses: Roblox/setup-foreman@v1
-      with:
-        token: ${{ secrets.GITHUB_TOKEN }}
+    - name: Rust cache
+      uses: Swatinem/rust-cache@v2
 
-    - name: Install packages
-      run: |
-        cd plugin
-        wally install
-        cd ..
+    - name: Setup Aftman
+      uses: ok-nick/setup-aftman@v0.3.0
+      with:
+        version: 'v0.2.7'
 
     - name: Build
       run: cargo build --locked --verbose
@@ -45,33 +40,60 @@ jobs:
     - name: Test
       run: cargo test --locked --verbose
 
-  lint:
-    name: Rustfmt and Clippy
+  msrv:
+    name: Check MSRV
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
+      with:
+        submodules: true
 
     - name: Install Rust
-      uses: actions-rs/toolchain@v1
+      uses: dtolnay/rust-toolchain@1.70.0
+
+    - name: Rust cache
+      uses: Swatinem/rust-cache@v2
+
+    - name: Setup Aftman
+      uses: ok-nick/setup-aftman@v0.3.0
+      with:
+        version: 'v0.2.7'
+
+    - name: Build
+      run: cargo build --locked --verbose
+
+  lint:
+    name: Rustfmt, Clippy, Stylua, & Selene
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        submodules: true
+
+    - name: Install Rust
+      uses: dtolnay/rust-toolchain@stable
       with:
-        toolchain: stable
-        override: true
         components: rustfmt, clippy
 
-    - name: Setup Foreman
-      uses: Roblox/setup-foreman@v1
-      with:
-        token: ${{ secrets.GITHUB_TOKEN }}
+    - name: Rust cache
+      uses: Swatinem/rust-cache@v2
 
-    - name: Install packages
-      run: |
-        cd plugin
-        wally install
-        cd ..
+    - name: Setup Aftman
+      uses: ok-nick/setup-aftman@v0.3.0
+      with:
+        version: 'v0.2.7'
+
+    - name: Stylua
+      run: stylua --check plugin/src
+
+    - name: Selene
+      run: selene plugin/src
 
     - name: Rustfmt
       run: cargo fmt -- --check
 
     - name: Clippy
       run: cargo clippy
+

.github/workflows/release.yml

@@ -8,53 +8,41 @@ jobs:
   create-release:
     name: Create Release
     runs-on: ubuntu-latest
-    outputs:
-      upload_url: ${{ steps.create_release.outputs.upload_url }}
     steps:
+      - uses: actions/checkout@v4
       - name: Create Release
-        id: create_release
-        uses: actions/create-release@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          tag_name: ${{ github.ref }}
-          release_name: ${{ github.ref }}
-          draft: true
-          prerelease: false
+        run: |
+          gh release create ${{ github.ref_name }} --draft --verify-tag --title ${{ github.ref_name }}
 
   build-plugin:
     needs: ["create-release"]
     name: Build Roblox Studio Plugin
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
 
-      - name: Setup Foreman
-        uses: Roblox/setup-foreman@v1
+      - name: Setup Aftman
+        uses: ok-nick/setup-aftman@v0.1.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Install packages
-        run: |
-          cd plugin
-          wally install
-          cd ..
+          trust-check: false
+          version: 'v0.2.6'
 
       - name: Build Plugin
         run: rojo build plugin --output Rojo.rbxm
 
       - name: Upload Plugin to Release
-        uses: actions/upload-release-asset@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          upload_url: ${{ needs.create-release.outputs.upload_url }}
-          asset_path: Rojo.rbxm
-          asset_name: Rojo.rbxm
-          asset_content_type: application/octet-stream
+        run: |
+          gh release upload ${{ github.ref_name }} Rojo.rbxm
 
       - name: Upload Plugin to Artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: Rojo.rbxm
           path: Rojo.rbxm
@@ -71,11 +59,21 @@ jobs:
             target: x86_64-unknown-linux-gnu
             label: linux-x86_64
 
+          - host: linux
+            os: ubuntu-20.04
+            target: aarch64-unknown-linux-gnu
+            label: linux-aarch64
+
           - host: windows
             os: windows-latest
             target: x86_64-pc-windows-msvc
             label: windows-x86_64
 
+          - host: windows
+            os: windows-latest
+            target: aarch64-pc-windows-msvc
+            label: windows-aarch64
+
           - host: macos
             os: macos-latest
             target: x86_64-apple-darwin
@@ -91,72 +89,57 @@ jobs:
     env:
       BIN: rojo
     steps:
-      - uses: actions/checkout@v3
-
-      - name: Get Version from Tag
-        shell: bash
-        # https://github.community/t/how-to-get-just-the-tag-name/16241/7#M1027
-        run: |
-          echo "PROJECT_VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
-          echo "Version is: ${{ env.PROJECT_VERSION }}"
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
 
       - name: Install Rust
-        uses: actions-rs/toolchain@v1
+        uses: dtolnay/rust-toolchain@stable
         with:
-          toolchain: stable
-          target: ${{ matrix.target }}
-          override: true
-          profile: minimal
+          targets: ${{ matrix.target }}
 
-      - name: Setup Foreman
-        uses: Roblox/setup-foreman@v1
+      - name: Setup Aftman
+        uses: ok-nick/setup-aftman@v0.1.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Install packages
-        run: |
-          cd plugin
-          wally install
-          cd ..
+          trust-check: false
+          version: 'v0.2.6'
 
       - name: Build Release
-        run: cargo build --release --locked --verbose
+        run: cargo build --release --locked --verbose --target ${{ matrix.target }}
         env:
           # Build into a known directory so we can find our build artifact more
           # easily.
           CARGO_TARGET_DIR: output
 
-          # On platforms that use OpenSSL, ensure it is statically linked to
-          # make binaries more portable.
-          OPENSSL_STATIC: 1
-
-      - name: Create Release Archive
+      - name: Generate Artifact Name
         shell: bash
+        env:
+          TAG_NAME: ${{ github.ref_name }}
+        run: |
+          echo "ARTIFACT_NAME=$BIN-${TAG_NAME#v}-${{ matrix.label }}.zip" >> "$GITHUB_ENV"
+
+      - name: Create Archive and Upload to Release
+        shell: bash
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           mkdir staging
 
           if [ "${{ matrix.host }}" = "windows" ]; then
-            cp "output/release/$BIN.exe" staging/
+            cp "output/${{ matrix.target }}/release/$BIN.exe" staging/
             cd staging
-            7z a ../release.zip *
+            7z a ../$ARTIFACT_NAME *
           else
-            cp "output/release/$BIN" staging/
+            cp "output/${{ matrix.target }}/release/$BIN" staging/
             cd staging
-            zip ../release.zip *
+            zip ../$ARTIFACT_NAME *
           fi
 
-      - name: Upload Archive to Release
-        uses: actions/upload-release-asset@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          upload_url: ${{ needs.create-release.outputs.upload_url }}
-          asset_path: release.zip
-          asset_name: ${{ env.BIN }}-${{ env.PROJECT_VERSION }}-${{ matrix.label }}.zip
-          asset_content_type: application/octet-stream
+          gh release upload ${{ github.ref_name }} ../$ARTIFACT_NAME
 
       - name: Upload Archive to Artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
-          name: ${{ env.BIN }}-${{ env.PROJECT_VERSION }}-${{ matrix.label }}.zip
-          path: release.zip
+          path: ${{ env.ARTIFACT_NAME }}
+          name: ${{ env.ARTIFACT_NAME }}

.gitignore

@@ -13,9 +13,6 @@
 # Test places for the Roblox Studio Plugin
 /plugin/*.rbxlx
 
-# Packages for the Roblox Studio Plugin
-/plugin/*Packages
-
 # Roblox Studio holds 'lock' files on places
 *.rbxl.lock
 *.rbxlx.lock

.gitmodules

@@ -0,0 +1,18 @@
+[submodule "plugin/Packages/Roact"]
+	path = plugin/Packages/Roact
+	url = https://github.com/roblox/roact.git
+[submodule "plugin/Packages/Flipper"]
+	path = plugin/Packages/Flipper
+	url = https://github.com/reselim/flipper.git
+[submodule "plugin/Packages/Promise"]
+	path = plugin/Packages/Promise
+	url = https://github.com/evaera/roblox-lua-promise.git
+[submodule "plugin/Packages/t"]
+	path = plugin/Packages/t
+	url = https://github.com/osyrisrblx/t.git
+[submodule "plugin/Packages/TestEZ"]
+	path = plugin/Packages/TestEZ
+	url = https://github.com/roblox/testez.git
+[submodule "plugin/Packages/Highlighter"]
+	path = plugin/Packages/Highlighter
+	url = https://github.com/boatbomber/highlighter.git

CHANGELOG.md

@@ -1,9 +1,349 @@
 # Rojo Changelog
 
 ## Unreleased Changes
-* Added `--watch` flag to `rojo sourcemap` ([#602])
+* Projects may now manually link `Ref` properties together using `Attributes`. ([#843])
+ 	This has two parts: using `id` or `$id` in JSON files or a `Rojo_Target` attribute, an Instance
+    is given an ID. Then, that ID may be used elsewhere in the project to point to an Instance
+    using an attribute named `Rojo_Target_PROP_NAME`, where `PROP_NAME` is the name of a property.
 
+    As an example, here is a `model.json` for an ObjectValue that refers to itself:
+
+    ```json
+    {
+        "id": "arbitrary string",
+        "attributes": {
+            "Rojo_Target_Value": "arbitrary string"
+        }
+    }
+    ```
+
+    This is a very rough implementation and the usage will become more ergonomic
+    over time.
+
+* Updated Undo/Redo history to be more robust ([#915])
+* Added popout diff visualizer for table properties like Attributes and Tags ([#834])
+* Updated Theme to use Studio colors ([#838])
+* Improved patch visualizer UX ([#883])
+* Added update notifications for newer compatible versions in the Studio plugin. ([#832])
+* Added experimental setting for Auto Connect in playtests ([#840])
+* Improved settings UI ([#886])
+* `Open Scripts Externally` option can now be changed while syncing ([#911])
+* Projects may now specify rules for syncing files as if they had a different file extension. ([#813])
+ 	This is specified via a new field on project files, `syncRules`:
+
+ 	```json
+ 	{
+ 	 	"syncRules": [
+ 	 	 	{
+ 	 	 	 	"pattern": "*.foo",
+ 	 	 	 	"use": "text",
+                "exclude": "*.exclude.foo",
+ 	 	 	},
+ 	 	 	{
+ 	 	 	 	"pattern": "*.bar.baz",
+ 	 	 	 	"use": "json",
+ 	 	 	 	"suffix": ".bar.baz",
+ 	 	 	},
+ 	 	],
+ 	 	"name": "SyncRulesAreCool",
+ 	 	"tree": {
+ 	 	 	"$path": "src"
+ 	 	}
+ 	}
+ 	```
+
+ 	The `pattern` field is a glob used to match the sync rule to files. If present, the `suffix` field allows you to specify parts of a file's name get cut off by Rojo to name the Instance, including the file extension. If it isn't specified, Rojo will only cut off the first part of the file extension, up to the first dot.
+
+    Additionally, the `exclude` field allows files to be excluded from the sync rule if they match a pattern specified by it. If it's not present, all files that match `pattern` will be modified using the sync rule.
+
+ 	The `use` field corresponds to one of the potential file type that Rojo will currently include in a project. Files that match the provided pattern will be treated as if they had the file extension for that file type. A full list is below:
+
+ 	| `use` value    | file extension  |
+ 	|:---------------|:----------------|
+ 	| `serverScript` | `.server.lua`   |
+ 	| `clientScript` | `.client.lua`   |
+ 	| `moduleScript` | `.lua`          |
+ 	| `json`         | `.json`         |
+ 	| `toml`         | `.toml`         |
+ 	| `csv`          | `.csv`          |
+ 	| `text`         | `.txt`          |
+ 	| `jsonModel`    | `.model.json`   |
+ 	| `rbxm`         | `.rbxm`         |
+ 	| `rbxmx`        | `.rbxmx`        |
+ 	| `project`      | `.project.json` |
+ 	| `ignore`       | None!           |
+
+    **All** sync rules are reset between project files, so they must be specified in each one when nesting them. This is to ensure that nothing can break other projects by changing how files are synced!
+
+[#813]: https://github.com/rojo-rbx/rojo/pull/813
+[#832]: https://github.com/rojo-rbx/rojo/pull/832
+[#834]: https://github.com/rojo-rbx/rojo/pull/834
+[#838]: https://github.com/rojo-rbx/rojo/pull/838
+[#840]: https://github.com/rojo-rbx/rojo/pull/840
+[#843]: https://github.com/rojo-rbx/rojo/pull/843
+[#883]: https://github.com/rojo-rbx/rojo/pull/883
+[#886]: https://github.com/rojo-rbx/rojo/pull/886
+[#911]: https://github.com/rojo-rbx/rojo/pull/911
+[#915]: https://github.com/rojo-rbx/rojo/pull/915
+
+## [7.4.3] - August 6th, 2024
+* Fixed issue with building binary files introduced in 7.4.2
+* Fixed `value of type nil cannot be converted to number` warning spam in output. [#955]
+
+[#955]: https://github.com/rojo-rbx/rojo/pull/955
+
+## [7.4.2] - July 23, 2024
+* Added Never option to Confirmation ([#893])
+* Fixed removing trailing newlines ([#903])
+* Updated the internal property database, correcting an issue with `SurfaceAppearance.Color` that was reported [here][Surface_Appearance_Color_1] and [here][Surface_Appearance_Color_2] ([#948])
+
+[#893]: https://github.com/rojo-rbx/rojo/pull/893
+[#903]: https://github.com/rojo-rbx/rojo/pull/903
+[#948]: https://github.com/rojo-rbx/rojo/pull/948
+[Surface_Appearance_Color_1]: https://devforum.roblox.com/t/jailbreak-custom-character-turned-shiny-black-no-texture/3075563
+[Surface_Appearance_Color_2]: https://devforum.roblox.com/t/surfaceappearance-not-displaying-correctly/3075588
+
+## [7.4.1] - February 20, 2024
+* Made the `name` field optional on project files ([#870])
+
+	Files named `default.project.json` inherit the name of the folder they're in and all other projects
+    are named as expect (e.g. `foo.project.json` becomes an Instance named `foo`)
+
+    There is no change in behavior if `name` is set.
+* Fixed incorrect results when building model pivots ([#865])
+* Fixed incorrect results when serving model pivots ([#868])
+* Rojo now converts any line endings to LF, preventing spurious diffs when syncing Lua files on Windows ([#854])
+* Fixed Rojo plugin failing to connect when project contains certain unreadable properties ([#848])
+* Fixed various cases where patch visualizer would not display sync failures ([#845], [#844])
+* Fixed http error handling so Rojo can be used in Github Codespaces ([#847])
+
+[#848]: https://github.com/rojo-rbx/rojo/pull/848
+[#845]: https://github.com/rojo-rbx/rojo/pull/845
+[#844]: https://github.com/rojo-rbx/rojo/pull/844
+[#847]: https://github.com/rojo-rbx/rojo/pull/847
+[#854]: https://github.com/rojo-rbx/rojo/pull/854
+[#865]: https://github.com/rojo-rbx/rojo/pull/865
+[#868]: https://github.com/rojo-rbx/rojo/pull/868
+[#870]: https://github.com/rojo-rbx/rojo/pull/870
+
+## [7.4.0] - January 16, 2024
+* Improved the visualization for array properties like Tags ([#829])
+* Significantly improved performance of `rojo serve`, `rojo build --watch`, and `rojo sourcemap --watch` on macOS. ([#830])
+* Changed *.lua files that init command generates to *.luau ([#831])
+* Does not remind users to sync if the sync lock is claimed already ([#833])
+
+[#829]: https://github.com/rojo-rbx/rojo/pull/829
+[#830]: https://github.com/rojo-rbx/rojo/pull/830
+[#831]: https://github.com/rojo-rbx/rojo/pull/831
+[#833]: https://github.com/rojo-rbx/rojo/pull/833
+
+## [7.4.0-rc3] - October 25, 2023
+* Changed `sourcemap --watch` to only generate the sourcemap when it's necessary ([#800])
+* Switched script source property getter and setter to `ScriptEditorService` methods ([#801])
+
+ 	This ensures that the script editor reflects any changes Rojo makes to a script while it is open in the script editor.
+
+* Fixed issues when handling `SecurityCapabilities` values ([#803], [#807])
+* Fixed Rojo plugin erroring out when attempting to sync attributes with invalid names ([#809])
+
+[#800]: https://github.com/rojo-rbx/rojo/pull/800
+[#801]: https://github.com/rojo-rbx/rojo/pull/801
+[#803]: https://github.com/rojo-rbx/rojo/pull/803
+[#807]: https://github.com/rojo-rbx/rojo/pull/807
+[#809]: https://github.com/rojo-rbx/rojo/pull/809
+
+## [7.4.0-rc2] - October 3, 2023
+* Fixed bug with parsing version for plugin validation ([#797])
+
+[#797]: https://github.com/rojo-rbx/rojo/pull/797
+
+## [7.4.0-rc1] - October 3, 2023
+### Additions
+#### Project format
+* Added support for `.toml` files to `$path` ([#633])
+* Added support for `Font` and `CFrame` attributes ([rbx-dom#299], [rbx-dom#296])
+* Added the `emitLegacyScripts` field to the project format ([#765]). The behavior is outlined below:
+
+	| `emitLegacyScripts` Value | Action Taken by Rojo                                                                                             |
+	|---------------------------|------------------------------------------------------------------------------------------------------------------|
+	| false                     | Rojo emits Scripts with the appropriate `RunContext` for `*.client.lua` and `*.server.lua` files in the project. |
+	| true   (default)          | Rojo emits LocalScripts and Scripts with legacy `RunContext` (same behavior as previously).                      |
+
+
+	It can be used like this:
+	```json
+	{
+		"emitLegacyScripts": false,
+		"name": "MyCoolRunContextProject",
+		"tree": {
+			"$path": "src"
+		}
+	}
+	```
+
+* Added `Terrain` classname inference, similar to services ([#771])
+
+	`Terrain` may now be defined in projects without using `$className`:
+	```json
+	"Workspace": {
+		"Terrain": {
+			"$path": "path/to/terrain.rbxm"
+		}
+	}
+	```
+
+* Added support for `Terrain.MaterialColors` ([#770])
+
+	`Terrain.MaterialColors` is now represented in projects in a human readable format:
+	```json
+	"Workspace": {
+		"Terrain": {
+			"$path": "path/to/terrain.rbxm"
+			"$properties": {
+				"MaterialColors": {
+					"Grass": [10, 20, 30],
+					"Asphalt": [40, 50, 60],
+					"LeafyGrass": [255, 155, 55]
+				}
+			}
+		}
+	}
+	```
+
+* Added better support for `Font` properties ([#731])
+
+	`FontFace` properties may now be defined using implicit property syntax:
+	```json
+	"TextBox": {
+		"$className": "TextBox",
+		"$properties": {
+			"FontFace": {
+				"family": "rbxasset://fonts/families/RobotoMono.json",
+				"weight": "Thin",
+				"style": "Normal"
+			}
+		}
+	}
+	```
+
+#### Patch visualizer and notifications
+* Added a setting to control patch confirmation behavior ([#774])
+
+	This is a new setting for controlling when the Rojo plugin prompts for confirmation before syncing. It has four options:
+    * Initial (default): prompts only once for a project in a given Studio session
+    * Always: always prompts for confirmation
+    * Large Changes: only prompts when there are more than X changed instances. The number of instances is configurable - an additional setting for the number of instances becomes available when this option is chosen
+    * Unlisted PlaceId: only prompts if the place ID is not present in servePlaceIds
+
+* Added the ability to select Instances in patch visualizer ([#709])
+
+	Double-clicking an instance in the patch visualizer sets Roblox Studio's selection to the instance.
+
+* Added a sync reminder notification. ([#689])
+
+	Rojo detects if you have previously synced to a place, and displays a notification reminding you to sync again:
+
+	![Rojo reminds you to sync a place that you've synced previously](https://user-images.githubusercontent.com/40185666/242397435-ccdfddf2-a63f-420c-bc18-a6e3d6455bba.png)
+
+* Added rich Source diffs in patch visualizer ([#748])
+
+	A "View Diff" button for script sources is now present in the patch visualizer. Clicking it displays a side-by-side diff of the script changes:
+
+	![The patch visualizer contains a "view diff" button](https://user-images.githubusercontent.com/40185666/256065992-3f03558f-84b0-45a1-80eb-901f348cf067.png)
+
+	![The "View Diff" button opens a widget that displays a diff](https://user-images.githubusercontent.com/40185666/256066084-1d9d8fe8-7dad-4ee7-a542-b4aee35a5644.png)
+
+* Patch visualizer now indicates what changes failed to apply. ([#717])
+
+	A clickable warning label is displayed when the Rojo plugin is unable to apply changes. Clicking the label displays precise information about which changes failed:
+
+	![Patch visualizer displays a clickable warning label when changes fail to apply](https://user-images.githubusercontent.com/40185666/252063660-f08399ef-1e16-4f1c-bed8-552821f98cef.png)
+
+
+#### Miscellaneous
+* Added `plugin` flag to the `build` command that outputs to the local plugins folder ([#735])
+
+	This is a flag that builds a Rojo project into Roblox Studio's plugins directory. This allows you to build a Rojo project and load it into Studio as a plugin without having to type the full path to the plugins directory. It can be used like this: `rojo build <PATH-TO-PROJECT> --plugin <FILE-NAME>`
+
+* Added new plugin template to the `init` command ([#738])
+
+	This is a new template geared towards plugins. It is similar to the model template, but creates a `Script` instead of a `ModuleScript` in the `src` directory. It can be used like this: `rojo init --kind plugin`
+
+* Added protection against syncing non-place projects as a place. ([#691])
+* Add buttons for navigation on the Connected page ([#722])
+
+### Fixes
+* Significantly improved performance of `rojo sourcemap` ([#668])
+* Fixed the diff visualizer of connected sessions. ([#674])
+* Fixed disconnected session activity. ([#675])
+* Skip confirming patches that contain only a datamodel name change. ([#688])
+* Fix Rojo breaking when users undo/redo in Studio ([#708])
+* Improve tooltip behavior ([#723])
+* Better settings controls ([#725])
+* Rework patch visualizer with many fixes and improvements ([#713], [#726], [#755])
+
+[#668]: https://github.com/rojo-rbx/rojo/pull/668
+[#674]: https://github.com/rojo-rbx/rojo/pull/674
+[#675]: https://github.com/rojo-rbx/rojo/pull/675
+[#688]: https://github.com/rojo-rbx/rojo/pull/688
+[#689]: https://github.com/rojo-rbx/rojo/pull/689
+[#691]: https://github.com/rojo-rbx/rojo/pull/691
+[#709]: https://github.com/rojo-rbx/rojo/pull/709
+[#708]: https://github.com/rojo-rbx/rojo/pull/708
+[#713]: https://github.com/rojo-rbx/rojo/pull/713
+[#717]: https://github.com/rojo-rbx/rojo/pull/717
+[#722]: https://github.com/rojo-rbx/rojo/pull/722
+[#723]: https://github.com/rojo-rbx/rojo/pull/723
+[#725]: https://github.com/rojo-rbx/rojo/pull/725
+[#726]: https://github.com/rojo-rbx/rojo/pull/726
+[#633]: https://github.com/rojo-rbx/rojo/pull/633
+[#735]: https://github.com/rojo-rbx/rojo/pull/735
+[#731]: https://github.com/rojo-rbx/rojo/pull/731
+[#738]: https://github.com/rojo-rbx/rojo/pull/738
+[#748]: https://github.com/rojo-rbx/rojo/pull/748
+[#755]: https://github.com/rojo-rbx/rojo/pull/755
+[#765]: https://github.com/rojo-rbx/rojo/pull/765
+[#770]: https://github.com/rojo-rbx/rojo/pull/770
+[#771]: https://github.com/rojo-rbx/rojo/pull/771
+[#774]: https://github.com/rojo-rbx/rojo/pull/774
+[rbx-dom#299]: https://github.com/rojo-rbx/rbx-dom/pull/299
+[rbx-dom#296]: https://github.com/rojo-rbx/rbx-dom/pull/296
+
+## [7.3.0] - April 22, 2023
+* Added `$attributes` to project format. ([#574])
+* Added `--watch` flag to `rojo sourcemap`. ([#602])
+* Added support for `init.csv` files. ([#594])
+* Added real-time sync status to the Studio plugin. ([#569])
+* Added support for copying error messages to the clipboard. ([#614])
+* Added sync locking for Team Create. ([#590])
+* Added support for specifying HTTP or HTTPS protocol in plugin. ([#642])
+* Added tooltips to buttons in the Studio plugin. ([#637])
+* Added visual diffs when connecting from the Studio plugin. ([#603])
+* Host and port are now saved in the Studio plugin. ([#613])
+* Improved padding on notifications in Studio plugin. ([#589])
+* Renamed `Common` to `Shared` in the default Rojo project. ([#611])
+* Reduced the minimum size of the Studio plugin widget. ([#606])
+* Fixed current directory in `rojo fmt-project`. ([#581])
+* Fixed errors after a session has already ended. ([#587])
+* Fixed an uncommon security permission error ([#619])
+
+[#569]: https://github.com/rojo-rbx/rojo/pull/569
+[#574]: https://github.com/rojo-rbx/rojo/pull/574
+[#581]: https://github.com/rojo-rbx/rojo/pull/581
+[#587]: https://github.com/rojo-rbx/rojo/pull/587
+[#589]: https://github.com/rojo-rbx/rojo/pull/589
+[#590]: https://github.com/rojo-rbx/rojo/pull/590
+[#594]: https://github.com/rojo-rbx/rojo/pull/594
 [#602]: https://github.com/rojo-rbx/rojo/pull/602
+[#603]: https://github.com/rojo-rbx/rojo/pull/603
+[#606]: https://github.com/rojo-rbx/rojo/pull/606
+[#611]: https://github.com/rojo-rbx/rojo/pull/611
+[#613]: https://github.com/rojo-rbx/rojo/pull/613
+[#614]: https://github.com/rojo-rbx/rojo/pull/614
+[#619]: https://github.com/rojo-rbx/rojo/pull/619
+[#637]: https://github.com/rojo-rbx/rojo/pull/637
+[#642]: https://github.com/rojo-rbx/rojo/pull/642
+[7.3.0]: https://github.com/rojo-rbx/rojo/releases/tag/v7.3.0
 
 ## [7.2.1] - July 8, 2022
 * Fixed notification sound by changing it to a generic sound. ([#566])
@@ -533,4 +873,4 @@ This is a general maintenance release for the Rojo 0.5.x release series.
 * More robust syncing with a new reconciler
 
 ## [0.1.0](https://github.com/rojo-rbx/rojo/releases/tag/v0.1.0) (November 29, 2017)
-* Initial release, functionally very similar to [rbxfs](https://github.com/LPGhatguy/rbxfs)
+* Initial release, functionally very similar to [rbxfs](https://github.com/LPGhatguy/rbxfs)

Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "rojo"
-version = "7.2.1"
-rust-version = "1.58.1"
+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"
@@ -12,9 +12,7 @@ readme = "README.md"
 edition = "2021"
 build = "build.rs"
 
-exclude = [
-    "/test-projects/**",
-]
+exclude = ["/test-projects/**"]
 
 [profile.dev]
 panic = "abort"
@@ -28,7 +26,9 @@ default = []
 # Enable this feature to live-reload assets from the web UI.
 dev_live_assets = []
 
-profile-with-tracy = ["profiling/profile-with-tracy", "tracy-client"]
+# Run Rojo with this feature to open a Tracy session.
+# Currently uses protocol v63, last supported in Tracy 0.9.1.
+profile-with-tracy = ["profiling/profile-with-tracy"]
 
 [workspace]
 members = ["crates/*"]
@@ -42,7 +42,7 @@ name = "build"
 harness = false
 
 [dependencies]
-memofs = { version = "0.2.0", 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" }
@@ -51,60 +51,66 @@ memofs = { version = "0.2.0", path = "crates/memofs" }
 # rbx_reflection_database = { path = "../rbx-dom/rbx_reflection_database" }
 # rbx_xml = { path = "../rbx-dom/rbx_xml" }
 
-rbx_binary = "0.6.5"
-rbx_dom_weak = "2.4.0"
-rbx_reflection = "4.2.0"
-rbx_reflection_database = "0.2.2"
-rbx_xml = "0.12.3"
+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.44"
-backtrace = "0.3.61"
+anyhow = "1.0.80"
+backtrace = "0.3.69"
 bincode = "1.3.3"
-crossbeam-channel = "0.5.1"
-csv = "1.1.6"
-env_logger = "0.9.0"
-fs-err = "2.6.0"
-futures = "0.3.17"
-globset = "0.4.8"
+crossbeam-channel = "0.5.12"
+csv = "1.3.0"
+env_logger = "0.9.3"
+fs-err = "2.11.0"
+futures = "0.3.30"
+globset = "0.4.14"
 humantime = "2.1.0"
-hyper = { version = "0.14.13", features = ["server", "tcp", "http1"] }
+hyper = { version = "0.14.28", features = ["server", "tcp", "http1"] }
 jod-thread = "0.1.2"
-log = "0.4.14"
+log = "0.4.21"
 maplit = "1.0.2"
-notify = "4.0.17"
-opener = "0.5.0"
-reqwest = { version = "0.11.10", features = ["blocking", "json", "native-tls-vendored"] }
+num_cpus = "1.16.0"
+opener = "0.5.2"
+rayon = "1.9.0"
+reqwest = { version = "0.11.24", default-features = false, features = [
+    "blocking",
+    "json",
+    "rustls-tls",
+] }
 ritz = "0.1.0"
 roblox_install = "1.0.0"
-serde = { version = "1.0.130", features = ["derive", "rc"] }
-serde_json = "1.0.68"
-termcolor = "1.1.2"
-thiserror = "1.0.30"
-tokio = { version = "1.12.0", features = ["rt", "rt-multi-thread"] }
-uuid = { version = "1.0.0", features = ["v4", "serde"] }
-clap = { version = "3.1.18", features = ["derive"] }
-profiling = "1.0.6"
-tracy-client = { version = "0.13.2", optional = true }
+serde = { version = "1.0.197", features = ["derive", "rc"] }
+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"] }
+uuid = { version = "1.7.0", features = ["v4", "serde"] }
+clap = { version = "3.2.25", features = ["derive"] }
+profiling = "1.0.15"
 
 [target.'cfg(windows)'.dependencies]
 winreg = "0.10.1"
 
 [build-dependencies]
-memofs = { version = "0.2.0", path = "crates/memofs" }
+memofs = { version = "0.3.0", path = "crates/memofs" }
 
-embed-resource = "1.6.4"
-anyhow = "1.0.44"
+embed-resource = "1.8.0"
+anyhow = "1.0.80"
 bincode = "1.3.3"
-fs-err = "2.6.0"
+fs-err = "2.11.0"
 maplit = "1.0.2"
+semver = "1.0.22"
 
 [dev-dependencies]
 rojo-insta-ext = { path = "crates/rojo-insta-ext" }
 
-criterion = "0.3.5"
-insta = { version = "1.8.0", features = ["redactions"] }
-paste = "1.0.5"
-pretty_assertions = "1.2.1"
-serde_yaml = "0.8.21"
-tempfile = "3.2.0"
-walkdir = "2.3.2"
+criterion = "0.3.6"
+insta = { version = "1.36.1", features = ["redactions", "yaml"] }
+paste = "1.0.14"
+pretty_assertions = "1.4.0"
+serde_yaml = "0.8.26"
+tempfile = "3.10.1"
+walkdir = "2.5.0"

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-    <a href="https://rojo.space"><img src="assets/logo-512.png" alt="Rojo" height="217" /></a>
+    <a href="https://rojo.space"><img src="assets/brand_images/logo-512.png" alt="Rojo" height="217" /></a>
 </div>
 
 <div>&nbsp;</div>
@@ -40,7 +40,7 @@ Check out our [contribution guide](CONTRIBUTING.md) for detailed instructions fo
 
 Pull requests are welcome!
 
-Rojo supports Rust 1.58.1 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.
+Rojo is available under the terms of the Mozilla Public License, Version 2.0. See [LICENSE.txt](LICENSE.txt) for details.

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"

assets/default-model-project/README.md

@@ -2,7 +2,7 @@
 Generated by [Rojo](https://github.com/rojo-rbx/rojo) {rojo_version}.
 
 ## Getting Started
-To build this library or plugin, use:
+To build this library, use:
 
 ```bash
 rojo build -o "{project_name}.rbxmx"

assets/default-plugin-project/README.md

@@ -0,0 +1,17 @@
+# {project_name}
+Generated by [Rojo](https://github.com/rojo-rbx/rojo) {rojo_version}.
+
+## Getting Started
+To build this plugin to your local plugins folder, use:
+
+```bash
+rojo build -p "{project_name}.rbxm"
+```
+
+You can include the `watch` flag to re-build it on save:
+
+```bash
+rojo build -p "{project_name}.rbxm" --watch
+```
+
+For more help, check out [the Rojo documentation](https://rojo.space/docs).

assets/default-plugin-project/default.project.json

@@ -0,0 +1,6 @@
+{
+  "name": "{project_name}",
+  "tree": {
+    "$path": "src"
+  }
+}

assets/default-plugin-project/gitignore.txt

@@ -0,0 +1,3 @@
+# Plugin model files
+/{project_name}.rbxmx
+/{project_name}.rbxm

benches/build.rs

@@ -31,11 +31,12 @@ fn bench_build_place(c: &mut Criterion, name: &str, path: &str) {
 fn place_setup<P: AsRef<Path>>(input_path: P) -> (TempDir, BuildCommand) {
     let dir = tempdir().unwrap();
     let input = input_path.as_ref().to_path_buf();
-    let output = dir.path().join("output.rbxlx");
+    let output = Some(dir.path().join("output.rbxlx"));
 
     let options = BuildCommand {
         project: input,
         watch: false,
+        plugin: None,
         output,
     };
 

build.rs

@@ -7,6 +7,7 @@ use fs_err as fs;
 use fs_err::File;
 use maplit::hashmap;
 use memofs::VfsSnapshot;
+use semver::Version;
 
 fn snapshot_from_fs_path(path: &Path) -> io::Result<VfsSnapshot> {
     println!("cargo:rerun-if-changed={}", path.display());
@@ -43,6 +44,15 @@ fn main() -> Result<(), anyhow::Error> {
     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_root.join("Version.txt"))?.trim())?;
+
+    assert_eq!(
+        our_version, plugin_version,
+        "plugin version does not match Cargo version"
+    );
+
     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"))?,
@@ -51,10 +61,11 @@ fn main() -> Result<(), anyhow::Error> {
         "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 out_path = Path::new(&out_dir).join("plugin.bincode");
-    let out_file = File::create(&out_path)?;
+    let out_file = File::create(out_path)?;
 
     bincode::serialize_into(out_file, &snapshot)?;
 

crates/memofs/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## Unreleased Changes
 
+## 0.3.0 (2024-03-15)
+* Changed `StdBackend` file watching component to use minimal recursive watches. [#830]
+* Added `Vfs::read_to_string` and `Vfs::read_to_string_lf_normalized` [#854]
+
+[#830]: https://github.com/rojo-rbx/rojo/pull/830
+[#854]: https://github.com/rojo-rbx/rojo/pull/854
+
 ## 0.2.0 (2021-08-23)
 * Updated to `crossbeam-channel` 0.5.1.
 
@@ -15,4 +22,4 @@
 * Improved error messages using the [fs-err](https://crates.io/crates/fs-err) crate.
 
 ## 0.1.0 (2020-03-10)
-* Initial release
+* Initial release

crates/memofs/Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "memofs"
 description = "Virtual filesystem with configurable backends."
-version = "0.2.0"
+version = "0.3.0"
 authors = ["Lucien Greathouse <me@lpghatguy.com>"]
 edition = "2018"
 readme = "README.md"
@@ -11,7 +11,7 @@ homepage = "https://github.com/rojo-rbx/rojo/tree/master/memofs"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-crossbeam-channel = "0.5.1"
-fs-err = "2.3.0"
-notify = "4.0.15"
-serde = { version = "1.0", features = ["derive"] }
+crossbeam-channel = "0.5.12"
+fs-err = "2.11.0"
+notify = "4.0.17"
+serde = { version = "1.0.197", features = ["derive"] }

crates/memofs/src/in_memory_fs.rs

@@ -50,6 +50,12 @@ impl InMemoryFs {
     }
 }
 
+impl Default for InMemoryFs {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
 #[derive(Debug)]
 struct InMemoryFsInner {
     entries: HashMap<PathBuf, Entry>,

crates/memofs/src/lib.rs

@@ -22,9 +22,9 @@ mod noop_backend;
 mod snapshot;
 mod std_backend;
 
-use std::io;
 use std::path::{Path, PathBuf};
 use std::sync::{Arc, Mutex, MutexGuard};
+use std::{io, str};
 
 pub use in_memory_fs::InMemoryFs;
 pub use noop_backend::NoopBackend;
@@ -155,6 +155,24 @@ impl VfsInner {
         Ok(Arc::new(contents))
     }
 
+    fn read_to_string<P: AsRef<Path>>(&mut self, path: P) -> io::Result<Arc<String>> {
+        let path = path.as_ref();
+        let contents = self.backend.read(path)?;
+
+        if self.watch_enabled {
+            self.backend.watch(path)?;
+        }
+
+        let contents_str = str::from_utf8(&contents).map_err(|_| {
+            io::Error::new(
+                io::ErrorKind::InvalidData,
+                format!("File was not valid UTF-8: {}", path.display()),
+            )
+        })?;
+
+        Ok(Arc::new(contents_str.into()))
+    }
+
     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();
@@ -194,11 +212,8 @@ impl VfsInner {
     }
 
     fn commit_event(&mut self, event: &VfsEvent) -> io::Result<()> {
-        match event {
-            VfsEvent::Remove(path) => {
-                let _ = self.backend.unwatch(&path);
-            }
-            _ => {}
+        if let VfsEvent::Remove(path) = event {
+            let _ = self.backend.unwatch(path);
         }
 
         Ok(())
@@ -261,6 +276,33 @@ impl Vfs {
         self.inner.lock().unwrap().read(path)
     }
 
+    /// Read a file from the VFS (or from the underlying backend if it isn't
+    /// resident) into a string.
+    ///
+    /// Roughly equivalent to [`std::fs::read_to_string`][std::fs::read_to_string].
+    ///
+    /// [std::fs::read_to_string]: https://doc.rust-lang.org/stable/std/fs/fn.read_to_string.html
+    #[inline]
+    pub fn read_to_string<P: AsRef<Path>>(&self, path: P) -> io::Result<Arc<String>> {
+        let path = path.as_ref();
+        self.inner.lock().unwrap().read_to_string(path)
+    }
+
+    /// Read a file from the VFS (or the underlying backend if it isn't
+    /// resident) into a string, and normalize its line endings to LF.
+    ///
+    /// Roughly equivalent to [`std::fs::read_to_string`][std::fs::read_to_string], but also performs
+    /// line ending normalization.
+    ///
+    /// [std::fs::read_to_string]: https://doc.rust-lang.org/stable/std/fs/fn.read_to_string.html
+    #[inline]
+    pub fn read_to_string_lf_normalized<P: AsRef<Path>>(&self, path: P) -> io::Result<Arc<String>> {
+        let path = path.as_ref();
+        let contents = self.inner.lock().unwrap().read_to_string(path)?;
+
+        Ok(contents.replace("\r\n", "\n").into())
+    }
+
     /// Write a file to the VFS and the underlying backend.
     ///
     /// Roughly equivalent to [`std::fs::write`][std::fs::write].
@@ -431,3 +473,23 @@ impl VfsLock<'_> {
         self.inner.commit_event(event)
     }
 }
+
+#[cfg(test)]
+mod test {
+    use crate::{InMemoryFs, Vfs, VfsSnapshot};
+
+    /// https://github.com/rojo-rbx/rojo/issues/899
+    #[test]
+    fn read_to_string_lf_normalized_keeps_trailing_newline() {
+        let mut imfs = InMemoryFs::new();
+        imfs.load_snapshot("test", VfsSnapshot::file("bar\r\nfoo\r\n\r\n"))
+            .unwrap();
+
+        let vfs = Vfs::new(imfs);
+
+        assert_eq!(
+            vfs.read_to_string_lf_normalized("test").unwrap().as_str(),
+            "bar\nfoo\n\n"
+        );
+    }
+}

crates/memofs/src/noop_backend.rs

@@ -74,3 +74,9 @@ impl VfsBackend for NoopBackend {
         ))
     }
 }
+
+impl Default for NoopBackend {
+    fn default() -> Self {
+        Self::new()
+    }
+}

crates/memofs/src/std_backend.rs

@@ -1,8 +1,8 @@
-use std::io;
-use std::path::Path;
+use std::path::{Path, PathBuf};
 use std::sync::mpsc;
 use std::thread;
 use std::time::Duration;
+use std::{collections::HashSet, io};
 
 use crossbeam_channel::Receiver;
 use notify::{watcher, DebouncedEvent, RecommendedWatcher, RecursiveMode, Watcher};
@@ -13,6 +13,7 @@ use crate::{DirEntry, Metadata, ReadDir, VfsBackend, VfsEvent};
 pub struct StdBackend {
     watcher: RecommendedWatcher,
     watcher_receiver: Receiver<VfsEvent>,
+    watches: HashSet<PathBuf>,
 }
 
 impl StdBackend {
@@ -48,6 +49,7 @@ impl StdBackend {
         Self {
             watcher,
             watcher_receiver: rx,
+            watches: HashSet::new(),
         }
     }
 }
@@ -97,14 +99,30 @@ impl VfsBackend for StdBackend {
     }
 
     fn watch(&mut self, path: &Path) -> io::Result<()> {
-        self.watcher
-            .watch(path, RecursiveMode::NonRecursive)
-            .map_err(|inner| io::Error::new(io::ErrorKind::Other, inner))
+        if self.watches.contains(path)
+            || path
+                .ancestors()
+                .any(|ancestor| self.watches.contains(ancestor))
+        {
+            Ok(())
+        } else {
+            self.watches.insert(path.to_path_buf());
+            self.watcher
+                .watch(path, RecursiveMode::Recursive)
+                .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(|inner| io::Error::new(io::ErrorKind::Other, inner))
     }
 }
+
+impl Default for StdBackend {
+    fn default() -> Self {
+        Self::new()
+    }
+}

crates/rojo-insta-ext/Cargo.toml

@@ -6,5 +6,5 @@ edition = "2018"
 publish = false
 
 [dependencies]
-serde = "1.0.99"
-serde_yaml = "0.8.9"
+serde = "1.0.197"
+serde_yaml = "0.8.26"

foreman.toml

@@ -1,5 +0,0 @@
-[tools]
-rojo = { source = "rojo-rbx/rojo", version = "7.2.1" }
-run-in-roblox = { source = "rojo-rbx/run-in-roblox", version = "0.3.0" }
-selene = { source = "Kampfkarren/selene", version = "0.20.0" }
-wally = { source = "UpliftGames/wally", version = "0.3.1"}

plugin/Version.txt

@@ -0,0 +1 @@
+7.4.0

plugin/default.project.json

@@ -1,25 +1,27 @@
 {
-	"name": "Rojo",
-	"tree": {
-		"$className": "Folder",
-		"Plugin": {
-			"$path": "src"
-		},
-		"Packages": {
-			"$path": "Packages",
-
-			"Log": {
-				"$path": "log"
-			},
-			"Http": {
-				"$path": "http"
-			},
-			"Fmt": {
-				"$path": "fmt"
-			},
-			"RbxDom": {
-				"$path": "rbx_dom_lua"
-			}
-		}
-	}
-}
+  "name": "Rojo",
+  "tree": {
+    "$className": "Folder",
+    "Plugin": {
+      "$path": "src"
+    },
+    "Packages": {
+      "$path": "Packages",
+      "Log": {
+        "$path": "log"
+      },
+      "Http": {
+        "$path": "http"
+      },
+      "Fmt": {
+        "$path": "fmt"
+      },
+      "RbxDom": {
+        "$path": "rbx_dom_lua"
+      }
+    },
+    "Version": {
+      "$path": "Version.txt"
+    }
+  }
+}

plugin/http/Error.lua

@@ -3,12 +3,12 @@ Error.__index = Error
 
 Error.Kind = {
 	HttpNotEnabled = {
-		message = "Rojo requires HTTP access, which is not enabled.\n" ..
-			"Check your game settings, located in the 'Home' tab of Studio.",
+		message = "Rojo requires HTTP access, which is not enabled.\n"
+			.. "Check your game settings, located in the 'Home' tab of Studio.",
 	},
 	ConnectFailed = {
-		message = "Couldn't connect to the Rojo server.\n" ..
-			"Make sure the server is running — use 'rojo serve' to run it!",
+		message = "Couldn't connect to the Rojo server.\n"
+			.. "Make sure the server is running — use 'rojo serve' to run it!",
 	},
 	Timeout = {
 		message = "HTTP request timed out.",
@@ -63,4 +63,13 @@ function Error.fromRobloxErrorString(message)
 	return Error.new(Error.Kind.Unknown, message)
 end
 
+function Error.fromResponse(response)
+	local lower = (response.body or ""):lower()
+	if response.code == 408 or response.code == 504 or lower:find("timed? ?out") then
+		return Error.new(Error.Kind.Timeout)
+	end
+
+	return Error.new(Error.Kind.Unknown, string.format("%s: %s", tostring(response.code), tostring(response.body)))
+end
+
 return Error

plugin/http/init.lua

@@ -30,8 +30,13 @@ local function performRequest(requestParams)
 			end)
 
 			if success then
-				Log.trace("Request {} success, status code {}", requestId, response.StatusCode)
-				resolve(HttpResponse.fromRobloxResponse(response))
+				Log.trace("Request {} success, response {:#?}", requestId, response)
+				local httpResponse = HttpResponse.fromRobloxResponse(response)
+				if httpResponse:isSuccess() then
+					resolve(httpResponse)
+				else
+					reject(HttpError.fromResponse(httpResponse))
+				end
 			else
 				Log.trace("Request {} failure: {:?}", requestId, response)
 				reject(HttpError.fromRobloxErrorString(response))
@@ -63,4 +68,4 @@ function Http.jsonDecode(source)
 	return HttpService:JSONDecode(source)
 end
 
-return Http
+return Http

plugin/rbx_dom_lua/EncodedValue.lua

@@ -20,8 +20,8 @@ local function serializeFloat(value)
 	return value
 end
 
-local ALL_AXES = {"X", "Y", "Z"}
-local ALL_FACES = {"Right", "Top", "Back", "Left", "Bottom", "Front"}
+local ALL_AXES = { "X", "Y", "Z" }
+local ALL_FACES = { "Right", "Top", "Back", "Left", "Bottom", "Front" }
 
 local EncodedValue = {}
 
@@ -37,7 +37,10 @@ types = {
 				if ok then
 					output[key] = result
 				else
-					local warning = ("Could not decode attribute value of type %q: %s"):format(typeof(value), tostring(result))
+					local warning = ("Could not decode attribute value of type %q: %s"):format(
+						typeof(value),
+						tostring(result)
+					)
 					warn(warning)
 				end
 			end
@@ -53,7 +56,10 @@ types = {
 				if ok then
 					output[key] = result
 				else
-					local warning = ("Could not encode attribute value of type %q: %s"):format(typeof(value), tostring(result))
+					local warning = ("Could not encode attribute value of type %q: %s"):format(
+						typeof(value),
+						tostring(result)
+					)
 					warn(warning)
 				end
 			end
@@ -111,6 +117,7 @@ types = {
 			local pos = pod.position
 			local orient = pod.orientation
 
+			--stylua: ignore
 			return CFrame.new(
 				pos[1], pos[2], pos[3],
 				orient[1][1], orient[1][2], orient[1][3],
@@ -120,17 +127,14 @@ types = {
 		end,
 
 		toPod = function(roblox)
-			local x, y, z,
-				r00, r01, r02,
-				r10, r11, r12,
-				r20, r21, r22 = roblox:GetComponents()
+			local x, y, z, r00, r01, r02, r10, r11, r12, r20, r21, r22 = roblox:GetComponents()
 
 			return {
-				position = {x, y, z},
+				position = { x, y, z },
 				orientation = {
-					{r00, r01, r02},
-					{r10, r11, r12},
-					{r20, r21, r22},
+					{ r00, r01, r02 },
+					{ r10, r11, r12 },
+					{ r20, r21, r22 },
 				},
 			}
 		end,
@@ -140,7 +144,7 @@ types = {
 		fromPod = unpackDecoder(Color3.new),
 
 		toPod = function(roblox)
-			return {roblox.r, roblox.g, roblox.b}
+			return { roblox.r, roblox.g, roblox.b }
 		end,
 	},
 
@@ -161,10 +165,7 @@ types = {
 			local keypoints = {}
 
 			for index, keypoint in ipairs(pod.keypoints) do
-				keypoints[index] = ColorSequenceKeypoint.new(
-					keypoint.time,
-					types.Color3.fromPod(keypoint.color)
-				)
+				keypoints[index] = ColorSequenceKeypoint.new(keypoint.time, types.Color3.fromPod(keypoint.color))
 			end
 
 			return ColorSequence.new(keypoints)
@@ -238,6 +239,23 @@ types = {
 		toPod = serializeFloat,
 	},
 
+	Font = {
+		fromPod = function(pod)
+			return Font.new(
+				pod.family,
+				if pod.weight ~= nil then Enum.FontWeight[pod.weight] else nil,
+				if pod.style ~= nil then Enum.FontStyle[pod.style] else nil
+			)
+		end,
+		toPod = function(roblox)
+			return {
+				family = roblox.Family,
+				weight = roblox.Weight.Name,
+				style = roblox.Style.Name,
+			}
+		end,
+	},
+
 	Int32 = {
 		fromPod = identity,
 		toPod = identity,
@@ -248,11 +266,32 @@ types = {
 		toPod = identity,
 	},
 
+	MaterialColors = {
+		fromPod = function(pod: { [string]: { number } })
+			local real = {}
+			for name, color in pod do
+				real[Enum.Material[name]] = Color3.fromRGB(color[1], color[2], color[3])
+			end
+			return real
+		end,
+		toPod = function(roblox: { [Enum.Material]: Color3 })
+			local pod = {}
+			for material, color in roblox do
+				pod[material.Name] = {
+					math.round(math.clamp(color.R, 0, 1) * 255),
+					math.round(math.clamp(color.G, 0, 1) * 255),
+					math.round(math.clamp(color.B, 0, 1) * 255),
+				}
+			end
+			return pod
+		end,
+	},
+
 	NumberRange = {
 		fromPod = unpackDecoder(NumberRange.new),
 
 		toPod = function(roblox)
-			return {roblox.Min, roblox.Max}
+			return { roblox.Min, roblox.Max }
 		end,
 	},
 
@@ -261,11 +300,7 @@ types = {
 			local keypoints = {}
 
 			for index, keypoint in ipairs(pod.keypoints) do
-				keypoints[index] = NumberSequenceKeypoint.new(
-					keypoint.time,
-					keypoint.value,
-					keypoint.envelope
-				)
+				keypoints[index] = NumberSequenceKeypoint.new(keypoint.time, keypoint.value, keypoint.envelope)
 			end
 
 			return NumberSequence.new(keypoints)
@@ -320,10 +355,7 @@ types = {
 
 	Ray = {
 		fromPod = function(pod)
-			return Ray.new(
-				types.Vector3.fromPod(pod.origin),
-				types.Vector3.fromPod(pod.direction)
-			)
+			return Ray.new(types.Vector3.fromPod(pod.origin), types.Vector3.fromPod(pod.direction))
 		end,
 
 		toPod = function(roblox)
@@ -336,10 +368,7 @@ types = {
 
 	Rect = {
 		fromPod = function(pod)
-			return Rect.new(
-				types.Vector2.fromPod(pod[1]),
-				types.Vector2.fromPod(pod[2])
-			)
+			return Rect.new(types.Vector2.fromPod(pod[1]), types.Vector2.fromPod(pod[2]))
 		end,
 
 		toPod = function(roblox)
@@ -351,31 +380,28 @@ types = {
 	},
 
 	Ref = {
-		fromPod = function(_pod)
+		fromPod = function(_)
 			error("Ref cannot be decoded on its own")
 		end,
 
-		toPod = function(_roblox)
+		toPod = function(_)
 			error("Ref can not be encoded on its own")
 		end,
 	},
 
 	Region3 = {
-		fromPod = function(pod)
+		fromPod = function(_)
 			error("Region3 is not implemented")
 		end,
 
-		toPod = function(roblox)
+		toPod = function(_)
 			error("Region3 is not implemented")
 		end,
 	},
 
 	Region3int16 = {
 		fromPod = function(pod)
-			return Region3int16.new(
-				types.Vector3int16.fromPod(pod[1]),
-				types.Vector3int16.fromPod(pod[2])
-			)
+			return Region3int16.new(types.Vector3int16.fromPod(pod[1]), types.Vector3int16.fromPod(pod[2]))
 		end,
 
 		toPod = function(roblox)
@@ -387,11 +413,11 @@ types = {
 	},
 
 	SharedString = {
-		fromPod = function(pod)
+		fromPod = function(_pod)
 			error("SharedString is not supported")
 		end,
 
-		toPod = function(roblox)
+		toPod = function(_roblox)
 			error("SharedString is not supported")
 		end,
 	},
@@ -405,16 +431,13 @@ types = {
 		fromPod = unpackDecoder(UDim.new),
 
 		toPod = function(roblox)
-			return {roblox.Scale, roblox.Offset}
+			return { roblox.Scale, roblox.Offset }
 		end,
 	},
 
 	UDim2 = {
 		fromPod = function(pod)
-			return UDim2.new(
-				types.UDim.fromPod(pod[1]),
-				types.UDim.fromPod(pod[2])
-			)
+			return UDim2.new(types.UDim.fromPod(pod[1]), types.UDim.fromPod(pod[2]))
 		end,
 
 		toPod = function(roblox)
@@ -445,7 +468,7 @@ types = {
 		fromPod = unpackDecoder(Vector2int16.new),
 
 		toPod = function(roblox)
-			return {roblox.X, roblox.Y}
+			return { roblox.X, roblox.Y }
 		end,
 	},
 
@@ -465,14 +488,37 @@ types = {
 		fromPod = unpackDecoder(Vector3int16.new),
 
 		toPod = function(roblox)
-			return {roblox.X, roblox.Y, roblox.Z}
+			return { roblox.X, roblox.Y, roblox.Z }
 		end,
 	},
 }
 
+types.OptionalCFrame = {
+	fromPod = function(pod)
+		if pod == nil then
+			return nil
+		else
+			return types.CFrame.fromPod(pod)
+		end
+	end,
+
+	toPod = function(roblox)
+		if roblox == nil then
+			return nil
+		else
+			return types.CFrame.toPod(roblox)
+		end
+	end,
+}
+
 function EncodedValue.decode(encodedValue)
 	local ty, value = next(encodedValue)
 
+	if ty == nil then
+		-- If the encoded pair is empty, assume it is an unoccupied optional value
+		return true, nil
+	end
+
 	local typeImpl = types[ty]
 	if typeImpl == nil then
 		return false, "Couldn't decode value " .. tostring(ty)

plugin/rbx_dom_lua/EncodedValue.spec.lua

@@ -1,72 +0,0 @@
-return function()
-	local HttpService = game:GetService("HttpService")
-	
-	local EncodedValue = require(script.Parent.EncodedValue)
-	local allValues = require(script.Parent.allValues)
-
-	local function deepEq(a, b)
-		if typeof(a) ~= typeof(b) then
-			return false
-		end
-
-		local ty = typeof(a)
-
-		if ty == "table" then
-			local visited = {}
-			
-			for key, valueA in pairs(a) do
-				visited[key] = true
-				
-				if not deepEq(valueA, b[key]) then
-					return false
-				end
-			end
-
-			for key, valueB in pairs(b) do
-				if visited[key] then
-					continue
-				end
-
-				if not deepEq(valueB, a[key]) then
-					return false
-				end
-			end
-
-			return true
-		else
-			return a == b
-		end
-	end
-
-	local extraAssertions = {
-		CFrame = function(value)
-			expect(value).to.equal(CFrame.new(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12))
-		end,
-	}
-
-	for testName, testEntry in pairs(allValues) do
-		it("round trip " .. testName, function()
-			local ok, decoded = EncodedValue.decode(testEntry.value)
-			assert(ok, decoded)
-
-			if extraAssertions[testName] ~= nil then
-				extraAssertions[testName](decoded)
-			end
-
-			local ok, encoded = EncodedValue.encode(decoded, testEntry.ty)
-			assert(ok, encoded)
-
-			if not deepEq(encoded, testEntry.value) then
-				local expected = HttpService:JSONEncode(testEntry.value)
-				local actual = HttpService:JSONEncode(encoded)
-
-				local message = string.format(
-					"Round-trip results did not match.\nExpected:\n%s\nActual:\n%s",
-					expected, actual
-				)
-
-				error(message)
-			end
-		end)
-	end
-end

plugin/rbx_dom_lua/Error.lua

@@ -25,4 +25,4 @@ function Error:__tostring()
 	return ("Error(%s: %s)"):format(self.kind, tostring(self.extra))
 end
 
-return Error
+return Error

plugin/rbx_dom_lua/PropertyDescriptor.lua

@@ -53,6 +53,11 @@ function PropertyDescriptor:read(instance)
 	end
 
 	if self.scriptability == "Custom" then
+		if customProperties[self.className] == nil then
+			local fullName = ("%s.%s"):format(instance.className, self.name)
+			return false, Error.new(Error.Kind.PropertyNotReadable, fullName)
+		end
+
 		local interface = customProperties[self.className][self.name]
 
 		return interface.read(instance, self.name)
@@ -79,6 +84,11 @@ function PropertyDescriptor:write(instance, value)
 	end
 
 	if self.scriptability == "Custom" then
+		if customProperties[self.className] == nil then
+			local fullName = ("%s.%s"):format(instance.className, self.name)
+			return false, Error.new(Error.Kind.PropertyNotWritable, fullName)
+		end
+
 		local interface = customProperties[self.className][self.name]
 
 		return interface.write(instance, self.name, value)

plugin/rbx_dom_lua/allValues.json

@@ -207,6 +207,17 @@
     },
     "ty": "Float64"
   },
+  "Font": {
+    "value": {
+      "Font": {
+        "family": "rbxasset://fonts/families/SourceSansPro.json",
+        "weight": "Regular",
+        "style": "Normal",
+        "cachedFaceId": null
+      }
+    },
+    "ty": "Font"
+  },
   "Int32": {
     "value": {
       "Int32": 6014
@@ -219,6 +230,118 @@
     },
     "ty": "Int64"
   },
+  "MaterialColors": {
+    "value": {
+      "MaterialColors": {
+        "Grass": [
+          106,
+          127,
+          63
+        ],
+        "Slate": [
+          63,
+          127,
+          107
+        ],
+        "Concrete": [
+          127,
+          102,
+          63
+        ],
+        "Brick": [
+          138,
+          86,
+          62
+        ],
+        "Sand": [
+          143,
+          126,
+          95
+        ],
+        "WoodPlanks": [
+          139,
+          109,
+          79
+        ],
+        "Rock": [
+          102,
+          108,
+          111
+        ],
+        "Glacier": [
+          101,
+          176,
+          234
+        ],
+        "Snow": [
+          195,
+          199,
+          218
+        ],
+        "Sandstone": [
+          137,
+          90,
+          71
+        ],
+        "Mud": [
+          58,
+          46,
+          36
+        ],
+        "Basalt": [
+          30,
+          30,
+          37
+        ],
+        "Ground": [
+          102,
+          92,
+          59
+        ],
+        "CrackedLava": [
+          232,
+          156,
+          74
+        ],
+        "Asphalt": [
+          115,
+          123,
+          107
+        ],
+        "Cobblestone": [
+          132,
+          123,
+          90
+        ],
+        "Ice": [
+          129,
+          194,
+          224
+        ],
+        "LeafyGrass": [
+          115,
+          132,
+          74
+        ],
+        "Salt": [
+          198,
+          189,
+          181
+        ],
+        "Limestone": [
+          206,
+          173,
+          148
+        ],
+        "Pavement": [
+          148,
+          148,
+          140
+        ]
+      }
+    },
+    "ty": "MaterialColors"
+  },
   "NumberRange": {
     "value": {
       "NumberRange": [
@@ -247,6 +370,41 @@
     },
     "ty": "NumberSequence"
   },
+  "OptionalCFrame-None": {
+    "value": {
+      "OptionalCFrame": null
+    },
+    "ty": "OptionalCFrame"
+  },
+  "OptionalCFrame-Some": {
+    "value": {
+      "OptionalCFrame": {
+        "position": [
+          0.0,
+          0.0,
+          0.0
+        ],
+        "orientation": [
+          [
+            1.0,
+            0.0,
+            0.0
+          ],
+          [
+            0.0,
+            1.0,
+            0.0
+          ],
+          [
+            0.0,
+            0.0,
+            1.0
+          ]
+        ]
+      }
+    },
+    "ty": "OptionalCFrame"
+  },
   "PhysicalProperties-Custom": {
     "value": {
       "PhysicalProperties": {

plugin/rbx_dom_lua/base64.lua

@@ -136,4 +136,4 @@ end
 return {
 	decode = decodeBase64,
 	encode = encodeBase64,
-}
+}

plugin/rbx_dom_lua/base64.spec.lua

@@ -1,29 +0,0 @@
-return function()
-	local base64 = require(script.Parent.base64)
-
-	it("should encode and decode", function()
-		local function try(str, expected)
-			local encoded = base64.encode(str)
-			expect(encoded).to.equal(expected)
-			expect(base64.decode(encoded)).to.equal(str)
-		end
-
-		try("Man", "TWFu")
-		try("Ma", "TWE=")
-		try("M", "TQ==")
-		try("ManM", "TWFuTQ==")
-		try(
-			[[Man is distinguished, not only by his reason, but by this ]]..
-			[[singular passion from other animals, which is a lust of the ]]..
-			[[mind, that by a perseverance of delight in the continued and ]]..
-			[[indefatigable generation of knowledge, exceeds the short ]]..
-			[[vehemence of any carnal pleasure.]],
-			[[TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb24sI]]..
-			[[GJ1dCBieSB0aGlzIHNpbmd1bGFyIHBhc3Npb24gZnJvbSBvdGhlciBhbmltYW]]..
-			[[xzLCB3aGljaCBpcyBhIGx1c3Qgb2YgdGhlIG1pbmQsIHRoYXQgYnkgYSBwZXJ]]..
-			[[zZXZlcmFuY2Ugb2YgZGVsaWdodCBpbiB0aGUgY29udGludWVkIGFuZCBpbmRl]]..
-			[[ZmF0aWdhYmxlIGdlbmVyYXRpb24gb2Yga25vd2xlZGdlLCBleGNlZWRzIHRoZ]]..
-			[[SBzaG9ydCB2ZWhlbWVuY2Ugb2YgYW55IGNhcm5hbCBwbGVhc3VyZS4=]]
-		)
-	end)
-end

plugin/rbx_dom_lua/customProperties.lua

@@ -1,4 +1,45 @@
 local CollectionService = game:GetService("CollectionService")
+local ScriptEditorService = game:GetService("ScriptEditorService")
+
+--- A list of `Enum.Material` values that are used for Terrain.MaterialColors
+local TERRAIN_MATERIAL_COLORS = {
+	Enum.Material.Grass,
+	Enum.Material.Slate,
+	Enum.Material.Concrete,
+	Enum.Material.Brick,
+	Enum.Material.Sand,
+	Enum.Material.WoodPlanks,
+	Enum.Material.Rock,
+	Enum.Material.Glacier,
+	Enum.Material.Snow,
+	Enum.Material.Sandstone,
+	Enum.Material.Mud,
+	Enum.Material.Basalt,
+	Enum.Material.Ground,
+	Enum.Material.CrackedLava,
+	Enum.Material.Asphalt,
+	Enum.Material.Cobblestone,
+	Enum.Material.Ice,
+	Enum.Material.LeafyGrass,
+	Enum.Material.Salt,
+	Enum.Material.Limestone,
+	Enum.Material.Pavement,
+}
+
+local function isAttributeNameValid(attributeName)
+	-- For SetAttribute to succeed, the attribute name must be less than or
+	-- equal to 100 characters...
+	return #attributeName <= 100
+		-- ...and must only contain alphanumeric characters, periods, hyphens,
+		-- underscores, or forward slashes.
+		and attributeName:match("[^%w%.%-_/]") == nil
+end
+
+local function isAttributeNameReserved(attributeName)
+	-- For SetAttribute to succeed, attribute names must not use the RBX
+	-- prefix, which is reserved by Roblox.
+	return attributeName:sub(1, 3) == "RBX"
+end
 
 -- Defines how to read and write properties that aren't directly scriptable.
 --
@@ -11,18 +52,40 @@ return {
 			end,
 			write = function(instance, _, value)
 				local existing = instance:GetAttributes()
+				local didAllWritesSucceed = true
 
-				for key, attr in pairs(value) do
-					instance:SetAttribute(key, attr)
+				for attributeName, attributeValue in pairs(value) do
+					if isAttributeNameReserved(attributeName) then
+						-- If the attribute name is reserved, then we don't
+						-- really care about reporting any failures about
+						-- it.
+						continue
+					end
+
+					if not isAttributeNameValid(attributeName) then
+						didAllWritesSucceed = false
+						continue
+					end
+
+					instance:SetAttribute(attributeName, attributeValue)
 				end
 
-				for key in pairs(existing) do
-					if value[key] == nil then
-						instance:SetAttribute(key, nil)
+				for existingAttributeName in pairs(existing) do
+					if isAttributeNameReserved(existingAttributeName) then
+						continue
+					end
+
+					if not isAttributeNameValid(existingAttributeName) then
+						didAllWritesSucceed = false
+						continue
+					end
+
+					if value[existingAttributeName] == nil then
+						instance:SetAttribute(existingAttributeName, nil)
 					end
 				end
 
-				return true
+				return didAllWritesSucceed
 			end,
 		},
 		Tags = {
@@ -52,13 +115,86 @@ return {
 	},
 	LocalizationTable = {
 		Contents = {
-			read = function(instance, key)
+			read = function(instance, _)
 				return true, instance:GetContents()
 			end,
-			write = function(instance, key, value)
+			write = function(instance, _, value)
 				instance:SetContents(value)
 				return true
 			end,
 		},
 	},
+	Model = {
+		Scale = {
+			read = function(instance, _, _)
+				return true, instance:GetScale()
+			end,
+			write = function(instance, _, value)
+				return true, instance:ScaleTo(value)
+			end,
+		},
+		WorldPivotData = {
+			read = function(instance)
+				return true, instance.WorldPivot
+			end,
+			write = function(instance, _, value)
+				if value == nil then
+					return true, nil
+				else
+					instance.WorldPivot = value
+					return true
+				end
+			end,
+		},
+	},
+	Terrain = {
+		MaterialColors = {
+			read = function(instance: Terrain)
+				-- There's no way to get a list of every color, so we have to
+				-- make one.
+				local colors = {}
+				for _, material in TERRAIN_MATERIAL_COLORS do
+					colors[material] = instance:GetMaterialColor(material)
+				end
+
+				return true, colors
+			end,
+			write = function(instance: Terrain, _, value: { [Enum.Material]: Color3 })
+				for material, color in value do
+					instance:SetMaterialColor(material, color)
+				end
+				return true
+			end,
+		},
+	},
+	Script = {
+		Source = {
+			read = function(instance: Script)
+				return true, ScriptEditorService:GetEditorSource(instance)
+			end,
+			write = function(instance: Script, _, value: string)
+				task.spawn(function()
+					ScriptEditorService:UpdateSourceAsync(instance, function()
+						return value
+					end)
+				end)
+				return true
+			end,
+		},
+	},
+	ModuleScript = {
+		Source = {
+			read = function(instance: ModuleScript)
+				return true, ScriptEditorService:GetEditorSource(instance)
+			end,
+			write = function(instance: ModuleScript, _, value: string)
+				task.spawn(function()
+					ScriptEditorService:UpdateSourceAsync(instance, function()
+						return value
+					end)
+				end)
+				return true
+			end,
+		},
+	},
 }

plugin/rbx_dom_lua/init.lua

@@ -24,7 +24,8 @@ local function findCanonicalPropertyDescriptor(className, propertyName)
 				return PropertyDescriptor.fromRaw(
 					currentClass.Properties[aliasData.AliasFor],
 					currentClassName,
-					aliasData.AliasFor)
+					aliasData.AliasFor
+				)
 			end
 
 			return nil

plugin/rbx_dom_lua/init.spec.lua

@@ -1,7 +0,0 @@
-return function()
-	local RbxDom = require(script.Parent)
-
-	it("should load", function()
-		expect(RbxDom).to.be.ok()
-	end)
-end

plugin/run-tests.server.lua

@@ -4,16 +4,8 @@ local TestEZ = require(ReplicatedStorage.Packages.TestEZ)
 
 local Rojo = ReplicatedStorage.Rojo
 
-local DevSettings = require(Rojo.Plugin.DevSettings)
-
-local setDevSettings = not DevSettings:hasChangedValues()
-
-if setDevSettings then
-	DevSettings:createTestSettings()
-end
+local Settings = require(Rojo.Plugin.Settings)
+Settings:set("logLevel", "Trace")
+Settings:set("typecheckingEnabled", true)
 
 require(Rojo.Plugin.runTests)(TestEZ)
-
-if setDevSettings then
-	DevSettings:resetValues()
-end

plugin/src/ApiContext.lua

@@ -11,13 +11,6 @@ local validateApiInfo = Types.ifEnabled(Types.ApiInfoResponse)
 local validateApiRead = Types.ifEnabled(Types.ApiReadResponse)
 local validateApiSubscribe = Types.ifEnabled(Types.ApiSubscribeResponse)
 
---[[
-	Returns a promise that will never resolve nor reject.
-]]
-local function hangingPromise()
-	return Promise.new(function() end)
-end
-
 local function rejectFailedRequests(response)
 	if response.code >= 400 then
 		local message = string.format("HTTP %s:\n%s", tostring(response.code), response.body)
@@ -31,15 +24,17 @@ end
 local function rejectWrongProtocolVersion(infoResponseBody)
 	if infoResponseBody.protocolVersion ~= Config.protocolVersion then
 		local message = (
-			"Found a Rojo dev server, but it's using a different protocol version, and is incompatible." ..
-			"\nMake sure you have matching versions of both the Rojo plugin and server!" ..
-			"\n\nYour client is version %s, with protocol version %s. It expects server version %s." ..
-			"\nYour server is version %s, with protocol version %s." ..
-			"\n\nGo to https://github.com/rojo-rbx/rojo for more details."
+			"Found a Rojo dev server, but it's using a different protocol version, and is incompatible."
+			.. "\nMake sure you have matching versions of both the Rojo plugin and server!"
+			.. "\n\nYour client is version %s, with protocol version %s. It expects server version %s."
+			.. "\nYour server is version %s, with protocol version %s."
+			.. "\n\nGo to https://github.com/rojo-rbx/rojo for more details."
 		):format(
-			Version.display(Config.version), Config.protocolVersion,
+			Version.display(Config.version),
+			Config.protocolVersion,
 			Config.expectedServerVersionString,
-			infoResponseBody.serverVersion, infoResponseBody.protocolVersion
+			infoResponseBody.serverVersion,
+			infoResponseBody.protocolVersion
 		)
 
 		return Promise.reject(message)
@@ -66,14 +61,11 @@ local function rejectWrongPlaceId(infoResponseBody)
 			end
 
 			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 %s, but needs to be one of these:" ..
-				"\n%s" ..
-				"\n\nTo change this list, edit 'servePlaceIds' in your .project.json file."
-			):format(
-				tostring(game.PlaceId),
-				table.concat(idList, "\n")
-			)
+				"Found a Rojo server, but its project is set to only be used with a specific list of places."
+				.. "\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(tostring(game.PlaceId), table.concat(idList, "\n"))
 
 			return Promise.reject(message)
 		end
@@ -93,6 +85,7 @@ function ApiContext.new(baseUrl)
 		__sessionId = nil,
 		__messageCursor = -1,
 		__connected = true,
+		__activeRequests = {},
 	}
 
 	return setmetatable(self, ApiContext)
@@ -113,6 +106,11 @@ end
 
 function ApiContext:disconnect()
 	self.__connected = false
+	for request in self.__activeRequests do
+		Log.trace("Cancelling request {}", request)
+		request:cancel()
+	end
+	self.__activeRequests = {}
 end
 
 function ApiContext:setMessageCursor(index)
@@ -142,18 +140,15 @@ 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.json)
-		:andThen(function(body)
-			if body.sessionId ~= self.__sessionId then
-				return Promise.reject("Server changed ID")
-			end
+	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
 
-			assert(validateApiRead(body))
+		assert(validateApiRead(body))
 
-			return body
-		end)
+		return body
+	end)
 end
 
 function ApiContext:write(patch)
@@ -190,63 +185,58 @@ function ApiContext:write(patch)
 
 	body = Http.jsonEncode(body)
 
-	return Http.post(url, body)
-		:andThen(rejectFailedRequests)
-		:andThen(Http.Response.json)
-		:andThen(function(body)
-			Log.info("Write response: {:?}", body)
+	return Http.post(url, body):andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(responseBody)
+		Log.info("Write response: {:?}", responseBody)
 
-			return body
-		end)
+		return responseBody
+	end)
 end
 
 function ApiContext:retrieveMessages()
 	local url = ("%s/api/subscribe/%s"):format(self.__baseUrl, self.__messageCursor)
 
 	local function sendRequest()
-		return Http.get(url)
-			:catch(function(err)
-				if err.type == Http.Error.Kind.Timeout then
-					if self.__connected then
-						return sendRequest()
-					else
-						return hangingPromise()
-					end
-				end
-
-				return Promise.reject(err)
-			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")
+		local request = Http.get(url):catch(function(err)
+			if err.type == Http.Error.Kind.Timeout and self.__connected then
+				return sendRequest()
 			end
 
-			assert(validateApiSubscribe(body))
-
-			self:setMessageCursor(body.messageCursor)
-
-			return body.messages
+			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
+
+		assert(validateApiSubscribe(body))
+
+		self:setMessageCursor(body.messageCursor)
+
+		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.json)
-		:andThen(function(body)
-			if body.sessionId ~= self.__sessionId then
-				return Promise.reject("Server changed ID")
-			end
+	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
 
-			return nil
-		end)
+		return nil
+	end)
 end
 
 return ApiContext

plugin/src/App/Components/BorderedContainer.lua

@@ -24,8 +24,10 @@ local function BorderedContainer(props)
 			layoutOrder = props.layoutOrder,
 		}, {
 			Content = e("Frame", {
-				Size = UDim2.new(1, 0, 1, 0),
+				Size = UDim2.new(1, -2, 1, -2),
+				Position = UDim2.new(0, 1, 0, 1),
 				BackgroundTransparency = 1,
+				ZIndex = 2,
 			}, props[Roact.Children]),
 
 			Border = e(SlicedImage, {

plugin/src/App/Components/Checkbox.lua

@@ -10,6 +10,7 @@ local Theme = require(Plugin.App.Theme)
 local bindingUtil = require(Plugin.App.bindingUtil)
 
 local SlicedImage = require(script.Parent.SlicedImage)
+local Tooltip = require(script.Parent.Tooltip)
 
 local e = Roact.createElement
 
@@ -22,12 +23,10 @@ end
 
 function Checkbox:didUpdate(lastProps)
 	if lastProps.active ~= self.props.active then
-		self.motor:setGoal(
-			Flipper.Spring.new(self.props.active and 1 or 0, {
-				frequency = 6,
-				dampingRatio = 1.1,
-			})
-		)
+		self.motor:setGoal(Flipper.Spring.new(self.props.active and 1 or 0, {
+			frequency = 6,
+			dampingRatio = 1.1,
+		}))
 	end
 end
 
@@ -50,8 +49,18 @@ function Checkbox:render()
 			ZIndex = self.props.zIndex,
 			BackgroundTransparency = 1,
 
-			[Roact.Event.Activated] = self.props.onClick,
+			[Roact.Event.Activated] = function()
+				if self.props.locked then
+					return
+				end
+				self.props.onClick()
+			end,
 		}, {
+			StateTip = e(Tooltip.Trigger, {
+				text = (if self.props.locked then "[LOCKED] " else "")
+					.. (if self.props.active then "Enabled" else "Disabled"),
+			}),
+
 			Active = e(SlicedImage, {
 				slice = Assets.Slices.RoundedBackground,
 				color = theme.Active.BackgroundColor,
@@ -60,7 +69,7 @@ function Checkbox:render()
 				zIndex = 2,
 			}, {
 				Icon = e("ImageLabel", {
-					Image = Assets.Images.Checkbox.Active,
+					Image = if self.props.locked then Assets.Images.Checkbox.Locked else Assets.Images.Checkbox.Active,
 					ImageColor3 = theme.Active.IconColor,
 					ImageTransparency = activeTransparency,
 
@@ -79,7 +88,9 @@ function Checkbox:render()
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
 				Icon = e("ImageLabel", {
-					Image = Assets.Images.Checkbox.Inactive,
+					Image = if self.props.locked
+						then Assets.Images.Checkbox.Locked
+						else Assets.Images.Checkbox.Inactive,
 					ImageColor3 = theme.Inactive.IconColor,
 					ImageTransparency = self.props.transparency,
 

plugin/src/App/Components/ClassIcon.lua

@@ -0,0 +1,126 @@
+local StudioService = game:GetService("StudioService")
+local AssetService = game:GetService("AssetService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local e = Roact.createElement
+
+local EditableImage = require(Plugin.App.Components.EditableImage)
+
+local imageCache = {}
+local function getImageSizeAndPixels(image)
+	if not imageCache[image] then
+		local editableImage = AssetService:CreateEditableImageAsync(image)
+		imageCache[image] = {
+			Size = editableImage.Size,
+			Pixels = editableImage:ReadPixels(Vector2.zero, editableImage.Size),
+		}
+	end
+
+	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
+		local success, editableImageSize, editableImagePixels = pcall(function()
+			local size, pixels = getImageSizeAndPixels(iconProps.Image)
+
+			local minVal, maxVal = math.huge, -math.huge
+			for i = 1, #pixels, 4 do
+				if pixels[i + 3] == 0 then
+					continue
+				end
+				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 = 1, #pixels, 4 do
+				if pixels[i + 3] == 0 then
+					continue
+				end
+
+				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
+					newVal = val * (0.9 + 0.1 * (pixelVal - minVal) / (maxVal - minVal))
+				end
+
+				local newPixelColor = Color3.fromHSV(hue, sat, newVal)
+				pixels[i], pixels[i + 1], pixels[i + 2] = newPixelColor.R, newPixelColor.G, newPixelColor.B
+			end
+			return size, pixels
+		end)
+		if success then
+			iconProps.EditableImagePixels = editableImagePixels
+			iconProps.EditableImageSize = editableImageSize
+		end
+	end
+
+	return iconProps
+end
+
+local ClassIcon = Roact.PureComponent:extend("ClassIcon")
+
+function ClassIcon:init()
+	self.state = {
+		iconProps = nil,
+	}
+end
+
+function ClassIcon:updateIcon()
+	local props = self.props
+	local iconProps = getRecoloredClassIcon(props.className, props.color)
+	self:setState({
+		iconProps = iconProps,
+	})
+end
+
+function ClassIcon:didMount()
+	self:updateIcon()
+end
+
+function ClassIcon:didUpdate(lastProps)
+	if lastProps.className ~= self.props.className or lastProps.color ~= self.props.color then
+		self:updateIcon()
+	end
+end
+
+function ClassIcon:render()
+	local iconProps = self.state.iconProps
+	if not iconProps then
+		return nil
+	end
+
+	return e(
+		"ImageLabel",
+		{
+			Size = self.props.size,
+			Position = self.props.position,
+			LayoutOrder = self.props.layoutOrder,
+			AnchorPoint = self.props.anchorPoint,
+			ImageTransparency = self.props.transparency,
+			Image = iconProps.Image,
+			ImageRectOffset = iconProps.ImageRectOffset,
+			ImageRectSize = iconProps.ImageRectSize,
+			BackgroundTransparency = 1,
+		},
+		if iconProps.EditableImagePixels
+			then e(EditableImage, {
+				size = iconProps.EditableImageSize,
+				pixels = iconProps.EditableImagePixels,
+			})
+			else nil
+	)
+end
+
+return ClassIcon

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

plugin/src/App/Components/Dropdown.lua

@@ -0,0 +1,176 @@
+local TextService = game:GetService("TextService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Flipper = require(Packages.Flipper)
+
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local SlicedImage = require(script.Parent.SlicedImage)
+local ScrollingFrame = require(script.Parent.ScrollingFrame)
+
+local e = Roact.createElement
+
+local Dropdown = Roact.Component:extend("Dropdown")
+
+function Dropdown:init()
+	self.openMotor = Flipper.SingleMotor.new(0)
+	self.openBinding = bindingUtil.fromMotor(self.openMotor)
+
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
+
+	self:setState({
+		open = false,
+	})
+end
+
+function Dropdown:didUpdate(prevProps)
+	if self.props.locked and not prevProps.locked then
+		self:setState({
+			open = false,
+		})
+	end
+
+	self.openMotor:setGoal(Flipper.Spring.new(self.state.open and 1 or 0, {
+		frequency = 6,
+		dampingRatio = 1.1,
+	}))
+end
+
+function Dropdown:render()
+	return Theme.with(function(theme)
+		theme = theme.Dropdown
+
+		local optionButtons = {}
+		local width = -1
+		for i, option in self.props.options do
+			local text = tostring(option or "")
+			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 = theme.BackgroundColor,
+				TextTransparency = self.props.transparency,
+				BackgroundTransparency = self.props.transparency,
+				BorderSizePixel = 0,
+				TextColor3 = theme.TextColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextSize = 15,
+				Font = Enum.Font.GothamMedium,
+
+				[Roact.Event.Activated] = function()
+					if self.props.locked then
+						return
+					end
+					self:setState({
+						open = false,
+					})
+					self.props.onClick(option)
+				end,
+			}, {
+				Padding = e("UIPadding", {
+					PaddingLeft = UDim.new(0, 6),
+				}),
+			})
+		end
+
+		return e("ImageButton", {
+			Size = UDim2.new(0, width + 50, 0, 28),
+			Position = self.props.position,
+			AnchorPoint = self.props.anchorPoint,
+			LayoutOrder = self.props.layoutOrder,
+			ZIndex = self.props.zIndex,
+			BackgroundTransparency = 1,
+
+			[Roact.Event.Activated] = function()
+				if self.props.locked then
+					return
+				end
+				self:setState({
+					open = not self.state.open,
+				})
+			end,
+		}, {
+			Border = e(SlicedImage, {
+				slice = Assets.Slices.RoundedBorder,
+				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 = theme.IconColor,
+					ImageTransparency = self.props.transparency,
+
+					Size = UDim2.new(0, 18, 0, 18),
+					Position = UDim2.new(1, -6, 0.5, 0),
+					AnchorPoint = Vector2.new(1, 0.5),
+					Rotation = self.openBinding:map(function(a)
+						return a * 180
+					end),
+
+					BackgroundTransparency = 1,
+				}),
+				Active = e("TextLabel", {
+					Size = UDim2.new(1, -30, 1, 0),
+					Position = UDim2.new(0, 6, 0, 0),
+					BackgroundTransparency = 1,
+					Text = self.props.active,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 15,
+					TextColor3 = theme.TextColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextTransparency = self.props.transparency,
+				}),
+			}),
+			Options = if self.state.open
+				then e(SlicedImage, {
+					slice = Assets.Slices.RoundedBackground,
+					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)
+					end),
+					anchorPoint = Vector2.new(1, 0),
+				}, {
+					Border = e(SlicedImage, {
+						slice = Assets.Slices.RoundedBorder,
+						color = theme.BorderColor,
+						transparency = self.props.transparency,
+						size = UDim2.new(1, 0, 1, 0),
+					}),
+					ScrollingFrame = e(ScrollingFrame, {
+						size = UDim2.new(1, -4, 1, -4),
+						position = UDim2.new(0, 2, 0, 2),
+						transparency = self.props.transparency,
+						contentSize = self.contentSize,
+					}, {
+						Layout = e("UIListLayout", {
+							VerticalAlignment = Enum.VerticalAlignment.Top,
+							FillDirection = Enum.FillDirection.Vertical,
+							SortOrder = Enum.SortOrder.LayoutOrder,
+							Padding = UDim.new(0, 0),
+
+							[Roact.Change.AbsoluteContentSize] = function(object)
+								self.setContentSize(object.AbsoluteContentSize)
+							end,
+						}),
+						Options = Roact.createFragment(optionButtons),
+					}),
+				})
+				else nil,
+		})
+	end)
+end
+
+return Dropdown

plugin/src/App/Components/EditableImage.lua

@@ -0,0 +1,41 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local e = Roact.createElement
+
+local EditableImage = Roact.PureComponent:extend("EditableImage")
+
+function EditableImage:init()
+	self.ref = Roact.createRef()
+end
+
+function EditableImage:writePixels()
+	local image = self.ref.current
+	if not image then
+		return
+	end
+	if not self.props.pixels then
+		return
+	end
+
+	image:WritePixels(Vector2.zero, self.props.size, self.props.pixels)
+end
+
+function EditableImage:render()
+	return e("EditableImage", {
+		Size = self.props.size,
+		[Roact.Ref] = self.ref,
+	})
+end
+
+function EditableImage:didMount()
+	self:writePixels()
+end
+
+function EditableImage:didUpdate()
+	self:writePixels()
+end
+
+return EditableImage

plugin/src/App/Components/IconButton.lua

@@ -30,6 +30,7 @@ function IconButton:render()
 		Position = self.props.position,
 		AnchorPoint = self.props.anchorPoint,
 
+		Visible = self.props.visible,
 		LayoutOrder = self.props.layoutOrder,
 		ZIndex = self.props.zIndex,
 		BackgroundTransparency = 1,
@@ -37,15 +38,11 @@ function IconButton:render()
 		[Roact.Event.Activated] = self.props.onClick,
 
 		[Roact.Event.MouseEnter] = function()
-			self.motor:setGoal(
-				Flipper.Spring.new(1, HOVER_SPRING_PROPS)
-			)
+			self.motor:setGoal(Flipper.Spring.new(1, HOVER_SPRING_PROPS))
 		end,
 
 		[Roact.Event.MouseLeave] = function()
-			self.motor:setGoal(
-				Flipper.Spring.new(0, HOVER_SPRING_PROPS)
-			)
+			self.motor:setGoal(Flipper.Spring.new(0, HOVER_SPRING_PROPS))
 		end,
 	}, {
 		Icon = e("ImageLabel", {
@@ -74,6 +71,8 @@ function IconButton:render()
 
 			BackgroundTransparency = 1,
 		}),
+
+		Children = Roact.createFragment(self.props[Roact.Children]),
 	})
 end
 

plugin/src/App/Components/PatchVisualizer/ChangeList.lua

@@ -0,0 +1,281 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+local DisplayValue = require(script.Parent.DisplayValue)
+
+local EMPTY_TABLE = {}
+
+local e = Roact.createElement
+
+local function ViewDiffButton(props)
+	return Theme.with(function(theme)
+		return e("TextButton", {
+			Text = "",
+			Size = UDim2.new(0.7, 0, 1, -4),
+			LayoutOrder = 2,
+			BackgroundTransparency = 1,
+			[Roact.Event.Activated] = props.onClick,
+		}, {
+			e(BorderedContainer, {
+				size = UDim2.new(1, 0, 1, 0),
+				transparency = props.transparency:map(function(t)
+					return 0.5 + (0.5 * t)
+				end),
+			}, {
+				Layout = e("UIListLayout", {
+					FillDirection = Enum.FillDirection.Horizontal,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					HorizontalAlignment = Enum.HorizontalAlignment.Center,
+					VerticalAlignment = Enum.VerticalAlignment.Center,
+					Padding = UDim.new(0, 5),
+				}),
+				Label = e("TextLabel", {
+					Text = "View Diff",
+					BackgroundTransparency = 1,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 14,
+					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextTransparency = props.transparency,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+					Size = UDim2.new(0, 65, 1, 0),
+					LayoutOrder = 1,
+				}),
+				Icon = e("ImageLabel", {
+					Image = Assets.Images.Icons.Expand,
+					ImageColor3 = theme.Settings.Setting.DescriptionColor,
+					ImageTransparency = props.transparency,
+
+					Size = UDim2.new(0, 16, 0, 16),
+					Position = UDim2.new(0.5, 0, 0.5, 0),
+					AnchorPoint = Vector2.new(0.5, 0.5),
+
+					BackgroundTransparency = 1,
+					LayoutOrder = 2,
+				}),
+			}),
+		})
+	end)
+end
+
+local function RowContent(props)
+	local values = props.values
+	local metadata = props.metadata
+
+	if props.showStringDiff and values[1] == "Source" then
+		-- Special case for .Source updates
+		return e(ViewDiffButton, {
+			transparency = props.transparency,
+			onClick = function()
+				if not props.showStringDiff then
+					return
+				end
+				props.showStringDiff(tostring(values[2]), tostring(values[3]))
+			end,
+		})
+	end
+
+	if props.showTableDiff and (type(values[2]) == "table" or type(values[3]) == "table") then
+		-- Special case for table properties (like Attributes/Tags)
+		return e(ViewDiffButton, {
+			transparency = props.transparency,
+			onClick = function()
+				if not props.showTableDiff then
+					return
+				end
+				props.showTableDiff(values[2], values[3])
+			end,
+		})
+	end
+
+	return Theme.with(function(theme)
+		return Roact.createFragment({
+			ColumnB = e(
+				"Frame",
+				{
+					BackgroundTransparency = 1,
+					Size = UDim2.new(0.35, 0, 1, 0),
+					LayoutOrder = 2,
+				},
+				e(DisplayValue, {
+					value = values[2],
+					transparency = props.transparency,
+					textColor = if metadata.isWarning
+						then theme.Diff.Warning
+						else theme.Settings.Setting.DescriptionColor,
+				})
+			),
+			ColumnC = e(
+				"Frame",
+				{
+					BackgroundTransparency = 1,
+					Size = UDim2.new(0.35, 0, 1, 0),
+					LayoutOrder = 3,
+				},
+				e(DisplayValue, {
+					value = values[3],
+					transparency = props.transparency,
+					textColor = if metadata.isWarning
+						then theme.Diff.Warning
+						else theme.Settings.Setting.DescriptionColor,
+				})
+			),
+		})
+	end)
+end
+
+local ChangeList = Roact.Component:extend("ChangeList")
+
+function ChangeList:init()
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
+end
+
+function ChangeList:render()
+	return Theme.with(function(theme)
+		local props = self.props
+		local changes = props.changes
+
+		-- Color alternating rows for readability
+		local rowTransparency = props.transparency:map(function(t)
+			return 0.93 + (0.07 * t)
+		end)
+
+		local rows = {}
+		local pad = {
+			PaddingLeft = UDim.new(0, 5),
+			PaddingRight = UDim.new(0, 5),
+		}
+
+		local headerRow = changes[1]
+		local headers = e("Frame", {
+			Size = UDim2.new(1, 0, 0, 24),
+			BackgroundTransparency = rowTransparency,
+			BackgroundColor3 = theme.Diff.Row,
+			LayoutOrder = 0,
+		}, {
+			Padding = e("UIPadding", pad),
+			Layout = e("UIListLayout", {
+				FillDirection = Enum.FillDirection.Horizontal,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				HorizontalAlignment = Enum.HorizontalAlignment.Left,
+				VerticalAlignment = Enum.VerticalAlignment.Center,
+			}),
+			ColumnA = e("TextLabel", {
+				Text = tostring(headerRow[1]),
+				BackgroundTransparency = 1,
+				Font = Enum.Font.GothamBold,
+				TextSize = 14,
+				TextColor3 = theme.TextColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+				TextTruncate = Enum.TextTruncate.AtEnd,
+				Size = UDim2.new(0.3, 0, 1, 0),
+				LayoutOrder = 1,
+			}),
+			ColumnB = e("TextLabel", {
+				Text = tostring(headerRow[2]),
+				BackgroundTransparency = 1,
+				Font = Enum.Font.GothamBold,
+				TextSize = 14,
+				TextColor3 = theme.TextColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+				TextTruncate = Enum.TextTruncate.AtEnd,
+				Size = UDim2.new(0.35, 0, 1, 0),
+				LayoutOrder = 2,
+			}),
+			ColumnC = e("TextLabel", {
+				Text = tostring(headerRow[3]),
+				BackgroundTransparency = 1,
+				Font = Enum.Font.GothamBold,
+				TextSize = 14,
+				TextColor3 = theme.TextColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+				TextTruncate = Enum.TextTruncate.AtEnd,
+				Size = UDim2.new(0.35, 0, 1, 0),
+				LayoutOrder = 3,
+			}),
+		})
+
+		for row, values in changes do
+			if row == 1 then
+				continue -- Skip headers, already handled above
+			end
+
+			local metadata = values[4] or EMPTY_TABLE
+			local isWarning = metadata.isWarning
+
+			rows[row] = e("Frame", {
+				Size = UDim2.new(1, 0, 0, 24),
+				BackgroundTransparency = row % 2 ~= 0 and rowTransparency or 1,
+				BackgroundColor3 = theme.Diff.Row,
+				BorderSizePixel = 0,
+				LayoutOrder = row,
+			}, {
+				Padding = e("UIPadding", pad),
+				Layout = e("UIListLayout", {
+					FillDirection = Enum.FillDirection.Horizontal,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					HorizontalAlignment = Enum.HorizontalAlignment.Left,
+					VerticalAlignment = Enum.VerticalAlignment.Center,
+				}),
+				ColumnA = e("TextLabel", {
+					Text = (if isWarning then "⚠ " else "") .. tostring(values[1]),
+					BackgroundTransparency = 1,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 14,
+					TextColor3 = if isWarning then theme.Diff.Warning else theme.TextColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextTransparency = props.transparency,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+					Size = UDim2.new(0.3, 0, 1, 0),
+					LayoutOrder = 1,
+				}),
+				Content = e(RowContent, {
+					values = values,
+					metadata = metadata,
+					transparency = props.transparency,
+					showStringDiff = props.showStringDiff,
+					showTableDiff = props.showTableDiff,
+				}),
+			})
+		end
+
+		table.insert(
+			rows,
+			e("UIListLayout", {
+				FillDirection = Enum.FillDirection.Vertical,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				HorizontalAlignment = Enum.HorizontalAlignment.Right,
+				VerticalAlignment = Enum.VerticalAlignment.Top,
+
+				[Roact.Change.AbsoluteContentSize] = function(object)
+					self.setContentSize(object.AbsoluteContentSize)
+				end,
+			})
+		)
+
+		return e("Frame", {
+			Size = UDim2.new(1, 0, 1, 0),
+			BackgroundTransparency = 1,
+		}, {
+			Headers = headers,
+			Values = e(ScrollingFrame, {
+				size = UDim2.new(1, 0, 1, -24),
+				position = UDim2.new(0, 0, 0, 24),
+				contentSize = self.contentSize,
+				transparency = props.transparency,
+			}, rows),
+		})
+	end)
+end
+
+return ChangeList

plugin/src/App/Components/PatchVisualizer/DisplayValue.lua

@@ -0,0 +1,126 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Theme = require(Plugin.App.Theme)
+
+local e = Roact.createElement
+
+local function DisplayValue(props)
+	return Theme.with(function(theme)
+		local t = typeof(props.value)
+		if t == "Color3" then
+			-- Colors get a blot that shows the color
+			return Roact.createFragment({
+				Blot = e("Frame", {
+					BackgroundTransparency = props.transparency,
+					BackgroundColor3 = props.value,
+					Size = UDim2.new(0, 20, 0, 20),
+					Position = UDim2.new(0, 0, 0.5, 0),
+					AnchorPoint = Vector2.new(0, 0.5),
+				}, {
+					Corner = e("UICorner", {
+						CornerRadius = UDim.new(0, 4),
+					}),
+					Stroke = e("UIStroke", {
+						Color = theme.BorderedContainer.BorderColor,
+						Transparency = props.transparency,
+					}),
+				}),
+				Label = e("TextLabel", {
+					Text = string.format("%d, %d, %d", props.value.R * 255, props.value.G * 255, props.value.B * 255),
+					BackgroundTransparency = 1,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 14,
+					TextColor3 = props.textColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextTransparency = props.transparency,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+					Size = UDim2.new(1, -25, 1, 0),
+					Position = UDim2.new(0, 25, 0, 0),
+				}),
+			})
+		elseif t == "table" then
+			-- Showing a memory address for tables is useless, so we want to show the best we can
+			local textRepresentation = nil
+
+			local meta = getmetatable(props.value)
+			if meta and meta.__tostring then
+				-- If the table has a tostring metamethod, use that
+				textRepresentation = tostring(props.value)
+			elseif next(props.value) == nil then
+				-- If it's empty, show empty braces
+				textRepresentation = "{}"
+			elseif next(props.value) == 1 then
+				-- We don't need to support mixed tables, so checking the first key is enough
+				-- to determine if it's a simple array
+				local out, i = table.create(#props.value), 0
+				for _, v in props.value do
+					i += 1
+
+					-- Wrap strings in quotes
+					if type(v) == "string" then
+						v = '"' .. v .. '"'
+					end
+
+					out[i] = tostring(v)
+				end
+				textRepresentation = "{ " .. table.concat(out, ", ") .. " }"
+			else
+				-- Otherwise, show the table contents as a dictionary
+				local out, i = {}, 0
+				for k, v in pairs(props.value) do
+					i += 1
+
+					-- Wrap strings in quotes
+					if type(k) == "string" then
+						k = '"' .. k .. '"'
+					end
+					if type(v) == "string" then
+						v = '"' .. v .. '"'
+					end
+
+					out[i] = string.format("[%s] = %s", tostring(k), tostring(v))
+				end
+				textRepresentation = "{ " .. table.concat(out, ", ") .. " }"
+			end
+
+			return e("TextLabel", {
+				Text = textRepresentation,
+				BackgroundTransparency = 1,
+				Font = Enum.Font.GothamMedium,
+				TextSize = 14,
+				TextColor3 = props.textColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+				TextTruncate = Enum.TextTruncate.AtEnd,
+				Size = UDim2.new(1, 0, 1, 0),
+			})
+		end
+
+		-- TODO: Maybe add visualizations to other datatypes?
+		-- Or special text handling tostring for some?
+		-- Will add as needed, let's see what cases arise.
+
+		local textRepresentation = string.gsub(tostring(props.value), "%s", " ")
+		if t == "string" then
+			textRepresentation = '"' .. textRepresentation .. '"'
+		end
+
+		return e("TextLabel", {
+			Text = textRepresentation,
+			BackgroundTransparency = 1,
+			Font = Enum.Font.GothamMedium,
+			TextSize = 14,
+			TextColor3 = props.textColor,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextTransparency = props.transparency,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+			Size = UDim2.new(1, 0, 1, 0),
+		})
+	end)
+end
+
+return DisplayValue

plugin/src/App/Components/PatchVisualizer/DomLabel.lua

@@ -0,0 +1,282 @@
+local SelectionService = game:GetService("Selection")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Flipper = require(Packages.Flipper)
+
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local e = Roact.createElement
+
+local ChangeList = require(script.Parent.ChangeList)
+local Tooltip = require(Plugin.App.Components.Tooltip)
+local ClassIcon = require(Plugin.App.Components.ClassIcon)
+
+local Expansion = Roact.Component:extend("Expansion")
+
+function Expansion:render()
+	local props = self.props
+
+	if not props.rendered then
+		return nil
+	end
+
+	return e("Frame", {
+		BackgroundTransparency = 1,
+		Size = UDim2.new(1, -props.indent, 1, -24),
+		Position = UDim2.new(0, props.indent, 0, 24),
+	}, {
+		ChangeList = e(ChangeList, {
+			changes = props.changeList,
+			transparency = props.transparency,
+			showStringDiff = props.showStringDiff,
+			showTableDiff = props.showTableDiff,
+		}),
+	})
+end
+
+local DomLabel = Roact.Component:extend("DomLabel")
+
+function DomLabel:init()
+	local initHeight = self.props.elementHeight:getValue()
+	self.expanded = initHeight > 24
+
+	self.motor = Flipper.SingleMotor.new(initHeight)
+	self.binding = bindingUtil.fromMotor(self.motor)
+
+	self:setState({
+		renderExpansion = self.expanded,
+	})
+	self.motor:onStep(function(value)
+		local renderExpansion = value > 24
+
+		self.props.setElementHeight(value)
+		if self.props.updateEvent then
+			self.props.updateEvent:Fire()
+		end
+
+		self:setState(function(state)
+			if state.renderExpansion == renderExpansion then
+				return nil
+			end
+
+			return {
+				renderExpansion = renderExpansion,
+			}
+		end)
+	end)
+end
+
+function DomLabel:didUpdate(prevProps)
+	if
+		prevProps.instance ~= self.props.instance
+		or prevProps.patchType ~= self.props.patchType
+		or prevProps.name ~= self.props.name
+		or prevProps.changeList ~= self.props.changeList
+	then
+		-- Close the expansion when the domlabel is changed to a different thing
+		self.expanded = false
+		self.motor:setGoal(Flipper.Spring.new(24, {
+			frequency = 5,
+			dampingRatio = 1,
+		}))
+	end
+end
+
+function DomLabel:render()
+	local props = self.props
+	local depth = props.depth or 1
+
+	return Theme.with(function(theme)
+		local color = if props.isWarning
+			then theme.Diff.Warning
+			elseif props.patchType then theme.Diff[props.patchType]
+			else theme.TextColor
+
+		local indent = (depth - 1) * 12 + 15
+
+		-- Line guides help indent depth remain readable
+		local lineGuides = {}
+		for i = 2, depth do
+			if props.depthsComplete[i] then
+				continue
+			end
+			if props.isFinalChild and i == depth then
+				-- This line stops halfway down to merge with our connector for the right angle
+				lineGuides["Line_" .. i] = e("Frame", {
+					Size = UDim2.new(0, 2, 0, 15),
+					Position = UDim2.new(0, (12 * (i - 1)) + 6, 0, -1),
+					BorderSizePixel = 0,
+					BackgroundTransparency = props.transparency,
+					BackgroundColor3 = theme.BorderedContainer.BorderColor,
+				})
+			else
+				-- All other lines go all the way
+				-- with the exception of the final element, which stops halfway down
+				lineGuides["Line_" .. i] = e("Frame", {
+					Size = UDim2.new(0, 2, 1, if props.isFinalElement then -9 else 2),
+					Position = UDim2.new(0, (12 * (i - 1)) + 6, 0, -1),
+					BorderSizePixel = 0,
+					BackgroundTransparency = props.transparency,
+					BackgroundColor3 = theme.BorderedContainer.BorderColor,
+				})
+			end
+		end
+
+		if depth ~= 1 then
+			lineGuides["Connector"] = e("Frame", {
+				Size = UDim2.new(0, 8, 0, 2),
+				Position = UDim2.new(0, 2 + (12 * props.depth), 0, 12),
+				AnchorPoint = Vector2.xAxis,
+				BorderSizePixel = 0,
+				BackgroundTransparency = props.transparency,
+				BackgroundColor3 = theme.BorderedContainer.BorderColor,
+			})
+		end
+
+		return e("Frame", {
+			ClipsDescendants = true,
+			BackgroundTransparency = if props.elementIndex % 2 == 0 then 0.985 else 1,
+			BackgroundColor3 = theme.Diff.Row,
+			Size = self.binding:map(function(expand)
+				return UDim2.new(1, 0, 0, expand)
+			end),
+		}, {
+			Padding = e("UIPadding", {
+				PaddingLeft = UDim.new(0, 10),
+				PaddingRight = UDim.new(0, 10),
+			}),
+			Button = e("TextButton", {
+				BackgroundTransparency = 1,
+				Text = "",
+				Size = UDim2.new(1, 0, 1, 0),
+				[Roact.Event.Activated] = function(_rbx: Instance, _input: InputObject, clickCount: number)
+					if clickCount == 1 then
+						-- Double click opens the instance in explorer
+						self.lastDoubleClickTime = os.clock()
+						if props.instance then
+							SelectionService:Set({ props.instance })
+						end
+					elseif clickCount == 0 then
+						-- Single click expands the changes
+						task.wait(0.25)
+						if os.clock() - (self.lastDoubleClickTime or 0) <= 0.25 then
+							-- This is a double click, so don't expand
+							return
+						end
+
+						if props.changeList then
+							self.expanded = not self.expanded
+							local goalHeight = 24
+								+ (if self.expanded then math.clamp(#props.changeList * 24, 24, 24 * 6) else 0)
+							self.motor:setGoal(Flipper.Spring.new(goalHeight, {
+								frequency = 5,
+								dampingRatio = 1,
+							}))
+						end
+					end
+				end,
+			}, {
+				StateTip = if (props.instance or props.changeList)
+					then e(Tooltip.Trigger, {
+						text = (if props.changeList
+							then "Click to " .. (if self.expanded then "hide" else "view") .. " changes"
+							else "") .. (if props.instance
+							then (if props.changeList then " & d" else "D") .. "ouble click to open in Explorer"
+							else ""),
+					})
+					else nil,
+			}),
+			Expansion = if props.changeList
+				then e(Expansion, {
+					rendered = self.state.renderExpansion,
+					indent = indent,
+					transparency = props.transparency,
+					changeList = props.changeList,
+					showStringDiff = props.showStringDiff,
+					showTableDiff = props.showTableDiff,
+				})
+				else nil,
+			DiffIcon = if props.patchType
+				then e("ImageLabel", {
+					Image = Assets.Images.Diff[props.patchType],
+					ImageColor3 = color,
+					ImageTransparency = props.transparency,
+					BackgroundTransparency = 1,
+					Size = UDim2.new(0, 14, 0, 14),
+					Position = UDim2.new(0, 0, 0, 12),
+					AnchorPoint = Vector2.new(0, 0.5),
+				})
+				else nil,
+			ClassIcon = e(ClassIcon, {
+				className = props.className,
+				color = color,
+				transparency = props.transparency,
+				size = UDim2.new(0, 16, 0, 16),
+				position = UDim2.new(0, indent + 2, 0, 12),
+				anchorPoint = Vector2.new(0, 0.5),
+			}),
+			InstanceName = e("TextLabel", {
+				Text = (if props.isWarning then "⚠ " else "") .. props.name,
+				RichText = true,
+				BackgroundTransparency = 1,
+				Font = if props.patchType then Enum.Font.GothamBold else Enum.Font.GothamMedium,
+				TextSize = 14,
+				TextColor3 = color,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+				TextTruncate = Enum.TextTruncate.AtEnd,
+				Size = UDim2.new(1, -indent - 50, 0, 24),
+				Position = UDim2.new(0, indent + 22, 0, 0),
+			}),
+			ChangeInfo = e("Frame", {
+				BackgroundTransparency = 1,
+				Size = UDim2.new(1, -indent - 80, 0, 24),
+				Position = UDim2.new(1, -2, 0, 0),
+				AnchorPoint = Vector2.new(1, 0),
+			}, {
+				Layout = e("UIListLayout", {
+					FillDirection = Enum.FillDirection.Horizontal,
+					HorizontalAlignment = Enum.HorizontalAlignment.Right,
+					VerticalAlignment = Enum.VerticalAlignment.Center,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					Padding = UDim.new(0, 4),
+				}),
+				Edits = if props.changeInfo and props.changeInfo.edits
+					then e("TextLabel", {
+						Text = props.changeInfo.edits .. if props.changeInfo.failed then "," else "",
+						BackgroundTransparency = 1,
+						Font = Enum.Font.Gotham,
+						TextSize = 14,
+						TextColor3 = theme.SubTextColor,
+						TextTransparency = props.transparency,
+						Size = UDim2.new(0, 0, 0, 16),
+						AutomaticSize = Enum.AutomaticSize.X,
+						LayoutOrder = 2,
+					})
+					else nil,
+				Failed = if props.changeInfo and props.changeInfo.failed
+					then e("TextLabel", {
+						Text = props.changeInfo.failed,
+						BackgroundTransparency = 1,
+						Font = Enum.Font.Gotham,
+						TextSize = 14,
+						TextColor3 = theme.Diff.Warning,
+						TextTransparency = props.transparency,
+						Size = UDim2.new(0, 0, 0, 16),
+						AutomaticSize = Enum.AutomaticSize.X,
+						LayoutOrder = 6,
+					})
+					else nil,
+			}),
+			LineGuides = e("Folder", nil, lineGuides),
+		})
+	end)
+end
+
+return DomLabel

plugin/src/App/Components/PatchVisualizer/init.lua

@@ -0,0 +1,152 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local PatchTree = require(Plugin.PatchTree)
+local PatchSet = require(Plugin.PatchSet)
+
+local Theme = require(Plugin.App.Theme)
+local VirtualScroller = require(Plugin.App.Components.VirtualScroller)
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+
+local e = Roact.createElement
+
+local DomLabel = require(script.DomLabel)
+
+local PatchVisualizer = Roact.Component:extend("PatchVisualizer")
+
+function PatchVisualizer:init()
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
+
+	self.updateEvent = Instance.new("BindableEvent")
+end
+
+function PatchVisualizer:willUnmount()
+	self.updateEvent:Destroy()
+end
+
+function PatchVisualizer:shouldUpdate(nextProps)
+	if self.props.patchTree ~= nextProps.patchTree then
+		return true
+	end
+
+	local currentPatch, nextPatch = self.props.patch, nextProps.patch
+	if currentPatch ~= nil or nextPatch ~= nil then
+		return not PatchSet.isEqual(currentPatch, nextPatch)
+	end
+
+	return false
+end
+
+function PatchVisualizer:render()
+	local patchTree = self.props.patchTree
+	if patchTree == nil and self.props.patch ~= nil then
+		patchTree = PatchTree.build(
+			self.props.patch,
+			self.props.instanceMap,
+			self.props.changeListHeaders or { "Property", "Current", "Incoming" }
+		)
+		if self.props.unappliedPatch then
+			patchTree =
+				PatchTree.updateMetadata(patchTree, self.props.patch, self.props.instanceMap, self.props.unappliedPatch)
+		end
+	end
+
+	-- Recusively draw tree
+	local scrollElements, elementHeights, elementIndex = {}, {}, 0
+
+	if patchTree then
+		local elementTotal = patchTree:getCount()
+		local depthsComplete = {}
+		local function drawNode(node, depth)
+			elementIndex += 1
+
+			local parentNode = patchTree:getNode(node.parentId)
+			local isFinalChild = true
+			if parentNode then
+				for _id, sibling in parentNode.children do
+					if type(sibling) == "table" and sibling.name and sibling.name > node.name then
+						isFinalChild = false
+						break
+					end
+				end
+			end
+
+			local elementHeight, setElementHeight = Roact.createBinding(24)
+			elementHeights[elementIndex] = elementHeight
+			scrollElements[elementIndex] = e(DomLabel, {
+				transparency = self.props.transparency,
+				showStringDiff = self.props.showStringDiff,
+				showTableDiff = self.props.showTableDiff,
+				updateEvent = self.updateEvent,
+				elementHeight = elementHeight,
+				setElementHeight = setElementHeight,
+				elementIndex = elementIndex,
+				isFinalElement = elementIndex == elementTotal,
+				depth = depth,
+				depthsComplete = table.clone(depthsComplete),
+				hasChildren = (node.children ~= nil and next(node.children) ~= nil),
+				isFinalChild = isFinalChild,
+				patchType = node.patchType,
+				className = node.className,
+				isWarning = node.isWarning,
+				instance = node.instance,
+				name = node.name,
+				changeInfo = node.changeInfo,
+				changeList = node.changeList,
+			})
+
+			if isFinalChild then
+				depthsComplete[depth] = true
+			end
+		end
+
+		patchTree:forEach(function(node, depth)
+			depthsComplete[depth] = false
+			for i = depth + 1, #depthsComplete do
+				depthsComplete[i] = nil
+			end
+
+			drawNode(node, depth)
+		end)
+	end
+
+	return Theme.with(function(theme)
+		return e(BorderedContainer, {
+			transparency = self.props.transparency,
+			size = self.props.size,
+			position = self.props.position,
+			anchorPoint = self.props.anchorPoint,
+			layoutOrder = self.props.layoutOrder,
+		}, {
+			CleanMerge = e("TextLabel", {
+				Visible = #scrollElements == 0,
+				Text = "No changes to sync, project is up to date.",
+				Font = Enum.Font.GothamMedium,
+				TextSize = 15,
+				TextColor3 = theme.TextColor,
+				TextWrapped = true,
+				Size = UDim2.new(1, 0, 1, 0),
+				BackgroundTransparency = 1,
+			}),
+
+			VirtualScroller = e(VirtualScroller, {
+				size = UDim2.new(1, 0, 1, -2),
+				position = UDim2.new(0, 0, 0, 2),
+				transparency = self.props.transparency,
+				count = #scrollElements,
+				updateEvent = self.updateEvent.Event,
+				render = function(i)
+					return scrollElements[i]
+				end,
+				getHeightBinding = function(i)
+					return elementHeights[i]
+				end,
+			}),
+		})
+	end)
+end
+
+return PatchVisualizer

plugin/src/App/Components/ScrollingFrame.lua

@@ -10,6 +10,12 @@ local bindingUtil = require(Plugin.App.bindingUtil)
 
 local e = Roact.createElement
 
+local scrollDirToAutoSize = {
+	[Enum.ScrollingDirection.X] = Enum.AutomaticSize.X,
+	[Enum.ScrollingDirection.Y] = Enum.AutomaticSize.Y,
+	[Enum.ScrollingDirection.XY] = Enum.AutomaticSize.XY,
+}
+
 local function ScrollingFrame(props)
 	return Theme.with(function(theme)
 		return e("ScrollingFrame", {
@@ -23,19 +29,31 @@ local function ScrollingFrame(props)
 			BottomImage = Assets.Images.ScrollBar.Bottom,
 
 			ElasticBehavior = Enum.ElasticBehavior.Always,
-			ScrollingDirection = Enum.ScrollingDirection.Y,
+			ScrollingDirection = props.scrollingDirection or Enum.ScrollingDirection.Y,
 
 			Size = props.size,
 			Position = props.position,
 			AnchorPoint = props.anchorPoint,
-			CanvasSize = props.contentSize:map(function(value)
-				return UDim2.new(0, 0, 0, value.Y)
-			end),
+			CanvasSize = if props.contentSize
+				then props.contentSize:map(function(value)
+					return UDim2.new(
+						0,
+						if (props.scrollingDirection and props.scrollingDirection ~= Enum.ScrollingDirection.Y)
+							then value.X
+							else 0,
+						0,
+						value.Y
+					)
+				end)
+				else UDim2.new(),
+			AutomaticCanvasSize = if props.contentSize == nil
+				then scrollDirToAutoSize[props.scrollingDirection or Enum.ScrollingDirection.XY]
+				else nil,
 
 			BorderSizePixel = 0,
 			BackgroundTransparency = 1,
 
-			[Roact.Change.AbsoluteSize] = props[Roact.Change.AbsoluteSize]
+			[Roact.Change.AbsoluteSize] = props[Roact.Change.AbsoluteSize],
 		}, props[Roact.Children])
 	end)
 end

plugin/src/App/Components/SlicedImage.lua

@@ -20,6 +20,7 @@ local function SlicedImage(props)
 		Size = props.size,
 		Position = props.position,
 		AnchorPoint = props.anchorPoint,
+		AutomaticSize = props.automaticSize,
 
 		ZIndex = props.zIndex,
 		LayoutOrder = props.layoutOrder,

plugin/src/App/Components/StringDiffVisualizer/StringDiff.lua

@@ -0,0 +1,441 @@
+--[[
+    Based on DiffMatchPatch by Neil Fraser.
+    https://github.com/google/diff-match-patch
+]]
+
+export type DiffAction = number
+export type Diff = { actionType: DiffAction, value: string }
+export type Diffs = { Diff }
+
+local StringDiff = {
+	ActionTypes = table.freeze({
+		Equal = 0,
+		Delete = 1,
+		Insert = 2,
+	}),
+}
+
+function StringDiff.findDiffs(text1: string, text2: string): Diffs
+	-- Validate inputs
+	if type(text1) ~= "string" or type(text2) ~= "string" then
+		error(
+			string.format(
+				"Invalid inputs to StringDiff.findDiffs, expected strings and got (%s, %s)",
+				type(text1),
+				type(text2)
+			),
+			2
+		)
+	end
+
+	-- Shortcut if the texts are identical
+	if text1 == text2 then
+		return { { actionType = StringDiff.ActionTypes.Equal, value = text1 } }
+	end
+
+	-- Trim off any shared prefix and suffix
+	-- These are easy to detect and can be dealt with quickly without needing a complex diff
+	-- and later we simply add them as Equal to the start and end of the diff
+	local sharedPrefix, sharedSuffix
+	local prefixLength = StringDiff._sharedPrefix(text1, text2)
+	if prefixLength > 0 then
+		-- Store the prefix
+		sharedPrefix = string.sub(text1, 1, prefixLength)
+		-- Now trim it off
+		text1 = string.sub(text1, prefixLength + 1)
+		text2 = string.sub(text2, prefixLength + 1)
+	end
+
+	local suffixLength = StringDiff._sharedSuffix(text1, text2)
+	if suffixLength > 0 then
+		-- Store the suffix
+		sharedSuffix = string.sub(text1, -suffixLength)
+		-- Now trim it off
+		text1 = string.sub(text1, 1, -suffixLength - 1)
+		text2 = string.sub(text2, 1, -suffixLength - 1)
+	end
+
+	-- Compute the diff on the middle block where the changes lie
+	local diffs = StringDiff._computeDiff(text1, text2)
+
+	-- Restore the prefix and suffix
+	if sharedPrefix then
+		table.insert(diffs, 1, { actionType = StringDiff.ActionTypes.Equal, value = sharedPrefix })
+	end
+	if sharedSuffix then
+		table.insert(diffs, { actionType = StringDiff.ActionTypes.Equal, value = sharedSuffix })
+	end
+
+	-- Cleanup the diff
+	diffs = StringDiff._reorderAndMerge(diffs)
+
+	return diffs
+end
+
+function StringDiff._sharedPrefix(text1: string, text2: string): number
+	-- Uses a binary search to find the largest common prefix between the two strings
+	-- Performance analysis: http://neil.fraser.name/news/2007/10/09/
+
+	-- Shortcut common cases
+	if (#text1 == 0) or (#text2 == 0) or (string.byte(text1, 1) ~= string.byte(text2, 1)) then
+		return 0
+	end
+
+	local pointerMin = 1
+	local pointerMax = math.min(#text1, #text2)
+	local pointerMid = pointerMax
+	local pointerStart = 1
+	while pointerMin < pointerMid do
+		if string.sub(text1, pointerStart, pointerMid) == string.sub(text2, pointerStart, pointerMid) then
+			pointerMin = pointerMid
+			pointerStart = pointerMin
+		else
+			pointerMax = pointerMid
+		end
+		pointerMid = math.floor(pointerMin + (pointerMax - pointerMin) / 2)
+	end
+
+	return pointerMid
+end
+
+function StringDiff._sharedSuffix(text1: string, text2: string): number
+	-- Uses a binary search to find the largest common suffix between the two strings
+	-- Performance analysis: http://neil.fraser.name/news/2007/10/09/
+
+	-- Shortcut common cases
+	if (#text1 == 0) or (#text2 == 0) or (string.byte(text1, -1) ~= string.byte(text2, -1)) then
+		return 0
+	end
+
+	local pointerMin = 1
+	local pointerMax = math.min(#text1, #text2)
+	local pointerMid = pointerMax
+	local pointerEnd = 1
+	while pointerMin < pointerMid do
+		if string.sub(text1, -pointerMid, -pointerEnd) == string.sub(text2, -pointerMid, -pointerEnd) then
+			pointerMin = pointerMid
+			pointerEnd = pointerMin
+		else
+			pointerMax = pointerMid
+		end
+		pointerMid = math.floor(pointerMin + (pointerMax - pointerMin) / 2)
+	end
+
+	return pointerMid
+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._bisect(text1: string, text2: string): Diffs
+	-- Find the 'middle snake' of a diff, split the problem in two
+	-- and return the recursively constructed diff
+	-- See Myers 1986 paper: An O(ND) Difference Algorithm and Its Variations
+
+	-- Cache the text lengths to prevent multiple calls
+	local text1Length = #text1
+	local text2Length = #text2
+
+	local _sub, _element
+	local maxD = math.ceil((text1Length + text2Length) / 2)
+	local vOffset = maxD
+	local vLength = 2 * maxD
+	local v1 = table.create(vLength)
+	local v2 = table.create(vLength)
+
+	-- Setting all elements to -1 is faster in Lua than mixing integers and nil
+	for x = 0, vLength - 1 do
+		v1[x] = -1
+		v2[x] = -1
+	end
+	v1[vOffset + 1] = 0
+	v2[vOffset + 1] = 0
+	local delta = text1Length - text2Length
+
+	-- If the total number of characters is odd, then
+	-- the front path will collide with the reverse path
+	local front = (delta % 2 ~= 0)
+
+	-- Offsets for start and end of k loop
+	-- Prevents mapping of space beyond the grid
+	local k1Start = 0
+	local k1End = 0
+	local k2Start = 0
+	local k2End = 0
+	for d = 0, maxD - 1 do
+		-- Walk the front path one step
+		for k1 = -d + k1Start, d - k1End, 2 do
+			local k1_offset = vOffset + k1
+			local x1
+			if (k1 == -d) or ((k1 ~= d) and (v1[k1_offset - 1] < v1[k1_offset + 1])) then
+				x1 = v1[k1_offset + 1]
+			else
+				x1 = v1[k1_offset - 1] + 1
+			end
+			local y1 = x1 - k1
+			while
+				(x1 <= text1Length)
+				and (y1 <= text2Length)
+				and (string.sub(text1, x1, x1) == string.sub(text2, y1, y1))
+			do
+				x1 = x1 + 1
+				y1 = y1 + 1
+			end
+			v1[k1_offset] = x1
+			if x1 > text1Length + 1 then
+				-- Ran off the right of the graph
+				k1End = k1End + 2
+			elseif y1 > text2Length + 1 then
+				-- Ran off the bottom of the graph
+				k1Start = k1Start + 2
+			elseif front then
+				local k2_offset = vOffset + delta - k1
+				if k2_offset >= 0 and k2_offset < vLength and v2[k2_offset] ~= -1 then
+					-- Mirror x2 onto top-left coordinate system
+					local x2 = text1Length - v2[k2_offset] + 1
+					if x1 > x2 then
+						-- Overlap detected
+						return StringDiff._bisectSplit(text1, text2, x1, y1)
+					end
+				end
+			end
+		end
+
+		-- Walk the reverse path one step
+		for k2 = -d + k2Start, d - k2End, 2 do
+			local k2_offset = vOffset + k2
+			local x2
+			if (k2 == -d) or ((k2 ~= d) and (v2[k2_offset - 1] < v2[k2_offset + 1])) then
+				x2 = v2[k2_offset + 1]
+			else
+				x2 = v2[k2_offset - 1] + 1
+			end
+			local y2 = x2 - k2
+			while
+				(x2 <= text1Length)
+				and (y2 <= text2Length)
+				and (string.sub(text1, -x2, -x2) == string.sub(text2, -y2, -y2))
+			do
+				x2 = x2 + 1
+				y2 = y2 + 1
+			end
+			v2[k2_offset] = x2
+			if x2 > text1Length + 1 then
+				-- Ran off the left of the graph
+				k2End = k2End + 2
+			elseif y2 > text2Length + 1 then
+				-- Ran off the top of the graph
+				k2Start = k2Start + 2
+			elseif not front then
+				local k1_offset = vOffset + delta - k2
+				if k1_offset >= 0 and k1_offset < vLength and v1[k1_offset] ~= -1 then
+					local x1 = v1[k1_offset]
+					local y1 = vOffset + x1 - k1_offset
+					-- Mirror x2 onto top-left coordinate system
+					x2 = text1Length - x2 + 1
+					if x1 > x2 then
+						-- Overlap detected
+						return StringDiff._bisectSplit(text1, text2, x1, y1)
+					end
+				end
+			end
+		end
+	end
+
+	-- Number of diffs equals number of characters, no commonality at all
+	return {
+		{ actionType = StringDiff.ActionTypes.Delete, value = text1 },
+		{ actionType = StringDiff.ActionTypes.Insert, value = text2 },
+	}
+end
+
+function StringDiff._bisectSplit(text1: string, text2: string, x: number, y: number): Diffs
+	-- Given the location of the 'middle snake',
+	-- split the diff in two parts and recurse
+
+	local text1a = string.sub(text1, 1, x - 1)
+	local text2a = string.sub(text2, 1, y - 1)
+	local text1b = string.sub(text1, x)
+	local text2b = string.sub(text2, y)
+
+	-- Compute both diffs serially
+	local diffs = StringDiff.findDiffs(text1a, text2a)
+	local diffsB = StringDiff.findDiffs(text1b, text2b)
+
+	-- Merge diffs
+	table.move(diffsB, 1, #diffsB, #diffs + 1, diffs)
+	return diffs
+end
+
+function StringDiff._reorderAndMerge(diffs: Diffs): Diffs
+	-- Reorder and merge like edit sections and merge equalities
+	-- Any edit section can move as long as it doesn't cross an equality
+
+	-- Add a dummy entry at the end
+	table.insert(diffs, { actionType = StringDiff.ActionTypes.Equal, value = "" })
+
+	local pointer = 1
+	local countDelete, countInsert = 0, 0
+	local textDelete, textInsert = "", ""
+	local commonLength
+	while diffs[pointer] do
+		local actionType = diffs[pointer].actionType
+		if actionType == StringDiff.ActionTypes.Insert then
+			countInsert = countInsert + 1
+			textInsert = textInsert .. diffs[pointer].value
+			pointer = pointer + 1
+		elseif actionType == StringDiff.ActionTypes.Delete then
+			countDelete = countDelete + 1
+			textDelete = textDelete .. diffs[pointer].value
+			pointer = pointer + 1
+		elseif actionType == StringDiff.ActionTypes.Equal then
+			-- Upon reaching an equality, check for prior redundancies
+			if countDelete + countInsert > 1 then
+				if (countDelete > 0) and (countInsert > 0) then
+					-- Factor out any common prefixies
+					commonLength = StringDiff._sharedPrefix(textInsert, textDelete)
+					if commonLength > 0 then
+						local back_pointer = pointer - countDelete - countInsert
+						if
+							(back_pointer > 1) and (diffs[back_pointer - 1].actionType == StringDiff.ActionTypes.Equal)
+						then
+							diffs[back_pointer - 1].value = diffs[back_pointer - 1].value
+								.. string.sub(textInsert, 1, commonLength)
+						else
+							table.insert(diffs, 1, {
+								actionType = StringDiff.ActionTypes.Equal,
+								value = string.sub(textInsert, 1, commonLength),
+							})
+							pointer = pointer + 1
+						end
+						textInsert = string.sub(textInsert, commonLength + 1)
+						textDelete = string.sub(textDelete, commonLength + 1)
+					end
+					-- Factor out any common suffixies
+					commonLength = StringDiff._sharedSuffix(textInsert, textDelete)
+					if commonLength ~= 0 then
+						diffs[pointer].value = string.sub(textInsert, -commonLength) .. diffs[pointer].value
+						textInsert = string.sub(textInsert, 1, -commonLength - 1)
+						textDelete = string.sub(textDelete, 1, -commonLength - 1)
+					end
+				end
+				-- Delete the offending records and add the merged ones
+				pointer = pointer - countDelete - countInsert
+				for _ = 1, countDelete + countInsert do
+					table.remove(diffs, pointer)
+				end
+				if #textDelete > 0 then
+					table.insert(diffs, pointer, { actionType = StringDiff.ActionTypes.Delete, value = textDelete })
+					pointer = pointer + 1
+				end
+				if #textInsert > 0 then
+					table.insert(diffs, pointer, { actionType = StringDiff.ActionTypes.Insert, value = textInsert })
+					pointer = pointer + 1
+				end
+				pointer = pointer + 1
+			elseif (pointer > 1) and (diffs[pointer - 1].actionType == StringDiff.ActionTypes.Equal) then
+				-- Merge this equality with the previous one
+				diffs[pointer - 1].value = diffs[pointer - 1].value .. diffs[pointer].value
+				table.remove(diffs, pointer)
+			else
+				pointer = pointer + 1
+			end
+			countInsert, countDelete = 0, 0
+			textDelete, textInsert = "", ""
+		end
+	end
+	if diffs[#diffs].value == "" then
+		-- Remove the dummy entry at the end
+		diffs[#diffs] = nil
+	end
+
+	-- Second pass: look for single edits surrounded on both sides by equalities
+	-- which can be shifted sideways to eliminate an equality
+	-- e.g: A<ins>BA</ins>C -> <ins>AB</ins>AC
+	local changes = false
+	pointer = 2
+	-- Intentionally ignore the first and last element (don't need checking)
+	while pointer < #diffs 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 currentDiff = diffs[pointer]
+			local currentText = currentDiff.value
+			local prevText = prevDiff.value
+			local nextText = nextDiff.value
+			if #prevText == 0 then
+				table.remove(diffs, pointer - 1)
+				changes = true
+			elseif string.sub(currentText, -#prevText) == prevText then
+				-- Shift the edit over the previous equality
+				currentDiff.value = prevText .. string.sub(currentText, 1, -#prevText - 1)
+				nextDiff.value = prevText .. nextDiff.value
+				table.remove(diffs, pointer - 1)
+				changes = true
+			elseif string.sub(currentText, 1, #nextText) == nextText then
+				-- Shift the edit over the next equality
+				prevDiff.value = prevText .. nextText
+				currentDiff.value = string.sub(currentText, #nextText + 1) .. nextText
+				table.remove(diffs, pointer + 1)
+				changes = true
+			end
+		end
+		pointer = pointer + 1
+	end
+
+	-- If shifts were made, the diffs need reordering and another shift sweep
+	if changes then
+		return StringDiff._reorderAndMerge(diffs)
+	end
+
+	return diffs
+end
+
+return StringDiff

plugin/src/App/Components/StringDiffVisualizer/init.lua

@@ -0,0 +1,205 @@
+local TextService = game:GetService("TextService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Log = require(Packages.Log)
+local Highlighter = require(Packages.Highlighter)
+local StringDiff = require(script:FindFirstChild("StringDiff"))
+
+local Timer = require(Plugin.Timer)
+local Theme = require(Plugin.App.Theme)
+
+local CodeLabel = require(Plugin.App.Components.CodeLabel)
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+
+local e = Roact.createElement
+
+local StringDiffVisualizer = Roact.Component:extend("StringDiffVisualizer")
+
+function StringDiffVisualizer:init()
+	self.scriptBackground, self.setScriptBackground = Roact.createBinding(Color3.fromRGB(0, 0, 0))
+	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()
+		task.defer(function()
+			-- Defer to allow Highlighter to process the theme change first
+			self:updateScriptBackground()
+		end)
+	end)
+
+	self:calculateContentSize()
+	self:updateScriptBackground()
+
+	self:setState({
+		add = {},
+		remove = {},
+	})
+end
+
+function StringDiffVisualizer:willUnmount()
+	self.themeChangedConnection:Disconnect()
+end
+
+function StringDiffVisualizer:updateScriptBackground()
+	local backgroundColor = Highlighter.getTokenColor("background")
+	if backgroundColor ~= self.scriptBackground:getValue() then
+		self.setScriptBackground(backgroundColor)
+	end
+end
+
+function StringDiffVisualizer:didUpdate(previousProps)
+	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: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(oldString, newString)
+	local stopClock = os.clock()
+
+	Log.trace(
+		"Diffing {} byte and {} byte strings took {} microseconds and found {} diff sections",
+		#oldString,
+		#newString,
+		math.round((stopClock - startClock) * 1000 * 1000),
+		#diffs
+	)
+
+	-- Determine which lines to highlight
+	local add, remove = {}, {}
+
+	local oldLineNum, newLineNum = 1, 1
+	for _, diff in diffs do
+		local actionType, text = diff.actionType, diff.value
+		local lines = select(2, string.gsub(text, "\n", "\n"))
+
+		if actionType == StringDiff.ActionTypes.Equal then
+			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
+				if string.match(text, "%S") then
+					add[newLineNum] = true
+				end
+			end
+			newLineNum += lines
+		elseif actionType == StringDiff.ActionTypes.Delete then
+			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
+			else
+				if string.match(text, "%S") then
+					remove[oldLineNum] = true
+				end
+			end
+			oldLineNum += lines
+		else
+			Log.warn("Unknown diff action: {} {}", actionType, text)
+		end
+	end
+
+	Timer.stop()
+	return add, remove
+end
+
+function StringDiffVisualizer:render()
+	local oldString, newString = self.props.oldString, self.props.newString
+
+	return Theme.with(function(theme)
+		return e(BorderedContainer, {
+			size = self.props.size,
+			position = self.props.position,
+			anchorPoint = self.props.anchorPoint,
+			transparency = self.props.transparency,
+		}, {
+			Background = e("Frame", {
+				Size = UDim2.new(1, 0, 1, 0),
+				Position = UDim2.new(0, 0, 0, 0),
+				BorderSizePixel = 0,
+				BackgroundColor3 = self.scriptBackground,
+				ZIndex = -10,
+			}, {
+				UICorner = e("UICorner", {
+					CornerRadius = UDim.new(0, 5),
+				}),
+			}),
+			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,
+			}, {
+				Source = e(CodeLabel, {
+					size = UDim2.new(1, 0, 1, 0),
+					position = UDim2.new(0, 0, 0, 0),
+					text = oldString,
+					lineBackground = theme.Diff.Remove,
+					markedLines = self.state.remove,
+				}),
+			}),
+			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,
+			}, {
+				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)
+end
+
+return StringDiffVisualizer

plugin/src/App/Components/Studio/StudioPluginAction.lua

@@ -10,11 +10,15 @@ local StudioPluginContext = require(script.Parent.StudioPluginContext)
 
 local e = Roact.createElement
 
-local StudioPluginAction  = Roact.Component:extend("StudioPluginAction")
+local StudioPluginAction = Roact.Component:extend("StudioPluginAction")
 
 function StudioPluginAction:init()
 	self.pluginAction = self.props.plugin:CreatePluginAction(
-		self.props.name, self.props.title, self.props.description, self.props.icon, self.props.bindable
+		self.props.name,
+		self.props.title,
+		self.props.description,
+		self.props.icon,
+		self.props.bindable
 	)
 
 	self.pluginAction.Triggered:Connect(self.props.onTriggered)
@@ -31,9 +35,12 @@ end
 local function StudioPluginActionWrapper(props)
 	return e(StudioPluginContext.Consumer, {
 		render = function(plugin)
-			return e(StudioPluginAction, Dictionary.merge(props, {
-				plugin = plugin,
-			}))
+			return e(
+				StudioPluginAction,
+				Dictionary.merge(props, {
+					plugin = plugin,
+				})
+			)
 		end,
 	})
 end

plugin/src/App/Components/Studio/StudioPluginGui.lua

@@ -1,3 +1,5 @@
+local HttpService = game:GetService("HttpService")
+
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -5,6 +7,7 @@ local Packages = Rojo.Packages
 local Roact = require(Packages.Roact)
 
 local Dictionary = require(Plugin.Dictionary)
+local Theme = require(Plugin.App.Theme)
 
 local StudioPluginContext = require(script.Parent.StudioPluginContext)
 
@@ -29,11 +32,16 @@ function StudioPluginGui:init()
 		self.props.initDockState,
 		self.props.active,
 		self.props.overridePreviousState,
-		floatingSize.X, floatingSize.Y,
-		minimumSize.X, minimumSize.Y
+		floatingSize.X,
+		floatingSize.Y,
+		minimumSize.X,
+		minimumSize.Y
 	)
 
-	local pluginGui = self.props.plugin:CreateDockWidgetPluginGui(self.props.id, dockWidgetPluginGuiInfo)
+	local pluginGui = self.props.plugin:CreateDockWidgetPluginGui(
+		if self.props.isEphemeral then HttpService:GenerateGUID(false) else self.props.id,
+		dockWidgetPluginGuiInfo
+	)
 
 	pluginGui.Name = self.props.id
 	pluginGui.Title = self.props.title
@@ -57,13 +65,28 @@ end
 function StudioPluginGui:render()
 	return e(Roact.Portal, {
 		target = self.pluginGui,
-	}, self.props[Roact.Children])
+	}, {
+		Background = Theme.with(function(theme)
+			return e("Frame", {
+				Size = UDim2.new(1, 0, 1, 0),
+				BackgroundColor3 = theme.BackgroundColor,
+				ZIndex = 0,
+				BorderSizePixel = 0,
+			}, self.props[Roact.Children])
+		end),
+	})
 end
 
 function StudioPluginGui:didUpdate(lastProps)
 	if self.props.active ~= lastProps.active then
 		-- This is intentionally in didUpdate to make sure the initial active state
 		-- (if the PluginGui is open initially) is preserved.
+
+		-- Studio widgets are very unreliable and sometimes need to be flickered
+		-- in order to force them to render correctly
+		-- This happens within a single frame so it doesn't flicker visibly
+		self.pluginGui.Enabled = self.props.active
+		self.pluginGui.Enabled = not self.props.active
 		self.pluginGui.Enabled = self.props.active
 	end
 end
@@ -75,9 +98,12 @@ end
 local function StudioPluginGuiWrapper(props)
 	return e(StudioPluginContext.Consumer, {
 		render = function(plugin)
-			return e(StudioPluginGui, Dictionary.merge(props, {
-				plugin = plugin,
-			}))
+			return e(
+				StudioPluginGui,
+				Dictionary.merge(props, {
+					plugin = plugin,
+				})
+			)
 		end,
 	})
 end

plugin/src/App/Components/Studio/StudioToggleButton.lua

@@ -18,12 +18,8 @@ StudioToggleButton.defaultProps = {
 }
 
 function StudioToggleButton:init()
-	local button = self.props.toolbar:CreateButton(
-		self.props.name,
-		self.props.tooltip,
-		self.props.icon,
-		self.props.text
-	)
+	local button =
+		self.props.toolbar:CreateButton(self.props.name, self.props.tooltip, self.props.icon, self.props.text)
 
 	button.Click:Connect(function()
 		if self.props.onClick then
@@ -61,9 +57,12 @@ end
 local function StudioToggleButtonWrapper(props)
 	return e(StudioToolbarContext.Consumer, {
 		render = function(toolbar)
-			return e(StudioToggleButton, Dictionary.merge(props, {
-				toolbar = toolbar,
-			}))
+			return e(
+				StudioToggleButton,
+				Dictionary.merge(props, {
+					toolbar = toolbar,
+				})
+			)
 		end,
 	})
 end

plugin/src/App/Components/Studio/StudioToolbar.lua

@@ -36,9 +36,12 @@ end
 local function StudioToolbarWrapper(props)
 	return e(StudioPluginContext.Consumer, {
 		render = function(plugin)
-			return e(StudioToolbar, Dictionary.merge(props, {
-				plugin = plugin,
-			}))
+			return e(
+				StudioToolbar,
+				Dictionary.merge(props, {
+					plugin = plugin,
+				})
+			)
 		end,
 	})
 end

plugin/src/App/Components/TableDiffVisualizer/Array.lua

@@ -0,0 +1,195 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Timer = require(Plugin.Timer)
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+
+local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+local DisplayValue = require(Plugin.App.Components.PatchVisualizer.DisplayValue)
+
+local e = Roact.createElement
+
+local Array = Roact.Component:extend("Array")
+
+function Array:init()
+	self:setState({
+		diff = self:calculateDiff(),
+	})
+end
+
+function Array:calculateDiff()
+	Timer.start("Array:calculateDiff")
+	--[[
+		Find the indexes that are added or removed from the array,
+		and display them side by side with gaps for the indexes that
+		dont exist in the opposite array.
+	]]
+	local oldTable, newTable = self.props.oldTable or {}, self.props.newTable or {}
+
+	local i, j = 1, 1
+	local diff = {}
+
+	while i <= #oldTable and j <= #newTable do
+		if oldTable[i] == newTable[j] then
+			table.insert(diff, { oldTable[i], newTable[j] }) -- Unchanged
+			i += 1
+			j += 1
+		elseif not table.find(newTable, oldTable[i], j) then
+			table.insert(diff, { oldTable[i], nil }) -- Removal
+			i += 1
+		elseif not table.find(oldTable, newTable[j], i) then
+			table.insert(diff, { nil, newTable[j] }) -- Addition
+			j += 1
+		else
+			if table.find(newTable, oldTable[i], j) then
+				table.insert(diff, { nil, newTable[j] }) -- Addition
+				j += 1
+			else
+				table.insert(diff, { oldTable[i], nil }) -- Removal
+				i += 1
+			end
+		end
+	end
+
+	-- Handle remaining elements
+	while i <= #oldTable do
+		table.insert(diff, { oldTable[i], nil }) -- Remaining Removals
+		i += 1
+	end
+	while j <= #newTable do
+		table.insert(diff, { nil, newTable[j] }) -- Remaining Additions
+		j += 1
+	end
+
+	Timer.stop()
+	return diff
+end
+
+function Array:didUpdate(previousProps)
+	if previousProps.oldTable ~= self.props.oldTable or previousProps.newTable ~= self.props.newTable then
+		self:setState({
+			diff = self:calculateDiff(),
+		})
+	end
+end
+
+function Array:render()
+	return Theme.with(function(theme)
+		local diff = self.state.diff
+		local lines = table.create(#diff)
+
+		for i, element in diff do
+			local oldValue = element[1]
+			local newValue = element[2]
+
+			local patchType = if oldValue == nil then "Add" elseif newValue == nil then "Remove" else "Remain"
+
+			table.insert(
+				lines,
+				e("Frame", {
+					Size = UDim2.new(1, 0, 0, 25),
+					BackgroundTransparency = if patchType == "Remain" then 1 else self.props.transparency,
+					BackgroundColor3 = if patchType == "Remain" then theme.Diff.Row else theme.Diff[patchType],
+					BorderSizePixel = 0,
+					LayoutOrder = i,
+				}, {
+					DiffIcon = if patchType ~= "Remain"
+						then e("ImageLabel", {
+							Image = Assets.Images.Diff[patchType],
+							ImageColor3 = theme.AddressEntry.PlaceholderColor,
+							ImageTransparency = self.props.transparency,
+							BackgroundTransparency = 1,
+							Size = UDim2.new(0, 15, 0, 15),
+							Position = UDim2.new(0, 7, 0.5, 0),
+							AnchorPoint = Vector2.new(0, 0.5),
+						})
+						else nil,
+					Old = e("Frame", {
+						Size = UDim2.new(0.5, -30, 1, 0),
+						Position = UDim2.new(0, 30, 0, 0),
+						BackgroundTransparency = 1,
+					}, {
+						Display = if oldValue ~= nil
+							then e(DisplayValue, {
+								value = oldValue,
+								transparency = self.props.transparency,
+								textColor = theme.Settings.Setting.DescriptionColor,
+							})
+							else nil,
+					}),
+					New = e("Frame", {
+						Size = UDim2.new(0.5, -10, 1, 0),
+						Position = UDim2.new(0.5, 5, 0, 0),
+						BackgroundTransparency = 1,
+					}, {
+						Display = if newValue ~= nil
+							then e(DisplayValue, {
+								value = newValue,
+								transparency = self.props.transparency,
+								textColor = theme.Settings.Setting.DescriptionColor,
+							})
+							else nil,
+					}),
+				})
+			)
+		end
+
+		return Roact.createFragment({
+			Headers = e("Frame", {
+				Size = UDim2.new(1, 0, 0, 25),
+				BackgroundTransparency = self.props.transparency:map(function(t)
+					return 0.95 + (0.05 * t)
+				end),
+				BackgroundColor3 = theme.Diff.Row,
+			}, {
+				ColumnA = e("TextLabel", {
+					Size = UDim2.new(0.5, -30, 1, 0),
+					Position = UDim2.new(0, 30, 0, 0),
+					BackgroundTransparency = 1,
+					Text = "Old",
+					TextXAlignment = Enum.TextXAlignment.Left,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
+					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+				}),
+				ColumnB = e("TextLabel", {
+					Size = UDim2.new(0.5, -10, 1, 0),
+					Position = UDim2.new(0.5, 5, 0, 0),
+					BackgroundTransparency = 1,
+					Text = "New",
+					TextXAlignment = Enum.TextXAlignment.Left,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
+					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+				}),
+				Separator = e("Frame", {
+					Size = UDim2.new(1, 0, 0, 1),
+					Position = UDim2.new(0, 0, 1, 0),
+					BackgroundTransparency = 0,
+					BorderSizePixel = 0,
+					BackgroundColor3 = theme.BorderedContainer.BorderColor,
+				}),
+			}),
+			KeyValues = e(ScrollingFrame, {
+				position = UDim2.new(0, 1, 0, 25),
+				size = UDim2.new(1, -2, 1, -27),
+				scrollingDirection = Enum.ScrollingDirection.Y,
+				transparency = self.props.transparency,
+			}, {
+				Layout = e("UIListLayout", {
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					VerticalAlignment = Enum.VerticalAlignment.Top,
+				}),
+				Lines = Roact.createFragment(lines),
+			}),
+		})
+	end)
+end
+
+return Array

plugin/src/App/Components/TableDiffVisualizer/Dictionary.lua

@@ -0,0 +1,211 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Timer = require(Plugin.Timer)
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+
+local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+local DisplayValue = require(Plugin.App.Components.PatchVisualizer.DisplayValue)
+
+local e = Roact.createElement
+
+local Dictionary = Roact.Component:extend("Dictionary")
+
+function Dictionary:init()
+	self:setState({
+		diff = self:calculateDiff(),
+	})
+end
+
+function Dictionary:calculateDiff()
+	Timer.start("Dictionary:calculateDiff")
+	local oldTable, newTable = self.props.oldTable or {}, self.props.newTable or {}
+
+	-- Diff the two tables and find the added keys, removed keys, and changed keys
+	local diff = {}
+
+	for key, oldValue in oldTable do
+		local newValue = newTable[key]
+		if newValue == nil then
+			table.insert(diff, {
+				key = key,
+				patchType = "Remove",
+			})
+		elseif newValue ~= oldValue then
+			-- Note: should this do some sort of deep comparison for various types?
+			table.insert(diff, {
+				key = key,
+				patchType = "Edit",
+			})
+		else
+			table.insert(diff, {
+				key = key,
+				patchType = "Remain",
+			})
+		end
+	end
+	for key in newTable do
+		if oldTable[key] == nil then
+			table.insert(diff, {
+				key = key,
+				patchType = "Add",
+			})
+		end
+	end
+
+	table.sort(diff, function(a, b)
+		return a.key < b.key
+	end)
+
+	Timer.stop()
+	return diff
+end
+
+function Dictionary:didUpdate(previousProps)
+	if previousProps.oldTable ~= self.props.oldTable or previousProps.newTable ~= self.props.newTable then
+		self:setState({
+			diff = self:calculateDiff(),
+		})
+	end
+end
+
+function Dictionary:render()
+	local oldTable, newTable = self.props.oldTable or {}, self.props.newTable or {}
+	local diff = self.state.diff
+
+	return Theme.with(function(theme)
+		local lines = table.create(#diff)
+		for order, line in diff do
+			local key = line.key
+			local oldValue = oldTable[key]
+			local newValue = newTable[key]
+
+			table.insert(
+				lines,
+				e("Frame", {
+					Size = UDim2.new(1, 0, 0, 25),
+					LayoutOrder = order,
+					BorderSizePixel = 0,
+					BackgroundTransparency = if line.patchType == "Remain" then 1 else self.props.transparency,
+					BackgroundColor3 = if line.patchType == "Remain"
+						then theme.Diff.Row
+						else theme.Diff[line.patchType],
+				}, {
+					DiffIcon = if line.patchType ~= "Remain"
+						then e("ImageLabel", {
+							Image = Assets.Images.Diff[line.patchType],
+							ImageColor3 = theme.AddressEntry.PlaceholderColor,
+							ImageTransparency = self.props.transparency,
+							BackgroundTransparency = 1,
+							Size = UDim2.new(0, 15, 0, 15),
+							Position = UDim2.new(0, 7, 0.5, 0),
+							AnchorPoint = Vector2.new(0, 0.5),
+						})
+						else nil,
+					KeyName = e("TextLabel", {
+						Size = UDim2.new(0.3, -15, 1, 0),
+						Position = UDim2.new(0, 30, 0, 0),
+						BackgroundTransparency = 1,
+						Text = key,
+						TextXAlignment = Enum.TextXAlignment.Left,
+						Font = Enum.Font.GothamMedium,
+						TextSize = 14,
+						TextColor3 = theme.Settings.Setting.DescriptionColor,
+						TextTruncate = Enum.TextTruncate.AtEnd,
+					}),
+					OldValue = e("Frame", {
+						Size = UDim2.new(0.35, -7, 1, 0),
+						Position = UDim2.new(0.3, 15, 0, 0),
+						BackgroundTransparency = 1,
+					}, {
+						e(DisplayValue, {
+							value = oldValue,
+							transparency = self.props.transparency,
+							textColor = theme.Settings.Setting.DescriptionColor,
+						}),
+					}),
+					NewValue = e("Frame", {
+						Size = UDim2.new(0.35, -8, 1, 0),
+						Position = UDim2.new(0.65, 8, 0, 0),
+						BackgroundTransparency = 1,
+					}, {
+						e(DisplayValue, {
+							value = newValue,
+							transparency = self.props.transparency,
+							textColor = theme.Settings.Setting.DescriptionColor,
+						}),
+					}),
+				})
+			)
+		end
+
+		return Roact.createFragment({
+			Headers = e("Frame", {
+				Size = UDim2.new(1, 0, 0, 25),
+				BackgroundTransparency = self.props.transparency:map(function(t)
+					return 0.95 + (0.05 * t)
+				end),
+				BackgroundColor3 = theme.Diff.Row,
+			}, {
+				ColumnA = e("TextLabel", {
+					Size = UDim2.new(0.3, -15, 1, 0),
+					Position = UDim2.new(0, 30, 0, 0),
+					BackgroundTransparency = 1,
+					Text = "Key",
+					TextXAlignment = Enum.TextXAlignment.Left,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
+					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+				}),
+				ColumnB = e("TextLabel", {
+					Size = UDim2.new(0.35, -7, 1, 0),
+					Position = UDim2.new(0.3, 15, 0, 0),
+					BackgroundTransparency = 1,
+					Text = "Old",
+					TextXAlignment = Enum.TextXAlignment.Left,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
+					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+				}),
+				ColumnC = e("TextLabel", {
+					Size = UDim2.new(0.35, -8, 1, 0),
+					Position = UDim2.new(0.65, 8, 0, 0),
+					BackgroundTransparency = 1,
+					Text = "New",
+					TextXAlignment = Enum.TextXAlignment.Left,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
+					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+				}),
+				Separator = e("Frame", {
+					Size = UDim2.new(1, 0, 0, 1),
+					Position = UDim2.new(0, 0, 1, 0),
+					BackgroundTransparency = 0,
+					BorderSizePixel = 0,
+					BackgroundColor3 = theme.BorderedContainer.BorderColor,
+				}),
+			}),
+			KeyValues = e(ScrollingFrame, {
+				position = UDim2.new(0, 1, 0, 25),
+				size = UDim2.new(1, -2, 1, -27),
+				scrollingDirection = Enum.ScrollingDirection.Y,
+				transparency = self.props.transparency,
+			}, {
+				Layout = e("UIListLayout", {
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					VerticalAlignment = Enum.VerticalAlignment.Top,
+				}),
+				Lines = Roact.createFragment(lines),
+			}),
+		})
+	end)
+end
+
+return Dictionary

plugin/src/App/Components/TableDiffVisualizer/init.lua

@@ -0,0 +1,48 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+local Array = require(script:FindFirstChild("Array"))
+local Dictionary = require(script:FindFirstChild("Dictionary"))
+
+local e = Roact.createElement
+
+local TableDiffVisualizer = Roact.Component:extend("TableDiffVisualizer")
+
+function TableDiffVisualizer:render()
+	local oldTable, newTable = self.props.oldTable or {}, self.props.newTable or {}
+
+	-- Ensure we're diffing tables, not mixing types
+	if type(oldTable) ~= "table" then
+		oldTable = {}
+	end
+	if type(newTable) ~= "table" then
+		newTable = {}
+	end
+
+	local isArray = next(newTable) == 1 or next(oldTable) == 1
+
+	return e(BorderedContainer, {
+		size = self.props.size,
+		position = self.props.position,
+		anchorPoint = self.props.anchorPoint,
+		transparency = self.props.transparency,
+	}, {
+		Content = if isArray
+			then e(Array, {
+				oldTable = oldTable,
+				newTable = newTable,
+				transparency = self.props.transparency,
+			})
+			else e(Dictionary, {
+				oldTable = oldTable,
+				newTable = newTable,
+				transparency = self.props.transparency,
+			}),
+	})
+end
+
+return TableDiffVisualizer

plugin/src/App/Components/Tag.lua

@@ -0,0 +1,56 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Assets = require(Plugin.Assets)
+
+local SlicedImage = require(Plugin.App.Components.SlicedImage)
+
+local e = Roact.createElement
+
+return function(props)
+	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,
+				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

plugin/src/App/Components/TextButton.lua

@@ -41,10 +41,8 @@ end
 
 function TextButton:render()
 	return Theme.with(function(theme)
-		local textSize = TextService:GetTextSize(
-			self.props.text, 18, Enum.Font.GothamSemibold,
-			Vector2.new(math.huge, math.huge)
-		)
+		local textSize =
+			TextService:GetTextSize(self.props.text, 18, Enum.Font.GothamMedium, Vector2.new(math.huge, math.huge))
 
 		local style = self.props.style
 
@@ -85,7 +83,7 @@ function TextButton:render()
 
 			Text = e("TextLabel", {
 				Text = self.props.text,
-				Font = Enum.Font.GothamSemibold,
+				Font = Enum.Font.GothamMedium,
 				TextSize = 18,
 				TextColor3 = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.TextColor, theme.Disabled.TextColor),
 				TextTransparency = self.props.transparency,
@@ -124,13 +122,19 @@ function TextButton:render()
 
 			Background = style == "Solid" and e(SlicedImage, {
 				slice = Assets.Slices.RoundedBackground,
-				color = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.BackgroundColor, theme.Disabled.BackgroundColor),
+				color = bindingUtil.mapLerp(
+					bindingEnabled,
+					theme.Enabled.BackgroundColor,
+					theme.Disabled.BackgroundColor
+				),
 				transparency = self.props.transparency,
 
 				size = UDim2.new(1, 0, 1, 0),
 
 				zIndex = -2,
 			}),
+
+			Children = Roact.createFragment(self.props[Roact.Children]),
 		})
 	end)
 end

plugin/src/App/Components/TextInput.lua

@@ -0,0 +1,107 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Flipper = require(Packages.Flipper)
+
+local Theme = require(Plugin.App.Theme)
+local Assets = require(Plugin.Assets)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local SlicedImage = require(script.Parent.SlicedImage)
+
+local SPRING_PROPS = {
+	frequency = 5,
+	dampingRatio = 1,
+}
+
+local e = Roact.createElement
+
+local TextInput = Roact.Component:extend("TextInput")
+
+function TextInput:init()
+	self.motor = Flipper.GroupMotor.new({
+		hover = 0,
+		enabled = self.props.enabled and 1 or 0,
+	})
+	self.binding = bindingUtil.fromMotor(self.motor)
+end
+
+function TextInput:didUpdate(lastProps)
+	if lastProps.enabled ~= self.props.enabled then
+		self.motor:setGoal({
+			enabled = Flipper.Spring.new(self.props.enabled and 1 or 0),
+		})
+	end
+end
+
+function TextInput:render()
+	return Theme.with(function(theme)
+		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, theme.Enabled.BorderColor, theme.Disabled.BorderColor),
+			transparency = self.props.transparency,
+
+			size = self.props.size or UDim2.new(1, 0, 1, 0),
+			position = self.props.position,
+			layoutOrder = self.props.layoutOrder,
+			anchorPoint = self.props.anchorPoint,
+		}, {
+			HoverOverlay = e(SlicedImage, {
+				slice = Assets.Slices.RoundedBackground,
+				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({ theme.ActionFillTransparency, values.hover, values.transparency })
+				end),
+				size = UDim2.new(1, 0, 1, 0),
+				zIndex = -1,
+			}),
+			Input = e("TextBox", {
+				BackgroundTransparency = 1,
+				Size = UDim2.fromScale(1, 1),
+				Text = self.props.text,
+				PlaceholderText = self.props.placeholder,
+				Font = Enum.Font.GothamMedium,
+				TextColor3 = bindingUtil.mapLerp(bindingEnabled, theme.Disabled.TextColor, theme.Enabled.TextColor),
+				PlaceholderColor3 = bindingUtil.mapLerp(
+					bindingEnabled,
+					theme.Disabled.PlaceholderColor,
+					theme.Enabled.PlaceholderColor
+				),
+				TextSize = 18,
+				TextEditable = self.props.enabled,
+				ClearTextOnFocus = self.props.clearTextOnFocus,
+
+				[Roact.Event.MouseEnter] = function()
+					self.motor:setGoal({
+						hover = Flipper.Spring.new(1, SPRING_PROPS),
+					})
+				end,
+
+				[Roact.Event.MouseLeave] = function()
+					self.motor:setGoal({
+						hover = Flipper.Spring.new(0, SPRING_PROPS),
+					})
+				end,
+
+				[Roact.Event.FocusLost] = function(rbx)
+					self.props.onEntered(rbx.Text)
+				end,
+			}),
+			Children = Roact.createFragment(self.props[Roact.Children]),
+		})
+	end)
+end
+
+return TextInput

plugin/src/App/Components/Tooltip.lua

@@ -0,0 +1,271 @@
+local TextService = game:GetService("TextService")
+local HttpService = game:GetService("HttpService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Theme = require(Plugin.App.Theme)
+
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+
+local e = Roact.createElement
+
+local DELAY = 0.75 -- How long to hover before a popup is shown (seconds)
+local TEXT_PADDING = Vector2.new(8 * 2, 6 * 2) -- Padding for the popup text containers
+local TAIL_SIZE = 16 -- Size of the triangle tail piece
+local X_OFFSET = 30 -- How far right (from left) the tail will be (assuming enough space)
+local Y_OVERLAP = 10 -- Let the triangle tail piece overlap the target a bit to help "connect" it
+
+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)
+		return e(BorderedContainer, {
+			position = UDim2.fromOffset(X, 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),
+				Text = props.Text,
+				TextSize = 16,
+				Font = Enum.Font.GothamMedium,
+				TextWrapped = true,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextColor3 = theme.Button.Bordered.Enabled.TextColor,
+				TextTransparency = props.transparency,
+			}),
+
+			Tail = e("ImageLabel", {
+				ZIndex = 100,
+				Position = if displayAbove
+					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,
+				BackgroundTransparency = 1,
+				Image = "rbxassetid://10983945016",
+				ImageColor3 = theme.BorderedContainer.BackgroundColor,
+				ImageTransparency = props.transparency,
+			}, {
+				Border = e("ImageLabel", {
+					Size = UDim2.fromScale(1, 1),
+					BackgroundTransparency = 1,
+					Image = "rbxassetid://10983946430",
+					ImageColor3 = theme.BorderedContainer.BorderColor,
+					ImageTransparency = props.transparency,
+				}),
+			}),
+		})
+	end)
+end
+
+local Provider = Roact.Component:extend("TooltipManager")
+
+function Provider:init()
+	self:setState({
+		tips = {},
+		addTip = function(id: string, data: { Text: string, Position: Vector2, Trigger: any })
+			self:setState(function(state)
+				state.tips[id] = data
+				return state
+			end)
+		end,
+		removeTip = function(id: string)
+			self:setState(function(state)
+				state.tips[id] = nil
+				return state
+			end)
+		end,
+	})
+end
+
+function Provider:render()
+	return Roact.createElement(TooltipContext.Provider, {
+		value = self.state,
+	}, self.props[Roact.Children])
+end
+
+local Container = Roact.Component:extend("TooltipContainer")
+
+function Container:init()
+	self:setState({
+		size = Vector2.new(200, 100),
+	})
+end
+
+function Container:render()
+	return Roact.createElement(TooltipContext.Consumer, {
+		render = function(context)
+			local tips = context.tips
+			local popups = {}
+
+			for key, value in tips do
+				popups[key] = e(Popup, {
+					Text = value.Text or "",
+					Position = value.Position or Vector2.zero,
+					Trigger = value.Trigger,
+
+					parentSize = self.state.size,
+				})
+			end
+
+			return e("Frame", {
+				[Roact.Change.AbsoluteSize] = function(rbx)
+					self:setState({
+						size = rbx.AbsoluteSize,
+					})
+				end,
+				ZIndex = 100,
+				BackgroundTransparency = 1,
+				Size = UDim2.fromScale(1, 1),
+			}, popups)
+		end,
+	})
+end
+
+local Trigger = Roact.Component:extend("TooltipTrigger")
+
+function Trigger:init()
+	self.id = HttpService:GenerateGUID(false)
+	self.ref = Roact.createRef()
+	self.showingPopup = false
+
+	self.destroy = function()
+		self.props.context.removeTip(self.id)
+		self.showingPopup = false
+	end
+end
+
+function Trigger:willUnmount()
+	if self.showDelayThread then
+		pcall(task.cancel, self.showDelayThread)
+	end
+	if self.destroy then
+		self.destroy()
+	end
+end
+
+function Trigger:didUpdate(prevProps)
+	if prevProps.text ~= self.props.text then
+		-- Any existing popup is now invalid
+		self.props.context.removeTip(self.id)
+		self.showingPopup = false
+
+		-- Let the new text propagate
+		self:managePopup()
+	end
+end
+
+function Trigger:isHovering()
+	local rbx = self.ref.current
+	if rbx then
+		return rbx.GuiState == Enum.GuiState.Hover
+	end
+	return false
+end
+
+function Trigger:getMousePos()
+	local rbx = self.ref.current
+	if rbx then
+		local widget = rbx:FindFirstAncestorOfClass("DockWidgetPluginGui")
+		if widget then
+			return widget:GetRelativeMousePosition()
+		end
+	end
+	return Vector2.zero
+end
+
+function Trigger:managePopup()
+	if self:isHovering() then
+		if self.showingPopup or self.showDelayThread then
+			-- Don't duplicate popups
+			return
+		end
+
+		self.showDelayThread = task.delay(DELAY, function()
+			self.props.context.addTip(self.id, {
+				Text = self.props.text,
+				Position = self:getMousePos(),
+				Trigger = self.ref,
+			})
+			self.showDelayThread = nil
+			self.showingPopup = true
+		end)
+	else
+		if self.showDelayThread then
+			pcall(task.cancel, self.showDelayThread)
+			self.showDelayThread = nil
+		end
+		self.props.context.removeTip(self.id)
+		self.showingPopup = false
+	end
+end
+
+function Trigger:render()
+	local function recalculate()
+		self:managePopup()
+	end
+
+	return e("Frame", {
+		Size = UDim2.fromScale(1, 1),
+		BackgroundTransparency = 1,
+		ZIndex = self.props.zIndex or 100,
+		[Roact.Ref] = self.ref,
+
+		[Roact.Change.GuiState] = recalculate,
+		[Roact.Change.AbsolutePosition] = recalculate,
+		[Roact.Change.AbsoluteSize] = recalculate,
+	})
+end
+
+local function TriggerConsumer(props)
+	return Roact.createElement(TooltipContext.Consumer, {
+		render = function(context)
+			local innerProps = table.clone(props)
+			innerProps.context = context
+
+			return e(Trigger, innerProps)
+		end,
+	})
+end
+
+return {
+	Provider = Provider,
+	Container = Container,
+	Trigger = TriggerConsumer,
+}

plugin/src/App/Components/TouchRipple.lua

@@ -24,9 +24,7 @@ function TouchRipple:init()
 	})
 	self.binding = bindingUtil.fromMotor(self.motor)
 
-	self.position, self.setPosition = Roact.createBinding(
-		Vector2.new(0, 0)
-	)
+	self.position, self.setPosition = Roact.createBinding(Vector2.new(0, 0))
 end
 
 function TouchRipple:reset()
@@ -43,10 +41,7 @@ function TouchRipple:calculateRadius(position)
 	local container = self.ref.current
 
 	if container then
-		local corner = Vector2.new(
-			math.floor((1 - position.X) + 0.5),
-			math.floor((1 - position.Y) + 0.5)
-		)
+		local corner = Vector2.new(math.floor((1 - position.X) + 0.5), math.floor((1 - position.Y) + 0.5))
 
 		local size = container.AbsoluteSize
 		local ratio = size / math.min(size.X, size.Y)
@@ -93,10 +88,7 @@ function TouchRipple:render()
 				input:GetPropertyChangedSignal("UserInputState"):Connect(function()
 					local userInputState = input.UserInputState
 
-					if
-						userInputState == Enum.UserInputState.Cancel
-						or userInputState == Enum.UserInputState.End
-					then
+					if userInputState == Enum.UserInputState.Cancel or userInputState == Enum.UserInputState.End then
 						self.motor:setGoal({
 							opacity = Flipper.Spring.new(0, {
 								frequency = 5,
@@ -127,8 +119,10 @@ function TouchRipple:render()
 					local containerAspect = containerSize.X / containerSize.Y
 
 					return UDim2.new(
-						currentSize / math.max(containerAspect, 1), 0,
-						currentSize * math.min(containerAspect, 1), 0
+						currentSize / math.max(containerAspect, 1),
+						0,
+						currentSize * math.min(containerAspect, 1),
+						0
 					)
 				end
 			end),

plugin/src/App/Components/VirtualScroller.lua

@@ -0,0 +1,168 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local e = Roact.createElement
+
+local VirtualScroller = Roact.Component:extend("VirtualScroller")
+
+function VirtualScroller:init()
+	self.scrollFrameRef = Roact.createRef()
+	self:setState({
+		WindowSize = Vector2.new(),
+		CanvasPosition = Vector2.new(),
+	})
+
+	self.totalCanvas, self.setTotalCanvas = Roact.createBinding(0)
+	self.padding, self.setPadding = Roact.createBinding(0)
+
+	self:refresh()
+	if self.props.updateEvent then
+		self.connection = self.props.updateEvent:Connect(function()
+			self:refresh()
+		end)
+	end
+end
+
+function VirtualScroller:didMount()
+	local rbx = self.scrollFrameRef:getValue()
+
+	local windowSizeSignal = rbx:GetPropertyChangedSignal("AbsoluteWindowSize")
+	self.windowSizeChanged = windowSizeSignal:Connect(function()
+		self:setState({ WindowSize = rbx.AbsoluteWindowSize })
+		self:refresh()
+	end)
+
+	local canvasPositionSignal = rbx:GetPropertyChangedSignal("CanvasPosition")
+	self.canvasPositionChanged = canvasPositionSignal:Connect(function()
+		if math.abs(rbx.CanvasPosition.Y - self.state.CanvasPosition.Y) > 5 then
+			self:setState({ CanvasPosition = rbx.CanvasPosition })
+			self:refresh()
+		end
+	end)
+
+	self:refresh()
+end
+
+function VirtualScroller:willUnmount()
+	self.windowSizeChanged:Disconnect()
+	self.canvasPositionChanged:Disconnect()
+	if self.connection then
+		self.connection:Disconnect()
+		self.connection = nil
+	end
+end
+
+function VirtualScroller:refresh()
+	local props = self.props
+	local state = self.state
+
+	local count = props.count
+	local windowSize, canvasPosition = state.WindowSize.Y, state.CanvasPosition.Y
+	local bottom = canvasPosition + windowSize
+
+	local minIndex, maxIndex = 1, count
+	local padding, canvasSize = 0, 0
+
+	local pos = 0
+	for i = 1, count do
+		local height = props.getHeightBinding(i):getValue()
+		canvasSize += height
+
+		if pos > bottom then
+			-- Below window
+			if maxIndex > i then
+				maxIndex = i
+			end
+		end
+
+		pos += height
+
+		if pos < canvasPosition then
+			-- Above window
+			minIndex = i
+			padding = pos - height
+		end
+	end
+
+	self.setPadding(padding)
+	self.setTotalCanvas(canvasSize)
+	self:setState({
+		Start = minIndex,
+		End = maxIndex,
+	})
+end
+
+function VirtualScroller:didUpdate(previousProps)
+	if self.props.count ~= previousProps.count then
+		-- Items have changed, so we need to refresh
+		self:refresh()
+	end
+end
+
+function VirtualScroller:render()
+	local props, state = self.props, self.state
+
+	local items = {}
+	for i = state.Start, state.End do
+		local content = props.render(i)
+		if content == nil then
+			continue
+		end
+
+		items["Item" .. i] = e("Frame", {
+			LayoutOrder = i,
+			Size = props.getHeightBinding(i):map(function(height)
+				return UDim2.new(1, 0, 0, height)
+			end),
+			BackgroundTransparency = 1,
+		}, content)
+	end
+
+	return Theme.with(function(theme)
+		return e("ScrollingFrame", {
+			Size = props.size,
+			Position = props.position,
+			AnchorPoint = props.anchorPoint,
+			BackgroundTransparency = props.backgroundTransparency or 1,
+			BackgroundColor3 = props.backgroundColor3 or theme.BorderedContainer.BackgroundColor,
+			BorderColor3 = props.borderColor3 or theme.BorderedContainer.BorderColor,
+			CanvasSize = self.totalCanvas:map(function(s)
+				return UDim2.fromOffset(0, s)
+			end),
+			ScrollBarThickness = 9,
+			ScrollBarImageColor3 = theme.ScrollBarColor,
+			ScrollBarImageTransparency = props.transparency:map(function(value)
+				return bindingUtil.blendAlpha({ 0.65, value })
+			end),
+			TopImage = Assets.Images.ScrollBar.Top,
+			MidImage = Assets.Images.ScrollBar.Middle,
+			BottomImage = Assets.Images.ScrollBar.Bottom,
+
+			ElasticBehavior = Enum.ElasticBehavior.Always,
+			ScrollingDirection = Enum.ScrollingDirection.Y,
+			VerticalScrollBarInset = Enum.ScrollBarInset.ScrollBar,
+			[Roact.Ref] = self.scrollFrameRef,
+		}, {
+			Layout = e("UIListLayout", {
+				Padding = UDim.new(0, 0),
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				FillDirection = Enum.FillDirection.Vertical,
+			}),
+			Padding = e("UIPadding", {
+				PaddingTop = self.padding:map(function(p)
+					return UDim.new(0, p)
+				end),
+			}),
+			Content = Roact.createFragment(items),
+		})
+	end)
+end
+
+return VirtualScroller

plugin/src/App/Notifications.lua

@@ -7,6 +7,7 @@ local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
 local Flipper = require(Packages.Flipper)
+local Log = require(Packages.Log)
 
 local bindingUtil = require(script.Parent.bindingUtil)
 
@@ -14,6 +15,7 @@ local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
 
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+local TextButton = require(Plugin.App.Components.TextButton)
 
 local baseClock = DateTime.now().UnixTimestampMillis
 
@@ -28,37 +30,31 @@ function Notification:init()
 	self.lifetime = self.props.timeout
 
 	self.motor:onStep(function(value)
-		if value <= 0 then
-			if self.props.onClose then
-				self.props.onClose()
-			end
+		if value <= 0 and self.props.onClose then
+			self.props.onClose()
 		end
 	end)
 end
 
 function Notification:dismiss()
-	self.motor:setGoal(
-		Flipper.Spring.new(0, {
-			frequency = 5,
-			dampingRatio = 1,
-		})
-	)
+	self.motor:setGoal(Flipper.Spring.new(0, {
+		frequency = 5,
+		dampingRatio = 1,
+	}))
 end
 
 function Notification:didMount()
-	self.motor:setGoal(
-		Flipper.Spring.new(1, {
-			frequency = 3,
-			dampingRatio = 1,
-		})
-	)
+	self.motor:setGoal(Flipper.Spring.new(1, {
+		frequency = 3,
+		dampingRatio = 1,
+	}))
 
 	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
+		while task.wait(1 / 10) do
 			local now = os.clock()
 			local dt = now - clock
 			clock = now
@@ -86,23 +82,51 @@ function Notification:willUnmount()
 end
 
 function Notification:render()
-	local time = DateTime.fromUnixTimestampMillis(self.props.timestamp)
-
-	local textBounds = TextService:GetTextSize(
-		self.props.text,
-		15,
-		Enum.Font.GothamSemibold,
-		Vector2.new(350, 700)
-	)
-
 	local transparency = self.binding:map(function(value)
 		return 1 - value
 	end)
 
+	local textBounds = TextService:GetTextSize(self.props.text, 15, Enum.Font.GothamMedium, Vector2.new(350, 700))
+
+	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,
+			})
+
+			buttonsX += TextService:GetTextSize(
+				action.text,
+				18,
+				Enum.Font.GothamMedium,
+				Vector2.new(math.huge, math.huge)
+			).X + 30
+
+			count += 1
+		end
+
+		buttonsX += (count - 1) * 5
+	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+textBounds.X)*value,
-			math.max(14+20+textBounds.Y, 32+20)
+			(35 + 40 + contentX) * value,
+			5 + actionsY + paddingY + math.max(logoSize, textBounds.Y)
 		)
 	end)
 
@@ -122,22 +146,22 @@ function Notification:render()
 				transparency = transparency,
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
-				TextContainer = e("Frame", {
-					Size = UDim2.new(0, 35+textBounds.X, 1, -20),
-					Position = UDim2.new(0, 0, 0, 10),
-					BackgroundTransparency = 1
+				Contents = e("Frame", {
+					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.new(0, 32, 0, 32),
-						Position = UDim2.new(0, 0, 0.5, 0),
-						AnchorPoint = Vector2.new(0, 0.5),
+						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,
-						Font = Enum.Font.GothamSemibold,
+						Font = Enum.Font.GothamMedium,
 						TextSize = 15,
 						TextColor3 = theme.Notification.InfoColor,
 						TextTransparency = transparency,
@@ -150,27 +174,30 @@ function Notification:render()
 						LayoutOrder = 1,
 						BackgroundTransparency = 1,
 					}),
-					Time = e("TextLabel", {
-						Text = time:FormatLocalTime("LTS", "en-us"),
-						Font = Enum.Font.Code,
-						TextSize = 12,
-						TextColor3 = theme.Notification.InfoColor,
-						TextTransparency = transparency,
-						TextXAlignment = Enum.TextXAlignment.Left,
-
-						Size = UDim2.new(1, -35, 0, 14),
-						Position = UDim2.new(0, 35, 1, -14),
-
-						LayoutOrder = 1,
-						BackgroundTransparency = 1,
-					}),
+					Actions = if self.props.actions
+						then e("Frame", {
+							Size = UDim2.new(1, -40, 0, 35),
+							Position = UDim2.new(1, 0, 1, 0),
+							AnchorPoint = Vector2.new(1, 1),
+							BackgroundTransparency = 1,
+						}, {
+							Layout = e("UIListLayout", {
+								FillDirection = Enum.FillDirection.Horizontal,
+								HorizontalAlignment = Enum.HorizontalAlignment.Right,
+								VerticalAlignment = Enum.VerticalAlignment.Center,
+								SortOrder = Enum.SortOrder.LayoutOrder,
+								Padding = UDim.new(0, 5),
+							}),
+							Buttons = Roact.createFragment(actionButtons),
+						})
+						else nil,
 				}),
 
 				Padding = e("UIPadding", {
 					PaddingLeft = UDim.new(0, 17),
 					PaddingRight = UDim.new(0, 15),
 				}),
-			})
+			}),
 		})
 	end)
 end
@@ -180,15 +207,16 @@ local Notifications = Roact.Component:extend("Notifications")
 function Notifications:render()
 	local notifs = {}
 
-	for index, notif in ipairs(self.props.notifications) do
-		notifs[notif] = e(Notification, {
+	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(index)
+				self.props.onClose(id)
 			end,
 		})
 	end

plugin/src/App/Page.lua

@@ -15,7 +15,7 @@ local Page = Roact.Component:extend("Page")
 
 function Page:init()
 	self:setState({
-		rendered = self.props.active
+		rendered = self.props.active,
 	})
 
 	self.motor = Flipper.SingleMotor.new(self.props.active and 1 or 0)
@@ -51,20 +51,21 @@ function Page:render()
 		Size = UDim2.new(1, 0, 1, 0),
 		BackgroundTransparency = 1,
 	}, {
-		Component = e(self.props.component, Dictionary.merge(self.props, {
-			transparency = transparency,
-		}))
+		Component = e(
+			self.props.component,
+			Dictionary.merge(self.props, {
+				transparency = transparency,
+			})
+		),
 	})
 end
 
 function Page:didUpdate(lastProps)
 	if self.props.active ~= lastProps.active then
-		self.motor:setGoal(
-			Flipper.Spring.new(self.props.active and 1 or 0, {
-				frequency = 6,
-				dampingRatio = 1,
-			})
-		)
+		self.motor:setGoal(Flipper.Spring.new(self.props.active and 1 or 0, {
+			frequency = 6,
+			dampingRatio = 1,
+		}))
 	end
 end
 

plugin/src/App/StatusPages/Confirming.lua

@@ -0,0 +1,272 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+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)
+local StudioPluginGui = require(Plugin.App.Components.Studio.StudioPluginGui)
+local Tooltip = require(Plugin.App.Components.Tooltip)
+local PatchVisualizer = require(Plugin.App.Components.PatchVisualizer)
+local StringDiffVisualizer = require(Plugin.App.Components.StringDiffVisualizer)
+local TableDiffVisualizer = require(Plugin.App.Components.TableDiffVisualizer)
+
+local e = Roact.createElement
+
+local ConfirmingPage = Roact.Component:extend("ConfirmingPage")
+
+function ConfirmingPage:init()
+	self.contentSize, self.setContentSize = Roact.createBinding(0)
+	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
+
+	self:setState({
+		patchTree = nil,
+		showingStringDiff = false,
+		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()
+	return Theme.with(function(theme)
+		local pageContent = Roact.createFragment({
+			Title = e("TextLabel", {
+				Text = string.format(
+					"Sync changes for project '%s':",
+					self.props.confirmData.serverInfo.projectName or "UNKNOWN"
+				),
+				Font = Enum.Font.Gotham,
+				LineHeight = 1.2,
+				TextSize = 14,
+				TextColor3 = theme.TextColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = self.props.transparency,
+				Size = UDim2.new(1, 0, 0, 20),
+				BackgroundTransparency = 1,
+			}),
+
+			PatchVisualizer = e(PatchVisualizer, {
+				size = UDim2.new(1, 0, 1, -100),
+				transparency = self.props.transparency,
+				layoutOrder = 3,
+
+				patchTree = self.state.patchTree,
+
+				showStringDiff = function(oldString: string, newString: string)
+					self:setState({
+						showingStringDiff = true,
+						oldString = oldString,
+						newString = newString,
+					})
+				end,
+				showTableDiff = function(oldTable: { [any]: any? }, newTable: { [any]: any? })
+					self:setState({
+						showingTableDiff = true,
+						oldTable = oldTable,
+						newTable = newTable,
+					})
+				end,
+			}),
+
+			Buttons = e("Frame", {
+				Size = UDim2.new(1, 0, 0, 34),
+				LayoutOrder = 4,
+				BackgroundTransparency = 1,
+			}, {
+				Abort = e(TextButton, {
+					text = "Abort",
+					style = "Bordered",
+					transparency = self.props.transparency,
+					layoutOrder = 1,
+					onClick = self.props.onAbort,
+				}, {
+					Tip = e(Tooltip.Trigger, {
+						text = "Stop the connection process",
+					}),
+				}),
+
+				Reject = if Settings:get("twoWaySync")
+					then e(TextButton, {
+						text = "Reject",
+						style = "Bordered",
+						transparency = self.props.transparency,
+						layoutOrder = 2,
+						onClick = self.props.onReject,
+					}, {
+						Tip = e(Tooltip.Trigger, {
+							text = "Push Studio changes to the Rojo server",
+						}),
+					})
+					else nil,
+
+				Accept = e(TextButton, {
+					text = "Accept",
+					style = "Solid",
+					transparency = self.props.transparency,
+					layoutOrder = 3,
+					onClick = self.props.onAccept,
+				}, {
+					Tip = e(Tooltip.Trigger, {
+						text = "Pull Rojo server changes to Studio",
+					}),
+				}),
+
+				Layout = e("UIListLayout", {
+					HorizontalAlignment = Enum.HorizontalAlignment.Right,
+					FillDirection = Enum.FillDirection.Horizontal,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					Padding = UDim.new(0, 10),
+				}),
+			}),
+
+			Padding = e("UIPadding", {
+				PaddingLeft = UDim.new(0, 8),
+				PaddingRight = UDim.new(0, 8),
+			}),
+
+			Layout = e("UIListLayout", {
+				HorizontalAlignment = Enum.HorizontalAlignment.Center,
+				VerticalAlignment = Enum.VerticalAlignment.Center,
+				FillDirection = Enum.FillDirection.Vertical,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				Padding = UDim.new(0, 10),
+			}),
+
+			StringDiff = e(StudioPluginGui, {
+				id = "Rojo_ConfirmingStringDiff",
+				title = "String diff",
+				active = self.state.showingStringDiff,
+				isEphemeral = true,
+
+				initDockState = Enum.InitialDockState.Float,
+				overridePreviousState = true,
+				floatingSize = Vector2.new(500, 350),
+				minimumSize = Vector2.new(400, 250),
+
+				zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+
+				onClose = function()
+					self:setState({
+						showingStringDiff = false,
+					})
+				end,
+			}, {
+				TooltipsProvider = e(Tooltip.Provider, nil, {
+					Tooltips = e(Tooltip.Container, nil),
+					Content = e("Frame", {
+						Size = UDim2.fromScale(1, 1),
+						BackgroundTransparency = 1,
+					}, {
+						e(StringDiffVisualizer, {
+							size = UDim2.new(1, -10, 1, -10),
+							position = UDim2.new(0, 5, 0, 5),
+							anchorPoint = Vector2.new(0, 0),
+							transparency = self.props.transparency,
+
+							oldString = self.state.oldString,
+							newString = self.state.newString,
+						}),
+					}),
+				}),
+			}),
+
+			TableDiff = e(StudioPluginGui, {
+				id = "Rojo_ConfirmingTableDiff",
+				title = "Table diff",
+				active = self.state.showingTableDiff,
+				isEphemeral = true,
+
+				initDockState = Enum.InitialDockState.Float,
+				overridePreviousState = true,
+				floatingSize = Vector2.new(500, 350),
+				minimumSize = Vector2.new(400, 250),
+
+				zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+
+				onClose = function()
+					self:setState({
+						showingTableDiff = false,
+					})
+				end,
+			}, {
+				TooltipsProvider = e(Tooltip.Provider, nil, {
+					Tooltips = e(Tooltip.Container, nil),
+					Content = e("Frame", {
+						Size = UDim2.fromScale(1, 1),
+						BackgroundTransparency = 1,
+					}, {
+						e(TableDiffVisualizer, {
+							size = UDim2.new(1, -10, 1, -10),
+							position = UDim2.new(0, 5, 0, 5),
+							anchorPoint = Vector2.new(0, 0),
+							transparency = self.props.transparency,
+
+							oldTable = self.state.oldTable,
+							newTable = self.state.newTable,
+						}),
+					}),
+				}),
+			}),
+		})
+
+		if self.props.createPopup then
+			return e(StudioPluginGui, {
+				id = "Rojo_DiffSync",
+				title = string.format(
+					"Confirm sync for project '%s':",
+					self.props.confirmData.serverInfo.projectName or "UNKNOWN"
+				),
+				active = true,
+				isEphemeral = true,
+
+				initDockState = Enum.InitialDockState.Float,
+				overridePreviousState = false,
+				floatingSize = Vector2.new(500, 350),
+				minimumSize = Vector2.new(400, 250),
+
+				zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+
+				onClose = self.props.onAbort,
+			}, {
+				Tooltips = e(Tooltip.Container, nil),
+				Content = e("Frame", {
+					Size = UDim2.fromScale(1, 1),
+					BackgroundTransparency = 1,
+				}, pageContent),
+			})
+		end
+
+		return pageContent
+	end)
+end
+
+return ConfirmingPage

plugin/src/App/StatusPages/Connected.lua

@@ -4,33 +4,204 @@ local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
 
+local timeUtil = require(Plugin.timeUtil)
 local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
+local PatchSet = require(Plugin.PatchSet)
 
+local StudioPluginGui = require(Plugin.App.Components.Studio.StudioPluginGui)
 local Header = require(Plugin.App.Components.Header)
 local IconButton = require(Plugin.App.Components.IconButton)
+local TextButton = require(Plugin.App.Components.TextButton)
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+local Tooltip = require(Plugin.App.Components.Tooltip)
+local PatchVisualizer = require(Plugin.App.Components.PatchVisualizer)
+local StringDiffVisualizer = require(Plugin.App.Components.StringDiffVisualizer)
+local TableDiffVisualizer = require(Plugin.App.Components.TableDiffVisualizer)
 
 local e = Roact.createElement
 
-local AGE_UNITS = { {31556909, "year"}, {2629743, "month"}, {604800, "week"}, {86400, "day"}, {3600, "hour"}, {60, "minute"}, }
-function timeSinceText(elapsed: number): string
-	if elapsed < 3 then
-		return "just now"
+local ChangesViewer = Roact.Component:extend("ChangesViewer")
+
+function ChangesViewer:init()
+	-- Hold onto the serve session during the lifecycle of this component
+	-- so that it can still render during the fade out after disconnecting
+	self.serveSession = self.props.serveSession
+end
+
+function ChangesViewer:render()
+	if self.props.rendered == false or self.serveSession == nil or self.props.patchData == nil then
+		return nil
 	end
 
-	local ageText = string.format("%d seconds ago", elapsed)
+	local unapplied = PatchSet.countChanges(self.props.patchData.unapplied)
+	local applied = PatchSet.countChanges(self.props.patchData.patch) - unapplied
 
-	for _,UnitData in ipairs(AGE_UNITS) do
-		local UnitSeconds, UnitName = UnitData[1], UnitData[2]
-		if elapsed > UnitSeconds then
-			local c = math.floor(elapsed/UnitSeconds)
-			ageText = string.format("%d %s%s ago", c, UnitName, c>1 and "s" or "")
-			break
-		end
-	end
+	return Theme.with(function(theme)
+		return Roact.createFragment({
+			Navbar = e("Frame", {
+				Size = UDim2.new(1, 0, 0, 40),
+				BackgroundTransparency = 1,
+			}, {
+				Close = e(IconButton, {
+					icon = Assets.Images.Icons.Close,
+					iconSize = 24,
+					color = theme.Settings.Navbar.BackButtonColor,
+					transparency = self.props.transparency,
 
-	return ageText
+					position = UDim2.new(0, 0, 0.5, 0),
+					anchorPoint = Vector2.new(0, 0.5),
+
+					onClick = self.props.onBack,
+				}, {
+					Tip = e(Tooltip.Trigger, {
+						text = "Close",
+					}),
+				}),
+
+				Title = e("TextLabel", {
+					Text = "Sync",
+					Font = Enum.Font.GothamMedium,
+					TextSize = 17,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextColor3 = theme.TextColor,
+					TextTransparency = self.props.transparency,
+					Size = UDim2.new(1, -40, 0, 20),
+					Position = UDim2.new(0, 40, 0, 0),
+					BackgroundTransparency = 1,
+				}),
+
+				Subtitle = e("TextLabel", {
+					Text = DateTime.fromUnixTimestamp(self.props.patchData.timestamp):FormatLocalTime("LTS", "en-us"),
+					TextXAlignment = Enum.TextXAlignment.Left,
+					Font = Enum.Font.Gotham,
+					TextSize = 15,
+					TextColor3 = theme.SubTextColor,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+					TextTransparency = self.props.transparency,
+					Size = UDim2.new(1, -40, 0, 16),
+					Position = UDim2.new(0, 40, 0, 20),
+					BackgroundTransparency = 1,
+				}),
+
+				Info = e("Frame", {
+					BackgroundTransparency = 1,
+					Size = UDim2.new(0, 10, 0, 24),
+					AutomaticSize = Enum.AutomaticSize.X,
+					Position = UDim2.new(1, -5, 0.5, 0),
+					AnchorPoint = Vector2.new(1, 0.5),
+				}, {
+					Tooltip = e(Tooltip.Trigger, {
+						text = `{applied} changes applied`
+							.. (if unapplied > 0 then `, {unapplied} changes failed` else ""),
+					}),
+					Content = e("Frame", {
+						BackgroundTransparency = 1,
+						Size = UDim2.new(0, 0, 1, 0),
+						AutomaticSize = Enum.AutomaticSize.X,
+					}, {
+						Layout = e("UIListLayout", {
+							FillDirection = Enum.FillDirection.Horizontal,
+							HorizontalAlignment = Enum.HorizontalAlignment.Right,
+							VerticalAlignment = Enum.VerticalAlignment.Center,
+							SortOrder = Enum.SortOrder.LayoutOrder,
+							Padding = UDim.new(0, 4),
+						}),
+
+						StatusIcon = e("ImageLabel", {
+							BackgroundTransparency = 1,
+							Image = if unapplied > 0
+								then Assets.Images.Icons.SyncWarning
+								else Assets.Images.Icons.SyncSuccess,
+							ImageColor3 = if unapplied > 0 then theme.Diff.Warning else theme.TextColor,
+							Size = UDim2.new(0, 24, 0, 24),
+							LayoutOrder = 10,
+						}),
+						StatusSpacer = e("Frame", {
+							BackgroundTransparency = 1,
+							Size = UDim2.new(0, 6, 0, 4),
+							LayoutOrder = 9,
+						}),
+						AppliedIcon = e("ImageLabel", {
+							BackgroundTransparency = 1,
+							Image = Assets.Images.Icons.Checkmark,
+							ImageColor3 = theme.TextColor,
+							Size = UDim2.new(0, 16, 0, 16),
+							LayoutOrder = 1,
+						}),
+						AppliedText = e("TextLabel", {
+							Text = applied,
+							Font = Enum.Font.Gotham,
+							TextSize = 15,
+							TextColor3 = theme.TextColor,
+							TextTransparency = self.props.transparency,
+							Size = UDim2.new(0, 0, 1, 0),
+							AutomaticSize = Enum.AutomaticSize.X,
+							BackgroundTransparency = 1,
+							LayoutOrder = 2,
+						}),
+						Warnings = if unapplied > 0
+							then Roact.createFragment({
+								WarningsSpacer = e("Frame", {
+									BackgroundTransparency = 1,
+									Size = UDim2.new(0, 4, 0, 4),
+									LayoutOrder = 3,
+								}),
+								UnappliedIcon = e("ImageLabel", {
+									BackgroundTransparency = 1,
+									Image = Assets.Images.Icons.Exclamation,
+									ImageColor3 = theme.Diff.Warning,
+									Size = UDim2.new(0, 4, 0, 16),
+									LayoutOrder = 4,
+								}),
+								UnappliedText = e("TextLabel", {
+									Text = unapplied,
+									Font = Enum.Font.Gotham,
+									TextSize = 15,
+									TextColor3 = theme.Diff.Warning,
+									TextTransparency = self.props.transparency,
+									Size = UDim2.new(0, 0, 1, 0),
+									AutomaticSize = Enum.AutomaticSize.X,
+									BackgroundTransparency = 1,
+									LayoutOrder = 5,
+								}),
+							})
+							else nil,
+					}),
+				}),
+
+				Divider = e("Frame", {
+					BackgroundColor3 = theme.Settings.DividerColor,
+					BackgroundTransparency = self.props.transparency,
+					Size = UDim2.new(1, 0, 0, 1),
+					Position = UDim2.new(0, 0, 1, 0),
+					BorderSizePixel = 0,
+				}, {
+					Gradient = e("UIGradient", {
+						Transparency = NumberSequence.new({
+							NumberSequenceKeypoint.new(0, 1),
+							NumberSequenceKeypoint.new(0.1, 0),
+							NumberSequenceKeypoint.new(0.9, 0),
+							NumberSequenceKeypoint.new(1, 1),
+						}),
+					}),
+				}),
+			}),
+
+			Patch = e(PatchVisualizer, {
+				size = UDim2.new(1, -10, 1, -65),
+				position = UDim2.new(0, 5, 1, -5),
+				anchorPoint = Vector2.new(0, 1),
+				transparency = self.props.transparency,
+				layoutOrder = self.props.layoutOrder,
+
+				patchTree = self.props.patchTree,
+
+				showStringDiff = self.props.showStringDiff,
+				showTableDiff = self.props.showTableDiff,
+			}),
+		})
+	end)
 end
 
 local function ConnectionDetails(props)
@@ -42,7 +213,7 @@ local function ConnectionDetails(props)
 		}, {
 			TextContainer = e("Frame", {
 				Size = UDim2.new(1, 0, 1, 0),
-				BackgroundTransparency = 1
+				BackgroundTransparency = 1,
 			}, {
 				ProjectName = e("TextLabel", {
 					Text = props.projectName,
@@ -80,18 +251,6 @@ local function ConnectionDetails(props)
 				}),
 			}),
 
-			Disconnect = e(IconButton, {
-				icon = Assets.Images.Icons.Close,
-				iconSize = 24,
-				color = theme.ConnectionDetails.DisconnectColor,
-				transparency = props.transparency,
-
-				position = UDim2.new(1, 0, 0.5, 0),
-				anchorPoint = Vector2.new(1, 0.5),
-
-				onClick = props.onDisconnect,
-			}),
-
 			Padding = e("UIPadding", {
 				PaddingLeft = UDim.new(0, 17),
 				PaddingRight = UDim.new(0, 15),
@@ -102,12 +261,176 @@ end
 
 local ConnectedPage = Roact.Component:extend("ConnectedPage")
 
+function ConnectedPage:getChangeInfoText()
+	local patchData = self.props.patchData
+	if patchData == nil then
+		return ""
+	end
+	return timeUtil.elapsedToText(DateTime.now().UnixTimestamp - patchData.timestamp)
+end
+
+function ConnectedPage:startChangeInfoTextUpdater()
+	-- Cancel any existing updater
+	self:stopChangeInfoTextUpdater()
+
+	-- Start a new updater
+	self.changeInfoTextUpdater = task.defer(function()
+		while true do
+			self.setChangeInfoText(self:getChangeInfoText())
+
+			local elapsed = DateTime.now().UnixTimestamp - self.props.patchData.timestamp
+			local updateInterval = 1
+
+			-- Update timestamp text as frequently as currently needed
+			for _, UnitData in ipairs(timeUtil.AGE_UNITS) do
+				local UnitSeconds = UnitData[1]
+				if elapsed > UnitSeconds then
+					updateInterval = UnitSeconds
+					break
+				end
+			end
+
+			task.wait(updateInterval)
+		end
+	end)
+end
+
+function ConnectedPage:stopChangeInfoTextUpdater()
+	if self.changeInfoTextUpdater then
+		task.cancel(self.changeInfoTextUpdater)
+		self.changeInfoTextUpdater = nil
+	end
+end
+
+function ConnectedPage:init()
+	self:setState({
+		renderChanges = false,
+		hoveringChangeInfo = false,
+		showingStringDiff = false,
+		oldString = "",
+		newString = "",
+	})
+
+	self.changeInfoText, self.setChangeInfoText = Roact.createBinding("")
+
+	self:startChangeInfoTextUpdater()
+end
+
+function ConnectedPage:willUnmount()
+	self:stopChangeInfoTextUpdater()
+end
+
+function ConnectedPage:didUpdate(previousProps)
+	if self.props.patchData.timestamp ~= previousProps.patchData.timestamp then
+		-- New patch recieved
+		self:startChangeInfoTextUpdater()
+		self:setState({
+			showingStringDiff = false,
+		})
+	end
+end
+
 function ConnectedPage:render()
+	local syncWarning = self.props.patchData
+		and self.props.patchData.unapplied
+		and PatchSet.countChanges(self.props.patchData.unapplied) > 0
+
 	return Theme.with(function(theme)
 		return Roact.createFragment({
-			Header = e(Header, {
-				transparency = self.props.transparency,
-				layoutOrder = 1,
+			Padding = e("UIPadding", {
+				PaddingLeft = UDim.new(0, 20),
+				PaddingRight = UDim.new(0, 20),
+			}),
+
+			Layout = e("UIListLayout", {
+				VerticalAlignment = Enum.VerticalAlignment.Center,
+				FillDirection = Enum.FillDirection.Vertical,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				Padding = UDim.new(0, 10),
+			}),
+
+			Heading = e("Frame", {
+				BackgroundTransparency = 1,
+				Size = UDim2.new(1, 0, 0, 32),
+			}, {
+				Header = e(Header, {
+					transparency = self.props.transparency,
+				}),
+
+				ChangeInfo = e("TextButton", {
+					Text = "",
+					Size = UDim2.new(0, 0, 1, 0),
+					AutomaticSize = Enum.AutomaticSize.X,
+					BackgroundColor3 = theme.BorderedContainer.BorderedColor,
+					BackgroundTransparency = if self.state.hoveringChangeInfo then 0.7 else 1,
+					BorderSizePixel = 0,
+					Position = UDim2.new(1, -5, 0.5, 0),
+					AnchorPoint = Vector2.new(1, 0.5),
+					[Roact.Event.MouseEnter] = function()
+						self:setState({
+							hoveringChangeInfo = true,
+						})
+					end,
+					[Roact.Event.MouseLeave] = function()
+						self:setState({
+							hoveringChangeInfo = false,
+						})
+					end,
+					[Roact.Event.Activated] = function()
+						self:setState(function(prevState)
+							prevState = prevState or {}
+							return {
+								renderChanges = not prevState.renderChanges,
+							}
+						end)
+					end,
+				}, {
+					Corner = e("UICorner", {
+						CornerRadius = UDim.new(0, 5),
+					}),
+					Tooltip = e(Tooltip.Trigger, {
+						text = if self.state.renderChanges then "Hide changes" else "View changes",
+					}),
+					Content = e("Frame", {
+						BackgroundTransparency = 1,
+						Size = UDim2.new(0, 0, 1, 0),
+						AutomaticSize = Enum.AutomaticSize.X,
+					}, {
+						Layout = e("UIListLayout", {
+							FillDirection = Enum.FillDirection.Horizontal,
+							HorizontalAlignment = Enum.HorizontalAlignment.Center,
+							VerticalAlignment = Enum.VerticalAlignment.Center,
+							SortOrder = Enum.SortOrder.LayoutOrder,
+							Padding = UDim.new(0, 5),
+						}),
+						Padding = e("UIPadding", {
+							PaddingLeft = UDim.new(0, 5),
+							PaddingRight = UDim.new(0, 5),
+						}),
+						Text = e("TextLabel", {
+							BackgroundTransparency = 1,
+							Text = self.changeInfoText,
+							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,
+							Size = UDim2.new(0, 0, 1, 0),
+							AutomaticSize = Enum.AutomaticSize.X,
+							LayoutOrder = 1,
+						}),
+						Icon = e("ImageLabel", {
+							BackgroundTransparency = 1,
+							Image = if syncWarning
+								then Assets.Images.Icons.SyncWarning
+								else Assets.Images.Icons.SyncSuccess,
+							ImageColor3 = if syncWarning then theme.Diff.Warning else theme.Header.VersionColor,
+							ImageTransparency = self.props.transparency,
+							Size = UDim2.new(0, 24, 0, 24),
+							LayoutOrder = 2,
+						}),
+					}),
+				}),
 			}),
 
 			ConnectionDetails = e(ConnectionDetails, {
@@ -119,40 +442,173 @@ function ConnectedPage:render()
 				onDisconnect = self.props.onDisconnect,
 			}),
 
-			Info = e("TextLabel", {
-				Text = self.props.patchInfo:map(function(info)
-					return string.format(
-						"<i>Synced %d change%s %s</i>",
-						info.changes,
-						info.changes == 1 and "" or "s",
-						timeSinceText(os.time() - info.timestamp)
-					)
-				end),
-				Font = Enum.Font.Gotham,
-				TextSize = 14,
-				TextWrapped = true,
-				RichText = true,
-				TextColor3 = theme.Header.VersionColor,
-				TextXAlignment = Enum.TextXAlignment.Left,
-				TextYAlignment = Enum.TextYAlignment.Top,
-				TextTransparency = self.props.transparency,
-
-				Size = UDim2.new(1, 0, 0, 28),
-
+			Buttons = e("Frame", {
+				Size = UDim2.new(1, 0, 0, 34),
 				LayoutOrder = 3,
 				BackgroundTransparency = 1,
+				ZIndex = 2,
+			}, {
+				Settings = e(TextButton, {
+					text = "Settings",
+					style = "Bordered",
+					transparency = self.props.transparency,
+					layoutOrder = 1,
+					onClick = self.props.onNavigateSettings,
+				}, {
+					Tip = e(Tooltip.Trigger, {
+						text = "View and modify plugin settings",
+					}),
+				}),
+
+				Disconnect = e(TextButton, {
+					text = "Disconnect",
+					style = "Solid",
+					transparency = self.props.transparency,
+					layoutOrder = 2,
+					onClick = self.props.onDisconnect,
+				}, {
+					Tip = e(Tooltip.Trigger, {
+						text = "Disconnect from the Rojo sync server",
+					}),
+				}),
+
+				Layout = e("UIListLayout", {
+					HorizontalAlignment = Enum.HorizontalAlignment.Right,
+					FillDirection = Enum.FillDirection.Horizontal,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					Padding = UDim.new(0, 10),
+				}),
 			}),
 
-			Layout = e("UIListLayout", {
-				VerticalAlignment = Enum.VerticalAlignment.Center,
-				FillDirection = Enum.FillDirection.Vertical,
-				SortOrder = Enum.SortOrder.LayoutOrder,
-				Padding = UDim.new(0, 10),
+			ChangesViewer = e(StudioPluginGui, {
+				id = "Rojo_ChangesViewer",
+				title = "View changes",
+				active = self.state.renderChanges,
+				isEphemeral = true,
+
+				initDockState = Enum.InitialDockState.Float,
+				overridePreviousState = true,
+				floatingSize = Vector2.new(400, 500),
+				minimumSize = Vector2.new(300, 300),
+
+				zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+
+				onClose = function()
+					self:setState({
+						renderChanges = false,
+					})
+				end,
+			}, {
+				TooltipsProvider = e(Tooltip.Provider, nil, {
+					Tooltips = e(Tooltip.Container, nil),
+					Content = e("Frame", {
+						Size = UDim2.fromScale(1, 1),
+						BackgroundTransparency = 1,
+					}, {
+						Changes = e(ChangesViewer, {
+							transparency = self.props.transparency,
+							rendered = self.state.renderChanges,
+							patchData = self.props.patchData,
+							patchTree = self.props.patchTree,
+							serveSession = self.props.serveSession,
+							showStringDiff = function(oldString: string, newString: string)
+								self:setState({
+									showingStringDiff = true,
+									oldString = oldString,
+									newString = newString,
+								})
+							end,
+							showTableDiff = function(oldTable: { [any]: any? }, newTable: { [any]: any? })
+								self:setState({
+									showingTableDiff = true,
+									oldTable = oldTable,
+									newTable = newTable,
+								})
+							end,
+							onBack = function()
+								self:setState({
+									renderChanges = false,
+								})
+							end,
+						}),
+					}),
+				}),
 			}),
 
-			Padding = e("UIPadding", {
-				PaddingLeft = UDim.new(0, 20),
-				PaddingRight = UDim.new(0, 20),
+			StringDiff = e(StudioPluginGui, {
+				id = "Rojo_ConnectedStringDiff",
+				title = "String diff",
+				active = self.state.showingStringDiff,
+				isEphemeral = true,
+
+				initDockState = Enum.InitialDockState.Float,
+				overridePreviousState = false,
+				floatingSize = Vector2.new(500, 350),
+				minimumSize = Vector2.new(400, 250),
+
+				zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+
+				onClose = function()
+					self:setState({
+						showingStringDiff = false,
+					})
+				end,
+			}, {
+				TooltipsProvider = e(Tooltip.Provider, nil, {
+					Tooltips = e(Tooltip.Container, nil),
+					Content = e("Frame", {
+						Size = UDim2.fromScale(1, 1),
+						BackgroundTransparency = 1,
+					}, {
+						e(StringDiffVisualizer, {
+							size = UDim2.new(1, -10, 1, -10),
+							position = UDim2.new(0, 5, 0, 5),
+							anchorPoint = Vector2.new(0, 0),
+							transparency = self.props.transparency,
+
+							oldString = self.state.oldString,
+							newString = self.state.newString,
+						}),
+					}),
+				}),
+			}),
+
+			TableDiff = e(StudioPluginGui, {
+				id = "Rojo_ConnectedTableDiff",
+				title = "Table diff",
+				active = self.state.showingTableDiff,
+				isEphemeral = true,
+
+				initDockState = Enum.InitialDockState.Float,
+				overridePreviousState = false,
+				floatingSize = Vector2.new(500, 350),
+				minimumSize = Vector2.new(400, 250),
+
+				zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+
+				onClose = function()
+					self:setState({
+						showingTableDiff = false,
+					})
+				end,
+			}, {
+				TooltipsProvider = e(Tooltip.Provider, nil, {
+					Tooltips = e(Tooltip.Container, nil),
+					Content = e("Frame", {
+						Size = UDim2.fromScale(1, 1),
+						BackgroundTransparency = 1,
+					}, {
+						e(TableDiffVisualizer, {
+							size = UDim2.new(1, -10, 1, -10),
+							position = UDim2.new(0, 5, 0, 5),
+							anchorPoint = Vector2.new(0, 0),
+							transparency = self.props.transparency,
+
+							oldTable = self.state.oldTable,
+							newTable = self.state.newTable,
+						}),
+					}),
+				}),
 			}),
 		})
 	end)

plugin/src/App/StatusPages/Error.lua

@@ -11,6 +11,7 @@ local Theme = require(Plugin.App.Theme)
 local TextButton = require(Plugin.App.Components.TextButton)
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+local Tooltip = require(Plugin.App.Components.Tooltip)
 
 local e = Roact.createElement
 
@@ -49,7 +50,9 @@ function Error:render()
 				local containerSize = object.AbsoluteSize - ERROR_PADDING * 2
 
 				local textBounds = TextService:GetTextSize(
-					self.props.errorMessage, 16, Enum.Font.Code,
+					self.props.errorMessage,
+					16,
+					Enum.Font.Code,
 					Vector2.new(containerSize.X, math.huge)
 				)
 
@@ -59,12 +62,13 @@ function Error:render()
 			ErrorMessage = Theme.with(function(theme)
 				return e("TextBox", {
 					[Roact.Event.InputBegan] = function(rbx, input)
-						if input.UserInputType ~= Enum.UserInputType.MouseButton1 then return end
+						if input.UserInputType ~= Enum.UserInputType.MouseButton1 then
+							return
+						end
 						rbx.SelectionStart = 0
-						rbx.CursorPosition = #rbx.Text+1
+						rbx.CursorPosition = #rbx.Text + 1
 					end,
 
-
 					Text = self.props.errorMessage,
 					TextEditable = false,
 					Font = Enum.Font.Code,
@@ -123,6 +127,10 @@ function ErrorPage:render()
 				transparency = self.props.transparency,
 				layoutOrder = 1,
 				onClick = self.props.onClose,
+			}, {
+				Tip = e(Tooltip.Trigger, {
+					text = "Dismiss message",
+				}),
 			}),
 
 			Layout = e("UIListLayout", {