@rbxts/centurion-ui 1.0.0-dev-9b382c9 → 1.0.0-dev-d64d6ec

package/out/app/centurion-app.lua

@@ -66,8 +66,8 @@ local function CenturionApp(client)
 		end,
 		visible = visible,
 	}, Vide.jsx(Group, {
-		anchorPoint = function()
-			return options().anchorPoint
+		anchor = function()
+			return options().anchor
 		end,
 		size = function()
 			local size = options().size

package/out/components/history/history-line.lua

@@ -60,7 +60,7 @@ local function HistoryLine(_param)
 			return UDim.new(0, px(4))
 		end,
 	})), Vide.jsx(TextField, {
-		anchorPoint = Vector2.new(1, 0),
+		anchor = Vector2.new(1, 0),
 		size = function()
 			return UDim2.new(1, -px(84), 1, 0)
 		end,

package/out/components/suggestions/badge.d.ts

@@ -1,6 +1,6 @@
-import Vide, { Derivable } from "@rbxts/vide";
+import Vide, { Derivable, InstanceAttributes } from "@rbxts/vide";
 interface BadgeProps {
-    anchorPoint?: Derivable<Vector2>;
+    anchor?: Derivable<Vector2>;
     size?: Derivable<UDim2>;
     position?: Derivable<UDim2>;
     color?: Derivable<Color3>;
@@ -8,9 +8,9 @@ interface BadgeProps {
     textColor?: Derivable<Color3>;
     textSize?: Derivable<number>;
     visible?: Derivable<boolean>;
-    onTextBoundsChange?: (textBounds: Vector2) => void;
     children?: Vide.Node;
     backgroundTransparency?: number;
+    native?: InstanceAttributes<TextLabel>;
 }
-export declare function Badge({ anchorPoint, size, position, color, text, textColor, textSize, visible, onTextBoundsChange, children, backgroundTransparency, }: BadgeProps): Vide.Node;
+export declare function Badge(props: BadgeProps): Vide.Node;
 export {};

package/out/components/suggestions/badge.lua

@@ -6,40 +6,36 @@ local px = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").px
 local interfaceOptions = TS.import(script, script.Parent.Parent.Parent, "store").interfaceOptions
 local Frame = TS.import(script, script.Parent.Parent, "ui", "frame").Frame
 local Text = TS.import(script, script.Parent.Parent, "ui", "text").Text
-local function Badge(_param)
-	local anchorPoint = _param.anchorPoint
-	local size = _param.size
-	local position = _param.position
-	local color = _param.color
-	local text = _param.text
-	local textColor = _param.textColor
-	local textSize = _param.textSize
-	local visible = _param.visible
-	local onTextBoundsChange = _param.onTextBoundsChange
-	local children = _param.children
-	local backgroundTransparency = _param.backgroundTransparency
+local function Badge(props)
 	local options = useAtom(interfaceOptions)
+	local _attributes = {
+		text = props.text,
+		textColor = props.textColor,
+		textSize = props.textSize,
+		textXAlignment = "Center",
+		size = UDim2.fromScale(1, 1),
+		font = function()
+			return options().font.bold
+		end,
+	}
+	local _attribute = props.native
+	if _attribute then
+		for _k, _v in _attribute do
+			_attributes[_k] = _v
+		end
+	end
 	return Vide.jsx(Frame, {
-		anchorPoint = anchorPoint,
-		size = size,
-		position = position,
-		backgroundColor = color,
+		backgroundColor = props.color,
 		cornerRadius = function()
 			return UDim.new(0, px(4))
 		end,
-		visible = visible,
+		backgroundTransparency = props.backgroundTransparency,
 		clipsDescendants = true,
-		backgroundTransparency = backgroundTransparency,
-	}, Vide.jsx(Text, {
-		text = text,
-		textColor = textColor,
-		textSize = textSize,
-		size = UDim2.fromScale(1, 1),
-		font = function()
-			return options().font.bold
-		end,
-		textBoundsChanged = onTextBoundsChange,
-	}), children)
+		anchor = props.anchor,
+		position = props.position,
+		size = props.size,
+		visible = props.visible,
+	}, Vide.jsx(Text, _attributes, props.children))
 end
 return {
 	Badge = Badge,

package/out/components/suggestions/main-suggestion.d.ts

@@ -1,10 +1,12 @@
 import Vide, { Derivable } from "@rbxts/vide";
 import { Suggestion } from "../../types";
-import { SuggestionTextBounds } from "./types";
 export interface MainSuggestionProps {
     suggestion: Derivable<Suggestion | undefined>;
     currentText?: Derivable<string | undefined>;
     size: Derivable<UDim2>;
-    sizes: Derivable<SuggestionTextBounds>;
+    titleSize: Derivable<UDim2>;
+    descriptionSize: Derivable<UDim2>;
+    badgeSize: Derivable<UDim2>;
+    errorSize: Derivable<UDim2>;
 }
-export declare function MainSuggestion({ suggestion, currentText, size, sizes, }: MainSuggestionProps): Vide.Node;
+export declare function MainSuggestion({ suggestion, currentText, size, titleSize, descriptionSize, badgeSize, errorSize, }: MainSuggestionProps): Vide.Node;

package/out/components/suggestions/main-suggestion.lua

@@ -2,14 +2,12 @@
 local TS = _G[script]
 local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
 local Vide = _vide
-local effect = _vide.effect
 local read = _vide.read
-local springs = TS.import(script, script.Parent.Parent.Parent, "constants", "springs").springs
+local spring = _vide.spring
 local _text = TS.import(script, script.Parent.Parent.Parent, "constants", "text")
 local SUGGESTION_TEXT_SIZE = _text.SUGGESTION_TEXT_SIZE
 local SUGGESTION_TITLE_TEXT_SIZE = _text.SUGGESTION_TITLE_TEXT_SIZE
 local useAtom = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-atom").useAtom
-local useMotion = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-motion").useMotion
 local px = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").px
 local _store = TS.import(script, script.Parent.Parent.Parent, "store")
 local interfaceOptions = _store.interfaceOptions
@@ -23,17 +21,11 @@ local function MainSuggestion(_param)
 	local suggestion = _param.suggestion
 	local currentText = _param.currentText
 	local size = _param.size
-	local sizes = _param.sizes
+	local titleSize = _param.titleSize
+	local descriptionSize = _param.descriptionSize
+	local badgeSize = _param.badgeSize
+	local errorSize = _param.errorSize
 	local options = useAtom(interfaceOptions)
-	local titleHeight, titleHeightMotion = useMotion(0)
-	local badgeWidth, badgeWidthMotion = useMotion(0)
-	effect(function()
-		local _result = read(suggestion)
-		if _result ~= nil then
-			_result = _result.description
-		end
-		titleHeightMotion:spring(if _result ~= nil then 1 else 0, springs.responsive)
-	end)
 	return Vide.jsx(Frame, {
 		size = size,
 		backgroundColor = function()
@@ -49,23 +41,19 @@ local function MainSuggestion(_param)
 		cornerRadius = function()
 			return UDim.new(0, px(8))
 		end,
-		clipsDescendants = false,
-		mouseEnter = function()
-			return mouseOverInterface(true)
-		end,
-		mouseLeave = function()
-			return mouseOverInterface(false)
-		end,
+		native = {
+			MouseEnter = function()
+				return mouseOverInterface(true)
+			end,
+			MouseLeave = function()
+				return mouseOverInterface(false)
+			end,
+		},
 	}, Vide.jsx(Padding, {
 		all = function()
 			return UDim.new(0, px(8))
 		end,
 	}), Vide.jsx(Badge, {
-		anchorPoint = Vector2.new(1, 0),
-		size = function()
-			return UDim2.fromOffset(badgeWidth(), px(24))
-		end,
-		position = UDim2.fromScale(1, 0),
 		color = function()
 			return options().palette.highlight
 		end,
@@ -83,19 +71,12 @@ local function MainSuggestion(_param)
 			local currentSuggestion = read(suggestion)
 			return currentSuggestion ~= nil and currentSuggestion.type == "argument"
 		end,
-		onTextBoundsChange = function(textBounds)
-			return badgeWidthMotion:spring(textBounds.X + px(8), {
-				mass = 0.5,
-				tension = 400,
-			})
-		end,
+		anchor = Vector2.new(1, 0),
+		position = UDim2.fromScale(1, 0),
+		size = spring(function()
+			return UDim2.fromOffset(read(badgeSize).X.Offset + px(4), px(SUGGESTION_TITLE_TEXT_SIZE))
+		end, 0.2),
 	}), Vide.jsx(Text, {
-		size = function()
-			return read(sizes).title
-		end,
-		position = function()
-			return UDim2.fromOffset(0, 0):Lerp(UDim2.fromOffset(0, px(-4)), titleHeight())
-		end,
 		text = function()
 			local currentSuggestion = read(suggestion)
 			local _result = currentSuggestion
@@ -123,17 +104,12 @@ local function MainSuggestion(_param)
 		end,
 		textXAlignment = "Left",
 		textYAlignment = "Top",
-		richText = true,
 		font = function()
 			return options().font.bold
 		end,
+		richText = true,
+		size = titleSize,
 	}), Vide.jsx(Text, {
-		size = function()
-			return read(sizes).description
-		end,
-		position = function()
-			return UDim2.fromOffset(0, px(SUGGESTION_TITLE_TEXT_SIZE))
-		end,
 		text = function()
 			local _result = read(suggestion)
 			if _result ~= nil then
@@ -155,12 +131,11 @@ local function MainSuggestion(_param)
 		textYAlignment = "Top",
 		textWrapped = true,
 		richText = true,
-	}), Vide.jsx(Text, {
-		anchorPoint = Vector2.new(0, 1),
-		size = function()
-			return UDim2.new(1, 0, 0, read(sizes).errorTextHeight)
+		position = function()
+			return UDim2.fromOffset(0, px(SUGGESTION_TITLE_TEXT_SIZE))
 		end,
-		position = UDim2.fromScale(0, 1),
+		size = descriptionSize,
+	}), Vide.jsx(Text, {
 		text = function()
 			local currentSuggestion = read(suggestion)
 			local _result
@@ -181,8 +156,22 @@ local function MainSuggestion(_param)
 		textSize = function()
 			return px(SUGGESTION_TEXT_SIZE)
 		end,
-		textWrapped = true,
+		textTransparency = spring(function()
+			local currentSuggestion = read(suggestion)
+			local _result = currentSuggestion
+			if _result ~= nil then
+				_result = _result.type
+			end
+			local _condition = _result == "argument"
+			if _condition then
+				_condition = currentSuggestion.error ~= nil
+			end
+			return if _condition then 0 else 1
+		end, 0.2),
 		textXAlignment = "Left",
+		anchor = Vector2.new(0, 1),
+		position = UDim2.fromScale(0, 1),
+		size = errorSize,
 	}))
 end
 return {

package/out/components/suggestions/suggestion-list.lua

@@ -36,12 +36,14 @@ local function SuggestionList(_param)
 	end)
 	return Vide.jsx(Group, {
 		size = size,
-		mouseEnter = function()
-			return mouseOverInterface(true)
-		end,
-		mouseLeave = function()
-			return mouseOverInterface(false)
-		end,
+		native = {
+			MouseEnter = function()
+				return mouseOverInterface(true)
+			end,
+			MouseLeave = function()
+				return mouseOverInterface(false)
+			end,
+		},
 	}, Vide.jsx("uilistlayout", {
 		SortOrder = "LayoutOrder",
 		Padding = function()

package/out/components/suggestions/suggestions.lua

@@ -4,15 +4,14 @@ local TextService = TS.import(script, TS.getModule(script, "@rbxts", "services")
 local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
 local Vide = _vide
 local cleanup = _vide.cleanup
-local effect = _vide.effect
-local source = _vide.source
-local springs = TS.import(script, script.Parent.Parent.Parent, "constants", "springs").springs
+local derive = _vide.derive
+local spring = _vide.spring
 local _text = TS.import(script, script.Parent.Parent.Parent, "constants", "text")
 local SUGGESTION_TEXT_SIZE = _text.SUGGESTION_TEXT_SIZE
 local SUGGESTION_TITLE_TEXT_SIZE = _text.SUGGESTION_TITLE_TEXT_SIZE
 local useAtom = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-atom").useAtom
-local useMotion = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-motion").useMotion
 local px = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").px
+local useTextBounds = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-text-bounds").useTextBounds
 local _store = TS.import(script, script.Parent.Parent.Parent, "store")
 local currentSuggestion = _store.currentSuggestion
 local currentTextPart = _store.currentTextPart
@@ -20,69 +19,122 @@ local interfaceOptions = _store.interfaceOptions
 local Group = TS.import(script, script.Parent.Parent, "ui", "group").Group
 local MainSuggestion = TS.import(script, script.Parent, "main-suggestion").MainSuggestion
 local SuggestionList = TS.import(script, script.Parent, "suggestion-list").SuggestionList
-local getSuggestionTextBounds = TS.import(script, script.Parent, "util").getSuggestionTextBounds
 local MAX_SUGGESTION_WIDTH = 180
 local MAX_BADGE_WIDTH = 80
 local PADDING = 8
 local function Suggestions()
 	local options = useAtom(interfaceOptions)
 	local textPart = useAtom(currentTextPart)
-	local textBoundsParams = Instance.new("GetTextBoundsParams")
-	textBoundsParams.RichText = true
-	cleanup(function()
-		textBoundsParams:Destroy()
-	end)
-	-- Suggestions
 	local suggestion = useAtom(currentSuggestion)
-	local sizes = source({
-		title = UDim2.fromOffset(0, px(SUGGESTION_TITLE_TEXT_SIZE)),
-		description = UDim2.fromOffset(0, px(SUGGESTION_TEXT_SIZE)),
-		errorTextHeight = 0,
-		typeBadgeWidth = 0,
+	local titleBounds = useTextBounds({
+		text = function()
+			local _result = suggestion()
+			if _result ~= nil then
+				_result = _result.title
+			end
+			return _result
+		end,
+		font = function()
+			return options().font.bold
+		end,
+		size = function()
+			return px(SUGGESTION_TITLE_TEXT_SIZE)
+		end,
 	})
-	local suggestionSize, suggestionSizeMotion = useMotion(UDim2.new())
-	local otherSuggestionSize, otherSuggestionSizeMotion = useMotion(UDim2.new())
-	-- Resize window based on suggestions
-	effect(function()
-		local current = suggestion()
-		if current == nil then
-			suggestionSizeMotion:spring(UDim2.new())
-			otherSuggestionSizeMotion:spring(UDim2.new())
-			return nil
-		end
-		local otherSuggestions = current.others
-		if #otherSuggestions == 0 then
-			otherSuggestionSizeMotion:spring(UDim2.new())
+	local descriptionBounds = useTextBounds({
+		text = function()
+			local _result = suggestion()
+			if _result ~= nil then
+				_result = _result.description
+			end
+			return _result
+		end,
+		font = function()
+			return options().font.regular
+		end,
+		size = function()
+			return px(SUGGESTION_TEXT_SIZE)
+		end,
+		width = function()
+			return px(MAX_SUGGESTION_WIDTH)
+		end,
+	})
+	local typeBadgeBounds = useTextBounds({
+		text = function()
+			local currentSuggestion = suggestion()
+			local _result = currentSuggestion
+			if _result ~= nil then
+				_result = _result.type
+			end
+			if _result == "command" then
+				return nil
+			end
+			local _result_1 = currentSuggestion
+			if _result_1 ~= nil then
+				_result_1 = _result_1.dataType
+			end
+			return _result_1
+		end,
+		font = function()
+			return options().font.bold
+		end,
+		size = function()
+			return px(SUGGESTION_TEXT_SIZE)
+		end,
+	})
+	local errorBounds = useTextBounds({
+		text = function()
+			local current = suggestion()
+			local _result = current
+			if _result ~= nil then
+				_result = _result.type
+			end
+			if _result == "command" then
+				return nil
+			end
+			local _result_1 = current
+			if _result_1 ~= nil then
+				_result_1 = _result_1.error
+			end
+			return _result_1
+		end,
+		font = function()
+			return options().font.regular
+		end,
+		size = function()
+			return px(SUGGESTION_TEXT_SIZE)
+		end,
+	})
+	local listBoundsParams = Instance.new("GetTextBoundsParams")
+	listBoundsParams.RichText = true
+	cleanup(listBoundsParams)
+	local listBounds = derive(function()
+		local width = 0
+		local _result = suggestion()
+		if _result ~= nil then
+			_result = _result.others
 		end
-		local textBounds = getSuggestionTextBounds(options(), current, px(SUGGESTION_TITLE_TEXT_SIZE), px(SUGGESTION_TEXT_SIZE), px(MAX_SUGGESTION_WIDTH), px(MAX_BADGE_WIDTH))
-		sizes(textBounds)
-		local windowWidth = math.max(textBounds.title.X.Offset, textBounds.description.X.Offset) + px(PADDING * 2)
-		local windowHeight = textBounds.title.Y.Offset + textBounds.description.Y.Offset + textBounds.errorTextHeight + px(PADDING * 2)
-		if textBounds.typeBadgeWidth > 0 then
-			windowWidth += textBounds.typeBadgeWidth + px(16)
+		local _condition = _result
+		if _condition == nil then
+			_condition = {}
 		end
-		if textBounds.errorTextHeight > 0 then
-			windowHeight += px(8)
+		local suggestions = _condition
+		for _, value in suggestions do
+			listBoundsParams.Text = value
+			local suggestionBounds = TextService:GetTextBoundsAsync(listBoundsParams)
+			width = math.max(width, suggestionBounds.X)
 		end
-		-- Calculate other suggestion sizes
-		local otherHeight = 0
-		if not (#otherSuggestions == 0) then
-			local maxSuggestionWidth = 0
-			textBoundsParams.Font = options().font.regular
-			textBoundsParams.Size = px(SUGGESTION_TEXT_SIZE)
-			textBoundsParams.Width = math.huge
-			for _, name in otherSuggestions do
-				textBoundsParams.Text = name
-				local suggestionBounds = TextService:GetTextBoundsAsync(textBoundsParams)
-				if suggestionBounds.X > maxSuggestionWidth then
-					maxSuggestionWidth = suggestionBounds.X
-				end
-			end
-			otherHeight = #otherSuggestions * px(SUGGESTION_TEXT_SIZE + 6) + (#otherSuggestions - 1) * px(4) + px(8)
-			windowWidth = math.max(windowWidth, maxSuggestionWidth)
-			otherSuggestionSizeMotion:spring(UDim2.fromOffset(windowWidth, otherHeight), springs.gentle)
+		local height = #suggestions * px(SUGGESTION_TEXT_SIZE + 6) + (#suggestions - 1) * px(4) + px(8)
+		return Vector2.new(width, height)
+	end)
+	local windowSize = derive(function()
+		local width = math.max(titleBounds().X, descriptionBounds().X, errorBounds().X, listBounds().X) + typeBadgeBounds().X
+		local height = titleBounds().Y + descriptionBounds().Y + errorBounds().Y
+		local padding = px(PADDING * 2)
+		if width == 0 or height == 0 then
+			return UDim2.fromOffset(0, px(SUGGESTION_TITLE_TEXT_SIZE) + padding)
 		end
-		suggestionSizeMotion:spring(UDim2.fromOffset(windowWidth, windowHeight), springs.responsive)
+		return UDim2.fromOffset(width + padding, height + padding)
 	end)
 	return Vide.jsx(Group, {
 		size = UDim2.fromScale(1, 1),
@@ -90,14 +142,30 @@ local function Suggestions()
 	}, Vide.jsx(MainSuggestion, {
 		suggestion = suggestion,
 		currentText = textPart,
-		size = suggestionSize,
-		sizes = sizes,
+		size = spring(windowSize, 0.2),
+		titleSize = function()
+			local bounds = titleBounds()
+			return UDim2.fromOffset(bounds.X, bounds.Y)
+		end,
+		descriptionSize = function()
+			local bounds = descriptionBounds()
+			return UDim2.fromOffset(bounds.X, bounds.Y)
+		end,
+		badgeSize = function()
+			local bounds = typeBadgeBounds()
+			return UDim2.fromOffset(bounds.X, bounds.Y)
+		end,
+		errorSize = function()
+			local bounds = errorBounds()
+			return UDim2.fromOffset(bounds.X, bounds.Y)
+		end,
 	}), Vide.jsx(SuggestionList, {
 		suggestion = suggestion,
 		currentText = textPart,
-		size = otherSuggestionSize,
+		size = spring(function()
+			return UDim2.fromOffset(windowSize().X.Offset, listBounds().Y)
+		end, 0.3),
 	}), Vide.jsx("uilistlayout", {
-		SortOrder = "LayoutOrder",
 		Padding = function()
 			return UDim.new(0, px(PADDING))
 		end,

package/out/components/terminal/terminal-text-field.d.ts

@@ -1,11 +1,11 @@
 import Vide, { Derivable } from "@rbxts/vide";
 interface TerminalTextFieldProps {
-    anchorPoint?: Derivable<Vector2>;
+    anchor?: Derivable<Vector2>;
     size?: Derivable<UDim2>;
     position?: Derivable<UDim2>;
     backgroundTransparency?: Derivable<number>;
     onTextChange?: (text: string) => void;
     onSubmit?: (text: string) => void;
 }
-export declare function TerminalTextField({ anchorPoint, size, position, backgroundTransparency, onTextChange, onSubmit, }: TerminalTextFieldProps): Vide.Node;
+export declare function TerminalTextField({ anchor, size, position, backgroundTransparency, onTextChange, onSubmit, }: TerminalTextFieldProps): Vide.Node;
 export {};

package/out/components/terminal/terminal-text-field.lua

@@ -31,7 +31,7 @@ local formatPartsAsPath = _command.formatPartsAsPath
 local getArgumentNames = _command.getArgumentNames
 local TEXT_SIZE = 22
 local function TerminalTextField(_param)
-	local anchorPoint = _param.anchorPoint
+	local anchor = _param.anchor
 	local size = _param.size
 	local position = _param.position
 	local backgroundTransparency = _param.backgroundTransparency
@@ -41,7 +41,7 @@ local function TerminalTextField(_param)
 	local options = useAtom(interfaceOptions)
 	local visible = useAtom(interfaceVisible)
 	local valid = useAtom(terminalTextValid)
-	local ref = source(nil)
+	local ref = source()
 	local commandHistory = source({})
 	local commandHistoryIndex = source(nil)
 	local text = source("")
@@ -266,7 +266,7 @@ local function TerminalTextField(_param)
 		textBox.CursorPosition = #newText + 1
 	end)
 	return Vide.jsx(Frame, {
-		anchorPoint = anchorPoint,
+		anchor = anchor,
 		size = size,
 		position = position,
 		backgroundColor = function()
@@ -281,9 +281,7 @@ local function TerminalTextField(_param)
 			return UDim.new(0, px(8))
 		end,
 	}), Vide.jsx(TextField, {
-		action = function(instance)
-			return ref(instance)
-		end,
+		action = ref,
 		size = UDim2.fromScale(1, 1),
 		text = function()
 			local value = text()
@@ -316,40 +314,42 @@ local function TerminalTextField(_param)
 			return options().font.medium
 		end,
 		clearTextOnFocus = false,
-		focusLost = function(enterPressed)
-			if not enterPressed then
-				return nil
-			end
-			local textBox = ref()
-			if textBox == nil then
-				return nil
-			end
-			local currentText = textBox.Text
-			local history = commandHistory()
-			if currentText ~= "" and (#history == 0 or history[#history] ~= currentText) then
-				local _array = {}
-				local _length = #_array
-				local _historyLength = #history
-				table.move(history, 1, _historyLength, _length + 1, _array)
-				_length += _historyLength
-				_array[_length + 1] = textBox.Text
-				commandHistory(_array)
-			end
-			commandHistoryIndex(nil)
-			local _result = onSubmit
-			if _result ~= nil then
-				_result(currentText)
-			end
-			textBox:CaptureFocus()
-			text("")
-		end,
-		textChanged = function(currentText)
-			local historyIndex = commandHistoryIndex()
-			if historyIndex ~= nil and currentText ~= commandHistory()[historyIndex + 1] then
+		native = {
+			FocusLost = function(enterPressed)
+				if not enterPressed then
+					return nil
+				end
+				local textBox = ref()
+				if textBox == nil then
+					return nil
+				end
+				local currentText = textBox.Text
+				local history = commandHistory()
+				if currentText ~= "" and (#history == 0 or history[#history] ~= currentText) then
+					local _array = {}
+					local _length = #_array
+					local _historyLength = #history
+					table.move(history, 1, _historyLength, _length + 1, _array)
+					_length += _historyLength
+					_array[_length + 1] = textBox.Text
+					commandHistory(_array)
+				end
 				commandHistoryIndex(nil)
-			end
-			text(currentText)
-		end,
+				local _result = onSubmit
+				if _result ~= nil then
+					_result(currentText)
+				end
+				textBox:CaptureFocus()
+				text("")
+			end,
+			TextChanged = function(currentText)
+				local historyIndex = commandHistoryIndex()
+				if historyIndex ~= nil and currentText ~= commandHistory()[historyIndex + 1] then
+					commandHistoryIndex(nil)
+				end
+				text(currentText)
+			end,
+		},
 		zIndex = 2,
 	}), Vide.jsx(Text, {
 		size = UDim2.fromScale(1, 1),

package/out/components/terminal/terminal.lua

@@ -5,13 +5,13 @@ local ArrayUtil = TS.import(script, TS.getModule(script, "@rbxts", "centurion").
 local splitString = TS.import(script, TS.getModule(script, "@rbxts", "centurion").out.shared.util.string).splitString
 local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
 local Vide = _vide
-local effect = _vide.effect
+local derive = _vide.derive
 local source = _vide.source
+local spring = _vide.spring
 local HISTORY_TEXT_SIZE = TS.import(script, script.Parent.Parent.Parent, "constants", "text").HISTORY_TEXT_SIZE
 local useAtom = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-atom").useAtom
 local useClient = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-client").useClient
 local useHistory = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-history").useHistory
-local useMotion = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-motion").useMotion
 local px = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").px
 local _store = TS.import(script, script.Parent.Parent.Parent, "store")
 local commandArgIndex = _store.commandArgIndex
@@ -41,21 +41,20 @@ local function Terminal()
 	local options = useAtom(interfaceOptions)
 	local missingArgs = source({})
 	local history = useHistory()
-	local historyHeight, historyHeightMotion = useMotion(0)
-	effect(function()
+	local terminalHeight = derive(function()
+		local padding = px.ceil(TEXT_FIELD_HEIGHT + 16)
+		if #history().lines == 0 then
+			return padding
+		end
 		local totalHeight = history().height
 		local isClamped = totalHeight > px(MAX_HEIGHT)
 		local clampedHeight = if isClamped then px(MAX_HEIGHT) else totalHeight
-		historyHeightMotion:spring(clampedHeight, {
-			mass = 0.1,
-			tension = 300,
-			friction = 15,
-		})
+		return math.ceil(padding + clampedHeight)
 	end)
 	return Vide.jsx(Frame, {
-		size = function()
-			return UDim2.new(1, 0, 0, math.ceil(px(TEXT_FIELD_HEIGHT + 16) + historyHeight()))
-		end,
+		size = spring(function()
+			return UDim2.new(1, 0, 0, terminalHeight())
+		end, 0.2),
 		backgroundColor = function()
 			return options().palette.background
 		end,
@@ -69,12 +68,14 @@ local function Terminal()
 		cornerRadius = function()
 			return UDim.new(0, px(8))
 		end,
-		mouseEnter = function()
-			return mouseOverInterface(true)
-		end,
-		mouseLeave = function()
-			return mouseOverInterface(false)
-		end,
+		native = {
+			MouseEnter = function()
+				return mouseOverInterface(true)
+			end,
+			MouseLeave = function()
+				return mouseOverInterface(false)
+			end,
+		},
 	}, Vide.jsx(Padding, {
 		all = function()
 			return UDim.new(0, px(8))
@@ -88,7 +89,7 @@ local function Terminal()
 			return px(MAX_HEIGHT)
 		end,
 	}), Vide.jsx(TerminalTextField, {
-		anchorPoint = Vector2.new(0, 1),
+		anchor = Vector2.new(0, 1),
 		size = function()
 			return UDim2.new(1, 0, 0, px(TEXT_FIELD_HEIGHT))
 		end,

package/out/components/ui/frame.d.ts

@@ -1,8 +1,8 @@
-import Vide, { ActionAttributes, Derivable, InferEnumNames } from "@rbxts/vide";
+import Vide, { ActionAttributes, Derivable, InferEnumNames, InstanceAttributes } from "@rbxts/vide";
 export interface FrameProps<T extends Instance = Frame> extends ActionAttributes<T> {
     size?: Derivable<UDim2>;
     position?: Derivable<UDim2>;
-    anchorPoint?: Derivable<Vector2>;
+    anchor?: Derivable<Vector2>;
     rotation?: Derivable<number>;
     backgroundColor?: Derivable<Color3>;
     backgroundTransparency?: Derivable<number>;
@@ -12,8 +12,6 @@ export interface FrameProps<T extends Instance = Frame> extends ActionAttributes
     layoutOrder?: Derivable<number>;
     cornerRadius?: Derivable<UDim>;
     automaticSize?: InferEnumNames<Enum.AutomaticSize>;
-    children?: Vide.Node;
-    mouseEnter?: () => void;
-    mouseLeave?: () => void;
+    native?: InstanceAttributes<T>;
 }
 export declare function Frame(props: FrameProps): Vide.Node;

package/out/components/ui/frame.lua

@@ -2,11 +2,11 @@
 local TS = _G[script]
 local Vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
 local function Frame(props)
-	return Vide.jsx("frame", {
+	local _attributes = {
 		AutomaticSize = props.automaticSize,
 		Size = props.size,
 		Position = props.position,
-		AnchorPoint = props.anchorPoint,
+		AnchorPoint = props.anchor,
 		Rotation = props.rotation,
 		BackgroundColor3 = props.backgroundColor,
 		BackgroundTransparency = props.backgroundTransparency,
@@ -14,11 +14,16 @@ local function Frame(props)
 		Visible = props.visible,
 		ZIndex = props.zIndex,
 		LayoutOrder = props.layoutOrder,
-		BorderSizePixel = 0,
-		MouseEnter = props.mouseEnter,
-		MouseLeave = props.mouseLeave,
 		action = props.action,
-	}, props.cornerRadius and Vide.jsx("uicorner", {
+		BorderSizePixel = 0,
+	}
+	local _attribute = props.native
+	if _attribute then
+		for _k, _v in _attribute do
+			_attributes[_k] = _v
+		end
+	end
+	return Vide.jsx("frame", _attributes, props.cornerRadius and Vide.jsx("uicorner", {
 		CornerRadius = props.cornerRadius,
 	}), props.children)
 end

package/out/components/ui/group.d.ts

@@ -1,16 +1,15 @@
 import Vide, { Derivable } from "@rbxts/vide";
-interface GroupProps extends Vide.PropsWithChildren {
+import { FrameProps } from "./frame";
+interface GroupProps extends Omit<FrameProps, "backgroundTransparency" | "backgroundColor"> {
     name?: Derivable<string>;
-    size?: Derivable<UDim2>;
+    anchor?: Derivable<Vector2>;
     position?: Derivable<UDim2>;
-    anchorPoint?: Derivable<Vector2>;
+    size?: Derivable<UDim2>;
     rotation?: Derivable<number>;
     clipsDescendants?: Derivable<boolean>;
     layoutOrder?: Derivable<number>;
     visible?: Derivable<boolean>;
     zIndex?: Derivable<number>;
-    mouseEnter?: () => void;
-    mouseLeave?: () => void;
 }
 export declare function Group(props: GroupProps): Vide.Node;
 export {};

package/out/components/ui/group.lua

@@ -2,20 +2,27 @@
 local TS = _G[script]
 local Vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
 local function Group(props)
-	return Vide.jsx("frame", {
-		Name = props.name,
-		Size = props.size or UDim2.fromScale(1, 1),
+	local _attributes = {
+		AutomaticSize = props.automaticSize,
+		AnchorPoint = props.anchor,
 		Position = props.position,
-		AnchorPoint = props.anchorPoint,
+		Size = props.size or UDim2.fromScale(1, 1),
 		Rotation = props.rotation,
+		BackgroundTransparency = 1,
 		ClipsDescendants = props.clipsDescendants,
-		LayoutOrder = props.layoutOrder,
 		Visible = props.visible,
 		ZIndex = props.zIndex,
-		BackgroundTransparency = 1,
-		MouseEnter = props.mouseEnter,
-		MouseLeave = props.mouseLeave,
-	}, props.children)
+		LayoutOrder = props.layoutOrder,
+		action = props.action,
+		BorderSizePixel = 0,
+	}
+	local _attribute = props.native
+	if _attribute then
+		for _k, _v in _attribute do
+			_attributes[_k] = _v
+		end
+	end
+	return Vide.jsx("frame", _attributes, props.children)
 end
 return {
 	Group = Group,

package/out/components/ui/scrolling-frame.lua

@@ -14,7 +14,7 @@ local function ScrollingFrame(props)
 		CanvasPosition = props.canvasPosition,
 		Size = props.size,
 		Position = props.position,
-		AnchorPoint = props.anchorPoint,
+		AnchorPoint = props.anchor,
 		Rotation = props.rotation,
 		BackgroundColor3 = props.backgroundColor,
 	}
@@ -28,6 +28,12 @@ local function ScrollingFrame(props)
 	_attributes.ZIndex = props.zIndex
 	_attributes.LayoutOrder = props.layoutOrder
 	_attributes.BorderSizePixel = 0
+	local _attribute = props.native
+	if _attribute then
+		for _k, _v in _attribute do
+			_attributes[_k] = _v
+		end
+	end
 	return Vide.jsx("scrollingframe", _attributes, props.cornerRadius and Vide.jsx("uicorner", {
 		CornerRadius = props.cornerRadius,
 	}), props.children)

package/out/components/ui/text-field.d.ts

@@ -7,8 +7,6 @@ interface TextFieldProps extends TextProps<TextBox> {
     clearTextOnFocus?: Derivable<boolean>;
     multiLine?: Derivable<boolean>;
     textEditable?: Derivable<boolean>;
-    focusLost?: (enterPressed: boolean) => void;
-    textChanged?: (text: string) => void;
 }
 export declare function TextField(props: TextFieldProps): Vide.Node;
 export {};

package/out/components/ui/text-field.lua

@@ -28,9 +28,12 @@ local function TextField(props)
 		TextScaled = props.textScaled,
 		RichText = props.richText,
 		AutomaticSize = props.textAutoResize,
+		AutoLocalize = function()
+			return options().autoLocalize
+		end,
 		Size = props.size,
 		Position = props.position,
-		AnchorPoint = props.anchorPoint,
+		AnchorPoint = props.anchor,
 		BackgroundColor3 = props.backgroundColor,
 	}
 	local _condition = props.backgroundTransparency
@@ -43,9 +46,13 @@ local function TextField(props)
 	_attributes.ZIndex = props.zIndex
 	_attributes.LayoutOrder = props.layoutOrder
 	_attributes.BorderSizePixel = 0
-	_attributes.FocusLost = props.focusLost
-	_attributes.TextChanged = props.textChanged
 	_attributes.action = props.action
+	local _attribute = props.native
+	if _attribute then
+		for _k, _v in _attribute do
+			_attributes[_k] = _v
+		end
+	end
 	return Vide.jsx("textbox", _attributes, props.cornerRadius and Vide.jsx("uicorner", {
 		CornerRadius = props.cornerRadius,
 	}), props.children)

package/out/components/ui/text.d.ts

@@ -14,7 +14,5 @@ export interface TextProps<T extends Instance = TextLabel> extends FrameProps<T>
     textHeight?: Derivable<number>;
     textAutoResize?: "X" | "Y" | "XY";
     richText?: Derivable<boolean>;
-    maxVisibleGraphemes?: Derivable<number>;
-    textBoundsChanged?: (textBounds: Vector2) => void;
 }
 export declare function Text(props: TextProps): Vide.Node;

package/out/components/ui/text.lua

@@ -29,11 +29,13 @@ local function Text(props)
 		TextScaled = props.textScaled,
 		LineHeight = props.textHeight,
 		RichText = props.richText,
-		MaxVisibleGraphemes = props.maxVisibleGraphemes,
 		Size = props.size,
 		AutomaticSize = props.textAutoResize,
+		AutoLocalize = function()
+			return options().autoLocalize
+		end,
 		Position = props.position,
-		AnchorPoint = props.anchorPoint,
+		AnchorPoint = props.anchor,
 		BackgroundColor3 = props.backgroundColor,
 	}
 	local _condition = props.backgroundTransparency
@@ -46,7 +48,12 @@ local function Text(props)
 	_attributes.ZIndex = props.zIndex
 	_attributes.LayoutOrder = props.layoutOrder
 	_attributes.action = props.action
-	_attributes.TextBoundsChanged = props.textBoundsChanged
+	local _attribute = props.native
+	if _attribute then
+		for _k, _v in _attribute do
+			_attributes[_k] = _v
+		end
+	end
 	return Vide.jsx("textlabel", _attributes, props.cornerRadius and Vide.jsx("uicorner", {
 		CornerRadius = props.cornerRadius,
 	}), props.children)

package/out/constants/options.lua

@@ -3,7 +3,7 @@ local TS = _G[script]
 local GuiService = TS.import(script, TS.getModule(script, "@rbxts", "services")).GuiService
 local DefaultPalette = TS.import(script, script.Parent.Parent, "palette").DefaultPalette
 local DEFAULT_INTERFACE_OPTIONS = {
-	anchorPoint = Vector2.new(),
+	anchor = Vector2.new(),
 	position = function(px)
 		return UDim2.fromOffset(px(16), px(8) + (GuiService:GetGuiInset()).Y)
 	end,
@@ -20,6 +20,7 @@ local DEFAULT_INTERFACE_OPTIONS = {
 		bold = Font.new("rbxassetid://16658221428", Enum.FontWeight.Bold),
 	},
 	palette = DefaultPalette.mocha,
+	autoLocalize = false,
 }
 return {
 	DEFAULT_INTERFACE_OPTIONS = DEFAULT_INTERFACE_OPTIONS,

package/out/hooks/use-px.d.ts

@@ -1,25 +1,3 @@
-export interface ScaleFunction {
-    /**
-     * Scales `pixels` based on the current viewport size and rounds the result.
-     */
-    (pixels: number): number;
-    /**
-     * Scales `pixels` and rounds the result to the nearest even number.
-     */
-    even: (pixels: number) => number;
-    /**
-     * Scales a number based on the current viewport size without rounding.
-     */
-    scale: (percent: number) => number;
-    /**
-     * Scales `pixels` and rounds the result down.
-     */
-    floor: (pixels: number) => number;
-    /**
-     * Scales `pixels` and rounds the result up.
-     */
-    ceil: (pixels: number) => number;
-}
 /**
  * Rounds and scales a number to the current `px` unit. Includes additional
  * methods for edge cases.
@@ -27,9 +5,15 @@ export interface ScaleFunction {
  * @param value The number to scale.
  * @returns A number in scaled `px` units.
  */
-export declare const px: ScaleFunction;
+export declare const px: ((value: number) => number) & {
+    even: (value: number) => number;
+    scale: (value: number) => number;
+    floor: (value: number) => number;
+    ceil: (value: number) => number;
+};
+export type ScaleFunction = typeof px;
 /**
  * Scales the current `px` unit based on the current viewport size. Should be
- * called once in `Vide.mount`.
+ * called once when mounting the app.
  */
 export declare function usePx(): void;

package/out/hooks/use-px.lua

@@ -1,15 +1,30 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
 local Workspace = TS.import(script, TS.getModule(script, "@rbxts", "services")).Workspace
-local debounce = TS.import(script, TS.getModule(script, "@rbxts", "set-timeout").out).debounce
 local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
 local cleanup = _vide.cleanup
 local source = _vide.source
-local useEvent = TS.import(script, script.Parent, "use-event").useEvent
 local BASE_RESOLUTION = Vector2.new(1280, 832)
-local MIN_SCALE = 0.75
+local MIN_SCALE = 0.5
 local DOMINANT_AXIS = 0.5
 local scale = source(1)
+--[[
+	*
+	 * Assigns a call signature to an object.
+	 *
+	 * @param callback The function to assign.
+	 * @param object The object to assign the function to.
+	 * @returns A callable object.
+	 
+]]
+local function callable(callback, object)
+	return setmetatable(object, {
+		__call = function(_, ...)
+			local args = { ... }
+			return callback(unpack(args))
+		end,
+	})
+end
 --[[
 	*
 	 * Rounds and scales a number to the current `px` unit. Includes additional
@@ -19,7 +34,9 @@ local scale = source(1)
 	 * @returns A number in scaled `px` units.
 	 
 ]]
-local px = setmetatable({
+local px = callable(function(value)
+	return math.round(value * scale())
+end, {
 	even = function(value)
 		return math.round(value * scale() * 0.5) * 2
 	end,
@@ -32,36 +49,27 @@ local px = setmetatable({
 	ceil = function(value)
 		return math.ceil(value * scale())
 	end,
-}, {
-	__call = function(_, value)
-		return math.round(value * scale())
-	end,
 })
 --[[
 	*
 	 * Scales the current `px` unit based on the current viewport size. Should be
-	 * called once in `Vide.mount`.
+	 * called once when mounting the app.
 	 
 ]]
 local function usePx()
 	local camera = Workspace.CurrentCamera
 	local _arg0 = camera ~= nil
 	assert(_arg0, "CurrentCamera is not set")
-	local updateScale = debounce(function()
-		local viewport = camera.ViewportSize
-		local width = math.log(viewport.X / BASE_RESOLUTION.X, 2)
-		local height = math.log(viewport.Y / BASE_RESOLUTION.Y, 2)
+	local updateScale = function()
+		local width = math.log(camera.ViewportSize.X / BASE_RESOLUTION.X, 2)
+		local height = math.log(camera.ViewportSize.Y / BASE_RESOLUTION.Y, 2)
 		local centered = width + (height - width) * DOMINANT_AXIS
 		scale(math.max(2 ^ centered, MIN_SCALE))
-	end, 0.2, {
-		leading = true,
-	})
-	cleanup(function()
-		updateScale.cancel()
-	end)
-	useEvent(camera:GetPropertyChangedSignal("ViewportSize"), function()
+	end
+	local connection = camera:GetPropertyChangedSignal("ViewportSize"):Connect(function()
 		updateScale()
 	end)
+	cleanup(connection)
 	updateScale()
 end
 return {

package/out/hooks/use-text-bounds.d.ts

@@ -0,0 +1,9 @@
+import { Derivable } from "@rbxts/vide";
+interface TextBoundsProps {
+    text: Derivable<string | undefined>;
+    font?: Derivable<Font>;
+    size?: Derivable<number>;
+    width?: Derivable<number>;
+}
+export declare function useTextBounds({ text, font, size, width }: TextBoundsProps): () => Vector2;
+export {};

package/out/hooks/use-text-bounds.lua

@@ -0,0 +1,39 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local TextService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TextService
+local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local cleanup = _vide.cleanup
+local derive = _vide.derive
+local read = _vide.read
+local function useTextBounds(_param)
+	local text = _param.text
+	local font = _param.font
+	local size = _param.size
+	local width = _param.width
+	local params = Instance.new("GetTextBoundsParams")
+	params.RichText = true
+	cleanup(params)
+	return derive(function()
+		local textValue = read(text)
+		if textValue == nil then
+			return Vector2.zero
+		end
+		params.Text = textValue
+		local fontValue = read(font)
+		local sizeValue = read(size)
+		local widthValue = read(width)
+		if fontValue ~= nil then
+			params.Font = fontValue
+		end
+		if sizeValue ~= nil then
+			params.Size = sizeValue
+		end
+		if widthValue ~= nil then
+			params.Width = widthValue
+		end
+		return TextService:GetTextBoundsAsync(params)
+	end)
+end
+return {
+	useTextBounds = useTextBounds,
+}

package/out/types.d.ts

@@ -2,9 +2,9 @@ import { CommandShortcut, HistoryEntry } from "@rbxts/centurion";
 import { ScaleFunction } from "./hooks/use-px";
 import { InterfacePalette } from "./palette";
 export interface InterfaceOptions {
-    anchorPoint: Vector2;
-    size: UDim2 | ((px: ScaleFunction) => UDim2);
+    anchor: Vector2;
     position: UDim2 | ((px: ScaleFunction) => UDim2);
+    size: UDim2 | ((px: ScaleFunction) => UDim2);
     displayOrder: number;
     backgroundTransparency: number;
     hideOnLostFocus: boolean;
@@ -15,6 +15,7 @@ export interface InterfaceOptions {
         bold: Font;
     };
     palette: InterfacePalette;
+    autoLocalize: boolean;
 }
 export interface HistoryLineData {
     entry: HistoryEntry;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rbxts/centurion-ui",
   "description": "Terminal UI for the Centurion command framework",
-  "version": "1.0.0-dev-9b382c9",
+  "version": "1.0.0-dev-d64d6ec",
   "author": "paradoxuum",
   "license": "MIT",
   "main": "out/init.lua",
@@ -32,7 +32,7 @@
     "dev": "shx rm -rf out && rbxtsc -w"
   },
   "devDependencies": {
-    "@rbxts/centurion": "^1.0.0-dev-9b382c9",
+    "@rbxts/centurion": "^1.0.0-dev-d64d6ec",
     "@rbxts/compiler-types": "2.3.0-types.1",
     "@rbxts/types": "^1.0.794",
     "roblox-ts": "2.3.0-dev-26ec859",