New UI (#367)

* Add Flipper

* Remove old UI

* Add boilerplate UI

* Change plugin version

* Merge upstream

* Bunch of new UI changes

Too lazy to list them all in individual commits

* Touch ripple for buttons and a few other things

* Make the close button on the PluginGui work

* Set button state to guiEnabled

* Implement Connecting, NotConnected; add Header; don't update plugin button on render

* Replace mapLerpColor with mapLerp

* Update blendAlpha to be 0 without any values

* Add ActionFillTransparency to Theme.Button

* Suffix all Theme entries

* Update Flipper

* Add disconnect button

* Remove cancel button

* Add settings page

* Add scrollbar and dark theme support to settings

* Include settings in startSession

* Set context default value to nil

I always thought this was the name, lol...

* Add Error page

* Fix preloadAssets

* Fix preloadAssets import

* Update checkbox colors a little

* Add setting descriptions

* Fix scrolling frame in settings panel

* Remove .vscode

* Rename Throbber to Spinner

* Update merge

* Move Spinner images to assets

* Change casing of directories

* Remove old directories

* Add comments to getDerivedStateFromProps

* Account for offset in host TextBox size

* Turn width variables into constants

* Attempt to fix the comments

* Add a missing comma in Settings

* Remove a double space

* Remove Dummy object

* Move most of the Studio logic out of render

* Don't truncate port input

* Replace merge with Dictionary.merge

* Replace "Got it!" with "Okay"

* Add projectName to setStatus call

* Add Flipper to build.rs

plugin/src/App/Components/BorderedContainer.lua

@@ -0,0 +1,41 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Theme = require(Plugin.App.Theme)
+local Assets = require(Plugin.Assets)
+
+local SlicedImage = require(script.Parent.SlicedImage)
+
+local e = Roact.createElement
+
+local function BorderedContainer(props)
+	return Theme.with(function(theme)
+		return e(SlicedImage, {
+			slice = Assets.Slices.RoundedBackground,
+			color = theme.BorderedContainer.BackgroundColor,
+			transparency = props.transparency,
+
+			size = props.size,
+			position = props.position,
+			anchorPoint = props.anchorPoint,
+			layoutOrder = props.layoutOrder,
+		}, {
+			Content = e("Frame", {
+				Size = UDim2.new(1, 0, 1, 0),
+				BackgroundTransparency = 1,
+			}, props[Roact.Children]),
+
+			Border = e(SlicedImage, {
+				slice = Assets.Slices.RoundedBorder,
+				color = theme.BorderedContainer.BorderColor,
+				transparency = props.transparency,
+
+				size = UDim2.new(1, 0, 1, 0),
+			}),
+		})
+	end)
+end
+
+return BorderedContainer

plugin/src/App/Components/Checkbox.lua

@@ -0,0 +1,96 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+local Flipper = require(Rojo.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 e = Roact.createElement
+
+local Checkbox = Roact.Component:extend("Checkbox")
+
+function Checkbox:init()
+	self.motor = Flipper.SingleMotor.new(self.props.active and 1 or 0)
+	self.binding = bindingUtil.fromMotor(self.motor)
+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,
+			})
+		)
+	end
+end
+
+function Checkbox:render()
+	return Theme.with(function(theme)
+		theme = theme.Checkbox
+
+		local activeTransparency = Roact.joinBindings({
+			self.binding:map(function(value)
+				return 1 - value
+			end),
+			self.props.transparency,
+		}):map(bindingUtil.blendAlpha)
+
+		return e("ImageButton", {
+			Size = UDim2.new(0, 28, 0, 28),
+			Position = self.props.position,
+			AnchorPoint = self.props.anchorPoint,
+			LayoutOrder = self.props.layoutOrder,
+			ZIndex = self.props.zIndex,
+			BackgroundTransparency = 1,
+
+			[Roact.Event.Activated] = self.props.onClick,
+		}, {
+			Active = e(SlicedImage, {
+				slice = Assets.Slices.RoundedBackground,
+				color = theme.Active.BackgroundColor,
+				transparency = activeTransparency,
+				size = UDim2.new(1, 0, 1, 0),
+				zIndex = 2,
+			}, {
+				Icon = e("ImageLabel", {
+					Image = Assets.Images.Checkbox.Active,
+					ImageColor3 = theme.Active.IconColor,
+					ImageTransparency = activeTransparency,
+
+					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,
+				}),
+			}),
+
+			Inactive = e(SlicedImage, {
+				slice = Assets.Slices.RoundedBorder,
+				color = theme.Inactive.BorderColor,
+				transparency = self.props.transparency,
+				size = UDim2.new(1, 0, 1, 0),
+			}, {
+				Icon = e("ImageLabel", {
+					Image = Assets.Images.Checkbox.Inactive,
+					ImageColor3 = theme.Inactive.IconColor,
+					ImageTransparency = self.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,
+				}),
+			}),
+		})
+	end)
+end
+
+return Checkbox

plugin/src/App/Components/Header.lua

@@ -0,0 +1,55 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Theme = require(Plugin.App.Theme)
+local Assets = require(Plugin.Assets)
+local Config = require(Plugin.Config)
+local Version = require(Plugin.Version)
+
+local e = Roact.createElement
+
+local function Header(props)
+	return Theme.with(function(theme)
+		return e("Frame", {
+			Size = UDim2.new(1, 0, 0, 32),
+			LayoutOrder = props.layoutOrder,
+			BackgroundTransparency = 1,
+		}, {
+			Logo = e("ImageLabel", {
+				Image = Assets.Images.Logo,
+				ImageColor3 = theme.Header.LogoColor,
+				ImageTransparency = props.transparency,
+
+				Size = UDim2.new(0, 60, 0, 27),
+
+				LayoutOrder = 1,
+				BackgroundTransparency = 1,
+			}),
+
+			Version = e("TextLabel", {
+				Text = Version.display(Config.version),
+				Font = Enum.Font.Gotham,
+				TextSize = 14,
+				TextColor3 = theme.Header.VersionColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+
+				Size = UDim2.new(1, 0, 0, 14),
+
+				LayoutOrder = 2,
+				BackgroundTransparency = 1,
+			}),
+
+			Layout = e("UIListLayout", {
+				VerticalAlignment = Enum.VerticalAlignment.Center,
+				FillDirection = Enum.FillDirection.Horizontal,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				Padding = UDim.new(0, 15),
+			}),
+		})
+	end)
+end
+
+return Header

plugin/src/App/Components/IconButton.lua

@@ -0,0 +1,79 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+local Flipper = require(Rojo.Flipper)
+
+local Assets = require(Plugin.Assets)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local HOVER_SPRING_PROPS = {
+	frequency = 5,
+	dampingRatio = 1.1,
+}
+
+local e = Roact.createElement
+
+local IconButton = Roact.Component:extend("IconButton")
+
+function IconButton:init()
+	self.motor = Flipper.SingleMotor.new(0)
+	self.binding = bindingUtil.fromMotor(self.motor)
+end
+
+function IconButton:render()
+	local iconSize = self.props.iconSize
+
+	return e("ImageButton", {
+		Size = UDim2.new(0, iconSize * 1.5, 0, iconSize * 1.5),
+		Position = self.props.position,
+		AnchorPoint = self.props.anchorPoint,
+
+		LayoutOrder = self.props.layoutOrder,
+		ZIndex = self.props.zIndex,
+		BackgroundTransparency = 1,
+
+		[Roact.Event.Activated] = self.props.onClick,
+
+		[Roact.Event.MouseEnter] = function()
+			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)
+			)
+		end,
+	}, {
+		Icon = e("ImageLabel", {
+			Image = self.props.icon,
+			ImageColor3 = self.props.color,
+			ImageTransparency = self.props.transparency,
+
+			Size = UDim2.new(0, iconSize, 0, iconSize),
+			Position = UDim2.new(0.5, 0, 0.5, 0),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+
+			BackgroundTransparency = 1,
+		}),
+
+		HoverCircle = e("ImageLabel", {
+			Image = Assets.Images.Circles[128],
+			ImageColor3 = self.props.color,
+			ImageTransparency = Roact.joinBindings({
+				hover = self.binding,
+				transparency = self.props.transparency,
+			}):map(function(values)
+				return bindingUtil.blendAlpha({ 0.85, 1 - values.hover, values.transparency })
+			end),
+
+			Size = UDim2.new(1, 0, 1, 0),
+
+			BackgroundTransparency = 1,
+		}),
+	})
+end
+
+return IconButton

