fix: fix ui scaling

packages/ui/src/app/centurion-app.tsx

@@ -54,7 +54,10 @@ export function CenturionApp(api: ClientAPI) {
 				<Terminal />
 				<Suggestions />
 
-				<uilistlayout Padding={new UDim(0, px(8))} SortOrder={"LayoutOrder"} />
+				<uilistlayout
+					Padding={() => new UDim(0, px(8))}
+					SortOrder={"LayoutOrder"}
+				/>
 			</Group>
 		</Layer>
 	);

packages/ui/src/components/history/history-line.tsx

@@ -33,8 +33,8 @@ export function HistoryLine({ data, size, position, order }: HistoryLineProps) {
 		<Group size={size} position={position} layoutOrder={order}>
 			<Frame
 				backgroundColor={() => options().palette.surface}
-				size={UDim2.fromOffset(px(76), px(HISTORY_TEXT_SIZE + 4))}
-				cornerRadius={new UDim(0, px(4))}
+				size={() => UDim2.fromOffset(px(76), px(HISTORY_TEXT_SIZE + 4))}
+				cornerRadius={() => new UDim(0, px(4))}
 			>
 				<Text
 					size={UDim2.fromScale(1, 1)}
@@ -53,7 +53,7 @@ export function HistoryLine({ data, size, position, order }: HistoryLineProps) {
 							: options().palette.error;
 					}}
 					outerThickness={0}
-					cornerRadius={new UDim(0, px(4))}
+					cornerRadius={() => new UDim(0, px(4))}
 				/>
 			</Frame>
 
