@rbxts/centurion-ui 1.0.0-dev-284510d → 1.0.0-dev-a7b777e

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

@@ -1,179 +1,189 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
-local lerpBinding = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).lerpBinding
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local useContext = _react.useContext
-local useEffect = _react.useEffect
+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 _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 usePx = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").usePx
-local OptionsContext = TS.import(script, script.Parent.Parent.Parent, "providers", "options-provider").OptionsContext
+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
+local mouseOverInterface = _store.mouseOverInterface
 local Frame = TS.import(script, script.Parent.Parent, "ui", "frame").Frame
 local Padding = TS.import(script, script.Parent.Parent, "ui", "padding").Padding
-local ShortcutGroup = TS.import(script, script.Parent.Parent, "ui", "shortcut-group").ShortcutGroup
 local Text = TS.import(script, script.Parent.Parent, "ui", "text").Text
 local Badge = TS.import(script, script.Parent, "badge").Badge
 local highlightMatching = TS.import(script, script.Parent, "util").highlightMatching
-local function showKeybindsGui(props)
-	if props.suggestion and props.suggestion.main.type == "command" and (props.suggestion.main).shortcuts ~= nil and props.options.showShortcutSuggestions then
-		return true
-	end
-end
 local function MainSuggestion(_param)
 	local suggestion = _param.suggestion
 	local currentText = _param.currentText
 	local size = _param.size
 	local sizes = _param.sizes
-	local argument = _param.argument
-	local px = usePx()
-	local options = useContext(OptionsContext)
+	local options = useAtom(interfaceOptions)
 	local titleHeight, titleHeightMotion = useMotion(0)
 	local badgeWidth, badgeWidthMotion = useMotion(0)
-	useEffect(function()
-		local _result = suggestion
+	effect(function()
+		local _result = read(suggestion)
 		if _result ~= nil then
-			_result = _result.main.description
+			_result = _result.description
 		end
 		titleHeightMotion:spring(if _result ~= nil then 1 else 0, springs.responsive)
-	end, { suggestion })
-	local _exp = React.createElement(Padding, {
-		all = UDim.new(0, px(8)),
-	})
-	local _exp_1 = React.createElement(Badge, {
+	end)
+	return Vide.jsx(Frame, {
+		size = size,
+		backgroundColor = function()
+			return options().palette.background
+		end,
+		backgroundTransparency = function()
+			local _condition = options().backgroundTransparency
+			if _condition == nil then
+				_condition = 0
+			end
+			return _condition
+		end,
+		cornerRadius = function()
+			return UDim.new(0, px(8))
+		end,
+		clipsDescendants = false,
+		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 = badgeWidth:map(function(width)
-			return UDim2.fromOffset(math.round(width), px(24))
-		end),
+		size = function()
+			return UDim2.fromOffset(badgeWidth(), px(24))
+		end,
 		position = UDim2.fromScale(1, 0),
-		color = options.palette.highlight,
-		text = if argument and suggestion ~= nil then (suggestion.main).dataType else "",
-		textColor = options.palette.surface,
-		textSize = px(SUGGESTION_TEXT_SIZE),
-		visible = argument,
+		color = function()
+			return options().palette.highlight
+		end,
+		text = function()
+			local currentSuggestion = read(suggestion)
+			return if currentSuggestion ~= nil and currentSuggestion.type == "argument" then currentSuggestion.dataType else ""
+		end,
+		textColor = function()
+			return options().palette.surface
+		end,
+		textSize = function()
+			return px(SUGGESTION_TEXT_SIZE)
+		end,
+		visible = function()
+			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,
-	})
-	local _result
-	if showKeybindsGui({
-		options = options,
-		suggestion = suggestion,
-	}) then
-		local _attributes = {}
-		local _result_1 = suggestion
-		if _result_1 ~= nil then
-			_result_1 = _result_1.main.type
-		end
-		local _result_2
-		if _result_1 == "command" then
-			local _result_3 = suggestion
-			if _result_3 ~= nil then
-				_result_3 = _result_3.main
+	}), 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
+			if _result ~= nil then
+				_result = _result.type
 			end