plugin/src/App/Components/ScrollingFrame.lua

@@ -0,0 +1,42 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local e = Roact.createElement
+
+local function ScrollingFrame(props)
+	return Theme.with(function(theme)
+		return e("ScrollingFrame", {
+			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,
+
+			Size = props.size,
+			Position = props.position,
+			AnchorPoint = props.anchorPoint,
+			CanvasSize = props.contentSize:map(function(value)
+				return UDim2.new(0, 0, 0, value.Y)
+			end),
+
+			BorderSizePixel = 0,
+			BackgroundTransparency = 1,
+
+			[Roact.Change.AbsoluteSize] = props[Roact.Change.AbsoluteSize]
+		}, props[Roact.Children])
+	end)
+end
+
+return ScrollingFrame

plugin/src/App/Components/SlicedImage.lua

@@ -0,0 +1,29 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+
+local Roact = require(Rojo.Roact)
+
+local e = Roact.createElement
+
+local function SlicedImage(props)
+	local slice = props.slice
+
+	return e("ImageLabel", {
+		Image = slice.Image,
+		ImageColor3 = props.color,
+		ImageTransparency = props.transparency,
+
+		ScaleType = Enum.ScaleType.Slice,
+		SliceCenter = slice.Center,
+		SliceScale = slice.Scale,
+
+		Size = props.size,
+		Position = props.position,
+		AnchorPoint = props.anchorPoint,
+
+		ZIndex = props.zIndex,
+		LayoutOrder = props.layoutOrder,
+		BackgroundTransparency = 1,
+	}, props[Roact.Children])
+end
+
+return SlicedImage

plugin/src/App/Components/Spinner.lua

@@ -0,0 +1,66 @@
+local RunService = game:GetService("RunService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Theme = require(Plugin.App.Theme)
+local Assets = require(Plugin.Assets)
+
+local ROTATIONS_PER_SECOND = 1.75
+
+local e = Roact.createElement
+
+local Spinner = Roact.PureComponent:extend("Spinner")
+
+function Spinner:init()
+	self.rotation, self.setRotation = Roact.createBinding(0)
+end
+
+function Spinner:render()
+	return Theme.with(function(theme)
+		return e("ImageLabel", {
+			Image = Assets.Images.Spinner.Background,
+			ImageColor3 = theme.Spinner.BackgroundColor,
+			ImageTransparency = self.props.transparency,
+
+			Size = UDim2.new(0, 24, 0, 24),
+			Position = self.props.position,
+			AnchorPoint = self.props.anchorPoint,
+
+			LayoutOrder = self.props.layoutOrder,
+			BackgroundTransparency = 1,
+		}, {
+			Foreground = e("ImageLabel", {
+				Image = Assets.Images.Spinner.Foreground,
+				ImageColor3 = theme.Spinner.ForegroundColor,
+				ImageTransparency = self.props.transparency,
+
+				Size = UDim2.new(1, 0, 1, 0),
+				Rotation = self.rotation:map(function(value)
+					return value * 360
+				end),
+
+				BackgroundTransparency = 1,
+			}),
+		})
+	end)
+end
+
+function Spinner:didMount()
+	self.stepper = RunService.RenderStepped:Connect(function(deltaTime)
+		local rotation = self.rotation:getValue()
+
+		rotation = rotation + deltaTime * ROTATIONS_PER_SECOND
+		rotation = rotation % 1
+
+		self.setRotation(rotation)
+	end)
+end
+
+function Spinner:willUnmount()
+	self.stepper:Disconnect()
+end
+
+return Spinner

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

@@ -0,0 +1,7 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+
+local Roact = require(Rojo.Roact)
+
+local StudioPluginContext = Roact.createContext(nil)
+
+return StudioPluginContext

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

@@ -0,0 +1,84 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Dictionary = require(Plugin.Dictionary)
+
+local StudioPluginContext = require(script.Parent.StudioPluginContext)
+
+local e = Roact.createElement
+
+local StudioPluginGui = Roact.PureComponent:extend("StudioPluginGui")
+
+StudioPluginGui.defaultProps = {
+	initDockState = Enum.InitialDockState.Right,
+	active = false,
+	overridePreviousState = false,
+	floatingSize = Vector2.new(0, 0),
+	minimumSize = Vector2.new(0, 0),
+	zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+}
+
+function StudioPluginGui:init()
+	local floatingSize = self.props.floatingSize
+	local minimumSize = self.props.minimumSize
+
+	local dockWidgetPluginGuiInfo = DockWidgetPluginGuiInfo.new(
+		self.props.initDockState,
+		self.props.active,
+		self.props.overridePreviousState,
+		floatingSize.X, floatingSize.Y,
+		minimumSize.X, minimumSize.Y
+	)
+
+	local pluginGui = self.props.plugin:CreateDockWidgetPluginGui(self.props.id, dockWidgetPluginGuiInfo)
+
+	pluginGui.Name = self.props.id
+	pluginGui.Title = self.props.title
+	pluginGui.ZIndexBehavior = self.props.zIndexBehavior
+
+	if self.props.onInitialState then
+		self.props.onInitialState(pluginGui.Enabled)
+	end
+
+	pluginGui:BindToClose(function()
+		if self.props.onClose then
+			self.props.onClose()
+		else
+			pluginGui.Enabled = false
+		end
+	end)
+
+	self.pluginGui = pluginGui
+end
+
+function StudioPluginGui:render()
+	return e(Roact.Portal, {
+		target = self.pluginGui,
+	}, self.props[Roact.Children])
+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.
+		self.pluginGui.Enabled = self.props.active
+	end
+end
+
+function StudioPluginGui:willUnmount()
+	self.pluginGui:Destroy()
+end
+
+local function StudioPluginGuiWrapper(props)
+	return e(StudioPluginContext.Consumer, {
+		render = function(plugin)
+			return e(StudioPluginGui, Dictionary.merge(props, {
+				plugin = plugin,
+			}))
+		end,
+	})
+end
+
+return StudioPluginGuiWrapper

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

@@ -0,0 +1,66 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Dictionary = require(Plugin.Dictionary)
+
+local StudioToolbarContext = require(script.Parent.StudioToolbarContext)
+
+local e = Roact.createElement
+
+local StudioToggleButton = Roact.Component:extend("StudioToggleButton")
+
+StudioToggleButton.defaultProps = {
+	enabled = true,
+	active = false,
+}
+
+function StudioToggleButton:init()
+	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
+			self.props.onClick()
+		end
+	end)
+
+	button.ClickableWhenViewportHidden = true
+
+	self.button = button
+end
+
+function StudioToggleButton:render()
+	return nil
+end
+
+function StudioToggleButton:didUpdate(lastProps)
+	if self.props.enabled ~= lastProps.enabled then
+		self.button.Enabled = self.props.enabled
+	end
+
+	if self.props.active ~= lastProps.active then
+		self.button:SetActive(self.props.active)
+	end
+end
+
+function StudioToggleButton:willUnmount()
+	self.button:Destroy()
+end
+
+local function StudioToggleButtonWrapper(props)
+	return e(StudioToolbarContext.Consumer, {
+		render = function(toolbar)
+			return e(StudioToggleButton, Dictionary.merge(props, {
+				toolbar = toolbar,
+			}))
+		end,
+	})
+end
+
+return StudioToggleButtonWrapper

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