@@ -62,7 +62,7 @@ export function HistoryLine({ data, size, position, order }: HistoryLineProps) {
 				size={() => new UDim2(1, -px(84), 1, 0)}
 				position={UDim2.fromScale(1, 0)}
 				text={data.text}
-				textSize={px(HISTORY_TEXT_SIZE)}
+				textSize={() => px(HISTORY_TEXT_SIZE)}
 				textColor={() => {
 					const palette = options().palette;
 					return data.success ? palette.text : palette.error;

packages/ui/src/components/history/history-list.tsx

@@ -10,7 +10,7 @@ interface HistoryListProps {
 	data: Derivable<HistoryData>;
 	size?: Derivable<UDim2>;
 	position?: Derivable<UDim2>;
-	maxHeight?: number;
+	maxHeight?: Derivable<number>;
 	scrollingEnabled?: Derivable<boolean>;
 }
 
@@ -30,8 +30,7 @@ export function HistoryList({
 		const height = read(data).height - px(8);
 		canvasSize(new UDim2(0, 0, 0, height));
 		canvasPos(new Vector2(0, height));
-
-		if (maxHeight !== undefined) scrollingEnabled(height > maxHeight);
+		if (maxHeight !== undefined) scrollingEnabled(height > read(maxHeight));
 	});
 
 	return (
@@ -56,7 +55,10 @@ export function HistoryList({
 				}}
 			</For>
 
-			<uilistlayout Padding={new UDim(0, px(8))} SortOrder="LayoutOrder" />
+			<uilistlayout
+				Padding={() => new UDim(0, px(8))}
+				SortOrder="LayoutOrder"
+			/>
 		</ScrollingFrame>
 	);
 }

packages/ui/src/components/suggestions/badge.tsx

@@ -40,7 +40,7 @@ export function Badge({
 			size={size}
 			position={position}
 			backgroundColor={color}
-			cornerRadius={new UDim(0, px(4))}
+			cornerRadius={() => new UDim(0, px(4))}
 			visible={visible}
 			clipsDescendants
 			backgroundTransparency={backgroundTransparency}

packages/ui/src/components/suggestions/main-suggestion.tsx

@@ -46,12 +46,12 @@ export function MainSuggestion({
 			size={size}
 			backgroundColor={() => options().palette.background}
 			backgroundTransparency={() => options().backgroundTransparency ?? 0}
-			cornerRadius={new UDim(0, px(8))}
+			cornerRadius={() => new UDim(0, px(8))}
 			clipsDescendants={false}
 			mouseEnter={() => mouseOverInterface(true)}
 			mouseLeave={() => mouseOverInterface(false)}
 		>
-			<Padding all={new UDim(0, px(8))} />
+			<Padding all={() => new UDim(0, px(8))} />
 
 			<Badge
 				anchorPoint={new Vector2(1, 0)}
@@ -68,7 +68,7 @@ export function MainSuggestion({
 						: "";
 				}}
 				textColor={() => options().palette.surface}
-				textSize={px(SUGGESTION_TEXT_SIZE)}
+				textSize={() => px(SUGGESTION_TEXT_SIZE)}
 				visible={() => {
 					const currentSuggestion = read(suggestion);
 					return (
@@ -102,7 +102,7 @@ export function MainSuggestion({
 								read(currentText),
 							);
 				}}
-				textSize={px(SUGGESTION_TITLE_TEXT_SIZE)}
+				textSize={() => px(SUGGESTION_TITLE_TEXT_SIZE)}
 				textColor={() => options().palette.text}
 				textXAlignment="Left"
 				textYAlignment="Top"
@@ -112,9 +112,9 @@ export function MainSuggestion({
 
 			<Text
 				size={() => read(sizes).description}
-				position={UDim2.fromOffset(0, px(SUGGESTION_TITLE_TEXT_SIZE))}
+				position={() => UDim2.fromOffset(0, px(SUGGESTION_TITLE_TEXT_SIZE))}
 				text={() => read(suggestion)?.description ?? ""}
-				textSize={px(SUGGESTION_TEXT_SIZE)}
+				textSize={() => px(SUGGESTION_TEXT_SIZE)}
 				textColor={() => options().palette.subtext}
 				textXAlignment="Left"
 				textYAlignment="Top"
@@ -134,7 +134,7 @@ export function MainSuggestion({
 						: "";
 				}}
 				textColor={() => options().palette.error}
-				textSize={px(SUGGESTION_TEXT_SIZE)}
+				textSize={() => px(SUGGESTION_TEXT_SIZE)}
 				textWrapped={true}
 				textXAlignment="Left"
 			/>

packages/ui/src/components/suggestions/suggestion-list.tsx

@@ -29,24 +29,27 @@ export function SuggestionList({
 			mouseEnter={() => mouseOverInterface(true)}
 			mouseLeave={() => mouseOverInterface(false)}
 		>
-			<uilistlayout SortOrder="LayoutOrder" Padding={new UDim(0, px(8))} />
+			<uilistlayout
+				SortOrder="LayoutOrder"
+				Padding={() => new UDim(0, px(8))}
+			/>
 
 			<For each={() => read(suggestion)?.others ?? []}>
 				{(name: string, i: () => number) => {
 					return (
 						<Frame
-							size={new UDim2(1, 0, 0, px(SUGGESTION_TEXT_SIZE + 6))}
+							size={() => new UDim2(1, 0, 0, px(SUGGESTION_TEXT_SIZE + 6))}
 							backgroundColor={() => options().palette.background}
 							backgroundTransparency={() =>
 								options().backgroundTransparency ?? 0
 							}
-							cornerRadius={new UDim(0, px(8))}
+							cornerRadius={() => new UDim(0, px(8))}
 							clipsDescendants={true}
 						>
-							<Padding all={new UDim(0, px(4))} />
+							<Padding all={() => new UDim(0, px(4))} />
 
 							<Text
-								size={new UDim2(1, 0, 1, 0)}
+								size={() => new UDim2(1, 0, 1, 0)}
 								text={() =>
 									highlightMatching(
 										options().palette.highlight,
@@ -55,7 +58,7 @@ export function SuggestionList({
 									)
 								}
 								textColor={() => options().palette.text}
-								textSize={px(SUGGESTION_TEXT_SIZE)}
+								textSize={() => px(SUGGESTION_TEXT_SIZE)}
 								textXAlignment="Left"
 								richText={true}
 							/>

packages/ui/src/components/suggestions/suggestions.tsx

@@ -144,7 +144,7 @@ export function Suggestions() {
 
 			<uilistlayout
 				SortOrder="LayoutOrder"
-				Padding={new UDim(0, px(PADDING))}
+				Padding={() => new UDim(0, px(PADDING))}
 			/>
 		</Group>
 	);

packages/ui/src/components/terminal/terminal-text-field.tsx

@@ -227,9 +227,9 @@ export function TerminalTextField({
 			position={position}
 			backgroundColor={() => options().palette.surface}
 			backgroundTransparency={backgroundTransparency}
-			cornerRadius={new UDim(0, px(4))}
+			cornerRadius={() => new UDim(0, px(4))}
 		>
-			<Padding all={new UDim(0, px(8))} />
+			<Padding all={() => new UDim(0, px(8))} />
 
 			<TextField
 				action={(instance) => ref(instance)}
@@ -250,7 +250,7 @@ export function TerminalTextField({
 					onTextChange?.(value);
 					return value;
 				}}
-				textSize={px(TEXT_SIZE)}
+				textSize={() => px(TEXT_SIZE)}
 				textColor={() => {
 					return valid() ? options().palette.success : options().palette.error;
 				}}
@@ -291,7 +291,7 @@ export function TerminalTextField({
 				size={UDim2.fromScale(1, 1)}
 				text={suggestionText}
 				textColor={() => options().palette.subtext}
-				textSize={px(TEXT_SIZE)}
+				textSize={() => px(TEXT_SIZE)}
 				textXAlignment="Left"
 				font={() => options().font.medium}
 			/>

packages/ui/src/components/terminal/terminal.tsx

@@ -65,21 +65,21 @@ export function Terminal() {
 			}}
 			backgroundColor={() => options().palette.background}
 			backgroundTransparency={() => options().backgroundTransparency ?? 0}
-			cornerRadius={new UDim(0, px(8))}
+			cornerRadius={() => new UDim(0, px(8))}
 			mouseEnter={() => mouseOverInterface(true)}
 			mouseLeave={() => mouseOverInterface(false)}
 		>
-			<Padding all={new UDim(0, px(8))} />
+			<Padding all={() => new UDim(0, px(8))} />
 
 			<HistoryList
-				size={new UDim2(1, 0, 1, -px(TEXT_FIELD_HEIGHT + 8))}
+				size={() => new UDim2(1, 0, 1, -px(TEXT_FIELD_HEIGHT + 8))}
 				data={history}
-				maxHeight={px(MAX_HEIGHT)}
+				maxHeight={() => px(MAX_HEIGHT)}
 			/>
 
 			<TerminalTextField
 				anchorPoint={new Vector2(0, 1)}
-				size={new UDim2(1, 0, 0, px(TEXT_FIELD_HEIGHT))}
+				size={() => new UDim2(1, 0, 0, px(TEXT_FIELD_HEIGHT))}
 				position={UDim2.fromScale(0, 1)}
 				backgroundTransparency={() => options().backgroundTransparency ?? 0}
 				onTextChange={(text) => {

packages/ui/src/components/ui/outline.tsx

@@ -42,14 +42,15 @@ export function Outline({
 	cornerRadius,
 	children,
 }: OutlineProps) {
-	const properties = {
+	const properties = derive(() => ({
 		innerThickness: innerThickness ?? px(3),
 		outerThickness: outerThickness ?? px(1.5),
 		cornerRadius: cornerRadius ?? new UDim(0, px(8)),
-	};
+	}));
 
 	const innerStyle = derive(() => {
-		const thickness = read(properties.innerThickness);
+		const outlineProps = properties();
+		const thickness = read(outlineProps.innerThickness);
 		const size = new UDim2(
 			1,
 			ceilEven(-2 * thickness),
@@ -58,7 +59,7 @@ export function Outline({
 		);
 
 		const position = new UDim2(0, thickness, 0, thickness);
-		const radius = read(properties.cornerRadius).sub(new UDim(0, thickness));
+		const radius = read(outlineProps.cornerRadius).sub(new UDim(0, thickness));
 		const transparency = math.clamp(
 			blend(read(outlineTransparency), read(innerTransparency)),
 			0,

packages/ui/src/components/ui/text.tsx

@@ -31,7 +31,7 @@ export function Text(props: TextProps) {
 			FontFace={() => read(props.font) ?? options().font.regular}
 			Text={props.text}
 			TextColor3={props.textColor}
-			TextSize={props.textSize ?? px(16)}
+			TextSize={() => read(props.textSize) ?? px(16)}
 			TextTransparency={props.textTransparency}
 			TextWrapped={props.textWrapped}
 			TextXAlignment={props.textXAlignment}

packages/ui/src/hooks/use-debounce-source.ts

@@ -0,0 +1,26 @@
+import { DebounceOptions, debounce } from "@rbxts/set-timeout";
+import { cleanup, source } from "@rbxts/vide";
+
+export interface UseDebounceOptions extends DebounceOptions {
+	/**
+	 * The amount of time to wait before the first call.
+	 */
+	wait?: number;
+}
+
+export function useDebounceSource<T>(
+	initialValue: T,
+	options: UseDebounceOptions = {},
+) {
+	const state = source(initialValue);
+	const update = debounce(state, options.wait, options);
+
+	cleanup(() => {
+		update.cancel();
+	});
+
+	return {
+		get: () => state(),
+		set: (value: T) => update(value),
+	};
+}