-			_result_2 = _result_3.shortcuts
-		else
-			_result_2 = {}
-		end
-		_attributes.shortcuts = _result_2
-		_result = (React.createElement(ShortcutGroup, _attributes))
-	else
-		_result = (React.createElement(React.Fragment))
-	end
-	local _attributes = {
-		size = sizes:map(function(val)
-			return val.title
-		end),
-		position = lerpBinding(titleHeight, UDim2.fromOffset(0, 0), UDim2.fromOffset(0, px(-4))),
-	}
-	local _result_1
-	if argument then
-		local _result_2 = suggestion
-		if _result_2 ~= nil then
-			_result_2 = _result_2.main.title
-		end
-		_result_1 = _result_2
-	else
-		local _exp_2 = options.palette.highlight
-		local _result_2 = suggestion
-		if _result_2 ~= nil then
-			_result_2 = _result_2.main.title
-		end
-		_result_1 = highlightMatching(_exp_2, _result_2, currentText)
-	end
-	_attributes.text = _result_1
-	_attributes.textSize = px(SUGGESTION_TITLE_TEXT_SIZE)
-	_attributes.textColor = options.palette.text
-	_attributes.textXAlignment = "Left"
-	_attributes.textYAlignment = "Top"
-	_attributes.richText = true
-	_attributes.font = options.font.bold
-	local _exp_2 = React.createElement(Text, _attributes)
-	local _attributes_1 = {
-		size = sizes:map(function(val)
-			return val.description
-		end),
-		position = UDim2.fromOffset(0, px(SUGGESTION_TITLE_TEXT_SIZE)),
-	}
-	local _result_2 = suggestion
-	if _result_2 ~= nil then
-		_result_2 = _result_2.main.description
-	end
-	local _condition = _result_2
-	if _condition == nil then
-		_condition = ""
-	end
-	_attributes_1.text = _condition
-	_attributes_1.textSize = px(SUGGESTION_TEXT_SIZE)
-	_attributes_1.textColor = options.palette.subtext
-	_attributes_1.textXAlignment = "Left"
-	_attributes_1.textYAlignment = "Top"
-	_attributes_1.textWrapped = true
-	_attributes_1.richText = true
-	local _exp_3 = React.createElement(Text, _attributes_1)
-	local _attributes_2 = {
+			local _result_1
+			if _result == "argument" then
+				_result_1 = currentSuggestion.title
+			else
+				local _exp = options().palette.highlight
+				local _result_2 = currentSuggestion
+				if _result_2 ~= nil then
+					_result_2 = _result_2.title
+				end
+				_result_1 = highlightMatching(_exp, _result_2, read(currentText))
+			end
+			return _result_1
+		end,
+		textSize = function()
+			return px(SUGGESTION_TITLE_TEXT_SIZE)
+		end,
+		textColor = function()
+			return options().palette.text
+		end,
+		textXAlignment = "Left",
+		textYAlignment = "Top",
+		richText = true,
+		font = function()
+			return options().font.bold
+		end,
+	}), 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
+				_result = _result.description
+			end
+			local _condition = _result
+			if _condition == nil then
+				_condition = ""
+			end
+			return _condition
+		end,
+		textSize = function()
+			return px(SUGGESTION_TEXT_SIZE)
+		end,
+		textColor = function()
+			return options().palette.subtext
+		end,
+		textXAlignment = "Left",
+		textYAlignment = "Top",
+		textWrapped = true,
+		richText = true,
+	}), Vide.jsx(Text, {
 		anchorPoint = Vector2.new(0, 1),
-		size = sizes:map(function(val)
-			return UDim2.new(1, 0, 0, val.errorTextHeight)
-		end),
+		size = function()
+			return UDim2.new(1, 0, 0, read(sizes).errorTextHeight)
+		end,
 		position = UDim2.fromScale(0, 1),
-	}
-	local _result_3
-	if argument and suggestion ~= nil then
-		local _condition_1 = (suggestion.main).error
-		if _condition_1 == nil then
-			_condition_1 = ""
-		end
-		_result_3 = _condition_1
-	else
-		_result_3 = ""
-	end
-	_attributes_2.text = _result_3
-	_attributes_2.textColor = options.palette.error
-	_attributes_2.textSize = px(SUGGESTION_TEXT_SIZE)
-	_attributes_2.textWrapped = true
-	_attributes_2.textXAlignment = "Left"
-	return React.createElement(Frame, {
-		size = size,
-		backgroundColor = options.palette.background,
-		backgroundTransparency = options.backgroundTransparency,
-		cornerRadius = UDim.new(0, px(8)),
-		clipsDescendants = false,
-		event = {
-			MouseEnter = function()
-				return options.setMouseOnGUI(true)
-			end,
-			MouseLeave = function()
-				return options.setMouseOnGUI(false)
-			end,
-		},
-	}, _exp, _exp_1, _result, _exp_2, _exp_3, React.createElement(Text, _attributes_2))
+		text = function()
+			local currentSuggestion = read(suggestion)
+			local _result
+			if currentSuggestion ~= nil and currentSuggestion.type == "argument" then
+				local _condition = currentSuggestion.error
+				if _condition == nil then
+					_condition = ""
+				end
+				_result = _condition
+			else
+				_result = ""
+			end
+			return _result
+		end,
+		textColor = function()
+			return options().palette.error
+		end,
+		textSize = function()
+			return px(SUGGESTION_TEXT_SIZE)
+		end,
+		textWrapped = true,
+		textXAlignment = "Left",
+	}))
 end
 return {
 	MainSuggestion = MainSuggestion,

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

@@ -1,8 +1,8 @@
-import { BindingOrValue } from "@rbxts/pretty-react-hooks";
+import Vide, { Derivable } from "@rbxts/vide";
 import { Suggestion } from "../../types";
 export interface SuggestionListProps {
-    suggestion?: Suggestion;
-    currentText?: string;
-    size: BindingOrValue<UDim2>;
+    suggestion?: Derivable<Suggestion | undefined>;
+    currentText?: Derivable<string | undefined>;
+    size: Derivable<UDim2>;
 }
-export declare function SuggestionList({ suggestion, currentText, size, }: SuggestionListProps): JSX.Element;
+export declare function SuggestionList({ suggestion, currentText, size, }: SuggestionListProps): Vide.Node;

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

@@ -1,11 +1,15 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local useContext = _react.useContext
+local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local Vide = _vide
+local For = _vide.For
+local read = _vide.read
 local SUGGESTION_TEXT_SIZE = TS.import(script, script.Parent.Parent.Parent, "constants", "text").SUGGESTION_TEXT_SIZE
-local usePx = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").usePx
-local OptionsContext = TS.import(script, script.Parent.Parent.Parent, "providers", "options-provider").OptionsContext
+local useAtom = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-atom").useAtom
+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
+local mouseOverInterface = _store.mouseOverInterface
 local Frame = TS.import(script, script.Parent.Parent, "ui", "frame").Frame
 local Group = TS.import(script, script.Parent.Parent, "ui", "group").Group
 local Padding = TS.import(script, script.Parent.Parent, "ui", "padding").Padding
@@ -15,55 +19,72 @@ local function SuggestionList(_param)
 	local suggestion = _param.suggestion
 	local currentText = _param.currentText
 	local size = _param.size
-	local px = usePx()
-	local options = useContext(OptionsContext)
-	local _exp = React.createElement("uilistlayout", {
+	local options = useAtom(interfaceOptions)
+	return Vide.jsx(Group, {
+		size = size,
+		mouseEnter = function()
+			return mouseOverInterface(true)
+		end,
+		mouseLeave = function()
+			return mouseOverInterface(false)
+		end,
+	}, Vide.jsx("uilistlayout", {
 		SortOrder = "LayoutOrder",
-		Padding = UDim.new(0, px(8)),
-	})
-	local _result = suggestion
-	if _result ~= nil then
-		_result = _result.others
-		if _result ~= nil then
-			-- ▼ ReadonlyArray.map ▼
-			local _newValue = table.create(#_result)
-			local _callback = function(name, i)
-				return React.createElement(Frame, {
-					key = `{i}-{name}`,
-					size = UDim2.new(1, 0, 0, px(SUGGESTION_TEXT_SIZE + 6)),
-					backgroundColor = options.palette.background,
-					backgroundTransparency = options.backgroundTransparency,
-					cornerRadius = UDim.new(0, px(8)),
-					clipsDescendants = true,
-				}, React.createElement(Padding, {
-					all = UDim.new(0, px(4)),
-				}), React.createElement(Text, {
-					size = UDim2.new(1, 0, 1, 0),
-					text = highlightMatching(options.palette.highlight, name, currentText),
-					textColor = options.palette.text,
-					textSize = px(SUGGESTION_TEXT_SIZE),
-					textXAlignment = "Left",
-					richText = true,
-				}))
+		Padding = function()
+			return UDim.new(0, px(8))
+		end,
+	}), Vide.jsx(For, {
+		each = function()
+			local _result = read(suggestion)
+			if _result ~= nil then
+				_result = _result.others
 			end
-			for _k, _v in _result do
-				_newValue[_k] = _callback(_v, _k - 1, _result)
+			local _condition = _result
+			if _condition == nil then
+				_condition = {}
 			end
-			-- ▲ ReadonlyArray.map ▲
-			_result = _newValue
-		end
-	end
-	return React.createElement(Group, {
-		size = size,
-		event = {
-			MouseEnter = function()
-				return options.setMouseOnGUI(true)
+			return _condition
+		end,
+	}, function(name, i)
+		return Vide.jsx(Frame, {
+			size = function()
+				return UDim2.new(1, 0, 0, px(SUGGESTION_TEXT_SIZE + 6))
+			end,
+			backgroundColor = function()
+				return options().palette.background
+			end,
+			backgroundTransparency = function()
+				local _condition = options().backgroundTransparency
+				if _condition == nil then
+					_condition = 0
+				end
+				return _condition
+			end,
+			cornerRadius = function()
+				return UDim.new(0, px(8))
+			end,
+			clipsDescendants = true,
+		}, Vide.jsx(Padding, {
+			all = function()
+				return UDim.new(0, px(4))
+			end,
+		}), Vide.jsx(Text, {
+			size = function()
+				return UDim2.new(1, 0, 1, 0)
+			end,
+			text = function()
+				return highlightMatching(options().palette.highlight, name, read(currentText))
+			end,
+			textColor = function()
+				return options().palette.text
 			end,
-			MouseLeave = function()
-				return options.setMouseOnGUI(false)
+			textSize = function()
+				return px(SUGGESTION_TEXT_SIZE)
 			end,
-		},
-	}, _exp, _result)
+			textXAlignment = "Left",
+			richText = true,
+		}))
+	end))
 end
 return {
 	SuggestionList = SuggestionList,

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

@@ -1 +1,2 @@
-export declare function Suggestions(): JSX.Element;
+import Vide from "@rbxts/vide";
+export declare function Suggestions(): Vide.Node;

package/out/components/suggestions/suggestions.lua

@@ -1,22 +1,22 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local useBinding = _react.useBinding
-local useContext = _react.useContext
-local useEffect = _react.useEffect
-local useMemo = _react.useMemo
-local useSelector = TS.import(script, TS.getModule(script, "@rbxts", "react-reflex")).useSelector
 local TextService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TextService
+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 _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 usePx = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").usePx
-local OptionsContext = TS.import(script, script.Parent.Parent.Parent, "providers", "options-provider").OptionsContext
-local selectSuggestion = TS.import(script, script.Parent.Parent.Parent, "store", "suggestion").selectSuggestion
-local selectText = TS.import(script, script.Parent.Parent.Parent, "store", "text").selectText
+local px = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").px
+local _store = TS.import(script, script.Parent.Parent.Parent, "store")
+local currentSuggestion = _store.currentSuggestion
+local currentTextPart = _store.currentTextPart
+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
@@ -25,21 +25,16 @@ local MAX_SUGGESTION_WIDTH = 180
 local MAX_BADGE_WIDTH = 80
 local PADDING = 8
 local function Suggestions()
-	local options = useContext(OptionsContext)
-	local px = usePx()
-	local terminalText = useSelector(selectText)
-	local currentTextPart = useMemo(function()
-		if terminalText.index == -1 or terminalText.index >= #terminalText.parts then
-			return nil
-		end
-		return terminalText.parts[terminalText.index + 1]
-	end, { terminalText })
-	local textBoundsParams = useMemo(function()
-		return Instance.new("GetTextBoundsParams")
-	end, {})
+	local options = useAtom(interfaceOptions)
+	local textPart = useAtom(currentTextPart)
+	local textBoundsParams = Instance.new("GetTextBoundsParams")
+	textBoundsParams.RichText = true
+	cleanup(function()
+		textBoundsParams:Destroy()
+	end)
 	-- Suggestions
-	local currentSuggestion = useSelector(selectSuggestion)
-	local sizes, setSizes = useBinding({
+	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,
@@ -48,19 +43,19 @@ local function Suggestions()
 	local suggestionSize, suggestionSizeMotion = useMotion(UDim2.new())
 	local otherSuggestionSize, otherSuggestionSizeMotion = useMotion(UDim2.new())
 	-- Resize window based on suggestions
-	useEffect(function()
-		if currentSuggestion == nil then
+	effect(function()
+		local current = suggestion()
+		if current == nil then
 			suggestionSizeMotion:spring(UDim2.new())
 			otherSuggestionSizeMotion:spring(UDim2.new())
 			return nil
 		end
-		local mainSuggestion = currentSuggestion.main
-		local otherSuggestions = currentSuggestion.others
+		local otherSuggestions = current.others
 		if #otherSuggestions == 0 then
 			otherSuggestionSizeMotion:spring(UDim2.new())
 		end
-		local textBounds = getSuggestionTextBounds(options, mainSuggestion, px(SUGGESTION_TITLE_TEXT_SIZE), px(SUGGESTION_TEXT_SIZE), px(MAX_SUGGESTION_WIDTH), px(MAX_BADGE_WIDTH))
-		setSizes(textBounds)
+		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
@@ -73,7 +68,7 @@ local function Suggestions()
 		local otherHeight = 0
 		if not (#otherSuggestions == 0) then
 			local maxSuggestionWidth = 0
-			textBoundsParams.Font = options.font.regular
+			textBoundsParams.Font = options().font.regular
 			textBoundsParams.Size = px(SUGGESTION_TEXT_SIZE)
 			textBoundsParams.Width = math.huge
 			for _, name in otherSuggestions do
@@ -88,28 +83,24 @@ local function Suggestions()
 			otherSuggestionSizeMotion:spring(UDim2.fromOffset(windowWidth, otherHeight), springs.gentle)
 		end
 		suggestionSizeMotion:spring(UDim2.fromOffset(windowWidth, windowHeight), springs.responsive)
-	end, { currentSuggestion, px })
-	local _attributes = {
-		suggestion = currentSuggestion,
-	}
-	local _result = currentSuggestion
-	if _result ~= nil then
-		_result = _result.main.type
-	end
-	_attributes.argument = _result == "argument"
-	_attributes.currentText = currentTextPart
-	_attributes.size = suggestionSize
-	_attributes.sizes = sizes
-	return React.createElement(Group, {
+	end)
+	return Vide.jsx(Group, {
 		size = UDim2.fromScale(1, 1),
 		visible = currentSuggestion ~= nil,
-	}, React.createElement(MainSuggestion, _attributes), React.createElement(SuggestionList, {
-		suggestion = currentSuggestion,
-		currentText = currentTextPart,
+	}, Vide.jsx(MainSuggestion, {
+		suggestion = suggestion,
+		currentText = textPart,
+		size = suggestionSize,
+		sizes = sizes,
+	}), Vide.jsx(SuggestionList, {
+		suggestion = suggestion,
+		currentText = textPart,
 		size = otherSuggestionSize,
-	}), React.createElement("uilistlayout", {
+	}), Vide.jsx("uilistlayout", {
 		SortOrder = "LayoutOrder",
-		Padding = UDim.new(0, px(PADDING)),
+		Padding = function()
+			return UDim.new(0, px(PADDING))
+		end,
 	}))
 end
 return {

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

@@ -1,4 +1,4 @@
-import { ArgumentSuggestion, CommandSuggestion, InterfaceOptions } from "../../types";
+import { InterfaceOptions, Suggestion } from "../../types";
 import { SuggestionTextBounds } from "./types";
 export declare function highlightMatching(color: Color3, text?: string, terminalText?: string): string;
-export declare function getSuggestionTextBounds(options: InterfaceOptions, suggestion: ArgumentSuggestion | CommandSuggestion, titleTextSize: number, textSize: number, maxWidth: number, maxBadgeWidth: number): SuggestionTextBounds;
+export declare function getSuggestionTextBounds(options: InterfaceOptions, suggestion: Suggestion, titleTextSize: number, textSize: number, maxWidth: number, maxBadgeWidth: number): SuggestionTextBounds;

package/out/components/suggestions/util.lua

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local TextService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TextService
 local TEXT_BOUNDS_PARAMS = Instance.new("GetTextBoundsParams")
+TEXT_BOUNDS_PARAMS.RichText = true
 local DEFAULT_BOUNDS = Vector2.new()
 local prevColor
 local prevColorHex

package/out/components/terminal/index.d.ts

@@ -0,0 +1 @@
+export * from "./terminal";