@@ -0,0 +1,45 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Dictionary = require(Plugin.Dictionary)
+
+local StudioToolbarContext = require(script.Parent.StudioToolbarContext)
+local StudioPluginContext = require(script.Parent.StudioPluginContext)
+
+local e = Roact.createElement
+
+local StudioToolbar = Roact.Component:extend("StudioToolbar")
+
+function StudioToolbar:init()
+	self.toolbar = self.props.plugin:CreateToolbar(self.props.name)
+end
+
+function StudioToolbar:render()
+	return e(StudioToolbarContext.Provider, {
+		value = self.toolbar,
+	}, self.props[Roact.Children])
+end
+
+function StudioToolbar:didUpdate(lastProps)
+	if self.props.name ~= lastProps.name then
+		self.toolbar.Name = self.props.name
+	end
+end
+
+function StudioToolbar:willUnmount()
+	self.toolbar:Destroy()
+end
+
+local function StudioToolbarWrapper(props)
+	return e(StudioPluginContext.Consumer, {
+		render = function(plugin)
+			return e(StudioToolbar, Dictionary.merge(props, {
+				plugin = plugin,
+			}))
+		end,
+	})
+end
+
+return StudioToolbarWrapper

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

@@ -0,0 +1,7 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+
+local Roact = require(Rojo.Roact)
+
+local StudioToolbarContext = Roact.createContext(nil)
+
+return StudioToolbarContext

plugin/src/App/Components/TextButton.lua

@@ -0,0 +1,137 @@
+local TextService = game:GetService("TextService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+local Flipper = require(Rojo.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 TouchRipple = require(script.Parent.TouchRipple)
+
+local SPRING_PROPS = {
+	frequency = 5,
+	dampingRatio = 1,
+}
+
+local e = Roact.createElement
+
+local TextButton = Roact.Component:extend("TextButton")
+
+function TextButton:init()
+	self.motor = Flipper.GroupMotor.new({
+		hover = 0,
+		enabled = self.props.enabled and 1 or 0,
+	})
+	self.binding = bindingUtil.fromMotor(self.motor)
+end
+
+function TextButton: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 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 style = self.props.style
+
+		theme = theme.Button[style]
+
+		local bindingHover = bindingUtil.deriveProperty(self.binding, "hover")
+		local bindingEnabled = bindingUtil.deriveProperty(self.binding, "enabled")
+
+		return e("ImageButton", {
+			Size = UDim2.new(0, 15 + textSize.X + 15, 0, 34),
+			Position = self.props.position,
+			AnchorPoint = self.props.anchorPoint,
+
+			LayoutOrder = self.props.layoutOrder,
+			BackgroundTransparency = 1,
+
+			[Roact.Event.Activated] = self.props.onClick,
+
+			[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,
+		}, {
+			TouchRipple = e(TouchRipple, {
+				color = theme.ActionFillColor,
+				transparency = self.props.transparency:map(function(value)
+					return bindingUtil.blendAlpha({ theme.ActionFillTransparency, value })
+				end),
+				zIndex = 2,
+			}),
+
+			Text = e("TextLabel", {
+				Text = self.props.text,
+				Font = Enum.Font.GothamSemibold,
+				TextSize = 18,
+				TextColor3 = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.TextColor, theme.Disabled.TextColor),
+				TextTransparency = self.props.transparency,
+
+				Size = UDim2.new(1, 0, 1, 0),
+
+				BackgroundTransparency = 1,
+			}),
+
+			Border = style == "Bordered" and e(SlicedImage, {
+				slice = Assets.Slices.RoundedBorder,
+				color = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.BorderColor, theme.Disabled.BorderColor),
+				transparency = self.props.transparency,
+
+				size = UDim2.new(1, 0, 1, 0),
+
+				zIndex = 0,
+			}),
+
+			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,
+			}),
+
+			Background = style == "Solid" and e(SlicedImage, {
+				slice = Assets.Slices.RoundedBackground,
+				color = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.BackgroundColor, theme.Disabled.BackgroundColor),
+				transparency = self.props.transparency,
+
+				size = UDim2.new(1, 0, 1, 0),
+
+				zIndex = -2,
+			}),
+		})
+	end)
+end
+
+return TextButton

plugin/src/App/Components/TouchRipple.lua

@@ -0,0 +1,145 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+local Flipper = require(Rojo.Flipper)
+
+local Assets = require(Plugin.Assets)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local EXPAND_SPRING = {
+	frequency = 7,
+	dampingRatio = 2,
+}
+
+local TouchRipple = Roact.Component:extend("TouchRipple")
+
+function TouchRipple:init()
+	self.ref = Roact.createRef()
+
+	self.motor = Flipper.GroupMotor.new({
+		scale = 0,
+		opacity = 0,
+	})
+	self.binding = bindingUtil.fromMotor(self.motor)
+
+	self.position, self.setPosition = Roact.createBinding(
+		Vector2.new(0, 0)
+	)
+end
+
+function TouchRipple:reset()
+	self.motor:setGoal({
+		scale = Flipper.Instant.new(0),
+		opacity = Flipper.Instant.new(0),
+	})
+
+	-- Forces motor to update
+	self.motor:step(0)
+end
+
+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 size = container.AbsoluteSize
+		local ratio = size / math.min(size.X, size.Y)
+
+		return ((corner * ratio) - (position * ratio)).Magnitude
+	else
+		return 0
+	end
+end
+
+function TouchRipple:render()
+	local scale = bindingUtil.deriveProperty(self.binding, "scale")
+	local transparency = bindingUtil.deriveProperty(self.binding, "opacity"):map(function(value)
+		return 1 - value
+	end)
+
+	transparency = Roact.joinBindings({
+		transparency,
+		self.props.transparency,
+	}):map(bindingUtil.blendAlpha)
+
+	return Roact.createElement("Frame", {
+		ClipsDescendants = true,
+		Size = UDim2.new(1, 0, 1, 0),
+		ZIndex = self.props.zIndex,
+		BackgroundTransparency = 1,
+
+		[Roact.Ref] = self.ref,
+
+		[Roact.Event.InputBegan] = function(object, input)
+			if input.UserInputType == Enum.UserInputType.MouseButton1 then
+				self:reset()
+
+				local position = Vector2.new(input.Position.X, input.Position.Y)
+				local relativePosition = (position - object.AbsolutePosition) / object.AbsoluteSize
+
+				self.setPosition(relativePosition)
+
+				self.motor:setGoal({
+					scale = Flipper.Spring.new(1, EXPAND_SPRING),
+					opacity = Flipper.Spring.new(1, EXPAND_SPRING),
+				})
+
+				input:GetPropertyChangedSignal("UserInputState"):Connect(function()
+					local userInputState = input.UserInputState
+
+					if
+						userInputState == Enum.UserInputState.Cancel
+						or userInputState == Enum.UserInputState.End
+					then
+						self.motor:setGoal({
+							opacity = Flipper.Spring.new(0, {
+								frequency = 5,
+								dampingRatio = 1,
+							}),
+						})
+					end
+				end)
+			end
+		end,
+	}, {
+		Circle = Roact.createElement("ImageLabel", {
+			Image = Assets.Images.Circles[500],
+			ImageColor3 = self.props.color,
+			ImageTransparency = transparency,
+
+			Size = Roact.joinBindings({
+				scale = scale,
+				position = self.position,
+			}):map(function(values)
+				local targetSize = self:calculateRadius(values.position) * 2
+				local currentSize = targetSize * values.scale
+
+				local container = self.ref.current
+
+				if container then
+					local containerSize = container.AbsoluteSize
+					local containerAspect = containerSize.X / containerSize.Y
+
+					return UDim2.new(
+						currentSize / math.max(containerAspect, 1), 0,
+						currentSize * math.min(containerAspect, 1), 0
+					)
+				end
+			end),
+
+			Position = self.position:map(function(value)
+				return UDim2.new(value.X, 0, value.Y, 0)
+			end),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+
+			BackgroundTransparency = 1,
+		}),
+	})
+end
+
+return TouchRipple

plugin/src/App/Page.lua

