paradoxuum · flowers3176 · Nov 14, 2024
diff --git a/packages/ui/src/app/centurion-app.tsx b/packages/ui/src/app/centurion-app.tsx
@@ -1,6 +1,7 @@
 import { CenturionClient } from "@rbxts/centurion";
 import { UserInputService } from "@rbxts/services";
 import Vide, { derive } from "@rbxts/vide";
+import { read } from "@rbxts/vide";
 import { Suggestions, Terminal } from "../components";
 import { Group } from "../components/ui/group";
 import { Layer } from "../components/ui/layer";
@@ -19,13 +20,13 @@ export function CenturionApp(client: CenturionClient) {
 	useClient(client);
 	usePx();
 
-	const validKeys = derive(() => new Set(options().activationKeys));
+	const validKeys = derive(() => new Set(read(options().activationKeys)));
 
 	useEvent(UserInputService.InputBegan, (input, gameProcessed) => {
 		if (validKeys().has(input.KeyCode) && !gameProcessed) {
 			visible(!visible());
 		} else if (
-			options().hideOnLostFocus &&
+			read(options().hideOnLostFocus) &&
 			MOUSE_INPUT_TYPES.has(input.UserInputType) &&
 			!mouseOverInterface()
 		) {
@@ -36,19 +37,13 @@ export function CenturionApp(client: CenturionClient) {
 	return (
 		<Layer
 			name="Centurion"
-			displayOrder={() => options().displayOrder}
+			displayOrder={() => read(options().displayOrder)}
 			visible={visible}
 		>
 			<Group
-				anchor={() => options().anchor}
-				size={() => {
-					const size = options().size;
-					return typeIs(size, "UDim2") ? size : size(px);
-				}}
-				position={() => {
-					const position = options().position;
-					return typeIs(position, "UDim2") ? position : position(px);
-				}}
+				anchor={() => read(options().anchor)}
+				size={() => read(options().size)}
+				position={() => read(options().position)}
 			>
 				<Terminal />
 				<Suggestions />

diff --git a/packages/ui/src/app/index.ts b/packages/ui/src/app/index.ts
@@ -1,7 +1,7 @@
 import { CenturionClient, CenturionType } from "@rbxts/centurion";
 import { ClientRegistry } from "@rbxts/centurion/out/client/registry";
 import { ContentProvider, Players } from "@rbxts/services";
-import { mount } from "@rbxts/vide";
+import { mount, read } from "@rbxts/vide";
 import { DEFAULT_INTERFACE_OPTIONS } from "../constants/options";
 import { DefaultPalette } from "../palette";
 import { options as uiOptions, visible as uiVisible } from "../store";
@@ -64,7 +64,8 @@ export namespace CenturionUI {
 		// Attempt to preload font
 		task.spawn(() => {
 			const fontFamily = (
-				options.font?.regular ?? DEFAULT_INTERFACE_OPTIONS.font.regular
+				read(options.font)?.regular ??
+				read(DEFAULT_INTERFACE_OPTIONS.font).regular
 			).Family;
 
 			let attempts = 0;

diff --git a/packages/ui/src/components/history/history-line.tsx b/packages/ui/src/components/history/history-line.tsx
@@ -1,5 +1,5 @@
 import { HistoryEntry } from "@rbxts/centurion";
-import Vide, { Derivable, derive } from "@rbxts/vide";
+import Vide, { Derivable, derive, read } from "@rbxts/vide";
 import { HISTORY_TEXT_SIZE } from "../../constants/text";
 import { px } from "../../hooks/use-px";
 import { options } from "../../store";
@@ -29,14 +29,14 @@ export function HistoryLine({ data, size, position, order }: HistoryLineProps) {
 	return (
 		<Group size={size} position={position} layoutOrder={order}>
 			<Frame
-				backgroundColor={() => options().palette.surface}
+				backgroundColor={() => read(options().palette).surface}
 				size={() => UDim2.fromOffset(px(76), px(HISTORY_TEXT_SIZE + 4))}
 				cornerRadius={() => new UDim(0, px(4))}
 			>
 				<Text
 					size={UDim2.fromScale(1, 1)}
 					text={date}
-					textColor={() => options().palette.text}
+					textColor={() => read(options().palette).text}
 					textSize={() => px(HISTORY_TEXT_SIZE)}
 					richText={true}
 				/>
@@ -46,8 +46,8 @@ export function HistoryLine({ data, size, position, order }: HistoryLineProps) {
 					innerTransparency={0.25}
 					innerColor={() => {
 						return data.success
-							? options().palette.success
-							: options().palette.error;
+							? read(options().palette).success
+							: read(options().palette).error;
 					}}
 					outerThickness={0}
 					cornerRadius={() => new UDim(0, px(4))}
@@ -61,13 +61,13 @@ export function HistoryLine({ data, size, position, order }: HistoryLineProps) {
 				text={data.text}
 				textSize={() => px(HISTORY_TEXT_SIZE)}
 				textColor={() => {
-					const palette = options().palette;
+					const palette = read(options().palette);
 					return data.success ? palette.text : palette.error;
 				}}
 				textEditable={false}
 				textXAlignment="Left"
 				clearTextOnFocus={false}
-				font={() => options().font.medium}
+				font={() => read(options().font).medium}
 				richText
 			/>
 		</Group>

diff --git a/packages/ui/src/components/history/history-list.tsx b/packages/ui/src/components/history/history-list.tsx
@@ -30,7 +30,7 @@ export function HistoryList({
 			position={position}
 			canvasSize={() => UDim2.fromOffset(0, height())}
 			canvasPosition={() => new Vector2(0, height())}
-			scrollBarColor={() => options().palette.subtext}
+			scrollBarColor={() => read(options().palette).subtext}
 			scrollBarThickness={() => (exceedsMaxHeight() ? 10 : 0)}
 			scrollingEnabled={() => exceedsMaxHeight()}
 		>

diff --git a/packages/ui/src/components/suggestions/badge.tsx b/packages/ui/src/components/suggestions/badge.tsx
@@ -1,4 +1,4 @@
-import Vide, { Derivable, InstanceAttributes } from "@rbxts/vide";
+import Vide, { Derivable, InstanceAttributes, read } from "@rbxts/vide";
 import { px } from "../../hooks/use-px";
 import { options } from "../../store";
 import { Frame } from "../ui/frame";
@@ -36,7 +36,7 @@ export function Badge(props: BadgeProps) {
 				textSize={props.textSize}
 				textXAlignment="Center"
 				size={UDim2.fromScale(1, 1)}
-				font={() => options().font.bold}
+				font={() => read(options().font).bold}
 				{...props.native}
 			>
 				{props.children}

diff --git a/packages/ui/src/components/suggestions/main-suggestion.tsx b/packages/ui/src/components/suggestions/main-suggestion.tsx
@@ -37,8 +37,8 @@ export function MainSuggestion({
 		<Frame
 			action={action}
 			size={size}
-			backgroundColor={() => options().palette.background}
-			backgroundTransparency={() => options().backgroundTransparency ?? 0}
+			backgroundColor={() => read(options().palette).background}
+			backgroundTransparency={() => read(options().backgroundTransparency) ?? 0}
 			cornerRadius={() => new UDim(0, px(8))}
 			native={{
 				MouseEnter: () => mouseOverInterface(true),
@@ -48,15 +48,15 @@ export function MainSuggestion({
 			<Padding all={() => new UDim(0, px(8))} />
 
 			<Badge
-				color={() => options().palette.highlight}
+				color={() => read(options().palette).highlight}
 				text={() => {
 					const currentSuggestion = read(suggestion);
 					return currentSuggestion !== undefined &&
 						currentSuggestion.type === "argument"
 						? currentSuggestion.dataType
 						: "";
 				}}
-				textColor={() => options().palette.surface}
+				textColor={() => read(options().palette).surface}
 				textSize={() => px(SUGGESTION_TEXT_SIZE)}
 				visible={() => {
 					const currentSuggestion = read(suggestion);
@@ -81,24 +81,24 @@ export function MainSuggestion({
 					return currentSuggestion?.type === "argument"
 						? currentSuggestion.title
 						: highlightMatching(
-								options().palette.highlight,
+								read(options().palette).highlight,
 								currentSuggestion?.title,
 								read(currentText),
 							);
 				}}
 				textSize={() => px(SUGGESTION_TITLE_TEXT_SIZE)}
-				textColor={() => options().palette.text}
+				textColor={() => read(options().palette).text}
 				textXAlignment="Left"
 				textYAlignment="Top"
-				font={() => options().font.bold}
+				font={() => read(options().font).bold}
 				richText
 				size={titleSize}
 			/>
 
 			<Text
 				text={() => read(suggestion)?.description ?? ""}
 				textSize={() => px(SUGGESTION_TEXT_SIZE)}
-				textColor={() => options().palette.subtext}
+				textColor={() => read(options().palette).subtext}
 				textXAlignment="Left"
 				textYAlignment="Top"
 				textWrapped
@@ -115,7 +115,7 @@ export function MainSuggestion({
 						? (currentSuggestion.error ?? "")
 						: "";
 				}}
-				textColor={() => options().palette.error}
+				textColor={() => read(options().palette).error}
 				textSize={() => px(SUGGESTION_TEXT_SIZE)}
 				textTransparency={spring(() => {
 					const currentSuggestion = read(suggestion);

diff --git a/packages/ui/src/components/suggestions/suggestion-list.tsx b/packages/ui/src/components/suggestions/suggestion-list.tsx
@@ -45,9 +45,9 @@ export function SuggestionList({
 					return (
 						<Frame
 							size={() => new UDim2(1, 0, 0, px(SUGGESTION_TEXT_SIZE + 6))}
-							backgroundColor={() => options().palette.background}
+							backgroundColor={() => read(options().palette).background}
 							backgroundTransparency={() =>
-								options().backgroundTransparency ?? 0
+								read(options().backgroundTransparency) ?? 0
 							}
 							cornerRadius={() => new UDim(0, px(8))}
 							clipsDescendants={true}
@@ -59,12 +59,12 @@ export function SuggestionList({
 								size={() => new UDim2(1, 0, 1, 0)}
 								text={() =>
 									highlightMatching(
-										options().palette.highlight,
+										read(options().palette).highlight,
 										name,
 										read(currentText),
 									)
 								}
-								textColor={() => options().palette.text}
+								textColor={() => read(options().palette).text}
 								textSize={() => px(SUGGESTION_TEXT_SIZE)}
 								textXAlignment="Left"
 								richText={true}

diff --git a/packages/ui/src/components/suggestions/suggestions.tsx b/packages/ui/src/components/suggestions/suggestions.tsx
@@ -1,5 +1,5 @@
 import { TextService } from "@rbxts/services";
-import Vide, { cleanup, derive, source, spring } from "@rbxts/vide";
+import Vide, { cleanup, derive, source, spring, read } from "@rbxts/vide";
 import {
 	SUGGESTION_TEXT_SIZE,
 	SUGGESTION_TITLE_TEXT_SIZE,
@@ -24,13 +24,13 @@ export function Suggestions() {
 
 	const titleBounds = useTextBounds({
 		text: () => currentSuggestion()?.title,
-		font: () => options().font.bold,
+		font: () => read(options().font).bold,
 		size: () => px(SUGGESTION_TITLE_TEXT_SIZE),
 	});
 
 	const descriptionBounds = useTextBounds({
 		text: () => currentSuggestion()?.description,
-		font: () => options().font.regular,
+		font: () => read(options().font).regular,
 		size: () => px(SUGGESTION_TEXT_SIZE),
 		width: () => px(MAX_SUGGESTION_WIDTH),
 	});
@@ -41,7 +41,7 @@ export function Suggestions() {
 			if (suggestion?.type === "command") return;
 			return suggestion?.dataType;
 		},
-		font: () => options().font.bold,
+		font: () => read(options().font).bold,
 		size: () => px(SUGGESTION_TEXT_SIZE),
 	});
 
@@ -51,7 +51,7 @@ export function Suggestions() {
 			if (suggestion?.type === "command") return;
 			return suggestion?.error;
 		},
-		font: () => options().font.regular,
+		font: () => read(options().font).regular,
 		size: () => px(SUGGESTION_TEXT_SIZE),
 	});
 

diff --git a/packages/ui/src/components/terminal/terminal-text-field/terminal-text-field.tsx b/packages/ui/src/components/terminal/terminal-text-field/terminal-text-field.tsx
@@ -1,5 +1,5 @@
 import { UserInputService } from "@rbxts/services";
-import Vide, { Derivable, effect, source } from "@rbxts/vide";
+import Vide, { Derivable, effect, source, read } from "@rbxts/vide";
 import { useClient } from "../../../hooks/use-client";
 import { useEvent } from "../../../hooks/use-event";
 import { px } from "../../../hooks/use-px";
@@ -158,7 +158,7 @@ export function TerminalTextField({
 			anchor={anchor}
 			size={size}
 			position={position}
-			backgroundColor={() => options().palette.surface}
+			backgroundColor={() => read(options().palette).surface}
 			backgroundTransparency={backgroundTransparency}
 			cornerRadius={() => new UDim(0, px(4))}
 		>
@@ -170,13 +170,13 @@ export function TerminalTextField({
 				textSize={() => px(TEXT_SIZE)}
 				textColor={() => {
 					return terminalTextValid()
-						? options().palette.success
-						: options().palette.error;
+						? read(options().palette).success
+						: read(options().palette).error;
 				}}
 				textXAlignment="Left"
 				placeholderText="Enter command..."
-				placeholderColor={() => options().palette.subtext}
-				font={() => options().font.medium}
+				placeholderColor={() => read(options().palette).subtext}
+				font={() => read(options().font).medium}
 				clearTextOnFocus={false}
 				native={{
 					FocusLost: (enterPressed) => {
@@ -234,10 +234,10 @@ export function TerminalTextField({
 			<Text
 				size={UDim2.fromScale(1, 1)}
 				text={suggestionText}
-				textColor={() => options().palette.subtext}
+				textColor={() => read(options().palette).subtext}
 				textSize={() => px(TEXT_SIZE)}
 				textXAlignment="Left"
-				font={() => options().font.medium}
+				font={() => read(options().font).medium}
 			/>
 		</Frame>
 	);

diff --git a/packages/ui/src/components/terminal/terminal.tsx b/packages/ui/src/components/terminal/terminal.tsx
@@ -1,7 +1,7 @@
 import { ArgumentOptions, RegistryPath } from "@rbxts/centurion";
 import { ArrayUtil, ReadonlyDeep } from "@rbxts/centurion/out/shared/util/data";
 import { splitString } from "@rbxts/centurion/out/shared/util/string";
-import Vide, { derive, source, spring } from "@rbxts/vide";
+import Vide, { derive, source, spring, read } from "@rbxts/vide";
 import { HISTORY_TEXT_SIZE } from "../../constants/text";
 import { useClient } from "../../hooks/use-client";
 import { useHistory } from "../../hooks/use-history";
@@ -63,8 +63,8 @@ export function Terminal() {
 	return (
 		<Frame
 			size={spring(() => new UDim2(1, 0, 0, terminalHeight()), 0.2)}
-			backgroundColor={() => options().palette.background}
-			backgroundTransparency={() => options().backgroundTransparency ?? 0}
+			backgroundColor={() => read(options().palette).background}
+			backgroundTransparency={() => read(options().backgroundTransparency) ?? 0}
 			cornerRadius={() => new UDim(0, px(8))}
 			native={{
 				MouseEnter: () => mouseOverInterface(true),
@@ -83,7 +83,9 @@ export function Terminal() {
 				anchor={new Vector2(0, 1)}
 				size={() => new UDim2(1, 0, 0, px(TEXT_FIELD_HEIGHT))}
 				position={UDim2.fromScale(0, 1)}
-				backgroundTransparency={() => options().backgroundTransparency ?? 0}
+				backgroundTransparency={() =>
+					read(options().backgroundTransparency) ?? 0
+				}
 				textParts={terminalTextParts}
 				atNextPart={atNextPart}
 				onTextChange={(text) => {

diff --git a/packages/ui/src/components/ui/text-field.tsx b/packages/ui/src/components/ui/text-field.tsx
@@ -21,7 +21,7 @@ export function TextField(props: TextFieldProps) {
 			TextEditable={props.textEditable}
 			Font={Enum.Font.Unknown}
 			FontFace={() => {
-				return read(props.font) ?? options().font.regular;
+				return read(props.font) ?? read(options().font).regular;
 			}}
 			Text={props.text}
 			TextColor3={props.textColor}
@@ -34,7 +34,7 @@ export function TextField(props: TextFieldProps) {
 			TextScaled={props.textScaled}
 			RichText={props.richText}
 			AutomaticSize={props.textAutoResize}
-			AutoLocalize={() => options().autoLocalize}
+			AutoLocalize={() => read(options().autoLocalize)}
 			Size={props.size}
 			Position={props.position}
 			AnchorPoint={props.anchor}

diff --git a/packages/ui/src/components/ui/text.tsx b/packages/ui/src/components/ui/text.tsx
@@ -23,7 +23,7 @@ export interface TextProps<T extends Instance = TextLabel>
 export function Text(props: TextProps) {
 	return (
 		<textlabel
-			FontFace={() => read(props.font) ?? options().font.regular}
+			FontFace={() => read(props.font) ?? read(options().font).regular}
 			Text={props.text}
 			TextColor3={props.textColor}
 			TextSize={() => read(props.textSize) ?? px(16)}
@@ -37,7 +37,7 @@ export function Text(props: TextProps) {
 			RichText={props.richText}
 			Size={props.size}
 			AutomaticSize={props.textAutoResize}
-			AutoLocalize={() => options().autoLocalize}
+			AutoLocalize={() => read(options().autoLocalize)}
 			Position={props.position}
 			AnchorPoint={props.anchor}
 			BackgroundColor3={props.backgroundColor}