@@ -0,0 +1,70 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+local Flipper = require(Rojo.Flipper)
+
+local Dictionary = require(Plugin.Dictionary)
+
+local bindingUtil = require(script.Parent.bindingUtil)
+
+local e = Roact.createElement
+
+local Page = Roact.Component:extend("Page")
+
+function Page:init()
+	self:setState({
+		rendered = self.props.active
+	})
+
+	self.motor = Flipper.SingleMotor.new(self.props.active and 1 or 0)
+	self.binding = bindingUtil.fromMotor(self.motor)
+
+	self.motor:onStep(function(value)
+		local rendered = value > 0
+
+		self:setState(function(state)
+			if state.rendered ~= rendered then
+				return {
+					rendered = rendered,
+				}
+			end
+		end)
+	end)
+end
+
+function Page:render()
+	if not self.state.rendered then
+		return nil
+	end
+
+	local transparency = self.binding:map(function(value)
+		return 1 - value
+	end)
+
+	return e("Frame", {
+		Position = transparency:map(function(value)
+			value = self.props.active and value or -value
+			return UDim2.new(0, value * 30, 0, 0)
+		end),
+		Size = UDim2.new(1, 0, 1, 0),
+		BackgroundTransparency = 1,
+	}, {
+		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,
+			})
+		)
+	end
+end
+
+return Page

plugin/src/App/PluginSettings.lua

@@ -0,0 +1,121 @@
+--[[
+	Persistent plugin settings that can be accessed via Roact context.
+]]
+
+local Rojo = script:FindFirstAncestor("Rojo")
+
+local Roact = require(Rojo.Roact)
+
+local defaultSettings = {
+	openScriptsExternally = false,
+	twoWaySync = false,
+}
+
+local Settings = {}
+Settings.__index = Settings
+
+function Settings.fromPlugin(plugin)
+	local values = {}
+
+	for name, defaultValue in pairs(defaultSettings) do
+		local savedValue = plugin:GetSetting("Rojo_" .. name)
+
+		if savedValue == nil then
+			plugin:SetSetting("Rojo_" .. name, defaultValue)
+			values[name] = defaultValue
+		else
+			values[name] = savedValue
+		end
+	end
+
+	return setmetatable({
+		__values = values,
+		__plugin = plugin,
+		__updateListeners = {},
+	}, Settings)
+end
+
+function Settings:get(name)
+	if defaultSettings[name] == nil then
+		error("Invalid setings name " .. tostring(name), 2)
+	end
+
+	return self.__values[name]
+end
+
+function Settings:set(name, value)
+	self.__plugin:SetSetting("Rojo_" .. name, value)
+	self.__values[name] = value
+
+	for callback in pairs(self.__updateListeners) do
+		callback(name, value)
+	end
+end
+
+function Settings:onUpdate(newCallback)
+	local newListeners = {}
+	for callback in pairs(self.__updateListeners) do
+		newListeners[callback] = true
+	end
+
+	newListeners[newCallback] = true
+	self.__updateListeners = newListeners
+
+	return function()
+		local newListeners = {}
+		for callback in pairs(self.__updateListeners) do
+			if callback ~= newCallback then
+				newListeners[callback] = true
+			end
+		end
+
+		self.__updateListeners = newListeners
+	end
+end
+
+local Context = Roact.createContext(nil)
+
+local StudioProvider = Roact.Component:extend("StudioProvider")
+
+function StudioProvider:init()
+	self.settings = Settings.fromPlugin(self.props.plugin)
+end
+
+function StudioProvider:render()
+	return Roact.createElement(Context.Provider, {
+		value = self.settings,
+	}, self.props[Roact.Children])
+end
+
+local InternalConsumer = Roact.Component:extend("InternalConsumer")
+
+function InternalConsumer:render()
+	return self.props.render(self.props.settings)
+end
+
+function InternalConsumer:didMount()
+	self.disconnect = self.props.settings:onUpdate(function()
+		-- Trigger a dummy state update to update the settings consumer.
+		self:setState({})
+	end)
+end
+
+function InternalConsumer:willUnmount()
+	self.disconnect()
+end
+
+local function with(callback)
+	return Roact.createElement(Context.Consumer, {
+		render = function(settings)
+			return Roact.createElement(InternalConsumer, {
+				settings = settings,
+				render = callback,
+			})
+		end,
+	})
+end
+
+return {
+	StudioProvider = StudioProvider,
+	with = with,
+}

plugin/src/App/StatusPages/Connected.lua

@@ -0,0 +1,125 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Theme = require(Plugin.App.Theme)
+local Assets = require(Plugin.Assets)
+
+local Header = require(Plugin.App.Components.Header)
+local IconButton = require(Plugin.App.Components.IconButton)
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+
+local e = Roact.createElement
+
+local function ConnectionDetails(props)
+	return Theme.with(function(theme)
+		return e(BorderedContainer, {
+			transparency = props.transparency,
+			size = UDim2.new(1, 0, 0, 70),
+			layoutOrder = props.layoutOrder,
+		}, {
+			TextContainer = e("Frame", {
+				Size = UDim2.new(1, 0, 1, 0),
+				BackgroundTransparency = 1
+			}, {
+				ProjectName = e("TextLabel", {
+					Text = props.projectName,
+					Font = Enum.Font.GothamBold,
+					TextSize = 20,
+					TextColor3 = theme.ConnectionDetails.ProjectNameColor,
+					TextTransparency = props.transparency,
+					TextXAlignment = Enum.TextXAlignment.Left,
+
+					Size = UDim2.new(1, 0, 0, 20),
+
+					LayoutOrder = 1,
+					BackgroundTransparency = 1,
+				}),
+
+				Address = e("TextLabel", {
+					Text = props.address,
+					Font = Enum.Font.Code,
+					TextSize = 15,
+					TextColor3 = theme.ConnectionDetails.AddressColor,
+					TextTransparency = props.transparency,
+					TextXAlignment = Enum.TextXAlignment.Left,
+
+					Size = UDim2.new(1, 0, 0, 15),
+
+					LayoutOrder = 2,
+					BackgroundTransparency = 1,
+				}),
+
+				Layout = e("UIListLayout", {
+					VerticalAlignment = Enum.VerticalAlignment.Center,
+					FillDirection = Enum.FillDirection.Vertical,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					Padding = UDim.new(0, 6),
+				}),
+			}),
+
+			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),
+			}),
+		})
+	end)
+end
+
+local ConnectedPage = Roact.Component:extend("ConnectedPage")
+
+function ConnectedPage:render()
+	return Roact.createFragment({
+		Header = e(Header, {
+			transparency = self.props.transparency,
+			layoutOrder = 1,
+		}),
+
+		ConnectionDetails = e(ConnectionDetails, {
+			projectName = self.state.projectName,
+			address = self.state.address,
+			transparency = self.props.transparency,
+			layoutOrder = 2,
+
+			onDisconnect = self.props.onDisconnect,
+		}),
+
+		Layout = e("UIListLayout", {
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			FillDirection = Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, 10),
+		}),
+
+		Padding = e("UIPadding", {
+			PaddingLeft = UDim.new(0, 20),
+			PaddingRight = UDim.new(0, 20),
+		}),
+	})
+end
+
+function ConnectedPage.getDerivedStateFromProps(props)
+	-- If projectName or address ever get removed from props, make sure we still have
+	-- the properties! The component still needs to have its data for it to be properly
+	-- animated out without the labels changing.
+
+	return {
+		projectName = props.projectName,
+		address = props.address,
+	}
+end
+
+return ConnectedPage

plugin/src/App/StatusPages/Connecting.lua

@@ -0,0 +1,20 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Spinner = require(Plugin.App.Components.Spinner)
+
+local e = Roact.createElement
+
+local ConnectingPage = Roact.Component:extend("ConnectingPage")
+
+function ConnectingPage:render()
+	return e(Spinner, {
+		position = UDim2.new(0.5, 0, 0.5, 0),
+		anchorPoint = Vector2.new(0.5, 0.5),
+		transparency = self.props.transparency,
+	})
+end
+
+return ConnectingPage

plugin/src/App/StatusPages/Error.lua

@@ -0,0 +1,153 @@
+local TextService = game:GetService("TextService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+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 e = Roact.createElement
+
+local ERROR_PADDING = Vector2.new(13, 10)
+
+local Error = Roact.Component:extend("Error")
+
+function Error:init()
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
+end
+
+function Error:render()
+	return e(BorderedContainer, {
+		size = Roact.joinBindings({
+			containerSize = self.props.containerSize,
+			contentSize = self.contentSize,
+		}):map(function(values)
+			local maximumSize = values.containerSize
+			maximumSize -= Vector2.new(14, 14) * 2 -- Page padding
+			maximumSize -= Vector2.new(0, 34 + 10) -- Buttons and spacing
+
+			local outerSize = values.contentSize + ERROR_PADDING * 2
+
+			return UDim2.new(1, 0, 0, math.min(outerSize.Y, maximumSize.Y))
+		end),
+		transparency = self.props.transparency,
+	}, {
+		ScrollingFrame = e(ScrollingFrame, {
+			size = UDim2.new(1, 0, 1, 0),
+			contentSize = self.contentSize:map(function(value)
+				return value + ERROR_PADDING * 2
+			end),
+			transparency = self.props.transparency,
+
+			[Roact.Change.AbsoluteSize] = function(object)
+				local containerSize = object.AbsoluteSize - ERROR_PADDING * 2
+
+				local textBounds = TextService:GetTextSize(
+					self.props.errorMessage, 16, Enum.Font.Code,
+					Vector2.new(containerSize.X, math.huge)
+				)
+
+				self.setContentSize(Vector2.new(containerSize.X, textBounds.Y))
+			end,
+		}, {
+			ErrorMessage = Theme.with(function(theme)
+				return e("TextLabel", {
+					Text = self.props.errorMessage,
+					Font = Enum.Font.Code,
+					TextSize = 16,
+					TextColor3 = theme.ErrorColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextYAlignment = Enum.TextYAlignment.Top,
+					TextTransparency = self.props.transparency,
+					TextWrapped = true,
+
+					Size = UDim2.new(1, 0, 1, 0),
+
+					BackgroundTransparency = 1,
+				})
+			end),
+
+			Padding = e("UIPadding", {
+				PaddingLeft = UDim.new(0, ERROR_PADDING.X),
+				PaddingRight = UDim.new(0, ERROR_PADDING.X),
+				PaddingTop = UDim.new(0, ERROR_PADDING.Y),
+				PaddingBottom = UDim.new(0, ERROR_PADDING.Y),
+			}),
+		}),
+	})
+end
+
+local ErrorPage = Roact.Component:extend("ErrorPage")
+
+function ErrorPage:init()
+	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
+end
+
+function ErrorPage:render()
+	return Roact.createElement("Frame", {
+		Size = UDim2.new(1, 0, 1, 0),
+		BackgroundTransparency = 1,
+
+		[Roact.Change.AbsoluteSize] = function(object)
+			self.setContainerSize(object.AbsoluteSize)
+		end,
+	}, {
+		Error = e(Error, {
+			errorMessage = self.state.errorMessage,
+			containerSize = self.containerSize,
+			transparency = self.props.transparency,
+			layoutOrder = 1,
+		}),
+
+		Buttons = e("Frame", {
+			Size = UDim2.new(1, 0, 0, 35),
+			LayoutOrder = 2,
+			BackgroundTransparency = 1,
+		}, {
+			Close = e(TextButton, {
+				text = "Okay",
+				style = "Bordered",
+				transparency = self.props.transparency,
+				layoutOrder = 1,
+				onClick = self.props.onClose,
+			}),
+
+			Layout = e("UIListLayout", {
+				HorizontalAlignment = Enum.HorizontalAlignment.Right,
+				FillDirection = Enum.FillDirection.Horizontal,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+			}),
+		}),
+
+		Layout = e("UIListLayout", {
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			FillDirection = Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, 10),
+		}),
+
+		Padding = e("UIPadding", {
+			PaddingLeft = UDim.new(0, 14),
+			PaddingRight = UDim.new(0, 14),
+			PaddingTop = UDim.new(0, 14),
+			PaddingBottom = UDim.new(0, 14),
+		}),
+	})
+end
+
+function ErrorPage.getDerivedStateFromProps(props)
+	-- If errorMessage ever gets removed from props, make sure we still have the
+	-- property! The component still needs to have its data for it to be properly
+	-- animated out without the labels changing.
+
+	return {
+		errorMessage = props.errorMessage,
+	}
+end
+
+return ErrorPage

plugin/src/App/StatusPages/NotConnected.lua

@@ -0,0 +1,154 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Config = require(Plugin.Config)
+
+local Theme = require(Plugin.App.Theme)
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+local TextButton = require(Plugin.App.Components.TextButton)
+local Header = require(Plugin.App.Components.Header)
+
+local PORT_WIDTH = 74
+local DIVIDER_WIDTH = 1
+local HOST_OFFSET = 12
+
+local e = Roact.createElement
+
+local function AddressEntry(props)
+	return Theme.with(function(theme)
+		return e(BorderedContainer, {
+			transparency = props.transparency,
+			size = UDim2.new(1, 0, 0, 36),
+			layoutOrder = props.layoutOrder,
+		}, {
+			Host = e("TextBox", {
+				Text = "",
+				Font = Enum.Font.Code,
+				TextSize = 18,
+				TextColor3 = theme.AddressEntry.TextColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+				PlaceholderText = Config.defaultHost,
+				PlaceholderColor3 = theme.AddressEntry.PlaceholderColor,
+
+				Size = UDim2.new(1, -(HOST_OFFSET + DIVIDER_WIDTH + PORT_WIDTH), 1, 0),
+				Position = UDim2.new(0, HOST_OFFSET, 0, 0),
+
+				ClipsDescendants = true,
+				BackgroundTransparency = 1,
+
+				[Roact.Ref] = props.hostRef,
+			}),
+
+			Port = e("TextBox", {
+				Text = "",
+				Font = Enum.Font.Code,
+				TextSize = 18,
+				TextColor3 = theme.AddressEntry.TextColor,
+				TextTransparency = props.transparency,
+				PlaceholderText = Config.defaultPort,
+				PlaceholderColor3 = theme.AddressEntry.PlaceholderColor,
+
+				Size = UDim2.new(0, PORT_WIDTH, 1, 0),
+				Position = UDim2.new(1, 0, 0, 0),
+				AnchorPoint = Vector2.new(1, 0),
+
+				ClipsDescendants = true,
+				BackgroundTransparency = 1,
+
+				[Roact.Ref] = props.portRef,
+
+				[Roact.Change.Text] = function(object)
+					local text = object.Text
+					text = text:gsub("%D", "")
+					object.Text = text
+				end,
+			}, {
+				Divider = e("Frame", {
+					BackgroundColor3 = theme.BorderedContainer.BorderColor,
+					BackgroundTransparency = props.transparency,
+					Size = UDim2.new(0, DIVIDER_WIDTH, 1, 0),
+					AnchorPoint = Vector2.new(1, 0),
+					BorderSizePixel = 0,
+				}),
+			}),
+		})
+	end)
+end
+
+local NotConnectedPage = Roact.Component:extend("NotConnectedPage")
+
+function NotConnectedPage:init()
+	self.hostRef = Roact.createRef()
+	self.portRef = Roact.createRef()
+end
+
+function NotConnectedPage:render()
+	return Roact.createFragment({
+		Header = e(Header, {
+			transparency = self.props.transparency,
+			layoutOrder = 1,
+		}),
+
+		AddressEntry = e(AddressEntry, {
+			hostRef = self.hostRef,
+			portRef = self.portRef,
+			transparency = self.props.transparency,
+			layoutOrder = 2,
+		}),
+
+		Buttons = e("Frame", {
+			Size = UDim2.new(1, 0, 0, 34),
+			LayoutOrder = 3,
+			BackgroundTransparency = 1,
+		}, {
+			Settings = e(TextButton, {
+				text = "Settings",
+				style = "Bordered",
+				transparency = self.props.transparency,
+				layoutOrder = 1,
+				onClick = self.props.onNavigateSettings,
+			}),
+
+			Connect = e(TextButton, {
+				text = "Connect",
+				style = "Solid",
+				transparency = self.props.transparency,
+				layoutOrder = 2,
+				onClick = function()
+					local hostText = self.hostRef.current.Text
+					local portText = self.portRef.current.Text
+
+					self.props.onConnect(
+						#hostText > 0 and hostText or Config.defaultHost,
+						#portText > 0 and portText or Config.defaultPort
+					)
+				end,
+			}),
+
+			Layout = e("UIListLayout", {
+				HorizontalAlignment = Enum.HorizontalAlignment.Right,
+				FillDirection = Enum.FillDirection.Horizontal,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				Padding = UDim.new(0, 10),
+			}),
+		}),
+
+		Layout = e("UIListLayout", {
+			HorizontalAlignment = Enum.HorizontalAlignment.Center,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			FillDirection = Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, 10),
+		}),
+
+		Padding = e("UIPadding", {
+			PaddingLeft = UDim.new(0, 20),
+			PaddingRight = UDim.new(0, 20),
+		}),
+	})
+end
+
+return NotConnectedPage

plugin/src/App/StatusPages/Settings.lua

@@ -0,0 +1,230 @@
+local TextService = game:GetService("TextService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+local PluginSettings = require(Plugin.App.PluginSettings)
+
+local Checkbox = require(Plugin.App.Components.Checkbox)
+local IconButton = require(Plugin.App.Components.IconButton)
+local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+
+local e = Roact.createElement
+
+local DIVIDER_FADE_SIZE = 0.1
+
+local function getTextBounds(text, textSize, font, lineHeight, bounds)
+	local textBounds = TextService:GetTextSize(text, textSize, font, bounds)
+
+	local lineCount = textBounds.Y / textSize
+	local lineHeightAbsolute = textSize * lineHeight
+
+	return Vector2.new(textBounds.X, lineHeightAbsolute * lineCount - (lineHeightAbsolute - textSize))
+end
+
+local function Navbar(props)
+	return Theme.with(function(theme)
+		theme = theme.Settings.Navbar
+
+		return e("Frame", {
+			Size = UDim2.new(1, 0, 0, 46),
+			LayoutOrder = props.layoutOrder,
+			BackgroundTransparency = 1,
+		}, {
+			Back = e(IconButton, {
+				icon = Assets.Images.Icons.Back,
+				iconSize = 24,
+				color = theme.BackButtonColor,
+				transparency = props.transparency,
+
+				position = UDim2.new(0, 0, 0.5, 0),
+				anchorPoint = Vector2.new(0, 0.5),
+
+				onClick = props.onBack,
+			}),
+
+			Text = e("TextLabel", {
+				Text = "Settings",
+				Font = Enum.Font.Gotham,
+				TextSize = 18,
+				TextColor3 = theme.TextColor,
+				TextTransparency = props.transparency,
+
+				Size = UDim2.new(1, 0, 1, 0),
+
+				BackgroundTransparency = 1,
+			})
+		})
+	end)
+end
+
+local Setting = Roact.Component:extend("Setting")
+
+function Setting:init()
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
+	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
+end
+
+function Setting:render()
+	return Theme.with(function(theme)
+		theme = theme.Settings
+
+		return PluginSettings.with(function(settings)
+			return e("Frame", {
+				Size = self.contentSize:map(function(value)
+					return UDim2.new(1, 0, 0, 20 + value.Y + 20)
+				end),
+				LayoutOrder = self.props.layoutOrder,
+				BackgroundTransparency = 1,
+
+				[Roact.Change.AbsoluteSize] = function(object)
+					self.setContainerSize(object.AbsoluteSize)
+				end,
+			}, {
+				Checkbox = e(Checkbox, {
+					active = settings:get(self.props.id),
+					transparency = self.props.transparency,
+					position = UDim2.new(1, 0, 0.5, 0),
+					anchorPoint = Vector2.new(1, 0.5),
+					onClick = function()
+						local currentValue = settings:get(self.props.id)
+						settings:set(self.props.id, not currentValue)
+					end,
+				}),
+
+				Text = e("Frame", {
+					Size = UDim2.new(1, 0, 1, 0),
+					BackgroundTransparency = 1,
+				}, {
+					Name = e("TextLabel", {
+						Text = self.props.name,
+						Font = Enum.Font.GothamBold,
+						TextSize = 17,
+						TextColor3 = theme.Setting.NameColor,
+						TextXAlignment = Enum.TextXAlignment.Left,
+						TextTransparency = self.props.transparency,
+
+						Size = UDim2.new(1, 0, 0, 17),
+
+						LayoutOrder = 1,
+						BackgroundTransparency = 1,
+					}),
+
+					Description = e("TextLabel", {
+						Text = self.props.description,
+						Font = Enum.Font.Gotham,
+						LineHeight = 1.2,
+						TextSize = 14,
+						TextColor3 = theme.Setting.DescriptionColor,
+						TextXAlignment = Enum.TextXAlignment.Left,
+						TextTransparency = self.props.transparency,
+						TextWrapped = true,
+
+						Size = self.containerSize:map(function(value)
+							local textBounds = getTextBounds(
+								self.props.description, 14, Enum.Font.Gotham, 1.2,
+								Vector2.new(value.X - 50, math.huge)
+							)
+							return UDim2.new(1, -50, 0, textBounds.Y)
+						end),
+
+						LayoutOrder = 2,
+						BackgroundTransparency = 1,
+					}),
+
+					Layout = e("UIListLayout", {
+						VerticalAlignment = Enum.VerticalAlignment.Center,
+						FillDirection = Enum.FillDirection.Vertical,
+						SortOrder = Enum.SortOrder.LayoutOrder,
+						Padding = UDim.new(0, 6),
+
+						[Roact.Change.AbsoluteContentSize] = function(object)
+							self.setContentSize(object.AbsoluteContentSize)
+						end,
+					}),
+
+					Padding = e("UIPadding", {
+						PaddingTop = UDim.new(0, 20),
+						PaddingBottom = UDim.new(0, 20),
+					}),
+				}),
+
+				Divider = e("Frame", {
+					BackgroundColor3 = theme.DividerColor,
+					BackgroundTransparency = self.props.transparency,
+					Size = UDim2.new(1, 0, 0, 1),
+					BorderSizePixel = 0,
+				}, {
+					Gradient = e("UIGradient", {
+						Transparency = NumberSequence.new({
+							NumberSequenceKeypoint.new(0, 1),
+							NumberSequenceKeypoint.new(DIVIDER_FADE_SIZE, 0),
+							NumberSequenceKeypoint.new(1 - DIVIDER_FADE_SIZE, 0),
+							NumberSequenceKeypoint.new(1, 1),
+						}),
+					}),
+				}),
+			})
+		end)
+	end)
+end
+
+local SettingsPage = Roact.Component:extend("SettingsPage")
+
+function SettingsPage:init()
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
+end
+
+function SettingsPage:render()
+	return Theme.with(function(theme)
+		theme = theme.Settings
+
+		return e(ScrollingFrame, {
+			size = UDim2.new(1, 0, 1, 0),
+			contentSize = self.contentSize,
+			transparency = self.props.transparency,
+		}, {
+			Navbar = e(Navbar, {
+				onBack = self.props.onBack,
+				transparency = self.props.transparency,
+				layoutOrder = 0,
+			}),
+
+			OpenScriptsExternally = e(Setting, {
+				id = "openScriptsExternally",
+				name = "Open Scripts Externally",
+				description = "Attempt to open scripts in an external editor",
+				transparency = self.props.transparency,
+				layoutOrder = 1,
+			}),
+
+			TwoWaySync = e(Setting, {
+				id = "twoWaySync",
+				name = "Two-Way Sync",
+				description = "Editing files in Studio will sync them into the filesystem",
+				transparency = self.props.transparency,
+				layoutOrder = 2,
+			}),
+
+			Layout = e("UIListLayout", {
+				FillDirection = Enum.FillDirection.Vertical,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+
+				[Roact.Change.AbsoluteContentSize] = function(object)
+					self.setContentSize(object.AbsoluteContentSize)
+				end,
+			}),
+
+			Padding = e("UIPadding", {
+				PaddingLeft = UDim.new(0, 20),
+				PaddingRight = UDim.new(0, 20),
+			}),
+		})
+	end)
+end
+
+return SettingsPage

plugin/src/App/StatusPages/init.lua

@@ -0,0 +1,7 @@
+return {
+	NotConnected = require(script.NotConnected),
+	Settings = require(script.Settings),
+	Connecting = require(script.Connecting),
+	Connected = require(script.Connected),
+	Error = require(script.Error),
+}

plugin/src/App/Theme.lua

@@ -0,0 +1,239 @@
+--[[
+	Theming system taking advantage of Roact's new context API.
+	Doesn't use colors provided by Studio and instead just branches on theme
+	name. This isn't exactly best practice.
+]]
+
+-- Studio does not exist outside Roblox Studio, so we'll lazily initialize it
+-- when possible.
+local _Studio
+local function getStudio()
+	if _Studio == nil then
+		_Studio = settings():GetService("Studio")
+	end
+
+	return _Studio
+end
+
+local Rojo = script:FindFirstAncestor("Rojo")
+
+local Roact = require(Rojo.Roact)
+local Log = require(Rojo.Log)
+
+local strict = require(script.Parent.Parent.strict)
+
+-- Copying hex colors back and forth from design programs is faster
+local function hexColor(decimal)
+	local red = bit32.band(bit32.rshift(decimal, 16), 2^8 - 1)
+	local green = bit32.band(bit32.rshift(decimal, 8), 2^8 - 1)
+	local blue = bit32.band(decimal, 2^8 - 1)
+
+	return Color3.fromRGB(red, green, blue)
+end
+
+local BRAND_COLOR = hexColor(0xE13835)
+
+local lightTheme = strict("LightTheme", {
+	BackgroundColor = hexColor(0xF0F0F0),
+	Button = {
+		Solid = {
+			ActionFillColor = hexColor(0xFFFFFF),
+			ActionFillTransparency = 0.8,
+			Enabled = {
+				TextColor = hexColor(0xFFFFFF),
+				BackgroundColor = BRAND_COLOR,
+			},
+			Disabled = {
+				TextColor = hexColor(0xFFFFFF),
+				BackgroundColor = BRAND_COLOR,
+			},
+		},
+		Bordered = {
+			ActionFillColor = hexColor(0x000000),
+			ActionFillTransparency = 0.9,
+			Enabled = {
+				TextColor = hexColor(0x393939),
+				BorderColor = hexColor(0xACACAC),
+			},
+			Disabled = {
+				TextColor = hexColor(0x393939),
+				BorderColor = hexColor(0xACACAC),
+			},
+		},
+	},
+	Checkbox = {
+		Active = {
+			IconColor = hexColor(0xFFFFFF),
+			BackgroundColor = BRAND_COLOR,
+		},
+		Inactive = {
+			IconColor = hexColor(0xCACACA),
+			BorderColor = hexColor(0xAFAFAF),
+		},
+	},
+	AddressEntry = {
+		TextColor = hexColor(0x000000),
+		PlaceholderColor = hexColor(0x8C8C8C)
+	},
+	BorderedContainer = {
+		BorderColor = hexColor(0xCBCBCB),
+		BackgroundColor = hexColor(0xE0E0E0),
+	},
+	Spinner = {
+		ForegroundColor = BRAND_COLOR,
+		BackgroundColor = hexColor(0xE0E0E0),
+	},
+	ConnectionDetails = {
+		ProjectNameColor = hexColor(0x00000),
+		AddressColor = hexColor(0x00000),
+		DisconnectColor = BRAND_COLOR,
+	},
+	Settings = {
+		DividerColor = hexColor(0xCBCBCB),
+		Navbar = {
+			BackButtonColor = hexColor(0x000000),
+			TextColor = hexColor(0x000000),
+		},
+		Setting = {
+			NameColor = hexColor(0x000000),
+			DescriptionColor = hexColor(0x5F5F5F),
+		},
+	},
+	Header = {
+		LogoColor = BRAND_COLOR,
+		VersionColor = hexColor(0x727272),
+	},
+	ErrorColor = hexColor(0x000000),
+	ScrollBarColor = hexColor(0x000000),
+})
+
+local darkTheme = strict("DarkTheme", {
+	BackgroundColor = hexColor(0x272727),
+	Button = {
+		Solid = {
+			ActionFillColor = hexColor(0xFFFFFF),
+			ActionFillTransparency = 0.8,
+			Enabled = {
+				TextColor = hexColor(0xFFFFFF),
+				BackgroundColor = BRAND_COLOR,
+			},
+			Disabled = {
+				TextColor = hexColor(0xFFFFFF),
+				BackgroundColor = BRAND_COLOR,
+			},
+		},
+		Bordered = {
+			ActionFillColor = hexColor(0xFFFFFF),
+			ActionFillTransparency = 0.9,
+			Enabled = {
+				TextColor = hexColor(0xDBDBDB),
+				BorderColor = hexColor(0x535353),
+			},
+			Disabled = {
+				TextColor = hexColor(0xDBDBDB),
+				BorderColor = hexColor(0x535353),
+			},
+		},
+	},
+	Checkbox = {
+		Active = {
+			IconColor = hexColor(0xFFFFFF),
+			BackgroundColor = BRAND_COLOR,
+		},
+		Inactive = {
+			IconColor = hexColor(0x484848),
+			BorderColor = hexColor(0x5A5A5A),
+		},
+	},
+	AddressEntry = {
+		TextColor = hexColor(0xFFFFFF),
+		PlaceholderColor = hexColor(0x717171)
+	},
+	BorderedContainer = {
+		BorderColor = hexColor(0x535353),
+		BackgroundColor = hexColor(0x323232),
+	},
+	Spinner = {
+		ForegroundColor = BRAND_COLOR,
+		BackgroundColor = hexColor(0x323232),
+	},
+	ConnectionDetails = {
+		ProjectNameColor = hexColor(0xFFFFFF),
+		AddressColor = hexColor(0xFFFFFF),
+		DisconnectColor = hexColor(0xFFFFFF),
+	},
+	Settings = {
+		DividerColor = hexColor(0x535353),
+		Navbar = {
+			BackButtonColor = hexColor(0xFFFFFF),
+			TextColor = hexColor(0xFFFFFF),
+		},
+		Setting = {
+			NameColor = hexColor(0xFFFFFF),
+			DescriptionColor = hexColor(0xD3D3D3),
+		},
+	},
+	Header = {
+		LogoColor = hexColor(0xFFFFFF),
+		VersionColor = hexColor(0xD3D3D3)
+	},
+	ErrorColor = hexColor(0xFFFFFF),
+	ScrollBarColor = hexColor(0xFFFFFF),
+})
+
+local Context = Roact.createContext(lightTheme)
+
+local StudioProvider = Roact.Component:extend("StudioProvider")
+
+-- Pull the current theme from Roblox Studio and update state with it.
+function StudioProvider:updateTheme()
+	local studioTheme = getStudio().Theme
+
+	if studioTheme.Name == "Light" then
+		self:setState({
+			theme = lightTheme,
+		})
+	elseif studioTheme.Name == "Dark" then
+		self:setState({
+			theme = darkTheme,
+		})
+	else
+		Log.warn("Unexpected theme '{}'' -- falling back to light theme!", studioTheme.Name)
+
+		self:setState({
+			theme = lightTheme,
+		})
+	end
+end
+
+function StudioProvider:init()
+	self:updateTheme()
+end
+
+function StudioProvider:render()
+	return Roact.createElement(Context.Provider, {
+		value = self.state.theme,
+	}, self.props[Roact.Children])
+end
+
+function StudioProvider:didMount()
+	self.connection = getStudio().ThemeChanged:Connect(function()
+		self:updateTheme()
+	end)
+end
+
+function StudioProvider:willUnmount()
+	self.connection:Disconnect()
+end
+
+local function with(callback)
+	return Roact.createElement(Context.Consumer, {
+		render = callback,
+	})
+end
+
+return {
+	StudioProvider = StudioProvider,
+	Consumer = Context.Consumer,
+	with = with,
+}

plugin/src/App/bindingUtil.lua

@@ -0,0 +1,58 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+
+local Roact = require(Rojo.Roact)
+local Log = require(Rojo.Log)
+
+local LERP_DATA_TYPES = {
+	Color3 = true,
+	UDim = true,
+	UDim2 = true,
+	Vector2 = true,
+	Vector3 = true,
+}
+
+local function fromMotor(motor)
+	local motorBinding, setMotorBinding = Roact.createBinding(motor:getValue())
+	motor:onStep(setMotorBinding)
+	return motorBinding
+end
+
+local function mapLerp(binding, value1, value2)
+	local valueType = typeof(value1)
+	if valueType ~= typeof(value2) then
+		Log.error("Type mismatch between values ({}, {}})", valueType, typeof(value2))
+	end
+
+	return binding:map(function(position)
+		if valueType == "number" then
+			return value1 - (value2 - value1) * position
+		elseif LERP_DATA_TYPES[valueType] then
+			return value1:lerp(value2, position)
+		else
+			Log.error("Unable to interpolate type {}", valueType)
+		end
+	end)
+end
+
+local function deriveProperty(binding, propertyName)
+	return binding:map(function(values)
+		return values[propertyName]
+	end)
+end
+
+local function blendAlpha(alphaValues)
+	local alpha = 0
+
+	for _, value in pairs(alphaValues) do
+		alpha = alpha + (1 - alpha) * value
+	end
+
+	return alpha
+end
+
+return {
+	fromMotor = fromMotor,
+	mapLerp = mapLerp,
+	deriveProperty = deriveProperty,
+	blendAlpha = blendAlpha,
+}

plugin/src/App/init.lua

@@ -0,0 +1,226 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+local Log = require(Rojo.Log)
+
+local Assets = require(Plugin.Assets)
+local Version = require(Plugin.Version)
+local Config = require(Plugin.Config)
+local strict = require(Plugin.strict)
+local Dictionary = require(Plugin.Dictionary)
+local ServeSession = require(Plugin.ServeSession)
+local ApiContext = require(Plugin.ApiContext)
+local preloadAssets = require(Plugin.preloadAssets)
+local Theme = require(script.Theme)
+local PluginSettings = require(script.PluginSettings)
+
+local Page = require(script.Page)
+local StudioToolbar = require(script.Components.Studio.StudioToolbar)
+local StudioToggleButton = require(script.Components.Studio.StudioToggleButton)
+local StudioPluginGui = require(script.Components.Studio.StudioPluginGui)
+local StudioPluginContext = require(script.Components.Studio.StudioPluginContext)
+local StatusPages = require(script.StatusPages)
+
+local AppStatus = strict("AppStatus", {
+	NotConnected = "NotConnected",
+	Settings = "Settings",
+	Connecting = "Connecting",
+	Connected = "Connected",
+	Error = "Error",
+})
+
+local e = Roact.createElement
+
+local App = Roact.Component:extend("App")
+
+function App:init()
+	preloadAssets()
+
+	self:setState({
+		appStatus = AppStatus.NotConnected,
+		guiEnabled = false,
+	})
+end
+
+function App:startSession(host, port, sessionOptions)
+	local baseUrl = ("http://%s:%s"):format(host, port)
+	local apiContext = ApiContext.new(baseUrl)
+
+	local serveSession = ServeSession.new({
+		apiContext = apiContext,
+		openScriptsExternally = sessionOptions.openScriptsExternally,
+		twoWaySync = sessionOptions.twoWaySync,
+	})
+
+	serveSession:onStatusChanged(function(status, details)
+		if status == ServeSession.Status.Connecting then
+			self:setState({
+				appStatus = AppStatus.Connecting,
+			})
+		elseif status == ServeSession.Status.Connected then
+			local address = ("%s:%s"):format(host, port)
+			self:setState({
+				appStatus = AppStatus.Connected,
+				projectName = details,
+				address = address,
+			})
+		elseif status == ServeSession.Status.Disconnected then
+			self.serveSession = nil
+
+			-- Details being present indicates that this
+			-- disconnection was from an error.
+			if details ~= nil then
+				Log.warn("Disconnected from an error: {}", details)
+
+				self:setState({
+					appStatus = AppStatus.Error,
+					errorMessage = tostring(details),
+				})
+			else
+				self:setState({
+					appStatus = AppStatus.NotConnected,
+				})
+			end
+		end
+	end)
+
+	serveSession:start()
+
+	self.serveSession = serveSession
+end
+
+function App:render()
+	local pluginName = "Rojo " .. Version.display(Config.version)
+
+	local function createPageElement(appStatus, additionalProps)
+		additionalProps = additionalProps or {}
+
+		local props = Dictionary.merge(additionalProps, {
+			component = StatusPages[appStatus],
+			active = self.state.appStatus == appStatus,
+		})
+
+		return e(Page, props)
+	end
+
+	return e(StudioPluginContext.Provider, {
+		value = self.props.plugin,
+	}, {
+		e(Theme.StudioProvider, nil, {
+			e(PluginSettings.StudioProvider, {
+				plugin = self.props.plugin,
+			}, {
+				gui = e(StudioPluginGui, {
+					id = pluginName,
+					title = pluginName,
+					active = self.state.guiEnabled,
+
+					initDockState = Enum.InitialDockState.Right,
+					initEnabled = false,
+					overridePreviousState = false,
+					floatingSize = Vector2.new(300, 200),
+					minimumSize = Vector2.new(300, 200),
+
+					zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+
+					onInitialState = function(initialState)
+						self:setState({
+							guiEnabled = initialState,
+						})
+					end,
+
+					onClose = function()
+						self:setState({
+							guiEnabled = false,
+						})
+					end,
+				}, {
+					NotConnectedPage = PluginSettings.with(function(settings)
+						return createPageElement(AppStatus.NotConnected, {
+							onConnect = function(host, port)
+								self:startSession(host, port, {
+									openScriptsExternally = settings:get("openScriptsExternally"),
+									twoWaySync = settings:get("twoWaySync"),
+								})
+							end,
+
+							onNavigateSettings = function()
+								self:setState({
+									appStatus = AppStatus.Settings,
+								})
+							end,
+						})
+					end),
+
+					Connecting = createPageElement(AppStatus.Connecting),
+
+					Connected = createPageElement(AppStatus.Connected, {
+						projectName = self.state.projectName,
+						address = self.state.address,
+
+						onDisconnect = function()
+							Log.trace("Disconnecting session")
+
+							self.serveSession:stop()
+							self.serveSession = nil
+							self:setState({
+								appStatus = AppStatus.NotConnected,
+							})
+
+							Log.trace("Session terminated by user")
+						end,
+					}),
+
+					Settings = createPageElement(AppStatus.Settings, {
+						onBack = function()
+							self:setState({
+								appStatus = AppStatus.NotConnected,
+							})
+						end,
+					}),
+
+					Error = createPageElement(AppStatus.Error, {
+						errorMessage = self.state.errorMessage,
+
+						onClose = function()
+							self:setState({
+								appStatus = AppStatus.NotConnected,
+							})
+						end,
+					}),
+
+					Background = Theme.with(function(theme)
+						return e("Frame", {
+							Size = UDim2.new(1, 0, 1, 0),
+							BackgroundColor3 = theme.BackgroundColor,
+							ZIndex = 0,
+							BorderSizePixel = 0,
+						})
+					end),
+				}),
+
+				toolbar = e(StudioToolbar, {
+					name = pluginName,
+				}, {
+					button = e(StudioToggleButton, {
+						name = "Rojo",
+						tooltip = "Show or hide the Rojo panel",
+						icon = Assets.Images.PluginButton,
+						active = self.state.guiEnabled,
+						enabled = true,
+						onClick = function()
+							self:setState(function(state)
+								return {
+									guiEnabled = not state.guiEnabled,
+								}
+							end)
+						end,
+					})
+				}),
+			}),
+		}),
+	})
+end
+
+return App